@-webkit-keyframes bounce
{
	0%{ transform: translateY(0%); color: #fff; }
	15%{ transform: translateY(-50%); color: #cf8; }
	30%{ transform: translateY(0%); color: #fff; }
}
@keyframes bounce
{
	0%{ transform: translateY(0%); color: #fff; }
	15%{ transform: translateY(-50%); color: #cf8; }
	30%{ transform: translateY(0%); color: #fff; }
}
@-webkit-keyframes fade
{
	30%{ transform: translateY(0%); }
	100%{ transform: translateY(100%); }
}
@keyframes fade
{
	30%{ transform: translateY(0%); }
	100%{ transform: translateY(100%); }
}
@-webkit-keyframes doppler
{
	0%{ left: -400px; }
	100%{ left: 100%; }
}
@keyframes doppler
{
	0%{ left: -400px; }
	100%{ left: 100%; }
}
@-webkit-keyframes grey
{
	0%{ -webkit-filter: grayscale(0); }
	5%{ -webkit-filter: grayscale(0.9) contrast(0.5); }
	100%{ -webkit-filter: grayscale(0); }
}
@keyframes grey
{
	0%{ -webkit-filter: grayscale(0); }
	5%{ -webkit-filter: grayscale(0.9) contrast(0.5); }
	100%{ -webkit-filter: grayscale(0); }
}
body
{
	cursor: default;
	overflow: hidden;
	background: url('styles/pumps.gif') center center;
	height: 100vh;
}
.container
{
	color: #fff;
	margin-top: 30vh;
	text-align: center;
}
.logo
{
	-webkit-box-reflect: below -20px -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(255, 255, 255, 0.2)));
	font-size: 4em; 
	font-weight: bold; 
	text-transform: uppercase;
	font-family: Nunito;
	line-height: 1;
}
.logo span
{
	display: inline-block;
}
.bounce
{
	-webkit-animation: bounce 5s ease-in-out infinite;
	animation: bounce 5s ease-in-out infinite;
}
.slogan
{
	color: #bfb; 
	letter-spacing: 2px; 
	font-family: Cabin; 
	font-size: 1em;
}
.intro
{
	font-family: "Times New Roman", serif;
	color: #000;
	text-align: left;
	background: #fff;
	padding-left: 8px;
	box-sizing: border-box;
	width: 100vw;
	height: 100vh;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	-webkit-animation: fade 4s ease-in-out forwards;
	animation: fade 4s ease-in-out forwards;
}
.flyby
{
	position: absolute;
	bottom: 0px;
	left: -400px;
}
.doppler
{
	-webkit-animation: doppler 1.5s ease-in;
	animation: doppler 1.5s ease-in;
}
.buttons
{
	position: absolute;
	width: 100%;
	top: 50vh;
}
.button
{
	background: #b6f7b6;
	display: inline-block;
	height: 50px;
	width: 52px;
	padding: 20px;
	margin: 0px 30px;
	font-size: 48px;
	border-radius: 50%;
	border-bottom: 4px solid #8fd58f;
	cursor: pointer;
	transition: border-bottom-width 0.5s, transform 0.5s;
}
.button.pressed
{
	cursor: default;
	border-bottom-width: 0px !important;
	transform: translateY(8px) !important;
}
.button.disabled
{
	background: #e4e4e4;
}
.button:nth-child(even)
{
	transform: translateY(10px);
}
.button:nth-child(even):active
{
	transform: translateY(20px);
}
.mute
{
	position: absolute;
	bottom: 8px;
	left: 8px;
	cursor: pointer;
}
.grey
{
	-webkit-animation: grey 1.5s ease-in-out forwards;
	animation: grey 1.5s ease-in-out forwards;
}