html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font: inherit; font-size: 100%; vertical-align: baseline; }

html { line-height: 1; }

ol, ul { list-style: none; }

table { border-collapse: collapse; border-spacing: 0; }

caption, th, td { text-align: left; font-weight: normal; vertical-align: middle; }

q, blockquote { quotes: none; }
q:before, q:after, blockquote:before, blockquote:after { content: ""; content: none; }

a img { border: none; }

article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary { display: block; }

/*** COLORI  ***/
/*** MM STALLA  ***/
/*** MM STALLA - GIOCHI ***/
/*** MM CUCINA  ***/
/*** MM TINELLO  ***/
/*** MM CAMERA DA LETTO ***/
/* Lista delle famiglie di font, per ogni famiglia inserisco la variabile e la sua posizione */
@font-face { font-family: "Aleo-Bold"; src: url("../font/Aleo-Bold.eot"); src: url("../font/Aleo-Bold.ttf") format("truetype"), url("../font/Aleo-Bold.eot?#iefix") format("embedded-opentype"), url("../font/Aleo-Bold.otf"), url("../font/Aleo-Bold.svg#Aleo-Bold") format("svg"), url("../font/Aleo-Bold.woff") format("woff"); }
@font-face { font-family: "Aleo-BoldItalic"; src: url("../font/Aleo-BoldItalic.eot"); src: url("../font/Aleo-BoldItalic.ttf") format("truetype"), url("../font/Aleo-BoldItalic.eot?#iefix") format("embedded-opentype"), url("../font/Aleo-BoldItalic.otf"), url("../font/Aleo-BoldItalic.svg#Aleo-BoldItalic") format("svg"), url("../font/Aleo-BoldItalic.woff") format("woff"); }
@font-face { font-family: "Aleo-Regular"; src: url("../font/Aleo-Regular.eot"); src: url("../font/Aleo-Regular.ttf") format("truetype"), url("../font/Aleo-Regular.eot?#iefix") format("embedded-opentype"), url("../font/Aleo-Regular.otf"), url("../font/Aleo-Regular.svg#Aleo-Regular") format("svg"), url("../font/Aleo-Regular.woff") format("woff"); }
@font-face { font-family: "Aleo-Italic"; src: url("../font/Aleo-Italic.eot"); src: url("../font/Aleo-Italic.ttf") format("truetype"), url("../font/Aleo-Italic.eot?#iefix") format("embedded-opentype"), url("../font/Aleo-Italic.otf"), url("../font/Aleo-Italic.svg#Aleo-Italic") format("svg"), url("../font/Aleo-Italic.woff") format("woff"); }
@font-face { font-family: "Aleo-Light"; src: url("../font/Aleo-Light.eot"); src: url("../font/Aleo-Light.ttf") format("truetype"), url("../font/Aleo-Light.eot?#iefix") format("embedded-opentype"), url("../font/Aleo-Light.otf"), url("../font/Aleo-Light.svg#Aleo-Light") format("svg"), url("../font/Aleo-Light.woff") format("woff"); }
@font-face { font-family: "Aleo-LightItalic"; src: url("../font/Aleo-LightItalic.eot"); src: url("../font/Aleo-LightItalic.ttf") format("truetype"), url("../font/Aleo-LightItalic.eot?#iefix") format("embedded-opentype"), url("../font/Aleo-LightItalic.otf"), url("../font/Aleo-LightItalic.svg#Aleo-LightItalic") format("svg"), url("../font/Aleo-LightItalic.woff") format("woff"); }
@font-face { font-family: "Overpass-Bold"; src: url("../font/Overpass-Bold.eot"); src: url("../font/Overpass-Bold.ttf") format("truetype"), url("../font/Overpass-Bold.eot?#iefix") format("embedded-opentype"), url("../font/Overpass-Bold.otf"), url("../font/Overpass-Bold.svg#Overpass-Bold") format("svg"), url("../font/Overpass-Bold.woff") format("woff"); }
@font-face { font-family: "Overpass-BoldItalic"; src: url("../font/Overpass-BoldItalic.eot"); src: url("../font/Overpass-BoldItalic.ttf") format("truetype"), url("../font/Overpass-BoldItalic.eot?#iefix") format("embedded-opentype"), url("../font/Overpass-BoldItalic.otf"), url("../font/Overpass-BoldItalic.svg#Overpass-BoldItalic") format("svg"), url("../font/Overpass-BoldItalic.woff") format("woff"); }
@font-face { font-family: "Overpass-Regular"; src: url("../font/Overpass-Regular.eot"); src: url("../font/Overpass-Regular.ttf") format("truetype"), url("../font/Overpass-Regular.eot?#iefix") format("embedded-opentype"), url("../font/Overpass-Regular.otf"), url("../font/Overpass-Regular.svg#Overpass-Regular") format("svg"), url("../font/Overpass-Regular.woff") format("woff"); }
@font-face { font-family: "Overpass-Italic"; src: url("../font/Overpass-Italic.eot"); src: url("../font/Overpass-Italic.ttf") format("truetype"), url("../font/Overpass-Italic.eot?#iefix") format("embedded-opentype"), url("../font/Overpass-Italic.otf"), url("../font/Overpass-Italic.svg#Overpass-Italic") format("svg"), url("../font/Overpass-Italic.woff") format("woff"); }
@font-face { font-family: "Overpass-Light"; src: url("../font/Overpass-Light.eot"); src: url("../font/Overpass-Light.ttf") format("truetype"), url("../font/Overpass-Light.eot?#iefix") format("embedded-opentype"), url("../font/Overpass-Light.otf"), url("../font/Overpass-Light.svg#Overpass-Light") format("svg"), url("../font/Overpass-Light.woff") format("woff"); }
@font-face { font-family: "Overpass-LightItalic"; src: url("../font/Overpass-LightItalic.eot"); src: url("../font/Overpass-LightItalic.ttf") format("truetype"), url("../font/Overpass-LightItalic.eot?#iefix") format("embedded-opentype"), url("../font/Overpass-LightItalic.otf"), url("../font/Overpass-LightItalic.svg#Overpass-LightItalic") format("svg"), url("../font/Overpass-LightItalic.woff") format("woff"); }
@font-face { font-family: "BerlinSansFB-Bold"; src: url("../font/BerlinSansFB-Bold.eot"); src: url("../font/BerlinSansFB-Bold.ttf") format("truetype"), url("../font/BerlinSansFB-Bold.eot?#iefix") format("embedded-opentype"), url("../font/BerlinSansFB-Bold.otf"), url("../font/BerlinSansFB-Bold.svg#BerlinSansFB-Bold") format("svg"), url("../font/BerlinSansFB-Bold.woff") format("woff"); }
@font-face { font-family: "BerlinSansFBDemi-Bold"; src: url("../font/BerlinSansFBDemi-Bold.eot"); src: url("../font/BerlinSansFBDemi-Bold.ttf") format("truetype"), url("../font/BerlinSansFBDemi-Bold.eot?#iefix") format("embedded-opentype"), url("../font/BerlinSansFBDemi-Bold.otf"), url("../font/BerlinSansFBDemi-Bold.svg#BerlinSansFBDemi-Bold") format("svg"), url("../font/BerlinSansFBDemi-Bold.woff") format("woff"); }
@font-face { font-family: "BerlinSansFB-Reg"; src: url("../font/BerlinSansFB-Reg.eot"); src: url("../font/BerlinSansFB-Reg.ttf") format("truetype"), url("../font/BerlinSansFB-Reg.eot?#iefix") format("embedded-opentype"), url("../font/BerlinSansFB-Reg.otf"), url("../font/BerlinSansFB-Reg.svg#BerlinSansFB-Reg") format("svg"), url("../font/BerlinSansFB-Reg.woff") format("woff"); }
* { margin: 0; padding: 0; -webkit-font-smoothing: antialiased; transition: opacity 0.5s; }

html { display: block; width: 100%; height: 100%; }
html body { display: block; position: relative; width: 100%; height: 100%; color: #fff; font-family: "Overpass-Light"; background-color: #e94e1a; line-height: 1.5em; overflow: hidden; }
html body .btn { display: block; position: absolute; top: 0; right: 0; width: 8vh; height: 8vh; background-size: contain; background-repeat: no-repeat; background-position: center; }
html body .btn a { display: block; width: 100%; height: 100%; }
html body .btn.close { background-image: url("../layout/icon-close_white.png"); }
html body .btn.audio { top: calc(200px - 1vh); z-index: 99; background-image: url("../layout/icon-audio_white.svg"); background-color: rgba(0, 0, 0, 0.5); background-size: 60%; background-position: center 5px; border-top-left-radius: 5px; border-bottom-left-radius: 5px; }
html body .btn.audio::after { display: block; content: "AUDIO"; width: 100%; text-align: center; margin-top: -24px; font-size: 1.2vh; letter-spacing: 2px; }
html body .btn.audio.pausa { background-image: url("../layout/icon-pause_white.svg"); }
html body .btn.audio.pausa::after { content: "PAUSA"; }
html body #splashpage { display: block; position: fixed; width: 100%; height: 100%; top: 0; left: 0; background-color: #e94e1a; pointer-events: none; opacity: 0; z-index: -1; transition: all 0.5s ease; }
html body #splashpage.active { pointer-events: all; opacity: 1; z-index: 9999; }
html body #splashpage .splash-container { display: block; width: 100%; height: 100%; }
html body #splashpage .splash-container .splash-content { display: block; position: relative; width: 80vw; height: 80vh; margin: 10vh 10vw; }
html body #splashpage .splash-container .splash-content h1 { display: block; width: 100%; position: absolute; top: calc(30% - 10vh); color: #762200; text-transform: uppercase; text-align: center; }
html body #splashpage .splash-container .splash-content img { display: block; position: absolute; bottom: 0; width: 100%; max-height: 500px; object-fit: contain; object-position: center; }
html body nav#menu { display: block; position: fixed; bottom: 0; width: 100%; height: 10vh; z-index: 99; background-color: #fff; box-shadow: 0 0 20px #762200; }
html body nav#menu ul { display: block; width: 100%; height: 100%; }
html body nav#menu ul li { display: block; width: 50%; height: 100%; }
html body nav#menu ul li.map { float: left; }
html body nav#menu ul li.map a .icon { background-image: url("../layout/icon-menu-map_unselected.svg"); }
html body nav#menu ul li.qr-scan { float: right; }
html body nav#menu ul li.qr-scan a .icon { background-image: url("../layout/icon-menu-qr_unselected.svg"); }
html body nav#menu ul li.selected.map a .icon { background-image: url("../layout/icon-menu-map_selected.svg"); }
html body nav#menu ul li.selected.qr-scan a .icon { background-image: url("../layout/icon-menu-qr_selected.svg"); }
html body nav#menu ul li.selected a::before { background-color: #e94e1a; }
html body nav#menu ul li.selected a h2 { color: #e94e1a; }
html body nav#menu ul li a { display: block; width: 100%; height: 100%; }
html body nav#menu ul li a::before { display: block; content: ""; width: 100%; height: 5px; background-color: #fff; }
html body nav#menu ul li a .icon { display: block; width: 5vh; height: 5vh; margin: 5px auto 0; background-size: contain; background-position: center; background-repeat: no-repeat; }
html body nav#menu ul li a h2 { text-transform: uppercase; text-align: center; font-family: "Overpass-Bold"; font-size: 12px; color: #867875; }
html body #map-page { display: block; position: absolute; width: 100%; height: calc(100% - 10vh); opacity: 0; z-index: -1; pointer-events: none; transition: all 0.5s ease; }
html body #map-page.active { opacity: 1; z-index: 99; pointer-events: all; }
html body #map-page .info-container { display: block; position: absolute; width: 100%; height: 100%; opacity: 0; z-index: -1; pointer-events: none; transition: all 0.5s ease; }
html body #map-page .info-container.active { opacity: 1; z-index: 99; pointer-events: all; }
html body #map-page .info-container .info-content { display: block; width: 100%; height: 100%; overflow-x: auto; }
html body #map-page .info-container .info-content .title { display: block; position: absolute; top: 0; width: calc(100% - 10vh); height: 3vh; padding: 2.5vh 5vh; background-color: #fff; z-index: 9; }
html body #map-page .info-container .info-content .title h2 { color: #e94e1a; text-align: center; }
html body #map-page .info-container .info-content .image { display: block; position: absolute; width: 100%; height: 200px; background-color: #867875; margin-top: 8vh; }
html body #map-page .info-container .info-content .image.scroll { box-shadow: 0 0 20px #762200; }
html body #map-page .info-container .info-content .image img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
html body #map-page .info-container .info-content .text { display: block; width: calc(100% - 10vh); padding: 5vh; margin-top: calc(8vh + 200px); }
html body #map-page .info-container .info-content .text h2, html body #map-page .info-container .info-content .text h3 { margin-bottom: 2vh; line-height: 1.2em; }
html body #map-page .info-container .info-content .text a { color: #fff; text-decoration: underline; font-family: "Aleo-Bold"; word-break: break-word; }
html body #map-page .info-container .info-content .text .box-challenge { display: block; width: 100%; margin: 5vh auto; }
html body #map-page .info-container .info-content .text .box-challenge .challenge-text { padding: 2.5vh; background-color: #762200; }
html body #map-page .map-container { display: block; position: absolute; width: 100%; height: 100%; opacity: 0; z-index: -1; pointer-events: none; transition: all 0.5s ease; }
html body #map-page .map-container.active { opacity: 1; z-index: 99; pointer-events: all; }
html body #map-page .map-container .map-content { display: block; width: 100%; height: 100%; overflow-x: auto; }
html body #map-page .map-container .map-content .title { display: block; position: absolute; top: 0; width: calc(100% - 10vh); height: 3vh; padding: 2.5vh 5vh; background-color: #fff; z-index: 9; }
html body #map-page .map-container .map-content .title h2 { color: #e94e1a; text-align: center; }
html body #map-page .map-container .map-content #map { display: block; width: 100%; height: calc(100% - 8vh); margin-top: 8vh; /* POPUP MARKER */ /* X CHIUSURA POPUP MARKER */ /* TASTI ZOOM MAPPA */ }
html body #map-page .map-container .map-content #map .leaflet-popup-content-wrapper { border-radius: 0; }
html body #map-page .map-container .map-content #map .leaflet-popup-content-wrapper .leaflet-popup-content p { font-family: "Aleo-Bold"; color: #867875; }
html body #map-page .map-container .map-content #map .leaflet-container a.leaflet-popup-close-button { color: #e94e1a; }
html body #map-page .map-container .map-content #map .leaflet-control-container { display: block; position: relative; width: 100%; height: 100%; }
html body #map-page .map-container .map-content #map .leaflet-control-container div { display: block; position: relative; width: 100%; height: 100%; }
html body #map-page .map-container .map-content #map .leaflet-control-container div .leaflet-control-zoom { display: block; position: absolute; bottom: 2vh; right: 2vh; height: 10vh; width: 5vh; margin: 0 !important; box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); }
html body #map-page .map-container .map-content #map .leaflet-control-container div .leaflet-control-zoom a { width: 5vh; height: 5vh; line-height: 6vh; color: #e94e1a; font-family: "Overpass-Light"; border-radius: 0 !important; }
html body #qr-scan { display: block; position: absolute; width: 100%; height: calc(100% - 10vh); opacity: 0; z-index: -1; pointer-events: none; transition: all 0.5s ease; }
html body #qr-scan.active { opacity: 1; z-index: 99; pointer-events: all; }
html body #qr-scan::after { display: block; content: ""; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-color: rgba(0, 0, 0, 0.95); z-index: -1; }
html body #qr-scan #reader { display: block; width: 100%; height: 100%; position: relative; }
html body #qr-scan #reader video { display: block; max-width: 100%; max-height: 100%; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; }
html body #popup-intro { display: block; position: fixed; width: 100%; height: 100%; background-color: rgba(154, 51, 15, 0.95); opacity: 0; z-index: -1; pointer-events: none; transition: all 0.5s ease; }
html body #popup-intro.active { opacity: 1; z-index: 999; pointer-events: all; }
html body #popup-intro .intro-container { display: block; width: calc(100% - 10vh); height: calc(100% - 20vh); padding: 10vh 5vh; }
html body #popup-intro .intro-container .intro-content { display: block; height: 100%; overflow: auto; }
html body #popup-intro .intro-container .intro-content h3 { text-transform: uppercase; margin-bottom: 5vh; }
html body #popup-intro .intro-container .intro-content h4 { margin: 1vh 0 2vh; }
html body #popup-intro .intro-container .intro-content ul li { margin-left: 20px; list-style-type: disc; }

a { text-decoration: none; }

sup { font-size: 0.7em; line-height: 1em; vertical-align: top; }

i, em { font-style: italic; }

b, strong { font-weight: 700; }

li { font-family: "Overpass-Light"; }

h1, h2, h3, h4 { font-family: "Aleo-Bold"; }

h1 { font-size: 32px; font-size: 5vh; line-height: 1.2em; }

h2 { font-size: 24px; font-size: 3vh; font-size: 2.5vh; }

h3 { font-size: 21px; font-size: 2.5vh; font-size: 2.2vh; }

h4 { font-size: 16px; font-size: 2vh; }

p, span { font-family: "Overpass-Light"; font-size: 16px; font-size: 2vh; line-height: 1.8em; }