.animated {
    -webkit-animation-fill-mode:both;
    -moz-animation-fill-mode:both;
    -ms-animation-fill-mode:both;
    -o-animation-fill-mode:both;
    animation-fill-mode:both;

    -webkit-animation-delay: .3s;
    -moz-animation-delay: .3s;
    animation-delay: .3s;
}


/* Fade */

@-webkit-keyframes ae-animation-fade {
    0% {opacity: 0; -webkit-transform: scaleY(0) scaleX(0);}
    100% {opacity: 1; -webkit-transform: scaleY(1) scaleX(1)}
}

@-moz-keyframes ae-animation-fade {
    0% {opacity: 0;}
    100% {opacity: 1;}
}

@-o-keyframes ae-animation-fade {
    0% {opacity: 0;}
    100% {opacity: 1;}
}

@keyframes ae-animation-fade {
    0% {opacity: 0; transform: scaleY(0) scaleX(0);}
    100% {opacity: 1; transform: scaleY(1) scaleX(1)}
}

.ae-animation-fade {
    -webkit-animation-name: ae-animation-fade;
    -moz-animation-name: ae-animation-fade;
    -o-animation-name: ae-animation-fade;
    animation-name: ae-animation-fade;
    -webkit-animation-duration:.5s;
    -moz-animation-duration:.5s;
    -ms-animation-duration:.5s;
    -o-animation-duration:.5s;
    animation-duration:.5s;
    opacity: 1!important;
}

.fade { opacity: 0; }
html.ie9 .fade { opacity: 1!important; }


/* Slide */
@-webkit-keyframes ae-animation-slide {
    0% {-webkit-transform: translateY(100%);}
    100% {-webkit-transform: translateY(0%);}
}

@-moz-keyframes ae-animation-slide {
    0% {-moz-transform: translateY(100%);}
    100% {-moz-transform: translateY(0%);}
}

@-o-keyframes ae-animation-slide {
    0% {-o-transform: translateY(100%);}
    100% {-o-transform: translateY(0%);}
}

@keyframes ae-animation-slide {
    0% {transform: translateY(100%);}
    100% {transform: translateY(0%);}
}

.ae-animation-slide {
    -webkit-animation-name: ae-animation-slide;
    -moz-animation-name: ae-animation-slide;
    -o-animation-name: ae-animation-slide;
    animation-name: ae-animation-slide;

    -webkit-animation-duration:.5s;
    -moz-animation-duration:.5s;
    -ms-animation-duration:.5s;
    -o-animation-duration:.5s;
    animation-duration:.5s;

    opacity: 1!important;
}

.slide { opacity: 0; }
html.ie9 .slide { opacity: 1!important; }

/* Hatch */
@-webkit-keyframes ae-animation-hatch {
    0% {-webkit-transform: rotate(0deg) scaleY(0);}
    20% {-webkit-transform: rotate(-2deg) scaleY(1.05);}
    35% {-webkit-transform: rotate(2deg) scaleY(1);}
    50% {-webkit-transform: rotate(-2deg);}
    65% {-webkit-transform: rotate(1deg);}
    80% {-webkit-transform: rotate(-1deg);}
    100% {-webkit-transform: rotate(0deg);}
}

@-moz-keyframes ae-animation-hatch {
    0% {-moz-transform: rotate(0deg) scaleY(0);}
    20% {-moz-transform: rotate(-2deg) scaleY(1.05);}
    35% {-moz-transform: rotate(2deg) scaleY(1);}
    50% {-moz-transform: rotate(-2deg);}
    65% {-moz-transform: rotate(1deg);}
    80% {-moz-transform: rotate(-1deg);}
    100% {-moz-transform: rotate(0deg);}
}

@-o-keyframes ae-animation-hatch {
    0% {-o-transform: rotate(0deg) scaleY(0);}
    20% {-o-transform: rotate(-2deg) scaleY(1.05);}
    35% {-o-transform: rotate(2deg) scaleY(1);}
    50% {-o-transform: rotate(-2deg);}
    65% {-o-transform: rotate(1deg);}
    80% {-o-transform: rotate(-1deg);}
    100% {-o-transform: rotate(0deg);}
}

@keyframes ae-animation-hatch {
    0% {transform: rotate(0deg) scaleY(0);}
    20% {transform: rotate(-2deg) scaleY(1.05);}
    35% {transform: rotate(2deg) scaleY(1);}
    50% {transform: rotate(-2deg);}
    65% {transform: rotate(1deg);}
    80% {transform: rotate(-1deg);}
    100% {transform: rotate(0deg);}
}

.ae-animation-hatch {
    -webkit-animation-name: ae-animation-hatch;
    -moz-animation-name: ae-animation-hatch;
    -o-animation-name: ae-animation-hatch;
    animation-name: ae-animation-hatch;

    -webkit-animation-duration:.5s;
    -moz-animation-duration:.5s;
    -ms-animation-duration:.5s;
    -o-animation-duration:.5s;
    animation-duration:.5s;

    opacity: 1!important;
}

.hatch { opacity: 0; }
html.ie9 .hatch { opacity: 1!important; }

/* Entrance */
@-webkit-keyframes ae-animation-entrance {
    0% {
        -webkit-transform: scale(0.3) rotate(6deg) translateX(-30%) translateY(30%);
        opacity: 0.2;
    }
    30% {
        -webkit-transform: scale(1.03) rotate(-2deg) translateX(2%) translateY(-2%);
        opacity: 1;
    }
    45% {
        -webkit-transform: scale(0.98) rotate(1deg) translateX(0%) translateY(0%);
        opacity: 1;
    }
    60% {
        -webkit-transform: scale(1.01) rotate(-1deg) translateX(0%) translateY(0%);
        opacity: 1;
    }
    75% {
        -webkit-transform: scale(0.99) rotate(1deg) translateX(0%) translateY(0%);
        opacity: 1;
    }
    90% {
        -webkit-transform: scale(1.01) rotate(0deg) translateX(0%) translateY(0%);
        opacity: 1;
    }
    100% {
        -webkit-transform: scale(1) rotate(0deg) translateX(0%) translateY(0%);
        opacity: 1;
    }
}

@-moz-keyframes ae-animation-entrance {
    0% {
        -moz-transform: scale(0.3) rotate(6deg) translateX(-30%) translateY(30%);
        opacity: 0.2;
    }
    30% {
        -moz-transform: scale(1.03) rotate(-2deg) translateX(2%) translateY(-2%);
        opacity: 1;
    }
    45% {
        -moz-transform: scale(0.98) rotate(1deg) translateX(0%) translateY(0%);
        opacity: 1;
    }
    60% {
        -moz-transform: scale(1.01) rotate(-1deg) translateX(0%) translateY(0%);
        opacity: 1;
    }
    75% {
        -moz-transform: scale(0.99) rotate(1deg) translateX(0%) translateY(0%);
        opacity: 1;
    }
    90% {
        -moz-transform: scale(1.01) rotate(0deg) translateX(0%) translateY(0%);
        opacity: 1;
    }
    100% {
        -moz-transform: scale(1) rotate(0deg) translateX(0%) translateY(0%);
        opacity: 1;
    }
}

@-o-keyframes ae-animation-entrance {
    0% {
        -o-transform: scale(0.3) rotate(6deg) translateX(-30%) translateY(30%);
        opacity: 0.2;
    }
    30% {
        -o-transform: scale(1.03) rotate(-2deg) translateX(2%) translateY(-2%);
        opacity: 1;
    }
    45% {
        -o-transform: scale(0.98) rotate(1deg) translateX(0%) translateY(0%);
        opacity: 1;
    }
    60% {
        -o-transform: scale(1.01) rotate(-1deg) translateX(0%) translateY(0%);
        opacity: 1;
    }
    75% {
        -o-transform: scale(0.99) rotate(1deg) translateX(0%) translateY(0%);
        opacity: 1;
    }
    90% {
        -o-transform: scale(1.01) rotate(0deg) translateX(0%) translateY(0%);
        opacity: 1;
    }
    100% {
        -o-transform: scale(1) rotate(0deg) translateX(0%) translateY(0%);
        opacity: 1;
    }
}

@keyframes ae-animation-entrance {
    0% {
        transform: scale(0.3) rotate(6deg) translateX(-30%) translateY(30%);
        opacity: 0.2;
    }
    30% {
        transform: scale(1.03) rotate(-2deg) translateX(2%) translateY(-2%);
        opacity: 1;
    }
    45% {
        transform: scale(0.98) rotate(1deg) translateX(0%) translateY(0%);
        opacity: 1;
    }
    60% {
        transform: scale(1.01) rotate(-1deg) translateX(0%) translateY(0%);
        opacity: 1;
    }
    75% {
        transform: scale(0.99) rotate(1deg) translateX(0%) translateY(0%);
        opacity: 1;
    }
    90% {
        transform: scale(1.01) rotate(0deg) translateX(0%) translateY(0%);
        opacity: 1;
    }
    100% {
        transform: scale(1) rotate(0deg) translateX(0%) translateY(0%);
        opacity: 1;
    }
}

.ae-animation-entrance {
    -webkit-animation-name: ae-animation-entrance;
    -moz-animation-name: ae-animation-entrance;
    -o-animation-name: ae-animation-entrance;
    animation-name: ae-animation-entrance;

    -webkit-animation-duration:.5s;
    -moz-animation-duration:.5s;
    -ms-animation-duration:.5s;
    -o-animation-duration:.5s;
    animation-duration:.5s;

    opacity: 1!important;
}

.entrance { opacity: 0; }
html.ie9 .entrance { opacity: 1!important; }