#content {
  background-image: url("img/sand.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.wave {
  position: absolute;
  float: right;

  width:  100%;

  animation-direction: alternate;
  animation-iteration-count: infinite; 
  animation-timing-function: ease-in-out;
}

#wave_5 {
   height: 10px;
   z-index: 2;

   background-image: url("img/wave_5.png");

   background-position: center;
   background-repeat: no-repeat;

   animation-duration:5s;
   animation-name: wave_foam;
   

}

#wave_4 {
   height: 50px;
    z-index: 3;

   background-image: url("img/wave_4.png");
   background-size: auto 100%;
   background-position: center;
   background-repeat: no-repeat;
   animation-duration:7s;
   animation-name: wave_four;

   
}

#wave_3 {
   height: 30px;
    z-index: 4;
  
   background-image: url("img/wave_3.png");
   background-size: auto 100%;
   background-position: center;
   background-repeat: no-repeat;
   animation-duration:9s;
   animation-name: wave_three;

  
}

#wave_2 {
   height: 20px;
    z-index: 5;

   background-image: url("img/wave_2.png");
   background-size: auto 100%;
   background-position: center;
   background-repeat: no-repeat;
   animation-duration:11s;
   animation-name: wave_two;

   
}

#wave_1 {
   height: 10px;
    z-index: 6;

   background-image: url("img/wave_1.png");
   background-size: auto 100%;
   background-position: center;
   background-repeat: no-repeat;
   animation-duration:13s;
   animation-name: wave_one;

}

@keyframes wave_one{
      0%{  background-size: 100% 10px; height: 10px;}
      100%{background-size: 100% 90px; height: 90px;}
}

@keyframes wave_two{
      0%{  background-size: 100% 80px;  height: 80px;}
      100%{background-size: 100% 150px; height: 150px;}
}
@keyframes wave_three{
      0%{  background-size: 100% 140px; height: 140px;}
      100%{background-size: 100% 210px; height: 210px;}
}

@keyframes wave_four{
      0%{  background-size: 100% 200px; height: 200px;}
      100%{background-size: 100% 300px; height: 300px;}
}
@keyframes wave_foam{
      0%{  background-size: 100% 300px; height: 300px;}
      100%{background-size: 100% 390px; height: 390px;}
}