/*
Fade content bs-carousel with hero headers
Code snippet by maridlcrmn (Follow me on Twitter @maridlcrmn) for Bootsnipp.com
Image credits: unsplash.com
*/


/********************************/


/*       Fade Bs-carousel       */


/********************************/

.fade-carousel {
    position: relative;
    height: 100%;
}

.fade-carousel .carousel-inner .item {
    height: 100vh;
    max-height: 480px;
}

.fade-carousel .carousel-indicators>li {
    margin: 0 2px;
    background-color: #f39c12;
    border-color: #f39c12;
    opacity: .7;
}

.fade-carousel .carousel-indicators>li.active {
    width: 10px;
    height: 10px;
    opacity: 1;
}


/********************************/


/*            Overlay           */


/********************************/

.overlay {
    position: absolute;
    width: 100%;
    /*height: 100%;*/
    /*z-index: 1;*/
    margin-bottom: 75px;
}


/********************************/


/*       Slides backgrounds     */


/********************************/

.fade-carousel .slides .slide-1,
.fade-carousel .slides .slide-2,
.fade-carousel .slides .slide-3 {
    height: 100%;
    background-size: cover;
    background-position: top center;
    background-repeat: no-repeat;
}

@media (min-width: 319px) and (max-width: 767px) {
    .overlay {
        position: relative;
    }
    .fade-carousel .slides .slide-1,
    .fade-carousel .slides .slide-2,
    .fade-carousel .slides .slide-3 {
        height: 100%;
        background-size: cover !important;
    }
    .fade-carousel {
        height: 140px;
    }
    .fade-carousel .carousel-inner {
        height: 100%;
    }
    .fade-carousel .carousel-inner .item {
        height: 100%;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .overlay {
        position: relative;
        margin-bottom: 15px;
    }
}