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

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

.fish3-fish .fish-normal{
  width: 30px;
  height: 108px;
  background-image: url("../images/koiActivity/fish3/fish_normal.svg");
  animation: fish3-normal-animation .5s steps(16) infinite;
}

.fish3-fish .fish-turn-soft{
  width: 34px;
  height: 108px;
  background-image: url("../images/koiActivity/fish3/turn_soft.svg");
  animation: fish3-turn-soft-animation .5s steps(9);
}

.fish3-fish .fish-turn-medium{
  width: 38px;
  height: 108px;
  background-image: url("../images/koiActivity/fish3/turn_medium.svg");
  animation: fish3-turn-medium-animation .5s steps(9);
}

.fish3-fish .fish-turn-hard{
  width: 50px;
  height: 108px;
  background-image: url("../images/koiActivity/fish3/turn_hard.svg");
  animation: fish3-turn-hard-animation .5s steps(8);
}

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

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

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

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

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

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

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

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