/***********************/
/*  START :: Carousel  */
/***********************/
:root {
    --carousel-arrow-left: url(/wp-content/uploads/carousel-arrow-left.svg);
    --carousel-arrow-right: url(/wp-content/uploads/carousel-arrow-right.svg);
}

/* START :: Settings for better BB editability */ 
    /* allows cards to be editable in bb, not overlapping */
    body.fl-builder-edit .slider--value-carousel .slick-slide .fl-col {
        width:100%!important; 
    }
    body.fl-builder-edit .slider--value-carousel > .fl-col-content .fl-col{
        width:100%!important;
    }

    /* In this case, turn off flex inside BB editor on equalized height columns, so they're easier to edit */
    body.fl-builder-edit .value-carousel--row .fl-col-group-equal-height,
    body.fl-builder-edit .value-carousel--row .fl-col-group-equal-height .fl-col {
        display: unset;
    }

    /*  MOBILE, only  */
    @media only screen and (max-width: 768px) {
        /* In this case, limit the width of the cards only in BB editor so they're easier to edit in BB editor's responsive small */
        body.fl-builder-edit .slider--value-carousel > .fl-col-content .fl-col.column--value-carousel {
            display: inline-block;
            max-width: 394px;
        }
    }
/* END   :: Settings for better BB editability */ 


/* START :: Carousel Controls */
.slider--value-carousel {
    position: relative; /* for absolutely positioned controls */
}
.slider-header{
    display: flex;
    gap: 0;
    justify-content: space-between;
    padding-left: var(--content-padding);
    padding-right: var(--content-padding);
    max-width: 1366px;
    position: absolute;
    width: 100%;
    z-index: 10;
}
.slider-header:before,
.slider-header:after{
    display: none !important; /* pseudo elements were not allowing arrows to be flush with start and end */
}
.slick-arrow, .slick-arrow:hover, .slick-arrow:focus{
    background-color:transparent!important;
    border:none!important;
    padding:0;
    transition: all 400ms ease-in-out;
}
.slick-arrow:hover, .slick-arrow:focus{
    transform: scale(1.1); 
}
/* END   :: Carousel Controls */

.slick-initialized .slick-slide {
    display: flex!important;
    height: auto;
    flex-direction: column;
    /* padding: 0 8px; gap between slides */

    /* all non- current / centered slides are scaled down  */
    transform: scale(0.95); 
    transition: all 400ms ease-in-out;
    transition-delay: 200ms;
}
/* current / centered slide is full size  */
.slick-initialized .slick-slide.slick-active {
    transform: scale(1);
}

.slick-initialized .slick-slide>div{
    height:100%;
}
.slider--value-carousel .column--value-carousel .fl-col-content {
    display: flex;
    height: 100%;
    flex-direction: column;
    width: 908px;
}
.slick-initialized .slick-slide .fl-col-content > * {
    opacity: 0;
    transition: opacity 400ms ease-in-out;
}
.slick-initialized .slick-slide.slick-active .fl-col-content > * {
    opacity: 1;
    transition: opacity 400ms ease-in-out;
}

body:not(.fl-builder-edit) .slider--value-carousel > .fl-col-content .fl-col-content{
    overflow: hidden;
}
body:not(.fl-builder-edit) .slider--value-carousel .column--value-carousel .fl-col-content {
    overflow: hidden;
}
body:not(.fl-builder-edit) .value-carousel--row .slick-track{
    display: flex;
}
body:not(.fl-builder-edit) .slider--value-carousel .slick-slide .fl-col {
    height: 100%;
}

/*  BB "EXTRA LARGE" DESKTOP, only  */
@media screen and (min-width: 1366px) {
    .slider-header { left: calc(50% - calc(1366px / 2)); }
}

/*  BB "LARGE" DESKTOP, only   */
@media only screen and (min-width: 992px) and (max-width: 1366px) {
    .slider-header{
        padding-left: 16px;
        padding-right: 16px;
    }
    .slider--value-carousel .column--value-carousel .fl-col-content {
        width: 798px;
    }
    .column--value-carousel .maxwidth640 {
        max-width: 560px;
    }
}

/*  TABLET, and down  */
@media only screen and (max-width: 992px) {
    .slider-header{
        padding-left: 16px;
        padding-right: 16px;
    }
    .slider--value-carousel .column--value-carousel .fl-col-content {
        width: 583px;
    }
}

/*  MOBILE, only  */
@media only screen and (max-width: 768px) {
    .slider-header{
        padding-left: 0;
        padding-right: 0;
    }
    .slider--value-carousel > .fl-col-content .fl-col-content{
        overflow: hidden;
        /* max-width: 339px; */
        max-width: calc(100vw - var(--scrollbarWidth) - 36px);
        width: 100%;
    }
    body:not(.fl-builder-edit) .slider--value-carousel > .fl-col-content .fl-col{
        /* width:280px; */
    }
    .value-carousel--row .fl-row-content-wrap {
        padding-left: 18px;
    }
    .value-carousel--row .slider-header {
        gap: 10px;
        justify-content: flex-start;
        padding-bottom: 26px;
        position: relative;
    }
    body:not(.fl-builder-edit) .value-carousel--row .slick-initialized .slick-slide {
        max-width: calc(100vw - var(--scrollbarWidth) - 36px);
        width: 100%;
        /* max-width: 339px; */
    }
    
    .slider--value-carousel > .fl-col-content .fl-col-content {
        width: auto;
    }
    /* these together: removes weird spacing at top of slide */
    .value-carousel--row .slick-slide > div {
        display: flex; 
        /* height: auto; */
    }
    /* these together: removes weird spacing at top of slide */
    .value-carousel--row .slick-slide .fl-col {
        align-self: flex-start; 
    }
}
/***********************/
/*  END   :: Carousel  */
/***********************/