/* SLIDER - VERTICAL NUMBERS

01	GENERAL
02	ARROWS

*/

/* -----------------------------------------------------------------------
	01	GENERAL
/* ---------------------------------------------------------------------*/

.paragraph--type--wfbb-number-slider-with-text {
    background: var(--color-primary);
    border-radius: var(--border-radius);
}

.wfbb_number_slider_with_text .view-content {
    display: block;
    width: 100%;
}

.paragraph--type--wfbb-number-slider-views {
    display: grid;
    grid-gap: var(--grid-gap);
    grid-template-columns: var(--grid-columns);
    padding: var(--section-inner-side-padding);
}

.field--name-field-slider-wfbb-number-sliderv {
    grid-column: span 4;
    width: 100%;
    height: 100%;
}

.field--name-field-text-wfbb-number-sliderv {
    grid-column: span 7;
    width: 100%;
}

.field--name-field-slider-wfbb-number-sliderv .slick-initialized .slick-slide {
    display: grid;
    grid-gap: var(--grid-gap);
    grid-template-columns: repeat(4, 1fr);
    padding-bottom: 3.125rem;
    opacity: 0;
    transition: opacity ease-in-out .2s;
}

.field--name-field-slider-wfbb-number-sliderv .slick-slide.slick-active {
    opacity: .5;
}

.field--name-field-slider-wfbb-number-sliderv .slick-slide.slick-current {
    opacity: 1;
}

.field--name-field-slider-wfbb-number-sliderv .slick-slide .views-field-field-slider-number-wfbb-slider {
    grid-column: span 1;
    height: 4rem;
}

.field--name-field-slider-wfbb-number-sliderv .slick-slide .views-field-field-slider-text-wfbb-slider-nu {
    grid-column: span 3;
    font-size: var(--font-size-h3);
    line-height: 1.2;
    color: #fff;
}

.field--name-field-slider-wfbb-number-sliderv .slick-slide .views-field-field-slider-number-wfbb-slider img {
    height: 100%;
    width: auto;
    padding-top: .5rem;
}

.field--name-field-slider-wfbb-number-sliderv .slick-slide .views-field-field-slider-number-wfbb-slider div {
    height: 100%;
}


.views-field-field-title-wfbb-slider-number {
    font-size: var(--font-size-h2);
    font-weight: 700;
    color: #fff;
    line-height: 1.2;
    margin: 0 0 2rem;
}

.views-field-field-text-wfbb-slider-number-te {
    color: #fff;
}

.field--name-field-text-wfbb-number-sliderv .slick-slide {
    opacity: 0;
    transition: ease-in-out .5s;
    margin: 0 !important;
}

.field--name-field-text-wfbb-number-sliderv .slick-slide.slick-active {
    opacity: 1;
}

.views-field-field-text-wfbb-slider-number-te a,
.views-field-field-text-wfbb-slider-number-te a:hover {
    color: #fff;
    text-decoration: underline;
}

.field--name-field-text-wfbb-number-sliderv .slick-dots li button:before {
    color: #fff;
}

@media (max-width: 1280px) {
    .field--name-field-slider-wfbb-number-sliderv .slick-initialized .slick-slide {
        display: flex;
    }

    .field--name-field-slider-wfbb-number-sliderv .slick-slide .views-field-field-slider-number-wfbb-slider {
        height: 3.5rem;
    }

    .field--name-field-text-wfbb-number-sliderv {
        grid-column: span 8;
    }
}

@media (max-width: 767px) {

    .field--name-field-slider-wfbb-number-sliderv, .field--name-field-text-wfbb-number-sliderv {
        grid-column: span 12;
    }

    .field--name-field-slider-wfbb-number-sliderv {
        display: none;
    }

}

.field--name-field-slider-wfbb-number-sliderv .slick-slide .views-field-field-slider-text-wfbb-slider-nu .field-content {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* -----------------------------------------------------------------------
	02	ARROWS
/* ---------------------------------------------------------------------*/

.paragraph--type--wfbb-number-slider-with-text button.slick-prev.slick-arrow,
.paragraph--type--wfbb-number-slider-with-text button.slick-next.slick-arrow {
    left: 0;
    right: 0;
    margin: 0 auto;
}

.paragraph--type--wfbb-number-slider-with-text button.slick-next.slick-arrow {
    bottom: -3rem;
    top: inherit;
    transform: rotate(90deg);
}

.paragraph--type--wfbb-number-slider-with-text button.slick-prev.slick-arrow {
    top: -2rem;
    bottom: inherit;
    transform: rotate(-90deg);
}

.paragraph--type--wfbb-number-slider-with-text button.slick-prev.slick-arrow:before,
.paragraph--type--wfbb-number-slider-with-text button.slick-next.slick-arrow:before {
    font-size: 1.5rem;
    height: 1rem;
    width: 1rem;
    opacity: 1;
    color: transparent;
    background: var(--arrow-narrow-next-light);
    background-repeat: no-repeat;
    background-size: contain;
}

.paragraph--type--wfbb-number-slider-with-text button.slick-prev.slick-arrow.slick-disabled, 
.paragraph--type--wfbb-number-slider-with-text button.slick-next.slick-arrow.slick-disabled {
    opacity: 0;
    pointer-events: none;
}