@keyframes animate
{
from {right:-500px; opacity:0;}
to {right:0; opacity:100;}
}

@-moz-keyframes animate
{
from {right:-500px; opacity:0;}
to {right:0; opacity:100;}
}

@-webkit-keyframes animate
{
from {right:-500px; opacity:0;}
to {right:0; opacity:100;}
}

/*------------- Navigation Bar -------------*/

.nav{
	position: relative;
	top:40px;
	float:right;
	z-index:1000;
	animation: animate 2s ease-in;
	-moz-animation: animate 2s ease-in;
	-webkit-animation: animate 2s ease-in;
}

.nav ul{
	padding: 0;
	list-style: none;
	margin:0;
}

.nav ul li {
	float:left;
	margin-left:2px;
}

.nav ul li a{
	height: 80px;
	background: transparent url(../img/nav.png);
	display: block;
	-webkit-transition:margin-top .2s ease-in;
	-moz-transition:margin-top .2s ease-in;
	-o-transition:margin-top .2s ease-in;
	-ms-transition:margin-top .2s ease-in;
	transition:margin-top .2s ease-in; 
}



/********** DOWN LINKS *************/

/*Normal Links*/

.nav ul li.homedown a{
	width: 80px;
	background-position: 0 0;
}

.nav ul li.aboutdown a{
	width: 80px;
	background-position: -80px 0;
}

.nav ul li.servicesdown a{
	width: 80px;
	background-position: -160px 0;
}

.nav ul li.workdown a{
	width: 80px;
	background-position: -240px 0;
}

.nav ul li.contactdown a{
	width: 80px;
	background-position: -320px 0;
}

/*Hover Links*/

.nav ul li.homedown a:hover{
	width: 80px;
	background-position: 0 240px;
}

.nav ul li.aboutdown a:hover{
	margin-top:10px;
	width: 80px;
	background-position: -80px 240px;
}

.nav ul li.servicesdown a:hover{
	margin-top:10px;
	width: 80px;
	background-position: -160px 240px;
}

.nav ul li.workdown a:hover{
	margin-top:10px;
	width: 80px;
	background-position: -240px 240px;
}

.nav ul li.contactdown a:hover{
	margin-top:10px;
	width:80;
	background-position: -320px 240px;
}





/********** UP LINKS *************/

/*Normal Links*/

.nav ul li.homeup a{
	width: 80px;
	background-position: 0 320px;
}

.nav ul li.aboutup a{
	width: 80px;
	background-position: -80px 320px;
}

.nav ul li.servicesup a{
	width: 80px;
	background-position: -160px 320px;
}

.nav ul li.workup a{
	width: 80px;
	background-position: -240px 320px;
}

.nav ul li.contactup a{
	width: 80px;
	background-position: -320px 320px;
}

/*Hover Links*/

.nav ul li.homeup a:hover{
	margin-top:-10px;
	width: 80px;
	background-position: 0 160px;
}

.nav ul li.aboutup a:hover{
	margin-top:-10px;
	width: 80px;
	background-position: -80px 160px;
}

.nav ul li.servicesup a:hover{
	margin-top:-10px;
	width: 80px;
	background-position: -160px 160px;
}

.nav ul li.workup a:hover{
	margin-top:-10px;
	width: 80px;
	background-position: -240px 160px;
}

.nav ul li.contactup a:hover{
	margin-top:-10px;
	width:80px;
	background-position: -320px 160px;
}





/********** SELECTED LINKS *************/

.nav ul li.home a{
	width: 80px;
	background-position: 0 80px;
}

.nav ul li.about a{
	width: 80px;
	background-position: -80px 80px;
}

.nav ul li.services a{
	width: 80px;
	background-position: -160px 80px;
}

.nav ul li.work a{
	width: 80px;
	background-position: -240px 80px;
}

.nav ul li.contact a{
	width: 80px;
	background-position: -320px 80px;
}

.displace {     
	position: absolute;
	left: -9999px;     
}