@import url('roboto-condensed/font.css');
@import url('roboto/font.css');
@import url('font-awesome/css/font-awesome.min.css');


* { box-sizing:border-box}
.clearfix::after {
	content: "";
	clear: both;
	display: table;}
.clear { clear:both;}
.flleft { float:left;}
.flright{ float:right;}
a { color:#686d6d; text-decoration:none; transition:.3s}
a:hover { color:#009138}


h5 { text-transform:uppercase; font-weight:900; font-size:2.2em; line-height:1em; letter-spacing:0.05em; margin:.5em 0 .5em 0}
h2 { margin:0; padding:0; line-height:1em; text-transform:uppercase; font-size:3em;font-weight:900;color:#009138}
h2 span {font-weight:400;color:#686d6d;}
h3 { margin:1em 0 1.5em; padding:0;  font-size:1.5em;font-weight:700;color:#686d6d; text-align:center; }
h3 span { font-weight:300;}
h4 { margin:.5em 0; padding:0;font-weight:300;text-transform:uppercase; letter-spacing:.05em;font-size:1.5em;color:#009138;}
h6 { font-size:1.2em; color:#686d6d; margin:0;padding:0.5em 1em;text-transform:none;text-align:center}


div.sticky {
  position:fixed;
  top: 50%; right:0; transform:translateY(-50%); -webkit-transform:translateY(-50%);
  text-align:center;
  font-size: 1.3em;
  z-index:9999;
  width:200px;
}
div.sticky div a { color:#fff; font-weight:500}
div.sticky div {
  background-color:#009138; color:#fff;
  border-radius:5px 0 0 5px;
  width:100%;padding: 1em;
  margin:0 0 .3em 0
}



#topBtn {
	display: none;
	position: fixed;
	bottom: 20px;
	right: 20px;
	z-index: 99;
	border: none;
	outline: none;
	background-color: #009138;
	color: white;
	cursor: pointer;
	padding: 15px 15px;
	border-radius: 50%;
	font-size: 18px;}
#topBtn .fa {margin:0; min-width:0}
#topBtn:hover { background-color: #686d6d;}


html {  scroll-behavior: smooth;}
body { background:#fff; color:#222;padding:0; margin:0; width:100%; height:100%; font-family: 'Roboto Condensed', serif; font-size:15pt; line-height:1.6em; font-weight:300; counter-reset: li;}

#wrapper { position:relative; width:100%; height:100%;  margin:0 auto; top:0; float:left }






#content { width:90%; max-width:1200px; margin:0 auto; padding:35px 0}
#content h2 { font-size:2.3em; margin:0 0 1em 0}
#content h2::before { display:none}

#background { background:url('bg.jpg') no-repeat bottom center; background-size:cover; background-attachment:fixed; display:block; width:100%; height:0%; padding:0 0 48%; z-index:-1; position:relative; top:0; right:0; text-align:center}
#background:before { position:absolute; width:100%; height:100%; background:rgba(0,0,0,.25); content:''; left:0; top:0;}

.hdtext{float:left;position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);-webkit-transform:translate(-50%,-50%);-o-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);}
.logo {   margin:0 auto 0; width:80%; max-width:400px; height:400px; background:rgba(255,255,255,.7); padding:1.5em; border-radius:50%; position:relative}
.logo img { max-width:80%; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);-webkit-transform:translate(-50%,-50%);-o-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);}
.hdtext h1 { color:#fff; font-weight:bold; font-size:2em; line-height:1.1em;}


#header { width:100%; background:#009138; padding:0 5%; position:relative;}
.header { width:100%; background:#fff; padding:2% 5% 3%; position:relative; border-bottom:1px solid #ccc;}
	.header .logo { border-radius:0; float:none; position:relative; margin:0 auto 0; padding:.5em 0;width: 200px; max-width:100%; height:auto; left:50%; top:0; transform:translate(-50%,0%);-webkit-transform:translate(-50%,0%);-o-transform:translate(-50%,0%);-ms-transform:translate(-50%,0%);}
	
	
	ul#nav { position:absolute; top:0; right:5%;}
	ul#nav li { list-style:none}
	ul#nav li a { color:#586d6d}
	
	
	
.navi { float:left; width:100%; margin:0 0 0 0; font-weight:500; font-size:1.3em; position:relative}
	ul#menu { margin:0; padding:0;  text-align:center; width:100%}
	ul#menu li { display:inline-block; text-align:center}
	ul#menu li a{ text-transform:uppercase; color:#fff; padding:.5em 1em; display:inline-block}
	ul#menu li a:hover { background:#686d6d; color:#fff}
	.navi a.icon { display:none; position: absolute;  right: 5%; top: 20px; font-size:2em}


	
.main {}

.about { text-align:center; background:#fff; background-size:cover; background-attachment:fixed;  padding:5vw 25%;}
.flex,
.flexbox {position:relative; width:100%; height:100%; 
	display: flex;
	display: -webkit-flex;
	display: -moz-flex;
	box-pack: justify;
	justify-content: space-between;
	-webkit-justify-content: space-between;
	-moz-justify-content: space-between;
	align-items: stretch;
	margin: 0 0 0 0;
	flex-wrap: wrap;
	-webkit-flex-wrap: wrap;}
.item { position:relative; }

.flex .item { width:50%; background:#fafafa; border-right:1px solid #eee}


.flexbox .item:last-child {width:50%; background:url(soenig_video.jpg) no-repeat center center; background-size:cover;}
	 a.play { display:block; position:absolute; top:0; left:0; width:100%; height:100%; background:none;  cursor:pointer}
	 #video #text { width:90%; text-align:center}
.video video { max-width:100% !important; height:56%!important}
.flexbox .item:first-child { background:#686d6d; color:#fff; padding:3vw 5vw;width:50%; font-size:1.1em; text-align:left}

.txt { background:#edf3ea; padding:2em; font-weight:700; color:#686d6d; font-size:1.5em; line-height:1.2em; }


/*#content{ width:50%; max-width:900px; margin:130px auto 0; padding:5vw 0; text-align:justify;}*/
.content { width:100%; float:left; margin:0 0; padding:0 0; text-align:right; }
.content h2 { text-align:center; color:#6e6e6e}


ul { margin:2em 0 0 0;padding:0 0 0 0;}
ul li { list-style:circle; margin:0 0 0 1em }


/*ol li::after{
	content:counter(li, decimal);
	counter-increment: li;
	position:relative;
	right: 0;
	top: 0;
	font:700 1em/1em "Montserrat", sans-serif;
	color: #6e6e6e;
	opacity: 1;}*/
	
.pure-u-1-2 { width:50%;}	
.pure-u-1-4 { width:25%;}
.pure-u-1-2 img,
	.pure-u-1-4 img { width:100%}
	
 /*---------------------------------------- Testimonials------------------------------------- */	
.slideshow-container {position: relative; background: #fafafa;}
.mySlides { display: none; padding: 80px; text-align: center;}
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -30px;
  padding: 16px;
  color: #888;
  font-weight: bold;
  font-size: 20px;
  border-radius: 0 3px 3px 0;
  user-select: none;}
.next {  position: absolute; right: 0; border-radius: 3px 0 0 3px;}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {  background-color: rgba(0,0,0,0.8); color: white;}
/* The dot/bullet/indicator container */
.dot-container { text-align: center; padding: 20px;  background: #ddd;}

/* The dots/bullets/indicators */
.dot {  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;}

/* Add a background color to the active dot/circle */
.active, .dot:hover {  background-color: #717171;}
/* Add an italic font style to all quotes */
q { font-size:1.1em; font-weight:400; color:#555}
/* Add a blue color to the author */
.author {color:#009138;font-size:1.1em; font-weight:400;} 
	
/*----------------------------------------------------------------------------------------------------*/
	
	

.contact { font-size:1em; line-height:1.3em;}
	.contact h2{  font-weight:700; font-size:1.5em;}
	.contact h2::before { display:none;}
	.contact h2 span{ color:#009138}
	.contact h2 small { font-weight:300; text-transform:none; font-size:.7em; color:#686d6d}
	.contact.flexbox .item2 {width:25%;}
	.contact.flexbox .item2 div { float:right;width:100%; height:100%; background:#009138; color:#fff; padding:2em; font-weight:bold; font-size:1.5em; line-height:1.3em;}
	.contact.flexbox  div.flyer { float:left;width:25%; height:100%; background:#fff; color:#009138; padding:2em 1em; text-align:center;font-weight:bold;font-size:1.2em; line-height:1.3em; }
	.contact.flexbox  div.flyer img { width:100%; margin:0 0 .5em}
	.contact.flexbox .item:last-child { background:none; padding:5%}


.footer { background:#686d6d; color:#fff; font-weight:500; font-size:.8em;display:block; width:100%;  padding:1em 3em; z-index:2 }
	.footermenu { float:left}
	.footermenu ul { padding:0; margin:0}
	.footermenu ul li { display:inline-block; list-style:none; margin:0}
	.footermenu a { color:#fff; padding: .5em 1em .5em 0 ;}
	
	.footermenu a::after{ content:'/'; color:#009138; margin:0 0 0 1em}
	.footermenu li:last-child a:after{ display:none}
/*----------------------------*/

#overlay, #impressum, #video {
    position: fixed;
    display: none;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.9);
    z-index: 2;
    cursor: pointer;
	line-height:1.2em;
}

#text{
    position: absolute;
    top: 50%;
    left: 50%;
    color: white;
    transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
	-webkit-transform: translate(-50%,-50%);
}


#impressum #text { max-width:500px; width:80%}
#overlay h2::before,
#impressum h2::before { display:none}
#overlay h2,
#impressum h2{  color:#009138}
#impressum h3 { margin:1em 0 0; color:#009138; font-size:1.2em; letter-spacing:0.02em}
#impressum a { color:#fff}
.small { font-size:.8em; line-height:1.2em;}

/* MEDIA QUERIES  ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
@media screen and (max-width:1440px) {}
@media screen and (max-width:1280px) {
#background {background-attachment:scroll; }
.logo {	max-width: 300px;height: 300px;}
.hdtext h1 {font-size: 1.7em;	line-height: 1.1em;}
h2 {font-size: 2.5em;}
h4 {font-size: 1.2em; line-height:1.1em;}
h5 {font-size: 1.8em;line-height: 1em;}
.about { padding:5vw 15%;}


.txt {padding: 1em;	font-size: 1.4em;line-height: 1.2em;}
.contact.flexbox .item2 div {padding: 1.5em;}

}
@media screen and (max-width:1200px) {
	.txt {font-size: 1.2em;line-height: 1.2em;}
	.contact.flexbox .item2 div {font-size: 1.3em;line-height: 1.2em;}
	.logo {	max-width: 250px;height: 250px;}
.hdtext h1 {font-size: 1.5em;	line-height: 1.1em;}
h2 {font-size: 2.2em;}}
@media screen and (max-width:1024px) {
.about { padding:5vw 5%;}
.flexbox .item:first-child {font-size: 1em;line-height:1.3em;}
.txt {font-size: 1.1em;line-height: 1.2em;}

#background {padding: 0 0 56%;}
.logo {	max-width: 220px;height: 220px;}

.contact h2 small {	font-size: .6em; line-height:1.2em}


#overlay, #impressum { position:absolute;}
#text {	top: 50px;transform: translate(-50%,0%); -webkit-transform: translate(-50%,0%);	-ms-transform: translate(-50%,0%); font-size:1em; line-height:1.3em}
@media screen and (max-width:980px) {.navi { display:none;font-size: 1.1em;}}
@media screen and (max-width:900px) {
	.hdtext { width:90%;}
	
/*#header { position:absolute; top:0; left:0; background:#009138}
.navi {margin: 13px 0 0 0; width:100%;position:absolute; left:0; top:0;}
.navi a.icon { display:block; background:#009138; color:#fff; padding:.1em .2em; border-radius:3px;}


ul#menu{ display:none; position:absolute; top:100px; left:0; width:100%; background:#686d6d; padding:0em 1em;}
#menu li { display:block; width:100%; border-bottom:1px solid #6c635e}
ul li a {padding: .5em 2em .5em 5%; display:block}
ul li a:hover { background:#009138; color:#fff;}
*/
.about {padding: 10vw 5%;}

#nav { position:absolute; right:5%;}
ul#nav li a {padding: .5em .5em .5em 5%;}

#content {width: 90%;margin: 0 auto 0; text-align:left; font-size:.9em; line-height:1.3em}



}
@media screen and (max-width:768px) {
	div.sticky {
  position: -webkit-sticky;
  position: sticky; width:100%; text-align:center;
  top: 0; transform:translateY(0); -webkit-transform:translateY(0);
  background:#686d6d; padding:0 0 .2em 0;
}
	div.sticky div { border-radius:0;}
	div.sticky a {color:#fff}
	
	
	.pure-u-1-4 {width: 50%;}
	
	.flexbox .item:first-child,
	.flexbox .item:last-child {width:100%; padding:5vw}
	.flexbox .item:last-child { padding:0 0 50% 0}
	.contact.flexbox .item2 {width:50%;} 
	.contact.flexbox .item {width:50%;}
	.contact.flexbox .item2 div {width: 100%;}
	
	.contact.flexbox div.flyer {width: 100%;}
	
	
	.txt { padding:1.5em;font-size: 1.3em;line-height: 1.2em;}
	
	.flex .item { width:100%;}	
.logo {  width:60%;}
 
body{ font-size:14pt; line-height:1.3em;}
h2 {line-height: 1em;font-size: 1.8em;}

ul {margin: 1em 0 0 0;}
}
@media screen and (max-width:700px) {.footermenu { width:100%;}}
@media screen and (max-width:568px) {
.footer .flleft,
.footermenu li { width:100%; text-align:center}
.footermenu a::after{ display:none; margin:0}


	.contact.flexbox .item2 {width:100%;} 
	.contact.flexbox .item {width:100%; text-align:center}
	.contact.flexbox .item2 div {width: 100%;text-align:center}
.txt {font-size: 1.2em;line-height: 1.2em;}


#background { top:116px;padding: 0 0 100%;}
.hdtext { width:100%; height:120%;
	float: left;
	position: absolute;
	left: 0;
	top: -116px;
	transform: translate(0,0);
	-webkit-transform: translate(0,0);
	-o-transform: translate(0,0);
	-ms-transform: translate(0,0);
}
.hdtext h1 { position:absolute; bottom:1em; left:5%; width:90%;}
.logo {	width:100%;background: #fff;
	max-width:100%;
	height:auto;
	padding: 1em 0;
	border-radius: 0;
	position: relative;
}
.logo img {
	max-width:180px;
	position:relative;
	left: 0;
	top: 0;
	transform: translate(0,0);
	-webkit-transform: translate(0,0);
	-o-transform: translate(0,0);
	-ms-transform: translate(0,0);
}

#header { margin:116px 0 0 ;}
}		
@media screen and (max-width:480px) {
	.logo { }
#content h2 {font-size: 1.8em;}

#content {	padding:75px 0;}

	ul#nav { position:absolute; top:140px; left:5%; margin:0; padding:0}
	ul#nav li { float:left}
	ul#nav li a { background:#009138; color:#fff; padding:8px 10px; line-height:1em;}
	
	.pure-u-sm-1-2{width: 100%;}
	}
@media screen and (max-width:380px) {
	#content h2 {font-size: 1.5em;}
	
	.header {padding: 5% 5%;}
	ul#nav { top:130px; }
	#content {	padding:85px 0;}
	
}