@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@200;400&display=swap');
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css');
@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@300;400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@100;300;400;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@100;300;400;700;900&family=Rubik:wght@300;400;500;600;700;800;900&display=swap');


/***** google icons *****/






:root{
  --mainColor:#fff;
  --mainFontColor:#353535;
}

::-moz-selection { /* Code for Firefox */
  color: white;
  background: var(--mainFontColor);
}

::selection {
  color: white;
  background: var(--mainFontColor);
}

html, body{
	height: 100%;
	width: 100%;
	margin: 0;
	font-family: 'Rubik', sans-serif;
	font-weight: 300;
	scroll-behavior: smooth;
	color: var(--mainFontColor);
	background-color: var(--mainColor);
}

div, img{
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

h1{
	font-weight: 400;
	margin: 0;
}

p{
	font-size: ;
}

a, a:hover, a:visited, a:active {
  color: inherit;
  text-decoration: none;
}

img{
	width: 100%;
}


.center {
  display: flex;
  justify-content: center;
  align-items: center;
}
.centerItem {
	display: block;
	margin-left: auto;
	margin-right: auto;
}
.XYcenter{
	position: absolute;
	text-align: left;
  top: 50%;
	left: 50%;
	transform: translate(-50%, -50%); 
	font-size: 2em;
}
.Xcenter{
	position: absolute;
	text-align: left;
	left: 50%;
	transform: translate(-50%);
}
.pdfLink{
	margin-top: 50px;
	font-size: 1.2em;

}





/******** NAVIGATION HEADER ********/

#topBar{
	display:inline-block;
	position:fixed;
	width: 100%;
	height: 110px;
	top:0;
	font-size: 4vw;
	background-color: rgba(0, 0, 0, 0);
	transition: color 0.2s ease;
	z-index: 10;
	padding: 5px 20px;
	transition: all 0.3s;
	color: var(--mainFontColor);
}

.navCheck{
	display: flex;
	float: right;
	height: 100%;
}
.navIcon {
  width: 60px;
  overflow: hidden;
  margin: auto;
}
.navIcon:after, 
.navIcon:before, 
.navIcon div {
  background-color: var(--mainFontColor);
  border-radius: ;
  content: '';
  display: block;
  height: 3px;
  width: 100%;
  transition: all .2s ease-in-out;
  transform-origin: right;
}
.navIcon div {
	  margin: 15px 0;
}

input[type=checkbox]:checked ~ #topBar .navCheck .navIcon:before{
	transform: rotate(-45deg);
	background-color: var(--mainFontColor);
}
input[type=checkbox]:checked ~ #topBar .navCheck .navIcon:after{
	transform: rotate(45deg);
	background-color: var(--mainFontColor);
}
input[type=checkbox]:checked ~ #topBar .navCheck .navIcon div{ /*middle bar of burger scale to 0*/
  	transform: scale(0);
}
input[type=checkbox]:checked ~ #topBar{
	color: var(--mainFontColor);
}
input[type=checkbox]:checked ~ #top, :checked ~#content{
	transition: 0.2s ease;
	/*filter: blur(10px);
  	-webkit-filter: blur(10px);
    -moz-filter: blur(10px);
    -o-filter: blur(10px);
    -ms-filter: blur(10px);*/
}
.navIcon:hover {
	/*transform:scale(1.05);
	transition: ease-out .1s;*/
}

.topBarTitle{
	display: flex;
	float: left;
	font-size: 1.5em;
	height: 100%;
}
.topBarTitle > div {
	margin: auto;
}

.topBarTitle p{
	margin: 0;
}

.icons{
	position:absolute;
	bottom:0;
	left:0;
	margin:60px;
	font-size: 1em;
}
.icons a{
	padding: 10px;
}
.navLinks{
	position:fixed;
	width:100%;
	top:0;
	background-color: var(--mainColor);
	text-align: center;
	font-size: 6vw;
	/*font-family: 'Lato', sans-serif;*/
	font-weight: 200;
	transition: opacity 0.2s ease;
	z-index: 9;
}
.navLinks a {
	opacity:1;
	color:var(--mainFontColor);
	list-style-type: none;
	text-decoration: none;
}
.navLinks a:hover {
	/*color: #fff;*/
	transition: 0.2s ease;
	text-decoration: underline;
}
.navLinks ul li a{
	display: block;
	padding:20px;
}
.navLinks ul{
	position:relative;
	display: block;
  	top: 50%;
  	transform: translateY(-100%);
  	padding:0;
  	margin:0;
}

input[type=checkbox]{
	display: none;
}

input[type=checkbox] ~ .navLinks{
	height: 0;
	opacity: 0;
}

input[type=checkbox]:checked ~ .navLinks{
	height: 100%;
	opacity:1;
	display: inline-block;
}

input[type=checkbox]:checked ~ .navLinks ul{
	transform: translateY(-50%);
}

/******************************/





/******** SITE CONTENT , ARTICLE **********/

#welcome-div{
	width: 100%;
	height: calc(100% - 570px);
	background-color: #fff;
}
.welcome-title{
	margin: auto;
	text-align: center;
	font-size: 2.5em;
	position: relative;
	top: 45%;
	width: 85%;
	text-align: center;
	transform: translateY(-50%);
}

/* PROJET LIST */
#project-list{
	width: 100%;
	display: grid;
	grid-template-columns: 1fr;
	grid-gap: 20px;
	padding: 20px;
	padding-top: 0;
	grid-auto-rows: 300px;
}
#project-list img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.project-list-item {
 	overflow: hidden;
 	position: relative;
 	border-radius: 20px;
}
.project-list-item img{
	transition: all 0.3s;
}
.project-list-text{
	/*background-color: #EF5D60;*/
	position: absolute;
	width: 90%;
	font-size: 4em;
	text-align: center;
	left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  margin: auto;
  opacity: 0;
  transition: all 0.3s;
}
.project-list-item:hover img{
	opacity: .3;
}
.project-list-item:hover .project-list-text{
	opacity: 1;
}


#first-page{
  background: var(--main_project_img);
  background-position:70% bottom;
  width: 100%;
  height: 100%;
  background-size:cover;
  background-repeat: no-repeat;
}
#first-page > div{
	text-align: justify;
	position: absolute;
	font-size: 2.5em;
	width: 80%;
	top: 20%;
	left: 50%;
  top: 10%;
  transform: translate(-50%,0%);
	}

.title{
	font-size: 4rem;
}

#project-content{
	width: 100%;
	margin: auto;
	padding: 50px 10px;
	text-align: justify;
	color: #151515;
	font-size: 1rem;
}

video{
	max-width: 100%;
}

#project-content p {
	font-size: 1rem;
	margin: 40px 20px;
}
.content-text{
	font-size: 1rem;
	padding: 30px 60px;
}
.fullWidthParagraph p{
	margin: 40px 20px !important;
}

.projectGrid2{
	width: 100%;
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-gap: 15px;
	padding: 0 0 60px 0;
}
.projectGrid2-1{
	width: 100%;
	display: grid;
	grid-template-columns:1fr;
	grid-gap: 15px;
	padding: 0 0 60px 0;
}
.projectGrid3-1{
	width: 100%;
	display: grid;
	grid-template-columns:1fr;
	grid-gap: 15px;
	padding: 0px 20px 0 20px;
}
.projectGrid2-1 div{
	margin: auto;
}
.no-padding{
	padding: unset;
}
.no-margin{
	margin: 0;
}
.projectGrid3{
	width: 100%;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-gap: 15px;
}

.projectGrid4{
	width: 100%;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	grid-gap: 15px;
}

.image-hover{
	position: relative;
	width: 100%;
}

.image-hover img.image-top {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  object-fit: contain;
  opacity: 0;
  transition: opacity 1.5s;
}
.image-hover:hover img.image-top {
  opacity: 1;
}

ol{
	text-align: left;
}

#reference a:hover{
	color: var(--mainFontColor);
}



	.explode-animation{
		width: 100%;
		top: 0;
	}
	.explode-text{
		position: absolute;
		bottom: 10%;
		padding: 30px 60px;
		font-size: 2rem;
	}


.contact div{
	margin: 20px 30px;
	font-size: 3rem;

}

/****************************/





/********* FOOTER ***********/
footer {
	height: 90px;
	font-size: 2em;
}
.no_scroll_footer{
	width: 100%;
	position: absolute;
	bottom: 0;
}

/****************************/





/*@media only screen and (max-width: 1300px){

	#welcome-div{
		height: calc(100% - 420px);
	}
	#project-list{
		grid-template-columns: 1fr 1fr;
		grid-auto-rows: 350px;
	}
	#project-content p {
		font-size: 1.4em;
		margin: 20px 60px;
	}

}

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

	p{
		font-size: 2em;
	}

	#topBar{
		height: 100px;
	}
	.topBarTitle{
		font-size: 1.5em;
	}

	.navIcon {
	  width: 60px;
	}
	.navIcon:after, 
	.navIcon:before, 
	.navIcon div {
	  height: 4px;
	}
	.navIcon div {
	  margin: 15px 0;
	}

	#project-list{
		grid-template-columns: 1fr;
		grid-gap: 20px;
		padding: 20px;
		grid-auto-rows: 500px;
		
	}


	.full_size_div{
    height: 100%;
    background-size:cover;
    background-attachment: fixed;
    background-repeat: no-repeat;
  }
	.main_project_description{
		text-align: justify;
		width: 80%;
		position: absolute;
		left: 50%;
    top: 10%;
    transform: translate(-50%,0%);
	}
	.main_project_description > h3{
		font-size: 2.5em;
	}
	.main_project_description > p{
		font-size: 2em;
		text-align: justify;
	}

	#project-content{
		width: 100%;
		padding: 20px;
		text-align: justify;
	}
	#project-content p{
		font-size: .8em;
		margin: 50px 50px;
	}
	.projectGrid2-1{
		width: 100%;
		display: grid;
		grid-template-columns:1fr;
		grid-gap: 5px;
		padding: 0 0 60px 0;
	}

	footer > p {
		font-size: 1.5em;
		margin: 10px;
	}

}*/

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {


}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {


}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
	
	#welcome-div{
		height: calc(100% - 660px);
	}

	#project-list{
		grid-template-columns: 1fr;
		grid-auto-rows: 600px;
	}

	.topBarTitle{
		font-size: 1.5em;
	}

	#first-page{
		background-position:70% bottom;
	}
	#first-page > div{
		width: 80%;
		top: 20%;
		left: 50%;
    top: 20%;
    transform: translate(-50%,0%);
	}
}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
	#topBar{
		height: 70px;
		padding: 20px 80px;
	}
	.navIcon {
  	width: 40px;
	}
	.topBarTitle{
		font-size: 0.5em;
	}
	.navIcon div {
	  margin: 10.5px 0;
	}
	.navLinks{
		font-size: 5vh;
	}
	.icons{
		margin:60px;
		font-size: 0.5em;
	}

	#welcome-div{
		height: calc(100% - 560px);
	}
	.welcome-title{
		font-size: 1.7em;
		width: 60%;
	}
	#project-list{
		grid-template-columns: 1fr 1fr;
		grid-auto-rows: 500px;
	}
	.project-list-item {
	 	overflow: hidden;
	 	position: relative;
	 	border-radius: 10px;
	}
	.project-list-text{
		font-size: 3em;
	}

	#first-page{
		background-position:right bottom;
	}
	#first-page > div{
		font-size: 1.5em;
		width: 30%;
		transform: none;
		top: 25%;
		left: 10%;
	}

	#project-content{
		font-size: ;
	}

	.content-text{
		font-size: 1rem;
		padding: 20px 30px;
	}

	.projectGrid2-1{
		grid-template-columns: 1fr 1fr;
	}
	.projectGrid3-1 {
		grid-template-columns: 1fr 1fr 1fr;	
	}



	.explode-animation{
		height: 100%;
		width: auto;
		position: absolute;
		transform: translateX(-100%);		
		left: 50%;
	}
	.explode-text{
		position: absolute;
		top: 10%;
		left: 50%;
		margin: 60px ;
		font-size: 2rem;
	}

}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {

	#welcome-div{
		height: calc(100% - 360px);
	}
	.welcome-title{
		font-size: 1.6em;
		width: 60%;
	}
	#project-list{
		grid-template-columns: 1fr 1fr;
		grid-auto-rows: 500px;	
		padding: 80px;
		padding-top: 0;
		margin: auto;
		width: 1200px;
	}

	#project-content{
		width: 80%;
		font-size: ;
	}
	#project-content p {
		margin: 40px 80px;
	}
	.projectGrid2-1 p {
		margin: 40px 20px !important;
	}
	.projectGrid3-1 p {
		margin: 40px 20px !important;
	}

	.contact div{
		margin: 20px 30px;
		font-size: 1.5rem;
	}

	footer{
		font-size: 1.5em;
	}

}

@media only screen and (min-width: 1600px) {
	#topBar{
		height: 90px;
	}

	#welcome-div{
		height: calc(100% - 540px);
	}
	.welcome-title{
		font-size: 2.4em;
		width: 60%;
	}
	#project-list{
		grid-template-columns: 1fr 1fr;
		grid-auto-rows: 500px;
		margin: auto;
		width: 1600px;
	}
	.project-list-text{
		font-size: 4em;
	}

	#first-page > div{
	}

	#project-content{
		width: 60%;
		font-size: ;
	}
	#project-content p {
		margin: 40px 130px;
	}
}

@media only screen and (max-height: 700px) {
	#welcome-div{
		height: 100% !important;
	}
}

}