/*
Block Name: Flexible Slider
Description: A very flexible slider which allows you to customise speeds and effects without hindering performance.
*/

.block-slider {position:relative;}
.block-slider:after {    
	content: "";
    background: url(/wp-content/uploads/Mask-Group-2.png);
    background-size: cover;
    bottom: 0;
    right: 0%;
    width: 350px;
    height: 398px;
    position: absolute;
	pointer-events: none;
}


.block-slider .slider-nav-button{
   background: transparent;
    width: 50px;
    height: 50px;
    display: block;
    position: absolute;
    border-radius: 50px;
    top: 45%;
    transform: translateY(-50%);
    cursor: pointer;
    z-index: 1;
    
}

.block-slider .slider-nav-button:after{
    content:'';
    background-image:url('/wp-content/themes/toast/assets/images/slider-arrow.svg');
    width:50px;
    height:50px;
    display:block;
    background-size:cover;
    background-position:center;
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
}

.block-slider .slider-prev{left:5px;}
.block-slider .slider-next{right:5px;}
.block-slider .slider-prev:after{transform:translate(-50%, -50%) rotate(180deg);}

.block-slider .slide{margin:0 1rem;}

.block-slider.white-slides .slide{
    background:#ffffff;
    padding:30px;
    box-sizing:border-box;
}

.block-slider .slide{height:var(--variable-width-height); position: relative; padding: 0 5rem;}
.block-slider .slide .slide-link{position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
.block-slider .slide img{height:var(--variable-width-height);width:auto;max-width:none; width: 100%; }

.block-slider.white-slides .slide *:last-child{
    padding-bottom:0;
}

ul.slick-dots { list-style: none; text-align: center;margin-top: 2rem; padding-left: 0; }
ul.slick-dots li { display: inline;}
ul.slick-dots li button:before { display: block; content: ""; width: 1rem; height: 1rem; border-radius: 1rem; background: #546A7B; }
ul.slick-dots li.slick-active button:before { background: #e88b39;}
.slick-dots li button {  font-size: 0; background: #fff; border: 0; display: none; }

.block-slider.logos::after{display: none;}
.block-slider.logos .slide{padding: 2rem;}

.block-slider.logos .slick-dots{display: flex; justify-content: center; align-items: center; gap: .25rem;}
.block-slider.logos .slick-dots li{margin-bottom: 0;}
.block-slider.logos .slick-dots li button{}
.block-slider.logos .slick-dots li.slick-active button::before{background-color: var(--brand-1)}
.block-slider.logos .slick-dots li button::before{ background-color: #3C3C3B;}

.block-slider .slider .slick-arrow{opacity: 0; pointer-events: none; transition: all .25s;}
.block-slider .slider:hover .slick-arrow{opacity: 1; pointer-events: all; transition: all .25s;}

.block-slider.logos .slide{border: 1px solid #CCCCCC; border-radius: 2rem;}

@media (max-width: 1024px) {
	.block-slider:after{display:none;}
}

@media (max-width: 768px) {
	.block-slider:after{display: none;}
}

@media (max-width: 550px) {
	section.block-slider .container { max-width: 80% }
    .block-slider .slider .slick-arrow{opacity: 1; pointer-events: all;}
}