body{
    font-size: 18px;
}

section{
    padding-top:50px;
    padding-bottom:50px;
}

.mayusculas{
    text-transform: uppercase;
}
/*Cabecera*/

b,strong{
    font-weight: bold;
}

#cabecera{
    height: 60px;
    box-shadow: 0 0 3px #000;
    position: relative;
    z-index: 89;
}

#logo,#logo img{
    height: 50px;
}

#ajuste{
    width: 40px;
    height: 60px;
}

#foto_cabecera{
    background-image: url("./images/cabecera.jpg");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 35vw;
}

.fondoAzul{
    background-color: #1d70b6;
    color:white;
}

.fondoBlanco{
    background-color: #ffffff;
    color:#1d70b6;
}

h2{
    text-align: left;
    font-size: 24px;
    margin-bottom: 20px;
    font-weight: bold;
}

h3{
    font-size: 24px;
    margin-bottom: 20px;    
    font-weight: bold;
}

p{
    text-align:left;
    margin-bottom: 15px;
    line-height: 25px;
}

ul{
    margin-bottom: 15px;
    padding-left:10px;
}

ul li{
    margin-bottom: 15px;
}


#normativa i{
    font-size:80px;
}

#normativa p{
    margin: 40px 0px;
}

#normativa button{
    height: auto;
    background-color: #1d70b6;
    color:white;
    border:0;
    font-size:24px;
    padding: 10px 30px;
}


#normalidad h2{
    text-align: center;
    text-transform: uppercase;
    margin: 20px 0px;
}

#hostelero,#cliente{
    border:2px solid white;
    padding: 20px 10px;
    line-height: 28px;
    margin-top: 50px;
}

#hostelero .ventajas, #cliente .ventajas{
    margin: 10px 0px;
}


#hostelero .ventajas i,#cliente .ventajas i{
    margin-right: 10px;
}

#hostelero .precio,#cliente .precio{
    font-size: 50px;
    text-transform: uppercase;
    margin: 20px 0px;
}

#hostelero button, #cliente button, #detalleHostelero button{
    height: auto;
    color: #1d70b6;
    background-color:white;
    border:0;
    font-size:24px;
    padding: 10px 30px;
}



.pack{
    border:2px solid white;
    padding: 20px 10px;
    line-height: 28px;
    margin-top: 50px;    
}

.pack .precio{
    font-size: 40px;
    font-weight: bold;
    margin-top: 15px;
}


#detalleHostelero h2{
    text-align: center;
    margin: 30px 0 50px 0;
    text-transform: uppercase;
}

#detalleHostelero i{
    font-size:60px;
    margin-right: 20px;
}

#detalleHostelero .ventaja{
    margin-bottom: 50px;
    justify-content: space-between;
}

#detalleHostelero .ventaja h3{
    font-size: 20px;
}

#pegatinas button{
    height: auto;
    color: #1d70b6;
    background-color:white;
    border:0;
    font-size:14px;
    padding: 10px 24px;    
}

#video button{
    height: auto;
    color: #1d70b6;
    background-color:white;
    border:0;
    font-size:20px;
    padding: 10px 30px;    
}

#hostelerosOpciones .ventajas{
    margin: 10px 0px;
    line-height: 27px;
}


#hostelerosOpciones .ventajas i{
    margin-right: 10px;
}


ul#hostelero li{
    margin-bottom: 40px;
    border-left: 2px solid white;
    padding-left: 10px;
}

.icartas{
    color:#1d70b6;
    font-weight: bold;
}

.fondoAzul .icartas{
    color:#fff;
}

ul#ventajas{
    margin-top: 50px;
    margin-bottom: 15px;
    padding-left: 10px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

ul#ventajas li{
    margin-bottom: 50px;
    float: left;
    width: 35%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    text-align: center;
}

ul#ventajas li i{
    font-size: 80px;
    height: 94px;
}


.movil{
    background-image:url("./images/iphone.png");
    width:408px;
    height: 856px;
    margin-bottom: 100px;
}

.movil iframe{
    margin-top: 103px;
    margin-left: 18px;
}

#pie{
    background-color: #000;
    padding: 10px;
    color: #fff;
}



 /*Formularios*/

 .campo,.campo input,.campo select,.campo_select,button{
    height: 40px;
}

.campo,.campo_select{
    margin: 10px 0;
    border: 1px solid #1d70b6;
    border-radius: 3px;
    position: relative;
    overflow: hidden;
}

.campo.obligatorio input{
    padding: 0 40px;
}

.campo input,.campo select,.campo textarea{
    width: 100%;
    font-family: var(--fuente-principal);
    font-size: 16px;
    padding-left: 40px;
}

.campo input,.campo select,.campo textarea{
    border: none;
}

.textarea{
    height: 300px;
}

textarea{
    height: 305px;
    padding: 10px 10px 10px 40px;
}

.campo::before,.campo::after,.campo_select::before,.campo_select::after{
    width: 40px;
    height: 40px;
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    position: absolute;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.campo::before,.campo_select::before{
    color: #1d70b6;
    left: 0;
}

.obligatorio::after{
    content: '\f069';
    font-size: 10px;
    color: var(--blanco);
    background-color: #1d70b6;
    top: -1px;
    right: -1px;
    transform: skewX(-2deg);
    transition: all .25s ease-in-out;
}

.obligatorio.ok::after{
    content: '\f00c';
    font-size: 14px;
    background-color: darkgreen;
}

.obligatorio.error::after{
    content: '\f00d';
    font-size: 14px;
    background-color: darkred;
}

.buscar::before{
    content: '\f002';
    font-size: 26px;
}

.usuario::before{
    content: '\f007';
    font-size: 22px;
}

.clave::before{
    content: '\f084';
    font-size: 22px;
}

.texto::before{
    content: '\f303';
    font-size: 22px;
}

.menu::before{
    content: '\f0c9';
    font-size: 22px;
}

.link::before{
    content: '\f0c1';
    font-size: 22px;
}

.mail::before{
    content: '\f1fa';
    font-size: 22px;
}

.tlf::before{
    content: '\f095';
    font-size: 22px;
}

.asunto::before{
    content: '\f0e0';
    font-size: 22px;
}

.mensaje::before{
    content: '\f27a';
    font-size: 22px;
}

/*Fin Formularios*/

/*Estilos Contacto*/

.contacto_mapa{
    width:100%;
    height: 300px;
    margin-top: -50px;
    margin-bottom: 40px;
}

.contacto_ficha_formulario_out{
    display:flex;
    justify-content: center;
}

.contacto_ficha_formulario{
    width:1200px;
    display: flex;
    justify-content: space-between;
}

.contacto_ficha{
    margin-top: 10px;
}

.contacto_ficha h1{
    font-size:40px;
}

.contacto_ficha i{
    color: #1d70b6;
}

.contacto_formulario{
    border:0;
}

.contacto_formulario button{
    height: auto;
    background-color: #1d70b6;
    color:white;
    border:0;
    font-size:24px;
    padding: 10px 30px;
}

.contacto_mapa{
    width: 100%;
    height: 500px;
    position: relative;
    z-index: -1;
}

.contenido{
    padding: 50px 10px;
}

.contacto_ficha i{
    margin-right: 5px;
}

.contacto_ficha p{
    margin: 20px 0;
}

#proteccion h3{
    font-family: var(--fuente-principal);
    color: #1d70b6;
    text-transform: uppercase;
    text-align: center;
}

#proteccion p,#proteccion .condicion{
    font-family: var(--fuente-secundaria);
    font-size: 14px;
    text-align: justify;
}

#proteccion p{
    padding: 0;
    margin-bottom: 0;
}

#proteccion .condicion{
    margin: 5px 0;
    display: flex;
    align-items: center;
}

#proteccion .condicion:last-child{
    align-items: flex-start;
}

#proteccion .condicion input{
    margin-right: 5px;
}

/*Fin Estilos Contacto*/




@media only screen and (min-width: 1024px){
    body{
        font-size: 20px;
    }

    .centrado{
        width: 1000px;
    }

    ul#ventajas li{
        width: 26%;
    }
}