/*reset.css*/
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,
address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,
u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,
th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,
output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;
vertical-align:baseline;margin:0;padding:0;}article,aside,details,figcaption,figure,footer,
header,hgroup,menu,nav,section{display:block;}body{line-height:1;}ol,ul{list-style:none;}
blockquote,q{quotes:none;}blockquote:before,blockquote:after,q:before,q:after{content:none;}
table{border-collapse:collapse;border-spacing:0;}

@font-face {
  font-family: Ubuntu;
  font-style: normal;
  font-weight: 400;
  src: url(../fonts/Ubuntu-C.eot);
}

@font-face {
  font-family: Ubuntu;
  font-style: normal;
  font-weight: 400;
  src: url(../fonts/Ubuntu-C.ttf);
}

html,body{
  height: 100%;
}

.grid{
  background: url(../images/grid.png) repeat-y center 0;
}

.span1,.span2,.span3,.span4,.span5,.span6,.span7,
.span8,.span9,.span10,.span11,.span12,.span13,.span14,.span15{
  float: left;
  margin-left: 30px;
}

.span1{width: 32px;}
.span2{width: 94px;}
.span3{width: 156px;}
.span4{width: 218px;}
.span5{width: 280px;}
.span6{width: 342px;}
.span7{width: 404px;}
.span8{width: 466px;}
.span9{width: 528px;}
.span10{width: 590px;}
.span11{width: 652px;}
.span12{width: 714px;}
.span13{width: 776px;}
.span14{width: 838px;}
.span15{width: 900px;}

header{
  width: 960px;
  height: 90px;
  margin: auto;
  padding: 25px 0 0;
}

#logo{
  font: 24px/36px Ubuntu, arial, helvetica, verdana, sans-serif;
  text-decoration: none;
  color: #000;
  padding: 0 2px;
}

#logo img{
  vertical-align: bottom;
  padding: 10px 16px 0 0;
  position: relative;
  top: -8px;
}

#topnav{
  padding: 45px 0 15px;
}

#topnav li{
  display: inline;
  margin-left: 4px;
  padding-left: 26px;
}

#topnav li.news{
  background: url(../icons/news.png) no-repeat 0 center;
}

#topnav li.hotline{
  background: url(../icons/hotline.png) no-repeat 0 center;
}

#topnav li.contact{
  background: url(../icons/contact.png) no-repeat 0 center;
}

#topnav li.imprint{
  background: url(../icons/imprint.png) no-repeat 0 -1px;
}

#topnav li.home{
  background: url(../icons/home.png) no-repeat 0 center;
}

#topnav li a{
  font: 12px/22px arial, helvetica, verdana, sans-serif;
  font-weight: bold;
  text-decoration: none;
  color: #1c416b;
}

.menu{
  width: 250px;
}

.banner{
  width: 650px;
  height: 350px;
  margin: 0 0 20px;
  overflow:hidden;
  position: relative;
}

.loader{
  position: absolute;
  bottom: 20px;
  right: 20px;
  width: 50px;
  height: 8px;
  overflow: hidden;
}

@-webkit-keyframes round {
  25%{opacity: 1;}
  40%{opacity: 0;}
}
@-moz-keyframes round {
  25%{opacity: 1;}
  40%{opacity: 0;}
}
@-o-keyframes round {
  25%{opacity: 1;}
  40%{opacity: 0;}
}
@keyframes round {
  25%{opacity: 1;}
  40%{opacity: 0;}
}

.banner .image,
.loader .load{
  position: absolute;
  opacity: 0;
  -webkit-animation: round 30s infinite;
  -moz-animation:    round 30s infinite;
  -o-animation:      round 30s infinite; 
  animation:         round 30s infinite;
}

.banner img:nth-child(1),
.loader img:nth-child(1){
  -webkit-animation-delay: 0;
  -moz-animation-delay:    0;
  -o-animation-delay:      0; 
  animation-delay:         0;
}

.banner img:nth-child(2),
.loader img:nth-child(2){
  -webkit-animation-delay: 8s;
  -moz-animation-delay:    8s;
  -o-animation-delay:      8s; 
  animation-delay:         8s;
}

.banner img:nth-child(3),
.loader img:nth-child(3){
  -webkit-animation-delay: 16s;
  -moz-animation-delay:    16s;
  -o-animation-delay:      16s; 
  animation-delay:         16s;
}

.banner img:nth-child(4),
.loader img:nth-child(4){
  -webkit-animation-delay: 24s;
  -moz-animation-delay:    24s;
  -o-animation-delay:      24s; 
  animation-delay:         24s;
}

#mainnav ul{
  padding: 17px;
  background-color: #F5DEB3;
}

#mainnav li{
  margin: 10px 10px 8px;
}

#mainnav li .square{
  background-color: #1c416b;
  border: 2px solid white;
  display: inline-block;
  padding: 3px;
  margin-right: 17px;
}

#mainnav li a{
  font: 14px/18px Ubuntu, arial, helvetica, verdana, sans-serif;
  text-transform: uppercase;
  text-decoration: none;
  color: #1c416b;
}

#mainnav li:hover a,
#mainnav li.active a,
footer li:hover a,
footer li.active a{
  text-decoration: underline;
}

#container{
  width: 960px;
  height: auto !important;
  height: 100%;
  min-height: 100%;
  margin: auto auto -148px;
}

#content{
  width: 960px;
  height: auto;
  margin: auto auto -40px;
  padding-bottom: 25px;
  float: left;
}

footer{
  clear: both;
  width: 100%;
  min-width: 960px;
  height: 44px;
  padding: 32px 0;
  position: relative;
  top: 40px;
  background-color: #F5DEB3;
  color: #FFF;
}

footer .span15{
  margin: -10px auto 0;
  width: 900px;
  float: none;
  text-align: center;
}

footer ul{
  display: inline;
}

footer li{
  display: inline;
  margin-left: 8px;
}

footer li a{
  font: 13px/18px Ubuntu, arial, helvetica, verdana, sans-serif;
  color: #1c416b;
  text-transform: uppercase;
  text-decoration: none;
}

footer small{
  font: 12px/40px arial, helvetica, verdana, sans-serif;
  position: relative;
  top: 10px;
  color: #1c416b;
  text-decoration: none;
}

.sticky{
  position: absolute;
}

.stick-to-top{
  top: 0;
}

.stick-to-bottom{
  bottom: 0;
}

.clearfix{
  clear: both;
}

.clearfix:after {
  content: ".";
  clear: both;
  display: block;
  visibility: hidden;
  height: 0px;
}

.text-right{
  text-align: right;
}

.text-center{
  text-align: center;
}

#maincontent{
  font: 13px/18px arial, helvetica, verdana, sans-serif;
}

#maincontent img{
  float: right;
  margin: 3px 0 20px;
}

#maincontent .imgext img{
  margin: 3px 0 20px 10px;
  width: auto;
}

#maincontent .span5 .teaser img{
  margin: 20px 0 25px;
}

#maincontent .span4 img{
  margin: 3px 0 25px;
}

#maincontent .span5 .teaser p{
  margin: 0 0 25px;
}

#maincontent .square{
  background-color: #FFF;
  padding: 6px;
  margin-right: 15px;
  position: relative;
  top: 13px;
  display: inline-block;
}

#maincontent .square.yello{
  border: 6px solid #D7DF01;
}
#maincontent .square.turkis{
  border: 6px solid #01DFD7;
}

#maincontent .square.red{
  border: 6px solid #EE3151;
}

#maincontent .square.green{
  border: 6px solid #59C156;
}

#maincontent .square.blue{
  border: 6px solid #4CA8EF;
}

#maincontent .square.yellow{
  border: 6px solid #EE9C31;
}

#maincontent .list{
  list-style-type: disc;
  margin-left: 15px;
  margin-bottom: 20px;
}

#maincontent .sublist{
  list-style-type: circle;
  margin-left: 15px;
}

#maincontent .list li:last-child .sublist{
  margin-bottom: -15px;
}

#maincontent .list li{
  padding: 2px 0;
}

#maincontent .list li a{
  color: #000;
  text-decoration: underline;
}

#maincontent .list li.audio{
  list-style-type: none;
  margin: 0 0 10px -15px;
  width: 280px;
}

#maincontent .list li.audio small{
  display: block;
  text-align: right;
}

audio{
  width: inherit;
}

#maincontent .sublist li{
  padding: 5px 0 15px;
}

#maincontent .teaser .list{
  margin: 20px 15px;
}

#maincontent .spacer{
  margin-top: 42px;
}

#maincontent #contactform .spacer{
  margin-top: 60px;
}

.references{
  background: #EDEDED;
  padding: 13px;
  margin: 0 0 23px;
  text-align: center;
}

.references ul{
  background: #FFF;
}

.references a{
  text-decoration: none;
}

.references li{
  display: inline-block;
  padding: 19px 10px 18px;
}

#maincontent .references img{
  margin: 3px 0 0;
}

h1{
  font: 30px/48px Ubuntu, arial, helvetica, verdana, sans-serif;
  text-transform: uppercase;
  display: inline-block;
  margin-bottom: 20px;
  max-width: 857px;
  vertical-align: top;
}

h2,
h2 a{
  font: 14px/21px arial, helvetica, verdana, sans-serif;
  display: block;
  color: #EE3151;
  margin-bottom: 20px;
}

h2{
  color: #000;
  font: 16px/24px arial, helvetica, verdana, sans-serif;
  font-weight: bold;
}

h4 {
  font: 30px/48px Ubuntu, arial, helvetica, verdana, sans-serif;
  text-transform: uppercase;
  display: inline-block;
  margin-bottom: 20px;
  max-width: 857px;
  vertical-align: top;
}

.teaser h4{
  margin-bottom: 0;
}

.teaser h4 a{
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

h2 a{
  font: 13px/18px arial, helvetica, verdana, sans-serif;
  text-decoration: none;
}

h2 a:hover{
  text-decoration: underline;
}

.underlined{
  text-decoration: underline;
}

strong{
  font-weight: bold;
}

#contactform h2{
  height: 40px;
}

.teaser h1{
  margin-bottom: 0;
}

.teaser h1 a{
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

.teaser img{
  margin: 20px 0 25px;
}

a img{
  border-style: none;
}

#maincontent p{
  font: 12px/18px arial, helvetica, verdana, sans-serif;
  margin: 0 0 20px;
}

a.more{
  color: #EE3151;
  text-decoration: none;
  font-weight: bold;
}

a.green{
  color: #298A08;
  text-decoration: none;
  font-weight: bold;
}

a.blue{
  color: #013ADF;
  text-decoration: none;
  font-weight: bold;
}

a.right{
  float: right;
  margin: 12px 0;
}

a.more:hover{
  text-decoration: underline;
}

.two-cols .span4 img{
  margin: 3px 0 0;
}

.two-cols .left-col-alt .span4 img{
  margin: 3px 0 0;
}

.four-cols .span5{
  width: 200px;
  margin-left: 30px;
  margin-right: 2px;
}

#maincontent .four-cols .span5 h2{
  margin: 0 0 10px;
}

#maincontent .four-cols .span5 h2 a{
  margin: 0;
}

#maincontent .four-cols .span5 img{
  max-width: 100%;
  margin: 15px 0 25px;
}

.four-cols .last{
  margin-left: 34px;
}

#contactform {
  margin-top: -20px;
}

#contactform label{
  display: inline-block;
  width: 120px;
}

#contactform label.radiolabel{
  width: auto;
  position: relative;
  top: 3px;
}

#contactform label.consultation{
  vertical-align: baseline;
}

#contactform input{
  background: #F7F7F7;
  border-color: #E3E3E3 #F9F9F9 #F9F9F9 #EAEAEA;
  border-width: 1px;
  border-style: solid;
  border-radius: 2px;
  padding: 4px 5px;
  font: 12px/18px arial, helvetica, verdana, sans-serif;
  width: 165px;
}

#contactform input.short{
  width: 40px;
}

#contactform input.appendix{
  width: 110px;
}

#contactform input[type="checkbox"]{
  width: auto;
  margin: 0 3px 0 0;
  vertical-align: bottom;
  border-style: none;
}

#contactform #submit-contactform{
  margin-top: 12px;
  background: #59C156;
  color: #FFF;
  font: 12px/18px arial, helvetica, verdana, sans-serif;
  font-weight: bold;
  border: 1px solid #59C156;
  border-radius: 2px;
  padding: 5px;
  cursor: pointer;
}

#contactform .checkboxes p{
  margin: 0 0 21px;
}

#maincontent #zoom div{
  margin: 10% auto;
  position: relative;
  width: 900px;
  height: 600px;
}

#maincontent .lightbox .magnifier{
  position: relative;
  top: -55px;
  background: #FFF;
  padding: 8px;
  opacity: .7;
  border-top-left-radius: 5px;
  width: 16px;
  height: 16px;
}

#maincontent .lightbox-target {
  position: fixed;
  top: -100%;
  left: 0;
  width: 100%;
  height: 0;
  background: rgba(0,0,0,.7);
  width: 100%;
  opacity: 0;
  -webkit-transition: opacity .5s ease-in-out;
  -moz-transition: opacity .5s ease-in-out;
  -o-transition: opacity .5s ease-in-out;
  transition: opacity .5s ease-in-out;
  overflow: hidden;
  z-index: 10000;
}

#maincontent .lightbox-target img {
  float: none;
  margin: auto;
  position: absolute;
  top: 0;
  left:0;
  right:0;
  bottom: 0;
  max-height: 0%;
  max-width: 0%;
  border: 3px solid white;
  box-shadow: 0px 0px 8px rgba(0,0,0,.3);
  box-sizing: border-box;
  -webkit-transition: .5s ease-in-out;
  -moz-transition: .5s ease-in-out;
  -o-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
}

#maincontent a.lightbox-close {
  display: block;
  width:50px;
  height:50px;
  box-sizing: border-box;
  background: white;
  color: black;
  text-decoration: none;
  position: absolute;
  top: -80px;
  right: 0;
  -webkit-transition: .5s ease-in-out;
  -moz-transition: .5s ease-in-out;
  -o-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
}

#maincontent a.lightbox-close:before {
  content: "";
  display: block;
  height: 30px;
  width: 1px;
  background: black;
  position: absolute;
  left: 26px;
  top:10px;
  -webkit-transform:rotate(45deg);
  -moz-transform:rotate(45deg);
  -o-transform:rotate(45deg);
  transform:rotate(45deg);
}

#maincontent a.lightbox-close:after {
  content: "";
  display: block;
  height: 30px;
  width: 1px;
  background: black;
  position: absolute;
  left: 26px;
  top:10px;
  -webkit-transform:rotate(-45deg);
  -moz-transform:rotate(-45deg);
  -o-transform:rotate(-45deg);
  transform:rotate(-45deg);
}

#maincontent .lightbox-target:target {
  opacity: 1;
  top: 0;
  bottom: 0;
  height: auto;
}

#maincontent .lightbox-target:target img {
  max-height: 100%;
  max-width: 100%;
}

#maincontent .lightbox-target:target a.lightbox-close {
  top: 0px;
}

#toggleMenu{
  display: none;
}

/* to disable iPad-Zoom set body height +25% */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px)  { 
  body{
    min-height: 125%;
  }
}


/* Smartphones (portrait and landscape) ----------- */
@media only screen and (max-width: 767px) {

  body{
    width: 320px;
    margin: 0 20px;
  }
  
  header,
  #content,
  #container,
  footer{
    max-width: 100%;
  }
  
  header{
    height: auto;
    padding: 0;
    width: auto;
  }
  
  header .span7,
  header .text-right{
    text-align: center;
    width: 100%;
    margin: 0 0 0 -10px;
  }
  
  #logo{
    margin: auto;
    padding: 0;
  }
  
  #logo img{
    display: block;
    margin: 30px auto;
    padding: 0;
    top: 0;
  }
  
  h1{
    max-width: 260px;
  }
  
  .span1,.span2,.span3,.span4,.span5,.span6,.span7,
  .span8,.span9,.span10,.span11,.span12,.span13,.span14,
  .span15,footer .span15{
    width: auto;
    margin: 0;
  }
  
  .span4,
  .span5,
  .span11,
  .span15{
    max-width: 300px;
  }
  
  #maincontent p{
    margin: 0 0 30px;
  }
  
  #maincontent img{
    float: none;
    width: 300px;
    max-width: 100%;
  }
  
  .references{
    width: 270px;
  }
  
  #maincontent .references img{
    width: auto;
  }
  
  .two-cols .span4 img{
    margin: 20px 0 0;
  }
  
  #contactform {
    float: left;
    padding-bottom: 100px;
  }
  
  #contactform h2{
    margin: 20px 0;
  }
  
  #contactform .span5 p{
    float: left;
    min-width: 150px;
    margin: 0 0 5px;
  }
  
  #contactform .span5:last-of-type{
    margin: -47px 0 0;
  }
  
  #contactform label{
    display: inline-block;
  }
  
  #contactform .radiolabel{
    display: inline-block;
  }
  
  #contactform .checkboxes .radiolabel{
    margin-right: 10px;
  }
  
  #contactform .checkboxes{
    margin-top: 40px;
  }
  
  #contactform .consultation{
    display: inline;
  }
  
  #contactform .span7 h2{
    position: absolute;
    top: 665px;
    left: 20px;
    font-size: 14px;
  }
  
  #maincontent #contactform p{
    margin: 0 0 10px;
  }
  
  #maincontent #zoom div{
    margin: 30% auto;
    width: 300px;
    height: 200px;
  }
  
  a.right{
    position: absolute;
    right: 0;
  }

  .banner,
  footer,
  .menu,
  #maincontent #contactform .spacer,
  #maincontent .lightbox .magnifier{
    display: none;
  }
  
  #toggleMenu{
    display: block;
    width: 48px;
    height: 48px;
    position: absolute;
    top: 0;
    left: 0;
    cursor: pointer;
  }
  
  #toggleMenu a{
    display: block;
  }
  
  #toggleMenu a#openBtn{
    display: block;
  }
  
  #toggleMenu a#closeBtn{
    display: none;
  }

  #openNav:target .menu{
    width: auto;
    overflow: visible;
    z-index: 1000;
    position: absolute;
    top: 47px;
    left: 0;
    display: block;
  }
  
  #openNav:target #toggleMenu a#openBtn{
    display: none;
  }
  
  #openNav:target #toggleMenu a#closeBtn{
    display: block;
  }
  
}

/* Smartphones (landscape) ----------- */
@media only screen and (min-width:321px) and (max-width: 767px) {

  body{
    width: auto;
    margin: 0 20px;
  }
  
  #logo,#topnav{
    position: relative;
    left: 10px;
  }
    
  .span4,
  .span5,
  .span11,
  .span15{
    max-width: 510px;
  }
  
  #maincontent p{
    margin: 0 0 30px;
  }
  
  #maincontent img{
    float: none;
    width: 300px;
    max-width: 100%;
  }
  
  #contactform .span7 h2{
    top: 655px;
    left: 18px;
    font-size: 14px;
  }
  
  .three-cols .teaser{
    clear: both;
  }
  
  .four-cols .teaser{
    min-height: 350px;
  }
  
  #maincontent .teaser h1{
    width: 100%;
  }
  
  .references{
    width: 460px;
  }
  
  h1{
    max-width: 420px;
  }
  
  #contactform .span8{
    width: 100%;
  }
  
  #contactform .span5:last-of-type{
    margin: -22px 0 0;
  }
  
  #contactform #submit-contactform{
    left: -302px;
  }
}