/*==========Carousel==========*/
.carousel-control {position: absolute; top: 42%; left: 0; width: 40px; height: 60px; margin-top: -20px; font-size: 60px; font-weight: normal; line-height: 30px; color: #ffffff; text-align: center; background: transparent; border: none; border-radius: 0; opacity: 0.7;}
.carousel-control.left{background-image: none;}
.carousel-control.right{background-image: none;}

@media screen and (max-width: 400px) {
	.carousel-control{position: absolute; top: 36%; font-size: 35px;}
}
@media (min-width: 401px) and (max-width: 767px) {
	.carousel-control{position: absolute; top: 40%; font-size: 45px;}
}

/*==========Carousel - General==========*/
.generalCarousel .carousel-control {width: 50px; height: 50px; margin-top: 0;}
.generalCarousel .carousel-control.left i{padding-left: 30px;}
.generalCarousel .carousel-control.right i{margin-left: -30px;}


/*==========Masthead (The banner area)==========*/
.fullwidthCarousel {position: relative; padding: 0; text-align: center;}
.fullwidthCarousel img{width: 100%; max-width: 100%; height: auto; width: 100%\9; /* ie8 */ z-index:1; padding: 0; margin: 0;}
.fullwidthCarousel .carousel-control{width: 80px; height: 80px; margin-top: 0;}
.fullwidthCarousel .carousel-control span{color: #FFF; font-size: 80px;}


/*==========Milestone carousel==========*/
.milestoneCarousel{position: relative; top: 35px; margin-bottom: 45px;}
.milestoneCarousel .carousel-indicators{text-align: left; margin-left: 0; left: 28px; top: -28px; z-index: 1;}
.milestoneCarousel .carousel-indicators > li{width: 12px; height: 12px; border: none; border-radius: 0; text-indent: 0; margin: 1px 8px 1px 1px; color: #CDC1C1;}
.milestoneCarousel .carousel-indicators > li.active{background-color: transparent; margin: 1px 8px 1px 1px; color: #666;}
.milestoneCarousel .carousel-indicators > li:before{
	font-family: 'FontAwesome';
	font-size: 10px;
	content: "\f111";
}

.milestoneCarousel .carousel-control.right {
  width: 100%;
  height: 100%;
  top: 20px;
  z-index: 20;
  left: 0;
  background-image: none;
  background-repeat: no-repeat;
  filter: none;
}

.milestoneCarousel .zoomIn{position: absolute; top: -24px; left: 0; font-size: 14px;}
.milestoneCarousel .zoomIn a{color: #000; text-decoration: none;}
.milestoneCarousel .zoomIn a:hover{color: #EC404E; text-decoration: none;}

/*.milestoneCarousel .carousel-inner > .item{width: 95%; height: 300px;}*/

/*==========Feature & Facilities carousel==========*/
#carouselFeatures{padding: 50px 0 0 0; margin-bottom: 30px; background-color: #FFF;}
#carouselFeatures .carousel-indicators.red{bottom: -40px;}


/*==========Carousel indicators (red)==========*/
.carousel-indicators.red{text-align: center; z-index: 2; width: 100%; margin: 0 auto; left: 0;}
.carousel-indicators.red > li{display: inline-block; width: 12px; height: 12px; border: none; border-radius: 0; text-indent: 0; margin: 1px 12px 1px 1px; color: #CCC;}
.carousel-indicators.red > li.active{color: #E63A38; background-color: transparent;}
.carousel-indicators.red > li:before{
	font-family: 'FontAwesome';
	font-size: 10px;
	content: "\f111";
}

/*==========Carousel caption (redTopCaption)==========*/
.carousel-caption.redTopCaption{text-shadow: none; color: #E63A38; top: -20px; font-size: 22px;}
@media screen and (max-width: 480px) {
	.carousel-caption.redTopCaption{top: -22px; font-size: 12px;}
}

/*==========Carousel caption (fullwidth)==========*/
.carousel-control.right.fullwidth {
  width: 100%;
  height: 100%;
  top: 20px;
  z-index: 19;
  left: 0;
  background-image: none;
  background-repeat: no-repeat;
  filter: none;
}

/*==========Fade effect==========*/
.carousel-fade .carousel-inner .item {
  opacity: 0;
  transition-property: opacity;
}
.carousel-fade .carousel-inner .active {
  opacity: 1;
}
.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
  left: 0;
  opacity: 0;
  z-index: 1;
}
.carousel-fade .carousel-inner .next.left,
.carousel-fade .carousel-inner .prev.right {
  opacity: 1;
}

/*=======Home Carousel=======*/
#homeHighlightCarousel .photoButton.large:hover {
	cursor: pointer;
}
.home-slideshow .carousel-control.left,
.home-slideshow .carousel-control.right{
	z-index: 3;
	top: 260px;
}
.home-slideshow .carousel-indicators{
	bottom: 30px;
}
.home-slideshow .carousel-indicators li{
	border: none;
	background-color: #FFF;
	opacity: 0.5;
	margin: 1px 4px;
	box-shadow:0px 0px 3px #333;
}
.home-slideshow .carousel-indicators li.active{
	width: 10px;
	height: 10px;
	border: none;
	opacity: 1;
}