/* Standards */
.clearfix{clear:both;}
body, * {margin: 0;padding: 0;line-height:1;color: #333;}
body, .open-sans {font-family: 'Open Sans', sans-serif;}
.open-sans-condensed, h1, h2, h3, h4, h5, .level, .time, .center, .user, .close, .timer, .msg-body .time-above, .msg-body .time-rest, .msg-body p, .startscreen p {font-family: 'Open Sans Condensed', sans-serif;}
.float-left, .level, .time{float:left;}
.float-right, .user, .close{float:right;}
img{max-width:100%;height:auto;}
.game-blue{color: #007e98 !important;}
.game-red{color: #a60d1f !important;}
.white{color: #fff !important;}
.game-blue-bg{background: #007e98 url(img/bluebg.jpg);background-size: cover;}
.game-red-bg{background: #a60d1f;}
.white-bg{background: #fff;}
.text-center {text-align: center;}
.text-left {text-align: left;}
.text-right {text-align: right;}
.padding-15{padding:15px;}
.padding-25{padding:25px;}
/* NEW */
.margin-auto{margin:0 auto;}
.block{display: block !important;}
.inline-block{display: inline-block !important;}
.inline{display: inline !important;}
.relative{position: relative;}
.absolute{position: absolute;}
.height15{height: 15px;}
.height25{height: 25px;}
.height50{height: 50px;}
.box-shadow{box-shadow: 0px 0px 20px 0px rgba(0,0,0,.5);}
.bodytext{font-size:26px;}
.bodytext small.disturber {text-transform: uppercase; font-size: 70%; background: #fff; border: 1px solid #007e98; padding: 10px; margin: 0 10px -10px 10px; color: #007e98; font-weight: 900; display: inline-block;}
.nodecoration, .nodecoration:hover, .nodecoration:active{text-decoration:none; background-image: none;}  
label{font-size: 20px;margin-bottom: 10px;}
#main{padding: 0;}
.form-control{font-size: 20px;}
.msg-body .headline-above{font-family: 'Open Sans Condensed', sans-serif;position: absolute; left: 0; top: -50px; font-size: 50px; font-weight: 900; line-height: 1; text-align: center; width: 100%; text-transform: uppercase;}
.msg-body .headline-above span{display:inline-block;color:#007e98;padding: 10px 15px; background: #fff;margin: auto;}
.blink_me {animation: blinker 2s linear infinite;}@keyframes blinker {50% {opacity: 0;}};

/* Standards design */
.relative, .level, .time, .center, .user, .close{position:relative;}
.absolute, .level span, .time span, .center span, .user span, .close span {font-size: 16px;position: absolute; top: -25px; margin: 0; padding: 0; left: 0;color:#000;font-weight: 900;}
.level, .time, .center, .user, .close {font-size:32px;padding: 15px;background: #fff;display:block;font-weight: 700;color:#007e98;text-transform: uppercase;position: relative;position: relative;}
.level span, .time span, .center span, .user span, .close span {}
.close:focus, .close:hover, .close {opacity: 1;margin: 0 0 0 25px;}
.center {position:absolute;text-align: center;left: 50%;margin-left: -120px;background:#007e98;color: #fff;font-size: 50px;}
.time {margin: 0 0 0 25px;}
.container-levels{z-index:0;left:0;top:0;right:0;bottom:0;}
.head{z-index:1;height:135px;background: rgb(255,255,255);background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);}
.gamelogo {float:left;width:125px;margin:25px 0 0 25px;z-index: 1;}
.border-h{float: left; width: calc(100% - 175px); background: url(img/border-h.jpg) repeat-x 50%; margin: 60px 0 0 25px; padding: 0 25px 0 0;}
.head .missscanmaster{position: absolute; left: -65px; top: -20px;}
.head .misterscanmaster{position: absolute; right: -75px; top: -20px;}

/* Overlays */
.game-overlay {overflow:auto;position: fixed;z-index:2;left:0;top:0;right:0;bottom:0;background: #007e98;background: linear-gradient(180deg, rgba(0,126,152,1) 0%, rgba(3,85,102,.9) 100%);}
/*.fadein-fadeout {animation: GameOverlayOut .3s linear; animation-fill-mode:both;animation-delay: 6s;}*/
@keyframes GameOverlay {0% { opacity:0;}100% {opacity:1;}}
@keyframes GameOverlayOut {0% { opacity:1;}100% {opacity:0;}}

.timer{position: fixed;left:0;top:0;right:0;bottom:0;text-align: center;padding: 20% 0 0 0;}
.timer span{display:block;position:absolute;left:calc(50% - 50px);font-size: 200px;color: #fff;font-weight:900;text-shadow: 0px 0px 25px rgba(0,0,0,.5);}

/* only fade */
@keyframes timerFadeOut {0% { opacity:0; } 50% {opacity:1;} 100% {opacity: 0;}}
.timer span { animation: timerFadeOut 1s linear; animation-fill-mode:both; }
.timer span:nth-child(1){ animation-delay: 1s }
.timer span:nth-child(2){ animation-delay: 2s }
.timer span:nth-child(3){ animation-delay: 3s }
.timer span:nth-child(4){ animation-delay: 4s }
.timer span:nth-child(5){ animation-delay: 5s }

.msg-body{position: relative; background: rgba(255,255,255,1);padding:25px; width: 60%; margin: 10% auto 0 auto; box-shadow: 0px 0px 25px 0px rgba(0,0,0,.5);}
.msg-body.wider{width: 80%; margin: 10% auto 0 auto; box-shadow: 0px 0px 25px 0px rgba(0,0,0,.2);}
.msg-body .time-above{color:#007e98;padding: 10px 15px; background: #fff; position: absolute; left: 50%; top: -50px; font-size: 50px; font-weight: 900; margin-left: -65px; line-height: 1;}
.msg-body .time-rest{color:#007e98;font-size: 26px; text-transform: uppercase; font-weight: 900; margin: 0 0 25px 0;}
.msg-body .headline, .pregame-overlay .headline, .headline{color: #007e98;font-size: 50px;text-transform: uppercase;font-weight: 900;line-height: 1;padding: 0;margin: 0;letter-spacing: -2px;margin: 0 0 25px 0;}
.msg-body p, .startscreen p{font-size: 36px;line-height: 38px;}

.pregame-overlay{overflow:autoposition: fixed;z-index:2;left:0;top:0;right:0;bottom:0;background: #fff url(img/ScanMasterScreen_1920.jpg); background-size: cover;}
.pregame-overlay .headline{margin: 0 auto 15px auto;}
.player-box {display:inline-block;border: 1px solid #007e98;padding: 25px;background: #fff;}
.player-box .game-logo {width: 75px;}
.box-head { color:#007e98;text-align: center; font-size: 22px; font-weight: 900; }
.box-avatar { text-align: center;}

.startscreen{}
.startscreen .game-logo{width: 350px;height: auto;margin-top: 25px;}
.startscreen .play-now{display: inline-block; background: #a60d1f; color: #fff; padding: 25px; font-size: 60px; font-weight: 900; margin: 0 0 25px 0;}

/* NEW */
.select-box.languages .language-select{display:inline-block;color: #007e98;display:inline-block;border: 1px solid #007e98;padding: 25px;background: #fff;margin: 0 10px;}
.select-box.languages .language-select .info{color: #007e98;}
.select-box.languages .headline{color: #007e98;font-size: 80px;text-transform: uppercase;font-weight: 900;line-height: 1;padding: 0;margin: 50px 0;letter-spacing: -2px;}

.select-box{text-align:center;position:fixed;left:0;top:0;right:0;bottom:0;font-family: 'Open Sans Condensed', sans-serif;background: #fff;overflow: auto;}
.select-box .select{display:block;position:absolute;left:0;top:0;right:0;bottom:0;width:50%;}
.select-box .select.right{right: 0;left: 50%;}
.select-box .info {display: inline-block;font-size: 42px;font-weight: 900;text-transform: uppercase;letter-spacing: -1px;}
.select-box .game-blue-bg .info {color:#007e98;margin-top: -37px;}
.select-box .white-bg .info {background:#007e98;color: #fff;}

.select-box.register{background: #007e98;}
.select-box.register label, .select-box.register .headline{color: #fff;}
.select-box .gamelogo{position: absolute; float: none; width: 200px; margin: 25px 0 0 -100px; left: 50%;}

.ranking-list{text-align:center;position:fixed;left:0;top:0;right:0;bottom:0;font-family: 'Open Sans Condensed', sans-serif;background: #fff;overflow: auto;z-index: 1;}
.ranking-list td {line-height: 1.2; border-top: 1px solid #eceded; padding: 2px 10px; border-left: 1px solid #eceded; border-right: 1px solid #eceded;font-size: 22px;}
.ranking-list tr:nth-child(2){background:rgba(3,85,102,.05)}
.ranking-list tr:nth-child(2) td:nth-child(1) span {padding: 5px 10px; background: #fff; display: inline-block; border: 1px solid #ccc; font-weight: 900; color: rgba(0,0,0,.5); box-shadow: 0px 0px 10px 0px rgba(0,0,0,.2);}
.ranking-list tr:nth-child(1) {background:rgba(3,85,102,.05)}
.ranking-list tr.current {background:rgba(3,85,102,.05)}

.player-box.selected {border: 2px solid #007e98;padding: 35px;box-shadow: 0px 0px 15px 0px rgba(0,0,0,.5);}

/* No Read Animation */

@keyframes noReadAlert {
    0%   { opacity:0; }
    50%  { opacity:.8; }
    100% { opacity:0; }
}
@-o-keyframes noReadAlert{
    0%   { opacity:0; }
    50%  { opacity:.8; }
    100% { opacity:0; }
}
@-moz-keyframes noReadAlert{
    0%   { opacity:0; }
    50%  { opacity:.8; }
    100% { opacity:0; }
}
@-webkit-keyframes noReadAlert{
    0%   { opacity:0; }
    50%  { opacity:.8; }
    100% { opacity:0; }
}

.multiuser-box{
    position: absolute;
    height: 75px;
    left: 50%;
    background-color: #007e98;
    border: 1px solid #fff;
    /* width: 250px; */
    margin-left: -125px;
    box-shadow: 0px 0px 15px 0px rgba(0,0,0,.5);
}

.multiuser-box .user-1 {
    display: block;
    float: left;
}

.multiuser-box .user-2 {
    display: block;
    float: right;
    position: relative;
}

.multiuser-box .user-1 span, .multiuser-box .user-2 span {
    font-family: 'Open Sans Condensed', sans-serif;
    position: absolute;
    top: -25px;
    font-weight: 900;
}

.multiuser-box .user-1 span {
    text-align: left;
}

.multiuser-box .user-2 span {
    text-align: right;
    display: block;
    width: 100%;
}

.multiuser-box .user-1 .number, .multiuser-box .user-2 .number {
    font-size: 53px;
    color: #fff;
    padding: 10px;
    font-weight: bold;
    border-right: 1px solid #fff;  
}

.multiuser-box .user-2 .number {
    border-right: none;  
}

.head .multiuser-box .misterscanmaster{
    right: -80px;
    top: -45px;
}

.head .multiuser-box .missscanmaster{
    top: -40px;
}

/* HELP AREA */
.uppercase{text-transform: uppercase;}
.help_btn {
    background: #fff;
    position: fixed;
    z-index: 10;
    right: 15px;
    top: 15px;
}
.help_btn a {
    display: block;
    font-size: 40px;
    font-weight: bold;
    border: 1px solid #007e98;
    vertical-align: middle;
    line-height: 1;
    padding: 10px 20px;
    text-decoration: none;
}
.help_overlay {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}
.help_overlay p, .help_overlay h2, .help_overlay h3 {
  color: #fff;
}
.help_overlay h2 {
  font-weight: bold;
}
.help_overlay p {
  font-size: 20px;
  line-height: 1.2;
}
.help_overlay .white_shine{
    position: absolute;
    background: url(img/new/white_shine.png) no-repeat center top;
    background-size: 100% 100%;
    width: 100%;
    height: 100%;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}
.help_overlay .help_1{
  max-width: 80%;
  height: auto;
}
.help_overlay .help_2{
  max-width: 80%;
  height: auto;
}
.help_overlay .help_3{
  max-width: 85%;
  height: auto;
}
.help_overlay .help_4{
  max-width: 85%;
  height: auto;
  max-height: 80%;
}
.help_overlay .help_5{
  max-width: 85%;
  height: auto;
}
.counter{
    position: fixed;
    z-index: 10;
    left: 15px;
    top: 15px;
}
.counter a {
    display: inline-block;
    font-size: 30px;
    font-weight: bold;
    border: 1px solid #fff;
    vertical-align: middle;
    line-height: 1;
    padding: 7px 15px;
    background: transparent;
    color: #fff;
}
.counter a.current, .counter a:active, .counter a:focus {
    border: 1px solid #007e98;
    background: #fff;
    color: #007e98;
    text-decoration: none;
}