@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 { width: 10px; }

::-webkit-scrollbar-track { background: #fff; border-radius: 5px; }

::-webkit-scrollbar-thumb { background: #b34b42; border-radius: 5px; }

html { display: block; width: 100%; height: 100%; overflow: hidden; }
html body { display: block; width: 100%; height: 100%; background-size: cover; background-position: center; background-color: #000; /* 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 #mm-container { display: block; position: absolute; top: 50%; left: 50%; background-color: #000; overflow: hidden; }
html body #mm-container.portrait { width: 2160px; height: 3840px; margin-top: -1920px; margin-left: -1080px; }
html body #mm-container.landscape { width: 3840px; height: 2160px; margin-top: -1080px; margin-left: -1920px; }
html body #mm-container .block-leggio-container { display: block; position: absolute; top: 0; left: 0; width: calc(100% - 300px); height: calc(100% - 400px); padding: 200px 150px; background-image: url("../layout/bg_leggio.jpg"); background-position: center; background-size: contain; background-repeat: no-repeat; background-color: #c2845a; }
html body #mm-container .block-leggio-container .homepage { display: block; position: relative; width: 100%; height: 100%; }
html body #mm-container .block-leggio-container .homepage::after { display: block; content: ""; position: absolute; bottom: -200px; right: -150px; width: 1882px; height: 1393px; background-image: url("../layout/img-MAM-stamp.svg"); background-position: bottom right; background-size: contain; background-repeat: no-repeat; }
html body #mm-container .block-leggio-container .homepage .title { display: block; }
html body #mm-container .block-leggio-container .homepage .title h1 { color: #c2845a; font-family: "Area-Extrabold"; font-size: 100px; line-height: 150px; text-transform: uppercase; }
html body #mm-container .block-leggio-container .homepage .title h1 span { display: block; }
html body #mm-container .block-leggio-container .homepage .logo { display: block; position: absolute; top: 0; right: 0; width: 330px; height: 280px; }
html body #mm-container .block-leggio-container .homepage .logo img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: top right; }
html body #mm-container .books-list { display: block; position: absolute; top: calc(50% - 450px); left: 0; width: 100%; height: 900px; z-index: 9; }
html body #mm-container .books-list ul { display: block; width: calc(100% - 300px); height: 100%; white-space: nowrap; overflow-x: auto; overflow-y: hidden; padding: 0 50px 150px; }
html body #mm-container .books-list ul::-webkit-scrollbar-thumb { background-color: #c2845a; }
html body #mm-container .books-list ul li { display: inline-block; width: 565px; height: auto; margin: 0 50px; backdrop-filter: blur(10px); }
html body #mm-container .books-list ul li:first-child { margin-left: 0; }
html body #mm-container .books-list ul li:last-child { margin-right: 0; }
html body #mm-container .books-list ul li a { display: block; position: relative; width: 100%; height: 100%; }
html body #mm-container .books-list ul li a h2 { display: block; position: absolute; top: 30%; left: 5%; width: 90%; white-space: break-spaces; color: #fff; font-family: "Area-Extrabold"; font-size: 40px; line-height: 60px; text-align: center; text-transform: uppercase; text-shadow: 0 0 20px #3e3e3c; }
html body #mm-container .books-list ul li a img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; box-shadow: 0 30px 50px rgba(62, 62, 60, 0.5); }
html body #mm-container .area-leggio { display: block; position: relative; width: 100%; height: 100%; }
html body #mm-container .area-leggio .title { display: block; position: absolute; top: 600px; left: 0; width: 600px; transform: rotate(-90deg); transform-origin: 0 0; text-align: right; }
html body #mm-container .area-leggio .title h1 { color: #c2845a; font-family: "Area-Extrabold"; font-size: 40px; }
html body #mm-container .area-leggio .logo { display: block; position: absolute; top: 0; right: 0; width: 330px; height: 280px; }
html body #mm-container .area-leggio .logo img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: top right; }
html body #mm-container .area-leggio .controls-container { display: block; position: absolute; top: calc(50% - 65px); width: 100%; height: 130px; pointer-events: none; }
html body #mm-container .area-leggio .controls-container .btn { pointer-events: all; }
html body #mm-container .area-leggio #book { display: block; width: 2800px; height: 1660px; margin: 0 auto; overflow: hidden; }
html body #mm-container .area-leggio #book #canvas { display: block; position: relative; height: 100%; margin-left: calc(50% - 320px); margin-top: 610px; }
html body #mm-container .area-leggio #book #canvas.landscape { margin-left: calc(50% - 460px); margin-top: 850px; }
html body #mm-container .area-leggio .nav-bar { display: block; z-index: 100; position: absolute; left: 0; right: 0; bottom: -65px; width: 2800px; height: 20px; margin: auto; border-radius: 10px; background-color: #fff; }
html body #mm-container .area-leggio .nav-bar.hidden { display: none; }
html body #mm-container .area-leggio .nav-bar .progress-bar { display: block; position: relative; width: 10%; height: 20px; border-radius: 10px; background-color: #c2845a; transition: width 0.5s ease; }
html body #mm-container .area-leggio .nav-bar .progress-bar::after { display: block; content: ""; position: absolute; top: -5px; right: 0; width: 20px; height: 20px; border-radius: 100%; border: 5px solid #fff; background-color: #c2845a; box-shadow: 0 0 20px #3e3e3c; }
html body #mm-container .area-leggio .nav-bar .progress-bar .page-n { display: block; position: relative; top: -80px; left: 0; min-width: 50px; height: 20px; padding: 15px 20px; border-radius: 10px; color: #fff; float: right; font-family: "Area-Extrabold"; font-size: 20px; text-align: center; background-color: #c2845a; }
html body #mm-container .zoom { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; z-index: -1; transition: all 0.5s ease; }
html body #mm-container .zoom.active { opacity: 1; pointer-events: all; z-index: 99999; }
html body #mm-container .zoom.active::after { display: block; content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(62, 62, 60, 0.8); backdrop-filter: blur(5px); z-index: 9; }
html body #mm-container .zoom .zoom-area { display: block; position: absolute; left: 0; bottom: 0; right: 0; top: 0; width: 3200px; height: 1700px; margin: auto; z-index: 99; }
html body #mm-container .zoom .zoom-area img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center; }
html body #mm-container .zoom .zoom-area video { display: block; width: 100%; height: 100%; margin-bottom: 100px; object-fit: contain; object-position: center; }
html body #mm-container .zoom .zoom-area .progress-bar { position: absolute; bottom: -90px; left: 0; height: 15px; width: 0; background-color: #c2845a; transition: width 0.1s ease; cursor: pointer; }
html body #mm-container .zoom .zoom-area .progress-bar-overlay { position: absolute; bottom: -100px; left: 0; height: 40px; width: 3200px; background-color: transparent; cursor: pointer; z-index: 10; }
html body #mm-container .zoom .zoom-area .play-button { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 300px; height: 300px; background: url("../layout/icon-play-orange.svg") no-repeat center center; background-size: contain; pointer-events: none; }
html body #mm-container .videos-images-list { display: block; position: absolute; top: calc(50% - 450px); left: 0; width: 100%; height: 900px; z-index: 9; }
html body #mm-container .videos-images-list.video ul li { aspect-ratio: 16/9; }
html body #mm-container .videos-images-list.video ul li a .play-button { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 300px; height: 300px; background: url("../layout/icon-play-orange.svg") no-repeat center center; background-size: contain; pointer-events: none; }
html body #mm-container .videos-images-list.image ul li { aspect-ratio: 4/3; }
html body #mm-container .videos-images-list ul { display: block; width: 100%; height: 100%; padding-bottom: 50px; overflow-x: auto; overflow-y: hidden; white-space: nowrap; }
html body #mm-container .videos-images-list ul::-webkit-scrollbar-thumb { background-color: #808080; }
html body #mm-container .videos-images-list ul li { display: inline-block; width: auto; max-width: calc(33% - 50px); height: 100%; margin-right: 50px; background-color: #3e3e3c; }
html body #mm-container .videos-images-list ul li:last-child { margin-right: 0; }
html body #mm-container .videos-images-list ul li a { display: block; position: relative; width: 100%; height: 100%; }
html body #mm-container .videos-images-list ul li a::after { content: ""; display: block; position: absolute; bottom: 0; left: 0; width: 100%; height: 50%; background: linear-gradient(180deg, rgba(62, 62, 60, 0) 0%, #3e3e3c 100%); z-index: 0; }
html body #mm-container .videos-images-list ul li a h2 { display: block; position: absolute; bottom: 50px; width: calc(100% - 100px); padding: 0 50px; color: #fff; font-size: 30px; font-family: "Area-Extrabold"; text-align: center; line-height: 1.5em; white-space: break-spaces; z-index: 9; }
html body #mm-container .videos-images-list ul li a img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
html body #mm-container .header { display: flex; position: absolute; top: 0; left: 0; width: calc(100% - 400px); height: calc(600px - 200px); padding: 200px 200px 0; box-shadow: 0 0 50px rgba(62, 62, 60, 0.5); background-color: #fff; z-index: 9999; }
html body #mm-container .header .content-header { display: block; position: relative; width: 100%; height: 100%; }
html body #mm-container .header .content-header .title { display: inline-flex; }
html body #mm-container .header .content-header .title h1 { color: #c2845a; font-family: "Area-Extrabold"; font-size: 100px; line-height: 150px; }
html body #mm-container .header .content-header .title h1 span { display: block; }
html body #mm-container .header .content-header .logo { display: block; position: absolute; top: 0; right: 0; width: 330px; height: 280px; }
html body #mm-container .header .content-header .logo img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: top right; }
html body #mm-container .block-map-container { display: block; position: absolute; top: 600px; left: 0; width: 100%; height: calc(100% - 600px); background-color: #c2845a; }
html body #mm-container .block-map-container #map { display: block; width: 100%; height: 100%; }
html body #mm-container .block-map-container #map .leaflet-control-container .leaflet-left { bottom: 100px; right: 150px; }
html body #mm-container .block-map-container #map .leaflet-control-container .leaflet-left .leaflet-control { box-shadow: 0 0 20px #3e3e3c; }
html body #mm-container .block-map-container #map .leaflet-control-container .leaflet-left .leaflet-control a { width: 100px; height: 100px; color: transparent; background-size: contain; background-position: center; background-repeat: no-repeat; background-color: #fff; }
html body #mm-container .block-map-container #map .leaflet-control-container .leaflet-left .leaflet-control a.leaflet-control-zoom-in { border-top-left-radius: 10px; border-top-right-radius: 10px; background-image: url("../layout/icon-plus-orange.svg"); }
html body #mm-container .block-map-container #map .leaflet-control-container .leaflet-left .leaflet-control a.leaflet-control-zoom-out { border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; background-image: url("../layout/icon-plus-orange.svg"); }
html body #mm-container .block-map-container #map .leaflet-control-container .leaflet-bottom { display: none !important; }
html body #mm-container .popup-intro { display: block; position: absolute; bottom: 0; left: 0; width: 100%; height: calc(100% - 600px); pointer-events: none; opacity: 0; z-index: -1; transition: all 0.5s ease; }
html body #mm-container .popup-intro.opened { pointer-events: all; opacity: 1; z-index: 99; }
html body #mm-container .popup-intro.opened::after { display: block; content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; background-color: rgba(62, 62, 60, 0.9); backdrop-filter: blur(10px); z-index: 9; }
html body #mm-container .popup-intro .intro-container { display: block; position: absolute; bottom: 0; left: 0; right: 0; width: calc(100% - 400px); height: 2000px; margin: auto; border-radius: 0 50px 0 0; background-color: #c2845a; z-index: 999; }
html body #mm-container .popup-intro .intro-container .intro-content { display: block; width: calc(100% - 200px); height: calc(100% - 250px); margin: 150px auto 100px; color: #fff; }
html body #mm-container .popup-intro .intro-container .intro-content h2 { font-family: "Area-Extrabold"; font-size: 80px; text-transform: uppercase; margin-bottom: 50px; }
html body #mm-container .popup-intro .intro-container .intro-content .scrollable-text { display: block; width: 100%; height: 1600px; padding-right: 20px; overflow-y: auto; }
html body #mm-container .popup-intro .intro-container .intro-content .scrollable-text p { font-family: "Area-Regular"; font-size: 30px; line-height: 55px; }
html body #mm-container .popup-poi { display: block; position: absolute; bottom: 350; left: 0; right: 0; width: calc(100% - 300px); height: 900px; margin: auto; pointer-events: none; opacity: 0; z-index: -1; transition: all 0.5s ease; }
html body #mm-container .popup-poi.active { pointer-events: all; opacity: 1; z-index: 99; }
html body #mm-container .popup-poi .btn.close { left: -50px; bottom: 100px; background-image: url("../layout/icon-close-white.svg"); background-color: #c2845a; }
html body #mm-container .popup-poi .poi-container { display: block; width: calc(100% - 200px); height: calc(100% - 200px); padding: 100px; border-radius: 0 50px 50px 50px; background-color: #fff; box-shadow: 0 0 20px #3e3e3c; }
html body #mm-container .popup-poi .poi-container .poi-content { display: block; position: relative; width: 100%; height: 100%; }
html body #mm-container .popup-poi .poi-container .poi-content h2 { display: block; width: 100%; margin-bottom: 20px; color: #c2845a; font-family: "Area-Extrabold"; font-size: 80px; text-transform: uppercase; }
html body #mm-container .popup-poi .poi-container .poi-content .block-info-poi { display: flex; flex-direction: row; width: 100%; height: calc(100% - 80px); }
html body #mm-container .popup-poi .poi-container .poi-content .block-info-poi .gallery-images { display: inline-flex; position: relative; width: 100%; height: 100%; }
html body #mm-container .popup-poi .poi-container .poi-content .block-info-poi .gallery-images ul.imgs { display: block; position: relative; width: 800px; height: 600px; margin-right: 50px; overflow-x: auto; overflow-y: hidden; white-space: nowrap; }
html body #mm-container .popup-poi .poi-container .poi-content .block-info-poi .gallery-images ul.imgs::-webkit-scrollbar { display: none; width: 0 !important; }
html body #mm-container .popup-poi .poi-container .poi-content .block-info-poi .gallery-images ul.imgs li { display: inline-block; width: 100%; height: 100%; }
html body #mm-container .popup-poi .poi-container .poi-content .block-info-poi .gallery-images ul.imgs li img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
html body #mm-container .popup-poi .poi-container .poi-content .block-info-poi .gallery-images ul.pagination { display: block; position: absolute; left: 0; bottom: 30px; width: 800px; text-align: center; pointer-events: none; z-index: 9; }
html body #mm-container .popup-poi .poi-container .poi-content .block-info-poi .gallery-images ul.pagination::after { display: block; content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 100px; background: linear-gradient(0deg, rgba(62, 62, 60, 0.5) 0%, rgba(62, 62, 60, 0) 100%); pointer-events: none; z-index: -1; }
html body #mm-container .popup-poi .poi-container .poi-content .block-info-poi .gallery-images ul.pagination li { display: inline-block; width: 20px; height: 20px; margin: 15px 5px; border-radius: 10px; background-color: #fbf7f4; transition: all 0.5s ease; }
html body #mm-container .popup-poi .poi-container .poi-content .block-info-poi .gallery-images ul.pagination li.selected { width: 80px; background-color: #c2845a; }
html body #mm-container .popup-poi .poi-container .poi-content .block-info-poi .scrollable-text { display: inline-flex; flex-direction: column; width: 100%; height: 100%; padding-right: 20px; overflow-y: auto; }
html body #mm-container .popup-poi .poi-container .poi-content .block-info-poi .scrollable-text::-webkit-scrollbar-track { background: #fbf7f4; }
html body #mm-container .popup-poi .poi-container .poi-content .block-info-poi .scrollable-text p { color: #3e3e3c; font-family: "Area-Regular"; font-size: 30px; line-height: 50px; }
html body #mm-container .mm-map-container { display: block; position: relative; width: 100%; height: 100%; }
html body .choice-list { display: block; position: relative; width: 100%; margin-top: 150px; z-index: 9; }
html body .choice-list ul { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: center; width: 100%; }
html body .choice-list ul li { display: inline-flex; width: 100%; }
html body .choice-list ul li a { display: block; position: relative; }
html body .choice-list ul li a h2 { display: block; position: absolute; bottom: -50px; width: 100%; color: #b34b42; font-size: 80px; font-family: "Area-Extrabold"; text-align: center; }
html body .choice-list ul li a img { display: block; object-fit: contain; object-position: center; }
html body .gallery-zoom, html body .gallery { display: none; }
html body .gallery-zoom.visible, html body .gallery.visible { display: block; }
html body .gallery-zoom ul.gallery-style-dots, html body .gallery ul.gallery-style-dots { visibility: hidden; }
html body .gallery-zoom ul.arrow-gallery li.left, html body .gallery ul.arrow-gallery li.left { pointer-events: auto; border: none; height: 130px; width: 130px; margin: 30px; left: 200px; background-image: url("../layout/icon-arrow-back-orange.svg"); }
html body .gallery-zoom ul.arrow-gallery li.left h3, html body .gallery ul.arrow-gallery li.left h3 { display: block; width: 100%; padding-top: 168px; color: #3e3e3c; font-family: "Area-Extrabold"; font-size: 20px; text-align: center; text-transform: uppercase; line-height: 1.3em; }
html body .gallery-zoom ul.arrow-gallery li.right, html body .gallery ul.arrow-gallery li.right { pointer-events: auto; border: none; height: 130px; margin: 30px; width: 130px; right: 200px; background-image: url("../layout/icon-arrow-forward-orange.svg"); }
html body .gallery-zoom ul.arrow-gallery li.right h3, html body .gallery ul.arrow-gallery li.right h3 { display: block; width: 100%; padding-top: 168px; color: #3e3e3c; font-family: "Area-Extrabold"; font-size: 20px; text-align: center; text-transform: uppercase; line-height: 1.3em; }
html body .gallery ul.arrow-gallery { pointer-events: none; position: absolute; bottom: 500px; margin: 0 155px; width: 3100px; height: 300px; background-size: contain; background-position: top center; background-repeat: no-repeat; }
html body .gallery-zoom ul.arrow-gallery { position: absolute; bottom: 900px; margin: 0 -25px; width: 3900px; height: 300px; background-size: contain; background-position: top center; background-repeat: no-repeat; }
html body .gallery-zoom .gallery-window figure.item img { min-height: 2000px; max-height: 90% !important; }
html body .gallery-zoom .gallery-window figure.item video { max-width: 100%; width: auto; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; min-height: 1600px; max-height: 90% !important; }
html body .images-description { display: flex; margin-top: 75px; font-size: 33px; justify-content: center; text-align: center; margin: 75 400px; }
html body .images-description.hidden { display: none; }
html body #content-video-image { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 2800px; height: 1500px; margin: 0 auto; overflow: hidden; }
html body #content-video-image.hidden { display: none; }
html body #content-video-image video { display: block; position: relative; width: 100%; height: 100%; background-color: #c2845a; aspect-ratio: 16/9; }
html body #content-video-image .play-button { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 300px; height: 300px; background: url("../layout/icon-play-orange.svg") no-repeat center center; background-size: contain; pointer-events: none; }
html body #content-video-image img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center; aspect-ratio: 16/9; }
html body #content-video-image p { display: block; width: 80%; margin: 0 100px; font-size: 50px; text-align: left; font-family: "Area-Regular"; line-height: 1.5; }
html body #content-video-image p.descrizione-immagine { height: 20%; font-size: 30px; padding-right: 30px; overflow-y: auto; }
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.languages { position: absolute; left: 150px; bottom: 100px; width: 95px; height: 95px; border-radius: 0 50px 50px 50px; border: 5px solid #fff; background-color: #fff; box-shadow: 0 0 20px #3e3e3c; }
html body .btn.languages.it { background-image: url("../layout/icon-languages-it.svg"); }
html body .btn.languages.en { background-image: url("../layout/icon-languages-en.svg"); }
html body .btn.goto { position: absolute; min-width: 500px; height: 100px; border-radius: 0 50px 50px 50px; background-color: #c2845a; box-shadow: 0 0 20px #3e3e3c; }
html body .btn.goto.intro { left: 300px; bottom: 100px; }
html body .btn.goto a { display: block; width: calc(100% - 70px); height: calc(100% - 60px); padding: 30px 35px; text-align: center; }
html body .btn.goto a h3 { color: #fff; font-family: "Area-Extrabold"; font-size: 40px; text-transform: uppercase; }
html body .btn.close { position: absolute; left: 150px; bottom: 100px; width: 100px; height: 100px; border-radius: 0 50px 50px 50px; background-color: #fff; background-image: url("../layout/icon-close-orange.svg"); background-size: contain; background-position: center; box-shadow: 0 0 20px #3e3e3c; z-index: 9999; }
html body .btn.home { position: absolute; left: 150px; bottom: 100px; width: 100px; height: 100px; border-radius: 0 50px 50px 50px; background-color: #c2845a; background-image: url("../layout/icon-home-white.svg"); background-size: contain; background-position: center; box-shadow: 0 0 20px #3e3e3c; z-index: 9999; }
html body .btn.page-back { position: absolute; left: 150px; bottom: 250px; width: 100px; height: 100px; border-radius: 0 50px 50px 50px; background-color: #fff; background-image: url("../layout/icon-arrow-back-orange.svg"); background-size: 50px; background-position: center; background-repeat: no-repeat; box-shadow: 0 0 20px #3e3e3c; z-index: 9999; }
html body .btn.arrow { position: absolute; width: 130px; height: 130px; background-size: contain; background-position: top center; background-repeat: no-repeat; }
html body .btn.arrow.back { left: 200px; background-image: url("../layout/icon-arrow-back-orange.svg"); }
html body .btn.arrow.fullback { left: 0; background-image: url("../layout/icon-arrow-fullback-orange.svg"); }
html body .btn.arrow.forward { right: 200px; background-image: url("../layout/icon-arrow-forward-orange.svg"); }
html body .btn.arrow.fullforward { right: 0; background-image: url("../layout/icon-arrow-fullforward-orange.svg"); }
html body .btn.arrow a { height: auto; }
html body .btn.arrow a h3 { display: block; width: 100%; padding-top: 168px; color: #3e3e3c; font-family: "Area-Extrabold"; font-size: 20px; text-align: center; text-transform: uppercase; line-height: 1.3em; }

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