html	{
	font-size: 10px;
	/*background-color:  	#F2F2F4;*/
	background-color:  	#F7F8FA;
}

@font-face {
    font-family: HelvetivaNeue;
    src: url(HelveticaNeue-Medium.ttf);
}

body	{
	
	font-family: HelvetivaNeue, "Helvetica Neue", Helvetica, Arial, sans-serif;
	color: #000;
	font-weight: 500;
	font-size: 14px;
	letter-spacing: 0.1px;

	line-height: 1.3rem;
	cursor: default;
	
	-webkit-font-feature-settings: 'tnum';
	-moz-font-feature-settings: 'tnum';
	-ms-font-feature-settings: 'tnum';
	font-feature-settings: 'tnum';
	text-decoration: none;
}

.clearfix:after {
	content: "";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
}

::-moz-selection {
	 background: black; 
	 color: white;
}

::selection { 
	background: black; 
	color: white;
}

.mega{
	font-size: 3em;
	line-height: 1.55em;
	font-weight: 500;
}

h1 {
	font-size: 2.5em;
	line-height: 1.45em;
	font-weight: 500;
}

#aboutContainer h1 {
	margin-bottom: 3rem;
	margin-top: 10rem;
}

#selfDescription h1:first-of-type{
	margin-top: 0;
}

h2 {
	font-size: 1.8em;
	line-height: 1.45em;
	font-weight: 500;
}

#selfDescription h2{
	line-height: 1.45em;
}

.projectMetaSmall h2{
	margin-bottom: 0;
}

.projectMetaSmall p{
	margin-bottom: 20px;
}

.projectMeta h2 {
	margin-bottom: 20px;
}

p{
	font-size: 1.5em;
	line-height: 1.45em;
}

.projectText p{
	text-indent: 3rem;
	font-size: 1.8em;
	line-height: 1.45em;
	font-weight: 500;
}

.metaCanvas p{
	text-indent: 0rem;	
}

#aboutContainer p{
	margin-bottom: 3rem;
}

#aboutContainer p:last-of-type {
	margin-bottom: 12rem;
}

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

a:hover { 
	cursor: pointer;
}


.impressum h2{
	margin-bottom: 1rem;
}

.impressum h1:first-of-type{
	margin-bottom: 1rem;
}

.impressum h2{
	margin-top: 6rem;
}

.impressum h2:first-of-type{
	margin-top: 8rem;
}

.impressum h3{
	font-size: 1.5em;
	line-height: 1.45em;
	margin-bottom: 1rem;
	margin-top: 3rem;
	font-weight: 500;
}

/*.impressum h1 {
	margin-top: 12rem;
}*/

.impressum h1:first-of-type {
	margin-top: 0rem;
}


/*header a:hover{
	opacity: 0.3;
}*/

/*-------------------MAIN-----------------*/
.contentContainer{
	/*max-width: 1280px;*/
	min-width: 100px;
	margin-left: auto;
	margin-right: auto;
	padding-right: 3rem;
	padding-left: 3rem;
}

.disable-hover {
  pointer-events: none;
}

/*-------------------HEADER-----------------*/

header{
	width: 100%;
	height: 6rem;
	padding-top: 3rem;
	font-size: 1.5em;
}


header nav{
	float: right;
}

header nav a {
	margin-left: 4rem;
}

.navSelected{
	padding-bottom: .3rem;
	border-bottom: 2px solid black;
}


/*-------------------Footer-----------------*/
footer{
	margin-top: 6rem;
	margin-bottom: 4rem;
	padding-top: 4rem;
	border-top: 2px solid black;
	font-size: 1.5em;
}

#cvContainer footer{
	margin-top: 12rem;
}

footer nav {
    float: right;
}

footer nav a {
	margin-left: 4rem;
}

/*-------------------Startseite-----------------*/
main{
	padding-top: 10rem;
}

.hello {
	width: calc(50% - 1.5rem);
}

.projects{
	margin-top: 18rem;
	overflow: auto;
}

.projectThumbnailContainer{
	float: left;
	transition: all .6s;
	width: calc(50% - 1.5rem);
	height: auto;
	margin-left: 3rem;
	margin-bottom: 6rem;
}

.projectThumbnailContainer:first-of-type{
	margin-left: 0;
}
.projectThumbnailContainer:nth-of-type(odd){
	margin-left: 0;
}

.projectDescription{
	/*color: rgba(0, 0, 0, 0.8);*/
	position: absolute;
	opacity: 0;
	width: 80%;
	left: -10px;
	top: 20px;
	-webkit-transition: all 0.4s ease;
}
.projectDescription-hover{
	opacity: 1;
	left: 20px;
}

.projectThumbnailImage img{
	max-width: 100%;
	height: auto;
	-webkit-transition: all 0.4s ease;
}

.projectThumbnailImage{
	position: relative;
	overflow: hidden;
	height: auto;
}

.thumbnailHover{
	position: absolute;
	width: 120%;
	height: 120%;
	opacity: 0;
	/*background: rgb(53,18,106);*/
	/*background: linear-gradient(270deg, #30FFE6, #7A80FF, #FF7ED8);*/
	/*background: linear-gradient(270deg, #6FEADC, #ABAFFC, #FBB7E7);*/
	background: linear-gradient(270deg, #ABAFFC, #FBB7E7);
	background-size: 300% 300%;

	-webkit-animation: GradientAnimation 30s ease infinite;
	-moz-animation: GradientAnimation 30s ease infinite;
	animation: GradientAnimation 30s ease infinite;
	-webkit-transition: all 0.3s ease;
}

@-webkit-keyframes GradientAnimation {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@-moz-keyframes GradientAnimation {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@keyframes GradientAnimation {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}

.thumbnailHover-hover{
	opacity: 0.9;
}

.projectTitle{
	height: 4rem;
	margin-top: 2rem;
	margin-left: 0px;
	-webkit-transition: all 0.4s ease;
}

.projectTitle-hover{
	margin-left: 20px;
}



/*-------------------About-----------------*/

#aboutImg {
	width: calc(50% - 4rem);
	float: right;
}

#aboutCanvas{
	height: auto;
	overflow: hidden;
}

#selfDescription{
	width: calc(50% - 1rem);
}

#cvContainer{
	padding-bottom: 3rem;
	padding-top: 12rem;
}

#cvContainer:last-of-type{
	padding-bottom: 0;
}

.cvContent{
	margin-bottom: 3rem;
}

.cvContent:last-child{
	margin-bottom: 0;
}

.tooltip {
    text-decoration:none;
    position:relative;
}
.tooltip span {
    display:none;
}
.tooltip:hover span {
	height: 250px;
    display:block;
    position:fixed;
    overflow:hidden;
    -webkit-box-shadow: 1px 18px 38px 0px rgba(0,0,0,0.1);
	-moz-box-shadow: 1px 18px 38px 0px rgba(0,0,0,0.1);
	box-shadow: 1px 18px 38px 0px rgba(0,0,0,0.1);
}


/*-------------------END-About-----------------*/


/*-------------------Projekt-Detail-----------------*/
.projectHeadline{
	margin: 0em auto 4em auto;
	width: 50em;
	max-width: 100%;
}

.projectText{
	margin: 8em auto 4em auto;
	width: 50em;
	max-width: 100%;
}

.metaCanvas .projectText{
	margin: 0 auto 4em auto;
	width: 50em;
	max-width: 100%;
}

.metaCanvas .projectText:last-child{
	margin-bottom: 0;
}

/*.metaCanvas h2{
	margin-bottom: 10px;
}*/

#projectHeader {
	position: relative;
	margin: 0 auto 3em auto;
}

.vimeoVideo{
	margin-bottom: 2em;
}

.gif{
	margin: 0px auto 2em auto;
	width: 700px;
	max-width: 100%;
}

figure img{
	max-width: 100%;
	display: block;
	margin-right: auto;
	margin-left: auto;
}

.doubleImage{
	margin-bottom: 3em;
}

#marginBottom{
	margin-bottom: 3em;
}

.metaCanvas {
	margin: 8rem 0 12rem 0;
	height: auto;
	overflow: hidden;
}

#vidMeta{
	margin-bottom: 5em;
}

.projectMeta:last-Child{

	width: auto;
}

.threeImages img{
	margin-bottom: .7em;
}

.aboveSlider {
	margin-bottom: 4em;
}

.link{
	border-bottom: 2px solid #000;
}


}

#footerContainer{
	padding-left: 0;
	padding-right: 0;
	max-width: 1200px;
}

.process{
	margin-top: 15rem;
	/*padding-bottom: 2rem;*/
	padding-top: 2rem;
	border-top: 2px solid black;
}

.health_wrapper{
	margin-top: 12rem;
	overflow: hidden;
}

#health_idea {
	width: calc(50% - 4rem);
	float: left;
	margin-right: 3rem;
}

#health_text{
	width: 100%;
	margin-top: 0;
}

/*.health_logo{
	width: 6rem;
	margin-top: 8em;
	margin-bottom: 1rem;
	margin-left: 2.3rem;
}*/

.health_logo{
	display: block;
	width: 12rem;
	margin: 8em auto 8em auto;
}

#text-logo{
	margin-bottom: 1em;
}

.image-middle{
	/*max-width: 60%;
	margin: auto;*/
	margin: 0 auto 0 auto;
	width: 70em;
	max-width: 100%;
}

.imageCombination figure{
	margin-bottom: 4em;
}

.imageCombination figure:last-of-type{
	margin-bottom: 0;
}

#labTech{
	position: relative;
	margin-left: 90%;
	margin-top: -30%;
	width: 40%;
} 

h4{
	margin-top: 1em;
	line-height: 1.35em;
}

.image-left{
	margin-left: 10%;
	width: 40%;
}

.image-right{
	float: right;
	margin-right: 10%;
	width: 60%;
}

.imageCombination{
	overflow: hidden
}

#health-options{
	width: 100%;
}

/*#companion{
	margin-bottom: 6em;
}
*/
#mockup{
	position: relative;
}

#companionAnimation{
	position: absolute;
	left: 27.8%;
	top: 12.6%;
	width: 45.2%;
	/*width: 31.7em;
	top: -66.7em;
	left: 0.28em;*/
}



/*-------------------Projekte-----------------*/
#mainProjectsContainer{
	padding-top: 10rem;
}

#projectsContainer{
	margin-top: 0;
}

/*-------------------Impressum-----------------*/

.link-underline{
	 /* text-decoration: solid underline black 2px; */
	padding-bottom: .2rem;
		border-bottom: 2px solid black;
	}

/*-------------------QUERIES----------------*/
@media screen and (max-width: 1000px) {
	.image-left{
		width: 100%;
		margin-left: 0;
	}
	.image-right{
		width: 100%;
		margin-right: 0;
		clear: both;
	}
}


@media screen and (max-width: 800px) {
	.hello {
		width: 100%;
	}
	.projectThumbnailContainer{
		clear: both;
		margin-left: 0;
		width: 100%;
	}
	#aboutImg{
		width: 100%;
		margin-bottom: 6rem;
	}
	#selfDescription{
		width: 100%;
	}
	#health_idea{
		width: 100%;
		margin-bottom: 6rem;
	}
	#health_text{
		width: 100%;	
	}
	.image-middle{
		width: 100%;
	}


}

@media screen and (max-width: 585px) {
	#companionAnimation{
		position: relative;
		width: 66.1%;
	}
}

/*MOBILE*/
@media screen and (max-width: 585px) {
	main {
		padding-top: 8rem;
	}
	header nav a {
		margin-left: 2rem;
	}
	.projects{
		margin-top: 12rem;
	}
	body{
		font-size: 14px;
	}
	p{
		line-height: 1.35em;
	}
	h1{
		line-height: 1.35em;
	}
	h2{
		line-height: 1.35em;
	}
	.nightnight div{
		line-height: 1.35em;
	}
	.contentContainer{
		padding-left: 1.5rem;
		padding-right: 1.5rem;
	}
	#footerContainer{
		padding-left: 0;
		padding-right: 0;
		margin-left: 2rem;
		margin-right: 2rem;
	}
}


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

	#aboutHighlight{
		top: 25px;
		width: 99.5%;
		height: 85px;
	}

}