@-webkit-keyframes grad-1-stop-1 {
  0% {
    stop-color: #91D9F8;
  }

  20% {
    stop-color: #91D9F8;
  }

  50% {
    stop-color: #B5D82B;
  }

  65% {
    stop-color: #A45FBD;
  }

  82% {
    stop-color: #B5DF37;
  }

  100% {
    stop-color: #91D9F8;
  }
}

@keyframes grad-1-stop-1 {
  0% {
    stop-color: #91D9F8;
  }

  20% {
    stop-color: #91D9F8;
  }

  50% {
    stop-color: #B5D82B;
  }

  65% {
    stop-color: #A45FBD;
  }

  82% {
    stop-color: #B5DF37;
  }

  100% {
    stop-color: #91D9F8;
  }
}

@-webkit-keyframes grad-1-stop-2 {
  0% {
    stop-color: #20A6DF;
  }

  20% {
    stop-color: #20A6DF;
  }

  50% {
    stop-color: #41A63F;
  }

  65% {
    stop-color: #5D9DC7;
  }

  82% {
    stop-color: #40A03C;
  }

  100% {
    stop-color: #20A6DF;
  }
}

@keyframes grad-1-stop-2 {
  0% {
    stop-color: #20A6DF;
  }

  20% {
    stop-color: #20A6DF;
  }

  50% {
    stop-color: #41A63F;
  }

  65% {
    stop-color: #5D9DC7;
  }

  82% {
    stop-color: #40A03C;
  }

  100% {
    stop-color: #20A6DF;
  }
}

@-webkit-keyframes grad-2-stop-1 {
  0% {
    stop-color: #E8E61B;
  }

  20% {
    stop-color: #E8E61B;
  }

  45% {
    stop-color: #EDF141;
  }

  63% {
    stop-color: #F86D2C;
  }

  82% {
    stop-color: #F3308F;
  }

  100% {
    stop-color: #E8E61B;
  }
}

@keyframes grad-2-stop-1 {
  0% {
    stop-color: #E8E61B;
  }

  20% {
    stop-color: #E8E61B;
  }

  45% {
    stop-color: #EDF141;
  }

  63% {
    stop-color: #F86D2C;
  }

  82% {
    stop-color: #F3308F;
  }

  100% {
    stop-color: #E8E61B;
  }
}

@-webkit-keyframes grad-2-stop-2 {
  0% {
    stop-color: #EE7326;
  }

  20% {
    stop-color: #EE7326;
  }

  45% {
    stop-color: #F37F42;
  }

  63% {
    stop-color: #F2358C;
  }

  82% {
    stop-color: #F26230;
  }

  100% {
    stop-color: #EE7326;
  }
}

@keyframes grad-2-stop-2 {
  0% {
    stop-color: #EE7326;
  }

  20% {
    stop-color: #EE7326;
  }

  45% {
    stop-color: #F37F42;
  }

  63% {
    stop-color: #F2358C;
  }

  82% {
    stop-color: #F26230;
  }

  100% {
    stop-color: #EE7326;
  }
}

.with-logo-eff {
  .st0 {
    opacity: .8;
    fill: url(#gradient-1);
  }

  .st11 {
    opacity: .8;
    fill: url(#gradient-2);
  }

  .st1 {
    fill: none;
    stroke: #fff;
    stroke-width: 0.25;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-miterlimit: 10;
  }

  .st2 {
    fill: none;
    stroke: #FFFFFF;
    stroke-width: 0.5;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .st3 {
    fill: none;
    stroke: #FFFFFF;
    stroke-width: 0.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 0, 1.0048;
  }

  .st4 {
    fill: none;
    stroke: #FFFFFF;
    stroke-width: 0.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 0, 1.01;
  }

  .st5 {
    fill: none;
    stroke: #FFFFFF;
    stroke-width: 0.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 0, 0.9957;
  }

  .st6 {
    fill: none;
    stroke: #FFFFFF;
    stroke-width: 0.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 0, 1.0021;
  }

  .st7 {
    fill: none;
    stroke: #FFFFFF;
    stroke-width: 0.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 0, 0.9854;
  }

  .st8 {
    fill: none;
    stroke: #FFFFFF;
    stroke-width: 0.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 0, 0.9985;
  }

  .st9 {
    fill: none;
    stroke: #FFFFFF;
    stroke-width: 0.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 0, 1.0005;
  }

  .st10 {
    fill: none;
    stroke: #FFFFFF;
    stroke-width: 0.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 0, 0.996;
  }

  #grad-1-stop-1 {

    -webkit-animation: grad-1-stop-1 7s linear infinite forwards;
    animation: grad-1-stop-1 7s linear infinite forwards;
    animation-delay: 2s;
  }

  #grad-1-stop-2 {
    -webkit-animation: grad-1-stop-2 7s linear infinite forwards;
    animation: grad-1-stop-2 7s linear infinite forwards;
    animation-delay: 2s;
  }

  #grad-2-stop-1 {
    -webkit-animation: grad-2-stop-1 7s linear infinite forwards;
    animation: grad-2-stop-1 7s linear infinite forwards;
    animation-delay: 2s;
  }

  #grad-2-stop-2 {
    -webkit-animation: grad-2-stop-2 7s linear infinite forwards;
    animation: grad-2-stop-2 7s linear infinite forwards;
    animation-delay: 2s;
  }

  #logo-svg:hover #grad-1-stop-1,
  #logo-svg:hover #grad-1-stop-2,
  #logo-svg:hover #grad-2-stop-1,
  #logo-svg:hover #grad-2-stop-2 {
    -webkit-animation-duration: 4s;
    animation-duration: 4s;
  }

  .letter {
    opacity: 0;
    -webkit-animation-name: letter;
    animation-name: letter;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-duration: .5s;
    animation-duration: .5s;
  }

  .letter-1 {
    -webkit-animation-delay: 1s;
    animation-delay: 1s;
  }

  .letter-2 {
    -webkit-animation-delay: 1.1s;
    animation-delay: 1.1s;
  }

  .letter-3 {
    -webkit-animation-delay: 1.2s;
    animation-delay: 1.2s;
  }

  .letter-4 {
    -webkit-animation-delay: 1.3s;
    animation-delay: 1.3s;
  }

  .letter-5 {
    -webkit-animation-delay: 1.4s;
    animation-delay: 1.4s;
  }

  .letter-6 {
    -webkit-animation-delay: 1.5s;
    animation-delay: 1.5s;
  }

  .letter-7 {
    -webkit-animation-delay: 1.6s;
    animation-delay: 1.6s;
  }

  .letter-8 {
    -webkit-animation-delay: 1.7s;
    animation-delay: 1.7s;
  }

  .letter-9 {
    -webkit-animation-delay: 1.8s;
    animation-delay: 1.8s;
  }

  .letter-10 {
    -webkit-animation-delay: 1.9s;
    animation-delay: 1.9s;
  }

  .letter-11 {
    -webkit-animation-delay: 2s;
    animation-delay: 2s;
  }

  .letter-12 {
    -webkit-animation-delay: 2.1s;
    animation-delay: 2.1s;
  }

  .letter-13 {
    -webkit-animation-delay: 2.2s;
    animation-delay: 2.2s;
  }

  .letter-14 {
    -webkit-animation-delay: 2.3s;
    animation-delay: 2.3s;
  }

  .word {
    opacity: 0;
    -webkit-animation-name: letter;
    animation-name: letter;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-delay: 2.4s;
    animation-delay: 2.4s;
  }

  .lines {
    opacity: 0;
    -webkit-animation-name: lines;
    animation-name: lines;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-delay: 1.8s;
    animation-delay: 1.8s;
    -webkit-transform-origin: center;
    -ms-transform-origin: center;
    transform-origin: center;
  }

  .grad-1 {
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
    -webkit-animation-name: bubble1;
    animation-name: bubble1;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-delay: 0s;
    animation-delay: 0s;
    -webkit-transform-origin: center;
    -ms-transform-origin: center;
    transform-origin: center;
  }

  .grad-2 {
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
    -webkit-animation-name: bubble2;
    animation-name: bubble2;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-duration: 1.2s;
    animation-duration: 1.2s;
    -webkit-animation-delay: .2s;
    animation-delay: .2s;
    -webkit-transform-origin: center;
    -ms-transform-origin: center;
    transform-origin: center;
  }



  .logo-dark .letter,
  .logo-dark .word {
    fill: #fff;
    background-color: #fff;
  }

  .logo-dark .lines {
    -webkit-clip-path: url(#cut);
    clip-path: url(#cut);
  }

  .grad-1.bug-fix {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    -webkit-animation-fill-mode: none;
    animation-fill-mode: none;
  }
}

@-webkit-keyframes letter {
  0% {
    opacity: 0;
    -webkit-transform: translate(0, 2px);
    transform: translate(0, 2px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }
}

@keyframes letter {
  0% {
    opacity: 0;
    -webkit-transform: translate(0, 2px);
    transform: translate(0, 2px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }
}

@-webkit-keyframes bubble1 {
  0% {
    -webkit-transform: scale(0.2);
    transform: scale(0.2);
  }

  75% {
    -webkit-transform: scale(1.05);
    transform: scale(1.05);
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@keyframes bubble1 {
  0% {
    -webkit-transform: scale(0.2);
    transform: scale(0.2);
  }

  75% {
    -webkit-transform: scale(1.05);
    transform: scale(1.05);
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@-webkit-keyframes bubble2 {
  0% {
    -webkit-transform: scale(0.2);
    transform: scale(0.2);
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@keyframes bubble2 {
  0% {
    -webkit-transform: scale(0.2);
    transform: scale(0.2);
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}


@-webkit-keyframes lines {
  0% {
    opacity: 0;
    -webkit-transform: scale(3);
    transform: scale(3);
  }

  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@keyframes lines {
  0% {
    opacity: 0;
    -webkit-transform: scale(3);
    transform: scale(3);
  }

  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

/* .grad-2.bug-fix {
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
  -webkit-animation-fill-mode: none;
  animation-fill-mode: none;
} */