.splash {
	position: fixed;
	width: 100%;
	height: 60vh;

	background-color: #000;

	iframe {
		width: 100%;
		height: 100%;
	}
}

.content {

	position: absolute;
	top: 60vh;
	left: 0;
	width: 100%;
	background-color: @background;

	article {
		position: relative;
		width: 100%;
		padding: 0 20px 0 20px;

		@media (min-width: 800px) {
			left: 50%;
			margin-left: -400px;
			width: 800px;
			padding: 0;
		}
	}

	h1 {
		.header-font();
		margin: 32px 0 16px 0;
	}

	p {
		.paragraph-font();
		margin: 16px 0 16px 0;
	}

	li {
		font-size: 0.85em;
	}

	.links {

		overflow: auto;

		li {
			text-align: center;
			float: left;
			width: 50%;
			margin: 32px 0px 32px 0px;
		}

		img {
			display: inline-block;
			width: 64px;
			height: 64px;
			margin-bottom: 8px;
		}

	}

	.grid {

		overflow: auto;

		li {
			float: left;
			width: 50%;
			text-align: center;
			margin: 16px 0 6px 0;

			@media(min-width: 800px) {
				width: 33%;
			}
		}

		img {
			position: relative;
			display: block;
			width: 90%;
			left: 5%;
			margin: 0 0 6px 0;
		}
	}
}

footer {

	background-color: darken(@background, 20%);
	color: lighten(@background, 15%);

	a {
		color: lighten(@background, 15%);

		&:hover {
			color: lighten(@background, 30%);
		}
	}

	width: 100%;
	padding: 32px 0 32px 0;
	margin: 32px 0 0 0;
	text-transform: uppercase;
	font-weight: 600;
	font-size: 12px;
	text-align: center;

}
