.pyro>.before,
.pyro>.after {
    position: absolute;
    width: 5px;
    height: 5px;
    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: 108px -354.6666666667px #f2ff00, 155px -295.6666666667px #ff9500, -222px -240.6666666667px #ff9100, 218px -341.6666666667px #ffbb00, -145px -288.6666666667px #00ffd0, 174px -44.6666666667px #ffbf00, -113px -122.6666666667px #ff008c, 82px -415.6666666667px #ff6200, 237px 76.3333333333px #00fff7, -38px -118.6666666667px #00ff59, -41px -36.6666666667px #00a2ff, 123px -389.6666666667px #ff00b3, 44px -304.6666666667px #00ffdd, 140px -192.6666666667px #00ffc4, -101px -253.6666666667px #ff002f, -237px -239.6666666667px #00ffbb, -88px -107.6666666667px blue, -249px -260.6666666667px #55ff00, -145px 46.3333333333px #ff00e6, 193px -126.6666666667px #5500ff, 215px -250.6666666667px #6fff00, 213px -319.6666666667px #0040ff, 196px -118.6666666667px #0037ff, -246px -27.6666666667px #00ff4d, -54px -187.6666666667px #95ff00, 15px 42.3333333333px #e6ff00, -236px -383.6666666667px #0066ff, -38px -113.6666666667px #ff002b, -208px 82.3333333333px #3300ff, -49px -201.6666666667px #a600ff, -21px 35.3333333333px #8800ff, -205px -172.6666666667px #ae00ff, 55px -223.6666666667px #00ffea, 40px -122.6666666667px #6aff00, 106px -332.6666666667px blue, -89px -165.6666666667px #ff0095, -232px -71.6666666667px #5e00ff, -207px 34.3333333333px #ff001e, 175px -64.6666666667px #d900ff, 234px 79.3333333333px #ff002b, 113px -98.6666666667px #a200ff, 185px -202.6666666667px #ff0037, 213px -151.6666666667px #11ff00, -163px -38.6666666667px #ff002f, -100px -319.6666666667px #ff007b, 28px -412.6666666667px #ff9100, 227px -368.6666666667px #fff200, 55px -156.6666666667px #ff002b, 196px -414.6666666667px #00ffe6, -71px -120.6666666667px #fff700, -125px 74.3333333333px #d5ff00;
    }
}

@-moz-keyframes bang {
    to {
        box-shadow: 108px -354.6666666667px #f2ff00, 155px -295.6666666667px #ff9500, -222px -240.6666666667px #ff9100, 218px -341.6666666667px #ffbb00, -145px -288.6666666667px #00ffd0, 174px -44.6666666667px #ffbf00, -113px -122.6666666667px #ff008c, 82px -415.6666666667px #ff6200, 237px 76.3333333333px #00fff7, -38px -118.6666666667px #00ff59, -41px -36.6666666667px #00a2ff, 123px -389.6666666667px #ff00b3, 44px -304.6666666667px #00ffdd, 140px -192.6666666667px #00ffc4, -101px -253.6666666667px #ff002f, -237px -239.6666666667px #00ffbb, -88px -107.6666666667px blue, -249px -260.6666666667px #55ff00, -145px 46.3333333333px #ff00e6, 193px -126.6666666667px #5500ff, 215px -250.6666666667px #6fff00, 213px -319.6666666667px #0040ff, 196px -118.6666666667px #0037ff, -246px -27.6666666667px #00ff4d, -54px -187.6666666667px #95ff00, 15px 42.3333333333px #e6ff00, -236px -383.6666666667px #0066ff, -38px -113.6666666667px #ff002b, -208px 82.3333333333px #3300ff, -49px -201.6666666667px #a600ff, -21px 35.3333333333px #8800ff, -205px -172.6666666667px #ae00ff, 55px -223.6666666667px #00ffea, 40px -122.6666666667px #6aff00, 106px -332.6666666667px blue, -89px -165.6666666667px #ff0095, -232px -71.6666666667px #5e00ff, -207px 34.3333333333px #ff001e, 175px -64.6666666667px #d900ff, 234px 79.3333333333px #ff002b, 113px -98.6666666667px #a200ff, 185px -202.6666666667px #ff0037, 213px -151.6666666667px #11ff00, -163px -38.6666666667px #ff002f, -100px -319.6666666667px #ff007b, 28px -412.6666666667px #ff9100, 227px -368.6666666667px #fff200, 55px -156.6666666667px #ff002b, 196px -414.6666666667px #00ffe6, -71px -120.6666666667px #fff700, -125px 74.3333333333px #d5ff00;
    }
}

@-o-keyframes bang {
    to {
        box-shadow: 108px -354.6666666667px #f2ff00, 155px -295.6666666667px #ff9500, -222px -240.6666666667px #ff9100, 218px -341.6666666667px #ffbb00, -145px -288.6666666667px #00ffd0, 174px -44.6666666667px #ffbf00, -113px -122.6666666667px #ff008c, 82px -415.6666666667px #ff6200, 237px 76.3333333333px #00fff7, -38px -118.6666666667px #00ff59, -41px -36.6666666667px #00a2ff, 123px -389.6666666667px #ff00b3, 44px -304.6666666667px #00ffdd, 140px -192.6666666667px #00ffc4, -101px -253.6666666667px #ff002f, -237px -239.6666666667px #00ffbb, -88px -107.6666666667px blue, -249px -260.6666666667px #55ff00, -145px 46.3333333333px #ff00e6, 193px -126.6666666667px #5500ff, 215px -250.6666666667px #6fff00, 213px -319.6666666667px #0040ff, 196px -118.6666666667px #0037ff, -246px -27.6666666667px #00ff4d, -54px -187.6666666667px #95ff00, 15px 42.3333333333px #e6ff00, -236px -383.6666666667px #0066ff, -38px -113.6666666667px #ff002b, -208px 82.3333333333px #3300ff, -49px -201.6666666667px #a600ff, -21px 35.3333333333px #8800ff, -205px -172.6666666667px #ae00ff, 55px -223.6666666667px #00ffea, 40px -122.6666666667px #6aff00, 106px -332.6666666667px blue, -89px -165.6666666667px #ff0095, -232px -71.6666666667px #5e00ff, -207px 34.3333333333px #ff001e, 175px -64.6666666667px #d900ff, 234px 79.3333333333px #ff002b, 113px -98.6666666667px #a200ff, 185px -202.6666666667px #ff0037, 213px -151.6666666667px #11ff00, -163px -38.6666666667px #ff002f, -100px -319.6666666667px #ff007b, 28px -412.6666666667px #ff9100, 227px -368.6666666667px #fff200, 55px -156.6666666667px #ff002b, 196px -414.6666666667px #00ffe6, -71px -120.6666666667px #fff700, -125px 74.3333333333px #d5ff00;
    }
}

@-ms-keyframes bang {
    to {
        box-shadow: 108px -354.6666666667px #f2ff00, 155px -295.6666666667px #ff9500, -222px -240.6666666667px #ff9100, 218px -341.6666666667px #ffbb00, -145px -288.6666666667px #00ffd0, 174px -44.6666666667px #ffbf00, -113px -122.6666666667px #ff008c, 82px -415.6666666667px #ff6200, 237px 76.3333333333px #00fff7, -38px -118.6666666667px #00ff59, -41px -36.6666666667px #00a2ff, 123px -389.6666666667px #ff00b3, 44px -304.6666666667px #00ffdd, 140px -192.6666666667px #00ffc4, -101px -253.6666666667px #ff002f, -237px -239.6666666667px #00ffbb, -88px -107.6666666667px blue, -249px -260.6666666667px #55ff00, -145px 46.3333333333px #ff00e6, 193px -126.6666666667px #5500ff, 215px -250.6666666667px #6fff00, 213px -319.6666666667px #0040ff, 196px -118.6666666667px #0037ff, -246px -27.6666666667px #00ff4d, -54px -187.6666666667px #95ff00, 15px 42.3333333333px #e6ff00, -236px -383.6666666667px #0066ff, -38px -113.6666666667px #ff002b, -208px 82.3333333333px #3300ff, -49px -201.6666666667px #a600ff, -21px 35.3333333333px #8800ff, -205px -172.6666666667px #ae00ff, 55px -223.6666666667px #00ffea, 40px -122.6666666667px #6aff00, 106px -332.6666666667px blue, -89px -165.6666666667px #ff0095, -232px -71.6666666667px #5e00ff, -207px 34.3333333333px #ff001e, 175px -64.6666666667px #d900ff, 234px 79.3333333333px #ff002b, 113px -98.6666666667px #a200ff, 185px -202.6666666667px #ff0037, 213px -151.6666666667px #11ff00, -163px -38.6666666667px #ff002f, -100px -319.6666666667px #ff007b, 28px -412.6666666667px #ff9100, 227px -368.6666666667px #fff200, 55px -156.6666666667px #ff002b, 196px -414.6666666667px #00ffe6, -71px -120.6666666667px #fff700, -125px 74.3333333333px #d5ff00;
    }
}

@keyframes bang {
    to {
        box-shadow: 108px -354.6666666667px #f2ff00, 155px -295.6666666667px #ff9500, -222px -240.6666666667px #ff9100, 218px -341.6666666667px #ffbb00, -145px -288.6666666667px #00ffd0, 174px -44.6666666667px #ffbf00, -113px -122.6666666667px #ff008c, 82px -415.6666666667px #ff6200, 237px 76.3333333333px #00fff7, -38px -118.6666666667px #00ff59, -41px -36.6666666667px #00a2ff, 123px -389.6666666667px #ff00b3, 44px -304.6666666667px #00ffdd, 140px -192.6666666667px #00ffc4, -101px -253.6666666667px #ff002f, -237px -239.6666666667px #00ffbb, -88px -107.6666666667px blue, -249px -260.6666666667px #55ff00, -145px 46.3333333333px #ff00e6, 193px -126.6666666667px #5500ff, 215px -250.6666666667px #6fff00, 213px -319.6666666667px #0040ff, 196px -118.6666666667px #0037ff, -246px -27.6666666667px #00ff4d, -54px -187.6666666667px #95ff00, 15px 42.3333333333px #e6ff00, -236px -383.6666666667px #0066ff, -38px -113.6666666667px #ff002b, -208px 82.3333333333px #3300ff, -49px -201.6666666667px #a600ff, -21px 35.3333333333px #8800ff, -205px -172.6666666667px #ae00ff, 55px -223.6666666667px #00ffea, 40px -122.6666666667px #6aff00, 106px -332.6666666667px blue, -89px -165.6666666667px #ff0095, -232px -71.6666666667px #5e00ff, -207px 34.3333333333px #ff001e, 175px -64.6666666667px #d900ff, 234px 79.3333333333px #ff002b, 113px -98.6666666667px #a200ff, 185px -202.6666666667px #ff0037, 213px -151.6666666667px #11ff00, -163px -38.6666666667px #ff002f, -100px -319.6666666667px #ff007b, 28px -412.6666666667px #ff9100, 227px -368.6666666667px #fff200, 55px -156.6666666667px #ff002b, 196px -414.6666666667px #00ffe6, -71px -120.6666666667px #fff700, -125px 74.3333333333px #d5ff00;
    }
}

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