.waveWrapper {
  overflow: hidden;
  position: absolute;
  /*left: 0;*/
  /*right: 0;*/
  /*bottom: 0;*/
  top: -1px;
  margin: auto;
  width: 100%;
  height: 100%;
  transform: rotate(180deg);
}

.waveWrapperInner {
  position: absolute;
  width: 100%;
  overflow: hidden;
  height: 100%;
  bottom: -1px;
  background-image: linear-gradient(to top, var(--ws-color) 5%, var(--ws-dark) 25%, var(--ws-lightgreen) 40%, var(--ws-lightgreen) 50%, var(--ws-color) 60%, var(--ws-dark) 95%);
  z-index: -5;
}

.bgTop {
  z-index: -1;
  opacity: 0.5;
  position: absolute;
}

.bgMiddle {
  z-index: -4;
  opacity: 0.75;
  position: absolute;
}

.bgBottom {
  z-index: -5;
  position: absolute;
}

.wave {
  position: absolute;
  left: 0;
  width: 200%;
  height: 100%;
  background-repeat: repeat no-repeat;
  background-position: 0 bottom;
  transform-origin: center bottom;
}

.waveTop {
  background-size: 50% 100px;
}

.waveAnimation .waveTop {
  animation: move-wave 3s;
  -webkit-animation: move-wave 3s;
  -webkit-animation-delay: 1s;
  animation-delay: 1s;
}

.waveMiddle {
  background-size: 50% 120px;
}

.waveAnimation .waveMiddle {
  animation: move_wave 10s linear infinite;
}

.waveBottom {
  background-size: 50% 100px;
}

.waveAnimation .waveBottom {
  animation: move_wave 15s linear infinite;
}

@keyframes move_wave {
  0% {
    transform: translateX(0) translateZ(0) scaleY(1);
  }
  50% {
    transform: translateX(-25%) translateZ(0) scaleY(0.55);
  }
  100% {
    transform: translateX(-50%) translateZ(0) scaleY(1);
  }
}