.css-slider {
  overflow: hidden;
  padding: 10% 0 15%;
  position: relative;
  width:100%;
  height:100%;
  z-index:1;
}
.css-slider:before,
.css-slider:after {
   content: "";
   z-index: -1;
   position: absolute;
   top: 0;
   bottom: 0;
   left: 0;
}
.css-slider:before {
  opacity:0.9;
  width: 500%; /* (n+1)*100% */
  background:url(slider/2.jpg) repeat-x; 
  background-position: 75% top, 50% top, 25% top, 0% top; /* (n-1)/n*100%, (n-2)/n*100% ... 0% */
  background-size:  20% auto; /* 100/(n+1)% */
//  animation: slide 50s ease-in-out  infinite;
}
.css-slider:after {
  right: 0;
}
@keyframes slide {
  0%, 20% {
    transform: translate3d(0,0,0);
  }
  25%, 45% {
    transform: translate3d(-20%,0,0);
     /* -1/n+1 * 100% */
  }
  50%, 70% {
    transform: translate3d(-40%,0,0);
  }
  75%, 95% {
    transform: translate3d(-60%,0,0);   
  }
  100% {
    transform: translate3d(-80%,0,0);
    /* -n/n+1 * 100% */
    animation-timing-function: steps(1, end);
  }
}
.title h1{
  color:white;
  font-size: 3rem;
}
@media screen and (max-width: 800px) {

}