@font-face {

   font-family: 'Walsheim Regular';
	src: url('../resources/Fonts/GT-Walsheim-Pro-Regular.woff') format('woff');
	font-weight: normal;
	font-style: normal;

}

@font-face {

   font-family: 'Walsheim Medium';
	src: url('../resources/Fonts/GT-Walsheim-Pro-Medium.woff') format('woff');
	font-weight: normal;
	font-style: normal;

}

*::selection {

  background: #E0E0E0; /* WebKit/Blink Browsers */

}

*::-moz-selection {

  background: #E0E0E0; /* Gecko Browsers */

}

* {

	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	-o-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;         /* Opera/IE 8+ */

	margin: 0;
	padding: 0;

	font-family: Walsheim Regular;
	font-size: 25px;
	font-weight: normal;

	text-decoration: none;
	color: black;

}

html, body {
	
	width: 100vw;
	overflow-x: hidden;

	background: #FCFCFC;

}

.underline {

	opacity: 0;
	width: 100%;
	height: 2px;
	background: black;

	-webkit-transition: opacity 0.3s ease-in-out;
	-moz-transition: opacity 0.3s ease-in-out;
	-o-transition: opacity 0.3s ease-in-out;
	transition: opacity 0.3s ease-in-out;

}

a:hover .underline{

	opacity: 1;

}

nav {

	position: relative;
	top: 0;
	left: 50%;

	-webkit-transform: translate3d(-50%, 0, 0);
	-moz-transform: translate3d(-50%, 0, 0);
	-o-transform: translate3d(-50%, 0, 0);
	transform: translate3d(-50%, 0, 0);

	max-width: 1200px;
	width: 100%;

}

nav #title {

	display: inline-block;
	padding: 21px 15px 10px 15px;

}

nav #sections {

	display: inline-block;
	float: right;
	padding: 21px 15px 10px 15px;

}

nav #sections .section {

	display: inline-block;

}

nav #sections .section:not(:first-child) {

	margin-left: 10px;

}

#wrapper {

	max-width: 1200px;
	padding-left: 10px;
	padding-right: 10px;
	margin-bottom: 0px;

	top: 0;
	margin: auto;
	/*-webkit-transform: translate3d(-50%, 0, 0);
	-moz-transform: translate3d(-50%, 0, 0);
	-o-transform: translate3d(-50%, 0, 0);
	transform: translate3d(-50%, 0, 0);*/

}

#wrapper #projects {
	/*display: flex;
	flex-direction: column;
	flex-wrap: wrap;*/
}

#wrapper #projects .project {

	padding: 5px;

}

#wrapper #projects .project .image-project {

	width: 100%;
	height: 100%;

	background-size: cover;
	background-position: 50% 50%;

	cursor: pointer;
	
}

#wrapper #projects .project .image-project:hover .hover-title {

	opacity: 1;

}

#wrapper #projects .project .image-project .hover-title {
	
	text-align: center;
	position: relative;

	width: 100%;
	height: 100%;
	background: #E0E0E0;

	opacity: 0;

	-webkit-transition: opacity 0.3s ease-in-out;
	-moz-transition: opacity 0.3s ease-in-out;
	-o-transition: opacity 0.3s ease-in-out;
	transition: opacity 0.3s ease-in-out;

}

#wrapper #projects .project .image-project .hover-title h3 {

	position: absolute;
	top: 50%;
	left: 50%;

	-webkit-transform: translate3d(-50%, -50%, 0);
	-moz-transform: translate3d(-50%, -50%, 0);
	-o-transform: translate3d(-50%, -50%, 0);
	transform: translate3d(-50%, -50%, 0);

	color: white;

}

#content-wrapper {

	max-width: 1200px;
	padding-left: 10px;
	padding-right: 10px;
	margin-bottom: 10px;
	top: 0;
	margin: auto;

}

#content-wrapper .project-title{

	padding: 15px 15px 15px 5px;

}

#content-wrapper .date{

	padding: 15px 15px 15px 5px;	

}

#content-wrapper .description{

	padding: 15px 15px 15px 5px;

}

#content-wrapper .collaborators{

	padding: 15px 15px 15px 5px;

}

#content-wrapper .project-link{

	display: inline-block;
	padding: 0px 15px 0px 5px;

}

#content-wrapper .project-link:first-of-type {
	padding: 15px 15px 0px 5px;	
}

#content-wrapper .project-link:last-of-type {
	padding: 0px 15px 15px 5px;	
}

.grid-sizer-project-images {

	width: 50%;

}

#content-wrapper .project-images{

	width: 100%;
	padding-top: 15px;
	/*padding: 15px 15px 15px 5px;*/

}

#content-wrapper .project-images .image-container {

	padding: 5px;
	cursor: pointer;

}

#content-wrapper .project-images .image-container .image{

	width: 100%;
	height: 100%;

	background-size: cover;
	background-position: 50% 50%;
	background-repeat: no-repeat;

	cursor: pointer;

}

#content-wrapper .project-images .image-container .zoom-image-container{

	position: fixed;
	left: 0;
	top: 0;
	width: 100vw;
	height: 100vh;
	background: rgba(252, 252, 252, 1);
	z-index: 100;

	opacity: 0;

	-webkit-transition: opacity 0.3s ease-in-out;
	-moz-transition: opacity 0.3s ease-in-out;
	-o-transition: opacity 0.3s ease-in-out;
	transition: opacity 0.3s ease-in-out;

	pointer-events: none;

}

#content-wrapper .project-images .image-container .zoom-image-container .zoom-image{

	width: 80%;
	height: 80%;

	position: absolute;

	top: 50%;
	left: 50%;
	-webkit-transform: translate3d(-50%, -50%, 0);
	-moz-transform: translate3d(-50%, -50%, 0);
	-o-transform: translate3d(-50%, -50%, 0);
	transform: translate3d(-50%, -50%, 0);

	background-size: contain;
	background-position: 50% 50%;
	background-repeat: no-repeat;

}

.end-images {
	
	float: left;
	bottom: 0;
	padding: 0 !important;	
	height: 12px;
	width: 100%;

}

#content-contact {

	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate3d(-50%, -50%, 0);
	-moz-transform: translate3d(-50%, -50%, 0);
	-o-transform: translate3d(-50%, -50%, 0);
	transform: translate3d(-50%, -50%, 0);

	text-align: center;

}

#mail:hover .underline{

	opacity: 1;

}

#cv {

	margin-top: 10px;
	display: inline-block;

}

#cv:hover .underline{

	opacity: 1;

}

/*PROJECT*/

main.project {
	max-width: 1200px;
	margin: auto;
	padding: 0 15px;
}

/*EXPERIMENTS*/

.experiments .experiment .content {

	width: calc(100% - 10px);
	height: calc(100% - 10px);
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate3d(-50%, -50%, 0);
	-moz-transform: translate3d(-50%, -50%, 0);
	-o-transform: translate3d(-50%, -50%, 0);
	transform: translate3d(-50%, -50%, 0);
	background: #FCFCFC;
	background: #E0E0E0;

}

.experiments .experiment .content .hover-panel {
	
	width: 100%;
	height: 100%;
	opacity: 0;
	background: white;

	-webkit-transition: opacity 0.3s ease-in-out;
	-moz-transition: opacity 0.3s ease-in-out;
	-o-transition: opacity 0.3s ease-in-out;
	transition: opacity 0.3s ease-in-out;

}

.experiments .experiment .content .hover-panel a {
	
	position: relative;
	float: left;
	width: 50%;
	height: 100%;

	-webkit-transition: background 0.3s ease-in-out;
	-moz-transition: background 0.3s ease-in-out;
	-o-transition: background 0.3s ease-in-out;
	transition: background 0.3s ease-in-out;

}

.experiments .experiment .content .hover-panel a h5 {
	
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate3d(-50%, -50%, 0);
	-moz-transform: translate3d(-50%, -50%, 0);
	-o-transform: translate3d(-50%, -50%, 0);
	transform: translate3d(-50%, -50%, 0);

}

.experiments .experiment .content .hover-panel a:hover {

	background: red;

}

.experiments .experiment .content:hover .hover-panel {

	opacity: 1;

}

.experiments .experiment h2 {

	color: white;
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate3d(-50%, -50%, 0);
	-moz-transform: translate3d(-50%, -50%, 0);
	-o-transform: translate3d(-50%, -50%, 0);
	transform: translate3d(-50%, -50%, 0);

}


/*MEDIA QUERIES*/

.gutter-sizer { width: 0.0%; }

@media (min-width: 900px) { 

	.grid-sizer {

		width: 33.333333%;

	} 

	.width-1 {

		width: 33.3333333%;

	}

	.width-2 {

		width: 66.666666%;

	}

	.width-3 {

		width: 100%;

	}

	.height-1 {

		height: 300px;

	}

	.height-2 {

		height: 600px;

	}

	.width-content {

		width: 50%;

	}

	.width-content-2 {

		width: 100%;

	}

	.height-content {

		height: 400px;

	}

	.height-content-2 {

		height: 800px;

	}

}

@media (max-width: 900px) { 

	.grid-sizer {

		width: 50%;

	} 

	.width-1 {

		width: 50%;

	}

	.width-2 {

		width: 100%;

	}

	.width-3 {

		width: 100%;

	}

	.height-1 {

		height: 300px;

	}

	.height-2 {

		height: 600px;

	}

	.width-content {

		width: 100%;

	}

	.width-content-2 {

		width: 100%;

	}

	.height-content {

		height: 400px;

	}

	.height-content-2 {

		height: 800px;

	}

}

@media (max-width: 650px) { 

	.width-1 {

		width: 100%;

	}

	.width-2 {

		width: 100%;

	}

	.width-3 {

		width: 100%;

	}

	.height-1 {

		height: 400px;

	}

	.height-2 {

		height: 400px;

	}

	.width-content {

		width: 100%;

	}

	.width-content-2 {

		width: 100%;

	}

	.height-content {

		height: 400px;

	}

	.height-content-2 {

		height: 400px;

	}

}

@media (max-width: 500px) { 

	* {

		font-size: 22px;

	}

	.width-1 {

		width: 100%;

	}

	.width-2 {

		width: 100%;

	}

	.width-3 {

		width: 100%;

	}

	.height-1 {

		height: 300px;

	}

	.height-2 {

		height: 300px;

	}

	.width-content {

		width: 100%;

	}

	.width-content-2 {

		width: 100%;

	}

	.height-content {

		height: 300px;

	}

	.height-content-2 {

		height: 300px;

	}

}