html, body { margin: 0; padding:0; text-align:center; }
* { box-sizing: border-box; }
a { text-decoration: none; }
li { list-style-type: none; text-align: left; }
h1, h2, h3, h4, ul, p, a, table, select, dt, dd { font-family: arial helvetica, sans-serif; font-weight: normal; color:#494949;}
h1, h2 { color: #fff; }
h3, h4  { color:#0069b4; }
#logo, #fa-bars, li, a, dt { transition: all 300ms; -moz-transition: all 300ms; -o-transition: all 300ms;}
section { padding-bottom:50px; }

/* remove standard-styles */
select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	border:none;
	border-radius: 0;
	font-size: 14px;
	width: 100%
}


/* HEADER ******************************/

header { height: auto; background: #fff; margin: 0 auto 0 auto; }

#logo { width: 180px; float:left; margin: 10px 0 10px 10px;}
#logoRechts { width: 240px; float:right; margin-top: 25px;  padding: 10px 10px 10px 10px; }
#logo:hover { opacity: 0.5; }
#logo img { width:100%; }
#logoRechts img { width:100%; }

#metanav { width:100%; height: 26px; text-align: right; padding: 10px 10px 0 0; font-size: 12px; color: #ccc; }
#metanav a { color: #ccc; }

header nav { margin: 0; padding:0; }
#fa-bars { display: inline-block; width:60px; height:auto; cursor: pointer; float:right; margin: 40px 30px 0 0; }
#fa-bars:hover { opacity: 0.5; }
header nav ul { height: 0; overflow: hidden; margin: 0; padding: 0; width: 100%; z-index:100; }
header nav ul.open { height: auto; }
header nav ul li { width: 100%; padding: 0 0; background-color: #0069b4; border-top: 1px solid #fff; text-align: center; }
header nav ul li:hover { background-color: #59a1d4; }
header nav ul li.active { background-color: #e04143; }
header nav ul li a { font-size: 12px; line-height: 40px; display: block; color: #fff; }
header nav ul li a.active { background-color: #e04143; }



/* HOME ******************************/
#home {  height: 533px;  padding: 60px 30px 0 20px; text-align:left;}

#home h1 { margin: 0 0 0 0; padding: 0; font-size: 45px; line-height:55px; }
#home h2 { margin: 0; padding: 0; font-size: 20px; line-height: 24px; }

/* VENTILE ******************************/
#ventile h3 { font-size: 25px; text-align:left; margin-top: 0;}

#ventile ul.ventilinfo { padding:0; text-align: left; font-size: 16px; color: #666; }

#ventile ul.ventilinfo li { margin:10px 0; padding:0; }


/* PRODUCTS ******************************/
#products{ width:100%; height: auto; padding:40px 10px 40px 10px; margin: 0 auto 0 auto; }
#products p { text-align:left; font-size: 14px; line-height: 18px; }
#products p a { color: #0069b4; }
#products p a:hover { color: #ccc; }
#products ul { text-align:left; font-size: 14px; line-height: 18px; }
#products ul li { margin: 5px 0; color:#0069b4; }
#products h3 { font-size: 25px; text-align:left; margin-top: 0;}
#products h4 { font-size: 20px; text-align:left; margin: 0; padding: 0;}
#products select {
	width:100%;
	padding:.75em 1em .5em 1em;
	background-image:url(../images/select-arrow.png);
	background-position: right .75em center;
	background-repeat: no-repeat;
}
/* hide browser-styling (arrow) in IE10 */
select::-ms-expand {
	display:none;
}
.lt-ie10 select {
	background-image: none;
}
#products select {
	/* irrelevante Eigenschaften gekürzt */
	background-color:#59a1d4;
	color:white;
}
#products select option {
	background:#0069b4;
}


table
{
	border-collapse:collapse; width:100%; margin:20px 0;
}

table, th, td { border:0px solid white; font-size: 14px; }

th
{
	padding:.75em 1em .5em 1em; text-align:left; background-color:#0069b4;
	color:white; font-size:14px; font-weight:normal;
}

th.right
{ text-align:right; }

/* wechselnde Farben in table */
.farbe1 {
	background:#f0f0f0;
}
.farbe2 {
	background:#cce2fb;
}

td
{
	text-align:left; padding:.75em 1em .5em 1em;
}

td.right
{
	text-align:right; padding:.75em 1em .5em 1em;
}

table a
{
	color:#0069b4; text-decoration:underline;
}


/* START / COMPANY ******************************/
#company { width:100%; padding-top:60px; margin: 0 auto 0 auto; text-align: center; }
#companyContent { width: 90%; padding 0 0; display: inline-block; }
#content1 { width: 100%; margin: 0 0; display: inline-block; }
#content2 { width: 100%; margin: 40px 0; display: inline-block; }
#content3 { width: 100%; margin: 0 0; display: inline-block; }
#contentA { width: 100%; margin: 0 0; display: inline-block; }
#contentB { width: 100%; margin: 40px 0; display: inline-block; }
#contentC { width: 100%; margin: 0 0; display: inline-block; }
#company img { width: 100px; height: auto; text-align:center; }
#company img.ventil { width: 240px; height: auto; text-align: center; }
#company h3 { font-size: 25px; margin: 40px 0 0 0; text-align:left; }
#company p { font-size: 14px; line-height: 18px; text-align:left; }
#company p a { color: #0069b4; }
#company p a:hover { color: #ccc; }
#company ul.ventilinfo { padding:0; text-align: left; font-size: 18px; color: #666; }
#company ul.ventilinfo li { margin:10px 0; padding:0; }


/* SALES ******************************/
#sales { width:100%; background-color: #f0f0f0; padding-top:30px; margin: 0 auto 0 auto; }
#sales p { color: #0069b4; font-size: 14px; line-height: 18px; }
#sales p a { color: #0069b4; }
#sales p a:hover { color: #ccc; }
h4 { font-size: 25px; margin: 0 auto 0 auto; padding:10px; text-align:left; }

#salesHead { display:block; padding:0px; text-align:left; }

#salesContent { display:block; padding:10px; text-align:left; }

#sales1 { width: 100%; }
#sales1 img { width: 100%; }
#sales2 img { width: 100%; }


/* INFO ******************************/

#info { width: 100%; background-color: #0069b4; padding:0; margin: 0 auto 0 auto; }
#info h2 { font-weight: bold; font-size: 14px; line-height: 18px; padding:0; margin: 0; }
#info p { color: #fff; font-size: 14px; line-height: 18px; padding:0; margin: 0; }
#info p a { color: #fff; }
#info p a:hover { color: #ccc; }

#infoContent { display:block; padding: 0px; text-align:left; }

#info1 { width: 100%; }
#info2 { padding: 20px 10px 40px 10px; }
#consentText { padding: 20px 40px 40px 10px; position: absolute; top:0; left:0; z-index:1000; }
#consentText h2 { color:#0069b4; }
#consentText p { color:#333333; }
#consentText p a { color:#e04143; }


/* FOOTER ******************************/


footer { display: block; height:auto; margin: 0 auto 0 auto; }

#bottomnavLeft { width:50%; padding: 15px 0 20px 10px; margin: 0; float: left; }
#bottomnavLeft ul { text-align:left; margin: 0; padding: 0; }
#bottomnavLeft ul li { }
#bottomnavLeft a { color: #0069b4; font-size: 14px; line-height: 18px; }
#bottomnavLeft a:hover { color: #ccc; }


#bottomnavRight { width:50%; padding: 20px 10px 20px 0; margin: 0; float: right; }
#bottomnavRight ul { text-align:left; margin: 0; padding: 0; }
#bottomnavRight ul li {  }
#bottomnavRight a { color: #0069b4; font-size: 14px; line-height: 18px; }
#bottomnavRight a:hover { color: #ccc; }


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

/* Wide mobiles ******************************/

@media (min-width: 480px) {   
	
	#home { padding: 80px 30px 0 30px; }
	#home h1 { font-size: 60px; line-height: 70px; }
	
	#company img { width: 144px; }

	#sales1 { float: left; width: 50%; padding-right: 40px; }
	#sales2 { float: left; width: 50%; padding-right: 40px; }
	#sales1 img { width: 80%; }
	#sales2 img { width: 80%; }
	
	#info { height: 300px; background-color: #0069b4; padding:0; margin: 0; }
	
	#infoContent { display:block; padding:0px; text-align:left; }
	
	#info1 { float: left; width: 50%; padding-right:40px; }
	#info2 { float: left; width: 50%; padding: 20px 0; }
	
}

/* Small Tablets ******************************/

@media (min-width: 768px) {
	header { height: 148px; }
	header nav { display: inline-block; float:right; margin: 87px 10px 0 0; }
	#fa-bars { display: none; }
	header nav ul { height: auto; overflow:auto; }
	header nav ul li {  width: auto; float:left; padding: 0 0; background-color: #fff; }
	header nav ul li:hover { background-color: white; }
	header nav ul li.active { background-color: white; }
	header nav ul li a { font-size: 13px; line-height: 16px; color:#fff; background-color: #0069b4; display:block; padding:8px 10px; margin-left:2px; }
	header nav ul li a:hover { margin-top: 2px; }
	#metanav { font-size: 13px; }
	#home { padding: 130px 30px 0 30px; text-align:left; }
	#home h1 { font-size: 80px; line-height: 90px; }
	#products{ padding: 70px 10px 50px 10px; }
	#products h3 { font-size: 48px; }
	#products h4 { font-size: 25px; }
	#products p { font-size: 20px; line-height: 25px; }
	#products ul { font-size: 18px; line-height: 22px; }
	
		#contentA { width: 33.333%; margin: 40px 0; padding: 0 30px 0 0; float: left; }
	#contentB { width: 33.333%; margin: 40px 0; padding: 0 15px 0 0; float: left; }
	#contentC { width: 33.333%; margin: 40px 0; padding: 0 0 0 15px; float: left; }
	
	#company h3 { font-size: 25px; }
	#company p { font-size: 18px; line-height: 22px; }
	
	#sales h4 { font-size: 48px; }
	#sales p { font-size: 20px; line-height: 25px; }
	#info h2 { font-size: 20px; line-height: 25px;}
	#info p { font-size: 20px; line-height: 25px; }
	#bottomnavLeft a { color: #0069b4; font-size: 16px; line-height: 30px; }
	#bottomnavRight a { color: #0069b4; font-size: 16px; line-height: 30px; }
}


/* Tablets, small desktops ******************************/

@media (min-width: 1024px) {
	header { height: 160px; }
	header nav { display: inline-block; margin: 94px 10px 0 0; }
	header nav ul li a { font-size: 16px; line-height: 19px; color:#fff; display:block; padding:9px 20px; margin-left:2px; }
	
	#metanav { font-size: 14px; }
	
	#logo { width: 200px; }
	
	#home { padding: 130px 200px 0 30px; }
	
	#ventile h3 { font-size: 30px; }
	#ventile ul.ventilinfo { font-size: 20px; }
	
	#companyContent { width: 90%; }
	
	#content1 { width: 33.333%; margin: 40px 0; padding: 0 30px 0 0; float: left; }
	#content2 { width: 33.333%; margin: 40px 0; padding: 0 15px 0 0; float: left; }
	#content3 { width: 33.333%; margin: 40px 0; padding: 0 0 0 15px; float: left; }
	
	#company p { font-size: 18px; line-height: 22px; }
	#company img { width: 100px; }
  #company ul.ventilinfo { font-size: 18px; }
	
	#sales1 img { width: 60%; }
	#sales2 img { width: 60%; }
	
	footer { display: block; height:120px; margin: 0 auto 0 auto; }
	
	
	#bottomnavLeft { width:70%; padding: 30px 10px; margin: 0; float: left; }
	#bottomnavLeft ul { text-align: center; margin: 0; padding: 0; }
	#bottomnavLeft ul li { float:left; margin-right: 25px; }
	#bottomnavLeft a { color: #0069b4; font-size: 16px; line-height: 30px; }
	#bottomnavLeft a:hover { color: #ccc; }
	
	
	#bottomnavRight { width:30%; padding: 30px 10px; margin: 0; float: right; }
	#bottomnavRight ul { text-align: center; margin: 5px 0 0 0; padding: 0; }
	#bottomnavRight ul li { float:right; margin-right: 25px; }
	#bottomnavRight a { color: #0069b4; font-size: 16px; line-height: 30px; }
	#bottomnavRight a:hover { color: #ccc; }
	
}


/* Desktops ******************************/

@media (min-width: 1280px) {
	header { width: 1280px; }
	
	#home { padding: 160px 300px 0 140px; }
	#products { width: 1280px; margin: 0 auto 0 auto; } 
	#companyContent { width: 1280px; margin: 0 auto 0 auto; }
	
	#company img { width: 144px; }

	#company h3 { font-size: 30px; }
	#company p { font-size: 20px; line-height: 25px; }
		#company ul.ventilinfo { font-size: 20px; }
	#salesHead { width: 1280px; margin: 0 auto 0 auto; }
	#salesContent { width: 1280px; margin: 0 auto 0 auto; }
	
	#infoContent { width: 1280px; margin: 0 auto 0 auto; }
	
	footer { width:1280px; height:120px; margin: 0 auto 0 auto; }
}