/* ********************************** */
/*  Carousel  testimonial by Wplayots */
/* ********************************** */

:root {
    /* Colour variables for buttons & dots. Adjust HEX values as required */
    --wps-testimonial-carousel-color1: #000000;
    --wps-testimonial-carousel-color2: #fdfaf2;
    /* Number of rows to show - Use an odd number if you wish to prevent left and right overhang.*/
    --wps-testimonial-carousel-show: 1; /*Desktop*/
    --wps-testimonial-carousel-show-laptop: 1; /*Laptop breakpoint 1280px*/
    --wps-testimonial-carousel-show-tablet: 1; /*Tablet breakpoint 980px*/
    --wps-testimonial-carousel-show-mobile: 1; /*Mobile breakpoint 768px*/
    --wps-testimonial-carousel-spacing: 10px; /*Space between rows - value added to left and right */
}

/* Size the rows (Each item should be in its own row */
.wps-testimonial-carousel .flickity-viewport .et_pb_testimonial{
    width: calc(
        (
                100% -
                    (
                        var(--wps-testimonial-carousel-show) *
                            (var(--wps-testimonial-carousel-spacing) * 2)
                    )
            ) / var(--wps-testimonial-carousel-show)
    );
    margin: 0 var(--wps-testimonial-carousel-spacing) !important;
    display: flex;
    flex-direction: column;
    min-height: 100%;
    align-items: center;
}

/* Size the rows for laptops & large tablets */
@media screen and (max-width: 1280px) {
    .wps-testimonial-carousel .flickity-viewport .et_pb_testimonial{
        width: calc(
            (
                    100% -
                        (
                            var(--wps-testimonial-carousel-show-laptop) *
                                (var(--wps-testimonial-carousel-spacing) * 2)
                        )
                ) / var(--wps-testimonial-carousel-show-laptop)
        );
    }
}

@media screen and (max-width: 980px) {
    .wps-testimonial-carousel .flickity-viewport .et_pb_testimonial{
        width: calc(
            (
                    100% -
                        (
                            var(--wps-testimonial-carousel-show-tablet) *
                                (var(--wps-testimonial-carousel-spacing) * 2)
                        )
                ) / var(--wps-testimonial-carousel-show-tablet)
        );
    }
}

/* Size the rows for smaller tablets & mobile */
@media screen and (max-width: 768px) {
    .wps-testimonial-carousel .flickity-viewport .et_pb_testimonial{
        width: calc(
            (
                    100% -
                        (
                            var(--wps-testimonial-carousel-show-mobile) *
                                (var(--wps-testimonial-carousel-spacing) * 2)
                        )
                ) / var(--wps-testimonial-carousel-show-mobile)
        );
    }

    /* Hide buttons on mobile */
    .wps-testimonial-carousel .flickity-prev-next-button {
        display: none;
    }
}


.wps-testimonial-carousel .flickity-viewport .et_pb_testimonial .et_pb_testimonial_portrait{ margin: 0 auto 20px !important;}
.wps-testimonial-carousel .flickity-viewport .et_pb_testimonial .et_pb_testimonial_description{ margin: 0 auto !important;}

/* Buttons */

/* Buttons position */
.wps-testimonial-carousel .flickity-prev-next-button.previous {
    left: auto;
    right: 60px;
    top: -30px;
    border-radius: 0;
}

.wps-testimonial-carousel .flickity-prev-next-button.next {
    right: 20px;
     top: -30px;
    border-radius: 0; 
}

/* Button colours */
.wps-testimonial-carousel .flickity-prev-next-button {
    transition: all 0.3s ease;
    color: var(--wps-testimonial-carousel-color1);
    background: var(--wps-testimonial-carousel-color2);
}

/* Button icons */
.wps-testimonial-carousel .flickity-prev-next-button .flickity-button-icon {
    left: 25%;
    top: 25%;
    width: 50%;
    height: 50%;
}

/* Reverse button colours on hover */
.wps-testimonial-carousel .flickity-prev-next-button:hover {
    color: var(--wps-testimonial-carousel-color2);
    background: var(--wps-testimonial-carousel-color1);
}

/* Remove button focus highlight */
.wps-testimonial-carousel .flickity-prev-next-button:focus {
    box-shadow: none;
}

/* Dots */
/* Dots position */
.wps-testimonial-carousel .flickity-page-dots {
    bottom: -25px;
}

/* Dots colour */
.wps-testimonial-carousel .flickity-page-dots .dot {
    background: var(--wps-testimonial-carousel-color2);
    opacity: 1;
}

/* Active dot colour */
.wps-testimonial-carousel .flickity-page-dots .dot.is-selected {
    background: var(--wps-testimonial-carousel-color1);
    opacity: 1;
}