@-webkit-keyframes resize {

0% {
	background: url(../img/grid-img1.png) center no-repeat;
	z-index: 1;
}	

10% {
	background: url(../img/grid-img1.png) center no-repeat;
	z-index: 0;
}	

25% {
	background: url(../img/grid-img2.png) center no-repeat;
	z-index: 2;
	opacity: 1;
}

30% {
	background: url(../img/grid-img2.png) center no-repeat;
	z-index: 0;
	opacity: 1;
}


45% {
	background: url(../img/grid-img3.png) center no-repeat;
	z-index: 3;
	opacity: 1;	
}

50% {
	background: url(../img/grid-img3.png) center no-repeat;
	z-index: 0;
	opacity: 1;	
}

65% {
	background: url(../img/grid-img4.png) center no-repeat;
	z-index: 4;
	opacity: 1;
}

70% {
	background: url(../img/grid-img4.png) center no-repeat;
	z-index: 0;
	opacity: 1;
}

85% {
	background: url(../img/grid-img5.png) center no-repeat;
	z-index: 5;
	opacity: 1;
}

90% {
	background: url(../img/grid-img5.png) center no-repeat;
	z-index: 0;
	opacity: 1;
}


100% {
	background: url(../img/grid-img1.png) center no-repeat;
	opacity: 1;
}
	
}

@-o-keyframes resize {

0% {
	background: url(../img/grid-img1.png) center no-repeat;
	z-index: 1;
}	

10% {
	background: url(../img/grid-img1.png) center no-repeat;
	z-index: 0;
}	

25% {
	background: url(../img/grid-img2.png) center no-repeat;
	z-index: 2;
	opacity: 1;
}

30% {
	background: url(../img/grid-img2.png) center no-repeat;
	z-index: 0;
	opacity: 1;
}


45% {
	background: url(../img/grid-img3.png) center no-repeat;
	z-index: 3;
	opacity: 1;	
}

50% {
	background: url(../img/grid-img3.png) center no-repeat;
	z-index: 0;
	opacity: 1;	
}

65% {
	background: url(../img/grid-img4.png) center no-repeat;
	z-index: 4;
	opacity: 1;
}

70% {
	background: url(../img/grid-img4.png) center no-repeat;
	z-index: 0;
	opacity: 1;
}

85% {
	background: url(../img/grid-img5.png) center no-repeat;
	z-index: 5;
	opacity: 1;
}

90% {
	background: url(../img/grid-img5.png) center no-repeat;
	z-index: 0;
	opacity: 1;
}


100% {
	background: url(../img/grid-img1.png) center no-repeat;
	opacity: 1;
}
	
}

@-moz-keyframes resize {

0% {
	background: url(../img/grid-img1.png) center no-repeat;
	z-index: 1;
}	

10% {
	background: url(../img/grid-img1.png) center no-repeat;
	z-index: 0;
}	

25% {
	background: url(../img/grid-img2.png) center no-repeat;
	z-index: 2;
	opacity: 1;
}

30% {
	background: url(../img/grid-img2.png) center no-repeat;
	z-index: 0;
	opacity: 1;
}


45% {
	background: url(../img/grid-img3.png) center no-repeat;
	z-index: 3;
	opacity: 1;	
}

50% {
	background: url(../img/grid-img3.png) center no-repeat;
	z-index: 0;
	opacity: 1;	
}

65% {
	background: url(../img/grid-img4.png) center no-repeat;
	z-index: 4;
	opacity: 1;
}

70% {
	background: url(../img/grid-img4.png) center no-repeat;
	z-index: 0;
	opacity: 1;
}

85% {
	background: url(../img/grid-img5.png) center no-repeat;
	z-index: 5;
	opacity: 1;
}

90% {
	background: url(../img/grid-img5.png) center no-repeat;
	z-index: 0;
	opacity: 1;
}


100% {
	background: url(../img/grid-img1.png) center no-repeat;
	opacity: 1;
}
	
}

@keyframes resize {

0% {
	background: url(../img/grid-img1.png) center no-repeat;
	z-index: 1;
}	

10% {
	background: url(../img/grid-img1.png) center no-repeat;
	z-index: 0;
}	

25% {
	background: url(../img/grid-img2.png) center no-repeat;
	z-index: 2;
	opacity: 1;
}

30% {
	background: url(../img/grid-img2.png) center no-repeat;
	z-index: 0;
	opacity: 1;
}


45% {
	background: url(../img/grid-img3.png) center no-repeat;
	z-index: 3;
	opacity: 1;	
}

50% {
	background: url(../img/grid-img3.png) center no-repeat;
	z-index: 0;
	opacity: 1;	
}

65% {
	background: url(../img/grid-img4.png) center no-repeat;
	z-index: 4;
	opacity: 1;
}

70% {
	background: url(../img/grid-img4.png) center no-repeat;
	z-index: 0;
	opacity: 1;
}

85% {
	background: url(../img/grid-img5.png) center no-repeat;
	z-index: 5;
	opacity: 1;
}

90% {
	background: url(../img/grid-img5.png) center no-repeat;
	z-index: 0;
	opacity: 1;
}


100% {
	background: url(../img/grid-img1.png) center no-repeat;
	opacity: 1;
}
	
}

@-webkit-keyframes movetop {
	
	from {
		background: url(../img/arrow-top.png) center bottom no-repeat;
	}

	to {
		background: url(../img/arrow-top.png) center 50% no-repeat;
	}

}

@-moz-keyframes movetop {
	
	from {
		background: url(../img/arrow-top.png) center bottom no-repeat;
	}

	to {
		background: url(../img/arrow-top.png) center 50% no-repeat;
	}

}

@-o-keyframes movetop {
	
	from {
		background: url(../img/arrow-top.png) center bottom no-repeat;
	}

	to {
		background: url(../img/arrow-top.png) center 50% no-repeat;
	}

}

@keyframes movetop {
	
	from {
		background: url(../img/arrow-top.png) center bottom no-repeat;
	}

	to {
		background: url(../img/arrow-top.png) center 50% no-repeat;
	}

}


@-webkit-keyframes moveleft {
	
	from {
		background: url(../img/arrow-left.png) left center no-repeat;
	}

	to {
		background: url(../img/arrow-left.png) 50% center no-repeat;
	}

}

@-moz-keyframes moveleft {
	
	from {
		background: url(../img/arrow-left.png) left center no-repeat;
	}

	to {
		background: url(../img/arrow-left.png) 50% center no-repeat;
	}

}

@-o-keyframes moveleft {
	
	from {
		background: url(../img/arrow-left.png) left center no-repeat;
	}

	to {
		background: url(../img/arrow-left.png) 50% center no-repeat;
	}

}

@keyframes moveleft {
	
	from {
		background: url(../img/arrow-left.png) left center no-repeat;
	}

	to {
		background: url(../img/arrow-left.png) 50% center no-repeat;
	}

}