*{
	box-sizing:border-box;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
html,body{
	width:100%;
	height:100%;
	overflow:hidden;
	font-size:16px;
}

body{
	border:0;
	margin:0;
	padding:0;
	background-color:#eaeaea;
	font-family: 'Hobgoblin', serif;
	letter-spacing:1.5px;
	font-weight:500;
	overflow:hidden;
	/* transition:filter 0.5s; */

    position:relative;
    width: 2000px;
    height: 1200px;
    zoom: 0.5;
    margin: 0 auto;
}
/*body.inminigame #grey-box, body.inminigame #user-box{
	filter:blur(5px);
}*/
body.inminigame #main{
	/* filter:blur(5px); */
}
body.mapopen #main{
	/* filter:blur(5px); */
}
#debug{
	position:Absolute;
	top:0;
	left:200px;
	z-index:1000;
	color:#ffffff;
	display:none;
}
#demo{
	position:Absolute;
	top:350px;
	left:200px;
	z-index:1001;
	color:#ff0000;
	font-size:250px;
	transform-origin:50% 50%;
	transform:rotate(-20deg);
	pointer-events:none;
	display:none;
	animation: demoanim 5s 0s infinite;
	animation-timing-function: linear;
	line-height:1;
}
#demo span{
	font-size:150px;
}
#version{
	position:Absolute;
	bottom:0;
	right:20px;
	z-index:1000;
	color:#ffffff;
	display:none;
}
#gps{
	position:Absolute;
	top:0;
	left:0;
	z-index:1000;
	color:#ffffff;
	padding:3px;
	padding-left:8px;
	background-color:#aa0000;
	display:none;
}
#gps img, #gps span{
	display:inline-block;
	vertical-align:middle;
}
#battery{
	position:Absolute;
	left:14px;
	top:3px;
	z-index:49;
	color:#000000;
}
#battery img, #battery span{
	display:inline-block;
	vertical-align:middle;
}
#battery span{
	padding-top:5px;
}
.position{
	display:none;
	font-size:2rem;
	position:absolute;
	z-index:51;
	width:150px;
	top:40px;
}
#main-container{
	/*
	height: 1536px;
	width: 2048px;
	overflow:hidden;
	*/
	height: 1536px;
	height:100%;
	width: 100%;
	overflow:hidden;
	position:relative;
	/* transition:filter 0.5s; */
	filter:brightness(100%);
}
#main-container.flash{
	filter:brightness(10000%);
}
#main-container.blur{
	/* filter:blur(5px) brightness(30%); */
	filter:brightness(30%);
}
#flash{
	position:absolute;
	z-index:999;
	width:100%;
	height:100%;
	background-color:#ffffff;
	pointer-events:none;
	display:none;
	top:0;
	left:0;
	opacity:1;
	transition:opacity 2s;
}
#flash._gone{
	opacity:0.0;
}

/* Start */
#start{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background-color:#ffffff;
	z-index:110;
}
.start-login{
	width:100%;
	padding:60px;
	position:absolute;
	z-index:20;
	transition:bottom 1s;
	bottom:0;
	text-align:center;
}
.start-login-content{
	margin:0 auto;
	max-width:600px;
}
.start-text{
	font-size:2.4rem;
	color:#444444;
	margin-bottom:50px;
	position:relative;
}

.start-overlay{
	width:1000px;
	position:absolute;
	top:700px;
	left:500px;
	padding:40px;
	background:#ffffff;
	box-shadow:4px 4px 12px rgba(0,0,0,0.4);
	font-size:2.5rem;
	display:none;
}
.start-overlay .button{
	font-size:2.2rem;
	padding-left:50px;
	padding-right:50px;
}

.start-input{
	background:transparent;
	padding:25px;
	border:0;
	border-bottom:5px solid #2c2c2c;
    /* text-shadow: 0 2px 8px rgba(0,0,0,0.8); */
	width:100%;
	font-size:4rem;
	margin-bottom:30px;
	/* letter-spacing:1.5rem; */
	color:#2c2c2c;
}
.start-bg1{
	position:absolute;
	width:calc(50% + 1px);
	height:100%;
	top:0;
	left:0;
	background-image:url('../images/startscreen.jpg');
	background-position:0 0;
	background-size:200% 100%;
	z-index:3;
	transition:left 1s;
}
.start-bg2{
	position:absolute;
	width:50%;
	height:100%;
	top:0;
	right:0;
	background-image:url('../images/startscreen.jpg');
	background-position:100% 0;
	background-size:200% 100%;
	z-index:2;
	transition:right 1s;
}
body.ostsee .start-bg1, body.ostsee .start-bg2 {
	background-image:url('../images/startscreen_42.jpg');
}
.start-bg1 img{
	display:none;
	position:absolute;
	top:0;
	left:100%;
}
.start-bg2 img{
	display:none;
	position:absolute;
	top:0;
	right:100%;
}
.start-video-container{
	z-index:101;
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background-color:#000000;
	display:none;
}
.start-video{
	opacity:0;
	width:100%;
	height:100%;
	pointer-events:none;
	display:none;
}
.start-video-buttons{
	/* opacity:0; */
	/* display:none; */
	text-align:center;
	bottom:100px;
	left:0;
	width:100%;
	position:absolute;
	display:none;
}
.start-video-buttons .button{
	display:inline-block;
	margin:0 30px;
	font-size:3rem;
}

.start-bg1._gone{
	left:-51%;
	/* box-shadow:30px 0 30px rgba(0,0,0,0.2); */
}
.start-bg2._gone{
	right:-51%;
	/* box-shadow:-30px 0 30px rgba(0,0,0,0.2); */
}
.start-bg1._gone img, .start-bg2._gone img{
	display:block;
}
.start-login._gone{
	bottom:-50%;
}

#outro{
	width:100%;
	height:100%;
	pointer-events:none;
	position:absolute;
	top:0;
	left:0;
	z-index:111;
}
#team{
	position:absolute;
	width:100%;
	height:100%;
	bottom:0;
	background-image:url('../images/big-screen.png');
	background-size:100% 100%;
	background-repeat:no-repeat;
	text-align:center;
	z-index:99;
	padding-top:100px;
	transition:bottom 0.5s;
}
#team._gone{
	bottom:101%;
}
#team p{
	font-size:5rem;
	color:#88b14a;
	margin-bottom:0.5em;
}
#team p:nth-child(n+1){
	margin-top:0;
}
#team input{
	border:0;
	border: 6px solid #ffffff;
	padding:20px;
	background:rgba(0,0,0,0.5);
	color:#88b14a;
	font-size:7rem;
	margin-bottom:0.5em;
	position:relative;
	left:0;
}
#team input::placeholder{
	font-style:italic;
	font-size:5rem;
}
#team .teamname-button{
	font-size:3.5rem;
	color:#ffffff;
	display:inline-block;
	padding:40px 80px;
}
.playernames{
	position:relative;
	top:0;
	transition:top 0.3s, background-color 0.3s;
	z-index:10;
	background-color: rgba(0, 0, 0, 0.0);
	width:90%;
	margin:0 auto;
}
.playernames.active{
	top:-386px;
	background-color: rgba(0, 0, 0, 0.8);
}


#clock, #map-button, #info-button, #kraehe, #list-button, #help-button, #map-help-button, .footer-content{
	/* display:none; */
	/* opacity:0; */
	-webkit-user-select: none;
	user-select: none;
	-webkit-tap-highlight-color: transparent;
}


/* Ende */
#ende{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	z-index:95;
	background-image:url('../images/startscreen.jpg');
	background-position:center;
	background-size:cover;
	display:none;
	opacity:0;
}
.ende-content{
	position:absolute;
	width:100%;
	height:100%;
	background-color:rgba(255,255,255,0.9);
	text-align:center;
	padding-top:200px;
}
.ende-headline{
	font-size:6rem;
	/* color: #d1b995; */
	position:relative;
	z-index:4;
}
.ende-text{
	margin-top:40px;
	margin-bottom:40px;
	font-size:2.8rem;
	position:relative;
	z-index:4;
}
.ende-code{
	text-align:center;
}
.ende-code img{
	margin:0 auto;
	background-color:#ffffff;
	padding:30px;
}
.ende-team{
	text-align:center;
	font-size:85px;
	font-weight:700;
    margin-bottom: 20px;
}
.ende-email, .ende-email2{
	font-size: 2.8rem;
	position:relative;
	top:60px;
	transition:top 0.5s, background-color 0.5s;
	padding:20px;
	background-color:rgba(255,255,255,0.0);
	z-index:10;
}
.ende-email.active{
	top:-240px;
	background-color:rgba(255,255,255,0.9);
}
.ende-email input{
	font-size: 2.8rem;
	padding:15px;
}
.ende-email-send2{
	font-size: 2rem !important;
	padding:30px 60px !important;
}
.ende-emailmessage{
	font-size: 2.4rem;
	position:relative;
	top:60px;
}
.ende-email-send{
	display:none;
}
.left{ 
	float:left; 
}
.right{ 
	float:right; 
}
.clear{
	clear:both;
}

.interface-headline {
	font-size:2rem;
	color: #d0d0d0;
	position:relative;
	z-index:199;
	font-family:Arial,sans-serif;
	padding-top:25px;
	padding-left:5px;
}

.interface-subline{
	color: #ffffff; 
	font-size: 2.2rem; 
}

#icon-doublearrow{
	position:absolute;
	z-index:3;
	width:140px;
	height:140px;
	left:-85px;
	margin-top:530px;
	transform:scale(1);
	transition:0.3s;
	cursor:pointer;
	-webkit-tap-highlight-color: transparent;
}
#icon-doublearrow:after{
	content:'';
	display:block;
	width:160px;
	height:160px;
	border:6px solid #ffffff;
	animation: arrowanim 3s 0s infinite;
	animation-timing-function: linear;
	position:absolute;
	top:36px;
	left:0px;
	border-radius:50%;
	box-sizing:border-box;
}
.gamearea._active #icon-doublearrow:after,.gamearea._hidden #icon-doublearrow:after{
	animation:none;
	opacity:0;
}
#icon-doublearrow:hover{
	transform:scale(1);
}
.icon-doublearrow-content{
	width:100%;
	height:63px;
	margin-top:36px;
	text-align:center;
}

#header{
    width: 100%; 
	height:19.1%;
	position:relative;
	z-index:1;
	position:absolute;
	top:0;
	left:0;
	pointer-events:none;
}

#black-bar {
	/* height: 194px;  */
	/* width: 70%;  */
	/* background-color: #000000;  */
}

.black-bar-container {
	margin-top: 3%; 
	margin-left: 4%; 
}

#clock {
	/* height: 100%; */
	position:absolute;
	right:113px;
	top:155px;
	z-index:19;
	color: #ffffff;
	/* text-shadow: 0 2px 8px rgba(0,0,0,0.8); */
	margin:0 auto;
	pointer-events:auto;
	text-align:left;
	letter-spacing:0;
}

#time-bar-text {
	font-size: 2rem; 
	float:left;
	margin-top:16px;
	width:70%;
	box-sizing:border-box;
	text-align:left;
	pointer-events:none;
}

#time {
	font-size: 3rem;
	/* margin-top:-5px; */
	/* float:right; */
	position:absolute;
	height:60px;
	width:270px;
	right:4px;
	top:-6px;
	overflow:hidden;
    font-family: 'Sono', serif;
    letter-spacing: -1.5px;
}
#time.anim{
	animation: timepulse 0.5s 0s 8;
}
.time-number{
	position: relative;
    width: 32px;
    margin-right: 0px;
    text-align: center;
    display: inline-block;
    vertical-align: top;
	margin-top:-8px;
	
	margin-top:-5px;
	float:left;
	height:92px;
	background-image:url('../images/numbers1.png');
	background-position:0px center;
	background-repeat:no-repeat;
	background-size:32px 888px;
}
.time-number:nth-child(1){ margin-right:25px; margin-left:3px; }
.time-number:nth-child(2){ margin-right:8px; background-image:url('../images/numbers2.png');}
.time-number:nth-child(3){ margin-right:25px; }
.time-number:nth-child(4){ margin-right:8px; background-image:url('../images/numbers2.png');}
.time-number:nth-child(5){ margin-right:25px; }
.time-num{
    color: #253445;
    color: #ffffff;
    font-size: 120px;
    font-size: 3.6rem;
    line-height: 1.5;
}
.time-divide{
	position:absolute;
	top:5px;
	left:29px;
    font-size: 3.6rem;
}
.time-divide:last-child{
	left:127px;
}
.red .time-num, .red .time-divide{
	color:#ff3333;
}
#map-button{
	color:#ffffff;
	position:absolute;
	width: 330px;
    height: 186px;
    left: 806px;
    top: 60px;
	/* transform: rotate(-0deg) skewX(3deg); */
	/* background-color:#860d00; */
	cursor:pointer;
	z-index:40;
	transform-origin:50% 100%;
	background-image:url('../images/map-button.png');
	background-size:100% 100%;
	/* box-shadow: inset 0 0 20px rgb(0 0 0); */
}
#map{
	box-sizing:border-box;
	padding-top:0px;
	position:absolute;
	width:100%;
	height:100%;
	bottom:100%;
	z-index:60;
	transition:transform 1s;
	transform:translateY(0);
	/* background-color:rgba(0,0,0,0.8); */
	text-align:center;
	line-height:100%;
	overflow:hidden;
}
#map-close{
	position:absolute;
	top:45px;
	right:60px;
	z-index:19;
	transform: scale(0.9);
}
#map.active{
	transform:translateY(100%);
}
.map-image{
	width:auto;
	height:auto;
	max-width:1800px;
	max-width:85%;
	max-height:1100px;
	position:relative;
	box-sizing:border-box;
	border: 20px solid #ffffff;
	/* border:4px solid #937642; */
}
.map-bg{
	position:absolute;
	background-image:url('../images/map-bg.jpg');
	background-size:100% 100%;
	background-position:center;
	background-repeat:no-repeat;
}
.map-left{
	position:absolute;
	background-image:url('../images/map-left.png');
	background-size:100% 100%;
	background-position:center;
	background-repeat:no-repeat;
	width:262px;
}
.map-right{
	position:absolute;
	background-image:url('../images/map-right.png');
	background-size:100% 100%;
	background-position:center;
	background-repeat:no-repeat;
	width:262px;
}
.map-content{
	position:relative;
	height:100%;
	
	background-image:url('../images/big-screen.png');
	background-size:100% 100%;
	background-repeat:no-repeat;
}
.map-content:after{
	display:inline-block;
	content:'';
	width:1px;
	height:100%;
	vertical-align:middle;
}
.map-image{
	display:inline-block;
	vertical-align:middle;
}
.map-pin{
	position:absolute;
	transition:top 1s linear, left 1s linear;
}
.map-pin-image{
	position:absolute;
	width:70px;
	height:70px;
	left:-35px;
	top:-70px;
}
.map-pin-image._self{
	top:-35px;
}
.map-pin-radius{
	position:absolute;
	border-radius:100%;
	transform:translate(-50%, -50%);
	background-color:rgba(100,150,255,0.3);
	border:2px solid rgba(100,150,255,0.5);
	width:0;
	height:0;
}


#info-button{
	width: 209px;
    height: 121px;
    position: absolute;
    right: 572px;
    top: 103px;
    transform: rotate(14deg);
	/* background-color:#008616; */
	cursor:pointer;
	z-index:18;
	transform-origin:50% 100%;
	background-image:url('../images/info-button.png');
	background-size:100% 100%;
	box-shadow: inset 0 0 20px rgb(0 0 0);
}
#info-button._anim{
	/* animation: schildanim 4s 0s infinite; */
}
#map-button._anim{
	/* animation: schildanim 4s 0s infinite; */
	/* animation-iteration-count:3; */
}
#help-button{
	position:absolute;
	top:10px;
	right:10px;
	background-image:url('../images/help-button.png');
	width:135px;
	height:98px;
	background-size:contain;
	z-index:16;
	transform: scale(0.9);
}
#help{
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	display:none;
	opacity:0;
	background-image:url('../images/help_overlay.png');
	background-size:100% 100%;
	z-index:54;
}
#map-help-button{
	position:absolute;
	bottom:50px;
	right:60px;
	z-index:16;
}
#map-help-button img{
	width:135px;
	height:98px;
	transform: scale(0.9);
}
#map-help-close{
	position:absolute;
	bottom:50px;
	right:60px;
	z-index:21;
	display:none;
	transform: scale(0.9);
}
#map-help{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	z-index:20;
	display:none;
}
#map-help img{
	width:100%;
	height:100%;
}
/*#autoplay{
	position:absolute;
	bottom:20px;
	left:1165px;
	z-index:53;
	transform:scale(0.7);
}*/
#settings-button{
	position:absolute;
	width:100px;
	height:100px;
	position:absolute;
	bottom:50px;
	right:50px;
}
#settings{
	display:none;
	background-image:url('../images/big-screen.png');
	background-repeat:no-repeat;
	background-size:1000px 1200px;
	background-position:center;
	background-color:rgba(0,0,0,0.4);
	width:100%;
	height:100%;
	position:absolute;
	top:0;
	left:0;
	z-index:54;
	padding:50px 550px;
}
.settings-close{
	float:right;
	margin-bottom:20px;
}
.help-close{
	float:right;
	margin:18px;
	pointer-events:none;
	transform: scale(0.9);
}
.help-close._anim{
	animation: pulse 1.5s 0s infinite;
}
#list-button{
    width: 227px;
    height: 140px;
    position: absolute;
    left: 489px;
    top: 85px;
    transform: rotate(-15deg);
	/* background-color:#008616; */
	cursor:pointer;
	z-index:45;
	transform-origin:50% 100%;
	background-image:url('../images/liste-button.png');
	background-size:100% 100%;
	box-shadow: inset 0 0 20px rgb(0 0 0);
}
#list-button._anim{
	/* animation: schildanim 4s 0s infinite; */
}
#info{
	box-sizing:border-box;
	padding-top:0px;
	position:absolute;
	width:100%;
	height:100%;
	bottom:100%;
	z-index:70;
	transition:transform 1s;
	transform:translateY(0);
	background-color:rgba(0,0,0,0.2);
	color:#ffffff;
	text-align:center;
	line-height:1.3;
	overflow:hidden;
}
#info-close{
	position:absolute;
	top:45px;
	right:60px;
	z-index:65;
	transform: scale(0.9);
}
#info.active{
	transform:translateY(100%);
}
.info-content{
	padding: 70px 100px;
	font-size:2.8rem;
	font-weight:700;
	text-align:left;
	height:100%;
	background-image:url('../images/big-screen.png');
	background-size:100% 100%;
	background-repeat:no-repeat;
}
.info-text{
	overflow-y:scroll;
	max-height:100%;
	display:inline;
}
.info-image{
	float:right;
	max-width:40%;
	margin-right:40px;
	/* padding-right:80px; */
	clip-path: polygon(6% 0,90% 5%,95% 100%,0% 95%);
	background-color: #f5cc6c;
}
.info-image img{
	width:100%;
	height:auto;
	max-height: 800px;
	clip-path: polygon(8% 2%,88% 7%,93% 99%,2% 94%);
}

#list{
	box-sizing:border-box;
	padding-top:0px;
	position:absolute;
	width:100%;
	height:100%;
	bottom:100%;
	z-index:70;
	transition:transform 1s;
	transform:translateY(0);
	background-color:rgba(0,0,0,0.2);
	color:#000000;
	text-align:center;
	line-height:1.3;
	overflow:hidden;
}
#list-close{
	position:absolute;
	top:45px;
	right:60px;
	z-index:65;
	transform: scale(0.9);
}
#list-close.anim{
	animation: pulse 1.5s 0s infinite;
}
#list.active{
	transform:translateY(100%);
}
#list.active.instant{
	transition:0s;
}
.list-content{
	padding: 70px 100px;
	font-size:2.8rem;
	font-weight:700;
	text-align:left;
	height:100%;
	background-image:url('../images/big-screen.png');
	background-size:100% 100%;
	background-repeat:no-repeat;
	color:#ffffff;
}
.list-teamname{
	float:left;
	font-size:5.0rem;
	margin-left:0px;
	font-family:'Hobgoblin';
	/* letter-spacing:0; */
}
.list-points{
	float:right;
	font-size:5rem;
	margin-right:150px;
}
.list-points img{
	vertical-align:middle;
	height:80px;
	width:auto;
	margin-left:30px;
}
.list-monsters{
	clear:both;
	max-height:900px;
	overflow-y:auto;
	margin-top:200px;
}
.list-monster{
	width:48%;
	display:inline-block;
	margin-right:1%;
	margin-bottom:70px;
	vertical-align:top;
}
.list-monsterimage{
	float:left;
	width:290px;
	height:auto;
	margin-right:40px;
}
.list-monstername{
	font-size:4rem;
	overflow:hidden;
	width:auto;
	font-family:'Hobgoblin';
	letter-spacing:3px;
}
.list-monstertext{
	font-size:2rem;
	overflow:hidden;
	width:auto;
}

#map-screen{
	position:absolute;
	background-image:url('../images/bg_screen_map.png');
	background-size:75%;
	background-repeat:no-repeat;
	background-position:top;
	width:500px;
	height:420px;
	top:-50px;
	left:720px;
	z-index:12;
}
#info-screen{
	position:absolute;
	background-image:url('../images/bg_screen_info.png');
	background-size:85%;
	background-repeat:no-repeat;
	background-position:top;
	width:400px;
	height:374px;
	top:-50px;
	right:430px;
	z-index:13;
}
#list-screen{
	position:absolute;
	background-image:url('../images/bg_screen_list.png');
	background-size:80%;
	background-repeat:no-repeat;
	background-position:top;
	width:400px;
	height:416px;
	top:-50px;
	left:380px;
	z-index:14;
}
#time-screen{
	position:absolute;
	background-image:url('../images/bg_screen_timer.png');
	background-size:65%;
	background-repeat:no-repeat;
	width:500px;
	height:418px;
	top:-15px;
	right:-70px;
	z-index:15;
}

#kraehe{
	position:absolute;
	top:0px;
	left:0;
	z-index:25;
	width:400px;
	height:400px;
	/*background-image:url('../images/kraehesheet.png');
	background-position:0 0;
	background-size:3640px 7281px;
	background-repeat:no-repeat;*/
}
#kraehe video, #kraehe img{
	width:100%;
	height:auto;
}
#kraehe video,#kraehe img{
	display:none;
}
#kraehe img.kraehe-img{
	display:block;
}
/*debug
#kraehe *{
	position:absolute;
}
#kraehe-wake{
	margin-left:200px;
}
#kraehe-sleep{
	margin-left:400px;
}
#kraehe-active{
	margin-left:600px;
}*/

#hinweise{
	box-sizing:border-box;
	padding-top:0px;
	position:absolute;
	width:100%;
	height:100%;
	bottom:100%;
	z-index:60;
	transition:1s;
	background-color:rgba(0,0,0,0.8);
	color:#ffffff;
	color:#000000;
	text-align:center;
	line-height:1.3;
	overflow:hidden;
}
#hinweise-close{
	position:absolute;
	top:45px;
	right:60px;
	z-index:65;
	transform: scale(0.9);
}
#hinweise.active{
	bottom:0;
}
.hinweise-container{
	padding: 100px;
	text-align:left;
	height:100%;
	overflow-y:scroll;
	/* margin:20px 100px 130px 100px; */
	
	background-image:url('../images/big-screen.png');
	background-size:100% 100%;
	background-repeat:no-repeat;
}
.hinweise-content{
	height:100%;
	overflow-y:scroll;
	padding-top:200px;
}
.hinweise-content img{
	max-width:100%;
	height:auto;
}
.hinweise-icon{
	position:absolute;
	top:100px;
	left:100px;
	width:150px;
	height:150px;
	border:4px solid #aaaaaa;
	border-radius:50%;
	background-image:url('../images/test/narrator2.jpg');
	background-size:contain;
}
.hinweise-text{
	font-size:3rem;
	color:#ffffff;
	position:absolute;
	top:150px;
	left:300px;
	right:100px;
}

.score-title{
	color:#ffffff;
	font-size:6rem;
	text-align:center;
	margin-top:100px;
}
.score-score{
	margin:50px 100px;
	text-align:left;
	color:#00e5ff;
	font-size:6rem;
	line-height: 1.4;
	position:relative;
}
.score-score img{
	height:100px;
	width:auto;
	vertical-align:middle;
	margin-left:30px;
}
.score-line{
	margin-top:40px;
	margin-bottom:40px;
	border-bottom:4px solid #00e5ff;
	width:70%;
}
.score-text{
	width:45%;
	text-align:left;
	display:inline-block;
	font-size:4rem;
}
.score-gems{
	display:inline-block;
}
.score-points{
	display:inline-block;
	width:200px;
	text-align:right;
}
.score-chest{
	position:absolute;
	bottom:350px;
	right:100px;
	/* margin-left:300px; */
}
.score-chest img{
	width:500px;
	height:auto;
}
.score-shine{
	position:absolute;
	right: -480px;
    top: -150px;
	animation: turn 3s infinite ;
	animation-timing-function: linear;
}
.score-professor{
	position:absolute;
	bottom:40px;
	right:52px;
}
.score-professor img{
	width:800px;
	height:auto;
}
#grey-box {
	height: 100%; 
	width: 1130px; 
	left:50px;
	margin-top:1px;
	position:absolute;
	z-index:20;
}

.chat-container{
	padding:0 3% 0 3%;
	top:0;
	margin-top:410px;
	max-height:1000px;
	height:670px;
	overflow-y:scroll;
	overflow-x:visible;
	position:relative;
	will-change:scroll-position, contents;
}
.chat-chats{
	padding-top:50px;
	/* padding-bottom:90px; */
	overflow:hidden;
}
.chat-chats:after{
	content:'';
	display:block;
	clear:both;
}
.chat-outer{
	position:relative;
	transform-origin:50% 50%;
}

.chat-narrator {
	width:100%;
	/* min-height:220px; */
	margin-bottom:50px;
	clear:both;
	float:left;
	position:relative;
	padding:40px;
	padding-left:70px;
	padding-right:60px;
	/* padding-bottom:60px; */
	/* padding-right:70px; */
	background-image:url('../images/chat-bg1.png');
	background-size:100% 100%;
	background-repeat:no-repeat;
	transform-origin:50% 50%;
	/* transform:rotate(-2deg); */
	/* background-color:#88b14a; */
}
/*.chat-narrator:before{
	content:'';
	display:block;
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	background-color:#fdd26e;
	clip-path: polygon(5% 5%, 45% 1%, 95% 5%, 99% 60%, 96% 85%, 47% 98%, 6% 95%, 1% 55%);
}
.chat-narrator:after{
	content:'';
	display:block;
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	background-color:#88b14a;
	clip-path: polygon(calc(5% + 10px) calc(5% + 10px), 45% calc(1% + 10px), calc(95% - 10px) calc(5% + 10px), calc(99% - 15px) 60%, 
					calc(96% - 10px) calc(85% - 10px), 47% calc(98% - 10px), calc(6% + 10px) calc(95% - 10px), calc(1% + 15px) 55%);
}*/
.chat-narrator-left{
	float:left;
	width:80px;
	margin-right:20px;
	/* margin-left:-50px; */
	position:relative;
	z-index:3;
}
.chat-narrator-right{
	width:auto;
	overflow:hidden;
	/* transform:scale(0); */
	/* transform:scale(1); */
	position:relative;
	z-index:4;
}
.narrator {
	width:80px; 
	height:80px; 
	border:4px solid rgba(255,255,255,0.5); 
	border-radius:50%;
	overflow:hidden;  
	float:left; 
}
.narrator img{
	width:100%;
	height:auto;
}

.chat-text-narrator {    
	float:left;
	width:calc(100% - 4px);
	/* padding:25px; */
	/* background-color: #ffffff;  */
	/* border-radius: 15px;   */
    font-size: 2.5rem;
	position:relative; 
	margin:2px;
	color:#ffffff;
	white-space: pre-wrap;
}
.chat-text-narrator img{
	width:auto;
	height:auto;
	max-width:800px;
	max-width:100%;
	max-height:600px;
}

/*.chat-text-narrator:after{
	content:'';
	display:block;
	position:absolute;
	top:calc(100% - 1px);
	width: 0;
    height: 0;
    border-style: solid;
    border-width: 33px 43px 0 0;
    border-color: #ffffff transparent transparent transparent;
	left:30px;
}*/

.chat-awaits-answer{
	position:absolute;
	bottom:120px;
	width:65%;
	text-align:center;
	font-size:3rem;
	color:#868686;
	display:none;
}
.chat-more{
	position:absolute;
	bottom:240px;
	width:65%;
	text-align:center;
	font-size:3rem;
	color:#868686;
	opacity:0;
	pointer-events:none;
	transition:0.4s;
	display:none;
}
.chat-more._show{
	opacity:1;
}

.chat-time1 {
	font-size: 1.6rem;
	margin-bottom:5px;
	clear:both;	
	color:#ffffff;
	display:none;
	/* margin-right:10px; */
	/* margin-top:10px; */
	/* float: right; */
}

.chat-time2 {
	font-size: 1.6rem;
	margin-bottom:5px;
	clear:both;	
	color:#88b14a;
	text-align:right;
	display:none;
}
.chat-user{
	max-width:70%;
	padding:40px;
	padding-left:60px;
	padding-right:60px;
	/* padding-top:40px; */
	margin-bottom:50px;
	float:right;
	clear:both;
	position:relative;
	
	background-image:url('../images/chat-bg.png');
	background-size:100% 100%;
	background-repeat:no-repeat;
	transform-origin:50% 50%;
	/* transform:rotate(2deg); */
}

/*.chat-user:before{
	content:'';
	display:block;
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	background-color:#a8d665;
	clip-path: polygon(5% 5%, 45% 1%, 95% 5%, 99% 60%, 96% 85%, 47% 98%, 6% 95%, 1% 55%);
}
.chat-user:after{
	content:'';
	display:block;
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	background-color:#ffffff;
	clip-path: polygon(calc(5% + 10px) calc(5% + 10px), 45% calc(1% + 10px), calc(95% - 10px) calc(5% + 10px), calc(99% - 15px) 60%, 
					calc(96% - 10px) calc(85% - 10px), 47% calc(98% - 10px), calc(6% + 10px) calc(95% - 10px), calc(1% + 15px) 55%);
}*/
.chat-text {
	/* padding:50px; */
	/* background-color: #5c828e; */
	color: #88b14a;
	float: right; 
	/* border-radius: 15px;  */
	font-size: 2.5rem;
	position:relative;
	min-width:200px;
	text-align:right;
	text-align:left;
	z-index:3;
}

/*.chat-text:after {
	content:'';
	display:block;
	position:absolute;
	width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 43px 33px 0;
    border-color: transparent #5c828e transparent transparent;
	top:calc(100% - 1px);
	right:30px;
}*/

.chat-template1, .chat-template2{
	display:none;
}
.chat-user._new{
	animation: chatnewtext 0.7s 0.0s forwards;
}
.chat-narrator._new .chat-narrator-left{
	animation: chatnew 0.6s 0.0s forwards;
}
.chat-narrator._new{
	animation: chatnewtext 0.7s 0.0s forwards;
}
.chat-narrator._new .chat-dots{
	/* animation: chatnewdots 2.5s 0.0s forwards; */
}
.chat-narrator .chat-narrator-right._new{
	animation: chatnewtext 0.7s 0.0s forwards;
}
.chat-image{
	width:100%;
	height:auto;
	min-height:350px;
	border:2px solid #937642;
}
.chat-textaudio{
	position:absolute;
	top:85px;
	border-radius:50%;
	width:80px;
	height:80px;
	border:4px solid #feecc1;
	background-color:#ffffff;
	text-align:center;
	padding:10px;
	font-size:16px;
}
.chat-textaudio.active{
	background-color:#84b148;
}
.chat-textaudio.active img{
	filter:brightness(1000%);
}
.chat-textaudio img{
	vertical-align:middle;
	width:50px;
	height:50px;
}
.info-content .chat-textaudio{
	top:auto;
	bottom:72px;
	width:120px;
	height:120px;
}
.info-content .chat-textaudio._anim{
	animation: questionanim 2s 0s infinite;
}
.info-content .chat-textaudio img{
    width: 70px;
    height: 70px;
    margin-top: 10px;
}
.info-content .audio-player{
	position:absolute;
	top:auto;
	left:150px;
	bottom:64px;
	z-index:5;
}
.info-content .chat-audio{
	transform:scale(2.0);
}
.gamearea-gamecontent .chat-textaudio{
	top:auto;
	left:100px;
	bottom:-100px;
	width:120px;
	height:120px;
	z-index:5;
}
.gamearea-gamecontent .chat-textaudio img{
    width: 70px;
    height: 70px;
    margin-top: 10px;
}
.gamearea-gamecontent .audio-player{
	position:absolute;
	top:auto;
	left:100px;
	bottom:-100px;
	z-index:5;
	/* transform:scale(2.0); */
}
.picture-bg{
	width:100%;
	height:auto;
	max-height:none;
	/* border:2px solid #937642; */
	min-height:500px;
}
.picture-box{
	position:relative;
	line-height:0;
	display:inline-block;
}
.picture-image{
	position:absolute;
}
.picture-image.sepia{
	filter:sepia(100%);
}
.picture-image.blackwhite{
	filter:grayscale(100%);
}


.chat-narrator.highlight{
	/* border:1px solid #3d963f; */
}
.chat-narrator.highlight .chat-text-narrator{
	/* filter:drop-shadow(0 0 2px #001686); */
}
/*.chat-narrator.highlight:before{
	content:'';
	position:absolute;
	display:block;
	top:0;
	left:0;
	width:16px;
	height:16px;
	border-radius:50%;
	background-color: #3d963f;
}*/

.chat-narrator.narrator0 .narrator{
	visibility:hidden;
}
.chat-narrator.narrator2{
	background-image:url('../images/chat-bg2.png');
}
.chat-narrator.narrator2 .chat-text-narrator{
	/* background-color:#e6dece; */
	color:#d66666;
}
.chat-narrator.narrator2 .chat-text-narrator:After{
	/* border-top-color:#e6dece; */
}

.chat-dots{
	position:absolute;
	left:220px;
	top:55px;
}
.chat-dot{
	display:inline-block;
	position:relative;
	left:0;
	top:0;
	width:8px;

	height:8px;
	margin-right:4px;
	border-radius:50%;
	background-color:#ffffff;
	animation: chatdothop 1s infinite;
	animation-delay:0s;
}
.chat-dot:nth-child(2){
	animation-delay:0.2s;
}
.chat-dot:nth-child(3){
	animation-delay:0.4s;
}

#user-box {
	position:absolute;
	right: 0px;
	bottom: 0px;
	height: 850px; 
	width: 851px; 
	padding-top:40px;
    padding-left: 300px;
    padding-right: 10px;
	z-index:19;
	background-image:url('../images/bg_screen_user.png');
	background-size:100% 100%;
	/* background-color: #f5f5f5; */
	transition:bottom 0.5s;
}
#user-box._active{
	bottom:150px;
}
#grey-box, #main {
	transition:filter 0.2s;
}
.user-box-container{
	float:left;
	position:relative;
	width: 84%;
    margin-left: 8%;
	/* margin-top:65px; */
}
.user-box-answer-divide{
	display:none;
	float:left;
	background-image:url('../images/chat-divide.png');
	background-position:center;
	background-repeat:no-repeat;
	width:100%;
	height:32px;
}
.user-boxes {
	float:left;
	width:100%; 
	margin:30px 0;
	color: #eeeeee;
	color: #88b14a;
	background-image: url('../images/button-bg-user.png');
	background-size:100% 100%; 
	font-size:2.1rem;
	font-size: 2.3rem;
	text-align:center;
	padding:40px 26px;
	cursor:pointer;
	
	animation: userboxanim 3s 1.9s infinite;
	-webkit-tap-highlight-color: transparent;
}
.user-boxes.type2{
	background-image: url('../images/button-bg-user2.png');
}
.user-boxes.type3{
	background-image: url('../images/button-bg-user3.png');
}
.green-box {
	float:left;
	width:100%; 
	margin-bottom:60px;
	color: #ffffff;
	/* background-color: #008616; 	 */
	background-image: url('../images/button-bg.png'); 	
	background-size:100% 100%; 
	/* border-radius: 15px;  */
	font-size:2.6rem;
	text-align:center;
	padding:30px;
	cursor:pointer;
	-webkit-tap-highlight-color: transparent;
}

.green-box._anim{
	animation: infoanim 4s 0s infinite;
}
.green-box.setting{
	margin-bottom:30px;
	font-size:2.2rem;
	padding:25px;
}
.button {
	color: #ffffff;
	background:transparent;
	/* background-color: #008616; 	 */
	background-image: url('../images/button-bg.png'); 	
	background-size:100% 100%; 
	font-size:1.5rem;
	text-align:center;
	padding:20px;
	cursor:pointer;
	border:0;
	font-family: 'Hobgoblin';
	letter-spacing: 1px;
}
.button.red, .green-box.red {
	/* background-color: #860d00; */
	background-image: url('../images/button-bg-red.png');
}

.minigame-message{
	font-size:2.1rem;
	margin-bottom:50px;
	color:#ffffff;
}
.minigame-message span{
	font-weight:700;
}
.minigame-input{
	width:100%;
	color:#cccccc;
	background-color:transparent;
	border:0;
	border:6px solid #84b148;
	padding:25px 20px;
	font-size:40px;
	font-family: 'Sono', serif;
	font-family: 'Hobgoblin', serif;
	font-weight:500;
	/* box-shadow:         inset 0 0 10px rgba(0,0,0,0.2); */
	/* display:none; */
	margin-top:50px;
	margin-bottom:50px;
}
.minigame-input::placeholder{
	color:#999999;
}

#toast, #hinweise-toast{
	/* width:1080px; */
	height:240px;
	position:absolute;
	left:468px;
	top:-245px;
	/* background-color:rgba(255,255,255,0.95); */
	/* box-shadow:0 0 35px rgba(0,0,0,0.2); */
	background-image:url('../images/chat-bg1.png');
	background-size:100% 100%;
	background-repeat:no-repeat;
	padding:30px;
	z-index:1000;
	opacity:0;
}
#hinweise-toast{
	height:auto;
	top:-320px;
	padding:60px;
	left:300px;
	max-width:1400px;
}
.toast-image {
	width:120px; 
	height:120px; 
	border:6px solid #f5f5f5; 
	border-radius:50%;
	overflow:hidden;  
	float:left; 
	margin-top:10px;
	margin-left:10px;
}
.toast-image img{
	width:100%;
	height:auto;
}
.toast-text{
	font-size:2.5rem;
	margin:10px 40px 0;
	color:#ffffff;
}
.toast-buttons{
	margin:0 20px 0;
	text-align:center;
}
.toast-button{
	color: #ffffff;	
	font-size:2.2rem;
	text-align:center;
	cursor:pointer;
	display:inline-block;
	margin:20px 20px;
	
	/* background-color: #008616; 	 */
	background-image: url('../images/button-bg.png'); 	
	background-size:100% 100%; 
	text-align:center;
	padding:30px 40px;
	cursor:pointer;
	border:0;
}
.toast-button._red{
	background-image: url('../images/button-bg-red.png');
}
.toast-button._green{
	/* background-color: #008616;  */
}

#toast.type2{
	width:1400px;
	left:400px;
	height:195px;
	padding:25px;
}
#toast.type2 .toast-text{
	float:left;
}
#toast.type2 .toast-buttons{
	float:left;
}

#toast.narrator2{
	background-image:url('../images/chat-bg2.png');
}
#toast.narrator2 .chat-text-narrator{
	/* background-color:#e6dece; */
	color:#d66666;
}
.icon-question{
	position:relative;
	float:right;
	margin-top:0px;
	margin-bottom:40px;
	/* background-color:#863128; */
	background:url('../images/question-bg.png');
	background-size:cover;
	/* border-radius:50%; */
	width:123px;
	height:123px;
	cursor:pointer;
	z-index:2;
	font-size:8rem;
	line-height:6rem;
	text-align:center;
	padding-top:5px;
	box-sizing:border-box;
	color:#863128;
	/* font-style:italic; */
	font-weight:700;
	transform-origin:50% 50%;
	transform:rotate(15deg);
	-webkit-tap-highlight-color: transparent;
}
.questionbox{
	top:0;
	position:absolute;
	right:0px;
	width:800px;
	/* height:250px; */
	z-index:1;
	display:none;
	pointer-events:none;
}
.questionbox-content{
	color:#ffffff;
	font-size:2.1rem;
	max-width:800px;
}

.questionbox{
	position:absolute;
	right:0px;
	top:140px;
	padding:50px;
	background-color:#863128;
	z-index:50;
	display:none;
}
.questionbox:after{
	display:block;
	content:'';
	position:absolute;
	width:0px;
	height:0px;
	top:-80px;
	right:30px;
	border:40px solid transparent;
	border-bottom:40px solid #863128;
}



#main{
	height: 100%;
	width:100%;
	overflow:hidden;
	position:relative;
	background-image:url('../images/game-bg.jpg');
	background-size:100% 100%;
}
.main-screen{
	background-image:url('../images/bg_screen_main.png');
	background-size:100% 100%;
	position:absolute;
	bottom:0;
	left:-30px;
	width:1200px;
	height:850px;
}

#footer{
	height: 77px; 
	width: 100%;
	/* background-image:url('../images/footer-bg.jpg'); */
	background-size:100% 100%;
	position:absolute;
	bottom:15px;
	z-index:52;
}
.footer-content{
	padding:0 100px;
	position:relative;
	left:0;
	
    width: 1255px;
    height: 77px;
    display: flex;
    justify-content: space-between;
}
.footer-ende{
	text-align:center;
	padding:16px;
	color:#ffffff;
	font-size:1.8rem;
	display:none;
}
#selectroute{
	position:fixed;
	top:50px;
	left:50px;
	background-color:#ffffff;
	padding:50px;
	border-radius:30px;
	box-shadow:4px 4px 12px rgba(0,0,0,0.2);
	z-index:200;
	font-size:25px;
	line-height:1.5;
	display:none;
}
#resetgame{
	position:fixed;
	top:50px;
	background-color:#ffffff;
	padding:50px;
	border-radius:30px;
	box-shadow:4px 4px 12px rgba(0,0,0,0.2);
	z-index:101;
	font-size:25px;
	line-height:1.5;
	display:none;
}
#lightbox{
	position:fixed;
	top:0;
	left:0;
	bottom:0;
	right:0;
	z-index:100;
	background-color:rgba(0,0,0,0.7);
	display:none;
	opacity:0;
}
#lightbox-content{
	position:absolute;
	transform-origin:50% 50%;
	text-align:center;
	transform:scale(0.5);
	transition:transform 1s;
	width:100%;
}
#lightbox-content.big{
	transform:scale(1);
}
#lightbox-close{
	position:absolute;
	top:20px;
	right:20px;
	z-index:20;
}
.stage{
	color: #ffffff; 
	float: left; 
	padding:0px;
	margin-right:30px;
	margin-right:5px;
	background-image: url('../images/stage-button.png');
	background-position:center;
	background-size:contain;
	background-repeat:no-repeat;
	transform-origin:50% 50%;
	width:75px;
	height:75px;
	text-align:center;
	line-height:60px;
	font-size:50px;
}
.stage.active{
	background-image: url('../images/stage-button-glow.png'); 
}
.stage:last-child{
	transform:scale(1.2);
}

.stage-bar {
	height: 63px;
	width: 100%; 
	background-image: url('../images/stage-button.png');
	background-position:center;
	background-size:contain;
	background-repeat:no-repeat;
	transform-origin:50% 50%;
	transform:scale(0.88);
	float: left;
	margin-bottom:5px;
	position:relative;
	text-align:center;
}
.stage-bar-filled {
	background-image: url('../images/stage-button-glow.png'); 
}
.stage-bar-filled:last-of-type {
	/* filter:none; */
}
.stage-bar-filled:after{
	/*display:inline-block;
	content:'';
	width:40px;
	height:40px;
	margin:12px;
	border:5px solid #f2c482;
	border:5px solid #888888;
	border-radius:50%;*/
}
.stage-marker{
	display:inline-block;
	content:'';
	width:47px;
	height:47px;
	margin:17px 0;
	border:5px solid #f2c482;
	border-radius:50%;
	position:absolute;
	/* transform-origin:50% 50%; */
	/* transform:scale(0.88); */
	margin-left:-11px;
}

.stage-text{
	text-align:center;
	padding-top:15px;
	font-size:1.2rem;
}

#takepicture-container{
	position:relative;
	display:block;
	margin:0 auto;
	width:1000px;
}
.takepicture-buttonbox{
	/* position:absolute; */
	margin-top:10px;
	bottom:0;
	left:0;
	right:0;
	text-align:center;
}
.takepicture-button{
	display:inline-block;
	font-size:3rem;
	/* font-weight:700; */
	padding:30px 100px;
	padding-left:100px;
	padding-right:100px;
	/* background-image: url('../images/button-bg2.png');  */
}
.takepicture-ok{
	display:inline-block;
	display:none;
	font-size:3rem;

	/* font-weight:700; */
	padding:30px 100px;
	padding-left:100px;
	padding-right:100px;
	/* background-image: url('../images/button-bg2.png');  */
	margin-right:50px;
}
.takepicture-bg{
	width: 1200px;
    height: 950px;
	margin:0 auto;
}
.takepicture-reset{
	display:inline-block;
	display:none;
	font-size:2rem;
	margin-left:30px;
}
.takepicture-recamera{
	float:right;
	font-size:1.5rem;
	margin-bottom:30px;
	width:340px;
	text-align:center;
}
.takepicture-reset{
	float:right;
	font-size:1.5rem;
	display:none;
	clear:right;
	width:340px;
	text-align:center;
}
#picture{
	display:none;
}
h2{
	margin-bottom:1em;
}

#video{
	position:fixed;
	width:1000px;
	height:500px;
	top:0;
	left:0;
	z-index:100;
}
video{
	width:1200px;
	height:900px;
}
video#takepicture-video{
	width: 1400px;
    height: 900px;
}
video.chat-video{
	width:100%;
	height:auto;
}
.replay-button {
    color: #ffffff;
    font-size: 2rem;
    text-align: center;
    margin-bottom: 40px;
}
.replay-button img{
	vertical-align:middle;
	height:40px;
	width:auto;
	filter:invert(1);
}
.gamearea-gamefooter .replay-button{
    position: absolute;
    right: 54px;
    bottom: -30px;
}
#lightbox .chat-video{
	pointer-events:none;
}
.chat-audio{
	width: 350px;
	transform: scale(1.6);
    margin-left: 110px;
    margin-top: 20px;
    padding-bottom: 10px;
}
.chat-video.button{
	font-size: 2.8rem;
}
.gamearea-gamefooter .replay-button{
    bottom: 40px;
}
.gamearea-gamefooter .chat-video.button{
	font-size: 2.8rem;
    /* float: right; */
    padding: 20px 60px;
    position: absolute;
    right: 0;
    bottom: 80px;
}
#videoElement{
	display:none;
}
#logo{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background-color:#ffffff;
	z-index:109;
	text-align:center;
	display:flex;
	justify-content:center;
	align-items: center;
	display:none;
}
#logo img{
	opacity:0;
}
#prestartlogo{
	text-align:center;
}
#prestartlogo img{
	width:800px;
	height:auto;
	margin-top:150px;
	margin-bottom:100px;
}

.hinweise-item{
	/* margin-top:40px; */
	/* margin-bottom:40px; */
	padding-top:40px;
	padding-bottom:40px;
	border-bottom:2px solid #ffffff;
}
.hinweise-item-unlock{
	color: #ffffff;	
	font-size:2.7rem;
	text-align:center;
	cursor:pointer;
	display:block;
	margin:0 auto;
	width:690px;
	/* background-color: #008616; 	 */
	background-image: url('../images/button-bg.png'); 	
	background-size:100% 100%; 
	padding:30px 60px;
	cursor:pointer;
	border:0;
}
.hinweise-item-unlock._inactive{
	opacity:0.8;
	filter:brightness(80%);
}
.hinweise-item-text{
	display:none;
	color:#ffffff;
	font-size:2.6rem;
	/* text-shadow:1px 3px 4px rgba(0,0,0,1); */
	/* padding-left:150px; */
	position:relative;
	/* min-height:106px; */
}
.hinweise-headline{
	font-weight:400;
	color:#d1b995;
	color:#000000;
	font-size:3.8rem;
	font-weight:700;
	margin:0;
	margin-top:0px;
	margin-bottom:0.5em;
}
#confetti{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	pointer-events:none;
}
#black{
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	background:#000000;
	opacity:0;
	display:none;
	z-index:100;
}
#black.demo{
	/* display:block; */
	/* animation: blackdemoanim 60s 0s infinite; */
	/* animation-timing-function: linear; */
	/* pointer-events:none; */
}
#pause{
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	background:rgba(0,0,0,0.8);
	display:none;
	color:#ffffff;
	font-size:3rem;
	z-index:1001;
	flex-flow: column wrap;
	justify-content:center;
	align-items:center;
	text-align:center;
}
#license{
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	background:#ffffff;
	display:none;
	z-index:100000;
	pointer-events:none;
}
#license-text{
	color:#000000;
	font-size:60px;
	text-align:center;
	padding-top:500px;
}
.pause-icon {
	display:inline-block;
	vertical-align:middle;
	box-sizing: border-box;
	height: 36px;
	border-color: transparent transparent transparent #ffffff;
	border-style: double;
    border-width: 0px 0 0px 26px;
	margin-left:10px;
}
.play-icon {
	display:inline-block;
	vertical-align:middle;
	box-sizing: border-box;
	height: 150px;
	border-color: transparent transparent transparent #ffffff;
	border-style: solid;
	border-width: 75px 0 75px 150px;
	margin-top:20px;
}

.tour-button{
	color: #ffffff;
	background:transparent;
	/* background-color: #008616; 	 */
	background-image: url('../images/button-bg.png'); 	
	background-size:100% 100%; 
	font-size:3rem;
	text-align:center;
	padding:30px 20px;
	cursor:pointer;
	border:0;
	margin:0 auto;
	margin-bottom:40px;
	max-width:1000px;
}
.prestart-message{
	font-size:2rem;
	text-align:center;
	color:#000000;
}
body.prestart{
	background-color:#ffffff;
}

@keyframes chatnew {
	0% {  opacity:0;}
	100% {  opacity:1;}
}
/*@keyframes chatnewuser {
	0% { transform: rotate(-20deg) translate(2000px,0);}
	100% { transform: rotate(2deg) translate(0,0);}
}*/
@keyframes chatnewtext {
	0% { transform: scale(0.0);}
	70% { transform: scale(1.1);}
	100% { transform: scale(1.0);}
}
@keyframes chatnewdots {
	0% { opacity:0;}
	20% { opacity:1;}
	98% { opacity:1;}
	100% { opacity:0;}
}

@keyframes chatdothop {

  0%   {top:0}
  25%  {top:-10px;}
  50%  {top:0;}

  75%  {top:0;}
  100% {top:0;}
}
@keyframes infoanim {
  0%   {transform:scale(1); filter:brightness(100%);}
  15%  {transform:scale(1.2); filter:brightness(150%);}
  30% {transform:scale(1); filter:brightness(100%);}
}
@keyframes schildanim {
  0%   {filter:brightness(100%);}
  20%  {filter:brightness(200%);}
  40% {filter:brightness(100%);}
}
@keyframes mapanim {
  0%   {transform:scale(1); filter:brightness(100%);}
  50%  {transform:scale(1.2); filter:brightness(150%);}
  100% {transform:scale(1); filter:brightness(100%);}
}
@keyframes userboxanim {
  0%   {transform:scale(1); filter:brightness(100%);}
  50%  {transform:scale(1.1); filter:brightness(100%);}
  100% {transform:scale(1); filter:brightness(100%);}
}
@keyframes arrowanim {
  0%   {transform:scale(1); opacity:0;}
  30%  {transform:scale(1.4); opacity:1;}
  60% {transform:scale(1.8); opacity:0;}
  100% {transform:scale(1.8); opacity:0;}
}
@keyframes pulse {
  0%   {transform:scale(1); }
  50%  {transform:scale(1.4); }
  100% {transform:scale(1); }
}
@keyframes turn {
  0%   {transform:rotate(0);}
  100% {transform:rotate(360deg);}
}
@keyframes timepulse {
  0%   {opacity:0; transform:scale(1.0);}
  25%   {opacity:1; }
  50%   {opacity:1; transform:scale(1.1);}
  75%   {opacity:1; }
  100% {opacity:0; transform:scale(1.0);}
}
@keyframes demoanim{
  0%   {opacity:0; }
  50%  {opacity:0.0; }
  60%  {opacity:0.8; }
  70%  {opacity:0.8; }
  80%  {opacity:0; }
  100% {opacity:0; }
}
@keyframes blackdemoanim{
  0%   {visibility:hidden; opacity:1; }
  93%  {visibility:hidden; opacity:1; }
  96%  {visibility:visible; opacity:1; }
  99%  {visibility:hidden; opacity:1; }
  100% {visibility:hidden; opacity:1; }
}

@font-face {
    font-family: 'Sono';
    src: url('../font/Sono-Light.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
}
@font-face {
    font-family: 'Sono';
    src: url('../font/Sono-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: 'Sono';
    src: url('../font/Sono-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
}
@font-face {
    font-family: 'Sono';
    src: url('../font/Sono-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
}
@font-face {
    font-family: 'Hobgoblin';
    src: url('../font/DK-Hobgoblin.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
}