body {
    margin:0;
    color:blue;
    font-size:16px;
}
.main {
	position: relative;
	top: 0;
	left: 0;
	height: 100vh;
	width: 100%;
	display: block;
	clear:both;
	text-align: center;
	background: linear-gradient(to bottom, black, black 50%, white 50%, white 100%);
	/* background: linear-gradient(to bottom right, black, white); */
	
	animation:rotatebackground;
	animation-duration: 0.5s;
	animation-timing-function:ease-in-out;
	animation-fill-mode: forwards;
	animation-delay:9s;

}

@keyframes movelogo
{
	from {
		transform: translateY(600px);
	}
	to {
		transform: translateY(0px);
	}
}
@keyframes movelogo2
{
	from {
		transform: translateX(0px);
	}
	to {
		transform: translateX(-30vw);
	}
}
@keyframes rotatebackground
{
	0% {background: linear-gradient(180deg, black, black 50%, white 50%, white 100%)}
	10% {background: linear-gradient(178deg, black, black 50%, white 50%, white 100%)}
	20% {background: linear-gradient(176deg, black, black 50%, white 50%, white 100%)}
	30% {background: linear-gradient(174deg, black, black 50%, white 50%, white 100%)}
	40% {background: linear-gradient(172deg, black, black 50%, white 50%, white 100%)}
	50% {background: linear-gradient(170deg, black, black 50%, white 50%, white 100%)}
	60% {background: linear-gradient(168deg, black, black 50%, white 50%, white 100%)}
	70% {background: linear-gradient(166deg, black, black 50%, white 50%, white 100%)}
	80% {background: linear-gradient(164deg, black, black 50%, white 50%, white 100%)}
	90% {background: linear-gradient(162deg, black, black 50%, white 50%, white 100%)}
	100% {background: linear-gradient(to bottom right, black, black 50%, white 50%, white 100%)}
}
#welcome {
	position: absolute;
	top: 0;
	left: 0;
	width:15%;
	text-align:left;
	margin:1em;
	overflow:hidden;
}
#r1 {
	color:#FF6600;
	font-family: 'Zapf Humanist 601 W01',Arial, sans-serif;
	font-size: 1.5em;
	overflow:hidden;
}
#r1  div {
	color:#ffffff;
	display:inline-block;
	transform: translateX(300px);
	animation: movewelcome 1s linear forwards;
}
#r2 {
	color:#ffffff;
	font-family: 'Zapf Humanist 601 W01',Arial, sans-serif;
	font-size: 1.5em;
	transform: translateX(300px);
	animation: movewelcome 1s 2s linear forwards;
}
#r2 span {
	animation: makeitalics 2s 3s forwards;
	
}
#r3 {
	color:#FF6600;
	opacity:0;
	text-align:left;
	font-family: 'Zapf Humanist 601 W01',Arial, sans-serif;
	font-size: 1.8em;
	animation: displaywelcome 2s 4s forwards;
}
@keyframes displaywelcome {
	from {opacity:0;}
	to {opacity:1;}
}
@keyframes movewelcome {
	0% { transform: translateX(300px); }
	100% { transform: translateX(0px); }
}
@keyframes makeitalics {
	to {font-style: italic;color:#FF6600;}
}
#tagline {
	position: absolute;
	top: 0;
	left: 0;
	width:45%;
	text-align:left;
	padding-top:60vh;
	padding-left:50vw;
	transform:translateY(40vh);
	opacity:0;
	animation: movetagline 3s 9s ease forwards;
}
@keyframes movetagline {
	0% { transform: translateY(40vh); }
	100% { transform: translateY(0);opacity:1; }
}
@keyframes highlighttext {
	0% {font-size:1.2em;}
	10% {font-size:1.3em;}
	20% {font-size:1.4em;}
	30% {font-size:1.5em;}
	40% {font-size:1.6em;}
	50% {font-size:1.7em;}
	60% {font-size:1.8em;}
	70% {font-size:1.9em;}
	80% {font-size:2.0em;}
	90% {font-size:2.1em;}
	100% {font-size:2.2em;}
}
@keyframes dimtext {
	0% {opacity:1}
	50% {opacity:0.95}
	60% {opacity:0.90}
	70% {opacity:0.85}
	80% {opacity:0.80}
	90% {opacity:0.75}
	100% {opacity:0.70}
}
h1 {
	padding:0;
	margin:0;
	color:#010167;
	font-family: 'Zapf Humanist 601 W01',Arial, sans-serif;
	font-size:1.2em;
	padding: 10px 0 0 10px;
	animation: dimtext 3s 8s ease forwards;
}
h1 span {
	animation: highlighttext 3s 8s ease forwards;
}
h2 {
	padding:0;
	margin:0;
	color:#FF6600;
	font-family: 'Zapf Humanist 601 W01',Arial, sans-serif;
	font-size:2.2em;
	padding: 10px 0 0 10px;
}
#logobox
{
	width:250px;
	height:250px;
	position: absolute;
	top:0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	transform: translateY(600px);
	animation: movelogo 3s 6s ease forwards,movelogo2 3s 10s ease forwards;

}

.logo
{
	width:250px;
	height:250px;
	background-color:white;
	clip-path: circle(125px at center);
}
.content
{
	clear:both;
	color:blue;
}


footer a { 
color : #ffffff;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}

footer a:visited { 
color : #fff; }

footer a:focus { 
outline : thin dotted; 
color : rgb(0,0,0); }

footer a:hover, 
footer a:active { 
outline : 0;
color : #fff;
}

	#footercontainer {
		width: 100%;	
		border-top: 1px solid #000;
		background: #222 url(/images/footerback.png) left top;
	}
	
		footer {
			clear: both;
			width: 80%; /* 1000px / 1250px */
			font-size: 0.8125em; /* 13 / 16 */
			max-width: 92.3em; /* 1200px / 13 */
			margin: 0 auto;
			padding: 20px 0px 10px 0px;
			color: #999;
		}

		footer strong {
			font-size: 1.077em; /* 14 / 13 */
			color: #aaa;
		}


		footer a:link, footer a:visited { color: #999; text-decoration: underline; }
		footer a:hover { color: #fff; text-decoration: underline; }

		ul.pagefooterlist, ul.pagefooterlistimages {
			display: block;
			float: left;
			margin: 0px;
			padding: 0px;
			list-style: none;
		}

		ul.pagefooterlist li, ul.pagefooterlistimages li {
			clear: left;
			margin: 0px;
			padding: 0px 0px 3px 0px;
			display: block;
			line-height: 1.5em;
			font-weight: normal;
			background: none;

		}

		ul.pagefooterlistimages li {
			height: 34px;
		}


		ul.pagefooterlistimages li img {
			padding: 5px 5px 5px 0px;
			vertical-align: middle;
			opacity: 0.75;
			-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)";
			filter: alpha( opacity  = 75);
			-webkit-transition: all 0.3s ease;
			-moz-transition: all 0.3s ease;
			-o-transition: all 0.3s ease;
			transition: all 0.3s ease;
		}

		ul.pagefooterlistimages li a
		{
			text-decoration: none;
		}

		ul.pagefooterlistimages li a:hover img {
			opacity: 1.0;
			-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
			filter: alpha( opacity  = 100);
		}

			#smallprint {
				margin-top: 20px;
				line-height: 1.4em;
				text-align: center;
				color: #999;
				font-size: 0.923em; /* 12 / 13 */
			}

			#smallprint p{
				vertical-align: middle;
			}

			#smallprint .twitter-follow-button{
				margin-left: 1em;
				vertical-align: middle;
			}

			#smallprint img {
				margin: 0px 10px 15px 0px;
				vertical-align: middle;
				opacity: 0.5;
				-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
				filter: alpha( opacity  = 50);
				-webkit-transition: all 0.3s ease;
				-moz-transition: all 0.3s ease;
				-o-transition: all 0.3s ease;
				transition: all 0.3s ease;
			}


			#smallprint a:hover img {
				opacity: 1.0;
				-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
				filter: alpha( opacity  = 100);
			}

			#smallprint a:link, #smallprint a:visited { color: #999; text-decoration: none; }
			#smallprint a:hover { color: #999; text-decoration: underline; }

#footer {
	font-size: 0.9em;
	margin-top: 7px;
	width: 960px;
	color: #6D6E70;
}

#footer ul#contact_info li {
	display: inline;
	margin-right: 10px;
	border-top:1px solid #666666;
}
#footer ul#contact_info li strong {
	color: #001F44;
}

#footer ul#more_links {
	float: right;
}
#footer ul#more_links li {
	display: inline;
	margin-left: 10px;
	border-top:1px solid #666666;
}