@import url("https://fonts.googleapis.com/css?family=Lato");
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 ***/
/* Lista delle famiglie di font, per ogni famiglia inserisco la variabile e la sua posizione */
@font-face { font-family: "Area-Light"; src: url("../font/Area-Light.eot"); src: url("../font/Area-Light.ttf") format("truetype"), url("../font/Area-Light.eot?#iefix") format("embedded-opentype"), url("../font/Area-Light.otf"), url("../font/Area-Light.svg#Area-Light") format("svg"), url("../font/Area-Light.woff") format("woff"); }
@font-face { font-family: "Area-LightItalic"; src: url("../font/Area-LightItalic.eot"); src: url("../font/Area-LightItalic.ttf") format("truetype"), url("../font/Area-LightItalic.eot?#iefix") format("embedded-opentype"), url("../font/Area-LightItalic.otf"), url("../font/Area-LightItalic.svg#Area-LightItalic") format("svg"), url("../font/Area-LightItalic.woff") format("woff"); }
@font-face { font-family: "Area-Regular"; src: url("../font/Area-Regular.eot"); src: url("../font/Area-Regular.ttf") format("truetype"), url("../font/Area-Regular.eot?#iefix") format("embedded-opentype"), url("../font/Area-Regular.otf"), url("../font/Area-Regular.svg#Area-Regular") format("svg"), url("../font/Area-Regular.woff") format("woff"); }
@font-face { font-family: "Area-RegularItalic"; src: url("../font/Area-RegularItalic.eot"); src: url("../font/Area-RegularItalic.ttf") format("truetype"), url("../font/Area-RegularItalic.eot?#iefix") format("embedded-opentype"), url("../font/Area-RegularItalic.otf"), url("../font/Area-RegularItalic.svg#Area-RegularItalic") format("svg"), url("../font/Area-RegularItalic.woff") format("woff"); }
@font-face { font-family: "Area-Medium"; src: url("../font/Area-Medium.eot"); src: url("../font/Area-Medium.ttf") format("truetype"), url("../font/Area-Medium.eot?#iefix") format("embedded-opentype"), url("../font/Area-Medium.otf"), url("../font/Area-Medium.svg#Area-Medium") format("svg"), url("../font/Area-Medium.woff") format("woff"); }
@font-face { font-family: "Area-MediumItalic"; src: url("../font/Area-MediumItalic.eot"); src: url("../font/Area-MediumItalic.ttf") format("truetype"), url("../font/Area-MediumItalic.eot?#iefix") format("embedded-opentype"), url("../font/Area-MediumItalic.otf"), url("../font/Area-MediumItalic.svg#Area-MediumItalic") format("svg"), url("../font/Area-MediumItalic.woff") format("woff"); }
@font-face { font-family: "Area-Semibold"; src: url("../font/Area-Semibold.eot"); src: url("../font/Area-Semibold.ttf") format("truetype"), url("../font/Area-Semibold.eot?#iefix") format("embedded-opentype"), url("../font/Area-Semibold.otf"), url("../font/Area-Semibold.svg#Area-Semibold") format("svg"), url("../font/Area-Semibold.woff") format("woff"); }
@font-face { font-family: "Area-SemiboldItalic"; src: url("../font/Area-SemiboldItalic.eot"); src: url("../font/Area-SemiboldItalic.ttf") format("truetype"), url("../font/Area-SemiboldItalic.eot?#iefix") format("embedded-opentype"), url("../font/Area-SemiboldItalic.otf"), url("../font/Area-SemiboldItalic.svg#Area-SemiboldItalic") format("svg"), url("../font/Area-SemiboldItalic.woff") format("woff"); }
@font-face { font-family: "Area-Bold"; src: url("../font/Area-Bold.eot"); src: url("../font/Area-Bold.ttf") format("truetype"), url("../font/Area-Bold.eot?#iefix") format("embedded-opentype"), url("../font/Area-Bold.otf"), url("../font/Area-Bold.svg#Area-Bold") format("svg"), url("../font/Area-Bold.woff") format("woff"); }
@font-face { font-family: "Area-BoldItalic"; src: url("../font/Area-BoldItalic.eot"); src: url("../font/Area-BoldItalic.ttf") format("truetype"), url("../font/Area-BoldItalic.eot?#iefix") format("embedded-opentype"), url("../font/Area-BoldItalic.otf"), url("../font/Area-BoldItalic.svg#Area-BoldItalic") format("svg"), url("../font/Area-BoldItalic.woff") format("woff"); }
@font-face { font-family: "Area-Extrabold"; src: url("../font/Area-Extrabold.eot"); src: url("../font/Area-Extrabold.ttf") format("truetype"), url("../font/Area-Extrabold.eot?#iefix") format("embedded-opentype"), url("../font/Area-Extrabold.otf"), url("../font/Area-Extrabold.svg#Area-Extrabold") format("svg"), url("../font/Area-Extrabold.woff") format("woff"); }
@font-face { font-family: "Area-ExtraboldItalic"; src: url("../font/Area-ExtraboldItalic.eot"); src: url("../font/Area-ExtraboldItalic.ttf") format("truetype"), url("../font/Area-ExtraboldItalic.eot?#iefix") format("embedded-opentype"), url("../font/Area-ExtraboldItalic.otf"), url("../font/Area-ExtraboldItalic.svg#Area-ExtraboldItalic") format("svg"), url("../font/Area-ExtraboldItalic.woff") format("woff"); }
* { margin: 0; padding: 0; -webkit-font-smoothing: antialiased; transition: opacity 0.5s; }
*.disable { opacity: 0.2; pointer-events: none; }
*.hidden { display: none; }

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

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

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

html { display: block; width: 100%; height: 100%; overflow: hidden; }
html body { display: block; width: 100vw; height: 100vh; background-size: cover; background-position: center; /* LINK UTILITY */ }
@keyframes slideBg { 0% { background-image: url(../layout/bg_screensaver.jpg); }
  50% { background-image: url(../layout/bg_screensaver_2.jpg); }
  100% { background-image: url(../layout/bg_screensaver.jpg); } }
@keyframes text-it { 0% { opacity: 1; }
  25% { opacity: 0; }
  50% { opacity: 0; }
  75% { opacity: 0; }
  100% { opacity: 1; } }
@keyframes text-en { 0% { opacity: 0; }
  25% { opacity: 0; }
  50% { opacity: 1; }
  75% { opacity: 0; }
  100% { opacity: 0; } }
html body.screensaver #mm-container { background-color: transparent; background-image: url(../layout/bg_screensaver_2.jpg); background-size: cover; background-position: center; animation: slideBg 10s linear infinite 0s; animation-timing-function: ease-in-out; }
html body.screensaver #mm-container a { display: block; width: 100%; height: 100%; }
html body.screensaver #mm-container a .text.it, html body.screensaver #mm-container a .text.en { display: block; position: absolute; width: 100%; height: 100%; left: 0; top: 0; bottom: 0; right: 0; margin: auto; text-align: center; color: #fff; }
html body.screensaver #mm-container a .text.it img, html body.screensaver #mm-container a .text.en img { display: block; position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: 33%; max-width: 800px; margin: auto; object-fit: contain; object-position: center; z-index: 99; }
html body.screensaver #mm-container a .text.it h1, html body.screensaver #mm-container a .text.en h1 { color: transparent; }
html body.screensaver #mm-container a .text.it h2, html body.screensaver #mm-container a .text.en h2 { display: block; position: absolute; bottom: 300px; left: 0; right: 0; width: 50%; margin: auto; color: #fff; font-family: "Area-Regular"; font-size: 1.2vh; z-index: 9; }
html body.screensaver #mm-container a .text.it h2::before, html body.screensaver #mm-container a .text.en h2::before { display: block; content: ""; width: 100%; height: 2px; margin: 100px auto; background-color: #fff; }
html body.screensaver #mm-container a .text.it { animation: text-it 10s linear infinite 0s; animation-timing-function: ease-in-out; }
html body.screensaver #mm-container a .text.en { animation: text-en 10s linear infinite 0s; animation-timing-function: ease-in-out; }
html body #app-container { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; }
html body #app-container.home header { background-color: #fff; }
html body #app-container.home header .header-container .logo { background-image: url("../layout/logo-MAM.svg"); }
html body #app-container.home header .header-container .extra-header .languages ul li p { color: #c2845a; }
html body #app-container header { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 15vh; background-color: #fff; }
html body #app-container header .header-container { display: flex; width: calc(100% - 2vh); height: calc(100% - 6vh); padding: 3vh 1vh; }
html body #app-container header .header-container .logo { display: inline-flex; position: relative; width: 100%; background-image: url("../layout/logo-MAM.svg"); background-position: left center; background-repeat: no-repeat; background-size: contain; }
html body #app-container header .header-container .logo a { display: block; width: 100%; height: 100%; }
html body #app-container header .header-container .extra-header { display: inline-flex; position: relative; width: 100%; }
html body #app-container header .header-container .extra-header .languages { display: block; position: absolute; right: 50px; width: 100px; height: 100%; }
html body #app-container header .header-container .extra-header .languages ul { display: block; position: relative; width: 100%; height: 100%; }
html body #app-container header .header-container .extra-header .languages ul li { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; line-height: 9vh; text-align: center; opacity: 0; pointer-events: none; z-index: -1; }
html body #app-container header .header-container .extra-header .languages ul li.selected { opacity: 1; pointer-events: all; z-index: 9; }
html body #app-container header .header-container .extra-header .languages ul li p { color: #c2845a; font-size: 16px; font-family: "Area-Bold"; text-transform: uppercase; }
html body #app-container main { display: block; position: absolute; top: 15vh; left: 0; width: 100%; height: calc(100% - 15vh); overflow-x: auto; /* PAGINE APP */ }
html body #app-container main .poi-list-container { display: block; position: relative; width: calc(100% - 2vh); padding: 0 1vh; background-color: #fff; }
html body #app-container main .poi-list-container ul { display: block; width: 100%; height: 100%; }
html body #app-container main .poi-list-container ul li { display: inline-block; position: relative; width: calc(50% - 10px); height: 150px; margin-bottom: 10px; text-align: center; border-top-right-radius: 25px; border-bottom-right-radius: 25px; border-bottom-left-radius: 25px; overflow: hidden; }
html body #app-container main .poi-list-container ul li::after { display: block; content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(194, 132, 90, 0.5); pointer-events: none; }
html body #app-container main .poi-list-container ul li:nth-child(2n+0) { margin-right: 5px; }
html body #app-container main .poi-list-container ul li:nth-child(3n+0) { margin-left: 5px; }
html body #app-container main .poi-list-container ul li:nth-child(3n+1) { width: 100%; height: 90px; margin: 0 0 10px 0; }
html body #app-container main .poi-list-container ul li a { display: block; position: relative; width: 100%; height: 100%; background-color: #c2845a; }
html body #app-container main .poi-list-container ul li a h2 { display: table; position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: calc(100% - 40px); margin: auto; color: #fff; font-size: 16px; font-family: "Area-Extrabold"; line-height: 1.2em; text-transform: uppercase; text-shadow: 0 0 5px #000; z-index: 9; }
html body #app-container main .poi-list-container ul li a img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; filter: saturate(0.2); }
html body #app-container main .poi-container { display: block; position: relative; width: calc(100% - 2vh); padding: 0 1vh 100px; background-color: #fff; }
html body #app-container main .poi-container .block { display: block; position: relative; width: 100%; margin-bottom: 10px; }
html body #app-container main .poi-container .block h2 { display: block; width: 100%; margin-bottom: 10px; color: #c2845a; font-family: "Area-Extrabold"; font-size: 16px; line-height: 1.5em; }
html body #app-container main .poi-container .block:last-child { margin-bottom: 0; }
html body #app-container main .poi-container .block.main-info-poi { width: calc(100% - 40px); padding: 20px 20px 40px; border-top-left-radius: 25px; border-top-right-radius: 25px; border-bottom-right-radius: 25px; border-bottom-left-radius: 0; }
html body #app-container main .poi-container .block.main-info-poi .title-poi { display: block; width: 100%; }
html body #app-container main .poi-container .block.main-info-poi .title-poi h2 { color: #c2845a; text-transform: uppercase; }
html body #app-container main .poi-container .block.main-info-poi .text-container { display: block; width: 100%; height: 0px; /*95px*/ overflow: hidden; transition: all 0.5s ease; }
html body #app-container main .poi-container .block.main-info-poi .text-container.more-info { height: auto; }
html body #app-container main .poi-container .block.main-info-poi .text-container .text-content p { color: #3e3e3c; font-family: "Area-Regular"; font-size: 14px; line-height: 1.4em; }
html body #app-container main .poi-container .block.more-info-text { width: calc(100% - 40px); padding: 20px; border-top-left-radius: 25px; border-top-right-radius: 25px; border-bottom-right-radius: 25px; border-bottom-left-radius: 0; background-color: #fbf7f4; }
html body #app-container main .poi-container .block.more-info-text .btn.expand { top: 20px; right: 20px; left: auto; bottom: auto; }
html body #app-container main .poi-container .block.more-info-text .title-poi { max-width: calc(100% - 30px); min-height: 20px; line-height: 20px; }
html body #app-container main .poi-container .block.more-info-text .title-poi h2 { margin-bottom: 0; }
html body #app-container main .poi-container .block.more-info-text .text-container { display: block; width: 100%; height: 0px; overflow: hidden; transition: all 0.5s ease; }
html body #app-container main .poi-container .block.more-info-text .text-container.more-info { height: auto; }
html body #app-container main .poi-container .block.more-info-text .text-container .text-content { margin-top: 20px; }
html body #app-container main .poi-container .block.more-info-text .text-container .text-content p { color: #3e3e3c; font-family: "Area-Regular"; font-size: 14px; line-height: 1.4em; }
html body #app-container main .poi-container .block.video-container .video-content video { display: block; width: 100%; aspect-ratio: 16/9; background-color: #000; }
html body #app-container main .poi-container .block.gallery-container { margin-bottom: 0; }
html body #app-container main .poi-container .block.gallery-container .gallery-content ul { display: block; width: 100%; white-space: nowrap; overflow-x: auto; scroll-snap-type: x mandatory; }
html body #app-container main .poi-container .block.gallery-container .gallery-content ul::-webkit-scrollbar { width: 0; height: 0; }
html body #app-container main .poi-container .block.gallery-container .gallery-content ul li { display: inline-block; scroll-snap-align: center; position: relative; width: 300px; aspect-ratio: 4/3; border-radius: 25px; border: 1px solid #c2845a; overflow: hidden; }
html body #app-container main .poi-container .block.gallery-container .gallery-content ul li img { display: block; position: relative; width: 100%; height: 100%; object-fit: cover; object-position: center; background-color: #fff; }
html body #app-container main .poi-container .audio-poi { display: block; position: fixed; bottom: 2vh; left: 1vh; width: calc(100% - 2vh); height: 70px; border-radius: 25px; background-color: #c2845a; box-shadow: 0 0 20px #3e3e3c; z-index: 9; }
html body #app-container main .poi-container .audio-poi audio { display: block; position: absolute; top: 0; bottom: 0; width: 100%; margin: auto; border-radius: 25px; background-color: #c2845a; }
html body #app-container main .poi-container .audio-poi audio::-webkit-media-controls-enclosure { height: 70px; color: #fff; background-color: #c2845a; }
html body #app-container main .poi-container .audio-poi audio::-webkit-media-controls-current-time-display, html body #app-container main .poi-container .audio-poi audio::-webkit-media-controls-time-remaining-display { color: black; }
html body #app-container main .credits-container { display: block; position: relative; width: calc(100% - 2vh); height: calc(100% - 6vh); padding: 0 1vh 6vh; background-color: #b34b42; background: linear-gradient(0deg, #c2845a 0%, #b34b42 100%); }
html body #app-container main .credits-container .text-container { display: block; width: 100%; color: #fff; }
html body #app-container main .credits-container .text-container h2 { display: block; width: 100%; margin-bottom: 20px; font-size: 16px; font-family: "Area-Bold"; text-transform: uppercase; }
html body #app-container main .credits-container .text-container p { display: block; margin-bottom: 20px; font-family: "Area-Regular"; font-size: 14px; line-height: 1.4em; }
html body #app-container main .credits-container .text-container p:last-child { margin-bottom: 0; }
html body #app-container main .credits-container .text-container img { display: block; width: 100%; object-fit: contain; object-position: center; }
html body #app-container #zoom-gallery { display: flex; flex-direction: column; justify-content: center; align-items: center; position: fixed; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; z-index: -1; transition: all 0.5s ease; }
html body #app-container #zoom-gallery.active { opacity: 1; pointer-events: all; z-index: 999; }
html body #app-container #zoom-gallery.active::after { display: block; content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; backdrop-filter: blur(10px); background-color: rgba(62, 62, 60, 0.9); z-index: -1; }
html body #app-container #zoom-gallery .btn.close { top: 5px !important; right: 5px !important; }
html body #app-container #zoom-gallery ul.imgs-gallery { display: block; width: 100%; white-space: nowrap; scroll-snap-type: x mandatory; overflow-x: auto; max-width: 100%; max-height: 100%; }
html body #app-container #zoom-gallery ul.imgs-gallery li { display: inline-block; position: relative; width: 100%; height: 100%; scroll-snap-align: center; }
html body #app-container #zoom-gallery ul.imgs-gallery li img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center; }
html body #app-container #zoom-gallery ul.imgs-gallery li span { display: block; position: absolute; bottom: 30px; left: 5%; width: 90%; margin: 0 auto; color: #fff; font-family: "Area-Regular"; font-size: 10px; text-align: center; text-shadow: 0 0 20px #000; }
html body #app-container #zoom-gallery ul.pagination-gallery { display: flex; justify-content: center; position: absolute; bottom: 10px; width: 100%; text-align: center; }
html body #app-container #zoom-gallery ul.pagination-gallery li { display: inline-flex; width: 5px; height: 5px; margin: 1px 3px; border-radius: 2.5px; background-color: #fff; box-shadow: 0 0 20px #3e3e3c; transition: all 0.5s ease; }
html body #app-container #zoom-gallery ul.pagination-gallery li.selected { width: 25px; height: 5px; border-radius: 2.5px; background-color: #c2845a; }
html body #app-container.credits header { background-color: #b34b42; }
html body #app-container.credits header .header-container .logo { background-image: url("../layout/logo-MAM-white.svg"); }
html body #app-container.credits header .header-container .extra-header .languages ul li p { color: #fff; }
html body .btn { display: table; z-index: 9; }
html body .btn a { display: block; width: 100%; height: 100%; }
html body .btn.hidden { opacity: 0 !important; pointer-events: none !important; }
html body .btn.disabled { opacity: 0.2 !important; pointer-events: none !important; }
html body .btn.info { position: absolute; top: calc(50% - 25px); right: 0; width: 50px; height: 50px; border-top-right-radius: 25px; border-bottom-right-radius: 25px; border-bottom-left-radius: 25px; background-image: url(../layout/icon-info-white.svg); background-color: #b34b42; box-shadow: 0 0 10px #3e3e3c; }
html body .btn.close { position: absolute; top: calc(50% - 25px); right: 0; width: 50px; height: 50px; background-image: url(../layout/icon-close-white.svg); }
html body .btn.expand { position: absolute; bottom: 10px; left: 0; right: 0; margin: auto; width: 25px; height: 25px; background-image: url(../layout/icon-expand-orange.svg); transition: all 0.5s ease; }
html body .btn.expand.close-expand { background-image: url(../layout/icon-collapse-orange.svg); }
html body .btn.zoom { display: block; position: absolute; bottom: 10px; right: 10px; width: 20px; height: 20px; background-image: url(../layout/icon-zoom-white.svg); filter: drop-shadow(0 0 5px #000); }
@media screen and (orientation: landscape) { html body { width: 100vh; height: 100vw; } }

@media screen and (orientation: landscape) { html { transform: rotate(-90deg); transform-origin: left top; width: 100vh; height: 100vw; overflow-x: hidden; position: absolute; top: 100%; left: 0; } }
a { text-decoration: none; }

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

i, em { font-style: italic; }

b, strong { font-weight: 800; }