@font-face {
    font-family: 'DinPro';
    src: url('../fonts/2EAE61_0_0.eot');
    src: url('../fonts/2EAE61_0_0.eot?#iefix') format('embedded-opentype'),
    url('../fonts/2EAE61_0_0.woff2') format('woff2'),
    url('../fonts/2EAE61_0_0.woff') format('woff'),
    url('../fonts/2EAE61_0_0.ttf') format('truetype');
}

@font-face {
    font-family: 'DinProBold';
    src: url('../fonts/din-bold.eot');
    src: url('../fonts/din-bold.eot?#iefix') format('embedded-opentype'),
    url('../fonts/din-bold.woff2') format('woff2'),
    url('../fonts/din-bold.woff') format('woff'),
    url('../fonts/din-bold.ttf') format('truetype');
}

html,
body {
    overflow: hidden !important;
    height: 1024px !important;
    width: 1366px !important;
}

body {
    font-family: 'DinPro', "Lucida Grande", sans-serif !important;
    background: #616161;
    padding: 0;
    margin: 0;
    overflow: hidden !important;
}

.wrapper {
    width: 1366px;
    height: 1024px;
    position: relative;
}

#logosalinen {
    position: absolute;
    bottom: 74px;
    left: 6%;
    z-index: 100;
    width: 10%;
    height: auto;
}

canvas {
    width: 1174px !important;
    height: 1174px !important;
    position: absolute;
    top: 439px;
    left: calc(50% - 587px);
    border-radius: 50%;
}

h3 {
    margin: 0 !important;
    color: #ffffff;
}

#titleheader h3 b {
    color: white;
}

.modal-header h3 {
    margin: 30px !important;
}

.bg-info {
    background: transparent;
}

.container-fluid {
    width: 100%;
    height: 60%;
}

#qid {
    padding: 10px 15px;
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
    border-radius: 20px;
}

.modal-dialog {
    margin-top: 0%;
}

.img-fluid {
    width: 20%;
    height: auto;
}

#play {
    position: absolute;
    top: 176px;
    left: calc(50% - 325px);
    z-index: 101;
    color: white;
    font-size: 80px;
    text-align: center;
    letter-spacing: 1px;
    border-radius: 20px;
    padding: 40px 40px 34px 40px;
    width: 650px;
    height: 201px;
    font-family: "DinProBold", "Lucida Grande", sans-serif !important;
    box-shadow: rgb(145, 0, 0) 0px -10px 0px 3px inset;
    background: #bd0000;
    border-radius: 13px;
    border: 0px solid rgb(208, 39, 24);
    cursor: pointer;
    text-shadow: -1px -1px 0px rgba(53, 59, 71, 0.8), 1px 1px 0px rgba(198, 215, 245, 0.8);
    -webkit-box-shadow: 0px 0px 55px 20px rgba(255, 68, 0, 1);
    -moz-box-shadow: 0px 0px 55px 20px rgba(255, 68, 0, 1);
    box-shadow: 0px 0px 55px 20px rgba(255, 68, 0, 1);
    border: none;
    color: rgba(255, 255, 255, 1);
    text-align: center;
    -o-text-overflow: clip;
    text-overflow: clip;
    text-shadow: 0 1px 0 rgb(204, 204, 204), 0 2px 0 rgb(201, 201, 201), 0 3px 0 rgb(187, 187, 187), 0 6px 1px rgba(0, 0, 0, 0.0980392), 0 0 5px rgba(0, 0, 0, 0.0980392), 0 1px 3px rgba(0, 0, 0, 0.298039), 0 3px 5px rgba(0, 0, 0, 0.2), 0 5px 10px rgba(0, 0, 0, 0.247059), 0 10px 10px rgba(0, 0, 0, 0.2), 0 20px 20px rgba(0, 0, 0, 0.14902);
    -webkit-transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1);
    -moz-transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1);
    -o-transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1);
    transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1);
    text-decoration: none;
    text-shadow: inset rgb(129, 14, 5) 0px -5px 0px;

}

#wrapper-buttons {
    position: relative;
    top: 300px;
    margin: 0 95px;
}


.w335 {
    width: 335px !important;
}

#play-triangle-down {
    width: 0;
    height: 0;
    border-radius: 20px;
    position: absolute;
    z-index: 100;
    top: 362px;
    left: calc(50% - 50px);
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 100px solid #910000;

}

.shake {
    -webkit-animation: shake 6s forwards !important;
    -moz-animation: shake 6s forwards !important;
    animation: shake 6s forwards !important;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

@keyframes shake {
    0% {
        -moz-transform: rotate(10deg);
        transform: rotate(10deg);
    }
    1% {
        -moz-transform: rotate(-10deg);
        transform: rotate(-10deg);
    }
    2%,
    4%,
    6%,
    8%,
    10%,
    12%,
    14%,
    16%,
    18%,
    20%,
    22%,
    24%,
    26%,
    28%,
    30% {
        -moz-transform: rotate(-23deg);
        transform: rotate(-23deg);
    }
    3%,
    5%,
    7%,
    9%,
    11%,
    13%,
    15%,
    17%,
    19%,
    21%,
    23%,
    25%,
    27%,
    29%,
    31% {
        -moz-transform: rotate(23deg);
        transform: rotate(23deg);
    }

    32%,
    34%,
    36%,
    38%,
    40%,
    42%,
    44%,
    46%,
    48%,
    50% {
        -moz-transform: rotate(-18deg);
        transform: rotate(-18deg);
    }
    33%,
    35%,
    37%,
    39%,
    41%,
    43%,
    45%,
    47%,
    49%,
    51% {
        -moz-transform: rotate(18deg);
        transform: rotate(18deg);
    }

    52%,
    54%,
    56%,
    58%,
    60%,
    62%,
    64%,
    66%,
    68%,
    70%,
    72%,
    74%,
    76%,
    78%,
    80% {
        -moz-transform: rotate(-14deg);
        transform: rotate(-14deg);
    }
    53%,
    55%,
    57%,
    59%,
    61%,
    63%,
    65%,
    67%,
    69%,
    71%,
    73%,
    75%,
    77%,
    79%,
    81% {
        -moz-transform: rotate(14deg);
        transform: rotate(14deg);
    }

    82%,
    84%,
    86%,
    88%,
    90%,
    92%,
    94%,
    96% {
        -moz-transform: rotate(-8deg);
        transform: rotate(-8deg);
    }
    83%,
    85%,
    87%,
    89%,
    91%,
    93%,
    95%,
    97% {
        -moz-transform: rotate(8deg);
        transform: rotate(8deg);
    }

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

@-webkit-keyframes shake {
    0% {
        -webkit-transform: rotate(10deg);
    }
    1% {
        -webkit-transform: rotate(-10deg);
    }
    2%,
    4%,
    6%,
    8%,
    10%,
    12%,
    14%,
    16%,
    18%,
    20%,
    22%,
    24%,
    26%,
    28%,
    30% {
        -webkit-transform: rotate(-23deg);
    }
    3%,
    5%,
    7%,
    9%,
    11%,
    13%,
    15%,
    17%,
    19%,
    21%,
    23%,
    25%,
    27%,
    29%,
    31% {
        -webkit-transform: rotate(23deg);
    }

    32%,
    34%,
    36%,
    38%,
    40%,
    42%,
    44%,
    46%,
    48%,
    50% {
        -webkit-transform: rotate(-18deg);
    }
    33%,
    35%,
    37%,
    39%,
    41%,
    43%,
    45%,
    47%,
    49%,
    51% {
        -webkit-transform: rotate(18deg);
    }

    52%,
    54%,
    56%,
    58%,
    60%,
    62%,
    64%,
    66%,
    68%,
    70%,
    72%,
    74%,
    76%,
    78%,
    80% {
        -webkit-transform: rotate(-14deg);
    }
    53%,
    55%,
    57%,
    59%,
    61%,
    63%,
    65%,
    67%,
    69%,
    71%,
    73%,
    75%,
    77%,
    79%,
    81% {
        -webkit-transform: rotate(14deg);
    }

    82%,
    84%,
    86%,
    88%,
    90%,
    92%,
    94%,
    96% {
        -webkit-transform: rotate(-8deg);
    }
    83%,
    85%,
    87%,
    89%,
    91%,
    93%,
    95%,
    97% {
        -webkit-transform: rotate(8deg);
    }

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




#welcome {}

#welcome img {
    width: 100%;
    height: auto;
}


#curtain {
    background: #000000;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1000;
    display: block;
}

.pulse {
    animation: pulse 3s infinite;
}

.high-pulse {
    animation: high-pulse 1s forwards;
}

.pulse-triangle {
    animation: pulse-triangle 3s infinite;
}

.high-pulse-triangle {
    animation: high-pulse-triangle 1s forwards;
}

@-webkit-keyframes pulse {
    0% {
        -webkit-box-shadow: 0px 0px 5px 0px rgba(255, 0, 0, 1);
        -moz-box-shadow: 0px 0px 5px 0px rgba(255, 0, 0, 1);
        box-shadow: 0px 0px 5px 0px rgba(255, 0, 0, 1);
        background: #bd0000;
    }
    50% {
        -webkit-box-shadow: 0px 0px 55px 20px rgba(255, 68, 0, 1);
        -moz-box-shadow: 0px 0px 55px 20px rgba(255, 68, 0, 1);
        box-shadow: 0px 0px 55px 20px rgba(255, 68, 0, 1);
        background: #ff2a00;
    }
    100% {
        -webkit-box-shadow: 0px 0px 5px 0px rgba(255, 0, 0, 1);
        -moz-box-shadow: 0px 0px 5px 0px rgba(255, 0, 0, 1);
        box-shadow: 0px 0px 5px 0px rgba(255, 0, 0, 1);
        background: #bd0000;
    }
}

@keyframes pulse {
    0% {
        -webkit-box-shadow: 0px 0px 5px 0px rgba(255, 0, 0, 1);
        -moz-box-shadow: 0px 0px 5px 0px rgba(255, 0, 0, 1);
        box-shadow: 0px 0px 5px 0px rgba(255, 0, 0, 1);
        /* background: #c7011c; */
        background: #bd0000;
    }
    50% {
        -webkit-box-shadow: 0px 0px 55px 20px rgba(255, 0, 0, 1);
        -moz-box-shadow: 0px 0px 55px 20px rgba(255, 0, 0, 1);
        box-shadow: 0px 0px 55px 20px rgba(255, 0, 0, 1);
        background: #ff2a00;
    }
    100% {
        -webkit-box-shadow: 0px 0px 5px 0px rgba(255, 0, 0, 1);
        -moz-box-shadow: 0px 0px 5px 0px rgba(255, 0, 0, 1);
        box-shadow: 0px 0px 5px 0px rgba(255, 0, 0, 1);
        background: #bd0000;
    }
}

@-webkit-keyframes high-pulse {
    0% {
        -webkit-box-shadow: 0px 0px 5px 0px rgba(255, 0, 0, 1);
        -moz-box-shadow: 0px 0px 5px 0px rgba(255, 0, 0, 1);
        box-shadow: 0px 0px 5px 0px rgba(255, 0, 0, 1);
        /* background: #c7011c; */
        background: #bd0000;
    }
    100% {
        -webkit-box-shadow: 0px 0px 55px 20px rgba(255, 0, 0, 1);
        -moz-box-shadow: 0px 0px 55px 20px rgba(255, 0, 0, 1);
        box-shadow: 0px 0px 55px 20px rgba(255, 0, 0, 1);
        background: #ff2a00;
    }
}

@keyframes high-pulse {
    0% {
        -webkit-box-shadow: 0px 0px 5px 0px rgba(255, 0, 0, 1);
        -moz-box-shadow: 0px 0px 5px 0px rgba(255, 0, 0, 1);
        box-shadow: 0px 0px 5px 0px rgba(255, 0, 0, 1);
        /* background: #c7011c; */
        background: #bd0000;
    }
    100% {
        -webkit-box-shadow: 0px 0px 55px 20px rgba(255, 0, 0, 1);
        -moz-box-shadow: 0px 0px 55px 20px rgba(255, 0, 0, 1);
        box-shadow: 0px 0px 55px 20px rgba(255, 0, 0, 1);
        background: #ff2a00;
    }
}

@-webkit-keyframes pulse-triangle {
    0% {
        border-top: 100px solid #910000;
    }
    50% {
        border-top: 100px solid #bd0000;
    }
    100% {
        border-top: 100px solid #910000;
    }
}

@-webkit-keyframes high-pulse-triangle {
    0% {
        border-top: 100px solid #910000;
    }
    100% {
        border-top: 100px solid #ff4a1a;
    }
}

@keyframes pulse-triangle {
    0% {
        border-top: 100px solid #910000;
    }
    50% {
        border-top: 100px solid #bd0000;
    }
    100% {
        border-top: 100px solid #910000;
    }
}

@keyframes high-pulse-triangle {
    0% {
        border-top: 100px solid #910000;
    }
    100% {
        border-top: 100px solid #bd0000;
    }
}

#pin {
    width: 51px;
    height: 54px;
    position: absolute;
    top: 440px;
    left: calc(50% - 25px);
    z-index: 100;

}





#mask {
    width: 1366px;
    height: 613px;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 99;
}


label.btn,
label.btn2 {
    padding: 25px 30px 25px 30px;
    white-space: normal;
    -webkit-transform: scale(1.0);
    -moz-transform: scale(1.0);
    -o-transform: scale(1.0);
    -webkit-transition-duration: .3s;
    -moz-transition-duration: .3s;
    -o-transition-duration: .3s;
    background: #819caf;
    font-size: 40px;
    line-height: 68px;
    color: #ffffff;
    border-radius: 2px;
    border: 0;
    font-family: "DinProBold", "Lucida Grande", sans-serif !important;
    border: none;
    text-align: center;
    -o-text-overflow: clip;
    text-overflow: clip;
    -webkit-transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1);
    -moz-transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1);
    -o-transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1);
    transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1);
    text-decoration: none;
}

label.btn:hover,
label.btn2:hover {
    text-shadow: none;
    background: #5d7284;
}

label.btn-block {
    text-align: left;
    position: relative;
    width: 45%;
    float: left;
}

label .btn-label {
    position: absolute;
    left: 0;
    top: 0;
    display: inline-block;
    padding: 0 10px;
    background: rgba(0, 0, 0, .15);
    height: 100%
}

.modal-content {
    background: transparent;
    box-shadow: none;
    border: none;
}

.modal-header,
.modal-body,
.modal-footer {
    border: 0;
    float: left;
}


.btn-lg,
.btn-group-lg > .btn {
    padding: 10px 16px;
    font-size: 20px;
    line-height: 1.33;
    border-radius: 10px;
}

.btn-primary {
    background: black;
    border-color: black;
}

.modal-dialog {
    width: 100%;
}

.modal-content {
    min-height: 800px;
}

.quiz {
    width: 100%;
}

.question {
    font-size: 74px;
    line-height: 88px;
    padding-left: 30px;
}

h1 {
    font-size: 74px;
    line-height: 88px;
    margin-top: 51px;
    font-family: "DinProBold", "Lucida Grande", sans-serif !important;
}


.modal-header {
    background-color: transparent;
    color: inherit;
}

.modal-body {
    min-height: 500px;
    margin-top: 0px;
    width: 100%;
}

.modal-footer {
    width: 100%;
    color: white;
    position: fixed;
    top: 970px;
    left: 0px;
    z-index: 200;
    padding: 0;
}

#loadbar {
    position: absolute;
    width: 62px;
    height: 77px;
    top: 2em
}


h3 b {
    font-size: 50px !important;
    font-weight: normal;
    margin-bottom: 30px;
}

.question2,
.question3,
.next1correct,
.next1false,
.next2correct,
.next2false,
.next3correct,
.next3false {
    display: none;
}

#quiz2,
#quiz3 {
    display: none;
}

label.btn-block2 {
    text-align: left;
    position: relative;
    width: 55%;
    margin: 250px 0 0 0 !important;
}

label.btn-block3 {
    text-align: left;
    position: relative;
    width: 55%;
    margin: 70px 0 0 0 !important;
}

.img-border {
    border-radius: 18px;
    border: 20px solid white;
}

#title-start,
#title-wheel,
#title-entry,
#title-wimmelbild,
#title-puzzle,
#title-score,
#title-highscore {
    position: relative;
}

#title-text {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
}

#title-bg-entry {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    height: 1024px;
    width: 1366px;
    display: block;
    -webkit-clip-path: polygon(42% 16%, 100% 27%, 100% 62%, 64% 79%, 0 66%, 0 30%);
    clip-path: polygon(42% 16%, 100% 27%, 100% 62%, 64% 79%, 0 66%, 0 30%);
}

#title-bg-wheel {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    height: 198px;
    width: 1366px;
    display: block;
    -webkit-clip-path: polygon(51% 18%, 83% 30%, 100% 21%, 100% 69%, 83% 61%, 59% 82%, 0 66%, 0 35%, 26% 41%);
    clip-path: polygon(51% 18%, 83% 30%, 100% 21%, 100% 69%, 83% 61%, 59% 82%, 0 66%, 0 35%, 26% 41%);
}

#rays {
    /* with animation properties */
    display: none;
    background: url(../imgs/rays.png) 0 0 no-repeat;
    position: fixed;
    margin-top: -330px;
    margin-left: -130px;
    width: 1600px;
    height: 1600px;

    /* microsoft ie */
    animation-name: spin;
    animation-duration: 20000ms;
    /* 40 seconds */
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

.element-animation1 {
    animation-delay: 4000ms;
    animation: animationFrames ease .8s;
    animation-iteration-count: 1;
    -webkit-animation: animationFrames ease .8s;
    -webkit-animation-iteration-count: 1;

    -ms-animation: animationFrames ease .8s;
    -ms-animation-iteration-count: 1;

}

.element-animation2 {
    animation-delay: 4000ms;
    animation: animationFrames ease 1s;
    animation-iteration-count: 1;
    -webkit-animation: animationFrames ease 1s;
    -webkit-animation-iteration-count: 1;

    -ms-animation: animationFrames ease 1s;
    -ms-animation-iteration-count: 1;

}

.element-animation3 {
    animation-delay: 4000ms;
    animation: animationFrames ease 1.2s;
    animation-iteration-count: 1;
    -webkit-animation: animationFrames ease 1.2s;
    -webkit-animation-iteration-count: 1;

    -ms-animation: animationFrames ease 1.2s;
    -ms-animation-iteration-count: 1;

}

.element-animation4 {
    animation-delay: 4000ms;
    animation: animationFrames ease 1.4s;
    animation-iteration-count: 1;
    -webkit-animation: animationFrames ease 1.4s;
    -webkit-animation-iteration-count: 1;

    -ms-animation: animationFrames ease 1.4s;
    -ms-animation-iteration-count: 1;

}

.colorchangered {
    animation: colorchangered .2s ease-in forwards;
    -webkit-animation: colorchangered .2s ease-in forwards;

}

.colorchangegreen {
    animation: colorchangegreen .2s ease-in forwards;
    -webkit-animation: colorchangegreen .2s ease-in forwards;

}

.colorchangefinal {
    animation: colorchangefinal .2s ease-in forwards;
    -webkit-animation: colorchangefinal .2s ease-in forwards;

}

.colorchangewhite {
    animation: colorchangewhite .2s ease-in forwards;
    -webkit-animation: colorchangewhite .2s ease-in forwards;

}

.titlechangered {
    animation: titlechangered .2s ease-in forwards;
    -webkit-animation: titlechangered .2s ease-in forwards;

}

.titlechangegreen {
    animation: titlechangegreen .2s ease-in forwards;
    -webkit-animation: titlechangegreen .2s ease-in forwards;

}

.titlechangewhite {
    animation: titlechangewhite .2s ease-in forwards;
    -webkit-animation: titlechangewhite .2s ease-in forwards;

}

/* keyframes for animation;  simple 0 to 360 */

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

@keyframes colorchangered {
    0% {
        background: #000000;
        background-image: url(../imgs/bg-icons.png);
        background-size: cover;
    }

    100% {
        background: #9f1515;
        background-image: url(../imgs/bg-icons.png);
        background-size: cover;
    }
}

@keyframes colorchangegreen {
    0% {
        background: #000000;
        background-image: url(../imgs/bg-icons.png);
        background-size: cover;
    }

    100% {
        background: #289403;
        background-image: url(../imgs/bg-icons.png);
        background-size: cover;
    }
}

@keyframes colorchangefinal {
    0% {
        background: #000000;
        background-image: url(../imgs/bg-icons.png);
        background-size: cover;
    }

    100% {
        background: #289403;
        background-image: url(../imgs/transparent.png);
        background-size: cover;
    }
}

@keyframes colorchangewhite {
    0% {
        background: #289403;
        background-image: url(../imgs/bg-icons.png);
        background-size: cover;
    }

    100% {
        background: #000000;
        background-image: url(../imgs/bg-icons.png);
        background-size: cover;
    }
}

@keyframes titlechangered {
    0% {
        color: #ffffff;

    }

    100% {
        color: #ffffff;
    }
}

@keyframes titlechangegreen {
    0% {
        color: #ffffff;
    }

    100% {
        color: #ffffff;
    }
}

@keyframes titlechangewhite {
    0% {
        color: #ffffff;
    }

    100% {
        color: #ffffff;
    }
}

@keyframes animationFrames {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@-webkit-keyframes animationFrames {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@-ms-keyframes animationFrames {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

#start,
#highscores {
    position: relative;
}

.btn {
    position: absolute;
    z-index: 2;
}

#start .background {
    background: url(../imgs/bg-btn-start.png) top left no-repeat;
    width: 335px;
    height: 174px;
    position: absolute;
    z-index: 1;
    top: -30px;
    left: 0px;
}

#highscores .background {
    background: url(../imgs/bg-btn-highscores.png) top left no-repeat;
    width: 335px;
    height: 174px;
    position: absolute;
    z-index: 1;
    top: -30px;
    left: 0px;
}