/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	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-weight: 100;

	background-color: lightgreen;

	font-size: 16px;
	font-weight: 400;
	color: white;
	line-height: 140%;

	margin: 0px;

	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 	*/
	


}





a {

	color: white;

}






/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	ELEMENTE
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/


#TRACK {

	height: 100vh;
	width: 100%;
	
	transform-origin: center center;
}





#KLICKFELD {

	position: absolute;

	height: 100vh;
	width: 100%;

	z-index: 7;

}



@keyframes landing_temblor {

    0% { transform: scale(1); }
    10% { transform: scale(.98); }
    30% { transform: scale(1.02); }
    50% { transform: scale(.99); }
    80% { transform: scale(1.01); }
    100% { transform: scale(1); }
}



/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	SCREEN CRACKS
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

.crack {

	position: absolute;

	height: 100vh;
	width: 100%;

	background-image: url(../images/screen_crack.png);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: contain;

	transform-origin: bottom center;

	z-index: 6;

	display: none;

}



.crack:nth-of-type(2) {

	transform: rotate(3deg) scaleX(-0.9);


}

.crack:nth-of-type(3) {

	transform: rotate(-3deg) scaleY(1.1);


}

.crack:nth-of-type(4) {

	transform: rotate(5deg) scaleX(-1.1);


}

.crack:nth-of-type(5) {

	transform: rotate(-5deg) scaleY(0.8);


}




/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	JUMP PONGI
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/


#PONGI {
	

	position: absolute;

	height: 48px;
	width: 48px;

	top: 80%;
	left: 50%;
	
	margin-left: -24px;
	margin-top: -24px;
	
	display: none;
			
	z-index: 3;
			
}


.jumppongi_container {

	position: relative;

	height: 48px;
	width: 48px;


	transform: rotate(90deg);

	z-index: 3;



}


.JUMPPONGI {


	position: absolute;

	height: 48px;
	width: 48px;

	border-radius: 100%;

	animation-name: wackeln;
	animation-duration: 0.2s;
	animation-iteration-count: infinite;

	z-index: 3;

}


.JUMPPONGI .rundung {

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

	transform: rotate(-90deg);

	position: absolute;

	height: 48px;
	width: 48px;

	border-radius: 100%;

	background-image: url(../images/rundung.png);
	background-size: 100%;

	animation-name: gegen_wackeln;
	animation-duration: 0.2s;
	animation-iteration-count: infinite;
}


.JUMPPONGI .eyes, .JUMPPONGI .sad_eyes {

	margin-top: 12px;
	margin-left: 8px;

	position: absolute;

	height: 36px;
	width: 12px;
}

.JUMPPONGI .sad_eyes {

	margin-top: 14px;
	margin-left: 10px;
}


.JUMPPONGI .eyes div {

	background-color: white;

	padding: 2px;
	padding-left: 2px;

	height: 8px;
	width: 8px;

	margin-bottom: 9px;

	border-radius: 100%;
}


.JUMPPONGI .eyes div div {

	background-color: black;

	padding: 0px;

	height: 4px;
	width: 4px;

	transform: scale(1.1);

	border-radius: 100%;
}


.JUMPPONGI .sad_eyes div, .JUMPPONGI .sad_eyes div div {

	background-color: black;
		
	padding: 0px;
	
	height: 6px;
	width: 2px;
	
	margin-bottom: 8px;
	
	border-radius: 2px;
}


.JUMPPONGI .sad_eyes div div {

	display: none;
}



.jumppongi_container .legs {

	position: absolute;

	height: 55px;
	width: 7px;

	z-index: 2;

	margin-top: -3px;
	margin-left: 3px;

	animation-name: wackeln;
	animation-duration: 0.2s;
	animation-iteration-count: infinite;

}


.jumppongi_container .legs .replayfoot {

	background-color: slategray;

	height: 19px;
	width: 19px;

	margin-bottom: 16px;

	border-radius: 100%;

	background-image: url(../images/rundung.png);
	background-size: 100%;

	animation-name: fuss_1;
	animation-duration: 0.2s;
	animation-iteration-count: infinite;


}

.jumppongi_container .arms {

	position: absolute;

	height: 60px;
	width: 16px;

	z-index: 2;

	margin-top: -6px;
	margin-left: 14px;

	animation-name: wackeln;
	animation-duration: 0.2s;
	animation-iteration-count: infinite;
}

.jumppongi_container .arms .replayhand {

	background-color: slategray;

	height: 16px;
	width: 16px;

	margin-bottom: 28px;

	border-radius: 100%;

	background-image: url(../images/rundung.png);
	background-size: 100%;
	transform: rotate(-90deg);

	animation: none;

}


.shadow {

	position: absolute;

	margin-left: 2px;
	margin-top: -32px;

	height: 43px;
	width: 43px;

/* 	background-color: rgba(0,0,0,.1); */
	background-image: url(../images/pongi_shadow.png);
	background-repeat: no-repeat;
	background-size: 100%;
	background-position: center center;

	border-radius: 100%;

	animation-name: schatten_wackeln;
	animation-duration: 0.2s;
	animation-iteration-count: infinite;

	z-index: 2;

}





@keyframes pongi_move_to_left {

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

}


@keyframes pongi_move_to_right {

	0% { transform: rotate(0deg); }
	50% { transform: rotate(30deg); }
	100% { transform: rotate(0deg); }

}





/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	JUMP POWER INDICATOR CIRCLE
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

#POWER_CIRCLE {

	position: absolute;

	height: 90vw;
	width: 90vw;

	top: 80%;
	left: 50%;

	margin-top: -48vw;
	margin-left: -45vw;

	border-radius: 100%;
		
	background-color: transparent;
	
	background-size: contain;
	background-position: center center;
	
	transform: scale(.005);
	transform-origin: center center;
}




@keyframes power_circle_disappear {

    0% {  }
    100% { transform: scale(.005);}

}





#POWER_CIRCLE div {

	
	position: absolute;
	
	
	height: 90vw;
	width: 90vw;
	
	border-radius: 100%;
	
	opacity: .2;
}


#POWER_CIRCLE div:nth-of-type(2) {

	
	animation: power_circle_internal_pulse 500ms infinite;

}	




@keyframes power_circle_internal_pulse {

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




/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	CANYON
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

#CANYON {

	position: absolute;

	height: auto;
	width: 140vw; 

	top: -100vh;
	left: -20vw;
	
	background-color: #996515;

	overflow: hidden;

	z-index: 1;

	animation-timing-function: linear;
}




#CANYON .component {

	
	height: 50%;
	width: 100%;

	background-repeat: repeat-x;
	background-size: 100% 50%;
}

#CANYON .component:nth-of-type(1) {
	
	background-image: url(../images/canyon_top_wall.png);
	background-position: center top;
	
	height: 99%;
	
}

#CANYON .component:nth-of-type(2) {
	
	background-image: url(../images/canyon_bottom_wall.png);
	background-position: center bottom;
	
	height: 1%;
}



#jump_start_marker, #jump_end_marker {
	
	
	position: absolute;
	
	height: 5px;
	width: 33%;
	
	left: 33%;
	
	background-color: rgba(255,0,0,.5);
	
	animation: ausblenden .5s 0s forwards;
	
	display: none;
	
}


#jump_start_marker {
	
	border-bottom: 2px red solid;
	
}

#jump_end_marker {
	
	border-top: 2px red solid;
	
}



/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	BRIDGE
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

#CANYON #BRIDGE {

	position: absolute;
	
	height: 100%;
	width: 50px;
		
	border-left: 1px solid rgba(0,0,0,.2);
	border-right: 1px solid rgba(0,0,0,.4);

	background-color: lightgreen;
	
	z-index: 100;
	
	

}


/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	ROCK
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/




#ROCK {

	position: absolute;

	height: 30vw;
	width: 30vw;

	top: -100vh;
	
	border-radius: 10px;
	
	background-color: black;

/* 	overflow: hidden; */

	z-index: 4;

	animation-timing-function: linear;



}



#ROCK .component {

	height: 50%;
	width: 100%;

	background-repeat: no-repeat;
	background-size: 100% 100%;
	background-position: 0px center;
	

}

#ROCK .component:nth-of-type(1) {
	
	background-image: url(../images/rock_top_wall.png);
	
	height: 1%;
	
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	
}

#ROCK .component:nth-of-type(2) {
	
	background-image: url(../images/rock_bottom_wall.png);
	
	height: 99%;
	
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
	
}



.rock_shadow {

	position: absolute;
	
	height: 30vh;
	width: 100%;

	background-image: url(../images/rock_shadow.png);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	background-position: 0px center;
	
	margin-top: -10px; 
	
	z-index: -1;


}







/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	GRID
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

#GRID {

	position: absolute;

	height: 200vh;
	width: 100%;

	top: -100vh;

	overflow: hidden;

	z-index: 0;

	background-image: url(../images/grass.png);
	background-size: auto 100%;

	animation: simulated_grid_motion 1.2s 0s infinite;  /*  3 * 0.8 / 2 */
	animation-timing-function: linear;

}


#GRID div {

	height: 50vh;
	width: 100%;

	border-top: 5vh solid rgba(0,0,0,.1);

	/* background-image: url(../images/bush.png);
	background-repeat: no-repeat; */


}








/* 	90 and 10 to avoid cutting off canyons and rocks when zooming out TRACK	 */
@keyframes simulated_obstacle_motion {

	0% { top: -90vh; }
	100% { top: 110vh; }
}



@keyframes simulated_grid_motion {

	0% { top: -90vh; }
    100% { top: 10vh; }
}


/*
@keyframes simulated_obstacle_motion {

	0% { top: -100vh; }
	100% { top: 100vh; }
}



@keyframes simulated_grid_motion {

	0% { top: -100vh; }
    100% { top: 0vh; }
}
*/













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


#SCORE, #HIGHSCORE, #EXTRASCORE {

	position: absolute;

	height: auto;
	width: 100%;

	top: 10%;

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

	z-index: 5;

}


#HIGHSCORE {

	margin-top: -30px;

	font-size: 16px;

	opacity: .6;

}


#EXTRASCORE {

	top: 70%;

	display: none;

}

#EXTRASCORE div {

	font-size: 16px;

}


@keyframes highscore_flash {

	0% { opacity: 1; }
	9% { opacity: 1; }
	10% { opacity: 0; }
	19% { opacity: 0; }
	20% { opacity: 1; }
	29% { opacity: 1; }
	30% { opacity: 0; }
	39% { opacity: 0; }
	40% { opacity: 1; }
	49% { opacity: 1; }
	50% { opacity: 0; }
	59% { opacity: 0; }
	60% { opacity: 1; }
	69% { opacity: 1; }
	100% { opacity: 0.6; }

}


@keyframes show_extrascore {

	0% { top: 65%; opacity: 1; }
	20% { top: 65%; opacity: 1; }
	100% { top: 10%; opacity: 0; }

}







/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	RESTART + HIGHSCORE BUTTON
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/


#RESTART_BUTTON, #HIGHSCORES_BUTTON, #SETTINGS_BUTTON {

	position: absolute;

	height: 15vh;
	width: 30vw;

	top: 40vh;
	left: 35vw;

	text-align: center;

	padding: 20px;
	padding-top: 35px;

	background-image: url(../images/replay.png);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center center;

	z-index: 7;

	cursor: hand;

	display: none;
/* 	background-color: rgba(255,0,0,.1); */
}




#HIGHSCORES_BUTTON {

	top: auto;
	bottom: calc(10vh - 40px);
	left: 50%;

	height: 80px;
	width: 80px;

	padding: 0px;
	padding-top: 10px;
	padding-left: 8px;

	background-image: none;

	margin-left: -40px;

	transform: scaleY(-1);


}


#HIGHSCORES_BUTTON div {

	float: left;

	background-color: white;

	width: 20px;

	font-family: "Press start 2P", Helvetica, Arial, sans-serif;
	font-size: 8px;
	line-height: 100%;
	color: lightgreen;

	padding-top: 10px;

	margin-top: 10px;

	transform: scaleY(-1);

}


#HIGHSCORES_BUTTON div:nth-of-type(1) {

	height: 30px;

}

#HIGHSCORES_BUTTON div:nth-of-type(2) {

	height: 40px;
	width: 25px;

}

#HIGHSCORES_BUTTON div:nth-of-type(3) {

	height: 25px;

}





#SETTINGS_BUTTON {
	
	top: auto;
	bottom: calc(10vh + 40px);
	left: 50%;
	
	margin-left: -40px;

	height: 80px;
	width: 80px;
	
	background-image: url(../images/settings.png);
	background-size: 60%;
}








#APP_STORE_BUTTON {

	position: absolute;

	bottom: 7vh;
	left: 50%;

	width: 80vw;

	margin-left: -40vw;

	z-index: 7;

	display: none;

}


#APP_STORE_BUTTON img {

	width: 80vw;
	max-width: 250px;

}



@keyframes settings_processing {

    0% { transform: rotate(0deg); }
    
    85% { transform: rotate(360deg) scale(1); }
    
    95% { transform: scale(1.1); }
    
    100% { transform: scale(1); }
    
    

}




/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	GLOBAL HIGHSCORES
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

#GLOBAL_HIGHSCORES, #SETTINGS {

	text-align: center;
	
	width: 100%;
	
	padding-bottom: 100px;

}



#GLOBAL_HIGHSCORES #GLOBAL_HIGHSCORELIST, #GLOBAL_HIGHSCORES #ENTER_NAME {

	font-size: 18px;
	
	width: 100%;

}


#GLOBAL_HIGHSCORES #GLOBAL_HIGHSCORELIST {
	
	margin-left: 10%;
	width: 90%;
	
}




#GLOBAL_HIGHSCORES #GLOBAL_HIGHSCORELIST div, #GLOBAL_HIGHSCORES #ENTER_NAME div {

	width: 100%;

	font-family: "Press start 2P", Helvetica, Arial, sans-serif;
	font-size: 4vw;
	text-transform: uppercase;
	line-height: 120%;
	text-align: left;

	margin-bottom: 10px;

	clear: left;

}


#GLOBAL_HIGHSCORES #GLOBAL_HIGHSCORELIST div span {

	float: left;
	
	padding-bottom: 15px;

}


#GLOBAL_HIGHSCORES #GLOBAL_HIGHSCORELIST div span:nth-of-type(1) {

	width: 20%;

}

#GLOBAL_HIGHSCORES #GLOBAL_HIGHSCORELIST div span:nth-of-type(2), #GLOBAL_HIGHSCORES #GLOBAL_HIGHSCORELIST div span:nth-of-type(3) {

	text-align: right;
	
	width: 34%;
	
}


#GLOBAL_HIGHSCORES .own_score {

	animation: own_score_flash 1s 0s infinite;


}


@keyframes own_score_flash {

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

}


#GLOBAL_HIGHSCORES h1, #GLOBAL_HIGHSCORES h2, #SETTINGS h1, #SETTINGS h2 {

	position: relative;

	padding-top: 5vh;
	padding-bottom: 5vh;

	font-family: "Press start 2P", Helvetica, Arial, sans-serif;
	font-size: 7vw;
	text-transform: uppercase;
	line-height: 120%;
	word-spacing: -5px;

	width: 80%;

	margin-left: 10%;
	margin-bottom: 7vh;

	border-bottom: 5px dashed white;

	z-index: 1;
}


#SETTINGS h1, #SETTINGS h2  {

	border-bottom: none;
	
	margin-bottom: 0px;
	
}

#SETTINGS h2 {
	
	
	border-top: 5px dashed white;
	
	padding-top: 20px;
	padding-bottom: 20px;
}


#GLOBAL_HIGHSCORES h2, #SETTINGS h2 {

	position: relative;

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

	margin-top: 20px;
}






#GLOBAL_HIGHSCORES #ENTER_NAME input {


	-webkit-appearance: none;
	outline: none;
	
	font-family: "Press start 2P", Helvetica, Arial, sans-serif;
	font-size: 7vw;
	text-transform: uppercase;
	line-height: 100%;
	word-spacing: -5px;
	color: white;
	text-align: center;
	
	padding: 10px;
	padding-top: 13px;
	
	border: none;
	border-bottom:  5px solid white;
	
	margin-bottom: 40px;
	
	background: transparent;
	
	
	width: 80%;
	

}


#GLOBAL_HIGHSCORES #ENTER_NAME input[type="text"]::-webkit-input-placeholder {

	color: rgba(255,255,255,.3);
	

}



#GLOBAL_HIGHSCORES #ENTER_NAME input[type="submit"] {


	color: slategray;
	
	border: none;
	
	

	
	background: white;
	
	
	width: 80%;
	

}






/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	TAP HINT
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/


#spacebarhint, #cursorhint, #mobile_taphint, #mobile_swipehint {


	position: absolute;

	height: 30px;
	width: 300px;

	top: 50%;
	left: 50%;

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

	text-align: center;

	display: none;

}




#spacebarhint div, #cursorhint div, #mobile_taphint div, #mobile_swipehint div {

	width: auto;

	font-size: 18px;
	color: white;
	letter-spacing: 0px;
	font-weight: 400;
	text-align: center;

	opacity: .8;

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

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

	margin-top: 2px;

	white-space: nowrap;

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

	filter: blur(0px);


}





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

#FENSTERABDUNKLER, #MENUABDUNKLER {

	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: 40px;
	height: 40px;

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

	background-image: url(../images/X.png);
	background-size: 25px;
	background-repeat: no-repeat;
	background-position: 12px 0px;

	padding: 0px;

	cursor: pointer;

	z-index: 101;

	/* zoom: 1.5; */

}



iframe {


	background-color: slategray;

	height: 100%;
	width: 100%;

}














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



/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	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 {

/* 	animation: vergroessern .1s forwards; */
	transform: scale(1.1);

}




.schalter:active {

	background-color: #586673;


}



@keyframes vergroessern {

    0% { transform: scale(1); }

    100% { transform: scale(1.25); }

}



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









/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
		PROZESSOREN
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/


#PROZESSOR {

	position: fixed;

	top: -1000px;

	height: 1px;
	width: 1px;

}







/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	LADEKREIS
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

.ladekreis {

	position: absolute;

	height: 150px;
	width: 150px;

	top: 50%;
	left: 50%;

	margin-left: -265px;
	margin-top: -75px;

	background-color: lightgreen;

	z-index: 3;

	opacity: 1;

	display: none;


}


.ladekreis ~ .ladekreis {

	margin-left: 115px;

	transform: rotate(180deg);

}


.laden,
.laden:before,
.laden:after {
border-radius: 50%;
}
.laden {
color: #ffffff;
font-size: 11px;
text-indent: -99999em;

position: absolute;

top: 50%;
left: 50%;

margin: -55px;

width: 10em;
height: 10em;
box-shadow: inset 0 0 0 1em;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
}
.laden:before,
.laden:after {
position: absolute;
content: '';
}
.laden:before {
width: 5.2em;
height: 10.2em;
background: lightgreen;
border-radius: 10.2em 0 0 10.2em;
top: -0.1em;
left: -0.1em;
-webkit-transform-origin: 5.2em 5.1em;
transform-origin: 5.2em 5.1em;
-webkit-animation: load2 2s infinite ease 1.5s;
animation: load2 2s infinite ease 1.5s;
}
.laden:after {
width: 5.2em;
height: 10.2em;
background: lightgreen;
border-radius: 0 10.2em 10.2em 0;
top: -0.1em;
left: 5.1em;
-webkit-transform-origin: 0px 5.1em;
transform-origin: 0px 5.1em;
-webkit-animation: load2 2s infinite ease;
animation: load2 2s infinite ease;
}
@-webkit-keyframes load2 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes load2 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}








.ladekreis_fenster {

	position: absolute;

	height: 150px;
	width: 150px;

	top: 50%;
	left: 50%;

	margin-left: -75px;
	margin-top: -75px;

	background-color: slategray;

	z-index: 0;

	opacity: 1;

	display: block;


}






.laden_fenster,
.laden_fenster:before,
.laden_fenster:after {
border-radius: 50%;
}
.laden_fenster {
color: #ffffff;
font-size: 11px;
text-indent: -99999em;

position: absolute;

top: 50%;
left: 50%;

margin: -55px;

width: 10em;
height: 10em;
box-shadow: inset 0 0 0 1em;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
}
.laden_fenster:before,
.laden_fenster:after {
position: absolute;
content: '';
}
.laden_fenster:before {
width: 5.2em;
height: 10.2em;
background: slategray;
border-radius: 10.2em 0 0 10.2em;
top: -0.1em;
left: -0.1em;
-webkit-transform-origin: 5.2em 5.1em;
transform-origin: 5.2em 5.1em;
-webkit-animation: load2 2s infinite ease 1.5s;
animation: load2 2s infinite ease 1.5s;
}
.laden_fenster:after {
width: 5.2em;
height: 10.2em;
background: slategray;
border-radius: 0 10.2em 10.2em 0;
top: -0.1em;
left: 5.1em;
-webkit-transform-origin: 0px 5.1em;
transform-origin: 0px 5.1em;
-webkit-animation: load2 2s infinite ease;
animation: load2 2s infinite ease;
}











/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	ANIMATIONS
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/



@keyframes fuss_1 {

    0% { transform: scale(1.25) rotate(-90deg); }

    50% { transform: scale(0.7) rotate(-90deg); }

    100% { transform: scale(1.25) rotate(-90deg); }

}


@keyframes fuss_2 {

    0% { transform: scale(0.7) rotate(-90deg); }

    50% { transform: scale(1.25) rotate(-90deg); }

    100% { transform: scale(0.7) rotate(-90deg); }

}


@keyframes wackeln {

    0% { transform: rotate(-10deg) scale(0.95); }

    50% { transform: rotate(10deg) scale(1.1); }

    100% { transform: rotate(-10deg) scale(0.95); }

}


@keyframes gegen_wackeln {

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

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

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

}


@keyframes schatten_wackeln {

    0% { transform: scale(1); }

    50% {transform: scale(.9); }

    100% { transform: scale(1); }

}


@keyframes zwinkern {


	0% { opacity: 1; }

    1% { opacity: 0; }

    2% { opacity: 1; }

    100% { opacity: 1; }

}



@keyframes canyon_fall {

    0% { transform: rotate(90deg) scale(1); }
    
    100% { transform: rotate(-90deg) scale(.1); }

}





@keyframes fenster_aufpoppen {

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

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

}


@keyframes fenster_zupoppen {

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

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

}



@keyframes ausblenden {

    0% { opacity: 1; }

    100% { opacity: 0; }

}