@font-face {
    font-family: "Dahlia";
      src: url("asset/font/Dahlia-Regular-Condensed.woff2") format("woff2"),
      url("asset/font/Dahlia-Regular-Condensed.woff") format("woff"),
      url("asset/font/Dahlia-Regular-Condensed.otf") format("otf"),
      url("asset/font/Dahlia-Regular-Condensed.svg") format("svg");
  }

@font-face {
    font-family: "Dahlia regular";
        src: url("asset/font/Dahlia-Regular.woff2") format("woff2"),
        url("asset/font/Dahlia-Regular.woff") format("woff"),
        url("asset/font/Dahlia-Regular.otf") format("otf"),
        url("asset/font/Dahlia-Regular.svg") format("svg");
}

/* @font-face {
    font-family: "Neue Thin";
        src: url("asset/font/Neue-Thin") format("woff2"),
        url("asset/font/Neue-Thin.woff") format("woff"),
        url("asset/font/Neue-Thin.otf") format("otf"),
        url("asset/font/Neue-Thin.svg") format("svg");
} */

@font-face {
    font-family: "Neue Thin";
        src: url("asset/font/NeueHaasDisplayLight.woff2") format("woff2"),
        url("asset/font/NeueHaasDisplayLight.woff") format("woff"),
        url("asset/font/NeueHaasDisplayLight.otf") format("otf"),
        url("asset/font/NeueHaasDisplayLight.svg") format("svg");
}



:root{
    --altezza:45vh;
}

*{
    font-family: "Dahlia";
    font-stretch: condensed;
} 

/* oscuro sidebar */

*::-webkit-scrollbar {
    display: none;
  }

* {
    -ms-overflow-style: none;  
    scrollbar-width: none; 
}

html{
    /* background: #E0E4DE; */
    background: #000;
}

.barba-wrapper{
    width: 100vw;
    height: 100vh;
}
  

html,body{
    padding: 0;
    margin: 0;
    overflow: hidden;
}

body{
    background: #000;
}

/* slider home */
.slider .slider-slide,
.slider-dx .slider-slide,
.slider-overview .slider-slide{
    background-position-x: 50%!important;
    background-size: contain!important;
    background-repeat: no-repeat!important;
    height: 33vh;
    margin-bottom: 1vh;
}

.slider .slider-slide{
    transform: skewX(22.5deg);
}

.slider-dx .slider-slide{
    transform: skewX(-22.5deg);
}

.slider,.slider-dx,.slider-overview{      
    width: 30%;
    width: 35%;
}

.slider{
    left: 0px;
    position: fixed;
}

.slider-dx{
    position: fixed;
    top: 0;
    right: 0px;
}

.slider{
    /* transform: scale(1.2) skewX(-22.5deg); */
    transform: skewX(-22.5deg);
}

.slider-dx{
    /* transform: scale(1.2) skewX(22.5deg); */
    transform: skewX(22.5deg);
}


    #v1_gallery{
        height: 100vh;
    }


    .slider{
        z-index: 2;
    }
    .slider-dx{
        z-index: 1;
    }

    .slider .slick-current,
    .slider-slide.s-1.slick-slide,
    .slider-slide.s-2.slick-slide{
        opacity: 1!important;
    }




/* slider text */

    .slider-text{
        /* position: fixed;
        left: 0;
        top: 0;
        width: 100vw;
        height: 100vh;
        opacity: 1;
        display: flex;
        justify-content: center;
        align-items: center; */

        position: fixed;
        left: 0;
        width: fit-content;
        height: fit-content;
        opacity: 1;
        top: 50%;
        left:50%;
        transform: translate(-50%,-50%);
        z-index: 2;
    }

    .slider-text .slick-slide{
        overflow: hidden;
        /* height: 200px; */
    }

    .slider-text-slide{
        cursor: pointer;
    }

    .slider-text .slider-text-slide .text-line{
        font-size: 13vw;
        text-align: center;
        /* transition: transform 1s cubic-bezier(.5,0,0,1),-webkit-transform 1s cubic-bezier(.5,0,0,1); */
        /* transform:translatey(2vh) rotate3d(1,.3,0,-90deg); */
        /* transition: transform 1.3s cubic-bezier(.4,0,0,1); */
        transition: transform .8s cubic-bezier(.4,0,0,1);
        transform: translate3d(0,100%,0);
        /* padding-top: 4vh; */
        font-size: 13vw;
        /* line-height: 70%; */
        line-height: 80%;
        line-height: 100%;
    }

    .loop{
        transition: transform 0s cubic-bezier(.4,0,0,1)!important;
    }

    .slider-text-slide.slick-slide{
        position: relative;
    }

    /* coordinate */

    .coordinate{
        height: fit-content;
        /* z-index: -1; */
        z-index: 2;
        position: relative;
        /* top: 1.5vw; */
        overflow: hidden;
        display: flex;
        justify-content: center;

        position: absolute;
        left: 50%;
        transform: translate(-50%);
        top: 0%;
    }

    .coordinate-text *{
        font-size: 2.6vw!important;
        font-size: 1.6vw!important;
        line-height: 1em!important;
        overflow: hidden;
        z-index: -1;
        display: flex;
        top: 0;
    }

    .coordinate-text .text-line{
        padding-top:0!important;
        transition:transform .4s cubic-bezier(.4,0,0,1)!important;
    }

    .no-transition{
        transition:transform 0s!important;
    }


    [data-scroll-direction=horizontal] [data-scroll-container]{
        width: 100%;
    }

    .scroll-animations-example > .scrollsection {
        padding: 0vh 0vh 0vh 0vw;
        min-width: fit-content;
        /* height: var(--altezza); */
        height: auto;
        position: absolute;
        /* width: 100%; */
        /* bottom: 0; */
        /* top: calc(100vh - (var(--altezza) + 1vh)); */
        /* top: calc(100vh - 46vh); */
        bottom:0.1%;
        bottom:2%;
    }

    .scroll-animations-example > .scrollsection.scroll-play{
        min-width: fit-content;
    }

    .scroll-animations-example > .scrollsection > .item {
        display: inline-block;
        position: relative;
        height: 100%;
        width: 18.8vw;
        /* width:20%; */
        height: 45vh;
        margin: 0 .5vw;
    }


    .scroll-animations-example > .scrollsection > .item > .image {
        height: 100%;
        width: 100%;
        position: relative;
        background-repeat: no-repeat!important;
        background-size: contain!important;
        background-position: center!important;
        transition: .4s cubic-bezier(0, 0, 0.1, 1);
    }


    .block-1{
        z-index: 99;
    }

    #v1_gallery{
        z-index: 10;
    }

    #v2_gallery{
        z-index: 11;
    }

    .perspective-slider,
    .scrollsection{
        will-change: opacity!important;
    }

    .c-scrollbar{
        display: none!important;
    }


    .item-cornice{
        position: relative;
        background: url(asset/cornice.png);
        height: 100%;
        width: 100%;
        background-size: contain!important;
        background-repeat: no-repeat;
    }

    .cornice-wrapper{
        width: 15.8vw;
        width: 18.2vw;
        position: relative;
        overflow: hidden;
        height: 100%;
        left: 50%;
        transform: translateX(-50%);
    }

    .cornice-wrapper-hover{
        width: calc(18.8vw * 1.5)!important;
        height: 70vh!important;
    }

    .cornice-wrapper-hover .cornice-wrapper,
    #v1 .cornice-wrapper{
        width: 100%!important;
    }

    .fake-scale{
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        transform: scale(1.3);
    }

    .cornice-content{
        position: relative;
        width: 100%;
        height: 100%;
        left: 0;
        object-fit: cover;
        /* object-fit: scale-down; */
    }

    .cornice{
        position: relative;
        width: 100%;
        height: 100%;
        z-index: 10;
        overflow: hidden;
    }

    /* fix safari slider homepage */

    /* funziona cosi */
    .mask-slider .cornice{
        /* width: auto!important; */
    }

    .cornice-semplice{
        border-radius:8px;
    }


    .slider .cornice-wrapper,
    .slider-dx .cornice-wrapper{
        width: fit-content
    }

    .slider .cornice{
        /* object-fit: contain!important; */
    }

    @media not all and (min-resolution:.001dpcm)
    { @supports (-webkit-appearance:none) and (stroke-color:transparent) {
      
        .slider .cornice{
            object-fit: contain!important;
        }

        .mask-slider .cornice{
            width: auto!important;
        }

    }}


    #v1_gallery{
        position: fixed;
        min-width: 100vw;
        top:0;
    }

    body{
        overflow: hidden;
    }

    .perspective-slide {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    } 

    .perspective-block-1{
        padding-top: 0!important;
    }

    .body-v2 {
        overflow-x: hidden!important;
        overflow-y: scroll!important;
    }

    .perspective-slider{
        height: 100vh;
        width: 100vw;
        top: 0;
        position: absolute;
        /* display: none; */
        opacity: 0;
    }

    .perspective-slider-wrapper{
        height: 100%;
        width: 100%;
    }


    .perspective-slide .image{
        position: relative;
        width: 100%;
        height: 100%;
        background-repeat: no-repeat!important;
        background-size: contain!important;
        background-position: center!important;
    }

    .image-perspective{
        position: relative;
        width: fit-content;
        /* width: 18.8vw; */
        height:100%;
        /* height: 350px; */
        /* left: 50%; */
        /* transform: translateX(-50%); */
    }

    .image-perspective.cornice-radius{
        /* border: 10px solid; */
        /* border: 1vw solid; */
        /* padding: .3%; */
        background: #000;
        border-radius: 10px;

    }


    .slide-scale{
        transition:width .3s cubic-bezier(0.4, 0, 1, 1),height.3s cubic-bezier(0.4, 0, 1, 1);
    }

    .swiper-slide:hover{
        /* transform: scale(1.5) translateY(-8vh)!important; */
        /* transform: scale(1.3) translateY(-5.8vh)!important; */
        z-index: 9999;
    }

    .scala{
        margin:0 5vw;
    }

    .swiper-slide .cornice-wrapper{
        transition: .15s cubic-bezier(0.4, 0, 1, 1);
    }

    .scala .cornice-wrapper{
        transform: scale(1.5) translate(-6vw,-7.5vh);
        z-index: 999;
    } 



canvas{
    position: fixed;
    top: 0;
    left: 0;
    /* width: 100%;
    height: 100%; */
    /* z-index: -1; */
}

#erase{
    background: #E0E4DE;
    background: #000;
    transform: scale(1.01xw);
    opacity:0;
    /* background: url(asset/about/about.jpeg); */
    /* cursor: crosshair; */
    /* background-size: cover; */
    /* background-position: center; */
}

.about-bg,
#about-canvas{
    border-radius: 20px;
}

.about-bg{
    background: url(asset/about/about.jpeg);
    background-size: cover;
    background-position: center;
    width: 100vw;
    height: 100vh;
}


#trigger{
    position: fixed;
    top: 0;
    z-index: 0;
    font-size: 13vw;
    z-index: 99;
}

.canvas-inview{
    /* z-index: 1; */
    background: #C44D3C;
}


.morocco{
    background:#C44D3C
}

.dolomites{
    background: #426553;
}

.sardinia{
    background: #775439;
}

.budapest{
    background:#395A77;
}

.sunsets{
    background:#BF9D60;
}

.no{
    opacity: 0;
}




/* prova ottimizzazione switch */

/* .perfezione{
    left:50%!important;
    transform:translateX(-50%)!important;
} */

.perspective-slider .image-perspective{
    will-change: scale!important;
}

.not-now *,
.not-now{
    pointer-events: none!important;
}





/* MOBILE */ 

@media screen and (max-width:767px) {

    .slider,
    .slider-dx,
    .slider-overview{
        width: 30%;
        /* width: 50%; */
        /* overflow: hidden; */
        /* padding: 0 20px; */
    } 


    /* UI */

    .logo-container{
        top: 3%!important;
        left: 8%!important;
        transform: translate(0)!important;
        align-items: baseline!important;
    }

    .logo-container .dintino{
        bottom: 0px;
    }

    .about-container{
        top: 3%!important;
        right: 8%!important;
        transform: translate(0)!important;
    }

    .about{
        font-size:14px!important;
    }    

    #indietro{
        left:8%!important;
        top: unset!important;
        bottom:3%;
    }

    #indietro__value{
        /* navigation.php #indietro span */
    }

    .info-box{
        top: unset!important;
        bottom: 3%!important;
        right: 8%!important;

        width: 80px!important;
        height: 22px!important;
    }

    .info-box.box-cliccato{
        width: 250px!important;
        height: 250px!important;
    }

    .info-box .modal p{
        font-size: 12px!important;
        padding: 20px!important;
    }

    .info-text{
        font-size: 18px!important;
        line-height: 18px!important;
    }

    .modal{
        bottom:1px!important;
        top: unset!important;
    }

    .close{
        top: unset!important;
        bottom:2%!important;
    }

    #apri-info{
        bottom: 0px!important;
        top: unset!important;
    }

    /* close button about */
    .step-2 .close-wrapper span{
        font-size: 10px!important;
    }

    .step-2 .close-button{
        width: 30px!important;
        height: 30px!important;
    }

    .close-button .fullstop{
        width: 4px!important;
        height: 4px!important;
    }

    /* logo quando entro in about */
    .logo-container .tommaso span{
        letter-spacing: -.45vw!important;
    }

    .logo-container .dintino span{
        margin-left: -.5vw!important;
    }

    /* fix d'i */
    .logo-container .dintino .di2{
        padding-left: 1px;
    }

    .di2 span.compressed{
        margin-left: 0!important;
    }

    /* FINE UI */

    .slider .slick-list,
    .slider-dx .slick-list{
        overflow: visible!important;
    }

    .slider .slider-slide, .slider-dx .slider-slide, .slider-overview .slider-slide{
        margin-bottom: 3vh;
        height: 20vh;
    }

    .slider-text{
        height: 14vw;
        /* z-index: 20; */
    }
    
    .slider-text .slider-text-slide .text-line{
        font-size:21vw;
    }

    .coordinate-text *{
        font-size:3vw!important;
    }

    .loading-logo{
        font-size: 6.5vw!important;
    }


    /* logo intro (tommaso d'intino) */
    .loading-logo{
        bottom: calc(1% + 6vw)!important;
    }

    .loading-logo .tommaso span{
        letter-spacing: -1.3vw!important;
    }

    .dintino{
        margin-left:3px!important;
    }
    
    .loading-logo .dintino span{
        margin-left: -1.1vw!important;
    }

    .loading-logo .tommaso span,
    .loading-logo .dintino span{
        line-height: 6.5vw!important;
    }

    /* travel photos */
    .travel span, .photos span{
        letter-spacing: -1vw!important;
    }

    .photos{
        margin-left: 2vw!important;
    }

    .loading-container{
        font-size:6vw!important;
    }

    /* 1.logo 2. travel photos */
    .logo-container{
        font-size: 14px!important;
        width: 39vw!important;
    }

    .subtitle-wrapper{
        font-size: 20px!important;
    }


    /* scroll down & instagram */
    #scroll-down *,
    .insta-text *{
        font-size:4vw!important;
    }

    #scroll-down span,
    .insta-text span{
        margin-left:-.55vw!important;
    }



    /* counter */
    .one{
        max-width: 2.8vw!important;
    }

    .one .slick-list{
        overflow:hidden!important;
    }

    .slider-counter *{
        font-size:4vw!important;
    }


    /*pagina portfolio*/

    /* slide rimuovo lo scale */

    .slide-mobile{
        padding: 2px;
    }

    .slide_mobile_radius{
        padding:0!important;
    }

    .slide_mobile_radius img{
        border: 2px solid #000;
        border-radius: 5px;
    }
    
    .fake-scale{
        transform: scale(1);
    }


    #v1_gallery{
        display: none;
    }

    /*  */
    .v1_mobile{
        position: fixed;
        bottom: 10vh;
        left: 0;
        height: 28vh;
        width: 100vw;
        z-index: 10;
        /* overflow: hidden; */
    }

    .v1_mobile .slick-list{
        overflow: visible;
    }

    .slide-mobile{
        width: 38vw!important;
        height: 28vh!important;
        margin-right: 3vw;
        transition: .15s cubic-bezier(0.4, 0, 1, 1);
        will-change: width,height,transform;
        display: flex;
        align-items: end;
    }

    .slide-mobile.slick-active{
        opacity: 1!important;
    }

    .slide-mobile .cornice-content{
        width: 100%;
        height: auto!important;
        object-fit:contain!important
    }

    .scroll-animations-example > .scrollsection {
        bottom:8%;
    }

    
    #cursore-index{
        display: none!important;
    }


    /* hover mobile */
    .hover__mobile{
        width: 60vw!important;
        height: 45vh!important;
        transform: translateY(calc(29vh - 45vh))!important;
    }


    /* v2 mobile  */

    .perspective-slider{
        /* pointer-events: auto!important; */
        /* opacity: 1!important; */
        /* display: none; */
    }

    .info-box{
        /* display: none!important; */
    }

    #v2_gallery .image-perspective{
        max-width: 80%;
        max-height: 60vh;
    }
    
    /* about */

    .about__desktop{
        display: none!important;
    }

    #about-container{
        font-size: 9vw!important;
        height: 70vh!important;
    }

    #about-container .text-line{
        margin-top:-.2em!important;
    }

    #about-container .text-line-t{
        line-height: 1.2em!important;
        padding:0!important
    }


}

.perspective-slide .image-perspective{
    transform: translateZ(0);
}

@media screen and (min-width:768px) {
    .about__mobile,
    .v1_mobile{
        display: none!important;
    }
}