.pf-animated {
  animation-duration: 1s;
  animation-fill-mode: both
}

@keyframes pf-bounceInDown {
  60%, 75%, 90%, from, to {
    animation-timing-function: cubic-bezier(.215, .61, .355, 1)
  }
  0% {
    opacity: 0;
    transform: translate3d(0, -3000px, 0)
  }
  60% {
    opacity: 1;
    transform: translate3d(0, 25px, 0)
  }
  75% {
    transform: translate3d(0, -10px, 0)
  }
  90% {
    transform: translate3d(0, 5px, 0)
  }
  to {
    transform: none
  }
}

.bounceInDown {
  animation-name: pf-bounceInDown
}

@keyframes pf-bounceInLeft {
  60%, 75%, 90%, from, to {
    animation-timing-function: cubic-bezier(.215, .61, .355, 1)
  }
  0% {
    opacity: 0;
    transform: translate3d(-3000px, 0, 0)
  }
  60% {
    opacity: 1;
    transform: translate3d(25px, 0, 0)
  }
  75% {
    transform: translate3d(-10px, 0, 0)
  }
  90% {
    transform: translate3d(5px, 0, 0)
  }
  to {
    transform: none
  }
}

.bounceInLeft {
  animation-name: pf-bounceInLeft
}

@keyframes pf-bounceInRight {
  60%, 75%, 90%, from, to {
    animation-timing-function: cubic-bezier(.215, .61, .355, 1)
  }
  from {
    opacity: 0;
    transform: translate3d(3000px, 0, 0)
  }
  60% {
    opacity: 1;
    transform: translate3d(-25px, 0, 0)
  }
  75% {
    transform: translate3d(10px, 0, 0)
  }
  90% {
    transform: translate3d(-5px, 0, 0)
  }
  to {
    transform: none
  }
}

.bounceInRight {
  animation-name: pf-bounceInRight
}

@keyframes pf-bounce {
  20%, 53%, 80%, from, to {
    animation-timing-function: cubic-bezier(.215, .61, .355, 1);
    transform: translate3d(0, 0, 0)
  }
  40%, 43% {
    animation-timing-function: cubic-bezier(.755, .05, .855, .06);
    transform: translate3d(0, -30px, 0)
  }
  70% {
    animation-timing-function: cubic-bezier(.755, .05, .855, .06);
    transform: translate3d(0, -15px, 0)
  }
  90% {
    transform: translate3d(0, -4px, 0)
  }
}

.bounce {
  animation-name: pf-bounce;
  transform-origin: center bottom
}

@keyframes pf-bounceIn {
  20%, 40%, 60%, 80%, from, to {
    animation-timing-function: cubic-bezier(.215, .61, .355, 1)
  }
  0% {
    opacity: 0;
    transform: scale3d(.3, .3, .3)
  }
  20% {
    transform: scale3d(1.1, 1.1, 1.1)
  }
  40% {
    transform: scale3d(.9, .9, .9)
  }
  60% {
    opacity: 1;
    transform: scale3d(1.03, 1.03, 1.03)
  }
  80% {
    transform: scale3d(.97, .97, .97)
  }
  to {
    opacity: 1;
    transform: scale3d(1, 1, 1)
  }
}

.bounceIn {
  animation-name: pf-bounceIn
}

@keyframes pf-bounceInDown {
  60%, 75%, 90%, from, to {
    animation-timing-function: cubic-bezier(.215, .61, .355, 1)
  }
  0% {
    opacity: 0;
    transform: translate3d(0, -3000px, 0)
  }
  60% {
    opacity: 1;
    transform: translate3d(0, 25px, 0)
  }
  75% {
    transform: translate3d(0, -10px, 0)
  }
  90% {
    transform: translate3d(0, 5px, 0)
  }
  to {
    transform: none
  }
}

.bounceInDown {
  animation-name: pf-bounceInDown
}

@keyframes pf-bounceInLeft {
  60%, 75%, 90%, from, to {
    animation-timing-function: cubic-bezier(.215, .61, .355, 1)
  }
  0% {
    opacity: 0;
    transform: translate3d(-3000px, 0, 0)
  }
  60% {
    opacity: 1;
    transform: translate3d(25px, 0, 0)
  }
  75% {
    transform: translate3d(-10px, 0, 0)
  }
  90% {
    transform: translate3d(5px, 0, 0)
  }
  to {
    transform: none
  }
}

.bounceInLeft {
  animation-name: pf-bounceInLeft
}

@keyframes pf-bounceInRight {
  60%, 75%, 90%, from, to {
    animation-timing-function: cubic-bezier(.215, .61, .355, 1)
  }
  from {
    opacity: 0;
    transform: translate3d(3000px, 0, 0)
  }
  60% {
    opacity: 1;
    transform: translate3d(-25px, 0, 0)
  }
  75% {
    transform: translate3d(10px, 0, 0)
  }
  90% {
    transform: translate3d(-5px, 0, 0)
  }
  to {
    transform: none
  }
}

.bounceInRight {
  animation-name: pf-bounceInRight
}

@keyframes pf-bounceInUp {
  60%, 75%, 90%, from, to {
    animation-timing-function: cubic-bezier(.215, .61, .355, 1)
  }
  from {
    opacity: 0;
    transform: translate3d(0, 3000px, 0)
  }
  60% {
    opacity: 1;
    transform: translate3d(0, -20px, 0)
  }
  75% {
    transform: translate3d(0, 10px, 0)
  }
  90% {
    transform: translate3d(0, -5px, 0)
  }
  to {
    transform: translate3d(0, 0, 0)
  }
}

.bounceInUp {
  animation-name: pf-bounceInUp
}

@keyframes pf-fadeIn {
  from {
    opacity: 0
  }
  to {
    opacity: 1
  }
}

.fadeIn {
  animation-name: pf-fadeIn
}

@keyframes pf-fadeInDown {
  from {
    opacity: 0;
    transform: translate3d(0, -100%, 0)
  }
  to {
    opacity: 1;
    transform: none
  }
}

.fadeInDown {
  animation-name: pf-fadeInDown
}

@keyframes pf-fadeInDownBig {
  from {
    opacity: 0;
    transform: translate3d(0, -2000px, 0)
  }
  to {
    opacity: 1;
    transform: none
  }
}

.fadeInDownBig {
  animation-name: pf-fadeInDownBig
}

@keyframes pf-fadeInLeft {
  from {
    opacity: 0;
    transform: translate3d(-100%, 0, 0)
  }
  to {
    opacity: 1;
    transform: none
  }
}

.fadeInLeft {
  animation-name: pf-fadeInLeft
}

@keyframes pf-fadeInLeftBig {
  from {
    opacity: 0;
    transform: translate3d(-2000px, 0, 0)
  }
  to {
    opacity: 1;
    transform: none
  }
}

.fadeInLeftBig {
  animation-name: pf-fadeInLeftBig
}

@keyframes pf-fadeInRight {
  from {
    opacity: 0;
    transform: translate3d(100%, 0, 0)
  }
  to {
    opacity: 1;
    transform: none
  }
}

.fadeInRight {
  animation-name: pf-fadeInRight
}

@keyframes pf-fadeInRightBig {
  from {
    opacity: 0;
    transform: translate3d(2000px, 0, 0)
  }
  to {
    opacity: 1;
    transform: none
  }
}

.fadeInRightBig {
  animation-name: pf-fadeInRightBig
}

@keyframes pf-fadeInUp {
  from {
    opacity: 0;
    transform: translate3d(0, 100%, 0)
  }
  to {
    opacity: 1;
    transform: none
  }
}

.fadeInUp {
  animation-name: pf-fadeInUp
}

@keyframes pf-fadeInUpBig {
  from {
    opacity: 0;
    transform: translate3d(0, 2000px, 0)
  }
  to {
    opacity: 1;
    transform: none
  }
}

.fadeInUpBig {
  animation-name: pf-fadeInUpBig
}

@keyframes pf-flash {
  50%, from, to {
    opacity: 1
  }
  25%, 75% {
    opacity: 0
  }
}

.flash {
  animation-name: pf-flash
}

.flip {
  animation-name: pf-flip
}

@keyframes pf-flip {
  from {
    transform: rotateY(180deg)
  }
  to {
    transform: rotateY(0)
  }
}

@keyframes pf-flipInX {
  from {
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    animation-timing-function: ease-in;
    opacity: 0
  }
  40% {
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    animation-timing-function: ease-in
  }
  60% {
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    opacity: 1
  }
  80% {
    transform: perspective(400px) rotate3d(1, 0, 0, -5deg)
  }
  to {
    transform: perspective(400px)
  }
}

.flipInX {
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  animation-name: pf-flipInX
}

@keyframes pf-flipInY {
  from {
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    animation-timing-function: ease-in;
    opacity: 0
  }
  40% {
    transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    animation-timing-function: ease-in
  }
  60% {
    transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    opacity: 1
  }
  80% {
    transform: perspective(400px) rotate3d(0, 1, 0, -5deg)
  }
  to {
    transform: perspective(400px)
  }
}

.flipInY {
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  animation-name: pf-flipInY
}

@keyframes pf-jackInTheBox {
  from {
    opacity: 0;
    transform: scale(.1) rotate(30deg);
    transform-origin: center bottom
  }
  50% {
    transform: rotate(-10deg)
  }
  70% {
    transform: rotate(3deg)
  }
  to {
    opacity: 1;
    transform: scale(1)
  }
}

.jackInTheBox {
  animation-name: pf-jackInTheBox
}

@keyframes pf-jello {
  11.1%, from, to {
    transform: none
  }
  22.2% {
    transform: skewX(-12.5deg) skewY(-12.5deg)
  }
  33.3% {
    transform: skewX(6.25deg) skewY(6.25deg)
  }
  44.4% {
    transform: skewX(-3.125deg) skewY(-3.125deg)
  }
  55.5% {
    transform: skewX(1.5625deg) skewY(1.5625deg)
  }
  66.6% {
    transform: skewX(-.78125deg) skewY(-.78125deg)
  }
  77.7% {
    transform: skewX(.39062deg) skewY(.39062deg)
  }
  88.8% {
    transform: skewX(-.19531deg) skewY(-.19531deg)
  }
}

.jello {
  animation-name: pf-jello;
  transform-origin: center
}

@keyframes pf-pulse {
  from {
    transform: scale3d(1, 1, 1)
  }
  50% {
    transform: scale3d(1.05, 1.05, 1.05)
  }
  to {
    transform: scale3d(1, 1, 1)
  }
}

.pulse {
  animation-name: pf-pulse
}

@keyframes pf-rollIn {
  from {
    opacity: 0;
    transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg)
  }
  to {
    opacity: 1;
    transform: none
  }
}

.rollIn {
  animation-name: pf-rollIn
}

@keyframes pf-rotateIn {
  0% {
    -webkit-transform: rotate(0);
    transform: rotate(0)
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg)
  }
}

.rotateIn {
  animation-name: pf-rotateIn
}

@keyframes pf-rotateInDownLeft {
  from {
    transform-origin: left bottom;
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0
  }
  to {
    transform-origin: left bottom;
    transform: none;
    opacity: 1
  }
}

.rotateInDownLeft {
  animation-name: pf-rotateInDownLeft
}

@keyframes pf-rotateInDownRight {
  from {
    transform-origin: right bottom;
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0
  }
  to {
    transform-origin: right bottom;
    transform: none;
    opacity: 1
  }
}

.rotateInDownRight {
  animation-name: pf-rotateInDownRight
}

@keyframes pf-rotateInUpLeft {
  from {
    transform-origin: left bottom;
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0
  }
  to {
    transform-origin: left bottom;
    transform: none;
    opacity: 1
  }
}

.rotateInUpLeft {
  animation-name: pf-rotateInUpLeft
}

@keyframes pf-rotateInUpRight {
  from {
    transform-origin: right bottom;
    transform: rotate3d(0, 0, 1, -90deg);
    opacity: 0
  }
  to {
    transform-origin: right bottom;
    transform: none;
    opacity: 1
  }
}

.rotateInUpRight {
  animation-name: pf-rotateInUpRight
}

@keyframes pf-rubberBand {
  from {
    transform: scale3d(1, 1, 1)
  }
  30% {
    transform: scale3d(1.25, .75, 1)
  }
  40% {
    transform: scale3d(.75, 1.25, 1)
  }
  50% {
    transform: scale3d(1.15, .85, 1)
  }
  65% {
    transform: scale3d(.95, 1.05, 1)
  }
  75% {
    transform: scale3d(1.05, .95, 1)
  }
  to {
    transform: scale3d(1, 1, 1)
  }
}

.rubberBand {
  animation-name: pf-rubberBand
}

@keyframes pf-shake {
  from, to {
    transform: translate3d(0, 0, 0)
  }
  10%, 30%, 50%, 70%, 90% {
    transform: translate3d(-10px, 0, 0)
  }
  20%, 40%, 60%, 80% {
    transform: translate3d(10px, 0, 0)
  }
}

.shake {
  animation-name: pf-shake
}

@keyframes pf-slideInDown {
  from {
    transform: translate3d(0, -100%, 0);
    visibility: visible
  }
  to {
    transform: translate3d(0, 0, 0)
  }
}

.slideInDown {
  animation-name: pf-slideInDown
}

@keyframes pf-slideInLeft {
  from {
    transform: translate3d(-100%, 0, 0);
    visibility: visible
  }
  to {
    transform: translate3d(0, 0, 0)
  }
}

.slideInLeft {
  animation-name: pf-slideInLeft
}

@keyframes pf-slideInRight {
  from {
    transform: translate3d(100%, 0, 0);
    visibility: visible
  }
  to {
    transform: translate3d(0, 0, 0)
  }
}

.slideInRight {
  animation-name: pf-slideInRight
}

@keyframes pf-slideInUp {
  from {
    transform: translate3d(0, 100%, 0);
    visibility: visible
  }
  to {
    transform: translate3d(0, 0, 0)
  }
}

.slideInUp {
  animation-name: pf-slideInUp
}

@keyframes pf-tada {
  from {
    transform: scale3d(1, 1, 1)
  }
  10%, 20% {
    transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg)
  }
  30%, 50%, 70%, 90% {
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg)
  }
  40%, 60%, 80% {
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg)
  }
  to {
    transform: scale3d(1, 1, 1)
  }
}

.tada {
  animation-name: pf-tada
}

@keyframes shake {
  from, to {
    transform: translate3d(0, 0, 0);
  }
  10%, 30%, 50%, 70%, 90% {
    transform: translate3d(-10px, 0, 0);
  }
  20%, 40%, 60%, 80% {
    transform: translate3d(10px, 0, 0);
  }
}

.shake {
  animation-name: shake;
}

@keyframes pf-wobble {
  from {
    transform: none
  }
  15% {
    transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg)
  }
  30% {
    transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg)
  }
  45% {
    transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg)
  }
  60% {
    transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg)
  }
  75% {
    transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg)
  }
  to {
    transform: none
  }
}

.wobble {
  animation-name: pf-wobble
}

@keyframes pf-zoomIn {
  from {
    opacity: 0;
    transform: scale3d(.3, .3, .3)
  }
  50% {
    opacity: 1
  }
}

.zoomIn {
  animation-name: pf-zoomIn
}

@keyframes pf-zoomInDown {
  from {
    opacity: 0;
    transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
    animation-timing-function: cubic-bezier(.55, .055, .675, .19)
  }
  60% {
    opacity: 1;
    transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
    animation-timing-function: cubic-bezier(.175, .885, .32, 1)
  }
}

.zoomInDown {
  animation-name: pf-zoomInDown
}

@keyframes pf-zoomInLeft {
  from {
    opacity: 0;
    transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
    animation-timing-function: cubic-bezier(.55, .055, .675, .19)
  }
  60% {
    opacity: 1;
    transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
    animation-timing-function: cubic-bezier(.175, .885, .32, 1)
  }
}

.zoomInLeft {
  animation-name: pf-zoomInLeft
}

@keyframes pf-zoomInRight {
  from {
    opacity: 0;
    transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
    animation-timing-function: cubic-bezier(.55, .055, .675, .19)
  }
  60% {
    opacity: 1;
    transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
    animation-timing-function: cubic-bezier(.175, .885, .32, 1)
  }
}

.zoomInRight {
  animation-name: pf-zoomInRight
}

@keyframes pf-zoomInUp {
  from {
    opacity: 0;
    transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
    animation-timing-function: cubic-bezier(.55, .055, .675, .19)
  }
  60% {
    opacity: 1;
    transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
    animation-timing-function: cubic-bezier(.175, .885, .32, 1)
  }
}

.zoomInUp {
  animation-name: pf-zoomInUp
}

.animate-backward {
  transition: all .35s
}

.animate-backward:hover {
  transform: translateX(-8px)
}

@keyframes pf-bob {
  0% {
    transform: translateY(-8px)
  }
  50% {
    transform: translateY(-4px)
  }
  100% {
    transform: translateY(-8px)
  }
}

@keyframes pf-bob-float {
  100% {
    transform: translateY(-8px)
  }
}

.animate-bob:hover {
  animation-name: pf-bob-float, pf-bob;
  animation-duration: .3s, 1.5s;
  animation-delay: 0s, .3s;
  animation-timing-function: ease-out, ease-in-out;
  animation-iteration-count: 1, infinite;
  animation-fill-mode: forwards;
  animation-direction: normal, alternate
}

.animate-bounce-in {
  transition-duration: .5s
}

.animate-bounce-in:hover {
  transform: scale(1.2);
  transition-timing-function: cubic-bezier(.47, 2.02, .31, -.36)
}

.animate-bounce-out {
  transition-duration: .5s
}

.animate-bounce-out:hover {
  transform: scale(.8);
  transition-timing-function: cubic-bezier(.47, 2.02, .31, -.36)
}

@keyframes pb-buzz-out {
  10% {
    transform: translateX(3px) rotate(2deg)
  }
  20% {
    transform: translateX(-3px) rotate(-2deg)
  }
  30% {
    transform: translateX(3px) rotate(2deg)
  }
  40% {
    transform: translateX(-3px) rotate(-2deg)
  }
  50% {
    transform: translateX(2px) rotate(1deg)
  }
  60% {
    transform: translateX(-2px) rotate(-1deg)
  }
  70% {
    transform: translateX(2px) rotate(1deg)
  }
  80% {
    transform: translateX(-2px) rotate(-1deg)
  }
  90% {
    transform: translateX(1px) rotate(0)
  }
  100% {
    transform: translateX(-1px) rotate(0)
  }
}

.animate-buzz-out:hover {
  animation-name: pb-buzz-out;
  animation-duration: .75s;
  animation-timing-function: linear;
  animation-iteration-count: 1
}

@keyframes pb-buzz {
  50% {
    transform: translateX(3px) rotate(2deg)
  }
  100% {
    transform: translateX(-3px) rotate(-2deg)
  }
}

.animate-buzz:hover {
  animation-name: pb-buzz;
  animation-duration: .15s;
  animation-timing-function: linear;
  animation-iteration-count: infinite
}

.animate-float-shadow {
  position: relative;
  transition-duration: .3s;
  transition-property: transform
}

.animate-float-shadow:before {
  position: absolute;
  z-index: -1;
  content: '';
  top: 100%;
  left: 5%;
  height: 10px;
  width: 90%;
  opacity: 0;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, .35) 0, transparent 80%);
  transition-duration: .3s;
  transition-property: transform, opacity
}

.animate-float-shadow:hover {
  transform: translateY(-5px)
}

.animate-float-shadow:hover:before {
  opacity: 1;
  transform: translateY(5px)
}

.animate-float {
  transition-duration: .3s;
  transition-property: transform;
  transition-timing-function: ease-out
}

.animate-float:hover {
  transform: translateY(-8px)
}

.animate-glow {
  transition-duration: .3s;
  transition-property: box-shadow
}

.animate-glow:hover {
  box-shadow: 0 0 8px rgba(0, 0, 0, .6)
}

.animate-grow-rotate {
  transition-duration: .3s;
  transition-property: transform
}

.animate-grow-rotate:hover {
  transform: scale(1.1) rotate(4deg)
}

.animate-grow-shadow {
  transition-duration: .3s;
  transition-property: box-shadow, transform
}

.animate-grow-shadow:hover {
  box-shadow: 0 10px 10px -10px rgba(0, 0, 0, .5);
  transform: scale(1.1)
}

.animate-grow {
  transition-duration: .3s;
  transition-property: transform
}

.animate-grow:hover {
  transform: scale(1.1)
}

@keyframes pf-hang {
  0% {
    transform: translateY(8px)
  }
  50% {
    transform: translateY(4px)
  }
  100% {
    transform: translateY(8px)
  }
}

@keyframes pf-hang-sink {
  100% {
    transform: translateY(8px)
  }
}

.animate-hang:hover {
  animation-name: pf-hang-sink, pf-hang;
  animation-duration: .3s, 1.5s;
  animation-delay: 0s, .3s;
  animation-timing-function: ease-out, ease-in-out;
  animation-iteration-count: 1, infinite;
  animation-fill-mode: forwards;
  animation-direction: normal, alternate
}

@keyframes pf-pop {
  50% {
    transform: scale(1.2)
  }
}

.animate-pop:hover {
  animation-name: pf-pop;
  animation-duration: .3s;
  animation-timing-function: linear;
  animation-iteration-count: 1
}

@keyframes pf-pulse-grow {
  to {
    transform: scale(1.1)
  }
}

.animate-pulse-grow:hover {
  animation-name: pf-pulse-grow;
  animation-duration: .3s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-direction: alternate
}

@keyframes pf-pulse-shrink {
  to {
    transform: scale(.9)
  }
}

.animate-pulse-shrink:hover {
  animation-name: pf-pulse-shrink;
  animation-duration: .3s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-direction: alternate
}

@keyframes pf-pulse {
  25% {
    transform: scale(1.1)
  }
  75% {
    transform: scale(.9)
  }
}

.animate-pulse:hover {
  animation-name: pf-pulse;
  animation-duration: 1s;
  animation-timing-function: linear;
  animation-iteration-count: infinite
}

@keyframes pf-push {
  50% {
    transform: scale(.8)
  }
  100% {
    transform: scale(1)
  }
}

.animate-push:hover {
  animation-name: pf-push;
  animation-duration: .3s;
  animation-timing-function: linear;
  animation-iteration-count: 1
}

.animate-rotate {
  transition-duration: .3s;
  transition-property: transform
}

.animate-rotate:hover {
  transform: rotate(4deg)
}

.animate-shadow-radial {
  position: relative
}

.animate-shadow-radial:after, .animate-shadow-radial:before {
  position: absolute;
  content: '';
  left: 0;
  width: 100%;
  background-repeat: no-repeat;
  height: 5px;
  opacity: 0;
  transition-duration: .3s;
  transition-property: opacity
}

.animate-shadow-radial:before {
  bottom: 100%;
  background: radial-gradient(ellipse at 50% 150%, rgba(0, 0, 0, .6) 0, transparent 80%)
}

.animate-shadow-radial:after {
  top: 100%;
  background: radial-gradient(ellipse at 50% -50%, rgba(0, 0, 0, .6) 0, transparent 80%)
}

.animate-shadow-radial:hover:after, .animate-shadow-radial:hover:before {
  opacity: 1
}

.animate-shadow {
  transition-duration: .3s;
  transition-property: box-shadow
}

.animate-shadow:hover {
  box-shadow: 0 10px 10px -10px rgba(0, 0, 0, .5)
}

.animate-shrink {
  transition-duration: .3s;
  transition-property: transform
}

.animate-shrink:hover {
  transform: scale(.9)
}

.animate-sink {
  transition-duration: .3s;
  transition-property: transform;
  transition-timing-function: ease-out
}

.animate-sink:hover {
  transform: translateY(8px)
}

.animate-skew-backward {
  transition-duration: .3s;
  transition-property: transform;
  transform-origin: 0 100%
}

.animate-skew-backward:hover {
  transform: skew(10deg)
}

.animate-skew-forward {
  transition-duration: .3s;
  transition-property: transform;
  transform-origin: 0 100%
}

.animate-skew-forward:hover {
  transform: skew(-10deg)
}

.animate-skew {
  transition-duration: .3s;
  transition-property: transform
}

.animate-skew:hover {
  transform: skew(-10deg)
}

@keyframes pf-wobble-bottom {
  16.65% {
    transform: skew(-12deg)
  }
  33.3% {
    transform: skew(10deg)
  }
  49.95% {
    transform: skew(-6deg)
  }
  66.6% {
    transform: skew(4deg)
  }
  83.25% {
    transform: skew(-2deg)
  }
  100% {
    transform: skew(0)
  }
}

.animate-wobble-bottom {
  transform-origin: 100% 0
}

.animate-wobble-bottom:hover {
  animation-name: pf-wobble-bottom;
  animation-duration: 1s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: 1
}

@keyframes pf-wobble-horizontal {
  16.65% {
    transform: translateX(8px)
  }
  33.3% {
    transform: translateX(-6px)
  }
  49.95% {
    transform: translateX(4px)
  }
  66.6% {
    transform: translateX(-2px)
  }
  83.25% {
    transform: translateX(1px)
  }
  100% {
    transform: translateX(0)
  }
}

.animate-wobble-horizontal:hover {
  animation-name: pf-wobble-horizontal;
  animation-duration: 1s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: 1
}

@keyframes pf-wobble-skew {
  16.65% {
    transform: skew(-12deg)
  }
  33.3% {
    transform: skew(10deg)
  }
  49.95% {
    transform: skew(-6deg)
  }
  66.6% {
    transform: skew(4deg)
  }
  83.25% {
    transform: skew(-2deg)
  }
  100% {
    transform: skew(0)
  }
}

.animate-wobble-skew:hover {
  animation-name: pf-wobble-skew;
  animation-duration: 1s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: 1
}

@keyframes pf-wobble-tbr {
  16.65% {
    transform: translate(8px, 8px)
  }
  33.3% {
    transform: translate(-6px, -6px)
  }
  49.95% {
    transform: translate(4px, 4px)
  }
  66.6% {
    transform: translate(-2px, -2px)
  }
  83.25% {
    transform: translate(1px, 1px)
  }
  100% {
    transform: translate(0, 0)
  }
}

.animate-wobble-to-bottom-right:hover {
  animation-name: pf-wobble-tbr;
  animation-duration: 1s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: 1
}

@keyframes pf-wobble-ttr {
  16.65% {
    transform: translate(8px, -8px)
  }
  33.3% {
    transform: translate(-6px, 6px)
  }
  49.95% {
    transform: translate(4px, -4px)
  }
  66.6% {
    transform: translate(-2px, 2px)
  }
  83.25% {
    transform: translate(1px, -1px)
  }
  100% {
    transform: translate(0, 0)
  }
}

.animate-wobble-to-top-right:hover {
  animation-name: pf-wobble-ttr;
  animation-duration: 1s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: 1
}

@keyframes pf-wobble-top {
  16.65% {
    transform: skew(-12deg)
  }
  33.3% {
    transform: skew(10deg)
  }
  49.95% {
    transform: skew(-6deg)
  }
  66.6% {
    transform: skew(4deg)
  }
  83.25% {
    transform: skew(-2deg)
  }
  100% {
    transform: skew(0)
  }
}

.animate-wobble-top {
  transform-origin: 0 100%
}

.animate-wobble-top:hover {
  animation-name: pf-wobble-top;
  animation-duration: 1s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: 1
}

@keyframes pf-wobble-vertical {
  16.65% {
    transform: translateY(8px)
  }
  33.3% {
    transform: translateY(-6px)
  }
  49.95% {
    transform: translateY(4px)
  }
  66.6% {
    transform: translateY(-2px)
  }
  83.25% {
    transform: translateY(1px)
  }
  100% {
    transform: translateY(0)
  }
}

.animate-wobble-vertical:hover {
  animation-name: pf-wobble-vertical;
  animation-duration: 1s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: 1
}