* {
	margin:					0;
	padding:				0;
	color:					#000;
	font-family: 			'Fira Sans', sans-serif;
}

.clear{
	clear:					both;
}

h1{
	color:					#f7a800;
	font-weight:			300;
	line-height:			130%;
	font-family: 			'Dosis', sans-serif;
}

.yellow{
	color:					#f7a800;
}
.grey{
	color:					#868889;
}
.bold{
	font-weight:			bold;
}
.yellowBold{
	color:					#f7a800;
	font-weight:			bold;
}
.trenner{
	border-bottom:			solid 1px #868889;
	margin:					50px 0 40px 0;
}

.tel, .tel2{
	color:					#fff;
	white-space:			nowrap;
	float:					left;
}
.telefon, .telefon2{
	display:				block;
	color:					#fff;
	float:					left;
}
.telefon_mobile, .telefon_mobile2{
	display:				none;
	color:					#fff;
	float:					left;
}

.tel2, .telefon2, .telefon_mobile2{
	color:					#000;
}



a{
	text-decoration:		none;
	color:					#000;
}
a:hover{
	color:					#f7a800;
	text-decoration:		none;
}
a.foot2{
	text-decoration:		none;
	color:					#fff;
}
a.foot2:hover{
	color:					#f7a800;
	text-decoration:		none;
}
a.foot{
	color:					#FFF;
	margin-left:			40px;	
	text-decoration:		none;	
}
a.foot:hover, a.foot_active, a.foot_active:hover{
	color:					#f7a800;
	margin-left:			40px;	
	text-decoration:		none;
}

#head{
	position:				relative;
	width:					100%;
	margin:					auto;
	background:				white;
}

#head_wrapper{
	position:				relative;
	margin:					auto;
	width:					1200px;
}
#nav_logo{
	width:					100%;
	position:				relative;
	text-align:				center;
}
#logo{
	width:					350px;
	position:				relative;
	margin:					20px 0 30px 0;
	cursor:					pointer;
}
#nav{
	width:					100%;
}
.nav_entree, .nav_entree_active{
	position:				relative;
	top:					4px;
	float:					left;
	margin-right:			50px;
	padding:				22px 0 20px 50px;
	cursor:					pointer;
	text-align:				center;
	font-size:				1em;
	border-bottom:			solid 4px #868889;
	z-index:				10000000;
}
.nav_entree:hover, .nav_entree_active{
	border-bottom:			solid 4px #f7a800;
}
.nav_entree_icon_0{
	background:				url(../images/icons/Ueber_uns.png);
	background-size:		40px;
	background-position:	left;
	background-repeat:		no-repeat;
}
.nav_entree_icon_0:hover, .nav_entree_icon_0_active{
	background:				url(../images/icons/Ueber_uns_aktiv.png);
	background-size:		40px;
	background-position:	left;
	background-repeat:		no-repeat;
}
.nav_entree_icon_1{
	background:				url(../images/icons/Planung.png);
	background-size:		40px;
	background-position:	left;
	background-repeat:		no-repeat;
}
.nav_entree_icon_1:hover, .nav_entree_icon_1_active{
	background:				url(../images/icons/Planung_aktiv.png);
	background-size:		40px;
	background-position:	left;
	background-repeat:		no-repeat;
}
.nav_entree_icon_2{
	background:				url(../images/icons/Sicherheitstechnik.png);
	background-size:		40px;
	background-position:	left;
	background-repeat:		no-repeat;
}
.nav_entree_icon_2:hover, .nav_entree_icon_2_active{
	background:				url(../images/icons/Sicherheitstechnik_aktiv.png);
	background-size:		40px;
	background-position:	left;
	background-repeat:		no-repeat;
}
.nav_entree_icon_3{
	background:				url(../images/icons/Kommunikation.png);
	background-size:		40px;
	background-position:	left;
	background-repeat:		no-repeat;
}
.nav_entree_icon_3:hover, .nav_entree_icon_3_active{
	background:				url(../images/icons/Kommunikation_aktiv.png);
	background-size:		40px;
	background-position:	left;
	background-repeat:		no-repeat;
}
.nav_entree_icon_4{
	background:				url(../images/icons/Elektroinstallation.png);
	background-size:		40px;
	background-position:	left;
	background-repeat:		no-repeat;
}
.nav_entree_icon_4:hover, .nav_entree_icon_4_active{
	background:				url(../images/icons/Elektroinstallation_aktiv.png);
	background-size:		40px;
	background-position:	left;
	background-repeat:		no-repeat;
}
.nav_entree_icon_5{
	background:				url(../images/icons/Kontakt.png);
	background-size:		40px;
	background-position:	left;
	background-repeat:		no-repeat;
}
.nav_entree_icon_5:hover, .nav_entree_icon_5_active{
	background:				url(../images/icons/Kontakt_aktiv.png);
	background-size:		40px;
	background-position:	left;
	background-repeat:		no-repeat;
}

#nav_mobile{
	display:				none;
	width:					80%;
	margin:					0 0 15px 5px;
}

.nav_mobile_element{
	float:					left;
	margin-right:			20px;
	height:					40px;
	display: 				-webkit-flex;
	display: 				-webkit-box;
	display: 				-ms-flexbox;
	display: 				flex;
	-webkit-align-items: 	center;
	-webkit-box-align: 		center;
	-ms-flex-align: 		center;
	align-items: 			center;
	font-size:				1.5em;
}

#menue_text{
	padding-top:			0px;
	color:					#f7a800;
}
#mobile_pic{
	width:					40px;
}
#mobile_div{
	display:				none;
	position:				absolute;
	height:					500px;
	width:					100%;
	background:				#FFF;
	padding-top:			20px;
	border-bottom:			solid 1px #f7a800;
}
.nav_entree_mobile, .nav_entree_mobile_active{
	width:					100%;
	font-size:				1.5em;
	text-align:				center;
	padding:				12px 0 12px 0;
	color:					#000;
	line-height:			120%;
}
.nav_entree_mobile_active{
	color:					#f7a800;
}

.galerie{
	position:				relative;
	border-top:				solid 4px #868889;
}

#watermark{
	position:				absolute;
	right:					0px;
	bottom:					0px;
	height:					70%;
	z-index:				100000;
}

#slogan_wrapper{
	position:				relative;
	top:					-20px;
	width:					100%;
	height:					140px;
	background:				#f7a800;
}
	
#slogan{
	position:				relative;
	margin:					auto;
	width:					1200px;
	height:					140px;
}
#slogan_text{
	font-family: 			'Dosis', sans-serif;
	position:				relative;
	height:					140px;
	font-size:				2.5em;
	color:					#fff;
	display:				table-cell;
	vertical-align:			middle;
}

#content{
	margin:					auto;
	width:					1200px;
	padding:				50px 0 250px 0;
	line-height:			150%;
	color:					#000;
}

#content_wrapper{
	width:					60%;
}


#foot{
	width:					100%;
	margin:					auto;
	padding:				40px 0 50px 0;
	background:				url(../images/foot.jpg);
	background-color:		#87888A;
	background-size:		100%;
	background-repeat:		no-repeat;
}
#foot_wrapper{
	position:				relative;
	margin:					auto;
	width:					1200px;
}

#foot_left, #foot_right{
	color:					white;
	width:					50%;
	font-size:				1.1em;
	float:					left;
	line-height:			125%;
}
#foot_right{
	text-align:				right;
}

#foot_head{
	font-size:				1.6em;
	color:					#fff;
	margin-bottom:			40px;
	font-family: 			'Dosis', sans-serif;
}



#kontakt_div{
	width:					100%;
	background:				#fff;
	padding-top:			30px;
}
.kontakt_element{
	float:					left;
	height:					100px;
	margin-bottom:			40px;	
}
.kontakt_icon{
	width:					40px;
	margin-right:			50px;
}

.kontakt_alert{
	margin:					40px 0 0 0;
	color:					#f7a800;
}
.kontakt_desc{
	width:					calc(35% - 22px);
	margin:					30px 0 10px 10%;
	float:					left;
}
.kontakt_desc2{
	width:					calc(35% - 22px);
	margin:					30px 0 10px calc(10% + 32px);
	float:					left;
}


textarea{
	width:					calc(80% - 2px);
	height:					150px;
	border:					solid 1px #868889;
	padding:				10px;
	margin:					15px 0 10px 0;
	color:					#868889;
}
input[type=text], input[type=email]{
	width:					calc(40% - 20px);
	border:					solid 1px #868889;
	padding:				10px;
	margin:					15px 10px 0 0;
	color:					#868889;
}
input[type=submit]{
	border:					none;
	color:					#fff;
	background:				#868889;
	padding:				10px 50px;
	margin:					50px 0 40px 0;
	float:					left;
}

input[type=submit]:hover{
	background:				#f7a800;
	color:					#FFF;
}

#checkbox_div{
	position:				relative;
	left:					20px;
	width:					80%;
}


input[type=checkbox] { 
	opacity: 				0; 
}
input[type=checkbox] + label:before {
	width:					17px;
	height:					17px;
	display:				inline-block;
	position:				absolute;
	left:					0;
	top:					3px;
	margin-left:			-20px;
	content:				"";
	border:					1px solid #888;
	border-radius:			3px;
	background-color:		#fff;
}
input[type=checkbox]:focus + label:before { 
	outline:				thin dotted; 
	outline:				5px auto -webkit-focus-ring-color; // for WebKit
}
@font-face{
	font-family:			'Glyphicons Halflings';
	src:					url(../bootstrap/fonts/glyphicons-halflings-regular.eot);
	src:					url(../bootstrap/fonts/glyphicons-halflings-regular.svg)	format('svg'),
							url(../bootstrap/fonts/glyphicons-halflings-regular.woff)	format('woff'),
							url(../bootstrap/fonts/glyphicons-halflings-regular.ttf)	format('ttf')
}
input[type=checkbox] + label:after {
	width:					16px;
	height:					16px;
	display:				inline-block;
	position:				absolute;
	left:					0;
	top:					0;
	padding-left:			3px;
	padding-top:			5px;
	margin-left:			-20px;
	font-size:				11px;
	color:					#f7a800;
}
input[type=checkbox]:checked + label:before {
	background-color:		#fff;
	border-color:			#888;
}
input[type=checkbox]:checked + label:after {
	font-family:			"Glyphicons Halflings";
	content:				'\e013';
	color:					#f7a800;
	top:					-8px;
	font-size:				20px;
}
input[type=checkbox] + label {
	display:				inline-block;
	position:				relative; 
	padding-left:			15px; 
	margin-right:			30px;
}





@media only screen and (max-width: 1250px) {
	
	#content, #head_wrapper, #foot_wrapper, #slogan{
		width:				94%;
	}
	#foot{
		background-size:	unset;
	}
	
	.nav_entree, .nav_entree_active{
		margin-right:		50px;
		padding:			22px 0 20px 0;
	}
	
	.nav_entree_icon_0, 	   .nav_entree_icon_1, 		  .nav_entree_icon_2, 	     .nav_entree_icon_3,	    .nav_entree_icon_4, 	   .nav_entree_icon_5, 
	.nav_entree_icon_0:hover,  .nav_entree_icon_1:hover,  .nav_entree_icon_2:hover,  .nav_entree_icon_3:hover,  .nav_entree_icon_4:hover,  .nav_entree_icon_5:hover,
	.nav_entree_icon_0_active, .nav_entree_icon_1_active, .nav_entree_icon_2_active, .nav_entree_icon_3_active, .nav_entree_icon_4_active, .nav_entree_icon_5_active 
	{
		background:			none;
	}

}



@media only screen and (max-width: 940px) {
	

	#nav, #foot_right{
		display:			none ;
	}
	#nav_mobile{
		display:			block ;
	}
	textarea{
		width:				calc(80% - 2px);
	}
	input[type=text], input[type=email], input[type=submit], .kontakt_desc, .kontakt_desc2{
		width:				calc(80% - 2px);
	}
	#content_wrapper{
		width:				100%;
	}
	#foot_left{
		width:				100%;
	}

}

@media only screen and (max-width: 800px) {
	#content{
		font-size:			1.1em;
	}
	h1{
		font-size:			1.2em;
	}
	#slogan_wrapper{
		font-size:			0.75em;
	}
	#slogan_wrapper, #slogan, #slogan_text{
		height:				100px;
	}


	.telefon, .telefon2{
		display:			none;
	}
	.telefon_mobile, .telefon_mobile2{
		display:			block;
	}


}