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

}



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

h2 {
	
	font-size: 8px;
	line-height: 120%;
	
}



#ALLES {
	

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




#SPIEL {


	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: 120%;
		
	}
	
	h2 {
				
		font-size: 2vw;
		line-height: 120%;
		
	}
	
	
}





#GROUND_PATTERN {
	
	position: absolute;
	
	height: 100%;
	width: 100%;
	
	background-image: url(../bilder/grass.png);
	background-repeat: repeat;
	background-size: 25%;
	
	opacity: .9;

	z-index: 1;
		
}

@media screen and (orientation:portrait) {
	
	#GROUND_PATTERN {
		
		background-size: 100% auto;
			
	}

}



/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	VISUAL POSITIONING GRID 
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/


#padding_top, #padding_bottom, #top_segment_margin, #bottom_segment_margin, #padding_left, #padding_right, #left_segment_margin, #right_segment_margin {
	
	position: absolute;
	
	background: rgba(255,0,0,.2);
	
	z-index: 10;
	
	display: none;
	
}	
	
	
#padding_top, #padding_bottom, #top_segment_margin, #bottom_segment_margin {
	
	height: 1px;
	width: 100vw;
	
}


#padding_left, #padding_right, #left_segment_margin, #right_segment_margin {
	
	height: 100vh;
	width: 1px;		
}



/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	BUMP, DUMP, AND HOLE
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

.BUMP, .DUMP, #HOLE, .BUMP_SHADOW, .DUMP_FILL {
	
	position: absolute;
	
	border-radius: 100%;
	
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center center;
	
	z-index: 1;
	
}



.BUMP {
	
	border: 1px solid rgba(0,0,0,.05);
	
	background-size: 101%;	
	background-image: url(../bilder/bump.png);
	
}


.DUMP {
	
		
	border-top: 1px solid rgba(0,0,0,.3);
	border-bottom: 1px solid rgba(255,255,255,.3);
	
	background-image: url(../bilder/dump.png);
	
}


#HOLE {
	
	background-image: url(../bilder/hole.png);
		

	
}


.BUMP_SHADOW, .DUMP_FILL  {
	
	border-radius: 0%;
	
	border: none;
	
	background-position: center top;
	background-image: url(../bilder/bump_shadow.png);
	
	z-index: 2;
	
}


.DUMP_FILL  {

	border-radius: 100%;
	
	background-position: center center;
	
	background-image: none;
	
	filter: blur(5px);
/* 	background-size: calc(100% - 10px) calc(100% - 10px); */

	
}


@keyframes waves {

    0% { transform: scaleX(1) scaleY(1); }

    33% { transform:  scaleX(.95) scaleY(1); }
    
    66% { transform:  scaleX(1) scaleY(.95); }
    
    100% { transform: scaleX(1) scaleY(1); }
}


/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	GREEN
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/


#HOLE #GREEN {
	
	border-radius: 100%;
	
	border: 2px rgba(255,255,255,.1) solid;
	
	animation: show_green .2s forwards;
	
	display: none;
	
	
}


@keyframes show_green {

    0% { transform: scale(0); }

    100% { transform: scale(1); }

}


@keyframes hide_green {

    0% { transform: scale(1); }

    100% { transform: scale(0); }

}



/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	ROLL-BACK ZONE
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

#ROLL_BACK_ZONE_TOP, #ROLL_BACK_ZONE_LEFT, #ROLL_BACK_ZONE_RIGHT, #ROLL_BACK_ZONE_BOTTOM, #ROLL_BACK_ZONE_TL, #ROLL_BACK_ZONE_TR, #ROLL_BACK_ZONE_BL, #ROLL_BACK_ZONE_BR {
	
	position: absolute;
	
	background-position: center center;
	background-size: contain;
	
	z-index: 0;
	
	display: none;

}


#ROLL_BACK_ZONE_TOP, #ROLL_BACK_ZONE_BOTTOM, #ROLL_BACK_ZONE_TL, #ROLL_BACK_ZONE_TR, #ROLL_BACK_ZONE_BL, #ROLL_BACK_ZONE_BR {
	
	height: 30px;
	
}


#ROLL_BACK_ZONE_LEFT, #ROLL_BACK_ZONE_RIGHT, #ROLL_BACK_ZONE_TL, #ROLL_BACK_ZONE_TR, #ROLL_BACK_ZONE_BL, #ROLL_BACK_ZONE_BR {
	
	width: 30px;
	
}

#ROLL_BACK_ZONE_TOP, #ROLL_BACK_ZONE_BOTTOM {
	
	width: calc(100vw - 60px);
	
}


#ROLL_BACK_ZONE_LEFT, #ROLL_BACK_ZONE_RIGHT {
	
	height: calc(100vh - 60px);
	
}


#ROLL_BACK_ZONE_TOP, #ROLL_BACK_ZONE_TL, #ROLL_BACK_ZONE_TR {
	
	top: 0px;
	
}


#ROLL_BACK_ZONE_BOTTOM, #ROLL_BACK_ZONE_BL, #ROLL_BACK_ZONE_BR {
	
	bottom: 0px;
	
}

#ROLL_BACK_ZONE_LEFT, #ROLL_BACK_ZONE_RIGHT {
	
	top: 30px;
	
	background-repeat: repeat-y;
	
}


#ROLL_BACK_ZONE_LEFT, #ROLL_BACK_ZONE_TL, #ROLL_BACK_ZONE_BL {
	
	left: 0px;
	
}

#ROLL_BACK_ZONE_RIGHT, #ROLL_BACK_ZONE_TR, #ROLL_BACK_ZONE_BR {
	
	right: 0px;
	
}

#ROLL_BACK_ZONE_TOP, #ROLL_BACK_ZONE_BOTTOM {
	
	left: 30px;
	
	background-repeat: repeat-x;
	
}


#ROLL_BACK_ZONE_TOP {
	
	background-image: url(../bilder/roll_back_zone/roll_back_zone_T.png);
	
}

#ROLL_BACK_ZONE_LEFT {
	
	background-image: url(../bilder/roll_back_zone/roll_back_zone_L.png);
	
}

#ROLL_BACK_ZONE_RIGHT {
	
	background-image: url(../bilder/roll_back_zone/roll_back_zone_R.png);
	
}

#ROLL_BACK_ZONE_BOTTOM {
	
	background-image: url(../bilder/roll_back_zone/roll_back_zone_B.png);
	
}

#ROLL_BACK_ZONE_TL {
	
	background-image: url(../bilder/roll_back_zone/roll_back_zone_TL.png);
	
}

#ROLL_BACK_ZONE_TR {
	
	background-image: url(../bilder/roll_back_zone/roll_back_zone_TR.png);
	
}

#ROLL_BACK_ZONE_BL {
	
	background-image: url(../bilder/roll_back_zone/roll_back_zone_BL.png);
	
}

#ROLL_BACK_ZONE_BR {

	background-image: url(../bilder/roll_back_zone/roll_back_zone_BR.png);
	
}


/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	BLOW-BACK AIR DISPENSER
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

#BLOW_BACK_AIR_T, #BLOW_BACK_AIR_L, #BLOW_BACK_AIR_B, #BLOW_BACK_AIR_R {
	
	position: absolute;
	
	height: 100px;
	width: 100px;
		
	background-image: url(../bilder/roll_back_zone/blow_back_air.png);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: left center;

	z-index: 2;
	
	display: none;
		
}

#BLOW_BACK_AIR_T {
	
	transform: rotate(90deg);
	
	top: 0px;
	
}

#BLOW_BACK_AIR_L {
	
	left: 0px;
	
}

#BLOW_BACK_AIR_B {
	
	transform: rotate(-90deg);
	
	bottom: 0px;
	
}

#BLOW_BACK_AIR_R {
	
	transform: rotate(180deg);
	
	right: 0px;
	
}



@keyframes air_blow {

    0% { background-position-x: -30px; opacity: 0; }
    
    10% { background-position-x: 0px; opacity: 1; }
    
    20% { background-position-x: 0px; opacity: 1; }

    100% { background-position-x: -30px; opacity: 0; }

}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	HOLE AND PAR INDICATORS
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/


#HOLE_INDICATOR, #PAR_INDICATOR {
	
	position: absolute;
	
	margin-top: 0px;
	margin-left: -32px;	/* 	HALF THE ARC DIAMETER	 */
	
	font-family: "Press start 2P", Helvetica, Arial, sans-serif;
	text-transform: uppercase;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0px;
	line-height: 100%;
	
	height: 30px;
	width: 100px;
	
	overflow: visible;
	
	z-index: 1;
		
}


#PAR_INDICATOR {
	
	margin-top: 0px;
	margin-left: -43px;/* 	HALF THE ARC DIAMETER	 */
	
	font-family: "Press start 2P", Helvetica, Arial, sans-serif;
	letter-spacing: 4px;
	
}


#HOLE_INDICATOR text, #PAR_INDICATOR text {
	
	fill: white;
	
}


 #PAR_INDICATOR .par_dottie {

	fill: rgba(255,255,255,.25);
	
}


 #PAR_INDICATOR .over_par_dottie {

	fill: rgba(0,0,0,.5);
	
}

 #PAR_INDICATOR .over_par_danger_dottie {

	fill: rgba(255,0,0,.5);
	
}


@keyframes rotate {

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

    100% { transform: rotate(720deg); }

}







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


#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%;
	
}


@media screen and (orientation:portrait) {
	
	#HOLE_INDICATOR {
		
		
			
	}

}
 
 
@keyframes countdown_flash {

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

}


/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	STROKE DISPLAY
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/


.STROKES {

	position: absolute;

	height: auto;
	width: 150px;

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

	z-index: 3;


}



@media screen and (orientation:portrait) {
	
	.STROKES {
		
		font-size: 16vw;
		line-height: 100%;
		
	}
	
}


@keyframes par_flash {

	0% { color: white; }
	50% { color: rgba(255,255,255,.1); }
	100% { color: white; }

}


@keyframes show_stroke_number {

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

}



/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	HOLE HISTORY
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

#HOLE_RESULTS {
		
	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: 4;
	
}


#HOLE_RESULTS a {
		
	color: slategray;
	text-decoration: none;
	
	border-bottom: 2px solid rgba(112,128,144,.5);
	
}


#HOLE_RESULTS a:hover {
		
	
	
}



/*    MATCH INFO    */
#HOLE_RESULTS #hole_data {

	color: slategray;
	text-align: center;
	line-height: 120%;
	
	height: calc(100% - 45px);
	width: 100%;
	
	padding-top: 5px;
	padding-bottom: 20px;
	
	cursor: default;
		
}


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

	#HOLE_RESULTS {
			
		height: 100%;
		width: 100vw;
		
		top: 0px;
		left: 0px;
		
		border-radius: 0px;

		margin: 0px;
				
	}

	
	#HOLE_RESULTS #hole_data {
		
		
		
	}


}





/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	BIRD BADGES
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/


#HOLE_RESULTS #bird_badge, #HOLE_RESULTS #bird_badge #bird_badge_overlay {
	
	height: 55%;
	width: 100%;
	
	margin-top: 40px;
	
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center top;
	background-image: none;
		
}


#HOLE_RESULTS #bird_badge #bird_badge_overlay {
	
	position: relative;
	
	height: 100%;
	
	opacity: 0;
	
	animation: bird_animation 1s 1s 3;
	
			
}

@keyframes bird_animation {

    0% { opacity: 1; }
    
    19% { opacity: 1; }
    20% { opacity: 0; }
    
    29% { opacity: 0; }
    30% { opacity: 1; }
    
    49% { opacity: 1; }
    50% { opacity: 0; }
    
    
   
    100% { opacity: 0; }

}



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



#HOLE_RESULTS #SETTINGS, #HOLE_RESULTS #ROUND_RESULTS {

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

	display: none;

}


#HOLE_RESULTS #SETTINGS div, #HOLE_RESULTS #ROUND_RESULTS div {
	
	
	height: auto;
	max-width: 300px;
	
	overflow: auto;
	
	margin-top: 20px;
	margin-bottom: 40px;
	margin-left: calc((100% - 300px) / 2);
	
	padding: 0px;
	
	opacity: 1;
	
	transform: none;
	
}


#HOLE_RESULTS #SETTINGS div:nth-of-type(2) {
	
	
/*
	max-width: 320px;
	
	margin-left: calc((100% - 320px) / 2);
*/
	
}






/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	SETTINGS OPEN AND CLOSE
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/



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



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

}


#HOLE_RESULTS #CLOSE div {
	
	position: absolute;

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

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

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



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

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


			
	}

	
}





/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	COLOR PICKER
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/


#HOLE_RESULTS #SETTINGS div .colorpicker {
	
	float: left;
	
	height: 40px;
	width: 40px;
	
	margin: 10px;
	
	border-radius: 10px;
	
	border: 3px solid white;
	
	cursor: pointer;
	
	padding: 0px;	
	
}



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

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


#HOLE_RESULTS #SETTINGS div .colorpicker:nth-of-type(6) {
		
	clear: left;	
	
}




/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	COURSE PICKER
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/


#HOLE_RESULTS #SETTINGS div .course_picker, #HOLE_RESULTS #SETTINGS div .course_picker_selected, #HOLE_RESULTS #SETTINGS div .course_picker_inactive {
	
	height: 150px;
	width: 100%;

	font-size: 14px;
	line-height: 100%;
	text-align: left;

	padding: 0px;

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

	border-radius: 10px;
	
	background-color: rgba(112,128,144,.2);

	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	
	overflow: hidden;

	cursor: pointer;
	
	opacity: .9;
		
}




#HOLE_RESULTS #SETTINGS div .course_picker_selected {

	opacity: 1;
	
	border: 3px solid rgba(112,128,144,1);
	
	cursor: default;
	
}



#HOLE_RESULTS #SETTINGS div .course_picker_inactive {

	background-color: rgba(112,128,144,.1);

	opacity: .9;

	cursor: default;

}


#HOLE_RESULTS #SETTINGS div .course_picker:hover {

	opacity: 1;

}




#HOLE_RESULTS #SETTINGS div .course_picker h2, #HOLE_RESULTS #SETTINGS div .course_picker_selected h2, #HOLE_RESULTS #SETTINGS div .course_picker_inactive h2 {
	
	position: absolute;
	
	left: 0px;
	
	height: 30px;
	width: 100%;
	
	padding-top: 65px;
	
	z-index: 2;
	
}




#HOLE_RESULTS #SETTINGS div .course_picker_selected h2 {
		
	padding-top: 62px;

}




/* 		DECO STRIPES	 */
#HOLE_RESULTS #SETTINGS div div .deco_stripe {
	
	float: left;
	
	height: 150px;

	margin: 0px;
	margin-top: 50px;
	
	
}

#HOLE_RESULTS #SETTINGS div div .deco_stripe:nth-of-type(1) {

	
	
}



/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	ROUND RESULTS
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/


#HOLE_RESULTS #ROUND_RESULTS {
	
	
	display: block;
	
	padding-bottom: 80px;
	
}


/*	BIG HANDICAP NUMBER	*/
#HOLE_RESULTS #ROUND_RESULTS #HANDICAP, #HOLE_RESULTS #SETTINGS #HANDICAP {

	font-family: "Press start 2P", Helvetica, Arial, sans-serif;
	text-transform: uppercase;
	font-size: 64px;
	font-weight: 600;
	letter-spacing: 0px;
	line-height: 100%;
	color: slategray;

}


/*	TABLE ROWS	*/
#HOLE_RESULTS #ROUND_RESULTS .hole_result {

	width: 100%;
	
	margin: 0px;
	
}





#HOLE_RESULTS #ROUND_RESULTS .hole_result:nth-of-type(2) {

	margin-left: 0px;
	
}


/*	TABLE FIELDS	*/
#HOLE_RESULTS #ROUND_RESULTS .hole_result div {

	float: left;
	
	height: 40px;
	width: 60px;
	
	margin: 0px;
	
	padding-top: 5px;
	padding-right: 10px;
	
	text-align: left;

}


#HOLE_RESULTS #ROUND_RESULTS .hole_result div:nth-of-type(1) {

	width: 40px;

}


#HOLE_RESULTS #ROUND_RESULTS .hole_result div:nth-of-type(2) {

	width: 50px;

}



/*	TABLE HEADER FIELDS	*/
#HOLE_RESULTS #ROUND_RESULTS .hole_result:nth-of-type(1) div {

	font-size: 12px;
	text-transform: uppercase;
	
}


/*	TABLE SUMMARY FIELDS	*/
#HOLE_RESULTS #ROUND_RESULTS .hole_result:nth-last-of-type(1) div {

	font-weight: 600;
	
}



/*	PAR AND STROKE DOTTIES TABLE FIELDS	*/
#HOLE_RESULTS #ROUND_RESULTS .hole_result div:nth-of-type(3), #HOLE_RESULTS #ROUND_RESULTS .hole_result div:nth-of-type(4) {

	width: 70px;
	
	padding-left: 15px;
	
}


#HOLE_RESULTS #ROUND_RESULTS .hole_result div:nth-of-type(4) {

	width: 90px;

	
}

#HOLE_RESULTS #ROUND_RESULTS .hole_result div:nth-of-type(5) {

	width: 50px;

	
}




/*	PAR AND STROKE DOTTIES	*/
#HOLE_RESULTS #ROUND_RESULTS .hole_result div:nth-of-type(3) div, #HOLE_RESULTS #ROUND_RESULTS .hole_result div:nth-of-type(4) div {

	height: 8px;
	width: 8px;
	
	padding: 0px;
	
	margin: 0px;
	margin-right: 1px;
	margin-bottom: 1px;
	
	overflow: hidden;
	
	border-radius: 100%;
	
	border: 1px solid slategray;
	
	background-color: white;
	
}


#HOLE_RESULTS #ROUND_RESULTS .hole_result div:nth-of-type(4) div {

	background-color: slategray;
	
}


#HOLE_RESULTS #ROUND_RESULTS .hole_result div:nth-of-type(3) div:nth-of-type(6), #HOLE_RESULTS #ROUND_RESULTS .hole_result div:nth-of-type(4) div:nth-of-type(6), #HOLE_RESULTS #ROUND_RESULTS .hole_result div:nth-of-type(3) div:nth-of-type(11), #HOLE_RESULTS #ROUND_RESULTS .hole_result div:nth-of-type(4) div:nth-of-type(11) {
	
	
	clear: left;
	
	
}



/*	BADGES	*/
#HOLE_RESULTS #ROUND_RESULTS .hole_result div .bird  {

	position: absolute;
	
	margin-top: -10px;
	margin-left: -5px;
	
	padding: 0px;
	
	background-image: none;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center center;
	
}




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


.schalter {

	position: absolute;
	
	left: 50%;
	bottom: 45px;
	
	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;
	
	}
	
}



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


#HOLE_RESULTS #APP_STORE_BUTTON {

	height: 40px;
	width: 100%;
	
	margin-top: -140px;

	display: none;

}


#HOLE_RESULTS #APP_STORE_BUTTON a {

	border: none;
	
	cursor: pointer;

}

#HOLE_RESULTS #APP_STORE_BUTTON img {

	height: auto;
	width: 50%;

}


@media screen and (orientation:portrait) {
	
	#HOLE_RESULTS #APP_STORE_BUTTON {
	
		
	
	}
	
	#HOLE_RESULTS #APP_STORE_BUTTON img {
	
		

	}
	
}


/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	CLUB
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

#CLUBS {
	
	
	position: absolute;
	
	height: 70px;
	width: 70px;
	
	margin-top: -35px;
	
	top: 50%;
	right: 10px;
	
	border-radius: 100%;
	
/* 	border: 1px solid rgba(255,255,255,.8); */
	
	background-size: 80% auto;
	background-repeat: no-repeat;
	background-position: center top;
	
	background-color: rgba(255,255,255,.2);
	
	cursor: pointer;
	
	z-index: 3;
	
}


@keyframes flip {

    0% { transform: scaleX(1); }

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

@keyframes change_club {

    0% { background-position: center top; }

    50% { background-position: center -70px; }
    
    100% { background-position: center top; }
}





/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	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%);

}







/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	COURSE MINIATURE (IN WELCOME BACK PLACARD)
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

#course_miniature {
	
	height: 100px;
	width: 100%;
	
	margin-top: -20px;
	margin-bottom: 30px;
	
	background-color: lightgreen;
	
	border-radius: 20px;
	
	overflow: hidden;
	
}


#course_miniature .bump, #course_miniature .bump_shadow, #course_miniature .dump, #course_miniature .hole {
	
	position: relative;
	
	height: 1px;
	width: 1px;
	
	border-radius: 100%;
	
	background-image: url(../bilder/bump.png);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center center;
	
}

#course_miniature .bump_shadow {
	
	border-radius: 0%;
	
	background-image: url(../bilder/bump_shadow.png);
	
}


#course_miniature .dump {
	
	background-image: url(../bilder/dump.png);
	
}



#course_miniature .hole {
	
	background-image: url(../bilder/hole.png);
	
}





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


	background-color: white;

	height: 100%;
	width: 100%;

}



#google_analytics_iframe {

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











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


#KLICKFELD {

	position: absolute;

	height: 100%;
	width: 100%;

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

	display: block;
	
	opacity: .5;

	z-index: 3;

}



.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; }

    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; }

}