/* -- ESTILOS GENERALES CSS WEB -- */
*{margin: 0em; padding: 0em; box-sizing: border-box;}
body{font-family: Arial, Helvetica, sans-serif; font-size: 16px;}
.contenedorHome{margin: auto; width: 100%;}
.container{width: 100%; height: 100%;}
.contenedor{margin: auto; width: 71%; }
.home{width: 100%;}


/* -- ESTILOS DEL HEADER MENU  SLIDE -- */

header{width: 100%; padding: 1em 3em; background: #000000 url("imagenes/header-bg.jpg"); background-size: cover;}
header .logo{display: flex;}
header .logo img{padding-bottom: 1em;}
header .logo .logo-text{padding: 1.2em 0.7em;}
header .logo .logo-text h1{color: #ffffff; font-weight: 100;}
header .logo .logo-text span{font-size: 12px; color: #ffffff; font-family: cursive;}
header .menu a{color: #ffffff; text-decoration:none; font-size: 11px; padding: 15px 2em; border-radius: 3px; letter-spacing: 1px;/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#3f4c6b+0,3f4c6b+100;Blue+Grey+Flat */ background: rgb(63,76,107); /* Old browsers */background: -moz-linear-gradient(top,  rgba(63,76,107,1) 0%, rgba(63,76,107,1) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top,  rgba(63,76,107,1) 0%,rgba(63,76,107,1) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom,  rgba(63,76,107,1) 0%,rgba(63,76,107,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3f4c6b', endColorstr='#3f4c6b',GradientType=0 ); /* IE6-9 */}
header .menu a:hover{/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#3f4c6b+0,6374a5+100 */ background: rgb(63,76,107); /* Old browsers */ background: -moz-linear-gradient(top,  rgba(63,76,107,1) 0%, rgba(99,116,165,1) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top,  rgba(63,76,107,1) 0%,rgba(99,116,165,1) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom,  rgba(63,76,107,1) 0%,rgba(99,116,165,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3f4c6b', endColorstr='#6374a5',GradientType=0 ); /* IE6-9 */}


/* -- ESTILOS DE SECTION DE CONTENIDO -- */

.main{width: 100%; padding: 1em; /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#feffe8+0,d6dbbf+100;Wax+3D+%231 */ background: rgb(254,255,232); /* Old browsers */ background: -moz-linear-gradient(top,  rgba(254,255,232,1) 0%, rgba(214,219,191,1) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top,  rgba(254,255,232,1) 0%,rgba(214,219,191,1) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom,  rgba(254,255,232,1) 0%,rgba(214,219,191,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#feffe8', endColorstr='#d6dbbf',GradientType=0 ); /* IE6-9 */}
.main article{width: 93%; padding: 0.7em; background: #ffffff; margin: auto;}
.main article .thumb img{width: 100%;}
.bienvenidos{width: 100%; padding: 2em; margin:auto;}
.bienvenidos h2{color: red; font-size: 2.5em; margin-bottom: 1em; text-align: center;}
.bienvenidos h3{color: red; font-size: 1.5em; margin-bottom: 1em; text-align: center;}
.bienvenidos .parrafo{margin-bottom: 2em; display: flex; justify-content: space-evenly;}
.bienvenidos .parrafo .parrafo-uno{width: 46%;}
.bienvenidos .parrafo .parrafo-dos{width: 46%;}
.bienvenidos .parrafo p{margin-bottom: 10px; font-size: 13px; text-align: justify;}
.bienvenidos .galeria img{margin-bottom: .6em; margin-right: 5px; border-radius: 3px;}
.bienvenidos .galeria img:hover{ opacity: 0.8;}
/* -- ESTILOS TARIFAS SECTION -- */
.bienvenidos .tarifas{display: flex; justify-content: space-evenly; margin-bottom: 1em;} 
.bienvenidos .tarifas .tarifas-corporativas{width:30%; border: 4px solid#839acf; padding: 1em; text-align: center;}
.bienvenidos .tarifas .tarifas-temporadas{width: 64%; font-size: 14px;}
.bienvenidos .tarifas .tarifas-corporativas .texto-tarifas{font-size: 21px; color: steelblue;}
.bienvenidos .tarifas .tarifas-corporativas p{font-size: 13px; text-align: justify; margin-bottom: 2em;}
.bienvenidos .tarifas .tarifas-corporativas h4{font-size: 14px; margin-bottom: 1em;}
.bienvenidos .tarifas .tarifas-corporativas .costo{font-size: 20px;}
.bienvenidos .tarifas .tarifas-corporativas .habitacion{font-size: 13px;}
.bienvenidos .tarifas .tarifas-corporativas .incluye{font-size: 12px; text-align: center;}
.bienvenidos .tarifas .tarifas-temporadas .temporada-baja{margin-bottom: 1em;}
.bienvenidos .tarifas .tarifas-temporadas .temporada-baja h4{margin-bottom: 1em;}
.bienvenidos .tarifas .tarifas-temporadas .temporada-baja p{text-align: justify;}
.bienvenidos .tarifas .tarifas-temporadas .texto-baja{display: flex; justify-content: space-between; margin-bottom: 3em;}
.bienvenidos .reservaciones{width: 95%; margin:auto;}
.bienvenidos .deposito{margin-bottom: 2em; text-align: center;}
.bienvenidos .reservaciones p{font-size: 14px; margin-bottom: 1em; text-align: justify;}
.bienvenidos .reservaciones .negrita{font-weight: 600;}
.bienvenidos .reservaciones .rojo{ text-align: center; color: rgb(212, 10, 10); font-weight: bold;}
.bienvenidos .contacto{display: flex; justify-content: space-evenly;}
.bienvenidos .contacto .direccion{width: 30%;}
.bienvenidos .contacto .mapa{ width: 30%;}
.bienvenidos .contacto .formulario{ width: 30%;}
.bienvenidos .contacto .direccion p{font-size: 14px;}
.bienvenidos .contacto .mapa img{width: 100%;}
.bienvenidos .contacto .mapa form{width: 100%;}
.bienvenidos .contacto .formulario .input{border: 2px solid #e4e1e1; margin-bottom: 1em; padding: 0.2em 0.5em; border-radius: 3px;}
.bienvenidos .contacto .formulario .boton{color: #ffffff; background: steelblue; padding: 0.5em 1em; border: none; border-radius: 3px;}
.bienvenidos .servicios{display: flex; justify-content: space-evenly; margin-bottom: 1em;}
.bienvenidos .servicios .menu-servicios{ width: 30%; padding: 1em; /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#feffe8+0,d6dbbf+100;Wax+3D+%231 */ background: rgb(254,255,232); /* Old browsers */ background: -moz-linear-gradient(top,  rgb(248, 250, 211) 0%, rgba(214,219,191,1) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top,  rgba(254,255,232,1) 0%,rgba(214,219,191,1) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom,  rgba(254,255,232,1) 0%,rgba(214,219,191,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#feffe8', endColorstr='#d6dbbf',GradientType=0 ); /* IE6-9 */}

.bienvenidos .servicios .slideshow{width: 58%; height: 300px; overflow: hidden; border: 5px solid rgb(233, 235, 208); border-radius: 3px;}
.bienvenidos .servicios .slideshow ul{display: flex; animation: cambio 20s infinite alternate linear; width: 1000%; height: 100%;}
.bienvenidos .servicios .slideshow .alberca{display: flex; animation: cambio 20s infinite alternate linear; width: 400%;}
.bienvenidos .servicios .slideshow li{width: 100%; list-style: none;}
.bienvenidos .servicios .slideshow img{width: 100%; height: 100%;}
@keyframes cambio{0%{margin-left: 0;}20%{margin-left: 0;}25%{margin-left: -100%;}45%{margin-left: -100%;}50%{margin-left: -200%;}70%{margin-left: -200%;}75%{margin-left: -300%;}100%{margin-left: -300%;}}

.bienvenidos .servicios .menu-servicios a{display: block; margin-bottom: 1em; font-size: 13px; text-decoration: none; color: rgb(73, 142, 199); font-weight: bold;}
.bienvenidos .servicios .menu-servicios p{font-size: 11px; color: #666; text-align: justify;}

/* -- ESTILOS DEL FOOTER COPYRIGHT -- */

footer{width: 90%; margin: auto; padding: 0em 0;}
footer hr{background: #8da5dd; border-radius: 3px; padding: 0.1em 0;
margin-bottom: .5em;}
footer .copyright{padding: 1.5em; background-color: #f5f4f4; font-size: 11px;
color: #5e5e5e;}
footer .copyright a{text-decoration: underline; color: #5e5e5e;}
footer .copyright a:hover{text-decoration: none;}


/* MEDIA QUERIES MODO RESPONSIVE */

@media screen and (max-width: 945px) {
    .contenedor{
        width: 100%;
    }
    header .menu a{ 
        padding: 0.4em 0.7em;
    }
    .bienvenidos .contacto{
        flex-direction: column;
        align-items: center;
    }
    .bienvenidos .contacto .direccion{
        width: 100%;
        text-align: center;
        margin-bottom: 1em;
    }
    .bienvenidos .contacto .mapa{ 
        width: 100%;
        text-align: center;
        margin-bottom: 1em;
    }
    .bienvenidos .contacto .mapa img{
        width: 90%;
    }
    .bienvenidos .contacto .formulario{
        width: 90%;
    }
    .bienvenidos .contacto .formulario .input{
        width: 100%;
    }
    .bienvenidos .tarifas{
        flex-direction: column;
        align-items: center;
    }
    .bienvenidos .tarifas .tarifas-temporadas{
        flex-direction: column;
    }
    .bienvenidos .tarifas .tarifas-corporativas{
        width: 100%;
        margin-bottom: 1.5em;
    }
    .bienvenidos .tarifas .tarifas-temporadas{
        width: 100%;
        margin-bottom: 1.5em;
    }
    .bienvenidos .servicios{
        display: block;
    }
    .bienvenidos .servicios .menu-servicios{
        width: 100%;
        margin-bottom: 1em;
    }
    .bienvenidos .servicios .slideshow{
        width: 100%;
        border: none;
    }
    .bienvenidos .servicios .slideshow img{
        width: 100%; height: 80%;
    }
}
@media screen and (max-width: 768px){
    .bienvenidos .servicios .slideshow{
        text-align: center;
        width: 100%;
    }
    .bienvenidos .servicios .slideshow img{
        width: 65%;
    }
}
@media screen and (max-width: 742px) {
    header .menu a{ 
        padding: 0.5em 0.3em;
    }
}
@media screen and (max-width: 689px) {
    header .menu a{
        font-size: 8px;
        padding: 0.6em 0.3em;
    }
    .bienvenidos .galeria img{width: 45%;}
}
@media screen and (max-width: 556px){
    header .menu a{
        font-size: 6px;
        padding: 1em 0.3em;
    }
    header .logo img{
        width: 80%;
    }
    header .logo .logo-text{
        padding: 1em 0.1em;
    }
    header .logo .logo-text h1{
        font-size: 18px;
    }
    header .logo .logo-text span{
        font-size: 10.5px;
    }
    .bienvenidos h2{
        font-size: 26px;
    }
    .bienvenidos h3{
        font-size: 20px;
    }
    .bienvenidos .parrafo{
        flex-direction: column;
        align-items: center;
    } 
    .bienvenidos .parrafo .parrafo-uno{
        width: 100%;
    }
    .bienvenidos .parrafo .parrafo-dos{
        width: 100%;
    }
    .bienvenidos .servicios .slideshow{
        text-align: center;
        width: 100%;
    }
    .bienvenidos .servicios .slideshow img{
        width: 100%;
    }
}
@media screen and (max-width:334px){
    header .menu a{
        font-size: 5px;
        padding: 1.3em 0.3em;
    }
}
@media screen and (max-width: 304px){
    header .menu a{
        font-size: 4px;
        padding: 1.5em 0.3em;
    }
}