:root{
    --primary-color: #23BF3A;
    --text-color: #040D28;
}

.language {
    position: absolute;
    width: 80%;
    max-width: 1600px;
    margin: 47px auto 0;
    /* z-index: 99999; */
    display: flex;
    justify-content: end;
}

.btn__language{
    position: relative;
    display: block;
    width: 89px;
    z-index: 999;
}

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

/*---------------------- HEADER ----------------------*/

header{
    position: absolute;
    top: 25px;
    width: 100%;
    /* z-index: 999; */
}

.content__header{
    width: 85%;
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.logo__header{
    width: 111px;
}

.tienda__header{
    width: 171px;
}

.tienda__header img{
    width: 100%;
}

.header-white .logo__green{ display: none; }
.header-green .logo__white{ display: none; }

.content-nav{
    display: flex;
}

.btn_movile__flag{
    display: block;
    width: 79px;
    margin-right: 15px;
}

.btn_movile__flag img{
    width: 100%;
}

.btn__flag{
    display: none !important;
}

/* NAV */

.btn__nav{
    position: relative;
    width: 35px;
    cursor: pointer;
    z-index: 999;
}

.line1,
.line2,
.line3 {
    z-index: 1;
    width: 35px;
    height: 3px;
    margin: 8px 0;
    transition: .6s;
    border-radius: 2px;
    background-color:#FFFFFF;
}

.header-green .btn__nav div{
    background-color:#23BF3A;
}

.change .line1 {
    -webkit-transform: rotate(-45deg) translate(-9px, 6px);
    transform: rotate(-45deg) translate(-9px, 6px);
    background-color:#FFFFFF;
}

.change .line2 {
    opacity: 0;
}

.change .line3 {
    -webkit-transform: rotate(45deg) translate(-8px, -8px);
    transform: rotate(45deg) translate(-8px, -8px);
    background-color:#FFFFFF;
}

.header-green .change div {
    background-color:#FFFFFF;
}

.list__nav{
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 9;
  padding: 125px 35px 81px;
  transform: translateX(-110%);
  /* background-color: #FFFFFF; */
  background-image: linear-gradient(#1E8B2E, #FFFFFF);
  box-shadow: 0 0 10px 0 rgb(0 0 0 / 10%);
  transition: 0.35s all cubic-bezier(0.65, 0.05, 0.36, 1);
}

.list__nav a{
    display: block;
    margin: 15px 0;
}

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

.open{
  transform: translateX(0);
}

.img-nav-left{
    position: absolute;
    left: 0;
    top: 19px;
    width: 197px !important;
    z-index: -1;
}

.img-nav-right{
    position: absolute;
    right: 0;
    top: 437px;
    width: 265px !important;
    z-index: -1;
}


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

.content__footer{
    width: 85%;
    max-width: 650px;
    margin: 97px auto 95px;
}

.content__footer img{
    width: 221px;
    margin: 0 auto 25px;
    display: block;
}

.link__footer{
    text-align: center;
}

.link__footer a{
    text-align: center;
    color: #8C8C8C;
    text-decoration: none;
}


.float-wsp{
    width: 123px;
    display: block;
    position: fixed;
    right: 1px;
    bottom: 0;
}

.float-wsp img{
    width: 100%;
}

/* REDES FOOTER */

.redes__footer{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
}

.redes__footer a{
    display: block;
    width: 17%;
    max-width: 61px;
}

.redes__footer a img{
    display: block;
    width: 100%;
}

@media screen and (min-width: 768px){

    .img-nav-left{ display: none !important; }

    .img-nav-right{ display: none !important; }


    /*---------------------- HEADER ----------------------*/

    header {
        top: 41px;
    }

    .logo__header {
        width: 139px;
    }

    .tienda__header {
        width: 253px;
    }

    .btn__nav{ display: none; }

    .list__nav{     
        width: auto;
        height: auto;
        position: initial;
        padding: 0;        
        transform: initial;
        box-shadow: initial;
        background-color: transparent;
        background-image: initial;
    }

    .list__nav a {
        margin: 3px 0;
    }

    .list__nav img {
        width: 279px;
    }

    .btn_movile__flag{ display: none !important; }
    

}

@media screen and (min-width: 1024px){

    .language {
        width: 95%;
        left: 0;
        right: 0;
        margin: 73px auto 0;
    }

    /*---------------------- HEADER ----------------------*/

    .content-nav{
        width: 79%;
    }
    
    .list__nav {
        display: flex;
        justify-content: end;
    }

    .list__nav a {
        width: 22%;
    }

    .list__nav a img{
        width: 100%;
    }

    .btn__flag{
        width: 9% !important;
    }

    .btn__flag{
        display: block !important;
    }

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

    .content__footer img{
        width: 251px;
    }

    /* REDES FOOTER */

    .redes__footer{
        max-width: 451px;
        margin: 47px auto 0;
    }

    .redes__footer a{
        max-width: 49px;
    }

}

@media screen and (min-width: 1200px){

    /*---------------------- HEADER ----------------------*/

    .content__header{
        width: 95%;
        max-width: 1600px;
        padding-right: 89px;
    }

}