@import url("https://fonts.googleapis.com/css?family=Lato:400,900");
@import url("media400.css");
@import url("mail.css");

body {	  		   
	  color: #000;
	  font-family: Verdana, Arial sans-serif;
}
@media only screen and (min-width:990px) {
	
body {	  
	  background: url(../images/entwicklung.jpg) no-repeat;
}
/* FORMATIERUNG für Referenzen */
.refer_box { width: 15em; height: 10.1em; background: rgba(0, 0, 165, 1); margin: 10px; position: relative; overflow: hidden;}
.refer_box .refer_hover {z-index:2; width: 250px; height: 150px; position: absolute; top: -150px; left 0; background: rgba(0, 0, 165, 0.6); transition: all 500ms;
 -moz-transition: all 500ms; -ms-transition: all 500ms; -web-kits-transition : all 500ms;}
.refer_box:hover .refer_hover {top: 0;}
.refer_box:hover h4 {left: 0;}
.refer_box:hover h5 {left: 0;}
.refer_box img {position: absolute; top:0; left: 0; z-index: 1;}
h4 {z-index: 3; font-family: Helvetica, sans-serif; position: absolute; top: 25%; left: -100%; color: #fff; text-align: center; width: 100%; font-size: 25px;}
h5 {z-index: 3; font-family: Helvetica, sans-serif; position: absolute; top: 32%; left: -100%; color: #777; text-align: center; width: 100%; font-size: 16px;}
h4,h5, .refer_hover {transition: all 500ms; -moz-transition: all 500ms; -ms-transition: all 500ms; -web-kits-transition : all 500ms;}


img {border:0; vertical-align:top}

hr {color: rgba(0, 0, 165, 0.9);}

a {color: #fff; text-align: left;}

a:link,  a.visited {
text-decoration: none;
display: inline;
color: rgba(0, 0, 128, 0.9);
font-size: 1em;
font-weight: 600;}

a:hover, a:focus {
text-decoration: none;
display: inline;
background-color:#ddd;
color: rgba(0, 0, 128, 0.9);
font-weight: 600;
}

h1 {
	color: rgba(0, 0, 165, 0.9); 
	font-family: 'Lato' sans-serif; 
	font-weight: 700; 
	text-shadow: 0.05em 0.075em 0 rgba(0, 0, 0, 0.1); 
	font-size: 2.7em;
	}

h2 {
	background-color: rgba(0, 0, 165, 0.9); 
	color:#fff; 
	font-family: Verdana, Arial sans-serif; 
	font-size: 1em; 
	font-weight: 700;
	padding: 0.25em 1em 0.25em 1em;}

h3 {
	background-color: rgba(0, 0, 165, 0.9);
	color:#fff; 
	font-family: Verdana, Arial sans-serif; 
	font-size: 1em; 
	margin: 4em 1.8em 0.7em 1.8em; 
	padding: 0.25em;}

p {line-height: 1.5em; font-size: 0.95rem; }

/* Formatierung für content */

.grund {background: #fff} 
.line {background: url(../images/line.png) repeat-x;}
.rand {padding: 0 0 0 3em;}
.rand1 {margin: -0.5em 0 2em 0;}

/* formatierung für head */
h1.title1 {
			font-family: 'Lato', sans-serif; 
			font-weight: 700;
			font-size: 2.6rem; 
			margin: 0.3em 0 0 0;
			padding: 0;
			text-shadow: 0.05em 0.075em 0 rgba(0, 0, 0, 0.1); 
			display: inline-block; 
			}

.title2 {
		 color:#333; 
		 font-family: 'Lato', sans-serif; 
		 font-weight: 400; 
		 font-size: 1.7rem;
		 text-shadow: 0 0 0 rgba(0, 0, 0, 0); 
		 display: inline-block;
		 margin: 0.3em 0
}

nav ul {
		width: 100%;
		color: rgba(0, 0, 165, 0.9); 
		height: 1.3rem; 
		font-size: 1em;  
		margin: 0.3em 0 0 0; 
		padding: 0; 
		text-align: left; 
}

nav li{
		margin: 0; 
		display: inline-block; 
}

nav a { 
	   font-size: 1em; 
	   margin: 0; 
	   padding: 0 0.6rem; 
}

nav a:link, navi a:visited, navi a:hover, navi a:hover {
		font-size: 1em; 
		margin: 0; 
		padding: 0 0.6rem;
}

.activ {
		background-color:color: rgba(0, 0, 165, 0.9);
		color: #fff; 
		padding-bottom: 1em;
}

a:activ {color: #fff;}

a:link.activ, a:visited.activ {
		color: #fff; 
		padding: 0.5em;
}

a:hover.activ, a:focus.activ {
		background-color: #ddd; 
		color: rgba(0, 0, 165, 0.9); 
		padding: 0.5em;
}

/* formatierung content1 */
.satz {display: inline-block; padding: 0.7em 3.3rem 0 5rem;}
.margino {
			
			margin: 0 0 0 9.3em;
			padding: 0.25em 2em 0.25em 1.3em;
			}
.margino1 {
		  margin: 1em 0 0 1em;
		  }


.text1 {
		line-height: 1.3em;
		text-align: left;		
		margin: 1.5em 0.4em 2.2em 11.3em ; 
		padding: 0;
		}
		
.text2 {
		text-align: left;
		}

.text3 {
		text-align: left; 
		margin: 0 ; 
		padding: 0.25em 0.4em 0 1em;
		}

/* formatierung anschrift */
.box {
	  height: 7em; 
	  border: 2px solid rgba(0, 0, 165, 0.9); 
	  text-align: center;
	  margin: 3em 0 0 0;
	  }
h2.box {
	background-color: rgba(0, 0, 165, 0.9);
	}
	
.abstand_myfoto {margin: 0;}
.abstand_box {margin: 0;}
.abstand_adress {margin: 0.7rem 0 0 0;}

/* formatierung footer */
footer{
		height: 3em; 
		background-color: rgba(0, 0, 165, 0.9);
		color: #fff; 
		padding: 0 12.85rem 0 0;
		margin: 0;
}

footer p{
		display: inline-block; 
		padding: 0.5rem 0 0 0;
		}
		
footer a{
		font-family: Verdana, Arial sans-serif; 
		font-size: 1em; 
		margin: 0; 
		padding: 0 0.7rem; 
		color: #fff;
}

footer a:link, footer a:visited, footer a:hover, footer a:hover {
		font-family: Verdana, Arial sans-serif;
 		font-size: 1em; 
 		margin: 0; 
 		padding: 0 0.7rem; 
 		color: #fff;
 }
}

.grund {background: #fff} 
.grund1 {background: rgba(0, 0, 165, 0.2);}
.grund2 {background: #ddd;}

@media only screen and (max-width:990px; min-width:559px;) {
	
body {	  
	  background: url(../images/hgr.png);
}
/* FORMATIERUNG für Referenzen */
.refer_box { width: 15em; height: 10.1em; background: rgba(0, 0, 165, 1); margin: 10px; position: relative; overflow: hidden;}
.refer_box .refer_hover {z-index:2; width: 15em; height: 10.1em; position: absolute; top: -10.1em; left 0; background: rgba(0, 0, 165, 0.6); transition: all 500ms;
 -moz-transition: all 500ms; -ms-transition: all 500ms; -web-kits-transition : all 500ms;}
.refer_box:hover .refer_hover {top: 0;}
.refer_box:hover h4 {left: 0;}
.refer_box:hover h5 {left: 0;}
.refer_box img {position: absolute; top:0; left: 0; z-index: 1; }
h4 {z-index: 3; font-family: Helvetica, sans-serif; position: absolute; top: 25%; left: -100%; color: #fff; text-align: center; width: 100%; font-size: 25px;}
h5 {z-index: 3; font-family: Helvetica, sans-serif; position: absolute; top: 32%; left: -100%; color: #777; text-align: center; width: 100%; font-size: 16px;}
h4,h5, .refer_hover {transition: all 500ms; -moz-transition: all 500ms; -ms-transition: all 500ms; -web-kits-transition : all 500ms;}

img {border:0; vertical-align:top}

hr {color: rgba(0, 0, 165, 0.9);}

a {color: #fff; text-align: left;}

a:link,  a.visited {
text-decoration: none;
display: inline;
color: rgba(0, 0, 128, 0.9);
font-size: 1em;
font-weight: 600;}

a:hover, a:focus {
text-decoration: none;
display: inline;
background-color:#ddd;
color: rgba(0, 0, 128, 0.9);
font-weight: 600;
}

h1 {
	color: rgba(0, 0, 165, 0.9); 
	font-family: 'Lato' sans-serif; 
	font-weight: 700; 
	text-shadow: 0.05em 0.075em 0 rgba(0, 0, 0, 0.1); 
	font-size: 2.1em;
	}

h2 {
	background-color: rgba(0, 0, 165, 0.9); 
	color:#fff; 
	font-family: Verdana, Arial sans-serif; 
	font-size: 0.5em; 
	font-weight: 700;
	padding: 0.25em 1em 0.25em 1em;}

h3 {
	background-color: rgba(0, 0, 165, 0.9);
	color:#fff; 
	font-family: Verdana, Arial sans-serif; 
	font-size: 1em; 
	margin: 4em 1.8em 0.7em 1.8em; 
	padding: 0.25em;}

p {line-height: 1.5em; font-size: 0.95rem; }

/* Formatierung für content */

.line {background: url(../images/line.png) repeat-x;}
.rand {padding: 0 0 0 3em;}
.rand1 {margin: -1em 1em 1em 1em;}
/* formatierung für head */
h1.title1 {
			font-family: 'Lato', sans-serif; 
			font-weight: 700;
			font-size: 2.6rem; 
			margin: 0.3em 0 0 0;
			padding: 0;
			text-shadow: 0.05em 0.075em 0 rgba(0, 0, 0, 0.1); 
			display: inline-block; 
			}

.title2 {
		 color:#333; 
		 font-family: 'Lato', sans-serif; 
		 font-weight: 400; 
		 font-size: 1.7rem;
		 text-shadow: 0 0 0 rgba(0, 0, 0, 0); 
		 display: inline-block;
		 margin: 0.3em 0
}

nav ul {
		width: 100%;
		color: rgba(0, 0, 165, 0.9); 
		height: 1.3rem; 
		font-size: 1em;  
		margin: 0.3em 0 0 0; 
		padding: 0; 
		text-align: left; 
}

nav li{
		margin: 0; 
		display: inline-block; 
}

nav a { 
	   font-size: 1em; 
	   margin: 0; 
	   padding: 0 0.6rem; 
}

nav a:link, navi a:visited, navi a:hover, navi a:hover {
		font-size: 1em; 
		margin: 0; 
		padding: 0 0.6rem;
}

.activ {
		background-color:color: rgba(0, 0, 165, 0.9);
		color: #fff; 
		padding-bottom: 1em;
}

a:activ {color: #fff;}

a:link.activ, a:visited.activ {
		color: #fff; 
		padding: 0.5em;
}

a:hover.activ, a:focus.activ {
		background-color: #ddd; 
		color: rgba(0, 0, 165, 0.9); 
		padding: 0.5em;
}

/* formatierung content1 */
.satz {display: inline-block; padding: 0.7em 3.3rem 0 5rem;}
.margino {
			
			margin: 0 0 0 9.3em;
			padding: 0.25em 2em 0.25em 1.3em;
			}
.margino1 {
		  margin: 1em 0 0 1em;
		  }


.text1 {
		line-height: 1.3em;
		text-align: left;		
		margin: 1.5em 0.4em 2.2em 11.3em ; 
		padding: 0;
		}
		
.text2 {
		text-align: left;
		margin: 0.05em 0 2.2em 0;
		padding: 0.4em 1em 0em 1em ;
		}

.text3 {
		text-align: left; 
		margin: 0 ; 
		padding: 0.25em 0.4em 0 1em;
		}

/* formatierung anschrift */
.box {
	  height: 7em; 
	  border: 2px solid rgba(0, 0, 165, 0.9); 
	  text-align: center;
	  margin: 3em 0 0 0;
	  }
h2.box {
	background-color: rgba(0, 0, 165, 0.9);
	}
	
.abstand_myfoto {margin: 0;}
.abstand_box {margin: 0;}
.abstand_adress {margin: 0.7rem 0 0 0;}

/* formatierung footer */
footer{
		height: 3em; 
		background-color: rgba(0, 0, 165, 0.9);
		color: #fff; 
		padding: 0 12.85rem 0 0;
		margin: 0;
}

footer p{
		display: inline-block; 
		padding: 0.5rem 0 0 0;
		}
		
footer a{
		font-family: Verdana, Arial sans-serif; 
		font-size: 1em; 
		margin: 0; 
		padding: 0 0.7rem; 
		color: #fff;
}

footer a:link, footer a:visited, footer a:hover, footer a:hover {
		font-family: Verdana, Arial sans-serif;
 		font-size: 1em; 
 		margin: 0; 
 		padding: 0 0.7rem; 
 		color: #fff;
 }
}

@media only screen and (max-width:560px) {
 
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}    

body {  background: #fff;}

/* Formatierung für Nav + Links */



h1 {font-size: 1.2em;}

h2 { 
	width: 100%;
	font-size: 0.9em; 
	margin: 0.1em -1.5em 0 0; 
	padding: 0.1em 0.5em;
	background-color: rgba(0, 0, 165, 0.9);
	color: #fff;
	}

p {
	line-height: 1.1em; 
	font-size: 0.95rem; 
}

/* Formatierung für content */

.line {background: #fff;}
.rand {padding: 0;}	  


/* formatierung für head */

header {
		width: 100%; 
		height: 1em; 
		margin: 0; 
		padding: 0; 
		display: block;
}

h1.title1 {
		   font-family: 'Lato', sans-serif; 
		   font-weight: 700;		  
		   font-size: 1.2em; 
		   padding: 0; 
		   display: inline-block; 
		   margin: -0.2em 0 -1em -0.4em;
		   color: rgba(0, 0, 165, 0.9);
}
		   
.title2 { 
		font-family: 'Lato', sans-serif; 
		font-weight: 400;
		font-size: 0.9em;  
		margin: -0.3rem -1em -1em 0; 
		padding: 0; 
		display: inline-block;
}

nav ul {
		width: 104%;
		font-size: 0.95em; 
		margin: 0.1em -0.5em 0 -0.5em; 
		padding: 0;
		display: inline-bock;
		background-color: rgba(0, 0, 165, 0.9);
		color: #fff;
}

nav li {margin: 0; display: inline-block;}

nav a {
	   font-size: 0.95em; 
	   margin: 0; 
	   padding: 0 0.3em; 
	   color: #fff;
	   }
nav a:link, navi a:visited, navi a:hover, navi a:hover {
	font-size: 0.95em;
	margin: 0; 
	padding: 0 0.3em;
	color: #fff;
}
/* ende Formatierung Nav, Links */

.refer_box { width: 15em; height: 10.1em; background: rgba(0, 0, 165, 1); margin: 10px; position: relative; display: none;}
.refer_box .refer_hover {z-index:2; width: 15em; height: 10.1em; position: absolute; top: -10.1em; left 0; background: rgba(0, 0, 165, 0.6); transition: all 500ms;
 -moz-transition: all 500ms; -ms-transition: all 500ms; -web-kits-transition : all 500ms; display: none;}
.refer_box:hover .refer_hover {top: 0; display: none;}
.refer_box:hover h4 {left: 0;}
.refer_box:hover h5 {left: 0;}
.refer_box img {position: absolute; top:0; left: 0; z-index: 1; }
h4 {z-index: 3; font-family: Helvetica, sans-serif; position: absolute; top: 25%; left: -100%; color: #fff; text-align: center; width: 100%; font-size: 10px;}
h5 {z-index: 3; font-family: Helvetica, sans-serif; position: absolute; top: 32%; left: -100%; color: #777; text-align: center; width: 100%; font-size: 8px;}
h4,h5, .refer_hover {transition: all 500ms; -moz-transition: all 500ms; -ms-transition: all 500ms; -web-kits-transition : all 500ms;}



/* formatierung content1 */
				
.text1 {
		font-size: 0.9em; 
		line-height: 1.1em;	
		}
		
.text2 {
		width: 100%;
		font-size: 0.9em; 
		line-height: 1.1em;	 

}

.text3 {
		width: 100%;
		font-size: 0.9em; 
		line-height: 1.1em;	
}

.margino1 {
		  margin: 3em 0 0 0;
		  width: 80%;
		  }

/* formatierung anschrift */
.box {
	  width: 12em;
	  height: 5em; 
	  margin: -16em 0 0 -2.1em;	  
}
	  
h2.abstand_box {
	padding: 0 0.7rem;
	margin: 0;
}
	
.abstand_myfoto {
	margin: -6.4em 1em 0 6.8em;
	transform: scale(0.5);
}

.abstand_box {margin: 0 0 0 1em;}

.abstand_adress {
	margin: 0;
	transform: scale(0.85);
}


/* formatierung footer */
footer{
	   width: 104%; 
	   padding: 0;
	   margin: 0 -0.23em;
	   background-color: rgba(0, 0, 165, 0.9);
	   color: #fff;
	   }
	   
#pos {
	   height: 1.2em;
	   bottom: 0;
	   left: 0;
	   right: 0;
	   margin: 0;
	   
}

footer p{
		 font-size: 0.8em;
		 display:block; 
		 margin: 0; 
		 padding: 0;
}

footer a{
		 font-size: 0.9em; 
		 line-height: 1.1em;
		 margin: 0; 
		 padding: 0;
		 color: #fff;
}

footer a:link, footer a:visited, footer a:hover, footer a:hover {
 	font-size: 1em; 
 	margin: 0; 
 	padding: 0;
 	color: #fff; 
 	} 
}