/*----------------------------------
             FONTS
------------------------------------*/
  /* latin */
  @font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 200;
    font-display: swap;
    src: url(../fonts/poppins200.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }
  /* latin */
  @font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url(../fonts/poppins300.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }

  /* latin */
  @font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(../fonts/poppins400.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }
  
  /* latin */
  @font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url(../fonts/poppins600.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }
  
  /* latin */
  @font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(..assets/poppins700.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }
  
  /* latin */
  @font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 900;
    font-display: swap;
    src: url(..assets/poppins900.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }


  
    /*-------------ROBOTO------------*/
    
    @font-face {
        font-family: 'Roboto';
        font-style: normal;
        font-weight: 300;
        font-display: swap;
        src: url(..assets/roboto300.woff2) format('woff2');
        unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
      }
  
      @font-face {
        font-family: 'Roboto';
        font-style: normal;
        font-weight: 400;
        src: url(..assets/roboto400.woff2) format('woff2');
        unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
      }
  
      @font-face {
        font-family: 'Roboto';
        font-style: normal;
        font-weight: 700;
        font-display: swap;
        src: url(..assets/roboto700.woff2) format('woff2');
        unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
      }



/*Generales*/
*{box-sizing: border-box;font-family: 'Poppins', sans-serif;}
*{-webkit-transition: all .3s ease-in-out !important;-moz-transition: all .3s ease-in-out !important;-ms-transition: all .3s ease-in-out !important;-o-transition: all .3s ease-in-out !important;transition: all .3s ease-in-out !important}
body{margin:0;padding:0;background-color:var(--beige);}
html{scroll-behavior: smooth;}
/*Slider*/
.bannerEscritorio{display:block;}
.bannerResponsive{display:none;}
/*Fin del slider*/


.navbarr {background-color:var(--negro);transition:all ease .3s;margin-top:0px;}
.navbarr-dark {background-color: #000!important;transition:all ease .1s;}
.iconMostOrder{order:2;justify-content:flex-end;}
header{
    min-height:55px;position: fixed;height:auto;
    /*box-shadow: 0 0px 10px 0px var(--colorshadow);*/z-index:3;
   width:100%;height:auto;display:flex;justify-content:center;
}

.containerMenu{
    display:flex;flex-wrap:wrap;background-color:transparent;
    justify-content:space-between;width:100%;
}

.containerMenu .containerOpenLogo{
    padding-left:10px;max-height:auto;
    display:flex;color:var(--negro);width:450px;
    justify-content:space-between;order:1;align-items: center;
}


.containerOpenLogo img{width:auto;min-height:50px;max-height:70px;padding-top:12px;padding-bottom:12px;}

.containerMenu .containerButtonsD{
    max-height:auto;
    display:flex;color:var(--negro);order:2;
    justify-content:space-between; align-items:center;
}
.containerMenu nav{
    order:3;font-weight: 400;
}
.containerButtons img{
   padding:10px;cursor:pointer;
}
.containerIcons{
    display:flex;cursor:pointer;font-variant: small-caps;text-transform:uppercase;
    justify-content:space-between;align-items:center;padding:0px 10px 0px 0px;
}

.flexIconMenuO{
    display:flex;justify-content: center;align-items:center;transition:all ease .2s;
    flex-direction: column;width:70px;height:40px;
}
.flexIconMenuO:hover{text-shadow: 1px 1px 20px rgba(0, 0, 0, 0.66);transition:all ease .2s;}

.OpenSearchModal{width:40px;height:40px;background-color:var(--blanco);border-radius:50%;text-align: center;margin-top:-2px;}
.OpenSearchModal i:hover{text-shadow: none;}
.flexIconMenuO i{
    height:20px;padding-top:12px;
}

.dnoneRdsRd{display:none;}

/******/
.nav-bar{
    display:flex;
    justify-content:center;
    align-items:center;
    cursor:pointer;
    font-size:1.5em;
    width:50px;height:50px;border-radius:50%;
}

.nav-bar span{
    display:flex;position:relative;
    justify-content: center;align-items: center;
    width:50%;height:3px;background-color:var(--blanco);
}
.nav-bar span:after,.nav-bar span:before{
    content:"";
    position:absolute;width:100%;height:3px;
    display:flex;
    background-color:var(--blanco);
}

.nav-bar span:after{top:-8px;transition:all ease .5s;}
.nav-bar span:before{top:8px;transition:all ease .5s;}

.closeBar span{background-color:transparent;}

.closeBar span::after{transform: rotate(45deg);top:0px;}
.closeBar span::before{transform: rotate(-45deg);top:0px;}


.main-nav{
    width:100%;display:flex;
}
.menu, .submenu{
    list-style:none;padding:0;margin:0;
}
.menu{
    background-color:var(--negro);
    width:300px;height:100%;overflow:auto;
    margin-left:-100%;position:absolute;position:fixed;
    transition:all ease .4s;z-index:1;
}


.mostrar{
    margin-left:0;

}

.menu__link{
    display:block;color:var(--blanco);
    padding:20px 20px 20px 20px;font-weight:300;
    font-size:1.2em;transition:all ease .5s;margin-top:0px;
    text-decoration:none;border-bottom:solid 0.1px rgb(139, 139, 139);
}
.menu__link:hover{
    background-color:var(--principal);color:var(--blanco);
}

.submenu{
    transition:0.3s all ease;
    height:0px;overflow:hidden;}

.submenu .menu__link{
    background-color:#111111;font-weight:300;
    padding-left:35px;transition:all ease .3s;
}

.submenu .menu__link:hover{
    background-color:var(--principal);padding-left:35px;letter-spacing:0.5px;
}

.submenu-btn span{
    display:flex;position:relative;left:95%;top:-2px;
    justify-content: center;align-items: center;
    width:6px;height:1px;background-color:transparent;
}

.submenu-btn span::after,.submenu-btn span::before{
    content:"";
    position:absolute;width:100%;height:1px;
    display:flex;transition:all ease .3s;
    background-color:var(--blanco);
}
.submenu-btn span::after{top:-10px;transform:rotate(40deg);transition:all ease .3s;}
.submenu-btn span::before{top:-10px;left:5px;transform:rotate(-40deg);transition:all ease .3s;}

.submenu-btn:hover span::after{background-color:var(--blanco);}
.submenu-btn:hover span::before{background-color:var(--blanco);}

.removerSubMenu{background-color:var(--principal);color:var(--blanco)}
.removerSubMenu span::after{top:-10px;transform:rotate(-40deg);background-color:var(--blanco);}
.removerSubMenu span::before{top:-10px;transform:rotate(40deg);background-color:var(--blanco);}


.overlayMenu{
    background-color:rgba(54, 54, 54, 0.335);top:85px;
    height:100vh;width:100%;position:absolute;
    position:fixed;display:none;z-index:1;
}

.displayOverLayMenu{
    display:block;
}




    /*Buscador*/
    .overlayBuscador{position:absolute;width:100%;height:100vh;background-color:rgba(255, 255, 255, 0);z-index:1000;}

    
    .buscadorModal{
        width:100%;z-index:1100;
        transition:all ease .3s;
        position:absolute;top:0px;
        position:fixed;display:none;
    }

    .abrirBuscador{
        display:flex;transition:all ease .3s;height:90px;
    }

    .abrirBuscador .containerBuscador{animation-name: bajarBuscador;animation-duration:1s;}

    @keyframes bajarBuscador{
       0% {margin-top:0px;opacity:0.1;}
       50% {margin-top:76px;opacity:1;}
    }

    .containerBuscador{
        width:100%;padding-top:20px;padding-bottom:20px;
        height:auto;margin:auto;z-index:1100000;margin-top:75px;
        border-bottom:1px solid #d2d2d2;
        background-color:rgba(255, 255, 255, 0.854);opacity:1;
    }
   

    .containerBuscador form{
        margin:auto;max-width:1100px;
    }

    .containerBuscador form p{
        color:var(--blanco);
        font-size:20px;margin-bottom:5px;
    }
    .containerBuscador .FlexBuscadorModal{
        display:flex;
        justify-content: center;
    }
    .containerBuscador .FlexBuscadorModal input{
        padding:5px;outline:none;border:none;
        width:100%;max-width:1100px;font-size:20px;
        background-color:transparent;border-bottom:1px solid var(--negro);
    }

    .clearValInput{
        width:55px;background-color:transparent;cursor:pointer;
    }

    .clearValInput::after,.clearValInput::before{
        content:'';
        position:absolute;margin-top:20px;
        height:1px;background-color: var(--negro);
        width:20px;margin-left:10px;
    }

    .clearValInput::after{transform:rotate(45deg);}
    .clearValInput::before{transform:rotate(-45deg);}
    

    .containerBuscador .FlexBuscadorModal button{
        padding:15px;outline:none;border:none;cursor:pointer;
        width:55px;color:var(--negro);transition:all ease .3s;background-color:transparent;
    }
    .containerBuscador .FlexBuscadorModal button:hover{
        position:relative;
    }

    .containerBuscador .FlexBuscadorModal button span{
        border-radius:50%;
        width:18px;height:18px;border:2px solid var(--negro);
        position: absolute;margin-top:-10px;margin-left:-10px;
    }
    .containerBuscador .FlexBuscadorModal button span::after{
        content:'';
        position:absolute;transform:rotate(45deg);
        height: 2px; width:10px;margin-top:17px;margin-left:4px;
        background-color:var(--negro);
    }

    .preAlto{display:none;}



@media(max-width:850px){ 
    .marginTopHeader{margin-top:-0px;}
    .overlayMenu{top:55px;}
    .containerMenu .containerOpenLogo{width:auto;}
    .containerOpenLogo img{width:auto;min-height:40px;max-height:60px;}


    .containerBuscador{margin-top:60px;}
    @keyframes bajarBuscador{
        0% {margin-top:0px;opacity:0.1;}
        50% {margin-top:60px;opacity:1;}
     }


}
@media(max-width:700px){
    .bannerEscritorio{display:none;}
    .bannerResponsive{display:block;}
}

@media(max-width:475px){
    .flexIconMenuO p{display:none;}
    .flexIconMenuO{width:50px;}
    .cart span{margin-top:-25px;}
    /*Elininar si se da el caso*/
    .favoritos span{margin-top:-25px;margin-left:10px;}
    /*Elininar si se da el caso*/
}

@media(max-width:400px){.flexIconMenuO{width:45px;}}
@media(max-width:365px){.flexIconMenuO{width:43px;}}


@media(min-width:1100px){
    /*buscador top*/
    .containerBuscador{margin-top:103px;}
    /*buscador fin control top*/
    @keyframes bajarBuscador{
        0% {margin-top:0px;opacity:0.1;}
        50% {margin-top:110px;opacity:1;}
     }

    .dnoneRdsRd{display:flex;}
    .overlayMenu{display:none;}
    .nav-bar{
        display:none;
    }
    .main-nav{
        width:45%;align-items:center;
    }
    .menu{
        margin-left:0;width:auto;background-color:transparent;transition:all ease .0s;
        display:flex;height:auto;overflow:visible;position: static;
    }
    .container-submenu{
        position:relative;
    }
    .menu__link{background-color:transparent;border-bottom:0px;padding:30px 10px 50px 10px;margin-top:-7px;}
    .menu__link:hover{background-color:transparent;color:var(--blanco);}
    .submenu-btn span::after{margin-left:22px;}
    .submenu-btn span::before{margin-left:10px;}
    .submenu-btn:hover span::after{background-color:var(--principal);top:-10px;transform:rotate(-40deg)}
    .submenu-btn:hover span::before{background-color:var(--principal);top:-10px;transform:rotate(40deg)}
    
    .menu__item:hover > .submenu-btn{
        background-color:transparent;color:var(--blanco);
    } 
    .menu__item:hover >  .submenu-btn span::after{
        background-color:var(--principal);top:-10px;transform:rotate(-40deg)
    }
    .menu__item:hover >  .submenu-btn span::before{
        background-color:var(--principal);top:-10px;transform:rotate(40deg)
    }

    .selectedItem::before{
        content:'';
        background-color: var(--principal);
        width:0px;height:2.2px;transition:all ease .3s;
        position:absolute;margin-top:30px;
    }
  
    .menu__link{position:relative;height:55px;font-size:18px;background-color:transparent;}
    .menu__item:hover .selectedItem::before{
        width:82%;font-weight:400;
    }
    

    .submenu{
        position:absolute;
        top:70px;height:0px;
        transition:all ease .3s;
        width:auto;border-radius:20px;
        z-index:1000;min-width:220px;
    }
    .submenu-btn{margin-right:20px;}
    .submenu .menu__link{background-color:var(--blanco);padding-left:18px;padding-right:18px;width:auto;max-width:280px;color:var(--negro);padding-top:15px;padding-bottom:12px;}
    .submenu .menu__link:hover{
        background-color:var(--blanco);color:var(--principal);
    }
    .container-submenu:hover .submenu{
        overflow:hidden;border-radius:5px;
        opacity:1;box-shadow: 0 0 10px var(--colorshadow);height:auto;
    }

    .containerMenu{
        display:flex;flex-wrap:wrap;
        justify-content:space-between;height:auto;
        max-width:1550px;margin: auto;padding:0px;
    }
    
    .containerMenu .containerOpenLogo{order:1;width:150px;max-height:auto;display:flex;align-items:center;}
    .containerMenu .containerButtonsD{order:3;max-height:auto;}
    .containerMenu nav{
        order:2;
    }

    .main-nav{
        margin:auto;
    }
    .menu{margin-left:-70px;}
    

    .navbarr {margin-top:30px;}

.preAlto{
    height:30px;position:absolute;position:fixed;
    width:100%;transition:all ease 03s;
    background-color:var(--principal);
    color:var(--blanco);display:flex;align-items:center;
    font-weight:300;z-index:5;
}

.desaparecer{
    background-color: transparent;height:0px;display:none;
}

.cjPreAlto{
    width:100%;
    margin:auto;height:20px;display:flex;
    max-width:1530px;justify-content:right;
    padding-right:10px;
}

.cjPreAlto .phonePreMenu{
   width:110px;
    font-size:13px;padding-top:2px;margin-right:20px;
    border-right:solid 1px var(--blanco);
}

.cjPreAlto .phonePreMenu a{
    color:var(--blanco);letter-spacing:1px;
} 


.cellPhonePreMenu{
    width:auto;
    font-size:13px;padding-top:2px;margin-right:20px;padding-right:20px;
    border-right:solid 1px var(--blanco);
}

.cellPhonePreMenu a{color:var(--blanco);letter-spacing:1px;}
.RdsPreMenu{
    width:auto;
    font-size:13px;margin-top:3px;margin-right:20px;
    display:flex;
}

.RdsPreMenu a{
    color:var(--blanco);margin-right:10px;
}
.RdsPreMenu a i{font-size:16px;}
.RdsPreMenu > p{
    width:auto;margin-right:10px;
    font-size:10px;
    margin-top:0px;
}

}


@media(max-width:1315px){.menu__link{font-size:16px;}}
@media(max-width:1190px){.menu__link{font-size:15px;}}