/***************************************
HELPER slider horizontal en slick
***************************************/
.slick-horizontal {
    display: flex
}

.slick-horizontal .item {
    display: none;
    width: 100%
}

.slick-horizontal.show-1 .item.item {
    display: none
}

.slick-horizontal.show-1 .item:nth-child(-n+1) {
    display: block
}

.slick-horizontal.show-2 .item.item {
    display: none
}

.slick-horizontal.show-2 .item:nth-child(-n+2) {
    display: block
}

.slick-horizontal.show-3 .item.item {
    display: none
}

.slick-horizontal.show-3 .item:nth-child(-n+3) {
    display: block
}

.slick-horizontal.show-4 .item.item {
    display: none
}

.slick-horizontal.show-4 .item:nth-child(-n+4) {
    display: block
}

.slick-horizontal.show-5 .item.item {
    display: none
}

.slick-horizontal.show-5 .item:nth-child(-n+5) {
    display: block
}

.slick-horizontal.show-6 .item.item {
    display: none
}

.slick-horizontal.show-6 .item:nth-child(-n+6) {
    display: block
}

.slick-horizontal.show-7 .item.item {
    display: none
}

.slick-horizontal.show-7 .item:nth-child(-n+7) {
    display: block
}

.slick-horizontal.show-8 .item.item {
    display: none
}

.slick-horizontal.show-8 .item:nth-child(-n+8) {
    display: block
}

.slick-horizontal.show-9 .item.item {
    display: none
}

.slick-horizontal.show-9 .item:nth-child(-n+9) {
    display: block
}

.slick-horizontal.show-10 .item.item {
    display: none
}

.slick-horizontal.show-10 .item:nth-child(-n+10) {
    display: block
}

.slick-horizontal.show-11 .item.item {
    display: none
}

.slick-horizontal.show-11 .item:nth-child(-n+11) {
    display: block
}

.slick-horizontal.show-12 .item.item {
    display: none
}

.slick-horizontal.show-12 .item:nth-child(-n+12) {
    display: block
}

@media screen and (max-width: 1200px) {
    .slick-horizontal.breakpoint-1200-show-1 .item.item {
        display:none
    }

    .slick-horizontal.breakpoint-1200-show-1 .item:nth-child(-n+1) {
        display: block
    }

    .slick-horizontal.breakpoint-1200-show-2 .item.item {
        display: none
    }

    .slick-horizontal.breakpoint-1200-show-2 .item:nth-child(-n+2) {
        display: block
    }

    .slick-horizontal.breakpoint-1200-show-3 .item.item {
        display: none
    }

    .slick-horizontal.breakpoint-1200-show-3 .item:nth-child(-n+3) {
        display: block
    }

    .slick-horizontal.breakpoint-1200-show-4 .item.item {
        display: none
    }

    .slick-horizontal.breakpoint-1200-show-4 .item:nth-child(-n+4) {
        display: block
    }

    .slick-horizontal.breakpoint-1200-show-5 .item.item {
        display: none
    }

    .slick-horizontal.breakpoint-1200-show-5 .item:nth-child(-n+5) {
        display: block
    }

    .slick-horizontal.breakpoint-1200-show-6 .item.item {
        display: none
    }

    .slick-horizontal.breakpoint-1200-show-6 .item:nth-child(-n+6) {
        display: block
    }

    .slick-horizontal.breakpoint-1200-show-7 .item.item {
        display: none
    }

    .slick-horizontal.breakpoint-1200-show-7 .item:nth-child(-n+7) {
        display: block
    }

    .slick-horizontal.breakpoint-1200-show-8 .item.item {
        display: none
    }

    .slick-horizontal.breakpoint-1200-show-8 .item:nth-child(-n+8) {
        display: block
    }

    .slick-horizontal.breakpoint-1200-show-9 .item.item {
        display: none
    }

    .slick-horizontal.breakpoint-1200-show-9 .item:nth-child(-n+9) {
        display: block
    }

    .slick-horizontal.breakpoint-1200-show-10 .item.item {
        display: none
    }

    .slick-horizontal.breakpoint-1200-show-10 .item:nth-child(-n+10) {
        display: block
    }

    .slick-horizontal.breakpoint-1200-show-11 .item.item {
        display: none
    }

    .slick-horizontal.breakpoint-1200-show-11 .item:nth-child(-n+11) {
        display: block
    }

    .slick-horizontal.breakpoint-1200-show-12 .item.item {
        display: none
    }

    .slick-horizontal.breakpoint-1200-show-12 .item:nth-child(-n+12) {
        display: block
    }
}

@media screen and (max-width: 992px) {
    .slick-horizontal.breakpoint-992-show-1 .item.item {
        display:none
    }

    .slick-horizontal.breakpoint-992-show-1 .item:nth-child(-n+1) {
        display: block
    }

    .slick-horizontal.breakpoint-992-show-2 .item.item {
        display: none
    }

    .slick-horizontal.breakpoint-992-show-2 .item:nth-child(-n+2) {
        display: block
    }

    .slick-horizontal.breakpoint-992-show-3 .item.item {
        display: none
    }

    .slick-horizontal.breakpoint-992-show-3 .item:nth-child(-n+3) {
        display: block
    }

    .slick-horizontal.breakpoint-992-show-4 .item.item {
        display: none
    }

    .slick-horizontal.breakpoint-992-show-4 .item:nth-child(-n+4) {
        display: block
    }

    .slick-horizontal.breakpoint-992-show-5 .item.item {
        display: none
    }

    .slick-horizontal.breakpoint-992-show-5 .item:nth-child(-n+5) {
        display: block
    }

    .slick-horizontal.breakpoint-992-show-6 .item.item {
        display: none
    }

    .slick-horizontal.breakpoint-992-show-6 .item:nth-child(-n+6) {
        display: block
    }

    .slick-horizontal.breakpoint-992-show-7 .item.item {
        display: none
    }

    .slick-horizontal.breakpoint-992-show-7 .item:nth-child(-n+7) {
        display: block
    }

    .slick-horizontal.breakpoint-992-show-8 .item.item {
        display: none
    }

    .slick-horizontal.breakpoint-992-show-8 .item:nth-child(-n+8) {
        display: block
    }

    .slick-horizontal.breakpoint-992-show-9 .item.item {
        display: none
    }

    .slick-horizontal.breakpoint-992-show-9 .item:nth-child(-n+9) {
        display: block
    }

    .slick-horizontal.breakpoint-992-show-10 .item.item {
        display: none
    }

    .slick-horizontal.breakpoint-992-show-10 .item:nth-child(-n+10) {
        display: block
    }

    .slick-horizontal.breakpoint-992-show-11 .item.item {
        display: none
    }

    .slick-horizontal.breakpoint-992-show-11 .item:nth-child(-n+11) {
        display: block
    }

    .slick-horizontal.breakpoint-992-show-12 .item.item {
        display: none
    }

    .slick-horizontal.breakpoint-992-show-12 .item:nth-child(-n+12) {
        display: block
    }
}

@media screen and (max-width: 768px) {
    .slick-horizontal.breakpoint-768-show-1 .item.item {
        display:none
    }

    .slick-horizontal.breakpoint-768-show-1 .item.item:nth-child(-n+1) {
        display: block
    }

    .slick-horizontal.breakpoint-768-show-2 .item.item {
        display: none
    }

    .slick-horizontal.breakpoint-768-show-2 .item:nth-child(-n+2) {
        display: block
    }

    .slick-horizontal.breakpoint-768-show-3 .item.item {
        display: none
    }

    .slick-horizontal.breakpoint-768-show-3 .item:nth-child(-n+3) {
        display: block
    }

    .slick-horizontal.breakpoint-768-show-4 .item.item {
        display: none
    }

    .slick-horizontal.breakpoint-768-show-4 .item:nth-child(-n+4) {
        display: block
    }

    .slick-horizontal.breakpoint-768-show-5 .item.item {
        display: none
    }

    .slick-horizontal.breakpoint-768-show-5 .item:nth-child(-n+5) {
        display: block
    }

    .slick-horizontal.breakpoint-768-show-6 .item.item {
        display: none
    }

    .slick-horizontal.breakpoint-768-show-6 .item:nth-child(-n+6) {
        display: block
    }

    .slick-horizontal.breakpoint-768-show-7 .item.item {
        display: none
    }

    .slick-horizontal.breakpoint-768-show-7 .item:nth-child(-n+7) {
        display: block
    }

    .slick-horizontal.breakpoint-768-show-8 .item.item {
        display: none
    }

    .slick-horizontal.breakpoint-768-show-8 .item:nth-child(-n+8) {
        display: block
    }

    .slick-horizontal.breakpoint-768-show-9 .item.item {
        display: none
    }

    .slick-horizontal.breakpoint-768-show-9 .item:nth-child(-n+9) {
        display: block
    }

    .slick-horizontal.breakpoint-768-show-10 .item.item {
        display: none
    }

    .slick-horizontal.breakpoint-768-show-10 .item:nth-child(-n+10) {
        display: block
    }

    .slick-horizontal.breakpoint-768-show-11 .item.item {
        display: none
    }

    .slick-horizontal.breakpoint-768-show-11 .item:nth-child(-n+11) {
        display: block
    }

    .slick-horizontal.breakpoint-768-show-12 .item.item {
        display: none
    }

    .slick-horizontal.breakpoint-768-show-12 .item:nth-child(-n+12) {
        display: block
    }
}

@media screen and (max-width: 576px) {
    .slick-horizontal.breakpoint-576-show-1 .item.item {
        display:none
    }

    .slick-horizontal.breakpoint-576-show-1 .item:nth-child(-n+1) {
        display: block
    }

    .slick-horizontal.breakpoint-576-show-2 .item.item {
        display: none
    }

    .slick-horizontal.breakpoint-576-show-2 .item:nth-child(-n+2) {
        display: block
    }

    .slick-horizontal.breakpoint-576-show-3 .item.item {
        display: none
    }

    .slick-horizontal.breakpoint-576-show-3 .item:nth-child(-n+3) {
        display: block
    }

    .slick-horizontal.breakpoint-576-show-4 .item.item {
        display: none
    }

    .slick-horizontal.breakpoint-576-show-4 .item:nth-child(-n+4) {
        display: block
    }

    .slick-horizontal.breakpoint-576-show-5 .item.item {
        display: none
    }

    .slick-horizontal.breakpoint-576-show-5 .item:nth-child(-n+5) {
        display: block
    }

    .slick-horizontal.breakpoint-576-show-6 .item.item {
        display: none
    }

    .slick-horizontal.breakpoint-576-show-6 .item:nth-child(-n+6) {
        display: block
    }

    .slick-horizontal.breakpoint-576-show-7 .item.item {
        display: none
    }

    .slick-horizontal.breakpoint-576-show-7 .item:nth-child(-n+7) {
        display: block
    }

    .slick-horizontal.breakpoint-576-show-8 .item.item {
        display: none
    }

    .slick-horizontal.breakpoint-576-show-8 .item:nth-child(-n+8) {
        display: block
    }

    .slick-horizontal.breakpoint-576-show-9 .item.item {
        display: none
    }

    .slick-horizontal.breakpoint-576-show-9 .item:nth-child(-n+9) {
        display: block
    }

    .slick-horizontal.breakpoint-576-show-10 .item.item {
        display: none
    }

    .slick-horizontal.breakpoint-576-show-10 .item:nth-child(-n+10) {
        display: block
    }

    .slick-horizontal.breakpoint-576-show-11 .item.item {
        display: none
    }

    .slick-horizontal.breakpoint-576-show-11 .item:nth-child(-n+11) {
        display: block
    }

    .slick-horizontal.breakpoint-576-show-12 .item.item {
        display: none
    }

    .slick-horizontal.breakpoint-576-show-12 .item:nth-child(-n+12) {
        display: block
    }
}

@media screen and (max-width: 384px) {
    .slick-horizontal.breakpoint-384-show-1 .item.item {
        display:none
    }

    .slick-horizontal.breakpoint-384-show-1 .item:nth-child(-n+1) {
        display: block
    }

    .slick-horizontal.breakpoint-384-show-2 .item.item {
        display: none
    }

    .slick-horizontal.breakpoint-384-show-2 .item:nth-child(-n+2) {
        display: block
    }

    .slick-horizontal.breakpoint-384-show-3 .item.item {
        display: none
    }

    .slick-horizontal.breakpoint-384-show-3 .item:nth-child(-n+3) {
        display: block
    }

    .slick-horizontal.breakpoint-384-show-4 .item.item {
        display: none
    }

    .slick-horizontal.breakpoint-384-show-4 .item:nth-child(-n+4) {
        display: block
    }

    .slick-horizontal.breakpoint-384-show-5 .item.item {
        display: none
    }

    .slick-horizontal.breakpoint-384-show-5 .item:nth-child(-n+5) {
        display: block
    }

    .slick-horizontal.breakpoint-384-show-6 .item.item {
        display: none
    }

    .slick-horizontal.breakpoint-384-show-6 .item:nth-child(-n+6) {
        display: block
    }

    .slick-horizontal.breakpoint-384-show-7 .item.item {
        display: none
    }

    .slick-horizontal.breakpoint-384-show-7 .item:nth-child(-n+7) {
        display: block
    }

    .slick-horizontal.breakpoint-384-show-8 .item.item {
        display: none
    }

    .slick-horizontal.breakpoint-384-show-8 .item:nth-child(-n+8) {
        display: block
    }

    .slick-horizontal.breakpoint-384-show-9 .item.item {
        display: none
    }

    .slick-horizontal.breakpoint-384-show-9 .item:nth-child(-n+9) {
        display: block
    }

    .slick-horizontal.breakpoint-384-show-10 .item.item {
        display: none
    }

    .slick-horizontal.breakpoint-384-show-10 .item:nth-child(-n+10) {
        display: block
    }

    .slick-horizontal.breakpoint-384-show-11 .item.item {
        display: none
    }

    .slick-horizontal.breakpoint-384-show-11 .item:nth-child(-n+11) {
        display: block
    }

    .slick-horizontal.breakpoint-384-show-12 .item.item {
        display: none
    }

    .slick-horizontal.breakpoint-384-show-12 .item:nth-child(-n+12) {
        display: block
    }
}

.slick-horizontal.slick-initialized {
    display: block
}

.slick-horizontal.slick-initialized .item.item {
    display: block;
    position: relative
}

.slick-horizontal .slick-track {
    display: flex;
}

.slick-horizontal .slick-slide {
    float: none;
    height: auto
}

/*******************************
CONFIGURACIÓN DEL SLIDER
********************************/
.slick-horizontal .item {
    /*diapositiva*/
    padding: 1rem;
}

/*************************************************************
FLECHAS
debe estar "arrow": true y "prevArrow" "nextArrow" configuradas
******************************************************************/
.slick-horizontal {
    margin: 0 2rem;
}

.slick-horizontal .slick-arrow {
    height: 2rem;
    width: 2rem;
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    top: 50%;
    transform: translateY(-50%);
    z-index: 100;
    position: absolute;
    cursor: pointer;
}

.slick-horizontal .slick-arrow:hover {
    color: var(--primary-contrast);
    background: var(--primary-color);
    border-radius: var(--default-border-radius);
}

.slick-horizontal .slick-prev {
    /* flecha anterior */
    left: -2rem;
}

.slick-horizontal .slick-next {
    /* flecha anterior */
    right: -2rem;
}

/********************************************
DOTS 
deben estar en la configuración del slider 
*********************************************/
.slick-horizontal .slick-dots {
    /* necesario para responsive */
    display: flex;
    flex-wrap: wrap;
}

.slick-horizontal .slick-dots li button::before {
    /* estructura del boton*/
    width: .5rem;
    height: .5rem;
    color: black;
    opacity: 0.4
}

.slick-dots .slick-active button::before {
    /* cuando está activo*/
    opacity: 0.7;
}