#firefly {
  width: 100%;
  z-index: 2;
}

.firefly.y-axis {
  font-size: 3px;
  position: absolute;
  top: 95%;
  left: 0;
  width: 100%;
  z-index: 2;
  transition: none;
  -webkit-transition: none;
}
.firefly .x-axis {
  position: absolute;
  top: 0;
  left: 10%;
  z-index: 2;
  transition: none;
  -webkit-transition: none;
}

.firefly .head {
  z-index: 2;
  border-radius: 50%;
  position: absolute;
  top: 0.25em;
  left: 50%;
  transform: translate(-50%,0);
  -webkit-transform: translate(-50%,0);
  width: 1em;
  height: 1em;
  background-color: #333;
}
  .firefly .head:before,
  .firefly .head:after {
    content: '';
    z-index: 2;
    /*border-radius: 50%;*/
    position: absolute;
    top: 0;
    left: 50%;
    height: 0.5em;
    width: .1em;
    transform-origin: 50% 0%;
    webkit-transform-origin: 50% 0%;
    background-color: #333;
  }
  .firefly .head:before {
    transform: translate(-100%,0) rotate(160deg);
    -webkit-transform: translate(-100%,0) rotate(160deg);
  }
  .firefly .head:after {
    transform: translate(100%,0) rotate(-160deg);
    -webkit-transform: translate(100%,0) rotate(-160deg);
  }

.firefly .abdomen {
  z-index: 3;
  border-radius: 50%;
  position: absolute;
  top: 1em;
  left: 50%;
  transform: translate(-50%,0);
  -webkit-transform: translate(-50%,0);
  width: 1.5em;
  height: 2em;
  background-color: #663;
}

.firefly .abdomen .glow {
  z-index: 4;
  border-radius: 50%;
  position: absolute;
  top: 65%;
  left: 50%;
  transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  width: 7em;
  height: 7em;
  background-color: rgba(200,170,20,0.9); /* For browsers that do not support gradients */
  background: -webkit-radial-gradient(rgba(200,170,20,0.9), rgba(200,170,20,0.3), rgba(0,0,0,0)); /* Safari 5.1 to 6.0 */
  background: -o-radial-gradient(rgba(200,170,20,0.9), rgba(200,170,20,0.3), rgba(0,0,0,0)); /* For Opera 11.6 to 12.0 */
  background: -moz-radial-gradient(rgba(200,170,20,0.9), rgba(200,170,20,0.3), rgba(0,0,0,0)); /* For Firefox 3.6 to 15 */
  background: radial-gradient(rgba(200,170,20,0.9), rgba(200,170,20,0.3), rgba(0,0,0,0)); /* Standard syntax */
  -webkit-animation: pulse 15s infinite; /* Safari 4+ */
  -moz-animation:    pulse 15s infinite; /* Fx 5+ */
  -o-animation:      pulse 15s infinite; /* Opera 12+ */
  animation:         pulse 15s infinite; /* IE 10+, Fx 29+ */
}

.firefly .wing {
  z-index: 3;
  border-radius: 50%;
  position: absolute;
  top: 1em;
  left: 50%;
  transform-origin: 50% 0%;
  -webkit-transform-origin: 50% 0%;
  width: 1.5em;
  height: 2.5em;
  background-color: rgba(200,200,200,0.2);
  transform: translateX(-50%) rotate(-30deg);
  -webkit-transform: translateX(-50%) rotate(-30deg);
}
.firefly .wing:nth-child(2) {
  transform: translateX(-50%) rotate(30deg);
  -webkit-transform: translateX(-50%) rotate(30deg);
}
  .firefly.flying .wing {
    -webkit-animation: flap-left 100ms infinite; /* Safari 4+ */
    -moz-animation:    flap-left 100ms infinite; /* Fx 5+ */
    -o-animation:      flap-left 100ms infinite; /* Opera 12+ */
    animation:         flap-left 100ms infinite; /* IE 10+, Fx 29+ */
  }
  .firefly.flying .wing:nth-child(2) {
    -webkit-animation: flap-right 100ms infinite; /* Safari 4+ */
    -moz-animation:    flap-right 100ms infinite; /* Fx 5+ */
    -o-animation:      flap-right 100ms infinite; /* Opera 12+ */
    animation:         flap-right 100ms infinite; /* IE 10+, Fx 29+ */
  }

@keyframes pulse {
  0%   { opacity: 0; }
  25%   { opacity: 0.4; }
  50% { opacity: 0.1; }
  90% { opacity: 1.0; }
  /*95% { opacity: 1; }*/
  100% { opacity: 0; }
}

@keyframes flap-left {
  0%   { transform: translateX(-50%) rotate(-30deg); -webkit-transform: translateX(-50%) rotate(-30deg); }
  50%   { transform: translateX(-50%) rotate(-100deg); -webkit-transform: translateX(-50%) rotate(-100deg); }
  100%   { transform: translateX(-50%) rotate(-30deg); -webkit-transform: translateX(-50%) rotate(-30deg); }
}
@keyframes flap-right {
  0%   { transform: translateX(-50%) rotate(30deg); -webkit-transform: translateX(-50%) rotate(30deg); }
  50%   { transform: translateX(-50%) rotate(100deg); -webkit-transform: translateX(-50%) rotate(100deg); }
  100%   { transform: translateX(-50%) rotate(30deg); -webkit-transform: translateX(-50%) rotate(30deg); }
}