﻿
        /* bottom menu */
        #bottom-menu{transition:transform .5s ease;transform:translateY(calc(100% + .8rem));left:.8rem;}

        .site-header:not(.off-hero):before{background:none}



/*        .hero img,.hero video{object-position: center;aspect-ratio:1/1;width:100%;height:auto;max-height:45rem}*/
/*        .hero iframe{position: absolute;top: 0;left: 0;right: 0;bottom: 0;width: 100%;height: 100%;border: none;pointer-events: none;}
*/        .hero h1{margin:0;font-size:4rem;text-align:left;color:#fff;text-transform: none;margin-bottom:2.4rem;line-height:1.1;    text-shadow: 0 0 10px #000;}
        .hero picture{display:block;position:relative}
        .hero picture::after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(to bottom, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, .6) 100%);background:rgba(0,0,0,.4)}



        .hero__content{position:absolute;left:50%;bottom:4.4rem;transform:translateX(-50%);width:calc(100% - 3.2rem);display: flex;flex-direction: column;align-items: start;gap: 0;}
        .hero__content{visibility:hidden}

/*        .hero img,.hero video{height: 100svh;max-height: none;min-height: 55.5rem;}
*/



        .hero-media{width:100%;height:100svh;max-height: none;min-height: 55.5rem;background:var(--bg-medium);position:relative}
        .hero-media::after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(to bottom, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, .6) 100%);background:rgba(0,0,0,.4)}
        .hero-media img{position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100%;border:none;pointer-events:none;object-fit:cover}
        .hero-media iframe{position: absolute;border: 0px;top: 50%;left: 50%;transform: translate(-50%, -50%);width:100%;height:100%;pointer-events:none}


        @media(min-width:500px){
            .hero h1{font-size:4.8rem}
        }


        @media(min-width:992px){
            .hero__content{width:calc(100% - 6.4rem)}
        }


        @media(min-width:1280px){
            .hero__content{width:calc(100% - 12.8rem);flex-direction:row;place-content:space-between;align-items:end}
            .hero h1{margin-bottom:0}
            .hero-media::after{background:linear-gradient(    to bottom,    rgba(0, 0, 0, 0.18) 0%,    rgba(0, 0, 0, 0.12) 5%,    rgba(0, 0, 0, 0.06) 10%,    rgba(0, 0, 0, 0.02) 16%,    rgba(0, 0, 0, 0) 22%,    rgba(0, 0, 0, 0) 70%,    rgba(0, 0, 0, 0.5) 100%)}
        }

        @media(min-width:1920px){
            .hero h1{font-size:7.2rem}
        }



        
        @media(min-width:1440px){
            .hero .feature{font-size:3.2rem}
            .hero .feature__icon{font-size:3.2rem;width:6rem;height:6rem;}
        }


        .accomodation-content-info h2{font-size: 2.4rem;line-height: 1.3;font-weight: 700;}
        .accomodation-content-info h2 {font-family:var(--ff-default);font-size: 1.8rem;line-height:1.3;font-weight:400;text-transform:uppercase;text-decoration:underline;text-underline-position:under}
        .accomodation-content-info{padding:4.4rem 0}
        .accomodation-content-info-buttons{flex-direction: column;display: flex;gap:1.6rem;margin-top:4.4rem}
        
        .accomodation-content-main{padding-bottom:4.4rem;overflow:hidden}

        .accomodation-content-gallery{display:flex;flex-wrap:wrap;gap:1.6rem}

        .accomodation-content-gallery img{width:100%;border-radius:1.6rem;background:#ddd;aspect-ratio:1;object-fit:cover;cursor:pointer;}

        @media(min-width:500px){
            .accomodation-content-gallery img{aspect-ratio:1.5/1}
        }

        @media(min-width:1280px){
            .accomnodation-content{display:flex;gap:2.4rem;align-items:start;flex-direction:row-reverse}
            .accomodation-content-info-inner{width:calc((100% - 3 * 2.4rem) / 4 * 3 + 2 * 2.4rem)}
            .accomodation-content-info{width:calc(50% - 1.2rem);height:100vh;min-height:650px;display:inline-flex;align-items:center;place-content:center;flex-direction:column;position:sticky;top:0;padding:0}
            .accomodation-content-info-buttons{margin-top:0}
            .accomodation-content-main{width:calc(50% - 1.2rem);padding:8.8rem 0}        
            .accomodation-content-gallery{gap:2.4rem}
            .accomodation-content-gallery .img-wrapper{width:calc(50% - 1.2rem);}
            .accomodation-content-gallery .img-wrapper.full{width:100%;}
        }


        @media(min-width:1440px){
            .accomodation-content-info{width:calc(33.33% - 1.2rem);}
            .accomodation-content-main{width:calc(66.66% - 1.2rem);}
        }

/*        @media(min-width:1920px){
            .accomodation-content-info p{font-size:2.1rem}
        }*/


        /* ALTRI ALLOGGI */
        #altri-alloggi-section{padding:4.4rem 0;overflow:hidden}
        #altri-alloggi-section .nav-carousel-control-wrapper{gap:.8rem}
        #altri-alloggi-section .nav-carousel-control.disabled{opacity: .4;cursor: default;}
        #altri-alloggi-section .swiper {overflow:visible}
        
        .alloggi-list{/*display:flex;align-items: center;gap:2.4rem;*/margin-top:2.4rem;}
        

        @media(min-width:992px){
            #altri-alloggi-section .nav-carousel-control-wrapper{margin: 0;position: absolute;top: -2.4rem;right: 0;transform: translateY(-100%);}
        }

        @media(min-width:1280px){
            #altri-alloggi-section{padding:8.8rem 0}
        }

        @media (min-width: 1440px) {
            #altri-alloggi-section h2{font-size:4.8rem}
            .card-alloggio{width: calc((100% - (2.4rem * 3)) / 4)}
            .card-alloggio__title{font-size:2.4rem}
        }

        @media(min-width:1920px){
            #altri-alloggi-section .nav-carousel-control-wrapper{display:none}
            .card-alloggio{width: calc((100% - (2.4rem * 3)) / 4)}
            .card-alloggio__title{font-size:3.2rem}
        }
        

        #altri-alloggi-section .alloggi__list{margin-top:3.2rem}


        @media (min-width: 1280px) {
            .card-sistemazione img {aspect-ratio: 8 / 5;object-fit: cover;}
        }    

        @media(min-width:1280px){
            #altre-sistemazioni-section{padding:8.8rem 0}
        }

        