/* rd-slider: Shared slick carousel arrow & dot styling */

.rd-slider .slick-prev,
.rd-slider .slick-next {
    position: absolute;
    top: unset;
    bottom: -80px;
    width: 30px;
    height: 30px;
    cursor: pointer;
    z-index: 1;
    /* see SlickThemePC.css: variables, not background-color, so both states are pinned here.
       Flat arrows on a transparent plate, filled with the dots' grey on hover. */
    --rd-slick-arrow-bg: transparent;
    --rd-slick-arrow-bg-hover: var(--rd-slick-dot-color, #CCCCCC);
}

.rd-slider .slick-next {
    right: 25px;
}

.rd-slider .slick-prev {
    right: 100px;
    left: unset !important;
}

.rd-slider .slick-prev:hover,
.rd-slider .slick-prev:focus,
.rd-slider .slick-next:hover,
.rd-slider .slick-next:focus {
    transform: unset !important;
    box-shadow: none !important;
}

.rd-slider .slick-prev:before {
    transform: unset;
}

.rd-slider .slick-prev:before,
.rd-slider .slick-next::before {
    width: 30px;
    height: 30px;
    content: "" !important;
    background-image: unset;
}

.rd-slider .slick-dots {
    left: -8px;
    justify-content: left;
    bottom: -80px;
    display: flex !important;
}


@media (max-width: 768px) {
    .rd-slider .slick-prev, .rd-slider .slick-next, .rd-slider .slick-dots {
        
    bottom: -30px !important;
    }

}