/* Importar fuente de Google Fonts ********************************************/
@import 'https://fonts.googleapis.com/css?family=Open+Sans:400,700|Raleway:600,800';



/* DEFINICIONES GENERICAS *****************************************************/
* { box-sizing: border-box; margin: 0; font-family: 'Open Sans', sans-serif; }
html { width: 100%; height: 100%; }
body {
    display: flex;
    min-height: 100%;
    flex-direction: column;
    background: #fff url(../images/body-bkg.png) top left repeat;
    color: #333;
}
header, footer { flex: none; }
h1, h2, h3, h4, h5 { font-family: 'Open Sans', sans-serif; }

/* ENCABEZADO *****************************************************************/
header {
    background: url(../images/header-bkg.png) top center no-repeat;
    background-size: cover;
    width: 100%;
    height: 140px;
}
div.interior { width: 98%; max-width: 1280px; height: auto; margin: 0 auto; }
img.logoYrras { width: 130px; margin: 8px auto; display: block; }
h2.slogan {
    text-align: center;
    font-size: 18px;
    color: #ac9d93;
    text-shadow: 0px 1px 0px rgba(255,255,255,.3), 0px -1px 0px rgba(0,0,0,.7);
}
nav.principal { width: 100%; overflow: hidden; }
nav.principal label {
    padding: 6px;
    font-size: 26px;
    color: #ac9d93;
    position: absolute;
    top: 6px;
    right: 6px;
}
nav.principal label:hover {
    background-color: rgba(0,0,0,0.1);
    cursor: pointer;
    color: #6c5d53;
}
/* Boton de menu en moviles ************/
#btnMenu { display: none;}
#btnMenu:checked ~ ul.menu { margin-left: 0; }
/* Menu principal ***********************/
ul.menu {
    padding: 12px;
    list-style: none;
    line-height: 1.7em;
    display: flex;
    flex-direction: column;
    margin-left: 100%;
    transition: all 0.3s linear;
    background: #fff;
    position: relative;
    z-index: 1500;
}
ul.menu > li > a { width: 100%; display: block; }
ul.menu > li > a:hover { background-color: rgba(199,153,0,0.4); }
ul.menu a { text-decoration: none; color: #6c5d53; }
/* Iconos de Social media y correo ******/
li.linkSociales > ul { padding: 0; list-style: none; }
li.linkSociales [class^="icon-"]:before {
        color: #fff;
        background: #ac9d93;
        padding: 6px;
        border-radius: 50%;
        font-size: small;
    }
li.linkSociales ul li:not(:first-child){
    display: block;
    width: auto;
    float: left;
    margin: 6px 0;
    padding-right: 6px;
}

/* PIE DE PAGINA *************************************************/
footer {
    background: url(../images/footer-bkg.png) top center no-repeat;
    background-size: cover;
    width: 100%;
    height: 140px;
    color: #ac9d93;
    font-size: small;
}
ul.interior {
    width: 98%;
    max-width: 1280px;
    height: 40px;
    margin: 80px auto 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
}
ul.interior li { margin: 0; padding: 0; }

ul.interior li a, ul.interior li a:visited { text-decoration: none; color: #ac9d93; }

/* CONTENIDO ******************************************************************/
main { width: 100%; flex: 1 0 auto; }
article.contenido {
    width: 98%;
    max-width: 1280px;
    height: auto;
    margin: 6px auto 16px;
    overflow: auto;
}
div.contenedorSliders {
    width: 100%;
    height: auto;
    overflow: auto;
    position: relative;
    margin: 0 auto 26px;
    text-align: center;
}
div.cycle-slideshow { width: 100%; }
div.cycle-slideshow a { width: 100%; font-size: 20px; line-height: 1.7em; }
div.cycle-slideshow a, div.cycle-slideshow a:visited { color: #333; text-decoration: none; }
div.cycle-slideshow em { font-size: 115%; font-weight: bold; font-style: normal; }
div.cycle-slideshow img { width: 100%; box-shadow: 0px 6px 6px rgba(0, 0, 0, 0.35); margin-bottom: 18px; }
#pieFoto { font-family: 'Raleway', sans-serif; font-size: 20px; }
#pieFoto em { font-size: 115%; font-weight: bold; font-style: normal; }
#flechaIzquierda, #flechaDerecha {
    color: rgba(255,255,255,0.6);
    background: rgba(0,0,0,0.75);
    border-radius: 50%;
    width: 30px;
    height: 30px;
    position: absolute;
    top: 50%;
    z-index: 1000;
    cursor: pointer;
}
body:not(.index) #flechaIzquierda, body:not(.index) #flechaDerecha { top: 50%; }
#flechaIzquierda:before, #flechaDerecha:before { text-align: center; line-height: 1.8em; }
#flechaIzquierda { left: 8px; }
#flechaDerecha { right: 8px; }

/* Links a formularios **************/
a.cotizador {
    display: block;
    width: auto;
    min-width: 120px;
    float: right;
    padding: 4px 12px;
    border-radius: 6px;
    color: #fff !important;
    background: rgb(199,153,0);
    text-decoration: none;
    font-size: 20px;
    font-weight: 700;
}
a.cotizador:visited { color: #fff !important; }

/* Contenido del articulo principal ************************/
.contenido { font-size: 14px; }
.contenido > p, .contenido > ul, .contenido > ol, .contenido > blockquote, .contenido > h1 {
    line-height: 1.7em;
    max-width: 92%;
    margin: 6px auto;
}
.contenido h1 { font-size: 30px; text-align: center; color: #6c5d53; }
.contenido a, .contenido a:visited { color: rgb(199,153,0); }

/* Fotos en los artículos ******************/
.galeria {
    width: 100%;
    list-style: none;
    margin-top: 12px;
    padding: 0;
    text-align: center;
    font-size: 13px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-content: center;
    align-items: flex-start;
}
ul.galeria li { margin: 12px; flex-basis: 80%; }
ul.galeria li img, ul.promociones img, ul.search-results img {
    width: 100%;
    border: 4px solid #fff;
    box-shadow: 0px 8px 8px rgba(0, 0, 0, 0.35);
    margin-bottom: 6px;
}

/* Promociones ****************/
ul.promociones, ul.search-results {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    text-align: center;
    list-style: none;
    font-size: small;
    line-height: 1.3em;
    margin: 16px auto;
}
ul.promociones > li, li.search-entry { flex-basis: 70%; margin: 0 auto 8px; }
.search-header {display: none;}
#datosPromo {
    display: flex;
    flex-flow: column;
    width: 100;
    justify-content: space-between;
}
#datosPromo img { max-width: 100%; margin-bottom: 12px; }
#datosPromo > div > h2 {
    margin-bottom: 12px;
    text-align: center;
    color: #ac9d93;
    text-shadow: 0px 1px 0px rgba(255,255,255,.3), 0px -1px 0px rgba(0,0,0,.7);
}
#datosPromo > div > h3 { text-align: center; color: #6c5d53; }
#datosPromo h1, #datosPromo h2, #datosPromo h3 {
    margin: 0 auto 12px;
    line-height: 1.5em;
}
#datosPromo h2 { font-size: 16px; }
#datosPromo h3 { font-size: 14px; }
#datosPromo p { text-align: justify; line-height: 1.5em; margin-bottom: 12px; }

/* Formularios ***************************************************/
fieldset{ border: none; }
input, textarea {
    border: 1px dotted rgb(199,153,0);
    box-shadow: 0px 5px 5px rgba(0,0,0,0.35);
    padding: 4px;
}
input[type="radio"], input[type="checkbox"] {
	border: none;
	background: none;
	box-shadow: none;
}
input[type="submit"] {
    background: rgb(199,153,0);
    color: #fff;
    padding: 6px 12px;
    border-radius: 6px;
}
.aceptarTerminos { display: flex; font-size: small; }
#btnTerm { margin: 8px; }

/*Ventana modal Contaco **************************/
.modal {
    width: 100%;
    height: 100vh;
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.9);
    z-index: 2000;
    display: flex;
    visibility: hidden;
    opacity: 0;
}
.modal:target {  visibility: visible; opacity: 1; transition: all 0.5s ease-in; }
#modalForm {
    width: 320px;
    height: auto;
    background: #fff url(../images/body-bkg.png) top left repeat;
    padding: 16px;
    margin: auto;
    border-radius: 16px;
}
#modalForm input[type=text], #modalForm input[type=email], #modalForm textarea {
    width: 100%;
}
#modalForm p { margin: 12px 0; }
#cerrarModal { display: none; }
#cerrarBtn {
    width: 26px;
    height: 26px;
    text-align: center;
    font-size: 16px;
    line-height: 26px;
    border-radius: 6px;
    color: #fff;
    background: rgb(199,153,0);
    right: 16px;
    cursor: pointer;
    position: fixed;
    top: 12px;
    right: 12px;
}

/*Formulario presupuesto */
#cotizador {
	width: 100%;
	max-width: 490px;
	margin: 12px auto;
	display: flex;
	flex-direction: column;
	font-size: 11px;
}
#cotizador * { margin-bottom: 4px; }
#cotizador > div {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	width: 100%;
    margin: 6px auto 0;
}
input.fechasInOut { max-width: 32%;}
input[name="PresupuestoPersona"] { flex-basis: auto; margin-left: 8px; }
#cotizador > div > div { margin-bottom: 0; }
#cotizador legend { width: 100%; font-weight: 700; }
.columnas > div { flex-basis: 46%; width: 46%; display: flex; flex-flow: column; }
.columnas > div input { width: 100%; }
.columnas > div > p {
	display: flex;
	justify-content: space-between;
	align-content: flex-start;
	align-items: flex-start;
}
.columnas select { max-width: 10em; }
/*p.columnaInt { flex-flow: column; }
p.columnaInt span { width: 100%; display: flex; align-items: baseline; }
p.columnaInt span * { flex-grow: 1; }
p.columnaInt span input { flex-basis: 40%; margin-left: 8px; }*/
.columnas > div > p > * { flex-grow: 1; }
#numParticipantes { display: flex; }
#numParticipantes input { max-width: 5em; }
#infoAdicionalGrupos p {
    width: 100%;
    display: flex;
    justify-content: space-between;
}
.fechasEvento { margin-left: 8px; }
#infoTransportacion span {max-width: 32%; }
#infoTransportacion span select { margin-left: 4px; }
#infoAdicionalGrupos p * { flex-grow: 1; }
#infoAdicionalGrupos p *:last-child { margin-right: 0; }
#datosPareja div:first-child { flex-basis: 65%; }
#datosPareja div:nth-child(2) { flex-basis: 32%; }
#datosPareja div input { width: 100%; }
#datosPareja > input{ width: 32%; }
#datosPareja > input:last-child { align-self: flex-end; }
#Locaciones { flex-basis: 100% !important; flex-direction: row !important; margin: auto; }
#Locaciones p { flex-grow: 1; }
#datosRecepcion > div { display: flex; flex-basis: 49%; flex-direction: column; }
#numeroInvitados { align-items: baseline; }
#numeroInvitados legend { flex-basis: 16%; }
#numeroInvitados p { display: flex; align-items: center; }
#numeroInvitados p input { width: 3em; margin-right: 4px; }
#serviciosComplementarios legend, #serviciosComplementarios p {
	flex-basis: auto;
	width: auto;
	margin: auto;
}
p#serviciosComplementarios { font-size: x-small; margin-top: 4px; }
p#serviciosComplementarios input { width: 3px; margin-right: 3px; }
p#serviciosComplementarios input:last-child { margin-right: 0; }
#fechasInOut p { flex-basis: 48%; display: flex; flex-direction: column; }
#Comentarios { width: 100%; height: 8em; margin: 8px auto 16px; }

/* Formulario promociones ******/
#contactPromo {
    display: flex;
    flex-wrap: wrap;
    width: 80%;
    max-width: 480px;
    margin: auto;
    background: url(../images/trans-bkg.png) top left repeat;
    padding: 16px;
    box-shadow: 0px 8px 8px rgba(0,0,0,0.35);
    margin-bottom: 12px;
    font-size: 12px;
}
#contactPromo > div {
    display: flex;
    flex-flow: column;
    flex-basis: 100%;
}
#datosFechas, #datosHabitacion {
    flex-flow: row !important;
    justify-content: space-between;
    width: 100%;
}
#datosFechas > p {
    flex-basis: 45%;
}
#datosHabitacion > p {
    flex-basis: 30%;
    flex-grow: 1;
    max-width: 30%;
}
#datosHabitacion > p > input {
    width: 100%;
}
#contactPromo input {
    margin-bottom: 6px;
}
#contactPromo input[type="submit"]{
    width: 6em;
    margin: 12px auto;
}

/* MEDIA QUERIES **************************************************************/

/* Tablet *****/
@media screen and  (min-width: 600px) {
    ul.galeria li { flex-basis: 35%; }
    ul.promociones li, li.search-entry { flex-basis: 28%; }
    #datosPromo { flex-flow: row; width: 96%; margin: 24px auto; }
    #datosPromo > div { flex-basis: 65%; flex-grow: 1; margin-right: 24px; }
    #datosPromo aside { flex-basis: 30%; }
    #contactPromo { width: 100%; }
    #contactPromo > div { flex-flow: column !important; }
    #contactPromo > div > p { flex-basis: 100%; max-width: none; }
    #contactPromo input, #contactPromo textarea { max-width: 100%; width: 100%; }
    #contactPromo textarea { height: 6em; }
    #contactPromo p { margin: 0; }
}

/* Desktop *****/
@media only screen and (min-width: 1023px){
    header {
        height: auto;
        overflow: auto;
        padding-bottom: 26px;
        background-position-y: bottom;
    }
    div.interior { display: flex; align-items: flex-start; }
    img.logoYrras {
        width: 140px;
        height: auto;
        margin-right: 26px;
        align-self: flex-end;
    }
    h2.slogan {
        font-size: 24px;
        width: 80%;
        margin-top: 16px;
    }
    nav.principal label {
        display: none;
    }
    ul.menu {
        flex-direction: row;
        flex-grow: 1;
        font-size: 14px;
        font-weight: 700;
        margin-left: 0;
        box-shadow: none;
        background: none;
        padding: 16px 0 0;
    }
    ul.menu > li { margin: auto; flex-grow: 1; }
    ul.menu > li > a { display: inline; }
    ul.menu > li.current.active > a, ul.menu > li > a:hover { background-color: rgba(199,153,0,0.4); }
    ul.menu > li:not(:last-child) a { padding: 16px 6px; }
    .linkSociales ul li { margin-right: 8px; }
    .linkSociales li:not(:first-child){ margin: 8px 8px 0 0; padding-right: 0; }
    .linkSociales li:last-child { font-weight: 400; font-size: small; }
    .linkSociales { align-self: flex-end; }
    .linkSociales ul {
        display: flex;
        flex-wrap: wrap;
        align-content: space-between;
        width: 168px;
        float: right;
    }
    .linkSociales li em { font-style: normal; }
    #datosPromo > div { flex-basis: 75%; }
    #datosPromo aside { flex-basis: 22%; }

}