/* fonts */

@font-face {
    font-family: 'museo_sans700';
    src: url('../fonts/exljbris_-_museosans-700-webfont.woff2') format('woff2'),
         url('../fonts/exljbris_-_museosans-700-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'museo_sans900';
    src: url('../fonts/exljbris_-_museosans-900-webfont.woff2') format('woff2'),
         url('../fonts/exljbris_-_museosans-900-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'museo300';
    src: url('../fonts/museo300-regular-webfont.woff2') format('woff2'),
         url('../fonts/museo300-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

/* base */

body {
	background: #1A1E24;
	box-sizing: border-box;
	color: #fff;
	font-family: 'museo300', Verdana, sans-serif;
	font-feature-settings: "kern";
	font-size: 16px;
	font-weight: normal;
	line-height: 26px;
	margin: 0;
}

	@media (min-width: 600px) {
		body {
			font-size: 18px;
			line-height: 30px;
		}
	}

	@media (min-width: 1366px) {
		body {
			font-size: 20px;
			line-height: 32px;
		}
	}


h1, h2, h3, h4, h5, h6 {
	font-weight: normal;
	margin: 0;
}

h1 {
	font-family: 'museo_sans900', Verdana, sans-serif;
	font-size: 30px;
	letter-spacing: -1px;
	line-height: 32px;
	text-transform: uppercase;
}

	@media (min-width: 600px) {
		h1 {
			font-size: 60px;
			letter-spacing: -2px;
			line-height: 62px;
		}
	}


	@media (min-width: 1366px) {
		h1 {
			font-size: 80px;
			letter-spacing: -3px;
			line-height: 82px;
		}
	}

h2 {
	color: #9B9B9B;
	font-family: 'museo300', Verdana, sans-serif;
	font-size: 16px;
	line-height: 19px;
}

	@media (min-width: 600px) {
		h2 {
			font-size: 30px;
			line-height: 36px;
		}
	}

	@media (min-width: 1366px) {
		h2 {
			font-size: 40px;
			line-height: 46px;
		}
	}

h3 {
	font-family: 'museo_sans700', Verdana, sans-serif;
	font-size: 22px;
	letter-spacing: -0.4px;
	line-height: 24px;
	text-transform: uppercase;
}

	@media (min-width: 600px) {
		h3 {
			font-size: 28px;
			letter-spacing: -0.5px;
			line-height: 30px;
		}
	}

	@media (min-width: 1366px) {
		h3 {
			font-size: 30px;
			letter-spacing: -0.6px;
			line-height: 32px;
		}
	}

h4 {
	color: #9B9B9B;
	font-family: 'museo_sans700', Verdana, sans-serif;
	font-size: 22px;
	letter-spacing: -0.4px;
	line-height: 24px;
	text-transform: uppercase;
}

	@media (min-width: 600px) {
		h4 {
			font-size: 28px;
			letter-spacing: -0.5px;
			line-height: 30px;
		}
	}

	@media (min-width: 1366px) {
		h4 {
			font-size: 30px;
			letter-spacing: -0.6px;
			line-height: 32px;
		}
	}

h5 {
	color: #9B9B9B;
	font-family: 'museo300', Verdana, sans-serif;
	font-size: 16px;
	line-height: 19px;
}

	@media (min-width: 600px) {
		h5 {
			font-size: 18px;
			line-height: 21px;
		}
	}

	@media (min-width: 1366px) {
		h5 {
			font-size: 20px;
			line-height: 23px;
		}
	}

h6 {
	font-family: 'museo300', Verdana, sans-serif;
	font-size: 16px;
	line-height: 26px;
}

	@media (min-width: 600px) {
		h6 {
			font-size: 18px;
			line-height: 30px;
		}
	}

	@media (min-width: 1366px) {
		h6 {
			font-size: 20px;
			line-height: 32px;
		}
	}

ul {
	list-style-image: url(../img/tick.svg);
	margin: 0;
	padding: 0;
}

li {
	/*list-style: none;*/
}

a {
	color: #fff;
	text-decoration: none;
}

img {
	max-width: 100%;
}

/* global */

* {
	box-sizing: inherit;
}

.inner {
	margin: 0 auto;
	max-width: 1170px;
	/*padding: 0 20px;*/
	position: relative;
}

/* lists */

ul.unstyled {
	list-style: disc;
}

ul.inline {

}

	.inline li {
		display: inline-block;
	}

@-webkit-keyframes fadeInUp {
  0%   { -webkit-opacity: 0; -webkit-transform: translate(0,20px); opacity: 0; transform: translate(0,20px); }
  100% { -webkit-opacity: 1; -webkit-transform: translate(0,0); opacity: 1; transform: translate(0,0); }
}

@keyframes fadeInUp {
  0%   { opacity: 0; transform: translate(0,20px); }
  100% { opacity: 1; transform: translate(0,0); }
}

/* page */

.page_header {
	height: 269px;
	padding: 60px 0;
	text-align: center;
}

	@media (min-width: 600px) {
		.page_header {
			height: 408px;
			padding: 80px 0;
		}
	}

	@media (min-width: 1366px) {
		.page_header {
			height: 528px;
			padding: 100px 0;
		}
	}

	.page_header .inner {
		transition-duration: 0.3s;
		transition-property: background;
	}

	/*.page_header.sticky .inner {
		background: rgba(0,0,0,0.65);
		height: 50px;
		left: 50%;
		position: fixed;
		top: 0;
		transform: translate(-50%,0);
		-webkit-transform: translate(-50%,0);
		width: 100%;
		z-index: 9;
	}*/

		@media (min-width: 600px) {
			.page_header.sticky .inner {
				height: 60px;
			}
		}

	.page_header h1 {
		margin-bottom: 10px;	
	}

		@media (min-width: 600px) {
			.page_header h1 {
				margin-bottom: 20px;
			}
		}

		@media (min-width: 1366px) {
			.page_header h1 {
				margin-bottom: 30px;
			}
		}

		.first-load .page_header h1 {
			animation-name: fadeInUp;
			animation-direction: forwards;
			animation-duration: 1s;
			animation-delay: 0.5s;
			animation-fill-mode: both;
			-webkit-animation-name: fadeInUp;
			-webkit-animation-direction: forwards;
			-webkit-animation-duration: 1s;
			-webkit-animation-delay: 0.5s;
		    -webkit-animation-fill-mode: both;
			opacity: 0;
			transform: translate(0,20px);
			-webkit-transform: translate(0,20px);
		}


	/*.page_header.sticky h1 {
		font-size: 16px;
		left: 30px;
		letter-spacing: -0.5px;
		line-height: 50px;
		position: fixed;
		top: 0;
	}*/

		/*@media (min-width: 600px) {
			.page_header.sticky h1 {
				font-size: 20px;
				left: 40px;
				line-height: 60px;
			}
		}*/

	.page_header h2 {

	}

		.first-load .page_header h2 {
			animation-name: fadeInUp;
			animation-direction: forwards;
			animation-duration: 1s;
			animation-delay: 1.5s;
			animation-fill-mode: both;
			-webkit-animation-name: fadeInUp;
			-webkit-animation-direction: forwards;
			-webkit-animation-duration: 1s;
			-webkit-animation-delay: 1.5s;
			-webkit-animation-fill-mode: both;
			opacity: 0;
			transform: translate(0,20px);
			-webkit-transform: translate(0,20px);
		}



	/*.page_header.sticky h2 {
		font-size: 16px;
		line-height: 50px;
		position: fixed;
		right: 30px;
		top: 0;
	}

		@media (min-width: 600px) {
			.page_header.sticky h2 {
				font-size: 20px;
				line-height: 60px;
				right: 40px;
			}
		}*/

	.socialLinks {
		margin-top: 40px;
	}

		@media (min-width: 600px) {
			.socialLinks {
				margin-top: 60px;
			}
		}

		@media (min-width: 1366px) {
			.socialLinks {
				margin-top: 80px;
			}
		}

		.first-load .socialLinks {
			animation-name: fadeInUp;
			animation-direction: forwards;
			animation-duration: 1s;
			animation-delay: 2.5s;
			animation-fill-mode: both;
			-webkit-animation-name: fadeInUp;
			-webkit-animation-direction: forwards;
			-webkit-animation-duration: 1s;
			-webkit-animation-delay: 2.5s;
			-webkit-animation-fill-mode: both;
			opacity: 0;
			transform: translate(0,20px);
			-webkit-transform: translate(0,20px);
		}

		.socialLinks ul {
			display: inline-block;
			margin: 0 auto;
		}

		.socialLinks li + li {
			margin-left: 25px;
		}

			@media (min-width: 600px) {
				.socialLinks li + li {
					margin-left: 40px;
				}
			}

			@media (min-width: 1366px) {
				.socialLinks li + li {
					margin-left: 50px;
				}
			}

		.socialLinks a {
			background: #1A1E24;
			display: inline-block;
			border-radius: 50%;
			height: 40px;
			position: relative;
			width: 40px;
		}

			@media (min-width: 600px) {
				.socialLinks a {
					height: 60px;
					width: 60px;
				}
			}

			@media (min-width: 1366px) {
				.socialLinks a {
					height: 80px;
					width: 80px;
				}
			}

		.socialLinks svg {
			height: 100%;
			left: 0;
			margin: auto;
			position: absolute;
			right: 0;
			top: 0;
			width: 100%;
		}

			.socialLinks a svg path {
				transition-duration: 0.2s;
			}

			.socialLinks a svg circle {
				transition-duration: 0.2s;
			}

			.socialLinks a:hover svg path {
				fill: #1A1E24;
			}

			.socialLinks a:hover svg circle {
				fill: #9B9B9B;
				stroke: #9B9B9B;
			}

		.socialLinks svg circle {
			fill: transparent;
		}

	.page_header.sticky .socialLinks {
		display: none;
	}


.page_section {

}

	.first-load .page_section {
		/*animation: pageSection-fade-in 1s 0.9s forwards;*/
		/*opacity: 0;*/
		/*transform: translate(0,15px);*/
		animation-name: fadeInUp;
		animation-direction: forwards;
		animation-duration: 1s;
		animation-delay: 3.5s;
		animation-fill-mode: both;
		-webkit-animation-name: fadeInUp;
		-webkit-animation-direction: forwards;
		-webkit-animation-duration: 1s;
		-webkit-animation-delay: 3.5s;
		-webkit-animation-fill-mode: both;
	}

	.page_section.projects {
		padding-bottom: 60px;
	}

		@media (min-width: 600px) {
			.page_section.projects {
				padding-bottom: 80px;
			}
		}

		@media (min-width: 1366px) {
			.page_section.projects {
				padding-bottom: 100px;
			}
		}

.page_footer {
	padding: 0 0 60px;
	text-align: center;
}

	@media (min-width: 600px) {
		.page_footer {
			padding: 80px 0;
		}
	}

	@media (min-width: 1366px) {
		.page_footer {
			padding: 100px 0;
		}
	}

	body.loading .page_footer {
		display: none;
	}

	.page_footer a {
		background: url(../img/arrow-up.svg) no-repeat center top;
		font-family: 'museo_sans700', Verdana, sans-serif;
		font-size: 22px;
		letter-spacing: -0.4px;
		line-height: 24px;
		padding-top: 30px;
		text-transform: uppercase;
	}

		@media (min-width: 600px) {
			.page_footer a {
				font-size: 28px;
				letter-spacing: -0.5px;
				line-height: 30px;
				padding-top: 35px;
			}
		}

		@media (min-width: 1366px) {
			.page_footer a {
				font-size: 30px;
				letter-spacing: -0.6px;
				line-height: 32px;
			}
		}

.overlay {
	background-image: 
		linear-gradient(
			rgba(26,30,36,0),
			rgba(26,30,36,0.8) 80%,
			rgba(26,30,36,1) 100%
		);
	height: 100%;
	left: 0;
	opacity: 1;
	position: absolute;
	top: 0;
	transition-duration: 0.3s;
	width: 100%;
	z-index: 1;
}
/* project teaser */

.projectTeaser {
	height: 300px;
	overflow: hidden;
	position: relative;
	transition-duration: 0.3s;
	width: 100%;
}

	@media (min-width: 600px) {
		.projectTeaser {
			height: 340px;
			padding: 0 40px 40px;
		}
	}

	@media (min-width: 1366px) {
		.projectTeaser {
			height: 460px;
		}
	}


	.projectTeaser_text {
		bottom: 30px;
		position: absolute;
		left: 30px;
		/*transform: translate(0,10px);*/
		/*-webkit-transform: translate(0,10px);*/
		/*transition-duration: 0.5s;*/
		z-index: 2;
	}

	.first-load .projectTeaser_text {
		opacity: 0;
		transform: translate(0,10px);
		-webkit-transform: translate(0,10px);
		transition-duration: 0.5s;
	}

		.first-load .projectTeaser.active .projectTeaser_text {
			opacity: 1;
			transform: translate(0,0);
			-webkit-transform: translate(0,0);
		}

		@media (min-width: 600px) {
			.projectTeaser_text {
				bottom: 40px;
				left: 40px;
			}
		}

	.projectTeaser a {
		display: block;
		height: 100%;
		left: 0;
		overflow: hidden;
		position: absolute;
		text-indent: -100%;
		top: 0;
		white-space: nowrap;
		width: 100%;
		z-index: 1;
	}

	.projectTeaser_thumb {
		background-repeat: no-repeat;
		background-position: 50% 50%;
		background-size: cover;
		height: 100%;
		left: 0;
		position: absolute;
		top: 0;
		transition-duration: 0.5s;
		transform: scale(1);
		-webkit-transform: scale(1);
		width: 100%;
		z-index: 0;
	}


		.projectTeaser:hover  .projectTeaser_image {
			transform: scale(1.01);
			-webkit-transform: scale(1.01);
			/*transition-duration: 0.3s;*/

			filter: grayscale(20%);
		}

		.projectTeaser_thumb .overlay {
			/*opacity: 1;*/

			/*transition-duration: 1s;*/
		}

		.first-load .projectTeaser_thumb .overlay {
			opacity: 0;
			transition-duration: 1s;
		}


		.first-load .projectTeaser.active .projectTeaser_thumb .overlay {
			opacity: 1;
		}

		.projectTeaser:hover  .projectTeaser_thumb .overlay {
			/*opacity: 0.5;*/
		}



/* project detail */


.projectDetail {

}

	.projectDetail_header {
		height: 350px;
		position: relative;
		text-align: center;
	}

		@media (min-width: 600px) {
			.projectDetail_header {
				height: 500px;
			}
		}

		@media (min-width: 1366px) {
			.projectDetail_header {
				height: 600px;
			}
		}

		.projectDetail_header .inner {
			align-items: center;
			-webkit-align-items: center;
			display: flex;
			display: -webkit-flex; 
			flex-direction: column;
			-webkit-flex-direction: column;
			height: 100%;
			justify-content: center;
			-webkit-justify-content: center;
			left: 50%;
			padding: 0 30px;
			position: absolute;
			transform: translate(-50%,-50%);
			-webkit-transform: translate(-50%,-50%);
			top: 50%;
			width: 100%;
			z-index: 20;
		}

			@media (min-width: 600px) {
				.projectDetail_header .inner {
					padding: 0 40px;
				}
			}

			@media (min-width: 1366px) {
				.projectDetail_header .inner {
					padding: 0 15px;
				}
			}

		.projectDetail_header h1 {
			flex: 0 0 auto;
			-webkit-flex: 0 0 auto;
			margin-bottom:  10px;
		}

			@media (min-width: 600px) {
				.projectDetail_header h1 {
					margin-bottom: 20px;
				}
			}

			@media (min-width: 1366px) {
				.projectDetail_header h1 {
					margin-bottom: 20px;
				}
			}

		.projectDetail_header h2 {
			flex: 0 0 auto;
			-webkit-flex: 0 0 auto;
		}

	.projectDetail_thumb {
		background-repeat: no-repeat;
		background-position: 50% 50%;
		background-size: cover;
		height: 100%;
		left: 0;
		opacity: 0.5;
		position: absolute;
		top: 0;
		transition-duration: 0.5s;
		transform: scale(1);
		-webkit-transform: scale(1);
		width: 100%;
		z-index: 0;
	}

	.modal.open.loaded .projectDetail_thumb {
		opacity: 0.5;
	}

	.projectDetail_content {
		padding: 20px 0 0;
	}

		@media (min-width: 600px) {
			.projectDetail_content {
				padding: 40px 0 0;
			}
		}

		@media (min-width: 1366px) {
			.projectDetail_content  {
				padding: 50px 0 0;
			}
		}

		.projectDetail_content .inner {
			display: flex;
			display: -webkit-flex; 
			flex-direction: column;
			-webkit-flex-direction: column;
			align-items: flex-start;
			-webkit-align-items: flex-start;
			justify-content: left;
			-webkit-justify-content: left;
			padding: 0 30px;
		}

			@media (min-width: 600px) {
				.projectDetail_content .inner {
					flex-direction: row;
					-webkit-flex-direction: row;
					padding: 0 40px;
				}
			}

			@media (min-width: 1366px) {
				.projectDetail_content .inner {
					padding: 0 15px;
				}
			}

		.projectDetail_content h4 {
			margin-bottom: 10px;
		}

			@media (min-width: 600px) {
				.projectDetail_content h4 {
					margin-bottom: 15px;
				}
			}

			@media (min-width: 1366px) {
				.projectDetail_content h4 {
					margin-bottom: 20px;
				}
			}

		.projectDetail_content .column {
			flex: 0 1 100%;
			-webkit-flex: 0 1 100%;
		}

		.projectDetail_content .column + .column {
			/*margin-left: 100px;*/
		}

			@media (min-width: 600px) {
				.projectDetail_content .column + .column  {
					margin-left: 50px;
				}
			}

			@media (min-width: 1366px) {
				.projectDetail_content .column + .column {
					margin-left: 100px;
				}
			}

		.projectDetail_content li {
			margin-left: 25px;
		}

	.projectDetail_images {
		line-height: 0;
		padding: 60px 0;
	}

		@media (min-width: 600px) {
			.projectDetail_images {
				padding: 80px 0;
			}
		}

		@media (min-width: 1366px) {
			.projectDetail_images  {
				padding: 100px 0;
			}
		}

	.projectDetail_navigation {
		display: none;
		position: relative;
	}

		.modal.open .projectDetail_navigation {
			display: none;
		}

		@media (min-width: 600px) {
			.modal.open .projectDetail_navigation {
				display: flex;
				display: -webkit-flex; 
				flex-direction: row;
				-webkit-flex-direction: row;
				flex-wrap: nowrap;
			}
		}
		
		.projectNav {
			flex: 0 0 50%;
			-webkit-flex: 0 0 50%;
			height: 300px;
			position: relative;
		}

		.projectNav_title {
			position: absolute;
			z-index: 1;
		}

		.projectNav-left {
			padding: 40px 0 0 40px;
			text-align: left;
		}

			.projectNav-left .projectNav_title {
				left: 40px;
			}

			.projectNav-left h3 {
				background: url(../img/arrow-left.svg) no-repeat 0 3px;
				padding-left: 25px;
			}

			.projectNav-left h5 {
				padding-left: 26px;
			}

		.projectNav-right {
			padding: 40px 40px 0 0;
			text-align: right;
		}

			.projectNav-right .projectNav_title {
				right: 40px;
			}

			.projectNav-right h3 {
				background: url(../img/arrow-right.svg) no-repeat right 3px;
				padding-right: 25px;
			}

			.projectNav-right h5 {
				padding-right: 26px;
			}

		.projectNav a {
			display: block;
			height: 100%;
			left: 0;
			overflow: hidden;
			position: absolute;
			text-align: left;
			text-indent: -100%;
			top: 0;
			white-space: nowrap;
			width: 100%;
			z-index: 10;
		}


		.projectNav_thumb {
			background-size: cover;
			height: 100%;
			left: 0;
			opacity: 0.5;
			position: absolute;
			top: 0;
			width: 100%;
			z-index: 0;
		}

		.projectNav_thumb .overlay {
			background-image: 
				linear-gradient(
					to top,
					rgba(26,30,36,0),
					rgba(26,30,36,0.8) 80%,
					rgba(26,30,36,1) 100%
				);
		}



/* modal */

body.modal-open {
	overflow: hidden;
	transition-delay: 0.5s;
}

.modal {
	left: 0;
	max-height: 0;
	margin: 0 auto;
	opacity: 0;
	position: relative;
	right: 0;
	top: 0;
	transition-delay: 0.5s;
	transition-property: background transform;
	/*transform: scale(0.95) translate(0,-10px);*/
	/*-webkit-transform: scale(0.95) translate(0,-10px);*/
	z-index: 10;
}

	.modal .projectDetail_content {
		/*display: none;*/
		opacity: 0;
		transition-delay: 0.3s;
		transition-duration: 0.5s;
		transform: translate(0, 20px);
		-webkit-transform: translate(0, 20px);
	}

	.modal .projectDetail_header .inner,
	.modal .projectDetail_content .inner {
		display: flex;
		display: -webkit-flex; 
	}

	.modalContainer {
		background: rgba(0,0,0,0);
	}

	.modal.opening {
		background: rgba(0,0,0,0);
		left: 0;
		max-height: none;
		margin: 0 auto;
		opacity: 0;
		right: 0;
	}

		.modal.opening .modalContainer {
			background: #1A1E24;
			margin: 0 auto;
			max-height: 460px;
			max-width: 100vw;
			opacity: 0;
		}


	.modal.open {
		opacity: 1;
		transition-duration: 0.3s;
		/*transform: scale(1) translate(0,0) !important;*/
		/*-webkit-transform: scale(1) translate(0,0) !important;*/
	}

		.modal.open .projectDetail_content {
			/*display: block;*/
			transform: translate(0, 0);
			-webkit-transform: translate(0, 0);
		}

		.modal.open .modalContainer {			
			height: auto;
			max-height: none;
			opacity: 1;
			transition-duration: 0.3s;
			transition-property: transform;
			transition-timing-function: cubic-bezier(0.38, 0.94, 0.79, 0.77);
		}

		.modal.open .close-button,
		.modal.open .modalContainer,
		.modal.open .projectDetail,
		.modal.open .projectDetail_header,
		.modal.open .projectDetail_header *,
		.modal.open .projectDetail_images {
			opacity: 1;
			transition-duration: 0.25s;
			transition-timing-function: cubic-bezier(0.38, 0.94, 0.79, 0.77);
		}


	.modal.loaded .modalContainer {
		
	}

		.modal.open.loaded .projectDetail_content {
			opacity: 1;
		}

	.modal.hiding {
		opacity: 0;
		overflow: hidden;
		max-height: none;
		transition-duration: 0.2s;
	}

	.close-button {
		background: url(../img/close.svg);
		background-size: 100% 100%;
		height: 45px;
		left: auto;
		margin-left: 578px;
		overflow: hidden;
		position: fixed;
		right: 0;
		text-indent: 100%;
		top: 0;
		white-space: nowrap;
		width: 45px;
		z-index: 30;
	}

		@media (min-width: 1170px) {
			.close-button  {
				height: 60px;
				left: 50%;
				margin-left: 578px;
				position: fixed;
				top: 0;
				transform: translate(-100%);
				-webkit-transform: translate(-100%);
				width: 60px;
			}
		}