/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	FONT
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/


/* latin-ext */
@font-face {
	font-family: 'Press Start 2P';
	font-style: normal;
	font-weight: 400;
	src: local('Press Start 2P Regular'), local('PressStart2P-Regular'), url(../fonts/8Lg6LX8-ntOHUQnvQ0E7o6SkDmgNrBPNFeI4cxdj3Ko.woff2) format('woff2');
	unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
	font-family: 'Press Start 2P';
	font-style: normal;
	font-weight: 400;
	src: local('Press Start 2P Regular'), local('PressStart2P-Regular'), url(../fonts/8Lg6LX8-ntOHUQnvQ0E7o69WAFmVxfVhVkWhl-QDeAk.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2212, U+2215;
}







/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	THE 300MS DELAY PROBLEM SOLVED
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

html {

	touch-action: manipulation;		/*	KILLS THE 300MS DELAY	*/

}







/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	ALLGEMEIN
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/



* {

	box-sizing: border-box;
	
}


body {
	
	font-family: Helvetica, Arial, sans-serif;
	font-size: 18px;
	line-height: 100%;
	font-weight: 400;
	text-transform: none;

	height: 100%;
	width: 100%;

	padding: 0px;
	margin: 0px;
	
	background-color: lightgreen;
	
	overflow: hidden;
	
	user-select: none;/*  AVOID TEXT SELECT MARKS */
	
	-webkit-tap-highlight-color: rgba(0,0,0,0);	/*	KILLS THE OBJECT HIGHLIGHT ON TAP	*/
	-webkit-touch-callout: none !important;		/*	KILLS THE COPY MENU ON LON PRESS ON iOS	*/
	-webkit-user-select: none !important;		/*	KILLS THE COPY MENU ON LON PRESS ON iOS	*/
	
	-webkit-text-size-adjust: none;				/*	AVOID PLAY BUTTON TEXT SHRINK ON iOS 	*/

}



h1 {
	
	font-family: "Press start 2P", Helvetica, Arial, sans-serif;
	font-size: 32px;
	line-height: 100%;
	font-weight: 600;
	letter-spacing: 0px;
	color: slategray;
	text-align: center;
	text-transform: uppercase;
	
	margin: 0px;
	margin-bottom: 20px;
	
	padding: 0px;
	
}



#ALLES {
	

	height: 100%;
	width: 100%;
	
	overflow: hidden;
	
	
}





#TRACK {
	
	position: absolute;
	
	height: 100%;
	width: 100%;
	
	z-index: 2;

	

	
}




@media screen and (orientation:portrait) {
	
	body {
	
		font-size: 5vw;
	
	}
	
	h1 {
		
		
		font-size: 8vw;
		line-height: 100%;
		
	}
	
	
}


/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	FOOD
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

.food, .XFP_food, .INV_food, .XLP_food, .XSP_food, .ICE_food {
	
	position: absolute;

	border-radius: 100%;
		
	transform-origin: center center;
	
	z-index: 0;
	
}



/* FOOD */
.food div:nth-of-type(1), .XFP_food div:nth-of-type(1), .INV_food div:nth-of-type(1), .XLP_food div:nth-of-type(1), .XSP_food div:nth-of-type(1), .ICE_food div:nth-of-type(1) {

	position: absolute;

	height: 100%;
	width: 100%;
	
	text-align: center;
	font-weight: 600;
	font-size: 24px;
	line-height: 100%;
	color: white;
	
	padding-top: 25%;
	
	background-color: gold;

	background-image: url(../bilder/rundung.png);
	background-size: contain;
	background-position: center center;

	border-radius: 100%;

	z-index: 2;
	
	animation: food_appears 0.5s 0s forwards ease-in;
	

}


/* SPECIAL POWER FOOD */
.XFP_food div:nth-of-type(1) {
	
	background-color: darkorange;
}


.INV_food div:nth-of-type(1) {
	
	background-color: white;	
}


.XLP_food div:nth-of-type(1) {
	
	background-color: rgba(153,101,21,1);	
}


.XSP_food div:nth-of-type(1) {
	
	background-color: #cfb209;
	
}


.ICE_food div:nth-of-type(1) {
	
	background-color: #02567f;
	
}


.XLP_food div:nth-of-type(1), .XSP_food div:nth-of-type(1) {
	
	font-family: "Press start 2P", Helvetica, Arial, sans-serif;
	font-size: 12px;
	line-height: 100%;
	
	padding-top: 15px;
	
}

.XSP_food div:nth-of-type(1) {
	
	font-size: 8px;
	line-height: 100%;
	
	padding-top: 17px;
	
}





/* SHADOW */
.food div:nth-of-type(2), .XFP_food div:nth-of-type(2), .INV_food div:nth-of-type(2), .XLP_food div:nth-of-type(2), .XSP_food div:nth-of-type(2), .ICE_food div:nth-of-type(2) {

	position: absolute;

	height: 100%;
	width: 100%;

	background-image: url(../bilder/shadow.png);
	background-repeat: no-repeat;
	background-size: 80%;
	background-position: center center;

	border-radius: 100%;

	z-index: 1;
	
	animation: food_appears_shadow_pop 0.5s 0s forwards ease-in;

}



/* HOLE */
.food div:nth-of-type(3), .XFP_food div:nth-of-type(3), .INV_food div:nth-of-type(3), .XLP_food div:nth-of-type(3), .XSP_food div:nth-of-type(3), .ICE_food div:nth-of-type(3) {

	position: absolute;

	height: 80%;
	width: 80%;
	
	margin-top: 10%;
	margin-left: 10%;

	background-color: #996515;

	border-radius: 100%;

	z-index: 0;
	
	animation: food_appears_hole_open 0.5s 0s forwards ease-in;

}



.food div:nth-of-type(1) {
	
	color: rgba(255,255,255,.8);
	
}




@keyframes food_appears {

	0% { transform: scale(0); }
	50% { transform: scale(0); }
	90% { transform: scale(1.2); }
	100% { transform: scale(1); }

}

@keyframes food_disappears {

	0% { transform: scale(1); }
	10% { transform: scale(1.2); }
	50% { transform: scale(0); }
	100% { transform: scale(0); }

}

@keyframes food_appears_shadow_pop {

	0% { margin-top: 0%; transform: scale(0); }
	50% { margin-top: 0%; transform: scale(0); }
	90% { margin-top: 100%; transform: scale(1); }
	100% { margin-top: 30%; transform: scale(1); }
}

@keyframes food_disappears_shadow_pop {

	0% { margin-top: 30%; transform: scale(1);}
	10% { margin-top: 100%; transform: scale(1);}
	50% { margin-top: 0%; transform: scale(0); }
	100% { margin-top: 0%; transform: scale(0); }
}

@keyframes food_appears_hole_open {

	0% { transform: scale(0); }
	50% { transform: scale(1); }
	51% { transform: scale(0); }
	100% { transform: scale(0); }
}

@keyframes food_disappears_hole_open {

	0% { transform: scale(0); }
	50% { transform: scale(0); }
	50% { transform: scale(1); }
	100% { transform: scale(0); }
}



@keyframes food_gets_eaten {

	0% { transform: scale(1); }
	100% { transform: scale(0); }

}




@keyframes food_glow {

	0% { box-shadow: none; }
	50% { box-shadow: 0px 0px 0px 5px rgba(255,215,0,.3); }
	100% { box-shadow: none; }
}

@keyframes food_glow_XFP {

	0% { box-shadow: none; }
	50% { box-shadow: 0px 0px 0px 5px rgba(255,140,0,.3); }
	100% { box-shadow: none; }
}

@keyframes food_glow_XSP {

	0% { box-shadow: none; }
	50% { box-shadow: 0px 0px 0px 5px rgba(207,178,9,.3); }
	100% { box-shadow: none; }
}

@keyframes food_glow_INV {

	0% { box-shadow: none; }
	50% { box-shadow: 0px 0px 0px 5px rgba(255,255,255,.3); }
	100% { box-shadow: none; }
}

@keyframes food_glow_ICE {

	0% { box-shadow: none; }
	50% { box-shadow: 0px 0px 0px 5px rgba(2,86,127,.3); }
	100% { box-shadow: none; }
}

@keyframes food_glow_XLP {

	0% { box-shadow: none; }
	50% { box-shadow: 0px 0px 0px 5px rgba(153,101,21,.3); }
	100% { box-shadow: none; }
}









/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	LEVEL INDICATOR
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

#LEVEL_INDICATOR {
	
	position: absolute;
	
	top: 20px;
	left: 50%;
	
	height: 40px;
	width: 200px;

	margin-left: -100px;
	
	font-family: "Press start 2P", Helvetica, Arial, sans-serif;
	text-transform: uppercase;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0px;
	line-height: 100%;
	text-align: center;
	color: white;
	
	z-index: 0;
}


#LEVEL_INDICATOR:before {
	
	content: "LEVEL ";
}



#COUNTDOWN {
	
	position: absolute;
	
	bottom: 0px;
	left: 0px;
	
	height: 10px;
	width: 100%;
	
	background-color: rgba(255,255,255,.2);

	z-index: 0;

	
}

#COUNTDOWN div {

	background-color: rgba(255,255,255,.8);
	
	height: 100%;
	width: 0%;
}


@media screen and (orientation:portrait) {
	
	#LEVEL_INDICATOR {
		
		
			
	}
}
 
 
@keyframes countdown_flash {

	0% { opacity: 1; }
	50% { opacity: .1; }
	100% { opacity: 1; }

}


/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	SCORE DISPLAY
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/


#SCORE_L, #SCORE_R, #HIGHSCORE, #EXTRASCORE {

	position: absolute;

	height: auto;
	width: auto;

	top: 60px;

	font-family: "Press start 2P", Helvetica, Arial, sans-serif;
	font-size: 32px;
	line-height: 100%;
	color: white;
	text-align: center;
	
	padding: 10px;
	padding-top: 12px;
	padding-left: 15px;
	
	cursor: default;

	z-index: 0;

}


#SCORE_L {
	
	right: 50%;
	
	text-align: right;
	
	background-color: DeepSkyBlue;
	
}

#SCORE_R {
	
	left: 50%;
	
	text-align: left;
	
	background-color: #EE7B30;
}


#HIGHSCORE {

	left: 50%;
	
	width: 200px;
	
	margin-top: 52px;
	margin-left: -100px;

	font-size: 12px;
	line-height: 100%;

	opacity: .5;
	
	display: none;
	

}



#EXTRASCORE {

	position: absolute;

	height: auto;
	width: auto;

	font-family: "Press start 2P", Helvetica, Arial, sans-serif;
	font-size: 32px;
	line-height: 100%;
	color: white;
	text-align: center;

	z-index: 2;

	display: none;

}


#EXTRASCORE span {

	font-size: 16px;
	line-height: 100%;


}




@media screen and (orientation:portrait) and (max-width: 700px) {
	
	#SCORE_L, #SCORE_R, #HIGHSCORE, #EXTRASCORE {
		
		top: 40px;
		
	}
	
	#SCORE_L, #SCORE_R {
		
		font-size: 8vw;
		line-height: 100%;
		
	}
	
}



@keyframes highscore_flash {

	0% { opacity: 1; }
	50% { opacity: 0; }
	100% { opacity: 1; }

}



@keyframes show_extrascore {

	0% { opacity: 1; }
	20% { opacity: 1; }
	100% { margin-top: -100px; opacity: 0; }

}



/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	SCORE HISTORY
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

#SCORE_HISTORY {
		
	position: absolute;
	
	top: 40px;
	left: 50%;
	
	height: calc(100vh - 80px);
	width: 50vh;
	
	margin-left: -25vh;
	
	background-color: white;
	
	border-radius: 1px;
	
	padding: 20px;
	padding-top: 20px;	
	
	display: none;
	
	z-index: 2;
	
	
}


/*    SCORE GRAPH    */
#SCORE_HISTORY #history_graph {
	
	transform: scaleY(-1);
	
	height: 60%;
	width: 100%;
	
	overflow: hidden;

}


/*    MATCH INFO    */
#SCORE_HISTORY #match_data {

	color: slategray;
	text-align: center;
	
	height: 40%;
	width: 100%;
	
	padding-top: 40px;
	
	cursor: default;
	
}




/*    BARS    */
#SCORE_HISTORY #history_graph div {
	
	
	float: left;

	opacity: .5;
	
	padding: 0px;
	
	width: 1%;
	
}

/*    BLUE BAR    */
#SCORE_HISTORY #history_graph .blue {
	
	background-color: DeepSkyBlue;	
}

/*    RED BAR    */
#SCORE_HISTORY #history_graph .red {
	
	background-color: #EE7B30;
	
	margin-left: -1%;	
}



@media (orientation:portrait), (max-height: 600px) {

	#SCORE_HISTORY {
			
		height: 100vh;
		width: 100vw;
		
		top: 0px;
		left: 0px;
		
		border-radius: 0px;

		margin: 0px;
				
	}
	
	#SCORE_HISTORY #history_graph {
		
				
	}
	
	#SCORE_HISTORY #match_data {
		
			
	}
}


@media (orientation:landscape) and (max-height: 500px)  {

	#SCORE_HISTORY {
			
		
	}
	
	#SCORE_HISTORY #history_graph {
		
		visibility: hidden;	
		
		height: 40%;

	}
	
	#SCORE_HISTORY #match_data {
		
		height: 20%;
		margin-bottom: 20%;
		
	}
}




/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	SETTINGS
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/



#SCORE_HISTORY #SETTINGS {

	position: absolute;
	
	height: 80%;
	width: 100%;
	
	top: 0%;
	left: 0%;
	
	padding: 10%;
	padding-top: 28px;
	
	color: slategray;
	text-align: center;
	
	background-color: white;
	
	border-bottom: 1px solid rgba(112,128,144,.1);
	
	overflow-y: scroll;

	display: none;

}


#SCORE_HISTORY #SETTINGS div {
	
	
	height: auto;
	width: 100%;
	
	overflow: auto;
	
	margin-top: 20px;
	margin-bottom: 40px;
	
	padding: 0px;
	
	text-align: center;
	
	opacity: 1;
	
	transform: none;	
}




#SCORE_HISTORY #SETTINGS div .colorpicker, #SCORE_HISTORY #SETTINGS div .levelpicker {
	
	
	float: left;
	
	height: 40px;
	width: 40px;
	
	margin: calc((100% - 200px)/10);
	
	border-radius: 10px;
	
	border: 3px solid white;
	
	cursor: pointer;
	
	padding: 0px;	
}



#SCORE_HISTORY #SETTINGS div .colorpicker:hover {
	
	
	border: 3px solid transparent;
}

#SCORE_HISTORY #SETTINGS div .colorpicker:active {
	
	
	border: 3px solid rgba(112,128,144,.2);	
}






#SCORE_HISTORY #SETTINGS div .levelpicker {
	
	height: 41px;
	width: 41px;
	
	border-radius: 100%;
	
	margin: 2px;
	
	border: 3px solid white;
	
	background-color: rgba(112,128,144,.1);
	
	font-family: "Press start 2P", Helvetica, Arial, sans-serif;
	text-transform: uppercase;
	font-size: 8px;
	font-weight: 600;
	letter-spacing: 0px;
	text-align: center;
	color: slategray;
	line-height: 100%;
	
	padding-top: 14px;	
}




#SCORE_HISTORY #SETTINGS div .levelpicker:hover {
	
	border: 3px solid rgba(112,128,144,.01);
	
}

#SCORE_HISTORY #SETTINGS div .levelpicker:active {
	 
	 border: 3px solid rgba(112,128,144,.2);
	 
}










#SCORE_HISTORY #SETTINGS_CIRCLE {
	
	position: absolute;
	
	top: 19px;
	right: 14px;
	
	height: 40px;
	width: 40px;
	
	border: none;
	
	background-image: url(../bilder/settings_circle_mobile.png);
	background-size: contain;
	
	cursor: pointer;
	
	z-index: 3;
	
	display: none;
	
}



#SCORE_HISTORY #CLOSE {
	
	position: absolute;
	
	top: 21px;
	right: 20px;
	
	height: 40px;
	width: 40px;
	
	border-radius: 0px;
	
	border: none;
	
	cursor: pointer;
	
	z-index: 3;
	
	display: none;

}


#SCORE_HISTORY #CLOSE div {
	
	position: absolute;

	margin-left: 25px;
	
	background-color: slategray;
	
	height: 40px;
	width: 2px;
	
	border-radius: 10px;
		
}

#SCORE_HISTORY #CLOSE div:nth-of-type(1) {
	
	transform: rotate(45deg);
	
	
}

#SCORE_HISTORY #CLOSE div:nth-of-type(2) {
	
	transform: rotate(-45deg);
	
	
}



@media screen and (orientation:portrait) {
	
	#SCORE_HISTORY #SETTINGS_CIRCLE {
				

		
	}
	
	#SCORE_HISTORY #SETTINGS_CIRCLE, #SCORE_HISTORY #CLOSE {
		
		zoom: 1;
		
	}
	
	#SCORE_HISTORY #CLOSE div {
		
		
	}	
}






/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	ON/OFF SWITCH
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/


.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

.switch input { 
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .2s;
  transition: .2s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .2s;
  transition: .2s;
}

input:checked + .slider {
  background-color: lightgreen;
}

input:focus + .slider {
  box-shadow: 0 0 1px lightgreen;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}



@media screen and (orientation:portrait) {
	
	.switch {
		
		zoom: 1.5;
		
		margin-left: -0px;
	}	
}




/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	SCHALTER
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/


.schalter {

	position: relative;
	
	left: 50%;
	
	height: 45px;
	width: 80%;

	margin-left: calc(-40% - 3px);
	margin-top: -70px;

	font-family: "Press start 2P", Helvetica, Arial, sans-serif;
	text-transform: uppercase;
	font-size: 16px;
	font-weight: 600;
	letter-spacing: 0px;
	line-height: 100%;
	text-align: center;
	color: white;
	white-space: nowrap;

	padding-top: 16px;
	padding-left: 12px;
	padding-right: 8px;

	background-color: slategray;

	border-radius: 0px;
	box-shadow: 6px 6px #4E4E4E, 5px 5px #4E4E4E, 4px 4px #4E4E4E, 3px 3px #4E4E4E, 2px 2px #4E4E4E, 1px 1px #4E4E4E;

	cursor: pointer;

	zoom: 1.2;
}



.schalter:hover {
	
	margin-left: calc(-40% - 5px);
	margin-top: -72px;
	
	box-shadow: 8px 8px #4E4E4E, 7px 7px #4E4E4E, 6px 6px #4E4E4E, 5px 5px #4E4E4E, 4px 4px #4E4E4E, 3px 3px #4E4E4E, 2px 2px #4E4E4E, 1px 1px #4E4E4E;
}




.schalter:active {
	
	margin-left: calc(-40% + 3px);
	margin-top: -64px;
	
	box-shadow: none;
}



@keyframes vergroessern {

    0% { transform: scale(1); }

    100% { transform: scale(1.25); }
}



@media screen and (orientation:portrait) {
	
	.schalter {
	
		font-size: 4vw;
		
		padding-top: 4vw;
		padding-bottom: 4vw;
		
		height: 11vw;	
	}
}



/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	APP STORE BUTTON
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/


#APP_STORE_BUTTON {

	position: absolute;

	bottom: 80px;
	right: 40px;

	width: 200px;

	z-index: 7;

	display: none;

}


#APP_STORE_BUTTON img {

	width: 100%;

}


@media screen and (orientation:portrait) {
	
	#APP_STORE_BUTTON {
	
		bottom: 120px;
		right: auto;
		left: 50%;
	
		width: 80vw;
	
		margin-left: -40vw;
		
		background-color: white;

	
	}
	
	#APP_STORE_BUTTON img {
	
		height: 60px;
		width: auto;

	}
	
}





/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	CURSOR HINT
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/


#cursorhint_L, #cursorhint_R, #mobile_taphint {


	position: absolute;

	height: 30px;
	width: 200px;

	top: 100%;
	left: 50%;

	margin-left: -130px;
	margin-top: -150px;

	text-align: center;
	
	z-index: 10;
	
	display: none;

}


#cursorhint_R {

	margin-left: 62px;

}



 #mobile_taphint {


	width: 400px;
	
	top: 50%;
	left: 50%;

	margin-left: -200px;
	margin-top: -15px;


}





#mobile_taphint div {

	width: auto;

	font-size: 18px;
	color: rgba(255,255,255,.8);
	letter-spacing: 0px;
	font-weight: 400;
	text-align: center;

	opacity: .8;

	background-color: rgba(0,0,0,.2);
	border-radius: 30px;

	padding: 6px;
	padding-left: 15px;
	padding-right: 15px;

	margin-top: 2px;

	white-space: nowrap;

	display: inline-block;
	vertical-align: top;

	filter: blur(0px);


}


#cursorhint_L .taste, #cursorhint_R .taste {

	float: left;

	height: 50px;
	width: 50px;

	border: 2px solid white;
	border-radius: 9px;

	background-color: rgba(255,255,255,0.2);

	font-size: 21px;
	color: white;
	text-align: center;

	padding-top: 10px;
	padding-left: 1px;

	margin-top: 10px;
	margin-right: 0px;

	animation: taste_druecken 1s linear;



}




.taste div {

	position: relative;
	text-align: left;

	background-color: white;

	margin-top: 10px;
	margin-left: 18px;

}

.taste div:before,
.taste div:after {

	content: '';
	position: absolute;
	background-color: inherit;

}

.taste div,
.taste div:before,
.taste div:after {

	width:  5px;
	height: 5px;
	border-top-right-radius: 10%;

}

.taste div {

	transform: rotate(-90deg) skewX(-30deg) scale(1,.866);

}

.taste div:before {

	transform: rotate(-135deg) skewX(-45deg) scale(1.414,.707) translate(0,-50%);

}

.taste div:after {

	transform: rotate(135deg) skewY(-45deg) scale(.707,1.414) translate(50%);

}











/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	ÜBERLEGFENSTER
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

#FENSTERABDUNKLER {

	position: fixed;

	top: 0px;
	left: 0px;

	width: 100%;
	height: 100%;

	background-color: rgba(255,255,255,0);

	display: none;

	z-index: 99;

}




#FENSTER, #FENSTERBEHAELTER {

	width: 100%;
	height: 100%;



}


#FENSTER {

	background-color: transparent;

	opacity: 1;

}


#SCHLIESSKNOPF {

	position: fixed;

	left: 100%;

	width: 60px;
	height: 60px;

	margin-left: -60px;
	margin-top: 0px;

	background-image: url(../bilder/feedback_x.png);
	background-size: 40%;
	background-repeat: no-repeat;
	background-position: center center;
	background-color: transparent;

	padding: 0px;

	cursor: pointer;

	z-index: 101;


}



iframe {

	height: 1px;
	width: 1px;
	
	top: -1000px;
	left: -1000px;
	
	display: none;

}







/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	KLICKPUNKT
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/


#KLICKFELD {

	position: absolute;

	height: 100%;
	width: 100%;

	z-index: 3;

	-webkit-tap-highlight-color: rgba(0,0,0,0);/*	KILLS THE OBJECT HIGHLIGHT ON TAP	*/
	-webkit-touch-callout: none;


	display: block;
	
	opacity: .5;


}



.tap_point, .swipe_point {

	position: absolute;

	background-color: DeepSkyBlue;

	height: 100px;
	width: 100px;

	border-radius: 100%;

	margin-left: -50px;
	margin-top: -50px;

	animation: tap_point .8s forwards;

	z-index: 2;
	



}


.swipe_point {

	opacity: .06;

	animation: none;

	height: 70px;
	width: 70px;

	margin-left: -35px;
	margin-top: -35px;

}



@keyframes tap_point {

    0% { opacity: 1; transform: scale(.2); }
    100% { opacity: 0; transform: scale(1); }

}


@keyframes swipe_point {

    0% { opacity: .1; transform: scale(.2); }
    100% { opacity: 0; transform: scale(1); }

}


@keyframes aufpoppen {

    0% { transform: scale(0); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }

}


@keyframes zupoppen {

    0% { transform: scale(1); opacity: 1; }
    80% { transform: scale(.2); opacity: 0; }
    100% { transform: scale(0); opacity: 0; }

}


@keyframes reinschieben {

    0% { top: -100vh; }

    100% { top: 0vh; }

}


@keyframes rausschieben {

    0% { top: 0vh; }

    100% { top: -100vh; }

}


@keyframes taste_druecken {

    0% { background-color: rgba(255,255,255,.2); }

    79% { background-color: rgba(255,255,255,.2); }
    80% { background-color: white; }

    100% { background-color: white; }

}