#hero {
  background-color: black;
}

.topimg {
  position: absolute;
  min-width: 100%;
  min-height: 100%;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  opacity: 0;
  margin: auto;
}

.img1 {
  background-image: url(../img/topimg/001.jpg);
  -webkit-animation: change-img-anim 25s infinite;
          animation: change-img-anim 25s infinite;
  -webkit-animation-delay: 0s;
          animation-delay: 0s;
}

.img2 {
  background-image: url(../img/topimg/002.jpg);
  -webkit-animation: change-img-anim 25s infinite;
          animation: change-img-anim 25s infinite;
  -webkit-animation-delay: 5s;
          animation-delay: 5s;
}

.img3 {
  background-image: url(../img/topimg/003.jpg);
  -webkit-animation: change-img-anim 25s infinite;
          animation: change-img-anim 25s infinite;
  -webkit-animation-delay: 10s;
          animation-delay: 10s;
}

.img4 {
  background-image: url(../img/topimg/004.jpg);
  -webkit-animation: change-img-anim 25s infinite;
          animation: change-img-anim 25s infinite;
  -webkit-animation-delay: 15s;
          animation-delay: 15s;
}

.img5 {
  background-image: url(../img/topimg/005.jpg);
  -webkit-animation: change-img-anim 25s infinite;
          animation: change-img-anim 25s infinite;
  -webkit-animation-delay: 20s;
          animation-delay: 20s;
}

@-webkit-keyframes change-img-anim {
  0% {
    height: 103%;
    opacity: 0;
  }
  5% {
    height: 100%;
    opacity: 1;
  }
  20% {
    height: 100%;
    opacity: 1;
  }
  25% {
    height: 103%;
    opacity: 0;
  }
  100% {
    height: 103%;
    opacity: 0;
  }
}

@keyframes change-img-anim {
  0% {
    height: 103%;
    opacity: 0;
  }
  5% {
    height: 100%;
    opacity: 1;
  }
  20% {
    height: 100%;
    opacity: 1;
  }
  25% {
    height: 103%;
    opacity: 0;
  }
  100% {
    height: 103%;
    opacity: 0;
  }
}/*# sourceMappingURL=top_img_anime.css.map */