/* Slider */
#slider{
  width:450px;
  height:190px;

  position:relative;
  overflow:hidden;
}

.slides{
  width:800%;
  height:100%;
  position:relative;
  animation:slide 40s infinite;
}

.slider{
  width:12.5%;
  height:100%;
  float:left;
  position:relative;
  z-index:1;
  overflow:hidden;
}


/* Contents */
.content{
  width:100%;
  height:100%;
  position:absolute;
  overflow:hidden;
}
.content-txt{
  width:100%;
  float:left;
  position:relative;
  animation:content-s 5s infinite;
}
.content-txt h1{
  font-family:Intro;
  font-size:1.5em;
  color:#A80000;
  text-align:left;
  margin-left:25px;
}
.content-txt h2{
  font-family:Quicksand;
  font-weight:normal;
  font-size:1em;
  font-style:italic;
  color:#225B54;
  text-align:left;
  margin-left:25px;
}

/* Switch */
.switch{
  width:160px;
  height:10px;
  position:absolute;
  bottom:15px;
  z-index:99;
  left:50px;
}
.switch > ul{
  list-style:none;
}
.switch > ul > li{
  width:10px;
  height:10px;
  border-radius:50%;
  background:#225B54;
  float:left;
  margin-right:5px;
  cursor:pointer;
}
.switch ul{
  overflow:hidden;
}
.on{
  width:100%;
  height:100%;
  border-radius:50%;
  background:#A80000;
  position:relative;
  animation:on 40s infinite;
}

/* Animation */

@keyframes slide{
    0%,100%{
    margin-left:0%;
  }
  10%{
    margin-left:0%;
  }
  13%{
    margin-left:-100%;
  }
  23%{
    margin-left:-100%;
  }
  26%{
    margin-left:-200%;
  }
  36%{
    margin-left:-200%;
  }
  39%{
    margin-left:-300%;
  }
  49%{
    margin-left:-300%;
  }
  52%{
    margin-left:-400%;
  }
  62%{
    margin-left:-400%;
  }
  65%{
    margin-left:-500%;
  }
  75%{
    margin-left:-500%;
  }
  78%{
    margin-left:-600%;
  }
  88%{
    margin-left:-600%;
  }
  91%{
    margin-left:-700%;
  }
  97%{
    margin-left:-700%;
  }
}




@keyframes on{
  0%,100%{
    margin-left:0%;
  }
  10%{
    margin-left:0%;
  }
  13%{
    margin-left:15px;
  }
  23%{
    margin-left:15px;
  }
  26%{
    margin-left:30px;
  }
  36%{
    margin-left:30px;
  }
  39%{
    margin-left:45px;
  }
  49%{
    margin-left:45px;
  }
  52%{
    margin-left:60px;
  }
  62%{
    margin-left:60px;
  }
  65%{
    margin-left:75px;
  }
  75%{
    margin-left:75px;
  }
  78%{
    margin-left:90px;
  }
  88%{
    margin-left:90px;
  }
  91%{
    margin-left:105px;
  }
  97%{
    margin-left:105px;
  }
}