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 ***/
/*** SPLASHPAGE ***/
/*** SALE ***/
/*** GIOCO ***/
/*** HOME ***/
/* CSS Document */
@font-face { font-family: "Montserrat-Thin"; src: url("../font/Montserrat-Thin.ttf") format("truetype"); }
@font-face { font-family: "Montserrat-ThinItalic"; src: url("../font/Montserrat-ThinItalic.ttf") format("truetype"); }
@font-face { font-family: "Montserrat-ExtraLight"; src: url("../font/Montserrat-ExtraLight.ttf") format("truetype"); }
@font-face { font-family: "Montserrat-ExtraLightItalic"; src: url("../font/Montserrat-ExtraLightItalic.ttf") format("truetype"); }
@font-face { font-family: "Montserrat-Light"; src: url("../font/Montserrat-Light.ttf") format("truetype"); }
@font-face { font-family: "Montserrat-LightItalic"; src: url("../font/Montserrat-LightItalic.ttf") format("truetype"); }
@font-face { font-family: "Montserrat-Regular"; src: url("../font/Montserrat-Regular.ttf") format("truetype"); }
@font-face { font-family: "Montserrat-Italic"; src: url("../font/Montserrat-Italic.ttf") format("truetype"); }
@font-face { font-family: "Montserrat-Medium"; src: url("../font/Montserrat-Medium.ttf") format("truetype"); }
@font-face { font-family: "Montserrat-MediumItalic"; src: url("../font/Montserrat-MediumItalic.ttf") format("truetype"); }
@font-face { font-family: "Montserrat-SemiBold"; src: url("../font/Montserrat-SemiBold.ttf") format("truetype"); }
@font-face { font-family: "Montserrat-SemiBoldItalic"; src: url("../font/Montserrat-SemiBoldItalic.ttf") format("truetype"); }
@font-face { font-family: "Montserrat-Bold"; src: url("../font/Montserrat-Bold.ttf") format("truetype"); }
@font-face { font-family: "Montserrat-BoldItalic"; src: url("../font/Montserrat-BoldItalic.ttf") format("truetype"); }
@font-face { font-family: "Montserrat-ExtraBold"; src: url("../font/Montserrat-ExtraBold.ttf") format("truetype"); }
@font-face { font-family: "Montserrat-ExtraBoldItalic"; src: url("../font/Montserrat-ExtraBoldItalic.ttf") format("truetype"); }
@font-face { font-family: "Montserrat-Black"; src: url("../font/Montserrat-Black.ttf") format("truetype"); }
@font-face { font-family: "Montserrat-BlackItalic"; src: url("../font/Montserrat-BlackItalic.ttf") format("truetype"); }
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-font-smoothing: antialiased; overscroll-behavior: none; transition: opacity 0.5s; }
*.disable { opacity: 0.2; pointer-events: none; }
*.hidden { display: none; }
* a:active { opacity: 0.5; }
*.centrato { padding-left: 30px; padding-right: 30px; }

::-webkit-scrollbar { width: 10px; width: 0; }

html, body { width: 100%; height: 100%; margin: 0; padding: 0; font-size: 62.5%; /* 1rem = 10px */ }

body { display: flex; flex-direction: column; background-color: #EDEDED; background-image: url(../layout/rotate-phone.gif); background-repeat: no-repeat; background-position: center center; background-size: 30% auto; overflow: auto; /* PAGINE */ }
body.disabled #app-container footer { opacity: 0.5; }
body a.back-button { content: ""; background-image: url("../layout/icon-btn_back_white.svg"); background-size: 20px; background-position: center; background-repeat: no-repeat; background-color: transparent; position: absolute; top: 20px; left: 30px; width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; cursor: pointer; text-decoration: none; transition: color 0.3s; background-color: #CC7F3E; color: #ffffff; padding: 15px; border-radius: 50%; font-family: "Montserrat-Regular"; font-size: 28px; box-shadow: 0px 3px 15px #00000029; z-index: 2; }
body button.audio-button { content: ""; background-image: url("../layout/icon_audio.svg"); background-size: 25px; background-position: center; background-repeat: no-repeat; background-color: #CC7F3E; border-radius: 50%; padding: 25px; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; cursor: pointer; border: none; box-shadow: 0px 5px 10px #00000029; z-index: 1; }
body button.audio-button.playing { background-image: url("../layout/icon-stop.svg"); background-size: 20px; }
body button.lis-button { content: ""; background-image: url("../layout/icon-lis.svg"); background-size: 25px; background-position: center; background-repeat: no-repeat; background-color: transparent; background-color: #414141; border-radius: 50%; padding: 25px; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; cursor: pointer; border: none; box-shadow: 0px 5px 10px #00000029; }
body button.close-lis-button { position: absolute; top: 20px; left: 20px; content: ""; background-image: url("../layout/icon-btn_back.svg"); background-size: 25px; background-position: center; background-repeat: no-repeat; background-color: #ffffff; border-radius: 50%; padding: 25px; width: 30px; height: 30px; cursor: pointer; border: none; box-shadow: 0px 5px 10px #00000029; z-index: 99; }
body button.qrcode-button { content: ""; background-image: url("../layout/icon-qrcode.svg"); background-size: 25px; background-position: center; background-repeat: no-repeat; background-color: transparent; background-color: #CC7F3E; border-radius: 50%; padding: 25px; margin-left: 30px; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; cursor: pointer; border: none; box-shadow: 0px 5px 10px #00000029; z-index: 2; }
body button.close-modal-button { position: absolute; top: 20px; right: 20px; content: ""; background-image: url("../layout/icon-btn_close.svg"); background-size: 15px; background-position: center; background-repeat: no-repeat; background-color: #414141; border-radius: 50%; padding: 25px; width: 30px; height: 30px; cursor: pointer; border: none; box-shadow: 0px 5px 10px #00000029; }
body button.arrow-left { content: ""; background-image: url("../layout/icon-btn_back.svg"); background-size: 25px; background-position: center; background-repeat: no-repeat; background-color: transparent; width: 30px; height: 100%; display: flex; align-items: center; justify-content: center; cursor: pointer; border: none; }
body button.arrow-right { content: ""; transform: rotate(180deg); background-image: url("../layout/icon-btn_back.svg"); background-size: 25px; background-position: center; background-repeat: no-repeat; background-color: transparent; width: 30px; height: 100%; display: flex; align-items: center; justify-content: center; cursor: pointer; border: none; }
body #loading-page { flex: 1; display: flex; flex-direction: column; justify-content: end; background-image: url("../layout/logo_splash.png"); background-size: 60%; background-repeat: no-repeat; background-position: center; background-color: #759a80; }
body #app-container { display: flex; flex-direction: column; justify-content: space-between; height: 100dvh; width: 100%; max-width: 1200px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); }
body #app-container header { height: 12rem; display: flex; align-items: center; background-color: #EDEDED; }
body #app-container header .title-page { display: flex; align-items: center; padding-right: 8rem; gap: 10px; }
body #app-container header .title-page .title-text { display: flex; flex-direction: column; gap: 10px; }
body #app-container header .title-page .title-text h1 { color: #414141; }
body #app-container header .title-page .title-text h1 p .copy { cursor: pointer; text-decoration: underline; color: #414141; }
body #app-container header .title-page .title-text h1 p .copy.copied { color: #8ba83e; }
@media (orientation: landscape) { body #app-container header { display: none; } }
body #app-container main { display: flex; flex-direction: column; flex: 1; background-color: #EDEDED; }
body #app-container main.home { padding-top: 0px; margin-top: 150px; gap: 40px; }
body #app-container main.home .logo-container { position: absolute; top: 20px; left: 30px; width: 100px; height: 100px; }
body #app-container main.home .logo-container img { width: 100%; height: 100%; object-fit: cover; }
body #app-container main.home header .title-page { padding: 0; }
body #app-container main::-webkit-scrollbar { width: 0; height: 0; }
body #app-container main #home .major-section { display: flex; flex-direction: column; gap: 15px; padding: 40px 0; background-color: #cce4d0; }
body #app-container main #home .major-section ul { display: flex; overflow-x: auto; overflow-y: hidden; -ms-overflow-style: none; scrollbar-width: none; gap: 15px; }
body #app-container main #home .major-section ul::-webkit-scrollbar { display: none; }
body #app-container main #home .major-section ul li { border-radius: 25px; }
body #app-container main #home .major-section ul li a { display: flex; flex-direction: column; justify-content: space-between; width: 225px; height: 260px; background-color: #ffffff; border-radius: 25px; padding: 15px; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08); }
body #app-container main #home .major-section ul li a img { width: 100%; height: 200px; object-fit: cover; object-position: center center; border-radius: 14px; }
body #app-container main #home .major-section ul li a h2 { align-self: flex-start; margin-bottom: 5px; }
body #app-container main #home .mid-section { display: flex; flex-direction: column; gap: 15px; padding: 40px 0; background-color: #ffffff; }
body #app-container main #home .mid-section ul { display: flex; justify-content: center; gap: 5px; }
body #app-container main #home .mid-section ul li { width: 130px; }
body #app-container main #home .mid-section ul li a { display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 15px; height: 100%; width: 100%; }
body #app-container main #home .mid-section ul li a .circle { display: flex; align-items: center; justify-content: center; width: 100px; height: 100px; background-color: #CC7F3E; border-radius: 50px; }
body #app-container main #home .mid-section ul li a .circle img { width: 80px; height: 80px; object-fit: cover; object-position: center center; }
body #app-container main #home .mid-section ul li a h2 { width: 90px; line-height: 20px; text-align: center; }
body #app-container main #home .minor-section { display: flex; flex-direction: column; gap: 15px; padding: 40px 0; }
body #app-container main #home .minor-section .centrato { display: flex; flex-direction: column; align-items: center; gap: 45px; }
body #app-container main #home .minor-section .centrato .card { display: flex; flex-direction: column; align-items: center; justify-content: center; background-color: #ffffff; border-radius: 25px; padding: 15px; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08); gap: 10px; }
body #app-container main #home .minor-section .centrato .card img { width: 100%; height: 200px; object-fit: cover; object-position: center center; border-radius: 14px; }
body #app-container main #home .minor-section .centrato .card h2 { align-self: flex-start; }
body #app-container main #home .minor-section .centrato .qrcode-card { position: relative; display: flex; align-items: center; gap: 20px; width: 100%; max-width: 780px; background-color: #759a80; border-radius: 25px; padding: 15px; color: #ffffff; text-decoration: none; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08); }
body #app-container main #home .minor-section .centrato .qrcode-card .text { width: 200px; }
body #app-container main #home .minor-section .centrato .qrcode-card img { position: absolute; bottom: 0; right: 0; width: 110px; height: auto; flex-shrink: 0; }
body #app-container main #info-container { display: flex; flex-direction: column; gap: 15px; align-items: flex-start; }
body #app-container main #info-container .logo-container { display: flex; justify-content: center; margin-top: 15px; }
body #app-container main #info-container .logo-container img { width: 100%; max-width: 180px; }
body #app-container main #info-container p { margin: 0; }
body #app-container main #info-container p strong { display: block; margin-bottom: 5px; }
body #app-container main #museo-container .museo-content .media-component { position: relative; }
body #app-container main #museo-container .museo-content .museo-text-container { margin: 30px 0; display: flex; flex-direction: column; gap: 15px; }
body #app-container main #museo-container .museo-content .museo-text-container .text-highlighted p { font-family: "Montserrat-Bold"; font-size: 20px; }
body #app-container main #museo-container .museo-content .museo-text-container .text-content { display: flex; flex-direction: column; gap: 15px; }
body #app-container main #sale-container { display: flex; flex-direction: column; flex: 1; }
body #app-container main #sale-container .sale-content { display: flex; flex-direction: column; flex: 1; }
body #app-container main #sale-container .sale-content .map-view { flex: 1; display: flex; flex-direction: column; }
body #app-container main #sale-container .sale-content .map-view .top-bar { height: 8rem; display: flex; align-items: center; gap: 1.5rem; }
body #app-container main #sale-container .sale-content .map-view .top-bar select { display: flex; align-items: center; justify-content: center; cursor: pointer; text-decoration: none; transition: color 0.3s; background-color: #414141; color: #ffffff; padding: 1.5rem 3rem 1.5rem 1.5rem; border-radius: 25px; box-shadow: 0px 3px 15px #00000029; /* Arrow */ appearance: none; background-image: url("../layout/icon-btn_arrow_down_white.svg"); background-repeat: no-repeat; background-position: right 0.7rem top 50%; background-size: 1.5rem auto; }
body #app-container main #sale-container .sale-content .canvas-container { flex: 1; display: flex; flex-direction: column; height: calc(100% - 8rem); overflow-x: auto; }
body #app-container main #sale-container .sale-content .canvas-container .canvas-content { position: relative; height: 100%; width: 100%; aspect-ratio: 21/9; }
body #app-container main #sale-container .sale-content .canvas-container .canvas-content .first-floor, body #app-container main #sale-container .sale-content .canvas-container .canvas-content .ground-floor { position: relative; height: 100%; width: 100%; overflow: hidden; }
body #app-container main #sale-container .sale-content .canvas-container .canvas-content .first-floor img, body #app-container main #sale-container .sale-content .canvas-container .canvas-content .ground-floor img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; pointer-events: auto; }
body #app-container main #sale-container .sale-content .canvas-container .canvas-content .first-floor ul, body #app-container main #sale-container .sale-content .canvas-container .canvas-content .ground-floor ul { position: absolute; pointer-events: none; top: 0; left: 0; width: 100%; height: 100%; z-index: 2; }
body #app-container main #sale-container .sale-content .canvas-container .canvas-content .first-floor ul li, body #app-container main #sale-container .sale-content .canvas-container .canvas-content .ground-floor ul li { background-color: #ffffff; pointer-events: auto; padding: 10px; border-radius: 25px; cursor: pointer; position: absolute; display: inline-block; text-align: center; white-space: nowrap; }
body #app-container main #sale-container .sale-content .canvas-container .canvas-content .first-floor ul li.active, body #app-container main #sale-container .sale-content .canvas-container .canvas-content .ground-floor ul li.active { background-color: #759a80; }
body #app-container main #sale-container .sale-content .canvas-container .canvas-content .first-floor ul li.active a span, body #app-container main #sale-container .sale-content .canvas-container .canvas-content .ground-floor ul li.active a span { color: #ffffff; }
body #app-container main #sale-container .list-view { position: absolute; bottom: 0; left: 0; width: 100%; padding: 30px 0; display: flex; flex-direction: column; gap: 2rem; z-index: 2; }
body #app-container main #sale-container .list-view .arrow-left, body #app-container main #sale-container .list-view .arrow-right { position: absolute; top: 50%; transform: translateY(-50%); cursor: pointer; transition: opacity 0.3s ease-in-out; }
body #app-container main #sale-container .list-view .arrow-left.disabled, body #app-container main #sale-container .list-view .arrow-right.disabled { opacity: 0.3; }
body #app-container main #sale-container .list-view .arrow-right { right: 1rem; transform: translateY(-50%) rotate(180deg); }
body #app-container main #sale-container .list-view .arrow-right.disabled { opacity: 0.3; }
body #app-container main #sale-container .list-view ul { display: flex; overflow-x: auto; overflow-y: hidden; -ms-overflow-style: none; scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; touch-action: pan-x; gap: 15px; padding: 0 30px; }
body #app-container main #sale-container .list-view ul::-webkit-scrollbar { display: none; }
body #app-container main #sale-container .list-view ul li { flex-shrink: 0; width: 90%; }
body #app-container main #sale-container .list-view ul li.active .room-item { background-color: #759a80 !important; color: #ffffff; }
body #app-container main #sale-container .list-view ul li .room-item { display: flex; align-items: center; justify-content: flex-start; gap: 10px; width: 100%; height: auto; background-color: #ffffff; border-radius: 25px; padding: 10px; }
body #app-container main #sale-container .list-view ul li .room-item img { width: 120px; height: 120px; object-fit: cover; object-position: center center; border-radius: 14px; }
body #app-container main #sale-container .list-view ul li .room-item span { min-width: 120px; font-family: "Montserrat-SemiBold"; font-size: 18px; text-align: left; margin-bottom: 5px; }
body #app-container main #sala-container .sala-content .media-component { position: relative; }
body #app-container main #sala-container .sala-content .sala-text-container { margin: 30px 0; display: flex; flex-direction: column; gap: 15px; }
body #app-container main #sala-container .sala-content .sala-text-container .text-highlighted p { font-family: "Montserrat-Bold"; font-size: 20px; }
body #app-container main #sala-container .sala-content .sala-text-container .text-content { display: flex; flex-direction: column; gap: 15px; }
body #app-container main #sala-container .altri-reperti { border-top: 6px solid #9a9a9a; padding: 30px 0 30px 0; background-color: #e6e6e6; display: flex; flex-direction: column; gap: 20px; }
body #app-container main #sala-container .altri-reperti.colore-prima-della-centuriazione { border-top: 0.6rem solid #e0bc41; background-color: rgba(224, 188, 65, 0.25); }
body #app-container main #sala-container .altri-reperti.colore-l39agricoltura-e-l39allevamento { border-top: 0.6rem solid #CC7F3E; background-color: rgba(204, 127, 62, 0.25); }
body #app-container main #sala-container .altri-reperti.colore-la-casa { border-top: 0.6rem solid #ba2427; background-color: rgba(186, 36, 39, 0.25); }
body #app-container main #sala-container .altri-reperti.colore-le-attivitagrave-economiche-e-produttive { border-top: 0.6rem solid #4e94c9; background-color: rgba(78, 148, 201, 0.25); }
body #app-container main #sala-container .altri-reperti.colore-la-centuriazione { border-top: 0.6rem solid #8ba83e; background-color: rgba(139, 168, 62, 0.25); }
body #app-container main #sala-container .altri-reperti.colore-dopo-la-centuriazione { border-top: 6px solid #CC7F3E; background-color: rgba(204, 127, 62, 0.25); }
body #app-container main #sala-container .altri-reperti.colore-sala-aldo-rossi { border-top: 0.6rem solid #9a9a9a; background-color: rgba(154, 154, 154, 0.25); }
body #app-container main #sala-container .altri-reperti.colore-teatro-aldo-rossi { border-top: 0.6rem solid #9a9a9a; background-color: rgba(154, 154, 154, 0.25); }
body #app-container main #sala-container .altri-reperti ul { padding: 0 30px; overflow-y: auto; display: flex; gap: 25px; }
body #app-container main #sala-container .altri-reperti ul li a { display: flex; flex-direction: column; align-items: center; gap: 5px; }
body #app-container main #sala-container .altri-reperti ul li a img { width: 120px; height: 120px; object-fit: cover; border: 6px solid #646464; border-radius: 50%; box-shadow: 0px 3px 15px #00000029; }
body #app-container main #sala-container .altri-reperti ul li a img.colore-prima-della-centuriazione { border: 0.6rem solid #e0bc41; }
body #app-container main #sala-container .altri-reperti ul li a img.colore-l39agricoltura-e-l39allevamento { border: 0.6rem solid #CC7F3E; }
body #app-container main #sala-container .altri-reperti ul li a img.colore-la-casa { border: 0.6rem solid #ba2427; }
body #app-container main #sala-container .altri-reperti ul li a img.colore-le-attivitagrave-economiche-e-produttive { border: 0.6rem solid #4e94c9; }
body #app-container main #sala-container .altri-reperti ul li a img.colore-la-centuriazione { border: 0.6rem solid #8ba83e; }
body #app-container main #sala-container .altri-reperti ul li a img.colore-dopo-la-centuriazione { border: 6px solid #b35c41; }
body #app-container main #sala-container .altri-reperti ul li a img.colore-sala-aldo-rossi { border: 0.6rem solid #9a9a9a; }
body #app-container main #sala-container .altri-reperti ul li a img.colore-teatro-aldo-rossi { border: 0.6rem solid #9a9a9a; }
body #app-container main #sala-container .altri-reperti ul li a span { font-family: "Montserrat-Regular"; width: 100px; text-align: center; }
body #app-container main #sala-container .altri-reperti span { font-family: "Montserrat-Bold"; }
body #app-container main #oggetti-container .oggetti-content ul { display: flex; flex-wrap: wrap; }
body #app-container main #oggetti-container .oggetti-content ul li { width: calc((100% / 2) - 0px); margin-bottom: 1.5rem; }
body #app-container main #oggetti-container .oggetti-content ul li a { display: flex; flex-direction: column; align-items: center; gap: 5px; }
body #app-container main #oggetti-container .oggetti-content ul li a img { width: 12rem; height: 12rem; object-fit: cover; border: 0.6rem solid #646464; border-radius: 50%; box-shadow: 0px 3px 15px #00000029; }
body #app-container main #oggetti-container .oggetti-content ul li a img.colore-prima-della-centuriazione { border: 0.6rem solid #e0bc41; }
body #app-container main #oggetti-container .oggetti-content ul li a img.colore-l39agricoltura-e-l39allevamento { border: 0.6rem solid #CC7F3E; }
body #app-container main #oggetti-container .oggetti-content ul li a img.colore-la-casa { border: 0.6rem solid #ba2427; }
body #app-container main #oggetti-container .oggetti-content ul li a img.colore-le-attivitagrave-economiche-e-produttive { border: 0.6rem solid #4e94c9; }
body #app-container main #oggetti-container .oggetti-content ul li a img.colore-la-centuriazione { border: 0.6rem solid #8ba83e; }
body #app-container main #oggetti-container .oggetti-content ul li a img.colore-dopo-la-centuriazione { border: 6px solid #CC7F3E; }
body #app-container main #oggetti-container .oggetti-content ul li a img.colore-sala-aldo-rossi { border: 0.6rem solid #9a9a9a; }
body #app-container main #oggetti-container .oggetti-content ul li a img.colore-teatro-aldo-rossi { border: 0.6rem solid #9a9a9a; }
body #app-container main #oggetti-container .oggetti-content ul li a span { width: 10rem; text-align: center; }
body #app-container main #oggetto-container .oggetto-content .media-component { position: relative; }
body #app-container main #oggetto-container .oggetto-content .oggetto-text-container { margin: 50px 0; display: flex; flex-direction: column; gap: 15px; }
body #app-container main #oggetto-container .oggetto-content .oggetto-text-container .text-highlighted p { font-family: "Montserrat-Bold"; font-size: 20px; }
body #app-container main #oggetto-container .oggetto-content .oggetto-text-container .text-content { display: flex; flex-direction: column; gap: 15px; }
body #app-container main #oggetto-container .altri-reperti { padding: 30px 0 30px 0; background-color: #cce4d0; display: flex; flex-direction: column; gap: 20px; }
body #app-container main #oggetto-container .altri-reperti ul { display: flex; overflow-x: auto; overflow-y: hidden; -ms-overflow-style: none; scrollbar-width: none; gap: 15px; padding: 0 30px; }
body #app-container main #oggetto-container .altri-reperti ul::-webkit-scrollbar { display: none; }
body #app-container main #oggetto-container .altri-reperti ul li a { display: flex; flex-direction: column; justify-content: space-between; width: 150px; height: auto; background-color: #ffffff; border-radius: 25px; padding: 15px; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08); }
body #app-container main #oggetto-container .altri-reperti ul li a img { width: 100%; height: 130px; object-fit: cover; object-position: center center; border-radius: 14px; }
body #app-container main #oggetto-container .altri-reperti ul li a span { font-family: "Montserrat-SemiBold"; width: 100px; text-align: left; margin-bottom: 5px; }
body #app-container main #oggetto-container .altri-reperti span { font-family: "Montserrat-SemiBold"; }
body #app-container main #gioco-container { display: flex; flex-direction: column; flex: 1; }
body #app-container main #gioco-container .gioco-content { height: 100%; display: flex; flex-direction: column; align-items: center; gap: 20px; }
body #app-container main #gioco-container .gioco-content .list-questions-container ul { display: flex; align-items: center; justify-content: center; gap: 10px; }
body #app-container main #gioco-container .gioco-content .list-questions-container ul li { width: 25px; height: 25px; display: flex; flex-direction: column; align-items: center; background-color: #ffffff; border: 1px solid #414141; padding: 12px; border-radius: 50%; transition: background-color 0.3s ease; }
body #app-container main #gioco-container .gioco-content .list-questions-container ul li.correct { content: ""; background-image: url("../layout/icon-thumbs-up.svg"); background-size: 15px; background-position: center; background-repeat: no-repeat; background-color: #00b74e; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
body #app-container main #gioco-container .gioco-content .list-questions-container ul li.wrong { content: ""; background-image: url("../layout/icon-thumbs-up.svg"); transform: rotate(180deg); background-size: 15px; background-position: center; background-repeat: no-repeat; background-color: #e60005; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
body #app-container main #gioco-container .gioco-content .list-game { display: flex; flex-direction: column; flex: 1; }
body #app-container main #gioco-container .gioco-content .list-game li { height: 100%; display: flex; flex-direction: column; align-items: center; gap: 25px; }
body #app-container main #gioco-container .gioco-content .list-game li .question-container { display: flex; flex-direction: column; align-items: center; gap: 25px; }
body #app-container main #gioco-container .gioco-content .list-game li .question-container .question-image { max-height: 200px; width: 100%; }
body #app-container main #gioco-container .gioco-content .list-game li .question-container .question-image img { width: 100%; height: 100%; object-fit: cover; }
body #app-container main #gioco-container .gioco-content .list-game li .question-container .question-content h2 { text-align: center; }
body #app-container main #gioco-container .gioco-content .list-game li .answer-container { width: 100%; height: 100%; }
body #app-container main #gioco-container .gioco-content .list-game li .answer-container ul { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; gap: 10px; }
body #app-container main #gioco-container .gioco-content .list-game li .answer-container ul li { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; height: calc(100% / 4); background-color: #e6e6e6; padding: 25px; border-radius: 15px; }
body #app-container main #gioco-container .gioco-content .list-game li .answer-container ul li.correct { background: #00b74e; color: #ffffff; }
body #app-container main #gioco-container .gioco-content .list-game li .answer-container ul li.wrong { background: #e60005; }
body #app-container main #gioco-container .gioco-content .final-msg-container { position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: 4; background-color: rgba(78, 148, 201, 0.75); backdrop-filter: blur(5px); display: none; flex-direction: column; align-items: center; justify-content: center; }
body #app-container main #gioco-container .gioco-content .final-msg-container.active { display: flex; }
body #app-container main #gioco-container .gioco-content .final-msg-container .final-msg-content { position: relative; background-color: #ffffff; padding: 75px 35px 35px 35px; border-radius: 15px; box-shadow: 0px 3px 15px #00000029; }
body #app-container main #gioco-container .gioco-content .final-msg-container .final-msg-content div { display: none; flex-direction: column; align-items: center; gap: 15px; }
body #app-container main #gioco-container .gioco-content .final-msg-container .final-msg-content div.active { display: flex; }
body #app-container main #gioco-container .gioco-content .final-msg-container .final-msg-content div h1 { width: 60%; text-align: center; }
body #app-container main #gioco-container .gioco-content .final-msg-container .final-msg-content .btn.goto.white { text-align: center; padding-top: 15px; }
body #app-container main #qrcode-container { flex: 1; display: flex; flex-direction: column; }
body #app-container main #qrcode-container .qrcode-content { width: 100%; height: 100%; }
body #app-container main #qrcode-container .qrcode-content .qr-overlay { background-color: #ffffff !important; width: 100%; height: 100%; }
body #app-container main #qrcode-container .qrcode-content .qr-overlay .qr-overlay-content { display: flex; justify-content: center; align-items: center; position: absolute; z-index: 2; width: 100%; top: 25%; }
body #app-container main #qrcode-container .qrcode-content .qr-overlay .qr-overlay-content h1 { color: #ffffff; }
body #app-container main #qrcode-container .qrcode-content .qr-overlay #reader { background-color: #ffffff !important; width: 100% !important; height: 100% !important; }
body #app-container main #qrcode-container .qrcode-content .qr-overlay #reader video { width: 100% !important; height: 100% !important; object-fit: cover; }
body #app-container main #qrcode-container .qrcode-content .qr-overlay #reader #qr-shaded-region { border-color: transparent !important; }
body #app-container main .gallery-container { display: block; position: relative; width: 100%; aspect-ratio: 16/9; }
body #app-container main .gallery-container ul.images-gallery { position: relative; display: block; scroll-snap-type: x mandatory; width: 330px; height: 350px; margin: 0 auto; white-space: nowrap; overflow-x: auto; overflow-y: hidden; border-radius: 16px; }
body #app-container main .gallery-container ul.images-gallery::-webkit-scrollbar { width: 0; height: 0; }
body #app-container main .gallery-container ul.images-gallery li { display: inline-block; position: relative; scroll-snap-align: center; scroll-snap-stop: always; width: 100%; height: 100%; }
body #app-container main .gallery-container ul.images-gallery li video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
body #app-container main .gallery-container ul.images-gallery li img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
body #app-container main .gallery-container ul.pagination-gallery { position: absolute; bottom: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: center; width: 100%; height: 80px; text-align: center; }
body #app-container main .gallery-container ul.pagination-gallery li { display: inline-block; width: 6px; height: 6px; margin: 0px 5px; border-radius: 100%; background-color: #EDEDED; }
body #app-container main .gallery-container ul.pagination-gallery li.selected { width: 8px; height: 8px; background-color: #ffffff; }
body #app-container main.no-video .info-text-container { text-align: justify; }
body #app-container main.no-video img { width: 100%; height: auto; }
body #app-container main .video-lis-container { display: block; position: relative; width: 100%; aspect-ratio: 16/9; background-color: #e6e6e6; }
body #app-container main .video-lis-container video { display: block; width: 100%; height: 100%; max-height: 205px; object-fit: cover; object-position: center; }
body #app-container main .audio-container { display: flex; align-items: center; justify-content: center; bottom: -40; position: absolute; width: 100%; height: 80px; background-color: transparent; }
body #app-container main .audio-container .player-container { width: 225px; display: flex; justify-content: flex-end; }
body #app-container main .audio-container .player-container .audio-player { display: flex; align-items: center; background-color: #CC7F3E; margin-right: -5px; border-radius: 15px 0px 0px 15px; width: 0px; height: 25px; box-shadow: 0px 5px 10px #00000029; transition: 0.5s; overflow: hidden; }
body #app-container main .audio-container .player-container .audio-player audio { display: none; }
body #app-container main .audio-container .player-container .audio-player .controls { display: flex; align-items: center; width: 100%; color: #ffffff; padding: 15px; overflow: hidden; }
body #app-container main .audio-container .player-container .audio-player .controls #play-pause { background: none; border: none; color: #ffffff; font-size: 16px; margin-right: 10px; cursor: pointer; }
body #app-container main .audio-container .player-container .audio-player .controls .progress-container { position: relative; width: 100%; height: 3px; background-color: #ffffff; border-radius: calc(8px / 2); overflow: visible; margin: 0 10px; }
body #app-container main .audio-container .player-container .audio-player .controls .progress-container .progress-bar { width: 0; height: 100%; background-color: #e6e6e6; transition: width 0.1s ease; }
body #app-container main .audio-container .player-container .audio-player .controls .progress-container .progress-thumb { position: absolute; top: -7px; left: 0; transform: translate(-50%, 0); width: 16px; height: 16px; background-color: #ffffff; border-radius: 50%; cursor: pointer; z-index: 1; transition: transform 0.1s ease, background-color 0.3s ease; }
body #app-container main .audio-container .player-container .audio-player .controls .progress-container .progress-thumb:hover { transform: scale(1.2); background-color: white; }
body #app-container main .audio-container .player-container .audio-player .controls .progress-container .progress-thumb:active { transform: scale(1.4); background-color: #e6e6e6; }
body #app-container main .audio-container .player-container .audio-player .controls #current-time, body #app-container main .audio-container .player-container .audio-player .controls #duration { font-family: "Montserrat-Italic"; font-size: 10px; color: #ffffff; }
body #app-container main .accordion-text a { text-decoration: underline; text-decoration-thickness: 2px; text-decoration-color: #759a80; text-underline-offset: 5px; text-decoration-skip-ink: none; text-decoration-skip: none; text-decoration-skip-ink: none; }
body #app-container main .accordion-text a p { font-family: "Montserrat-SemiBold"; color: #759a80; margin-bottom: 15px; }
body #app-container main .accordion-text .box-text { display: flex; flex-direction: column; gap: 15px; }
@media (orientation: landscape) { body #app-container main { display: none; } }
body #app-container #offcanvas { /* Side navigation menu */ height: 100%; width: 100%; position: fixed; z-index: 3; top: 0; right: -100%; background-color: #CC7F3E; overflow-x: hidden; padding-top: 20px; transition: 0.5s; }
body #app-container #offcanvas #menu { display: flex; flex-direction: column; gap: 40px; }
body #app-container #offcanvas .menu-header { display: flex; align-items: flex-start; justify-content: space-between; background-color: #CC7F3E; }
body #app-container #offcanvas .menu-header .menu-buttons { display: flex; align-items: center; gap: 10px; }
body #app-container #offcanvas .menu-header #switchLang a { content: ""; background-position: center; background-repeat: no-repeat; background-size: cover; border: 3px solid #ffffff; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; cursor: pointer; text-decoration: none; transition: color 0.3s; background-color: #414141; color: #ffffff; padding: 15px; border-radius: 50%; font-family: "Montserrat-Regular"; font-size: 28px; box-shadow: 0px 3px 15px #00000029; }
body #app-container #offcanvas .menu-header #switchLang a.en { background-image: url("../layout/eng-flag.png"); }
body #app-container #offcanvas .menu-header #switchLang a.it { background-image: url("../layout/ita-flag.png"); }
body #app-container #offcanvas .menu-header .closebtn { content: ""; background-position: center; background-repeat: no-repeat; background-size: cover; border: 3px solid #ffffff; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; cursor: pointer; text-decoration: none; transition: color 0.3s; background-color: #ffffff; color: #ffffff; border-radius: 50%; font-family: "Montserrat-Regular"; font-size: 28px; box-shadow: 0px 3px 15px #00000029; }
body #app-container #offcanvas .menu-header .closebtn::before { display: block; content: ""; background-image: url("../layout/chiudi_plus.png") !important; filter: invert(1); background-position: center center; background-repeat: no-repeat; background-size: 12px !important; width: 12px; height: 12px; padding-left: 0px !important; }
body #app-container #offcanvas ul { display: flex; flex-direction: column; gap: 18px; }
body #app-container #offcanvas ul li { padding: 25px 0; white-space: nowrap; }
body #app-container #offcanvas ul li:not(:last-child) { border-bottom: 2px solid rgba(100, 100, 100, 0.35); }
body #app-container #offcanvas ul li a { color: #ffffff; text-decoration: none; display: block; transition: color 0.3s; font-size: 20px; font-family: "Montserrat-Bold"; line-height: 28px; }
body #app-container #offcanvas ul li.has-submenu { display: grid; grid-template-columns: 1fr 44px; grid-auto-rows: auto; align-items: center; column-gap: 12px; }
body #app-container #offcanvas ul li.has-submenu > a { padding-right: 0; }
body #app-container #offcanvas ul li.has-submenu > .menu-accordion-toggle { width: 44px; height: 44px; background: transparent; border: 0; cursor: pointer; justify-self: end; }
body #app-container #offcanvas ul li.has-submenu > .menu-accordion-toggle::after { content: ""; display: block; background-image: url("../layout/icon-btn_arrow_down_white.svg"); background-repeat: no-repeat; background-position: center; background-size: 16px 16px; width: 100%; height: 100%; transition: transform 0.3s; }
body #app-container #offcanvas ul li.has-submenu.open > .menu-accordion-toggle::after { transform: rotate(180deg); }
body #app-container #offcanvas ul li.has-submenu > .submenu { grid-column: 1 / -1; display: none; padding: 8px 0 0; }
body #app-container #offcanvas ul li.has-submenu > .submenu li { padding: 12px 0; }
body #app-container #offcanvas ul li.has-submenu > .submenu li:not(:last-child) { border-bottom: none; }
body #app-container #offcanvas ul li.has-submenu > .submenu li a { font-family: "Montserrat-Regular"; font-size: 16px; line-height: 30px; text-decoration: none; }
body #app-container #offcanvas ul li.has-submenu.open > .submenu { display: block; }
@media (orientation: landscape) { body #app-container #offcanvas { display: none; } }
body #app-container #menu-buttons #info-crediti-button { content: ""; background-image: url("../layout/icon_credits.svg"); background-position: center center; background-repeat: no-repeat; background-size: 10px; position: absolute; top: 20px; right: 150px; width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; cursor: pointer; text-decoration: none; transition: color 0.3s; background-color: #CC7F3E; color: #ffffff; padding: 15px; border-radius: 50%; font-family: "Montserrat-Regular"; font-size: 28px; box-shadow: 0px 3px 15px #00000029; }
body #app-container #menu-buttons .qrcode-button { position: absolute; top: 52px; right: 100px; }
body #app-container #menu-buttons #openMenu { position: absolute; top: 20px; right: 30px; display: flex; align-items: center; justify-content: center; cursor: pointer; text-decoration: none; transition: color 0.3s; background-color: #CC7F3E; color: #ffffff; padding: 16px; border-radius: 25px; box-shadow: 0px 3px 15px #00000029; font-family: "Montserrat-Bold"; z-index: 2; }
body #app-container #menu-buttons #openMenu::after { display: block; content: ""; background-image: url("../layout/icon_menu.svg") !important; background-position: center center; background-repeat: no-repeat; width: 15px; height: 15px; padding-left: 15px; }
@media (orientation: landscape) { body #app-container #menu-buttons { display: none; } }
body #app-container .lis-player { display: none; position: fixed; top: 0; bottom: 0; left: 0; right: 0; width: 100%; height: 100%; background-color: #414141; z-index: 99; }
body #app-container .lis-player video { width: 100%; height: 100%; object-fit: contain; object-position: center; }
body #app-container .lis-player video::-webkit-media-controls-fullscreen-button { display: none; }
body #app-container .lis-player video::-webkit-media-controls-mute-button { display: none; }
body #app-container .lis-player video::-webkit-media-controls-fullscreen-volume-slider { display: none; }
body #app-container .lis-player video::-webkit-media-controls-volume-slider { display: none; }

a { text-decoration: none; white-space: normal; color: #414141; }

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

i, em { font-style: italic; }

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

h1 { font-family: "Montserrat-SemiBold"; font-size: 26px; letter-spacing: 0px; line-height: 24px; }

h2 { font-family: "Montserrat-SemiBold"; font-size: 20px; letter-spacing: 0px; line-height: 20px; }

h3 { font-family: "Montserrat-SemiBold"; font-size: 18px; letter-spacing: 0px; line-height: 18px; }

p, span, li { font-family: "Montserrat-Regular"; font-size: 15px; letter-spacing: 0px; line-height: 19px; }