/*!
 * Hover.css (http://ianlunn.co.uk/)
 * Version: 1.0.8 (Optimized)
 */

/* Base styles */
.button {
  margin: .4em;
  padding: 1em;
  cursor: pointer;
  background: #e1e1e1;
  text-decoration: none;
  color: #666666;
}

/* Common styles */
[class^="grow"],
[class^="shrink"],
[class^="pulse"],
[class^="float"],
[class^="sink"],
[class^="bob"],
[class^="hang"],
[class^="skew"],
[class^="wobble"],
[class^="buzz"] {
  display: inline-block;
  transform: translateZ(0);
  backface-visibility: hidden;
  vertical-align: middle;
}

/* Transitions */
.grow,
.shrink,
.rotate,
.grow-rotate,
.float,
.sink,
.skew,
.skew-forward,
.skew-backward {
  transition: transform 0.3s ease-out;
}

/* Simple transforms */
.grow:hover { transform: scale(1.1); }
.shrink:hover { transform: scale(0.9); }
.rotate:hover { transform: rotate(4deg); }
.grow-rotate:hover { transform: scale(1.1) rotate(4deg); }
.float:hover { transform: translateY(-5px); }
.sink:hover { transform: translateY(5px); }
.skew:hover { transform: skew(-10deg); }
.skew-forward:hover { transform-origin: 0 100%; transform: skew(-10deg); }
.skew-backward:hover { transform-origin: 0 100%; transform: skew(10deg); }

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

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

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

/* Animation applications */
.pulse:hover {
  animation: pulse 1s linear infinite;
}

.wobble-vertical:hover {
  animation: wobble-vertical 1s ease-in-out;
}

.buzz:hover {
  animation: buzz 0.15s linear infinite;
}

/* Bubble effects */
.bubble-top,
.bubble-right,
.bubble-bottom,
.bubble-left {
  position: relative;
}

[class^="bubble-"]:before {
  position: absolute;
  content: '';
  border: 10px solid transparent;
  transition: 0.3s ease-out;
  pointer-events: none;
}

.bubble-top:before {
  border-bottom-color: #e1e1e1;
  top: 0;
  left: calc(50% - 10px);
}

.bubble-right:before {
  border-left-color: #e1e1e1;
  right: 0;
  top: calc(50% - 10px);
}

.bubble-bottom:before {
  border-top-color: #e1e1e1;
  bottom: 0;
  left: calc(50% - 10px);
}

.bubble-left:before {
  border-right-color: #e1e1e1;
  left: 0;
  top: calc(50% - 10px);
}

/* Hover positions */
.bubble-top:hover:before { top: -10px; }
.bubble-right:hover:before { right: -10px; }
.bubble-bottom:hover:before { bottom: -10px; }
.bubble-left:hover:before { left: -10px; }

/* Shadow effects */
.glow {
  transition: box-shadow 0.3s;
}

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

.shadow-radial {
  position: relative;
}

.shadow-radial:before,
.shadow-radial:after {
  content: '';
  position: absolute;
  left: 0;
  width: 100%;
  height: 5px;
  opacity: 0;
  transition: opacity 0.3s;
}

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

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

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