/*
  Bootstrap Carousel Fade Transition (for Bootstrap 3.3.x)
  CSS from:       http://codepen.io/transportedman/pen/NPWRGq
  and:            http://stackoverflow.com/questions/18548731/bootstrap-3-carousel-fading-to-new-slide-instead-of-sliding-to-new-slide
  Inspired from:  http://codepen.io/Rowno/pen/Afykb
*/
.carousel-fade .carousel-inner .item {
    opacity: 0;
    transition-property: opacity;
}

.carousel-fade .carousel-inner .active {
    opacity: 1;
}

.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
    left: 0;
    opacity: 0;
    z-index: 1;
}

.carousel-fade .carousel-inner .next.left,
.carousel-fade .carousel-inner .prev.right {
    opacity: 1;
}

.carousel-fade .carousel-control {
    z-index: 2;
}

#main_page_carousel {
    position: relative;
    left: 0px;
    top: -20px;
    z-index: 0;
}

@media (max-width: 640px){
    .carousel-caption
    {
        top:-30px;
        transform:scale(0.9,0.9);
    }
    .carousel-indicators
    {
        display: none;
    }
    .slide-description
    {
        display: none;
    }
}

@media (max-width: 767px) {
}

@media (min-width: 768px) {

}

@media (min-width: 992px) {

    /*CUSTOMIZE THE CAROUSEL*/
    /*--------------------------------------------------*/
    /*Carousel base class*/
    #main_page_carousel {
        width: 100%;
        height: 80%;
        display: block;
    }

    /*Since positioning the image, we need to help out the caption*/
    .carousel-caption {
        z-index: 10;
    }

    /*Declare heights because of positioning of img element*/
    .carousel .item {
        /*height: 500px;*/
        height: 100%;
        background-color: #777;
        vertical-align: bottom;
    }

    .carousel-inner > .item img {
        display: block;
        /*position: absolute;*/
        /*top: 0;*/
        /*left: 0;*/
        /*width: 100%;*/
        /*height: 100%;*/
        /*width: auto;*/
        /*height: auto;*/
        /*min-width: 960px;*/
        /*min-height: 640px;*/
        object-fit: cover;
        overflow: hidden;
        height: 900px;
    }
}