/* Reset */
* { margin:0; padding:0; }
body { min-width:900px; }
/* Slider */
#slider { width:100%; height:100%; 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:315px solid transparent; border-left:500px solid rgba(52, 73, 94, .7); border-bottom:0; position:absolute; bottom:0; }
/* Contents */
.content { width:100%; height:100%; position:absolute; overflow:hidden; }
.content-txt { width:268px; height:150px; float:left; position:relative; top:130px; -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:Arial; text-transform:uppercase; font-size:15px; color:#fff; text-align:left; margin-left:30px; padding-bottom:10px; }
.content-txt p { font-family:arial; font-weight:normal; font-size:12px; 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;
}
}
/* main */
/* Reset */
a { text-decoration:none; color:inherit; }
html { width:100%; height:100%; }
/* Body */
body { background:#fff; }