@import url(../fonts/MyFontsWebfontsKit.css); 

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  font-size: 100%;
  vertical-align: baseline; }

html {
  line-height: 1; 
  scroll-behavior: smooth;
}


article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {
  display: block; }
  
html,
button,
input,
select,
textarea {
    color: #462a2b;
	
}

body {
 	font-size: 1em;
    line-height: 1.4;
	 font: 13px/20px VerbLight,Helvetica, Helvetica Neue, Arial;
 }
  
  ::-moz-selection {
    background: #b1d037;
    text-shadow: none;
}

::selection {
    background: #b1d037;
    text-shadow: none;
}

a {
  color: #b1d037;
  text-decoration: none; }

a:hover {
  color: #b1d037; }


h1 {
 
  margin-bottom: 1em;
  line-height: 1; }

p span {
  font-size: 1.875em;  }

.wrapper {
  width: 90%;
  margin:0 5% 0 5%;
  margin: 0 auto;
  position:relative;
  overflow: auto;
  zoom: 1;
 }

.header-container .wrapper {

  overflow: hidden !important;

 }

.header-container {
	z-index:990;
 }

#leistung .wrapper {
  padding: 10% 0 10% 0;
  background-size: 41.66667% auto;
 }

#projekte .wrapper {
    padding: 10% 0 10% 0;
  background-size: 37.5% auto;
 }

#ueberuns .wrapper {
 padding: 10% 0 10% 0;
  background-size: 33.33333% auto; 
}

section:after{
  content: "";
  display: block;
  height: 400px;
  width: 100%;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

section#ueberuns:after{

  display: none;

}

  
  
  /* ===================
    Custom
   =================== */
	
	#tabs {
float: right;
width: 85%;
position: absolute;
right: 0;
z-index: 8;
background:#fff;
display:none;

}
  
  .header-container {
	background-color:#462a2b;
	width:100%;
	position: sticky;
	top: 0;
}
.main-container{
	padding-top:150px;
}
h1 {
	font-size:60px;
margin: 0.4em 0;
}
h2 {

margin: 0.4em 0;
color:#b1d037;
}
h2.light {

margin: 0.4em 0;
color:#fff;
}

/* header */
.header-container header {
	display: flex;
	flex-direction: column;
	align-items: start;
	justify-content: space-between;
}
.header-container header nav {
	width: 100%;
}
@media only screen and (min-width: 640px) {
/*@media only screen and (min-width: 480px) {*/
	.header-container header {
		flex-direction: row-reverse;
		align-items: end;
	}
}
@media only screen and (min-width: 960px) {
	.header-container header {
		align-items: end;
	}
}

/* header title logo element */
.header-container header .header-logo {
	width: auto;
	max-width: 50%;
}
.header-logo-wrapper {
	display:block;
	width: 100%;
	height: auto;
	min-width: 100px;
	max-width: 276px;
	max-height: 72px;
	margin: 10px 0;
	transition: .2s linear;
}
.header-logo-wrapper img {
	width: 100%;
	height: auto;
}
.header-logo-wrapper:hover {
	opacity: .8;
}
@media only screen and (min-width: 640px) {
/*@media only screen and (min-width: 480px) {*/
	.header-logo-wrapper {
		display:flex;
		align-items: center;
	}
	.header-container header .header-logo {
		width: 35%;
		max-width: none;
	}
}
@media only screen and (min-width: 960px) {
	.header-container header .header-logo {
		width: auto;
	}
	.header-logo-wrapper {
		display: block;
		height: 100%;
		width: auto;
	}
	.header-logo-wrapper img {
		width: auto;
		height: 100%;
	}
}

/* main nav */  
.header-container nav {
	margin: 10px 0;
}
nav ul {
    margin: 0;
    padding: 0;
}
.header-container nav ul#top-menu {
    display: flex;
	flex-direction: column;
	justify-content: start;
}
@media only screen and (min-width: 640px) {
/*@media only screen and (min-width: 480px) {*/
	.header-container nav ul#top-menu {
		flex-direction: row;
		align-items: end;
	}
	.header-container nav ul#top-menu li {
		margin-right: 1.5rem;
	}
}
@media only screen and (min-width: 960px) {
	.header-container nav ul#top-menu li {
		margin-right: 2rem;
		margin-bottom: .2rem;
	}
}
.header-container nav a {
    display: block;
    /*margin-bottom: 10px;*/
    /*padding: 2% 0;*/
    padding: 15px 0;
	width: 100%;
    text-align: center;
    text-decoration: none;
	text-transform:uppercase;
    font-family: 'VerbMedium', 'Helvetica', 'Helvetica Neue', 'Arial', sans-serif;
    font-size: 1rem;
    color: white;
	transition: .2s linear;
	font-size: 1rem;
}


@media only screen and (min-width: 640px) {
/*@media only screen and (min-width: 480px) {*/
	.header-container nav a {
    	padding: 0;
    	/*padding: 2% 0;*/
    }
}
@media only screen and (min-width: 960px) {
	.header-container nav a {
    	/*padding: 2% 0;*/
    }
}

/* Hide the mobile nav by default */
.header-nav {
    display: none;
}
/* Show mobile nav when active */
.header-nav.active {
    display: block;
}
/* nav toggle btn */
.nav-toggle-button {
	display: flex;
	z-index: 9999; 
	margin-bottom: 18px;
	color: white;
	text-transform:uppercase;
    font-family: 'VerbMedium', 'Helvetica', 'Helvetica Neue', 'Arial', sans-serif;
    font-size: 1rem;
    text-align: right;
    cursor: pointer;
    align-items: center;
    justify-content: end;
}
.toggler-icon {
	width: auto;
	height: 1.5rem;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	position: relative;
	margin-left: .5rem;
}
.toggler-icon span {
	width: 2rem;
	height: 2px;
	background-color: white;
	transition: .3s linear;
}
.nav-toggle-button.active .toggler-icon {
	transform: translateX(50%);
	margin-left: 0;
}
.nav-toggle-button.active .toggler-icon span {
	transform: rotate(45deg) translateY(1rem);
}
.nav-toggle-button.active .toggler-icon span:last-of-type {
	transform: rotate(-45deg) translateY(-1rem);
}
.nav-toggle-button.active .toggler-icon span:nth-of-type(2) {
	opacity: 0;
}
/* disable mobile nav from 640px on */
@media only screen and (max-width: 639px) {
	.header-logo-toggler-wrapper {
		display: flex; 
		flex-dirction: row; 
		justify-content: space-between; 
		align-items: end; 
		width: 100%;
	}
}
@media only screen and (min-width: 640px) {
	.header-nav {
    	display: block;
	}
	.nav-toggle-button {
		display: none;
	}
}

#projekte nav a {
	     display: block;
    margin-bottom: 10px;
     padding: 15px 0;
	 width:100%;
     text-align: center;
     text-decoration: none;
    font-weight: bold;
     color: white;

}
nav a:hover{
    color: #b1d037;
}
#top-menu li.active a{
    color: #b1d037;
}

nav a:hover {
    text-decoration: none;
}
  
#projekte #container {
	display: flex;
}

#ueberuns {
	  background:#b1d037;
	}
	.empty{
		text-indent:-990em
	}
	
	
	#home {
		 
  background:transparent url(../img/bg-header-w.jpg)  50% top fixed;
  height:900px;
  position: relative;
		
		}
	#m-logo{
		left: 0;
top: 56%;
position: absolute;
z-index: -1;
		
		}
	

	#slideimg  { 
		    background: transparent  url(../img/bg-header.jpg) no-repeat 50% top fixed;

	 }
  
  section{
		    background: #ffffff;
			 position:relative;
			  z-index:99

	 }
	footer{
		  
			 position:relative;
			  z-index:99

	 }
	
header .wrapper {
	padding: 16% 0 10% 0;		
}

.header-notification {
	display: flex;
	flex-direction: row;
	overflow: hidden;
	justify-content: flex-start;
  position: absolute;
  bottom: 5%;
  right: 2.5%;
  height: 12.5%;
  min-height: 120px;
  width: 35%;
  background-color: #462a2b;
  color: #fff;
  border-radius: 15px;
  transition: .3s ease-in;
}
.header-notification p {
	padding: 0 5%;
	font-size: 1.2rem;
	line-height: 1.2;
	font-weight: bold;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.header-notification-link-wrapper:hover .header-notification {
	background-color: #b1d037;
  color: #462a2b;
}

@media screen and (max-width: 1024px) {
	.header-notification {
  	width: 55%;
  } 
}

@media screen and (max-width: 568px) {
	.header-notification {
  	width: 95%;
  	bottom: 2.5%;
  	min-height: 80px;
  	height: 7.5%;
  } 
  .header-notification p {
		font-size: 1rem;
	}
}

@media only screen and (max-device-width: 769px){
  .wrapper {
    width:90%; 
	 	padding:0 15px 0 15px;
	 	-webkit-box-sizing:border-box;
	 	-moz-box-sizing:border-box;
		box-sizing:border-box;
  	overflow: auto;
  	zoom: 1;
  }
  section:after, header:after {
    background-attachment: scroll; 
  }	
 }

@media only screen and (min-device-width: 770px) and (max-device-width: 1024px){
	.wrapper {
    width:960px; 
	 	padding:0 15px 0 15px;
	 -webkit-box-sizing:border-box;
	 -moz-box-sizing:border-box;
		box-sizing:border-box;
  	overflow: auto;
  	zoom: 1;
  }
  section:after, header:after {
    background-attachment: scroll; 
  } 
		
}
		

header:after {
	background-image: url(../img/bg1.jpg);
 }
#leistung:after {
  background-image: url(../img/bg2.jpg); }

#projekte:after {
  background-image: url(../img/bg3.jpg); }

	#home .wrapper{

width: 90%;
margin: 0 5% 0 5%!important;
margin: 0 auto;
position:  fixed;

zoom: 1;
		
		
		}

footer {
  padding: 8.33333% 3.33333%;
  background:#462a2b;
  color:#ffffff;
 }

.to-top-btn {
 	position: fixed;
 	right: 0;
 	bottom: 5vw;
    bottom: 2.5%;
    padding: .6rem .6rem .6rem 1rem;
    background-color: #462a2b;
    color: #fff;
    border-radius: 15px 0 0 15px;
    border-top: 2px solid #b1d037;
    border-bottom: 2px solid #b1d037;
    border-left: 2px solid #b1d037;
    z-index: 1999;
    font-size: 1.2rem;
    font-family: 'VerbMedium', 'Helvetica', 'Helvetica Neue', 'Arial', sans-serif;
    transition: .3s ease-in;
	display: none;
	animation: blendInTopBtn;
	animation-duration: .3s;
}
.to-top-btn.shown {
	display: block;
}
.to-top-btn span {
 	display: block;
 	transform: rotate(-90deg);
}
@keyframes blendInTopBtn {
	0% { display: none; }
	1% { display: block; }
	2% { opacity: 0; }
	100% { opacity: 1; }
}

@media only screen and (min-width: 1200px) {
.wrapper {
    width:960px; 
	 padding:0 15px 0 15px;
	 -webkit-box-sizing:border-box;
	 -moz-box-sizing:border-box;
box-sizing:border-box;
  overflow: auto;
  zoom: 1;
}
.header-container .wrapper {
		padding: 0 0;
  	}
	header .wrapper {
	   padding: 10% 0 10% 0;
		 
		
		}

	#leistung .wrapper {
	     padding: 10% 0 10% 0;

	 }

	#projekte .wrapper {
	    padding: 10% 0 10% 0;
	 }

	#ueberuns .wrapper {
	  padding: 10% 0 10% 0;
	
	}


}
.logocontainer{
	overflow:hidden!important;
	
	}
		 
#home .wrapper {
width: 90%;
margin: 0 5% 0 5%!important;
margin: 0 auto;
position: relative;
overflow: hidden;!important;
zoom: 1;
}
#m-logo {
left: 0;
top: 56%;
position: absolute;
 z-index: 0;
 width: 160px;
height: auto;
}
#home .wrapper h1 {
position: relative;
}	
#map {

height: 250px;
}

@media only screen and (min-width: 1025px) {
#home .wrapper {

position: fixed;
left:50%;
margin-left:-480px !important; 
}	

#map {

height: 650px;
}
}	



/* ==========================================================================
   Media Queries
   ========================================================================== */

/*@media only screen and (min-width: 640px) {*/
@media only screen and (min-width: 480px) {
	

/* ====================
    INTERMEDIATE: Menu
   ==================== */

    .nav a {
        /*width: 27%;*/
        /*display: flex;*/
        margin: 0 1.7%;
        /*padding: 25px 2%;*/
        /*padding: 25% 2%;*/
        margin-bottom: 0;
    }
    #projekte .nav a {
    	float: left;
        width: 27%;
        padding: 25px 2%;
        margin: 0 1.7%;
        margin-bottom: 0;
    }

    nav li:first-child a {
        margin-left: 0;
    }

    nav li:last-child a {
        margin-right: 0;
    }

/* ========================
    INTERMEDIATE: IE Fixes
   ======================== */

    nav ul li {
        display: inline;
    }

    .oldie nav a {
        margin: 0 0.7%;
    }
}

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

/* ============
    WIDE: Menu
   ============ */
  .header-container {
	position: fixed;
	position: sticky;
	top: 0;
}
    nav {     
        width: 50%;
    }
	#projekte nav a {
    display: block;

    padding: 58px 0 0 0;
    width: 96px;
    text-decoration: none;
	 text-transform:uppercase;
    color: white;
	 font-size:14px;
}
nav a.first {
	margin-left:0;
	padding-left:0;
}

/************************************************************************************
GRID
*************************************************************************************/
.col,
.col4-1,
.col4-2,
.col4-3,
.col3-1,
.col3-2,
.col2-1
{
	float: left;
	
	
}


.col4-1,
.col4-2,
.col4-3,
.col3-1,
.col3-2,
.col2-1
{
	margin-left: 2%;
}
 .col4-1 {
	max-width: 23%;
}
 .col4-2, .col2-1 {
	width: 48%;
}
 .col4-3 {
	max-width: 72%;
}

.col3-1 {
	max-width: 31%;
}
.col3-2 {
	max-width: 50%;
}

/* first col */
.col.first,
.col4-1.first,
.col4-2.first,
.col4-3.first,
.col3-1.first,
.col3-2.first,
.col2-1.first
{
	margin-left: 0;
	clear: left;}



}
#map { position:relative; width:100%;  z-index:999; }



/************************************************************************************
Form
*************************************************************************************/

/*==================================================
    => form styles
==================================================*/



/* ---------- Styles for the form element itself  ---------- */
{
	margin:0 0 0px 0;
	padding:0 0 0px 10px;
}

/* ---------- Shared styles for labels, input fields, textareas, select lists  ---------- */
input,
textarea,
select {
	margin:0 0 6px 0px;
	padding:2px 5px;
	width:280px;
	height:25px;
	/* ---- These are here for a reason - don't remove if not necessary ---- */
	display:block;
	// float:left;
	font-size:16px;
	background:#fff;
	border:1px solid #fff;
	color: #b1d037 !important;
}

textarea {
height:144px;
}


/* ---------- For better usability, change the look of your form fields when they are focused ---------- */
input:focus,
textarea:focus {
	border:1px solid #96C13F;
	 -webkit-transition: all 0.4s ease-in;
  -moz-transition: all 0.4s ease-in;
  -o-transition: all 0.4s ease-in;
  -ms-transition: all 0.4s ease-in;
  transition: all 0.4s ease-in;
}
input.small1{
	margin:0 4% 6px 0px;
		float:left;

	width:280px;

	
}
input.small2{
	margin:0 0px 6px 0px;
		float:left;

	width:280px;


	
}

#submit {
margin-top: 6px;
width: 292px;
height: 38px;
}
/* ---------- If you want to display legends, just remove the display:none here and add your own styles ---------- */
legend {
	display:none;
}

/* ---------- Fieldsets can be made visible by removing the default style here ---------- */
fieldset {
	border:none;
	float:left;
	padding:none;
	margin:none;
}


/* ---------- Select lists - make them a bit larger than your input fields ---------- */
select {
	width:286px;
}

.checkbox { 
  float: left;
  width: 30px;
}
/* ---------- Submit button ---------- */
input.button{
	background:#96C13F !important;
	border:none;
	color:#fff;
	cursor:pointer;
	/* Watch out! IE6 will double the left margin if the submit button is floated. To prevent this, either provide only half the margin value to IE6 or set the button to display:inline. */
	display:inline;
	
	
	
	
	

	padding:2px 5px;
	width:450px;
	height:40px;
	/* ---- These are here for a reason - don't remove if not necessary ---- */
	display:block;
	float:left;
	font-size:16px;
	background:#96c13f;
	border:none;
}

/* ---- Won't show in IE6 - but why should everyone else miss all the fun? ---- */
input#submit:hover {

text-decoration: none;
color: #fff!important;
background: #b1d037;
border-color: #b1d037;
}

/* ---------- Class for required fields - add colors, an image, or whatever you wish ---------- */
label {
	display:none;
}
label.required {
	// background:url(../images/required.png) center right no-repeat;

}

/* ---------- On user errors, required labels are style with these ---------- */
.error {
	color:#df0000 !important;
	font-weight:bold !important;
}

/* ---------- The error message - make it huge and hard to miss! :) ---------- */
p#fehlermeldung {
	background: #fff;
	color:#000;
	border:1px solid #ccc;
	display:none;
	margin:0 0 15px 10px;
	padding:20px;
	position: relative;
	width:430px;

}


/* ---------- Submit button ---------- */
.button{
	background:#96C13F;
	border:none;
	color:#fff;
	cursor:pointer;
	/* Watch out! IE6 will double the left margin if the submit button is floated. To prevent this, either provide only half the margin value to IE6 or set the button to display:inline. */
	display:inline;
	

	padding:2px 5px;
	width:452px;
	height:40px;
	/* ---- These are here for a reason - don't remove if not necessary ---- */
	display:block;
	float:left;
	font-size:16px;
	background:#96c13f;
	border:none;
}

/* ---- Won't show in IE6 - but why should everyone else miss all the fun? ---- */
.button:hover {

	text-decoration:none;
	color:#000;
	background:#505050;
}
.greenfont{
color:#b1d037;}









/*! fancyBox v2.1.4 fancyapps.com | fancyapps.com/fancybox/#license */
.fancybox-wrap,
.fancybox-skin,
.fancybox-outer,
.fancybox-inner,
.fancybox-image,
.fancybox-wrap iframe,
.fancybox-wrap object,
.fancybox-nav,
.fancybox-nav span,
.fancybox-tmp
{
	padding: 0;
	margin: 0;
	border: 0;
	outline: none;
	vertical-align: top;
}

.fancybox-wrap {
	position: relative;
	left: 130px;
	z-index: 8020;
	border: 4px solid #eee;
	border-radius: 15px;
	background-color: #eee;
	/*box-shadow: 0px 0px 10px rgba(70, 42, 43, .5);*/
}

.fancybox-skin {
	position: relative;
	background: #fff;
	color: #444;
	text-shadow: none;
	border-radius: 10px;
}

@media only screen and (max-width: 681px) {
	.fancybox-wrap {
		border-radius: 0 0 15px 15px;
	}
	.fancybox-skin {
		border-radius: 0 0 10px 10px;
	}
}

.fancybox-opened {
	z-index: 8030;
}



.fancybox-outer, .fancybox-inner {
	position: relative;
}

.fancybox-inner {
	overflow: hidden;
	min-height: 500px!important;
}

.fancybox-type-iframe .fancybox-inner {
	-webkit-overflow-scrolling: touch;
}

.fancybox-error {
	color: #444;
	margin: 0;
	padding: 15px;
	white-space: nowrap;
}

.fancybox-image, .fancybox-iframe {
	display: block;
	width: 100%;
	height: 100%;
}

.fancybox-image {
	max-width: 100%;
	max-height: 100%;
}

#fancybox-loading, .fancybox-close, .fancybox-prev span, .fancybox-next span {
	background-image: url(../img/fancybox_sprite.png);
}

#fancybox-loading {
	position: fixed;
	top: 50%;
	left: 50%;
	margin-top: -22px;
	margin-left: -22px;
	background-position: 0 -108px;
	opacity: 0.8;
	cursor: pointer;
	z-index: 8060;
}

#fancybox-loading div {
	width: 44px;
	height: 44px;
	background: url('../img/fancybox_loading.gif') center center no-repeat;
}



@media only screen and (max-width: 681px) {
	
	.fancybox-close {

top: -51px!important;
right: -.75%!important;
width: 101%!important;
height: 51px!important;
background: #b1d037 url(../img/fancybox_sprite2.gif) center center no-repeat!important;
border: 2px solid #b1d037;
border-bottom: 0;
border-radius: 15px 15px 0 0;
}

.overlay-txt,.overlay{
	display:none!important;
	}
	

}
.fancybox-close {
position: absolute;
top: -37px;
right: -18px;
width: 43px;
height: 43px;
cursor: pointer;
z-index: 8040;
transition: .3s linear;
}
.fancybox-close:hover {
	filter: brightness(.7);
}

.fancybox-nav {
	position: absolute;
	top: 0;
	width: 40%;
	height: 100%;
	cursor: pointer;
	text-decoration: none;
	background: transparent url('../img/blank.gif'); /* helps IE */
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	z-index: 8040;
}

.fancybox-prev {
	left: 0;
}

.fancybox-next {
	right: 0;
}

.fancybox-nav span {
	position: absolute;
	top: 50%;
	width: 36px;
	height: 34px;
	margin-top: -18px;
	cursor: pointer;
	z-index: 8040;
	visibility: hidden;
}

.fancybox-prev span {
	left: 10px;
	background-position: 0 -36px;
}

.fancybox-next span {
	right: 10px;
	background-position: 0 -72px;
}

.fancybox-nav:hover span {
	visibility: visible;
}

.fancybox-tmp {
	position: absolute;
	top: -99999px;
	left: -99999px;
	visibility: hidden;
	max-width: 99999px;
	max-height: 99999px;
	overflow: visible !important;
}

/* Overlay helper */

.fancybox-lock {
	overflow: hidden;
}

.fancybox-overlay {
	position: relative;
	top: 0;
	left: 0;
	overflow: hidden;
	display: none;
	z-index: 8010;

}

.fancybox-overlay-fixed {
	position: fixed;
	bottom: 0;
	right: 0;
}

.fancybox-lock .fancybox-overlay {
	overflow: auto;
	overflow-y: scroll;
}

/* Title helper */

.fancybox-title {
	visibility: hidden;
	position: relative;
	text-shadow: none;
	z-index: 8050;
}

.fancybox-opened .fancybox-title {
	visibility: visible;
}

.fancybox-title-float-wrap {
	position: absolute;
	bottom: 0;
	right: 50%;
	margin-bottom: -35px;
	z-index: 8050;
	text-align: center;
}

.fancybox-title-float-wrap .child {
	display: inline-block;
	margin-right: -100%;
	padding: 2px 20px;
	background: transparent; /* Fallback for web browsers that doesn't support RGBa */
	background: rgba(0, 0, 0, 0.8);
	color: #FFF;
	font-weight: bold;
	line-height: 24px;
	white-space: nowrap;
}

.fancybox-title-outside-wrap {
	position: relative;
	margin-top: 10px;
	color: #fff;
}

.fancybox-title-inside-wrap {
	padding-top: 10px;
}

.fancybox-title-over-wrap {
	position: absolute;
	bottom: 0;
	left: 0;
	color: #fff;
	padding: 10px;
	background: #000;
	background: rgba(0, 0, 0, .8);
}


.fancybox { position: relative; height: 100%; width: 100%; } /* assuming the image is 200x200 */
.fancybox img { opacity:0.5; } /* assuming the image is 200x200 */
.overlay { display: none; position: absolute; left: 0; top: 0; }/* the overlay should contain the same diemnsions as the image */
.overlay img { float:right; }/* the overlay should contain the same diemnsions as the image */
p.overlay-txt { display: none; width: 90%; text-align:left; position: absolute; left: 0; padding-left: 5%; padding-right: 5%; top: 0px; margin: 5% 0; hyphens: auto; word-break: break-word; color:#b1d037!important; font-size: .85rem; font-family: 'VerbMedium', 'Helvetica', 'Helvetica Neue', 'Arial', sans-serif; }/* the overlay should contain the same diemnsions as the image */
p.overlay-txt2 { display: none; width: 100%; text-align:left; position: absolute; left: 10px; top: 0px; color:#000!important; }/* the overlay should contain the same diemnsions as the image */
.fancybox:hover .overlay { display: block; }
.fancybox:hover .overlay-txt { display: block;}
.fancybox:hover .overlay-txt2 { display: block;}

.fancybox:hover img { opacity:1.0; -webkit-transition: all 0.83s ease-in;
-moz-transition: all 0.3s ease-in;
-o-transition: all 0.3s ease-in;
-ms-transition: all 0.3s ease-in;
transition: all 0.3s ease-in;} /* assuming the image is 200x200 */

.fancybox a{ color:#fff; }


.page-overview{ 
text-align:right;
margin-right:77px;}

.startimg{
 background: rgba(255, 255, 277, .9);
position: absolute;
top: 0;
z-index: 99;
padding: 20px;
height: 100%;
}

.startimg p {
	font-family: 'VerbMedium', 'Helvetica', 'Helvetica Neue', 'Arial', sans-serif;
}

@media only screen and (min-width: 640px) {
	.startimg p {
		font-size: .85rem;
	}
}

.fancybox-wrap .slider h1, .fancybox-wrap .slider h2 {
	max-width: 80%;
	line-height: 1;
	word-break: break-word;
	hyphens: auto;
}
@media only screen and (max-width: 639px) {
	.fancybox-wrap  .slider h1, .fancybox-wrap .slider h2 {
		max-width: 70%;
		font-size: 1.4rem;
	}
}

/* project filter and grid */
#projekte #container {
	display: flex;
	justify-content: space-between;
	flex-direction: column;
	align-items: start;
	overflow: hidden;
}
#projekte #container li {
	width: 100%;
	height: auto;
	margin: 1% 0;
}
#projekte #container li a, #projekte #container li a img {
	width: 100%;
	height: auto;
}
#projekte #filter {
	width: 100%;
	border-top: 2px solid #b1d037;
	border-bottom: 2px solid #b1d037;
	padding-top: 1rem;
	padding-bottom: 1rem;
}
#stage {
	width: fit-content;
	height: fit-content !important;
	min-height: 50vh;
	margin-top: 2rem;
}
#projekte nav#filter a {
    padding: .6rem !important;
    display: inline-block;
    width: 100%;
    margin-bottom: 0;
    text-transform: uppercase;
}
@media only screen and (min-width: 500px) {
	#projekte #container li {
		width: 47%;
		margin: 1%;
	}
	#projekte nav#filter a {
    	width: 44%;
	}
}
@media only screen and (min-width: 640px) {
	#projekte #container {

	}
	#projekte #filter {
		width: 47%;
		border-top: 0;
		border-bottom: 0;
		padding-top: 0;
		padding-bottom: 0;
	}
	#projekte #container ul {
		padding: 0 0 0 2% !important;
	}
	#projekte #container {
		flex-direction: row;
	}
	#projekte nav#filter a {
    	padding: 0 0 1.2rem 0 !important;
    	width: 100%;
    	display: block;
    	margin-bottom: 10px;
	}
	#stage {
		margin-top: 1em;
	}
}
@media only screen and (min-width: 960px) {
	#projekte #container li {
		width: 31%;
		margin: 1%;
	}
	#filter {
		width: 31%;
	}
}

@media only screen and (max-width: 479px) {
#projekte #container ul {
padding: 0 0 0 0 !important;
}
}
@media only screen and (max-width: 840px) {
	.carousel ul {
		margin-top: 2.2rem !important;
	}
	.slider h1, .slider h2 {
		margin-top: 1rem !important;
	}
}
@media only screen and (max-width: 520px) {
	.carousel ul {
		margin-top: 3rem !important;
	}
}

.carousel ul
{
padding: 0 0 0 0 !important;
}
@media only screen and (max-width: 681px) {
	menu, ol, ul {
padding: 0 0 0 0px !important;
}

.fancybox-wrap{
padding: 0 0 0 0px !important;
}


input,
textarea,
select,
input.small1,
input.small2 {

	width:280px;
}
}

@media only screen and (min-width: 760px) and (max-width: 771px){
	
	#projekte nav a {
width: 17%;
}

#projekte #container ul {
padding: 0 0 0 10px !important;
}

#kontakt > div > div.col4-3 > div.col3-2 {
width: 40%;
float: left;
}

#kontakt > div > div.col4-3 > div.col2-1.first {
width: 40%;
float: left;
}
	
	}
	@media only screen and (min-width: 772px) and (max-width: 950px){
	
	#projekte nav a {
width: 22%;
}
	
	}

@media only screen and (min-width: 2500px) {
	header#home {
		background-repeat: no-repeat;
		background-size: cover;
	}
	section#slideimg {
		background-size: cover;
	}
}