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-size: 100%; font: inherit; vertical-align: baseline;}

article, aside, details, figcaption, figure, footer, header, hgroup, nav, section {
display: block;
}

html {
font-size: 100%;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}

img {
max-width: 100%;
width: auto\9;
height: auto;
vertical-align: middle;
border: 0;
-ms-interpolation-mode: bicubic;
}

/* Basis
============================================= */
.clearfix:before, .clearfix:after { content: " "; display: table; }
.clearfix:after { clear: both; }


body {	
	text-align:left;
	font-family: 'Raleway', sans-serif;
	font-size:14px;
	background-color: rgb(200, 200, 200);
	color: #000;	
	width: 100%;
	height: 100%;
	max-width: 100% !important;
	}
	
.workbody{
	background-color: #fff;
	}

.test{
		background-color: #000;
}

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

/* Schrift
============================================= */
@font-face {
	font-family: 'icomoon';
	src:url('../fonts/icons/icomoon.eot');
	src:url('../fonts/icons/icomoon.eot?#iefix') format('embedded-opentype'),
		url('../fonts/icons/icomoon.woff') format('woff'),
		url('../fonts/icomoon.ttf') format('truetype'),
		url('../fonts/icomoon.svg#icomoon') format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
  font-family: 'ModeratBold';
  src: url('../fonts/Moderat/moderat-bold-webfont.eot'); /* IE9 Compat Modes */
  src: url('../fonts/Moderat/moderat-bold-webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/Moderat/moderat-bold-webfont.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/Moderat/moderat-bold-webfont.woff') format('woff'), /* Pretty Modern Browsers */
       url('../fonts/Moderat/moderat-bold-webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('../fonts/Moderat/moderat-bold-webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
	}
@font-face {
  font-family: 'ModeratRegular';
  src: url('../fonts/Moderat/moderat-regular-webfont.eot'); /* IE9 Compat Modes */
  src: url('../fonts/Moderat/moderat-regular-webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/Moderat/moderat-regular-webfont.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/Moderat/moderat-regular-webfont.woff') format('woff'), /* Pretty Modern Browsers */
       url('../fonts/Moderat/moderat-regular-webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('../fonts/Moderat/moderat-regular-webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
	}

h1, h2, h3, h4, h5, h6 {
	text-rendering: optimizelegibility;
	}

h1 {font-family: 'ModeratBold';
	font-size: 7em;
	text-transform: uppercase;	

	font-weight: 700;
	color: #fff;
	text-align: center;	
	}

h2 {		
	font-family: 'ModeratRegular';
	margin-bottom: 5px;
	font-size: 1em;		
	color: #fff;
	text-align: center;
letter-spacing: 0.1em;
text-transform: uppercase; 

	
	}

h3 {font-family: 'Raleway';
	font-size: 2em;	
	letter-spacing: 0.1em;
	font-weight: 700;
	color: #c7b868;
	text-align: center;	
	margin: 0;
	padding: 0 0 0.5em;
	text-transform: uppercase;		
	}


h4 {font-family: 'ModeratRegular';
	font-size: 1em;
	text-transform: uppercase;	
	letter-spacing: 0.1em;
	font-weight: 400;
	color: #000;
	text-align: center;	
	margin: 0;
	padding: 1em 0 0.4em;
	-webkit-transform: translateY(0px);
	-moz-transform: translateY(0px);
	-ms-transform: translateY(0px);
	transform: translateY(0px);
	-webkit-transition: -webkit-transform 0.4s;
	-moz-transition: -moz-transform 0.4s;
	-webkit-transition: transform 0.4s;	
	}
	
h5{	font-family: 'ModeratRegular';
	font-size: 0.8em;
	text-transform: lowercase;	
	letter-spacing: 0.1em;
	color: #000;
	text-align: center;	
	margin: 0;
	padding-bottom:2em;
	-webkit-transition: -webkit-transform 0.4s;
	-moz-transition: -moz-transform 0.4s;
	-webkit-transition: transform 0.4s;		
	}	
	
h6 {font-family: 'ModeratBold';
	font-size: 5.3em;
	text-transform: uppercase;	
	letter-spacing: 0.05em;
	font-weight: 700;
	color: #ededed;
	text-align: center;
	margin: 0em 0 0.1em 0;
	}	
	
h7{	font-family: 'ModeratRegular';
	font-size: 1em;
	letter-spacing: 0.1em;
	color: #000;
	text-align: center;
	}	
		
	
p{	font-family: 'ModeratRegular';
	font-size: 1em;
	line-height: 1.8;
	font-weight: 300;
	color: #000;
	text-align: left;
	-webkit-column-count:2;
	-moz-column-count:2;
	column-count:2;
	-webkit-column-gap:40px;
	-moz-column-gap:40px;
	column-gap:40px;
	-moz-column-rule:1px outset #c9c9c9;
	column-rule:1px outset #c9c9c9;
	-webkit-column-rule:1px outset #c9c9c9;	
	}
	
.p_important{
	font-family: 'ModeratBold';
	letter-spacing: 0.03em;		
	}
	
.p_small{
	font-weight: 300;	
	}
	
.p_date{
	font-weight: 200;
	font-size: 1em;
	line-height: 1.8;
	letter-spacing: 0.2em;		
	}
	
.p_kurs{
	font-style:italic;
	}
			
.p_credits{
	color: #868686;
	font-size: 0.8em;
	line-height: 1.6;	
	margin: 0 0 50px 0;
	}	
h4.headline {
	font-size: 2em;
	letter-spacing: 0.2em;
	font-weight: 200;
	text-align: center;	
	padding: 2em;
	}

#about_text{
	padding-top: 2em;
	width: 80%;
	max-width: 1000px;
	margin: 0 auto;
	}
	
#about_text_references{
	-webkit-column-count:1;
	-moz-column-count:1;
	column-count:1;
	-webkit-column-gap:0px;
	-moz-column-gap:0px;
	column-gap:0px;	
	}	
.award_logos {
	width: 60%;	
	margin-top: 10em !important;}
	
/* ================================== header ================================================ 	*/

.cbp-spmenu {
	background: #ededed;
	position: fixed;
	opacity: 1;
	}

.cbp-spmenu a {
	display: block;
	}

.cbp-spmenu a:hover {
	}

.cbp-spmenu a:active {
	display: inline;	
	}
	
.cbp-spmenu-horizontal h3 {
	height: 100%;
	width: 10%;
	float: left;
}

/* Orientation-dependent styles for the content of the menu */
.cbp-spmenu-horizontal {
	width: 100%;
	height: 80px;
	left: 0;
	z-index: 1000;
	overflow: hidden;
	}

.cbp-spmenu-horizontal a {
	}
/* Horizontal menu that slides from the top or bottom */

.cbp-spmenu-top {
	top: -80px;
	}

.cbp-spmenu-top.cbp-spmenu-open {
	top: 0px;
	}
	
/* Transitions */

.cbp-spmenu{
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	transition: all 0.3s ease;
	}

/* Example media queries */

@media screen and (max-width: 55.1875em){

	.cbp-spmenu-horizontal {
		font-size: 75%;
		height: 80px;
	}

	.cbp-spmenu-top {
		top: -80px;
	}

}

@media screen and (max-height: 26.375em){

	.cbp-spmenu-vertical {
		font-size: 90%;
		width: 60px;
	}
}

/* === button logo === */

.main > section {
	max-width: 60px;
	width: 90%;
	margin: 0 auto;
	position: fixed;
	top: 15px;
	left: 8px;
	z-index:888888;		
	}

.main > section button {
	background: none;
	border: none;
	color: #000;
	display: block;
	width: 100%;
	cursor: pointer;
	margin: 10px 0;
	font-size: 0.8em;
	transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transition-property: transform;
    transition-duration: 0.3s;
    -webkit-transition-property: -webkit-transform;
    -webkit-transition-duration: 0.3s;
    -ms-transition-property: -ms-transform;
    -ms-transition-duration: 0.3s;		
	}



.main > section button.active {
	transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    color: #000;
    -webkit-transition: all 0.5s ease-out;
	-moz-transition: all 0.5s ease-out;
	-webkit-transition: all 0.5s ease-out;
	}
	
.main > section button:hover {
    color: #000;	
	}

.main > section button.disabled {
	pointer-events: none;
	}


nav.main_menu{
	text-align: center;		
	display: table;
	width: 100%;
	z-index: 10001 !important;
	}
	
nav.main_menu ul {
	display: table-row;
	
	}
	
nav.main_menu li {
	display: table-cell;
	vertical-align: top;
	text-align: center;
	}
	
.spacer{
	width:10%;
	display: inline;		
	}
		
.work, .about, .contact{
	text-align: center;	
	padding-top: 30px;
	width:20%;	
	display: inline;	
	}
	
.social{
	text-align: center;	
	padding-top: 30px;
	width: 6.66666667%;	
	display: inline;
	color: rgb(228, 228, 228); 
	}

.main_menu a {
	display: block;
	text-decoration: none;
	text-transform: uppercase;	
	font-family: 'Raleway';
	font-size: 1.3em;
	letter-spacing: 0.1em;
	font-weight: 400;
	color: #000;		
	text-align: center;
	-webkit-transition: all 0.5s ease-out;
	-moz-transition: all 0.5s ease-out;
	-webkit-transition: all 0.5s ease-out;
	}
	
.main_menu a:hover {
	color: #b2b2b2;		
	}

.main_navigation{
	margin-top:20px;
	margin-bottom: 20px;
	}
	
.nav_back_white{
	position: fixed;
	top: 0;
	left: 0;
	width: 0%;
	background: none;
	height: 0;
	z-index: 10000 !important;
	}	
	
/* ========================================== GRID ===================================== 	*/
/* General grid styles  */

.main{
	width: 80%;
	margin: 0 auto;	
	}

.grid{
	list-style: none;
	padding: 0 0 10% 0;
	margin: 0;
	}
	
.grid:before, 
.grid:after{ 
	content: " "; 
	display: table; 
	}
	
.grid:after{ 
	clear: both; 
	}

.grid li{
	width: 33%;
	float: left;
	height: auto;
	text-align: center;
	}
.grid li.border_about{
	border-left:1px solid #c9c9c9;
	}	
	
.grid li:nth-child(-n+3){
	border-top: none;

}
	
.grid li > a{
	opacity: 1;
	padding: 15px;
	display: block;
	color: #000;
   transition: opacity .7s ease-in-out;
   -moz-transition: opacity .7s ease-in-out;
   -webkit-transition: opacity .7s ease-in-out;

	}

/* ===== hover effects ===== */	


figcaption{
	width: 100%;	
height: 5em; 
	background: #fff;
	}

figcaption.design{
	width: 100%;	
	height: auto;		
	background: #dddddd;
	}
	
.grid li > a:hover{
	}

.grid li > a:hover h4{
	-webkit-transform: translateY(2px);
	-moz-transform: translateY(2px);
	-ms-transform: translateY(2px);
	transform: translateY(2px);
	}
	
.grid li > a:hover h5{
	-webkit-transform: translateY(-2px);
	-moz-transform: translateY(-2px);
	-ms-transform: translateY(-2px);
	transform: translateY(-2px);
	}

/* ===== welcome  ===== 

	background-image: url('../img/zeitungsportrait-34.png');
	overflow: hidden;
	background-size: cover;
	background-position: center center;

*/	
/* Header */
.header {
	position: relative;
	margin: 0 auto;
	min-height: 200px;
	width: 100%;

	}

.header_with_content{
	min-height: 900px;
	
	}

.bg-img {
	position: absolute;
	overflow: hidden;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	}

.bg-img img {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	min-width: 100%;
	min-height: 100%;
	}

.title {
	z-index: 1000;
	margin: 0 auto;
	width: 100%;
	text-align: center;
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translateX(-50%) translateY(-50%);
	transform: translateX(-50%) translateY(-50%);
  	-webkit-animation-delay: 1s;	
	}



/* ================================== WORK =============================================== */



article{
margin: 0px auto;	
	text-align: center;
	max-width: 1000px;
	}

#article_center{
	text-align: center;
	}
	
.awards{
	text-align: left;
	margin: 4em 0 0 0;	
	}
	
#awards{
	font-size: 0.8em;
	margin: 1em 0 2em 0;	
	}
	
.awardshl{
	margin: 5em 0 2em 0;
	}



/* ===== VIDEOS ===== */



.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px; height: 0; overflow: hidden;
	}
 .vimeo_video-container {
    padding-bottom: 56.25%;
    padding-top: 0; height: 0; overflow: hidden;

	}
.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
	}
.work_description{
	margin: 6em 0 5em 0;
	}	

}
/*===== NAVIGATION =====*/



.prev_work, .next_work{
	z-index:888889;
	}

.prev_work, .next_work{
	position: fixed;
	top: 50%;
	height: 100px;
	width: 4%;
	min-width: 40px;
	max-width: 90px;
	margin-top:-50px;
	padding: 45px 0 0 0;
	border-radius: 3px;	
	background-color: #ededed;
	-webkit-transform: translateX(0px);
	-moz-transform: translateX(0px);
	-ms-transform: translateX(0px);
	transform: translateX(0px);	
	-webkit-transition: all 0.4s;
	-moz-transition: all 0.4s;
	-webkit-transition: all 0.4s;
	z-index:888889 !important;
	
	}

.prev_work{
	left: -6px;
	}
	
.next_work{
	right: -6px;
	}
		
.prev_work i, .next_work i{
	color: #000;
	-webkit-transform: translateX(0px);
	-moz-transform: translateX(0px);
	-ms-transform: translateX(0px);
	transform: translateX(0px);
	-webkit-transition: all 0.4s;
	-moz-transition: all 0.4s;
	-webkit-transition: all 0.4s;	
	}

.prev_work:hover {
	-webkit-transform: translateX(5px);
	-moz-transform: translateX(5px);
	-ms-transform: translateX(5px);
	transform: translateX(5px);	
	}
	
.prev_work:hover i{
	color: #000;
	-webkit-transform: translateX(-2px);
	-moz-transform: translateX(-2px);
	-ms-transform: translateX(-2px);
	transform: translateX(-2px);	
	}
	
.next_work:hover {
	color: #000;
	-webkit-transform: translateX(-5px);
	-moz-transform: translateX(-5px);
	-ms-transform: translateX(-5px);
	transform: translateX(-5px);	
	}
	
.next_work:hover i{
	color: #000;	
	-webkit-transform: translateX(2px);
	-moz-transform: translateX(2px);
	-ms-transform: translateX(2px);
	transform: translateX(2px);	
	}

.external_link{
	color: #000;
	-webkit-transition: all 0.4s;
	-moz-transition: all 0.4s;
	-webkit-transition: all 0.4s;	
	}
	
.external_link:hover{
	color: #828282;	
	}
	
.puplication_link{
font-family: 'ModeratBold';
	letter-spacing: 0.1em;
	color: #c7b868;
	text-transform: uppercase;	
	}	
	
	
	
/* ========================================== About ===================================== 	*/



.experience{
	list-style: none;
	margin: 0;
	width: 100%;
	padding-bottom: 4em;
	}
	
.experience:before, 
.experience:after{ 
	content: " "; 
	display: table; 
	}
	
.experience:after{ 
	clear: both; 
	}

.experience li{
	width: 50%;
	float: left;
	height: auto;
	text-align: center;
	}
	
.experience li:nth-child(-n+3){
	border-top: none;
	}
	
.skills{
	margin-left: 20px;}



/* ========================================== contact ===================================== 	*/



.mail_button {
	color: rgb(228, 228, 228);
	width: 40%;
	max-width: 300px;
	background:#fff; 
	color: #000;
	margin: 0 auto;
	padding: 1em;
	border-radius: 4px;		
	}
	
.mail_button a{
	color: rgb(228, 228, 228);
	-webkit-transition: all 0.8s;
	-moz-transition: all 0.8s;
	-webkit-transition: all 0.8s;		
	}
	
.mail_button:hover a{ 
	color: #949494;
	}

.spacer_contact{
	margin-top: 20px;
	}

#scroll_down{
	position: absolute;
	bottom: 20px;
	left: 50%;
	margin-left: -10px;
	}
.fa-angle-down{
	color: #fff;

	}

.border_top{
	position:fixed; 
	width:100%;
	height:15px; 
	background:#ededed; 
	top:0; 
	left:0; 
	z-index:888888;	
	}

.border_right{
	position:fixed; 
	width:15px;
	height:100%; 
	background:#ededed; 
	top:0; 
	right:0; 
	z-index:888888;
	}

.border_bottom{
	position:fixed; 
	width:100%;
	height:15px; 
	background:#ededed; 
	bottom:0; 
	left:0; 
	z-index:888888;	
	}

.border_left{
	position:fixed; 
	width:15px;
	height:100%; 
	background:#ededed; 
	top:0; 
	left:0; 
	z-index:888888;
	}
	
.grey{
	background: rgb(228, 228, 228) !important; 	
	}

	
/* ===== Mobile ===== */

@media (max-width: 1300px) {
	
	.grid li {
		width: 50%;
		}
		h1 { font-size: 6.4em;
		}		
}  


@media (max-width: 800px) {
	.grid li {
		width: 100%;
		}
.grid li.border_about{
	border-left:0px solid #c9c9c9;
	}	
	.mobile_menu{
		height: 72px;
		background:#fff;
		position:fixed;
		top:0;
		left: 0;
		width: 100%;	
		}
	
	h1 { font-size: 3em;
		}
		
	p{	-moz-column-count: 1;
	 	-moz-column-gap: 10px;
	    -webkit-column-count: 1; 
	    -webkit-column-gap: 10px;	
		}
	
	.skills{
		margin-left: 0px;
		}
	
	.award_logos {
		width: 100%;	
		margin-top: 10em !important;
		}		
} 

@media screen and (max-width: 47em) {
	.title, .content {
		font-size: 70%;
	}
	nav[role="navigation"] li a {
		font-size: 90%;
	}
	.codrops-demos a {
		font-size: 80%;
	}
	p{
		font-size: 130%;		
		}
	.intro-effect-side .title {
		width: 100%;
		padding: 0 1em;
		-webkit-transform: translateY(-50%);
		transform: translateY(-50%);
	}

	.intro-effect-side.modify .bg-img::before {
		-webkit-transform: translateX(-100%);
		transform: translateX(-100%);
	}

	.intro-effect-side .bg-img::after {
		border-left-width: 0px;
		border-right-width: 0px;
		right: 0px;
		left: 0px;
		background: rgba(255,255,255,0.1);
	}

	.intro-effect-side.modify .bg-img::after {
		background: rgba(255,255,255,0.8);
	}

	.intro-effect-sidefixed .content {
		width: 100%;
		margin-left: auto;
	}

	.intro-effect-sidefixed .bg-img::after {
		width: 95%;
	}

}

@media screen and (max-width: 625px) {
.main > section {
	position: fixed;
	top: 0px;
	left: 0px !important;
	height: 40px;
	margin: 0 0 0 4.5%;
	}
		
.main > section button {
	float: left;
	
	}

nav.main_menu ul {
	display: block;
	}
	
nav.main_menu li {
	display: table;
	vertical-align: top;
	text-align: center;
	}

.main_navigation ul li {
	display: block;
	padding: 5px 15px;
	margin:1px 0;
	font-size: 14px;
	text-decoration:none;
	}
	
.main_menu a {
	font-size: 1.5em;
	text-align: center;
	}
	
.spacer{
	width:0%;
	height: 0%;
	margin: 0;
	padding: 0;
	}

.work, .about, .contact{
	text-align: center;	
	padding: 8px 0 8px 0;
	width:100%;
	}
	
.social{	
	text-align: center;	
	padding: 5px 0 0 0;
	width:100%;	
	}
	
.cbp-spmenu-horizontal {
	font-size: 75%;
	height: 200px;
	}

.cbp-spmenu-top {
	top: -210px;
	opavity: 0;
	}
	
.nav_back_white{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	background: #ededed;	
	height: 46px;
	z-index: 900;	
	}



}


@media screen and (max-width: 27em) {
	.intro-effect-jam3 .content {
		padding: 0 2em 5em;
	}
	.work_spacer {
	min-height: 900px !important;
	width: 100%;
	}
	.intro-effect-grid .grid li h2 {
		display: none;
	}

	.intro-effect-push .header .title {
		top: 60px;
		-webkit-transform: translateX(-50%);
		transform: translateX(-50%);
	}

	.title, .content {
		font-size: 50%;
	}
	p, h7{
		font-size: 190%;		
		}	

	button.trigger::before {
		display: none;
	}
	.border_top{height:0px;}
	.border_right{width:0px;}
	.border_bottom{height:0px;}
	.border_left{width:0px;}

/*===== NAVIGATION arrows=====*/
article.work_flip{	width: 100%; display: inline-block; margin-top: 3em;}

.prev_work, .next_work{
	display: inline-block;
	position:relative;
	height: 50px;
	width: 100%;
	-webkit-transition: all 0.4s;
	-moz-transition: all 0.4s;
	-webkit-transition: all 0.4s;
	margin-top: 0;
	padding: 20px 0 0 0;
	z-index:999999;	
	}
	
.prev_work{
	left: 0px;
	}
	
.next_work{
	right: 0x;
	}
	
.prev_work i, .next_work i{
	color: #bdbdbd;
	-webkit-transform: translateX(0px);
	-moz-transform: translateX(0px);
	-ms-transform: translateX(0px);
	transform: translateX(0px);
	-webkit-transition: all 0.4s;
	-moz-transition: all 0.4s;
	-webkit-transition: all 0.4s;	
	}
	
.prev_work:hover {
	-webkit-transform: translateX(0px);
	-moz-transform: translateX(0px);
	-ms-transform: translateX(0px);
	transform: translateX(0px);
	}

.next_work:hover {
	color: #000;
	-webkit-transform: translateX(0px);
	-moz-transform: translateX(0px);
	-ms-transform: translateX(0px);
	transform: translateX(0px);
	}
	
}

html, body, .container, .header {
	height: 100%;
}	

.one{
	text-align: center;
	-webkit-column-count:1;
	-moz-column-count:1;
	column-count:1;
	-webkit-column-gap:0px;
	-moz-column-gap:0px;
	column-gap:0px;
	}
	
.mw_img{
	width: 100%;
	}
.about_space{
	margin: 50px 0 40px 0;
	}

.li_first{
	padding-right: 20px;
	}
.soundcloud_spacer{
	margin: 10px 0 40px 0;
	
	}
.soundcloud_spacer_top{
	height: 80px;
	}	

#anker_work{
	padding-top: 10%;
	}