/*-----------------------------------------------------------------------------------*/
/*	CSS3 Media Queries for Responsiveness (mobile-first to desktop) */
/*-----------------------------------------------------------------------------------*/
*{
	margin:0;
	padding:0;}	
body{
	text-align:left;
	font-family: 'Open Sans', sans-serif;
	font-weight:400;}
body#branchen a#branchennav,
body#loesungen a#loesungennav,
body#unternehmen a#unternehmennav,
body#kontakt a#kontaktnav{
	background:url(../img/active.png) no-repeat;
	background-position:center;}	
li{
	list-style-type:none;}
a{
	text-decoration:none;
	color:#000;}
div#background{
	width:100%;
	overflow:hidden;
	position:fixed;
	left:0;
	top:0;
	z-index:-1;}
div#background img{
	width:100%;
	height:100%;}
p.strong{
	font-weight:700;
	color:#15557C;}	
/* --- smartphones in potrait mode --- */
@media screen and (min-width: 320px) {
body#index #illustration,
body#loesungen #illustration,
body#kontakt #illustration,
body#branchen #illustration,
body#unternehmen #illustration{
	width:100%;
	height:auto;
	margin-top:3em;}
body#index #illustration img,
body#loesungen #illustration img,
body#kontakt #illustration img,
body#branchen #illustration img,
body#unternehmen #illustration img{
	display:block;
	margin:auto;
	width:60%;
	height:auto;}
body#branchen #illustration p{
	font-size:0.8em;
	color:#FF7F00;
	font-weight:700;
	 padding-bottom: 1em;
    padding-left: 5em;}
body#impressum #content{
	width:100%;
	font-size:0.9em;
	padding-top:3em;}
body#kontakt #content,
body#loesungen #content, 
body#branchen #content,
body#index #content,
body#unternehmen #content{
	width:100%;
	padding-top:3em;}	
#header{
	width:100%;
	height:auto;
	background:url(../img/bghead.jpg) repeat-y;}
h1{
	font-size:1.1em;}
h2{
	color:#575859;
	font-size:1em;
	padding-top:1em;
	padding-bottom:0.65em;
	font-weight:700;}
h3{
	color:#15557C;
	font-size:1em;
	padding-top:2em;
	padding-bottom:1em;}
p.left{
	margin-right:8em;}
.hervorgehoben{
	padding-bottom:1em;
	color:#15557C;
	font-weight:700;}
#kontaktfoto{
	margin-right:1em;
	clear:both;}	
p.right{
	float:left;
	padding-top:0.5em!important;}	
ul.navigation{
	padding-bottom:1em;
	text-align:center;
	margin:auto;
	padding-top:1em;}
ul.navigation li{
	padding-bottom:0.5em;
	display:block;
	padding-right:1em;}
ul.navigation li.first{
	border-left-width:0px;
	padding-left:0;}	
ul.navigation li a{
	padding-bottom:1em;
	font-size:0.8em;
	color:#FFF;}
ul.eingerueckt li{
padding-left:1em;}
ul.branchen{
	padding-top:0.5em;}
#spezialisiertes li, #leistung li{
	padding-bottom:0.5em;}
#spezialisiertes ul.left, #leistung ul.left{
}
#spezialisiertes ul.right, #leistung ul.right{}	
span.punkte{
	margin-bottom:1em;}	
td.liste,th.liste{
	font-size:0.8em;
	border-collapse: collapse;
	border-bottom: 1px solid #FF8450;
	width:45%;
    padding-bottom: 0.5em;
	padding-top:0.5em;}
	td.listel{
	font-size:0.8em;
	padding-top:0.5em;
	border-collapse: collapse;
	border-bottom: 1px solid #FF8450;
	padding-right:1em;
	width:45%;
    padding-bottom: 0.5em;}
#content li{
	padding-bottom:0.5em;
	padding-left: 2em;
	background: url(../img/liste.png) left  top no-repeat ;}
#content a{
	color:#15557c;
	border-bottom:dotted;
	border-color:#E66D15;
	border-width:thin;}	
div.logo{
padding-top:10px;
	width:100%;
}
div.logo img{
    padding-left: 25%;
    width: 40%;}
div.logo a{
	text-decoration:none;}	

#container{
	margin-left:5px;
	margin-right:5px;}	
#content h1{
	font-weight:400;
	font-size:1.1em;
	line-height:1.2;
	color:#1F7EB8;}	
#content p{
	font-size:0.9em;
	padding-top:1em;}	
#leistung{
	width:49%;
	padding-bottom:1em;}
#spezialisiertes{
	width:49%}
	
#footer{
	width:30%;
	height:100px;
	margin-top:5em;
	border-top-width:2px;
	border-top-style:dotted;
	border-top-color:#15557C;
	display:block;
	clear:both;}	
#footer ul.footernavigation{
	width:66.5%;
	float:right;
	margin-top:1em;}
#footer a{
	font-size:0.8em;

	color:#15557C;}
}
/*tablet portrait*/
@media screen and (min-width: 768px) {
	ul.navigation{
	padding-bottom:1em;
	text-align:left;
	margin:auto;
	padding-top:1.8em;}
ul.navigation li{
	padding-bottom:0.7em;
	display:block;
	padding-right:1em;}
ul.navigation li.first{
	border-left-width:0px;
	padding-left:0;}	
ul.navigation li a{
	padding-bottom:1em;
	font-size:0.8em;
	color:#FFF;}
body#index #illustration,
body#loesungen #illustration,
body#kontakt #illustration,
body#branchen #illustration,
body#unternehmen #illustration{
	width:35%;
	height:auto;
	float:left;
	margin-top:8em;
	margin-left:1em;}
body#index #illustration img,
body#loesungen #illustration img,
body#kontakt #illustration img,
body#branchen #illustration img,
body#unternehmen #illustration img{
	width:100%;
	height:auto;}
body#branchen #illustration p{
	font-size:0.9em;
	color:#FF7F00;
	font-weight:700;}
body#impressum #content{
	width:100%;
	font-size:0.9em;
	padding-top:3em;}
body#kontakt #content,
body#loesungen #content, 
body#branchen #content,
body#index #content,
body#unternehmen #content{
	width:60%;
	padding-bottom:3em;
	padding-top:3em;
	float:left;}	
#header{
	width:100%;
	height:150px;
	background:url(../img/bghead.jpg) repeat-y;}
h1{
	font-size:1.5em;}
h2{
	color:#575859;
	font-size:1em;
	padding-top:1em;
	padding-bottom:0.65em;
	font-weight:700;}
h3{
	color:#15557C;
	font-size:1em;
	padding-top:2em;
	padding-bottom:1em;}
p.left{
	margin-right:8em;}
.hervorgehoben{
	padding-bottom:1em;
	color:#15557C;
	font-weight:700;}
ul.branchen{
	padding-top:0.5em;}
#spezialisiertes li, #leistung li{
	padding-bottom:0.5em;}
#spezialisiertes ul.left, #leistung ul.left{
}
#spezialisiertes ul.right, #leistung ul.right{
}
span.punkte{
	margin-bottom:1em;}	
td.liste,th.liste{
	font-size:1em;
	border-collapse: collapse;
	border-bottom: 1px solid #FF8450;
	width:45%;
    padding-bottom: 0.5em;
	padding-top:0.5em;}
	td.listel{
	font-size:1em;
	padding-top:0.5em;
	border-collapse: collapse;
	border-bottom: 1px solid #FF8450;
	padding-right:1em;
	width:45%;
    padding-bottom: 0.5em;}
#content li{
	padding-bottom:0.5em;
	padding-left: 2em;
	background: url(../img/liste.png) left  top no-repeat ;}
#content a{
	color:#15557c;
	border-bottom:dotted;
	border-color:#E66D15;
	border-width:thin;}	
div.logo{
	margin-right:1em;
	float: right;
    margin: auto;
    padding-top:4.1em;
	padding-left:0;
    width: 25%;}
div.logo img{
padding-left:0;
width:auto;
	float:right;}
div.logo a{
	text-decoration:none;}	
#kontaktfoto{
	margin-right:1em;
	clear:both;}	
p.right{
	float:left;
	padding-top:0.5em!important;}	
#container{
	max-width:1150px;
	width:80%;
	margin:auto;}	
#content h1{
	font-weight:400;
	font-size:1.6em;
	line-height:1.2;
	color:#1F7EB8;}	
#content p{
	font-size:1em;
	padding-top:1em;}	
#leistung{
float:right;
	width:49%;
	padding-bottom:1em;}
#spezialisiertes{
	width:49%;
	float:left;}
#clear{
	clear:both;}
#footer{
	width:30%;
	height:100px;
	margin-top:5em;
	border-top-width:2px;
	border-top-style:dotted;
	border-top-color:#15557C;
	display:block;
	clear:both;}	
#footer ul.footernavigation{
	width:66.5%;
	float:right;
	margin-top:1em;}
#footer a{
	font-size:1em;

	color:#15557C;}	
	}
/* tablets in landscape mode + standard laptop + desktop screens --- XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/
@media screen and (min-width: 994px) {
body#index #illustration,
body#loesungen #illustration,
body#kontakt #illustration,
body#branchen #illustration,
body#unternehmen #illustration{
	width:35%;
	height:auto;
	float:left;
	margin-top:8em;
	margin-left:1em;}
body#index #illustration img,
body#loesungen #illustration img,
body#kontakt #illustration img,
body#branchen #illustration img,
body#unternehmen #illustration img{
	width:100%;
	height:auto;}
body#branchen #illustration p{
	font-size:0.9em;
	color:#FF7F00;
	font-weight:700;}
body#impressum #content{
	width:100%;
	font-size:0.9em;
	padding-top:3em;}
body#kontakt #content,
body#loesungen #content, 
body#branchen #content,
body#index #content,
body#unternehmen #content{
	width:60%;
	padding-bottom:3em;
	padding-top:3em;
	float:left;}	
#header{
	width:100%;
	height:150px;
	background:url(../img/bghead.jpg) repeat-y;}
h1{
	font-size:1.5em;}
h2{
	color:#575859;
	font-size:1em;
	padding-top:1em;
	padding-bottom:0.65em;
	font-weight:700;}
h3{
	color:#15557C;
	font-size:1em;
	padding-top:2em;
	padding-bottom:1em;}
	#kontaktfoto{
	margin-right:1em;
	float:left;}	
p.right{
	padding-top:5.6em!important;}	
p.left{
	margin-right:8em;}
.hervorgehoben{
	padding-bottom:1em;
	color:#15557C;
	font-weight:700;}	
ul.navigation{
	width:auto;
	text-align:left;
	padding-top:7em;
	float:left;}
ul.navigation li{
	 border-left-width:1px;
	border-left-style:dotted;
	border-left-color:#FFF;
	display:inline;
	padding-left:1em;
	padding-right:1em;}
ul.navigation li.first{
	border-left-width:0px;
	padding-left:0;}	
ul.navigation li a{
	padding-bottom:1em;
	font-size:0.95em;
	color:#FFF;}
ul.eingerueckt li{
padding-left:1em;}
ul.branchen{
	padding-top:0.5em;}
#spezialisiertes li, #leistung li{
	padding-bottom:0.5em;}
#spezialisiertes ul.left, #leistung ul.left{
}
#spezialisiertes ul.right, #leistung ul.right{
}
span.punkte{
	margin-bottom:1em;}	
td.liste,th.liste{
	font-size:1em;
	border-collapse: collapse;
	border-bottom: 1px solid #FF8450;
	width:45%;
    padding-bottom: 0.5em;
	padding-top:0.5em;}
	td.listel{
	font-size:1em;
	padding-top:0.5em;
	border-collapse: collapse;
	border-bottom: 1px solid #FF8450;
	padding-right:1em;
	width:45%;
    padding-bottom: 0.5em;}
#content li{
	padding-bottom:0.5em;
	padding-left: 2em;
	background: url(../img/liste.png) left  top no-repeat ;}
#content a{
	color:#15557c;
	border-bottom:dotted;
	border-color:#E66D15;
	border-width:thin;}	
div.logo{
	margin-right:1em;
	float: right;
    margin: auto;
    padding-top:4.1em;
	padding-left:0;
    width: 25%;}
div.logo img{
padding-left:0;
width:auto;
	float:right;}
div.logo a{
	text-decoration:none;}	
.pgplink{
	}
#container{
	max-width:1150px;
	width:80%;
	margin:auto;}	
#content h1{
	font-weight:400;
	font-size:1.6em;
	line-height:1.2;
	color:#1F7EB8;}	
#content p{
	font-size:1em;
	padding-top:1em;}	
#leistung{
float:right;
	width:49%;
	padding-bottom:1em;}
#spezialisiertes{
	width:49%;
	float:left;}
#clear{
	clear:both;}
#footer{
	width:30%;
	height:100px;
	margin-top:5em;
	border-top-width:2px;
	border-top-style:dotted;
	border-top-color:#15557C;
	display:block;
	clear:both;}	
#footer ul.footernavigation{
	width:66.5%;
	float:right;
	margin-top:1em;}
#footer a{
	font-size:1em;

	color:#15557C;}
}