@font-face {
    font-family: 'candara';
    src: url("../fuentes/Candara.ttf");
}
@font-face {
    font-family: 'candara';
    src: url("../fuentes/Candara.eot");
}
@font-face {
    font-family: 'candara';
    src: url("../fuentes/Candara.woff");
}

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family:'candara';
    
}

.body{
    margin: 0 auto;
    max-width: 1500px;
    position: relative;
    /*background: #3a220e;*/
    background: #fff;
    letter-spacing: 3px;
    font-family:'candara';
}

/*-----------------MENU--------------*/

header{
    position: absolute;
    z-index: 10;
    top: 0;
    width: 100%; 
    height: auto;
    display: flex;
    justify-content: flex-end;
    flex-direction: column;
    font-size: 20px;
}

/*1:R:242% - G:111% - B:33%
2:R:251% - G:174% - B:23%

rgba(255,0,0,0)
*/

nav{
    width: 100%;
    height: auto;
    background-image: linear-gradient(#584331,#533014, #533014);
}
/*
.icons{
    position: absolute;
    left: 0px;
    font-size: 20px;
    width:150px;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
}
.icons a{
    text-decoration: none;
    color: #fff;
    transition: .3s;
}
.icons a:hover{
    text-decoration: none;
    color: #000;
    font-size: 22px;
}

*/
.nav__container{
    right: 0px;
    width: 100%;
    height: auto;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    font-size: 16px;
}

.nav__logo{
    display: none;
}


.nav__img{
    width: 30px;
    display: block;
}

.logo{
    position: absolute;
    top: 40px;
    left:40px;
    width: 25%;
}
.logo img{
    width: 90%;
}

.list{
    width: 70%;
    height: 100%;
    right: 0;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    column-gap: 15px;
    transform: unset;
    transition: none;
    letter-spacing: 2px;
}


/*.nav:hover .list{
    transform: translate(0);
}*/ /*puro css*/

.list__item{
    list-style: none;
    position: relative;
}

.list__link{
    text-transform:capitalize;
    color: #fff;
    text-decoration: none;
    padding: 12px;
    font-weight: 500;
    transition: 0.3s;
}
.list__link:hover{
    color: #000924;
    background: #ffffff;
    
}


.list__item:hover .children{
    display: block;
}


.list__item .children{
    display: none;
    margin-top: 8px;
    position: absolute;
    list-style: none;
    padding: 0px;
    background: #533014;
    width: 200%;
    z-index: 10;
    border-radius: 0px 0px 5px 5px;
}

.list__item .children li{
    left: 0;
    display: block;
    overflow: hidden;
    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
    transition: 0.3s;
}

.list__item .children li:hover{
    background-color: #b6b6b6;
    color: #000;
}
.list__item .children a{
    display: block;
    text-decoration: none;
    padding: 15px;
    color: #fff;
}
.list__item .children a:hover{
    color: #000;
}


/*--------/MENU--------------*/


/*--------MAIN--------------*/
main{
    height: auto;
}

/*--------SLIDER----------*/
.carrosuel{
    position: relative;
}
.position{
    /*position: absolute;*/
    top: 0;
    left: 0;
    
}
.slider{
    background-image: url(../img/Brasero_slider.jpg);
    background-size: cover;
    background-position: top center;
    animation: animate 20s infinite;
    width: 100%;
    height: 90vh;
}
@keyframes animate {
    25%{
        background-image: url(../img/Asador_slider.jpg);
        background-size: cover;
    }
    50%{
        background-image: url(../img/Disco_slider.jpg);
        background-size: cover;
    }
    75%{
        background-image: url(../img/Estaca_slider.jpg);
        background-size: cover;
    }
    100%{
        background-image: url(../img/Brasero_slider.jpg);
        background-size: cover;
    }
}
/*--------/ SLIDER----------*/

.contenedor_index .contenedor_contacto{
    padding-top: 0px;
    padding: 30px;
}

.contenedor_contacto{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}                                                                                                                                           

.contenedor{
    padding: 30px;
    padding-top: 16%;
}
.contenedor2{
    padding: 30px 10px 30px 10px;
    padding-top: 50px;
}

.contenedor_titulo{
    display: flex;
    justify-content: end;
    margin-top: 100px;
    margin-bottom: 20px;
    width: 90%;
}

.titulo{
    color:#000;
    letter-spacing: 10px;
}


/*----------------Empresa----------------*/
 .container{
    width: 100%;
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
    padding: 10px 30px 10px 30px;
    gap: 30px;
    font-size: 20px;
    text-align: justify;
}

.contenedor_destinos{
    margin-top: 40px;
}

.texto{
    padding: 0px 30px 0px 30px;
    text-align: justify;
    font-size: 20px;
}

.mvo{
    width: 30%;
    padding: 30px;
    text-align: justify;
    border-radius: 5px;
    color: #fff;
    line-height: 30px;
    box-shadow: 3px 7px 15px #000 ;
}

/*---------------Destinos --------------*/

.box_destinos{
    background-color: #fff;
    background-size: cover;
    background-position: center center;
    width: 30%;
    min-height: 350px;
    max-height: 350px;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 3px 7px 15px #000;
    position: relative;
    display: flex;
    justify-content: center;
    transition: .3s;
}
.box_destinos:hover{
    width: 33%;
    height: auto;
}

.box_destinos img{
    height: auto;
    width: 100%;
    margin: auto;
}
.titulo_destinos{
    position: absolute;
    bottom: 0px;
    padding: 20px 0px 20px;
    background: #fff;
    width: 100%;
    text-align: center;
    font-weight: 400;
    color: #000;
    border-top: #3a220e solid 1px;
    text-transform:capitalize;
}


/*---------------PRODUCTO --------------*/
.product_container{
    width: 100%;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    box-shadow: #8b8b8b 10px 10px 15px;
    border-radius: 3px;
}
.prod_column{
    width: 50%;
    padding: 30px;
}
.datos_prod{
    position: relative;
    text-align: right;
    display: flex;
    justify-content:flex-start;
    flex-direction: column;
    align-items: flex-end;
    gap: 20px;
    padding: 20px;
    position: relative;
    height: 100%;
}

/*-------COMPARTIR----------*/
.compartir{
    width: 100%;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 20px;
}

/*---------------DESTINO --------------*/
.info_destino{
    width: 100%;
    background: #fff;
    border-radius: 10px;
    padding: 30px;
}
.info_destino a{
    text-decoration: none;

}

.col_info{
    width: 50%;
    float: left;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    flex-wrap: wrap;
    padding: 10px;
}
.col_info img, .col_info h1{
    width: 100%;
}
.desc{
    width: 100%;
    min-height: 100px;
    font-size: 20px;
    margin-top: 20px;
}

.boxes{
    width: 100%;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}

.box_info{
    background: #000924;
    color: #fff;
    padding: 10px;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 10px;
    min-width: 180px;
    min-height: 180px;
}
.box_info span{
    font-size: 30px;
}

.relacionados{
    width: 100%;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    flex-wrap: wrap;
}

/*----------------Agencias---------------*/

.main_agencias{
    width: 100%;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    flex-wrap: wrap;
    gap: 30px;
    min-height: 300px;
}

.datos_agencias{
    width: 100%;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    flex-wrap: wrap;
    gap: 30px;
}

.btn_redevt{
    width: 25%;
    min-width: 150px;
    text-align: center;
    background: #000924;
    color: #fff;
    padding: 20px;
    border-radius: 5px;
    text-transform: uppercase;
    transition: .3s;
}
.btn_redevt:hover{
    background: #0c496c;
}

.btn_agencias{
    text-align: center;
    display: flex;
    align-items: center;
    background: #f26f21;
    color: #000924;
    padding: 20px;
    border-radius: 15px;
    transition: .3s;
}
.btn_agencias span{
    font-size: 30px;
}

.btn_agencias:hover{
    background-color: #fbae17;
}

/*---------------Transporte----------------*/
.main_transp{
    width: 100%;
    display: flex;
    justify-content: left;
    align-items: center;
    flex-wrap: wrap;
    gap: 30px;
    min-height: 300px;
}

.subtitulo{
    color: #000924;
    font-size: 24px;
    font-weight: bold;
}

.subtitulo2{
    color: #0c496c;
    font-family: 'gitchgitch';
    font-size: 24px;
}



/*---------------Contacto ----------------*/
.box_contacto{
    width: 45%;
    /*padding: 20px;*/
}
.datos_contacto{
    line-height: 40px;
    font-size: 18px;
    padding: 50px 50px 0px;
}
.datos_contacto iframe{
    width: 100%;
    height: 300px;
    margin-top: 30px;
    border-radius: 10px;
    box-shadow: #000924 3px 5px 15px;
}

/*--------FOOTER--------------*/
footer{
    /*background-image: radial-gradient(#584331,#533014);*/
    background-image: radial-gradient(#584331,#3a220e);
    padding-top: 10px;
    display: grid;
    /*gap: 10px;*/
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-areas:
        'datos1 logo_footer datos2'
        'datos1 logo_footer datos2'
        'datos1 logo_footer datos2'
        'datos1 logo_footer datos2'
        'copyright copyright copyright';

}

#logo_footer{
    grid-area: logo_footer;
}
#logo_footer img{
    width: 70%;
    min-width: 150px;
}

#datos1{
    grid-area: datos1;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}

#datos2{
    grid-area: datos2;
}

#copyright{
    grid-area: copyright;
}

.item_footer{
    display: flex;
    align-items: center;
    justify-content: center;
    padding:20px;
    color: #fff;
}
.item_footer span{
    font-size: 25px;
    vertical-align: middle;
}
.item_footer a{
    text-decoration: none;
    color:#fff;
    transition: 0.3s;
}
.item_footer a:hover{
    color: #fbae17;
}

.datos_footer{
    max-width: 80%;
    line-height: 30px;
    display: flex;
    align-items: center;
    flex-direction: column;
    text-align: center;
    gap: 20px;
}

.wp{
    display: block;
    width: 50px;
    height: auto;
    position: fixed;
    right: 20px;
    bottom: 30px;
    z-index: 888;
}
.wp img{
    width: 100%;
}

.en_construccion{
    background: #000924;
    padding: 20px;
    border-radius: 10px;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 30px;
}

.en_construccion img{
    width: 90%;
}

/*-------BOTON ANIMADO----------*/
.bn54 {
    float:right;
    margin-top: 30px;
    right: 0px;
    outline: none;
    text-decoration: none;
    border-radius: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    text-transform: uppercase;
    height: 60px;
    width: 180px;
    /*opacity: 1;*/
    /*background-color: #ffffff;*/
    background-image: linear-gradient(#3FC02A,#0F8E08);
    border: 1px solid rgba(255, 255, 255, 0.6);
    gap: 10px;
  }

  .bn54 img{
    width: 50px;
    height: auto;
  }

  
  .bn54 .bn54span {
    /*font-family: Verdana, Geneva, Tahoma, sans-serif;*/
    color: #fff;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 0.7px;
    text-decoration: none;
  }
  
  .bn54:hover {
    animation: bn54rotate 0.7s ease-in-out both;
    text-decoration: none;
  }
  
  .bn54:hover .bn54span {
    animation: bn54storm 0.7s ease-in-out both;
    animation-delay: 0.06s;
  }
  
  @keyframes bn54rotate {
    0% {
      transform: rotate(0deg) translate3d(0, 0, 0);
    }
    25% {
      transform: rotate(3deg) translate3d(0, 0, 0);
    }
    50% {
      transform: rotate(-3deg) translate3d(0, 0, 0);
    }
    75% {
      transform: rotate(1deg) translate3d(0, 0, 0);
    }
    100% {
      transform: rotate(0deg) translate3d(0, 0, 0);
    }
  }
  
  @keyframes bn54storm {
    0% {
      transform: translate3d(0, 0, 0) translateZ(0);
    }
    25% {
      transform: translate3d(4px, 0, 0) translateZ(0);
    }
    50% {
      transform: translate3d(-3px, 0, 0) translateZ(0);
    }
    75% {
      transform: translate3d(2px, 0, 0) translateZ(0);
    }
    100% {
      transform: translate3d(0, 0, 0) translateZ(0);
    }
  }


  .bn60 {
    background-color: #3FC02A;
    color: #ffffff;
    font-size: 13px;
    font-weight: 600;
    position: relative;
    outline: none;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    height: 30px;
    width: 120px;
  }

  .bn60 img{
    width: 25px;
    height: auto;
  }

  .bg{
    background-position: center center;
    background-repeat: no-repeat;
    background-image: url("../img/Asador_opacity.jpg");
    background-size: cover;
  }

  .bg2{
    background-position: center center;
    background-repeat: no-repeat;
    background-image: url("../img/Fondo_contacto.png");
    background-size: cover;
  }



@media(max-width:750px) {

    .titulo_gde, .titulo_mediano{
        position: absolute;
        top: 28vw;
        left: 20px;
        width: 100%;
        text-align: center;
    }

    .titulo_gde h1{
        font-size: 12vw;
    }

    .titulo h1, .titulo_mediano h1{
        font-size: 9vw;
    }
    

    /*----------NAV---------------*/

    header{
        height: auto;
    }

    nav{
        height: auto;
        background-image: none;
    }

    .nav__container{
        display: flex;
        justify-content:end;
        align-items:flex-start;
        padding-top: 10px;
    }

    .logo{
        top: 10px;
        left: 20px;
        width: 60%;
    }

    .nav__logo{
        display:block;
        cursor: pointer;
        margin-top: 0px;
        margin-right: 20px;
        background-color: #38210e;
        padding: 5px;
        border-radius: 5px;
        border: #fff solid 2px;
    }
   


    .list{
        width: 100%;
        max-width: 450px;
        height: 89vh;
        position: fixed;
        right: 0;
        top: 70px;
        bottom: 0;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        align-items: center;
        transform: translate(100%);
        transition: transform .5s;
        z-index: 999;
        background-image: linear-gradient(#584331,#38210e);
        border-radius: 5px;
        box-shadow: #000924 5px 10px 12px;
        padding: 0px;
        overflow: scroll;
    }
    
    .list--show{
        transform: translate(0);
    }

    .list li{
        display: block;
        width: 100%;
        border-bottom: 0.3px solid rgba(255, 255, 255, 0.5);
        text-align: center;
    }

    
    .list__item .list__link{
        display: block;     
        width: 100%;
    }

    .list__item:hover .children{
        display: none;
    }

    .list__item .children{
        width: 100%;
        position: relative;
    }
    
    /*------------EMPRESA---------------*/

    .contenedor_mvo, .contenedor_destinos {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .mvo{
        width: 100%;
        margin-bottom: 20px;
    }

    /*---------------PRODUCTO --------------*/
    .contenedor_titulo{
        width: 100%;
    }
    
    .prod_column{
        width: 100%;
    }

    .datos_prod{
        text-align: right;
        display: flex;
        justify-content:flex-end;
        flex-direction: column;
        gap: 20px;
        padding: 0px 20px;
    }

    .bn54 {
        margin-top: 0px;
    }

 /*------------DESTINOS---------------*/

    .box_destinos{

        width: 100%;
        max-height: 300px;
        margin-bottom: 30px;

    }
    .box_destinos:hover{
        width: 100%;
        height: auto;
        box-shadow: 5px 10px 10px #000924;
    }

    .col_info{
        width: 100%;
    }

    .box_info{
        min-width: 100px;
        min-height: 100px;
    }


    /*------------Contacto---------------*/
    .box_contacto{
        width: 100%;
    }

    .datos_contacto{
        line-height: 30px;
        font-size: 16px;
        padding: 20px 10px 0px;
    }
    


    /*------------FOOTER---------------*/

    footer{
        grid-template-areas:
            'logo_footer logo_footer logo_footer'
            'datos1 datos1 datos1'
            'datos2 datos2 datos2'
            'copyright copyright copyright';
    
    }

    .datos_footer{
        text-align: center;
    }

    #logo_footer img{
        width: 50%;
    }
    

    .contenedor2{
        padding: 30px 10px 30px 10px;
        padding-top: 16%;
        text-align: center;
    }
    
    

}