/* FONTS */

@font-face {
    font-family: 'open_sansregular';
    src: url('../../files/h2/fonts/OpenSans-Regular-webfont.eot');
    src: url('../../files/h2/fonts/OpenSans-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../../files/h2/fonts/OpenSans-Regular-webfont.woff') format('woff'),
         url('../../files/h2/fonts/OpenSans-Regular-webfont.ttf') format('truetype'),
         url('../../files/h2/fonts/OpenSans-Regular-webfont.svg#open_sansregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'open_sanssemibold';
    src: url('../../files/h2/fonts/OpenSans-Semibold-webfont.eot');
    src: url('../../files/h2/fonts/OpenSans-Semibold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../../files/h2/fonts/OpenSans-Semibold-webfont.woff') format('woff'),
         url('../../files/h2/fonts/OpenSans-Semibold-webfont.ttf') format('truetype'),
         url('../../files/h2/fonts/OpenSans-Semibold-webfont.svg#open_sanssemibold') format('svg');
    font-weight: normal;
    font-style: normal;

}

html,body{
	width: 100%;
	height: 100%;
	margin:0;
	padding:0;
	color: #666666;
	font: 105%/1.8 'open_sansregular', sans-serif;
}

/*  SECTIONS  */
.section {
	clear: both;
	padding: 0px;
	margin: 0px;
}

/*  COLUMN SETUP  */
.col {
	display: block;
	float:left;
	margin: 1% 0 1% 5%;
}
.col:first-child { margin-left: 0; }

/*  GROUPING  */
.group:before,
.group:after { content:""; display:table; }
.group:after { clear:both;}
.group { zoom:1; /* For IE 6/7 */ }

/*  GRID OF TWELVE  */
.span_12_of_12 {
	width: 100%;
}

.span_11_of_12 {
  	width: 91.25%;
}
.span_10_of_12 {
  	width: 82.5%;
}

.span_9_of_12 {
  	width: 73.75%;
}

.span_8_of_12 {
  	width: 65%;
}

.span_7_of_12 {
  	width: 56.25%;
}

.span_6_of_12 {
  	width: 47.5%;
}

.span_5_of_12 {
  	width: 38.75%;
}

.span_4_of_12 {
  	width: 30%;
}

.span_3_of_12 {
  	width: 21.25%;
}

.span_2_of_12 {
  	width: 12.5%;
}

.span_1_of_12 {
  	width: 3.75%;
}

/* LAYOUT */

*{
  box-sizing: border-box;
  transition: all .5s ease-in-out;
}

a{
  color: #666666;
	text-decoration: none;
}
ul, figure{
  margin: 0;
  padding: 0;
}
li{
  list-style: none;
}

img, svg{
  display: block;
  max-width: 100%;
  height: auto;
}

.bg-img{
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}

.mob, .invisible{
  display: none;
}

.expl{
  font-size: 75%;
}

noscript{
  display: block;
  padding: 1em;
  color: #fff;
  text-align: center;
  background: #ed1c00;
  box-sizing: border-box;
}

noscript p{
  margin: 0;
}

noscript a{
  color: #fff;
}

/* header */

header{
	position: fixed;
	top: 0;
  left: 0;
	width: 100%;
  z-index: 500;
  overflow: visible;
  box-shadow: 0 .25em .5em rgba(0,0,0,.5);
}

body.noJS header{
  position: relative;
}

header .cw{
  overflow: visible;
}

.article-header{
	background: #666666;
  padding: 0 5em;
}

.article-header .cw{
	position: relative;
}

.logo-badge{
	position: absolute;
	transform: translateY(-120%);
	display: inline-block;
	padding: .75em;
	background: #6AB023;
	box-shadow: 0 .25em .5em rgba(0,0,0,.5);
  box-sizing: border-box;
}

body.noJS .logo-badge{
  display: none !important;
}

.logo-badge.active{
	transform: translateY(0);
}

.article-header nav li{
  float: right;
}

.article-header nav li a, .article-header nav li span{
  display: block;
  padding: 1em 2em;
  color: #fff;
  cursor: pointer;
}

.article-header nav li span:after{
  display: inline-block;
  margin-left: .25em;
  content: '>';
  font-family: 'open_sanssemibold';
  vertical-align: middle;
  transition: all .25s ease-in-out;
  transform: rotate(90deg);
  opacity: .5;
}

.article-header nav.active li span:after{
  transform: rotate(270deg);
}

.article-header nav li a:hover, .article-header nav li span:hover{
  background: rgba(0,0,0,.2);
}

/* content */

#hero{
  background: url('../../files/h2/images/hero/lebensfreude.jpg') center;
  background-size: cover;
}

.cw{
  position: relative;
  overflow: hidden;
  max-width: 1200px;
  margin: 0 auto;
}

#hero img, #hero figure{
  height: 100%;
  width: auto;
  max-width: inherit;
  margin: 0;
}

#hero svg{
  position: relative;
  display: block;
}

#hero .logo{
  padding: 3em  0 0;
}

.claim{
  margin: 20em 0 5em 0;
}

#main .section {
  padding: 5em 5em 10em
}

#main #hero {
  padding: 0 5em;
}

.bg {
  color:#fff;
  background: rgb(93,153,30);
  background: -moz-linear-gradient(-45deg, rgba(93,153,30,1) 0%, rgba(106,176,35,1) 40%, rgba(106,176,35,1) 60%, rgba(93,153,30,1) 100%);
  background: -webkit-linear-gradient(-45deg, rgba(93,153,30,1) 0%,rgba(106,176,35,1) 40%,rgba(106,176,35,1) 60%,rgba(93,153,30,1) 100%);
  background: linear-gradient(135deg, rgba(93,153,30,1) 0%,rgba(106,176,35,1) 40%,rgba(106,176,35,1) 60%,rgba(93,153,30,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5d991e', endColorstr='#5d991e',GradientType=1 );
}

.bg.grey {
  background:#666;
}

.ce_headline {
  text-align: center;
}

.ce_headline + .col {
  margin-left:0;
}

h2 {
  display: inline-block;
  position: relative;
  padding: .5em;
  font-size: 2.5em;
  font-weight: normal;
  line-height: 1;
  text-align: center;
  border-bottom: 1px solid #666;
}

h2:after {
  display: block;
  position: absolute;
  bottom: -0.395em;
  left: 50%;
  transform: translateX(-50%);
  content: "x";
  font-size: .7em;
  line-height: 1;
}

.bg h2{
  color:#fff;
  border-bottom: 1px solid #fff;
}

.icenter {
  text-align: center;
}

.rounded {
  border-radius: 50%;
  display: inline-block;
}

blockquote {
  font-size: 1.7em;
  line-height: 1.3em;
  max-width: 350px;
  display: inline-block;
  margin: 0;
  position: relative;
}

blockquote:before, blockquote:after {
  display: block;
  position: absolute;
  top: .3em;
  left: -.25em;
  content: '“';
  font-size: 3em;
  line-height: 0;
  color: rgba(255,255,255,.25);
}

blockquote:after {
  display: none; /*dev*/
  right: -.5em;
  bottom: 0;
  top: inherit;
  left: inherit;
  transform: scale(-1);
}

strong{
  font-weight: bold;
}

#mitarbeiter {
  background: url('../../files/h2/images/mitarbeiter/sababurg.jpg') center fixed;
  background-size: cover;
  padding: 5em 0 6em !important;
}

#mitarbeiter h2 {
  text-shadow: 0 .1em .1em rgba(0,0,0,.8);
  border: none;
  font-family: 'open_sanssemibold';
  line-height: 130%;
  margin: 0 auto;
  padding: 0;
  max-width: 700px;
}

#mitarbeiter h2:after {
  display:none;
}

.ce_headline p {
  font-size: 1.7em;
  text-shadow: 0 .1em .1em rgba(0,0,0,.8);
}

.rotate {
  transform: scaleX(-1);
}

#mitarbeiter .section{
  padding: 5em !important;
}

#mitarbeiter figure {
  position:relative;
  display:inline-block;
}

#mitarbeiter p{
  margin: 0;
}

#mitarbeiter .section.bg.full p{
  margin-top: .5em;
  line-height: 1.25;
}

.overlay, #lightbox{
  position:absolute;
  top: 0;
  left: 0;
  background: rgba(102,102,102,.75);
  width: 100%;
  height: 100%;
}

#lightbox div, #lightbox{
  height: 0;
  overflow: hidden;
  opacity: 0;
  transition: opacity .5s ease-in-out;
}

.frame.active .col.span_6_of_12 figure, .frame.active .col.span_6_of_12 p{
  opacity: 0;
}

#lightbox .close, .frame.active #lightbox, .frame.active #lightbox.hoeranalyse div.hoeranalyse, .frame.active #lightbox.beratung div.beratung, .frame.active #lightbox.hoergeraete div.hoergeraete, .frame.active #lightbox.gehoerschutz div.gehoerschutz, .frame.active #lightbox.tinnitus div.tinnitus, .frame.active #lightbox.termin div.termin{
  height: 100%;
  opacity: 1;
  transition: opacity .5s ease-in-out;
  overflow-y: scroll;
}

#mitarbeiter .overlay{
  text-shadow: 0 .1em .1em rgba(0,0,0,.8);
  display: flex;
  justify-content: center;
  opacity: 0;
}

#mitarbeiter figure:hover .overlay {
  opacity: 1;
}

#mitarbeiter p {
  font-size: 1.2em;
}

#mitarbeiter .span_12_of_12 {
  padding: 5em 5em 10em;
}

#mitarbeiter .overlay p {
  padding: 0 1.5em;
  margin: 1em 0;
}

.full {
  width: 100%;
  margin: 0 !important;
  padding: 5em 0 !important;
}

.full .full {
  padding: 0 5em !important;
}

#mitarbeiter .section.bg.full {
  display: flex;
  justify-content: center;
}

#mitarbeiter .col.icenter.block {
  max-width: 600px;
}

#leistungen{
  cursor: pointer;
}

#leistungen figure {
  position:relative;
  margin: 0 auto;
}

.icenter img{
  margin: 0 auto;
}

#leistungen .section {
  padding: 0;
}

#leistungen .span_6_of_12 {
  margin: 0;
  width: 50%;
}

#leistungen .col {
  text-align: center;
  background-size: cover;
}

#leistungen .col img {
  display: inline-block;
}

#leistungen figure {
  margin: 1.5em 0 0;
}

#leistungen .col.hoeranalyse {
  background: url('../../files/h2/images/leistungen/hoeranalyse.jpg') no-repeat;
}

#leistungen .col.beratung {
  background: url('../../files/h2/images/leistungen/beratung.jpg') no-repeat;
}

#leistungen .col.hoergeraete {
  background: url('../../files/h2/images/leistungen/hoergeraete.jpg') no-repeat;
}

#leistungen .col.gehoerschutz {
  background: url('../../files/h2/images/leistungen/gehoerschutz.jpg') no-repeat;
}

#leistungen .col.tinnitus {
  background: url('../../files/h2/images/leistungen/tinnitus.jpg') no-repeat;
}

#leistungen .col.termin {
  background: #6ab023;
}

#leistungen .section .col.termin:before{
  display: none;
}

#leistungen .section .col:before {
  display: block;
  position: absolute;
  content: '';
  width: 100%;
  height: 100%;
  background: rgba(102,102,102,.75);
  top: 0;
  left: 0;
}

#leistungen .section .col:hover:before {
  background: rgba(106,176,35,.75);
}

body.mobile #leistungen .section .col:hover:before {
  background: rgba(102,102,102,.75);
}

#leistungen .col.span_6_of_12 {
  min-height: 200px;
  position: relative;
  display: flex;
  text-align: center;
  justify-content: center;
  flex-wrap: wrap;
  flex-direction: column;
  background-size: cover;
}

#leistungen p {
  position: relative;
  margin: 0 0 1.5em;
  overflow: hidden;
}

#leistungen .section .col:hover p {
  height: 0;
  margin: 0;
  opacity: 0;
}

#leistungen .section .col:hover img {
  transform: scale(2);
}

body.mobile #leistungen .section .col:hover img {
  transform: scale(1);
}

#leistungen .section .col:hover figure {
  margin: 1.5em 0;
}

#leistungen .section {
  display: flex;
  align-items: stretch;
}

#leistungen .section.frame {
  display: block;
}

.section.frame {
  position: relative;
}

#leistungen #lightbox {
  padding: 0;
}

#leistungen .frame.active #lightbox {
  padding: 1.5em;
  overflow-y: scroll;
}

#leistungen h3 {
  margin-top: 0;
  color: #6ab023;
}

#leistungen .close{
  position: absolute;
  right: 0;
  top: 0;
  color: #6ab023;
  font-size: 2.5em;
  margin-right: .5em;
}

#leistungen .span_6_of_12, .close{
  cursor: pointer;
}

#kontakt h4 {
  margin: 0;
}

#kontakt svg {
  margin: 1.5em 0 0;
}

.button {
  width: 100%;
  background-color: #6ab023;
  color: #fff;
  text-align: right;
  text-decoration: none;
  display: inline-block;
  padding: .2em 1em;
  position: absolute;
  bottom: 0;
  right: 0;
}

.button img {
  margin: 0 .125em;
}

#kontakt .button:hover {
  background: #666;
  color: #fff;
}

#kontakt .button:hover img {
  margin-left: .25em;
}

.anfahrt {
  position: relative;
}

.anfahrt figure a > img {
  width: 100%;
}

.anfahrt figure a.button > img {
  width: auto;
}

.button img {
  display: inline-block;
  margin: 0 .125em;
}

#kontakt .button:hover img {
  margin: 0 0 0 .25em;
}

#kontakt .section{
  padding: 0;
}

#kontakt .section p{
  margin: 0;
}

#kontakt h3{
  margin: 0;
}

#kontakt a:hover{
  color: #6ab023;
}

#kontakt .span_9_of_12, #kontakt .span_3_of_12{
  margin: 0;
}

#kontakt .span_1_of_12 {
  padding-top: .5em;
}

#kontakt .span_6_of_12 .section{
  margin-top: 1em;
}

#footer {
  padding: 2em 0;
  background: #666;
  color: #fff;
  text-align: center;
}

#footer .section > .col{
  float: none;
}

#footer a {
  color: #fff;
  font-size: 75%;
  opacity: .75;
}

body.sub #footer a {
  font-size: 100%;
  opacity: 1;
}

#footer nav, #footer p{
  margin: 2em 0 2.5em;
}

#footer nav li{
  margin: .25em 0;
  opacity: .5;
}

#footer nav li.topic{
  margin-top: 1em;
  opacity: .75;
}

body.sub #footer{
  background: #6ab023;
}

hr {
    width: 100%;
    margin: 6em 0;
    border: none;
    border-bottom: 1px solid rgba(103,108,109,.2);
}

.formular h3{
  color: #6ab023;
  font-size: 1.6em;
  line-height: 37px;
}

.formular form {
  padding: 1em 1.5em 1.5em;
  background: rgba(142, 142, 142, 0.1);
  z-index: 50;
}

.formular form .widget {
  width: 100%;
  margin: .75em 0;
  display: inline-block;
}

.formular p.error{
  color: red;
}

.formular label {
    color: rgba(0,0,0,.5);
}

.formular label a{
  border-bottom: 1px solid #6ab023;
}

.formular input, .formular textarea, .formular select, .formular option {
  margin-bottom: .5em;
  padding: .5em;
  font: 100%/1.7 'open_sansregular', sans-serif;
  border: none;
  color: rgba(0,0,0,.5);
  background: #fff;
  transition: none;
}

.formular input:focus, .formular select:focus{
  box-shadow: 0 0 0 1px #326FB0;
}

.formular form .widget.widget-explanation{
  margin: 2em 0 0 0;
}

.formular form .widget.widget-explanation p{
  margin: 0;
}

form .submit_container{
  margin: 1em 0;
}

.formular form .submit_container input{
  margin: 0;
  padding: 0;
  background: none;
  color: #fff;
  cursor: pointer;
}

form .submit_container:hover {
  background: #666;
  color: #fff;
}

form .submit_container{
  padding: .45em 1em;
  background: #6ab023;
  display: inline-block;
  margin-bottom: 0;
  padding: .75em 1em;
  font: 100%/1.7 'open_sansregular', sans-serif;
  cursor: pointer;
}

.explanation {
  font-size: 75%;
}

.formular fieldset{
  border: none;
  padding: 0;
}

.formular .checkbox_container span{
  display: inline-block;
  width: 100%;
}

.formular .checkbox_container label, .formular .radio_container label{
	cursor: pointer;
}

.formular input.checkbox, .formular input.radio{
	position: relative;
	width: .75em;
	height: .75em;
	margin: 0;
	padding: 0;
	border: .2em solid rgba(255,255,255,0);
	border-radius: 50%;
	cursor: pointer;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

.formular input.checkbox:before, .formular input.radio:before{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #676c6d;
	border-radius: 100%;
	content: '';
	opacity: 0;
}

.checkbox_container .invisible, label.invisible {
  display: none;
}

.formular .checkbox_container span.mandatory{
  display: initial;
}

.formular input.checkbox:checked:before, .formular input.radio:checked::before{
	opacity: 1;
}

.formular .checkbox_container legend{
  color: rgba(0,0,0,.5);
}

.formular .textarea {
  min-height: 140px;
  resize: vertical;
  width: 70% !important;
}

.widget-text input {
  width: 70% !important;
}

.formular form .widget-textarea {
  display: inline-flex;
  align-items: center;
}

.widget-text label, .widget-textarea label{
  width: 20% !important;
  display: inline-block;
}

.formular span.mandatory {
  color: #6ab023;
  margin-right: .1em;
}

.formular .widget-checkbox.mandatory {
  font-size: .9em;
  margin: 1em 0;
  display: block;
}

.formular form .widget-captcha{
  display: inline-flex;
  align-items: stretch;
  flex-wrap: wrap;
  margin: .75em 0;
}

input#ctrl_8{
  width: 90%;
  order: 2;
}

#captcha_text_8{
  order: 1;
}

.widget-captcha label{
  margin-right: 2em;
}

.danke .back a{
  color: #6ab023;
  margin-top: 3em;
  display: block;
  opacity: .7;
  font-size: .9em;
}

@media only screen and (min-width: 2000px) {
  #wrapper{
    width: 2000px;
    margin: 0 auto;
    box-shadow: 0 .25em 2em rgba(0,0,0,.5);
  }
}

@media only screen and (min-width: 1220px) {
  .bg-img img, .bg-img, #hero > .cw, #mitarbeiter .cw{
    width: 100% !important;
    max-width: inherit;
    height: auto;
  }
}

@media only screen and (max-width: 915px) {
  .formular .textarea, .widget-text input, input#ctrl_8 {
    width: 100% !important;
  }

  .formular form .widget-textarea  {
    display: block;
  }
}

@media only screen and (max-width: 870px) {
  #main .section{
    padding: 5em 2.5em;
  }
  #leistungen .section, #kontakt .span_6_of_12 .section, #kontakt .adresse{
    padding: 0;
  }
  #mitarbeiter .section{
    padding: 5em 2.5em !important;
  }
  #mitarbeiter .span_12_of_12{
    padding: 5em 2.5em 10em;
  }
  .article-header, #main #hero{
    padding: 0 2.5em;
  }
}

@media only screen and (max-width: 795px) {
  .logo-badge{
    display: none !important;
  }
  header .cw{
    padding: 0;
  }
  .article-header nav li{
    width: 33.333%;
    text-align: center;
  }
  body.sub .article-header nav li{
    width: 100%;
  }
  .article-header nav li a, .article-header nav li span{
    padding: .75em 0;
  }
}

@media only screen and (max-width: 740px) {
	.col {  margin: 1% 0 1% 0%; }

    .span_1_of_12, .span_2_of_12, .span_3_of_12, .span_4_of_12, .span_5_of_12, .span_6_of_12, .span_7_of_12, .span_8_of_12, .span_9_of_12, .span_10_of_12, .span_11_of_12, .span_12_of_12 {
	width: 100%;
	}
  #mitarbeiter .section.bg.full{
    flex-direction: column;
  }
  #mitarbeiter .cw .col.icenter:first-child{
    margin-bottom: 5em;
  }
  #fachgeschaeft .col.span_6_of_12{
    margin-bottom: 2.5em;
  }
  #fachgeschaeft img{
    width: 100%;
  }
  #leistungen .section{
    flex-direction: column;
  }
  #leistungen .col.span_6_of_12{
    width: 100%
  }
  #kontakt{
    text-align: center;
  }
  #kontakt .span_1_of_12 img{
    display: inline-block;
    width: 2em;
  }
  #kontakt .span_1_of_12{
    text-align: center;
  }
  #kontakt .span_6_of_12 .section{
    margin-top: 2.5em;
  }
  #kontakt .span_6_of_12 .section:first-child{
    margin-top: 0;
  }
  #kontakt .anfahrt{
    margin-top: 3em;
  }
  #kontakt .span_6_of_12 .section .section{
    margin: 0;
  }

  #kontakt form{
    text-align: left;
  }
}

@media only screen and (max-width: 650px) {
  #hero{
    background: url('../../files/h2/images/hero/lebensfreude_650.jpg') center;
  }
}

@media only screen and (max-width: 500px) {
  h2{
    font-size: 2em;
  }
  .article-header{
    padding: 0;
  }
  .article-header nav li{
    height: 0;
    opacity: 0;
    width: 100%;
    text-align: center;
    overflow: hidden;
  }
  nav.active span{
    background: rgba(0,0,0,.2);
  }
  .mob.vis500, .article-header .mob.vis500, .article-header nav.active li{
    display: block;
    height: auto;
    opacity: 1;
  }
  nav ul{
    display: flex;
    flex-direction: column;
  }
  nav li:nth-child(2){
    order: 4;
  }
  nav li:nth-child(3){
    order: 3;
  }
  .article-header nav li a{
    padding: 2em 0;
  }
  .nav-overlay{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 0;
    content: '';
    background: rgba(0,0,0,.5);
    opacity: 0;
    z-index: 499;
    transition: 1s opacity ease-in-out;
  }
  body.active-nav .nav-overlay{
    height: 100%;
    opacity: 1;
  }
  header .inside{
    z-index: 500;
    position: relative;
  }
  #main .section {
    padding: 5em 1.5em;
  }
  #leistungen .section, #kontakt .span_6_of_12 .section, #kontakt .adresse{
    padding: 0;
  }
  blockquote::before{
    display: none;
  }
}

@media only screen and (max-width: 430px) {
  #hero{
    background: url('../../files/h2/images/hero/lebensfreude_430.jpg') center;
  }

  .formular form {
    padding: .75em .75em 1.2em;
  }

  .widget-captcha label{
    margin-right: 0;
  }
}