//    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);
    }
}
