/*!
 * Hover.css (http://ianlunn.co.uk/)
 * Version: 1.0.8
 * Author: Ian Lunn @IanLunn
 * Author URL: http://ianlunn.co.uk/
 * Github: https://github.com/IanLunn/Hover

 * Made available under a MIT License:
 * http://www.opensource.org/licenses/mit-license.php

 * Hover.css Copyright Ian Lunn 2014.
 */
/* Default styles for the demo buttons */
.button { margin: .4em; padding: 1em; cursor: pointer; background: #e1e1e1; text-decoration: none; color: #666666; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }

/* 2D TRANSITIONS */
/* Grow */
.grow { display: inline-block; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: transform; transition-property: transform; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); }
.grow:hover, .grow:focus, .grow:active { -webkit-transform: scale(1.1); transform: scale(1.1); }

/* Shrink */
.shrink { display: inline-block; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: transform; transition-property: transform; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); }
.shrink:hover, .shrink:focus, .shrink:active { -webkit-transform: scale(0.9); transform: scale(0.9); }

/* Pulse */
@-webkit-keyframes pulse { 25% { -webkit-transform: scale(1.1); transform: scale(1.1); }
  75% { -webkit-transform: scale(0.9); transform: scale(0.9); } }

@keyframes pulse { 25% { -webkit-transform: scale(1.1); transform: scale(1.1); }
  75% { -webkit-transform: scale(0.9); transform: scale(0.9); } }

.pulse { display: inline-block; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); }
.pulse:hover, .pulse:focus, .pulse:active { -webkit-animation-name: pulse; animation-name: 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 pulse-grow { to { -webkit-transform: scale(1.1); transform: scale(1.1); } }

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

.pulse-grow { display: inline-block; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); }
.pulse-grow:hover, .pulse-grow:focus, .pulse-grow:active { -webkit-animation-name: pulse-grow; animation-name: 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 pulse-shrink { to { -webkit-transform: scale(0.9); transform: scale(0.9); } }

@keyframes pulse-shrink { to { -webkit-transform: scale(0.9); transform: scale(0.9); } }

.pulse-shrink { display: inline-block; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); }
.pulse-shrink:hover, .pulse-shrink:focus, .pulse-shrink:active { -webkit-animation-name: pulse-shrink; animation-name: 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 push { 50% { -webkit-transform: scale(0.8); transform: scale(0.8); }
  100% { -webkit-transform: scale(1); transform: scale(1); } }

@keyframes push { 50% { -webkit-transform: scale(0.8); transform: scale(0.8); }
  100% { -webkit-transform: scale(1); transform: scale(1); } }

.push { display: inline-block; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); }
.push:hover, .push:focus, .push:active { -webkit-animation-name: push; animation-name: 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 pop { 50% { -webkit-transform: scale(1.2); transform: scale(1.2); }
  100% { -webkit-transform: scale(1); transform: scale(1); } }

@keyframes pop { 50% { -webkit-transform: scale(1.2); transform: scale(1.2); }
  100% { -webkit-transform: scale(1); transform: scale(1); } }

.pop { display: inline-block; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); }
.pop:hover, .pop:focus, .pop:active { -webkit-animation-name: pop; animation-name: 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; }

/* Rotate */
.rotate { display: inline-block; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: transform; transition-property: transform; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); }
.rotate:hover, .rotate:focus, .rotate:active { -webkit-transform: rotate(4deg); transform: rotate(4deg); }

/* Grow Rotate */
.grow-rotate { display: inline-block; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: transform; transition-property: transform; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); }
.grow-rotate:hover, .grow-rotate:focus, .grow-rotate:active { -webkit-transform: scale(1.1) rotate(4deg); transform: scale(1.1) rotate(4deg); }

/* Float */
.float { display: inline-block; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: transform; transition-property: transform; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); }
.float:hover, .float:focus, .float:active { -webkit-transform: translateY(-5px); transform: translateY(-5px); }

/* Sink */
.sink { display: inline-block; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: transform; transition-property: transform; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); }
.sink:hover, .sink:focus, .sink:active { -webkit-transform: translateY(5px); transform: translateY(5px); }

/* Hover */
@-webkit-keyframes hover { 50% { -webkit-transform: translateY(-3px); transform: translateY(-3px); }
  100% { -webkit-transform: translateY(-6px); transform: translateY(-6px); } }

@keyframes hover { 50% { -webkit-transform: translateY(-3px); transform: translateY(-3px); }
  100% { -webkit-transform: translateY(-6px); transform: translateY(-6px); } }

.hover { display: inline-block; -webkit-transition-duration: 0.5s; transition-duration: 0.5s; -webkit-transition-property: transform; transition-property: transform; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); }
.hover:hover, .hover:focus, .hover:active { -webkit-transform: translateY(-6px); transform: translateY(-6px); -webkit-animation-name: hover; animation-name: hover; -webkit-animation-duration: 1.5s; animation-duration: 1.5s; -webkit-animation-delay: 0.3s; animation-delay: 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; }

/* Hang */
@-webkit-keyframes hang { 50% { -webkit-transform: translateY(3px); transform: translateY(3px); }
  100% { -webkit-transform: translateY(6px); transform: translateY(6px); } }

@keyframes hang { 50% { -webkit-transform: translateY(3px); transform: translateY(3px); }
  100% { -webkit-transform: translateY(6px); transform: translateY(6px); } }

.hang { display: inline-block; -webkit-transition-duration: 0.5s; transition-duration: 0.5s; -webkit-transition-property: transform; transition-property: transform; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); }
.hang:hover, .hang:focus, .hang:active { -webkit-transform: translateY(6px); transform: translateY(6px); -webkit-animation-name: hang; animation-name: hang; -webkit-animation-duration: 1.5s; animation-duration: 1.5s; -webkit-animation-delay: 0.3s; animation-delay: 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; }

/* Skew */
.skew { display: inline-block; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: transform; transition-property: transform; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); }
.skew:hover, .skew:focus, .skew:active { -webkit-transform: skew(-10deg); transform: skew(-10deg); }

/* Skew Forward */
.skew-forward { display: inline-block; -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%; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); }
.skew-forward:hover, .skew-forward:focus, .skew-forward:active { -webkit-transform: skew(-10deg); transform: skew(-10deg); }

/* Skew Backward */
.skew-backward { display: inline-block; -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%; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); }
.skew-backward:hover, .skew-backward:focus, .skew-backward:active { -webkit-transform: skew(10deg); transform: skew(10deg); }

/* Wobble Vertical */
@-webkit-keyframes 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 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); } }

.wobble-vertical { display: inline-block; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); }
.wobble-vertical:hover, .wobble-vertical:focus, .wobble-vertical:active { -webkit-animation-name: wobble-vertical; animation-name: 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 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 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); } }

.wobble-horizontal { display: inline-block; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); }
.wobble-horizontal:hover, .wobble-horizontal:focus, .wobble-horizontal:active { -webkit-animation-name: wobble-horizontal; animation-name: 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 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 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); } }

.wobble-to-bottom-right { display: inline-block; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); }
.wobble-to-bottom-right:hover, .wobble-to-bottom-right:focus, .wobble-to-bottom-right:active { -webkit-animation-name: wobble-to-bottom-right; animation-name: 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 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 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); } }

.wobble-to-top-right { display: inline-block; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); }
.wobble-to-top-right:hover, .wobble-to-top-right:focus, .wobble-to-top-right:active { -webkit-animation-name: wobble-to-top-right; animation-name: 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 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 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); } }

.wobble-top { display: inline-block; -webkit-transform-origin: 0 100%; transform-origin: 0 100%; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); }
.wobble-top:hover, .wobble-top:focus, .wobble-top:active { -webkit-animation-name: wobble-top; animation-name: 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 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 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); } }

.wobble-bottom { display: inline-block; -webkit-transform-origin: 100% 0; transform-origin: 100% 0; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); }
.wobble-bottom:hover, .wobble-bottom:focus, .wobble-bottom:active { -webkit-animation-name: wobble-bottom; animation-name: 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 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 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); } }

.wobble-skew { display: inline-block; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); }
.wobble-skew:hover, .wobble-skew:focus, .wobble-skew:active { -webkit-animation-name: wobble-skew; animation-name: 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 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 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); } }

.buzz { display: inline-block; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); }
.buzz:hover, .buzz:focus, .buzz:active { -webkit-animation-name: buzz; animation-name: 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 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 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); } }

.buzz-out { display: inline-block; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); }
.buzz-out:hover, .buzz-out:focus, .buzz-out:active { -webkit-animation-name: buzz-out; animation-name: 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; }

/* BORDER TRANSITIONS */
/* Border Fade */
.border-fade { display: inline-block; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: box-shadow; transition-property: box-shadow; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: inset 0 0 0 4px #e1e1e1, 0 0 1px rgba(0, 0, 0, 0); /* Hack to improve aliasing on mobile/tablet devices */ }
.border-fade:hover, .border-fade:focus, .border-fade:active { box-shadow: inset 0 0 0 4px #666666, 0 0 1px rgba(0, 0, 0, 0); /* Hack to improve aliasing on mobile/tablet devices */ }

/* Hollow */
.hollow { display: inline-block; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: background; transition-property: background; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: inset 0 0 0 4px #e1e1e1, 0 0 1px rgba(0, 0, 0, 0); /* Hack to improve aliasing on mobile/tablet devices */ }
.hollow:hover, .hollow:focus, .hollow:active { background: none; }

/* Trim */
.trim { display: inline-block; position: relative; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); }
.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; }
.trim:hover:before, .trim:focus:before, .trim:active:before { opacity: 1; }

/* Outline Outward */
.outline-outward { display: inline-block; position: relative; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); }
.outline-outward: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; }
.outline-outward:hover:before, .outline-outward:focus:before, .outline-outward:active:before { top: -8px; right: -8px; bottom: -8px; left: -8px; }

/* Outline Inward */
.outline-inward { display: inline-block; position: relative; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); }
.outline-inward: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; }
.outline-inward:hover:before, .outline-inward:focus:before, .outline-inward:active:before { top: -8px; right: -8px; bottom: -8px; left: -8px; opacity: 1; }

/* Round Corners */
.round-corners { display: inline-block; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: border-radius; transition-property: border-radius; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); }
.round-corners:hover, .round-corners:focus, .round-corners:active { border-radius: 1em; }

/* SHADOW/GLOW TRANSITIONS */
/* Glow */
.glow { display: inline-block; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: box-shadow; transition-property: box-shadow; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); }
.glow:hover, .glow:focus, .glow:active { box-shadow: 0 0 8px rgba(0, 0, 0, 0.6); }

/* Box Shadow Outset */
.box-shadow-outset { display: inline-block; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: box-shadow; transition-property: box-shadow; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); }
.box-shadow-outset:hover, .box-shadow-outset:focus, .box-shadow-outset:active { box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.6); }

/* Box Shadow Inset */
.box-shadow-inset { display: inline-block; -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 rgba(0, 0, 0, 0); /* Hack to improve aliasing on mobile/tablet devices */ -webkit-transform: translateZ(0); transform: translateZ(0); }
.box-shadow-inset:hover, .box-shadow-inset:focus, .box-shadow-inset:active { box-shadow: inset 2px 2px 2px rgba(0, 0, 0, 0.6), 0 0 1px rgba(0, 0, 0, 0); /* Hack to improve aliasing on mobile/tablet devices */ }

/* Float Shadow */
.float-shadow { display: inline-block; position: relative; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: transform; transition-property: transform; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); }
.float-shadow:before { pointer-events: none; position: absolute; z-index: -1; content: ''; top: 100%; left: 5%; height: 10px; width: 90%; opacity: 0; background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 80%); /* W3C */ -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: transform, opacity; transition-property: transform, opacity; }
.float-shadow:hover, .float-shadow:focus, .float-shadow:active { -webkit-transform: translateY(-5px); transform: translateY(-5px); /* move the element up by 5px */ }
.float-shadow:hover:before, .float-shadow:focus:before, .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) */ }

/* Hover Shadow */
@-webkit-keyframes hover { 50% { -webkit-transform: translateY(-3px); transform: translateY(-3px); }
  100% { -webkit-transform: translateY(-6px); transform: translateY(-6px); } }

@keyframes hover { 50% { -webkit-transform: translateY(-3px); transform: translateY(-3px); }
  100% { -webkit-transform: translateY(-6px); transform: translateY(-6px); } }

@-webkit-keyframes hover-shadow { 0% { -webkit-transform: translateY(6px); transform: translateY(6px); opacity: .4; }
  50% { -webkit-transform: translateY(3px); transform: translateY(3px); opacity: 1; }
  100% { -webkit-transform: translateY(6px); transform: translateY(6px); opacity: .4; } }

@keyframes hover-shadow { 0% { -webkit-transform: translateY(6px); transform: translateY(6px); opacity: .4; }
  50% { -webkit-transform: translateY(3px); transform: translateY(3px); opacity: 1; }
  100% { -webkit-transform: translateY(6px); transform: translateY(6px); opacity: .4; } }

.hover-shadow { display: inline-block; position: relative; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: transform; transition-property: transform; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); }
.hover-shadow:before { pointer-events: none; position: absolute; z-index: -1; content: ''; top: 100%; left: 5%; height: 10px; width: 90%; opacity: 0; background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 80%); /* W3C */ -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: transform, opacity; transition-property: transform, opacity; }
.hover-shadow:hover, .hover-shadow:focus, .hover-shadow:active { -webkit-transform: translateY(-6px); transform: translateY(-6px); -webkit-animation-name: hover; animation-name: hover; -webkit-animation-duration: 1.5s; animation-duration: 1.5s; -webkit-animation-delay: 0.3s; animation-delay: 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; }
.hover-shadow:hover:before, .hover-shadow:focus:before, .hover-shadow:active:before { opacity: .4; -webkit-transform: translateY(6px); transform: translateY(6px); -webkit-animation-name: hover-shadow; animation-name: hover-shadow; -webkit-animation-duration: 1.5s; animation-duration: 1.5s; -webkit-animation-delay: 0.3s; animation-delay: 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; }

/* Shadow Radial */
.shadow-radial { display: inline-block; position: relative; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); }
.shadow-radial:before, .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; }
.shadow-radial:before { bottom: 100%; background: radial-gradient(ellipse at 50% 150%, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 80%); }
.shadow-radial:after { top: 100%; background: radial-gradient(ellipse at 50% -50%, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 80%); }
.shadow-radial:hover:before, .shadow-radial:focus:before, .shadow-radial:active:before, .shadow-radial:hover:after, .shadow-radial:focus:after, .shadow-radial:active:after { opacity: 1; }

/* SPEECH BUBBLES */
/* Bubble Top */
.bubble-top { display: inline-block; position: relative; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); }
.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: top; transition-property: top; left: calc(50% - 10px); top: 0; border-width: 0 10px 10px 10px; border-color: transparent transparent #e1e1e1 transparent; }
.bubble-top:hover:before, .bubble-top:focus:before, .bubble-top:active:before { top: -10px; }

/* Bubble Right */
.bubble-right { display: inline-block; position: relative; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); }
.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: right; transition-property: right; top: calc(50% - 10px); right: 0; border-width: 10px 0 10px 10px; border-color: transparent transparent transparent #e1e1e1; }
.bubble-right:hover:before, .bubble-right:focus:before, .bubble-right:active:before { right: -10px; }

/* Bubble Bottom */
.bubble-bottom { display: inline-block; position: relative; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); }
.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: bottom; transition-property: bottom; left: calc(50% - 10px); bottom: 0; border-width: 10px 10px 0 10px; border-color: #e1e1e1 transparent transparent transparent; }
.bubble-bottom:hover:before, .bubble-bottom:focus:before, .bubble-bottom:active:before { bottom: -10px; }

/* Bubble Left */
.bubble-left { display: inline-block; position: relative; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); }
.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: left; transition-property: left; top: calc(50% - 10px); left: 0; border-width: 10px 10px 10px 0; border-color: transparent #e1e1e1 transparent transparent; }
.bubble-left:hover:before, .bubble-left:focus:before, .bubble-left:active:before { left: -10px; }

/* Bubble Float Top */
.bubble-float-top { display: inline-block; position: relative; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: transform; transition-property: transform; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); }
.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: top; transition-property: top; }
.bubble-float-top:hover, .bubble-float-top:focus, .bubble-float-top:active { -webkit-transform: translateY(5px) translateZ(0); transform: translateY(5px) translateZ(0); }
.bubble-float-top:hover:before, .bubble-float-top:focus:before, .bubble-float-top:active:before { top: -10px; }

/* Bubble Float Right */
.bubble-float-right { display: inline-block; position: relative; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: transform; transition-property: transform; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); }
.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: right; transition-property: right; }
.bubble-float-right:hover, .bubble-float-right:focus, .bubble-float-right:active { -webkit-transform: translateX(-5px); transform: translateX(-5px); }
.bubble-float-right:hover:before, .bubble-float-right:focus:before, .bubble-float-right:active:before { right: -10px; }

/* Bubble Float Bottom */
.bubble-float-bottom { display: inline-block; position: relative; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: transform; transition-property: transform; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); }
.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: bottom; transition-property: bottom; }
.bubble-float-bottom:hover, .bubble-float-bottom:focus, .bubble-float-bottom:active { -webkit-transform: translateY(-5px) translateZ(0); transform: translateY(-5px) translateZ(0); }
.bubble-float-bottom:hover:before, .bubble-float-bottom:focus:before, .bubble-float-bottom:active:before { bottom: -10px; }

/* Bubble Float Left */
.bubble-float-left { display: inline-block; position: relative; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: transform; transition-property: transform; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); }
.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: left; transition-property: left; }
.bubble-float-left:hover, .bubble-float-left:focus, .bubble-float-left:active { -webkit-transform: translateX(5px); transform: translateX(5px); }
.bubble-float-left:hover:before, .bubble-float-left:focus:before, .bubble-float-left:active:before { left: -10px; }

/* CURLS */
/* Curl Top Left */
.curl-top-left { display: inline-block; position: relative; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); }
.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, #ffffff 45%, #aaaaaa 50%, #cccccc 56%, #ffffff 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; }
.curl-top-left:hover:before, .curl-top-left:focus:before, .curl-top-left:active:before { width: 25px; height: 25px; }

/* Curl Top Right */
.curl-top-right { display: inline-block; position: relative; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); }
.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, #ffffff 45%, #aaaaaa 50%, #cccccc 56%, #ffffff 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; }
.curl-top-right:hover:before, .curl-top-right:focus:before, .curl-top-right:active:before { width: 25px; height: 25px; }

/* Curl Bottom Right */
.curl-bottom-right { display: inline-block; position: relative; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); }
.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, #ffffff 45%, #aaaaaa 50%, #cccccc 56%, #ffffff 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; }
.curl-bottom-right:hover:before, .curl-bottom-right:focus:before, .curl-bottom-right:active:before { width: 25px; height: 25px; }

/* Curl Bottom Left */
.curl-bottom-left { display: inline-block; position: relative; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); }
.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, #ffffff 45%, #aaaaaa 50%, #cccccc 56%, #ffffff 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; }
.curl-bottom-left:hover:before, .curl-bottom-left:focus:before, .curl-bottom-left:active:before { width: 25px; height: 25px; }