@font-face {
	font-family: 'icomoon';
	src: url('../fonts/icomoon.eot');
	src: url('.../fonts/icomoon.eot?#iefix') format('embedded-opentype'),
		url('../fonts/icomoon.woff') format('woff'),
		url('../fonts/icomoon.ttf') format('truetype'),
		url('../fonts/icomoon.svg#icomoon') format('svg');
	font-weight: normal;
	font-style: normal;
}

@media screen and (min-width: 900px) {
  div.menubutton { display: none; }
  .navlist {
    
    position:absolute;
	top:12px;
    left:10px;
  }
  .navlist li {
    list-style-type: none; 
    display: inline-block;
    text-transform:uppercase;
   /* transition: all .25s ease;
   transition: all 1s ease-in-out 0s;*/
  }
  .navlist a:link, .navlist a:active, .navlist a:focus, .navlist a:visited {
    display: block;
    height: 100%;
    width: 80%;
    padding: 0 1em 0 1em;
    text-decoration: none;  /* keine Unterstreichung */
    color: gray;  /* Schriftfarbe weiß */
    font-size:0.75rem;
    background:#fff;
     border-bottom:1px solid transparent;

     transition: all ease-in-out 0.5s;

  }
 
  .navlist a:hover,
  .navlist a:focus {
   color:lightgray;
   border-bottom:1px solid lightgray;
  }
  .gedrueckt{
display: block; 
    text-decoration: none;
    background: white;
    color: gray;  /* Schriftfarbe weiß */
    font-size:0.75em;
    padding: 0 1em 0 1em;


border-bottom:1px solid gray;
}
div#kontakt{
display:flex;
	margin:0 auto 0;
	padding:0;
	margin-left:2em;
	margin-right:2em;

}
div#kontakt p{
	margin-bottom:1em;
}
  div.a1, 
div.a2,  
div.a3 {   
    
    flex:1;
  }
  div.a1im{
	width:90%;
}
article.a3{
	float:right;
	margin-right:1%;
}
article img{
	float:left;
	margin:0 1em 0.5em 0;
}
#kontakt a{
	text-decoration:none;
	color:black;
}
/*#### Navigation und Darstellung für die Seite Produkte */
div#navi2{
	display:none;
	width: 100%;	
	margin:0 auto 0;
	text-align:center;
}
div#produktemobile{
	display:none;
}
div#produktpc{
	width:100%;
	height:100%;
}
div#navi2 a{
	color:black;
	font-size:0.75rem;
	text-decoration:none;
	margin:0 1.5em 0 0;
}
div#navi2 a:hover{
	text-decoration:none;
	color:orange;
}
div#navi2 a.li_auto, div#navi2 a.li_elektro, div#navi2 a.li_armatur, div#navi2 a.li_medizin, div#navi2 a.li_hydraulik, div#navi2 a.li_ventil{
	padding-top:3em;
}
div#navi2 a.li_auto{
	background-image:url('../grafiken/auto.svb');
	background-repeat:no-repeat;
	padding-right:1em;
}
div#navi2 a.li_elektro{
	background-image:url('../grafiken/elektro.svg');
	background-repeat:no-repeat;
	background-position:center top;
	line-height:2em;
	height:50px;

}
div#navi2 a.li_armatur{
	background-image:url('../grafiken/armatur.svg');
	background-repeat:no-repeat;
	background-position:center top;
	line-height:2em;
	height:50px;

}
div#navi2 a.li_medizin{
	background-image:url('../grafiken/medical.svg');
	background-repeat:no-repeat;
}
div#navi2 a.li_hydraulik{
	background-image:url('../grafiken/hydraulic.svg');
	background-repeat:no-repeat;
}
div#navi2 a.li_ventil{
	background-image:url('../grafiken/ventil.svg');
	background-repeat:no-repeat;
}
section.produkt{
	min-width:98%;
	margin:1.5em;
	border-bottom:1px lightgray solid;
}
article.produkte1{
	width:15%;
	float:left;
	padding:1.5em 0;
	

}
article.produkte2{
	width:65%;
	float:left;
	

}
article.produkte3{
	width:15%;
	float:left;
	
}
ul.klein{

	list-style:none;
	position:inherit;
}
ul.lightbox li {
  overflow: hidden;
	position: absolute;
 width: 0;
 height: 0;
 opacity: 0;
 top:0;
 left:0;
 background: rgba(0, 0, 0, 0.75);
 -moz-transition: opacity 1.5s;
  -o-transition: opacity 1.5s;
  -webkit-transition: opacity 1.5s;
  transition: opacity 1.5s;
margin:0 auto 0;
}
ul.lightbox li:target {
  width: 100%;
  height: 100%;
 opacity: 1;
}
ul.lightbox li:target a {
  position:absolute;
top: 50%;
 left: 50%;
 margin: -315px 0 0 -415px;
 /*
 border: 15px solid #fff;
 -moz-box-shadow:0 1px 8px #000000;
  -o-box-shadow:0 1px 8px #000000;
  -webkit-box-shadow:0 1px 8px #000000;
  box-shadow:0 1px 8px #000000;
  */
}
div.videonavi{
position:relative;
	width:640px;
	height:2.5em;
	background-color:transparent;
	padding:0 2em 0 0;
	margin:0 auto 0;
	text-align:right;
}
.btclosepr{
position:relative;
	width:20px;
	height:20px;
	z-index:1001;
	margin:1.2em 0 0 0;
}

section#impress{
	margin: 0 25% 0 25%;
	min-width:25em;
}
section#impress h1, section#impress h3, section#impress p{
	font-family:'Alegreya Sans', sans-serif;
}
section#impress p{
	margin-bottom:1em;
	font-size:0.75rem;
	line-height:1.2;
}
  } /* End media */
@media screen and (max-width: 899px) { 

  /* Kopfbereich vorbereiten */ 
  header {
   
    position: relative;
  }
 
  /* Menübutton positionieren */ 
  div.menubutton {
    display: block;
    position: absolute;
    left: 3rem;
    top: 1rem;
    z-index: 10;
  }

  /* Menübutton gestalten */ 
  div.menubutton a {
  font-family:'icomoon', sans-serif;
    display: block; 
    font-size:1em;
    line-height:1;
    color: black;
    background:transparend;
    text-decoration: none;
    padding: -1.5rem 0 0.5rem 0.5rem;
  }

  /* Pfeile nach und nach unten */ 
    
  /* Menübutton ausblenden */ 
  div.menubutton a.hidemenu {
    display:none; 
  }
div.menubutton a.showmenu:before {
	content:"\e906";
}
div.menubutton a.hidemenu:before {
	content:"\ea0d";
}
/* Grundformatierung für den Navigationsbereich */ 
  .navmain {
    padding: 0; 
    margin:  0;
    background: white;
    overflow:visible;

  }
  /* Die Navigationsliste gestalten */ 
  .navlist {
    overflow: hidden; 
     transition: all 1s ease-in-out 0s;
    /*transition: 0.25s; */ 
    list-style-type: none;
    margin: 0;     
    z-index:1201;
  }
  .navilist a{
	width:100%;
}
  .navlist li { 
    display: block; 
    border-bottom: 1px solid #ddd; 
  }
  .navlist li:last-of-type {
    border-bottom: 0;
  }
.gedrueckt{
display: block; 
    text-decoration: none;
    background: white;
    color: #333;
    padding: 1rem; 
border-bottom:1px solid #333;
}
  /* Die Links im Navigationsbereich gestalten */ 
  .navlist a {
    display: block; 
    text-decoration: none;
    background: white;
    color: #333;
    padding: 1rem; 
  }
  .navlist a.active {
    background: #08c;
    color: white;
    text-decoration: none; 
  } 
  /* Navigationsliste ausblenden */ 
  .navlist { max-height: 0;transition: all 1s ease-in-out 0s;
 } 

/* Wenn #menu in der URL steht, die Navigationsliste einblenden */ 
  /* Den Wert für max-height ggf. an die Länge der Navigation anpassen */ 
  #menu:target .navlist { min-height: 100em; }
  
  /* Button mit Pfeil nach unten ausblenden */
  #menu:target a.showmenu { display: none; }
  /* Button mit Pfeil nach oben einblenden */
  #menu:target a.hidemenu { display: block; }
div.a1, 
div.a2,  
div.a3, 
div.a1im
 {   
    flex:0;
    width: 90%;
    margin: 1em;
    padding-bottom:1em;
  }
  
 
article img{
	float:left;
	margin:0 1em 0.5em 0;
}
figcaption h1{
	font-size:1.5em;
	margin-top:-2em;
}
section#impress{
	margin: 0 5% 0 5%;
	min-width:15em;
	

}
section#impress h1, section#impress h3, section#impress p{
	font-family:'Alegreya Sans', sans-serif;
	

}
#impress p{
	margin-bottom:1em;
	
}

} /* Ende MediaQquery */
@media screen and (max-width: 480px) { 
#navmobile{
	visibility:visible;
	width:100%;
	min-height:100%;
	margin:0;
	padding:0;
	overflow:visible;
}
#contbilder{
	visibility:hidden;
	max-height:0;
	width:0;
}
div#navmobile a{
	color:black;
	font-size:1rem;
	text-decoration:none;
	margin:0;
	clear:left;
}
div.a1, 
div.a2,  
div.a3,
div.a1im
{   
    flex:0;
    width: 90%;
    margin: 1em;
    padding-bottom:1em;
  }
  

img.nunt { float: left; margin: 0 1em 1em 1em; }
   .nunth {
   font-family:'Alegreya Sans', sans serif;
font-size:1rem;
font-weight:bold;
clear: left; }

div.spalte2{
	display: table-cell;
    width: auto;
    text-align:left;
    vertical-align:top;
    margin:0;
    padding:0;
}
div.spalte1{
	display: table-cell;
    width: 60px;
}

}/* Ende MediaQquery */