/* nunito-200 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 200;
  src: url('nunito-v26-latin-200.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* nunito-300 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 300;
  src: url('nunito-v26-latin-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* nunito-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400;
  src: url('nunito-v26-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* nunito-500 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 500;
  src: url('nunito-v26-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* nunito-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 600;
  src: url('nunito-v26-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* nunito-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 700;
  src: url('nunito-v26-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* nunito-800 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 800;
  src: url('nunito-v26-latin-800.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* nunito-900 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 900;
  src: url('nunito-v26-latin-900.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}







* {outline: none; font-family: "Nunito", sans-serif; font-size: 18px; line-height: 80%;  box-sizing: border-box;}
html, body {padding: 0; margin:0; }
body {background-color: #ffffff; overflow-y: scroll; }

div.wrap { max-width: 1100px; margin: 0 auto;}
header {width: 100%; height: 230px; position: relative;z-index: 100;}

@media screen and (max-width: 700px) {
	header {height: 190px;}
	/* header { height: 90vw; background-size: cover;} */
}

.spritzer_unten {background-image: url('spritzer_unten_breit.png'); height: 253px; width: 100%; background-position: center; position: absolute; bottom: -3px; z-index: 200;}
.spritzer_unten2 {background-image: url('spritzer_unten_breit.png'); height: 253px; width: 100%; background-position: center; position: absolute; bottom: -3px; z-index: 200; transform: scaleX(-1);}

.spritzer_oben {background-image: url('spritzer_unten_breit.png'); height: 253px; width: 100%; background-position: center; position: absolute; top: -3px; z-index: 200; transform:  scaleY(-1);}
.spritzer_oben2 {background-image: url('spritzer_unten_breit.png'); height: 253px; width: 100%; background-position: center; position: absolute; top: -3px; z-index: 200; transform: scaleX(-1) scaleY(-1);}

.wellen_oben {background-image: url('wellen.png'); height: 210px; width: 100%; background-position: center; position: absolute; top: -3px; z-index: 200; transform:  }
.kristalle_unten {background-image: url('kristalle_unten.png'); height: 84px; width: 100%; background-position: center; position: absolute; top: -3px; z-index: 5;  }


.navi_bg {  position: absolute; top: 0px; right: 0px; z-index: 1200; padding-top: 10px; text-transform: uppercase; font-size: 12px; color: #35942b; padding-right: 20px; font-weight: bold;}
@media screen and (min-width: 900px) { 
.navi_bg { padding-right: 100px; }
}
.navi_bg a {  text-transform: uppercase; font-size: 12px; text-decoration: none; color: #ccc ! important; font-weight: bold;  }
.logo { left: 0; right: 0; top: 10px; z-index: 300; position: absolute; padding-top: 15px; padding-left: 25px; padding-bottom: 15px; padding-right: 25px; background-color: rgba(255,255,255,0.9); height: 112px;}
.logo a {display: block;   position: absolute;   left: 10px;   top: 2px;}
@media screen and (max-width: 900px) { .logo a { left: 15px; top: 23px; } }
@media screen and (max-width: 700px) { .logo a { left: 15px; top: 23px; } .logo a img { width: 250px; } }

.logo b { display: block;   position: absolute;   right: 100px;   top: 38px; font-size: 30px; line-height: 40px; color: #35942b; font-weight: 200;  font-family: "Nunito", sans-serif; }
@media screen and (max-width: 1400px) { .logo b {	font-size: 25px; line-height: 30px; top: 45px;} }
@media screen and (max-width: 1220px) { .logo b {	width: 500px; font-size: 25px; line-height: 30px; top: 32px; right: initial; left: 372px;} }
@media screen and (max-width: 900px) { .logo b {	width: 500px; font-size: 25px; line-height: 30px; top: 28px; right: initial; left: 180px;} }
@media screen and (max-width: 700px) { .logo b {	width: initial; font-size: 18px; line-height: 22px; top: 55px; right: initial; left: 17px;} }

nav { left: 0;
  right: 0;
  top: 132px;
  z-index: 300;
  position: absolute;
  padding-top: 25px;
  padding-left: 25px;
  padding-bottom: 25px;
  padding-right: 25px;
  background-color: #35942b;


  }



@media screen and (max-width: 1200px) {
	#mainnav {display: none; z-index: 2000; background-color: #fff; position: Relative; margin-top: 0; margin-top: 24px;}
	#mainnav.shown {display: block;}
	nav ul, nav li {
		list-style: none;
	}
	#mainnav {padding-left: 0;}
	#mainnav a {text-decoration: none; font-weight: normal; color: #515054; display: block; padding: 20px 10px; width: 100%; border-bottom: 1px solid #eee; font-size: 18px; font-family: "Nunito", sans-serif; color: #35942b;  }
	#mainnav a:hover { background-color: #494144; color: #fff; }
}


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

	 nav > section > ul {
		display: table;
		margin-left: 10px;
		padding-left: 0px;
		margin-right: 100px;
		position: absolute;
		top: 0; left: 20px;
		z-index: 1000;
	}
	 nav > section >  ul > li {
		display: table-cell;
		vertical-align: top;
		padding-right: 30px;
		



		text-decoration: none;
		
		
		}
	
		
		
	 nav > section >  ul > li  ul{ display: none; }
	 /* nav > section >  ul > li > a { color: #000; text-decoration: none; 	font-size: 18px; padding-bottom: 20px; transition: color 200ms; font-family: "Nunito", sans-serif; font-weight: 400; padding-top: 15px; text-shadow: 0 0 2px #fff; text-shadow: 0 0 4px #fff; text-shadow: 0 0 8px #fff; } */
	 nav > section >  ul > li > a { color: #fff; text-decoration: none; 	font-size: 18px; padding-bottom: 20px; transition: color 200ms; font-family: "Nunito", sans-serif; font-weight: 400; padding-top: 15px;  }
	 nav > section >  ul > li:last-of-type  { padding-right: 0px;}
	 nav > section >  ul > li > a:hover { color: #000; transition: color 200ms;  }
	 nav > section >  ul > li.current > a { color: #000; }
	 nav > section >  ul > li  ul > li a { line-height: 140%;  color: #000;}
	 nav > section >  ul > li  ul > li a:hover {color: #cb181b; }
	 .activenav a {color: #333; text-decoration: none; padding-bottom: 5px; border-bottom: 2px solid #005aa1;}


	 nav > section > ul > li:hover > ul.main_subnav {
		list-style: none;
		display: block;
		position: absolute;
		margin-top: 10px;
		padding-top: 0px;
		padding-left: 0;
		margin-left: -20px;

			background-color: #fff;

	}
	 nav > section > ul > li:hover > ul.main_subnav li {
		text-align: left;
		background-color: #d5e878;
		
		border-bottom: 1px solid #ccc;
		
	}
	 nav > section > ul > li:hover > ul.main_subnav li a {
		border-bottom: 0;
		padding-left: 20px;
		padding-right: 20px;
		padding-top: 10px;
		padding-bottom: 10px;
		display: block;
		color: #000; text-decoration: none; 	font-size: 22px;
			text-transform: initial;
			font-size: 16px;
			min-width: 120px;
			z-index: 100;
			white-space: nowrap;
	}
	 nav > section > ul > li:hover > ul.main_subnav li:hover {
		background-color: #f2f2f2;
	}
 nav > section > ul > li:hover > ul.main_subnav li:hover  a{
		color: #000;
	}	
}



nav > section > ul.login {
		display: table;
		margin-left: 40px;
		margin-right: 100px;
		position: absolute;
		top: 0; left: 20px;
		z-index: 1000;
	}
	 nav > section >  ul.login > li {
		display: table-cell;
		vertical-align: top;
		padding-right: 30px;
		



		text-decoration: none;
		
		
		}
	
		
		
	 nav > section >  ul.login > li  ul{ display: none; }
	 /* nav > section >  ul > li > a { color: #000; text-decoration: none; 	font-size: 18px; padding-bottom: 20px; transition: color 200ms; font-family: "Nunito", sans-serif; font-weight: 400; padding-top: 15px; text-shadow: 0 0 2px #fff; text-shadow: 0 0 4px #fff; text-shadow: 0 0 8px #fff; } */
	 nav > section >  ul.login > li > a { color: #fff; text-decoration: none; 	font-size: 18px; padding-bottom: 20px; transition: color 200ms; font-family: "Nunito", sans-serif; font-weight: 400; padding-top: 15px;  }
	 nav > section >  ul.login > li:last-of-type  { padding-right: 0px;}
	 nav > section >  ul.login > li > a:hover { color: #000; transition: color 200ms;  }
	 nav > section >  ul.login > li.current > a { color: #000; }
	


#navbtn {
	display: none;
}
@media screen and (max-width: 1200px) {
	#navbtn {
		position: absolute;
		top: 8px; 
		right: 50px;	
		font-size: 27pt;
		color: #fff;
		cursor: pointer;
		display: initial;
		z-index: 3000;
	}
}
@media screen and (max-width: 1000px) {
	#navbtn {
		right: 30px;	
	}
}


@media screen and (max-width: 900px) {
	nav > section > ul > li > a { font-size: 21pt; }
	.logo { padding-left: 15px; padding-bottom: 15px; padding-right: 15px; }
	.logo img { width: 150px; }
}
@media screen and (max-width: 900px) {
	.logo img { width: 250px; }
}


main {padding-left: 0px; padding-right: 0px;}
@media screen and (max-width: 1100px) {
main {padding-left: 20px; padding-right: 20px;}	
}
main p {font-size: 18px; line-height: 24px; color: rgba(0,0,0,0.95); font-weight: 300;}
main ul li {font-size: 18px; line-height: 24px; color: rgba(0,0,0,0.95); font-weight: 300;}
main ol li {font-size: 18px; line-height: 24px; color: rgba(0,0,0,0.95); font-weight: 300;}
main h1 {font-size: 42px; line-height: 48px; color: #35942b; font-weight: 200;  font-family: "Nunito", sans-serif; border-bottom: 1px solid #35942b; padding-bottom: 10px; margin-bottom: 30px;}
main h2 {font-size: 32px; line-height: 40px; color: #35942b; font-weight: 300;  font-family: "Nunito", sans-serif; margin-top: 30px; margin-bottom: 10px;}
main h3 {font-size: 24px; line-height: 32px; color: #000; font-weight: 500;  font-family: "Nunito", sans-serif;}

@media screen and (max-width: 700px) {
	main h1 {font-size: 26px; line-height: 29px; margin-bottom: 10px; }
	main h2 {font-size: 23px; line-height: 27px; margin-top: 20px; }
	main h3 {font-size: 20px; line-height: 24px; margin-top: 20px; }
}


.img > img {max-width: 100%;}
.half > img {max-width: 100%;}
.wrap > .img {position: relative;}
main .button {cursor: pointer; border: 0; display: inline-block; font-size: 18px; line-height: 20px; background-color: #d5e878; color: #444; font-family: "Nunito", sans-serif; padding: 5px 10px; text-decoration: none;  margin-right: 10px; margin-top: 10px; margin-bottom: 10px;}  
main .button:hover {background-color: #35942b; color: #fff; transition: 300ms;}
div.half {display: inline-block; vertical-align: top; width: 50%;}
@media screen and (max-width: 800px) {
	div.half { width: 100%;}
}

.bluebg {background-color:  #35942b; position: relative; }
.bluebg main p, .bluebg main h1, .bluebg main h2 { color: #fff; }
.bluebg main .button {background-color: #fff; color: #35942b; }  
.bluebg main .button:hover {color: #2b6ca3; transition: 300ms;}

@media screen and (min-width: 800px) { 
.half:first-of-type p {padding-right: 50px;}
.half:last-of-type p {padding-left: 50px;}
.half:first-of-type h2 {padding-right: 50px;}
.half:last-of-type h2 {padding-left: 50px;}
}


@media screen and (max-width: 1400px) { 
.mobimg > img{opacity: 0;}
.mobimg {background-position: top center; overflow: hidden;}
}
@media screen and (max-width: 700px) { 
.mobimg > img{width: 1000px;}
.mobimg {background-size: cover;overflow: hidden;}
}


footer {padding-top: 50px; padding-bottom: 100px; background-color:  #494949;;}
footer section > ul {
	list-style: none;
	display: table;
	padding-left: 0;
	float: left;
	margin-top: 0;
	width: 100%;
}

@media screen and (max-width: 1000px) { 
	footer section > ul {
		/* display: none; */
		display: block;
		text-align: center;
		width: 100%;
	}
	footer section {
		padding-top: 100px;
		
	}
	footer section > ul > li > a {
		padding-top: 50px;
		 display: block; text-align: center;
		width: 100%;
	}
	footer section li { display: block; text-align: center;
	width: 100%;}
}

footer section {padding-top: 30px; padding-left: 100px; padding-right: 100px;}
footer section > ul > li {
	display: table-cell;
	padding-right: 20px;
	text-align: left;
}
@media screen and (max-width: 1000px) { 
	footer section > ul > li { display: initial; }
}


li.fnav { padding-right:20px;}
footer section > ul > li > a {
		color:#1a1a1a;
		transition: color 200ms;
	text-transform: initial;
	font-weight: 500;
	text-decoration: none;
	padding-bottom: 20px;
	display: block;
	color: #fff;
	font-family: "Nunito", sans-serif;
	white-space: nowrap; 
}
footer section > ul ul {
	display: block;
	list-style: none;
	padding-left: 0;
	margin-left: 0;
}
footer section > ul ul li {
	display: block;
	list-style: none;
padding-left: 0;
	margin-left: 0;	
}
footer section > ul ul li:last-of-type {
		padding-right: 0;
}
footer section > ul ul li a{
	color: #fff;
	transition: color 200ms;
	font-size: 14px;
	text-transform: initial;
	line-height: 35px;
	text-decoration: none;
	white-space: nowrap; 
}
footer section > ul ul li a:hover{
	color: #35942b;
	transition: color 200ms;
}
footer section > ul > li > a:hover{
	color: #fff;
	transition: color 200ms;
}
#copy {
	float: left;
	line-height: 28px;
}
#copy, #copy * {
	font-size: 16px;
	color: rgba(255,255,255,0.8);
	transition: color 200ms;
	text-decoration: none;
}
#copy a:hover {
	color: rgba(255,255,255,1);
	transition: color 200ms;
}
#copy u {font-size: 28px; color: rgba(255,255,255,1);   }

#social {display: table-cell; vertical-align: top;}
#social a {color: #000; font-size: 14px;}
#social a:hover {	color: #35942b; font-size: 14px;}
#dhv {display: table-cell;  vertical-align: top; text-align: right;}
#lastrow {text-align: center; color: rgba(255,255,255,0.5); font-size: 11pt; padding-top: 40px; width: 100%; }
#lastrow img {display: inline-block; height: 25px;}
aside {background-color: #35942b; padding-top: 50px; padding-bottom: 80px;}
aside h2 {color: #fff;}

@media screen and (max-width: 1000px) { 
	/* footer section > ul { display: none; } */
	#lastrow {padding-top: 0;}
	footer section {padding-top: 50px;}

	li.fnav { width: 100%; display: block; padding-bottom: 50px; text-align: center; padding-right: 0; }
	
}
@media screen and (max-width: 600px) { 
	footer div { display: block ! important; text-align: center ! important; }
	#dhv {padding-left: 0;}
	footer section {padding: 20px 0;}
	#social {padding: 40px; padding-bottom: 80px;}
	
}
@media screen and (max-width: 1130px) { 
	#copy {
		float: right;
		display: block;
		width: 100%;
		line-height: 150%;
		text-align: center;
	}
}


main a {text-decoration: none; color: #35942b;}
.main a {font-weight: bold;}
main a:hover { text-decoration: underline;}
.button:hover {text-decoration: none ! important;}


div.legal {

	text-align: center;
	color: #fff;
	font-size: 10pt;
}
div.legal a {
	font-size: 10pt;
	color: #fff;
	
	text-decoration: none;
	
}
div.legal a:hover { text-decoration: underline;}

main h1 a, main h2 a {font-size: inherit; color: inherit; line-height: inherit; font-family: inherit; text-decoration: none;}
main h1 a:hover, main h2 a:hover {font-size: inherit; color: inherit; line-height: inherit; font-family: inherit; text-decoration: none;}

nav {transition: 400ms;}
@media screen and (min-width: 800px) { 
	body.scrolled nav {
		max-width: 1400px;
		margin: 0 auto;
		position: fixed;
		top: 0;
		background-color: rgba(98,134,43,1);
		
	}
	body.scrolled nav section > ul { left: 20px; }
	body .navi_bg {transition: 500ms 500ms; }
	body.scrolled .navi_bg {background-color: rgba(255,255,255,1); transition: 500ms; }
	body .logo {opacity: 1; transition: opacity 500ms; }
	body.scrolled .logo {opacity: 0; transition: opacity 500ms; }
}

@media screen and (max-width: 600px) {
	header {background-image: none !important;}
	.main a {text-decoration: underline;}
}

/*

main {transition: opacity 500ms;}
body.shiny main {opacity: 25%; transition: opacity 500ms;}

*/


.sidebar {display: none;}
@media screen and (min-width: 1300px) { 
	.sidebar {display: inline-block; width: 300px; vertical-align: top; padding-top: 10px;}
	.sidebar ul {list-style-type: none; margin-left: 0; padding-left: 0;}
	.sidebar li {list-style-type: none; margin-left: 0; padding-left: 0;}
	.sidebar .current {font-weight: bold;}
	.main {display: inline-block; width: calc(100% - 320px);  vertical-align: top;}
	
	/* .page1 .sidebar { display: none;} */
	/* .page1 .main { width: 100%;} */
}
@media screen and (max-width: 1300px) { 
	.sidebar { display: block; padding-top: 30px; padding-bottom: 30px;}
	.sidebar ul, .sidebar li {display: inline; margin: 0; padding: 0;}
	.sidebar br {display: none;}
}

.home-box {
	display: inline-block;
	vertical-align: top;
	width: 100%;
	max-width: 390px;
	padding-right: 50px;
}

.home-box h2 {
	/* border-bottom: 1px solid #35942b; */
}

main p > b, main p > strong {font-weight: 600;}
a.button {font-weight: 600; text-decoration: none;}

#sidebarnav > .current > .button {background-color: #35942b;  color: #fff;}
.sidebar_subnav .current .button {background-color: #35942b; color: #fff;}


@media screen and (min-width: 1300px) { 
.conflogo {max-width: 80%; margin-top: -50px; margin-bottom: 30px; }
}
@media screen and (max-width: 1300px) { 
.conflogo {max-width: 200px; display: block; margin-top: -20px; margin-bottom: 30px;  }
}