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

html {

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








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



* {

	box-sizing: border-box;
	
}


body {

	height: 100%;
	width: 100%;

	padding: 0px;
	margin: 0px;
	
	overflow: hidden;
	
	font-family: 'Roboto', Helvetica, Arial, sans-serif;
	font-size: 14px;
	color: gray;
	
	background-color: white;
	
	-webkit-tap-highlight-color: rgba(0,0,0,0);	/*	KILLS THE OBJECT HIGHLIGHT ON TAP	*/
}




/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	OBJECTS
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

#CANVAS {
	
	position: fixed;
	
	top: 0px;
	left: 0px;
	
	height: 100vh;
	width: 100vw;
	
	overflow: hidden;	
	
	background-color: white;
}


.segment {
	
	position: absolute;
	
	height: 1px;
	width: 1px;

	background: gray;	
}




#CANVAS div {
	
	background: black;	
}



#CANVAS div:nth-child(n+100) {
	
	background: #000000e6;	
}

#CANVAS div:nth-child(n+500) {
	
	background: #000000cc;	
}

#CANVAS div:nth-child(n+1000) {
	
	background: #000000b3;	
}

#CANVAS div:nth-child(n+1500) {
	
	background: #00000099;	
}

#CANVAS div:nth-child(n+2000) {
	
	background: #00000080;	
}

#CANVAS div:nth-child(n+2500) {
	
	background: #00000073;	
}

#CANVAS div:nth-child(n+3000) {
	
	background: #00000066;	
}

#CANVAS div:nth-child(n+3500) {
	
	background: #00000059;	
}

#CANVAS div:nth-child(n+4000) {
	
	background: #0000004d;	
}

#CANVAS div:nth-child(n+4500) {
	
	background: #00000040;	
}

#CANVAS div:nth-child(n+5000) {
	
	background: #00000033;	
}

#CANVAS div:nth-child(n+5500) {
	
	background: #00000026;	
}

#CANVAS div:nth-child(n+6000) {
	
	background: #00000024;	
}

#CANVAS div:nth-child(n+6500) {
	
	background: #00000021;	
}

#CANVAS div:nth-child(n+7000) {
	
	background: #0000001f;	
}

#CANVAS div:nth-child(n+7500) {
	
	background: #0000001c;	
}

#CANVAS div:nth-child(n+8000) {
	
	background: #0000001a;	
}



/*

#CANVAS div:nth-child(n+100) {
	
	background: rgba(0,0,0,.9);	
}

#CANVAS div:nth-child(n+500) {
	
	background: rgba(0,0,0,.8);	
}

#CANVAS div:nth-child(n+1000) {
	
	background: rgba(0,0,0,.7);	
}

#CANVAS div:nth-child(n+1500) {
	
	background: rgba(0,0,0,.6);	
}

#CANVAS div:nth-child(n+2000) {
	
	background: rgba(0,0,0,.5);	
}

#CANVAS div:nth-child(n+2500) {
	
	background: rgba(0,0,0,.45);	
}

#CANVAS div:nth-child(n+3000) {
	
	background: rgba(0,0,0,.4);	
}

#CANVAS div:nth-child(n+3500) {
	
	background: rgba(0,0,0,.35);	
}

#CANVAS div:nth-child(n+4000) {
	
	background: rgba(0,0,0,.3);	
}

#CANVAS div:nth-child(n+4500) {
	
	background: rgba(0,0,0,.25);	
}

#CANVAS div:nth-child(n+5000) {
	
	background: rgba(0,0,0,.2);	
}

#CANVAS div:nth-child(n+5500) {
	
	background: rgba(0,0,0,.15);	
}

#CANVAS div:nth-child(n+6000) {
	
	background: rgba(0,0,0,.14);	
}

#CANVAS div:nth-child(n+6500) {
	
	background: rgba(0,0,0,.13);	
}

#CANVAS div:nth-child(n+7000) {
	
	background: rgba(0,0,0,.12);	
}

#CANVAS div:nth-child(n+7500) {
	
	background: rgba(0,0,0,.11);	
}

#CANVAS div:nth-child(n+8000) {
	
	background: rgba(0,0,0,.1);	
}
*/


#counter {
	
	position: static;
	
	bottom: 10px;
	right: 10px;
	
	text-align: center;
	
	font-size: 14px;
	font-weight: 200;
	color: silver;
}






/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	HAMBURGER AND PROFILE SWITCHES
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/


#HAMBURGER {

	position: fixed;

	bottom: 10px;
	right: 10px;

	height: auto;
	width: auto;
	
	padding: 5px;
	
	background-color: black;

	border-radius: 5px;
	
	border: 1px solid white;
	
	opacity: .8;

	cursor: pointer;

	z-index: 98;
}


#MENU #HAMBURGER_X {


	right: 0px;

	margin-left: 0px;
}




#MENU #HAMBURGER_X {

	position: absolute;

	top: 0px;
	left: 0px;

	opacity: 1;

	display: none;

}




#HAMBURGER div {

	width: 100%;
	height: 50%;
	
	padding: 0px;
	padding-left: 5px;
	padding-right: 5px;
	
	border: none;
	
	color: white;
	text-align: center;
	
	opacity: 1;
		
}

#HAMBURGER #bar {

	float: right;
	
	
	
	width: 100%;
	height: 1px;
	
	border: 1px solid white;
	
	opacity: 1;
	
	padding: 0px;

}


#HAMBURGER:hover {


	opacity: 1;

}



/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	MENU
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/


#MENU {

	position: fixed;

	height: 100%;
	width: auto;
	max-width: 300px;

	font-size: 16px;
	font-weight: 400;
	color: rgba(0,0,0,.5);
	line-height: 140%;

	padding: 20px;

	top: 0px;
	right: -300px;

	background-color: rgba(255,255,255,.99);

	z-index: 10000;

	overflow-y: scroll;

	border-right: 1px solid rgba(0,0,0,.1);

	display: none;
	
	user-select: none;
}


#MENU div {

	width: auto;


	max-width: 200px;

	padding: 20px;
	padding-top: 5px;
	padding-bottom: 5px;

	clear: left;

	font-family: Helvetiva, sans-serif;
	font-size: 24px;
	font-weight: 400;
	color: black;
	line-height: 140%;
	text-align: center;

	cursor: pointer;

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

	background-repeat: no-repeat;
	background-position: 15px center;
	background-size: 30px auto;
	
	border-radius: 5px;

	
}



#MENU div img {
	
	height: 60px;
}


#MENU a {

	color: black;
	text-decoration: none;
	
}

#MENU a:hover {

	
}


#MENU h1 {

	cursor: default;
	
	margin-top: 10px;
	margin-bottom: 15px;
	
	display: block;
	
	font-family: Helvetica, Arial, sans-serif;
	text-align: center;
	font-weight: 200;
	font-size: 42px;
	color: rgba(0,0,0,.8);
}


#MENU span {

	cursor: default;
	
	margin-top: 50px;
	margin-bottom: 15px;
	
	display: block;
	
	text-align: center;
	font-weight: 400;
}


#MENU .section_title {
	
	text-transform: uppercase;
}


#MENU div:hover {

	background-color: rgba(0,0,0,1);
	color: white;

}



#MENU div:active, #MENU .selected {

	background-color: rgba(0,0,0,.8);
	color: white;

}



@keyframes menu_reinschieben {

    0% { right: -350px }

    100% { right: 0px; }
}


@keyframes menu_rausschieben {

    0% { right: 0px }

    100% { right: -350px; }
}



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

#MENUABDUNKLER {

	position: fixed;

	top: 0px;
	left: 0px;

	width: 100%;
	height: 100%;

	background-color: rgba(0,0,0,.1);

	display: none;

	z-index: 99;
}