body{
    font-size: 16px;
    font-family: 'Roboto', sans-serif;    
}

img{max-width: 100%;}

a{color: inherit; cursor: pointer;}
a:hover{color: inherit;}
#header{
    position: relative;
    margin: 20px 0;
}


#logo{
    margin: 10px 0;
    max-width: 330px;    
}

.carousel{
    
    height: calc(100vh - 109px);
    height: -o-calc(100vh - 109px); /* opera */
    height: -webkit-calc(100vh - 109px); /* google, safari */
    height: -moz-calc(100vh - 109px); /* firefox */
    
    
}

.carousel-inner, .carousel-item{
    height: 100%;
}

.carousel-item-img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.my-slide-container{
    padding-left: 0;
}

#language{
    position: absolute;
    bottom: 0;
    right: 0;
    font-size: 0.95em;
    
    color: #7d897d;
}

#language a{
    font-size: 1.05em;
    color: #7d897d;
    margin-left: 4px;
    margin-right: 4px;
    
}

#language a.selected{
    color: #000;
    font-weight: bold;
}


.menu-big{
    text-align: right;
    font-size: 1.5em;
    padding-right: 10px;
    font-weight: lighter;
    position: fixed;
    top: 109px;
    right: 3%;    
    width: 13%;
    height: calc(100vh - 109px);
    height: -o-calc(100vh - 109px); /* opera */
    height: -webkit-calc(100vh - 109px); /* google, safari */
    height: -moz-calc(100vh - 109px); /* firefox */
    z-index: 100;    
}


.menu-big .small{
    
    font-size: 0.66em;
    line-height: 2em;
    
}

.menu-big a{
    display: block;
    font-weight: lighter;
}

.menu-big img{    
    max-width: 65px;        
}

.menu-big div.mid{    
    height: 100%;
    width: 100%;
    top: 0;
    right: 10px;
    position: absolute;
    display: table;
}

.menu-big div.mid div{    
    display: table-cell; 
    vertical-align: middle;
}

.menu-selected{
    text-decoration: underline;
}

.menu-big div.bottom{    
    bottom: 10px;
    position: absolute;
    width: 100%;
    right: 10px;
}

.menu-big div.bottom a{
    text-decoration: underline;
}

.carousel-indicators li {
    width: 10px;
    height: 10px;
    border-radius: 100%;
    display: block;
    float: none;
    margin: 6px;
    border: 0;
}

.carousel-indicators{
    position: absolute;
    top: 45%;
    left: 20px;
    text-align: left;
    margin: 0;
    width: 45px;
    display: block;
    
}

.carousel{position: relative;}


h1{
    font-family: 'Libre Baskerville', serif;
    
}

h2{
    font-size: 2.56em;
}

h2.serif{
    font-family: 'Libre Baskerville', serif;
}

p.serif{
    font-family: 'Libre Baskerville', serif;
}

p.small-right{
    
    font-size: 0.88em;;
    
}

.carousel-caption h1{
    font-size: 3.8em;
}

.carousel-caption p{
    font-size: 1.7em;
}


span.note{
    
    display: inline-block;
    border-left: 2px solid #7d897d;
    font-size: 0.4em;
    line-height: 1.3em;
    color: #7d897d;
    margin-left: 50px;
    padding-left: 50px;    
    margin-bottom: 50px;
    
}

span.sfoglia{    
    display: block;
    float: right;    
    font-size: 0.4em;   
    font-family: 'Roboto', sans-serif;
    position: relative;
    top: 20px;
    cursor: pointer;
}

.separator{
    
    border-top: 1px solid #000;
    height: 3px;
}

h3{
    font-size: 1.94em;
    margin: 50px 0 40px 0;
}

h3.serif{
    font-family: 'Libre Baskerville', serif;
}
h3.no-margin{
    margin-top: 0;
}

h3.no-margin-all{
    margin-top: 0;
    margin-bottom: 20px;
}

h3.no-margin-bottom{
    margin-top: 70px;
    margin-bottom: 0px;
}

p{font-size: 1em;}

.body-page{margin-top: 60px;}

.bg-green{    
    background-color: #2b422b;    
}

.bg-grey{    
    background-color: #e6e6e6;    
}


.ante-box div{    
    margin-top: 30px;
    margin-bottom: 30px;    
}

.ante-box img{
    height: 290px;
    object-fit: cover; 
    width: 100%;
}

.ante-box p{
    font-weight: lighter;
}

.ante-box a{
    font-weight:normal;
}


.booking{color: #FFF; padding-top: 40px; padding-bottom: 40px; border-right:14px solid; padding-right: 100px;}
.booking p{max-width: 60%;}
.booking input{width: 100%; padding: 10px; background-size: 20px;
                      background-repeat: no-repeat;
                      border: 0;
                      background-position: 10px 10px;
                      padding-left:40px;}

.booking select{width: 100%; padding: 10px; background-size: 20px;
                        background-repeat: no-repeat;
                        border: 0;
                        padding-left:40px;
                        background-position: 10px 13px;
                        background-color: #FFF;
                        }

                        
                        
.last{

        color: #000; padding-top: 40px; padding-bottom: 40px; border-right:14px solid #FFF; padding-right: 100px;

}                        
   
.last button{width: 200px; padding: 10px; 
                    border:0px solid #FFF;
                    background-color: #2b422b;
                    color: #FFF;
                    margin-top: 10px;
                    font-weight: normal;
                    text-decoration: underline;
                    


                        }


input[type="date"]
{
    display:block;
  
    /* Solution 1 */
     -webkit-appearance: textfield;
    -moz-appearance: textfield;
    min-height: 40px;
  
    /* Solution 2 */
    /* min-width: 96%; */
}                        
                        
                        
.booking button{width: 100%; padding: 10px; 
                    border:1px solid #FFF;
                    background-color: transparent;
                    color: #FFF;
                    margin-top: 30px;
                    font-weight: normal;
                    text-decoration: underline;
                    


                        }

.booking input#arrivo{background-image: url("/graf/arrivo.png");}
.booking input#partenza{background-image: url("/graf/partenza.png");}
.booking select#villa{background-image: url("/graf/villa.png");}



.booking-lat{
    padding: 10px 30px 30px 30px;
}  

.booking p{max-width: 100%;}

.booking input{margin-bottom: 20px;}
    


.message{color: #FFF; padding-top: 60px; padding-bottom: 40px; border-right:14px solid; padding-right: 100px;}
.message input[type=text],.message input[type=email]{  width: 100%; 
                            padding: 10px; 
                            background-size: 20px;                      
                            border: 0;
                            margin-top: 10px;
                            padding-right: 30px;
                       }
.message textarea{ 
                            width: 100%; 
                            padding: 10px; 
                            background-size: 20px;                      
                            border: 0;
                            margin-top: 10px;
                            padding-right: 30px;
                            height: 203px;
                            margin-bottom: 20px;
                    }
                    
.message button{    padding: 10px 30px; 
                    border:1px solid #FFF;
                    background-color: rgba(255,255,255,0.5);;
                    color: #FFF;
                    margin-top: 30px;
                    text-decoration: underline;

                }                    
                    

.column-right{
    padding-left:40px;
}




.down-arrow{
    cursor: pointer;
}

.body-page a{
    color: #000;
    text-decoration: underline;
}

.footer{
    padding-top: 50px;
}
.footer a{
    display: block;
    color: #000;
    text-transform: lowercase;
    text-transform: capitalize;
}

.footer .author a{
    display: inline;
}

.footer img{
    width: 80%;
}

.footer img.booking-img{
    width: 70%;
    position: relative;
    top: -3px;
    left: -5px;
}


.footer .icons-link{
    
    text-align: right;
    
}

.footer .icons-link a{
    
    display: inline-block;
    color: #7d897d;
    font-size: 1.6em;
    margin-left: 20px;
}
    .footer-links-to-hide{
        
        padding-left: 70px;
        
    }


#small_menu{
    display: none;
}

#small_menu a{
    display: block;
    font-size: 20px;
    border-top: 1px solid #000;
    padding: 10px;
}

.small-menu-icon{    
    position: absolute;
    bottom: 0px;
    left: 30px;
    font-size: 30px;
    display: none;
    
}
.small-telefona{display: none;}
.small-prenota{display: none;}

.small-telefona a, .small-prenota a{
        
        color: #FFF;
        font-size: 16px;
        line-height: 56px;
        display: block;
        text-align: center;
        text-decoration: underline;
        
    }

    .author{
       text-align: right;        
    }
    
    .author a{
        position: relative;
        top: -80px;
       
    }
    
    .gallery{        
        height: 180px;
        object-fit: cover;
        width: 100%;
        margin-top: 30px;
        
    }
    
    .gallery-container{
        margin-bottom: 50px;
    }
    
    
    
    
    .gallery-container div:nth-child(n+7){
        display: none;
    }
    
    .tags{
        
        margin-bottom: 40px;
        margin-top: 40px;
        color: #7d897d;
        font-size: 1em;
        
    }
    
    .tags div{margin-bottom: 20px; font-weight: bold;}
    
    .tags i{
        margin-right: 10px;
        font-size: 1.4em;
        position: relative;
        top: 2px;
        width: 38px;
        text-align: center;

        
    }
    
    .stable{
    
        border: 1px solid #7d897d;
        padding: 10px 20px 20px 20px;
        margin-top: 0px;
        margin-right: 15px;

    }  
    
    .stable span{
        display: block;
        color: #2b422b;
        margin: 20px 0;
        font-size: 1.3em;

    }  
    .square {
        width: 100%;
        overflow: hidden;
        position: relative;
    }

    .square:after {
        content: "";
        display: block;
        padding-bottom: 100%;
    }
    .squared{
        object-fit: cover;
        position: absolute;
        width:100%;
        height:100%;
    }
    
    .around{
        text-align: center;
    }
    
    .around p{
        width: 80%;
        margin: auto;
        text-align: left;
    }
    
    .around img{
        margin: 30px 0 15px 0;
    }
    
    
    .book-box{
        
        background-color: #efefef;
        margin-left: 10px;
        padding: 20px;
    }
    
    .book-box select{
        
        width: 100%; 
        padding: 10px;
        border: 0;
        padding-left:20px;
        margin-bottom: 20px;
    }
    
    .book-box h3{
        margin-top: 0;
    }
    
    .book-box input{
        display: none;
    }
    
    .book-box button{    padding: 10px 30px; 
                         text-align: center;
                    border:0;
                    background-color: #7d897d;
                    color: #FFF;
                    margin-top: 30px;
                    text-decoration: underline;
                    width: 100%;

                } 
                
    .book-contact{
        font-size: 1.2em;
        color: #7d897d;
    }
    
    .book-contact a{
        
        color: #7d897d;
    }
    
    #alert{        
        position: fixed;
        z-index: 500;
        
        background-color: rgba(0,0,0,0.5);
        font-size: 0.8em;
        color: #000;
        height: 100%;
        width: 100%;
        top: 0;
        left: 0;
        display: none;
        
    }
    
    #alert div{        
        
        background-color: #FFF;
        font-size: 0.8em;
        border: 1px solid #000;
        color: #000;
        padding: 10px;
        max-width: 100%;
        width: 400px;
        margin: 200px auto;
        
        
    }
    
    
    
    
    #alert p{
        margin-top: 40px;       
    }
    
    #alert a{
        display: block;
        text-align: right;
        line-height: 1.5em;
    }
    
    #alert a span{
        font-size: 1.5em;
        margin-left: 5px;
    }
    
    .squared-box{
        width: 33%;
        padding-bottom: 33%;        
        position: relative;        
        float: left;
    }
    
    .squared-box div{
        background-color: #FFF;
        position: absolute;
        width: 90%;        
        top: 5%;
        left: 5%;        
        height: 90%;
    }
    
    .squared-box div span.top{
        
        position: absolute;
        top: 4px;
        width: 100%;
        display: block;
        text-align: center;
        
    }
    .squared-box div span.mid{
        position: absolute;
        top: 30%;
        font-size: 2em;
        width: 100%;
        display: block;
        text-align: center;
        
        
    }
    .squared-box div span.bottom{
        position: absolute;
        bottom: 4px;
        width: 100%;
        display: block;
        text-align: center;
    }
    
    
    .box-booking{
        background-color: #efefef;
        padding: 20px;
        font-size: 0.8em;
        margin-bottom: 20px;
    }
    
    .box-booking span{
        color: #7d897d;
        display: block;
    }
    
    
    .box-booking h4{
        margin: 20px 0;
    }
    
    .box-booking img{
        height: 100%;
        object-fit: cover; 
        width: 100%;
    }
    
    .box-booking button{    
        padding: 10px 30px; 
        text-align: center;
        border:0;
        background-color: #7d897d;
        color: #FFF;
        
        text-decoration: underline;
        
        position: absolute;
        top: 0;
        right: 10px;

    } 
    
    .button-book{
        
        padding: 10px 90px; 
        text-align: center;
        border:0;
        background-color: #7d897d;
        color: #FFF;
        
        text-decoration: underline;
        
        float: right;
        
    }
    
    .button-book-2{
        
        padding: 10px 90px; 
        text-align: center;
        border:0;
        background-color: #7d897d;
        color: #FFF;
        width: 100%;
        text-decoration: underline;
        
        float: right;
        
    }
    
    .end-form input{
        
        width: 100%;
        border: 0;
        background-color: #efefef;
        margin-top: 10px;
        padding: 10px 20px;
        
    }
    
    .end-form textarea{
        
        width: 100%;
        border: 0;
        background-color: #efefef;
        margin-top: 10px;
        padding: 10px 20px;
        resize: none;
        height: 200px;
        
    }
    
    
    .chekbox-div input{
        width: auto;  float: left; margin-right: 20px;
        
    }
    
    .chekbox-div div{
        width: 100%;
        
    }
    
    .chekbox-div p{display: block; float: left; width: 90%;}
    
    .chekbox-div a{margin-top: 5px; font-weight: bold; display: block; text-decoration: underline !important;}
    
    .cards{
        color: #b7bcb7;
        font-size: 10px;
    }
    
    .cards i{
        color: #b7bcb7;
        font-size: 30px;
        padding-right: 10px;
    }
    
    
    #coverer{
        position: absolute;
        width: 83%;
        height: 200px;
        background-color: rgba(0,0,0,0.5);
        z-index: 200;
        height: 100%;
        display: flex;
        align-items: center;
    }  
    
    #coverer-alert{
        
        width: 80%;
        max-width: 400px;
        padding: 30px;
        background-color: #FFF;
        margin: auto;
        border: 1px solid #000;
        
    }
    
    #coverer-alert a{
        
        font-weight: bold;
        
    }
    
    .fa-tripadvisor:hover{
        color: #00af87;
    }
    
    .fa-facebook-f:hover{
        color: #3b5998;
    }
    
    .fa-instagram:hover{
        color: #3f729b;
    }
    
    .fa-whatsapp:hover{
        color: #25d366;
    }
    
@media all and (max-width:1600px) {
    body {
        font-size: 13px;
    }
    .footer .icons-link a{
    
        font-size: 1.4em;
        margin-left: 10px;
    }
    
    .footer img.booking-img{
        width: 50%;
        position: relative;
        top: -3px;
        left: -20px;
    }

    
    
}


@media all and (max-width:1150px) {
    
    #coverer{
        
        width: 100%;
        
        
    }    
    
    
    #header {
        text-align: center;
    }
    #header img{
        width: 300px;
    }
    #language{
        right: 30px;
    }
    .small-menu-icon{ 
        display: block;
    }
    .small-telefona{display: block; background-color: #4f684f; border-top: 1px solid #FFF; border-right: 14px solid #FFF; }
    .small-prenota{display: block;  background-color: #2b422b; border-top: 1px solid #FFF; border-left: 15px solid #FFF;  }
    
    .footer .icons-link{
        text-align: center;
        margin-top: 40px;
    }
    
    .my-slide-container{
        padding-left: 15px;
    }
    span.note{
        margin-left: 0;
        padding-left: 0;
        border-left: 0;
    }
    
    .carousel-caption h1{
       font-size: 2.5em;
    }
    
    .carousel-caption p{
       font-size: 1.4em;
       font-weight: normal; 
    }
    
}





@media all and (max-width:600px) {
    
    .carousel-caption h1{
       font-size: 2em;
    }
    .carousel-caption p{
       font-size: 1.2em;
    }
    
    #header img{
        width: 200px;        
    }
    .small-menu-icon{ 
        left: 5px;
    }
    
    #language{
        right: 5px;
        bottom: -20px;
    }
    
    .carousel-item-img{        
        height: 600px;
        object-fit: cover; 
        width: 100%;
    }
    
    .booking{padding: 40px;}
    .booking p{max-width: 100%;}
    
    .booking input{margin-bottom: 10px;}
    
    
    .message{padding: 40px;}
    
    
    .footer img{
        width: 70%;
    }
    
    .footer{
        text-align: center;
    }
    
    .footer-links{
        margin-top: 30px;
    }
    
    .footer-links-to-hide{
        display: none;
    }
    
    
    
    
    .author a{
        text-align: center;
        margin-top: 30px;
        top: 0px;
    }
    
    
}