/* Carousel Start */

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

.item {
	height: 350px;
	background-repeat: no-repeat;
	background-size: cover;
	//background-attachment: fixed;
	background-position: top center;
	background-color: @siteGrey;

	.container {
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}	
}

.item img {
	width: 100%;
}

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

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




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

#quote-carousel .carousel-control .icon-next {
	background: url(/resources/images/carousel/arrow-right.svg) no-repeat;
	background-size: contain;
	width: 38px;
	height: 55px;
}


/* Remove bootstrap indicators properties */
.carousel-control.left,
.carousel-control.right, {
	background: none;
	width: 50px;
	z-index: 30;

	&:hover {
		background: none;
	}
}


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

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


.carousel-caption {
	left: auto;
	right: auto;
	bottom: auto;
	text-shadow:none;
	text-align: left;

	h2 {
		color: #FFF;
		font-size: 40px;
	}

	p {
		color: #FFF;
		font-size: 18px;
	}

	.btn-default {
		font-weight: bold;
		margin-top: 15px;
	}
}

.full-link {
	width: 100%;
	height: 100%;
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 20;
}


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

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



@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%;
	}		

	.carousel-caption h2{font-size: 30px;}

	.carousel-text p{font-size: 12px;}

	#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: 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;
	}

	.carousel-caption h2{font-size: 20px; margin-top: 0px;}
}

@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; }
}