/* Light Carousel v1.0.0 | (c) 2015 Taisuke J | This project is released under the MIT license. */



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

/* Settings (tweek it for your use) */

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



.thumbnailsbox .caption {

	background: #003580;

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

	color: #fff;

	

}



.thumbnailsbox .thumbnails li {

	width:100%;

	padding: 0;

	margin-bottom:6px;

	border:solid 4px #ffe300;

	

}

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

.thumbnailsbox .thumbnails li {

		width: 20%;

		padding: 3px;

		

		

	}

}

.thumbnailsbox .thumbnails .selected div:before {

	border-color: #000;

	background: #ddd;

}





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

/* Core CSS */

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



.thumbnailsbox .carousel {

	position: relative;

	overflow: hidden;

	-webkit-transition: 0.3s;

	transition: 0.3s;

	float:left; width:100%;

	height:370px !important;

}

.thumbnailsbox .carousel ul {

	list-style: none;

	margin: 0;

	padding: 0;

}

.thumbnailsbox .carousel li {

	opacity: 0;

	filter: alpha(opacity=0);

	position: absolute;

	left: 0;

	top: 0;

	width: 100%;

	

	max-height:440px;

	-webkit-transition: 0.4s linear;

	transition: 0.4s linear;

	background:none !important; padding:0 !important;

}

.thumbnailsbox .carousel li img { width:100%;}

.thumbnailsbox .carousel li:first-child {

	opacity: 1;

	filter: alpha(opacity=100);

}

.thumbnailsbox .carousel li.current {

	opacity: 1;

	filter: alpha(opacity=100);

}

.thumbnailsbox .thumbnailsbox .carousel img {

	display: block;

	width: 100%;

	height: auto;

	border: none;

	vertical-align: bottom;

}

.thumbnailsbox .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;

}

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

.thumbnailsbox .caption {

		bottom: 0;

		width: 100%;

		padding: 15px 15px;

		font-size: 20px;

	}

}

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

.thumbnailsbox .caption {

		padding: 10px 15px;

		font-size: 16px;

	}

}

.thumbnailsbox .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;

}

.thumbnailsbox .current .thumbnailsbox .caption,

.thumbnailsbox .current .thumbnailsbox .caption span {

	opacity: 1;

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

	transform: translate3d(0, 0, 0);

}



.thumbnailsbox .mobile .thumbnailsbox .controls {

	display: none;

}

.thumbnailsbox .carousel:hover .prev,

.thumbnailsbox .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);

}

.thumbnailsbox .prev {

	opacity: 0;

	filter: alpha(opacity=0);

	position: absolute;

	left: 10px;

	top: 50%;

	line-height: 1;

	margin-top: -16px;

	font-size: 30px;

	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;

}

.thumbnailsbox .prev:before {

	display: block;

	color: #fff;

	font-family: 'fontello';

	content: '\efa5';

}

.thumbnailsbox .next {

	opacity: 0;

	filter: alpha(opacity=0);

	position: absolute;

	right: 10px;

	top: 50%;

	line-height: 1;

	margin-top: -16px;

	font-size: 30px;

	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;

}

.thumbnailsbox .next:before {

	display: block;

	color: #fff;

	font-family: 'fontello';

	content:  '\efa6';

}



.thumbnailsbox .thumbnails {

	-webkit-box-sizing: border-box;

	-moz-box-sizing: border-box;

	box-sizing: border-box;

	background:#eee;

	clear:both; position:absolute; top:-999px

}

.thumbnailsbox .thumbnails ul {

	overflow: hidden;

	list-style: none;

	margin: 0;

	padding: 0;

}

.thumbnailsbox .thumbnails li {

	float: left;

	background:none !important;

	width:20%;

}

.thumbnailsbox .thumbnails div {

	position: relative;

	background: #fff;

}

.thumbnailsbox .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;

}

.thumbnailsbox .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;

}

.thumbnailsbox .thumbnails img:hover {

	opacity: 0.7;

	filter: alpha(opacity=70);

}

.thumbnailsbox .thumbnails .selected img {

	cursor: default;

}

.thumbnailsbox .thumbnails .selected img:hover {

	opacity: 1;

	filter: alpha(opacity=100);

}