body {
    overflow-x: hidden;
    font-family: var(--font_family_site, "-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial");
}

.font-family-general {
    font-family: var(--font_family_site, "-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial");
}

.hide {
    display: none;
}

.show-flex {
    display: flex;
}

.opacity-0 {
    opacity: 0;
}

.opacity-1 {
    opacity: 1;
}

/*Separador*/

.separator {
    display: flex;
    align-items: center;
    text-align: center;
}

    .separator::before,
    .separator::after {
        content: '';
        flex: 1;
        border-bottom: 1px solid #ced4da;
    }

    .separator:not(:empty)::before {
        margin-right: .25em;
    }

    .separator:not(:empty)::after {
        margin-left: .25em;
    }

/*Control Precio*/
.precio .price-color {
    color: var(--color_precio);
}

/*Scroll Bar*/
/* width */
::-webkit-scrollbar {
    width: 6px;
}

/* Track */
::-webkit-scrollbar-track {
    background: #f1f1f1;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #888;
}

    /* Handle on hover */
    ::-webkit-scrollbar-thumb:hover {
        background: #555;
    }

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

# Search Type Sense

-------------------------------------------------*/
.Search {
    display: grid;
    gap: 0.5rem;
}

.Search-header {
    display: grid;
    align-items: flex-start;
    grid-template-columns: 1fr auto auto auto;
    gap: 0.5rem;
}

.CurrentRefinements {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5em;
}

.Hit-label {
    flex: 1;
    margin-right: 1rem;
}

.Hit-price {
    color: lightslategray;
}

.Pagination {
    display: flex;
    justify-content: center;
    padding: 1rem 0;
    margin: 0 auto;
}

.ais-InfiniteHits-list {
    display: table !important;
}

.ais-CurrentRefinements-label {
    text-transform: capitalize;
}

.ais-Hits-item, .ais-InfiniteHits-item {
    display: contents !important;
}

.ais-ClearRefinements-button {
    height: 2.5rem !important;
}

.ais-RangeInput-submit {
    margin-bottom: 0.5rem !important;
}
/*-----------------------------------------------

# Header

-------------------------------------------------*/
nav:not(.nav-tabs) {
    background: #fff;
    background-color: transparent;
    padding: 10px;
    position: relative;
    z-index: 1001;
}

nav.big {
    background: #fff;
    padding: 10px;
    /*position: relative;*/
    z-index: 1003;
    position: sticky;
    top: 0;
}

    nav.big h1 {
        float: left;
        max-width: 200px;
    }

        nav.big h1 img {
            max-width: 100%;
        }

    nav.big ul.opciones li select {
        border: none;
        color: #4D4D4F;
        padding: 12px;
        margin-right: .5rem;
    }

        nav.big ul.opciones li select:focus {
            outline: none;
        }

    nav.big ul.opciones {
        text-align: center;
        float: right;
        padding: 0;
    }

        nav.big ul.opciones li {
            display: inline-block;
        }

            nav.big ul.opciones li a:not(.menu-option-user) {
                text-decoration: none;
                display: block;
                padding: 5px 20px;
                color: #4D4D4F;
                font-family: var(--font_family_menu, "'Roboto', sans-serif");
                font-size: 14px;
                line-height: 32px;
                transition: all 200ms linear;
                border-right: 1px solid #A1A1A1;
                text-align: center;
            }

    nav.big a:hover:not(.btn),
    nav.small a:hover:not(.btn) {
        color: var(--color_general);
        text-decoration: none;
    }

    nav.big ul.opciones li a:hover {
        color: var(--color_general);
    }

.logo-small {
    display: none;
}

.opciones-sm {
    display: none;
}

    .opciones-sm ul {
        list-style: none;
        padding: 0;
    }

        .opciones-sm ul li {
            padding-bottom: 10px;
            border-bottom: 1px solid rgba(0,0,0,0.13);
            padding-left: 10px;
            padding-top: 10px;
            width: 95%;
        }

            .opciones-sm ul li a {
                color: #666666;
            }

            .opciones-sm ul li select {
                padding: 5px 10px;
            }

nav.small {
    background: #fff;
    padding: 10px 20px;
    position: fixed;
    box-sizing: border-box;
    width: 100%;
    top: 0;
    z-index: 1002;
    box-shadow: 0px 2px 2px #d4d4d4;
    transition: all 0.3s ease-in-out;
}

    nav.small h1, nav.small a {
        color: #333;
    }

    nav.small h1 {
        float: left;
        margin-bottom: 0;
    }

        nav.small h1 img, .small-logo h1 img {
            width: 150px;
        }

    nav.small .input-group.buscar-lg {
        margin-top: 10px;
    }

    nav.small .shopping-cart-ld {
        margin-top: 10px;
    }

    nav.small.visible {
        top: 0;
    }

.input-group.buscar-lg {
    float: left;
}

    .input-group.buscar-lg input {
        padding: 22px 15px;
    }

    .input-group.buscar-lg button {
        background: var(--color_general);
        color: #fff;
        padding-left: 20px;
        padding-right: 20px;
        border-color: transparent;
    }

.deseos {
    float: right;
    margin-right: 15px;
}

    .deseos button {
        padding: 8px 12px;
        font-size: 20px;
        background: var(--color_general);
        color: #fff;
        border: none;
        border-radius: 3px;
    }

        .deseos button:hover {
            background: #2C2C2C;
        }

.shopping-cart-ld {
    float: right;
}

    .shopping-cart-ld a.btn-cart {
        background: var(--color_general);
        color: #fff;
        border: none;
        font-size: 15px;
    }

        .shopping-cart-ld a.btn-cart i {
            margin-right: 20px;
        }

.header-xs {
    display: none;
}

.btn-success, .btn-success:focus {
    background: var(--color_general);
    color: #fff;
    padding: 10px 20px;
    border: none;
}

    .btn-success:hover {
        background: #606060;
    }

.btn-danger {
    padding: 10px 20px;
    border: none;
}

.btn-cart {
    font-weight: 600;
    padding: 8px 20px;
}

.cart-quantity {
    position: absolute;
    text-align: center;
    font-size: 11px;
    padding: 5px;
    line-height: .9;
    border-radius: 50px;
    top: -5px;
    right: 9px;
    background: #333;
}

nav.small .cart-quantity {
    top: 5px;
    right: 10px;
}

.search-and-account {
    margin-left: 10px;
    margin-top: 15px;
}

.dropdown-user {
    border-right: 1px solid #cccccc;
}

    .dropdown-user .dropdown-toggle {
        padding: 5px 20px;
        color: #4D4D4F;
        font-family: var(--font_family_site, "'Roboto', sans-serif");
        font-size: 14px;
        line-height: 32px;
        text-decoration: none;
    }

.menu-option-user {
    font-family: var(--font_family_site, "'Roboto', sans-serif");
    font-size: 14px;
    cursor: pointer;
}

    .menu-option-user:hover {
        color: var(--color_general);
    }

a.menu-option-user {
    border-right: none;
}

    a.menu-option-user:active {
        background-color: transparent;
    }

header.ecomm-main-header.go-down nav.big {
    top: -100px;
}

header.ecomm-main-header.go-down nav.wsmenu {
    top: -77px;
}

header.ecomm-main-header.go-down .news-carousel {
    top: -50px;
}

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

# Noticias Carrousel

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

.ld-news-carousel {
    background-color: var(--color_fondo_noticia);
    color: var(--color_texto_noticia);
    text-align: center;
    padding: .25rem 0;
    position: relative;
    top: 0;
    z-index: 1003;
}

    .ld-news-carousel .ld-news-carousel-cont {
        max-width: 1200px;
        width: 100%;
        margin: 0 auto;
        display: flex;
        align-items: stretch;
        justify-content: space-between;
    }

        .ld-news-carousel .ld-news-carousel-cont button.ld-news-carousel-btn {
            appearance: none;
            background-color: transparent;
            border: none;
            padding: 0;
            width: 2em;
        }

            .ld-news-carousel .ld-news-carousel-cont button.ld-news-carousel-btn svg {
                fill: var(--color_texto_noticia);
                height: 1em;
                width: 1em;
            }

        .ld-news-carousel .ld-news-carousel-cont .ld-news-carousel-items {
            width: calc(100% - 4em);
        }

            .ld-news-carousel .ld-news-carousel-cont .ld-news-carousel-items ul,
            .ld-news-carousel .ld-news-carousel-cont .ld-news-carousel-items ul li {
                list-style: none;
                padding: 0;
                margin: 0;
            }

            .ld-news-carousel .ld-news-carousel-cont .ld-news-carousel-items ul {
                display: flex;
                flex-direction: row;
                flex-wrap: nowrap;
                overflow-x: auto;
                overflow-y: hidden;
                scroll-snap-type: x mandatory;
                scroll-behavior: smooth;
                -webkit-overflow-scrolling: touch;
                -ms-overflow-style: none;
                scrollbar-width: none;
            }

                .ld-news-carousel .ld-news-carousel-cont .ld-news-carousel-items ul&::-webkit-scrollbar {
                    display: none;
                }

                .ld-news-carousel .ld-news-carousel-cont .ld-news-carousel-items ul.no-scroll-behavior {
                    scroll-behavior: unset;
                }

                .ld-news-carousel .ld-news-carousel-cont .ld-news-carousel-items ul li {
                    flex: 0 0 auto;
                    overflow: auto;
                    scroll-snap-align: center;
                    width: 100%;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                }

                    .ld-news-carousel .ld-news-carousel-cont .ld-news-carousel-items ul li a,
                    .ld-news-carousel .ld-news-carousel-cont .ld-news-carousel-items ul li a:active,
                    .ld-news-carousel .ld-news-carousel-cont .ld-news-carousel-items ul li a:hover,
                    .ld-news-carousel .ld-news-carousel-cont .ld-news-carousel-items ul li a:link,
                    .ld-news-carousel .ld-news-carousel-cont .ld-news-carousel-items ul li a:visited {
                        color: var(--color_texto_noticia);
                        text-decoration: underline;
                    }

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

# Cart Notification

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

.cart-notification-container {
    z-index: 10000;
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
}

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

# Entrega

-------------------------------------------------*/
.entrega-info-app {
    font-size: 0.7em;
}

    .entrega-info-app p {
        display: inline;
        margin-left: 30px;
        line-height: 2;
    }

.entrega-info {
    background: #F6F6F6;
    padding: 10px;
}

    .entrega-info a.delivery {
        margin-left: 25px;
        color: var(--color_general);
        font-size: 14px;
        font-weight: 500;
        display: inline;
    }

    .entrega-info a:hover, .entrega-info-app a:hover {
        text-decoration: none;
    }

    .entrega-info a i, .entrega-info-app a i {
        margin-right: 15px;
    }

    .entrega-info p {
        display: inline;
        margin-left: 30px;
        line-height: 2;
        font-size: 14px;
    }

    .entrega-info .show-logo {
        display: none;
    }

    .entrega-info .texto-direccion {
        color: var(--color_texto_barra_direccion);
    }

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

# Cover

-------------------------------------------------*/
.cover img {
    width: 100%;
    margin-bottom: 40px;
}

.react-multiple-carousel__arrow--right::before {
    font-family: "Font Awesome 5 Free" !important;
    font-weight: 900 !important;
    content: "\f105" !important;
}

.react-multiple-carousel__arrow--left::before {
    font-family: "Font Awesome 5 Free" !important;
    font-weight: 900 !important;
    content: "\f104" !important;
}

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

# Promotions Price

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

h4.promotion-prices-title {
    font-size: 22px;
    text-transform: uppercase;
    font-weight: 500;
    letter-spacing: 1px;
}

.promotion-prices-control {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: start;
    gap: 2rem;
}

    .promotion-prices-control a {
        display: block;
        text-decoration: none;
        color: inherit;
        text-align: center;
        width: calc( 16.6666666667% - 2rem );
    }

        .promotion-prices-control a .ld-ecomm-catpromo-cont-img img {
            width: 100%;
            height: auto;
            transition: transform 0.3s ease-in-out;
        }

        .promotion-prices-control a .ld-ecomm-catpromo-cont-img {
            display: block;
            overflow: hidden;
            width: 100%;
            aspect-ratio: 1 / 1;
        }

        .promotion-prices-control a:hover .ld-ecomm-catpromo-cont-img img {
            transform: scale(1.1);
        }

@media screen and (max-width: 1200px) {
    .promotion-prices-control a {
        width: calc( 20% - 2rem );
    }
}

@media screen and (max-width: 992px) {
    .promotion-prices-control a {
        width: calc( 25% - 2rem );
    }
}

@media screen and (max-width: 768px) {
    .promotion-prices-control a {
        width: calc( 33.3333333% - 2rem );
    }
}

@media screen and (max-width: 576px) {
    .promotion-prices-control a {
        width: calc( 50% - 2rem );
    }
}

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

# Mis Cupones

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

.slick-arrow.slick-prev::before, .slick-arrow.slick-next::before {
    color: #000;
    font-size: 30px;
}
/*-----------------------------------------------

# Mas Vendidos

-------------------------------------------------*/
.mas-vendidos {
    background: #FFF;
    padding: 15px;
    margin-bottom: 60px;
}

    .mas-vendidos h2, .nuevos h2, .vistos h2, .links h2, .promocion h2 {
        font-size: 22px;
        text-transform: uppercase;
        font-weight: 600;
        letter-spacing: 1px;
        padding-left: 12px;
    }

.links {
    padding: 15px;
}

.articulos {
    text-align: center;
}

    .articulos .item {
        position: relative;
        float: left;
        width: 230px;
        margin-bottom: 15px;
        margin-right: 0px;
        margin-left: 1.5%;
        border: 1px solid #CDCDCD;
        border-radius: 0.25rem;
        border-bottom: 0px;
        height: 100%;
        margin-bottom: 1.5%;
        overflow: hidden;
    }

        .articulos .item.bottom {
            border: 1px solid #CDCDCD;
        }

        .articulos .item a:hover {
            text-decoration: none;
        }

        .articulos .item .product-button {
            width: 100%;
            background-color: var(--color_general);
            z-index: 10;
            line-height: 18px;
            color: #fff;
            text-align: center;
            font-weight: 700;
            padding: 13px 0;
            cursor: pointer;
            border-radius: 0 0 .25rem .25rem;
        }

            .articulos .item .product-button:hover {
                background: rgba(0, 0, 0, 0.7);
            }

        .articulos .item .imagen {
            height: 150px;
            background: #fff;
            padding: 10px;
        }

            .articulos .item .imagen img {
                max-width: 100%;
                height: auto;
                max-height: 100%;
                -moz-transition: all 0.3s;
                -webkit-transition: all 0.3s;
                transition: all 0.3s;
                object-fit: contain;
                aspect-ratio: 1 / 1;
            }

        .articulos .item:hover img {
            -moz-transform: scale(1.1);
            -webkit-transform: scale(1.1);
            transform: scale(1.1);
        }

        .articulos .item .oferta, .item-2 .oferta {
            position: absolute;
            background: var(--color_general);
            height: 30px;
            z-index: 100;
            border-radius: 0.25rem 0 0 0;
        }

            .articulos .item .oferta span, .item-2 .oferta span {
                color: #fff;
                padding: 8px 15px;
                font-size: 10px;
                text-transform: uppercase;
            }

        .articulos .item .descripcion {
            background: #FFF;
        }

        .articulos.cuadricula .item .descripcion {
            height: 160px;
        }

            .articulos .item .descripcion .name {
                color: #444444;
                font-size: 11px;
                text-transform: var(--text_transform_nombre_articulo);
                font-weight: 600;
                margin-bottom: 5px;
                letter-spacing: 1px;
                text-overflow: ellipsis;
                overflow: hidden;
            }

            .articulos .item .descripcion .precio {
                color: #444444;
                font-size: 18px;
                text-transform: uppercase;
                margin-bottom: 5px;
            }

        .articulos .item.border-none {
            border: none;
        }

.etiqueta-item {
    font-size: 13px;
    padding: 2px 3px;
    text-align: center;
    text-transform: none;
    font-weight: normal;
}

.product-price-discount .price-color {
    font-size: 12px;
    color: #888;
    text-decoration: line-through;
    padding-right: 10px;
}

button.delete-item {
    position: absolute;
    right: 0px;
    z-index: 100;
    background: rgba(0, 0, 0, 0.45);
    color: #FFF;
    font-size: 15px;
    border: none;
    box-shadow: none;
    cursor: pointer;
}

.item button.delete-item {
    top: 0px;
}

.insurer-image-item {
    border-color: #000;
    width: 100%;
    border-width: 1px;
    border-style: dashed;
    background-color: #FFF;
    height: 100%;
}

.country-flag {
    width: 50px;
}

/**item list**/
.item-2 {
    display: flex;
    padding-bottom: 10px;
    margin-bottom: 10px;
    border-bottom: 1px solid #d4d4d4;
}

    .item-2 a {
        display: flex;
        width: 100%;
    }

        .item-2 a:hover {
            text-decoration: none;
        }

.imagen-lista {
    height: 150px;
    background: #fff;
    padding: 10px;
}

    .imagen-lista img {
        max-width: 100%;
        height: auto;
        max-height: 100%;
        -moz-transition: all 0.3s;
        -webkit-transition: all 0.3s;
        transition: all 0.3s;
    }

.descripcion-lista {
    justify-content: space-between;
    flex: 1 0 0;
    margin: 15px;
    text-align: left;
}

.add-button {
    text-align: center;
    margin-top: 30px;
}

    .add-button button {
        width: 100%;
        background: var(--color_general);
        line-height: 18px;
        color: #fff;
        text-align: center;
        font-weight: 700;
        padding: 13px 30px;
        cursor: pointer;
        border-radius: 2px;
        font-size: 12px;
    }

        .add-button button i {
            margin-right: 10px;
        }

        .add-button button.options, .articulos .item .product-button.options {
            background: #FFF;
            color: #495057;
            border: 1px solid #ced4da;
            border-radius: .25rem;
            border-top-left-radius: 0px;
            border-top-right-radius: 0px;
            font-size: 14px;
        }

            .add-button button.options:hover, .articulos .item .product-button.options:hover {
                background: rgba(0, 0, 0, 0.1);
            }

.item-2 .descripcion-lista .name {
    color: #444444;
    font-size: 11px;
    text-transform: var(--text_transform_nombre_articulo);
    font-weight: 600;
    margin-bottom: 5px;
    letter-spacing: 1px;
}

.item-2 .descripcion-lista .precio {
    color: #444444;
    font-size: 18px;
    text-transform: uppercase;
    margin-bottom: 5px;
}

.item-info {
    display: flex;
    justify-content: space-between;
    flex: 1 0 0;
    margin: 15px 0 15px 0;
}

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

# 3 banners

-------------------------------------------------*/
.banners {
    margin-bottom: 60px;
}

    .banners .btn.btn-link {
        padding: 0px;
        width: 100%;
        height: 100%;
    }

    .banners img {
        width: 90%;
        margin: 0 15px;
        text-align: center;
    }

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

# Articulos Nuevos

-------------------------------------------------*/
.nuevos {
    text-align: center;
    margin-bottom: 10px; /*60*/
    padding: 15px;
}

    .nuevos .item {
        width: 100%;
        padding: 1rem;
        float: left;
        height: 100%;
        overflow: hidden;
    }

        .nuevos .item .imagen {
            float: left;
            max-width: 130px;
            max-height: 170px;
            padding-top: 10%;
        }

            .nuevos .item .imagen img {
                max-width: 100%;
            }

        .nuevos .item .oferta {
            position: absolute;
            background: var(--color_general);
            height: 30px;
        }

            .nuevos .item .oferta span {
                color: #fff;
                padding: 8px 15px;
                font-size: 10px;
                text-transform: uppercase;
            }

    .nuevos .descripcion {
        float: left;
        padding-left: 10px;
        max-width: 160px;
    }

        .nuevos .descripcion .categoria {
            color: #444444;
            text-transform: uppercase;
            text-align: left;
            font-weight: bold;
            margin-bottom: 5px;
            overflow: hidden;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
        }

        .nuevos .descripcion .name {
            color: #444444;
            text-align: left;
            font-size: 12px;
            text-transform: var(--text_transform_nombre_articulo);
            overflow: hidden;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
        }

        .nuevos .descripcion .precio {
            color: var(--color_general);
            text-align: left;
        }

    .nuevos .featured {
        margin-right: 0px;
        margin-bottom: 0px;
    }

        .nuevos .featured .descripcion {
            width: 160px;
            padding-bottom: 0px;
        }

        .nuevos .featured.border-bottom {
            border-bottom: 1px solid #ACACAC;
            padding-bottom: 0.5rem;
            margin-bottom: 0.5rem;
        }

    .nuevos p.title {
        font-size: 12px;
        color: var(--color_general);
        font-weight: bold;
        margin-left: 16px;
        text-transform: uppercase;
        text-align: left;
        margin-bottom: 5px;
    }

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

# promocion

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

.promocion {
    background: #FFF;
    padding: 15px;
    margin-bottom: 60px;
}

.promo-art {
    text-align: center;
}

    .promo-art .categoria {
        background: #fff;
        color: #444444;
        text-transform: uppercase;
        text-align: center;
        font-weight: bold;
        padding-top: 30px;
    }

    .promo-art.item {
        position: relative;
        float: left;
        width: 240px;
        margin-bottom: 15px;
    }

        .promo-art.item a:hover {
            text-decoration: none;
        }

        .promo-art.item .imagen {
            height: 120px;
            background: #fff;
            padding: 10px;
        }

            .promo-art.item .imagen img {
                max-width: 100%;
                height: auto;
                max-height: 100%;
                -moz-transition: all 0.3s;
                -webkit-transition: all 0.3s;
                transition: all 0.3s;
            }

        .promo-art.item:hover img {
            -moz-transform: scale(1.1);
            -webkit-transform: scale(1.1);
            transform: scale(1.1);
        }

        .promo-art.item .oferta {
            position: absolute;
            background: var(--color_general);
            height: 30px;
            z-index: 100;
        }

            .promo-art.item .oferta span {
                color: #fff;
                padding: 8px 15px;
                font-size: 10px;
                text-transform: uppercase;
            }

        .promo-art.item .descripcion {
            background: #FFF;
            height: 160px;
        }

            .promo-art.item .descripcion .name {
                color: #444444;
                font-size: 11px;
                text-transform: var(--text_transform_nombre_articulo);
                font-weight: 600;
                margin-bottom: 5px;
                letter-spacing: 1px;
            }

            .promo-art.item .descripcion .precio {
                color: #444444;
                font-size: 18px;
                text-transform: uppercase;
                margin-bottom: 5px;
            }

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

# Banner

-------------------------------------------------*/
.banner-full {
    margin-bottom: 40px;
}

    .banner-full img {
        width: 100%;
    }

.banner-tercio {
    text-align: center;
}

    .banner-tercio img {
        max-width: 100%;
        text-align: center;
    }

.banner-categoria, .banner-encabezado {
    width: 100%;
    text-align: center;
}

    .banner-categoria img, .banner-encabezado img {
        max-width: 100%;
        text-align: center;
        max-height: 100%;
    }

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

# Articulos Vistos

-------------------------------------------------*/
.vistos {
    margin-bottom: 40px;
    padding: 15px;
}

    .vistos .articulos a {
        float: left;
        width: 166px;
        margin-right: 3%;
        margin-bottom: 15px;
        cursor: pointer;
    }

    .vistos a .oferta {
        position: absolute;
        background: var(--color_general);
        height: 30px;
    }

        .vistos a .oferta span {
            color: #fff;
            padding: 8px 15px;
            font-size: 10px;
            text-transform: uppercase;
        }

    .vistos .articulos a .imagen {
        float: left;
        width: 166px;
        height: 215px;
        padding-top: 20%;
    }

        .vistos .articulos a .imagen img {
            max-width: 90%;
            -moz-transition: all 0.3s;
            -webkit-transition: all 0.3s;
            transition: all 0.3s;
        }

    .vistos .articulos a:hover img {
        -moz-transform: scale(1.1);
        -webkit-transform: scale(1.1);
        transform: scale(1.1);
    }

    .vistos .item {
        padding: 1rem;
    }
/*-----------------------------------------------

# Colecciones

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

.collection-title {
    font-family: var(--coleccion_font_family_title, "'Roboto', sans-serif") !important;
    font-size: var(--coleccion_font_size_title) !important;
    text-align: var(--coleccion_text_align_title) !important;
}

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

# CONTENIDO ARTICULOS

-------------------------------------------------*/
.contenido-slider-titulo {
    text-align: left;
}

/* Footer
---------------------------------------------------------------------- */
#footer {
    background: var(--color_footer_primario);
    color: var(--color_footer_text_primario);
    padding: 35px 5% 40px 5%;
    margin: 0;
}

    #footer h3.footer {
        color: var(--color_footer_title);
        background: var(--color_footer_primario);
        text-transform: uppercase;
        font-size: 1.1rem;
    }

    #footer img {
        max-width: 90%;
    }

    #footer a {
        color: var(--color_footer_text_primario);
    }


/* Bottom Footer
------------------------------------- */
#footer-bottom {
    background: var(--color_footer_secundario);
    color: var(--color_footer_text_secundario);
    padding: 17px 0 13px 0;
}

    #footer-bottom a {
        color: var(--color_footer_text_secundario);
        font-weight: 600;
    }

        #footer-bottom a:hover i {
            color: #FFF;
        }

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

# Detalle Articulo

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

.nav-link:not(.active) {
    color: var(--color_general);
}


/*---------------------# Breadcrumbs-------------------------------*/
.breadcrumbs {
    padding: 10px 45px;
    background: var(--color_barra_breadcrumbs);
    margin: 30px 0 0 0;
}

    .breadcrumbs a {
        font-size: 15px;
        font-weight: 600;
        color: #fff;
        text-transform: uppercase;
        margin-bottom: 0;
        padding-left: 25px;
        padding-right: 25px;
        border-right: 3px solid #fff;
        display: inline-block;
    }

        .breadcrumbs a.inicio {
            color: var(--color_barra_breadcrumbs_texto_destacado);
        }

/*---------------------# Product Slider-------------------------------*/
.slider-img {
    text-align: center;
    padding: 0 15px;
}

    .slider-img .image-preview {
        max-height: 400px;
        max-width: 400px;
        margin: 0 auto;
    }

        .slider-img .image-preview img {
            max-width: 100%;
        }

.small-images {
    list-style: none;
    padding: 0;
    margin: 15px 0px;
}

    .small-images li.slide {
        background-color: #FFF;
    }

        .small-images li.slide img {
            max-width: 100px;
            max-height: 100px;
        }

/*---------------------# Product Details-------------------------------*/
.descripcion-producto {
    margin: 0 25px;
}

    .descripcion-producto h2 {
        font-size: 24px;
        letter-spacing: 1px;
        text-transform: var(--text_transform_nombre_articulo);
        text-align: left;
    }

    .descripcion-producto .stars {
        list-style: none;
        padding: 0;
        margin-top: 8px;
    }

        .descripcion-producto .stars li {
            display: inline;
            margin-right: 5px;
        }

            .descripcion-producto .stars li i {
                color: #FACC36;
            }

    .descripcion-producto .info-price {
        margin-bottom: 6px;
    }

    .descripcion-producto .precio {
        /*font-size: 26px;*/
        padding-right: 25px;
        color: #444444;
        font-weight: 500;
        margin-bottom: 6px;
    }

        .descripcion-producto .precio span {
            font-size: 16px;
            padding-right: 5px;
            font-weight: 500;
        }

    .descripcion-producto .discount {
        font-size: 18px;
        color: #888;
        text-decoration: line-through;
        padding-right: 10px;
    }

    .descripcion-producto .detalles-generales {
        border-top: 1px solid #ACACAC;
        border-bottom: 1px solid #ACACAC;
        padding-top: 10px;
    }

.detalles-generales p {
    margin-bottom: 0.5rem;
}

.descripcion-producto .checkboxes {
    padding: 25px 0px;
    border-top: 1px solid #ACACAC;
}

    .descripcion-producto .checkboxes i {
        font-size: 18px;
    }

.btn-check {
    background: var(--color_general);
    color: #fff;
    font-weight: 500;
    float: left;
    padding: 15px;
    margin-right: 15px;
}

    .btn-check:not(:disabled):not(.disabled).active, .btn-check:not(:disabled):not(.disabled):active, .show > .btn-secondary.dropdown-toggle {
        background: #EEEEEE;
        color: #444444;
        font-weight: 500;
        margin-right: 15px;
    }

.colores {
    list-style: none;
    padding: 0;
}

    .colores li {
        float: left;
        width: 50px;
        height: 50px;
        background: #F6F6F6;
        margin: 5px;
    }

        .colores li a img {
            max-width: 98%;
            max-height: 98%;
            padding: 5%;
        }

        .colores li.select {
            border: 2px solid var(--color_general);
        }

.variaciones {
    padding: 20px 0;
    border-bottom: 1px solid #ACACAC;
}

/*--------------------------------------------------------------
  ##  Quantity
  --------------------------------------------------------------*/
.quantity2 input {
    padding: 0px;
    text-align: center;
    width: 70px;
    height: 33px;
    margin: 0 3px;
}

.quantity2 button {
    background-color: #C9CACC;
    border: none;
    padding: 4px 8px;
}

    .quantity2 button:hover {
        background: var(--color_general);
    }

/*--------------------------------------------------------------
  ##  Descripcion
  --------------------------------------------------------------*/
.descripcion {
    padding: 15px;
}

    .descripcion h4 {
        padding-bottom: 15px;
        border-bottom: 1px solid #ACACAC;
        text-transform: uppercase;
    }

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

  # Busqueda

  -------------------------------------------------*/
.filtros {
    width: 100%;
    padding-top: 20px;
    padding-left: 10px;
}

    .filtros span.selected {
        border: 1px solid #ACACAC;
        padding: 5px;
        border-radius: 5px;
        margin: 5px 2px;
        display: inline-block;
    }

        .filtros span.selected a {
            margin-right: 2px;
            color: #333;
        }

.filtro-1 {
    width: 100%;
    border-top: 1px solid #ACACAC;
    margin-top: 15px;
}

.filtros a.collapse-button {
    font-size: 18px;
    color: #2C2C2C;
    display: block;
    padding: 10px 10px 0 10px;
    font-weight: 600;
}

    .filtros a.collapse-button:hover {
        text-decoration: none;
        color: var(--color_general);
    }

    .filtros a.collapse-button i {
        float: right;
    }

.filtros .card-header {
    font-size: 18px;
    color: #2C2C2C;
    display: block;
    padding: 10px 10px 0 10px;
    font-weight: 600;
    background-color: transparent;
    border-bottom: none;
    cursor: pointer;
}

    .filtros .card-header:hover {
        text-decoration: none;
        color: var(--color_general);
    }

    .filtros .card-header i {
        float: right;
    }

.filtro-1 .card {
    border: none;
}

.filtro-1 .card-body {
    padding-top: 5px;
}

.filtro-1 .custom-checkbox {
    margin-top: 10px;
}

.slidecontainer {
    width: 100%;
    padding-top: 25px;
    padding-left: 1.5rem;
    padding-right: 1.8rem;
}

.inputRange .sliderRange {
    appearance: none;
    background: var(--color_general);
    border: 1px solid var(--color_general);
    border-radius: 100%;
    cursor: pointer;
    display: block;
    height: 1rem;
    margin-left: -0.5rem;
    margin-top: -0.65rem;
    outline: none;
    position: absolute;
    top: 50%;
    transition: transform 0.3s ease-out, box-shadow 0.3s ease-out;
    width: 1rem;
}

    .inputRange .sliderRange:active {
        transform: scale(1.3);
    }

    .inputRange .sliderRange:focus {
        box-shadow: 0 0 0 5px rgba(63, 81, 181, 0.2);
    }

.inputRange .disabledInputRange .sliderRange {
    background: #cccccc;
    border: 1px solid #cccccc;
    box-shadow: none;
    transform: none;
}

.inputRange .sliderContainer {
    transition: left 0.3s ease-out;
}

.inputRange .inputLabel {
    color: var(--color_general);
    font-size: 0.8rem;
    transform: translateZ(0);
    white-space: nowrap;
}

.inputRange .minLabel, .inputRange .maxLabel {
    bottom: -1.4rem;
    position: absolute;
    color: #212529;
    font-weight: bold;
}

.inputRange .minLabel {
    left: 0;
}

.inputRange .maxLabel {
    right: 0;
}

.inputRange .valueLabel {
    position: absolute;
    top: -1.8rem;
}

.inputRange .labelContainer {
    left: -50%;
    position: relative;
}

.inputRange .maxLabel .labelContainer {
    left: 50%;
}

.inputRange .track {
    background: #eeeeee;
    border-radius: 0.3rem;
    cursor: pointer;
    display: block;
    height: 0.3rem;
    position: relative;
    transition: left 0.3s ease-out, width 0.3s ease-out;
}

.inputRange .disabledInputRange .track {
    background: #eeeeee;
}

.inputRange .track-background {
    left: 0;
    margin-top: -0.15rem;
    position: absolute;
    right: 0;
    top: 50%;
}

.inputRange .activeTrack {
    background: var(--color_general);
}

.inputRange {
    height: 1rem;
    position: relative;
    width: 100%;
}

.resultados {
    padding: 25px;
    background: #F6F6F6;
    width: 100%;
}

    .resultados h4 {
        color: #2C2C2C;
        font-size: 24px;
        font-weight: bold;
        text-transform: uppercase;
    }

        .resultados h4.search {
            text-transform: none;
        }

        .resultados h4 span {
            text-transform: uppercase;
        }

    .resultados h6 {
        display: inline;
    }

.pagination .numero-resultados {
    margin-right: 20px;
    margin-top: 5px;
}

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

# Categorias

-------------------------------------------------*/
.categorias {
    padding: 25px;
}

    .categorias img {
        margin-right: 20px;
        max-width: 100%;
        margin-bottom: 20px;
    }

    .categorias h4 {
        font-size: 24px;
        text-transform: uppercase;
        font-weight: bold;
    }

        .categorias h4 a {
            color: #2C2C2C;
        }

    .categorias ul {
        list-style: inside;
        padding: 0;
    }

        .categorias ul li {
            margin-bottom: 10px;
        }

            .categorias ul li a {
                color: #444444;
            }

                .categorias ul li a:hover {
                    text-decoration: none;
                    color: var(--color_general);
                }

.categoria-detalle h4 {
    color: #2C2C2C;
    font-size: 24px;
    text-transform: uppercase;
    font-weight: bold;
    padding: 25px 0 0 25px;
}

.categoria-detalle .menu-detail, .categoria-detalle .menu-detail:hover {
    text-decoration: none;
}

    .categoria-detalle .menu-detail h3 {
        font-size: 17px;
        color: #424242;
        text-align: center;
    }

.categoria-detalle img {
    width: 100%;
    max-height: 200px;
}

.categoria-detalle .submenu {
    width: auto;
    max-height: 100%;
}

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

# Preventa

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

.preventa {
    margin: 50px 25px;
    padding-bottom: 15px;
    margin-bottom: 40px;
}

    .preventa h2 {
        font-size: 20px;
        padding-bottom: 15px;
        text-transform: uppercase;
        font-weight: bold;
    }

.preventa-card {
    background: #F6F6F6;
    padding: 15px;
    margin-bottom: 15px;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    cursor: pointer;
}

    .preventa-card p {
        margin-bottom: 5px;
    }

    .preventa-card .numero {
        font-weight: bold;
        font-size: 18px;
    }
/*-----------------------------------------------

# Carrito

-------------------------------------------------*/
.carrito-compras {
    margin: 50px 25px;
}

    .carrito-compras h2 {
        font-size: 20px;
        padding-bottom: 15px;
        text-transform: uppercase;
        font-weight: bold;
    }

.carrito-compras {
    padding-bottom: 15px;
    border-bottom: 1px solid #ACACAC;
    text-transform: uppercase;
    font-weight: bold;
    margin-bottom: 40px;
}

    .carrito-compras .lista-compras .item-compras {
        border-bottom: 1px solid #f4f4f4;
        padding: 20px;
    }

        .carrito-compras .lista-compras .item-compras .image {
            display: inline;
            width: 100px;
            max-height: 100px;
        }

            .carrito-compras .lista-compras .item-compras .image img {
                max-height: 80px;
            }

        .carrito-compras .lista-compras .item-compras .contenido p {
            font-size: 14px;
        }

            .carrito-compras .lista-compras .item-compras .contenido p.precio {
                display: inline;
            }

        .carrito-compras .lista-compras .item-compras .contenido .custom-control {
            margin-right: 0px;
        }

            .carrito-compras .lista-compras .item-compras .contenido .custom-control span {
                margin-right: 0px;
            }

        .carrito-compras .lista-compras .item-compras .contenido a:not(.name) {
            font-size: 14px;
            text-transform: initial;
            font-weight: 400;
            cursor: pointer;
            color: var(--color_general);
        }

        .carrito-compras .lista-compras .item-compras .contenido label {
            font-size: 14px;
            text-transform: initial;
            font-weight: 400;
        }

        .carrito-compras .lista-compras .item-compras .contenido span:not(.currency-symbol) {
            display: inline;
            font-size: 14px;
            font-weight: 400;
            color: #929292;
            margin-right: 15px;
        }

        .carrito-compras .lista-compras .item-compras .no-disponible {
            background: #EA0000;
            color: #fff;
            font-size: 10px;
            text-transform: uppercase;
            opacity: 0.6;
            padding: 4px 10px;
            width: 87%;
            position: absolute;
        }

    .carrito-compras .totales-carrito {
        background: #F6F6F6;
        padding: 12px 25px;
        margin-bottom: 20px;
    }

        .carrito-compras .totales-carrito h4 {
            font-size: 18px;
            color: #000000;
            font-weight: bold;
            padding-bottom: 19px;
            border-bottom: 1px solid #ACACAC;
            display: block;
            text-transform: uppercase;
            margin-top: 20px;
        }

        .carrito-compras .totales-carrito .info {
            padding: 20px 0;
        }

    .carrito-compras table th,
    .carrito-compras table td {
        border: none;
    }

    .carrito-compras table th {
        color: #929292;
        font-size: 12px;
        font-weight: 400;
        text-transform: uppercase;
    }

    .carrito-compras table td img {
        max-width: 100px;
        max-height: 100px;
    }

    .carrito-compras table td.descripcion {
        max-width: 250px;
        font-size: 12px;
        font-weight: 500;
        text-transform: uppercase;
    }

    .carrito-compras table td a.borrar {
        color: #929292;
        cursor: pointer;
    }

        .carrito-compras table td a.borrar i:before {
            font-size: 25px;
        }

    .carrito-compras table td .oferta {
        position: absolute;
        background: #c004047a;
        height: 21px;
        z-index: 100;
        color: #fff;
        padding: 2px 15px;
        font-size: 10px;
        text-transform: uppercase;
    }

a.volver {
    color: var(--color_general);
    font-size: 15px;
    font-weight: bold;
    letter-spacing: 1px;
}

    a.volver i {
        margin-right: 8px;
    }

p.title {
    font-size: 14px;
    color: #929292;
    display: inline-block;
    margin-right: 20px;
}

span.total {
    float: right;
    color: #444444;
    font-weight: bold;
    font-size: 15px;
}

.carrito-compras p.nombre {
    text-transform: var(--text_transform_nombre_articulo);
}

.wishlist {
    padding-top: 0.5rem;
    margin-top: 1rem;
}

.wishlist-separator {
    border-top: 3px solid #8C8C8C;
    padding-top: 0.5rem;
    margin-top: 1rem;
    width: calc( 100% + 30px );
    transform: translate(-15px);
}

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

# Forma Entrega

-------------------------------------------------*/
.forma-entrega {
    padding: 35px;
}

    .forma-entrega .panel {
        min-height: 190px;
    }

    .forma-entrega h2 {
        font-size: 22px;
        text-transform: uppercase;
        font-weight: bold;
        letter-spacing: 1px;
        margin-bottom: 50px;
    }

    .forma-entrega p {
        color: #888;
        font-size: 15px;
        letter-spacing: 1px;
    }

        .forma-entrega p.titulo {
            color: #444444;
            font-size: 24px;
            font-weight: 500;
            text-transform: capitalize;
        }

            .forma-entrega p.titulo i::before {
                font-size: 30px;
                margin-right: 10px;
            }

    .forma-entrega a.btn :not(.shop) :not(.shop) > i {
        font-size: 14px;
        text-transform: uppercase;
        bottom: 0;
        position: absolute;
    }

    .forma-entrega a.btn i:before :not(.shop) > i {
        font-size: 20px;
        margin-right: 10px;
    }

    .forma-entrega a:not(.btn) {
        color: var(--color_general);
    }

    .forma-entrega h3 {
        font-size: 20px;
    }

    .forma-entrega select {
        background-color: #F4F4F4;
        border: none;
        display: block;
        width: 100%;
        padding: 10px;
        margin-bottom: 20px;
    }

    .forma-entrega .store-card {
        padding-bottom: 30px;
        height: 100%;
    }

    .forma-entrega .direccion {
        margin-bottom: 20px;
        height: 60%;
    }

        .forma-entrega .direccion p {
            margin-bottom: 2px;
            color: #888;
        }

            .forma-entrega .direccion p.name {
                font-weight: bold;
            }

    .forma-entrega .content-title-btnGeolocation {
        padding-bottom: 15px;
        border-bottom: 1px solid #ACACAC;
        margin-bottom: 40px;
        margin-top: 40px;
    }

.numberCircleStore {
    border-radius: 50%;
    width: 30px;
    height: 30px;
    padding: 8px;
    background: #fff;
    border: 2px solid #666;
    color: #666;
    text-align: center;
    font: 11px Arial, sans-serif;
}

.numberCircle {
    border-radius: 50%;
    padding: 8px;
    background: #fff;
    border: 2px solid #666;
    color: #666;
    text-align: center;
    font: 11px Arial, sans-serif;
}

.leaflet-container {
    height: 100%;
    width: 100%;
    min-height: 300px;
}

.formas-pago label:not(.label) {
    margin-top: 15px;
}

button.input-group-button, button.input-group-button:focus {
    padding: 7px 20px;
}

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

# Login

-------------------------------------------------*/
.form {
    width: 80%;
    margin: 40px auto;
    text-align: center;
}

    .form h2 {
        margin-bottom: 40px;
    }

    .form label.input-title {
        float: left;
    }

    .form input, .form textarea {
        margin-bottom: 20px;
    }

    .form button {
        margin-bottom: 15px;
    }

    .form a:not(.link-terminos):not(.link-collection) {
        color: #444444;
        margin: 15px;
    }

    .form a:hover {
        color: var(--color_general);
        text-decoration: none;
    }

    .form a.cancelar {
        display: inline;
        margin-left: 7%;
    }

.link-terminos, .link-collection {
    color: var(--color_general);
}

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

# Preguntas Frecuentes

-------------------------------------------------*/
.contenido-estatico {
    margin: 10px 60px 60px 60px;
}

.imagen-contenido-estatico {
    width: 100%;
}

.btn-print {
    margin-right: 60px;
}

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

# Pago

-------------------------------------------------*/
.tab-cupones {
    width: 50%;
    text-align: center;
    border-style: none;
    border-color: transparent !important;
    color: #ACACAC !important;
    border-bottom: 1px solid #ACACAC !important;
}

    .tab-cupones.active {
        color: var(--color_general) !important;
        border-bottom: 2px solid var(--color_general) !important;
    }

    .tab-cupones:hover {
        border-style: none;
    }

.pago .formas-pago {
    padding: 0px 50px 25px 50px;
}

.pago .informacion.mobile {
    padding: 15px 15px;
}

.pago .informacion {
    padding: 25px 25px 25px 50px;
}

    .pago .informacion.order-summary {
        padding: 6px 50px 25px 0px;
    }

        .pago .informacion.order-summary .order-summary-content {
            padding: 0px 25px 25px 25px;
        }

            .pago .informacion.order-summary .order-summary-content h4 {
                line-height: 1.5;
                padding: 0.75rem 1.25rem 14px 1.25rem;
            }

    .pago .informacion .card-header, .pago .formas-pago .card-header {
        font-size: 18px;
        color: #000000;
        font-weight: bold;
        padding-bottom: 15px;
        border-bottom: 1px solid #ACACAC;
        display: block;
        text-transform: uppercase;
        cursor: pointer;
    }

.pago .card {
    border: none;
}

.pago p.titulo {
    color: #444444;
    font-size: 18px;
}

    .pago p.titulo i {
        margin-right: 15px;
    }

.pago .informacion p.info {
    margin-bottom: 0;
    font-size: 14px;
}

.pago .informacion a.payment-link {
    display: inline-block;
    color: var(--color_general);
    padding: 0 25px 0 0;
    margin-top: 20px;
}

    .pago .informacion a.payment-link:hover {
        color: #333;
        text-decoration: none;
    }

.pago .informacion .image {
    width: 100px;
    max-height: 100px;
}

.pago .informacion .info p.title {
    text-transform: uppercase;
    font-weight: bold;
}

.pago .informacion .order-summary-content {
    background-color: #F6F6F6;
    width: 100%;
}

.pago .informacion h4 {
    font-size: 18px;
    color: #000000;
    font-weight: bold;
    padding-bottom: 19px;
    border-bottom: 1px solid #ACACAC;
    display: block;
    text-transform: uppercase;
    margin-top: 20px;
}

.pago .informacion .order-details h4 {
    border: none;
    margin-top: 0px;
}

.pago button.btn-success {
    width: 100%;
}

.pago .descripcion {
    text-transform: var(--text_transform_nombre_articulo);
}

ul.regalos {
    margin: 0;
    list-style: none;
    padding: 0;
}

    ul.regalos li img {
        width: 50px;
        height: auto;
        display: inline;
    }

    ul.regalos li p.nombre {
        display: inline;
    }

.custom-control:not(.control-terminos):not(.rdbCategory) {
    display: inline-block;
    margin-right: 15px;
}

.btn-check.tarjetas {
    margin-top: 5px;
    background: #EEEEEE;
    color: #444444;
    font-weight: 500;
    float: left;
    padding: 0;
    margin-right: 15px;
    width: 56px;
}

    .btn-check.tarjetas i:before {
        font-size: 40px;
    }

    .btn-check.tarjetas:not(:disabled):not(.disabled).active, .btn-check.tarjetas:not(:disabled):not(.disabled):active, .show > .btn-secondary.dropdown-toggle {
        background: var(--color_general);
        color: #fff;
        font-weight: 500;
        margin-right: 15px;
    }

.image-tooltip {
    cursor: pointer
}

    .image-tooltip span {
        z-index: 100;
        display: none;
        width: auto;
    }

    .image-tooltip:hover span {
        display: inline;
        position: absolute;
    }

.labelFacturaElectronica {
    font-weight: bold;
}

/*Estilos control de tarjetas en pago*/
.rccs {
    max-width: 290px;
    width: 100% !important;
}

.rccs__card {
    width: 100% !important;
}

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

# cuenta

-------------------------------------------------*/
.cuenta {
    padding: 50px;
}

    .cuenta h2.user-name {
        font-size: 24px;
        color: #000000;
        font-weight: bold;
        padding-bottom: 19px;
        border-bottom: 1px solid #ACACAC;
        display: block;
        margin-top: 20px;
    }

    .cuenta ul.opciones {
        list-style: none;
        padding: 0;
    }

        .cuenta ul.opciones li {
            padding: 10px;
            color: #444444;
            cursor: pointer;
        }

            .cuenta ul.opciones li.select {
                background: #dbe1e8;
                border-top-right-radius: 50px;
                border-bottom-right-radius: 50px;
            }

            .cuenta ul.opciones li:hover {
                color: var(--color_general);
            }

            .cuenta ul.opciones li i, .cuenta ul.opciones li svg {
                margin-right: 12px;
            }

.orden-detail {
    background: #F6F6F6;
    padding: 15px;
    margin-bottom: 15px;
}

    .orden-detail p {
        margin-bottom: 5px;
    }

    .orden-detail .numero {
        font-weight: bold;
        font-size: 18px;
    }

    .orden-detail a {
        color: var(--color_general);
    }

.datos-personales {
    width: 70%;
    margin: 0 auto;
}

.direcciones .titulo {
    background: #f4f4f4;
    padding: 5px;
    font-weight: bold;
    margin-bottom: 10px;
}

    .direcciones .titulo span {
        font-weight: 300;
        margin-left: 50px;
    }

.direccion-1 {
    padding-bottom: 30px;
}

    .direccion-1 a {
        color: #444444;
        margin-left: 15px;
        margin-top: 10px;
        cursor: pointer;
    }

.direcciones p {
    margin-bottom: 5px;
    padding: 0 0 0 10px;
}

a.phone {
    margin-left: 0px;
}

.uppercase {
    text-transform: uppercase;
}

.link-primario {
    background-color: var(--color_general);
    color: #FFF;
    text-decoration: none;
    padding: 0.5em;
    border-radius: 1.5em;
    display: block;
    text-transform: uppercase;
}

.link-secundario {
    background-color: var(--color_general);
    opacity: 0.8;
    color: #FFF;
    text-decoration: none;
    padding: 0.5em;
    border-radius: 1.5em;
    display: block;
    text-transform: uppercase;
}

.link-disabled {
    background-color: #DBDBDB !important;
}

.link-primario:hover, .link-secundario:hover {
    color: #FFF;
    text-decoration: none;
}

.btn-link:hover, .btn-link:focus {
    text-decoration: none;
    box-shadow: none;
}

.container-hystory-btns {
    display: flex;
    flex-direction: row;
    position: relative;
    bottom: 0px;
    width: 100%;
    box-shadow: rgb(0 0 0 / 50%) 0px -6px 6px -6px;
    z-index: 100;
}

.btn-history {
    width: 50%;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
    display: block;
    color: #FFF;
    text-align: center;
    text-transform: uppercase;
    border: none;
}

    .btn-history.left::before {
        content: "";
        display: block;
        position: absolute;
        height: 0;
        width: 0;
        left: 1em;
        top: -12px;
        border-style: solid;
        border-width: 0 10px 12px 10px;
        border-color: var(--color_general);
        border-left-color: transparent;
        border-right-color: transparent;
        border-top-color: transparent;
    }

    .btn-history.right::before {
        content: "";
        display: block;
        position: absolute;
        height: 0;
        width: 0;
        right: 1em;
        top: -12px;
        border-style: solid;
        border-width: 0 10px 12px 10px;
        border-color: var(--color_general);
        border-left-color: transparent;
        border-right-color: transparent;
        border-top-color: transparent;
    }

.coupon-card {
    border-width: 1px;
    border-style: solid;
    border-color: #D2D3D4;
    border-radius: 0.375rem;
    padding: 0.5em;
    font-size: 12px;
    text-align: center;
}

    .coupon-card.selected {
        border-width: 2px;
        border-color: var(--color_general);
    }

.search-coupon {
    border-width: 1px;
    border-style: solid;
    border-color: #D2D3D4;
    border-radius: 0.375rem;
}

.btn-round-icon {
    font-weight: 400;
    font-size: 14px;
    margin-left: 1em;
    text-align: center;
    background-color: var(--color_general);
    color: #FFF;
    outline: transparent solid 2px;
    border-radius: 1.5em;
    align-items: center;
    height: 2.5rem;
    min-width: 2.5rem;
    border-color: unset;
}

    .btn-round-icon:hover, .btn-round-icon:active, .btn-round-icon:focus {
        background-color: #E2E8F0 !important;
        color: #FFF !important;
        border-color: unset !important;
    }
/*-----------------------------------------------

# Detalle Orden

-------------------------------------------------*/
.detalle-orden {
    padding: 25px;
}

    .detalle-orden a {
        color: var(--color_general);
        font-size: 15px;
        margin-bottom: 20px;
    }

        .detalle-orden a i {
            margin-right: 10px;
        }

        .detalle-orden a:hover {
            color: #444444;
            text-decoration: none;
        }

    .detalle-orden h2 {
        font-size: 20px;
        padding-bottom: 15px;
        border-bottom: 1px solid #ACACAC;
        text-transform: uppercase;
        font-weight: bold;
    }

        .detalle-orden h2 span {
            float: right;
            font-size: 12px;
            color: #929292;
            font-weight: 500;
            letter-spacing: 1px;
            padding-top: 10px;
        }

.orden-info {
    background-color: #F6F6F6;
    padding: 25px;
    margin: 15px 0px;
}

    .orden-info h3 {
        font-size: 18px;
        padding-bottom: 15px;
        border-bottom: 1px solid #ACACAC;
        text-transform: uppercase;
        font-weight: bold;
        margin-bottom: 20px;
    }

    .orden-info p {
        margin-bottom: 5px;
    }

    .orden-info table.totales {
        width: 100%;
        margin-bottom: 20px;
    }

        .orden-info table.totales td {
            color: #929292;
            font-size: 16px;
            padding: 5px 0 5px 0;
        }

            .orden-info table.totales td.monto {
                color: #444444;
                float: right;
                font-weight: 600;
            }

.overall-rating {
    color: #f0c14b;
}

.historial-lealtad {
    height: 35vh;
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 1;
}
/*-----------------------------------------------

# Otros

-------------------------------------------------*/
.font-size-14 {
    font-size: 14px;
}

.font-size-16 {
    font-size: 16px;
}

.font-size-24 {
    font-size: 24px;
}

.font-size-30 {
    font-size: 30px;
}

.m-0 {
    margin: 0px;
}

.margin-top-15 {
    margin-top: 15px;
}

.margin-right-15 {
    margin-right: 15px;
}

.margin-left-5 {
    margin-left: 5px;
}

.margin-bottom-content {
    margin-bottom: 4em;
}

.maxWidth-500 {
    max-width: 500px;
}

.backdrop-menu {
    margin-top: 170px;
}

.backdrop {
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    background-color: rgb(0, 0, 0, 0.5);
}

.modal {
    transition: all 0.3s ease-out;
    background-color: rgb(0, 0, 0, 0.5);
    overflow-y: auto;
}

.modal-fac3ds {
    height: 550px;
}

    .modal-fac3ds > .modal-content {
        height: 100%;
    }

.color-slider-items-arrow {
    color: #d4d4d4;
}

.react-multiple-carousel__arrow--right {
    right: calc(0% + 1px) !important;
}

.react-multiple-carousel__arrow--left {
    left: calc(0% + 1px) !important;
}

.tag {
    padding: 0 10px 0 10px;
    border-radius: 25px;
    background: #000;
    color: #FFF;
    font-weight: bold;
    font-size: 1rem;
}

.advice {
    margin: 5px 0 0;
    color: #df280a;
    font-size: 13px;
}

.iframe-video {
    position: absolute;
}

.body-video {
    background-color: transparent;
    border: none;
}

.currency-symbol {
    margin-left: 3px;
}

span.tax {
    margin-left: 3px;
    font-size: 80% !important;
}

.not-found-text1 {
    font-size: 35px;
}

.not-found-text2 {
    font-size: 22px;
}

.semibold {
    font-weight: 600;
}

div.video-container {
    display: inline-block;
    position: relative;
}

.video-container img {
    max-width: 100%;
}

.video-container .thumb {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 50px !important;
    height: 37.5px !important;
}

table caption {
    caption-side: top;
}

    table caption h2 {
        margin-bottom: inherit !important;
    }

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

# Credit Card Icons

-------------------------------------------------*/
.credit-card-icons {
    font-style: normal;
    font-weight: normal;
    speak: none;
    display: inline-block;
    text-decoration: inherit;
    text-align: center;
    font-variant: normal;
    text-transform: none;
    line-height: 16px;
    font-size: 16px;
    width: auto;
    margin-top: 10px;
}

    .credit-card-icons li {
        width: 42px;
        height: 42px;
        display: inline-block;
        background-color: inherit;
        -webkit-transition: all 0.3s ease-in-out;
        -moz-transition: all 0.3s ease-in-out;
        -o-transition: all 0.3s ease-in-out;
        -ms-transition: all 0.3s ease-in-out;
        transition: all 0.3s ease-in-out;
        position: relative;
        overflow: hidden;
    }

.credit-cards-icons a i {
    font-style: normal;
    font-weight: normal;
    speak: none;
    display: inline-block;
    text-decoration: inherit;
    text-align: center;
    font-variant: normal;
    text-transform: none;
    line-height: 16px;
    font-size: 16px;
    width: auto;
}

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

# Social Icons

-------------------------------------------------*/
.social-icons li {
    display: inline;
    float: left;
    margin-right: 4px;
}

    .social-icons li a {
        width: 42px;
        height: 42px;
        display: inline-block;
    }

        .social-icons li a:hover {
            text-decoration-line: none;
        }

.twitter i {
    margin: 13px 0 0 13px;
}

.twitter:hover {
    background-color: #3bc1ed;
}

    .twitter:hover i {
        color: #FFF;
    }

.facebook i {
    margin: 13px 0 0 16px;
}

.facebook:hover {
    background-color: #4a6d9d;
}

    .facebook:hover i {
        color: #FFF;
    }

.btn-facebook, .btn-facebook:active {
    background-color: #4a6d9d;
}

.btn-whatsapp, .btn-whatsapp:active {
    background-color: #25d366;
}

.btn-messenger, .btn-messenger:active {
    background-color: #0A7CFF
}

.btn-email, .btn-email:active {
    background-color: #C0C0C0
}

.pinterest i {
    margin: 13px 0 0 15px;
}

.pinterest:hover {
    background-color: #cb1f25;
}

    .pinterest:hover i {
        color: #FFF;
    }

.youtube i {
    margin: 13px 0 0 12px;
}

.youtube:hover {
    background-color: #FF0000;
}

    .youtube:hover i {
        color: #FFF;
    }


.instagram i {
    margin: 13px 0 0 13px;
}

.instagram:hover {
    background-color: #3f6f94;
}

    .instagram:hover i {
        color: #FFF;
    }

.social-icons li i {
    font-style: normal;
    font-weight: normal;
    speak: none;
    display: inline-block;
    text-decoration: inherit;
    text-align: center;
    font-variant: normal;
    text-transform: none;
    line-height: 16px;
    font-size: 16px;
    width: auto;
}

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

# CAPTCHA

-------------------------------------------------*/
.captcha-control {
    text-align: left;
}

    .captcha-control .refresh {
        background-color: #A8A8A8;
        position: absolute;
        color: white;
        border: none;
        cursor: pointer;
        border-radius: 5px;
        text-align: center;
    }

        .captcha-control .refresh:hover {
            background-color: #D0D0D0;
        }


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

# General

-------------------------------------------------*/
.color {
    color: var(--color_general);
}

.bgcolor {
    background-color: var(--color_general);
}

.bgcolor-disabled {
    background-color: #DBDBDB;
}

.bgcolor-gray80 {
    background-color: #808080;
}

.bold {
    font-weight: bold;
}

.pointer {
    cursor: pointer;
}

a.color {
    color: var(--color_general);
}

    a.color:hover, .btn-link:hover {
        color: var(--color_general);
    }

.term-promotion {
    text-decoration: underline;
    color: #595959;
}

.normal-font {
    font-weight: normal;
    text-transform: none;
}

.btn-success:not(:disabled):not(.disabled).active, .btn-success:not(:disabled):not(.disabled):active, .show > .btn-success.dropdown-toggle {
    background: #606060;
}

.btn-success.focus, .btn-success:focus {
    box-shadow: 0 0 0 0.2rem rgba(204, 204, 204, 0.5);
}

.btn-success.disabled, .btn-success:disabled {
    background-color: #d8d8d8;
    border-color: #d8d8d8;
}

a.disabled {
    pointer-events: none;
}

a.name {
    color: #212529;
}

.max-width-100 {
    max-width: 100px;
}

.form-group {
    text-align: left;
}

a.control-item {
    color: inherit;
    text-decoration: inherit;
}

.margin-bottom-1 {
    margin-bottom: 1rem
}

.toast-message {
    font-size: 14px;
}

.whatsapp-tool {
    margin: 0px 12px;
    padding: 0px;
    position: fixed;
    z-index: 99998;
    bottom: 24px;
    top: auto;
    height: 60px;
    width: 60px;
    border-radius: 29px;
    box-shadow: rgba(0, 0, 0, 0.15) 0px 4px 12px 0px;
    background-color: #25d366;
    display: block;
    text-align: center;
    font-size: 40px;
    right: 80px;
    color: #fff;
}

    .whatsapp-tool:hover {
        color: #FFF;
    }

#toast-container {
    z-index: 2000000001 !important;
}

.pagination-pages-select {
    border: 1px solid #ced4da;
    border-radius: .25rem;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    font-size: 14px;
    padding-left: 0.3rem;
    padding-right: 0.3rem;
    padding-bottom: 0.1rem;
    padding-top: 0.1rem;
    max-width: 100%;
}

.nav-tabs.border-bottom-0 {
    border-bottom: 0px;
}

.nav.nav-tabs a.nav-item.nav-link:not(.active) {
    color: var(--color_general);
}

.radiobutton-image input {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 50%;
    width: 16px;
    height: 16px;
    border: 2px solid #999;
    transition: 0.2s all linear;
    margin-right: 5px;
    position: relative;
    top: 4px;
    cursor: pointer;
}

    .radiobutton-image input:checked {
        border-width: 6px;
        border-style: solid;
        border-color: var(--color_general);
        outline: unset !important
    }

.radiobutton-image label {
    cursor: pointer;
}

.giftcard-modal-preview {
    max-width: 534px;
}
/*-----------------------------------------------

# COOKIE ALERT

-------------------------------------------------*/
.cookie-alert {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    margin: 0 !important;
    z-index: 2000000001;
    opacity: 0;
    border-radius: 0;
    transform: translateY(100%);
    transition: all 500ms ease-out;
    color: #ecf0f1;
    background: #212327;
}

    .cookie-alert.show {
        opacity: 0.88;
        transform: translateY(0%);
        transition-delay: 1000ms;
    }

    .cookie-alert a {
        text-decoration: underline
    }

    .cookie-alert .accept-cookies {
        margin-left: 10px;
        vertical-align: baseline;
    }

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

# DISCLAIMER MODAL

-------------------------------------------------*/
.content-disclaimer {
    max-height: 400px;
    overflow-y: auto;
}

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

# Horarios

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

.horarios .dias {
    width: 20%;
    max-height: 500px;
    overflow: auto;
    float: left;
}

    .horarios .dias button.fecha {
        width: 100%;
        background: #F5F5F5;
        margin-bottom: 10px;
        text-align: left;
        font-size: 18px;
        padding: 0.575rem .75rem;
    }

        .horarios .dias button.fecha:hover, .horarios .dias button.fecha:active, .horarios .dias button.fecha:focus, .horarios .dias button.fecha:visited {
            background: var(--color_general);
            color: #fff;
            box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.25);
        }

        .horarios .dias button.fecha.selected {
            background: var(--color_general);
            color: #fff;
            box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.25);
        }

.horarios .horas {
    width: 80%;
    max-height: 400px;
    overflow: auto;
    display: inline-block;
    padding: 20px;
}

.horarios .rango-horas {
    margin-bottom: 40px;
}

    .horarios .rango-horas p {
        display: inline;
        font-size: 18px;
        color: #444444;
    }

    .horarios .rango-horas .reservado p {
        display: inline;
        font-size: 18px;
        color: #444444;
    }

    .horarios .rango-horas span {
        display: inline;
        font-size: 14px;
        color: #444444;
        margin-left: 10px;
    }

    .horarios .rango-horas button {
        float: right;
        width: 140px;
        height: 40px;
        text-transform: uppercase;
        font-size: 14px;
        font-weight: 500;
    }

    .horarios .rango-horas .btn.agotado {
        float: right;
    }

    .horarios .rango-horas.reservado p {
        color: #EA0000;
    }

.btn.btn-success.shop {
    float: right;
    margin-top: 40px;
}

    .btn.btn-success.shop i {
        margin-right: 10px;
    }

#horarios-mobile {
    display: none;
}

label.bold {
    margin-right: 10px;
    font-weight: bold;
}

@media (max-width: 919px) {

    #horarios-mobile {
        display: block;
    }

    #horarios-desktop {
        display: none;
    }

    .horarios .horas {
        width: 100%;
        max-height: 100%;
        padding: 0;
        margin-top: 30px;
        overflow: hidden;
    }

    .horarios .rango-horas p {
        font-size: 14px;
    }

    .horarios .rango-horas button {
        float: right;
        /*width: 100px;*/
        height: 40px;
        text-transform: uppercase;
        font-size: 12px;
        font-weight: 500;
    }

    .horarios .rango-horas span {
        display: block;
        margin-top: 12px;
        margin-left: 0;
    }

    .btn.btn-success.shop {
        float: unset;
    }
}

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

# Credit Cards

-------------------------------------------------*/
.card__panel {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    text-align: left;
    padding: 10px 20px;
    margin-bottom: 20px;
    color: #fff;
    border-radius: 10px;
    box-sizing: border-box;
    background: no-repeat 0 0 #606060;
    cursor: pointer;
}

    .card__panel:hover {
        box-shadow: 3px 3px 11px 0px rgba(0,0,0,.75);
    }

.card__number {
    font-size: 22px;
    padding: 3px 0 10px;
    min-width: 235px;
}

.card__closeButton {
    position: absolute;
    color: white;
    top: 4px;
    right: 8px;
    font-weight: bold;
    cursor: pointer;
}

.checkout-card {
    padding: 10px 20px;
    margin-bottom: 20px;
    color: #fff;
    border-radius: 10px;
    box-sizing: border-box;
    background: no-repeat 0 0 #606060;
    cursor: pointer;
}

    .checkout-card p {
        margin: 0px;
    }


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

# Control de Agrupación de Chats

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

#sy-whatshelp {
    right: 25px;
    bottom: 25px;
    position: fixed;
    z-index: 9999;
}

    #sy-whatshelp a {
        position: relative;
    }

        #sy-whatshelp a.sywh-open-services {
            background-color: var(--color_general);
            color: #fff;
            line-height: 60px;
            margin-top: 10px;
            border: none;
            cursor: pointer;
            font-size: 23px;
            width: 60px;
            height: 60px;
            text-align: center;
            box-shadow: 2px 2px 8px -3px #000;
            border-radius: 100%;
            -webkit-border-radius: 100%;
            -moz-border-radius: 100%;
            -ms-border-radius: 100%;
            display: inline-block;
        }

            #sy-whatshelp a.sywh-open-services i {
                line-height: 60px;
            }

    #sy-whatshelp .sywh-services {
        width: 60px;
        height: auto;
    }

        #sy-whatshelp .sywh-services a, #sy-whatshelp .sywh-services div {
            display: none;
        }

        #sy-whatshelp .sywh-services.active a, #sy-whatshelp .sywh-services.active div {
            display: inline-block;
        }

        #sy-whatshelp .sywh-services a {
            color: #fff;
            line-height: 60px;
            margin-top: 10px;
            border: none;
            font-size: 46px;
            width: 60px;
            height: 60px;
            text-align: center;
            box-shadow: 2px 2px 8px -3px #000;
            border-radius: 100%;
            -webkit-border-radius: 100%;
            -moz-border-radius: 100%;
            -ms-border-radius: 100%;
        }

            #sy-whatshelp .sywh-services a.whatsapp {
                background-color: #25d366;
            }

#fb-root .fb_dialog .fb_dialog_content iframe {
    bottom: 95px !important;
    right: 13px !important;
}

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

# Quienes Somos

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

.quienes-somos {
    padding: 50px 71px;
}

    .quienes-somos .cover {
        max-width: 100%;
    }

    .quienes-somos .imagen {
        width: 100%;
    }

.lead {
    font-size: 1.35714286em;
    line-height: 4em;
    margin-bottom: 10px;
}

.quienes-somos h4 {
    font-size: 18px;
    font-weight: 500;
}

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

# Media Queries

-------------------------------------------------*/
@media (max-width: 919px) {

    nav {
        padding: 0;
    }

        nav.big {
            padding: 0;
            display: none;
        }

            nav.big h1 {
                display: none;
            }

            nav.big.primary-header {
                display: block;
            }

    .logo-small {
        display: block;
        margin: 10px auto;
        text-align: center;
    }

        .logo-small img {
            width: 150px;
        }

    .opciones-sm {
        display: block;
    }

    nav.small {
        display: none;
    }

        nav.small h1 {
            padding: 10px;
            font-size: 28px;
            margin-bottom: 5px;
            float: left;
        }

        nav.small a {
            font-weight: normal;
        }

    nav.big ul.opciones {
        display: none;
    }

    .input-group.buscar-lg {
        display: none;
    }

    .deseos {
        display: none;
    }

    .input-group.buscar-sm {
        float: left;
        /*width: 70%;*/
        margin-left: 50px;
        width: 55%;
        -webkit-transition: all .15s ease-in-out;
        -o-transition: all .15s ease-in-out;
        transition: all .15s ease-in-out;
    }

        .input-group.buscar-sm input {
            padding: 22px 15px;
        }

        .input-group.buscar-sm button {
            background: var(--color_general);
            color: #fff;
            padding-left: 20px;
            padding-right: 20px;
            border-color: transparent;
        }

    .cart-quantity {
        top: 1px;
        right: 13px;
    }

    .shopping-cart-ld {
        display: none;
    }

    .header-xs {
        display: block;
        background: #fff;
        padding: 9px 20px;
        box-sizing: border-box;
        width: 100%;
        height: 120px;
        box-shadow: 0px 2px 2px #d4d4d4;
    }

    .shopping-cart-sm {
        float: right;
    }

        .shopping-cart-sm a.btn-cart {
            background: var(--color_general);
            color: #fff;
            border: none;
        }

    .shopping-cart-sm, .loyalty-plan-sm, .cart-quantity {
        -webkit-transition: opacity .15s linear;
        -o-transition: opacity .15s linear;
        transition: opacity .15s linear
    }

    .loyalty-plan-sm {
        float: right
    }

        .loyalty-plan-sm a.btn-loyalty {
            background: var(--color_general);
            color: #fff;
            border: none;
            font-weight: 600;
            padding-top: .6rem;
            padding-bottom: .6rem
        }

        .loyalty-plan-sm a.btn {
            margin-right: 1rem;
            height: 100%
        }

    .header-xs input[type=text]:focus {
        -webkit-box-shadow: none;
        box-shadow: none;
        border: 1px solid #ced4da
    }

    .header-xs.expandido .input-group.buscar-sm {
        width: calc( 100% - 35px)
    }

    .content {
        margin-top: 0px;
    }

    .quantity input {
        width: 58px;
    }

    .quantity button {
        padding: 11px 14px;
    }

    .descripcion-producto .precio {
        font-size: 20px;
    }

    .categoria-img {
        width: 80%;
    }

    .categorias ul li {
        width: 100%;
    }

    .margin-bottom-content {
        margin-bottom: 3em;
    }

    .datos-personales {
        width: 100%;
    }

    .entrega-info .hide-bar {
        display: none;
    }

    .entrega-info .show-logo {
        display: block;
    }
}

@media (max-width: 768px) {
    #root {
        max-width: 100dvw;
        /*overflow-x: hidden;*/
    }

    .content {
        width: 100dvw;
        overflow: hidden;
    }

    header.ecomm-main-header {
        position: sticky;
        top: 0;
        z-index: 1023;
    }

    .loyalty-plan-sm a.btn-loyalty {
        background: var(--color-busqueda-fondo);
    }

    .shopping-cart-sm a.btn-cart {
        background: var(--color-busqueda-fondo);
    }

    search.ld-slider-search.secondary {
        background-color: var(--color-busqueda-fondo);
        padding: 0px;
        z-index: 102;
    }

        search.ld-slider-search.secondary > div {
            width: 100%;
        }

        search.ld-slider-search.secondary button.btn-search, search.ld-slider-search.secondary label {
            color: var(--color-busqueda-fondo);
        }

    header.ecomm-main-header.go-down nav.big {
        top: 0px;
    }

    .header-xs .small-logo {
        margin-left: 8.333333%;
    }

    nav .big {
        position: sticky;
        top: 0;
    }

    .breadcrumbs {
        padding: 10px 10px;
        margin: 0px;
    }

    .banners {
        margin-bottom: 0px;
    }

    .cart-quantity {
        top: -5px;
        right: -5px;
    }

    #wsnavtoggle {
        max-width: 70px;
    }

    .cuenta {
        padding: 20px;
    }

    .pago .informacion.order-summary {
        padding: 6px 25px 25px 6px;
    }

    .carrito-compras {
        margin-top: 20px;
    }

    .totales-carrito {
        text-transform: none;
    }
}

@media (max-width: 575px) {

    .pago .informacion .order-details h4 {
        border-bottom: 1px solid #ACACAC;
        margin-top: 20px;
    }

    .pago .informacion .order-details .item-compras {
        border-bottom: 1px solid #f4f4f4;
        padding-top: 20px;
    }
}

@media (max-width: 560px) {
    nav {
        padding: 0;
    }

        nav.big {
            padding: 0;
        }

    .header-xs {
        padding: 10px 20px;
        background-color: var(--color-busqueda-fondo);
    }

        .header-xs .input-group.buscar-sm {
            width: 100%;
            margin-left: 0px;
        }

    .input-group.buscar-sm {
        /*width: 70%;*/
        margin-left: 35px;
    }

        .input-group.buscar-sm input {
            padding: 20px 15px;
        }

        .input-group.buscar-sm button {
            background: var(--color_general);
            color: #FFF;
            padding-left: 10px;
            padding-right: 10px;
            border-color: transparent;
        }

    .shopping-cart-sm a.btn-cart {
        padding: .375rem .75rem;
    }

    .loyalty-plan-sm a.btn-loyalty {
        padding: .475rem .75rem;
    }

    .content {
        margin-top: 0px; /*39*/
    }

    .entrega-info a {
        display: block;
    }

    .entrega-info p {
        display: block;
    }

    .resultados {
        padding: 25px 5px 25px 5px;
    }

        .resultados .articulos {
            display: flex;
            flex-wrap: wrap;
            width: 100%;
        }

    .articulos .item {
        width: 100%; /* 100px; calc(100% - 15px);*/
        margin-right: 0px;
        margin-left: 1.5%;
        border: 1px solid #CDCDCD;
        border-radius: 0.25rem;
        height: auto;
        margin-bottom: 1.5%;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: 1rem;
    }

        .articulos .item .imagen {
            height: auto;
        }

        .articulos .item .descripcion {
            height: auto;
            margin-bottom: 10px;
            background: none;
            min-height: 125px; /*172px;*/
            padding: 15px 0px 15px 0px;
        }

            .articulos .item .descripcion .precio {
                font-size: 18px;
            }

        .articulos .item .product-button {
            bottom: 188px;
            font-size: 14px;
            border-radius: 0;
        }

    .resultados .articulos .item {
        width: 47%;
    }

    .product-price-discount {
        display: block;
    }

    .banner-categoria {
        display: none;
    }

    .quantity input {
        width: 58px;
    }

    .quantity button {
        padding: 11px 14px;
    }

    .categoria-img {
        width: 80%;
    }

    .categorias ul li {
        width: 100%;
    }

    .margin-bottom-content {
        margin-bottom: 0px;
    }

    .datos-personales {
        width: 100%;
    }

    .pago .informacion, .pago .formas-pago, .pago .informacion.order-summary {
        padding: 0px 0px;
    }

        .pago .informacion .order-summary {
            padding: 20px 20px;
        }

        .pago .informacion .order-details {
            padding: 0px 20px;
        }

    .cuenta {
        padding: 20px;
    }

    .resultados h4 {
        font-size: 18px;
        margin-left: 16px;
    }

    .mas-vendidos {
        margin-bottom: 0px;
    }

    .detalle-orden h2 {
        font-size: 14px;
    }

    .carrito-compras h2 {
        font-size: 18px;
    }

    .carrito-compras .lista-compras .item-compras {
        padding: 20px 0px 25px 0px;
    }

    .item.mobile {
        width: 100%;
        margin-left: 5px;
        margin-right: 5px;
    }

        .item.mobile .imagen {
            width: 40%;
            float: left;
            max-height: 137px;
        }

        .item.mobile .descripcion {
            background: #fff;
            text-align: left;
        }

    .whatsapp-tool {
        position: fixed;
        bottom: 25px;
        left: 25px;
        z-index: 998;
        width: 56px;
        height: 57px;
        background-color: #25d366;
        color: #FFF;
        border-radius: 40px;
        text-align: center;
        font-size: 36px;
        box-shadow: 2px 2px 3px #999;
    }

    #fb-root {
        display: none;
    }

    .forma-entrega {
        padding: 20px;
    }

        .forma-entrega .direccion {
            margin-bottom: 15px;
            height: auto;
        }

    .btn-success, .btn-danger {
        padding: 8px 15px;
    }

    .btn-print {
        margin-right: 1rem;
    }

    .contenido-estatico {
        margin: 10px 20px 20px 20px;
    }

    .round #tawkchat-status-text-container {
        z-index: 99998;
    }

    h1, h2, .forma-entrega h2 {
        font-size: 1.5rem;
    }

    .promo-art .item {
        width: 140px;
    }

        .promo-art .item .descripcion {
            height: 172px;
            padding: 10px;
        }

    .promo-art .categoria {
        padding-top: 10px;
    }

    .categorias h4 {
        font-size: 1.2rem;
    }

    .detalle-orden a {
        font-size: 0.8rem;
    }

    .promocion {
        margin-bottom: 0px;
    }

    .quienes-somos {
        padding: 20px 20px;
    }

    .item-2 a .item-info {
        display: block;
    }
}

@media (max-width: 394px) {
    .btn-success.btn-sm {
        font-size: 0.7rem;
    }
}

@media (max-width: 365px) {
    .title-coupon-description p {
        font-size: 1.3rem;
    }
}

@media (max-width: 360px) {
    .articulos .item {
        /*width: calc(100% - 35px);*/
        margin-right: 15px;
        margin-left: 15px;
    }
}

@media (max-width: 335px) {

    .header-xs {
        padding: 10px 10px;
    }

    .cart-quantity {
        top: 1px;
        right: 13px;
    }

    .quantity input {
        font-size: 20px;
        height: 39px;
    }

    .quantity button {
        margin-top: -8px;
        padding: 8px 12px;
    }

    .agregar {
        padding: 8px 20px;
    }

    .pago .informacion, .pago .formas-pago {
        padding: 0px 0px;
    }

    .cuenta {
        padding: 15px;
    }

    .btn-success.btn-sm {
        font-size: 0.65rem;
        margin-bottom: 7px;
    }
}

@media (max-width: 301px) {

    .header-xs {
        padding: 10px 7px;
    }

    .cart-quantity {
        top: 3px;
        right: 2px;
    }
}

@media (max-width: 321px) {
    .title-coupon-description p {
        font-size: 1.1rem;
    }
}

nav.ld-ec-mainmenu {
    z-index: 100;
    padding-top: 0px;
    padding-left: 0px;
}

    nav.ld-ec-mainmenu i.arrow {
        font-size: 0.75em;
        margin-left: 0.5rem;
    }

    nav.ld-ec-mainmenu button.arrow {
        appearance: none;
        background-color: transparent;
        border: none;
    }

    nav.ld-ec-mainmenu ul {
        background-color: #fff;
    }

        nav.ld-ec-mainmenu ul, nav.ld-ec-mainmenu ul li {
            margin: 0;
            padding: 0;
            list-style: none;
            position: relative;
        }

            nav.ld-ec-mainmenu ul li.ld-ec-menu-title {
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding: 0.5em 1em;
                font-weight: bold;
                color: var(--color_general);
            }

            nav.ld-ec-mainmenu ul li a, nav.ld-ec-mainmenu ul li a:link, nav.ld-ec-mainmenu ul li a:active, nav.ld-ec-mainmenu ul li a:hover, nav.ld-ec-mainmenu ul li a:visited, nav.ld-ec-mainmenu ul li button.btn-video {
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding: 0.5em 1em;
                text-decoration: none;
            }

                nav.ld-ec-mainmenu ul li a span span.ld-ec-menu-ico,
                nav.ld-ec-mainmenu ul li a:link span span.ld-ec-menu-ico,
                nav.ld-ec-mainmenu ul li a:active span span.ld-ec-menu-ico,
                nav.ld-ec-mainmenu ul li a:hover span span.ld-ec-menu-ico,
                nav.ld-ec-mainmenu ul li a:visited span span.ld-ec-menu-ico,
                nav.ld-ec-mainmenu ul li button.btn-video span span.ld-ec-menu-ico {
                    width: 1em;
                    text-align: center;
                    margin-right: 0.5em;
                    flex-grow: 0;
                    transition: transform 0.1s ease-in-out;
                }

                nav.ld-ec-mainmenu ul li button.btn-video span span.ld-ec-menu-ico {
                    margin-right: 0.1em;
                }

                nav.ld-ec-mainmenu ul li a span span.ld-ec-menu-txt,
                nav.ld-ec-mainmenu ul li a:link span span.ld-ec-menu-txt,
                nav.ld-ec-mainmenu ul li a:active span span.ld-ec-menu-txt,
                nav.ld-ec-mainmenu ul li a:hover span span.ld-ec-menu-txt,
                nav.ld-ec-mainmenu ul li a:visited span span.ld-ec-menu-txt {
                    flex-grow: 1;
                }

                nav.ld-ec-mainmenu ul li a:hover span span.ld-ec-menu-ico {
                    transform: scale(1.2);
                }

            nav.ld-ec-mainmenu ul li button.btn-video {
                padding-left: 1.2rem;
                color: inherit;
                font-size: inherit;
                font-weight: normal;
                width: 100%;
            }

            nav.ld-ec-mainmenu ul li ul {
                position: absolute;
                top: 100%;
                left: 0;
                display: none;
            }

            nav.ld-ec-mainmenu ul li:hover > ul {
                display: block;
            }

    nav.ld-ec-mainmenu > ul {
        display: flex;
    }

        nav.ld-ec-mainmenu > ul > li:hover ul {
            animation: to-top-submenu 0.5s ease-in-out;
            box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
        }

        nav.ld-ec-mainmenu > ul > li a, nav.ld-ec-mainmenu > ul > li a:link, nav.ld-ec-mainmenu > ul > li a:active, nav.ld-ec-mainmenu > ul > li a:hover, nav.ld-ec-mainmenu > ul > li a:visited {
            color: #424242;
        }

            nav.ld-ec-mainmenu > ul > li a:hover, nav.ld-ec-mainmenu > ul > li button.btn-video:hover {
                color: var(--color_general);
            }

        nav.ld-ec-mainmenu > ul > li > ul {
            min-width: 230px;
            border-top: 2px solid var(--color_general);
        }

            nav.ld-ec-mainmenu > ul > li > ul::before {
                content: '';
                display: block;
                width: 0px;
                height: 0px;
                border-style: solid;
                border-width: 0 7px 10px 7px;
                border-color: transparent transparent var(--color_general) transparent;
                transform: rotate(0deg);
                position: absolute;
                top: -10px;
                left: 3rem;
            }

            nav.ld-ec-mainmenu > ul > li > ul > li ul {
                min-width: 180px;
                position: absolute;
                top: 0;
                left: 100%;
                border-bottom: 2px solid var(--color_general);
            }

                nav.ld-ec-mainmenu > ul > li > ul > li ul > li > ul {
                    min-width: 180px;
                    position: absolute;
                    top: 0;
                    left: 100%;
                }

span.menu-text {
    display: inline-block;
    text-transform: lowercase;
}

    span.menu-text:first-letter {
        text-transform: capitalize;
    }

@keyframes to-top-submenu {
    0% {
        transform: translateY(50px);
        opacity: 0;
    }

    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

button.ld-ec-button-toggle-menu-responsive {
    display: none;
    padding: 0.75em 0.5em;
    background-color: #fff;
}

    button.ld-ec-button-toggle-menu-responsive i {
        font-size: 1.5em;
        color: #FFF;
    }

.menu-header-mobile {
    position: sticky;
    top: 0px;
    background: #FFF;
    display: block;
    padding: 7px 0px;
    z-index: 1;
}

@media screen and (max-width: 768px) {
    button.ld-ec-button-toggle-menu-responsive {
        appearance: none;
        background-color: var(--color-busqueda-fondo);
        border: none;
        display: inline-block;
        position: absolute;
        top: 5px;
        left: 17px;
        z-index: 101;
        transition: all 0.25s ease-in-out;
    }

        button.ld-ec-button-toggle-menu-responsive.open {
            left: 87.5vw;
            box-shadow: 0 0 10px 5px rgba(0, 0, 0, .15);
            aspect-ratio: 1;
            text-align: center;
        }

    nav.ld-ec-mainmenu {
        display: block;
        /*width: 90vw;
        height: 100vh;
        border-right: 1px solid #ccc;
        box-shadow: 0 0 10px 5px rgba(0, 0, 0, .15);*/
        transition: all 0.25s ease-in-out;
        overflow-y: auto;
    }

        nav.ld-ec-mainmenu .opciones-sm {
            margin-bottom: 10px;
        }

            nav.ld-ec-mainmenu .opciones-sm ul li {
                width: 100%;
            }

                nav.ld-ec-mainmenu .opciones-sm ul li a {
                    color: #424242;
                }

            nav.ld-ec-mainmenu .opciones-sm select {
                margin: 5px 15px;
            }

        nav.ld-ec-mainmenu .language-selector {
            border-bottom: 0px;
        }

        nav.ld-ec-mainmenu.open {
            left: 0;
        }

        nav.ld-ec-mainmenu .close-menu a {
            position: fixed;
            top: 0;
            -webkit-transition: all 0.4s ease-in-out;
            -moz-transition: all 0.4s ease-in-out;
            -o-transition: all 0.4s ease-in-out;
            -ms-transition: all 0.4s ease-in-out;
            transition: all 0.4s ease-in-out;
        }

    .menu-items.open nav.ld-ec-mainmenu .close-menu a {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 3rem;
        width: 3rem;
        left: calc(87% - 3rem);
        z-index: 1000;
    }

        .menu-items.open nav.ld-ec-mainmenu .close-menu a span,
        .menu-items.open nav.ld-ec-mainmenu .close-menu a span:before,
        .menu-items.open nav.ld-ec-mainmenu .close-menu a span:after {
            transition: all 500ms ease-in-out;
            cursor: pointer;
            height: 2px;
            width: 23px;
            background: #424242;
            position: fixed;
            display: block;
            content: '';
        }

        .menu-items.open nav.ld-ec-mainmenu .close-menu a span {
            background-color: transparent;
        }

    .close-menu a span:before {
        transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        -o-transform: rotate(45deg);
        -webkit-transform: rotate(45deg);
        bottom: 0px;
    }

    .close-menu a span:after {
        transform: rotate(-45deg);
        -moz-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
        -o-transform: rotate(-45deg);
        -webkit-transform: rotate(-45deg);
        bottom: -7px;
    }

    .close-menu a span:before, .close-menu a span:after {
        top: 26px;
    }

    nav.ld-ec-mainmenu > ul {
        flex-direction: column;
    }

    nav.ld-ec-mainmenu ul li button.btn-video {
        padding-left: 0.9rem;
        width: 100%;
    }

        nav.ld-ec-mainmenu ul li button.btn-video span span.ld-ec-menu-ico {
            margin-right: 0.5em;
        }

    nav.ld-ec-mainmenu ul li:hover > ul {
        display: none;
    }

    nav.ld-ec-mainmenu > ul li.ld-ec-menu-title {
        display: none;
    }

    nav.ld-ec-mainmenu > ul, nav.ld-ec-mainmenu > ul li, nav.ld-ec-mainmenu > ul ul {
        position: static;
    }

        nav.ld-ec-mainmenu > ul, nav.ld-ec-mainmenu > ul li, nav.ld-ec-mainmenu > ul ul, nav.ld-ec-mainmenu > ul:hover, nav.ld-ec-mainmenu > ul li:hover, nav.ld-ec-mainmenu > ul ul:hover {
            animation: none;
            box-shadow: none;
        }

            nav.ld-ec-mainmenu > ul li.open > ul {
                display: block;
                position: static;
                background-color: rgba(0, 0, 0, 0.05);
            }

            nav.ld-ec-mainmenu > ul li.open > a > button > i {
                transform: rotate(180deg);
            }

            nav.ld-ec-mainmenu > ul li.open > button > button > i {
                transform: rotate(180deg);
            }
}


.burger-menu {
    position: relative;
}

.menu-items {
    font-family: var(--font_family_menu, "'Roboto', sans-serif");
    list-style-type: none;
    left: -100%;
    height: 100%;
    position: fixed;
    top: 0;
    margin: 0;
    float: none;
    background-color: #fff;
    border-radius: 0px;
    z-index: 103;
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    -ms-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
    background-color: #fff !important;
    padding: 0;
}

    .menu-items.open {
        left: 0px;
        -webkit-transition: all 0.4s ease-in-out;
        -moz-transition: all 0.4s ease-in-out;
        -o-transition: all 0.4s ease-in-out;
        -ms-transition: all 0.4s ease-in-out;
        transition: all 0.4s ease-in-out;
        min-width: 87%;
    }


/*TypeAhead*/
.react-autosuggest__container {
    position: relative;
    width: 100%;
}

.react-autosuggest__input--focused {
    outline: none;
}

.react-autosuggest__input--open {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.react-autosuggest__suggestions-container {
    display: none;
}

.react-autosuggest__suggestions-container--open {
    display: block;
    position: absolute;
    top: 51px;
    min-width: 280px;
    border: 1px solid #aaa;
    background-color: #fff;
    font-weight: 300;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    z-index: 1050;
}

.react-autosuggest__suggestions-list {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

.react-autosuggest__suggestion {
    cursor: pointer;
    padding: 10px 20px;
}

.react-autosuggest__suggestion--highlighted {
    background-color: #ddd;
}

.react-autosuggest__suggestion-match {
    color: #000;
    font-weight: bold;
}


/* NIVELES PROGRESS CHART*/
.container-progress-chart {
    margin: 1rem auto;
    max-width: 400px;
    position: relative;
    display: flex;
    flex-direction: column;
    padding-inline: 1rem;
}

.btn-progress-chart, .btn-progress-chart:hover {
    position: absolute;
    margin-top: 0 !important;
    left: calc( 50% - 70px );
    top: 50%;
    font-size: 26px;
    font-weight: 700;
    color: #fff;
    border-radius: 9999px;
    width: 140px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-flex;
    height: 2.5rem;
    align-items: center;
}

.label-progress-left {
    position: absolute;
    color: #718096;
    width: fit-content;
    bottom: 0;
    left: 7%;
    text-align: left;
}

.label-progress-right {
    position: absolute;
    color: #718096;
    width: fit-content;
    bottom: 0;
    right: 8%;
    text-align: right;
}

.label-progress-center {
    position: absolute;
    color: #718096;
    width: 100%;
    bottom: 0;
    right: 0;
    text-align: center;
}

.news-carousel {
    z-index: 1003;
}

    .news-carousel .carousel-item {
        color: var(--color_texto_noticia);
        background-color: var(--color_fondo_noticia);
    }

.carousel-item .text-ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

    .carousel-item .text-ellipsis .title {
        position: absolute;
        top: 20px;
        background: silver;
        padding: 4px;
        left: 0;
        white-space: nowrap;
    }