html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	background: transparent;
	border: 0;
	margin: 0;
	padding: 0;
	vertical-align: baseline; 
	}

html, body { 
	height: 100%;
	}
 
#wrapper {
	width: 100%;
	min-height:100%;
	margin: 0 auto; 
	}
  
#main:before{ /*background-image*/
	width:100%;
	height:100%;
	z-index:-10;
	background: url("background4.jpg") no-repeat fixed;
	background-size: cover;
	position:fixed;
	content:"";
	}
	
#main {
	overflow:auto;
	padding-bottom:30px;
	margin-bottom:20px; 
	}
	
#thema, header .containerlogo, header div#logo, header img#schriftweiss, section, section a, header #menu ul,	header #menu, header .hamburger span, table #thema, header img#schriftweiss {
    -webkit-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
	}
	
header #menu ul.active{ /*Black-Box transition, disappearing behind header*/
    -webkit-transition: all 1.5s;
    -o-transition: all 1.5s;
    transition: all 1.5s;
	}
	
	
/*CONTAINERS
_____________________________________________________*/

.container{
	margin: 200px auto 150px auto;
	}

header .containerlogo{
	padding-top:22px;
	z-index:102;
	position:absolute;
	left:5%;
	}

header.smaller .containerlogo{
	padding-top:30px;
	}

.containerlist{
	margin-top:10px;
	margin-left:35px;
	line-height:29px;
	}


.containergoogle{
		margin: 60px auto 0 auto;
	}

.containermail {
	margin-top:40px;
	text-align:center;
	}

.containerpro { /*produktcontainer*/
	max-width:440px; 
	margin: 0 auto;
	}

/* Section, Table & Schriften
_____________________________________________________*/
  
section {
	font-family: "Century Gothic", "sans narrow", "Muli", arial, sans-serif;
	padding: 40px 20%;
	background-size: cover;
}
 
  
section h2, h2 {
	font-family: "Century Gothic", "sans narrow", "Muli", arial, sans-serif;
	font-size:28px;
	font-weight: 700;
	margin-bottom: 10px;
	color:#022B68;
	}

p, #inhalt {
	margin-bottom: 30px;
	font-family: "Century Gothic", "sans narrow", "Muli", arial, sans-serif;
	color:#022B68;
	line-height:27px;
	font-size: 18px;
	}
	
#inhalt{	margin-bottom: 30px;}
	
#inhaltback {
	color:white;	
	line-height:27px;
	font-size: 18px;
	}
		
	
.ablaufliste div {
	border:1px solid #022B68; 
	padding:3px;
	height:80px;
	background-color:rgba(255,255,255,0.5);
	}	
	
table.ablaufliste td#inhalt { /*fixed width*/
	word-wrap:break-word; 
	width:300px; 	
	text-align:center;
	}	

table.ablaufliste { /* fixed width*/
	word-wrap: break-word; 
	table-layout: fixed; 
	width:1000px;
	}
	
table.ablaufliste td#thema {
	width:100px; 
	padding-right: 20px;
	}	
	
#oneline{height:auto;}
	
section p:last-child {
    margin-bottom: 0; 
    }
	
table#adressen {
	padding-top:0px; 
	display:inline-table;
	}


table#adressen td {
	padding-right:15px;
	}
	
#kursiv {
	padding-top:8px;
	font-size:22px;
	font-style:italic;
	color:#022B68;
	}
	
#thema {
	padding-top:30px;
	font-size:18px;
	font-weight:bold;
	color:#022B68;
	}
	  
#themaback {
	padding-top:30px;
	font-size:18px;
	font-weight:bold;
	color: white;
}	  
	  
table #thema, table #themaback {
	width:300px;
	}  

#produktimg {
	width:400px;
	}

#kanalimg {
	max-width:500px;
	}	
	
	
#kanal {
	text-align:center;
	margin:0;
	}
	
.hype {
	-webkit-hyphens: manual;    /* Safari und Chrome */  
	-ms-hyphens: manual;       /* Internet Explorer */  
	hyphens:manual;
	}	
	
span.nope{ /*no word-break for phone numbers*/
	white-space:nowrap;
	}	
	
#projektimg{ /*projekt fotos */
	display:inline-block;
	float:left; 
	padding-right:10px;
	width: 254px;
	min-height:300px;
	}	
	
#projektimgcontainer{ /*projekt fotos snbk: bleibt im Block*/
	width: 1200px;
	}
	
#projektimgcontainer2{ /*projekt fotos kidk: bleibt im Block*/
	width: 1000px;
	}	
	
#gebaeude{
	margin-top:50px;
	padding-top:30px;
	width:100%;
	height:1000px;
	background-image:linear-gradient(to bottom, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.2)50%, rgba(1, 27, 65, 0.0)100%), url("../dateien/gebaeude2.jpg");
	background-size:cover;
	transition: all 0.7s;
	}

#quote {
	font-style: italic; 
	margin-left:25px;
	}	
	
.firsttext{width: 700px;}
	
.firsttext ul#thema {
	line-height:80px;
	}
	
.adresse{
	text-align:center;
	margin: 0 auto 50px;
	}

	  
/* Header
_____________________________________________________*/


header,  header div.header{					/* Blauer Balken */	
	width: 100%;
	height: 140px;
	position: fixed;
	-webkit-transition: height 0.3s;
	-o-transition: height 0.3s;
	transition: height 0.3s; 
	}

header { 
	z-index:998;
	}
  
 header div.header{
	background-color: #022B68;
	z-index:100;
	box-shadow: 0px 1px 10px black;
	}


header div#logo {		/* Logo Border-Bild*/
	background-color:#0159DC;
	border: white solid 3px;
	float:left;
	height: 90px;
	width:90px;
	margin: 0 15px 0 5%;
	z-index:101;
	}

header img#schrift{ /*Logo IPG Schrift rechts*/
	z-index:-100;
	position:absolute;
	height:95px;
	-webkit-transition-property: height, margin-top, opacity;
	-webkit-transition-duration: 0.3s, 0.3s, 1s;
	transition-property: height, margin-top, opacity;
	transition-duration: 0.3s, 0.3s, 1s;
	}
	
header img#schriftweiss{ /*Logo im Logo Border-Bild*/
	position:absolute;
	height:40px; 
	float:right; 
	margin:45px 2px 0 4px;
	}
	  
/* Header-Smaller
_____________________________________________________*/

 header.smaller, header.smaller .header{
    height: 75px;
	}
       
header.smaller div#logo {
	height:60px;
	width:60px;
	border:white solid 2px;
	margin-top:-25px;
	margin-right:5px;
	} 
	
header.smaller img#schrift {
	height: 62px;
	margin-top:-23px;
	}
	
header.smaller img#schriftweiss {
	margin: 30px 0 0 5px;
	height:25px;
	}
	
/*Footer
_____________________________________________________*/


#fixer{
	position:fixed;}

footer {
	background-color:#DCE3E6;
	width:100%;
	height:80px;
	margin: -80px auto 0;
	clear:both;
	position:relative;
	}

footer div.footerstyle {
	color:#5778A9;
	font-family: "Century Gothic" ,"sans narrow", "Muli", arial, sans-serif;
	padding-top:45px;
	text-align:center;
	font-size:12px;
	}

	
 #blackline {	/* graue Zwischenlinie*/
	height:2px;
	background: radial-gradient(ellipse at center, rgba(2,43,104,0.2) 10%,rgba(0,0,0,0) 80%);
	width:100%;
	margin:25px auto 0;
 }




/*********BUTTONS*********************************
**************************************************/

header #menu {
	top:66px;
	margin-right:20px;
	float:right;
	font-size:15px;
	position:relative;
	color:white;
	font-family:arial;
	}
	
	
header.smaller #menu {
	top:6px;
	}
	
header #menu ul {
	list-style-type:none;
	list-style-image:none;
	margin:-10px 0 0px 0;
	padding:0px;
	z-index:-10;
	}

header #menu li.topmenu {
	z-index:900;
	float:left;
	position:relative;
	border-right: 1px solid white;
	}

header #menu li.topmenu:last-child, header #menu li.topmenu:nth-last-child(2){
	border: 0;
	}
	
header  .topmenu a {
	float:right;
	width:140px;
	}

header  .topmenu ul {
	position:absolute;
	height:0px;
	overflow:hidden;
	}

	
	header .topmenu a, .submenu a {
	padding:15px 2px ;
	color:white;
	font-weight:bold;
	text-decoration:none;
	background-color:transparent;
	margin:0;  
	text-align: center;
	display:inline;
	}

header .submenu a {
	top:72px;
	font-size:15px;
	width:140px;
	position:relative;
	clear:both;
	background:#303030;
	}
	
header.smaller .submenu a {
	top:67px;}	
	
header .subshadow{
	box-shadow: inset 0px 7px 10px -5px black;
	}

header  .topmenu a:hover {
	background-color: #0159DC;
	transition:0.7s;
	}


header  .topmenu:hover ul { /*länge der Submenüs*/
	display:inline-block;  
	position:absolute;
	height: 317px;
	}

#facebook{
	width:28px; 
	padding: 9px;
}	
	
	
section a {
	text-align:left;
	position:relative;
	font-family: "Century Gothic" ,"sans narrow", "Muli", arial, sans-serif;
	text-decoration:none;
	color:#4D77B5;
}

/*HOME BUTTONS
_____________________________________________________________________________*/

a.home { /*Bilder Buttons*/
	display:inline-block;
	width: 300px;
	height: 240px;
	background-size: 300px 210px;
	background-color: #303030;
	background-repeat:no-repeat;
	background-position: center bottom;
	margin:25px 10px;
	padding-top:10px;
	color:white;
	font-size:19px;
	font-weight:bold;
	text-decoration:none;
	text-align: center;
	font-family: "Century Gothic" ,"sans narrow", "Muli", arial, sans-serif;
	}
	
	
a.diverses {margin:25px 20px 0 0;} /*4er-Spalten Buttons haben links keine Lücke wie auf der Seite home.php*/
	

/*home.php, diverses.php, firma.php*/
a.home:hover {background-color:black;}
	
	.links {background-image: url("../dateien/buttons/links3.jpg");}
	.links:hover {background-image: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)), url("../dateien/buttons/links3.jpg");}
	.of {background-image: url("../dateien/buttons/of3.jpg");}
	.of:hover {background-image: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)), url("../dateien/buttons/of3.jpg");}
	.ref {background-image:url("../dateien/buttons/referenzprojekt3.jpg");}
	.ref:hover {background-image: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)), url("../dateien/buttons/referenzprojekt3.jpg");}
	.fragen {background-image:url("../dateien/buttons/fragen.jpg");}
	.fragen:hover {background-image: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)), url("../dateien/buttons/fragen.jpg");}
	
	.weiterbildung {background-image: url("../dateien/buttons/weiterbildung.jpg");}
	.weiterbildung:hover {background-image: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)), url("../dateien/buttons/weiterbildung.jpg");}
	.cas {background-image: url("../dateien/buttons/bfh.jpg");}
	.cas:hover {background-image: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)), url("../dateien/buttons/bfh.jpg");}
	.publikationen {background-image: url("../dateien/buttons/publikationen2.jpg");}
	.publikationen:hover {background-image: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)), url("../dateien/buttons/publikationen2.jpg");}
	.link {background-image: url("../dateien/buttons/gebäude.jpg");}
	.link:hover {background-image: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)), url("../dateien/buttons/gebäude.jpg");}
	.anlass {background-image: url("../dateien/buttons/anlass2.jpg");}
	.anlass:hover {background-image: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)), url("../dateien/buttons/anlass2.jpg");}
	.kurioses {background-image: url("../dateien/kurioses/ratte_bild.jpg");}
	.kurioses:hover {background-image: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)), url("../dateien/kurioses/ratte_bild.jpg");}
	.info {background-image: url("../dateien/buttons/info.jpg");}
	.info:hover {background-image: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)), url("../dateien/buttons/info.jpg");}
	.mitarbeiter {background-image: url("../dateien/buttons/mitarbeiter2.jpg");}
	.mitarbeiter:hover {background-image: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)), url("../dateien/buttons/mitarbeiter2.jpg");}
	
/*anlaesse.php*/
	.kana {background-image: url("../dateien/buttons/kanalisationsforum.jpg");}
	.kana:hover {background-image: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)), url("../dateien/buttons/kanalisationsforum.jpg");}
	.jubilaeum {background-image: url("../dateien/buttons/ipg_logo.jpg");}
	.jubilaeum:hover {background-image: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)), url("../dateien/buttons/ipg_logo.jpg");}

	
/*firma.php*/
	.prod {background-image: url("../dateien/produkte/produkt2.jpg");}
	.prod:hover {background-image: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)), url("../dateien/produkte/produkt2.jpg");}
	.dienst {background-image: url("../dateien/buttons/dienstleistungen2.jpg");}
	.dienst:hover {background-image: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)), url("../dateien/buttons/dienstleistungen2.jpg");}	
	
/*weiterbildung.php*/
	.vsa {background-image: url("../dateien/buttons/vsa.jpg");}
	.vsa:hover {background-image: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)), url("../dateien/buttons/vsa.jpg");}
	
	.vss {background-image: url("../dateien/buttons/vss2.jpg");}
	.vss:hover {background-image: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)), url("../dateien/buttons/vss2.jpg");}
	
	.bauundwissen {background-image: url("../dateien/buttons/bauundwissen.jpg");}
	.bauundwissen:hover {background-image: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)), url("../dateien/buttons/bauundwissen.jpg");}
	
	
/*projekte.php*/
	.upd {background-image: url("../dateien/buttons/ueberlaufreservoir2.jpg");}
	.upd:hover {background-image: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)), url("../dateien/buttons/ueberlaufreservoir2.jpg");}
	
	.alkeren {background-image: url("../dateien/buttons/umgebung_pw2.jpg");}
	.alkeren:hover {background-image: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)), url("../dateien/buttons/umgebung_pw2.jpg");}
	
	.kirchstrasse {background-image: url("../dateien/buttons/kirchstr2.jpg");}
	.kirchstrasse:hover {background-image: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)), url("../dateien/buttons/kirchstr2.jpg");}
	
	.worben {background-image: url("../dateien/buttons/worben2.jpg");}
	.worben:hover {background-image: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)), url("../dateien/buttons/worben2.jpg");}
	
	.zpa {background-image: url("../dateien/buttons/zpa.jpg");}
	.zpa:hover {background-image: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)), url("../dateien/buttons/zpa.jpg");}
	
	.oberburgstr {background-image: url("../dateien/buttons/oberburgstr.jpg");}
	.oberburgstr:hover {background-image: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)), url("../dateien/buttons/oberburgstr.jpg");}
	
	.schulen {background-image: url("../dateien/buttons/schule1.jpg");}
	.schulen:hover {background-image: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)), url("../dateien/buttons/schule1.jpg");}
	
	.kehrsatz {background-image: url("../dateien/buttons/kehrsatz2.jpg");}
	.kehrsatz:hover {background-image: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)), url("../dateien/buttons/kehrsatz2.jpg");}
	
	.freibad {background-image: url("../dateien/freibad.jpg");}
	.freibad:hover {background-image: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)), url("../dateien/freibad.jpg");}
	
	.guemligenweg {background-image: url("../dateien/buttons/bach2.jpg");}
	.guemligenweg:hover {background-image: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)), url("../dateien/buttons/bach2.jpg");}
	
	.dampfzentrale {background-image: url("../dateien/buttons/dampfzentrale2.jpg");}
	.dampfzentrale:hover {background-image: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)), url("../dateien/buttons/dampfzentrale2.jpg");}
	
	.rag {background-image: url("../dateien/buttons/regen2.jpg");}
	.rag:hover {background-image: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)), url("../dateien/buttons/regen2.jpg");}
	
	.kidk {background-image: url("../dateien/buttons/kidk2.jpg");}
	.kidk:hover {background-image: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)), url("../dateien/buttons/kidk2.jpg");}	
	
	.schule {background-image: url("../dateien/buttons/schulhaus2.jpg");}
	.schule:hover {background-image: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)), url("../dateien/buttons/schulhaus2.jpg");}	
	
	.daelhoelzli {background-image: url("../dateien/.jpg");}
	.daelhoelzli:hover {background-image: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)), url("../dateien/.jpg");}	
	
	
	
	
	
	
	.twobuttons, .threebuttons, .fourbuttons { /*Buttons werden zentriert*/
		margin: 0 auto;
	}
	
	.twobuttons {/* 2er-Spalten Buttons. Vorlage unter anlaesse.php. Verwendet in: */
		max-width: 648px;
		}
	
	.threebuttons { /*3er-Spalten Buttons. Vorlage unter home.php.*/
		max-width: 970px;
	}
	
	.fourbuttons { /*4er-Spalten Buttons. Vorlage unter diverses.php. Verwendet in: firma.php*/
		max-width:1300px;
		min-width:1300px;
	}

	.anlaessediv{	/*buttons bei anlaesse mit den gleichen Einstellungen wie projektimg, damit beim Verschieben die Buttons und Texte nicht auseinander fallen*/
		display:inline-block;
	}

	.firmabuttons {margin: 0 auto; max-width:300px;}


/* BIG BUTTONS
____________________________________________________________________________*/
a.button_b5 {
	font-size:18px;
	max-width:600px;
	padding: 5px 30px 5px 37px;
	min-height:40px;
	background-color: #011F4C;
	margin:30px -2px; 
	color:white;
	border:none;
	display:flex; /*block*/
	align-items: center;
	}


a.button_b5:hover, p a.button_b6:hover{background-color:#0159DC;}
	
div.button_b5 {margin: 15px -32px;}
	
ul li a.button_b5 { /*Liste/Buttons Referenzprojekte */
	margin-left:-37px; 
	margin-bottom:3px; 
	}
	
#white {background-color: white;color:#022B68;} /*Buttons bei Weitere Informationen über:*/


/*SMALL BUTTONS
____________________________________________________________________________*/
.button_b6#forum { /*Buttons für im Kanalisationsforum*/
	width:220px; 
	margin:-5px -32px; 
	text-align:center;
	}

	
p a.button_b6 {
	color:white;
	width:150px;
	padding: 0 30px;
	height:30px;
	margin:0px 0px; /*Zeilenabstand zwischen den Buttons*/
	background-color: #011F4C;
	border:none;
	display:inline-block;
	}	
	


ul.containerlist li p {
	font-style:italic;
	font-size:15px;
}
	

/*DropDownMenu Referenzprojekte
____________________________________________________________________________*/

.theInsides {
	border-left: 1px solid #022B68; 
	padding: 10px 0 0 50px;
	max-height: 0;
	overflow: hidden;
	transition: 0.6s ease-in-out;
	opacity: 0;
	margin:-20px 0 20px 0;
	}

div.theInsides.dropping {
	opacity: 1;
   max-height: 9000px; }


/*BACKTRACK PATH BUTTONS 
____________________________________________________________________________*/

.path {
	font-size:15px; 
	opacity:0.7; 
	bottom:70px;
	z-index: 99;
	white-space:nowrap;
	text-align:left;
	position:relative;
	font-family: "Century Gothic" ,"sans narrow", "Muli", arial, sans-serif;
	text-decoration:none;
	color:#4D77B5;
		padding-top: 40px;
	}

.path:hover {
	color:black; 
	opacity:1;}

	
	
	
	
/*MAIL STYLE__________________________________________________________________*/
	
	
	#form_wrap.hide:after, #form_wrap.hide:before {display:none; }

	form, input[type=text], textarea{
		/*-moz-border-radius: 5px; 
		-webkit-border-radius: 5px;
		border-radius: 5px;
		border: 1px solid #fff;	*/
		}
		
	form { /*Design Kontaktformular*/
		position:relative;
		overflow:visible;
		max-width:400px;
		height: 200px;
		padding:20px; 
		margin:20px auto;
		-moz-box-shadow: inset 15px 15px 190px 20px #E6E9EC;
		-webkit-box-shadow: inset 15px 15px 190px 20px #E6E9EC;
		box-shadow:inset 15px 15px 190px 20px #E6E9EC;
-webkit-appearance: none;
			}
			
			
	input[type=text], textarea { /*Nachrichten Boxen mit der Nachrichtenbox*/
		resize:vertical;
		font-size:15px;
		background:white;
		width: 100%;
		padding:0 5px 0 5px;
		min-height:36px; 
		display:block;
		box-sizing: border-box;
		border:solid lightgrey 1px;;
		}	
			
			
	p#kontaktform, label, input[type=text], textarea  {	
		font-family:   "Century Gothic" ,"sans narrow", "Muli", arial, sans-serif;
		color: #022B68

		}
		
		
	p#kontaktform{
		font-size: 28px; 
		}
		
	#form_wrap form {height:auto;} /*Höhe des Kontaktforumlars*/
		
		label { /*Textfeld Titel*/
			margin-top: 7px; 
			font-size: 15px; 
			text-shadow: 0px 1px 0px #fff;
			}

	

		textarea { /*Nachrichten Box*/
			height: 120px; 
			padding-top:14px;
			}

		textarea:focus, input[type=text]:focus { /*Bearbeitungsfeld*/
			background:rgba(164,179,193,0.4);
			}

		#form_wrap input[type=submit] { /*Submit Button */
			position:relative;
			font-size:22px; 
			color: #022B68;
			/*box-shadow: 0px 0px 5px #243F66;*/
			border: solid lightgrey 1px;
			width:100%; 
			text-align:center;
			background:white;
			cursor: help;

			font-family:   "Century Gothic" ,"sans narrow", "Muli", arial, sans-serif;
			}

			#form_wrap input:hover[type=submit] {
			box-shadow: 0px 0px 5px #243F66;
			}
	

	
	
	
	
/**************************************************************************************
***************************************************************************************
**************************MEDIA QUERIES*************************************************/


@media screen and (max-width: 1300px) {
	
	header #menu {
		position:relative;
		display:inline-block;
		margin:0;
		padding:0;
		}
		
	header.smaller #menu {top:10px;}
		
	header #menu ul { /*box below*/
		width:140px;
		height:auto;
		position:absolute;
		top:84px;
		background:#303030;
		right:0;
		line-height:20px;
		opacity:1;
		-webkit-transition-property: opacity, transform, right;
		-webkit-transition-duration: 1.5s, 0.7s, 0.3s;
		transition-property: opacity, transform, right;
		transition-duration:1.5s, 0.7s, 0.3s;
		z-index:-10;
		}
		
	header #menu li.topmenu {border:0;}
	
	header.smaller #menu ul {top:75px;}	
	
	header #menu ul.active { /*Hides the box*/
		-webkit-transform: translateY(-800px);
		-ms-transform: translateY(-800px);
		transform: translateY(-800px);
		opacity: 0;
		z-index:-10;
		position:absolute;
		}
		
	header  .topmenu a { /*text in the box*/
		display:block;
		text-align: center;
		}
		
	header .topmenu:hover ul, header .submenu, header .submenu a {display:none;  /*Hides the submenu*/}
		
	header .hamburger {
		z-index:101;
		width:60px;
		height:55px;
		text-decoration:none;
		padding:0;
		display:block;
		border:none;
		margin-right:20px;
		border-radius:5px;
		background:transparent;
		text-shadow:0px 1px 0px rgba(0,0,0,0.5);
		color:#777;
		text-indent: -9999px;
		font-size:0px;
		-webkit-transition: background 2.0s;
		transition: background 2.0s;
		cursor: pointer;
		position:relative;
		}
		
	header.smaller .hamburger {
		background: transparent;
		-webkit-transition: background 0.5s;
		transition: background 0.5s;
		}	
		
	header .hamburger span { /*line in the middle*/
		display: block;
		position: absolute;
		top: 28px;
		left: 14px; /*changes length on the left side*/
		right: 13px; /*changes length on the right side*/
		height: 4px;
		background: white; /*#5778A9;	*/ 
		z-index:1000;
		}
		
	header.smaller .hamburger span, header.smaller .hamburger span:before, header.smaller .hamburger span:after {background:white;}	
		
	header.smaller .hamburger.active span,  .hamburger.active span {background:transparent;/*middle line disappears after click*/}	
		
	.hamburger a, .hamburger:hover {text-decoration:none;}
		
	.hamburger span:before, .hamburger span:after { /*Line above and below*/
		position: absolute;
		display: block;
		left: 0;
		width: 100%;
		height: 4px;
		background-color: white; /*#5778A9;*/
		content: "";
		-webkit-transition-duration: 0.3, 0.3s;
		-webkit-transition-delay: 0.3s, 0s;
		transition-duration: 0.3s, 0.3s;
		transition-delay: 0.3s, 0s;
		z-index:1000;
		}
		
	.hamburger span:before { /*Line above*/
		top: -10px;
		-webkit-transition-property: top, transform;
		transition-property: top, transform;
		}

	.hamburger span:after { /*Line below*/
		bottom: -10px;
		-webkit-transition-property: bottom, transform;
		transition-property: bottom, transform;
		}
		
	/*.hamburger:hover {color:#66a992; ???? onclick}*/
		
	.hamburger.active:hover , header.smaller .hamburger:hover, .hamburger:hover {background-color: #123B78;}
	
		
	.hamburger.active span:before { /*X*/
		top:0;
		-webkit-transform: rotate(45deg);
		-ms-transform: rotate(45deg);
		transform: rotate(45deg);
		-webkit-transition-delay: 0s, 0.3s;
		transition-delay: 0s, 0.3s;
		}
		
	.hamburger.active span:after {
		bottom: 0;
		-webkit-transform: rotate(-45deg);
		-ms-transform: rotate(-45deg);
		transform: rotate(-45deg);
		-webkit-transition-delay: 0s, 0.3s;
		transition-delay: 0s, 0.3s;
		}
		
	#facebook {
		width:140px; 	
		padding: 9px 0 9px 0;
		}
		
	section {
		padding: 40px 10%;
	}	
		
		
	#produkte {width:65%;}
		
	#projektimgcontainer {width: 600px;/*projekt fotos snbk: bleibt im Block*/}
		
	/*.containergoogle{ google centered
		float:none;
		margin: 60px auto 0;
		}*/


	#gebaeude {
		padding-top:10px;
		height:700px;
		}
		
	.fourbuttons{ /*wechselt zur 2-er Zeile*/
	max-width:644px;
			min-width:0px;
	}
	
	
}


@media screen and (max-width:1080px){ /*Table fixer*/
	
	header div.header { 
		-background-color:darkgreen;
		}
	
	/*a.home {margin:20px 12px;}*/

	#projektimgcontainer2 {width: 600px; /*projekt fotos kidk: bleibt im Block*/}
	
	#gebaeude{padding-top:0px;}
	
	.threebuttons, .fourbuttons, .twobuttons{max-width: 656px;}
	
	.ablaufliste, #clean{display:none;}
}



@media screen and (max-width:900px) {
	
	header div.header { 
		-background-color:darkred;
		}
	
	img#info {width:90%;	 /*picture adjustes itself to window-size*/}
	
	table #thema, table #themaback {width:200px;}
		
}
	
@media screen and (max-width:750px)	{
	
	header div.header { 
		-background-color:blue;
		position:absolute;
		height:80px;
		}	
		
	header,  header div.header{					/* Blauer Balken */	
	height: 80px;

	}
	
	header.smaller, header.smaller div.header {height: 43px;}
	
	header img#schrift {
		margin-top:1px;
		height: 60px;
		z-index:-900;
		}
	
	header div#logo {		/* Logo Border*/
		height: 55px;
		width:55px;
		}
	  
	header img#schriftweiss {
		height:23px; 
		float:right; 
		margin:29px 1px 0 3px;
		}
		
	header .containerlogo {padding-top:10px;}
	
	header.smaller .containerlogo {
	padding-top:30px;
	}
	
	header.smaller div#logo {
	height:30px;
	width:30px;
	} 
	
header.smaller img#schrift {
	height: 30px;
	}
	
header.smaller img#schriftweiss {
	margin: 17px 0 0 2px;
	height:12px;
	}
	
	header .hamburger {
	margin-right:10px;
	margin-top:10px;}
	
	header.smaller .hamburger {
		height:35px;
		margin-top: 0;
		}	
	
	header.smaller .hamburger span {top:20px;}
	
	header.smaller #menu {top:0px;}

	header #menu {top:15px; font-size:13px;}

	 header #menu ul { /*box below*/
		top:75px;  
		z-index:99;
		}
	 
	header.smaller #menu ul {top:50px; /*provisorisch, dass die box nicht nach oben springt, wenn gescrollt wird*/}

		section {
		padding: 15px 10%;
	}	
	
	.hamburger.active:hover , .hamburger:hover, header.smaller .hamburger:hover {background-color: transparent;}
	
	.containergoogle {display:none;}
			
	#produktimg, #kanalimg{width:90%;}
		
	#projektimgcontainer {width: 300px; /*projekt fotos snbk: bleibt im Block*/}

	.container {margin-top: 150px;}
	
	#main:before {	
	background-attachment:scroll;
	}

	
	table, th, td, tr, table#adressen {display:block; /*force tables to not behave like tables anymore */}
				
	tr {margin-bottom:15px;/*margin for the table, that's not a table anymore*/}
		
	td#thema, #themaback {margin-bottom: 20px;/*margin for the table, that's not a table anymore*/}
	
	table #themaback {width:90%;}
	
		
	a.home {
		width: 400px;
		height: 120px;
		background-size: 400px 290px;
		margin:20px 0;
		}
		
	#ofimg {background-size: 400px 197px;}


	
	.links {background-image: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), url("../dateien/buttons/links3s.jpg");}
	.links:hover {background-image: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)), url("../dateien/buttons/links3s.jpg");}
	.of{background-image: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), url("../dateien/buttons/of3s.jpg");}
	.of:hover {background-image: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)), url("../dateien/buttons/of3s.jpg");}
	.ref{background-image: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), url("../dateien/buttons/referenzprojekt3.jpg");}
	.weiterbildung {background-image: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), url("../dateien/buttons/weiterbildung.jpg");}
	
	.dienst{background-image: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), url("../dateien//buttons/dienstleistungen2.jpg");}
	.cas{background-image: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), url("../dateien//buttons/bfh.jpg");}
	.publikationen{background-image: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), url("../dateien/buttons/publikationen2.jpg");}
	.link {background-image: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), url("../dateien/buttons/gebäude.jpg");}
	.kana {background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url("../dateien/buttons/forum.jpg");}
	.kana:hover {background-image: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)), url("../dateien/buttons/forum.jpg");}
	.jubilaeum {background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url("../dateien/buttons/ipg_logo.jpg");}
	.info {background-image: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.5)), url("../dateien/buttons/info.jpg");}
	.bauundwissen{background-image: linear-gradient(rgba(0,0,0,0.6 ), rgba(0,0,0,0.6)), url("../dateien/buttons/bauundwissen3s.jpg");}
	.bauundwissen:hover {background-image: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)), url("../dateien/buttons/bauundwissen3s.jpg");}
	
	.vss {background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url("../dateien/buttons/vss2s.jpg");}
	.vsa {background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url("../dateien/buttons/vsa3s.jpg");}
	.vsa:hover {background-image: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)), url("../dateien/buttons/vsa3s.jpg");}
	.anlass {background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url("../dateien/buttons/anlass2.jpg");}
	.link {background-image: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), url("../dateien/buttons/gebäude.jpg");}
	.kurioses {background-image: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), url("../dateien/kurioses/ratte_bild.jpg");}
	.mitarbeiter {background-image: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), url("../dateien/buttons/mitarbeiter2.jpg");}

	.oberburgstr {background-image: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), url("../dateien/buttons/oberburgstr.jpg");}
	.upd {background-image: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), url("../dateien/buttons/ueberlaufreservoir2.jpg");}
	.alkeren {background-image: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), url("../dateien/buttons/umgebung_pw2.jpg");}
	.kirchstrasse {background-image: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), url("../dateien/buttons/kirchstr2.jpg");}
	.worben {background-image: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), url("../dateien/buttons/worben2.jpg");}
	.zpa {background-image: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), url("../dateien/buttons/zpa.jpg");}
	.schulen {background-image: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), url("../dateien/buttons/schule1.jpg");}
	.kehrsatz {background-image: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), url("../dateien/buttons/kehrsatz2.jpg");}
	.freibad {background-image: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), url("../dateien/freibad.jpg");}
	.guemligenweg {background-image: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), url("../dateien/buttons/bach2.jpg");}
	.dampfzentrale {background-image: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), url("../dateien/buttons/dampfzentrale2.jpg");}
	.rag {background-image: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), url("../dateien/buttons/regen2.jpg");}
	.kidk {background-image: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), url("../dateien/buttons/kidk2.jpg");}	
	.schule {background-image: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), url("../dateien/buttons/schulhaus2.jpg");}
	.fragen {background-image: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), url("../dateien/buttons/fragen.jpg");}
	
	a.links, a.ref, a.kana, a.prod, a.bauundwissen, a.vsa, a.vss, a.kirchstrasse, a.kidk, a.anlass, a.kurioses,  a.mitarbeiter {background-position:center;}
	a.leist, a.cas, a.alkeren, a.kehrsatz, a.freibad, a.dampfzentrale, a.rag, a.schule, a.weiterbildung, a.fragen {background-position:top;}
	
	
	#quote {
	margin-left:0;
	}		
	
	.threebuttons, .fourbuttons, .twobuttons {max-width: 400px;}

		
		
}



@media screen and (max-width: 560px) { /*Schrift Logo verschwindet, Kontaktformular wird abgeschnitten*/
		
	header div.header { 
		-background-color:pink;
		}

	.containerkontakt {overflow:visible;}		
		
	img#produktimg {width:90%;}
		
	#projektimgcontainer2 {width:300px;/*projekt fotos kidk: bleibt im Block*/}

	#projektimg {
		min-height: auto; 
		margin-bottom: 15px;
		}
		
}	



@media screen and (max-width:525px){ 
	
	header div.header { 
		-background-color:red;
		}
	
	table #thema {padding-right:50px;}
	
}


@media screen and (max-width:400px) { /*Mobile version*/

	header div.header { 
		-background-color:green;
		}
	
	header img#schrift {
		margin-top:10px;
		height: 50px;
		}

	header div#logo {		/* Logo Border-Bild*/
		-height: 90px;
		-width:90px;
		margin: 0 5px 0 1%;
		}

		
	.button_b4#forum {margin-top:-5px; /*Buttons für im Kanalisationsforum*/}
	
	/* a.home {
		width: 100%;
		background-size: 100% auto; Buttons für im Kanalisationsforum
		} */
		
		a.home {
			width: 100%;
			background-size: 100% auto;
		}
	
	.anlaessediv{
		width:100%;
	}
		
	.threebuttons, .fourbuttons, .twobuttons {max-width: none;}

	
	.theInsides {
	padding: 0 0 0 20px;
	
	
}