@font-face {
    font-family: 'hamburgerregular';
    src: url('../webfont/hamburger-regular-webfont.eot');
    src: url('../webfont/hamburger-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../webfont/hamburger-regular-webfont.woff2') format('woff2'),
         url('../webfont/hamburger-regular-webfont.woff') format('woff'),
         url('../webfont/hamburger-regular-webfont.ttf') format('truetype'),
         url('../webfont/hamburger-regular-webfont.svg#hamburgerregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

#kontrolle {
	position: relative;
	top: 500px;
	left: 800px;
}

* {
	box-sizing: border-box; 
	margin: 0px;
	padding: 0px;
	font-family: Roboto;
	font-size: 15pt; /* 10pt –> 15pt */
	line-height: 20pt; /* 20pt */
	letter-spacing: 0.1em;
	/*border: 1px solid white;*/
}

html { 
	overflow-x: hidden;
	overflow-y: hidden;
	-webkit-text-size-adjust: none;
}

html {
  height: 100.2%;
}

body {
	background-color: #282828; // #222
}

main {
	position: absolute;
	top: 0px; /* Bildgalerie um 100 px nach unten verschieben */
}

/* Vertikale Navigation linksbündig */

nav ul {
	position: absolute;
	top: 85px; /* 20px –> 85px */
	left: 5px;  /* 11px –> 5px */
	width: 250px; /* 250px */
	height: 100px;
	z-index: 1000;
}

nav li {
	display: inline-block;
	margin-right: -75px;
	padding: 0px;
	width: 100px;
	text-align: left;
	font-weight: 500;

	transform-origin: 50px 50px;	
	-moz-transform: rotate(-90deg);
	-ms-transform: rotate(-90deg);
	-o-transform: rotate(-90deg);
	-webkit-transform: rotate(-90deg);
	transform: rotate(-90deg);
}


a {
	font-size: 20pt;
	line-height: 26pt;
}

html { overflow-x: hidden; }

div {
	position: relative;
	float: left;
}

p { 
	display: none;
	font-size: 20pt;
	line-height: 26pt;
	font-weight: 500;
}

article {
	position: relative;
	display: none;
	/*background-color: blue; */
}

article div {
	float: none;
}

canvas {
	position: absolute;
	left: 18px;
}

/* Hovereffekte */

#autor .projekttitelD, #autor .projekttitelE, #autor .jahr { color: #888; } /* #aaa */

#autor .projektbeschreibungD, #autor .projektbeschreibungE,
#autor .projektbeschreibungD a, #autor .projektbeschreibungE a,
#autor .projektbeschreibungD a:hover, #autor .projektbeschreibungE a:hover,
#autor .projektbeschreibungD a:visited, #autor .projektbeschreibungE a:visited,
#autor .gemaeldebeschreibungD, #autor .gemaeldebeschreibungE { 
	color: #bbb;
}

#kunst .projekttitelD, #kunst .projekttitelE, #kunst .jahr, #kunst .gemaeldetitelD, #kunst .gemaeldetitelE  { color: #ccc; } /* #aaa */

#kunst .projektbeschreibungD, #kunst .projektbeschreibungE,
#kunst .projektbeschreibungD a, #kunst .projektbeschreibungE a,
#kunst .projektbeschreibungD a:hover, #kunst .projektbeschreibungE a:hover, 
#kunst .projektbeschreibungD a:visited, #kunst .projektbeschreibungE a:visited,
#kunst .gemaeldebeschreibungD, #kunst .gemaeldebeschreibungE {
	color: #999; 
}

#gestaltung .projekttitelD, #gestaltung .projekttitelE, #gestaltung .jahr { color: #999; } /* #666 */

#gestaltung .projektbeschreibungD, #gestaltung .projektbeschreibungE,
#gestaltung .projektbeschreibungD a, #gestaltung .projektbeschreibungE a,
#gestaltung .projektbeschreibungD a:hover, #gestaltung .projektbeschreibungE a:hover,
#gestaltung .projektbeschreibungD a:visited, #gestaltung .projektbeschreibungE a:visited,
#gestaltung .gemaeldebeschreibungD, #gestaltung .gemaeldebeschreibungE { 
	color: #555;
}

#autor { background: #e1e1e1; }
#kunst { background: #666; }
#gestaltung { background: #282828; }

#autor li { color: #777; }
#kunst li { color: #ccc; }
#gestaltung li { color: #aaa; }

.hamburgerGestaltung, .hamburgerGestaltungHover, 
.hamburgerKunst, .hamburgerKunstHover,
.hamburgerAutor,.hamburgerAutorHover 
{ display: none; }

.hamburgerGestaltung { z-index: 1000; }
.hamburgerGestaltungHover { z-index: 1001; }
.hamburgerKunst { z-index: 1002; }
.hamburgerKunstHover { z-index: 1003; }
.hamburgerAutor { z-index: 1004; }
.hamburgerAutorHover { z-index: 1005; }

/* Isotope-Einstellungen */

#gestaltung, #kunst, #autor { 
	width: 100%;
}

#gestaltung img, #kunst img, #autor img { 
	display: block; 
	width: 100%;
	height: auto;
}

#gestaltung .item, #kunst .item, #autor .item { 
  float: left;
  padding: 50px; 
  margin-left: 0px;
  width: 50%;
}

/* Klassen */

.bildgalerieabstand {
	width: 100%;
	height: 100px;
}

.D { 
	display: none; /* Deutsche Sprachvariante ausblenden */
}

.info { 
	position: absolute;
	left: 35%;
	bottom: 50px; 
	display: none;
}

.projektbild {
	width: 550px;
	height: auto;
	margin: 0 auto;
	margin-bottom: 25px;
	margin-top: 75px;
}

.projekttitelD, .projekttitelE {
	margin-top: 30px;
	margin-left: 70px;
	margin-right: 60px;
	margin-bottom: 20px;
	font-size: 11pt;
	line-height: 16pt;
}

.projektbeschreibungD, .projektbeschreibungE {
	margin-left: 70px;
	margin-right: 60px;
	margin-top: 20px;
	margin-bottom: 20px;
	font-size: 20pt;
	line-height: 28pt;	 
}

.projektbeschreibungD a, .projektbeschreibungE a {
	font-size: 20pt;
	line-height: 28pt;	 
}

 .gemaeldetitelD, .gemaeldetitelE { 
	margin-top: 0px;
	margin-left: 70px;
	margin-right: 60px;
	margin-bottom: 20px;
	font-size: 11pt; 
	line-height: 16pt;	
}

.gemaeldetitelD, .gemaeldetitelE {
	margin-top: 30px;
	margin-bottom: 10px;
}

.gemaeldebeschreibungD, .gemaeldebeschreibungE { /* .projektbeschreibung Schriftgröße bei Kunstbilder kleiner gemacht –> wieder rückgängig gemacht! */
	margin-left: 70px;
	margin-right: 60px;
	margin-top: 20px;
	margin-bottom: 20px;
	font-size: 20pt;
	line-height: 28pt;
}

.textcenter { /* Text zentrieren */
	position: relative;
	width: 550px;
	margin: 0 auto;
}

.clear {
	clear: left;
}

.projektabstand {
	padding-top: 50px;
}

.projektabschluss {
	padding-bottom: 50px;
}

.titel, .jahr, .objekt, .ort {
	display: block;
	width:100%;
}

.titel {	
	font-size: 11pt;
	line-height: 16pt;
	margin-bottom: 40px;
}

.jahr {
	font-size: 11pt;
	line-height: 16pt;
	margin-top: 0px;
	margin-bottom: 15px;
}

.objekt {
	font-size: 20pt;
	line-height: 28pt;
}

.ort {
	font-size: 20pt;
	line-height: 28pt;
	/*font-weight: 300;*/
	margin-bottom: 30px;	
}

.navpresseAutor, .navarbeitAutor, .navpresseKunst, .navarbeitKunst, .navpresseGestaltung, .navarbeitGestaltung {
	z-index: 2000;
	
	font-size: 10pt;
	font-weight: 500;
	position: absolute;
	
	display: none;
	margin-right: -75px;
	padding: 0px;
	width: 100px;
	text-align: left;

	transform-origin: 50px 50px;	
	-moz-transform: rotate(-90deg);
	-ms-transform: rotate(-90deg);
	-o-transform: rotate(-90deg);
	-webkit-transform: rotate(-90deg);
	transform: rotate(-90deg);
}

.navpresseAutor, .navarbeitAutor {
	color: #f0f;	/* #aaa */
}

.navpresseKunst, .navarbeitKunst {
	color: #0ff;	/* #aaa */
}

.navpresseGestaltung, .navarbeitGestaltung {
	color: #ff0;	/* #777 */
}

.navpresseAutor, .navpresseKunst, .navpresseGestaltung {
	right: 0px; /* 36px */
}

.navarbeitAutor, .navarbeitKunst, .navarbeitGestaltung {
	left: 0px; /* 5px */
}

.hamburgerAutor, .hamburgerKunst, .hamburgerGestaltung {
	display: none;
	font-family: 'hamburgerregular';
	text-decoration: none;
	font-size: 50pt; /* 25pt ursprünglich */
	z-index: 3000;
	position: absolute;
	left: 18px;
	margin-top: -54px;
}

.hamburgerAutor { color: #f0f; } 		/* #bbb */
.hamburgerKunst { color: #0ff; }		/* #999 */
.hamburgerGestaltung { color: #ff0; }	/* #555 */

/*
.arbeit {
	background-color: red;
}

.presse {
	background-color: blue;
}
*/

/* IDs */

#autor main {
	display: none;
}

#gestaltung main {
	display: none;
}

#kunst main {
	display: none;
}

/* Schriftschnitt Navigation */

#naveditorial, #navbranding, #navposter, #navother, #navdrawing, #navpainting, #navobjects, #navbooks, 
#navimpress, #navcontact, #navaboutart, #navaboutautor, #navaboutdesign, #navsprache, #navdatenschutz {
	font-weight: 500;
}

#navautor { margin-bottom: 40px; }
#navbooks { margin-bottom: 35px; }
#navimpress { margin-bottom: 50px; }
#navdatenschutz { margin-bottom: 50px; }
#navcontact { margin-bottom: 50px; }

#navart { margin-bottom: 15px; }
#navdrawing { margin-bottom: 50px; }
#navpainting { margin-bottom: 55px; }
#navobjects { margin-bottom: 49px; }

#navdesign { margin-bottom: 40px; }
#naveditorial { margin-bottom: 50px; }
#navbranding { margin-bottom: 55px; }
#navposter { margin-bottom: 40px; }
#navother { margin-bottom: 33px; }


/* Subunterseite Arbeit/Presse durch seitliche Navigation miteinander verbunden */

article section aside {
	display: block;
	float: left;
	position: relative;
}

article aside {
	float: left;
}

article {
	overflow-x: hidden;
	overflow-y: visible;
}

.cropbox {
	overflow-x: hidden;
	overflow-y: visible;
}

.arbeit { display: none; }
.presse { display: none; }



/* Media-Queries */

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

	.projekttitelD, .projekttitelE {
		margin-top: 30px;
		margin-left: 60px;
		margin-right: 60px;
		margin-bottom: 20px;
		font-size: 12pt;
		line-height: 20pt;
	}

	.projektbeschreibungD, .projektbeschreibungE {
		margin-left: 60px;
		margin-right: 60px;
		margin-top: 20px;
		margin-bottom: 20px;
		font-size: 15pt;
		line-height: 22pt;	 
	}
	
	.projektbeschreibungD a, .projektbeschreibungE a {
		font-size: 15pt;
		line-height: 22pt;	
	}
	
	.hamburgerAutor, .hamburgerKunst, .hamburgerGestaltung {
		font-size: 44pt; /* 22pt ursprünglich */
		left: 17px;
		margin-top: -52px;
	}
	
	.projektbild {
		width: 70%;
		margin-bottom: 25px;
		margin-top: 75px;	
	}

	.titel {
		font-size: 10pt;
		line-height: 16pt;
		margin-bottom: 30px;
	}
	
	.jahr {
		display: block;
		width:100%;	
		font-size: 10pt;
		line-height: 12pt;
		margin-top: 0px; /* 60px */
		margin-bottom: 20px;
	}

	.objekt {
		display: block;
		width:100%;
		font-size: 17pt;
		line-height: 24pt;
		margin-bottom: 0px;
	}
	
	.ort {
		font-size: 17pt;
		line-height: 24pt;
		margin-bottom: 30px;
	}
	
	.projektabstand {
		padding-top: 30px; 
	}
		
	#gestaltung .item, #kunst .item, #autor .item { 
  		padding: 35px; /* 35px */
	}
	
	nav ul {
		left: 5px; /* 11px -> 5px */
	}
	
	main {
		top: 0px; /* 25px */
	}
}

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

	main {
		top: 0px; /* 60px */
	}

	.projekttitelD, .projekttitelE {
		margin-top: 25px;
		margin-left: 50px;
		margin-right: 60px;
		margin-bottom: 10px;
		font-size: 9pt;
		line-height: 16pt;
	}

	.projektbeschreibungD, .projektbeschreibungE {
		margin-left: 50px;
		margin-right: 40px;
		margin-top: 10px;
		margin-bottom: 10px;
		font-size: 10pt;
		line-height: 15pt;	
	}
	
	.projektbeschreibungD a, .projektbeschreibungE a {
		font-size: 10pt;
		line-height: 15pt;
	}
	
	.hamburgerAutor, .hamburgerKunst, .hamburgerGestaltung {
		font-size: 40pt; /* 20pt ursprünglich */
		left: 15px;
		margin-top: -52px;
	}
	
	.projektbild {
		width: 80%;
		margin-bottom: 25px;
		margin-top: 40px;	
	}

	.titel {
		font-size: 9pt;
		line-height: 15pt;
		margin-bottom: 25px;
	}
	
	.jahr {
		font-size: 9pt;
		line-height: 15pt;		
		margin-top: 0px; /* 40px */
		margin-bottom: 10px;
	}

	.objekt {
		font-size: 10pt;
		line-height: 15pt;
		margin-bottom: 0px;
	}
	
	.ort {
		font-size: 10pt;
		line-height: 15pt;
		margin-bottom: 20px;
	}
	
	.projektabstand {
		padding-top: 20px;
	}
		
	#gestaltung .item, #kunst .item, #autor .item { 
		padding: 22px;
	}
	
	nav ul {
		left: 5px; /* 5px -> 5px */
	}
	
}