﻿.page-title{font-size:48px}
#sezione-sistemazione{padding-top:24px;padding-bottom:32px}
#container-box-icone{overflow:hidden;font-weight:600;margin-right:-16px}
.box-icona{float:left;text-align: center;display: inline-block;font-size: 17px;padding: 8px;font-family: 'Glory';margin-right: 16px;margin-bottom:16px;color:#CF234E;}
.box-icona-4{width:calc(50% - 16px)}
.box-icona-3{width:calc(33.33% - 16px)}
.box-icona:last-child{margin-bottom:0}
.img-carousel-container img{width:100%;}
#images{cursor:pointer}
#img-viewer img{width:100%;} 
#img-carousel{display:block;}  
#img-carousel-inner{margin-right:-8px}
.img-carousel-container{float:left;width:calc(16.66% - 8px);margin-right:8px;margin-bottom:8px;background:#ccc}
#img-viewer{margin-bottom:8px;}
.img-carousel-container{background:#fff}
.img-carousel-container img{cursor:pointer;opacity:.3}
#img-carousel-inner::-webkit-scrollbar {width: 8px;}
#img-carousel-inner::-webkit-scrollbar-track {}
#img-carousel-inner::-webkit-scrollbar-thumb {background:rgba(0, 123, 196,.5)}
#img-carousel-inner{scrollbar-color: rgba(0, 123, 196,.5) transparent;scrollbar-width: thin;} /* firefox */
.control{color:#fff;background:rgba(0,0,0,.9);cursor:pointer}
.control i{font-size:24px}
.control.w3-display-left{margin-left:8px}
.control.w3-display-right{margin-right:8px}
#container-descrizione{position:relative}
.descrizione-sistemazione{padding:32px 0}
#strumenti{padding-bottom:32px;}
#strumenti a{border:2px solid #fff;color:#fff;width:100%;font-size:24px}
#strumenti .w3-col{margin-top:32px}
.layer-scuro{background: linear-gradient(0deg,rgba(0,0,0,.7),transparent 30%);}
#strumenti .w3-button:hover{color:#fff!important;background:#CF234E!important}
#wrapper-sezione-servizi{padding:64px 0;background:#f1f6fb}
#wrapper-sezione-servizi .template-max-width > .w3-row{border:1px solid #007bc4;background:#fff;padding:32px 0}
.servizi-col{margin-bottom:32px;}
.servizi-col h3{color:#686868;font-size:21px;margin-bottom:16px;}
.sezione-servizi h3,.sezione-listino h3{color:#007bc4;font-weight:bold}
.sezione-listino{margin-bottom:24px}
.item-voce-servizio{padding:4px 0;font-size: 1.1em;line-height: 1.68421053em;}
.w3-ul li:last-child {border-bottom: 1px solid #ddd}
.w3-ul li{border-bottom:none!important}
.sezione-altre-sistemazioni{overflow:hidden}
.sezione-altre-sistemazioni h4{color:#4da392;font-size:3em;text-align:center;margin-bottom:32px}
.elenco-servizi{list-style:none;padding-left:16px}
.item-voce-servizio:after,.item-voce-servizio:before{content: "";display: table;clear: both;}
.item-voce-servizio i{font-size:32px;color:#97C00E;float:left}
.item-voce-servizio span{float:left;width:calc(100% - 40px);margin-left:8px;padding-top:4px}



#elenco-servizi-extra i{color:#f44336}
#sole{position: absolute;top:0;right:0;z-index: -1;display:none}
#sole img{opacity: .7;transform:translateX(0%) translateY(-10%);width:400px;}

#sezione-booking{background:#00b0d8;}


#sezione-booking .titolo{color:#fff;padding-top:32px;font-size:2em}

#sezione-booking .pdcmp-widget .pdcmp-widget-types {display: none}
#sezione-booking .pdcmp-widget .pdcmp-widget-category {display: none}
#sezione-booking .pdcmp-widget>.pdcmp-title{display:none}


@media(min-width:550px){
    #container-box-icone{padding:0}
}

@media(min-width:600px) {
    .img-carousel-container{width:calc(12.5% - 8px);}
    #container-box-icone{margin-right:0;}
    .box-icona{margin-bottom:0;float:none;font-size:15px}
    .box-icona-4,.box-icona-3{width:auto}
    #strumenti{margin-right:-24px;}
    #strumenti .w3-col{width:calc(50% - 24px);margin-right:24px;}
}

@media(min-width:650px){
    #sole{display:block}
}

@media(min-width:768px){
    .sezione-servizi{width:100%;}
    #sezione-servizi-inclusi .w3-col{width:50%}
    .box-icona{font-size:17px}
    #img-carousel{display:block;}  
    #img-carousel-inner{margin-right:-8px}
    .img-carousel-container{float:left;width:calc(12.5% - 8px);margin-right:8px;}
    #img-viewer{margin-bottom:8px;}
    .control i{font-size:32px}
    .control.w3-display-left{margin-left:16px}
    .control.w3-display-right{margin-right:16px}

    #sezione-booking .pdcmp-widget .pdcmp-widget-vehicle{width:50%}
    #sezione-booking .pdcmp-widget .pdcmp-widget-period{width:100%}
}

@media(min-width:992px) {
    #sezione-sistemazione{padding-top:48px;padding-bottom:48px}
    #container-box-icone{padding: 0 0 8px}
    .control i{font-size:48px}
    .w3-ul li:last-child{border-bottom:none}
    #sezione-booking .titolo{font-size:3em;padding-top:48px}
}


@media(min-width:1200px) {
    #sezione-booking .pdcmp-widget .pdcmp-widget-vehicle,#sezione-booking .pdcmp-widget .pdcmp-widget-components{width:25%}
    #sezione-booking .pdcmp-widget .pdcmp-widget-period{width:50%}
    #sezione-booking .pdcmp-widget .pdcmp-widget-submit{width:100%}
}


@media(min-width:1280px){        
    #img-viewer{width:calc(100% - 100px);height:485.44px;margin-bottom:0}    
    #img-carousel{width:100px;}
    #img-carousel-inner{width:100%;height:485.44px;overflow-y:scroll;margin-right:0}
    #img-carousel-inner{padding-right:4px;padding-left:4px}
    .img-carousel-container{margin-right:0;width:100%;margin-bottom:4px}  
    #sole img{width: 500px;}
    #sezione-booking{padding-left:32px;padding-right:32px}
    #sezione-booking .pdcmp-widget .pdcmp-widget-vehicle,#sezione-booking .pdcmp-widget .pdcmp-widget-components{width:20%}
    #sezione-booking .pdcmp-widget .pdcmp-widget-period{width:40%}
    #sezione-booking .pdcmp-widget .pdcmp-widget-submit{width:20%}
}

@media(min-width:1366px){
    #img-viewer,#img-carousel-inner{height:664.53px}     
    #container-box-icone{position: absolute;top: 50%;transform: translateY(-50%);right: 0;}
    .descrizione-sistemazione{padding:64px 0}
    #strumenti{margin-right:-32px;padding-bottom:64px;padding-top:64px}
    #strumenti .w3-col{width:calc(25% - 32px);margin-right:32px;margin-top:0}      
    .sezione-altre-sistemazioni{padding-bottom:64px;padding-top:64px}
    .sezione-altre-sistemazioni h4{font-size:3.8em}
    #sole{left:auto;top:100%;right:0;}
    #sole img{transform: translateX(0%) translateY(-100%);width: 600px;}
}

@media(min-width:1920px){
    #sole img{width: 768px;}
}
