@import url('https://fonts.googleapis.com/css?family=Libre+Baskerville');
@import url('https://fonts.googleapis.com/css?family=IBM+Plex+Sans');

@charset "UTF-8";
/* CSS Document */

.videoWrapper {
	position: relative;
	padding-top: 25px;
	height: 0;
}

.videoYT{
	padding-bottom: 52.5%; /* correct for embed from Youtube */
}

.videoVM{
	padding-bottom: 53%; /* correct for embed from Vimeo */
}


.videoLOCAL{
	padding-bottom: 53%; /* correct for embed from Vimeo */
}


.videoWrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}


 .videoWrapper video {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}





/*  M E N U   &   L I N K S */

.top-margin{
	margin-top:5px;
}

.menu-bar {
	cursor: pointer;
	margin-top:20px;
	margin-right:20px;   
}

.menu-bar span {
	color: #000;
	font-size:1.5em;
}

.main-menubar {
  position: relative;
}

nav {
	margin-top: 20px;
	margin-right: 15px;
	-webkit-transition: all 0.3s ease 0s;
	-moz-transition: all 0.3s ease 0s;
	-o-transition: all 0.3s ease 0s;
	transition: all 0.3s ease 0s;
	transform-origin: 100% 50%;
}


nav.hide {
	opacity:0;
	visibility:hidden;
}

nav a {
  font-size: .8em;
  font-family:'IBM PLEX Sans';
  color:#000;
  font-weight:400;
  letter-spacing:1px;
  margin: 0 5px;
  display: inline-block;  
}


nav a:hover {
  color:#000;
  text-decoration:underline;
}

li{list-style:none;}


li div {overflow:hidden; position:relative;}





/*  L I N K S  */


a {
  font-size: .85em;
  font-family:'IBM PLEX Sans';
  color:#000;
  line-height:1.8em;
}

a:hover {
  color:#000;
}

.link-space1{letter-spacing:1px;}

.nummer {
  font-size: .8em;
  font-family:'IBM PLEX Sans';
  color:#000;
  line-height:1.8em;
  letter-spacing:1px;
}

.projectfont {
  font-size: 1.2em;
  font-family:'IBM PLEX Sans';
  color:#000;
  line-height:1.8em;
  letter-spacing:1px;
}

.top-links{margin-right:40px;}
.folio-link{display:none;}
.folio-link-mob{display:block;font-size:1em;margin-top:20px;}
.folio-link-spacing{letter-spacing:1px;}



@media (min-width: 425px) { 
.menu-bar {margin-top:25px;margin-right:25px;}
.menu-bar span {font-size:1.7em;}
nav {margin-top:25px;margin-right:20px;}
nav a {font-size:1em;margin: 0 10px;}
a {font-size:1em;}
.nummer {font-size:1em;}
.projectfont {font-size:1em;}
.folio-link-mob{display:block;font-size:1em;margin-top:20px;margin-bottom:50px;}
}

@media (min-width: 768px) { 
.menu-bar {margin-top:35px;margin-right:35px;}
.menu-bar span {font-size:1.8em;}
nav {margin-top:36px;margin-right:20px;}
nav a {font-size:1.1em;margin: 0 15px;}
a {font-size:1.2em;}
.nummer {font-size:1.1em;}
.projectfont {font-size:1.1em;}
}

@media (min-width: 993px) { 
.folio-link-mob{display:none;}
.menu-bar {margin-top:35px;margin-right:35px;}
.menu-bar span {font-size:2em;}
nav {margin-top:36px;margin-right:20px;}
nav a {font-size:1.2em;margin: 0 20px;}
a {font-size:1.3em;}
.nummer {font-size:1.2em;}
.projectfont {font-size:1.2em;}
.folio-link{display:block;}
}

@media (min-width: 1360px) { 
.menu-bar {margin-top:35px;margin-right:35px;}
.menu-bar span {font-size:2em;}
nav {margin-top:36px;margin-right:20px;}
nav a {font-size:1.1em;margin: 0 20px;}
a {font-size:1.3em}
.nummer {font-size:1.3em}
.projectfont {font-size:1.3em;}
}


@media (min-width: 1730px) { 
.menu-bar {margin-right:70px;}
}





/*   M A R G I N S   &   L O G O   */

.header-logo{width:110px;margin-top:35px;margin-bottom:35px;padding-left:10px;}
.main-margin{margin-left:35px;}
.project-margin{padding:0 35px 0 35px;}
.project-margin-img{padding:0 35px 40px 35px;}
.margin-fix{padding-left:20px;}



@media (min-width: 425px) { 
.header-logo{width:135px;margin-top:15px;margin-bottom:40px;padding-left:10px;}
.main-margin{margin-left:50px;}
.project-margin{padding:0 70px 0 50px;}
.project-margin-img{padding:0 70px 30px 50px;}

}

@media (min-width: 768px) { 
.header-logo{width:160px;margin-top:20px;margin-bottom:80px;padding-left:10px;}
.main-margin{margin-left:90px;}
.project-margin{padding:0 140px 0 90px;}
.project-margin-img{padding:0 140px 30px 90px;}
.margin-fix{padding-left:40px;}

}


@media (min-width: 993px) { 
.header-logo{width:140px;margin-top:20px;margin-bottom:70px;}
.main-margin{margin-left:110px;}
.project-margin{padding:0 90px 0 110px;}
.project-margin-img{padding:0 110px 40px 30px;}
.margin-fix{padding-left:100px;}
}

@media (min-width: 1360px) { 
.header-logo{width:175px;margin-top:30px;}
.main-margin{margin-left:160px;}
.project-margin{padding:0 80px 0 160px;}
.project-margin-img{padding:0 160px 40px 30px;}
}

@media (min-width: 1730px) { 
.main-margin{margin-left:400px;}
.project-margin{padding:0 100px 0 400px;}
.project-margin-img{padding:0 400px 40px 30px;}
}

@media (min-width: 2200px) { 
.main-margin{margin-left:600px;}
.project-margin{padding:0 120px 0 600px;}
.project-margin-img{padding:0 600px 40px 30px;}
}




/*  F O N T  */

.logo-font{
	font-family:'IBM PLEX Sans', serif;
	color:#000;
	padding-right:30px;
	font-weight:500; 
	font-size:1.9em;
}

.logo-font2{
	font-family:'IBM PLEX Sans', serif;
	color:#000;
	padding-right:30px;
	font-weight:500; 
	font-size:1.5em;
}

.display-font{
	font-family:'IBM PLEX Sans', serif;
	color:#000;
	padding:8px 3px 8px 3px; 
	font-size:2.1em; 
	line-height:1.1em;
	font-weight:500; 
}


.body-font{font-family:'IBM PLEX Sans';color:#000;line-height:1.5em;letter-spacing:1px;font-size:1em;}
.cv-font{font-family:'IBM PLEX Sans';color:#000;line-height:2em;letter-spacing:1px;font-size:1em;}
.copyright-font{font-family:'IBM PLEX Sans';color:#000;line-height:1.5em;letter-spacing:1px;font-size:.6em;}
.profile-font{
	font-family:'Cormorant', serif;
	color:#000;
	font-size:1em; 
	line-height:2em;
	}
	

	
/*  Project Fonts  */	
	
.project-display-font{
	font-family:'Cormorant', serif;
	color:#000;
	background-color:#D1DDE5;
	font-size:1.35em; 
	line-height:2em;
}
	
.project-profile-font{
	font-family:'Cormorant', serif;
	color:#000;
	font-size:1.02em; 
	line-height:1.8em;
	}
	
.project-body-font{font-family:'IBM PLEX Sans';color:#000;line-height:1.8em;letter-spacing:1px;font-size:.9em;display:none;}

.project-body-font-mobile{font-family:'IBM PLEX Sans';color:#000;line-height:1.8em;letter-spacing:1px;font-size:1.1em;display:block;margin-bottom:60px;margin-top:10px}




@media (min-width: 425px) {
.logo-font{font-size:2.5em;padding-right:80px;}
.logo-font2{font-size:2em;padding-right:80px;}
.project-profile-font{font-size:1.1em;line-height:1.8em;}
.project-display-font{font-size:1.5em;line-height:1.9;}
.display-font{font-size:1.8em;}
.profile-font{font-size:1.15em;line-height:2.2em;}
.copyright-font{font-size:.8em;}
.cv-font{line-height:1.8em;font-size:1.2em;}
.project-body-font-mobile{font-size:1.1em;margin-bottom:35px}
}

@media (min-width: 768px) { 
.logo-font{font-size:3.2em;padding-right:80px;}
.logo-font2{font-size:2.5em;padding-right:80px;}
.project-display-font{font-size:1.6em;line-height:1.9;}
.display-font{font-size:1.85em;line-height:1.5em;}
.profile-font{font-size:1.2em;line-height:1.89;}
.project-profile-font{font-size:1.2em;line-height:1.89}
.copyright-font{font-size:.9em;}
.cv-font{line-height:1.75em;font-size:1.3em;}
.project-body-font-mobile{font-size:1.15em;margin:20px 0 50px 0;}
}

@media (min-width: 993px) { 
.body-font{font-size:1.1em;line-height:1.7em;}
.logo-font{font-size:3.35em;}
.logo-font2{font-size:2.7em;}
.project-display-font{font-size:1.7em;line-height:1.8;}
.display-font{font-size:1.75em;line-height:1.35em;}
.profile-font{font-size:1.2em;line-height:1.9em;}
.copyright-font{font-size:1em;}
.project-profile-font{font-size:1.2em;line-height:2;}
.project-body-font{line-height:1.65em;font-size:.9em;display:block;margin-top:50px;}
.project-body-font-mobile{display:none;}
.cv-font{line-height:1.7em;font-size:1.4em;}
}

@media (min-width: 1360px) { 
.project-display-font{font-size:1.8em;line-height:1.8;}
.display-font{font-size:2.2em;}
.profile-font{font-size:1.3em;line-height:2em;}
.body-font{font-size:1.2em;line-height:1.75em;}
.cv-font{line-height:1.8em;font-size:1.45em;}
.project-profile-font{font-size:1.35em;line-height:2;}
.project-body-font{line-height:1.8em;font-size:1em;display:block;margin-bottom:100px;margin-top:120px;}
}






/*  I N T R O    &    S P A C E R S   */

.spacer{margin: 40px 0 40px 0;}
.spacer-project{margin: 25px 0 25px 0;}
.spacer-project-top{margin: 50px 0 25px 0;}
.spacer-gallery{margin: 30px 0 60px 0;}
.no-mob-spacer{display:none;}
.intro-paragraph{width:82%}
.profile-paragraph{margin-bottom:70px;}


@media (min-width: 425px) {
.intro-paragraph{width:78%}	 
.no-mob-spacer{display:block;}
.spacer{margin: 75px 0 75px 0;}
}

@media (min-width: 768px) { 
.spacer-project-top{margin: 60px 0 25px 0;}
.spacer-project{margin: 50px 0 50px 0;}
.spacer-gallery{margin: 60px 0 100px 0;}
.spacer{margin: 75px 0 75px 0;}
.intro-paragraph{width:80%}
.profile-paragraph{width:95%}


}

@media (min-width: 993px) { 
.spacer{margin: 70px 0 70px 0;}
.spacer-gallery{margin: 70px 0 120px 0;}
.intro-paragraph{width:70%}
.profile-paragraph{margin-bottom:70px;}
}

@media (min-width: 1360px) { 
.intro-paragraph{width:55%}
}

@media (min-width: 1730px) { 
.profile-paragraph{width:95%;}
.intro-paragraph{width:45%;}
}

@media (min-width: 2200px) { 
.intro-paragraph{width:35%}
.profile-paragraph{width:95%}
}




/*   G A L L E R Y  */

.no-padding {padding: 0 !important;margin: 0 !important;}
.gallery-img{width:100vw;}
.gallery-img-margins{padding: 0 35px 0 35px;margin: 0 0 20px 0;}
.img-caption{display:none;}
.img-sub-caption{display:none;}




@media (min-width: 425px) {
.gallery-img-margins{padding: 0 50px 0 50px;}
.img-caption{display:none;}
}

@media (min-width: 768px) { 
.gallery-img-margins{padding: 0 90px 0 90px;margin: 0 0 0 0;}
.img-caption{display:block;padding: 0 0 0 90px;margin:30px 0 0px 0;}
.img-sub-caption{display:block;padding:0px 120px 0 90px;margin:20px 0 120px 0;}

}

@media (min-width: 993px) { 
.gallery-img{width:58.3333vw;}
.gallery-img-margins{padding: 0 0 0 110px;margin: 0 0 90px 0;}
.img-caption{display:block;padding:5px 80px 0 80px;margin:25px 0 0 0;}
.img-sub-caption{display:block;padding:10px 80px 0 82px;}
}

@media (min-width: 1360px) { 
.gallery-img-margins{padding: 0 0 0 160px;margin: 0 0 90px 0;}
.img-caption{padding: 20px 150px 0 75px;margin: 25px 0 0 0;}
.img-sub-caption{padding:15px 200px 0 80px;}
}

@media (min-width: 1730px) { 
.gallery-img-margins{padding: 0 0 0 400px;margin: 0 0 90px 0;}
.img-caption{padding: 30px 390px 0 60px;}
.img-sub-caption{padding:15px 390px 0 64px;}
}

@media (min-width: 2200px) { 
.gallery-img-margins{padding: 0 0 0 600px;}
.img-caption{padding: 30px 560px 0 60px;}
.img-sub-caption{padding: 15px 520px 0 64px;}

}



/*   C V  */

.cv-col-1{padding:5px 30px 0 36px;}
.timeline{color:#000;text-align:right;padding:0 10px 0 0;margin:0 -5px -1px 0;}
.vl{
	border-right:.1em solid;
	margin:0 0 0 0;
	color:#b2bdc2;
	height:100%;
}



.profile-pic{width:27%;margin-top:30px;}
.skills{margin:30px 0 5px 0;}
.skills-body{padding:0 30px 0 0;}




@media (min-width: 425px) {
.cv-col-1{padding: 5px 50px 0 50px;}
.vl{margin:0 12px 0 0;}
.timeline{padding:0 14px 0 0;}
.profile-pic{width:27%;}
}

@media (min-width: 768px) { 
.cv-col-1{padding: 15px 60px 0 90px;}
.profile-pic{width:22%;}
.skills-body{padding:0 85px 0 0;}
}

@media (min-width: 993px) { 
.cv-col-1{padding: 15px 0 0 110px;}
.profile-pic{width:30%;}
.skills-body{padding:0 0px 0 0;margin-bottom:70px}
}

@media (min-width: 1360px) { 
.cv-col-1{padding:15px 0 0 160px;}
.profile-pic{width:27%;}
}

@media (min-width: 1730px) {
.cv-col-1{padding:15px 0 0 400px;}
}

@media (min-width: 2200px) { 
.cv-col-1{padding:15px 0 0 600px;}
}




/*   T I M E L I N E  &  F O O T E R  */

.timeline-label{margin-bottom:50px;font-family:'IBM PLEX Sans';line-height:1.8em;letter-spacing:1px;font-size:1em;margin-left:50px;font-weight:500;}
.timeline-highlight{color:#000;padding:4px 2px 4px 2px;}
.date-label{font-family:'IBM PLEX Sans';line-height:1.5em;letter-spacing:1px;font-size:.8em;margin-top:4px;margin-left:5px;}


.footer-logo{width:70px;height:23px;margin:30px 0 5px 0;}
.copyright-line{margin:5px 0 80px 0;}
.copyright-line-break{display:block};


@media (min-width: 425px) {
.copyright-line{margin:10px 0 80px 0;}
}

@media (min-width: 768px) { 
.footer-logo{width:90px;height:30px;margin:50px 0 12px 0;}
.timeline-label{font-size:1.1em;font-weight:500;}
}

@media (min-width: 993px) { 
.copyright-line-break{display:none;}
.copyright-line{margin:10px 0 140px 0;}
.timeline-label{font-size:.95em;font-weight:500;}
}

@media (min-width: 1730px) { 
.footer-logo{width:100px;height:33px;}
.timeline-label{font-size:1.1em;}
}









/*   A N I M A T I O N   */

.animate-in {
    -webkit-animation: fadeIn .5s ease-in;
    animation: fadeIn .5s ease-in;
}

.animate-out {
    -webkit-transition: opacity .5s;
    transition: opacity .5s;
    opacity: 0;
}

@-webkit-keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}



/*   I M A G E    A N I M A T I O N   */


img {top:0;left:0; max-width:auto;vertical-align:bottom;width:100%;
	-moz-transform: scale(1) ;
	-webkit-transform: scale(1);
	-o-transform: scale(1) ;
	-ms-transform: scale(1);
	transform: scale(1);
	
	-webkit-transition:all .7s;
	-moz-transition:all .7s; 
	-o-transition:all .7s;
	-ms-transition:all .7s; 
	transition:all .7s; }
	
	
li div:hover img {-webkit-transform: scale(1.02);-moz-transform:scale(1.02);-o-transform:scale(1.02);-ms-transform:scale(1.02);transform:scale(1.02);cursor:pointer;overflow:hidden;}