.animated {
    -webkit-animation-duration: .5s;
    -moz-animation-duration: .5s;
    -o-animation-duration: .5s;
    animation-duration: .5s;
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    -o-animation-fill-mode: both;
    animation-fill-mode: both;
}

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

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

@-moz-keyframes slideDown {
    0% {
        -moz-transform: translateY(-4em);
    }

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

@-o-keyframes slideDown {
    0% {
        -o-transform: translateY(-4em);
    }

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

@keyframes slideDown {
    0% {
        transform: translateY(-4em);
    }

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

.animated.slideDown {
    -webkit-animation-name: slideDown;
    -moz-animation-name: slideDown;
    -o-animation-name: slideDown;
    animation-name: slideDown;
}

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

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

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

    100% {
        -moz-transform: translateY(-4em);
    }
}

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

    100% {
        -o-transform: translateY(-4em);
    }
}

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

    100% {
        transform: translateY(-4em);
    }
}

.animated.slideUp {
    -webkit-animation-name: slideUp;
    -moz-animation-name: slideUp;
    -o-animation-name: slideUp;
    animation-name: slideUp;
}



 .slide {
            -webkit-transition: all .5s linear;
            -moz-transition: all .5s linear;
            -o-transition: all .5s linear;
            transition: all .5s linear;
        }

        .slide--reset {
            -webkit-transform: translateY(0);
            -ms-transform: translateY(0);
            transform: translateY(0);
        }

        .slide--up {
            -webkit-transform: translateY(-4em);
            -ms-transform: translateY(-4em);
            transform: translateY(-4em);
        }

        .slide--down {
            -webkit-transform: translateY(4em);
            -ms-transform: translateY(4em);
            transform: translateY(4em);
        }