/* FRONTEND CSS
*********************************************/

*{
	-moz-box-sizing: border-box;	
	-webkit-box-sizing: border-box;	
	-o-box-sizing: border-box;	
	box-sizing: border-box;	
	margin: 0;
	padding: 0;
}

img{
	border: 0;	
}

html {
	/* scrollbar fix (prevent ugly left pull for lower content sites) */
	
}

html,body{
	height: 100%;	
}

body {

	background-image: url(../images/bg.png);
	background-repeat: no-repeat;
	background-position: right bottom;
	background-attachment: fixed;
	background-color: #e4e3df;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 14px;


}

.mobile,.tablet,.phone,#logo_mobile_tablet{
	display: none;	
}

#container{
	
	background-color: rgba(255,255,255,0.7);
	width: 100%;
	min-height: 90%;
	max-width: 1140px;
	margin: 0 auto;
	padding: 5px 10px 5px 10px;
	
}

.border{
	border-color: #dbdbac;
	border-style: solid;
	border-width: 1px;
	-webkit-box-shadow: -2px 7px 2px -2px rgba(221,221,221,1);
	-moz-box-shadow: -2px 7px 2px -2px rgba(221,221,221,1);
	box-shadow: -2px 7px 2px -2px rgba(221,221,221,1);
	background-color: #ffffff;	
}

#navigation{
	
	float: left;
	max-width: 822px;
	width: 100%;
	height: 150px;
	padding: 18px 18px;
	
	
}

#logo{

	margin: 0 0 0 10px;
	float: left;
	width: 288px;
	padding: 10px;
	text-align: center;

}

#logo img{

	width: 100%;
	
}

#content{
	width: 100%;
	max-width: 822px;
	margin: 25px 0;	
	padding: 55px 40px;
	float: left;
	
}

#submenu{
	margin: 20px 0 0 10px;
	float: left;
	width: 288px;
	padding: 10px;
	text-align: center;	
}


#navigation ul{
	list-style-type: none;
}
#navigation li{
	display: inline-block;	
	width: 85px;
	height: 104px;
	text-align: center;
	background-repeat: no-repeat;
	background-size: contain;
	margin:0 22px;
	cursor: pointer;	
}

#navigation ul li a {
	display: inline-block;
	padding-top: 95px;
	text-decoration: none;
	color: #000000;
	text-transform: lowercase;

}

#navigation ul li.item-435{
	background-image: url(../images/menu_home.png);	
}
body.no-touch #navigation ul li.item-435:hover,#navigation ul li.item-435.current{
	background-image: url(../images/menu_home_on.png);	
}

#navigation ul li.item-483{
	background-image: url(../images/menu_leistungen.png);	
}
body.no-touch #navigation ul li.item-483:hover,#navigation ul li.item-483.current{
	background-image: url(../images/menu_leistungen_on.png);	
}

#navigation ul li.item-482{
	background-image: url(../images/menu_referenzen.png);	
}
body.no-touch #navigation ul li.item-482:hover,#navigation ul li.item-482.current{
	background-image: url(../images/menu_referenzen_on.png);	
}

#navigation ul li.item-481{
	background-image: url(../images/menu_kontakt.png);	
}
body.no-touch #navigation ul li.item-481:hover,#navigation ul li.item-481.current{
	background-image: url(../images/menu_kontakt_on.png);	
}
#navigation ul li.item-480{
	background-image: url(../images/menu_jobs.png);	
}
body.no-touch #navigation ul li.item-480:hover,#navigation ul li.item-480.current{
	background-image: url(../images/menu_jobs_on.png);	
}
#navigation ul li.item-479{
	background-image: url(../images/menu_impressum.png);	
}
body.no-touch #navigation ul li.item-479:hover,#navigation ul li.item-479.current{
	background-image: url(../images/menu_impressum_on.png);	
}

#content .icons{
	display: none;	
}

#content h2{

	color: #878584;
	text-transform: uppercase;	
	font-weight: bold;
	font-size: 20px;
	line-height: 30px;
	margin-bottom: 25px;
}
#content div[itemprop="articleBody"]{
	padding: 0 30px;	
}

#content .item-image{
	padding-top: 50px;
	padding-left: 30px;

}

#content .item-image img{
	width: 100%;	
}

#submenu ul li,#submenu_mobile ul li{
	display: block;	
	margin: 0 0 20px 0;
	border-color: #dddddd;
	border-style: solid;
	border-width: 1px;
	-webkit-box-shadow: -2px 7px 2px -2px rgba(221,221,221,1);
	-moz-box-shadow: -2px 7px 2px -2px rgba(221,221,221,1);
	box-shadow: -2px 7px 2px -2px rgba(221,221,221,1);
	background-color: #ffffff;	
	height: 115px;
	width: 115px;
	padding: 0 12px;
	cursor: pointer;

}



#submenu ul li a,#submenu_mobile ul li a{
	color: #9a3334;
	position: relative;
	top: 50%;
	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	display: inline-block;
	margin: 0;
	padding: 0;
	font-size: 12px;
	text-decoration:none;
	
}

#submenu ul{

	position: relative;
	top: 200px;
	/* top: 50%; */
	/* transform: translateY(-50%);*/
	margin: 0 auto;
	width: 105px;
	
}

body.no-touch #submenu ul li:hover,#submenu ul li.current,body.no-touch #submenu_mobile ul li:hover,#submenu_mobile ul li.current{
	background-color: #9a3334;

}
body.no-touch #submenu ul li:hover a,#submenu ul li.current a,body.no-touch #submenu_mobile ul li:hover a,#submenu_mobile ul li.current a{
	color: #ffffff;	
}

#content ul li{
	margin-left: 20px;
}

#content h3{
	margin-bottom: 20px;
	font-size: 18px;	
}

.show-menu {

	text-decoration: none;
	color: #fff;
	background: #9a3334;
	text-align: center;
	padding: 10px 0;
	display: none;
	cursor: pointer;
}


input[type=checkbox]{
    display: none;
}






/* RESPONSIVE */




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

	.mobile{
		display: block;	
	}
	
	#logo{
		display: none;	
	}
	
	#logo_mobile{
		margin: 0 auto;
		max-width: 400px;	
	}
	
	#logo_mobile img{
		width: 100%;	
	}
	
	#header,#content{
		margin: 0 auto;
		max-width: 822px;
		float: none;
		
	}
	#content{
		margin: 20px auto 0 auto !important;
		
	}
	#submenu{
		display: none;	
	}
	
	#submenu_mobile{
		max-width: 822px;
		margin: 20px auto;	
		text-align: center;
	}
	
	#submenu_mobile ul{
		width: auto;
		display: inline-block;
		
	}
	
	#submenu_mobile ul li{
		display: inline-block;
		margin-right: 10px;
	}
	
	#submenu_mobile ul li a{
		
	}
	


	
}

@media screen 
  and (max-width: 760px)
  and (orientation: portrait)
     {
  
	
	.tablet{
		display: block;	
	}
	
	.show-menu {
		display:block;
	}
	
	#navigation ul{
		display: none;	
	}
	
	#navigation #navigation ul li{
		margin: 0 !important;
	
	}
	
	input[type=checkbox]:checked ~ ul{
   	 display: block !important;
	}
	
	#navigation,#content{
		height: auto;	
		width: 100%;
	}
	
	#navigation ul li{
		display: block;
		width: 100%;	
		height: auto;
		margin: 0;
		background-image: none !important;
		background-color: #9a3334;
		border-style: solid;
		border-color: #ffffff;
		border-width: 0 0 1px 0;

	}
	
	#navigation ul li a{
		display: block;
		width: 100%;	
		height: auto;
		padding: 20px;
		color: #ffffff;
	}
	
	

}

@media only screen and (max-width: 780px) {
  
  
	#navigation #navigation ul li{
		
		margin: 0 14px;
	
	}
  }

@media screen 
  and (max-device-width: 1024px) 
  and (orientation: landscape) {

	#logo_mobile_tablet{
		display: block;
		max-width: 800px;
		margin: 0 auto;
		
	}
	
	#logo_mobile{
		display: none;
	}
	#logo_mobile_tablet img{
		width: 100%;
	}
	
	  
}

@media only screen and (max-width: 568px) 
  and (orientation: landscape) {
	  
	  #navigation{
			height: 125px;  
	  }

	#navigation #navigation ul li{
		max-width: 65px;
		margin: 0 10px;
	
	}
	
	#navigation #navigation ul li a{
		padding-top: 70px;
		font-size: 10px;	
	}
}



@media only screen and (max-width: 760px) 
  and (orientation: landscape) {

	#navigation #navigation ul li{
		margin: 0 8px;
	
	}
}

@media only screen and (min-width: 768px) and (max-width: 1024px) 
  and (orientation: portrait) {

	#navigation #navigation ul li{
		margin: 0 14px;
	
	}
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) 
  and (orientation: portrait) {

	#navigation #navigation ul li{
		margin: 0 16px;
	
	}
}

@media only screen and (max-width: 640px) {
	
	
	#submenu_mobile ul{
		display: block;
		width: 100%;	
	}

	#submenu_mobile ul li{
		display: block;
		width: 100%;
		padding: 12px;
		height: auto;
	
	}
	
	#submenu_mobile ul li a{
		transform: none;	
	}
	
	#content{
		padding: 10px;	
	}
	#content div[itemprop="articleBody"] {
    padding: 0 10px;
}
	
}

.label-warning{
	display: none;	
}