@font-face{
  font-family: Baskerville-Roman;
  src: url('fonts/NewBaskervilleStd-Roman.otf');
}

@font-face{
  font-family: OffcPro-Light;
  src: url('fonts/DINOffcPro-Light.ttf');
}

@font-face{
 font-family: Lora;
  src: url('lora-regular-webfont.eot');
  src: url('lora-regular-webfont.eot?#iefix') format('embedded-opentype'),
       url('lora-regular-webfont.woff') format('woff'),
       url('lora-regular-webfont.ttf')  format('truetype'),
       url('lora-regular-webfont.svg#Lora') format('svg');
}

*{
  margin: 0;
  padding: 0;
}

html, body{
  font-family: Lora, "Times New Roman", serif;
  font-weight: normal;
  font-style: normal;
  font-size: 16px;
  background-color: #fff;
}

div.wrapper{
  position: relative;
  margin: 0 auto;
  width: 100%;
  max-width: 1280px;
  min-width: 200px;
  height: auto;
  overflow: hidden;
  background-color: #fff;
}

/*######################################################################################################################
############################################## H E A D E R  A N F A N G ################################################
######################################################################################################################*/

header{
  padding: 30px 0;
  width: 100%;
  height: 250px;
  background-color: #fff;
}

header a{
  display: block;
  margin: 0 auto;
  width: 150px;
  height: 158px;
}

header h1{
  margin-top: 20px;
  font-family: Baskerville-Roman;
  font-weight: normal;
  font-style: normal;
  font-size: 40px;
  text-align: center;
}

header p{
  font-size: 14px;
  text-align: center;
}

/*######################################################################################################################
################################################ H E A D E R  E N D E ##################################################
######################################################################################################################*/

/*######################################################################################################################
################################################ N A V I  A N F A N G ##################################################
######################################################################################################################*/

div.burger {
    display: none;
}

nav{
  position: absolute;
  top: 285px;
  left: 0;
  margin: 0 auto 20px auto;
  padding-top: 20px;
  padding-bottom: 10px;
  width: 100%;
  height: 30px;
  text-align: center;
}

nav ul li{
  float: left;
  width: 25%;
  list-style: none;
}

nav ul li a{
  -webkit-transition: color 1000ms linear;
  -moz-transition: color 1000ms linear;
  -o-transition: color 1000ms linear;
  transition: color 1000ms linear;
  margin-right: 2px;
  font-family: OffcPro-Light, sans-serif;
  font-size: 19px;
  color: #a2a2a2;
  line-height: 30px;
  text-decoration: none;
}

nav ul li a:hover{
  color: #000;
}

nav ul li a.active{
  color: #000;
}

/*######################################################################################################################
################################################## N A V I  E N D E ####################################################
######################################################################################################################*/

/*######################################################################################################################
############################################# C O N T E N T  A N F A N G ###############################################
######################################################################################################################*/

div.teaser {
  display: none;
}

div.teaser02{
  position: relative;
  margin-top: 60px;
}

div.teaser02 img{
  width: 100%;
  height: auto;
} 

h2.leading-in{
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 50px;
  font-weight: normal;
  font-style: normal;
  color: #fff;
  text-align: center;
  line-height: 50px;
  background-color: rgba(80, 80, 80, 0.7);
}

div.content-wrapper{
  padding: 60px 0;
  width: 100%;
  max-width: 1280px;
  min-width: 200px;
  overflow: hidden;
  background-color: #f8f8f8;
}

section{
  padding: 0 20px;
  width: 100%;
  max-width: 1280px;
  min-width: 200px;
}

section.second-section{
  clear: both;
  margin-top: 60px;
}

section div.leading-in{
  margin: 0 auto 60px;
  width: 690px;
  color: #aaa;
}

section article.maintext-first, section article.maintext-second, section article.maintext-third{
  float: left;
  margin-right: 3%;
  width: 30%;
}

section article h2{
  color: #696969;
}

section article p{
  color: #696969;
  line-height: 22px;
}

section article.gruendung, section article.entwicklung, section article.wiederaufbau{
  float: left;
  margin-right: 3%;
  width: 30%;
}

section article.wiederaufbau{
  float: right;
}

section article img{
  float: left;
  margin-right: 10px;
}

/*######################################################################################################################
############################################### C O N T E N T  E N D E #################################################
######################################################################################################################*/

/*######################################################################################################################
############################################## F O O T E R  A N F A N G ################################################
######################################################################################################################*/

footer{
  margin: 0 auto;
  padding: 60px 0;
  width: 100%;
  max-width: 1280px;
  min-width: 200px;
  overflow: auto;
  background-color: #9eab80;/*#505050;*/
}

footer address{
  float: left;
  margin-right: 3%;
  width: 30%;
  line-height: 25px;
}

footer div.map{
  float: right;
  width: 50%;
  margin-right: 20px;
}

footer div.map iframe{
  width: 100%;
  height: 290px;
}

footer address p{
  margin-left: 20px;
  font-weight: normal;
  font-style: normal;
  color: #fff;
  line-height: 25px;
}

footer address p.break{
  margin-bottom: 20px;
}

footer p, footer address p a{
  color: #fff;
  font-size: 18px;
  font-weight: normal;
}

/*######################################################################################################################
################################################ F O O T E R  E N D E ##################################################
######################################################################################################################*/

/*######################################################################################################################
##################################### K O N T A K T F O R M U L A R  A N F A N G #######################################
######################################################################################################################*/

div.content-wrapper section.form-section{
  float: left;
  width: 540px;
}

form label{
  display: block;
  font-size: 18px;
  font-weight: normal;
  font-style: normal;
}

form input{
  margin-bottom: 15px;
  padding: 3px;
  width: 279px;
  height: 25px;
  font-size: 17px;
}

form input[type="submit"], form input[type="reset"]{
  float: left;
  margin-top: 20px;
  width: 130px;
  height: 35px;
  border: 1px solid #ccc;
  background-color: #fff;
}

form input[type="submit"]{
  margin-right: 20px;
}

form textarea{
  padding: 5px;
  width: 279px;
  font-family: Lora;
  font-size: 18px;
}

div.content-wrapper section.address-section address{
  margin-bottom: 40px;
}

div.content-wrapper section.address-section address p, div.content-wrapper section.address-section{
  font-size: 18px;
  font-weight: normal;
  font-style: normal;
}

div.content-wrapper section.thanks article{
  float: left;
  width: 50%;
  max-width: 540px;
  min-width: 200px;
}

/*######################################################################################################################
##################################### K O N T A K T F O R M U L A R  E N D E #######################################
######################################################################################################################*/

/*######################################################################################################################
############################################# A N F A H R T  A N F A N G ###############################################
######################################################################################################################*/

section.gmap-main{
  float: left;
  padding-left: 20px;
  width: 540px;
}

section.find-us-wrapper{
  margin-top: 0;
  padding-left: 0;
  padding-right: 20px;
  font-size: 18px;
  font-weight: normal;
  font-style: normal;
}

/*######################################################################################################################
############################################# A N F A H R T  E N D E ###############################################
######################################################################################################################*/

/*######################################################################################################################
########################################### I M P R E S S U M  A N F A N G #############################################
######################################################################################################################*/

section.impressum{
  padding: 0 20px;
  width: 100%;
  max-width: 1280px;
  min-width: 200px;
}

section.impressum p{
  font-size: 18px;
  font-weight: normal;
  font-style: normal;
  line-height: 25px;
}

section.impressum div.section-left{
  float: left;
}

section.impressum div.section-right{
  float: right;
  padding-right: 20px;
  width: 50%;
}

/*######################################################################################################################
########################################### I M P R E S S U M  E N D E #############################################
######################################################################################################################*/

/*######################################################################################################################
########################################### S O N S T I G E S  A N F A N G #############################################
######################################################################################################################*/

.break{
  margin-bottom: 15px;
}

h2, p{
  color: #696969;
}
/*######################################################################################################################
############################################# S O N S T I G E S  E N D E ###############################################
######################################################################################################################*/

/*######################################################################################################################
####################################### M E D I A Q U E R I E S  A N F A N G ###########################################
######################################################################################################################*/

@media (min-width: 600px) and (max-width: 768px){
  div.teaser02, div.teaser02 img{
    width: 100%;
    height: auto;
  }
  
  div.teaser {
    display: none;
  }
    
  div.burger {
    display: none;
  }
    
  h2.leading-in{
    font-size: 20px;
    line-height: 30px;
  }
  
  section.second-section article img{
    display: block;
    float: none;
    clear: both;
    margin: 0 auto 10px auto;
  }
  
  section.find-us-wrapper{
  float: none;
  clear: both;
  margin-left: 20px;
  width: 50%;
  font-size: 18px;
  font-weight: normal;
  font-style: normal;
  }
  
  section.gmap-main{
    float: none;
    clear: both;
    margin: 0 auto 20px auto;
    width: 540px;
    height: 540px;
  }
  
  section.find-us-wrapper{
    float: none;
    clear: both;
    margin: 0 auto;
    width: 100%;
    text-align: center;
  }
  
  div.content-wrapper section.form-section{
    float: none;
    clear: both;
    margin: 0 auto 20px auto;
    padding: 0;
    width: 280px;
  }
  
  div.content-wrapper section.address-section{
    float: none;
    clear: both;
    margin: 0 auto;
    padding: 0;
    width: 150px;
  }
  
  section.impressum div.section-left{
    float: none;
    clear: both;
    margin: 0 auto 20px auto;
    width: 50%;
  }
  
  section.impressum div.section-right{
    float: none;
    clear: both;
    margin: 0 auto;
    padding: 0;
  }
  
  footer div.map iframe{
    width: 382px;
    height: 285px;
  }
}

@media (min-width: 320px) and (max-width: 599px){
  header {
    padding-top: 10px;
  }
    
  header h1 {
    font-size: 30px;
  }
  
  div.teaser{
    position: relative;
    display: block;
    width: 100%;
    height: auto;
  }
  
  div.teaser02 {
    display: none;
  }
  
  div.teaser img {
    width: 100%;
    height: auto;
	  margin-top: 10px;
  }
    
  div.burger {
    display: none;
    display: block;
    margin-bottom: 20px;
    text-align: center;
    cursor: pointer;
  }
  
  nav{
    position: static;
    display: none;
    width: 100px;
    height: 200px;
  }
  
  nav ul li{
    float: none;
  }
  
  nav ul li a{
    display: block;
    padding: 10px 0;
    width: 100px;
    text-align: center;
  }
  
  nav ul li a:hover{
    color: #a2a2a2;
  }
  
  nav ul li a:active{
    color: #000;
  }
  
  /*div.content-wrapper{
    margin-top: 170px;
  }*/
    
  h2.leading-in{
    font-size: 14px;
    line-height: 20px;
  }
  
  section{
    width: 93%;
  }
  
  section article.maintext-first, section article.maintext-second, section article.maintext-third{
    float: none;
    clear: both;
    width: 93%;
  }
    
  section article.gruendung, section article.entwicklung, section article.wiederaufbau {
    float: none;
    margin: 0 auto 10px !important;
    width: 100%;
  }
    
  section.second-section {
    margin-top: 20px;
  }
  
  section.gmap-main{
    float: none;
    clear: both;
    margin: 0 auto 20px auto;
    padding-right: 20px;
    width: 280px;
    height: 280px;
  }
  
  section.gmap-main iframe{
    width: 280px;
    height: 280px;
  }
  
  section.find-us-wrapper{
    float: none;
    clear: both;
    padding: 0 20px;
    width: 93%;
  }
  
  section.form-section form{
    width: 280px;
    height: auto;
  }
  
  section.form-section form input[type="submit"], section.form-section form input[type="reset"]{
    height: 50px;
  }
  
  section.form-section form input[type="reset"]{
    margin-bottom: 40px;
  }
  
  section.form-section form input{
    width: 280px;
  }
  
  section.impressum div.section-left, section.impressum div.section-right{
    float: none;
    clear: both;
    width: 280px;
  }
  
  section.impressum div.section-left{
    margin-bottom: 10px;
  }
  
  footer address{
    float: none;
    clear: both;
    margin: 0 auto 40px auto;
    width: 320px;
  }
  
  footer div.map{
    float: none;
    clear: both;
    margin: 0 auto;
    width: 320px;
  }
  
  footer div.map iframe{
    width: 320px;
    height: 400px;
  }
}

/*######################################################################################################################
####################################### M E D I A Q U E R I E S  E N D E ###########################################
######################################################################################################################*/