.top-animation{
  position: relative;
  width: 100%;
  height: 0px;
  /* padding-top: 60%;
  padding-top: 56%; */
  padding-top: 40%;
  overflow: hidden;
  background-color: white;
}

.top-animation img{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: auto;
  opacity: 0;
  animation :slideshow 18s linear forwards;
  /* animation-name: slideshow
  animation-duration: 10s
  animation-timing-function: linear;
  animation-delay: 1s;
  animation-iteration-count: infinite;
  animation-fill-mode: both; */
}

/* .top-animation::before{
} */

/* .top-animation img{
  position: absolute;
  width: 100%;
  bottom: 0;
  left: 0;
} */

/* .img1{
  display: block;
  margin:0 auto;
}

.img2,
.img3{
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
} */


@keyframes slideshow{
  0%{
    opacity: 0;
  }
  6%{
    opacity: 1;
  }
  100%{
    opacity: 1;
  }
}

.top-animation img:nth-child(2){
  animation-delay: 2s;
}

.top-animation img:nth-child(3){
  animation-delay: 4s;
}

.top-animation img:nth-child(4){
  animation-delay: 6s;
}

.top-animation img:nth-child(5){
  animation-delay: 8s;
}

.top-animation img:nth-child(6){
  animation-delay: 10s;
}

.top-animation img:nth-child(7){
  animation-delay: 12s;
}

.top-animation img:nth-child(8){
  animation-delay: 14s;
}

.top-animation img:last-child{
  animation-delay: 16s;
}


@media(max-width:797px){
  .top-animation{

    top:72px;
    margin-bottom: 72px;
  }

}