* {
	margin: 0;
	box-sizing: border-box;
}

/* Wrapper */

@-moz-keyframes wrapper {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

@-webkit-keyframes wrapper {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

@-ms-keyframes wrapper {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

@keyframes wrapper {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

#wrapper {
	-moz-animation: wrapper 3s forwards;
	-webkit-animation: wrapper 3s forwards;
	-ms-animation: wrapper 3s forwards;
	animation: wrapper 3s forwards;
	height: 100%;
	left: 0;
	opacity: 0;
	position: absolute;
	top: 0;
	width: 100%;
	overflow: hidden;
	border-bottom: 5px solid #fff;
	box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.3);
}

/* BG */

#bg {
	-moz-animation: bg 60s linear infinite;
	-webkit-animation: bg 60s linear infinite;
	-ms-animation: bg 60s linear infinite;
	animation: bg 60s linear infinite;
	-moz-backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	-ms-backface-visibility: hidden;
	backface-visibility: hidden;
	-moz-transform: translate3d(0, 0, 0);
	-webkit-transform: translate3d(0, 0, 0);
	-ms-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
	/* Set your background with this */

	background: #348cb2 url("../img/hero-bg/bg.jpg") bottom left;
	background-repeat: repeat-x;
	height: 100%;
	left: 0;
	opacity: 1;
	position: absolute;
	top: 0;
}

@-moz-keyframes bg {
	0% {
		-moz-transform: translate3d(0, 0, 0);
		-webkit-transform: translate3d(0, 0, 0);
		-ms-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}

	100% {
		-moz-transform: translate3d(-2250px, 0, 0);
		-webkit-transform: translate3d(-2250px, 0, 0);
		-ms-transform: translate3d(-2250px, 0, 0);
		transform: translate3d(-2250px, 0, 0);
	}
}

@-webkit-keyframes bg {
	0% {
		-moz-transform: translate3d(0, 0, 0);
		-webkit-transform: translate3d(0, 0, 0);
		-ms-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}

	100% {
		-moz-transform: translate3d(-2250px, 0, 0);
		-webkit-transform: translate3d(-2250px, 0, 0);
		-ms-transform: translate3d(-2250px, 0, 0);
		transform: translate3d(-2250px, 0, 0);
	}
}

@-ms-keyframes bg {
	0% {
		-moz-transform: translate3d(0, 0, 0);
		-webkit-transform: translate3d(0, 0, 0);
		-ms-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}

	100% {
		-moz-transform: translate3d(-2250px, 0, 0);
		-webkit-transform: translate3d(-2250px, 0, 0);
		-ms-transform: translate3d(-2250px, 0, 0);
		transform: translate3d(-2250px, 0, 0);
	}
}

@keyframes bg {
	0% {
		-moz-transform: translate3d(0, 0, 0);
		-webkit-transform: translate3d(0, 0, 0);
		-ms-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}

	100% {
		-moz-transform: translate3d(-2250px, 0, 0);
		-webkit-transform: translate3d(-2250px, 0, 0);
		-ms-transform: translate3d(-2250px, 0, 0);
		transform: translate3d(-2250px, 0, 0);
	}
}

#bg {
	background-size: 2250px auto;
	width: 6750px;
}

/* Overlay */

@-moz-keyframes overlay {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

@-webkit-keyframes overlay {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

@-ms-keyframes overlay {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

@keyframes overlay {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

#overlay {
	-moz-animation: overlay 1.5s 1.5s forwards;
	-webkit-animation: overlay 1.5s 1.5s forwards;
	-ms-animation: overlay 1.5s 1.5s forwards;
	animation: overlay 1.5s 1.5s forwards;
	background-attachment: fixed, fixed;
	background-image: url("../img/hero-bg/overlay-pattern.png"), url("../img/hero-bg/overlay.svg");
	background-position: top left, center center;
	background-repeat: repeat, no-repeat;
	background-size: auto, cover;
	height: 100%;
	left: 0;
	opacity: 0;
	position: absolute;
	top: 0;
	width: 100%;
}

/* Main */

#main {
	height: 100%;
	left: 0;
	position: absolute;
	text-align: center;
	top: 0;
	width: 100%;
}

#main:before {
	content: '';
	display: inline-block;
	height: 100%;
	margin-right: 0;
	vertical-align: middle;
	width: 1px;
}

/* Header */

@-moz-keyframes header {
	0% {
		-moz-transform: translate3d(0, 1em, 0);
		-webkit-transform: translate3d(0, 1em, 0);
		-ms-transform: translate3d(0, 1em, 0);
		transform: translate3d(0, 1em, 0);
		opacity: 0;
	}

	100% {
		-moz-transform: translate3d(0, 0, 0);
		-webkit-transform: translate3d(0, 0, 0);
		-ms-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
		opacity: 1;
	}
}

@-webkit-keyframes header {
	0% {
		-moz-transform: translate3d(0, 1em, 0);
		-webkit-transform: translate3d(0, 1em, 0);
		-ms-transform: translate3d(0, 1em, 0);
		transform: translate3d(0, 1em, 0);
		opacity: 0;
	}

	100% {
		-moz-transform: translate3d(0, 0, 0);
		-webkit-transform: translate3d(0, 0, 0);
		-ms-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
		opacity: 1;
	}
}

@-ms-keyframes header {
	0% {
		-moz-transform: translate3d(0, 1em, 0);
		-webkit-transform: translate3d(0, 1em, 0);
		-ms-transform: translate3d(0, 1em, 0);
		transform: translate3d(0, 1em, 0);
		opacity: 0;
	}

	100% {
		-moz-transform: translate3d(0, 0, 0);
		-webkit-transform: translate3d(0, 0, 0);
		-ms-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
		opacity: 1;
	}
}

@keyframes header {
	0% {
		-moz-transform: translate3d(0, 1em, 0);
		-webkit-transform: translate3d(0, 1em, 0);
		-ms-transform: translate3d(0, 1em, 0);
		transform: translate3d(0, 1em, 0);
		opacity: 0;
	}

	100% {
		-moz-transform: translate3d(0, 0, 0);
		-webkit-transform: translate3d(0, 0, 0);
		-ms-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
		opacity: 1;
	}
}

@-moz-keyframes nav-icons {
	0% {
		-moz-transform: translate3d(0, 1em, 0);
		-webkit-transform: translate3d(0, 1em, 0);
		-ms-transform: translate3d(0, 1em, 0);
		transform: translate3d(0, 1em, 0);
		opacity: 0;
	}

	100% {
		-moz-transform: translate3d(0, 0, 0);
		-webkit-transform: translate3d(0, 0, 0);
		-ms-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
		opacity: 1;
	}
}

@-webkit-keyframes nav-icons {
	0% {
		-moz-transform: translate3d(0, 1em, 0);
		-webkit-transform: translate3d(0, 1em, 0);
		-ms-transform: translate3d(0, 1em, 0);
		transform: translate3d(0, 1em, 0);
		opacity: 0;
	}

	100% {
		-moz-transform: translate3d(0, 0, 0);
		-webkit-transform: translate3d(0, 0, 0);
		-ms-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
		opacity: 1;
	}
}

@-ms-keyframes nav-icons {
	0% {
		-moz-transform: translate3d(0, 1em, 0);
		-webkit-transform: translate3d(0, 1em, 0);
		-ms-transform: translate3d(0, 1em, 0);
		transform: translate3d(0, 1em, 0);
		opacity: 0;
	}

	100% {
		-moz-transform: translate3d(0, 0, 0);
		-webkit-transform: translate3d(0, 0, 0);
		-ms-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
		opacity: 1;
	}
}

@keyframes nav-icons {
	0% {
		-moz-transform: translate3d(0, 1em, 0);
		-webkit-transform: translate3d(0, 1em, 0);
		-ms-transform: translate3d(0, 1em, 0);
		transform: translate3d(0, 1em, 0);
		opacity: 0;
	}

	100% {
		-moz-transform: translate3d(0, 0, 0);
		-webkit-transform: translate3d(0, 0, 0);
		-ms-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
		opacity: 1;
	}
}

#header {
	-moz-animation: header 1s 2.25s forwards;
	-webkit-animation: header 1s 2.25s forwards;
	-ms-animation: header 1s 2.25s forwards;
	animation: header 1s 0.5s forwards;
	-moz-backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	-ms-backface-visibility: hidden;
	backface-visibility: hidden;
	-moz-transform: translate3d(0, 0, 0);
	-webkit-transform: translate3d(0, 0, 0);
	-ms-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
	cursor: default;
	display: inline-block;
	opacity: 0;
	position: relative;
	text-align: center;
	top: 2em;
	width: 90%;
}

#header h1 {
	font-size: 4.35em;
	font-weight: 900;
	letter-spacing: -0.035em;
	line-height: 70px;
}


/* Wide */

@media screen and (max-width: 1680px) {

	/* Basic */

	body,
	input,
	select,
	textarea {
		font-size: 13pt;
	}

	/* BG */

	@-moz-keyframes bg {
		0% {
			-moz-transform: translate3d(0, 0, 0);
			-webkit-transform: translate3d(0, 0, 0);
			-ms-transform: translate3d(0, 0, 0);
			transform: translate3d(0, 0, 0);
		}

		100% {
			-moz-transform: translate3d(-1500px, 0, 0);
			-webkit-transform: translate3d(-1500px, 0, 0);
			-ms-transform: translate3d(-1500px, 0, 0);
			transform: translate3d(-1500px, 0, 0);
		}

	}

	@-webkit-keyframes bg {
		0% {
			-moz-transform: translate3d(0, 0, 0);
			-webkit-transform: translate3d(0, 0, 0);
			-ms-transform: translate3d(0, 0, 0);
			transform: translate3d(0, 0, 0);
		}

		100% {
			-moz-transform: translate3d(-1500px, 0, 0);
			-webkit-transform: translate3d(-1500px, 0, 0);
			-ms-transform: translate3d(-1500px, 0, 0);
			transform: translate3d(-1500px, 0, 0);
		}
	}

	@-ms-keyframes bg {
		0% {
			-moz-transform: translate3d(0, 0, 0);
			-webkit-transform: translate3d(0, 0, 0);
			-ms-transform: translate3d(0, 0, 0);
			transform: translate3d(0, 0, 0);
		}

		100% {
			-moz-transform: translate3d(-1500px, 0, 0);
			-webkit-transform: translate3d(-1500px, 0, 0);
			-ms-transform: translate3d(-1500px, 0, 0);
			transform: translate3d(-1500px, 0, 0);
		}
	}

	@keyframes bg {
		0% {
			-moz-transform: translate3d(0, 0, 0);
			-webkit-transform: translate3d(0, 0, 0);
			-ms-transform: translate3d(0, 0, 0);
			transform: translate3d(0, 0, 0);
		}

		100% {
			-moz-transform: translate3d(-1500px, 0, 0);
			-webkit-transform: translate3d(-1500px, 0, 0);
			-ms-transform: translate3d(-1500px, 0, 0);
			transform: translate3d(-1500px, 0, 0);
		}
	}

	#bg {
		background-size: 1500px auto;
		width: 4500px;
	}
}

/* Normal */

@media screen and (max-width: 1280px) {

	/* Basic */

	body,
	input,
	select,
	textarea {
		font-size: 12pt;
	}

	/* BG */

	@-moz-keyframes bg {
		0% {
			-moz-transform: translate3d(0, 0, 0);
			-webkit-transform: translate3d(0, 0, 0);
			-ms-transform: translate3d(0, 0, 0);
			transform: translate3d(0, 0, 0);
		}

		100% {
			-moz-transform: translate3d(-750px, 0, 0);
			-webkit-transform: translate3d(-750px, 0, 0);
			-ms-transform: translate3d(-750px, 0, 0);
			transform: translate3d(-750px, 0, 0);
		}

	}

	@-webkit-keyframes bg {
		0% {
			-moz-transform: translate3d(0, 0, 0);
			-webkit-transform: translate3d(0, 0, 0);
			-ms-transform: translate3d(0, 0, 0);
			transform: translate3d(0, 0, 0);
		}

		100% {
			-moz-transform: translate3d(-750px, 0, 0);
			-webkit-transform: translate3d(-750px, 0, 0);
			-ms-transform: translate3d(-750px, 0, 0);
			transform: translate3d(-750px, 0, 0);
		}
	}

	@-ms-keyframes bg {
		0% {
			-moz-transform: translate3d(0, 0, 0);
			-webkit-transform: translate3d(0, 0, 0);
			-ms-transform: translate3d(0, 0, 0);
			transform: translate3d(0, 0, 0);
		}

		100% {
			-moz-transform: translate3d(-750px, 0, 0);
			-webkit-transform: translate3d(-750px, 0, 0);
			-ms-transform: translate3d(-750px, 0, 0);
			transform: translate3d(-750px, 0, 0);
		}
	}

	@keyframes bg {
		0% {
			-moz-transform: translate3d(0, 0, 0);
			-webkit-transform: translate3d(0, 0, 0);
			-ms-transform: translate3d(0, 0, 0);
			transform: translate3d(0, 0, 0);
		}

		100% {
			-moz-transform: translate3d(-750px, 0, 0);
			-webkit-transform: translate3d(-750px, 0, 0);
			-ms-transform: translate3d(-750px, 0, 0);
			transform: translate3d(-750px, 0, 0);
		}
	}

	#bg {
		background-size: 750px auto;
		width: 2250px;
	}
}

/* Mobile */

@media screen and (max-width: 736px) {

	/* Basic */

	body {
		min-width: 320px;
	}

	body,
	input,
	select,
	textarea {
		font-size: 11pt;
	}

	/* BG */

	@-moz-keyframes bg {
		0% {
			-moz-transform: translate3d(0, 0, 0);
			-webkit-transform: translate3d(0, 0, 0);
			-ms-transform: translate3d(0, 0, 0);
			transform: translate3d(0, 0, 0);
		}

		100% {
			-moz-transform: translate3d(-300px, 0, 0);
			-webkit-transform: translate3d(-300px, 0, 0);
			-ms-transform: translate3d(-300px, 0, 0);
			transform: translate3d(-300px, 0, 0);
		}

	}

	@-webkit-keyframes bg {
		0% {
			-moz-transform: translate3d(0, 0, 0);
			-webkit-transform: translate3d(0, 0, 0);
			-ms-transform: translate3d(0, 0, 0);
			transform: translate3d(0, 0, 0);
		}

		100% {
			-moz-transform: translate3d(-300px, 0, 0);
			-webkit-transform: translate3d(-300px, 0, 0);
			-ms-transform: translate3d(-300px, 0, 0);
			transform: translate3d(-300px, 0, 0);
		}
	}

	@-ms-keyframes bg {
		0% {
			-moz-transform: translate3d(0, 0, 0);
			-webkit-transform: translate3d(0, 0, 0);
			-ms-transform: translate3d(0, 0, 0);
			transform: translate3d(0, 0, 0);
		}

		100% {
			-moz-transform: translate3d(-300px, 0, 0);
			-webkit-transform: translate3d(-300px, 0, 0);
			-ms-transform: translate3d(-300px, 0, 0);
			transform: translate3d(-300px, 0, 0);
		}
	}

	@keyframes bg {
		0% {
			-moz-transform: translate3d(0, 0, 0);
			-webkit-transform: translate3d(0, 0, 0);
			-ms-transform: translate3d(0, 0, 0);
			transform: translate3d(0, 0, 0);
		}

		100% {
			-moz-transform: translate3d(-300px, 0, 0);
			-webkit-transform: translate3d(-300px, 0, 0);
			-ms-transform: translate3d(-300px, 0, 0);
			transform: translate3d(-300px, 0, 0);
		}
	}

	#bg {
		background-size: 300px auto;
		width: 900px;
	}

	/* Header */

	#header h1 {
		font-size: 2.5em;
	}

	#header nav {
		font-size: 1em;
	}

	#header nav a:hover {
		font-size: 1em;
	}

	#header nav a:active {
		font-size: 1em;
	}
}

/* Mobile (Portrait) */

@media screen and (max-width: 480px) {

	/* BG */

	@-moz-keyframes bg {
		0% {
			-moz-transform: translate3d(0, 0, 0);
			-webkit-transform: translate3d(0, 0, 0);
			-ms-transform: translate3d(0, 0, 0);
			transform: translate3d(0, 0, 0);
		}

		100% {
			-moz-transform: translate3d(-412.5px, 0, 0);
			-webkit-transform: translate3d(-412.5px, 0, 0);
			-ms-transform: translate3d(-412.5px, 0, 0);
			transform: translate3d(-412.5px, 0, 0);
		}

	}

	@-webkit-keyframes bg {
		0% {
			-moz-transform: translate3d(0, 0, 0);
			-webkit-transform: translate3d(0, 0, 0);
			-ms-transform: translate3d(0, 0, 0);
			transform: translate3d(0, 0, 0);
		}

		100% {
			-moz-transform: translate3d(-412.5px, 0, 0);
			-webkit-transform: translate3d(-412.5px, 0, 0);
			-ms-transform: translate3d(-412.5px, 0, 0);
			transform: translate3d(-412.5px, 0, 0);
		}
	}

	@-ms-keyframes bg {
		0% {
			-moz-transform: translate3d(0, 0, 0);
			-webkit-transform: translate3d(0, 0, 0);
			-ms-transform: translate3d(0, 0, 0);
			transform: translate3d(0, 0, 0);
		}

		100% {
			-moz-transform: translate3d(-412.5px, 0, 0);
			-webkit-transform: translate3d(-412.5px, 0, 0);
			-ms-transform: translate3d(-412.5px, 0, 0);
			transform: translate3d(-412.5px, 0, 0);
		}
	}

	@keyframes bg {
		0% {
			-moz-transform: translate3d(0, 0, 0);
			-webkit-transform: translate3d(0, 0, 0);
			-ms-transform: translate3d(0, 0, 0);
			transform: translate3d(0, 0, 0);
		}

		100% {
			-moz-transform: translate3d(-412.5px, 0, 0);
			-webkit-transform: translate3d(-412.5px, 0, 0);
			-ms-transform: translate3d(-412.5px, 0, 0);
			transform: translate3d(-412.5px, 0, 0);
		}
	}

	#bg {
		background-size: 412.5px auto;
		width: 1237.5px;
	}

	/* Header */

	#header nav {
		padding: 0 1em;
	}
}