okikio/index.html

## index.html
<html>

<body>

	<header class="navbar-layout">
		<header class="navbar-layout__header layout--fixed-header">
			<a class="navbar-layout__drawer-button">
				<i class="fa fa-bars"></i>
			</a>
			<nav class="navbar-layout__header-row">
				<!-- Title -->
				<header class="navbar-navigation-header">
					<h2 class="navbar-navigation-title"><a>Pixali<span>z</span>ed</a></h2>
				</header>

				<section class="navbar-layout-spacer">
					<div class="nav-form">
						<section class="navbar-search">
							<span class="navbar-search-icon fa fa-search"></span>
							<input type="search" class="in" id="searching" placeholder="Search" />
						</section>
						<ul id="searchResults" class="hidden"> </ul>
					</div>
				</section>

				<!-- Navigation. We hide it in small screens. -->
				<main class="navbar-navigation-main">
					<ul class="navbar-navigation">
						<li class="navbar-navigation_link">
							<a href="#">Link</a>
						</li>
						<li class="navbar-navigation_link">
							<a href="#">Link</a>
						</li>
						<li class="navbar-navigation_link">
							<a href="#">Link</a>
						</li>
						<li class="navbar-navigation_link">
							<a href="#">Link</a>
						</li>
					</ul>
				</main>
			</nav>
		</header>
		<nav class="sidebar_drawer layout--fixed-header">
			<header class="sidenav-header clearfix">
				<a>
					<i class="sidenav-close fa fa-times"></i>
				</a>
				<h2 class="sidenav-title">
					<a>
						Pixali<span>z</span>ed
					</a>
				</h2>

				<div class="nav-form">
					<section class="navbar-search">
						<span class="navbar-search-icon fa fa-search"></span>
						<input type="search" id="searchingS" placeholder="Search" />
					</section>
					<ul id="sea" class="hidden"> </ul>
				</div>

			</header>


			<main class="sidenav-main">
				<ul class="sidenav-navigation">
					<li class="sidenav_link">
						<a href="#">Link</a>
					</li>
					<li class="sidenav_link">
						<a href="#">Link</a>
					</li>
					<li class="sidenav_link">
						<a href="#">Link</a>
					</li>
					<li class="sidenav_link">
						<a href="#">Link</a>
					</li>
				</ul>
			</main>
			<footer class="sidenav-footer"></footer>
		</nav>
	</header>

	<main class="navbar-layout__content">
		<div class="sidebar-darken"></div>
		<div class="page-content">
			<!-- Your content goes here -->
			<section class="row">
				<section class="background bcd0 align-center">
					<header>
						<noscript>
							 Sorry, your browser does not support JavaScript or your Javascript is not loaded, please click Restart.
						</noscript>

						<p class="noscript">
							Sorry, your browser does not support JavaScript or your Javascript is not loaded, please click Restart.
						</p>
						<h2 class="section-title">CONTEST:  <i>Pixalized</i></h2>
						<p>Creating brick by brick.</p>
						<a><i class="fa fa-angle-double-down"></i></a>

					</header>
					<main class="layer">
					</main>
				</section>
				<section class="background bcd1 align-center">
					<header>
						<h2 class="section-title">Welcome</h2>
					</header>
					<main class="layer">
						<article class="layer-container">
							<div class="col container">
								<p>Thank you for visiting us and we hope we make you're visit well spent.</p>
							</div>
						</article>
					</main>
				</section>
			</section>
			<section class="background bcd2 align-center">
				<header>
					<h2 class="section-title">What</h2>
				</header>
				<main class="layer">
					<article class="layer-container">
						<div class="col container">
							<p>The contest <i class="title">Pixalized</i> is about making an image, a game, an animation or a website using shapes.</p>
						</div>
					</article>
				</main>
			</section>
			<section class="background bcd3 align-center">
				<header>
					<h2 class="section-title">How</h2>
				</header>
				<main class="layer">
					<article class="layer-container ">
						<div class="col container">
							<ul class="listing">
								When creating an image, a game, an animation or a website you must make it :
								<ul>
									<li>
										<i class="title">Pixalized</i> with shapes.
									</li>
									<li>
										Have ([Pix]) in the title.
									</li>
									<li>
										Completly original.
									</li>
									<li>
										Partners and teams are allowed.
									</li>
									<li>
										Asking for help from other people with credit is also allowed.
									</li>
								</ul>
								For more details ask in the comments area at the bottom of the screen.
							</ul>
						</div>
					</article>
				</main>
			</section>
			<section class="background bcd4 align-center">
				<header>
					<h2 class="section-title">When</h2>
				</header>
				<main class="layer">
					<article class="layer-container ">
						<div class="col container">
							<p>The contests submission date is on the 2nd of MAY 2016 (if there are any changes to the submission date I will post it in the comment field down below).</p>
						</div>
					</article>
				</main>
			</section>
			<section class="background bcd5 align-center">
				<header>
					<h2 class="section-title">Help</h2>
				</header>
				<main class="layer">
					<article class="layer-container ">
						<div class="col container">
							<p>For more help ask in the questions area at the bottom of the screen.</p>
						</div>
					</article>
				</main>
			</section>

			<section class="background bcd6 align-center">
				<header>
					<h2 class="section-title">Signed up</h2>
				</header>
				<main class="layer">
					<article class="layer-container ">
						<div class="col container">
							<ul class="list"></ul>
							<h3 class="num-people"></h3>
							<form class="account">
								<fieldset data-tooltip="put your profile name in the input box above" data-direct="bottom">
									<input class="input" class="input" type="text" name="name" id="name" required/>
									<label for="name">Name</label>
								</fieldset>
								<fieldset data-tooltip="put the amount of energy points in the input box above" data-direct="bottom">
									<input class="input" type="text" name="points" id="points" required/>
									<label for="points">Points</label>
								</fieldset>
								<fieldset data-tooltip="put your profile image url in the input box above" data-direct="bottom">
									<input class="input" type="text" name="img" id="img" required/>
									<label for="img">Image</label>
								</fieldset>
								<fieldset data-tooltip="put your profile url in the input box above" data-direct="bottom">
									<input class="input" type="text" name="Url" id="Url" required/>
									<label for="Url">Url</label>
								</fieldset>
								<fieldset data-tooltip="put the date you joinded khan acedemy in the input box above" data-direct="bottom">
									<input class="input" type="text" name="date" id="date" required/>
									<label for="date">Date</label>
								</fieldset>
								<fieldset data-tooltip="put a description about yourself  in the input box above" data-direct="bottom">
									<textarea name="description" id="description" required></textarea>
									<label for="description">Description</label>
								</fieldset>
								<fieldset data-tooltip="click to submit profile information then copy the profile code and post your profile in the comment section bellow for it to be included" data-direct="bottom">
									<button class="submit">Submit</button>
								</fieldset>
							</form>

							<div class="code-list"> </div>
						</div>
					</article>
				</main>
			</section>

		</div>
	</main>

	<section class="bcd7">
		<section class="container">
			<section class="row footer-1">
				<section class="col col-3">
					<div class="headline">
						<h2>What</h2>
					</div>
					<p>The contest Pixalized is about making an image, a game, an animation or a website using shapes.</p>
				</section>
				<section class="col col-3">
					<div class="headline">
						<h2>When</h2>
					</div>
					<p>The contests submission date is on the 2nd of MAY 2016 (if there are any changes to the submission date I will post it in the comment field down below).</p>
				</section>
				<section class="col col-3">
					<div class="posts">
						<div class="headline">
							<h2>How</h2>
						</div>
						<ul class="list-unstyled latest-list">
							<ul class="list-pad">
								<p class="explain">When creating an image, a game, an animation or a website you must make it:</p>
								<hr />
								<ul>
									<li>
										<i class="title">Pixalized</i> with shapes.
									</li>
									<li>
										Have ([Pix]) in the title.
									</li>
									<li>
										Completly original.
									</li>
									<li>
										Partners and teams are allowed.
									</li>
									<li>
										Asking for help from other people with credit is also allowed.
									</li>
								</ul>
							</ul>
						</ul>
					</div>
				</section>
				<section class="col col-3">
					<div class="headline">
						<h2>Help</h2>
					</div>
					<ul class="list-unstyled link-list list-pad">
						<li>
							<a>Contact me.</a>
							<i class="fa fa-angle-right"></i>
						</li>
						<li>
							<a>Ask other participants.</a>
							<i class="fa fa-angle-right"></i>
						</li>
						<li>
							<a>Teams and Partners split-up the various jobs.</a>
							<i class="fa fa-angle-right"></i>
						</li>
						<li>
							<a>Sql is a language that can be used for <em>Pixalization</em>.</a>
							<i class="fa fa-angle-right"></i>
						</li>
						<li>
							<a>Never give up.</a>
							<i class="fa fa-angle-right"></i></li>
					</ul>
				</section>

			</section>
		</section>
	</section>

	<footer class="navbar-layout__header">
		<nav class="navbar-layout__header-row">
			<!-- Title -->
			<header class="navbar-navigation-header">
				<p class="copyrights">
					2016 Whitelighting © All Rights Reserved.
				</p>
			</header>
			<section class="navbar-layout-spacer"></section>

			<!-- Navigation. We hide it in small screens. -->
			<main class="navbar-navigation-main">
				<ul class="navbar-navigation">
					<li class="navbar-navigation_link">
						<a href="#">Link</a>
					</li>
					<li class="navbar-navigation_link">
						<a href="#">Link</a>
					</li>
					<li class="navbar-navigation_link">
						<a href="#">Link</a>
					</li>
					<li class="navbar-navigation_link">
						<a href="#">Link</a>
					</li>
				</ul>
			</main>
		</nav>
	</footer>
</body>

</html>

## script.js
$(document).ready(function() {
	$(".noscript").hide();
	(function($) {
		$.fn.ripple = function(options) {
			var parent, ink, s, x, y,
				extra = $.extend({
					time: '0.65s',
					size: "2.5",
					color: "rgba(0, 0, 0, .2)",
					top: 0,
					left: 0,
				}, options);
			$("style").append(".ink {\
			background: " + extra.color + ";\
			border-radius: 100%;\
			position: absolute;\
			transform: scale(0);\
			display: block;\
		}\
		.ink.animate {\
			animation: ripple " + extra.time + " linear;\
		}\
		@keyframes ripple {\
			100% {\
				opacity: 0;\
				transform: scale(" + extra.size + ");\
			}\
		}");
			return this.each(function() {
				return $(this).click(function(e) {
					parent = $(this).parent();

					window.setTimeout(function() {
						parent.css({
							'overflow': 'visible',
						});
						parent.css({
							'overflow': 'hidden',
						});
					}, 3000);
					if (parent.find(".ink").length === 0) {
						parent.prepend("<span class='ink'></span>");
					}
					ink = parent.find(".ink");
					ink.removeClass("animate");

					if (!ink.height() && !ink.width()) {
						s = Math.max(parent.outerWidth(), parent.outerHeight());
						ink.css({
							height: s,
							width: s
						});
					}

					x = e.pageX - parent.offset().left - ink.width() / 2;
					y = e.pageY - parent.offset().top - ink.height() / 2;

					extra.top = y;
					extra.left = x;

					ink.css({
						top: extra.top + 'px',
						left: extra.left + 'px'
					}).addClass("animate");
				});
			});
		}
	}(jQuery));

	$(".navbar-layout__drawer-button").click(function(e) {
		e.preventDefault();
		$(".sidebar_drawer").toggleClass("show");
		$(".sidebar-darken").toggleClass("showing");

	});

	$(".sidenav-close, .sidebar-darken").click(function() {
		$(".sidebar_drawer").removeClass("show");
		$(".sidebar-darken").removeClass("showing");
	});

	$("li.sidenav_link a").click(function() {
		$(".sidebar_drawer").removeClass("show");
		$(".sidebar-darken").removeClass("showing");
	});

	var Data = [{
			name: "Whitelight",
			points: "648,814",
			date_joined: "2013",
			description: "hi",
			img: "https://www.khanacademy.org/images/homepage/background-learner.jpg",
			url: "https://www.khanacademy.org/profile/whitelightingG/",
		}, {
			name: "Whitelight",
			points: "648,814",
			date_joined: "2013",
			description: "hi",
			img: "https://www.khanacademy.org/images/homepage/background-learner.jpg",
			url: "https://www.khanacademy.org/profile/whitelightingG/",
		}, ],
		year = new Date().getFullYear();
	$("form").submit(function(e) {
		e.preventDefault();

		$("<li class='col-4'>")
			.html("<a href='" + $('#Url').val() + "' target='_Blank'>\
            <figure class='thumbnail'>\
              <img src='" + $('#img').val() + "'>\
              <figcaption class='caption'>\
					 <h4>" + $('#name').val() + "</h4>\
                <p>" + $('#description').val() + "</p>\
               <section class='bottom clearfix'>\
						<section class='left'> Points: " + $('#points').val() + " </section>\
						<section class='right'>Date joined: " + $('#date').val() + "</section>\
					</section>\
              </figcaption>\
            </figure>\
          </a>").appendTo(".list");

		$("<figure class='inline'>")
			.html("<pre>\
            <code class='inline'>\
  {<br>\
      name: " + $("#name").val() + ",<br>\
      points: " + $("#points").val() + ",<br>\
      date_joined: " + $("#date").val() + ",<br>\
      description: " + $("#description").val() + ",<br>\
      img: " + $("#img").val() + ",<br>\
      url: " + $("#Url").val() + ",<br>\
   },\
            </code>\
          </pre>")
			.appendTo(".code-list");
	});
	for (var i = 0; i < Data.length; i++) {
		$("<li class='col-4 list_li clearfix'>")
			.html("<a href='" + Data[i].url + "' target='_Blank'>\
            <figure class='thumbnail'>\
              <img src='" + Data[i].img + "'>\
              <figcaption class='caption'>\
					 <h4>" + Data[i].name + "</h4>\
                <p>" + Data[i].description + "</p>\
               <section class='bottom clearfix'>\
						<section class='left'> Points: " + Data[i].points + " </section>\
						<section class='right'>Date joined: " + Data[i].date_joined + "</section>\
					</section>\
              </figcaption>\
            </figure>\
          </a>")
			.appendTo(".list");
	}

	if (Data.length === 0) {
		$("h3.num-people").append("NO ONE HAS CURRENTLY SIGNED UP, AND IN OTHER TO SIGN UP ASK SO IN THE COMMENT AREA BY SAYING  I'M IN  IN CAPITAL LETTERS.");
	} else if (Data.length === 1) {
		$("h3.num-people").append("1 Person Has CURRENTLY SIGNED UP.");
	} else {
		$("h3.num-people").append(Data.length + " People Have CURRENTLY SIGNED UP why don't you.");
	}

	$("a").ripple();

	$(function() {
		var Option = ["Alabama ", "Alaska ", "Arizona ", "Arkansas ", "California ", "Colorado ", "Connecticut ", "Delaware ", "Florida ", "Georgia ", "Hawaii ", "Idaho ", "Illinois ", "Indiana ", "Iowa ", "Kansas ", "Kentucky ", "Louisiana ", "Maine ", "Maryland ", "Massachusetts ", "Michigan ", "Minnesota ", "Mississippi ", "Missouri ", "Montana ", "Nebraska ", "Nevada ", "New Hampshire ", "New Jersey ", "New Mexico ", "New York ", "North Carolina ", "North Dakota ", "Ohio ", "Oklahoma ", "Oregon ", "Pennsylvania ", "Rhode Island ", "South Carolina ", "South Dakota ", "Tennessee ", "Texas ", "Utah ", "Vermont ", "Virginia ", "Washington ", "West Virginia ", "Wisconsin ", "Wyoming", "404 Error", "Address Bar", "Ajax", "Apache", "Autoresponder", "BitTorrent", "Blog", "Bookmark", "Bot", "Broadband", "Captcha", "Certificate", "Client", "Cloud", "Cloud Computing", "CMS", "Cookie", "CSS", "Cyberspace", "Denial of Service", "DHCP", "Dial-up", "DNS Record", "Domain Name", "Download", "E-mail", "Facebook", "FiOS", "Firewall", "FTP", "Gateway", "Google", "Google Drive", "Gopher", "Hashtag", "Hit", "Home Page", "HTML", "HTTP", "HTTPS", "Hyperlink", "Hypertext", "ICANN", "Inbox", "Internet", "InterNIC", "IP", "IP Address", "IPv4", "IPv6", "IRC", "iSCSI", "ISDN", "ISP", "JavaScript", "jQuery", "Meta Search Engine", "Meta Tag", "Minisite", "Mirror", "Name Server", "Packet", "Page View", "Payload", "Phishing", "POP3", "Protocol", "Scraping", "Search Engine", "Social Networking", "Socket", "Spam", "Spider", "Spoofing", "SSH", "SSL", "Static Website", "Twitter", "XHTML", "Anna", "Brittany", "Cinderella", "Diana", "Eva", "Fiona", "Gunda", "Hege", "Inga", "Johanna", "Kitty", "Linda", "Nina", "Ophelia", "Petunia", "Amanda", "Raquel", "Cindy", "Doris", "Eve", "Evita", "Sunniva", "Tove", "Unni", "Violet", "Liza", "Elizabeth", "Ellen", "Wenche", "Vicky", "1x", "2x", "3x", "4x", "5x", "6x", "7x", "8x", "9x", "10x", "11x", "12x", "13x", "14x", "15x", "16x", "16x", "18x", "17x", "18x", "19x", "120x", "130x", "140x", "150x", "160x", "170x", "180x", "190x", "200x", "210x"],
			itemInList = 'li',
			search = function(term) {
				$('ul#sea').find(itemInList).each(function() {
					if ($(this).html().toLowerCase().substr($(this).html().toLowerCase().search(term.toLowerCase()), term.length) != term.toLowerCase()) {
						$(this).hide();
					} else {
						$(this).show();
					}
				});
			},
			searchS = function(term) {
				$('ul#searchResults').find(itemInList).each(function() {
					if ($(this).html().toLowerCase().substr($(this).html().toLowerCase().search(term.toLowerCase()), term.length) != term.toLowerCase()) {
						$(this).hide();
					} else {
						$(this).show();
					}
				});
			};

		for (var i = 0; i < Option.length; i++) {
			$("<" + itemInList + ">").html(Option[i].capitalize()).appendTo("ul#searchResults");
		}

		for (var i = 0; i < Option.length; i++) {
			$("<" + itemInList + ">").html(Option[i].capitalize()).appendTo("#sea");
		}

		$('ul#sea li').click(function() {
			$('#searchingS').val($(this).html()).trigger('keyup');
		});

		$('ul#searchResults li').click(function() {
			$('#searching').val($(this).html()).trigger('keyup');
		});

		$('#searchingS').keyup(function(e) {
			if ($(this).val().length === 0) {
				$('ul#sea').addClass("hidden", 100);
			} else {
				$('ul#sea').removeClass("hidden", 100);
			}
			searchS($(this).val());
		});

		$('#searching').keyup(function(e) {
			if ($(this).val().length === 0) {
				$('ul#searchResults').addClass("hidden", 100);
			} else {
				$('ul#searchResults').removeClass("hidden", 100);
			}
			search($(this).val());
		});

	});
});

## scripts
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ember.js/1.10.0/ember.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react.min.js"></script>

## style.css
*,
*:before,
*:after {
	transition: all 0.5s ease-in-out;
	box-sizing: border-box;
	outline: none;
	resize: none;
	border: none;
	padding: 0;
	margin: 0;
}

html,
body {
	font-family: 'Helvetica', 'Arial', sans-serif;
	transition: all 0.5s ease;
	font-weight: 400;
	font-size: 14px;
}

li {
	list-style: none;
}

img {
	vertical-align: middle;
	height: 200px;
	width: 100%;
}

pre {
	font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
	word-break: break-all;
	word-wrap: break-word;
	margin: 1em 0px 1em;
	white-space: nowrap;
	font-weight: 100;
	font-size: 13px;
	display: block;
	overflow: auto;
	padding: 0;
	margin: 0;
}

pre code {
	white-space: pre-wrap;
}

textarea,
code,
kbd,
pre {
	font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
	font-size: .8em;
}

a {
	text-decoration: none;
	cursor: pointer;
	color: #999;
}

em {
	font-size: 1.25em;
	font-weight: 900;
}

.layout--fixed-header {
	position: fixed;
	width: 100%;
	top: 0;
}

.navbar-layout__header {
	box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12), 0 -2px 2px 0 rgba(0, 0, 0, .14), 0 -3px 1px -2px rgba(0, 0, 0, .2), 0 -1px 5px 0 rgba(0, 0, 0, .12);
	border: 1px solid transparent;
	border-bottom-color: #333;
	border-top-color: #333;
	max-height: 1000px;
	background: #222;
	min-height: 64px;
	z-index: 100;
	color: gray;
}

.navbar-layout__drawer-button {
	display: inline-block;
	position: absolute;
	text-align: center;
	line-height: 50px;
	margin: 8px 12px;
	overflow: hidden;
	font-weight: 100;
	font-size: 20px;
	cursor: pointer;
	height: 48px;
	width: 48px;
	color: gray;
	z-index: 5;
	left: 0;
	top: 0;
}

.navbar-layout__header-row {
	padding: 0 40px 0 80px;
	align-self: stretch;
	align-items: center;
	display: flex;
	height: 64px;
}

.navbar-navigation-main {
	overflow-x: hidden;
}

.navbar-navigation-title {
	position: relative;
	font-weight: 400;
	font-size: 20px;
	line-height: 1;
}

.navbar-navigation-title,
.sidenav-title {
	font-weight: 400;
	font-size: 20px;
}

.navbar-navigation-title:first-letter,
.sidenav-title:first-letter {
	font-size: 30px;
	color: red;
}

.navbar-navigation-title:first-letter,
.sidenav-title:first-letter,
i.title {
	text-shadow: .04em .04em 0 lightgray, -1px -1px 0 lightgray, 1px -1px 0 lightgray, -1px 1px 0 lightgray, 1px 1px 0 lightgray, .04em .04em 0 lightgray, -1px -1px 0 lightgray, 1px -1px 0 lightgray, -1px 1px 0 lightgray, 1px 1px 0 lightgray, 2px 2px 0 lightgray, 3px 3px 0 lightgray, 4px 4px 0 lightgray, 5px 5px 0 lightgray, 6px 6px 0 lightgray;
	font-family: "Press Start 2P", "Helvetica Neue", sans-serif;
	margin: 0 6px;
}

.navbar-navigation-title span,
.sidenav-title span {
	font-family: 'Covered By Your Grace', 'Rock Salt', 'Trade Winds', cursive, "Helvetica Neue", sans-serif;
	display: inline-block;
	font-size: 35px;
	color: #ff7f7f;
}

.navbar-layout-spacer {
	padding: 0 20px;
	flex-grow: 1;
}

.nav-form {
	position: relative;
	float: left;
	width: 100%;
}

.navbar-search {
	border-bottom: 1px solid #343434;
	color: rgba(255, 255, 255, .5);
	transition: all .2s ease;
	padding: .5em 1.5em;
	background: #1e1e1e;
	font-size: 16px;
	margin: 20px 0;
	outline: none;
	resize: none;
	height: 3em;
	width: 100%;
}

.navbar-search:hover,
.navbar-search:active,
.navbar-search:focus,
#side-search:hover,
#side-search:active,
#side-search:focus {
	border-bottom: 1px solid #ccc;
	background: #1b1b1b;
}

.navbar-search input {
	background: transparent;
	display: inline-block;
	position: relative;
	font-size: 16px;
	height: 100%;
	color: gray;
	width: 90%;
}

@media(max-width: 550px) {
	.navbar-search input {
		width: 85%;
	}
}

@media(max-width: 450px) {
	.navbar-search input.in {
		display: none;
		width: 0;
	}
}

#searchResults,
#sea {
	border-bottom: 1px solid rgba(0, 0, 0, .2);
	border-right: 1px solid rgba(0, 0, 0, .2);
	border-left: 1px solid rgba(0, 0, 0, .2);
	margin: -10px auto 0;
	background: #292929;
	padding: 5px 10px 0;
	position: absolute;
	max-height: 15em;
	overflow: auto;
	color: #777;
	width: 100%;
}

#sea {
	box-shadow: inset 0 10px 55px rgba(0, 0, 0, .5);
	margin: -18px auto 0;
	position: relative;
}

#searchResults li,
#sea li {
	border-bottom: 1px solid rgba(255, 255, 255, .2);
	padding: 0.5em 0;
	cursor: pointer;
}

#searchResults li:hover,
#sea li:hover {
	color: rgba(255, 255, 255, .5);
	font-weight: 900;
	font-size: 1.2em;
}

.hidden {
	display: none;
}

.navbar-navigation {
	display: flex;
	height: 65px;
}

li.navbar-navigation_link {
	list-style: none;
	display: block;
}

li.navbar-navigation_link a {
	text-decoration: none;
	line-height: 64px;
	font-weight: 500;
	padding: 0 24px;
	font-size: 13px;
	color: gray;
}

@media screen and (max-width: 850px) {
	.navbar-layout--fixed-header>.navbar-layout__header {
		display: flex;
	}
	.navbar-navigation-main {
		display: none;
	}
	.navbar-layout__header {
		min-height: 56px;
	}
}

.sidebar_drawer {
	box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12);
	border-right: 1px solid rgba(0, 0, 0, .12);
	transition: all 0.5s ease;
	overflow-x: hidden;
	padding-top: 20px;
	background: #222;
	overflow-y: auto;
	position: fixed;
	color: #424242;
	width: 250px;
	height: 100%;
	left: -250px;
	z-index: 205;
	top: 0;
}

.sidebar_drawer.show {
	left: 0;
}

.sidenav-navigation {
	padding: 10px 0 20px 0;
}

.sidenav-title {
	display: inline-block;
	position: relative;
	padding: 0px 30px;
}

.sidenav-close {
	font-weight: 400;
	padding: 0 30px;
	font-size: 20px;
	color: #424242;
	float: right;
}

.sidenav-close:hover,
.navbar-layout__drawer-button:hover {
	color: #7a7a7a;
}

li.sidenav_link {
	position: relative;
	font-weight: 500;
	font-size: 14px;
}

li.sidenav_link a {
	text-decoration: none;
	position: relative;
	padding: 16px 30px;
	color: #757575;
	display: block;
}

li.sidenav_link a:hover {
	border-left: 3px solid gray;
}

.sidebar-darken.showing {
	background: rgba(0, 0, 0, .5);
	transition: all 0.5s ease;
	position: fixed;
	z-index: 150;
	height: 100%;
	width: 100%;
	left: 0;
	top: 0;
}

.background {
	color: white;
}

.align-center {
	text-align: center;
	margin: 0 auto;
}

.bcd0 {
	padding: 100px 0 0;
	background: #1c1c1c;
}

.bcd0 header {
	justify-content: center;
	flex-direction: column;
	padding-bottom: 10px;
	align-items: center;
	display: flex;
}

.bcd0 header p {
	font-family: 'Lato', 'Open Sans', sans-serif;
	transform: scale(1.2);
	font-weight: 200;
	padding: 1em 0;
	font-size: 15px;
}

.bcd0 header p:hover,
.bcd0 header p:focus {
	transform: scale(1.6);
}

.bcd0 header .fa {
	animation: bounce 1.75s infinite;
	margin: 2rem 0 5px;
	font-size: 30px;
	font-size: 4rem;
	color: white;
}

.bcd0 header .section-title:hover,
.bcd0 header p:hover,
.bcd0 header .fa:hover {
	color: gray;
}

@keyframes bounce {
	0% {
		-webkit-transform: translateY(0);
		transform: translateY(0);
	}
	10% {
		-webkit-transform: translateY(-50%);
		transform: translateY(-50%);
	}
	20% {
		-webkit-transform: translateY(0);
		transform: translateY(0);
	}
	30% {
		-webkit-transform: translateY(-25%);
		transform: translateY(-25%);
	}
	40% {
		-webkit-transform: translateY(0);
		transform: translateY(0);
	}
	50% {
		-webkit-transform: translateY(-10%);
		transform: translateY(-10%);
	}
	60% {
		-webkit-transform: translateY(0);
		transform: translateY(0);
	}
	70% {
		-webkit-transform: translateY(0);
		transform: translateY(0);
	}
	80% {
		-webkit-transform: translateY(0);
		transform: translateY(0);
	}
	100% {
		-webkit-transform: translateY(0);
		transform: translateY(0);
	}
}

.bcd1 {
	background-position: 10px 2px, 4px 35px, 29px 31px;
	background-image: linear-gradient(335deg, #090d06 23px, transparent 23px), linear-gradient(155deg, #1c1c1c 23px, transparent 23px), linear-gradient(335deg, #252525 23px, transparent 23px), linear-gradient(155deg, #090d06 23px, transparent 23px);
	background-attachment: fixed;
	background-size: 58px 98px;
	background-color: #1c1c1c;
	padding: 50px 0 0;
}

.bcd2 {
	background: radial-gradient(circle farthest-side at 0% 50%, #090d06 23.5%, rgba(240, 166, 17, 0) 0)21px 30px, radial-gradient(circle farthest-side at 0% 50%, #1c1c1c 24%, rgba(240, 166, 17, 0) 0)19px 30px, linear-gradient(#090d06 14%, rgba(240, 166, 17, 0) 0, rgba(240, 166, 17, 0) 85%, #090d06 0)0 0, linear-gradient(150deg, #090d06 24%, #1c1c1c 0, #1c1c1c 26%, rgba(240, 166, 17, 0) 0, rgba(240, 166, 17, 0) 74%, #1c1c1c 0, #1c1c1c 76%, #090d06 0)0 0, linear-gradient(30deg, #090d06 24%, #1c1c1c 0, #1c1c1c 26%, rgba(240, 166, 17, 0) 0, rgba(240, 166, 17, 0) 74%, #1c1c1c 0, #1c1c1c 76%, #090d06 0)0 0, linear-gradient(90deg, #1c1c1c 2%, #090d06 0, #090d06 98%, #1c1c1c 0%)0 0 #090d06;
	background-attachment: fixed;
	background-size: 40px 60px;
	background-color: #001;
	padding: 50px 0 0;
}

.bcd3 {
	background-image: radial-gradient(lightgray 15%, transparent 16%), radial-gradient(#363636 15%, transparent 16%);
	background-position: 0 0, 30px 30px;
	background-attachment: fixed;
	background-size: 60px 60px;
	background-color: #0f0f0f;
	padding: 50px 0 0;
}

.bcd4 {
	background: radial-gradient(circle at 100% 50%, transparent 20%, rgba(255, 255, 255, .3) 21%, rgba(255, 255, 255, .3) 34%, transparent 35%, transparent), radial-gradient(circle at 0% 50%, transparent 20%, rgba(255, 255, 255, .3) 21%, rgba(255, 255, 255, .3) 34%, transparent 35%, transparent) 0 -50px;
	background-attachment: fixed;
	background-size: 75px 100px;
	background-color: #1c1c1c;
	padding: 50px 0 0;
}

.bcd5 {
	background: radial-gradient(circle at 50% 59%, #565656 3%, #1c1c1c 4%, #1c1c1c 11%, rgba(54, 78, 39, 0) 12%, rgba(54, 78, 39, 0)) 50px 0, radial-gradient(circle at 50% 41%, #1c1c1c 3%, lightgray 4%, lightgray 11%, rgba(210, 202, 171, 0) 12%, rgba(210, 202, 171, 0)) 50px 0, radial-gradient(circle at 50% 59%, lightgray 3%, #1c1c1c 4%, #1c1c1c 11%, rgba(54, 78, 39, 0) 12%, rgba(54, 78, 39, 0)) 0 50px, radial-gradient(circle at 50% 41%, #1c1c1c 3%, lightgray 4%, lightgray 11%, rgba(210, 202, 171, 0) 12%, rgba(210, 202, 171, 0)) 0 50px, radial-gradient(circle at 100% 50%, lightgray 16%, rgba(210, 202, 171, 0) 17%), radial-gradient(circle at 0% 50%, #1c1c1c 16%, rgba(54, 78, 39, 0) 17%), radial-gradient(circle at 100% 50%, lightgray 16%, rgba(210, 202, 171, 0) 17%) 50px 50px, radial-gradient(circle at 0% 50%, #1c1c1c 16%, rgba(54, 78, 39, 0) 17%) 50px 50px;
	background-attachment: fixed;
	background-size: 100px 100px;
	background-color: #1c1c1c;
	padding: 50px 0 0;
}

.bcd6 {
	background: linear-gradient(135deg, #292929 22px, lightgray 22px, lightgray 24px, transparent 24px, transparent 67px, lightgray 67px, lightgray 69px, transparent 69px), linear-gradient(225deg, #292929 22px, lightgray 22px, lightgray 24px, transparent 24px, transparent 67px, lightgray 67px, lightgray 69px, transparent 69px)0 64px;
	background-attachment: fixed;
	background-size: 64px 128px;
	background-color: #292929;
	padding: 50px 0 0;
}

.bcd7 {
	background: #1c1c1c;
	padding: 10px;
}

.section-title {
	font-family: 'Lato', 'Open Sans', sans-serif;
	text-transform: uppercase;
	padding: 0px 0 60px;
	line-height: 100%;
	font-weight: 200;
	font-size: 5vw;
}

.section-title i,
i.title {
	text-shadow: .04em .04em 0 lightgray, -1px -1px 0 lightgray, 1px -1px 0 lightgray, -1px 1px 0 lightgray, 1px 1px 0 lightgray, 2px 2px 0 lightgray, 3px 3px 0 lightgray, 4px 4px 0 lightgray, 6px 6px 0 lightgray, 8px 8px 0 lightgray;
	font-family: "Press Start 2P", "Helvetica Neue", sans-serif;
	display: inline-block;
	color: #262626;
}

i.title {
	margin-right: 10px;
}

.bcd1 .section-title,
.bcd2 .section-title,
.bcd3 .section-title,
.bcd4 .section-title,
.bcd5 .section-title,
.bcd6 .section-title {
	padding: 20px 0 60px;
	font-size: 25px;
}

.bcd1 .section-title:after,
.bcd2 .section-title:after,
.bcd3 .section-title:after,
.bcd4 .section-title:after,
.bcd5 .section-title:after,
.bcd6 .section-title:after {
	margin-left: -45px;
	position: absolute;
	background: #fff;
	margin-top: 35px;
	content: " ";
	height: 2px;
	width: 20px;
}

@media(min-width: 250px) {
	.section-title {
		font-size: 26px;
	}
}

@media(min-width: 700px) {
	img {
		height: 300px;
	}
	.bcd0 {
		background: #1c1c1c;
		padding: 200px 0 0px;
	}
	.section-title {
		font-family: 'Lato', 'Open Sans', sans-serif;
		text-transform: uppercase;
		font-weight: 200;
		font-size: 32px;
	}
	.section-title {
		font-size: 50px;
	}
	.section-title:after {
		margin-left: -145px;
		position: absolute;
		background: #fff;
		margin-top: 60px;
		content: " ";
		height: 2px;
		width: 70px;
	}
	.bcd1 .section-title,
	.bcd2 .section-title,
	.bcd3 .section-title,
	.bcd4 .section-title,
	.bcd5 .section-title,
	.bcd6 .section-title {
		padding: 60px 0 100px;
		font-size: 25px;
	}
	.bcd1 .section-title,
	.bcd2 .section-title,
	.bcd3 .section-title,
	.bcd4 .section-title,
	.bcd5 .section-title,
	.bcd6 .section-title {
		padding: 60px 0 100px;
		font-size: 40px;
	}
	.bcd1 .section-title:after,
	.bcd2 .section-title:after,
	.bcd3 .section-title:after,
	.bcd4 .section-title:after,
	.bcd5 .section-title:after,
	.bcd6 .section-title:after {
		margin-left: -70px;
		position: absolute;
		background: #fff;
		margin-top: 45px;
		content: " ";
		height: 2px;
		width: 50px;
	}
}

@media(min-width: 800px) {
	.bcd0 {
		background: #1c1c1c;
		padding: 200px 0 0;
	}
	.section-title {
		font-size: 70px;
	}
	.section-title:after {
		margin-left: -215px;
		position: absolute;
		background: #fff;
		margin-top: 80px;
		content: " ";
		height: 2px;
		width: 125px;
	}
	.bcd1 .section-title,
	.bcd2 .section-title,
	.bcd3 .section-title,
	.bcd4 .section-title,
	.bcd5 .section-title,
	.bcd6 .section-title {
		padding: 60px 0 100px;
		font-size: 60px;
	}
	.bcd1 .section-title:after,
	.bcd2 .section-title:after,
	.bcd3 .section-title:after,
	.bcd4 .section-title:after,
	.bcd5 .section-title:after,
	.bcd6 .section-title:after {
		margin-left: -120px;
		position: absolute;
		background: #fff;
		margin-top: 65px;
		content: " ";
		height: 2px;
		width: 70px;
	}
}

.layer {
	box-shadow: 0 0px 2px 0 rgba(0, 0, 0, .14), 0 2px 1px 2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12), 0 0px 2px 0 rgba(0, 0, 0, .14), 0 -2px 1px 2px rgba(0, 0, 0, .2), 0 -1px 5px 0 rgba(0, 0, 0, .12);
	font-family: "Open Sans", Arial, sans-serif;
	border: 1px solid transparent;
	border-bottom-color: #333;
	border-top-color: #333;
	position: relative;
	font-weight: 200;
	font-size: 18px;
	color: #ccc;
	z-index: 25;
}

.layer h2 {
	font-family: "Open Sans", Arial, sans-serif;
	font-weight: 300;
	font-size: 13px;
}

.layer-container {
	background: #252525;
	display: block;
	padding: 10px;
	width: 100%;
}

li.list_li {
	list-style: decimal;
}

.bcd1 .layer-container,
.bcd2 .layer-container,
.bcd3 .layer-container,
.bcd4 .layer-container,
.bcd5 .layer-container {
	padding: 10px auto;
}

.bcd3 .col ul {
	padding: 10px 20px;
	text-align: left;
}

.bcd3 .col ul li {
	list-style-type: square;
	word-wrap: break-word;
	line-height: 20px;
	margin: 2px 20px;
	padding: 5px;
}

@media(min-width: 800px) {
	.bcd3 .col ul.listing {
		padding-left: 15%;
	}
}

.container {
	margin: 10px auto;
	color: #999;
}

.col-4 {
	transition: all .5s ease;
	position: relative;
}

@media (min-width: 900px) {
	li.list_li {
		list-style: decimal;
		list-style-type: square;
	}
	.col-4 {
		list-style-type: square;
		word-wrap: break-word;
		display: inline-block;
		list-style: decimal;
		width: 50%;
	}
}

@media(min-width: 400px) {
	.left {
		display: inline-block;
		word-wrap: break-word;
		margin-top: 10px;
		text-align: left;
		float: left;
		width: 48%;
	}
	.right {
		display: inline-block;
		word-wrap: break-word;
		text-align: right;
		margin-top: 10px;
		float: right;
		width: 48%;
	}
	.clearfix:after,
	.clearfix:before,
	.container-fluid:after,
	.container-fluid:before,
	.container:after,
	.container:before,
	.row:after,
	.row:before {
		display: table;
		content: " ";
		clear: both;
	}
}

.thumbnail {
	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
	border: 1px solid #262626;
	transition: all .5s ease;
	line-height: 1.42857143;
	background: #181818;
	border-radius: 8px;
	display: inline-block;
	margin: 10px;
	color: #666;
}

.thumbnail:hover {
	box-shadow: 0 5px 60px 0 rgba(0, 0, 0, 0.8);
	background: #1d1d1d;
	color: #666;
}

.thumbnail img {
	border-radius: 4px 4px 0 0;
	margin-right: auto;
	margin-left: auto;
	max-width: 100%;
}

.thumbnail .caption {
	text-align: left;
	padding: 15px;
	color: #333;
}

.thumbnail h4 {
	color: rgba(255, 255, 255, .4);
	word-wrap: break-word;
	text-align: left;
	font-size: 30px;
	padding: 5px;
}

.caption section {
	word-wrap: break-word;
	font-size: 13px;
	padding: 5px 0;
}

.thumbnail h4:hover {
	color: rgba(255, 255, 255, .8);
	cursor: pointer;
}

form {
	max-width: 600px;
	margin: 0 auto;
}

h3.num-people,
legend {
	text-transform: uppercase;
	margin: 10px 0;
}

legend {
	border-bottom: 1px dotted #555;
	margin: 10px 0 25px 0;
	text-align: left;
	width: 100%;
}

legend .sign-up {
	font-weight: 200;
	font-size: 2em;
}

label {
	transform-origin: left center;
	transition: all .2s ease;
	position: absolute;
	margin-top: -55px;
	font-weight: 100;
	font-size: 18px;
	display: block;
}

label[for=description] {
	margin-top: -175px;
}

.input[type="text"],
textarea {
	color: rgba(255, 255, 255, .5);
	border-bottom: 1px solid #ccc;
	transition: all .2s ease;
	background: transparent;
	padding: .5em 1.34em;
	font-size: 16px;
	margin: 20px 0;
	outline: none;
	resize: none;
	height: 3em;
	width: 100%;
}

textarea {
	padding: .8em 1.34em;
	height: 10em;
}

.input[type="text"]:focus,
textarea:focus {
	border-bottom: 1px solid #ccc;
	transition: all .2s ease;
	background: #1b1b1b;
}

.input[type="text"]:focus ~ label {
	transition: all .2s ease;
	margin-top: -95px;
	font-size: 15px;
}

textarea:focus ~ label {
	transition: all .2s ease;
	margin-top: -210px;
	font-size: 15px;
}

.input[type="text"]:valid,
textarea:valid {
	border-bottom: 1px solid #343434;
	background: #1e1e1e;
}

.input[type="text"]:valid ~ label {
	text-transform: uppercase;
	transition: all .2s ease;
	font-style: italic;
	margin-top: -95px;
}

textarea:valid ~ label {
	text-transform: uppercase;
	transition: all .2s ease;
	font-style: italic;
	margin-top: -210px;
}

button {
	background-image: linear-gradient(135deg, transparent, transparent 25%, rgba(0, 0, 0, 0.1) 25%, rgba(0, 0, 0, 0.1) 50%, transparent 50%, transparent 75%, rgba(0, 0, 0, 0.1) 75%, rgba(0, 0, 0, 0.1));
	animation: alert 01s infinite linear;
	color: rgba(255, 255, 255, .5);
	background-size: 20px 20px;
	background-color: #242424;
	transition: all .5s ease;
	border: 1px solid gray;
	letter-spacing: 1px;
	text-align: center;
	border-radius: 5em;
	padding: 10px 20px;
	font-weight: 100;
	cursor: pointer;
	font-size: 14px;
	outline: none;
}

@keyframes alert {
	from {
		background-position: 20px 20px;
	}
}

button:hover {
	background-position: 1000px;
	background-color: #464646;
}

figure.inline {
	color: rgba(255, 255, 255, .5);
	border: 1px solid #262626;
	margin: 10px auto 30px;
	background: #0f0f0f;
	border-radius: 5px;
	position: relative;
	font-weight: 100;
	line-height: 1.4;
	text-align: left;
	max-width: 600px;
	font-size: 20px;
	padding: 20px;
	width: 100%;
}

[data-tooltip] {
	font-family: "Helvetica Neue", Helvetica, Arial, 'Varela Round', sans-serif;
	position: relative;
	cursor: pointer;
}

[data-direct="bottom"]:hover::after {
	background: rgba(0, 0, 0, 0.45);
	content: attr(data-tooltip);
	animation: fade .5s ease;
	transition: opacity .5s;
	text-decoration: none;
	text-transform: none;
	line-height: 1.2em;
	position: absolute;
	margin-left: -50px;
	text-align: center;
	max-width: 200px;
	font-weight: 100;
	font-size: 14px;
	padding: 10px;
	z-index: 800;
	width: 100%;
	color: white;
	opacity: 1;
	top: 100%;
	left: 45%;
}

[data-direct="bottom"]:hover::before {
	border-color: transparent transparent rgba(0, 0, 0, .45) transparent;
	animation: fade .5s ease;
	transition: opacity .5s;
	border-style: solid;
	position: absolute;
	border-width: 8px;
	margin-left: -5px;
	content: " ";
	z-index: 800;
	bottom: 0%;
	left: 50%;
}

@keyframes fade {
	from {
		opacity: 0;
		transition: opacity .5s ease;
	}
	to {
		opacity: 1;
		transition: opacity .5s ease;
	}
}

.col-3 {
	position: relative;
	line-height: 1.6;
	font-size: 12px;
	display: block;
}

@media (min-width: 600px) {
	.col-3 {
		padding: 0 25px;
		width: auto;
	}
}

@media (min-width: 1000px) {
	.col-3 {
		margin-bottom: 40px;
		float: left;
		width: 25%;
	}
}

.col-3 p {
	padding-top: 10px;
}

.footer-1 {
	padding: 40px 0;
}

.headline {
	border-bottom: 1px dotted #555;
	margin: 10px 0 25px 0;
	display: block;
	color: #999;
}

.headline h2 {
	border-bottom: 2px solid gray;
	display: inline-block;
	padding-bottom: 5px;
	margin-bottom: -2px;
	font-weight: 100;
	font-size: 20px;
}

p.explain {
	border-bottom: 1px solid #353535;
	display: inline-block;
	padding-bottom: 2px;
	margin-bottom: 15px;
	font-weight: 100;
}

.bcd7 p,
.bcd7 address {
	color: #999;
}

.list-unstyled {
	list-style: none;
}

.latest-list li:first-child {
	border-top: none;
	padding-top: 0;
}

.latest-list li {
	border-top: 1px solid #353535;
	padding: 10px 0;
}

.latest-list small {
	font-size: 85%;
	display: block;
	color: #999;
}

.latest-list li:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

.link-list li {
	border-top: solid 1px #353535;
	margin-left: 2px;
}

.link-list li:first-child {
	border-top: none !important;
}

.link-list a {
	text-transform: uppercase;
	display: inline-block;
	padding: 6px 0px;
	font-size: 11px;
	width: 95%;
}

.link-list li i {
	margin-top: 10px;
	float: right;
	color: #bbb;
}

.list-pad li {
	list-style-type: square;
	margin-left: 25px;
}

p.copyrights {
	text-transform: uppercase;
	font-weight: 900;
	display: block;
}

## website-17.markdown

      
    Raw
  

              website-17.markdown
            
          
    website 17

A Pen by WhitelightG on CodePen.
License.
	<html>

	<body>

	<header class="navbar-layout">
	<header class="navbar-layout__header layout--fixed-header">
	<a class="navbar-layout__drawer-button">
	<i class="fa fa-bars"></i>
	</a>
	<nav class="navbar-layout__header-row">
	<!-- Title -->
	<header class="navbar-navigation-header">
	<h2 class="navbar-navigation-title"><a>Pixali<span>z</span>ed</a></h2>
	</header>

	<section class="navbar-layout-spacer">
	<div class="nav-form">
	<section class="navbar-search">
	<span class="navbar-search-icon fa fa-search"></span>
	<input type="search" class="in" id="searching" placeholder="Search" />
	</section>
	<ul id="searchResults" class="hidden"> </ul>
	</div>
	</section>

	<!-- Navigation. We hide it in small screens. -->
	<main class="navbar-navigation-main">
	<ul class="navbar-navigation">
	<li class="navbar-navigation_link">
	<a href="#">Link</a>
	</li>
	<li class="navbar-navigation_link">
	<a href="#">Link</a>
	</li>
	<li class="navbar-navigation_link">
	<a href="#">Link</a>
	</li>
	<li class="navbar-navigation_link">
	<a href="#">Link</a>
	</li>
	</ul>
	</main>
	</nav>
	</header>
	<nav class="sidebar_drawer layout--fixed-header">
	<header class="sidenav-header clearfix">
	<a>
	<i class="sidenav-close fa fa-times"></i>
	</a>
	<h2 class="sidenav-title">
	<a>
	Pixali<span>z</span>ed
	</a>
	</h2>

	<div class="nav-form">
	<section class="navbar-search">
	<span class="navbar-search-icon fa fa-search"></span>
	<input type="search" id="searchingS" placeholder="Search" />
	</section>
	<ul id="sea" class="hidden"> </ul>
	</div>

	</header>


	<main class="sidenav-main">
	<ul class="sidenav-navigation">
	<li class="sidenav_link">
	<a href="#">Link</a>
	</li>
	<li class="sidenav_link">
	<a href="#">Link</a>
	</li>
	<li class="sidenav_link">
	<a href="#">Link</a>
	</li>
	<li class="sidenav_link">
	<a href="#">Link</a>
	</li>
	</ul>
	</main>
	<footer class="sidenav-footer"></footer>
	</nav>
	</header>

	<main class="navbar-layout__content">
	<div class="sidebar-darken"></div>
	<div class="page-content">
	<!-- Your content goes here -->
	<section class="row">
	<section class="background bcd0 align-center">
	<header>
	<noscript>
	Sorry, your browser does not support JavaScript or your Javascript is not loaded, please click Restart.
	</noscript>

	<p class="noscript">
	Sorry, your browser does not support JavaScript or your Javascript is not loaded, please click Restart.
	</p>
	<h2 class="section-title">CONTEST: <i>Pixalized</i></h2>
	<p>Creating brick by brick.</p>
	<a><i class="fa fa-angle-double-down"></i></a>

	</header>
	<main class="layer">
	</main>
	</section>
	<section class="background bcd1 align-center">
	<header>
	<h2 class="section-title">Welcome</h2>
	</header>
	<main class="layer">
	<article class="layer-container">
	<div class="col container">
	<p>Thank you for visiting us and we hope we make you're visit well spent.</p>
	</div>
	</article>
	</main>
	</section>
	</section>
	<section class="background bcd2 align-center">
	<header>
	<h2 class="section-title">What</h2>
	</header>
	<main class="layer">
	<article class="layer-container">
	<div class="col container">
	<p>The contest <i class="title">Pixalized</i> is about making an image, a game, an animation or a website using shapes.</p>
	</div>
	</article>
	</main>
	</section>
	<section class="background bcd3 align-center">
	<header>
	<h2 class="section-title">How</h2>
	</header>
	<main class="layer">
	<article class="layer-container ">
	<div class="col container">
	<ul class="listing">
	When creating an image, a game, an animation or a website you must make it :
	<ul>
	<li>
	<i class="title">Pixalized</i> with shapes.
	</li>
	<li>
	Have ([Pix]) in the title.
	</li>
	<li>
	Completly original.
	</li>
	<li>
	Partners and teams are allowed.
	</li>
	<li>
	Asking for help from other people with credit is also allowed.
	</li>
	</ul>
	For more details ask in the comments area at the bottom of the screen.
	</ul>
	</div>
	</article>
	</main>
	</section>
	<section class="background bcd4 align-center">
	<header>
	<h2 class="section-title">When</h2>
	</header>
	<main class="layer">
	<article class="layer-container ">
	<div class="col container">
	<p>The contests submission date is on the 2nd of MAY 2016 (if there are any changes to the submission date I will post it in the comment field down below).</p>
	</div>
	</article>
	</main>
	</section>
	<section class="background bcd5 align-center">
	<header>
	<h2 class="section-title">Help</h2>
	</header>
	<main class="layer">
	<article class="layer-container ">
	<div class="col container">
	<p>For more help ask in the questions area at the bottom of the screen.</p>
	</div>
	</article>
	</main>
	</section>

	<section class="background bcd6 align-center">
	<header>
	<h2 class="section-title">Signed up</h2>
	</header>
	<main class="layer">
	<article class="layer-container ">
	<div class="col container">
	<ul class="list"></ul>
	<h3 class="num-people"></h3>
	<form class="account">
	<fieldset data-tooltip="put your profile name in the input box above" data-direct="bottom">
	<input class="input" class="input" type="text" name="name" id="name" required/>
	<label for="name">Name</label>
	</fieldset>
	<fieldset data-tooltip="put the amount of energy points in the input box above" data-direct="bottom">
	<input class="input" type="text" name="points" id="points" required/>
	<label for="points">Points</label>
	</fieldset>
	<fieldset data-tooltip="put your profile image url in the input box above" data-direct="bottom">
	<input class="input" type="text" name="img" id="img" required/>
	<label for="img">Image</label>
	</fieldset>
	<fieldset data-tooltip="put your profile url in the input box above" data-direct="bottom">
	<input class="input" type="text" name="Url" id="Url" required/>
	<label for="Url">Url</label>
	</fieldset>
	<fieldset data-tooltip="put the date you joinded khan acedemy in the input box above" data-direct="bottom">
	<input class="input" type="text" name="date" id="date" required/>
	<label for="date">Date</label>
	</fieldset>
	<fieldset data-tooltip="put a description about yourself in the input box above" data-direct="bottom">
	<textarea name="description" id="description" required></textarea>
	<label for="description">Description</label>
	</fieldset>
	<fieldset data-tooltip="click to submit profile information then copy the profile code and post your profile in the comment section bellow for it to be included" data-direct="bottom">
	<button class="submit">Submit</button>
	</fieldset>
	</form>

	<div class="code-list"> </div>
	</div>
	</article>
	</main>
	</section>

	</div>
	</main>

	<section class="bcd7">
	<section class="container">
	<section class="row footer-1">
	<section class="col col-3">
	<div class="headline">
	<h2>What</h2>
	</div>
	<p>The contest Pixalized is about making an image, a game, an animation or a website using shapes.</p>
	</section>
	<section class="col col-3">
	<div class="headline">
	<h2>When</h2>
	</div>
	<p>The contests submission date is on the 2nd of MAY 2016 (if there are any changes to the submission date I will post it in the comment field down below).</p>
	</section>
	<section class="col col-3">
	<div class="posts">
	<div class="headline">
	<h2>How</h2>
	</div>
	<ul class="list-unstyled latest-list">
	<ul class="list-pad">
	<p class="explain">When creating an image, a game, an animation or a website you must make it:</p>
	<hr />
	<ul>
	<li>
	<i class="title">Pixalized</i> with shapes.
	</li>
	<li>
	Have ([Pix]) in the title.
	</li>
	<li>
	Completly original.
	</li>
	<li>
	Partners and teams are allowed.
	</li>
	<li>
	Asking for help from other people with credit is also allowed.
	</li>
	</ul>
	</ul>
	</ul>
	</div>
	</section>
	<section class="col col-3">
	<div class="headline">
	<h2>Help</h2>
	</div>
	<ul class="list-unstyled link-list list-pad">
	<li>
	<a>Contact me.</a>
	<i class="fa fa-angle-right"></i>
	</li>
	<li>
	<a>Ask other participants.</a>
	<i class="fa fa-angle-right"></i>
	</li>
	<li>
	<a>Teams and Partners split-up the various jobs.</a>
	<i class="fa fa-angle-right"></i>
	</li>
	<li>
	<a>Sql is a language that can be used for <em>Pixalization</em>.</a>
	<i class="fa fa-angle-right"></i>
	</li>
	<li>
	<a>Never give up.</a>
	<i class="fa fa-angle-right"></i></li>
	</ul>
	</section>

	</section>
	</section>
	</section>

	<footer class="navbar-layout__header">
	<nav class="navbar-layout__header-row">
	<!-- Title -->
	<header class="navbar-navigation-header">
	<p class="copyrights">
	2016 Whitelighting © All Rights Reserved.
	</p>
	</header>
	<section class="navbar-layout-spacer"></section>

	<!-- Navigation. We hide it in small screens. -->
	<main class="navbar-navigation-main">
	<ul class="navbar-navigation">
	<li class="navbar-navigation_link">
	<a href="#">Link</a>
	</li>
	<li class="navbar-navigation_link">
	<a href="#">Link</a>
	</li>
	<li class="navbar-navigation_link">
	<a href="#">Link</a>
	</li>
	<li class="navbar-navigation_link">
	<a href="#">Link</a>
	</li>
	</ul>
	</main>
	</nav>
	</footer>
	</body>

	</html>
	$(document).ready(function() {
	$(".noscript").hide();
	(function($) {
	$.fn.ripple = function(options) {
	var parent, ink, s, x, y,
	extra = $.extend({
	time: '0.65s',
	size: "2.5",
	color: "rgba(0, 0, 0, .2)",
	top: 0,
	left: 0,
	}, options);
	$("style").append(".ink {\
	background: " + extra.color + ";\
	border-radius: 100%;\
	position: absolute;\
	transform: scale(0);\
	display: block;\
	}\
	.ink.animate {\
	animation: ripple " + extra.time + " linear;\
	}\
	@keyframes ripple {\
	100% {\
	opacity: 0;\
	transform: scale(" + extra.size + ");\
	}\
	}");
	return this.each(function() {
	return $(this).click(function(e) {
	parent = $(this).parent();

	window.setTimeout(function() {
	parent.css({
	'overflow': 'visible',
	});
	parent.css({
	'overflow': 'hidden',
	});
	}, 3000);
	if (parent.find(".ink").length === 0) {
	parent.prepend("<span class='ink'></span>");
	}
	ink = parent.find(".ink");
	ink.removeClass("animate");

	if (!ink.height() && !ink.width()) {
	s = Math.max(parent.outerWidth(), parent.outerHeight());
	ink.css({
	height: s,
	width: s
	});
	}

	x = e.pageX - parent.offset().left - ink.width() / 2;
	y = e.pageY - parent.offset().top - ink.height() / 2;

	extra.top = y;
	extra.left = x;

	ink.css({
	top: extra.top + 'px',
	left: extra.left + 'px'
	}).addClass("animate");
	});
	});
	}
	}(jQuery));

	$(".navbar-layout__drawer-button").click(function(e) {
	e.preventDefault();
	$(".sidebar_drawer").toggleClass("show");
	$(".sidebar-darken").toggleClass("showing");

	});

	$(".sidenav-close, .sidebar-darken").click(function() {
	$(".sidebar_drawer").removeClass("show");
	$(".sidebar-darken").removeClass("showing");
	});

	$("li.sidenav_link a").click(function() {
	$(".sidebar_drawer").removeClass("show");
	$(".sidebar-darken").removeClass("showing");
	});

	var Data = [{
	name: "Whitelight",
	points: "648,814",
	date_joined: "2013",
	description: "hi",
	img: "https://www.khanacademy.org/images/homepage/background-learner.jpg",
	url: "https://www.khanacademy.org/profile/whitelightingG/",
	}, {
	name: "Whitelight",
	points: "648,814",
	date_joined: "2013",
	description: "hi",
	img: "https://www.khanacademy.org/images/homepage/background-learner.jpg",
	url: "https://www.khanacademy.org/profile/whitelightingG/",
	}, ],
	year = new Date().getFullYear();
	$("form").submit(function(e) {
	e.preventDefault();

	$("<li class='col-4'>")
	.html("<a href='" + $('#Url').val() + "' target='_Blank'>\
	<figure class='thumbnail'>\
	<img src='" + $('#img').val() + "'>\
	<figcaption class='caption'>\
	<h4>" + $('#name').val() + "</h4>\
	<p>" + $('#description').val() + "</p>\
	<section class='bottom clearfix'>\
	<section class='left'> Points: " + $('#points').val() + " </section>\
	<section class='right'>Date joined: " + $('#date').val() + "</section>\
	</section>\
	</figcaption>\
	</figure>\
	</a>").appendTo(".list");

	$("<figure class='inline'>")
	.html("<pre>\
	<code class='inline'>\
	{<br>\
	name: " + $("#name").val() + ",<br>\
	points: " + $("#points").val() + ",<br>\
	date_joined: " + $("#date").val() + ",<br>\
	description: " + $("#description").val() + ",<br>\
	img: " + $("#img").val() + ",<br>\
	url: " + $("#Url").val() + ",<br>\
	},\
	</code>\
	</pre>")
	.appendTo(".code-list");
	});
	for (var i = 0; i < Data.length; i++) {
	$("<li class='col-4 list_li clearfix'>")
	.html("<a href='" + Data[i].url + "' target='_Blank'>\
	<figure class='thumbnail'>\
	<img src='" + Data[i].img + "'>\
	<figcaption class='caption'>\
	<h4>" + Data[i].name + "</h4>\
	<p>" + Data[i].description + "</p>\
	<section class='bottom clearfix'>\
	<section class='left'> Points: " + Data[i].points + " </section>\
	<section class='right'>Date joined: " + Data[i].date_joined + "</section>\
	</section>\
	</figcaption>\
	</figure>\
	</a>")
	.appendTo(".list");
	}

	if (Data.length === 0) {
	$("h3.num-people").append("NO ONE HAS CURRENTLY SIGNED UP, AND IN OTHER TO SIGN UP ASK SO IN THE COMMENT AREA BY SAYING I'M IN IN CAPITAL LETTERS.");
	} else if (Data.length === 1) {
	$("h3.num-people").append("1 Person Has CURRENTLY SIGNED UP.");
	} else {
	$("h3.num-people").append(Data.length + " People Have CURRENTLY SIGNED UP why don't you.");
	}

	$("a").ripple();

	$(function() {
	var Option = ["Alabama ", "Alaska ", "Arizona ", "Arkansas ", "California ", "Colorado ", "Connecticut ", "Delaware ", "Florida ", "Georgia ", "Hawaii ", "Idaho ", "Illinois ", "Indiana ", "Iowa ", "Kansas ", "Kentucky ", "Louisiana ", "Maine ", "Maryland ", "Massachusetts ", "Michigan ", "Minnesota ", "Mississippi ", "Missouri ", "Montana ", "Nebraska ", "Nevada ", "New Hampshire ", "New Jersey ", "New Mexico ", "New York ", "North Carolina ", "North Dakota ", "Ohio ", "Oklahoma ", "Oregon ", "Pennsylvania ", "Rhode Island ", "South Carolina ", "South Dakota ", "Tennessee ", "Texas ", "Utah ", "Vermont ", "Virginia ", "Washington ", "West Virginia ", "Wisconsin ", "Wyoming", "404 Error", "Address Bar", "Ajax", "Apache", "Autoresponder", "BitTorrent", "Blog", "Bookmark", "Bot", "Broadband", "Captcha", "Certificate", "Client", "Cloud", "Cloud Computing", "CMS", "Cookie", "CSS", "Cyberspace", "Denial of Service", "DHCP", "Dial-up", "DNS Record", "Domain Name", "Download", "E-mail", "Facebook", "FiOS", "Firewall", "FTP", "Gateway", "Google", "Google Drive", "Gopher", "Hashtag", "Hit", "Home Page", "HTML", "HTTP", "HTTPS", "Hyperlink", "Hypertext", "ICANN", "Inbox", "Internet", "InterNIC", "IP", "IP Address", "IPv4", "IPv6", "IRC", "iSCSI", "ISDN", "ISP", "JavaScript", "jQuery", "Meta Search Engine", "Meta Tag", "Minisite", "Mirror", "Name Server", "Packet", "Page View", "Payload", "Phishing", "POP3", "Protocol", "Scraping", "Search Engine", "Social Networking", "Socket", "Spam", "Spider", "Spoofing", "SSH", "SSL", "Static Website", "Twitter", "XHTML", "Anna", "Brittany", "Cinderella", "Diana", "Eva", "Fiona", "Gunda", "Hege", "Inga", "Johanna", "Kitty", "Linda", "Nina", "Ophelia", "Petunia", "Amanda", "Raquel", "Cindy", "Doris", "Eve", "Evita", "Sunniva", "Tove", "Unni", "Violet", "Liza", "Elizabeth", "Ellen", "Wenche", "Vicky", "1x", "2x", "3x", "4x", "5x", "6x", "7x", "8x", "9x", "10x", "11x", "12x", "13x", "14x", "15x", "16x", "16x", "18x", "17x", "18x", "19x", "120x", "130x", "140x", "150x", "160x", "170x", "180x", "190x", "200x", "210x"],
	itemInList = 'li',
	search = function(term) {
	$('ul#sea').find(itemInList).each(function() {
	if ($(this).html().toLowerCase().substr($(this).html().toLowerCase().search(term.toLowerCase()), term.length) != term.toLowerCase()) {
	$(this).hide();
	} else {
	$(this).show();
	}
	});
	},
	searchS = function(term) {
	$('ul#searchResults').find(itemInList).each(function() {
	if ($(this).html().toLowerCase().substr($(this).html().toLowerCase().search(term.toLowerCase()), term.length) != term.toLowerCase()) {
	$(this).hide();
	} else {
	$(this).show();
	}
	});
	};

	for (var i = 0; i < Option.length; i++) {
	$("<" + itemInList + ">").html(Option[i].capitalize()).appendTo("ul#searchResults");
	}

	for (var i = 0; i < Option.length; i++) {
	$("<" + itemInList + ">").html(Option[i].capitalize()).appendTo("#sea");
	}

	$('ul#sea li').click(function() {
	$('#searchingS').val($(this).html()).trigger('keyup');
	});

	$('ul#searchResults li').click(function() {
	$('#searching').val($(this).html()).trigger('keyup');
	});

	$('#searchingS').keyup(function(e) {
	if ($(this).val().length === 0) {
	$('ul#sea').addClass("hidden", 100);
	} else {
	$('ul#sea').removeClass("hidden", 100);
	}
	searchS($(this).val());
	});

	$('#searching').keyup(function(e) {
	if ($(this).val().length === 0) {
	$('ul#searchResults').addClass("hidden", 100);
	} else {
	$('ul#searchResults').removeClass("hidden", 100);
	}
	search($(this).val());
	});

	});
	});
	<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
	<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
	<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.min.js"></script>
	<script src="//cdnjs.cloudflare.com/ajax/libs/ember.js/1.10.0/ember.min.js"></script>
	<script src="//cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react.min.js"></script>
	*,
	*:before,
	*:after {
	transition: all 0.5s ease-in-out;
	box-sizing: border-box;
	outline: none;
	resize: none;
	border: none;
	padding: 0;
	margin: 0;
	}

	html,
	body {
	font-family: 'Helvetica', 'Arial', sans-serif;
	transition: all 0.5s ease;
	font-weight: 400;
	font-size: 14px;
	}

	li {
	list-style: none;
	}

	img {
	vertical-align: middle;
	height: 200px;
	width: 100%;
	}

	pre {
	font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
	word-break: break-all;
	word-wrap: break-word;
	margin: 1em 0px 1em;
	white-space: nowrap;
	font-weight: 100;
	font-size: 13px;
	display: block;
	overflow: auto;
	padding: 0;
	margin: 0;
	}

	pre code {
	white-space: pre-wrap;
	}

	textarea,
	code,
	kbd,
	pre {
	font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
	font-size: .8em;
	}

	a {
	text-decoration: none;
	cursor: pointer;
	color: #999;
	}

	em {
	font-size: 1.25em;
	font-weight: 900;
	}

	.layout--fixed-header {
	position: fixed;
	width: 100%;
	top: 0;
	}

	.navbar-layout__header {
	box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12), 0 -2px 2px 0 rgba(0, 0, 0, .14), 0 -3px 1px -2px rgba(0, 0, 0, .2), 0 -1px 5px 0 rgba(0, 0, 0, .12);
	border: 1px solid transparent;
	border-bottom-color: #333;
	border-top-color: #333;
	max-height: 1000px;
	background: #222;
	min-height: 64px;
	z-index: 100;
	color: gray;
	}

	.navbar-layout__drawer-button {
	display: inline-block;
	position: absolute;
	text-align: center;
	line-height: 50px;
	margin: 8px 12px;
	overflow: hidden;
	font-weight: 100;
	font-size: 20px;
	cursor: pointer;
	height: 48px;
	width: 48px;
	color: gray;
	z-index: 5;
	left: 0;
	top: 0;
	}

	.navbar-layout__header-row {
	padding: 0 40px 0 80px;
	align-self: stretch;
	align-items: center;
	display: flex;
	height: 64px;
	}

	.navbar-navigation-main {
	overflow-x: hidden;
	}

	.navbar-navigation-title {
	position: relative;
	font-weight: 400;
	font-size: 20px;
	line-height: 1;
	}

	.navbar-navigation-title,
	.sidenav-title {
	font-weight: 400;
	font-size: 20px;
	}

	.navbar-navigation-title:first-letter,
	.sidenav-title:first-letter {
	font-size: 30px;
	color: red;
	}

	.navbar-navigation-title:first-letter,
	.sidenav-title:first-letter,
	i.title {
	text-shadow: .04em .04em 0 lightgray, -1px -1px 0 lightgray, 1px -1px 0 lightgray, -1px 1px 0 lightgray, 1px 1px 0 lightgray, .04em .04em 0 lightgray, -1px -1px 0 lightgray, 1px -1px 0 lightgray, -1px 1px 0 lightgray, 1px 1px 0 lightgray, 2px 2px 0 lightgray, 3px 3px 0 lightgray, 4px 4px 0 lightgray, 5px 5px 0 lightgray, 6px 6px 0 lightgray;
	font-family: "Press Start 2P", "Helvetica Neue", sans-serif;
	margin: 0 6px;
	}

	.navbar-navigation-title span,
	.sidenav-title span {
	font-family: 'Covered By Your Grace', 'Rock Salt', 'Trade Winds', cursive, "Helvetica Neue", sans-serif;
	display: inline-block;
	font-size: 35px;
	color: #ff7f7f;
	}

	.navbar-layout-spacer {
	padding: 0 20px;
	flex-grow: 1;
	}

	.nav-form {
	position: relative;
	float: left;
	width: 100%;
	}

	.navbar-search {
	border-bottom: 1px solid #343434;
	color: rgba(255, 255, 255, .5);
	transition: all .2s ease;
	padding: .5em 1.5em;
	background: #1e1e1e;
	font-size: 16px;
	margin: 20px 0;
	outline: none;
	resize: none;
	height: 3em;
	width: 100%;
	}

	.navbar-search:hover,
	.navbar-search:active,
	.navbar-search:focus,
	#side-search:hover,
	#side-search:active,
	#side-search:focus {
	border-bottom: 1px solid #ccc;
	background: #1b1b1b;
	}

	.navbar-search input {
	background: transparent;
	display: inline-block;
	position: relative;
	font-size: 16px;
	height: 100%;
	color: gray;
	width: 90%;
	}

	@media(max-width: 550px) {
	.navbar-search input {
	width: 85%;
	}
	}

	@media(max-width: 450px) {
	.navbar-search input.in {
	display: none;
	width: 0;
	}
	}

	#searchResults,
	#sea {
	border-bottom: 1px solid rgba(0, 0, 0, .2);
	border-right: 1px solid rgba(0, 0, 0, .2);
	border-left: 1px solid rgba(0, 0, 0, .2);
	margin: -10px auto 0;
	background: #292929;
	padding: 5px 10px 0;
	position: absolute;
	max-height: 15em;
	overflow: auto;
	color: #777;
	width: 100%;
	}

	#sea {
	box-shadow: inset 0 10px 55px rgba(0, 0, 0, .5);
	margin: -18px auto 0;
	position: relative;
	}

	#searchResults li,
	#sea li {
	border-bottom: 1px solid rgba(255, 255, 255, .2);
	padding: 0.5em 0;
	cursor: pointer;
	}

	#searchResults li:hover,
	#sea li:hover {
	color: rgba(255, 255, 255, .5);
	font-weight: 900;
	font-size: 1.2em;
	}

	.hidden {
	display: none;
	}

	.navbar-navigation {
	display: flex;
	height: 65px;
	}

	li.navbar-navigation_link {
	list-style: none;
	display: block;
	}

	li.navbar-navigation_link a {
	text-decoration: none;
	line-height: 64px;
	font-weight: 500;
	padding: 0 24px;
	font-size: 13px;
	color: gray;
	}

	@media screen and (max-width: 850px) {
	.navbar-layout--fixed-header>.navbar-layout__header {
	display: flex;
	}
	.navbar-navigation-main {
	display: none;
	}
	.navbar-layout__header {
	min-height: 56px;
	}
	}

	.sidebar_drawer {
	box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12);
	border-right: 1px solid rgba(0, 0, 0, .12);
	transition: all 0.5s ease;
	overflow-x: hidden;
	padding-top: 20px;
	background: #222;
	overflow-y: auto;
	position: fixed;
	color: #424242;
	width: 250px;
	height: 100%;
	left: -250px;
	z-index: 205;
	top: 0;
	}

	.sidebar_drawer.show {
	left: 0;
	}

	.sidenav-navigation {
	padding: 10px 0 20px 0;
	}

	.sidenav-title {
	display: inline-block;
	position: relative;
	padding: 0px 30px;
	}

	.sidenav-close {
	font-weight: 400;
	padding: 0 30px;
	font-size: 20px;
	color: #424242;
	float: right;
	}

	.sidenav-close:hover,
	.navbar-layout__drawer-button:hover {
	color: #7a7a7a;
	}

	li.sidenav_link {
	position: relative;
	font-weight: 500;
	font-size: 14px;
	}

	li.sidenav_link a {
	text-decoration: none;
	position: relative;
	padding: 16px 30px;
	color: #757575;
	display: block;
	}

	li.sidenav_link a:hover {
	border-left: 3px solid gray;
	}

	.sidebar-darken.showing {
	background: rgba(0, 0, 0, .5);
	transition: all 0.5s ease;
	position: fixed;
	z-index: 150;
	height: 100%;
	width: 100%;
	left: 0;
	top: 0;
	}

	.background {
	color: white;
	}

	.align-center {
	text-align: center;
	margin: 0 auto;
	}

	.bcd0 {
	padding: 100px 0 0;
	background: #1c1c1c;
	}

	.bcd0 header {
	justify-content: center;
	flex-direction: column;
	padding-bottom: 10px;
	align-items: center;
	display: flex;
	}

	.bcd0 header p {
	font-family: 'Lato', 'Open Sans', sans-serif;
	transform: scale(1.2);
	font-weight: 200;
	padding: 1em 0;
	font-size: 15px;
	}

	.bcd0 header p:hover,
	.bcd0 header p:focus {
	transform: scale(1.6);
	}

	.bcd0 header .fa {
	animation: bounce 1.75s infinite;
	margin: 2rem 0 5px;
	font-size: 30px;
	font-size: 4rem;
	color: white;
	}

	.bcd0 header .section-title:hover,
	.bcd0 header p:hover,
	.bcd0 header .fa:hover {
	color: gray;
	}

	@keyframes bounce {
	0% {
	-webkit-transform: translateY(0);
	transform: translateY(0);
	}
	10% {
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	}
	20% {
	-webkit-transform: translateY(0);
	transform: translateY(0);
	}
	30% {
	-webkit-transform: translateY(-25%);
	transform: translateY(-25%);
	}
	40% {
	-webkit-transform: translateY(0);
	transform: translateY(0);
	}
	50% {
	-webkit-transform: translateY(-10%);
	transform: translateY(-10%);
	}
	60% {
	-webkit-transform: translateY(0);
	transform: translateY(0);
	}
	70% {
	-webkit-transform: translateY(0);
	transform: translateY(0);
	}
	80% {
	-webkit-transform: translateY(0);
	transform: translateY(0);
	}
	100% {
	-webkit-transform: translateY(0);
	transform: translateY(0);
	}
	}

	.bcd1 {
	background-position: 10px 2px, 4px 35px, 29px 31px;
	background-image: linear-gradient(335deg, #090d06 23px, transparent 23px), linear-gradient(155deg, #1c1c1c 23px, transparent 23px), linear-gradient(335deg, #252525 23px, transparent 23px), linear-gradient(155deg, #090d06 23px, transparent 23px);
	background-attachment: fixed;
	background-size: 58px 98px;
	background-color: #1c1c1c;
	padding: 50px 0 0;
	}

	.bcd2 {
	background: radial-gradient(circle farthest-side at 0% 50%, #090d06 23.5%, rgba(240, 166, 17, 0) 0)21px 30px, radial-gradient(circle farthest-side at 0% 50%, #1c1c1c 24%, rgba(240, 166, 17, 0) 0)19px 30px, linear-gradient(#090d06 14%, rgba(240, 166, 17, 0) 0, rgba(240, 166, 17, 0) 85%, #090d06 0)0 0, linear-gradient(150deg, #090d06 24%, #1c1c1c 0, #1c1c1c 26%, rgba(240, 166, 17, 0) 0, rgba(240, 166, 17, 0) 74%, #1c1c1c 0, #1c1c1c 76%, #090d06 0)0 0, linear-gradient(30deg, #090d06 24%, #1c1c1c 0, #1c1c1c 26%, rgba(240, 166, 17, 0) 0, rgba(240, 166, 17, 0) 74%, #1c1c1c 0, #1c1c1c 76%, #090d06 0)0 0, linear-gradient(90deg, #1c1c1c 2%, #090d06 0, #090d06 98%, #1c1c1c 0%)0 0 #090d06;
	background-attachment: fixed;
	background-size: 40px 60px;
	background-color: #001;
	padding: 50px 0 0;
	}

	.bcd3 {
	background-image: radial-gradient(lightgray 15%, transparent 16%), radial-gradient(#363636 15%, transparent 16%);
	background-position: 0 0, 30px 30px;
	background-attachment: fixed;
	background-size: 60px 60px;
	background-color: #0f0f0f;
	padding: 50px 0 0;
	}

	.bcd4 {
	background: radial-gradient(circle at 100% 50%, transparent 20%, rgba(255, 255, 255, .3) 21%, rgba(255, 255, 255, .3) 34%, transparent 35%, transparent), radial-gradient(circle at 0% 50%, transparent 20%, rgba(255, 255, 255, .3) 21%, rgba(255, 255, 255, .3) 34%, transparent 35%, transparent) 0 -50px;
	background-attachment: fixed;
	background-size: 75px 100px;
	background-color: #1c1c1c;
	padding: 50px 0 0;
	}

	.bcd5 {
	background: radial-gradient(circle at 50% 59%, #565656 3%, #1c1c1c 4%, #1c1c1c 11%, rgba(54, 78, 39, 0) 12%, rgba(54, 78, 39, 0)) 50px 0, radial-gradient(circle at 50% 41%, #1c1c1c 3%, lightgray 4%, lightgray 11%, rgba(210, 202, 171, 0) 12%, rgba(210, 202, 171, 0)) 50px 0, radial-gradient(circle at 50% 59%, lightgray 3%, #1c1c1c 4%, #1c1c1c 11%, rgba(54, 78, 39, 0) 12%, rgba(54, 78, 39, 0)) 0 50px, radial-gradient(circle at 50% 41%, #1c1c1c 3%, lightgray 4%, lightgray 11%, rgba(210, 202, 171, 0) 12%, rgba(210, 202, 171, 0)) 0 50px, radial-gradient(circle at 100% 50%, lightgray 16%, rgba(210, 202, 171, 0) 17%), radial-gradient(circle at 0% 50%, #1c1c1c 16%, rgba(54, 78, 39, 0) 17%), radial-gradient(circle at 100% 50%, lightgray 16%, rgba(210, 202, 171, 0) 17%) 50px 50px, radial-gradient(circle at 0% 50%, #1c1c1c 16%, rgba(54, 78, 39, 0) 17%) 50px 50px;
	background-attachment: fixed;
	background-size: 100px 100px;
	background-color: #1c1c1c;
	padding: 50px 0 0;
	}

	.bcd6 {
	background: linear-gradient(135deg, #292929 22px, lightgray 22px, lightgray 24px, transparent 24px, transparent 67px, lightgray 67px, lightgray 69px, transparent 69px), linear-gradient(225deg, #292929 22px, lightgray 22px, lightgray 24px, transparent 24px, transparent 67px, lightgray 67px, lightgray 69px, transparent 69px)0 64px;
	background-attachment: fixed;
	background-size: 64px 128px;
	background-color: #292929;
	padding: 50px 0 0;
	}

	.bcd7 {
	background: #1c1c1c;
	padding: 10px;
	}

	.section-title {
	font-family: 'Lato', 'Open Sans', sans-serif;
	text-transform: uppercase;
	padding: 0px 0 60px;
	line-height: 100%;
	font-weight: 200;
	font-size: 5vw;
	}

	.section-title i,
	i.title {
	text-shadow: .04em .04em 0 lightgray, -1px -1px 0 lightgray, 1px -1px 0 lightgray, -1px 1px 0 lightgray, 1px 1px 0 lightgray, 2px 2px 0 lightgray, 3px 3px 0 lightgray, 4px 4px 0 lightgray, 6px 6px 0 lightgray, 8px 8px 0 lightgray;
	font-family: "Press Start 2P", "Helvetica Neue", sans-serif;
	display: inline-block;
	color: #262626;
	}

	i.title {
	margin-right: 10px;
	}

	.bcd1 .section-title,
	.bcd2 .section-title,
	.bcd3 .section-title,
	.bcd4 .section-title,
	.bcd5 .section-title,
	.bcd6 .section-title {
	padding: 20px 0 60px;
	font-size: 25px;
	}

	.bcd1 .section-title:after,
	.bcd2 .section-title:after,
	.bcd3 .section-title:after,
	.bcd4 .section-title:after,
	.bcd5 .section-title:after,
	.bcd6 .section-title:after {
	margin-left: -45px;
	position: absolute;
	background: #fff;
	margin-top: 35px;
	content: " ";
	height: 2px;
	width: 20px;
	}

	@media(min-width: 250px) {
	.section-title {
	font-size: 26px;
	}
	}

	@media(min-width: 700px) {
	img {
	height: 300px;
	}
	.bcd0 {
	background: #1c1c1c;
	padding: 200px 0 0px;
	}
	.section-title {
	font-family: 'Lato', 'Open Sans', sans-serif;
	text-transform: uppercase;
	font-weight: 200;
	font-size: 32px;
	}
	.section-title {
	font-size: 50px;
	}
	.section-title:after {
	margin-left: -145px;
	position: absolute;
	background: #fff;
	margin-top: 60px;
	content: " ";
	height: 2px;
	width: 70px;
	}
	.bcd1 .section-title,
	.bcd2 .section-title,
	.bcd3 .section-title,
	.bcd4 .section-title,
	.bcd5 .section-title,
	.bcd6 .section-title {
	padding: 60px 0 100px;
	font-size: 25px;
	}
	.bcd1 .section-title,
	.bcd2 .section-title,
	.bcd3 .section-title,
	.bcd4 .section-title,
	.bcd5 .section-title,
	.bcd6 .section-title {
	padding: 60px 0 100px;
	font-size: 40px;
	}
	.bcd1 .section-title:after,
	.bcd2 .section-title:after,
	.bcd3 .section-title:after,
	.bcd4 .section-title:after,
	.bcd5 .section-title:after,
	.bcd6 .section-title:after {
	margin-left: -70px;
	position: absolute;
	background: #fff;
	margin-top: 45px;
	content: " ";
	height: 2px;
	width: 50px;
	}
	}

	@media(min-width: 800px) {
	.bcd0 {
	background: #1c1c1c;
	padding: 200px 0 0;
	}
	.section-title {
	font-size: 70px;
	}
	.section-title:after {
	margin-left: -215px;
	position: absolute;
	background: #fff;
	margin-top: 80px;
	content: " ";
	height: 2px;
	width: 125px;
	}
	.bcd1 .section-title,
	.bcd2 .section-title,
	.bcd3 .section-title,
	.bcd4 .section-title,
	.bcd5 .section-title,
	.bcd6 .section-title {
	padding: 60px 0 100px;
	font-size: 60px;
	}
	.bcd1 .section-title:after,
	.bcd2 .section-title:after,
	.bcd3 .section-title:after,
	.bcd4 .section-title:after,
	.bcd5 .section-title:after,
	.bcd6 .section-title:after {
	margin-left: -120px;
	position: absolute;
	background: #fff;
	margin-top: 65px;
	content: " ";
	height: 2px;
	width: 70px;
	}
	}

	.layer {
	box-shadow: 0 0px 2px 0 rgba(0, 0, 0, .14), 0 2px 1px 2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12), 0 0px 2px 0 rgba(0, 0, 0, .14), 0 -2px 1px 2px rgba(0, 0, 0, .2), 0 -1px 5px 0 rgba(0, 0, 0, .12);
	font-family: "Open Sans", Arial, sans-serif;
	border: 1px solid transparent;
	border-bottom-color: #333;
	border-top-color: #333;
	position: relative;
	font-weight: 200;
	font-size: 18px;
	color: #ccc;
	z-index: 25;
	}

	.layer h2 {
	font-family: "Open Sans", Arial, sans-serif;
	font-weight: 300;
	font-size: 13px;
	}

	.layer-container {
	background: #252525;
	display: block;
	padding: 10px;
	width: 100%;
	}

	li.list_li {
	list-style: decimal;
	}

	.bcd1 .layer-container,
	.bcd2 .layer-container,
	.bcd3 .layer-container,
	.bcd4 .layer-container,
	.bcd5 .layer-container {
	padding: 10px auto;
	}

	.bcd3 .col ul {
	padding: 10px 20px;
	text-align: left;
	}

	.bcd3 .col ul li {
	list-style-type: square;
	word-wrap: break-word;
	line-height: 20px;
	margin: 2px 20px;
	padding: 5px;
	}

	@media(min-width: 800px) {
	.bcd3 .col ul.listing {
	padding-left: 15%;
	}
	}

	.container {
	margin: 10px auto;
	color: #999;
	}

	.col-4 {
	transition: all .5s ease;
	position: relative;
	}

	@media (min-width: 900px) {
	li.list_li {
	list-style: decimal;
	list-style-type: square;
	}
	.col-4 {
	list-style-type: square;
	word-wrap: break-word;
	display: inline-block;
	list-style: decimal;
	width: 50%;
	}
	}

	@media(min-width: 400px) {
	.left {
	display: inline-block;
	word-wrap: break-word;
	margin-top: 10px;
	text-align: left;
	float: left;
	width: 48%;
	}
	.right {
	display: inline-block;
	word-wrap: break-word;
	text-align: right;
	margin-top: 10px;
	float: right;
	width: 48%;
	}
	.clearfix:after,
	.clearfix:before,
	.container-fluid:after,
	.container-fluid:before,
	.container:after,
	.container:before,
	.row:after,
	.row:before {
	display: table;
	content: " ";
	clear: both;
	}
	}

	.thumbnail {
	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
	border: 1px solid #262626;
	transition: all .5s ease;
	line-height: 1.42857143;
	background: #181818;
	border-radius: 8px;
	display: inline-block;
	margin: 10px;
	color: #666;
	}

	.thumbnail:hover {
	box-shadow: 0 5px 60px 0 rgba(0, 0, 0, 0.8);
	background: #1d1d1d;
	color: #666;
	}

	.thumbnail img {
	border-radius: 4px 4px 0 0;
	margin-right: auto;
	margin-left: auto;
	max-width: 100%;
	}

	.thumbnail .caption {
	text-align: left;
	padding: 15px;
	color: #333;
	}

	.thumbnail h4 {
	color: rgba(255, 255, 255, .4);
	word-wrap: break-word;
	text-align: left;
	font-size: 30px;
	padding: 5px;
	}

	.caption section {
	word-wrap: break-word;
	font-size: 13px;
	padding: 5px 0;
	}

	.thumbnail h4:hover {
	color: rgba(255, 255, 255, .8);
	cursor: pointer;
	}

	form {
	max-width: 600px;
	margin: 0 auto;
	}

	h3.num-people,
	legend {
	text-transform: uppercase;
	margin: 10px 0;
	}

	legend {
	border-bottom: 1px dotted #555;
	margin: 10px 0 25px 0;
	text-align: left;
	width: 100%;
	}

	legend .sign-up {
	font-weight: 200;
	font-size: 2em;
	}

	label {
	transform-origin: left center;
	transition: all .2s ease;
	position: absolute;
	margin-top: -55px;
	font-weight: 100;
	font-size: 18px;
	display: block;
	}

	label[for=description] {
	margin-top: -175px;
	}

	.input[type="text"],
	textarea {
	color: rgba(255, 255, 255, .5);
	border-bottom: 1px solid #ccc;
	transition: all .2s ease;
	background: transparent;
	padding: .5em 1.34em;
	font-size: 16px;
	margin: 20px 0;
	outline: none;
	resize: none;
	height: 3em;
	width: 100%;
	}

	textarea {
	padding: .8em 1.34em;
	height: 10em;
	}

	.input[type="text"]:focus,
	textarea:focus {
	border-bottom: 1px solid #ccc;
	transition: all .2s ease;
	background: #1b1b1b;
	}

	.input[type="text"]:focus ~ label {
	transition: all .2s ease;
	margin-top: -95px;
	font-size: 15px;
	}

	textarea:focus ~ label {
	transition: all .2s ease;
	margin-top: -210px;
	font-size: 15px;
	}

	.input[type="text"]:valid,
	textarea:valid {
	border-bottom: 1px solid #343434;
	background: #1e1e1e;
	}

	.input[type="text"]:valid ~ label {
	text-transform: uppercase;
	transition: all .2s ease;
	font-style: italic;
	margin-top: -95px;
	}

	textarea:valid ~ label {
	text-transform: uppercase;
	transition: all .2s ease;
	font-style: italic;
	margin-top: -210px;
	}

	button {
	background-image: linear-gradient(135deg, transparent, transparent 25%, rgba(0, 0, 0, 0.1) 25%, rgba(0, 0, 0, 0.1) 50%, transparent 50%, transparent 75%, rgba(0, 0, 0, 0.1) 75%, rgba(0, 0, 0, 0.1));
	animation: alert 01s infinite linear;
	color: rgba(255, 255, 255, .5);
	background-size: 20px 20px;
	background-color: #242424;
	transition: all .5s ease;
	border: 1px solid gray;
	letter-spacing: 1px;
	text-align: center;
	border-radius: 5em;
	padding: 10px 20px;
	font-weight: 100;
	cursor: pointer;
	font-size: 14px;
	outline: none;
	}

	@keyframes alert {
	from {
	background-position: 20px 20px;
	}
	}

	button:hover {
	background-position: 1000px;
	background-color: #464646;
	}

	figure.inline {
	color: rgba(255, 255, 255, .5);
	border: 1px solid #262626;
	margin: 10px auto 30px;
	background: #0f0f0f;
	border-radius: 5px;
	position: relative;
	font-weight: 100;
	line-height: 1.4;
	text-align: left;
	max-width: 600px;
	font-size: 20px;
	padding: 20px;
	width: 100%;
	}

	[data-tooltip] {
	font-family: "Helvetica Neue", Helvetica, Arial, 'Varela Round', sans-serif;
	position: relative;
	cursor: pointer;
	}

	[data-direct="bottom"]:hover::after {
	background: rgba(0, 0, 0, 0.45);
	content: attr(data-tooltip);
	animation: fade .5s ease;
	transition: opacity .5s;
	text-decoration: none;
	text-transform: none;
	line-height: 1.2em;
	position: absolute;
	margin-left: -50px;
	text-align: center;
	max-width: 200px;
	font-weight: 100;
	font-size: 14px;
	padding: 10px;
	z-index: 800;
	width: 100%;
	color: white;
	opacity: 1;
	top: 100%;
	left: 45%;
	}

	[data-direct="bottom"]:hover::before {
	border-color: transparent transparent rgba(0, 0, 0, .45) transparent;
	animation: fade .5s ease;
	transition: opacity .5s;
	border-style: solid;
	position: absolute;
	border-width: 8px;
	margin-left: -5px;
	content: " ";
	z-index: 800;
	bottom: 0%;
	left: 50%;
	}

	@keyframes fade {
	from {
	opacity: 0;
	transition: opacity .5s ease;
	}
	to {
	opacity: 1;
	transition: opacity .5s ease;
	}
	}

	.col-3 {
	position: relative;
	line-height: 1.6;
	font-size: 12px;
	display: block;
	}

	@media (min-width: 600px) {
	.col-3 {
	padding: 0 25px;
	width: auto;
	}
	}

	@media (min-width: 1000px) {
	.col-3 {
	margin-bottom: 40px;
	float: left;
	width: 25%;
	}
	}

	.col-3 p {
	padding-top: 10px;
	}

	.footer-1 {
	padding: 40px 0;
	}

	.headline {
	border-bottom: 1px dotted #555;
	margin: 10px 0 25px 0;
	display: block;
	color: #999;
	}

	.headline h2 {
	border-bottom: 2px solid gray;
	display: inline-block;
	padding-bottom: 5px;
	margin-bottom: -2px;
	font-weight: 100;
	font-size: 20px;
	}

	p.explain {
	border-bottom: 1px solid #353535;
	display: inline-block;
	padding-bottom: 2px;
	margin-bottom: 15px;
	font-weight: 100;
	}

	.bcd7 p,
	.bcd7 address {
	color: #999;
	}

	.list-unstyled {
	list-style: none;
	}

	.latest-list li:first-child {
	border-top: none;
	padding-top: 0;
	}

	.latest-list li {
	border-top: 1px solid #353535;
	padding: 10px 0;
	}

	.latest-list small {
	font-size: 85%;
	display: block;
	color: #999;
	}

	.latest-list li:last-child {
	border-bottom: none;
	padding-bottom: 0;
	}

	.link-list li {
	border-top: solid 1px #353535;
	margin-left: 2px;
	}

	.link-list li:first-child {
	border-top: none !important;
	}

	.link-list a {
	text-transform: uppercase;
	display: inline-block;
	padding: 6px 0px;
	font-size: 11px;
	width: 95%;
	}

	.link-list li i {
	margin-top: 10px;
	float: right;
	color: #bbb;
	}

	.list-pad li {
	list-style-type: square;
	margin-left: 25px;
	}

	p.copyrights {
	text-transform: uppercase;
	font-weight: 900;
	display: block;
	}