﻿/* AB模板网 整站模板下载 */
/* 模板：Www.AdminBuy.Cn */
/* 仿站：Fang.AdminBuy.Cn */
/* 素材：Sc.AdminBuy.Cn */
/* QQ：9490489 */

/*!

 * Hover.css (http://ianlunn.co.uk/)

 * Version: 1.0.9

 * Author: Ian Lunn @IanLunn

 * Author URL: http://ianlunn.co.uk/

 * Github: https://github.com/IanLunn/Hover



 * Made available under a MIT License:

 * http://www.opensource.org/licenses/mit-license.php



 * Hover.css Copyright Ian Lunn 2014.

 */

/* Default styles for the demo buttons */

.button {

	margin: .4em;

	padding: 1em;

	cursor: pointer;

	background: #e1e1e1;

	text-decoration: none;

	color: #666666;

	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);

}

/* 2D TRANSITIONS */

/* Grow */

.grow {

	display: inline-block;

	-webkit-transition-duration: 0.3s;

	transition-duration: 0.3s;

	-webkit-transition-property: transform;

	transition-property: transform;

	-webkit-transform: translateZ(0);

	transform: translateZ(0);

	box-shadow: 0 0 1px rgba(0, 0, 0, 0);

}

.grow:hover, .grow:focus, .grow:active {

	-webkit-transform: scale(1.1);

	transform: scale(1.1);

}

/* Shrink */

.shrink {

	display: inline-block;

	-webkit-transition-duration: 0.3s;

	transition-duration: 0.3s;

	-webkit-transition-property: transform;

	transition-property: transform;

	-webkit-transform: translateZ(0);

	transform: translateZ(0);

	box-shadow: 0 0 1px rgba(0, 0, 0, 0);

}

.shrink:hover, .shrink:focus, .shrink:active {

	-webkit-transform: scale(0.9);

	transform: scale(0.9);

}



/* Pulse */

@-webkit-keyframes pulse {

 25% {

 -webkit-transform: scale(1.1);

 transform: scale(1.1);

}

 75% {

 -webkit-transform: scale(0.9);

 transform: scale(0.9);

}

}

 @keyframes pulse {

 25% {

 -webkit-transform: scale(1.1);

 transform: scale(1.1);

}

 75% {

 -webkit-transform: scale(0.9);

 transform: scale(0.9);

}

}

.pulse {

	display: inline-block;

	-webkit-transform: translateZ(0);

	transform: translateZ(0);

	box-shadow: 0 0 1px rgba(0, 0, 0, 0);

}

.pulse:hover, .pulse:focus, .pulse:active {

	-webkit-animation-name: pulse;

	animation-name: pulse;

	-webkit-animation-duration: 1s;

	animation-duration: 1s;

	-webkit-animation-timing-function: linear;

	animation-timing-function: linear;

	-webkit-animation-iteration-count: infinite;

	animation-iteration-count: infinite;

}



/* Pulse Grow */

@-webkit-keyframes pulse-grow {

 to {

 -webkit-transform: scale(1.1);

 transform: scale(1.1);

}

}

 @keyframes pulse-grow {

 to {

 -webkit-transform: scale(1.1);

 transform: scale(1.1);

}

}

.pulse-grow {

	display: inline-block;

	-webkit-transform: translateZ(0);

	transform: translateZ(0);

	box-shadow: 0 0 1px rgba(0, 0, 0, 0);

}

.pulse-grow:hover, .pulse-grow:focus, .pulse-grow:active {

	-webkit-animation-name: pulse-grow;

	animation-name: pulse-grow;

	-webkit-animation-duration: 0.3s;

	animation-duration: 0.3s;

	-webkit-animation-timing-function: linear;

	animation-timing-function: linear;

	-webkit-animation-iteration-count: infinite;

	animation-iteration-count: infinite;

	-webkit-animation-direction: alternate;

	animation-direction: alternate;

}



/* Pulse Shrink */

@-webkit-keyframes pulse-shrink {

 to {

 -webkit-transform: scale(0.9);

 transform: scale(0.9);

}

}

 @keyframes pulse-shrink {

 to {

 -webkit-transform: scale(0.9);

 transform: scale(0.9);

}

}

.pulse-shrink {

	display: inline-block;

	-webkit-transform: translateZ(0);

	transform: translateZ(0);

	box-shadow: 0 0 1px rgba(0, 0, 0, 0);

}

.pulse-shrink:hover, .pulse-shrink:focus, .pulse-shrink:active {

	-webkit-animation-name: pulse-shrink;

	animation-name: pulse-shrink;

	-webkit-animation-duration: 0.3s;

	animation-duration: 0.3s;

	-webkit-animation-timing-function: linear;

	animation-timing-function: linear;

	-webkit-animation-iteration-count: infinite;

	animation-iteration-count: infinite;

	-webkit-animation-direction: alternate;

	animation-direction: alternate;

}



/* Push */

@-webkit-keyframes push {

 50% {

 -webkit-transform: scale(0.8);

 transform: scale(0.8);

}

 100% {

 -webkit-transform: scale(1);

 transform: scale(1);

}

}

 @keyframes push {

 50% {

 -webkit-transform: scale(0.8);

 transform: scale(0.8);

}

 100% {

 -webkit-transform: scale(1);

 transform: scale(1);

}

}

.push {

	display: inline-block;

	-webkit-transform: translateZ(0);

	transform: translateZ(0);

	box-shadow: 0 0 1px rgba(0, 0, 0, 0);

}

.push:hover, .push:focus, .push:active {

	-webkit-animation-name: push;

	animation-name: push;

	-webkit-animation-duration: 0.3s;

	animation-duration: 0.3s;

	-webkit-animation-timing-function: linear;

	animation-timing-function: linear;

	-webkit-animation-iteration-count: 1;

	animation-iteration-count: 1;

}



/* Pop */

@-webkit-keyframes pop {

 50% {

 -webkit-transform: scale(1.2);

 transform: scale(1.2);

}

 100% {

 -webkit-transform: scale(1);

 transform: scale(1);

}

}

 @keyframes pop {

 50% {

 -webkit-transform: scale(1.2);

 transform: scale(1.2);

}

 100% {

 -webkit-transform: scale(1);

 transform: scale(1);

}

}

.pop {

	display: inline-block;

	-webkit-transform: translateZ(0);

	transform: translateZ(0);

	box-shadow: 0 0 1px rgba(0, 0, 0, 0);

}

.pop:hover, .pop:focus, .pop:active {

	-webkit-animation-name: pop;

	animation-name: pop;

	-webkit-animation-duration: 0.3s;

	animation-duration: 0.3s;

	-webkit-animation-timing-function: linear;

	animation-timing-function: linear;

	-webkit-animation-iteration-count: 1;

	animation-iteration-count: 1;

}

/* Rotate */

.rotate {

	display: inline-block;

	-webkit-transition-duration: 0.3s;

	transition-duration: 0.3s;

	-webkit-transition-property: transform;

	transition-property: transform;

	-webkit-transform: translateZ(0);

	transform: translateZ(0);

	box-shadow: 0 0 1px rgba(0, 0, 0, 0);

}

.rotate:hover, .rotate:focus, .rotate:active {

	-webkit-transform: rotate(4deg);

	transform: rotate(4deg);

}

/* Grow Rotate */

.grow-rotate {

	display: inline-block;

	-webkit-transition-duration: 0.3s;

	transition-duration: 0.3s;

	-webkit-transition-property: transform;

	transition-property: transform;

	-webkit-transform: translateZ(0);

	transform: translateZ(0);

	box-shadow: 0 0 1px rgba(0, 0, 0, 0);

}

.grow-rotate:hover, .grow-rotate:focus, .grow-rotate:active {

	-webkit-transform: scale(1.1) rotate(4deg);

	transform: scale(1.1) rotate(4deg);

}

/* Float */

.float {

	display: inline-block;

	-webkit-transition-duration: 0.3s;

	transition-duration: 0.3s;

	-webkit-transition-property: transform;

	transition-property: transform;

	-webkit-transform: translateZ(0);

	transform: translateZ(0);

	box-shadow: 0 0 1px rgba(0, 0, 0, 0);

}

.float:hover, .float:focus, .float:active {

	-webkit-transform: translateY(-5px);

	transform: translateY(-5px);

}

/* Sink */

.sink {

	display: inline-block;

	-webkit-transition-duration: 0.3s;

	transition-duration: 0.3s;

	-webkit-transition-property: transform;

	transition-property: transform;

	-webkit-transform: translateZ(0);

	transform: translateZ(0);

	box-shadow: 0 0 1px rgba(0, 0, 0, 0);

}

.sink:hover, .sink:focus, .sink:active {

	-webkit-transform: translateY(5px);

	transform: translateY(5px);

}



/* Hover */

@-webkit-keyframes hover {

 50% {

 -webkit-transform: translateY(-3px);

 transform: translateY(-3px);

}

 100% {

 -webkit-transform: translateY(-6px);

 transform: translateY(-6px);

}

}

 @keyframes hover {

 50% {

 -webkit-transform: translateY(-3px);

 transform: translateY(-3px);

}

 100% {

 -webkit-transform: translateY(-6px);

 transform: translateY(-6px);

}

}

.hover {

	display: inline-block;

	-webkit-transition-duration: 0.5s;

	transition-duration: 0.5s;

	-webkit-transition-property: transform;

	transition-property: transform;

	-webkit-transform: translateZ(0);

	transform: translateZ(0);

	box-shadow: 0 0 1px rgba(0, 0, 0, 0);

}

.hover:hover, .hover:focus, .hover:active {

	-webkit-transform: translateY(-6px);

	transform: translateY(-6px);

	-webkit-animation-name: hover;

	animation-name: hover;

	-webkit-animation-duration: 1.5s;

	animation-duration: 1.5s;

	-webkit-animation-delay: 0.3s;

	animation-delay: 0.3s;

	-webkit-animation-timing-function: linear;

	animation-timing-function: linear;

	-webkit-animation-iteration-count: infinite;

	animation-iteration-count: infinite;

	-webkit-animation-direction: alternate;

	animation-direction: alternate;

}



/* Hang */

@-webkit-keyframes hang {

 50% {

 -webkit-transform: translateY(3px);

 transform: translateY(3px);

}

 100% {

 -webkit-transform: translateY(6px);

 transform: translateY(6px);

}

}

 @keyframes hang {

 50% {

 -webkit-transform: translateY(3px);

 transform: translateY(3px);

}

 100% {

 -webkit-transform: translateY(6px);

 transform: translateY(6px);

}

}

.hang {

	display: inline-block;

	-webkit-transition-duration: 0.5s;

	transition-duration: 0.5s;

	-webkit-transition-property: transform;

	transition-property: transform;

	-webkit-transform: translateZ(0);

	transform: translateZ(0);

	box-shadow: 0 0 1px rgba(0, 0, 0, 0);

}

.hang:hover, .hang:focus, .hang:active {

	-webkit-transform: translateY(6px);

	transform: translateY(6px);

	-webkit-animation-name: hang;

	animation-name: hang;

	-webkit-animation-duration: 1.5s;

	animation-duration: 1.5s;

	-webkit-animation-delay: 0.3s;

	animation-delay: 0.3s;

	-webkit-animation-timing-function: linear;

	animation-timing-function: linear;

	-webkit-animation-iteration-count: infinite;

	animation-iteration-count: infinite;

	-webkit-animation-direction: alternate;

	animation-direction: alternate;

}

/* Skew */

.skew {

	display: inline-block;

	-webkit-transition-duration: 0.3s;

	transition-duration: 0.3s;

	-webkit-transition-property: transform;

	transition-property: transform;

	-webkit-transform: translateZ(0);

	transform: translateZ(0);

	box-shadow: 0 0 1px rgba(0, 0, 0, 0);

}

.skew:hover, .skew:focus, .skew:active {

	-webkit-transform: skew(-10deg);

	transform: skew(-10deg);

}

/* Skew Forward */

.skew-forward {

	display: inline-block;

	-webkit-transition-duration: 0.3s;

	transition-duration: 0.3s;

	-webkit-transition-property: transform;

	transition-property: transform;

	-webkit-transform-origin: 0 100%;

	transform-origin: 0 100%;

	-webkit-transform: translateZ(0);

	transform: translateZ(0);

	box-shadow: 0 0 1px rgba(0, 0, 0, 0);

}

.skew-forward:hover, .skew-forward:focus, .skew-forward:active {

	-webkit-transform: skew(-10deg);

	transform: skew(-10deg);

}

/* Skew Backward */

.skew-backward {

	display: inline-block;

	-webkit-transition-duration: 0.3s;

	transition-duration: 0.3s;

	-webkit-transition-property: transform;

	transition-property: transform;

	-webkit-transform-origin: 0 100%;

	transform-origin: 0 100%;

	-webkit-transform: translateZ(0);

	transform: translateZ(0);

	box-shadow: 0 0 1px rgba(0, 0, 0, 0);

}

.skew-backward:hover, .skew-backward:focus, .skew-backward:active {

	-webkit-transform: skew(10deg);

	transform: skew(10deg);

}



/* Wobble Vertical */

@-webkit-keyframes wobble-vertical {

 16.65% {

 -webkit-transform: translateY(8px);

 transform: translateY(8px);

}

 33.3% {

 -webkit-transform: translateY(-6px);

 transform: translateY(-6px);

}

 49.95% {

 -webkit-transform: translateY(4px);

 transform: translateY(4px);

}

 66.6% {

 -webkit-transform: translateY(-2px);

 transform: translateY(-2px);

}

 83.25% {

 -webkit-transform: translateY(1px);

 transform: translateY(1px);

}

 100% {

 -webkit-transform: translateY(0);

 transform: translateY(0);

}

}

 @keyframes wobble-vertical {

 16.65% {

 -webkit-transform: translateY(8px);

 transform: translateY(8px);

}

 33.3% {

 -webkit-transform: translateY(-6px);

 transform: translateY(-6px);

}

 49.95% {

 -webkit-transform: translateY(4px);

 transform: translateY(4px);

}

 66.6% {

 -webkit-transform: translateY(-2px);

 transform: translateY(-2px);

}

 83.25% {

 -webkit-transform: translateY(1px);

 transform: translateY(1px);

}

 100% {

 -webkit-transform: translateY(0);

 transform: translateY(0);

}

}

.wobble-vertical {

	display: inline-block;

	-webkit-transform: translateZ(0);

	transform: translateZ(0);

	box-shadow: 0 0 1px rgba(0, 0, 0, 0);

}

.wobble-vertical:hover, .wobble-vertical:focus, .wobble-vertical:active {

	-webkit-animation-name: wobble-vertical;

	animation-name: wobble-vertical;

	-webkit-animation-duration: 1s;

	animation-duration: 1s;

	-webkit-animation-timing-function: ease-in-out;

	animation-timing-function: ease-in-out;

	-webkit-animation-iteration-count: 1;

	animation-iteration-count: 1;

}



/* Wobble Horizontal */

@-webkit-keyframes wobble-horizontal {

 16.65% {

 -webkit-transform: translateX(8px);

 transform: translateX(8px);

}

 33.3% {

 -webkit-transform: translateX(-6px);

 transform: translateX(-6px);

}

 49.95% {

 -webkit-transform: translateX(4px);

 transform: translateX(4px);

}

 66.6% {

 -webkit-transform: translateX(-2px);

 transform: translateX(-2px);

}

 83.25% {

 -webkit-transform: translateX(1px);

 transform: translateX(1px);

}

 100% {

 -webkit-transform: translateX(0);

 transform: translateX(0);

}

}

 @keyframes wobble-horizontal {

 16.65% {

 -webkit-transform: translateX(8px);

 transform: translateX(8px);

}

 33.3% {

 -webkit-transform: translateX(-6px);

 transform: translateX(-6px);

}

 49.95% {

 -webkit-transform: translateX(4px);

 transform: translateX(4px);

}

 66.6% {

 -webkit-transform: translateX(-2px);

 transform: translateX(-2px);

}

 83.25% {

 -webkit-transform: translateX(1px);

 transform: translateX(1px);

}

 100% {

 -webkit-transform: translateX(0);

 transform: translateX(0);

}

}

.wobble-horizontal {

	display: inline-block;

	-webkit-transform: translateZ(0);

	transform: translateZ(0);

	box-shadow: 0 0 1px rgba(0, 0, 0, 0);

}

.wobble-horizontal:hover, .wobble-horizontal:focus, .wobble-horizontal:active {

	-webkit-animation-name: wobble-horizontal;

	animation-name: wobble-horizontal;

	-webkit-animation-duration: 1s;

	animation-duration: 1s;

	-webkit-animation-timing-function: ease-in-out;

	animation-timing-function: ease-in-out;

	-webkit-animation-iteration-count: 1;

	animation-iteration-count: 1;

}



/* Wobble To Bottom Right */

@-webkit-keyframes wobble-to-bottom-right {

 16.65% {

 -webkit-transform: translate(8px, 8px);

 transform: translate(8px, 8px);

}

 33.3% {

 -webkit-transform: translate(-6px, -6px);

 transform: translate(-6px, -6px);

}

 49.95% {

 -webkit-transform: translate(4px, 4px);

 transform: translate(4px, 4px);

}

 66.6% {

 -webkit-transform: translate(-2px, -2px);

 transform: translate(-2px, -2px);

}

 83.25% {

 -webkit-transform: translate(1px, 1px);

 transform: translate(1px, 1px);

}

 100% {

 -webkit-transform: translate(0, 0);

 transform: translate(0, 0);

}

}

 @keyframes wobble-to-bottom-right {

 16.65% {

 -webkit-transform: translate(8px, 8px);

 transform: translate(8px, 8px);

}

 33.3% {

 -webkit-transform: translate(-6px, -6px);

 transform: translate(-6px, -6px);

}

 49.95% {

 -webkit-transform: translate(4px, 4px);

 transform: translate(4px, 4px);

}

 66.6% {

 -webkit-transform: translate(-2px, -2px);

 transform: translate(-2px, -2px);

}

 83.25% {

 -webkit-transform: translate(1px, 1px);

 transform: translate(1px, 1px);

}

 100% {

 -webkit-transform: translate(0, 0);

 transform: translate(0, 0);

}

}

.wobble-to-bottom-right {

	display: inline-block;

	-webkit-transform: translateZ(0);

	transform: translateZ(0);

	box-shadow: 0 0 1px rgba(0, 0, 0, 0);

}

.wobble-to-bottom-right:hover, .wobble-to-bottom-right:focus, .wobble-to-bottom-right:active {

	-webkit-animation-name: wobble-to-bottom-right;

	animation-name: wobble-to-bottom-right;

	-webkit-animation-duration: 1s;

	animation-duration: 1s;

	-webkit-animation-timing-function: ease-in-out;

	animation-timing-function: ease-in-out;

	-webkit-animation-iteration-count: 1;

	animation-iteration-count: 1;

}



/* Wobble To Top Right */

@-webkit-keyframes wobble-to-top-right {

 16.65% {

 -webkit-transform: translate(8px, -8px);

 transform: translate(8px, -8px);

}

 33.3% {

 -webkit-transform: translate(-6px, 6px);

 transform: translate(-6px, 6px);

}

 49.95% {

 -webkit-transform: translate(4px, -4px);

 transform: translate(4px, -4px);

}

 66.6% {

 -webkit-transform: translate(-2px, 2px);

 transform: translate(-2px, 2px);

}

 83.25% {

 -webkit-transform: translate(1px, -1px);

 transform: translate(1px, -1px);

}

 100% {

 -webkit-transform: translate(0, 0);

 transform: translate(0, 0);

}

}

 @keyframes wobble-to-top-right {

 16.65% {

 -webkit-transform: translate(8px, -8px);

 transform: translate(8px, -8px);

}

 33.3% {

 -webkit-transform: translate(-6px, 6px);

 transform: translate(-6px, 6px);

}

 49.95% {

 -webkit-transform: translate(4px, -4px);

 transform: translate(4px, -4px);

}

 66.6% {

 -webkit-transform: translate(-2px, 2px);

 transform: translate(-2px, 2px);

}

 83.25% {

 -webkit-transform: translate(1px, -1px);

 transform: translate(1px, -1px);

}

 100% {

 -webkit-transform: translate(0, 0);

 transform: translate(0, 0);

}

}

.wobble-to-top-right {

	display: inline-block;

	-webkit-transform: translateZ(0);

	transform: translateZ(0);

	box-shadow: 0 0 1px rgba(0, 0, 0, 0);

}

.wobble-to-top-right:hover, .wobble-to-top-right:focus, .wobble-to-top-right:active {

	-webkit-animation-name: wobble-to-top-right;

	animation-name: wobble-to-top-right;

	-webkit-animation-duration: 1s;

	animation-duration: 1s;

	-webkit-animation-timing-function: ease-in-out;

	animation-timing-function: ease-in-out;

	-webkit-animation-iteration-count: 1;

	animation-iteration-count: 1;

}



/* Wobble Top */

@-webkit-keyframes wobble-top {

 16.65% {

 -webkit-transform: skew(-12deg);

 transform: skew(-12deg);

}

 33.3% {

 -webkit-transform: skew(10deg);

 transform: skew(10deg);

}

 49.95% {

 -webkit-transform: skew(-6deg);

 transform: skew(-6deg);

}

 66.6% {

 -webkit-transform: skew(4deg);

 transform: skew(4deg);

}

 83.25% {

 -webkit-transform: skew(-2deg);

 transform: skew(-2deg);

}

 100% {

 -webkit-transform: skew(0);

 transform: skew(0);

}

}

 @keyframes wobble-top {

 16.65% {

 -webkit-transform: skew(-12deg);

 transform: skew(-12deg);

}

 33.3% {

 -webkit-transform: skew(10deg);

 transform: skew(10deg);

}

 49.95% {

 -webkit-transform: skew(-6deg);

 transform: skew(-6deg);

}

 66.6% {

 -webkit-transform: skew(4deg);

 transform: skew(4deg);

}

 83.25% {

 -webkit-transform: skew(-2deg);

 transform: skew(-2deg);

}

 100% {

 -webkit-transform: skew(0);

 transform: skew(0);

}

}

.wobble-top {

	display: inline-block;

	-webkit-transform-origin: 0 100%;

	transform-origin: 0 100%;

	-webkit-transform: translateZ(0);

	transform: translateZ(0);

	box-shadow: 0 0 1px rgba(0, 0, 0, 0);

}

.wobble-top:hover, .wobble-top:focus, .wobble-top:active {

	-webkit-animation-name: wobble-top;

	animation-name: wobble-top;

	-webkit-animation-duration: 1s;

	animation-duration: 1s;

	-webkit-animation-timing-function: ease-in-out;

	animation-timing-function: ease-in-out;

	-webkit-animation-iteration-count: 1;

	animation-iteration-count: 1;

}



/* Wobble Bottom */

@-webkit-keyframes wobble-bottom {

 16.65% {

 -webkit-transform: skew(-12deg);

 transform: skew(-12deg);

}

 33.3% {

 -webkit-transform: skew(10deg);

 transform: skew(10deg);

}

 49.95% {

 -webkit-transform: skew(-6deg);

 transform: skew(-6deg);

}

 66.6% {

 -webkit-transform: skew(4deg);

 transform: skew(4deg);

}

 83.25% {

 -webkit-transform: skew(-2deg);

 transform: skew(-2deg);

}

 100% {

 -webkit-transform: skew(0);

 transform: skew(0);

}

}

 @keyframes wobble-bottom {

 16.65% {

 -webkit-transform: skew(-12deg);

 transform: skew(-12deg);

}

 33.3% {

 -webkit-transform: skew(10deg);

 transform: skew(10deg);

}

 49.95% {

 -webkit-transform: skew(-6deg);

 transform: skew(-6deg);

}

 66.6% {

 -webkit-transform: skew(4deg);

 transform: skew(4deg);

}

 83.25% {

 -webkit-transform: skew(-2deg);

 transform: skew(-2deg);

}

 100% {

 -webkit-transform: skew(0);

 transform: skew(0);

}

}

.wobble-bottom {

	display: inline-block;

	-webkit-transform-origin: 100% 0;

	transform-origin: 100% 0;

	-webkit-transform: translateZ(0);

	transform: translateZ(0);

	box-shadow: 0 0 1px rgba(0, 0, 0, 0);

}

.wobble-bottom:hover, .wobble-bottom:focus, .wobble-bottom:active {

	-webkit-animation-name: wobble-bottom;

	animation-name: wobble-bottom;

	-webkit-animation-duration: 1s;

	animation-duration: 1s;

	-webkit-animation-timing-function: ease-in-out;

	animation-timing-function: ease-in-out;

	-webkit-animation-iteration-count: 1;

	animation-iteration-count: 1;

}



/* Wobble Skew */

@-webkit-keyframes wobble-skew {

 16.65% {

 -webkit-transform: skew(-12deg);

 transform: skew(-12deg);

}

 33.3% {

 -webkit-transform: skew(10deg);

 transform: skew(10deg);

}

 49.95% {

 -webkit-transform: skew(-6deg);

 transform: skew(-6deg);

}

 66.6% {

 -webkit-transform: skew(4deg);

 transform: skew(4deg);

}

 83.25% {

 -webkit-transform: skew(-2deg);

 transform: skew(-2deg);

}

 100% {

 -webkit-transform: skew(0);

 transform: skew(0);

}

}

 @keyframes wobble-skew {

 16.65% {

 -webkit-transform: skew(-12deg);

 transform: skew(-12deg);

}

 33.3% {

 -webkit-transform: skew(10deg);

 transform: skew(10deg);

}

 49.95% {

 -webkit-transform: skew(-6deg);

 transform: skew(-6deg);

}

 66.6% {

 -webkit-transform: skew(4deg);

 transform: skew(4deg);

}

 83.25% {

 -webkit-transform: skew(-2deg);

 transform: skew(-2deg);

}

 100% {

 -webkit-transform: skew(0);

 transform: skew(0);

}

}

.wobble-skew {

	display: inline-block;

	-webkit-transform: translateZ(0);

	transform: translateZ(0);

	box-shadow: 0 0 1px rgba(0, 0, 0, 0);

}

.wobble-skew:hover, .wobble-skew:focus, .wobble-skew:active {

	-webkit-animation-name: wobble-skew;

	animation-name: wobble-skew;

	-webkit-animation-duration: 1s;

	animation-duration: 1s;

	-webkit-animation-timing-function: ease-in-out;

	animation-timing-function: ease-in-out;

	-webkit-animation-iteration-count: 1;

	animation-iteration-count: 1;

}



/* Buzz */

@-webkit-keyframes buzz {

 50% {

 -webkit-transform: translateX(3px) rotate(2deg);

 transform: translateX(3px) rotate(2deg);

}

 100% {

 -webkit-transform: translateX(-3px) rotate(-2deg);

 transform: translateX(-3px) rotate(-2deg);

}

}

 @keyframes buzz {

 50% {

 -webkit-transform: translateX(3px) rotate(2deg);

 transform: translateX(3px) rotate(2deg);

}

 100% {

 -webkit-transform: translateX(-3px) rotate(-2deg);

 transform: translateX(-3px) rotate(-2deg);

}

}

.buzz {

	display: inline-block;

	-webkit-transform: translateZ(0);

	transform: translateZ(0);

	box-shadow: 0 0 1px rgba(0, 0, 0, 0);

}

.buzz:hover, .buzz:focus, .buzz:active {

	-webkit-animation-name: buzz;

	animation-name: buzz;

	-webkit-animation-duration: 0.15s;

	animation-duration: 0.15s;

	-webkit-animation-timing-function: linear;

	animation-timing-function: linear;

	-webkit-animation-iteration-count: infinite;

	animation-iteration-count: infinite;

}



/* Buzz Out */

@-webkit-keyframes buzz-out {

 10% {

 -webkit-transform: translateX(3px) rotate(2deg);

 transform: translateX(3px) rotate(2deg);

}

 20% {

 -webkit-transform: translateX(-3px) rotate(-2deg);

 transform: translateX(-3px) rotate(-2deg);

}

 30% {

 -webkit-transform: translateX(3px) rotate(2deg);

 transform: translateX(3px) rotate(2deg);

}

 40% {

 -webkit-transform: translateX(-3px) rotate(-2deg);

 transform: translateX(-3px) rotate(-2deg);

}

 50% {

 -webkit-transform: translateX(2px) rotate(1deg);

 transform: translateX(2px) rotate(1deg);

}

 60% {

 -webkit-transform: translateX(-2px) rotate(-1deg);

 transform: translateX(-2px) rotate(-1deg);

}

 70% {

 -webkit-transform: translateX(2px) rotate(1deg);

 transform: translateX(2px) rotate(1deg);

}

 80% {

 -webkit-transform: translateX(-2px) rotate(-1deg);

 transform: translateX(-2px) rotate(-1deg);

}

 90% {

 -webkit-transform: translateX(1px) rotate(0);

 transform: translateX(1px) rotate(0);

}

 100% {

 -webkit-transform: translateX(-1px) rotate(0);

 transform: translateX(-1px) rotate(0);

}

}

 @keyframes buzz-out {

 10% {

 -webkit-transform: translateX(3px) rotate(2deg);

 transform: translateX(3px) rotate(2deg);

}

 20% {

 -webkit-transform: translateX(-3px) rotate(-2deg);

 transform: translateX(-3px) rotate(-2deg);

}

 30% {

 -webkit-transform: translateX(3px) rotate(2deg);

 transform: translateX(3px) rotate(2deg);

}

 40% {

 -webkit-transform: translateX(-3px) rotate(-2deg);

 transform: translateX(-3px) rotate(-2deg);

}

 50% {

 -webkit-transform: translateX(2px) rotate(1deg);

 transform: translateX(2px) rotate(1deg);

}

 60% {

 -webkit-transform: translateX(-2px) rotate(-1deg);

 transform: translateX(-2px) rotate(-1deg);

}

 70% {

 -webkit-transform: translateX(2px) rotate(1deg);

 transform: translateX(2px) rotate(1deg);

}

 80% {

 -webkit-transform: translateX(-2px) rotate(-1deg);

 transform: translateX(-2px) rotate(-1deg);

}

 90% {

 -webkit-transform: translateX(1px) rotate(0);

 transform: translateX(1px) rotate(0);

}

 100% {

 -webkit-transform: translateX(-1px) rotate(0);

 transform: translateX(-1px) rotate(0);

}

}

.buzz-out {

	display: inline-block;

	-webkit-transform: translateZ(0);

	transform: translateZ(0);

	box-shadow: 0 0 1px rgba(0, 0, 0, 0);

}

.buzz-out:hover, .buzz-out:focus, .buzz-out:active {

	-webkit-animation-name: buzz-out;

	animation-name: buzz-out;

	-webkit-animation-duration: 0.75s;

	animation-duration: 0.75s;

	-webkit-animation-timing-function: linear;

	animation-timing-function: linear;

	-webkit-animation-iteration-count: 1;

	animation-iteration-count: 1;

}

/* BORDER TRANSITIONS */

/* Border Fade */

.border-fade {

	display: inline-block;

	-webkit-transition-duration: 0.3s;

	transition-duration: 0.3s;

	-webkit-transition-property: box-shadow;

	transition-property: box-shadow;

	-webkit-transform: translateZ(0);

	transform: translateZ(0);

	box-shadow: inset 0 0 0 4px #e1e1e1, 0 0 1px rgba(0, 0, 0, 0);/* Hack to improve aliasing on mobile/tablet devices */

}

.border-fade:hover, .border-fade:focus, .border-fade:active {

	box-shadow: inset 0 0 0 4px #666666, 0 0 1px rgba(0, 0, 0, 0);/* Hack to improve aliasing on mobile/tablet devices */

}

/* Hollow */

.hollow {

	display: inline-block;

	-webkit-transition-duration: 0.3s;

	transition-duration: 0.3s;

	-webkit-transition-property: background;

	transition-property: background;

	-webkit-transform: translateZ(0);

	transform: translateZ(0);

	box-shadow: inset 0 0 0 4px #e1e1e1, 0 0 1px rgba(0, 0, 0, 0);/* Hack to improve aliasing on mobile/tablet devices */

}

.hollow:hover, .hollow:focus, .hollow:active {

	background: none;

}

/* Trim */

.trim {

	display: inline-block;

	position: relative;

	-webkit-transform: translateZ(0);

	transform: translateZ(0);

	box-shadow: 0 0 1px rgba(0, 0, 0, 0);

}

.trim:before {

	content: '';

	position: absolute;

	border: white solid 4px;

	top: 4px;

	left: 4px;

	right: 4px;

	bottom: 4px;

	opacity: 0;

	-webkit-transition-duration: 0.3s;

	transition-duration: 0.3s;

	-webkit-transition-property: opacity;

	transition-property: opacity;

}

.trim:hover:before, .trim:focus:before, .trim:active:before {

	opacity: 1;

}

/* Outline Outward */

.outline-outward {

	display: inline-block;

	position: relative;

	-webkit-transform: translateZ(0);

	transform: translateZ(0);

	box-shadow: 0 0 1px rgba(0, 0, 0, 0);

}

.outline-outward:before {

	content: '';

	position: absolute;

	border: #e1e1e1 solid 4px;

	top: 0;

	right: 0;

	bottom: 0;

	left: 0;

	-webkit-transition-duration: 0.3s;

	transition-duration: 0.3s;

	-webkit-transition-property: top, right, bottom, left;

	transition-property: top, right, bottom, left;

}

.outline-outward:hover:before, .outline-outward:focus:before, .outline-outward:active:before {

	top: -8px;

	right: -8px;

	bottom: -8px;

	left: -8px;

}

/* Outline Inward */

.outline-inward {

	display: inline-block;

	position: relative;

	-webkit-transform: translateZ(0);

	transform: translateZ(0);

	box-shadow: 0 0 1px rgba(0, 0, 0, 0);

}

.outline-inward:before {

	pointer-events: none;

	content: '';

	position: absolute;

	border: #e1e1e1 solid 4px;

	top: -16px;

	right: -16px;

	bottom: -16px;

	left: -16px;

	opacity: 0;

	-webkit-transition-duration: 0.3s;

	transition-duration: 0.3s;

	-webkit-transition-property: top, right, bottom, left;

	transition-property: top, right, bottom, left;

}

.outline-inward:hover:before, .outline-inward:focus:before, .outline-inward:active:before {

	top: -8px;

	right: -8px;

	bottom: -8px;

	left: -8px;

	opacity: 1;

}

/* Round Corners */

.round-corners {

	display: inline-block;

	-webkit-transition-duration: 0.3s;

	transition-duration: 0.3s;

	-webkit-transition-property: border-radius;

	transition-property: border-radius;

	-webkit-transform: translateZ(0);

	transform: translateZ(0);

	box-shadow: 0 0 1px rgba(0, 0, 0, 0);

}

.round-corners:hover, .round-corners:focus, .round-corners:active {

	border-radius: 1em;

}

/* SHADOW/GLOW TRANSITIONS */

/* Glow */

.glow {

	display: inline-block;

	-webkit-transition-duration: 0.3s;

	transition-duration: 0.3s;

	-webkit-transition-property: box-shadow;

	transition-property: box-shadow;

	-webkit-transform: translateZ(0);

	transform: translateZ(0);

	box-shadow: 0 0 1px rgba(0, 0, 0, 0);

}

.glow:hover, .glow:focus, .glow:active {

	box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);

}

/* Box Shadow Outset */

.box-shadow-outset {

	display: inline-block;

	-webkit-transition-duration: 0.3s;

	transition-duration: 0.3s;

	-webkit-transition-property: box-shadow;

	transition-property: box-shadow;

	-webkit-transform: translateZ(0);

	transform: translateZ(0);

	box-shadow: 0 0 1px rgba(0, 0, 0, 0);

}

.box-shadow-outset:hover, .box-shadow-outset:focus, .box-shadow-outset:active {

	box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.6);

}

/* Box Shadow Inset */

.box-shadow-inset {

	display: inline-block;

	-webkit-transition-duration: 0.3s;

	transition-duration: 0.3s;

	-webkit-transition-property: box-shadow;

	transition-property: box-shadow;

	box-shadow: inset 0 0 0 rgba(0, 0, 0, 0.6), 0 0 1px rgba(0, 0, 0, 0);

	/* Hack to improve aliasing on mobile/tablet devices */

	-webkit-transform: translateZ(0);

	transform: translateZ(0);

}

.box-shadow-inset:hover, .box-shadow-inset:focus, .box-shadow-inset:active {

	box-shadow: inset 2px 2px 2px rgba(0, 0, 0, 0.6), 0 0 1px rgba(0, 0, 0, 0);/* Hack to improve aliasing on mobile/tablet devices */

}

/* Float Shadow */

.float-shadow {

	display: inline-block;

	position: relative;

	-webkit-transition-duration: 0.3s;

	transition-duration: 0.3s;

	-webkit-transition-property: transform;

	transition-property: transform;

	-webkit-transform: translateZ(0);

	transform: translateZ(0);

	box-shadow: 0 0 1px rgba(0, 0, 0, 0);

}

.float-shadow:before {

	pointer-events: none;

	position: absolute;

	z-index: -1;

	content: '';

	top: 100%;

	left: 5%;

	height: 10px;

	width: 90%;

	opacity: 0;

	background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 80%);

	/* W3C */

	-webkit-transition-duration: 0.3s;

	transition-duration: 0.3s;

	-webkit-transition-property: transform, opacity;

	transition-property: transform, opacity;

}

.float-shadow:hover, .float-shadow:focus, .float-shadow:active {

	-webkit-transform: translateY(-5px);

	transform: translateY(-5px);/* move the element up by 5px */

}

.float-shadow:hover:before, .float-shadow:focus:before, .float-shadow:active:before {

	opacity: 1;

	-webkit-transform: translateY(5px);

	transform: translateY(5px);/* move the element down by 5px (it will stay in place because it's attached to the element that also moves up 5px) */

}



/* Hover Shadow */

@-webkit-keyframes hover {

 50% {

 -webkit-transform: translateY(-3px);

 transform: translateY(-3px);

}

 100% {

 -webkit-transform: translateY(-6px);

 transform: translateY(-6px);

}

}

 @keyframes hover {

 50% {

 -webkit-transform: translateY(-3px);

 transform: translateY(-3px);

}

 100% {

 -webkit-transform: translateY(-6px);

 transform: translateY(-6px);

}

}

 @-webkit-keyframes hover-shadow {

 0% {

 -webkit-transform: translateY(6px);

 transform: translateY(6px);

 opacity: .4;

}

 50% {

 -webkit-transform: translateY(3px);

 transform: translateY(3px);

 opacity: 1;

}

 100% {

 -webkit-transform: translateY(6px);

 transform: translateY(6px);

 opacity: .4;

}

}

 @keyframes hover-shadow {

 0% {

 -webkit-transform: translateY(6px);

 transform: translateY(6px);

 opacity: .4;

}

 50% {

 -webkit-transform: translateY(3px);

 transform: translateY(3px);

 opacity: 1;

}

 100% {

 -webkit-transform: translateY(6px);

 transform: translateY(6px);

 opacity: .4;

}

}

.hover-shadow {

	display: inline-block;

	position: relative;

	-webkit-transition-duration: 0.3s;

	transition-duration: 0.3s;

	-webkit-transition-property: transform;

	transition-property: transform;

	-webkit-transform: translateZ(0);

	transform: translateZ(0);

	box-shadow: 0 0 1px rgba(0, 0, 0, 0);

}

.hover-shadow:before {

	pointer-events: none;

	position: absolute;

	z-index: -1;

	content: '';

	top: 100%;

	left: 5%;

	height: 10px;

	width: 90%;

	opacity: 0;

	background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 80%);

	/* W3C */

	-webkit-transition-duration: 0.3s;

	transition-duration: 0.3s;

	-webkit-transition-property: transform, opacity;

	transition-property: transform, opacity;

}

.hover-shadow:hover, .hover-shadow:focus, .hover-shadow:active {

	-webkit-transform: translateY(-6px);

	transform: translateY(-6px);

	-webkit-animation-name: hover;

	animation-name: hover;

	-webkit-animation-duration: 1.5s;

	animation-duration: 1.5s;

	-webkit-animation-delay: 0.3s;

	animation-delay: 0.3s;

	-webkit-animation-timing-function: linear;

	animation-timing-function: linear;

	-webkit-animation-iteration-count: infinite;

	animation-iteration-count: infinite;

	-webkit-animation-direction: alternate;

	animation-direction: alternate;

}

.hover-shadow:hover:before, .hover-shadow:focus:before, .hover-shadow:active:before {

	opacity: .4;

	-webkit-transform: translateY(6px);

	transform: translateY(6px);

	-webkit-animation-name: hover-shadow;

	animation-name: hover-shadow;

	-webkit-animation-duration: 1.5s;

	animation-duration: 1.5s;

	-webkit-animation-delay: 0.3s;

	animation-delay: 0.3s;

	-webkit-animation-timing-function: linear;

	animation-timing-function: linear;

	-webkit-animation-iteration-count: infinite;

	animation-iteration-count: infinite;

	-webkit-animation-direction: alternate;

	animation-direction: alternate;

}

/* Shadow Radial */

.shadow-radial {

	display: inline-block;

	position: relative;

	-webkit-transform: translateZ(0);

	transform: translateZ(0);

	box-shadow: 0 0 1px rgba(0, 0, 0, 0);

}

.shadow-radial:before, .shadow-radial:after {

	pointer-events: none;

	position: absolute;

	content: '';

	left: 0;

	width: 100%;

	box-sizing: border-box;

	background-repeat: no-repeat;

	height: 5px;

	opacity: 0;

	-webkit-transition-duration: 0.3s;

	transition-duration: 0.3s;

	-webkit-transition-property: opacity;

	transition-property: opacity;

}

.shadow-radial:before {

	bottom: 100%;

	background: radial-gradient(ellipse at 50% 150%, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 80%);

}

.shadow-radial:after {

	top: 100%;

	background: radial-gradient(ellipse at 50% -50%, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 80%);

}

.shadow-radial:hover:before, .shadow-radial:focus:before, .shadow-radial:active:before, .shadow-radial:hover:after, .shadow-radial:focus:after, .shadow-radial:active:after {

	opacity: 1;

}

/* SPEECH BUBBLES */

/* Bubble Top */

.bubble-top {

	display: inline-block;

	position: relative;

	-webkit-transform: translateZ(0);

	transform: translateZ(0);

	box-shadow: 0 0 1px rgba(0, 0, 0, 0);

}

.bubble-top:before {

	pointer-events: none;

	position: absolute;

	z-index: -1;

	content: '';

	border-style: solid;

	-webkit-transition-duration: 0.3s;

	transition-duration: 0.3s;

	-webkit-transition-property: top;

	transition-property: top;

	left: calc(50% - 10px);

	top: 0;

	border-width: 0 10px 10px 10px;

	border-color: transparent transparent #e1e1e1 transparent;

}

.bubble-top:hover:before, .bubble-top:focus:before, .bubble-top:active:before {

	top: -10px;

}

/* Bubble Right */

.bubble-right {

	display: inline-block;

	position: relative;

	-webkit-transform: translateZ(0);

	transform: translateZ(0);

	box-shadow: 0 0 1px rgba(0, 0, 0, 0);

}

.bubble-right:before {

	pointer-events: none;

	position: absolute;

	z-index: -1;

	content: '';

	border-style: solid;

	-webkit-transition-duration: 0.3s;

	transition-duration: 0.3s;

	-webkit-transition-property: right;

	transition-property: right;

	top: calc(50% - 10px);

	right: 0;

	border-width: 10px 0 10px 10px;

	border-color: transparent transparent transparent #e1e1e1;

}

.bubble-right:hover:before, .bubble-right:focus:before, .bubble-right:active:before {

	right: -10px;

}

/* Bubble Bottom */

.bubble-bottom {

	display: inline-block;

	position: relative;

	-webkit-transform: translateZ(0);

	transform: translateZ(0);

	box-shadow: 0 0 1px rgba(0, 0, 0, 0);

}

.bubble-bottom:before {

	pointer-events: none;

	position: absolute;

	z-index: -1;

	content: '';

	border-style: solid;

	-webkit-transition-duration: 0.3s;

	transition-duration: 0.3s;

	-webkit-transition-property: bottom;

	transition-property: bottom;

	left: calc(50% - 10px);

	bottom: 0;

	border-width: 10px 10px 0 10px;

	border-color: #e1e1e1 transparent transparent transparent;

}

.bubble-bottom:hover:before, .bubble-bottom:focus:before, .bubble-bottom:active:before {

	bottom: -10px;

}

/* Bubble Left */

.bubble-left {

	display: inline-block;

	position: relative;

	-webkit-transform: translateZ(0);

	transform: translateZ(0);

	box-shadow: 0 0 1px rgba(0, 0, 0, 0);

}

.bubble-left:before {

	pointer-events: none;

	position: absolute;

	z-index: -1;

	content: '';

	border-style: solid;

	-webkit-transition-duration: 0.3s;

	transition-duration: 0.3s;

	-webkit-transition-property: left;

	transition-property: left;

	top: calc(50% - 10px);

	left: 0;

	border-width: 10px 10px 10px 0;

	border-color: transparent #e1e1e1 transparent transparent;

}

.bubble-left:hover:before, .bubble-left:focus:before, .bubble-left:active:before {

	left: -10px;

}

/* Bubble Float Top */

.bubble-float-top {

	display: inline-block;

	position: relative;

	-webkit-transition-duration: 0.3s;

	transition-duration: 0.3s;

	-webkit-transition-property: transform;

	transition-property: transform;

	-webkit-transform: translateZ(0);

	transform: translateZ(0);

	box-shadow: 0 0 1px rgba(0, 0, 0, 0);

}

.bubble-float-top:before {

	position: absolute;

	z-index: -1;

	content: '';

	left: calc(50% - 10px);

	top: 0;

	border-style: solid;

	border-width: 0 10px 10px 10px;

	border-color: transparent transparent #e1e1e1 transparent;

	-webkit-transition-duration: 0.3s;

	transition-duration: 0.3s;

	-webkit-transition-property: top;

	transition-property: top;

}

.bubble-float-top:hover, .bubble-float-top:focus, .bubble-float-top:active {

	-webkit-transform: translateY(5px) translateZ(0);

	transform: translateY(5px) translateZ(0);

}

.bubble-float-top:hover:before, .bubble-float-top:focus:before, .bubble-float-top:active:before {

	top: -10px;

}

/* Bubble Float Right */

.bubble-float-right {

	display: inline-block;

	position: relative;

	-webkit-transition-duration: 0.3s;

	transition-duration: 0.3s;

	-webkit-transition-property: transform;

	transition-property: transform;

	-webkit-transform: translateZ(0);

	transform: translateZ(0);

	box-shadow: 0 0 1px rgba(0, 0, 0, 0);

}

.bubble-float-right:before {

	position: absolute;

	z-index: -1;

	top: calc(50% - 10px);

	right: 0;

	content: '';

	border-style: solid;

	border-width: 10px 0 10px 10px;

	border-color: transparent transparent transparent #e1e1e1;

	-webkit-transition-duration: 0.3s;

	transition-duration: 0.3s;

	-webkit-transition-property: right;

	transition-property: right;

}

.bubble-float-right:hover, .bubble-float-right:focus, .bubble-float-right:active {

	-webkit-transform: translateX(-5px);

	transform: translateX(-5px);

}

.bubble-float-right:hover:before, .bubble-float-right:focus:before, .bubble-float-right:active:before {

	right: -10px;

}

/* Bubble Float Bottom */

.bubble-float-bottom {

	display: inline-block;

	position: relative;

	-webkit-transition-duration: 0.3s;

	transition-duration: 0.3s;

	-webkit-transition-property: transform;

	transition-property: transform;

	-webkit-transform: translateZ(0);

	transform: translateZ(0);

	box-shadow: 0 0 1px rgba(0, 0, 0, 0);

}

.bubble-float-bottom:before {

	position: absolute;

	z-index: -1;

	content: '';

	left: calc(50% - 10px);

	bottom: 0;

	border-style: solid;

	border-width: 10px 10px 0 10px;

	border-color: #e1e1e1 transparent transparent transparent;

	-webkit-transition-duration: 0.3s;

	transition-duration: 0.3s;

	-webkit-transition-property: bottom;

	transition-property: bottom;

}

.bubble-float-bottom:hover, .bubble-float-bottom:focus, .bubble-float-bottom:active {

	-webkit-transform: translateY(-5px) translateZ(0);

	transform: translateY(-5px) translateZ(0);

}

.bubble-float-bottom:hover:before, .bubble-float-bottom:focus:before, .bubble-float-bottom:active:before {

	bottom: -10px;

}

/* Bubble Float Left */

.bubble-float-left {

	display: inline-block;

	position: relative;

	-webkit-transition-duration: 0.3s;

	transition-duration: 0.3s;

	-webkit-transition-property: transform;

	transition-property: transform;

	-webkit-transform: translateZ(0);

	transform: translateZ(0);

	box-shadow: 0 0 1px rgba(0, 0, 0, 0);

}

.bubble-float-left:before {

	position: absolute;

	z-index: -1;

	content: '';

	top: calc(50% - 10px);

	left: 0;

	border-style: solid;

	border-width: 10px 10px 10px 0;

	border-color: transparent #e1e1e1 transparent transparent;

	-webkit-transition-duration: 0.3s;

	transition-duration: 0.3s;

	-webkit-transition-property: left;

	transition-property: left;

}

.bubble-float-left:hover, .bubble-float-left:focus, .bubble-float-left:active {

	-webkit-transform: translateX(5px);

	transform: translateX(5px);

}

.bubble-float-left:hover:before, .bubble-float-left:focus:before, .bubble-float-left:active:before {

	left: -10px;

}

/* CURLS */

/* Curl Top Left */

.curl-top-left {

	display: inline-block;

	position: relative;

	-webkit-transform: translateZ(0);

	transform: translateZ(0);

	box-shadow: 0 0 1px rgba(0, 0, 0, 0);

}

.curl-top-left:before {

	pointer-events: none;

	position: absolute;

	content: '';

	height: 0;

	width: 0;

	top: 0;

	left: 0;

	background: white;

	/* IE9 */

	background: linear-gradient(135deg, white 45%, #aaaaaa 50%, #cccccc 56%, white 80%);

 filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#ffffff', endColorstr='#000000');

	/*For IE7-8-9*/

	z-index: 1000;

	box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4);

	-webkit-transition-duration: 0.3s;

	transition-duration: 0.3s;

	-webkit-transition-property: width, height;

	transition-property: width, height;

}

.curl-top-left:hover:before, .curl-top-left:focus:before, .curl-top-left:active:before {

	width: 25px;

	height: 25px;

}

/* Curl Top Right */

.curl-top-right {

	display: inline-block;

	position: relative;

	-webkit-transform: translateZ(0);

	transform: translateZ(0);

	box-shadow: 0 0 1px rgba(0, 0, 0, 0);

}

.curl-top-right:before {

	pointer-events: none;

	position: absolute;

	content: '';

	height: 0;

	width: 0;

	top: 0;

	right: 0;

	background: white;

	/* IE9 */

	background: linear-gradient(225deg, white 45%, #aaaaaa 50%, #cccccc 56%, white 80%);

	box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.4);

	-webkit-transition-duration: 0.3s;

	transition-duration: 0.3s;

	-webkit-transition-property: width, height;

	transition-property: width, height;

}

.curl-top-right:hover:before, .curl-top-right:focus:before, .curl-top-right:active:before {

	width: 25px;

	height: 25px;

}

/* Curl Bottom Right */

.curl-bottom-right {

	display: inline-block;

	position: relative;

	-webkit-transform: translateZ(0);

	transform: translateZ(0);

	box-shadow: 0 0 1px rgba(0, 0, 0, 0);

}

.curl-bottom-right:before {

	pointer-events: none;

	position: absolute;

	content: '';

	height: 0;

	width: 0;

	bottom: 0;

	right: 0;

	background: white;

	/* IE9 */

	background: linear-gradient(315deg, white 45%, #aaaaaa 50%, #cccccc 56%, white 80%);

	box-shadow: -1px -1px 1px rgba(0, 0, 0, 0.4);

	-webkit-transition-duration: 0.3s;

	transition-duration: 0.3s;

	-webkit-transition-property: width, height;

	transition-property: width, height;

}

.curl-bottom-right:hover:before, .curl-bottom-right:focus:before, .curl-bottom-right:active:before {

	width: 25px;

	height: 25px;

}

/* Curl Bottom Left */

.curl-bottom-left {

	display: inline-block;

	position: relative;

	-webkit-transform: translateZ(0);

	transform: translateZ(0);

	box-shadow: 0 0 1px rgba(0, 0, 0, 0);

}

.curl-bottom-left:before {

	pointer-events: none;

	position: absolute;

	content: '';

	height: 0;

	width: 0;

	bottom: 0;

	left: 0;

	background: white;

	/* IE9 */

	background: linear-gradient(45deg, white 45%, #aaaaaa 50%, #cccccc 56%, white 80%);

	box-shadow: 1px -1px 1px rgba(0, 0, 0, 0.4);

	-webkit-transition-duration: 0.3s;

	transition-duration: 0.3s;

	-webkit-transition-property: width, height;

	transition-property: width, height;

}

.curl-bottom-left:hover:before, .curl-bottom-left:focus:before, .curl-bottom-left:active:before {

	width: 25px;

	height: 25px;

}

