/* Carousel Start */

ol.carousel-indicators.background{background-color:rgba(255,255,255,0.9);padding: 10px 0px 10px 0px;}
.carousel-indicators {background:transparent; cursor: pointer !important;}
.carousel-indicators-override {width: 100%; margin-left: 0px !important; left:0;}
.ele-carousel-indicators{font-size:18px;padding:5px;padding-left:10px;padding-right:10px;width:100%;}
.ele-carousel-indicators:hover {font-size:18px;border-radius:20px;padding:6px;padding-left:10px;padding-right:10px;background:#fff;color:#00467F;text-decoration:none;outline:none;}
.carousel-indicators .active{font-size:18px;border-radius:20px;padding:6px;padding-left:10px;padding-right:10px;background:#fff;color:#00467F;text-decoration:none;outline:none;}
.carousel-caption {
	background-color:rgba(255,255,255,0.7);
	left: 50%;
	transform: translate(-50%,0);
	text-shadow:none;
	bottom: 20px;
	padding: 10px;
	display: flex;
	flex-direction: column;
}
.carousel-caption.no-bg {
	background-color: transparent;
}

.carousel-caption .btn {margin: 0 auto;}
.carousel-title { flex: 1 1 auto; }

.carousel-caption h2{color:#0897CF; margin-bottom: 0px; font-size: 32px; }
@media (min-width: 768px) and (max-width: 991px) {
 .carousel-caption h2{font-size: 20px;}
}
@media (max-width: 768px){
	.carousel-caption h2{font-size: 20px; margin-top: 0px;}
}

.carousel-text{color:#333;padding:0px;overflow:hidden;font-size:15px;}
.carousel-caption-text{margin-top: 7px; padding-bottom:5px;}
.carousel-text p{font-size: 15px;margin: 0 0 5px;}
.carousel-control:hover{background:none}
.carousel-head-background{background: url(/resources/images/home/caption-background.jpg); background-repeat: repeat-x; background-size: contain;}
.caption-image{background-color: #ffffff;}

@media (min-width: 768px) and (max-width: 991px) {
 .carousel-text p{font-size: 12px;}
}


/*Carousel Container*/
.container-carousel{
	margin-right:auto;
	margin-left:auto;
	padding-left:10px;
	padding-right:10px
}

span.carousel-indicators-background {
	color: white;
}

.item {
	max-height: 300px;
}

.item img {
	width: 100%;
}

/*Appliying gradiend to both sides of Carousel*/

#quote-carousel .carousel-control.right{
	border-radius: 23px 23px 23px 23px;
	/*height: 45px;*/
	width: 115px;	
	background: none;
	opacity: 0.8;
}

#quote-carousel .carousel-control.left{
	border-radius: 23px 23px 23px 23px;
	/*height: 45px;*/
	width: 115px;
	background: none;
	opacity: 0.8;
}


/*Moving Arrows*/
#quote-carousel .carousel-control .icon-prev{
	margin-left: 0px;
}

#quote-carousel .carousel-control .icon-next{
	margin-right: 0px;
}


@media (min-width: 768px ) and (max-width: 805px){
	#quote-carousel .carousel-control .icon-prev{
		margin-left: 0px;
	}

	#quote-carousel .carousel-control .icon-next{
		margin-right: 0px;
	}
}



/* Hiding only Arrows and keep gradient effect*/
@media (max-width: 767px) {
 	#quote-carousel .carousel-control .icon-prev,
 	#quote-carousel .carousel-control .icon-next{
		display: none;
	} 
}


/*Applying Arrow images */
#quote-carousel .carousel-control .icon-prev{
	background: url(/resources/images/home/home-arrow-left.png) no-repeat;
	width: 55px;
	height: 45px;
	z-index: 10000;
}

#quote-carousel .carousel-control .icon-next {
	background: url(/resources/images/home/home-arrow-right.png) no-repeat;
	width: 55px;
	height: 45px;
}


/* Remove bootstrap indicators properties */

.carousel-control .icon-prev:before {
	content: none;
}

.carousel-control .icon-next:before {
	content: none;
}


/* Changes the position of the indicators - And font sizes for different screen sizes */

@media (min-width:1200px){
	.carousel-indicators {
		position: absolute;
		bottom: -10px;
		left: 29%;
		float: right;
		z-index: 15;
		width: 100%;
		margin-left: -29%;
	}
}

@media (min-width: 992px) and (max-width: 1199px) {
	.carousel-indicators {
		position: absolute;
		bottom: -10px;
		left: 30%;
		float: right;
		z-index: 15;
		width: 100%;
		margin-left: -30%;
	}

	.ele-carousel-indicators,.ele-carousel-indicators:hover{
		font-size:17px;
		padding-left:7px;
		padding-right:4px;
		width:100%;
	}	
}


@media (min-width: 769px) and (max-width: 991px) {
	.carousel-indicators {
		position: absolute;
		bottom: -10px;
		left: 30%;
		float: right;
		z-index: 15;
		width: 100%;
		margin-left: -30%;
	}
	.ele-carousel-indicators,.ele-carousel-indicators:hover{
		font-size:14px;
		padding-left:7px;
		padding-right:4px;
		width:100%;
	}		
}


@media (min-width: 768px ) and (max-width: 865px){

	.ele-carousel-indicators,.ele-carousel-indicators:hover{
		font-size:13px;
		padding-left:7px;
		padding-right:4px;
		width:100%;
	}
	
	.carousel-indicators {
		margin-left: -33.5%;
	}	
}


@media (max-width: 767px) {
	.carousel-indicators {
		display: none;	
	} 

	.carousel-caption {
		top: 20px;
		left: 50%;
		max-height: 230px;
		transform: translate(-50%,0%);
		bottom: 20px;
		padding: 10px;
	}
}

@media (max-width: 480px) {
	.carousel-caption {
		top: 10px;
		left: 50%;
		max-height: 230px;
		transform: translate(-50%,0%);
		bottom: 10px;
		padding: 10px;
		background-color: transparent;
	} 

	.carousel-title { display: none; }
}