@font-face {
	font-family: 'Arvo';
	font-style: normal;
	font-weight: 400;
	src: local('Arvo'), url(src/css/arvo-regular-webfont.woff2) format('woff2'), url(src/css/arvo-regular-webfont.woff) format('woff'), url(src/css/arvo-regular-webfont.ttf) format('truetype');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}
@font-face {
	font-family: 'Pacifico';
	font-style: normal;
	font-weight: 400;
	src: local('Pacifico Regular'), url(src/css/pacifico-webfont.woff2) format('woff2'), url(src/css/pacifico-webfont.woff) format('woff'), url(src/css/pacifico-webfont.ttf) format('truetype');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}

/* animation keyframes */

/* logo down animation */
@-webkit-keyframes logo {
	0% {
		opacity: 0;
		-webkit-transform: translateY(-10%);
		transform: translateY(-10%);
	}
	100% {
		opacity: 1;
		-webkit- transform: translateY(0);
		transform: translateY(0);
	}
}
@keyframes logo {
	0% {
		opacity: 0;
		-webkit-transform: translateY(-10%);
		transform: translateY(-10%);
	}
	100% {
		opacity: 1;
		-webkit- transform: translateY(0);
		transform: translateY(0);
	}
}

/* skywriter plane */
@-webkit-keyframes skywriter {
	0% {
		-webkit-transform: translateX(-63%);
		transform: translateX(-63%);
	}
	100% {
		-webkit-transform: translateX(0);
		transform: translateX(0);
	}
}
@keyframes skywriter {
	0% {
		-webkit-transform: translateX(-63%);
		transform: translateX(-63%);
	}
	100% {
		-webkit-transform: translateX(0);
		transform: translateX(0);
	}
}

/* grunticon logo */
@-webkit-keyframes glogo {
	0% {
		opacity: 0;
		-webkit-transform: translateY(70%);
		transform: translateY(70%);
	}
	100% {
		opacity: 1;
		-webkit-transform: translateY(0);
		transform: translateY(0);
	}
}
@keyframes glogo {
	0% {
		opacity: 0;
		-webkit-transform: translateY(70%);
		transform: translateY(70%);
	}
	100% {
		opacity: 1;
		-webkit-transform: translateY(0);
		transform: translateY(0);
	}
}

/* lightbulb animation */
@-webkit-keyframes lightblink {
	0% {
		opacity: 0;
	}
	8% {
		opacity: 0;
	}
	9% {
		opacity: .4;
	}
	10% {
		opacity: 0;
	}
	13% {
		opacity: 0;
	}
	14% {
		opacity: .4;
	}
	15% {
		opacity: 0;
	}
	30% {
		opacity: 0;
		min-height: 0;
	}
	100% {
		opacity: 1;
		min-height: 100px;
	}
}
@keyframes lightblink {
	0% {
		opacity: 0;
	}
	8% {
		opacity: 0;
	}
	9% {
		opacity: .4;
	}
	10% {
		opacity: 0;
	}
	13% {
		opacity: 0;
	}
	14% {
		opacity: .4;
	}
	15% {
		opacity: 0;
	}
	30% {
		opacity: 0;
		min-height: 0;
	}
	100% {
		opacity: 1;
		min-height: 100px;
	}
}

/* tower animation */
@-webkit-keyframes tower {
	0% {
		opacity: 0;
	}
	80% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}
@keyframes tower {
	0% {
		opacity: 0;
	}
	80% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}

/* conveyor animation */

@-webkit-keyframes conveyor {
	0% {
		-webkit-transform: translateX(0px);
		transform: translateX(0px);
	}
	100% {
		-webkit-transform: translateX(-30px);
		transform: translateX(-30px);
	}
}
@keyframes conveyor {
	0% {
		-webkit-transform: translateX(0px);
		transform: translateX(0px);
	}
	100% {
		-webkit-transform: translateX(-30px);
		transform: translateX(-30px);
	}
}


body {
	font-family: serif;
	margin: 0;
	color: #444;
	overflow-x: hidden;
	background: #fff;
}
.font-arvo body {
	font-family: Arvo, serif;
}
a {
	color: #42b549;
}
.header {
	width: 100%;
	height: 485px;
	padding: 1px 0;
	background-color: #1d8ac8;
	position: relative;
	overflow: hidden;
}
.head-inner {
	background-repeat: repeat-x;
	background-position: center bottom;
	position: absolute;
	bottom: 0;
	width: 100%;
	height: 500px;
	z-index: 1;
}
.head-inner.icon-top {
	background-repeat: repeat-x;
	background-position: center bottom;
}
.fg {
	text-align: center;
	color: #fff;
	position: relative;
	-webkit-animation: logo 1s ease-out 1;
	-moz-animation: logo 1s ease-out 1;
	-o-animation: logo 1s ease-out 1;
	animation: logo 1s ease-out 1;
	-webkit-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
	margin: 0 auto 1em;
}
.fg a {
	display: block;
	text-indent: -9999px;
	overflow: hidden;
	width: 200px;
	height: 32px;
	margin: 1.5em auto 0;
	position: relative;
	z-index: 200;
}
.fg em {
	display: block;
	font-style: italic;
	color: #fff;
	color: rgba(255, 255, 255, .9);
	font-family: cursive;
	font-weight: normal;
	font-style: normal;
	font-size: 1.25em;
	background-color: #1d8ac8;
	position: relative;
	z-index: 1;
	display: inline-block;
}
.font-pacifico .fg em {
	font-family: pacifico, cursive;
}
.fg:after {
	content: "\20";
	position: absolute;
	bottom: .65em;
	border-bottom: 2px solid #fff;
	border-color: rgba(255, 255, 255, .9);
	width: 100%;
	display: block;
	width: 60%;
	left: 20%;
}
h1.icon-logo {
	width: 246px;
	height: 190px;
	overflow: hidden;
	position: relative;
	margin: .5em auto;
	-webkit-animation: glogo 2s ease-in-out 1;
	-moz-animation: glogo 2s ease-in-out 1;
	-o-animation: glogo 2s ease-in-out 1;
	animation: glogo 2s ease-in-out 1;
	-webkit-animation-delay: 1s;
	-moz-animation-delay: 1s;
	-o-animation-delay: 1s;
	animation-delay: 1s;
	-webkit-animation-fill-mode: backwards;
	animation-fill-mode: backwards;
	z-index: 2;
}
.grunticon-svg h1.icon-logo  {
	z-index: 0;
}
.icon-plane {
	width: 1900px;
	height: 35px;
	display: block;
	position: absolute;
	left: 81%;
	bottom: 0;
	background-position: 0 bottom;
	background-color: #1d8ac8;
	z-index: 100;
	-webkit-animation: skywriter 4.5s cubic-bezier(0.000, 0, 0.025, 1) 1;
	-moz-animation: skywriter 4.5s cubic-bezier(0.000, 0, 0.025, 1) 1;
	-o-animation: skywriter 4.5s cubic-bezier(0.000, 0, 0.025, 1) 1;
	animation: skywriter 4.5s cubic-bezier(0.000, 0, 0.025, 1) 1;
}
.icon-majestic {
	position: absolute;
	right: 2%;
	top: 17em;
	display: block;
	width: 86px;
	height: 85px;
	z-index: 20;
}
.hide-a11y {
	position: absolute;
	left: -9999px;
	top: -9999px;
}
.content {
	max-width: 45em;
	padding: 0em 5% 2em;
	margin: -6em auto 0;
	line-height: 1.4;
	position: relative;
	z-index: 10;
}
.footer {
	max-width: 45em;
	padding: .5em 5%;
	margin: 0 auto;
	background-color: #1d8ac8;
	color: #fff;
	text-align: center;
}
.footer .icon-fg-logo {
	display: block;
	text-indent: -9999px;
	overflow: hidden;
	width: 200px;
	height: 32px;
	margin: .5em auto;
}
h2, h3 {
	color: #1073B3;
	font-weight: normal;
	line-height: 1.2;
	clear: both;
}
h2 {
	font-family: cursive;
	font-size: 1.4em;
	margin: 1.5em 0 .1em;
}
.font-pacifico h2 {
	font-family: pacifico, cursive;
}
h3 {
	text-transform: uppercase;
	font-size: 1em;
	margin-bottom: 0;
}
.content p {
	font-size: 1em;
}
pre, .icon-group {
	margin: 1em 0;
	padding: 1em;
	border: 4px solid #a39c90;
}
pre {
	background: #444;
	color: #f3f2f0;
	font-size: 1.2em;
	font-family: consolata, monospace;
	overflow: auto;
}
.icon-group {
	background: #f3f2f0;
	padding: 0;
	overflow: auto;
}
.icon-group div, .icon-group a {
	float: left;
	width: 30%;
	list-style: none;
	height: 100px;
	background-position: 50% 50%;
	min-width: 100px;
	margin: 1em 1.5%;
	padding: 0;
	text-align: center;
}
.icon-lamp-a path.lampshade {
	fill: darkolivegreen;
}
.icon-lamp-b path.lampshade {
	fill: turquoise;
}
.icon-lamp-c path.lampshade {
	fill: papayawhip;
}
.icon-browsers {
	padding-bottom: 123px;
	background-position: bottom center;
}

.icon-lamp-blink path.bulb-on,
.icon-lamp-blink path.shade-inner,
.icon-lamp-blink path.beam {
	opacity: 0;
}
.icon-lamp-blink path.beam {
	fill: rgba(255, 255, 255, .7);
}
.icon-lamp-blink.on path.bulb-on,
.icon-lamp-blink.on path.shade-inner,
.icon-lamp-blink.on path.beam {
	-webkit-animation: lightblink 3s 1;
	-moz-animation: lightblink 3s 1;
	-o-animation: lightblink 3s 1;
	animation: lightblink 3s 1;
	opacity: 1;
}

.icon-tower path.ring1,
.icon-tower path.ring2,
.icon-tower path.ring3,
.icon-tower path.ring4 {
	-webkit-animation: tower 1s infinite;
	-moz-animation: tower 1s infinite;
	-o-animation: tower 1s infinite;
	animation: tower 1s infinite;
}
.icon-tower path.ring2 {
	-webkit-animation-delay: .2s;
	-moz-animation-delay: .2s;
	-o-animation-delay: .2s;
	animation-delay: .2s;
}
.icon-tower path.ring3 {
	-webkit-animation-delay: .4s;
	-moz-animation-delay: .4s;
	-o-animation-delay: .4s;
	animation-delay: .4s;
}
.icon-tower path.ring4 {
	-webkit-animation-delay: .6s;
	-moz-animation-delay: .6s;
	-o-animation-delay: .6s;
	animation-delay: .6s;
}

.icon-conveyor g.products path {
	position: relative;
	-webkit-animation: conveyor 2s infinite;
	-moz-animation: conveyor 2s infinite;
	-o-animation: conveyor 2s infinite;
	animation: conveyor 2s infinite;
}


@media (min-width: 40em) {
	.content {
		line-height: 1.5;
	}
	h2 {
		font-size: 2.1875em;
		margin: 1.5em 0 .05em;
		border-bottom: 3px solid #eee;
		display: inline-block;
	}
	.content p {
		font-size: 1.1em;
	}
	.icon-majestic {
		top: 18em;
	}
}

.archived {
	background: #f8f897;
	padding: 1rem;
	border-radius: 4px;
}