Эффекты при наведении. Библиотека hover.css (SASS)

hover.sass

/* Посмотреть примеры с названиями можно тут https://codepen.io/Mestika/pen/PwmqjZ
/* Grow
.hvr-grow
  display: inline-block
  vertical-align: middle
  -webkit-transform: perspective(1px) translateZ(0)
  transform: perspective(1px) translateZ(0)
  box-shadow: 0 0 1px transparent
  -webkit-transition-duration: 0.3s
  transition-duration: 0.3s
  -webkit-transition-property: transform
  transition-property: transform

.hvr-grow:hover, .hvr-grow:focus, .hvr-grow:active
  -webkit-transform: scale(1.1)
  transform: scale(1.1)

/* Shrink
.hvr-shrink
  display: inline-block
  vertical-align: middle
  -webkit-transform: perspective(1px) translateZ(0)
  transform: perspective(1px) translateZ(0)
  box-shadow: 0 0 1px transparent
  -webkit-transition-duration: 0.3s
  transition-duration: 0.3s
  -webkit-transition-property: transform
  transition-property: transform

.hvr-shrink:hover, .hvr-shrink:focus, .hvr-shrink:active
  -webkit-transform: scale(0.9)
  transform: scale(0.9)

/* Pulse
@-webkit-keyframes hvr-pulse
  25%
    -webkit-transform: scale(1.1)
    transform: scale(1.1)

  75%
    -webkit-transform: scale(0.9)
    transform: scale(0.9)

@keyframes hvr-pulse
  25%
    -webkit-transform: scale(1.1)
    transform: scale(1.1)

  75%
    -webkit-transform: scale(0.9)
    transform: scale(0.9)

.hvr-pulse
  display: inline-block
  vertical-align: middle
  -webkit-transform: perspective(1px) translateZ(0)
  transform: perspective(1px) translateZ(0)
  box-shadow: 0 0 1px transparent

.hvr-pulse:hover, .hvr-pulse:focus, .hvr-pulse:active
  -webkit-animation-name: hvr-pulse
  animation-name: hvr-pulse
  -webkit-animation-duration: 1s
  animation-duration: 1s
  -webkit-animation-timing-function: linear
  animation-timing-function: linear
  -webkit-animation-iteration-count: infinite
  animation-iteration-count: infinite

/* Pulse Grow
@-webkit-keyframes hvr-pulse-grow
  to
    -webkit-transform: scale(1.1)
    transform: scale(1.1)

@keyframes hvr-pulse-grow
  to
    -webkit-transform: scale(1.1)
    transform: scale(1.1)

.hvr-pulse-grow
  display: inline-block
  vertical-align: middle
  -webkit-transform: perspective(1px) translateZ(0)
  transform: perspective(1px) translateZ(0)
  box-shadow: 0 0 1px transparent

.hvr-pulse-grow:hover, .hvr-pulse-grow:focus, .hvr-pulse-grow:active
  -webkit-animation-name: hvr-pulse-grow
  animation-name: hvr-pulse-grow
  -webkit-animation-duration: 0.3s
  animation-duration: 0.3s
  -webkit-animation-timing-function: linear
  animation-timing-function: linear
  -webkit-animation-iteration-count: infinite
  animation-iteration-count: infinite
  -webkit-animation-direction: alternate
  animation-direction: alternate

/* Pulse Shrink
@-webkit-keyframes hvr-pulse-shrink
  to
    -webkit-transform: scale(0.9)
    transform: scale(0.9)

@keyframes hvr-pulse-shrink
  to
    -webkit-transform: scale(0.9)
    transform: scale(0.9)

.hvr-pulse-shrink
  display: inline-block
  vertical-align: middle
  -webkit-transform: perspective(1px) translateZ(0)
  transform: perspective(1px) translateZ(0)
  box-shadow: 0 0 1px transparent

.hvr-pulse-shrink:hover, .hvr-pulse-shrink:focus, .hvr-pulse-shrink:active
  -webkit-animation-name: hvr-pulse-shrink
  animation-name: hvr-pulse-shrink
  -webkit-animation-duration: 0.3s
  animation-duration: 0.3s
  -webkit-animation-timing-function: linear
  animation-timing-function: linear
  -webkit-animation-iteration-count: infinite
  animation-iteration-count: infinite
  -webkit-animation-direction: alternate
  animation-direction: alternate

/* Push
@-webkit-keyframes hvr-push
  50%
    -webkit-transform: scale(0.8)
    transform: scale(0.8)

  100%
    -webkit-transform: scale(1)
    transform: scale(1)

@keyframes hvr-push
  50%
    -webkit-transform: scale(0.8)
    transform: scale(0.8)

  100%
    -webkit-transform: scale(1)
    transform: scale(1)

.hvr-push
  display: inline-block
  vertical-align: middle
  -webkit-transform: perspective(1px) translateZ(0)
  transform: perspective(1px) translateZ(0)
  box-shadow: 0 0 1px transparent

.hvr-push:hover, .hvr-push:focus, .hvr-push:active
  -webkit-animation-name: hvr-push
  animation-name: hvr-push
  -webkit-animation-duration: 0.3s
  animation-duration: 0.3s
  -webkit-animation-timing-function: linear
  animation-timing-function: linear
  -webkit-animation-iteration-count: 1
  animation-iteration-count: 1

/* Pop
@-webkit-keyframes hvr-pop
  50%
    -webkit-transform: scale(1.2)
    transform: scale(1.2)

@keyframes hvr-pop
  50%
    -webkit-transform: scale(1.2)
    transform: scale(1.2)

.hvr-pop
  display: inline-block
  vertical-align: middle
  -webkit-transform: perspective(1px) translateZ(0)
  transform: perspective(1px) translateZ(0)
  box-shadow: 0 0 1px transparent

.hvr-pop:hover, .hvr-pop:focus, .hvr-pop:active
  -webkit-animation-name: hvr-pop
  animation-name: hvr-pop
  -webkit-animation-duration: 0.3s
  animation-duration: 0.3s
  -webkit-animation-timing-function: linear
  animation-timing-function: linear
  -webkit-animation-iteration-count: 1
  animation-iteration-count: 1

/* Bounce In
.hvr-bounce-in
  display: inline-block
  vertical-align: middle
  -webkit-transform: perspective(1px) translateZ(0)
  transform: perspective(1px) translateZ(0)
  box-shadow: 0 0 1px transparent
  -webkit-transition-duration: 0.5s
  transition-duration: 0.5s

.hvr-bounce-in:hover, .hvr-bounce-in:focus, .hvr-bounce-in:active
  -webkit-transform: scale(1.2)
  transform: scale(1.2)
  -webkit-transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36)
  transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36)

/* Bounce Out
.hvr-bounce-out
  display: inline-block
  vertical-align: middle
  -webkit-transform: perspective(1px) translateZ(0)
  transform: perspective(1px) translateZ(0)
  box-shadow: 0 0 1px transparent
  -webkit-transition-duration: 0.5s
  transition-duration: 0.5s

.hvr-bounce-out:hover, .hvr-bounce-out:focus, .hvr-bounce-out:active
  -webkit-transform: scale(0.8)
  transform: scale(0.8)
  -webkit-transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36)
  transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36)

/* Rotate
.hvr-rotate
  display: inline-block
  vertical-align: middle
  -webkit-transform: perspective(1px) translateZ(0)
  transform: perspective(1px) translateZ(0)
  box-shadow: 0 0 1px transparent
  -webkit-transition-duration: 0.3s
  transition-duration: 0.3s
  -webkit-transition-property: transform
  transition-property: transform

.hvr-rotate:hover, .hvr-rotate:focus, .hvr-rotate:active
  -webkit-transform: rotate(4deg)
  transform: rotate(4deg)

/* Grow Rotate
.hvr-grow-rotate
  display: inline-block
  vertical-align: middle
  -webkit-transform: perspective(1px) translateZ(0)
  transform: perspective(1px) translateZ(0)
  box-shadow: 0 0 1px transparent
  -webkit-transition-duration: 0.3s
  transition-duration: 0.3s
  -webkit-transition-property: transform
  transition-property: transform

.hvr-grow-rotate:hover, .hvr-grow-rotate:focus, .hvr-grow-rotate:active
  -webkit-transform: scale(1.1) rotate(4deg)
  transform: scale(1.1) rotate(4deg)

/* Float
.hvr-float
  display: inline-block
  vertical-align: middle
  -webkit-transform: perspective(1px) translateZ(0)
  transform: perspective(1px) translateZ(0)
  box-shadow: 0 0 1px transparent
  -webkit-transition-duration: 0.3s
  transition-duration: 0.3s
  -webkit-transition-property: transform
  transition-property: transform
  -webkit-transition-timing-function: ease-out
  transition-timing-function: ease-out

.hvr-float:hover, .hvr-float:focus, .hvr-float:active
  -webkit-transform: translateY(-8px)
  transform: translateY(-8px)

/* Sink
.hvr-sink
  display: inline-block
  vertical-align: middle
  -webkit-transform: perspective(1px) translateZ(0)
  transform: perspective(1px) translateZ(0)
  box-shadow: 0 0 1px transparent
  -webkit-transition-duration: 0.3s
  transition-duration: 0.3s
  -webkit-transition-property: transform
  transition-property: transform
  -webkit-transition-timing-function: ease-out
  transition-timing-function: ease-out

.hvr-sink:hover, .hvr-sink:focus, .hvr-sink:active
  -webkit-transform: translateY(8px)
  transform: translateY(8px)

/* Bob
@-webkit-keyframes hvr-bob
  0%
    -webkit-transform: translateY(-8px)
    transform: translateY(-8px)

  50%
    -webkit-transform: translateY(-4px)
    transform: translateY(-4px)

  100%
    -webkit-transform: translateY(-8px)
    transform: translateY(-8px)

@keyframes hvr-bob
  0%
    -webkit-transform: translateY(-8px)
    transform: translateY(-8px)

  50%
    -webkit-transform: translateY(-4px)
    transform: translateY(-4px)

  100%
    -webkit-transform: translateY(-8px)
    transform: translateY(-8px)

@-webkit-keyframes hvr-bob-float
  100%
    -webkit-transform: translateY(-8px)
    transform: translateY(-8px)

@keyframes hvr-bob-float
  100%
    -webkit-transform: translateY(-8px)
    transform: translateY(-8px)

.hvr-bob
  display: inline-block
  vertical-align: middle
  -webkit-transform: perspective(1px) translateZ(0)
  transform: perspective(1px) translateZ(0)
  box-shadow: 0 0 1px transparent

.hvr-bob:hover, .hvr-bob:focus, .hvr-bob:active
  -webkit-animation-name: hvr-bob-float, hvr-bob
  animation-name: hvr-bob-float, hvr-bob
  -webkit-animation-duration: .3s, 1.5s
  animation-duration: .3s, 1.5s
  -webkit-animation-delay: 0s, .3s
  animation-delay: 0s, .3s
  -webkit-animation-timing-function: ease-out, ease-in-out
  animation-timing-function: ease-out, ease-in-out
  -webkit-animation-iteration-count: 1, infinite
  animation-iteration-count: 1, infinite
  -webkit-animation-fill-mode: forwards
  animation-fill-mode: forwards
  -webkit-animation-direction: normal, alternate
  animation-direction: normal, alternate

/* Hang
@-webkit-keyframes hvr-hang
  0%
    -webkit-transform: translateY(8px)
    transform: translateY(8px)

  50%
    -webkit-transform: translateY(4px)
    transform: translateY(4px)

  100%
    -webkit-transform: translateY(8px)
    transform: translateY(8px)

@keyframes hvr-hang
  0%
    -webkit-transform: translateY(8px)
    transform: translateY(8px)

  50%
    -webkit-transform: translateY(4px)
    transform: translateY(4px)

  100%
    -webkit-transform: translateY(8px)
    transform: translateY(8px)

@-webkit-keyframes hvr-hang-sink
  100%
    -webkit-transform: translateY(8px)
    transform: translateY(8px)

@keyframes hvr-hang-sink
  100%
    -webkit-transform: translateY(8px)
    transform: translateY(8px)

.hvr-hang
  display: inline-block
  vertical-align: middle
  -webkit-transform: perspective(1px) translateZ(0)
  transform: perspective(1px) translateZ(0)
  box-shadow: 0 0 1px transparent

.hvr-hang:hover, .hvr-hang:focus, .hvr-hang:active
  -webkit-animation-name: hvr-hang-sink, hvr-hang
  animation-name: hvr-hang-sink, hvr-hang
  -webkit-animation-duration: .3s, 1.5s
  animation-duration: .3s, 1.5s
  -webkit-animation-delay: 0s, .3s
  animation-delay: 0s, .3s
  -webkit-animation-timing-function: ease-out, ease-in-out
  animation-timing-function: ease-out, ease-in-out
  -webkit-animation-iteration-count: 1, infinite
  animation-iteration-count: 1, infinite
  -webkit-animation-fill-mode: forwards
  animation-fill-mode: forwards
  -webkit-animation-direction: normal, alternate
  animation-direction: normal, alternate

/* Skew
.hvr-skew
  display: inline-block
  vertical-align: middle
  -webkit-transform: perspective(1px) translateZ(0)
  transform: perspective(1px) translateZ(0)
  box-shadow: 0 0 1px transparent
  -webkit-transition-duration: 0.3s
  transition-duration: 0.3s
  -webkit-transition-property: transform
  transition-property: transform

.hvr-skew:hover, .hvr-skew:focus, .hvr-skew:active
  -webkit-transform: skew(-10deg)
  transform: skew(-10deg)

/* Skew Forward
.hvr-skew-forward
  display: inline-block
  vertical-align: middle
  -webkit-transform: perspective(1px) translateZ(0)
  transform: perspective(1px) translateZ(0)
  box-shadow: 0 0 1px transparent
  -webkit-transition-duration: 0.3s
  transition-duration: 0.3s
  -webkit-transition-property: transform
  transition-property: transform
  -webkit-transform-origin: 0 100%
  transform-origin: 0 100%

.hvr-skew-forward:hover, .hvr-skew-forward:focus, .hvr-skew-forward:active
  -webkit-transform: skew(-10deg)
  transform: skew(-10deg)

/* Skew Backward
.hvr-skew-backward
  display: inline-block
  vertical-align: middle
  -webkit-transform: perspective(1px) translateZ(0)
  transform: perspective(1px) translateZ(0)
  box-shadow: 0 0 1px transparent
  -webkit-transition-duration: 0.3s
  transition-duration: 0.3s
  -webkit-transition-property: transform
  transition-property: transform
  -webkit-transform-origin: 0 100%
  transform-origin: 0 100%

.hvr-skew-backward:hover, .hvr-skew-backward:focus, .hvr-skew-backward:active
  -webkit-transform: skew(10deg)
  transform: skew(10deg)

/* Wobble Vertical
@-webkit-keyframes hvr-wobble-vertical
  16.65%
    -webkit-transform: translateY(8px)
    transform: translateY(8px)

  33.3%
    -webkit-transform: translateY(-6px)
    transform: translateY(-6px)

  49.95%
    -webkit-transform: translateY(4px)
    transform: translateY(4px)

  66.6%
    -webkit-transform: translateY(-2px)
    transform: translateY(-2px)

  83.25%
    -webkit-transform: translateY(1px)
    transform: translateY(1px)

  100%
    -webkit-transform: translateY(0)
    transform: translateY(0)

@keyframes hvr-wobble-vertical
  16.65%
    -webkit-transform: translateY(8px)
    transform: translateY(8px)

  33.3%
    -webkit-transform: translateY(-6px)
    transform: translateY(-6px)

  49.95%
    -webkit-transform: translateY(4px)
    transform: translateY(4px)

  66.6%
    -webkit-transform: translateY(-2px)
    transform: translateY(-2px)

  83.25%
    -webkit-transform: translateY(1px)
    transform: translateY(1px)

  100%
    -webkit-transform: translateY(0)
    transform: translateY(0)

.hvr-wobble-vertical
  display: inline-block
  vertical-align: middle
  -webkit-transform: perspective(1px) translateZ(0)
  transform: perspective(1px) translateZ(0)
  box-shadow: 0 0 1px transparent

.hvr-wobble-vertical:hover, .hvr-wobble-vertical:focus, .hvr-wobble-vertical:active
  -webkit-animation-name: hvr-wobble-vertical
  animation-name: hvr-wobble-vertical
  -webkit-animation-duration: 1s
  animation-duration: 1s
  -webkit-animation-timing-function: ease-in-out
  animation-timing-function: ease-in-out
  -webkit-animation-iteration-count: 1
  animation-iteration-count: 1

/* Wobble Horizontal
@-webkit-keyframes hvr-wobble-horizontal
  16.65%
    -webkit-transform: translateX(8px)
    transform: translateX(8px)

  33.3%
    -webkit-transform: translateX(-6px)
    transform: translateX(-6px)

  49.95%
    -webkit-transform: translateX(4px)
    transform: translateX(4px)

  66.6%
    -webkit-transform: translateX(-2px)
    transform: translateX(-2px)

  83.25%
    -webkit-transform: translateX(1px)
    transform: translateX(1px)

  100%
    -webkit-transform: translateX(0)
    transform: translateX(0)

@keyframes hvr-wobble-horizontal
  16.65%
    -webkit-transform: translateX(8px)
    transform: translateX(8px)

  33.3%
    -webkit-transform: translateX(-6px)
    transform: translateX(-6px)

  49.95%
    -webkit-transform: translateX(4px)
    transform: translateX(4px)

  66.6%
    -webkit-transform: translateX(-2px)
    transform: translateX(-2px)

  83.25%
    -webkit-transform: translateX(1px)
    transform: translateX(1px)

  100%
    -webkit-transform: translateX(0)
    transform: translateX(0)

.hvr-wobble-horizontal
  display: inline-block
  vertical-align: middle
  -webkit-transform: perspective(1px) translateZ(0)
  transform: perspective(1px) translateZ(0)
  box-shadow: 0 0 1px transparent

.hvr-wobble-horizontal:hover, .hvr-wobble-horizontal:focus, .hvr-wobble-horizontal:active
  -webkit-animation-name: hvr-wobble-horizontal
  animation-name: hvr-wobble-horizontal
  -webkit-animation-duration: 1s
  animation-duration: 1s
  -webkit-animation-timing-function: ease-in-out
  animation-timing-function: ease-in-out
  -webkit-animation-iteration-count: 1
  animation-iteration-count: 1

/* Wobble To Bottom Right
@-webkit-keyframes hvr-wobble-to-bottom-right
  16.65%
    -webkit-transform: translate(8px, 8px)
    transform: translate(8px, 8px)

  33.3%
    -webkit-transform: translate(-6px, -6px)
    transform: translate(-6px, -6px)

  49.95%
    -webkit-transform: translate(4px, 4px)
    transform: translate(4px, 4px)

  66.6%
    -webkit-transform: translate(-2px, -2px)
    transform: translate(-2px, -2px)

  83.25%
    -webkit-transform: translate(1px, 1px)
    transform: translate(1px, 1px)

  100%
    -webkit-transform: translate(0, 0)
    transform: translate(0, 0)

@keyframes hvr-wobble-to-bottom-right
  16.65%
    -webkit-transform: translate(8px, 8px)
    transform: translate(8px, 8px)

  33.3%
    -webkit-transform: translate(-6px, -6px)
    transform: translate(-6px, -6px)

  49.95%
    -webkit-transform: translate(4px, 4px)
    transform: translate(4px, 4px)

  66.6%
    -webkit-transform: translate(-2px, -2px)
    transform: translate(-2px, -2px)

  83.25%
    -webkit-transform: translate(1px, 1px)
    transform: translate(1px, 1px)

  100%
    -webkit-transform: translate(0, 0)
    transform: translate(0, 0)

.hvr-wobble-to-bottom-right
  display: inline-block
  vertical-align: middle
  -webkit-transform: perspective(1px) translateZ(0)
  transform: perspective(1px) translateZ(0)
  box-shadow: 0 0 1px transparent

.hvr-wobble-to-bottom-right:hover, .hvr-wobble-to-bottom-right:focus, .hvr-wobble-to-bottom-right:active
  -webkit-animation-name: hvr-wobble-to-bottom-right
  animation-name: hvr-wobble-to-bottom-right
  -webkit-animation-duration: 1s
  animation-duration: 1s
  -webkit-animation-timing-function: ease-in-out
  animation-timing-function: ease-in-out
  -webkit-animation-iteration-count: 1
  animation-iteration-count: 1

/* Wobble To Top Right
@-webkit-keyframes hvr-wobble-to-top-right
  16.65%
    -webkit-transform: translate(8px, -8px)
    transform: translate(8px, -8px)

  33.3%
    -webkit-transform: translate(-6px, 6px)
    transform: translate(-6px, 6px)

  49.95%
    -webkit-transform: translate(4px, -4px)
    transform: translate(4px, -4px)

  66.6%
    -webkit-transform: translate(-2px, 2px)
    transform: translate(-2px, 2px)

  83.25%
    -webkit-transform: translate(1px, -1px)
    transform: translate(1px, -1px)

  100%
    -webkit-transform: translate(0, 0)
    transform: translate(0, 0)

@keyframes hvr-wobble-to-top-right
  16.65%
    -webkit-transform: translate(8px, -8px)
    transform: translate(8px, -8px)

  33.3%
    -webkit-transform: translate(-6px, 6px)
    transform: translate(-6px, 6px)

  49.95%
    -webkit-transform: translate(4px, -4px)
    transform: translate(4px, -4px)

  66.6%
    -webkit-transform: translate(-2px, 2px)
    transform: translate(-2px, 2px)

  83.25%
    -webkit-transform: translate(1px, -1px)
    transform: translate(1px, -1px)

  100%
    -webkit-transform: translate(0, 0)
    transform: translate(0, 0)

.hvr-wobble-to-top-right
  display: inline-block
  vertical-align: middle
  -webkit-transform: perspective(1px) translateZ(0)
  transform: perspective(1px) translateZ(0)
  box-shadow: 0 0 1px transparent

.hvr-wobble-to-top-right:hover, .hvr-wobble-to-top-right:focus, .hvr-wobble-to-top-right:active
  -webkit-animation-name: hvr-wobble-to-top-right
  animation-name: hvr-wobble-to-top-right
  -webkit-animation-duration: 1s
  animation-duration: 1s
  -webkit-animation-timing-function: ease-in-out
  animation-timing-function: ease-in-out
  -webkit-animation-iteration-count: 1
  animation-iteration-count: 1

/* Wobble Top
@-webkit-keyframes hvr-wobble-top
  16.65%
    -webkit-transform: skew(-12deg)
    transform: skew(-12deg)

  33.3%
    -webkit-transform: skew(10deg)
    transform: skew(10deg)

  49.95%
    -webkit-transform: skew(-6deg)
    transform: skew(-6deg)

  66.6%
    -webkit-transform: skew(4deg)
    transform: skew(4deg)

  83.25%
    -webkit-transform: skew(-2deg)
    transform: skew(-2deg)

  100%
    -webkit-transform: skew(0)
    transform: skew(0)

@keyframes hvr-wobble-top
  16.65%
    -webkit-transform: skew(-12deg)
    transform: skew(-12deg)

  33.3%
    -webkit-transform: skew(10deg)
    transform: skew(10deg)

  49.95%
    -webkit-transform: skew(-6deg)
    transform: skew(-6deg)

  66.6%
    -webkit-transform: skew(4deg)
    transform: skew(4deg)

  83.25%
    -webkit-transform: skew(-2deg)
    transform: skew(-2deg)

  100%
    -webkit-transform: skew(0)
    transform: skew(0)

.hvr-wobble-top
  display: inline-block
  vertical-align: middle
  -webkit-transform: perspective(1px) translateZ(0)
  transform: perspective(1px) translateZ(0)
  box-shadow: 0 0 1px transparent
  -webkit-transform-origin: 0 100%
  transform-origin: 0 100%

.hvr-wobble-top:hover, .hvr-wobble-top:focus, .hvr-wobble-top:active
  -webkit-animation-name: hvr-wobble-top
  animation-name: hvr-wobble-top
  -webkit-animation-duration: 1s
  animation-duration: 1s
  -webkit-animation-timing-function: ease-in-out
  animation-timing-function: ease-in-out
  -webkit-animation-iteration-count: 1
  animation-iteration-count: 1

/* Wobble Bottom
@-webkit-keyframes hvr-wobble-bottom
  16.65%
    -webkit-transform: skew(-12deg)
    transform: skew(-12deg)

  33.3%
    -webkit-transform: skew(10deg)
    transform: skew(10deg)

  49.95%
    -webkit-transform: skew(-6deg)
    transform: skew(-6deg)

  66.6%
    -webkit-transform: skew(4deg)
    transform: skew(4deg)

  83.25%
    -webkit-transform: skew(-2deg)
    transform: skew(-2deg)

  100%
    -webkit-transform: skew(0)
    transform: skew(0)

@keyframes hvr-wobble-bottom
  16.65%
    -webkit-transform: skew(-12deg)
    transform: skew(-12deg)

  33.3%
    -webkit-transform: skew(10deg)
    transform: skew(10deg)

  49.95%
    -webkit-transform: skew(-6deg)
    transform: skew(-6deg)

  66.6%
    -webkit-transform: skew(4deg)
    transform: skew(4deg)

  83.25%
    -webkit-transform: skew(-2deg)
    transform: skew(-2deg)

  100%
    -webkit-transform: skew(0)
    transform: skew(0)

.hvr-wobble-bottom
  display: inline-block
  vertical-align: middle
  -webkit-transform: perspective(1px) translateZ(0)
  transform: perspective(1px) translateZ(0)
  box-shadow: 0 0 1px transparent
  -webkit-transform-origin: 100% 0
  transform-origin: 100% 0

.hvr-wobble-bottom:hover, .hvr-wobble-bottom:focus, .hvr-wobble-bottom:active
  -webkit-animation-name: hvr-wobble-bottom
  animation-name: hvr-wobble-bottom
  -webkit-animation-duration: 1s
  animation-duration: 1s
  -webkit-animation-timing-function: ease-in-out
  animation-timing-function: ease-in-out
  -webkit-animation-iteration-count: 1
  animation-iteration-count: 1

/* Wobble Skew
@-webkit-keyframes hvr-wobble-skew
  16.65%
    -webkit-transform: skew(-12deg)
    transform: skew(-12deg)

  33.3%
    -webkit-transform: skew(10deg)
    transform: skew(10deg)

  49.95%
    -webkit-transform: skew(-6deg)
    transform: skew(-6deg)

  66.6%
    -webkit-transform: skew(4deg)
    transform: skew(4deg)

  83.25%
    -webkit-transform: skew(-2deg)
    transform: skew(-2deg)

  100%
    -webkit-transform: skew(0)
    transform: skew(0)

@keyframes hvr-wobble-skew
  16.65%
    -webkit-transform: skew(-12deg)
    transform: skew(-12deg)

  33.3%
    -webkit-transform: skew(10deg)
    transform: skew(10deg)

  49.95%
    -webkit-transform: skew(-6deg)
    transform: skew(-6deg)

  66.6%
    -webkit-transform: skew(4deg)
    transform: skew(4deg)

  83.25%
    -webkit-transform: skew(-2deg)
    transform: skew(-2deg)

  100%
    -webkit-transform: skew(0)
    transform: skew(0)

.hvr-wobble-skew
  display: inline-block
  vertical-align: middle
  -webkit-transform: perspective(1px) translateZ(0)
  transform: perspective(1px) translateZ(0)
  box-shadow: 0 0 1px transparent

.hvr-wobble-skew:hover, .hvr-wobble-skew:focus, .hvr-wobble-skew:active
  -webkit-animation-name: hvr-wobble-skew
  animation-name: hvr-wobble-skew
  -webkit-animation-duration: 1s
  animation-duration: 1s
  -webkit-animation-timing-function: ease-in-out
  animation-timing-function: ease-in-out
  -webkit-animation-iteration-count: 1
  animation-iteration-count: 1

/* Buzz
@-webkit-keyframes hvr-buzz
  50%
    -webkit-transform: translateX(3px) rotate(2deg)
    transform: translateX(3px) rotate(2deg)

  100%
    -webkit-transform: translateX(-3px) rotate(-2deg)
    transform: translateX(-3px) rotate(-2deg)

@keyframes hvr-buzz
  50%
    -webkit-transform: translateX(3px) rotate(2deg)
    transform: translateX(3px) rotate(2deg)

  100%
    -webkit-transform: translateX(-3px) rotate(-2deg)
    transform: translateX(-3px) rotate(-2deg)

.hvr-buzz
  display: inline-block
  vertical-align: middle
  -webkit-transform: perspective(1px) translateZ(0)
  transform: perspective(1px) translateZ(0)
  box-shadow: 0 0 1px transparent

.hvr-buzz:hover, .hvr-buzz:focus, .hvr-buzz:active
  -webkit-animation-name: hvr-buzz
  animation-name: hvr-buzz
  -webkit-animation-duration: 0.15s
  animation-duration: 0.15s
  -webkit-animation-timing-function: linear
  animation-timing-function: linear
  -webkit-animation-iteration-count: infinite
  animation-iteration-count: infinite

/* Buzz Out
@-webkit-keyframes hvr-buzz-out
  10%
    -webkit-transform: translateX(3px) rotate(2deg)
    transform: translateX(3px) rotate(2deg)

  20%
    -webkit-transform: translateX(-3px) rotate(-2deg)
    transform: translateX(-3px) rotate(-2deg)

  30%
    -webkit-transform: translateX(3px) rotate(2deg)
    transform: translateX(3px) rotate(2deg)

  40%
    -webkit-transform: translateX(-3px) rotate(-2deg)
    transform: translateX(-3px) rotate(-2deg)

  50%
    -webkit-transform: translateX(2px) rotate(1deg)
    transform: translateX(2px) rotate(1deg)

  60%
    -webkit-transform: translateX(-2px) rotate(-1deg)
    transform: translateX(-2px) rotate(-1deg)

  70%
    -webkit-transform: translateX(2px) rotate(1deg)
    transform: translateX(2px) rotate(1deg)

  80%
    -webkit-transform: translateX(-2px) rotate(-1deg)
    transform: translateX(-2px) rotate(-1deg)

  90%
    -webkit-transform: translateX(1px) rotate(0)
    transform: translateX(1px) rotate(0)

  100%
    -webkit-transform: translateX(-1px) rotate(0)
    transform: translateX(-1px) rotate(0)

@keyframes hvr-buzz-out
  10%
    -webkit-transform: translateX(3px) rotate(2deg)
    transform: translateX(3px) rotate(2deg)

  20%
    -webkit-transform: translateX(-3px) rotate(-2deg)
    transform: translateX(-3px) rotate(-2deg)

  30%
    -webkit-transform: translateX(3px) rotate(2deg)
    transform: translateX(3px) rotate(2deg)

  40%
    -webkit-transform: translateX(-3px) rotate(-2deg)
    transform: translateX(-3px) rotate(-2deg)

  50%
    -webkit-transform: translateX(2px) rotate(1deg)
    transform: translateX(2px) rotate(1deg)

  60%
    -webkit-transform: translateX(-2px) rotate(-1deg)
    transform: translateX(-2px) rotate(-1deg)

  70%
    -webkit-transform: translateX(2px) rotate(1deg)
    transform: translateX(2px) rotate(1deg)

  80%
    -webkit-transform: translateX(-2px) rotate(-1deg)
    transform: translateX(-2px) rotate(-1deg)

  90%
    -webkit-transform: translateX(1px) rotate(0)
    transform: translateX(1px) rotate(0)

  100%
    -webkit-transform: translateX(-1px) rotate(0)
    transform: translateX(-1px) rotate(0)

.hvr-buzz-out
  display: inline-block
  vertical-align: middle
  -webkit-transform: perspective(1px) translateZ(0)
  transform: perspective(1px) translateZ(0)
  box-shadow: 0 0 1px transparent

.hvr-buzz-out:hover, .hvr-buzz-out:focus, .hvr-buzz-out:active
  -webkit-animation-name: hvr-buzz-out
  animation-name: hvr-buzz-out
  -webkit-animation-duration: 0.75s
  animation-duration: 0.75s
  -webkit-animation-timing-function: linear
  animation-timing-function: linear
  -webkit-animation-iteration-count: 1
  animation-iteration-count: 1

/* Forward
.hvr-forward
  display: inline-block
  vertical-align: middle
  -webkit-transform: perspective(1px) translateZ(0)
  transform: perspective(1px) translateZ(0)
  box-shadow: 0 0 1px transparent
  -webkit-transition-duration: 0.3s
  transition-duration: 0.3s
  -webkit-transition-property: transform
  transition-property: transform

.hvr-forward:hover, .hvr-forward:focus, .hvr-forward:active
  -webkit-transform: translateX(8px)
  transform: translateX(8px)

/* Backward
.hvr-backward
  display: inline-block
  vertical-align: middle
  -webkit-transform: perspective(1px) translateZ(0)
  transform: perspective(1px) translateZ(0)
  box-shadow: 0 0 1px transparent
  -webkit-transition-duration: 0.3s
  transition-duration: 0.3s
  -webkit-transition-property: transform
  transition-property: transform

.hvr-backward:hover, .hvr-backward:focus, .hvr-backward:active
  -webkit-transform: translateX(-8px)
  transform: translateX(-8px)

/* BACKGROUND TRANSITIONS
/* Fade
.hvr-fade
  display: inline-block
  vertical-align: middle
  -webkit-transform: perspective(1px) translateZ(0)
  transform: perspective(1px) translateZ(0)
  box-shadow: 0 0 1px transparent
  overflow: hidden
  -webkit-transition-duration: 0.3s
  transition-duration: 0.3s
  -webkit-transition-property: color, background-color
  transition-property: color, background-color

.hvr-fade:hover, .hvr-fade:focus, .hvr-fade:active
  background-color: #2098D1
  color: white

/* Back Pulse
@-webkit-keyframes hvr-back-pulse
  50%
    background-color: rgba(32, 152, 209, 0.75)

@keyframes hvr-back-pulse
  50%
    background-color: rgba(32, 152, 209, 0.75)

.hvr-back-pulse
  display: inline-block
  vertical-align: middle
  -webkit-transform: perspective(1px) translateZ(0)
  transform: perspective(1px) translateZ(0)
  box-shadow: 0 0 1px transparent
  overflow: hidden
  -webkit-transition-duration: 0.5s
  transition-duration: 0.5s
  -webkit-transition-property: color, background-color
  transition-property: color, background-color

.hvr-back-pulse:hover, .hvr-back-pulse:focus, .hvr-back-pulse:active
  -webkit-animation-name: hvr-back-pulse
  animation-name: hvr-back-pulse
  -webkit-animation-duration: 1s
  animation-duration: 1s
  -webkit-animation-delay: 0.5s
  animation-delay: 0.5s
  -webkit-animation-timing-function: linear
  animation-timing-function: linear
  -webkit-animation-iteration-count: infinite
  animation-iteration-count: infinite
  background-color: #2098D1
  background-color: #2098d1
  color: white

/* Sweep To Right
.hvr-sweep-to-right
  display: inline-block
  vertical-align: middle
  -webkit-transform: perspective(1px) translateZ(0)
  transform: perspective(1px) translateZ(0)
  box-shadow: 0 0 1px transparent
  position: relative
  -webkit-transition-property: color
  transition-property: color
  -webkit-transition-duration: 0.3s
  transition-duration: 0.3s

.hvr-sweep-to-right:before
  content: ""
  position: absolute
  z-index: -1
  top: 0
  left: 0
  right: 0
  bottom: 0
  background: #2098D1
  -webkit-transform: scaleX(0)
  transform: scaleX(0)
  -webkit-transform-origin: 0 50%
  transform-origin: 0 50%
  -webkit-transition-property: transform
  transition-property: transform
  -webkit-transition-duration: 0.3s
  transition-duration: 0.3s
  -webkit-transition-timing-function: ease-out
  transition-timing-function: ease-out

.hvr-sweep-to-right:hover, .hvr-sweep-to-right:focus, .hvr-sweep-to-right:active
  color: white

.hvr-sweep-to-right:hover:before, .hvr-sweep-to-right:focus:before, .hvr-sweep-to-right:active:before
  -webkit-transform: scaleX(1)
  transform: scaleX(1)

/* Sweep To Left
.hvr-sweep-to-left
  display: inline-block
  vertical-align: middle
  -webkit-transform: perspective(1px) translateZ(0)
  transform: perspective(1px) translateZ(0)
  box-shadow: 0 0 1px transparent
  position: relative
  -webkit-transition-property: color
  transition-property: color
  -webkit-transition-duration: 0.3s
  transition-duration: 0.3s

.hvr-sweep-to-left:before
  content: ""
  position: absolute
  z-index: -1
  top: 0
  left: 0
  right: 0
  bottom: 0
  background: #2098D1
  -webkit-transform: scaleX(0)
  transform: scaleX(0)
  -webkit-transform-origin: 100% 50%
  transform-origin: 100% 50%
  -webkit-transition-property: transform
  transition-property: transform
  -webkit-transition-duration: 0.3s
  transition-duration: 0.3s
  -webkit-transition-timing-function: ease-out
  transition-timing-function: ease-out

.hvr-sweep-to-left:hover, .hvr-sweep-to-left:focus, .hvr-sweep-to-left:active
  color: white

.hvr-sweep-to-left:hover:before, .hvr-sweep-to-left:focus:before, .hvr-sweep-to-left:active:before
  -webkit-transform: scaleX(1)
  transform: scaleX(1)

/* Sweep To Bottom
.hvr-sweep-to-bottom
  display: inline-block
  vertical-align: middle
  -webkit-transform: perspective(1px) translateZ(0)
  transform: perspective(1px) translateZ(0)
  box-shadow: 0 0 1px transparent
  position: relative
  -webkit-transition-property: color
  transition-property: color
  -webkit-transition-duration: 0.3s
  transition-duration: 0.3s

.hvr-sweep-to-bottom:before
  content: ""
  position: absolute
  z-index: -1
  top: 0
  left: 0
  right: 0
  bottom: 0
  background: #2098D1
  -webkit-transform: scaleY(0)
  transform: scaleY(0)
  -webkit-transform-origin: 50% 0
  transform-origin: 50% 0
  -webkit-transition-property: transform
  transition-property: transform
  -webkit-transition-duration: 0.3s
  transition-duration: 0.3s
  -webkit-transition-timing-function: ease-out
  transition-timing-function: ease-out

.hvr-sweep-to-bottom:hover, .hvr-sweep-to-bottom:focus, .hvr-sweep-to-bottom:active
  color: white

.hvr-sweep-to-bottom:hover:before, .hvr-sweep-to-bottom:focus:before, .hvr-sweep-to-bottom:active:before
  -webkit-transform: scaleY(1)
  transform: scaleY(1)

/* Sweep To Top
.hvr-sweep-to-top
  display: inline-block
  vertical-align: middle
  -webkit-transform: perspective(1px) translateZ(0)
  transform: perspective(1px) translateZ(0)
  box-shadow: 0 0 1px transparent
  position: relative
  -webkit-transition-property: color
  transition-property: color
  -webkit-transition-duration: 0.3s
  transition-duration: 0.3s

.hvr-sweep-to-top:before
  content: ""
  position: absolute
  z-index: -1
  top: 0
  left: 0
  right: 0
  bottom: 0
  background: #2098D1
  -webkit-transform: scaleY(0)
  transform: scaleY(0)
  -webkit-transform-origin: 50% 100%
  transform-origin: 50% 100%
  -webkit-transition-property: transform
  transition-property: transform
  -webkit-transition-duration: 0.3s
  transition-duration: 0.3s
  -webkit-transition-timing-function: ease-out
  transition-timing-function: ease-out

.hvr-sweep-to-top:hover, .hvr-sweep-to-top:focus, .hvr-sweep-to-top:active
  color: white

.hvr-sweep-to-top:hover:before, .hvr-sweep-to-top:focus:before, .hvr-sweep-to-top:active:before
  -webkit-transform: scaleY(1)
  transform: scaleY(1)

/* Bounce To Right
.hvr-bounce-to-right
  display: inline-block
  vertical-align: middle
  -webkit-transform: perspective(1px) translateZ(0)
  transform: perspective(1px) translateZ(0)
  box-shadow: 0 0 1px transparent
  position: relative
  -webkit-transition-property: color
  transition-property: color
  -webkit-transition-duration: 0.5s
  transition-duration: 0.5s

.hvr-bounce-to-right:before
  content: ""
  position: absolute
  z-index: -1
  top: 0
  left: 0
  right: 0
  bottom: 0
  background: #2098D1
  -webkit-transform: scaleX(0)
  transform: scaleX(0)
  -webkit-transform-origin: 0 50%
  transform-origin: 0 50%
  -webkit-transition-property: transform
  transition-property: transform
  -webkit-transition-duration: 0.5s
  transition-duration: 0.5s
  -webkit-transition-timing-function: ease-out
  transition-timing-function: ease-out

.hvr-bounce-to-right:hover, .hvr-bounce-to-right:focus, .hvr-bounce-to-right:active
  color: white

.hvr-bounce-to-right:hover:before, .hvr-bounce-to-right:focus:before, .hvr-bounce-to-right:active:before
  -webkit-transform: scaleX(1)
  transform: scaleX(1)
  -webkit-transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66)
  transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66)

/* Bounce To Left
.hvr-bounce-to-left
  display: inline-block
  vertical-align: middle
  -webkit-transform: perspective(1px) translateZ(0)
  transform: perspective(1px) translateZ(0)
  box-shadow: 0 0 1px transparent
  position: relative
  -webkit-transition-property: color
  transition-property: color
  -webkit-transition-duration: 0.5s
  transition-duration: 0.5s

.hvr-bounce-to-left:before
  content: ""
  position: absolute
  z-index: -1
  top: 0
  left: 0
  right: 0
  bottom: 0
  background: #2098D1
  -webkit-transform: scaleX(0)
  transform: scaleX(0)
  -webkit-transform-origin: 100% 50%
  transform-origin: 100% 50%
  -webkit-transition-property: transform
  transition-property: transform
  -webkit-transition-duration: 0.5s
  transition-duration: 0.5s
  -webkit-transition-timing-function: ease-out
  transition-timing-function: ease-out

.hvr-bounce-to-left:hover, .hvr-bounce-to-left:focus, .hvr-bounce-to-left:active
  color: white

.hvr-bounce-to-left:hover:before, .hvr-bounce-to-left:focus:before, .hvr-bounce-to-left:active:before
  -webkit-transform: scaleX(1)
  transform: scaleX(1)
  -webkit-transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66)
  transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66)

/* Bounce To Bottom
.hvr-bounce-to-bottom
  display: inline-block
  vertical-align: middle
  -webkit-transform: perspective(1px) translateZ(0)
  transform: perspective(1px) translateZ(0)
  box-shadow: 0 0 1px transparent
  position: relative
  -webkit-transition-property: color
  transition-property: color
  -webkit-transition-duration: 0.5s
  transition-duration: 0.5s

.hvr-bounce-to-bottom:before
  content: ""
  position: absolute
  z-index: -1
  top: 0
  left: 0
  right: 0
  bottom: 0
  background: #2098D1
  -webkit-transform: scaleY(0)
  transform: scaleY(0)
  -webkit-transform-origin: 50% 0
  transform-origin: 50% 0
  -webkit-transition-property: transform
  transition-property: transform
  -webkit-transition-duration: 0.5s
  transition-duration: 0.5s
  -webkit-transition-timing-function: ease-out
  transition-timing-function: ease-out

.hvr-bounce-to-bottom:hover, .hvr-bounce-to-bottom:focus, .hvr-bounce-to-bottom:active
  color: white

.hvr-bounce-to-bottom:hover:before, .hvr-bounce-to-bottom:focus:before, .hvr-bounce-to-bottom:active:before
  -webkit-transform: scaleY(1)
  transform: scaleY(1)
  -webkit-transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66)
  transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66)

/* Bounce To Top
.hvr-bounce-to-top
  display: inline-block
  vertical-align: middle
  -webkit-transform: perspective(1px) translateZ(0)
  transform: perspective(1px) translateZ(0)
  box-shadow: 0 0 1px transparent
  position: relative
  -webkit-transition-property: color
  transition-property: color
  -webkit-transition-duration: 0.5s
  transition-duration: 0.5s

.hvr-bounce-to-top:before
  content: ""
  position: absolute
  z-index: -1
  top: 0
  left: 0
  right: 0
  bottom: 0
  background: #2098D1
  -webkit-transform: scaleY(0)
  transform: scaleY(0)
  -webkit-transform-origin: 50% 100%
  transform-origin: 50% 100%
  -webkit-transition-property: transform
  transition-property: transform
  -webkit-transition-duration: 0.5s
  transition-duration: 0.5s
  -webkit-transition-timing-function: ease-out
  transition-timing-function: ease-out

.hvr-bounce-to-top:hover, .hvr-bounce-to-top:focus, .hvr-bounce-to-top:active
  color: white

.hvr-bounce-to-top:hover:before, .hvr-bounce-to-top:focus:before, .hvr-bounce-to-top:active:before
  -webkit-transform: scaleY(1)
  transform: scaleY(1)
  -webkit-transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66)
  transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66)

/* Radial Out
.hvr-radial-out
  display: inline-block
  vertical-align: middle
  -webkit-transform: perspective(1px) translateZ(0)
  transform: perspective(1px) translateZ(0)
  box-shadow: 0 0 1px transparent
  position: relative
  overflow: hidden
  background: #e1e1e1
  -webkit-transition-property: color
  transition-property: color
  -webkit-transition-duration: 0.3s
  transition-duration: 0.3s

.hvr-radial-out:before
  content: ""
  position: absolute
  z-index: -1
  top: 0
  left: 0
  right: 0
  bottom: 0
  background: #2098D1
  border-radius: 100%
  -webkit-transform: scale(0)
  transform: scale(0)
  -webkit-transition-property: transform
  transition-property: transform
  -webkit-transition-duration: 0.3s
  transition-duration: 0.3s
  -webkit-transition-timing-function: ease-out
  transition-timing-function: ease-out

.hvr-radial-out:hover, .hvr-radial-out:focus, .hvr-radial-out:active
  color: white

.hvr-radial-out:hover:before, .hvr-radial-out:focus:before, .hvr-radial-out:active:before
  -webkit-transform: scale(2)
  transform: scale(2)

/* Radial In
.hvr-radial-in
  display: inline-block
  vertical-align: middle
  -webkit-transform: perspective(1px) translateZ(0)
  transform: perspective(1px) translateZ(0)
  box-shadow: 0 0 1px transparent
  position: relative
  overflow: hidden
  background: #2098D1
  -webkit-transition-property: color
  transition-property: color
  -webkit-transition-duration: 0.3s
  transition-duration: 0.3s

.hvr-radial-in:before
  content: ""
  position: absolute
  z-index: -1
  top: 0
  left: 0
  right: 0
  bottom: 0
  background: #e1e1e1
  border-radius: 100%
  -webkit-transform: scale(2)
  transform: scale(2)
  -webkit-transition-property: transform
  transition-property: transform
  -webkit-transition-duration: 0.3s
  transition-duration: 0.3s
  -webkit-transition-timing-function: ease-out
  transition-timing-function: ease-out

.hvr-radial-in:hover, .hvr-radial-in:focus, .hvr-radial-in:active
  color: white

.hvr-radial-in:hover:before, .hvr-radial-in:focus:before, .hvr-radial-in:active:before
  -webkit-transform: scale(0)
  transform: scale(0)

/* Rectangle In
.hvr-rectangle-in
  display: inline-block
  vertical-align: middle
  -webkit-transform: perspective(1px) translateZ(0)
  transform: perspective(1px) translateZ(0)
  box-shadow: 0 0 1px transparent
  position: relative
  background: #2098D1
  -webkit-transition-property: color
  transition-property: color
  -webkit-transition-duration: 0.3s
  transition-duration: 0.3s

.hvr-rectangle-in:before
  content: ""
  position: absolute
  z-index: -1
  top: 0
  left: 0
  right: 0
  bottom: 0
  background: #e1e1e1
  -webkit-transform: scale(1)
  transform: scale(1)
  -webkit-transition-property: transform
  transition-property: transform
  -webkit-transition-duration: 0.3s
  transition-duration: 0.3s
  -webkit-transition-timing-function: ease-out
  transition-timing-function: ease-out

.hvr-rectangle-in:hover, .hvr-rectangle-in:focus, .hvr-rectangle-in:active
  color: white

.hvr-rectangle-in:hover:before, .hvr-rectangle-in:focus:before, .hvr-rectangle-in:active:before
  -webkit-transform: scale(0)
  transform: scale(0)

/* Rectangle Out
.hvr-rectangle-out
  display: inline-block
  vertical-align: middle
  -webkit-transform: perspective(1px) translateZ(0)
  transform: perspective(1px) translateZ(0)
  box-shadow: 0 0 1px transparent
  position: relative
  background: #e1e1e1
  -webkit-transition-property: color
  transition-property: color
  -webkit-transition-duration: 0.3s
  transition-duration: 0.3s

.hvr-rectangle-out:before
  content: ""
  position: absolute
  z-index: -1
  top: 0
  left: 0
  right: 0
  bottom: 0
  background: #2098D1
  -webkit-transform: scale(0)
  transform: scale(0)
  -webkit-transition-property: transform
  transition-property: transform
  -webkit-transition-duration: 0.3s
  transition-duration: 0.3s
  -webkit-transition-timing-function: ease-out
  transition-timing-function: ease-out

.hvr-rectangle-out:hover, .hvr-rectangle-out:focus, .hvr-rectangle-out:active
  color: white

.hvr-rectangle-out:hover:before, .hvr-rectangle-out:focus:before, .hvr-rectangle-out:active:before
  -webkit-transform: scale(1)
  transform: scale(1)

/* Shutter In Horizontal
.hvr-shutter-in-horizontal
  display: inline-block
  vertical-align: middle
  -webkit-transform: perspective(1px) translateZ(0)
  transform: perspective(1px) translateZ(0)
  box-shadow: 0 0 1px transparent
  position: relative
  background: #2098D1
  -webkit-transition-property: color
  transition-property: color
  -webkit-transition-duration: 0.3s
  transition-duration: 0.3s

.hvr-shutter-in-horizontal:before
  content: ""
  position: absolute
  z-index: -1
  top: 0
  bottom: 0
  left: 0
  right: 0
  background: #e1e1e1
  -webkit-transform: scaleX(1)
  transform: scaleX(1)
  -webkit-transform-origin: 50%
  transform-origin: 50%
  -webkit-transition-property: transform
  transition-property: transform
  -webkit-transition-duration: 0.3s
  transition-duration: 0.3s
  -webkit-transition-timing-function: ease-out
  transition-timing-function: ease-out

.hvr-shutter-in-horizontal:hover, .hvr-shutter-in-horizontal:focus, .hvr-shutter-in-horizontal:active
  color: white

.hvr-shutter-in-horizontal:hover:before, .hvr-shutter-in-horizontal:focus:before, .hvr-shutter-in-horizontal:active:before
  -webkit-transform: scaleX(0)
  transform: scaleX(0)

/* Shutter Out Horizontal
.hvr-shutter-out-horizontal
  display: inline-block
  vertical-align: middle
  -webkit-transform: perspective(1px) translateZ(0)
  transform: perspective(1px) translateZ(0)
  box-shadow: 0 0 1px transparent
  position: relative
  background: #e1e1e1
  -webkit-transition-property: color
  transition-property: color
  -webkit-transition-duration: 0.3s
  transition-duration: 0.3s

.hvr-shutter-out-horizontal:before
  content: ""
  position: absolute
  z-index: -1
  top: 0
  bottom: 0
  left: 0
  right: 0
  background: #2098D1
  -webkit-transform: scaleX(0)
  transform: scaleX(0)
  -webkit-transform-origin: 50%
  transform-origin: 50%
  -webkit-transition-property: transform
  transition-property: transform
  -webkit-transition-duration: 0.3s
  transition-duration: 0.3s
  -webkit-transition-timing-function: ease-out
  transition-timing-function: ease-out

.hvr-shutter-out-horizontal:hover, .hvr-shutter-out-horizontal:focus, .hvr-shutter-out-horizontal:active
  color: white

.hvr-shutter-out-horizontal:hover:before, .hvr-shutter-out-horizontal:focus:before, .hvr-shutter-out-horizontal:active:before
  -webkit-transform: scaleX(1)
  transform: scaleX(1)

/* Shutter In Vertical
.hvr-shutter-in-vertical
  display: inline-block
  vertical-align: middle
  -webkit-transform: perspective(1px) translateZ(0)
  transform: perspective(1px) translateZ(0)
  box-shadow: 0 0 1px transparent
  position: relative
  background: #2098D1
  -webkit-transition-property: color
  transition-property: color
  -webkit-transition-duration: 0.3s
  transition-duration: 0.3s

.hvr-shutter-in-vertical:before
  content: ""
  position: absolute
  z-index: -1
  top: 0
  bottom: 0
  left: 0
  right: 0
  background: #e1e1e1
  -webkit-transform: scaleY(1)
  transform: scaleY(1)
  -webkit-transform-origin: 50%
  transform-origin: 50%
  -webkit-transition-property: transform
  transition-property: transform
  -webkit-transition-duration: 0.3s
  transition-duration: 0.3s
  -webkit-transition-timing-function: ease-out
  transition-timing-function: ease-out

.hvr-shutter-in-vertical:hover, .hvr-shutter-in-vertical:focus, .hvr-shutter-in-vertical:active
  color: white

.hvr-shutter-in-vertical:hover:before, .hvr-shutter-in-vertical:focus:before, .hvr-shutter-in-vertical:active:before
  -webkit-transform: scaleY(0)
  transform: scaleY(0)

/* Shutter Out Vertical
.hvr-shutter-out-vertical
  display: inline-block
  vertical-align: middle
  -webkit-transform: perspective(1px) translateZ(0)
  transform: perspective(1px) translateZ(0)
  box-shadow: 0 0 1px transparent
  position: relative
  background: #e1e1e1
  -webkit-transition-property: color
  transition-property: color
  -webkit-transition-duration: 0.3s
  transition-duration: 0.3s

.hvr-shutter-out-vertical:before
  content: ""
  position: absolute
  z-index: -1
  top: 0
  bottom: 0
  left: 0
  right: 0
  background: #2098D1
  -webkit-transform: scaleY(0)
  transform: scaleY(0)
  -webkit-transform-origin: 50%
  transform-origin: 50%
  -webkit-transition-property: transform
  transition-property: transform
  -webkit-transition-duration: 0.3s
  transition-duration: 0.3s
  -webkit-transition-timing-function: ease-out
  transition-timing-function: ease-out

.hvr-shutter-out-vertical:hover, .hvr-shutter-out-vertical:focus, .hvr-shutter-out-vertical:active
  color: white

.hvr-shutter-out-vertical:hover:before, .hvr-shutter-out-vertical:focus:before, .hvr-shutter-out-vertical:active:before
  -webkit-transform: scaleY(1)
  transform: scaleY(1)

/* BORDER TRANSITIONS
/* Border Fade
.hvr-border-fade
  display: inline-block
  vertical-align: middle
  -webkit-transform: perspective(1px) translateZ(0)
  transform: perspective(1px) translateZ(0)
  box-shadow: 0 0 1px transparent
  -webkit-transition-duration: 0.3s
  transition-duration: 0.3s
  -webkit-transition-property: box-shadow
  transition-property: box-shadow
  box-shadow: inset 0 0 0 4px #e1e1e1, 0 0 1px transparent

  /* Hack to improve aliasing on mobile/tablet devices

.hvr-border-fade:hover, .hvr-border-fade:focus, .hvr-border-fade:active
  box-shadow: inset 0 0 0 4px #2098D1, 0 0 1px transparent

  /* Hack to improve aliasing on mobile/tablet devices

/* Hollow
.hvr-hollow
  display: inline-block
  vertical-align: middle
  -webkit-transform: perspective(1px) translateZ(0)
  transform: perspective(1px) translateZ(0)
  box-shadow: 0 0 1px transparent
  -webkit-transition-duration: 0.3s
  transition-duration: 0.3s
  -webkit-transition-property: background
  transition-property: background
  box-shadow: inset 0 0 0 4px #e1e1e1, 0 0 1px transparent

  /* Hack to improve aliasing on mobile/tablet devices

.hvr-hollow:hover, .hvr-hollow:focus, .hvr-hollow:active
  background: none

/* Trim
.hvr-trim
  display: inline-block
  vertical-align: middle
  -webkit-transform: perspective(1px) translateZ(0)
  transform: perspective(1px) translateZ(0)
  box-shadow: 0 0 1px transparent
  position: relative

.hvr-trim:before
  content: ''
  position: absolute
  border: white solid 4px
  top: 4px
  left: 4px
  right: 4px
  bottom: 4px
  opacity: 0
  -webkit-transition-duration: 0.3s
  transition-duration: 0.3s
  -webkit-transition-property: opacity
  transition-property: opacity

.hvr-trim:hover:before, .hvr-trim:focus:before, .hvr-trim:active:before
  opacity: 1

/* Ripple Out
@-webkit-keyframes hvr-ripple-out
  100%
    top: -12px
    right: -12px
    bottom: -12px
    left: -12px
    opacity: 0

@keyframes hvr-ripple-out
  100%
    top: -12px
    right: -12px
    bottom: -12px
    left: -12px
    opacity: 0

.hvr-ripple-out
  display: inline-block
  vertical-align: middle
  -webkit-transform: perspective(1px) translateZ(0)
  transform: perspective(1px) translateZ(0)
  box-shadow: 0 0 1px transparent
  position: relative

.hvr-ripple-out:before
  content: ''
  position: absolute
  border: #e1e1e1 solid 6px
  top: 0
  right: 0
  bottom: 0
  left: 0
  -webkit-animation-duration: 1s
  animation-duration: 1s

.hvr-ripple-out:hover:before, .hvr-ripple-out:focus:before, .hvr-ripple-out:active:before
  -webkit-animation-name: hvr-ripple-out
  animation-name: hvr-ripple-out

/* Ripple In
@-webkit-keyframes hvr-ripple-in
  100%
    top: 0
    right: 0
    bottom: 0
    left: 0
    opacity: 1

@keyframes hvr-ripple-in
  100%
    top: 0
    right: 0
    bottom: 0
    left: 0
    opacity: 1

.hvr-ripple-in
  display: inline-block
  vertical-align: middle
  -webkit-transform: perspective(1px) translateZ(0)
  transform: perspective(1px) translateZ(0)
  box-shadow: 0 0 1px transparent
  position: relative

.hvr-ripple-in:before
  content: ''
  position: absolute
  border: #e1e1e1 solid 4px
  top: -12px
  right: -12px
  bottom: -12px
  left: -12px
  opacity: 0
  -webkit-animation-duration: 1s
  animation-duration: 1s

.hvr-ripple-in:hover:before, .hvr-ripple-in:focus:before, .hvr-ripple-in:active:before
  -webkit-animation-name: hvr-ripple-in
  animation-name: hvr-ripple-in

/* Outline Out
.hvr-outline-out
  display: inline-block
  vertical-align: middle
  -webkit-transform: perspective(1px) translateZ(0)
  transform: perspective(1px) translateZ(0)
  box-shadow: 0 0 1px transparent
  position: relative

.hvr-outline-out:before
  content: ''
  position: absolute
  border: #e1e1e1 solid 4px
  top: 0
  right: 0
  bottom: 0
  left: 0
  -webkit-transition-duration: 0.3s
  transition-duration: 0.3s
  -webkit-transition-property: top, right, bottom, left
  transition-property: top, right, bottom, left

.hvr-outline-out:hover:before, .hvr-outline-out:focus:before, .hvr-outline-out:active:before
  top: -8px
  right: -8px
  bottom: -8px
  left: -8px

/* Outline In
.hvr-outline-in
  display: inline-block
  vertical-align: middle
  -webkit-transform: perspective(1px) translateZ(0)
  transform: perspective(1px) translateZ(0)
  box-shadow: 0 0 1px transparent
  position: relative

.hvr-outline-in:before
  pointer-events: none
  content: ''
  position: absolute
  border: #e1e1e1 solid 4px
  top: -16px
  right: -16px
  bottom: -16px
  left: -16px
  opacity: 0
  -webkit-transition-duration: 0.3s
  transition-duration: 0.3s
  -webkit-transition-property: top, right, bottom, left
  transition-property: top, right, bottom, left

.hvr-outline-in:hover:before, .hvr-outline-in:focus:before, .hvr-outline-in:active:before
  top: -8px
  right: -8px
  bottom: -8px
  left: -8px
  opacity: 1

/* Round Corners
.hvr-round-corners
  display: inline-block
  vertical-align: middle
  -webkit-transform: perspective(1px) translateZ(0)
  transform: perspective(1px) translateZ(0)
  box-shadow: 0 0 1px transparent
  -webkit-transition-duration: 0.3s
  transition-duration: 0.3s
  -webkit-transition-property: border-radius
  transition-property: border-radius

.hvr-round-corners:hover, .hvr-round-corners:focus, .hvr-round-corners:active
  border-radius: 1em

/* Underline From Left
.hvr-underline-from-left
  display: inline-block
  vertical-align: middle
  -webkit-transform: perspective(1px) translateZ(0)
  transform: perspective(1px) translateZ(0)
  box-shadow: 0 0 1px transparent
  position: relative
  overflow: hidden

.hvr-underline-from-left:before
  content: ""
  position: absolute
  z-index: -1
  left: 0
  right: 100%
  bottom: 0
  background: #2098D1
  height: 4px
  -webkit-transition-property: right
  transition-property: right
  -webkit-transition-duration: 0.3s
  transition-duration: 0.3s
  -webkit-transition-timing-function: ease-out
  transition-timing-function: ease-out

.hvr-underline-from-left:hover:before, .hvr-underline-from-left:focus:before, .hvr-underline-from-left:active:before
  right: 0

/* Underline From Center
.hvr-underline-from-center
  display: inline-block
  vertical-align: middle
  -webkit-transform: perspective(1px) translateZ(0)
  transform: perspective(1px) translateZ(0)
  box-shadow: 0 0 1px transparent
  position: relative
  overflow: hidden

.hvr-underline-from-center:before
  content: ""
  position: absolute
  z-index: -1
  left: 50%
  right: 50%
  bottom: 0
  background: #2098D1
  height: 4px
  -webkit-transition-property: left, right
  transition-property: left, right
  -webkit-transition-duration: 0.3s
  transition-duration: 0.3s
  -webkit-transition-timing-function: ease-out
  transition-timing-function: ease-out

.hvr-underline-from-center:hover:before, .hvr-underline-from-center:focus:before, .hvr-underline-from-center:active:before
  left: 0
  right: 0

/* Underline From Right
.hvr-underline-from-right
  display: inline-block
  vertical-align: middle
  -webkit-transform: perspective(1px) translateZ(0)
  transform: perspective(1px) translateZ(0)
  box-shadow: 0 0 1px transparent
  position: relative
  overflow: hidden

.hvr-underline-from-right:before
  content: ""
  position: absolute
  z-index: -1
  left: 100%
  right: 0
  bottom: 0
  background: #2098D1
  height: 4px
  -webkit-transition-property: left
  transition-property: left
  -webkit-transition-duration: 0.3s
  transition-duration: 0.3s
  -webkit-transition-timing-function: ease-out
  transition-timing-function: ease-out

.hvr-underline-from-right:hover:before, .hvr-underline-from-right:focus:before, .hvr-underline-from-right:active:before
  left: 0

/* Overline From Left
.hvr-overline-from-left
  display: inline-block
  vertical-align: middle
  -webkit-transform: perspective(1px) translateZ(0)
  transform: perspective(1px) translateZ(0)
  box-shadow: 0 0 1px transparent
  position: relative
  overflow: hidden

.hvr-overline-from-left:before
  content: ""
  position: absolute
  z-index: -1
  left: 0
  right: 100%
  top: 0
  background: #2098D1
  height: 4px
  -webkit-transition-property: right
  transition-property: right
  -webkit-transition-duration: 0.3s
  transition-duration: 0.3s
  -webkit-transition-timing-function: ease-out
  transition-timing-function: ease-out

.hvr-overline-from-left:hover:before, .hvr-overline-from-left:focus:before, .hvr-overline-from-left:active:before
  right: 0

/* Overline From Center
.hvr-overline-from-center
  display: inline-block
  vertical-align: middle
  -webkit-transform: perspective(1px) translateZ(0)
  transform: perspective(1px) translateZ(0)
  box-shadow: 0 0 1px transparent
  position: relative
  overflow: hidden

.hvr-overline-from-center:before
  content: ""
  position: absolute
  z-index: -1
  left: 50%
  right: 50%
  top: 0
  background: #2098D1
  height: 4px
  -webkit-transition-property: left, right
  transition-property: left, right
  -webkit-transition-duration: 0.3s
  transition-duration: 0.3s
  -webkit-transition-timing-function: ease-out
  transition-timing-function: ease-out

.hvr-overline-from-center:hover:before, .hvr-overline-from-center:focus:before, .hvr-overline-from-center:active:before
  left: 0
  right: 0

/* Overline From Right
.hvr-overline-from-right
  display: inline-block
  vertical-align: middle
  -webkit-transform: perspective(1px) translateZ(0)
  transform: perspective(1px) translateZ(0)
  box-shadow: 0 0 1px transparent
  position: relative
  overflow: hidden

.hvr-overline-from-right:before
  content: ""
  position: absolute
  z-index: -1
  left: 100%
  right: 0
  top: 0
  background: #2098D1
  height: 4px
  -webkit-transition-property: left
  transition-property: left
  -webkit-transition-duration: 0.3s
  transition-duration: 0.3s
  -webkit-transition-timing-function: ease-out
  transition-timing-function: ease-out

.hvr-overline-from-right:hover:before, .hvr-overline-from-right:focus:before, .hvr-overline-from-right:active:before
  left: 0

/* Reveal
.hvr-reveal
  display: inline-block
  vertical-align: middle
  -webkit-transform: perspective(1px) translateZ(0)
  transform: perspective(1px) translateZ(0)
  box-shadow: 0 0 1px transparent
  position: relative
  overflow: hidden

.hvr-reveal:before
  content: ""
  position: absolute
  z-index: -1
  left: 0
  right: 0
  top: 0
  bottom: 0
  border-color: #2098D1
  border-style: solid
  border-width: 0
  -webkit-transition-property: border-width
  transition-property: border-width
  -webkit-transition-duration: 0.1s
  transition-duration: 0.1s
  -webkit-transition-timing-function: ease-out
  transition-timing-function: ease-out

.hvr-reveal:hover:before, .hvr-reveal:focus:before, .hvr-reveal:active:before
  -webkit-transform: translateY(0)
  transform: translateY(0)
  border-width: 4px

/* Underline Reveal
.hvr-underline-reveal
  display: inline-block
  vertical-align: middle
  -webkit-transform: perspective(1px) translateZ(0)
  transform: perspective(1px) translateZ(0)
  box-shadow: 0 0 1px transparent
  position: relative
  overflow: hidden

.hvr-underline-reveal:before
  content: ""
  position: absolute
  z-index: -1
  left: 0
  right: 0
  bottom: 0
  background: #2098D1
  height: 4px
  -webkit-transform: translateY(4px)
  transform: translateY(4px)
  -webkit-transition-property: transform
  transition-property: transform
  -webkit-transition-duration: 0.3s
  transition-duration: 0.3s
  -webkit-transition-timing-function: ease-out
  transition-timing-function: ease-out

.hvr-underline-reveal:hover:before, .hvr-underline-reveal:focus:before, .hvr-underline-reveal:active:before
  -webkit-transform: translateY(0)
  transform: translateY(0)

/* Overline Reveal
.hvr-overline-reveal
  display: inline-block
  vertical-align: middle
  -webkit-transform: perspective(1px) translateZ(0)
  transform: perspective(1px) translateZ(0)
  box-shadow: 0 0 1px transparent
  position: relative
  overflow: hidden

.hvr-overline-reveal:before
  content: ""
  position: absolute
  z-index: -1
  left: 0
  right: 0
  top: 0
  background: #2098D1
  height: 4px
  -webkit-transform: translateY(-4px)
  transform: translateY(-4px)
  -webkit-transition-property: transform
  transition-property: transform
  -webkit-transition-duration: 0.3s
  transition-duration: 0.3s
  -webkit-transition-timing-function: ease-out
  transition-timing-function: ease-out

.hvr-overline-reveal:hover:before, .hvr-overline-reveal:focus:before, .hvr-overline-reveal:active:before
  -webkit-transform: translateY(0)
  transform: translateY(0)

/* SHADOW/GLOW TRANSITIONS
/* Glow
.hvr-glow
  display: inline-block
  vertical-align: middle
  -webkit-transform: perspective(1px) translateZ(0)
  transform: perspective(1px) translateZ(0)
  box-shadow: 0 0 1px transparent
  -webkit-transition-duration: 0.3s
  transition-duration: 0.3s
  -webkit-transition-property: box-shadow
  transition-property: box-shadow

.hvr-glow:hover, .hvr-glow:focus, .hvr-glow:active
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.6)

/* Shadow
.hvr-shadow
  display: inline-block
  vertical-align: middle
  -webkit-transform: perspective(1px) translateZ(0)
  transform: perspective(1px) translateZ(0)
  box-shadow: 0 0 1px transparent
  -webkit-transition-duration: 0.3s
  transition-duration: 0.3s
  -webkit-transition-property: box-shadow
  transition-property: box-shadow

.hvr-shadow:hover, .hvr-shadow:focus, .hvr-shadow:active
  box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.5)

/* Grow Shadow
.hvr-grow-shadow
  display: inline-block
  vertical-align: middle
  -webkit-transform: perspective(1px) translateZ(0)
  transform: perspective(1px) translateZ(0)
  box-shadow: 0 0 1px transparent
  -webkit-transition-duration: 0.3s
  transition-duration: 0.3s
  -webkit-transition-property: box-shadow, transform
  transition-property: box-shadow, transform

.hvr-grow-shadow:hover, .hvr-grow-shadow:focus, .hvr-grow-shadow:active
  box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.5)
  -webkit-transform: scale(1.1)
  transform: scale(1.1)

/* Box Shadow Outset
.hvr-box-shadow-outset
  display: inline-block
  vertical-align: middle
  -webkit-transform: perspective(1px) translateZ(0)
  transform: perspective(1px) translateZ(0)
  box-shadow: 0 0 1px transparent
  -webkit-transition-duration: 0.3s
  transition-duration: 0.3s
  -webkit-transition-property: box-shadow
  transition-property: box-shadow

.hvr-box-shadow-outset:hover, .hvr-box-shadow-outset:focus, .hvr-box-shadow-outset:active
  box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.6)

/* Box Shadow Inset
.hvr-box-shadow-inset
  display: inline-block
  vertical-align: middle
  -webkit-transform: perspective(1px) translateZ(0)
  transform: perspective(1px) translateZ(0)
  box-shadow: 0 0 1px transparent
  -webkit-transition-duration: 0.3s
  transition-duration: 0.3s
  -webkit-transition-property: box-shadow
  transition-property: box-shadow
  box-shadow: inset 0 0 0 rgba(0, 0, 0, 0.6), 0 0 1px transparent

  /* Hack to improve aliasing on mobile/tablet devices

.hvr-box-shadow-inset:hover, .hvr-box-shadow-inset:focus, .hvr-box-shadow-inset:active
  box-shadow: inset 2px 2px 2px rgba(0, 0, 0, 0.6), 0 0 1px transparent

  /* Hack to improve aliasing on mobile/tablet devices

/* Float Shadow
.hvr-float-shadow
  display: inline-block
  vertical-align: middle
  -webkit-transform: perspective(1px) translateZ(0)
  transform: perspective(1px) translateZ(0)
  box-shadow: 0 0 1px transparent
  position: relative
  -webkit-transition-duration: 0.3s
  transition-duration: 0.3s
  -webkit-transition-property: transform
  transition-property: transform

.hvr-float-shadow:before
  pointer-events: none
  position: absolute
  z-index: -1
  content: ''
  top: 100%
  left: 5%
  height: 10px
  width: 90%
  opacity: 0
  background: -webkit-radial-gradient(center, ellipse, rgba(0, 0, 0, 0.35) 0%, transparent 80%)
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.35) 0%, transparent 80%)

  /* W3C
  -webkit-transition-duration: 0.3s
  transition-duration: 0.3s
  -webkit-transition-property: transform, opacity
  transition-property: transform, opacity

.hvr-float-shadow:hover, .hvr-float-shadow:focus, .hvr-float-shadow:active
  -webkit-transform: translateY(-5px)
  transform: translateY(-5px)

  /* move the element up by 5px

.hvr-float-shadow:hover:before, .hvr-float-shadow:focus:before, .hvr-float-shadow:active:before
  opacity: 1
  -webkit-transform: translateY(5px)
  transform: translateY(5px)

  /* move the element down by 5px (it will stay in place because it's attached to the element that also moves up 5px)

/* Shadow Radial
.hvr-shadow-radial
  display: inline-block
  vertical-align: middle
  -webkit-transform: perspective(1px) translateZ(0)
  transform: perspective(1px) translateZ(0)
  box-shadow: 0 0 1px transparent
  position: relative

.hvr-shadow-radial:before, .hvr-shadow-radial:after
  pointer-events: none
  position: absolute
  content: ''
  left: 0
  width: 100%
  box-sizing: border-box
  background-repeat: no-repeat
  height: 5px
  opacity: 0
  -webkit-transition-duration: 0.3s
  transition-duration: 0.3s
  -webkit-transition-property: opacity
  transition-property: opacity

.hvr-shadow-radial:before
  bottom: 100%
  background: -webkit-radial-gradient(50% 150%, ellipse, rgba(0, 0, 0, 0.6) 0%, transparent 80%)
  background: radial-gradient(ellipse at 50% 150%, rgba(0, 0, 0, 0.6) 0%, transparent 80%)

.hvr-shadow-radial:after
  top: 100%
  background: -webkit-radial-gradient(50% -50%, ellipse, rgba(0, 0, 0, 0.6) 0%, transparent 80%)
  background: radial-gradient(ellipse at 50% -50%, rgba(0, 0, 0, 0.6) 0%, transparent 80%)

.hvr-shadow-radial:hover:before, .hvr-shadow-radial:focus:before, .hvr-shadow-radial:active:before, .hvr-shadow-radial:hover:after, .hvr-shadow-radial:focus:after, .hvr-shadow-radial:active:after
  opacity: 1

/* SPEECH BUBBLES
/* Bubble Top
.hvr-bubble-top
  display: inline-block
  vertical-align: middle
  -webkit-transform: perspective(1px) translateZ(0)
  transform: perspective(1px) translateZ(0)
  box-shadow: 0 0 1px transparent
  position: relative

.hvr-bubble-top:before
  pointer-events: none
  position: absolute
  z-index: -1
  content: ''
  border-style: solid
  -webkit-transition-duration: 0.3s
  transition-duration: 0.3s
  -webkit-transition-property: transform
  transition-property: transform
  left: calc(50% - 10px)
  top: 0
  border-width: 0 10px 10px 10px
  border-color: transparent transparent #e1e1e1 transparent

.hvr-bubble-top:hover:before, .hvr-bubble-top:focus:before, .hvr-bubble-top:active:before
  -webkit-transform: translateY(-10px)
  transform: translateY(-10px)

/* Bubble Right
.hvr-bubble-right
  display: inline-block
  vertical-align: middle
  -webkit-transform: perspective(1px) translateZ(0)
  transform: perspective(1px) translateZ(0)
  box-shadow: 0 0 1px transparent
  position: relative

.hvr-bubble-right:before
  pointer-events: none
  position: absolute
  z-index: -1
  content: ''
  border-style: solid
  -webkit-transition-duration: 0.3s
  transition-duration: 0.3s
  -webkit-transition-property: transform
  transition-property: transform
  top: calc(50% - 10px)
  right: 0
  border-width: 10px 0 10px 10px
  border-color: transparent transparent transparent #e1e1e1

.hvr-bubble-right:hover:before, .hvr-bubble-right:focus:before, .hvr-bubble-right:active:before
  -webkit-transform: translateX(10px)
  transform: translateX(10px)

/* Bubble Bottom
.hvr-bubble-bottom
  display: inline-block
  vertical-align: middle
  -webkit-transform: perspective(1px) translateZ(0)
  transform: perspective(1px) translateZ(0)
  box-shadow: 0 0 1px transparent
  position: relative

.hvr-bubble-bottom:before
  pointer-events: none
  position: absolute
  z-index: -1
  content: ''
  border-style: solid
  -webkit-transition-duration: 0.3s
  transition-duration: 0.3s
  -webkit-transition-property: transform
  transition-property: transform
  left: calc(50% - 10px)
  bottom: 0
  border-width: 10px 10px 0 10px
  border-color: #e1e1e1 transparent transparent transparent

.hvr-bubble-bottom:hover:before, .hvr-bubble-bottom:focus:before, .hvr-bubble-bottom:active:before
  -webkit-transform: translateY(10px)
  transform: translateY(10px)

/* Bubble Left
.hvr-bubble-left
  display: inline-block
  vertical-align: middle
  -webkit-transform: perspective(1px) translateZ(0)
  transform: perspective(1px) translateZ(0)
  box-shadow: 0 0 1px transparent
  position: relative

.hvr-bubble-left:before
  pointer-events: none
  position: absolute
  z-index: -1
  content: ''
  border-style: solid
  -webkit-transition-duration: 0.3s
  transition-duration: 0.3s
  -webkit-transition-property: transform
  transition-property: transform
  top: calc(50% - 10px)
  left: 0
  border-width: 10px 10px 10px 0
  border-color: transparent #e1e1e1 transparent transparent

.hvr-bubble-left:hover:before, .hvr-bubble-left:focus:before, .hvr-bubble-left:active:before
  -webkit-transform: translateX(-10px)
  transform: translateX(-10px)

/* Bubble Float Top
.hvr-bubble-float-top
  display: inline-block
  vertical-align: middle
  -webkit-transform: perspective(1px) translateZ(0)
  transform: perspective(1px) translateZ(0)
  box-shadow: 0 0 1px transparent
  position: relative
  -webkit-transition-duration: 0.3s
  transition-duration: 0.3s
  -webkit-transition-property: transform
  transition-property: transform

.hvr-bubble-float-top:before
  position: absolute
  z-index: -1
  content: ''
  left: calc(50% - 10px)
  top: 0
  border-style: solid
  border-width: 0 10px 10px 10px
  border-color: transparent transparent #e1e1e1 transparent
  -webkit-transition-duration: 0.3s
  transition-duration: 0.3s
  -webkit-transition-property: transform
  transition-property: transform

.hvr-bubble-float-top:hover, .hvr-bubble-float-top:focus, .hvr-bubble-float-top:active
  -webkit-transform: translateY(10px)
  transform: translateY(10px)

.hvr-bubble-float-top:hover:before, .hvr-bubble-float-top:focus:before, .hvr-bubble-float-top:active:before
  -webkit-transform: translateY(-10px)
  transform: translateY(-10px)

/* Bubble Float Right
.hvr-bubble-float-right
  display: inline-block
  vertical-align: middle
  -webkit-transform: perspective(1px) translateZ(0)
  transform: perspective(1px) translateZ(0)
  box-shadow: 0 0 1px transparent
  position: relative
  -webkit-transition-duration: 0.3s
  transition-duration: 0.3s
  -webkit-transition-property: transform
  transition-property: transform

.hvr-bubble-float-right:before
  position: absolute
  z-index: -1
  top: calc(50% - 10px)
  right: 0
  content: ''
  border-style: solid
  border-width: 10px 0 10px 10px
  border-color: transparent transparent transparent #e1e1e1
  -webkit-transition-duration: 0.3s
  transition-duration: 0.3s
  -webkit-transition-property: transform
  transition-property: transform

.hvr-bubble-float-right:hover, .hvr-bubble-float-right:focus, .hvr-bubble-float-right:active
  -webkit-transform: translateX(-10px)
  transform: translateX(-10px)

.hvr-bubble-float-right:hover:before, .hvr-bubble-float-right:focus:before, .hvr-bubble-float-right:active:before
  -webkit-transform: translateX(10px)
  transform: translateX(10px)

/* Bubble Float Bottom
.hvr-bubble-float-bottom
  display: inline-block
  vertical-align: middle
  -webkit-transform: perspective(1px) translateZ(0)
  transform: perspective(1px) translateZ(0)
  box-shadow: 0 0 1px transparent
  position: relative
  -webkit-transition-duration: 0.3s
  transition-duration: 0.3s
  -webkit-transition-property: transform
  transition-property: transform

.hvr-bubble-float-bottom:before
  position: absolute
  z-index: -1
  content: ''
  left: calc(50% - 10px)
  bottom: 0
  border-style: solid
  border-width: 10px 10px 0 10px
  border-color: #e1e1e1 transparent transparent transparent
  -webkit-transition-duration: 0.3s
  transition-duration: 0.3s
  -webkit-transition-property: transform
  transition-property: transform

.hvr-bubble-float-bottom:hover, .hvr-bubble-float-bottom:focus, .hvr-bubble-float-bottom:active
  -webkit-transform: translateY(-10px)
  transform: translateY(-10px)

.hvr-bubble-float-bottom:hover:before, .hvr-bubble-float-bottom:focus:before, .hvr-bubble-float-bottom:active:before
  -webkit-transform: translateY(10px)
  transform: translateY(10px)

/* Bubble Float Left
.hvr-bubble-float-left
  display: inline-block
  vertical-align: middle
  -webkit-transform: perspective(1px) translateZ(0)
  transform: perspective(1px) translateZ(0)
  box-shadow: 0 0 1px transparent
  position: relative
  -webkit-transition-duration: 0.3s
  transition-duration: 0.3s
  -webkit-transition-property: transform
  transition-property: transform

.hvr-bubble-float-left:before
  position: absolute
  z-index: -1
  content: ''
  top: calc(50% - 10px)
  left: 0
  border-style: solid
  border-width: 10px 10px 10px 0
  border-color: transparent #e1e1e1 transparent transparent
  -webkit-transition-duration: 0.3s
  transition-duration: 0.3s
  -webkit-transition-property: transform
  transition-property: transform

.hvr-bubble-float-left:hover, .hvr-bubble-float-left:focus, .hvr-bubble-float-left:active
  -webkit-transform: translateX(10px)
  transform: translateX(10px)

.hvr-bubble-float-left:hover:before, .hvr-bubble-float-left:focus:before, .hvr-bubble-float-left:active:before
  -webkit-transform: translateX(-10px)
  transform: translateX(-10px)

/* ICONS
/* Icon Back
.hvr-icon-back
  display: inline-block
  vertical-align: middle
  -webkit-transform: perspective(1px) translateZ(0)
  transform: perspective(1px) translateZ(0)
  box-shadow: 0 0 1px transparent
  position: relative
  padding-left: 2.2em
  -webkit-transition-duration: 0.1s
  transition-duration: 0.1s

.hvr-icon-back:before
  content: "\f137"
  position: absolute
  left: 1em
  padding: 0 1px
  font-family: FontAwesome
  -webkit-transform: translateZ(0)
  transform: translateZ(0)
  -webkit-transition-duration: 0.1s
  transition-duration: 0.1s
  -webkit-transition-property: transform
  transition-property: transform
  -webkit-transition-timing-function: ease-out
  transition-timing-function: ease-out

.hvr-icon-back:hover:before, .hvr-icon-back:focus:before, .hvr-icon-back:active:before
  -webkit-transform: translateX(-4px)
  transform: translateX(-4px)

/* Icon Forward
.hvr-icon-forward
  display: inline-block
  vertical-align: middle
  -webkit-transform: perspective(1px) translateZ(0)
  transform: perspective(1px) translateZ(0)
  box-shadow: 0 0 1px transparent
  position: relative
  padding-right: 2.2em
  -webkit-transition-duration: 0.1s
  transition-duration: 0.1s

.hvr-icon-forward:before
  content: "\f138"
  position: absolute
  right: 1em
  padding: 0 1px
  font-family: FontAwesome
  -webkit-transform: translateZ(0)
  transform: translateZ(0)
  -webkit-transition-duration: 0.1s
  transition-duration: 0.1s
  -webkit-transition-property: transform
  transition-property: transform
  -webkit-transition-timing-function: ease-out
  transition-timing-function: ease-out

.hvr-icon-forward:hover:before, .hvr-icon-forward:focus:before, .hvr-icon-forward:active:before
  -webkit-transform: translateX(4px)
  transform: translateX(4px)

/* Icon Down
@-webkit-keyframes hvr-icon-down
  0%,
  50%,
  100%
    -webkit-transform: translateY(0)
    transform: translateY(0)

  25%,
  75%
    -webkit-transform: translateY(6px)
    transform: translateY(6px)

@keyframes hvr-icon-down
  0%,
  50%,
  100%
    -webkit-transform: translateY(0)
    transform: translateY(0)

  25%,
  75%
    -webkit-transform: translateY(6px)
    transform: translateY(6px)

/* Icon Down
.hvr-icon-down
  display: inline-block
  vertical-align: middle
  -webkit-transform: perspective(1px) translateZ(0)
  transform: perspective(1px) translateZ(0)
  box-shadow: 0 0 1px transparent
  position: relative
  padding-right: 2.2em

.hvr-icon-down:before
  content: "\f01a"
  position: absolute
  right: 1em
  padding: 0 1px
  font-family: FontAwesome
  -webkit-transform: translateZ(0)
  transform: translateZ(0)

.hvr-icon-down:hover:before, .hvr-icon-down:focus:before, .hvr-icon-down:active:before
  -webkit-animation-name: hvr-icon-down
  animation-name: hvr-icon-down
  -webkit-animation-duration: 0.75s
  animation-duration: 0.75s
  -webkit-animation-timing-function: ease-out
  animation-timing-function: ease-out

/* Icon Up
@-webkit-keyframes hvr-icon-up
  0%,
  50%,
  100%
    -webkit-transform: translateY(0)
    transform: translateY(0)

  25%,
  75%
    -webkit-transform: translateY(-6px)
    transform: translateY(-6px)

@keyframes hvr-icon-up
  0%,
  50%,
  100%
    -webkit-transform: translateY(0)
    transform: translateY(0)

  25%,
  75%
    -webkit-transform: translateY(-6px)
    transform: translateY(-6px)

/* Icon Up
.hvr-icon-up
  display: inline-block
  vertical-align: middle
  -webkit-transform: perspective(1px) translateZ(0)
  transform: perspective(1px) translateZ(0)
  box-shadow: 0 0 1px transparent
  position: relative
  padding-right: 2.2em

.hvr-icon-up:before
  content: "\f01b"
  position: absolute
  right: 1em
  padding: 0 1px
  font-family: FontAwesome
  -webkit-transform: translateZ(0)
  transform: translateZ(0)

.hvr-icon-up:hover:before, .hvr-icon-up:focus:before, .hvr-icon-up:active:before
  -webkit-animation-name: hvr-icon-up
  animation-name: hvr-icon-up
  -webkit-animation-duration: 0.75s
  animation-duration: 0.75s
  -webkit-animation-timing-function: ease-out
  animation-timing-function: ease-out

/* Icon Spin
.hvr-icon-spin
  display: inline-block
  vertical-align: middle
  -webkit-transform: perspective(1px) translateZ(0)
  transform: perspective(1px) translateZ(0)
  box-shadow: 0 0 1px transparent
  position: relative
  padding-right: 2.2em

.hvr-icon-spin:before
  content: "\f021"
  position: absolute
  right: 1em
  padding: 0 1px
  font-family: FontAwesome
  -webkit-transition-duration: 1s
  transition-duration: 1s
  -webkit-transition-property: transform
  transition-property: transform
  -webkit-transition-timing-function: ease-in-out
  transition-timing-function: ease-in-out

.hvr-icon-spin:hover:before, .hvr-icon-spin:focus:before, .hvr-icon-spin:active:before
  -webkit-transform: rotate(360deg)
  transform: rotate(360deg)

/* Icon Drop
@-webkit-keyframes hvr-icon-drop
  0%
    opacity: 0

  50%
    opacity: 0
    -webkit-transform: translateY(-100%)
    transform: translateY(-100%)

  51%,
  100%
    opacity: 1

@keyframes hvr-icon-drop
  0%
    opacity: 0

  50%
    opacity: 0
    -webkit-transform: translateY(-100%)
    transform: translateY(-100%)

  51%,
  100%
    opacity: 1

/* Icon Drop
.hvr-icon-drop
  display: inline-block
  vertical-align: middle
  -webkit-transform: perspective(1px) translateZ(0)
  transform: perspective(1px) translateZ(0)
  box-shadow: 0 0 1px transparent
  position: relative
  padding-right: 2.2em

.hvr-icon-drop:before
  content: "\f041"
  position: absolute
  right: 1em
  opacity: 1
  padding: 0 1px
  font-family: FontAwesome
  -webkit-transform: translateZ(0)
  transform: translateZ(0)

.hvr-icon-drop:hover:before, .hvr-icon-drop:focus:before, .hvr-icon-drop:active:before
  opacity: 0
  -webkit-transition-duration: 0.3s
  transition-duration: 0.3s
  -webkit-animation-name: hvr-icon-drop
  animation-name: hvr-icon-drop
  -webkit-animation-duration: 0.5s
  animation-duration: 0.5s
  -webkit-animation-delay: 0.3s
  animation-delay: 0.3s
  -webkit-animation-fill-mode: forwards
  animation-fill-mode: forwards
  -webkit-animation-timing-function: ease-in-out
  animation-timing-function: ease-in-out
  -webkit-animation-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66)
  animation-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66)

/* Icon Fade
.hvr-icon-fade
  display: inline-block
  vertical-align: middle
  -webkit-transform: perspective(1px) translateZ(0)
  transform: perspective(1px) translateZ(0)
  box-shadow: 0 0 1px transparent
  position: relative
  padding-right: 2.2em

.hvr-icon-fade:before
  content: "\f00c"
  position: absolute
  right: 1em
  padding: 0 1px
  font-family: FontAwesome
  -webkit-transform: translateZ(0)
  transform: translateZ(0)
  -webkit-transition-duration: 0.5s
  transition-duration: 0.5s
  -webkit-transition-property: color
  transition-property: color

.hvr-icon-fade:hover:before, .hvr-icon-fade:focus:before, .hvr-icon-fade:active:before
  color: #0F9E5E

/* Icon Float Away
@-webkit-keyframes hvr-icon-float-away
  0%
    opacity: 1

  100%
    opacity: 0
    -webkit-transform: translateY(-1em)
    transform: translateY(-1em)

@keyframes hvr-icon-float-away
  0%
    opacity: 1

  100%
    opacity: 0
    -webkit-transform: translateY(-1em)
    transform: translateY(-1em)

/* Icon Float Away
.hvr-icon-float-away
  display: inline-block
  vertical-align: middle
  -webkit-transform: perspective(1px) translateZ(0)
  transform: perspective(1px) translateZ(0)
  box-shadow: 0 0 1px transparent
  position: relative
  padding-right: 2.2em

.hvr-icon-float-away:before, .hvr-icon-float-away:after
  content: "\f055"
  position: absolute
  right: 1em
  padding: 0 1px
  font-family: FontAwesome

.hvr-icon-float-away:after
  opacity: 0
  -webkit-animation-duration: 0.5s
  animation-duration: 0.5s
  -webkit-animation-fill-mode: forwards
  animation-fill-mode: forwards

.hvr-icon-float-away:hover:after, .hvr-icon-float-away:focus:after, .hvr-icon-float-away:active:after
  -webkit-animation-name: hvr-icon-float-away
  animation-name: hvr-icon-float-away
  -webkit-animation-timing-function: ease-out
  animation-timing-function: ease-out

/* Icon Sink Away
@-webkit-keyframes hvr-icon-sink-away
  0%
    opacity: 1

  100%
    opacity: 0
    -webkit-transform: translateY(1em)
    transform: translateY(1em)

@keyframes hvr-icon-sink-away
  0%
    opacity: 1

  100%
    opacity: 0
    -webkit-transform: translateY(1em)
    transform: translateY(1em)

/* Icon Sink Away
.hvr-icon-sink-away
  display: inline-block
  vertical-align: middle
  -webkit-transform: perspective(1px) translateZ(0)
  transform: perspective(1px) translateZ(0)
  box-shadow: 0 0 1px transparent
  position: relative
  padding-right: 2.2em

.hvr-icon-sink-away:before, .hvr-icon-sink-away:after
  content: "\f056"
  position: absolute
  right: 1em
  padding: 0 1px
  font-family: FontAwesome
  -webkit-transform: translateZ(0)
  transform: translateZ(0)

.hvr-icon-sink-away:after
  opacity: 0
  -webkit-animation-duration: 0.5s
  animation-duration: 0.5s
  -webkit-animation-fill-mode: forwards
  animation-fill-mode: forwards

.hvr-icon-sink-away:hover:after, .hvr-icon-sink-away:focus:after, .hvr-icon-sink-away:active:after
  -webkit-animation-name: hvr-icon-sink-away
  animation-name: hvr-icon-sink-away
  -webkit-animation-timing-function: ease-out
  animation-timing-function: ease-out

/* Icon Grow
.hvr-icon-grow
  display: inline-block
  vertical-align: middle
  -webkit-transform: perspective(1px) translateZ(0)
  transform: perspective(1px) translateZ(0)
  box-shadow: 0 0 1px transparent
  position: relative
  padding-right: 2.2em
  -webkit-transition-duration: 0.3s
  transition-duration: 0.3s

.hvr-icon-grow:before
  content: "\f118"
  position: absolute
  right: 1em
  padding: 0 1px
  font-family: FontAwesome
  -webkit-transform: translateZ(0)
  transform: translateZ(0)
  -webkit-transition-duration: 0.3s
  transition-duration: 0.3s
  -webkit-transition-property: transform
  transition-property: transform
  -webkit-transition-timing-function: ease-out
  transition-timing-function: ease-out

.hvr-icon-grow:hover:before, .hvr-icon-grow:focus:before, .hvr-icon-grow:active:before
  -webkit-transform: scale(1.3) translateZ(0)
  transform: scale(1.3) translateZ(0)

/* Icon Shrink
.hvr-icon-shrink
  display: inline-block
  vertical-align: middle
  -webkit-transform: perspective(1px) translateZ(0)
  transform: perspective(1px) translateZ(0)
  box-shadow: 0 0 1px transparent
  position: relative
  padding-right: 2.2em
  -webkit-transition-duration: 0.3s
  transition-duration: 0.3s

.hvr-icon-shrink:before
  content: "\f119"
  position: absolute
  right: 1em
  padding: 0 1px
  font-family: FontAwesome
  -webkit-transform: translateZ(0)
  transform: translateZ(0)
  -webkit-transition-duration: 0.3s
  transition-duration: 0.3s
  -webkit-transition-property: transform
  transition-property: transform
  -webkit-transition-timing-function: ease-out
  transition-timing-function: ease-out

.hvr-icon-shrink:hover:before, .hvr-icon-shrink:focus:before, .hvr-icon-shrink:active:before
  -webkit-transform: scale(0.8)
  transform: scale(0.8)

/* Icon Pulse
@-webkit-keyframes hvr-icon-pulse
  25%
    -webkit-transform: scale(1.3)
    transform: scale(1.3)

  75%
    -webkit-transform: scale(0.8)
    transform: scale(0.8)

@keyframes hvr-icon-pulse
  25%
    -webkit-transform: scale(1.3)
    transform: scale(1.3)

  75%
    -webkit-transform: scale(0.8)
    transform: scale(0.8)

.hvr-icon-pulse
  display: inline-block
  vertical-align: middle
  -webkit-transform: perspective(1px) translateZ(0)
  transform: perspective(1px) translateZ(0)
  box-shadow: 0 0 1px transparent
  position: relative
  padding-right: 2.2em

.hvr-icon-pulse:before
  content: "\f015"
  position: absolute
  right: 1em
  padding: 0 1px
  font-family: FontAwesome
  -webkit-transform: translateZ(0)
  transform: translateZ(0)
  -webkit-transition-timing-function: ease-out
  transition-timing-function: ease-out

.hvr-icon-pulse:hover:before, .hvr-icon-pulse:focus:before, .hvr-icon-pulse:active:before
  -webkit-animation-name: hvr-icon-pulse
  animation-name: hvr-icon-pulse
  -webkit-animation-duration: 1s
  animation-duration: 1s
  -webkit-animation-timing-function: linear
  animation-timing-function: linear
  -webkit-animation-iteration-count: infinite
  animation-iteration-count: infinite

/* Icon Pulse Grow
@-webkit-keyframes hvr-icon-pulse-grow
  to
    -webkit-transform: scale(1.3)
    transform: scale(1.3)

@keyframes hvr-icon-pulse-grow
  to
    -webkit-transform: scale(1.3)
    transform: scale(1.3)

.hvr-icon-pulse-grow
  display: inline-block
  vertical-align: middle
  -webkit-transform: perspective(1px) translateZ(0)
  transform: perspective(1px) translateZ(0)
  box-shadow: 0 0 1px transparent
  position: relative
  padding-right: 2.2em

.hvr-icon-pulse-grow:before
  content: "\f015"
  position: absolute
  right: 1em
  padding: 0 1px
  font-family: FontAwesome
  -webkit-transform: translateZ(0)
  transform: translateZ(0)
  -webkit-transition-timing-function: ease-out
  transition-timing-function: ease-out

.hvr-icon-pulse-grow:hover:before, .hvr-icon-pulse-grow:focus:before, .hvr-icon-pulse-grow:active:before
  -webkit-animation-name: hvr-icon-pulse-grow
  animation-name: hvr-icon-pulse-grow
  -webkit-animation-duration: 0.3s
  animation-duration: 0.3s
  -webkit-animation-timing-function: linear
  animation-timing-function: linear
  -webkit-animation-iteration-count: infinite
  animation-iteration-count: infinite
  -webkit-animation-direction: alternate
  animation-direction: alternate

/* Icon Pulse Shrink
@-webkit-keyframes hvr-icon-pulse-shrink
  to
    -webkit-transform: scale(0.8)
    transform: scale(0.8)

@keyframes hvr-icon-pulse-shrink
  to
    -webkit-transform: scale(0.8)
    transform: scale(0.8)

.hvr-icon-pulse-shrink
  display: inline-block
  vertical-align: middle
  -webkit-transform: perspective(1px) translateZ(0)
  transform: perspective(1px) translateZ(0)
  box-shadow: 0 0 1px transparent
  position: relative
  padding-right: 2.2em

.hvr-icon-pulse-shrink:before
  content: "\f015"
  position: absolute
  right: 1em
  padding: 0 1px
  font-family: FontAwesome
  -webkit-transform: translateZ(0)
  transform: translateZ(0)
  -webkit-transition-timing-function: ease-out
  transition-timing-function: ease-out

.hvr-icon-pulse-shrink:hover:before, .hvr-icon-pulse-shrink:focus:before, .hvr-icon-pulse-shrink:active:before
  -webkit-animation-name: hvr-icon-pulse-shrink
  animation-name: hvr-icon-pulse-shrink
  -webkit-animation-duration: 0.3s
  animation-duration: 0.3s
  -webkit-animation-timing-function: linear
  animation-timing-function: linear
  -webkit-animation-iteration-count: infinite
  animation-iteration-count: infinite
  -webkit-animation-direction: alternate
  animation-direction: alternate

/* Icon Push
@-webkit-keyframes hvr-icon-push
  50%
    -webkit-transform: scale(0.5)
    transform: scale(0.5)

@keyframes hvr-icon-push
  50%
    -webkit-transform: scale(0.5)
    transform: scale(0.5)

.hvr-icon-push
  display: inline-block
  vertical-align: middle
  -webkit-transform: perspective(1px) translateZ(0)
  transform: perspective(1px) translateZ(0)
  box-shadow: 0 0 1px transparent
  position: relative
  padding-right: 2.2em
  -webkit-transition-duration: 0.3s
  transition-duration: 0.3s

.hvr-icon-push:before
  content: "\f006"
  position: absolute
  right: 1em
  padding: 0 1px
  font-family: FontAwesome
  -webkit-transform: translateZ(0)
  transform: translateZ(0)
  -webkit-transition-duration: 0.3s
  transition-duration: 0.3s
  -webkit-transition-property: transform
  transition-property: transform
  -webkit-transition-timing-function: ease-out
  transition-timing-function: ease-out

.hvr-icon-push:hover:before, .hvr-icon-push:focus:before, .hvr-icon-push:active:before
  -webkit-animation-name: hvr-icon-push
  animation-name: hvr-icon-push
  -webkit-animation-duration: 0.3s
  animation-duration: 0.3s
  -webkit-animation-timing-function: linear
  animation-timing-function: linear
  -webkit-animation-iteration-count: 1
  animation-iteration-count: 1

/* Icon Pop
@-webkit-keyframes hvr-icon-pop
  50%
    -webkit-transform: scale(1.5)
    transform: scale(1.5)

@keyframes hvr-icon-pop
  50%
    -webkit-transform: scale(1.5)
    transform: scale(1.5)

.hvr-icon-pop
  display: inline-block
  vertical-align: middle
  -webkit-transform: perspective(1px) translateZ(0)
  transform: perspective(1px) translateZ(0)
  box-shadow: 0 0 1px transparent
  position: relative
  padding-right: 2.2em
  -webkit-transition-duration: 0.3s
  transition-duration: 0.3s

.hvr-icon-pop:before
  content: "\f005"
  position: absolute
  right: 1em
  padding: 0 1px
  font-family: FontAwesome
  -webkit-transform: translateZ(0)
  transform: translateZ(0)
  -webkit-transition-duration: 0.3s
  transition-duration: 0.3s
  -webkit-transition-property: transform
  transition-property: transform
  -webkit-transition-timing-function: ease-out
  transition-timing-function: ease-out

.hvr-icon-pop:hover:before, .hvr-icon-pop:focus:before, .hvr-icon-pop:active:before
  -webkit-animation-name: hvr-icon-pop
  animation-name: hvr-icon-pop
  -webkit-animation-duration: 0.3s
  animation-duration: 0.3s
  -webkit-animation-timing-function: linear
  animation-timing-function: linear
  -webkit-animation-iteration-count: 1
  animation-iteration-count: 1

/* Icon Bounce
.hvr-icon-bounce
  display: inline-block
  vertical-align: middle
  -webkit-transform: perspective(1px) translateZ(0)
  transform: perspective(1px) translateZ(0)
  box-shadow: 0 0 1px transparent
  position: relative
  padding-right: 2.2em
  -webkit-transition-duration: 0.3s
  transition-duration: 0.3s

.hvr-icon-bounce:before
  content: "\f087"
  position: absolute
  right: 1em
  padding: 0 1px
  font-family: FontAwesome
  -webkit-transform: translateZ(0)
  transform: translateZ(0)
  -webkit-transition-duration: 0.3s
  transition-duration: 0.3s
  -webkit-transition-property: transform
  transition-property: transform
  -webkit-transition-timing-function: ease-out
  transition-timing-function: ease-out

.hvr-icon-bounce:hover:before, .hvr-icon-bounce:focus:before, .hvr-icon-bounce:active:before
  -webkit-transform: scale(1.5)
  transform: scale(1.5)
  -webkit-transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36)
  transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36)

/* Icon Rotate
.hvr-icon-rotate
  display: inline-block
  vertical-align: middle
  -webkit-transform: perspective(1px) translateZ(0)
  transform: perspective(1px) translateZ(0)
  box-shadow: 0 0 1px transparent
  position: relative
  padding-right: 2.2em
  -webkit-transition-duration: 0.3s
  transition-duration: 0.3s

.hvr-icon-rotate:before
  content: "\f0c6"
  position: absolute
  right: 1em
  padding: 0 1px
  font-family: FontAwesome
  -webkit-transform: translateZ(0)
  transform: translateZ(0)
  -webkit-transition-duration: 0.3s
  transition-duration: 0.3s
  -webkit-transition-property: transform
  transition-property: transform
  -webkit-transition-timing-function: ease-out
  transition-timing-function: ease-out

.hvr-icon-rotate:hover:before, .hvr-icon-rotate:focus:before, .hvr-icon-rotate:active:before
  -webkit-transform: rotate(20deg)
  transform: rotate(20deg)

/* Icon Grow Rotate
.hvr-icon-grow-rotate
  display: inline-block
  vertical-align: middle
  -webkit-transform: perspective(1px) translateZ(0)
  transform: perspective(1px) translateZ(0)
  box-shadow: 0 0 1px transparent
  position: relative
  padding-right: 2.2em
  -webkit-transition-duration: 0.3s
  transition-duration: 0.3s

.hvr-icon-grow-rotate:before
  content: "\f095"
  position: absolute
  right: 1em
  padding: 0 1px
  font-family: FontAwesome
  -webkit-transform: translateZ(0)
  transform: translateZ(0)
  -webkit-transition-duration: 0.3s
  transition-duration: 0.3s
  -webkit-transition-property: transform
  transition-property: transform
  -webkit-transition-timing-function: ease-out
  transition-timing-function: ease-out

.hvr-icon-grow-rotate:hover:before, .hvr-icon-grow-rotate:focus:before, .hvr-icon-grow-rotate:active:before
  -webkit-transform: scale(1.5) rotate(12deg)
  transform: scale(1.5) rotate(12deg)

/* Icon Float
.hvr-icon-float
  display: inline-block
  vertical-align: middle
  -webkit-transform: perspective(1px) translateZ(0)
  transform: perspective(1px) translateZ(0)
  box-shadow: 0 0 1px transparent
  position: relative
  padding-right: 2.2em
  -webkit-transition-duration: 0.3s
  transition-duration: 0.3s

.hvr-icon-float:before
  content: "\f01b"
  position: absolute
  right: 1em
  padding: 0 1px
  font-family: FontAwesome
  -webkit-transform: translateZ(0)
  transform: translateZ(0)
  -webkit-transition-duration: 0.3s
  transition-duration: 0.3s
  -webkit-transition-property: transform
  transition-property: transform
  -webkit-transition-timing-function: ease-out
  transition-timing-function: ease-out

.hvr-icon-float:hover:before, .hvr-icon-float:focus:before, .hvr-icon-float:active:before
  -webkit-transform: translateY(-4px)
  transform: translateY(-4px)

/* Icon Sink
.hvr-icon-sink
  display: inline-block
  vertical-align: middle
  -webkit-transform: perspective(1px) translateZ(0)
  transform: perspective(1px) translateZ(0)
  box-shadow: 0 0 1px transparent
  position: relative
  padding-right: 2.2em
  -webkit-transition-duration: 0.3s
  transition-duration: 0.3s

.hvr-icon-sink:before
  content: "\f01a"
  position: absolute
  right: 1em
  padding: 0 1px
  font-family: FontAwesome
  -webkit-transform: translateZ(0)
  transform: translateZ(0)
  -webkit-transition-duration: 0.3s
  transition-duration: 0.3s
  -webkit-transition-property: transform
  transition-property: transform
  -webkit-transition-timing-function: ease-out
  transition-timing-function: ease-out

.hvr-icon-sink:hover:before, .hvr-icon-sink:focus:before, .hvr-icon-sink:active:before
  -webkit-transform: translateY(4px)
  transform: translateY(4px)

/* Icon Bob
@-webkit-keyframes hvr-icon-bob
  0%
    -webkit-transform: translateY(-6px)
    transform: translateY(-6px)

  50%
    -webkit-transform: translateY(-2px)
    transform: translateY(-2px)

  100%
    -webkit-transform: translateY(-6px)
    transform: translateY(-6px)

@keyframes hvr-icon-bob
  0%
    -webkit-transform: translateY(-6px)
    transform: translateY(-6px)

  50%
    -webkit-transform: translateY(-2px)
    transform: translateY(-2px)

  100%
    -webkit-transform: translateY(-6px)
    transform: translateY(-6px)

@-webkit-keyframes hvr-icon-bob-float
  100%
    -webkit-transform: translateY(-6px)
    transform: translateY(-6px)

@keyframes hvr-icon-bob-float
  100%
    -webkit-transform: translateY(-6px)
    transform: translateY(-6px)

.hvr-icon-bob
  display: inline-block
  vertical-align: middle
  -webkit-transform: perspective(1px) translateZ(0)
  transform: perspective(1px) translateZ(0)
  box-shadow: 0 0 1px transparent
  position: relative
  padding-right: 2.2em
  -webkit-transition-duration: 0.3s
  transition-duration: 0.3s

.hvr-icon-bob:before
  content: "\f077"
  position: absolute
  right: 1em
  padding: 0 1px
  font-family: FontAwesome
  -webkit-transform: translateZ(0)
  transform: translateZ(0)

.hvr-icon-bob:hover:before, .hvr-icon-bob:focus:before, .hvr-icon-bob:active:before
  -webkit-animation-name: hvr-icon-bob-float, hvr-icon-bob
  animation-name: hvr-icon-bob-float, hvr-icon-bob
  -webkit-animation-duration: .3s, 1.5s
  animation-duration: .3s, 1.5s
  -webkit-animation-delay: 0s, .3s
  animation-delay: 0s, .3s
  -webkit-animation-timing-function: ease-out, ease-in-out
  animation-timing-function: ease-out, ease-in-out
  -webkit-animation-iteration-count: 1, infinite
  animation-iteration-count: 1, infinite
  -webkit-animation-fill-mode: forwards
  animation-fill-mode: forwards
  -webkit-animation-direction: normal, alternate
  animation-direction: normal, alternate

/* Icon Hang
@-webkit-keyframes hvr-icon-hang
  0%
    -webkit-transform: translateY(6px)
    transform: translateY(6px)

  50%
    -webkit-transform: translateY(2px)
    transform: translateY(2px)

  100%
    -webkit-transform: translateY(6px)
    transform: translateY(6px)

@keyframes hvr-icon-hang
  0%
    -webkit-transform: translateY(6px)
    transform: translateY(6px)

  50%
    -webkit-transform: translateY(2px)
    transform: translateY(2px)

  100%
    -webkit-transform: translateY(6px)
    transform: translateY(6px)

@-webkit-keyframes hvr-icon-hang-sink
  100%
    -webkit-transform: translateY(6px)
    transform: translateY(6px)

@keyframes hvr-icon-hang-sink
  100%
    -webkit-transform: translateY(6px)
    transform: translateY(6px)

.hvr-icon-hang
  display: inline-block
  vertical-align: middle
  -webkit-transform: perspective(1px) translateZ(0)
  transform: perspective(1px) translateZ(0)
  box-shadow: 0 0 1px transparent
  position: relative
  padding-right: 2.2em
  -webkit-transition-duration: 0.3s
  transition-duration: 0.3s

.hvr-icon-hang:before
  content: "\f078"
  position: absolute
  right: 1em
  padding: 0 1px
  font-family: FontAwesome
  -webkit-transform: translateZ(0)
  transform: translateZ(0)

.hvr-icon-hang:hover:before, .hvr-icon-hang:focus:before, .hvr-icon-hang:active:before
  -webkit-animation-name: hvr-icon-hang-sink, hvr-icon-hang
  animation-name: hvr-icon-hang-sink, hvr-icon-hang
  -webkit-animation-duration: .3s, 1.5s
  animation-duration: .3s, 1.5s
  -webkit-animation-delay: 0s, .3s
  animation-delay: 0s, .3s
  -webkit-animation-timing-function: ease-out, ease-in-out
  animation-timing-function: ease-out, ease-in-out
  -webkit-animation-iteration-count: 1, infinite
  animation-iteration-count: 1, infinite
  -webkit-animation-fill-mode: forwards
  animation-fill-mode: forwards
  -webkit-animation-direction: normal, alternate
  animation-direction: normal, alternate

/* Icon Wobble Horizontal
@-webkit-keyframes hvr-icon-wobble-horizontal
  16.65%
    -webkit-transform: translateX(6px)
    transform: translateX(6px)

  33.3%
    -webkit-transform: translateX(-5px)
    transform: translateX(-5px)

  49.95%
    -webkit-transform: translateX(4px)
    transform: translateX(4px)

  66.6%
    -webkit-transform: translateX(-2px)
    transform: translateX(-2px)

  83.25%
    -webkit-transform: translateX(1px)
    transform: translateX(1px)

  100%
    -webkit-transform: translateX(0)
    transform: translateX(0)

@keyframes hvr-icon-wobble-horizontal
  16.65%
    -webkit-transform: translateX(6px)
    transform: translateX(6px)

  33.3%
    -webkit-transform: translateX(-5px)
    transform: translateX(-5px)

  49.95%
    -webkit-transform: translateX(4px)
    transform: translateX(4px)

  66.6%
    -webkit-transform: translateX(-2px)
    transform: translateX(-2px)

  83.25%
    -webkit-transform: translateX(1px)
    transform: translateX(1px)

  100%
    -webkit-transform: translateX(0)
    transform: translateX(0)

.hvr-icon-wobble-horizontal
  display: inline-block
  vertical-align: middle
  -webkit-transform: perspective(1px) translateZ(0)
  transform: perspective(1px) translateZ(0)
  box-shadow: 0 0 1px transparent
  position: relative
  padding-right: 2.2em
  -webkit-transition-duration: 0.3s
  transition-duration: 0.3s

.hvr-icon-wobble-horizontal:before
  content: "\f061"
  position: absolute
  right: 1em
  padding: 0 1px
  font-family: FontAwesome
  -webkit-transform: translateZ(0)
  transform: translateZ(0)

.hvr-icon-wobble-horizontal:hover:before, .hvr-icon-wobble-horizontal:focus:before, .hvr-icon-wobble-horizontal:active:before
  -webkit-animation-name: hvr-icon-wobble-horizontal
  animation-name: hvr-icon-wobble-horizontal
  -webkit-animation-duration: 1s
  animation-duration: 1s
  -webkit-animation-timing-function: ease-in-out
  animation-timing-function: ease-in-out
  -webkit-animation-iteration-count: 1
  animation-iteration-count: 1

/* Icon Wobble Vertical
@-webkit-keyframes hvr-icon-wobble-vertical
  16.65%
    -webkit-transform: translateY(6px)
    transform: translateY(6px)

  33.3%
    -webkit-transform: translateY(-5px)
    transform: translateY(-5px)

  49.95%
    -webkit-transform: translateY(4px)
    transform: translateY(4px)

  66.6%
    -webkit-transform: translateY(-2px)
    transform: translateY(-2px)

  83.25%
    -webkit-transform: translateY(1px)
    transform: translateY(1px)

  100%
    -webkit-transform: translateY(0)
    transform: translateY(0)

@keyframes hvr-icon-wobble-vertical
  16.65%
    -webkit-transform: translateY(6px)
    transform: translateY(6px)

  33.3%
    -webkit-transform: translateY(-5px)
    transform: translateY(-5px)

  49.95%
    -webkit-transform: translateY(4px)
    transform: translateY(4px)

  66.6%
    -webkit-transform: translateY(-2px)
    transform: translateY(-2px)

  83.25%
    -webkit-transform: translateY(1px)
    transform: translateY(1px)

  100%
    -webkit-transform: translateY(0)
    transform: translateY(0)

.hvr-icon-wobble-vertical
  display: inline-block
  vertical-align: middle
  -webkit-transform: perspective(1px) translateZ(0)
  transform: perspective(1px) translateZ(0)
  box-shadow: 0 0 1px transparent
  position: relative
  padding-right: 2.2em
  -webkit-transition-duration: 0.3s
  transition-duration: 0.3s

.hvr-icon-wobble-vertical:before
  content: "\f062"
  position: absolute
  right: 1em
  padding: 0 1px
  font-family: FontAwesome
  -webkit-transform: translateZ(0)
  transform: translateZ(0)

.hvr-icon-wobble-vertical:hover:before, .hvr-icon-wobble-vertical:focus:before, .hvr-icon-wobble-vertical:active:before
  -webkit-animation-name: hvr-icon-wobble-vertical
  animation-name: hvr-icon-wobble-vertical
  -webkit-animation-duration: 1s
  animation-duration: 1s
  -webkit-animation-timing-function: ease-in-out
  animation-timing-function: ease-in-out
  -webkit-animation-iteration-count: 1
  animation-iteration-count: 1

/* Icon Buzz
@-webkit-keyframes hvr-icon-buzz
  50%
    -webkit-transform: translateX(3px) rotate(2deg)
    transform: translateX(3px) rotate(2deg)

  100%
    -webkit-transform: translateX(-3px) rotate(-2deg)
    transform: translateX(-3px) rotate(-2deg)

@keyframes hvr-icon-buzz
  50%
    -webkit-transform: translateX(3px) rotate(2deg)
    transform: translateX(3px) rotate(2deg)

  100%
    -webkit-transform: translateX(-3px) rotate(-2deg)
    transform: translateX(-3px) rotate(-2deg)

.hvr-icon-buzz
  display: inline-block
  vertical-align: middle
  -webkit-transform: perspective(1px) translateZ(0)
  transform: perspective(1px) translateZ(0)
  box-shadow: 0 0 1px transparent
  position: relative
  padding-right: 2.2em
  -webkit-transition-duration: 0.3s
  transition-duration: 0.3s

.hvr-icon-buzz:before
  content: "\f017"
  position: absolute
  right: 1em
  padding: 0 1px
  font-family: FontAwesome
  -webkit-transform: translateZ(0)
  transform: translateZ(0)

.hvr-icon-buzz:hover:before, .hvr-icon-buzz:focus:before, .hvr-icon-buzz:active:before
  -webkit-animation-name: hvr-icon-buzz
  animation-name: hvr-icon-buzz
  -webkit-animation-duration: 0.15s
  animation-duration: 0.15s
  -webkit-animation-timing-function: linear
  animation-timing-function: linear
  -webkit-animation-iteration-count: infinite
  animation-iteration-count: infinite

/* Icon Buzz Out
@-webkit-keyframes hvr-icon-buzz-out
  10%
    -webkit-transform: translateX(3px) rotate(2deg)
    transform: translateX(3px) rotate(2deg)

  20%
    -webkit-transform: translateX(-3px) rotate(-2deg)
    transform: translateX(-3px) rotate(-2deg)

  30%
    -webkit-transform: translateX(3px) rotate(2deg)
    transform: translateX(3px) rotate(2deg)

  40%
    -webkit-transform: translateX(-3px) rotate(-2deg)
    transform: translateX(-3px) rotate(-2deg)

  50%
    -webkit-transform: translateX(2px) rotate(1deg)
    transform: translateX(2px) rotate(1deg)

  60%
    -webkit-transform: translateX(-2px) rotate(-1deg)
    transform: translateX(-2px) rotate(-1deg)

  70%
    -webkit-transform: translateX(2px) rotate(1deg)
    transform: translateX(2px) rotate(1deg)

  80%
    -webkit-transform: translateX(-2px) rotate(-1deg)
    transform: translateX(-2px) rotate(-1deg)

  90%
    -webkit-transform: translateX(1px) rotate(0)
    transform: translateX(1px) rotate(0)

  100%
    -webkit-transform: translateX(-1px) rotate(0)
    transform: translateX(-1px) rotate(0)

@keyframes hvr-icon-buzz-out
  10%
    -webkit-transform: translateX(3px) rotate(2deg)
    transform: translateX(3px) rotate(2deg)

  20%
    -webkit-transform: translateX(-3px) rotate(-2deg)
    transform: translateX(-3px) rotate(-2deg)

  30%
    -webkit-transform: translateX(3px) rotate(2deg)
    transform: translateX(3px) rotate(2deg)

  40%
    -webkit-transform: translateX(-3px) rotate(-2deg)
    transform: translateX(-3px) rotate(-2deg)

  50%
    -webkit-transform: translateX(2px) rotate(1deg)
    transform: translateX(2px) rotate(1deg)

  60%
    -webkit-transform: translateX(-2px) rotate(-1deg)
    transform: translateX(-2px) rotate(-1deg)

  70%
    -webkit-transform: translateX(2px) rotate(1deg)
    transform: translateX(2px) rotate(1deg)

  80%
    -webkit-transform: translateX(-2px) rotate(-1deg)
    transform: translateX(-2px) rotate(-1deg)

  90%
    -webkit-transform: translateX(1px) rotate(0)
    transform: translateX(1px) rotate(0)

  100%
    -webkit-transform: translateX(-1px) rotate(0)
    transform: translateX(-1px) rotate(0)

.hvr-icon-buzz-out
  display: inline-block
  vertical-align: middle
  -webkit-transform: perspective(1px) translateZ(0)
  transform: perspective(1px) translateZ(0)
  box-shadow: 0 0 1px transparent
  position: relative
  padding-right: 2.2em
  -webkit-transition-duration: 0.3s
  transition-duration: 0.3s

.hvr-icon-buzz-out:before
  content: "\f023"
  position: absolute
  right: 1em
  padding: 0 1px
  font-family: FontAwesome
  -webkit-transform: translateZ(0)
  transform: translateZ(0)

.hvr-icon-buzz-out:hover:before, .hvr-icon-buzz-out:focus:before, .hvr-icon-buzz-out:active:before
  -webkit-animation-name: hvr-icon-buzz-out
  animation-name: hvr-icon-buzz-out
  -webkit-animation-duration: 0.75s
  animation-duration: 0.75s
  -webkit-animation-timing-function: linear
  animation-timing-function: linear
  -webkit-animation-iteration-count: 1
  animation-iteration-count: 1

/* CURLS
/* Curl Top Left
.hvr-curl-top-left
  display: inline-block
  vertical-align: middle
  -webkit-transform: perspective(1px) translateZ(0)
  transform: perspective(1px) translateZ(0)
  box-shadow: 0 0 1px transparent
  position: relative

.hvr-curl-top-left:before
  pointer-events: none
  position: absolute
  content: ''
  height: 0
  width: 0
  top: 0
  left: 0
  background: white

  /* IE9
  background: linear-gradient(135deg, white 45%, #aaa 50%, #ccc 56%, white 80%)
  filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#ffffff', endColorstr='#000000')

  /*For IE7-8-9
  z-index: 1000
  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4)
  -webkit-transition-duration: 0.3s
  transition-duration: 0.3s
  -webkit-transition-property: width, height
  transition-property: width, height

.hvr-curl-top-left:hover:before, .hvr-curl-top-left:focus:before, .hvr-curl-top-left:active:before
  width: 25px
  height: 25px

/* Curl Top Right
.hvr-curl-top-right
  display: inline-block
  vertical-align: middle
  -webkit-transform: perspective(1px) translateZ(0)
  transform: perspective(1px) translateZ(0)
  box-shadow: 0 0 1px transparent
  position: relative

.hvr-curl-top-right:before
  pointer-events: none
  position: absolute
  content: ''
  height: 0
  width: 0
  top: 0
  right: 0
  background: white

  /* IE9
  background: linear-gradient(225deg, white 45%, #aaa 50%, #ccc 56%, white 80%)
  box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.4)
  -webkit-transition-duration: 0.3s
  transition-duration: 0.3s
  -webkit-transition-property: width, height
  transition-property: width, height

.hvr-curl-top-right:hover:before, .hvr-curl-top-right:focus:before, .hvr-curl-top-right:active:before
  width: 25px
  height: 25px

/* Curl Bottom Right
.hvr-curl-bottom-right
  display: inline-block
  vertical-align: middle
  -webkit-transform: perspective(1px) translateZ(0)
  transform: perspective(1px) translateZ(0)
  box-shadow: 0 0 1px transparent
  position: relative

.hvr-curl-bottom-right:before
  pointer-events: none
  position: absolute
  content: ''
  height: 0
  width: 0
  bottom: 0
  right: 0
  background: white

  /* IE9
  background: linear-gradient(315deg, white 45%, #aaa 50%, #ccc 56%, white 80%)
  box-shadow: -1px -1px 1px rgba(0, 0, 0, 0.4)
  -webkit-transition-duration: 0.3s
  transition-duration: 0.3s
  -webkit-transition-property: width, height
  transition-property: width, height

.hvr-curl-bottom-right:hover:before, .hvr-curl-bottom-right:focus:before, .hvr-curl-bottom-right:active:before
  width: 25px
  height: 25px

/* Curl Bottom Left
.hvr-curl-bottom-left
  display: inline-block
  vertical-align: middle
  -webkit-transform: perspective(1px) translateZ(0)
  transform: perspective(1px) translateZ(0)
  box-shadow: 0 0 1px transparent
  position: relative

.hvr-curl-bottom-left:before
  pointer-events: none
  position: absolute
  content: ''
  height: 0
  width: 0
  bottom: 0
  left: 0
  background: white

  /* IE9
  background: linear-gradient(45deg, white 45%, #aaa 50%, #ccc 56%, white 80%)
  box-shadow: 1px -1px 1px rgba(0, 0, 0, 0.4)
  -webkit-transition-duration: 0.3s
  transition-duration: 0.3s
  -webkit-transition-property: width, height
  transition-property: width, height

.hvr-curl-bottom-left:hover:before, .hvr-curl-bottom-left:focus:before, .hvr-curl-bottom-left:active:before
  width: 25px
  height: 25px