/***************************************inicio header*****************************************/

.staticHeader {
    position: sticky;
    top: 0;
    z-index: 98;
}

body {
    margin: 0;
    padding: 0
}

.estilonav {
    background: #000000;
    width: 100%;
    height: auto;
    position: relative;
    overflow: hidden;
}

.container_logo_messages{
    width: 30%;
    height: 100%;
    float: left;
    display: flex;
}

.divuno {
    background: transparent;
    width: 33%;
    /*width: 125px;*/
    height: 90px;
    padding-left: 6px;
    float: left;
}

.div__accountMesage {
    display: flex;
    color: wheat;
    line-height: 0.9;
    height: 100%;
    align-items: center;
}

.estilologo {
    width: 115px;
    height: 90px;
    padding-top: 3px;
}

.divdos {
    background: transparent;
    display: flex;
    width: 33%;
    /*width: 110px;*/
    height: 90px;
    float: left;
    text-align: center;
    padding-top: 20px;
    color: white;
}

.divdos a:hover {
    border: white 1px solid;
    /*border-right: white 1px solid;*/
    /*border-top: white 1px solid;*/
    border-radius: 4px;
    width: 100%;
}

#btn-menu-barras2 { font-size: 1.6em; }

.divtres {
    background: transparent;
    display: flex;
    width: 770px;
    height: 90px;
    text-decoration: none;
    float: left;
    position: relative;
}

.divcuatro li:not(:first-child) a:hover { color: #6c757d;}
.divcuatro li:nth-child(3) a { color: orange;}
.divcuatro li:nth-child(3) a:hover { color: red;}

.divcuatro li a:focus-visible { border: none;}

.divcuatro {
    background: transparent;
    width: 770px;
    height: 30px;
    list-style: none;
    display: flex;
    font-size: x-small;
    align-items: center;
    justify-content: space-between;
}

.divcuatro a {
    color: white;
    text-decoration: none;
    list-style: none;
}

.divcinco {
    background: transparent;
    width: 770px;
    height: 60px;
    position: absolute;
    /* display:block; */
    bottom: 0;
}

.divseis {
    height: 90px;
    width: 15.99999%;
    float: left;
    /*padding-left: 40px*/
}

.divseis #perfil:hover, .divseis #carrito:hover {
    border-color: #FFF;
}

.containerCategoriasMovil {top:8%;max-width:100%;}

#srch::placeholder {
  color:#000;
}

.loader {
	top: 50%;
	bottom: 50%;
	left: 47%;
	right: 50%;
}

.loader div {
	position: absolute;
	width: 20px;
	height: 20px;
	background: #78BC27;
	/*animation-timing-function: cubic-bezier(0, 1, 1, 0);*/
}
.loader div:nth-child(1) {
	left: 6px;
	animation: loadingAnimation1 0.9s infinite;
}
.loader div:nth-child(2) {
	left: 15px;
	animation: loadingAnimation2 0.9s infinite;
}
.loader div:nth-child(3) {
	left: 44px;
	animation: loadingAnimation2 0.9s infinite;
}
.loader div:nth-child(4) {
	left: 60px;
	animation: loadingAnimation3 0.9s infinite;
}
@keyframes loadingAnimation1 {
	0% { transform: scale(0); }
	100% { transform: scale(1); }
}
@keyframes loadingAnimation2 {
	0% { transform: translate(0, 0); }
	100% { transform: translate(19px, 0); }
}

@keyframes loadingAnimation3 {
	0% { transform: scale(1); }
	100% { transform: scale(0); }
}

@media (min-width: 2000px) and (max-width: 10000px) {
    .estilonav {
        background: #000000;
        width: 100%;
        height: 175px;
        position: relative;
        overflow: hidden;
    }
    .containerCategoriasMovil {top:178px;}

    .divuno {
        background: transparent;
        width: 33%;
        height: 100%;
        padding-left: .5%;
        float: left;
    }

    .estilologo {
        width: 100%;
        height: 96%;
        padding-top: 3%;
        padding-right: .5%;
    }

    .divdos {
        background: transparent;
        display: flex;
        width: 33%;
        height: 100%;
        float: left;
        text-align: center;
        padding-top: 2%;
        color: white;
        font-size: 200%;
    }

    .divtres {
        background: transparent;
        display: flex;
        width: 40%;
        height: 100%;
        text-decoration: none;
        float: left;
        position: relative;
    }

    .divcuatro {
        background: transparent;
        width: 100%;
        height: 25%;
        list-style: none;
        display: flex;
        font-size: medium;
        align-items: center;
        justify-content: space-between;
    }

    .divcuatro a {
        color: white;
        text-decoration: none;
        list-style: none;
    }

    .divcinco {
        background: transparent;
        width: 100%;
        height: 70%;
        position: absolute;
        font-size: 50%;
        display: block;
        bottom: 0;
        padding-top: 3%
    }

    .divseis {
        background: transparent;
        height: 100%;
        width: 30%;
        /*float: left;*/
        /*padding-left: .5%;*/
        overflow: hidden;
    }

    .estilobuscador {
        height: 80%;
        width:80%;
        /* border-radius: 5px; */
        /* barra buscador */
    }

    .iconosearch {
        width: 70%;
        height: 90%;
        /* icono lupa  */
    }

    .botonsearch {
        height: 80%;
        /* border-radius: 5px; */
        /* boton buscar */
    }

    #perfillogo {
        color: white;
        height: 70%;
        width: 30%;
        /* icono logo */
    }

    #carritologo {
        color: white;
        height: 70%;
        width: 30%;
        /* iconocarrito */
    }

    #perfil {
        float: left;
        width: 33%;
        height: 90%;
        padding-left: 0;
        padding-bottom: 2%;
            /* boton perfil */
    }

    #carrito {
        float: left;
        width: 49%;
        height: 90%;
        padding-right: 0;
        padding-bottom: 2%;
        /* boton carrito */
    }

    .perfil {
        font-size: 200%;
        /* padding-bottom:2% */
    }

    .carrito {
        font-size: 200%
            /* padding-bottom:     */
    }
}

@media (min-width: 1400px) and (max-width: 1999px) {
    .estilonav {
        background: #000000;
        width: 100%;
        height: 70px;
        position: relative;
        overflow: hidden;
    }
    .containerCategoriasMovil {top:73px;}
    
    .divuno {
        background: transparent;
        width: 33%;
        height: 100%;
        padding-left: 2.5%;
        float: left;
    }

    .estilologo {
        width: 75%;
        height: 91%;
        padding-top: 3%;
        padding-right: .5%;
    }

    .divdos {
        background: transparent;
        display: flex;
        width: 33%;
        height: 100%;
        float: left;
        text-align: center;
        padding-top: 1%;
        color: white;
        font-size: 150%;
    }

    .divtres {
        background: transparent;
        display: flex;
        width: 40%;
        height: 100%;
        text-decoration: none;
        float: left;
        position: relative;
    }

    .divcuatro {
        background: transparent;
        width: 100%;
        height: 25%;
        list-style: none;
        display: flex;
        font-size: small;
        align-items: center;
        justify-content: space-between;
    }

    .divcuatro a {
        color: white;
        text-decoration: none;
        list-style: none;
    }

    .divcinco {
        background: transparent;
        width: 100%;
        height: 80%;
        position: absolute;
        font-size: 50%;
        display: block;
        bottom: -15%;
    }

    .divseis {
        background: transparent;
        height: 100%;
        width: 30%;
        /*float: left;*/
        /*padding-left: .5%;*/
        overflow: hidden;
    }

    .estilobuscador {
        height: 80%;
        width:80%;
        /* border-radius: 5px; */
        /* barra buscador */
    }

    .iconosearch {
        /*padding-top: 4%;*/
        width: 70%;
        height: 90%;
        /* icono lupa  */
    }

    .botonsearch {
        height: 80%;
        /* border-radius: 5px; */
        /* boton buscar */
    }

    #perfillogo {
        color: white;
        height: 100%;
        width: 30%;
        margin-top: -30%;
        /* icono logo */
    }

    #carritologo {
        color: white;
        height: 100%;
        width: 30%;
        margin-top: -30%;
        /* iconocarrito */
    }

    #perfil {
        /*float: left;*/
        width: 33%;
        height: 47.06px;
        line-height: 1.2;
        padding: 0;
        /*margin-left: 4%;*/
    }

    #carrito {
        /*float: left;*/
        width: 33%;
        height: 47.06px;
        line-height: 1.2;
        padding: 0;
    }

    .perfil {
        font-size: 111%;
    }

    .carrito {
        font-size: 108%
    }
}

@media (min-width: 1251px) and (max-width: 1400px) {
    .estilonav {
        background: #000000;
        width: 100%;
        height: 60px;
        position: relative;
        overflow: hidden;
    }
    .containerCategoriasMovil {top:63px;}

    .divuno {
        background: transparent;
        width: 33%;
        height: 100%;
        padding-left: 2.5%;
        float: left;
    }

    .estilologo {
        width: 80%;
        height: 96%;
        padding-top: 3%;
        padding-right: .5%;
    }

    .divdos {
        background: transparent;
        display: flex;
        width: 33%;
        height: 100%;
        float: left;
        text-align: center;
        padding-top: 1%;
        color: white;
        font-size: 110%;
    }

    .divtres {
        background: transparent;
        display: flex;
        width: 40%;
        height: 100%;
        text-decoration: none;
        float: left;
        position: relative;
    }

    .divcuatro {
        background: transparent;
        width: 100%;
        height: 25%;
        list-style: none;
        display: flex;
        font-size: small;
        align-items: center;
        justify-content: space-between;
    }

    .divcuatro a {
        color: white;
        text-decoration: none;
        list-style: none;
    }

    .divcinco {
        background: transparent;
        width: 100%;
        height: 90%;
        position: absolute;
        font-size: 50%;
        display: block;
        bottom: -20%;
    }

    .divseis {
        background: transparent;
        height: 100%;
        width: 30%;
        /*float: left;*/
        /*padding-left: .5%;*/
        overflow: hidden;
    }

    .estilobuscador {
        height: 80%;
        width:80%;
        /* barra buscado */
    }

    .iconosearch {
        width: 70%;
        height: 90%;
        /* icono lupa  */
    }

    .botonsearch {
        height: 80%;
        /* boton buscar */
    }

    #perfillogo {
        color: white;
        height: 100%;
        width: 30%;
        margin-top: -30%;
        /* icono logo */
    }

    #carritologo {
        color: white;
        height: 100%;
        width: 30%;
        margin-top: -30%;
        /* iconocarrito */
    }

    #perfil {
        /*float: left;*/
        width: 33%;
        height: 47.06px;
        line-height: 1.2;
        padding: 0;
        /*margin-left: 4%;*/
    }

    #carrito {
        /*float: left;*/
        width: 33%;
        height: 47.06px;
        line-height: 1.2;
        padding: 0;
    }

    .perfil {
        font-size: 111%;
    }

    .carrito {
        font-size: 108%
    }
}

@media (min-width: 1100px) and (max-width: 1250px) {
    .estilonav {
        background: #000000;
        width: 100%;
        height: 60px;
        position: relative;
        overflow: hidden;
    }
    .containerCategoriasMovil {top:63px;}

    .divuno {
        background: transparent;
        width: 33%;
        height: 100%;
        padding-left: 2.5%;
        float: left;
    }

    .estilologo {
        width: 80%;
        height: 96%;
        padding-top: 3%;
        padding-right: .5%;
    }

    .divdos {
        background: transparent;
        display: flex;
        width: 33%;
        height: 100%;
        float: left;
        text-align: center;
        padding-top: 1%;
        color: white;
        font-size: 110%;
    }

    .divtres {
        background: transparent;
        display: flex;
        width: 40%;
        height: 100%;
        text-decoration: none;
        float: left;
        position: relative;
    }

    .divcuatro {
        background: transparent;
        width: 100%;
        height: 25%;
        list-style: none;
        display: flex;
        font-size: x-small;
        align-items: center;
        justify-content: space-between;
    }

    .divcuatro a {
        color: white;
        text-decoration: none;
        list-style: none;
    }

    .divcinco {
        background: transparent;
        width: 100%;
        height: 70%;
        position: absolute;
        font-size: 50%;
        display: block;
        bottom: -10%;
    }

    .divseis {
        background: transparent;
        height: 100%;
        width: 30%;
        /*float: left;*/
        /*padding-left: .5%;*/
        overflow: hidden;
    }

    .estilobuscador {
        height: 80%;
        /* barra buscador */
    }

    .iconosearch {
        width: 90%;
        height: 90%;
        /* icono lupa  */
    }

    .botonsearch {
        height: 80%;
        /* boton buscar */
    }

    #perfillogo {
        color: white;
        height: 100%;
        width: 30%;
        margin-top: -40%;
        /* icono logo */
    }

    #carritologo {
        color: white;
        height: 100%;
        width: 30%;
        margin-top: -40%;
        /* iconocarrito */
    }

    #perfil {
        /*float: left;*/
        width: 33%;
        height: 47.06px;
        line-height: 1.2;
        padding: 0;
        /*margin-left: 4%;*/
    }

    #carrito {
        /*float: left;*/
        width: 33%;
        height: 47.06px;
        line-height: 1.2;
        padding: 0;
    }

    .perfil {
        font-size: 100%;
    }

    .carrito {
        font-size: 100%
    }
}

@media (min-width: 900px) and (max-width: 1099px) {

    .estilonav {
        background: #000000;
        width: 100%;
        height: 60px;
        position: relative;
        overflow: hidden;
    }
    .containerCategoriasMovil {top:63px;}

    .divuno {
        background: transparent;
        width: 33%;
        height: 100%;
        padding-left: 2.5%;
        float: left;
    }

    .estilologo {
        width: 100%;
        height: 96%;
        padding-top: 3%;
        padding-right: .5%;
    }

    .divdos {
        background: transparent;
        display: flex;
        width: 33%;
        height: 100%;
        float: left;
        text-align: center;
        padding-top: 1%;
        color: white;
        font-size: 110%;
    }

    .divtres {
        background: transparent;
        display: flex;
        width: 40%;
        height: 100%;
        text-decoration: none;
        float: left;
        position: relative;
    }

    .divcuatro {
        background: transparent;
        width: 100%;
        height: 25%;
        list-style: none;
        display: flex;
        font-size: x-small;
        align-items: center;
        justify-content: space-between;
    }

    .divcuatro a {
        color: white;
        text-decoration: none;
        list-style: none;
    }

    .divcinco {
        background: transparent;
        width: 100%;
        height: 70%;
        position: absolute;
        font-size: 50%;
        display: block;
        bottom: -6%;
    }

    .divseis {
        background: transparent;
        height: 100%;
        width: 30%;
        /*float: left;*/
        /*padding-left: .5%;*/
        overflow: hidden;
    }

    .estilobuscador {
        height: 80%;
        /* barra buscador */
    }

    .iconosearch {
        width: 70%;
        height: 90%;
        /* icono lupa  */
    }

    .botonsearch {
        height: 80%;
        /* boton buscar */
    }

    #perfillogo {
        color: white;
        height: 100%;
        width: 40%;
        margin-top: -40%;
        /* icono logo */
    }

    #carritologo {
        color: white;
        height: 100%;
        width: 40%;
        margin-top: -40%;
        /* iconocarrito */
    }

    #perfil {
        /*float: left;*/
        width: 33%;
        height: 47.06px;
        line-height: 1.2;
        padding: 0;
        /*margin-left: 4%;*/
    }

    #carrito {
        /*float: left;*/
        width: 33%;
        height: 47.06px;
        line-height: 1.2;
        padding: 0;
    }

    .perfil {
        font-size: 100%;
    }

    .carrito {
        font-size: 100%
    }
}

@media (max-width: 990px) {
    .loader {
    	top: 50%;
    	bottom: 50%;
    	left: 47%;
    	right: 50%;
    }
}

@media (min-width: 800px) and (max-width: 899px) {
    .estilonav {
        background: #000000;
        width: 100%;
        height: 60px;
        position: relative;
        overflow: hidden;
    }
    .containerCategoriasMovil {top:63px;}

    .divuno {
        background: transparent;
        width: 33%;
        height: 100%;
        padding-left: 2.5%;
        float: left;
    }

    .estilologo {
        width: 110%;
        height: 96%;
        padding-top: 3%;
        padding-right: .5%;
    }

    .divdos {
        background: transparent;
        display: flex;
        width: 33%;
        height: 100%;
        float: left;
        text-align: center;
        padding-top: 1.5%;
        color: white;
        font-size: 95%;
    }

    .divtres {
        background: transparent;
        display: flex;
        width: 40%;
        height: 100%;
        text-decoration: none;
        float: left;
        position: relative;
    }

    .divcuatro {
        background: transparent;
        width: 100%;
        height: 25%;
        list-style: none;
        display: flex;
        font-size: x-small;
        align-items: center;
        justify-content: space-between;
    }

    .divcuatro a {
        color: white;
        text-decoration: none;
        list-style: none;
    }

    .divcinco {
        background: transparent;
        width: 100%;
        height: 70%;
        position: absolute;
        font-size: 50%;
        display: block;
        bottom: -10%;
    }

    .divseis {
        background: transparent;
        height: 100%;
        width: 30%;
        /*float: left;*/
        /*padding-left: .5%;*/
        overflow: hidden;
    }

    .estilobuscador {
        height: 80%;
        /* barra buscador */
    }

    .iconosearch {
        width: 65%;
        height: 150%;
        /*padding-bottom: 50%;*/
        /* icono lupa  */
    }

    .botonsearch {
        height: 80%;
        padding: auto;
        /* boton buscar */
    }

    #perfillogo {
        color: white;
        height: 100%;
        width: 40%;
        margin-top: -43%;
        /* icono logo */
    }

    #carritologo {
        color: white;
        height: 100%;
        width: 40%;
        margin-top: -43%;
        /* iconocarrito */
    }

    #perfil {
        /*float: left;*/
        width: 33%;
        height: 47.06px;
        line-height: 1.2;
        padding: 0;
        /*margin-left: 4%;*/
    }

    #carrito {
        /*float: left;*/
        width: 33%;
        height: 47.06px;
        line-height: 1.2;
        padding: 0;
    }

    .perfil {
        font-size: 95%;
    }

    .carrito {
        font-size: 95%
    }
}

@media (min-width: 80px) and (max-width: 799px) {

    #listamodelos { display: none; }

    .estilonav {
        background: #000000;
        width: 100%;
        height: 60px;
        position: relative;
        overflow: hidden;
    }

    .containerCategoriasMovil { top:63px; max-width:100%; }
    
    #texcategorias {top:63px;}
    .divuno {
        background: transparent;
        width: 33%;
        height: 100%;
        padding-left: 1.5%;
        float: left;
    }

    .estilologo {
        width: 110%;
        height: 90%;
        padding-top: 5%;
        padding-right: 5%;
    }

    .divdos {
        background: transparent;
        display: flex;
        width: 33%;
        height: 100%;
        float: left;
        text-align: center;
        padding-top: 1.5%;
        color: white;
        font-size: 90%;
    }

    .divtres {
        background: transparent;
        display: flex;
        width: 40%;
        height: 100%;
        text-decoration: none;
        float: left;
        position: relative;
    }

    .divcuatro {
        background: transparent;
        width: 100%;
        height: 25%;
        list-style: none;
        display: flex;
        font-size: x-small;
        align-items: center;
        justify-content: space-between;
    }

    .divcuatro a {
        color: white;
        text-decoration: none;
        list-style: none;
    }

    .divcinco {
        background: transparent;
        width: 100%;
        height: 70%;
        position: absolute;
        font-size: 50%;
        display: block;
        bottom: -10%;
    }

    .divseis {
        background: transparent;
        height: 100%;
        width: 30%;
        /*float: left;*/
        /*padding-left: .5%;*/
        overflow: hidden;
    }

    .estilobuscador {
        height: 80%;
        /* barra buscador */
    }

    .iconosearch {
        width: 70%;
        height: 145%;
        /*padding-bottom: 40%;*/
        /* icono lupa  */
    }

    .botonsearch {
        height: 80%;
        /* boton buscar */
    }

    #perfillogo {
        color: white;
        height: 100%;
        width: 50%;
        margin-top: -43%;
        /* icono logo */
    }

    #carritologo {
        color: white;
        height: 100%;
        width: 50%;
        margin-top: -43%;
        /* iconocarrito */
    }

    #perfil {
        /*float: left;*/
        width: 33%;
        height: 90%;
        /*margin-left: 4%;*/
    }

    #carrito {
        /*float: left;*/
        width: 33%;
        height: 90%;
    }

    .perfil {
        font-size: 95%;
    }

    .carrito {
        font-size: 95%
    }
}

@media (max-width: 767px) {
    .loader {
    	top: 50%;
    	bottom: 50%;
    	left: 46%;
    	right: 50%;
    }
}

@media (min-width: 501px) and (max-width: 699px) {
    .estilonav {
        background: #000000;
        width: 100%;
        height: 60px;
        position: relative;
        overflow: hidden;
    }
    .containerCategoriasMovil {top:63px;}

    .divuno {
        background: transparent;
        width: 33%;
        height: 100%;
        float: left;
    }

    /* estilo logo Sori BUy */

    .estilologo {
        width: 110%;
        height: 85%;
        padding-top: 16%;
        padding-right: 2%;
    }

    .divdos {
        background: transparent;
        display: flex;
        width: 33%;
        height: 100%;
        float: left;
        text-align: center;
        padding-top: 1.9%;
        color: white;
        font-size: 10px;
        margin-right: 1%;
        margin-left: 1%;
    }
    
    .divtres {
        background: transparent;
        display: flex;
        width: 44%;
        height: 100%;
        text-decoration: none;
        float: left;
        position: relative;
    }

    .divcuatro {
        display: none;
    }

    .divcuatro a {
        display: none;
    }

    .divcinco {
        background: transparent;
        width: 100%;
        height: 60%;
        position: absolute;
        display: block;
        bottom: 10%;
    }

    .divseis {
        background: transparent;
        height: 100%;
        width: 22%;
        float: left;
        /*padding-left: .5%;*/
        overflow: hidden;
    }

    .estilobuscador {
        height: 89%;
        /* barra buscador */
    }

    .iconosearch {
        width: 10px;
        height: 35px;
        /*padding-bottom: 20px;*/
        /* icono lupa  */
    }

    .botonsearch {
        height: 89%;
        /* boton buscar */
    }

    #perfillogo {
        color: white;
        height: 120%;
        width: 60%;
        margin-top: -63%;
        /* icono logo */
    }

    #carritologo {
        color: white;
        height: 120%;
        width: 60%;
        margin-top: -63%;
        /* iconocarrito */
    }

    #perfil {
        /*float: left;*/
        width: 33%;
        height: 90%;
        /*margin-left: 4%;*/
    }

    #carrito {
        /*float: left;*/
        width: 33%;
        height: 90%;
    }

    .perfil {
        display: none;
    }

    .carrito {
        display: none;
    }
}

@media (min-width: 501px) and (max-width: 650px) {
    .divseis {
        background: transparent;
        height: 100%;
        width: 23%;
        float: left;
        /*padding-left: 0;*/
        overflow: hidden;
    }

    #perfillogo {
        color: white;
        height: 120%;
        width: 70%;
        top: 10%
            /* margin-top: -63%; */
            /* icono logo */
    }

    #carritologo {
        color: white;
        height: 120%;
        width: 70%;
        margin-top: -63%;
        /* iconocarrito */
    }

    #perfil {
        /*float: left;*/
        width: 33%;
        height: 90%;
        /*margin-left: 4%;*/
    }

    #carrito {
        /*float: left;*/
        width: 33%;
        height: 90%;
    }
}

@media (max-width: 650px) {
    .loader {
    	top: 50%;
    	bottom: 50%;
    	left: 45%;
    	right: 50%;
    }
}

@media (min-width: 501px) and (max-width: 550px) {
    .divseis {
        background: transparent;
        height: 100%;
        width: 23%;
        float: left;
        padding-left: 0;
        overflow: hidden;
    }

    #perfillogo {
        color: white;
        height: 120%;
        width: 85%;
        /* margin-top: -63%; */
        /* icono logo */
    }

    #carritologo {
        color: white;
        height: 120%;
        width: 85%;
        /* margin-top: -63%; */
        /* iconocarrito */
    }

    #perfil {
        /*float: left;*/
        width: 33%;
        height: 90%;
        /*margin-left: 4%;*/
    }

    #carrito {
        /*float: left;*/
        width: 33%;
        height: 90%;
    }
}

/* responsive 50-500 c*/

@media (min-width: 50px) and (max-width: 500px) {
    #carNumber { display: none; }

    .estilonav {
        background: #000000;
        width: 100%;
        height: 80px;
        position: relative;
        overflow: hidden;
    }
    
    #texcategorias {top:83px;}
    
    .containerCategoriasMovil {top:83px;max-width:100%;}

    .divuno {
        background: transparent;
        width: 50%;
        height: 60%;
        padding-left: 10px;
        float: left;
    }
    
    .div__accountMesage {
        display: none;
    }

    .estilologo {
        width: 60%;
        height: 90%;
        padding-top: 1%;
        padding-left: 25%;
    }

    .divdos { display: none; }
    
    #btn-menu-barras2 { font-size: 1.6em; }
    
    .container_logo_messages { display: none; }
    
    .divtres {
        background: transparent;
        display: flex;
        width: 72%;
        height: 50%;
        text-decoration: none;
        float: left;
        position: absolute;
        top: 25%;
        left: 8%;
    }

    .divcuatro { display: none; }

    .divcuatro a { display: none; }

    .divcinco {
        background: transparent;
        width: 100%;
        height: 145%;
        position: absolute;
        display: block;
        margin-left: 1%;
        margin-right: 1%;
        bottom: -12%;
    }

    .divseis {
        background: transparent;
        height: 100%;
        width: 20%;
        float: right;
        margin-left: 0;
        overflow: hidden;
    }

    .estilobuscador {
        height: 99%;
        width:98%;
        margin-bottom: 1%;
        /* barra buscador */
    }

    .iconosearch {
        width: 95%;
        height: 95%;
        /*padding-bottom: 4px;*/
        /* icono lupa  */
    }

    .botonsearch {
        height: 100%;
        margin-right: 2%;
        /* boton buscar */
    }

    #perfillogo {
        color: white;
        height: 120%;
        width: 80%;
        margin-top: -173%;
        /* icono logo */
    }

    #carritologo {
        color: white;
        height: 120%;
        width: 80%;
        margin-top: -173%;
        /* iconocarrito */
    }

    #perfil {
        /*float: left;*/
        width: 49%;
        height: 90%;
        /*margin-left: 4%;*/
        margin-top: -10%;
    }

    #carrito {
        /*float: left;*/
        width: 33%;
        height: 90%;
        margin-top: -30%;
    }

    .perfil { display: none; }

    .carrito { display: none; }

    #menu {
        background-color: transparent;
        width: 10%;
        height: 10%;
        position: absolute;
        top: 0;
        padding-left: 4%;
        z-index: 100;
    }

    #btn-menu-cerrar { display: none; }

    .contenedor { padding-top: 80%; }

    .separadordos { display: none; }
}

@media (max-width: 500px) {
    .loader {
    	top: 50%;
    	bottom: 50%;
    	left: 43%;
    	right: 50%;
    }
}

@media (max-width:434px) {
    .divcinco {
        background: transparent;
        width: 100%;
        height: 148%;
        position: absolute;
        display: block;
        bottom: -12%;
    }

    .estilonav {
        background: #000000;
        width: 100%;
        height: 60px;
        position: relative;
        overflow: hidden;
    }

    #texcategorias {top:63px;}
    .estilologo {
        width: 65%;
        height: 90%;
        padding-top: 1%;
        padding-left: 25%;
        display: none;
    }

    .estilobuscador {
        height: 96%;
        width: 98%;
        margin-top: .5%;
        /* barra buscador */
    }

    .iconosearch {
        width: 95%;
        height: 100%;
        /*padding-bottom: 4px;*/
        /* icono lupa  */
    }

    .botonsearch {
        height: 100%;
        margin-right: 1%;
        padding-top: .5%;
        /* boton buscar */
    }

    #perfillogo {
        color: white;
        height: 120%;
        width: 95%;
        margin-top: -193%;
        /* icono logo */
    }

    #carritologo {
        color: white;
        height: 120%;
        width: 95%;
        margin-top: -193%;
        /* iconocarrito */
    }

    #perfil {
        /*float: left;*/
        width: 33%;
        height: 90%;
        /*margin-left: 4%;*/
    }

    #carrito {
        /*float: left;*/
        width: 33%;
        height: 90%;
    }

}

@media (max-width:400px) {
    .loader {
    	top: 50%;
    	bottom: 50%;
    	left: 40%;
    	right: 50%;
    }
    
    .estilologo {
        width: 68%;
        height: 90%;
        padding-top: 1%;
        padding-left: 25%;
        display: none;
    }

    .estilobuscador {
        height: 98%;
        width: 98%;
        margin-top: .5%;
        /* barra buscador */
    }

    .iconosearch {
        width: 20px;
        height: 45px;
        /*padding-bottom: 20px;*/
        /* icono lupa  */
    }

    .botonsearch {
        height: 98%;
        margin-right: 1%;
        margin-top: .5%;
        /* boton buscar */
    }

    #perfillogo {
        color: white;
        height: 130%;
        width: 120%;
        margin-top: -220%;
        /* icono logo */
    }

    #carritologo {
        color: white;
        height: 130%;
        width: 120%;
        margin-top: -220%;
        /* iconocarrito */
    }

    #perfil {
        /*float: left;*/
        width: 40%;
        height: 90%;
        /*margin-left: 4%;*/
    }

    #carrito {
        /*float: left;*/
        width: 33%;
        height: 90%;
    }

    .divcinco {
        background: transparent;
        width: 100%;
        height: 145%;
        position: absolute;
        display: block;
        bottom: -12%;
    }
}

@media (max-width:350px) {
    .estilologo {
        width: 85%;
        height: 90%;
        padding-top: 1%;
        padding-left: 25%;
    }

    .divseis {
        background: transparent;
        height: 100%;
        width: 34%;
        float: left;
        margin-left: 15%;
        overflow: hidden;
    }
}

@media (max-width:340px) {
    .estilologo {
        width: 85%;
        height: 90%;
        padding-top: 1%;
        padding-left: 25%;
    }

    .divseis {
        background: transparent;
        height: 100%;
        width: 36%;
        float: left;
        margin-left: 13%;
        overflow: hidden;
    }
}

@media (max-width:300px) {
    .divcinco {
        background: transparent;
        width: 100%;
        height: 148%;
        position: absolute;
        display: block;
        margin-left: 1%;
        margin-right: 1%;
        bottom: -12%;
    }

    .estilologo {
        width: 85%;
        height: 90%;
        padding-top: 1%;
        padding-left: 25%;
    }

    .divseis {
        background: transparent;
        height: 100%;
        width: 40%;
        float: left;
        margin-left: 8%;
        overflow: hidden;
    }

    #perfillogo {
        color: white;
        height: 130%;
        width: 120%;
        margin-top: -230%;
        /* icono logo */
    }

    #carritologo {
        color: white;
        height: 130%;
        width: 120%;
        margin-top: -230%;
        /* iconocarrito */
    }

    #perfil {
        /*float: left;*/
        width: 33%;
        height: 90%;
        /*margin-left: 4%;*/
    }

    #carrito {
        /*float: left;*/
        width: 33%;
        height: 90%;
    }

}

@media (max-width:265px) {
    .estilologo {
        width: 85%;
        height: 90%;
        padding-top: 1%;
        padding-left: 25%;
    }

    .divseis {
        background: transparent;
        height: 100%;
        width: 44%;
        float: left;
        margin-left: 6%;
        overflow: hidden;
    }

    #perfillogo {
        color: white;
        height: 120%;
        width: 125%;
        margin-top: -310%;
        /* icono logo */
    }

    #carritologo {
        color: white;
        height: 120%;
        width: 125%;
        margin-top: -310%;
        /* iconocarrito */
    }

    #perfil {
        /*float: left;*/
        width: 33%;
        height: 90%;
        /*margin-left: 4%;*/
    }

    #carrito {
        /*float: left;*/
        width: 33%;
        height: 90%;
    }

}

@media (max-width:230px) {
    .estilologo {
        width: 100%;
        height: 90%;
        padding-top: 1%;
        padding-left: 25%;
    }

    .divseis {
        background: transparent;
        height: 100%;
        width: 45%;
        float: left;
        margin-left: 5%;
        overflow: hidden;
    }

    #perfillogo {
        color: white;
        height: 130%;
        width: 160%;
        margin-top: -310%;
        /* icono logo */
    }

    #carritologo {
        color: white;
        height: 130%;
        width: 160%;
        margin-top: -310%;
        /* iconocarrito */
    }

    #perfil {
        /*float: left;*/
        width: 33%;
        height: 90%;
        /*margin-left: 4%;*/
    }

    #carrito {
        /*float: left;*/
        width: 33%;
        height: 90%;
    }
}

@media (max-width:214px) {
    .estilologo {
        width: 100%;
        height: 75%;
        padding-top: 1%;
        padding-left: 35%;
    }

    .divseis {
        background: transparent;
        height: 100%;
        width: 50%;
        float: left;
        margin-left: 0;
        overflow: hidden;
    }

    .estilobuscador {
        height: 96%;
        width: 95%;
        margin-top: .5%;
        /* barra buscador */
    }

    .iconosearch {
        width: 20px;
        height: 40px;
        /*padding-bottom: 20px;*/
        /* icono lupa  */
    }

    .botonsearch {
        height: 96%;
        margin-right: 1%;
        margin-top: .5%;
        /* boton buscar */
    }

    #perfillogo {
        color: white;
        height: 130%;
        width: 150%;
        margin-top: -323%;
        /* icono logo */
    }

    #carritologo {
        color: white;
        height: 130%;
        width: 150%;
        margin-top: -323%;
        /* iconocarrito */
    }

    #perfil {
        /*float: left;*/
        width: 33%;
        height: 90%;
        /*margin-left: 4%;*/
    }

    #carrito {
        /*float: left;*/
        width: 33%;
        height: 90%;
    }
}

@media (max-width:185px) {
    .estilologo {
        width: 110%;
        height: 70%;
        padding-top: 1%;
        padding-left: 35%;
    }

    .divseis {
        background: transparent;
        height: 100%;
        width: 50%;
        float: left;
        margin-left: 0;
        overflow: hidden;
    }

    .estilobuscador {
        height: 96%;
        width: 95%;
        border-radius: 5px;
        margin-top: .5%;
        /* barra buscador */
    }

    .iconosearch {
        width: 20px;
        height: 50px;
        /*padding-bottom: 20px;*/
        /* icono lupa  */
    }

    .botonsearch {
        height: 96%;
        border-radius: 5px;
        margin-right: 1%;
        margin-top: .5%;
        /* boton buscar */
    }

    #perfillogo {
        color: white;
        height: 130%;
        width: 180%;
        margin-top: -385%;
        /* icono logo */
    }

    #carritologo {
        color: white;
        height: 130%;
        width: 180%;
        margin-top: -385%;
        /* iconocarrito */
    }

    #perfil {
        /*float: left;*/
        width: 33%;
        height: 90%;
        /*margin-left: 4%;*/
    }

    #carrito {
        /*float: left;*/
        width: 33%;
        height: 90%;
    }
}

/************************************************************inicio seccion de perfil-carrito *************************************************/

.perfil:hover {
    color: rgb(248, 124, 8);
    transform: scale(1.20);
    transition: all 0.5s;
}

.perfil {
    color: rgb(32, 216, 32);
    background: transparent;
}

.carrito { color: rgb(32, 216, 32); }

.botonsearch { background: none; }

.botonsearch:hover {
    background: rgb(17, 201, 17);
}

.iconosearch { color: rgb(255, 255, 255); }

/*input::placeholder { font-size: 0; }*/

.a {
    list-style: none;
    text-decoration: none;
    color: #000000;
}

.iconosmodallogo { color: #1a01fa }

.iconosmodal:hover { color: rgb(248, 124, 8); }

.iconosmodalcerrar:hover { color: rgb(255, 0, 0); }

/* **************************************************************inicio modal perfil******************************************************* */

.modal-backdrop.show {
    opacity: 1;
    background: white;
}

.modal-open .container-fluid {
    -webkit-filter: blur(2px);
    -moz-filter: blur(2px);
    -o-filter: blur(2px);
    -ms-filter: blur(2px);
    filter: blur(5px);
}

/*fin de modal login*/



/* ***************************************************************fin modal perfil********************************************************* */

/************************************************************fin seccion de perfil-carrito- login*************************************************/

/* *********************************************************   inicio seccion separdores   ****************************************************** */

.separadordos {
    height: 3px;
    background: rgb(17, 15, 15);
}

.separadortres {
    height: 3px;
    background: #c0ea17;
    background: -moz-linear-gradient(left, #c0ea17 0, #6af2b2 25%, #0ad6d2 50%, #5885ef 79%, #2d17ed 100%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(left, #c0ea17 0, #6af2b2 25%, #0ad6d2 50%, #5885ef 79%, #2d17ed 100%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, #c0ea17 0, #6af2b2 25%, #0ad6d2 50%, #5885ef 79%, #2d17ed 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#c0ea17', endColorstr='#2d17ed', GradientType=1);
    /* IE6-9 */
}

/* ******************************************************************** fin seccion separadores ***************************************************** */

/*********************************************************************** inicio pop up *************************************************************/



/**************************************************************************fin pop up*******************************************************/

/* ********************************************************************** fin header ************************************************************** */

/************************************************************************inicio menu lateral categorias*************************************************************/

/* body */

.contenedor {
    width: 100%;
}

main article {
    background: #fff;
    margin: 0 0;
    padding: 5px;
    height: 1000px;
}

/* ------------------------- */

/* Enlaces del NAV */

/* ------------------------- */
.menu {
    background: #000000;
    height: 30px;
    padding: 0;
    /*margin-bottom: 8px;*/
    /* espacio para identificar body/header */
}

.menu .contenedor-botones-menu {
    /* display: flex; */
    display: none;
    justify-content: space-between;
}

.menu .contenedor-botones-menu button {
    font-size: 20px;
    color: #fff;
    /* padding: 10px 20px; */
    border: 1px solid transparent;
    display: inline-block;
    cursor: pointer;
    background: none;
}

.menu .contenedor-botones-menu button:hover {
    border: 1px solid rgba(255, 255, 255, .4);
}

.menu .contenedor-botones-menu .btn-menu-cerrar.activo {
    display: none;
}

.menu .contenedor-botones-menu .btn-menu-cerrar.activo {
    display: inline-block;
}

.menu .contenedor-enlaces-nav {
    display: flex;
    justify-content: center;
    align-items: center;
}

.menu .btn-departamentos {
    color: #fff;
    /* padding:0px; */
    border-radius: 3px;
    display: flex;
    /* align-items: flex-end; */
    border: 1px solid transparent;
    font-size: 12px;
    cursor: default;
    width: 20%;
}

.menu .btn-departamentos:hover {
    border: 1px solid rgba(255, 255, 255, .4);
}

.menu .btn-departamentos span {
    display: block;
    font-size: 14px;
    font-weight: bold;
}

.menu .contenedor-enlaces-nav .enlaces a {
    color: white;
    border: 1px solid transparent;
    padding: 5px;
    /*  espacio de los enlaces principales */
    font-size: 14px;
    text-decoration: none;
}

/* ------------------------- */

/* GRID */

/* ------------------------- */

.contenedor-grid {
    position: relative;
}

.grid {
    width: 100%;
    display: none;
    position: absolute;
    top: -4px;
    /*  <!------------------------------------------separacion de menu ---------------------------------> */
    z-index: 1000;
    grid-template-rows: 3fr;
    grid-template-areas: "categorias subcategorias subcategorias subcategorias";
}

.grid.activo {
    display: grid;
}

.grid::before {
    content: "";
    display: block;
    background: transparent;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 5px solid #fff;
    position: absolute;
    top: -5px;
    left: 0;
}

.grid>div {
    background: #fff;
    box-shadow: 0 3px 6px rgba(0, 0, 0, .10);
}

/* ------------------------- */

/* Categorias */

/* ------------------------- */

.grid .btn-regresar {
    background: #f59d05;
    color: #fff;
    border: none;
    padding-top: 5px;
    border-radius: 3px;
    margin: 10px;
    font-size: 16px;
    cursor: pointer;
    display: none;
}

.grid .btn-regresar i {
    margin-right: 10px;
}

.grid .categorias {
    grid-area: categorias;
    padding-top: 10px;
    min-height: 300px;
    overflow: auto;
    padding-left: 10px;
    width: auto;
}

.grid .categorias .subtitulo {
    display: none;
}

.grid .categorias a {
    color: #000;
    font-size: 14px;
    display: flex;
    justify-content: space-between;
    padding: 2px 2px;
    text-decoration: none;
}

.grid .categorias a i {
    display: none;
}

.grid .categorias a:hover {
    color: #E47911;
    font-weight: bold;
}

.grid .categorias a:hover i {
    display: inline-block;
}

/* ------------------------- */

/* Subcategorias */

/* ------------------------- */

.grid .contenedor-subcategorias {
    grid-area: subcategorias;
}

.grid .subcategoria {
    display: none;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr;
    height: 100%;
}

.grid .subcategoria.activo {
    display: grid;
}

.grid .subsubcategoria {
    padding: 0;
    /* display: none; */
    position: absolute;
    visibility: hidden;
    background: red;
    /* height: 100%; */
    z-index: 1;
}

.grid .enlaces-subcategoria>a:focus+div {
    /* display: grid; */
    /* transition: all 0.3s; */
    /* display:block; */
    visibility: visible;
    left: 50%;
    top: 0;
}

.grid .subcategoria img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.grid .enlaces-subcategoria {
    padding-top: 10px;
    height: 100%;
    width: 100%;
    overflow: auto;
}

.grid .enlaces-subcategoria a {
    color: #000;
    display: block;
    font-size: 14px;
    padding: 2px 2px;
    text-decoration: none;
}

.grid .enlaces-subcategoria a:hover {
    color: #E47911;
}

.grid .subtitulo {
    font-size: 18px;
    font-weight: normal;
    color: #E47911;
    padding: 5px 10px;
}

.grid .banner-subcategoria a {
    display: block;
    max-height: 70%;
}

.grid .galeria-subcategoria {
    display: flex;
    flex-wrap: wrap;
    align-content: start;
    max-height: 70%;
}

.grid .galeria-subcategoria a {
    width: 100%;
    height: 100%;
}

@media (max-width:500px) {
    #quitarmenucategoriaslogo {
        background: transparent;
        color: transparent;
        width: max-content;
    }

    .btn-menu-barras {
        position: absolute;
        top: 0;
        padding-left: 0;
        margin: 5%;
    }
}

@media(max-width:500px) {
    #quitarmenucategorias { display: none; }
}

/* ------------------------- */

/* Mediaqueies */

/* ------------------------- */

@media(max-width:554px) {
    #texcategorias { display: none; }
}

@media screen and (max-width: 500px) {
    .menu .contenedor-enlaces-nav { padding: 0; }

    .menu .contenedor { width: 100%; }
}

@media screen and (max-width: 500px) {
    .menu .contenedor { width: 80%; }

    .menu .contenedor-botones-menu { display: flex; }

    .menu .contenedor-enlaces-nav.activo { transform: translate(0); }

    .menu .btn-departamentos {
        width: 100%;
        align-items: center;
        justify-content: space-between;
        cursor: pointer;
    }

    .menu .btn-departamentos i {
        position: static;
        margin-left: 20px;
        transform: rotate(-90deg);
    }

    .menu .enlaces { width: 100%; }

    .menu .enlaces a {
        display: block;
        margin: 10px 0;
        padding: 10px;
    }

    .grid {
        display: grid;
        transition: .3s ease all;
        transform: translateX(-100%);
        z-index: 3000;
        width: 80%;
        position: fixed;
        top: 0;
        left: 0;
        height: 100vh;
        grid-template-areas: "categorias categorias categorias categorias";
    }

    .grid.activo { transform: translateX(0%); }

    .grid::before { display: none; }

    .grid .btn-regresar { display: inline-block; }

    .grid .categorias .subtitulo { display: block; }

    .grid .contenedor-subcategorias {
        position: absolute;
        top: 0;
        width: 100%;
        height: 100%;
        transition: .3s ease all;
        transform: translateX(-100%);
        overflow: auto;
    }

    .grid .contenedor-subcategorias.activo { transform: translateX(0%); }

    .grid .contenedor-subcategorias .subcategoria {
        grid-template-columns: 1fr;
    }

    .grid .contenedor-subcategorias .banner-subcategoria {
        width: 100%;
        height: 100%;
    }

    .grid .enlaces-subcategoria {
        min-height: 50vh;
        overflow: auto;
    }

    .grid .contenedor-subcategorias .galeria-subcategoria a {
        width: 100%;
        height: 100%;
    }
}

/* inicio efecto linea */
#freefire a {
    color: white;
    text-decoration: none;
    background-image: linear-gradient(rgb(17, 235, 17), rgb(29, 247, 5));
    background-position: 0 100%;
    background-repeat: no-repeat;
    background-size: 0 2px;
    transition: background-size .3s;
    border: 1px solid transparent;
}

#freefire a:hover,
#freefire a:focus { background-size: 100% 2px;    border-left: white 1px solid;border-right: white 1px solid;border-top: white 1px solid;border-radius: 4px; }

/******************inicio menu que se posisiona dentro de menu lateral categorias******************/

.cut-list { display: flex; }

.cut-list__elem { white-space: nowrap; }

.cut-list__dropdown { position: relative; }

.cut-list__drop-toggle {
    cursor: pointer;
    user-select: none;
}

.cut-list__more {
    position: absolute;
    top: 100%;
    right: 0;
    min-width: 150px;
    padding: 0;
    margin: 0;
    text-align: left;
    background-color: #fff;
    z-index: 100;
    display: none;
}

.cut-list__more .is-top {
    top: 100%;
    bottom: auto;
}

.cut-list__more .is-left {
    right: auto;
    left: 0;
}

/****************** fin de menu dentro de menu lateral*****************/

/***********************************************************************fin de menu lateral categorias************************************************************/

.estilologo:hover { cursor: pointer; }

.breadcrumb { font-size: 10px; }