@charset "UTF-8";

*, *:before, *:after {
  box-sizing: border-box;
}

*
{ 
 	margin: 0px; 
	padding: 0px; 
}
@font-face{
	font-family:"DIN W01 Regular";
	src:url("../Fonts/5591097/6ceed230-b2b3-4422-b048-4aa11687430a.woff2") format("woff2"),url("../Fonts/5591097/80b0143f-6f0d-4dce-aafd-f3c81b85d177.woff") format("woff");
}
@font-face{
	font-family:"DIN W01 Bold";
	src:url("../Fonts/5591154/55fa1cf8-baf8-4bf8-9718-b096b1dd231f.woff2") format("woff2"),url("../Fonts/5591154/4cadc2f9-fb32-4b99-b1f2-9ce6d68afbd5.woff") format("woff");
}
	
header, nav, footer, aside, section {
    display: block;
}

html, body
{
	color:black;
	font-family: DIN W01 Regular;
	font-size:16px;
	height:100%;
	width:100%;

}

h1
{
	font-size:1.68rem;
	font-family:"DIN W01 Bold";
	line-height: 120%;
}	

h2
{
	font-size:1.1rem;
	font-family:"DIN W01 Bold";
	line-height: 120%;
}	

h3
{	
	font-size:1rem;
	font-family:"DIN W01 Bold";
	line-height: 120%;
}

h4
{	
	font-size:1rem;
	font-family:"DIN W01 Bold";
	display: inline;
	line-height: 120%;
}

h6 {
    font-size: 1.1rem;
    font-weight: normal;
}

a {
  text-decoration:none;
  color:#04489B;
}

li {
	list-style-type:none;
}

img {
  border: 0px;
}

div#Header
  {
    width:100%;
	display:flex;
	flex-direction:column;
	align-items:center;
	background: 
		url(../images/blueFrame.png) repeat,
		url(../images/header.png) repeat;
	padding-bottom: 25px;	
		
  }

div#HeaderTop
  {
	background-color:white;
	width:100%;
	display:flex;
	flex-direction:column;
	align-items:center;
  }
  
div#HeaderSeitenMenu
  {
	height:50px;
	width:100%;
	display:block;
  }

div#HeaderGalerieStandard
  {
	display:none;
  } 

div.SeitenMenu
  {
	margin:10px;
	float:right;
	font-size:1.1rem;
	display:none;
  }  

div#SprachMenu
  {
	margin:10px;
	float:right;
	font-size:1.1rem;
	display:block;
  }  
  
div.Logo
  {
	width: calc(100% - 100px);
    height: 50px;
    margin: 0px 25px 0px 25px;
    background: url(../images/Logo_Metallbau_Herren.svg) no-repeat;
    background-size: contain;
    background-position-x: left;
    background-position-y: top;
  }    

div.Logo a
  {
	width: 100%;
	height:100%;
	display:block;
	position:relative;
  }   
  
div#HeaderProduktMenu
  {
	width:100%;
	padding-top:25px;
	display:flex
  }

div#ProduktMenuWrapper
  {
	display:none;
  } 

div.ProduktMenu
  {
	padding-left:20px;
	padding-right:20px;
	z-index:6;
	width:250px;
	height:60px;
	top:106px;
  } 

div.ProduktMenu a
  {
	color:white;
  }   

div.ProduktMenu:hover
  {
	background-color:black;
	height:60px;
  }     
  
div#ProduktMenu1
  {
	left:0px;
	position:absolute;
  }    
  
div#ProduktMenu2
  {
	left:200px;	
	position:absolute;
  }    

div#ProduktMenu3
  {
	left:400px;
	position:absolute;
  }    
  
div#ProduktMenu4
  {
	left:600px;
	position:absolute;
  }    
  
div#ProduktMenu5
  {
	position:absolute;
	left:800px;	
  }    
  
div#ProduktMenu6
  {
	left:1000px;
	position:absolute;
  }    

div.ProduktSubMenu
  {
	z-index:7;	
	top:60px;
	height:550px;
  }  
  
div#Produktsubmenu1
  {
	left:0px;
	display:none;
	position:absolute;
  }  

div#Produktsubmenu2
  {
	left:0px;
	display:none;
	position:absolute;
  } 
div#Produktsubmenu3
  {
	left:0px;
	display:none;
	position:absolute;
  } 
div#Produktsubmenu4
  {
	left:0px;
	display:none;
	position:absolute;
  } 
div#Produktsubmenu5
  {
	left:45px;
	display:none;
	position:absolute;
  } 
div#Produktsubmenu6
  {
	left:45px;
	display:none;
	position:absolute;
  }   
  
div.SubmenuLink
  {
	color:white;
	font-weight: bold;
	text-align:center;
	padding-top:10px;
	padding-left:50px;
	padding-right:50px;
	height:50px;
	white-space:nowrap;
  }    

div.SubmenuLink:hover
  {
	background-color:black;
  }    

div.SubmenuLink a
  {
	color:white;
  }   
  
div#ProduktMenu1:hover div#Produktsubmenu1
  {
	display:block;
	height:520px;
	background: url(../images/blueFrame.png);
  }   
div#ProduktMenu2:hover div#Produktsubmenu2
  {
	display:block;
	height:520px;
	background: url(../images/blueFrame.png);
  } 
div#ProduktMenu3:hover div#Produktsubmenu3
  {
	display:block;
	height:520px;
	background: url(../images/blueFrame.png);
  } 
div#ProduktMenu4:hover div#Produktsubmenu4
  {
	display:block;
	height:520px;
	background: url(../images/blueFrame.png);
  } 
div#ProduktMenu5:hover div#Produktsubmenu5
  {
	display:block;
	height:520px;
	background: url(../images/blueFrame.png);
  } 
div#ProduktMenu6:hover div#Produktsubmenu6
  {
	display:block;
	height:520px;
	background: url(../images/blueFrame.png);
  }   


div#HeaderSeitenMenu
  {
	background-color:white;
	width:100%;
	float:right;
	display:table;
  }

div#HeaderSlider
  {
	width:100%;
	display:flex;
	flex-direction:column;
	align-items:center;
	z-index:1;
  }

div.HeaderImageWrapper
  {
	z-index:1;
	height:500px;
	width:888px;
	position:relative;
  }   
 
div.HeaderImage
  {
	height:500px;
	width:888px;
	border-width:0px;
	font-size:0px;
	z-index:1;
  } 

  
  
div.HeaderImageSplitter
  {
	height:500px;
	width:25px;
	border-width:0px;
	z-index:1;
  }  
  
div.HeaderImage img
  {
	position:absolute;
	height:500px;
	width:895px;
	border-width:0px;
	margin:0px;
	z-index:1;
  } 

div.HeaderImageWrapper span
  {
	position:absolute;
	height:500px;
	width:895px;
	border-width:0px;
	margin:0px;
	text-align:center;
	vertical-align:middle;
	color:white;
	font-size:1.68rem;
	top:0px;
	padding-top:200px;
  } 

div.Info
  {
	  display:block;
	  width:100%;
	  padding-top:25px;
	  padding-bottom:25px;
  }   

div.Info span
  {
	display:inline-block;
	float:left;
	width:40px;
	height:40px;  
	background-image: url("../images/Hinweisfinger.svg");
	background-repeat: no-repeat;
	background-size: contain;	
    background-color: white;
}

div.Info span:hover
  {
     background-color: #E7EBF4;
}
       
  
div.InfoIcon
  {
	  float:left;
	  width:100px;
	  height:100px;
	  background-color:white;
  }  
 
div.InfoText
  {
	  width: calc(100% - 40px);
	  float:left;
	  padding-left:25px;
	  padding-right:25px;
  }       

div.ArticleMain1
  {
    width:100%;
	background-color:white;
	display:flex;
	flex-direction:column;
	align-items:center;
  }
 
  
div.ArticleMain2
  {
    width:100%;
	background-color:#E7EBF4;
	display:flex;
	flex-direction:column;
	align-items:center;
	padding-left:25px;
	padding-right:25px;
  }

div.ArticleContent
  {
    width:100%;
	margin-top:25px;
	margin-bottom: 25px;
	padding:0px 25px 0px 25px;
  }

div.ArticleContent h1
  {
	  color:#124A97;
  }    

div.ArticleContent hr
  {
	color:black;
	margin-top:5px;
	margin-bottom:10px;
	border: none;
	height: 3px;
	background-color: #124A97; /* Modern Browsers */
  }    
  
div.ArticleContent p
  {
	  color:black;
  }      

div.Produkte
  {
	display: flex;
    display: -ms-flexbox;
    flex-flow: row wrap;
    -ms-flex-wrap: row-wrap;
    justify-content: space-around;
    -ms-flex-pack: justify;
    align-content: flex-start;
    -ms-flex-line-pack: start;
  }
  
div.Produktgruppe
  {
	float:left;
    width:350px;
	display:flex;
	flex-direction:column;
	align-items:center;
	padding-top:50px;
	padding-bottom:50px;
	padding-left:15px;
	padding-right:15px;
  }

div.ProduktgruppeTop
  {
	float:left;
    width:100%;
	display:flex;
	flex-direction:column;
	align-items:center;    
	margin-bottom: 10px;
	min-height:320px
  }

div.Produktgruppe h1
  {
	  margin-top:10px;
	  color:#124A97;
	  text-align: center;
  }    

div.Produktgruppe p
  {
	  color:black;
	  text-align:center;
  }      

div.ProduktgruppeButton
  {
	color:white;
	height:40px;
	background-color:#124A97;
	text-align:center;
	margin:5px;
	width:100%;
	max-width: 150px;
	padding-top: 5px;
  }  
  
div.ProduktgruppeButton a
  {
	color:white;
	text-align:center;
	display:block;
	position:relative;
	padding:7px;
	line-height: 100%;
	font-family:"DIN W01 Bold";
  }  

div.ProduktgruppeButton a:hover
  {
	color:white;
	background-color:black;	
  }  
  

div.ProduktgruppeButton:hover
  {
	color:white;
	background-color:black;
  }  


div.ProduktgruppeIcon
  {
	display:block; 
	position:relative;
	width:150px;
	height:150px;
	background-color:white;	
  }   
  
div.ProduktgruppeIcon a
  {
	display:block; 
	position:relative;
	width:150px;
	height:150px;
  }  
  
div.ProduktgruppeIcon img
  {
	display:block; 
	position:relative;
	width:150px;
	height:150px;
  }    

div.ProduktgruppeIcon:hover
  {
	background-color:#E7EBF4;	
  }     
 
 
div.Produkt
  {
	  display:flex;
	  flex-direction: column;
	  justify-content: flex-end;
	  align-content: stretch;
	  width:100%;
  }   
 
div.ProduktFoto
  {
	  width:100%;
	  padding-top:20px;
  }     

div.ProduktFoto img
	{
	  width:100%;
	  object-fit: contain; 
	  max-height:350px;
	}     

div.ProduktText
  {
	  display:flex;
	  flex-direction: row;
	  justify-content: flex-start;
	  align-content: stretch;
	  width:100%;
	  padding:10px 10px 20px 10px;
  }   

div.ProduktText hr
  {
  }

div.ProduktText h1
  {
	  color:#124A97;
	  margin:0px;
	  font-size:1.1rem;
  }    

div.ProduktText p
  {
	  
	  color:black;
	  padding-top:5px;
  } 

div.ProduktText
  {
	  display:flex;
	  flex-direction: column;
	  justify-content: flex-start;
	  align-content: stretch;
	  width:100%;
	  padding:0px;
  }   

div.ProduktBeschreibung
{
	width:100%;
}

ul.Positiv
  {
	  list-style-image: url("../images/positiv.png");
	  padding: 5px 50px 5px 50px;
  }   
  
ul.Negativ
  {
	  list-style-image: url("../images/negativ.png");
	  padding: 5px 50px 5px 50px;
  }   

li.Positiv
  {
	  color:black;
	  padding:10px;
  }   

li.Negativ
  {
	  color:black;
	  padding:10px;
  }     

div.ProduktButtons
  {	
	  display:flex;
	  flex-direction: column;
	  justify-content: center;	  
	  align-items: center;
	  margin:25px 0px 25px 0px;
  }   
   

ul.StandardList
  {
	  font-size:1.68em;
	  padding-left:20px;
  }  
  
li.StandardList
  {
	  list-style-image: url("../images/list.png");
	  padding:15px;
  }   
 
div.News
  {
	display: flex;
    width: 100%;
    flex-direction: column-reverse;
  }   

div.NewsIcon
  {
	  display:none;
  }   
  
div.NewsIcon img
  {
	width:50px;
	object-fit: contain;
    height: 100%;
  }     

div.NewsFoto
  {
	  float:left;
  }   

div.NewsFoto img
  {
	width:100%;
	object-fit: contain;
    height: 100%;
    transition: transform 0.8s;
	max-height:400px;
  }     

div.NewsText
  {
	  width:100%;
	  float:left;
	  padding-bottom:20px;
  }   

div.NewsText hr
  {
  }   

div.NewsText h1
  {    
	  color:#124A97;
	  padding-top:10px;
  }    

div.NewsText p
  {
	  font-size:1.1rem;
	  color:black;
	  padding-top:10px;
  }     

div.NewsButtons
  {
	float: left;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 25px;

  }       


div.Tabelle1
  {
	  width:100%;
	  display:flex;
	  flex-direction:column;
	  justify-content:flex-start;
  }       


div.Tabelle2
  {
	  width:100%;
	  display:flex;
	  flex-direction:column;
	  justify-content:flex-start;
	  background-color: #E7EBF4;
	  padding: 3px;
  }       

div.Tabelle2 div.Zelle
  {
	  width:100%;
  }       

div.Zelle
  {
	  margin-bottom:25px;
  }    

div.Zelle h2
  {
	  margin-bottom:15px;
  }    
  
  
div.GalerieWrapper
  {	  
	position: relative; 
	padding-bottom: 85%;
	height: 0; 
	overflow: hidden; 
	width: 100%;
	height: auto;
  }    

div.GalerieWrapper iframe 
{
  position: absolute; 
  top: 0; 
  left: 0; 
  width: 100%; 
  height: 100%;   
}	

div.UnternehmenContent  {
	width: 100%;
    padding:25px 25px 0px 25px;
    background-color: white;
    display:block;
  }   


div.UnternehmenContent h1
  {
	color: #124A97;
    margin-bottom: 5px;
  }  

div.UnternehmenContent hr
  {
	color: black;
    margin-top: 0px;
	border: none;
	height: 3px;
    background-color: #124A97;
  }  

 
div.UnternehmenMenu
  {
	  width:100%;
	  justify-content: center; 
	  align-items: center;	  
	  font-size:1.1rem;
	  float:left;
  }   
  
div.Unternehmenlink
  {
	width:120px;
	left:calc(100% - 130px);
	background-color:#e8edf4;
	justify-content: center; 
	align-items: center;	  
	font-size:1.1rem;
	float:left;
	position: absolute;
	display:none;
  }   
  
  

div.UnternemenButton
  {
	  width:100%;
	  height:40px;
	  color:black;
	  text-align: center;
  }   
  
div.UnternemenButton a
  {
	  color:black;
	  width:100%;
	  height:40px;
	  text-align: center;
	  display: block;
	  position: relative;
	  padding-top: 5px;
  } 

div.UnternemenButtonSelected
  {
	  width:100%;
	  height:40px;
	  color:black;
	  text-align: center;
  }   
  
div.UnternemenButtonSelected a
  {
	  color:black;
	  width:100%;
	  height:40px;
	  font-weight:bolder;
	  text-align: center;
	  display: block;
	  position: relative;
	  padding-top: 5px;
  }     
  
div.UnternemenButton a:hover
  {
	  background-color:#124A97;
  }     

div.UnternehmenTitel
  {
	  width:100%;
	  margin-top: 25px;
  } 

div.UnternehmenTitel p {
    font-size: 1.35rem;
}

div.UnternehmenTitel h1
  {
	  color:black;
	  margin-top: 10px;
  } 
  
div.UnternehmenList
  {
	  width:100%;
	  justify-content: center; 
	  display:flex; 
	  flex-direction: column;
  }   

ul.UnternehmenList
  {
	  width:100%;
	  position:relative;
  } 

li.UnternehmenList
  {
	  width:100%;
	  padding-left: 30px;
	  padding-bottom: 5px;
	  padding-top: 5px;
	  position: relative;
  }   

li.UnternehmenList:before {
    content: '';
    width: 15px;
    height: 15px;
    position: absolute;
    background-image: url("../images/list.png");
    background-size: cover;
    background-position: center;
    left: 0;
    top: 18px;
    transform: translateY(-50%);
}

div.Kontakte
  {
	  width:100%;
	  padding:20px;
	  display:block; 
	  position:relative;
	  float:left
  }   

div.Kontakt
  {
	  width:100%;
	  padding:5px;
	  display:flex; 
	  flex-direction:column;
	  position: relative;	
	  text-align:center;
	  float:left;
	  font-size:1.1rem;
	  align-items: center;
	  margin-bottom: 40px;
  }   

div.KontaktFoto
  {
	  width:100%;
  }
  
div.KontaktFoto img
  {
	  width:75%;
  }   

  
div.KontaktText
  {
	  color:white;
	  font-weight:bold;
	  display: flex;
	flex-direction: column;
    align-items: center;
  }  

div.KontaktQR 
{
	display:none;
}

a.KontaktMail {
    height: 70px;
    width: 70px;
    display: block;
	background-color:#04489B;
	margin-top: 10px;
	padding: 8px;
}	

a.KontaktMail img {
    height: 50px;
    width: 50px;
}	

p.KontaktName
  {
	font-family:"DIN W01 Bold";	
  }    

div.KontaktQR img
  {
	width: 80px;
    height: auto;
	position:absolute;
  }  
  
div#inh_292
{
	display:none;
}

.navbar{
  overflow:hidden;
  height:75px;
  width:50px;
}

.fa {
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    /*-webkit-font-smoothing: antialiased;*/
}

.fa-caret-down:before {
    content: "\f0d7";
}

.navbar img{
  float:right;
  display:block;
  color:#f2f2f2;
  text-align:center;
  padding:0px;
}

.navbar a{
  float:left;
  display:block;
  color:#f2f2f2;
  text-align:center;
  padding:8px;
  text-decoration:none;
}

.navbar ul{
  margin:8px 0 0 0;
  list-style:none;
}

.navbar a:hover{
  background-color:#ddd;
  color:#000;
}

.side-nav{
  height:100%;
  width:0;
  position:fixed;
  z-index:100;
  top:0;
  left:0;
  background: url(../images/blueFrame.png);
  overflow-x:hidden;
  padding-top:60px;
  transition:0.5s;
}

.mobiMenu a{
  text-decoration:none;
  color:white;
  display:block;
  transition:0.3s;
  width:calc(100% - 50px);
  float:left;
  padding: 5px 0px 5px 25px;
}

.side-nav a:hover{
  color:#fff;
}

.side-nav .btn-close{
  position:absolute;
  top:0;
  right:22px;
  font-size:2.25rem;
  margin-left:50px;
  color:white;
}

.topnav a:hover, .dropdown:hover .dropbtn {
  background-color: #555;
  color: white;
}

a.MenuLink 
{
	font-size:1.1rem;
}

a.SeitenLink 
{
	font-size:1.1rem;
	background:white;
	color:#124A97;
	margin-left: 25px;
    margin-top: 20px;
    width: calc(100% - 75px);
}


div.mobiMenu button{
	width: 30px;
    border: 0px;
    height: 30px;
    font-size: 1.35rem;
    text-align: left;
    padding: 4px;
    color: black;
    border-color: transparent;
    float: left;
    background-color: white;
    margin: 5px;
	
}


.menu li
{
    color: white;
    padding: 5px 0px 5px 20px;
}

.menu {
    display:none;
	padding:0px 0px 20px 0px;
}

/*button + .menu:active,
button:focus + .menu {
    display:block;
}*/
.menu.active{
	display: block;
}

button:focus svg {
    transform: rotate(180deg);
}


div.Download {
	display:block;
}	

div.Download h1 {
	font-size: 1.8rem;
	text-align: center;
}	
  
div.DownloadButtons {
	width:100%;
	display:flex;
	margin-top: 20px;
	flex-direction: column;
    align-items: center;
}	

div.DownloadButton {
	width:200px;
	height:40px;
	position:relative;
	background-color:#04489B;
	display: flex;
    flex-direction: row;
}	

div.DownloadButton img{
	width:20px;
	height:20px;	
	margin: 10px;
}	

div.DownloadButtons a {
	width:200px;
	height:40px;
	position:relative;
	color: white;
	margin:5px;
	float: left;
}	

div.DownloadName {
	margin:7px;
	text-align: center;
}	
  
div#Footer
  {
	color:white;	
    width:100%;
	flex-direction:column;
	display:flex;
	align-items:center;
    background-size: auto;
	background: 
		url(../images/blueFrame.png) repeat,
		url(../images/header.png) repeat;
	padding-left:25px;
	padding-right:25px;
	margin-top:25px;
  }

div.FooterContent
  {
	margin-top:10px;
	margin-bottom:10px;
	display:flex;
	flex-direction:column;
	justify-content: flex-start;
	width:100%;
  }
  

div.FooterContentSpalte1
  {
	margin-top:5px;
	width:100%;
	margin-bottom:5px;
	float:left;
	
  }  

div.FooterContentSpalte1 p
  {	
	margin-bottom:5px;
	
  }    

div.FooterContentSpalte2
  {
	margin-top:5px;
	margin-left:25px;
	width:100%;
	margin-bottom:5px;
	float:left;
	
  } 

div.FooterContentSpalte2 li
  {
	list-style-type: square;  
  } 
	

div.FooterContentSpalte3
  {
	margin-top:5px;
	margin-bottom:5px;
	float:left;
	margin-left: 25px;
  }   

div.FooterContentSpalte3 a:not(.Zertifikat):not(.Impressum)
  {
	height: 30px;
	width: 30px;
    background: white;
    float: right;
    padding: 5px;
    margin-right: 7px;
    margin-top: 50px;
  }     
  
  div.FooterContentSpalte3 a:not(.Impressum)
  {
    float: right;
  }     
  
  
div.FooterContentColumn
  {
    width:300px;
	margin-right:15px;
	color:white;	
	display:none;
  } 

div.FooterContentColumn hr
  {
	color:white;	
	margin-bottom:40px;
  }   

div.FooterContentColumn h1 a
  {
	color:white;	
	border-bottom-color:white;
	border-bottom-width:2px;
  }   
 
 div.FooterContent p a
  {
	color:white;	
	margin-bottom:15px;
	white-space:nowrap;
  } 
  
div.Impressum {
	background-color:white;
	width:100px;
	height:30px;
	color:#124a97;
	padding-top: 4px;
    margin-top: 50px;
	text-align:center;
	float:right;
 }



div.Form img
  {
	 display:none;
  } 
 
div.Form h2
  {
	color:#124A97;
	  padding-top:10px;
  } 
  
div.Form  
	{
	 display:flex;
	 flex-direction:column;
	 width:100%;
	 align-items:center;
	}

td.FormCaption 
	{
	 width:160px;
	 padding:10px;
	}    

td.FormText input
	{
	 width:100%;
	}    

td.FormButton input
	{
	 width:calc(50% - 10px);
	 height:35px;
	 color: white;
     background-color: #124A97;
     text-align: center;
     font-family: "DIN W01 Bold";
	 border:none;
	}   
	
td.FormText textarea
	{
	 width:100%;
	}