.silhouette-fish{
	transform-origin: 13px 32px;
}

.silhouette-fish .fish-wrapper{
  width: 45px;
  height: 108px;
}

.silhouette-fish .fish-normal{
  width: 30px;
  height: 108px;
  background-image: url("../assets/silhouette/fish_normal.png");
  animation: silhouette-normal-animation .5s steps(16) infinite; 
}

.silhouette-fish .fish-turn-soft{
  width: 34px;
  height: 108px;
  background-image: url("../assets/silhouette/turn_soft.png");
  animation: silhouette-turn-soft-animation .5s steps(9); 
}

.silhouette-fish .fish-turn-medium{
  width: 38px;
  height: 108px;
  background-image: url("../assets/silhouette/turn_medium.png");
  animation: silhouette-turn-medium-animation .5s steps(9); 
}

.silhouette-fish .fish-turn-hard{
  width: 50px;
  height: 108px;
  background-image: url("../assets/silhouette/turn_hard.png");
  animation: silhouette-turn-hard-animation .5s steps(8); 
}

/* <-- Fish Fin --> */
.silhouette-fish .fish-fin{
  width: 14px;
  height: 16px;
  background-image: url("../assets/silhouette/fin.png");
  animation: silhouette-fin-animation .5s steps(15) infinite;
}

.silhouette-fish .fish-fin-left{
	position:absolute;
	top:18%;
	left:-20%;	
}

.silhouette-fish .fish-fin-right{
	position:absolute;
	top:18%;
	left:47%;
	transform:scale(-1,1)
}

@keyframes silhouette-normal-animation {
	from { background-position: 0px; }
	to { background-position: -480px; } /* <-- width of spritesheet*/
}

@keyframes silhouette-turn-soft-animation {
	from { background-position: 0px; }
	to { background-position: -306px; } /* <-- width of spritesheet*/
}

@keyframes silhouette-turn-medium-animation {
	from { background-position: 0px; }
	to { background-position: -342px; } /* <-- width of spritesheet*/
}

@keyframes silhouette-turn-hard-animation {
	from { background-position: 0px; }
	to { background-position: -400px; } /* <-- width of spritesheet*/
}

@keyframes silhouette-fin-animation {
	from { background-position: 0px; }
	to { background-position: -210px; } /* <-- width of spritesheet*/
}