App

+FROM nginx
+COPY website /usr/share/nginx/html
\ No newline at end of file

+Eventually by HTML5 UP
+html5up.net | @ajlkn
+Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+
+
+Just a simple placeholder template for your kickass app/product/startup/whatever until it
+launches. Includes an email signup form and a cool slideshow background (more on both below).
+
+Demo images* courtesy of Unsplash, a radtastic collection of CC0 (public domain) images
+you can use for pretty much whatever.
+
+(* = not included)
+
+AJ
+aj@lkn.io | @ajlkn
+
+
+Signup Form:
+
+	The signup form won't actually do anything (other than report back with a "thank you" message)
+	until you tie it to either a third party service (eg. MailChimp) or your own hosted solution.
+	In either case, there are two ways to go:
+
+	1. The conventional (non-AJAX) way, which pretty much comes down to pointing the form's "action"
+	attribute to your service/script URL. If you go this route, remove the entire "Signup Form" code
+	block from assets/js/main.js (since it's not needed for this approach).
+
+	-or-
+
+	2. The AJAX way. How you set this up is largely dependent on the service/solution you're using
+	so you'll need to consult their/its documentation. However, I have included some basic code
+	(under "Signup Form" in assets/js/main.js) that will at least let you interact with the
+	form itself.
+
+
+Slideshow Background:
+
+	This is pretty straightforward, but there are two JS settings you'll want to be aware of
+	(found under "Slideshow Background" in assets/js/main.js):
+
+	images
+
+		The list of images to cycle through, given in the following format:
+
+			'url': 'alignment'
+
+		Where 'url' is the image (eg. 'images/foo.jpg', 'http://somewhere.else/foo.jpg'), and
+		'alignment' is how the image should be vertically aligned ('top', 'center', or 'bottom').
+
+		Note: Browsers that don't support CSS transitions (like IE<=9) will only see the first image.
+
+	delay
+
+		How long to wait between transitions (in ms). Note that this must be at least twice as long as
+		the transition speed itself (currently 3 seconds).
+
+
+Credits:
+
+	Demo Images:
+		Unsplash (unsplash.com)
+
+	Icons:
+		Font Awesome (fontawesome.io)
+
+	Other:
+		Responsive Tools (github.com/ajlkn/responsive-tools)
\ No newline at end of file

+/*
+	Eventually by HTML5 UP
+	html5up.net | @ajlkn
+	Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+*/
+
+(function() {
+
+	"use strict";
+
+	var	$body = document.querySelector('body');
+
+	// Methods/polyfills.
+
+		// classList | (c) @remy | github.com/remy/polyfills | rem.mit-license.org
+			!function(){function t(t){this.el=t;for(var n=t.className.replace(/^\s+|\s+$/g,"").split(/\s+/),i=0;i<n.length;i++)e.call(this,n[i])}function n(t,n,i){Object.defineProperty?Object.defineProperty(t,n,{get:i}):t.__defineGetter__(n,i)}if(!("undefined"==typeof window.Element||"classList"in document.documentElement)){var i=Array.prototype,e=i.push,s=i.splice,o=i.join;t.prototype={add:function(t){this.contains(t)||(e.call(this,t),this.el.className=this.toString())},contains:function(t){return-1!=this.el.className.indexOf(t)},item:function(t){return this[t]||null},remove:function(t){if(this.contains(t)){for(var n=0;n<this.length&&this[n]!=t;n++);s.call(this,n,1),this.el.className=this.toString()}},toString:function(){return o.call(this," ")},toggle:function(t){return this.contains(t)?this.remove(t):this.add(t),this.contains(t)}},window.DOMTokenList=t,n(Element.prototype,"classList",function(){return new t(this)})}}();
+
+		// canUse
+			window.canUse=function(p){if(!window._canUse)window._canUse=document.createElement("div");var e=window._canUse.style,up=p.charAt(0).toUpperCase()+p.slice(1);return p in e||"Moz"+up in e||"Webkit"+up in e||"O"+up in e||"ms"+up in e};
+
+		// window.addEventListener
+			(function(){if("addEventListener"in window)return;window.addEventListener=function(type,f){window.attachEvent("on"+type,f)}})();
+
+	// Play initial animations on page load.
+		window.addEventListener('load', function() {
+			window.setTimeout(function() {
+				$body.classList.remove('is-preload');
+			}, 100);
+		});
+
+	// Slideshow Background.
+		(function() {
+
+			// Settings.
+				var settings = {
+
+					// Images (in the format of 'url': 'alignment').
+						images: {
+							'images/bg01.jpg': 'center',
+							'images/bg02.jpg': 'center',
+							'images/bg03.jpg': 'center'
+						},
+
+					// Delay.
+						delay: 6000
+
+				};
+
+			// Vars.
+				var	pos = 0, lastPos = 0,
+					$wrapper, $bgs = [], $bg,
+					k, v;
+
+			// Create BG wrapper, BGs.
+				$wrapper = document.createElement('div');
+					$wrapper.id = 'bg';
+					$body.appendChild($wrapper);
+
+				for (k in settings.images) {
+
+					// Create BG.
+						$bg = document.createElement('div');
+							$bg.style.backgroundImage = 'url("' + k + '")';
+							$bg.style.backgroundPosition = settings.images[k];
+							$wrapper.appendChild($bg);
+
+					// Add it to array.
+						$bgs.push($bg);
+
+				}
+
+			// Main loop.
+				$bgs[pos].classList.add('visible');
+				$bgs[pos].classList.add('top');
+
+				// Bail if we only have a single BG or the client doesn't support transitions.
+					if ($bgs.length == 1
+					||	!canUse('transition'))
+						return;
+
+				window.setInterval(function() {
+
+					lastPos = pos;
+					pos++;
+
+					// Wrap to beginning if necessary.
+						if (pos >= $bgs.length)
+							pos = 0;
+
+					// Swap top images.
+						$bgs[lastPos].classList.remove('top');
+						$bgs[pos].classList.add('visible');
+						$bgs[pos].classList.add('top');
+
+					// Hide last image after a short delay.
+						window.setTimeout(function() {
+							$bgs[lastPos].classList.remove('visible');
+						}, settings.delay / 2);
+
+				}, settings.delay);
+
+		})();
+
+	// Signup Form.
+		(function() {
+
+			// Vars.
+				var $form = document.querySelectorAll('#signup-form')[0],
+					$submit = document.querySelectorAll('#signup-form input[type="submit"]')[0],
+					$message;
+
+			// Bail if addEventListener isn't supported.
+				if (!('addEventListener' in $form))
+					return;
+
+			// Message.
+				$message = document.createElement('span');
+					$message.classList.add('message');
+					$form.appendChild($message);
+
+				$message._show = function(type, text) {
+
+					$message.innerHTML = text;
+					$message.classList.add(type);
+					$message.classList.add('visible');
+
+					window.setTimeout(function() {
+						$message._hide();
+					}, 3000);
+
+				};
+
+				$message._hide = function() {
+					$message.classList.remove('visible');
+				};
+
+			// Events.
+			// Note: If you're *not* using AJAX, get rid of this event listener.
+				$form.addEventListener('submit', function(event) {
+
+					event.stopPropagation();
+					event.preventDefault();
+
+					// Hide message.
+						$message._hide();
+
+					// Disable submit.
+						$submit.disabled = true;
+
+					// Process form.
+					// Note: Doesn't actually do anything yet (other than report back with a "thank you"),
+					// but there's enough here to piece together a working AJAX submission call that does.
+						window.setTimeout(function() {
+
+							// Reset form.
+								$form.reset();
+
+							// Enable submit.
+								$submit.disabled = false;
+
+							// Show message.
+								$message._show('success', 'Thank you!');
+								//$message._show('failure', 'Something went wrong. Please try again.');
+
+						}, 750);
+
+				});
+
+		})();
+
+})();
\ No newline at end of file

+///
+/// Eventually by HTML5 UP
+/// html5up.net | @ajlkn
+/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+///
+
+/* BG */
+
+	#bg {
+		@include vendor('transition', 'opacity #{_duration(bg-fadein)} ease-in-out');
+		height: 100%;
+		left: 0;
+		opacity: 0.375;
+		position: fixed;
+		top: 0;
+		width: 100%;
+		z-index: 1;
+
+		div {
+			@include vendor('transition', ('opacity #{_duration(bg-transition)} ease'));
+			background-size: cover;
+			height: 100%;
+			left: 0;
+			opacity: 0;
+			position: absolute;
+			top: 0;
+			visibility: hidden;
+			width: 150%;
+
+			&.visible {
+				@include vendor('animation', 'bg #{_duration(bg-slide)} linear infinite');
+				opacity: 1;
+				visibility: visible;
+				z-index: 1;
+
+				&.top {
+					z-index: 2;
+				}
+
+				@include breakpoint('<=large') {
+					@include vendor('animation', 'bg #{_duration(bg-slide) * 0.65} linear infinite');
+				}
+
+				@include breakpoint('<=small') {
+					@include vendor('animation', 'bg #{_duration(bg-slide) * 0.4} linear infinite');
+				}
+			}
+
+			&:only-child {
+				@include vendor('animation-direction', 'alternate !important');
+			}
+		}
+
+		body.is-preload & {
+			opacity: 0;
+		}
+	}
+
+	@include keyframes(bg) {
+		0% {
+			@include vendor('transform', 'translateX(0)');
+		}
+
+		100% {
+			@include vendor('transform', 'translateX(-25%)');
+		}
+	}
\ No newline at end of file

+///
+/// Eventually by HTML5 UP
+/// html5up.net | @ajlkn
+/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+///
+
+/* Basic */
+
+	// MSIE: Required for IEMobile.
+		@-ms-viewport {
+			width: device-width;
+		}
+
+	// MSIE: Prevents scrollbar from overlapping content.
+		body {
+			-ms-overflow-style: scrollbar;
+		}
+
+	// Ensures page width is always >=320px.
+		@include breakpoint('<=xsmall') {
+			html, body {
+				min-width: 320px;
+			}
+		}
+
+	// Set box model to border-box.
+	// Based on css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice
+		html {
+			box-sizing: border-box;
+		}
+
+		*, *:before, *:after {
+			box-sizing: inherit;
+		}
+
+	html, body {
+		height: 100%;
+		overflow-x: hidden;
+		width: 100%;
+
+		@include breakpoint('short') {
+			height: auto;
+			min-height: 100%;
+		}
+	}
+
+	body {
+		@include vendor('display', 'flex');
+		@include vendor('flex-direction', 'column');
+		@include vendor('justify-content', 'center');
+		background-color: _palette(bg);
+		padding: 6em 4em 4em 4em;
+
+		// Stops initial animations until page loads.
+			&.is-preload {
+				*, *:before, *:after {
+					@include vendor('animation', 'none !important');
+					@include vendor('transition', 'none !important');
+				}
+			}
+
+		> * {
+			position: relative;
+			z-index: 2;
+		}
+
+		@include breakpoint('<=xlarge') {
+			padding: 6em 3.5em 3.5em 3.5em;
+		}
+
+		@include breakpoint('<=small') {
+			padding: 5em 2em 2em 2em;
+		}
+
+		@include breakpoint('<=xxsmall') {
+			padding: 5em 1.25em 1.25em 1.25em;
+		}
+	}
\ No newline at end of file

+///
+/// Eventually by HTML5 UP
+/// html5up.net | @ajlkn
+/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+///
+
+// Reset.
+// Based on meyerweb.com/eric/tools/css/reset (v2.0 | 20110126 | License: 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;
+
+		&:before,
+		&:after {
+			content: '';
+			content: none;
+		}
+	}
+
+	table {
+		border-collapse: collapse;
+		border-spacing: 0;
+	}
+
+	body {
+		-webkit-text-size-adjust: none;
+	}
+
+	mark {
+		background-color: transparent;
+		color: inherit;
+	}
+
+	input::-moz-focus-inner {
+		border: 0;
+		padding: 0;
+	}
+
+	input, select, textarea {
+		-moz-appearance: none;
+		-webkit-appearance: none;
+		-ms-appearance: none;
+		appearance: none;
+	}
\ No newline at end of file

+///
+/// Eventually by HTML5 UP
+/// html5up.net | @ajlkn
+/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+///
+
+/* Type */
+
+	body, input, select, textarea {
+		color: _palette(fg);
+		font-family: _font(family);
+		font-size: 16pt;
+		font-weight: _font(weight);
+		letter-spacing: _font(letter-spacing);
+		line-height: 1.65em;
+
+		@include breakpoint('<=xlarge') {
+			font-size: 12pt;
+		}
+
+		@include breakpoint('<=large') {
+			font-size: 11pt;
+		}
+
+		@include breakpoint('<=medium') {
+			font-size: 12pt;
+		}
+
+		@include breakpoint('<=small') {
+			font-size: 12pt;
+		}
+
+		@include breakpoint('<=xsmall') {
+			font-size: 12pt;
+		}
+	}
+
+	a {
+		@include vendor('transition', (
+			'border-bottom-color #{_duration(transition)} ease',
+			'color #{_duration(transition)} ease'
+		));
+		border-bottom: dotted 1px _palette(border2);
+		color: _palette(accent, bg);
+		text-decoration: none;
+
+		&:hover {
+			border-bottom-color: transparent;
+			color: _palette(accent, bg) !important;
+			text-decoration: none;
+		}
+	}
+
+	strong, b {
+		color: _palette(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: _palette(fg-bold);
+		font-weight: _font(weight-bold);
+		line-height: 1em;
+		margin: 0 0 (_size(element-margin) * 0.5) 0;
+
+		a {
+			color: inherit;
+			text-decoration: none;
+		}
+	}
+
+	h1 {
+		font-size: 2.5em;
+		line-height: 1.25em;
+	}
+
+	h2 {
+		font-size: 1.75em;
+		line-height: 1.5em;
+	}
+
+	h3 {
+		font-size: 1.35em;
+		line-height: 1.5em;
+	}
+
+	h4 {
+		font-size: 1.1em;
+		line-height: 1.5em;
+	}
+
+	h5 {
+		font-size: 0.9em;
+		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;
+	}
+
+	blockquote {
+		border-left: solid (_size(border-width) * 4) _palette(border);
+		font-style: italic;
+		margin: 0 0 _size(element-margin) 0;
+		padding: (_size(element-margin) / 4) 0 (_size(element-margin) / 4) _size(element-margin);
+	}
+
+	code {
+		background: _palette(border-bg);
+		border-radius: _size(border-radius);
+		border: solid _size(border-width) _palette(border);
+		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;
+		}
+	}
+
+	hr {
+		border: 0;
+		border-bottom: solid _size(border-width) _palette(border);
+		margin: _size(element-margin) 0;
+
+		&.major {
+			margin: (_size(element-margin) * 1.5) 0;
+		}
+	}
\ No newline at end of file

+///
+/// Eventually by HTML5 UP
+/// html5up.net | @ajlkn
+/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+///
+
+/* Button */
+
+	input[type="submit"],
+	input[type="reset"],
+	input[type="button"],
+	button,
+	.button {
+		@include vendor('appearance', 'none');
+		@include vendor('transition', (
+			'background-color #{_duration(transition)} ease-in-out',
+			'color #{_duration(transition)} ease-in-out',
+			'opacity #{_duration(transition)} ease-in-out'
+		));
+		background-color: _palette(accent, bg);
+		border-radius: _size(border-radius);
+		border: 0;
+		color: _palette(accent, fg-bold) !important;
+		cursor: pointer;
+		display: inline-block;
+		font-weight: _font(weight-bold);
+		height: _size(element-height);
+		line-height: _size(element-height);
+		padding: 0 1.125em;
+		text-align: center;
+		text-decoration: none;
+		white-space: nowrap;
+
+		&:hover {
+			background-color: lighten(_palette(accent, bg), 5);
+		}
+
+		&:active {
+			background-color: darken(_palette(accent, bg), 5);
+		}
+
+		&.disabled,
+		&:disabled {
+			opacity: 0.5;
+		}
+
+		@include breakpoint('<=xsmall') {
+			padding: 0;
+		}
+	}
\ No newline at end of file

+///
+/// Eventually by HTML5 UP
+/// html5up.net | @ajlkn
+/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+///
+
+/* Form */
+
+	form {
+		margin: 0 0 _size(element-margin) 0;
+
+		.message {
+			@include icon(false, solid);
+			@include vendor('transition', (
+				'opacity #{_duration(transition)} ease-in-out',
+				'transform #{_duration(transition)} ease-in-out'
+			));
+			@include vendor('transform', 'scale(1.05)');
+			height: _size(element-height);
+			line-height: _size(element-height);
+			opacity: 0;
+
+			&:before {
+				margin-right: 0.5em;
+			}
+
+			&.visible {
+				@include vendor('transform', 'scale(1)');
+				opacity: 1;
+			}
+
+			&.success {
+				color: _palette(positive, bg);
+
+				&:before {
+					content: '\f00c';
+				}
+			}
+
+			&.failure {
+				color: _palette(negative, bg);
+
+				&:before {
+					content: '\f119';
+				}
+			}
+		}
+	}
+
+	label {
+		color: _palette(fg-bold);
+		display: block;
+		font-size: 0.9em;
+		font-weight: _font(weight-bold);
+		margin: 0 0 (_size(element-margin) * 0.5) 0;
+	}
+
+	@include keyframes(focus) {
+		0% { @include vendor('transform', 'scale(1)'); }
+		50% { @include vendor('transform', 'scale(1.025)'); }
+		100% { @include vendor('transform', 'scale(1)'); }
+	}
+
+	input[type="text"],
+	input[type="password"],
+	input[type="email"],
+	select,
+	textarea {
+		@include vendor('appearance', 'none');
+		@include vendor('transform', 'scale(1)');
+		@include vendor('transition', (
+			'border-color #{_duration(transition)} ease',
+			'background-color #{_duration(transition)} ease'
+		));
+		background-color: transparent;
+		border-radius: _size(border-radius);
+		border: none;
+		border: solid _size(border-width) _palette(border);
+		color: inherit;
+		display: block;
+		outline: 0;
+		padding: 0 1em;
+		text-decoration: none;
+		width: 100%;
+
+		&:invalid {
+			box-shadow: none;
+		}
+
+		&:focus {
+			@include vendor('animation', 'focus 0.1s');
+			background-color: _palette(border-bg);
+			border-color: _palette(accent, bg);
+		}
+	}
+
+	select {
+		background-image: svg-url("<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' preserveAspectRatio='none' viewBox='0 0 40 40'><path d='M9.4,12.3l10.4,10.4l10.4-10.4c0.2-0.2,0.5-0.4,0.9-0.4c0.3,0,0.6,0.1,0.9,0.4l3.3,3.3c0.2,0.2,0.4,0.5,0.4,0.9 c0,0.4-0.1,0.6-0.4,0.9L20.7,31.9c-0.2,0.2-0.5,0.4-0.9,0.4c-0.3,0-0.6-0.1-0.9-0.4L4.3,17.3c-0.2-0.2-0.4-0.5-0.4-0.9 c0-0.4,0.1-0.6,0.4-0.9l3.3-3.3c0.2-0.2,0.5-0.4,0.9-0.4S9.1,12.1,9.4,12.3z' fill='#{_palette(border)}' /></svg>");
+		background-size: 1.25rem;
+		background-repeat: no-repeat;
+		background-position: calc(100% - 1rem) center;
+		height: _size(element-height);
+		padding-right: _size(element-height);
+		text-overflow: ellipsis;
+
+		option {
+			color: _palette(fg-bold);
+			background: _palette(bg);
+		}
+
+		&:focus {
+			&::-ms-value {
+				background-color: transparent;
+			}
+		}
+
+		&::-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('appearance', 'none');
+		display: block;
+		float: left;
+		margin-right: -2em;
+		opacity: 0;
+		width: 1em;
+		z-index: -1;
+
+		& + label {
+			@include icon(false, solid);
+			color: _palette(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: _palette(border-bg);
+				border-radius: _size(border-radius);
+				border: solid _size(border-width) _palette(border);
+				content: '';
+				display: inline-block;
+				font-size: 0.8em;
+				height: (_size(element-height) * 0.6);
+				left: 0;
+				line-height: (_size(element-height) * 0.6);
+				position: absolute;
+				text-align: center;
+				top: 0;
+				width: (_size(element-height) * 0.6);
+			}
+		}
+
+		&:checked + label {
+			&:before {
+				background: _palette(accent, bg);
+				border-color: _palette(accent, bg);
+				color: _palette(accent, fg-bold);
+				content: '\f00c';
+			}
+		}
+
+		&:focus + label {
+			&:before {
+				border-color: _palette(accent, bg);
+				box-shadow: 0 0 0 _size(border-width) _palette(accent, bg);
+			}
+		}
+	}
+
+	input[type="checkbox"] {
+		& + label {
+			&:before {
+				border-radius: _size(border-radius);
+			}
+		}
+	}
+
+	input[type="radio"] {
+		& + label {
+			&:before {
+				border-radius: 100%;
+			}
+		}
+	}
+
+	::-webkit-input-placeholder {
+		color: _palette(fg-light) !important;
+		opacity: 1.0;
+	}
+
+	:-moz-placeholder {
+		color: _palette(fg-light) !important;
+		opacity: 1.0;
+	}
+
+	::-moz-placeholder {
+		color: _palette(fg-light) !important;
+		opacity: 1.0;
+	}
+
+	:-ms-input-placeholder {
+		color: _palette(fg-light) !important;
+		opacity: 1.0;
+	}
+
+	.formerize-placeholder {
+		color: _palette(fg-light) !important;
+		opacity: 1.0;
+	}
\ No newline at end of file

+///
+/// Eventually by HTML5 UP
+/// html5up.net | @ajlkn
+/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+///
+
+/* Icon */
+
+	.icon {
+		@include icon;
+		border-bottom: none;
+		position: relative;
+
+		> .label {
+			display: none;
+		}
+
+		&:before {
+			line-height: inherit;
+		}
+
+		&.solid {
+			&:before {
+				font-weight: 900;
+			}
+		}
+
+		&.brands {
+			&:before {
+				font-family: 'Font Awesome 5 Brands';
+			}
+		}
+	}
\ No newline at end of file

+///
+/// Eventually by HTML5 UP
+/// html5up.net | @ajlkn
+/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+///
+
+/* Icons */
+
+	ul.icons {
+		cursor: default;
+		list-style: none;
+		padding-left: 0;
+
+		li {
+			display: inline-block;
+			padding: 0 1em 0 0;
+
+			&:last-child {
+				padding-right: 0;
+			}
+
+			.icon {
+				&:before {
+					font-size: 1.25em;
+				}
+			}
+
+			a {
+				color: inherit;
+			}
+		}
+	}
\ No newline at end of file

+///
+/// Eventually by HTML5 UP
+/// html5up.net | @ajlkn
+/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+///
+
+/* 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;
+		}
+	}
\ No newline at end of file

+///
+/// Eventually by HTML5 UP
+/// html5up.net | @ajlkn
+/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+///
+
+/* Section/Article */
+
+	section, article {
+		&.special {
+			text-align: center;
+		}
+	}
+
+	header {
+		p {
+			color: _palette(fg-light);
+			position: relative;
+			margin: 0 0 (_size(element-margin) * 0.75) 0;
+		}
+
+		h2 + p {
+			font-size: 1.25em;
+			margin-top: (_size(element-margin) * -0.5);
+			line-height: 1.5em;
+		}
+
+		h3 + p {
+			font-size: 1.1em;
+			margin-top: (_size(element-margin) * -0.4);
+			line-height: 1.5em;
+		}
+
+		h4 + p,
+		h5 + p,
+		h6 + p {
+			font-size: 0.9em;
+			margin-top: (_size(element-margin) * -0.3);
+			line-height: 1.5em;
+		}
+
+		@include breakpoint('<=medium') {
+			br {
+				display: none;
+			}
+		}
+
+		@include breakpoint('<=small') {
+			br {
+				display: inline;
+			}
+		}
+
+		@include breakpoint('<=xsmall') {
+			br {
+				display: none;
+			}
+		}
+	}
\ No newline at end of file

+///
+/// Eventually by HTML5 UP
+/// html5up.net | @ajlkn
+/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+///
+
+/* Footer */
+
+	#footer {
+		@include vendor('transition', 'opacity 0.5s ease-in-out');
+		bottom: 4em;
+		color: _palette(fg-light);
+		left: 4em;
+		opacity: 0.5;
+		position: absolute;
+
+		.icons {
+			margin: 0 0 (_size(element-margin) * 0.25) 0;
+		}
+
+		.copyright {
+			font-size: 0.8em;
+			list-style: none;
+			padding: 0;
+
+			li {
+				border-left: solid 1px _palette(border2);
+				display: inline-block;
+				line-height: 1em;
+				margin: 0 0 0 0.75em;
+				padding: 0 0 0 0.75em;
+
+				&:first-child {
+					border-left: 0;
+					margin-left: 0;
+					padding-left: 0;
+				}
+			}
+
+			a {
+				color: inherit;
+			}
+		}
+
+		&:hover {
+			opacity: 1;
+		}
+
+		> :last-child {
+			margin-bottom: 0;
+		}
+
+		@include breakpoint('<=xlarge') {
+			bottom: 3.5em;
+			left: 3.5em;
+		}
+
+		@include breakpoint('<=small') {
+			bottom: 2em;
+			left: 2em;
+		}
+
+		@include breakpoint('<=xxsmall') {
+			bottom: 1.25em;
+			left: 1.25em;
+		}
+
+		@include breakpoint('short') {
+			bottom: auto;
+			left: auto;
+			margin: (_size(element-margin) * 0.5) 0 0 0;
+			position: relative;
+		}
+	}
\ No newline at end of file

+///
+/// Eventually by HTML5 UP
+/// html5up.net | @ajlkn
+/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+///
+
+/* Header */
+
+	#header {
+		h1 {
+			font-size: 3.25em;
+			margin: 0 0 (_size(element-margin) * 0.275) 0;
+		}
+
+		p {
+			font-size: 1.35em;
+			line-height: 1.65em;
+		}
+
+		a {
+			color: inherit;
+		}
+
+		@include breakpoint('<=small') {
+			h1 {
+				font-size: 2em;
+			}
+
+			p {
+				font-size: 1em;
+			}
+		}
+
+		@include breakpoint('<=xsmall') {
+			margin: 0 0 (_size(element-margin) * 0.5) 0;
+		}
+	}
\ No newline at end of file

+///
+/// Eventually by HTML5 UP
+/// html5up.net | @ajlkn
+/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+///
+
+/* Signup Form */
+
+	#signup-form {
+		@include vendor('display', 'flex');
+		position: relative;
+
+		input[type="text"],
+		input[type="password"],
+		input[type="email"] {
+			width: 18em;
+		}
+
+		> * {
+			margin: 0 0 0 1em;
+		}
+
+		> :first-child {
+			margin: 0 0 0 0;
+		}
+
+		@include breakpoint('<=xsmall') {
+			@include vendor('flex-direction', 'column');
+
+			input[type="type"],
+			input[type="password"],
+			input[type="email"] {
+				width: 100%;
+			}
+
+			> * {
+				margin: 1.25em 0 0 0;
+			}
+
+			.message {
+				bottom: -1.5em;
+				font-size: 0.9em;
+				height: 1em;
+				left: 0;
+				line-height: inherit;
+				margin-top: 0;
+				position: absolute;
+			}
+		}
+	}
\ No newline at end of file

+// breakpoints.scss v1.0 | @ajlkn | MIT licensed */
+
+// Vars.
+
+	/// Breakpoints.
+	/// @var {list}
+	$breakpoints: () !global;
+
+// Mixins.
+
+	/// Sets breakpoints.
+	/// @param {map} $x Breakpoints.
+	@mixin breakpoints($x: ()) {
+		$breakpoints: $x !global;
+	}
+
+	/// Wraps @content in a @media block targeting a specific orientation.
+	/// @param {string} $orientation Orientation.
+	@mixin orientation($orientation) {
+		@media screen and (orientation: #{$orientation}) {
+			@content;
+		}
+	}
+
+	/// Wraps @content in a @media block using a given query.
+	/// @param {string} $query Query.
+	@mixin breakpoint($query: null) {
+
+		$breakpoint: null;
+		$op: null;
+		$media: null;
+
+		// Determine operator, breakpoint.
+
+			// Greater than or equal.
+				@if (str-slice($query, 0, 2) == '>=') {
+
+					$op: 'gte';
+					$breakpoint: str-slice($query, 3);
+
+				}
+
+			// Less than or equal.
+				@elseif (str-slice($query, 0, 2) == '<=') {
+
+					$op: 'lte';
+					$breakpoint: str-slice($query, 3);
+
+				}
+
+			// Greater than.
+				@elseif (str-slice($query, 0, 1) == '>') {
+
+					$op: 'gt';
+					$breakpoint: str-slice($query, 2);
+
+				}
+
+			// Less than.
+				@elseif (str-slice($query, 0, 1) == '<') {
+
+					$op: 'lt';
+					$breakpoint: str-slice($query, 2);
+
+				}
+
+			// Not.
+				@elseif (str-slice($query, 0, 1) == '!') {
+
+					$op: 'not';
+					$breakpoint: str-slice($query, 2);
+
+				}
+
+			// Equal.
+				@else {
+
+					$op: 'eq';
+					$breakpoint: $query;
+
+				}
+
+		// Build media.
+			@if ($breakpoint and map-has-key($breakpoints, $breakpoint)) {
+
+				$a: map-get($breakpoints, $breakpoint);
+
+				// Range.
+					@if (type-of($a) == 'list') {
+
+						$x: nth($a, 1);
+						$y: nth($a, 2);
+
+						// Max only.
+							@if ($x == null) {
+
+								// Greater than or equal (>= 0 / anything)
+									@if ($op == 'gte') {
+										$media: 'screen';
+									}
+
+								// Less than or equal (<= y)
+									@elseif ($op == 'lte') {
+										$media: 'screen and (max-width: ' + $y + ')';
+									}
+
+								// Greater than (> y)
+									@elseif ($op == 'gt') {
+										$media: 'screen and (min-width: ' + ($y + 1) + ')';
+									}
+
+								// Less than (< 0 / invalid)
+									@elseif ($op == 'lt') {
+										$media: 'screen and (max-width: -1px)';
+									}
+
+								// Not (> y)
+									@elseif ($op == 'not') {
+										$media: 'screen and (min-width: ' + ($y + 1) + ')';
+									}
+
+								// Equal (<= y)
+									@else {
+										$media: 'screen and (max-width: ' + $y + ')';
+									}
+
+							}
+
+						// Min only.
+							@else if ($y == null) {
+
+								// Greater than or equal (>= x)
+									@if ($op == 'gte') {
+										$media: 'screen and (min-width: ' + $x + ')';
+									}
+
+								// Less than or equal (<= inf / anything)
+									@elseif ($op == 'lte') {
+										$media: 'screen';
+									}
+
+								// Greater than (> inf / invalid)
+									@elseif ($op == 'gt') {
+										$media: 'screen and (max-width: -1px)';
+									}
+
+								// Less than (< x)
+									@elseif ($op == 'lt') {
+										$media: 'screen and (max-width: ' + ($x - 1) + ')';
+									}
+
+								// Not (< x)
+									@elseif ($op == 'not') {
+										$media: 'screen and (max-width: ' + ($x - 1) + ')';
+									}
+
+								// Equal (>= x)
+									@else {
+										$media: 'screen and (min-width: ' + $x + ')';
+									}
+
+							}
+
+						// Min and max.
+							@else {
+
+								// Greater than or equal (>= x)
+									@if ($op == 'gte') {
+										$media: 'screen and (min-width: ' + $x + ')';
+									}
+
+								// Less than or equal (<= y)
+									@elseif ($op == 'lte') {
+										$media: 'screen and (max-width: ' + $y + ')';
+									}
+
+								// Greater than (> y)
+									@elseif ($op == 'gt') {
+										$media: 'screen and (min-width: ' + ($y + 1) + ')';
+									}
+
+								// Less than (< x)
+									@elseif ($op == 'lt') {
+										$media: 'screen and (max-width: ' + ($x - 1) + ')';
+									}
+
+								// Not (< x and > y)
+									@elseif ($op == 'not') {
+										$media: 'screen and (max-width: ' + ($x - 1) + '), screen and (min-width: ' + ($y + 1) + ')';
+									}
+
+								// Equal (>= x and <= y)
+									@else {
+										$media: 'screen and (min-width: ' + $x + ') and (max-width: ' + $y + ')';
+									}
+
+							}
+
+					}
+
+				// String.
+					@else {
+
+						// Missing a media type? Prefix with "screen".
+							@if (str-slice($a, 0, 1) == '(') {
+								$media: 'screen and ' + $a;
+							}
+
+						// Otherwise, use as-is.
+							@else {
+								$media: $a;
+							}
+
+					}
+
+			}
+
+		// Output.
+	        @media #{$media} {
+				@content;
+			}
+
+	}
\ No newline at end of file

+/// Removes a specific item from a list.
+/// @author Hugo Giraudel
+/// @param {list} $list List.
+/// @param {integer} $index Index.
+/// @return {list} Updated list.
+@function remove-nth($list, $index) {
+
+	$result: null;
+
+	@if type-of($index) != number {
+		@warn "$index: #{quote($index)} is not a number for `remove-nth`.";
+	}
+	@else if $index == 0 {
+		@warn "List index 0 must be a non-zero integer for `remove-nth`.";
+	}
+	@else if abs($index) > length($list) {
+		@warn "List index is #{$index} but list is only #{length($list)} item long for `remove-nth`.";
+	}
+	@else {
+
+		$result: ();
+		$index: if($index < 0, length($list) + $index + 1, $index);
+
+		@for $i from 1 through length($list) {
+
+			@if $i != $index {
+				$result: append($result, nth($list, $i));
+			}
+
+		}
+
+	}
+
+	@return $result;
+
+}
+
+/// Gets a value from a map.
+/// @author Hugo Giraudel
+/// @param {map} $map Map.
+/// @param {string} $keys Key(s).
+/// @return {string} Value.
+@function val($map, $keys...) {
+
+	@if nth($keys, 1) == null {
+		$keys: remove-nth($keys, 1);
+	}
+
+	@each $key in $keys {
+		$map: map-get($map, $key);
+	}
+
+	@return $map;
+
+}
+
+/// Gets a duration value.
+/// @param {string} $keys Key(s).
+/// @return {string} Value.
+@function _duration($keys...) {
+	@return val($duration, $keys...);
+}
+
+/// Gets a font value.
+/// @param {string} $keys Key(s).
+/// @return {string} Value.
+@function _font($keys...) {
+	@return val($font, $keys...);
+}
+
+/// Gets a misc value.
+/// @param {string} $keys Key(s).
+/// @return {string} Value.
+@function _misc($keys...) {
+	@return val($misc, $keys...);
+}
+
+/// Gets a palette value.
+/// @param {string} $keys Key(s).
+/// @return {string} Value.
+@function _palette($keys...) {
+	@return val($palette, $keys...);
+}
+
+/// Gets a size value.
+/// @param {string} $keys Key(s).
+/// @return {string} Value.
+@function _size($keys...) {
+	@return val($size, $keys...);
+}
\ No newline at end of file

+/// Makes an element's :before pseudoelement a FontAwesome icon.
+/// @param {string} $content Optional content value to use.
+/// @param {string} $category Optional category to use.
+/// @param {string} $where Optional pseudoelement to target (before or after).
+@mixin icon($content: false, $category: regular, $where: before) {
+
+	text-decoration: none;
+
+	&:#{$where} {
+
+		@if $content {
+			content: $content;
+		}
+
+		-moz-osx-font-smoothing: grayscale;
+		-webkit-font-smoothing: antialiased;
+		display: inline-block;
+		font-style: normal;
+		font-variant: normal;
+		text-rendering: auto;
+		line-height: 1;
+		text-transform: none !important;
+
+		@if ($category == brands) {
+			font-family: 'Font Awesome 5 Brands';
+		}
+		@elseif ($category == solid) {
+			font-family: 'Font Awesome 5 Free';
+			font-weight: 900;
+		}
+		@else {
+			font-family: 'Font Awesome 5 Free';
+			font-weight: 400;
+		}
+
+	}
+
+}
+
+/// Applies padding to an element, taking the current element-margin value into account.
+/// @param {mixed} $tb Top/bottom padding.
+/// @param {mixed} $lr Left/right padding.
+/// @param {list} $pad Optional extra padding (in the following order top, right, bottom, left)
+/// @param {bool} $important If true, adds !important.
+@mixin padding($tb, $lr, $pad: (0,0,0,0), $important: null) {
+
+	@if $important {
+		$important: '!important';
+	}
+
+	$x: 0.1em;
+
+	@if unit(_size(element-margin)) == 'rem' {
+		$x: 0.1rem;
+	}
+
+	padding: ($tb + nth($pad,1)) ($lr + nth($pad,2)) max($x, $tb - _size(element-margin) + nth($pad,3)) ($lr + nth($pad,4)) #{$important};
+
+}
+
+/// Encodes a SVG data URL so IE doesn't choke (via codepen.io/jakob-e/pen/YXXBrp).
+/// @param {string} $svg SVG data URL.
+/// @return {string} Encoded SVG data URL.
+@function svg-url($svg) {
+
+	$svg: str-replace($svg, '"', '\'');
+	$svg: str-replace($svg, '%', '%25');
+	$svg: str-replace($svg, '<', '%3C');
+	$svg: str-replace($svg, '>', '%3E');
+	$svg: str-replace($svg, '&', '%26');
+	$svg: str-replace($svg, '#', '%23');
+	$svg: str-replace($svg, '{', '%7B');
+	$svg: str-replace($svg, '}', '%7D');
+	$svg: str-replace($svg, ';', '%3B');
+
+	@return url("data:image/svg+xml;charset=utf8,#{$svg}");
+
+}
\ No newline at end of file

+// Misc.
+	$misc: (
+	);
+
+// Duration.
+	$duration: (
+		nav:				0.5s,
+		transition:			0.2s,
+		bg-fadein:			2s,
+		bg-transition:		3s,
+		bg-slide:			45s // (lower = faster, higher = slower)
+	);
+
+// Size.
+	$size: (
+		border-radius:		6px,
+		border-width:		2px,
+		element-height:		2.75em,
+		element-margin:		2em
+	);
+
+// Font.
+	$font: (
+		family:				('Roboto', sans-serif),
+		family-fixed:		('Courier New', monospace),
+		weight:				400,
+		weight-bold:		700,
+		letter-spacing:		-0.01em
+	);
+
+// Palette.
+	$palette: (
+		bg:					#000,
+		fg:					rgba(255,255,255,0.75),
+		fg-bold:			#fff,
+		fg-light:			rgba(255,255,255,0.5),
+		border:				rgba(255,255,255,0.35),
+		border-bg:			rgba(255,255,255,0.125),
+		border2:			rgba(255,255,255,0.25),
+
+		accent: (
+			bg:				#1cb495,
+			fg:				mix(#1cb495, #ffffff, 25%),
+			fg-bold:		#ffffff,
+			fg-light:		mix(#1cb495, #ffffff, 40%),
+			border:			rgba(255,255,255,0.25),
+			border-bg:		rgba(255,255,255,0.075),
+		),
+
+		positive: (
+			bg:				#1cb495,
+			fg:				#ffffff
+		),
+
+		negative: (
+			bg:				#ff2361,
+			fg:				#ffffff
+		)
+	);
\ No newline at end of file

+// vendor.scss v1.0 | @ajlkn | MIT licensed */
+
+// Vars.
+
+	/// Vendor prefixes.
+	/// @var {list}
+	$vendor-prefixes: (
+		'-moz-',
+		'-webkit-',
+		'-ms-',
+		''
+	);
+
+	/// Properties that should be vendorized.
+	/// Data via caniuse.com, github.com/postcss/autoprefixer, and developer.mozilla.org
+	/// @var {list}
+	$vendor-properties: (
+
+		// Animation.
+			'animation',
+			'animation-delay',
+			'animation-direction',
+			'animation-duration',
+			'animation-fill-mode',
+			'animation-iteration-count',
+			'animation-name',
+			'animation-play-state',
+			'animation-timing-function',
+
+		// Appearance.
+			'appearance',
+
+		// Backdrop filter.
+			'backdrop-filter',
+
+		// Background image options.
+			'background-clip',
+			'background-origin',
+			'background-size',
+
+		// Box sizing.
+			'box-sizing',
+
+		// Clip path.
+			'clip-path',
+
+		// Filter effects.
+			'filter',
+
+		// Flexbox.
+			'align-content',
+			'align-items',
+			'align-self',
+			'flex',
+			'flex-basis',
+			'flex-direction',
+			'flex-flow',
+			'flex-grow',
+			'flex-shrink',
+			'flex-wrap',
+			'justify-content',
+			'order',
+
+		// Font feature.
+			'font-feature-settings',
+			'font-language-override',
+			'font-variant-ligatures',
+
+		// Font kerning.
+			'font-kerning',
+
+		// Fragmented borders and backgrounds.
+			'box-decoration-break',
+
+		// Grid layout.
+			'grid-column',
+			'grid-column-align',
+			'grid-column-end',
+			'grid-column-start',
+			'grid-row',
+			'grid-row-align',
+			'grid-row-end',
+			'grid-row-start',
+			'grid-template-columns',
+			'grid-template-rows',
+
+		// Hyphens.
+			'hyphens',
+			'word-break',
+
+		// Masks.
+			'mask',
+			'mask-border',
+			'mask-border-outset',
+			'mask-border-repeat',
+			'mask-border-slice',
+			'mask-border-source',
+			'mask-border-width',
+			'mask-clip',
+			'mask-composite',
+			'mask-image',
+			'mask-origin',
+			'mask-position',
+			'mask-repeat',
+			'mask-size',
+
+		// Multicolumn.
+			'break-after',
+			'break-before',
+			'break-inside',
+			'column-count',
+			'column-fill',
+			'column-gap',
+			'column-rule',
+			'column-rule-color',
+			'column-rule-style',
+			'column-rule-width',
+			'column-span',
+			'column-width',
+			'columns',
+
+		// Object fit.
+			'object-fit',
+			'object-position',
+
+		// Regions.
+			'flow-from',
+			'flow-into',
+			'region-fragment',
+
+		// Scroll snap points.
+			'scroll-snap-coordinate',
+			'scroll-snap-destination',
+			'scroll-snap-points-x',
+			'scroll-snap-points-y',
+			'scroll-snap-type',
+
+		// Shapes.
+			'shape-image-threshold',
+			'shape-margin',
+			'shape-outside',
+
+		// Tab size.
+			'tab-size',
+
+		// Text align last.
+			'text-align-last',
+
+		// Text decoration.
+			'text-decoration-color',
+			'text-decoration-line',
+			'text-decoration-skip',
+			'text-decoration-style',
+
+		// Text emphasis.
+			'text-emphasis',
+			'text-emphasis-color',
+			'text-emphasis-position',
+			'text-emphasis-style',
+
+		// Text size adjust.
+			'text-size-adjust',
+
+		// Text spacing.
+			'text-spacing',
+
+		// Transform.
+			'transform',
+			'transform-origin',
+
+		// Transform 3D.
+			'backface-visibility',
+			'perspective',
+			'perspective-origin',
+			'transform-style',
+
+		// Transition.
+			'transition',
+			'transition-delay',
+			'transition-duration',
+			'transition-property',
+			'transition-timing-function',
+
+		// Unicode bidi.
+			'unicode-bidi',
+
+		// User select.
+			'user-select',
+
+		// Writing mode.
+			'writing-mode',
+
+	);
+
+	/// Values that should be vendorized.
+	/// Data via caniuse.com, github.com/postcss/autoprefixer, and developer.mozilla.org
+	/// @var {list}
+	$vendor-values: (
+
+		// Cross fade.
+			'cross-fade',
+
+		// Element function.
+			'element',
+
+		// Filter function.
+			'filter',
+
+		// Flexbox.
+			'flex',
+			'inline-flex',
+
+		// Grab cursors.
+			'grab',
+			'grabbing',
+
+		// Gradients.
+			'linear-gradient',
+			'repeating-linear-gradient',
+			'radial-gradient',
+			'repeating-radial-gradient',
+
+		// Grid layout.
+			'grid',
+			'inline-grid',
+
+		// Image set.
+			'image-set',
+
+		// Intrinsic width.
+			'max-content',
+			'min-content',
+			'fit-content',
+			'fill',
+			'fill-available',
+			'stretch',
+
+		// Sticky position.
+			'sticky',
+
+		// Transform.
+			'transform',
+
+		// Zoom cursors.
+			'zoom-in',
+			'zoom-out',
+
+	);
+
+// Functions.
+
+	/// Removes a specific item from a list.
+	/// @author Hugo Giraudel
+	/// @param {list} $list List.
+	/// @param {integer} $index Index.
+	/// @return {list} Updated list.
+	@function remove-nth($list, $index) {
+
+		$result: null;
+
+		@if type-of($index) != number {
+			@warn "$index: #{quote($index)} is not a number for `remove-nth`.";
+		}
+		@else if $index == 0 {
+			@warn "List index 0 must be a non-zero integer for `remove-nth`.";
+		}
+		@else if abs($index) > length($list) {
+			@warn "List index is #{$index} but list is only #{length($list)} item long for `remove-nth`.";
+		}
+		@else {
+
+			$result: ();
+			$index: if($index < 0, length($list) + $index + 1, $index);
+
+			@for $i from 1 through length($list) {
+
+				@if $i != $index {
+					$result: append($result, nth($list, $i));
+				}
+
+			}
+
+		}
+
+		@return $result;
+
+	}
+
+	/// Replaces a substring within another string.
+	/// @author Hugo Giraudel
+	/// @param {string} $string String.
+	/// @param {string} $search Substring.
+	/// @param {string} $replace Replacement.
+	/// @return {string} Updated string.
+	@function str-replace($string, $search, $replace: '') {
+
+		$index: str-index($string, $search);
+
+		@if $index {
+			@return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
+		}
+
+		@return $string;
+
+	}
+
+	/// Replaces a substring within each string in a list.
+	/// @param {list} $strings List of strings.
+	/// @param {string} $search Substring.
+	/// @param {string} $replace Replacement.
+	/// @return {list} Updated list of strings.
+	@function str-replace-all($strings, $search, $replace: '') {
+
+		@each $string in $strings {
+			$strings: set-nth($strings, index($strings, $string), str-replace($string, $search, $replace));
+		}
+
+		@return $strings;
+
+	}
+
+// Mixins.
+
+	/// Wraps @content in vendorized keyframe blocks.
+	/// @param {string} $name Name.
+	@mixin keyframes($name) {
+
+		@-moz-keyframes #{$name} { @content; }
+		@-webkit-keyframes #{$name} { @content; }
+		@-ms-keyframes #{$name} { @content; }
+		@keyframes #{$name} { @content; }
+
+	}
+
+	/// Vendorizes a declaration's property and/or value(s).
+	/// @param {string} $property Property.
+	/// @param {mixed} $value String/list of value(s).
+	@mixin vendor($property, $value) {
+
+		// Determine if property should expand.
+			$expandProperty: index($vendor-properties, $property);
+
+		// Determine if value should expand (and if so, add '-prefix-' placeholder).
+			$expandValue: false;
+
+			@each $x in $value {
+				@each $y in $vendor-values {
+					@if $y == str-slice($x, 1, str-length($y)) {
+
+						$value: set-nth($value, index($value, $x), '-prefix-' + $x);
+						$expandValue: true;
+
+					}
+				}
+			}
+
+		// Expand property?
+			@if $expandProperty {
+			    @each $vendor in $vendor-prefixes {
+			        #{$vendor}#{$property}: #{str-replace-all($value, '-prefix-', $vendor)};
+			    }
+			}
+
+		// Expand just the value?
+			@elseif $expandValue {
+			    @each $vendor in $vendor-prefixes {
+			        #{$property}: #{str-replace-all($value, '-prefix-', $vendor)};
+			    }
+			}
+
+		// Neither? Treat them as a normal declaration.
+			@else {
+		        #{$property}: #{$value};
+			}
+
+	}
\ No newline at end of file

+@import 'libs/vars';
+@import 'libs/functions';
+@import 'libs/mixins';
+@import 'libs/vendor';
+@import 'libs/breakpoints';
+@import 'fontawesome-all.min.css';
+@import url('https://fonts.googleapis.com/css?family=Roboto:400,700');
+
+/*
+	Eventually by HTML5 UP
+	html5up.net | @ajlkn
+	Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+*/
+
+// Breakpoints.
+
+	@include breakpoints((
+		xlarge:   ( 1281px,  1680px ),
+		large:    ( 981px,   1280px ),
+		medium:   ( 737px,   980px  ),
+		small:    ( 481px,   736px  ),
+		xsmall:   ( 361px,   480px  ),
+		xxsmall:  ( null,    360px  ),
+		short:    '(max-height: 640px)'
+	));
+
+// Base.
+
+	@import 'base/reset';
+	@import 'base/page';
+	@import 'base/bg';
+	@import 'base/typography';
+
+// Components.
+
+	@import 'components/section';
+	@import 'components/icon';
+	@import 'components/list';
+	@import 'components/icons';
+	@import 'components/form';
+	@import 'components/button';
+
+// Layout.
+
+	@import 'layout/header';
+	@import 'layout/signup-form';
+	@import 'layout/footer';
\ No newline at end of file

+<!DOCTYPE HTML>
+<!-- meu comentario -->
+<html>
+	<head>
+		<title>Eventually by HTML5 UP</title>
+		<meta charset="utf-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
+		<link rel="stylesheet" href="assets/css/main.css" />
+	</head>
+	<body class="is-preload">
+
+		<!-- Header -->
+			<header id="header">
+				<h1>Site de Secretaria das Cidades</h1>
+				<p>A simple template for telling the world when you'll launch<br />
+				your next big thing. Brought to you by <a href="http://html5up.net">HTML5 UP</a>.</p>
+			</header>
+
+		<!-- Signup Form -->
+			<form id="signup-form" method="post" action="#">
+				<input type="email" name="email" id="email" placeholder="Email Address" />
+				<input type="submit" value="Sign Up" />
+			</form>
+
+		<!-- Footer -->
+			<footer id="footer">
+				<ul class="icons">
+					<li><a href="#" class="icon brands fa-twitter"><span class="label">Twitter</span></a></li>
+					<li><a href="#" class="icon brands fa-instagram"><span class="label">Instagram</span></a></li>
+					<li><a href="#" class="icon brands fa-github"><span class="label">GitHub</span></a></li>
+					<li><a href="#" class="icon fa-envelope"><span class="label">Email</span></a></li>
+				</ul>
+				<ul class="copyright">
+					<li>&copy; Untitled.</li><li>Credits: <a href="http://html5up.net">HTML5 UP</a></li>
+				</ul>
+			</footer>
+
+		<!-- Scripts -->
+			<script src="assets/js/main.js"></script>
+
+	</body>
+</html>
\ No newline at end of file