body{
  overflow-x: hidden;
}



.ocean { 
    height: 4%;
    width:100%;
    position:absolute;
    bottom:-100px;
    left:0;
    background: #E0BA00;
    z-index: -9999;
   
  }
  
  .wave {
    background: url(wave.svg.php) repeat-x; 
    position: absolute;
    top: -198px;
    width: 6400px;
    height: 198px;
    animation: wave 47s cubic-bezier( 0.36, 0.45, 0.63, 0.53) infinite;
    transform: translate3d(0, 0, 0);
  }
  
  .wave:nth-of-type(2) {
    top: -175px;
    animation: wave 47s cubic-bezier( 0.36, 0.45, 0.63, 0.53) -.125s infinite, swell 7s ease -1.25s infinite;
    opacity: 1;
  }
  
  @keyframes wave {
    0% {
      margin-left: 0;
    }
    100% {
      margin-left: -1600px;
    }
  }
  
  @keyframes swell {
    0%, 100% {
      transform: translate3d(0,-25px,0);
    }
    50% {
      transform: translate3d(0,5px,0);
    }
  }


  .oceantop { 
    height: 4%;
    width:100%;
    position:absolute;
    left:0;
    top:-15px;
    background: #E0BA00;
    transform: scale(100%,30%);
  }
  
  .wove {
    background: url(wave.svg.php) repeat-x; 
    position: absolute;
    top: 0px;
    width: 6400px;
    height: 198px;
    animation: wove 47s cubic-bezier( 0.36, 0.45, 0.63, 0.53) infinite;
    transform: translate3d(0, 0, 0) rotate(180deg);
  }
  
  .wove:nth-of-type(2) {
    top: -97px;
    animation: wove 47s cubic-bezier( 0.36, 0.45, 0.63, 0.53) -.125s infinite, swoll 7s ease -1.25s infinite;
    opacity: 1;
  }
  
  @keyframes wove {
    0% {
      margin-left: 0;
    }
    100% {
      margin-left: -1600px;
    }
  }
  
  @keyframes swoll {
    0%, 100% {
      transform: translate3d(0,-25px,0) rotate(180deg);;
    }
    50% {
      transform: translate3d(0,5px,0) rotate(180deg);;
    }
  }