/* Reset */
*{margin:0;padding:0;}

/* Slider */
#slider{
	width:100%;
	height:500px;
	position:relative;
	overflow:hidden;
}
@keyframes load{
	from{left:-100%;}
	to{left:0;}
}
.slides{
	width:400%;
	height:100%;
	position:relative;
	-webkit-animation:slide 30s infinite;
	-moz-animation:slide 30s infinite;
	animation:slide 30s infinite;
}
.slider{
	width:25%;
	height:100%;
	float:left;
	position:relative;
	z-index:1;
	overflow:hidden;
}
.slide img{
	width:100%;
	height:100%;
}
.slide img{
	width:100%;
	height:100%;
}
.image{
	width:100%;
	height:100%;
}
.image img{
	width:100%;
	height:100%;
}

/* Legend */
.legend{
	border:500px solid transparent;
	border-left:500px solid rgba(0, 0, 0, .7);
	border-bottom:0;
	position:absolute;
	bottom:0;
}

/* Contents */
.content{
	width:100%;
	height:100%;
	position:absolute;
	overflow:hidden;
}
.content-txt{
	width:400px;
	height:150px;
	float:left;
	position:relative;
	top:300px;
	-webkit-animation:content-s 7.5s infinite;
	-moz-animation:content-s 7.5s infinite;
	animation:content-s 7.5s infinite;
}
.content-txt h2{
	font-family:Oswald,Intro;
	font-size:24px;
	color:#fff;
	text-align:left;
	margin-left:30px;
	padding-bottom:10px;
}
.content-txt h3{
	font-family:Oswald,Quicksand;
	font-weight:normal;
	font-size:14px;
	font-style:italic;
	color:#fff;
	text-align:left;
	margin-left:30px;
}

/* Switch */
.switch{
	width:120px;
	height:10px;
	position:absolute;
	bottom:50px;
	z-index:99;
	left:30px;
}
.switch > ul{
	list-style:none;
}
.switch > ul > li{
	width:10px;
	height:10px;
	border-radius:50%;
	background:#333;
	float:left;
	margin-right:5px;
	cursor:pointer;
}
.switch ul{
	overflow:hidden;
}
.on{
	width:100%;
	height:100%;
	border-radius:50%;
	background:#f39c12;
	position:relative;
	-webkit-animation:on 30s infinite;
	-moz-animation:on 30s infinite;
	animation:on 30s infinite;
}

/* Animation */
@-webkit-keyframes slide{
	0%,100%{
		margin-left:0%;
	}
	21%{
		margin-left:0%;
	}
	25%{
		margin-left:-100%;
	}
	46%{
		margin-left:-100%;
	}
	50%{
		margin-left:-200%;
	}
	71%{
		margin-left:-200%;
	}
	75%{
		margin-left:-300%;
	}
	96%{
		margin-left:-300%;
	}
}
@-moz-keyframes slide{
	0%,100%{
		margin-left:0%;
	}
	21%{
		margin-left:0%;
	}
	25%{
		margin-left:-100%;
	}
	46%{
		margin-left:-100%;
	}
	50%{
		margin-left:-200%;
	}
	71%{
		margin-left:-200%;
	}
	75%{
		margin-left:-300%;
	}
	96%{
		margin-left:-300%;
	}
}
@keyframes slide{
	0%,100%{
		margin-left:0%;
	}
	21%{
		margin-left:0%;
	}
	25%{
		margin-left:-100%;
	}
	46%{
		margin-left:-100%;
	}
	50%{
		margin-left:-200%;
	}
	71%{
		margin-left:-200%;
	}
	75%{
		margin-left:-300%;
	}
	96%{
		margin-left:-300%;
	}
}

@-webkit-keyframes content-s{
	0%{left:-420px;}
	10%{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-s{
	0%{left:-420px;}
	10%{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-s{
	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 on{
	0%,100%{
		margin-left:0%;
	}
	21%{
		margin-left:0%;
	}
	25%{
		margin-left:15px;
	}
	46%{
		margin-left:15px;
	}
	50%{
		margin-left:30px;
	}
	71%{
		margin-left:30px;
	}
	75%{
		margin-left:45px;
	}
	96%{
		margin-left:45px;
	}
}

@-moz-keyframes on{
	0%,100%{
		margin-left:0%;
	}
	21%{
		margin-left:0%;
	}
	25%{
		margin-left:15px;
	}
	46%{
		margin-left:15px;
	}
	50%{
		margin-left:30px;
	}
	71%{
		margin-left:30px;
	}
	75%{
		margin-left:45px;
	}
	96%{
		margin-left:45px;
	}
}

@keyframes on{
	0%,100%{
		margin-left:0%;
	}
	21%{
		margin-left:0%;
	}
	25%{
		margin-left:15px;
	}
	46%{
		margin-left:15px;
	}
	50%{
		margin-left:30px;
	}
	71%{
		margin-left:30px;
	}
	75%{
		margin-left:45px;
	}
	96%{
		margin-left:45px;
	}
}