/*!
 * Start Bootstrap - Full Slider HTML Template (http://startbootstrap.com)
 * Code licensed under the Apache License v2.0.
 * For details, see http://www.apache.org/licenses/LICENSE-2.0.
 */

html, body { height: 100%; }

.carousel, .item, .active { height: 650px; background-color: #000; overflow:hidden }
.carousel{ box-shadow: 0 10px 10px #CCC }
.carousel-inner { height: 100%; }
.carousel-caption A{ text-decoration:none !important; }
.carousel-caption{ padding:15px 30px; text-shadow:none; right:40.3%; left:19.3%; top:20%; bottom:20%; border-radius: 0; text-align: left }
.slogan{ font-size: 2.8em; font-weight:700 !important; color:#FFF; padding-bottom: 20px; line-height:1.3em }
.slogan span{ color: #00b8de; display: table }
.text-caption{ font-size:1.1em; color:#FFF; line-height:1.5em; letter-spacing:1px; font-weight:300; padding: 0 5px }
.text-caption a:link, .text-caption a:visited{ color:#000 !important; font-weight:bold }
.text-caption a:active, .text-caption a:hover{ color:#000 !important }

/* Background images are set within the HTML using inline CSS, not here */
.fill { width: 100%; height: 100%; background-position: center; -webkit-background-size: cover; -moz-background-size: cover; background-size: cover; -o-background-size: cover; opacity: 0.6 }
.carousel-caption A:hover, .carousel-caption active { text-decoration:underline }
.carousel-indicators .active { width:20px; height:20px; background-color: rgba(181, 30, 35, 0.80); border-radius:10px }
.carousel-indicators li{ width:15px; height:15px; background-color:rgba(255,255,255, 0.5); border-radius:7.5px; margin-bottom:-0.5px; border: 0px  }
.carousel-indicators{ bottom: 10px }
.carousel-control{ opacity:1.0 !important; top:20%; z-index:1000 !important }
.left{ left: -15px  }
.carousel-control.left, .carousel-control.right{ background-image: none }
.icon-prev, .icon-next{ font-size:7.5em !important; font-weight:bold !important; color:#FFF; transition: all 300ms ease-out; height:80px !important; width:80px !important; margin:0 !important; top: 30% !important; line-height:20px; text-shadow:none; background-color: transparent; border: 1px solid transparent }
.icon-prev{ left:30% !important; right:auto; padding-right:20px; z-index:1000 }
.icon-next{ right:30% !important; left:auto; padding-right:7px }
.icon-prev:hover, .icon-next:hover{ background-color: rgba(24,26,31,0.0); color: #d71e23; opacity: 1.0;  border: 1px solid transparent }
.carousel-control .icon-prev:before, .carousel-control .icon-next:before{  font-family: FontAwesome; font-size:0.3em; font-weight:100 !important; text-align:center; margin-left:10px }
.carousel-control .icon-prev:before{ content: '\f053' !important }
.carousel-control .icon-next:before{ content: '\f054' !important }


@media only screen and (max-width: 560px) {
	.carousel, .item, .active { height: 270px }
	.text-caption{ font-size: 1.0em !important }
	.slogan{ margin-top:0px !important; text-align:center; text-shadow:0px 3px 3px rgba(0,0,0,0.30); margin-bottom:0px }
	.carousel-caption{ top:5% !important }
}
@media screen and (min-width: 561px) and (max-width:768px) {
	.icon-prev{ left:10% !important }
	.icon-next{ right:20% !important }
	.carousel-caption{ top:10% !important }
	.carousel, .item, .active { height: 330px }	
}
@media (max-width: 767px) {
	.slogan{ margin-top:20px; width:100% }
    .carousel-indicators { padding-bottom:0px !important; bottom:0px !important }
	.carousel-caption{ right:5%; left:5%; top:25%; bottom:0%; text-align:center }
	.icon-prev, .icon-next{ display: none !important }
}
@media screen and (min-width: 768px) and (max-width:991px) {
	.carousel, .item, .active {	height: 400px; }
	.carousel-caption{ top:50% }	
}
@media (max-width: 992px) {
	.text-caption{ font-size:1.2em; font-size:bold }
	.icon-prev, .icon-next{ height:45px !important; width:45px !important; boder-radius:22.5px !important; line-height:10px !important; font-size:4.0em !important;  }
	.icon-prev{ padding-left:12px }
	.icon-next{ padding-right:15px }
	.carousel-control .icon-prev:before{ margin-left:0px }
	.carousel-control .icon-next:before{ margin-left:15px }
	.slogan{ font-size:1.6em !important }
}
@media screen and (min-width: 768px) and (max-width:1199px) {
	.carousel-caption{ right:20%; left:20%; top:20%; bottom:10%; text-align:center; border-top-left-radius: 7px; border-top-right-radius: 7px;  border-bottom-left-radius: 0px; border-bottom-right-radius: 0px }
	.icon-prev, .icon-next{ display: none !important }
	.text-caption{ font-size:1.1em }
}

@media screen and (min-width: 992px) and (max-width:1199px) {
	.carousel, .item, .active { height: 400px; }
	.carousel-caption{ top:15% !important }
}

@media only screen and (min-width: 992px){
.carousel-indicators{ text-align: center }
}