.animate-duration(@duration) { //The animation-duration property defines how many seconds or milliseconds an animation takes to complete one cycle. Value: 1s/2s/3s...
    .prefixer(animation-duration; @duration; webkit);
}

.animate-direction(@direction) { //The animation-direction property defines whether or not the animation should play in reverse on alternate cycles. Value:normal/reverse/alternate.
    .prefixer(animation-direction; @direction; webkit);
}

.animate-delay(@delay) { //The animation-delay property defines when the animation will start. Value: 1s/2s/3s...
    .prefixer(animation-delay; @delay; webkit);
}

.animate-timing-function(@timing-function) { //The animation-timing-function specifies the speed curve of the animation. Value: linear/ease/ease-in/ease-out/ease-in-out/cubic-bezier(n,n,n,n).
    .prefixer(animation-timing-function; @timing-function; webkit);
}

.animation-fill-mode(@fill-mode) { //The animation-fill-mode property specifies what values are applied by the animation outside the time it is executing. Value: none/forwards/backwards/both.
    .prefixer(animation-fill-mode; @fill-mode; webkit);
}

.animation-iteration-count(@iteration-count) { //The animation-iteration-count property defines how many times an animation should be played. Value: n/infinite.
    .prefixer(animation-iteration-count; @iteration-count; webkit);
}

.animated() {
    .animation-fill-mode(both);
    .animate-duration(50ms);

    &.hinge{
        .animate-duration(2s)
    }
}
.animate-repeat() {
    .animation-iteration-count(infinite);
}

.animation-name(@name) { //The animation-name property specifies a name for the @keyframes animation. Value: keyframename/none.
    .prefixer(animation-name; @name; webkit);
}

.animation(...) { //The animation property specifies a name for the @keyframes animation. Value: keyframename/none.
    .prefixer(animation; @arguments; webkit);
}

//    Animate.css - http://daneden.me/animate
//    Licensed under the MIT license
//
//    Copyright (c) 2013 Daniel Eden
//
//    Permission is hereby granted, free of charge, to any person obtaining a copy of this software
//    and associated documentation files (the "Software"), to deal in the Software without restriction,
//    including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
//    and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
//    subject to the following conditions:
//
//    The above copyright notice and this permission notice shall be included in all copies
//    or substantial portions of the Software.
//
//    THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO
//    THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
//    IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
//    WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE
//    OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

// Attention seekers
//=============================================
.animate-flash(@activate : @animate-flash) when (@activate = true){

    @-webkit-keyframes flash{
        0%, 50%, 100%{ opacity : 1; }
        25%, 75%{ opacity : 0; }
    }

    @keyframes flash{
        0%, 50%, 100%{ opacity : 1; }
        25%, 75%{ opacity : 0; }
    }

}
.animate-bounce(@activate : @animate-bounce) when (@activate = true){

    @-webkit-keyframes bounce{
        0%, 20%, 50%, 80%, 100%{ -webkit-transform : translateY(0); }
        40%{ -webkit-transform : translateY(-30px); }
        60%{ -webkit-transform : translateY(-15px); }
    }

    @keyframes bounce{
        0%, 20%, 50%, 80%, 100%{ transform : translateY(0); }
        40%{ .transform(translateY(-30px)); }
        60%{ .transform(translateY(-15px)); }
    }
}
.animate-shake(@activate : @animate-shake) when (@activate = true){

    @-webkit-keyframes shake{
        0%, 100%{ -webkit-transform : translateX(0); }
        10%, 30%, 50%, 70%, 90%{ -webkit-transform : translateX(-10px); }
        20%, 40%, 60%, 80%{ -webkit-transform : translateX(10px); }
    }

    @keyframes shake{
        0%, 100%{ .transform(translateX(0)); }
        10%, 30%, 50%, 70%, 90%{ .transform(translateX(-10px)); }
        20%, 40%, 60%, 80%{ .transform(translateX(10px)); }
    }
}
.animate-tada(@activate : @animate-tada) when (@activate = true){

    @-webkit-keyframes tada{
        0%{ -webkit-transform : scale(1); }
        10%, 20%{ -webkit-transform : scale(0.9) rotate(-3deg); }
        30%, 50%, 70%, 90%{ -webkit-transform : scale(1.1) rotate(3deg); }
        40%, 60%, 80%{ -webkit-transform : scale(1.1) rotate(-3deg); }
        100%{ -webkit-transform : scale(1) rotate(0); }
    }

    @keyframes tada{
        0%{ .transform(scale(1)); }
        10%, 20%{ .transform(scale(0.9) rotate(-3deg)); }
        30%, 50%, 70%, 90%{ .transform(scale(1.1) rotate(3deg)); }
        40%, 60%, 80%{ .transform(scale(1.1) rotate(-3deg)); }
        100%{ .transform(scale(1) rotate(0)); }
    }
}
.animate-swing(@activate : @animate-swing) when (@activate = true){

    @-webkit-keyframes swing{
        20%, 40%, 60%, 80%, 100%{ -webkit-transform-origin : top center; }
        20%{ -webkit-transform : rotate(15deg); }
        40%{ -webkit-transform : rotate(-10deg); }
        60%{ -webkit-transform : rotate(5deg); }
        80%{ -webkit-transform : rotate(-5deg); }
        100%{ -webkit-transform : rotate(0deg); }
    }

    @keyframes swing{
        20%{ .rotate(15deg); }
        40%{ .rotate(-10deg); }
        60%{ .rotate(5deg); }
        80%{ .rotate(-5deg); }
        100%{ .rotate(0deg); }
    }
}
.animate-wobble(@activate : @animate-wobble) when (@activate = true){

    @-webkit-keyframes wobble{
        0%{ -webkit-transform : translateX(0%); }
        15%{ -webkit-transform : translateX(-25%) rotate(-5deg); }
        30%{ -webkit-transform : translateX(20%) rotate(3deg); }
        45%{ -webkit-transform : translateX(-15%) rotate(-3deg); }
        60%{ -webkit-transform : translateX(10%) rotate(2deg); }
        75%{ -webkit-transform : translateX(-5%) rotate(-1deg); }
        100%{ -webkit-transform : translateX(0%); }
    }

    @keyframes wobble{
        0%{ .transform(translateX(0%)); }
        15%{ .transform(translateX(-25%) rotate(-5deg)); }
        30%{ .transform(translateX(20%) rotate(3deg)); }
        45%{ .transform(translateX(-15%) rotate(-3deg)); }
        60%{ .transform(translateX(10%) rotate(2deg)); }
        75%{ .transform(translateX(-5%) rotate(-1deg)); }
        100%{ .transform(translateX(0%)); }
    }
}
.animate-wiggle(@activate : @animate-wiggle) when (@activate = true){

    @-webkit-keyframes wiggle{
        0%{ -webkit-transform : skewX(9deg); }
        10%{ -webkit-transform : skewX(-8deg); }
        20%{ -webkit-transform : skewX(7deg); }
        30%{ -webkit-transform : skewX(-6deg); }
        40%{ -webkit-transform : skewX(5deg); }
        50%{ -webkit-transform : skewX(-4deg); }
        60%{ -webkit-transform : skewX(3deg); }
        70%{ -webkit-transform : skewX(-2deg); }
        80%{ -webkit-transform : skewX(1deg); }
        90%{ -webkit-transform : skewX(0deg); }
        100%{ -webkit-transform : skewX(0deg); }
    }

    @keyframes wiggle{
        0%{ .transform(skewX(9deg)); }
        10%{ .transform(skewX(-8deg)); }
        20%{ .transform(skewX(7deg)); }
        30%{ .transform(skewX(-6deg)); }
        40%{ .transform(skewX(5deg)); }
        50%{ .transform(skewX(-4deg)); }
        60%{ .transform(skewX(3deg)); }
        70%{ .transform(skewX(-2deg)); }
        80%{ .transform(skewX(1deg)); }
        90%{ .transform(skewX(0deg)); }
        100%{ .transform(skewX(0deg)); }
    }
}
.animate-pulse(@activate : @animate-pulse) when (@activate = true){

    @-webkit-keyframes pulse{
        0%{ -webkit-transform : scale(1); }
        50%{ -webkit-transform : scale(1.1); }
        100%{ -webkit-transform : scale(1); }
    }
    @keyframes pulse{
        0%{ .scale(1); }
        50%{ .scale(1.1); }
        100%{ .scale(1); }
    }
}

// Flippers
//=============================================
.animate-flip(@activate : @animate-flip) when (@activate = true){

    @-webkit-keyframes flip{
        0%{
            -webkit-transform                 : perspective(400px) rotateY(0);
            -webkit-animation-timing-function : ease-out;
        }
        40%{
            -webkit-transform                 : perspective(400px) translateZ(150px) rotateY(170deg);
            -webkit-animation-timing-function : ease-out;
        }
        50%{
            -webkit-transform                 : perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
            -webkit-animation-timing-function : ease-in;
        }
        80%{
            -webkit-transform                 : perspective(400px) rotateY(360deg) scale(.95);
            -webkit-animation-timing-function : ease-in;
        }
        100%{
            -webkit-transform                 : perspective(400px) scale(1);
            -webkit-animation-timing-function : ease-in;
        }
    }
    @keyframes flip{
        0%{
            .transform(perspective(400px) rotateY(0));
            .animate-timing-function(ease-out);
        }
        40%{
            .transform(perspective(400px) translateZ(150px) rotateY(170deg));
            .animate-timing-function(ease-out);
        }
        50%{
            .transform(perspective(400px) translateZ(150px) rotateY(190deg) scale(1));
            .animate-timing-function(ease-in);
        }
        80%{
            .transform(perspective(400px) rotateY(360deg) scale(.95));
            .animate-timing-function(ease-in);
        }
        100%{
            .transform(perspective(400px) scale(1));
            .animate-timing-function(ease-in);
        }
    }
}
.animate-flipInX(@activate : @animate-flipInX) when (@activate = true){

    @-webkit-keyframes flipInX{
        0%{
            -webkit-transform : perspective(400px) rotateX(90deg);
            opacity           : 0;
        }

        40%{
            -webkit-transform : perspective(400px) rotateX(-10deg);
        }

        70%{
            -webkit-transform : perspective(400px) rotateX(10deg);
        }

        100%{
            -webkit-transform : perspective(400px) rotateX(0deg);
            opacity           : 1;
        }
    }
    @keyframes flipInX{
        0%{
            .transform(perspective(400px) rotateX(90deg));
            opacity : 0;
        }

        40%{
            .transform(perspective(400px) rotateX(-10deg));
        }

        70%{
            .transform(perspective(400px) rotateX(10deg));
        }

        100%{
            .transform(perspective(400px) rotateX(0deg));
            opacity : 1;
        }
    }
}
.animate-flipOutX(@activate : @animate-flipOutX) when (@activate = true){

    @-webkit-keyframes flipOutX{
        0%{
            -webkit-transform : perspective(400px) rotateX(0deg);
            opacity           : 1;
        }
        100%{
            -webkit-transform : perspective(400px) rotateX(90deg);
            opacity           : 0;
        }
    }

    @keyframes flipOutX{
        0%{
            .transform(perspective(400px) rotateX(0deg));
            opacity : 1;
        }
        100%{
            .transform(perspective(400px) rotateX(90deg));
            opacity : 0;
        }
    }
}
.animate-flipInY(@activate : @animate-flipInY) when (@activate = true){

    @-webkit-keyframes flipInY{
        0%{
            -webkit-transform : perspective(400px) rotateY(90deg);
            opacity           : 0;
        }

        40%{
            -webkit-transform : perspective(400px) rotateY(-10deg);
        }

        70%{
            -webkit-transform : perspective(400px) rotateY(10deg);
        }

        100%{
            -webkit-transform : perspective(400px) rotateY(0deg);
            opacity           : 1;
        }
    }
    @keyframes flipInY{
        0%{
            .transform(perspective(400px) rotateY(90deg));
            opacity : 0;
        }

        40%{
            .transform(perspective(400px) rotateY(-10deg));
        }

        70%{
            .transform(perspective(400px) rotateY(10deg));
        }

        100%{
            .transform(perspective(400px) rotateY(0deg));
            opacity : 1;
        }
    }
}
.animate-flipOutY(@activate : @animate-flipOutY) when (@activate = true){

    @-webkit-keyframes flipOutY{
        0%{
            -webkit-transform : perspective(400px) rotateY(0deg);
            opacity           : 1;
        }
        100%{
            -webkit-transform : perspective(400px) rotateY(90deg);
            opacity           : 0;
        }
    }
    @keyframes flipOutY{
        0%{
            .transform(perspective(400px) rotateY(0deg));
            opacity : 1;
        }
        100%{
            .transform(perspective(400px) rotateY(90deg));
            opacity : 0;
        }
    }
}

// Fading entrances
//=============================================
.animate-fadeIn(@activate : @animate-fadeIn) when (@activate = true){

    @-webkit-keyframes fadeIn{
        0%{ opacity : 0; }
        100%{ opacity : 1; }
    }

    @keyframes fadeIn{
        0%{ opacity : 0; }
        100%{ opacity : 1; }
    }
}
.animate-fadeInUp(@activate : @animate-fadeInUp) when (@activate = true){

    @-webkit-keyframes fadeInUp{
        0%{
            opacity           : 0;
            -webkit-transform : translateY(20px);
        }

        100%{
            opacity           : 1;
            -webkit-transform : translateY(0);
        }
    }

    @keyframes fadeInUp{
        0%{
            opacity : 0;
            .transform(translate(0 20px));
        }

        100%{
            opacity : 1;
            .transform(translate(0 0));
        }
    }
}
.animate-fadeInDown(@activate : @animate-fadeInDown) when (@activate = true){

    @-webkit-keyframes fadeInDown{
        0%{
            opacity           : 0;
            -webkit-transform : translateY(-20px);
        }

        100%{
            opacity           : 1;
            -webkit-transform : translateY(0);
        }
    }

    @keyframes fadeInDown{
        0%{
            opacity : 0;
            .transform(translate(0 -20px));
        }

        100%{
            opacity : 1;
            .transform(translate(0 0));
        }
    }
}
.animate-fadeInLeft(@activate : @animate-fadeInLeft) when (@activate = true){

    @-webkit-keyframes fadeInLeft{
        0%{
            opacity           : 0;
            -webkit-transform : translateX(-20px);
        }

        100%{
            opacity           : 1;
            -webkit-transform : translateX(0);
        }
    }

    @keyframes fadeInLeft{
        0%{
            opacity : 0;
            .transform(translate(-20px 0));
        }

        100%{
            opacity : 1;
            .transform(translate(0 0));
        }
    }
}
.animate-fadeInRight(@activate : @animate-fadeInRight) when (@activate = true){

    @-webkit-keyframes fadeInRight{
        0%{
            opacity           : 0;
            -webkit-transform : translateX(20px);
        }

        100%{
            opacity           : 1;
            -webkit-transform : translateX(0);
        }
    }

    @keyframes fadeInRight{
        0%{
            opacity : 0;
            .transform(translate(20px 0));
        }

        100%{
            opacity : 1;
            .transform(translate(0 0));
        }
    }
}
.animate-fadeInUpBig(@activate : @animate-fadeInUpBig) when (@activate = true){

    @-webkit-keyframes fadeInUpBig{
        0%{
            opacity           : 0;
            -webkit-transform : translateY(100%);
        }

        100%{
            opacity           : 1;
            -webkit-transform : translateY(0);
        }
    }

    @keyframes fadeInUpBig{
        0%{
            opacity : 0;
            .transform(translate(0 100%));
        }

        100%{
            opacity : 1;
            .transform(translate(0 0));
        }
    }
}
.animate-fadeInDownBig(@activate : @animate-fadeInDownBig) when (@activate = true){

    @-webkit-keyframes fadeInDownBig{
        0%{
            opacity           : 0;
            -webkit-transform : translateY(-100%);
        }

        100%{
            opacity           : 1;
            -webkit-transform : translateY(0);
        }
    }

    @keyframes fadeInDownBig{
        0%{
            opacity : 0;
            .transform(translate(0 -100%));
        }

        100%{
            opacity : 1;
            .transform(translate(0 0));
        }
    }
}
.animate-fadeInLeftBig(@activate : @animate-fadeInLeftBig) when (@activate = true){

    @-webkit-keyframes fadeInLeftBig{
        0%{
            opacity           : 0;
            -webkit-transform : translateX(-100%);
        }

        100%{
            opacity           : 1;
            -webkit-transform : translateX(0);
        }
    }
    @keyframes fadeInLeftBig{
        0%{
            opacity : 0;
            .transform(translate(-100% 0));
        }

        100%{
            opacity : 1;
            .transform(translate(0 0));
        }
    }
}
.animate-fadeInRightBig(@activate : @animate-fadeInRightBig) when (@activate = true){

    @-webkit-keyframes fadeInRightBig{
        0%{
            opacity           : 0;
            -webkit-transform : translateX(100%);
        }

        100%{
            opacity           : 1;
            -webkit-transform : translateX(0);
        }
    }

    @keyframes fadeInRightBig{
        0%{
            opacity : 0;
            .transform(translate(100% 0));
        }

        100%{
            opacity : 1;
            .transform(translate(0 0));
        }
    }
}

// Fading exits
//=============================================
.animate-fadeOut(@activate : @animate-fadeOut) when (@activate = true){

    @-webkit-keyframes fadeOut{
        0%{ opacity : 1; }
        100%{ opacity : 0; }
    }

    @keyframes fadeOut{
        0%{ opacity : 1; }
        100%{ opacity : 0; }
    }
}
.animate-fadeOutUp(@activate : @animate-fadeOutUp) when (@activate = true){

    @-webkit-keyframes fadeOutUp{
        0%{
            opacity           : 1;
            -webkit-transform : translateY(0);
        }

        100%{
            opacity           : 0;
            -webkit-transform : translateY(-20px);
        }
    }
    @keyframes fadeOutUp{
        0%{
            opacity : 1;
            .transform(translate(0 0));
        }

        100%{
            opacity : 0;
            .transform(translate(0 -20px));
        }
    }
}
.animate-fadeOutDown(@activate : @animate-fadeOutDown) when (@activate = true){

    @-webkit-keyframes fadeOutDown{
        0%{
            opacity           : 1;
            -webkit-transform : translateY(0);
        }

        100%{
            opacity           : 0;
            -webkit-transform : translateY(20px);
        }
    }

    @keyframes fadeOutDown{
        0%{
            opacity : 1;
            .transform(translate(0 0));
        }

        100%{
            opacity : 0;
            .transform(translate(0 20px));
        }
    }
}
.animate-fadeOutLeft(@activate : @animate-fadeOutLeft) when (@activate = true){

    @-webkit-keyframes fadeOutLeft{
        0%{
            opacity           : 1;
            -webkit-transform : translateX(0);
        }

        100%{
            opacity           : 0;
            -webkit-transform : translateX(-20px);
        }
    }

    @keyframes fadeOutLeft{
        0%{
            opacity : 1;
            .transform(translate(0 0));
        }

        100%{
            opacity : 0;
            .transform(translate(-20px 0));
        }
    }
}
.animate-fadeOutRight(@activate : @animate-fadeOutRight) when (@activate = true){

    @-webkit-keyframes fadeOutRight{
        0%{
            opacity           : 1;
            -webkit-transform : translateX(0);
        }

        100%{
            opacity           : 0;
            -webkit-transform : translateX(20px);
        }
    }

    @keyframes fadeOutRight{
        0%{
            opacity : 1;
            .transform(translate(0 0));
        }

        100%{
            opacity : 0;
            .transform(translate(20px 0));
        }
    }
}
.animate-fadeOutUpBig(@activate : @animate-fadeOutUpBig) when (@activate = true){

    @-webkit-keyframes fadeOutUpBig{
        0%{
            opacity           : 1;
            -webkit-transform : translateY(0);
        }

        100%{
            opacity           : 0;
            -webkit-transform : translateY(-100%);
        }
    }

    @keyframes fadeOutUpBig{
        0%{
            opacity : 1;
            .transform(translate(0 0));
        }

        100%{
            opacity : 0;
            .transform(translate(0 -100%));
        }
    }
}
.animate-fadeOutDownBig(@activate : @animate-fadeOutDownBig) when (@activate = true){

    @-webkit-keyframes fadeOutDownBig{
        0%{
            opacity           : 1;
            -webkit-transform : translateY(0);
        }

        100%{
            opacity           : 0;
            -webkit-transform : translateY(100%);
        }
    }

    @keyframes fadeOutDownBig{
        0%{
            opacity : 1;
            .transform(translate(0 0));
        }

        100%{
            opacity : 0;
            .transform(translate(0 100%));
        }
    }
}
.animate-fadeOutLeftBig(@activate : @animate-fadeOutLeftBig) when (@activate = true){

    @-webkit-keyframes fadeOutLeftBig{
        0%{
            opacity           : 1;
            -webkit-transform : translateX(0);
        }

        100%{
            opacity           : 0;
            -webkit-transform : translateX(-100%);
        }
    }

    @keyframes fadeOutLeftBig{
        0%{
            opacity : 1;
            .transform(translate(0 0));
        }

        100%{
            opacity : 0;
            .transform(translate(-100% 0));
        }
    }
}
.animate-fadeOutRightBig(@activate : @animate-fadeOutRightBig) when (@activate = true){

    @-webkit-keyframes fadeOutRightBig{
        0%{
            opacity           : 1;
            -webkit-transform : translateX(0);
        }

        100%{
            opacity           : 0;
            -webkit-transform : translateX(100%);
        }
    }
    @keyframes fadeOutRightBig{
        0%{
            opacity : 1;
            .transform(translate(0 0));
        }

        100%{
            opacity : 0;
            .transform(translate(100% 0));
        }
    }
}

// Bouncing entrances
//=============================================
.animate-bounceIn(@activate : @animate-bounceIn) when (@activate = true){

    @-webkit-keyframes bounceIn{
        0%{
            opacity           : 0;
            -webkit-transform : scale(.3);
        }

        50%{
            opacity           : 1;
            -webkit-transform : scale(1.05);
        }

        70%{
            -webkit-transform : scale(.9);
        }

        100%{
            -webkit-transform : scale(1);
        }
    }

    @keyframes bounceIn{
        0%{
            opacity : 0;
            .scale(.3);
        }

        50%{
            opacity : 1;
            .scale(1.05);
        }

        70%{
            .scale(.9);
        }

        100%{
            .scale(1);
        }
    }
}
.animate-bounceInUp(@activate : @animate-bounceInUp) when (@activate = true){

    @-webkit-keyframes bounceInUp{
        0%{
            opacity           : 0;
            -webkit-transform : translateY(100%);
        }

        60%{
            opacity           : 1;
            -webkit-transform : translateY(-30px);
        }

        80%{
            -webkit-transform : translateY(10px);
        }

        100%{
            -webkit-transform : translateY(0);
        }
    }
    @keyframes bounceInUp{
        0%{
            opacity : 0;
            .transform(translate(0 100%));
        }

        60%{
            opacity : 1;
            .transform(translate(0 -30px));
        }

        80%{
            .transform(translate(0 10px));
        }

        100%{
            .transform(translate(0 0));
        }
    }
}
.animate-bounceInDown(@activate : @animate-bounceInDown) when (@activate = true){

    @-webkit-keyframes bounceInDown{
        0%{
            opacity           : 0;
            -webkit-transform : translateY(-100%);
        }

        60%{
            opacity           : 1;
            -webkit-transform : translateY(30px);
        }

        80%{
            -webkit-transform : translateY(-10px);
        }

        100%{
            -webkit-transform : translateY(0);
        }
    }

    @keyframes bounceInDown{
        0%{
            opacity : 0;
            .transform(translate(0 -100%));
        }

        60%{
            opacity : 1;
            .transform(translate(0 30px));
        }

        80%{
            .transform(translate(0 -10px));
        }

        100%{
            .transform(translate(0 0));
        }
    }
}
.animate-bounceInLeft(@activate : @animate-bounceInLeft) when (@activate = true){

    @-webkit-keyframes bounceInLeft{
        0%{
            opacity           : 0;
            -webkit-transform : translateX(-100%);
        }

        60%{
            opacity           : 1;
            -webkit-transform : translateX(30px);
        }

        80%{
            -webkit-transform : translateX(-10px);
        }

        100%{
            -webkit-transform : translateX(0);
        }
    }

    @keyframes bounceInLeft{
        0%{
            opacity : 0;
            .transform(translate(-100% 0));
        }

        60%{
            opacity : 1;
            .transform(translate(30px 0));
        }

        80%{
            .transform(translate(-10px 0));
        }

        100%{
            .transform(translate(0 0));
        }
    }
}
.animate-bounceInRight(@activate : @animate-bounceInRight) when (@activate = true){

    @-webkit-keyframes bounceInRight{
        0%{
            opacity           : 0;
            -webkit-transform : translateX(100%);
        }

        60%{
            opacity           : 1;
            -webkit-transform : translateX(-30px);
        }

        80%{
            -webkit-transform : translateX(10px);
        }

        100%{
            -webkit-transform : translateX(0);
        }
    }

    @keyframes bounceInRight{
        0%{
            opacity : 0;
            .transform(translate(100% 0));
        }

        60%{
            opacity : 1;
            .transform(translate(-30px 0));
        }

        80%{
            .transform(translate(10px 0));
        }

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

// Bouncing exits
//=============================================
.animate-bounceOut(@activate : @animate-bounceOut) when (@activate = true){

    @-webkit-keyframes bounceOut{
        0%{
            -webkit-transform : scale(1);
        }

        25%{
            -webkit-transform : scale(.95);
        }

        50%{
            opacity           : 1;
            -webkit-transform : scale(1.1);
        }

        100%{
            opacity           : 0;
            -webkit-transform : scale(.3);
        }
    }

    @keyframes bounceOut{
        0%{
            .scale(1);
        }

        25%{
            .scale(.95);
        }

        50%{
            opacity : 1;
            .scale(1.1);
        }

        100%{
            opacity : 0;
            .scale(.3);
        }
    }
}
.animate-bounceOutUp(@activate : @animate-bounceOutUp) when (@activate = true){

    @-webkit-keyframes bounceOutUp{
        0%{
            -webkit-transform : translateY(0);
        }

        20%{
            opacity           : 1;
            -webkit-transform : translateY(20px);
        }

        100%{
            opacity           : 0;
            -webkit-transform : translateY(-100%);
        }
    }

    @keyframes bounceOutUp{
        0%{
            .transform(translate(0 0));
        }

        20%{
            opacity : 1;
            .transform(translate(0 20px));
        }

        100%{
            opacity : 0;
            .transform(translate(0 -100%));
        }
    }
}
.animate-bounceOutDown(@activate : @animate-bounceOutDown) when (@activate = true){

    @-webkit-keyframes bounceOutDown{
        0%{
            -webkit-transform : translateY(0);
        }

        20%{
            opacity           : 1;
            -webkit-transform : translateY(-20px);
        }

        100%{
            opacity           : 0;
            -webkit-transform : translateY(100%);
        }
    }

    @keyframes bounceOutDown{
        0%{
            .transform(translate(0 0));
        }

        20%{
            opacity : 1;
            .transform(translate(0 -20px));
        }

        100%{
            opacity : 0;
            .transform(translate(0 100%));
        }
    }
}
.animate-bounceOutLeft(@activate : @animate-bounceOutLeft) when (@activate = true){

    @-webkit-keyframes bounceOutLeft{
        0%{
            -webkit-transform : translateX(0);
        }

        20%{
            opacity           : 1;
            -webkit-transform : translateX(20px);
        }

        100%{
            opacity           : 0;
            -webkit-transform : translateX(-100%);
        }
    }

    @keyframes bounceOutLeft{
        0%{
            .transform(translate(0 0));
        }

        20%{
            opacity : 1;
            .transform(translate(20px 0));
        }

        100%{
            opacity : 0;
            .transform(translate(-100% 0));
        }
    }
}
.animate-bounceOutRight(@activate : @animate-bounceOutRight) when (@activate = true){

    @-webkit-keyframes bounceOutRight{
        0%{
            -webkit-transform : translateX(0);
        }

        20%{
            opacity           : 1;
            -webkit-transform : translateX(-20px);
        }

        100%{
            opacity           : 0;
            -webkit-transform : translateX(100%);
        }
    }

    @keyframes bounceOutRight{
        0%{
            .transform(translate(0 0));
        }

        20%{
            opacity : 1;
            .transform(translate(-20px 0));
        }

        100%{
            opacity : 0;
            .transform(translate(100% 0));
        }
    }
}

// Rotating entrances
//=============================================
.animate-rotateIn(@activate : @animate-rotateIn) when (@activate = true){

    @-webkit-keyframes rotateIn{
        0%{
            -webkit-transform-origin : center center;
            -webkit-transform        : rotate(-200deg);
            opacity                  : 0;
        }

        100%{
            -webkit-transform-origin : center center;
            -webkit-transform        : rotate(0);
            opacity                  : 1;
        }
    }
    @keyframes rotateIn{
        0%{
            .transform-origin(center center);
            .rotate(-200deg);
            opacity : 0;
        }

        100%{
            .transform-origin(center center);
            .rotate(0);
            opacity : 1;
        }
    }
}
.animate-rotateInUpLeft(@activate : @animate-rotateInUpLeft) when (@activate = true){

    @-webkit-keyframes rotateInUpLeft{
        0%{
            -webkit-transform-origin : left bottom;
            -webkit-transform        : rotate(90deg);
            opacity                  : 0;
        }

        100%{
            -webkit-transform-origin : left bottom;
            -webkit-transform        : rotate(0);
            opacity                  : 1;
        }
    }

    @keyframes rotateInUpLeft{
        0%{
            .transform-origin(left bottom);
            .rotate(90deg);
            opacity : 0;
        }

        100%{
            .transform-origin(left bottom);
            .rotate(0);
            opacity : 1;
        }
    }
}
.animate-rotateInDownLeft(@activate : @animate-rotateInDownLeft) when (@activate = true){

    @-webkit-keyframes rotateInDownLeft{
        0%{
            -webkit-transform-origin : left bottom;
            -webkit-transform        : rotate(-90deg);
            opacity                  : 0;
        }

        100%{
            -webkit-transform-origin : left bottom;
            -webkit-transform        : rotate(0);
            opacity                  : 1;
        }
    }

    @keyframes rotateInDownLeft{
        0%{
            .transform-origin(left bottom);
            .rotate(-90deg);
            opacity : 0;
        }

        100%{
            .transform-origin(left bottom);
            .rotate(0);
            opacity : 1;
        }
    }
}
.animate-rotateInUpRight(@activate : @animate-rotateInUpRight) when (@activate = true){

    @-webkit-keyframes rotateInUpRight{
        0%{
            -webkit-transform-origin : right bottom;
            -webkit-transform        : rotate(-90deg);
            opacity                  : 0;
        }

        100%{
            -webkit-transform-origin : right bottom;
            -webkit-transform        : rotate(0);
            opacity                  : 1;
        }
    }

    @keyframes rotateInUpRight{
        0%{
            .transform-origin(right bottom);
            .rotate(-90deg);
            opacity : 0;
        }

        100%{
            .transform-origin(right bottom);
            .rotate(0);
            opacity : 1;
        }
    }
}
.animate-rotateInDownRight(@activate : @animate-rotateInDownRight) when (@activate = true){

    @-webkit-keyframes rotateInDownRight{
        0%{
            -webkit-transform-origin : right bottom;
            -webkit-transform        : rotate(90deg);
            opacity                  : 0;
        }

        100%{
            -webkit-transform-origin : right bottom;
            -webkit-transform        : rotate(0);
            opacity                  : 1;
        }
    }

    @keyframes rotateInDownRight{
        0%{
            .transform-origin(right bottom);
            .rotate(90deg);
            opacity : 0;
        }

        100%{
            .transform-origin(right bottom);
            .rotate(0);
            opacity : 1;
        }
    }
}

// Rotating exits
//=============================================
.animate-rotateOut(@activate : @animate-rotateOut) when (@activate = true){

    @-webkit-keyframes rotateOut{
        0%{
            -webkit-transform-origin : center center;
            -webkit-transform        : rotate(0);
            opacity                  : 1;
        }

        100%{
            -webkit-transform-origin : center center;
            -webkit-transform        : rotate(200deg);
            opacity                  : 0;
        }
    }

    @keyframes rotateOut{
        0%{
            .transform-origin(center center);
            .rotate(0);
            opacity : 1;
        }

        100%{
            .transform-origin(center center);
            .rotate(200deg);
            opacity : 0;
        }
    }
}
.animate-rotateOutUpLeft(@activate : @animate-rotateOutUpLeft) when (@activate = true){

    @-webkit-keyframes rotateOutUpLeft{
        0%{
            -webkit-transform-origin : left bottom;
            -webkit-transform        : rotate(0);
            opacity                  : 1;
        }

        100%{
            -webkit-transform-origin : left bottom;
            -webkit-transform        : rotate(-90deg);
            opacity                  : 0;
        }
    }

    @keyframes rotateOutUpLeft{
        0%{
            .transform-origin(left bottom);
            .rotate(0);
            opacity : 1;
        }

        100%{
            .transform-origin(left bottom);
            .rotate(-90deg);
            opacity : 0;
        }
    }
}
.animate-rotateOutDownLeft(@activate : @animate-rotateOutDownLeft) when (@activate = true){

    @-webkit-keyframes rotateOutDownLeft{
        0%{
            -webkit-transform-origin : left bottom;
            -webkit-transform        : rotate(0);
            opacity                  : 1;
        }

        100%{
            -webkit-transform-origin : left bottom;
            -webkit-transform        : rotate(90deg);
            opacity                  : 0;
        }
    }

    @keyframes rotateOutDownLeft{
        0%{
            .transform-origin(left bottom);
            .rotate(0);
            opacity : 1;
        }

        100%{
            .transform-origin(left bottom);
            .rotate(90deg);
            opacity : 0;
        }
    }
}
.animate-rotateOutUpRight(@activate : @animate-rotateOutUpRight) when (@activate = true){

    @-webkit-keyframes rotateOutUpRight{
        0%{
            -webkit-transform-origin : right bottom;
            -webkit-transform        : rotate(0);
            opacity                  : 1;
        }

        100%{
            -webkit-transform-origin : right bottom;
            -webkit-transform        : rotate(90deg);
            opacity                  : 0;
        }
    }

    @keyframes rotateOutUpRight{
        0%{
            .transform-origin(right bottom);
            .rotate(0);
            opacity : 1;
        }

        100%{
            .transform-origin(right bottom);
            .rotate(90deg);
            opacity : 0;
        }
    }
}
.animate-rotateOutDownRight(@activate : @animate-rotateOutDownRight) when (@activate = true){

    @-webkit-keyframes rotateOutDownRight{
        0%{
            -webkit-transform-origin : right bottom;
            -webkit-transform        : rotate(0);
            opacity                  : 1;
        }

        100%{
            -webkit-transform-origin : right bottom;
            -webkit-transform        : rotate(-90deg);
            opacity                  : 0;
        }
    }

    @keyframes rotateOutDownRight{
        0%{
            .transform-origin(right bottom);
            .rotate(0);
            opacity : 1;
        }

        100%{
            .transform-origin(right bottom);
            .rotate(-90deg);
            opacity : 0;
        }
    }
}

// Lightspeed
//=============================================
.animate-lightSpeedIn(@activate : @animate-lightSpeedIn) when (@activate = true){

    @-webkit-keyframes lightSpeedIn{
        0%{ -webkit-transform : translateX(100%) skewX(-30deg); opacity : 0; }
        60%{ -webkit-transform : translateX(-20%) skewX(30deg); opacity : 1; }
        80%{ -webkit-transform : translateX(0%) skewX(-15deg); opacity : 1; }
        100%{ -webkit-transform : translateX(0%) skewX(0deg); opacity : 1; }
    }

    @keyframes lightSpeedIn{
        0%{
            .transform(translateX(100%) skewX(-30deg));
            opacity : 0;
        }
        60%{
            .transform(translateX(-20%) skewX(30deg));
            opacity : 1;
        }
        80%{
            .transform(translateX(0%) skewX(-15deg));
            opacity : 1;
        }
        100%{
            .transform(translateX(0%) skewX(0deg));
            opacity : 1;
        }
    }
}
.animate-lightSpeedOut(@activate : @animate-lightSpeedOut) when (@activate = true){

    @-webkit-keyframes lightSpeedOut{
        0%{ -webkit-transform : translateX(0%) skewX(0deg); opacity : 1; }
        100%{ -webkit-transform : translateX(100%) skewX(-30deg); opacity : 0; }
    }

    @keyframes lightSpeedOut{
        0%{
            .transform(translateX(0%) skewX(0deg));
            opacity : 1;
        }
        100%{
            .transform(translateX(100%) skewX(-30deg));
            opacity : 0;
        }
    }
}

// Specials
//=============================================
.animate-hinge(@activate : @animate-hinge) when (@activate = true){

    @-webkit-keyframes hinge{
        0%{ -webkit-transform : rotate(0); -webkit-transform-origin : top left; -webkit-animation-timing-function : ease-in-out; }
        20%, 60%{ -webkit-transform : rotate(80deg); -webkit-transform-origin : top left; -webkit-animation-timing-function : ease-in-out; }
        40%{ -webkit-transform : rotate(60deg); -webkit-transform-origin : top left; -webkit-animation-timing-function : ease-in-out; }
        80%{ -webkit-transform : rotate(60deg) translateY(0); opacity : 1; -webkit-transform-origin : top left; -webkit-animation-timing-function : ease-in-out; }
        100%{ -webkit-transform : translateY(700px); opacity : 0; }
    }

    @keyframes hinge{
        0%{
            .rotate(0);
            .transform-origin(top left);
            .animate-timing-function(ease-in-out);
        }
        20%, 60%{
            .rotate(80deg);
            .transform-origin(top left);
            .animate-timing-function(ease-in-out);
        }
        40%{
            .rotate(60deg);
            .transform-origin(top left);
            .animate-timing-function(ease-in-out);
        }
        80%{
            .transform(rotate(60deg) translate(0 0));
            .transform-origin(top left);
            .animate-timing-function(ease-in-out);
            opacity : 1;
        }
        100%{
            .transform(translate(0 700px));
            opacity : 0;
        }
    }
}
.animate-rollIn(@activate : @animate-rollIn) when (@activate = true){

    @-webkit-keyframes rollIn{
        0%{ opacity : 0; -webkit-transform : translateX(-100%) rotate(-120deg); }
        100%{ opacity : 1; -webkit-transform : translateX(0) rotate(0deg); }
    }

    @keyframes rollIn{
        0%{
            opacity : 0;
            .transform(translate(-100%, 0) rotate(-120deg));
        }
        100%{
            opacity : 1;
            .transform(translate(0, 0) rotate(0deg));
        }
    }
}
.animate-rollOut(@activate : @animate-rollOut) when (@activate = true){

    @-webkit-keyframes rollOut{
        0%{
            opacity           : 1;
            -webkit-transform : translateX(0) rotate(0deg);
        }

        100%{
            opacity           : 0;
            -webkit-transform : translateX(100%) rotate(120deg);
        }
    }

    @keyframes rollOut{
        0%{
            opacity : 1;
            .transform(translate(0, 0) rotate(0deg));
        }

        100%{
            opacity : 0;
            .transform(translate(100%, 0) rotate(120deg));
        }
    }
}

// Other
//=============================================
.animate-rotate(@activate : @animate-rotate) when (@activate = true){

    @-webkit-keyframes rotate{
        0%{
            -webkit-transform-origin : center center;
            -webkit-transform        : rotate(-360deg);
        }

        100%{
            -webkit-transform-origin : center center;
            -webkit-transform        : rotate(0);
        }
    }
    @keyframes rotate{
        0%{
            .transform-origin(center center);
            .rotate(-360deg);
        }

        100%{
            .transform-origin(center center);
            .rotate(0);
        }
    }
}
// Magic css3 animations
.animate-magic(@activate : @animate-magic) when (@activate = true){

    @-webkit-keyframes magic{
        0%{
            opacity                  : 1;
            -webkit-transform-origin : 100% 200%;
            -webkit-transform        : scale(1, 1) rotate(0deg);
        }

        100%{
            opacity                  : 0;
            -webkit-transform-origin : 200% 500%;
            -webkit-transform        : scale(0, 0) rotate(270deg);
        }
    }
    @keyframes magic{
        0%{
            opacity : 1;
            .transform-origin(100% 200%);
            .transform(scale(1, 1) rotate(0deg));
        }

        100%{
            opacity : 0;
            .transform-origin(200% 500%);
            .transform(scale(0, 0) rotate(270deg));
        }
    }
}
.animate-twisterInDown(@activate : @animate-twisterInDown) when (@activate = true){

    @-webkit-keyframes twisterInDown{
        0%{
            opacity                  : 0;
            -webkit-transform-origin : 0 100%;
            -webkit-transform        : scale(0, 0) rotate(360deg) translateY(-100%);
        }

        30%{
            -webkit-transform-origin : 0 100%;
            -webkit-transform        : scale(0, 0) rotate(360deg) translateY(-100%);
        }

        100%{
            opacity                  : 1;
            -webkit-transform-origin : 100% 100%;
            -webkit-transform        : scale(1, 1) rotate(0deg) translateY(0%);
        }
    }
    @keyframes twisterInDown{
        0%{
            opacity : 0;
            .transform-origin(0 100%);
            .transform(scale(0, 0) rotate(360deg) translate(0 -100%));
        }

        30%{
            .transform-origin(0 100%);
            .transform(scale(0, 0) rotate(360deg) translate(0 -100%));
        }

        100%{
            opacity : 1;
            .transform-origin(100% 100%);
            .transform(scale(1, 1) rotate(0deg) translate(0 0%));
        }
    }
}
.animate-twisterInUp(@activate : @animate-twisterInUp) when (@activate = true){

    @-webkit-keyframes twisterInUp{
        0%{
            opacity                  : 0;
            -webkit-transform-origin : 100% 0;
            -webkit-transform        : scale(0, 0) rotate(360deg) translateY(100%);
        }

        30%{
            -webkit-transform-origin : 100% 0;
            -webkit-transform        : scale(0, 0) rotate(360deg) translateY(100%);
        }

        100%{
            opacity                  : 1;
            -webkit-transform-origin : 0 0;
            -webkit-transform        : scale(1, 1) rotate(0deg) translateY(0);
        }
    }
    @keyframes twisterInUp{
        0%{
            opacity : 0;
            .transform-origin(100% 0);
            .transform(scale(0, 0) rotate(360deg) translate(0 100%));
        }

        30%{
            .transform-origin(100% 0);
            .transform(scale(0, 0) rotate(360deg) translate(0 100%));
        }

        100%{
            opacity : 1;
            .transform-origin(100% 100%);
            .transform(scale(1, 1) rotate(0deg) translate(0 0%));
        }
    }
}
.animate-swap(@activate : @animate-swap) when (@activate = true){

    @-webkit-keyframes swap{
        0%{
            opacity                  : 0;
            -webkit-transform-origin : 0 100%;
            -webkit-transform        : scale(0, 0) translate(-700px, 0);
        }

        100%{
            opacity                  : 1;
            -webkit-transform-origin : 100% 100%;
            -webkit-transform        : scale(1, 1) translate(0, 0);
        }
    }
    @keyframes swap{
        0%{
            opacity : 0;
            .transform-origin(0 100%);
            .transform(scale(0, 0) translate(-700px, 0));
        }

        100%{
            opacity : 1;
            .transform-origin(100% 100%);
            .transform(scale(1, 1) translate(0, 0));
        }
    }
}
// Bling
//=============================================
.animate-puffIn(@activate : @animate-puffIn) when (@activate = true){

    @-webkit-keyframes puffIn{
        0%{
            opacity                  : 0;
            -webkit-transform-origin : 50% 50%;
            -webkit-transform        : scale(2, 2);
        }

        100%{
            opacity                  : 1;
            -webkit-transform-origin : 50% 50%;
            -webkit-transform        : scale(1, 1);
        }
    }
    @keyframes puffIn{
        0%{
            opacity : 0;
            .transform-origin(50% 50%);
            .scale(2, 2);
        }

        100%{
            opacity : 1;
            .transform-origin(50% 50%);
            .scale(1, 1);
        }
    }
}
.animate-puffOut(@activate : @animate-puffOut) when (@activate = true){

    @-webkit-keyframes puffOut{
        0%{
            opacity                  : 1;
            -webkit-transform-origin : 50% 50%;
            -webkit-transform        : scale(1, 1);
        }
        100%{
            opacity                  : 0;
            -webkit-transform-origin : 50% 50%;
            -webkit-transform        : scale(2, 2);
        }
    }
    @keyframes puffOut{
        0%{
            opacity : 0;
            .transform-origin(50% 50%);
            .scale(2, 2);
        }

        100%{
            opacity : 1;
            .transform-origin(50% 50%);
            .scale(1, 1);
        }
    }
}
.animate-vanishIn(@activate : @animate-vanishIn) when (@activate = true){

    @-webkit-keyframes vanishIn{
        0%{
            opacity                  : 0;
            -webkit-transform-origin : 50% 50%;
            -webkit-transform        : scale(2, 2);
        }

        100%{
            opacity                  : 1;
            -webkit-transform-origin : 50% 50%;
            -webkit-transform        : scale(1, 1);
        }
    }
    @keyframes vanishIn{
        0%{
            opacity : 0;
            .transform-origin(50% 50%);
            .scale(2, 2);
        }

        100%{
            opacity : 1;
            .transform-origin(50% 50%);
            .scale(1, 1);
        }
    }
}
.animate-vanishOut(@activate : @animate-vanishOut) when (@activate = true){

    @-webkit-keyframes vanishOut{
        0%{
            opacity                  : 1;
            -webkit-transform-origin : 50% 50%;
            -webkit-transform        : scale(1, 1);
        }

        100%{
            opacity                  : 0;
            -webkit-transform-origin : 50% 50%;
            -webkit-transform        : scale(2, 2);
        }
    }
    @keyframes vanishOut{
        0%{
            opacity : 1;
            .transform-origin(50% 50%);
            .scale(1, 1);
        }

        100%{
            opacity : 0;
            .transform-origin(50% 50%);
            .scale(2, 2);
        }
    }
}
//Static Effects
//=============================================
.animate-openDownLeft(@activate : @animate-openDownLeft) when (@activate = true){

    @-webkit-keyframes openDownLeft{
        0%{
            -webkit-transform-origin          : bottom left;
            -webkit-transform                 : rotate(0deg);
            -webkit-animation-timing-function : ease-out;
        }

        100%{
            -webkit-transform-origin          : bottom left;
            -webkit-transform                 : rotate(-110deg);
            -webkit-animation-timing-function : ease-in-out;
        }
    }
    @keyframes openDownLeft{
        0%{
            .transform-origin(bottom left);
            .rotate(0deg);
            .animate-timing-function(ease-out);
        }

        100%{
            .transform-origin(bottom left);
            .rotate(-110deg);
            .animate-timing-function(ease-in-out);
        }
    }
}
.animate-openDownRight(@activate : @animate-openDownRight) when (@activate = true){

    @-webkit-keyframes openDownRight{
        0%{
            -webkit-transform-origin          : bottom right;
            -webkit-transform                 : rotate(0deg);
            -webkit-animation-timing-function : ease-out;
        }

        100%{
            -webkit-transform-origin          : bottom right;
            -webkit-transform                 : rotate(110deg);
            -webkit-animation-timing-function : ease-in-out;
        }
    }
    @keyframes openDownRight{
        0%{
            .transform-origin(bottom right);
            .rotate(0deg);
            .animate-timing-function(ease-out);
        }

        100%{
            .transform-origin(bottom right);
            .rotate(110deg);
            .animate-timing-function(ease-in-out);
        }
    }
}
.animate-openUpLeft(@activate : @animate-openUpLeft) when (@activate = true){

    @-webkit-keyframes openUpLeft{
        0%{
            -webkit-transform-origin          : top left;
            -webkit-transform                 : rotate(0deg);
            -webkit-animation-timing-function : ease-out;
        }

        100%{
            -webkit-transform-origin          : top left;
            -webkit-transform                 : rotate(110deg);
            -webkit-animation-timing-function : ease-in-out;
        }
    }
    @keyframes openUpLeft{
        0%{
            .transform-origin(top left);
            .rotate(0deg);
            .animate-timing-function(ease-out);
        }

        100%{
            .transform-origin(top left);
            .rotate(110deg);
            .animate-timing-function(ease-in-out);
        }
    }
}
.animate-openUpRight(@activate : @animate-openUpRight) when (@activate = true){

    @-webkit-keyframes openUpRight{
        0%{
            -webkit-transform-origin          : top right;
            -webkit-transform                 : rotate(0deg);
            -webkit-animation-timing-function : ease-out;
        }

        100%{
            -webkit-transform-origin          : top right;
            -webkit-transform                 : rotate(-110deg);
            -webkit-animation-timing-function : ease-in-out;
        }
    }
    @keyframes openUpRight{
        0%{
            .transform-origin(top right);
            .rotate(0deg);
            .animate-timing-function(ease-out);
        }

        100%{
            .transform-origin(top right);
            .rotate(-110deg);
            .animate-timing-function(ease-in-out);
        }
    }
}
.animate-openDownLeftReturn(@activate : @animate-openDownLeftReturn) when (@activate = true){

    @-webkit-keyframes openDownLeftReturn{
        0%{
            -webkit-transform-origin          : bottom left;
            -webkit-transform                 : rotate(-110deg);
            -webkit-animation-timing-function : ease-in-out;
        }

        100%{
            -webkit-transform-origin          : bottom left;
            -webkit-transform                 : rotate(0deg);
            -webkit-animation-timing-function : ease-out;
        }
    }
    @keyframes openDownLeftReturn{
        0%{
            .transform-origin(bottom left);
            .rotate(-110deg);
            .animate-timing-function(ease-in-out);
        }

        100%{
            .transform-origin(bottom left);
            .rotate(0deg);
            .animate-timing-function(ease-out);
        }
    }
}
.animate-openDownRightReturn(@activate : @animate-openDownRightReturn) when (@activate = true){

    @-webkit-keyframes openDownRightReturn{
        0%{
            -webkit-transform-origin          : bottom right;
            -webkit-transform                 : rotate(110deg);
            -webkit-animation-timing-function : ease-in-out;
        }

        100%{
            -webkit-transform-origin          : bottom right;
            -webkit-transform                 : rotate(0deg);
            -webkit-animation-timing-function : ease-out;
        }
    }
    @keyframes openDownRightReturn{
        0%{
            .transform-origin(bottom left);
            .rotate(110deg);
            .animate-timing-function(ease-in-out);
        }

        100%{
            .transform-origin(bottom left);
            .rotate(0deg);
            .animate-timing-function(ease-out);
        }
    }
}
.animate-openUpLeftReturn(@activate : @animate-openUpLeftReturn) when (@activate = true){

    @-webkit-keyframes openUpLeftReturn{
        0%{
            -webkit-transform-origin          : top left;
            -webkit-transform                 : rotate(110deg);
            -webkit-animation-timing-function : ease-in-out;
        }

        100%{
            -webkit-transform-origin          : top left;
            -webkit-transform                 : rotate(0deg);
            -webkit-animation-timing-function : ease-out;
        }
    }
    @keyframes openUpLeftReturn{
        0%{
            .transform-origin(top left);
            .rotate(110deg);
            .animate-timing-function(ease-in-out);
        }

        100%{
            .transform-origin(top left);
            .rotate(0deg);
            .animate-timing-function(ease-out);
        }
    }
}
.animate-openUpRightReturn(@activate : @animate-openUpRightReturn) when (@activate = true){

    @-webkit-keyframes openUpRightReturn{
        0%{
            -webkit-transform-origin          : top right;
            -webkit-transform                 : rotate(-110deg);
            -webkit-animation-timing-function : ease-in-out;
        }

        100%{
            -webkit-transform-origin          : top right;
            -webkit-transform                 : rotate(0deg);
            -webkit-animation-timing-function : ease-out;
        }
    }
    @keyframes openUpRightReturn{
        0%{
            .transform-origin(top right);
            .rotate(-110deg);
            .animate-timing-function(ease-in-out);
        }

        100%{
            .transform-origin(top right);
            .rotate(0deg);
            .animate-timing-function(ease-out);
        }
    }
}
//Perspective
//=============================================
.animate-perspectiveDown(@activate : @animate-perspectiveDown) when (@activate = true){

    @-webkit-keyframes perspectiveDown{
        0%{
            -webkit-transform-origin : 0 100%;
            -webkit-transform        : perspective(800px) rotateX(0deg);
        }

        100%{
            -webkit-transform-origin : 0 100%;
            -webkit-transform        : perspective(800px) rotateX(-180deg);
        }
    }
    @keyframes perspectiveDown{
        0%{
            .transform-origin(0 100%);
            .transform(perspective(800px) rotateX(0deg));
        }

        100%{
            .transform-origin(0 100%);
            .transform(perspective(800px) rotateX(-180deg));
        }
    }
}
.animate-perspectiveUp(@activate : @animate-perspectiveUp) when (@activate = true){

    @-webkit-keyframes perspectiveUp{
        0%{
            -webkit-transform-origin : 0 0;
            -webkit-transform        : perspective(800px) rotateX(0deg);
        }

        100%{
            -webkit-transform-origin : 0 0;
            -webkit-transform        : perspective(800px) rotateX(180deg);
        }
    }
    @keyframes perspectiveUp{
        0%{
            .transform-origin(0 0);
            .transform(perspective(800px) rotateX(0deg));
        }

        100%{
            .transform-origin(0 0);
            .transform(perspective(800px) rotateX(180deg));
        }
    }
}
.animate-perspectiveLeft(@activate : @animate-perspectiveLeft) when (@activate = true){

    @-webkit-keyframes perspectiveLeft{
        0%{
            -webkit-transform-origin : 0 0;
            -webkit-transform        : perspective(800px) rotateY(0deg);
        }

        100%{
            -webkit-transform-origin : 0 0;
            -webkit-transform        : perspective(800px) rotateY(-180deg);
        }
    }
    @keyframes perspectiveLeft{
        0%{
            .transform-origin(0 0);
            .transform(perspective(800px) rotateY(0deg));
        }

        100%{
            .transform-origin(0 0);
            .transform(perspective(800px) rotateY(180deg));
        }
    }
}
.animate-perspectiveRight(@activate : @animate-perspectiveRight) when (@activate = true){

    @-webkit-keyframes perspectiveRight{
        0%{
            -webkit-transform-origin : 100% 0;
            -webkit-transform        : perspective(800px) rotateY(0deg);
        }

        100%{
            -webkit-transform-origin : 100% 0;
            -webkit-transform        : perspective(800px) rotateY(180deg);
        }
    }
    @keyframes perspectiveRight{
        0%{
            .transform-origin(100% 0);
            .transform(perspective(800px) rotateX(0deg));
        }

        100%{
            .transform-origin(100% 0);
            .transform(perspective(800px) rotateX(180deg));
        }
    }
}
.animate-perspectiveDownReturn(@activate : @animate-perspectiveDownReturn) when (@activate = true){

    @-webkit-keyframes perspectiveDownReturn{
        0%{
            -webkit-transform-origin : 0 100%;
            -webkit-transform        : perspective(800px) rotateX(-180deg);
        }

        100%{
            -webkit-transform-origin : 0 100%;
            -webkit-transform        : perspective(800px) rotateX(0deg);
        }
    }
    @keyframes perspectiveDownReturn{
        0%{
            .transform-origin(0 100%);
            .transform(perspective(800px) rotateX(-180deg));
        }

        100%{
            .transform-origin(0 100%);
            .transform(perspective(800px) rotateX(0deg));
        }
    }
}
.animate-perspectiveUpReturn(@activate : @animate-perspectiveUpReturn) when (@activate = true){

    @-webkit-keyframes perspectiveUpReturn{
        0%{
            -webkit-transform-origin : 0 0;
            -webkit-transform        : perspective(800px) rotateX(180deg);
        }

        100%{
            -webkit-transform-origin : 0 0;
            -webkit-transform        : perspective(800px) rotateX(0deg);
        }
    }
    @keyframes perspectiveUpReturn{
        0%{
            .transform-origin(0 0);
            .transform(perspective(800px) rotateX(180deg));
        }

        100%{
            .transform-origin(0 0);
            .transform(perspective(800px) rotateX(0deg));
        }
    }
}
.animate-perspectiveLeftReturn(@activate : @animate-perspectiveLeftReturn) when (@activate = true){

    @-webkit-keyframes perspectiveLeftReturn{
        0%{
            -webkit-transform-origin : 0 0;
            -webkit-transform        : perspective(800px) rotateY(-180deg);
        }

        100%{
            -webkit-transform-origin : 0 0;
            -webkit-transform        : perspective(800px) rotateY(0deg);
        }
    }
    @keyframes perspectiveLeftReturn{
        0%{
            .transform-origin(0 0);
            .transform(perspective(800px) rotateX(-180deg));
        }

        100%{
            .transform-origin(0 0);
            .transform(perspective(800px) rotateX(0deg));
        }
    }
}
.animate-perspectiveRightReturn(@activate : @animate-perspectiveRightReturn) when (@activate = true){

    @-webkit-keyframes perspectiveRightReturn{
        0%{
            -webkit-transform-origin : 100% 0;
            -webkit-transform        : perspective(800px) rotateY(180deg);
        }

        100%{
            -webkit-transform-origin : 100% 0;
            -webkit-transform        : perspective(800px) rotateY(0deg);
        }
    }
    @keyframes perspectiveRightReturn{
        0%{
            .transform-origin(100% 0);
            .transform(perspective(800px) rotateX(180deg));
        }

        100%{
            .transform-origin(100% 0);
            .transform(perspective(800px) rotateX(0deg));
        }
    }
}
// Static Effects Out
//=============================================
.animate-openDownLeftOut(@activate : @animate-openDownLeftOut) when (@activate = true){

    @-webkit-keyframes openDownLeftOut{
        0%{
            opacity                           : 1;
            -webkit-transform-origin          : bottom left;
            -webkit-animation-timing-function : ease-out;
        }

        100%{
            opacity                           : 0;
            -webkit-transform-origin          : bottom left;
            -webkit-transform                 : rotate(-110deg);
            -webkit-animation-timing-function : ease-in-o;
        }
    }
    @keyframes openDownLeftOut{
        0%{
            opacity : 1;
            .transform-origin(bottom left);
            .animate-timing-function(ease-out);
        }

        100%{
            opacity : 0;
            .transform-origin(bottom left);
            .rotate(-110deg);
            .animate-timing-function(ease-in-o);
        }
    }
}
.animate-openDownRightOut(@activate : @animate-openDownRightOut) when (@activate = true){

    @-webkit-keyframes openDownRightOut{
        0%{
            opacity                           : 1;
            -webkit-transform-origin          : bottom right;
            -webkit-transform                 : rotate(0deg);
            -webkit-animation-timing-function : ease-out;
        }

        100%{
            opacity                           : 0;
            -webkit-transform-origin          : bottom right;
            -webkit-transform                 : rotate(110deg);
            -webkit-animation-timing-function : ease-in-o;
        }
    }
    @keyframes openDownRightOut{
        0%{
            opacity : 1;
            .transform-origin(bottom right);
            .rotate(0deg);
            .animate-timing-function(ease-out);
        }

        100%{
            opacity : 0;
            .transform-origin(bottom right);
            .rotate(110deg);
            .animate-timing-function(ease-in-o);
        }
    }
}
.animate-openUpLeftOut(@activate : @animate-openUpLeftOut) when (@activate = true){

    @-webkit-keyframes openUpLeftOut{
        0%{
            opacity                           : 1;
            -webkit-transform-origin          : top left;
            -webkit-transform                 : rotate(0deg);
            -webkit-animation-timing-function : ease-out;
        }

        100%{
            opacity                           : 0;
            -webkit-transform-origin          : top left;
            -webkit-transform                 : rotate(110deg);
            -webkit-animation-timing-function : ease-in-o;
        }
    }
    @keyframes openUpLeftOut{
        0%{
            opacity : 1;
            .transform-origin(top left);
            .rotate(0deg);
            .animate-timing-function(ease-out);
        }

        100%{
            opacity : 0;
            .transform-origin(top left);
            .rotate(110deg);
            .animate-timing-function(ease-in-o);
        }
    }
}
.animate-openUpRightOut(@activate : @animate-openUpRightOut) when (@activate = true){

    @-webkit-keyframes openUpRightOut{
        0%{
            opacity                           : 1;
            -webkit-transform-origin          : top right;
            -webkit-transform                 : rotate(0deg);
            -webkit-animation-timing-function : ease-out;
        }

        100%{
            opacity                           : 0;
            -webkit-transform-origin          : top right;
            -webkit-transform                 : rotate(-110deg);
            -webkit-animation-timing-function : ease-in-o;
        }
    }
    @keyframes openUpRightOut{
        0%{
            opacity : 1;
            .transform-origin(top right);
            .rotate(0deg);
            .animate-timing-function(ease-out);
        }

        100%{
            opacity : 0;
            .transform-origin(top right);
            .rotate(-110deg);
            .animate-timing-function(ease-in-o);
        }
    }
}
// Rotate
//=============================================
.animate-rotateDown(@activate : @animate-rotateDown) when (@activate = true){

    @-webkit-keyframes rotateDown{
        0%{
            -webkit-transform-origin : 0 0;
            -webkit-transform        : perspective(800px) rotateX(0deg) translateZ(0);
        }

        100%{
            opacity                  : 0;
            -webkit-transform-origin : 50% 100%;
            -webkit-transform        : perspective(800px) rotateX(-180deg) translateZ(300px);
        }
    }
    @keyframes rotateDown{
        0%{
            .transform-origin(0 0);
            .transform(perspective(800px) rotateX(0deg) translateZ(0));
        }

        100%{
            opacity : 0;
            .transform-origin(50% 100%);
            .transform(perspective(800px) rotateX(-180deg) translateZ(300px));
        }
    }
}
.animate-rotateUp(@activate : @animate-rotateUp) when (@activate = true){

    @-webkit-keyframes rotateUp{
        0%{
            -webkit-transform-origin : 0 0;
            -webkit-transform        : perspective(800px) rotateX(0deg) translateZ(0);
        }

        100%{
            opacity                  : 0;
            -webkit-transform-origin : 50% 0;
            -webkit-transform        : perspective(800px) rotateX(180deg) translateZ(100px);
        }
    }
    @keyframes rotateUp{
        0%{
            .transform-origin(0 0);
            .transform(perspective(800px) rotateX(0deg) translateZ(0));
        }

        100%{
            opacity : 0;
            .transform-origin(50% 0);
            .transform(perspective(800px) rotateX(180deg) translateZ(100px));
        }
    }
}
.animate-rotateLeft(@activate : @animate-rotateLeft) when (@activate = true){

    @-webkit-keyframes rotateLeft{
        0%{
            -webkit-transform-origin : 0 0;
            -webkit-transform        : perspective(800px) rotateY(0deg) translateZ(0);
        }

        100%{
            opacity                  : 0;
            -webkit-transform-origin : 50% 0;
            -webkit-transform        : perspective(800px) rotateY(180deg) translateZ(300px);
        }
    }
    @keyframes rotateLeft{
        0%{
            .transform-origin(0 0);
            .transform(perspective(800px) rotateY(0deg) translateZ(0));
        }

        100%{
            opacity : 0;
            .transform-origin(50% 0);
            .transform(perspective(800px) rotateY(180deg) translateZ(300px));
        }
    }
}
.animate-rotateRight(@activate : @animate-rotateRight) when (@activate = true){

    @-webkit-keyframes rotateRight{
        0%{
            -webkit-transform-origin : 0 0;
            -webkit-transform        : perspective(800px) rotateY(0deg) translate3d(0);
        }

        100%{
            opacity                  : 0;
            -webkit-transform-origin : 50% 0;
            -webkit-transform        : perspective(800px) rotateY(-180deg) translateZ(150px);
        }
    }
    @keyframes rotateRight{
        0%{
            .transform-origin(0 0);
            .transform(perspective(800px) rotateY(0deg) translate3d(0));
        }

        100%{
            opacity : 0;
            .transform-origin(50% 0);
            .transform(perspective(800px) rotateY(-180deg) translateZ(150px));
        }
    }
}
// Slide
//=============================================
.animate-slideDown(@activate : @animate-slideDown) when (@activate = true){

    @-webkit-keyframes slideDown{
        0%{
            -webkit-transform-origin : 0 0;
            -webkit-transform        : translateY(0%);
        }

        100%{
            -webkit-transform-origin : 0 0;
            -webkit-transform        : translateY(100%);
        }
    }
    @keyframes slideDown{
        0%{
            .transform-origin(0 0);
            .transform(translateY(0%));
        }

        100%{
            opacity : 0;
            .transform-origin(0 0);
            .transform(translateY(100%));
        }
    }
}
.animate-slideUp(@activate : @animate-slideUp) when (@activate = true){

    @-webkit-keyframes slideUp{
        0%{
            -webkit-transform-origin : 0 0;
            -webkit-transform        : translateY(0%);
        }

        100%{
            -webkit-transform-origin : 0 0;
            -webkit-transform        : translateY(-100%);
        }
    }
    @keyframes slideUp{
        0%{
            .transform-origin(0 0);
            .transform(translateY(0%));
        }

        100%{
            opacity : 0;
            .transform-origin(0 0);
            .transform(translateY(-100%));
        }
    }
}
.animate-slideLeft(@activate : @animate-slideLeft) when (@activate = true){

    @-webkit-keyframes slideLeft{
        0%{
            -webkit-transform-origin : 0 0;
            -webkit-transform        : translateX(0%);
        }

        100%{
            -webkit-transform-origin : 0 0;
            -webkit-transform        : translateX(-100%);
        }
    }
    @keyframes slideLeft{
        0%{
            .transform-origin(0 0);
            .transform(translateX(0%));
        }

        100%{
            opacity : 0;
            .transform-origin(0 0);
            .transform(translateX(-100%));
        }
    }
}
.animate-slideRight(@activate : @animate-slideRight) when (@activate = true){

    @-webkit-keyframes slideRight{
        0%{
            -webkit-transform-origin : 0 0;
            -webkit-transform        : translateX(0%);
        }

        100%{
            -webkit-transform-origin : 0 0;
            -webkit-transform        : translateX(100%);
        }
    }
    @keyframes slideRight{
        0%{
            .transform-origin(0 0);
            .transform(translateX(0%));
        }

        100%{
            opacity : 0;
            .transform-origin(0 0);
            .transform(translateX(100%));
        }
    }
}
.animate-slideDownReturn(@activate : @animate-slideDownReturn) when (@activate = true){

    @-webkit-keyframes slideDownReturn{
        0%{
            -webkit-transform-origin : 0 0;
            -webkit-transform        : translateY(100%);
        }

        100%{
            -webkit-transform-origin : 0 0;
            -webkit-transform        : translateY(0%);
        }
    }
    @keyframes slideDownReturn{
        0%{
            .transform-origin(0 0);
            .transform(translateY(100%));
        }

        100%{
            opacity : 0;
            .transform-origin(0 0);
            .transform(translateY(0%));
        }
    }
}
.animate-slideUpReturn(@activate : @animate-slideUpReturn) when (@activate = true){

    @-webkit-keyframes slideUpReturn{
        0%{
            -webkit-transform-origin : 0 0;
            -webkit-transform        : translateY(-100%);
        }

        100%{
            -webkit-transform-origin : 0 0;
            -webkit-transform        : translateY(0%);
        }
    }
    @keyframes slideUpReturn{
        0%{
            .transform-origin(0 0);
            .transform(translateY(-100%));
        }

        100%{
            opacity : 0;
            .transform-origin(0 0);
            .transform(translateY(0%));
        }
    }
}
.animate-slideLeftReturn(@activate : @animate-slideLeftReturn) when (@activate = true){

    @-webkit-keyframes slideLeftReturn{
        0%{
            -webkit-transform-origin : 0 0;
            -webkit-transform        : translateX(-100%);
        }

        100%{
            -webkit-transform-origin : 0 0;
            -webkit-transform        : translateX(0%);
        }
    }
    @keyframes slideLeftReturn{
        0%{
            .transform-origin(0 0);
            .transform(translateX(-100%));
        }

        100%{
            opacity : 0;
            .transform-origin(0 0);
            .transform(translateX(0%));
        }
    }
}
.animate-slideRightReturn(@activate : @animate-slideRightReturn) when (@activate = true){

    @-webkit-keyframes slideRightReturn{
        0%{
            -webkit-transform-origin : 0 0;
            -webkit-transform        : translateX(100%);
        }

        100%{
            -webkit-transform-origin : 0 0;
            -webkit-transform        : translateX(0%);
        }
    }
    @keyframes slideRightReturn{
        0%{
            .transform-origin(0 0);
            .transform(translateX(100%));
        }

        100%{
            opacity : 0;
            .transform-origin(0 0);
            .transform(translateX(0%));
        }
    }
}
// Math
//=============================================
.animate-swashOut(@activate : @animate-swashOut) when (@activate = true){

    @-webkit-keyframes swashOut{
        0%{
            opacity                  : 1;
            -webkit-transform-origin : 50% 50%;
            -webkit-transform        : scale(1, 1);
        }

        80%{
            opacity                  : 1;
            -webkit-transform-origin : 50% 50%;
            -webkit-transform        : scale(0.9, 0.9);
        }

        100%{
            opacity                  : 0;
            -webkit-transform-origin : 50% 50%;
            -webkit-transform        : scale(0, 0);
        }
    }
    @keyframes swashOut{
        0%{
            opacity : 1;
            .transform-origin(50% 50%);
            .scale(1, 1);
        }

        80%{
            opacity : 1;
            .transform-origin(50% 50%);
            .scale(0.9, 0.9);
        }

        100%{
            opacity : 0;
            .transform-origin(50% 50%);
            .scale(0, 0);
        }
    }
}
.animate-swashIn(@activate : @animate-swashIn) when (@activate = true){

    @-webkit-keyframes swashIn{
        0%{
            opacity                  : 0;
            -webkit-transform-origin : 50% 50%;
            -webkit-transform        : scale(0, 0);
        }

        90%{
            opacity                  : 1;
            -webkit-transform-origin : 50% 50%;
            -webkit-transform        : scale(0.9, 0.9);
        }

        100%{
            -webkit-transform-origin : 50% 50%;
            -webkit-transform        : scale(1, 1);
        }
    }
    @keyframes swashIn{
        0%{
            opacity : 0;
            .transform-origin(50% 50%);
            .scale(0, 0);
        }

        90%{
            opacity : 1;
            .transform-origin(50% 50%);
            .scale(0.9, 0.9);
        }

        100%{
            .transform-origin(50% 50%);
            .scale(1, 1);
        }
    }
}
.animate-foolishOut(@activate : @animate-foolishOut) when (@activate = true){

    @-webkit-keyframes foolishOut{
        0%{
            opacity                  : 1;
            -webkit-transform-origin : 50% 50%;
            -webkit-transform        : scale(1, 1) rotate(360deg);
        }

        20%{
            opacity                  : 1;
            -webkit-transform-origin : 0% 0%;
            -webkit-transform        : scale(0.5, 0.5) rotate(0deg);
        }

        40%{
            opacity                  : 1;
            -webkit-transform-origin : 100% 0%;
            -webkit-transform        : scale(0.5, 0.5) rotate(0deg);
        }

        60%{
            opacity                  : 1;
            -webkit-transform-origin : 0%;
            -webkit-transform        : scale(0.5, 0.5) rotate(0deg);
        }

        80%{
            opacity                  : 1;
            -webkit-transform-origin : 0% 100%;
            -webkit-transform        : scale(0.5, 0.5) rotate(0deg);
        }

        100%{
            opacity                  : 0;
            -webkit-transform-origin : 50% 50%;
            -webkit-transform        : scale(0, 0) rotate(0deg);
        }
    }
    @keyframes foolishOut{
        0%{
            opacity : 1;
            .transform-origin(50% 50%);
            .transform(scale(1, 1) rotate(360deg));
        }

        20%{
            opacity : 1;
            .transform-origin(0% 0%);
            .transform(scale(0.5, 0.5) rotate(0deg));
        }

        40%{
            opacity : 1;
            .transform-origin(100% 0%);
            .transform(scale(0.5, 0.5) rotate(0deg));
        }

        60%{
            opacity : 1;
            .transform-origin(0%);
            .transform(scale(0.5, 0.5) rotate(0deg));
        }

        80%{
            opacity : 1;
            .transform-origin(0% 100%);
            .transform(scale(0.5, 0.5) rotate(0deg));
        }

        100%{
            opacity : 0;
            .transform-origin(50% 50%);
            .transform(scale(0, 0) rotate(0deg));
        }
    }
}
.animate-foolishIn(@activate : @animate-foolishIn) when (@activate = true){

    @-webkit-keyframes foolishIn{
        0%{
            opacity                  : 0;
            -webkit-transform-origin : 50% 50%;
            -webkit-transform        : scale(0, 0) rotate(360deg);
        }

        20%{
            opacity                  : 1;
            -webkit-transform-origin : 0% 100%;
            -webkit-transform        : scale(0.5, 0.5) rotate(0deg);
        }

        40%{
            opacity                  : 1;
            -webkit-transform-origin : 100% 100%;
            -webkit-transform        : scale(0.5, 0.5) rotate(0deg);
        }

        60%{
            opacity                  : 1;
            -webkit-transform-origin : 0%;
            -webkit-transform        : scale(0.5, 0.5) rotate(0deg);
        }

        80%{
            opacity                  : 1;
            -webkit-transform-origin : 0% 0%;
            -webkit-transform        : scale(0.5, 0.5) rotate(0deg);
        }

        100%{
            opacity                  : 1;
            -webkit-transform-origin : 50% 50%;
            -webkit-transform        : scale(1, 1) rotate(0deg);
        }
    }
    @keyframes foolishIn{
        0%{
            opacity : 0;
            .transform-origin(50% 50%);
            .transform(scale(0, 0) rotate(360deg));
        }

        20%{
            opacity : 1;
            .transform-origin(0% 100%);
            .transform(scale(0.5, 0.5) rotate(0deg));
        }

        40%{
            opacity : 1;
            .transform-origin(100% 100%);
            .transform(scale(0.5, 0.5) rotate(0deg));
        }

        60%{
            opacity : 1;
            .transform-origin(0%);
            .transform(scale(0.5, 0.5) rotate(0deg));
        }

        80%{
            opacity : 1;
            .transform-origin(0% 0%);
            .transform(scale(0.5, 0.5) rotate(0deg));
        }

        100%{
            opacity : 1;
            .transform-origin(50% 50%);
            .transform(scale(1, 1) rotate(0deg));
        }
    }
}
.animate-holeOut(@activate : @animate-holeOut) when (@activate = true){

    @-webkit-keyframes holeOut{
        0%{
            opacity                  : 1;
            -webkit-transform-origin : 50% 50%;
            -webkit-transform        : scale(1, 1) rotateY(0deg);
        }

        100%{
            opacity                  : 0;
            -webkit-transform-origin : 50% 50%;
            -webkit-transform        : scale(0, 0) rotateY(180deg);
        }
    }
    @keyframes holeOut{
        0%{
            opacity : 1;
            .transform-origin(50% 50%);
            .transform(scale(1, 1) rotateY(0deg));
        }

        100%{
            opacity : 0;
            .transform-origin(50% 50%);
            .transform(scale(0, 0) rotateY(180deg));
        }
    }
}
// Tin
//=============================================
.animate-tinRightOut(@activate : @animate-tinRightOut) when (@activate = true){

    @-webkit-keyframes tinRightOut{
        0%, 20%, 40%, 50%{
            opacity           : 1;
            -webkit-transform : scale(1, 1) translateX(0);
        }

        10%, 30%{
            opacity           : 1;
            -webkit-transform : scale(1.1, 1.1) translateX(0);
        }
        100%{
            opacity           : 0;
            -webkit-transform : scale(1, 1) translateX(900%);
        }
    }
    @keyframes tinRightOut{
        0%, 20%, 40%, 50%{
            opacity : 1;
            .transform(scale(1, 1) translateX(0));
        }

        10%, 30%{
            opacity : 1;
            .transform(scale(1.1, 1.1) translateX(0));
        }
        100%{
            opacity : 0;
            .transform(scale(1, 1) translateX(900%));
        }
    }
}
.animate-tinLeftOut(@activate : @animate-tinLeftOut) when (@activate = true){

    @-webkit-keyframes tinLeftOut{
        0%, 20%, 40%, 50%{
            opacity           : 1;
            -webkit-transform : scale(1, 1) translateX(0);
        }

        10%, 30%{
            opacity           : 1;
            -webkit-transform : scale(1.1, 1.1) translateX(0);
        }
        100%{
            opacity           : 0;
            -webkit-transform : scale(1, 1) translateX(-900%);
        }
    }
    @keyframes tinLeftOut{
        0%, 20%, 40%, 50%{
            opacity : 1;
            .transform(scale(1, 1) translateX(0));
        }

        10%, 30%{
            opacity : 1;
            .transform(scale(1.1, 1.1) translateX(0));
        }
        100%{
            opacity : 0;
            .transform(scale(1, 1) translateX(-900%));
        }
    }
}
.animate-tinUpOut(@activate : @animate-tinUpOut) when (@activate = true){

    @-webkit-keyframes tinUpOut{
        0%, 20%, 40%, 50%{
            opacity           : 1;
            -webkit-transform : scale(1, 1) translateY(0);
        }

        10%, 30%{
            opacity           : 1;
            -webkit-transform : scale(1.1, 1.1) translateY(0);
        }

        100%{
            opacity           : 0;
            -webkit-transform : scale(1, 1) translateY(-900%);
        }
    }
    @keyframes tinUpOut{
        0%, 20%, 40%, 50%{
            opacity : 1;
            .transform(scale(1, 1) translateY(0));
        }

        10%, 30%{
            opacity : 1;
            .transform(scale(1.1, 1.1) translateY(0));
        }
        100%{
            opacity : 0;
            .transform(scale(1, 1) translateY(-900%));
        }
    }
}
.animate-tinDownOut(@activate : @animate-tinDownOut) when (@activate = true){

    @-webkit-keyframes tinDownOut{
        0%, 20%, 40%, 50%{
            opacity           : 1;
            -webkit-transform : scale(1, 1) translateY(0);
        }

        10%, 30%{
            opacity           : 1;
            -webkit-transform : scale(1.1, 1.1) translateY(0);
        }

        100%{
            opacity           : 0;
            -webkit-transform : scale(1, 1) translateY(900%);
        }
    }
    @keyframes tinDownOut{
        0%, 20%, 40%, 50%{
            opacity : 1;
            .transform(scale(1, 1) translateY(0));
        }

        10%, 30%{
            opacity : 1;
            .transform(scale(1.1, 1.1) translateY(0));
        }
        100%{
            opacity : 0;
            .transform(scale(1, 1) translateY(900%));
        }
    }
}
.animate-tinRightIn(@activate : @animate-tinRightIn) when (@activate = true){

    @-webkit-keyframes tinRightIn{
        0%{
            opacity           : 0;
            -webkit-transform : scale(1, 1) translateX(900%);
        }

        50%, 70%, 90%{
            opacity           : 1;
            -webkit-transform : scale(1.1, 1.1) translateX(0);
        }

        60%, 80%, 100%{
            opacity           : 1;
            -webkit-transform : scale(1, 1) translateX(0);
        }
    }
    @keyframes tinRightIn{
        0%{
            opacity : 0;
            .transform(scale(1, 1) translateX(900%));
        }

        50%, 70%, 90%{
            opacity : 1;
            .transform(scale(1.1, 1.1) translateX(0));
        }

        60%, 80%, 100%{
            opacity : 1;
            .transform(scale(1, 1) translateX(0));
        }
    }
}
.animate-tinLeftIn(@activate : @animate-tinLeftIn) when (@activate = true){

    @-webkit-keyframes tinLeftIn{
        0%{
            opacity           : 0;
            -webkit-transform : scale(1, 1) translateX(-900%);
        }

        50%, 70%, 90%{
            opacity           : 1;
            -webkit-transform : scale(1.1, 1.1) translateX(0);
        }

        60%, 80%, 100%{
            opacity           : 1;
            -webkit-transform : scale(1, 1) translateX(0);
        }
    }
    @keyframes tinLeftIn{
        0%{
            opacity : 0;
            .transform(scale(1, 1) translateX(-900%));
        }

        50%, 70%, 90%{
            opacity : 1;
            .transform(scale(1.1, 1.1) translateX(0));
        }

        60%, 80%, 100%{
            opacity : 1;
            .transform(scale(1, 1) translateX(0));
        }
    }
}
.animate-tinUpIn(@activate : @animate-tinUpIn) when (@activate = true){

    @-webkit-keyframes tinUpIn{
        0%{
            opacity           : 0;
            -webkit-transform : scale(1, 1) translateY(-900%);
        }

        50%, 70%, 90%{
            opacity           : 1;
            -webkit-transform : scale(1.1, 1.1) translateY(0);
        }

        60%, 80%, 100%{
            opacity           : 1;
            -webkit-transform : scale(1, 1) translateY(0);
        }
    }
    @keyframes tinUpIn{
        0%{
            opacity : 0;
            .transform(scale(1, 1) translateY(-900%));
        }

        50%, 70%, 90%{
            opacity : 1;
            .transform(scale(1.1, 1.1) translateY(0));
        }

        60%, 80%, 100%{
            opacity : 1;
            .transform(scale(1, 1) translateY(0));
        }
    }
}
.animate-tinDownIn(@activate : @animate-tinDownIn) when (@activate = true){

    @-webkit-keyframes tinDownIn{
        0%{
            opacity           : 0;
            -webkit-transform : scale(1, 1) translateY(900%);
        }

        50%, 70%, 90%{
            opacity           : 1;
            -webkit-transform : scale(1.1, 1.1) translateY(0);
        }

        60%, 80%, 100%{
            opacity           : 1;
            -webkit-transform : scale(1, 1) translateY(0);
        }
    }
    @keyframes tinDownIn{
        0%{
            opacity : 0;
            .transform(scale(1, 1) translateY(900%));
        }

        50%, 70%, 90%{
            opacity : 1;
            .transform(scale(1.1, 1.1) translateY(0));
        }

        60%, 80%, 100%{
            opacity : 1;
            .transform(scale(1, 1) translateY(0));
        }
    }
}
// Bomb
//=============================================
.animate-bombRightOut(@activate : @animate-bombRightOut) when (@activate = true){

    @-webkit-keyframes bombRightOut{
        0%{
            opacity                  : 1;
            -webkit-transform-origin : 50% 50%;
            -webkit-transform        : rotate(0deg);
        }

        50%{
            opacity                  : 1;
            -webkit-transform-origin : 200% 50%;
            -webkit-transform        : rotate(160deg);
        }

        100%{
            opacity                  : 0;
            -webkit-transform-origin : 200% 50%;
            -webkit-transform        : rotate(160deg);
        }
    }
    @keyframes bombRightOut{
        0%{
            opacity : 1;
            .transform-origin(50% 50%);
            .rotate(0deg);
        }

        50%{
            opacity : 1;
            .transform-origin(200% 50%);
            .rotate(160deg);
        }

        100%{
            opacity : 0;
            .transform-origin(200% 50%);
            .rotate(160deg);
        }
    }
}
.animate-bombLeftOut(@activate : @animate-bombLeftOut) when (@activate = true){

    @-webkit-keyframes bombLeftOut{
        0%{
            opacity                  : 1;
            -webkit-transform-origin : 50% 50%;
            -webkit-transform        : rotate(0deg);
        }

        50%{
            opacity                  : 1;
            -webkit-transform-origin : -100% 50%;
            -webkit-transform        : rotate(-160deg);
        }

        100%{
            opacity                  : 0;
            -webkit-transform-origin : -100% 50%;
            -webkit-transform        : rotate(-160deg);
        }
    }
    @keyframes bombLeftOut{
        0%{
            opacity : 1;
            .transform-origin(50% 50%);
            .rotate(0deg);
        }

        50%{
            opacity : 1;
            .transform-origin(-100% 50%);
            .rotate(-160deg);
        }

        100%{
            opacity : 0;
            .transform-origin(-100% 50%);
            .rotate(-160deg);
        }
    }
}