.animated {
    -webkit-animation-duration: .6s;
    animation-duration: .6s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

.spaceInDown {
    -webkit-animation-name: spaceInDown;
    animation-name: spaceInDown;
}

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

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

.spaceInLeft {
    -webkit-animation-name: spaceInLeft;
    animation-name: spaceInLeft;
}

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

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

.spaceInRight {
    -webkit-animation-name: spaceInRight;
    animation-name: spaceInRight;
}

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

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

.spaceInUp {
    -webkit-animation-name: spaceInUp;
    animation-name: spaceInUp;
}

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

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

.spaceOutDown {
    -webkit-animation-name: spaceOutDown;
    animation-name: spaceOutDown;
}

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

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

.spaceOutLeft {
    -webkit-animation-name: spaceOutLeft;
    animation-name: spaceOutLeft;
}

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

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

.spaceOutUp {
    -webkit-animation-name: spaceOutUp;
    animation-name: spaceOutUp;
}

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

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

@keyframes fadeOutDown {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
        transform: translate3d(0, 100%, 0);
    }
}

.fadeOutDown {
    animation-name: fadeOutDown;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translate3d(0, 100%, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

.fadeInUp {
    animation-name: fadeInUp;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.fadeIn {
    animation-name: fadeIn;
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

.fadeOut {
    animation-name: fadeOut;
}