#error-404,
.message,
.background,
.vortex {
	height : 700px;
	width : 700px;
}

#error-404 {
	margin : 0 auto;
}

.message,
.background,
.vortex {
	position : absolute;
}

#header {
	width : 100% !important;
}

#ie #header {
	width : 960px;
}

#site-id {
	position : absolute !important;
	left : 50% !important;
	top : 470px;
	z-index : 10;
	-webkit-animation : spin 21s 4.4s infinite linear;
	-webkit-transform-origin : -10px 50px;
	-moz-animation : spin 21s 4.4s infinite linear;
	-moz-transform-origin : -10px 50px;
}

#ie #site-id {
	position: relative !important;
	top : 0 !important;
	left : 20px !important;
}

#site-id a {
	display : block;
	-webkit-transform : translate(-497px, -470px);
	-webkit-animation : id-pull 21s 4.4s forwards ease-out;
	-moz-transform : translate(-497px, -470px);
	-moz-animation : id-pull 21s 4.4s forwards ease-out;
}

#site-id a span {
	-webkit-animation : reverse-spin 11s 4.3s infinite linear;	
	-moz-animation : reverse-spin 11s 4.3s infinite linear;	
}

#footer .about { background : none !important; }

#avatar {
	position : absolute;
	left : 50%;
	z-index : 5;
	margin-left : -50px;
	top : 820px;

	-webkit-animation : spin 16s 2.1s infinite linear
		, avatar-offset 7s 2.1s linear forwards;
	-moz-animation : spin 16s 2.1s infinite linear
		, avatar-offset 7s 2.1s linear forwards;
}

#avatar a {
	display : block;
	-webkit-transform : translate(0, 0);
	-webkit-animation : avatar-pull 7s 2.1s forwards ease-out;
	-moz-transform : translate(0, 0);
	-moz-animation : avatar-pull 7s 2.1s forwards ease-out;
}

#avatar a span {
	display : block;
	height : 128px;
	width : 75px;
	background : url(avatar.png) no-repeat;
	-moz-animation : reverse-spin 6s 2s infinite linear;	
	-webkit-animation : reverse-spin 6s 2s infinite linear;	
}

#nav {
	position: absolute !important;
	top : 0 !important;
	left : 0 !important;
	height : 1100px !important;
	width : 100% !important;
	overflow: hidden !important;
}

#ie #nav {
	top : 25px !important;
	height : 100px !important;
	overflow: auto !important;
}

#nav li {
	position : absolute;
	left : 50%;
	top : 470px;
}

#ie #nav li {
	position : relative;
	left : 335px;
	top : 0;
}

#nav li.projects {
	-webkit-animation : spin 14s 4.2s infinite linear;
	-moz-animation : spin 14s 4.2s infinite linear;
}

#nav li.projects a {
	display : block;
	-webkit-transform : translate(-165px, -445px);
	-webkit-animation : projects-pull 14s 4.2s forwards ease-out;
	-moz-transform : translate(-165px, -445px);
	-moz-animation : projects-pull 14s 4.2s forwards ease-out;
}

#nav li.projects a span {
	-webkit-animation : reverse-spin 6s 4.1s infinite linear;	
	-moz-animation : reverse-spin 6s 4.1s infinite linear;	
}


#nav li.design {
	-webkit-animation : spin 12s 3.8s infinite linear;
	-moz-animation : spin 12s 3.8s infinite linear;
}

#nav li.design a {
	display : block;
	-webkit-transform : translate(-29px, -445px);
	-webkit-animation : design-pull 8s 3.8s forwards ease-out;
	-moz-transform : translate(-29px, -445px);
	-moz-animation : design-pull 8s 3.8s forwards ease-out;
}

#nav li.design a span { 
	-webkit-animation : spin 10s 3.7s infinite linear;	
	-moz-animation : spin 10s 3.7s infinite linear;	
}


#nav li.snippets {
	-webkit-animation : spin 19s 3.2s infinite linear;
	-moz-animation : spin 19s 3.2s infinite linear;
}

#nav li.snippets a {
	display : block;
	-webkit-transform : translate(101px, -445px);
	-webkit-animation : snippets-pull 11s 3.2s forwards ease-out;
	-moz-transform : translate(101px, -445px);
	-moz-animation : snippets-pull 11s 3.2s forwards ease-out;
}

#nav li.snippets a span { 
	-webkit-animation : reverse-spin 7s 3.1s infinite linear;	
	-moz-animation : reverse-spin 7s 3.1s infinite linear;	
}


#nav li.blog {
	-webkit-animation : spin 14s 2.7s infinite linear;
	-moz-animation : spin 14s 2.7s infinite linear;	
}

#nav li.blog a {
	display : block;
	-webkit-transform : translate(240px, -445px);
	-webkit-animation : blog-pull 5s 2.7s forwards ease-out;
	-moz-transform : translate(240px, -445px);
	-moz-animation : blog-pull 5s 2.7s forwards ease-out;
}

#nav li.blog a span { 
	-webkit-animation : spin 14s 2.6s infinite linear;	
	-moz-animation : spin 14s 2.6s infinite linear;	
}


#nav li.contact {
	-webkit-animation : spin 16s 2.1s infinite linear;
	-moz-animation : spin 16s 2.1s infinite linear;
}

#nav li.contact a {
	display : block;
	-webkit-transform : translate(353px, -445px);
	-webkit-animation : contact-pull 7s 2.1s forwards ease-out;
	-moz-transform : translate(353px, -445px);
	-moz-animation : contact-pull 7s 2.1s forwards ease-out;
}

#nav li.contact a span { 
	-webkit-animation : reverse-spin 11s 2s infinite linear;	
	-moz-animation : reverse-spin 11s 2s infinite linear;	
}


.vortex-1 {
	background : url(vortex-1.png) 50% 50% no-repeat;		  
	z-index : 3;
	-moz-animation:spin 4s infinite linear;
	-webkit-animation: spin 4s infinite linear;
}

.vortex-2 {
	background : url(vortex-2.png) 50% 50% no-repeat;		  
	z-index : 4;
	opacity : .8;

	-moz-animation:spin 11s infinite linear;
	-webkit-animation:spin 11s infinite linear;
}

.vortex-3 {
	background : url(vortex-3.png) 50% 50% no-repeat;		  
	z-index : 5;
	opacity : .6;

	-moz-animation:spin 20s infinite linear;
	-webkit-animation:spin 20s infinite linear;
}

.vortex-4 {
	background : url(vortex-2.png) 50% 50% no-repeat;		  
	z-index : 2;
	opacity : 1;

	-webkit-transform : scale(1.5);
	-moz-transform : scale(1.5);
	-o-transform : scale(1.5);
	transform : scale(1.5);

	-moz-animation:spin 30s infinite linear;
	-webkit-animation:spin 30s infinite linear;
}

.background {
	background : url(background.jpg) 50% 50% no-repeat;		  
	z-index : 1;

	-moz-animation: reverse-spin 90s infinite linear;
	-webkit-animation: reverse-spin 90s infinite linear;
}

.message {
	-moz-animation:spin 20s infinite linear;
	-webkit-animation:spin 20s infinite linear;	
	z-index : 7;
}

.message h1 {
	text-align : center;
	font-size : 90px;
	font-weight : bold;
	color : #fff;
	margin-top : 300px;

	text-shadow : 0 0 18px rgba(0,0,0,.8);

	-moz-animation:spin 20s infinite linear;
	-webkit-animation:spin 20s infinite linear;
}
.message h1 span {
	display : block;
	font-size : 18px;
	color : #bbb;
	font-weight : normal;
	text-shadow : 0 0 6px rgba(0,0,0,.9);
}

#header {
	z-index : 30;
	position : relative;
}

#header span {
	display : none;
}

@-webkit-keyframes spin {
	0% { -webkit-transform:rotate(0deg); }
	100% { -webkit-transform:rotate(360deg); }
}

@-webkit-keyframes reverse-spin {
	0% { -webkit-transform:rotate(0deg); }
	100% { -webkit-transform:rotate(-360deg); }
}

@-webkit-keyframes projects-pull {
	0% {  }
	100% { -webkit-transform : translate(-165px, -200px); }
}

@-webkit-keyframes design-pull {
	0% {  }
	100% { -webkit-transform : translate(-29px, -260px); }
}

@-webkit-keyframes snippets-pull {
	0% {  }
	100% { -webkit-transform : translate(70px, -230px); }
}

@-webkit-keyframes blog-pull {
	0% {  }
	100% { -webkit-transform : translate(220px, -120px); }
}

@-webkit-keyframes contact-pull {
	0% {  }
	100% { -webkit-transform : translate(280px, -100px); }
}

@-webkit-keyframes id-pull {
	0% {  }
	100% { -webkit-transform : translate(-310px, 0px); }
}

@-webkit-keyframes avatar-pull {
	0% {  }
	100% { -webkit-transform : translate(0, -310px); }
}

@-webkit-keyframes avatar-offset {
	0% { top : 870px;  }
	100% { top : 320px; }
}


@-moz-keyframes spin {
	0% { -moz-transform:rotate(0deg); }
	100% { -moz-transform:rotate(360deg); }
}

@-moz-keyframes reverse-spin {
	0% { -moz-transform:rotate(0deg); }
	100% { -moz-transform:rotate(-360deg); }
}

@-moz-keyframes projects-pull {
	0% {  }
	100% { -moz-transform : translate(-165px, -200px); }
}

@-moz-keyframes design-pull {
	0% {  }
	100% { -moz-transform : translate(-29px, -260px); }
}

@-moz-keyframes snippets-pull {
	0% {  }
	100% { -moz-transform : translate(70px, -230px); }
}

@-moz-keyframes blog-pull {
	0% {  }
	100% { -moz-transform : translate(220px, -120px); }
}

@-moz-keyframes contact-pull {
	0% {  }
	100% { -moz-transform : translate(280px, -100px); }
}

@-moz-keyframes id-pull {
	0% {  }
	100% { -moz-transform : translate(-310px, 0px); }
}

@-moz-keyframes avatar-pull {
	0% {  }
	100% { -moz-transform : translate(0, -310px); }
}

@-moz-keyframes avatar-offset {
	0% { top : 870px;  }
	100% { top : 320px; }
}