.carousel {
    overflow: hidden;
    // The transform: translateZ(0); attr added is to overcome a bug with Safari which stops border radius applying to parent divs
    transform: translateZ(0);

    .owl-item  {
        overflow: hidden;
        flex: 1 1 auto;
    }
    .item {
        height: 380px;
        background: #fff;

        .fitted-image {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            opacity: 1;
            z-index: 1;
        }

        // Set's backdrop blur
        $backdrop-blur: 15px;
        $backdrop-offset: -25px;

        .fitted-image-backdrop {
            position: absolute;
            top: $backdrop-offset;
            right: $backdrop-offset;
            bottom: $backdrop-offset;
            left: $backdrop-offset;
            filter: blur($backdrop-blur);
            z-index: 0;
        }

        .slide-image-link {
            height: 100%;
            width: 100%;
            display: block;
        }

        .slide-image-link:hover,
        .slide-image-link:hover .fitted-image {
            opacity: 1;
        }
    }

    .slider-banner {
        background: rgba(0,0,0, 0);
        margin: 1rem;
        color: #000;
        left: 0;
        right: 0;
        position: absolute;
        z-index: 2;

        .slider-banner-title {
            margin: 0;
            border: none;
        }

        .slider-banner-subtitle {
            color: #000;
            margin-top: 10px;
            margin: 0;
        }

        .slider-banner-subtitle:empty {
            margin-top: 0;
        }
    }

    // Styles the slider banner background so it sits behind the slider banner
    .slider-banner .slider-banner-bg {
        position: absolute;
        z-index: -1;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
    }

    // owl controls
    .owl-carousel {
        position: relative;


        .owl-nav {
            margin: 0;
            opacity: 0;
            visibility: hidden;
            transition: 0.3s;

            .owl-prev,
            .owl-next {
                position: absolute;
                top: 50%;
                margin-top: -15px;
                padding: 0.25rem !important;
                margin: 0 0.5rem;
                font-size: 16px;
                border-radius: 10rem;
                background: #fff;
                color: #000;
                opacity: 0.9;
                transition: 0.3s;
            }
        }

        .owl-prev {
            left: 0;
            transform: translateX(5px);
        }

        .owl-next {
            right: 0;
            transform: translateX(-5px);
        }

        .owl-controls {
            margin-top: 0;
        }
    }

    // Shows the owl navigation buttons when the user hovers over the slider
    .owl-carousel:hover {
        .owl-nav {
            opacity: 1;
            visibility: visible;
            transition: 0.3s;

            .owl-prev, .owl-next {
                transition: 0.3s;
            }

            .owl-prev {
                left: 0;
                transform: translateX(0);
            }

            .owl-next {
                right: 0;
                transform: translateX(0);
            }
        }
    }

    // Vertically aligns the slider banner to the top of the slide
    .overlay-top {
        top: 0;
    }

    // Applies additional top margin to the slider banner when pagination dots are present
    .pagination-dots .overlay-top {
        margin-top: 2.5rem;
    }

    // Vertically aligns the slider banner to the top of the slide
    .overlay-middle {
        top: 50%;
        transform: translateY(-50%);
        margin-top: 0;
        margin-bottom: 0;
    }

    // Veritcal aligns the slider banner to the bottom of the slide
    .overlay-bottom {
        bottom: 0;
    }

}


// Smart Object Slider styling
#ajaxSlider {
    .owl-carousel {
        display: block;
    }
}


/*Pagination buttons*/
.slide {
    .owl-carousel .owl-dots {
        position: absolute;
        top: 10px;
        left: 10px;
        margin-top: 0 !important;

        .owl-dot {
            span {
                position: relative;
                background: #fff;
                width: 12px;
                height: 12px;
                box-shadow: 0 0 2px 1px rgba(0,0,0,0.3);
                opacity: 0.5;
            }
        }

        .owl-dot span:hover {
            opacity: 1;
        }

        .owl-dot.active span {
            opacity: 1;
            &:after {
                content: '';
                position: absolute;
                background: var(--theme-primary-color);
                height: 6px;
                width: 6px;
                border-radius: 350px;
                left: 0;
                top: 0;
                margin: 3px;
            }
        }
    }
}
