/* CSS Document */

/* poppins-300 - latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 300;
  src: local(''),
       url('../fonts/poppins-v15-latin-300.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../fonts/poppins-v15-latin-300.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* poppins-regular - latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  src: local(''),
       url('../fonts/poppins-v15-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../fonts/poppins-v15-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* poppins-600 - latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  src: local(''),
       url('../fonts/poppins-v15-latin-600.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../fonts/poppins-v15-latin-600.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}


html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,address,cite,code,del,dfn,em,img,ins,q,small,strong,sub,sup,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{border:0;margin:0;padding:0}article,aside,figure,figure img,figcaption,hgroup,footer,header,nav,section,video,object{display:block}a img{border:0}figure,figure img{padding: 0; margin: 0;}

html{width: 100%;  overflow-x: hidden !important;height: auto;}
body{font-family: 'Poppins', sans-serif; font-size:15px; font-weight: 400; color: #fff;  width: 100%;}

*{box-sizing: border-box;}
.text-center{text-align: left;}
.text-right{text-align: left;}
.text-left{text-align: left;}
.display{display: none;}
.mobil{display: inherit;}
.clear{clear: both;}

strong{font-weight: 600;}

p{margin-bottom: 20px;}

h1{font-weight: 400;  font-size: 1.3em; margin-bottom: 30px;  color: #428f29; clear: both; position: relative; width: 100%; display: inline-block; text-transform: uppercase;}
h1 span.headline-small{text-transform: none; font-size: 0.75em; font-weight: 500;color: #fff;}
h2{font-weight: 300;  font-size: 1.2em; margin: 0px 0 40px 0; color: #fff;  padding: 5px 10px;
background: #353535;background: -moz-linear-gradient(left,  #353535 0%, #272727 100%); background: -webkit-linear-gradient(left,  #353535 0%,#272727 100%); background: linear-gradient(to right,  #353535 0%,#272727 100%); }
.galerie h2{margin-top: 50px;}
h3{font-size: 1.0em; font-weight: 300; color: #428f29; text-transform: uppercase; background: #fff; text-align: center; width: 90%; margin: 0 auto; position: relative;margin-bottom: 10px; margin-top: -15px; z-index: 20;}
h4{font-weight: 400;  font-size: 1.3em; margin-bottom: 20px;}


.row{width: 100%; display: inline-block;}
[class*='col-']{width: 100%; padding: 0 0px; position: relative;}

header, aside, section, main, footer{width: 100%; display: inline-block; position: relative; padding: 0px 10px;}

.wrap{width: 100%; ;}
header{background: url(../images/bg_header.jpg) #151515 repeat-x; padding-top: 10px;}
header .logo{text-align: center;}
header .logo img{width: 50%; height: auto;}

header .hamburger {  padding: 10px 10px;  display: inline-block;  cursor: pointer;  transition-property: opacity, filter;  transition-duration: 0.15s;  transition-timing-function: linear;  font: inherit;  color: inherit;  text-transform: none;  background-color: #428f29; border: none;  border-bottom: 1px solid #fff;  margin: 0;  overflow: visible; position:relative; width: 100%; text-align: center; margin-top: 10px;}
header .hamburger:hover {    opacity: 0.7; }
header .hamburger-box {  width: auto;  height: 24px;  display: inline-block;  position: relative; }
header .hamburger-inner {  display: block;  top: 50%;  margin-top: -2px; margin-left: -60px;}
header .hamburger-inner, header .hamburger-inner::before, header .hamburger-inner::after {    width: 40px;    height: 4px;    background-color: #fff;    border-radius: 4px;    position: absolute;
    transition-property: transform;    transition-duration: 0.15s;    transition-timing-function: ease; }
header .hamburger-inner::before, header .hamburger-inner::after {    content: "";    display: block; }
header .hamburger-inner::before {    top: -10px; }
header .hamburger-inner::after {bottom: -10px; }
header .hamburger--spring .hamburger-inner {  top: 2px;  transition: background-color 0s 0.13s linear; }
header .hamburger--spring .hamburger-inner::before {    top: 10px;    transition: top 0.1s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19); }
header .hamburger--spring .hamburger-inner::after {    top: 20px;    transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19); }
header .hamburger--spring.is-active .hamburger-inner {  transition-delay: 0.22s;  background-color: transparent; }
header .hamburger--spring.is-active .hamburger-inner::before {    top: 0;    transition: top 0.1s 0.15s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1);    transform: translate3d(0, 10px, 0) rotate(45deg); }
header .hamburger--spring.is-active .hamburger-inner::after {    top: 0;    transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1); transform: translate3d(0, 10px, 0) rotate(-45deg); }

header .hamburger-inner span{margin-left: 60px;font-size: 1.3em;text-transform: uppercase; color: #fff;}

nav.main-nav{width: 100%; padding: 0; border: none; display: inherit;}
nav.main-nav ul{position: absolute;right: 0px; left: 0; top: -290px;margin-left: 0px;width: 100%;z-index: 10; background:#428f29; list-style: none; border: none;}
nav.main-nav ul li{margin:0px !important; max-width:none; /*white-space:nowrap;*/ text-align: left; border: none;  border-top: none;border-bottom: none;}
nav.main-nav ul ul{position: relative;right: 0px; left: 0; top: 0px;margin-left: 0px;width: 100%;z-index: 10; background:#428f29; list-style: none; border: none;}
nav.main-nav ul li a{min-height:auto;width: 100%;	margin:0px;	float:none; display: block; font-size: 1.1em; padding: 10px 15px 10px 15px;  height: inherit;  color: #fff;  text-decoration: none; font-weight: 300;}
nav.main-nav ul li span{background: #29531a; color: #fff;min-height:auto;width: 100%;	margin:0px;	float:none; display: block; font-size: 1.1em; padding: 10px 15px 10px 15px;  height: inherit; text-decoration: none; font-weight: 300; border-bottom: 1px dashed #fff; border-top: 1px solid #fff;}
nav.main-nav ul li.stat3{border-bottom: 1px solid #fff;}
nav.main-nav ul li{display:none; float:none;	}
/*nav.main-nav ul li:hover a{color:  #fff; background: #dd4a43;}
nav.main-nav ul li ul li:hover a{color:  #fff; background: #585858;}*/

header .toogle-box {	min-height: 0;	display: inline-block;	position: relative;	width: 100%;	padding: 0;	margin-bottom: 30px;}
header .toogle-box h5{font-size: 1.1em;  font-weight: 400;  letter-spacing: 0px;  display: block;  cursor: pointer;  text-align: left;  width: 90%;
  margin: 0 auto; position: relative;}

header .toogle-text {  color: rgba(255, 255, 255, 1);  position: relative;  overflow: hidden;  opacity: 1;  transform: translate(0, 0);  z-index: 2;  transition:all 500ms ease;   width: 90%;  margin: 0 auto;padding: 10px 0 5px 0;}
header .toogle-text, header .toogle-box ul li i:before, header .toogle-box ul li i:after {  transition: all 0.25s ease-in-out;}
header .toogle-box ul {  list-style: none;  padding: 0;  margin: 0;   	}
header .toogle-box ul li {		position: relative;		padding: 0;		margin: 0;		padding-bottom: 10px;		padding-top: 5px;		border-top: 1px dotted #dce7eb;		background-color: #303030;		margin-top: 10px;}
header .toogle-box ul li:after{content: "";				position: absolute; width: 50%; height: 7px; bottom: 0px; display: block; left: 25%;}
header .toogle-box ul ul li:after{display: none;}
header .toogle-box ul li h5 i{			position: absolute;			transform: translate(-6px, 0);			margin-top: -3px;			right: 25px;}
header .toogle-box ul li h5 i:before,header .toogle-box ul li h5 i:after {				content: "";				position: absolute;				background-color: #fff;				width: 3px;height: 16px;	}
header .toogle-box ul li h5 i:before {			  transform: translate(2px, 0) rotate(45deg);			}
header .toogle-box ul li h5 i:after {transform: translate(2px, 0) rotate(-45deg);}
header .toogle-box ul li input[type=checkbox] {position: absolute;cursor: pointer;width: 100%;height: 100%;z-index: 1;opacity: 0;}
header .toogle-box ul li input:checked ~ .toogle-text {margin-top: 0;max-height: 0;opacity: 0;transform: translate(0, 50%);	}
header .toogle-box ul li input:checked ~ h5 i:before {margin-top: 9px;height: 9px;	transform: translate(2px, 0) rotate(45deg);	}
header .toogle-box ul li input:checked ~ h5 i:after {	margin-top: 9px;	height: 9px;	transform: translate(-2px, 0) rotate(-45deg);	}

header .toogle-box p span{background: #fff; color: #303030; display: block; font-weight: 600; text-align: center; width: 20px; margin-right: 10px; float: left;}
header .toogle-box p a{color: #fff; text-decoration: none;}

header .bildwechsel{width: 100%; height: 180px; display: block; position: relative; z-index: 10; border: 5px solid #fff; box-shadow: 0px -8px 6px -6px #000;}
header .bildwechsel .flexslider{width: 100%; height: 170px; display: block; position: relative; background: none; border-radius: 0;overflow: hidden; margin: 0 0 20px;}
header .bildwechsel .flexslider ul li{width: 100%; height: 170px; display: block;}
header .bildwechsel::after{content:""; position: absolute; right: -5px; top: -14px; bottom: -5px; height: 209px;width: 100px; display: block;background:url(../images/overlay_slider.png) no-repeat; background-size: cover; z-index: 9999;}


main{/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#151515+0,3d3d3d+100 */
background: #151515; /* Old browsers */
background: -moz-linear-gradient(top,  #151515 0%, #3d3d3d 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #151515 0%,#3d3d3d 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #151515 0%,#3d3d3d 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#151515', endColorstr='#3d3d3d',GradientType=0 ); /* IE6-9 */
padding: 50px 10px;
}

main a{color: #428f29; font-weight: 600; text-decoration: none; word-wrap: break-word !important;}
main ul{margin: 0 0 15px 15px;}

main .innerbox{width: 100%; margin-bottom: 60px; text-align: center; min-height: 150px;}
main .maschinen .innerbox{ min-height: 520px;}
main .innerbox figure{width: 100%; position: relative; overflow: hidden}
main .innerbox figure::before{width: 100%; background: #323232;background: -moz-linear-gradient(-45deg,  #323232 0%, #202020 100%);
background: -webkit-linear-gradient(-45deg,  #323232 0%,#202020 100%); background: linear-gradient(135deg,  #323232 0%,#202020 100%);
display: block; position: absolute; content: ""; top: -10px; left: 0; bottom: 0; z-index: 5;
}
main .innerbox figure img{width: 95%; height: auto;margin: 10px 0 0 10px; position: relative; z-index: 10;}
main .innerbox figure::after{position: absolute; bottom: 0; right: 0;  left: 10px; width: 100%; content: ""; background:url(../images/overlay_leistungen.png) no-repeat; background-size: contain; height: 100px; display: block; z-index: 15;}

main .innerbox > a {	position: absolute;	top: 0;	left: 0;	bottom: 0; width: 100%;	height: 100%;	z-index: 1000;	text-indent: 200%;	white-space: nowrap;	font-size: 0;	opacity: 0;}

main .innerbox-round{width: 200px; height: 200px; border-radius: 70px; margin:  0 15px 15px 0; overflow: hidden; float: left;background: #323232;background: -moz-linear-gradient(-45deg,  #323232 0%, #202020 100%); background: -webkit-linear-gradient(-45deg,  #323232 0%,#202020 100%); background: linear-gradient(135deg,  #323232 0%,#202020 100%); padding: 10px 0 0 10px; position: relative}
main .innerbox-round figure{width: 100%; position: relative; overflow: hidden; border-radius: 70px;}

main .innerbox-round > a {	position: absolute;	top: 0;	left: 0;	bottom: 0; width: 100%;	height: 100%;	z-index: 1000;	text-indent: 200%;	white-space: nowrap;	font-size: 0;	opacity: 0;}
main .innerbox-round:hover a{background:url(../images/galerie-search.png) no-repeat center center;  opacity: inherit}
main .innerbox-round:hover img{-webkit-filter: blur(1px);  filter: blur(1px);}


main .innerbox ul{margin: 0 10px 15px 35px;}
main .banner{text-align: center;}
main .banner a{width: auto; height: auto; display: inline-block;}
main .banner a img{width: 100%; height: auto;}

footer{background: #428f29; padding: 10px;}
footer a{color: #fff; text-decoration: none;}




.formular{padding: 10px 0; width: 100%; color: #fff;}
.formular .daten{float: left;width: 100%; margin-bottom: 40px; text-align: left !important;}
.formular .mitteilung{float: left;width: 100%; text-align: left !important;}
.formular .mitteilung .bereiche{width: 100%; padding-bottom: 30px;}
form label {	line-height:1.4;	vertical-align:top;	width:100%;	clear: both; font-size: 1.0em; font-weight:300; margin-top: 10px; color:  #fff; display: block;}
input, select {	border:1px solid rgba(230,230,230,0.9);	 width: 95%;color: #474747; height: 30px;	clear: both;font-family: 'Fira Sans', sans-serif; font-weight:400;  font-size: 0.9em; }
input[type="submit"]{background: #fff;  width: 100%; text-align: center; text-transform:uppercase; float: left; margin-top: 10px; height: 50px; line-height:50px; color: #428f29; border: 1px solid #428f29;}
textarea{border:1px solid rgba(238,238,238,0.9);width: 100%; height: 300px;font-family: 'Fira Sans', sans-serif; font-size: 0.9em; font-weight: 400; color: #474747}
input:focus {	color: #474747;	border: 1px solid #428f29;	background: rgba(255,255,255,0.8);}
textarea:focus {	color: #474747;	border: 1px solid #428f29;	background: rgba(255,255,255,0.8);}
form .bereiche label{display: inline;}
.formular a{color:#428f29; font-weight: 500; text-decoration: none;}

form fieldset fieldset label {	display:block;	width:auto;}
.error input {    color: red;}

@media screen and (min-width: 430px){
h1{font-size: 1.6em;}
h2{font-size: 1.4em;}
header .bildwechsel{height: 210px;}
header .bildwechsel .flexslider, header .bildwechsel .flexslider ul li{height: 200px;}
header .bildwechsel::after{right: -5px; top: -15px; bottom: -5px; height: 242px;width: 120px; }
nav.main-nav ul{top: -320px;}
}
@media screen and (min-width: 500px){
footer .col-50{width: 48%; float: left; clear: none; margin-right: 2%;}
footer .text-right{text-align: right;}
}
@media screen and (min-width: 600px){
header .bildwechsel{height: 260px;}
header .bildwechsel::after{right: -5px; top: -18px; bottom: -5px; height: 300px;width: 140px; }
header .bildwechsel .flexslider, header .bildwechsel .flexslider ul li{height: 250px;}
.row.leistungen .col-30{clear: none; float: left; width: 48%; margin-right: 2%;}
nav.main-nav ul{top: -370px;}

.formular .daten{float: left;width: 48%; margin-right: 2%; margin-bottom: 40px; text-align: left !important;}
.formular .mitteilung .bereiche{float: left;width: 48%; margin-right: 2%; padding-bottom: 30px;}
}
@media screen and (min-width: 700px){
.mobil{display: none !important;}
.display{display:inherit;}
header .col-30, header .col-70{clear: both; width: 100%;}
header .col-30 img{width: 35%; margin-right: 15%; float: left;}
header .col-30 .hamburger { width: 50%; float: left;}
nav.main-nav ul{position: absolute;right: 0px; left: 0; top: -370px;margin-left: 0px;width: 100%;z-index: 10; background:#428f29; list-style: none; border: none;}
header .col-70 .col-50{clear: none; float: left; width: 48%; margin-right: 2%; padding: 30px 0;}
header .col-70 .col-50 p{margin-bottom: 0; font-size: 1.1em;}
header .col-70 .col-50 p img{float: left; display: inline-block; margin-right: 10px; padding-top: 5px;}
header .col-70 .col-50 p a{color: #fff; text-decoration: none;}

h1{font-size: 1.9em;}
h1 span.space{padding-left: 30px;}

.col-30{width: 48%; margin-right: 2%; float: left; clear: none;}
}

@media screen and (min-width: 800px){
header .bildwechsel{height: 310px;}
header .bildwechsel::after{right: -5px; top: -20px; bottom: -5px; height: 357px;width: 200px; }
header .bildwechsel .flexslider, header .bildwechsel .flexslider ul li{height: 300px;}

}

@media screen and (min-width: 900px){
header .bildwechsel{height: 360px;}
header .bildwechsel::after{right: -5px; top: -23px; bottom: -5px; height: 416px;width: 230px; }
header .bildwechsel .flexslider, header .bildwechsel .flexslider ul li{height: 350px;}
}

@media screen and (min-width: 1000px){
header .hamburger{display: none;}

.row{width: 100%; display: inline-block;}
[class*='col-']{width: auto; padding: 0 0px; position: relative; clear: none; float: left;}
.col-100{width: 100%; clear: both; float: none;}
.col-90{width: 88%; margin-right: 2%;}
.col-85{width: 83%; margin-right: 2%;}
.col-80{width: 78%; margin-right: 2%;}
.col-75{width: 73%; margin-right: 2%;}
.col-70{width: 68%; margin-right: 2%;}
.col-65{width: 63%; margin-right: 2%;}
.col-60{width: 58%; margin-right: 2%;}
.col-55{width: 53%; margin-right: 2%;}
.col-50{width: 47%; margin-right: 3%;}
.col-50.last{width: 47%; margin-right: 0; margin-left: 3%;}
.col-45{width: 43%; margin-right: 2%;}
.col-40{width: 38%; margin-right: 2%;}
.col-35{width: 33%; margin-right: 2%;}
.col-30{width: 28%; margin-right: 2%;}
.col-25{width: 23%; margin-right: 2%;}
.col-20{width: 18%; margin-right: 2%;}
.col-15{width: 13%; margin-right: 2%;}
.col-10{width: 8%; margin-right: 2%;}

header .logo img{width: auto; height: auto;}
header .bildwechsel{margin-top: 30px; overflow: hidden;}

header .col-70{width: 58%; margin-right: 2%; float: left; clear: none; padding: 15px 0;}
header .col-30{width: 38%; margin-right: 2%; float: left; clear: none; padding: 15px 0; }
header .col-70 .col-50 p{margin-bottom: 0; font-size: 1.15em;}

nav.main-nav ul li{display:inline-block; float:left;	}
nav.main-nav{width: 100%; padding: 0; border: none; display: inherit;}
nav.main-nav ul{position: inherit;right: inherit; left: inherit; top: inherit;margin-left: 0px;width: 100%;z-index: 10; background:none; list-style: none; color: #fff;  text-transform: none;  padding: 0;  margin: 0;}
nav.main-nav ul li {  display: inline-block;  width: 16.6%;  font-family: 'Poppins', sans-serif;  font-size: 1.1em;  font-weight: 300;  text-transform: uppercase; float: left;
  text-align: left; position: relative; border: none; clear: none;}
nav.main-nav ul li a{color: #fff; text-decoration: none;background:url(../images/icon_mainnav.png) no-repeat top left; padding: 15px 0 0 20px; display: inline-block;height: auto;width: 100%; float: none;}
nav.main-nav ul li span{color: #fff; text-decoration: none;background:url(../images/icon_mainnav.png) no-repeat top left; padding: 15px 0 0 20px; display: inline-block;height: auto;width: 100%; border: none;}
nav.main-nav ul li:hover a{color: #88d66d; background:url(../images/icon_mainnav_active.png) no-repeat top left;}
nav.main-nav ul li:hover span{color: #88d66d; background:url(../images/icon_mainnav_active.png) no-repeat top left;}
nav.main-nav ul li.stat3{border-bottom: none;}


/* TEXT-REFLECT CSS */
.reflect, .reflect:before{  display: block;  margin: 0;  padding: 0;}
.reflect, .reflect:before, .reflect:after {  position: relative;}
/*.reflect {  top: -60px;}*/
.reflect:before {  content: 'Startseite';  top: 30px;  transform: scale(1, -1);  backface-visibility: visible;   z-index: 1; left: 20px; position: absolute; letter-spacing: 1px;}
.reflect:after {  content: '';  display: block;  top: -10px;  left: 0;  width: 100%;  height: 30px;   background-image: linear-gradient(to bottom, rgba(21,21,21, .4) 0%, rgba(21, 21, 21, 1) 50%);  z-index: 2;}
.reflect2:before {  content: 'Wir über uns';}
.reflect3:before {  content: 'Leistungen';}
.reflect4:before {  content: 'Kontakt';}
.reflect5:before {  content: 'Impressum';}
.reflect6:before {  content: 'Datenschutz';}

nav.main-nav ul ul{position: relative;right: 0px; left: 0; top: 0px;margin-left: 0px;width: 350px;z-index: 10; background:none; list-style: none; border: none; display: none;}
nav.main-nav ul ul li {  display: inline-block;  width: 100%;   font-size: 1.1em;  font-weight: 300;  text-transform: none; float: none;
  text-align: left; position: relative; border: none; clear: both;}
nav.main-nav ul ul li a{color: #fff; text-decoration: none;background:none; padding: 15px 10px; display: inline-block;height: auto;width: 100%; float: none;}
nav.main-nav ul ul li:hover a{background: none;}

nav.main-nav ul li > ul{display: none; position: absolute;  top: 50px; z-index: 9000;
background: #428f29; background: -moz-linear-gradient(top,  #428f29 0%, #2f621f 100%); background: -webkit-linear-gradient(top,  #428f29 0%,#2f621f 100%); background: linear-gradient(to bottom,  #428f29 0%,#2f621f 100%);
}
nav.main-nav ul li > ul > li a{ color: #fff !important; padding: 10px 15px !important; display: block;  font-weight: 400 !important; background: none !important; border-top: 1px solid #2F621F; border-bottom: 1px solid #428F29; font-size: 0.9em;}
nav.main-nav ul li:hover > ul {  display: block;  }
nav.main-nav ul li > ul > li{position: relative; float: none; text-align: left; clear: none; background: none;}
nav.main-nav ul li > ul > li:hover a{color: #fff !important; background:url(../images/arrow_mainnav.png) no-repeat right 10px center !important;}

h3{font-size: 1.2em;}

.row.leistungen .col-30{clear: none; float: left; width: 31%; margin-right: 2%;}

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

@media screen and (min-width: 1150px){

}

@media screen and (min-width: 1300px){
header, aside, section, main, footer{text-align: center;}
.row{width: 80%; margin: 0 auto; text-align: left;}
}