@import url("font-awesome.min.css");
@import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,400italic");

	html, body, div, span, h1, h2, h3, h4, p, a, img, strong, ol, ul, li, article, footer, header, section {
		outline: 0;
		outline: none;
		text-decoration:none;
		margin: 0;
		padding: 0;
		border: 0;	
		font-size: 100%;
		font: inherit;
		vertical-align: baseline;
	}
	
	article, footer, header, section {
		display: block;
	}

	body {
		line-height: 1;
	}

	ol, ul {
		list-style: none;
	}

	body {
		-webkit-text-size-adjust: none;
	}
			

/* Box Model */

	*, *:before, *:after {
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
	}

/* Containers */

/* Grid */

	.row {
		border-bottom: solid 1px transparent;
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
	}

	.row > * {
		float: left;
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
	}

	.row:after, .row:before {
		content: '';
		display: block;
		clear: both;
		height: 0;
	}

	.row.uniform > * > :first-child {
		margin-top: 0;
	}

	.row.uniform > * > :last-child {
		margin-bottom: 0;
	}

	.row > * {
		padding: 0 0 0 2.5em;
	}

	.row {
		margin: 0 0 -1px -2.5em;
	}

	.row.uniform > * {
		padding: 2.5em 0 0 2.5em;
	}

	.row.uniform {
		margin: -2.5em 0 -1px -2.5em;
	}

	.row.\35 0\25 > * {
		padding: 0 0 0 1.25em;
	}

	.row.\35 0\25{
		margin: 0 0 -1px -1.25em;
	}

	.row.uniform.\35 0\25 > * {
		padding: 1.25em 0 0 1.25em;
	}

	.row.uniform.\35 0\25{
		margin: -1.25em 0 -1px -1.25em;
	}

	.\31 2u\24{
		width: 100%;
		clear: none;
		margin-left: 0;
	}

	.\36 u, .\36 u\24{
		width: 50%;
		clear: none;
		margin-left: 0;
	}

	.\34 u, .\34 u\24{
		width: 33.3333333333%;
		clear: none;
		margin-left: 0;
	}

	.\31 2u\24 + *,
	.\36 u\24 + *,
	.\34 u\24 + * {
		clear: left;
	}

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

		.row > * {
			padding: 0 0 0 2.5em;
		}

		.row {
			margin: 0 0 -1px -2.5em;
		}

		.row.uniform > * {
			padding: 2.5em 0 0 2.5em;
		}

		.row.uniform {
			margin: -2.5em 0 -1px -2.5em;
		}

		.row.\35 0\25 > * {
			padding: 0 0 0 1.25em;
		}

		.row.\35 0\25{
			margin: 0 0 -1px -1.25em;
		}

		.row.uniform.\35 0\25 > * {
			padding: 1.25em 0 0 1.25em;
		}

		.row.uniform.\35 0\25{
			margin: -1.25em 0 -1px -1.25em;
		}

	}

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

		.row > * {
			padding: 0 0 0 2em;
		}

		.row {
			margin: 0 0 -1px -2em;
		}

		.row.uniform > * {
			padding: 2em 0 0 2em;
		}

		.row.uniform {
			margin: -2em 0 -1px -2em;
		}

		.row.\35 0\25 > * {
			padding: 0 0 0 1em;
		}

		.row.\35 0\25{
			margin: 0 0 -1px -1em;
		}

		.row.uniform.\35 0\25 > * {
			padding: 1em 0 0 1em;
		}

		.row.uniform.\35 0\25{
			margin: -1em 0 -1px -1em;
		}

	}

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

		.row > * {
			padding: 0 0 0 2em;
		}

		.row {
			margin: 0 0 -1px -2em;
		}

		.row.uniform > * {
			padding: 2em 0 0 2em;
		}

		.row.uniform {
			margin: -2em 0 -1px -2em;
		}

		.row.\35 0\25 > * {
			padding: 0 0 0 1em;
		}

		.row.\35 0\25{
			margin: 0 0 -1px -1em;
		}

		.row.uniform.\35 0\25 > * {
			padding: 1em 0 0 1em;
		}

		.row.uniform.\35 0\25{
			margin: -1em 0 -1px -1em;
		}

	}

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

		.row > * {
			padding: 0 0 0 1.5em;
		}

		.row {
			margin: 0 0 -1px -1.5em;
		}

		.row.uniform > * {
			padding: 1.5em 0 0 1.5em;
		}

		.row.uniform {
			margin: -1.5em 0 -1px -1.5em;
		}

		.row.\35 0\25 > * {
			padding: 0 0 0 0.75em;
		}

		.row.\35 0\25{
			margin: 0 0 -1px -0.75em;
		}

		.row.uniform.\35 0\25 > * {
			padding: 0.75em 0 0 0.75em;
		}

		.row.uniform.\35 0\25{
			margin: -0.75em 0 -1px -0.75em;
		}

	}

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

		.row > * {
			padding: 0 0 0 1.5em;
		}

		.row {
			margin: 0 0 -1px -1.5em;
		}

		.row.uniform > * {
			padding: 1.5em 0 0 1.5em;
		}

		.row.uniform {
			margin: -1.5em 0 -1px -1.5em;
		}

		.row.\35 0\25 > * {
			padding: 0 0 0 0.75em;
		}

		.row.\35 0\25{
			margin: 0 0 -1px -0.75em;
		}

		.row.uniform.\35 0\25 > * {
			padding: 0.75em 0 0 0.75em;
		}

		.row.uniform.\35 0\25{
			margin: -0.75em 0 -1px -0.75em;
		}

		.\31 2u\24\28xsmall\29{
			width: 100%;
			clear: none;
			margin-left: 0;
		}

		.\31 2u\24\28xsmall\29 + * {
			clear: left;
		}

	}

/* Basic */

	body {
		background: #fff;
	}

	body {
		color: #a2a2a2;
		font-family: "Source Sans Pro", Helvetica, sans-serif;
		font-size: 16pt;
		font-weight: 400;
		line-height: 1.75em;
	}

	a {
		-moz-transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out;
		-webkit-transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out;
		-ms-transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out;
		transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out;
		border-bottom: dotted 1px;
		color: #040604;
		text-decoration: none;
		outline: 0 !important;
	}

		a:hover {
			border-bottom-color: transparent;
			color: #040604 !important;
			text-decoration: none;
			outline: 0 !important;
		}

	strong {
		color: #787878;
		font-weight: 400;
	}

	p {
		margin: 0 0 2em 0;
	}

	h1, h2, h3, h4 {
		color: #787878;
		font-weight: 400;
		line-height: 1em;
		margin: 0 0 1em 0;
	}
	
			h1 a, h2 a, h3 a, h4 a {
			color: inherit;
			text-decoration: none;
		}


	h1 {
		font-size: 2em;
		line-height: 1.5em;
	}

	h2 {
		font-size: 1.5em;
		line-height: 1.5em;
	}

	h3 {
		font-size: 1.25em;
		line-height: 1.5em;
	}

	h4 {
		font-size: 1.1em;
		line-height: 1.5em;
	}

	hr {
		border: 0;
		border-bottom: solid 2px #efefef;
		margin: 2em 0;
	}

/* Section/Article */

	header p {
		color: #000;
		position: relative;
		margin: 0 0 1.5em 0;
	}

	header h4 + p {
		font-size: 0.9em;
		margin-top: -0.6em;
		line-height: 1.5em;
	}

	header.major h2 {
		text-align: center;
		font-size: 2em;
	}

	header.major h3 {
		text-align: center;
	}

/* Box */

	.box {
		border-radius: 0.35em;
		border: solid 2px #efefef;
		margin-bottom: 2em;
		padding: 1.5em;
	}

		.box > :last-child,
		.box > :last-child > :last-child,
		.box > :last-child > :last-child > :last-child {
			margin-bottom: 0;
		}

		.box.alt {
			border: 0;
			border-radius: 0;
			padding: 0;
		}

/* Icon */

	.icon {
		text-decoration: none;
		border-bottom: none;
		position: relative;
	}

		.icon:before {
			-moz-osx-font-smoothing: grayscale;
			-webkit-font-smoothing: antialiased;
			font-family: FontAwesome;
			font-style: normal;
			font-weight: normal;
			text-transform: none !important;
		}

/* Image */

	.image {
		display: inline-block;
		position: relative;
	}

		.image:before {
			-moz-transition: opacity 0.2s ease-in-out;
			-webkit-transition: opacity 0.2s ease-in-out;
			-ms-transition: opacity 0.2s ease-in-out;
			transition: opacity 0.2s ease-in-out;
			background: url("images/overlay.png");
			content: '';
			display: block;
			height: 100%;
			left: 0;
			opacity: 0.5;
			position: absolute;
			top: 0;
			width: 100%;
		}

		.image.thumb {
			text-align: center;
		}

			.image.thumb:after {
				-moz-transition: opacity 0.2s ease-in-out;
				-webkit-transition: opacity 0.2s ease-in-out;
				-ms-transition: opacity 0.2s ease-in-out;
				transition: opacity 0.2s ease-in-out;
				border: solid 3px rgba(255, 255, 255, 0.5);
				color: #fff;
				content: 'View';
				display: inline-block;
				font-size: 0.8em;
				font-weight: 400;
				left: 50%;
				line-height: 2.25em;
				margin: -1.25em 0 0 -3em;
				opacity: 0;
				padding: 0 1.5em;
				position: absolute;
				text-align: center;
				text-decoration: none;
				top: 50%;
				white-space: nowrap;
			}

			.image.thumb:hover:after {
				opacity: 1.0;
			}

			.image.thumb:hover:before {
				background: url("images/overlay.png"), url("images/overlay.png");
				opacity: 1.0;
			}

		.image img {
			display: block;
		}

		.image.left {
			float: left;
			margin: 0 1.5em 1em 0;
			top: 0.25em;
		}

		.image.right {
			float: right;
			margin: 0 0 1em 1.5em;
			top: 0.25em;
		}
		
		.image.center {
			float: right;
			left: -19.5%;
			text-align: left;
		}

		.image.left, .image.right, .image.center {
			max-width: 60%;
		}

			.image.left img, .image.right img, .image.center img {
				width: 100%;
			}

		.image.fit {
			display: block;
			left: -19.5%;
			margin: 0 0 0 0;
			width: 120%;
		}

			.image.fit img {
				width: 120%;
			}

/* List */

	ol {
		list-style: decimal;
		margin: 0 0 2em 0;
		padding-left: 1.25em;
	}

		ol li {
			padding-left: 0.25em;
		}

	ul {
		list-style: disc;
		margin: 0 0 2em 0;
		padding-left: 1em;
	}

		ul li {
			padding-left: 0.5em;
		}

		ul.alt {
			list-style: none;
			padding-left: 0;
		}

			ul.alt li {
				border-top: solid 2px #efefef;
				padding: 0.5em 0;
			}

				ul.alt li:first-child {
					border-top: 0;
					padding-top: 0;
				}

/* Work Item */

	.work-item {
		margin: 0 0 2em 0;
	}

		.work-item .image {
			margin: 0 0 1.5em 0;
		}

		.work-item h3 {
			font-size: 1em;
			margin: 0 0 0.5em 0;
		}

		.work-item p {
			font-size: 0.8em;
			line-height: 1.5em;
			margin: 0;
		}

/* Header */

	#header {
		background-color: #1f1815;
		background-attachment: scroll,								fixed;
		background-image: url("../../images/bg.jpg");
		background-position: top left,							top left;
		background-repeat: repeat,								no-repeat;
		background-size: auto,								auto 100%;
		color: rgba(255, 255, 255, 0.5);
		height: 100%;
		left: 0;
		padding: 8em 4em;
		position: fixed;
		text-align: right;
		top: 0;
		width: 30%;
	}

		#header > * {
			-moz-flex-shrink: 0;
			-webkit-flex-shrink: 0;
			-ms-flex-shrink: 0;
			flex-shrink: 0;
			width: 100%;
		}

		#header > .inner {
			-moz-flex-grow: 1;
			-webkit-flex-grow: 1;
			-ms-flex-grow: 1;
			flex-grow: 1;
			margin: 0 0 2em 0;
			outline: none;
		}

		#header strong {
			color: #ffffff;
		}
		
		#header h2, #header h3, #header h4 {
			color: #ffffff;
		}

		#header h1 {
			color: rgba(255, 255, 255, 0.5);
			font-size: 1.35em;
			line-height: 1.75em;
			margin: 0;
		}

/* Footer */

	#footer .icons {
		margin: 1em 0 0 0;
	}

		#footer .icons a {
			color: rgba(255, 255, 255, 0.4);

		}

/* Main */

	#main {
		margin-left: 32.5%; /* centering the main block with the header */
		max-width: 54em;
		padding: 8em 4em 4em 4em;
		width: calc(100% - 35%);
		text-align: justify;
	}

		#main > section {
			border-top: solid 2px #efefef;
			margin: 4em 0 0 0;
			padding: 4em 0 0 0;
		}

			#main > section:first-child {
				border-top: 0;
				margin-top: 0;
				padding-top: 0;
			}


/* XLarge */

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

		/* Basic */

			body {
				font-size: 12pt;
			}

	}

/* Large */

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

		/* Header */

			#header {
				padding: 6em 3em 3em 3em;
				width: 30%;
			}

				#header h1 {
					font-size: 1.25em;
				}

					#header h1 br {
						display: none;
					}

		/* Footer */
		
			#footer .copyright li {
				border-left-width: 0;
				display: block;
				line-height: 2.25em;
				margin-left: 0;
				padding-left: 0;
			}

		/* Main */

			#main {
				margin-left: 30%;
				max-width: none;
				padding: 6em 3em 3em 3em;
				width: calc(100% - 30%);
			}

	}

/* Medium */

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

		/* Basic */

			h1 br {
				display: none;
			}

		/* Header */

			#header {
				background-attachment: scroll;
				background-position: top left, center center;
				background-size: auto,		cover;
				left: auto;
				padding: 6em 4em;
				position: relative;
				text-align: center;
				top: auto;
				width: 100%;
				display: block;
			}

				#header h1 {
					font-size: 1.75em;
				}

					#header h1 br {
						display: inline;
					}

		/* Footer */

			#footer {
				background-attachment: scroll;
				background-color: #1f1815;
				background-image: url("../../images/bg.jpg");
				background-position: top left,						bottom center;
				background-repeat: repeat,							no-repeat;
				background-size: auto,							cover;
				bottom: auto;
				left: auto;
				padding: 4em 4em 6em 4em;
				position: relative;
				text-align: center;
				width: 100%;
			}


		/* Main */

			#main {
				margin: 0;
				padding: 6em 4em;
				width: 100%;
			}

	}

/* Small */

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

		/* Basic */

			h1 {
				font-size: 1.5em;
			}

			h2 {
				font-size: 1.2em;
			}

			h3 {
				font-size: 1em;
			}

		/* Section/Article */

			header.major h2 {
				font-size: 1.35em;
			}


		/* Header */

			#header {
				padding: 2.25em 1.5em;
			}

				#header h1 {
					font-size: 1.35em;
				}

		/* Footer */

			#footer {
				padding: 2.25em 1.5em;
			}

		/* Main */

			#main {
				padding: 2.25em 1.5em 0.25em 1.5em;
			}

				#main > section {
					margin: 2.25em 0 0 0;
					padding: 2.25em 0 0 0;
				}

	}

/* XSmall */

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

		/* Header */

			#header {
				padding: 4.5em 1.5em;
			}

				#header h1 br {
					display: none;
				}
	}