.pyro > .before, .pyro > .after {
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    box-shadow: 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff;
    -moz-animation: 1s bang ease-out infinite backwards, 1s gravity ease-in infinite backwards, 5s position linear infinite backwards;
    -webkit-animation: 1s bang ease-out infinite backwards, 1s gravity ease-in infinite backwards, 5s position linear infinite backwards;
    -o-animation: 1s bang ease-out infinite backwards, 1s gravity ease-in infinite backwards, 5s position linear infinite backwards;
    -ms-animation: 1s bang ease-out infinite backwards, 1s gravity ease-in infinite backwards, 5s position linear infinite backwards;
    animation: 1s bang ease-out infinite backwards, 1s gravity ease-in infinite backwards, 5s position linear infinite backwards;
}

.pyro > .after {
    -moz-animation-delay: 1.25s, 1.25s, 1.25s;
    -webkit-animation-delay: 1.25s, 1.25s, 1.25s;
    -o-animation-delay: 1.25s, 1.25s, 1.25s;
    -ms-animation-delay: 1.25s, 1.25s, 1.25s;
    animation-delay: 1.25s, 1.25s, 1.25s;
    -moz-animation-duration: 1.25s, 1.25s, 6.25s;
    -webkit-animation-duration: 1.25s, 1.25s, 6.25s;
    -o-animation-duration: 1.25s, 1.25s, 6.25s;
    -ms-animation-duration: 1.25s, 1.25s, 6.25s;
    animation-duration: 1.25s, 1.25s, 6.25s;
}

@-webkit-keyframes bang {
    to {
        box-shadow: 22px -351.6666666667px #0055ff, 118px 40.3333333333px #0073ff, -96px -306.6666666667px #ff001e, -1px -334.6666666667px #ff0077, -140px -107.6666666667px #ff00bf, 156px 59.3333333333px #f200ff, -62px 24.3333333333px #84ff00, -227px -95.6666666667px #00ff6f, 103px -252.6666666667px #ff0059, 137px 2.3333333333px #4d00ff, 203px -15.6666666667px #ff001a, -72px -167.6666666667px #d0ff00, 114px 31.3333333333px aqua, -73px -128.6666666667px #00ff88, 177px -191.6666666667px #6200ff, -91px -80.6666666667px #00ff2f, -67px 3.3333333333px #a200ff, 204px -360.6666666667px #009dff, -122px -248.6666666667px #0051ff, -98px 26.3333333333px #ff0059, 137px -262.6666666667px #ff007b, 228px -390.6666666667px #ffa600, -143px -202.6666666667px #00ff7b, -240px -240.6666666667px #eeff00, 125px -108.6666666667px #00aaff, -149px -235.6666666667px #00ff99, -136px -83.6666666667px #33ff00, 54px -262.6666666667px #b700ff, 165px 81.3333333333px #ff2f00, 23px -74.6666666667px #99ff00, -220px 33.3333333333px #8000ff, 158px -241.6666666667px #00ffe1, -19px -187.6666666667px #00ff62, 75px -208.6666666667px #ff0d00, -106px -70.6666666667px #0091ff, -45px -93.6666666667px #0022ff, 109px 39.3333333333px #4000ff, -94px 70.3333333333px #ffe100, -14px -301.6666666667px #5eff00, 50px -280.6666666667px #ff001a, -226px -176.6666666667px #0400ff, 121px 13.3333333333px #a200ff, -56px -272.6666666667px #9d00ff, -21px -323.6666666667px #ff7b00, -184px -199.6666666667px #00ff04, -81px 74.3333333333px red, -55px -7.6666666667px #9900ff, -24px -25.6666666667px #1500ff, 49px -162.6666666667px #ffa200, 102px 33.3333333333px #4dff00, 87px -353.6666666667px #ff9d00;
    }
}

@-moz-keyframes bang {
    to {
        box-shadow: 22px -351.6666666667px #0055ff, 118px 40.3333333333px #0073ff, -96px -306.6666666667px #ff001e, -1px -334.6666666667px #ff0077, -140px -107.6666666667px #ff00bf, 156px 59.3333333333px #f200ff, -62px 24.3333333333px #84ff00, -227px -95.6666666667px #00ff6f, 103px -252.6666666667px #ff0059, 137px 2.3333333333px #4d00ff, 203px -15.6666666667px #ff001a, -72px -167.6666666667px #d0ff00, 114px 31.3333333333px aqua, -73px -128.6666666667px #00ff88, 177px -191.6666666667px #6200ff, -91px -80.6666666667px #00ff2f, -67px 3.3333333333px #a200ff, 204px -360.6666666667px #009dff, -122px -248.6666666667px #0051ff, -98px 26.3333333333px #ff0059, 137px -262.6666666667px #ff007b, 228px -390.6666666667px #ffa600, -143px -202.6666666667px #00ff7b, -240px -240.6666666667px #eeff00, 125px -108.6666666667px #00aaff, -149px -235.6666666667px #00ff99, -136px -83.6666666667px #33ff00, 54px -262.6666666667px #b700ff, 165px 81.3333333333px #ff2f00, 23px -74.6666666667px #99ff00, -220px 33.3333333333px #8000ff, 158px -241.6666666667px #00ffe1, -19px -187.6666666667px #00ff62, 75px -208.6666666667px #ff0d00, -106px -70.6666666667px #0091ff, -45px -93.6666666667px #0022ff, 109px 39.3333333333px #4000ff, -94px 70.3333333333px #ffe100, -14px -301.6666666667px #5eff00, 50px -280.6666666667px #ff001a, -226px -176.6666666667px #0400ff, 121px 13.3333333333px #a200ff, -56px -272.6666666667px #9d00ff, -21px -323.6666666667px #ff7b00, -184px -199.6666666667px #00ff04, -81px 74.3333333333px red, -55px -7.6666666667px #9900ff, -24px -25.6666666667px #1500ff, 49px -162.6666666667px #ffa200, 102px 33.3333333333px #4dff00, 87px -353.6666666667px #ff9d00;
    }
}

@-o-keyframes bang {
    to {
        box-shadow: 22px -351.6666666667px #0055ff, 118px 40.3333333333px #0073ff, -96px -306.6666666667px #ff001e, -1px -334.6666666667px #ff0077, -140px -107.6666666667px #ff00bf, 156px 59.3333333333px #f200ff, -62px 24.3333333333px #84ff00, -227px -95.6666666667px #00ff6f, 103px -252.6666666667px #ff0059, 137px 2.3333333333px #4d00ff, 203px -15.6666666667px #ff001a, -72px -167.6666666667px #d0ff00, 114px 31.3333333333px aqua, -73px -128.6666666667px #00ff88, 177px -191.6666666667px #6200ff, -91px -80.6666666667px #00ff2f, -67px 3.3333333333px #a200ff, 204px -360.6666666667px #009dff, -122px -248.6666666667px #0051ff, -98px 26.3333333333px #ff0059, 137px -262.6666666667px #ff007b, 228px -390.6666666667px #ffa600, -143px -202.6666666667px #00ff7b, -240px -240.6666666667px #eeff00, 125px -108.6666666667px #00aaff, -149px -235.6666666667px #00ff99, -136px -83.6666666667px #33ff00, 54px -262.6666666667px #b700ff, 165px 81.3333333333px #ff2f00, 23px -74.6666666667px #99ff00, -220px 33.3333333333px #8000ff, 158px -241.6666666667px #00ffe1, -19px -187.6666666667px #00ff62, 75px -208.6666666667px #ff0d00, -106px -70.6666666667px #0091ff, -45px -93.6666666667px #0022ff, 109px 39.3333333333px #4000ff, -94px 70.3333333333px #ffe100, -14px -301.6666666667px #5eff00, 50px -280.6666666667px #ff001a, -226px -176.6666666667px #0400ff, 121px 13.3333333333px #a200ff, -56px -272.6666666667px #9d00ff, -21px -323.6666666667px #ff7b00, -184px -199.6666666667px #00ff04, -81px 74.3333333333px red, -55px -7.6666666667px #9900ff, -24px -25.6666666667px #1500ff, 49px -162.6666666667px #ffa200, 102px 33.3333333333px #4dff00, 87px -353.6666666667px #ff9d00;
    }
}

@-ms-keyframes bang {
    to {
        box-shadow: 22px -351.6666666667px #0055ff, 118px 40.3333333333px #0073ff, -96px -306.6666666667px #ff001e, -1px -334.6666666667px #ff0077, -140px -107.6666666667px #ff00bf, 156px 59.3333333333px #f200ff, -62px 24.3333333333px #84ff00, -227px -95.6666666667px #00ff6f, 103px -252.6666666667px #ff0059, 137px 2.3333333333px #4d00ff, 203px -15.6666666667px #ff001a, -72px -167.6666666667px #d0ff00, 114px 31.3333333333px aqua, -73px -128.6666666667px #00ff88, 177px -191.6666666667px #6200ff, -91px -80.6666666667px #00ff2f, -67px 3.3333333333px #a200ff, 204px -360.6666666667px #009dff, -122px -248.6666666667px #0051ff, -98px 26.3333333333px #ff0059, 137px -262.6666666667px #ff007b, 228px -390.6666666667px #ffa600, -143px -202.6666666667px #00ff7b, -240px -240.6666666667px #eeff00, 125px -108.6666666667px #00aaff, -149px -235.6666666667px #00ff99, -136px -83.6666666667px #33ff00, 54px -262.6666666667px #b700ff, 165px 81.3333333333px #ff2f00, 23px -74.6666666667px #99ff00, -220px 33.3333333333px #8000ff, 158px -241.6666666667px #00ffe1, -19px -187.6666666667px #00ff62, 75px -208.6666666667px #ff0d00, -106px -70.6666666667px #0091ff, -45px -93.6666666667px #0022ff, 109px 39.3333333333px #4000ff, -94px 70.3333333333px #ffe100, -14px -301.6666666667px #5eff00, 50px -280.6666666667px #ff001a, -226px -176.6666666667px #0400ff, 121px 13.3333333333px #a200ff, -56px -272.6666666667px #9d00ff, -21px -323.6666666667px #ff7b00, -184px -199.6666666667px #00ff04, -81px 74.3333333333px red, -55px -7.6666666667px #9900ff, -24px -25.6666666667px #1500ff, 49px -162.6666666667px #ffa200, 102px 33.3333333333px #4dff00, 87px -353.6666666667px #ff9d00;
    }
}

@keyframes bang {
    to {
        box-shadow: 22px -351.6666666667px #0055ff, 118px 40.3333333333px #0073ff, -96px -306.6666666667px #ff001e, -1px -334.6666666667px #ff0077, -140px -107.6666666667px #ff00bf, 156px 59.3333333333px #f200ff, -62px 24.3333333333px #84ff00, -227px -95.6666666667px #00ff6f, 103px -252.6666666667px #ff0059, 137px 2.3333333333px #4d00ff, 203px -15.6666666667px #ff001a, -72px -167.6666666667px #d0ff00, 114px 31.3333333333px aqua, -73px -128.6666666667px #00ff88, 177px -191.6666666667px #6200ff, -91px -80.6666666667px #00ff2f, -67px 3.3333333333px #a200ff, 204px -360.6666666667px #009dff, -122px -248.6666666667px #0051ff, -98px 26.3333333333px #ff0059, 137px -262.6666666667px #ff007b, 228px -390.6666666667px #ffa600, -143px -202.6666666667px #00ff7b, -240px -240.6666666667px #eeff00, 125px -108.6666666667px #00aaff, -149px -235.6666666667px #00ff99, -136px -83.6666666667px #33ff00, 54px -262.6666666667px #b700ff, 165px 81.3333333333px #ff2f00, 23px -74.6666666667px #99ff00, -220px 33.3333333333px #8000ff, 158px -241.6666666667px #00ffe1, -19px -187.6666666667px #00ff62, 75px -208.6666666667px #ff0d00, -106px -70.6666666667px #0091ff, -45px -93.6666666667px #0022ff, 109px 39.3333333333px #4000ff, -94px 70.3333333333px #ffe100, -14px -301.6666666667px #5eff00, 50px -280.6666666667px #ff001a, -226px -176.6666666667px #0400ff, 121px 13.3333333333px #a200ff, -56px -272.6666666667px #9d00ff, -21px -323.6666666667px #ff7b00, -184px -199.6666666667px #00ff04, -81px 74.3333333333px red, -55px -7.6666666667px #9900ff, -24px -25.6666666667px #1500ff, 49px -162.6666666667px #ffa200, 102px 33.3333333333px #4dff00, 87px -353.6666666667px #ff9d00;
    }
}

@-webkit-keyframes gravity {
    to {
        transform: translateY(200px);
        -moz-transform: translateY(200px);
        -webkit-transform: translateY(200px);
        -o-transform: translateY(200px);
        -ms-transform: translateY(200px);
        opacity: 0;
    }
}

@-moz-keyframes gravity {
    to {
        transform: translateY(200px);
        -moz-transform: translateY(200px);
        -webkit-transform: translateY(200px);
        -o-transform: translateY(200px);
        -ms-transform: translateY(200px);
        opacity: 0;
    }
}

@-o-keyframes gravity {
    to {
        transform: translateY(200px);
        -moz-transform: translateY(200px);
        -webkit-transform: translateY(200px);
        -o-transform: translateY(200px);
        -ms-transform: translateY(200px);
        opacity: 0;
    }
}

@-ms-keyframes gravity {
    to {
        transform: translateY(200px);
        -moz-transform: translateY(200px);
        -webkit-transform: translateY(200px);
        -o-transform: translateY(200px);
        -ms-transform: translateY(200px);
        opacity: 0;
    }
}

@keyframes gravity {
    to {
        transform: translateY(200px);
        -moz-transform: translateY(200px);
        -webkit-transform: translateY(200px);
        -o-transform: translateY(200px);
        -ms-transform: translateY(200px);
        opacity: 0;
    }
}

@-webkit-keyframes position {
    0%, 19.9% {
        margin-top: 10%;
        margin-left: 40%;
    }

    20%, 39.9% {
        margin-top: 40%;
        margin-left: 30%;
    }

    40%, 59.9% {
        margin-top: 20%;
        margin-left: 70%;
    }

    60%, 79.9% {
        margin-top: 30%;
        margin-left: 20%;
    }

    80%, 99.9% {
        margin-top: 30%;
        margin-left: 80%;
    }
}

@-moz-keyframes position {
    0%, 19.9% {
        margin-top: 10%;
        margin-left: 40%;
    }

    20%, 39.9% {
        margin-top: 40%;
        margin-left: 30%;
    }

    40%, 59.9% {
        margin-top: 20%;
        margin-left: 70%;
    }

    60%, 79.9% {
        margin-top: 30%;
        margin-left: 20%;
    }

    80%, 99.9% {
        margin-top: 30%;
        margin-left: 80%;
    }
}

@-o-keyframes position {
    0%, 19.9% {
        margin-top: 10%;
        margin-left: 40%;
    }

    20%, 39.9% {
        margin-top: 40%;
        margin-left: 30%;
    }

    40%, 59.9% {
        margin-top: 20%;
        margin-left: 70%;
    }

    60%, 79.9% {
        margin-top: 30%;
        margin-left: 20%;
    }

    80%, 99.9% {
        margin-top: 30%;
        margin-left: 80%;
    }
}

@-ms-keyframes position {
    0%, 19.9% {
        margin-top: 10%;
        margin-left: 40%;
    }

    20%, 39.9% {
        margin-top: 40%;
        margin-left: 30%;
    }

    40%, 59.9% {
        margin-top: 20%;
        margin-left: 70%;
    }

    60%, 79.9% {
        margin-top: 30%;
        margin-left: 20%;
    }

    80%, 99.9% {
        margin-top: 30%;
        margin-left: 80%;
    }
}

@keyframes position {
    0%, 19.9% {
        margin-top: 10%;
        margin-left: 40%;
    }

    20%, 39.9% {
        margin-top: 40%;
        margin-left: 30%;
    }

    40%, 59.9% {
        margin-top: 20%;
        margin-left: 70%;
    }

    60%, 79.9% {
        margin-top: 30%;
        margin-left: 20%;
    }

    80%, 99.9% {
        margin-top: 30%;
        margin-left: 80%;
    }
}

.flip-text div span {
    display: inline-block;
    transform-origin: 50% 70%;
}

    .flip-text div span:nth-child(1) {
        animation: flipper 1s cubic-bezier(0.68, -0.55, 0.26, 1.55) both, fadeIn 1s both;
    }

    .flip-text div span:nth-child(2) {
        animation: flipper 1s cubic-bezier(0.68, -0.55, 0.26, 1.55) .2s both, fadeIn 1s both;
    }

    .flip-text div span:nth-child(3) {
        animation: flipper 1s cubic-bezier(0.68, -0.55, 0.26, 1.55) .4s both, fadeIn 1s both;
    }

    .flip-text div span:nth-child(4) {
        animation: flipper 1s cubic-bezier(0.68, -0.55, 0.26, 1.55) .6s both, fadeIn 1s both;
    }

@keyframes flipper {
    from {
        transform: rotateX(90deg);
    }

    to {
        transform: rotateX(0deg);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

     to {
        opacity: 1;
    }
}