body
{
	margin: 0;
	font-family: "Lato", "Arial";
}

.header-left, .header-center, .header-right
{
	display: inline-block;
}

.header-left, .header-right
{
	width: 10%;
	margin-left: 10px;
	margin-right: 10px;
}

.header-center
{
	width: 80%;
}

.header
{
	display: block;
	width: 100%;
	background: #fff;
	margin-top: 5px;
	border-left: 0px;
	border-right: 0px;
	border-top: 0px;
	border-bottom: 1px;
	border-style: solid;
	border-color: #e2e2e2;
}

.footer
{
	display: block;
	width: 100%;
	border-left: 0px;
	border-right: 0px;
	border-top: 1px;
	border-bottom: 0px;
	border-style: solid;
	border-color: #e2e2e2;
}

.footer-content
{
	display: inline-block;
	width: 100%;
	background: #fff;
}

.footer-content > h4
{
	margin-top: 10px;
	margin-left: 10px;
	color: #5e5e5e;
}

.footer-content > h4 > a
{
	text-decoration: none;
	color: #4169e1;
}

.dn-logo, .eu-logo
{
	display: block;
	margin-left: auto;
	margin-right: auto;
	height: 80px;
	margin: auto;
}

.main-content
{
	background: #f2f2f2;
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 0;
	background: linear-gradient(to bottom right, #c2c2c2, #ffffff);
	background-size: 400% 400%;
	animation: gradient-animation 10s ease infinite;
	border-left: 0px;
	border-right: 0px;
	border-top: 1px;
	border-bottom: 1px;
	border-style: solid;
	border-color: #f2f2f2;
}

@keyframes gradient-animation
{
	0%		{ background-position: 0% 50% }
    50%		{ background-position: 100% 50% }
    100%	{ background-position: 0% 50% }
}

.scenarios-container
{
	text-align: center;
	max-width: 550px;
}

.button-container
{
	position: relative;
	display: block;
	width: 600px;
	height: 60px;
	perspective: 1000px;
	font-size: 24px;
	margin: 16px;
	margin-top: 32px;
	margin-bottom: 32px;
}

.button
{
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	transform-style: preserve-3d;
	transition: all 0.333s;
}

.button-front, .button-bottom
{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	transition: background 0.333s;
	animation-name: reveal;
	animation-duration: 1s;
	transition-timing-function: ease-in;
}

.button-front
{
	transform: rotateY(0deg) translateZ(30px);
	background: #4169e1;
	color: #fff;
}

.button-bottom
{
	transform: rotateX(90deg) translateZ(30px);
	background: #6495ed;
	color: #eee;
	backface-visibility: hidden;

}

.button:hover
{
	transform: rotateX(-90deg);
}

.title
{
	color: #5e5e5e;
	display: block;
	text-align: center;
	margin-right: 40px;
	padding: 0;
	animation-name: reveal;
	animation-duration: 1s;
	transition-timing-function: ease-in;
}

@keyframes reveal
{
	0%		{ opacity: 0.0; }
	100%	{ opacity: 1.0; }
}

.checkmark
{
	margin-right: 10px;
	position: absolute;
	right: 0px;
	color: #4169e1
}

a:visited .checkmark
{
	color: #00ff00;
}
