@charset "utf-8";
/* CSS Document */

/*CSS ANIMATION
======================*/


#wraper #head, #wraper #wing-one span, #wraper #wing-two span, #left-eye .eyebrow span, #right-eye .eyebrow span, #wraper .eye-pupil, #wraper .legs-a, #wraper .legs-b{
	 -webkit-transform:translate3d(0,0,0);
	 -webkit-transform:translate3d(0,0,0);
	 -o-transform:translate3d(0,0,0);
	 -ms-transform:translate3d(0,0,0);
	  transform:translate3d(0,0,0);
}


@-webkit-keyframes  rotate-wing-left {
	0%{-webkit-transform: rotate(-20deg);}
	100%{-webkit-transform: rotate(15deg);}
}
@-webkit-keyframes rotate-wing-right {
	0%{-webkit-transform: rotate(15deg);}
	100%{-webkit-transform: rotate(-10deg);}

}

@-webkit-keyframes rotate-eyebrow {
	
	0%{-webkit-transform: translate(0, 0) rotate(0deg);}
	100%{-webkit-transform: translate(2px,-2px) rotate(15deg);}

}
@-webkit-keyframes rotate-eyebrow-right{
		0%{-webkit-transform: translate(0, 0) rotate(0deg);}
	100%{-webkit-transform: translate(2px,-2px) rotate(-15deg);}

}

@-webkit-keyframes eye-pupil{
	0%{-webkit-transform: translate(3px, 0px)}
	100%{-webkit-transform: translate(-8px,-2px)}

}

@-webkit-keyframes eye-pupil-r {
	0%{-webkit-transform: translate(8px, -2px)}
	100%{-webkit-transform: translate(-3px,0px)}

}


@-webkit-keyframes leg-a{
	0%{-webkit-transform: translate(3px, 1px) rotate(-1deg)}
	100%{-webkit-transform: translate(-3px,-1px) rotate(1deg)}

}

@-webkit-keyframes leg-b{
	0%{-webkit-transform: translate(3px, 1px) rotate(1deg)}
	100%{-webkit-transform: translate(-3px,-1px) rotate(-1deg)}
}

/*
#wraper #head {
	-webkit-animation-name: rotate-head;
	-webkit-animation-duration: 4s;
	-webkit-animation-iteration-count: infinite;
	-webkit-transform-origin: 50% 50%;
 -webkit-animation-timing-function: linear;
 

}*/

#wraper #wing-one span {	
	-webkit-transform:rotate(20deg);
	-webkit-transform-origin:100% 100%;
	-webkit-animation: rotate-wing-left 800ms ease-in-out infinite alternate; 
	z-index:1;
}

#wraper #wing-two span {	
	-webkit-transform:rotate(-15deg);
	-webkit-transform-origin:left bottom;
	-webkit-animation: rotate-wing-right 800ms ease-in-out infinite alternate; 
	z-index:1;
}

#left-eye .eyebrow span{
	-webkit-transform:rotate(5deg);
	-webkit-transform-origin: right 50%;
	-webkit-animation:  rotate-eyebrow 2s ease-in-out infinite alternate; 
}

#right-eye .eyebrow span {
	-webkit-transform:rotate(-5deg);
	/*-webkit-animation-name: rotate-eyebrow-right;
	-webkit-animation-duration: 7s;
	-webkit-animation-iteration-count: infinite;*/
	-webkit-transform-origin: left 50%;	
	-webkit-animation:   rotate-eyebrow-right 2s ease-in-out infinite alternate; 
}
#wraper .eye-pupil {
	/*-webkit-animation-name: eye-pupil;
	-webkit-animation-duration: 7s;
	-webkit-animation-iteration-count: infinite;*/
	-webkit-transform-origin: 0 0;
	-webkit-animation: eye-pupil 2s linear infinite alternate; 
}
#wraper #right-eye .eye-pupil {
	/*-webkit-animation-name: eye-pupil;
	-webkit-animation-duration: 7s;
	-webkit-animation-iteration-count: infinite;*/
	-webkit-transform-origin: 0 0;
	-webkit-animation: eye-pupil-r 2s linear infinite alternate; 
}

#wraper .legs-a {
/*	-webkit-animation-name: leg-a;
	-webkit-animation-duration: 5s;
	-webkit-animation-iteration-count: infinite;*/
	-webkit-transform-origin: 0 0;
	
	-webkit-transform:translate(5px,0) rotate(1deg);
	-webkit-animation: leg-a 2s linear infinite alternate; 
}
#wraper .legs-b {
	/*-webkit-animation-name: leg-b;
	-webkit-animation-duration: 5s;
	-webkit-animation-iteration-count: infinite;*/
	-webkit-transform-origin: 0 0;
	
	-webkit-transform:translate(5px,0) rotate(-1deg);
	-webkit-animation: leg-b 2s linear infinite alternate; 
}





/*CSS STYLES
======================*/
html{
	margin: 0;
	padding: 0;
	background: url(images/bg2.jpg) repeat 0 0;
	min-height: 806px;
	height: 100%;
}
body {	
	margin: 0;
	padding: 0;
	font: normal 12px/20px Arial, Helvetica, sans-serif;
	color:#000;
	min-height: 806px;
   	position: relative;
	height: 100%;
}
	#wraper {
		position: relative;
		height: 712px;
		padding-top:20px;
	}
		.content {
			width: 712px;
			height:712px;
			position:relative;
			padding: 0;
			margin: 0 auto;
			background:url(images/bg.png) no-repeat center 0;
		}
			#head {
				width: 682px;
				height: 500px;
				margin-left: 20px;
				position: relative;
				padding: 0;
				z-index: 10;
			}
				
			#skull {
				background:url(images/head.png) no-repeat 0 0;
				width: 241px;
				height: 310px;
				position: relative;
				top: 50px;
				left: 221px;
				z-index: 300;
				display:block;
			
			}
			#wing-one span{
				width: 204px;
				height: 131px;
				position: absolute;
				top: 160px;
				left: 84px;
				background:url(images/wing-l.png) no-repeat 0 0;
			}
			#wing-two span {
				width: 204px;
				height: 131px;
				position: absolute;
				top: 160px;
				right: 87px;
				background:url(images/wing-r.png) no-repeat 0 0;
			}
#left-eye {
	left: 54px;
	position: absolute;
	top: 223px;
	z-index:301
}
#right-eye {
	position: absolute;
	right: 57px;
	top: 223px;
	z-index:301

}
	.eyebrow span{
		position:absolute;
		top:-20px;
		height:25px;
		width:51px;
	}
	#left-eye .eyebrow span{
		background:url(images/eyebrow-l.png) no-repeat 0 0;
		left:5px;
	}
	#right-eye .eyebrow span{
		background:url(images/eyebrow-r.png) no-repeat 0 0;
		left:-3px;
	}

	.eyeball {
		height: 31px;
		width: 54px;
		position: relative;
	}
	#left-eye .eyeball{
		background:url(images/eye-l.png) no-repeat 0 0;
	}
	#right-eye .eyeball{
		background:url(images/eye-r.png) no-repeat 0 0;
	}

		.eye-pupil {
			position: absolute;
			top: 8px;
			height: 21px;
			width: 17px;
		}
		#left-eye .eye-pupil {
			background:url(images/eye.png) no-repeat 0 0;
		}
		#right-eye .eye-pupil {
			background:url(images/eye-two.png) no-repeat 0 0;
		}
		#left-eye .eye-pupil {
			left:26px;
		}
		#right-eye .eye-pupil {
			left:10px;
		}
			/*.pupil-one {
				background:url(images/eye-p1.png) no-repeat 0 0;
				height:21px;
				width:13px;
				position:absolute;
			}
			#left-eye .pupil-one {
				right:-4px;
			}
			#right-eye .pupil-one {
				left:-4px;
			}
			.pupil-two {
				background:url(images/eye-p3.png) no-repeat 0 0;
				position:absolute;
				height:7px;
				width:7px;
				top:5px;
			}
			#left-eye .pupil-two {
				left:-1px;
			}
			#right-eye .pupil-two {
				left:-5px;
			}*/

#legs {
	position:relative;
	display:block;
	width:365px;
	height:180px;
	float:left;
	margin:0 0 0 156px;
	z-index:100;
}
	.legs-a span{
		width: 343px;
		height: 164px;
		position: absolute;
		top: -7px;
		left: 20px;
		background:url(images/legs_one.png) no-repeat 0 0;
	}
	.legs-b span {
		width: 334px;
		height: 169px;
		position: absolute;
		top: -5px;
		right: -15px;
		background:url(images/legs_two.png) no-repeat 0 0;
	}
.eror-font {
	width:700px;
	margin:0 auto;
	text-align:center;
	position:relative;
	top:-47px;
}
.four-four {
	font-size:129px;
	margin:0 0 8px 0;
	display:block;
}
.info-one, .info-two {
	font-size:19px;
	display:block
}
.info-one {
	margin: 0 0 9px 0;
}

/*Menu*/
#bottom {
	width:100%;	
	position: absolute;
	left: 0;
	bottom: 0;
    height: 56px;
	background:url(images/nav-bg.png) repeat-x 0 0;
}
/*	.bot-l {
		float:left;
		background:url(images/bottom-l.png) no-repeat right 0;
		height:64px;
	}
	.bot-r {
		float:right;
		background:url(images/bottom-r.png) no-repeat 0 0;
		height:64px;
	}*/
	#nav {
		position:absolute;
	}
		#nav ul {
			margin:22px auto 0;
			float:left;
			height:31px;
			padding: 0px 0 0 0;
		}
	
			#nav ul li {
				list-style:none;
				float:left;
				background:url(images/bullet.png) no-repeat 0 9px;
				padding:0px 9px 10px 12px;
			}
			#nav ul li:first-child {
				background:none;
				padding:0px 10px 10px 3px;
			}
				#nav ul li a {
					color:#fff;
					font-weight:bold;
					text-decoration:none;
					-o-transition: color 0.3s;
					 -webkit-transition:color 0.3s;
					 -webkit-transition: color 0.3s;
					 transition: color 0.3s;
				}
				#nav ul li.act a {
					color:#808080
				}
				#nav ul li a:hover {
					color:#808080;
				}


		.search {
			float:left;
			margin:21px 0 0 11px;
		}
			.i-h {
				background:url(images/input.png) no-repeat 0 0;
				width:141px;
				height:17px;
				padding:4px 0 0 0;
			}
				.i-h input {
					background:none;
					border:none;
					margin:0 0 0 6px;
					width:114px;
					color:#a3a3a3;
					font-size:10px;
					float:left;
				}
			.the-button {
				background:url(images/search.png) no-repeat 0 0;
				width:12px;
				height:13px;
				float:right;
				margin:0 4px 0 0;
			}
			.the-button:hover {
				background-position:0 -17px;
			}