@import url('https://fonts.googleapis.com/css?family=Cousine');
@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed:700');
body {
    background-color: #000;
    padding: 0;
    margin: 0;
    overflow: hidden;

    text-transform: uppercase;

    cursor: url(img/cursor.png), auto;
}

div#main_canvas_container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.modal {
    display: none;
    position: fixed;
    z-index: 200;
    padding-top: 100px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: #000;
    background-color: rgba(0, 0, 0, 0.4);
}

.modal-content {
    background-color: #fefefe;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
    height: 80%
}

.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold
}

.close:hover,
.close:focus {
    color: #000;
    text-decoration: none;
}

#fps_counter_div {
    z-index: 200;
    position: absolute;
    right: 60px;
    top: 63px;
    font-size: 10px;
    line-height: 10px;
    display: none
}

#us-logo {
    z-index: 600;
    position: absolute;
    top: 10px;
    left: 20px;
    height: 70px;
    width: auto;
}

#life-countainer,
#life-countainer-wrapper {
    z-index: 200;
    position: absolute;
    top: 55px;
    right: 50px;
    width: 175px;
    height: 17px;
}
#life-result {
    z-index: 600;
    position: absolute;
    top: 55px;
    right: 50px;
}

#life-countainer-wrapper {
    display: block;
    overflow: hidden;
    background-image: url("res/lifecontainer-bg.png");
    background-repeat: no-repeat;
    background-position: -155px
}

#beer, .gameinstru {
    -webkit-animation: fade 1s linear forwards;
    animation: fade 1s linear forwards;
    animation-delay: 3s;
}

@keyframes fade {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}
@-webkit-keyframes fade {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}
.gameinstru {
    position: absolute;
    bottom: 35px;
}
.gameinstru p {
    color: #fff;
    font-size: 18px;
    -webkit-margin-before: 0;
    -webkit-margin-after: 0;
}
#beer {
    z-index: 200;
    position: absolute;
    top: calc(55px + 17px + 35px - 18px);
    right: 50px;
    width: 175px;
    height: 40px;
}
#beer p {
    color: #fff;
    font-size: 18px;
    -webkit-margin-before: 0;
    -webkit-margin-after: 0;
}

/*#drink-beer {
    height: calc(17px + 35px - 18px + 40px);
    
    position: absolute;
    
    top: calc( -1 * (17px + 35px - 18px));
    right: 175px;
}*/

#gameinstru1 {
    left: 30%;
    transform: translateX(-50%);
}
#gameinstru2 {
    left: 50%;
    transform: translateX(-50%);
}
#gameinstru3 {
    left: 70%;
    transform: translateX(-50%);
}
.gameinstru div {
    margin-bottom: 17px;
}
#gameinstrulist {
    z-index: 200;
    position: absolute;
    bottom: 0;
    margin: auto;
    width: 100%;
    height: 250px;
}
#gameinstruimg1 {
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    width: 50px;
    height: 50px;
    background-image: url(img/esc.gif);
}
#gameinstruimg2 {
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    width: 150px;
    height: 100px;
    background-image: url(img/wasd.gif);
}
#gameinstruimg3 {
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    width: 43px;
    height: 70px;
    background-image: url(img/movestill.png);
    animation: move 0.8s linear infinite;
}


#eartist {
    z-index: 200;

    position: absolute;

    left: calc(50% - 200px);
    bottom: 35px;
    width: 400px;
    color: #fff;
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 700;
}

#eartist-sentence, #eartist-img {
    z-index: 200;
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    text-align: center;
}
#eartist-sentence {
    bottom: 0;
}
#eartist-img {
    bottom: 38px;

    width: 55px;
    height: 55px;
    background-image: url(img/e.gif);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

#timer-wrapper {
    z-index: 200;
    position: absolute;
    top: 32px;

    left: calc(50% - 50px);
    width: 100px;

    color: #fff;
    font-family: 'Cousine', monospace!important;
    font-weight: 700;
    font-size: 18px;


}

#timer {
    z-index: 200;
    position: relative;
    top: 0
}

#score-counter-wrapper {
    z-index: 200;
    position: absolute;
    left: 50%;
    top: 65px;
    color: #fff;
    font-family: 'Cousine', monospace!important;
    font-weight: 700;
    font-size: 40px;
    letter-spacing: -2px
}

#score-counter {
    z-index: 200;
    position: relative;
    left: -95px;
    top: 0
}

#score-counter-img {
    z-index: 200;
    position: relative;
    left: 18px;
    top: -56px;
    width: 80%;
    height: 80%
}
#score-counter-img-big {
    z-index: 200;
    position: absolute;
    left: 49%;
    transform: translate(-50%, 0);
    top: 20px;
    width: calc(197px * 0.8);
    height: calc(126px * 0.8);
}

#us1, #us2, #us7  {
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 1000;
    background: #000;
    background-image: url("img/background.jpg");
    background-size: cover;
    background-repeat: no-repeat;
}
#us3, #us4 {
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 100;
    background: none;
}
#us1, #us2  {
    z-index: 1000;
}
#us7  {
    z-index: 500;
}
#us3 {
    z-index: 300;
    background-color: black;
    opacity: 0.8;
}
#us4 {
    z-index: 250;
    background-color: black;
    opacity: 0.8;
}

#bg {
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: black;
    opacity: 0.7;
    z-index: 1;
}
/*
#instrubox {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    
    z-index: 100;
}
*/

.instru {
    position: absolute;
    top: calc(50% - 70px);
    width: 150px;
    height: 100px;
}
.instru p {
    display: none;

    position: absolute;
    left: 0;
    right: 0;
    bottom: -50px;
}
#instru1 {
    left: calc(50% - 300px - 60px);
}
#instru2 {
    left: calc(50% - 150px - 40px);
}
#instru3 {
    right: calc(50% - 150px - 20px);
}
#instru4 {
    right: calc(50% - 300px - 40px);
}

.instruimg {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;

    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

#instruimg1 {
    width: 50px;
    height: 50px;
    background-image: url(img/escstill.png);
}

#instruimg2 {
    width: 150px;
    height: 100px;
    background-image: url(img/wasdstill.png);
    background-position: bottom;
}
#instruimg3 {
    width: 150px;
    height: 50px;
    background-image: url(img/spacestill.png);
}
#instruimg4 {
    width: 43px;
    height: 70px;
    background-image: url(img/movestill.png);
    background-position: left;
}

#instru1:hover #instruimg1 {
    background-image: url(img/esc.gif);
}
#instru1:hover #instru1text {
    display: block;
}
#instru2:hover #instruimg2 {
    background-image: url(img/wasd.gif);
}
#instru2:hover #instru2text {
    display: block;
}
#instru3:hover #instruimg3 {
    background-image: url(img/space.gif);
}
#instru3:hover #instru3text {
    display: block;
}
#instru4:hover #instruimg4 {
    background-image: url(img/click.gif);
    animation: move 0.8s linear infinite;
}
@keyframes move {
    0%, 100% {
        -ms-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg)
    }
    33.3333333% {
        -ms-transform: rotate(15deg);
        -moz-transform: rotate(15deg);
        -webkit-transform: rotate(15deg);
        -o-transform: rotate(15deg);
        transform: rotate(15deg)
    }
    66.6666666% {
        -ms-transform: rotate(-15deg);
        -moz-transform: rotate(-15deg);
        -webkit-transform: rotate(-15deg);
        -o-transform: rotate(-15deg);
        transform: rotate(-15deg)
    }
}

#instru4:hover #instru4text {
    display: block;
}
#playbutton {
    background-image: url(img/playwithus.png);
}
#playbutton:hover {
    background-image: url(img/playwithus1.png);
}
#resume {
    background-image: url(img/resumegame.png);
}
#resume:hover {
    background-image: url(img/resumegame_hover.png);
}
#again {
    background-image: url(img/do_it_again.png);
}
#again:hover {
    background-image: url(img/do_it_again_hover.png);
}
.buttons {
    position: absolute;
    bottom: 90px;
    left: 0;
    right: 0;
    margin: auto;

    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;

    width: calc(269px * 0.8);
    height: calc(69px * 0.8);

    z-index: 500;
}
#playtext, #replaytext {
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
}
.fontstylebottom {
    bottom: 35px;
    font-size: 18px;
}
#play img {
    position: absolute;
    left: 0;
    right: 0;
    height: 230px;
    top: calc(50% - (230px / 2) - 30px);
    margin: auto;
}

.ranking {
    position: absolute;
    font-size: 28px;
    line-height: 40px;
    top: 48%;
}

#number-ranking {
    left: 30%;
    transform: translate(-40%, -50%);
}

#name-ranking {
    left: 30%;
    transform: translate(40%, -50%);
}

#time-ranking {
    right: 30%;
    transform: translate(-40%, -50%);
}

.ranking ul {
    list-style: none;
}
#name-ranking {
    color: #fff;
    font-family: 'Roboto Condensed', sans-serif
}
#number-ranking li, #time-ranking li {
    color: #fff;
    font-family: 'Cousine', monospace;
}

.white {
    color: #fff;
    text-align: center;
    font-family: 'Roboto Condensed', sans-serif
}

.grey {
    color: #666;
    text-align: center;
    font-family: 'Roboto Condensed', sans-serif
}

#achos {
    position: absolute;
    width: 100%;
    height: 110%;
    top: 47%;
    left: 50%;
    transform: translate(-50%, -50%);

    background-color: #fff;

    -webkit-animation: video 1s linear forwards;
    animation: video 1s linear forwards;
    -webkit-animation-delay: 4s;
    animation-delay: 4s
}
@-webkit-keyframes video {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}
#achos video {
    width: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
}

#hackers {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-animation: fadeinout 4s linear forwards;
    animation: fadeinout 4s linear forwards;
    opacity: 0;
    -webkit-animation-delay: 6s;
    animation-delay: 6s
}

#sounders {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-animation: fadeinout 4s linear forwards;
    animation: fadeinout 4s linear forwards;
    opacity: 0;
    -webkit-animation-delay: 10s;
    animation-delay: 10s
}

#intructions {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-animation: fadeinout 5s linear forwards;
    animation: fadeinout 5s linear forwards;
    -webkit-animation-delay: 10s;
    animation-delay: 10s;
    opacity: 0
}

#loading {
    position: absolute;
    top: calc(40% - (135px / 2) + 40px - 50px + 135px);
    left: 50%;
    transform: translate(-50%, 0);
    opacity: 1
}

#pause .wrapper {
    position: absolute;
    top: 50%;
    transform: translate(0,-40%);
}
#pause img {
    position: relative;
    width: 120px;
    left: calc(50% - 60px);
}
#pause_center {
    position: relative;
    left: 50%;
    width: 40%;
    transform: translate(-50%,0);
}
#instrubox {
    position: relative;
    left: 50%;
    width: 50%;
    transform: translate(-50%,0);
    height: 150px;
}

#pause img, #pause_center, #instrubox {
    margin-bottom: 20px;
}

/*
.loading1 {
    -webkit-animation: fadeinout 5s linear forwards;
    animation: fadeinout 5s linear forwards;
    -webkit-animation-delay: 2s;
    animation-delay: 2s;
    opacity: 0
}

.loading2 {
    -webkit-animation: fadeinout 5s linear forwards;
    animation: fadeinout 5s linear forwards;
    -webkit-animation-delay: 4s;
    animation-delay: 4s;
    opacity: 0
}

.loading3 {
    -webkit-animation: fadeinout 5s linear forwards;
    animation: fadeinout 5s linear forwards;
    -webkit-animation-delay: 4s;
    animation-delay: 6s;
    opacity: 0
}
*/

@-webkit-keyframes fadeinout {
    50% {
        opacity: 1
    }
}

@keyframes fadeinout {
    50% {
        opacity: 1
    }
}

#zahnrad img {
    width: 97px;
    height: 94px;
}

#rotate1 {
    position: absolute;
    top: calc(40% - (94px / 2) - 30px - 50px);
    left: calc(50% - (97px / 2) - 20px - 20px);


    -webkit-animation: rotatingtwo 2s linear infinite;
    -moz-animation: rotatingtwo 2s linear infinite;
    -ms-animation: rotatingtwo 2s linear infinite;
    -o-animation: rotatingtwo 2s linear infinite;
    animation: rotatingtwo 2s linear infinite

}
#rotate2 {
    position: absolute;
    top: calc(40% - (94px / 2) + 30px - 50px);
    left: calc(50% - (97px / 2) + 40px - 20px);

    -webkit-animation: rotatingone 2s linear infinite;
    -moz-animation: rotatingone 2s linear infinite;
    -ms-animation: rotatingone 2s linear infinite;
    -o-animation: rotatingone 2s linear infinite;
    animation: rotatingone 2s linear infinite

}

@-webkit-keyframes rotatingone {
    from {
        -ms-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg)
    }
    to {
        -ms-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}

@keyframes rotatingone {
    from {
        -ms-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg)
    }
    to {
        -ms-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}
@-webkit-keyframes rotatingtwo {
    from {
        -ms-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg)
    }
    to {
        -ms-transform: rotate(-360deg);
        -moz-transform: rotate(-360deg);
        -webkit-transform: rotate(-360deg);
        -o-transform: rotate(-360deg);
        transform: rotate(360deg)
    }
}

@keyframes rotatingtwo {
    from {
        -ms-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg)
    }
    to {
        -ms-transform: rotate(-360deg);
        -moz-transform: rotate(-360deg);
        -webkit-transform: rotate(-360deg);
        -o-transform: rotate(-360deg);
        transform: rotate(-360deg)
    }
}

.invisible {
    display: none;
}
#fakegame {
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 0;
    background: none;
    background-image: url(img/game.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

#score-counter-img-big {
    transform: translate(-50%,-50%)!important;
    top: 44%!important;
    width: calc(197px * 1.2)!important;
    height: calc(126px * 1.2)!important;}

.ranking {
    display: none;
}

.close {
    color: #fff!important;
    font-family: 'Cousine', monospace!important;
}

.modal-content {
    background-color: rgba(0, 0, 0, 0.6)!important;
    border: 1.5px solid #fff!important;
    padding-top: 13px!important;
    padding-right: 18px!important;
    padding-left: 13px!important;
}

.modal {
    padding-top: 125px!important;
}