/* Background wave */
#ocean {
  position: absolute;
  width: 100%;
}
#waves {
  height: 400px;
}

.wave {
  background: url("../medias/assets/images/wave.png");
  background-size: 100% 400px;
  position: absolute;
  width: 100%;
  height: 100%;
}

#wave1 {
  bottom: 20px;
  opacity: 0.5;
  animation: waveFlow 5s infinite linear;
}

#wave2 {
  bottom: 15px;
  opacity: 0.4;
  animation: waveFlow 3s infinite linear;
}

#wave3 {
  bottom: 10px;
  opacity: 0.7;
  animation: waveFlow 6.5s infinite linear;
}

#wave4 {
  bottom: 5px;
  opacity: 0.5;
  animation: waveFlow 4.5s infinite linear;
}

#wave5 {
  bottom: 0;
  opacity: 1;
  animation: waveFlow 8s infinite linear;
}

@keyframes waveFlow {
  0% {
    background-position-x: 0;
  }
  100% {
    background-position-x: 100vw;
  }
}