.caption {

	background: #003580;

	background: rgba(0, 0, 0, 0.6);

	color: #fff;

	font-family: 'Raleway', sans-serif;

}



.thumbnails li {

	width: 7%;

	padding: 3px;

}

@media screen and (max-width: 767px) {

	.thumbnails li {

		width: 20%;

		padding: 3px;

	}

}

.thumbnails .selected div:before {

	border-color: #e22e33;

	background: #e22e33;

}





/*-------------------------------------------------------------------------------------------*/

/* Core CSS */

/*-------------------------------------------------------------------------------------------*/

@font-face {

	font-family: 'Font Awesome';

	src: url('fonts/fontawesome/fontawesome-webfont.eot');

	src: url('fonts/fontawesome/fontawesome-webfont.eot?#iefix') format('embedded-opentype'),

		url('fonts/fontawesome/fontawesome-webfont.woff') format('woff'),

		url('fonts/fontawesome/fontawesome-webfont.ttf') format('truetype'),

		url('fonts/fontawesome/fontawesome-webfont.svg#svgFontName') format('svg');

}



.carousel {

	position: relative;

	overflow: hidden;

	-webkit-transition: 0.3s;

	transition: 0.3s;

	margin: 0% 10%;

}

.carousel ul {

	list-style: none;

	margin: 0;

	padding: 0;

}

.carousel li {

	opacity: 0;

	filter: alpha(opacity=0);

	position: absolute;

	left: 0;

	top: 0;

	width: 100%;

	-webkit-transition: 0.4s linear;

	transition: 0.4s linear;

}

.carousel li:first-child {

	opacity: 1;

	filter: alpha(opacity=100);

}

.carousel li.current {

	opacity: 1;

	filter: alpha(opacity=100);

}

.carousel img {

	display: block;

	width: 100%;

	/*height: auto;*/

	/*	height: 600px;*/

	border: none;

	vertical-align: bottom;

}

.caption {

	opacity: 0;

	-webkit-transform: translate3d(30px, 0, 0);

	transform: translate3d(30px, 0, 0);

	position: absolute;

	right: 0;

	bottom: 10px;

	width: 50%;

	padding: 20px 30px;

	font-size: 30px;

	-webkit-transition: 0.6s 0.8s;

	transition: 0.6s 0.8s;

	display: none;

}

@media screen and (max-width: 767px) {

	.caption {

		bottom: 0;

		width: 100%;

		padding: 15px 15px;

		font-size: 20px;

	}

}

@media screen and (max-width: 400px) {

	.caption {

		padding: 10px 15px;

		font-size: 16px;

	}

}

.caption span {

	display: block;

	opacity: 0;

	-webkit-transform: translate3d(0, -5px, 0);

	transform: translate3d(0, -5px, 0);

	-webkit-transition: 0.6s 1.2s;

	transition: 0.6s 1.2s;

}

.current .caption,

.current .caption span {

	opacity: 1;

	-webkit-transform: translate3d(0, 0, 0);

	transform: translate3d(0, 0, 0);

}



.mobile .controls {

	display: none;

}

.carousel:hover .prev,

.carousel:hover .next {

	opacity: 0.8;

	filter: alpha(opacity=80);

	-webkit-transform: translate3d(0, 0, 0);

	transform: translate3d(0, 0, 0);

}

.carousel:hover .prev:hover,

.carousel:hover .next:hover {

	opacity: 0.5;

	filter: alpha(opacity=50);

}

.prev {

	opacity: 0;

	filter: alpha(opacity=0);

	position: absolute;

	left: 10px;

	top: 50%;

	line-height: 1;

	margin-top: -35px;

	font-size: 70px;

	text-shadow: 0 0 4px rgba(0, 0, 0, 0.3);

	cursor: pointer;

	-webkit-transform: translate3d(-10px, 0, 0);

	transform: translate3d(-10px, 0, 0);

	-webkit-transition: 0.3s;

	transition: 0.3s;

}

.prev:before {

	display: block;

	color: #ed3237;

	font-family: Font Awesome, sans-serif;

	content: "\f104";

}

.next {

	opacity: 0;

	filter: alpha(opacity=0);

	position: absolute;

	right: 10px;

	top: 50%;

	line-height: 1;

	margin-top: -35px;

	font-size: 70px;

	text-shadow: 0 0 4px rgba(0, 0, 0, 0.3);

	cursor: pointer;

	-webkit-transform: translate3d(10px, 0, 0);

	transform: translate3d(10px, 0, 0);

	-webkit-transition: 0.3s;

	transition: 0.3s;

}

.next:before {

	display: block;

	color: #ed3237;

	font-family: Font Awesome, sans-serif;

	content: "\f105";

}



.thumbnails {

	-webkit-box-sizing: border-box;

	-moz-box-sizing: border-box;

	box-sizing: border-box;

}

.thumbnails ul {

	overflow: hidden;

	list-style: none;

	margin: 0;

	padding: 3px;

}

.thumbnails li {

	float: left;

}

.thumbnails div {

	position: relative;

	background: #fff;

}

.thumbnails .selected div:before {

	display: block;

	position: absolute;

	left: -6px;

	top: -6px;

	width: 100%;

	height: 100%;

	border-width: 6px;

	border-style: solid;

	content: "";

	-webkit-box-sizing: content-box;

	-moz-box-sizing: content-box;

	box-sizing: content-box;

}

.thumbnails img {

	display: block;

	position: relative;

	z-index: 10;

	width: 100%;

	height: auto;

	border: none;

	vertical-align: bottom;

	cursor: pointer;

	-webkit-transform: translateZ(0);
	/* bug fix for chrome */

	-webkit-transition: 0.4s;

	transition: 0.4s;

}

.thumbnails img:hover {

	opacity: 0.7;

	filter: alpha(opacity=70);

}

.thumbnails .selected img {

	cursor: default;

}

.thumbnails .selected img:hover {

	opacity: 1;

	filter: alpha(opacity=100);

}