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