@import 'libs/vars';
@import 'libs/functions';
@import 'libs/mixins';
@charset "UTF-8";
@import url('http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,900');
@import url('font-awesome.min.css');

/*
	Big Picture by HTML5 UP
	html5up.net | @ajlkn
	Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
*/

	@import "libs/skel";

	@include skel-breakpoints((
		wide: '(max-width: 1920px)',
		normal: '(max-width: 1680px)',
		narrow: '(max-width: 1280px)',
		narrower: '(max-width: 1000px)',
		mobile: '(max-width: 736px)',
		mobilenarrow: '(max-width: 480px)',
	));

	@include skel-layout((
		reset: 'full',
		boxModel: 'border',
		grid: ( gutters: (40px, 40px) ),
		conditionals: true,
		containers: 1440px,
		breakpoints: (
			wide: (
				containers: 1360px
			),
			normal: (
				containers: 1200px
			),
			narrow: (
				containers: 960px
			),
			narrower: (
				containers: 95%
			),
			mobile: (
				grid: ( gutters: (20px, 20px) )
			),
			mobilenarrow: (
				containers: (95%, true)
			)
		)
	));


/* Basic */

	@-ms-viewport {
		width: device-width;
	}

	html {
		height: 100%;
	}

	body {
		background: #fff;
		height: 100%;
		font-family: 'Source Sans Pro', sans-serif;
		font-weight: 300;
		font-size: 18pt;
		line-height: 1.75em;
		color: #39454b;
		letter-spacing: 0.5px;

		&.is-loading *,
		&.is-resizing * {
			@include vendor('transition', 'none !important');
			@include vendor('animation', 'none !important');
		}
	}

	input, textarea, select {
		font-family: 'Source Sans Pro', sans-serif;
		font-weight: 300;
		font-size: 18pt;
		line-height: 1.75em;
		color: #39454b;
		letter-spacing: 0.5px;
	}

	h1, h2, h3, h4, h5, h6 {
		font-weight: 900;
		color: inherit;
	}

	h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
		color: inherit;
		text-decoration: none;
	}

	h2 {
		font-size: 2.25em;
		letter-spacing: -2px;
		line-height: 1.25em;
	}

	strong, b {
		font-weight: 900;
		color: inherit;
	}

	em, i {
		font-style: italic;
	}

	a {
		@include vendor('transition', ('all 0.2s ease-in-out', 'color 0.2s ease-in-out'));
		color: #98c593;
	}

	sub {
		position: relative;
		top: 0.5em;
		font-size: 0.8em;
	}

	sup {
		position: relative;
		top: -0.5em;
		font-size: 0.8em;
	}

	hr {
		border: 0;
		border-top: solid 1px #ddd;
	}

	blockquote {
		border-left: solid 0.5em #ddd;
		padding: 1em 0 1em 2em;
		font-style: italic;
	}

	p, ul, ol, dl, table {
		margin-bottom: 1em;
	}

	header {
		margin-bottom: 1em;

		p {
			display: block;
			margin: 1em 0 0 0;
			padding: 0 0 0.5em 0;
		}
	}

	footer {
		margin-top: 2em;
	}

	br.clear {
		clear: both;
	}

/* Sections/Article */

	section, article {
		margin-bottom: 3em;
	}

	section > :last-child,
	article > :last-child,
	section > .content > :last-child,
	article > .content > :last-child,
	section:last-child,
	article:last-child {
		margin-bottom: 0;
	}

	.row > {
		section, article {
			margin-bottom: 0;
		}
	}

/* Image */

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

		&:before {
			content: '';
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			background: url('images/overlay.png');
		}

		img {
			display: block;
			width: 100%;
		}

		&.featured {
			display: block;
			width: 100%;
			margin: 0 0 2em 0;
		}

		&.fit {
			display: block;
			width: 100%;
		}

		&.left {
			float: left;
			margin: 0 2em 2em 0;
		}

		&.centered {
			display: block;
			margin: 0 0 2em 0;

			img {
				margin: 0 auto;
				width: auto;
			}
		}
	}

/* List */

	ul {
		&.default {
			list-style: disc;
			padding-left: 1em;

			li {
				padding-left: 0.5em;
			}
		}

		&.icons {
			cursor: default;

			li {
				display: inline-block;
			}

			a {
				display: inline-block;
				width: 2em;
				height: 2em;
				line-height: 2em;
				text-align: center;
				border: 0;
			}
		}

		&.menu {
			cursor: default;

			li {
				display: inline-block;
				line-height: 1em;
				border-left: solid 1px rgba(145, 146, 147, 0.25);
				padding: 0 0 0 0.5em;
				margin: 0 0 0 0.5em;

				&:first-child {
					border-left: 0;
					padding-left: 0;
					margin-left: 0;
				}
			}
		}

		&.actions {
			cursor: default;

			li {
				display: inline-block;
				margin: 0 0 0 0.5em;

				&:first-child {
					margin-left: 0;
				}
			}
		}
	}

	ol.default {
		list-style: decimal;
		padding-left: 1.25em;

		li {
			padding-left: 0.25em;
		}
	}

/* Form */

	form {
		label {
			display: block;
		}

		input[type="text"],
		input[type="email"],
		input[type="password"],
		select,
		textarea {
			@include vendor('appearance', 'none');
			@include vendor('transition', ('all 0.2s ease-in-out', 'color 0.2s ease-in-out'));
			display: block;
			width: 100%;
			padding: 0.65em 0.75em;
			background: none;
			border: solid 2px rgba(185, 186, 187, 0.25);
			color: inherit;
			border-radius: 0.5em;
			outline: none;

			&:focus {
				border-color: #9ac8e9;
			}
		}

		input[type="text"],
		input[type="email"],
		input[type="password"] {
			line-height: 1.35em;
		}

		select {
			line-height: 1.35em;
		}

		textarea {
			min-height: 8em;
		}

		.formerize-placeholder,
		::-webkit-input-placeholder,
		:-moz-placeholder,
		::-moz-placeholder,
		:-ms-input-placeholder {
			color: rgba(145, 146, 147, 0.85) !important;
		}

		::-moz-focus-inner {
			border: 0;
		}
	}

/* Table */

	table {
		width: 100%;

		&.default {
			width: 100%;

			tbody tr:nth-child(2n+2) {
				background: #f4f4f4;
			}

			td {
				padding: 0.5em 1em 0.5em 1em;
			}

			th {
				text-align: left;
				font-weight: 900;
				padding: 0.5em 1em 0.5em 1em;
			}

			thead {
				background: #444;
				color: #fff;
			}

			tfoot {
				background: #eee;
			}
		}
	}

/* Button */

	input[type="button"],
	input[type="submit"],
	input[type="reset"],
	.button,
	button {
		@include vendor('appearance', 'none');
		@include vendor('transition', 'all 0.2s ease-in-out');
		background-color: #98c593;
		border: 0;
		border-radius: 3.5em;
		color: #fff;
		cursor: pointer;
		display: inline-block;
		height: 3.5em;
		line-height: 3.5em;
		outline: 0;
		padding: 0 2em 0 2em;
		position: relative;
		text-align: center;
		text-decoration: none;

		&.down {
			width: 5em;
			height: 5em;
			line-height: 4.5em;
			padding: 0;
			background-image: url('images/dark-arrow.svg');
			background-position: center center;
			background-repeat: no-repeat;
			text-indent: -10em;
			overflow: hidden;

			&.anchored {
				bottom: 0;
				border-bottom: 0;
				border-radius: 3em 3em 0 0;
				height: 4.5em;
				margin-left: -2.5em;
			}
		}

		&.anchored {
			position: absolute;
			left: 50%;
		}

		&:hover {
			background-color: #a8d5a3;
		}

		&:active {
			background-color: #88b583;
		}

		&.style2 {
			background-color: transparent;
			border: solid 2px #e5e6e7;
			color: inherit;

			&:hover {
				background-color: rgba(145, 146, 147, 0.035);
			}

			&.down {
				background-image: url('images/arrow.svg');
			}
		}
	}

/* Box */

	.box {
		background: #fff;
		color: #39454b;
		padding: 2em;

		&.style2 {
			padding: 3.5em 2.5em 3.5em 2.5em;
		}
	}

/* Main */

	.main {
		position: relative;
		margin: 0;
		overflow-x: hidden;

		&.fullscreen {
			height: 100%;
		}

		&.style1 {
			text-align: center;
			padding: 3em 0 3em 0;

			h2 {
				font-size: 4.25em;
				line-height: 1em;
				letter-spacing: -4px;
			}

			&:before {
				content: '';
				display: inline-block;
				vertical-align: middle;
				height: 100%;
			}

			.content {
				@include vendor('transition', 'all 1s ease');
				@include vendor('transform', 'translateZ(0)');
				opacity: 1.0;
				display: inline-block;
				vertical-align: middle;
			}

			&.inactive .content {
				opacity: 0;
			}
		}

		&.style2 {
			padding: 3em 0 3em 0;
			overflow: hidden;

			.content {
				@include vendor('transition', 'all 1s ease');
				@include vendor('transform', 'translateZ(0)');
				position: relative;
				width: 35%;
				display: inline-block;
				vertical-align: middle;
			}

			&.left {
				&:after {
					content: '';
					display: inline-block;
					vertical-align: middle;
					height: 100%;
				}

				.content {
					left: 0;
				}
			}

			&.right {
				&:before {
					content: '';
					display: inline-block;
					vertical-align: middle;
					height: 100%;
				}

				.content {
					left: 65%;
				}
			}

			&.inactive {
				&.left .content {
					left: -35%;
				}

				&.right .content {
					left: 100%;
				}
			}
		}

		&.style3 {
			text-align: center;
			padding: 6em 0 6em 0;

			.content > header {
				margin-bottom: 2em;
			}

			&.primary {
				background: #fff;
			}

			&.secondary {
				background: #f5f6f7;
			}
		}
	}

/* Dark */

	.dark {
		color: #fff;

		a {
			color: #fff;
		}

		.button.style2 {
			border-color: inherit;
			background-color: rgba(64, 64, 64, 0.05);

			&:hover {
				background-color: rgba(255, 255, 255, 0.1);
			}

			&.down {
				background-image: url('images/dark-arrow.svg');
			}
		}
	}

/* Spinner */

	@include keyframes('spinner-rotate') {
		0% { @include vendor('transform', 'scale(1) rotate(0deg)'); }
		100% { @include vendor('transform', 'scale(1) rotate(360deg)'); }
	}

/* Loader */

	@include keyframes('spinner-show') {
		0% { opacity: 0; }
		100% { opacity: 1; }
	}

	@include keyframes('spinner-hide') {
		0% {
			@include vendor('transform', 'scale(1) rotate(0deg)');
			color: #ececec;
			z-index: 100001;
		}

		99% {
			@include vendor('transform', 'scale(0.5) rotate(360deg)');
			color: #ececec;
			z-index: 100001;
		}

		100% {
			@include vendor('transform', 'scale(0.5) rotate(360deg)');
			color: #ececec;
			z-index: -1;
		}
	}

	@include keyframes('overlay-hide') {
		0% {
			opacity: 1;
			z-index: 100000;
		}

		15% {
			opacity: 1;
			z-index: 100000;
		}

		99% {
			opacity: 0;
			z-index: 100000;
		}

		100% {
			opacity: 0;
			z-index: -1;
		}
	}

	body {
		text-decoration: none;

		&:before {
			@include vendor('animation', ('spinner-show 1.5s 1 0.25s ease forwards', 'spinner-hide 0.25s ease-in-out forwards !important'));
			@include vendor('transform-origin', '50% 50%');
			-moz-osx-font-smoothing: grayscale;
			-webkit-font-smoothing: antialiased;
			font-family: FontAwesome;
			font-style: normal;
			font-weight: normal;
			text-transform: none !important;
			color: #ececec;
			content: '\f1ce';
			cursor: default;
			display: block;
			font-size: 2em;
			height: 2em;
			left: 50%;
			line-height: 2em;
			margin: -1em 0 0 -1em;
			opacity: 0;
			position: fixed;
			text-align: center;
			top: 50%;
			width: 2em;
			z-index: -1;
		}

		&:after {
			@include vendor('animation', 'overlay-hide 1.5s ease-in forwards !important');
			background: #ffffff;
			content: '';
			display: block;
			height: 100%;
			left: 0;
			opacity: 0;
			position: fixed;
			top: 0;
			width: 100%;
			z-index: -1;
		}

		&.is-loading {
			&:before {
				@include vendor('animation', ('spinner-show 1.5s 1 0.25s ease forwards', 'spinner-rotate 0.75s infinite linear !important'));
				z-index: 100001;
			}

			&:after {
				@include vendor('animation', 'none !important');
				opacity: 1;
				z-index: 100000;
			}
		}
	}

	@media (-webkit-min-device-pixel-ratio: 2) {
		body:before {
			line-height: 2.025em;
		}
	}

/* Icons */

	.icon {
		text-decoration: none;

		&:before {
			display: inline-block;
			font-family: FontAwesome;
			font-size: 1.25em;
			text-decoration: none;
			font-style: normal;
			font-weight: normal;
			line-height: 1;
			-webkit-font-smoothing: antialiased;
			-moz-osx-font-smoothing: grayscale;
		}

		> .label {
			display: none;
		}
	}

/* Header */

	#header {
		position: fixed;
		z-index: 10000;
		left: 0;
		top: 0;
		width: 100%;
		background: #fff;
		background: rgba(255, 255, 255, 0.95);
		height: 3em;
		line-height: 3em;
		box-shadow: 0 0 0.15em 0 rgba(0, 0, 0, 0.1);
	}

	body {
		padding-top: 3em;
	}

	#logo {
		position: absolute;
		left: 1em;
		top: 0;
		height: 3em;
		line-height: 3em;
		letter-spacing: -1px;

		a {
			font-size: 1.25em;
		}
	}

	#nav {
		position: absolute;
		right: 0.5em;
		top: 0;
		height: 3em;
		line-height: 3em;

		ul {
			margin: 0;

			li {
				display: inline-block;
				margin-left: 0.5em;
				font-size: 0.9em;

				a {
					display: block;
					color: inherit;
					text-decoration: none;
					height: 3em;
					line-height: 3em;
					padding: 0 0.5em 0 0.5em;
					outline: 0;
				}
			}
		}
	}

/* Intro */

	#intro {
		background: url('images/overlay.png'), url('../../images/intro.jpg');
		background-size: 256px 256px, cover;
		background-attachment: fixed, fixed;
		background-position: top left, bottom center;
		background-repeat: repeat, no-repeat;
	}

/* One */

	#one {
		background: url('images/overlay.png'), url('../../images/one.jpg');
		background-size: 256px 256px, cover;
		background-attachment: fixed, fixed;
		background-position: top left, center center;
	}

/* Two */

	#two {
		background: url('images/overlay.png'), url('../../images/two.jpg');
		background-size: 256px 256px, cover;
		background-attachment: fixed, fixed;
		background-position: top left, center center;
	}

/* Work */

	#work {
		.row.images {
			.image {
				@include vendor('transition', 'all 1s ease');
				@include vendor('transform', 'translateZ(0)');
				position: relative;
				top: 0;
				left: 0;
				opacity: 1.0;
			}

			&.inactive {
				.image {
					opacity: 0;

					&.from-left {
						left: -14em;
					}
					&.from-right {
						left: 14em;
					}
					&.from-top {
						top: -7em;
					}
					&.from-bottom {
						top: 7em;
					}
				}
			}
		}
	}

/* Contact */

	#contact {
		padding-bottom: 0;
		overflow: hidden;

		.box {
			@include vendor('transition', 'all 1s ease');
			@include vendor('transform', 'translateZ(0)');
			position: relative;
			bottom: 0;
		}

		&.inactive {
			.box {
				bottom: -30em;
			}
		}
	}

/* Footer */

	#footer {
		position: relative;
		height: 5em;
		line-height: 5em;
		margin: 0;
		background: #39454b;
		color: #999;
		color: rgba(185, 186, 187, 0.5);
		overflow: hidden;

		a {
			color: #999;
			color: rgba(185, 186, 187, 0.5);

			&:hover {
				color: #bbb;
				color: rgba(185, 186, 187, 1);
			}
		}

		.actions {
			position: absolute;
			left: 1em;
			top: 0.25em;
			height: 5em;
			line-height: 5em;
			margin: 0;

			li {
				font-size: 1.25em;
				margin: 0;

				a {
					padding: 0.5em;
				}
			}
		}

		.menu {
			position: absolute;
			right: 2em;
			top: 0;
			height: 5em;
			line-height: 5em;
			margin: 0;

			li {
				font-size: 0.9em;
			}
		}
	}

/* Poptrox */

	.poptrox-popup {
		@include vendor('box-sizing', 'content-box');
		background: #fff;
		padding-bottom: 3em;
		box-shadow: 0 0.1em 0.15em 0 rgba(0, 0, 0, 0.15);

		.loader {
			position: absolute;
			top: 50%;
			left: 50%;
			margin: -1em 0 0 -1em;
			width: 2em;
			height: 2em;
			display: block;
			font-size: 2em;

			&:before {
				@include vendor('animation', 'spinner-rotate 0.75s infinite linear !important');
				-moz-osx-font-smoothing: grayscale;
				-webkit-font-smoothing: antialiased;
				font-family: FontAwesome;
				font-style: normal;
				font-weight: normal;
				text-transform: none !important;
				color: #ececec;
				content: '\f1ce';
				cursor: default;
				display: block;
				height: 2em;
				left: 0;
				line-height: 2em;
				position: absolute;
				text-align: center;
				top: 0;
				width: 2em;
			}
		}

		.caption {
			position: absolute;
			bottom: 0;
			left: 0;
			background: #fff;
			width: 100%;
			height: 3em;
			line-height: 2.8em;
			text-align: center;
			cursor: default;
			z-index: 1;
			font-size: 0.9em;
		}

		.nav-next,
		.nav-previous {
			@include vendor('transition', 'opacity 0.2s ease-in-out');
			position: absolute;
			top: 0;
			width: 50%;
			height: 100%;
			opacity: 0;
			cursor: pointer;
			background: rgba(0, 0, 0, 0.01);
			-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
		}

		.nav-next:before,
		.nav-previous:before {
			content: '';
			position: absolute;
			width: 96px;
			height: 64px;
			background: url('images/poptrox-nav.svg');
			top: calc(50% - 1.5em);
			margin: -32px 0 0 0;
		}

		&:hover {
			.nav-next,
			.nav-previous {
				opacity: 0.5;
			}

			.nav-next:hover,
			.nav-previous:hover {
				opacity: 1.0;
			}
		}

		.nav-previous:before {
			@include vendor('transform', 'scaleX(-1)');
			-ms-filter: "FlipH";
			filter: FlipH;
		}

		.nav-next {
			right: 0;

			&:before {
				right: 0;
			}
		}

		.nav-previous {
			left: 0;

			&:before {
				left: 0;
			}
		}

		.closer {
			@include vendor('transition', 'opacity 0.2s ease-in-out');
			position: absolute;
			top: 0;
			right: 0;
			width: 64px;
			height: 64px;
			text-indent: -9999px;
			z-index: 2;
			opacity: 0;
			-webkit-tap-highlight-color: rgba(255, 255, 255, 0);

			&:before {
				content: '';
				display: block;
				position: absolute;
				right: 16px;
				top: 16px;
				width: 40px;
				height: 40px;
				border-radius: 100%;
				box-shadow: inset 0 0 0 2px #fff;
				background: url('images/poptrox-closer.svg') center center;
				color: #fff !important;
			}
		}

		&:hover {
			.closer {
				opacity: 0.5;

				&:hover {
					opacity: 1.0;
				}
			}
		}
	}

/* Touch Mode */

	body.is-touch {
		.main {
			background-attachment: scroll !important;
		}

		.poptrox-popup {
			.nav-next,
			.nav-previous,
			.closer {
				opacity: 1.0 !important;
			}
		}
	}

/* Wide */

	@include breakpoint(wide) {

		/* Basic */
			body, input, textarea, select {
				font-size: 17pt;
			}

		/* Main */
			.main.style2 {
				.content {
					width: 40%;
				}

				&.right {
					.content {
						left: 60%;
					}
				}

				&.inactive {
					&.left {
						.content {
							left: -40%;
						}
					}
				}
			}

	}

/* Normal */

	@include breakpoint(normal) {

		/* Basic */
			body, input, textarea, select {
				font-size: 15pt;
			}

	}

/* Narrow */

	@include breakpoint(narrow) {

		/* Basic */
			body, input, textarea, select {
				font-size: 13pt;
			}

		/* Main */
			.main.style2 {
				.content {
					width: 50%;
				}

				&.right {
					.content {
						left: 50%;
					}
				}

				&.inactive {
					&.left {
						.content {
							left: -50%;
						}
					}
				}
			}

	}

/* Narrower */

	@include breakpoint(narrower) {

		/* Basic */
			body, input, textarea, select {
				font-size: 13pt;
			}

			.container > .container {
				width: 100% !important;
			}

		/* Main */
			.main.style2 {
				.content {
					width: 60%;
				}

				&.right {
					.content {
						left: 40%;
					}
				}

				&.inactive {
					&.left {
						.content {
							left: -60%;
						}
					}
				}
			}

		/* Footer */
			#footer {
				height: auto;
				line-height: inherit;
				text-align: center;
				padding: 2em 1em 2em 1em;

				.actions {
					position: relative;
					left: 0;
					top: 0;
					height: auto;
					line-height: inherit;
					margin: 0 0 1em 0;
				}

				.menu {
					position: relative;
					right: 0;
					top: 0;
					height: auto;
					line-height: inherit;
				}
			}

	}

/* Mobile */

	@include breakpoint(mobile) {

		/* Basic */
			body {
				min-width: 320px;
				font-size: 12pt;
				line-height: 1.5em;
			}

			input, textarea, select {
				font-size: 12pt;
				line-height: 1.5em;
			}

			h2 {
				font-size: 1.5em;
				letter-spacing: -1px;
			}

		/* Box */
			.box {
				padding: 1em;

				&.style2 {
					padding: 1.5em 1.25em 1.5em 1.25em;
					background-color: rgba(255, 255, 255, 0.9);
				}
			}

		/* Main */
			.main {
				&.fullscreen {
					height: auto !important;
				}

				&.style1 {
					padding: 4em 15px 4em 15px;

					h2 {
						font-size: 3em;
						letter-spacing: -3px;
					}
				}

				&.style2 {
					padding: 6em 15px 6em 15px;

					&:before,
					&:after {
						display: none !important;
					}

					.button.anchored {
						display: none;
					}

					.content {
						width: 100%;
						left: 0% !important;
						text-align: center;
					}

					.tmp {
						width: 100%;
						height: 10em;
						background-size: cover;
					}
				}

				&.style3 {
					text-align: center;
					padding: 3em 10px 3em 10px;
				}
			}

		/* Header */
			#header {
				height: 2.5em;
				line-height: 2.5em;
			}

			body {
				padding-top: 2.5em;
			}

			#logo {
				text-align: center;
				position: relative;
				left: 0;
				top: 0;
				height: 2.5em;
				line-height: 2.5em;

				a {
					font-size: 1em;
				}
			}

			#nav {
				display: none;
			}

		/* Footer */
			#footer {
				.menu {
					li {
						border-left: 0;
						padding: 1em 0 0 0;
						margin: 0;
						display: block;

						&:first-child {
							padding-top: 0;
						}

						a {
							line-height: 1.5em;
						}
					}
				}
			}

		/* Poptrox */
			.poptrox-popup {
				.nav-next:before,
				.nav-previous:before {
					width: 48px;
					height: 32px;
					background-size: contain;
					margin: -16px 0 0 0;
				}

				.closer:before {
					right: 12px;
					top: 12px;
					width: 20px;
					height: 20px;
					box-shadow: inset 0 0 0 1px #fff;
					background-size: contain;
					opacity: 0.65;
				}
			}

	}