/* Default */

	
.cf:before, .cf:after {content: " "; display: table; }
	   
.cf:after {clear: both;}
	
.cf {*zoom: 1;}

/*  ============================================================================ */
/* Navigationen */	
			
#nav {text-align:right;}
#nav ul {list-style-type: none; margin: 0; padding: 0;}
#nav ul li {display:inline-block; margin: 0; padding: 0; }
#nav a {	 
	font-weight: 500; 
	font-size: 1em;
	color: #fff; 
	display: inline-block; 
	padding: 5.5px 10px 5.5px 10px; 
	text-transform: uppercase;
}		 		
						 
#nav a {
	-webkit-transition: background 1s ease;
	-moz-transition: background 1s ease;
	-ms-transition: background 1s ease;
	-o-transition: background 1s ease;
	transition: background 1s ease;
			}
#nav a:hover {background-color: #1b8ca0;}
			
#nav span.plus {display: none;}

/*  ============================================================================ */

/*  SUBNAVIGATION  */
			
#nav ul > li {position:relative;}
							 
#nav ul ul {display:none; position:absolute; z-index:30; text-align:left;}
				        				          
#nav  ul.sub2 {margin-left:201px; top:0;}
				       			      
#nav ul li ul li {float:none; padding:0; margin:0; border:none; height:inherit; width:100%;}

#nav ul ul li a {
	padding: 5px 20px 5px 20px;
	background: #1b6ca0;
	width: 250px;
	color: #fff;
	border-top: 1px solid #fff;
	-webkit-transition: background .5 ease;
	-moz-transition: background .5 ease;
	-ms-transition: background .5 ease;
	-o-transition: background .5 ease;
	transition: background .5 ease;
	text-transform: none;
}

#nav ul ul li a i {display: none;}

#nav ul ul li a:hover {background-color: #1b8ca0;}
 
.link-uebersicht {display: none;}

#nav .navresp, .ico-menue {display: none;}

/*  ============================================================================ */
 
 /* Mediaqueries */ 
  
@media screen and (max-width:960px) {
.showquery::before {content: "< 960px ";}	
#wrapper{width: 90%; margin:  0 5%;}
img {max-width: 100%;}
}
  
@media screen and (min-width:760px) {
 #nav ul li:hover ul.sub, #nav ul.sub li:hover ul.sub2 {display: block !important;}
}

@media screen and (max-width:760px) {
.showquery::before {content: "< 760px ";}

/* test für NAV OFF Canvas */	 
#nav {
	position: absolute;
	top: 53px;
	left: -300px;
	z-index: 300;
	background-color: rgba(27, 108, 160, .90);
	padding-top: 20px;
	padding-bottom: 20px;
	width: 250px;
	text-align:left;
}

#nav ul li {display:block; overflow: hidden;} /*!*/

#nav a {color: #fff; padding-left: 5%; width: 90%;}

#nav li:first-child, #nav li:last-child {display: block;}
			 		 	
.ico-menue {
	display: block;
	position: relative;
	top: 0px;
	color: #fff;
	font-weight: 500;
	font-size: 1em; 
	background:url(../images/bg-diagonal.png);
	padding: 5.5px 20px 5.5px 40px; 
}

.ico-menue::before {
	font-family: FontAwesome;
	content: "\f039 ";
	position: absolute;
	left: 0;
	top: -1px;
	padding: 10px 20px 10px 15px; 
}
#nav .navresp {display: block; color:#fff; font-size:0.8em; padding-left:14px; padding-bottom:20px;}
#nav a.gclose {
	font-size: .8em !important;
	margin-bottom: 10px;
	width: auto;
	position: relative;
	padding-left: 40px;
}
#nav a.gclose::before {
	font-family: FontAwesome;
	content: "\f057 ";
	position: absolute;
	left: 15px;
	top: 3px;
	font-size: 1.4em;
}
			 		 	
#nav span.plus {
	display: inline-block;
	position: absolute;
	color: #fff;
	right: -7px;
	top: 4px;
	font-size: 1.3em;
	padding: 0 20px;
	cursor:	pointer;
}
						
#nav ul ul {position: relative;}
#nav ul.sub a {
	width: 80%;
	background: transparent;
	border: none; 
	font-size: 1em;
	padding-left: 15%;
}
#nav ul.sub2{margin-left: 0;}
#nav ul.sub2 a{padding-left: 23%;}
#nav ul.sub2 a::before {content: "- ";}
.link-uebersicht {display: block; font-style: italic;}
.plus2::after {
	font-family: FontAwesome;
	content: "\f107 ";
	float: right;
	padding-right: 10px;
	margin-top: -3px;
	font-size: 1.3em;
}
 }
  
    @media screen and (max-width:700px) {	
    	.showquery::before {
    		content: "< 700px ";
    	}
 		 
    	 #main .row4 img  {
    		width: 100%;
    	}
  
    	.row4 > div, .row4 > div:first-child {
    		width: 47%;
    		margin: 0 1.5% 20px 1.5%;
    	}
    	
    	 
    
    }
  
  @media screen and (max-width:580px) {
  .showquery::before {
  	content: "< 580px ";
  }
    
	   h1 {
	   	font-size: 1.3em;
	   }
   
   
  }
  
  @media screen and (max-width:480px) {
    .showquery::before {
    	content: "< 480px ";
    }
    input, textarea {
    	width: 98%;
    	padding: 1%;
    }
     input[type=submit] {
     	display: block;
     }
    
  }
  
  @media screen and (max-width:400px) {
   .showquery::before {
   	content: "< 400px ";
   }
           		
     
   }
   
   
   @media screen and (max-width:360px) {
          	.showquery::before {
          		content: "< 360px ";
          	}	
      
    }