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

* {
	box-sizing: border-box;
}

img {
    pointer-events: none;
}

body {
font-family: 'raleway', 'roboto', sans-serif;
color: #333;
background: white;
margin:0;
}

a {  
text-decoration: none; /* keine Unterstriche*/
}

#click-to-work{          
 color:#fff; 
 text-align:center;
position: absolute;
left: 0;
right:0;
top:0;
bottom:0;
}

#click-to-work span{          
position: absolute;
left: 50%;
bottom:30px;
transform:translateX(-50%);
}

h1, h2{ 
display: inline-block;
text-transform:uppercase;
font-weight:300;
font-size: 2em;
color:#ccc;
margin:20px 20px 5px 50px;
position:relative;
}

h2{
  font-weight:400;
  color:#fff;
  text-align:right;
}

.innerbox{
                      
width: 100%;
max-width: 1024px;
margin: 0 auto;
position: relative;
}

header .innerbox{
padding: 0 2%;
}

footer .innerbox{
padding: 10px 2%;
}
/* header ////////////// */

.main_h {
  position: fixed;
  top:0px;
  max-height: 100px;
  z-index: 999;
  width: 100%;
  padding-top: 17px;
overflow: hidden;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  padding-bottom: 6px;
}

.sticky, 
.open-nav {
	background-color:#ddd;
}

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

.logo {
    width:160px;
    float: left;
    display: block;
    margin: 0 0 -10px 30px ;
    display:none;
    opacity:0.7;
}

.logo img{
  width: 100%;
}

.logo2 {
    width:160px;
    float: left;
    display: block;
    opacity:0.7;
	text-align:left;
}

.logo2 img{
  width: 100%;
}
.sticky .logo { 
  display:inherit;
  text-shadow:inherit;
}

.hero img{
  width: 66%;
}

.sticky .logo,
.open-nav .logo { 
	color: #f00;
} 	

nav {
  float: right;
}

nav ul {
  list-style: none;
  overflow: hidden;
  text-align: right;
  float: right;
}

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

nav ul li a {
  color: #fff;
  text-shadow:1px 1px 1px #aaa;
  text-transform: uppercase;
  font-size: 12px;
}

nav ul li a:hover { 
  text-shadow:1px 1px 1px #44f;
}

.sticky nav ul li a, 
.open-nav nav ul li a {	
  color: #666;
   text-shadow:1px 1px 1px #eee;
}

.sticky nav ul li a:hover,
.open-nav nav ul li a:hover {
  color: #000;
   text-shadow:1px 1px 1px #aaf;
}

.mobile-toggle {
  display: none;
  cursor: pointer;
  font-size: 20px;
  position: absolute;
  right: 42px;
  top: 18px;
  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;
  background: #8f8f8f;
  display: block;
  
}

.sticky .mobile-toggle span,
.open-nav .mobile-toggle span {
background: #8f8f8f;
}
/* ende header ////////////// */


/* hero Großbild-bereich ////////////// */
.hero {
	background: url(../bilder/higru/img-index-bg-03.jpg) no-repeat center center fixed;
	 -webkit-background-size: cover;
	 -moz-background-size: cover;
	background-size:cover;
}

.herobox{	
	position: relative;
	height: 500px;
	height: 100vh; 	
	max-width: 940px;
	margin: 0 auto;
	padding: 0px 2%;
	
}

#logo-big{ 
	width:80%;
	margin-top:200px;
	min-width:90px;
	opacity:1;
		-webkit-transition: all 200ms ease-in-out ;
		-moz-transition: all 200ms ease-in-out ;
		-ms-transition: all 200ms ease-in-out ;
		-o-transition: all 200ms ease-in-out ;
		transition: all 200ms ease-in-out ;
}
.gaga #logo-big{ 		
	opacity:0;
}

.mouse {
  margin: 0 auto;
  width: 26px;
  height: 46px;
  border-radius: 13px;
  border: 2px solid #333;
  position: absolute;
  bottom: 40px;
  position: absolute;
  left: 50%;
  margin-left: -26px;
}

.mouse span {
  display: block;
  margin: 6px auto;
  width: 2px;
  height: 2px;
  border-radius: 4px;
  background: #f90;
  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;
}

@-webkit-keyframes scroll {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);  
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(20px);
    transform: translateY(20px);
  }
}

@keyframes scroll {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(20px);
    -ms-transform: translateY(20px);
    transform: translateY(20px);
  }
}

/* CSS-Raster, Grid, Layout /////////////   */
.row{
	overflow:hidden;
}

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

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

.zweidrittel {
	width:65.3333%;
	margin-right:4%;
	float:left;
}

.halbe:last-child,
.drittel:last-child,
.zweidrittel:last-child{
	margin-right:0
}

/* sektionen /////////////   */

p .contact{
                        color:red;
    
}
	/* sektion1 "about" /////////////   */

	section a{
		color:#f90;
	}
	section a:hover{
		text-decoration:underline;
	}
	
	.overlay{
		position:relative;
		border:1px solid #333;
	}
	.overlay-inner{
		background:rgba(0,0,0,0.8);
		position:absolute;
		left:0;
		right:0;
		top:0;
		bottom:0;
		color:#fff;
		opacity:0;
	}
	.overlay-inner:hover{
		opacity:1;
			-webkit-transition: all 500ms ease-in-out ;
			-moz-transition: all 500ms ease-in-out ;
			-ms-transition: all 500ms ease-in-out ;
			-o-transition: all 500ms ease-in-out ;
			transition: all 500ms ease-in-out ;
	}
	
	.overlay-content{
		position:absolute;
		left:50%;
		top:50%;
		transform:translate(-50%,-50%);
		width:80%;
	}
	
	.overlay-content p{
		margin:0 0 1em;
	}
	.overlay-content .social{
		padding:0;
		list-style-type: none;
	}
	.overlay-content .social li{
		display: inline-block;
	}
	
	.overlay-content .social li a{
		font-size:1.2em;
		color:#fff;
		padding:0.8em; 			/* macht icon-clickfläche breiter */
		margin: 0em 0.3em;		/* macht abstand zwischen  icons */
	}

	
/* buttons /////////////   */
.button{
	display:inline-block;
	background-color:#666;
	color:#fff;
	font-weight:600;
	letter-spacing:2px;
	padding:11px 30px;
	font-size:0.8em;
	text-transform:uppercase;
    
		-webkit-transition: all 333ms ease-in-out;
		-moz-transition: all 333ms ease-in-out;
		-ms-transition: all 333ms ease-in-out;
		-o-transition: all 333ms ease-in-out;
		transition: all 333ms ease-in-out;
}

.button:hover{
	background-color:#333;
	text-decoration:none;
}


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

#scroll-to-top{ 
	position:fixed;
	z-index:9999;
	bottom:33px;
	right:30px;
	background-color:#fff;
	background-color:rgba(255,255,255,0.3);
	width:30px;
	height:40px;
	color:#fff !important;
	font-size:1.5em;
	display:none;/*scroll-to-top-button von start aus ausblenden, erst beim scrollen einblenden*/
	text-align:center;
	-webkit-transition: all 333ms ease-in;
	-moz-transition: all 333ms ease-in;
	transition: all 333ms ease-in;
}
#scroll-to-top:hover{
	background-color:#eee;
	background-color:rgba(255,255,255,0.6);
}

/*--- ////work/////----------- */

#work{
	max-width:100%;
	background-color:#333;
}

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

#workliste li{
	width:16.6667%;
	float:left;
}

#workliste li img{
	width:100%;
	border:2px solid #333;
}

#workliste figure{
	margin:0;
	line-height:0;
	position: relative;
	
}

#workliste figcaption{
	text-align:center;
	line-height:1em;
	position: absolute;
	left:0;right:0;bottom:0;top:0;
	Background-color:#000; 
	Background-color:rgba(0,0,0,0.7);
	opacity:0;
			-webkit-transition: all 500ms ease-in-out ;
			-moz-transition: all 500ms ease-in-out ;
			-ms-transition: all 500ms ease-in-out ;
			-o-transition: all 500ms ease-in-out ;
			transition: all 500ms ease-in-out ;
}

#workliste figcaption:hover{
	opacity:1;
}

#workliste .figcaption-box{
	position: absolute;
	left:50%;
	top:50%;
	Transform:translate(-50%,-50%);
}

#workliste figcaption .kategorie{
	display:block;
	color:#000;
	background:#fff;
	padding:0.2em 0.2em;
	text-transform:uppercase;
	letter-spacing:0;
	margin-bottom:0.3em;
	transform:translate(0,-66%);
		-webkit-transition: all 333ms ease-in-out;
		-moz-transition: all 333ms ease-in-out;
		-ms-transition: all 333ms ease-in-out;
		-o-transition: all 333ms ease-in-out;
		transition: all 333ms ease-in-out;
		opacity:0;
}

#workliste figcaption .projekt{
	display:block;
	color:#fff;
	font-size:80%;
	transform:translate(0,66%);
		-webkit-transition: all 333ms ease-in-out;
		-moz-transition: all 333ms ease-in-out;
		-ms-transition: all 333ms ease-in-out;
		-o-transition: all 333ms ease-in-out;
		transition: all 333ms ease-in-out;
		opacity:0;
}

#workliste figcaption:hover .kategorie{
	transform:translate(0,0);
		opacity:1;
}

#workliste figcaption:hover .projekt{
	transform:translate(0,0);
		opacity:1;
}

/*------///// testimonials /////////////////// ----------- */
#kundenstimmen{
	background:#666;
    color:#eee;
}

/*------///// contact /////////////////// ----------- */


											/* Attributselektor !!!! */
#kontaktformular input[type="text"],
#kontaktformular input[type="email"],
#kontaktformular textarea{
	background:#f9f9f9;
	Padding:0.625em 1em;
	border: 1px solid #eee;
	font-size: 1em;
}

/* :focus -> beim Setzen des Cursors in das Eingabefeld....*/
#kontaktformular input[type="text"]:focus,
#kontaktformular input[type="email"]:focus,
#kontaktformular textarea:focus{
	background:#fff;
	border: 1px solid #000;
}

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

#kontaktformular input[type="submit"]{
	border: 0;
}


/*------///// FOOTER /////////////////// ----------- */
	
footer{
	background:#aaa;
	text-align:center;
}

footer .social{
	padding:0;
	list-style-type: none;
}

footer .social li{
	display: inline-block;
}

footer .social li a{
	font-size:3em;
	color:#eee;
	margin: 0em 0.3em;		/* macht abstand zwischen icons */
	-webkit-transition: all 444ms ease-in-out;
	-moz-transition: all 444ms ease-in-out;
	-ms-transition: all 444ms ease-in-out;
	-o-transition: all 444ms ease-in-out;
	transition: all 444ms ease-in-out;
}

#cu-logo{
	width:60px;
	-webkit-transition: all 444ms ease-in-out;
	-moz-transition: all 444ms ease-in-out;
	-ms-transition: all 444ms ease-in-out;
	-o-transition: all 444ms ease-in-out;
	transition: all 444ms ease-in-out;
}
#cu-logo:hover{
	-webkit-filter: invert(1);
    filter: invert(1);
}

footer .social li a:hover {
	color:#222;
}

/*--- Breakpoint 1, desktop first, Anderungen von 0-770px ----------- */
@media only screen and (max-width: 770px) {

/*///// header /////*/

	.main_h {
	padding-top: 10px;	 
	  max-height:80px;
	} 												

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

	nav {
	width: 100%;
	}

	nav ul li {
	width: 100%;
	padding: 7px 0;
	margin: 0;
	}

	.mobile-toggle {
	display: block;
	}
	
/*///// Raster Änderung  /////*/
	
	.halbe,.drittel,.zweidrittel{
	width: 100%;
	margin-right:0%;
	float:none;
	}
	
	/*///// About Änderungen  /////*/
	
	#about .halbe:first-child{
		margin-bottom:4em;
	}
	
	/*///// What I Do Änderungen  /////*/
	
	#what-i-do .drittel{
		margin-bottom:2em;
	}
	
	#what-i-do .drittel:last-child{
		margin-bottom:0em;
	}
		
	/*///// Team Änderungen  /////*/
	
	
	#team-member > li{
		width:100%;
		float:none;
		text-align:left;
		margin-bottom:2em;
	}
	#team-member > li:last-child{
		margin-bottom:0em;
	}
	
	#team-member{
		width:80%;
		margin:auto;
	}
	
	.overlay-inner{
		background:rgba(0,0,0,0.5);
		left:50%;
		opacity:1;
	}
	
	/*///// work Änderungen  /////*/
	
	#workliste{
	/*padding:0 2%;*/
	}
	
	#workliste li{
	width:33.333%;
	/*border:1px solid #eee;
	padding:0.5em;
	margin:0 2% 2% 0;*/
	}
	
	#workliste li:nth-child(3n){
	margin:0 0 2% 0;
	}
	
	
	#workliste figcaption{
	position:static;
	Background:#fff; 
	Background:rgba(255,255,255,1);
	opacity:1;
	line-height:1.3em;
	}

	#workliste .figcaption-box{
		/*position:static;
		Transform:translate(0,0);
		*/
	}

	#workliste figcaption .kategorie{
		transform:translate(0,0);
		opacity:0.8;
		margin-bottom:0;
		padding-bottom:0;
	}

	#workliste figcaption .projekt{
		color:#fff;
		text-shadow:1px 1px 2px #000;
		transform:translate(0,0);
		opacity:1;
    
	}
	
	section a:hover{
		text-decoration:none;
	}
		
	/*/////  kontakt  /////*/
	
	#kontaktformular .halbe:first-child{
		margin-bottom:1em;
	}
	
	#kontaktformular .button{
		margin-top:0;
	}
}     
/*--- Ende Breakpoint 0-766px ----------- */

/*--- Breakpoint 1, desktop first, Anderungen von 0-480px ----------- */
@media only screen and (max-width: 480px) {
    	
	h1 {
	 padding:0.2em;
	 font-size:1.5em;
	}
	
	.overlay-inner{
		left:0;
		top:85%;
	}
	
	.overlay-content p{
		display:none;
	}
	
	/* work */
	#workliste li{
	width:100%;
	margin:0 0 2% 0;
	float:none;
	}
	
}/*--- ende Breakpoint 0-480px----------- */

/* raleway-300 - latin */
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/raleway-v14-latin-300.eot'); /* IE9 Compat Modes */
  src: local('Raleway Light'), local('Raleway-Light'),
       url('../fonts/raleway-v14-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/raleway-v14-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/raleway-v14-latin-300.woff') format('woff'), /* Modern Browsers */
       url('../fonts/raleway-v14-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/raleway-v14-latin-300.svg#Raleway') format('svg'); /* Legacy iOS */
}
/* raleway-regular - latin */
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/raleway-v14-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Raleway'), local('Raleway-Regular'),
       url('../fonts/raleway-v14-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/raleway-v14-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/raleway-v14-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/raleway-v14-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/raleway-v14-latin-regular.svg#Raleway') format('svg'); /* Legacy iOS */
}
/* raleway-600 - latin */
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/raleway-v14-latin-600.eot'); /* IE9 Compat Modes */
  src: local('Raleway SemiBold'), local('Raleway-SemiBold'),
       url('../fonts/raleway-v14-latin-600.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/raleway-v14-latin-600.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/raleway-v14-latin-600.woff') format('woff'), /* Modern Browsers */
       url('../fonts/raleway-v14-latin-600.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/raleway-v14-latin-600.svg#Raleway') format('svg'); /* Legacy iOS */
}
/* raleway-700 - latin */
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/raleway-v14-latin-700.eot'); /* IE9 Compat Modes */
  src: local('Raleway Bold'), local('Raleway-Bold'),
       url('../fonts/raleway-v14-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/raleway-v14-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/raleway-v14-latin-700.woff') format('woff'), /* Modern Browsers */
       url('../fonts/raleway-v14-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/raleway-v14-latin-700.svg#Raleway') format('svg'); /* Legacy iOS */
}
/* roboto-100 - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 100;
  src: url('../fonts/roboto-v20-latin-100.eot'); /* IE9 Compat Modes */
  src: local('Roboto Thin'), local('Roboto-Thin'),
       url('../fonts/roboto-v20-latin-100.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/roboto-v20-latin-100.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/roboto-v20-latin-100.woff') format('woff'), /* Modern Browsers */
       url('../fonts/roboto-v20-latin-100.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/roboto-v20-latin-100.svg#Roboto') format('svg'); /* Legacy iOS */
}
/* roboto-regular - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/roboto-v20-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Roboto'), local('Roboto-Regular'),
       url('../fonts/roboto-v20-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/roboto-v20-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/roboto-v20-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/roboto-v20-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/roboto-v20-latin-regular.svg#Roboto') format('svg'); /* Legacy iOS */
}
/* roboto-500 - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/roboto-v20-latin-500.eot'); /* IE9 Compat Modes */
  src: local('Roboto Medium'), local('Roboto-Medium'),
       url('../fonts/roboto-v20-latin-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/roboto-v20-latin-500.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/roboto-v20-latin-500.woff') format('woff'), /* Modern Browsers */
       url('../fonts/roboto-v20-latin-500.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/roboto-v20-latin-500.svg#Roboto') format('svg'); /* Legacy iOS */
}