@charset "UTF-8";






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




* {

	box-sizing: border-box;

}




body {
	
	font-family: Helvetica, HelveticaNeue, Arial, sans-serif;
	color: black;
	
	background-color: black;
	
	margin: 0px;
	

	
}



a {
	color: black;
	background-color: white;	
	text-decoration: none;

}

a:hover {

	

}






/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	KOPFELEMENTE
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

#HEAD {

	background-color: white;
	
	padding: 30px;	/*	REAKTIV	*/
	
	margin-bottom: 30px;
	
	min-height: 600px;
	
}

#DESIGN_THINKING_THINK_TANK_TALK {
	
	font-size: 120px;
	line-height: 97%;
	text-transform: uppercase;
	font-weight: bold;
	
	padding-right: 50px;
	
	margin-bottom: 20px;
	
	cursor: default;
	
}





#NAVIGATION_CONTAINER {	

	padding: 10px;
	padding-top: 40px;
	padding-bottom: 60px;

	
	overflow: auto;
	
}


#SUBTEXT {	

	position: absolute;
	
	top: 50px;
	right: 30px;
	
	width: 80px;
	
	font-size: 12px;
	font-weight: 400;
	line-height: 140%;
	text-align: center;
	
	padding-top: 0px;
	padding-bottom: 0px;

	
	transform: rotate(45deg);
	
	
	
	display: none;

	
}

#SUBTEXT a {	

	background-color: #E6E6E6;

}


#SUBTEXT a:hover {	

	background-color: yellow;

}



/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	AUSWAHL
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/



.TOPIC_LINK, .TOPIC_LINK_active {
	
	float: left;
	
	height: auto;
	width: 300px;/*RM*/
	
	
	font-size: 24px;
	font-weight: bold;
	color: black;
	
	padding-top: 15px;
	padding-right: 20px;
	padding-bottom: 20px;
	padding-left: 20px;
	
	margin-bottom: 10px;
	margin-right: 10px;
	
	background-color: #E6E6E6;
	
	cursor: default;

}


.TOPIC_LINK {
	
	border-radius: 0px;
	
}


.TOPIC_LINK:hover, .TOPIC_LINK_active:hover {
	
	background-color: yellow;
	
	color: black;
	
}




.TOPIC_LINK_active {
	
	color: white;
	background-color: black;	
	
}



.untertitel {

	font-weight: 200;
	font-size: 16px; 
	line-height: 130%;
	
	margin-top: 10px;
	

}



input[type=button] {
		
	-webkit-appearance: none;
	
	clear: left;
	
	height: auto;
	width: 100%;
	
	padding: 8px;
	
	margin-top: 10px;
	margin-bottom: 0px;
	
	background-color: transparent;
	
	background-size: auto 50%;
	background-repeat: no-repeat;
	background-position: right center;
	
    border: 1px dotted black;
    border-radius: 5px; 
    
    font-family: Helvetica, Arial, 'Sans serif';
    text-transform: uppercase;
    font-size: 14px;
    font-weight: 400;
    color: transparent;
    color: black;
    
    cursor: pointer;
    
    opacity: .9;
	
}


.TOPIC_LINK_active input[type=button] {
			
    border: 1px solid white;

    color: white;
	
}


input[type=button]:nth-of-type(1) {
	
	margin-top: 20px;	
	
}


.TOPIC_LINK:hover input[type=button], .TOPIC_LINK_active:hover input[type=button] {
	
	background-color: black;
	
	border: 1px solid black;
	
	color: white;
	
	opacity: 1;
	
}


.TOPIC_LINK:hover input[type=button]:hover {
	

/* 	font-weight: 600; */

	opacity: 1;
	
}


.TOPIC_LINK:hover .slides_button:hover, .TOPIC_LINK_active:hover .slides_button:hover  {
	
	background-image: url(../images/down.png);
	
}


.TOPIC_LINK:hover .article_button:hover, .TOPIC_LINK_active:hover .article_button:hover {
	
	background-image: url(../images/open.png);
	
}


.TOPIC_LINK:hover .video_button:hover, .TOPIC_LINK_active:hover .video_button:hover {
	
	background-image: url(../images/down.png);
	
}











/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	SCHAUFLÄCHE
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

#SLIDES {
	
	
	
}


#SCREEN {
	
	background-color: black;
	
	width: 100%;
	
	margin-left: -40px;
	margin-top: 50px;
	
	padding-top: 600px;
	padding-left: 40px;
	padding-bottom: 1000px;
	
	display: none;

}


#SLIDES, .SLIDE {
	
	background-color: white;
	
	height: 640px;
	width: 1024px;
	
	overflow: hidden;
	
}


.SLIDE {
	
	background-color: #E6E6E6;

	position: absolute;
	
	visibility: hidden;
	
	
	
	background-position: top center;
	background-size: contain;
	background-repeat: no-repeat;
	
}


#WARTEFOLIE {
	
	background-position: center center; 
	z-index: 1000; 
	visibility: hidden;
	
	background-image: url(../images/lade.svg);
	background-position: center center;
	background-size: inherit;
	
	
}



iframe {
	
	height: 90%;
	width: 100%;
	
}





/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	SCHAUSTEUERUNG
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/


#UP, #BACK, #NEXT {
	
	background-color: #666;
	padding-top: 13px;
	padding-bottom: 13px;
	font-size: 14px;
	text-transform: uppercase;
	font-weight: normal;
	
	background-size: auto 40%;
	background-repeat: no-repeat;
	background-position: right center;
	
}


#UP:hover, #BACK:hover, #NEXT:hover {
	
	color: black;
	background-color: yellow;
	
}
	
	
#UP {
	
	position: absolute;
	
	width: 50%;
	
	z-index: 0;
	left: 0px;

}

#UP:hover {
	
	background-image: url(../images/up.png);
	
	
}


a #UP, #UP a {
	
	float: none;
	
	margin-top: 0px;
	padding-left: 30px;
	
}


#BACK, #NEXT {
	
	position: absolute;
	
	width: 512px;
	
	float: left;
	margin-top: 728px;
	
	z-index: 1000;
}


#BACK {

	width: 511px;
	
	margin-right: 1px;

}


#NEXT {
	
 	margin-left: 512px;
 	
 	background-position: right center;
 	
}




#BACK:hover {

/* 	background-image: url(../images/back.png); */

}


#NEXT:hover {
	
/*  	background-image: url(../images/next.png); */
 	
}





a #BACK, #BACK a {

	visibility: hidden;
}




/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	TWITTER + MEDIUM
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/


#TWITTER_MEDIUM {
	
	position: absolute;
	
	width: 100px;
	
	top: 30px;
	right: 10px;
	
}

#TWITTER_MEDIUM div {
	
	float: left;
	
}

#twitter, #medium {
	
	height: 30px;
	width: 30px;
	
	background-position: center center;
	background-size: contain;
	background-repeat: no-repeat;
	
	margin-bottom: 10px;
	margin-left: 10px;
	
	opacity: .5;
	
}

#twitter:hover, #medium:hover {
	

	
	opacity: 1;
	
}

#twitter {
	
	
	background-image: url(../images/twitter.png);
	
	
}


#medium {
	
	background-image: url(../images/medium.png);
	
}




@media (max-width: 900px) {

	#TWITTER_MEDIUM {
	
		width: 50px;
		
	}
		
}