Initial.

README.txt

@@ -0,0 +1,32 @@
+Highlights by HTML5 UP
+html5up.net | @n33co
+Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+
+
+Just a fun little single pager I whipped up to test out my new scroll events plugin
+(github.com/n33/jquery.scrollex). Clean, simple, fully responsive, and loaded with
+all the usual pre-styled elements. Enjoy :)
+
+Demo images* courtesy of Unsplash, a radtastic collection of CC0 (public domain) images
+you can use for pretty much whatever.
+
+(* = Not included)
+
+Feedback, bug reports, and comments are not only welcome, but strongly encouraged :)
+
+AJ
+n33.co @n33co dribbble.com/n33
+
+
+Credits:
+
+	Demo Images:
+		Unsplash (unsplash.com)
+
+	Icons:
+		Font Awesome (fortawesome.github.com/Font-Awesome)
+
+	Other:
+		jQuery (jquery.com)
+		html5shiv.js (@afarkas @jdalton @jon_neal @rem)
+		Skel (getskel.com)

css/ie/html5shiv.js

@@ -0,0 +1,8 @@
+/*
+ HTML5 Shiv v3.6.2 | @afarkas @jdalton @jon_neal @rem | MIT/GPL2 Licensed
+*/
+(function(l,f){function m(){var a=e.elements;return"string"==typeof a?a.split(" "):a}function i(a){var b=n[a[o]];b||(b={},h++,a[o]=h,n[h]=b);return b}function p(a,b,c){b||(b=f);if(g)return b.createElement(a);c||(c=i(b));b=c.cache[a]?c.cache[a].cloneNode():r.test(a)?(c.cache[a]=c.createElem(a)).cloneNode():c.createElem(a);return b.canHaveChildren&&!s.test(a)?c.frag.appendChild(b):b}function t(a,b){if(!b.cache)b.cache={},b.createElem=a.createElement,b.createFrag=a.createDocumentFragment,b.frag=b.createFrag();
+a.createElement=function(c){return!e.shivMethods?b.createElem(c):p(c,a,b)};a.createDocumentFragment=Function("h,f","return function(){var n=f.cloneNode(),c=n.createElement;h.shivMethods&&("+m().join().replace(/\w+/g,function(a){b.createElem(a);b.frag.createElement(a);return'c("'+a+'")'})+");return n}")(e,b.frag)}function q(a){a||(a=f);var b=i(a);if(e.shivCSS&&!j&&!b.hasCSS){var c,d=a;c=d.createElement("p");d=d.getElementsByTagName("head")[0]||d.documentElement;c.innerHTML="x<style>article,aside,figcaption,figure,footer,header,hgroup,main,nav,section{display:block}mark{background:#FF0;color:#000}</style>";
+c=d.insertBefore(c.lastChild,d.firstChild);b.hasCSS=!!c}g||t(a,b);return a}var k=l.html5||{},s=/^<|^(?:button|map|select|textarea|object|iframe|option|optgroup)$/i,r=/^(?:a|b|code|div|fieldset|h1|h2|h3|h4|h5|h6|i|label|li|ol|p|q|span|strong|style|table|tbody|td|th|tr|ul)$/i,j,o="_html5shiv",h=0,n={},g;(function(){try{var a=f.createElement("a");a.innerHTML="<xyz></xyz>";j="hidden"in a;var b;if(!(b=1==a.childNodes.length)){f.createElement("a");var c=f.createDocumentFragment();b="undefined"==typeof c.cloneNode||
+"undefined"==typeof c.createDocumentFragment||"undefined"==typeof c.createElement}g=b}catch(d){g=j=!0}})();var e={elements:k.elements||"abbr article aside audio bdi canvas data datalist details figcaption figure footer header hgroup main mark meter nav output progress section summary time video",version:"3.6.2",shivCSS:!1!==k.shivCSS,supportsUnknownElements:g,shivMethods:!1!==k.shivMethods,type:"default",shivDocument:q,createElement:p,createDocumentFragment:function(a,b){a||(a=f);if(g)return a.createDocumentFragment();
+for(var b=b||i(a),c=b.frag.cloneNode(),d=0,e=m(),h=e.length;d<h;d++)c.createElement(e[d]);return c}};l.html5=e;q(f)})(this,document);

css/ie/v8.css

@@ -0,0 +1,147 @@
+/*
+	Highlights by HTML5 UP
+	html5up.net | @n33co
+	Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+*/
+
+/* Basic */
+
+	body, html {
+		height: 100%;
+	}
+
+	html {
+		background: none;
+	}
+
+/* List */
+
+	ul.actions li {
+		padding: 0 0 0 1em;
+	}
+
+		ul.actions li:first-child {
+			padding-left: 0;
+		}
+
+/* Form */
+
+	input[type="text"],
+	input[type="password"],
+	input[type="email"],
+	select,
+	textarea {
+		border: solid 2px #dddddd;
+		position: relative;
+	}
+
+	input[type="text"],
+	input[type="password"],
+	input[type="email"] {
+		line-height: 3em;
+	}
+
+	input[type="checkbox"],
+	input[type="radio"] {
+		font-size: 3em;
+	}
+
+		input[type="checkbox"] + label:before,
+		input[type="radio"] + label:before {
+			display: none;
+		}
+
+/* Button */
+
+	input[type="submit"],
+	input[type="reset"],
+	input[type="button"],
+	button,
+	.button {
+		border: solid 2px #dddddd;
+	}
+
+/* Main BG */
+
+	.main-bg {
+		z-index: 0;
+	}
+
+/* Main */
+
+	.main {
+		background-size: cover;
+	}
+
+		.main .container {
+			background: #fff;
+			border-top: solid 1px #dddddd;
+			position: relative;
+			z-index: 1;
+		}
+
+		.main .goto-next {
+			text-decoration: none;
+		}
+
+			.main .goto-next:before {
+				-moz-osx-font-smoothing: grayscale;
+				-webkit-font-smoothing: antialiased;
+				font-family: FontAwesome;
+				font-style: normal;
+				font-weight: normal;
+				text-transform: none !important;
+			}
+
+			.main .goto-next:before {
+				color: #dddddd;
+				content: '\f063';
+				display: block;
+				font-size: 2em;
+				height: 2em;
+				left: 0;
+				line-height: 2em;
+				position: absolute;
+				text-align: center;
+				text-indent: 0;
+				top: 0;
+				width: 2em;
+			}
+
+/* Header */
+
+	#header {
+		-ms-behavior: url("css/ie/backgroundsize.min.htc");
+		background-image: url("../../images/bg.jpg");
+		background-size: cover;
+		height: 100%;
+	}
+
+		#header:after {
+			min-height: 100%;
+		}
+
+		#header header {
+			position: relative;
+			z-index: 1;
+		}
+
+		#header .container {
+			background: #fff;
+			z-index: 1;
+		}
+
+/* Footer */
+
+	#footer {
+		-ms-behavior: url("css/ie/backgroundsize.min.htc");
+		background-image: url("../../images/bg.jpg");
+		background-size: cover;
+	}
+
+		#footer .container {
+			background: #fff;
+			border-top: solid 1px #dddddd;
+			position: relative;
+			z-index: 1;
+		}

css/ie/v9.css

@@ -0,0 +1,11 @@
+/*
+	Highlights by HTML5 UP
+	html5up.net | @n33co
+	Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+*/
+
+/* Loader */
+
+	html body:before, html body:after {
+		display: none !important;
+	}

css/images/arrow.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="36px" height="36px" viewBox="0 0 36 36" zoomAndPan="disable" preserveAspectRatio="none">
+    <style type="text/css"><![CDATA[ line { stroke: #d0d0d0; stroke-width: 2px; } ]]></style>
+	<line x1="0" y1="18" x2="18" y2="36" />
+	<line x1="36" y1="18" x2="18" y2="36" />
+	<line x1="18" y1="36" x2="18" y2="0" />
+</svg>

css/skel.css

@@ -0,0 +1,247 @@
+/* Resets (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,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;}body{line-height:1;}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;}body{-webkit-text-size-adjust:none}
+
+/* Box Model */
+
+	*, *:before, *:after {
+		-moz-box-sizing: border-box;
+		-webkit-box-sizing: border-box;
+		box-sizing: border-box;
+	}
+
+/* Container */
+
+	.container {
+		margin-left: auto;
+		margin-right: auto;
+
+		/* width: (containers) */
+		width: 35em;
+	}
+
+	/* Modifiers */
+
+		/* 125% */
+			.container.\31 25\25 {
+				width: 100%;
+
+				/* max-width: (containers * 1.25) */
+				max-width: 43.75em;
+
+				/* min-width: (containers) */
+				min-width: 35em;
+			}
+
+		/* 75% */
+			.container.\37 5\25 {
+
+				/* width: (containers * 0.75) */
+				width: 26.25em;
+
+			}
+
+		/* 50% */
+			.container.\35 0\25 {
+
+				/* width: (containers * 0.50) */
+				width: 17.5em;
+
+			}
+
+		/* 25% */
+			.container.\32 5\25 {
+
+				/* width: (containers * 0.25) */
+				width: 8.75em;
+
+			}
+
+/* Grid */
+
+	.row {
+		border-bottom: solid 1px transparent;
+	}
+
+	.row > * {
+		float: left;
+	}
+
+	.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;
+	}
+
+	/* Gutters */
+
+		/* Normal */
+
+			.row > * {
+				/* padding: (gutters.horizontal) 0 0 (gutters.vertical) */
+				padding: 0 0 0 1.5em;
+			}
+
+			.row {
+				/* margin: -(gutters.horizontal) 0 -1px -(gutters.vertical) */
+				margin: 0 0 -1px -1.5em;
+			}
+
+			.row.uniform > * {
+				/* padding: (gutters.vertical) 0 0 (gutters.vertical) */
+				padding: 1.5em 0 0 1.5em;
+			}
+
+			.row.uniform {
+				/* margin: -(gutters.vertical) 0 -1px -(gutters.vertical) */
+				margin: -1.5em 0 -1px -1.5em;
+			}
+
+		/* 200% */
+
+			.row.\32 00\25 > * {
+				/* padding: (gutters.horizontal) 0 0 (gutters.vertical) */
+				padding: 0 0 0 3em;
+			}
+
+			.row.\32 00\25 {
+				/* margin: -(gutters.horizontal) 0 -1px -(gutters.vertical) */
+				margin: 0 0 -1px -3em;
+			}
+
+			.row.uniform.\32 00\25 > * {
+				/* padding: (gutters.vertical) 0 0 (gutters.vertical) */
+				padding: 3em 0 0 3em;
+			}
+
+			.row.uniform.\32 00\25 {
+				/* margin: -(gutters.vertical) 0 -1px -(gutters.vertical) */
+				margin: -3em 0 -1px -3em;
+			}
+
+		/* 150% */
+
+			.row.\31 50\25 > * {
+				/* padding: (gutters.horizontal) 0 0 (gutters.vertical) */
+				padding: 0 0 0 2.25em;
+			}
+
+			.row.\31 50\25 {
+				/* margin: -(gutters.horizontal) 0 -1px -(gutters.vertical) */
+				margin: 0 0 -1px -2.25em;
+			}
+
+			.row.uniform.\31 50\25 > * {
+				/* padding: (gutters.vertical) 0 0 (gutters.vertical) */
+				padding: 2.25em 0 0 2.25em;
+			}
+
+			.row.uniform.\31 50\25 {
+				/* margin: -(gutters.vertical) 0 -1px -(gutters.vertical) */
+				margin: -2.25em 0 -1px -2.25em;
+			}
+
+		/* 50% */
+
+			.row.\35 0\25 > * {
+				/* padding: (gutters.horizontal) 0 0 (gutters.vertical) */
+				padding: 0 0 0 0.75em;
+			}
+
+			.row.\35 0\25 {
+				/* margin: -(gutters.horizontal) 0 -1px -(gutters.vertical) */
+				margin: 0 0 -1px -0.75em;
+			}
+
+			.row.uniform.\35 0\25 > * {
+				/* padding: (gutters.vertical) 0 0 (gutters.vertical) */
+				padding: 0.75em 0 0 0.75em;
+			}
+
+			.row.uniform.\35 0\25 {
+				/* margin: -(gutters.vertical) 0 -1px -(gutters.vertical) */
+				margin: -0.75em 0 -1px -0.75em;
+			}
+
+		/* 25% */
+
+			.row.\32 5\25 > * {
+				/* padding: (gutters.horizontal) 0 0 (gutters.vertical) */
+				padding: 0 0 0 0.375em;
+			}
+
+			.row.\32 5\25 {
+				/* margin: -(gutters.horizontal) 0 -1px -(gutters.vertical) */
+				margin: 0 0 -1px -0.375em;
+			}
+
+			.row.uniform.\32 5\25 > * {
+				/* padding: (gutters.vertical) 0 0 (gutters.vertical) */
+				padding: 0.375em 0 0 0.375em;
+			}
+
+			.row.uniform.\32 5\25 {
+				/* margin: -(gutters.vertical) 0 -1px -(gutters.vertical) */
+				margin: -0.375em 0 -1px -0.375em;
+			}
+
+		/* 0% */
+
+			.row.\30 \25 > * {
+				padding: 0;
+			}
+
+			.row.\30 \25 {
+				margin: 0 0 -1px 0;
+			}
+
+	/* Cells */
+
+		.\31 2u, .\31 2u\24 { width: 100%; clear: none; margin-left: 0; }
+		.\31 1u, .\31 1u\24 { width: 91.6666666667%; clear: none; margin-left: 0; }
+		.\31 0u, .\31 0u\24 { width: 83.3333333333%; clear: none; margin-left: 0; }
+		.\39 u, .\39 u\24 { width: 75%; clear: none; margin-left: 0; }
+		.\38 u, .\38 u\24 { width: 66.6666666667%; clear: none; margin-left: 0; }
+		.\37 u, .\37 u\24 { width: 58.3333333333%; clear: none; margin-left: 0; }
+		.\36 u, .\36 u\24 { width: 50%; clear: none; margin-left: 0; }
+		.\35 u, .\35 u\24 { width: 41.6666666667%; clear: none; margin-left: 0; }
+		.\34 u, .\34 u\24 { width: 33.3333333333%; clear: none; margin-left: 0; }
+		.\33 u, .\33 u\24 { width: 25%; clear: none; margin-left: 0; }
+		.\32 u, .\32 u\24 { width: 16.6666666667%; clear: none; margin-left: 0; }
+		.\31 u, .\31 u\24 { width: 8.3333333333%; clear: none; margin-left: 0; }
+
+		.\31 2u\24 + *,
+		.\31 1u\24 + *,
+		.\31 0u\24 + *,
+		.\39 u\24 + *,
+		.\38 u\24 + *,
+		.\37 u\24 + *,
+		.\36 u\24 + *,
+		.\35 u\24 + *,
+		.\34 u\24 + *,
+		.\33 u\24 + *,
+		.\32 u\24 + *,
+		.\31 u\24 + * {
+			clear: left;
+		}
+
+		.\-11u { margin-left: 91.6666666667% }
+		.\-10u { margin-left: 83.3333333333% }
+		.\-9u { margin-left: 75% }
+		.\-8u { margin-left: 66.6666666667% }
+		.\-7u { margin-left: 58.3333333333% }
+		.\-6u { margin-left: 50% }
+		.\-5u { margin-left: 41.6666666667% }
+		.\-4u { margin-left: 33.3333333333% }
+		.\-3u { margin-left: 25% }
+		.\-2u { margin-left: 16.6666666667% }
+		.\-1u { margin-left: 8.3333333333% }

css/style-large.css

@@ -0,0 +1,11 @@
+/*
+	Highlights by HTML5 UP
+	html5up.net | @n33co
+	Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+*/
+
+/* Basic */
+
+	body, input, select, textarea {
+		font-size: 12pt;
+	}

css/style-medium.css

@@ -0,0 +1,55 @@
+/*
+	Highlights by HTML5 UP
+	html5up.net | @n33co
+	Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+*/
+
+/* Main BG */
+
+	.main-bg {
+		display: none;
+	}
+
+/* Main */
+
+	.main .image.primary {
+		display: block;
+		margin: 0 0 4em 0;
+	}
+
+	.main .container {
+		padding: 3em 3em 8em 3em;
+	}
+
+		.main .container:before {
+			display: none;
+		}
+
+/* Header */
+
+	#header header {
+		padding-bottom: 9em;
+		width: 80%;
+	}
+
+	#header .container {
+		margin-left: -40%;
+		padding: 3em;
+	}
+
+/* Footer */
+
+	#footer {
+		min-height: 0;
+		padding: 0;
+	}
+
+		#footer .container {
+			padding: 3em 3em 1em 3em;
+		}
+
+		#footer footer {
+			padding: 3em 3em 1em 3em;
+			bottom: auto;
+			position: relative;
+		}

css/style-small.css

@@ -0,0 +1,57 @@
+/*
+	Highlights by HTML5 UP
+	html5up.net | @n33co
+	Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+*/
+
+/* Basic */
+
+	h2 {
+		font-size: 1.35em;
+	}
+
+/* Main */
+
+	.main .container {
+		padding: 3em 1.5em 1em 1.5em;
+	}
+
+		.main .container .image.primary:first-child {
+			margin: -1.5em 0 2.5em 0;
+		}
+
+	.main .goto-next {
+		display: none;
+	}
+
+/* Header */
+
+	#header {
+		height: 80vh;
+	}
+
+		#header:after {
+			height: 80vh;
+		}
+
+		#header header {
+			padding-bottom: 0;
+		}
+
+			#header header h1 {
+				font-size: 2em;
+			}
+
+			#header header p {
+				margin-top: 1em;
+			}
+
+		#header .container {
+			display: none;
+		}
+
+/* Footer */
+
+	#footer .container {
+		padding: 3em 1.5em 1em 1.5em;
+	}

css/style-xsmall.css

@@ -0,0 +1,108 @@
+/*
+	Highlights by HTML5 UP
+	html5up.net | @n33co
+	Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+*/
+
+/* Basic */
+
+	html, body {
+		min-width: 320px;
+	}
+
+/* List */
+
+	ul.actions {
+		margin: 0 0 2em 0;
+	}
+
+		ul.actions li {
+			display: block;
+			padding: 1em 0 0 0;
+			text-align: center;
+			width: 100%;
+		}
+
+			ul.actions li:first-child {
+				padding-top: 0;
+			}
+
+			ul.actions li > * {
+				margin: 0 !important;
+				width: 100%;
+			}
+
+		ul.actions.small li {
+			padding: 0.5em 0 0 0;
+		}
+
+			ul.actions.small li:first-child {
+				padding-top: 0;
+			}
+
+	ul.icons-grid li {
+		box-shadow: inset 0 1px 0 0 #dddddd !important;
+		float: none;
+		margin: 2em 0 0 0;
+		padding: 2em 0 0 0;
+		width: 100%;
+	}
+
+		ul.icons-grid li:first-child {
+			box-shadow: none !important;
+			margin-top: 0;
+			padding: 1em 0 0 0;
+		}
+
+		ul.icons-grid li:nth-child(2n + 1) {
+			box-shadow: none;
+		}
+
+		ul.icons-grid li:nth-child(2n + 3):before {
+			display: none;
+		}
+
+/* Button */
+
+	input[type="submit"],
+	input[type="reset"],
+	input[type="button"],
+	button,
+	.button {
+		padding: 0;
+	}
+
+		input[type="submit"].icon,
+		input[type="reset"].icon,
+		input[type="button"].icon,
+		button.icon,
+		.button.icon {
+			padding-left: 0;
+		}
+
+/* Main */
+
+	.main .container {
+		padding: 3em 1em 1em 1em;
+	}
+
+		.main .container .image.primary:first-child {
+			margin: -2em 0 2.5em 0;
+		}
+
+/* Footer */
+
+	#footer .container {
+		padding: 3em 1em 1em 1em;
+	}
+
+	#footer footer .copyright {
+		line-height: inherit;
+	}
+
+		#footer footer .copyright li {
+			border-left: 0;
+			display: block;
+			margin: 0;
+			padding: 0;
+		}

css/style.css

@@ -0,0 +1,1222 @@
+@import url(font-awesome.min.css);
+@import url("http://fonts.googleapis.com/css?family=Raleway:400,400italic,700,800");
+
+/*
+	Highlights by HTML5 UP
+	html5up.net | @n33co
+	Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+*/
+
+/* Basic */
+
+	html {
+		background-color: #313a3d;
+		background-attachment: fixed,						fixed;
+		background-image: url("images/overlay.png"), url("../images/bg.jpg");
+		background-position: top left,					center center;
+		background-repeat: repeat,						none;
+		background-size: auto,						cover;
+	}
+
+	html.is-loading body *, html.is-loading body *:before, html.is-loading body *:after {
+		-moz-animation: none !important;
+		-webkit-animation: none !important;
+		-o-animation: none !important;
+		-ms-animation: none !important;
+		animation: none !important;
+		-moz-transition: none !important;
+		-webkit-transition: none !important;
+		-o-transition: none !important;
+		-ms-transition: none !important;
+		transition: none !important;
+	}
+
+	html.is-touch {
+		height: 100vh;
+		overflow: hidden;
+	}
+
+		html.is-touch #wrapper {
+			-webkit-backface-visibility: hidden;
+			-webkit-overflow-scrolling: touch;
+			-webkit-transform: translate3d(0, 0, 0);
+			height: 100vh;
+			overflow: auto;
+		}
+
+	body, input, select, textarea {
+		color: #6f7577;
+		font-family: "Raleway", "Helvetica", sans-serif;
+		font-size: 15pt;
+		font-weight: 400;
+		line-height: 1.75em;
+	}
+
+	a {
+		-moz-transition: color 0.2s ease-in-out, border-bottom-color 0.2s ease-in-out;
+		-webkit-transition: color 0.2s ease-in-out, border-bottom-color 0.2s ease-in-out;
+		-o-transition: color 0.2s ease-in-out, border-bottom-color 0.2s ease-in-out;
+		-ms-transition: color 0.2s ease-in-out, border-bottom-color 0.2s ease-in-out;
+		transition: color 0.2s ease-in-out, border-bottom-color 0.2s ease-in-out;
+		border-bottom: dotted 1px;
+		color: #8cd1a8;
+		text-decoration: none;
+	}
+
+		a:hover {
+			border-bottom-color: transparent !important;
+			color: #8cd1a8 !important;
+			text-decoration: none;
+		}
+
+	strong, b {
+		color: #61686b;
+		font-weight: 700;
+	}
+
+	em, i {
+		font-style: italic;
+	}
+
+	p {
+		margin: 0 0 2em 0;
+	}
+
+	h1, h2, h3, h4, h5, h6 {
+		color: #61686b;
+		font-weight: 800;
+		letter-spacing: 0.075em;
+		line-height: 1em;
+		margin: 0 0 1em 0;
+		text-transform: uppercase;
+	}
+
+		h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
+			color: inherit;
+			text-decoration: none;
+		}
+
+	h2 {
+		font-size: 1.75em;
+		line-height: 1.5em;
+	}
+
+	h3 {
+		font-size: 1em;
+		line-height: 1.5em;
+	}
+
+	h4 {
+		font-size: 0.9em;
+		line-height: 1.5em;
+	}
+
+	h5 {
+		font-size: 0.8em;
+		line-height: 1.5em;
+	}
+
+	h6 {
+		font-size: 0.7em;
+		line-height: 1.5em;
+	}
+
+	sub {
+		font-size: 0.8em;
+		position: relative;
+		top: 0.5em;
+	}
+
+	sup {
+		font-size: 0.8em;
+		position: relative;
+		top: -0.5em;
+	}
+
+	hr {
+		border: 0;
+		border-bottom: solid 1px #dddddd;
+		margin: 2em 0;
+	}
+
+		hr.major {
+			margin: 3em 0;
+		}
+
+	blockquote {
+		border-left: solid 6px #dddddd;
+		font-style: italic;
+		margin: 0 0 2em 0;
+		padding: 0.5em 0 0.5em 1.5em;
+	}
+
+	code {
+		background: rgba(144, 144, 144, 0.075);
+		font-family: "Courier New", monospace;
+		font-size: 0.9em;
+		margin: 0 0.25em;
+		padding: 0.25em 0.65em;
+	}
+
+	pre {
+		-webkit-overflow-scrolling: touch;
+		font-family: "Courier New", monospace;
+		font-size: 0.9em;
+		margin: 0 0 2em 0;
+	}
+
+		pre code {
+			display: block;
+			line-height: 1.75em;
+			padding: 1em 1.5em;
+			overflow-x: auto;
+		}
+
+	.align-left {
+		text-align: left;
+	}
+
+	.align-center {
+		text-align: center;
+	}
+
+	.align-right {
+		text-align: right;
+	}
+
+/* Loader */
+	@-moz-keyframes spinner-show { 0% { opacity: 0; } 100% { opacity: 1; } }
+	@-webkit-keyframes spinner-show { 0% { opacity: 0; } 100% { opacity: 1; } }
+	@-o-keyframes spinner-show { 0% { opacity: 0; } 100% { opacity: 1; } }
+	@-ms-keyframes spinner-show { 0% { opacity: 0; } 100% { opacity: 1; } }
+	@keyframes spinner-show { 0% { opacity: 0; } 100% { opacity: 1; } }
+	@-moz-keyframes spinner-hide { 0% { color: #454d50; z-index: 10001; -moz-transform: scale(1) rotate(0deg); -webkit-transform: scale(1) rotate(0deg); -o-transform: scale(1) rotate(0deg); -ms-transform: scale(1) rotate(0deg); transform: scale(1) rotate(0deg); } 99% { color: #313a3d; z-index: 10001; -moz-transform: scale(0.5) rotate(360deg); -webkit-transform: scale(0.5) rotate(360deg); -o-transform: scale(0.5) rotate(360deg); -ms-transform: scale(0.5) rotate(360deg); transform: scale(0.5) rotate(360deg); } 100% { color: #313a3d; z-index: -1; -moz-transform: scale(0) rotate(360deg); -webkit-transform: scale(0) rotate(360deg); -o-transform: scale(0) rotate(360deg); -ms-transform: scale(0) rotate(360deg); transform: scale(0) rotate(360deg); } }
+	@-webkit-keyframes spinner-hide { 0% { color: #454d50; z-index: 10001; -moz-transform: scale(1) rotate(0deg); -webkit-transform: scale(1) rotate(0deg); -o-transform: scale(1) rotate(0deg); -ms-transform: scale(1) rotate(0deg); transform: scale(1) rotate(0deg); } 99% { color: #313a3d; z-index: 10001; -moz-transform: scale(0.5) rotate(360deg); -webkit-transform: scale(0.5) rotate(360deg); -o-transform: scale(0.5) rotate(360deg); -ms-transform: scale(0.5) rotate(360deg); transform: scale(0.5) rotate(360deg); } 100% { color: #313a3d; z-index: -1; -moz-transform: scale(0) rotate(360deg); -webkit-transform: scale(0) rotate(360deg); -o-transform: scale(0) rotate(360deg); -ms-transform: scale(0) rotate(360deg); transform: scale(0) rotate(360deg); } }
+	@-o-keyframes spinner-hide { 0% { color: #454d50; z-index: 10001; -moz-transform: scale(1) rotate(0deg); -webkit-transform: scale(1) rotate(0deg); -o-transform: scale(1) rotate(0deg); -ms-transform: scale(1) rotate(0deg); transform: scale(1) rotate(0deg); } 99% { color: #313a3d; z-index: 10001; -moz-transform: scale(0.5) rotate(360deg); -webkit-transform: scale(0.5) rotate(360deg); -o-transform: scale(0.5) rotate(360deg); -ms-transform: scale(0.5) rotate(360deg); transform: scale(0.5) rotate(360deg); } 100% { color: #313a3d; z-index: -1; -moz-transform: scale(0) rotate(360deg); -webkit-transform: scale(0) rotate(360deg); -o-transform: scale(0) rotate(360deg); -ms-transform: scale(0) rotate(360deg); transform: scale(0) rotate(360deg); } }
+	@-ms-keyframes spinner-hide { 0% { color: #454d50; z-index: 10001; -moz-transform: scale(1) rotate(0deg); -webkit-transform: scale(1) rotate(0deg); -o-transform: scale(1) rotate(0deg); -ms-transform: scale(1) rotate(0deg); transform: scale(1) rotate(0deg); } 99% { color: #313a3d; z-index: 10001; -moz-transform: scale(0.5) rotate(360deg); -webkit-transform: scale(0.5) rotate(360deg); -o-transform: scale(0.5) rotate(360deg); -ms-transform: scale(0.5) rotate(360deg); transform: scale(0.5) rotate(360deg); } 100% { color: #313a3d; z-index: -1; -moz-transform: scale(0) rotate(360deg); -webkit-transform: scale(0) rotate(360deg); -o-transform: scale(0) rotate(360deg); -ms-transform: scale(0) rotate(360deg); transform: scale(0) rotate(360deg); } }
+	@keyframes spinner-hide { 0% { color: #454d50; z-index: 10001; -moz-transform: scale(1) rotate(0deg); -webkit-transform: scale(1) rotate(0deg); -o-transform: scale(1) rotate(0deg); -ms-transform: scale(1) rotate(0deg); transform: scale(1) rotate(0deg); } 99% { color: #313a3d; z-index: 10001; -moz-transform: scale(0.5) rotate(360deg); -webkit-transform: scale(0.5) rotate(360deg); -o-transform: scale(0.5) rotate(360deg); -ms-transform: scale(0.5) rotate(360deg); transform: scale(0.5) rotate(360deg); } 100% { color: #313a3d; z-index: -1; -moz-transform: scale(0) rotate(360deg); -webkit-transform: scale(0) rotate(360deg); -o-transform: scale(0) rotate(360deg); -ms-transform: scale(0) rotate(360deg); transform: scale(0) rotate(360deg); } }
+	@-moz-keyframes spinner-rotate { 0% { -moz-transform: scale(1) rotate(0deg); -webkit-transform: scale(1) rotate(0deg); -o-transform: scale(1) rotate(0deg); -ms-transform: scale(1) rotate(0deg); transform: scale(1) rotate(0deg); } 100% { -moz-transform: scale(1) rotate(360deg); -webkit-transform: scale(1) rotate(360deg); -o-transform: scale(1) rotate(360deg); -ms-transform: scale(1) rotate(360deg); transform: scale(1) rotate(360deg); } }
+	@-webkit-keyframes spinner-rotate { 0% { -moz-transform: scale(1) rotate(0deg); -webkit-transform: scale(1) rotate(0deg); -o-transform: scale(1) rotate(0deg); -ms-transform: scale(1) rotate(0deg); transform: scale(1) rotate(0deg); } 100% { -moz-transform: scale(1) rotate(360deg); -webkit-transform: scale(1) rotate(360deg); -o-transform: scale(1) rotate(360deg); -ms-transform: scale(1) rotate(360deg); transform: scale(1) rotate(360deg); } }
+	@-o-keyframes spinner-rotate { 0% { -moz-transform: scale(1) rotate(0deg); -webkit-transform: scale(1) rotate(0deg); -o-transform: scale(1) rotate(0deg); -ms-transform: scale(1) rotate(0deg); transform: scale(1) rotate(0deg); } 100% { -moz-transform: scale(1) rotate(360deg); -webkit-transform: scale(1) rotate(360deg); -o-transform: scale(1) rotate(360deg); -ms-transform: scale(1) rotate(360deg); transform: scale(1) rotate(360deg); } }
+	@-ms-keyframes spinner-rotate { 0% { -moz-transform: scale(1) rotate(0deg); -webkit-transform: scale(1) rotate(0deg); -o-transform: scale(1) rotate(0deg); -ms-transform: scale(1) rotate(0deg); transform: scale(1) rotate(0deg); } 100% { -moz-transform: scale(1) rotate(360deg); -webkit-transform: scale(1) rotate(360deg); -o-transform: scale(1) rotate(360deg); -ms-transform: scale(1) rotate(360deg); transform: scale(1) rotate(360deg); } }
+	@keyframes spinner-rotate { 0% { -moz-transform: scale(1) rotate(0deg); -webkit-transform: scale(1) rotate(0deg); -o-transform: scale(1) rotate(0deg); -ms-transform: scale(1) rotate(0deg); transform: scale(1) rotate(0deg); } 100% { -moz-transform: scale(1) rotate(360deg); -webkit-transform: scale(1) rotate(360deg); -o-transform: scale(1) rotate(360deg); -ms-transform: scale(1) rotate(360deg); transform: scale(1) rotate(360deg); } }
+	@-moz-keyframes overlay-hide { 0% { opacity: 1; z-index: 10000; } 15% { opacity: 1; z-index: 10000; } 99% { opacity: 0; z-index: 10000; } 100% { opacity: 0; z-index: -1; } }
+	@-webkit-keyframes overlay-hide { 0% { opacity: 1; z-index: 10000; } 15% { opacity: 1; z-index: 10000; } 99% { opacity: 0; z-index: 10000; } 100% { opacity: 0; z-index: -1; } }
+	@-o-keyframes overlay-hide { 0% { opacity: 1; z-index: 10000; } 15% { opacity: 1; z-index: 10000; } 99% { opacity: 0; z-index: 10000; } 100% { opacity: 0; z-index: -1; } }
+	@-ms-keyframes overlay-hide { 0% { opacity: 1; z-index: 10000; } 15% { opacity: 1; z-index: 10000; } 99% { opacity: 0; z-index: 10000; } 100% { opacity: 0; z-index: -1; } }
+	@keyframes overlay-hide { 0% { opacity: 1; z-index: 10000; } 15% { opacity: 1; z-index: 10000; } 99% { opacity: 0; z-index: 10000; } 100% { opacity: 0; z-index: -1; } }
+
+	html body {
+		text-decoration: none;
+	}
+
+		html body:before {
+			-moz-osx-font-smoothing: grayscale;
+			-webkit-font-smoothing: antialiased;
+			font-family: FontAwesome;
+			font-style: normal;
+			font-weight: normal;
+			text-transform: none !important;
+		}
+
+		html body:before {
+			-moz-animation: spinner-show 1.5s 1 0.25s ease forwards, spinner-hide 0.25s ease-in-out forwards !important;
+			-webkit-animation: spinner-show 1.5s 1 0.25s ease forwards, spinner-hide 0.25s ease-in-out forwards !important;
+			-o-animation: spinner-show 1.5s 1 0.25s ease forwards, spinner-hide 0.25s ease-in-out forwards !important;
+			-ms-animation: spinner-show 1.5s 1 0.25s ease forwards, spinner-hide 0.25s ease-in-out forwards !important;
+			animation: spinner-show 1.5s 1 0.25s ease forwards, spinner-hide 0.25s ease-in-out forwards !important;
+			-moz-transform-origin: 50% 50%;
+			-webkit-transform-origin: 50% 50%;
+			-o-transform-origin: 50% 50%;
+			-ms-transform-origin: 50% 50%;
+			transform-origin: 50% 50%;
+			color: #454d50;
+			content: '\f1ce';
+			cursor: default;
+			display: block;
+			font-size: 2em;
+			height: 2em;
+			left: 50%;
+			opacity: 0;
+			line-height: 2em;
+			margin: -1em 0 0 -1em;
+			position: fixed;
+			text-align: center;
+			top: 50%;
+			width: 2em;
+			z-index: -1;
+		}
+
+		html body:after {
+			-moz-animation: overlay-hide 1s ease-in forwards !important;
+			-webkit-animation: overlay-hide 1s ease-in forwards !important;
+			-o-animation: overlay-hide 1s ease-in forwards !important;
+			-ms-animation: overlay-hide 1s ease-in forwards !important;
+			animation: overlay-hide 1s ease-in forwards !important;
+			background: #313a3d;
+			content: '';
+			display: block;
+			height: 100%;
+			left: 0;
+			opacity: 0;
+			position: fixed;
+			top: 0;
+			width: 100%;
+			z-index: -1;
+		}
+
+	html.is-loading body:before {
+		-moz-animation: spinner-show 1.5s 1 0.25s ease forwards, spinner-rotate 0.75s infinite linear !important;
+		-webkit-animation: spinner-show 1.5s 1 0.25s ease forwards, spinner-rotate 0.75s infinite linear !important;
+		-o-animation: spinner-show 1.5s 1 0.25s ease forwards, spinner-rotate 0.75s infinite linear !important;
+		-ms-animation: spinner-show 1.5s 1 0.25s ease forwards, spinner-rotate 0.75s infinite linear !important;
+		animation: spinner-show 1.5s 1 0.25s ease forwards, spinner-rotate 0.75s infinite linear !important;
+		z-index: 10001;
+	}
+
+	html.is-loading body:after {
+		-moz-animation: none !important;
+		-webkit-animation: none !important;
+		-o-animation: none !important;
+		-ms-animation: none !important;
+		animation: none !important;
+		opacity: 1;
+		z-index: 10000;
+	}
+@media (-webkit-min-device-pixel-ratio: 2) {
+  html body:before {
+    line-height: 2.025em;
+
+}
+}
+
+/* Section/Article */
+
+	section.special, article.special {
+		text-align: center;
+	}
+
+	header p {
+		color: #a8b0b3;
+		letter-spacing: 0.05em;
+		text-transform: uppercase;
+	}
+
+	header h1 + p {
+		margin-top: -1em;
+	}
+
+	header h2 + p {
+		margin-top: -1em;
+	}
+
+	header h3 + p {
+		margin-top: -0.8em;
+	}
+
+	header h4 + p,
+	header h5 + p,
+	header h6 + p {
+		font-size: 0.8em;
+		margin-top: -0.6em;
+	}
+
+	header.major {
+		text-align: center;
+	}
+
+		header.major h1, header.major h2, header.major h3, header.major h4, header.major h5, header.major h6 {
+			position: relative;
+		}
+
+			header.major h1:after, header.major h2:after, header.major h3:after, header.major h4:after, header.major h5:after, header.major h6:after {
+				background: #dddddd;
+				content: '';
+				display: block;
+				height: 2px;
+				margin: 0.75em auto 0 auto;
+				position: relative;
+				width: 4em;
+			}
+
+		header.major p {
+			margin-top: 0;
+		}
+
+/* Form */
+
+	form {
+		margin: 0 0 2em 0;
+	}
+
+	label {
+		color: #61686b;
+		display: block;
+		font-size: 0.9em;
+		font-weight: 700;
+		margin: 0 0 1em 0;
+	}
+
+	input[type="text"],
+	input[type="password"],
+	input[type="email"],
+	select,
+	textarea {
+		-moz-appearance: none;
+		-webkit-appearance: none;
+		-o-appearance: none;
+		-ms-appearance: none;
+		appearance: none;
+		background: rgba(144, 144, 144, 0.15);
+		border-radius: 0;
+		border: none;
+		color: inherit;
+		display: block;
+		outline: 0;
+		padding: 0 1em;
+		text-decoration: none;
+		width: 100%;
+	}
+
+		input[type="text"]:invalid,
+		input[type="password"]:invalid,
+		input[type="email"]:invalid,
+		select:invalid,
+		textarea:invalid {
+			box-shadow: none;
+		}
+
+		input[type="text"]:focus,
+		input[type="password"]:focus,
+		input[type="email"]:focus,
+		select:focus,
+		textarea:focus {
+			box-shadow: inset 0 0 0 2px #8cd1a8;
+		}
+
+	.select-wrapper {
+		text-decoration: none;
+		display: block;
+		position: relative;
+	}
+
+		.select-wrapper:before {
+			-moz-osx-font-smoothing: grayscale;
+			-webkit-font-smoothing: antialiased;
+			font-family: FontAwesome;
+			font-style: normal;
+			font-weight: normal;
+			text-transform: none !important;
+		}
+
+		.select-wrapper:before {
+			color: #a8b0b3;
+			content: '\f078';
+			display: block;
+			height: 3em;
+			line-height: 3em;
+			pointer-events: none;
+			position: absolute;
+			right: 0;
+			text-align: center;
+			top: 0;
+			width: 3em;
+		}
+
+		.select-wrapper select::-ms-expand {
+			display: none;
+		}
+
+	input[type="text"],
+	input[type="password"],
+	input[type="email"],
+	select {
+		height: 3em;
+	}
+
+	textarea {
+		padding: 0.75em 1em;
+	}
+
+	input[type="checkbox"],
+	input[type="radio"] {
+		-moz-appearance: none;
+		-webkit-appearance: none;
+		-o-appearance: none;
+		-ms-appearance: none;
+		appearance: none;
+		display: block;
+		float: left;
+		margin-right: -2em;
+		opacity: 0;
+		width: 1em;
+		z-index: -1;
+	}
+
+		input[type="checkbox"] + label,
+		input[type="radio"] + label {
+			text-decoration: none;
+			color: #6f7577;
+			cursor: pointer;
+			display: inline-block;
+			font-size: 1em;
+			font-weight: 400;
+			padding-left: 2.55em;
+			padding-right: 0.75em;
+			position: relative;
+		}
+
+			input[type="checkbox"] + label:before,
+			input[type="radio"] + label:before {
+				-moz-osx-font-smoothing: grayscale;
+				-webkit-font-smoothing: antialiased;
+				font-family: FontAwesome;
+				font-style: normal;
+				font-weight: normal;
+				text-transform: none !important;
+			}
+
+			input[type="checkbox"] + label:before,
+			input[type="radio"] + label:before {
+				background: rgba(144, 144, 144, 0.15);
+				content: '';
+				display: inline-block;
+				height: 1.8em;
+				left: 0;
+				line-height: 1.725em;
+				position: absolute;
+				text-align: center;
+				top: 0;
+				width: 1.8em;
+			}
+
+		input[type="checkbox"]:checked + label:before,
+		input[type="radio"]:checked + label:before {
+			background: #313a3d;
+			color: #ffffff;
+			content: '\f00c';
+		}
+
+		input[type="checkbox"]:focus + label:before,
+		input[type="radio"]:focus + label:before {
+			box-shadow: inset 0 0 0 2px #8cd1a8;
+		}
+
+	input[type="radio"] + label:before {
+		border-radius: 100%;
+	}
+
+	::-webkit-input-placeholder {
+		color: #a8b0b3 !important;
+		opacity: 1.0;
+	}
+
+	:-moz-placeholder {
+		color: #a8b0b3 !important;
+		opacity: 1.0;
+	}
+
+	::-moz-placeholder {
+		color: #a8b0b3 !important;
+		opacity: 1.0;
+	}
+
+	:-ms-input-placeholder {
+		color: #a8b0b3 !important;
+		opacity: 1.0;
+	}
+
+	.formerize-placeholder {
+		color: #a8b0b3 !important;
+		opacity: 1.0;
+	}
+
+/* Box */
+
+	.box {
+		border: solid 2px #dddddd;
+		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;
+		}
+
+		.icon > .label {
+			display: none;
+		}
+
+		.icon.major {
+			display: block;
+			margin: 0 0 1em 0;
+		}
+
+			.icon.major:before {
+				font-size: 2.5em;
+			}
+
+/* Image */
+
+	.image {
+		border: 0;
+		display: inline-block;
+		position: relative;
+	}
+
+		.image:before {
+			background: url("images/overlay.png");
+			content: '';
+			display: block;
+			height: 100%;
+			left: 0;
+			position: absolute;
+			top: 0;
+			width: 100%;
+		}
+
+		.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.left, .image.right {
+			max-width: 40%;
+		}
+
+			.image.left img, .image.right img {
+				width: 100%;
+			}
+
+		.image.fit {
+			display: block;
+			margin: 0 0 2em 0;
+			width: 100%;
+		}
+
+			.image.fit img {
+				width: 100%;
+			}
+
+/* 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 1px #dddddd;
+				padding: 0.5em 0;
+			}
+
+				ul.alt li:first-child {
+					border-top: 0;
+					padding-top: 0;
+				}
+
+		ul.icons {
+			cursor: default;
+			list-style: none;
+			padding-left: 0;
+		}
+
+			ul.icons li {
+				display: inline-block;
+				padding: 0 1.5em 0 0;
+			}
+
+				ul.icons li:last-child {
+					padding-right: 0;
+				}
+
+				ul.icons li .icon:before {
+					font-size: 1.5em;
+				}
+
+		ul.icons-grid {
+			list-style: none;
+			padding: 0;
+			position: relative;
+		}
+
+			ul.icons-grid li {
+				display: block;
+				float: left;
+				padding: 3em 0;
+				width: 50%;
+			}
+
+				ul.icons-grid li h3 {
+					margin: 0;
+				}
+
+				ul.icons-grid li:nth-child(2n + 1) {
+					box-shadow: inset -1px 0 0 0 #dddddd, 1px 0 0 0 #dddddd;
+				}
+
+				ul.icons-grid li:nth-child(2n + 3):before {
+					background: #dddddd;
+					content: '';
+					display: block;
+					height: 2px;
+					margin-top: -3em;
+					position: absolute;
+					width: 100%;
+				}
+
+			ul.icons-grid:after {
+				clear: both;
+				content: '';
+				display: block;
+			}
+
+		ul.actions {
+			cursor: default;
+			list-style: none;
+			padding-left: 0;
+		}
+
+			ul.actions li {
+				display: inline-block;
+				padding: 0 1em 0 0;
+				vertical-align: middle;
+			}
+
+				ul.actions li:last-child {
+					padding-right: 0;
+				}
+
+			ul.actions.small li {
+				padding: 0 0.5em 0 0;
+			}
+
+			ul.actions.vertical li {
+				display: block;
+				padding: 1em 0 0 0;
+			}
+
+				ul.actions.vertical li:first-child {
+					padding-top: 0;
+				}
+
+				ul.actions.vertical li > * {
+					margin-bottom: 0;
+				}
+
+			ul.actions.vertical.small li {
+				padding: 0.5em 0 0 0;
+			}
+
+				ul.actions.vertical.small li:first-child {
+					padding-top: 0;
+				}
+
+			ul.actions.fit {
+				display: table;
+				margin-left: -1em;
+				padding: 0;
+				table-layout: fixed;
+				width: calc(100% + 1em);
+			}
+
+				ul.actions.fit li {
+					display: table-cell;
+					padding: 0 0 0 1em;
+				}
+
+					ul.actions.fit li > * {
+						margin-bottom: 0;
+						min-width: 0;
+					}
+
+				ul.actions.fit.small {
+					margin-left: -0.5em;
+					width: calc(100% + 0.5em);
+				}
+
+					ul.actions.fit.small li {
+						padding: 0 0 0 0.5em;
+					}
+
+	dl {
+		margin: 0 0 2em 0;
+	}
+
+/* Table */
+
+	.table-wrapper {
+		-webkit-overflow-scrolling: touch;
+		overflow-x: auto;
+	}
+
+	table {
+		margin: 0 0 2em 0;
+		width: 100%;
+	}
+
+		table tbody tr {
+			border: solid 1px #dddddd;
+			border-left: 0;
+			border-right: 0;
+		}
+
+			table tbody tr:nth-child(2n + 1) {
+				background-color: rgba(144, 144, 144, 0.075);
+			}
+
+		table td {
+			padding: 0.75em 0.75em;
+		}
+
+		table th {
+			color: #61686b;
+			font-size: 0.9em;
+			font-weight: 700;
+			padding: 0 0.75em 0.75em 0.75em;
+			text-align: left;
+		}
+
+		table thead {
+			border-bottom: solid 2px #dddddd;
+		}
+
+		table tfoot {
+			border-top: solid 2px #dddddd;
+		}
+
+		table.alt {
+			border-collapse: separate;
+		}
+
+			table.alt tbody tr td {
+				border: solid 1px #dddddd;
+				border-left-width: 0;
+				border-top-width: 0;
+			}
+
+				table.alt tbody tr td:first-child {
+					border-left-width: 1px;
+				}
+
+			table.alt tbody tr:first-child td {
+				border-top-width: 1px;
+			}
+
+			table.alt thead {
+				border-bottom: 0;
+			}
+
+			table.alt tfoot {
+				border-top: 0;
+			}
+
+/* Button */
+
+	input[type="submit"],
+	input[type="reset"],
+	input[type="button"],
+	button,
+	.button {
+		-moz-appearance: none;
+		-webkit-appearance: none;
+		-o-appearance: none;
+		-ms-appearance: none;
+		appearance: none;
+		-moz-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
+		-webkit-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
+		-o-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
+		-ms-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
+		transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
+		background-color: transparent;
+		border-radius: 0;
+		border: 0;
+		box-shadow: inset 0 0 0 2px #dddddd;
+		color: #61686b !important;
+		cursor: pointer;
+		display: inline-block;
+		font-weight: 700;
+		height: 3em;
+		letter-spacing: 0.05em;
+		line-height: 3.15em;
+		padding: 0 2em;
+		text-align: center;
+		text-decoration: none;
+		text-transform: uppercase;
+		white-space: nowrap;
+	}
+
+		input[type="submit"]:hover,
+		input[type="reset"]:hover,
+		input[type="button"]:hover,
+		button:hover,
+		.button:hover {
+			background-color: rgba(144, 144, 144, 0.075);
+			color: #61686b !important;
+		}
+
+		input[type="submit"]:active,
+		input[type="reset"]:active,
+		input[type="button"]:active,
+		button:active,
+		.button:active {
+			background-color: rgba(144, 144, 144, 0.15);
+			color: #61686b !important;
+		}
+
+		input[type="submit"].icon,
+		input[type="reset"].icon,
+		input[type="button"].icon,
+		button.icon,
+		.button.icon {
+			padding-left: 1.35em;
+		}
+
+			input[type="submit"].icon:before,
+			input[type="reset"].icon:before,
+			input[type="button"].icon:before,
+			button.icon:before,
+			.button.icon:before {
+				color: #a8b0b3;
+				margin-right: 0.5em;
+			}
+
+		input[type="submit"].fit,
+		input[type="reset"].fit,
+		input[type="button"].fit,
+		button.fit,
+		.button.fit {
+			display: block;
+			margin: 0 0 1em 0;
+			width: 100%;
+		}
+
+		input[type="submit"].small,
+		input[type="reset"].small,
+		input[type="button"].small,
+		button.small,
+		.button.small {
+			font-size: 0.8em;
+		}
+
+		input[type="submit"].big,
+		input[type="reset"].big,
+		input[type="button"].big,
+		button.big,
+		.button.big {
+			font-size: 1.35em;
+		}
+
+		input[type="submit"].special,
+		input[type="reset"].special,
+		input[type="button"].special,
+		button.special,
+		.button.special {
+			background-color: #8cd1a8;
+			border: 0;
+			box-shadow: none;
+			color: #ffffff !important;
+		}
+
+			input[type="submit"].special:hover,
+			input[type="reset"].special:hover,
+			input[type="button"].special:hover,
+			button.special:hover,
+			.button.special:hover {
+				background-color: #9ed8b6;
+			}
+
+			input[type="submit"].special:active,
+			input[type="reset"].special:active,
+			input[type="button"].special:active,
+			button.special:active,
+			.button.special:active {
+				background-color: #7aca9a;
+			}
+
+			input[type="submit"].special.icon:before,
+			input[type="reset"].special.icon:before,
+			input[type="button"].special.icon:before,
+			button.special.icon:before,
+			.button.special.icon:before {
+				color: #d1ecdc;
+			}
+
+		input[type="submit"].disabled, input[type="submit"]:disabled,
+		input[type="reset"].disabled,
+		input[type="reset"]:disabled,
+		input[type="button"].disabled,
+		input[type="button"]:disabled,
+		button.disabled,
+		button:disabled,
+		.button.disabled,
+		.button:disabled {
+			background-color: #6f7577 !important;
+			box-shadow: none !important;
+			color: #fff !important;
+			cursor: default;
+			opacity: 0.25;
+		}
+
+/* Main BG */
+
+	.main-bg {
+		-moz-transition: opacity 0.5s ease-out;
+		-webkit-transition: opacity 0.5s ease-out;
+		-o-transition: opacity 0.5s ease-out;
+		-ms-transition: opacity 0.5s ease-out;
+		transition: opacity 0.5s ease-out;
+		background-attachment: fixed,							fixed;
+		background-position: top left,						center center;
+		background-repeat: repeat,							none;
+		background-size: auto,							cover;
+		height: 100%;
+		left: 0;
+		opacity: 0;
+		position: fixed;
+		top: 0;
+		width: 100%;
+		z-index: -1;
+	}
+
+		.main-bg.active {
+			opacity: 1;
+		}
+
+/* Main */
+
+	.main {
+		position: relative;
+	}
+
+		.main .image.primary {
+			display: none;
+		}
+
+		.main .container {
+			padding: 5em 2.5em 8em 2.5em;
+			background: rgba(255, 255, 255, 0.95);
+			box-shadow: inset 0 1px 0 0 #dddddd;
+		}
+
+			.main .container:before {
+				min-height: calc( 100vh - 13em );
+				content: '';
+				display: inline-block;
+				vertical-align: middle;
+				width: 1px;
+			}
+
+			.main .container .content {
+				display: inline-block;
+				margin-right: 1px;
+				vertical-align: middle;
+				width: calc(100% - 10px);
+			}
+
+		.main .goto-next {
+			-moz-transition: background-color 0.2s ease-in-out;
+			-webkit-transition: background-color 0.2s ease-in-out;
+			-o-transition: background-color 0.2s ease-in-out;
+			-ms-transition: background-color 0.2s ease-in-out;
+			transition: background-color 0.2s ease-in-out;
+			background-color: rgba(144, 144, 144, 0.075);
+			background-image: url("images/arrow.svg");
+			background-position: center center;
+			background-repeat: no-repeat;
+			border-radius: 100%;
+			border: 0;
+			bottom: 3em;
+			display: block;
+			height: 4em;
+			left: 50%;
+			line-height: 4em;
+			margin-left: -2em;
+			overflow: hidden;
+			position: absolute;
+			text-indent: 4em;
+			white-space: nowrap;
+			width: 4em;
+		}
+
+			.main .goto-next:hover {
+				background-color: rgba(144, 144, 144, 0.15);
+			}
+
+/* Header */
+
+	#header {
+		height: 100vh;
+		position: relative;
+		text-align: center;
+	}
+
+		#header:after {
+			content: '';
+			display: inline-block;
+			height: 100vh;
+			vertical-align: middle;
+		}
+
+		#header header {
+			color: rgba(255, 255, 255, 0.5);
+			display: inline-block;
+			padding-bottom: 8em;
+			vertical-align: middle;
+		}
+
+			#header header h1, #header header h2, #header header h3, #header header h4, #header header h5, #header header h6, #header header strong, #header header b {
+				color: #ffffff;
+			}
+
+			#header header a {
+				color: inherit;
+			}
+
+				#header header a:hover {
+					color: #ffffff !important;
+				}
+
+			#header header h1 {
+				font-size: 3em;
+				line-height: 1.25em;
+				margin: 0;
+			}
+
+				#header header h1:after {
+					margin-top: 0.5em;
+				}
+
+			#header header p {
+				color: #ffffff;
+				font-weight: 700;
+				margin: 1.5em 0 0 0;
+			}
+
+		#header .container {
+			background: rgba(255, 255, 255, 0.95);
+			bottom: 0;
+			left: 50%;
+			margin-left: -17.5em;
+			padding: 2.5em;
+			position: absolute;
+		}
+
+			#header .container > :last-child {
+				margin-bottom: 0;
+			}
+
+			#header .container .button {
+				min-width: 12em;
+			}
+
+/* Footer */
+
+	#footer {
+		min-height: 100vh;
+		padding: 0 0 12em 0;
+		position: relative;
+		text-align: center;
+	}
+
+		#footer .container {
+			padding: 5em 2.5em 3em 2.5em;
+			background: rgba(255, 255, 255, 0.95);
+			box-shadow: inset 0 1px 0 0 #dddddd;
+		}
+
+		#footer footer {
+			bottom: 2em;
+			color: rgba(255, 255, 255, 0.5);
+			left: 0;
+			position: absolute;
+			text-align: center;
+			width: 100%;
+		}
+
+			#footer footer h1, #footer footer h2, #footer footer h3, #footer footer h4, #footer footer h5, #footer footer h6, #footer footer strong, #footer footer b {
+				color: #ffffff;
+			}
+
+			#footer footer a {
+				color: inherit;
+			}
+
+				#footer footer a:hover {
+					color: #ffffff !important;
+				}
+
+			#footer footer .copyright {
+				font-size: 0.8em;
+				line-height: 1em;
+				padding: 0;
+			}
+
+				#footer footer .copyright li {
+					border-left: solid 1px rgba(255, 255, 255, 0.2);
+					display: inline-block;
+					margin: 0 0 0 1em;
+					padding: 0 0 0 1em;
+				}
+
+					#footer footer .copyright li:first-child {
+						border-left: 0;
+						margin-left: 0;
+						padding-left: 0;
+					}

index.html

@@ -0,0 +1,459 @@
+<!DOCTYPE HTML>
+<!--
+	Highlights by HTML5 UP
+	html5up.net | @n33co
+	Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+-->
+<html>
+	<head>
+		<title>Highlights by HTML5 UP</title>
+		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
+		<meta name="description" content="" />
+		<meta name="keywords" content="" />
+		<!--[if lte IE 8]><script src="css/ie/html5shiv.js"></script><![endif]-->
+		<script src="js/jquery.min.js"></script>
+		<script src="js/jquery.scrollex.min.js"></script>
+		<script src="js/jquery.scrolly.min.js"></script>
+		<script src="js/skel.min.js"></script>
+		<script src="js/init.js"></script>
+		<noscript>
+			<link rel="stylesheet" href="css/skel.css" />
+			<link rel="stylesheet" href="css/style.css" />
+			<link rel="stylesheet" href="css/style-xlarge.css" />
+		</noscript>
+		<!--[if lte IE 8]><link rel="stylesheet" href="css/ie/v8.css" /><![endif]-->
+		<!--[if lte IE 9]><link rel="stylesheet" href="css/ie/v9.css" /><![endif]-->
+	</head>
+	<body>
+
+		<!-- Header -->
+			<section id="header">
+				<header class="major">
+					<h1>Highlights</h1>
+					<p>A fun little { responsive } single pager by <a href="http://html5up.net">HTML5 UP</a></p>
+				</header>
+				<div class="container">
+					<ul class="actions">
+						<li><a href="#one" class="button special scrolly">Begin</a></li>
+					</ul>
+				</div>
+			</section>
+
+		<!-- One -->
+			<section id="one" class="main special">
+				<div class="container">
+					<span class="image fit primary"><img src="images/pic01.jpg" alt="" /></span>
+					<div class="content">
+						<header class="major">
+							<h2>Who I am</h2>
+						</header>
+						<p>Aliquam ante ac id. Adipiscing interdum lorem praesent fusce pellentesque arcu feugiat. Consequat sed ultricies rutrum. Sed adipiscing eu amet interdum lorem blandit vis ac commodo aliquet integer vulputate phasellus lorem ipsum dolor lorem magna consequat sed etiam adipiscing interdum.</p>
+					</div>
+					<a href="#two" class="goto-next scrolly">Next</a>
+				</div>
+			</section>
+
+		<!-- Two -->
+			<section id="two" class="main special">
+				<div class="container">
+					<span class="image fit primary"><img src="images/pic02.jpg" alt="" /></span>
+					<div class="content">
+						<header class="major">
+							<h2>Stuff I do</h2>
+						</header>
+						<p>Consequat sed ultricies rutrum. Sed adipiscing eu amet interdum lorem blandit vis ac commodo aliquet vulputate.</p>
+						<ul class="icons-grid">
+							<li>
+								<span class="icon major fa-camera-retro"></span>
+								<h3>Magna Etiam</h3>
+							</li>
+							<li>
+								<span class="icon major fa-pencil"></span>
+								<h3>Lorem Ipsum</h3>
+							</li>
+							<li>
+								<span class="icon major fa-code"></span>
+								<h3>Nulla Tempus</h3>
+							</li>
+							<li>
+								<span class="icon major fa-coffee"></span>
+								<h3>Sed Feugiat</h3>
+							</li>
+						</ul>
+					</div>
+					<a href="#three" class="goto-next scrolly">Next</a>
+				</div>
+			</section>
+
+		<!-- Three -->
+			<section id="three" class="main special">
+				<div class="container">
+					<span class="image fit primary"><img src="images/pic03.jpg" alt="" /></span>
+					<div class="content">
+						<header class="major">
+							<h2>One more thing</h2>
+						</header>
+						<p>Aliquam ante ac id. Adipiscing interdum lorem praesent fusce pellentesque arcu feugiat. Consequat sed ultricies rutrum. Sed adipiscing eu amet interdum lorem blandit vis ac commodo aliquet integer vulputate phasellus lorem ipsum dolor lorem magna consequat sed etiam adipiscing interdum.</p>
+					</div>
+					<a href="#footer" class="goto-next scrolly">Next</a>
+				</div>
+			</section>
+
+		<!-- Four -->
+		<!--
+			<section id="four" class="main">
+				<div class="container">
+					<div class="content">
+						<header class="major">
+							<h2>Elements</h2>
+						</header>
+						<section>
+							<h4>Text</h4>
+							<p>This is <b>bold</b> and this is <strong>strong</strong>. This is <i>italic</i> and this is <em>emphasized</em>.
+							This is <sup>superscript</sup> text and this is <sub>subscript</sub> text.
+							This is <u>underlined</u> and this is code: <code>for (;;) { ... }</code>. Finally, <a href="#">this is a link</a>.</p>
+							<hr />
+							<header>
+								<h4>Heading with a Subtitle</h4>
+								<p>Lorem ipsum dolor sit amet nullam id egestas urna aliquam</p>
+							</header>
+							<p>Nunc lacinia ante nunc ac lobortis. Interdum adipiscing gravida odio porttitor sem non mi integer non faucibus ornare mi ut ante amet placerat aliquet. Volutpat eu sed ante lacinia sapien lorem accumsan varius montes viverra nibh in adipiscing blandit tempus accumsan.</p>
+							<header>
+								<h5>Heading with a Subtitle</h5>
+								<p>Lorem ipsum dolor sit amet nullam id egestas urna aliquam</p>
+							</header>
+							<p>Nunc lacinia ante nunc ac lobortis. Interdum adipiscing gravida odio porttitor sem non mi integer non faucibus ornare mi ut ante amet placerat aliquet. Volutpat eu sed ante lacinia sapien lorem accumsan varius montes viverra nibh in adipiscing blandit tempus accumsan.</p>
+							<hr />
+							<h2>Heading Level 2</h2>
+							<h3>Heading Level 3</h3>
+							<h4>Heading Level 4</h4>
+							<h5>Heading Level 5</h5>
+							<h6>Heading Level 6</h6>
+							<hr />
+							<h5>Blockquote</h5>
+							<blockquote>Fringilla nisl. Donec accumsan interdum nisi, quis tincidunt felis sagittis eget tempus euismod. Vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan faucibus. Vestibulum ante ipsum primis in faucibus lorem ipsum dolor sit amet nullam adipiscing eu felis.</blockquote>
+							<h5>Preformatted</h5>
+							<pre><code>i = 0;
+
+while (!deck.isInOrder()) {
+print 'Iteration ' + i;
+deck.shuffle();
+i++;
+}
+
+print 'It took ' + i + ' iterations to sort the deck.';</code></pre>
+						</section>
+
+						<section>
+							<h4>Lists</h4>
+							<div class="row">
+								<div class="6u 12u$(medium)">
+									<h5>Unordered</h5>
+									<ul>
+										<li>Dolor pulvinar etiam.</li>
+										<li>Sagittis adipiscing.</li>
+										<li>Felis enim feugiat.</li>
+									</ul>
+									<h5>Alternate</h5>
+									<ul class="alt">
+										<li>Dolor pulvinar etiam.</li>
+										<li>Sagittis adipiscing.</li>
+										<li>Felis enim feugiat.</li>
+									</ul>
+								</div>
+								<div class="6u$ 12u(medium)">
+									<h5>Ordered</h5>
+									<ol>
+										<li>Dolor pulvinar etiam.</li>
+										<li>Etiam vel felis viverra.</li>
+										<li>Felis enim feugiat.</li>
+										<li>Dolor pulvinar etiam.</li>
+										<li>Etiam vel felis lorem.</li>
+										<li>Felis enim et feugiat.</li>
+									</ol>
+									<h5>Icons</h5>
+									<ul class="icons">
+										<li><a href="#" class="icon fa-twitter"><span class="label">Twitter</span></a></li>
+										<li><a href="#" class="icon fa-facebook"><span class="label">Facebook</span></a></li>
+										<li><a href="#" class="icon fa-instagram"><span class="label">Instagram</span></a></li>
+										<li><a href="#" class="icon fa-github"><span class="label">Github</span></a></li>
+									</ul>
+								</div>
+							</div>
+							<h5>Actions</h5>
+							<ul class="actions">
+								<li><a href="#" class="button special">Default</a></li>
+								<li><a href="#" class="button">Default</a></li>
+							</ul>
+							<ul class="actions small">
+								<li><a href="#" class="button special small">Small</a></li>
+								<li><a href="#" class="button small">Small</a></li>
+							</ul>
+							<div class="row">
+								<div class="6u 12u$(small)">
+									<ul class="actions vertical">
+										<li><a href="#" class="button special">Default</a></li>
+										<li><a href="#" class="button">Default</a></li>
+									</ul>
+								</div>
+								<div class="6u$ 12u$(small)">
+									<ul class="actions vertical small">
+										<li><a href="#" class="button special small">Small</a></li>
+										<li><a href="#" class="button small">Small</a></li>
+									</ul>
+								</div>
+								<div class="6u 12u$(small)">
+									<ul class="actions vertical">
+										<li><a href="#" class="button special fit">Default</a></li>
+										<li><a href="#" class="button fit">Default</a></li>
+									</ul>
+								</div>
+								<div class="6u$ 12u$(small)">
+									<ul class="actions vertical small">
+										<li><a href="#" class="button special small fit">Small</a></li>
+										<li><a href="#" class="button small fit">Small</a></li>
+									</ul>
+								</div>
+							</div>
+						</section>
+
+						<section>
+							<h4>Table</h4>
+							<h5>Default</h5>
+							<div class="table-wrapper">
+								<table>
+									<thead>
+										<tr>
+											<th>Name</th>
+											<th>Description</th>
+											<th>Price</th>
+										</tr>
+									</thead>
+									<tbody>
+										<tr>
+											<td>Item One</td>
+											<td>Ante turpis integer aliquet porttitor.</td>
+											<td>29.99</td>
+										</tr>
+										<tr>
+											<td>Item Two</td>
+											<td>Vis ac commodo adipiscing arcu aliquet.</td>
+											<td>19.99</td>
+										</tr>
+										<tr>
+											<td>Item Three</td>
+											<td> Morbi faucibus arcu accumsan lorem.</td>
+											<td>29.99</td>
+										</tr>
+										<tr>
+											<td>Item Four</td>
+											<td>Vitae integer tempus condimentum.</td>
+											<td>19.99</td>
+										</tr>
+										<tr>
+											<td>Item Five</td>
+											<td>Ante turpis integer aliquet porttitor.</td>
+											<td>29.99</td>
+										</tr>
+									</tbody>
+									<tfoot>
+										<tr>
+											<td colspan="2"></td>
+											<td>100.00</td>
+										</tr>
+									</tfoot>
+								</table>
+							</div>
+
+							<h5>Alternate</h5>
+							<div class="table-wrapper">
+								<table class="alt">
+									<thead>
+										<tr>
+											<th>Name</th>
+											<th>Description</th>
+											<th>Price</th>
+										</tr>
+									</thead>
+									<tbody>
+										<tr>
+											<td>Item One</td>
+											<td>Ante turpis integer aliquet porttitor.</td>
+											<td>29.99</td>
+										</tr>
+										<tr>
+											<td>Item Two</td>
+											<td>Vis ac commodo adipiscing arcu aliquet.</td>
+											<td>19.99</td>
+										</tr>
+										<tr>
+											<td>Item Three</td>
+											<td> Morbi faucibus arcu accumsan lorem.</td>
+											<td>29.99</td>
+										</tr>
+										<tr>
+											<td>Item Four</td>
+											<td>Vitae integer tempus condimentum.</td>
+											<td>19.99</td>
+										</tr>
+										<tr>
+											<td>Item Five</td>
+											<td>Ante turpis integer aliquet porttitor.</td>
+											<td>29.99</td>
+										</tr>
+									</tbody>
+									<tfoot>
+										<tr>
+											<td colspan="2"></td>
+											<td>100.00</td>
+										</tr>
+									</tfoot>
+								</table>
+							</div>
+						</section>
+
+						<section>
+							<h4>Buttons</h4>
+							<ul class="actions">
+								<li><a href="#" class="button special">Special</a></li>
+								<li><a href="#" class="button">Default</a></li>
+							</ul>
+							<ul class="actions">
+								<li><a href="#" class="button">Default</a></li>
+								<li><a href="#" class="button small">Small</a></li>
+							</ul>
+							<ul class="actions fit">
+								<li><a href="#" class="button special fit">Fit</a></li>
+								<li><a href="#" class="button fit">Fit</a></li>
+							</ul>
+							<ul class="actions fit small">
+								<li><a href="#" class="button special fit small">Fit + Small</a></li>
+								<li><a href="#" class="button fit small">Fit + Small</a></li>
+							</ul>
+							<ul class="actions">
+								<li><a href="#" class="button special icon fa-download">Icon</a></li>
+								<li><a href="#" class="button icon fa-download">Icon</a></li>
+							</ul>
+							<ul class="actions">
+								<li><span class="button special disabled">Disabled</span></li>
+								<li><span class="button disabled">Disabled</span></li>
+							</ul>
+						</section>
+
+						<section>
+							<h4>Form</h4>
+							<form method="post" action="#">
+								<div class="row uniform">
+									<div class="6u 12u$(xsmall)">
+										<input type="text" name="demo-name" id="demo-name" value="" placeholder="Name" />
+									</div>
+									<div class="6u$ 12u$(xsmall)">
+										<input type="email" name="demo-email" id="demo-email" value="" placeholder="Email" />
+									</div>
+									<div class="12u$">
+										<div class="select-wrapper">
+											<select name="demo-category" id="demo-category">
+												<option value="">- Category -</option>
+												<option value="1">Manufacturing</option>
+												<option value="1">Shipping</option>
+												<option value="1">Administration</option>
+												<option value="1">Human Resources</option>
+											</select>
+										</div>
+									</div>
+									<div class="4u 12u$(small)">
+										<input type="radio" id="demo-priority-low" name="demo-priority" checked>
+										<label for="demo-priority-low">Low</label>
+									</div>
+									<div class="4u 12u$(small)">
+										<input type="radio" id="demo-priority-normal" name="demo-priority">
+										<label for="demo-priority-normal">Normal</label>
+									</div>
+									<div class="4u$ 12u$(small)">
+										<input type="radio" id="demo-priority-high" name="demo-priority">
+										<label for="demo-priority-high">High</label>
+									</div>
+									<div class="6u 12u$(small)">
+										<input type="checkbox" id="demo-copy" name="demo-copy">
+										<label for="demo-copy">Email me a copy</label>
+									</div>
+									<div class="6u$ 12u$(small)">
+										<input type="checkbox" id="demo-human" name="demo-human" checked>
+										<label for="demo-human">Not a robot</label>
+									</div>
+									<div class="12u$">
+										<textarea name="demo-message" id="demo-message" placeholder="Enter your message" rows="6"></textarea>
+									</div>
+									<div class="12u$">
+										<ul class="actions">
+											<li><input type="submit" value="Send Message" class="special" /></li>
+											<li><input type="reset" value="Reset" /></li>
+										</ul>
+									</div>
+								</div>
+							</form>
+						</section>
+
+						<section>
+							<h4>Image</h4>
+							<h5>Fit</h5>
+							<div class="box alt">
+								<div class="row uniform 50%">
+									<div class="12u"><span class="image fit"><img src="images/pic04.jpg" alt="" /></span></div>
+									<div class="4u"><span class="image fit"><img src="images/pic04.jpg" alt="" /></span></div>
+									<div class="4u"><span class="image fit"><img src="images/pic04.jpg" alt="" /></span></div>
+									<div class="4u"><span class="image fit"><img src="images/pic04.jpg" alt="" /></span></div>
+									<div class="4u"><span class="image fit"><img src="images/pic04.jpg" alt="" /></span></div>
+									<div class="4u"><span class="image fit"><img src="images/pic04.jpg" alt="" /></span></div>
+									<div class="4u"><span class="image fit"><img src="images/pic04.jpg" alt="" /></span></div>
+									<div class="4u"><span class="image fit"><img src="images/pic04.jpg" alt="" /></span></div>
+									<div class="4u"><span class="image fit"><img src="images/pic04.jpg" alt="" /></span></div>
+									<div class="4u"><span class="image fit"><img src="images/pic04.jpg" alt="" /></span></div>
+								</div>
+							</div>
+							<h5>Left &amp; Right</h5>
+							<p><span class="image left"><img src="images/pic05.jpg" alt="" /></span>Fringilla nisl. Donec accumsan interdum nisi, quis tincidunt felis sagittis eget. tempus euismod. Vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent tincidunt felis sagittis eget. tempus euismod. Vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent. Donec accumsan interdum nisi, quis tincidunt felis sagittis eget. tempus euismod. Vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent tincidunt felis sagittis eget. tempus euismod. Vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent.</p>
+							<p><span class="image right"><img src="images/pic05.jpg" alt="" /></span>Fringilla nisl. Donec accumsan interdum nisi, quis tincidunt felis sagittis eget. tempus euismod. Vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent tincidunt felis sagittis eget. tempus euismod. Vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent. Donec accumsan interdum nisi, quis tincidunt felis sagittis eget. tempus euismod. Vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent tincidunt felis sagittis eget. tempus euismod. Vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent.</p>
+						</section>
+
+					</div>
+					<a href="#footer" class="goto-next scrolly">Next</a>
+				</div>
+			</section>
+		-->
+
+		<!-- Footer -->
+			<section id="footer">
+				<div class="container">
+					<header class="major">
+						<h2>Get in touch</h2>
+					</header>
+					<form method="post" action="#">
+						<div class="row uniform">
+							<div class="6u 12u$(xsmall)"><input type="text" name="name" id="name" placeholder="Name" /></div>
+							<div class="6u$ 12u$(xsmall)"><input type="email" name="email" id="email" placeholder="Email" /></div>
+							<div class="12u$"><textarea name="message" id="message" placeholder="Message" rows="4"></textarea></div>
+							<div class="12u$">
+								<ul class="actions">
+									<li><input type="submit" value="Send Message" class="special" /></li>
+								</ul>
+							</div>
+						</div>
+					</form>
+				</div>
+				<footer>
+					<ul class="icons">
+						<li><a href="#" class="icon alt fa-twitter"><span class="label">Twitter</span></a></li>
+						<li><a href="#" class="icon alt fa-facebook"><span class="label">Facebook</span></a></li>
+						<li><a href="#" class="icon alt fa-instagram"><span class="label">Instagram</span></a></li>
+						<li><a href="#" class="icon alt fa-dribbble"><span class="label">Dribbble</span></a></li>
+						<li><a href="#" class="icon alt fa-envelope"><span class="label">Email</span></a></li>
+					</ul>
+					<ul class="copyright">
+						<li>&copy; Untitled</li><li>Design: <a href="http://html5up.net">HTML5 UP</a></li><li>Demo Images: <a href="http://unsplash.com">Unsplash</a></li>
+					</ul>
+				</footer>
+			</section>
+
+	</body>
+</html>

js/jquery.scrollex.min.js

@@ -0,0 +1,2 @@
+/* jquery.scrollex v0.2.0 | (c) n33 | n33.co @n33co | MIT */
+(function(e){function g(e,r,i){return typeof e=="string"&&(e.slice(-1)=="%"?e=parseInt(e[t](0,e[n]-1))/100*r:e.slice(-2)=="vh"?e=parseInt(e[t](0,e[n]-2))/100*i:e.slice(-2)=="px"&&(e=parseInt(e[t](0,e[n]-2)))),e}var t="substring",n="length",r="scroll",i="clearTimeout",s="timeoutId",o="options",u="_scrollexId",a="default",f=null,l="apply",c="element",h="initialize",p="unscrollex",d=e(window),v=1,m={};d.on(r,function(){var t=d.scrollTop();e.map(m,function(e){window[i](e[s]),e[s]=window.setTimeout(function(){e.handler(t)},e[o].delay)})}).on("load",function(){d.trigger(r)}),jQuery.fn.scrollex=function(t){var i,s,p,y,b,w,E=e(this);if(this[n]==0)return E;if(this[n]>1){for(i=0;i<this[n];i++)e(this[i]).scrollex(t);return E}if(E.data(u))return E;s=v++,p=jQuery.extend({top:0,bottom:0,delay:0,mode:a,enter:f,leave:f,initialize:f,terminate:f,scroll:f},t);switch(p.mode){case"top":y=function(e,t,n,r,i){return e>=r&&e<=i};break;case"bottom":y=function(e,t,n,r,i){return n>=r&&n<=i};break;case"middle":y=function(e,t,n,r,i){return t>=r&&t<=i};break;case"top-only":y=function(e,t,n,r){return e<=r&&r<=n};break;case"bottom-only":y=function(e,t,n,r,i){return n>=i&&i>=e};break;default:case a:y=function(e,t,n,r,i){return n>=r&&e<=i}}return b=function(e){var t=this.state,n=!1,i=this.$element.offset(),s=d.height(),u=e+s/2,a=e+s,f=this.$element.outerHeight(),h=i.top+g(this[o].top,f,s),p=i.top+f-g(this[o].bottom,f,s);n=this.test(e,u,a,h,p),n!=t&&(this.state=n,n?this[o].enter&&this[o].enter[l](this[c]):this[o].leave&&this[o].leave[l](this[c])),this[o][r]&&this[o][r][l](this[c],[(u-h)/(p-h)])},w={id:s,options:p,test:y,handler:b,state:!1,element:this,$element:E,timeoutId:f},m[s]=w,E.data(u,w.id),w[o][h]&&w[o][h][l](this),E},jQuery.fn[p]=function(){var t,r,a,f=e(this);if(this[n]==0)return f;if(this[n]>1){for(t=0;t<this[n];t++)e(this[t])[p]();return f}return r=f.data(u),r?(a=m[r],window[i](a[s]),delete m[r],f.removeData(u),a[o].terminate&&a[o].terminate[l](this),f):f}})(jQuery);

js/jquery.scrolly.min.js

@@ -0,0 +1,2 @@
+/* jquery.scrolly v1.0.0-dev | (c) n33 | n33.co @n33co | MIT */
+(function(e){function u(s,o){var u,a,f;if((u=e(s))[t]==0)return n;a=u[i]()[r];switch(o.anchor){case"middle":f=a-(e(window).height()-u.outerHeight())/2;break;default:case r:f=Math.max(a,0)}return typeof o[i]=="function"?f-=o[i]():f-=o[i],f}var t="length",n=null,r="top",i="offset",s="click.scrolly",o=e(window);e.fn.scrolly=function(i){var o,a,f,l,c=e(this);if(this[t]==0)return c;if(this[t]>1){for(o=0;o<this[t];o++)e(this[o]).scrolly(i);return c}l=n,f=c.attr("href");if(f.charAt(0)!="#"||f[t]<2)return c;a=jQuery.extend({anchor:r,easing:"swing",offset:0,parent:e("body,html"),pollOnce:!1,speed:1e3},i),a.pollOnce&&(l=u(f,a)),c.off(s).on(s,function(e){var t=l!==n?l:u(f,a);t!==n&&(e.preventDefault(),a.parent.stop().animate({scrollTop:t},a.speed,a.easing))})}})(jQuery);

sass/_mixins.scss

@@ -0,0 +1,41 @@
+@mixin vendor-property($property, $value) { 
+    @each $vendor in ('-moz-', '-webkit-', '-o-', '-ms-', '') {
+        #{$vendor}#{$property}: #{$value};
+    }
+}
+
+@mixin vendor-value($property, $value) { 
+    @each $vendor in ('-moz-', '-webkit-', '-o-', '-ms-', '') {
+        #{$property}: #{$vendor}#{$value};
+    }
+}
+
+@mixin vendor($property, $value) { 
+    @each $vendor in ('-moz-', '-webkit-', '-o-', '-ms-', '') {
+        #{$vendor}#{$property}: #{$vendor}#{$value};
+    }
+}
+
+@mixin vendor-keyframes($name) {
+	@-moz-keyframes #{$name} { @content; }
+	@-webkit-keyframes #{$name} { @content; }
+	@-o-keyframes #{$name} { @content; }
+	@-ms-keyframes #{$name} { @content; }
+	@keyframes #{$name} { @content; }
+}
+
+@mixin icon($content: false) {
+	text-decoration: none;
+
+	&:before {
+		@if $content {
+			content: $content;
+		}
+		-moz-osx-font-smoothing: grayscale;
+		-webkit-font-smoothing: antialiased;
+		font-family: FontAwesome;
+		font-style: normal;
+		font-weight: normal;
+		text-transform: none !important;
+	}
+}

sass/_vars.scss

@@ -0,0 +1,67 @@
+// Mixins.
+	@mixin padding($tb, $lr, $pad: (0,0,0,0)) {
+		padding: ($tb + nth($pad,1)) ($lr + nth($pad,2)) max(0.1em, $tb - $size-element-margin + nth($pad,3)) ($lr + nth($pad,4));
+	}
+
+	@mixin minHeight($tb, $pad) {
+		min-height: calc( 100vh - #{ $tb + (($tb - $size-element-margin) + $pad) } );
+	}
+
+// Misc.
+	$zindex-loader-overlay: 10000;
+
+// Duration.
+	$duration-transition:		0.2s;
+	$duration-loader-fadein:	1s;
+	$duration-bg-fadein:		0.5s;
+
+// Size.
+	$size-element-height:		3em;
+	$size-element-margin:		2em;
+
+// Font.
+	$font-family:				'Raleway', 'Helvetica', sans-serif;
+	$font-family-fixed:			'Courier New', monospace;
+	$font-weight:				400;
+	$font-weight-bold:			700;
+	$font-weight-heavy:			800;
+
+// Color.
+	$color-bg:					#fff;
+	$color-fg:					#6f7577;
+	$color-fg-bold:				#61686b;
+	$color-fg-light:			#a8b0b3;
+	$color-fg-lighter:			#e8f0f3;
+	$color-border:				#dddddd;
+	$color-border-bg:			rgba(144,144,144,0.075);
+	$color-border2:				#d3d3d3;
+	$color-border2-bg:			rgba(144,144,144,0.15);
+
+	$color-alt-fg-bold:			#ffffff;
+	$color-alt-fg:				rgba(255,255,255,0.5);
+	$color-alt-fg-light:		rgba(255,255,255,0.35);
+	$color-alt-fg-lighter:		rgba(255,255,255,0.2);
+	$color-alt-border:			#ffffff;
+	$color-alt-border-bg:		rgba(255,255,255,0.075);
+	$color-alt-border2:			#ffffff;
+	$color-alt-border2-bg:		rgba(255,255,255,0.15);
+
+	$color-accent-bg:			#8cd1a8;
+	$color-accent-fg-bold:		#ffffff;
+	$color-accent-fg:			mix($color-accent-bg, $color-accent-fg-bold, 25%);
+	$color-accent-fg-light:		mix($color-accent-bg, $color-accent-fg-bold, 40%);
+	$color-accent-fg-lighter:	mix($color-accent-bg, $color-accent-fg-bold, 90%);
+	$color-accent-border:		rgba(255,255,255,0.25);
+	$color-accent-border-bg:	rgba(255,255,255,0.075);
+	$color-accent-border2:		rgba(255,255,255,0.5);
+	$color-accent-border2-bg:	rgba(255,255,255,0.2);
+
+	$color-accent2-bg:			#313a3d;
+	$color-accent2-fg-bold:		#ffffff;
+	$color-accent2-fg:			mix($color-accent2-bg, $color-accent2-fg-bold, 25%);
+	$color-accent2-fg-light:	mix($color-accent2-bg, $color-accent2-fg-bold, 40%);
+	$color-accent2-fg-lighter:	mix($color-accent2-bg, $color-accent2-fg-bold, 90%);
+	$color-accent2-border:		rgba(255,255,255,0.25);
+	$color-accent2-border-bg:	rgba(255,255,255,0.075);
+	$color-accent2-border2:		rgba(255,255,255,0.5);
+	$color-accent2-border2-bg:	rgba(255,255,255,0.2);

sass/ie/v8.scss

@@ -0,0 +1,146 @@
+@import 'vars';
+@import 'mixins';
+
+/*
+	Highlights by HTML5 UP
+	html5up.net | @n33co
+	Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+*/
+
+/* Basic */
+
+	body, html {
+		height: 100%;
+	}
+
+	html {
+		background: none;
+	}
+
+/* List */
+
+	ul {
+		&.actions {
+			li {
+				padding: 0 0 0 ($size-element-margin * 0.5);
+
+				&:first-child {
+					padding-left: 0;
+				}
+			}
+		}
+	}
+
+/* Form */
+
+	input[type="text"],
+	input[type="password"],
+	input[type="email"],
+	select,
+	textarea {
+		border: solid 2px $color-border;
+		position: relative;
+	}
+
+	input[type="text"],
+	input[type="password"],
+	input[type="email"] {
+		line-height: $size-element-height;
+	}
+
+	input[type="checkbox"],
+	input[type="radio"] {
+		font-size: 3em;
+
+		& + label {
+			&:before {
+				display: none;
+			}
+		}
+	}
+
+/* Button */
+
+	input[type="submit"],
+	input[type="reset"],
+	input[type="button"],
+	button,
+	.button {
+		border: solid 2px $color-border;
+	}
+
+/* Main BG */
+
+	.main-bg {
+		z-index: 0;
+	}
+
+/* Main */
+
+	.main {
+		background-size: cover;
+
+		.container {
+			background: $color-bg;
+			border-top: solid 1px $color-border;
+			position: relative;
+			z-index: 1;
+		}
+
+		.goto-next {
+			@include icon;
+
+			&:before {
+				color: $color-border;
+				content: '\f063';
+				display: block;
+				font-size: 2em;
+				height: 2em;
+				left: 0;
+				line-height: 2em;
+				position: absolute;
+				text-align: center;
+				text-indent: 0;
+				top: 0;
+				width: 2em;
+			}
+		}
+	}
+
+/* Header */
+
+	#header {
+		-ms-behavior: url('css/ie/backgroundsize.min.htc');
+		background-image: url('../../images/bg.jpg');
+		background-size: cover;
+		height: 100%;
+
+		&:after {
+			min-height: 100%;
+		}
+
+		header {
+			position: relative;
+			z-index: 1;
+		}
+
+		.container {
+			background: $color-bg;
+			z-index: 1;
+		}
+	}
+
+/* Footer */
+
+	#footer {
+		-ms-behavior: url('css/ie/backgroundsize.min.htc');
+		background-image: url('../../images/bg.jpg');
+		background-size: cover;
+
+		.container {
+			background: $color-bg;
+			border-top: solid 1px $color-border;
+			position: relative;
+			z-index: 1;
+		}
+	}

sass/ie/v9.scss

@@ -0,0 +1,18 @@
+@import 'vars';
+@import 'mixins';
+
+/*
+	Highlights by HTML5 UP
+	html5up.net | @n33co
+	Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+*/
+
+/* Loader */
+
+	html {
+		body {
+			&:before, &:after {
+				display: none !important;
+			}
+		}
+	}

sass/style-large.scss

@@ -0,0 +1,14 @@
+@import 'vars';
+@import 'mixins';
+
+/*
+	Highlights by HTML5 UP
+	html5up.net | @n33co
+	Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+*/
+
+/* Basic */
+
+	body, input, select, textarea {
+		font-size: 12pt;
+	}

sass/style-medium.scss

@@ -0,0 +1,65 @@
+@import 'vars';
+@import 'mixins';
+
+/*
+	Highlights by HTML5 UP
+	html5up.net | @n33co
+	Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+*/
+
+$size-padding-tb: 3em;
+$size-padding-lr: 3em;
+
+/* Main BG */
+
+	.main-bg {
+		display: none;
+	}
+
+/* Main */
+
+	.main {
+		.image.primary {
+			display: block;
+			margin: 0 0 ($size-element-margin * 2) 0;
+		}
+
+		.container {
+			@include padding($size-padding-tb, $size-padding-lr, (0, 0, 7em, 0));
+
+			&:before {
+				display: none;
+			}
+		}
+	}
+
+/* Header */
+
+	#header {
+		header {
+			padding-bottom: ($size-element-height + ($size-padding-lr * 2));
+			width: 80%;
+		}
+
+		.container {
+			margin-left: -40%;
+			padding: $size-padding-lr;
+		}
+	}
+
+/* Footer */
+
+	#footer {
+		min-height: 0;
+		padding: 0;
+
+		.container {
+			@include padding($size-padding-tb, $size-padding-lr);
+		}
+
+		footer {
+			@include padding($size-padding-tb, $size-padding-lr);
+			bottom: auto;
+			position: relative;
+		}
+	}

sass/style-small.scss

@@ -0,0 +1,67 @@
+@import 'vars';
+@import 'mixins';
+
+/*
+	Highlights by HTML5 UP
+	html5up.net | @n33co
+	Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+*/
+
+$size-padding-tb: 3em;
+$size-padding-lr: 1.5em;
+
+/* Basic */
+
+	h2 {
+		font-size: 1.35em;
+	}
+
+/* Main */
+
+	.main {
+		.container {
+			@include padding($size-padding-tb, $size-padding-lr);
+
+			.image.primary:first-child {
+				margin: (($size-padding-tb - $size-padding-lr) * -1) 0 ($size-element-margin * 1.25) 0;
+			}
+		}
+
+		.goto-next {
+			display: none;
+		}
+	}
+
+/* Header */
+
+	#header {
+		height: 80vh;
+
+		&:after {
+			height: 80vh;
+		}
+
+		header {
+			padding-bottom: 0;
+
+			h1 {
+				font-size: 2em;
+			}
+
+			p {
+				margin-top: 1em;
+			}
+		}
+
+		.container {
+			display: none;
+		}
+	}
+
+/* Footer */
+
+	#footer {
+		.container {
+			@include padding($size-padding-tb, $size-padding-lr);
+		}
+	}

sass/style-xsmall.scss

@@ -0,0 +1,125 @@
+@import 'vars';
+@import 'mixins';
+
+/*
+	Highlights by HTML5 UP
+	html5up.net | @n33co
+	Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+*/
+
+$size-padding-tb: 3em;
+$size-padding-lr: 1em;
+
+/* Basic */
+
+	html, body {
+		min-width: 320px;
+	}
+
+/* List */
+
+	ul {
+		&.actions {
+			margin: 0 0 $size-element-margin 0;
+
+			li {
+				display: block;
+				padding: ($size-element-margin * 0.5) 0 0 0;
+				text-align: center;
+				width: 100%;
+
+				&:first-child {
+					padding-top: 0;
+				}
+
+				> * {
+					margin: 0 !important;
+					width: 100%;
+				}
+			}
+
+			&.small {
+				li {
+					padding: ($size-element-margin * 0.25) 0 0 0;
+
+					&:first-child {
+						padding-top: 0;
+					}
+				}
+			}
+		}
+
+		&.icons-grid {
+			li {
+				box-shadow: inset 0 1px 0 0 $color-border !important;
+				float: none;
+				margin: $size-element-margin 0 0 0;
+				padding: $size-element-margin 0 0 0;
+				width: 100%;
+
+				&:first-child {
+					box-shadow: none !important;
+					margin-top: 0;
+					padding: ($size-element-margin * 0.5) 0 0 0;
+				}
+
+				&:nth-child(2n + 1) {
+					box-shadow: none;
+				}
+
+				&:nth-child(2n + 3) {
+					&:before {
+						display: none;
+					}
+				}
+			}
+		}
+	}
+
+/* Button */
+
+	input[type="submit"],
+	input[type="reset"],
+	input[type="button"],
+	button,
+	.button {
+		padding: 0;
+
+		&.icon {
+			padding-left: 0;
+
+		}
+	}
+
+/* Main */
+
+	.main {
+		.container {
+			@include padding($size-padding-tb, $size-padding-lr);
+
+			.image.primary:first-child {
+				margin: (($size-padding-tb - $size-padding-lr) * -1) 0 ($size-element-margin * 1.25) 0;
+			}
+		}
+	}
+
+/* Footer */
+
+	#footer {
+		.container {
+			@include padding($size-padding-tb, $size-padding-lr);
+		}
+
+		footer {
+			.copyright {
+				line-height: inherit;
+
+				li {
+					border-left: 0;
+					display: block;
+					margin: 0;
+					padding: 0;
+				}
+			}
+		}
+	}

sass/style.scss

@@ -0,0 +1,1145 @@
+@import 'vars';
+@import 'mixins';
+@import 'font-awesome.min.css';
+@import url('http://fonts.googleapis.com/css?family=Raleway:400,400italic,700,800');
+
+/*
+	Highlights by HTML5 UP
+	html5up.net | @n33co
+	Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+*/
+
+$size-padding-tb: 5em;
+$size-padding-lr: 2.5em;
+
+/* Basic */
+
+	html {
+		background-color:		$color-accent2-bg;
+		background-attachment:	fixed,						fixed;
+		background-image:		url('images/overlay.png'),	url('../images/bg.jpg');
+		background-position:	top left,					center center;
+		background-repeat:		repeat,						none;
+		background-size:		auto,						cover;
+	}
+
+	html {
+		&.is-loading {
+			body {
+				*, *:before, *:after {
+					@include vendor-property('animation', 'none !important');
+					@include vendor-property('transition', 'none !important');
+				}
+			}
+		}
+
+		&.is-touch {
+			height: 100vh;
+			overflow: hidden;
+
+			#wrapper {
+				-webkit-backface-visibility: hidden;
+				-webkit-overflow-scrolling: touch;
+				-webkit-transform: translate3d(0,0,0);
+				height: 100vh;
+				overflow: auto;
+			}
+		}
+	}
+
+	body, input, select, textarea {
+		color: $color-fg;
+		font-family: $font-family;
+		font-size: 15pt;
+		font-weight: $font-weight;
+		line-height: 1.75em;
+	}
+
+	a {
+		@include vendor-property('transition', 'color #{$duration-transition} ease-in-out, border-bottom-color #{$duration-transition} ease-in-out');
+		border-bottom: dotted 1px;
+		color: $color-accent-bg;
+		text-decoration: none;
+
+		&:hover {
+			border-bottom-color: transparent !important;
+			color: $color-accent-bg !important;
+			text-decoration: none;
+		}
+	}
+
+	strong, b {
+		color: $color-fg-bold;
+		font-weight: $font-weight-bold;
+	}
+
+	em, i {
+		font-style: italic;
+	}
+
+	p {
+		margin: 0 0 $size-element-margin 0;
+	}
+
+	h1, h2, h3, h4, h5, h6 {
+		color: $color-fg-bold;
+		font-weight: $font-weight-heavy;
+		letter-spacing: 0.075em;
+		line-height: 1em;
+		margin: 0 0 ($size-element-margin * 0.5) 0;
+		text-transform: uppercase;
+
+		a {
+			color: inherit;
+			text-decoration: none;
+		}
+	}
+
+	h2 {
+		font-size: 1.75em;
+		line-height: 1.5em;
+	}
+
+	h3 {
+		font-size: 1em;
+		line-height: 1.5em;
+	}
+
+	h4 {
+		font-size: 0.9em;
+		line-height: 1.5em;
+	}
+
+	h5 {
+		font-size: 0.8em;
+		line-height: 1.5em;
+	}
+
+	h6 {
+		font-size: 0.7em;
+		line-height: 1.5em;
+	}
+
+	sub {
+		font-size: 0.8em;
+		position: relative;
+		top: 0.5em;
+	}
+
+	sup {
+		font-size: 0.8em;
+		position: relative;
+		top: -0.5em;
+	}
+
+	hr {
+		border: 0;
+		border-bottom: solid 1px $color-border;
+		margin: $size-element-margin 0;
+
+		&.major {
+			margin: ($size-element-margin * 1.5) 0;
+		}
+	}
+
+	blockquote {
+		border-left: solid 6px $color-border;
+		font-style: italic;
+		margin: 0 0 $size-element-margin 0;
+		padding: 0.5em 0 0.5em 1.5em;
+	}
+
+	code {
+		background: $color-border-bg;
+		font-family: $font-family-fixed;
+		font-size: 0.9em;
+		margin: 0 0.25em;
+		padding: 0.25em 0.65em;
+	}
+
+	pre {
+		-webkit-overflow-scrolling: touch;
+		font-family: $font-family-fixed;
+		font-size: 0.9em;
+		margin: 0 0 $size-element-margin 0;
+
+		code {
+			display: block;
+			line-height: 1.75em;
+			padding: 1em 1.5em;
+			overflow-x: auto;
+		}
+	}
+
+	.align-left {
+		text-align: left;
+	}
+
+	.align-center {
+		text-align: center;
+	}
+
+	.align-right {
+		text-align: right;
+	}
+
+/* Loader */
+
+	// Spinner
+
+		@include vendor-keyframes('spinner-show') {
+			0% { opacity: 0; }
+			100% { opacity: 1; }
+		}
+
+		@include vendor-keyframes('spinner-hide') {
+			0% { color: $color-accent2-fg-lighter; z-index: $zindex-loader-overlay + 1; @include vendor-property('transform', 'scale(1) rotate(0deg)'); }
+			99% { color: $color-accent2-bg; z-index: $zindex-loader-overlay + 1; @include vendor-property('transform', 'scale(0.5) rotate(360deg)'); }
+			100% { color: $color-accent2-bg; z-index: -1; @include vendor-property('transform', 'scale(0) rotate(360deg)'); }
+		}
+
+		@include vendor-keyframes('spinner-rotate') {
+			0% { @include vendor-property('transform', 'scale(1) rotate(0deg)'); }
+			100% { @include vendor-property('transform', 'scale(1) rotate(360deg)'); }
+		}
+
+	// Overlay
+
+		@include vendor-keyframes('overlay-hide') {
+			0% { opacity: 1; z-index: $zindex-loader-overlay; }
+			15% { opacity: 1; z-index: $zindex-loader-overlay; }
+			99% { opacity: 0; z-index: $zindex-loader-overlay; }
+			100% { opacity: 0; z-index: -1; }
+		}
+
+	html {
+		body {
+			@include icon;
+
+			// Spinner (inactive)
+
+				&:before {
+					@include vendor-property('animation', 'spinner-show 1.5s 1 0.25s ease forwards, spinner-hide 0.25s ease-in-out forwards !important');
+					@include vendor-property('transform-origin', '50% 50%');
+					color: $color-accent2-fg-lighter;
+					content: '\f1ce';
+					cursor: default;
+					display: block;
+					font-size: 2em;
+					height: 2em;
+					left: 50%;
+					opacity: 0;
+					line-height: 2em;
+					margin: -1em 0 0 -1em;
+					position: fixed;
+					text-align: center;
+					top: 50%;
+					width: 2em;
+					z-index: -1;
+				}
+
+			// Overlay (inactive)
+
+				&:after {
+					@include vendor-property('animation', 'overlay-hide #{$duration-loader-fadein} ease-in forwards !important');
+					background: $color-accent2-bg;
+					content: '';
+					display: block;
+					height: 100%;
+					left: 0;
+					opacity: 0;
+					position: fixed;
+					top: 0;
+					width: 100%;
+					z-index: -1;
+				}
+
+		}
+
+		&.is-loading {
+			body {
+
+				// Spinner (active)
+
+					&:before {
+						@include vendor-property('animation', 'spinner-show 1.5s 1 0.25s ease forwards, spinner-rotate 0.75s infinite linear !important');
+						z-index: $zindex-loader-overlay + 1;
+					}
+
+				// Overlay (active)
+
+					&:after {
+						@include vendor-property('animation', 'none !important');
+						opacity: 1;
+						z-index: $zindex-loader-overlay;
+					}
+
+			}
+		}
+	}
+
+	@media (-webkit-min-device-pixel-ratio: 2) {
+		html {
+			body {
+				&:before {
+					line-height: 2.025em;
+				}
+			}
+		}
+	}
+
+/* Section/Article */
+
+	section, article {
+		&.special {
+			text-align: center;
+		}
+	}
+
+	header {
+		p {
+			color: $color-fg-light;
+			letter-spacing: 0.05em;
+			text-transform: uppercase;
+		}
+
+		h1 + p {
+			margin-top: ($size-element-margin * -0.5);
+		}
+
+		h2 + p {
+			margin-top: ($size-element-margin * -0.5);
+		}
+
+		h3 + p {
+			margin-top: ($size-element-margin * -0.4);
+		}
+
+		h4 + p,
+		h5 + p,
+		h6 + p {
+			font-size: 0.8em;
+			margin-top: ($size-element-margin * -0.3);
+		}
+
+		&.major {
+			text-align: center;
+
+			h1, h2, h3, h4, h5, h6 {
+				position: relative;
+
+				&:after {
+					background: $color-border;
+					content: '';
+					display: block;
+					height: 2px;
+					margin: 0.75em auto 0 auto;
+					position: relative;
+					width: 4em;
+				}
+			}
+
+			p {
+				margin-top: 0;
+			}
+		}
+	}
+
+/* Form */
+
+	form {
+		margin: 0 0 $size-element-margin 0;
+	}
+
+	label {
+		color: $color-fg-bold;
+		display: block;
+		font-size: 0.9em;
+		font-weight: $font-weight-bold;
+		margin: 0 0 ($size-element-margin * 0.5) 0;
+	}
+
+	input[type="text"],
+	input[type="password"],
+	input[type="email"],
+	select,
+	textarea {
+		@include vendor-property('appearance', 'none');
+		background: $color-border2-bg;
+		border-radius: 0;
+		border: none;
+		color: inherit;
+		display: block;
+		outline: 0;
+		padding: 0 1em;
+		text-decoration: none;
+		width: 100%;
+
+		&:invalid {
+			box-shadow: none;
+		}
+
+		&:focus {
+			box-shadow: inset 0 0 0 2px $color-accent-bg;
+		}
+	}
+
+	.select-wrapper {
+		@include icon;
+		display: block;
+		position: relative;
+
+		&:before {
+			color: $color-fg-light;
+			content: '\f078';
+			display: block;
+			height: $size-element-height;
+			line-height: $size-element-height;
+			pointer-events: none;
+			position: absolute;
+			right: 0;
+			text-align: center;
+			top: 0;
+			width: $size-element-height;
+		}
+
+		select::-ms-expand {
+			display: none;
+		}
+	}
+
+	input[type="text"],
+	input[type="password"],
+	input[type="email"],
+	select {
+		height: $size-element-height;
+	}
+
+	textarea {
+		padding: 0.75em 1em;
+	}
+
+	input[type="checkbox"],
+	input[type="radio"], {
+		@include vendor-property('appearance', 'none');
+		display: block;
+		float: left;
+		margin-right: -2em;
+		opacity: 0;
+		width: 1em;
+		z-index: -1;
+
+		& + label {
+			@include icon;
+			color: $color-fg;
+			cursor: pointer;
+			display: inline-block;
+			font-size: 1em;
+			font-weight: $font-weight;
+			padding-left: ($size-element-height * 0.6) + 0.75em;
+			padding-right: 0.75em;
+			position: relative;
+
+			&:before {
+				background: $color-border2-bg;
+				content: '';
+				display: inline-block;
+				height: ($size-element-height * 0.6);
+				left: 0;
+				line-height: ($size-element-height * 0.575);
+				position: absolute;
+				text-align: center;
+				top: 0;
+				width: ($size-element-height * 0.6);
+			}
+		}
+
+		&:checked + label {
+			&:before {
+				background: $color-accent2-bg;
+				color: $color-accent2-fg-bold;
+				content: '\f00c';
+			}
+		}
+
+		&:focus + label {
+			&:before {
+				box-shadow: inset 0 0 0 2px $color-accent-bg;
+			}
+		}
+	}
+
+	input[type="checkbox"] {
+		& + label {
+			&:before {
+			}
+		}
+	}
+
+	input[type="radio"] {
+		& + label {
+			&:before {
+				border-radius: 100%;
+			}
+		}
+	}
+
+	::-webkit-input-placeholder {
+		color: $color-fg-light !important;
+		opacity: 1.0;
+	}
+
+	:-moz-placeholder {
+		color: $color-fg-light !important;
+		opacity: 1.0;
+	}
+
+	::-moz-placeholder {
+		color: $color-fg-light !important;
+		opacity: 1.0;
+	}
+
+	:-ms-input-placeholder {
+		color: $color-fg-light !important;
+		opacity: 1.0;
+	}
+
+	.formerize-placeholder {
+		color: $color-fg-light !important;
+		opacity: 1.0;
+	}
+
+/* Box */
+
+	.box {
+		border: solid 2px $color-border;
+		margin-bottom: $size-element-margin;
+		padding: 1.5em;
+
+		> :last-child,
+		> :last-child > :last-child,
+		> :last-child > :last-child > :last-child {
+			margin-bottom: 0;
+		}
+
+		&.alt {
+			border: 0;
+			border-radius: 0;
+			padding: 0;
+		}
+	}
+
+/* Icon */
+
+	.icon {
+		@include icon;
+		border-bottom: none;
+		position: relative;
+
+		> .label {
+			display: none;
+		}
+
+		&.major {
+			display: block;
+			margin: 0 0 ($size-element-margin * 0.5) 0;
+
+			&:before {
+				font-size: 2.5em;
+			}
+		}
+	}
+
+/* Image */
+
+	.image {
+		border: 0;
+		display: inline-block;
+		position: relative;
+
+		&:before {
+			background: url('images/overlay.png');
+			content: '';
+			display: block;
+			height: 100%;
+			left: 0;
+			position: absolute;
+			top: 0;
+			width: 100%;
+		}
+
+		img {
+			display: block;
+		}
+
+		&.left {
+			float: left;
+			margin: 0 1.5em 1em 0;
+			top: 0.25em;
+		}
+
+		&.right {
+			float: right;
+			margin: 0 0 1em 1.5em;
+			top: 0.25em;
+		}
+
+		&.left,
+		&.right {
+			max-width: 40%;
+
+			img {
+				width: 100%;
+			}
+		}
+
+		&.fit {
+			display: block;
+			margin: 0 0 $size-element-margin 0;
+			width: 100%;
+
+			img {
+				width: 100%;
+			}
+		}
+	}
+
+/* List */
+
+	ol {
+		list-style: decimal;
+		margin: 0 0 $size-element-margin 0;
+		padding-left: 1.25em;
+
+		li {
+			padding-left: 0.25em;
+		}
+	}
+
+	ul {
+		list-style: disc;
+		margin: 0 0 $size-element-margin 0;
+		padding-left: 1em;
+
+		li {
+			padding-left: 0.5em;
+		}
+
+		&.alt {
+			list-style: none;
+			padding-left: 0;
+
+			li {
+				border-top: solid 1px $color-border;
+				padding: 0.5em 0;
+
+				&:first-child {
+					border-top: 0;
+					padding-top: 0;
+				}
+			}
+		}
+
+		&.icons {
+			cursor: default;
+			list-style: none;
+			padding-left: 0;
+
+			li {
+				display: inline-block;
+				padding: 0 1.5em 0 0;
+
+				&:last-child {
+					padding-right: 0;
+				}
+
+				.icon {
+					&:before {
+						font-size: 1.5em;
+					}
+				}
+			}
+		}
+
+		&.icons-grid {
+			list-style: none;
+			padding: 0;
+			position: relative;
+
+			li {
+				display: block;
+				float: left;
+				padding: ($size-element-margin * 1.5) 0;
+				width: 50%;
+
+				h3 {
+					margin: 0;
+				}
+
+				&:nth-child(2n + 1) {
+					box-shadow: inset -1px 0 0 0 $color-border, 1px 0 0 0 $color-border;
+				}
+
+				&:nth-child(2n + 3) {
+					&:before {
+						background: $color-border;
+						content: '';
+						display: block;
+						height: 2px;
+						margin-top: ($size-element-margin * -1.5);
+						position: absolute;
+						width: 100%;
+					}
+				}
+			}
+
+			&:after {
+				clear: both;
+				content: '';
+				display: block;
+			}
+		}
+
+		&.actions {
+			cursor: default;
+			list-style: none;
+			padding-left: 0;
+
+			li {
+				display: inline-block;
+				padding: 0 ($size-element-margin * 0.5) 0 0;
+				vertical-align: middle;
+
+				&:last-child {
+					padding-right: 0;
+				}
+			}
+
+			&.small {
+				li {
+					padding: 0 ($size-element-margin * 0.25) 0 0;
+				}
+			}
+
+			&.vertical {
+				li {
+					display: block;
+					padding: ($size-element-margin * 0.5) 0 0 0;
+
+					&:first-child {
+						padding-top: 0;
+					}
+
+					> * {
+						margin-bottom: 0;
+					}
+				}
+
+				&.small {
+					li {
+						padding: ($size-element-margin * 0.25) 0 0 0;
+
+						&:first-child {
+							padding-top: 0;
+						}
+					}
+				}
+			}
+
+			&.fit {
+				display: table;
+				margin-left: ($size-element-margin * -0.5);
+				padding: 0;
+				table-layout: fixed;
+				width: calc(100% + #{($size-element-margin * 0.5)});
+
+				li {
+					display: table-cell;
+					padding: 0 0 0 ($size-element-margin * 0.5);
+
+					> * {
+						margin-bottom: 0;
+						min-width: 0;
+					}
+				}
+
+				&.small {
+					margin-left: ($size-element-margin * -0.25);
+					width: calc(100% + #{($size-element-margin * 0.25)});
+
+					li {
+						padding: 0 0 0 ($size-element-margin * 0.25);
+					}
+				}
+			}
+		}
+	}
+
+	dl {
+		margin: 0 0 $size-element-margin 0;
+	}
+
+/* Table */
+
+	.table-wrapper {
+		-webkit-overflow-scrolling: touch;
+		overflow-x: auto;
+	}
+
+	table {
+		margin: 0 0 $size-element-margin 0;
+		width: 100%;
+
+		tbody {
+			tr {
+				border: solid 1px $color-border;
+				border-left: 0;
+				border-right: 0;
+
+				&:nth-child(2n + 1) {
+					background-color: $color-border-bg;
+				}
+			}
+		}
+
+		td {
+			padding: 0.75em 0.75em;
+		}
+
+		th {
+			color: $color-fg-bold;
+			font-size: 0.9em;
+			font-weight: $font-weight-bold;
+			padding: 0 0.75em 0.75em 0.75em;
+			text-align: left;
+		}
+
+		thead {
+			border-bottom: solid 2px $color-border;
+		}
+
+		tfoot {
+			border-top: solid 2px $color-border;
+		}
+
+		&.alt {
+			border-collapse: separate;
+
+			tbody {
+				tr {
+					td {
+						border: solid 1px $color-border;
+						border-left-width: 0;
+						border-top-width: 0;
+
+						&:first-child {
+							border-left-width: 1px;
+						}
+					}
+
+					&:first-child {
+						td {
+							border-top-width: 1px;
+						}
+					}
+				}
+			}
+
+			thead {
+				border-bottom: 0;
+			}
+
+			tfoot {
+				border-top: 0;
+			}
+		}
+	}
+
+/* Button */
+
+	input[type="submit"],
+	input[type="reset"],
+	input[type="button"],
+	button,
+	.button {
+		@include vendor-property('appearance', 'none');
+		@include vendor-property('transition', 'background-color #{$duration-transition} ease-in-out, color #{$duration-transition} ease-in-out');
+		background-color: transparent;
+		border-radius: 0;
+		border: 0;
+		box-shadow: inset 0 0 0 2px $color-border;
+		color: $color-fg-bold !important;
+		cursor: pointer;
+		display: inline-block;
+		font-weight: $font-weight-bold;
+		height: $size-element-height;
+		letter-spacing: 0.05em;
+		line-height: ($size-element-height * 1.05);
+		padding: 0 2em;
+		text-align: center;
+		text-decoration: none;
+		text-transform: uppercase;
+		white-space: nowrap;
+
+		&:hover {
+			background-color: $color-border-bg;
+			color: $color-fg-bold !important;
+		}
+
+		&:active {
+			background-color: $color-border2-bg;
+			color: $color-fg-bold !important;
+		}
+
+		&.icon {
+			padding-left: 1.35em;
+
+			&:before {
+				color: $color-fg-light;
+				margin-right: 0.5em;
+			}
+		}
+
+		&.fit {
+			display: block;
+			margin: 0 0 ($size-element-margin * 0.5) 0;
+			width: 100%;
+		}
+
+		&.small {
+			font-size: 0.8em;
+		}
+
+		&.big {
+			font-size: 1.35em;
+		}
+
+		&.special {
+			background-color: $color-accent-bg;
+			border: 0;
+			box-shadow: none;
+			color: $color-accent-fg-bold !important;
+
+			&:hover {
+				background-color: lighten($color-accent-bg, 5);
+			}
+
+			&:active {
+				background-color: darken($color-accent-bg, 5);
+			}
+
+			&.icon {
+				&:before {
+					color: $color-accent-fg-light;
+				}
+			}
+		}
+
+		&.disabled,
+		&:disabled {
+			background-color: $color-fg !important;
+			box-shadow: none !important;
+			color: $color-bg !important;
+			cursor: default;
+			opacity: 0.25;
+		}
+	}
+
+/* Main BG */
+
+	.main-bg {
+		@include vendor-property('transition', 'opacity #{$duration-bg-fadein} ease-out');
+		background-attachment:		fixed,							fixed;
+		background-position:		top left,						center center;
+		background-repeat:			repeat,							none;
+		background-size:			auto,							cover;
+		height: 100%;
+		left: 0;
+		opacity: 0;
+		position: fixed;
+		top: 0;
+		width: 100%;
+		z-index: -1;
+
+		&.active {
+			opacity: 1;
+		}
+	}
+
+/* Main */
+
+	.main {
+		position: relative;
+
+		.image.primary {
+			display: none;
+		}
+
+		.container {
+			@include padding($size-padding-tb, $size-padding-lr, (0, 0, 5em, 0));
+			background: transparentize($color-bg, 0.05);
+			box-shadow: inset 0 1px 0 0 $color-border;
+
+			&:before {
+				@include minHeight($size-padding-tb, 5em);
+				content: '';
+				display: inline-block;
+				vertical-align: middle;
+				width: 1px;
+			}
+
+			.content {
+				display: inline-block;
+				margin-right: 1px;
+				vertical-align: middle;
+				width: calc(100% - 10px);
+			}
+		}
+
+		.goto-next {
+			@include vendor-property('transition', 'background-color #{$duration-transition} ease-in-out');
+			background-color: $color-border-bg;
+			background-image: url('images/arrow.svg');
+			background-position: center center;
+			background-repeat: no-repeat;
+			border-radius: 100%;
+			border: 0;
+			bottom: 3em;
+			display: block;
+			height: 4em;
+			left: 50%;
+			line-height: 4em;
+			margin-left: -2em;
+			overflow: hidden;
+			position: absolute;
+			text-indent: 4em;
+			white-space: nowrap;
+			width: 4em;
+
+			&:hover {
+				background-color: $color-border2-bg;
+			}
+		}
+	}
+
+/* Header */
+
+	#header {
+		height: 100vh;
+		position: relative;
+		text-align: center;
+
+		&:after {
+			content: '';
+			display: inline-block;
+			height: 100vh;
+			vertical-align: middle;
+		}
+
+		header {
+			color: $color-alt-fg;
+			display: inline-block;
+			padding-bottom: ($size-element-height + ($size-padding-lr * 2));
+			vertical-align: middle;
+
+			h1, h2, h3, h4, h5, h6, strong, b {
+				color: $color-alt-fg-bold;
+			}
+
+			a {
+				color: inherit;
+
+				&:hover {
+					color: $color-alt-fg-bold !important;
+				}
+			}
+
+			h1 {
+				font-size: 3em;
+				line-height: 1.25em;
+				margin: 0;
+
+				&:after {
+					margin-top: 0.5em;
+				}
+			}
+
+			p {
+				color: $color-alt-fg-bold;
+				font-weight: $font-weight-bold;
+				margin: ($size-element-margin * 0.75) 0 0 0;
+			}
+		}
+
+		.container {
+			background: transparentize($color-bg, 0.05);
+			bottom: 0;
+			left: 50%;
+			margin-left: -17.5em;
+			padding: $size-padding-lr;
+			position: absolute;
+
+			> :last-child {
+				margin-bottom: 0;
+			}
+
+			.button {
+				min-width: 12em;
+			}
+		}
+	}
+
+/* Footer */
+
+	#footer {
+		min-height: 100vh;
+		padding: 0 0 12em 0;
+		position: relative;
+		text-align: center;
+
+		.container {
+			@include padding($size-padding-tb, $size-padding-lr);
+			background: transparentize($color-bg, 0.05);
+			box-shadow: inset 0 1px 0 0 $color-border;
+		}
+
+		footer {
+			bottom: $size-element-margin;
+			color: $color-alt-fg;
+			left: 0;
+			position: absolute;
+			text-align: center;
+			width: 100%;
+
+			h1, h2, h3, h4, h5, h6, strong, b {
+				color: $color-alt-fg-bold;
+			}
+
+			a {
+				color: inherit;
+
+				&:hover {
+					color: $color-alt-fg-bold !important;
+				}
+			}
+
+			.copyright {
+				font-size: 0.8em;
+				line-height: 1em;
+				padding: 0;
+
+				li {
+					border-left: solid 1px $color-alt-fg-lighter;
+					display: inline-block;
+					margin: 0 0 0 1em;
+					padding: 0 0 0 1em;
+
+					&:first-child {
+						border-left: 0;
+						margin-left: 0;
+						padding-left: 0;
+					}
+				}
+			}
+		}
+	}