/*
*   Carousel CSS for slider on header page - All definitions of background images are inside the header
*/
	
html {
    height: 100%;
}


header #carouselContainer {
    position: absolute;
    width: 100%;
}

.carousel-image {
    position: absolute;
    display: inline-block;
    left: 0vw;
    top: 0vh;
    -webkit-transition: 3s ease-in-out;
    -moz-transition: 3s ease-in-out;
    -ms-transition: 3s ease-in-out;
    -o-transition: 3s ease-in-out;
    transition: 3s ease-in-out;
    transition-property: opacity;
    width: auto;
    width: 100%;
}

#carouselContainer img {
}

.active {
    left: 0vw;
}

.carousel-inner {
    width: 100px;
    height: 100px;
}

.hidden {
    -webkit-opacity: 0;
    -moz-opacity: 0;
    opacity: 0;
}

/* Here you can change the positioning of any of your images
 * if you require. 
 */

#img_1 {
    z-index: -1;
}

#img_2 {
    z-index: -2;
}

#img_3 {
    z-index: -3;
}
#img_4 {
    top: 0vw;
    z-index: -4;
}
#img_5 {
    top: 0vw;
    z-index: -5;
}