html { background: url(../ei/energieing_header_blanko.jpg) left top repeat-x; } 
html, body { height: 100%; padding: 0; margin: 0; }
body {
  font-family: arial, sans-serif;
  position: relative;
/*  background: url(../ei/energieing_titelbild.jpg) left 80px no-repeat; */
  background-size: 100%;
  font-size: 16px;
  line-height: 22px;
}

a { text-decoration: none; }
#footer  { position: fixed;  width: 100%;  bottom: 0; text-align: right; background: #f3953f;  }
#footer #foot { height: 28px;}
#footer, #footer a { color: #fff; font-size: 12px; }
#footer #links { padding-top: 4px; padding-right: 30px; position: relative;  }

#main #footer  { background: #fff; color: #f3953f; margin-bottom: 10px;}
#main #footer #foot  { width: 940px; padding: 0 30px; margin: 0 auto; height: 22px;}

#main #menu { width: 75%; height: 72px; margin: 0 12%; }
#main .main { width: 100%; margin: 16px 0 0 ; padding-bottom: 35px; }

#main #menu a  { color: #f3953f; font-size: 12px; }
#main #footer a     { color: #f3953f; }

#main .main #menu a.menu { display: block;  width: 120px; text-align:center; float: left; padding: 0 1% 0 0; font-size: 14px; letter-spacing: .5px; }
#main .main #menu a.menu:last-of-type { padding: 0;}  
#main #menu img { display: inline-block; width: 70px; padding: 0 30px; text-align:center; }

#head { width: 720px; height: 80px; padding: 0 120px; margin: 0 auto; position: relative;  }
#main #head { width: 76%; padding: 0; margin: 0 12%; }
#logo { display: inline-block; float: left; background: url(../ei/Logo_energieingenieure_58_px.png) left 10px no-repeat; width: 145px; height: 68px; }

#expert { display: none; }
#main #expert { display: block; position: absolute; right: 160px; top: 16px; height: 30px; outline: 4px solid #fff; }

#head #menu { padding-left: 180px; width: 720px; }

#head #menu a {
  float: left;
  display: inline-block;
  background: url(../ei/icon_kontakt_42px.png) 50% 10px no-repeat;
  background-size: 42px 42px;
  height: 25px;
  width: 80px;
  text-align:center;
  padding: 55px 10px 0;
  font-size: 11px;
  color: #fff;
}

#head a#he { background-image: url(../ei/icon_hauseigentuemer_42px_rand.png); }
#head a#ge { background-image: url(../ei/icon_gewerbe_42px_rand.png); }
#head a#ko { background-image: url(../ei/icon_kommunen_42px_rand.png); }
#head a#pl { background-image: url(../ei/icon_planung_42px_rand.png); }
#head a#re { background-image: url(../ei/icon_referenzen_42px_rand.png); }

#co, #co2 {
  display: block;
  position: absolute;
  right: 50px;
  top: 5px;  
  background: url(../ei/icon_kontakt_42px_rand.png) 50% 5px no-repeat;
  height: 60px;
  width: 90px;
  text-align:center;
  padding-top: 50px;
  font-size: 11px;
  color: #fff;
}
#main #co { right: 0;}

#me{
  display: none;
  position: absolute;
  right: 20px;
  top: 30px;  
  background: url(../ei/striche.png) left top no-repeat;
  height: 50px;
  width: 42px;
  text-align:center;
}


body#hauseigentuemer,
body#gewerbe,
body#kommunen,
body#planung,
body#referenzen,
body#kontakt,
#main #head 
{ background: none; }

body#hauseigentuemer .main #menu,
body#gewerbe .main #menu,
body#kommunen .main #menu,
body#planung .main #menu,
body#referenzen .main #menu,
body#kontakt .main #menu,
#main .content,
#main .left,
#main #head #menu,
.content > h4,
.bg,
#co2,
#main #head #menu,
#me
{ display: none; }

/*
 *#main .main {  background: url(../ei/energieing_titelbild.jpg) left top no-repeat; display: block; height: 350px; padding:0; margin: 0 auto ;  }
*/
#main .bg { display: block; width: 100%; }

.main { width: 1000px; margin: 16px auto 0; padding-bottom: 35px; }
.left { padding: 10px 7px 10px 16px; width: 168px; margin-left: 110px; background: #dfd7d5;  float: left; }
.content { width:528px; padding: 0 155px 0 16px; float: left;  }

#referenzen .left { width: 0; padding: 0; margin: 0; }
#referenzen .content { width: 792px; padding: 0 75px 0 16px; margin-left: 110px; }

.content h1 {
  color: #f3953f;
  font-size: 20px;
  font-weight: normal;
}
.content h2 {
  color: #f3953f;
  font-size: 18px;
  font-weight: normal;
}
  
.content h3 {
  color: #000;
  font-size: 16px;
  font-weight: bold;
}

.left h2 {
  color: #f3953f;
  text-transform: uppercase;
  font-family: "Arial Narrow", Arial, sans-serif;
  font-size: 16px;
}
.left h3 { font-size: 14px; margin-bottom: 0 }
.left p { font-size: 14px; }

#kontakt .left { height: 0; background: #fff; padding-top: 0; }

@media only screen and (max-width: 999px), screen and (max-height: 755px) {
    
#hauseigentuemer #head #menu,
#gewerbe #head #menu,
#kommunen #head #menu,
#planung #head #menu,
#referenzen #head #menu,
#kontakt #head #menu,
#main #head #menu,
#main #menu,
.bg,
#main #foot #menu,
.content > h4,
#co1,
#co,
#foot #links
{ display: none; }

#main #head #menu.nav-active,
#hauseigentuemer #head #menu.nav-active,
#gewerbe #head #menu.nav-active,
#kommunen #head #menu.nav-active,
#planung #head #menu.nav-active,
#referenzen #head #menu.nav-active,
#kontakt #head #menu.nav-active,
#me
{ display: block; }
  
  .main { display: flex; flex-wrap: wrap; margin: 0 auto;}
  .content  { margin: 0; }
  .content { order: 1; }
  .left { order: 2; }
  .content h1 { margin-top: 0; }
  #main .main { background-size: contain; background-position: center top; }
  #main #footer { margin-bottom: 0; }
  #main #footer  { background: #f3953f; } 
  #main #footer #foot,
  #head,
  .bg,
  .body,
  .main,
  .content > img
  { width: 100%;  }
  
  #head, .main,  #foot { max-width: 1000px }
  
  .content, .left
  { width: 480px; padding: 0 10px; width: 97%; padding: 0 1%; }
  .left { margin-left: 0; margin-bottom: 10px; padding-bottom: 10px;}

  #head, #head #menu  { padding: 0 }

  #head #menu { position: absolute; right: 20px; top: 80px; width: 240px;} 
  
  #head #menu a {
  display: block;
  float: none;
  background: #f3953f!important;
  height: 35px;
  width: 240px;
  text-align:center;
  padding: 10px;
  font-size: 18px;
  color: #fff;
}

#expert { display: none; }
#main #expert { display: block; position: absolute; right: 80px; top: 26px; }

#main #footer #foot, #footer #foot{ height: 40px;  }
#main #footer #foot{ background: #f3953f;  }

#co2 { display: block; margin-top: -40px; right: 30px; }
#main #foot a#co2 { color: #fff; }
#logo { background-position: 20px 10px; width: 165px;}
#head #menu.nav-active, #head #menu.nav-active a { display: block; } 

#referenzen .content { width: 480px; padding: 0 10px; margin-left: 0; }

} /* smaller view */

@media only screen and (max-width: 500px) {
  #main #expert { display: none;}
}

@media only screen and (min-width: 1000px) { #main .main #menu a.menu { padding-right:5%; } } 
@media only screen and (min-width: 1019.5px) { #main .main #menu a.menu { padding-right:5.2%; } } 
@media only screen and (min-width: 1039px) { #main .main #menu a.menu { padding-right:5.4%; } } 
@media only screen and (min-width: 1058.5px) { #main .main #menu a.menu { padding-right:5.6%; } } 
@media only screen and (min-width: 1078px) { #main .main #menu a.menu { padding-right:5.8%; } } 
@media only screen and (min-width: 1097.5px) { #main .main #menu a.menu { padding-right:6%; } } 
@media only screen and (min-width: 1117px) { #main .main #menu a.menu { padding-right:6.2%; } } 
@media only screen and (min-width: 1136.5px) { #main .main #menu a.menu { padding-right:6.4%; } } 
@media only screen and (min-width: 1156px) { #main .main #menu a.menu { padding-right:6.6%; } } 
@media only screen and (min-width: 1175.5px) { #main .main #menu a.menu { padding-right:6.8%; } } 
@media only screen and (min-width: 1195px) { #main .main #menu a.menu { padding-right:7%; } } 
@media only screen and (min-width: 1214.5px) { #main .main #menu a.menu { padding-right:7.2%; } } 
@media only screen and (min-width: 1234px) { #main .main #menu a.menu { padding-right:7.4%; } } 
@media only screen and (min-width: 1253.5px) { #main .main #menu a.menu { padding-right:7.6%; } } 
@media only screen and (min-width: 1273px) { #main .main #menu a.menu { padding-right:7.8%; } } 
@media only screen and (min-width: 1292.5px) { #main .main #menu a.menu { padding-right:8%; } } 
@media only screen and (min-width: 1312px) { #main .main #menu a.menu { padding-right:8.2%; } } 
@media only screen and (min-width: 1331.5px) { #main .main #menu a.menu { padding-right:8.4%; } } 
@media only screen and (min-width: 1351px) { #main .main #menu a.menu { padding-right:8.6%; } } 
@media only screen and (min-width: 1370.5px) { #main .main #menu a.menu { padding-right:8.8%; } } 
@media only screen and (min-width: 1390px) { #main .main #menu a.menu { padding-right:9%; } } 
@media only screen and (min-width: 1409.5px) { #main .main #menu a.menu { padding-right:9.2%; } } 
@media only screen and (min-width: 1429px) { #main .main #menu a.menu { padding-right:9.4%; } } 
@media only screen and (min-width: 1448.5px) { #main .main #menu a.menu { padding-right:9.6%; } } 
@media only screen and (min-width: 1468px) { #main .main #menu a.menu { padding-right:9.8%; } } 
@media only screen and (min-width: 1487.5px) { #main .main #menu a.menu { padding-right:10%; } } 
@media only screen and (min-width: 1507px) { #main .main #menu a.menu { padding-right:10.2%; } } 
@media only screen and (min-width: 1526.5px) { #main .main #menu a.menu { padding-right:10.4%; } } 
@media only screen and (min-width: 1546px) { #main .main #menu a.menu { padding-right:10.6%; } } 
@media only screen and (min-width: 1565.5px) { #main .main #menu a.menu { padding-right:10.8%; } } 
@media only screen and (min-width: 1585px) { #main .main #menu a.menu { padding-right:11%; } } 
@media only screen and (min-width: 1604.5px) { #main .main #menu a.menu { padding-right:11.2%; } } 
@media only screen and (min-width: 1624px) { #main .main #menu a.menu { padding-right:11.4%; } } 
@media only screen and (min-width: 1643.5px) { #main .main #menu a.menu { padding-right:11.6%; } } 
@media only screen and (min-width: 1663px) { #main .main #menu a.menu { padding-right:11.8%; } } 
@media only screen and (min-width: 1682.5px) { #main .main #menu a.menu { padding-right:12%; } } 
@media only screen and (min-width: 1702px) { #main .main #menu a.menu { padding-right:12.2%; } } 
@media only screen and (min-width: 1721.5px) { #main .main #menu a.menu { padding-right:12.4%; } } 
@media only screen and (min-width: 1741px) { #main .main #menu a.menu { padding-right:12.6%; } } 
@media only screen and (min-width: 1760.5px) { #main .main #menu a.menu { padding-right:12.8%; } } 
@media only screen and (min-width: 1780px) { #main .main #menu a.menu { padding-right:13%; } } 
@media only screen and (min-width: 1799.5px) { #main .main #menu a.menu { padding-right:13.2%; } } 
@media only screen and (min-width: 1819px) { #main .main #menu a.menu { padding-right:13.4%; } } 
@media only screen and (min-width: 1838.5px) { #main .main #menu a.menu { padding-right:13.6%; } } 
@media only screen and (min-width: 1858px) { #main .main #menu a.menu { padding-right:13.8%; } } 
@media only screen and (min-width: 1877.5px) { #main .main #menu a.menu { padding-right:14%; } } 
@media only screen and (min-width: 1897px) { #main .main #menu a.menu { padding-right:14.2%; } } 
@media only screen and (min-width: 1916.5px) { #main .main #menu a.menu { padding-right:14.4%; } } 
@media only screen and (min-width: 1936px) { #main .main #menu a.menu { padding-right:14.6%; } } 
@media only screen and (min-width: 1955.5px) { #main .main #menu a.menu { padding-right:14.8%; } } 
@media only screen and (min-width: 1975px) { #main .main #menu a.menu { padding-right:15%; } }