/*-----------------------------------------------------------------------------------*/
/* Carousel */
/*-----------------------------------------------------------------------------------*/
.carousel-control {
	background: rgba(0,0,0,0.8);
	width: 40px;
	border-radius: 60px;
    font-size: 16px !important;
    height: 40px;
    margin-top: -20px;
    top: 50%; 
    &:focus {opacity: 0.5;}
    &.left, &.icon-prev {
    	left: 20px;
    	span {
    		font-size: 25px;
    		margin-top: -13px;
    		color: #F4F1EA;
    	}
    }
    &.right, &.icon-next {
    	right: 20px;
    	span {
    		font-size: 25px;
    		margin-top: -13px;
    		color: #F4F1EA;
    	}	
    }
}
.carousel-indicators {
    bottom: 0;
    right: 30px;
}
.carousel-control .icon-next, .carousel-control .glyphicon-chevron-right {
    right: auto;
}

.carousel {
	border-radius: 20px;
	overflow: hidden; 
	&.alternative {
		  margin-bottom: 30px;
		  padding: 0 40px 0px 40px;
		  margin-top: 30px;
		  img {
		  	padding:4px;
		  	background: @gray-lighter;
		  	box-shadow: 0 0 1px @gray-light;
		  }
		  .carousel-control.left, .carousel-control.right {
		  	background-image: none;
		  	span {
		  		font-size: 18px;
		  		background: @gray-light;
		  		border-radius: 50%;
		  		padding: 5px;
		  	}
		  }
		.carousel-control.left {
		  left: -12px;
		}
		.carousel-control.right {
		  right: -12px !important;
		}
		/* Changes the position of the indicators */
		.carousel-indicators 
		{
		  right: 50%;
		  top: auto;
		  bottom: -35px;
		  margin-right: -19px;
		}
		/* Changes the colour of the indicators */
		.carousel-indicators li 
		{
		  background: @gray-lighter;
		}
		.carousel-indicators .active 
		{
		  background: @gray-light;
		}
	}
}