code:
<!DOCTYPE html>

		<meta charset="utf-8">
		<meta property="og:image" content="https://ianlunn.github.io/Hover/hover.jpg" />
		<meta property="og:site_name" content="Hover.css"/>
		<meta property="og:title" content="Hover.css - A collection of CSS3 powered hover effects" />
		<title>Hover.css - A collection of CSS3 powered hover effects</title>
		<link href="css/demo-page.css" rel="stylesheet" media="all">
		<link href="css/hover.css" rel="stylesheet" media="all">
		<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" media="all">

			Fork me on GitHub

Hover.css v2

Effects

Setup

Tutorial

Licenses

A collection of CSS3 powered hover effects to be applied to links, buttons, logos, SVG, featured images and so on. Easily apply to your own elements, modify or just use for inspiration. Available in CSS, Sass, and LESS.

				Download on GitHub

					Tweet

2D Transitions

				Grow
				Shrink
				Pulse
				Pulse Grow
				Pulse Shrink
				Push
				Pop
				Bounce In
				Bounce Out
				Rotate
				Grow Rotate
				Float
				Sink
				Bob
				Hang
				Skew
				Skew Forward
				Skew Backward
				Wobble Horizontal
				Wobble Vertical
				Wobble To Bottom Right
				Wobble To Top Right
				Wobble Top
				Wobble Bottom
				Wobble Skew
				Buzz
				Buzz Out
				Forward
				Backward

Background Transitions

				Fade
				Back Pulse
				Sweep To Right
				Sweep To Left
				Sweep To Bottom
				Sweep To Top
				Bounce To Right
				Bounce To Left
				Bounce To Bottom
				Bounce To Top
				Radial Out
				Radial In
				Rectangle In
				Rectangle Out
				Shutter In Horizontal
				Shutter Out Horizontal
				Shutter In Vertical
				Shutter Out Vertical

Icons

				Demo font icons courtesy of FontAwesome. How to use icons with Hover.css.

					 Icon Back

					Icon Forward

					Icon Down

					Icon Up

					Icon Spin

					Icon Drop

					Icon Fade

					Icon Float Away

					Icon Sink Away

					Icon Grow

					Icon Shrink

					Icon Pulse

					Icon Pulse Grow

					Icon Pulse Shrink

					Icon Push

					Icon Pop

					Icon Bounce

					Icon Rotate

					Icon Grow Rotate

					Icon Float

					Icon Sink

					Icon Bob

					Icon Hang

					Icon Wobble Horizontal

					Icon Wobble Vertical

					Icon Buzz

					Icon Buzz Out

Border Transitions

				Border Fade
				Hollow
				Trim
				Ripple Out
				Ripple In
				Outline Out
				Outline In
				Round Corners
				Underline From Left
				Underline From Center
				Underline From Right
				Reveal
				Underline Reveal
				Overline Reveal
				Overline From Left
				Overline From Center
				Overline From Right

Shadow and Glow Transitions

				Shadow
				Grow Shadow
				Float Shadow
				Glow
				Shadow Radial
				Box Shadow Outset
				Box Shadow Inset

Speech Bubbles

				Bubble Top
				Bubble Right
				Bubble Bottom
				Bubble Left
				Bubble Float Top
				Bubble Float Right
				Bubble Float Bottom
				Bubble Float Left

Curls

				Curl Top Left
				Curl Top Right
				Curl Bottom Right
				Curl Bottom Left

About Hover.css

All Hover.css effects make use of a single element (with the help of some pseudo-elements where necessary), are self contained so you can easily copy and paste them, and come in CSS, Sass, and LESS flavours.

Many effects use CSS3 features such as transitions, transforms and animations. Old browsers that don't support these features may need some extra attention to be certain a fallback hover effect is still in place.

Licenses

Hover.css is made available under a free personal/open source or paid commercial licenses depending on your requirements. To compare licenses please visit the Ian Lunn Design Limited Store and purchase a commercial license.

Personal/Open Source

For personal/open source use, Hover.css is made available under a MIT license:

Use in unlimited personal applications

Your application can't be sold

Your modifications remain open-source

Free updates

Read full license

Commercial

For commercial use, Hover.css is made available under Commercial, Extended Commercial, and OEM Commercial licenses.

Commercial License

Use in 1 application

Sell your application once only (e.g. a website sold to a client)

Your code is kept proprietary, to yourself

Free updates to the major version

Purchase | Read full license

Extended Commercial License

Use in unlimited applications

Sell your applications an unlimited number of times (e.g. a website template sold on a theme store)*

Your code is kept proprietary, to yourself

Free updates to the major version

*With the exception of applications that allow end users to produce separate applications. See the OEM Commercial License.

Purchase | Read full license

Hover.css
 Commercial
License

For 1 Project

							$14

Hover.css
 Extended Commercial
License

For Unlimited Projects

							$18

OEM Commercial License

Should your application enable end users to produce separate applications that incorporate Ian Lunn Design Limited's software, for example, a development toolkit, library, or application builder, you must obtain an OEM Commercial License. Please contact us for more information about the OEM Commercial License.

MIT License (Pre v2.2.0 / 24th March 2017)

Hover.css was previously made available under a MIT License for both commercial and non-commercial use. Anyone that obtained a MIT license for commercial use before v2.2.0 (24th March 2017) may continue to use Hover.css versions prior to v2.2.0 under that same license.

If you'd like to upgrade to v2.2.0 or above, or would like to simply show your support for Hover.css (we'd much appreciate it!), please purchase an up-to-date commercial license. Commercial License.

Hover.css is now available as an Eager App

Quickly and easily install Hover.css on your WordPress site or via an embed code with Eager app.

Like Hover.css? Try out my animation framework for sliders,
 presentations, and other step-based applications

						<svg class="" onmouseenter="el=this;el.classList.add('active');setTimeout(function(){el.classList.remove('active')},600);" xmlns="https://www.w3.org/2000/svg" width="24" height="30" viewBox="0 0 52 52">
							<g class="circle-holder">
								<path class="circle" fill="#2E96D6" d="M5.4 26c0-11.4 9.2-20.6 20.6-20.6s20.6 9.2 20.6 20.6c0 11.4-9.2 20.6-20.6 20.6s-20.6-9.2-20.6-20.6zm-5.4 0c0 14.4 11.6 26 26 26s26-11.6 26-26-11.6-26-26-26-26 11.6-26 26z"></path>
							</g>
							<path class="i" fill="#fff" d="M15 22h9v16h-9v-16z"></path>
							<path class="l" fill="#fff" d="M28 14h9v24h-9v-24z"></path>
						</svg>

Made by
Ian Lunn - WordPress & Front-end Developer

Follow @IanLunn for Hover.css news, web design &
 development links, tips, and opinions

			Copyright © 2017 Ian Lunn Design Limited

license: mit


code:
// As is often the case, some devices/browsers need additional code to get CSS to work
// in the most desired way. These mixins are used to quickly drop in hacks for each element
// Find out more here: https://github.com/IanLunn/Hover/wiki/Hacks-Explained

.hardwareAccel() {
	// Improve performance on mobile/tablet devices
	// Perspective reduces blurryness of text in Chrome
	.prefixed(transform, perspective(1px) translateZ(0));
}

.improveAntiAlias() {
	// Improve aliasing on mobile/tablet devices
	box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

.forceBlockLevel() {
	// Transforms need to be block-level to work
	display: inline-block;
	vertical-align: middle;
}

.hacks() {
	.forceBlockLevel();
	.hardwareAccel();
	.improveAntiAlias();
}


code:
// prefix declarations
.prefixed(@property, @value) {
  & when (@webkit = true) {
    -webkit-@{property}: @value;
  }

  & when (@moz = true) {
      -moz-@{property}: @value;
  }

  & when (@ms = true) {
      -ms-@{property}: @value;
  }

  & when (@o = true) {
      -o-@{property}: @value;
  }

  @{property}: @value;
}

// prefix keyframes
.keyframes(@name; @content) {
  & when (@webkit = true) {
    @-webkit-keyframes @name {
      @content();
    }
  }

  & when (@moz = true) {
      @-moz-keyframes @name {
          @content();
      }
  }

  & when (@ms = true) {
      @-ms-keyframes @name {
          @content();
      }
  }

  & when (@o = true) {
      @-o-keyframes @name {
          @content();
      }
  }

  @keyframes @name {
    @content();
  }
}


code:
// DEFAULT OPTIONS

// Prefix for Hover class names
@nameSpace: hvr;

// Durations
@fastDuration: .1s;
@mediumDuration: .3s;
@slowDuration: .5s;

// Colors
@primaryColor: #e1e1e1;
@secondaryColor: #666;
@highlightColor: #ccc;
@activeColor: #2098D1;
@shadowColor: rgba(0, 0, 0, .6);

// Speech bubbles options
@tipWidth: 10px;  //the width of the speech bubble tip
@tipHeight: 10px; //the height of the speech bubble tip
@tipColor: @primaryColor;

// Arrows options
@spaceBetweenTextAndArrows: 2.2em;

// Curl dimensions
@curlWidth: 25px;
@curlHeight: 25px;

// Curl colors
@revealAreaColor: white;    // reveal area behind the curl
@curlLineColor: #aaa;       // crease line
@curlTransitionColor: #ccc;	// color transitioning from crease line to final color
@curlLastColor: white;		// final color of the back of the curl

// Browser Prefixes - Which CSS prefixes should be used?
@webkit: true;
@moz: false;
@ms: false;
@o: false;

// Compile with or without classes
@includeClasses: true;


code:
/* Backward */
.backward() {
	.hacks();
	.prefixed(transition-duration, @mediumDuration);
	.prefixed(transition-property, transform);

	&:hover,
	&:focus,
	&:active {
		.prefixed(transform, translateX(-8px));
	}
}


code:
/* Bob */
.keyframes(~"@{nameSpace}-bob", {
	0% {
		.prefixed(transform, translateY(-8px));
	}
	50% {
		.prefixed(transform, translateY(-4px));
	}
	100% {
		.prefixed(transform, translateY(-8px));
	}
});

.keyframes(~"@{nameSpace}-bob-float", {
	100% {
		.prefixed(transform, translateY(-8px));
	}
});

.bob() {
	.hacks();

	&:hover,
	&:focus,
	&:active {
		.prefixed(animation-name, ~"@{nameSpace}-bob-float, @{nameSpace}-bob");
		.prefixed(animation-duration, ~".3s, 1.5s");
		.prefixed(animation-delay, ~"0s, .3s");
		.prefixed(animation-timing-function, ~"ease-out, ease-in-out");
		.prefixed(animation-iteration-count, ~"1, infinite");
		.prefixed(animation-fill-mode, ~"forwards");
		.prefixed(animation-direction, ~"normal, alternate");
	}
}


code:
/* Bounce In */
.bounce-in() {
	.hacks();
	.prefixed(transition-duration, @slowDuration);

	&:hover,
	&:focus,
	&:active {
		.prefixed(transform, scale(1.2));
		.prefixed(transition-timing-function, cubic-bezier(.47,2.02,.31,-0.36));
	}
}


code:
/* Bounce Out */
.bounce-out() {
	.hacks();
	.prefixed(transition-duration, @slowDuration);

	&:hover,
	&:focus,
	&:active {
		.prefixed(transform, scale(.8));
		.prefixed(transition-timing-function, cubic-bezier(.47,2.02,.31,-0.36));
	}
}


code:
/* Buzz Out */
.keyframes(~"@{nameSpace}-buzz-out", {
	10% {
		.prefixed(transform, translateX(3px) rotate(2deg));
	}

	20% {
		.prefixed(transform, translateX(-3px) rotate(-2deg));
	}

	30% {
		.prefixed(transform, translateX(3px) rotate(2deg));
	}

	40% {
		.prefixed(transform, translateX(-3px) rotate(-2deg));
	}

	50% {
		.prefixed(transform, translateX(2px) rotate(1deg));
	}

	60% {
		.prefixed(transform, translateX(-2px) rotate(-1deg));
	}

	70% {
		.prefixed(transform, translateX(2px) rotate(1deg));
	}

	80% {
		.prefixed(transform, translateX(-2px) rotate(-1deg));
	}

	90% {
		.prefixed(transform, translateX(1px) rotate(0));
	}

	100% {
		.prefixed(transform, translateX(-1px) rotate(0));
	}
});

.buzz-out() {
	.hacks();

	&:hover,
	&:focus,
	&:active {
		.prefixed(animation-name, ~"@{nameSpace}-buzz-out");
		.prefixed(animation-duration, .75s);
		.prefixed(animation-timing-function, linear);
		.prefixed(animation-iteration-count, 1);
	}
}


code:
/* Buzz */
.keyframes(~"@{nameSpace}-buzz", {
	50% {
		.prefixed(transform, translateX(3px) rotate(2deg));
	}

	100% {
		.prefixed(transform, translateX(-3px) rotate(-2deg));
	}
});

.buzz() {
	.hacks();

	&:hover,
	&:focus,
	&:active {
		.prefixed(animation-name, ~"@{nameSpace}-buzz");
		.prefixed(animation-duration, .15s);
		.prefixed(animation-timing-function, linear);
		.prefixed(animation-iteration-count, infinite);
	}
}


code:
/* Float */
.float() {
	.hacks();
	.prefixed(transition-duration, @mediumDuration);
	.prefixed(transition-property, transform);
	.prefixed(transition-timing-function, ease-out);

	&:hover,
	&:focus,
	&:active {
		.prefixed(transform, translateY(-8px));
	}
}


code:
/* Forward */
.forward() {
	.hacks();
	.prefixed(transition-duration, @mediumDuration);
	.prefixed(transition-property, transform);

	&:hover,
	&:focus,
	&:active {
		.prefixed(transform, translateX(8px));
	}
}


code:
/* Grow Rotate */
.grow-rotate() {
	.hacks();
	.prefixed(transition-duration, @mediumDuration);
	.prefixed(transition-property, transform);

	&:hover,
	&:focus,
	&:active {
		.prefixed(transform, scale(1.1) rotate(4deg));
	}
}


code:
/* Grow */
.grow() {
	.hacks();
	.prefixed(transition-duration, @mediumDuration);
	.prefixed(transition-property, transform);

	&:hover,
	&:focus,
	&:active {
		.prefixed(transform, scale(1.1));
	}
}


code:
/* Hang */
.keyframes(~"@{nameSpace}-hang", {
	0% {
		.prefixed(transform, translateY(8px));
	}
	50% {
		.prefixed(transform, translateY(4px));
	}
	100% {
		.prefixed(transform, translateY(8px));
	}
});

.keyframes(~"@{nameSpace}-hang-sink", {
	100% {
		.prefixed(transform, translateY(8px));
	}
});

.hang() {
	.hacks();

	&:hover,
	&:focus,
	&:active {
		.prefixed(animation-name, ~"@{nameSpace}-hang-sink, @{nameSpace}-hang");
		.prefixed(animation-duration, ~".3s, 1.5s");
		.prefixed(animation-delay, ~"0s, .3s");
		.prefixed(animation-timing-function, ~"ease-out, ease-in-out");
		.prefixed(animation-iteration-count, ~"1, infinite");
		.prefixed(animation-fill-mode, ~"forwards");
		.prefixed(animation-direction, ~"normal, alternate");
	}
}


code:
/* Pop */
.keyframes(~"@{nameSpace}-pop", {
	50% {
		.prefixed(transform, scale(1.2));
	}
});

.pop() {
	.hacks();

	&:hover,
	&:focus,
	&:active {
		.prefixed(animation-name, ~"@{nameSpace}-pop");
		.prefixed(animation-duration, @mediumDuration);
		.prefixed(animation-timing-function, linear);
		.prefixed(animation-iteration-count, 1);
	}
}


code:
/* Pulse Grow */
.keyframes(~"@{nameSpace}-pulse-grow", {
	to {
		.prefixed(transform, scale(1.1));
	}
});

.pulse-grow() {
	.hacks();

	&:hover,
	&:focus,
	&:active {
		.prefixed(animation-name, ~"@{nameSpace}-pulse-grow");
		.prefixed(animation-duration, @mediumDuration);
		.prefixed(animation-timing-function, linear);
		.prefixed(animation-iteration-count, infinite);
		.prefixed(animation-direction, alternate);
	}
}


code:
/* Pulse Shrink */
.keyframes(~"@{nameSpace}-pulse-shrink", {
	to {
		.prefixed(transform, scale(.9));
	}
});

.pulse-shrink() {
	.hacks();

	&:hover,
	&:focus,
	&:active {
		.prefixed(animation-name, ~"@{nameSpace}-pulse-shrink");
		.prefixed(animation-duration, @mediumDuration);
		.prefixed(animation-timing-function, linear);
		.prefixed(animation-iteration-count, infinite);
		.prefixed(animation-direction, alternate);
	}
}


code:
/* Pulse */
.keyframes(~"@{nameSpace}-pulse", {
	25% {
		.prefixed(transform, scale(1.1));
	}

	75% {
		.prefixed(transform, scale(.9));
	}
});

.pulse() {
	.hacks();

	&:hover,
	&:focus,
	&:active {
		.prefixed(animation-name, ~"@{nameSpace}-pulse");
		.prefixed(animation-duration, 1s);
		.prefixed(animation-timing-function, linear);
		.prefixed(animation-iteration-count, infinite);
	}
}


code:
/* Push */
.keyframes(~"@{nameSpace}-push", {
	50% {
		.prefixed(transform, scale(.8));
	}

	100% {
		.prefixed(transform, scale(1));
	}
});

.push() {
	.hacks();

	&:hover,
	&:focus,
	&:active {
		.prefixed(animation-name, ~"@{nameSpace}-push");
		.prefixed(animation-duration, .3s);
		.prefixed(animation-timing-function, linear);
		.prefixed(animation-iteration-count, 1);
	}
}


code:
/* Rotate */
.rotate() {
	.hacks();
	.prefixed(transition-duration, @mediumDuration);
	.prefixed(transition-property, transform);

	&:hover,
	&:focus,
	&:active {
		.prefixed(transform, rotate(4deg));
	}
}


code:
/* Shrink */
.shrink() {
	.hacks();
	.prefixed(transition-duration, @mediumDuration);
	.prefixed(transition-property, transform);

	&:hover,
	&:focus,
	&:active {
		.prefixed(transform, scale(.9));
	}
}


code:
/* Sink */
.sink() {
	.hacks();
	.prefixed(transition-duration, @mediumDuration);
	.prefixed(transition-property, transform);
	.prefixed(transition-timing-function, ease-out);

	&:hover,
	&:focus,
	&:active {
		.prefixed(transform, translateY(8px));
	}
}


code:
/* Skew Backward */
.skew-backward() {
	.hacks();
	.prefixed(transition-duration, @mediumDuration);
	.prefixed(transition-property, transform);
	.prefixed(transform-origin, 0 100%);

	&:hover,
	&:focus,
	&:active {
		.prefixed(transform, skew(10deg));
	}
}


code:
/* Skew Forward */
.skew-forward() {
	.hacks();
	.prefixed(transition-duration, @mediumDuration);
	.prefixed(transition-property, transform);
	.prefixed(transform-origin, 0 100%);

	&:hover,
	&:focus,
	&:active {
		.prefixed(transform, skew(-10deg));
	}
}


code:
/* Skew */
.skew() {
	.hacks();
	.prefixed(transition-duration, @mediumDuration);
	.prefixed(transition-property, transform);

	&:hover,
	&:focus,
	&:active {
		.prefixed(transform, skew(-10deg));
	}
}


code:
/* Wobble Bottom */
.keyframes(~"@{nameSpace}-wobble-bottom", {
	16.65% {
		.prefixed(transform, skew(-12deg));
	}

	33.3% {
		.prefixed(transform, skew(10deg));
	}

	49.95% {
		.prefixed(transform, skew(-6deg));
	}

	66.6% {
		.prefixed(transform, skew(4deg));
	}

	83.25% {
		.prefixed(transform, skew(-2deg));
	}

	100% {
		.prefixed(transform, skew(0));
	}
});

.wobble-bottom() {
	.hacks();
	.prefixed(transform-origin, 100% 0);

	&:hover,
	&:focus,
	&:active {
		.prefixed(animation-name, ~"@{nameSpace}-wobble-bottom");
		.prefixed(animation-duration, 1s);
		.prefixed(animation-timing-function, ease-in-out);
		.prefixed(animation-iteration-count, 1);
	}
}


code:
/* Wobble Horizontal */
.keyframes(~"@{nameSpace}-wobble-horizontal", {
	16.65% {
		.prefixed(transform, translateX(8px));
	}

	33.3% {
		.prefixed(transform, translateX(-6px));
	}

	49.95% {
		.prefixed(transform, translateX(4px));
	}

	66.6% {
		.prefixed(transform, translateX(-2px));
	}

	83.25% {
		.prefixed(transform, translateX(1px));
	}

	100% {
		.prefixed(transform, translateX(0));
	}
});

.wobble-horizontal() {
	.hacks();

	&:hover,
	&:focus,
	&:active {
		.prefixed(animation-name, ~"@{nameSpace}-wobble-horizontal");
		.prefixed(animation-duration, 1s);
		.prefixed(animation-timing-function, ease-in-out);
		.prefixed(animation-iteration-count, 1);
	}
}


code:
/* Wobble Skew */
.keyframes(~"@{nameSpace}-wobble-skew", {
	16.65% {
		.prefixed(transform, skew(-12deg));
	}

	33.3% {
		.prefixed(transform, skew(10deg));
	}

	49.95% {
		.prefixed(transform, skew(-6deg));
	}

	66.6% {
		.prefixed(transform, skew(4deg));
	}

	83.25% {
		.prefixed(transform, skew(-2deg));
	}

	100% {
		.prefixed(transform, skew(0));
	}
});

.wobble-skew() {
	.hacks();

	&:hover,
	&:focus,
	&:active {
		.prefixed(animation-name, ~"@{nameSpace}-wobble-skew");
		.prefixed(animation-duration, 1s);
		.prefixed(animation-timing-function, ease-in-out);
		.prefixed(animation-iteration-count, 1);
	}
}


code:
/* Wobble To Bottom Right */
.keyframes(~"@{nameSpace}-wobble-to-bottom-right", {
	16.65% {
		.prefixed(transform, translate(8px, 8px));
	}

	33.3% {
		.prefixed(transform, translate(-6px, -6px));
	}

	49.95% {
		.prefixed(transform, translate(4px, 4px));
	}

	66.6% {
		.prefixed(transform, translate(-2px, -2px));
	}

	83.25% {
		.prefixed(transform, translate(1px, 1px));
	}

	100% {
		.prefixed(transform, translate(0, 0));
	}
});

.wobble-to-bottom-right() {
	.hacks();

	&:hover,
	&:focus,
	&:active {
		.prefixed(animation-name, ~"@{nameSpace}-wobble-to-bottom-right");
		.prefixed(animation-duration, 1s);
		.prefixed(animation-timing-function, ease-in-out);
		.prefixed(animation-iteration-count, 1);
	}
}


code:
/* Wobble To Top Right */
.keyframes(~"@{nameSpace}-wobble-to-top-right", {
  16.65% {
    .prefixed(transform, translate(8px, -8px));
  }

  33.3% {
    .prefixed(transform, translate(-6px, 6px));
  }

  49.95% {
    .prefixed(transform, translate(4px, -4px));
  }

  66.6% {
    .prefixed(transform, translate(-2px, 2px));
  }

  83.25% {
    .prefixed(transform, translate(1px, -1px));
  }

  100% {
    .prefixed(transform, translate(0, 0));
  }
});

.wobble-to-top-right() {
	.hacks();

	&:hover,
    &:focus,
    &:active {
        .prefixed(animation-name, ~"@{nameSpace}-wobble-to-top-right");
        .prefixed(animation-duration, 1s);
        .prefixed(animation-timing-function, ease-in-out);
        .prefixed(animation-iteration-count, 1);
	}
}


code:
/* Wobble Top */
.keyframes(~"@{nameSpace}-wobble-top", {
	16.65% {
		.prefixed(transform, skew(-12deg));
	}

	33.3% {
		.prefixed(transform, skew(10deg));
	}

	49.95% {
		.prefixed(transform, skew(-6deg));
	}

	66.6% {
		.prefixed(transform, skew(4deg));
	}

	83.25% {
		.prefixed(transform, skew(-2deg));
	}

	100% {
		.prefixed(transform, skew(0));
	}
});

.wobble-top() {
	.hacks();
	.prefixed(transform-origin, 0 100%);

	&:hover,
	&:focus,
	&:active {
		.prefixed(animation-name, ~"@{nameSpace}-wobble-top");
		.prefixed(animation-duration, 1s);
		.prefixed(animation-timing-function, ease-in-out);
		.prefixed(animation-iteration-count, 1);
	}
}


code:
/* Wobble Vertical */
.keyframes(~"@{nameSpace}-wobble-vertical", {
	16.65% {
		.prefixed(transform, translateY(8px));
	}

	33.3% {
		.prefixed(transform, translateY(-6px));
	}

	49.95% {
		.prefixed(transform, translateY(4px));
	}

	66.6% {
		.prefixed(transform, translateY(-2px));
	}

	83.25% {
		.prefixed(transform, translateY(1px));
	}

	100% {
		.prefixed(transform, translateY(0));
	}
});

.wobble-vertical() {
	.hacks();

	&:hover,
	&:focus,
	&:active {
		.prefixed(animation-name, ~"@{nameSpace}-wobble-vertical");
		.prefixed(animation-duration, 1s);
		.prefixed(animation-timing-function, ease-in-out);
		.prefixed(animation-iteration-count, 1);
	}
}


code:
/* Back Pulse */
.keyframes(~"@{nameSpace}-back-pulse", {
	50% {
		background-color: rgba(32, 152, 209, .75);
	}
});

.back-pulse() {
	.hacks();
	overflow: hidden;
	.prefixed(transition-duration, @slowDuration);
	.prefixed(transition-property, "color, background-color");

	&:hover,
	&:focus,
	&:active {
		.prefixed(animation-name, ~"@{nameSpace}-back-pulse");
		.prefixed(animation-duration, 1s);
		.prefixed(animation-delay, @slowDuration);
		.prefixed(animation-timing-function, linear);
		.prefixed(animation-iteration-count, infinite);
		background-color: @activeColor;
		background-color: rgba(32, 152, 209, 1);
		color: white;
	}
}


code:
/* Bounce To Bottom */
.bounce-to-bottom() {
	.hacks();
	position: relative;
	.prefixed(transition-property, color);
	.prefixed(transition-duration, @slowDuration);

	&:before {
		content: "";
		position: absolute;
		z-index: -1;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: @activeColor;
		.prefixed(transform, scaleY(0));
		.prefixed(transform-origin, 50% 0);
		.prefixed(transition-property, transform);
		.prefixed(transition-duration, @slowDuration);
		.prefixed(transition-timing-function, ease-out);
	}

	&:hover,
	&:focus,
	&:active {
		color: white;

		&:before {
			.prefixed(transform, scaleY(1));
			.prefixed(transition-timing-function, cubic-bezier(.52,1.64,.37,.66));
		}
	}
}


code:
/* Bounce To Left */
.bounce-to-left() {
	.hacks();
	position: relative;
	.prefixed(transition-property, color);
	.prefixed(transition-duration, @slowDuration);

	&:before {
		content: "";
		position: absolute;
		z-index: -1;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: @activeColor;
		.prefixed(transform, scaleX(0));
		.prefixed(transform-origin, 100% 50%);
		.prefixed(transition-property, transform);
		.prefixed(transition-duration, @slowDuration);
		.prefixed(transition-timing-function, ease-out);
	}

	&:hover,
	&:focus,
	&:active {
		color: white;

		&:before {
			.prefixed(transform, scaleX(1));
			.prefixed(transition-timing-function, cubic-bezier(.52,1.64,.37,.66));
		}
	}
}


code:
/* Bounce To Right */
.bounce-to-right() {
	.hacks();
	position: relative;
	.prefixed(transition-property, color);
	.prefixed(transition-duration, @slowDuration);

	&:before {
		content: "";
		position: absolute;
		z-index: -1;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: @activeColor;
		.prefixed(transform, scaleX(0));
		.prefixed(transform-origin, 0 50%);
		.prefixed(transition-property, transform);
		.prefixed(transition-duration, @slowDuration);
		.prefixed(transition-timing-function, ease-out);
	}

	&:hover,
	&:focus,
	&:active {
		color: white;

		&:before {
			.prefixed(transform, scaleX(1));
			.prefixed(transition-timing-function, cubic-bezier(.52,1.64,.37,.66));
		}
	}
}


code:
/* Bounce To Top */
.bounce-to-top() {
	.hacks();
	position: relative;
	.prefixed(transition-property, color);
	.prefixed(transition-duration, @slowDuration);

	&:before {
		content: "";
		position: absolute;
		z-index: -1;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: @activeColor;
		.prefixed(transform, scaleY(0));
		.prefixed(transform-origin, 50% 100%);
		.prefixed(transition-property, transform);
		.prefixed(transition-duration, @slowDuration);
		.prefixed(transition-timing-function, ease-out);
	}

	&:hover,
	&:focus,
	&:active {
		color: white;

		&:before {
			.prefixed(transform, scaleY(1));
			.prefixed(transition-timing-function, cubic-bezier(.52,1.64,.37,.66));
		}
	}
}


code:
/* Fade */
.fade() {
	.hacks();
	overflow: hidden;
	.prefixed(transition-duration, @mediumDuration);
	.prefixed(transition-property, ~"color, background-color");

	&:hover,
	&:focus,
	&:active {
		background-color: @activeColor;
		color: white;
	}
}


code:
/* Radial In */
.radial-in() {
	.hacks();
	position: relative;
	overflow: hidden;
	background: @activeColor;
	.prefixed(transition-property, color);
	.prefixed(transition-duration, @mediumDuration);

	&:before {
		content: "";
		position: absolute;
		z-index: -1;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: @primaryColor;
		border-radius: 100%;
		.prefixed(transform, scale(2));
		.prefixed(transition-property, transform);
		.prefixed(transition-duration, @mediumDuration);
		.prefixed(transition-timing-function, ease-out);
	}

	&:hover,
	&:focus,
	&:active {
		color: white;

		&:before {
			.prefixed(transform, scale(0));
		}
	}
}


code:
/* Radial Out */
.radial-out() {
	.hacks();
	position: relative;
	overflow: hidden;
	background: @primaryColor;
	.prefixed(transition-property, color);
	.prefixed(transition-duration, @mediumDuration);

	&:before {
		content: "";
		position: absolute;
		z-index: -1;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: @activeColor;
		border-radius: 100%;
		.prefixed(transform, scale(0));
		.prefixed(transition-property, transform);
		.prefixed(transition-duration, @mediumDuration);
		.prefixed(transition-timing-function, ease-out);
	}

	&:hover,
	&:focus,
	&:active {
		color: white;

		&:before {
			.prefixed(transform, scale(2));
		}
	}
}


code:
/* Rectangle In */
.rectangle-in() {
	.hacks();
	position: relative;
	background: @activeColor;
	.prefixed(transition-property, color);
	.prefixed(transition-duration, @mediumDuration);

	&:before {
		content: "";
		position: absolute;
		z-index: -1;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: @primaryColor;
		.prefixed(transform, scale(1));
		.prefixed(transition-property, transform);
		.prefixed(transition-duration, @mediumDuration);
		.prefixed(transition-timing-function, ease-out);
	}

	&:hover,
	&:focus,
	&:active {
		color: white;

		&:before {
			.prefixed(transform, scale(0));
		}
	}
}


code:
/* Rectangle Out */
.rectangle-out() {
	.hacks();
	position: relative;
	background: @primaryColor;
	.prefixed(transition-property, color);
	.prefixed(transition-duration, @mediumDuration);

	&:before {
		content: "";
		position: absolute;
		z-index: -1;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: @activeColor;
		.prefixed(transform, scale(0));
		.prefixed(transition-property, transform);
		.prefixed(transition-duration, @mediumDuration);
		.prefixed(transition-timing-function, ease-out);
	}

	&:hover,
	&:focus,
	&:active {
		color: white;

		&:before {
			.prefixed(transform, scale(1));
		}
	}
}


code:
/* Shutter In Horizontal */
.shutter-in-horizontal() {
	.hacks();
	position: relative;
	background: @activeColor;
	.prefixed(transition-property, color);
	.prefixed(transition-duration, @mediumDuration);

	&:before {
		content: "";
		position: absolute;
		z-index: -1;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		background: @primaryColor;
		.prefixed(transform, scaleX(1));
		.prefixed(transform-origin, 50%);
		.prefixed(transition-property, transform);
		.prefixed(transition-duration, @mediumDuration);
		.prefixed(transition-timing-function, ease-out);
	}

	&:hover,
	&:focus,
	&:active {
		color: white;

		&:before {
			.prefixed(transform, scaleX(0));
		}
	}
}


code:
/* Shutter In Vertical */
.shutter-in-vertical() {
	.hacks();
	position: relative;
	background: @activeColor;
	.prefixed(transition-property, color);
	.prefixed(transition-duration, @mediumDuration);

	&:before {
		content: "";
		position: absolute;
		z-index: -1;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		background: @primaryColor;
		.prefixed(transform, scaleY(1));
		.prefixed(transform-origin, 50%);
		.prefixed(transition-property, transform);
		.prefixed(transition-duration, @mediumDuration);
		.prefixed(transition-timing-function, ease-out);
	}

	&:hover,
	&:focus,
	&:active {
		color: white;

		&:before {
			.prefixed(transform, scaleY(0));
		}
	}
}


code:
/* Shutter Out Horizontal */
.shutter-out-horizontal() {
	.hacks();
	position: relative;
	background: @primaryColor;
	.prefixed(transition-property, color);
	.prefixed(transition-duration, @mediumDuration);

	&:before {
		content: "";
		position: absolute;
		z-index: -1;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		background: @activeColor;
		.prefixed(transform, scaleX(0));
		.prefixed(transform-origin, 50%);
		.prefixed(transition-property, transform);
		.prefixed(transition-duration, @mediumDuration);
		.prefixed(transition-timing-function, ease-out);
	}

	&:hover,
	&:focus,
	&:active {
		color: white;

		&:before {
			.prefixed(transform, scaleX(1));
		}
	}
}


code:
/* Shutter Out Vertical */
.shutter-out-vertical() {
	.hacks();
	position: relative;
	background: @primaryColor;
	.prefixed(transition-property, color);
	.prefixed(transition-duration, @mediumDuration);

	&:before {
		content: "";
		position: absolute;
		z-index: -1;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		background: @activeColor;
		.prefixed(transform, scaleY(0));
		.prefixed(transform-origin, 50%);
		.prefixed(transition-property, transform);
		.prefixed(transition-duration, @mediumDuration);
		.prefixed(transition-timing-function, ease-out);
	}

	&:hover,
	&:focus,
	&:active {
		color: white;

		&:before {
			.prefixed(transform, scaleY(1));
		}
	}
}


code:
/* Sweep To Bottom */
.sweep-to-bottom() {
	.hacks();
	position: relative;
	.prefixed(transition-property, color);
	.prefixed(transition-duration, @mediumDuration);

	&:before {
		content: "";
		position: absolute;
		z-index: -1;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: @activeColor;
		.prefixed(transform, scaleY(0));
		.prefixed(transform-origin, 50% 0);
		.prefixed(transition-property, transform);
		.prefixed(transition-duration, @mediumDuration);
		.prefixed(transition-timing-function, ease-out);
	}

	&:hover,
	&:focus,
	&:active {
		color: white;

		&:before {
			.prefixed(transform, scaleY(1));
		}
	}
}


code:
/* Sweep To Left */
.sweep-to-left() {
	.hacks();
	position: relative;
	.prefixed(transition-property, color);
	.prefixed(transition-duration, @mediumDuration);

	&:before {
		content: "";
		position: absolute;
		z-index: -1;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: @activeColor;
		.prefixed(transform, scaleX(0));
		.prefixed(transform-origin, 100% 50%);
		.prefixed(transition-property, transform);
		.prefixed(transition-duration, @mediumDuration);
		.prefixed(transition-timing-function, ease-out);
	}

	&:hover,
	&:focus,
	&:active {
		color: white;

		&:before {
			.prefixed(transform, scaleX(1));
		}
	}
}


code:
/* Sweep To Right */
.sweep-to-right() {
	.hacks();
	position: relative;
	.prefixed(transition-property, color);
	.prefixed(transition-duration, @mediumDuration);

	&:before {
		content: "";
		position: absolute;
		z-index: -1;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: @activeColor;
		.prefixed(transform, scaleX(0));
		.prefixed(transform-origin, 0 50%);
		.prefixed(transition-property, transform);
		.prefixed(transition-duration, @mediumDuration);
		.prefixed(transition-timing-function, ease-out);
	}

	&:hover,
	&:focus,
	&:active {
		color: white;

		&:before {
			.prefixed(transform, scaleX(1));
		}
	}
}


code:
/* Sweep To Top */
.sweep-to-top() {
	.hacks();
	position: relative;
	.prefixed(transition-property, color);
	.prefixed(transition-duration, @mediumDuration);

	&:before {
		content: "";
		position: absolute;
		z-index: -1;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: @activeColor;
		.prefixed(transform, scaleY(0));
		.prefixed(transform-origin, 50% 100%);
		.prefixed(transition-property, transform);
		.prefixed(transition-duration, @mediumDuration);
		.prefixed(transition-timing-function, ease-out);
	}

	&:hover,
	&:focus,
	&:active {
		color: white;

		&:before {
			.prefixed(transform, scaleY(1));
		}
	}
}


code:
/* Border Fade */
.border-fade() {
	@borderWidth: 4px;

	.hacks();
	.prefixed(transition-duration, @mediumDuration);
	.prefixed(transition-property, box-shadow);
	box-shadow:
			inset 0 0 0 @borderWidth @primaryColor,
			0 0 1px rgba(0, 0, 0, 0); /* Hack to improve aliasing on mobile/tablet devices */

	&:hover,
	&:focus,
	&:active {
		box-shadow:
			inset 0 0 0 @borderWidth @activeColor,
			0 0 1px rgba(0, 0, 0, 0); /* Hack to improve aliasing on mobile/tablet devices */
	}
}


code:
/* Hollow */
.hollow() {
	@borderWidth: 4px;

	.hacks();
	.prefixed(transition-duration, @mediumDuration);
	.prefixed(transition-property, background);
	box-shadow:
		inset 0 0 0 @borderWidth @primaryColor,
		0 0 1px rgba(0, 0, 0, 0); /* Hack to improve aliasing on mobile/tablet devices */

	&:hover,
	&:focus,
	&:active {
		background: none;
	}
}


code:
/* Outline In */
.outline-in() {
	@outerBorderWidth: 4px;
	@innerBorderWidth: 4px;

	.hacks();
	position: relative;

	&:before {
		pointer-events: none;
		content: '';
		position: absolute;
		border: @primaryColor solid @outerBorderWidth;
		top: -(@outerBorderWidth + @innerBorderWidth) * 2;
		right: -(@outerBorderWidth + @innerBorderWidth) * 2;
		bottom: -(@outerBorderWidth + @innerBorderWidth) * 2;
		left: -(@outerBorderWidth + @innerBorderWidth) * 2;
		opacity: 0;
		.prefixed(transition-duration, .3s);
		.prefixed(transition-property, "top, right, bottom, left");
	}

	&:hover:before,
	&:focus:before,
	&:active:before {
		top: -(@outerBorderWidth + @innerBorderWidth);
		right: -(@outerBorderWidth + @innerBorderWidth);
		bottom: -(@outerBorderWidth + @innerBorderWidth);
		left: -(@outerBorderWidth + @innerBorderWidth);
		opacity: 1;
	}
}


code:
/* Outline Out */
.outline-out() {
	@outerBorderWidth: 4px;
	@innerBorderWidth: 4px;

	.hacks();
	position: relative;

	&:before {
		content: '';
		position: absolute;
		border: @primaryColor solid @outerBorderWidth;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		.prefixed(transition-duration, .3s);
		.prefixed(transition-property, "top, right, bottom, left");
	}

	&:hover:before,
	&:focus:before,
	&:active:before {
		top: -(@outerBorderWidth + @innerBorderWidth);
		right: -(@outerBorderWidth + @innerBorderWidth);
		bottom: -(@outerBorderWidth + @innerBorderWidth);
		left: -(@outerBorderWidth + @innerBorderWidth);
	}
}


code:
/* Overline From Center */
.overline-from-center() {
	@duration: @mediumDuration;

	.hacks();
	position: relative;
	overflow: hidden;

	&:before {
		content: "";
		position: absolute;
		z-index: -1;
		left: 51%;
		right: 51%;
		top: 0;
		background: @activeColor;
		height: 4px;
		.prefixed(transition-property, "left, right");
		.prefixed(transition-duration, @duration);
		.prefixed(transition-timing-function, ease-out);
	}

	&:hover,
	&:focus,
	&:active {

		&:before {
			left: 0;
			right: 0;
		}
	}
}


code:
/* Overline From Left */
.overline-from-left() {
	@duration: @mediumDuration;

	.hacks();
	position: relative;
	overflow: hidden;

	&:before {
		content: "";
		position: absolute;
		z-index: -1;
		left: 0;
		right: 100%;
		top: 0;
		background: @activeColor;
		height: 4px;
		.prefixed(transition-property, "right");
		.prefixed(transition-duration, @duration);
		.prefixed(transition-timing-function, ease-out);
	}

	&:hover,
	&:focus,
	&:active {

		&:before {
			right: 0;
		}
	}
}


code:
/* Overline From Right */
.overline-from-right() {
	@duration: @mediumDuration;

	.hacks();
	position: relative;
	overflow: hidden;

	&:before {
		content: "";
		position: absolute;
		z-index: -1;
		left: 100%;
		right: 0;
		top: 0;
		background: @activeColor;
		height: 4px;
		.prefixed(transition-property, "left");
		.prefixed(transition-duration, @duration);
		.prefixed(transition-timing-function, ease-out);
	}

	&:hover,
	&:focus,
	&:active {

		&:before {
			left: 0;
		}
	}
}


code:
/* Overline Reveal */
.overline-reveal() {
	@duration: @mediumDuration;

	.hacks();
	position: relative;
	overflow: hidden;

	&:before {
		content: "";
		position: absolute;
		z-index: -1;
		left: 0;
		right: 0;
		top: 0;
		background: @activeColor;
		height: 4px;
		.prefixed(transform, translateY(-4px));
		.prefixed(transition-property, transform);
		.prefixed(transition-duration, @duration);
		.prefixed(transition-timing-function, ease-out);
	}

	&:hover,
	&:focus,
	&:active {

		&:before {
			.prefixed(transform, translateY(0));
		}
	}
}


code:
/* Reveal */
.reveal() {
	@duration: @fastDuration;

	.hacks();
	position: relative;
	overflow: hidden;

	&:before {
		content: "";
		position: absolute;
		z-index: -1;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		border-color: @activeColor;
		border-style: solid;
		border-width: 0;
		.prefixed(transition-property, border-width);
		.prefixed(transition-duration, @duration);
		.prefixed(transition-timing-function, ease-out);
	}

	&:hover,
	&:focus,
	&:active {

		&:before {
			.prefixed(transform, translateY(0));
			border-width: 4px;
		}
	}
}


code:
/* Ripple In */
.keyframes(~"@{nameSpace}-ripple-in", {
	100% {
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		opacity: 1;
	}
});

.ripple-in() {
	@outerBorderWidth: 4px;
	@innerBorderWidth: 4px;

	.hacks();
	position: relative;

	&:before {
		content: '';
		position: absolute;
		border: @primaryColor solid @outerBorderWidth;
		top: -(6px + 6px);
		right: -(6px + 6px);
		bottom: -(6px + 6px);
		left: -(6px + 6px);
		opacity: 0;
		.prefixed(animation-duration, 1s);
	}

	&:hover:before,
	&:focus:before,
	&:active:before {
		.prefixed(animation-name, ~"@{nameSpace}-ripple-in");
	}
}


code:
/* Ripple Out */
.keyframes(~"@{nameSpace}-ripple-out", {
	100% {
		top: -(6px + 6px);
		right: -(6px + 6px);
		bottom: -(6px + 6px);
		left: -(6px + 6px);
		opacity: 0;
	}
});

.ripple-out() {
	@outerBorderWidth: 6px;
	@innerBorderWidth: 6px;

	.hacks();
	position: relative;

	&:before {
		content: '';
		position: absolute;
		border: @primaryColor solid @outerBorderWidth;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		.prefixed(animation-duration, 1s);
	}

	&:hover:before,
	&:focus:before,
	&:active:before {
		.prefixed(animation-name, ~"@{nameSpace}-ripple-out");
	}
}


code:
/* Round Corners */
.round-corners() {
	.hacks();
	.prefixed(transition-duration, @mediumDuration);
	.prefixed(transition-property, border-radius);

	&:hover,
	&:focus,
	&:active {
		border-radius: 1em;
	}
}


code:
/* Trim */
.trim() {
	@outerBorderWidth: 4px;
	@innerBorderWidth: 4px;

	.hacks();
	position: relative;

	&:before {
		content: '';
		position: absolute;
		border: white solid @innerBorderWidth;
		top: @outerBorderWidth;
		left: @outerBorderWidth;
		right: @outerBorderWidth;
		bottom: @outerBorderWidth;
		opacity: 0;
		.prefixed(transition-duration, @mediumDuration);
		.prefixed(transition-property, opacity);
	}

	&:hover:before,
	&:focus:before,
	&:active:before {
		opacity: 1;
	}
}


code:
/* Underline From Center */
.underline-from-center() {
	@duration: @mediumDuration;

	.hacks();
	position: relative;
	overflow: hidden;

	&:before {
		content: "";
		position: absolute;
		z-index: -1;
		left: 51%;
		right: 51%;
		bottom: 0;
		background: @activeColor;
		height: 4px;
		.prefixed(transition-property, "left, right");
		.prefixed(transition-duration, @duration);
		.prefixed(transition-timing-function, ease-out);
	}

	&:hover,
	&:focus,
	&:active {

		&:before {
			left: 0;
			right: 0;
		}
	}
}


code:
/* Underline From Left */
.underline-from-left() {
	@duration: @mediumDuration;

	.hacks();
	position: relative;
	overflow: hidden;

	&:before {
		content: "";
		position: absolute;
		z-index: -1;
		left: 0;
		right: 100%;
		bottom: 0;
		background: @activeColor;
		height: 4px;
		.prefixed(transition-property, "right");
		.prefixed(transition-duration, @duration);
		.prefixed(transition-timing-function, ease-out);
	}

	&:hover,
	&:focus,
	&:active {

		&:before {
			right: 0;
		}
	}
}


code:
/* Underline From Right */
.underline-from-right() {
	@duration: @mediumDuration;

	.hacks();
	position: relative;
	overflow: hidden;

	&:before {
		content: "";
		position: absolute;
		z-index: -1;
		left: 100%;
		right: 0;
		bottom: 0;
		background: @activeColor;
		height: 4px;
		.prefixed(transition-property, "left");
		.prefixed(transition-duration, @duration);
		.prefixed(transition-timing-function, ease-out);
	}

	&:hover,
	&:focus,
	&:active {

		&:before {
			left: 0;
		}
	}
}


code:
/* Underline Reveal */
.underline-reveal() {
	@duration: @mediumDuration;

	.hacks();
	position: relative;
	overflow: hidden;

	&:before {
		content: "";
		position: absolute;
		z-index: -1;
		left: 0;
		right: 0;
		bottom: 0;
		background: @activeColor;
		height: 4px;
		.prefixed(transform, translateY(4px));
		.prefixed(transition-property, transform);
		.prefixed(transition-duration, @duration);
		.prefixed(transition-timing-function, ease-out);
	}

	&:hover,
	&:focus,
	&:active {

		&:before {
			.prefixed(transform, translateY(0));
		}
	}
}


code:
/* Curl Bottom Left */
.curl-bottom-left() {
	.hacks();
	position: relative;

	&:before {
		pointer-events: none;
		position: absolute;
		content: '';
		height: 0;
		width: 0;
		bottom: 0;
		left: 0;
		background: @revealAreaColor; /* IE9 */
		background: linear-gradient(
			45deg,
			@revealAreaColor 45%,
			@curlLineColor 50%,
			@curlTransitionColor 56%,
			@curlLastColor 80%
		);
		box-shadow: 1px -1px 1px rgba(0, 0, 0, .4);
		.prefixed(transition-duration, @mediumDuration);
		.prefixed(transition-property, ~"width, height");
	}

	&:hover:before,
	&:focus:before,
	&:active:before {
		width: @curlWidth;
		height: @curlHeight;
	}
}


code:
/* Curl Bottom Right */
.curl-bottom-right() {
	.hacks();
	position: relative;

	&:before {
		pointer-events: none;
		position: absolute;
		content: '';
		height: 0;
		width: 0;
		bottom: 0;
		right: 0;
		background: @revealAreaColor; /* IE9 */
		background: linear-gradient(
			315deg,
			@revealAreaColor 45%,
			@curlLineColor 50%,
			@curlTransitionColor 56%,
			@curlLastColor 80%
		);
		box-shadow: -1px -1px 1px rgba(0, 0, 0, .4);
		.prefixed(transition-duration, @mediumDuration);
		.prefixed(transition-property, ~"width, height");
	}

	&:hover:before,
	&:focus:before,
	&:active:before {
		width: @curlWidth;
		height: @curlHeight;
	}
}


code:
/* Curl Top Left */
.curl-top-left() {
	.hacks();
	position: relative;

	&:before {
		pointer-events: none;
		position: absolute;
		content: '';
		height: 0;
		width: 0;
		top: 0;
		left: 0;
		background: @revealAreaColor; /* IE9 */
		background: linear-gradient(
			135deg,
			@revealAreaColor 45%,
			@curlLineColor 50%,
			@curlTransitionColor 56%,
			@curlLastColor 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, .4);
		.prefixed(transition-duration, @mediumDuration);
		.prefixed(transition-property, ~"width, height");
	}

	&:hover:before,
	&:focus:before,
	&:active:before {
		width: @curlWidth;
		height: @curlHeight;
	}
}


code:
/* Curl Top Right */
.curl-top-right() {
	.hacks();
	position: relative;

	&:before {
		pointer-events: none;
		position: absolute;
		content: '';
		height: 0;
		width: 0;
		top: 0;
		right: 0;
		background: @revealAreaColor; /* IE9 */
		background: linear-gradient(
			225deg,
			@revealAreaColor 45%,
			@curlLineColor 50%,
			@curlTransitionColor 56%,
			@curlLastColor 80%
		);
		box-shadow: -1px 1px 1px rgba(0, 0, 0, .4);
		.prefixed(transition-duration, @mediumDuration);
		.prefixed(transition-property, ~"width, height");
	}

	&:hover:before,
	&:focus:before,
	&:active:before {
		width: @curlWidth;
		height: @curlHeight;
	}
}


code:
/* Icon Back */
.icon-back() {
	.hacks();
	.prefixed(transition-duration, @fastDuration);

	.hvr-icon {
		.prefixed(transform, translateZ(0));
		.prefixed(transition-duration, @fastDuration);
		.prefixed(transition-property, transform);
		.prefixed(transition-timing-function, ease-out);
	}

	&:hover,
	&:focus,
	&:active {

		.hvr-icon {
			.prefixed(transform, translateX(-4px));
		}
	}
}


code:
/* Icon Bob */
.keyframes(~"@{nameSpace}-icon-bob", {
	0% {
		.prefixed(transform, translateY(-6px));
	}
	50% {
		.prefixed(transform, translateY(-2px));
	}
	100% {
		.prefixed(transform, translateY(-6px));
	}
});

.keyframes(~"@{nameSpace}-icon-bob-float", {
	100% {
		.prefixed(transform, translateY(-6px));
	}
});

.icon-bob() {
	.hacks();
	.prefixed(transition-duration, @mediumDuration);

	.hvr-icon {
		.prefixed(transform, translateZ(0));
	}

	&:hover,
	&:focus,
	&:active {

		.hvr-icon {
			.prefixed(animation-name, ~"@{nameSpace}-icon-bob-float, @{nameSpace}-icon-bob");
			.prefixed(animation-duration, ~".3s, 1.5s");
			.prefixed(animation-delay, ~"0s, .3s");
			.prefixed(animation-timing-function, ~"ease-out, ease-in-out");
			.prefixed(animation-iteration-count, ~"1, infinite");
			.prefixed(animation-fill-mode, ~"forwards");
			.prefixed(animation-direction, ~"normal, alternate");
		}
	}
}


code:
/* Icon Bounce Out */
.keyframes(~"@{nameSpace}-icon-bounce-out", {
	50% {
		.prefixed(transform, scale(1.5));
	}
});

.icon-bounce-out() {
	.hacks();
	.prefixed(transition-duration, @mediumDuration);

	.hvr-icon {
		.prefixed(transform, translateZ(0));
		.prefixed(transition-duration, @mediumDuration);
		.prefixed(transition-property, transform);
		.prefixed(transition-timing-function, ease-out);
	}

	&:hover,
	&:focus,
	&:active {

		.hvr-icon {
			.prefixed(transform, scale(.9));
			.prefixed(transition-timing-function, cubic-bezier(.47,2.02,.31,-0.36));
		}
	}
}


code:
/* Icon Bounce */

.icon-bounce() {
	.hacks();
	.prefixed(transition-duration, @mediumDuration);

	.hvr-icon {
		.prefixed(transform, translateZ(0));
		.prefixed(transition-duration, @mediumDuration);
		.prefixed(transition-property, transform);
		.prefixed(transition-timing-function, ease-out);
	}

	&:hover,
	&:focus,
	&:active {

		.hvr-icon {
			.prefixed(transform, scale(1.5));
			.prefixed(transition-timing-function, cubic-bezier(.47,2.02,.31,-0.36));
		}
	}
}


code:
/* Icon Buzz Out */
.keyframes(~"@{nameSpace}-icon-buzz-out", {
	10% {
		.prefixed(transform, translateX(3px) rotate(2deg));
	}

	20% {
		.prefixed(transform, translateX(-3px) rotate(-2deg));
	}

	30% {
		.prefixed(transform, translateX(3px) rotate(2deg));
	}

	40% {
		.prefixed(transform, translateX(-3px) rotate(-2deg));
	}

	50% {
		.prefixed(transform, translateX(2px) rotate(1deg));
	}

	60% {
		.prefixed(transform, translateX(-2px) rotate(-1deg));
	}

	70% {
		.prefixed(transform, translateX(2px) rotate(1deg));
	}

	80% {
		.prefixed(transform, translateX(-2px) rotate(-1deg));
	}

	90% {
		.prefixed(transform, translateX(1px) rotate(0));
	}

	100% {
		.prefixed(transform, translateX(-1px) rotate(0));
	}
});

.icon-buzz-out() {
	.hacks();
	.prefixed(transition-duration, @mediumDuration);

	.hvr-icon {
		.prefixed(transform, translateZ(0));
	}

	&:hover,
	&:focus,
	&:active {

		.hvr-icon {
			.prefixed(animation-name, ~"@{nameSpace}-icon-buzz-out");
			.prefixed(animation-duration, .75s);
			.prefixed(animation-timing-function, linear);
			.prefixed(animation-iteration-count, 1);
		}
	}
}


code:
/* Icon Buzz */
.keyframes(~"@{nameSpace}-icon-buzz", {
	50% {
		.prefixed(transform, translateX(3px) rotate(2deg));
	}

	100% {
		.prefixed(transform, translateX(-3px) rotate(-2deg));
	}
});

.icon-buzz() {
	.hacks();
	.prefixed(transition-duration, @mediumDuration);

	.hvr-icon {
		.prefixed(transform, translateZ(0));
	}

	&:hover,
	&:focus,
	&:active {

		.hvr-icon {
			.prefixed(animation-name, ~"@{nameSpace}-icon-buzz");
			.prefixed(animation-duration, .15s);
			.prefixed(animation-timing-function, linear);
			.prefixed(animation-iteration-count, infinite);
		}
	}
}


code:
/* Icon Down */
.keyframes(~"@{nameSpace}-icon-down", {
	0%,
	50%,
	100% {
		.prefixed(transform, translateY(0));
	}
	25%,
	75% {
		.prefixed(transform, translateY(6px));
	}
});

/* Icon Down */
.icon-down() {
	.hacks();

	.hvr-icon {
		.prefixed(transform, translateZ(0));
	}

	&:hover,
	&:focus,
	&:active {

		.hvr-icon {
			.prefixed(animation-name, ~"@{nameSpace}-icon-down");
			.prefixed(animation-duration, .75s);
			.prefixed(animation-timing-function, ease-out);
		}
	}
}


code:
/* Icon Drop */
.keyframes(~"@{nameSpace}-icon-drop", {
	0% {
		opacity: 0;

	}

	50% {
		opacity: 0;
		.prefixed(transform, translateY(-100%));
	}

	51%,
	100% {
		opacity: 1;
	}
});

/* Icon Drop */
.icon-drop() {
	.hacks();

	.hvr-icon {
		.prefixed(transform, translateZ(0));
	}

	&:hover,
	&:focus,
	&:active {

		.hvr-icon {
			opacity: 0;
			.prefixed(transition-duration, @mediumDuration);
			.prefixed(animation-name, ~"@{nameSpace}-icon-drop");
			.prefixed(animation-duration, @slowDuration);
			.prefixed(animation-delay, @mediumDuration);
			.prefixed(animation-fill-mode, forwards);
			.prefixed(animation-timing-function, ease-in-out);
			.prefixed(animation-timing-function, cubic-bezier(.52,1.64,.37,.66));
		}
	}
}


code:
/* Icon Fade */
.icon-fade() {
	.hacks();

	.hvr-icon {
		.prefixed(transform, translateZ(0));
		.prefixed(transition-duration, .5s);
		.prefixed(transition-property, color);
	}

	&:hover,
	&:focus,
	&:active {

		.hvr-icon {
			color: #0F9E5E;
		}
	}
}


code:
/* Icon Float Away */
.keyframes(~"@{nameSpace}-icon-float-away", {
	0% {
		opacity: 1;
	}

	100% {
		opacity: 0;
		.prefixed(transform, translateY(-1em));
	}
});

/* Icon Float Away */
.icon-float-away() {
	.hacks();

	.hvr-icon {
		.prefixed(transform, translateZ(0));
		.prefixed(animation-duration, @slowDuration);
		.prefixed(animation-fill-mode, forwards);
	}

	&:hover,
	&:focus,
	&:active {

		.hvr-icon {
			.prefixed(animation-name, ~"@{nameSpace}-icon-float-away");
			.prefixed(animation-timing-function, ease-out);
		}
	}
}


code:
/* Icon Float */
.icon-float() {
	.hacks();
	.prefixed(transition-duration, @mediumDuration);

	.hvr-icon {
		.prefixed(transform, translateZ(0));
		.prefixed(transition-duration, @mediumDuration);
		.prefixed(transition-property, transform);
		.prefixed(transition-timing-function, ease-out);
	}

	&:hover,
	&:focus,
	&:active {

		.hvr-icon {
			.prefixed(transform, translateY(-4px));
		}
	}
}


code:
/* Icon Forward */
.icon-forward() {
	.hacks();
	.prefixed(transition-duration, @fastDuration);

	.hvr-icon {
		.prefixed(transform, translateZ(0));
		.prefixed(transition-duration, @fastDuration);
		.prefixed(transition-property, transform);
		.prefixed(transition-timing-function, ease-out);
	}

	&:hover,
	&:focus,
	&:active {

		.hvr-icon {
			.prefixed(transform, translateX(4px));
		}
	}
}


code:
/* Icon Grow Rotate */
.icon-grow-rotate() {
	@duration: @mediumDuration;

	.hacks();
	.prefixed(transition-duration, @duration);

	.hvr-icon {
		.prefixed(transform, translateZ(0));
		.prefixed(transition-duration, @duration);
		.prefixed(transition-property, transform);
		.prefixed(transition-timing-function, ease-out);
	}

	&:hover,
	&:focus,
	&:active {

		.hvr-icon {
			.prefixed(transform, scale(1.5) rotate(12deg));
		}
	}
}


code:
/* Icon Grow */
.icon-grow() {
	.hacks();
	.prefixed(transition-duration, @mediumDuration);

	.hvr-icon {
		.prefixed(transform, translateZ(0));
		.prefixed(transition-duration, @mediumDuration);
		.prefixed(transition-property, transform);
		.prefixed(transition-timing-function, ease-out);
	}

	&:hover,
	&:focus,
	&:active {

		.hvr-icon {
			.prefixed(transform, scale(1.3) translateZ(0));
		}
	}
}


code:
/* Icon Hang */
.keyframes(~"@{nameSpace}-icon-hang", {
	0% {
		.prefixed(transform, translateY(6px));
	}
	50% {
		.prefixed(transform, translateY(2px));
	}
	100% {
		.prefixed(transform, translateY(6px));
	}
});

.keyframes(~"@{nameSpace}-icon-hang-sink", {
	100% {
		.prefixed(transform, translateY(6px));
	}
});

.icon-hang() {
	.hacks();
	.prefixed(transition-duration, @mediumDuration);

	.hvr-icon {
		.prefixed(transform, translateZ(0));
	}

	&:hover,
	&:focus,
	&:active {

		.hvr-icon {
			.prefixed(animation-name, ~"@{nameSpace}-icon-hang-sink, @{nameSpace}-icon-hang");
			.prefixed(animation-duration, ~".3s, 1.5s");
			.prefixed(animation-delay, ~"0s, .3s");
			.prefixed(animation-timing-function, ~"ease-out, ease-in-out");
			.prefixed(animation-iteration-count, ~"1, infinite");
			.prefixed(animation-fill-mode, ~"forwards");
			.prefixed(animation-direction, ~"normal, alternate");
		}
	}
}


code:
/* Icon Pop */
.keyframes(~"@{nameSpace}-icon-pop", {
	50% {
		.prefixed(transform, scale(1.5));
	}
});

.icon-pop() {
	.hacks();
	.prefixed(transition-duration, @mediumDuration);

	.hvr-icon {
		.prefixed(transform, translateZ(0));
		.prefixed(transition-duration, @mediumDuration);
		.prefixed(transition-property, transform);
		.prefixed(transition-timing-function, ease-out);
	}

	&:hover,
	&:focus,
	&:active {

		.hvr-icon {
			.prefixed(animation-name, ~"@{nameSpace}-icon-pop");
			.prefixed(animation-duration, @mediumDuration);
			.prefixed(animation-timing-function, linear);
			.prefixed(animation-iteration-count, 1);
		}
	}
}


code:
/* Icon Pulse Grow */
.keyframes(~"@{nameSpace}-icon-pulse-grow", {
	to {
		.prefixed(transform, scale(1.3));
	}
});

.icon-pulse-grow() {
	.hacks();

	.hvr-icon {
		.prefixed(transform, translateZ(0));
		.prefixed(transition-timing-function, ease-out);
	}

	&:hover,
	&:focus,
	&:active {

		.hvr-icon {
			.prefixed(animation-name, ~"@{nameSpace}-icon-pulse-grow");
			.prefixed(animation-duration, @mediumDuration);
			.prefixed(animation-timing-function, linear);
			.prefixed(animation-iteration-count, infinite);
			.prefixed(animation-direction, alternate);
		}
	}
}


code:
/* Icon Pulse Shrink */
.keyframes(~"@{nameSpace}-icon-pulse-shrink", {
	to {
		.prefixed(transform, scale(.8));
	}
});

.icon-pulse-shrink() {
	.hacks();

	.hvr-icon {
		.prefixed(transform, translateZ(0));
		.prefixed(transition-timing-function, ease-out);
	}

	&:hover,
	&:focus,
	&:active {

		.hvr-icon {
			.prefixed(animation-name, ~"@{nameSpace}-icon-pulse-shrink");
			.prefixed(animation-duration, @mediumDuration);
			.prefixed(animation-timing-function, linear);
			.prefixed(animation-iteration-count, infinite);
			.prefixed(animation-direction, alternate);
		}
	}
}


code:
/* Icon Pulse */
.keyframes(~"@{nameSpace}-icon-pulse", {
	25% {
		.prefixed(transform, scale(1.3));
	}

	75% {
		.prefixed(transform, scale(.8));
	}
});

.icon-pulse() {
	.hacks();

	.hvr-icon {
		.prefixed(transform, translateZ(0));
		.prefixed(transition-timing-function, ease-out);
	}

	&:hover,
	&:focus,
	&:active {

		.hvr-icon {
			.prefixed(animation-name, ~"@{nameSpace}-icon-pulse");
			.prefixed(animation-duration, 1s);
			.prefixed(animation-timing-function, linear);
			.prefixed(animation-iteration-count, infinite);
		}
	}
}


code:
/* Icon Push */
.keyframes(~"@{nameSpace}-icon-push", {
	50% {
		.prefixed(transform, scale(.5));
	}
});

.icon-push() {
	.hacks();
	.prefixed(transition-duration, @mediumDuration);

	.hvr-icon {
		.prefixed(transform, translateZ(0));
		.prefixed(transition-duration, @mediumDuration);
		.prefixed(transition-property, transform);
		.prefixed(transition-timing-function, ease-out);
	}

	&:hover,
	&:focus,
	&:active {

		.hvr-icon {
			.prefixed(animation-name, ~"@{nameSpace}-icon-push");
			.prefixed(animation-duration, @mediumDuration);
			.prefixed(animation-timing-function, linear);
			.prefixed(animation-iteration-count, 1);
		}
	}
}


code:
/* Icon Rotate */
.icon-rotate() {
	@duration: @mediumDuration;

	.hacks();
	.prefixed(transition-duration, @duration);

	.hvr-icon {
		.prefixed(transform, translateZ(0));
		.prefixed(transition-duration, @duration);
		.prefixed(transition-property, transform);
		.prefixed(transition-timing-function, ease-out);
	}

	&:hover,
	&:focus,
	&:active {

		.hvr-icon {
			.prefixed(transform, rotate(20deg));
		}
	}
}


code:
/* Icon Shrink */
.icon-shrink() {
	.hacks();
	.prefixed(transition-duration, @mediumDuration);

	.hvr-icon {
		.prefixed(transform, translateZ(0));
		.prefixed(transition-duration, @mediumDuration);
		.prefixed(transition-property, transform);
		.prefixed(transition-timing-function, ease-out);
	}

	&:hover,
	&:focus,
	&:active {

		.hvr-icon {
			.prefixed(transform, scale(.8));
		}
	}
}


code:
/* Icon Sink Away */
.keyframes(~"@{nameSpace}-icon-sink-away", {
	0% {
		opacity: 1;
	}

	100% {
		opacity: 0;
		.prefixed(transform, translateY(1em));
	}
});

/* Icon Sink Away */
.icon-sink-away() {
	.hacks();

	.hvr-icon {
		.prefixed(transform, translateZ(0));
		.prefixed(animation-duration, @slowDuration);
		.prefixed(animation-fill-mode, forwards);
	}

	&:hover,
	&:focus,
	&:active {

		.hvr-icon {
			.prefixed(animation-name, ~"@{nameSpace}-icon-sink-away");
			.prefixed(animation-timing-function, ease-out);
		}
	}
}


code:
/* Icon Sink */
.icon-sink() {
	.hacks();
	.prefixed(transition-duration, @mediumDuration);

	.hvr-icon {
		.prefixed(transform, translateZ(0));
		.prefixed(transition-duration, @mediumDuration);
		.prefixed(transition-property, transform);
		.prefixed(transition-timing-function, ease-out);
	}

	&:hover,
	&:focus,
	&:active {

		.hvr-icon {
			.prefixed(transform, translateY(4px));
		}
	}
}


code:
/* Icon Spin */
.icon-spin() {
	.hacks();

	.hvr-icon {
		.prefixed(transition-duration, 1s);
		.prefixed(transition-property, transform);
		.prefixed(transition-timing-function, ease-in-out);
	}

	&:hover,
	&:focus,
	&:active {

		.hvr-icon {
			.prefixed(transform, rotate(360deg));
		}
	}
}


code:
/* Icon Up */
.keyframes(~"@{nameSpace}-icon-up", {
	0%,
	50%,
	100% {
		.prefixed(transform, translateY(0));
	}
	25%,
	75% {
		.prefixed(transform, translateY(-6px));
	}
});

/* Icon Up */
.icon-up() {
	.hacks();

	.hvr-icon {
		.prefixed(transform, translateZ(0));
	}

	&:hover,
	&:focus,
	&:active {

		.hvr-icon {
			.prefixed(animation-name, ~"@{nameSpace}-icon-up");
			.prefixed(animation-duration, .75s);
			.prefixed(animation-timing-function, ease-out);
		}
	}
}


code:
/* Icon Wobble Horizontal */
.keyframes(~"@{nameSpace}-icon-wobble-horizontal", {
	16.65% {
		.prefixed(transform, translateX(6px));
	}

	33.3% {
		.prefixed(transform, translateX(-5px));
	}

	49.95% {
		.prefixed(transform, translateX(4px));
	}

	66.6% {
		.prefixed(transform, translateX(-2px));
	}

	83.25% {
		.prefixed(transform, translateX(1px));
	}

	100% {
		.prefixed(transform, translateX(0));
	}
});

.icon-wobble-horizontal() {
	.hacks();
	.prefixed(transition-duration, @mediumDuration);

	.hvr-icon {
		.prefixed(transform, translateZ(0));
	}

	&:hover,
	&:focus,
	&:active {

		.hvr-icon {
			.prefixed(animation-name, ~"@{nameSpace}-icon-wobble-horizontal");
			.prefixed(animation-duration, 1s);
			.prefixed(animation-timing-function, ease-in-out);
			.prefixed(animation-iteration-count, 1);
		}
	}
}


code:
/* Icon Wobble Vertical */
.keyframes(~"@{nameSpace}-icon-wobble-vertical", {
	16.65% {
		.prefixed(transform, translateY(6px));
	}

	33.3% {
		.prefixed(transform, translateY(-5px));
	}

	49.95% {
		.prefixed(transform, translateY(4px));
	}

	66.6% {
		.prefixed(transform, translateY(-2px));
	}

	83.25% {
		.prefixed(transform, translateY(1px));
	}

	100% {
		.prefixed(transform, translateY(0));
	}
});

.icon-wobble-vertical() {
	.hacks();
	.prefixed(transition-duration, @mediumDuration);

	.hvr-icon {
		.prefixed(transform, translateZ(0));
	}

	&:hover,
	&:focus,
	&:active {

		.hvr-icon {
			.prefixed(animation-name, ~"@{nameSpace}-icon-wobble-vertical");
			.prefixed(animation-duration, 1s);
			.prefixed(animation-timing-function, ease-in-out);
			.prefixed(animation-iteration-count, 1);
		}
	}
}


code:
/* Box Shadow Inset */
.box-shadow-inset() {
	.hacks();
	.prefixed(transition-duration, @mediumDuration);
	.prefixed(transition-property, box-shadow);

	box-shadow: inset 0 0 0 @shadowColor,
		0 0 1px rgba(0, 0, 0, 0); /* Hack to improve aliasing on mobile/tablet devices */

	&:hover,
	&:focus,
	&:active {
		box-shadow: inset 2px 2px 2px @shadowColor,
		0 0 1px rgba(0, 0, 0, 0); /* Hack to improve aliasing on mobile/tablet devices */
	}
}


code:
/* Box Shadow Outset */
.box-shadow-outset() {
	.hacks();
	.prefixed(transition-duration, @mediumDuration);
	.prefixed(transition-property, box-shadow);

	&:hover,
	&:focus,
	&:active {
		box-shadow: 2px 2px 2px @shadowColor;
	}
}


code:
/* Float Shadow */
.float-shadow() {
	.hacks();
	position: relative;
	.prefixed(transition-duration, @mediumDuration);
	.prefixed(transition-property, transform);

	&: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,.35) 0%, rgba(0, 0, 0, 0) 80%);
	  background: radial-gradient(ellipse at center, rgba(0,0,0,.35) 0%,rgba(0,0,0,0) 80%); /* W3C */
		.prefixed(transition-duration, @mediumDuration);
		.prefixed(transition-property, "transform, opacity");
	}

	&:hover,
	&:focus,
	&:active {
		.prefixed(transform, translateY(-5px)); /* move the element up by 5px */

		&:before {
			opacity: 1;
			.prefixed(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) */
		}
	}
}


code:
/* Glow */
.glow() {
	.hacks();
	.prefixed(transition-duration, @mediumDuration);
	.prefixed(transition-property, box-shadow);

	&:hover,
	&:focus,
	&:active {
		box-shadow: 0 0 8px @shadowColor;
	}
}


code:
/* Grow Shadow */
.grow-shadow() {
	.hacks();
	.prefixed(transition-duration, @mediumDuration);
	.prefixed(transition-property, "box-shadow, transform");

	&:hover,
	&:focus,
	&:active {
		box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.5);
		.prefixed(transform, scale(1.1));
	}
}


code:
/* Shadow Radial */
.shadow-radial() {
	.hacks();
	position: relative;

	&:before,
	&:after {
	  pointer-events: none;
      position: absolute;
	  content: '';
      left: 0;
      width: 100%;
      box-sizing: border-box;
      background-repeat: no-repeat;
      height: 5px;
      opacity: 0;
	  .prefixed(transition-duration, @mediumDuration);
	  .prefixed(transition-property, opacity);
	}

	&:before {
	  bottom: 100%;
	  background: -webkit-radial-gradient(50% 150%, ellipse, @shadowColor 0%, rgba(0, 0, 0, 0) 80%);
      background: radial-gradient(ellipse at 50% 150%, @shadowColor 0%, rgba(0, 0, 0, 0) 80%);
	}

	&:after {
	  top: 100%;
	  background: -webkit-radial-gradient(50% -50%, ellipse, @shadowColor 0%, rgba(0, 0, 0, 0) 80%);
	  background: radial-gradient(ellipse at 50% -50%, @shadowColor 0%, rgba(0, 0, 0, 0) 80%);
	}

	&:hover:before,
	&:focus:before,
	&:active:before,
	&:hover:after,
	&:focus:after,
	&:active:after {
	  opacity: 1;
	}
}


code:
/* Shadow */
.shadow() {
	.hacks();
	.prefixed(transition-duration, @mediumDuration);
	.prefixed(transition-property, box-shadow);

	&:hover,
	&:focus,
	&:active {
		box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.5);
	}
}


code:
/* Bubble Bottom */
.bubble-bottom() {
	.hacks();
	position: relative;

	&:before {
		pointer-events: none;
		position: absolute;
		z-index: -1;
		content: '';
		border-style: solid;
		.prefixed(transition-duration, @mediumDuration);
		.prefixed(transition-property, transform);
		left: calc(~"50%" - @tipWidth);
		bottom: 0;
		border-width: @tipHeight @tipWidth 0 @tipWidth;
		border-color: @tipColor transparent transparent transparent;
	}

	&:hover:before,
	&:focus:before,
	&:active:before {
		.prefixed(transform, translateY(@tipHeight));
	}
}


code:
/* Bubble Float Bottom */
.bubble-float-bottom() {
	.hacks();
	position: relative;
	.prefixed(transition-duration, @mediumDuration);
	.prefixed(transition-property, transform);

	&:before {
		position: absolute;
		z-index: -1;
		content: '';
		left: calc(~"50%" - @tipWidth);
		bottom: 0;
		border-style: solid;
		border-width: @tipHeight @tipWidth 0 @tipWidth;
		border-color: @tipColor transparent transparent transparent;
		.prefixed(transition-duration, @mediumDuration);
		.prefixed(transition-property, transform);
	}

	&:hover,
	&:focus,
	&:active {
		.prefixed(transform, translateY(-(@tipHeight)));

		&:before {
			.prefixed(transform, translateY(@tipHeight));
		}
	}
}


code:
/* Bubble Float Left */
.bubble-float-left() {
	.hacks();
	position: relative;
	.prefixed(transition-duration, @mediumDuration);
	.prefixed(transition-property, transform);

	&:before {
		position: absolute;
		z-index: -1;
		content: '';
		top: calc(~"50%" - @tipHeight);
		left: 0;
		border-style: solid;
		border-width: @tipHeight @tipWidth @tipHeight 0;
		border-color: transparent @tipColor transparent transparent;
		.prefixed(transition-duration, @mediumDuration);
		.prefixed(transition-property, transform);
	}

	&:hover,
	&:focus,
	&:active {
		.prefixed(transform, translateX(@tipWidth));

		&:before {
			.prefixed(transform, translateX(-(@tipWidth)));
		}
	}
}


code:
/* Bubble Float Right */
.bubble-float-right() {
	.hacks();
	position: relative;
	.prefixed(transition-duration, @mediumDuration);
	.prefixed(transition-property, transform);

	&:before {
		position: absolute;
		z-index: -1;
		top: calc(~"50%" - @tipHeight);
		right: 0;
		content: '';
		border-style: solid;
		border-width: @tipHeight 0 @tipHeight @tipWidth;
		border-color: transparent transparent transparent @tipColor;
		.prefixed(transition-duration, @mediumDuration);
		.prefixed(transition-property, transform);
	}

	&:hover,
	&:focus,
	&:active {
		.prefixed(transform, translateX(-(@tipWidth)));

		&:before {
			.prefixed(transform, translateX(@tipWidth));
		}
	}
}


code:
/* Bubble Float Top */
.bubble-float-top() {
	.hacks();
	position: relative;
	.prefixed(transition-duration, @mediumDuration);
	.prefixed(transition-property, transform);

	&:before {
		position: absolute;
		z-index: -1;
		content: '';
		left: calc(~"50%" - @tipWidth);
		top: 0;
		border-style: solid;
		border-width: 0 @tipWidth @tipHeight @tipWidth;
		border-color: transparent transparent @tipColor transparent;
		.prefixed(transition-duration, @mediumDuration);
		.prefixed(transition-property, transform);
	}

	&:hover,
	&:focus,
	&:active {
		.prefixed(transform, translateY(@tipHeight));

		&:before {
			.prefixed(transform, translateY(-(@tipHeight)));
		}
	}
}


code:
/* Bubble Left */
.bubble-left() {
	.hacks();
	position: relative;

	&:before {
		pointer-events: none;
		position: absolute;
		z-index: -1;
		content: '';
		border-style: solid;
		.prefixed(transition-duration, @mediumDuration);
		.prefixed(transition-property, transform);
		top: calc(~"50%" - @tipHeight);
		left: 0;
		border-width: @tipHeight @tipWidth @tipHeight 0;
		border-color: transparent @tipColor transparent transparent;
	}

	&:hover:before,
	&:focus:before,
	&:active:before {
		.prefixed(transform, translateX(-(@tipWidth)));
	}
}


code:
/* Bubble Right */
.bubble-right() {
	.hacks();
	position: relative;

	&:before {
		pointer-events: none;
		position: absolute;
		z-index: -1;
		content: '';
		border-style: solid;
		.prefixed(transition-duration, @mediumDuration);
		.prefixed(transition-property, transform);
		top: calc(~"50%" - @tipHeight);
		right: 0;
		border-width: @tipHeight 0 @tipHeight @tipWidth;
		border-color: transparent transparent transparent @tipColor;
	}

	&:hover:before,
	&:focus:before,
	&:active:before {
		.prefixed(transform, translateX(@tipWidth));
	}
}


code:
/* Bubble Top */
.bubble-top() {
	.hacks();
	position: relative;

	&:before {
		pointer-events: none;
		position: absolute;
		z-index: -1;
		content: '';
		border-style: solid;
		.prefixed(transition-duration, @mediumDuration);
		.prefixed(transition-property, transform);
		left: calc(~"50%" - @tipWidth);
		top: 0;
		border-width: 0 @tipWidth @tipHeight @tipWidth;
		border-color: transparent transparent @tipColor transparent;
	}

	&:hover:before,
	&:focus:before,
	&:active:before {
		.prefixed(transform, translateY(-(@tipHeight)));
	}
}


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

 * Hover.css Copyright Ian Lunn 2017. Generated with LESS.
 */

@import "_options";
@import "_mixins";
@import "_hacks";

/* 2D TRANSITIONS */
@import "effects/2d-transitions/_grow";
& when(@includeClasses = true) {
	.@{nameSpace}-grow {
		.grow();
	}
}

@import "effects/2d-transitions/_shrink";
& when(@includeClasses = true) {
	.@{nameSpace}-shrink {
		.shrink();
	}
}

@import "effects/2d-transitions/_pulse";
& when(@includeClasses = true) {
	.@{nameSpace}-pulse {
		.pulse();
	}
}

@import "effects/2d-transitions/_pulse-grow";
& when(@includeClasses = true) {
	.@{nameSpace}-pulse-grow {
		.pulse-grow();
	}
}

@import "effects/2d-transitions/_pulse-shrink";
& when(@includeClasses = true) {
	.@{nameSpace}-pulse-shrink {
		.pulse-shrink();
	}
}

@import "effects/2d-transitions/_push";
& when(@includeClasses = true) {
	.@{nameSpace}-push {
		.push();
	}
}

@import "effects/2d-transitions/_pop";
& when(@includeClasses = true) {
	.@{nameSpace}-pop {
		.pop();
	}
}

@import "effects/2d-transitions/_bounce-in";
& when(@includeClasses = true) {
	.@{nameSpace}-bounce-in {
		.bounce-in();
	}
}

@import "effects/2d-transitions/_bounce-out";
& when(@includeClasses = true) {
	.@{nameSpace}-bounce-out {
		.bounce-out();
	}
}

@import "effects/2d-transitions/_rotate";
& when(@includeClasses = true) {
	.@{nameSpace}-rotate {
		.rotate();
	}
}

@import "effects/2d-transitions/_grow-rotate";
& when(@includeClasses = true) {
	.@{nameSpace}-grow-rotate {
		.grow-rotate();
	}
}

@import "effects/2d-transitions/_float";
& when(@includeClasses = true) {
	.@{nameSpace}-float {
		.float();
	}
}

@import "effects/2d-transitions/_sink";
& when(@includeClasses = true) {
	.@{nameSpace}-sink {
		.sink();
	}
}

@import "effects/2d-transitions/_bob";
& when(@includeClasses = true) {
	.@{nameSpace}-bob {
		.bob();
	}
}

@import "effects/2d-transitions/_hang";
& when(@includeClasses = true) {
	.@{nameSpace}-hang {
		.hang();
	}
}

@import "effects/2d-transitions/_skew";
& when(@includeClasses = true) {
	.@{nameSpace}-skew {
		.skew();
	}
}

@import "effects/2d-transitions/_skew-forward";
& when(@includeClasses = true) {
	.@{nameSpace}-skew-forward {
		.skew-forward();
	}
}

@import "effects/2d-transitions/_skew-backward";
& when(@includeClasses = true) {
	.@{nameSpace}-skew-backward {
	    .skew-backward();
	}
}

@import "effects/2d-transitions/_wobble-vertical";
& when(@includeClasses = true) {
	.@{nameSpace}-wobble-vertical {
		.wobble-vertical();
	}
}

@import "effects/2d-transitions/_wobble-horizontal";
& when(@includeClasses = true) {
	.@{nameSpace}-wobble-horizontal {
		.wobble-horizontal();
	}
}

@import "effects/2d-transitions/_wobble-to-bottom-right";
& when(@includeClasses = true) {
	.@{nameSpace}-wobble-to-bottom-right {
	    .wobble-to-bottom-right();
	}
}

@import "effects/2d-transitions/_wobble-to-top-right";
& when(@includeClasses = true) {
	.@{nameSpace}-wobble-to-top-right {
	    .wobble-to-top-right();
	}
}

@import "effects/2d-transitions/_wobble-top";
& when(@includeClasses = true) {
	.@{nameSpace}-wobble-top {
		.wobble-top();
	}
}

@import "effects/2d-transitions/_wobble-bottom";
& when(@includeClasses = true) {
	.@{nameSpace}-wobble-bottom {
		.wobble-bottom();
	}
}

@import "effects/2d-transitions/_wobble-skew";
& when(@includeClasses = true) {
	.@{nameSpace}-wobble-skew {
	    .wobble-skew();
	}
}

@import "effects/2d-transitions/_buzz";
& when(@includeClasses = true) {
	.@{nameSpace}-buzz {
	    .buzz();
	}
}

@import "effects/2d-transitions/_buzz-out";
& when(@includeClasses = true) {
	.@{nameSpace}-buzz-out {
	    .buzz-out();
	}
}

@import "effects/2d-transitions/_forward";
& when(@includeClasses = true) {
	.@{nameSpace}-forward {
	    .forward();
	}
}

@import "effects/2d-transitions/_backward";
& when(@includeClasses = true) {
	.@{nameSpace}-backward {
	    .backward();
	}
}

/* BACKGROUND TRANSITIONS */
@import "effects/background-transitions/_fade";
& when(@includeClasses = true) {
	.@{nameSpace}-fade {
		.fade();
	}
}

@import "effects/background-transitions/_back-pulse";
& when(@includeClasses = true) {
	.@{nameSpace}-back-pulse {
		.back-pulse();
	}
}

@import "effects/background-transitions/_sweep-to-right";
& when(@includeClasses = true) {
	.@{nameSpace}-sweep-to-right {
		.sweep-to-right();
	}
}

@import "effects/background-transitions/_sweep-to-left";
& when(@includeClasses = true) {
	.@{nameSpace}-sweep-to-left {
		.sweep-to-left();
	}
}

@import "effects/background-transitions/_sweep-to-bottom";
& when(@includeClasses = true) {
	.@{nameSpace}-sweep-to-bottom {
		.sweep-to-bottom();
	}
}

@import "effects/background-transitions/_sweep-to-top";
& when(@includeClasses = true) {
	.@{nameSpace}-sweep-to-top {
		.sweep-to-top();
	}
}

@import "effects/background-transitions/_bounce-to-right";
& when(@includeClasses = true) {
	.@{nameSpace}-bounce-to-right {
		.bounce-to-right();
	}
}

@import "effects/background-transitions/_bounce-to-left";
& when(@includeClasses = true) {
	.@{nameSpace}-bounce-to-left {
		.bounce-to-left();
	}
}

@import "effects/background-transitions/_bounce-to-bottom";
& when(@includeClasses = true) {
	.@{nameSpace}-bounce-to-bottom {
		.bounce-to-bottom();
	}
}

@import "effects/background-transitions/_bounce-to-top";
& when(@includeClasses = true) {
	.@{nameSpace}-bounce-to-top {
		.bounce-to-top();
	}
}

@import "effects/background-transitions/_radial-out";
& when(@includeClasses = true) {
	.@{nameSpace}-radial-out {
		.radial-out();
	}
}

@import "effects/background-transitions/_radial-in";
& when(@includeClasses = true) {
	.@{nameSpace}-radial-in {
		.radial-in();
	}
}

@import "effects/background-transitions/_rectangle-in";
& when(@includeClasses = true) {
	.@{nameSpace}-rectangle-in {
		.rectangle-in();
	}
}

@import "effects/background-transitions/_rectangle-out";
& when(@includeClasses = true) {
	.@{nameSpace}-rectangle-out {
		.rectangle-out();
	}
}

@import "effects/background-transitions/_shutter-in-horizontal";
& when(@includeClasses = true) {
	.@{nameSpace}-shutter-in-horizontal {
		.shutter-in-horizontal();
	}
}

@import "effects/background-transitions/_shutter-out-horizontal";
& when(@includeClasses = true) {
	.@{nameSpace}-shutter-out-horizontal {
		.shutter-out-horizontal();
	}
}

@import "effects/background-transitions/_shutter-in-vertical";
& when(@includeClasses = true) {
	.@{nameSpace}-shutter-in-vertical {
		.shutter-in-vertical();
	}
}

@import "effects/background-transitions/_shutter-out-vertical";
& when(@includeClasses = true) {
	.@{nameSpace}-shutter-out-vertical {
		.shutter-out-vertical();
	}
}

/* BORDER TRANSITIONS */
@import "effects/border-transitions/_border-fade";
& when (@includeClasses = true) {
	.@{nameSpace}-border-fade {
		.border-fade();
	}
}

@import "effects/border-transitions/_hollow";
& when (@includeClasses = true) {
	.@{nameSpace}-hollow {
		.hollow();
	}
}

@import "effects/border-transitions/_trim";
& when (@includeClasses = true) {
	.@{nameSpace}-trim {
		.trim();
	}
}

@import "effects/border-transitions/_ripple-out";
& when (@includeClasses = true) {
	.@{nameSpace}-ripple-out {
		.ripple-out();
	}
}

@import "effects/border-transitions/_ripple-in";
& when (@includeClasses = true) {
	.@{nameSpace}-ripple-in {
		.ripple-in();
	}
}

@import "effects/border-transitions/_outline-out";
& when (@includeClasses = true) {
	.@{nameSpace}-outline-out {
		.outline-out();
	}
}

@import "effects/border-transitions/_outline-in";
& when (@includeClasses = true) {
	.@{nameSpace}-outline-in {
		.outline-in();
	}
}

@import "effects/border-transitions/_round-corners";
& when (@includeClasses = true) {
	.@{nameSpace}-round-corners {
		.round-corners();
	}
}

@import "effects/border-transitions/_underline-from-left";
& when (@includeClasses = true) {
	.@{nameSpace}-underline-from-left {
		.underline-from-left();
	}
}

@import "effects/border-transitions/_underline-from-center";
& when (@includeClasses = true) {
	.@{nameSpace}-underline-from-center {
		.underline-from-center();
	}
}

@import "effects/border-transitions/_underline-from-right";
& when (@includeClasses = true) {
	.@{nameSpace}-underline-from-right {
		.underline-from-right();
	}
}

@import "effects/border-transitions/_overline-from-left";
& when (@includeClasses = true) {
	.@{nameSpace}-overline-from-left {
		.overline-from-left();
	}
}

@import "effects/border-transitions/_overline-from-center";
& when (@includeClasses = true) {
	.@{nameSpace}-overline-from-center {
		.overline-from-center();
	}
}

@import "effects/border-transitions/_overline-from-right";
& when (@includeClasses = true) {
	.@{nameSpace}-overline-from-right {
		.overline-from-right();
	}
}

@import "effects/border-transitions/_reveal";
& when (@includeClasses = true) {
	.@{nameSpace}-reveal {
		.reveal();
	}
}

@import "effects/border-transitions/_underline-reveal";
& when (@includeClasses = true) {
	.@{nameSpace}-underline-reveal {
		.underline-reveal();
	}
}

@import "effects/border-transitions/_overline-reveal";
& when (@includeClasses = true) {
	.@{nameSpace}-overline-reveal {
		.overline-reveal();
	}
}

/* SHADOW/GLOW TRANSITIONS */
@import "effects/shadow-and-glow-transitions/_glow";
& when (@includeClasses = true) {
	.@{nameSpace}-glow {
		.glow();
	}
}

@import "effects/shadow-and-glow-transitions/_shadow";
& when (@includeClasses = true) {
	.@{nameSpace}-shadow {
		.shadow();
	}
}

@import "effects/shadow-and-glow-transitions/_grow-shadow";
& when (@includeClasses = true) {
	.@{nameSpace}-grow-shadow {
		.grow-shadow();
	}
}

@import "effects/shadow-and-glow-transitions/_box-shadow-outset";
& when (@includeClasses = true) {
	.@{nameSpace}-box-shadow-outset {
		.box-shadow-outset();
	}
}

@import "effects/shadow-and-glow-transitions/_box-shadow-inset";
& when (@includeClasses = true) {
	.@{nameSpace}-box-shadow-inset {
		.box-shadow-inset();
	}
}

@import "effects/shadow-and-glow-transitions/_float-shadow";
& when (@includeClasses = true) {
	.@{nameSpace}-float-shadow {
		.float-shadow();
	}
}

@import "effects/shadow-and-glow-transitions/_shadow-radial";
& when (@includeClasses = true) {
	.@{nameSpace}-show-radial {
		.shadow-radial();
	}
}

/* SPEECH BUBBLES */
@import "effects/speech-bubbles/_bubble-top";
& when(@includeClasses = true) {
	.@{nameSpace}-bubble-top {
		.bubble-top();
	}
}

@import "effects/speech-bubbles/_bubble-right";
& when(@includeClasses = true) {
	.@{nameSpace}-bubble-right {
		.bubble-right();
	}
}

@import "effects/speech-bubbles/_bubble-bottom";
& when(@includeClasses = true) {
	.@{nameSpace}-bubble-bottom {
		.bubble-bottom();
	}
}

@import "effects/speech-bubbles/_bubble-left";
& when(@includeClasses = true) {
	.@{nameSpace}-bubble-left {
		.bubble-left();
	}
}

@import "effects/speech-bubbles/_bubble-float-top";
& when(@includeClasses = true) {
	.@{nameSpace}-bubble-float-top {
		.bubble-float-top();
	}
}

@import "effects/speech-bubbles/_bubble-float-right";
& when(@includeClasses = true) {
	.@{nameSpace}-bubble-float-right {
		.bubble-float-right();
	}
}

@import "effects/speech-bubbles/_bubble-float-bottom";
& when(@includeClasses = true) {
	.@{nameSpace}-bubble-float-bottom {
		.bubble-float-bottom();
	}
}

@import "effects/speech-bubbles/_bubble-float-left";
& when(@includeClasses = true) {
	.@{nameSpace}-bubble-float-left {
		.bubble-float-left();
	}
}

/* ICONS */
@import "effects/icons/_icon-back";
& when(@includeClasses = true) {
	.@{nameSpace}-icon-back {
		.icon-back();
	}
}

@import "effects/icons/_icon-forward";
& when(@includeClasses = true) {
	.@{nameSpace}-icon-forward {
		.icon-forward();
	}
}

@import "effects/icons/_icon-down";
& when(@includeClasses = true) {
	.@{nameSpace}-icon-down {
		.icon-down();
	}
}

@import "effects/icons/_icon-up";
& when(@includeClasses = true) {
	.@{nameSpace}-icon-up {
		.icon-up();
	}
}

@import "effects/icons/_icon-spin";
& when(@includeClasses = true) {
	.@{nameSpace}-icon-spin {
		.icon-spin();
	}
}

@import "effects/icons/_icon-drop";
& when(@includeClasses = true) {
	.@{nameSpace}-icon-drop {
		.icon-drop();
	}
}

@import "effects/icons/_icon-fade";
& when(@includeClasses = true) {
	.@{nameSpace}-icon-fade {
		.icon-fade();
	}
}

@import "effects/icons/_icon-float-away";
& when(@includeClasses = true) {
	.@{nameSpace}-icon-float-away {
		.icon-float-away();
	}
}

@import "effects/icons/_icon-sink-away";
& when(@includeClasses = true) {
	.@{nameSpace}-icon-sink-away {
		.icon-sink-away();
	}
}

@import "effects/icons/_icon-grow";
& when(@includeClasses = true) {
	.@{nameSpace}-icon-grow {
		.icon-grow();
	}
}

@import "effects/icons/_icon-shrink";
& when(@includeClasses = true) {
	.@{nameSpace}-icon-shrink {
		.icon-shrink();
	}
}

@import "effects/icons/_icon-pulse";
& when(@includeClasses = true) {
	.@{nameSpace}-icon-pulse {
		.icon-pulse();
	}
}

@import "effects/icons/_icon-pulse-grow";
& when(@includeClasses = true) {
	.@{nameSpace}-icon-pulse-grow {
		.icon-pulse-grow();
	}
}

@import "effects/icons/_icon-pulse-shrink";
& when(@includeClasses = true) {
	.@{nameSpace}-icon-pulse-shrink {
		.icon-pulse-shrink();
	}
}

@import "effects/icons/_icon-push";
& when(@includeClasses = true) {
	.@{nameSpace}-icon-push {
		.icon-push();
	}
}

@import "effects/icons/_icon-pop";
& when(@includeClasses = true) {
	.@{nameSpace}-icon-pop {
		.icon-pop();
	}
}

@import "effects/icons/_icon-bounce";
& when(@includeClasses = true) {
	.@{nameSpace}-icon-bounce {
		.icon-bounce();
	}
}

@import "effects/icons/_icon-rotate";
& when(@includeClasses = true) {
	.@{nameSpace}-icon-rotate {
		.icon-rotate();
	}
}

@import "effects/icons/_icon-grow-rotate";
& when(@includeClasses = true) {
	.@{nameSpace}-icon-grow-rotate {
		.icon-grow-rotate();
	}
}

@import "effects/icons/_icon-float";
& when(@includeClasses = true) {
	.@{nameSpace}-icon-float {
		.icon-float();
	}
}

@import "effects/icons/_icon-sink";
& when(@includeClasses = true) {
	.@{nameSpace}-icon-sink {
		.icon-sink();
	}
}

@import "effects/icons/_icon-bob";
& when(@includeClasses = true) {
	.@{nameSpace}-icon-bob {
		.icon-bob();
	}
}

@import "effects/icons/_icon-hang";
& when(@includeClasses = true) {
	.@{nameSpace}-icon-hang {
		.icon-hang();
	}
}

@import "effects/icons/_icon-wobble-horizontal";
& when(@includeClasses = true) {
	.@{nameSpace}-icon-wobble-horizontal {
		.icon-wobble-horizontal();
	}
}

@import "effects/icons/_icon-wobble-vertical";
& when(@includeClasses = true) {
	.@{nameSpace}-icon-wobble-vertical {
		.icon-wobble-vertical();
	}
}

@import "effects/icons/_icon-buzz";
& when(@includeClasses = true) {
	.@{nameSpace}-icon-buzz {
		.icon-buzz();
	}
}

@import "effects/icons/_icon-buzz-out";
& when(@includeClasses = true) {
	.@{nameSpace}-icon-buzz-out {
		.icon-buzz-out();
	}
}

/* CURLS */
@import "effects/curls/_curl-top-left";
& when(@includeClasses = true) {
	.@{nameSpace}-curl-top-left {
		.curl-top-left();
	}
}

@import "effects/curls/_curl-top-right";
& when(@includeClasses = true) {
	.@{nameSpace}-curl-top-right {
		.curl-top-right();
	}
}

@import "effects/curls/_curl-bottom-right";
& when(@includeClasses = true) {
	.@{nameSpace}-curl-bottom-right {
		.curl-bottom-right();
	}
}

@import "effects/curls/_curl-bottom-left";
& when(@includeClasses = true) {
	.@{nameSpace}-curl-bottom-left {
		.curl-bottom-left();
	}
}


code:
// As is often the case, some devices/browsers need additional code to get CSS to work
// in the most desired way. These mixins are used to quickly drop in hacks for each element
// Find out more here: https://github.com/IanLunn/Hover/wiki/Hacks-Explained

@mixin hardwareAccel() {
	// Improve performance on mobile/tablet devices
	// Perspective reduces blurryness of text in Chrome
	@include prefixed(transform, perspective(1px) translateZ(0));
}

@mixin improveAntiAlias() {
	// Improve aliasing on mobile/tablet devices
	box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

@mixin forceBlockLevel() {
	// Transforms need to be block-level to work
	display: inline-block;
	vertical-align: middle;
}

@mixin hacks() {
	@include forceBlockLevel();
	@include hardwareAccel();
	@include improveAntiAlias();
}


code:
// prefix declarations
@mixin prefixed($property, $value) {
  @if $webkit == true {
    -webkit-#{$property}: #{$value};
  }

  @if $moz == true {
    -moz-#{$property}: #{$value};
  }

  @if $ms == true {
    -ms-#{$property}: #{$value};
  }

  @if $o == true {
    -o-#{$property}: #{$value};
  }

  #{$property}: #{$value};
}

// prefix keyframes
@mixin keyframes($name) {
  @if $webkit == true {
    @-webkit-keyframes #{$name} {
      @content;
    }
  }

  @if $moz == true {
    @-moz-keyframes #{$name} {
      @content;
    }
  }

  @if $ms == true {
    @-ms-keyframes #{$name} {
      @content;
    }
  }

  @if $o == true {
    @-o-keyframes #{$name} {
      @content;
    }
  }

  @keyframes #{$name} {
    @content;
  }
}


code:
// DEFAULT OPTIONS

// Prefix for Hover class names
$nameSpace: 'hvr' !default;

// Durations
$fastDuration: .1s !default;
$mediumDuration: .3s !default;
$slowDuration: .5s !default;

// Colors
$primaryColor: #e1e1e1 !default;
$secondaryColor: #666 !default;
$highlightColor: #ccc !default;
$activeColor: #2098D1 !default;
$shadowColor: rgba(0, 0, 0, .6) !default;

// Speech bubbles options
$tipWidth: 10px !default;  //the width of the speech bubble tip
$tipHeight: 10px !default; //the height of the speech bubble tip
$tipColor: $primaryColor !default;

// Arrows options
$spaceBetweenTextAndArrows: 2.2em !default;

// Curl dimensions
$curlWidth: 25px !default;
$curlHeight: 25px !default;

// Curl colors
$revealAreaColor: white !default;    // reveal area behind the curl
$curlLineColor: #aaa !default;       // crease line
$curlTransitionColor: #ccc !default;	// color transitioning from crease line to final color
$curlLastColor: white !default;		// final color of the back of the curl

// Browser Prefixes - Which CSS prefixes should be used?
$webkit: true !default;
$moz: false !default;
$ms: false !default;
$o: false !default;

// Compile with or without classes
$includeClasses: true !default;


code:
/* Backward */
@mixin backward {
	@include hacks();
	@include prefixed(transition-duration, $mediumDuration);
	@include prefixed(transition-property, transform);

	&:hover,
	&:focus,
	&:active {
		@include prefixed(transform, translateX(-8px));
	}
}


code:
/* Bob */
@include keyframes(#{$nameSpace}-bob) {
	0% {
		@include prefixed(transform, translateY(-8px));
	}
	50% {
		@include prefixed(transform, translateY(-4px));
	}
	100% {
		@include prefixed(transform, translateY(-8px));
	}
}

@include keyframes(#{$nameSpace}-bob-float) {
	100% {
		@include prefixed(transform, translateY(-8px));
	}
}

@mixin bob {
	@include hacks();

	&:hover,
	&:focus,
	&:active {
		@include prefixed(animation-name, "#{$nameSpace}-bob-float, #{$nameSpace}-bob");
		@include prefixed(animation-duration, ".3s, 1.5s");
		@include prefixed(animation-delay, "0s, .3s");
		@include prefixed(animation-timing-function, "ease-out, ease-in-out");
		@include prefixed(animation-iteration-count, "1, infinite");
		@include prefixed(animation-fill-mode, "forwards");
		@include prefixed(animation-direction, "normal, alternate");
	}
}


code:
/* Bounce In */
@mixin bounce-in {
	@include hacks();
	@include prefixed(transition-duration, $slowDuration);

	&:hover,
	&:focus,
	&:active {
		@include prefixed(transform, scale(1.2));
		@include prefixed(transition-timing-function, cubic-bezier(.47,2.02,.31,-0.36));
	}
}


code:
/* Bounce Out */
@mixin bounce-out {
	@include hacks();
	@include prefixed(transition-duration, $slowDuration);

	&:hover,
	&:focus,
	&:active {
		@include prefixed(transform, scale(.8));
		@include prefixed(transition-timing-function, cubic-bezier(.47,2.02,.31,-0.36));
	}
}


code:
/* Buzz Out */
@include keyframes(#{$nameSpace}-buzz-out) {
	10% {
		@include prefixed(transform, translateX(3px) rotate(2deg));
	}

	20% {
		@include prefixed(transform, translateX(-3px) rotate(-2deg));
	}

	30% {
		@include prefixed(transform, translateX(3px) rotate(2deg));
	}

	40% {
		@include prefixed(transform, translateX(-3px) rotate(-2deg));
	}

	50% {
		@include prefixed(transform, translateX(2px) rotate(1deg));
	}

	60% {
		@include prefixed(transform, translateX(-2px) rotate(-1deg));
	}

	70% {
		@include prefixed(transform, translateX(2px) rotate(1deg));
	}

	80% {
		@include prefixed(transform, translateX(-2px) rotate(-1deg));
	}

	90% {
		@include prefixed(transform, translateX(1px) rotate(0));
	}

	100% {
		@include prefixed(transform, translateX(-1px) rotate(0));
	}
}

@mixin buzz-out {
	@include hacks();

	&:hover,
	&:focus,
	&:active {
		@include prefixed(animation-name, #{$nameSpace}-buzz-out);
		@include prefixed(animation-duration, .75s);
		@include prefixed(animation-timing-function, linear);
		@include prefixed(animation-iteration-count, 1);
	}
}


code:
/* Buzz */
@include keyframes(#{$nameSpace}-buzz) {
	50% {
		@include prefixed(transform, translateX(3px) rotate(2deg));
	}

	100% {
		@include prefixed(transform, translateX(-3px) rotate(-2deg));
	}
}

@mixin buzz {
	@include hacks();

	&:hover,
	&:focus,
	&:active {
		@include prefixed(animation-name, #{$nameSpace}-buzz);
		@include prefixed(animation-duration, .15s);
		@include prefixed(animation-timing-function, linear);
		@include prefixed(animation-iteration-count, infinite);
	}
}


code:
/* Float */
@mixin float {
	@include hacks();
	@include prefixed(transition-duration, $mediumDuration);
	@include prefixed(transition-property, transform);
	@include prefixed(transition-timing-function, ease-out);

	&:hover,
	&:focus,
	&:active {
		@include prefixed(transform, translateY(-8px));
	}
}


code:
/* Forward */
@mixin forward {
	@include hacks();
	@include prefixed(transition-duration, $mediumDuration);
	@include prefixed(transition-property, transform);

	&:hover,
	&:focus,
	&:active {
		@include prefixed(transform, translateX(8px));
	}
}


code:
/* Grow Rotate */
@mixin grow-rotate {
	@include hacks();
	@include prefixed(transition-duration, $mediumDuration);
	@include prefixed(transition-property, transform);

	&:hover,
	&:focus,
	&:active {
		@include prefixed(transform, scale(1.1) rotate(4deg));
	}
}


code:
/* Grow */
@mixin grow {
	@include hacks();
	@include prefixed(transition-duration, $mediumDuration);
	@include prefixed(transition-property, transform);

	&:hover,
	&:focus,
	&:active {
		@include prefixed(transform, scale(1.1));
	}
}


code:
/* Hang */
@include keyframes(#{$nameSpace}-hang) {
	0% {
		@include prefixed(transform, translateY(8px));
	}
	50% {
		@include prefixed(transform, translateY(4px));
	}
	100% {
		@include prefixed(transform, translateY(8px));
	}
}

@include keyframes(#{$nameSpace}-hang-sink) {
	100% {
		@include prefixed(transform, translateY(8px));
	}
}

@mixin hang {
	@include hacks();

	&:hover,
	&:focus,
	&:active {
		@include prefixed(animation-name, "#{$nameSpace}-hang-sink, #{$nameSpace}-hang");
		@include prefixed(animation-duration, ".3s, 1.5s");
		@include prefixed(animation-delay, "0s, .3s");
		@include prefixed(animation-timing-function, "ease-out, ease-in-out");
		@include prefixed(animation-iteration-count, "1, infinite");
		@include prefixed(animation-fill-mode, "forwards");
		@include prefixed(animation-direction, "normal, alternate");
	}
}


code:
/* Pop */
@include keyframes(#{$nameSpace}-pop) {
	50% {
		@include prefixed(transform, scale(1.2));
	}
}

@mixin pop {
	@include hacks();

	&:hover,
	&:focus,
	&:active {
		@include prefixed(animation-name, #{$nameSpace}-pop);
		@include prefixed(animation-duration, $mediumDuration);
		@include prefixed(animation-timing-function, linear);
		@include prefixed(animation-iteration-count, 1);
	}
}


code:
/* Pulse Grow */
@include keyframes(#{$nameSpace}-pulse-grow) {
	to {
		@include prefixed(transform, scale(1.1));
	}
}

@mixin pulse-grow {
	@include hacks();

	&:hover,
	&:focus,
	&:active {
		@include prefixed(animation-name, #{$nameSpace}-pulse-grow);
		@include prefixed(animation-duration, $mediumDuration);
		@include prefixed(animation-timing-function, linear);
		@include prefixed(animation-iteration-count, infinite);
		@include prefixed(animation-direction, alternate);
	}
}


code:
/* Pulse Shrink */
@include keyframes(#{$nameSpace}-pulse-shrink) {
	to {
		@include prefixed(transform, scale(.9));
	}
}

@mixin pulse-shrink {
	@include hacks();

	&:hover,
	&:focus,
	&:active {
		@include prefixed(animation-name, #{$nameSpace}-pulse-shrink);
		@include prefixed(animation-duration, $mediumDuration);
		@include prefixed(animation-timing-function, linear);
		@include prefixed(animation-iteration-count, infinite);
		@include prefixed(animation-direction, alternate);
	}
}


code:
/* Pulse */
@include keyframes(#{$nameSpace}-pulse) {
	25% {
		@include prefixed(transform, scale(1.1));
	}

	75% {
		@include prefixed(transform, scale(.9));
	}
}

@mixin pulse {
	@include hacks();

	&:hover,
	&:focus,
	&:active {
		@include prefixed(animation-name, #{$nameSpace}-pulse);
		@include prefixed(animation-duration, 1s);
		@include prefixed(animation-timing-function, linear);
		@include prefixed(animation-iteration-count, infinite);
	}
}


code:
/* Push */
@include keyframes(#{$nameSpace}-push) {
	50% {
		@include prefixed(transform, scale(.8));
	}

	100% {
		@include prefixed(transform, scale(1));
	}
}

@mixin push {
	@include hacks();

	&:hover,
	&:focus,
	&:active {
		@include prefixed(animation-name, #{$nameSpace}-push);
		@include prefixed(animation-duration, .3s);
		@include prefixed(animation-timing-function, linear);
		@include prefixed(animation-iteration-count, 1);
	}
}


code:
/* Rotate */
@mixin rotate {
	@include hacks();
	@include prefixed(transition-duration, $mediumDuration);
	@include prefixed(transition-property, transform);

	&:hover,
	&:focus,
	&:active {
		@include prefixed(transform, rotate(4deg));
	}
}


code:
/* Shrink */
@mixin shrink {
	@include hacks();
	@include prefixed(transition-duration, $mediumDuration);
	@include prefixed(transition-property, transform);

	&:hover,
	&:focus,
	&:active {
		@include prefixed(transform, scale(.9));
	}
}


code:
/* Sink */
@mixin sink {
	@include hacks();
	@include prefixed(transition-duration, $mediumDuration);
	@include prefixed(transition-property, transform);
	@include prefixed(transition-timing-function, ease-out);

	&:hover,
	&:focus,
	&:active {
		@include prefixed(transform, translateY(8px));
	}
}


code:
/* Skew Backward */
@mixin skew-backward {
	@include hacks();
	@include prefixed(transition-duration, $mediumDuration);
	@include prefixed(transition-property, transform);
	@include prefixed(transform-origin, 0 100%);

	&:hover,
	&:focus,
	&:active {
		@include prefixed(transform, skew(10deg));
	}
}


code:
/* Skew Forward */
@mixin skew-forward {
	@include hacks();
	@include prefixed(transition-duration, $mediumDuration);
	@include prefixed(transition-property, transform);
	@include prefixed(transform-origin, 0 100%);

	&:hover,
	&:focus,
	&:active {
		@include prefixed(transform, skew(-10deg));
	}
}


code:
/* Skew */
@mixin skew {
	@include hacks();
	@include prefixed(transition-duration, $mediumDuration);
	@include prefixed(transition-property, transform);

	&:hover,
	&:focus,
	&:active {
		@include prefixed(transform, skew(-10deg));
	}
}


code:
/* Wobble Bottom */
@include keyframes(#{$nameSpace}-wobble-bottom) {
	16.65% {
		@include prefixed(transform, skew(-12deg));
	}

	33.3% {
		@include prefixed(transform, skew(10deg));
	}

	49.95% {
		@include prefixed(transform, skew(-6deg));
	}

	66.6% {
		@include prefixed(transform, skew(4deg));
	}

	83.25% {
		@include prefixed(transform, skew(-2deg));
	}

	100% {
		@include prefixed(transform, skew(0));
	}
}

@mixin wobble-bottom {
	@include hacks();
	@include prefixed(transform-origin, 100% 0);

	&:hover,
	&:focus,
	&:active {
		@include prefixed(animation-name, #{$nameSpace}-wobble-bottom);
		@include prefixed(animation-duration, 1s);
		@include prefixed(animation-timing-function, ease-in-out);
		@include prefixed(animation-iteration-count, 1);
	}
}


code:
/* Wobble Horizontal */
@include keyframes(#{$nameSpace}-wobble-horizontal) {
	16.65% {
		@include prefixed(transform, translateX(8px));
	}

	33.3% {
		@include prefixed(transform, translateX(-6px));
	}

	49.95% {
		@include prefixed(transform, translateX(4px));
	}

	66.6% {
		@include prefixed(transform, translateX(-2px));
	}

	83.25% {
		@include prefixed(transform, translateX(1px));
	}

	100% {
		@include prefixed(transform, translateX(0));
	}
}

@mixin wobble-horizontal {
	@include hacks();

	&:hover,
	&:focus,
	&:active {
		@include prefixed(animation-name, #{$nameSpace}-wobble-horizontal);
		@include prefixed(animation-duration, 1s);
		@include prefixed(animation-timing-function, ease-in-out);
		@include prefixed(animation-iteration-count, 1);
	}
}


code:
/* Wobble Skew */
@include keyframes(#{$nameSpace}-wobble-skew) {
	16.65% {
		@include prefixed(transform, skew(-12deg));
	}

	33.3% {
		@include prefixed(transform, skew(10deg));
	}

	49.95% {
		@include prefixed(transform, skew(-6deg));
	}

	66.6% {
		@include prefixed(transform, skew(4deg));
	}

	83.25% {
		@include prefixed(transform, skew(-2deg));
	}

	100% {
		@include prefixed(transform, skew(0));
	}
}

@mixin wobble-skew {
	@include hacks();

	&:hover,
	&:focus,
	&:active {
		@include prefixed(animation-name, #{$nameSpace}-wobble-skew);
		@include prefixed(animation-duration, 1s);
		@include prefixed(animation-timing-function, ease-in-out);
		@include prefixed(animation-iteration-count, 1);
	}
}