.grow {
display:inline-block;
-webkit-transition-duration:.3s;
transition-duration:.3s;
-webkit-transition-property:transform;
transition-property:transform;
-webkit-transform:translateZ(0);
transform:translateZ(0);
box-shadow:0 0 1px transparent
}
.grow:hover, .grow:focus, .grow:active {
-webkit-transform:scale(1.1);
transform:scale(1.1)
}
.shrink {
display:inline-block;
-webkit-transition-duration:.3s;
transition-duration:.3s;
-webkit-transition-property:transform;
transition-property:transform;
-webkit-transform:translateZ(0);
transform:translateZ(0);
box-shadow:0 0 1px transparent
}
.shrink:hover, .shrink:focus, .shrink:active {
-webkit-transform:scale(.9);
transform:scale(.9)
}
@-webkit-keyframes pulse {
25% {
-webkit-transform:scale(1.1);
transform:scale(1.1)
}
75% {
-webkit-transform:scale(.9);
transform:scale(.9)
}
}
@keyframes pulse {
25% {
-webkit-transform:scale(1.1);
transform:scale(1.1)
}
75% {
-webkit-transform:scale(.9);
transform:scale(.9)
}
}
.pulse {
display:inline-block;
-webkit-transform:translateZ(0);
transform:translateZ(0);
box-shadow:0 0 1px transparent
}
.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
}
@-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 transparent
}
.pulse-grow:hover, .pulse-grow:focus, .pulse-grow:active {
-webkit-animation-name:pulse-grow;
animation-name:pulse-grow;
-webkit-animation-duration:.3s;
animation-duration:.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
}
@-webkit-keyframes pulse-shrink {
to {
-webkit-transform:scale(.9);
transform:scale(.9)
}
}
@keyframes pulse-shrink {
to {
-webkit-transform:scale(.9);
transform:scale(.9)
}
}
.pulse-shrink {
display:inline-block;
-webkit-transform:translateZ(0);
transform:translateZ(0);
box-shadow:0 0 1px transparent
}
.pulse-shrink:hover, .pulse-shrink:focus, .pulse-shrink:active {
-webkit-animation-name:pulse-shrink;
animation-name:pulse-shrink;
-webkit-animation-duration:.3s;
animation-duration:.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
}
@-webkit-keyframes push {
50% {
-webkit-transform:scale(.8);
transform:scale(.8)
}
100% {
-webkit-transform:scale(1);
transform:scale(1)
}
}
@keyframes push {
50% {
-webkit-transform:scale(.8);
transform:scale(.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 transparent
}
.push:hover, .push:focus, .push:active {
-webkit-animation-name:push;
animation-name:push;
-webkit-animation-duration:.3s;
animation-duration:.3s;
-webkit-animation-timing-function:linear;
animation-timing-function:linear;
-webkit-animation-iteration-count:1;
animation-iteration-count:1
}
@-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 transparent
}
.pop:hover, .pop:focus, .pop:active {
-webkit-animation-name:pop;
animation-name:pop;
-webkit-animation-duration:.3s;
animation-duration:.3s;
-webkit-animation-timing-function:linear;
animation-timing-function:linear;
-webkit-animation-iteration-count:1;
animation-iteration-count:1
}
.rotate {
display:inline-block;
-webkit-transition-duration:.3s;
transition-duration:.3s;
-webkit-transition-property:transform;
transition-property:transform;
-webkit-transform:translateZ(0);
transform:translateZ(0);
box-shadow:0 0 1px transparent
}
.rotate:hover, .rotate:focus, .rotate:active {
-webkit-transform:rotate(15deg);
transform:rotate(15deg)
}
.grow-rotate {
display:inline-block;
-webkit-transition-duration:.3s;
transition-duration:.3s;
-webkit-transition-property:transform;
transition-property:transform;
-webkit-transform:translateZ(0);
transform:translateZ(0);
box-shadow:0 0 1px transparent
}
.grow-rotate:hover, .grow-rotate:focus, .grow-rotate:active {
-webkit-transform:scale(1.04) rotate(2deg);
transform:scale(1.04) rotate(2deg)
}
.float {
display:inline-block;
-webkit-transition-duration:.3s;
transition-duration:.3s;
-webkit-transition-property:transform;
transition-property:transform;
-webkit-transform:translateZ(0);
transform:translateZ(0);
box-shadow:0 0 1px transparent
}
.float:hover, .float:focus, .float:active {
-webkit-transform:translateY(-5px);
transform:translateY(-5px)
}
.sink {
display:inline-block;
-webkit-transition-duration:.3s;
transition-duration:.3s;
-webkit-transition-property:transform;
transition-property:transform;
-webkit-transform:translateZ(0);
transform:translateZ(0);
box-shadow:0 0 1px transparent
}
.sink:hover, .sink:focus, .sink:active {
-webkit-transform:translateY(5px);
transform:translateY(5px)
}
@-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:.5s;
transition-duration:.5s;
-webkit-transition-property:transform;
transition-property:transform;
-webkit-transform:translateZ(0);
transform:translateZ(0);
box-shadow:0 0 1px transparent
}
.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:.3s;
animation-delay:.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
}
@-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:.5s;
transition-duration:.5s;
-webkit-transition-property:transform;
transition-property:transform;
-webkit-transform:translateZ(0);
transform:translateZ(0);
box-shadow:0 0 1px transparent
}
.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:.3s;
animation-delay:.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 {
display:inline-block;
-webkit-transition-duration:.3s;
transition-duration:.3s;
-webkit-transition-property:transform;
transition-property:transform;
-webkit-transform:translateZ(0);
transform:translateZ(0);
box-shadow:0 0 1px transparent
}
.skew:hover, .skew:focus, .skew:active {
-webkit-transform:skew(-10deg);
transform:skew(-10deg)
}
.skew-forward {
display:inline-block;
-webkit-transition-duration:.3s;
transition-duration:.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 transparent
}
.skew-forward:hover, .skew-forward:focus, .skew-forward:active {
-webkit-transform:skew(-10deg);
transform:skew(-10deg)
}
.skew-backward {
display:inline-block;
-webkit-transition-duration:.3s;
transition-duration:.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 transparent
}
.skew-backward:hover, .skew-backward:focus, .skew-backward:active {
-webkit-transform:skew(10deg);
transform:skew(10deg)
}
@-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 transparent
}
.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
}
@-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 transparent
}
.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
}
@-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 transparent
}
.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
}
@-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 transparent
}
.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
}
@-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 transparent
}
.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
}
@-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 transparent
}
.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
}
@-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 transparent
}
.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
}
@-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 transparent
}
.buzz:hover, .buzz:focus, .buzz:active {
-webkit-animation-name:buzz;
animation-name:buzz;
-webkit-animation-duration:.15s;
animation-duration:.15s;
-webkit-animation-timing-function:linear;
animation-timing-function:linear;
-webkit-animation-iteration-count:infinite;
animation-iteration-count:infinite
}
@-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 transparent
}
.buzz-out:hover, .buzz-out:focus, .buzz-out:active {
-webkit-animation-name:buzz-out;
animation-name:buzz-out;
-webkit-animation-duration:.75s;
animation-duration:.75s;
-webkit-animation-timing-function:linear;
animation-timing-function:linear;
-webkit-animation-iteration-count:1;
animation-iteration-count:1
}
.border-fade {
display:inline-block;
-webkit-transition-duration:.3s;
transition-duration:.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 transparent
}
.border-fade:hover, .border-fade:focus, .border-fade:active {
box-shadow:inset 0 0 0 4px #666, 0 0 1px transparent
}
.hollow {
display:inline-block;
-webkit-transition-duration:.3s;
transition-duration:.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 transparent
}
.hollow:hover, .hollow:focus, .hollow:active {
background:0 0
}
.trim {
display:inline-block;
position:relative;
-webkit-transform:translateZ(0);
transform:translateZ(0);
box-shadow:0 0 1px transparent
}
.trim:before {
content:'';
position:absolute;
border:#fff solid 4px;
top:4px;
left:4px;
right:4px;
bottom:4px;
opacity:0;
-webkit-transition-duration:.3s;
transition-duration:.3s;
-webkit-transition-property:opacity;
transition-property:opacity
}
.trim:hover:before, .trim:focus:before, .trim:active:before {
opacity:1
}
.outline-outward {
display:inline-block;
position:relative;
-webkit-transform:translateZ(0);
transform:translateZ(0);
box-shadow:0 0 1px transparent
}
.outline-outward:before {
content:'';
position:absolute;
border:#e1e1e1 solid 4px;
top:0;
right:0;
bottom:0;
left:0;
-webkit-transition-duration:.3s;
transition-duration:.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 {
display:inline-block;
position:relative;
-webkit-transform:translateZ(0);
transform:translateZ(0);
box-shadow:0 0 1px transparent
}
.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:.3s;
transition-duration:.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 {
display:inline-block;
-webkit-transition-duration:.3s;
transition-duration:.3s;
-webkit-transition-property:border-radius;
transition-property:border-radius;
-webkit-transform:translateZ(0);
transform:translateZ(0);
box-shadow:0 0 1px transparent
}
.round-corners:hover, .round-corners:focus, .round-corners:active {
border-radius:1em
}
.glow {
display:inline-block;
-webkit-transition-duration:.3s;
transition-duration:.3s;
-webkit-transition-property:box-shadow;
transition-property:box-shadow;
-webkit-transform:translateZ(0);
transform:translateZ(0);
box-shadow:0 0 1px transparent
}
.glow:hover, .glow:focus, .glow:active {
box-shadow:0 0 8px rgba(0, 0, 0, .6)
}
.box-shadow-outset {
display:inline-block;
-webkit-transition-duration:.3s;
transition-duration:.3s;
-webkit-transition-property:box-shadow;
transition-property:box-shadow;
-webkit-transform:translateZ(0);
transform:translateZ(0);
box-shadow:0 0 1px transparent
}
.box-shadow-outset:hover, .box-shadow-outset:focus, .box-shadow-outset:active {
box-shadow:2px 2px 2px rgba(0, 0, 0, .6)
}
.box-shadow-inset {
display:inline-block;
-webkit-transition-duration:.3s;
transition-duration:.3s;
-webkit-transition-property:box-shadow;
transition-property:box-shadow;
box-shadow:inset 0 0 0 rgba(0, 0, 0, .6), 0 0 1px transparent;
-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, .6), 0 0 1px transparent
}
.float-shadow {
display:inline-block;
position:relative;
-webkit-transition-duration:.3s;
transition-duration:.3s;
-webkit-transition-property:transform;
transition-property:transform;
-webkit-transform:translateZ(0);
transform:translateZ(0);
box-shadow:0 0 1px transparent
}
.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%);
-webkit-transition-duration:.3s;
transition-duration:.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)
}
.float-shadow:hover:before, .float-shadow:focus:before, .float-shadow:active:before {
opacity:1;
-webkit-transform:translateY(5px);
transform:translateY(5px)
}
@-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:.3s;
transition-duration:.3s;
-webkit-transition-property:transform;
transition-property:transform;
-webkit-transform:translateZ(0);
transform:translateZ(0);
box-shadow:0 0 1px transparent
}
.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%);
-webkit-transition-duration:.3s;
transition-duration:.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:.3s;
animation-delay:.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:.3s;
animation-delay:.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 {
display:inline-block;
position:relative;
-webkit-transform:translateZ(0);
transform:translateZ(0);
box-shadow:0 0 1px transparent
}
.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:.3s;
transition-duration:.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
}
.bubble-top {
display:inline-block;
position:relative;
-webkit-transform:translateZ(0);
transform:translateZ(0);
box-shadow:0 0 1px transparent
}
.bubble-top:before {
pointer-events:none;
position:absolute;
z-index:-1;
content:'';
border-style:solid;
-webkit-transition-duration:.3s;
transition-duration:.3s;
-webkit-transition-property:top;
transition-property:top;
left:calc(50% - 10px);
top:0;
border-width:0 10px 10px;
border-color:transparent transparent #e1e1e1 transparent
}
.bubble-top:hover:before, .bubble-top:focus:before, .bubble-top:active:before {
top:-10px
}
.bubble-right {
display:inline-block;
position:relative;
-webkit-transform:translateZ(0);
transform:translateZ(0);
box-shadow:0 0 1px transparent
}
.bubble-right:before {
pointer-events:none;
position:absolute;
z-index:-1;
content:'';
border-style:solid;
-webkit-transition-duration:.3s;
transition-duration:.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 {
display:inline-block;
position:relative;
-webkit-transform:translateZ(0);
transform:translateZ(0);
box-shadow:0 0 1px transparent
}
.bubble-bottom:before {
pointer-events:none;
position:absolute;
z-index:-1;
content:'';
border-style:solid;
-webkit-transition-duration:.3s;
transition-duration:.3s;
-webkit-transition-property:bottom;
transition-property:bottom;
left:calc(50% - 10px);
bottom:0;
border-width:10px 10px 0;
border-color:#e1e1e1 transparent transparent transparent
}
.bubble-bottom:hover:before, .bubble-bottom:focus:before, .bubble-bottom:active:before {
bottom:-10px
}
.bubble-left {
display:inline-block;
position:relative;
-webkit-transform:translateZ(0);
transform:translateZ(0);
box-shadow:0 0 1px transparent
}
.bubble-left:before {
pointer-events:none;
position:absolute;
z-index:-1;
content:'';
border-style:solid;
-webkit-transition-duration:.3s;
transition-duration:.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 {
display:inline-block;
position:relative;
-webkit-transition-duration:.3s;
transition-duration:.3s;
-webkit-transition-property:transform;
transition-property:transform;
-webkit-transform:translateZ(0);
transform:translateZ(0);
box-shadow:0 0 1px transparent
}
.bubble-float-top:before {
position:absolute;
z-index:-1;
content:'';
left:calc(50% - 10px);
top:0;
border-style:solid;
border-width:0 10px 10px;
border-color:transparent transparent #e1e1e1 transparent;
-webkit-transition-duration:.3s;
transition-duration:.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 {
display:inline-block;
position:relative;
-webkit-transition-duration:.3s;
transition-duration:.3s;
-webkit-transition-property:transform;
transition-property:transform;
-webkit-transform:translateZ(0);
transform:translateZ(0);
box-shadow:0 0 1px transparent
}
.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:.3s;
transition-duration:.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 {
display:inline-block;
position:relative;
-webkit-transition-duration:.3s;
transition-duration:.3s;
-webkit-transition-property:transform;
transition-property:transform;
-webkit-transform:translateZ(0);
transform:translateZ(0);
box-shadow:0 0 1px transparent
}
.bubble-float-bottom:before {
position:absolute;
z-index:-1;
content:'';
left:calc(50% - 10px);
bottom:0;
border-style:solid;
border-width:10px 10px 0;
border-color:#e1e1e1 transparent transparent transparent;
-webkit-transition-duration:.3s;
transition-duration:.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 {
display:inline-block;
position:relative;
-webkit-transition-duration:.3s;
transition-duration:.3s;
-webkit-transition-property:transform;
transition-property:transform;
-webkit-transform:translateZ(0);
transform:translateZ(0);
box-shadow:0 0 1px transparent
}
.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:.3s;
transition-duration:.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
}
.curl-top-left {
display:inline-block;
position:relative;
-webkit-transform:translateZ(0);
transform:translateZ(0);
box-shadow:0 0 1px transparent
}
.curl-top-left:before {
pointer-events:none;
position:absolute;
content:'';
height:0;
width:0;
top:0;
left:0;
background:#fff;
background:linear-gradient(135deg, white 45%, #aaaaaa 50%, #cccccc 56%, white 80%);
filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#ffffff', endColorstr='#000000');
z-index:1000;
box-shadow:1px 1px 1px rgba(0, 0, 0, .4);
-webkit-transition-duration:.3s;
transition-duration:.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 {
display:inline-block;
position:relative;
-webkit-transform:translateZ(0);
transform:translateZ(0);
box-shadow:0 0 1px transparent
}
.curl-top-right:before {
pointer-events:none;
position:absolute;
content:'';
height:0;
width:0;
top:0;
right:0;
background:#fff;
background:linear-gradient(225deg, white 45%, #aaaaaa 50%, #cccccc 56%, white 80%);
box-shadow:-1px 1px 1px rgba(0, 0, 0, .4);
-webkit-transition-duration:.3s;
transition-duration:.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 {
display:inline-block;
position:relative;
-webkit-transform:translateZ(0);
transform:translateZ(0);
box-shadow:0 0 1px transparent
}
.curl-bottom-right:before {
pointer-events:none;
position:absolute;
content:'';
height:0;
width:0;
bottom:0;
right:0;
background:#fff;
background:linear-gradient(315deg, white 45%, #aaaaaa 50%, #cccccc 56%, white 80%);
box-shadow:-1px -1px 1px rgba(0, 0, 0, .4);
-webkit-transition-duration:.3s;
transition-duration:.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 {
display:inline-block;
position:relative;
-webkit-transform:translateZ(0);
transform:translateZ(0);
box-shadow:0 0 1px transparent
}
.curl-bottom-left:before {
pointer-events:none;
position:absolute;
content:'';
height:0;
width:0;
bottom:0;
left:0;
background:#fff;
background:linear-gradient(45deg, white 45%, #aaaaaa 50%, #cccccc 56%, white 80%);
box-shadow:1px -1px 1px rgba(0, 0, 0, .4);
-webkit-transition-duration:.3s;
transition-duration:.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
}