/*!
 * Sprocket v1.0 (http://sprocket.bigfish.tv)
 * Copyright 2014 Bigfish
 * Licensed under MIT
 */
/*
 * Mixins
 */
/*
 * Utility Classes
 */
.animate {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
.animate-fast {
  -webkit-animation-duration: 0.5s;
  animation-duration: 0.5s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
.animate-slow {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
.animate-alternate {
  -webkit-animation-direction: alternate;
  animation-direction: alternate;
}
.animate-repeat {
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}
/*
 * Animations
 */
@-webkit-keyframes bounce {
  0%,
  20%,
  50%,
  80%,
  100% {
    -webkit-transform: translateY(0);
  }
  40% {
    -webkit-transform: translateY(-30px);
  }
  60% {
    -webkit-transform: translateY(-15px);
  }
}
@keyframes bounce {
  0%,
  20%,
  50%,
  80%,
  100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-30px);
  }
  60% {
    transform: translateY(-15px);
  }
}
.bounce {
  -webkit-animation-name: bounce;
  animation-name: bounce;
}
/* Fade In Down */
@-webkit-keyframes fade-in-down {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-30px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
  }
}
@keyframes fade-in-down {
  0% {
    opacity: 0;
    transform: translateY(-30px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
.fade-in-down {
  -webkit-animation-name: fade-in-down;
  animation-name: fade-in-down;
}
/* Fade In Up */
@-webkit-keyframes fade-in-up {
  0% {
    opacity: 0;
    -webkit-transform: translateY(10px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
  }
}
@keyframes fade-in-up {
  0% {
    opacity: 0;
    transform: translateY(10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
.fade-in-up {
  -webkit-animation-name: fade-in-up;
  animation-name: fade-in-up;
}
/* Fade In */
@-webkit-keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.fade-in {
  -webkit-animation-name: fade-in;
  animation-name: fade-in;
}
/* Fade Out */
@-webkit-keyframes fade-out {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes fade-out {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
.fade-out {
  -webkit-animation-name: fade-out;
  animation-name: fade-out;
}
/* Spin */
@-webkit-keyframes half-spin {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(180deg);
  }
}
@keyframes half-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(180deg);
  }
}
.half-spin {
  -webkit-animation-name: half-spin;
  animation-name: half-spin;
}
@-webkit-keyframes pop-in {
  0% {
    -webkit-transform: scale(0.8);
  }
  100% {
    -webkit-transform: scale(1);
  }
}
@keyframes pop-in {
  0% {
    transform: scale(0.8);
  }
  100% {
    transform: scale(1);
  }
}
.pop-in {
  -webkit-animation-name: pop-in;
  animation-name: pop-in;
}
@-webkit-keyframes pop-out {
  0% {
    -webkit-transform: scale(1.2);
  }
  100% {
    -webkit-transform: scale(1);
  }
}
@keyframes pop-out {
  0% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
.pop-out {
  -webkit-animation-name: pop-out;
  animation-name: pop-out;
}
@-webkit-keyframes pop {
  0% {
    -webkit-transform: scale(1);
  }
  50% {
    -webkit-transform: scale(1.2);
  }
  100% {
    -webkit-transform: scale(1);
  }
}
@keyframes pop {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
.pop {
  -webkit-animation-name: pop;
  animation-name: pop;
}
/* Indicator */
@-webkit-keyframes indicator {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.75;
  }
  65% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}
@keyframes indicator {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.75;
  }
  65% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}
.indicator {
  -webkit-animation-name: indicator;
  animation-name: indicator;
}
@-webkit-keyframes move-down {
  0% {
    -webkit-transform: translateY(0);
  }
  100% {
    -webkit-transform: translateY(20px);
  }
}
@keyframes move-down {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(20px);
  }
}
.move-down {
  -webkit-animation-name: move-down;
  animation-name: move-down;
}
@-webkit-keyframes move-up {
  0% {
    -webkit-transform: translateY(0);
  }
  100% {
    -webkit-transform: translateY(-20px);
  }
}
@keyframes move-up {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-20px);
  }
}
.move-up {
  -webkit-animation-name: move-up;
  animation-name: move-up;
}
/* Orbit */
@-webkit-keyframes orbit {
  from {
    -webkit-transform: rotate(0deg) translate(-10em) rotate(270deg);
  }
  to {
    -webkit-transform: rotate(360deg) translate(-10em) rotate(270deg);
  }
}
@keyframes orbit {
  from {
    transform: rotate(0deg) translate(-10em) rotate(270deg);
  }
  to {
    transform: rotate(360deg) translate(-10em) rotate(270deg);
  }
}
.orbit {
  -webkit-animation-name: orbit;
  animation-name: orbit;
}
/* Pulse */
@-webkit-keyframes pulse {
  0% {
    box-shadow: none;
  }
  10% {
    box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.3);
  }
  95% {
    box-shadow: 0 0 0 25px rgba(0, 0, 0, 0.1);
  }
  100% {
    box-shadow: 0 0 0 25px rgba(0, 0, 0, 0);
  }
}
@keyframes pulse {
  0% {
    box-shadow: none;
  }
  10% {
    box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.3);
  }
  95% {
    box-shadow: 0 0 0 25px rgba(0, 0, 0, 0.1);
  }
  100% {
    box-shadow: 0 0 0 25px rgba(0, 0, 0, 0);
  }
}
.pulse {
  -webkit-animation-name: pulse;
  animation-name: pulse;
}
/* Ripple */
@-webkit-keyframes ripple {
  0% {
    box-shadow: none;
  }
  10% {
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
  }
  40% {
    box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.1);
  }
  100% {
    box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);
  }
}
@-moz-keyframes ripple {
  0% {
    box-shadow: none;
  }
  10% {
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
  }
  40% {
    box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.1);
  }
  100% {
    box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);
  }
}
@keyframes ripple {
  0% {
    box-shadow: none;
  }
  10% {
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
  }
  40% {
    box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.1);
  }
  100% {
    box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);
  }
}
.ripple {
  -webkit-animation-name: ripple;
  animation-name: ripple;
}
/* Spin */
@-webkit-keyframes spin {
  from {
    -webkit-transform: rotate(0deg);
    -webkit-transform-origin: 50% 50%;
  }
  to {
    -webkit-transform: rotate(360deg);
    -webkit-transform-origin: 50% 50%;
  }
}
@-moz-keyframes spin {
  from {
    -moz-transform: rotate(0deg);
    -moz-transform-origin: 50% 50%;
  }
  to {
    -moz-transform: rotate(360deg);
    -moz-transform-origin: 50% 50%;
  }
}
@keyframes spin {
  from {
    transform: rotate(0deg);
    transform-origin: 50% 50%;
  }
  to {
    transform: rotate(360deg);
    transform-origin: 50% 50%;
  }
}
.spin {
  -webkit-animation-name: spin;
  animation-name: spin;
}
@-webkit-keyframes swing {
  20%,
  40%,
  60%,
  80%,
  100% {
    -webkit-transform-origin: top center;
  }
  20% {
    -webkit-transform: rotate(15deg);
  }
  40% {
    -webkit-transform: rotate(-10deg);
  }
  60% {
    -webkit-transform: rotate(5deg);
  }
  80% {
    -webkit-transform: rotate(-5deg);
  }
  100% {
    -webkit-transform: rotate(0deg);
  }
}
@keyframes swing {
  20%,
  40%,
  60%,
  80%,
  100% {
    transform-origin: top center;
  }
  20% {
    transform: rotate(15deg);
  }
  40% {
    transform: rotate(-10deg);
  }
  60% {
    transform: rotate(5deg);
  }
  80% {
    transform: rotate(-5deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
.swing {
  -webkit-animation-name: swing;
  animation-name: swing;
}
@keyframes wiggle {
  0% {
    transform: rotate(-4deg);
  }
  50% {
    transform: rotate(4deg);
  }
  100% {
    transform: rotate(-4deg);
  }
}
@-webkit-keyframes wiggle {
  0% {
    -webkit-transform: rotate(-4deg);
  }
  50% {
    -webkit-transform: rotate(4deg);
  }
  100% {
    -webkit-transform: rotate(-4deg);
  }
}
.wiggle {
  -webkit-animation-name: wiggle;
  animation-name: wiggle;
}