html {
	background-color: #000000;
}

body {
	margin: 0;
	min-height: 1000px;
	color: #FFF;
	font-family: "Lato", "Helvetica Neue", Helvetica, Sans-serif;
	font-size: 14px;
}

.content {
	align-items: center;
	bottom: 0;
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	justify-content: center;
	left: 0;
	position: fixed;
	right: 0;
	top: 0;
	padding: 30px;
}

.branding {
	width: 520px;
	height: 366px;
	background-image: url('../img/on-logo.png');
	background-position: center;
	background-repeat: no-repeat;
	text-indent: -10000px;
}

.byline {
	margin-left: 579px;
	margin-top: 25px;
	text-indent: -10000px;
	width: 212px;
	height: 34px;
	background-image: url('../img/on-byline.png');
	background-position: center;
	background-repeat: no-repeat;
}

.hide {
	display: none;
}

.gradient {
	background-image:-moz-linear-gradient(-51% -89% -77deg,rgb(42,1,33) 0%,rgb(42,1,33) 38%,rgb(0,0,0) 100%); 
	background-image:-webkit-gradient(linear,-51% -89%,-40% -12%,color-stop(0, rgb(42,1,33)),color-stop(0.38, rgb(42,1,33)),color-stop(1, rgb(0,0,0)));
	background-image:-webkit-linear-gradient(-77deg,rgb(42,1,33) 0%,rgb(42,1,33) 38%,rgb(0,0,0) 100%);
	background-image:linear-gradient(167deg,rgb(42,1,33) 0%,rgb(42,1,33) 38%,rgb(0,0,0) 100%);
}

@media (max-width: 856px) {

	.byline {
		align-self: flex-end;
	}
}

@media (max-width: 580px) {

	.branding {
		width: 100%;
		background-size: contain;
	}

	.byline {
		margin-left: 0;
		align-self: center;
	}
}