@import url(normalize.css);
@import url(all.min.css);
@import url(lightbox.min.css);
@import url(flickity.min.css);


/*  Allgemeine Formatierungen für alle Devices/Geräte  */
			   
* {
  box-sizing: border-box;
  margin:0;
}

body {
  color: #555;
  background: white;
	margin:0;
	-webkit-font-smoothing: antialiased;
  font-family: 'open-sans-v17-latin', sans-serif;
text-transform: upperca;
  letter-spacing:em;
  margin:0;
}

a {
  text-decoration: none;
}

h1 {
  font-size: 30px;
  line-height: 1.8;
  text-transform: uppercase;
  }

p {
  line-height:1.6em;
  margin:1em 0;
}

.innerbox{
	padding: 50px 2% 50px;
	width: 100%;
	max-width: 940px;
	margin: 0 auto;
	position: relative;
}

header .innerbox{
	padding:0 2%;
}





/*  Ende  Allgemeine Formatierungen für alle Devices/Geräte  */



/*  header -------------------------------------------------- */
.main_h {
			border:1px solid #;
  position: fixed;
  top:0px;
left:0;  /* oben verborgen---------------- */
  max-height: 90px;
  z-index: 999;
  width: 100%;
  padding-top: 17px;
  overflow: hidden;
  -webkit-transition: all 0.3s;
  transition: all 0.8s;
	opacity: 0.8;  /*  oben */
  padding-bottom: 6px;
  background:#ccc;  /*  weiss oben */
}

.sticky,.open-nav {   /*  muß direkt nach main sein */
  background-color: rgba(0,0,0,0.8);
  opacity: 0.8;
  top: 0;
		border:1px solid #;
}

.open-nav {
  max-height: 400px !important;
}
.open-nav .mobile-toggle {
  transform: rotate(-90deg);
  -webkit-transform: rotate(-90deg);
}

.logo {

  width: 150px;
  font-size: 10px;
  font-weight:700;
  color: #666;
  text-transform: uppercase;
  float: left;
  display: block;
  margin-top: 6px;
  line-height: 1;
  margin-bottom: 10px;
  cursor:pointer;
}
.sticky .logo,
.open-nav .logo {
  color: #fff;
}

nav {
		border:1px solid #;
  float: right; 
}

nav ul {
	border:1px solid #;
  list-style: none;
  overflow: hidden;
  text-align: right;
  float: right;
}

nav ul li {
  display: inline-block;
  margin-left: 25px;
  line-height: 1.5;
}

nav ul li a {
		border:1px solid #;
  color: #333;
  text-transform: uppercase;
  font-size: 14px;
  font-weight:700;
}

nav ul li a:hover {	
	color: #fff;
}

.sticky nav ul li a,
.open-nav nav ul li a {
	color: #fff;
}
.sticky nav ul li a:hover,
.open-nav nav ul li a:hover {
	color: #000;
}


.mobile-toggle {
  display: none;
  cursor: pointer;
  font-size: 20px;
  position: absolute;
  right: 22px;
  top: 0;
  width: 30px;
  -webkit-transition: all 200ms ease-in;
  -moz-transition: all 200ms ease-in;
  transition: all 200ms ease-in;
}

.mobile-toggle span {
  width: 30px;
  height: 4px;
  margin-bottom: 6px;
  border-radius: 1000px;
  background: #8f8f8f;
  display: block;
}

.sticky .mobile-toggle span,
.open-nav .mobile-toggle span {
 background: #8f8f8f;

}          
			   
/*  hero -------------------------------------------------- */

.hero {
	  /*background: url() no-repeat center 80% fixed;*/
	   /*background: url(../bilder/higru/higru2.jpg) no-repeat center center fixed;*/
	  background: url(../bilder-layout/IMG_7688.MOV) no-repeat center bottom ;/*background-image:
	  background-repeat:
	  background-position:*/
	  -webkit-background-size: cover;
	  -moz-background-size: cover;
	  background-size: cover;
	  letter-spacing: 2px;
	  text-align:;
}


/* breadcrumb-navigation /////////////*/

#breadcrumb
{
	padding:50px 0;
	
}
#breadcrumb a{
color:#000;
font-size:1.2em;
	
}
/* VIDEO_code geladen________________________________________________________Reset */
*{
  margin:0;
  padding:0;
  
}

.wrapper{
	border:1px solid #;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background:#fff;
}

.wrapper .wrapper__video{
  object-fit: cover;
  width: 100%;
  height: 90%;  /* Höhe des Background Videos*/

}

/* VIDEO  Ende_________________________________________________________Reset */

.herobox{
			
	height:600px;
	height:100vh;
	max-width: 940px;
	margin: 0 auto;
	padding:0 2%;
	position:relative;  /* ausrichtung in herobox*/
}

/* Boos Hero
#unterseiten .work2{
			border:1px solid #;
	height:600px;
	height:70vh;
	  background: url(../bilder/Gesichter/02a-Ges-a.jpg) no-repeat center bottom ;
		  -webkit-background-size: cover;
	  -moz-background-size: cover;
	  background-size: cover;
}
*/

.hero h1{
		border:1px solid #;
	  font-size:2em;
	  font-weight:700;
	  color: #888;
	  line-height: 0.8em;
		position:absolute;/* herobox verliert die volle Breite */
		left:50%;/*absolute Mitte der herobox*/
		top:60%;/*absolute Mitte der herobox*/
		transform:translate(-40%,-50%);/* Mitte der herobox*/
}

.hero h1 > span {
	font-size:0.8em;
	padding-bottom: 12px;
	color: #333;
}



.mouse {
  display: block;
  margin: 0 auto;
  width: 26px;
  height: 46px;
  border-radius: 13px;
  border: 2px solid #f70;
  position: absolute;
  bottom: 40px;
  left: 50%;
  margin-left: -26px;
}
.mouse span {
  display: block;
  margin: 6px auto;
  width: 2px;
  height: 2px;
  border-radius: 4px;
  background: #e8f380;
  border: 1px solid transparent;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-name: scroll;
  animation-name: scroll;
}








/* CSS-Raster-Grid Layout /////////////   */


/* 2 +3-spaltig ---------------------------/////////////   */
.row{
	overflow:hidden;
}

.halbe{
	width:48%;
	margin-right:4%;
	float:left;
}

.drittel{
	width:30.666%;
	margin-right:4%;
	float:left;
}

.zweidrittel{
	width:65.333%;
	margin-right:4%;
	float:left;
}
.viertel{
	width:23.3%;
	margin-right:2%;
	float:left;
}
.halbe:last-child,
.drittel:last-child,
.zweidrittel:last-child,
.viertel:last-child{
	margin-right:0;
}


/* section ---------------------------/////////////   */

section h1{
	text-align:center;
	font-size:1.6em;
}

section h2,
section h3{
	font-weight:700;
	text-transform:capitalize;
	font-size:1.em;
	color:#555;
}
section a{
	color:#336;
}
section a:hover{
	text-decoration:underline;
}





/*  works   ///////////////////////////////////////////////////////////////// ------------------------------*/


#work .innerbox{
	padding:50px 0 0px;
	max-width:%;

}

#workliste{
	list-style-type:none;
	overflow:hidden;
	padding:0;
	margin:0;
}

#workliste li {
		border:1px solid #;
	width:23%;/*  breite  vierteln = 4 bilder--------*/
	float:left;
			margin-left: 2%;
			margin-bottom:2%px;
}

#workliste li img{
	width:100%;  /*  breite in li innerbox--------*/
}

#workliste figure{
	margin:0;
	line-height:0;
	position:relative;  /* soll an der figure ausgerichtet werden--------*/
}

#workliste figcaption{
	line-height:1.5em;
	position:absolute;
	left:0;
	right:0;
	top:0;
	bottom:0;
	background:#000;
		text-align:center;
		background:#000;/*  fallback ---*/
		background:rgba(0,0,0,0.3); /*  transparenter Overlay ---*/
			opacity:0;  /*  nicht sichtbar fürs hovern ---*/
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}

#workliste figcaption:hover{
	opacity:1;
}

#workliste .figcaptionbox{
	position:absolute; /*  zentrieren ---*/
	left:50%; /*  zentrieren ---*/
	top:50%; /*  zentrieren ---*/
	transform:translate(-50%,-50%); /*  zentrieren automatisch berechnen lassen---*/
	text-transform:uppercase;
}

/*  oberes kästchen ---*/
#workliste figcaption .kategorie{
	display:block;
	color:#000;
	background:#fff;
	padding:0.3em 0.625em;
	letter-spacing:2px;
	margin-bottom:0.3em;
	border-radius:3px;
	transform:translate(0,-50px);
		-webkit-transition: all 0.3s ease-in-out;
		-moz-transition: all 0.3s ease-in-out;
		-ms-transition: all 0.3s ease-in-out;
		-o-transition: all 0.3s ease-in-out;
		transition: all 0.3s ease-in-out;
				opacity:0; /*  wird stärker und bewegt sich nach unten/oben ---*/
}	

#workliste figcaption .projekt{
	display:block;
	color:#fff;
	transform:translate(0,50px);
		-webkit-transition: all 0.3s ease-in-out;
		-moz-transition: all 0.3s ease-in-out;
		-ms-transition: all 0.3s ease-in-out;
		-o-transition: all 0.3s ease-in-out;
		transition: all 0.3s ease-in-out;
				opacity:0;  /*  wird stärker und bewegt sich nach unten/oben ---*/
}/*  unteres kästchen ---*/

/*  oberes kästchen ---*/
#workliste figcaption:hover .kategorie{
	transform:translate(0,0%);
				opacity:1;  /*  wird stärker und bewegt sich nach unten/oben ---*/
}
/*  unteres kästchen ---*/
#workliste figcaption:hover .projekt{
	transform:translate(0,0);
				opacity:1;  /*  wird stärker und bewegt sich nach unten/oben ---*/
}



/* work ENDE  ______________________________________________________________________________/////////////   */


/*  works2   ///////////////////////////////////////////////////////////////// ------------------------------*/


#work2 .innerbox{
	padding:50px 0 0px;
	max-width:100%;

}

#workliste{
	list-style-type:none;
	overflow:hidden;
	padding:0;
	margin:0;
}

#workliste li {
	width:23.5%;/*  breite  vierteln = 4 bilder--------*/
	float:left;
			margin-left: 20px;
			margin-bottom:18px;
}

#workliste li img{
	width:100%;  /*  breite in li innerbox--------*/
}

#workliste figure{
	margin:0;
	line-height:0;
	border:1px solid #;
	position:relative;  /* soll an der figure ausgerichtet werden--------*/
}

#workliste figcaption{
	line-height:1.5em;
	position:absolute;
	left:0;
	right:0;
	top:0;
	bottom:0;
	background:#000;
		text-align:center;
		background:#000;/*  fallback ---*/
		background:rgba(0,0,0,0.3); /*  transparenter Overlay ---*/
			opacity:0;  /*  nicht sichtbar fürs hovern ---*/
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}

#workliste figcaption:hover{
	opacity:1;
}

#workliste .figcaptionbox{
	position:absolute; /*  zentrieren ---*/
	left:50%; /*  zentrieren ---*/
	top:50%; /*  zentrieren ---*/
	transform:translate(-50%,-50%); /*  zentrieren automatisch berechnen lassen---*/
	text-transform:uppercase;
}

/*  oberes kästchen ---*/
#workliste figcaption .kategorie{
	display:block;
	color:#000;
	background:#fff;
	padding:0.3em 0.625em;
	letter-spacing:2px;
	margin-bottom:0.3em;
	border-radius:3px;
	transform:translate(0,-50px);
		-webkit-transition: all 0.3s ease-in-out;
		-moz-transition: all 0.3s ease-in-out;
		-ms-transition: all 0.3s ease-in-out;
		-o-transition: all 0.3s ease-in-out;
		transition: all 0.3s ease-in-out;
				opacity:0; /*  wird stärker und bewegt sich nach unten/oben ---*/
}	

#workliste figcaption .projekt{
	display:block;
	color:#fff;
	transform:translate(0,50px);
		-webkit-transition: all 0.3s ease-in-out;
		-moz-transition: all 0.3s ease-in-out;
		-ms-transition: all 0.3s ease-in-out;
		-o-transition: all 0.3s ease-in-out;
		transition: all 0.3s ease-in-out;
				opacity:0;  /*  wird stärker und bewegt sich nach unten/oben ---*/
}/*  unteres kästchen ---*/

/*  oberes kästchen ---*/
#workliste figcaption:hover .kategorie{
	transform:translate(0,0%);
				opacity:1;  /*  wird stärker und bewegt sich nach unten/oben ---*/
}
/*  unteres kästchen ---*/
#workliste figcaption:hover .projekt{
	transform:translate(0,0);
				opacity:1;  /*  wird stärker und bewegt sich nach unten/oben ---*/
}



/* work2 ENDE  ______________________________________________________________________________/////////////   */





/*  works   ///////////////////////////////////////////////////////////////// ------------------------------*/










/*  section Team = works/Übersicht + Badekappen------------------------------*/

#team-member{
		border:1px solid #;
	list-style-type:none;
	padding:0;
	margin:0 0 80px 0;
	overflow:hidden;
}

#team-member > li{   			/*  > nur direkter Nachfahre ------*/
	border:1px solid #;
	width:31.3%;
	float:left;
	margin-right:2%;
	margin-bottom:2%;
	text-align:center;
}

#team-member > li:last-child{
	margin-right:0;
}

#team-member li img{
	width:100%;
	-webkit-filter: grayscal(1);
    filter: grayscal(1);
}

#team-member li figure{/*  auch figure hat voreingestellten Abstand ----*/
	margin:0;
	line-height:0;/*  kleiner weißer Rand unten weg ------*/
}

#team-member li figcaption{
	border:1px solid #;
	font-size:1em;
	letter-spacing:px;
	line-height:1.3em;/*  kleiner weißer Rand unten dazu ------*/
	background:#;
}
#team-member li figcaption span{
	   border:1px solid #;
	display:block;
	text-transform:uppercase;
	font-size:0.8em;
}

/*  overlay text + Icons über bild------------------------------*/

.overlay{
	display:non;
	position:relative;  /* mitte flexibel zentrieren , nicht fester Abstand von oben ---*/
	border:1px solid #;
}

.overlay-inner{
	display:non;
	background:#000;/*  fallback ---*/
	background:rgba(0,0,0,0); /*  transparenter Overlay ---*/
	color:#fff;/*  Typo--*/
	position:absolute;    /* mitte flexibel zentrieren , nicht fester Abstand von oben --*/
	left:0;
	right:0;
	top:0;
	bottom:0;
	opacity:0;  /*  nicht sichtbar fürs hovern ---*/
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}


.MIDDENDORF .overlay-inner{
	display:non;
	background:#000;/*  fallback ---*/
	background:rgba(0,0,0,0.3); /*  transparenter Overlay ---*/
	color:#fff;/*  Typo--*/
	position:absolute;    /* mitte flexibel zentrieren , nicht fester Abstand von oben --*/
	left:0;
	right:0;
	top:0;
	bottom:0;
	opacity:0;  /*  nicht sichtbar fürs hovern ---*/
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}

.overlay-inner:hover{
	opacity:0.5;   /*   sichtbar fürs hovern ---*/
}

.MIDDENDORF .overlay-inner:hover{
	opacity:1;   /*   sichtbar fürs hovern ---*/
}
 /*  Logo / icons social ---*/
.overlay-content{
	background:#;
	position:absolute; /*  zentrieren ---*/
	left:50%; /*  zentrieren ---*/
	top:50%; /*  zentrieren ---*/
	transform:translate(-50%,-50%); /*  zentrieren automatisch berechnen lassen---*/
	width:60%;
}

.overlay-content p{
	margin:0 0 1.5em;/*  Abstand Logos zum Text ---*/
	background:#000;
	background:rgba(0,0,0,0.3);
	color:#fff;
	display:inline-block;
	padding:10px;
	border-radius:3px;
	font-weight:bold;
}
.overlay-content span{
	margin:0 0 1.5em;/*  Abstand Logos zum Text ---*/
	background:#fff;
	background:rgba(255,255,255,1);
	color:#000;
	display:inline-block;
	padding:20px;
}
.overlay-inner:hover .overlay-content p{
	background:#000;
    background:rgba(0,0,0,5);

}




.overlay-content .social{
	padding:0; /*  zentrieren ---*/
	list-style-type:none;   /*  bobbels weg ---*/
}

.overlay-content .social li{
	border:px solid #fff;
	display:inline-block;
}

.overlay-content .social li a{
	color: #fff;
	font-size:1.5em;  /*  Logogröße ---*/
	padding:0.5em;  /*  klickfläche erweitert ---*/
	margin:0 0.3em;  /*  klickfläche erweitert ---*/
}



/* scroll-to-top-button /////////////   */

#scroll-to-top{
	position:fixed;
	z-index:9999;
	bottom:30px;
	right:30px;
	background-color:#f90;
	background-color:rgba(50,50,50,0.7);
	width:40px;
	height:40px;
	color:#fff !important;
	font-size:2em;
	display:none;/*scroll-to-top-button von start aus ausblenden, erst beim scrollen einblenden*/
	text-align:center;
	border-radius:20px;
		  -webkit-transition: all 200ms ease-in;
		  -moz-transition: all 200ms ease-in;
		  transition: all 200ms ease-in;
}

#scroll-to-top:hover{
	background-color:#f70;
	background-color:rgba(0,0,0,1);
}



/*  Kontaktformular ////////////////////////////////////////////////////--- */ 


#kontaktformular input[type="text"],/*  spricht nur textfelder an = Attribut-Selektor---*/
#kontaktformular input[type="email"],
#kontaktformular textarea{
	background:#f9f9f9;
	padding:0.625em 0.6em; /*  Abstand Kontaktfeld nach oben---*/
	border:1px solid #ccc;
	color:#000;
	border-radius:3px;
}

#kontaktformular input[type="text"]:focus,/*  focusieren/sichbar machen/ farbe ändern beim setzten des Kursors ins Eingabefeld---*/
#kontaktformular input[type="email"]:focus,
#kontaktformular textarea:focus{
	background:#fff;
	padding:0.625em 0.6em; /*  Abstand Kontaktfeld nach oben---*/
	border:1px solid #ccc;
	color:#000;
	border-radius:3px;
}

#kontaktformular textarea{
	width:100%;
	height:150px;
}

#kontaktformular input[type="submit"]{
	border:0;
}/*  spricht nur textfelder an = Attribut-Selektor---*/

#team-contact h2{
	color:#666;
}





/*  badekappen ///////////////////////////////_____---*/
#tryp{
		border:2px solid #;
	font-size:1.2em;
	color:#666;
	text-align:center;
	margin-bottom:30px;
}

#tryp img{
		border:2px solid #;
	width:100%;
	margin-top:30px;
}





/*  badekappen ////////////////////////////////////////////////////__________________________________________________________--- */

/*  Generäle ////////////////--- */





/* deconstructiv-------------------------- */

.wrapper-deco #hero{
	height:200px;
	height:30vh;
	background:#004289 url(../bilder/header/header3.jpg) no-repeat center top scroll;
	background-size:cover;
}



#deco .innerbox {
	border:1px solid #;
	padding:0;
	overflow:hidden;
}

#deco row:nth-child(5n){
	margin-right:0;
}


#deco .viertel{
		border:2px solid #;
	width:23.5;
	float:left;
	margin-bottom:12px;
	margin-right:1%;
	padding:0;
}
#deco .viertel img{
		border:2px solid #;
	width:100%;
	float:left;
}


/* ENDE deconstructiv  */

/* bio  */












/*  footer ////////////////////////////////////////////////////__________________________________________________________--- */

footer{
	background-color:#444;
	text-align:center;
}

footer .social{
	padding:0; /*  zentrieren ---*/
	list-style-type:none;   /*  bobbels weg ---*/
}

footer .social li{
			border:2px solid #;
	display:inline-block;
}

footer .social li a{
	color: #fff;
	color:rgba(255,255,255,1);
	font-size:2em;  /*  Logogröße ---*/
	padding:0.3em;  /*  klickfläche erweitert ---*/
	margin:0 0.8em;  /*  klickfläche erweitert ---*/
}

footer .social li a:hover{
	color: #999;
	color:rgba(255,255,255,0.5);
			-webkit-transition: all 0.5s ease-in-out;
			-moz-transition: all 0.5s ease-in-out;
			-ms-transition: all 0.5s ease-in-out;
			-o-transition: all 0.5s ease-in-out;
			transition: all 0.5s ease-in-out;
}



footer #rechtliches{
	border:1px solid #;
	padding:0; 
	list-style-type:none;  
}

footer #rechtliches li{
		border:1px solid #;
	display:inline-block;
}

footer #rechtliches li a{
	color: #aaa;
	color:rgba(255,255,255,1);
	font-size:0.8em;  /*  Logogröße ---*/
	padding:0.3em;  /*  klickfläche erweitert ---*/
	margin:0 1em;  /*  klickfläche erweitert ---*/
}

/*  Datenschutz------------------------------*/








/*  Breakpoint , desktop first  =  Änderungen von 0 - 766px ------------------------------*/

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

	
/*  header //////////////////////////////////////////////////////////////// */
	  
  .main_h {
    padding-top: 25px;
  }

  .logo {
    float: none;
  }

  .mobile-toggle {
    display: block;
  }

  nav {
    width: 100%;
  }

  nav ul {
    padding-top: 10px;
    margin-bottom: 22px;
    float: left;
    text-align: center;
    width: 100%;
	padding-left:0;
  }

  nav ul li {
    width: 100%;
    padding: 7px 0;
    margin: 0;
  }
  
  /*  raster  /////////////////////// */
  
.halbe, .drittel, .zweidrittel{  /*  Komma, Gruppenselektor /////////////////////// */
	width:100%;
	margin-right:0%;
	float:none;   /*  float von oben greift nicht mehr////// */
}

/*  About  /////////////////////// */ 
  
  #about .halbe:first-child{
	  margin-bottom:4em; /*  abstand zu oben   read more button////// */
  }
   
 /*  What i do  /////////////////////// */
  
  #what-i-do .drittel{
	   margin-bottom:1em;  /*  abstand zwischen den Feldern////// */
  }
  
   #what-i-do .drittel:last-child{
	   margin-bottom:0;  /*  Fotographie-feld abstand nach unten  ////// */
  }
  
/*  Team  /////////////////////// */  

 #team-member{  /*  > nur direkter Nachfahre ------*/
	width:80%;
	margin:auto;
}
 
 #team-member > li{  /*  > nur direkter Nachfahre ------*/
	width:100%;
	float:none;
	margin-right:0%;
	margin-bottom:2em;
	text-align:center; 
}
 
 #team-member > li:last-child{   		
	margin-bottom:0em; /*   abstand nach unten  ////// */
}
  
 .overlay-inner{
	background:rgba(0,0,0,0.6); /*  transparenter Overlay ---*/
	left:50%;   /*   Änderung zu Oben 518,halbe abdeckung ---*/
	opacity:0.5;  /*   Änderung zu Oben 518, sichtbar fürs hovern ---*/
 }
 
  

  
#workliste li{
	width:49%;   /*  breite halbe 48 statt 50bilder--------*/
border:1px solid #ccc;
padding:0.625em;
margin:0 2% 2% 0;	
} 
  
#workliste li:nth-child(2n){
margin:0 0 2% 0;	
} 
 
#workliste figcaption{
	line-height:1.5em;
	position:static;  
	background:#000;
	background:rgba(255,255,255,1); /*  transparenter Overlay ---*/
	opacity:1;  /*  nicht sichtbar fürs hovern ---*/
	line-height:1.3em;

}

#workliste .figcaptionbox{
	position:static; 
	transform:translate(0,0);
}

/*  oberes kästchen ---*/
#workliste figcaption .kategorie{
	transform:translate(0,0);
	opacity:1; /*  wird stärker und bewegt sich nach unten/oben ---*/
	margin-bottom:0;  /*  705 ---*/
	padding-bottom:0;/*  707 ---*/
}	

#workliste figcaption .projekt{
	color:#f90;
	transform:translate(0,0);
	opacity:1;  /*  wird stärker und bewegt sich nach unten/oben ---*/
}

 /*  Kontakt  /////////////////////// */ 
  
  #kontaktformular p{
	  border:1px solid #;
  }
  
  #kontaktformular .halbe:first-child{
	  margin-bottom:1em;   /*  abstand zwischen beiden oberen feldern ---*/
  }  
  
  #kontaktformular .button{
	  margin-top:0;    /*  abstand zum Button unten---*/
  }

  
  
}

/*  ENDE    Breakpoint , desktop first  =  Änderungen von 0 - 766px */


/*  Breakpoint , desktop first  =  Änderungen von 0 - 480px ------------------------------*/

@media only screen and (max-width: 480px) {
	.innerbox{
		border:1px solid #;
	}
/*  Header //////////////////////////////////// */	
.hero h1 {
	background:#fff;
	  background:rgb(255,255,255,0.6);
	  padding:0.225em;
	  font-size:1.8em;
	  font-weight:;
	  border-radius:3px;
}
/*  Team //////////////////////////////////// */	
.overlay-inner{
	border:1px solid #;
	left:0;
	top:85%;
	display:none;
}

.overlay-content p{
	display:none;
}

/*  Work //////////////////////////////////// */
#workliste li{
width:100%;   /*  breite halbe 48 statt 50bilder--------*/
margin:0 0% 2% 0;
float:none;
}

/*  lightbox pfeile kopiert aus lightbox.min.css--------*/

.lb-nav a.lb-prev{
	opacity:1;
}

.lb-nav a.lb-next{
	opacity:0;
}









/*  ENDE 480px //////////////////////////////////// */
}



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

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

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