@charset "utf-8";
/* CSS Document */


/*********************************************************** SMARTPHONES PORTRAIT */
@media only screen and (min-width : 320px) and (max-width : 479px) {
	
	header h1{font-size:16pt !important;}
	h1{	}
	h2{ 	margin-left:0 !important; width:80% !important; margin-left:auto !important; margin-right:auto !important; float:none !important; }
	h3{ 	margin-left:0 !important; width:80% !important; margin-left:auto !important; margin-right:auto !important; }
	h4{ 	margin-left:0 !important; width:80% !important; margin-left:auto !important; margin-right:auto !important; }

	
	header{}
	
	nav{} nav #arrow_back{} /*nav #arrow_back{position:fixed; bottom:4px; right:0px;}*/
	
	#logo{ margin-top:40px !important;}
	
	
	p{ 	width:80% !important; margin-left:auto !important; margin-right:auto !important; float:none !important; display:block !important;}
	a{ 	width:80% !important; margin-left:auto !important; margin-right:auto !important; }
	
	ul{width:100% !important; margin-left:auto !important; margin-right:auto !important; text-align:left; float:none !important; }
	li{margin-left:0 !important; margin-right:0 !important;}
	
	input{ float:none !important; margin-left:0 !important; display:inline-block !important; width:80% !important;}
	textarea{ float:none !important; margin-left:0 !important; display:inline-block !important; width:80% !important;}
	input[type=image]{width:120px !important; margin-left:0 !important;}
	
	.content_l, .content_r, .content_f, .sidebar_l, .sidebar_r,  .overlay_l, .overlay_r{
		float:none !important; 
		width:100% !important;
		text-align:center !important;
		left:0 !important;
		width:100% !important;
		min-height:inherit !important;
		padding-bottom:40px !important;
	}
	
	.sidebar_r, .sidebar_l{min-height:320px !important;}
	.sidebar_r img, .sidebar_l img{background-position:center -40px;}
	.content_f{ padding:0 !important;}
	.overlay_l, .overlay_r{ position:relative !important; display:inline-block !important;}
	
	#methoden_list{text-align:center;}
	
	
	.first_layer{display:none !important;} .second_layer{display:block !important;}

	
	.column { width:100% !important; float:none !important; padding:0 !important; margin:0 !important; padding-bottom:40px !important;} .column p span{display:none;}
	
	.thumb{ margin-top:48px; width:128px !important; margin-left:10% !important;}
	.ill{float:none !important;}

	#alanhansen .content_l div {width:100% !important; margin:0 !important; float:none !important; display:block !important}
	#referenzen .content_f a{ position:static !important; margin-left:0 !important; margin-right:0 !important; margin-top:0 !important;}

	#opaque{margin:0 !important; width:100% !important;}
	#opaque img{bottom:10px !important;  right:12px !important;}
	
	#window h1{font-size:12pt !important;}
	#window {overflow:auto !important; min-height:auto !important;}
	.window_sidebar{float:none !important; width:100% !important; min-height:80px !important;}
	.window_content{float:none !important; width:100% !important;}
	
	nav ul{display:none !important;}
	.mob_nav{display:block !important;}
	
	.illustration{width:80% !important; position:relative !important; float:none !important; margin-top:0 !important; text-align:center;}
	.ill{width:100% !important;}
	
	.biblio{height:auto !important;}
	.biblio p{float:none !important; clear:both !important; height:auto !important;}
	.biblio img{float:none !important; display:none !important; }
	
	
	
	.content_c{position:static !important; left:0 !important; margin:0 !important; width:80% !important; margin-left:10% !important;}
	.column{float:none !important; height:120px !important;}
	
	#netzwerk .sidebar_l{height:760px !important;}
		
	.first_layer{display:none !important;} .second_layer{display:block !important;}
}

/*********************************************************** SMARTPHONES LANDSCAPE*/ 
@media only screen and (min-width : 480px) and (max-width : 599px) {
/*	header h1{font-size:16pt !important; margin-bottom:20px !important;}
	h1{	 font-size:32pt !important;}
	h2{ 	margin-left:0 !important; width:80% !important; margin-left:auto !important; margin-right:auto !important; }
	h3{ 	margin-left:0 !important; width:80% !important; margin-left:auto !important; margin-right:auto !important; }
	h4{ 	margin-left:0 !important; width:80% !important; margin-left:auto !important; margin-right:auto !important; }
	
	header{padding-top:40px;}
	
	nav{display:none; } nav #arrow_back{display:none;} /*nav #arrow_back{position:fixed; bottom:4px; right:0px;}
	
	#logo{margin-bottom:20px !important;}
	
	p{ 	width:80% !important; margin-left:auto !important; margin-right:auto !important; }
	a{ 	width:80% !important; margin-left:auto !important; margin-right:auto !important; }
	
	ul{width:80% !important; margin-left:auto !important; margin-right:auto !important; text-align:left; }
	
	input{ float:none !important; margin-left:0 !important; display:inline-block !important; width:80% !important;}
	textarea{ float:none !important; margin-left:0 !important; display:inline-block !important; width:80% !important;}
	input[type=image]{width:120px !important; margin-left:0 !important;}
	
	.content_l, .content_r, .content_f, .sidebar_l, .sidebar_r,  .overlay_l, .overlay_r{
		float:none !important; 
		width:100% !important;
		text-align:center !important;
		left:0 !important;
		width:100% !important;
		min-height:inherit !important;
		padding-bottom:40px !important;
	}
	
	.sidebar_r, .sidebar_l{min-height:75px !important;}
	.sidebar_r img, .sidebar_l img{background-position:center -60px;}
	
	.content_f{ padding:0 !important;}
	.overlay_l, .overlay_r{ position:relative !important; display:inline-block !important;}
	
	
	
	.first_layer{display:none !important;} .second_layer{display:block !important;}

	
	.column { width:100% !important; float:none !important; padding:0 !important; margin:0 !important; padding-bottom:40px !important;} .column p span{display:none;}
	
	

	#alanhansen .content_l div {width:100% !important; margin:0 !important; float:none !important; display:block !important}
	#referenzen .content_f a{ position:static !important; margin-left:0 !important; margin-right:0 !important; margin-top:0 !important;}
*/
	#opaque{margin:0 !important; width:100% !important;}
	#opaque img{bottom:10px !important;  right:12px !important;}
	
	#window h1{font-size:12pt !important;}
	#window {overflow:auto !important; min-height:auto !important;}
	.window_sidebar{float:none !important; width:100% !important; min-height:80px !important;}
	.window_content{float:none !important; width:100% !important;}

	nav ul{display:none !important;}
	.mob_nav{display:block !important;}
	
	
		
	.first_layer{display:block !important;} .second_layer{display:none !important;}

		
}

/*********************************************************** SMALL TABLETS PORTRAIT */
@media only screen and (min-width : 600px) and (max-width : 767px) {
	header h1{font-size:16pt !important;}
	h1{	}
	h2{ 	margin-left:0 !important; width:80% !important; margin-left:auto !important; margin-right:auto !important; float:none !important; }
	h3{ 	margin-left:0 !important; width:80% !important; margin-left:auto !important; margin-right:auto !important; }
	h4{ 	margin-left:0 !important; width:80% !important; margin-left:auto !important; margin-right:auto !important; }

	
	header{}
	
	nav{} nav #arrow_back{} /*nav #arrow_back{position:fixed; bottom:4px; right:0px;}*/
	
	#logo{ margin-top:40px !important;}
	
	
	p{ 	width:80% !important; margin-left:auto !important; margin-right:auto !important; float:none !important; display:block !important;}
	a{ 	width:80% !important; margin-left:auto !important; margin-right:auto !important; }
	
	ul{width:100% !important; margin-left:auto !important; margin-right:auto !important; text-align:left; float:none !important; }
	li{margin-left:0 !important; margin-right:0 !important;}
	
	input{ float:none !important; margin-left:0 !important; display:inline-block !important; width:80% !important;}
	textarea{ float:none !important; margin-left:0 !important; display:inline-block !important; width:80% !important;}
	input[type=image]{width:120px !important; margin-left:0 !important;}
	
	.content_l, .content_r, .content_f, .sidebar_l, .sidebar_r,  .overlay_l, .overlay_r{
		float:none !important; 
		width:100% !important;
		text-align:center !important;
		left:0 !important;
		width:100% !important;
		min-height:inherit !important;
		padding-bottom:40px !important;
	}
	
	.sidebar_r, .sidebar_l{min-height:320px !important;}
	.sidebar_r img, .sidebar_l img{background-position:center -40px;}
	.content_f{ padding:0 !important;}
	.overlay_l, .overlay_r{ position:relative !important; display:inline-block !important;}
	
	#methoden_list{text-align:center;}
	
	
	.first_layer{display:none !important;} .second_layer{display:block !important;}

	
	.column { width:100% !important; float:none !important; padding:0 !important; margin:0 !important; padding-bottom:40px !important;} .column p span{display:none;}
	
	.thumb{ margin-top:48px; width:128px !important; margin-left:10% !important;}
	.ill{float:none !important;}

	#alanhansen .content_l div {width:100% !important; margin:0 !important; float:none !important; display:block !important}
	#referenzen .content_f a{ position:static !important; margin-left:0 !important; margin-right:0 !important; margin-top:0 !important;}

	#opaque{margin:0 !important; width:100% !important;}
	#opaque img{bottom:10px !important;  right:12px !important;}
	
	#window h1{font-size:12pt !important;}
	#window {overflow:auto !important; min-height:auto !important;}
	.window_sidebar{float:none !important; width:100% !important; min-height:80px !important;}
	.window_content{float:none !important; width:100% !important;}
	
	nav ul{display:none !important;}
	.mob_nav{display:block !important;}
	
	.illustration{width:80% !important; position:relative !important; float:none !important; margin-top:0 !important; text-align:center;}
	.ill{width:100% !important;}
	
	.biblio{height:auto !important;}
	.biblio p{float:none !important; clear:both !important; height:auto !important;}
	.biblio img{float:none !important; display:none !important; }
	
	
	
	.content_c{position:static !important; left:0 !important; margin:0 !important; width:80% !important; margin-left:10% !important;}
	.column{float:none !important; height:120px !important;}
	
	#netzwerk .sidebar_l{height:760px !important;}
		
	.first_layer{display:none !important;} .second_layer{display:block !important;}

}
	
/*********************************************************** TABLETS PORTRAIT & SMALL TABLETS LANDSCAPE */
@media only screen and (min-width : 768px) and (max-width : 1023px) {
/*	header h1{font-size:20pt !important;}
	h1{	}
	h2{ 	margin-left:0 !important; width:80% !important; margin-left:auto !important; margin-right:auto !important; }
	h3{ 	margin-left:0 !important; width:80% !important; margin-left:auto !important; margin-right:auto !important; }
	h4{ 	margin-left:0 !important; width:80% !important; margin-left:auto !important; margin-right:auto !important; }

	
	#idee .sidebar_l{display:none !important;}
	
	header{}
	
	nav{} nav #arrow_back{} /*nav #arrow_back{position:fixed; bottom:4px; right:0px;}
	
	#logo{ margin-top:120px !important;}
	
	
	p{ 	width:80% !important; margin-left:auto !important; margin-right:auto !important; }
	a{ 	width:80% !important; margin-left:auto !important; margin-right:auto !important; }
	
	ul{width:80% !important; margin-left:auto !important; margin-right:auto !important; text-align:left; }
	
	input{ float:none !important; margin-left:0 !important; display:inline-block !important; width:80% !important;}
	textarea{ float:none !important; margin-left:0 !important; display:inline-block !important; width:80% !important;}
	input[type=image]{width:120px !important; margin-left:0 !important;}
	
	.content_l, .content_r, .content_f, .sidebar_l, .sidebar_r,  .overlay_l, .overlay_r{
		float:none !important; 
		width:100% !important;
		text-align:center !important;
		left:0 !important;
		width:100% !important;
		min-height:inherit !important;
		padding-bottom:40px !important;
	}
	
	.sidebar_r, .sidebar_l{min-height:320px !important;}
		.sidebar_r img, .sidebar_l img{background-position:center -20px;}
	.content_f{ padding:0 !important;}
	.overlay_l, .overlay_r{ position:relative !important; display:inline-block !important;}
	
	
	
	.first_layer{display:none !important;} .second_layer{display:block !important;}

	
	.column { width:100% !important; float:none !important; padding:0 !important; margin:0 !important; padding-bottom:40px !important;} .column p span{display:none;}


	#alanhansen .content_l div {width:100% !important; margin:0 !important; float:none !important; display:block !important}
	#referenzen .content_f a{ position:static !important; margin-left:0 !important; margin-right:0 !important; margin-top:0 !important;}
*/

	#opaque{margin:0 !important; width:100% !important;}
	#opaque img{bottom:10px !important;  right:12px !important;}
	
	#window h1{font-size:12pt !important;}
	#window {overflow:auto !important; min-height:auto !important;}
	.window_sidebar{float:none !important; width:100% !important; min-height:80px !important;}
	.window_content{float:none !important; width:100% !important;}
	
		
	.first_layer{display:block !important;} .second_layer{display:none !important;}

	
	nav ul{display:none !important;}
	.mob_nav{display:block !important;}
}

/*********************************************************** TABLETS LANDSCAPE */
@media only screen and (min-width : 1024px) and (max-width : 1224px) {
	header h1{font-size:24pt !important;}
	#logo{ margin-top:60px !important;}
	
	.border_link p{ font-size:11pt !important;}
	.border li{font-size:10pt !important;}
	.sidebar_l p, .sidebar_r p{ font-size:10pt !important;}
	.column p span{display:none;}
	
	nav ul{display:none !important;}
	.mob_nav{display:block !important;}
	
	
		
	.first_layer{display:block !important;} .second_layer{display:none !important;}

}

/*********************************************************** DESKTOPS & LAPTOPS */
@media only screen and (min-width : 1224px) {
	
	p, nav a{font-size:10pt !important;}
		
	.first_layer{display:block !important;} .second_layer{display:none !important;}

	
}

/*********************************************************** TV & BEAMER */
@media only screen and (min-width : 1824px) {
	header{margin-top:150px !important;}
	p{font-size:11pt !important;}
	
		
	.first_layer{display:block !important;} .second_layer{display:none !important;}

}