.pyro > .before, .pyro > .after {
    position: absolute;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    z-index:9999;
    box-shadow: 0 0 blue;
    -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;*/
    animation: 1s bang ease-out 3 backwards, 1s gravity ease-in 3 backwards, 5s position linear 3 backwards;
    /*animation: 1s bang ease-out 3 backwards, 1s gravity ease-in 3 backwards, 5s position linear 3 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: -141px -205.6666666667px #2fff00, -164px -359.6666666667px #ffae00, 131px -219.6666666667px #ff0015, 170px 35.3333333333px #00ffea, -131px -101.6666666667px #ff0015, -135px -294.6666666667px #00ffb3, 244px -398.6666666667px #00ffae, 193px -312.6666666667px #ff002f, -125px -402.6666666667px #00ccff, -93px -61.6666666667px #15ff00, -39px 77.3333333333px #7700ff, 156px -395.6666666667px #4dff00, -226px -232.6666666667px #ff4400, 100px -373.6666666667px #0099ff, 22px 41.3333333333px #0080ff, 248px -313.6666666667px #4dff00, -124px -345.6666666667px #ff00d5, 109px 39.3333333333px #006fff, -230px 55.3333333333px #00ff15, -17px -49.6666666667px #7300ff, 141px -221.6666666667px #ccff00, 183px -237.6666666667px #ff9500, -46px -233.6666666667px #77ff00, 163px 81.3333333333px #00f2ff, 154px -76.6666666667px #ea00ff, -28px -74.6666666667px #7300ff, -243px -395.6666666667px #ff2600, 84px -24.6666666667px #6aff00, 250px 32.3333333333px #77ff00, -115px 74.3333333333px #00ffbb, -74px -202.6666666667px #00d9ff, -67px -351.6666666667px #0015ff, 182px -88.6666666667px #00fff2, 176px 58.3333333333px #ff00d5, 123px -340.6666666667px #d500ff, -114px -188.6666666667px #aeff00, -209px -385.6666666667px #00ff77, 6px -167.6666666667px #6200ff, 122px 29.3333333333px #ff4d00, -138px 35.3333333333px #b300ff, 206px 23.3333333333px #00c8ff, -55px -320.6666666667px #9500ff, 121px -377.6666666667px #00ffb7, 168px -335.6666666667px #37ff00, 74px -207.6666666667px #ff005e, -3px -409.6666666667px #ff0d00, 183px -50.6666666667px #00ff5e, 60px -81.6666666667px #ff0066, 197px -279.6666666667px #0066ff, 14px 71.3333333333px #0077ff, -207px 53.3333333333px #00bbff;
    }
}
@-moz-keyframes bang {
    to {
        box-shadow: -141px -205.6666666667px #2fff00, -164px -359.6666666667px #ffae00, 131px -219.6666666667px #ff0015, 170px 35.3333333333px #00ffea, -131px -101.6666666667px #ff0015, -135px -294.6666666667px #00ffb3, 244px -398.6666666667px #00ffae, 193px -312.6666666667px #ff002f, -125px -402.6666666667px #00ccff, -93px -61.6666666667px #15ff00, -39px 77.3333333333px #7700ff, 156px -395.6666666667px #4dff00, -226px -232.6666666667px #ff4400, 100px -373.6666666667px #0099ff, 22px 41.3333333333px #0080ff, 248px -313.6666666667px #4dff00, -124px -345.6666666667px #ff00d5, 109px 39.3333333333px #006fff, -230px 55.3333333333px #00ff15, -17px -49.6666666667px #7300ff, 141px -221.6666666667px #ccff00, 183px -237.6666666667px #ff9500, -46px -233.6666666667px #77ff00, 163px 81.3333333333px #00f2ff, 154px -76.6666666667px #ea00ff, -28px -74.6666666667px #7300ff, -243px -395.6666666667px #ff2600, 84px -24.6666666667px #6aff00, 250px 32.3333333333px #77ff00, -115px 74.3333333333px #00ffbb, -74px -202.6666666667px #00d9ff, -67px -351.6666666667px #0015ff, 182px -88.6666666667px #00fff2, 176px 58.3333333333px #ff00d5, 123px -340.6666666667px #d500ff, -114px -188.6666666667px #aeff00, -209px -385.6666666667px #00ff77, 6px -167.6666666667px #6200ff, 122px 29.3333333333px #ff4d00, -138px 35.3333333333px #b300ff, 206px 23.3333333333px #00c8ff, -55px -320.6666666667px #9500ff, 121px -377.6666666667px #00ffb7, 168px -335.6666666667px #37ff00, 74px -207.6666666667px #ff005e, -3px -409.6666666667px #ff0d00, 183px -50.6666666667px #00ff5e, 60px -81.6666666667px #ff0066, 197px -279.6666666667px #0066ff, 14px 71.3333333333px #0077ff, -207px 53.3333333333px #00bbff;
    }
}
@-o-keyframes bang {
    to {
        box-shadow: -141px -205.6666666667px #2fff00, -164px -359.6666666667px #ffae00, 131px -219.6666666667px #ff0015, 170px 35.3333333333px #00ffea, -131px -101.6666666667px #ff0015, -135px -294.6666666667px #00ffb3, 244px -398.6666666667px #00ffae, 193px -312.6666666667px #ff002f, -125px -402.6666666667px #00ccff, -93px -61.6666666667px #15ff00, -39px 77.3333333333px #7700ff, 156px -395.6666666667px #4dff00, -226px -232.6666666667px #ff4400, 100px -373.6666666667px #0099ff, 22px 41.3333333333px #0080ff, 248px -313.6666666667px #4dff00, -124px -345.6666666667px #ff00d5, 109px 39.3333333333px #006fff, -230px 55.3333333333px #00ff15, -17px -49.6666666667px #7300ff, 141px -221.6666666667px #ccff00, 183px -237.6666666667px #ff9500, -46px -233.6666666667px #77ff00, 163px 81.3333333333px #00f2ff, 154px -76.6666666667px #ea00ff, -28px -74.6666666667px #7300ff, -243px -395.6666666667px #ff2600, 84px -24.6666666667px #6aff00, 250px 32.3333333333px #77ff00, -115px 74.3333333333px #00ffbb, -74px -202.6666666667px #00d9ff, -67px -351.6666666667px #0015ff, 182px -88.6666666667px #00fff2, 176px 58.3333333333px #ff00d5, 123px -340.6666666667px #d500ff, -114px -188.6666666667px #aeff00, -209px -385.6666666667px #00ff77, 6px -167.6666666667px #6200ff, 122px 29.3333333333px #ff4d00, -138px 35.3333333333px #b300ff, 206px 23.3333333333px #00c8ff, -55px -320.6666666667px #9500ff, 121px -377.6666666667px #00ffb7, 168px -335.6666666667px #37ff00, 74px -207.6666666667px #ff005e, -3px -409.6666666667px #ff0d00, 183px -50.6666666667px #00ff5e, 60px -81.6666666667px #ff0066, 197px -279.6666666667px #0066ff, 14px 71.3333333333px #0077ff, -207px 53.3333333333px #00bbff;
    }
}
@-ms-keyframes bang {
    to {
        box-shadow: -141px -205.6666666667px #2fff00, -164px -359.6666666667px #ffae00, 131px -219.6666666667px #ff0015, 170px 35.3333333333px #00ffea, -131px -101.6666666667px #ff0015, -135px -294.6666666667px #00ffb3, 244px -398.6666666667px #00ffae, 193px -312.6666666667px #ff002f, -125px -402.6666666667px #00ccff, -93px -61.6666666667px #15ff00, -39px 77.3333333333px #7700ff, 156px -395.6666666667px #4dff00, -226px -232.6666666667px #ff4400, 100px -373.6666666667px #0099ff, 22px 41.3333333333px #0080ff, 248px -313.6666666667px #4dff00, -124px -345.6666666667px #ff00d5, 109px 39.3333333333px #006fff, -230px 55.3333333333px #00ff15, -17px -49.6666666667px #7300ff, 141px -221.6666666667px #ccff00, 183px -237.6666666667px #ff9500, -46px -233.6666666667px #77ff00, 163px 81.3333333333px #00f2ff, 154px -76.6666666667px #ea00ff, -28px -74.6666666667px #7300ff, -243px -395.6666666667px #ff2600, 84px -24.6666666667px #6aff00, 250px 32.3333333333px #77ff00, -115px 74.3333333333px #00ffbb, -74px -202.6666666667px #00d9ff, -67px -351.6666666667px #0015ff, 182px -88.6666666667px #00fff2, 176px 58.3333333333px #ff00d5, 123px -340.6666666667px #d500ff, -114px -188.6666666667px #aeff00, -209px -385.6666666667px #00ff77, 6px -167.6666666667px #6200ff, 122px 29.3333333333px #ff4d00, -138px 35.3333333333px #b300ff, 206px 23.3333333333px #00c8ff, -55px -320.6666666667px #9500ff, 121px -377.6666666667px #00ffb7, 168px -335.6666666667px #37ff00, 74px -207.6666666667px #ff005e, -3px -409.6666666667px #ff0d00, 183px -50.6666666667px #00ff5e, 60px -81.6666666667px #ff0066, 197px -279.6666666667px #0066ff, 14px 71.3333333333px #0077ff, -207px 53.3333333333px #00bbff;
    }
}
@keyframes bang {
    to {
        box-shadow: -141px -205.6666666667px #2fff00, -164px -359.6666666667px #ffae00, 131px -219.6666666667px #ff0015, 170px 35.3333333333px #00ffea, -131px -101.6666666667px #ff0015, -135px -294.6666666667px #00ffb3, 244px -398.6666666667px #00ffae, 193px -312.6666666667px #ff002f, -125px -402.6666666667px #00ccff, -93px -61.6666666667px #15ff00, -39px 77.3333333333px #7700ff, 156px -395.6666666667px #4dff00, -226px -232.6666666667px #ff4400, 100px -373.6666666667px #0099ff, 22px 41.3333333333px #0080ff, 248px -313.6666666667px #4dff00, -124px -345.6666666667px #ff00d5, 109px 39.3333333333px #006fff, -230px 55.3333333333px #00ff15, -17px -49.6666666667px #7300ff, 141px -221.6666666667px #ccff00, 183px -237.6666666667px #ff9500, -46px -233.6666666667px #77ff00, 163px 81.3333333333px #00f2ff, 154px -76.6666666667px #ea00ff, -28px -74.6666666667px #7300ff, -243px -395.6666666667px #ff2600, 84px -24.6666666667px #6aff00, 250px 32.3333333333px #77ff00, -115px 74.3333333333px #00ffbb, -74px -202.6666666667px #00d9ff, -67px -351.6666666667px #0015ff, 182px -88.6666666667px #00fff2, 176px 58.3333333333px #ff00d5, 123px -340.6666666667px #d500ff, -114px -188.6666666667px #aeff00, -209px -385.6666666667px #00ff77, 6px -167.6666666667px #6200ff, 122px 29.3333333333px #ff4d00, -138px 35.3333333333px #b300ff, 206px 23.3333333333px #00c8ff, -55px -320.6666666667px #9500ff, 121px -377.6666666667px #00ffb7, 168px -335.6666666667px #37ff00, 74px -207.6666666667px #ff005e, -3px -409.6666666667px #ff0d00, 183px -50.6666666667px #00ff5e, 60px -81.6666666667px #ff0066, 197px -279.6666666667px #0066ff, 14px 71.3333333333px #0077ff, -207px 53.3333333333px #00bbff;
        opacity: 1; /* Maintain full opacity */
    }
}
@-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%;
    }
}