//    Animate.css - http://daneden.me/animate
//    Licensed under the MIT license - http://opensource.org/licenses/MIT
//    Copyright (c) 2015 Daniel Eden

// Attention seekers
//=============================================
& when (@animate-bounce) {
    @-webkit-keyframes bounce {
        0%, 20%, 53%, 80%, 100% {
            .animation-timing-function(cubic-bezier(0.215, 0.610, 0.355, 1.000));
            .translate3d(0; 0; 0);
        }
        40%, 43% {
            .animation-timing-function(cubic-bezier(0.755, 0.050, 0.855, 0.060));
            .translate3d(0; -30px; 0);
        }
        70% {
            .animation-timing-function(cubic-bezier(0.755, 0.050, 0.855, 0.060));
            .translate3d(0; -15px; 0);
        }
        90% {
            .translate3d(0; -4px; 0);
        }
    }
    @keyframes bounce {
        0%, 20%, 53%, 80%, 100% {
            .animation-timing-function(cubic-bezier(0.215, 0.610, 0.355, 1.000));
            .translate3d(0; 0; 0);
        }
        40%, 43% {
            .animation-timing-function(cubic-bezier(0.755, 0.050, 0.855, 0.060));
            .translate3d(0; -30px; 0);
        }
        70% {
            .animation-timing-function(cubic-bezier(0.755, 0.050, 0.855, 0.060));
            .translate3d(0; -15px; 0);
        }
        90% {
            .translate3d(0; -4px; 0);
        }
    }
    .bounce {
        .animation-name(bounce);
        .transform-origin(center bottom);
    }
}
& when (@animate-flash) {
    @-webkit-keyframes flash {
        0%, 50%, 100% {
            opacity : 1;
        }
        25%, 75% {
            opacity : 0;
        }
    }
    @keyframes flash {
        0%, 50%, 100% {
            opacity : 1;
        }
        25%, 75% {
            opacity : 0;
        }
    }
    .flash {
        .animation-name(flash);
    }
}
& when (@animate-pulse) {
    @-webkit-keyframes pulse {
        0% {
            .scale(1);
        }
        50% {
            .scale(1.05);
        }
        100% {
            .scale(1);
        }
    }
    @keyframes pulse {
        0% {
            .scale(1);
        }
        50% {
            .scale(1.05);
        }
        100% {
            .scale(1);
        }
    }
    .pulse {
        .animation-name(pulse);
    }
}
& when (@animate-rubberBand) {
    @-webkit-keyframes rubberBand {
        0% {
            .scale3d(1, 1, 1);
        }
        30% {
            .scale3d(1.25, 0.75, 1);
        }
        40% {
            .scale3d(0.75, 1.25, 1);
        }
        50% {
            .scale3d(1.15, 0.85, 1);
        }
        65% {
            .scale3d(.95, 1.05, 1);
        }
        75% {
            .scale3d(1.05, .95, 1);
        }
        100% {
            .scale3d(1, 1, 1);
        }
    }
    @keyframes rubberBand {
        0% {
            .scale3d(1, 1, 1);
        }
        30% {
            .scale3d(1.25, 0.75, 1);
        }
        40% {
            .scale3d(0.75, 1.25, 1);
        }
        50% {
            .scale3d(1.15, 0.85, 1);
        }
        65% {
            .scale3d(.95, 1.05, 1);
        }
        75% {
            .scale3d(1.05, .95, 1);
        }
        100% {
            .scale3d(1, 1, 1);
        }
    }
    .rubberBand {
        .animation-name(rubberBand);
    }
}
& when (@animate-shake) {
    @-webkit-keyframes shake {
        0%, 100% {
            .translate3d(0, 0, 0);
        }
        10%, 30%, 50%, 70%, 90% {
            .translate3d(-10px, 0, 0);
        }
        20%, 40%, 60%, 80% {
            .translate3d(10px, 0, 0);
        }
    }
    @keyframes shake {
        0%, 100% {
            .translate3d(0, 0, 0);
        }
        10%, 30%, 50%, 70%, 90% {
            .translate3d(-10px, 0, 0);
        }
        20%, 40%, 60%, 80% {
            .translate3d(10px, 0, 0);
        }
    }
    .shake {
        .animation-name(shake);
    }
}
& when (@animate-swing) {
    @-webkit-keyframes swing {
        20% {
            .rotate3d(0, 0, 1, 15deg);
        }
        40% {
            .rotate3d(0, 0, 1, -10deg);
        }
        60% {
            .rotate3d(0, 0, 1, 5deg);
        }
        80% {
            .rotate3d(0, 0, 1, -5deg);
        }
        100% {
            .rotate3d(0, 0, 1, 0deg);
        }
    }
    @keyframes swing {
        20% {
            .rotate3d(0, 0, 1, 15deg);
        }
        40% {
            .rotate3d(0, 0, 1, -10deg);
        }
        60% {
            .rotate3d(0, 0, 1, 5deg);
        }
        80% {
            .rotate3d(0, 0, 1, -5deg);
        }
        100% {
            .rotate3d(0, 0, 1, 0deg);
        }
    }
    .swing {
        .animation-name(swing);
        .transform-origin(top center);
    }
}
& when (@animate-tada) {
    @-webkit-keyframes tada {
        0% {
            .scale3d(1, 1, 1);
        }
        10%, 20% {
            .transform(scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg));
        }
        30%, 50%, 70%, 90% {
            .transform(scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg));
        }
        40%, 60%, 80% {
            .transform(scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg));
        }
        100% {
            .scale3d(1, 1, 1);
        }
    }
    @keyframes tada {
        0% {
            .scale3d(1, 1, 1);
        }
        10%, 20% {
            .transform(scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg));
        }
        30%, 50%, 70%, 90% {
            .transform(scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg));
        }
        40%, 60%, 80% {
            .transform(scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg));
        }
        100% {
            .scale3d(1, 1, 1);
        }
    }
    .tada {
        .animation-name(tada);
    }
}
& when (@animate-wobble) {
    @-webkit-keyframes wobble {
        0% {
            .transform(none);
        }
        15% {
            .transform(translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg));
        }
        30% {
            .transform(translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg));
        }
        45% {
            .transform(translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg));
        }
        60% {
            .transform(translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg));
        }
        75% {
            .transform(translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg));
        }
        100% {
            .transform(none);
        }
    }
    @keyframes wobble {
        0% {
            .transform(none);
        }
        15% {
            .transform(translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg));
        }
        30% {
            .transform(translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg));
        }
        45% {
            .transform(translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg));
        }
        60% {
            .transform(translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg));
        }
        75% {
            .transform(translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg));
        }
        100% {
            .transform(none);
        }
    }
    .wobble {
        .animation-name(wobble);
    }
}
& when (@animate-wiggle) {
    @-webkit-keyframes wiggle {
        0%, 90%, 100% {
            .skew(9deg, 0);
        }
        10% {
            .skew(-8deg, 0);
        }
        20% {
            .skew(7deg, 0);
        }
        30% {
            .skew(-6deg, 0);
        }
        40% {
            .skew(5deg, 0);
        }
        50% {
            .skew(-4deg, 0);
        }
        60% {
            .skew(3deg, 0);
        }
        70% {
            .skew(-2deg, 0);
        }
        80% {
            .skew(1deg, 0);
        }
    }
    @keyframes wiggle {
        0%, 90%, 100% {
            .skew(9deg, 0);
        }
        10% {
            .skew(-8deg, 0);
        }
        20% {
            .skew(7deg, 0);
        }
        30% {
            .skew(-6deg, 0);
        }
        40% {
            .skew(5deg, 0);
        }
        50% {
            .skew(-4deg, 0);
        }
        60% {
            .skew(3deg, 0);
        }
        70% {
            .skew(-2deg, 0);
        }
        80% {
            .skew(1deg, 0);
        }
    }
    .wiggle {
        .animation-name(wiggle);
    }
}
& when (@animate-jello ) {
    @-webkit-keyframes jello {
        11.1% {
            .transform(none);
        }
        22.2% {
            .skew(-12.5deg, -12.5deg);
        }
        33.3% {
            .skew(6.25deg, 6.25deg);
        }
        44.4% {
            .skew(-3.125deg, -3.125deg);
        }
        55.5% {
            .skew(1.5625deg, 1.5625deg);
        }
        66.6% {
            .skew(-0.78125deg, -0.78125deg);
        }
        77.7% {
            .skew(0.390625deg, 0.390625deg);
        }
        88.8% {
            .skew(-0.1953125deg, -0.1953125deg);
        }
        100% {
            .transform(none);
        }
    }
    @keyframes jello {
        11.1% {
            .transform(none);
        }
        22.2% {
            .skew(-12.5deg, -12.5deg);
        }
        33.3% {
            .skew(6.25deg, 6.25deg);
        }
        44.4% {
            .skew(-3.125deg, -3.125deg);
        }
        55.5% {
            .skew(1.5625deg, 1.5625deg);
        }
        66.6% {
            .skew(-0.78125deg, -0.78125deg);
        }
        77.7% {
            .skew(0.390625deg, 0.390625deg);
        }
        88.8% {
            .skew(-0.1953125deg, -0.1953125deg);
        }
        100% {
            .transform(none);
        }
    }
    .jello {
        .animation-name(jello);
        .transform-origin(center);
    }
}

// Flippers
//=============================================
& when (@animate-flip) {
    @-webkit-keyframes flip {
        0% {
            .transform(perspective(400px) rotate3d(0, 1, 0, -360deg));
            .animation-timing-function(ease-out);
        }
        40% {
            .transform(perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg));
            .animation-timing-function(ease-out);
        }
        50% {
            .transform(perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg));
            .animation-timing-function(ease-in);
        }
        80% {
            .transform(perspective(400px) scale3d(.95, .95, .95));
            .animation-timing-function(ease-in);
        }
        100% {
            .transform(perspective(400px));
            .animation-timing-function(ease-in);
        }
    }
    @keyframes flip {
        0% {
            .transform(perspective(400px) rotate3d(0, 1, 0, -360deg));
            .animation-timing-function(ease-out);
        }
        40% {
            .transform(perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg));
            .animation-timing-function(ease-out);
        }
        50% {
            .transform(perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg));
            .animation-timing-function(ease-in);
        }
        80% {
            .transform(perspective(400px) scale3d(.95, .95, .95));
            .animation-timing-function(ease-in);
        }
        100% {
            .transform(perspective(400px));
            .animation-timing-function(ease-in);
        }
    }
    .flip {
        .animation-name(flip);
        .backface-visibility(visible);
    }
}
& when (@animate-flipInX) {
    @-webkit-keyframes flipInX {
        0% {
            .transform(perspective(400px) rotate3d(1, 0, 0, 90deg));
            .animation-timing-function(ease-in);
            opacity : 0;
        }
        40% {
            .transform(perspective(400px) rotate3d(1, 0, 0, -20deg));
            .animation-timing-function(ease-in);
        }
        60% {
            .transform(perspective(400px) rotate3d(1, 0, 0, 10deg));
            opacity : 1;
        }
        80% {
            .transform(perspective(400px) rotate3d(1, 0, 0, -5deg));
        }
        100% {
            .transform(perspective(400px));
        }
    }
    @keyframes flipInX {
        0% {
            .transform(perspective(400px) rotate3d(1, 0, 0, 90deg));
            .animation-timing-function(ease-in);
            opacity : 0;
        }
        40% {
            .transform(perspective(400px) rotate3d(1, 0, 0, -20deg));
            .animation-timing-function(ease-in);
        }
        60% {
            .transform(perspective(400px) rotate3d(1, 0, 0, 10deg));
            opacity : 1;
        }
        80% {
            .transform(perspective(400px) rotate3d(1, 0, 0, -5deg));
        }
        100% {
            .transform(perspective(400px));
        }
    }
    .flipInX {
        .animation-name(flipInX);
        .backface-visibility(visible);
    }
}
& when (@animate-flipOutX) {
    @-webkit-keyframes flipOutX {
        0% {
            .transform(perspective(400px));
        }
        30% {
            .transform(perspective(400px) rotate3d(1, 0, 0, -20deg));
            opacity : 1;
        }
        100% {
            .transform(perspective(400px) rotate3d(1, 0, 0, 90deg));
            opacity : 0;
        }
    }
    @keyframes flipOutX {
        0% {
            .transform(perspective(400px));
        }
        30% {
            .transform(perspective(400px) rotate3d(1, 0, 0, -20deg));
            opacity : 1;
        }
        100% {
            .transform(perspective(400px) rotate3d(1, 0, 0, 90deg));
            opacity : 0;
        }
    }
    .flipOutX {
        .animation-name(flipOutX);
        .backface-visibility(visible);
    }
}
& when (@animate-flipInY) {
    @-webkit-keyframes flipInY {
        0% {
            .transform(perspective(400px) rotate3d(0, 1, 0, 90deg));
            .animation-timing-function(ease-in);
            opacity : 0;
        }
        40% {
            .transform(perspective(400px) rotate3d(0, 1, 0, -20deg));
            .animation-timing-function(ease-in);
        }
        60% {
            .transform(perspective(400px) rotate3d(0, 1, 0, 10deg));
            opacity : 1;
        }
        80% {
            .transform(perspective(400px) rotate3d(0, 1, 0, -5deg));
        }
        100% {
            .transform(perspective(400px));
        }
    }
    @keyframes flipInY {
        0% {
            .transform(perspective(400px) rotate3d(0, 1, 0, 90deg));
            .animation-timing-function(ease-in);
            opacity : 0;
        }
        40% {
            .transform(perspective(400px) rotate3d(0, 1, 0, -20deg));
            .animation-timing-function(ease-in);
        }
        60% {
            .transform(perspective(400px) rotate3d(0, 1, 0, 10deg));
            opacity : 1;
        }
        80% {
            .transform(perspective(400px) rotate3d(0, 1, 0, -5deg));
        }
        100% {
            .transform(perspective(400px));
        }
    }
    .flipInY {
        .animation-name(flipInY);
        .backface-visibility(visible);
    }
}
& when (@animate-flipOutY) {
    @-webkit-keyframes flipOutY {
        0% {
            .transform(perspective(400px));
        }
        30% {
            .transform(perspective(400px) rotate3d(0, 1, 0, -15deg));
            opacity : 1;
        }
        100% {
            .transform(perspective(400px) rotate3d(0, 1, 0, 90deg));
            opacity : 0;
        }
    }
    @keyframes flipOutY {
        0% {
            .transform(perspective(400px));
        }
        30% {
            .transform(perspective(400px) rotate3d(0, 1, 0, -15deg));
            opacity : 1;
        }
        100% {
            .transform(perspective(400px) rotate3d(0, 1, 0, 90deg));
            opacity : 0;
        }
    }
    .flipOutY {
        .animation-name(flipOutY);
        .backface-visibility(visible);
    }
}

// Fading entrances
//=============================================
& when (@animate-fadeIn) {
    @-webkit-keyframes fadeIn {
        0% {
            opacity : 0;
        }
        100% {
            opacity : 1;
        }
    }
    @keyframes fadeIn {
        0% {
            opacity : 0;
        }
        100% {
            opacity : 1;
        }
    }
    .fadeIn {
        .animation-name(fadeIn);
    }
}
& when (@animate-fadeInUp) {
    @-webkit-keyframes fadeInUp {
        0% {
            opacity : 0;
            .translate3d(0, 100%, 0);
        }
        100% {
            opacity : 1;
            .transform(none);
        }
    }
    @keyframes fadeInUp {
        0% {
            opacity : 0;
            .translate3d(0, 100%, 0);
        }
        100% {
            opacity : 1;
            .transform(none);
        }
    }
    .fadeInUp {
        .animation-name(fadeInUp);
    }
}
& when (@animate-fadeInDown) {
    @-webkit-keyframes fadeInDown {
        0% {
            opacity : 0;
            .translate3d(0, -100%, 0);
        }
        100% {
            opacity : 1;
            .transform(none);
        }
    }
    @keyframes fadeInDown {
        0% {
            opacity : 0;
            .translate3d(0, -100%, 0);
        }
        100% {
            opacity : 1;
            .transform(none);
        }
    }
    .fadeInDown {
        .animation-name(fadeInDown);
    }
}
& when (@animate-fadeInLeft) {
    @-webkit-keyframes fadeInLeft {
        0% {
            opacity : 0;
            .translate3d(-100%, 0, 0);
        }
        100% {
            opacity : 1;
            .transform(none);
        }
    }
    @keyframes fadeInLeft {
        0% {
            opacity : 0;
            .translate3d(-100%, 0, 0);
        }
        100% {
            opacity : 1;
            .transform(none);
        }
    }
    .fadeInLeft {
        .animation-name(fadeInLeft);
    }
}
& when (@animate-fadeInRight) {
    @-webkit-keyframes fadeInRight {
        0% {
            opacity : 0;
            .translate3d(100%, 0, 0);
        }
        100% {
            opacity : 1;
            .transform(none);
        }
    }
    @keyframes fadeInRight {
        0% {
            opacity : 0;
            .translate3d(100%, 0, 0);
        }
        100% {
            opacity : 1;
            .transform(none);
        }
    }
    .fadeInRight {
        .animation-name(fadeInRight);
    }
}
& when (@animate-fadeInUpBig) {
    @-webkit-keyframes fadeInUpBig {
        0% {
            opacity : 0;
            .translate3d(0, 2000px, 0);
        }
        100% {
            opacity : 1;
            .transform(none);
        }
    }
    @keyframes fadeInUpBig {
        0% {
            opacity : 0;
            .translate3d(0, 2000px, 0);
        }
        100% {
            opacity : 1;
            .transform(none);
        }
    }
    .fadeInUpBig {
        .animation-name(fadeInUpBig);
    }
}
& when (@animate-fadeInDownBig) {
    @-webkit-keyframes fadeInDownBig {
        0% {
            opacity : 0;
            .translate3d(0, -2000px, 0);
        }
        100% {
            opacity : 1;
            .transform(none);
        }
    }
    @keyframes fadeInDownBig {
        0% {
            opacity : 0;
            .translate3d(0, -2000px, 0);
        }
        100% {
            opacity : 1;
            .transform(none);
        }
    }
    .fadeInDownBig {
        .animation-name(fadeInDownBig);
    }
}
& when (@animate-fadeInLeftBig) {
    @-webkit-keyframes fadeInLeftBig {
        0% {
            opacity : 0;
            .translate3d(-2000px, 0, 0);
        }
        100% {
            opacity : 1;
            .transform(none);
        }
    }
    @keyframes fadeInLeftBig {
        0% {
            opacity : 0;
            .translate3d(-2000px, 0, 0);
        }
        100% {
            opacity : 1;
            .transform(none);
        }
    }
    .fadeInLeftBig {
        .animation-name(fadeInLeftBig);
    }
}
& when (@animate-fadeInRightBig) {
    @-webkit-keyframes fadeInRightBig {
        0% {
            opacity : 0;
            .translate3d(2000px, 0, 0);
        }
        100% {
            opacity : 1;
            .transform(none);
        }
    }
    @keyframes fadeInRightBig {
        0% {
            opacity : 0;
            .translate3d(2000px, 0, 0);
        }
        100% {
            opacity : 1;
            .transform(none);
        }
    }
    .fadeInRightBig {
        .animation-name(fadeInRightBig);
    }
}

// Fading exits
//=============================================
& when (@animate-fadeOut) {
    @-webkit-keyframes fadeOut {
        0% {
            opacity : 1;
        }
        100% {
            opacity : 0;
        }
    }
    @keyframes fadeOut {
        0% {
            opacity : 1;
        }
        100% {
            opacity : 0;
        }
    }
    .fadeOut {
        .animation-name(fadeOut);
    }
}
& when (@animate-fadeOutUp) {
    @-webkit-keyframes fadeOutUp {
        0% {
            opacity : 1;
        }

        100% {
            opacity : 0;
            .translate3d(0, -100%, 0);
        }
    }
    @keyframes fadeOutUp {
        0% {
            opacity : 1;
        }

        100% {
            opacity : 0;
            .translate3d(0, -100%, 0);
        }
    }
    .fadeOutUp {
        .animation-name(fadeOutUp);
    }
}
& when (@animate-fadeOutDown) {
    @-webkit-keyframes fadeOutDown {
        0% {
            opacity : 1;
        }
        100% {
            opacity : 0;
            .translate3d(0, 100%, 0);
        }
    }
    @keyframes fadeOutDown {
        0% {
            opacity : 1;
        }
        100% {
            opacity : 0;
            .translate3d(0, 100%, 0);
        }
    }
    .fadeOutDown {
        .animation-name(fadeOutDown);
    }
}
& when (@animate-fadeOutLeft) {
    @-webkit-keyframes fadeOutLeft {
        0% {
            opacity : 1;
        }
        100% {
            opacity : 0;
            .translate3d(-100%, 0, 0);
        }
    }
    @keyframes fadeOutLeft {
        0% {
            opacity : 1;
        }
        100% {
            opacity : 0;
            .translate3d(-100%, 0, 0);
        }
    }
    .fadeOutLeft {
        .animation-name(fadeOutLeft);
    }
}
& when (@animate-fadeOutRight) {
    @-webkit-keyframes fadeOutRight {
        0% {
            opacity : 1;
        }

        100% {
            opacity : 0;
            .translate3d(100%, 0, 0);
        }
    }
    @keyframes fadeOutRight {
        0% {
            opacity : 1;
        }

        100% {
            opacity : 0;
            .translate3d(100%, 0, 0);
        }
    }
    .fadeOutRight {
        .animation-name(fadeOutRight);
    }
}
& when (@animate-fadeOutUpBig) {
    @-webkit-keyframes fadeOutUpBig {
        0% {
            opacity : 1;
        }

        100% {
            opacity : 0;
            .translate3d(0, -2000px, 0);
        }
    }
    @keyframes fadeOutUpBig {
        0% {
            opacity : 1;
        }

        100% {
            opacity : 0;
            .translate3d(0, -2000px, 0);
        }
    }
    .fadeOutUpBig {
        .animation-name(fadeOutUpBig);
    }
}
& when (@animate-fadeOutDownBig) {
    @-webkit-keyframes fadeOutDownBig {
        0% {
            opacity : 1;
        }
        100% {
            opacity : 0;
            .translate3d(0, 2000px, 0);
        }
    }
    @keyframes fadeOutDownBig {
        0% {
            opacity : 1;
        }
        100% {
            opacity : 0;
            .translate3d(0, 2000px, 0);
        }
    }
    .fadeOutDownBig {
        .animation-name(fadeOutDownBig);
    }
}
& when (@animate-fadeOutLeftBig) {
    @-webkit-keyframes fadeOutLeftBig {
        0% {
            opacity : 1;
        }
        100% {
            opacity : 0;
            .translate3d(-2000px, 0, 0);
        }
    }
    @keyframes fadeOutLeftBig {
        0% {
            opacity : 1;
        }
        100% {
            opacity : 0;
            .translate3d(-2000px, 0, 0);
        }
    }
    .fadeOutLeftBig {
        .animation-name(fadeOutLeftBig);
    }
}
& when (@animate-fadeOutRightBig) {
    @-webkit-keyframes fadeOutRightBig {
        0% {
            opacity : 1;
        }

        100% {
            opacity : 0;
            .translate3d(2000px, 0, 0);
        }
    }
    @keyframes fadeOutRightBig {
        0% {
            opacity : 1;
        }

        100% {
            opacity : 0;
            .translate3d(2000px, 0, 0);
        }
    }
    .fadeOutRightBig {
        .animation-name(fadeOutRightBig);
    }
}

// Bouncing entrances
//=============================================
& when (@animate-bounceIn) {
    @-webkit-keyframes bounceIn {
        0%, 20%, 40%, 60%, 80%, 100% {
            .animation-timing-function(cubic-bezier(0.215, 0.610, 0.355, 1.000));
        }
        0% {
            opacity : 0;
            .scale3d(.3, .3, .3);
        }
        20% {
            .scale3d(1.1, 1.1, 1.1);
        }
        40% {
            .scale3d(.9, .9, .9);
        }
        60% {
            opacity : 1;
            .scale3d(1.03, 1.03, 1.03);
        }
        80% {
            .scale3d(.97, .97, .97);
        }
        100% {
            opacity : 1;
            .scale3d(1, 1, 1);
        }
    }
    @keyframes bounceIn {
        0%, 20%, 40%, 60%, 80%, 100% {
            .animation-timing-function(cubic-bezier(0.215, 0.610, 0.355, 1.000));
        }
        0% {
            opacity : 0;
            .scale3d(.3, .3, .3);
        }
        20% {
            .scale3d(1.1, 1.1, 1.1);
        }
        40% {
            .scale3d(.9, .9, .9);
        }
        60% {
            opacity : 1;
            .scale3d(1.03, 1.03, 1.03);
        }
        80% {
            .scale3d(.97, .97, .97);
        }
        100% {
            opacity : 1;
            .scale3d(1, 1, 1);
        }
    }
    .bounceIn {
        .animation-name(bounceIn);
    }
}
& when (@animate-bounceInUp) {
    @-webkit-keyframes bounceInUp {
        0%, 60%, 75%, 90%, 100% {
            .animation-timing-function(cubic-bezier(0.215, 0.610, 0.355, 1.000));
        }
        0% {
            opacity : 0;
            .translate3d(0, 3000px, 0);
        }
        60% {
            opacity : 1;
            .translate3d(0, -20px, 0);
        }
        75% {
            .translate3d(0, 10px, 0);
        }
        90% {
            .translate3d(0, -5px, 0);
        }
        100% {
            .translate3d(0, 0, 0);
        }
    }
    @keyframes bounceInUp {
        0%, 60%, 75%, 90%, 100% {
            .animation-timing-function(cubic-bezier(0.215, 0.610, 0.355, 1.000));
        }
        0% {
            opacity : 0;
            .translate3d(0, 3000px, 0);
        }
        60% {
            opacity : 1;
            .translate3d(0, -20px, 0);
        }
        75% {
            .translate3d(0, 10px, 0);
        }
        90% {
            .translate3d(0, -5px, 0);
        }
        100% {
            .translate3d(0, 0, 0);
        }
    }
    .bounceInUp {
        .animation-name(bounceInUp);
    }
}
& when (@animate-bounceInDown) {
    @-webkit-keyframes bounceInDown {
        0%, 60%, 75%, 90%, 100% {
            .animation-timing-function(cubic-bezier(0.215, 0.610, 0.355, 1.000));
        }
        0% {
            opacity : 0;
            .translate3d(0, -3000px, 0);
        }
        60% {
            opacity : 1;
            .translate3d(0, 25px, 0);
        }
        75% {
            .translate3d(0, -10px, 0);
        }
        90% {
            .translate3d(0, 5px, 0);
        }
        100% {
            .transform(none);
        }
    }
    @keyframes bounceInDown {
        0%, 60%, 75%, 90%, 100% {
            .animation-timing-function(cubic-bezier(0.215, 0.610, 0.355, 1.000));
        }
        0% {
            opacity : 0;
            .translate3d(0, -3000px, 0);
        }
        60% {
            opacity : 1;
            .translate3d(0, 25px, 0);
        }
        75% {
            .translate3d(0, -10px, 0);
        }
        90% {
            .translate3d(0, 5px, 0);
        }
        100% {
            .transform(none);
        }
    }
    .bounceInDown {
        .animation-name(bounceInDown);
    }
}
& when (@animate-bounceInLeft) {
    @-webkit-keyframes bounceInLeft {
        0%, 60%, 75%, 90%, 100% {
            .animation-timing-function(cubic-bezier(0.215, 0.610, 0.355, 1.000));
        }
        0% {
            opacity : 0;
            .translate3d(-3000px, 0, 0);
        }
        60% {
            opacity : 1;
            .translate3d(25px, 0, 0);
        }
        75% {
            .translate3d(-10px, 0, 0);
        }
        90% {
            .translate3d(5px, 0, 0);
        }
        100% {
            .transform(none);
        }
    }
    @keyframes bounceInLeft {
        0%, 60%, 75%, 90%, 100% {
            .animation-timing-function(cubic-bezier(0.215, 0.610, 0.355, 1.000));
        }
        0% {
            opacity : 0;
            .translate3d(-3000px, 0, 0);
        }
        60% {
            opacity : 1;
            .translate3d(25px, 0, 0);
        }
        75% {
            .translate3d(-10px, 0, 0);
        }
        90% {
            .translate3d(5px, 0, 0);
        }
        100% {
            .transform(none);
        }
    }
    .bounceInLeft {
        .animation-name(bounceInLeft);
    }
}
& when (@animate-bounceInRight) {
    @-webkit-keyframes bounceInRight {
        0%, 60%, 75%, 90%, 100% {
            .animation-timing-function(cubic-bezier(0.215, 0.610, 0.355, 1.000));
        }
        0% {
            opacity : 0;
            .translate3d(3000px, 0, 0);
        }
        60% {
            opacity : 1;
            .translate3d(-25px, 0, 0);
        }
        75% {
            .translate3d(10px, 0, 0);
        }
        90% {
            .translate3d(-5px, 0, 0);
        }
        100% {
            .transform(none);
        }
    }
    @keyframes bounceInRight {
        0%, 60%, 75%, 90%, 100% {
            .animation-timing-function(cubic-bezier(0.215, 0.610, 0.355, 1.000));
        }
        0% {
            opacity : 0;
            .translate3d(3000px, 0, 0);
        }
        60% {
            opacity : 1;
            .translate3d(-25px, 0, 0);
        }
        75% {
            .translate3d(10px, 0, 0);
        }
        90% {
            .translate3d(-5px, 0, 0);
        }
        100% {
            .transform(none);
        }
    }
    .bounceInRight {
        .animation-name(bounceInRight);
    }
}

// Bouncing exits
//=============================================
& when (@animate-bounceOut) {
    @-webkit-keyframes bounceOut {
        20% {
            .scale3d(.9, .9, .9);
        }
        50%, 55% {
            opacity : 1;
            .scale3d(1.1, 1.1, 1.1);
        }
        100% {
            opacity : 0;
            .scale3d(.3, .3, .3);
        }
    }
    @keyframes bounceOut {
        20% {
            .scale3d(.9, .9, .9);
        }
        50%, 55% {
            opacity : 1;
            .scale3d(1.1, 1.1, 1.1);
        }
        100% {
            opacity : 0;
            .scale3d(.3, .3, .3);
        }
    }
    .bounceOut {
        .animation-name(bounceOut);
    }
}
& when (@animate-bounceOutUp) {
    @-webkit-keyframes bounceOutUp {
        20% {
            .translate3d(0, -10px, 0);
        }
        40%, 45% {
            opacity : 1;
            .translate3d(0, 20px, 0);
        }
        100% {
            opacity : 0;
            .translate3d(0, -2000px, 0);
        }
    }
    @keyframes bounceOutUp {
        20% {
            .translate3d(0, -10px, 0);
        }
        40%, 45% {
            opacity : 1;
            .translate3d(0, 20px, 0);
        }
        100% {
            opacity : 0;
            .translate3d(0, -2000px, 0);
        }
    }
    .bounceOutUp {
        .animation-name(bounceOutUp);
    }
}
& when (@animate-bounceOutDown) {
    @-webkit-keyframes bounceOutDown {
        20% {
            .translate3d(0, 10px, 0);
        }
        40%, 45% {
            opacity : 1;
            .translate3d(0, -20px, 0);
        }
        100% {
            opacity : 0;
            .translate3d(0, 2000px, 0);
        }
    }
    @keyframes bounceOutDown {
        20% {
            .translate3d(0, 10px, 0);
        }
        40%, 45% {
            opacity : 1;
            .translate3d(0, -20px, 0);
        }
        100% {
            opacity : 0;
            .translate3d(0, 2000px, 0);
        }
    }
    .bounceOutDown {
        .animation-name(bounceOutDown);
    }
}
& when (@animate-bounceOutLeft) {
    @-webkit-keyframes bounceOutLeft {
        20% {
            opacity : 1;
            .translate3d(20px, 0, 0);
        }
        100% {
            opacity : 0;
            .translate3d(-2000px, 0, 0);
        }
    }
    @keyframes bounceOutLeft {
        20% {
            opacity : 1;
            .translate3d(20px, 0, 0);
        }
        100% {
            opacity : 0;
            .translate3d(-2000px, 0, 0);
        }
    }
    .bounceOutLeft {
        .animation-name(bounceOutLeft);
    }
}
& when (@animate-bounceOutRight) {
    @-webkit-keyframes bounceOutRight {
        20% {
            opacity : 1;
            .translate3d(-20px, 0, 0);
        }
        100% {
            opacity : 0;
            .translate3d(2000px, 0, 0);
        }
    }
    @keyframes bounceOutRight {
        20% {
            opacity : 1;
            .translate3d(-20px, 0, 0);
        }
        100% {
            opacity : 0;
            .translate3d(2000px, 0, 0);
        }
    }
    .bounceOutRight {
        .animation-name(bounceOutRight);
    }
}

// Rotating entrances
//=============================================
& when (@animate-rotateIn) {
    @-webkit-keyframes rotateIn {
        0% {
            .transform-origin(center);
            .rotate3d(0, 0, 1, -200deg);
            opacity : 0;
        }
        100% {
            .transform-origin(center);
            .transform(none);
            opacity : 1;
        }
    }
    @keyframes rotateIn {
        0% {
            .transform-origin(center);
            .rotate3d(0, 0, 1, -200deg);
            opacity : 0;
        }
        100% {
            .transform-origin(center);
            .transform(none);
            opacity : 1;
        }
    }
    .rotateIn {
        .animation-name(rotateIn);
    }
}
& when (@animate-rotateInUpLeft) {
    @-webkit-keyframes rotateInUpLeft {
        0% {
            .transform-origin(left bottom);
            .rotate3d(0, 0, 1, 45deg);
            opacity : 0;
        }

        100% {
            .transform-origin(left bottom);
            .transform(none);
            opacity : 1;
        }
    }
    @keyframes rotateInUpLeft {
        0% {
            .transform-origin(left bottom);
            .rotate3d(0, 0, 1, 45deg);
            opacity : 0;
        }

        100% {
            .transform-origin(left bottom);
            .transform(none);
            opacity : 1;
        }
    }
    .rotateInUpLeft {
        .animation-name(rotateInUpLeft);
    }
}
& when (@animate-rotateInDownLeft) {
    @-webkit-keyframes rotateInDownLeft {
        0% {
            .transform-origin(left bottom);
            .rotate3d(0, 0, 1, -45deg);
            opacity : 0;
        }
        100% {
            .transform-origin(left bottom);
            .transform(none);
            opacity : 1;
        }
    }
    @keyframes rotateInDownLeft {
        0% {
            .transform-origin(left bottom);
            .rotate3d(0, 0, 1, -45deg);
            opacity : 0;
        }
        100% {
            .transform-origin(left bottom);
            .transform(none);
            opacity : 1;
        }
    }
    .rotateInDownLeft {
        .animation-name(rotateInDownLeft);
    }
}
& when (@animate-rotateInUpRight) {
    @-webkit-keyframes rotateInUpRight {
        0% {
            .transform-origin(right bottom);
            .rotate3d(0, 0, 1, -90deg);
            opacity : 0;
        }
        100% {
            .transform-origin(right bottom);
            .transform(none);
            opacity : 1;
        }
    }
    @keyframes rotateInUpRight {
        0% {
            .transform-origin(right bottom);
            .rotate3d(0, 0, 1, -90deg);
            opacity : 0;
        }
        100% {
            .transform-origin(right bottom);
            .transform(none);
            opacity : 1;
        }
    }
    .rotateInUpRight {
        .animation-name(rotateInUpRight);
    }
}
& when (@animate-rotateInDownRight) {
    @-webkit-keyframes rotateInDownRight {
        0% {
            .transform-origin(right bottom);
            .rotate3d(0, 0, 1, 45deg);
            opacity : 0;
        }
        100% {
            .transform-origin(right bottom);
            .transform(none);
            opacity : 1;
        }
    }
    @keyframes rotateInDownRight {
        0% {
            .transform-origin(right bottom);
            .rotate3d(0, 0, 1, 45deg);
            opacity : 0;
        }
        100% {
            .transform-origin(right bottom);
            .transform(none);
            opacity : 1;
        }
    }
    .rotateInDownRight {
        .animation-name(rotateInDownRight);
    }
}

// Rotating exits
//=============================================
& when (@animate-rotateOut) {
    @-webkit-keyframes rotateOut {
        0% {
            .transform-origin(center);
            opacity : 1;
        }
        100% {
            .transform-origin(center);
            .rotate3d(0, 0, 1, 200deg);
            opacity : 0;
        }
    }
    @keyframes rotateOut {
        0% {
            .transform-origin(center);
            opacity : 1;
        }
        100% {
            .transform-origin(center);
            .rotate3d(0, 0, 1, 200deg);
            opacity : 0;
        }
    }
    .rotateOut {
        .animation-name(rotateOut);
    }
}
& when (@animate-rotateOutUpLeft) {
    @-webkit-keyframes rotateOutUpLeft {
        0% {
            .transform-origin(left bottom);
            opacity : 1;
        }
        100% {
            .transform-origin(left bottom);
            .rotate3d(0, 0, 1, -45deg);
            opacity : 0;
        }
    }
    @keyframes rotateOutUpLeft {
        0% {
            .transform-origin(left bottom);
            opacity : 1;
        }
        100% {
            .transform-origin(left bottom);
            .rotate3d(0, 0, 1, -45deg);
            opacity : 0;
        }
    }
    .rotateOutUpLeft {
        .animation-name(rotateOutUpLeft);
    }
}
& when (@animate-rotateOutDownLeft) {
    @-webkit-keyframes rotateOutDownLeft {
        0% {
            .transform-origin(left bottom);
            opacity : 1;
        }
        100% {
            .transform-origin(left bottom);
            .rotate3d(0, 0, 1, 45deg);
            opacity : 0;
        }
    }
    @keyframes rotateOutDownLeft {
        0% {
            .transform-origin(left bottom);
            opacity : 1;
        }
        100% {
            .transform-origin(left bottom);
            .rotate3d(0, 0, 1, 45deg);
            opacity : 0;
        }
    }
    .rotateOutDownLeft {
        .animation-name(rotateOutDownLeft);
    }
}
& when (@animate-rotateOutUpRight) {
    @-webkit-keyframes rotateOutUpRight {
        0% {
            .transform-origin(right bottom);
            opacity : 1;
        }
        100% {
            .transform-origin(right bottom);
            .rotate3d(0, 0, 1, 90deg);
            opacity : 0;
        }
    }
    @keyframes rotateOutUpRight {
        0% {
            .transform-origin(right bottom);
            opacity : 1;
        }
        100% {
            .transform-origin(right bottom);
            .rotate3d(0, 0, 1, 90deg);
            opacity : 0;
        }
    }
    .rotateOutUpRight {
        .animation-name(rotateOutUpRight);
    }
}
& when (@animate-rotateOutDownRight) {
    @-webkit-keyframes rotateOutDownRight {
        0% {
            .transform-origin(right bottom);
            opacity : 1;
        }
        100% {
            .transform-origin(right bottom);
            .rotate3d(0, 0, 1, -45deg);
            opacity : 0;
        }
    }
    @keyframes rotateOutDownRight {
        0% {
            .transform-origin(right bottom);
            opacity : 1;
        }
        100% {
            .transform-origin(right bottom);
            .rotate3d(0, 0, 1, -45deg);
            opacity : 0;
        }
    }
    .rotateOutDownRight {
        .animation-name(rotateOutDownRight);
    }
}

// Lightspeed
//=============================================
& when (@animate-lightSpeedIn) {
    @-webkit-keyframes lightSpeedIn {
        0% {
            .transform(translate3d(100%, 0, 0) skewX(-30deg));
            opacity : 0;
        }
        60% {
            .transform(skewX(20deg));
            opacity : 1;
        }
        80% {
            .transform(skewX(-5deg));
            opacity : 1;
        }
        100% {
            .transform(none);
            opacity : 1;
        }
    }
    @keyframes lightSpeedIn {
        0% {
            .transform(translate3d(100%, 0, 0) skewX(-30deg));
            opacity : 0;
        }
        60% {
            .transform(skewX(20deg));
            opacity : 1;
        }
        80% {
            .transform(skewX(-5deg));
            opacity : 1;
        }
        100% {
            .transform(none);
            opacity : 1;
        }
    }
    .lightSpeedIn {
        .animation-name(lightSpeedIn);
        .animation-timing-function(ease-out);
    }
}
& when (@animate-lightSpeedOut) {
    @-webkit-keyframes lightSpeedOut {
        0% {
            opacity : 1;
        }
        100% {
            .transform(translate3d(100%, 0, 0) skewX(30deg));
            opacity : 0;
        }
    }
    @keyframes lightSpeedOut {
        0% {
            opacity : 1;
        }
        100% {
            .transform(translate3d(100%, 0, 0) skewX(30deg));
            opacity : 0;
        }
    }
    .lightSpeedOut {
        .animation-name(lightSpeedOut);
        .animation-timing-function(ease-in);
    }
}

// Specials
//=============================================
& when (@animate-hinge) {
    @-webkit-keyframes hinge {
        0% {
            .transform-origin(top left);
            .animation-timing-function(ease-in-out);
        }
        20%, 60% {
            .rotate3d(0, 0, 1, 80deg);
            .transform-origin(top left);
            .animation-timing-function(ease-in-out);
        }
        40%, 80% {
            .rotate3d(0, 0, 1, 60deg);
            .transform-origin(top left);
            .animation-timing-function(ease-in-out);
            opacity : 1;
        }
        100% {
            .translate3d(0, 700px, 0);
            opacity : 0;
        }
    }
    @keyframes hinge {
        0% {
            .transform-origin(top left);
            .animation-timing-function(ease-in-out);
        }
        20%, 60% {
            .rotate3d(0, 0, 1, 80deg);
            .transform-origin(top left);
            .animation-timing-function(ease-in-out);
        }
        40%, 80% {
            .rotate3d(0, 0, 1, 60deg);
            .transform-origin(top left);
            .animation-timing-function(ease-in-out);
            opacity : 1;
        }
        100% {
            .translate3d(0, 700px, 0);
            opacity : 0;
        }
    }
    .hinge {
        .animation-name(hinge);
    }
}
& when (@animate-rollIn) {
    @-webkit-keyframes rollIn {
        0% {
            opacity : 0;
            .transform(translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg));
        }
        100% {
            opacity : 1;
            .transform(none);
        }
    }
    @keyframes rollIn {
        0% {
            opacity : 0;
            .transform(translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg));
        }
        100% {
            opacity : 1;
            .transform(none);
        }
    }
    .rollIn {
        .animation-name(rollIn);
    }
}
& when (@animate-rollOut) {
    @-webkit-keyframes rollOut {
        0% {
            opacity : 1;
        }
        100% {
            opacity : 0;
            .transform(translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg));
        }
    }
    @keyframes rollOut {
        0% {
            opacity : 1;
        }
        100% {
            opacity : 0;
            .transform(translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg));
        }
    }
    .rollOut {
        .animation-name(rollOut);
    }
}

// Zoom Entrances
//=============================================
& when (@animate-zoomIn) {
    @-webkit-keyframes zoomIn {
        0% {
            opacity : 0;
            .scale3d(.3, .3, .3);
        }
        50% {
            opacity : 1;
        }
    }
    @keyframes zoomIn {
        0% {
            opacity : 0;
            .scale3d(.3, .3, .3);
        }
        50% {
            opacity : 1;
        }
    }
    .zoomIn {
        .animation-name(zoomIn);
    }
}
& when (@animate-zoomInDown) {
    @-webkit-keyframes zoomInDown {
        0% {
            opacity : 0;
            .transform(scale3d(.1, .1, .1) translate3d(0, -1000px, 0));
            .animation-timing-function(cubic-bezier(0.550, 0.055, 0.675, 0.190));
        }
        60% {
            opacity : 1;
            .transform(scale3d(.475, .475, .475) translate3d(0, 60px, 0));
            .animation-timing-function(cubic-bezier(0.175, 0.885, 0.320, 1));
        }
    }
    @keyframes zoomInDown {
        0% {
            opacity : 0;
            .transform(scale3d(.1, .1, .1) translate3d(0, -1000px, 0));
            .animation-timing-function(cubic-bezier(0.550, 0.055, 0.675, 0.190));
        }
        60% {
            opacity : 1;
            .transform(scale3d(.475, .475, .475) translate3d(0, 60px, 0));
            .animation-timing-function(cubic-bezier(0.175, 0.885, 0.320, 1));
        }
    }
    .zoomInDown {
        .animation-name(zoomInDown);
    }
}
& when (@animate-zoomInLeft) {
    @-webkit-keyframes zoomInLeft {
        0% {
            opacity : 0;
            .transform(scale3d(.1, .1, .1) translate3d(-1000px, 0, 0));
            .animation-timing-function(cubic-bezier(0.550, 0.055, 0.675, 0.190));
        }
        60% {
            opacity : 1;
            .transform(scale3d(.475, .475, .475) translate3d(10px, 0, 0));
            .animation-timing-function(cubic-bezier(0.175, 0.885, 0.320, 1));
        }
    }
    @keyframes zoomInLeft {
        0% {
            opacity : 0;
            .transform(scale3d(.1, .1, .1) translate3d(-1000px, 0, 0));
            .animation-timing-function(cubic-bezier(0.550, 0.055, 0.675, 0.190));
        }
        60% {
            opacity : 1;
            .transform(scale3d(.475, .475, .475) translate3d(10px, 0, 0));
            .animation-timing-function(cubic-bezier(0.175, 0.885, 0.320, 1));
        }
    }
    .zoomInLeft {
        .animation-name(zoomInLeft);
    }
}
& when (@animate-zoomInRight) {
    @-webkit-keyframes zoomInRight {
        0% {
            opacity : 0;
            .transform(scale3d(.1, .1, .1) translate3d(1000px, 0, 0));
            .animation-timing-function(cubic-bezier(0.550, 0.055, 0.675, 0.190));
        }
        60% {
            opacity : 1;
            .transform(scale3d(.475, .475, .475) translate3d(-10px, 0, 0));
            .animation-timing-function(cubic-bezier(0.175, 0.885, 0.320, 1));
        }
    }
    @keyframes zoomInRight {
        0% {
            opacity : 0;
            .transform(scale3d(.1, .1, .1) translate3d(1000px, 0, 0));
            .animation-timing-function(cubic-bezier(0.550, 0.055, 0.675, 0.190));
        }
        60% {
            opacity : 1;
            .transform(scale3d(.475, .475, .475) translate3d(-10px, 0, 0));
            .animation-timing-function(cubic-bezier(0.175, 0.885, 0.320, 1));
        }
    }
    .zoomInRight {
        .animation-name(zoomInRight);
    }
}
& when (@animate-zoomInUp) {
    @-webkit-keyframes zoomInUp {
        0% {
            opacity : 0;
            .transform(scale3d(.1, .1, .1) translate3d(0, 1000px, 0));
            .animation-timing-function(cubic-bezier(0.550, 0.055, 0.675, 0.190));
        }
        60% {
            opacity : 1;
            .transform(scale3d(.475, .475, .475) translate3d(0, -60px, 0));
            .animation-timing-function(cubic-bezier(0.175, 0.885, 0.320, 1));
        }
    }
    @keyframes zoomInUp {
        0% {
            opacity : 0;
            .transform(scale3d(.1, .1, .1) translate3d(0, 1000px, 0));
            .animation-timing-function(cubic-bezier(0.550, 0.055, 0.675, 0.190));
        }
        60% {
            opacity : 1;
            .transform(scale3d(.475, .475, .475) translate3d(0, -60px, 0));
            .animation-timing-function(cubic-bezier(0.175, 0.885, 0.320, 1));
        }
    }
    .zoomInUp {
        .animation-name(zoomInUp);
    }
}

// Zoom Exits
//=============================================
& when (@animate-zoomOut) {
    @-webkit-keyframes zoomOut {
        0% {
            opacity : 1;
        }
        50% {
            opacity : 0;
            .scale3d(.3, .3, .3);
        }
        100% {
            opacity : 0;
        }
    }
    @keyframes zoomOut {
        0% {
            opacity : 1;
        }
        50% {
            opacity : 0;
            .scale3d(.3, .3, .3);
        }
        100% {
            opacity : 0;
        }
    }
    .zoomOut {
        .animation-name(zoomOut);
    }
}
& when (@animate-zoomOutDown) {
    @-webkit-keyframes zoomOutDown {
        40% {
            opacity : 1;
            .transform(scale3d(.475, .475, .475) translate3d(0, -60px, 0));
            .animation-timing-function(cubic-bezier(0.550, 0.055, 0.675, 0.190));
        }
        100% {
            opacity : 0;
            .transform(scale3d(.1, .1, .1) translate3d(0, 2000px, 0));
            .transform-origin(center bottom);
            .animation-timing-function(cubic-bezier(0.175, 0.885, 0.320, 1));
        }
    }
    @keyframes zoomOutDown {
        40% {
            opacity : 1;
            .transform(scale3d(.475, .475, .475) translate3d(0, -60px, 0));
            .animation-timing-function(cubic-bezier(0.550, 0.055, 0.675, 0.190));
        }
        100% {
            opacity : 0;
            .transform(scale3d(.1, .1, .1) translate3d(0, 2000px, 0));
            .transform-origin(center bottom);
            .animation-timing-function(cubic-bezier(0.175, 0.885, 0.320, 1));
        }
    }
    .zoomOutDown {
        .animation-name(zoomOutDown);
    }
}
& when (@animate-zoomOutLeft) {
    @-webkit-keyframes zoomOutLeft {
        40% {
            opacity : 1;
            .transform(scale3d(.475, .475, .475) translate3d(42px, 0, 0));
        }
        100% {
            opacity : 0;
            .transform(scale(.1) translate3d(-2000px, 0, 0));
            .transform-origin(left center);
        }
    }
    @keyframes zoomOutLeft {
        40% {
            opacity : 1;
            .transform(scale3d(.475, .475, .475) translate3d(42px, 0, 0));
        }
        100% {
            opacity : 0;
            .transform(scale(.1) translate3d(-2000px, 0, 0));
            .transform-origin(left center);
        }
    }
    .zoomOutLeft {
        .animation-name(zoomOutLeft);
    }
}
& when (@animate-zoomOutRight) {
    @-webkit-keyframes zoomOutRight {
        40% {
            opacity : 1;
            .transform(scale3d(.475, .475, .475) translate3d(-42px, 0, 0));
        }
        100% {
            opacity : 0;
            .transform(scale(.1) translate3d(2000px, 0, 0));
            .transform-origin(right center);
        }
    }
    @keyframes zoomOutRight {
        40% {
            opacity : 1;
            .transform(scale3d(.475, .475, .475) translate3d(-42px, 0, 0));
        }
        100% {
            opacity : 0;
            .transform(scale(.1) translate3d(2000px, 0, 0));
            .transform-origin(right center);
        }
    }
    .zoomOutRight {
        .animation-name(zoomOutRight);
    }
}
& when (@animate-zoomOutUp) {
    @-webkit-keyframes zoomOutUp {
        40% {
            opacity : 1;
            .transform(scale3d(.475, .475, .475) translate3d(0, 60px, 0));
            .animation-timing-function(cubic-bezier(0.550, 0.055, 0.675, 0.190));
        }
        100% {
            opacity : 0;
            .transform(scale3d(.1, .1, .1) translate3d(0, -2000px, 0));
            .transform-origin(center bottom);
            .animation-timing-function(cubic-bezier(0.175, 0.885, 0.320, 1));
        }
    }
    @keyframes zoomOutUp {
        40% {
            opacity : 1;
            .transform(scale3d(.475, .475, .475) translate3d(0, 60px, 0));
            .animation-timing-function(cubic-bezier(0.550, 0.055, 0.675, 0.190));
        }
        100% {
            opacity : 0;
            .transform(scale3d(.1, .1, .1) translate3d(0, -2000px, 0));
            .transform-origin(center bottom);
            .animation-timing-function(cubic-bezier(0.175, 0.885, 0.320, 1));
        }
    }
    .zoomOutUp {
        .animation-name(zoomOutUp);
    }
}

// Sliding Entrances
//=============================================
& when (@animate-slideInDown) {
    @-webkit-keyframes slideInDown {
        0% {
            .translate3d(0, -100%, 0);
            visibility : visible;
        }
        100% {
            .translate3d(0, 0, 0);
        }
    }
    @keyframes slideInDown {
        0% {
            .translate3d(0, -100%, 0);
            visibility : visible;
        }
        100% {
            .translate3d(0, 0, 0);
        }
    }
    .slideInDown {
        .animation-name(slideInDown);
    }
}
& when (@animate-slideInLeft) {
    @-webkit-keyframes slideInLeft {
        0% {
            .translate3d(-100%, 0, 0);
            visibility : visible;
        }
        100% {
            .translate3d(0, 0, 0);
        }
    }
    @keyframes slideInLeft {
        0% {
            .translate3d(-100%, 0, 0);
            visibility : visible;
        }
        100% {
            .translate3d(0, 0, 0);
        }
    }
    .slideInLeft {
        .animation-name(slideInLeft);
    }
}
& when (@animate-slideInRight) {
    @-webkit-keyframes slideInRight {
        0% {
            .translate3d(100%, 0, 0);
            visibility : visible;
        }
        100% {
            .translate3d(0, 0, 0);
        }
    }
    @keyframes slideInRight {
        0% {
            .translate3d(100%, 0, 0);
            visibility : visible;
        }
        100% {
            .translate3d(0, 0, 0);
        }
    }
    .slideInRight {
        .animation-name(slideInRight);
    }
}
& when (@animate-slideInUp) {
    @-webkit-keyframes slideInUp {
        0% {
            .translate3d(0, 100%, 0);
            visibility : visible;
        }
        100% {
            .translate3d(0, 0, 0);
        }
    }
    @keyframes slideInUp {
        0% {
            .translate3d(0, 100%, 0);
            visibility : visible;
        }
        100% {
            .translate3d(0, 0, 0);
        }
    }
    .slideInUp {
        .animation-name(slideInUp);
    }
}

// Sliding Entrances
//=============================================
& when (@animate-slideOutDown) {
    @-webkit-keyframes slideOutDown {
        0% {
            .translate3d(0, 0, 0);
        }
        100% {
            visibility : hidden;
            .translate3d(0, 100%, 0);
        }
    }
    @keyframes slideOutDown {
        0% {
            .translate3d(0, 0, 0);
        }
        100% {
            visibility : hidden;
            .translate3d(0, 100%, 0);
        }
    }
    .slideOutDown {
        .animation-name(slideOutDown);
    }
}
& when (@animate-slideOutLeft) {
    @-webkit-keyframes slideOutLeft {
        0% {
            .translate3d(0, 0, 0);
        }
        100% {
            visibility : hidden;
            .translate3d(-100%, 0, 0);
        }
    }
    @keyframes slideOutLeft {
        0% {
            .translate3d(0, 0, 0);
        }
        100% {
            visibility : hidden;
            .translate3d(-100%, 0, 0);
        }
    }
    .slideOutLeft {
        .animation-name(slideOutLeft);
    }
}
& when (@animate-slideOutRight) {
    @-webkit-keyframes slideOutRight {
        0% {
            .translate3d(0, 0, 0);
        }
        100% {
            visibility : hidden;
            .translate3d(100%, 0, 0);
        }
    }
    @keyframes slideOutRight {
        0% {
            .translate3d(0, 0, 0);
        }
        100% {
            visibility : hidden;
            .translate3d(100%, 0, 0);
        }
    }
    .slideOutRight {
        .animation-name(slideOutRight);
    }
}
& when (@animate-slideOutUp) {
    @-webkit-keyframes slideOutUp {
        0% {
            .translate3d(0, 0, 0);
        }
        100% {
            visibility : hidden;
            .translate3d(0, -100%, 0);
        }
    }
    @keyframes slideOutUp {
        0% {
            .translate3d(0, 0, 0);
        }
        100% {
            visibility : hidden;
            .translate3d(0, -100%, 0);
        }
    }
    .slideOutUp {
        .animation-name(slideOutUp);
    }
}