
.snake {
	
	background-image: url('/games/gold-rush/images/snake.png?t=1571111287');
	position: absolute;
	background-size: cover;
	
	height: 24px;
	
	width: 40px;
	
	left: 15%;
	animation: snake-blinking 5s steps(1, end) infinite;
	
}
.rocks .snake {
	display: none;
}
.rocks.broken .snake {
	display: block;
}
.rocks.broken .snake .hitbox {
	display: block;
	width: 150%;
	height: 50%;
	left: -50%;
	top: 65%;
}


.rocks .bomb {
    left: 25px;
    top: 10px;
	display: none;
	
}
.rocks.broken .bomb {
	display: block;
}
.rocks.broken .bomb .hitbox {
	display: block;
    width: 140%;
    height: 100%;
    left: -35%;
    top: 15%;
}

.snake.position1 {
	background-position-y: 0px;
}
.snake.position2 {
	background-position-y: -24px;
}
.snake.position3 {
	background-position-y: -48px;
}
.snake.position4 {
	background-position-y: -72px;
}
.snake.position5 {
	background-position-y: -96px;
}
.snake.position6 {
	background-position-y: -120px;
}
.snake.position7 {
	background-position-y: -144px;
}
.snake.position8 {
	background-position-y: -168px;
}
.snake.position9 {
	background-position-y: -192px;
}
.snake.position10 {
	background-position-y: -216px;
}
.snake.position11 {
	background-position-y: -240px;
}
.snake.position12 {
	background-position-y: -264px;
}
.snake.position13 {
	background-position-y: -288px;
}
.snake.position14 {
	background-position-y: -312px;
}
.snake.position15 {
	background-position-y: -336px;
}
.snake.position16 {
	background-position-y: -360px;
}
.snake.position17 {
	background-position-y: -384px;
}
.snake.position18 {
	background-position-y: -408px;
}
.snake.position19 {
	background-position-y: -432px;
}
.snake.position20 {
	background-position-y: -456px; 
}

.snake.position-all {
	animation: snake-all 5s steps(1, end) infinite;
}
.snake.hissing {
	animation: snake-hissing 1s steps(1, end) infinite;
}
.snake.striking {
	animation: snake-striking 0.5s steps(1, end);
}



@keyframes snake-all {
	0%   {background-position-y: 0px;   }  /* #1   */
	5%   {background-position-y: -24px; }  /* #2   */
	10%  {background-position-y: -48px; }  /* #3   */
	15%  {background-position-y: -72px; }  /* #4   */
	20%  {background-position-y: -96px; }  /* #5   */
	25%  {background-position-y: -120px;}  /* #6   */
	30%  {background-position-y: -144px;}  /* #7   */
	35%  {background-position-y: -168px;}  /* #8   */
	40%  {background-position-y: -192px;}  /* #9   */
	45%  {background-position-y: -216px;}  /* #10  */
	50%  {background-position-y: -240px;}  /* #11  */
	55%  {background-position-y: -264px;}  /* #12  */
	60%  {background-position-y: -288px;}  /* #13  */
	65%  {background-position-y: -312px;}  /* #14  */
	70%  {background-position-y: -336px;}  /* #15  */
	75%  {background-position-y: -360px;}  /* #16  */
	80%  {background-position-y: -384px;}  /* #17  */
}

/*
frames
4,5,6,7,8,5,4
*/
@keyframes snake-hissing {
	0%   {background-position-y: 0px;   }
	5%   {background-position-y: -48px; }
	10%  {background-position-y: -72px; }
	15%  {background-position-y: -96px; }
	20%  {background-position-y: -120px;}
	25%  {background-position-y: -144px;}
	30%  {background-position-y: -168px;}
	35%  {background-position-y: -96px; }
	40%  {background-position-y: -72px; }
	45%  {background-position-y: -96px; }
	50%  {background-position-y: -120px;}
	55%  {background-position-y: -144px;}
	60%  {background-position-y: -168px;}
	65%  {background-position-y: -96px; }
	70%  {background-position-y: -72px; }
	75%  {background-position-y: -48px; }
	80%  {background-position-y: 0px;   }
	95%  {background-position-y: -24px; }
}



/*
frames
1,9,10,11,12,13,14,15,16,17
*/
@keyframes snake-striking {
/*
	0%   {background-position-y: 0px;   }
	10%  {background-position-y: -192px;}
	20%  {background-position-y: -216px;}
	30%  {background-position-y: -240px;}
	40%  {background-position-y: -264px;}
*/	
	 0%  {background-position-y: -288px;}
	20%  {background-position-y: -312px;}
	40%  {background-position-y: -336px;}
	60%  
	{
		background-position-y: -360px;
		/*margin-left: -5px;*/
	}
	80%  {background-position-y: -384px;}
}


/*
frames
2,1
*/
@keyframes snake-blinking {
	5%   {background-position-y: -24px; }
	10%  {background-position-y: 0px; }
}

/*
.rocks.left .snake.left {
	transform: scale(-1, 1);
}

.rocks.left .snake.right {
	transform: scale(-1, 1);
}

.rocks.right .snake.left {
	transform: scale(1, 1);
}

.rocks.right .snake.right {
	transform: scale(-1, 1);
}

*/
.snake.right {
	transform: scale(-1, 1);
	filter: FlipH;
}
