#logo-svg {
  max-width: 600px;
  width: 100%;
}

.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;
}

@-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;
  }
}

#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: 1;
  /* -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; */
}

@-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);
  }
}

/* .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;
} */

.lines {
  opacity: 1;
}

.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;
}


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