* {
  margin: 0;
  padding: 0;
  text-align: center;
}

.hero-section {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  bottom: 0;
  background: url("./assets/dam-it-dams.jpg") top center no-repeat fixed;
  overflow: hidden;
}

div[class^='ripple-'] {
  width: 100%;
  position: relative;
  left: 0px;
  top: 59%;
  background: url("./assets/dam-it-dams.jpg") top center no-repeat fixed;
  -webkit-animation-name: water;
          animation-name: water;
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
          animation-direction: alternate;
}

.ripple-1 {
  height: 3px;
  top: 394px;
  -webkit-animation-delay: -0.6s;
          animation-delay: -0.6s;
  -webkit-animation-duration: 0.41s;
          animation-duration: 0.41s;
}

.ripple-2 {
  height: 6px;
  top: 395px;
  -webkit-animation-delay: -1.2s;
          animation-delay: -1.2s;
  -webkit-animation-duration: 0.57s;
          animation-duration: 0.57s;
}

.ripple-3 {
  height: 9px;
  top: 396px;
  -webkit-animation-delay: -1.2s;
          animation-delay: -1.2s;
  -webkit-animation-duration: 0.98s;
          animation-duration: 0.98s;
}

.ripple-4 {
  height: 12px;
  top: 397px;
  -webkit-animation-delay: -2s;
          animation-delay: -2s;
  -webkit-animation-duration: 1.14s;
          animation-duration: 1.14s;
}

.ripple-5 {
  height: 15px;
  top: 398px;
  -webkit-animation-delay: -0.2s;
          animation-delay: -0.2s;
  -webkit-animation-duration: 1.05s;
          animation-duration: 1.05s;
}

.ripple-6 {
  height: 18px;
  top: 399px;
  -webkit-animation-delay: -0.4s;
          animation-delay: -0.4s;
  -webkit-animation-duration: 1.21s;
          animation-duration: 1.21s;
}

.ripple-7 {
  height: 21px;
  top: 400px;
  -webkit-animation-delay: -0.4s;
          animation-delay: -0.4s;
  -webkit-animation-duration: 1.62s;
          animation-duration: 1.62s;
}

.ripple-8 {
  height: 24px;
  top: 401px;
  -webkit-animation-delay: -1.2s;
          animation-delay: -1.2s;
  -webkit-animation-duration: 1.53s;
          animation-duration: 1.53s;
}

.ripple-9 {
  height: 27px;
  top: 402px;
  -webkit-animation-delay: -1.6s;
          animation-delay: -1.6s;
  -webkit-animation-duration: 1.94s;
          animation-duration: 1.94s;
}

.ripple-10 {
  height: 30px;
  top: 403px;
  -webkit-animation-delay: -0.8s;
          animation-delay: -0.8s;
  -webkit-animation-duration: 2.1s;
          animation-duration: 2.1s;
}

.ripple-11 {
  height: 33px;
  top: 404px;
  -webkit-animation-delay: -0.8s;
          animation-delay: -0.8s;
  -webkit-animation-duration: 2.26s;
          animation-duration: 2.26s;
}

.ripple-12 {
  height: 36px;
  top: 405px;
  -webkit-animation-delay: -1.8s;
          animation-delay: -1.8s;
  -webkit-animation-duration: 2.42s;
          animation-duration: 2.42s;
}

.ripple-13 {
  height: 39px;
  top: 406px;
  -webkit-animation-delay: -1.8s;
          animation-delay: -1.8s;
  -webkit-animation-duration: 2.58s;
          animation-duration: 2.58s;
}

.ripple-14 {
  height: 42px;
  top: 407px;
  -webkit-animation-delay: -1.8s;
          animation-delay: -1.8s;
  -webkit-animation-duration: 2.74s;
          animation-duration: 2.74s;
}

.ripple-15 {
  height: 45px;
  top: 408px;
  -webkit-animation-delay: -1.8s;
          animation-delay: -1.8s;
  -webkit-animation-duration: 2.65s;
          animation-duration: 2.65s;
}

.ripple-16 {
  height: 48px;
  top: 409px;
  -webkit-animation-delay: -1.4s;
          animation-delay: -1.4s;
  -webkit-animation-duration: 3.06s;
          animation-duration: 3.06s;
}

.ripple-17 {
  height: 51px;
  top: 410px;
  -webkit-animation-delay: -0.8s;
          animation-delay: -0.8s;
  -webkit-animation-duration: 3.22s;
          animation-duration: 3.22s;
}

.ripple-18 {
  height: 54px;
  top: 411px;
  -webkit-animation-delay: -0.8s;
          animation-delay: -0.8s;
  -webkit-animation-duration: 3.38s;
          animation-duration: 3.38s;
}

.ripple-19 {
  height: 57px;
  top: 412px;
  -webkit-animation-delay: -1.4s;
          animation-delay: -1.4s;
  -webkit-animation-duration: 3.54s;
          animation-duration: 3.54s;
}

.ripple-20 {
  height: 60px;
  top: 413px;
  -webkit-animation-delay: -0.4s;
          animation-delay: -0.4s;
  -webkit-animation-duration: 3.7s;
          animation-duration: 3.7s;
}

@-webkit-keyframes water {
  from {
    -webkit-transform: rotateX(0deg);
            transform: rotateX(0deg);
  }
  to {
    -webkit-transform: rotateX(180deg);
            transform: rotateX(180deg);
  }
}

@keyframes water {
  from {
    -webkit-transform: rotateX(0deg);
            transform: rotateX(0deg);
  }
  to {
    -webkit-transform: rotateX(180deg);
            transform: rotateX(180deg);
  }
}
/*# sourceMappingURL=style.css.map */