/* SLIDER - TESTIMONIALS

01	GENERAL
02  IMAGE
03  TEXT
04  VIDEO OVERLAY
05  ARROWS


*/

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

.wfbb_testimonial_slider .paragraph {
    background-color: var(--color-grey-light);
    border-radius: var(--border-radius);
    overflow: hidden;
}

.wfbb_testimonial_slider .paragraph .slide .paragraph {
    display: grid;
    grid-column-gap: var(--grid-gap);
    grid-template-columns: var(--grid-columns);
    height: 100%;
}

.wfbb_testimonial_slider .slick-track {
    display: flex !important;
}

.wfbb_testimonial_slider .paragraph .slide {
    height: inherit !important;
}

.field--name-field-image-wfbb-testimonial .contextual {
    height: auto !important;
}

.field--name-field-image-wfbb-testimonial .contextual-region > div:first-child {
    height: auto;
    position: absolute;
}

/* -----------------------------------------------------------------------
	02	IMAGE
/* ---------------------------------------------------------------------*/

.field--name-field-image-wfbb-testimonial {
    grid-column: span 6;
    position: relative;
}

.field--name-field-image-wfbb-testimonial div:not(.field--name-field-caption-image) {
    height: 100%;
}

.field--name-field-image-wfbb-testimonial img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.field--name-field-image-wfbb-testimonial .field--name-field-caption-image {
    position: absolute;
    bottom: 1rem;
    left: 1rem;
}

/* -----------------------------------------------------------------------
	03	TEXT
/* ---------------------------------------------------------------------*/

.group-testimonial-text {
    grid-column: span 5;
    position: relative;
    padding: var(--section-gap) 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}

.wfbb_testimonial_slider .group-testimonial-text > div {
    position: relative;
}

.wfbb_testimonial_slider .group-testimonial-text:before {
    display: block;
    content: '';
    height: 120%;
    width: 16%;
    background: var(--color-grey-light);
    position: absolute;
    transform: rotate(7deg);
    left: -14%;
    top: -1rem;
}

.remotevideo.btn-wfbb {
    display: initial;
}

@media (max-width: 767px) {

    .field--name-field-image-wfbb-testimonial,
    .group-testimonial-text {
        grid-column: span 12;
    }

    .group-testimonial-text {
        padding: calc(var(--section-inner-side-padding) * 2);
    }

    .wfbb_testimonial_slider .group-testimonial-text:before {
        display: none;
    }

}

/* -----------------------------------------------------------------------
	04	VIDEO OVERLAY
/* ---------------------------------------------------------------------*/

.field--name-field-video-wfbb-testimonial {
    position: absolute;
    width: 100%;
    min-height: 100%;
    background: rgb(19 19 19 / 90%);
    backdrop-filter: blur(20px);
    transform: translate(0px, 100%);
}

.field--name-field-video-wfbb-testimonial.active {
    transform: translate(0px, 0%);
}

#remotevideo-content {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.remotevideoclose {
    display: none;
    top: 2rem;
    right: 2rem;
    background-image: var(--icon-close);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: right center;
    position: absolute;
    font-size: 0;
    height: 2rem;
    width: 2rem;
    z-index: 10;
    cursor: pointer;
}

.wrapper-remotevideo {
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
}

/* -----------------------------------------------------------------------
	05	ARROWS
/* ---------------------------------------------------------------------*/

.wfbb_testimonial_slider .paragraph nav.slick__arrow {
    right: var(--section-inner-side-padding);
    width: 6rem;
    transform: none;
    left: inherit;
    top: inherit;
    bottom: 4.5rem;
}

.wfbb_testimonial_slider .paragraph nav.slick__arrow .slick-arrow:before {
    font-size: 1.5rem;
    height: 1rem;
    width: 1rem;
    opacity: 1;
    color: transparent;
}

.wfbb_testimonial_slider .paragraph nav.slick__arrow .slick-prev:before {
    background: var(--arrow-narrow-prev-grey);
    background-repeat: no-repeat;
    background-size: contain;
}

.wfbb_testimonial_slider .paragraph nav.slick__arrow .slick-next:before {
    background: var(--arrow-narrow-next-grey);
    background-repeat: no-repeat;
    background-size: contain;
}