/* PATTERN ANIMATION */
.pattern-bg {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 50%;
  width: 100%;
  z-index: -1;
}
.pattern-bg svg {
  fill: rgba(255, 255, 255, 0.3);
}
.pattern-bg .pattern-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #016080;
  background: -webkit-gradient(linear, left bottom, left top, from(var(--secondary)), color-stop(86%, white));
  background: -o-linear-gradient(bottom, var(--secondary) 0%, white 86%);
  background: linear-gradient(0deg, var(--secondary) 0%, white 86%);
}
.pattern-bg .pattern-wrapper::after {
  position: absolute;
  content: '';
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: -webkit-gradient(linear, left bottom, left top, color-stop(20%, var(--secondary)), to(rgba(255, 255, 255, 0)));
  background: -o-linear-gradient(bottom, var(--secondary) 20%, rgba(255, 255, 255, 0) 100%);
  background: linear-gradient(0deg, var(--secondary) 20%, rgba(255, 255, 255, 0) 100%);
  z-index: 20;
}
.pattern-bg .pattern-wrapper .pattern-left {
  height: 100%;
}
.pattern-bg .pattern-wrapper .pattern-left .left {
  position: absolute;
  top: 0;
  left: 0;
  -webkit-animation: moveTop 10s linear infinite;
  animation: moveTop 10s linear infinite;
  -webkit-transform: translateY(-195px);
  -ms-transform: translateY(-195px);
  transform: translateY(-195px);
}
@-webkit-keyframes moveTop {
  to {
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
  }
}
@keyframes moveTop {
  to {
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
  }
}
.pattern-bg .pattern-wrapper .pattern-right {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
}
.pattern-bg .pattern-wrapper .pattern-right .right {
  -webkit-animation: moveBottom 5s linear infinite;
  animation: moveBottom 5s linear infinite;
  -webkit-transform: translateY(0px);
  -ms-transform: translateY(0px);
  transform: translateY(0px);
}
@-webkit-keyframes moveBottom {
  to {
    -webkit-transform: translateY(-250px);
    transform: translateY(-250px);
  }
}
@keyframes moveBottom {
  to {
    -webkit-transform: translateY(-250px);
    transform: translateY(-250px);
  }
}
/* VAGUE ANIMATION */
.medulla-wave {
  background: var(--secondary);
  position: relative;
}
.medulla-wave svg.main-wave {
  margin-bottom: -5px;
  z-index: 0;
}
.medulla-wave svg.wave {
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 0;
  mix-blend-mode: soft-light;
}
#step2, #step4, #step6, #step8 {
  visibility: hidden;
}