/* =================================
  Base Element Styles
==================================== */
body {
	font-family: 'Varela Round', sans-serif;
	line-height: 1.6;
	color: #004483;
	background: #cc3300;
	margin: 0;
}
ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
p {
	font-size: .75em;
}
h2,
h3,
a {
	color: #A5D8F5;
}
h2,
h3 {
	margin-top: 0;
}
a {
	text-decoration: none;
}
img {
	max-width: 100%;
}

/* ---- Layout Containers ---- */

.banner {
	text-align: center;
	color: #000000;
	background: #CC3300;
	padding: 1.8em 0;
	margin-bottom: 12px;
}
/* ---- Page Elements ---- */

.logo {
	width: auto;
	opacity: 0;
	animation: fade-in-top ease 0.4s forwards;
	-webkit-animation: fade-in-top ease 0.4s forwards;
}
.headline {
	margin-bottom: 0;
}

.agent1 {
	transform: scaleY(0);
	transform-orgin: top;
	animation: grow-top cubic-bezier(0.785, 0.135, 0.15, 0.86) 0.8s forwards;
	-webkit-animation: grow-top cubic-bezier(0.785, 0.135, 0.15, 0.86) 0.8s forwards;
	animation-delay: 0.3s;
}

.agent2 {
	opacity: 0;
	animation: fade-in-top ease 0.8s forwards;
	animation-delay: 1s;
}


/* =================================
  @keyframes
==================================== */

@keyframes fade-in-top {
	from {
		opacity: 0;
		transform: translateY(-50px);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

@-webkit-keyframes fade-in-top {
	from {
		opacity: 0;
		transform: translateY(-50px);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}


@keyframes grow-top {
	from {
		transform: scaleY(0);
	}
	to {
		transform: scaleY(1);
	}
}
@-webkit-keyframes grow-top {
	from {
		transform: scaleY(0);
	}
	to {
		transform: scaleY(1);
	}
}