@import url(http://fonts.googleapis.com/css?family=Inconsolata:400,700);



*, *:after, *:before { -webkit-box-sizing: border-box; box-sizing: border-box; }
.clearfix:before, .clearfix:after {display: table;  content: ''; }
.clearfix:after { clear: both; }

body {
	background: #fff;
	color: #333;
	font-size: 1em;
	font-family: 'Questrial', 'Avenir', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

a {
	outline: none;
	color: rgb(160, 148, 147);
	text-decoration: none;
}

a:hover, a:focus {
	color: rgb(197, 135, 130);
}


/* Header */
.header {
	text-align: center;
	max-height: 100vh;
	overflow: hidden;
	background: url(../img/1.jpg) no-repeat center center;
	background-size: auto 100vh;
}


.hero {
	position: fixed;
	top: 0px;
	left: 0px;
	bottom: 0px;
	right: 0px;
	overflow: hidden;
}

.hero__imgwrap {
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.hero__imgwrap::after {
	content: '';
	position: absolute;
	background: rgba(76,0,1,0.0);
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

.hero__img {
	position: absolute;
	top: 50%;
	left: 50%;
	width: auto;
	height: 100vh;
	-webkit-transform: translate3d(-50%,-50%,0);
	transform: translate3d(-50%,-50%,0);
}

.hero__imgwrap .tilt__back,
.hero__imgwrap .tilt__front {
	background-size: auto 100vh;
}



/* Content */
.content {
	padding: 4em 0 2em;
}

.content > p {
	max-width: 900px;
	margin: 1em auto;
	padding: 1em 0.5em 0;
}

.content p > code {
	background: #ddd;
	display: inline-block;
	padding: 0.25em 0.5em;
	border-radius: 3px;
}

.content--color-alt {
	background: #EDE8DA;
	color: #A39C88;
}







@media screen and (min-aspect-ratio: 1440/960) {
	.hero__imgwrap .tilt__back,
	.hero__imgwrap .tilt__front,
	.header {
		background-size: 100vw auto;
	}
	.hero__img {
		width: 100vw;
		height: auto;
	}
}


.tilt {
	overflow: hidden;
	position: relative;
	width: 100%;
	height: 100%;
	margin: 0 auto;
}

.tilt__back,
.tilt__front {
	width: 100%;
	height: 100%;
	background-position: 50% 50%;
	background-repeat: no-repeat;
	background-size: cover;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

.tilt__back {
	position: relative;
}

.tilt__front {
	position: absolute;
	top: 0;
	left: 0;
}



.main_logo							{	position: fixed; z-index: 1000; width: 27vw; height: 20vh; right: 5vw; top: 5vh; }
.main_logo img						{	width: 100%; height: auto; }
.typewriter							{	position: fixed; z-index: 1001; top: 25vh; right: 0.5vw; }

.navigation							{	position: fixed; z-index: 1000; width: 5vw; height: 100vh; left: 0; top: 0; background: #2b4b9b; 
										opacity: 0.9; display: block; vertical-align: bottom; }
.nav								{	position: fixed; z-index: 1001; height: 80vh; bottom: 20vh; width: 5vw; display: inline-block; 
										vertical-align: bottom;}
.navigation nav a 					{	padding-left: 1.5vw; opacity: 0.8;  } 
.navigation nav a img				{	width: 1.7vw; height: auto; padding-top: 2vh;  }
.navigation nav a img:nth-child(1)	{	padding-top: 3vh; }
.navigation a:hover					{	opacity: 1.0; }

.language							{	position: fixed; z-index: 1000; width: 3.5vw; height: 5vh; bottom: 0; left: 1.5vw;  
										vertical-align: bottom; }
.language a							{	opacity: 0.8; }
.language a:hover					{	opacity: 1.0; }
.language a img						{	width: 1.8vw; left: 2vw; }


button 								{	padding-left: 1.5vw; outline: none; font-weight: 600; border: none; background: transparent; }
button img							{	width: 1.7vw; height: auto; padding-top: 2vh;  }

/* Content-Layer */		
.dialog,
.dialog__overlay 					{	width: 100%; height: 100%; top: 0; left: 0; z-index: 2000; }
.dialog 							{	position: fixed; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center;
										-webkit-justify-content: center; justify-content: center; pointer-events: none; }
.dialog__overlay 					{	position: fixed; z-index: 2001; background: rgba(24, 44, 93, 0.4); opacity: 0; -webkit-transition: opacity 0.3s;
										transition: opacity 0.3s; -webkit-backface-visibility: hidden; }
.dialog--open .dialog__overlay 		{	opacity: 1; pointer-events: auto; }
.dialog__content 					{	width: 100vw; height: 100vh; background: #fff; padding: 0em; text-align: center; position: relative;
										z-index: 2002; opacity: 0; overflow: scroll; }
.dialog--open .dialog__content	 	{	pointer-events: auto; }
.dialog 							{	-webkit-align-items: flex-start; align-items: flex-start; }
.dialog.dialog--open 
.dialog__content,
.dialog.dialog--close 
.dialog__content 					{	opacity: 1; -webkit-animation-duration: 1.3s; animation-duration: 1.3s; -webkit-animation-fill-mode: forwards;
										animation-fill-mode: forwards; }
.dialog.dialog--open 
.dialog__content 					{	-webkit-animation-name: anim-open; animation-name: anim-open; }
.dialog.dialog--close 
.dialog__content 					{	-webkit-animation-name: anim-close; animation-name: anim-close; }
.dialog.dialog--open button 		{	-webkit-animation: anim-elem 1.3s both; animation: anim-elem 1.3s both; }
.dialog.dialog--open button 		{	-webkit-animation-delay: 0.05s; animation-delay: 0.05s; }

@-webkit-keyframes anim-open 		{	0% { -webkit-transform: translate3d(-100%, 0, 0); }
										100% { -webkit-transform: translate3d(0, 0, 0); }	}
@keyframes anim-open 				{	0% { -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); }
										100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } }
@-webkit-keyframes anim-close 		{	0% { -webkit-transform: translate3d(0, 0, 0); }
										100% { -webkit-transform: translate3d(-100%, 0, 0); } }
@keyframes anim-close 				{	0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
										100% { -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } }
@-webkit-keyframes anim-elem 		{	0% { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); }
										100% { opacity: 1; -webkit-transform: translate3d(0, 0, 0); } }
@keyframes anim-elem 				{	0% { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); }
										100% { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } }										
/* Design-Content-Layer */
.content_header						{	position: fixed; width: 100vw; height: 40vh; top: 0%; left: 0%; }

.content_header_visual				{	position: absolute; width: 100vw; height: 30vh; top: 0%; background: #2b4b9b; 
										background-size: cover; background-position: 50% 50%; background-repeat: none; 
										background-image: url(../../content/img/header.jpg); }

.content_header_headline			{	position: relative; height: 10vh; min-height: 60px; top: 30vh; width: 100%; left: 0%; background: #2b4b9b; }
.content_header_headline img		{	float: left; padding-left: 10%; padding-top: 1vh; width: auto; max-width: 80%; height: auto; min-height: 25%; }

.headline_content					{	position: absolute; z-index: 2; width: 80%; left: 10%; top: 15%; background: #2a4b9b; opacity: 0.9; }

.content_layer h2					{	font-family: 'Inconsolata', monospace; font-size: 3em; font-weight: 400; color: #fff; }

.content_layer .content_text		{	position: absolute; width: 80%; top: 45%; left: 10%; z-index: 3; display: block; }

.content_layer .content_text p		{	text-align: justify; font-family: 'Inconsolata', monospace; font-size: 1.3em; 
										line-height: 1.5em; font-weight: 400; color: #53555b; }
.content_text li					{	width: 90%; left: 5%; text-align: justify; font-family: 'Inconsolata', monospace; font-size: 1.3em; 
										line-height: 1.3em; font-weight: 400; color: #53555b; padding-bottom: 0.1em;}
										
.content_layer a					{	font-family: 'Inconsolata', monospace; font-weight: 700; color: #2a4b9b; text-decoration: none; }

.close								{	position: fixed; width: 10%; right: 0%; top: 0%; z-index: 5; }
.close img							{	width: 100%; height: auto; }

.publications						{	width: 100%; display: flex; float: left; }
.publications .pub					{	width: 20%; margin: 1em; }
.publications .pub img				{	width: 100%; height: auto; }
.publications .pub p				{	font-size: 0.8em; color: #2a4b9b; text-align: left; margin: 1em; }

.links								{	width: 100%; display: flex; float: left; }
.links .extern						{	width: 25%; }
.links .extern img					{	width: 100%; height: auto; padding-right: 4em; }
.content_text .links p				{	width: 70%; left: 30%; text-align: left; }

.content_text b						{	font-family: 'Inconsolata', monospace; font-weight: 700; font-size: 1.5em; color: #2a4b9b; 
										text-decoration: none; text-align: left; } 
.content_text strong				{ 	font-family: 'Inconsolata', monospace; font-weight: 700; color: #2a4b9b; text-decoration: none; }

.hiddenheart						{	position: relative; margin-top: 0em; margin-bottom: 8em;}
.hiddenheart .worksnow				{	color: #000; opacity: 1.0; font-size: 1em; font-weight: 300; line-height: 0.1;}
.hiddenheart a img					{	width: 15%; height: auto; }
.heart								{	position: relative; display: inline-block; margin-right: -1em; margin-left: 0.1em; }
.heart img							{ 	width: 60%; height: auto; }

.heart 								{	-webkit-animation-name: heart; animation-name: heart; -webkit-animation-duration: 1s;
          								animation-duration: 1s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite;
  										-webkit-animation-timing-function: linear; animation-timing-function: linear; }

@-webkit-keyframes heart 			{	0% 		{ -webkit-transform: scale(1.1); transform: scale(1.1); }
  										50% 	{ -webkit-transform: scale(0.8); transform: scale(0.8); }
  										100% 	{ -webkit-transform: scale(1); transform: scale(1); } }

@keyframes heart 					{	0% 		{ -webkit-transform: scale(1.1); transform: scale(1.1); }
  										50% 	{ -webkit-transform: scale(0.8); transform: scale(0.8); }
  										100% 	{ -webkit-transform: scale(1); transform: scale(1); } }
            
/* Mailform */
.mailform 							{	position: relative; font-family: 'Inconsolata', monospace; }
.content_layer .leaveamessage p		{	font-size: 1.7em; font-weight: 700; padding-top: 2em; color: #2a4b9b;}
.mailform:before, 
.mailform:after 					{ 	content: " "; display: table; }
.mailform:after 					{ 	clear: both; }
.mailcolumn 						{	width: 50%; padding: 0em 2em 0em 0em; float: left; }
.mailform label 					{	display: block; padding: 40px 5px 5px 2px; font-size: 1.0em; cursor: pointer; color: #000; }
.mailform input,
.mailform textarea,
.mailform select 					{	line-height: 2.0; margin: 1em 0em; font-size: 1.5em; font-weight: 300; padding: 5px 5px; 
										color: #2a4b9b; display: block; width: 100%; background: transparent; }
.mailform input, 
.mailform textarea 					{	border: 2px solid #c2c2c2; background: #eaeaea; }
.mailform textarea 					{	min-height: 321px; }
.mailform input:focus,
.mailform textarea:focus,
.mailform label:active + input,
.mailform label:active + textarea 	{	outline: none; border: 2px solid #2a4b9b; }
.mailform select:focus 				{ 	outline: none; }

::-webkit-input-placeholder 		{ 	color: #c2c2c2; font-size: 80%; vertical-align: center; }
:-moz-placeholder 					{ 	color: #c2c2c2; font-size: 80%; vertical-align: center; }
::-moz-placeholder 					{	color: #c2c2c2; font-size: 80%; vertical-align: center; }
:-ms-input-placeholder 				{	color: #c2c2c2; font-size: 80%; vertical-align: center; }

.mailsubmit-button 					{	text-align: center; padding-top: 100px; clear: both; }
.mailform input.mailsubmit 			{ 	background: #2a4b9b; border: none; color: #fff; width: auto; cursor: pointer; display: inline-block;
										padding: 15px 0px; font-size: 1.5em; border-radius: 2px; letter-spacing: 1px; }

.mailform input.mailsubmit:hover 	{	background: #000; }

.progress-button 					{	position: relative; display: inline-block; margin: 1em 0em 0em 0em; padding: 1em 1em;
										outline: none; border: none; color: #fff; font-weight: 400; letter-spacing: 1px; font-size: 1.5em;
										z-index: 50; line-height: 1.0em; overflow: hidden; background: rgba(43,75,155,0.9); }
.progress-button:hover				{	background: rgba(43,75,155,1.0); }


/* Typewriter-Effect */
.type-wrap							{	margin:10px auto; padding:20px; background:##2a4b9b; border: none; font-family: 'Inconsolata', monospace; 
										font-weight: 400; font-size: 2em; color: #2a4b9b; }
.typed-cursor						{	opacity: 1; font-weight: 100; -webkit-animation: blink 0.7s infinite; -moz-animation: blink 0.7s infinite;
            							-ms-animation: blink 0.7s infinite; -o-animation: blink 0.7s infinite; animation: blink 0.7s infinite; }
@-keyframes blink					{	0% 		{ opacity:1; }
            							50% 	{ opacity:0; }
            							100% 	{ opacity:1; } }
@-webkit-keyframes blink			{	0% 		{ opacity:1; }
            							50% 	{ opacity:0; }
            							100% 	{ opacity:1; } }
@-moz-keyframes blink				{	0% 		{ opacity:1; }
            							50% 	{ opacity:0; }
            							100% 	{ opacity:1; } }
@-ms-keyframes blink				{	0% 		{ opacity:1; }
            							50% 	{ opacity:0; }
            							100% 	{ opacity:1; } }
@-o-keyframes blink					{	0% 		{ opacity:1; }
            							50% 	{ opacity:0; }
            							100% 	{ opacity:1; } }



/* 	-------------------------------------------------------------------------------------------------- */
/*	Design Anpassung , Class 9 , iPad 1024x768,  Anpassungen Design 1024 x 768 px */ 
/* 	-------------------------------------------------------------------------------------------------- */

@media 	screen and (device-width: 768px) and (device-height: 1024px) and (orientation:portrait), /*HOCHFORMAT*/
		screen and (width: 768px) and (height: 1024px) { 
.navigation							{	width: 8.8vw; }	
button								{	padding-left: 2.0vw; }
button img							{	width: 4vw; }	
.language							{	width: 6.2vw; left: 2.1vw; }
.language a img						{	width: 4.6vw; }		
.main_logo							{	width: 40vw; height: 20vh; right: 5vw; top: 5vh; }
.typewriter							{	position: fixed; z-index: 1001; top: 16vh; right: 0.5vw; }	
.content_header_headline			{	position: relative; height: 10vh; min-height: 60px; top: 30vh; width: 100%; left: 0%; background: #2b4b9b; }
.content_header_headline img		{	float: left; padding-left: 10%; padding-top: 3vh; width: auto; max-width: 80%; height: auto; min-height: 25%; }	}

@media 	screen and (device-width: 768px) and (device-height: 1024px) and (orientation:landscape), /*QUERFORMAT*/
		screen and (width: 1024px) and (height: 768px) { 	

.navigation							{	width: 6vw; }
button img							{	width: 2.4vw; }	
.language							{	width: 4.2vw; }
.language a img						{	width: 2.4vw; left: 2vw; }
.main_logo							{	width: 32vw; height: 20vh; right: 5vw; top: 5vh; }
.typewriter							{	position: fixed; z-index: 1001; top: 21vh; right: 0.5vw; }
.type-wrap							{	margin:10px auto; padding:20px; font-size: 2.5em; } }


/* 	-------------------------------------------------------------------------------------------------- */
/*	Unterschiedliche Screens */ 
/* 	-------------------------------------------------------------------------------------------------- */

@media screen and (min-width: 1500px) { .type-wrap	{	margin:10px auto; padding:20px; font-size: 3.5em; } }