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; }

/* Lista delle famiglie di font, per ogni famiglia inserisco la variabile e la sua posizione */
@font-face { font-family: "Roboto-Bold"; src: url("../fonts/Roboto-Bold.eot"); src: url("../fonts/Roboto-Bold.ttf") format("truetype"), url("../fonts/Roboto-Bold.eot?#iefix") format("embedded-opentype"), url("../fonts/Roboto-Bold.svg#Roboto-Bold") format("svg"), url("../fonts/Roboto-Bold.woff") format("woff"), url("../font/Roboto-Bold.woff2") format("woff2"); }
@font-face { font-family: "Roboto-BoldItalic"; src: url("../fonts/Roboto-BoldItalic.eot"); src: url("../fonts/Roboto-BoldItalic.ttf") format("truetype"), url("../fonts/Roboto-BoldItalic.eot?#iefix") format("embedded-opentype"), url("../fonts/Roboto-BoldItalic.svg#Roboto-BoldItalic") format("svg"), url("../fonts/Roboto-BoldItalic.woff") format("woff"), url("../font/Roboto-BoldItalic.woff2") format("woff2"); }
@font-face { font-family: "Roboto-Regular"; src: url("../fonts/Roboto-Regular.eot"); src: url("../fonts/Roboto-Regular.ttf") format("truetype"), url("../fonts/Roboto-Regular.eot?#iefix") format("embedded-opentype"), url("../fonts/Roboto-Regular.svg#Roboto-Regular") format("svg"), url("../fonts/Roboto-Regular.woff") format("woff"), url("../font/Roboto-Regular.woff2") format("woff2"); }
@font-face { font-family: "Roboto-Italic"; src: url("../fonts/Roboto-Italic.eot"); src: url("../fonts/Roboto-Italic.ttf") format("truetype"), url("../fonts/Roboto-Italic.eot?#iefix") format("embedded-opentype"), url("../fonts/Roboto-Italic.svg#Roboto-Italic") format("svg"), url("../fonts/Roboto-Italic.woff") format("woff"), url("../font/Roboto-Italic.woff2") format("woff2"); }
@font-face { font-family: "Roboto-Light"; src: url("../fonts/Roboto-Light.eot"); src: url("../fonts/Roboto-Light.ttf") format("truetype"), url("../fonts/Roboto-Light.eot?#iefix") format("embedded-opentype"), url("../fonts/Roboto-Light.svg#Roboto-Light") format("svg"), url("../fonts/Roboto-Light.woff") format("woff"), url("../font/Roboto-Light.woff2") format("woff2"); }
@font-face { font-family: "Roboto-LightItalic"; src: url("../fonts/Roboto-LightItalic.eot"); src: url("../fonts/Roboto-LightItalic.ttf") format("truetype"), url("../fonts/Roboto-LightItalic.eot?#iefix") format("embedded-opentype"), url("../fonts/Roboto-LightItalic.svg#Roboto-LightItalic") format("svg"), url("../fonts/Roboto-LightItalic.woff") format("woff"), url("../font/Roboto-LightItalic.woff2") format("woff2"); }
/* COLORI UFFICIALI */
sup { font-size: 0.7em; line-height: 1em; vertical-align: top; }

i, em { font-style: italic; }

b, strong { font-family: "Roboto-Bold"; }

* { margin: 0; padding: 0; -webkit-font-smoothing: antialiased; transition: opacity 0.5s; cursor: none !important; user-select: none; box-sizing: border-box; }
* a:active { opacity: 0.5; }

::-webkit-scrollbar { width: 0; height: 0; }

html { display: block; width: 100%; height: 100%; overflow: hidden; }
html body { display: block; width: 100%; height: 100%; -webkit-text-size-adjust: none; background-color: #f2f2f2; /* SPLASHPAGE */ /* APP CONTAINER */ /* VIDEO PLAYER */ }
@keyframes moveBackground { 0% { background-position: 0 0; }
  50% { background-position: var(--randomX) var(--randomY); }
  75% { background-position: var(--randomX) var(--randomY); }
  100% { background-position: 0 0; } }
html body #splashpage { display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100vh; margin: auto; background-color: #fff; opacity: 0; pointer-events: none; z-index: -1; transition: all 0.5s ease; }
html body #splashpage.active { opacity: 1; pointer-events: all; z-index: 999; }
html body #splashpage #splash-container { display: block; position: relative; width: 100%; height: 100vh; background-image: url("../layout/img_splash.jpg"); background-size: cover; background-position: center; background-repeat: no-repeat; }
html body #splashpage #splash-container .animation-app { display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; margin: auto; }
html body #splashpage #splash-container .animation-app img { display: block; width: 50%; max-width: 150px; height: 60px; margin: 50px 0 0 50px; object-fit: contain; object-position: left center; }
html body #splashpage #splash-container .animation-app .animation-icons { display: block; position: absolute; top: auto; bottom: 50px; left: 50px; right: 50px; width: calc(100% - 100px); height: 60%; max-height: 470px; overflow: hidden; }
html body #splashpage #splash-container .animation-app .animation-icons ul { display: flex; flex-wrap: wrap; }
html body #splashpage #splash-container .animation-app .animation-icons ul li { display: inline-flex; align-items: flex-start; flex: 1 0 20%; width: 25%; height: 0; margin: 0 5px 5px 0; padding-bottom: calc(25% - 5px); background-image: url("../layout/icon_texture-color.svg"); background-size: 100%; background-position: var(--randomX) var(--randomY); background-repeat: no-repeat; transition: background-position 0.5s ease; animation: moveBackground var(--animation-duration, 3s) ease infinite; animation-delay: var(--animation-delay, 0s); }
html body #app-container { display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; margin: auto; transition: all 0.3s ease; }
html body #app-container header { display: block; position: absolute; top: 0; width: 100%; height: 10vh; background-image: url("../layout/header_texture-white.svg"); background-position: center; background-size: cover; background-repeat: no-repeat; box-shadow: 0 0 50px rgba(60, 60, 59, 0.2); z-index: 10; }
html body #app-container header.project { background-color: #ffbc15; }
html body #app-container header.stories { background-color: #f47b5b; }
html body #app-container header.explore, html body #app-container header.poi-detail { background-color: #3cc8fa; }
html body #app-container header.favourites { background-color: #80c965; }
html body #app-container header #title-page { display: table; width: calc(80% - 8vh); height: 100%; margin: 0 auto; }
html body #app-container header #title-page h1 { display: table-cell; vertical-align: middle; color: #fff; font-size: 24px; font-family: "Roboto-Bold"; text-transform: initial; text-align: center; }
@media screen and (min-width: 768px) { html body #app-container header { height: 10vh; }
  html body #app-container header #title-page h1 { font-size: 2em; } }
html body #app-container main { display: block; position: absolute; top: 10vh; width: 100%; height: calc(100dvh - 10vh - 10vh); border-bottom-left-radius: 25px; border-bottom-right-radius: 25px; background-color: #fff; overflow: hidden; }
html body #app-container main.disabled { display: none; }
html body #app-container main #panoramic-container { display: block; position: fixed; top: 0; left: 0; width: 100%; height: 100%; backdrop-filter: blur(5px); background-color: rgba(60, 60, 59, 0.8); opacity: 0; pointer-events: none; z-index: -1; }
html body #app-container main #panoramic-container #panoramic { backdrop-filter: blur(5px); background-color: rgba(60, 60, 59, 0.8); }
html body #app-container main #panoramic-container #panoramic video { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center; }
html body #app-container main #panoramic-container.active { opacity: 1; pointer-events: all; z-index: 999; }
html body #app-container main #panoramic-container .btn.close { top: 5vh; right: 10%; opacity: 0; }
html body #app-container main #panoramic-container .btn.close.active { opacity: 1; pointer-events: all; z-index: 999; }
html body #app-container main #project { display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; margin: auto; opacity: 0; pointer-events: none; z-index: -1; transition: all 0.5s ease; }
html body #app-container main #project.active { opacity: 1; pointer-events: all; z-index: 999; }
html body #app-container main #project .project-container { display: block; position: relative; width: 100%; height: 100%; overflow: auto; }
html body #app-container main #project .project-container .text-container { display: block; width: 90%; margin: 5vh auto; }
html body #app-container main #project .project-container .text-container img { display: block; width: 100%; max-width: 500px; margin: 0 auto 20px; object-fit: contain; object-position: center; }
html body #app-container main #project .project-container .text-container p { font-family: "Roboto-Regular"; color: #3c3c3b; line-height: 1.5em; margin-bottom: 20px; }
html body #app-container main #project .project-container .text-container p a { color: #3c3c3b; font-family: "Roboto-Bold"; }
html body #app-container main #project .project-container .text-container::after { display: block; content: ""; bottom: 0px; width: 100%; height: 50px; background-image: url("../layout/img-loghi_istituzionali.jpg"); background-position: left center; background-repeat: no-repeat; background-size: contain; }
html body #app-container main #project .project-container #gallery { position: relative; width: 100%; height: 30vh; }
html body #app-container main #project .project-container #gallery ul.images { display: block; scroll-snap-type: x mandatory; width: 100%; height: 100%; margin: 0 auto; white-space: nowrap; overflow-x: auto; overflow-y: hidden; }
html body #app-container main #project .project-container #gallery ul.images::after { display: block; content: ""; position: absolute; bottom: 0; width: 100%; height: 6vh; background: linear-gradient(0deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 100%); }
html body #app-container main #project .project-container #gallery ul.images li { display: inline-block; width: 100%; height: 100%; scroll-snap-align: start; scroll-snap-stop: normal; justify-content: center; align-items: center; background-color: #f2f2f2; }
html body #app-container main #project .project-container #gallery ul.images li img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
html body #app-container main #project .project-container #gallery ul.pagination { display: block; position: absolute; width: 80%; height: 10px; bottom: 2vh; left: 0; right: 0; margin: auto; text-align: center; }
html body #app-container main #project .project-container #gallery ul.pagination li { display: inline-block; width: 10px; height: 10px; margin: 0px 2px; border-radius: 100%; vertical-align: top; background-color: #fff; transition: all 0.5s ease; }
html body #app-container main #project .project-container #gallery ul.pagination li.selected { background-color: #ffbc15; }
@media screen and (min-width: 768px) { html body #app-container main #project .project-container .text-container img { margin-bottom: 50px; }
  html body #app-container main #project .project-container .text-container p { font-size: 1.2em; line-height: 1.8em; } }
html body #app-container main #stories { display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; margin: auto; opacity: 0; pointer-events: none; z-index: -1; transition: all 0.5s ease; }
html body #app-container main #stories.active { opacity: 1; pointer-events: all; z-index: 999; }
html body #app-container main #stories .stories-container { display: block; position: relative; width: 100%; height: 100%; }
html body #app-container main #stories .stories-container ul.stories-list { display: flex; scroll-snap-type: x mandatory; width: 100%; height: 100%; margin: 0 auto; white-space: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scroll-behavior: smooth; }
html body #app-container main #stories .stories-container ul.stories-list li { display: inline-block; position: relative; flex: 0 0 90%; width: 90%; height: 90%; max-height: calc(100% - 5vh - 10px - 1vh - 3vh); margin: auto 5%; border-radius: 35px; scroll-snap-align: center; background-color: #fff; box-shadow: 0 0 20px rgba(60, 60, 59, 0.2); }
html body #app-container main #stories .stories-container ul.stories-list li a { display: block; width: 100%; height: 100%; }
html body #app-container main #stories .stories-container ul.stories-list li a .video-container { display: block; position: relative; width: 100%; height: 100%; }
html body #app-container main #stories .stories-container ul.stories-list li a .video-container::before { content: ""; display: block; position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: 10vh; height: 10vh; margin: auto; background-image: url("../layout/icon-btn_video-play-white.svg"); background-size: contain; background-position: center; background-repeat: no-repeat; filter: drop-shadow(0px 0px 5px #f47b5b); z-index: 9; }
html body #app-container main #stories .stories-container ul.stories-list li a .video-container::after { content: ""; display: block; position: absolute; bottom: 0; width: 100%; height: 50%; border-radius: 25px; background: linear-gradient(0deg, #f47b5b 0%, rgba(244, 123, 91, 0) 100%); z-index: 0; }
html body #app-container main #stories .stories-container ul.stories-list li a .video-container video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; border-radius: 25px; }
html body #app-container main #stories .stories-container ul.stories-list li a .video-container h3 { display: block; position: absolute; width: 90%; left: 0; right: 0; bottom: 20px; margin: auto; color: #fff; font-family: "Roboto-Bold"; font-size: 1.2em; text-align: center; text-wrap: auto; z-index: 9; }
html body #app-container main #stories .stories-container ul.stories-list li a .video-container.playing { display: block; position: fixed !important; height: calc(100% - 20vh); top: 0; left: 0; right: 0; bottom: 0; margin: auto; border-bottom-left-radius: 20px; border-bottom-right-radius: 20px; background-color: rgba(60, 60, 59, 0.9); backdrop-filter: blur(5px); z-index: 999; }
html body #app-container main #stories .stories-container ul.stories-list li a .video-container.playing::before, html body #app-container main #stories .stories-container ul.stories-list li a .video-container.playing::after { display: none; }
html body #app-container main #stories .stories-container ul.stories-list li a .video-container.playing h3 { display: none; }
html body #app-container main #stories .stories-container ul.stories-list li a .video-container.playing video { position: fixed; z-index: 99; top: 0; left: 0; right: 0; bottom: 0; margin: auto; object-fit: contain !important; }
html body #app-container main #stories .stories-container ul.pagination { display: block; position: absolute; width: 80%; height: 10px; bottom: 2vh; left: 0; right: 0; margin: auto; text-align: center; }
html body #app-container main #stories .stories-container ul.pagination li { display: inline-block; width: 10px; height: 10px; margin: 0px 2px; border-radius: 100%; vertical-align: top; background-color: rgba(244, 123, 91, 0.2); transition: all 0.5s ease; }
html body #app-container main #stories .stories-container ul.pagination li.selected { background-color: #f47b5b; }
@media screen and (min-width: 768px) { html body #app-container main #stories .stories-container ul.stories-list li { max-width: 700px; margin: 5vh calc(50% - 350px) 0; }
  html body #app-container main #stories .stories-container ul.stories-list li a .video-container h3 { bottom: 50px; font-size: 2em; } }
html body #app-container main #explore { display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; margin: auto; opacity: 0; pointer-events: none; z-index: -1; transition: all 0.5s ease; }
html body #app-container main #explore.active { opacity: 1; pointer-events: all; z-index: 5; }
html body #app-container main #explore .explore-container { display: block; position: relative; width: 100%; height: 100%; }
html body #app-container main #explore .explore-container #map { display: block; position: absolute; top: 0; width: 100%; height: 100%; z-index: 0; }
html body #app-container main #explore .explore-container #map.leaflet-container .leaflet-map-pane .leaflet-popup-pane .leaflet-popup .leaflet-popup-content-wrapper .leaflet-popup-content a { font-size: 1.2em; color: #3c3c3b; font-family: "Roboto-Bold"; text-decoration: none; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
html body #app-container main #explore .explore-container #map.leaflet-container .leaflet-map-pane .leaflet-popup-pane .leaflet-popup .leaflet-popup-content-wrapper .leaflet-popup-content a .poi-arrow { content: ""; display: inline-block; width: 18px; height: 18px; background: url(../layout/icon-btn_arrow-black.svg) no-repeat; background-size: 18px; }
@media screen and (min-width: 1920px) { html body #app-container main #explore .explore-container #map.leaflet-container .leaflet-map-pane .leaflet-popup-pane .leaflet-popup .leaflet-popup-content-wrapper .leaflet-popup-content a { font-size: 3em; word-break: break-word; }
  html body #app-container main #explore .explore-container #map.leaflet-container .leaflet-map-pane .leaflet-popup-pane .leaflet-popup .leaflet-popup-content-wrapper .leaflet-popup-content a .poi-arrow { display: none !important; width: 38px; height: 38px; background-size: 38px; } }
html body #app-container main #explore .explore-container #map.leaflet-container .leaflet-control-container .leaflet-top.leaflet-left .leaflet-control-zoom { margin-top: 5vh; margin-left: 18px; border: none !important; }
html body #app-container main #explore .explore-container #map.leaflet-container .leaflet-control-container .leaflet-top.leaflet-left .leaflet-control-zoom a { color: #3c3c3b; font-family: "Roboto-Bold"; background-color: #fff; }
html body #app-container main #explore .explore-container #map.leaflet-container .leaflet-control-container .leaflet-top.leaflet-left .leaflet-control-zoom a.leaflet-control-zoom-in { border-top-left-radius: 20px; border-top-right-radius: 20px; }
html body #app-container main #explore .explore-container #map.leaflet-container .leaflet-control-container .leaflet-top.leaflet-left .leaflet-control-zoom a.leaflet-control-zoom-out { border-bottom-left-radius: 20px; border-bottom-right-radius: 20px; }
html body #app-container main #explore .explore-container #map.leaflet-container .leaflet-control-container .leaflet-top.leaflet-left .leaflet-control-zoom a.leaflet-disabled { background-color: #fff; opacity: 0.5; }
html body #app-container main #explore .explore-container #map.leaflet-container .leaflet-control-container .leaflet-bottom.leaflet-right .leaflet-control-attribution { display: none !important; }
html body #app-container main #explore .explore-container #user-geolocation { display: block; position: absolute; top: calc(18% + 0px); left: 5px; width: 50px; height: 50px; border-radius: 100%; background-image: url("../layout/icon-btn_gps-disabled.svg"); background-repeat: no-repeat; background-size: contain; background-position: center; background-color: #fff; }
html body #app-container main #explore .explore-container #user-geolocation.enabled { background-image: url("../layout/icon-btn_gps-enabled.svg"); }
html body #app-container main #explore .explore-container .popup.gps { display: block; position: fixed; top: 0; bottom: 0; left: 0; right: 0; margin: auto; opacity: 0; pointer-events: none; z-index: -1; transition: all 0.5s ease; }
html body #app-container main #explore .explore-container .popup.gps.active { opacity: 1; pointer-events: all; z-index: 999; }
html body #app-container main #explore .explore-container .popup.gps::after { content: ""; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; backdrop-filter: blur(5px); background-color: rgba(60, 200, 250, 0.8); z-index: -1; }
html body #app-container main #explore .explore-container .popup.gps .popup-container .btn.close { top: -5vh; right: 0; }
html body #app-container main #explore .explore-container .popup.gps .alert-gps, html body #app-container main #explore .explore-container .popup.gps .error-gps { width: 80%; height: 25vh; display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 80%; height: 25vh; margin: auto; padding: 20px 0px; text-align: center; border-radius: 30px; box-shadow: 0 0 20px rgba(60, 60, 59, 0.5); opacity: 0; pointer-events: none; }
html body #app-container main #explore .explore-container .popup.gps .alert-gps.active, html body #app-container main #explore .explore-container .popup.gps .error-gps.active { opacity: 1; pointer-events: all; }
html body #app-container main #explore .explore-container .popup.gps .alert-gps h2, html body #app-container main #explore .explore-container .popup.gps .error-gps h2 { font-size: 1.5em; font-family: "Roboto-Bold"; text-transform: uppercase; margin-bottom: 20px; padding: 0 25px; }
html body #app-container main #explore .explore-container .popup.gps .alert-gps p, html body #app-container main #explore .explore-container .popup.gps .error-gps p { font-size: 1em; font-family: "Roboto-Regular"; line-height: 1.2em; padding: 0 25px; }
html body #app-container main #explore .explore-container .popup.gps .alert-gps { background-color: #ff0000; }
html body #app-container main #explore .explore-container .popup.gps .alert-gps h2 { color: #fff; }
html body #app-container main #explore .explore-container .popup.gps .alert-gps p { color: #fff; }
html body #app-container main #explore .explore-container .popup.gps .error-gps { background-color: #ff0000; }
html body #app-container main #explore .explore-container .popup.gps .error-gps h2 { color: #fff; }
html body #app-container main #explore .explore-container .popup.gps .error-gps p { color: #fff; }
html body #app-container main #explore .explore-container .popup.gps .alert-poi { display: table; position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: calc(80% - 0px); height: 20vh; margin: auto; border-radius: 30px; background-color: #fff; box-shadow: 0 0 20px rgba(60, 60, 59, 0.5); opacity: 0; pointer-events: none; }
html body #app-container main #explore .explore-container .popup.gps .alert-poi.active { opacity: 1; pointer-events: all; }
html body #app-container main #explore .explore-container .popup.gps .alert-poi a.go-to { display: block; width: calc(100% - 60px); padding: 20px 30px; border-radius: 30px; background: linear-gradient(125deg, #ea5639 0%, #f9c096 100%); box-shadow: 0 0 20px rgba(60, 60, 59, 0.5); }
html body #app-container main #explore .explore-container .popup.gps .alert-poi a.go-to h2 { color: #fff; padding-right: 50px; font-size: 1.5em; font-family: "Roboto-Bold"; text-transform: uppercase; background-image: url("../layout/icon-btn-avanti_white.svg"); background-position: center right; background-repeat: no-repeat; background-size: 50px; }
html body #app-container main #explore .explore-container .popup.gps .alert-poi a.go-to h2 span:nth-child(1) { display: block; width: 100%; font-family: "Roboto-Regular"; font-size: 0.8em; text-transform: initial; }
html body #app-container main #explore .explore-container .popup.gps .alert-poi h2 { font-size: 1.5em; font-family: "Roboto-Bold"; text-transform: uppercase; margin-bottom: 20px; padding: 0 25px; }
html body #app-container main #explore .explore-container .popup.gps .alert-poi p { font-size: 1em; font-family: "Roboto-Regular"; line-height: 1.2em; padding: 0 25px; }
html body #app-container main #explore .explore-container .pois-list { display: block; position: absolute; bottom: 0; width: 100%; overflow-x: scroll; }
html body #app-container main #explore .explore-container .pois-list ul { display: block; position: relative; padding: 20px; white-space: nowrap; }
html body #app-container main #explore .explore-container .pois-list ul::after { display: block; content: ""; position: fixed; left: 0; bottom: 10vh; width: 100%; height: 170px; border-bottom-left-radius: 25px; border-bottom-right-radius: 25px; overflow: hidden; background-color: rgba(60, 60, 59, 0.2); backdrop-filter: blur(5px); z-index: 0; }
html body #app-container main #explore .explore-container .pois-list ul li { display: inline-block; position: relative; width: 180px; height: 120px; margin-right: 10px; border-radius: 25px; border: 4px solid #3cc8fa; background-color: #dedede; box-shadow: 0 0 20px rgba(60, 60, 59, 0.2); overflow: hidden; z-index: 9; }
html body #app-container main #explore .explore-container .pois-list ul li.selected { border-color: #fff; }
html body #app-container main #explore .explore-container .pois-list ul li a { display: block; position: relative; width: 100%; height: 100%; }
html body #app-container main #explore .explore-container .pois-list ul li a::after { content: ""; display: block; position: absolute; top: 0; width: 100%; height: 100%; background: linear-gradient(0deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 100%); z-index: 0; }
html body #app-container main #explore .explore-container .pois-list ul li a img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
html body #app-container main #explore .explore-container .pois-list ul li a h3 { display: block; position: absolute; bottom: 20px; left: 20px; width: calc(100% - 40px); color: #fff; font-size: 1em; font-family: "Roboto-Bold"; line-height: 1.2em; white-space: initial; z-index: 9; }
html body #app-container main #explore .explore-container .popup.filter { display: block; position: sticky; top: 0; bottom: 0; left: 0; right: 0; width: 100%; height: 100%; margin: auto; opacity: 0; pointer-events: none; z-index: -1; transition: all 0.5s ease; }
html body #app-container main #explore .explore-container .popup.filter.active { opacity: 1; pointer-events: all; z-index: 999; }
html body #app-container main #explore .explore-container .popup.filter::after { content: ""; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; backdrop-filter: blur(5px); background-color: rgba(60, 200, 250, 0.9); z-index: 0; }
html body #app-container main #explore .explore-container .popup.filter .filter-container { display: block; position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: 90%; height: calc(80% - 5vh); max-height: 700px; margin: auto; border-radius: 30px; background-color: #fff; z-index: 9; }
html body #app-container main #explore .explore-container .popup.filter .filter-container .btn.close { top: -5vh; right: 0; }
html body #app-container main #explore .explore-container .popup.filter .filter-container .filter-content { display: block; width: 90%; max-width: 800px; height: calc(100% - 50px); margin: 25px auto; overflow-y: auto; }
html body #app-container main #explore .explore-container .popup.filter .filter-container .filter-content h3 { display: block; width: 100%; margin-bottom: 1vh; color: #3c3c3b; font-size: 1em; font-family: "Roboto-Bold"; text-transform: uppercase; text-align: center; }
html body #app-container main #explore .explore-container .popup.filter .filter-container .filter-content .filter-list { display: block; width: 100%; }
html body #app-container main #explore .explore-container .popup.filter .filter-container .filter-content .filter-list ul { display: flex; flex-direction: column; width: 100%; height: 100%; }
html body #app-container main #explore .explore-container .popup.filter .filter-container .filter-content .filter-list ul::after { content: ""; display: block; width: 50%; height: 1px; margin: 5px auto; }
html body #app-container main #explore .explore-container .popup.filter .filter-container .filter-content .filter-list ul:last-child::after { display: none; }
html body #app-container main #explore .explore-container .popup.filter .filter-container .filter-content .filter-list ul li { display: inline-flex; position: relative; height: 100%; margin-bottom: 1vh; }
html body #app-container main #explore .explore-container .popup.filter .filter-container .filter-content .filter-list ul li:last-child { margin-bottom: 0; }
html body #app-container main #explore .explore-container .popup.filter .filter-container .filter-content .filter-list ul li label { display: block; width: 100%; }
html body #app-container main #explore .explore-container .popup.filter .filter-container .filter-content .filter-list ul li label input[type="checkbox"] { display: inline-block; width: 25px; height: 25px; accent-color: #3cc8fa; }
html body #app-container main #explore .explore-container .popup.filter .filter-container .filter-content .filter-list ul li label h4 { display: inline-block; width: calc(100% - 20px - 30px); margin-left: 20px; color: #3c3c3b; font-family: "Roboto-Regular"; line-height: 25px; vertical-align: top; }
@media screen and (min-width: 768px) { html body #app-container main #explore .explore-container .pois-list ul li { width: 270px; height: 180px; }
  html body #app-container main #explore .explore-container .pois-list ul li a h3 { font-size: 1.2em; }
  html body #app-container main #explore .explore-container .popup.filter .filter-container .btn.close { top: -40px; }
  html body #app-container main #explore .explore-container .popup.filter .filter-container .filter-content { margin: 100px auto; }
  html body #app-container main #explore .explore-container .popup.filter .filter-container .filter-content h3 { font-size: 1.5em; } }
html body #app-container main #favs { display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; margin: auto; opacity: 0; pointer-events: none; z-index: -1; transition: all 0.5s ease; }
html body #app-container main #favs.active { opacity: 1; pointer-events: all; z-index: 999; }
html body #app-container main #favs .favs-container { display: block; position: relative; width: 100%; height: 100%; }
html body #app-container main #favs .favs-container ul { display: block; width: 90%; margin: 0 auto; padding: 5vh 0; }
html body #app-container main #favs .favs-container ul li { display: flex; flex-direction: row; flex-wrap: nowrap; width: calc(100% - 20px); height: 80px; margin-bottom: 20px; border-radius: 20px; padding: 0 10px; background-color: rgba(128, 201, 101, 0.2); }
html body #app-container main #favs .favs-container ul li:last-child { margin-bottom: 0; }
html body #app-container main #favs .favs-container ul li a { display: flex; flex-direction: row; flex-wrap: nowrap; width: calc(100% - 20px); height: 80px; }
html body #app-container main #favs .favs-container ul li a img { display: inline-flex; width: 50px; height: 50px; object-fit: cover; object-position: center; border-radius: 100%; border: 5px solid #80c965; margin: 10px 0; margin-right: 10px; }
html body #app-container main #favs .favs-container ul li a .poi-name { display: table; width: calc(100% - 50px - 40px); margin-right: 10px; }
html body #app-container main #favs .favs-container ul li a .poi-name h2 { display: table-cell; vertical-align: middle; font-family: "Roboto-Bold"; color: #3c3c3b; }
html body #app-container main #favs #empty-list { display: block; width: 90%; margin: 5vh auto; }
html body #app-container main #favs #empty-list p { font-family: "Roboto-Bold"; color: #3c3c3b; }
html body #app-container main #poi-detail { display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; margin: auto; opacity: 0; pointer-events: none; z-index: -1; transition: all 0.5s ease; }
html body #app-container main #poi-detail.active { pointer-events: all; opacity: 1; z-index: 5; }
html body #app-container main #poi-detail .poi-detail-container { display: block; position: relative; width: 100%; height: 100%; background-color: #fff; overflow-y: auto; }
html body #app-container main #poi-detail .poi-detail-container #gallery { display: block; position: relative; width: 100%; height: 30vh; }
html body #app-container main #poi-detail .poi-detail-container #gallery ul.images { display: block; scroll-snap-type: x mandatory; width: 100%; height: 100%; margin: 0 auto; white-space: nowrap; overflow-x: auto; overflow-y: hidden; }
html body #app-container main #poi-detail .poi-detail-container #gallery ul.images::after { display: block; content: ""; position: absolute; bottom: 0; width: 100%; height: 6vh; background: linear-gradient(0deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 100%); }
html body #app-container main #poi-detail .poi-detail-container #gallery ul.images li { display: inline-block; width: 100%; height: 100%; scroll-snap-align: start; scroll-snap-stop: normal; justify-content: center; align-items: center; background-color: #f2f2f2; }
html body #app-container main #poi-detail .poi-detail-container #gallery ul.images li img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
html body #app-container main #poi-detail .poi-detail-container #gallery ul.pagination { display: block; position: absolute; width: 80%; height: 10px; bottom: 2vh; left: 0; right: 0; margin: auto; text-align: center; }
html body #app-container main #poi-detail .poi-detail-container #gallery ul.pagination li { display: inline-block; width: 10px; height: 10px; margin: 0px 2px; border-radius: 100%; vertical-align: top; background-color: #dedede; transition: all 0.5s ease; }
html body #app-container main #poi-detail .poi-detail-container #gallery ul.pagination li.selected { background-color: #3cc8fa; }
html body #app-container main #poi-detail .poi-detail-container #poi-info { display: block; position: relative; width: 100%; }
html body #app-container main #poi-detail .poi-detail-container #poi-info .audio-container { width: 100%; display: flex; align-items: center; justify-content: center; background-color: #fff; box-sizing: border-box; }
html body #app-container main #poi-detail .poi-detail-container #poi-info .audio-container .audio-player { width: 100%; background: #fff; border-radius: 20px; padding: 20px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); }
html body #app-container main #poi-detail .poi-detail-container #poi-info .audio-container .progress-container { height: 30px; background-color: #e5e5e5; border-radius: 5px; cursor: pointer; margin-bottom: 10px; position: relative; }
html body #app-container main #poi-detail .poi-detail-container #poi-info .audio-container .progress { background-color: #4d4dff; height: 100%; border-radius: 5px; width: 0; transition: width 0.1s ease; }
html body #app-container main #poi-detail .poi-detail-container #poi-info .audio-container .time-info { display: flex; justify-content: space-between; font-size: 40px; color: #777; margin-bottom: 15px; font-family: "Roboto-Bold"; }
html body #app-container main #poi-detail .poi-detail-container #poi-info .audio-container .controls { display: flex; justify-content: center; align-items: center; gap: 20px; }
html body #app-container main #poi-detail .poi-detail-container #poi-info .audio-container .btn { background: none; border: none; cursor: pointer; outline: none; display: flex; justify-content: center; align-items: center; }
html body #app-container main #poi-detail .poi-detail-container #poi-info .audio-container .play-pause { width: 100px; height: 100px; background-color: #3cc8fa; border-radius: 50%; color: white; font-size: 50px; transition: transform 0.2s ease; }
html body #app-container main #poi-detail .poi-detail-container #poi-info .audio-container .play-pause svg { width: 30px; height: 30px; }
html body #app-container main #poi-detail .poi-detail-container #poi-info .audio-container .play-pause:hover { transform: scale(1.1); }
@media screen and (max-width: 767px) { html body #app-container main #poi-detail .poi-detail-container #poi-info .audio-container { padding: 10px; }
  html body #app-container main #poi-detail .poi-detail-container #poi-info .audio-container .audio-player { padding: 15px; border-radius: 10px; }
  html body #app-container main #poi-detail .poi-detail-container #poi-info .audio-container .progress-container { height: 10px; }
  html body #app-container main #poi-detail .poi-detail-container #poi-info .audio-container .time-info { font-size: 15px; margin-bottom: 10px; }
  html body #app-container main #poi-detail .poi-detail-container #poi-info .audio-container .play-pause { width: 35px; height: 35px; font-size: 20px; }
  html body #app-container main #poi-detail .poi-detail-container #poi-info .audio-container .play-pause svg { width: 15px; height: 15px; }
  html body #app-container main #poi-detail .poi-detail-container #poi-info .audio-container .controls { gap: 10px; } }
html body #app-container main #poi-detail .poi-detail-container #poi-info .multimedia-container { display: block; width: 100%; height: 7vh; background-color: rgba(60, 200, 250, 0.2); }
html body #app-container main #poi-detail .poi-detail-container #poi-info .multimedia-container ul { display: flex; flex-direction: row; flex-wrap: nowrap; height: 100%; padding: 0 50px; }
html body #app-container main #poi-detail .poi-detail-container #poi-info .multimedia-container ul li { display: inline-flex; width: 100%; height: 100%; background-position: center; background-size: 40px; background-repeat: no-repeat; }
html body #app-container main #poi-detail .poi-detail-container #poi-info .multimedia-container ul li.photo { background-image: url("../layout/icon-btn_poi-photo-gray.svg"); }
html body #app-container main #poi-detail .poi-detail-container #poi-info .multimedia-container ul li.video { background-image: url("../layout/icon-btn_poi-video-gray.svg"); }
html body #app-container main #poi-detail .poi-detail-container #poi-info .multimedia-container ul li.panorama { background-image: url("../layout/icon-btn_poi-360-gray.svg"); }
html body #app-container main #poi-detail .poi-detail-container #poi-info .multimedia-container ul li h3 { display: none; }
html body #app-container main #poi-detail .poi-detail-container #poi-info .multimedia-container ul li.hidden { display: none; pointer-events: none; opacity: 0; }
html body #app-container main #poi-detail .poi-detail-container #poi-text { display: block; height: calc(100vh - 15vh - 10vh - 30vh - 15vh); }
html body #app-container main #poi-detail .poi-detail-container #poi-text.without-images { height: calc(100vh - 15vh - 10vh - 15vh); }
html body #app-container main #poi-detail .poi-detail-container #poi-text .text-container { display: block; width: 90%; margin: 2vh auto; }
html body #app-container main #poi-detail .poi-detail-container #poi-text .text-container a { color: #3cc8fa; }
html body #app-container main #poi-detail .poi-detail-container #poi-text .text-container p { font-family: "Roboto-Regular"; line-height: 1.5em; }
html body #app-container main #poi-detail .poi-detail-container #poi-text .text-container p a { color: #3cc8fa; font-family: "Roboto-Bold"; }
html body #app-container main #poi-detail .poi-detail-container #poi-text .video-container { display: block; position: relative; width: 90%; margin: 50px 5%; }
html body #app-container main #poi-detail .poi-detail-container #poi-text .video-container::before { content: ""; display: block; position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: 10vh; height: 10vh; margin: auto; background-image: url("../layout/icon-btn_video-play-white.svg"); background-size: contain; background-position: center; background-repeat: no-repeat; filter: drop-shadow(0px 0px 5px #3cc8fa); z-index: 9; }
html body #app-container main #poi-detail .poi-detail-container #poi-text .video-container::after { content: ""; display: block; position: absolute; bottom: 0; width: 100%; height: 100%; border-radius: 30px; background: linear-gradient(0deg, #005eb8 0%, rgba(0, 94, 184, 0) 100%); z-index: 0; }
html body #app-container main #poi-detail .poi-detail-container #poi-text .video-container video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; border-radius: 30px; }
@media screen and (min-width: 768px) { html body #app-container main #poi-detail .poi-detail-container #poi-info { height: calc(100vh - 10vh - 10vh - 30vh); }
  html body #app-container main #poi-detail .poi-detail-container #poi-text .text-container p { font-size: 1.2em; line-height: 1.8em; } }
@media screen and (min-width: 768px) { html body #app-container main { top: 10vh; height: calc(100dvh - 10vh - 10vh); } }
html body #app-container nav#menu { display: block; position: absolute; bottom: 0; width: 100%; height: 10vh; z-index: 9; }
html body #app-container nav#menu ul { display: flex; width: 100%; height: 100%; }
html body #app-container nav#menu ul li { display: inline-flex; width: 100%; border-bottom: 5px solid transparent; }
html body #app-container nav#menu ul li.selected#progetto { border-bottom: 5px solid #ffbc15; }
html body #app-container nav#menu ul li.selected#storie { border-bottom: 5px solid #f47b5b; }
html body #app-container nav#menu ul li.selected#esplora { border-bottom: 5px solid #3cc8fa; }
html body #app-container nav#menu ul li.selected#favoriti { border-bottom: 5px solid #80c965; }
html body #app-container nav#menu ul li.selected a h2 { font-family: "Roboto-Bold"; }
html body #app-container nav#menu ul li#progetto a { background-image: url(../layout/icon-menu_project-unselected.svg); }
html body #app-container nav#menu ul li#progetto a h2 { color: #ffbc15; }
html body #app-container nav#menu ul li#storie a { background-image: url(../layout/icon-menu_stories-unselected.svg); }
html body #app-container nav#menu ul li#storie a h2 { color: #f47b5b; }
html body #app-container nav#menu ul li#esplora a { background-image: url(../layout/icon-menu_explore-unselected.svg); }
html body #app-container nav#menu ul li#esplora a h2 { color: #3cc8fa; }
html body #app-container nav#menu ul li#favoriti a { background-image: url(../layout/icon-menu_favourites-unselected.svg); }
html body #app-container nav#menu ul li#favoriti a h2 { color: #80c965; }
html body #app-container nav#menu ul li a { display: block; position: relative; width: 100%; height: 100%; background-repeat: no-repeat; background-position: center 1vh; background-size: 5vh; }
html body #app-container nav#menu ul li a h2 { display: block; position: absolute; bottom: 1vh; width: 100%; font-family: "Roboto-Regular"; font-size: 0.5em; text-align: center; text-transform: uppercase; }
html body #app-container nav#menu .languages { display: none; }
@media screen and (min-width: 390px) { html body #app-container nav#menu ul li a h2 { bottom: 1.5vh; } }
@media screen and (min-width: 768px) { html body #app-container nav#menu ul { max-width: 500px; margin: 0 auto; }
  html body #app-container nav#menu ul li a h2 { bottom: 2vh; font-size: 0.8em; } }
html body #app-container #languages-container { display: block; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-color: #fff; opacity: 0; pointer-events: none; z-index: -1; transition: all 0.5s ease; }
html body #app-container #languages-container.active { opacity: 1; pointer-events: all; z-index: 999; }
html body #app-container #languages-container.disabled { display: none; }
html body #app-container #languages-container .languages-content { display: block; position: relative; width: calc(100% - 240px); height: calc(100% - 240px); margin: 120px; background-color: #f2f2f2; }
html body #app-container #languages-container .languages-content::after { display: block; content: ""; position: absolute; top: 60px; right: 60px; width: calc(100% - 120px); height: calc(100% - 120px); background-image: url("../layout/img-bg_project.svg"); background-position: top right; background-size: contain; background-repeat: no-repeat; filter: grayscale(100%); z-index: 0; }
html body #app-container #languages-container .languages-content ul { display: flex; position: relative; width: 80%; height: 100%; margin: 0 10%; z-index: 9; }
html body #app-container #languages-container .languages-content ul li { display: inline-flex; width: 100%; height: 30%; margin: 670px 0; }
html body #app-container #languages-container .languages-content ul li.it a { background-image: url("../layout/icon-lang-it.svg"); }
html body #app-container #languages-container .languages-content ul li.en a { background-image: url("../layout/icon-lang-en.svg"); }
html body #app-container #languages-container .languages-content ul li.fr a { background-image: url("../layout/icon-lang-fr.svg"); }
html body #app-container #languages-container .languages-content ul li.de a { background-image: url("../layout/icon-lang-de.svg"); }
html body #app-container #languages-container .languages-content ul li a { display: block; position: relative; width: 100%; text-decoration: none; background-position: center; background-size: 50%; background-repeat: no-repeat; filter: drop-shadow(0 0 20px rgba(60, 60, 59, 0.2)); }
html body #app-container #languages-container .languages-content ul li a h2 { display: block; position: absolute; bottom: -50px; width: 100%; color: #3c3c3b; font-family: "Roboto-Bold"; font-size: 50px; text-align: center; }
html body.totem #app-container { width: calc(100% - 240px); height: calc(100% - 240px); margin: 120px; }
html body * { user-select: none; -webkit-user-select: none; -webkit-user-callout: none; -webkit-touch-callout: none; -webkit-overflow-scrolling: none; }
html body .btn { display: table; z-index: 9; }
html body .btn a { display: block; width: 100%; height: 100%; }
html body .btn.disabled { opacity: 0.2; pointer-events: none; }
html body .btn.hidden { opacity: 0; pointer-events: none; z-index: -1; }
html body .btn.close { position: absolute; top: -4vh; right: -4vh; width: 4vh; height: 4vh; background-image: url("../layout/icon-btn_close-white.svg"); background-size: contain; background-position: center; background-repeat: no-repeat; }
html body .btn.back { position: absolute; top: calc(50% - 1.5vh); left: 5%; width: 3vh; height: 3vh; background-image: url("../layout/icon-btn_back-white.svg"); background-size: contain; background-position: center; background-repeat: no-repeat; }
html body .btn.back a h3 { display: none; }
html body .btn.settings { position: absolute; top: calc(50% - 2vh); right: 5%; width: 4vh; height: 4vh; background-image: url("../layout/icon-btn_settings-gold.svg"); background-size: contain; background-position: center; background-repeat: no-repeat; }
html body .btn.settings.selected { background-image: url("../layout/icon-btn_close-blue.svg"); }
html body .btn.filter { position: absolute; top: 5vh; right: 5%; width: auto; border-radius: 20px; background-color: #3cc8fa; box-shadow: 0 0 20px rgba(60, 60, 59, 0.2); }
html body .btn.filter a { width: 100%; height: calc(100% - 10px); padding: 5px 10px; text-decoration: none; }
html body .btn.filter a::before { content: ""; display: inline-block; width: 20px; height: 20px; margin-right: 5px; background-image: url("../layout/icon-btn_filter-white.svg"); background-size: contain; background-position: center; background-repeat: no-repeat; }
html body .btn.filter a h4 { display: inline-block; color: #fff; font-family: "Roboto-Regular"; line-height: 20px; vertical-align: top; }
html body .btn.filter a h4 span { display: inline-block; font-family: "Roboto-Bold"; }
html body .btn.fav { position: fixed; top: 12vh; top: calc(10vh + 10px); right: 2.5vh; width: 50px; height: 50px; border-radius: 100%; background-image: url("../layout/icon-btn_poi-fav-unselected-gray.svg"); background-size: 40px; background-position: center; background-repeat: no-repeat; background-color: #fff; box-shadow: 0 0 20px #3c3c3b; z-index: 999; }
html body .btn.fav.clicked { background-image: url("../layout/icon-btn_poi-fav-selected-gray.svg"); }
html body .btn.vr { width: 90%; max-width: 500px; margin: 0 auto; border-radius: 30px; box-shadow: 0 0 20px rgba(60, 60, 59, 0.2); }
html body .btn.vr a { display: block; width: calc(100% - 60px); height: calc(100% - 60px); padding: 30px; text-decoration: none; }
html body .btn.vr a h3 { display: block; width: 100%; color: #fff; font-family: "Roboto-Bold"; text-transform: uppercase; text-align: center; }
html body .btn.scroll { display: block; position: absolute; width: 30%; height: 6px; left: 0; right: 0; margin: auto; border-radius: 3px; background-color: #dedede; }
html body .btn.scroll span { position: absolute; width: 100%; top: -25px; height: 45px; }
html body .btn.map { position: absolute; width: auto; height: auto; top: 20px; right: 5%; border-radius: 20px; background-color: #3cc8fa; box-shadow: 0 0 20px rgba(60, 60, 59, 0.2); }
html body .btn.map a { display: block; position: relative; width: calc(100% - 20px); height: calc(100% - 20px); padding: 10px; text-decoration: none; }
html body .btn.map a::after { content: ""; display: table; position: absolute; top: 8px; left: 10px; width: 20px; height: 20px; background-image: url("../layout/icon-btn_map-white.svg"); background-position: center; background-size: contain; background-repeat: no-repeat; }
html body .btn.map a h3 { width: calc(100% - 30px) !important; padding: 0 0 0 30px !important; color: #fff !important; text-transform: initial !important; }
html body .btn.color { position: absolute; bottom: 2vh; right: calc(50% - 5vh); left: calc(50% - 5vh); width: auto; margin: auto; border-radius: 20px; background-color: #3cc8fa; box-shadow: 0 0 20px rgba(60, 60, 59, 0.2); }
html body .btn.color a { width: calc(100% - 20px); height: calc(100% - 10px); padding: 5px 10px; text-decoration: none; }
html body .btn.color a h3 { color: #fff; font-family: "Roboto-Bold"; }
html body .btn.bin { display: inline-flex; width: 30px; height: 30px; margin: 25px 0; background-image: url("../layout/icon-btn_bin-gray.svg"); background-position: center; background-size: contain; background-repeat: no-repeat; }
@media screen and (min-width: 768px) { html body .btn.close, html body .btn.settings, html body .btn.back { width: 30px; height: 30px; }
  html body .btn.settings, html body .btn.back { top: calc(50% - 15px); } }
html body #video-player { display: block; position: fixed; top: 0; right: 0; width: 100%; height: 100%; backdrop-filter: blur(5px); background-color: rgba(60, 60, 59, 0.8); opacity: 0; pointer-events: none; z-index: -1; }
html body #video-player.active { opacity: 1; pointer-events: all; z-index: 999; }
html body #video-player .btn.close { top: 5vh; right: 5%; }
html body #video-player video { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center; }
html body.totem #video-player { backdrop-filter: none; }
html body.totem #video-player .btn.close { top: auto !important; bottom: 5vh !important; left: auto !important; right: 5% !important; width: 100px; height: 100px; }
html body.totem #splashpage #splash-container .animation-app img { height: auto; max-width: 20%; margin: 100px 0 0 100px; }
html body.totem #splashpage #splash-container .animation-app .animation-icons { top: 100px; bottom: auto; left: auto; right: 100px; width: 30%; height: calc(100% - 200px); max-height: 860px; }
html body.totem #splashpage #splash-container .animation-app .animation-icons ul.grid li { margin: 0 10px 10px 0; padding-bottom: calc(25% - 10px); }
@media screen and (min-width: 3840px) { html body.totem #splashpage #splash-container .animation-app .animation-icons { width: 50%; max-height: 1920px; }
  html body.totem #splashpage #splash-container .animation-app .animation-icons ul.grid li { margin: 0 30px 30px 0; padding-bottom: calc(25% - 30px); } }
html body.totem #app-container header { display: block; position: absolute; top: 0; width: calc(100% - 240px); height: auto; border-radius: 0; background-image: none; box-shadow: none; z-index: 10; }
html body.totem #app-container header.poi-detail .btn.back { top: 180px; left: 180px; width: 100px; height: 100px; background-size: 50%; }
html body.totem #app-container header.poi-detail #title-page { display: table; position: absolute; top: 180px; left: calc(120px + 60px + 100px + 20px); width: calc(100% - 560px); height: 100px; font-size: 2em; z-index: 9; opacity: 1; transition: opacity 0.8s ease-in-out; }
html body.totem #app-container header.poi-detail #title-page h1 { color: #3cc8fa; text-align: left; }
html body.totem #app-container header #title-page { opacity: 0; }
html body.totem #app-container { cursor: none; }
html body.totem #app-container main { top: 0px; width: calc(100% - 240px); height: calc(100% - 0px); border-radius: 0; }
html body.totem #app-container main #project::after { display: block; content: ""; position: absolute; top: 60px; right: 60px; width: calc(100% - 120px); height: calc(100% - 120px); background-image: url("../layout/img-bg_project.svg"); background-position: top right; background-size: contain; background-repeat: no-repeat; z-index: -1; }
html body.totem #app-container main #project .project-container { display: flex; }
html body.totem #app-container main #project .project-container .text-container { position: relative; width: calc(50% - 120px); height: calc(100vh - 120px - 120px - 120px); margin: 60px; margin-bottom: 0; overflow-y: auto; }
html body.totem #app-container main #project .project-container .text-container h2 { color: #ffbc15; font-family: "Roboto-Bold"; }
html body.totem #app-container main #project .project-container .text-container p, html body.totem #app-container main #project .project-container .text-container a { color: #3c3c3b; font-size: 36px; line-height: 55px; }
html body.totem #app-container main #project .project-container .text-container::after { display: block; position: absolute; content: ""; bottom: 0px; width: 100%; height: 200px; background-image: url("../layout/img-loghi_istituzionali.jpg"); background-position: left center; background-repeat: no-repeat; background-size: contain; }
html body.totem #app-container main #project .project-container #gallery { display: block; width: 50%; height: 100%; }
html body.totem #app-container main #project .project-container #gallery .pagination { display: flex; width: 100%; height: 40px; justify-content: center; gap: 20px; }
html body.totem #app-container main #project .project-container #gallery .pagination li { width: 40px; height: 40px; }
html body.totem #app-container main #project .project-container #gallery .pagination li.selected { background-color: #ffbc15; }
html body.totem #app-container main #stories::after { display: block; content: ""; position: absolute; top: 60px; right: 60px; width: calc(100% - 120px); height: calc(100% - 120px); background-image: url("../layout/img-bg_stories.svg"); background-position: top right; background-size: contain; background-repeat: no-repeat; z-index: -1; }
html body.totem #app-container main #stories .stories-container::after { display: block; content: ""; position: absolute; bottom: 0; right: 0; width: 50px; height: 100%; background: white; background: linear-gradient(270deg, #ffffff 0%, rgba(255, 255, 255, 0) 100%); }
html body.totem #app-container main #stories .stories-container ul.stories-list { display: flex; flex-wrap: wrap; align-content: start; align-items: center; justify-content: start; gap: 10px; scroll-snap-type: x mandatory; width: calc(100% - 60px); padding: 30px; }
html body.totem #app-container main #stories .stories-container ul.stories-list li { position: relative; flex: 0 0 calc((100% - 60px) / 4); width: calc((100% - 60px) / 4); height: 30%; max-width: none; background-color: #dedede; box-shadow: none; scroll-snap-align: start; margin: 0; }
html body.totem #app-container main #stories .stories-container ul.stories-list li:first-child { margin-left: 0; }
html body.totem #app-container main #stories .stories-container ul.stories-list li a { text-decoration: none; }
html body.totem #app-container main #stories .stories-container ul.stories-list li a .video-container::before { filter: drop-shadow(0px 0px 5px #f47b5b); }
html body.totem #app-container main #stories .stories-container ul.stories-list li a .video-container::after { display: block; content: ""; position: absolute; bottom: 0; width: 100%; height: 50%; border-radius: 25px; background: linear-gradient(0deg, #f47b5b 0%, rgba(244, 123, 91, 0) 100%); z-index: 0; }
html body.totem #app-container main #stories .stories-container ul.stories-list li a .video-container h3 { color: #fff; font-size: 50px; white-space: break-spaces; z-index: 9; }
html body.totem #app-container main #stories .stories-container ul.stories-list li a .video-container.playing { width: 100vw; height: 100vh; border-radius: 0; }
html body.totem #app-container main #stories .stories-container ul.stories-list li a .video-container.playing video { width: 80%; height: 80%; border-radius: 0; }
html body.totem #app-container main #stories .stories-container ul.pagination { display: none; bottom: 30px; }
html body.totem #app-container main #stories .stories-container ul.pagination li { width: 40px; height: 40px; gap: 20px; }
html body.totem #app-container main #explore .explore-container #map.leaflet-container .leaflet-top.leaflet-left { height: 100%; }
html body.totem #app-container main #explore .explore-container #map.leaflet-container .leaflet-top.leaflet-left .leaflet-control-zoom { position: absolute; bottom: 350px; right: -3310px; margin-top: auto; margin-left: auto; }
html body.totem #app-container main #explore .explore-container #map.leaflet-container .leaflet-top.leaflet-left .leaflet-control-zoom a.leaflet-control-zoom-in, html body.totem #app-container main #explore .explore-container #map.leaflet-container .leaflet-top.leaflet-left .leaflet-control-zoom a.leaflet-control-zoom-out { width: 60px; height: 60px; line-height: 60px; font-size: 3em; }
html body.totem #app-container main #explore .explore-container #map.leaflet-container .leaflet-top.leaflet-left .leaflet-control-zoom a.leaflet-control-zoom-in { border-top-left-radius: 30px; border-top-right-radius: 30px; }
html body.totem #app-container main #explore .explore-container #map.leaflet-container .leaflet-top.leaflet-left .leaflet-control-zoom a.leaflet-control-zoom-out { border-bottom-left-radius: 30px; border-bottom-right-radius: 30px; }
html body.totem #app-container main #explore .explore-container #map.leaflet-container .leaflet-map-pane .leaflet-popup.leaflet-zoom-animated { bottom: 0 !important; }
html body.totem #app-container main #explore .explore-container #map.leaflet-container .leaflet-map-pane .leaflet-marker-pane img.leaflet-marker-icon.leaflet-zoom-animated.leaflet-interactive { filter: drop-shadow(0 0 10px #3cc8fa); }
html body.totem #app-container main #explore .explore-container .pois-list ul { width: 100%; padding: 20px 50px; background-color: rgba(255, 255, 255, 0.5); backdrop-filter: blur(5px); overflow-x: auto; }
html body.totem #app-container main #explore .explore-container .pois-list ul::after { display: none; }
html body.totem #app-container main #explore .explore-container .pois-list ul li { width: 405px; height: 270px; margin-right: 25px; }
html body.totem #app-container main #explore .explore-container .pois-list ul li.selected { border-color: #fff; }
html body.totem #app-container main #explore .explore-container .pois-list ul li:last-child { margin-right: 0; }
html body.totem #app-container main #explore .explore-container .pois-list ul li a { border-radius: 25px; }
html body.totem #app-container main #explore .explore-container .pois-list ul li a h3 { font-size: 2em; word-break: break-word; }
html body.totem #app-container main #explore .explore-container #user-geolocation { display: none; }
html body.totem #app-container main #explore .explore-container .popup.filter .filter-container { max-width: 2200px; border-radius: 0; }
html body.totem #app-container main #explore .explore-container .popup.filter .filter-container .btn.close { top: -50px !important; left: -50px !important; width: 100px; height: 100px; background-size: 50%; }
html body.totem #app-container main #explore .explore-container .popup.filter .filter-container .filter-content { width: calc(100% - 200px); max-width: none; margin: 100px; }
html body.totem #app-container main #explore .explore-container .popup.filter .filter-container .filter-content h3 { margin-bottom: 5vh; color: #3cc8fa; font-size: 5em; }
html body.totem #app-container main #explore .explore-container .popup.filter .filter-container .filter-content .filter-list ul { display: flex; flex-direction: row; flex-wrap: wrap; width: 100%; }
html body.totem #app-container main #explore .explore-container .popup.filter .filter-container .filter-content .filter-list ul::after { display: none; }
html body.totem #app-container main #explore .explore-container .popup.filter .filter-container .filter-content .filter-list ul li { width: calc(100% / 3); margin-bottom: 0; }
html body.totem #app-container main #explore .explore-container .popup.filter .filter-container .filter-content .filter-list ul li label input { width: 80px; height: 80px; }
html body.totem #app-container main #explore .explore-container .popup.filter .filter-container .filter-content .filter-list ul li label h4 { width: calc(100% - 120px); margin-left: 25px; font-size: 2em; line-height: 80px; }
html body.totem #app-container main #poi-detail { width: calc(100% - 240px); height: calc(100% - 0px); margin: 0 120px; }
html body.totem #app-container main #poi-detail.active { z-index: 5; }
html body.totem #app-container main #poi-detail .poi-detail-container { display: block; position: relative; width: 100%; height: calc(100% - 120px); margin: 120px auto; padding-top: 0; overflow-y: visible; }
html body.totem #app-container main #poi-detail .poi-detail-container::before { display: block; content: ""; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; margin: 0px; background-color: white; z-index: -1; }
html body.totem #app-container main #poi-detail .poi-detail-container::after { display: block; content: ""; position: absolute; top: -120px; left: -120px; width: calc(100% + 240px); height: calc(100% + 120px); margin: 0px; background-color: rgba(29, 152, 196, 0.8); z-index: -9; }
html body.totem #app-container main #poi-detail .poi-detail-container .btn.fav { display: none; }
html body.totem #app-container main #poi-detail .poi-detail-container #gallery { display: block; position: absolute; top: 240px; left: 50px; width: calc(50% - 75px); height: 990px; aspect-ratio: 3/2; margin-right: 25px; }
html body.totem #app-container main #poi-detail .poi-detail-container #gallery ul.pagination { bottom: -40px; }
html body.totem #app-container main #poi-detail .poi-detail-container #gallery ul.pagination li { width: 20px; height: 20px; margin: 0 10px; }
html body.totem #app-container main #poi-detail .poi-detail-container #poi-info { display: block; position: absolute; bottom: 0px; left: 50px; width: calc(50% - 75px); height: 500px; margin-right: 25px; }
html body.totem #app-container main #poi-detail .poi-detail-container #poi-info .audio-container { width: 100%; display: flex; align-items: center; justify-content: center; background-color: #fff; box-sizing: border-box; }
html body.totem #app-container main #poi-detail .poi-detail-container #poi-info .audio-container .audio-player { width: 100%; background: #fff; border-radius: 20px; padding: 20px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); }
html body.totem #app-container main #poi-detail .poi-detail-container #poi-info .audio-container .progress-container { height: 30px; background-color: #e5e5e5; border-radius: 5px; cursor: pointer; margin-bottom: 10px; position: relative; }
html body.totem #app-container main #poi-detail .poi-detail-container #poi-info .audio-container .progress { background-color: #4d4dff; height: 100%; border-radius: 5px; width: 0; transition: width 0.1s ease; }
html body.totem #app-container main #poi-detail .poi-detail-container #poi-info .audio-container .time-info { display: flex; justify-content: space-between; font-size: 40px; color: #777; margin-bottom: 15px; font-family: "Roboto-Bold"; }
html body.totem #app-container main #poi-detail .poi-detail-container #poi-info .audio-container .controls { display: flex; justify-content: center; align-items: center; gap: 20px; }
html body.totem #app-container main #poi-detail .poi-detail-container #poi-info .audio-container .btn { background: none; border: none; cursor: pointer; outline: none; display: flex; justify-content: center; align-items: center; }
html body.totem #app-container main #poi-detail .poi-detail-container #poi-info .audio-container .play-pause { width: 100px; height: 100px; background-color: #3cc8fa; border-radius: 50%; color: white; font-size: 50px; transition: transform 0.2s ease; }
html body.totem #app-container main #poi-detail .poi-detail-container #poi-info .audio-container .play-pause svg { width: 30px; height: 30px; }
html body.totem #app-container main #poi-detail .poi-detail-container #poi-info .audio-container .play-pause:hover { transform: scale(1.1); }
@media screen and (max-width: 767px) { html body.totem #app-container main #poi-detail .poi-detail-container #poi-info .audio-container { padding: 10px; }
  html body.totem #app-container main #poi-detail .poi-detail-container #poi-info .audio-container .audio-player { padding: 15px; border-radius: 10px; }
  html body.totem #app-container main #poi-detail .poi-detail-container #poi-info .audio-container .progress-container { height: 10px; }
  html body.totem #app-container main #poi-detail .poi-detail-container #poi-info .audio-container .time-info { font-size: 15px; margin-bottom: 10px; }
  html body.totem #app-container main #poi-detail .poi-detail-container #poi-info .audio-container .play-pause { width: 35px; height: 35px; font-size: 20px; }
  html body.totem #app-container main #poi-detail .poi-detail-container #poi-info .audio-container .play-pause svg { width: 15px; height: 15px; }
  html body.totem #app-container main #poi-detail .poi-detail-container #poi-info .audio-container .controls { gap: 10px; } }
html body.totem #app-container main #poi-detail .poi-detail-container #poi-info .multimedia-container { position: absolute; top: 240px; bottom: auto; height: auto; background-color: transparent; }
html body.totem #app-container main #poi-detail .poi-detail-container #poi-info .multimedia-container ul { display: flex; width: 100%; padding-top: 50px; }
html body.totem #app-container main #poi-detail .poi-detail-container #poi-info .multimedia-container ul li { position: relative; width: 100%; height: 100px; background-image: none; }
html body.totem #app-container main #poi-detail .poi-detail-container #poi-info .multimedia-container ul li::after { display: block; content: ""; position: absolute; top: 0; left: 0; width: 100px; height: 100px; border-radius: 100%; background-size: 70%; background-position: center; background-repeat: no-repeat; background-color: #3cc8fa; box-shadow: 0 0 10px rgba(60, 60, 59, 0.5); z-index: 0; }
html body.totem #app-container main #poi-detail .poi-detail-container #poi-info .multimedia-container ul li.photo::after { background-image: url(../layout/icon-btn_poi-photo-white.svg); }
html body.totem #app-container main #poi-detail .poi-detail-container #poi-info .multimedia-container ul li.video::after { background-image: url(../layout/icon-btn_poi-video-white.svg); }
html body.totem #app-container main #poi-detail .poi-detail-container #poi-info .multimedia-container ul li.panorama::after { background-image: url(../layout/icon-btn_poi-360-white.svg); }
html body.totem #app-container main #poi-detail .poi-detail-container #poi-info .multimedia-container ul li h3 { display: block; padding-left: 120px; font-family: "Roboto-Bold"; font-size: 36px; line-height: 100px; z-index: 9; }
html body.totem #app-container main #poi-detail .poi-detail-container #poi-text { display: block; position: absolute; top: 240px; right: 50px; width: calc(50% - 75px); height: calc(100% - 310px); margin-left: 25px; padding-right: 25px; overflow-y: auto; }
html body.totem #app-container main #poi-detail .poi-detail-container #poi-text::-webkit-scrollbar { width: 10px !important; height: 100% !important; }
html body.totem #app-container main #poi-detail .poi-detail-container #poi-text::-webkit-scrollbar-track { background-color: #f2f2f2 !important; }
html body.totem #app-container main #poi-detail .poi-detail-container #poi-text::-webkit-scrollbar-thumb { background-color: #3cc8fa !important; }
html body.totem #app-container main #poi-detail .poi-detail-container #poi-text::after { display: block; content: ""; position: fixed; bottom: 120px; right: 480px; width: calc(50% - 350px); height: 50px; background: white; background: linear-gradient(0deg, #ffffff 0%, rgba(255, 255, 255, 0) 100%); }
html body.totem #app-container main #poi-detail .poi-detail-container #poi-text .text-container { width: 100%; margin: 0; padding-bottom: 50px; }
html body.totem #app-container main #poi-detail .poi-detail-container #poi-text .text-container p { font-size: 36px; line-height: 55px; }
html body.totem #app-container main.disabled { display: none; }
html body.totem #app-container nav#menu { top: 0; right: 0; bottom: auto; width: 240px; height: 100%; background-color: #3c3c3b; z-index: 0; }
html body.totem #app-container nav#menu ul { display: block; position: absolute; top: 0; bottom: 0; height: calc((240px * 3) + 12vh); margin: auto; }
html body.totem #app-container nav#menu ul li { display: block; width: 280px; height: 240px; margin: 3vh 0; padding: 0; }
html body.totem #app-container nav#menu ul li#progetto a { background-image: url("../layout/icon-menu_project-totem-unselected.svg"); }
html body.totem #app-container nav#menu ul li#storie a { background-image: url("../layout/icon-menu_stories-totem-unselected.svg"); }
html body.totem #app-container nav#menu ul li#esplora a { background-image: url("../layout/icon-menu_explore-totem-unselected.svg"); }
html body.totem #app-container nav#menu ul li#favoriti { display: none; }
html body.totem #app-container nav#menu ul li.selected::before { display: block; content: ""; position: fixed; top: 120px; right: 350px; width: 10px; height: calc(100vh - 240px); }
html body.totem #app-container nav#menu ul li.selected#progetto { background-color: #ffbc15; }
html body.totem #app-container nav#menu ul li.selected#progetto::before { background-color: #ffbc15; }
html body.totem #app-container nav#menu ul li.selected#progetto a { background-image: url("../layout/icon-menu_project-totem-selected.svg"); }
html body.totem #app-container nav#menu ul li.selected#progetto a h2 { color: #3c3c3b !important; }
html body.totem #app-container nav#menu ul li.selected#storie { background-color: #f47b5b; }
html body.totem #app-container nav#menu ul li.selected#storie::before { background-color: #f47b5b; }
html body.totem #app-container nav#menu ul li.selected#storie a { background-image: url("../layout/icon-menu_stories-totem-selected.svg"); }
html body.totem #app-container nav#menu ul li.selected#storie a h2 { color: #3c3c3b !important; }
html body.totem #app-container nav#menu ul li.selected#esplora { background-color: #3cc8fa; }
html body.totem #app-container nav#menu ul li.selected#esplora::before { background-color: #3cc8fa; }
html body.totem #app-container nav#menu ul li.selected#esplora a { background-image: url("../layout/icon-menu_explore-totem-selected.svg"); }
html body.totem #app-container nav#menu ul li.selected#esplora a h2 { color: #3c3c3b !important; }
html body.totem #app-container nav#menu ul li a { width: 240px; background-size: 50%; background-position: center 30px; }
html body.totem #app-container nav#menu ul li a h2 { font-size: 1.5em; color: #fff !important; }
html body.totem #app-container nav#menu .languages { display: block; position: absolute; bottom: 100px; right: 65px; width: 100px; height: 100px; overflow: hidden; }
html body.totem #app-container nav#menu .languages ul { display: block; width: 100%; height: 100%; margin: 0; }
html body.totem #app-container nav#menu .languages ul li { display: none; width: 100%; height: 100%; margin: 0; background-repeat: no-repeat; }
html body.totem #app-container nav#menu .languages ul li.selected { display: block; }
html body.totem #app-container nav#menu .languages ul li.selected::before { display: none; }
html body.totem #app-container nav#menu .languages ul li.it { background-image: url(../layout/icon-lang-it.svg); }
html body.totem #app-container nav#menu .languages ul li.en { background-image: url(../layout/icon-lang-en.svg); }
html body.totem #app-container nav#menu .languages ul li.fr { background-image: url(../layout/icon-lang-fr.svg); }
html body.totem #app-container nav#menu .languages ul li.de { background-image: url(../layout/icon-lang-de.svg); }
html body.totem #app-container nav#menu .languages ul li a { display: block; width: 100%; height: 100%; }
html body.totem .btn.back { top: 110px; left: 110px; width: 80px; height: 80px; border-radius: 100%; background-position: center; background-image: url("../layout/icon-btn_close-white.svg"); background-size: 30px; background-color: #3c3c3b; box-shadow: 0 0 10px rgba(60, 60, 59, 0.5); }
html body.totem .btn.back a { text-decoration: none; }
html body.totem .btn.back a h3 { display: none; }
html body.totem .btn.close { top: 90% !important; left: 95% !important; width: 100px; height: 100px; border-radius: 100%; background-position: center; background-image: url("../layout/icon-btn_close-gray.svg"); background-size: 50px; background-color: #fff; box-shadow: 0 0 10px rgba(60, 60, 59, 0.5); }
html body.totem .btn.close a { text-decoration: none; }
html body.totem .btn.close a h3 { display: none; }
html body.totem .btn.filter { top: auto; left: 50px; bottom: 350px; min-width: 200px; height: 50px; border-radius: 30px; color: #3c3c3b; background-color: #fff; }
html body.totem .btn.filter a { height: calc(100% - 20px); padding: 10px 20px; }
html body.totem .btn.filter a::before { width: 40px; height: 40px; margin-right: 10px; background-image: url("../layout/icon-btn_filter-black.svg"); }
html body.totem .btn.filter a h4 { line-height: 40px; font-size: 2em; color: #3c3c3b; }

@media (orientation: landscape) { html body:not(.totem) { content: ""; background-image: url("../layout/rotate.gif"); background-size: 200px; background-position: center; background-repeat: no-repeat; }
  html body:not(.totem) #app-container header, html body:not(.totem) #app-container main, html body:not(.totem) #app-container #menu, html body:not(.totem) #app-container #languages-container { opacity: 0; }
  html body:not(.totem) #app-container #video-player { opacity: 1; }
  html body.totem { opacity: 1; } }