.pyro{z-index: 1;}
.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: 196px -89.6666666667px #00ff5e, -75px -318.6666666667px #ff5100, 9px -38.6666666667px #00c4ff, -51px -261.6666666667px #00e6ff, 90px -389.6666666667px #dd00ff, 16px -217.6666666667px #ff00fb, -148px -240.6666666667px darkorange, -26px -161.6666666667px #ff00b7, 62px 31.3333333333px #00ff3c, -30px -214.6666666667px #4400ff, -126px 61.3333333333px #00ff04, 21px -368.6666666667px #ff3300, 29px -183.6666666667px #6a00ff, -219px -166.6666666667px #b300ff, -118px -134.6666666667px #00fffb, -88px -310.6666666667px #ff0066, -70px -362.6666666667px #ff00e6, 9px -341.6666666667px #fff700, -27px -163.6666666667px #6a00ff, 240px -141.6666666667px #ff0077, -181px -47.6666666667px #00f2ff, 179px -19.6666666667px #33ff00, -246px 55.3333333333px #2bff00, -128px -237.6666666667px #ffb700, -97px -277.6666666667px #aa00ff, -206px -0.6666666667px #f2ff00, 6px -225.6666666667px #00ff66, -188px -329.6666666667px #ffee00, 158px -43.6666666667px #ff00ae, 38px 14.3333333333px #ff00a6, -206px -387.6666666667px #00c4ff, -46px 19.3333333333px #00fbff, 183px -82.6666666667px #00ff09, -196px -297.6666666667px #ff00b7, 90px -171.6666666667px #e600ff, -13px -214.6666666667px #ff4d00, 6px 44.3333333333px #00ff7b, -93px -219.6666666667px #ff008c, 8px 80.3333333333px #9100ff, -204px -388.6666666667px #ff7300, -13px -136.6666666667px #00ff62, -5px -230.6666666667px #ff00f7, 59px 30.3333333333px #bbff00, 132px -99.6666666667px #ff2f00, 171px -375.6666666667px #ffbf00, -27px -252.6666666667px #00ffaa, 37px -325.6666666667px #ff007b, 168px -304.6666666667px #00ff59, -125px -38.6666666667px #ff005e, -7px -370.6666666667px #00fff7, -249px -59.6666666667px #0022ff;
    }
  }
  @-moz-keyframes bang {
    to {
      box-shadow: 196px -89.6666666667px #00ff5e, -75px -318.6666666667px #ff5100, 9px -38.6666666667px #00c4ff, -51px -261.6666666667px #00e6ff, 90px -389.6666666667px #dd00ff, 16px -217.6666666667px #ff00fb, -148px -240.6666666667px darkorange, -26px -161.6666666667px #ff00b7, 62px 31.3333333333px #00ff3c, -30px -214.6666666667px #4400ff, -126px 61.3333333333px #00ff04, 21px -368.6666666667px #ff3300, 29px -183.6666666667px #6a00ff, -219px -166.6666666667px #b300ff, -118px -134.6666666667px #00fffb, -88px -310.6666666667px #ff0066, -70px -362.6666666667px #ff00e6, 9px -341.6666666667px #fff700, -27px -163.6666666667px #6a00ff, 240px -141.6666666667px #ff0077, -181px -47.6666666667px #00f2ff, 179px -19.6666666667px #33ff00, -246px 55.3333333333px #2bff00, -128px -237.6666666667px #ffb700, -97px -277.6666666667px #aa00ff, -206px -0.6666666667px #f2ff00, 6px -225.6666666667px #00ff66, -188px -329.6666666667px #ffee00, 158px -43.6666666667px #ff00ae, 38px 14.3333333333px #ff00a6, -206px -387.6666666667px #00c4ff, -46px 19.3333333333px #00fbff, 183px -82.6666666667px #00ff09, -196px -297.6666666667px #ff00b7, 90px -171.6666666667px #e600ff, -13px -214.6666666667px #ff4d00, 6px 44.3333333333px #00ff7b, -93px -219.6666666667px #ff008c, 8px 80.3333333333px #9100ff, -204px -388.6666666667px #ff7300, -13px -136.6666666667px #00ff62, -5px -230.6666666667px #ff00f7, 59px 30.3333333333px #bbff00, 132px -99.6666666667px #ff2f00, 171px -375.6666666667px #ffbf00, -27px -252.6666666667px #00ffaa, 37px -325.6666666667px #ff007b, 168px -304.6666666667px #00ff59, -125px -38.6666666667px #ff005e, -7px -370.6666666667px #00fff7, -249px -59.6666666667px #0022ff;
    }
  }
  @-o-keyframes bang {
    to {
      box-shadow: 196px -89.6666666667px #00ff5e, -75px -318.6666666667px #ff5100, 9px -38.6666666667px #00c4ff, -51px -261.6666666667px #00e6ff, 90px -389.6666666667px #dd00ff, 16px -217.6666666667px #ff00fb, -148px -240.6666666667px darkorange, -26px -161.6666666667px #ff00b7, 62px 31.3333333333px #00ff3c, -30px -214.6666666667px #4400ff, -126px 61.3333333333px #00ff04, 21px -368.6666666667px #ff3300, 29px -183.6666666667px #6a00ff, -219px -166.6666666667px #b300ff, -118px -134.6666666667px #00fffb, -88px -310.6666666667px #ff0066, -70px -362.6666666667px #ff00e6, 9px -341.6666666667px #fff700, -27px -163.6666666667px #6a00ff, 240px -141.6666666667px #ff0077, -181px -47.6666666667px #00f2ff, 179px -19.6666666667px #33ff00, -246px 55.3333333333px #2bff00, -128px -237.6666666667px #ffb700, -97px -277.6666666667px #aa00ff, -206px -0.6666666667px #f2ff00, 6px -225.6666666667px #00ff66, -188px -329.6666666667px #ffee00, 158px -43.6666666667px #ff00ae, 38px 14.3333333333px #ff00a6, -206px -387.6666666667px #00c4ff, -46px 19.3333333333px #00fbff, 183px -82.6666666667px #00ff09, -196px -297.6666666667px #ff00b7, 90px -171.6666666667px #e600ff, -13px -214.6666666667px #ff4d00, 6px 44.3333333333px #00ff7b, -93px -219.6666666667px #ff008c, 8px 80.3333333333px #9100ff, -204px -388.6666666667px #ff7300, -13px -136.6666666667px #00ff62, -5px -230.6666666667px #ff00f7, 59px 30.3333333333px #bbff00, 132px -99.6666666667px #ff2f00, 171px -375.6666666667px #ffbf00, -27px -252.6666666667px #00ffaa, 37px -325.6666666667px #ff007b, 168px -304.6666666667px #00ff59, -125px -38.6666666667px #ff005e, -7px -370.6666666667px #00fff7, -249px -59.6666666667px #0022ff;
    }
  }
  @-ms-keyframes bang {
    to {
      box-shadow: 196px -89.6666666667px #00ff5e, -75px -318.6666666667px #ff5100, 9px -38.6666666667px #00c4ff, -51px -261.6666666667px #00e6ff, 90px -389.6666666667px #dd00ff, 16px -217.6666666667px #ff00fb, -148px -240.6666666667px darkorange, -26px -161.6666666667px #ff00b7, 62px 31.3333333333px #00ff3c, -30px -214.6666666667px #4400ff, -126px 61.3333333333px #00ff04, 21px -368.6666666667px #ff3300, 29px -183.6666666667px #6a00ff, -219px -166.6666666667px #b300ff, -118px -134.6666666667px #00fffb, -88px -310.6666666667px #ff0066, -70px -362.6666666667px #ff00e6, 9px -341.6666666667px #fff700, -27px -163.6666666667px #6a00ff, 240px -141.6666666667px #ff0077, -181px -47.6666666667px #00f2ff, 179px -19.6666666667px #33ff00, -246px 55.3333333333px #2bff00, -128px -237.6666666667px #ffb700, -97px -277.6666666667px #aa00ff, -206px -0.6666666667px #f2ff00, 6px -225.6666666667px #00ff66, -188px -329.6666666667px #ffee00, 158px -43.6666666667px #ff00ae, 38px 14.3333333333px #ff00a6, -206px -387.6666666667px #00c4ff, -46px 19.3333333333px #00fbff, 183px -82.6666666667px #00ff09, -196px -297.6666666667px #ff00b7, 90px -171.6666666667px #e600ff, -13px -214.6666666667px #ff4d00, 6px 44.3333333333px #00ff7b, -93px -219.6666666667px #ff008c, 8px 80.3333333333px #9100ff, -204px -388.6666666667px #ff7300, -13px -136.6666666667px #00ff62, -5px -230.6666666667px #ff00f7, 59px 30.3333333333px #bbff00, 132px -99.6666666667px #ff2f00, 171px -375.6666666667px #ffbf00, -27px -252.6666666667px #00ffaa, 37px -325.6666666667px #ff007b, 168px -304.6666666667px #00ff59, -125px -38.6666666667px #ff005e, -7px -370.6666666667px #00fff7, -249px -59.6666666667px #0022ff;
    }
  }
  @keyframes bang {
    to {
      box-shadow: 196px -89.6666666667px #00ff5e, -75px -318.6666666667px #ff5100, 9px -38.6666666667px #00c4ff, -51px -261.6666666667px #00e6ff, 90px -389.6666666667px #dd00ff, 16px -217.6666666667px #ff00fb, -148px -240.6666666667px darkorange, -26px -161.6666666667px #ff00b7, 62px 31.3333333333px #00ff3c, -30px -214.6666666667px #4400ff, -126px 61.3333333333px #00ff04, 21px -368.6666666667px #ff3300, 29px -183.6666666667px #6a00ff, -219px -166.6666666667px #b300ff, -118px -134.6666666667px #00fffb, -88px -310.6666666667px #ff0066, -70px -362.6666666667px #ff00e6, 9px -341.6666666667px #fff700, -27px -163.6666666667px #6a00ff, 240px -141.6666666667px #ff0077, -181px -47.6666666667px #00f2ff, 179px -19.6666666667px #33ff00, -246px 55.3333333333px #2bff00, -128px -237.6666666667px #ffb700, -97px -277.6666666667px #aa00ff, -206px -0.6666666667px #f2ff00, 6px -225.6666666667px #00ff66, -188px -329.6666666667px #ffee00, 158px -43.6666666667px #ff00ae, 38px 14.3333333333px #ff00a6, -206px -387.6666666667px #00c4ff, -46px 19.3333333333px #00fbff, 183px -82.6666666667px #00ff09, -196px -297.6666666667px #ff00b7, 90px -171.6666666667px #e600ff, -13px -214.6666666667px #ff4d00, 6px 44.3333333333px #00ff7b, -93px -219.6666666667px #ff008c, 8px 80.3333333333px #9100ff, -204px -388.6666666667px #ff7300, -13px -136.6666666667px #00ff62, -5px -230.6666666667px #ff00f7, 59px 30.3333333333px #bbff00, 132px -99.6666666667px #ff2f00, 171px -375.6666666667px #ffbf00, -27px -252.6666666667px #00ffaa, 37px -325.6666666667px #ff007b, 168px -304.6666666667px #00ff59, -125px -38.6666666667px #ff005e, -7px -370.6666666667px #00fff7, -249px -59.6666666667px #0022ff;
    }
  }
  @-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%;
    }
  }