@import 'libs/vars';
@import 'libs/functions';
@import 'libs/mixins';
@import url('https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:400,300,200');

/*
	Halcyonic 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((
		desktop: '(min-width: 737px)',
		tablet: '(min-width: 737px) and (max-width: 1200px)',
		mobile: '(max-width: 736px)'
	));

	@include skel-layout((
		reset: 'full',
		boxModel: 'border',
		grid: true,
		conditionals: true,
		containers: true,
		breakpoints: (
			desktop: (
				containers: 1200px,
				grid: (
					gutters: (25px, 25px)
				),
			),
			tablet: (
				containers: 1000px,
				grid: (
					gutters: (20px, 20px)
				),
			),
			mobile: (
				containers: (100%, true),
				grid: (
					gutters: (20px, 20px)
				),
			)
		)
	));

/* Basic */

	body {
		background: #D4D9DD url('images/bg03.jpg');
		color: #474f51;
		font-size: 13.5pt;
		font-family: 'Yanone Kaffeesatz';
		line-height: 1.85em;
		font-weight: 300;
	}

	input, textarea, select {
		color: #474f51;
		font-size: 13.5pt;
		font-family: 'Yanone Kaffeesatz';
		line-height: 1.85em;
		font-weight: 300;
	}

	ul, ol, p, dl {
		margin: 0 0 2em 0;
	}

	a {
		text-decoration: underline;

		&:hover {
			text-decoration: none;
		}
	}

	section > :last-child,
	.last-child {
		margin-bottom: 0 !important;
	}

/* Multi-use */

	.link-list {
		li {
			padding: 0.2em 0 0.2em 0;

			&:first-child {
				padding-top: 0 !important;
				border-top: 0 !important;
			}

			&:last-child {
				padding-bottom: 0 !important;
				border-bottom: 0 !important;
			}
		}
	}

	.quote-list {
		li {
			padding: 1em 0 1em 0;
			overflow: hidden;

			&:first-child {
				padding-top: 0 !important;
				border-top: 0 !important;
			}

			&:last-child {
				padding-bottom: 0 !important;
				border-bottom: 0 !important;
			}

			img {
				float: left;
			}

			p {
				margin: 0 0 0 90px;
				font-size: 1.2em;
				font-style: italic;
			}

			span {
				display: block;
				margin-left: 90px;
				font-size: 0.9em;
				font-weight: 400;
			}
		}
	}

	.check-list {
		li {
			padding: 0.7em 0 0.7em 45px;
			font-size: 1.2em;
			background: url('images/icon-checkmark.png') 0px 1.05em no-repeat;

			&:first-child {
				padding-top: 0 !important;
				border-top: 0 !important;
				background-position: 0 0.3em;
			}

			&:last-child {
				padding-bottom: 0 !important;
				border-bottom: 0 !important;
			}
		}
	}

	.feature-image {
		display: block;
		margin: 0 0 2em 0;
		outline: 0;

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

	.bordered-feature-image {
		display: block;
		background: #fff url('images/bg04.png');
		padding: 10px;
		box-shadow: 3px 3px 3px 1px rgba(0, 0, 0, 0.15);
		margin: 0 0 1.5em 0;
		outline: 0;
		img {
			display: block;
			width: 100%;
		}
	}

	.button-big {
		@include vendor('background-image', 'linear-gradient(top, #ed391b, #ce1a00)');
		display: inline-block;
		background-color: #ed391b;
		color: #fff;
		text-decoration: none;
		font-size: 1.75em;
		font-weight: 300;
		padding: 15px 45px 15px 45px;
		outline: 0;
		border-radius: 10px;
		box-shadow: inset 0px 0px 0px 1px rgba(0, 0, 0, 0.75), inset 0px 2px 0px 0px rgba(255, 192, 192, 0.5), inset 0px 0px 0px 2px rgba(255, 96, 96, 0.85), 3px 3px 3px 1px rgba(0, 0, 0, 0.15);
		text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.5);

		&:hover {
			@include vendor('background-image', 'linear-gradient(top, #fd492b, #de2a10)');
			background-color: #fd492b;
			box-shadow: inset 0px 0px 0px 1px rgba(0, 0, 0, 0.75), inset 0px 2px 0px 0px rgba(255, 192, 192, 0.5), inset 0px 0px 0px 2px rgba(255, 96, 96, 0.85), 3px 3px 3px 1px rgba(0, 0, 0, 0.15);
		}

		&:active {
			@include vendor('background-image', 'linear-gradient(top, #ce1a00, #ed391b)');
			background-color: #ce1a00;
			box-shadow: inset 0px 0px 0px 1px rgba(0, 0, 0, 0.75), inset 0px 2px 0px 0px rgba(255, 192, 192, 0.5), inset 0px 0px 0px 2px rgba(255, 96, 96, 0.85), 3px 3px 3px 1px rgba(0, 0, 0, 0.15);
		}
	}

/* Content */

	#content {
		.quote-list {
			li {
				border-bottom: solid 1px #e2e6e8;
			}
		}

		.link-list {
			li {
				border-bottom: solid 1px #e2e6e8;
			}
		}

		.check-list {
			li {
				border-bottom: solid 1px #e2e6e8;
			}
		}
	}

/* Footer */

	#footer {
		.quote-list {
			li {
				border-top: solid 1px #e0e4e6;
				border-bottom: solid 1px #b5bec3;
			}
		}

		.link-list {
			li {
				border-top: solid 1px #e0e4e6;
				border-bottom: solid 1px #b5bec3;
			}
		}

		.check-list {
			li {
				border-top: solid 1px #e0e4e6;
				border-bottom: solid 1px #b5bec3;
			}
		}
	}

/* Desktop */

	@include breakpoint(desktop) {

		/* Basic */

			body {
				min-width: 1200px;
			}

			section:last-child {
				margin-bottom: 0 !important;
			}

		/* Wrappers */

			#header-wrapper {
				background: #3B4346 url('images/bg01.jpg');
				border-bottom: solid 1px #272d30;
				box-shadow: inset 0px -1px 0px 0px #51575a;
				text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.75);
			}

			.subpage #header-wrapper {
				height: 155px;
			}

			#features-wrapper {
				background: #353D40 url('images/bg02.jpg');
				border-bottom: solid 1px #272e31;
				padding: 45px 0 45px 0;
				text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.75);
			}

			#content-wrapper {
				background: #f7f7f7 url('images/bg04.png');
				border-top: solid 1px #fff;
				padding: 45px 0 45px 0;
			}

			#footer-wrapper {
				padding: 45px 0 45px 0;
				text-shadow: 1px 1px 1px rgba(255, 255, 255, 1);
			}

		/* Header */

			#header {
				min-height: 155px;
				position: relative;

				h1 {
					position: absolute;
					left: 0;
					bottom: 35px;
					font-size: 2.75em;

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

				nav {
					position: absolute;
					right: 0;
					bottom: 35px;
					font-weight: 200;

					a {
						color: #c6c8c8;
						text-decoration: none;
						font-size: 1.4em;
						margin-left: 60px;
						outline: 0;

						&:hover {
							color: #f6f8f8;
						}
					}
				}
			}

		/* Banner */

			#banner {
				border-top: solid 1px #222628;
				box-shadow: inset 0px 1px 0px 0px #3e484a;
				padding: 35px 0 35px 0;
				color: #fff;

				.bordered-feature-image {
					margin-bottom: 0;
				}

				p {
					font-size: 2em;
					font-weight: 200;
					line-height: 1.25em;
					padding-right: 1em;
					margin: 0 0 1em 0;
				}
			}

		/* Features */

			#features {
				color: #a0a8ab;

				h2 {
					font-size: 1.25em;
					color: #fff;
					margin: 0 0 0.25em 0;
				}

				a {
					color: #e0e8eb;
				}

				strong {
					color: #fff;
				}
			}

		/* Content */

			#content {
				section {
					background: #fff;
					padding: 40px 30px 45px 30px;
					box-shadow: 2px 2px 2px 1px rgba(128, 128, 128, 0.1);
					margin: 0 0 10% 0;
				}

				h2 {
					font-size: 1.8em;
					color: #373f42;
					margin: 0 0 0.25em 0;
				}

				h3 {
					color: #96a9b5;
					font-size: 1.25em;
				}

				a {
					color: #ED391B;
				}

				header {
					margin: 0 0 2em 0;
				}
			}

		/* Footer */

			#footer {
				color: #546b76;
				text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.5);

				h2 {
					font-size: 1.25em;
					color: #212f35;
					margin: 0 0 1em 0;
				}

				a {
					color: #546b76;
				}
			}

		/* Copyright */

			#copyright {
				border-top: solid 1px #b5bec3;
				box-shadow: inset 0px 1px 0px 0px #e0e4e7;
				text-align: center;
				padding: 45px 0 80px 0;
				color: #8d9ca3;
				text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.5);

				a {
					color: #8d9ca3;
				}
			}

	}

/* Tablet */

	@include breakpoint(tablet) {

		/* Basic */

			body {
				min-width: 1000px;
			}

		/* Multi-use */

			.check-list {
				li {
					font-size: 1em;
					line-height: 2em;
				}
			}

			.quote-list {
				li {
					padding: 1em 0 1em 0;

					img {
						width: 60px;
					}
					p {
						margin: 0 0 0 80px;
						font-size: 1em;
						font-style: italic;
						line-height: 1.8em;
					}
					span {
						display: block;
						margin-left: 80px;
						font-size: 0.8em;
						font-weight: 400;
						line-height: 1.8em;
					}
				}
			}

			.feature-image {
				margin: 0 0 1em 0;
			}

			.button-big {
				font-size: 1.5em;
				padding: 10px 35px 10px 35px;
			}

		/* Banner */

			#banner {
				p {
					font-size: 1.75em;
				}
			}

		/* Header */

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

				nav {
					a {
						font-size: 1.1em;
					}
				}
			}

		/* Content */

			#content {
				h2 {
					font-size: 1.4em;
				}

				h3 {
					font-size: 1.1em;
				}

				header {
					margin: 0 0 1.25em 0;
				}
			}

	}

/* Mobile */

	#navPanel, #titleBar {
		display: none;
	}

	@include breakpoint(mobile) {

		/* Basic */

			html, body {
				overflow-x: hidden;
			}

			body, input, textarea, select {
				font-size: 13pt;
				line-height: 1.4em;
			}

		/* Multi-use */

			.link-list {
				li {
					padding: 0.75em 0 0.75em 0;
				}
			}

			.quote-list {
				li {
					p {
						margin-bottom: 0.5em;
					}
				}
			}

			.check-list {
				li {
					font-size: 1em;
				}
			}

			.button-big {
				font-size: 1.5em;
				padding: 10px 35px 10px 35px;
			}

		/* Wrappers */
			#header-wrapper {
				background: #3B4346 url('images/bg01.jpg') top center;
				box-shadow: inset 0px -1px 0px 0px #272d30, inset 0px -2px 0px 0px #51575a;
				text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.75);
			}

			#features-wrapper {
				background: #353D40 url('images/bg02.jpg');
				padding: 15px 15px 30px 15px;
				text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.75);
			}

			#content-wrapper {
				background: #f7f7f7 url('images/bg04.png');
				padding: 5px;
			}

			.subpage #content-wrapper {
				padding-top: 44px;
			}

			#footer-wrapper {
				padding: 40px 15px 15px 15px;
				text-shadow: 1px 1px 1px rgba(255, 255, 255, 1);
			}

		/* Header */

			#header {
				display: none;
			}

			#banner {
				position: relative;
				color: #fff;
				text-align: center;
				padding: 30px 30px 15px 30px;
				margin-top: 44px;

				.bordered-feature-image {
					display: none;
				}

				p {
					font-size: 1.25em;
					font-weight: 200;
					line-height: 1.25em;
					margin: 0 0 1em 0;
				}
			}

		/* Features */

			#features {
				color: #a0a8ab;

				section {
					padding: 0 0 25px 0;
					margin: 0 0 25px 0;
					border-bottom: solid 1px #51575a;
					box-shadow: inset 0px -1px 0px 0px #272d30;
				}

				> div > div:last-child > section {
					padding-bottom: 0;
					margin-bottom: 0;
					border-bottom: 0;
					box-shadow: none;
				}

				h2 {
					font-size: 1.25em;
					color: #fff;
					margin: 0 0 0.25em 0;
				}

				a {
					color: #e0e8eb;
				}

				strong {
					color: #fff;
				}
			}

		/* Content */

			#content {
				section {
					background: #fff;
					box-shadow: inset 0px 0px 0px 1px rgba(128, 128, 128, 0.2);
					padding: 30px 15px 30px 15px;
					margin: 0 0 5px 0;
				}

				h2 {
					font-size: 1.25em;
					color: #373f42;
					margin: 0 0 0.1em 0;
				}

				h3 {
					color: #96a9b5;
					font-size: 1em;
				}

				a {
					color: #ED391B;
				}

				header {
					margin: 0 0 1.25em 0;
				}
			}

		/* Footer */

			#footer {
				color: #546b76;
				text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.5);

				section {
					margin: 0 0 40px 0;
				}

				h2 {
					font-size: 1.25em;
					color: #212f35;
					margin: 0 0 0.75em 0;
				}

				a {
					color: #546b76;
				}

				.link-list {
					margin: 0 0 30px 0 !important;
				}
			}

		/* Copyright */

			#copyright {
				border-top: solid 1px #b5bec3;
				box-shadow: inset 0px 1px 0px 0px #e0e4e7;
				text-align: center;
				padding: 20px 30px 20px 30px;
				color: #8d9ca3;
				text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.5);

				a {
					color: #8d9ca3;
				}
			}

		/* Off-Canvas Navigation */

			#page-wrapper {
				@include vendor('backface-visibility', 'hidden');
				@include vendor('transition', 'transform #{_duration(navPanel)} ease');
				padding-bottom: 1px;
			}

			#titleBar {
				@include vendor('backface-visibility', 'hidden');
				@include vendor('transition', 'transform #{_duration(navPanel)} ease');
				display: block;
				height: 44px;
				left: 0;
				position: fixed;
				top: 0;
				width: 100%;
				z-index: _misc(z-index-base) + 1;
				color: #fff;
				background: url('images/bg04.jpg');
				box-shadow: inset 0px -20px 70px 0px rgba(200, 220, 245, 0.1), inset 0px -1px 0px 0px rgba(255, 255, 255, 0.1), 0px 1px 7px 0px rgba(0, 0, 0, 0.6);
				text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.75);

				.title {
					display: block;
					text-align: center;
					font-size: 1.2em;
					font-weight: 400;
					line-height: 44px;
				}

				.toggle {
					position: absolute;
					left: 0;
					top: 0;
					width: 80px;
					height: 60px;

					&:after {
						content: '';
						display: block;
						position: absolute;
						top: 6px;
						left: 6px;
						color: #fff;
						background: rgba(255, 255, 255, 0.025);
						box-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.1), inset 0px 0px 0px 1px rgba(255, 255, 255, 0.05), inset 0px -8px 10px 0px rgba(0, 0, 0, 0.15), 0px 1px 2px 0px rgba(0, 0, 0, 0.25);
						text-shadow: -1px -1px 1px rgba(0, 0, 0, 1);
						width: 49px;
						height: 31px;
						border-radius: 8px;
					}

					&:before {
						content: '';
						position: absolute;
						width: 20px;
						height: 30px;
						background: url('images/mobileUI-site-nav-opener-bg.svg');
						top: 15px;
						left: 20px;
						z-index: 1;
						opacity: 0.25;
					}

					&:active {
						&:after {
							background: rgba(255, 255, 255, 0.05);
						}
					}
				}
			}

			#navPanel {
				@include vendor('backface-visibility', 'hidden');
				@include vendor('transform', 'translateX(#{_size(navPanel) * -1})');
				@include vendor('transition', ('transform #{_duration(navPanel)} ease'));
				display: block;
				height: 100%;
				left: 0;
				overflow-y: auto;
				position: fixed;
				top: 0;
				width: _size(navPanel);
				z-index: _misc(z-index-base) + 2;
				background: url('images/bg04.jpg');
				box-shadow: inset -1px 0px 0px 0px rgba(255, 255, 255, 0.25), inset -2px 0px 25px 0px rgba(0, 0, 0, 0.5);
				text-shadow: -1px -1px 1px rgba(0, 0, 0, 1);

				.link {
					display: block;
					color: #fff;
					text-decoration: none;
					font-size: 1.25em;
					line-height: 2em;
					padding: 0.5em 1.5em 0.5em 1.5em;
					border-top: solid 1px #373d40;
					border-bottom: solid 1px rgba(0, 0, 0, 0.4);

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

					&:last-child {
						border-bottom: 0;
					}
				}
			}

			body {
				&.navPanel-visible {
					#page-wrapper {
						@include vendor('transform', 'translateX(#{_size(navPanel)})');
					}

					#titleBar {
						@include vendor('transform', 'translateX(#{_size(navPanel)})');
					}

					#navPanel {
						@include vendor('transform', 'translateX(0)');
					}
				}
			}

	}