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

/* Carousel base class */
.carousel {
  border-bottom: 8px solid #d06f1a;
  -moz-box-shadow: 0 4px 4px -2px #999;
  -webkit-box-shadow: 0 4px 4px -2px #999;
  box-shadow: 0 4px 4px -2px #999;
}
/* Since positioning the image, we need to help out the caption */
.carousel-caption {
  z-index: 10;
  font: normal normal bold 1.5em/150% Myriad Pro, Calibri, Arial;
}
@media (max-width:767px) { 
	.carousel { 
		/*border-top: 8px solid #fcb034; */
		border-bottom: 0;
		-moz-box-shadow: 0 -4px 4px -2px #999;
		-webkit-box-shadow: 0 -4px 4px -2px #999;
		/*box-shadow: 0 -4px 4px -2px #999;*/
	}
	.carousel-caption { 
		position: relative; 
		font: italic normal bold 1em/100% Myriad Pro, Calibri, Arial;
		color: #000;
		text-align: center;
		top: 0;
		right: auto;
		bottom: auto;
		left: 0;
		margin: 0 auto;
		padding: 10px 0 10px 0;
		text-shadow: none;
		height: 70px;
	}
	.carousel-inner img {
		border-bottom: 8px solid #d06f1a;
		-moz-box-shadow: 0 4px 4px -2px #999;
		-webkit-box-shadow: 0 4px 4px -2px #999;
		box-shadow: 0 4px 4px -2px #999;
	}
}

.carousel-control {
	width: 5% !important;
	z-index: 1000;
}

@media (max-width:767px) {
	.carousel-control.left  { background: url('../img/Rotating-Banner/arrowLeftM.png') no-repeat center center; }
	.carousel-control.right { background: url('../img/Rotating-Banner/arrowRightM.png') no-repeat center center; }
}
@media (min-width:768px) and (max-width:991px) {
	.carousel-control.left  { background: url('../img/Rotating-Banner/arrowLeftT.png') no-repeat center center; }
	.carousel-control.right { background: url('../img/Rotating-Banner/arrowRightT.png') no-repeat center center; }
}
@media (min-width:992px) {
	.carousel-control.left  { background: url('../img/Rotating-Banner/arrowLeftD.png') no-repeat center center; }
	.carousel-control.right { background: url('../img/Rotating-Banner/arrowRightD.png') no-repeat center center; }
}

/* Declare heights because of positioning of img element */
.carousel .item { background-color: #777; }
@media (max-width:767px) { 
	.carousel .item { background-color: #FFF; }
}

@media (min-width:768px) { 
	.carousel-caption.topLeft {
		top: 0; 
		left: 0;
		bottom: auto;
		right: auto;
		padding-left: 5% !important;
	}
	.carousel-caption.bottomRight {
		top: auto; 
		left: auto;
		bottom: 0;
		right: 0;
		padding-right: 5% !important;
	}
	.carousel-caption.half-width {
		width: 50% !important;
	}
	.carousel-caption.quarter-width {
		width: 40% !important;
	}
	.carousel-caption.text-left { text-align: left !important; }
	.carousel-caption.text-right { text-align: right !important; }
	.carousel-caption.text-black { color: #000000; }
	.carousel-caption.text-white { color: #fdfbfa; }
}