/* 
 * Last Editor: Shane Mollari
 * Program Name: CIP Contracting Group
 * Program Author: Shane Mollari
 * Program Date: June 07, 2021
 * 
 * Page Description:
 *      
 * 
 * Use Case Definition:
 * 
 * 
 *     
 * 
 * Notes & Comments
 * 
 * 
 * 
 * 
 * Restrictions
 *
 *      
 */


.carousel {
  margin-bottom: 4rem;
}

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

/* Positioning of carousel img element */
.carousel-item > img {
  z-index: 1;
  opacity: 0.7;
}

/* RESPONSIVE CSS
-------------------------------------------------- */

@media (min-width: 40em) {
  /* Bump up size of carousel content */
  .carousel-caption p {
    margin-bottom: 1.25rem;
    font-size: 1.25rem;
    line-height: 1.4;
  }

}

/* Sets the logo & moto width & height */
#carousel_logo {
	top:10%;
	width:100%;
	position: absolute; 
	z-index: 2; 
}
/*  LOGO&MOTO img width & height */
#carousel_logo img {
	width:60%;
	max-height:350px !important;
}	
img#carousel_image, #myCarousel {
	width:100% !important;
	height:35% !important;
}
#myCarousel button {
	z-index:3;
}

@media (min-width: 320px){

img#carousel_image {
	height:150px !important;
}
}

@media (min-width: 400px){

img#carousel_image {
	height:200px !important;
}
}
/* X-Small devices (portrait phones, less than 576px)
 No media query for `xs` since this is the default in Bootstrap
*/
/*Small devices (landscape phones, 576px and up)*/
@media (min-width: 576px){	

img#carousel_image {
	height:250px !important;
}
}

/*Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) {

img#carousel_image {
	height:350px !important;
}
}

/* Large devices (desktops, 992px and up)*/
@media (min-width: 992px) { 

img#carousel_image {
	height:450px !important;
}
}

/* X-Large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) {  

img#carousel_image {
	height:550px !important;
}
}
/* XX-Large devices (larger desktops, 1400px and up)*/
@media (min-width: 1400px) { 

#carousel_logo {
	top:20%;	
}
img#carousel_image {
	min-height:750px !important;
}

@media (min-width: 1900px) { 

#carousel_logo {
	top:5%;	
}
img#carousel_image {
	width:100% !important;
	min-height:100% !important;
}
}