@charset "UTF-8";
html {
	height: calc(var(--vh,1vh) * 100); 
	height: -webkit-fill-available;
}
body{
	margin: 0;
	padding: 0;
/*	min-height: 100vh; */
/*	min-height: calc(100 * var(--vh)); */
	min-height: calc(var(--vh,1vh) * 100);
	min-height: -webkit-fill-available;
/*	max-height: 100vh; */ /* was causing issues with header */
}
*{
	font-family: Helvetica, "Helvetica Neue", Arial, Gotham, "sans-serif";
}

img{
	display: block;
	width: 100%;
}
a{
	display: block;
	color: inherit;
	text-decoration: none;
	mix-blend-mode: overlay;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}
nav a{
	width: 100%; /* make sure all nav elements are spaced out correctly */
}
.project-page a{
	/* mix-blend-mode: normal; */
}
#projects a{
	mix-blend-mode: normal;
}
.contact-section a{
	mix-blend-mode: overlay !important;
}
ul li{
	list-style-type: none;
	margin: 0 0 20px 0;
	padding: 0;
}
ul{
	margin: 0;
	padding: 0;
}
h1, h2, h3, h4{
	margin: 0;
	padding: 0;
}
/* determine background color for each column */
#index-page #about{
	/* background-color: red; */
	background-color: #C88318;
}
#index-page #experience{
	/* background-color: blue; */
	background-color: #FBD737;
	background-size: 100%;
	background-repeat: repeat-y;
}
#index-page nav #projects{
	background-color: #AE76FB; /* light purple */
}
#index-page .contact-section{
	background-color: #8E18C8;
}
/* ensure that extension of contact section remains same colour (especially for large screens) */
#index-page .col:nth-child(4){
	background-color: #8E18C8;
}
#logo{
	position: absolute;
	width: 120px;
	transition: all 1.5s ease;
	mix-blend-mode:overlay;
	z-index: 10;
}

/* hover logo implementation */
#hoverLogo{
	position:absolute;
	top: 0px;
	left: 0px;
}
#logo [id="hoverLogo"]{
	opacity: 0;
}
#logo:hover img{
	opacity: 0;
}
#logo:hover [id="hoverLogo"]{
	opacity: 1;
}


#index-page #logo{
	top: 80%;
	right: 48%;
}
main{
	display: block;
}
.col-wrapper{
	display: flex;
	justify-content: space-between;
}
.col{
	flex: 1;
	/* will always be at least the browser window height */
	/* min-height: 100vh; */
	/* height: 100%; */ /* with overflow scroll, we do not need this */
/*	min-height: calc(100 * var(--vh)); */
	min-height: calc(var(--vh,1vh) * 100);
	min-height: -webkit-fill-available;
/*	overflow-x: hidden; */
}
#projects-contact{
	overflow-y: scroll; 
	-webkit-overflow-scrolling: touch;
}
.col::-webkit-scrollbar {
  display: none;
}
.col-2w{
	flex: 2;
}
.text-box{
	padding: 1.5em;
}
.text-box .img-box{
	/* img spans 33% of screen */
	width: calc(71% + 1.5em);
	margin-left: 29%;
	margin-top: 50px;
	margin-bottom: 50px;
}
.styledpic img{
	filter: brightness(1.1);
	opacity: 0.8;
	transition: all 0.5s ease;
}
.project-page .text-box{
	flex-direction: column;
}
.text-box .row{
	flex: 1;
}
.row{
	display: flex;
	padding-bottom: 20px;
	margin: 0px;
	flex: 1;
}
.text-col1, .text-col2{
	flex: 1;
}
*{
	font-size: 13pt;
}
p, li, h2{
	text-transform: uppercase;
}
h2{
	font-size: 14pt;
	font-weight: 600;
}
h3{
	font-size: 13pt;
	font-weight: 600;
	text-transform: uppercase;
}
p.body{
	text-transform: none;
	margin: 30px 0px;
	font-size: 1em;
	margin-right: 1.8em;
}
.col [class="content-wrapper"] .text-box{
	visibility: hidden;
}
.col [class="content-wrapper"] img{
	display: none;
}
/* hover classes moved to desktop media query */
.text-col1{
	width: 100%;
	/* background-color: aquamarine; */
}
#projects .row{
	/* background-color: whitesmoke; */
}

#projects .row:hover, #projects .row:active{
	color: #fff;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
}

#projects a{
	display: flex;
	padding: 0;
	margin: 0;
}
img.preview{
	position: fixed;
	top: 0px;
	left: 33.33%;
	width: 33.33%;
}

/* no preview images displayed */
#projects [class="preview"]{
	display: none;
}
/* hover classes moved to desktop media query */

/* --------- EDEND -------- */
#edend-page .col-2w{
	/* background-color: #EDEDED; */
}


#edend-page #projects{
	background-color: #EAE7BF;
}
#edend-page .specs h2, #edend-page .specs h3{
	color: #544FF9;
}
#edend-page .contact-section, #edend-page .col:nth-child(3){
	background-color: #544FF9; /* contact and its container same colour (for large screens)*/
}

#parlafenetre-page #projects{
	background-color: #B7DED5;
}
#parlafenetre-page .specs h2, #parlafenetre-page .specs h3{
	color: #AA8427;
}
#parlafenetre-page .contact-section, #parlafenetre-page .col:nth-child(3){
	background-color: #AA8427; /* contact and its container same colour (for large screens)*/
}
#parlafenetre-page .body a {
	display: inline-block;
	color: #AA8427;
}
#parlafenetre-page .body a:hover {
	display: inline-block;
	color: #000000;
}
#opticaldisk-page #projects{
/*	background-color: #26C67D; */
	background-color: #EE402A;
}
#opticaldisk-page .specs h2, #opticaldisk-page .specs h3{
/*	color: #EE402A; */
	color: #26C67D;
	
}
#opticaldisk-page .contact-section, #opticaldisk-page .col:nth-child(3){
/*	background-color: #EE402A; */
	background-color: #26C67D;
}


#sora-page #projects{
	background-color: #b8d8ba;
}
#sora-page .specs h2, #sora-page .specs h3{
	color: #a86abe;
	color: #993366;
}
#sora-page .contact-section, #sora-page .col:nth-child(3){
	background-color: #a86abe;
	background-color: #993366;
}

#pinson-page #projects{
	background-color: #1BF1DC;
}
#pinson-page .specs h2, #pinson-page .specs h3{
	/* color: #50F4A9; */ /* aquamarine */
	color: #D9DD92;
}
#pinson-page .contact-section, #pinson-page .col:nth-child(3){
	/* background-color: #50F4A9; */ /* aquamarine */
	background-color: #D9DD92;
}

#hum-page #projects{
	background-color: #FEC57E;
}
#hum-page .specs h2, #hum-page .specs h3{
	color: #9381FF;
}
#hum-page .contact-section, #hum-page .col:nth-child(3){
	background-color: #9381FF; 
}

#contacts-page #projects{
	background-color: #4DFF76;
}
#contacts-page .specs h2, #contacts-page .specs h3{
	color: #FF679F;
}
#contacts-page .contact-section, #contacts-page .col:nth-child(3){
	background-color: #FF679F; 
}

#fractus-page #projects{
	background-color: #E2E0D3;
}
#fractus-page .specs h2, #contacts-page .specs h3{
	color: #000000;
}
#fractus-page .contact-section, #contacts-page .col:nth-child(3){
	background-color: #1C1C1C;
	color: #ffffff;
}
#fractus-page .contact-section a{
	mix-blend-mode: normal !important;
	color: #ffffff;
}
#fractus-page .contact-section a:hover{
	color: #3E3E3E;
}

#manifeste-page .description a:hover{
	color: #EA600C;
}
#manifeste-page #projects{
	background-color: #EA600C;
}
#manifeste-page .specs h2, #manifeste-page .specs h3{
	color: #3E3E3E;
}
#manifeste-page .contact-section, #manifeste-page .col:nth-child(3){
	background-color: #3E3E3E; 
}

#bdm-page #projects{
/*	background-color: #3500F5; */
/*	background-color: #c8df00; */
	background-color: #ff69eb;
}
#bdm-page .specs h2, #bdm-page .specs h3{
/*	color: #ED706E; */
	color: #8789C0;
}
#bdm-page .contact-section, #bdm-page .col:nth-child(3){
/*	background-color: #ED706E; */
	background-color: #8789C0;
}


figcaption{
	margin-top: 15px;
/*	font-size: 0.9em; */
}


iframe{
	width: 100%;
	height: 37.6vw;
	margin: 0;
	padding: 0;
}
header{
	background-color: #000000;
	width: 100%;
	color: #ffffff;
	height: 60px;
	z-index: 10;
}
/* pages with VIDEO hero */
.project-page header{
	position: absolute;
}
.hero{
	margin: 0;
	padding: 0;	
}
#manifeste-page .hero video{
	border-width: 0px 30px 30px 30px;
	border-color: #000;
	border-style: solid;
	box-sizing: border-box;
}
/* nudge hero below header */
#opticaldisk-page .hero, #sora-page .hero, #pinson-page .hero, #contacts-page .hero, #manifeste-page .hero, #hum-page .hero, #fractus-page .hero{
	margin-top: 60px; /* same as header */
}
.project-page #descriptif{
	position: relative; /* to enclose absolute header */
}
.text-col-large{
	flex: 3;
}
.project-page .description p:first-of-type{
	margin-top: 0; /* remove margin on first paragraph for projects page */
}
.description{
	margin-left: 20px;
}
.project-page .specs p{
	margin: 2px 0;
}
.project-page .specs ul{
	margin: 2px 0;
}
.project-page .specs ul li{
	margin: 2px 0;
}
.project-page .specs *{
	padding-right: 10px;
}
.project-page .specs{
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	flex: 1;
}
.specs .bottom-info{
	vertical-align: bottom;
}
.content-wrapper{
	display: flex;
	flex-direction: column;
	justify-content: space-between;
/*	max-height: 100vh; */
/*	max-height: calc(100 * var(--vh)); */
	
	/* SET HEIGHT IN MEDIA QUERIES */
	
/*	max-height: 100vh;  */
}
.content-wrapper::-webkit-scrollbar {
	display: none;
}
.content{
	flex: 1;
	display: flex;
}
.text-box{
	flex: 1;
}
.home-redirect{
	font-size: 20pt;
	background-color: #000;
	height: 60px; /* same as header */
	line-height: 60px;
	width: 300px;
	position: absolute;
	top: 0;
	left: 0;
	display: none;
	/* animation */
	padding-left: 1.5em;
	animation-name: bounce-horizontal;
  	animation-duration: 2s;
	animation-iteration-count: infinite; 
	mix-blend-mode: normal;
}

@keyframes bounce-horizontal {
  0%   {padding-left: 1.5em;}
  50%  {padding-left: 20px;}
  100%  {padding-left: 1.5em;}
}
.project-page .description a{
	text-transform: uppercase;
}
video{
	width: 100%;
}
.cv {
	text-transform: uppercase;
}
.lang-btn{
	text-transform: uppercase;
	
}
.lang-btn span, .lang-btn a{
	display: inline !important;	
/*	mix-blend-mode: overlay; */
}
.top-row{
	display: flex;
	justify-content: space-between;
}



/* -------- MOBILE/RESPONSIVE RELATED STYLES --------- */

.col-wrapper{
	flex-direction: column;
}

/* ----------- TINY SCREENS ---------- */
@media only screen and (max-width: 600px){
		/* text sizes */
	p, a, h3, h4, li, p.body{
	font-size: 12pt;
}
	.project-page .specs p{
		margin-bottom: 3px;
	}
	h2, .col-title{
	font-size: 18px;
}
	.text-box, .tablink .col-title{
		padding: 22.5px 30px !important;
	}
	/* stacking vertical(except for projects section on index page) */
	.row, .text-box .row{
		display: block;
		margin-bottom: 0px;
	}
	li{
		margin-bottom: 10px;
	}
	h2{
		margin-bottom: 10px;
	}
	.description{
		margin-left: 0px;
	}
	#descriptif .row{
		margin-bottom: 14px;
	}
	#descriptif .text-col1{
		margin-bottom: 20px;
	}
	/*
	iframe{
		position: absolute;
		top: 0px;
	}
	#projectDetails .content{
		margin-top: 56.3vw;
	}
	*/
	.project-page #logo{
		display: none;
	}
	#logo2{
		position: absolute;
		z-index: 20;
		bottom: 6%;
		width: 88px;
		right: 8%;
		mix-blend-mode: overlay !important;
	}
}

/* ----------------- TABLET (mostly text sizes) */
@media only screen and (min-width: 600px) and (max-width: 960px){
	
		/* text sizes */
	p, a, h3, h4, li, p.body{
	font-size: 17pt;
}
	.project-page .specs p{
		margin-bottom: 3px;
	}
	h2, .col-title{
	font-size: 1.6em;
	}
	.text-box, .tablink .col-title{
		padding: 42px 30px !important;
	}
	/*
	#contacts-page a#logo{
		top: 40%;
	}
	*/
	
	/* bottom corner peeking logo for tablet */
	/*
	#logo2{
		position: absolute;
		bottom: 0px;
		margin-bottom: -3%;
		width: 18%;
		right: 15px;
	}
	*/
	#logo{
		width: 18%;
	}
	.project-page #logo{
		display: none;
	}
	#logo2{
		position: absolute;
		bottom: 6%;
		width: 18%;
		right: 8%;
	}
}
	

/* ------ MOBILE MEDIA QUERY --------*/
@media only screen and (max-width: 960px) {

	.tablink .col-title{
		visibility: visible;
		line-height: 20px;
		text-align: left;
		vertical-align: top;
	}
	.tablink{
	/*	height: 33.33vh; */
	/*	min-height: calc(33.33 * var(--vh)); */
		height: calc(var(--vh,1vh) * 33.33);
		outline: none;
		border: none;
		padding: 0px;
		margin: 0px;
		cursor: pointer;
		align-items: flex-start;
		vertical-align: top;
		display: flex;
		overflow-y: hidden;
	}
	.tablink:first-of-type{
		background-color: #C88318;
	}
	.tablink:nth-of-type(2){
		background-color: #FBD737;
	}
	.tablink:nth-of-type(3){
		background-color: #AE76FB; /* light purple */
	}
	.tabcontent{
		min-height: 0 !important;
		display: none;
	}
	.col{
		min-height: 0; /* problematic for mobile? - set height */
	/*	overflow-y: hidden; */
		overflow-y: scroll;
		/* initially, you wont be able to scroll within sections unless you've clicked on them (active) */
	}
	.col [class="content-wrapper"] .text-box{
		visibility: visible;
		padding-bottom: 160px !important; /* added important to solve mobile issue */
	}
	#projects .text-box{
		padding-bottom: 0px;
	}
	.contact-section{
		padding-bottom: 100px;
	}
	.col [class="content-wrapper"] img{
		display: block;
	}
	
	/* ---- project pages ---- */
	header{
		display: none;
	}
	#opticaldisk-page .hero, #sora-page .hero, #pinson-page .hero, #contacts-page .hero, #hum-page .hero, #fractus-page .hero{
		margin-top: 0px; /* same as header */
	}
	iframe{
		height: 56.3vw; /* perfect relative height to screen width for no borders wow */
	}
	.project-page .col{
		z-index: 20;
	}
	.project-page .tablink{
		height: 60px;
		align-items: flex-start;
		vertical-align: top;
		display: flex;
		overflow-y: hidden;
		z-index: 20;
		position: relative;
	}
	#descriptif .tabcontent{
		display: block;
	}
	#bdm-page .tablink{
		background-color: #ff69eb;
	}
	#edend-page #headerTablink{
	/*	background-color: #544FF9; */
	}
	#edend-page .tablink{
		background-color: #EAE7BF;
	}
	#fractus-page .tablink{
		background-color: #E2E0D3;
	}
	#parlafenetre-page #headerTablink{
	/*	background-color: #544FF9; */
	}
	#parlafenetre-page .tablink{
		background-color: #B7DED5;
	}
	#pinson-page .tablink{
		background-color: #1BF1DC;
	}
	#opticaldisk-page .tablink{
		background-color: #EE402A;
	}
	#contacts-page .tablink{
		background-color: #4DFF76;
	}
	#hum-page .tablink{
		background-color: #FEC57E;
	}
	#sora-page .tablink{
		background-color: #b8d8ba;
	}
	#manifeste-page .tablink{
	background-color: #EA600C;
	}
	#manifeste-page .hero video{
	border-width: 20px;
	}
	#manifeste-page .hero{
		margin: 0px;
	}
	.tablink#headerTablink{
	 	background-color: #000 !important; 
		display: none;
	}
	.project-page #descriptif .tabcontent{
		height: calc(calc(var(--vh, 1vh) * 100) - 60px);
	}
	.col-2w{
		flex:none;
	}
	#projects .text-box:first-of-type{
		padding-bottom: 40px !important; /* adjust spacing */
	}
	.text-box .img-box, .instagram-media{
		width: 75%;
	}
	.content-wrapper{
		overflow-y: scroll;
		-webkit-overflow-scrolling: touch;
	}
	.col:hover[class="content-wrapper"] img{
		display: none;
	}
	.preview{
		display: none !important;
	}
	#index-page #logo2{
		display: none;
	}

}
/* ------ DESKTOP MEDIA QUERY --------*/
@media only screen and (min-width: 960px) {
	#index-page .tablink, .project-page .tablink{
		display: none;
	}
	.col-wrapper{
		flex-direction: row;
	}
	.panel{
/*		min-height:100vh !important; */
/*		min-height: calc(100 * var(--vh)); */
		min-height: calc(var(--vh,1vh) * 100);
		min-height: -webkit-fill-available;
	}
	.panel{
		visibility: visible;
	}
	/* hover, active (for touch screen compatibility)  */
	.col:hover [class="content-wrapper"] .text-box, .col:active [class="content-wrapper"] .text-box{
		visibility: visible;
	}
	.col:hover [class="content-wrapper"] img, .col:active [class="content-wrapper"] img{
		display: block;
	}
	header:hover [class="home-redirect"]{
		display: block;
	}
	main{
/*	max-height: 100vh;*/
/*	max-height: calc(100 * var(--vh)); */
	max-height: calc(var(--vh,1vh) * 100);
	overflow-y: hidden;
}
	#headerTablink{
		display: block !important;
	}
	#projectDetails{
		overflow-y: scroll;  /* fix content background ending at 
		vertical height */
		-webkit-overflow-scrolling: touch;
		box-sizing: content-box; /* fix height */
	}
	#projectDetails .content{
		padding-bottom: 50px; /* fix height */
	}
	#about, #experience, #projects-contact{
		overflow-y: scroll;  /* fix content background ending at 
		vertical height */
		-webkit-overflow-scrolling: touch;
	}
	.project-page #logo{
		top: 52%;
		right: 200px;
		width: 100px;
	}
	.project-page #logo2{
		display: none;
	}
	.content-wrapper{
		height: calc(var(--vh,1vh) * 100);
	}
	
}
/* --------- LARGE SCREENS ----------- */
@media only screen and (min-width: 1500px) {
		/* text sizes */
	p, a, h3, h4, li, p.body{
	font-size: 1.1em;
}
	.project-page .specs p{
		margin-bottom: 3px;
	}
	h2, .col-title{
	font-size: 1.2em;
	}
	.text-col-large{
	flex: 1;
	}
	
	.text-box .img-box{
	width: calc(100% + 1.5em);
	margin-left: 0px;
	}
}

/* --------- HUGE SCREENS ----------- */
@media only screen and (min-width: 1800px) {
	#projects .row{
		padding: 30px 0px !important;
	}
	#projects-contact .contact-section {
		padding-bottom: 250px !important;
	}
}

/* -------- DEVICES WHICH ALLOW HOVER -------- */
@media (hover: hover){
	.col:hover [class="content-wrapper"] .text-box{
		visibility: visible;
	}
	a:hover{
	color: #fff;
	}
	.styledpic img:hover{
		filter: none;
		opacity: 1;
		transition: all 0.5s ease;
		transform:skewY(-3deg);
	}
	#projects .row:hover{
		color: white;
	}
	/* hover and display preview images */
	
	#projects #fractus:hover [class="preview"]{
		display: block;
	}
	#projects #edend:hover [class="preview"]{
		display: block;
	}
	#projects #pinson:hover [class="preview"]{
		display: block;
	}
	#projects #optical-disk:hover [class="preview"]{
		display: block;
	}
	#projects #sora:hover [class="preview"]{
		display: block;
	}
	#projects #hum:hover [class="preview"]{
		display: block;
	}
	#projects #contacts:hover [class="preview"]{
		display: block;
	}
	#projects #manifeste:hover [class="preview"]{
		display: block;
	}
	#projects #bdm:hover [class="preview"]{
		display: block;
	}
	#projects #parlafenetre:hover [class="preview"]{
		display: block;
	}
	#projects .row:hover{
	color: white;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	}
	#logo:hover{
	mix-blend-mode: normal;
	transform: rotate3d(-2, -7, -4, 30deg);
	width: 130px;
	transition: all 0.5s ease;
	}
	.project-page #logo:hover{
		/* cancel out hover state effects */
		transform: rotate3d(-2, -7, -4, 30deg);
		mix-blend-mode: overlay;
		width: 100px;/* same */
	}
	.project-page #logo:active{
		mix-blend-mode: normal;
		transform: rotate3d(-2, -7, -4, 30deg);
		transition: all 0.5s ease;
	}
	#logo2{
		transition: all 0.5s ease;
	}
	#logo2:hover{
		transition: all 0.5s ease;
		transform: rotate3d(-2, -7, -4, 30deg);
	}
}