@keyframes slide-1-animation {
  0% {left: 100%; visibility: visible;}
  10% {left: 0%; visibility: visible;}
  20% {left: 0%; visibility: visible;}
  30% {left: -100%; visibility: hidden;}
  40% {left: 100%; visibility: hidden;}
  50% {left: 100%; visibility: hidden;}
  60% {left: 100%; visibility: hidden;}
  70% {left: 100%; visibility: hidden;}
  80% {left: 100%; visibility: hidden;}
  90% {left: 100%; visibility: hidden;}
  100% {left: 100%; visibility: visible;}
}

@keyframes slide-2-animation {
  0% {left: 100%; visibility: hidden;}
  10% {left: 100%; visibility: hidden;}
  20% {left: 100%; visibility: visible;}
  30% {left: 0%;visibility: visible;}
  40% {left: 0%;visibility: visible;}
  50% {left: 0%;visibility: visible;}
  60% {left: -100%; visibility: hidden;}
  70% {left: 100%; visibility: hidden;}
  80% {left: 100%; visibility: hidden;}
  90% {left: 100%; visibility: hidden;}
  100% {left: 100%; visibility: hidden;}
}

@keyframes slide-3-animation {
  0% {left: 100%; visibility: hidden;}
  10% {left: 100%; visibility: hidden;}
  20% {left: 100%; visibility: hidden;}
  30% {left: 100%; visibility: hidden;}
  40% {left: 100%; visibility: hidden;}
  50% {left: 100%; visibility: visible;}
  60% {left: 0%; visibility: visible;}
  70% {left: 0%; visibility: visible;}
  80% {left: 0%; visibility: visible;}
  90% {left: -100%; visibility: hidden;}
  100% {left: 100%; visibility: hidden;}
}

@keyframes slide-4-animation {
  0% {left: 0%; visibility: visible;}
  10% {left: -100%; visibility: hidden;}
  20% {left: -100%; visibility: hidden;}
  30% {left: 100%; visibility: hidden;}
  40% {left: 100%; visibility: hidden;}
  50% {left: 100%; visibility: hidden;}
  60% {left: 100%; visibility: hidden;}
  70% {left: 100%; visibility: hidden;}
  80% {left: 100%; visibility: visible;}
  90% {left: 0%; visibility: visible;}
  100% {left: 0%; visibility: visible;}
}

body {
  margin: 0px;
}

#slider {
  margin: 275px auto 0px auto;
  overflow: hidden;
}

#slide-1, #slide-2, #slide-3, #slide-4 {
  float: left;
  position: relative;
  width: 100%;
}

#slide-1 {  
  animation: slide-1-animation 50s infinite;
  margin-top: -39%;
}

#slide-2 {  
  animation: slide-2-animation 50s infinite;
  margin-top: -39%;
}

#slide-3 {  
  animation: slide-3-animation 50s infinite;
  margin-top: -39%;
}

#slide-4 {  
  animation: slide-4-animation 50s infinite;
}

.slide-container {
  width: 100%;
  position: relative;
}