/* Apple */

.box.wavebox {

}
/*** Button Code ****/
.wave-button {
  background-color: var(--nav-title-color);
  width: 70%;
  padding: 2.75em 0 ;
  text-align: center;
  margin: 0 auto;
  position: absolute;
  border-radius: 130px;
  transition: all 0.6s cubic-bezier(0.15, 1, 0.33, 1);
  -webkit-transition: all 0.6s cubic-bezier(0.15, 1, 0.33, 1);
  z-index: 100;
  left: 0;
  right: 0;
  top: 30%;
}
@media screen and (min-width: 500px) {
  .wave-button {
    padding: 4em 0 ;
  }
}

.wave-button:hover {
transform: translateY(-28%);
}

.wave-title {
  color: #fff;
  color: var(--bg-color);
  font-family: 'Roboto', sans-serif;
  font-size: 24px;
  letter-spacing: 2px;
  font-weight: 300;
  line-height: 1;
}
@media screen and (min-width: 500px) {
  .marquee-title {
    font-size: 47px;
  }
}
.wave-bg {
position: absolute;
top: 25%;
background-color: #90E5FE;
background-color: var(--sidebar-color);
height: 100%;
width: 100%;
z-index: 1;
}

.marquee-wave {
  display: block;
  width: 200%;
  position: absolute;
}
.marquee-wave.back {
  margin: 7% 0;
  animation: marquee-reverse 2s linear infinite;
}
.marquee-wave.front {
  margin: 50% 0 0 0;
  z-index: 100;
  animation: marquee 2s linear infinite;
}
@media screen and (min-width: 400px) {
  .marquee-wave.front {
    margin: 45% 0 0 0;
  }
}
@media screen and (min-width: 500px) {
  .marquee-wave.front {
    margin: 40% 0 0 0;
  }
}
  @media screen and (min-width: 750px) {
    .marquee-wave.front {
      margin: 45% 0 0 0;
    }
  }
  @media screen and (min-width: 770px) {
    .marquee-wave.front {
      margin: 40% 0 0 0;
    }
  }
  @media screen and (min-width: 900px) {
    .marquee-wave.front {
      margin: 46% 0 0 0;
    }
  }
  @media screen and (min-width: 1000px) {
    .marquee-wave.front {
      margin: 44% 0 0 0;
    }
  }

.wave-svg {
  fill: var(--sidebar-color);
}


@keyframes marquee {
0% { left: 0; }
100% { left: -100%; }
}
@keyframes marquee-reverse {
0% { right: 0; }
100% { right: -100%; }
}