/**
    * Magia de CSS que hace 3 lineas en una fabulosa X cuando haces click
    -----------------------------*/
    #menuToggle {
        display: block;
        z-index: 1;
        -webkit-user-select: none;
        user-select: none;
        left: initial;
    }
    
    #menuToggle input {
        display: block;
        width: 40px;
        height: 32px;
        position: absolute;
        top: 20px;
        left: 5px;
        cursor: pointer;
        opacity: 0;
        z-index: 2;
        -webkit-touch-callout: none;
    }
    
    
    #menuToggle > span {
        display: block;
        width: 25px;
        height: 3px;
        margin-left: 1rem;
        margin-bottom: 5px;
        top: 2px;
        left: initial;
        position: relative;
        background: #747474;
        border-radius: 3px;
        z-index: 1;
        transform-origin: 4px 0px;
        transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0),
        background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0),
        opacity 0.55s ease;
    }
    
    #menuToggle span:first-child {
        transform-origin: 0% 0%;
    }
    
    #menuToggle span:nth-last-child(2) {
        transform-origin: 0% 100%;
        display: block;
        overflow: hidden;
    }
    
    /**
        * Esta pabajo
        -----------------------------*/
    #menuToggle input:checked ~ span {
        opacity: 1;
        transform: rotate(45deg) translate(1px, 0px);
        background: #747474;
        top: 18px;
    }
    
    /**
        * Una x lleva solo 2 lineas asi que la mandamos alv
        -----------------------------*/
    #menuToggle input:checked ~ span:nth-last-child(3) {
        opacity: 0;
        transform: rotate(0deg) scale(0.2, 0.2);
    }
    
    /**
        * Esta parriba
        -----------------------------*/
    #menuToggle input:checked ~ span:nth-last-child(2) {
        transform: rotate(-45deg) translate(1px, 0px);
    }
    
    .burgermenu-active {
        content: "";
        position: fixed;
        left: 0px;
        top: 0px;
        display: block;
        width: 100%;
        height: 100%;
        z-index: 100;
        background: rgba(0, 0, 0, 0.3);
    }
    
    /**
        * El menu escondido
        -----------------------------*/
    
    #menu {
        position: absolute;
        width: 90%;
        max-width: 500px;
        top: 0;
        padding: 0px 0 20px 0!important;
        padding-right: 0;
        padding-left: 0;
        height: 100vh;
        left: 0;
        background: #f1f1f1;
        list-style-type: none;
        -webkit-font-smoothing: antialiased;
        transform-origin: 0% 0%;
        transform: translate(-100%, 0);
        transition: transform 0.3s cubic-bezier(0.77, 0.2, 0.05, 1.0);
        overflow: auto;
    }
    
    #menu > ul > li:first-of-type{border-top:0}
    #menu > ul > li:last-of-type{border-bottom:0}
    
    #menu > ul > li {
        font-size: 22px;
        position: relative;
        float: left;
        width: 100%;
        clear: both;
        border-top: 1px solid #fff;
        border-bottom: 1px solid #dadada;
        margin: 0!important;
    }
    
    #menu > ul li span > a {
        display: flex;
        width: 100%;
        height: inherit;
        align-items: center;
        padding: 10px 10px;
        color: var(--color-text);
        font-size: 14px;
    }
    
    #menu ul li span > a > i {
        position: absolute;
        right: 0;
        top: 0;
        display: flex;
        align-items: center;
        height: inherit;
        width: 50px;
        justify-content: center;
    }
    
    /**
        * On click input destransformamos y mostramos P:
        -----------------------------*/
    #menuToggle input:checked ~ div {
        transform: none;
    
    }
    /**
        * Sombrita mamalona
        -----------------------------*/
    .openmenu {
        --webkit-box-shadow: 20px 10px 50px 80px rgba(0,0,0,0.6);
        -moz-box-shadow: 20px 10px 50px 80px rgba(0,0,0,0.6);
        box-shadow: 20px 10px 50px 80px rgba(0,0,0,0.6);
    }
    
    /**
        * Fin de la magia.
        -----------------------------*/
    
    /**
        * Iconos dentro de burgermenu mobile
        -----------------------------*/
    #menu .menuburger-icons{display:none}
    
    .menuburger-icons {
        display: flex;
        flex-direction: row;
        padding: 10px 15px 0;
    }
    
    div#linkslogin > a {
        font-weight: 700;
    }
    
    
    
    svg.burgersigin {
        width: 35px;
        height: auto;
    }
    
    svg.burgerfavs {
        width: 30px;
        height: auto;
    }
    
    .header-mobile .center-content.header-icons > div{
        margin: 0 8px;
    }
    
    .center-content.header-icons {
        width: 100%;
        justify-content: space-around;
    }

    .center-content.header-icons i{color:var(--color-primary);font-size:19px;}
    
    ul.nav {
    }
    
    span.vtexsc-totalCart span.vtexsc-text {
        font-size: 23px;
        font-weight: 700;
    }
    
    .tieneSub > span a {
        padding: 0 10px 0px;
    }
    #menu .nivel-1,
    #menu .nivel-1 h2,
    #menu .nivel-1 img {
        display: none;
        float: left;
        width: 100%;
    }
    
    #menu .nivel-1 .row {
        display: flex;
        flex-direction: column;
    }
    
    #menu .nivel-1 .row .col .mt-3 {
        display: none;
    }
    
    #menu .tieneSub > span {
        width: 100%;
        margin: 0!important;
    }
    
    #menu .tieneSub > span a {
        font-size: 15px;
        font-weight: 500;
        color: var(--color-text);
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    
    #menu .tieneSub > span a:after {
        font-family: "Font Awesome 5 Free";
        font-weight: 900;
        content: "\f078";
        color: #747474;
        font-size: 20px;
        -webkit-transition: all 0.4s ease;
        -o-transition: all 0.4s ease;
        transition: all 0.4s ease;
    }
    
    #menu .tieneSub.open > span a:after {
        -webkit-transform: rotate(180deg);
        -ms-transform: rotate(180deg);
        -o-transform: rotate(180deg);
        transform: rotate(180deg);
    }
    
    #menu .tieneSub .nivel-1 div.center-content > span {
        font-size: 20px;
    }
    
    #menu .tieneSub .nivel-1 .container .row .col {
        margin-bottom: 1rem;
    }
    
    #menu .tieneSub .nivel-1 .container {
        overflow: auto;
        max-height: 300px;
        margin-top: 10px;
        margin-bottom: 5px;
    }
    
    
    #menudepartamental > li > .nivel-1 >.container > .row > a {
        font-size: 16px;
        color: var(--color-text);
        margin-right: 15px;
        margin-bottom: 10px;
        font-weight: normal;
    }
    
    #menudepartamental > li > .nivel-1 >.container > .row > a:hover{color:var(--color-secondary);text-decoration:none}
    
    .vtexIdUI-user-email.pull-left.muted {
        display: flex;
    }body.list-view span.price {
         margin-top: 20px;
     }
    span.preciotachado, span.preciotachado > span {
        font-weight: 700;
        color: #747474;
        font-size: 16px;
    }
    
    
    .invisible.oculto {
        opacity: 0;
        visibility: hidden;
        flex: 0 0 56%;
    }
    
    span.oldprice {
        text-decoration: line-through;
        /* font-size: 18px; */
    }
    
    .carousel span.price {
        display: flex;
        flex-direction: row;
    }
    
    
    
    /*Mobile Small*/
    @media (min-width: 320px) {
        #menu > ul {
            overflow: auto;
            padding-top: 20px;
            height: 90vh;
            display: block;
        }
        #menu ul li > .nivel-1 > .container > .row > a {
            font-size: 14px;
            font-weight: 500;
            color: #666;
            margin-left: .5rem;
            text-transform: initial;
            margin-bottom: 15px;
        }
        #menu ul li > .nivel-1 > .container > .row > a:last-of-type{color:var(--color-secondary)}
    }
    
    /*Mobile Small*/
    @media (min-width: 375px) {
        #menu > ul {
            max-height: 650px;
    
        }
    }
    
    /* Tablets*/
    @media (min-width:768px){
        #menu{
            max-width:90%;
        }
        #menuToggle input {
            display: block;
            width: 40px;
            height: 40px;
            position: absolute;
            top: 30px;
            left: 40px;
            cursor: pointer;
            opacity: 0;
            z-index: 2;
            -webkit-touch-callout: none;
        }
        #menu > ul li{
            padding-left: 3rem;
            padding-right: 3rem;
        }
        #menu .dept-subtitle {
            font-size: 20px;
        }
    
    }
    
    .newsletter{background:#efefef}


#menu > .justify-content-center{top: 0;left: 0;width: 100%;height: 10vh;margin: 0!important;}