/* ---- Imports ---- */

@import url(http://fonts.googleapis.com/css?family=Hind:400,300,500,600,700);
@import url(font/font.css);
@import url(font/font-awesome/css/font-awesome.min.css);

/* ---- CSS HTML5 RESET ---- */
	/* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, .menubar, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: inherit;
	font-weight: 300;
	letter-spacing: 0px;
	font-family: 'hind';
	text-rendering: geometricPrecision;
	font-weight: 300;
	vertical-align: baseline;
}

h1, h2, h3, h4, h5, h6 {
	display: inline-block;
	font-family: 'montserratregular';
	font-weight: 400;
	color: #2fad08;
	text-rendering: geometricPrecision;
}

article, aside, details, figcaption, figure, footer, hgroup, menu, nav, section {
	display: block;
}

html, body {
	width: 100%;
	height: 100%;
	padding: 0;
	margin: 0;
	line-height: 1;
	font-size: 100%;
}

@media (max-width: 720px) {
	html, body {
		font-size: 96%;
	}
}

@media (max-width: 640px) {
	html, body {
		font-size: 94%;
	}
}

@media (max-width: 480px) {
	html, body {
		font-size: 92%;
	}
}

a {
	text-decoration: none;
	color: #2fad08;
}

a:hover {
	font-style: oblique;
}

ol, ul {
	list-style: none;
}

blockquote, q {
	quotes: none;
}

blockquote:before, blockquote:after, q:before, q:after {
	content: '';
	content: none;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

::selection {
	background: #2fad08;
	color: white;
}

::-moz-selection {
	background: #2fad08;
	color: white;
}

/* ----- CSS STYLESHEET ----- */

	/* ---- DEFAULT CSS ---- */
	
	header {
		position: relative;
		width: 100%;
		height: 56%;
		background-color: #191919;
		background-image: url(images/darkpattern2.jpg);
		background-position: 50%;
	}

	header .titleBlock {
		position: absolute;
		margin: 0 auto;
		left: 4vw;
		right: 4vw;
		bottom: 35%;
		max-width: 960px;
		width: 92vw;
		text-align: left;
	}

	header h1 {
		display: block;
		width: 100%;
		min-width: 550px;
		height: 65px;
		margin-bottom: 15px;
		font-size: 4.5em;
		text-transform: uppercase;
		text-align: center;
		text-shadow: 3px 3px 0px rgba(15, 15, 15, 1);
	}

	header h2 {
		display: block;
		width: 100%;
		min-width: 550px;
		font-size: 2.5em;
		font-weight: 300;
		text-transform: uppercase;
		text-align: center;
		word-spacing: -5px;
		text-shadow: 3px 3px 0px rgba(15, 15, 15, 1);
		color: rgb(255, 255, 255);
	}
	
	@media (max-width: 640px) {
		header h1 {
			height: 11vw;
			min-width: 0;
			margin-bottom: 1vw;
			font-size: 11vw;
		}

		header h2 {
			min-width: 0;
			font-size: 6.2vw;
		}
	}
	
	.menubar {
		position: absolute;
		margin: 0 auto;
		left: 0;
		right: 0;
		bottom: 0;
		padding: 0 4vw;
		max-width: 960px;
		text-align: justify;
	}
	
	.menubar:after {
		content: '';
		display: inline-block;
		width: 100%;
		height: 0px;
	}

	.menubar a {
		display: inline-block;
		position: relative;
		height: 30px;
		margin-bottom: -16px;
		padding-bottom: 20px;
		vertical-align: bottom;
		border-bottom: 0 solid white;
		word-spacing: initial;
		text-decoration: none;
		text-transform: uppercase;
		font-size: 1.45em;
		font-family: 'montserratregular';
		letter-spacing: 1px;
		line-height: 45px;
		color: white;
		transition: height 0.35s cubic-bezier(0.64, 0.02, 1, 1);
	}

	.menubar a:hover {
		height: 25px;
		padding-top: 5px;
		font-style: initial;
		transition: height 0.1s cubic-bezier(0.64, 0.02, 1, 1);
	}

	.menubar a.active {
		height: 25px;
		padding-top: 5px;
		padding-bottom: 20px;
		z-index: 1;
		color: black;
	}

	.menubar a.active:before {
		content: '';
		display: block;
		position: absolute;
		z-index: -1;
		left: -30px;
		right: -30px;
		bottom: 0;
		top: -5px;
		background-color: rgba(255, 255, 255, 1);
	}

	@media (max-width: 720px) {
		.menubar {
			height: 50px;
			word-spacing: 30px;
			white-space: nowrap;
			text-align: center;
		}
	
		.menubar:after {
			display: none;
		}

		.menubar a {
			transition: height 0.25s cubic-bezier(0.64, 0.02, 1, 1);
		}

		.menubar a:hover {
			transition: height 0s cubic-bezier(0.64, 0.02, 1, 1);
		}

		.menubar a.active {
			margin-left: 25px;
			margin-right: 25px;
		}
	}
	
	.slice {
		position: relative;
		z-index: 1;
		width: 100%;
	}

	.slice.white {
		background-color: white;
		color: rgb(28, 28, 28);
	}

	.slice.dark {
		background-color: #191919;
		background-image: url(images/darkpattern2.jpg);
		background-position: 50%;
		color: white;
	}

	.slice.green {
		background-color: #268d07;
		background-image: url(images/greenpattern.jpg);
		background-position: 50%;
		color: white;
	}

	.greenText {
		font-weight: 600;
		font-family: 'montserratlight';
		color: #2fad08;
	}

	.inner {
		position: relative;
		padding: 80px 4vw;
		max-width: 960px;
		margin: 0 auto;
	}

	.columnContainer {
  		text-align: justify;
	}

	.columnContainer:after {
		content: '';
		width: 100%;
		display: inline-block;
	}

	.column2 {
		display: inline-block;
		position: relative;
		width: 45%;
		vertical-align: top;
		font-size: 2.1em;
	}

	.column3 {
		display: inline-block;
		position: relative;
		width: 29%;
		vertical-align: top;
	}

	.column4 {
		display: inline-block;
		width: 20%;
		vertical-align: top;
	}

	.columnContainer .contentTitle {
		text-align: center;
	}

	.hiddenTitle {
		position: absolute;
		width: 0;
		height: 0;
		margin: 0;
		padding: 0;
		font-size: 0;
	}

	.contentTitle {
		padding: 0 0 30px;
		font-size: 1.5em;
		text-transform: uppercase;
	}

	.contentText {
		font-size: 1.25em;
		font-weight: 300;
		line-height: 1.2em;
		text-align: left;
	}

	.wideText {
		margin-bottom: -25px;
		font-size: 1.25em;
		font-weight: 300;
		line-height: 1.2em;
		text-align: justify;
	}

	.wideText:after {
		content: '';
		display: inline-block;
		width: 100%;
		height: 0px;
	}

	.alignRight {
		float: right;
		line-height: 1.5em;
	}

	.button {
		float: right;
		display:  inline-block;
		height: 46px;
		width: 60px;
		padding: 0 20px;
		line-height: 50px;
		font-size: 1.45em;
		text-align: center;
		text-transform: uppercase;
		background-color: #2FAD08;
		color: white;
		border-bottom: 4px solid #238006;
	}

	.button:hover {
		font-style: normal;
		border-top: 4px solid white;
		border-bottom: 0px solid #238006;
		transition: border 0.2s linear;
	}

	@media (max-width: 720px) {
		.featuredWorkLink {
			float: right;
			width: 100%;
			line-height: 1em;
			margin: 0 0 30px;
		}
	}
	
	.featuredWorkContainer {
		display: block;
		margin-bottom: -30px;
		text-align: justify;
	}
	
	.featuredWorkContainer:after {
		content: '';
		display: inline-block;
		width: 100%;
		height: 0px;
	}

	.featuredWork {
		display: inline-block;
		position: relative;
		width: 48%;
		min-width: 300px;
		height: 259px;
		overflow: hidden;
		margin-bottom: 30px;
		color: white;
		font-style: normal;
	}

	.featuredImage {
		height: 100%;
		overflow: hidden;
	}

	.featuredImage {
		height: 100%;
		overflow: hidden;
	}

	.featuredWork div {
		position: absolute;
		bottom: calc(-2.85em - 30px);
		left: 0;
		z-index: 100;
		width: 100%;
		height: 2.85em;
		padding: 15px 20px;
		overflow: hidden;
		background-color: rgba(20, 20, 20, 0.75);
		transition: bottom 0.5s cubic-bezier(0.64, 0.02, 1, 1);
	}

	.featuredWork:hover div {
		bottom: 0;
		transition: bottom 0.15s cubic-bezier(0.64, 0.02, 1, 1);
	}

	.featuredWork div h3 {
		padding-bottom: 5px;
		font-size: 1.3em;
		text-transform: uppercase;
	}

	.featuredWork div p {
		font-size: 1.25em;
	}

	@media (max-width: 840px) {
		.featuredWorkContainer {
			display: block;
			margin-bottom: -30px;
			margin-left: -4vw;
			margin-right: -4vw;
			text-align: center;
		}

		.featuredWork {
			height: 200px;
			margin: 0 10px 30px;
		}

		.featuredWork div {
			text-align: left;
		}
	}


	.portfolioWorkContainer {
		max-width: 1670px;
		margin-bottom: -30px;
		padding: 80px 0;
	}

	.portfolioWork {
		display: inline-block;
		position: relative;
		width: 300px;
		height: 159px;
		overflow: hidden;
		margin: 0 15px 30px;
		color: white;
		background-color: #1D1D1D;
	}

	.portfolioImage {
		height: 100%;
		overflow: hidden;
	}

	.portfolioImage {
		height: 100%;
		overflow: hidden;
	}

	.portfolioWork div {
		position: absolute;
		bottom: calc(-2.85em - 30px);
		left: 0;
		z-index: 100;
		width: 100%;
		height: 2.85em;
		padding: 15px 20px;
		overflow: hidden;
		font-style: normal;
		text-align: left;
		background-color: rgba(20, 20, 20, 0.75);
		transition: bottom 0.5s cubic-bezier(0.64, 0.02, 1, 1);
	}

	.portfolioWork:hover div {
		bottom: 0;
		transition: bottom 0.15s cubic-bezier(0.64, 0.02, 1, 1);
	}

	.portfolioWork div h3 {
		padding-bottom: 5px;
		font-size: 1.3em;
		text-transform: uppercase;
	}

	.portfolioWork div p {
		font-size: 1.25em;
	}

	@media (max-width: 1695px) {
		.portfolioWorkContainer {
			max-width: 1335px;
		}
	}

	@media (max-width: 1375px) {
		.portfolioWorkContainer {
			max-width: 1000px;
		}
	}

	@media (max-width: 1020px) {
		.portfolioWorkContainer {
			max-width: 895px;
			padding: 80px 1vw;
			text-align: center;
		}

		.portfolioWork {
			display: inline-block;
			position: relative;
			width: 265px;
			height: 150px;
		}
	}

	.map {
		height: 460px;
		margin-top: -30px;
		margin-bottom: -30px;
		z-index: 0;
	}

	.contactIcons {
		margin-top: 60px;
	}

	.contactIcons * {
		vertical-align: middle;
	}

	.contactIcons a {
		display: inline-block;
		line-height: 2.5em;
		padding: 0 10px;
	}

	.contactIcons .fa {
		padding-right: 20px;
		font-size: 1.95em;
		color: #2fad08;
	}
	
	footer .contentText {
		width: 100%;
		margin: -10px 0;
		line-height: 1.2em;
	}

	footer a.socialLink {
		float: right;
		padding: 9px 20px;
		font-size: 1.5em;
		color: white;
	}

	footer a:hover {
		opacity: 0.5;
	}

	.footerKvK {
		opacity: 0.35;
		color: white;
	}