@charset "utf-8";
/* CSS Document */

/* mulish-300 - latin */
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 300;
  src: url('fonts/mulish-v12-latin-300.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('fonts/mulish-v12-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/mulish-v12-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/mulish-v12-latin-300.woff') format('woff'), /* Modern Browsers */
       url('fonts/mulish-v12-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/mulish-v12-latin-300.svg#Mulish') format('svg'); /* Legacy iOS */
}

/* mulish-regular - latin */
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/mulish-v12-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('fonts/mulish-v12-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/mulish-v12-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/mulish-v12-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('fonts/mulish-v12-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/mulish-v12-latin-regular.svg#Mulish') format('svg'); /* Legacy iOS */
}

/* mulish-700 - latin */
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 700;
  src: url('fonts/mulish-v12-latin-700.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('fonts/mulish-v12-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/mulish-v12-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/mulish-v12-latin-700.woff') format('woff'), /* Modern Browsers */
       url('fonts/mulish-v12-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/mulish-v12-latin-700.svg#Mulish') format('svg'); /* Legacy iOS */
}


html {
    font-size: 100%;
	/* killing 300ms touch delay in IE */
    -ms-touch-action: manipulation;
    touch-action: manipulation;
}


body {
	background-color:#e8f7f2;
	-webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
	
}


.wrapper {
	max-width:1280px;
	margin:0 auto;	
}

.main-content {
	padding-left:1.5%;
	margin-left:2%	
}


#header {
	background-color:#fff;
	height:230px;
	margin:0 auto;
	width:100%
} 

.logo2 {
	display:none;
}

#logo img {
	margin:0 auto;	
	width:85%;
	float:right;
	margin-top:95px;
}




/********************************NAVI********************************/

	#nav {
		position:relative;	
		
	}


	#nav ul {
		position: absolute;	
		padding-right:2%;
		
	}
	
	#nav a {
		font-family: 'Mulish', sans-serif;
		font-weight:300;
		font-size:1.3em;
		color:#009877;
		text-decoration: none;
		text-underline: none; 
		line-height:1.3em;
	}


	
	#nav ul li {
		text-align:center;
		width:100%;
		border-bottom:1px solid #009877;
		list-style: none;
	}
	
	/*Bilderwechsel*/
	
	#nav ul li img.active {
		display:none;
	}
	
	#nav ul li:hover img.active,
	#nav ul li.parent img.active {
		display:inline-block;
			
	}
	
	#nav ul li:hover img.reg,
	#nav ul li.parent img.reg {
		display:none;
	}
	
	/*Hover-Effekte und Parent*/
	
	
	#nav ul li:hover a,
	#nav ul li.parent a {
		color:#f39100; 

	}
	
	#nav ul li:hover,
	#nav ul li.parent {
		border-bottom:1px solid #f39100;

	}
	
	/*Pull-Down-Menu und Hover-Effekte*/
	
	#nav ul ol  {
		display:none;
		
	}
	
	#nav ul li:hover ol {
		display:inline-block;
		width:100%;
	}
	
	
	#nav ul li ol li a {
		font-size:1em;
		color:#009877!important;
	
	}
	
	#nav ul li ol li {
		background-color:#FFF;
		width:100%;
		padding:8% 0% 0% 0%;
		
		
	}
	
	#nav ul li ol li:last-child {
		padding-bottom:8%;
		
	}
	
	#nav ul li ol li {
		border-bottom:0px;	
	}
	
	#nav ul li ol li:hover {
		border-bottom:0px;	
		
	}
	
	#nav ul li ol li:hover a {
		color:#f39100!important;	
	}
	

	#nav a#pull {
    	display: none;
	} /*Responsive Nav*/


		/* Clearfix */
		.clearfix:before,
		.clearfix:after {
			content: " ";
			display: table;
		}
		.clearfix:after {
			clear: both;
		}
		.clearfix {
			*zoom: 1;
		}
		
		#nav ul li:nth-child(2) a,
		#nav ul li:nth-child(3) a {
			cursor:default;
		}
		
		#nav ul li:nth-child(2) ol li a,
		#nav ul li:nth-child(3) ol li a {
			cursor:pointer;
		}
		
/******************************FOOTER*********************************/


#content {
	clear:both;
	padding-bottom:100px
}

#footer {
		background-color:#FFF;
		height:200px;
		width:100%;
		position: relative;
		right: 0;
		bottom: 0;
		left: 0;
		
}



	#footerbox {
		padding-top:2%;	
	}
	
	.box1 img {
		width:90%;
	}
	
	.box3 img {
		width:20%;
		
	}
	
	.box4  {
		text-align:center;	
	}






/**************************Schriftdefinitionen**********************/

	h1 {
		font-family: 'Mulish', sans-serif;
		font-weight:400;
		font-size:1.3em;
		color:#009877;
		padding-bottom:2%;
	}
	
	
	h2 {
		font-family: 'Mulish', sans-serif;
		font-weight:300;
		font-size:1.3em;
		line-height:1.2em;
		color:#009877;
		padding-bottom:2%;
		text-align:center;
		border-bottom:1px solid #009877;
		}
	
	h3 {
		font-family: 'Mulish', sans-serif;
		font-weight:bold;
		font-size:0.8em;
		color:#009877;
		padding-bottom:2%;
		line-height:1.2em;
		
	}
	
	span {
		color:#F39100;	
		font-family: 'Mulish', sans-serif;
		font-weight:300;
		font-size:1em;
		padding-bottom:2%;
		line-height:1.2em;
		
	}
	
	#footerbox p {
		font-family: 'Mulish', sans-serif;
		font-weight:300;
		font-size:0.8em;
		color:#009877;
		padding-bottom:2%;
		line-height:1.2em;
			
	}
	
	strong {
		font-weight:bold;
	}
	
	p {
		font-family: 'Mulish', sans-serif;
		font-weight:300;
		font-size:1em;
		color:#009877;
		padding-bottom:2%;
		line-height:1.2em;
			
	}

li {
		font-family: 'Mulish', sans-serif;
		font-weight:300;
		font-size:1em;
		color:#009877;
		padding-bottom:2%;
		line-height:1.2em;
		list-style: disc;
			
	}

	a {
			font-family: 'Mulish', sans-serif;
			font-weight:300;
			font-size:1em;
			color:#009877;
			text-underline: none; 
			line-height:1.3em;
			
			-webkit-transition: color .3s ease;
			-moz-transition: color .3s ease;
			-ms-transition: color .3s ease;
			-o-transition: color .3s ease;
			transition: color .3s ease;
		}
		
		a:hover {
			color:#F39100;
			
			-webkit-transition: color .3s ease;
			-moz-transition: color .3s ease;
			-ms-transition: color .3s ease;
			-o-transition: color .3s ease;
			transition: color .3s ease;
			
		}

/**************************GALERIE STARTSEITE**********************/
/*AUTHOR: Osvaldas Valutis, www.osvaldas.info*/

#container ul li {
	margin-bottom:1.5%
		
}

#container h1 {
     margin-bottom: 0.625em; /* 10 */
}



#container img {
	width:100%;
    border-color: #eee;
	

    -webkit-box-shadow: 0 0 0.313em rgba(0, 0, 0, .05); /* 5 */
    -moz-box-shadow: 0 0 0.313em rgba(0, 0, 0, .05); /* 5 */
    box-shadow: 0 0 0.313em rgba(0, 0, 0, .05); /* 5 */

    -webkit-transition: -webkit-box-shadow .3s ease, border-color .3s ease;
    -moz-transition: -moz-box-shadow .3s ease, border-color .3s ease;
    -ms-transition: -ms-box-shadow .3s ease, border-color .3s ease;
    -o-transition: -o-box-shadow .3s ease, border-color .3s ease;
    transition: box-shadow .3s ease, border-color .3s ease;
}

#container img:hover {
    border-color: #fff;

    -webkit-box-shadow: 0 0 0.938em rgba(0, 0, 0, .25); /* 15 */
    -moz-box-shadow: 0 0 0.938em rgba(0, 0, 0, .25); /* 15 */
    box-shadow: 0 0 0.938em rgba(0, 0, 0, .25); /* 15 */
}


/**************************Philosophie**********************/

.left-img {
	z-index:1;
	margin-top:5%;
	
}




/* make keyframes that tell the start state and the end state of our object */
@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

.fade-in {
  opacity:0;  /* make things invisible upon start */
  -webkit-animation:fadeIn ease-in 1;  /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
  -moz-animation:fadeIn ease-in 1;
  animation:fadeIn ease-in 1;

  -webkit-animation-fill-mode:forwards;  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
  -moz-animation-fill-mode:forwards;
  animation-fill-mode:forwards;

  -webkit-animation-duration:1s;
  -moz-animation-duration:1s;
  animation-duration:1s;
}

.fade-in.one {
  -webkit-animation-delay: 0.7s;
  -moz-animation-delay: 0.7s;
  animation-delay: 0.7s;
}

.fade-in.two {
  -webkit-animation-delay: 1.1s;
  -moz-animation-delay:1.1s;
  animation-delay: 1.1s;
}

.fade-in.three {
  -webkit-animation-delay: 1.6s;
  -moz-animation-delay: 1.6s;
  animation-delay: 1.6s;
}

.fade-in.four {
  -webkit-animation-delay: 2.1s;
  -moz-animation-delay: 2.1s;
  animation-delay: 2.1s;
}

.fade-in.five {
  -webkit-animation-delay: 2.6s;
  -moz-animation-delay: 2.6s;
  animation-delay: 2.6s;
}

.fade-in.six {
  -webkit-animation-delay: 3.1s;
  -moz-animation-delay: 3.1s;
  animation-delay: 3.1s;
}

.fade-in.seven {
  -webkit-animation-delay: 3.6s;
  -moz-animation-delay: 3.6s;
  animation-delay: 3.6s;
}

.fade-in.eight {
  -webkit-animation-delay: 4.1s;
  -moz-animation-delay: 4.1s;
  animation-delay: 4.1s;
}

.fade-in.nine {
  -webkit-animation-delay: 4.6s;
  -moz-animation-delay: 4.6s;
  animation-delay: 4.6s;
}

/*---make a basic box ---*/
.box{
	padding:3%;
	text-align:center;
	height: auto;
	position: relative;
	margin-top:4%;
	float: right;
	background: rgba(255, 255, 255, 0.8);
	width:94%;

}

/**************************TEAM**********************/
/* Blur + Gray Scale */
.hover10 figure img {
	-webkit-filter: grayscale(0) blur(0);
	filter: grayscale(0) blur(0);
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}
.hover10 figure:hover img {
	-webkit-filter: grayscale(100%) blur(1px);
	filter: grayscale(100%) blur(1px);
}

figure {
	width:48%;	
	background-color: #fff;
	margin:4% 0 0 0;
	display:inline-block;
	border-bottom:1px solid #009877;
	border-right:1px solid #009877;
}

figure:nth-child(even) {
	float:right;	
}


figure img {
	width:48%;
	margin-right:3.5%;
	/*border-left:1px solid #009877;*/
	
		
}

figure h2 {
	text-align:left;	
	font-size:1.2em;
	line-height:1.2em
}

.team {
	float:left;
	margin-left:5%;
	width:80%;	
}

.koop1 {
	width:100%;
	
}

.koop2 {
	width:100%;
	
}

.koop1 p {
	text-align:center;	
}

.koop2 p {
	text-align:center;	
}

.koop1 img  {
	width:45%; 
	margin: 10% 0;
}

.koop2 img {
	width:50%; 
	margin: 10% 0;

}


/*** Hauptsächlich Regulieren von Header-Höhe und Logo-Position***/ 

@media screen and (max-width: 1240px) {
	
	#header {
		height:225px;	
		
	}
	
	#logo img {
		margin-top:100px;
	
	}

	
}

@media screen and (max-width: 1200px) {
	
	#header {
		height:220px;	
		
	}
	
	#logo img {
		margin-top:95px;
	
	}
	
}

@media screen and (max-width: 1150px) {
	
	#header {
		height:210px;	
		
	}
	
}

@media screen and (max-width: 1100px) {
	
	#header {
		height:202px;	
		
	}
	
	#logo img {
		margin-top:90px;
	}
	
}

@media screen and (max-width: 1050px) {
	
	#header {
		height:194px;	
		
	}
	
	#logo img {
		margin-top:85px;
	}
	
figure h2 {
	font-size:1.1em;
	line-height:1.1em
}

figure span,
figure p {
	font-size:0.8em;	
}
	
}


@media screen and (max-width: 1024px) {
	
	#header {
		height:190px;	
		
	}
	
	#logo img {
		margin-top:80px;
	}
	
}


@media screen and (max-width: 950px) {
	
	#header {
		height:174px;	
		
	}
	
	#logo img {
		margin-top:75px;
	
	}
	
	#nav ul li a {
		font-size:1.1em;
		
	}
	
}

@media screen and (max-width: 900px) {
	
	#header {
		height:165px;	
		
	}
	
	#logo img {
	margin-top:70px;
	
	}
	
	#footer {
		height:250px;	
		
	}
	
	
	
}

@media screen and (max-width: 850px) {
	
	#header {
		height:155px;	
		
	}
	
	#logo img {
	margin-top:65px;
	
	}
	
	
	
	#nav ul li a {
		font-size:1.0em;
		
	}
	
	#nav ul li ol li a {
		font-size:0.8em;
	}
	
}


/**********************************************TABLET***************************************************/


@media screen and (max-width: 799px) {

#header {
	background-color:transparent;
	
}

.logo2 {
	display:block;
}

.logo1 {
	display:none;
}

#logo img {
	float:none;
	margin:0 auto;
	width:40%;
	padding:5%;
	
}

.main-content {
	padding-left:0;
	margin-left:0;
	margin-bottom:10%;
}

#content {
	padding-bottom:50px;
	
}

.left-img img {
	margin-top:10%;	
}


/******************NAVIGATIONSANPASSUNGEN*************/


	#nav {
		position:relative;	
		padding:0 0;
		margin-right:0;
	}




	#nav ul {
        display: none;
        height: auto;
		background-color:#45B49C;
		position: relative;	
		margin-left:0;
		padding-right:0%;
    } 
	
	   
    #nav li {
        width: 100%;
        position: relative;
        border-bottom: 0px;
		
      }

	#nav li.col {
		margin:0;
		padding:0	
		
	}

	 #nav ul li {
		border-bottom:0px;
		
	 }
	 

	 
	 #nav ul:first-child {
		border-bottom:1px solid white;	 
	 }
	 
		
	#nav ul ol {
		display:inline-block;
		width:100%;	
		border-top:1px solid white;
		border-bottom:1px solid white;
	}
	

	
	#nav ul li.home,
	#nav ul li.home:hover,
	#nav ul li.home.parent {
		border-bottom:1px solid white;
	}
	
	#nav ul li ol li {
		background-color:#A1DACC;
		padding:0% 0% 0% 0%;
		
	}
	
	#nav ul li ol li:nth-child(3) {
		padding-bottom:0%;
		
	}
	  
	#nav a {
		color:#FFF;
		text-align:center;	
		font-weight:400;
		line-height:1.9em;
		
	}
	                  
    #nav a#pull {
        display: block;
        background-color: #009877;
        width: 100%;
        position: relative;
    }
    #nav a#pull:after {
        content:"";
        background: url(nav-icon.png) no-repeat;
        width: 30px;
        height: 30px;
        color: #FFF;
        display: inline-block;
        position: absolute;
        right: 15px;
        top: 10px;
    }

	
	
	/*Bilderwechsel*/
	
	#nav ul li img {
		display:none;	
	}
	
	#nav ul li img.active {
		display:none;
	}
	
	#nav ul li:hover img.active,
	#nav ul li.parent img.active {
		display:none;	
	}
	
	#nav ul li:hover img.reg,
	#nav ul li.parent img.reg {
		display:none;
	}
	
	/*Hover-Effekte und Parent*/
	
	
	#nav ul li:hover a,
	#nav ul li.parent a {
		color:#f39100; 

	}
	
	#nav ul li:hover,
	#nav ul li.parent {
		border-bottom:0px solid #f39100;

	}
	
	
	
#footer {
	height:380px;
	
}
	
	#footerbox div.col {
		margin-right:0;	
	}
	
	.box1 img {
		width:85%	
	}
	
	
	
	.box3.col {
		margin-left:0px;	
	}
	
	
	
	
	.box3 {
		padding-top:5%!important;
		clear:both	
	}
	
	
	.box4 {
		text-align:left;
		padding-top:5%!important;	
	}
	
	


	/*****************GALERIE*************/
	
	#container li.col {
		margin:0;	
		padding:0
	}
	
	#container li:nth-child(2),
	#container li:nth-child(4) {
		float:right;	
	}
	
	#container ul li {
		margin-bottom:1.5%!important;	
	}
	
	
}

@media screen and (max-width: 650px) {
	#footer {
	height:300px;
	
}

figure {
	width:100%;	
}

.koop1 {
	text-align:center; 
	width:100%; 
	float:none;
	margin: 5% 0;
}

.koop2 {
	text-align:center; 
	width:100%; 
	float:none;
		margin: 5% 0;

}



	
}

@media screen and (max-width: 419px) {

#logo img {
	float:none;
	margin:0 auto;
	width:50%;
	padding:10%;
	
}

/**************************Schriftdefinitionen**********************/

	h1 {
		font-size:1.1em;
	}
	
	
	h2 {
		font-size:1.1em;
		}
	
	h3 {
		font-size:0.8em;
		
	}
	
	span {
		font-size:0.8em;
		
	}
	
	#footerbox p {
		font-size:0.7em;
			
	}
	
	
	p {
		font-size:0.8em;
			
	}
	
	a {
			font-size:0.8em;
			
			-webkit-transition: color .3s ease;
			-moz-transition: color .3s ease;
			-ms-transition: color .3s ease;
			-o-transition: color .3s ease;
			transition: color .3s ease;
		}
	
}

/**************************COOKIE**********************/

.cookie-container{
	position: fixed;
	bottom: -1000000%;
	/*left: 0;*/
	right: 15px;
	/*background: #2f3640;*/
	background: #fff;
	/*color: #f5f6fa;*/
	color: #2f3640;
	/*padding: 0 32px;*/
	padding: 0;
	height: auto;
	width: 360px;
	z-index: 500;

	transition: 400ms;
	-webkit-box-shadow: 0 -2px 16px #2f3640;
	-moz-box-shadow: 0 -2px 16px #2f3640;
	box-shadow: 0 -2px 16px #2f3640;
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
	border-radius: 15px;
}
.cookie-container.active {
	bottom: 15px;
}
.cookie-container .info-text{
	padding: 15px;
}
.cookie-container .info-text h3{
	font-size: 24px !important;
	color:#2f3640;
	font-weight: 700;
	line-height: 1;
	letter-spacing: normal;
	margin: 0 0 12px;
}
.cookie-container p{
	font-size: 14px !important;
	color:#323335;
}
.cookie-container .cookie-categories-wrapper{
	color:#323335;

}
.cookie-container .cookie-categories-wrapper .category-list {
	list-style: none;
	padding: 0 16px;
	margin: 0;
	max-height: 320px;
	overflow-y: auto;
}
.cookie-container .cookie-categories-wrapper .category-list .category{
	-webkit-border-radius: 8px;
	border-radius: 8px;
	background-color: #eee;
	padding: 12px;
	color: #323335;
	margin-bottom: 8px;
	position: relative;
	list-style:none;
	margin-left:0;
	font-size: 16px;
}

.cookie-container .cookie-btn {
	background: #009879;
	border: 0;
	color: #f5f6fa;
	padding: 12px 48px;
	font-size: 18px;
	margin-bottom: 8px;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;

	cursor: pointer;
	width: 100%;
}
.cookie-container .cookie-btn.color-sub{
	background: #ccc;
	margin-bottom: 10px;
}

.cookie-container .cookie-btn:disabled{
	cursor: not-allowed;
	color: #ccc;
	background: #eee;
}

.cookie-container .toggle {
	margin:0 0 0 0rem;
	position: relative;
	display: inline-block;
	width: 4rem;
	height: 2rem;
	vertical-align: middle;
	margin-right: 15px;
}

.cookie-container .toggle input {
	display: none;
}

.cookie-container .roundbutton {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	width: 100%;
	/*background-color: #33455e;*/
	background-color: #ccc;
	display: block;
	transition: all 0.3s;
	border-radius: 3.4rem;
	cursor: pointer;
}
.cookie-container .name {
	vertical-align: middle;
	display: inline-block;
	color: #323335;
}

.cookie-container .roundbutton:before {
	position: absolute;
	content: "";
	height: 1.4rem;
	width: 1.4rem;
	border-radius: 100%;
	display: block;
	left: 0.3rem;
	bottom: 0.3rem;
	background-color: white;
	transition: all 0.3s;
}

.cookie-container input:checked + .roundbutton {
	background-color: #009879;
}

.cookie-container input:checked + .roundbutton:before  {
	transform: translate(2rem, 0);
}

.cookie-container .button-wrapper{
	padding: 0 15px;
}

#cookieOverlay {
	position: fixed; /* Sit on top of the page content */
	display: none; /* Hidden by default */
	width: 100%; /* Full width (cover the whole page) */
	height: 100%; /* Full height (cover the whole page) */
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0,0,0,0.5); /* Black background with opacity */
	z-index: 450; /* Specify a stack order in case you're using a different order for other elements */
	cursor: pointer; /* Add a pointer on hover */
}