@font-face {
    font-family: "Cinzel";
    font-style: normal;
    font-weight: 400;
}

.info-board, #footer p, html,
body {
    margin: 0;
    padding: 0;
}

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

.click {
    -webkit-animation: flash 1.8s ease infinite;
    animation: flash 1.8s ease infinite;
    color: red;
    font-size: 30px;
    position: absolute;
    display: block;
    cursor: pointer;
    font-family: cursive;
    margin-top:102px;
    margin-left:40%;
}

*,
*: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: cadetblue;
    font-family: "Century Gothic", AppleGothic, "CenturyGothic", sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

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

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

@-webkit-keyframes reload {
    to {
        transform: rotate(6turn);
    }
}

@keyframes reload {
    to {
        transform: rotate(6turn);
    }
}

@-webkit-keyframes reload-trigger {
    0% {
        transform: rotate(-360deg);
    }

    20% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(0deg);
    }
}

@keyframes reload-trigger {
    0% {
        transform: rotate(-360deg);
    }

    20% {
        transform: rotate(0deg);
    }

    100% {
        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 blue, -5px 5px 0 blue, -3px 6px 0 blue, 2px 11px 0 blue;
    }

    30% {
        text-shadow: 5px 3px 0 blue, -4px 4px 0 blue, -2px 5px 0 blue, 1px 10px 0 blue;
    }

    60% {
        text-shadow: 6px 4px 0 blue, -5px 5px 0 blue, -3px 6px 0 blue, 2px 11px 0 blue;
    }

    90% {
        text-shadow: 5px 3px 0 blue, -4px 4px 0 blue, -2px 5px 0 blue, 1px 10px 0 blue;
    }

    100% {
        text-shadow: 6px 4px 0 blue, -5px 5px 0 blue, -3px 6px 0 blue, 2px 11px 0 blue;
    }
}

#canves {
    /*width: 1024px;
    height: 550px;*/
    min-width: 1371px;
    min-height: 687px;
    position: relative;
    overflow: hidden;
    background-color: #000000;
    cursor: crosshair;
    border-radius: 8px;
    font-family: "Cinzel", serif;
    transition: background-image 1.3s ease;
    background-repeat: no-repeat;
    background-size: 1024px 550px;
}

    #canves[data-wave="1"] {
        background-image: url('../img/bg-6.jpg');
        background-size:1371px 687px;
    }

    #canves[data-wave="2"] {
        background-image: url('../img/bg-7.jpg');
        background-size: 1371px 687px;
    }

    #canves[data-wave="3"] {
        background-image: url('../img/bg-8.jpg');
        background-size: 1371px 687px;
    }

    #canves[data-wave="4"] {
        background-image: url('../img/bg-4.jpg');
        background-size: 1371px 687px;
    }

    #canves[data-wave="5"] {
        background-image: url('../img/bg-25.jpg');
        background-size: 1371px 687px;
    }

    #canves[data-wave="6"] {
        background-image: url('../img/bg-1.jpg');
        background-size: 1371px 687px;
    }

    #canves[data-wave="7"] {
        background-image: url('../img/bg-2.jpg');
        background-size: 1371px 687px;
    }

    #canves[data-wave="8"] {
        background-image: url('../img/bg-3.png');
        background-size: 1371px 687px;
    }

    #canves[data-wave="9"] {
        background-image: url('../img/bg-9.jpg');
        background-size: 1371px 687px;
    }

    #canves[data-wave="10"] {
        background-image: url('../img/bg-11.jpg');
        background-size: 1371px 687px;
    }

    #canves[data-wave="11"] {
        background-image: url('../img/bg-19.jpg');
        background-size: 1371px 687px;
    }

    #canves[data-wave="12"] {
        background-image: url('../img/bg-12.png');
        background-size: 1371px 687px;
    }

    #canves[data-wave="13"] {
        background-image: url('../img/bg-23.jpg');
        background-size: 1371px 687px;
    }

    #canves[data-wave="14"] {
        background-image: url('../img/bg-14.jpg');
        background-size: 1371px 687px;
    }

    #canves[data-wave="15"] {
        background-image: url('../img/bg-15.jpg');
        background-size: 1371px 687px;
    }

    #canves[data-wave="16"] {
        background-image: url('../img/bg-16.jpg');
        background-size: 1371px 687px;
    }

    #canves[data-wave="17"] {
        background-image: url('../img/bg-17.jpg');
        background-size: 1371px 687px;
    }

    #canves[data-wave="18"] {
        background-image: url('../img/bg-18.jpg');
        background-size: 1371px 687px;
    }

    #canves[data-wave="19"] {
        background-image: url('../img/bg-19.jpg');
        background-size: 1371px 687px;
    }

    #canves[data-wave="20"] {
        background-image: url('../img/bg-20.jpg');
        background-size: 1371px 687px;
    }

    #canves[data-wave="21"] {
        background-image: url('../img/bg-21.jpg');
        background-size: 1371px 687px;
    }

    #canves[data-wave="22"] {
        background-image: url('../img/bg-22.jpg');
        background-size: 1371px 687px;
    }

    #canves[data-wave="23"] {
        background-image: url('../img/bg-13.jpg');
        background-size: 1371px 687px;
    }

    #canves[data-wave="24"] {
        background-image: url('../img/bg-24.jpg');
        background-size: 1371px 687px;
    }

    #canves[data-wave="25"] {
        background-image: url('../img/bg-25.jpg');
        background-size: 1371px 687px;
    }

    #canves[data-wave="26"] {
        background-image: url('../img/bg-1.jpg');
        background-size: 1371px 687px;
    }

    #canves[data-wave="27"] {
        background-image: url('../img/bg-2.jpg');
        background-size: 1371px 687px;
    }

    #canves[data-wave="28"] {
        background-image: url('../img/bg-3.png');
        background-size: 1371px 687px;
    }

    #canves[data-wave="29"] {
        background-image: url('../img/bg-4.jpg');
        background-size: 1371px 687px;
    }

    #canves[data-wave="30"] {
        background-image: url('../img/bg-5.jpg');
        background-size: 1371px 687px;
    }

    #canves[data-wave="31"] {
        background-image: url('../img/bg-6.jpg');
        background-size: 1371px 687px;
    }

    #canves[data-wave="32"] {
        background-image: url('../img/bg-7.jpg');
        background-size: 1371px 687px;
    }

    #canves[data-wave="33"] {
        background-image: url('../img/bg-8.jpg');
        background-size: 1371px 687px;
    }

    #canves[data-wave="34"] {
        background-image: url('../img/bg-9.jpg');
        background-size: 1371px 687px;
    }

    #canves[data-wave="35"] {
        background-image: url('../img/bg-21.jpg');
        background-size: 1371px 687px;
    }

    #canves[data-wave="36"] {
        background-image: url('../img/bg-11.jpg');
        background-size: 1371px 687px;
    }

    #canves[data-wave="37"] {
        background-image: url('../img/bg-12.png');
        background-size: 1371px 687px;
    }

    #canves[data-wave="38"] {
        background-image: url('../img/bg-13.jpg');
        background-size: 1371px 687px;
    }

    #canves[data-wave="39"] {
        background-image: url('../img/bg-14.jpg');
        background-size: 1371px 687px;
    }

    #canves[data-wave="40"] {
        background-image: url('../img/bg-15.jpg');
        background-size: 1371px 687px;
    }

    #canves[data-wave="41"] {
        background-image: url('../img/bg-16.jpg');
        background-size: 1371px 687px;
    }

    #canves[data-wave="42"] {
        background-image: url('../img/bg-17.jpg');
        background-size: 1371px 687px;
    }

    #canves[data-wave="43"] {
        background-image: url('../img/bg-18.jpg');
        background-size: 1371px 687px;
    }

    #canves[data-wave="44"] {
        background-image: url('../img/bg-19.jpg');
        background-size: 1371px 687px;
    }

    #canves[data-wave="45"] {
        background-image: url('../img/bg-20.jpg');
        background-size: 1371px 687px;
    }

    #canves[data-wave="46"] {
        background-image: url('../img/bg-21.jpg');
        background-size: 1371px 687px;
    }

    #canves[data-wave="47"] {
        background-image: url('../img/bg-22.jpg');
        background-size: 1371px 687px;
    }

    #canves[data-wave="48"] {
        background-image: url('../img/bg-23.jpg');
        background-size: 1371px 687px;
    }

    #canves[data-wave="49"] {
        background-image: url('../img/bg-11.jpg');
        background-size: 1371px 687px;
    }

    #canves[data-wave="50"] {
        background-image: url('../img/bg-25.jpg');
        background-size: 1371px 687px;
    }

    #canves .game-cover {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background-image: url('../img/zombie-buster.jpg');
        background-size: 1371px 687px;
        display: block;
        z-index: 100000;
    }

    #canves:after {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        content: "";
        pointer-events: none;
        display: block;
        background-image: url('../img/frame.png');
        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% {
        transform: rotate(0);
    }

    20%, 60% {
        transform: rotate(-25deg);
    }

    40%, 80% {
        transform: rotate(10deg);
    }
}

@keyframes octocat-wave {
    0%, 100% {
        transform: rotate(0);
    }

    20%, 60% {
        transform: rotate(-25deg);
    }

    40%, 80% {
        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;
    transition: fill 0.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: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    transition: opacity 0.3s ease;
    background-image: url('../img/zombie-buster.jpg');
    background-size: 1371px 687px;
}

.loading .loader {
    opacity: 1;
}

.loader .zombie-loader {
    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-image: url('../img/shootgun.png');
        background-position: 0 0;
        background-size: 114px;
        width: 114px;
        height: 39.5px;
        padding: 0 0 10px 51px;
        font-size: 32px;
        line-height: 41px;
        margin-top: 20px;
    }

    .info-board li.life {
        margin-top: 20px;
        margin-bottom: 9px;
    }

        .info-board li.life .heart-icon {
            background-image: url('../img/shootgun.png');
            background-position: 0 -47px;
            background-size: 114px;
            width: 24px;
            height: 23px;
            display: inline-block;
            margin-right: 15px;
            opacity: 1;
            transition: opacity 0.3s ease;
        }

            .info-board li.life .heart-icon.hide {
                -webkit-animation: flash 0.6s ease;
                animation: flash 0.6s ease;
                opacity: 0.2;
            }

            .info-board li.life .heart-icon:last-child {
                margin-right: 0;
            }

    .info-board li#mute-music {
        background-image: url('../img/shootgun.png');
        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-image: url('../img/shootgun.png');
        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-image: url('../img/shootgun.png');
    background-position: -60px -106px;
    background-size: 114px;
    width: 19px;
    height: 22px;
    cursor: pointer;
    position: absolute;
    top: 80px;
    right: 109px;
    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('../img/shootgun.png') no-repeat;
    background-position: 0 -134px;
    background-size: 114px;
    width: 70px;
    height: 74.5px;
    transition: transform 0.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;
    transform: rotate(360deg);
    margin-right: 45px;
}

.ammo[data-ammo="1"] {
    background-position: 0px -507px;
    transform: rotate(300deg);
    margin-right: 45px;
}

.ammo[data-ammo="2"] {
    background-position: 0px -432px;
    transform: rotate(240deg);
    margin-right: 45px;
}

.ammo[data-ammo="3"] {
    background-position: 0px -358px;
    transform: rotate(180deg);
    margin-right: 45px;
}

.ammo[data-ammo="4"] {
    background-position: 0 -283px;
    transform: rotate(120deg);
    margin-right: 45px;
}

.ammo[data-ammo="5"] {
    background-position: 0 -208px;
    transform: rotate(60deg);
    margin-right: 45px;
}

.ammo[data-ammo="6"] {
    background-position: 0 -134px;
    margin-right: 45px;
}

.ammo.reload {
    -webkit-animation: reload 0.6s ease;
    animation: reload 0.6s ease;
}

.reload-key {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    pointer-events: none;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 9px;
    color: #878787;
    transform: translateX(0);
    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);
    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;
    transform: translateX(100%);
    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);
    padding: 0 28px;
    color: #ffffff;
    opacity: 0;
    z-index: 1000000;
    display: block;
}

    .reload-hint.visible {
        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-image: url('../img/shootgun.png');
    background-size: 114px;
    background-position: bottom right;
    width: 35px;
    height: 35px;
    transition: transform 0.3s ease;
    margin-right: 45px;
}

.overlay-screen-levels,
.overlay-screen {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.8);
    visibility: hidden;
    transition: visibility 0.3s ease, opacity 0.3s ease;
    z-index: 100000;
    display: flex;
    justify-content: 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: gold;
    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;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    -webkit-animation: dripping 0.2s ease infinite;
    animation: dripping 0.2s ease infinite;
    cursor: default;
    display: none;
    font-family: cursive;
}

    .big-title:hover {
        -webkit-animation: flash 0.3s ease infinite, dripping 0.2s ease infinite;
        animation: flash 0.3s ease infinite, dripping 0.2s ease infinite;
    }

    .big-title div {
        text-transform: uppercase;
        font-size: 99px;
        letter-spacing: 20px;
        display: block;
        margin-top: -73px;
        margin-left: 31px;
        line-height: 2;
    }

.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;
    font-family: cursive;
    color: green;
}

.end-game .restart-hint, .game-over .restart-hint {
    display: block;
    margin-bottom: -56px;
}

.zombie {
    position: absolute;
    bottom: 74px;
    right: 0;
    transform: translateX(400px);
    -webkit-animation: walk linear infinite;
    animation: walk linear infinite;
}

    .zombie:before {
        content: "";
        display: block;
    }

    .zombie.killed {
        pointer-events: 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;
    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('../img/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('../img/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;
    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('../img/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('../img/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;
    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('../img/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('../img/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;
    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('../img/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('../img/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;
    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('../img/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('../img/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;
    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('../img/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('../img/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;
    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%;
    transform: translateX(-50%);
    border: 1px solid #ffffff;
    height: 5px;
    border-radius: 14px;
    opacity: 1;
    transition: opacity 0.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;
    transition: width 0.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;
}

@media screen and (max-width: 1100px) {
    #canves {
        min-width: 800px;
        min-height: 404px;
    }

    *#canves .game-cover {
        background-size: 800px 400px;
    }

    .loader {
        background-size: 800px 400px;
    }

    .zombie {
        bottom: -5px;
    }

    .strength-bar {
        top: 40px;
    }

    .click{
        margin-top:45px;
    }

    #canves[data-wave="1"] {
        background-size: 800px 400px;
    }

    #canves[data-wave="2"] {
        background-size: 800px 400px;
    }

    #canves[data-wave="3"] {
        background-size: 800px 400px;
    }

    #canves[data-wave="4"] {
        background-size: 800px 400px;
    }

    /*#canves[data-wave="5"] {
        background-size: 800px 400px;
    }

    #canves[data-wave="6"] {
        background-size: 800px 400px;
    }

    #canves[data-wave="7"] {
        background-size: 800px 400px;
    }

    #canves[data-wave="8"] {
        background-size: 800px 400px;
    }

    #canves[data-wave="9"] {
        background-size: 800px 400px;
    }

    #canves[data-wave="10"] {
        background-size: 800px 400px;
    }

    #canves[data-wave="11"] {
        background-size: 800px 400px;
    }

    #canves[data-wave="12"] {
        background-size: 800px 400px;
    }

    #canves[data-wave="13"] {
        background-size: 800px 400px;
    }

    #canves[data-wave="14"] {
        background-size: 800px 400px;
    }

    #canves[data-wave="15"] {
        background-size: 800px 400px;
    }

    #canves[data-wave="16"] {
        background-size: 800px 400px;
    }

    #canves[data-wave="17"] {
        background-size: 800px 400px;
    }

    #canves[data-wave="18"] {
        background-size: 800px 400px;
    }

    #canves[data-wave="19"] {
        background-size: 800px 400px;
    }

    #canves[data-wave="20"] {
        background-size: 800px 400px;
    }

    #canves[data-wave="21"] {
        background-size: 800px 400px;
    }

    #canves[data-wave="22"] {
        background-size: 800px 400px;
    }

    #canves[data-wave="23"] {
        background-size: 800px 400px;
    }

    #canves[data-wave="24"] {
        background-size: 800px 400px;
    }

    #canves[data-wave="25"] {
        background-size: 800px 400px;
    }

    #canves[data-wave="26"] {
        background-size: 800px 400px;
    }

    #canves[data-wave="27"] {
        background-size: 800px 400px;
    }

    #canves[data-wave="28"] {
        background-size: 800px 400px;
    }

    #canves[data-wave="29"] {
        background-size: 800px 400px;
    }

    #canves[data-wave="30"] {
        background-size: 800px 400px;
    }

    #canves[data-wave="31"] {
        background-size: 800px 400px;
    }

    #canves[data-wave="32"] {
        background-size: 800px 400px;
    }

    #canves[data-wave="33"] {
        background-size: 800px 400px;
    }

    #canves[data-wave="34"] {
        background-size: 800px 400px;
    }

    #canves[data-wave="35"] {
        background-size: 800px 400px;
    }

    #canves[data-wave="36"] {
        background-size: 800px 400px;
    }

    #canves[data-wave="37"] {
        background-size: 800px 400px;
    }

    #canves[data-wave="38"] {
        background-size: 800px 400px;
    }

    #canves[data-wave="39"] {
        background-size: 800px 400px;
    }

    #canves[data-wave="40"] {
        background-size: 800px 400px;
    }

    #canves[data-wave="41"] {
        background-size: 800px 400px;
    }

    #canves[data-wave="42"] {
        background-size: 800px 400px;
    }

    #canves[data-wave="43"] {
        background-size: 800px 400px;
    }

    #canves[data-wave="44"] {
        background-size: 800px 400px;
    }

    #canves[data-wave="45"] {
        background-size: 800px 400px;
    }

    #canves[data-wave="46"] {
        background-size: 800px 400px;
    }

    #canves[data-wave="47"] {
        background-size: 800px 400px;
    }

    #canves[data-wave="48"] {
        background-size: 800px 400px;
    }

    #canves[data-wave="49"] {
        background-size: 800px 400px;
    }

    #canves[data-wave="50"] {
        background-size: 800px 400px;
    }*/
}