/* ESTRUCTURA **************/
html {
    scroll-behavior: smooth;
    transition: smooth;
    margin:0;
}

body {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
}
.bb-calendar-widget input[type="date"] {
    position: initial!important;
    
}

/*************************/
/* CABEZA ****************/
.floating-wpp {
    position: fixed;
    bottom: 5px;
    left: 15px;
    font-size: 14px;
    transition: bottom .2s;
    background: url(../img/Whatsapp.png) no-repeat;
    z-index: 100;
    background-size: contain;
}
#cabecera {
    background: url(../img/back1.jpg);
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden;
    display: block;
    height: 54vw;
}

#cabecera img {
    width: 5%;
    margin-left: 90%;
    margin-top: 5.5%;
    cursor: pointer;
    display: block;
    float: left;
    position: fixed;
    z-index:100;
}

#cabecera .menu {
    display: none;
    position: fixed;
    background: linear-gradient(90deg, #333, #333);
    opacity: 1;
    width: 100%;
    margin-left: 0%;
}

#cabecera .menu ul img {
    width: 4%;
    margin-left: 1%;
    padding-top: 0%;
    position: inherit;
}

#cabecera .menu ul {
    margin-left: 12%;
}

#cabecera .menu li {
    list-style: none;
    display: inline-block;

}

#cabecera .menu li a {
    text-decoration: none;
    color: #999;
    font-family: sans-serif;
    letter-spacing: 6px;
    padding: 8px 19px;
    font-size: 1em;
    line-height: 0.5%;

}

#cabecera .menu ul li a:hover {
    color: #fff;

}

#vacio {
    display: block;
    margin-top: 200px;
    margin-bottom: 400px;
    width: 100%;
    height: 0px;
    background-color: #000;
}

#contenedortransparencia {}

#cabecera .contenedortransparencia img {
    width: 16%;
    margin-left: 44%;
    padding-top: 16%;
    position: inherit;
}


/*************************/
/* CUERPO ****************/

#cuerpo .intro {
    display: block;
    width: 100%;
    background-color: #fff;
    overflow: hidden;
    box-shadow: 7px 10px 18px #888888;
}

#cuerpo .intro .bb-calendar-widget {
    font-family: "Muli", "Helvetica Neue", "HelveticaNeue", Helvetica, Arial, sans-serif;
    display: table;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.1);
    border-radius: 3px;
    border-spacing: 3px;
    font-size: 15px;
    text-align: left;
    max-width: 960px;
    margin: auto;
    margin-top: 4%;
}

#cuerpo .reserva {
    background: url(../img/salon.jpg);
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden;
    display: block;
}

#cuerpo .reserva h1 {
    font-family: sans-serif;
    color: #000;
    font-size: 3em;
    margin: auto;
    margin-top: 0%;
    margin-bottom: 0%;
    letter-spacing: 14px;
    background: linear-gradient(90deg, #fff, #fff);
    opacity: .60;
    display: block;
    float: left;
    width: 100%;
    text-align: center;
}

#cuerpo #habitaciones p {
    font-family: sans-serif;
    color: #000;
    font-size: 3em;
    margin: auto;
    margin-top: 75.8%;
    margin-bottom: 0%;
    letter-spacing: 14px;
    background: linear-gradient(90deg, #fff, #fff);
    opacity: .60;
    display: block;
    float: left;
    width: 100%;
    text-align: center;
}

#cuerpo .intro h1 {
    font-family: sans-serif;
    color: #777;
    font-size: 2em;
    margin: auto;
    text-align: center;
    margin-top: 2%;
}

#cuerpo .intro h2 {
    font-family: sans-serif;
    color: #777;
    font-size: 2em;
    margin: auto;
    margin-left: 42%;
}

#cuerpo .intro p {
    display: block;
    width: 70%;
    margin: auto;
    overflow: hidden;
    float: left;
    line-height: 1.8;
    font-family: sans-serif;
    color: #777;
    text-align: justify;
    margin-left: 15%;
    margin-top: 2%;
    margin-bottom: 2%;
    font-size: 1.5em;
}

#cuerpo .intro .bloque1 {
    display: block;
    width: 50%;
    background-color: #fff;
    float: left;
}

#cuerpo .intro .bloque1 h3 {
    font-family: sans-serif;
    color: #777;
    font-size: 4em;
    margin: auto;
    margin-left: 40%;
    margin-top: 4%;
    margin-bottom: 4%;
    letter-spacing: 14px;
}

#cuerpo .intro .bloque1 p {
    width: 58%;
    padding-bottom: 3%;
    text-align: justify;
    margin-left: 30%;
    line-height: 1.8;
    color: #777;
    font-family: sans-serif;
}

#cuerpo .intro .bloque1 img {
    width: 40%;
    margin-left: 39%;
    margin-top: 6%;
    margin-bottom: 7%;
    box-shadow: 7px 10px 18px #888888;
    cursor: pointer;
}

#cuerpo .intro .bloque2 {
    display: block;
    width: 50%;
    background-color: #fff;
    float: right;
    box-shadow: 7px 10px 18px #888888;
    padding-bottom: 31.4%;
}

#cuerpo .intro .bloque2 img {
    width: 35%;
    margin-left: 4%;
    margin-top: 19%;
    box-shadow: 7px 10px 18px #888888;
    cursor: pointer;
}

#cuerpo .reserva .bloque1 {
    display: block;
    width: 50%;
    background-color: #fff;
    float: left;
    box-shadow: 7px 10px 18px #888888;
    padding-bottom: 4%;
    height: 97%;
}

#cuerpo .reserva .bloque2 {
    display: block;
    width: 50%;
    background-color: #fff;
    float: right;
    height: 97%;
    box-shadow: 7px 10px 18px #888888;
    padding-bottom: 5.5%;
}

#cuerpo .reserva .bloque1 img {
    width: 42%;
    margin-left: 4%;
    margin-top: 19%;
    box-shadow: 7px 10px 18px #888888;
    cursor: pointer;
}

#cuerpo .reserva .bloque2 h3 {
    font-family: sans-serif;
    color: #777;
    font-size: 3.1em;
    margin: auto;
    margin-left: 13%;
    margin-top: 4%;
    margin-bottom: 4%;
    letter-spacing: 14px;
}
#cuerpo .contenido{
    background: #fff;
    display: block;
    width: 100%;
    height: 110vw;
    overflow: hidden;
}
#cuerpo .reserva .bloque2 p {
    width: 58%;
    padding-bottom: 3%;
    text-align: justify;
    margin-left: 11%;
    line-height: 1.8;
    color: #777;
    font-family: sans-serif;
    font-size: 1.5em;
}

#cuerpo .reserva .bloque2 img {
    width: 46.5%;
    margin-left: 14%;
    padding-top: 2%;
    padding-bottom: 4%;
}

#cuerpo .casa h1 {
    font-family: sans-serif;
    color: #000;
    font-size: 3em;
    margin: auto;
    margin-top: 0%;
    margin-bottom: 0%;
    letter-spacing: 14px;
    background: linear-gradient(90deg, #fff, #fff);
    opacity: .60;
    display: block;
    float: left;
    width: 100%;
    text-align: center;
}

#cuerpo #servicios p {
    font-family: sans-serif;
    color: #000;
    font-size: 3em;
    margin: auto;
    margin-top: 76.4%;
    margin-bottom: 0%;
    letter-spacing: 14px;
    background: linear-gradient(90deg, #fff, #fff);
    opacity: .60;
    display: block;
    float: left;
    width: 100%;
    text-align: center;
}

#cuerpo .habitaciones {
    background: url(../img/room5.jpg);
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden;
    display: block;
}



#cuerpo .resenas {
    background: url(../img/patio1.jpg);
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden;
    display: block;
    height: 109vw;
}

#cuerpo .contacto {
    background: url(../img/room6.jpg);
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden;
    display: block;
    height: 70vw;
}

#cuerpo .casa .bloque1 {
    display: block;
    width: 50%;
    background-color: #fff;
    float: left;
    height: 60vw;
    box-shadow: 7px 10px 18px #888888;
}

#cuerpo .casa .bloque1 h1 {
    font-family: sans-serif;
    color: #000;
    font-size: 3em;
    margin: auto;
    margin-left: 5%;
    margin-top: 4%;
    margin-bottom: 4%;
    letter-spacing: 14px;
}

#cuerpo .casa .bloque2 {
    display: block;
    width: 50%;
    background-color: #fff;
    float: right;
    height: 60vw;
    box-shadow: 7px 10px 18px #888888;
}

#cuerpo .habitaciones .bloque2 {
    display: block;
    width: 50%;
    background-color: #fff;
    float: right;
    height: 60vw;
    margin-top: 50%;

}

#cuerpo .casa .bloque2 img {
    width: 75%;
    margin-top: 10%;
    margin-left: 3%;

}

#cuerpo .servicios .bloque1 {
    display: block;
    width: 50%;
    background-color: #fff;
    float: left;
    height: 60vw;
    margin-top: 50%;

}

#cuerpo .casa {
    display: block;
    background: url(../img/terraza1.jpg);
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden;
    height: 140vw; 
}

#cuerpo .casa .bloque1 p {
    font-family: sans-serif;
    color: #777;
    font-size: 1.5em;
    margin: auto;
    margin-left: 20%;
    margin-top: 3%;
    margin-bottom: 2%;
    letter-spacing: 5px;
}

#cuerpo .casa .bloque1 img {
    margin-left: 20%;
    width: 6%;
}

#cuerpo .habitaciones .bloque1 {
    display: block;
    width: 100%;
    background-color: #fff;
    margin-top: 50%;
    padding-bottom: 5%;
    overflow: hidden;
    height: auto;
}

#cuerpo .habitaciones .bloque1 #centro1 {
    display: block;
    width: 22%;
    background-color: lightgray;
    float: left;
    margin-top: 5%;
    margin-left: 10%;
    background-size: cover;
    margin-right: 1%;
    overflow: hidden;
}
#cuerpo .habitaciones .bloque1 #centro2 {
    overflow: hidden;
    float: left;
    width: 59%;
    display: block;
}
#cuerpo .habitaciones .bloque1 #centro2 img {
    display: block;
    width: 40%;
    margin-top: 9%;
    cursor: pointer;
}

#cuerpo .habitaciones .bloque1 #centro2 .foto1 {
    display: block;
    width: 30%;
    float: left;
    margin-top: 1%;
}

#cuerpo .habitaciones .bloque1 #centro2 .foto2 {
    display: block;
    width: 30%;
    float: left;
    margin-top: 1%;
    margin-left: 1%;
}

#cuerpo .habitaciones .bloque1 #centro2 p {
    color: #777;
    font-family: sans-serif;
    font-size: 6em;
    padding-left: 8%;
    margin-bottom: 1%;
}

#cuerpo .habitaciones .bloque1 #centro2 span {
    color: #fff;
    font-family: sans-serif;
    font-size: 3em;
    text-align: center;
    display: block;
    padding: 5.5% 0 7.13%;
}

#cuerpo .habitaciones .bloque1 #centro1 p {
    color: #777;
    font-family: sans-serif;
    font-size: 4em;
    padding-left: 6%;
    margin-bottom: 1%;
    text-align: left;

}

#cuerpo .habitaciones .bloque1 #centro1 span {
    color: #777;
    font-family: sans-serif;
    font-size: 1.3em;
    display: block;
    padding: 5.5% 0 7.13%;
    text-align: left;
    padding-left: 7%;
}

#cuerpo .servicios .bloque2 {
    display: block;
    width: 100%;
    background-color: #fff;
    float: right;
    height: 60vw;
    margin-top: 50%;

}

#cuerpo .resenas .bloque1 {
    display: block;
    width: 50%;
    background-color: #fff;
    float: left;
    height: 60vw;
    margin-top: 50%;

}

#cuerpo .resenas .bloque2 {
    display: block;
    width: 50%;
    background-color: #fff;
    float: right;
    height: 60vw;
    margin-top: 50%;

}

#cuerpo .contacto .bloque1 {
    display: block;
    width: 50%;
    background-color: #fff;
    float: left;
    height: 800px;
    margin-top: 50%;

}

#cuerpo .contacto .bloque2 {
    display: block;
    width: 50%;
    background-color: #fff;
    float: right;
    height: 800px;
    margin-top: 50%;

}
#cuerpo .resenas .bloque2 img{
    width: 76%;
    margin-top: 22%;
}
/*************************/
/* PIE ******************/
#pie {
    display: block;
    width: 100%;
    background-color: #fff;
    overflow: hidden;
    height: 1000px;
    padding-top: 7%;
    padding-left: 25%;
}
#pie .form{
     float:left;
       width:35%;
}
#pie .form label{
    font-weight: 700;
    color: #888;
    text-align: left;
    display: block;
    vertical-align: top;
    font-size: 0.9em;
    font-family: Merriweather,Georgia,serif;
    display: block;
    padding-bottom: 0.5em;
}
#pie .form input{
    line-height: 1.15;
    border: 1px solid;
    border-color: #ccc;
    color: #888;
    font-weight: 400;
    display: block;
    width: 90%;
    padding: 1em 0 1em 0.5em;
    margin-bottom: 2em;
}
#pie .form .form-submit button{
    border: 1px solid lightsteelblue;
    background-color: lightsteelblue;
    color: #000;
    font-weight: 300;
    font-size: 1em;
    display: block;
    line-height: 1.375;
    font-family: Josefix,Arial,sans-serif;
    width: 50%;
    padding: 1em 0 1em 0;
    margin-top: 2em;
    cursor: pointer;
}
#pie .form textarea{
    border-color: #ccc;
    color: #888;
    font-weight: 400;
    display: block;
    line-height: 1.75;
    padding: 1em 0 1em 0;
    width: 90%;
}
#pie .mapa {
    width: 70%;
    margin: auto;
}
#pie .direccion h1{
    color: #777;
    font-family: sans-serif;
    font-size: 1.3em;
}
#pie .direccion p{
     color: #777;
    font-family: sans-serif;
    font-size: 1.3em;
}
#pie .direccion span{
     color: #777;
    font-family: sans-serif;
    font-size: 1.3em;
    font-weight: 400;
}