@import "variables.less";  

/* CSS Slider Local Variables */
@percent: round(100 / @cssliderSimpleItems);
@sliderWidth: 100%;
@sliderHeight: 100%;

.direction(btt, @count: 1) when (@count = 0) {
	margin-top: 0%;
}
.direction(btt, @count: 1) when (@count < @cssliderSimpleItems - 1) and (@count > 0) {
	margin-top: -@cssliderSimpleHeight * @count;
}
.direction(btt, @count: 1) when (@count > @cssliderSimpleItems - 2) {
	margin-top: -@cssliderSimpleHeight * (@cssliderSimpleItems - 1);
}
.direction(ttb, @count: 1) when (@count = 0) {
	margin-top: 0%;
}
.direction(ttb, @count: 1) when (@count < @cssliderSimpleItems - 1) and (@count > 0) {
	margin-top: @cssliderSimpleHeight * @count;
}
.direction(ttb, @count: 1) when (@count > @cssliderSimpleItems - 2) {
	margin-top: @cssliderSimpleHeight * (@cssliderSimpleItems - 1);
}
.direction(rtl, @count: 1) when (@count = 0) {
	margin-left: @sliderWidth * (@cssliderSimpleItems - 1);
}
.direction(rtl, @count: 1) when (@count < @cssliderSimpleItems - 1) and (@count > 0) {
	@totalWidth: @sliderWidth * (@cssliderSimpleItems - 1);
	@elemWidth: @sliderWidth * @count;
	margin-left: @totalWidth - @elemWidth;
}
.direction(rtl, @count: 1) when (@count > @cssliderSimpleItems - 2) {
	margin-left: 0%;
}
.direction(ltr, @count: 1) when (@count = 0) {
	margin-left: 0%;
}
.direction(ltr, @count: 1) when (@count < @cssliderSimpleItems - 1) and (@count > 0) {
	margin-left: @sliderWidth * @count;
}
.direction(ltr, @count: 1) when (@count > @cssliderSimpleItems - 2) {
	margin-left: @sliderWidth * (@cssliderSimpleItems - 1);
}

/* CSS Slider */
#slider-1,
.csslider-simple {
	width:@cssliderSimpleWidth;
	height:@cssliderSimpleHeight;
	position:relative;
	overflow:hidden;
}
@keyframes load{
	from{left:-100%;}
	to{left:0;}
}
.slides{
	position:relative;
}
.slidesdimensions(@cssliderSimpleAnimation) when (@cssliderSimpleAnimation = ltr) {
	width:@cssliderSimpleWidth * @cssliderSimpleItems;
	height:100%;
	right:@cssliderSimpleWidth * (@cssliderSimpleItems - 1); 
}
.slidesdimensions(@cssliderSimpleAnimation) when (@cssliderSimpleAnimation = rtl) {
	width:@cssliderSimpleWidth * @cssliderSimpleItems;
	height:100%;
	right:@cssliderSimpleWidth * (@cssliderSimpleItems - 1); 
}
.slidesdimensions(@cssliderSimpleAnimation) when (@cssliderSimpleAnimation = btt) {
	width:100%;
	height:@cssliderSimpleHeight * (@cssliderSimpleItems - 1);
}
.slidesdimensions(@cssliderSimpleAnimation) when (@cssliderSimpleAnimation = ttb) {
	width:100%;
	height:@cssliderSimpleHeight * (@cssliderSimpleItems - 1);
	top:-@cssliderSimpleHeight * (@cssliderSimpleItems - 1);
}
.slides{
	.slidesdimensions(@cssliderSimpleAnimation)
}
.csslider-simple .slides,
.csslider-simple .switch .on,
.csslider-simple .slide-content {
	-webkit-animation-timing-function: ease;
	-webkit-animation-iteration-count: infinite;
	-moz-animation-timing-function: ease;
	-moz-animation-iteration-count: infinite;
	animation-timing-function: ease;
	animation-iteration-count: infinite;
}
.csslider-simple .slides {
	-webkit-animation-duration:@cssliderSimpleTimeout * @cssliderSimpleItems + s;
	-webkit-animation-name: slide-simpl;
	-moz-animation-duration:@cssliderSimpleTimeout * @cssliderSimpleItems + s;
	-moz-animation-name: slide-simpl;
	animation-duration:@cssliderSimpleTimeout * @cssliderSimpleItems + s;
	animation-name: slide-simpl;
}
.slides.ltr{
	-webkit-animation:slide-simpl 30s infinite;
	-moz-animation:slide-simpl 30s infinite;
	animation:slide-simpl 30s infinite;
}
.slider{
	position:relative;
	z-index:1;
	overflow:hidden;
}
.sliderfloat(@cssliderSimpleAnimation) when (@cssliderSimpleAnimation = ltr) {
	width:@cssliderSimpleWidth / @cssliderSimpleItems;
	height:100%;
	float: left;
}
.sliderfloat(@cssliderSimpleAnimation) when (@cssliderSimpleAnimation = rtl) {
	width:@cssliderSimpleWidth / @cssliderSimpleItems;
	height:100%;
	float: left;
}
.sliderfloat(@cssliderSimpleAnimation) when (@cssliderSimpleAnimation = btt) {
	width:100%;
	height:@cssliderSimpleWidth / (@cssliderSimpleItems - 1);
}
.sliderfloat(@cssliderSimpleAnimation) when (@cssliderSimpleAnimation = ttb) {
	width:100%;
	height:@cssliderSimpleWidth / (@cssliderSimpleItems - 1);
}
.slider{
	.sliderfloat(@cssliderSimpleAnimation)
}

.slider .images,
.slider .images img {
	width:100%;
	height:100%;
}

/* Contents */
.content{
	width:100%;
	height:100%;
	position:absolute;
	overflow:hidden;
}
.image {
    width: 100%;
    height: 100%;
}
.slide-content{
	width:auto;
	height:auto;
	position:relative;
	top:50%;
	padding-right: 30px;
	background: @cssliderSimpleTxtBgr;
}
.slide-content.left {
	float:left;
}
.csslider-simple .slide-content.left {
	-webkit-animation-duration:@cssliderSimpleTimeout + s;
	-webkit-animation-name: content-left;
	-moz-animation-duration:@cssliderSimpleTimeout + s;
	-moz-animation-name: content-left;
	animation-duration:@cssliderSimpleTimeout + s;
	animation-name: content-left;
}
.csslider-simple .slide-content.right {
	float:right;
	-webkit-animation-duration:@cssliderSimpleTimeout + s;
	-webkit-animation-name: content-right;
	-moz-animation-duration:@cssliderSimpleTimeout + s;
	-moz-animation-name: content-right;
	animation-duration:@cssliderSimpleTimeout + s;
	animation-name: content-right;
}
.slide-content h1{
	font-family:Intro;
	font-size:24px;
	color:@cssliderSimpleTxtColor;
	text-align:left;
	margin-left:30px;
	padding-bottom:10px;
}
.slide-content h2{
	font-family:Quicksand;
	font-weight:normal;
	font-size:14px;
	font-style:italic;
	color:@cssliderSimpleTxtColor;
	text-align:left;
	margin-left:30px;
}

/* Switch */
.switch {
	width:200px;
	height:12px;
	position:absolute;
	bottom:50px;
	z-index:99;
	left:30px;
}
.csslider-simple.navi-on-hover .switch {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	filter: alpha(opacity=0);
	opacity: 0;
}
.switch.centered {
	margin: 0 auto;
	left: 0;
	right: 0;
}
.switch > ul{
	list-style:none;
	margin: auto;
}
.switch > ul > li{
	width:12px;
	height:12px;
	border: 1px solid @cssliderSimpleTxtColor;
	border-radius:50%;
	background:@cssliderSimpleControlBgr;
	float:left;
	margin-right:6px;
	cursor:pointer;
}
.switch ul{
	overflow:hidden;
}
.switch .on {
	width:100%;
	height:100%;
	border-radius:50%;
	background:@cssliderSimpleActiveControlBgr;
	position:relative;
}

.csslider-simple .switch .on {
	-webkit-animation-duration:@cssliderSimpleTimeout * @cssliderSimpleItems + s;
	-webkit-animation-name: on;
	-moz-animation-duration:@cssliderSimpleTimeout * @cssliderSimpleItems + s;
	-moz-animation-name: on;
	animation-duration:@cssliderSimpleTimeout * @cssliderSimpleItems + s;
	animation-name: on;
}

.csslider-simple.navi-on-hover:hover .switch {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	filter: alpha(opacity=100);
	opacity: 1;
}

.csslider-simple.pause-on-hover:hover .slides,
.csslider-simple.pause-on-hover:hover .slide-content,
.csslider-simple.pause-on-hover:hover .switch .on {
    -webkit-animation-play-state: paused;
	-moz-animation-play-state: paused;
    animation-play-state: paused;
}

@-webkit-keyframes content-left{
	0%{left:-420px;}
	10%{left:20px;}
	15%{left:0px;}
	30%{left:0px;}
	40%{left:0px;}
	50%{left:0px;}
	60%{left:0px;}
	70%{left:0;}
	80%{left:-420px;}
	90%{left:-420px;}
	100%{left:-420px;}
}
@-moz-keyframes content-left{
	0%{left:-420px;}
	10%{left:20px;}
	15%{left:0px;}
	30%{left:0px;}
	40%{left:0px;}
	50%{left:0px;}
	60%{left:0px;}
	70%{left:0;}
	80%{left:-420px;}
	90%{left:-420px;}
	100%{left:-420px;}
}
@keyframes content-left{
	0%{left:-420px;}
	10%{left:20px;}
	15%{left:0px;}
	30%{left:0px;}
	40%{left:0px;}
	50%{left:0px;}
	60%{left:0px;}
	70%{left:0;}
	80%{left:-420px;}
	90%{left:-420px;}
	100%{left:-420px;}
}
@-webkit-keyframes content-right{
	0%{right:-400%;}
	10%{right:20px;}
	15%{right:0px;}
	30%{right:0px;}
	40%{right:0px;}
	50%{right:0px;}
	60%{right:0px;}
	70%{right:0px;}
	80%{right:0px;}
	90%{right:-400%;}
	100%{right:-400%;}
}
@-moz-keyframes content-right{
	0%{right:-400%;}
	10%{right:20px;}
	15%{right:0px;}
	30%{right:0px;}
	40%{right:0px;}
	50%{right:0px;}
	60%{right:0px;}
	70%{right:0px;}
	80%{right:0px;}
	90%{right:-400%;}
	100%{right:-400%;}
}
@keyframes content-right{
	0%{right:-400%;}
	10%{right:20px;}
	15%{right:0px;}
	30%{right:0px;}
	40%{right:0px;}
	50%{right:0px;}
	60%{right:0px;}
	70%{right:0px;}
	80%{right:0px;}
	90%{right:-400%;}
	100%{right:-400%;}
}

.loopingClassNav (@index) when (@index > 1) {
	@percent: round(100 / @cssliderSimpleItems);
	@percentage: @percent * (@cssliderSimpleItems - @index + 1);
	@speed: @percentage - @cssliderSimpleSpeed;
	@number: @cssliderSimpleItems - @index + 1;
	@{speed}% {
		margin-left: 0px + (@number - 1) * 18;
	}
	@{percentage}% {
		margin-left: 0px + @number * 18;
	}
	.loopingClassNav(@index - 1);
}
.loopingClassNav (0) {}

@-webkit-keyframes on {
	@percentage: round(100 / @cssliderSimpleItems);
	@speed: @percentage - @cssliderSimpleSpeed;
	0%,
	100%,
	@{speed}% {
		margin-left: 0px;
	}
	@{percentage}% {
		margin-left: 18px;
	}
	.loopingClassNav (@cssliderSimpleItems - 1);
	96% {
		margin-left: 0px + (@cssliderSimpleItems - 1) * 18;
	}
}
@-moz-keyframes on {
	@percentage: round(100 / @cssliderSimpleItems);
	@speed: @percentage - @cssliderSimpleSpeed;
	0%,
	100%,
	@{speed}% {
		margin-left: 0px;
	}
	@{percentage}% {
		margin-left: 18px;
	}
	.loopingClassNav (@cssliderSimpleItems - 1);
	96% {
		margin-left: 0px + (@cssliderSimpleItems - 1) * 18;
	}
}
@keyframes on {
	@percentage: round(100 / @cssliderSimpleItems);
	@speed: @percentage - @cssliderSimpleSpeed;
	0%,
	100%,
	@{speed}% {
		margin-left: 0px;
	}
	@{percentage}% {
		margin-left: 18px;
	}
	.loopingClassNav (@cssliderSimpleItems - 1);
	96% {
		margin-left: 0px + (@cssliderSimpleItems - 1) * 18;
	}
}

.loopingClassAnime (@index) when (@index > 1) {
	@percent: round(100 / @cssliderSimpleItems);
	@percentage: @percent * (@cssliderSimpleItems - @index + 1);
	@speed: @percentage - @cssliderSimpleSpeed;
	@number: @cssliderSimpleItems - @index + 1;
	@{speed}% {
		.direction(@cssliderSimpleAnimation, @number - 1)
	}
	@{percentage}% {
		.direction(@cssliderSimpleAnimation, @number)
	}
	.loopingClassAnime(@index - 1);
}
.loopingClassAnime (0) {}
	
/* Animation */
@-webkit-keyframes slide-simpl {
	@percentage: round(100 / @cssliderSimpleItems);
	@speed: @percentage - @cssliderSimpleSpeed;
	0%,
	100%,
	@{speed}% {
		.direction(@cssliderSimpleAnimation, 0)
	}
	@{percentage}% {
		.direction(@cssliderSimpleAnimation, 1)
	}
	.loopingClassAnime (@cssliderSimpleItems - 1);
	96% {
		.direction(@cssliderSimpleAnimation, @cssliderSimpleItems)
	}
}
@-moz-keyframes slide-simpl {
	@percentage: round(100 / @cssliderSimpleItems);
	@speed: @percentage - @cssliderSimpleSpeed;
	0%,
	100%,
	@{speed}% {
		.direction(@cssliderSimpleAnimation, 0)
	}
	@{percentage}% {
		.direction(@cssliderSimpleAnimation, 1)
	}
	.loopingClassAnime (@cssliderSimpleItems - 1);
	96% {
		.direction(@cssliderSimpleAnimation, @cssliderSimpleItems)
	}
}
@keyframes slide-simpl {
	@percentage: round(100 / @cssliderSimpleItems);
	@speed: @percentage - @cssliderSimpleSpeed;
	0%,
	100%,
	@{speed}% {
		.direction(@cssliderSimpleAnimation, 0)
	}
	@{percentage}% {
		.direction(@cssliderSimpleAnimation, 1)
	}
	.loopingClassAnime (@cssliderSimpleItems - 1);
	96% {
		.direction(@cssliderSimpleAnimation, @cssliderSimpleItems)
	}
}	