@charset "utf-8";
/* CSS Document */

/* slider layout */
.lof-slidecontent { position:relative;	overflow:hidden;	/*border:#F4F4F4 solid 1px;*/}
.lof-slidecontent .preload{	height:100%;	width:100%;	position:absolute;	top:0;	left:0;	z-index:100000;	text-align:center;	background:#FFF}
.lof-slidecontent .preload div{	height:100%;	width:100%;	background:transparent url(../images/load-indicator.gif) no-repeat scroll 50% 50%;}

.lof-slidecontent  .sliders-wrapper{	position:relative;	height:100%;	width:900px;	z-index:3px;	overflow:hidden; }
.lof-slidecontent  ul.sliders-wrap-inner{height: 300px;overflow:hidden;	background:transparent url(../images/load-indicator.gif) no-repeat scroll 50% 50%;	padding:0px;	margin:0;	position:absolute;	overflow:hidden;}
.lof-slidecontent  ul.sliders-wrap-inner li{height: 300px;overflow:hidden;	padding:0px;margin:0px;	float:left;	position:relative;list-style-type: none;line-height: 0;max-height: 300px;}
.lof-slidecontent  ul.sliders-wrap-inner li img{max-width: none;}
.lof-slidecontent  .lof-opacity  li{position:absolute;	top:0;	left:0;	float:inherit; }



.lof-slidecontent  .navigator-content {position:absolute;
	right:0;
	top:00px;
	z-index:9;
	height:300px;
	width:41.3%;
	overflow:hidden;
	color:#FFF;
}
.lof-slidecontent  .navigator-wrapper{	position:relative;	z-index:10;
	height:180px;
	width:50%;
	overflow:hidden;
	color:#FFF;
	float:left;
}
.lof-slidecontent  ul.navigator-wrap-inner{	top:0;	padding:0;	margin:0;	position:absolute;	width:100%; }
.lof-slidecontent  ul.navigator-wrap-inner li{ cursor:hand; cursor:pointer;	list-style:none; padding:0;	margin-left:1px;	overflow:hidden;	float:left;	display:block;	text-align:left;}

/*******************************************************/

.slider-description{
	position: absolute;
	bottom: 0;
	width: 100%;
	background: rgba(0,0,0,0.35);
	padding: 15px;
	color: #FFF;
}
.slider-description h4{
	color: #FFF;
}
.slider-description h4 a:hover{
	color: #FFF;
	opacity: 0.7;
}
@media only screen and (max-width: 800px){
	.slider-description p{
		display: none;
	}
}

/* item navigator */
.lof-slidecontent ul.navigator-wrap-inner li.active{
	color:#333;
	background: transparent url('../../images/slider.arrow.png') no-repeat center left;
}
.lof-slidecontent ul.navigator-wrap-inner li.active div{
	background: #f6f6f6;
}
.lof-slidecontent ul.navigator-wrap-inner li > div img{
	float: left;
	width: 36px;
	height: auto;
	margin-right: 0;
	margin-top: 5px;
}
.main-slider-content{
	width: 60%;
}




.lof-slidecontent ul.navigator-wrap-inner li >  div{
	color:#333;
	height:100%;
	position:relative;
	text-align:left;
	width: 97%;
	margin-left: 3%;
	border-bottom: 1px solid #f3f3f3;
	padding: 15px 0 15px 30px;
	background: #fafafa;
	display: table;
}
.lof-slidecontent ul.navigator-wrap-inner li > div h3{
	font-size: 14px;
	margin: 0;
	display: table-cell;
	vertical-align: middle;
	text-align: left;
	width: 88%;
}

.lof-slidecontent ul.navigator-wrap-inner li.active div{
	color:#f6f6f6;
}

.lof-slidecontent  .button-next, 
.lof-slidecontent .button-previous{
	display:block;
	color:#FFF;
	cursor:pointer;
	position:absolute;
	z-index:40;

}


.lof-slidecontent .button-control {
   position:absolute;
   top:10px;
   right:48%;
    height: 20px;
    width: 20px;
	cursor:hand; cursor:pointer;
	background:url(../images/transparent_bg.png) repeat;
}

.lof-slidecontent .button-control span { display:block;  width:100%; height:100%;}
.lof-slidecontent .action-start span  {
	background:url(../images/play.png) no-repeat center center;
}
.lof-slidecontent .action-stop span {
	background:url(../images/pause.png) no-repeat center center;
}
.lof-slidecontent .button-previous, .lof-slidecontent .button-next { display: none; }


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

	.lof-slidecontent ul.navigator-wrap-inner li > div h3{
		font-size: 12px;
		margin: 0;
		display: table-cell;
		vertical-align: middle;
		text-align: left;
		width: 81%;
	}
}
@media only screen and (min-width: 240px) and (max-width: 767px){
	.lof-slidecontent .navigator-content{
		display: none;
	}
	.main-slider-content{
		width: 100%;
	}
	.lof-slidecontent .button-previous, .lof-slidecontent .button-next {
		display: block;
		top: 40%;
		height: 50px;
		padding: 0 15px;
		background: rgba(0,0,0,0.7);
		line-height: 50px;
	}
	.lof-slidecontent .button-previous{
		left: 0;
	}
	.lof-slidecontent .button-next{
		right: 0;
	}
}