/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */

/* Carousel base class 
.carousel {
  height: 575px;
  margin-bottom: 20px;
}*/


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

	.carousel-caption p {
		z-index: 10;
		color: #fff;
		/*background:rgba(84, 84, 84, .5); 
	filter:alpha(opacity=0.50);*/
		margin: 10px auto;
	}


/* Declare heights because of positioning of img element */
.carousel .item {
  height:300px;
}

.carousel-indicators {
	/*background:rgba(84, 84, 84, .5); 
	filter:alpha(opacity=0.50);*/
}


/*.carousel-inner > .item > img {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 100%;
  height: 575px;
}*/
	/* RESPONSIVE CSS
-------------------------------------------------- */

	@media (min-width: 768px) {

		/* Carousel base class 
	.carousel {
	  height: 575px;
	  margin-bottom: 20px;
	}*/
		/* Since positioning the image, we need to help out the caption */
		.carousel-caption p {
			font-size: 18px;
		}

		/* Declare heights because of positioning of img element*/
		.carousel .item {
			height: 512px;
			background-color: transparent;
		}

		.carousel-inner > .item > img {
			position: absolute;
			top: 0;
			left: 0;
			height: 512px;
		}

		/* Bump up size of carousel content 
  .carousel-caption p {
    margin-bottom: 20px;
    font-size: 21px;
    line-height: 1.4;
  }*/


	}

	@media (min-width: 992px) {
		/* Carousel base class */
		.carousel {
			min-height: 661px;
			margin: 0 auto;
		}
		/* Since positioning the image, we need to help out the caption */
		.carousel-caption {
			z-index: 10;
			background-color:black;
			border-radius:6px;
		}

		/* Declare heights because of positioning of img element */
		.carousel .item {
			min-height: 600px;
			background-color: transparent;
		}

		.carousel-inner > .item > img {
			position: absolute;
			top: 10px;
			left: 0;
			height: 661px;
		}

		#myCarousel .carousel {
			padding: 0;
			margin: 0;
			background-color: none !important;
		}
	}
	/* Large devices (large desktops, ≥1200px and up) 
 grid (col-lg)
-------------------------------------------------- */
	@media (min-width:1200px) {
		/* Carousel base class */
		#myCarousel .carousel-control {
			padding: 0;
			margin: 0;
			background: none !important;
			filter: none !important;
			progid: none !important;
		}

		.carousel-item {
			background: none !important;
		}

		.carousel-control {
			min-height: 750px;
			margin: 0 auto;
			padding: 0;
		}

		.carousel a.left, .carousel a.right {
			color: darkorange;
		}

		/* Bump up size of carousel content*/
		.carousel-caption p {
			font-size: 24px;
			line-height: 1.4;
			margin: 0 auto;
		}

		/* Since positioning the image, we need to help out the caption */
		.carousel-caption {
			z-index: 10;
			margin: 10px auto 14px auto;
			background:rgba(0, 0, 0, .4); 
			filter:alpha(opacity=0.40);
		}

		/* Declare heights because of positioning of img element */
		.carousel .item {
			min-height: 750px;
		}

		.carousel-inner .item {
			background-color: none !important;
			filter: none !important;
			progid: none !important;
		}

		.carousel-inner > .item > img {
			position: absolute;
			top: 10px;
			left: 0;
			bottom: 10px;
			right: 0;
			max-width: 650px;
			min-height: 740px;
			border-radius: 10px;
		}

	}