/* ---------------------------------------- Check Device --> mobile web app ---------------- */

@media (min-width: 960px) { 
    .check_device{
        display: block !important;
        background-color: #000;
        z-index: 15 !important;
        position: fixed;
        width: 100vw;
        height: 100svh;
        height: 100vh;
    }
    .message_container{
        width: 550px;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        position: fixed;
    }
}

/* ---------------------------------------- Design System ---------------------------------- */

@font-face {
    font-family: 'ArcVF';
    src: url('../fonts/ArcVF.woff2') format("woff2-variations"),
         url('../fonts/ArcVF.woff') format("woff-variations"),
         url('../fonts/ArcVF.ttf') format("ttf-variations"),
    }

@font-face {
    font-family: 'FirsNeueVF';
    src: url('../fonts/TTFirsNeueVariable.woff2') format("woff2"),
         url('../fonts/TTFirsNeueVariable.woff') format("woff"),
         url('../fonts/TTFirsNeueVariable.ttf') format("ttf"),
    }

@font-face {
    font-family: 'HyperCubeVF';
    src: url('../fonts/HypercubeVariableNonCommercialRegular.woff2') format("woff2-variations"),
         url('../fonts/HypercubeVariableNonCommercialRegular.woff') format("woff-variations"),
         url('../fonts/HypercubeVariableNonCommercialRegular.ttf') format("ttf-variations"),
    }

body{
    margin: 0;
}

body.index{
    background-color: #000000;
    font-family: 'HyperCubeVF';
}

body.index-w{
    background-color: #f0f0f0;
    font-family: 'HyperCubeVF';
}

h2.hyper{
    font-family: 'HyperCubeVF', sans-serif;
    font-size: 32px;
    font-weight: 400;
    letter-spacing: 1px;
}

h3.hyper{
    font-family: 'HyperCubeVF', sans-serif;
    font-size: 28px;
    font-weight: 400;
    letter-spacing: 1px;
}

h4.firs{
    font-family: 'FirsNeueVF', sans-serif;
    font-size: 24px;
    font-weight: 400;
    text-transform: uppercase;
    font-feature-settings: 'ss09' on;
    margin: 0;
}

h5.firs{
    font-family: 'FirsNeueVF', sans-serif;
    font-size: 20px;
    font-weight: 400;
    line-height: 120%;
    text-transform: uppercase;
    font-feature-settings: 'ss09' on;
    margin: 0;
}

h6.firs{
    font-family: 'FirsNeueVF', sans-serif;
    font-size: 16px;
    text-transform: uppercase;
    font-feature-settings: 'ss09' on;
    font-weight: 400;
    margin: 0;
}

p.hyper{
    font-family: 'HyperCubeVF', sans-serif;
    font-size: 16px;
    line-height: normal;
    font-weight: 300;
    letter-spacing: 1px;
}

p.hyper-bold{
    font-family: 'HyperCubeVF', sans-serif;
    font-size: 16px;
    line-height: normal;
    font-weight: 500;
    letter-spacing: 0.5px;
}

p.hyper-mono{
    font-family: 'HyperCubeVF', sans-serif;
    font-size: 16px;
    line-height: normal;
    font-variation-settings: "MONO" 1, "ital" 0, "opsz" 6, "wght" 200;
    
}

.b{
    color:#000;
}

.w{
    color: #f0f0f0;
}

.not-visible{
    display: none !important;
}

.underline{
    height: 5px;
    width: 100%;
    background-color: #FFF500;
    border: #000 solid 1px;
}

.menu-button{
    position: fixed;
    top: 30.5px;
    right: 30.5px;
    z-index: 3;
}

.mapboxgl-control-container .mapboxgl-ctrl-bottom-left{
    display: none !important;
}

.mapboxgl-control-container .mapboxgl-ctrl-bottom-right{
    display: none !important;
}

.check_device{
    z-index: 0;
    display: none;
}

/* ---------------------------------------- Index e Index Qr code ---------------------------------- */

.content-container{
    position: fixed;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    flex-direction:column;
    height: 100vh;
    height: 100svh;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 30px 0 30px 0;
    margin: 0;
    z-index: 1;
}

.blend-mode-difference{
    mix-blend-mode: difference;
}

.content-container div.content{
    width: 100%;
    padding: 0;
    margin: 20px 0 0 0;
}

.content-container div.content:first-child{
    margin: 0;
}

.row-content{
    height: 16.66667%;
    z-index: 2;
}

.architetture{
    display: flex;
    flex-direction: row;
    align-content: flex-end;
}

.architetture h2{
    vertical-align: baseline;
    margin: 0 0 -10px 0;
    text-align: right;
}

.div-arc{
    pointer-events: none;
    position: fixed;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    flex-direction:column;
    height: 100vh;
    height: 100svh;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 30px 0 30px 0;
    margin: 0;
    z-index: 2;
}

.p-arc:first-child{
    margin: 0;
}

.a-arc {
    font-variation-settings: 'hght' 1, 'CNTR' 1;
}

.r-arc {
    font-variation-settings: 'hght' 1, 'CNTR' 1;
}

.c-arc {
    font-variation-settings: 'hght' 1, 'CNTR' 1;
}

.p-arc {
    font-family: 'ArcVF';
    font-weight: 370;
    padding: 0;
    margin: 20px 0 0 0;
    line-height: 0.7;
    overflow: hidden;
}

.link{
    text-decoration: none;
    width: max-content;
    display: block;
    z-index: 5;
    overflow: hidden;
    margin: 0;
    padding: 0;
}

.link-b{
    color: #000;
    text-decoration: underline;
    text-decoration-color: #000;
    text-decoration-thickness: 4px;
    text-underline-offset: 3px;
    word-wrap: break-word;
    width: 100%;
    display: block;
    z-index: 5;
    overflow: hidden;
    margin-top: 30px;
    padding: 0;
}

.inspect{
    position: fixed;
    height: 100px;
    left: 30px;
    top: 30px;
}

.div-menu{
    position: absolute;
    width: 100vw;
    height: 100vh;
    height: 100svh;
    background-color: #f0f0f0;
    left: -100vw;
    z-index: 5;
}

.close-button{
    cursor: pointer;
    position: absolute;
    top: 30px;
    left: 30px;
    height: 30px;
    width: auto;
    z-index: 5;
}

.container-content-menu{
    position: absolute;
    height: 100vh;
    height: 100svh;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 30px;
    margin: 0;
    z-index: 3;
}

.container-mura-menu{
    position: absolute;
    height: 100vh;
    height: 100svh;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 0;
    z-index: 2;
}

.row-mura-menu{
    height: 8.333333333333%;
    width: 100%;
    margin: 0;
    z-index: 2;
    /* border-top: #3386c0 solid 1px;
    border-bottom: #3386c0 solid 1px; */
}

.row-mura-menu div{
    margin: 0;
    padding: 0;
}

.mura-menu-o{
    height: 20px;
    width: 100%;
    background-color: #000;
}

.mura-menu-v{
    height: 100%;
    width: 20px;
    background-color: #000;
}

/* ------------------------------- Break Points ------------------------------- */
@media (min-width: 768px) { 
    h2.hyper{
        font-family: 'HyperCubeVF', sans-serif;
        font-size: 50px;
        font-weight: 400;
        letter-spacing: 1px;
    }
}

/* ---------------------------------------- Scelta esperienza ---------------------------------- */

.container-content-scelta{
    position: fixed;
    height: 100vh;
    height: 100svh;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 30px;
    margin: 0;
    z-index: 3;
}

.container-mura-scelta{
    position: fixed;
    height: 100vh;
    height: 100svh;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 30px;
    z-index: 2;
}

.row-mura-scelta{
    height: 8.333333333333%;
    width: 100%;
    margin: 0;
    z-index: 2;
    /* border-top: #3386c0 solid 1px;
    border-bottom: #3386c0 solid 1px; */
}

.row-mura-scelta div{
    margin: 0;
    padding: 0;
}

.mura-scelta-o{
    height: 20px;
    width: 100%;
    background-color: #000;
}

.mura-scelta-v{
    height: 100%;
    width: 20px;
    background-color: #000;
}

.mura-fill{
    height: 100%;
    width: 100%;
    background-color: #000;
}

.container-background-scelta{
    position: fixed;
    height: 100vh;
    height: 100svh;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 30px;
    z-index: 1;
}

.background-scelta{
    height: 100%;
    width: 100%;
    border: #000 solid 1px;
    background-color: #f0f0f0;
}

/* ------------------------------- Break Points ------------------------------- */
@media (min-width: 768px) { 
    
}


/* ----------------------------------------------- Scelta itinerario ------------------------------------------- */

#map-scelta-itinerario { position: absolute; top: 0; bottom: 0; width: 100%; }

.logo{
    position: fixed;
    top:30px;
    left: 30px;
    z-index: 5;
}

/* contenitore dello slider complessivo */
.slider-container{
    position: fixed;
    width: 100vw;
    left: 0;
    bottom: 30px;
    z-index: 5;
}

/* card dello slider generica */
.slick-slide{
    margin:10px;
    height: 170px;
    text-align:center;
    border-radius:20px;

    display: flex !important;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

/* card dello slider attiva */
.slick-active{
    height:170px;
    cursor: pointer;
}

.slick-slide .content-slider{
    height: 150px;
    width: 100%;
    background-color:#000;
    border-radius: 10px;
    box-shadow: 0.2em 0.2em 1em rgba(0, 0, 0, 0.2);
}

.slick-active .content-slider{
    height: 180px;
    width: 100%;
    background-color:#000;
    box-shadow: 0.2em 0.2em 1em rgba(0, 0, 0, 0.2);
}

.slick-track{
    display: flex !important;
    align-items: center;
}

.slick-track div{
    transition: all 1s;
}

.slick-prev{
    cursor: pointer;
    opacity: 0;
    position: fixed;
    left: 0px;
    bottom: 100px;
    height: 150px;
    width: 40px;
}

.slick-next{
    cursor: pointer;
    opacity: 0;
    position: fixed;
    right: 0px;
    bottom: 100px;
    height: 150px;
    width: 40px;
}

.card-slider-itinerari{
    width: 80%;
    height: 110px;
}

.titoli-itinerari{
    text-align: left;
}

.clock{
    margin-top: -5px;
    display: flex;
    width: 20px;
    height: 20px;
}

.path{
    margin-top: -5px;
    display: flex;
    width: 20px;
    height: 20px;
}

.arrow-card{
    margin-top: -5px;
    width: 15px;
    height: 15px;
}

.container-tappe{
    pointer-events: none;
    opacity:0;
    position: fixed;
    bottom: 40px;
    /* height: 80svh;
    width: 265px;
    bottom: 30px; */
    background-color: #000;
    left: 50%;
    transform: translate(-50%);
    border-radius: 10px;
    z-index: 5;
}

.close-button-tappe{
    cursor: pointer;
    position: absolute;
    top: 20px;
    right: 20px;
    height: 20px;
    width: auto;
    z-index: 6;
}

.close-button-x svg{
    cursor: pointer;
    vertical-align: top;
}

.titolo-itinerario-tappe{
    color: #f0f0f0;
    padding: 20px 30px 15px;
}

.clock.tappe{
    margin-left: 30px;
    margin-top: 0;
    float: left;
}

.path.tappe{
    margin-left: 20px;
    margin-top: 0;
    float: left;
}

.hyper-mono.tappe{
    margin: 3px 0 0 10px;
    line-height: 1;
    display: inline-block;
}

.hyper.tappe{
    margin-top: 15px;
    padding: 0 30px;
}

.nomi-tappe-container{
    margin-top: 30px !important;
    padding: 0 30px;
    margin: 20px 0 0;
    height: 38svh;
}

.nomi-tappe-container.aymonino{
    height: 30.4svh;
}

.linea-tappe{
    position: absolute;
    margin-top: 1.15svh;
    height: 33.8svh;
    border-right: #f0f0f0 solid 2px;
}

.nomi-tappe-container.aymonino .linea-tappe, .nomi-tappe-container.fuori-centro .linea-tappe{
    height: 30.4svh;
}

.quadrati-tappe{
    position: absolute;
    display: flex;
    margin-top: 1.15svh;
    height: 33.8svh;
    flex-direction: column;
    justify-content: space-between;
    z-index: 3;
}

.nomi-tappe-container.aymonino .quadrati-tappe, .nomi-tappe-container.fuori-centro .quadrati-tappe{
    height: 30.4svh;
}

.quadrati-tappe div{
    width: 10px;
    height: 10px;
    background-color: #FFF500;
}

.nomi-tappe{
    height: 36svh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.nomi-tappe-container.aymonino .nomi-tappe, .nomi-tappe-container.fuori-centro .nomi-tappe{
    height: 32.4svh;
}

.nomi-tappe h6{
    font-size: 12px;
    font-weight: 400;
    height: 28px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.inizia-button{
    cursor: pointer;
    pointer-events: all;
    position: absolute;
    z-index: 5;
    color: #f0f0f0;
    right: 30px;
    bottom: 20px;
}

.container-contenuti-tappa-primo-novecento, .container-contenuti-tappa-secondo-novecento, 
.container-contenuti-tappa-manifesto, .container-contenuti-tappa-aymonino, .container-contenuti-tappa-fuori-centro {
    opacity: 0;
}




/* ------------------------------- Break Points ------------------------------- */

@media (min-width: 500px) { 

   
    h5.titolo-itinerario-tappe{
        font-family: 'FirsNeueVF', sans-serif;
        font-size: 32px;
        font-weight: 400;
        line-height: 120%;
        text-transform: uppercase;
        font-feature-settings: 'ss09' on;
        margin: 0;
    }
    
    .card-slider-itinerari h6.firs{
        font-family: 'FirsNeueVF', sans-serif;
        font-size: 24px;
        text-transform: uppercase;
        font-feature-settings: 'ss09' on;
        font-weight: 400;
        margin: 0;
    }
    
    .container-tappe p.hyper{
        font-family: 'HyperCubeVF', sans-serif;
        font-size: 22px;
        line-height: normal;
        font-weight: 300;
        letter-spacing: 1px;
    }
    
    icone-e-txt-tappe p.hyper-mono, .card-slider-itinerari p.hyper-mono{
        font-family: 'HyperCubeVF', sans-serif;
        font-size: 20px;
        line-height: normal;
        font-variation-settings: "MONO" 1, "ital" 0, "opsz" 6, "wght" 200;
        
    }

    .titolo-itinerario-tappe{
        color: #f0f0f0;
        padding: 40px 40px 30px;
    }

    .hyper.tappe{
        margin-top: 30px;
        padding: 0 40px;
    }

    .nomi-tappe-container{
        padding: 0 40px;
    }

    .clock.tappe {
        margin-left: 40px;
    }


    /* card dello slider generica */
    .slick-slide{
        margin:10px;
        height: 280px;
        text-align:center;
        border-radius:20px;

        display: flex !important;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }

    /* card dello slider attiva */
    .slick-active{
        height:280px;
        cursor: pointer;
    }

    .slick-slide .content-slider{
        height: 220px;
        width: 100%;
        background-color:#000;
        border-radius: 10px;
        box-shadow: 0.2em 0.2em 1em rgba(0, 0, 0, 0.2);
    }

    .slick-active .content-slider{
        height: 250px;
        width: 100%;
        background-color:#000;
        box-shadow: 0.2em 0.2em 1em rgba(0, 0, 0, 0.2);
    }



    .nomi-tappe h6{
        font-size: 18px;
        font-weight: 400;
        height: 28px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
}

/* ----------------------------------------------- indicazioni ------------------------------------------- */

#map_navigazione{ position: absolute; top: 0; bottom: 0; width: 100%; }

.mapboxgl-ctrl-geolocate{
    display: none !important;
}

.mapboxgl-ctrl-top-right {
    right: 30px;
    top: 60px;
}

.mapboxgl-ctrl-top-right .mapboxgl-ctrl {
    float: right;
    margin: 10px 0 0 0;
}

.mapbox-directions-component-keyline {
    box-shadow: 0 !important;
    border-radius: 0 !important;
    border: #000 solid 1px;
}

.controls-profile-switcher{
    position: fixed;
    display: flex;
    left: 50%;
    bottom: 80px;
    transform: translate(-50%);
    z-index: 5;
    background: #000;
    color: #f0f0f0;
   
    box-sizing: border-box;
    padding: 0 10px;
    box-shadow: 0.2em 0.2em 1em rgba(0, 0, 0, 0.2);
    border-radius: 5px;
}

.profile-indicazioni{
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 10px;
    box-sizing: border-box;
    z-index: 2;
}

.profile-indicazioni.active{
    color: #000;
}

.icone-indicazioni{
    display: flex;
    justify-content: center;
    width: 20px;
    height: 20px;
}

.icone-indicazioni img{
    height: 100%;
    width: auto;
}

.txt-indicazioni{
    min-width: 38px;
    padding: 3px 0 0 10px;
}

.selector-container{
    display: flex;
    align-items: center;
    left: 0;
    padding: 0 10px;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 1;
}

.selector{
    position: relative;
    background-color: #FFF500;
    width: 32%;
    left: 0;
    transform: translate(0);
    height: 35px;
    border-radius: 5px;
}

.destinazione_raggiunta{
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    display: flex;
    align-items: center;
    background-color: #f0f0f0;
    border-radius: 10px;
    box-shadow: 0.2em 0.2em 1em rgba(0, 0, 0, 0.2);
    height: 45px;
    border: #000 solid 2px;
    padding: 50px 70px 50px 35px;
    z-index: 5;
}

.pin-map-container{
    width: 30px;
    height: 95%;
    padding-bottom: 3px;
}

.pin-map{
    height: 100%;
    width: auto;
}

.txt-sei-arrivato{
    margin-left: 20px !important;
    width: 160px;
}

.close-button-arrivato{
    position: absolute;
    cursor: pointer;
    top: 20px;
    right: 20px;
}

.walk-man-icon{
    position: fixed;
    width: 25px;
    height: auto;
    left: 50px;
    top: 30px;
}

.cover-edificio{
    position: fixed;
    overflow: hidden;
    width: 100vw;
    height: 100svh;
    z-index: 3;
    background-color: #000000;
}

.container-img-edificio{
    display: flex;
    margin:0;
    width: 100vw;
    height: 50svh;
    background-color: antiquewhite;
}

.container-img-edificio img{
    margin:0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.inizia-esperienza{
    position: fixed;
    bottom:40px;
    right: 40px;
}

.row-cover{
    padding: 40px 40px 10px 40px;
    margin: 0;
}

.col-cover{
    margin: 0;
    width: 50%;
    float: left;
}

.row-cover h5, .row-cover p{
    margin: 0;
}

.campi-visivi{
    position: fixed;
    width: 100vw;
    height: 100svh;
    overflow: hidden;
    margin: 0;
    z-index: 5;
    background-color: #fff;
}

.oultine_cerchio_map{
    width: 140px;
    height: 140px;
    position: fixed;
    bottom: 30px;
    left: 30px;
    border-radius: 100px;
    border: #FFF500 solid 5px;
    box-shadow: 0px 0px 16.3px 0px rgba(0, 0, 0, 0.50) inset;
    z-index: 6;
    pointer-events: none;
}

#map_campi_visivi{
    width: 150px;
    height: 150px;
    position: fixed;
    bottom: 30px;
    left: 30px;
    border-radius: 100px;
}

.rotate{
    transform: rotate(90deg);
}

.container-img-campi-visivi{
    width: 100vw;
    height: 100svh;
}

.img-campi-visivi{
    margin:0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.close-button-visivi{
    cursor: pointer;
    position: absolute;
    top: 40px;
    right: 40px;
    height: 30px;
    width: auto;
    z-index: 5;
}

/* ------------------------------- Break Points ------------------------------- */

@media (min-width: 500px) { 
    .row-cover{
        padding: 80px 80px 20px 80px;
    }

    .row-cover h5.firs{
        font-size: 30px;
    }
    .row-cover p.hyper{
        font-size: 24px;
    }


    .oultine_cerchio_map{
        width: 190px;
        height: 190px;
        position: fixed;
        bottom: 40px;
        left: 40px;
        border-radius: 100px;
        border: #FFF500 solid 5px;
        box-shadow: 0px 0px 16.3px 0px rgba(0, 0, 0, 0.50) inset;
        z-index: 6;
        pointer-events: none;
    }

    #map_campi_visivi{
        width: 200px;
        height: 200px;
        position: fixed;
        bottom: 40px;
        left: 40px;
        border-radius: 100px;
    }
}

/* ----------------------------------------------- mappa ------------------------------------------- */

body.mappa { 
    margin: 0; 
    padding: 0; 
}

.div_verifica_dentro_fuori{
    background-color: rgb(0, 0, 0);
    position: fixed;
    padding: 10px;
    top: 80%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 8px;
    z-index: 5;
}
.dentro_fuori{
    color: #fff;
    font-size: 20px;
    padding: 0;
    margin: 0;
}
#map { position: absolute; top: 0; bottom: 0; width: 100%; }
.mapboxgl-user-location-dot, .mapboxgl-user-location-dot::before{
    background-color: #FFF500 !important;
}
.mapboxgl-user-location-show-heading .mapboxgl-user-location-heading:after, .mapboxgl-user-location-show-heading .mapboxgl-user-location-heading:before {
    border-bottom: 7.5px solid #000000 !important;
    content: "";
    position: absolute;
}
.mapboxgl-user-location-accuracy-circle {
    background-color: #8b8b8b33 !important;
    height: 1px;
    width: 1px;
}

/* #map{
    width: 100px;
    height: 100px;
    border-radius: 50%;
} */


/* ------------------------------------------------------------------ test mode -------------------------------- */

.overlay {
    position: absolute;
    top: 100px;
    left: 30px;
    }
    
.overlay button {
    background-color: #fff500;
    color: #000;
    display: inline-block;
    margin: 0;
    padding: 10px 20px;
    border: #000 solid 1px;
    cursor: pointer;
    border-radius: 3px;
}

.overlay button:hover {
    text-decoration: underline;
}

.overlay button.active {
    background-color: #000;
    color: #fff500;
    cursor: pointer;
}

#info {
    display: table;
    position: relative;
    margin: 0px auto;
    word-wrap: anywhere;
    white-space: pre-wrap;
    padding: 10px;
    border: none;
    border-radius: 3px;
    font-size: 12px;
    text-align: center;
    color: #222;
    background: #fff;
    }

    .nocursor{
        cursor: none;
    }