/*------------------------------------*\
    #Carousel
\*------------------------------------*/
.owl-nav.disabled {
    display: none;
}

.carousel {
    &.owl-carousel {
        .owl-item {
            img {
                width: inherit;
            }
        }

        &.carousel-dots {
            .owl-dots.disabled {
                display: block;
            }
        }
    }
}

.carousel-dots {
    button.owl-dot,
    button.owl-dot:focus {
        padding: 0;
        background-color: transparent;
        border: none;
        outline: none;
        box-shadow:none;
    }
    .owl-dots {
        text-align: center;
        line-height: 1;
        margin-top: 40px;
        .owl-dot {
            span {
                height: 6px;
                width: 20px;
                border-radius: 5px;
                background-color: $color-white;
                margin: 0 13px 0 0;
                display: inline-block;
                cursor: pointer;
            }
            &.active {
                span {
                    background-color: $color-theme;
                }
            }
        }
    }

    &.carousel-white {
        .owl-dots {
            .owl-dot {
                span {
                    border-color: rgba(255, 255, 255, 0.5);
                }

                &.active {
                    span {
                        background-color: $color-white;
                        border-color: $color-white;
                    }
                }
            }
        }
    }

    &.carousel-theme {
        .owl-dots {
            .owl-dot {
                &.active {
                    span {
                        background-color: $color-theme;
                        border-color: $color-theme;
                    }
                }
            }
        }
    }
}

.carousel-navs {
    .owl-nav {
        span {
            font-size: 0;
        }
        [class*="owl-"] {
            position: absolute;
            top: 50%;
            height: auto;
            width: auto;
            transform: translateY(-50%);
            background-color: transparent;
            opacity: 0.5;
            transition:all 0.35s ease-in-out;
            cursor: pointer;
            &:hover {
                opacity: 1;
            }
        }
        .owl-next,
        .owl-prev {
            background-repeat: no-repeat;
            width: 20px;
            height: 50px;
            &:before {

            }
        }
        .owl-prev {
            left: 50px;
            &:before {
                
            }
        }

        .owl-next {
            right: 50px;
            &:before {
            }
        }
    }
}

.carousel-navs {
    .owl-dots {
        position: absolute;
        bottom: 90px;
        width: 100%;
    }
}


/* Small Devices, Tablets */
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .slider-navs .owl-nav .owl-next:before,
    .slider-navs .owl-nav .owl-prev:before {
        font-size: 30px;
    }
}