@font-face {
  font-family: 'bmregular';
  src: url("fonts/bm-regular/BM-Regular-webfont.eot");
  src: url("fonts/bm-regular/BM-Regular-webfont.eot?#iefix") format("embedded-opentype"), url("fonts/bm-regular/BM-Regular-webfont.woff2") format("woff2"), url("fonts/bm-regular/BM-Regular-webfont.woff") format("woff"), url("fonts/bm-regular/BM-Regular-webfont.ttf") format("truetype"), url("fonts/bm-regular/BM-Regular-webfont.svg#bmregular") format("svg");
  font-weight: normal;
  font-style: normal; }
@font-face {
  font-family: 'bmlight';
  src: url("fonts/bm-light/BM-Light-webfont.eot");
  src: url("fonts/bm-light/BM-Light-webfont.eot?#iefix") format("embedded-opentype"), url("fonts/bm-light/BM-Light-webfont.woff2") format("woff2"), url("fonts/bm-light/BM-Light-webfont.woff") format("woff"), url("fonts/bm-light/BM-Light-webfont.ttf") format("truetype"), url("fonts/bm-light/BM-Light-webfont.svg#bmlight") format("svg");
  font-weight: normal;
  font-style: normal; 
}

@font-face {
    font-family: 'Vollkorn';
    src: url('fonts/vollkorn/Vollkorn-Regular.eot');
    src: url('fonts/vollkorn/Vollkorn-Regular.eot?#iefix') format('embedded-opentype'),
        url('fonts/vollkorn/Vollkorn-Regular.woff2') format('woff2'),
        url('fonts/vollkorn/Vollkorn-Regular.woff') format('woff'),
        url('fonts/vollkorn/Vollkorn-Regular.svg#Vollkorn-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Vollkorn';
    src: url('fonts/vollkorn/Vollkorn-Italic.eot');
    src: url('fonts/vollkorn/Vollkorn-Italic.eot?#iefix') format('embedded-opentype'),
        url('fonts/vollkorn/Vollkorn-Italic.woff2') format('woff2'),
        url('fonts/vollkorn/Vollkorn-Italic.woff') format('woff'),
        url('fonts/vollkorn/Vollkorn-Italic.svg#Vollkorn-Italic') format('svg');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Vollkorn';
    src: url('fonts/vollkorn/Vollkorn-BoldItalic.eot');
    src: url('fonts/vollkorn/Vollkorn-BoldItalic.eot?#iefix') format('embedded-opentype'),
        url('fonts/vollkorn/Vollkorn-BoldItalic.woff2') format('woff2'),
        url('fonts/vollkorn/Vollkorn-BoldItalic.woff') format('woff'),
        url('fonts/vollkorn/Vollkorn-BoldItalic.svg#Vollkorn-BoldItalic') format('svg');
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Vollkorn';
    src: url('fonts/vollkorn/Vollkorn-Bold.eot');
    src: url('fonts/vollkorn/Vollkorn-Bold.eot?#iefix') format('embedded-opentype'),
        url('fonts/vollkorn/Vollkorn-Bold.woff2') format('woff2'),
        url('fonts/vollkorn/Vollkorn-Bold.woff') format('woff'),
        url('fonts/vollkorn/Vollkorn-Bold.svg#Vollkorn-Bold') format('svg');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

body {
  font-family: 'Vollkorn'; 
  color: #333;
  overflow-x: hidden; 
  }
  
 .nav>li.active>a.heim_btn { 
	color: #fff;/* nötig? */
}

html, body {
  height: 100%;
   }

section .container .img-responsive {
  width: 100%;}

.container{height: auto;} /* haa */

p {
  font-size: 14px;
  line-height: 20px; 
 
   -moz-hyphens: auto;
   -o-hyphens: auto;
   -webkit-hyphens: auto;
   -ms-hyphens: auto;
   hyphens: auto; 
   
   hyphenate-limit-chars: auto 5;
   hyphenate-limit-lines: 2;
 }
 

ul {
  padding-left: 15px;
  margin-bottom: 15px; }

ul li {
    list-style: none;
    line-height: 20px; 
    }

hr {
  margin: 0;
  width: 100%; 
  }

a:hover {
  text-decoration: none; 
  }

.fancybox-nav {
  width: 60px; 
  }

.fancybox-nav span {
  visibility: visible;
  opacity: 1; 
  }

.fancybox-nav:hover span {
  opacity: 1; 
  }

.fancybox-next {
  right: -60px; 
  }

.fancybox-prev {
  left: -60px; 
  }

.fancybox-nav, .fancybox-close { 
  font-family: 'bmregular';
  font-size: 50px;
  color: #fff;
  line-height: 20px;
  text-align: center; 
  }
  

  
 

.fancybox-prev {
  left: 30px; 
  }

.fancybox-next {
  right: 30px; 
  }

.fancybox-close {
  right: 30px; 
  }

.fancybox-title-float-wrap .child {
  display: none; 
  }

*[class$="Button"] {
  font-family: 'bmregular';
  color: #fff;
  -webkit-transition: all 0.25s ease;
  -moz-transition: all 0.25s ease;
  -ms-transition: all 0.25s ease;
  -o-transition: all 0.25s ease;
  transition: all 0.25s ease;
  position: absolute; 
  text-shadow: 0px 0px 3px #000;
  }
  
 @media (max-width: 680px) { 	 
.fancybox-nav, .fancybox-close {
  font-size: 27px;
  color: #b4b4b4;
  text-shadow: none;
/*   background: rgba(0, 0, 0, 1);  border: 1px solid rgba(0, 0, 0, 1);*/
margin: 0;
  padding: 0 0 40px 40px;
  background-image: url(../img/elemente/trans1px.gif);
  background-size: cover;
  pointer-events: auto;
 
  } 
  }
  

*[class$="Button"]:hover {
   /*   color: #00c8ff; */
	color: #00ffff;
  -webkit-transition: all 0.25s ease;
  -moz-transition: all 0.25s ease;
  -ms-transition: all 0.25s ease;
  -o-transition: all 0.25s ease;
  transition: all 0.25s ease;
}

.xButton {
	position: absolute;
	z-index: 3;
	right: 25px;
  top: -5px;
  font-size: 40px;
   }
  
.lightboxPfeil:before {
 font-family: 'bmregular';
  color: #fff;
  text-shadow: 0px 0px 3px #000;
  content: '>';
  font-size: 27px;
  } 
  
 .lightboxPfeil{
	display: none;
	position: absolute;
	z-index: 3;
	right: 16px;
	bottom: 90px ;
  pointer-events: none;

  }  
.lightboxPfeil.clicked {display: block}   

 @media (max-width: 680px) { 
	 
.lightboxPfeil{
	right: 30px;
	bottom: 88px !important;
	} 
}







   
@media (min-width: 680px) { /* mobile */
.xButton {
	top:-14px;
}
}

.xButton:before {
  content: 'x';
  font-size: 27px;
  }



.parallax-window {
  min-height: 400px;
  background: transparent; 
  }

.affix {
  float: left;
  z-index: 100;
  position: fixed;
  top: 0; 
  left: 0;
  }
  
  
  
/*   NAVIGATION */

.nav > li > a:focus, .nav > li > a:hover {
  background-color: transparent; 
  }

nav ul {
  text-align: center;
  width: 100%;
  background-color: transparent;
border-radius: 0; 
  }
  
 .nav>li>a {
	 padding: 0;
 }
  
nav li a {
	font-size: 22px;
  color: #FFF;
  opacity: 1;
  -webkit-transition: color .2s ease-in;
  -moz-transition: color .2s ease-in;
  -ms-transition: color .3s ease-in;
  -o-transition: color .3s ease-in;
  transition: color .3s ease-in;
  font-family: 'bmlight';
  letter-spacing: 0.11em;
  text-transform: uppercase;
  pointer-events: auto; 
  margin: 15px 10px 0px 10px 
  }

nav li.active a {
  color: #00ffff; 
  }
/* wenn man das auskommentiert: kein aktivblau bei Klick */

@media (min-width: 680px) { 
.nav li {
	display: inline-block;
	}	
	

.nav li a:hover, .fotocredit a:hover { 	color: #00ffff;
    text-decoration: none;
	}
}
	


@media (max-width: 680px) { /* mobile */


nav li a {font-size: 20px;font-family: 'bmregular';}
nav li{line-height: .7; pointer-events: none;}
nav ul{padding-top:6px;}
}

@media (min-width: 992px) {
	nav li a {
	font-size: 25px;
	padding: 0;
	margin: 15px 12px 0px 12px;
	}
}

@media (min-width: 1200px) {
	nav li a {
	font-size: 27px;
	padding: 0;
	margin: 15px 15px 0px 15px;
	}
}


.clearfix:before, .clearfix:after { content: " "; display: table;}
.clearfix:after {clear: both; }
/* .clearfix { *zoom: 1; Für den IE6 und IE7 }*/


/* HEADER */

header.container-fluid {
  padding: 0; 
  }



header {

/*   height: 95% !important; */
  width: 100%;


  display: -webkit-flex;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center; 
 }
 
  header h1{
    font-family: 'bmregular';
    text-shadow: 0px 0px 19px rgba(0, 0, 0, 0.43);
    width: 100%;
    text-align: center;
    text-transform: uppercase;
    font-size: 5.4vw;
    font-weight: normal;
    color: #fff; 
    letter-spacing: 0.11em;
    margin-top: -4px; 
    z-index: 2;
    }
 header h1 a, 
 header h1 a:hover, 
 header h1 a:visited, 
 header h1 a:visited:hover, 
 header h1 a:active,
 header h1 a:active:hover
 header h1 a:focus,
 header h1 a:link
  {color: #fff; text-decoration: none !important; border: 0; outline: none;} 
    
/*  auf smartphones ausblenden  */  
@media (max-width: 680px) { header h1 {display: none;}}
    



hgroup {
  font-family: 'vollkorn';
  position: absolute;
  left: 0;
  bottom: 10px;
  width: 100%;
  text-align: center;
  color: #fff; 
  }
  
  
  
hgroup h4, hgroup h5 {
    display: block;
    font-size: 0.875em; 
    font-size: 1em; 
     }
hgroup h4 { font-weight: 700; } 
hgroup h5 {font-weight: 400; }

	 #header{
		 background-size: cover;

		 background-color: #000;
		 margin-bottom: 0px;
		 position: fixed;
		  }



/* TITEL IM HEADER */

.titel {
	z-index: 0;
	position: absolute;
	bottom: 10px;
	left: 0;
	width: 100%;
	text-align: center;
/* 	z-index: -1; */
	cursor: pointer;
	color: #fff;
	
}

.titel a{
	color: #fff;
}

.titel h4, .titel h5 {
    display: block;
    font-size: 0.875em;
    font-size: 1em; 
     }
 
 
.titel h4 {
    font-weight: 700; } 
.titel h5 {
    font-weight: 400; }
    
  @media (min-width: 680px) {
.titel h4, .titel h5 {
      display: inline-block; } 
      }

      
 

/* fragen */
#regiesection {
  background-color: #fff; 
  }
  
  #regiesection h4 {
/* 	text-transform: uppercase; */
	letter-spacing: 0.05em;  
    margin: 6px 0 0 0px;
    font-family: 'vollkorn';
    font-size: 1.3em;
    font-weight: 700;   
    }

.portfolio div {
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  -ms-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
  transition: all 0.4s ease; 
  }
.portfolio div .xButton {
    display: none; 
    }
.portfolio .projektWrapper span {
    -webkit-transition: all 0.55s ease;
    -moz-transition: all 0.55s ease;
    -ms-transition: all 0.55s ease;
    -o-transition: all 0.55s ease;
    transition: all 0.55s ease;
    display: block;
    }
.portfolio .projektWrapper:hover {
  cursor: pointer; 
  }
.portfolio .projektWrapper:hover span {
    opacity: 1.0;
    -webkit-transition: all 0.55s linear;
    -moz-transition: all 0.55s linear;
    -ms-transition: all 0.55s linear;
    -o-transition: all 0.55s linear;
    transition: all 0.55s linear; 
    }

.portfolio .clicked .xButton {
  display: block; 
  }
  
.popupAct {
/* width: 100%; */
}  

.popupAct div { padding-top: 15px; }
.popupAct .actProduction ul li {font-style: italic; }
.popupAct .actProduction ul li span {font-style: 400; } /* war bold */
.popupAct .actLinks ul { padding-left: 0px; }
.popupAct .actLinks ul li a {
    color: #000;
    text-decoration: underline; 
    }



#mikeska {
  background-color: #000;
  color: #fff;
  font-size: 14px;
  line-height: 20px;
  
  	background-image: url(img/bm.jpg);
	height: 100%; width: 100%; 
	background-size: cover; background-repeat: no-repeat;
	position: relative;
	bottom: 0;	
	z-index: 100;	
}
  #mikeska #portraitWrapper {
    margin: 0px -15px;
    }
    
  @media (max-width: 680px) {    
    #mikeska #portraitWrapper {
    margin: 0px -15px -180px -15px;  padding: 0 }  
    }
    
    
  @media (min-width: 680px) {
    #mikeska {
     	background-color: transparent;
/*        background-image: url(../img/bm.jpg); */
      	background-size: 115%;
	  	background-position: left top;
	  	padding: 15px 0px; 
      }

	  #mikeska p { text-shadow: 0px 0px 5px #000; } 
    }



.unsichtbar{display: none;}

.fotocredit {
	z-index: 0;
	display: block;
	position: fixed;
	right: -184px; top:270px;
	height: 20px;
	width: 400px;
	text-align: right;
	-webkit-transform: rotate(-90deg); 
	-moz-transform: rotate(-90deg);	
	filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); /* IE */
	color: #fff;
	font-family: 'Vollkorn'; font-weight: 400;
	font-size: .72em;
}
@media (max-width: 680px) { /* mobile*/
.fotocredit {
	font-size: .68em;
	right: -4px; top:115px;
	height: 6px;
	width: 42px;
	
		right: -184px; top:270px;
	height: 10px;
	width: 396px;
}
}



.fotocredit a{color: #fff; text-decoration: none;}



.zusatz-space{letter-spacing: 0.4em;}
.sperren {letter-spacing: 0.11em;}

@media (max-width: 680px) { /* mobile */
.zusatz-space{letter-spacing: 0.1em;}
}



/* voll */
@media (min-width: 992px) {  
	.container {
	width:960px;
	}
}




@media (min-width: 768px) {  
	.col-sm-8, .col-md-7, .col-lg-6 {
	padding-top: 90px;
	} 
	
	.portfolio .col-sm-4 {
	padding-left: 5px;
	padding-right: 5px;
	background-color: #fff;
	}
	

	.nav > li:first-child {
	display: inline-block;
	}	



	
}

@media (min-width: 992px) {  
	.container {
	width:960px;
	}

	#regiesection {
	padding-bottom: 38px;
	}
	
	.portfolio {
	padding-top: 88px;
	}
}


/* xxx	 */
	#aktuelles .col-sm-8{
	padding-top: 1px;
	padding-left: 5px;
	padding-right: 5px;
	} 
	
	#aktuelles .col-sm-4 {
	padding-left: 5px;
	padding-right: 5px;
	background-color: transparent;
	}



@media (min-width: 680px) { /*  Vitatext */
	
	.col-sm-8, .col-md-7, .col-lg-6 {
	padding-top: 120px;
	padding-bottom: 88px;
	padding-left: 9px;
	width: 51.6%;
	font-size: .99em;
	float: right;
	text-shadow: 0px 0px 5px #000;
	color: #fff;
	}
	
	
	.portfolio{
	padding-top: 88px;
	}
}




   .portfolio hr {
   display: none;
   border-top: 1px solid #000;
   margin-top: 0px;
   margin-bottom: 10px;
   position: absolute;
   top: 0px;
   }
   
     .portfolio article div div:nth-child(3) {
	 border-bottom: 0px solid #000;
	 padding-bottom: 8px;
	 margin-bottom: 44px;
    }  
    

@media (min-width: 680px) {  
		
	
		.portfolio hr {
			max-width: 240px;
			left:5px;
			right: 0;
   		}

   		.portfolio article:nth-of-type(3n+1) div div:nth-child(2) hr,
   		.portfolio article:nth-of-type(3n+1) div div:nth-child(3) hr{
   		display: block;
		} 

		.portfolio article:nth-of-type(3n+2) div div:nth-child(1) hr,
		.portfolio article:nth-of-type(3n+2) div div:nth-child(3) hr{
		display: block;
		} 

		.portfolio article:nth-of-type(3n+3) div div:nth-child(1) hr,
		.portfolio article:nth-of-type(3n+3) div div:nth-child(2) hr{
		display: block;
		} 
}
   
@media (min-width: 992px) {  
   		.portfolio hr {
   		max-width: 310px;
   		}
}

@media (min-width: 1200px) {  
   		.portfolio hr {
   		max-width: 310px;
   }
}



.picButton {
	display: none;
	bottom: 62px;
	left: 15px;
	color: #fff;
	font-size: 18px;
	font-family: 'bmregular';
}





.picButton:hover {
	-webkit-transform: scale(1.0);
-moz-transform: scale(1.0);
-ms-transform: scale(1.0);
-o-transform: scale(1.0);
transform: scale(1.0); 
}

.portfolio .projektWrapper.clicked:hover {
	cursor: default;
}


.clicked .picButton {
	display: block;
}

.xButton:hover {
	cursor: pointer;
}
  

.fancyCloseButton {
	top: 20px;
	right:20px;
}


@media (max-width: 680px) { 	 
	.fancyCloseButton {
		top: 12px;
		right:16px;
		top: 2px;
		right:2px;
		padding-top: 10px;
		padding-right: 14px
		}
}


.fancybox-nav span{
	visibility: visible;	
} 

.portfolioWrapper .img-responsive{
height: 100%;
position: relative;
}

.portfolioWrapper .fancybox{
display: none;
}

.projektWrapper.clicked .fancybox{
display: block;
}
.projektWrapper.clicked .fancybox{
position: absolute;
left:0;
right:0;
bottom:0;
top:0;
content: '';
height: 100%;
width:100%;
}


.portfolio a{text-decoration: underline; color: #000;}


.desaturation {
filter: saturate(0%);
-webkit-filter: saturate(0%);
-moz-filter: saturate(0%);
-o-filter: saturate(0%);
-ms-filter: saturate(0%)
} 

/* schatten oben */
.affix hr {
	
	margin: 0 0 0 -5%;
	width: 110%;
border-top: none;
/* box-shadow: 0px 0px 68px 22px #000; */
box-shadow: 0px 0px 88px 32px #000;	
}


/* Schatten im header */
header{
  -moz-box-shadow: inset 0 11px 22px #000000;
  -webkit-box-shadow: inset 0 11px 22px #000000;
  box-shadow: inset 0 11px 22px #000000;
}



/* aktuelles */
@media (min-width: 680px) {
.aktuelles_im_header{		
	position: absolute;
	height: 66px;
	bottom: 0px;
	left: 0;
	width: 100%;
	text-align: center;
	border-top: 1px solid #eeff00;
	padding-top: 22px
	}  
	 
.aktuelles_im_header h4 {
    font-weight: 700; font-size: 1.3em; text-transform: uppercase; display: inline;} 
.aktuelles_im_header h5 {
    font-weight: 700; font-size: 1.3em; display: inline }  
              
.aktuelles_im_header a h4,
.aktuelles_im_header a h5{color: #eeff00;};

.aktuelles_im_header a h4:hover,.aktuelles_im_header a h5:hover {   
/*   color: #00c8ff; */
	color: #00ffff;};

} /* min 768 */



@media (max-width: 680px) { /* mobile */
	
.aktuelles_im_header{		
	position: absolute;
	/*height: 32px;*/
	bottom: 10px;
	left: 0;
	width: 100%;
	text-align: center;
	border-top: 1px solid #eeff00;
	padding: 12px 4px 0 4px
	}  
	 
.aktuelles_im_header h4 {
    font-weight: 700; font-size: 1em; text-transform: uppercase; display: block; /*line-height: .4;*/
    } 
.aktuelles_im_header h5 {
    font-weight: 700; font-size: 1em; display: block 
    }  
              
.aktuelles_im_header a h4,
.aktuelles_im_header a h5{
	color: #eeff00;
	}

.aktuelles_im_header a h4:hover,
.aktuelles_im_header a h5:hover {
   /*   color: #00c8ff; */
	color: #00ffff;
	}	

#aktuelles .col-sm-4{
	padding-bottom: 22px;
}


	
} /* max 768 , mobile*/






#aktuelles {z-index: 1000;}

#aktuelles .container{
	padding: 64px 0 70px 0;
}

#aktuelles .headline{
	width: 100%;
	position: relative;
	margin: 0px 0 22px 0px;
}

 
#aktuelles h4, #aktuelles span{
	letter-spacing: 0.05em;  
    font-family: 'vollkorn';
    font-size: 1.3em;
    font-weight: 700; 
	display: inline;
	line-height: 1.2;
    }
#aktuelles h4 {text-transform: uppercase;}    


/* aktuell mobil */		
@media (max-width: 680px) {
 	#aktuelles{
	 	padding: 0px 0;
	 	margin-top: 88px;
 		}
 
 	#aktuelles .container{
 		padding: 64px 8px 70px 8px;
	}

 
	#aktuelles h4, #aktuelles span{ 
		margin: 0 8px; display: block;
	} 
}
	
	
	
		
/* UMSCHALTER	 */	
		
.desktop{display: block}
.mobile{display: none}		
		
@media (max-width: 680px) { 
	
	.desktop{
	display: none;
	}
	
	.mobile {
	display: block;
	}


	.affix {
	max-width: 320px;
	margin: 0 auto;
	left: 0;
	right:0;
	pointer-events: none;
	}
	
	.affix >li>a {
		display: inline-block;
		padding: 0;
	}

}		
		
.portfolio .portfolioBefore,
.clicked ~ .projektWrapper  {
      filter: saturate(0%);
-webkit-filter: saturate(0%);
-moz-filter: saturate(0%);
-o-filter: saturate(0%);
-ms-filter: saturate(0%)
} 		
	
		
		
@media (min-width: 1025px) { /* hover desaturation nur bei schirmen über 1024 */

	
.clicked ~ .projektWrapper {
  opacity: 0.14;
        filter: saturate(0%);
-webkit-filter: saturate(0%);
-moz-filter: saturate(0%);
-o-filter: saturate(0%);
-ms-filter: saturate(0%)
}
 



.desaturate {
	        filter: saturate(0%);
-webkit-filter: saturate(0%);
-moz-filter: saturate(0%);
-o-filter: saturate(0%);
-ms-filter: saturate(0%);
}
  
.portfolio .projektWrapper:hover ~ .projektWrapper, 
.portfolio .portfolioBefore {
	  -webkit-transition: all 0.55s linear;
  -moz-transition: all 0.55s linear;
  -ms-transition: all 0.55s linear;
  -o-transition: all 0.55s linear;
  transition: all 0.55s linear;
	
}
  
  

 .portfolio .projektWrapper:hover ~ .projektWrapper {
      filter: saturate(0%);
-webkit-filter: saturate(0%);
-moz-filter: saturate(0%);
-o-filter: saturate(0%);
-ms-filter: saturate(0%);	 
 }
 

.portfolio .portfolioBefore {
  opacity: 0.14;
      filter: saturate(0%);
-webkit-filter: saturate(0%);
-moz-filter: saturate(0%);
-o-filter: saturate(0%);
-ms-filter: saturate(0%)
} 


}




/* überschreibt  */
a, a:hover, a:visited; a:active, a:visited:hover, a:focus {text-decoration: none; border: 0; outline: none;}


	
@media (max-width: 680px) { 
	.nav>li a{
		margin-top:2px;
		margin-bottom: 4px;
	}
}




    


.teasertext {
	height:86px; 
    overflow: hidden;
    margin-bottom: 2px;
    }
    
.teasertext h4 {white-space: pre-line;}       
.teasertext span {white-space:  pre-line; margin-bottom: 12px;}    


/* weiches aufklappen animation hinzufügen */ 

.zugeklappt{max-height: 0px;}
.aufgeklappt{max-height: 2100px; -webkit-transition: max-height 10s;} /* variabler wert wäre besser, auto ruckelt aber */
.popupAct{overflow: hidden;}			





button::-moz-focus-inner {
  border: 0;
}




footer {
text-align: left;
	bottom: -100px;
	height: 80px; padding-top: 25px;
 background-color: #fff;  }

footer a{
	color: #000;
	display: block;
	font-size: 1.4em;
	margin-left: 20px;
}
	 
footer a:hover{color: #000;}
  
   @media (min-width: 680px) { 
   .xButton {
	right: 15px;
	top:1px
	 }
   
   
span#slider-prev.slider_btn {
	margin-left: 18px;
    margin-right: 12px;
   }

.popupAct {
	width: 750px;
   }
   
   
  .projektWrapper .img-responsive {
height: 164px;	
} 
   

footer {
text-align: left;
	bottom: -500px;
	height: 80px; padding-top: 25px;
/*   background-color: #fff;  */ }

footer a{
	font-size: 1.4em;
	margin-left: 22px;
	}
	 
}  
  
  
  @media (min-width: 992px) { 
    .projektWrapper .img-responsive {
		height: 210px;
	} 

	.popupAct {
		width: 960px;
	}
  
	footer {
		bottom: -100px;
		height: 100px; padding-top: 30px;
	}

  
	footer a{
		font-size: 1.8em;
		color: black
	}

	.popupAct {
		background-color: #fff;
	}

	#regiesection{
		background: #fff;
	} 



	/* ADDINGS */
/*
	a.fancybox-item.fancybox-close.fancyCloseButton,
	a.fancybox-nav.fancybox-next,
	a.fancybox-nav.fancybox-prev {
		text-shadow: none;
		color: black;
		position: fixed;
	}
*/
}


  @media (min-width: 680px) {  /*  wenn man das auf 1024 stellte ist die fancybox auf ipads so wie in der mobilen version */
	/* ADDINGS */
	a.fancybox-item.fancybox-close.fancyCloseButton,
	a.fancybox-nav.fancybox-next,
	a.fancybox-nav.fancybox-prev {
		text-shadow: none;
		color: black;
		position: fixed;
	}
}

.projektWrapper.portfolioBefore ~ .projektWrapper.clicked,
.projektWrapper.clicked.desaturation {
     filter: saturate(100%);
	 -webkit-filter: saturate(100%);
	 -moz-filter: saturate(100%);
	 -o-filter: saturate(100%);
	 -ms-filter: saturate(100%);      
 }

@media (min-width:680px){
	
	 .clicked ~ .projektWrapper:hover, 
	 .projektWrapper.portfolioBefore:hover{   
		 opacity: 0.5;
		 filter: saturate(10%);
		 -webkit-filter: saturate(10%);
		 -moz-filter: saturate(10%);
		 -o-filter: saturate(10%);
		 -ms-filter: saturate(10%);      
 	}
}

 /* abstand zur nächsten Teaser-reihen wenn aufgeklappt */ 
@media (min-width: 680px) {.bottomAbstand{padding-bottom: 44px} }
@media (max-width: 680px) {.bottomAbstandMobile{padding-bottom: 88px}  }

#impressum{
	display: none;
	position: fixed;
	top: 0;
	right: -50px;	
	height: 100%;
	width: 500px;
	padding: 88px 44px;
	background: #fff;
	z-index: 1000;	
	box-shadow:	 0px 0px 22px 12px  rgba(0, 0, 0, 0.5);
}

#impressum h4{
	    font-weight: 700; font-size: 1.3em; text-transform: uppercase;
}
#impressum .xButton{
	position: absolute;
	right: 100px;
	top: 7px;
	text-shadow: none;
	color: #000;}
	
	
	
	
	
	
/* --------- */
	
a {
   outline: 0;
}

a:focus {
   outline: 0;
}

#vitatext a {
	color: #fff;
}

#vitatext a:hover {
	color: #00ffff;
}

.projektWrapper > .img-responisve {
position: relative;	
}

/* .row{border: 1px solid black; text-align: left} */

.projektcredits {
opacity: 0.9;
color: #000;
font-family: 'Vollkorn';
font-weight: 400;
font-size: .72em;
position:  absolute;
clear: both;
text-align: right;
width: 200px;
height: 20px;

-ms-transform:translate(10px, 20px);
-webkit-transform:translate(10px, 20px);
-moz-transform:translate(10px, 20px);
transform:translate(10px, 20px);
    
    -ms-transform-origin: 100% 100%; /* IE 9 */
    -webkit-transform-origin: 100% 100%; /* Chrome, Safari, Opera */
    transform-origin: 100% 100%;

-webkit-transform: rotate(-90deg) translate(19px,-193px);
-moz-transform: rotate(-90deg) translate(19px,-193px);
-ms-transform: rotate(-90deg) translate(19px,-193px);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

@media (max-width: 680px) { /* mobile */
.projektcredits {
font-size: .68em;
-webkit-transform: rotate(-90deg) translate(19px,-179px);
-webkit-transform: rotate(-90deg) translate(19px,-179px);
-webkit-transform: rotate(-90deg) translate(19px,-179px);
}
}



.projektWrapper .projektcredits:before {
	content: "© ";
}

.portfolio .projektWrapper:hover .projektcredits {
	opacity: 0.0;
}

.portfolio .projektWrapper.clicked:hover .projektcredits {
	opacity: 1.0;
}

.projektWrapper.clicked .projektcredits {
	opacity: 1.0;
}

@media (min-width: 680px) {

.portfolio .projektWrapper .projektcredits {
left: -100px;
} 

#vitatext{
float: left;
}

}


@media (min-width: 992px) {

#vitatext{
float: right;
}

}
.projektcredits  {
opacity: 0.0;
}

.portfolio > .row {
position: relative;
}

.portfolio .projektWrapper {
/* position: static; */
}



.fancy_audio{}

#imprint {
	border-radius: 3px;
/* 	border: 2px solid #999; */
	padding: 25px 40px 45px 40px;
}


#imprint a{
	color: #000;
	text-decoration: underline;
}

#imprint a:hover {
	color: #000;
	text-decoration: underline;
}

#imprint h4 {
	margin-top: 22px;
	margin-bottom: 2px;
}

#imprint > h6{
	margin-top: 28px;
	

}

/*  mobil */
@media (max-width: 680px) { 


div.xButton:before {
	padding: 15px;
}

div.xButton {
	right: 15px;
	top: 0px;
}


 
.mejs-container.mejs-audio {
-ms-transform: translate(0px,50px); /* IE 9 */
-webkit-transform: translate(0px,50px); /* Safari */
transform: translate(0px,50px);
}

.mejs-controls .mejs-time-rail .mejs-time-total {
	max-width: 245px;
}


}

#header, header, .regiesection{
	position: relative;
}



header, #header {

	overflow: hidden;
}
#one {
	height: 100%;
}

#header {
	 position: fixed;
	left: 0;
	right: 0;
	top:0;
	bottom: 0;
	z-index: -1;
	 width: 100% !important;
	height: 100%;
}

@media (min-width: 680px){
	.portfolio .projektWrapper {
		display: inline-block !important;
	}
}