﻿h2{font-family:'Cormorant Garamond',sans-serif,serif}                
p,span{font-family:'Josefin Sans'}

.container-img{display:block}
.container-control{background:rgba(255,255,255,.8);padding:8px 16px}
.container-img:hover .container-control{background-color:#fff}
.link-scopri{display: inline-block;border: 2px solid #329BD1;padding: 8px 16px;font-size: 15px;color:#329BD1;text-decoration:none;font-family:'Josefin Sans',sans-serif,serif}
.link-scopri:hover{background:#329BD1;color:#fff}
.link-scopri .la-long-arrow-alt-right{color:#329BD1}
.link-scopri:hover .la-long-arrow-alt-right{color:#fff} 

/* sezione una lunga storia */
#sezione-una-lunga-storia .container-content{padding:32px;text-align:center}
#sezione-una-lunga-storia .container-content h1{text-align:center;font-size:32px}
#sezione-una-lunga-storia .container-content p{text-align:center;font-size:21px;font-weight:400}
#sezione-una-lunga-storia .container-content .container-logo{text-align:center}
#sezione-una-lunga-storia .container-content .container-logo img{width:75%}
#sezione-una-lunga-storia .container-foto{text-align:center}
#sezione-una-lunga-storia .container-foto img{width:75%}
#sezione-una-lunga-storia .colonna-immagini{padding:48px 0 64px}
#sezione-una-lunga-storia .container-immagini{text-align:center;}
#sezione-una-lunga-storia .container-immagini img{width:75%}
#sezione-una-lunga-storia #colonna-immagini .container-control{text-align:center}

/* sezione sistemazioni */
#contenuto-sistemazioni{margin:auto}   
#contenuto-sistemazioni img{width:100%;}

#contenuto-sistemazioni .container-text {padding:32px 32px 42px;}
#contenuto-sistemazioni .container-text .content-text{max-width:380px;margin:auto}
#contenuto-sistemazioni .content-text p{line-height:28px;font-size:16px}



#contenuto-sistemazioni .content-text img {width:80px;height:auto} 
#contenuto-sistemazioni #camping .content-text img:last-of-type{width:125px;margin-left:32px;}
#appartamenti,#camping,#bungalow{background:#faf7f1}        
#bungalow .container-img{width:100%;float:right}
#bungalow .container-text{width:100%;float:left}

/* sezione spiaggia */
#spiaggia{background:#eee7da}
#spiaggia-inner .container-img {margin-bottom:-5px;}

#spiaggia-inner .container-img img{width:100%;}
#spiaggia-inner .container-img video{width:100%;/*position:absolute;top:0;left:0;bottom:0;height:100%*/}
#spiaggia-inner .container-img .w3-display-container{width:100%;}
#spiaggia .fondo-sole{left:auto;right:0}
#spiaggia .fondo-sole img{width:250px} 
#spiaggia-inner .content-text{padding: 32px;max-width: 80%;}
#spiaggia-inner .content-text p{line-height:28px;font-size:16px;}


/* sezione piscine */
#piscine{background:#fff}
#piscine-inner .container-img{margin-bottom:-5px}
#piscine-inner .container-img img{width:100%;}
#piscine-inner .container-img video{width:100%;}
#piscine-inner .content-text{padding: 32px;max-width: 80%;}
#piscine-inner .content-text p{line-height:28px}

/* sezione servizi */
#servizi{background:#faf7f1}
#servizi p{font-size:16px}
#servizi-inner .header-section{padding:32px}
#servizi-inner .header-section .paragrafo-sezione p{line-height:28px;margin-top:0;font-size:16px}
.container-carousel-nostri-servizi .owl-nav{text-align:center;padding:16px 0}

                             
.container-carousel-nostri-servizi{padding:32px 0 42px} 
#carousel-nostri-servizi #nav-next-nostri-servizi{padding:0 8px 0 0;display:flex;align-items:center;border-width: 2px !important;border-top: solid;border-right: solid;border-bottom: solid;border-color: #329BD1;}
#carousel-nostri-servizi #nav-prev-nostri-servizi{padding:0 0 0 8px;display:flex;align-items:center;border-width: 2px !important;border-top: solid;border-left: solid;border-bottom: solid;border-color: #329BD1}
#carousel-nostri-servizi .owl-nav:hover #nav-next-nostri-servizi,
#carousel-nostri-servizi .owl-nav:hover #nav-prev-nostri-servizi{background:#fff}
#carousel-nostri-servizi .owl-nav button{outline:none}



.cartellone-inner{background:#faf7f1;padding:32px;}
.cartellone-inner p{font-size:16px}
.cartellone-inner .content-text h3{font-family:'Cormorant Garamond';font-weight:500;font-size:32px}


@media(min-width:380px){
    .card-servizio h3{font-size:30px;}
}


@media(min-width:500px){
    #sezione-una-lunga-storia .container-content .container-logo img{width:50%}
    #sezione-una-lunga-storia .container-foto img{width:50%}
    #sezione-una-lunga-storia .container-immagini img{width:50%}
}


@media(min-width:768px){
    /* sezione una lunga storia */
    #sezione-una-lunga-storia-inner{padding:64px 0 0;max-width:768px;margin:auto}
    #sezione-una-lunga-storia .container-content{padding:32px 32px 0}
    #sezione-una-lunga-storia .colonna-contenuto .container-content{float:right;width:50%;padding:0 32px}
    #sezione-una-lunga-storia .colonna-contenuto .container-foto{padding:32px 0 0;width:50%;position: absolute;top:50%;left:0%;transform: translateY(-50%);}
    #sezione-una-lunga-storia .container-foto img{width:75%}
    #sezione-una-lunga-storia .container-immagini img{width:40%}

    /* sezione sistemazioni */
    #contenuto-sistemazioni .container-text {padding:64px 16px;}
    #contenuto-sistemazioni #camping .content-text img:last-of-type{width:135px}

    /* sezione spiaggia piscine */
    #spiaggia-inner .content-text{padding:64px}
    #piscine-inner .content-text{padding: 64px;}

    /* servizi */
    #servizi-inner .header-section{padding:64px}

    .cartellone-inner{padding:64px}
}


@media(min-width:992px)
{            
    /* sezione-una-lunga-storia */
    #sezione-una-lunga-storia-inner{max-width:100%;padding:64px 0;}
    #sezione-una-lunga-storia .colonna-contenuto{float:left;width:66.66%}
    #sezione-una-lunga-storia .colonna-immagini{float:left;width:33.33%;position:absolute;top: 50%;transform: translate(0%,-50%);right: 0;}
    #sezione-una-lunga-storia .colonna-immagini{padding:0}
    #sezione-una-lunga-storia .container-foto img{width:90%}
    #sezione-una-lunga-storia .container-content .container-logo img{width:75%}
    #sezione-una-lunga-storia .container-immagini img{width:75%}


    /* sezione sistemazioni */
    #contenuto-sistemazioni .container-text {padding:0;}
    #contenuto-sistemazioni .container-text .content-text{max-width:100%;}

    #contenuto-sistemazioni .content-text img {width:60px}
    #bungalow .container-img{width:50%;float:left}
    #bungalow .container-text{width:50%;position:absolute;left:50%;top:50%;transform:translateY(-50%);max-width: 946px;} 
    #bungalow .container-text .content-text{max-width:400px;margin:auto;}            
    #appartamenti .container-img{width:50%;float:right}
    #appartamenti .container-text{width:50%;position:absolute;left:50%;top:50%;transform:translateY(-50%) translateX(-100%);max-width: 946px;}
    #appartamenti .container-text .content-text{max-width:400px;margin:auto;}           
    #camping .container-img{width:50%;float:left}
    #camping .container-text{width:50%;position:absolute;left:50%;top:50%;transform:translateY(-50%);max-width: 946px;}                          
    #camping .container-text .content-text{max-width:400px;margin:auto;}
            
    /* sezione spiaggia piscine */
    #spiaggia .fondo-sole{padding-top:0px;left:0;right:auto}
    #spiaggia .fondo-sole img{width:300px}  
    #spiaggia{padding:60px 0;}
    #spiaggia-inner{max-width:950px;margin:auto}
    #spiaggia-inner .content-text{width:40%;padding:0}    
    #spiaggia-inner .content-text h2{line-height:1em;padding-right:16px;margin-bottom:40px}
    #spiaggia-inner .container-img{width:60%;padding-left:30px;text-align:right}            
    #spiaggia-inner .container-link-scopri{text-align:left;margin-top:40px}
    #piscine{padding:60px 0;}
    #piscine-inner{max-width:950px;margin:auto}
    #piscine-inner .content-text{width:40%;float:right !important;padding:0 0 0 30px}
    #piscine-inner .content-text h2{line-height:1em;padding-right:16px;margin-bottom:40px}          
    #piscine-inner .container-img{width:60%;float:left !important;padding-right:30px;text-align:left;margin-bottom:0;}            
    #piscine-inner .container-link-scopri{text-align:left;margin-top:40px}          
            
    /* sezione servizi */
    #servizi{padding:60px 0;}
    #servizi-inner{max-width:950px;margin:auto;padding:0px}  
    #servizi-inner .header-section{padding:0}
    #servizi-inner .header-section .titolo-sezione{width:20%;padding-right:16px;line-height:1em;}
    #servizi-inner .header-section .paragrafo-sezione{width:80%}
    #servizi-inner .header-section .paragrafo-sezione p {padding-right:200px;}
    #servizi-inner .container-link-scopri{text-align:left;font-family:'Josefin Sans';margin-top:40px}
    .container-carousel-nostri-servizi{padding:60px 0 0 0;}
    .container-carousel-nostri-servizi .owl-nav{text-align:right;}
    

    .cartellone{margin-bottom:32px;}
    .cartellone .container-link-scopri{position:absolute;left:50%;top:50%;width:50%;transform:translateY(-50%);text-align:center}
    .cartellone .link-scopri{cursor:pointer;display: inline-block;border: 2px solid #fff;padding: 8px 16px;font-size: 24px;color:#fff;text-decoration:none}
    .cartellone .link-scopri:hover{background:#fff;color:rgb(51,51,51)}
    .cartellone .link-scopri .la-long-arrow-alt-right{color:#fff}
    .cartellone .link-scopri:hover .la-long-arrow-alt-right{color:rgb(51,51,51)}
    .cartellone-inner {position:absolute;top:0;left:0;bottom:0;width:100%;padding:0;background:none}                  
    .cartellone-inner .content-text{width:950px;margin:auto;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);}
    .cartellone-inner .content-text h3{color: #fff;font-family: 'Cormorant Garamond';font-size: 46px;font-weight: 500;text-shadow:1px 1px 0 #111;}
    .cartellone-inner .content-text p{color:#fff;font-family:'Josefin Sans';text-shadow:1px 1px 0 #111;max-width:100%;font-size:17px}
    .cartellone-inner .content-text .w3-col{width:60%;}

}

@media(min-width:1280px) {
    h2{font-size:45px;}


    /* sezione una lunga storia */
    #sezione-una-lunga-storia-inner{max-width:1200px;padding:64px 0 100px;}

    /* sezione sistemazioni */
    #contenuto-sistemazioni .content-text img {width:80px}
    #contenuto-sistemazioni #camping .content-text img:last-of-type{width:160px}

    /* sezione spiaggia piscine */
    #spiaggia-inner{max-width:1170px;}
    #spiaggia-inner .content-text{padding-top:60px}
    #spiaggia-inner .content-text p{font-size:17px;}
    #piscine-inner{max-width:1170px;}
    #piscine-inner .content-text p{font-size:17px;}  
            
    /* sezione servizi */
    #servizi-inner{max-width:1170px;}        
    #servizi-inner .header-section .paragrafo-sezione p {font-size:17px}      
        

    .cartellone-inner .content-text{width:1170px;}
    .cartellone-inner .content-text h3{font-size: 52px;}
    .cartellone-inner .content-text p{font-size:21px;}
    
}


@media(min-width:1366px){
    #sezione-una-lunga-storia-inner{max-width:1280px}
    #sezione-una-lunga-storia .container-immagini{text-align:right}
    #sezione-una-lunga-storia #colonna-immagini .container-control{text-align:right}
}


@media(min-width:1533px){         
    /* sezione una lunga storia */
    #sezione-una-lunga-storia-inner{max-width:1366px;}
    #sezione-una-lunga-storia .container-content h2{font-size:52px}
    #sezione-una-lunga-storia .container-content p{font-size:24px;}
    #sezione-una-lunga-storia .container-foto img{width:100%}
    
    /* sezione sistemazioni */
    #contenuto-sistemazioni .content-text p{font-size:17px;margin-bottom:0}
    #contenuto-sistemazioni .content-text .link-scopri{margin-top:40px;}      
            
    /* sezione spiaggia piscine */
    #spiaggia-inner .content-text p{font-size:17px;}
    #piscine-inner .content-text p{font-size:17px;} 
            
    /* sezione servizi */
    #servizi-inner{max-width:1366px;padding:0}        

    .cartellone-inner .content-text{width:1366px;}
}


@media(min-width:1920px){
    h2{font-size:60px}           

    /* sezione sistemazioni */
    #contenuto-sistemazioni .content-text img {width:100px}
    #contenuto-sistemazioni #camping .content-text img:last-of-type{width:170px;}
    #contenuto-sistemazioni .content-text p {font-size:19px;margin-bottom:0}
    #contenuto-sistemazioni .content-text .link-scopri{margin-top:40px;}

    /* sezione spiaggia piscine */
    #spiaggia .fondo-sole{padding-top:100px}
    #spiaggia .fondo-sole img{width:500px}
    #spiaggia-inner{max-width:1366px;}
    #spiaggia-inner .content-text{width:30%;padding-top:0}
    #spiaggia-inner .content-text p{font-size:19px;}
    #spiaggia-inner .container-img{width:70%;padding-left:60px;text-align:right}   
    
    #spiaggia-inner .container-img .w3-display-container{display:inline-block;width:90%;}

    /*#spiaggia-inner .container-img img{width:90%;}   
    #spiaggia-inner .container-img video{width:90%;}*/
    #piscine-inner{max-width:1366px;}
    #piscine-inner .content-text{width:30%;float:right !important;padding-left:0px}
    #piscine-inner .content-text p{font-size:19px;}
    #piscine-inner .container-img{width:70%;float:left !important;padding-right:60px;text-align:left}            
    #piscine-inner .container-img .w3-display-container{display:inline-block;width:90%;}


    /* sezione servizi */
    #servizi-inner .header-section .paragrafo-sezione p {font-size:19px;}
    .container-carousel-nostri-servizi{padding:80px 0 0 0}

    .cartellone-inner .content-text p {font-size:24px}
}
