.cover-bg-gansito {
  height: 100%;
  pointer-events: none;
  position: absolute;
  width: 100%;
  z-index: -1;
}
.cover-bg-gansito__outer-container {
  height: 100%;
  position: relative;
  width: 100%;
}
.cover-bg-gansito__waves-container {
  height: 100%;
  left: 50%;
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  width: 768px;
}
.cover-bg-gansito__container-mask {
  background: radial-gradient(circle, rgba(253,85,0,1) 0%, rgba(241,81,0,1) 25%, rgba(237,80,0,1) 50%, rgba(241,81,0,1) 75%, rgba(201,55,0,1) 100%);
  height: 100%;
  mask-position: bottom center;
  mask-repeat: no-repeat;
  mask-size: cover;
  position: relative;
  top: 0px;
  width: 100%;
  -webkit-mask-position: bottom center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: cover;
}
.cover-bg-gansito__top-blue {
  background-position: center bottom;
  background-repeat: no-repeat;
  background-size: cover;
  position: absolute;
  top: 0;
  width: 100%;
  height: 480px;
}
.cover-bg-gansito__waves-pink-container {
  height: 480px;
  position: absolute;
  top: 8px;
  width: 100%;
}
.cover-bg-gansito__waves-pink {
  height: 100%;
  left: 50%;
  position: absolute;
  transform: translateX(-50%);
  width: auto;
}
.cover-bg-gansito__waves-bottom-container {
  height: 100%;
  position: absolute;
  bottom: 0px;
  width: 100%;
}
.cover-bg-gansito__waves-orange {
  bottom: 0px;
  height: auto;
  left: 50%;
  position: absolute;
  transform: translateX(-50%);
  width: 100%;
}
.cover-bg-gansito__waves-blue {
  bottom: 0px;
  height: auto;
  left: 50%;
  position: absolute;
  transform: translateX(-50%);
  width: 100%;
}
.cover-bg-gansito__light1 {
  background: radial-gradient(rgba(87, 211, 247,1) 0%, rgba(87, 211, 247,1) 15%, rgba(17,160,242,0) 80%);
  height: 450px;
  left: 50%;
  mix-blend-mode: color-dodge;
  opacity: 0.6;
  position: absolute;
  top: 10px;
  transform: translateX(-50%);
  width: 750px;
  mask-image: radial-gradient(rgba(0,0,0,1) 0%,rgba(0,0,0,0.8) 35%,rgba(0,0,0,0) 70%,rgba(0,0,0,0) 100%);
  -webkit-mask-image: radial-gradient(rgba(0,0,0,1) 0%,rgba(0,0,0,0.8) 35%,rgba(0,0,0,0) 70%,rgba(0,0,0,0) 100%);
}
.cover-bg-gansito__light2 {
  background: linear-gradient(0deg, rgba(251,86,0,1) 0%, rgba(243,123,5,1) 50%, rgba(243,123,5,1) 100%);
  height: 400px;
  left: 50%;
  mix-blend-mode: screen;
  opacity: 0.5;
  position: absolute;
  top: 250px;
  transform: translateX(-50%);
  width: 100vw;
  mask-image: linear-gradient(180deg,rgba(0,0,0,1) 0%,rgba(0,0,0,1) 60%,rgba(0,0,0,0.01) 100%);
  -webkit-mask-image: linear-gradient(180deg,rgba(0,0,0,1) 0%,rgba(0,0,0,1) 60%,rgba(0,0,0,0.01) 100%);
}
.cover-bg-gansito__light3 {
  background: radial-gradient(rgba(250,150,0,0.8) 0%,rgba(250,150,0,0.01) 70%,rgba(251,86,0,0) 100%);
  border-radius: 50%;
  height: 550px;
  left: 50%;
  mix-blend-mode: screen;
  position: absolute;
  bottom: 100px;
  transform: translateX(-50%);
  width: 550px;
  mask-image: radial-gradient(rgba(0,0,0,1) 0%,rgba(0,0,0,0.8) 70%,rgba(0,0,0,0) 100%);
  -webkit-mask-image: radial-gradient(rgba(0,0,0,1) 0%,rgba(0,0,0,0.8) 70%,rgba(0,0,0,0) 100%);
}
.cover-bg-gansito__wave-noise {
  opacity: 0.2;
  top: 0;
  mask-image: linear-gradient(180deg,rgba(0,0,0,1) 0%,rgba(0,0,0,1) 94%,rgba(0,0,0,0.2) 98%,rgba(0,0,0,0) 100%);
  -webkit-mask-image: linear-gradient(180deg,rgba(0,0,0,1) 0%,rgba(0,0,0,1) 94%,rgba(0,0,0,0.2) 98%,rgba(0,0,0,0) 100%);
}

.pink-wave-animation {
  animation: none;
  transform-box: fill-box;
  transform-origin: center bottom;
}

.orange-wave-animation {
  animation: none;
  transform-box: fill-box;
  transform-origin: center bottom;
}

.blue-wave-animation {
  animation: none;
  transform-box: fill-box;
  transform-origin: center bottom;
}

@media (min-width: 768px) {
  .cover-bg-gansito__waves-container {
    height: 96%;
    width: 1024px;
  }
  .cover-bg-gansito__top-blue,
  .cover-bg-gansito__waves-pink-container {
    height: 710px;
  }
  .cover-bg-gansito__light1 {
    height: 600px;
    top: 50px;
    width: 900px;
}
  .cover-bg-gansito__light2 {
    height: 700px;
  }
  .cover-bg-gansito__light3 {
    height: 900px;
    bottom: 0px;
    width: 1000px;
  }
}

@media (min-width: 1024px) {
  .cover-bg-gansito__waves-container {
    height: 94%;
    width: 1360px;
  }
  .cover-bg-gansito__top-blue,
  .cover-bg-gansito__waves-pink-container {
    height: 530px;
  }
  .cover-bg-gansito__light1 {
    height: 550px;
    top: -20px;
    width: 950px;
  }

  .cover-bg-gansito__light2 {
    height: 550px;
  }
  .cover-bg-gansito__light3 {
    height: 600px;
    bottom: 300px;
  }
  .pink-wave-animation {
    animation: pinkAnimationWave 8s ease-in-out infinite alternate-reverse;
  }

  .orange-wave-animation {
    animation: orangeAnimationWave 10s ease-in-out infinite alternate-reverse;
  }

  .blue-wave-animation {
    animation: blueAnimationWave 8s ease-in-out infinite alternate-reverse;
  }

  .pause-animation-waves {
    animation-play-state: paused;
  }
}

@media (min-width: 1360px) {
  .cover-bg-gansito__waves-container {
    height: 96%;
    width: 1920px;
  }
  .cover-bg-gansito__top-blue {
    height: 590px;
  }
  .cover-bg-gansito__waves-pink-container {
    height: 590px;
  }
  .cover-bg-gansito__waves-pink {
    height: auto;
    top: -65px;
    width: 100%;
  }
  .cover-bg-gansito__light1 {
    height: 600px;
    top: -10px;
    width: 1050px;
  }
  .cover-bg-gansito__light2 {
    height: 700px;
  }
  .cover-bg-gansito__light3 {
    bottom: 200px;
    height: 1000px;
    width: 1000px;
  }
}

@media (min-width: 1920px) {
  .cover-bg-gansito__waves-container {
    height: 96.5%;
    width: 102%;
  }
  .cover-bg-gansito__top-blue {
    height: 652px;
    width: 100%;
  }
  .cover-bg-gansito__waves-pink-container {
    height: 652px;
  }
  .cover-bg-gansito__waves-pink {
    top: auto;
    bottom: 0;
  }
  .cover-bg-gansito__light1 {
    height: 750px;
    top: -100px;
    width: 1300px;
  }
  .cover-bg-gansito__light2 {
    height: 800px;
  }
  .cover-bg-gansito__light3 {
    bottom: 100px;
    height: 1200px;
    width: 1200px;
  }
}

@keyframes pinkAnimationWave {
  0% { transform: scaleX(1) skewX(0deg) skewY(0deg); }
  25% { transform: scaleX(1.1) skewX(2deg) skewY(1deg); }
  50% { transform: scaleX(1) skewX(0deg) skewY(0deg); }
  75% { transform: scaleX(1.1) skewX(-2deg) skewY(0deg); }
  100% { transform: scaleX(1) skewX(0deg) skewY(0deg); }
}

@keyframes orangeAnimationWave {
  0% { transform: scaleX(1) skewX(0deg) skewY(0deg); }
  25% { transform: scaleX(1.1) skewX(2deg) skewY(2deg); }
  50% { transform: scaleX(1) skewX(0deg) skewY(0deg); }
  75% { transform: scaleX(1.1) skewX(-2deg) skewY(2deg); }
  100% { transform: scaleX(1) skewX(0deg) skewY(0deg); }
}

@keyframes blueAnimationWave {
  0% { transform: scaleX(1) skewX(0deg) skewY(0deg); }
  25% { transform: scaleX(1.2) skewX(2deg) skewY(2deg); }
  50% { transform: scaleX(1) skewX(0deg) skewY(0deg); }
  75% { transform: scaleX(1.2) skewX(-2deg) skewY(-2deg); }
  100% { transform: scaleX(1) skewX(0deg) skewY(0deg); }
}