/* CSS Document */
body {
	background: #e3dcae;	
}
/* === CONTENT ===*/

#content {
	padding: 1em;
}

/*=== CSS ANIMATION ===*/
@keyframes creatureLogo {
	from { background-position: 0px; }
	to { background-position: -7680px; }
}
@-webkit-keyframes creatureLogo {
	from { background-position: 0px; }
	to { background-position: -7680px; }
}
@keyframes creatureFadeBlur {
	0% { -webkit-filter: blur(0px); opacity: 0; }
	50% { -webkit-filter: blur(0px); opacity: 1; }
	100% { -webkit-filter: blur(2px); opacity: 1; }
}
@-webkit-keyframes creatureFadeBlur {
	0% { -webkit-filter: blur(0px); opacity: 0; }
	50% { -webkit-filter: blur(0px); opacity: 1; }
	100% { -webkit-filter: blur(2px); opacity: 1; }
}
@keyframes header {
	from { transform: translate3d(0px, -100px, 0px); }
	to { transform: translate3d(0px, 0px, 0px); }
}
@-webkit-keyframes header {
	0% { -webkit-transform: translate3d(0, -100px, 0); }
	100% { -webkit-transform: translate3d(0, 0, 0); }
}
/*@-moz-keyframes creatureLogo {
   	0% { background-position:  0px  0px; }
   	14.2857143% { background-position: -2292px 0px; }
	28.5714286% { background-position: 0px -278px; }
	42.8571429% { background-position: -2292px -278px; }
	57.1428571% { background-position: 0px -556px; }
	71.4285714% { background-position: -2292px -556px; }
	85.7142857% { background-position: 0px -834px; }
	100% { background-position: -2292px -834px; }
}*/
/* === CONTENT ===*/
header {
	background: #8d4c36;	
	padding: 1em;
	height: 20px;
	box-shadow: 0px 2px 5px rgba(10, 10, 10, 0.2);
	-webkit-transform: translate3d(0, -100px, 0);
	
	-webkit-animation-name: header;
	-webkit-animation-duration: 1s;
	-webkit-animation-delay: 1s;
	-webkit-animation-iteration-count: 1;
	-webkit-animation-fill-mode: forwards;
	
	animation: header 1s 1s 1 forwards;
	/*-webkit-animation: header 0.5s 0.5s 1 ease-in-out forwards;
	animation: header 0.5s 0.5s 1 ease-in-out forwards;*/
}
/*=== HERO PAGE ===*/
#creature {
	background-image:url(../_images/hero.png);
	margin: 0 auto;
	background-repeat: no-repeat;
	background-position: center;
	height: 750px;	
	opacity: 0;
	-webkit-animation: creatureFadeBlur 4s 1.5s 1 forwards;
}
#creature-logo {
	margin: 0 auto;
	height: 186px;
	width: 512px;
	margin-top: -530px;
	position: relative;
	background-image: url(../_images/sprites12fps-frame/creature-logo-SPRITESHEET-12fps-frame-1row.png);	
	background-repeat: no-repeat;
	
	-webkit-animation-name: creatureLogo;
	animation-name: creatureLogo;
	
	-webkit-animation-direction: normal;
	-webkit-animation: creatureLogo 1.2s 2s steps(15) 1 forwards;
       /*-moz-animation: creatureLogo 1.2s 2s steps(15) 1 forwards;
        -ms-animation: creatureLogo 1.2s 2s steps(15) 1 forwards;
         -o-animation: creatureLogo 1.2s 2s steps(15) 1 forwards;
            animation: creatureLogo 1.2s 2s steps(15) 1 forwards;
			
	-webkit-animation-play-state: running;
			
}