/*
gruen: #acc600 rgb(172,189,0)
dunkelgrau: #444 rgb(68,68,68)
*/



/*
--------------------------------------------
   *** DEFAULT ***
--------------------------------------------
*/

input,
textarea,
input[type="submit"],
input[type="button"]
input[type="select"] {
	  -webkit-appearance: none;
}


@-ms-viewport {
  width: device-width;
}
*{
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  outline: none;
}
html,
body {
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}
img {
  max-width: 100%;
  height: auto;
  border: 0;
}
/** {
	-webkit-transition: all 0.6s ease-in-out;
  -moz-transition: all 0.6s ease-in-out;
  -o-transition: all 0.6s ease-in-out;
  transition: all 0.6s ease-in-out;
}*/
a:hover {
	-webkit-transition: all 0.6s ease-in-out;
  -moz-transition: all 0.6s ease-in-out;
  -o-transition: all 0.6s ease-in-out;
  transition: all 0.6s ease-in-out;
}
.parallax-container,
.parallax-mirror,
.parallax-slider,
.nav-collapse,
ul.nav-menu li ul,
.claim,
.claim a {
	-webkit-transition: none !important;
  -moz-transition: none !important;
  -o-transition: none !important;
  transition: none !important;
}



/*
--------------------------------------------
   *** BODY & TEXT ***
--------------------------------------------
*/

body {
  font-family: 'Source Sans Pro', sans-serif;     
  color: #444;
  font-size: 16px; /* 100% */
  font-weight: 400;
  background: #fff;
  line-height: 1.25;
}
article p,
article li {
	font-size: 125%;
	margin: 0 !important;
	padding: 0 !important;
}

h1 {
	font-family: 'Comfortaa', cursive; 
	font-size: 150%;
	font-weight: normal;
	color: #444;
	margin-bottom: 0.4em;
}
h2 {
	font-size: 125%;
	font-weight: normal;
	margin-bottom: 0.4em;
}
a,
a:hover {
	color: #acc600;
	text-decoration: none;
}
a:hover {	
	opacity: 0.6;
}
section.layout-green a {
	color: #fff;
}
article ul,
article ol {
	margin-top: 12px;
	margin-left: 0;
}
article ul li {
	list-style-type: none;
} 
article li::before {
  content: "\f299";
	display: inline-block;
	margin-right: 0.5em;
  font-family: FontAwesome;
  font-size: 100%;
  color: #acc600;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
hr {
	width: 100%;
	height: 1px;
	border: none;
	background: #0068b4;
	margin: 6px 0 0 0;
	padding: 0;
	opacity: 0.2;
	line-height: 0;
}
.clearfix::after {
    content: "";
    clear: both;
}
#suchen:after {
	content: ' *';
}

/* facebook & contact */
.contact-container,
.facebook-container,
.lang-container {
	position: absolute;
	top: 0;
	right: 0;
	margin-top: 8px;
	text-align: right;
	width: 30px;
	z-index: 30;
}
.contact-container {
	right: 0;
	margin: 8px 0;
	font-weight: bold;
}
.lang-container {
	width: auto;
	margin-top: 58px;
}
.contact-container a,
.contact-container a:hover,
.facebook-container a,
.facebook-container a:hover {
	font-size: 175%;
	color: #444;
	opacity: 1;
}
.contact-container a:hover,
.facebook-container a:hover {
	opacity: 0.6;
}


 /*
--------------------------------------------
   *** SET ***
--------------------------------------------
*/

#line {
	position: fixed;
	top: 38px;
	width: 100%;
	height: 1px;
	background: red;
	z-index: 2000;
}
.wrap{
	position: absolute;
	margin: 0;
	padding: 0;
	width: 100%;
	min-height: 100%;
	z-index: 0;
	background: transparent;
}
.header,
main,
footer,
section,
.top-container,
.banner,
.container {
	display: block;
	position: relative;
	width: 100%;
	background: transparent;
}
.container {
	min-width: 320px;
	max-width: 1024px;
	margin: 0 auto;
	padding: 0;
}


/* header */
.banner {
	overflow: show;
	margin-top: 30px;
	z-index: 0;	
}
.parallax-container {
	background: rgba(172,198,0,0.1);
}
.top-container,
.top-container-home {
	position: fixed;
	height: 110px;
	width: 100%;
	z-index: 8; 
}
.top-container,
.top-container-home {
	background: #acc600;
	box-shadow: 0px 1px 8px rgba(0,0,0,0.6);
  -moz-box-shadow: 0px 1px 8px rgba(0,0,0,0.6);
  -webkit-box-shadow: 0px 1px 8px rgba(0,0,0,0.6);	
}
.top-container {
	display: inline-block;
}
.logo a,
.claim {
	font-family: 'Comfortaa', cursive;
	font-size: 500%;
	color: #fff;
	text-shadow: 1px 1px 10px #444;
}
.claim {
	font-size: 200%;
}
.claim span:hover {
	cursor: pointer;
	opacity: 0.6;
}
.top-container .logo {
	padding-top: 16px;
}
.top-container-home .logo {
	display: inline-block;
	width: auto;
	padding-top: 120px;
	margin-top: 18px !important;
}
.top-container-home.logo-small .logo {
	padding-top: 0;
	margin-top: 0;
}
.top-container .logo a,
.top-container .claim,
.top-container-home.logo-small .logo a,
.top-container-home.logo-small .claim {
	font-family: 'Comfortaa', cursive;
	font-size: 250%;
	color: #fff;
	text-decoration: none;
	text-shadow: none;	
	line-height: normal;
}
.top-container .claim,
.top-container-home.logo-small .claim {
	font-size: 100%;
	color: #444;
}

.top-container .claim a,
.top-container-home.logo-small .claim a {
	color: #444;
}
.logo-container,
.nav-container {
	display: inline-block;
	float: left;
}
.nav-container {
	float: right;	
}
.top-container-home .logo-container {
	float: none;
	z-index: 20;
}




/* content */
.content,
.home-content {
	padding: 166px 0 36px 0;
	margin-bottom: 60px;
}
.home-content {
	padding-top: 60px;
}
article {
	display: block;
	height: auto;
	width: 100%;
	overflow: hidden;
}

/* sections */
section {
	padding: 24px 0;
}
section.layout-green {
	background: #acc600;
}


/* spenden */
.spenden {
	display: inline-block;
	background: #acc600;
	margin-top: 0;
	padding: 0 24px 24px 24px;
	border-radius: 6px;
	box-shadow: 4px 4px 8px rgba(0,0,0,0.6);
  -moz-box-shadow: 4px 4px 8px rgba(0,0,0,0.6);
  -webkit-box-shadow: 4px 4px 8px rgba(0,0,0,0.6);
}
.spenden a {
	display: block;
	color: #fff;
	margin-top: 8px;
}


/* footer */
footer {
	position: absolute;
	bottom: 0;
	height: 60px;
	padding-top: 24px;
	background: #acc600;
	text-align: center;
}
footer p {
	font-size: 100%;
	line-height: 1;
	color: #444;
}
footer a {
	color: #fff;
}
footer a:hover {
	color: #444;
}



/* top button */
.top {
	position: fixed;
	right: 2em;
	bottom: 24px;
	-webkit-transition: none !important;
  -moz-transition: none !important;
  -ms-transition: none !important;
  -o-transition: none !important;	
  z-index: 99;
  display: none;
}	
.top .button {
	display: table;
	float: right;
	width: 48px;
  height: 48px; 
	background: #444;
	color:#fff;
 	font-size: 200%;
 	font-weight:400;
 	text-align: center;
 	border-radius: 50%;
}
.top .button p {
	display: table-cell;
	vertical-align: middle;	
	text-align: center;
/* transform: rotate(90deg);*/
	}
.top .button p::before {
	content:'\f18c';
	display: inline-block;
  font-family: FontAwesome;
  font-size: 100%;
  color: #acc600;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.top .button:hover {
	cursor: pointer;
	opacity: 0.6;
}


/*
--------------------------------------------
   *** NAVIGATION ***
--------------------------------------------
*/

@media (min-width: 765px) {
	.mobile-navi {
		display: none;
	}		
	ul.nav-menu ul {
		display: none;
	}
}


	/* nav container */
.mainnavi {
	position: absolute;
	top: 18px;
	right: 46px;
	z-index: 100;
}

	/* essential styles */
	.nav-menu, .nav-menu * {
		margin: 0;
		padding: 0;
		list-style: none;
	}
	.nav-menu li {
		position: relative;
	}
	.nav-menu ul {
		position: absolute;
		display: none;
		top: 100%;
		left: 0;
		z-index: 99;
	}
	.nav-menu > li {
		float: left;
	}
	.nav-menu li:hover > ul,
	.nav-menu li.sfHover > ul {
		display: block;
	}
	.nav-menu a {
		display: block;
		position: relative;
	}
	.nav-menu ul ul {
		top: 0;
		left: 100%;
	}
	
	/* 1. stufe */
  ul.nav-menu {
    display: inline-block;
    list-style: none;
    margin: 0;
    width: auto;
    height: auto;   
    }  
  ul.nav-menu li {
    display: inline-block;
    margin: 0;
    padding-left: 1.5em;
    white-space: nowrap;
    line-height: 1em;
  } 	  
  ul.nav-menu li a {
		color: #fff;
		font-size: 125%;
		text-decoration: none;
  }  
  ul.nav-menu li:hover a,
  ul.nav-menu li.active a {
		color: #444;
  }
  
  	/* 2. stufe */
  ul.nav-menu ul {
  	position: absolute;
    /* display: inline-block; */
    list-style: none;
    margin-top: 6px;
    margin-left: 1.5em;
    padding: 1em 2em 1em 1em;
    width: auto;
    height: auto; 
		background-color: rgba(255,255,255,0.95);
		border: 1px solid rgba(172,189,0,0.9);  
    }  
  ul.nav-menu ul li {
    display: block;
    margin: 0;
    padding-left: 0;
    padding-bottom: 0.5em;
    white-space: nowrap;
    line-height: 1em;
  } 	  
  ul.nav-menu ul li a {
		color: #444;
		font-size: 125%;
		text-decoration: none;
  }  
  ul.nav-menu ul li:hover a,
  ul.nav-menu ul li.active a {
		color: #acc600;
  }
  


  
/*
--------------------------------------------
   *** HACKS ***
--------------------------------------------
*/

/* google chrome */
@media screen and (-webkit-min-device-pixel-ratio:0) {

}	

/* ie9, ie10, ie11*/
@media screen and (min-width:0\0) {

}



/*
--------------------------------------------
   *** DEVICES ***
--------------------------------------------
*/

@media (max-width: 1024px) {
	.container {
		padding-right: 24px;
		padding-left: 24px;
	}
	.facebook-container,
	.lang-container {
		right: 24px;
	}
	.contact-container {
		right: 54px;
	}
}


@media (max-width: 765px) {
	/* mainnavi */
	.desktop-navi {
		display: none;
	}
	.mobile-navi .nav-collapse {
		display: none; 
		position: fixed; 
		top: 0;
		left: 0; 
		width: 200px; 
		height: 100vh; 
		background-color: rgba(255,255,255,0.95);
		border-right: 1px solid rgba(172,189,0,0.9);
		padding-top: 1.5em;
		-webkit-backface-visibility: hidden;     
		z-index: 999;
	}
	.mainnavi {
		position: absolute;
		top: 8px;
		right: 102px;
		z-index: 999;
	}
	.moblie-navi-button {
		position: absolute;
		z-index: 1000;
	}
	.mobile-navi-button::after {
		content: "\f0c9";
		display: inline-block;
	  font-family: FontAwesome;
	  font-size: 175%;
	  color: #444;
	  text-rendering: auto;
	  -webkit-font-smoothing: antialiased;
	  -moz-osx-font-smoothing: grayscale;
	  cursor: pointer
	}
	.mobile-navi-button:hover::after {
		opacity: 0.6;
	}	
	.mobile-navi-button.open::after {
		content: "\f00d";
		font-size: 190%;
		margin-top: -2px;
	}	
  .ul.nav-menu {
    display: block;
    width: 200px;
    background: transparent;
    }  
  ul.nav-menu li {
    display: block;
    width: 200px;
    margin: 0;
    padding: 0 1.5em 1em 1.5em;
  } 	  
  ul.nav-menu li a {
		color: #acc600;
  }  
  ul.nav-menu li:hover a,
  ul.nav-menu li.active a {
		color: #44;
  }
	ul.nav-menu>li>a::before {
	  content: "\f299";
		display: inline-block;
		margin-right: 0.5em;
	  font-family: FontAwesome;
	  font-size: 90%;
	  color: #acc600;
	  text-rendering: auto;
	  -webkit-font-smoothing: antialiased;
	  -moz-osx-font-smoothing: grayscale;
	}
  ul.nav-menu li:hover a::before,
  ul.nav-menu li.active a::before {
		color: #44;
  }
  
   	/* 2. stufe */
  ul.nav-menu ul {
  	position: relative;
    display: block !important;
    margin-top: 6px;
    margin-left: 1.7em;
    padding: 0;
		border: none;  
		background: transparent;
    }  
  ul.nav-menu ul li {
    white-space: nowrap;
    line-height: 1em;
  } 	  
  ul.nav-menu ul li a {
		color: #444;
		font-size: 100%;
		text-decoration: none;
  }  
  ul.nav-menu ul li:hover a,
  ul.nav-menu ul li.active a {
		color: #acc600;
  }
}

@media (max-width: 765px) {
	.claim {
		max-width: 160px;
	}
	#suchen:after {
		content: '';
	}
}
	
@media (max-width: 560px) {
	.logo {
		font-size: 65%;
	}
	.claim a {
		line-height: normal;
	}
}

@media (max-width: 360px) {
	article p,
	article li,
	.address-output,
	.powermail_label,
	.powermail_submit {
		font-size: 120%;
	}
h1,
.panel-title {
	font-size: 140%;
}
h2 {
	font-size: 130%;
	font-weight: normal;
	margin-bottom: 0.6em;
}	
	
}