/*///////////////////////////////////////////////////////
// General
//////////////////////////////////////////////////////*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h6, p, blockquote, pre, a, abbr,
acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong,
sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table,
caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption,
footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    vertical-align: baseline;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
*, *::after, *::before {
    box-sizing: border-box;
}
@font-face {
    font-family: 'DIN';
    src: url('../fonts/dincond.eot');
    src: url('../fonts/dincond.eot?#iefix') format('embedded-opentype'),
    url('../fonts/dincond.woff2') format('woff2'),
    url('../fonts/dincond.woff') format('woff'),
    url('../fonts/dincond.ttf') format('truetype'),
    url('../fonts/dincond.svg#dincond') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'PT Sans';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/pt-sans-v9-latin-regular.eot');
    src: local('PT Sans'), local('PTSans-Regular'),
    url('../fonts/pt-sans-v9-latin-regular.eot?#iefix') format('embedded-opentype'),
    url('../fonts/pt-sans-v9-latin-regular.woff2') format('woff2'),
    url('../fonts/pt-sans-v9-latin-regular.woff') format('woff'),
    url('../fonts/pt-sans-v9-latin-regular.ttf') format('truetype'),
    url('../fonts/pt-sans-v9-latin-regular.svg#PTSans') format('svg');
}
@font-face {
    font-family: 'PT Sans';
    font-style: italic;
    font-weight: 400;
    src: url('../fonts/pt-sans-v9-latin-italic.eot');
    src: local('PT Sans Italic'), local('PTSans-Italic'),
    url('../fonts/pt-sans-v9-latin-italic.eot?#iefix') format('embedded-opentype'),
    url('../fonts/pt-sans-v9-latin-italic.woff2') format('woff2'),
    url('../fonts/pt-sans-v9-latin-italic.woff') format('woff'),
    url('../fonts/pt-sans-v9-latin-italic.ttf') format('truetype'),
    url('../fonts/pt-sans-v9-latin-italic.svg#PTSans') format('svg');
}
@font-face {
    font-family: 'PT Sans';
    font-style: normal;
    font-weight: 700;
    src: url('../fonts/pt-sans-v9-latin-700.eot');
    src: local('PT Sans Bold'), local('PTSans-Bold'),
    url('../fonts/pt-sans-v9-latin-700.eot?#iefix') format('embedded-opentype'),
    url('../fonts/pt-sans-v9-latin-700.woff2') format('woff2'),
    url('../fonts/pt-sans-v9-latin-700.woff') format('woff'),
    url('../fonts/pt-sans-v9-latin-700.ttf') format('truetype'),
    url('../fonts/pt-sans-v9-latin-700.svg#PTSans') format('svg');
}
html,
body {
    overflow: hidden;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}
body {
    font-family: 'PT Sans', Helvetica, Arial, sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 13px;
    color: #000;
    background-color: #bdbdbd;
}
/*///////////////////////////////////////////////////////
// Variables
//////////////////////////////////////////////////////*/
:root {
    --color-elvigray1: #525252;
    --color-elvigray2: #717372;
    --color-elvigray3: #D6D6D6;
    --color-elvigray4: #FBFBFB;
    --color-elvipurple: #7150E9;
    --color-elviblue: #2A82CC;
    --color-elvigreen: #066553;
    --color-elvigreen2: #94D979;
    --color-elvipink: #FF2779;
    --color-elvimint: #24C2C4;
    --color-elvi-pupils: var(--color-elvipurple);
    --color-elvi-companies: #40B8A1;
    --color-elvi-teachers: #3A97C9;
    --color-elvi-digital: #3075B7;
    --color-gradient-a1: var(--color-elvipurple);
    --color-gradient-a2: var(--color-elviblue);
    --color-gradient-a3: var(--color-elvigreen);
    --color-gradient-a4: var(--color-elvimint);
    --color-gradient-a5: var(--color-elvipink);
    --color-gradient-a6: var(--color-elvigreen2);
    --color-light: #ffffff;
    --color-darkgray1: #333333;
    --color-darkgray2: #484848;
    --color-lightgray1: #efefef;
    --color-lightgray2: #eaeaea;
    --color-lightgray3: #dbdbdb;
    --color-gray1: #b3b3b3;
    --color-gray2: #B5B4B4;
    --color-gray3: #9c9d9d;
    --color-navibg: #27252C;
    --color-navihover: #EBEBEB;
    --gradient-pupils: linear-gradient(135deg, rgba(91, 103, 187, 1) 0%, rgba(195, 61, 141, 1) 100%);
    --gradient-company: linear-gradient(135deg, rgba(5, 164, 185, 1) 0%, rgba(148, 217, 121, 1) 100%);
    --gradient-teacher: linear-gradient(135deg, rgba(42, 130, 204, 1) 0%, rgba(36, 194, 196, 1) 100%);
    --gradient-green: linear-gradient(to top right, #084952 0%, #94D979 100%);
    --gradient-blue: linear-gradient(to top right, #2a82cc 0%, #7150e9 100%);
    --gradient-mint: linear-gradient(to top right, #24c2c4 0%, #2a82cc 100%);
    --gradient-purple: linear-gradient(to top right, #7150e9 0%, #ff2779 100%);
    --gradient-pink: linear-gradient(to top right, #ff2779 0%, #f7b172 100%);
    --button-background: var(--color-elvipurple);
    --button-hovercolor: var(--color-elvipurple);
    --fontfamily-din: "DIN", Arial, Helvetica, sans-serif;
    --fontfamily-ptsans: 'PT Sans', Helvetica, Arial, sans-serif;
}
.elvigray-color {
    color: var(--color-elvigray1);
}
.elvigray-bg {
    background-color: var(--color-elvigray1);
}
.elvilightgray-color {
    color: var(--color-elvigray2);
}
.elvilightgray-bg {
    background-color: var(--color-elvigray2);
}
/* Schüler */
.pupils-color {
    color: var(--gradient-purple);
}
.pupils-bg {
    background: var(--gradient-purple);
}
/* Naturwissenschaftlich */
.elvigreen-color {
    color: var(--color-elvigreen);
}
.elvigreen-bg {
    background-color: var(--color-elvigreen);
}
.elvigreen-gradient {
    background: var(--gradient-green);
}
/* Technisch */
.elviblue-color {
    color: var(--color-elviblue);
}
.elviblue-bg {
    background-color: var(--color-elviblue);
}
.elviblue-gradient {
    background: var(--gradient-blue);
}
/* Kaufmännisch */
.elvipurple-color {
    color: var(--color-elvipurple);
}
.elvipurple-bg {
    background-color: var(--color-elvipurple);
}
.elvipurple-gradient {
    background: var(--gradient-purple);
}
/* Informatik */
.elvimint-color {
    color: var(--color-elvimint);
}
.elvimint-bg {
    background-color: var(--color-elvimint);
}
.elvimint-gradient {
    background: var(--gradient-mint);
}
/* Gastronomisch */
.elvipink-color {
    color: var(--color-elvipink);
}
.elvipink-bg {
    background-color: var(--color-elvipink);
}
.elvipink-gradient {
    background: var(--gradient-pink);
}
/* body classes */
body.student {
    --button-background: var(--color-elvipurple);
    --button-hovercolor: var(--color-elvipurple);
}
body.company {
    --button-background: var(--color-elvigreen);
    --button-hovercolor: var(--color-elvigreen);
}
body.teacher {
    --button-background: var(--color-elviblue);
    --button-hovercolor: var(--color-elviblue);
}
/*///////////////////////////////////////////////////////
// Typo
//////////////////////////////////////////////////////*/
h1, h2, h3, h4, h5, h6 {
    font-family: 'DIN', Arial, Helvetica, sans-serif;
    color: #7150e9;
    font-weight: normal;
}
h1 {
    font-size: 2em;
}
h2 {
    font-size: 1.8em;
}
h3 {
    font-size: 1.6em;
}
h4 {
    font-size: 1.4em;
}
h6 {
    font-size: 1.1em;
}
strong, b {
    font-weight: 700;
}
#wrapper {
    position: relative;
    background: #fff;
    min-width: 340px;
    float: left;
    width: 100%;
    bottom: 0;
    z-index: 10;
    opacity: 0;
    overflow-x: hidden;
}
#browserInfo {
    display: none;
    background: url('../images/bg_textur.jpg') no-repeat center center / cover;
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 2000;
    text-align: center;
    overflow: auto;
}
#browserInfo .innerWrap {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    padding: 0 30px;
    margin-top: 50px;
}
#browserInfo img {
    width: 100%;
    height: auto;
    position: absolute;
    z-index: -1;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0.5;
}
#browserInfo h3 {
    font-size: 25px;
}
#browserInfo h2 {
    font-size: 40px;
    margin-bottom: 20px;
}
#browserInfo p {
    font-size: 20px;
    text-align: center;
    line-height: 28px;
}
#browserInfo ul {
    margin-left: 15px;
}
#browserInfo strong {
    line-height: 22px;
    margin-top: 30px;
    display: block;
}
#browserInfo .techInfo {
    text-align: left;
    margin-top: 10px;
}
#browserInfo a, #browserInfo a:visited {
    color: #7150e9;
    text-decoration: none;
}
#browserInfo .browserLinks {
    float: left;
    width: 100%;
    text-align: center;
    margin-bottom: 50px;
}
.chromeLink, .firefoxLink {
    display: inline-block;
    width: 50px;
    height: 50px;
    margin: 20px 22px 0 22px;
    padding-top: 50px;
    font-size: 16px;
    text-align: center;
    color: #000000 !important;;
}
.chromeLink {
    background: url('../images/icons/chrome_icon.svg') no-repeat center center / 46px 46px;
}
.firefoxLink {
    background: url('../images/icons/firefox_icon.svg') no-repeat center center / 50px 50px;
}
@media (min-width: 1025px) {
    body {
        background: #000;
        width: 100%;
        height: 100%;
    }
    #wrapper, #preloader {
        max-width: 50vw;
        left: 50%;
        transform: translateX(-50%);
        height: 96vh !important;
        top: 2vh;
        overflow: hidden;
        border-radius: 10px;
    }
    .portrait {
        display: block;
    }
}
@media (min-width: 1600px) {
    #wrapper, #preloader {
        max-width: 33vw;
    }
}

/*///////////////////////////////////////////////////////
// Preloader
//////////////////////////////////////////////////////*/
#preloader {
    background: url('../images/bg_textur.jpg') no-repeat center center / cover;
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 20;
    transition: opacity 1s;
    opacity: 1;
}
#preloader.loaded {
    opacity: 0;
    z-index: -1;
}
#preloader .innerWrap {
    position: absolute;
    top: 50%;
    left: 47%;
    transform: translate(-50%, -50%);
    width: 100%;
    text-align: center;
}
#preloader h4 {
    font-size: 20px;
    padding-bottom: 3px;
}
#preloader h3 {
    font-size: 35px;
    text-transform: uppercase;
    line-height: 0.9em;
}
#preloader img {
    width: 100%;
    height: auto;
}
#preloader img.landscape {
    width: 124%;
    position: relative;
    top: 3%;
}
#preloader img.introErliCenter {
    position: absolute;
    z-index: 20;
    opacity: 1;
    width: 20%;
    left: 25%;
    top: 50%;
    transform: translate(-50%, -50%);
    animation: xAxis 10s infinite cubic-bezier(0.02, 0.01, 0.21, 1);
}
.btn {
    font-family: 'DIN', Arial, Helvetica, sans-serif;
    padding: 7px 25px;
    display: block;
    background-image: linear-gradient(to top, #717171 50%, #7f7f7f 50%);
    float: left;
    cursor: pointer;
    -moz-box-shadow: 0 0 6px #ccc;
    -webkit-box-shadow: 0 0 6px #ccc;
    box-shadow: 0 0 6px #ccc;
    color: #fff;
    font-size: 20px;
    min-width: 160px;
    text-align: center;
    transition: all 0.3s;
    border-radius: 2px;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    text-decoration: none;
    border: 0;
}
.backBtn {
    position: absolute;
    color: #4e4e4e;
    font-size: 15px;
    top: 20px;
    padding: 10px 0 10px 19px;
    z-index: 50;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.backBtn:before {
    content: " ";
    background: url('../images/icons/arrow_back_dark.svg') no-repeat left center / 21px 14px;
    padding-right: 35px;
    width: 21px;
    height: 14px;
}
.btnShare {
    position: relative;
    z-index: 50;
    width: 25%;
    float: left;
    font-size: 15px;
    color: #4e4e4e;
    padding: 17px 0 16px 30px;
    background: url('../images/icons/share_dark.svg') no-repeat left center / 17px 19px;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.blue {
    color: #1e58b8
}
.yellow {
    color: #ffc634
}
.purple {
    color: #ca4f9f
}
.portrait {
    display: none;
}
@media only screen and (orientation: portrait) {
    .btn {
        min-width: 130px;
    }
    .backBtn {
        padding: 10px 0;
    }
    .btnShare {
        text-indent: -900em;
        padding: 0;
        height: 53px;
        background: url('../images/icons/share_dark.svg') no-repeat left center / 17px 19px;
    }
    .landscape {
        display: none;
    }
    .portrait {
        display: block;
    }
    #preloader img.introErliCenter {
        width: 32%;
        left: 27%;
        top: 50%;
    }
}
/*///////////////////////////////////////////////////////
// Header
//////////////////////////////////////////////////////*/
.menuSelect {
    background: url('../images/icons/menu_dark.svg') no-repeat center center / 19px 15px;
    width: 40px;
    height: 40px;
    position: absolute;
    right: 40px;
    top: 20px;
    z-index: 50;
}
.menuSelect.white {
    background: url('../images/icons/menu_white.svg') no-repeat center center / 19px 15px;
}
#menu {
    position: fixed;
    width: 100%;
    height: 100%;
    right: -100%;
    top: 0;
    background: url('../images/menu_bg.jpg') repeat-x center center /cover;
    opacity: 0;
    visibility: hidden;
    transition: all 350ms;
    overflow: hidden;
    z-index: 750;
}
#menu.open {
    opacity: 1;
    visibility: visible;
    height: 100%;
    right: 0;
}
#menuClose, .cookieClose, .browserClose {
    position: absolute;
    z-index: 100;
    background: url('../images/icons/close_white.svg') no-repeat center center / 15px 15px;
    right: 40px;
    top: 20px;
    width: 40px;
    height: 40px;
}
.cookieClose, .browserClose {
    background: url('../images/icons/close_dark.svg') no-repeat center center / 15px 15px;
}
#menu ul {
    width: 100%;
    display: block;
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
    padding: 60px 25% 60px 50px;
}
#menu ul li {
    position: relative;
    width: 100%;
    display: inline-block;
    opacity: 0;
    font-family: 'DIN', Arial, Helvetica, sans-serif;
    color: #fff;
    font-size: 30px;
    line-height: 1.1em;
    margin-bottom: 20px;
    list-style: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
#menu ul li:after {
    content: '';
    position: absolute;
    top: 50%;
    left: 43.5%;
    width: 0;
    transform: translateX(-50%);
    height: 3px;
    background: #FFF;
    transition: .35s;
}
#menu.open li {
    animation: fadeInRight .5s ease forwards;
    animation-delay: .35s;
}
#menu.open li:nth-of-type(2) {
    animation-delay: .4s;
}
#menu.open li:nth-of-type(3) {
    animation-delay: .45s;
}
#menu.open li:nth-of-type(4) {
    animation-delay: .50s;
}
#menu.open li:nth-of-type(5) {
    animation-delay: .55s;
}
@keyframes fadeInRight {
    0% {
        opacity: 0;
        left: 20%;
    }
    100% {
        opacity: 1;
        left: 0;
    }
}
#subMenu {
    position: absolute;
    bottom: 25px;
    left: 45px;
}
#subMenu ul {
    padding: 0;
}
#subMenu ul li {
    float: left;
    color: #ffffff;
    list-style: none;
    position: relative;
    font-size: 16px;
    padding-left: 5px;
}
#subMenu ul li:before {
    content: "•";
    padding-right: 5px;
}
#subMenu ul li:first-child:before {
    content: "";
    padding-right: 0;
}
#subMenu ul li a {
    padding: 5px 3px;
}
.bottomMenu {
    position: fixed;
    z-index: 200;
    bottom: 0;
    right: 0;
    background: url('../images/ui/menu_bottom.svg') no-repeat right bottom / contain;
    width: 395px;
    height: 95px;
    color: #4e4e4e;
    font-size: 15px;
    padding-left: 140px;
    padding-top: 18px;
}
a.btnOutline {
    font-family: 'DIN', Arial, Helvetica, sans-serif;
    display: inline-block;
    margin-right: 5px;
    margin-top: 10px;
    padding: 5px 12px;
    background: #fff;
    color: #4e4e4e;
    font-size: 16px;
    border: 1px solid #d8d8d8;
    text-decoration: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
@media (max-height: 280px) {
    #menu > ul {
        padding: 60px 40% 60px 50px;
    }
    #menu > ul li {
        line-height: 1.6em;
    }
}
@media only screen and (orientation: portrait) {
    .menuSelect {
        right: 10px;
    }
    #menu ul {
        -webkit-column-count: 1;
        -moz-column-count: 1;
        column-count: 1;
    }
    #menu > ul {
        padding: 60px 20px 20px 40px;
    }
    #subMenu {
        position: relative;
        left: auto;
        bottom: auto;
        padding: 0 40px;
    }
    #menuClose, .cookieClose {
        right: 20px;
    }
    #subMenu ul li {
        padding-left: 0;
        padding-right: 5px;
    }
}
@media only screen and (orientation: portrait) and (max-height: 480px) {
    #menu > ul li {
        font-size: 25px;
    }
}
/*///////////////////////////////////////////////////////
// Sections
//////////////////////////////////////////////////////*/
.secHeader {
    position: absolute;
    width: 100%;
    height: 40px;
    top: 0;
    left: 0;
    padding: 15px 30px;
    z-index: 50;
}
#quizIntro .secHeader {
    height: 60px;
}
.secFooter {
    position: absolute;
    height: 60px;
    bottom: 0;
    width: 100%;
    left: 0;
    padding: 10px 50px;
}
#quizIntro .secFooter {
    height: 40px;
}
.footerNav {
    float: right;
}
.footerNavLeft {
    float: left;
}
.footerNavLeft a {
    margin-right: 10px;
}
.footerNavLeft a:last-child {
    margin-right: 0;
}
.secFooter .btnWrap {
    float: right;
}
.secFooter .btnWrap .btnWin {
    margin-right: 20px;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.secFooter .btnWrap .underBtn {
    padding: 5px 0;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
#quizIntro .btnShare {
    left: 20px;
}
@media only screen and (orientation: portrait) {
    .secHeader {
        padding: 15px 20px;
    }
    .secFooter {
        padding: 10px 20px;
    }
    #quizIntro .btnShare {
        left: -20px;
        background: url('../images/icons/share_dark.svg') no-repeat 20px center / 17px 19px;
        padding: 20px;
    }
}
/*///////////////////////////////////////////////////////
// Intro
//////////////////////////////////////////////////////*/
#quizIntro {
    padding: 60px 30px 40px 30px;
    width: 100%;
    height: 100%;
    float: left;
    position: relative;
}
#titleWrap {
    width: 50%;
    float: left;
    text-align: center;
    position: relative;
    z-index: -1;
    top: 5px;
}
#titleWrap h2 {
    font-size: 15px;
    padding-bottom: 3px;
}
#titleWrap h1 {
    font-size: 30px;
    text-transform: uppercase;
    line-height: 0.9em;
}
#menuWrap {
    width: 25%;
    float: left;
}
.introBg {
    position: relative;
    z-index: 10;
    width: 100%;
    height: 100%;
    background: url('../images/bg_textur.jpg') repeat center center / cover;
    border-radius: 10px;
    overflow: hidden;
}
.introTeaser {
    background: url('../images/intro_teaser.jpg') no-repeat center center / 100% auto;
    position: absolute;
    z-index: 10;
    height: 100%;
    width: 100%;
    min-height: 180px;
}
.introTopForm {
    background: url('../images/ui/lamelle.svg') no-repeat center center / 410px 18px;
    position: absolute;
    z-index: 20;
    top: -1px;
    left: 50%;
    width: 410px;
    height: 18px;
    margin-left: -205px;
}
.quizControls {
    position: absolute;
    bottom: 20px;
    z-index: 50;
    width: 100%;
    left: 50%;
    margin-left: -50%;
    display: flex;
    justify-content: center;
    text-align: center;
}
.quizControls > div {
    font-family: 'DIN', Arial, Helvetica, sans-serif;
    margin: 0 8px;
}
#loginStatus {
    opacity: 0;
    position: fixed;
    z-index: 250;
    width: 100%;
    height: 100%;
    left: -100%;
    top: 0;
    background: url('../images/quest_gradient.jpg') repeat-x center center / cover;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-flex-flow: column wrap;
    flex-flow: column wrap;
    justify-content: center;
    padding: 0 18%;
    transition: all ease 0.3s;
}
#loginStatus > div {
    font-family: 'DIN', Arial, Helvetica, sans-serif;
    text-align: center;
    font-size: 30px;
    color: #fff;
    line-height: 1.2em;
}
.infoOverlay {
    display: none;
    position: fixed;
    z-index: 600;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: url('../images/bg_textur.jpg') repeat-x center center / cover;
}
.infoOverlay .innerWrap {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 0 12%;
    width: 100%;
}
.infoOverlay h3 {
    margin-bottom: 15px;
    font-size: 28px;
}
.infoOverlay p {
    font-size: 15px;
}
.infoOverlay a, .infoOverlay a:visited {
    color: #7150e9;
}
.btnAcceptLogin, .btnAcceptCookie, .btnReload {
    margin-top: 20px;
}
#cookieNotice .cnClose, #loginInfo .infoClose, #deviceMotionInfo .dmiClose {
    margin-top: 25px;
    padding-left: 25px;
}
.wincodeCheck {
    display: inline-block;
    margin-top: 15px;
}
.wincodeCheck span {
    position: relative;
    display: block;
    float: left;
    padding-left: 40px;
}
.wincodeCheck p {
    padding-left: 40px;
}
.wincodeCheck span:before {
    content: "";
    display: block;
    float: left;
    width: 32px;
    height: 32px;
    background: #ffffff;
    border-radius: 4px;
    margin-left: -40px;
    cursor: pointer;
}
.wincodeCheck span.checked:before {
    background: url('../images/icons/check_gradient.png') no-repeat center center / 20px 20px #ffffff;
}
@media (min-width: 640px) {
    .gameStart:before {
        padding-top: 80%;
    }
}
@media (max-width: 580px) {
    #titleWrap h1 {
        font-size: 22px;
    }
    .introTopForm {
        background: url('../images/ui/lamelle.svg') no-repeat center center / 310px 23px;
        top: -3px;
    }
}
@media only screen and (orientation: portrait) {
    #loginStatus .playerName {
        display: block;
        float: left;
        width: 100%;
        text-align: center;
    }
    #quizIntro .menuSelect {
        right: -10px;
    }
    #quizIntro {
        padding: 0 20px;
    }
    .introTopForm {
        width: 80%;
        margin-left: -40%;
        background: url('../images/ui/lamelle.svg') no-repeat center center /contain;
    }
    .introTopForm {
        display: none;
    }
    .introBg {
        height: 70%;
    }
    #quizIntro .secHeader {
        height: 20%;
        position: relative;
        padding: 15px 0;
    }
    #titleWrap {
        width: 100%;
        float: left;
        text-align: center;
        position: absolute;
        top: auto;
        left: 0;
        bottom: 20px;
    }
    #titleWrap h1 {
        font-size: 30px;
    }
    .introTeaser {
        background: url('../images/intro_teaser_portrait.jpg') no-repeat center center / auto 100%;
    }
    .quizControls {
        bottom: 50px;
    }
    #quizIntro .secFooter {
        height: 10%;
        position: relative;
        padding: 15px 0 10px 0;
    }
    #loginInfo .innerWrap, #cookieNotice .innerWrap {
        padding: 0 20px;
    }
}
/*///////////////////////////////////////////////////////
// Account
//////////////////////////////////////////////////////*/
#accountInfo, #roomSelect {
    display: none;
    position: fixed;
    z-index: 600;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: url('../images/bg_textur.jpg') repeat-x center center / cover;
}
.accountClose, .roomselectClose {
    position: absolute;
    z-index: 100;
    background: url('../images/icons/close_dark.svg') no-repeat center center / 15px 15px;
    right: 40px;
    top: 20px;
    width: 40px;
    height: 40px;
}
#accountInfo .innerWrap, #roomSelect .innerWrap {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 40px 120px;
    width: 100%;
}
#accountInfo .innerWrap .btn {
    float: left;
    clear: both;
    margin: 10px 0;
}
#accountInfo h2 {
    font-size: 24px;
    color: #333;
}
#accountInfo p {
    font-size: 15px;
    color: #333;
}
#accountInfo a, #accountInfo a:visited {
    color: #7150e9;
}
#roomSelect a, #roomSelect a:visited {
    color: #7150e9;
    float: left;
    width: 100%;
    margin: 5px 0;
}
.btnAccount {
    float: left;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.btnRoomselect {
    float: left;
    margin-left: 15px;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
/*///////////////////////////////////////////////////////
// Game Styles
//////////////////////////////////////////////////////*/
#quizGame {
    display: none;
    width: 100%;
    height: 100%;
    position: relative;
    top: 0;
    left: 0;
    z-index: 40;
}
.skipRoom {
    color: #fff;
    font-size: 15px;
    position: absolute;
    right: 30px;
    bottom: 5px;
    z-index: 240;
    padding: 10px;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.snapchat .skipRoom {
    right: auto;
    left: 50%;
    transform: translateX(-50%);
}
.soundNavi {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 240;
    width: 24px;
    height: 24px;
    background: url('../images/icons/sound_on.svg') no-repeat center center / 24px 24px;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.soundNavi.off {
    background: url('../images/icons/sound_off.svg') no-repeat center center / 24px 24px;
}
#quizScreen {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 40;
}
#gameUI {
    position: relative;
    z-index: 300;
}
#scoreDisplay {
    background: url('../images/ui/score_display.svg') no-repeat center center / contain;
    width: 300px;
    height: 50px;
    position: fixed;
    top: 0;
    left: 50%;
    margin-left: -150px;
    padding: 14px 40px 0 40px;
}
#scoreDisplay > div {
    font-family: 'DIN', Arial, Helvetica, sans-serif;
    width: 25%;
    float: left;
    text-align: center;
    color: #707070;
    font-size: 12px;
    line-height: 1.1em;
    text-indent: -1px;
}
#scoreDisplay > div.total {
    color: #fff;
}
#scoreDisplay > div span.scoreNum {
    display: inline-block;
    font-size: 25px;
}
#scoreDisplay > div span.light {
    color: #c2c0c0;
}
#crosshair {
    background-image: url('../images/icons/crosshair.png');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 45px 45px;
    border-radius: 50%;
    width: 45px;
    height: 45px;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 250;
    transition: all 0.25s;
}
#hitPoint {
    width: 4px;
    height: 4px;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 250;
}
.hsQuestion, .hsInno {
    width: 40px;
    height: 40px;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
}
.hsAusbildung {
    background-image: url('../images/animated/question_blue.gif');
}
.hsWissen {
    background-image: url('../images/animated/question_yellow.gif');
}
.hsInnovation {
    background-image: url('../images/animated/question_purple.gif');
}
.hsElvi .hsInner {
    width: 80px;
    height: 80px;
    background: url('../images/animated/elvi_fly.gif') no-repeat center center /contain;
    position: relative;
}
.hsInner span {
    font-family: 'DIN', Arial, Helvetica, sans-serif;
    color: #fff;
    font-size: 20px;
    position: absolute;
    top: 0;
    height: 40px;
    display: none;
    width: 80px;
    text-align: center;
}
.aniBat .hsInner {
    width: 80px;
    height: 40px;
    opacity: 1;
    border-radius: 0;
    background: url('../images/animated/elvi_fly.gif') no-repeat center center / contain;
    animation: xAxis 10s infinite cubic-bezier(0.02, 0.01, 0.21, 1);
}
.aniBat::after {
    animation: yAxis 10s infinite cubic-bezier(0.3, 0.27, 0.07, 1.64);
}
@-webkit-keyframes yAxis {
    50% {
        animation-timing-function: cubic-bezier(0.02, 0.01, 0.21, 1);
        transform: translateY(-100px);
    }
}
@keyframes yAxis {
    50% {
        animation-timing-function: cubic-bezier(0.02, 0.01, 0.21, 1);
        transform: translateY(-100px);
    }
}
@-webkit-keyframes xAxis {
    50% {
        animation-timing-function: cubic-bezier(0.3, 0.27, 0.07, 1.64);
        transform: translateX(100px);
    }
}
@keyframes xAxis {
    50% {
        animation-timing-function: cubic-bezier(0.3, 0.27, 0.07, 1.64);
        transform: translateX(100px);
    }
}
@media only screen and (orientation: portrait) {
    .skipRoom {
        right: 15px;
        bottom: 15px;
    }
}
/*///////////////////////////////////////////////////////
// Questions
//////////////////////////////////////////////////////*/
#questionWrap {
    visibility: hidden;
    position: fixed;
    z-index: 300;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    padding: 62px 60px 40px 60px;
    overflow: hidden;
    box-sizing: border-box;
    transition: all 500ms;
}
#questionWrap > * {
    opacity: 0;
}
#questionWrap:before {
    position: absolute;
    width: 1px;
    height: 1px;
    background: white;
    content: "";
    bottom: 10px;
    left: 50%;
    top: 50%;
    color: #fff;
    border-radius: 50%;
    transition: all 500ms cubic-bezier(0.215, 0.61, 0.355, 1);
}
#questionWrap.active {
    display: block;
    visibility: visible;
    box-shadow: 2px 3px 16px silver;
    transform: translateY(0px);
    transition: all 1s;
}
#questionWrap.active:before {
    height: 2000px;
    width: 2000px;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    margin-left: -1000px;
    margin-top: -1000px;
    display: block;
    opacity: 0;
    transition: all 800ms cubic-bezier(0.7, 0.61, 0.7, 1);
}
#questionWrap.active > * {
    opacity: 1;
    transition: all 300ms cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
.questBg {
    background: url('../images/bg_textur.jpg') repeat center center / cover;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}
.question {
    position: relative;
    width: 100%;
    float: left;
    min-height: 55px;
}
.queDescription {
    float: left;
    width: 100%;
}
.queDescription h3 {
    font-family: 'DIN', Arial, Helvetica, sans-serif;
    font-size: 30px;
    padding-bottom: 15px;
    color: #4e4e4e;
    display: block;
    width: 100%;
    max-height: 115px;
}
.queDescription p {
    font-size: 16px;
    color: #333;
    padding: 0 25px;
}
.queDescription.actImage {
    width: 58%;
}
.queImage {
    opacity: 0;
    position: fixed;
    right: 0;
    top: 0;
    width: 40%;
    z-index: 50;
    height: 50%;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}
.queImage.actImage {
    opacity: 1;
}
.answers {
    width: 100%;
    position: relative;
    z-index: 100;
    float: left;
    height: 45vh;
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-flex-flow: row wrap;
    flex-flow: row wrap;
}
#questionWrap[data-category=Innovation] .answers {
    height: calc(40vh - 12px);
}
.answer {
    position: relative;
    width: -webkit-calc(50% - 10px);
    width: -moz-calc(50% - 10px);
    width: calc(50% - 10px);
    margin: 3px;
    float: left;
    background: #fff;
    color: #4e4e4e;
    border-radius: 10px;
    font-size: 15px;
    line-height: 17px;
    padding: 0 10px;
    height: 50%;
    box-sizing: border-box;
    text-align: center;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-flex-flow: column wrap;
    flex-flow: column wrap;
    justify-content: center;
    -webkit-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
}
.answer input[type="radio"] {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    top: 0;
    left: 0;
}
.answer input[type="radio"]:checked ~ span {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    padding: 0 10px;
    border-radius: 10px;
    color: #fff;
    background: url('../images/quest_gradient.jpg') repeat-x center center / cover;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-flex-flow: column wrap;
    flex-flow: column wrap;
    justify-content: center;
}
.answer.selected {
    z-index: 150;
}
.answer.selected input[type="radio"]:checked ~ span {
    background: #fff;
    color: #4e4e4e;
}
.skipCounter {
    opacity: 0;
    visibility: hidden;
    position: absolute;
    left: 50%;
    top: 50%;
    padding: 10px 20px;
    background: url('../images/ui/timer_grad_yellow.png') repeat-x center center / auto 120%;
    cursor: pointer;
    transform: translate(-50%, -50%);
    border-radius: 7px;
    font-size: 18px;
    font-family: "DIN", Arial, sans-serif;
    color: #4e4e4e;
    z-index: 500;
    transition: opacity 250ms;
}
.skipCounter.active {
    visibility: visible;
    opacity: 1;
}
@media (max-height: 320px) {
    .answer {
        height: 45%;
    }
}
@media (max-height: 300px) {
    .question {
        min-height: 44px;
    }
    .answers {
        max-height: 150px;
    }
}
@media (max-height: 280px) {
    #questionWrap {
        padding: 55px 30px 20px 30px;
    }
    .queDescription h3 {
        font-size: 24px !important;
        padding-top: 5px;
    }
    #questionWrap[data-category=Innovation] .queDescription h3 {
        font-size: 20px !important;
    }
    .queImage {
        height: 46%;
    }
}
@media only screen and (orientation: portrait) {
    #questionWrap {
        padding: 62px 25px 40px 25px;
    }
    #questionWrap[data-category="Innovation"] .question {
        min-height: 27%;
    }
    .answers {
        height: 56vh;
        float: left;
        max-height: none;
    }
    #questionWrap[data-category="Innovation"] .answers {
        height: calc(45vh - 12px);
    }
    .answer {
        width: 100%;
        height: 12vh;
        max-height: none;
    }
    #questionWrap[data-category="Innovation"] .answer {
        height: 10vh;
    }
    .skipCounter {
        position: relative;
        top: auto;
        left: 50%;
        margin-top: 30px;
        float: left;
    }
    #questionWrap[data-category=Innovation] .queImage {
        width: 45%;
        height: 30%;
    }
    #questionWrap[data-category=Innovation] .queDescription.actImage {
        width: 54%;
    }
}
@media only screen and (orientation: portrait) and (max-height: 560px) {
    .answers {
        height: 50vh;
    }
    #questionWrap[data-category="Innovation"] .answers {
        height: calc(45vh - 12px);
    }
    .answer {
        height: 11vh;
    }
    #questionWrap[data-category="Innovation"] .answer {
        height: 10vh;
    }
}
#timerWrap {
    width: 100%;
    height: 29px;
    position: fixed;
    z-index: 50;
    bottom: 0;
    left: 0;
}
#timerWrap .timeline {
    position: absolute;
    width: 100%;
    height: 100%;
    background: url('../images/ui/timer_grad_dark.png') repeat-x center center / contain;
}
.timeMask {
    position: absolute;
    bottom: 11px;
    width: 100%;
    height: 65px;
    z-index: 70;
}
.timeMask .maskLeft {
    float: left;
    width: -webkit-calc(100% - 120px);
    width: -moz-calc(100% - 120px);
    width: calc(100% - 120px);
    height: 100%;
    background: url('../images/ui/mask_left.png') repeat-x right top;
}
.timeMask .maskRight {
    float: right;
    width: 120px;
    height: 100%;
    background: url('../images/ui/mask_right.png') no-repeat center center / 120px 65px;
}
#questTime {
    font-family: 'DIN', Arial, Helvetica, sans-serif;
    position: absolute;
    right: 15px;
    top: 5px;
    color: #a5a0a0;
    z-index: 100;
}
#questTime span {
    font-size: 12px;
    color: #fff;
}
.timerProgress {
    position: absolute;
    width: 0;
    height: 100%;
    background: url('../images/ui/timer_grad_yellow.png') repeat-x center center / contain;
    z-index: 50;
    transition: linear 0.1s;
}
#successScreen, #failScreen, #sleepScreen {
    position: fixed;
    left: 0;
    top: 0;
    padding: 60px 60px 40px 60px;
    width: 100%;
    height: 100%;
    display: none;
}
#successScreen {
    background-color: rgba(67, 204, 124, 0.8);
}
#failScreen, #sleepScreen {
    background-color: rgba(228, 60, 136, 0.8);
}
.scrMessage {
    font-family: 'DIN', Arial, Helvetica, sans-serif;
    font-size: 30px;
    padding: 5px 0;
    border-radius: 10px;
    display: block;
    width: 100%;
    height: 80px;
    color: #fff;
    text-align: center;
}
#successScreen .scrMessage {
    background: #43cc7c;
}
#failScreen .scrMessage, #sleepScreen .scrMessage {
    background: #e43c88;
}
#scrEmoji {
    width: 50px;
    height: 50px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -25px 0 0 -25px;
    z-index: 200;
}
#scrEmoji.yes {
    background: url('../images/icons/emoji_yes.svg') no-repeat center center / contain;
}
#scrEmoji.no {
    background: url('../images/icons/emoji_no.svg') no-repeat center center / contain;
}
#scrEmoji.zzz {
    background: url('../images/icons/emoji_zzz.svg') no-repeat center center / contain;
}
#roomEnds {
    opacity: 0;
    position: fixed;
    z-index: 250;
    width: 100%;
    height: 100%;
    left: -100%;
    top: 0;
    background: url('../images/quest_gradient.jpg') repeat-x center center / cover;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-flex-flow: column wrap;
    flex-flow: column wrap;
    justify-content: center;
    padding: 0 18%;
    transition: all ease 0.3s;
}
#roomEnds p {
    font-family: 'DIN', Arial, Helvetica, sans-serif;
    text-align: center;
    font-size: 30px;
    color: #fff;
    line-height: 1.2em;
}
#roomEnds p span.textSmile {
    position: absolute;
    display: inline-block;
    background: url('../images/icons/emoji_smile.png') no-repeat center center / contain;
    width: 40px;
    height: 40px;
}
#roomEnds #playNext {
    color: #fff;
    text-decoration: underline;
}
@media (max-height: 300px) {
    .scrMessage {
        height: auto;
        font-size: 30px;
    }
    .scrMessage br {
        display: none;
    }
    #roomEnds {
        padding: 0 10%;
    }
}
@media only screen and (orientation: portrait) {
    #successScreen, #failScreen, #sleepScreen {
        padding: 60px 25px 40px 25px;
    }
    .scrMessage {
        height: 16vh;
        padding: 20px 0;
    }
    #scrEmoji {
        top: 0;
    }
    #roomEnds {
        padding: 0 20px;
    }
    #roomEnds p {
        font-size: 27px;
        line-height: 1.3em;
    }
}
/*///////////////////////////////////////////////////////
// Win Screen / Win Checkout
//////////////////////////////////////////////////////*/
#winScreen, #winCheckout, #winCheckoutForm, #winInfo {
    display: none;
    position: relative;
    width: 100%;
    height: 100%;
    background: url('../images/win_bg.jpg') repeat center center / cover;
    padding: 40px 20px 20px 20px;
    z-index: 400;
    overflow: auto;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}
#winCheckout, #winCheckoutForm {
    padding: 40px 50px 20px 50px;
}
#winInfo {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 500;
}
#winScreen .innerWrap, #winInfo .innerWrap {
    position: relative;
    float: left;
    padding: 10px 40px 20px 40px;
    width: -webkit-calc(100% - 250px);
    width: -moz-calc(100% - 250px);
    width: calc(100% - 250px);
}
#winInfo .innerWrap {
    padding: 10px 55px 20px 40px;
}
.winCheckout .innerWrap {
    position: relative;
    float: right;
    width: 55%;
    padding: 10px 20px 20px 20px;
}
.winLeft {
    width: 55%;
    position: relative;
    float: left;
    padding: 10px 20px 20px 40px;
}
.winRight {
    position: absolute;
    height: 75%;
    width: 45%;
    right: 0;
    bottom: 45px;
}
.winRight .smileyStd, .winRight .smileyGoal, .winRight .smileyZero {
    position: absolute;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: left top;
    background-size: 70% auto;
}
.winRight .smileyStd {
    background-image: url('../images/smiley_neutral.png');
}
.winRight .smileyZero {
    background-image: url('../images/smiley_zero.png');
}
.winRight .smileyGoal {
    display: none;
    background-image: url('../images/smiley_goal.png');
    background-size: auto 100%;
}
.winCode {
    font-size: 1.1em;
    color: #4e4e4e;
    width: 100%;
    display: block;
    padding-top: 5px;
}
.winCode span {
    font-weight: 600;
    letter-spacing: 0.05em;
}
#winScreen h2, #winInfo h2 {
    color: #4e4e4e;
    font-size: 35px;
    line-height: 1em;
    display: inline-block;
    width: 100%;
}
#winScreen p, #winInfo p {
    margin-top: 15px;
    color: #4e4e4e;
    font-size: 15px;
    line-height: 1.4em;
}
#winInfo p a, #winInfo p a:visited, #winScreen p a, #winScreen p a:visited {
    color: #7150e9;
}
#winScreen .btn, #winInfo .btn {
    margin-top: 20px;
    font-size: 18px;
    min-width: auto;
}
#winScreen .btnWinWrap .btn:first-of-type {
    margin-right: 10px;
}
.playerHighscore {
    width: 100%;
    color: #4e4e4e;
    font-size: 15px;
    margin-top: 10px;
    float: left;
    clear: both;
}
.scoreHeadline br {
    display: none;
}
.optLinks {
    position: fixed;
    z-index: 100;
    bottom: 30px;
}
#winInfo .optLinks {
    position: relative;
    width: 100%;
    z-index: 100;
    bottom: auto;
    float: left;
    margin-top: 25px;
}
.underBtn {
    font-family: 'DIN', Arial, Helvetica, sans-serif;
    color: #4e4e4e;
    font-size: 20px;
    margin-right: 20px;
    text-decoration: underline;
    float: left;
    padding: 5px;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
#winScreen .winImage, #winInfo .winImage {
    position: absolute;
    right: 20px;
    bottom: 95px;
    width: 45%;
    height: calc(100% - 160px);
    background: url('../images/price_2020.png') no-repeat right bottom / contain;
}
#winScreen .winImage {
    bottom: auto;
    top: 12vh;
}
#winScreen .winImage span {
    position: absolute;
    bottom: -6%;
    left: auto;
    right: 0;
}
#winInfo .winImage {
    height: calc(100% - 165px);
    bottom: auto;
    top: 13vh;
}
#winInfo .winImage span {
    position: absolute;
    bottom: -7%;
    left: auto;
    right: 0;
}
a.winImage, a.winImage:visited {
    text-decoration: none;
    color: #4e4e4e;
    font-size: 10px;
    display: block;
}
.winImage span {
    position: absolute;
    bottom: -12%;
    left: 20px;
    display: block;
}
.winCheckout .winImage {
    position: absolute;
    left: -25px;
    top: 15px;
    width: 46%;
    height: 80%;
    background: url('../images/price_2020.png') no-repeat center bottom /contain;
}
.winCheckout .winImage span {
    position: absolute;
    bottom: -30px;
    left: 0;
}
.winCheckout .backBtn {
    top: 22px;
}
.winCheckout h2 {
    color: #4e4e4e;
    font-size: 30px;
    line-height: 1em;
    margin-bottom: 10px;
}
.winCheckout p {
    color: #4e4e4e;
    font-size: 14px;
}
#conPhone {
    font-family: 'PT Sans', Arial, sans-serif;
    width: 100%;
    border: 0;
    outline: 0;
    padding: 10px;
    border-radius: 5px;
    font-size: 14px;
    margin-top: 20px;
    appearance: none;
}
.checkTerms {
    display: inline-block;
    margin: 25px 0 15px 0;
    position: relative;
}
.winCheckout .checkTerms p.error, #conPhone + .error {
    display: none;
    color: #b43636;
}
#conPhone + .error {
    font-size: 12px;
    margin-top: 3px;
}
.winCheckout .checkTerms.error p.error, #conPhone.error ~ .error {
    display: block;
}
.agreeCheck {
    position: absolute;
    top: 0;
    left: 0;
    width: 32px;
    height: 32px;
    background: #ffffff;
    border-radius: 4px;
    float: left;
}
.checkTerms.error .agreeCheck, #wrapper input[type="text"].error {
    border: 1px solid #b43636;
}
.agreeCheck.checked {
    background: url('../images/icons/check_gradient.png') no-repeat center center / 20px 20px #ffffff;
}
.formWrap, .formCheckbox, .formSend {
    float: left;
    width: 100%;
}
.formSend {
    margin-top: 25px;
}
.checkboxGroup {
    margin-top: 15px;
}
span.error {
    float: left;
    width: 100%;
    color: #b43636;
    margin-bottom: 5px;
}
.checkboxGroup span.error {
    margin-top: 10px;
}
#directWin input, #winCheckout input {
}
.formCheckbox input[type="checkbox"] {
    position: absolute;
    z-index: 10;
    height: 32px;
    width: 32px;
    display: block;
    cursor: pointer;
    opacity: 0;
}
.formCheckbox input[type="checkbox"] + label {
    position: relative;
    display: inline-block;
    background: transparent;
    height: auto;
    width: 100%;
    border-radius: 0;
    border: 0;
    cursor: inherit;
    padding-left: 45px;
}
.formCheckbox input[type="checkbox"] + label:before {
    position: absolute;
    z-index: -1;
    content: "";
    display: block;
    left: 0;
    top: 0;
    width: 32px;
    height: 32px;
    background: #fff;
    border-radius: 3px;
    border: 1px solid #e5e5e5;
    cursor: pointer;
}
.formCheckbox input[type="checkbox"].error + label:before {
    border: 1px solid #c0392b;
}
.formCheckbox input[type="checkbox"]:checked + label {
    background: none;
    width: 100%;
}
.formCheckbox input[type="checkbox"]:checked + label:before, .elviForms input[type="checkbox"]:checked + label:before {
    background: url('../images/icons/check_gradient.png') no-repeat center center / 20px 20px #ffffff;
}
.formCheckbox input[type="checkbox"] + label span {
    position: relative;
    width: 100%;
    left: auto;
    top: 5px;
    padding: 0;
    line-height: 1.4em;
    font-size: 12px;
}
.winCheckout .checkTerms p {
    color: #4e4e4e;
    font-size: 12px;
    padding-left: 45px;
    float: left;
    word-break: break-word;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    hyphens: auto;
}
.winCheckout .checkTerms p.error {
    margin-bottom: 15px;
}
.checkTerms p a, .checkTerms p a:visited {
    color: #4e4e4e;
    font-weight: 700;
}
.winStep1, .winStep2 {
    position: relative;
    height: 100%;
    z-index: 20;
}
.winStep1 .innerWrap a, .winStep1 .innerWrap a:visited {
    color: #7150e9;
}
.winStep2 {
    display: none;
}
.winCheckout .winStep2 > h2 {
    color: #4e4e4e;
    font-size: 40px;
    line-height: 1.1em;
    margin-top: 40px;
}
.winStep2 .btnWrap {
    margin-top: 20px;
    display: inline-block;
}
.winStep2 .btnWrap .underBtn.replay {
    margin-right: 45px;
}
.winStep2 .btnWrap .underBtn {
    padding: 7px 0;
    margin-right: 0;
}
.btnConnectWin {
    float: right;
    width: 100%;
}
.winBgPort {
    display: none;
}
#winCheckoutForm p {
    margin-bottom: 10px;
}
.btnWinWrap > strong {
    font-size: 15px;
    color: #4e4e4e;
    margin: 15px 0 0 0;
    display: block;
}
#directWin {
    margin-top: 20px;
}
#directWin input[type="text"] {
    width: 100%;
    float: left;
    padding: 12px 15px;
    border: 0;
    margin: 5px 0;
    font-size: 15px;
}
.winStepFalse, .winStepTrue {
    display: none;
}
.saveDirectWin {
    width: 100%;
}
@media (max-height: 360px) {
    #winScreen h2 {
        font-size: 28px;
    }
}
@media (max-height: 330px) {
    .winCheckout .winStep2 > h2 {
        margin-top: 25px;
    }
    .winStep2 .btnWrap {
        margin-top: 10px;
    }
}
@media (max-height: 320px) {
    #winScreen h2 {
        font-size: 24px;
    }
    #winScreen .innerWrap {
        width: -webkit-calc(100% - 200px);
        width: -moz-calc(100% - 200px);
        width: calc(100% - 200px);
        z-index: 20;
    }
    #winScreen .winImage {
        height: calc(100% - 140px);
    }
}
@media (max-height: 300px) {
    .winCheckout .winStep2 > h2 {
        margin-top: 15px;
    }
    .optLinks {
        bottom: 20px;
    }
    .winRight .smileyStd, .winRight .smileyZero {
        background-size: 60% auto;
    }
}
@media (max-height: 280px) {
    #winScreen {
        padding: 20px 0 20px 0;
    }
    .optLinks {
        bottom: 15px;
    }
    .underBtn {
        font-size: 18px;
    }
    #winScreen .bottomMenu {
        height: 88px;
    }
    #winScreen .bottomMenu > a {
        margin-top: 5px;
        float: left;
    }
}
@media only screen and (orientation: portrait) {
    #winScreen, #winCheckout, #winInfo {
        background: url('../images/bg_textur.jpg') repeat top center / cover;
    }
    #winCheckout, #winCheckoutForm {
        padding: 40px 0 20px 0;
    }
    #winScreen {
        padding: 20px 0 20px 0;
    }
    #winScreen .innerWrap, #winInfo .innerWrap {
        width: 100%;
        padding: 40px 20px 20px 20px;
    }
    #winInfo .innerWrap {
        padding: 40px 20px 120px 20px;
    }
    .winCheckout .innerWrap {
        position: relative;
        float: left;
        width: 100%;
        padding: 40px 20px 70px 20px;
    }
    .winBgPort {
        display: block;
        background: url('../images/win_bg.png') no-repeat top center / contain;
        position: absolute;
        width: 100%;
        height: 100%;
        z-index: -1;
        top: 0;
        left: 0;
    }
    .winLeft {
        width: 100%;
        padding: 15px 20px 20px 20px;
    }
    .winRight {
        position: relative;
        height: 25vh;
        width: 100%;
        right: auto;
        bottom: auto;
    }
    .winRight .smileyStd, .winRight .smileyGoal, .winRight .smileyZero {
        background-position: 40% top;
        background-size: contain;
    }
    .winRight .smileyGoal {
        background-position: center top;
        background-size: auto 135%;
    }
    #winScreen h2, #winInfo h2 {
        font-size: 32px;
    }
    #winScreen .winImage, #winInfo .winImage {
        position: relative;
        right: auto;
        bottom: auto;
        left: 50%;
        top: 0;
        transform: translateX(-50%);
        width: 100%;
        height: 35%;
        background: url('../images/price_2020.png') no-repeat center bottom / contain;
        max-height: 235px;
    }
    .winCheckout .winImage {
        position: relative;
        left: auto;
        bottom: auto;
        width: 100%;
        height: 200px;
        background: url('../images/price_2020.png') no-repeat center bottom / contain;
    }
    .winCheckout .winImage span {
        position: absolute;
        bottom: -6%;
        left: 0;
        width: 100%;
        text-align: center;
    }
    .winImage span {
        bottom: -8%;
    }
    #winScreen .winImage span, #winInfo .winImage span {
        width: 100%;
        left: 0;
        right: auto;
        bottom: -10%;
        white-space: nowrap;
        text-align: center;
    }
    .winContent {
        position: relative;
        top: -25px;
    }
    .optLinks {
        position: relative;
        width: 100%;
        z-index: 100;
        bottom: auto;
        float: left;
        margin-top: 25px;
    }
    .scoreHeadline br {
        display: inline-block;
    }
    .underBtn {
        padding: 0;
    }
}
@media only screen and (orientation: portrait) and (max-height: 540px) {
    #winScreen .innerWrap, #winInfo .innerWrap {
        padding-bottom: 100px;
    }
    #winScreen .winImage, #winInfo .winImage {
        min-height: 120px;
    }
}
@media only screen and (orientation: portrait) and (max-height: 510px) {
    #winScreen .innerWrap, #winInfo .innerWrap {
        padding-top: 20px;
    }
    #winScreen .btn, #winInfo .btn {
        margin-top: 15px;
        font-size: 18px;
        min-width: 100px;
        padding: 5px 20px;
    }
    #winScreen p, #winInfo p {
        margin-top: 15px;
        color: #4e4e4e;
        font-size: 13px;
        line-height: 1.5em;
    }
    #winScreen h2, #winInfo h2 {
        font-size: 26px;
    }
    .optLinks {
        margin-top: 15px;
    }
    .optLinks .underBtn {
        font-size: 18px;
    }
}
@media only screen and (orientation: portrait) and (max-width: 320px) {
    .btn, .underBtn {
        font-size: 18px;
    }
    #cookieNotice .cnClose, #loginInfo .infoClose {
        margin-right: 0;
    }
}
/*///////////////////////////////////////////////////////
// Highscore
//////////////////////////////////////////////////////*/
#highscoreScreen {
    display: none;
    position: fixed;
    z-index: 450;
    width: 100%;
    height: 100%;
    background: url('../images/win_bg.jpg') repeat center center / cover;
    padding: 40px 50px 60px 50px;
}
#scoreTable {
    position: relative;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    overflow: hidden;
    border-radius: 10px;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-flex-flow: column wrap;
    flex-flow: column wrap;
    justify-content: center;
}
.bottomFade {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 50px;
    z-index: 20;
    background: url('../images/fader.png') repeat-x center bottom / contain;
}
.titleTop {
    font-family: 'DIN', Arial, Helvetica, sans-serif;
    font-size: 20px;
    width: 150px;
    height: 40px;
    background: url('../images/ui/highscore_top.svg') no-repeat bottom center / contain;
    text-transform: uppercase;
    color: #4e4e4e;
    text-align: center;
    padding-top: 20px;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}
.scoreHead {
    font-family: 'DIN', Arial, Helvetica, sans-serif;
    width: 100%;
    position: relative;
    background: #fff;
    left: 0;
    padding-top: 20px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    z-index: 20;
    overflow: hidden;
}
.scoreHead div:after {
    content: " ";
    background: url('../images/icons/drop_down_dark.svg') no-repeat right center / contain;
    height: 6px;
    width: 15px;
    display: inline-block;
}
.scoreHead div, .scoreRow div {
    float: left;
}
.scoreMarker {
    position: relative;
    height: 2px;
    width: 100%;
    float: left;
    background: #7150e9;
}
.scoreMarker:before {
    content: "100";
    position: absolute;
    right: 0;
    width: 26px;
    height: 22px;
    background: #ffffff;
    border: 2px solid #7150e9;
    font-size: 12px;
    border-radius: 50%;
    top: -13px;
    text-align: center;
    box-sizing: content-box;
    padding-top: 4px;
}
/* .scoreHead div:nth-child(1), .scoreRow div:nth-child(1) {
    width: 20%;
} */
.scoreHead div:nth-child(1), .scoreRow div:nth-child(1) {
    width: 70%;
}
.scoreHead div:nth-child(2), .scoreRow div:nth-child(2) {
    width: 30%;
}
.scoreList {
    position: relative;
    width: 100%;
    background: #fff;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    color: #4e4e4e;
    height: calc(100vh - 160px);
}
.scoreRow {
    float: left;
    width: 100%;
}
.scoreRow:nth-child(even) {
    background: url('../images/table_bg.png') no-repeat center center / cover;
}
.scoreRow:nth-child(odd) {
    background: #fff;
}
.scoreRow.active {
    background: #43cc7c;
    color: #fff;
}
.scoreRow.purple {
    background: #7150e9 !important;
    color: #fff !important;
}
.scoreRow.purple span:before {
    content: "";
    display: inline-block;
    width: 14px;
    height: 14px;
    background: url('../video/playbutton.png') no-repeat center center / contain;
    position: relative;
    top: 4px;
    margin-right: 1px;
}
.scoreRow.purple span {
    font-size: 12px;
    padding-left: 8px;
    position: relative;
    top: -2px;
}
.scoreRow > div, .scoreHead > div {
    padding: 5px 2px;
    font-size: 15px;
}
.scoreRow:last-child {
    padding-bottom: 31px;
}
.scoreRow.active:last-child, .scoreRow.purple:last-child {
    padding-bottom: 0;
}
.scoreHead > div:nth-child(1) {
    padding: 5px 10px 5px 20px;
}
.scoreRow > div:nth-child(1) {
    padding: 5px 20px;
}
@media only screen and (orientation: portrait) {
    #highscoreScreen {
        padding: 40px 15px 60px 15px;
    }
    #highscoreScreen .underBtn {
        margin-right: 0;
    }
    #scoreTable {
        top: 20px;
    }
    .scoreList {
        height: calc(100vh - 290px);
    }
}
/*///////////////////////////////////////////////////////
// Share Screens
//////////////////////////////////////////////////////*/
#bonusShare {
    display: none;
    position: fixed;
    overflow: auto;
    z-index: 400;
    width: 100%;
    height: 100%;
    background: url('../images/share_bg.jpg') repeat center center / cover;
    padding: 10px 40px;
}
#shareScreen {
    opacity: 0;
    position: fixed;
    top: 0;
    z-index: 500;
    width: 100%;
    height: 100%;
    left: -100%;
    background: url('../images/menu_bg.jpg') repeat center center / cover;
    padding: 40px 50px 20px 50px;
    transition: all ease 0.3s;
}
.centerWrap {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-flex-flow: column wrap;
    flex-flow: column wrap;
    justify-content: center;
}
#shareScreen .backBtn {
    color: #fff;
}
#shareScreen .shareClose {
    left: 0;
    top: 0;
}
#shareScreen .backBtn:before {
    background: url('../images/icons/arrow_back_white.svg') no-repeat left center / 21px 14px;
}
#bonusShare h2 {
    color: #4e4e4e;
    font-size: 30px;
    line-height: 1.1em;
    text-align: center;
    padding: 20px 0;
}
.socialMenu {
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    flex-flow: row wrap;
    justify-content: center;
    max-width: 560px;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}
.socIcon {
    display: block;
    position: relative;
    width: -webkit-calc(33.33% - 20px);
    width: -moz-calc(33.33% - 20px);
    width: calc(33.33% - 20px);
    margin: 0 10px;
    background-color: #fff;
    background-repeat: no-repeat;
    background-position: center 30px;
    background-size: auto 65px;
    border-radius: 10px;
    -moz-box-shadow: 0 0 6px #ccc;
    -webkit-box-shadow: 0 0 6px #ccc;
    box-shadow: 0 0 6px #ccc;
    padding: 10px;
    height: 150px;
    transition: all 0.25s;
}
.socIcon.facebook {
    background-image: url('../images/icons/facebook_share.svg');
}
.socIcon.instagram {
    background-image: url('../images/icons/instagram.svg');
}
.socIcon.whatsapp {
    background-image: url('../images/icons/whatsapp.svg');
}
.socIcon.tiktok {
    background-image: url('../images/icons/tiktok.svg');
}
.socIcon > span {
    position: absolute;
    z-index: 10;
    width: 100%;
    text-align: center;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 12px;
    color: #4e4e4e;
}
/* #bonusShare .socIcon {
    width: -webkit-calc(25% - 20px);
    width: -moz-calc(25% - 20px);
    width: calc(25% - 20px);
    height: 120px;
}
#bonusShare .socIcon > span {
    display: none;
} */
.skipToWin {
    position: relative;
    font-size: 15px;
    color: #4e4e4e;
    float: right;
    margin-top: 15px;
    margin-right: 30px;
}
.snapchat .skipToWin {
    left: 50%;
    transform: translateX(-50%);
    float: left;
    margin-right: 0;
}
.bsTotal {
    display: none;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    float: left;
    margin-top: 14px;
    font-size: 16px;
    color: #4e4e4e;
    font-weight: 700;
}
.shariff-button a {
    background-color: transparent;
    position: absolute;
    z-index: 20;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    opacity: 0;
    text-indent: -999em;
}
.shariff-button {
    list-style: none;
}
@media (max-height: 360px) {
    .socIcon {
        height: 155px;
        background-position: center 25px;
        background-size: auto 50px;
    }
}
@media (max-height: 340px) {
    .socIcon {
        height: 135px;
    }
}
@media (max-height: 320px) {
    #bonusShare h2 {
        font-size: 26px;
        padding: 10px 0 20px 0;
    }
    .socIcon {
        height: 135px;
    }
}
@media (max-height: 300px) {
    .socIcon {
        height: 110px;
        background-position: center 20px;
        background-size: auto 45px;
    }
    .socIcon > span {
        bottom: 15px;
    }
}
@media (max-width: 500px) {
    #bonusShare {
        padding: 20px;
    }
    .skipToWin {
        right: 20px;
    }
}
@media only screen and (orientation: portrait) {
    #shareScreen {
        padding: 30px 20px 0 20px;
    }
    #shareScreen .backBtn {
        margin-left: 5px;
    }
    #bonusShare h2 {
        font-size: 9vw;
        padding: 15vh 0 30px 0;
    }
    #bonusShare h2 br {
        display: none;
    }
    .socIcon {
        margin: 0 10px 0 0;
        width: -webkit-calc(33.33% - 10px);
        width: -moz-calc(33.33% - 10px);
        width: calc(33.33% - 10px);
        height: 170px;
    }
    .socIcon:last-child {
        margin: 0;
    }
    .skipToWin {
        right: 0;
        margin: 0;
        padding: 25px;
        position: absolute;
        bottom: 20px;
    }
    .snapchat .skipToWin {
        right: auto;
    }
}
@media only screen and (orientation: portrait) and (max-height: 480px) {
    #bonusShare h2 {
        padding: 9vh 0 30px 0;
    }
    .socIcon {
        background-size: auto 55px;
        height: 145px;
    }
}
/*///////////////////////////////////////////////////////
// Info Screens
//////////////////////////////////////////////////////*/
#gameInfo {
    position: fixed;
    z-index: 500;
    left: -100%;
    background: url('../images/bg_textur.jpg') repeat center center / cover;
    width: 100%;
    height: 100%;
    padding: 40px 50px 60px 50px;
    transition: all 0.5s;
    box-sizing: border-box;
    overflow: auto;
    opacity: 0;
}
#gameInfo strong {
    font-weight: 700;
}
#gameInfo .backBtn {
    top: 30px;
}
.infoContent {
    background: #ffffff;
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    top: -10px;
}
.infoContent img {
    width: 75%;
    height: auto;
    margin-left: 20%;
    margin-top: 15px;
}
#gameInfo .titleTop {
    top: -10px;
}
.infoRow {
    position: relative;
    float: left;
    width: 100%;
    padding: 10px 20px 10px 50px;
    border-bottom: 1px solid #f3f3f3;
    vertical-align: middle;
}
.infoRow:last-child {
    border-bottom: 0;
}
.infoControls .infoIcon {
    background-image: url('../images/icons/info_controls.svg');
}
.infoQuestions .infoIcon {
    background-image: url('../images/icons/info_questions.svg');
}
.infoErli .infoIcon {
    background-image: url('../images/icons/info_erli.svg');
}
.infoHomescreen .infoIcon {
    background-image: url('../images/icons/home_screen_icon.png');
}
.infoRow .infoIcon {
    width: 55px;
    height: 55px;
    float: left;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
}
.infoRow p {
    float: left;
    width: -webkit-calc(100% - 55px);
    width: -moz-calc(100% - 55px);
    width: calc(100% - 55px);
    font-size: 15px;
    padding: 5px 0 0 15px;
}
.infoRow ul {
    float: left;
    width: calc(100% - 55px);
    padding-left: 30px;
    margin-top: 5px;
    font-size: 15px;
}
#gameInfo .secFooter {
    position: relative;
    padding: 20px 0;
}
#gameInfo .btnWrap, #gameInfo .btn.replay {
    width: 100%;
}
@media only screen and (orientation: portrait) {
    #gameInfo {
        padding: 40px 20px 60px 20px;
    }
    #gameInfo .backBtn, #gameInfo .titleTop, .infoContent {
        top: 20px;
    }
    .infoRow {
        padding: 12px 10px 16px 10px;
    }
    #gameInfo .secFooter .btnWrap {
        margin: 20px 0 40px 0;
    }
}
/*///////////////////////////////////////////////////////
// Misc Pages
//////////////////////////////////////////////////////*/
.textScreen {
    display: none;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: url('../images/bg_textur.jpg') repeat center center / cover;
    padding: 60px 50px 30px 50px;
}
#termsScreen, #privacyScreen, #impressScreen {
    z-index: 700;
}
.textWrapper {
    padding-bottom: 60px;
}
.textWrapper > h2:first-child {
    font-size: 24px;
    margin-bottom: 20px;
}
.textWrapper h3, .textWrapper h4 {
    margin: 20px 0 10px 0;
}
.textWrapper ul {
    margin: 10px 0 10px 15px;
}
.textWrapper p {
    margin-bottom: 10px;
}
.textWrapper strong, .textWrapper b {
    font-weight: 700;
}
.textWrapper a, .textWrapper a:visited {
    color: #7150e9;
}
.textWrapper ol {
    counter-reset: item;
}
.textWrapper ol li {
    display: block;
    padding-left: 20px;
    margin-bottom: 10px;
}
.textWrapper ol li ol {
    margin-top: 10px;
}
.textWrapper ol li ol li {
    padding-left: 10px;
}
.textWrapper ol li ol li ol li {
    padding-left: 20px;
}
.textWrapper ol li:before {
    content: counters(item, ".") ".";
    counter-increment: item;
    font-size: 1.6em;
    font-family: 'DIN', Arial, Helvetica, sans-serif;
    color: #7150e9;
    float: left;
    margin-left: -20px;
}
.textWrapper ol li ol li:before {
    content: counters(item, ".") " ";
    font-family: 'PT Sans', Helvetica, Arial, sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 13px;
    color: #000;
    margin-left: -25px;
}
.textWrapper ol li ol li ol li:before {
    margin-left: -35px;
}
@media only screen and (orientation: portrait) {
    .textScreen {
        padding: 75px 20px 30px 20px;
    }
}
/*///////////////////////////////////////////////////////
// Offline JS
//////////////////////////////////////////////////////*/
.offline-ui, .offline-ui.offline-ui-up, .offline-ui.offline-ui-down {
    opacity: 0;
    position: fixed;
    width: 100%;
    height: 100%;
    left: -100%;
    top: 0;
    right: auto;
    bottom: auto;
    font-family: 'DIN', Arial, Helvetica, sans-serif;
    text-align: center;
    font-size: 24px;
    line-height: 1.2em;
    color: #fff;
    border-radius: 0;
    padding: 0 1em 2.5em 1em !important;
    background: url('../images/quest_gradient.jpg') repeat-x center center / cover;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-flex-flow: column wrap;
    flex-flow: column wrap;
    justify-content: center;
}
.offline-ui.offline-ui-down {
    opacity: 1;
    left: 0;
}
.offline-ui .offline-ui-content {
    width: 100%;
    text-align: center;
}
.offline-ui.offline-ui-down.offline-ui-connecting, .offline-ui.offline-ui-down.offline-ui-waiting {
    background: url('../images/quest_gradient.jpg') repeat-x center center / cover;
    color: #fff;
}
.offline-ui.offline-ui-down.offline-ui-connecting:after, .offline-ui.offline-ui-down.offline-ui-waiting:after {
    border-top-color: #fff;
    border-left-color: #fff;
    top: 100px;
    right: auto;
    left: 50%;
    margin-left: -1em;
    width: 2em;
    height: 2em;
}
.offline-ui.offline-ui-down:before {
    width: 100%;
    text-align: center;
    content: "Internetverbindung verloren";
    font-size: 30px;
    color: #fff;
}
.offline-ui.offline-ui-down.offline-ui-waiting .offline-ui-retry {
    display: none;
}
.offline-ui.offline-ui-down.offline-ui-waiting {
    padding: 0 1em 2.5em 1em !important;
}
/*///////////////////////////////////////////////////////
// Pannellum
//////////////////////////////////////////////////////*/
.pnlm-orientation-button {
    opacity: 0;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
/*///////////////////////////////////////////////////////
// Odometer Default Styles
//////////////////////////////////////////////////////*/
.odometer.odometer-auto-theme, .odometer.odometer-theme-default {
    display: -moz-inline-box;
    -moz-box-orient: vertical;
    display: inline-block;
    vertical-align: middle;
    *vertical-align: auto;
    position: relative;
}
.odometer.odometer-auto-theme, .odometer.odometer-theme-default {
    *display: inline;
}
.odometer.odometer-auto-theme .odometer-digit, .odometer.odometer-theme-default .odometer-digit {
    display: -moz-inline-box;
    -moz-box-orient: vertical;
    display: inline-block;
    vertical-align: middle;
    *vertical-align: auto;
    position: relative;
    padding-left: 2px;
}
.odometer.odometer-auto-theme .odometer-digit, .odometer.odometer-theme-default .odometer-digit {
    *display: inline;
}
.odometer.odometer-auto-theme .odometer-digit .odometer-digit-spacer, .odometer.odometer-theme-default .odometer-digit .odometer-digit-spacer {
    display: -moz-inline-box;
    -moz-box-orient: vertical;
    display: inline-block;
    vertical-align: middle;
    *vertical-align: auto;
    visibility: hidden;
}
.odometer.odometer-auto-theme .odometer-digit .odometer-digit-spacer, .odometer.odometer-theme-default .odometer-digit .odometer-digit-spacer {
    *display: inline;
}
.odometer.odometer-auto-theme .odometer-digit .odometer-digit-inner, .odometer.odometer-theme-default .odometer-digit .odometer-digit-inner {
    text-align: left;
    display: block;
    position: absolute;
    top: -4px;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
}
.odometer.odometer-auto-theme .odometer-digit .odometer-ribbon, .odometer.odometer-theme-default .odometer-digit .odometer-ribbon {
    display: block;
}
.odometer.odometer-auto-theme .odometer-digit .odometer-ribbon-inner, .odometer.odometer-theme-default .odometer-digit .odometer-ribbon-inner {
    display: block;
    -webkit-backface-visibility: hidden;
}
.odometer.odometer-auto-theme .odometer-digit .odometer-value, .odometer.odometer-theme-default .odometer-digit .odometer-value {
    display: block;
}
.odometer.odometer-auto-theme .odometer-digit .odometer-value.odometer-last-value, .odometer.odometer-theme-default .odometer-digit .odometer-value.odometer-last-value {
    position: absolute;
}
.odometer.odometer-auto-theme.odometer-animating-up .odometer-ribbon-inner, .odometer.odometer-theme-default.odometer-animating-up .odometer-ribbon-inner {
    transition: transform 2s;
}
.odometer.odometer-auto-theme.odometer-animating-up.odometer-animating .odometer-ribbon-inner, .odometer.odometer-theme-default.odometer-animating-up.odometer-animating .odometer-ribbon-inner {
    transform: translateY(-100%);
}
.odometer.odometer-auto-theme.odometer-animating-down .odometer-ribbon-inner, .odometer.odometer-theme-default.odometer-animating-down .odometer-ribbon-inner {
    transform: translateY(-100%);
}
.odometer.odometer-auto-theme.odometer-animating-down.odometer-animating .odometer-ribbon-inner, .odometer.odometer-theme-default.odometer-animating-down.odometer-animating .odometer-ribbon-inner {
    transition: transform 2s;
    transform: translateY(0);
}
.odometer.odometer-auto-theme .odometer-value, .odometer.odometer-theme-default .odometer-value {
    text-align: center;
    padding-top: 3px;
}
.odometer {
    font-size: 25px;
}
/*///////////////////////////////////////////////////////
// Overlay
//////////////////////////////////////////////////////*/
.overlay, .navOverlay {
    position: fixed;
    max-width: 0;
    max-height: 0;
    opacity: 0;
    overflow: auto;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 500;
    background: rgba(0, 0, 0, 0.35);
    transition: opacity 500ms;
}
.overlay.dark {
    z-index: 1000;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    flex-flow: column wrap;
    justify-content: center;
}
.overlay.active, .navOverlay.active {
    max-width: 100%;
    max-height: 100%;
    opacity: 1;
}
.overlay .overlayInner {
    position: absolute;
    width: 100%;
    min-width: 320px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding-bottom: 40px;
}
.overlay .overlayInnerClose {
    position: absolute;
    right: 30px;
    z-index: 30;
    top: 30px;
    cursor: pointer;
}
.overlay .icon-close {
    font-size: 24px;
}
.overlay .icon-close:before {
    color: #FFFFFF;
}
.overlay .overlayInner img {
    width: 100%;
    height: auto;
}
.overlay .overlayContent {
    text-align: center;
}
@media (max-width: 960px) {
    .overlay .overlayInner {
        padding: 0 30px 40px 30px;
    }
    .overlayInnerClose {
        top: -21px;
        right: 8px;
    }
}
@media only screen and (max-height: 500px) and (orientation: landscape) {
    .overlay .overlayInner {
        top: 20px;
    }
}
@media (max-width: 767px) {
    .overlay .overlayInner {
        padding: 0 15px;
        top: 30px;
        transform: translate(-50%, 0);
    }
}
/*///////////////////////////////////////////////////////
// Debug
//////////////////////////////////////////////////////*/
#gameDebug {
    position: fixed;
    background: #dadada;
    color: #000;
    z-index: 100;
    right: 0;
    bottom: 200px;
    width: 120px;
    height: 160px;
    font-size: 9px;
}
.debugTable.table {
    padding: 15px 10px;
}
.debugTable.row {
    display: table-row;
}
.debugTable.cell {
    display: table-cell;
}