// CAROUSELS PRO
.carousel-multi-item {
    margin-bottom: 100px;
    .carousel-indicators li {
        height: 20px;
        max-width: 20px;
        background-color: $primary-color;
        margin-bottom: -60px;
    }
    .carousel-indicators .active {
        height: 25px;
        max-width: 25px;
        background-color: $primary-color;
        @include border-radius(50%);
    }
    .controls-top {
        text-align: center;
        margin-bottom: 30px;
        .btn-floating {
            background: $primary-color;
        }
    }
    .carousel-indicators {
        margin-bottom: -2em;
    }
    .card {
        margin: 1px;
    }
    .card-cascade.narrower {
        margin-top: 20px;
        margin-bottom: 5px;
    }
}

@media only screen and (max-width: 992px) {
    .carousel-multi-item {
        .carousel-indicators li {
            margin-bottom: -30px;
        }
    }
}

//Carousel with thumbnails
.carousel-thumbnails {
    margin-bottom: 80px;
    .carousel-indicators {
        margin-bottom: -75px;
        position: absolute;
        li {
            height: auto;
            max-width: 100px;
            border: none;
        }
        .active {
            height: auto;
            width: auto;
            background-color: #fff;
            opacity: 0.5;
        }
        img {
            max-width: 100px;
            height: 50px;
            overflow: hidden;
        }
    }
}

@media only screen and (max-width: 600px) {
    .carousel-thumbnails {
        margin-bottom: 60px;
        .carousel-indicators {
            margin-bottom: -60px;
            img {
            max-width: 50px;
            height: 25px;
        }
        }
    }
}