/* Start Main Page */

#main-page {
    position: relative;
    height: 100vh;
    background-color: #000;
    /* overflow: hidden; */
}

.carousel-overlay{
	background-color: black;
	width: 100%;
	opacity: 0;
	height: 100%;
	position: absolute;
	z-index: 15;
}

.carousel-control-prev,
.carousel-control-next {
    z-index:20;
}

/* End Main Page */

/* Start Carousel */

.carousel-inner {
    position: relative;
    width: 100%;
    overflow: hidden;
    height: 100vh;
    z-index: 1;
}
/* 
.carousel-item{
  z-index: 50;  
} */

.carousel-inner .carousel-item .bg-slide{
    object-fit: cover;
    height: 100vh;
    opacity: 0.7;
}

.carousel-captions{
    position: absolute;
    right: 15%;
    top: 0;
    bottom: 0;
    left: 15%;
    z-index: 20;
    padding-top: 20px;
    padding-bottom: 20px;
    color: #fff;
    text-align: center;    
}

.carousel-captions .logo-image{
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    background-color: transparent;
    overflow: hidden;
    height: 100vh;
    line-height: 100vh;
}
.carousel-captions .logo-image img{
    height: 300px;
    /* opacity: 0.8; */
}

/* End Carousel */


/* Start Media Queries */

@media only screen and (min-width : 360px) and (max-width : 640px) {
    .carousel-captions .logo-image img{
        height: 225px;
    }  
}

@media only screen and (min-width : 320px) and (max-width : 568px) {
    .carousel-captions .logo-image img{
        height: 225px;
    }  
}

@media only screen and (min-width : 768px) and (max-width : 1366px) {
    .carousel-captions .logo-image img{
        height: 425px;
    }  
}