@font-face {
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 400;
  src: local("Cinzel-Regular"), url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/250758/i2BwM1Eq2JyiNOY_VrkubOvvDin1pK8aKteLpeZ5c0A.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}
html,
body, #footer p, .info-board {
  margin: 0;
  padding: 0;
}

body {
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
          justify-content: center;
  -webkit-box-align: center;
          align-items: center;
}

*,
*:before,
*:after {
  box-sizing: border-box;
}

::-moz-selection {
  background: transparent;
}

::selection {
  background: transparent;
}

html,
body {
  width: 100%;
  height: 100%;
}

body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #000000;
  font-family: 'Century Gothic', AppleGothic, 'CenturyGothic', sans-serif;
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
          justify-content: center;
  -webkit-box-align: center;
          align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
          flex-direction: column;
}

@-webkit-keyframes walk {
  to {
    -webkit-transform: translateX(-1024px);
            transform: translateX(-1024px);
  }
}

@keyframes walk {
  to {
    -webkit-transform: translateX(-1024px);
            transform: translateX(-1024px);
  }
}
@-webkit-keyframes reload {
  to {
    -webkit-transform: rotate(6turn);
            transform: rotate(6turn);
  }
}
@keyframes reload {
  to {
    -webkit-transform: rotate(6turn);
            transform: rotate(6turn);
  }
}
@-webkit-keyframes reload-trigger {
  0% {
    -webkit-transform: rotate(-360deg);
            transform: rotate(-360deg);
  }
  20% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
}
@keyframes reload-trigger {
  0% {
    -webkit-transform: rotate(-360deg);
            transform: rotate(-360deg);
  }
  20% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
}
@-webkit-keyframes flash {
  0% {
    opacity: 1;
  }
  25% {
    opacity: 0.5;
  }
  50% {
    opacity: 0.8;
  }
  75% {
    opacity: 0.4;
  }
  100% {
    opacity: 0.2;
  }
}
@keyframes flash {
  0% {
    opacity: 1;
  }
  25% {
    opacity: 0.5;
  }
  50% {
    opacity: 0.8;
  }
  75% {
    opacity: 0.4;
  }
  100% {
    opacity: 0.2;
  }
}
@-webkit-keyframes dripping {
  0% {
    text-shadow: 6px 4px 0 red, -5px 5px 0 red, -3px 6px 0 red, 2px 11px 0 red;
  }
  30% {
    text-shadow: 5px 3px 0 red, -4px 4px 0 red, -2px 5px 0 red, 1px 10px 0 red;
  }
  60% {
    text-shadow: 6px 4px 0 red, -5px 5px 0 red, -3px 6px 0 red, 2px 11px 0 red;
  }
  90% {
    text-shadow: 5px 3px 0 red, -4px 4px 0 red, -2px 5px 0 red, 1px 10px 0 red;
  }
  100% {
    text-shadow: 6px 4px 0 red, -5px 5px 0 red, -3px 6px 0 red, 2px 11px 0 red;
  }
}
@keyframes dripping {
  0% {
    text-shadow: 6px 4px 0 red, -5px 5px 0 red, -3px 6px 0 red, 2px 11px 0 red;
  }
  30% {
    text-shadow: 5px 3px 0 red, -4px 4px 0 red, -2px 5px 0 red, 1px 10px 0 red;
  }
  60% {
    text-shadow: 6px 4px 0 red, -5px 5px 0 red, -3px 6px 0 red, 2px 11px 0 red;
  }
  90% {
    text-shadow: 5px 3px 0 red, -4px 4px 0 red, -2px 5px 0 red, 1px 10px 0 red;
  }
  100% {
    text-shadow: 6px 4px 0 red, -5px 5px 0 red, -3px 6px 0 red, 2px 11px 0 red;
  }
}
#canves {
  width: 100%;
  height: 100%;
  min-width: 100%;
  min-height: 100%;
  overflow: hidden;
  background-color: #000000;
  cursor: crosshair;
  border-radius: 8px;
  font-family: 'Cinzel', serif;
  -webkit-transition: background-image 1.3s ease;
  transition: background-image 1.3s ease;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
#canves[data-wave="1"] {
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/250758/bg-1.png");
}
#canves[data-wave="2"] {
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/250758/bg-2.png");
}
#canves[data-wave="3"] {
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/250758/bg-3.png");
}
#canves[data-wave="4"] {
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/250758/bg-4.png");
}
#canves .game-cover {
  background-color: black;
}
#canves:after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  content: '';
  pointer-events: none;
  display: block;
  background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/250758/frame.png") no-repeat;
  background-size: cover;
  border-radius: 8px;
  z-index: 1000000;
}

.github-corner:hover .octo-arm {
  -webkit-animation: octocat-wave 560ms ease-in-out;
          animation: octocat-wave 560ms ease-in-out;
}

@-webkit-keyframes octocat-wave {
  0%,
  100% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  20%,
  60% {
    -webkit-transform: rotate(-25deg);
            transform: rotate(-25deg);
  }
  40%,
  80% {
    -webkit-transform: rotate(10deg);
            transform: rotate(10deg);
  }
}

@keyframes octocat-wave {
  0%,
  100% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  20%,
  60% {
    -webkit-transform: rotate(-25deg);
            transform: rotate(-25deg);
  }
  40%,
  80% {
    -webkit-transform: rotate(10deg);
            transform: rotate(10deg);
  }
}
@media (max-width: 500px) {
  .github-corner:hover .octo-arm {
    -webkit-animation: none;
            animation: none;
  }

  .github-corner .octo-arm {
    -webkit-animation: octocat-wave 560ms ease-in-out;
            animation: octocat-wave 560ms ease-in-out;
  }
}
.github-corner {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 10000000;
}

#footer {
  font-size: 11px;
  color: #5a5a5a;
  margin-top: 20px;
  margin-bottom: 20px;
  line-height: 21px;
  text-align: center;
}
#footer:hover svg {
  fill: #ff0000;
}
@media screen and (max-width: 625px) {
  #footer {
    text-align: center;
  }
}
#footer a {
  color: currentColor;
  text-decoration: none;
}
#footer .credits {
  color: #353535;
}
#footer svg {
  fill: #646464;
  width: 15px;
  -webkit-transition: fill .3s ease;
  transition: fill .3s ease;
}
.get-code.generate-code #footer {
  margin-bottom: 164px;
}
@media screen and (max-width: 625px) {
  .get-code.generate-code #footer {
    margin-bottom: 208px;
  }
}

.loader {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 0;
  pointer-events: none;
  z-index: 1000000;
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
          justify-content: center;
  -webkit-box-align: center;
          align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
          flex-direction: column;
  -webkit-transition: opacity .3s ease;
  transition: opacity .3s ease;
  background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/250758/cover.jpg");
  background-size: 1024px 550px;
}
.loading .loader {
  opacity: 1;
}
.loader .zombie-loader {
  -webkit-transform: scale(0.5);
          transform: scale(0.5);
  margin-bottom: 20px;
}
.loader .zombie-loader:before {
  content: '';
  display: block;
  -webkit-animation-duration: 0.7s !important;
          animation-duration: 0.7s !important;
}
.loader span {
  -webkit-animation: flash 1.8s ease infinite;
          animation: flash 1.8s ease infinite;
  color: #ffffff;
  font-size: 9px;
  position: absolute;
  bottom: 62px;
  right: 72px;
}
.loader .loading-char {
  background: radial-gradient(ellipse at center, black 0%, rgba(246, 246, 246, 0) 50%);
  position: absolute;
  bottom: -20px;
  right: 30px;
}

.info-board {
  display: block;
  position: absolute;
  top: 35px;
  left: 35px;
  font-size: 25px;
  color: #ffffff;
  z-index: 10000;
  padding: 0;
}
.intro .info-board, .end-game .info-board, .game-over .info-board, .level-message .info-board {
  display: none;
}
.info-board li {
  list-style: none;
  margin-bottom: 16px;
}
.info-board li.killed-status {
  background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/250758/icons.png") no-repeat;
  background-position: 0 0;
  background-size: 114px;
  width: 114px;
  height: 39.5px;
  padding: 0 0 10px 51px;
  font-size: 32px;
  line-height: 41px;
}
.info-board li.life {
  margin-top: 20px;
  margin-bottom: 9px;
}
.info-board li.life .heart-icon {
  background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/250758/icons.png") no-repeat;
  background-position: 0 -47px;
  background-size: 114px;
  width: 24px;
  height: 23px;
  display: inline-block;
  margin-right: 15px;
  opacity: 1;
  -webkit-transition: opacity .3s ease;
  transition: opacity .3s ease;
}
.info-board li.life .heart-icon.hide {
  -webkit-animation: flash .6s ease;
          animation: flash .6s ease;
  opacity: 0.2;
}
.info-board li.life .heart-icon:last-child {
  margin-right: 0;
}
.info-board li#mute-music {
  background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/250758/icons.png") no-repeat;
  background-position: 0 -75px;
  background-size: 114px;
  width: 25px;
  height: 25px;
  cursor: pointer;
  display: inline-block;
  margin-right: 6px;
}
.info-board li#mute-music.muted {
  background-position: 0 -105px;
}
.info-board li#mute-sounds {
  background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/250758/icons.png") no-repeat;
  background-position: -30px -73px;
  background-size: 114px;
  width: 22px;
  height: 25px;
  cursor: pointer;
  display: inline-block;
  margin-right: 6px;
}
.info-board li#mute-sounds.muted {
  background-position: -30px -104px;
}

#pause-game {
  background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/250758/icons.png") no-repeat;
  background-position: -60px -106px;
  background-size: 114px;
  width: 19px;
  height: 22px;
  cursor: pointer;
  position: absolute;
  top: 35px;
  right: 35px;
  z-index: 100000;
}
#pause-game.paused {
  background-position: -60px -75px;
}
.intro #pause-game, .end-game #pause-game, .game-over #pause-game, .level-message #pause-game {
  display: none;
}
.game-paused #pause-game {
  z-index: 100000;
}

.ammo {
  background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/250758/icons.png") no-repeat;
  background-position: 0 -134px;
  background-size: 114px;
  width: 70px;
  height: 74.5px;
  -webkit-transition: -webkit-transform .3s ease;
  transition: -webkit-transform .3s ease;
  transition: transform .3s ease;
  transition: transform .3s ease, -webkit-transform .3s ease;
  position: absolute;
  bottom: 35px;
  right: 35px;
  z-index: 10000;
  display: block;
}
.intro .ammo, .end-game .ammo, .game-over .ammo, .level-message .ammo {
  display: none;
}
.ammo[data-ammo="0"] {
  background-position: 0px -581px;
  -webkit-transform: rotate(360deg);
          transform: rotate(360deg);
}
.ammo[data-ammo="1"] {
  background-position: 0px -507px;
  -webkit-transform: rotate(300deg);
          transform: rotate(300deg);
}
.ammo[data-ammo="2"] {
  background-position: 0px -432px;
  -webkit-transform: rotate(240deg);
          transform: rotate(240deg);
}
.ammo[data-ammo="3"] {
  background-position: 0px -358px;
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}
.ammo[data-ammo="4"] {
  background-position: 0 -283px;
  -webkit-transform: rotate(120deg);
          transform: rotate(120deg);
}
.ammo[data-ammo="5"] {
  background-position: 0 -208px;
  -webkit-transform: rotate(60deg);
          transform: rotate(60deg);
}
.ammo[data-ammo="6"] {
  background-position: 0 -134px;
}
.ammo.reload {
  -webkit-animation: reload .6s ease;
          animation: reload .6s ease;
}

.reload-key {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  pointer-events: none;
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
          justify-content: center;
  -webkit-box-align: center;
          align-items: center;
  font-size: 9px;
  color: #878787;
  -webkit-transform: translateX(0);
          transform: translateX(0);
  -webkit-transition: opacity 0.3s cubic-bezier(0.6, 1.14, 0.04, 1.02), -webkit-transform 0.3s cubic-bezier(0.6, 1.14, 0.04, 1.02);
  transition: opacity 0.3s cubic-bezier(0.6, 1.14, 0.04, 1.02), -webkit-transform 0.3s cubic-bezier(0.6, 1.14, 0.04, 1.02);
  transition: transform 0.3s cubic-bezier(0.6, 1.14, 0.04, 1.02), opacity 0.3s cubic-bezier(0.6, 1.14, 0.04, 1.02);
  transition: transform 0.3s cubic-bezier(0.6, 1.14, 0.04, 1.02), opacity 0.3s cubic-bezier(0.6, 1.14, 0.04, 1.02), -webkit-transform 0.3s cubic-bezier(0.6, 1.14, 0.04, 1.02);
  z-index: 100000;
}
[data-ammo="6"] .reload-key, .intro .reload-key, .end-game .reload-key, .game-over .reload-key, .level-message .reload-key {
  display: none;
}

.reload-hint {
  position: absolute;
  bottom: 55px;
  right: 25px;
  -webkit-transform: translateX(100%);
          transform: translateX(100%);
  -webkit-transition: opacity 0.3s cubic-bezier(0.6, 1.14, 0.04, 1.02), -webkit-transform 0.3s cubic-bezier(0.6, 1.14, 0.04, 1.02);
  transition: opacity 0.3s cubic-bezier(0.6, 1.14, 0.04, 1.02), -webkit-transform 0.3s cubic-bezier(0.6, 1.14, 0.04, 1.02);
  transition: transform 0.3s cubic-bezier(0.6, 1.14, 0.04, 1.02), opacity 0.3s cubic-bezier(0.6, 1.14, 0.04, 1.02);
  transition: transform 0.3s cubic-bezier(0.6, 1.14, 0.04, 1.02), opacity 0.3s cubic-bezier(0.6, 1.14, 0.04, 1.02), -webkit-transform 0.3s cubic-bezier(0.6, 1.14, 0.04, 1.02);
  padding: 0 28px;
  color: #ffffff;
  opacity: 0;
  z-index: 1000000;
  display: block;
}
.reload-hint.visible {
  -webkit-transform: translateX(0);
          transform: translateX(0);
  opacity: 1;
}
.reload-hint.visible .reload-trigger {
  -webkit-animation: reload-trigger 2s ease infinite;
          animation: reload-trigger 2s ease infinite;
}
.intro .reload-hint, .end-game .reload-hint, .game-over .reload-hint, .level-message .reload-hint {
  display: none;
}

.reload-trigger {
  cursor: pointer;
  background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/250758/icons.png") no-repeat;
  background-size: 114px;
  background-position: bottom right;
  width: 35px;
  height: 35px;
  -webkit-transition: -webkit-transform .3s ease;
  transition: -webkit-transform .3s ease;
  transition: transform .3s ease;
  transition: transform .3s ease, -webkit-transform .3s ease;
}

.overlay-screen-levels, .overlay-screen {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.8);
  visibility: hidden;
  -webkit-transition: visibility .3s ease, opacity .3s ease;
  transition: visibility .3s ease, opacity .3s ease;
  z-index: 100000;
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
          justify-content: center;
  -webkit-box-align: center;
          align-items: center;
  opacity: 0;
}
.end-game .overlay-screen-levels, .game-over .overlay-screen-levels, .level-message .overlay-screen-levels, .game-paused .overlay-screen-levels,
.end-game .overlay-screen, .game-over .overlay-screen, .level-message .overlay-screen, .game-paused .overlay-screen {
  visibility: visible;
  opacity: 1;
}

.big-title {
  top: 115px;
  color: #ffffff;
  text-align: center;
  font-size: 128px;
  margin: 0;
  text-shadow: 5px 3px 0 red, -4px 4px 0 red, -2px 5px 0 red, 1px 10px 0 red;
  -webkit-transition: opacity .3s ease, visibility .3s ease;
  transition: opacity .3s ease, visibility .3s ease;
  -webkit-animation: dripping .2s ease infinite;
          animation: dripping .2s ease infinite;
  cursor: default;
  display: none;
}
.big-title:hover {
  -webkit-animation: flash .3s ease infinite, dripping .2s ease infinite;
          animation: flash .3s ease infinite, dripping .2s ease infinite;
}
.big-title div {
  text-transform: uppercase;
  font-size: 99px;
  letter-spacing: 20px;
  display: block;
  margin-top: -73px;
  margin-left: 31px;
}
.game-over .big-title.game-over-title {
  display: block;
}
.big-title.game-over-title span {
  margin-left: 18px;
}
.end-game .big-title.end-game-title {
  display: block;
}
.big-title.end-game-title span {
  margin-left: 19px;
}
.game-paused .big-title.game-pause-title {
  display: block;
}
.level-message .big-title.level-title {
  display: block;
}

.restart-hint {
  -webkit-animation: flash 1.8s ease infinite;
          animation: flash 1.8s ease infinite;
  color: #838383;
  font-size: 23px;
  position: absolute;
  bottom: 109px;
  display: none;
  cursor: pointer;
}
.end-game .restart-hint, .game-over .restart-hint {
  display: block;
}

.zombie {
  position: absolute;
  bottom: 74px;
  right: 0;
  -webkit-transform: translateX(400px);
          transform: translateX(400px);
  -webkit-animation: walk linear infinite;
          animation: walk linear infinite;
}
.zombie:before {
  content: '';
  display: block;
}
.zombie.killed {
  pointer-events: none;
  -webkit-transition: none;
  transition: none;
  -webkit-animation-play-state: paused;
          animation-play-state: paused;
}
.zombie.killed:before {
  pointer-events: none;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}
.game-paused .zombie {
  pointer-events: none;
  -webkit-transition: none;
  transition: none;
  -webkit-animation-play-state: paused;
          animation-play-state: paused;
}
.game-paused .zombie:before {
  pointer-events: none;
  -webkit-animation-play-state: paused;
          animation-play-state: paused;
}

.zombie-1:before {
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/250758/zombie-1.png");
  background-repeat: no-repeat;
  -webkit-animation: zombie-1 steps(16);
          animation: zombie-1 steps(16);
  -webkit-animation-duration: 0.6s;
          animation-duration: 0.6s;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-direction: normal;
          animation-direction: normal;
  width: 194px;
  height: 255px;
  background-position: 0 top;
}
@-webkit-keyframes zombie-1 {
  to {
    background-position: 0 -4080px;
  }
}
@keyframes zombie-1 {
  to {
    background-position: 0 -4080px;
  }
}
.zombie-1.killed:before {
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/250758/zombie-1-death.png");
  background-repeat: no-repeat;
  -webkit-animation: zombie-1-death steps(20);
          animation: zombie-1-death steps(20);
  -webkit-animation-duration: 0.6s;
          animation-duration: 0.6s;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-direction: normal;
          animation-direction: normal;
  width: 340px;
  height: 261px;
  background-position: 0 top;
  -webkit-transform: translate(158px, 22px);
          transform: translate(158px, 22px);
}
@-webkit-keyframes zombie-1-death {
  to {
    background-position: 0 -5220px;
  }
}
@keyframes zombie-1-death {
  to {
    background-position: 0 -5220px;
  }
}
.zombie-2:before {
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/250758/zombie-2.png");
  background-repeat: no-repeat;
  -webkit-animation: zombie-2 steps(16);
          animation: zombie-2 steps(16);
  -webkit-animation-duration: 0.6s;
          animation-duration: 0.6s;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-direction: normal;
          animation-direction: normal;
  width: 211px;
  height: 256px;
  background-position: 0 top;
}
@-webkit-keyframes zombie-2 {
  to {
    background-position: 0 -4096px;
  }
}
@keyframes zombie-2 {
  to {
    background-position: 0 -4096px;
  }
}
.zombie-2.killed:before {
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/250758/zombie-2-death.png");
  background-repeat: no-repeat;
  -webkit-animation: zombie-2-death steps(20);
          animation: zombie-2-death steps(20);
  -webkit-animation-duration: 0.6s;
          animation-duration: 0.6s;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-direction: normal;
          animation-direction: normal;
  width: 347px;
  height: 270px;
  background-position: 0 top;
  -webkit-transform: translate(159px, 31px);
          transform: translate(159px, 31px);
}
@-webkit-keyframes zombie-2-death {
  to {
    background-position: 0 -5400px;
  }
}
@keyframes zombie-2-death {
  to {
    background-position: 0 -5400px;
  }
}
.zombie-3:before {
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/250758/zombie-3.png");
  background-repeat: no-repeat;
  -webkit-animation: zombie-3 steps(16);
          animation: zombie-3 steps(16);
  -webkit-animation-duration: 0.6s;
          animation-duration: 0.6s;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-direction: normal;
          animation-direction: normal;
  width: 189px;
  height: 234px;
  background-position: 0 top;
}
@-webkit-keyframes zombie-3 {
  to {
    background-position: 0 -3744px;
  }
}
@keyframes zombie-3 {
  to {
    background-position: 0 -3744px;
  }
}
.zombie-3.killed:before {
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/250758/zombie-3-death.png");
  background-repeat: no-repeat;
  -webkit-animation: zombie-3-death steps(20);
          animation: zombie-3-death steps(20);
  -webkit-animation-duration: 0.6s;
          animation-duration: 0.6s;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-direction: normal;
          animation-direction: normal;
  width: 334px;
  height: 256px;
  background-position: 0 top;
  -webkit-transform: translate(156px, 25px);
          transform: translate(156px, 25px);
}
@-webkit-keyframes zombie-3-death {
  to {
    background-position: 0 -5120px;
  }
}
@keyframes zombie-3-death {
  to {
    background-position: 0 -5120px;
  }
}
.zombie-4:before {
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/250758/zombie-4.png");
  background-repeat: no-repeat;
  -webkit-animation: zombie-4 steps(16);
          animation: zombie-4 steps(16);
  -webkit-animation-duration: 0.6s;
          animation-duration: 0.6s;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-direction: normal;
          animation-direction: normal;
  width: 386px;
  height: 375px;
  background-position: 0 top;
}
@-webkit-keyframes zombie-4 {
  to {
    background-position: 0 -6000px;
  }
}
@keyframes zombie-4 {
  to {
    background-position: 0 -6000px;
  }
}
.zombie-4.killed:before {
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/250758/zombie-4-death.png");
  background-repeat: no-repeat;
  -webkit-animation: zombie-4-death steps(16);
          animation: zombie-4-death steps(16);
  -webkit-animation-duration: 0.6s;
          animation-duration: 0.6s;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-direction: normal;
          animation-direction: normal;
  width: 497px;
  height: 401px;
  background-position: 0 top;
  -webkit-transform: translate(65px, 45px);
          transform: translate(65px, 45px);
}
@-webkit-keyframes zombie-4-death {
  to {
    background-position: 0 -6416px;
  }
}
@keyframes zombie-4-death {
  to {
    background-position: 0 -6416px;
  }
}
.zombie-5:before {
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/250758/zombie-5.png");
  background-repeat: no-repeat;
  -webkit-animation: zombie-5 steps(16);
          animation: zombie-5 steps(16);
  -webkit-animation-duration: 0.6s;
          animation-duration: 0.6s;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-direction: normal;
          animation-direction: normal;
  width: 386px;
  height: 376px;
  background-position: 0 top;
}
@-webkit-keyframes zombie-5 {
  to {
    background-position: 0 -6016px;
  }
}
@keyframes zombie-5 {
  to {
    background-position: 0 -6016px;
  }
}
.zombie-5.killed:before {
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/250758/zombie-5-death.png");
  background-repeat: no-repeat;
  -webkit-animation: zombie-5-death steps(16);
          animation: zombie-5-death steps(16);
  -webkit-animation-duration: 0.6s;
          animation-duration: 0.6s;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-direction: normal;
          animation-direction: normal;
  width: 488px;
  height: 390px;
  background-position: 0 top;
  -webkit-transform: translate(70px, 37px);
          transform: translate(70px, 37px);
}
@-webkit-keyframes zombie-5-death {
  to {
    background-position: 0 -6240px;
  }
}
@keyframes zombie-5-death {
  to {
    background-position: 0 -6240px;
  }
}
.zombie-6:before {
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/250758/zombie-6.png");
  background-repeat: no-repeat;
  -webkit-animation: zombie-6 steps(16);
          animation: zombie-6 steps(16);
  -webkit-animation-duration: 0.6s;
          animation-duration: 0.6s;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-direction: normal;
          animation-direction: normal;
  width: 386px;
  height: 404px;
  background-position: 0 top;
}
@-webkit-keyframes zombie-6 {
  to {
    background-position: 0 -6464px;
  }
}
@keyframes zombie-6 {
  to {
    background-position: 0 -6464px;
  }
}
.zombie-6.killed:before {
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/250758/zombie-6-death.png");
  background-repeat: no-repeat;
  -webkit-animation: zombie-6-death steps(16);
          animation: zombie-6-death steps(16);
  -webkit-animation-duration: 0.6s;
          animation-duration: 0.6s;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-direction: normal;
          animation-direction: normal;
  width: 510px;
  height: 419px;
  background-position: 0 top;
  -webkit-transform: translate(75px, 44px);
          transform: translate(75px, 44px);
}
@-webkit-keyframes zombie-6-death {
  to {
    background-position: 0 -6704px;
  }
}
@keyframes zombie-6-death {
  to {
    background-position: 0 -6704px;
  }
}
.strength-bar {
  position: absolute;
  top: -15px;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  border: 1px solid #ffffff;
  height: 5px;
  border-radius: 14px;
  opacity: 1;
  -webkit-transition: opacity .3s ease;
  transition: opacity .3s ease;
}
.strength-bar.hide {
  opacity: 0;
}
.zombie-1 .strength-bar {
  width: 15px;
}
.zombie-2 .strength-bar {
  width: 30px;
}
.zombie-3 .strength-bar {
  width: 45px;
}
.zombie-4 .strength-bar {
  width: 60px;
}
.zombie-5 .strength-bar {
  width: 75px;
}
.zombie-6 .strength-bar {
  width: 90px;
}
.strength-bar:after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  content: '';
  background: red;
  -webkit-transition: width .3s ease;
  transition: width .3s ease;
  display: block;
  width: 0;
}
.zombie-1[data-strength="0"] .strength-bar:after {
  width: 0;
}
.zombie-1[data-strength="1"] .strength-bar:after {
  width: 100%;
}
.zombie-2[data-strength="0"] .strength-bar:after {
  width: 0;
}
.zombie-2[data-strength="1"] .strength-bar:after {
  width: 50%;
}
.zombie-2[data-strength="2"] .strength-bar:after {
  width: 100%;
}
.zombie-3[data-strength="0"] .strength-bar:after {
  width: 0;
}
.zombie-3[data-strength="1"] .strength-bar:after {
  width: 33%;
}
.zombie-3[data-strength="2"] .strength-bar:after {
  width: 66%;
}
.zombie-3[data-strength="3"] .strength-bar:after {
  width: 100%;
}
.zombie-4[data-strength="0"] .strength-bar:after {
  width: 0;
}
.zombie-4[data-strength="1"] .strength-bar:after {
  width: 25%;
}
.zombie-4[data-strength="2"] .strength-bar:after {
  width: 50%;
}
.zombie-4[data-strength="3"] .strength-bar:after {
  width: 75%;
}
.zombie-4[data-strength="4"] .strength-bar:after {
  width: 100%;
}
.zombie-5[data-strength="0"] .strength-bar:after {
  width: 0;
}
.zombie-5[data-strength="1"] .strength-bar:after {
  width: 20%;
}
.zombie-5[data-strength="2"] .strength-bar:after {
  width: 40%;
}
.zombie-5[data-strength="3"] .strength-bar:after {
  width: 60%;
}
.zombie-5[data-strength="4"] .strength-bar:after {
  width: 80%;
}
.zombie-5[data-strength="5"] .strength-bar:after {
  width: 100%;
}
.zombie-6[data-strength="0"] .strength-bar:after {
  width: 0;
}
.zombie-6[data-strength="1"] .strength-bar:after {
  width: 25%;
}
.zombie-6[data-strength="2"] .strength-bar:after {
  width: 40%;
}
.zombie-6[data-strength="3"] .strength-bar:after {
  width: 55%;
}
.zombie-6[data-strength="4"] .strength-bar:after {
  width: 70%;
}
.zombie-6[data-strength="5"] .strength-bar:after {
  width: 85%;
}
.zombie-6[data-strength="6"] .strength-bar:after {
  width: 100%;
}

.walk-speed-1 {
  -webkit-animation-duration: 11s;
          animation-duration: 11s;
}
.walk-speed-1:before {
  -webkit-animation-duration: 0.5s;
          animation-duration: 0.5s;
}

.walk-speed-2 {
  -webkit-animation-duration: 12s;
          animation-duration: 12s;
}
.walk-speed-2:before {
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
}

.walk-speed-3 {
  -webkit-animation-duration: 13s;
          animation-duration: 13s;
}
.walk-speed-3:before {
  -webkit-animation-duration: 1.5s;
          animation-duration: 1.5s;
}

.walk-speed-4 {
  -webkit-animation-duration: 14s;
          animation-duration: 14s;
}
.walk-speed-4:before {
  -webkit-animation-duration: 2s;
          animation-duration: 2s;
}

.walk-speed-5 {
  -webkit-animation-duration: 15s;
          animation-duration: 15s;
}
.walk-speed-5:before {
  -webkit-animation-duration: 2.5s;
          animation-duration: 2.5s;
}

.walk-speed-6 {
  -webkit-animation-duration: 16s;
          animation-duration: 16s;
}
.walk-speed-6:before {
  -webkit-animation-duration: 3s;
          animation-duration: 3s;
}

.walk-delay-1 {
  -webkit-animation-delay: 0.6666666667s;
          animation-delay: 0.6666666667s;
}

.walk-delay-2 {
  -webkit-animation-delay: 1.3333333333s;
          animation-delay: 1.3333333333s;
}

.walk-delay-3 {
  -webkit-animation-delay: 2s;
          animation-delay: 2s;
}

.walk-delay-4 {
  -webkit-animation-delay: 2.6666666667s;
          animation-delay: 2.6666666667s;
}

.walk-delay-5 {
  -webkit-animation-delay: 3.3333333333s;
          animation-delay: 3.3333333333s;
}

.walk-delay-6 {
  -webkit-animation-delay: 4s;
          animation-delay: 4s;
}