.lt-slider-fish {
    margin-top: 30%;
}
.icon-home {
  width: $icon-home-width;
}
@-webkit-keyframes rotatingAnimation {
  0% {
    -webkit-transform: translate3d(0, 0, 0px) rotateY(0deg);
            transform: translate3d(0, 0, 0px) rotateY(0deg);
  }
  100% {
    -webkit-transform: translate3d(0, 0, 0px) rotateY(360deg);
            transform: translate3d(0, 0, 0px) rotateY(360deg);
  }
}
@keyframes rotatingAnimation {
  0% {
    -webkit-transform: translate3d(0, 0, 0px) rotateY(0deg);
            transform: translate3d(0, 0, 0px) rotateY(0deg);
  }
  100% {
    -webkit-transform: translate3d(0, 0, 0px) rotateY(360deg);
            transform: translate3d(0, 0, 0px) rotateY(360deg);
  }
}
@-webkit-keyframes swimmingAnimation {
  0% {
    -webkit-transform: translate3d(0, 0, 300px) scale(0.5) rotateY(-10deg);
            transform: translate3d(0, 0, 300px) scale(0.5) rotateY(-10deg);
  }
  100% {
    -webkit-transform: translate3d(0, 0, 300px) scale(0.5) rotateY(10deg);
            transform: translate3d(0, 0, 300px) scale(0.5) rotateY(10deg);
  }
}
@keyframes swimmingAnimation {
  0% {
    -webkit-transform: translate3d(0, 0, 300px) scale(0.5) rotateY(-10deg);
            transform: translate3d(0, 0, 300px) scale(0.5) rotateY(-10deg);
  }
  100% {
    -webkit-transform: translate3d(0, 0, 300px) scale(0.5) rotateY(10deg);
            transform: translate3d(0, 0, 300px) scale(0.5) rotateY(10deg);
  }
}
@-webkit-keyframes wiggle-end {
  0% {
    -webkit-transform: rotateY(-10deg);
            transform: rotateY(-10deg);
  }
  100% {
    -webkit-transform: rotateY(10deg);
            transform: rotateY(10deg);
  }
}
@keyframes wiggle-end {
  0% {
    -webkit-transform: rotateY(-10deg);
            transform: rotateY(-10deg);
  }
  100% {
    -webkit-transform: rotateY(10deg);
            transform: rotateY(10deg);
  }
}
@-webkit-keyframes wiggle-body {
  0% {
    -webkit-transform: rotateY(-10deg);
            transform: rotateY(-10deg);
  }
  100% {
    -webkit-transform: rotateY(10deg);
            transform: rotateY(10deg);
  }
}
@keyframes wiggle-body {
  0% {
    -webkit-transform: rotateY(-10deg);
            transform: rotateY(-10deg);
  }
  100% {
    -webkit-transform: rotateY(10deg);
            transform: rotateY(10deg);
  }
}
@-webkit-keyframes fish-lift {
  0% {
    -webkit-transform: translate(0px, 12px);
            transform: translate(0px, 12px);
  }
  100% {
    -webkit-transform: translate(0px, -12px);
            transform: translate(0px, -12px);
  }
}
@keyframes fish-lift {
  0% {
    -webkit-transform: translate(0px, 12px);
            transform: translate(0px, 12px);
  }
  100% {
    -webkit-transform: translate(0px, -12px);
            transform: translate(0px, -12px);
  }
}
@-webkit-keyframes fish-roll {
  0% {
    -webkit-transform: rotateX(-10deg);
            transform: rotateX(-10deg);
  }
  100% {
    -webkit-transform: rotateX(10deg);
            transform: rotateX(10deg);
  }
}
@keyframes fish-roll {
  0% {
    -webkit-transform: rotateX(-10deg);
            transform: rotateX(-10deg);
  }
  100% {
    -webkit-transform: rotateX(10deg);
            transform: rotateX(10deg);
  }
}
/*
  Fish Styling
*/
.fish-wrapper {
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-animation: rotatingAnimation 10000ms infinite linear;
          animation: rotatingAnimation 10000ms infinite linear;
}

.fish-container {
  position: absolute;
  z-index: 500;
  left: 50%;
  top: 50%;
  -webkit-perspective: 10000px;
          perspective: 10000px;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
}
.fish-container .fish-body {
  background-image: url(https://s3-ap-southeast-2.amazonaws.com/mephystoprojects/codepen/goldfish-sprite.png);
  background-position: -208px 0px;
  width: 312px;
  height: 169px;
  top: -84.5px;
  left: -156px;
}
.fish-container .fish-body.front {
  z-index: 300;
  -webkit-transform-origin: 100% 50%;
          transform-origin: 100% 50%;
  -webkit-transform: rotateY(5deg);
          transform: rotateY(5deg);
}
.fish-container .fish-body.back {
  z-index: 100;
  -webkit-transform-origin: 100% 50%;
          transform-origin: 100% 50%;
  -webkit-transform: rotateY(-5deg);
          transform: rotateY(-5deg);
}
.fish-container .fish-top-fin {
  background-image: url(https://s3-ap-southeast-2.amazonaws.com/mephystoprojects/codepen/goldfish-sprite.png);
  background-position: 0px -263px;
  width: 150px;
  height: 124px;
  left: -157px;
  top: -176px;
  -webkit-transform-origin: 50% 100%;
          transform-origin: 50% 100%;
  -webkit-animation: fish-roll 1750ms infinite alternate ease-in-out;
          animation: fish-roll 1750ms infinite alternate ease-in-out;
}
.fish-container .fish-back-bottom-fin {
  background-image: url(https://s3-ap-southeast-2.amazonaws.com/mephystoprojects/codepen/goldfish-sprite.png);
  background-position: -208px -169px;
  width: 73px;
  height: 68px;
  left: -106px;
  top: 61px;
}
.fish-container .fish-back-bottom-fin.front {
  z-index: 300;
  -webkit-transform-origin: 50% 0%;
          transform-origin: 50% 0%;
  -webkit-animation: fish-roll 1750ms infinite alternate ease-in-out;
          animation: fish-roll 1750ms infinite alternate ease-in-out;
}
.fish-container .fish-back-bottom-fin.back {
  z-index: 100;
  -webkit-transform-origin: 50% 0%;
          transform-origin: 50% 0%;
  animation: fish-roll 1750ms infinite alternate-reverse ease-in-out;
}
.fish-container .fish-back-fin {
  background-image: url(https://s3-ap-southeast-2.amazonaws.com/mephystoprojects/codepen/goldfish-sprite.png);
  background-position: 0px 0px;
  width: 208px;
  height: 263px;
  left: -320px;
  top: -91px;
  background-position: 0% 0;
  -webkit-transform-origin: 105% 0;
          transform-origin: 105% 0;
  -webkit-animation: wiggle-end 200ms infinite alternate ease-in-out;
          animation: wiggle-end 200ms infinite alternate ease-in-out;
}
.fish-container .fish-front-bottom-fin {
  background-image: url(https://s3-ap-southeast-2.amazonaws.com/mephystoprojects/codepen/goldfish-sprite.png);
  background-position: -281px -169px;
  width: 51px;
  height: 65px;
  left: -1px;
  top: 46px;
}
.fish-container .fish-front-bottom-fin.front {
  z-index: 300;
  -webkit-transform-origin: 50% 0%;
          transform-origin: 50% 0%;
  transform-origin: 50% 0%;
  -webkit-animation: fish-roll 1750ms infinite alternate ease-in-out;
          animation: fish-roll 1750ms infinite alternate ease-in-out;
}
.fish-container .fish-front-bottom-fin.back {
  z-index: 100;
  -webkit-transform-origin: 50% 0%;
          transform-origin: 50% 0%;
  transform-origin: 50% 0%;
  animation: fish-roll 1750ms infinite alternate-reverse ease-in-out;
}

.fish-parts {
  transition: 250ms;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-animation: swimmingAnimation 1000ms infinite alternate ease-in-out;
          animation: swimmingAnimation 1000ms infinite alternate ease-in-out;
}
.fish-parts > div {
  position: absolute;
  z-index: 200;
}