@font-face{
    font-family: myriad_pro;
	src: url(../fuentes/myriad_pro.ttf)
}

@font-face{
    font-family: bebas_neue;
	src: url(../fuentes/bebas_neue.ttf)
}

@font-face{
    font-family: bahnschrift;
	src: url(../fuentes/bahnschrift.ttf)
}

*{
    box-sizing: border-box;
    margin: 0;    
}

*:focus {outline: none;}

body{overflow-x: hidden; background-color: #fff}

img {display: block; width: 100%;}

h1, h2, h3, h4{
    font-family: bebas_neue;
    font-weight:lighter;
}

a:link, a:visited, a:active{
    text-decoration:none;
}

p{
    font-family: bahnschrift;
    color: #000;
    text-align: justify;
    font-weight: 100;
}

.btn_ver{
    text-decoration: none;
    color: #000;
    font-family: myriad_pro;
    padding: 10px 20px;
    border: 0.09em solid #ba990f;
    border-radius: 2px;
    display: inline-block;
    letter-spacing: 1px;
    font-weight:lighter;
}

.btn_ver:hover{
    background-color: #ba990f;
}

.text_seccion{
    color:#ba990f;
    font-size: 3em;
}

.text_hz{
   color:#ba990f;
   font-size: 2.5em; 
}

.text_habitacion{
   color:#ba990f;
   font-size: 2em;
}

.text_sec_descrip{
   font-size: 1.7em;
}

.contenedor{
    margin: auto;
    width: 100%;
    padding: 0 15px; 
}

.ico_andean{
    max-width: 60px;
}

@media(min-width:1215px){
    .contenedor{
        width: 1200px;
    }
    
}

/*
#menus.change {
    background:  rgba(0, 0, 0, 0.6);
    transition: all ease .6s; 
}
*/

/*
#menus.change .menu_link{
     color: ;  
    transition: all ease .6s;
} 
*/

/*------------ Barra Menu ------------*/

.barra_menu{
    width: 100%;
    /*padding: 6px 0; */
    position: relative; 
}

.conte_menu{
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.logo_desnivel{
    /*max-width: 70px;*/
    background-color: #fff;
    padding: 0 0 5px;
    width: 150px;
    border-radius: 0 0 15px 15px;
}

.logo_desnivel img{
    max-width: 100px;
    margin: 0 auto;
}

.cont_br{
    display: flex; 
}

/*-------------- Iconos --------------*/
.cont_leng_sociales{
    display: flex; 
    align-items:center;
    /*margin-left: ;*/
}

.redes_sociales{
    display: flex;    
}

.redes_sociales [class^="ico-"]{
    text-decoration: none;
    color: #fff;
    line-height: 0;
    font-size: 24px;
    margin-left: 8px;
}

/*----------  Menu - Icono -----------*/  
    .menu-toggle {
        position: relative;        
        width: 26px;
        height: 24px;        
        display: flex;
        align-items: center;
        cursor: pointer;
        margin-left: 8px;
    }
    .menu-toggle-bar {
        width: 100%;
        height: 3px;
        border-radius: 4px;
        position: absolute;
        transition: all 0.3s ease;
        background-color: #fff;
    }
    .menu-toggle-bar--top {
        transform: translate(0, -8px);
    }
    .menu-toggle-bar--bottom {
        transform: translate(0, 8px); 
        width: 60%;
    }
    .nav-open .menu-toggle-bar--top {
        transform: translate(0, 0) rotate(45deg);
    }
    .nav-open .menu-toggle-bar--middle {
        opacity: 0;
    }
    .nav-open .menu-toggle-bar--bottom {
        transform: translate(0, 0) rotate(-45deg);
        width: 100%;
    }

/*--------------Menu Movil--------------*/

.menu{
    position: absolute;
    top: 86px;
    left: -100%;
    width: 100%;
    transition: all 0.4s;
    z-index: 900;
}

.menu-lista{
    list-style: none;
    padding: 0;
    margin: 0;
    background-color: #ad8774;
}

.menu_link{
    display: block;
    padding: 15px 20px;
    color: #fff;
    text-decoration: none;
    font-family: myriad_pro;
    font-size: 0.9em;
    letter-spacing: 2px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.4);
    font-weight: 600;
}

.menu_link:hover{
    background-color: #755e55;
    color: #fff;
}

.mostrar {
    left: 0;  
}

.fixed{
    position: fixed;
    top: 0;
    z-index: 1000; 
}

@media(min-width:1024px){    
    
    .cont_br{
        /*border-bottom: 1px solid #ffffff;*/
        width: 92%;
    }
    
    .menu-toggle{
        display: none;
    }
    
    .menu{
        position: static;
        width: 100%;
        padding-left: 0px;
        margin: auto;  
    }
    
    .menu-lista{
        display: flex;
        background: none;
        justify-content: right;
    }
    
    .menu_link{
       border-bottom: none;        
    }
    
    .menu_link:hover{
        background: none;        
    }  
}

/*-------------- Baner --------------*/
#banner_andean{
    position: relative;
}

.banner_andean{
    position: relative;
}

.banner_andean .cont_baner_andean{
    position: absolute;
    bottom: 10%;
}

.f_banner{
    width:100%;
    height:50vh;
    object-fit: cover;
}

.text_banner{
    color: #ba990f;
    font-weight:lighter;
    font-size: 1.2em;
    /*text-align: center;*/
}

.t_banner{
    width: 250px;
    font-size: 3.5em;
    line-height: 0.9;
    color: #fff;
    margin-bottom: 15px;
}

.btn_reserva{
    text-decoration: none;
    color: #fff;
    font-family: myriad_pro;
    padding: 10px 15px;
    border: 0.09em solid #fff;
    border-radius: 2px;
    display: inline-block;
    letter-spacing: 1px;
    font-weight:lighter;
}

.btn_reserva:hover{
    background-color: #fff;
    color: #000;
}

.bord_img {
    position: absolute;
    bottom: 0;
    width: 100%;
}

.borde_banner{
    max-width: 160px;
    margin-left:auto;
}
/*----------- Conoce Huaraz -----------*/

.conoce_huaraz{
    background-color: #E5E5E5;  
    padding: 40px 0;
}

.col_ch_img{
    display: flex;
    flex-wrap: wrap;
    position: relative;
    margin-bottom: 40px;
}

.cont_text_ch1{
    width: 70%;
}

.cont_text_ch2{
    display: flex;
    flex-direction: row;
    width: 50%;
    justify-content:flex-end;
    align-items: flex-start;    
    margin-top: -30%; 
}

.cont_text_ch2 h2{
    margin-top: auto;
}

.cont_text_ch3{
    width: 50%; 
    margin-top: -20%;
    z-index: 500;
}

.text_vertical{
    writing-mode: vertical-lr;
    transform: rotate(180deg);
    color: #fff;
    font-size: 3em; 
    line-height: 2;
}

.text_transparent {
    writing-mode: vertical-lr;
    transform: rotate(180deg);
    font-size: 5.5em; 
    font-weight:500; 
    color: transparent; 
    -webkit-text-stroke: 0.006em #fff; 
    line-height: 0.3;
}

.text_subt{
    font-size: 1.6em;
    color: #b9990e;
}

.text_tch{
    font-size: 2em;
    line-height: 0.9;
    margin: 5px 0 15px;
}

.btn_posicion{
    text-align: right;
}

@media(min-width:1024px){
    .cont_conoce_huaraz{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    
    .col_ch_img{
        width: 59%;
        margin-bottom: 0;
    }
    
    .col_ch{
        width: 39%;
    }
    

}

/*----------- El Hostel -----------*/

.cont_el_hostel{
    padding: 20px 0;
}

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

.map_elhostel{
    position: relative;
    
}
.map_elhostel .text_seccion{
    position: absolute;
    top: 30px;
    left: 30%;
    
}
.map_andean{
    max-width: 220px;
}

.col_decripcion_hostel{
    padding-top: 35px
}

.descripcion_h{
    margin-bottom: 20px;
}

.fond_elhostel{
    padding-bottom: 20px;
}

.bord_lineal{
    border-bottom: 2px solid #ba990f;
    margin: 20px 0;
}

/*------------- Galeria Hostel -------------*/

.info_andean_h {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding-bottom: 20px;
}

.col_ambiente_andean{
    width: 48.5%;
    position: relative;
    margin-bottom: 20px;
}

.col_ambiente_andean .name_ambiente_ah{
    position: absolute;
    bottom: 0;
    padding: 15px;
}

.name_ambiente_ah{
    font-size: 1.5em;
    color: #ba990f;
}

.descripcion_ah{
    margin-bottom: 30px;
}

.cont_ico_andean{
    display: flex;
    justify-content: center;
    padding-bottom: 40px;
}


@media(min-width:768px){
    .cont_el_hostel{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    
    .col_map_hostel{
        width: 30%;
    }
    
    .col_decripcion_hostel{
        width: 68%;
    }
    
    .col_ambiente_andean{
        width: 32%;
    } 
}

@media(min-width:1024px){
    .col_ambiente_andean{
        max-width: 24%;
    } 
}

/*------------- Servicios -------------*/

.cont_servicios_andean{
    padding: 20px 0; 
}

.col_serv_img{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between; 
}

.cont_img_izq{
    width: 50%;
    margin: auto 0; 
    padding-right: 20px;
}

.cont_img_der{
    width: 50%;
}

.img-center{
    max-width: 200px;
    margin-left: auto; 
}

.img-top{
    max-width: 250px;
    margin-bottom: 20px;
}

.img-bottom{
    max-width: 150px;
}

 ul {
    list-style-type: square;
    padding-left: 30px;
    margin-bottom: 30px;
}

ul li::marker {
    font-size: 20px;
    color: #b9990e;
    }
ul li{
    font-family: bahnschrift;
    font-weight: 100; 
}

.col_serv_descrip h3{
    margin-left: 80px;
}


.cont_ico_servicios{
    width: 100%;
    padding: 20px 0;
    display: flex;
}

.cont_ico_servicios .ico_serv{
    margin: auto;
    max-width: 50px;
}

@media(min-width:768px){
    .cont_servicios_andean{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    
    .col_serv_img{
        width: 48.5%;
    }
    
    .col_serv_descrip{
        width: 48.5%;
    }
    
}

/*------------- Huaraz -------------*/

.cont_hz{
    position: relative;
}

.borde_banner_hz{
    max-width: 160px;
}

.cont_hz .info_hz{
    position: absolute;
    bottom: 0px;
    width: 100%; 
}

.cont_hz .cont_item{
    position: absolute;
    bottom: 20px;
    width: 100%;
}

.cont_text_hz{
    text-align: right;
}

.text_descrip_s{
    color:#fff;
}

/*----------  Habitaciones ----------*/

.cont_habitaciones_andean{
    padding-top: 150px;
    background-color: #fff;
}

.fondo_habitaciones{
    padding-top: 0px;
    background-color: #e5e5e5;
    padding-bottom: 40px;
}

.text_cab_h{
    font-size: 18rem;
    text-align: center;
    color: #fff; 
    z-index: 4;
    line-height: 0;
}

.img_habitaciones{
    position: relative;  
    z-index: 9;
    margin-top: -100px
}


@media(min-width: 768px){
    .fondo_habitaciones .contenedor{
        display: flex;
        justify-content: space-between;
    }
    
    .col_h{
        width: 48.5%;
    }
    
    .txt_pos{
        margin-top: -130px;
        margin-bottom: 180px;
    }
    
/*  .col{
    display: flex;
    flex-direction: column;
    justify-content: space-between;       
    }*/
    
}

/*--------tipo de habitaciones--------*/

.cont_tipo_habitacion{
    padding: 40px 0;
}

.vision_andean_hostel{
    width: 100%;    
    max-width: 560px;
}

.cont_t_h{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-top: 30px;
}

.col_t_habitacion{
    width: 48.5%;
    position: relative;
}

.col_t_habitacion .cont_btn{
    position: absolute;
    bottom: 70px;
    width: 100%;
    text-align: center;  
}

@media(min-width:768px){
    .cont_ha{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        
    }
    
/*    .col_img_h{
        width: 48.5%;
    }*/
    
    .col_descrip_h{
        width: 48.5%;
    }
        
    .col_t_habitacion{
    width: 24%;
    }
}

/*--------- Detalle Tipo Habitacion ---------*/
.detalle_th{
    background-color: #e5e5e5;    
}

.cont_detalle_th{
   padding: 20px;
}

.col_dth{
    display: flex;
    justify-content: space-between;
}

.pos_text_h{
    text-align: right;
}

.subt_dth{
    color:#ba990f;
    font-size: 2em;
}

.cont_one{
    width: 48%;
}

.cont_two{
    width: 48%;
    align-content: flex-end;
    text-align: end;
}

.cont_costo{
    display: flex;
    text-align: left;
    width: 100%; 
    justify-content:flex-end;
    margin-bottom: 20px;
}

.col_c{
    padding-right: 15px;
}

.t_costo{
    font-size: 2.4rem;
    line-height: 1;
}

.t_btn{
    width: 100%;
    max-width: 180px;
    text-align: center;
    margin-bottom: 15px;
}

@media(min-width:768px){
    .tipo_habitacion_andean{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    
    .cont_detalle_th{
        width: 50%;
    }
    
    .cont_dth{
        width: 50%;
    }

}

/*------ Ubicacion - Contacto------*/

.cont_conta_ubica{
    padding-top: 40px;
    position: relative;
    /* background-color: #ba990f;*/
    
    
}

.col_cont_ubi{
    position: relative;
}

.img_cont{
    width: 100%;
    height: 350px;
    object-fit: cover;
    object-position: top;
}

.col_cont_ubi .info_contacto{
    position: absolute;
    left: 0;
    bottom: 40px;
    display: flex;
}

.info_contacto{
    max-width: 810px;
    width: 100%; 
    justify-content: space-between;
    padding: 0 15px;
}

.text_cont{
    font-size: 2.5em;
    color: #fff;
}

.text_datos_cont{
    color: #fff;
}

.ico_tel{
    max-width: 100px;
    margin-left: auto;
}

.col_ubicacion{
    background-color: #ba990f;
    width: 100%;
    position: relative;
    display: flex;
    justify-content: flex-end;
}

.text_ubi{
    color: #fff;
    font-size: 2.5em;
    padding-right: 15px;
}

@media(min-width:768px){
    .cont_conta_ubica{
        display: flex;
        justify-content: ;
        flex-direction:row-reverse;
    }
    
    .col_cont_ubi{
        width: 70%;
    }
    
    .col_ubicacion{
        width: 30%;
        align-items: flex-end;
    }
    
}


/*---------- Footer ----------*/

.cont_pag{
    background-color: #fff;
    padding: 15px 0;
}

.text_pag{
    text-align: center;
    font-size: 1.2em;
    color: #7f7f7f;
    font-family: bahnschrift;
    font-weight: 300;
}