@-webkit-keyframes heroGradientFlow {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 0.5;
  }
}
@keyframes heroGradientFlow {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 0.5;
  }
}

.skdk-hero-gradient {
  position: absolute;
  z-index: -1;
  will-change: transform;
  background: #0079c1;
  filter: blur(200px);
  opacity: 0;
  transform: scale(0);
}
.skdk-hero-gradient::after {
  content: "";
  position: relative;
  display: block;
  z-index: 1;
  will-change: top;
  background: #b2cdec;
  filter: blur(200px);
}
.skdk-hero-gradient.variation-1 {
  top: 9vw;
  left: 20vw;
  width: 600px;
  height: 600px;
}
.skdk-hero-gradient.variation-1::after {
  top: 300px;
  left: 554px;
  width: 300px;
  height: 300px;
}
.skdk-hero-gradient.variation-2 {
  top: 9vw;
  left: 40vw;
  width: 600px;
  height: 600px;
}
.skdk-hero-gradient.variation-2::after {
  top: 300px;
  left: -186px;
  width: 300px;
  height: 300px;
}
.skdk-hero-gradient.variation-3 {
  top: 9vw;
  left: 12vw;
  width: 600px;
  height: 600px;
}
.skdk-hero-gradient.variation-3::after {
  top: 120px;
  left: 534px;
  width: 300px;
  height: 300px;
}
.skdk-hero-gradient.variation-4 {
  top: 7vw;
  left: 39vw;
  width: 535px;
  height: 570px;
}
.skdk-hero-gradient.variation-4::after {
  top: 89px;
  left: -376px;
  width: 440px;
  height: 420px;
}
.skdk-hero-gradient.variation-5 {
  top: 16vw;
  left: 22vw;
  width: 600px;
  height: 600px;
}
.skdk-hero-gradient.variation-5::after {
  top: -30px;
  left: 544px;
  width: 300px;
  height: 300px;
}
.skdk-hero-gradient.variation-6 {
  top: 9vw;
  left: 24vw;
  width: 600px;
  height: 600px;
}
.skdk-hero-gradient.variation-6::after {
  top: 300px;
  left: 600px;
  width: 300px;
  height: 300px;
}
@media screen and (max-width: 768px) {
  .skdk-hero-gradient.variation-1 {
    top: 60vw;
    left: 20vw;
    width: 70vw;
    height: 70vw;
  }
  .skdk-hero-gradient.variation-1::after {
    top: 67.7vw;
    left: 26.6vw;
    width: 35vw;
    height: 35vw;
  }
  .skdk-hero-gradient.variation-2 {
    top: 18.7vw;
    left: 0vw;
    width: 70vw;
    height: 70vw;
  }
  .skdk-hero-gradient.variation-2::after {
    top: 60.3vw;
    left: 67.7vw;
    width: 20.5vw;
    height: 20.5vw;
  }
  .skdk-hero-gradient.variation-3 {
    top: 18.7vw;
    left: 0vw;
    width: 70vw;
    height: 70vw;
  }
  .skdk-hero-gradient.variation-3::after {
    top: 60.3vw;
    left: 67.7vw;
    width: 20.5vw;
    height: 20.5vw;
  }
  .skdk-hero-gradient.variation-4 {
    top: 7vw;
    left: 39vw;
    width: 535px;
    height: 570px;
  }
  .skdk-hero-gradient.variation-4::after {
    top: 89px;
    left: -376px;
    width: 440px;
    height: 420px;
  }
  .skdk-hero-gradient.variation-5 {
    top: 16vw;
    left: 22vw;
    width: 600px;
    height: 600px;
  }
  .skdk-hero-gradient.variation-5::after {
    top: -30px;
    left: 544px;
    width: 300px;
    height: 300px;
  }
  .skdk-hero-gradient.variation-6 {
    top: 9vw;
    left: 24vw;
    width: 600px;
    height: 600px;
  }
  .skdk-hero-gradient.variation-6::after {
    top: 300px;
    left: 600px;
    width: 300px;
    height: 300px;
  }
}

.skdk-hero-gradient.skdk-hero-home {
  -webkit-animation: heroGradientFlow 1.45s 4500ms forwards;
  animation: heroGradientFlow 1.45s 4500ms forwards;
}
.skdk-hero-gradient.skdk-hero {
  -webkit-animation: heroGradientFlow 1.45s 1s forwards;
  animation: heroGradientFlow 1.45s 1s forwards;
}