@import 'libs/vars';
@import 'libs/functions';
@import 'libs/mixins';
@import url("font-awesome.min.css");
@import url("http://fonts.googleapis.com/css?family=Lato:300,400,900");

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

	@import "libs/skel";

	@include skel-breakpoints((
		wide: '(max-width: 1680px)',
		normal: '(max-width: 1280px)',
		narrow: '(max-width: 980px)',
		narrower: '(max-width: 840px)',
		mobile: '(max-width: 736px)'
	));

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

	$pattern-background-size: 25em;

/* Basic */

	body {
		background: _palette(bg);

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

	body, input, select, textarea {
		color: _palette(fg);
		font-family: 'Lato', sans-serif;
		font-size: 15pt;
		font-weight: 300;
		letter-spacing: 0.025em;
		line-height: 1.75em;
	}

	a {
		@include vendor('transition', ('color 0.2s ease-in-out', 'border-color 0.2s ease-in-out', 'background-color 0.2s ease-in-out'));
		color: darken(_palette(one, bg), 20);
		text-decoration: none;
		border-bottom: dotted 1px;

		&:hover {
			border-bottom-color: transparent;
		}
	}

	strong, b {
		font-weight: 400;
	}

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

	h1, h2, h3, h4, h5, h6 {
		color: inherit;
		font-weight: 300;
		line-height: 1.75em;
		margin-bottom: 1em;
		text-transform: uppercase;

		a {
			color: inherit;
			text-decoration: none;
			border: 0;
		}
	}

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

	h3 {
		font-size: 1.15em;
		letter-spacing: 0.025em;
	}

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

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

	hr {
		border-top: solid 1px _palette(border);
		border: 0;
		margin-bottom: 1.5em;
	}

	blockquote {
		border-left: solid 0.5em _palette(border);
		font-style: italic;
		padding: 1em 0 1em 2em;
	}

/* Section/Article */

	section, article {
		&.special {
			text-align: center;
		}
	}

	header {
		&.major {
			padding-bottom: 2em;
		}

		&.special {
			margin-bottom: 5em;
			padding-top: 7em;
			position: relative;
			text-align: center;

			&:before,
			&:after {
				border-bottom: solid 1.5px;
				border-top: solid 1.5px;
				content: '';
				height: 7px;
				opacity: 0.1;
				position: absolute;
				top: 1.75em;
				width: 43%;
			}

			&:before {
				left: 0;
			}

			&:after {
				right: 0;
			}

			h2 {
				margin-bottom: 0;
			}

			h2 + p {
				margin-bottom: 0;
				padding-top: 1.5em;
			}

			.icon {
				cursor: default;
				height: 7em;
				left: 0;
				position: absolute;
				text-align: center;
				top: 1em;
				width: 100%;

				&:before {
					font-size: 3.5em;
					opacity: 0.35;
				}
			}
		}
	}

	footer {
		> :last-child {
			margin-bottom: 0;
		}

		&.major {
			padding-top: 3em;
		}
	}

/* Form */

	input[type="text"],
	input[type="password"],
	input[type="email"],
	textarea {
		@include vendor('transition', ('background-color 0.2s ease-in-out', 'border-color 0.2s ease-in-out'));
		@include vendor('appearance', 'none');
		background: none;
		border: solid 1px _palette(border);
		color: inherit;
		display: block;
		padding: 0.75em;
		text-decoration: none;
		width: 100%;
		outline: 0;

		&:focus {
			border-color: _palette(one, bg);
		}
	}

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

	::-webkit-input-placeholder {
		color: inherit;
		opacity: 0.5;
		position: relative;
		top: 3px;
	}

	:-moz-placeholder {
		color: inherit;
		opacity: 0.5;
	}

	::-moz-placeholder {
		color: inherit;
		opacity: 0.5;
	}

	:-ms-input-placeholder {
		color: inherit;
		opacity: 0.5;
	}

	.formerize-placeholder {
		color: transparentize(_palette(fg), 0.5) !important;
	}

/* Image */

	.image {
		border: 0;
		position: relative;

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

		&.fit {
			display: block;

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

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

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

/* Icon */

	.icon {
		@include icon;
		position: relative;

		&.circle {
			@include vendor('transition', 'all 0.2s ease-in-out');
			border: 0;
			border-radius: 100%;
			display: inline-block;
			font-size: 1.25em;
			height: 2.25em;
			left: 0;
			line-height: 2.25em;
			text-align: center;
			text-decoration: none;
			top: 0;
			width: 2.25em;

			&:hover {
				top: -0.2em;
			}

			&.fa-twitter {
				background: _palette(twitter, bg);
				color: _palette(twitter, fg);

				&:hover {
					background: lighten(_palette(twitter, bg), 4);
				}
			}

			&.fa-facebook {
				background: _palette(facebook, bg);
				color: _palette(facebook, fg);

				&:hover {
					background: lighten(_palette(facebook, bg), 4);
				}
			}

			&.fa-google-plus {
				background: _palette(google-plus, bg);
				color: _palette(google-plus, fg);

				&:hover {
					background: lighten(_palette(google-plus, bg), 4);
				}
			}

			&.fa-github {
				background: _palette(github, bg);
				color: _palette(github, fg);

				&:hover {
					background: lighten(_palette(github, bg), 4);
				}
			}

			&.fa-dribbble {
				background: _palette(dribbble, bg);
				color: _palette(dribbble, fg);

				&:hover {
					background: lighten(_palette(dribbble, bg), 4);
				}
			}
		}

		&.featured {
			cursor: default;
			display: block;
			margin: 0 0 1.5em 0;
			opacity: 0.35;
			text-align: center;

			&:before {
				font-size: 5em;
				line-height: 1em;
			}
		}

		> .label {
			display: none;
		}
	}

/* List */

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

			li {
				padding-left: 0.25em;
			}
		}
	}

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

			li {
				padding-left: 0.5em;
			}
		}

		&.icons {
			cursor: default;

			li {
				display: inline-block;
				line-height: 1em;
				padding-left: 0.5em;

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

		&.featured-icons {
			cursor: default;
			margin: -0.75em 0 0 0;
			opacity: 0.35;
			overflow: hidden;
			position: relative;

			li {
				display: block;
				float: left;
				text-align: center;
				width: 50%;

				.icon {
					display: inline-block;
					font-size: 6.25em;
					height: 1.25em;
					line-height: 1.25em;
					width: 1em;
				}
			}
		}

		&.buttons {
			cursor: default;

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

			li {
				display: inline-block;
				padding: 0 0 0 1.5em;

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

			&.vertical {
				li {
					display: block;
					padding: 1.5em 0 0 0;

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

/* Table */

	table {
		width: 100%;

		&.default {
			width: 100%;

			tbody {
				tr {
					border-bottom: solid 1px _palette(border);
				}
			}

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

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

			thead {
				background: _palette(fg);
				color: #fff;
			}

			tfoot {
			}

			tbody {
			}
		}
	}

/* Button */

	input[type="button"],
	input[type="submit"],
	input[type="reset"],
	.button {
		@include vendor('appearance', 'none');
		@include vendor('transition', ('color 0.2s ease-in-out', 'border-color 0.2s ease-in-out', 'background-color 0.2s ease-in-out'));
		background: none;
		border: solid 1px;
		color: inherit;
		cursor: pointer;
		display: inline-block;
		font-size: 0.8em;
		font-weight: 900;
		letter-spacing: 2px;
		min-width: 18em;
		padding: 0 0.75em;
		line-height: 3.75em;
		text-align: center;
		text-decoration: none;
		text-transform: uppercase;

		&:hover {
			background: rgba(188,202,206,0.15);
			border-color: inherit;
		}

		&.special {
			background: _palette(one, bg);
			border-color: _palette(one, bg);
			color: _palette(one, fg) !important;

			&:hover {
				background: lighten(_palette(one, bg), 5) !important;
				border-color: lighten(_palette(one, bg), 5) !important;
			}
		}

		&.fit {
			width: 100%;
		}

		&.small {
			font-size: 0.7em;
			min-width: 14em;
			padding: 0.5em 0;
		}
	}

/* Wrapper */

	.wrapper {
		margin-bottom: 5em;
		padding: 5em;

		&.style1 {
			padding: 0;
		}

		&.style2 {
			background-color: _palette(one, bg);
			background-image: url('images/light-bl.svg'), url('images/light-br.svg');
			background-position: bottom left, bottom right;
			background-repeat: no-repeat, no-repeat;
			background-size: $pattern-background-size, $pattern-background-size;
			color: _palette(one, fg);

			.button {
				&:hover {
					background: rgba(255,255,255,0.15) !important;
				}

				&.special {
					background: _palette(one, fg);
					border-color: _palette(one, fg);
					color: _palette(one, bg) !important;

					&:hover {
						border-color: inherit !important;
						color: _palette(one, fg) !important;
					}
				}
			}
		}

		&.style3 {
			background: _palette(two, bg);
			color: _palette(two, fg);
		}

		&.style4 {
			background: _palette(two, bg);
			color: _palette(two, fg);
			padding: 4em;
		}
	}

/* Header */

	@include keyframes('reveal-header') {
		0% { top: -5em; }
		100% { top: 0; }
	}

	#header {
		background: _palette(header, bg);
		box-shadow: 0 1px 2px 0 rgba(0,0,0,0.075);
		color: _palette(header, fg);
		cursor: default;
		font-size: 0.8em;
		left: 0;
		padding: 1em 1.5em;
		position: fixed;
		top: 0;
		width: 100%;
		z-index: 10000;

		h1 {
			font-weight: 900;
			margin: 0;

			span {
				font-weight: 300;
			}
		}

		nav {
			letter-spacing: 0.075em;
			position: absolute;
			right: 1.5em;
			text-transform: uppercase;
			top: 0.75em;

			ul {
				li {
					display: inline-block;
					margin-left: 1.5em;

					> ul {
						display: none;
					}

					a {
						border: solid 1px transparent;
						color: inherit;
						display: inline-block;
						line-height: 1em;
						padding: 0.6em 0.75em;
						text-decoration: none;
					}

					input[type="button"],
					input[type="submit"],
					input[type="reset"],
					.button {
						font-size: 1em;
						min-width: 0;
						width: auto;
					}

					&.submenu {
						> a {
							@include icon;

							&:before {
								content: '\f107';
								margin-right: 0.65em;
							}
						}
					}

					&.active,
					&:hover {
						> a {
							@include vendor('transition', 'all 0.2s ease-in-out');
							background: rgba(188,202,206,0.15);
						}
					}

					&.current {
						> a {
							font-weight: 900;
						}
					}
				}
			}
		}

		&.reveal {
			@include vendor('animation', 'reveal-header 0.5s');
		}

		&.alt {
			@include vendor('animation', 'none');
			background: _palette(header, alt-bg);
			box-shadow: none;
			color: _palette(header, alt-fg);
			padding: 2em 2.5em;
			position: absolute;

			nav {
				right: 2.5em;
				top: 1.75em;

				ul {
					li {
						&.active,
						&:hover {
							> a {
								border: solid 1px;
							}
						}
					}
				}
			}
		}
	}

/* Dropotron */

	.dropotron {
		background: #fff;
		box-shadow: 0 1px 2px 0 rgba(0,0,0,0.075);
		line-height: 2.25em;
		min-width: 13em;
		padding: 1em 0;
		text-transform: uppercase;
		margin-top: calc(-1em + 1px);

		&.level-0 {
			font-size: 0.7em;
			font-weight: 400;
			margin-top: 1.5em;

			&:before {
				border-bottom: solid 0.5em #fff;
				border-left: solid 0.5em transparent;
				border-right: solid 0.5em transparent;
				content: '';
				left: 0.75em;
				position: absolute;
				top: -0.45em;
			}
		}

		> li {
			border-top: solid 1px _palette(border);

			> a {
				@include vendor('transition', 'none');
				color: inherit;
				text-decoration: none;
				padding: 0 1em;
				border: 0;
			}

			&:hover {
				> a {
					background: _palette(one, bg);
					color: _palette(one, fg);
				}
			}

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

/* Banner */

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

	#banner {
		background-attachment: scroll, scroll, scroll, fixed;
		background-color: _palette(three, bg);
		background-image: url('images/light-bl.svg'), url('images/light-br.svg'), url('images/overlay.png'), url('../../images/banner.jpg');
		background-position: bottom left, bottom right, top left, top center;
		background-repeat: no-repeat, no-repeat, repeat, no-repeat;
		background-size: $pattern-background-size, $pattern-background-size, auto, cover;
		color: _palette(banner, fg);
		cursor: default;
		padding: 6em 0;
		text-align: center;

		.inner {
			@include vendor('animation', 'reveal-banner 1s 0.25s ease-in-out');
			@include vendor('animation-fill-mode', 'forwards');
			background: transparentize(_palette(banner, inner-bg), 0.5);
			color: _palette(banner, inner-fg);
			display: inline-block;
			opacity: 0;
			padding: 3em;
			text-align: center;

			header {
				display: inline-block;
				border-bottom: solid 2px;
				border-top: solid 2px;
				margin: 0 0 2em 0;
				padding: 3px 0 3px 0;

				h2 {
					border-bottom: solid 2px;
					border-top: solid 2px;
					font-size: 2.5em;
					font-weight: 900;
					letter-spacing: 0.2em;
					margin: 0;
					padding-left: 0.05em;
					position: relative;
					text-transform: uppercase;
				}
			}

			p {
				letter-spacing: 0.1em;
				margin: 0;
				text-transform: uppercase;

				a {
					color: inherit;
					font-weight: 400;
					text-decoration: none;
				}
			}

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

/* Main */

	#main {
		background-image: url('images/dark-tl.svg'), url('images/dark-tr.svg'), url('images/dark-bl.svg'), url('images/dark-br.svg');
		background-position: top left, top right, bottom left, bottom right;
		background-repeat: no-repeat;
		background-size: $pattern-background-size;
		padding: 7em 0;

		> :last-child {
			margin-bottom: 0;
		}

		.sidebar {
			section {
				border-top: solid 1px _palette(border);
				margin: 3em 0 0 0;
				padding: 3em 0 0 0;

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

	body.index #main {
		padding-top: 5em;
	}

/* CTA */

	#cta {
		background-attachment: scroll, scroll, scroll, fixed;
		background-color: _palette(three, bg);
		background-image: url('images/light-tl.svg'), url('images/light-tr.svg'), url('images/overlay.png'), url('../../images/banner.jpg');
		background-position: top left, top right, top left, bottom center;
		background-repeat: no-repeat, no-repeat, repeat, no-repeat;
		background-size: $pattern-background-size, $pattern-background-size, auto, cover;
		color: _palette(three, fg);
		padding: 5em;
		text-align: center;

		header {
			margin-bottom: 2em;
		}
	}

/* Footer */

	#footer {
		background: _palette(footer, bg);
		color: _palette(footer, fg);
		padding: 5em 5em 10em 5em;
		text-align: center;

		.copyright {
			font-size: 0.8em;
			line-height: 1em;

			a {
				color: inherit;
			}

			li {
				display: inline-block;
				margin-left: 1em;
				padding-left: 1em;
				border-left: dotted 1px;

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

/* Wide */

	@include breakpoint(wide) {

		/* Basic */

			body, input, select, textarea {
				font-size: 14pt;
			}

		/* Section/Article */

			header {
				&.special {
					padding-top: 5.5em;
					margin-bottom: 4em;
				}
			}

	}

/* Normal */

	@include breakpoint(normal) {

		/* Basic */

			body, input, select, textarea {
				font-size: 13pt;
				letter-spacing: 0.025em;
				line-height: 1.65em;
			}

			h1, h2, h3, h4, h5, h6 {
				line-height: 1.5em;
			}

		/* Section/Article */

			header {
				&.major {
					padding-bottom: 1.5em;
				}
			}

			footer {
				&.major {
					padding-top: 2em;
				}
			}

		/* Wrapper */

			.wrapper {
				margin-bottom: 4em;
				padding: 4em 3em;

				&.style4 {
					padding: 3em;
				}
			}

		/* Header */

			#header {
				nav {
					ul {
						li {
							margin-left: 1em;
						}
					}
				}
			}

		/* Banner */

			#banner {
				background-attachment: scroll;
			}

		/* CTA */

			#cta {
				padding: 4em;
				background-attachment: scroll;
			}

		/* Footer */

			#footer {
				padding: 4em;
			}

	}

/* Narrow */

	@include breakpoint(narrow) {

		$pattern-background-size: 15em;

		/* Basic */

			body, input, select, textarea {
				font-size: 13pt;
				letter-spacing: 0.025em;
				line-height: 1.5em;
			}

		/* Section/Article */

			header {
				br {
					display: none;
				}

				&.major {
					padding-bottom: 1em;
				}

				&.special {
					padding-left: 2.5em;
					padding-right: 2.5em;
				}
			}

			footer {
				&.major {
					padding-top: 1.5em;
				}
			}

		/* Wrapper */

			.wrapper {
				margin-bottom: 3em;
				padding: 3em 2.5em;

				&.special {
					br {
						display: none;
					}
				}

				&.style1 {
					padding: 0 2.5em;
				}

				&.style2 {
					background-size: $pattern-background-size;
				}

				&.style4 {
					padding: 2.5em;
				}
			}

		/* Banner */

			#banner {
				background-size: $pattern-background-size, $pattern-background-size, auto, cover;
			}

		/* Main */

			#main {
				background-size: $pattern-background-size;
			}

		/* CTA */

			#cta {
				background-size: $pattern-background-size, $pattern-background-size, auto, cover;
				padding: 3em;
			}

	}

/* Narrower */

	#navPanel, #navButton {
		display: none;
	}

	@include breakpoint(narrower) {

		/* Basic */

			html, body {
				overflow-x: hidden;
			}

			header {
				&.major {
					padding-bottom: 0.25em;
				}

				&.special {
					margin-bottom: 4em;
					padding-top: 5em;

					&:before,
					&:after {
						width: 40%;
					}

					h2 + p {
						padding-top: 1.25em;
					}
				}
			}

		/* Section/Article */

			section {
				margin: 1em 0 1em 0;

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

		/* Button */

			input[type="button"],
			input[type="submit"],
			input[type="reset"],
			.button {
				&.small {
					font-size: 0.8em;
					min-width: 18em;
					padding: 0.75em 0;
				}
			}

		/* List */

			ul {
				&.featured-icons {
					margin: 0;

					li {
						display: inline-block;
						float: none;
						width: auto;

						.icon {
							font-size: 4em;
							width: 1.25em;
						}
					}
				}

				&.buttons {
					li {
						display: block;
						padding: 1em 0 0 0;
					}
				}
			}

		/* Header */

			#header {
				display: none;
			}

		/* Banner */

			#banner {
				margin: 0;
			}

		/* Wrapper */

			.wrapper {
				&.special-alt {
					text-align: center;
				}

				&.style4 {
					padding-bottom: 3em;
				}
			}

		/* Main */

			#main {
				padding: 5em 0;

				.sidebar {
					border-top: solid 1px transparentize(_palette(fg), 0.9);
					padding-top: 3em;

					section {
						border-top: 0;
						padding-top: 0;
					}
				}
			}

			body.index #main {
				padding-top: 4.5em;
			}

		/* CTA */

			#cta {
				margin: 0;
			}

		/* Footer */

			#footer {
				padding: 4em 1.5em;
			}

		/* Off-Canvas Navigation */

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

			#navButton {
				@include vendor('backface-visibility', 'hidden');
				@include vendor('transition', 'transform #{_duration(navPanel)} ease');
				display: block;
				height: 60px;
				left: 0;
				position: fixed;
				top: 0;
				width: 100%;
				z-index: _misc(z-index-base) + 1;

				.toggle {
					@include icon;
					height: 60px;
					left: 0;
					position: absolute;
					text-align: center;
					top: 0;
					width: 100%;
					border: 0;
					outline: 0;

					&:before {
						color: _palette(navButton, fg);
						content: '\f0c9';
						font-size: 1em;
						height: 40px;
						left: 10px;
						line-height: 40px;
						opacity: 0.5;
						position: absolute;
						top: 11px;
						width: 60px;
						z-index: 1;
					}

					&:after {
						background: _palette(navButton, bg);
						border-radius: 2px;
						content: '';
						height: 40px;
						left: 10px;
						position: absolute;
						top: 10px;
						width: 60px;
					}
				}
			}

			#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: _palette(navPanel, bg);
				color: _palette(navPanel, fg);
				font-size: 0.8em;
				letter-spacing: 0.075em;
				text-transform: uppercase;
				padding: 0.25em 0.75em 1em 0.75em;

				.link {
					border: 0;
					border-top: solid 1px transparentize(_palette(navPanel, fg), 0.95);
					color: inherit;
					display: block;
					height: 3em;
					line-height: 3em;
					opacity: 0.75;
					text-decoration: none;

					&.depth-0 {
						font-weight: 900;
					}

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

				.indent-1 { display: inline-block; width: 1em; }
				.indent-2 { display: inline-block; width: 2em; }
				.indent-3 { display: inline-block; width: 3em; }
				.indent-4 { display: inline-block; width: 4em; }
				.indent-5 { display: inline-block; width: 5em; }
			}

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

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

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

	}

/* Mobile */

	@include breakpoint(mobile) {

		$pattern-background-size: 10em;

		/* Basic */

			body {
				min-width: 320px;
			}

			h2 {
				font-size: 1.25em;
				letter-spacing: 0.1em;
			}

			h3 {
				font-size: 1em;
				letter-spacing: 0.025em;
			}

			p {
				text-align: justify;
			}

		/* Section/Article */

			header {
				text-align: center;

				&.major {
					padding-bottom: 0;
				}

				&.special {
					margin-bottom: 3em;
					padding-left: 1.5em;
					padding-right: 1.5em;

					&:before,
					&:after {
						width: 38%;
					}

					.icon {
						font-size: 0.75em;
						top: 1.5em;
					}
				}

				p {
					text-align: center;
				}
			}

			footer {
				&.major {
					padding-top: 0;
				}
			}

		/* Icon */

			.icon {
				&.circle {
					font-size: 1em;
				}
			}

		/* Button */

			input[type="button"],
			input[type="submit"],
			input[type="reset"],
			.button {
				max-width: 20em;
				width: 100%;

				&.fit {
					width: auto;
				}
			}

		/* List */

			ul {
				&.icons {
					li {
						padding-left: 0.25em;
					}
				}

				&.featured-icons {
					li {
						.icon {
							width: 1.1em;
						}
					}
				}

				&.buttons {
					text-align: center;
				}
			}

		/* Wrapper */

			.wrapper {
				margin-bottom: 2.5em;
				padding: 2.25em 1.5em;

				&.special {
					br {
						display: none;
					}
				}

				&.style1 {
					padding: 0 1.5em;
				}

				&.style2 {
					background-size: $pattern-background-size;
					padding: 2.25em 1.5em;
				}

				&.style4 {
					background-size: $pattern-background-size;
					padding: 1.5em 1.5em 3em 1.5em;
				}
			}

		/* Banner */

			#banner {
				background-size: $pattern-background-size, $pattern-background-size, auto, cover;
				padding: 6em 0;

				.inner {
					background: none;
					display: block;
					padding: 0 1.5em;

					header {
						h2 {
							font-size: 1.5em;
						}
					}

					p {
						text-align: center;
					}

					br {
						display: none;
					}
				}
			}

		/* Main */

			#main {
				background-size: $pattern-background-size;
				padding: 3.5em 0 2.5em 0;
			}

			body.index #main {
				padding: 2.5em 0 0 0;
			}

			body.contact #main {
				padding-bottom: 0;
			}

		/* CTA */

			#cta {
				background-size: $pattern-background-size, $pattern-background-size, auto, cover;
				padding: 3em 1.5em;
			}

		/* Footer */

			#footer {
				padding: 3em 1.5em;

				.copyright {
					li {
						display: block;
						margin: 1em 0 0 0;
						padding: 0;
						border: 0;
					}
				}
			}

		/* Off-Canvas Navigation */

			#navButton {
				.toggle {
					&:before {
						top: 8px;
						left: 8px;
						width: 50px;
						height: 34px;
						line-height: 34px;
					}

					&:after {
						top: 8px;
						left: 8px;
						width: 50px;
						height: 34px;
					}
				}
			}

	}