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

html, body {
	width:100%;
	height:100%;
	position:relative;
	
	padding:0;
	margin:0;
	
	font-family:'lato',sans-serif; 
	font-style:normal;
	font-size:93.75%;
	color:rgba(0,0,0,0.6);
}
html{
	/*	force scrollbars  */
	overflow-y:scroll;  
}


	h1, h2, h3, h4, h5, h6, p, td, ul, li, figure {
		margin:0;
		padding:0;
		font-weight:normal;
	}

	a { text-decoration:none; }
/*
	a:link, a:visited { color:rgba(0,0,0,0.65);}
	a:hover, a:active { color:rgba(255,204,0,1);}
*/
	strong{
		font-family:"latomedium",sans-serif;
		font-style:normal;
	}

	.yellow { color:rgba(255,204,0,1); }





/*	-------------------------------------------------------  header  */

#zbmdl_hdrWrp{
	width:250px;
	height:100%;
	position:fixed;
	top:0;
	left:0;
	z-index:100;
	
	background:rgba(84,83,82,1);
}
	#zbmdl_hdr{
		width:100%;
	
		display:flex;
		flex-direction:column;
		align-content:center;
		flex-wrap: wrap;
	}
		#zbmdl_hdrLg{
			width:75%;
			height:auto;
			margin:20px auto 0 auto;
		}
			#zbmdl_hdrLg img{
				width:100%;
				height:auto;
				margin:0 0 50px 0;
			}

		.zbmdl_menuElem{
			width:100%;
			display:flex;
			flex-direction:column;
			align-content:center;
			flex-wrap:wrap;
			margin:0 0 25px 0;
			
			font-size:1.5rem;
			font-family:'latothin','sans-serif';
			color:rgba(255,255,255,0.6);
			text-align:center;
			
			transition:color 0.5s;
		}
			.zbmdl_menuElem:link, .zbmdl_menuElem:visited{ color:rgba(255,255,255,0.6); }
			.zbmdl_menuElem:hover, .zbmdl_menuElem:active{ color:rgba(255,204,0,1); }
			
			.zbmdl_menuElem svg{
				display:block;
				width:20%;
				margin:0 40% 10px 40%;
			}

		#zbmdl_menuDBottom{
			width:100%;
			position:absolute;
			bottom:15px;
			
			text-align:center;
		}

			.zbmdl_bottomElem{
				display:block;
				width:100%;
				padding:0 0 5px 0;
				
				font-size:1rem;
				font-family:'latolight','sans-serif';
				text-align:center;
				transition:color 0.5s;
			}

			.zbmdl_bottomElem:link, .zbmdl_bottomElem:visited{ color:rgba(255,255,255,0.6); }
			.zbmdl_bottomElem:hover, .zbmdl_bottomElem:active{ color:rgba(255,204,0,1); }




	#zbmdl_theDartAlley{
		position:fixed;
		width:15px;
		height:100%;
		top:0;
		left:250px;

		overflow:hidden;

		/*background:rgba(255,255,0,1);*/
	}

		#theDart, #theLightDart{
			position:absolute;
			width:50px;
			height:50px;

			top:-50px;
			left:-47px;
			transform:rotate(45deg);

			transition:top 0.5s;
		}	

		#theDart{
			background:rgba(84,83,82,1);
		}

		#theLightDart{
			background:rgba(255,204,0,0.6);
		}	



/*	-------------------------------------------------------  mobile nav  */		

#zbmdl_menuM{
	display:none;
}

#zbmdl_menuMButton{
	display:none;
}

#zbmdl_menuMUnderlayWrp{
	display:none;
	z-index:75;
}




/*	-------------------------------------------------------  content  */

#zbmdl_cntWrp{
	width:100%;
	height:auto;
	position: relative;
	padding:190px 0 100px 0;
	z-index:50;
	
/*	background:rgba(0,0,0,0.1);  */
	
	transition: padding 0.5s;
}

	#zbmdl_cnt{
		width:calc(90% - 270px);
		height: auto;
		max-width:calc(1280px - 270px);
		position: relative;
		margin:0 auto;
		padding:0 5% 0 calc(5% + 270px);
		box-sizing:content-box;
	}

		#zbmdl_cnt img { width:100%; height:auto; }


		h1, h2, h3, h4, p, li, td {
			width: 100%;
			text-align: left;
			font-family:'latolight',sans-serif;
			font-weight: normal;
		}

		h1{
			font-size: 2.4rem;
			color:rgba(0,0,0,0.7);
			margin:0 0 0 0;
			padding:0 0 20px 0;
		}

		h2{
			width:100%;
			margin:0;
			padding:0 0 0.8rem 0;

			font-size: 2rem;
			color:rgba(0,0,0,0.7);
		}

			p + h2, table + h2, ul + h2 {
				margin-top:25px;
			}

			div + h2 {
				margin-top:75px;
			}

		h3, h4, h5, h6{
			width:100%;
			margin:0;
			padding:0 0 0.8rem 0;

			font-size: 1.5rem;
			color:rgba(0,0,0,0.7);
		}

		p, td, ul, ol{
			width:100%;
			margin:0;
			padding:0 0 1rem 0;

			font-size: 1.25rem;
		}
			p a{ font-family:'latoregular',Arial,sans-serif; }
			p a:link, p a:visited { color:rgba(0,0,0,1); }
			p a:hover, p a:active { color:rgba(250,180,0,1); }
		
		li{
			width:calc(100% - 30px);
			margin:0 0 0 30px;
			padding:0 0 0.5rem 0;
		}
		
		table{
			padding:0 0 1rem 0;	
		}
			td{
				width:auto;
				padding:0 15px 0 0;

				font-size: 1.25rem;
			}

		.zbmdl_2cols{
			position:relative;
			width:47%;
		}
			#zbmdl_2colsL{ float:left; }
			#zbmdl_2colsR{ float:right; }

			.zbmdl_2cols p{
				/*text-align: justify;*/
			}
	
			.zbmdl_clrf { clear:both; }

		

	/*	------------------------------------- content special: start  */
	#zbmdl_cntStart{
		width:100%;
		height: auto;
		position: relative;
		padding:0;
		box-sizing:content-box;
		
		/*
		background:url("../../media/images/temp_zbmdl_structure.jpg") no-repeat center center rgba(0,0,0,0.1);
		background-size:cover;
		*/
	}
		.zbmdl_cntStartA{
			width:calc(90% - 270px);
			height: auto;
			max-width:calc(1520px - 270px);
			position: relative;
			margin:0 auto;
			padding:0 5% 0 calc(5% + 270px);
			box-sizing:content-box;



		}
		#zbmdl_cntStart img{
			width:100%;	
		}




	/*	------------------------------------- content special: projects  */
	.zbmdl_prjDescr{
		width:100%;
		height:auto;
		position:relative;
		box-sizing:border-box;
		padding:20px 10px;
		
	/*	background:rgba(0,0,100,0.07);  */
	}
		.zbmdl_prjDescr h3{
			font-family:'latoregular',Arial,sans-serif;
			padding-bottom:0.2rem;
		}

		.zbmdl_prjCustLogo{
			width:80px;
			height:auto;

			position:absolute;
			top:20px;
			left:20px;
		}

		.withLogo{
			padding-left:120px;
		}



/*	-------------------------------------------------------  footer  */

#zbmdl_ftrWrp{
	display:none;
	width:100%;
	height:32px;
	position:fixed;
	padding-top:6px;
	z-index:101;
	bottom:0;
	
	background:rgba(255,255,255,1);
	/*box-shadow:0 3px 10px 5px rgba(0,0,0,0.2);*/
	border-top:1px solid rgba(0,0,0,0.07);
}
	
	#zbmdl_ftr{
		width:100%;
		max-width:1280px;
		box-sizing:border-box;
		position: relative;
		margin:0 auto;
		padding:0 5% 0 6.5%;
		
		display:flex;
		justify-content:space-between; 
}
		#zbmdl_ftrL, #zbmdl_ftrR{
			width:auto;
			display:flex;
			flex-flow:row;
			flex-wrap:nowrap;
			
			color:rgba(0,0,0,0.4);
		}
		#zbmdl_ftrL{
			justify-content:flex-start;
		}
		#zbmdl_ftrR{
			justify-content:flex-end;
		}
			#zbmdl_ftrL li, #zbmdl_ftrR li{
				width:auto;
				display:inline-block;
				list-style:none;
				padding:0 20px 0 0;
				margin:0;
				
				font-size: 1rem;
			}

				#zbmdl_ftrIcon{
					width:30px;
					height:30px;
					padding:3px 5px 0 0;
					margin-right: -15px;
				}

				#zbmdl_ftrIcon img{
					width:100%;
					height:auto;
					opacity:0.7;
				}

				#zbmdl_ftrL1 { display:none !important; }
		
			#zbmdl_ftrR li:last-of-type{
				padding-right:0;
			}
				#zbmdl_ftrR li a:link, #zbmdl_ftrR li a:visited { color:rgba(0,0,0,0.4); }
				#zbmdl_ftrR li a:hover, #zbmdl_ftrR li a:active { color:rgba(255,204,0,1); }


.bhrng_imprint{
	width:auto;
	position:relative;
	padding:0 0 9px 75px;
}		
	.bhrng_imprint img { 
		position:absolute;
		top:4px;
		left:0;
	}
	
	.bhrng_imprint a:hover, .bhrng_imprint a:active { color:rgba(255,125,0,1); }








/*	MEDIA QUERIES ---------------------------------------------------------------------- */
		
@media only screen and (max-width:900px),(max-height:760px){
	#zbmdl_hdrWrp{
		width:100%;
		height:auto;
		position:fixed;
		top:0;
		left:0;
		z-index:100;

		background:rgba(255,255,255,1);
		border-bottom:1px solid rgba(0,0,0,0.1);
	}
		#zbmdl_hdr{
			width:100%;

			display:flex;
			flex-direction:row;
			justify-content:flex-start;
			flex-wrap:nowrap;
		}
			#zbmdl_hdrLg{
				width:75%;
				height:auto;
				margin:20px auto 0 auto;
			}
				#zbmdl_hdrLg img{
					width:100%;
					height:auto;
					margin:0 0 50px 0;
				}

		#zbmdl_menuD{
			display:none;
		}
		#zbmdl_menuM{
			display:flex;
			flex-direction:row;
			flex-wrap:nowrap;
			justify-content:space-between;
			
			box-sizing:border-box; 
			width:100%;
			max-width:1280px;
			padding:25px 5% 10px 6.5%;
			margin:0 auto;
			 
		}
			#zbmdl_logoM1{
				width:500px;
				margin-left:-3px;
				
			/*	background:rgba(230,230,50,0.5);  */
			}

			#zbmdl_menuMButton{
				display:block;
				width:30px;
				
				cursor:pointer;
				
			/*	background:rgba(230,230,50,0.5);  */
			}
			
			#zbmdl_logoM1 img, #zbmdl_menuMButton img c{ width:100%;}
	
	
		
	
		#zbmdl_menuMUnderlayWrp{
			display:block;
			width:100%;
			position:fixed;
			top:-150px;
			padding:15px 0 0 0;

			transition:top 0.5s;

			background:rgba(255,255,255,1);  
		/*	background:rgba(255,204,0,1);  */
		}
			#zbmdl_menuMUnderlay{
				width:100%;
				max-width:1280px;
				box-sizing:border-box;
				margin:0 auto;
				padding:0 5% 0 6.5%;
				
				position:relative;
			}
				#zbmdl_menuMUnderlay ul{
					display:flex;
					flex-flow:row;
					flex-wrap:nowrap;
					justify-content:flex-start;
					
					width:auto;
					position:relative;
				}
						#zbmdl_menuMUnderlay li{
							display:flex;
							flex-flow:row;
							flex-wrap:nowrap;
							justify-content:flex-start;
							
							width:auto;
							height:30px;
							
							list-style:none;
							font-size:1.3rem;
							padding:0 20px 0 0;
							margin:0;

							color:rgba(0,0,0,1);
						/*	background:rgba(0,210,0,0.2);  */
						}
							#zbmdl_menuMUnderlay li a{
								display:flex;
								flex-flow:row;
								flex-wrap:nowrap;
								justify-content:flex-start ;
							}
							#zbmdl_menuMUnderlay li a:link, #zbmdl_menuMUnderlay li a:visited{ color:rgba(0,0,0,0.5); }
							#zbmdl_menuMUnderlay li a:hover, #zbmdl_menuMUnderlay li a:visited{ color:rgba(0,0,0,1); }

							#zbmdl_menuMUnderlay svg{
								width:25px;
								margin:0 10px 0 0;
							}

							#zbmdl_menuMUnderlay li svg .strokeOnly { stroke:rgba(0,0,0,1); }
							#zbmdl_menuMUnderlay li svg .fillOnly { fill:rgba(0,0,0,1); }

							#zbmdl_menuMUnderlay li a:link svg .strokeOnly, #zbmdl_menuMUnderlay li a:visited svg .strokeOnly { stroke:rgba(0,0,0,0.6); }
							#zbmdl_menuMUnderlay li a:hover svg .strokeOnly, #zbmdl_menuMUnderlay li a:active svg .strokeOnly { stroke:rgba(0,0,0,1); }

							#zbmdl_menuMUnderlay li a:link svg .fillOnly, #zbmdl_menuMUnderlay li a:visited svg .fillOnly { fill:rgba(0,0,0,0.25); }
							#zbmdl_menuMUnderlay li a:hover svg .fillOnly, #zbmdl_menuMUnderlay li a:active svg .fillOnly { fill:rgba(0,0,0,1); }



	
	#zbmdl_cnt{ 
		width:100%;
		max-width:1280px;
		padding:0 5% 0 6.5%;
		box-sizing:border-box;
	}


	.zbmdl_cntStartA{
		width:100%;
		padding:0;
	}
	
	#zbmdl_ftrWrp{
		display:block;
	}
}



@media only screen and (max-width:650px){
	#zbmdl_logoM1{
		width:86%;
		margin-right:9%;
	}
	#zbmdl_menuMButton{
		width:5%;
	}
}

@media only screen and (max-width:560px){
	#zbmdl_ftrR4{
		display: none;
	}
}

@media only screen and (max-width:500px){
	#zbmdl_ftrL1 {
		display:inline-block !important;  
	}
	#zbmdl_ftrL3, #zbmdl_ftrL4{
		display: none !important;
	}
	
	#zbmdl_ftrR3{
		display: none !important;
	}
	#zbmdl_ftrR li:nth-of-type(2) { padding-right:0; }
}

@media only screen and (max-width:420px){
	#zbmdl_menuMUnderlay svg{
		display:none;	
	}
	
	h1{ font-size: 1.9rem;	}
	h2{ font-size: 1.65rem; }
	h3, h4, h5, h6{ font-size: 1.25rem;}
	p, td, ul, ol{ font-size: 1.1rem; }
	
	.zbmdl_prjCustLogo{
		width:60px;
		left:5px;
	}

	.withLogo{
		padding-left:80px;
	}
	
}

@media only screen and (max-width:320px){
	#zbmdl_ftrL2{ display:none; }
}



#debugOut{
	display:none;
	width:auto;
	
}