shtml, 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%;
	width: 100%;
}

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

/* Basis
============================================= */


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

a:hover { 
	color: #000;
	text-decoration: line-through;
  	-webkit-text-decoration-color: #c7b868;
  	text-decoration-color: #c7b868; 
}



/* === BORDER === */

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

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

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

.border_left{
	position:fixed; 
	width:10px;
	height:100%; 
	top:0; 
	left:0; 
	z-index:888888;
	}


.grey1{	background-color: #fff;	}
.gold{	color:#c7b868 !important;	}
.grey3{	background-color:;	}		
.grey4{	background-color:;	}

		
/* ====== Schrift ====== */
@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, p{
	text-rendering: optimizelegibility;	
	} 

h1{font-family: 'ModeratRegular';
	font-size: 1.3em;
	letter-spacing: .2px;
	text-transform: uppercase;
	}
h2{font-family: 'ModeratRegular';
	font-size: 3em;
	line-height: 1.25;
	letter-spacing: -.9px;
	word-spacing: 1px;
	margin-top: -.1em;
	color: #000;
	text-align: left;
	}

h3{	font-family: 'ModeratBold';
	font-size: 4.5em;
	line-height: 1.05;
	letter-spacing: -.9px;
	word-spacing: 1px;
	text-transform: uppercase;
	margin-top: -.1em;
	}

h4{	font-family: 'ModeratRegular';
	font-size: .87em;
	line-height: 1.9;
	letter-spacing: .2px;
	word-spacing: 1px;
	}	

h5{font-family: 'ModeratRegular';
	font-size: .85em;
	line-height: 1.9;
	letter-spacing: .2px;
	word-spacing: 1px;}		
h6{}				
p {font-family: 'ModeratRegular';
	font-size: .85em;
	line-height: 1.9;
	letter-spacing: .2px;
	word-spacing: 1px;}

.bold{font-family: 'ModeratBold';
}


.skills{
margin-top: -.2em;
	
}
.upper{
	text-transform: uppercase;	
}

.about-HL{
	text-transform: inherit !important;
		line-height: 1.9;
	margin-top: -.06em;
margin-right: 10px	
	
}

/* ====== page_content ====== */



.header {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  text-align: center;
  height: 100vh;
  /*padding: 50px 0;*/
  background-size: cover;
	z-index: 1;
	}

body{
	overflow: auto;
	text-align:left;
	font-family: 'ModeratRegular', sans-serif;
	font-size:14px;
	background:rgb(240,240,240);
	height: 100%;	
	}


.intro{
	z-index: 1;
	margin: 0 auto;
	width: 100%;
	text-align: left;
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translateX(-50%) translateY(-50%);
	transform: translateX(-50%) translateY(-50%);
	}	
	
.scrollTip{
	position: absolute;
	left: 7.5%;
	bottom: 40px;
	font-family: 'ModeratRegular';
	font-size: 1.3em;
	letter-spacing: .2px;
	text-transform: lowercase;
	z-index:88886;
	}
.scrollTipleft{
	position: absolute;
	right: 7.5%;
	bottom: 40px;
	font-family: 'ModeratRegular';
	font-size: 1.3em;
	letter-spacing: .2px;
	text-transform: lowercase;
	z-index:88886;
	}
#Ebene_1{ height: 25px; float: left;}
.cls-1{fill:#000;
}
polyline {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  -webkit-animation: dash 3s ease-Out forwards;
          animation: dash 3s ease-Out forwards;
  -webkit-animation-iteration-count: 1;
          animation-iteration-count: 1;
  -webkit-animation-delay: .5s;
          animation-delay: .5s;
}
@-webkit-keyframes dash {
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes dash {
  to {
    stroke-dashoffset: 0;
  }
}
/* ====== LOGO & NAVIGATION ====== */



.brand {
  position: fixed;
  float: left;
	left: 7.5%;
	top: 60px;
	z-index:888888;
}





#nav-icon {
  width: 30px;
  height: 25px;
  position: fixed;
  float: right;
	right: 7.5%;
	top: 60px;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .5s ease-in-out;
  -moz-transition: .5s ease-in-out;
  -o-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
  cursor: pointer;
	z-index:888888;	
	
}

#nav-icon span {
  display: block;
  position: absolute;
  height: 3.5px;
  width: 100%;
  background: #c7b868;
  opacity: 1;
  left: 0;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .25s ease-in-out;
  -moz-transition: .25s ease-in-out;
  -o-transition: .25s ease-in-out;
  transition: .25s ease-in-out;
}

#nav-icon span:nth-child(1) {
  top: 0px;
  -webkit-transform-origin: left center;
  -moz-transform-origin: left center;
  -o-transform-origin: left center;
  transform-origin: left center;
}

#nav-icon span:nth-child(2) {
  top: 10px;
  -webkit-transform-origin: left center;
  -moz-transform-origin: left center;
  -o-transform-origin: left center;
  transform-origin: left center;
}

#nav-icon span:nth-child(3) {
  top: 20px;
  -webkit-transform-origin: left center;
  -moz-transform-origin: left center;
  -o-transform-origin: left center;
  transform-origin: left center;
}





#nav-icon.open span:nth-child(1) {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  top: 0;
  left: 0;
}

#nav-icon.open span:nth-child(2) {
  width: 0%;
  opacity: 0;
}

#nav-icon.open span:nth-child(3) {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
  top: 20px;
  left: 0;
}   

.fullscreen-nav {
  height: 100%;
  width: 100%;
  background: rgb(240, 240, 240);
  position: fixed;
  left: 0;
  top: 0;
  text-align: center; 
  opacity: 0;
  transition: .55s;
	pointer-events: none;
	z-index:88887;	
}

.fullscreen-nav.open {
  opacity: 1;
	z-index:88887;
pointer-events:all;
}

.main-menu {
  position: absolute;
  width: 100%;
  margin: 0 auto;
  max-width: 900px;
  list-style: none;
  top: 50%;
  left: 50%;
  /* bring your own prefixes */
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.nav-link {
  text-align: center;
  color: #c7b868;
  padding: 40px 0px;
  -o-transition:.5s;
  -ms-transition:.5s;
  -moz-transition:.5s;
  -webkit-transition:.5s;
  transition:.5s;
}

.nav-link a h2{
  font-size: .3em;
   letter-spacing: 1px; 
  padding: 0px 20px;
	-moz-text-decoration: none !important;
	-ms-text-decoration: none;
	-o-text-decoration: none;
	-webkit-text-decoration:none;
	text-decoration: none;
}
.nav-link a:hover > a{
	-moz-text-decoration: none;
	-ms-text-decoration: none;
	-o-text-decoration: none;
	-webkit-text-decoration:none;
	text-decoration: none;
}

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

  .nav-link {
    font-size: 32px;
  }
}

.nav-link:hover { 
	color: #000;
	-moz-text-decoration: none;
	-ms-text-decoration: none;
	-o-text-decoration: none;
	-webkit-text-decoration:none;
	text-decoration: none;
	-moz-text-decoration: line-through;
	-ms-text-decoration: line-through;
	-o-text-decoration: line-through;
	-webkit-text-decoration:line-through;
	text-decoration: line-through;
	-moz-text-decoration-color: #c7b868;
	-ms-text-decoration-color: #c7b868;
	-o-text-decoration-color: #c7b868;
	-webkit-text-decoration-color: #c7b868;

  	text-decoration-color: #c7b868;
	cursor: pointer;
}











/* ====== VIDEO ====== */

.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 0px;
    height: 0;
    overflow: hidden;
}
.video-container iframe {
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
}



/* ====== page_content ====== */

.page_content{
	width: 85%;
	margin: 0 auto;
	max-width: 1800px;
  -webkit-animation-duration: 5s;
  -webkit-animation-delay: .3s;

	}

.page_content section{
	height:  auto;
	}

section{
	width: 100%;
	height: auto;
	float: left;
	}

.title, .work, .results{
	margin: 30px 0 30px 0;	
	}
.title{
	margin: 200px 0 -10px 0;	
	}

.workTitle{padding-top:120px;}
.aboutIntro{margin-top:15% !important;}
.sectionAbout{
	height: auto;
	margin-top:150px !important;
	margin-bottom: 80px;
}

article.workName, article.workText, article.press, article.awards{
	width: calc(50% - 5px);
	float: left;
}

article.work-1{
	width: 100%;
	margin: 0 0 10px 0;
	height: auto;
	float: left;	
}


article.work-2{
	width: calc(50% - 5px);
	margin: 0 0 10px 0;
	height: auto;
	float: left;	
}


article.about{
	width: calc(33.333% - 5px);
	margin: 0 0 15px 0;   
	height: auto;
	float: left;
}

.left{
 	margin: 0 10px 10px 0 !important;
}


.control-left, .control-center, .control-right{
	width:33.3%;
	float: left;
	margin: 30px 0 60px 0;
	z-index:888899; 
}	




.awardList{
	width: 100%;
	margin: 0 0 15px 0;   
	height: auto;
	float: left;	
}

.awardList p{
    -webkit-column-count: 3; /* Chrome, Safari, Opera */
    -moz-column-count: 3; /* Firefox */
    column-count: 3;	
    -webkit-column-gap: 15px; /* Chrome, Safari, Opera */
    -moz-column-gap: 15px; /* Firefox */
    column-gap: 15px;	
}

/* ====== GRID ====== */



.grid{
	list-style: none;
	padding: 10% 0 2.5% 0;
	margin: 0;
	margin-left: -5px;
	width: calc(100% + 10px);
	}
.grid-work{
	padding: 6% 0 5% 0;	
	}

	
.grid:before, 
.grid:after{ 
	content: " "; 
	display: table; 
	}
	
.grid:after{ 
	clear: both; 
	}

.grid li{
	width: 33.3332%;
	float: left;
	height: auto;
	text-align: center;
	}
	
	
.grid li:nth-child(-n+3){
	border-top: none;

}
	
.grid li > a{
	padding: 5px;	
	opacity: 1;
	display: block;
   transition: opacity .7s ease-in-out;
   -moz-transition: opacity .7s ease-in-out;
   -webkit-transition: opacity .7s ease-in-out;
position: relative;
  color: #000;
  text-decoration: none;
	}






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


figcaption{
	width: 100%;	
	height: auto;		
	background: transparent ;
	height: 100px;
	left: 0;
	bottom: 0;
	text-decoration: none;
	}

figcaption h4{
	text-align: center;
	padding: 10px 0 0 0 ;
	font-size: 1.2em;
	font-family: 'ModeratRegular', sans-serif;
	text-transform: none;
	line-height: 1.2;
	}
	
figcaption h5{
	text-align: center;
	font-size: .65em;
	letter-spacing: 1px;
	font-family: 'ModeratRegular' !important;
	text-transform: none;
	}


	
.grid li img{
	opacity: 1;
   transition: opacity .2s ease-in-out;
   -moz-transition: opacity .2s ease-in-out;
   -webkit-transition: opacity .2s ease-in-out;	}

.grid li > a:hover img{
  	opacity: .9;
	}


.grid li > a:hover h4,
.grid li > a:hover h5{
	color: #000;
	text-decoration: line-through;
  	-webkit-text-decoration-color: #c7b868;
  	text-decoration-color: #c7b868;
	-moz-text-decoration-color: #c7b868;
	}










/* ====== media ====== */

@media (max-width: 1000px){
 article.work-2, article.awards, article.press{
	width: 100%;
	margin: 0 0 10px 0;
	}	
	h2{
	font-size: 2em;
	}

.fullscreen-nav{
	visibility: visible;
	
}
	.grid li{
	width: 50%;
	}

.awardList p{
    -webkit-column-count: 2; /* Chrome, Safari, Opera */
    -moz-column-count: 2; /* Firefox */
    column-count: 2;	
    -webkit-column-gap: 15px; /* Chrome, Safari, Opera */
    -moz-column-gap: 15px; /* Firefox */
    column-gap: 15px;	
}
	
}

/* ======
@media (min-width: 700px){
	#nav-icon {
	  display: none;
	}		
}
====== */

@media (max-width: 700px){
	article.workName, article.workText{
	width: 100%;
	margin: 0 0 10px 0;
	margin: 0 0 10px 0;
	}
	article.workName{
	text-align: left;
	padding-bottom: 30px;
	}
	.small{
		display: none;
	}
.title{
	margin: 120px 0 -10px 0;	
	}
	h2{
	font-size: 1.6em;
	}
.nav-link {

	padding: 20px 0px;}

}

@media (max-width: 600px){
	.grid li{
	width: 100%;
	}
.awardList p{
    -webkit-column-count: 1; /* Chrome, Safari, Opera */
    -moz-column-count: 1; /* Firefox */
    column-count: 1;	
    -webkit-column-gap: 0px; /* Chrome, Safari, Opera */
    -moz-column-gap: 0px; /* Firefox */
    column-gap: 0px;	
}
	
}







.not-active {
  pointer-events: none;
  cursor: default;
  text-decoration: none;
  color: black;
}


#svgContainer1 {
  max-width: 100%;
  max-height: auto;
  background-color: transparent;
  margin: auto;
}