#gameContainer {
    max-width: 1000px;
    height: auto;
    position: relative;
    -moz-osx-font-smoothing: grayscale;
    font-Family: 'Titillium';
}

#gameContainer :focus {
    outline-color: transparent;
    outline-style: none;
}

#gameContainer .anleitung .text {
    padding-left: 0px;
}

#gameContainer canvas {
    padding-bottom: 20px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    float: none;
}

#gameContainer *::selection {
    background: transparent;
}

#gameContainer .preloader {
    background-image: url(../images/preloader.gif);
    z-index: 100000;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-position: center center;
    background-repeat: no-repeat;
}

#gameContainer .timeBar {
    right: 40px;
    z-index: 1000;
    position: absolute;
    width: 50px;
    background-color: #fff;
    top: 104px;
    display: none;
}

#gameContainer .timeBar .bar {
    width: 40px;
    height: 10px;
    margin-bottom: 5px;
    background-color: #d73a12;
    margin-left: 10px;
}

#gameContainer .timeBar .timeImg {
    position: absolute;
    transform: translate(0, -50%);
}

#gameContainer .timeBar .timeImg img {
    max-width: 100%;
    height: auto;
}

#gameContainer .timeBar .time25 {
    margin-top: 25px;
    background-color: #108800;
}

#gameContainer .timeBar .time24 {
    background-color: #108800;
}

#gameContainer .timeBar .time23 {
    background-color: #15870d;
}

#gameContainer .timeBar .time22 {
    background-color: #15870d;
}

#gameContainer .timeBar .time21 {
    background-color: #3aad51;
}

#gameContainer .timeBar .time20 {
    background-color: #3aad51;
}

#gameContainer .timeBar .time19 {
    background-color: #3aad51;
}

#gameContainer .timeBar .time18 {
    background-color: #6ed37e;
}

#gameContainer .timeBar .time17 {
    background-color: #6ed37e;
}

#gameContainer .timeBar .time16 {
    background-color: #98e8a4;
}

#gameContainer .timeBar .time15 {
    background-color: #98e8a4;
}

#gameContainer .timeBar .time14 {
    background-color: #98e8a4;
}

#gameContainer .timeBar .time13 {
    background-color: #98e8a4;
}

#gameContainer .timeBar .time12 {
    background-color: #c6fccd;
}

#gameContainer .timeBar .time11 {
    background-color: #c6fccd;
}

#gameContainer .timeBar .time10 {
    background-color: #c6fccd;
}

#gameContainer .timeBar .time9 {
    background-color: #c6fccd;
}

#gameContainer .timeBar .time8 {
    background-color: #f8cdca;
}

#gameContainer .timeBar .time7 {
    background-color: #f8cdca;
}

#gameContainer .timeBar .time6 {
    background-color: #d73e2e;
}

#gameContainer .timeBar .time5 {
    background-color: #d73e2e;
}

#gameContainer .timeBar .time4 {
    background-color: #d73e2e;
}

#gameContainer .timeBar .time3 {
    background-color: #a9210e;
}

#gameContainer .timeBar .time2 {
    background-color: #a9210e;
}

#gameContainer .timeBar .time1 {
    background-color: #a9210e;
}

#gameContainer .statusBar {
    margin-bottom: 10px;
    height: 45px;
    background-color: white;
    margin-left: auto;
    margin-right: auto;
    font-family: 'Titillium';
    font-size: 20px;
    font-weight: 700;
    padding-left: 10px;
    padding-right: 10px;
}

#gameContainer .statusBar img {
    height: 25px;
    width: auto;
    float: left;
}

#gameContainer .statusBar .punkte, #gameContainer .statusBar .level, #gameContainer .statusBar .pause {
    float: left;
    position: relative;
    width: 33%;
    padding-top: 10px;
}

#gameContainer .statusBar .punkte {
    text-align: center;
}

#gameContainer .statusBar .punkte img {
    margin-right: 5px;
}

#gameContainer .statusBar .punkte .content {
    margin-left: auto;
    width: 240px;
    margin-right: auto;
}

#gameContainer .statusBar .punkte .content .text {
    text-align: start;
    padding-left: 25px;
}

#gameContainer .statusBar .level .text {
    padding-left: 38px;
}

#gameContainer .statusBar .pause {
    text-align: end;
    cursor: pointer;
}

#gameContainer .statusBar .pause .playImg {
    display: none;
}

#gameContainer .statusBar .pause .content {
    width: 90px;
    text-align: end;
    float: right;
}

#gameContainer .statusBar .pause .text {
    padding-left: 0px;
}

#gameContainer .infoText {
    background-color: white;
    transform: translate(-50%, -50%);
    text-align: left;
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 10000;
    padding: 30px;
    font-size: 18px;
    font-weight: 700;
    width: 50%;
    line-height: 30px;
    box-shadow: 0px 0px 40px 0px rgba(0, 0, 0, 0.5);
}

#gameContainer .infoText image {
    margin-left: 30px;
    float: left;
}

#gameContainer .infoText .text {
    float: left;
    padding-left: 60px;
    max-width: 50%;
}

#gameContainer .infoText .text p{
    margin:0;
}

#punkteZahl {
    font-size: 14px;
    line-height: 17px;
}

#gameContainer #punkteZahl span {
    font-family: monospace;
    color: #d8d8d8;
    display: inline-block;
    border: 2px solid black;
    margin-right: 2px;
    background-color: black;
    font-size: 20px;
}

#gameContainer .infoText button {
    background-color: #d73a12;
    border: none;
    color: white;
    font-size: 18px;
    font-family: 'Titillium';
    font-weight: 700;
    padding: 8px 0 6px 0;
    width: 120px;
    cursor: pointer;
}

#gameContainer .infoText .buttons {
    margin-top: 20px;
    text-align: center;
}

#gameContainer .infoText .einButton {
    text-align: center;
}

#gameContainer .infoText .zweiButton .infobutton2 {
    width: 150px;
}

#gameContainer .infoText .zweiButton .infobutton3 {
    display: none
}

#gameContainer .anleitung .text {
    padding-left: 0px;
}

#gameContainer .anleitung #infoBild {
    max-height: 300px;
}

#gameContainer #backgroundImage {
    display: none;
    position: absolute;
    width: 100%;
    max-width: 1000px;
    height: auto;
}

#gameContainer #info {
    display: none;
    position: absolute;
    bottom: -50px;
    right: 0px;
}

#gameContainer #punkte {
    width: 150px;
    float: right;
}

#gameContainer #level {
    width: 150px;
    float: right;
}

#gameContainer #textDummy {
    position: absolute;
    height: 0px;
}

@media (max-width: 768px) {

    #gameContainer #punkteZahl span {
        font-family: monospace;
        color: #d8d8d8;
        display: inline-block;
        border: 1px solid black;
        margin-right: 0px;
        background-color: black;
        font-size: 13px;
    }

    img#infoBild {
        width: 30%;
    }

    #gameContainer .timeBar {
        right: 10px;
    }

    #gameContainer .statusBar .punkte .content {
        width: 170px;
    }

    #gameContainer .statusBar .pause .content {
        width: 60px;
    }

    #gameContainer .statusBar {
        font-size: 14px;
    }

    #gameContainer .statusBar img {
        height: 20px;
    }

    #gameContainer .infoText {
        font-size: 16px;
        line-height: 20px;
        width: 80%;
        font-weight: 500;
        padding: 10px 20px 23px 20px;
    }

}

@keyframes tada {
    from {
        transform: scale3d(1, 1, 1);
    }

    10%, 20% {
        transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
    }

    30%, 50%, 70%, 90% {
        transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
    }

    40%, 60%, 80% {
        transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
    }

    to {
        transform: scale3d(1, 1, 1);
    }
}

.shaking {
    animation-name: tada;
    animation-duration: 1s;
    animation-fill-mode: both;
    animation-iteration-count: 2;
}

@keyframes flipInY {
    from {
        transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
        animation-timing-function: ease-in;
        opacity: 0;
    }

    40% {
        transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
        animation-timing-function: ease-in;
    }

    60% {
        transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
        opacity: 1;
    }

    80% {
        transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
    }

    to {
        transform: perspective(400px);
    }
}

@keyframes bounceIn {
    from, 20%, 40%, 60%, 80%, to {
        animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    }

    0% {
        opacity: 0;
        transform: scale3d(.3, .3, .3);
    }

    20% {
        transform: scale3d(1.1, 1.1, 1.1);
    }

    40% {
        transform: scale3d(.9, .9, .9);
    }

    60% {
        opacity: 1;
        transform: scale3d(1.03, 1.03, 1.03);
    }

    80% {
        transform: scale3d(.97, .97, .97);
    }

    to {
        opacity: 1;
        transform: scale3d(1, 1, 1);
    }
}

@keyframes bounceInCenter {
    from, 20%, 40%, 60%, 80%, to {
        animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    }

    0% {
        opacity: 0;
        transform: scale3d(.3, .3, .3) translate(-50%, -50%);
    }

    20% {
        transform: scale3d(1.1, 1.1, 1.1) translate(-50%, -50%);
    }

    40% {
        transform: scale3d(.9, .9, .9) translate(-50%, -50%);
    }

    60% {
        opacity: 1;
        transform: scale3d(1.03, 1.03, 1.03) translate(-50%, -50%);
    }

    80% {
        transform: scale3d(.97, .97, .97) translate(-50%, -50%);
    }

    to {
        opacity: 1;
        transform: scale3d(1, 1, 1) translate(-50%, -50%);
    }
}

@keyframes bounceOutCenter {
    20% {
        transform: scale3d(.9, .9, .9) translate(-50%, -50%);
    }

    50%, 55% {
        opacity: 1;
        transform: scale3d(1.1, 1.1, 1.1) translate(-50%, -50%);
    }

    99% {
        opacity: 0;
        transform: scale3d(.3, .3, .3) translate(-50%, -50%);
    }
    to {
        opacity: 0;
        transform: scale3d(.3, .3, .3) translate(-5000px, -50%);
    }
}

.change span {
    -webkit-backface-visibility: visible !important;
    backface-visibility: visible !important;
    animation-name: bounceIn;
    animation-duration: 1s;
    animation-fill-mode: both;
    animation-iteration-count: 1;
}

.change span:nth-child(1) {
    animation-delay: 0.12s;
}

.change span:nth-child(2) {
    animation-delay: 0.14s;
}

.change span:nth-child(3) {
    animation-delay: 0.16s;
}

.change span:nth-child(4) {
    animation-delay: 0.18s;
}

.change span:nth-child(5) {
    animation-delay: 0.2s;
}

.infoText {
    -webkit-backface-visibility: visible !important;
    backface-visibility: visible !important;
    animation-name: bounceOutCenter;
    animation-duration: 1s;
    animation-fill-mode: both;
    animation-iteration-count: 1;
    transform-origin: 0% 0%;
}

.infoText.active {
    animation-name: bounceInCenter;
}

.anleitung #infoBild{
width: 470px;
height:270px;
}

@media (max-width: 768px) {
.anleitung #infoBild{
width: 235px;
height: 135px;
}
}