/* 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 p {
		z-index: 10;
		color: #fff;
	}

	.carousel-caption {
		z-index: 10;
		background: rgba(0, 0, 0, .7);
		filter: alpha(opacity=0.70);
		border-radius: 6px;
	}


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

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

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

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

.carousel-inner > .item > iframe {
	background-color: #fff;
	width: 100%;
	height: 600px;
	position: relative center;
	bottom: 0;
	right: 0;
	left: 0;
	/*border: solid 1px red;*/
}

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

	.intro-types-buttons {
		display: none;
		margin-bottom: 20px;
	}


	/* 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:16px;
		}

		/* 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;
		}

		.carousel-inner > .item > iframe {
			/*border: solid 1px green;*/
		}
			/* 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;
		}

		/* 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;
		}

		.carousel-inner > .item > iframe {
			/*border: solid 1px blue;*/
		}

		#myCarousel .carousel {
			padding: 0;
			margin: 0;
			background-color: none !important;
		}

		.intro-types-buttons {
			display:inline-block;
			margin-bottom: 20px;
		}

	}
	/*	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;
		}

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

		/* 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 center;
			top: 0;
			left: 0;
			width:100%;
			margin:0 auto;
			text-align:center;
			min-height: 700px;
			border-radius: 7px;
			object-fit:contain;
			object-position: center;
		}

		.carousel-inner > .item > iframe {
			/*background-color: #fff;
			min-height: 550px;
			width:fit-content;
			position: absolute center;
			bottom: 0;
			border: solid 1px purple;*/
		}

	}