/*--------------------  Estilos Menu web 1 -- Jenyfer -- GrupoLeader ---------------------*/
*{margin:0;padding:0;text-decoration:none;font-family:Montserrat;}

header{min-height:60px;position: fixed;height:60px;box-shadow: 0 8px 10px -8px var(--colorshadow);z-index:100;background-color: var(--blanco);width:100%;height:auto;display:flex;justify-content:center;}
.containerMenu{display:flex;flex-wrap:wrap;justify-content:space-between;height:60px;width:100%;}
.containerMenu .containerOpenLogo{padding-left:10px;max-height:60px;display:flex;color:var(--negro);justify-content:space-between;order:1;align-items: center;}
.containerMenu .containerOpenLogo img{height:50px;}
.containerMenu .containerButtonsD{max-height:60px;display:flex;color: rgb(101, 101, 101);order:2;justify-content:space-between; }
.containerMenu nav{order:3;}
.containerButtons img{padding:10px;cursor:pointer;}
.containerIcons{display:flex;cursor:pointer;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 .3s;flex-direction: column;width:70px;height:35px;}
.flexIconMenuO:hover{color:var(--celeste);opacity:0.8;}
.flexIconMenuO i{height:20px;padding-top:2px;}
.nav-bar{display:flex;justify-content:center;align-items:center;cursor:pointer;font-size:1.5em;width:50px;height:60px;border-radius:50%;}
.nav-bar span{display:flex;position:relative;justify-content: center;align-items: center;width:50%;height:2px;background-color:var(--negro);}
.nav-bar span:after,.nav-bar span:before{content:"";position:absolute;width:100%;height:3px;display:flex;background-color:var(--negro);height:2px;}
.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%;height:50px;margin-top:7px;}
.menu, .submenu{list-style:none;padding:0;margin:0;}
.menu{background-color:var(--blanco);width:320px;height:100%;overflow:auto;margin-left:-100%;position:absolute;position:fixed;transition:all ease .4s;z-index:1;margin-top: -7px;}
.mostrar{margin-left:0;}
.menu__link{display:block;color:var(--negro);padding:25px;font-size:1em;transition:all ease .5s;text-decoration:none;border-bottom:solid 0.2px var(--colorshadow);}
.menu__link:hover{background-color:var(--celeste);color:var(--blanco);}
.submenu{transition:0.3s all ease;height:0px;overflow:hidden;background-color:var(--negro);}
.submenu .menu__link{background-color:transparent;transition:all ease .3s;color:var(--blanco);}
.submenu .menu__link:hover{background-color:var(--celeste);}
.submenu-btn span{display:flex;position:relative;left:100%;top:-2px;justify-content: center;align-items: center;width:7px;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(--negro);}
.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(--azul);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:var(--negro);top:60px;opacity:0.6;height:100vh;width:100%;position:absolute;position:fixed;display:none;z-index:1;}
.displayOverLayMenu{display:block;}





@media(min-width:1160px){
    header{min-height:110px;height:110px;}
    .overlayMenu{display:none;}
    .nav-bar{display:none;}
    .main-nav{width:auto;}
    .menu{margin-left:0;width:auto;background-color:transparent;transition:all ease .0s;display:flex;height:auto;overflow:visible;position:static;margin-top:0px;}
    .container-submenu{position:relative;}
    .menu__link{background-color:transparent;border-bottom:0px;}
    .menu__link:hover{background-color:transparent;color:var(--negro);}
    .submenu-btn span::after{margin-left:20px;}
    .submenu-btn span::before{margin-left:10px;}
    .submenu-btn:hover span::after{background-color:var(--celeste);top:-8px;transform:rotate(-40deg)}
    .submenu-btn:hover span::before{background-color:var(--celeste);top:-8px;transform:rotate(40deg)}
    .menu__item:hover > .submenu-btn{background-color:transparent;color:var(--negro);} 
    .menu__item:hover >  .submenu-btn span::after{ background-color:var(--celeste);top:-8px;transform:rotate(-40deg)}
    .menu__item:hover >  .submenu-btn span::before{background-color:var(--celeste);top:-8px;transform:rotate(40deg)}
    .selectedItem::before{content:''; background-color: var(--celeste);width:0px;height:2px;transition:all ease .3s;position:absolute;margin-top:27px;}
    .menu__link{position:relative;height:65px;padding: 10px 0px;font-size:18px;margin: 0px 30px;font-weight:450;background-color:transparent;}
    .menu__item:hover .selectedItem::before{width:100%;}
    .menu__item:hover .menu__link{color:var(--celeste);}
    .submenu{position:absolute;top:55px;transition:all ease .3s; width:auto;border-radius:10px; z-index:1000;min-width:280px;background-color:var(--negro);}
    .submenu-btn{margin-right:45px;}
    .submenu .menu__link{background-color:transparent;padding:10px 15px;width:auto;color:var(--blanco);max-width:400px;font-size:14px;text-align:left;margin:0px;height:auto;}
    .menu__item:hover .submenu .menu__link{color:var(--blanco);}

    .submenu .menu__link:hover{background-color:var(--celeste);color:var(--blanco);font-size:14px;padding:10px 15px;}
    .container-submenu:hover .submenu{overflow:hidden;border-radius:10x;opacity:1;box-shadow: 0 0 20px var(--colorshadow);height:auto;}
    .containerMenu{display:flex;flex-wrap:wrap;justify-content:space-between;max-height:60px;max-width:1300px;margin: auto;padding:0px;}
    .containerMenu .containerOpenLogo{order:1;width:200px;max-height:60px;}
    .containerMenu .containerOpenLogo img{width:auto;height:100px;}
    .containerMenu .containerButtonsD{order:3;max-height:60px;font-size:20px;margin-top:-3px;color:var(--celeste)}
    .containerMenu nav{order:2;display:flex;justify-content:right;margin-left:150px;}
}

@media(max-width:1230px){.containerMenu .containerOpenLogo img{width:auto;height:80px;}.containerMenu nav{margin-left:50px;}}
@media(max-width:1160px){.containerMenu nav{margin-left:0px;}}
@media(max-width:400px){.containerMenu .containerOpenLogo img{height:60px;}}





/*------- ESTILOS PARA EL BUSCADOR -------*/

    .buscadorModal{
        width:100%;height:auto;z-index:1000;
        transition:all ease .5s;
        position:absolute;top:0;
        position:fixed;display:none;
        background-color:rgba(54, 54, 54, 0.335);
    }

    .abrirBuscador{
        animation-name: slideSearch; animation-duration:0.25s;display:flex;margin-top:0px;
    }
    
    @keyframes slideSearch{
        from{
            margin-top:-200px;
        }
        to{
            margin-top:0px;
        }
    }

    .containerBuscador{
        width:100%;
        background-color:var(--blanco);
        height:auto;max-height:210px;/*margin:auto;*/
    }
    .iconCloseBuscador{
        width:50px;height:50px;
        /*
        margin-top:-150px;margin-bottom:50px;
        */
        border-radius:50%;position:relative;
        display:flex;justify-content:center;background-color:var(--blanco);
        align-items:center;margin-left:94%;
        color:var(--blanco);transition:all ease .2s;cursor:pointer;

        /*borrar luego si es necesario*/
    }
    .iconCloseBuscador:hover{
        transform:rotate(360deg);
    }
    .iconCloseBuscador::after,.iconCloseBuscador::before{
        content:'';
        position:absolute;
        height:2px;width:50%;
        background-color:var(--negro);
    }
    .iconCloseBuscador::after{transform:rotate(45deg);transition:all ease .3s;}
    .iconCloseBuscador::before{transform:rotate(-45deg);transition:all ease .3s;}

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

    .containerBuscador form{
        margin:auto;max-width:1400px;width:90%;padding-bottom:20px;
    }

    .containerBuscador form p{
        color:var(--blanco);
        font-size:20px;margin-bottom:5px;
    }
    .containerBuscador .FlexBuscadorModal{
        display:flex;margin-top:20px;margin-bottom:40px;
        justify-content: center;
        background-color: var(--blanco);
        height:auto;
    }
    .containerBuscador .FlexBuscadorModal input{
        padding:15px;outline:none;border:none;
        width:100%;max-width:1100px;font-size:20px;
        border-bottom:2px solid rgb(232, 232, 232);
    }

    .clearValInput{
        width:55px;background-color:var(--blanco);cursor:pointer;border-bottom:2px solid rgb(232, 232, 232);
    }

    .clearValInput::after,.clearValInput::before{
        content:'';
        position:absolute;margin-top:30px;
        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:60px;background-color:var(--celeste);color:var(--negro);transition:all ease .3s;
    }

    .containerBuscador .FlexBuscadorModal input::placeholder{font-size:14px;color:var(--colorshadow);}
    .containerBuscador .FlexBuscadorModal button:hover{
        position:relative;
    }

    .containerBuscador .FlexBuscadorModal button span{
        border-radius:50%;
        width:18px;height:18px;border:2px solid var(--blanco);
        position: absolute;margin-top:-14px;margin-left:-12px;
    }
    .containerBuscador .FlexBuscadorModal button span::after{
        content:'';
        position:absolute;transform:rotate(45deg);
        height: 2px; width:10px;margin-top:18px;margin-left:5px;
        background-color:var(--blanco);
    }
    
    /*Estilos para resultados de búsqueda*/
    .resultadosBusqueda{
        width:100%;height:70%;margin:auto;overflow-x:scroll;margin-top: -2px;
      }
      .flexResultadosBusqueda{
        display:flex;justify-content:center;
        background-color:var(--blanco);padding:20px;
        border-bottom:1px solid #f5f5f5;
      }
      .flexResultadosBusqueda a{list-style:none;text-decoration:none;}
      .flexResultadosBusqueda .imgResultadoBusqueda{
        width:200px;
        height:150px;
      }
      .flexResultadosBusqueda .imgResultadoBusqueda img{
        width:100%;
        height:100%;
      }
      .flexResultadosBusqueda .infoResultadoBusqueda{
        width:800px;padding:10px;color:var(--negro);
      }

      .flexResultadosBusqueda .infoResultadoBusqueda .nombreProductoResutladoBusqueda{
        font-size:25px;
        padding:10px;
      }

      .flexResultadosBusqueda .infoResultadoBusqueda .BotonProductoResutladoBusqueda{
      font-size: 15px;
      margin-left:10px;
      width: 150px;
      text-align: center;
      line-height: 2.5;
      border-radius:20px;
      height: 40px;
      background-color: var(--celeste);
      color: var(--blanco);
      transition:all ease .3s;
      }

      .flexResultadosBusqueda .infoResultadoBusqueda .BotonProductoResutladoBusqueda i{
        font-size:12px;
      }


      .flexResultadosBusqueda:hover .BotonProductoResutladoBusqueda{ background-color: var(--azul);}



      
@media(max-width:1000px){
    .flexResultadosBusqueda .infoResultadoBusqueda{width:500px;}
}
@media(max-width:700px){
    .iconCloseBuscador{margin-left:90%;}
    .flexResultadosBusqueda .infoResultadoBusqueda{width:300px;}
    .flexResultadosBusqueda .infoResultadoBusqueda .nombreProductoResutladoBusqueda{font-size:20px;line-height: 20px;}
}
@media(max-width:480px){
    .flexResultadosBusqueda .infoResultadoBusqueda{width:250px;}
}
@media(max-width:410px){
    .flexResultadosBusqueda .infoResultadoBusqueda{width:210px;}
}

@media(max-width:390px){
    .resultadosBusqueda{height:75%;}
    .iconCloseBuscador{margin-left:85%;}
    .flexResultadosBusqueda .infoResultadoBusqueda{width:200px;}
    .flexResultadosBusqueda{padding:10px;align-items:center;}
    .flexResultadosBusqueda .imgResultadoBusqueda{width:150px;height:90px;}
}