*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}section
{
  position: relative;
  right:5%;
  width: 110%;
  height: 38vh;
  background-color: rgb(25, 127, 187);
  overflow: hidden;

}
 
section .wave 
{
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 198px ;
  background: url(wave.png);
  background-size: 1600px 198px;
}
section .wave.wave1 
{
   animation: animate-wave-1 10s linear infinite;
   z-index: 1000;
   opacity: 1;
   animation-delay: 0s;
   bottom: 0;

}
section .wave.wave2 
{
  animation:animate-wave-2 5s linear infinite;
  z-index: 999;
  opacity:0.5;
  animation-delay: -5s;
  bottom: 10px;
}
section .wave.wave3 
{
  animation:animate-wave-3 10s linear infinite;
  z-index: 998;
  opacity:0.2;
  animation-delay: -2s;
  bottom: 15px;
}
section .wave.wave4 
{
  animation:animate-wave-4 2s linear infinite;
  z-index: 997;
  opacity:0.7;
  animation-delay: -5s;
  bottom: 20px;
}
@keyframes animate-wave-1 
{
  0%
  {
    background-position-x:0;
  }
  100%
  {
    background-position-x:1600px;
  }
}
@keyframes animate-wave-2 
{
  0%
  {
    background-position-x:0;
  }
  100%
  {
    background-position-x:-1600px;
  }
}
@keyframes animate-wave-3{0%
  {
    background-position-x:0;
  }
  100%
  {
    background-position-x:1600px;
  }}

  @keyframes animate-wave-4 
  {
    0%
    {
      background-position-x:0;
    }
    100%
    {
      background-position-x:-1600px;
    }
  }

/*responsive website*/ 

@media screen and (max-width: 1060px){
  #primary { width: 67%; }
  #secondary {width: 30%; margin-left: 3%;}

}

@media screen and (max-width: 768px){
#primary { width: 100%; }
#secondary {width: 100%; margin-left: 0;border:none;}

}
img {
max-width: 100%; height: auto;
}

@media ( min-device-width:600px)
{
img[ data-src-600px] 
{
  content: attr(data-src-600px, url );
}
}

@media (min-device-width:800px)
{
img[data-src-800px] {
  content: attr(data-src-800px, url);
}
}

html{ font-size: 100%;}

@media (min-width:640px) {body {font-size: 1rem;} }
@media (min-width:960px) { body{font-size: 1.2rem;} }
@media (min-width:1100px) { bofy{ font-size: 1.5rem;}}
