/* Set some rational max heights so small screens don't see giantic images */
.carousel-inner {
	height: 250px;
	max-height: 250px !important;
}

@media (min-width: 992px) {
	.carousel-inner {
		height: 450px;
		max-height: 450px !important;
	}
}
@media (min-width: 768px) {
	.carousel-inner {
		height: 400px;
		max-height: 400px !important;
	}
}
.carousel-inner>.item>img, .carousel-inner>.item>a>img {
	max-height: 100%;
	margin: 0 auto;
}

.carousel-inner>.item {
	height: 100%;
}

.carousel .carousel-control {
	opacity: 1;
}

.carousel .carousel-control .icon-prev {
	left: -12px !important;
}

.carousel .carousel-control .icon-next {
	right: -17px !important;
	left: inherit;
	margin-right: -15px;
}

.carousel-control span.icon-prev:before {
	content: "\f100";
	padding-right: 2px;
}
.carousel-control span.icon-next:before {
	content: "\f101";
	padding-left: 2px;
}


.carousel-control span.icon-prev:before, .carousel-control span.icon-next:before{
	background: #58ceba;
	width:  25px;
	height: 25px;
	line-height: 25px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	border: 1px solid #04b598;
	cursor:pointer;
	display: block;
	font-size: 20px;
}

.carousel-indicators li {
	border-color: #666 !important;
}

.carousel-indicators li.active {
	background-color: #CCC !important;
}