html{min-height:480px}        

html,
body,
#form1,
header
{height:100%;}

.text-deleted{text-decoration:line-through;color:gray}

.cc_cp_f_powered_by{display:none!important}

.ombratesto {text-shadow: 0px 0px 10px #000;}
.template-max-width{max-width:1200px;margin:auto;}
.position-fill {position: absolute;top: 0;left: 0;width: 100%;height: 100%;}

#nav-next,#nav-prev{display:inline-block;margin-top:24px;color:#cb005a}
.owl-nav{text-align:center}

#menu-contacts{display:none;padding-left:32px}
#menu-contacts a{display:flex;text-decoration:none;font-family:'Bree Serif'}
#menu-contacts i{font-size:24px;}
#menu-contacts .la-envelope{color:#cb005a}
#menu-contacts .la-phone-volume{color:#F4C412}
#menu-contacts span{margin-left:8px;display:inline-block;font-size:1.2em}


#barra-menu{position:fixed;top:0;left:0;width:100%;z-index:2;padding:32px 0;}
#menu{width:auto;padding-right:32px;overflow:visible;z-index:1;display:none}
#menu{text-transform: uppercase;font-family: 'Bree Serif';color: #050a09;}
#menu a{text-decoration:none}
#menu ul{list-style:none;margin:0!important;padding: 0;}
#menu .menu-item{float:left;padding: 8px 0;font-size:1.2em}
#menu .menu-item:hover > a{color:#cb005a}
#menu .dropdown{position:relative}
#menu .dropdown-menu-item > a:hover{color:#F8B715}
#menu .dropdown-menu-item.simple > a:hover{color:#cb005a} 
#menu .dropdown-menu{display:none;position:absolute;background: #fff;bottom:16px;width:500px;transform:translateY(100%);}
#menu .dropdown:hover .dropdown-menu{display:block;animation:fade-in-out .3s ease}
#menu .sub-menu{padding:32px;}
#menu .sub-menu-item > a:hover{color:#cb005a}
#menu .sub-menu-item > a{display:inline-block;padding:8px 0}

#container-header-logo{position: absolute;left:32px;top:8px;}
#container-header-logo img{max-width:110px;}

#btn-menu {right:32px;cursor:pointer}
/* menu icon */
.lines, .lines:before, .lines:after {background:#050a09}
.lines {display: inline-block;height: 3px;width: 30px;border-radius: 4px;transition: .3s;position: relative;top: -4px;transform-origin: center;}
.lines::before, .lines::after {display: inline-block;height: 3px;width: 30px;border-radius: 4px;transition: .3s;content: '';position: absolute;left: 0;transform-origin: center;width: 100%;}
.lines::before {top: 9px;}
.lines::after {top: -9px;}
.lines-x{transform:rotate(45deg)}
.lines-x::before{transform:rotate(90deg);top:0}
.lines-x::after{display:none}



#header .brand{position:absolute;left:16px;bottom:32px;color:#fff;}
.brand .titolo{font-size:32px;font-family:Candal!important}
.brand .sottotitolo{font-size:24px;font-family:Candal!important}
.brand .features{font-family:Candal;font-size:21px}
.features label{display:block}
.features label i {font-size:40px}

#decoration-wave-img{width:100%;margin-top:48px}


#header-content{height:100%;background-size:cover;}

.layer{position:fixed;top:0;left:0;width:100%;height:100%}
#layer-menu{background-color:#fff;z-index:2;display:none}
.layer-menu-header{background:#fff}
.layer-menu-content{height: calc(100% - 22px);overflow: auto;}
.layer-menu-content-inner{padding:64px 16px;}
.btn-menu,.btn-close-menu{cursor:pointer}       
.layer-menu-header-inner{padding:32px 0}
.layer-menu-header .logo-menu{max-width:110px;display:inline-block;position: absolute;left: 32px;top: 8px;}

#welcome{padding:48px 0}
#welcome .titolo{font-family:Candal;color:#cb005a;padding:0 32px}
#welcome .sottotitolo{font-family:Candal;color:#F4C412;padding:0 32px}
#welcome .paragrafo{font-family:'Bree Serif';color:#050a09;padding:0 32px}

#sezione-sistemazioni{background: rgba(244, 196, 18,.1);padding:48px 0 0}
#sezione-sistemazioni .titolo{font-family:Candal;color:#cb005a;padding:0px 32px 48px;margin:0}
#sezione-sistemazioni .w3-row{padding:0}

.sistemazione-item{display:block;overflow:hidden;text-decoration:none}
.sistemazione-item img{transition:transform .5s ease-in-out;will-change:transform;}
.sistemazione-item .text{padding:48px 32px;}
.sistemazione-item .sistemazione-categoria{font-family:Candal;margin:0;color:#cb005a}
.sistemazione-item .paragrafo{font-family:'Bree Serif';font-size:18px;color:#050a09}
.sistemazione-item .position-fill{background-color:rgba(0,0,0,0);transition:background-color .5s ease-in-out;will-change:background-color}
.sistemazione-item .btn-scopri{background: #cb005a;color: #fff;font-size: 17px;font-family: 'Candal';}

#content-page, #sezione-scheda{background: rgba(244, 196, 18,.1)/*#f1f6fb*/;padding:48px 0 0}
#content-page .titolo, #sezione-scheda .titolo{font-family:Candal;color:#cb005a;padding:0px 16px;margin:0;font-size:2.3em}
#content-page .sottotitolo, #sezione-scheda .sottotitolo{font-family:Candal;color:#F4C412;padding:0px 16px 48px;margin:0;font-size:1.3em}
#content-page .paragrafo, #sezione-scheda .paragrafo{font-family:'Bree Serif';color:#050a09;padding:0 16px}
#col-piantina{margin-top:30px;padding:0 48px;text-align:center}
#col-piantina img{max-width:400px} 

.cartellone-inner{background:#fff;padding:48px 32px;}
.cartellone-inner p{font-family:'Bree Serif';color:#050a09;font-size:18px}
.cartellone-inner .content-text h3{font-family: Candal;font-size:32px;color:#F4C412;margin:0}
.cartellone .container-link-scopri{float:left}
.cartellone .link-scopri{padding: 8px 16px;text-decoration:none;display: inline-block;cursor:pointer;background-color:#F4C412;color:#050a09;font-family:Candal;font-size:17px}

#sezione-spiaggia{padding:48px 0;background:#fff}
#sezione-spiaggia .titolo{font-family:Candal;color:#cb005a;padding:0 32px}
#sezione-spiaggia .paragrafo{font-family:'Bree Serif';padding:16px 32px;color:#050a09}
#sezione-spiaggia .w3-col{margin-bottom:16px}
#sezione-spiaggia .w3-col:last-of-type{margin-bottom:0}
.btn-prezzi{background: #cb005a;color: #fff;font-size: 17px;font-family: 'Candal';min-width:250px}


#footer{background:#F4C412}
#footer{padding: 48px 30px 100px;font-size: 13px;color:#fff}
.footer-inner{margin:auto;max-width:1775px}
#footer h4{font-weight:700;font-size:32px;color:#fff;font-family:'Candal'}
#footer ul{list-style:none;padding:0}
#footer li a{padding:8px 0;display:inline-block;font-size:1.5em;text-decoration:none;font-family:'Bree Serif'}
#footer li span{padding: 8px 8px 8px 0;display: inline-block;font-size: 1.4em;text-decoration: none;font-weight:bold}
#footer li a:hover{color:#cb005a}
#footer li a i{font-size:32px;}
.footer-col{width:100%}
#footer p{margin:0;padding:4px 0 0;}
.footer-inner{text-align:center}




#sezione-prezzi{padding-left:16px;padding-right:16px;padding-bottom:32px}
#sezione-richiedi-info{padding-left:16px;padding-right:16px;padding-bottom:64px}
.titolo-sezione{font-family:'Bree Serif';color:#006EBE;text-align:center}
.sottotitolo-sezione{font-family:'Bree Serif';color:#006EBE}
.paragrafo-info{font-size:15px;font-family: 'Bree Serif';color: #050a09;}

table{font-family:'Bree Serif';} 
table td,table th{text-align:center!important}

@keyframes spin {
    0% {transform: rotate(0deg);}
    100% {transform: rotate(360deg);}
}
.spinner {
    border: 4px solid #f3f3f3;
    border-top: 4px solid #cb005a;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
    display: inline-block;
}


@media(min-width:375px){
    .brand .titolo{font-size:48px;}
    .brand .sottotitolo{font-size:32px;}
    .brand .features{font-size:30px}
}

@media(min-width:500px){
    .titolo-sezione{font-size:32px}
}

@media(min-width:768px){
    .template-max-width{padding:0 32px}
    #header .titolo{font-size:64px}
    #header .brand{left:32px}
    #decoration-wave-img{margin-top:38px}
    #content-page .paragrafo, #sezione-scheda .paragrafo{padding:0}
    #content-page .titolo, #sezione-scheda .titolo{padding:0;}
    #content-page .sottotitolo, #sezione-scheda .sottotitolo{padding:0 0 48px;}
    #sezione-sistemazioni{padding:48px 0}
    #sezione-sistemazioni .w3-row{margin-right:-32px}
    #sezione-sistemazioni .w3-col{width:calc(50% - 32px);margin-right:32px}
    .sistemazione-item .text{position:absolute;left:16px;top:16px;/*will-change:transform, opacity;transform:translateY(100%);opacity:0;transition:transform .5s ease-in-out, opacity .5s ease-in-out;*/padding:0}
    .sistemazione-item .sistemazione-categoria{font-family:Candal;margin:0;text-shadow: 0px 0px 10px #000;color:#fff;font-size:32px}
    .sistemazione-item .paragrafo{color:#fff;text-shadow: 0px 0px 10px #000;}
    .sistemazione-item:hover img{transform:scale(1.2)}
    .sistemazione-item:hover .position-fill{background-color:rgba(0,0,0,.2)}
    .cartellone-inner{padding:64px}
    #casamobile-deluxe{margin-top:32px}
    #sezione-spiaggia{padding:48px 0}
    #sezione-spiaggia .titolo{padding:0}
    #sezione-spiaggia .paragrafo{padding:24px 0}
    #sezione-spiaggia .w3-row{margin-right:-24px}
    #sezione-spiaggia .w3-col{width:calc(33.33% - 24px);margin-right:24px;margin-bottom:24px}
    #sezione-prezzi{padding-left:0;padding-right:0}
    #sezione-richiedi-info{padding-left:0;padding-right:0}
}


@media(min-width:992px)
{           
    #btn-menu{display:none}    
    #container-header-logo img{max-width:150px;}
    #menu{display:block}     
    #welcome{padding:122px 32px;text-align:center}
    #sezione-sistemazioni{padding:122px 32px}
    #sezione-sistemazioni .titolo{text-align:center;padding:0 32px 64px}
    #sezione-sistemazioni .w3-row{padding:0}   
    .cartellone .container-link-scopri{position:absolute;left:50%;top:50%;width:50%;transform:translateY(-50%);text-align:center;float:none}
    .cartellone .link-scopri{border: 2px solid #fff;font-size: 24px;color:#fff;background-color:transparent}
    .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-size: 46px;font-weight: 500;text-shadow:1px 1px 0 #111;}
    .cartellone-inner .content-text p{color:#fff;text-shadow:1px 1px 0 #111;max-width:100%;}
    .cartellone-inner .content-text .w3-col{width:60%;}
    #sezione-spiaggia{padding:122px 32px 122px}
    #sezione-scheda .w3-row{margin-right:-32px;}
    #sezione-scheda .w3-col{width:calc(50% - 32px);margin-right:32px}
    #col-piantina{margin-top:0}
    #footer{padding:46px 30px}
    .footer-inner{text-align:left}
    .footer-col{width:25%}
    #footer h4{font-size:17px}
    #footer li a{padding:4px 0;font-size:15px;}
}

@media(min-width:1280px){
    #decoration-wave-img{margin-top:30px}
    #barra-menu #menu{display:block}
    #barra-menu .btn-menu{display:none}
    .cartellone-inner .content-text{width:1170px;}
    .cartellone-inner .content-text h3{font-size: 52px;}
    .cartellone-inner .content-text p{font-size:21px;}
    #welcome .titolo{font-size:3em!important}
    #welcome .sottotitolo{font-size:2em!important}
    #welcome .paragrafo{font-size:1.5em!important}
    #sezione-sistemazioni .titolo{font-size:3em!important}
    #sezione-spiaggia .titolo{font-size:3em!important}
    #sezione-spiaggia .paragrafo{font-size:1.5em!important}
    #footer h4{font-size:24px}   
    #footer li a{font-size:1.5em} 
}

@media(min-width:1366px){       
    .template-max-width{padding:0}
    .paragrafo-info{font-size:17px;}  
    #footer h4{font-size:32px}         
}

@media(min-width:1533px){            
    .cartellone-inner .content-text{width:1366px;}
}

@media(min-width:1920px){
    #container-header-logo{left: 50%;transform: translateX(-50%);top:16px;}
    #menu-contacts{display:block}   
    #decoration-wave-img{margin-top:34px}
    .cartellone-inner .content-text p {font-size:24px}    
    #sezione-sistemazioni .w3-row{transform:translateX(-64px)}
    #sezione-sistemazioni #casamobile-deluxe{transform:translateX(64px)}
    #sezione-scheda .w3-row{margin-right:-32px;padding-top:80px}
    #sezione-scheda .w3-col{width:calc(50% - 32px);margin-right:32px}
    #sezione-scheda #col-descrizione{width:calc(65% - 32px)}
    #sezione-scheda #col-piantina{width:calc(30% - 32px);margin-top:0;padding:0}
    #sezione-scheda .titolo{font-size:3em!important;text-align:center}
    #sezione-scheda .sottotitolo{font-size:1.5em!important;text-align:center}
}