/*note that lbw stands for light blue on white*/
.lbwholdtheholdtheocean {
  transform: scaleY(0.5);
  background-image: linear-gradient(0deg, #E9F2FA 10%, white 10%);
}

.lbwholdtheocean {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 210px;
  margin: -53px 0;
}

.lbwocean {
  height: 5%;
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  background: #E9F2FA;
}

.lbwwave {
  background: url(/assets/img/lightblueonwhitewave.svg) repeat-x;
  position: absolute;
  top: -198px;
  width: 6400px;
  height: 198px;
  animation: wave 10s cubic-bezier(0.36, 0.45, 0.63, 0.53) infinite;
  transform: translate3d(0, 0, 0);
}

.lbwwave:nth-of-type(2) {
  top: -175px;
  animation: wave 10s cubic-bezier(0.36, 0.45, 0.63, 0.53) -.125s infinite, swell 7s ease -1.25s infinite;
  opacity: 1;
}
/*note that bg stands for blue on grey*/
.bgholdtheholdtheocean {
  transform: scaleY(0.5);
  background-image: linear-gradient(0deg, #121940 10%, #dee1f6 10%);
}

.bgholdtheocean {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 210px;
  margin: -53px 0;
}

.bgocean {
  height: 5%;
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  background: #121940;
}

.bgwave {
  background: url(/assets/img/blueongreywave.svg) repeat-x;
  position: absolute;
  top: -198px;
  width: 6400px;
  height: 198px;
  animation: wave 8s cubic-bezier(0.36, 0.45, 0.63, 0.53) infinite;
  transform: translate3d(0, 0, 0);
}

.bgwave:nth-of-type(2) {
  top: -175px;
  animation: wave 8s cubic-bezier(0.36, 0.45, 0.63, 0.53) -.125s infinite, swell 7s ease -1.25s infinite;
  opacity: 1;
}
/*glb stands for grey on light blue*/
.glbholdtheholdtheocean {
  transform: scaleY(0.5);
  background: linear-gradient(0deg, #dee1f6 10%, #e9f2fa 10%);
}
.glbholdtheocean {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 210px;
  margin: -53px 0;
}

.glbocean {
  height: 5%;
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  background: #DEE1F6;
}

.glbwave {
  background: url(/assets/img/greyonlightbluewave.svg) repeat-x;
  position: absolute;
  top: -198px;
  width: 6400px;
  height: 198px;
  animation: wave 7s cubic-bezier(0.36, 0.45, 0.63, 0.53) infinite;
  transform: translate3d(0, 0, 0);
}

.glbwave:nth-of-type(2) {
  top: -175px;
  animation: wave 7s cubic-bezier(0.36, 0.45, 0.63, 0.53) -.125s infinite, swell 7s ease -1.25s infinite;
  opacity: 1;
}

/*note that gw stands for grey on white*/
.gwholdtheholdtheocean {
  transform: scaleY(0.5);
  background-image: linear-gradient(0deg, #DEE1F6 10%, white 10%);
}

.gwholdtheocean {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 210px;
  margin: -53px 0;
}

.gwocean {
  height: 5%;
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  background: #DEE1F6;
}

.gwwave {
  background: url(/assets/img/greyonwhitewave.svg) repeat-x;
  position: absolute;
  top: -198px;
  width: 6400px;
  height: 198px;
  animation: wave 10s cubic-bezier(0.36, 0.45, 0.63, 0.53) infinite;
  transform: translate3d(0, 0, 0);
}

.gwwave:nth-of-type(2) {
  top: -175px;
  animation: wave 10s cubic-bezier(0.36, 0.45, 0.63, 0.53) -.125s infinite, swell 7s ease -1.25s infinite;
  opacity: 1;
}

/*note that wg stands for white on grey*/
.wgholdtheholdtheocean {
  transform: scaleY(0.5);
  background-image: linear-gradient(0deg, white 10%, #DEE1F6 10%);
}

.wgholdtheocean {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 210px;
  margin: -53px 0;
}

.wgocean {
  height: 5%;
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  background: white;
}

.wgwave {
  background: url(/assets/img/whiteongreywave.svg) repeat-x;
  position: absolute;
  top: -198px;
  width: 6400px;
  height: 198px;
  animation: wave 10s cubic-bezier(0.36, 0.45, 0.63, 0.53) infinite;
  transform: translate3d(0, 0, 0);
}

.wgwave:nth-of-type(2) {
  top: -175px;
  animation: wave 10s cubic-bezier(0.36, 0.45, 0.63, 0.53) -.125s infinite, swell 7s ease -1.25s infinite;
  opacity: 1;
}

/* keyframes */
@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);
  }
}