/*
 *	WebFont Package Licensed to Portfolio Website
 */

/* Fragen Thin */
@font-face {
	font-family: Fragen;
	src: url('fonts/fragen/woff/Fragen Thin.woff') format('woff'); /* Pretty Modern Browsers */
	font-weight: 100;
	font-style: normal;
}

/* Fragen Thin Italic */
@font-face {
	font-family: Fragen;
	src: url('fonts/fragen/woff/Fragen Thin Italic.woff') format('woff'); /* Pretty Modern Browsers */
	font-weight: 100;
	font-style: italic;
}

/* Fragen Regular */
@font-face {
	font-family: Fragen;
	src: url('fonts/fragen/woff/Fragen Regular.woff') format('woff'); /* Pretty Modern Browsers */
	font-weight: 400;
	font-style: normal;
}

/* Fragen Regular Italic */
@font-face {
	font-family: Fragen;
	src: url('fonts/fragen/woff/Fragen Regular Italic.woff') format('woff'); /* Pretty Modern Browsers */
	font-weight: 400;
	font-style: italic;
}

/* Fragen Black */
@font-face {
	font-family: Fragen;
	src: url('fonts/fragen/woff/Fragen Black.woff') format('woff'); /* Pretty Modern Browsers */
	font-weight: 800;
	font-style: normal;
}

/* Fragen Black Italic */
@font-face {
	font-family: Fragen;
	src: url('fonts/fragen/woff/Fragen Black Italic.woff') format('woff'); /* Pretty Modern Browsers */
	font-weight: 800;
	font-style: italic;
}

/* Fragen Bold */
@font-face {
	font-family: Fragen;
	src: url('fonts/fragen/woff/Fragen Bold.woff') format('woff'); /* Pretty Modern Browsers */
	font-weight: 600;
	font-style: normal;
}

/* Fragen Bold Italic */
@font-face {
	font-family: Fragen;
	src: url('fonts/fragen/woff/Fragen Bold Italic.woff') format('woff'); /* Pretty Modern Browsers */
	font-weight: 600;
	font-style: italic;
}

/* Fragen Bold */
@font-face {
	font-family: Fragen;
	src: url('fonts/fragen/woff/Fragen Extra Bold.woff') format('woff'); /* Pretty Modern Browsers */
	font-weight: 700;
	font-style: normal;
}

/* Fragen Bold Italic */
@font-face {
	font-family: Fragen;
	src: url('fonts/fragen/woff/Fragen Extra Bold Italic.woff') format('woff'); /* Pretty Modern Browsers */
	font-weight: 700;
	font-style: italic;
}

:root {
	--yellow: #e7c429;
	--blue: #24369c;
	--lightBlue: #394aa5;
	--red: #e55129;
	--orange: #ffad29;
	--mint: #99decb;
	--lightMagenta: #e1b5d6;
	--peach: #fdd3d5;

	--backgroundColor1: #f3f1ee;
}

html, * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
	background-color: var(--backgroundColor1);
	margin: 0;
	width: 100%;
	height: 100%;
}

canvas {
	width: 100%;
	height: 100%;
	display: block;
}

.container {
	height: 100vh;
}

/* 	HELLO WRAPPER
//
//
//
//
*/


.hello-wrapper {
	position: relative;
	display: flex;
	margin-bottom: 3rem;
	z-index: 1;
}


.hello-wrapper-content {
	font-family: Fragen;
	font-weight: 400;
	font-style: italic;
	color: var(--blue);
	line-height: 1.4;
	font-size: min(max(1.5rem, 8vw), 5rem);
	width: 100%;
	height: 100vh;
	position: relative;
}

.hello-text-1 {
	position: absolute;
	text-align: left;
	top: .5rem;
	left: 1rem;
	right: 1rem;
	hyphens: auto;
}

.hello-text-2 {
	position: absolute;
	text-align: right;
	bottom: .5rem;
	right: 1rem;
	left: 1rem;
	hyphens: auto;
}

.hello-wrapper-mail {
	font-size: min(max(.8rem, 6vw), 5rem);
	text-decoration: none;
	position: relative;
	color: var(--blue);
	hyphens: none;
}

.x-bold {
	font-weight: 700;
}

.hello-wrapper-mail, .hello-wrapper-mail:visited {
    text-decoration: none;
    background-image:
      linear-gradient(
          transparent 2px,
          transparent 2px,
          transparent 4px,
          transparent 4px
      ),
      linear-gradient(
          transparent 2px,
          var(--blue) 2px,
          var(--blue) 5px,
          transparent 5px
      );
    background-size: 100% 6px, 0% 6px;
    background-position: right bottom, right bottom;
    transition: background-size cubic-bezier(0.41, 0.01, 0, 1) .4s;
    background-repeat: no-repeat;
    padding-bottom: .1rem;
    border-bottom: 6px solid transparent;
}
.hello-wrapper-mail:hover {
    background-size: 100% 6px;
}

.hello-wrapper-mail:visited {
	color: var(--blue);
}


/* 	BUTTON
//
//
//
//
*/



.filterDiv {
  display: none;
}

.show {
  display: block;
}

/* Style the buttons */

.btnContainer{
	margin: 5rem 1rem;
}


.btn {
	font-family: Fragen;
	font-weight: 400;
	font-style: normal;
	 letter-spacing: .02rem;
	font-size: min(max(.8rem, 1vw), 2rem);
	color: var(--blue);
/*	opacity: 0.65;*/
  border: none;
  outline: none;
  margin: .1rem .4rem;
  padding: 0 .2em;
  background-color: transparent;
  cursor: url("images/blue_cursor_20x20.svg") 10 10, auto;;
  text-align: center;
}

.btn:hover {
	color: var(--backgroundColor1);
  background: var(--blue);
  opacity: 1;
}

.btn.active {
  font-style: normal;
  color: white;
  background: var(--blue);
  opacity: 1;
}



/* 	NAVIGATION BAR
//
//
//
//
*/


.navbar-elements {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	background: var(--blue);
}

.navbar-text {
	font-family: Fragen;
	font-weight: 700;
	font-size: min(1rem, 1.2rem);
	letter-spacing: .1rem;
	color: var(--backgroundColor1);
	text-decoration: none;
	text-align: center;
	display: block;
	width: 100%;
	height: 100%;

}

.navbar-box {
	display: flex;
	flex-grow: 1;
	justify-content: center;
	align-items: center;
}

.navbar-box:hover {
	background-color: var(--orange);
}

.navbar-box a{
	padding: min(max(.6rem, 5vw), 1.2rem) 0 min(max(.6rem, 5vw), 1.2rem) 0;
}

.smart-scroll {
  position: fixed;
  bottom: 0;
  right: 0;
  left: 0;
  z-index: 1030;
}

.navbar-hover {
  position: fixed;
  bottom: 0;
  right: 0;
  left: 0;
  z-index: 1;
}

.navbar-hover-elements {
	padding: 2rem;
}

.scrolled-down {
   transform: translateY(100%); transition: all 0.4s ease;
}
.scrolled-up {
   transform: translateY(0); transition: all 0.4s ease;
}




/* 	STARTPAGE CONTENT
//
//
//
//
*/



.content-wrapper {
	display: flex;
	width: 100%;
	padding: 5vw;
	margin: 0px;
}

.project-wrapper, .project-wrapper-large {
	margin: auto;
	width: min(max(5rem, 90vw), 81rem);
}

.project-wrapper-img {
	margin: auto;
	width: min(max(5rem, 90vw), 81rem);
}

.projects-img {
	width: 70%;
}


.project:hover,
.mySlides:hover,
.project-scope:hover,
.project-square:hover,
.project-1467:hover {
	transform: scale(1.015);
	background-color: transparent;
}

.mySlides {
	transform: scale(1);
	transition: all 0.2s ease-in-out;
	width: 100%;
}

.project {
	position: relative;
	padding-bottom: 56.25%;
	margin-bottom: .5rem;
	transform: scale(1);
	transition: all 0.2s ease-in-out;
}

.project-scope {
	position: relative;
	padding-bottom: 41.89453125%;
	margin-bottom: .5rem;
	transform: scale(1);
	transition: all 0.2s ease-in-out;
}

.project-square {
	position: relative;
	padding-bottom: 112.5%;
	margin-bottom: .5rem;
	transform: scale(1);
	transition: all 0.2s ease-in-out;
}

.project-1467 {
	position: relative;
	padding-bottom: 68.18%;
	margin-bottom: .5rem;
	transform: scale(1);
	transition: all 0.2s ease-in-out;
}

.project iframe,
.project-scope iframe,
.project-square iframe,
.project-1467 iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}


.blocker {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 100%;
	height: 100%;
}

.project-title {
	width: 85%;
	margin-bottom: min(max(5rem, 8vw), 20rem);
}

.project-title-embbed {
	width: 85%;
	margin-bottom: 4rem;
}

.project-title-text {
	text-decoration: none;
	position: relative;
	font-family: Fragen;
	font-weight: 700;
	letter-spacing: 0rem;
	font-style: normal;
	font-size: min(max(1.2rem, 1vw), 3rem);
	color: var(--blue);
	cursor: url("images/blue_cursor_20x20.svg") 10 10, auto;;
}

.project-title-text:hover,
.project-wrapper:hover .project-title-text, 
.projects-img:hover .project-title-text,
.iframe-thesis-wrapper:hover .project-title-text,
.project-wrapper-large:hover .project-title-text {
    color: var(--backgroundColor1);
    background: var(--blue);
}


.blocker,
.hello-wrapper-mail,
.mySlides,
.link,
.kapitel-number,
.go-to-top,
.toggle-on {
	cursor: url("images/blue_cursor_20x20.svg") 10 10, auto;
}
.navbar-text {
	cursor: url("images/white_cursor_20x20.svg") 10 10, auto;
}

.project-description {
	text-decoration: none;
	display: inline-block;
	font-family: Fragen;
	font-weight: 400;
	font-style: italic;
	font-size: min(max(1rem, 1vw), 2rem);
	color: var(--blue);
	transform: translate(0,.2rem);
}	

@media screen and (min-width: 960px){
	
	/* nav Styles */
	.container {
		height: 100vh;
	}

	.hello-text-1 {
		top: 1rem;
		left: 2rem;
		right: 2rem;
	}

	.hello-text-2 {
		bottom: 1rem;
		right: 2rem;
		left: 2rem;
	}

	.project-grid {
		display: flex;
		flex-wrap: wrap;
		width: min(max(15rem, 90vw), 81rem);
		margin: auto;
		justify-content: center;
	}

	.project-wrapper {
		max-width: 50%;
		margin: 0;
		padding: 0 1rem 0 1rem;
	}

	.project-wrapper-large {
		max-width: 100%;
		margin: 0;
		padding: 0 1rem 0 1rem;
	}

	.project-wrapper-img {
		max-width: 35%;
		margin: 0;
		padding: 0 1rem 0 1rem;
	}

	.project-title-text {
		font-size: min(max(1.3rem, 1.7vw), 2.7rem);
	}

	.project-description {
		font-size: min(max(1rem, 1.4vw), 2rem);
	}	

	.projects-img {
		margin: auto;
		width: 100%;
	}

	.navbar-elements {
		justify-content: space-between;
	}

	.navbar-box {
		width: calc(100%/3);
	}

	.navbar-elements a {
		font-size: 1.5rem;
	}

	.hello-wrapper-content {
		font-weight: 400;
	}

	.project-title {
		margin-top: 1rem;
		width: 95%;
		margin-bottom: min(max(4rem, 6vw), 15rem);
	}
}





/* 	BEHIND THE SCENES PAGES
//
//
//
//
*/


.bts-wrapper {
	position: relative;
	margin: 7rem auto 7rem auto;
	padding-right: 1rem;
	padding-left: 1rem;
	max-width: min(max(10rem, 100vw), 81rem);
}

.bts-wrapper-toggle {
	position: relative;
	margin: 0 auto 2rem auto;
	padding-right: 1rem;
	padding-left: 1rem;
	max-width: min(max(10rem, 100vw), 81rem);
}

.thesis-wrapper {
	position: relative;
	margin: 0 auto 0 auto;
	justify-content: space-between;
/*	padding-right: .5rem;
	padding-left: .5rem;*/
	display: flex;
	flex-direction: column-reverse;
	max-width: min(max(10rem, 97vw), 81rem);
}

.iframe-thesis-wrapper {
	position: relative;
	max-width: min(max(10rem, 97vw), 50rem);
}

.kapitel a,
.bts-text,
.bts-text-header,
.credits,
.thesis-abb-description,
.bts-credits-header,
.credits-description,
.credits-name,
.bts-img-description {
	font-family: Fragen;
	font-weight: 400;
	font-style: normal;
	font-size: 1rem;
	text-decoration: none;
	color: var(--blue);
}


.kapitel a {
	text-align: right;
}

.kapitel {
	position: sticky;
	top: 2rem;
	margin: 5rem 0 0 .5rem;
	max-width: 28rem;
	max-height: 80vh;
	overflow: auto;
}

.kapitel-text {
	margin-bottom: min(max(.4rem, .3vw), .6rem);
}


.bts-video-wrapper {
	padding-bottom: 56.25%;
	margin-bottom: 1.5rem;
}

.bts-video-wrapper-scope {
	padding-bottom: 41.89453125%;
	margin-bottom: 1.5rem;
}

.bts-video-wrapper-square {
	padding-bottom: 100%;
	margin-bottom: 1.5rem;
}

.bts-video-wrapper-1467 {
	padding-bottom: 68.18%;
	margin-bottom: 1.5rem;
}

.bts-video-row-wrapper {
	padding-bottom: 56.25%;
}

.bts-video-row-wrapper-square {
	padding-bottom: 112.5%;
}

.bts-video-row-wrapper-1467 {
	padding-bottom: 68.18%;
}

.bts-row {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	/*align-items: center;*/
	margin: 5rem auto 5rem auto;
	width: min(max(3rem, 97vw), 81rem);
}

.bts-img,
.bts-img-thesis {
	margin: 0 0 5rem 0;
}

.bts-row-wrapper {
	position: relative;
	margin-bottom: 1.5rem;
}

.bts-wrapper iframe,
.bts-row iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.bts-img img {
	width: 100%;
	height: 100%;
	display: block;
}

.bts-img-thesis {
	width: 100%;
}

.bts-img-thesis img {
	width: 100%;
	height: 100%;
	display: block;
}

.thesis {
	margin-right: 1rem;
}

.thesis-abb,
.thesis-abb-small {
	margin-top: 1.5rem;
	margin-bottom: 1.5rem;
	/*width: 39rem;*/
}

.thesis-abb-small {
	margin-right: .8rem;
}

.thesis-abb-small-wrapper {
	display: flex;
	max-width: 63ch;
}

.thesis-abb-description {
	font-size: .75rem;
	margin-top: .4rem;
	line-height: 0;
	opacity: 0.8;
}

.thesis-abb img,
.thesis-abb-small img{
	width: 100%;
	object-fit: contain;
}

.profile-pic img {
	width: 100%;
	object-fit: contain;
}

.bts-text {
	max-width: min(max(20rem, 95vw), 40rem);;
	align-self: flex-end;
	margin: 3.5rem 0 0 0;
}

.bts-text p {
	margin-bottom: .7rem;
}

.bts-paragraph {
	margin-bottom: min(max(2rem, 2vw), 6rem);
	line-height: min(max(1.7rem, 2vw), 1.8rem);
	max-width: 40rem;
	margin: auto;
}

.bts-paragraph a {
	text-decoration: none;
	-webkit-hyphens: auto;
  	-ms-hyphens: auto;
  	hyphens: auto;
}

.bts-img-description {
	padding-top: .5rem;
}

.capslock {
	letter-spacing: .05em;
	font-size: .98em;
}

.supscript {
	font-size: .8rem;
	vertical-align: baseline;
	position: relative;
	top: -.4em;
	padding-left: .2em;
	padding-right: .1em;
}

sub {
  vertical-align: baseline;
  position: relative;
  top: 0.2em;
}


.bts-text-header {
	font-weight: 700;
	font-size: min(max(1rem, 1.5vw), 22rem);
	line-height: min(max(1.8rem, 2vw), 2.5rem);
	color: var(--blue);
}

.bts-text-header p {
	margin-bottom: .8rem;
}

.paragraph-italic {
	font-style: italic;
}

.credits {
	margin-bottom: min(max(2rem, 2vw), 6rem);
	max-width: 40rem;
	margin: auto;
}

.toggle-on {
	background: var(--blue);
	color: var(--backgroundColor1);
}

.quellen {
	font-size: .8rem;
	line-height: 1.3rem;
}

.row {
	font-weight: 400;
/*	display: flex;
	flex-direction: row;
	flex-wrap: wrap;*/
	margin-bottom: .8rem;
}

.bts-credits-header {
	font-weight: 700;
	font-size: min(max(1.2rem, 1.8vw), 2.2rem);
	letter-spacing: .0rem;
	line-height: 2.2rem;
	margin: 4rem 0 1rem 0;
}

.link {
	position: relative;
	text-decoration: none;
	color: var(--blue);
}

a.link:hover,
.kapitel-text:hover a.link {
	color: var(--backgroundColor1);
    background: var(--blue);
}

.credits-description {
	font-style: italic;
	opacity: 0.8;
	width: 10rem;
	margin: 0 1rem 0 0;
}

.credits-name {
	max-width: min(max(15rem, 30vw), 20rem);
	line-height: min(max(1.7rem, 2vw), 1.8rem);
}

.awards {
	max-width: 100%;
	line-height: min(max(1.7rem, 2vw), 1.8rem);
}


.photography-wrapper {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	margin: auto;
	width: min(max(3rem, 100vw), 75rem);
}

.photography-img {
	margin: 0 .5rem 1rem .5rem;
}

.photography-img img {
	width: 100%;
	height: 100%;
	display: block;
}


@media screen and (min-width: 960px) {
	.thesis {
		margin-right: 2rem;
	}

	.bts-wrapper,
	.bts-row {
		max-width: min(max(15rem, 75vw), 81rem);
	}

	.bts-img-thesis {
		width: 49%;
	}

	.kapitel {
		height: 80vh;
	}

	.thesis-wrapper {
		flex-direction: row;
	}
	.row {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
	}

	.bts-paragraph {
		align-self: flex-end;
	}

	.bts-row {
		flex-direction: row;
	}
	.bts-row-wrapper {
		width: 50%;
		padding: 0 1rem 0 1rem;
	}

	.bts-video-wrapper-square {
		padding-bottom: 60%;
		margin-bottom: 1.5rem;
	}

	.photography-wrapper {
		flex-direction: row;
	}

	.profile-pic img {
		width: 65%;
	}
}	

.emoji-wrapper {
	text-align: center;
	font-family: Fragen;
	font-weight: 400;
	color: var(--blue);
	font-size: 3rem;
	line-height: 3rem;
	padding-bottom: min(max(8rem, 3vw), 12rem);
	padding-top: min(max(8rem, 3vw), 12rem);
}

.emoji a {
	text-decoration: none;
	color: var(--blue);
}

.emoji a:hover {
	color: var(--orange);
}

.emoji-text {
	font-family: Fragen;
	font-weight: 700;
	font-style: italic;
	text-align: center;
	color: var(--blue);
	font-size: .8rem;
	padding-bottom: min(max(8rem, 3vw), 12rem);

}

.transparent {
	opacity: 0.6;
}


/* SLIDE IN*/


.slide-in {
	opacity: 1;
	transform: translateY(3rem);
	transition: all cubic-bezier(0.41, 0.01, 0, 1) 1s
}

.slide-in.active {
	opacity: 1;
	transform: translateY(0rem);
}