#toast_div {

}

.toast_center {
    /* Choose the animation */
    /* animation-name: movingBox; */
    display             : none;
    /* The animation’s duration */
    animation-duration  : 800ms;

    /* The number of times we want
        the animation to run */
    /* animation-iteration-count: infinite; */

    /* Causes the animation to reverse
        on every odd iteration */
    animation-direction : alternate;
    position            : fixed;
    z-index             : 9999;
    left                : 50%;
    top                 : 20px;
}

.toast_body {
    width            : 400px;
    height           : 80px;
    background-color : #fff;
    border-radius    : 12px;
    box-shadow       : 0 5px 15px rgba(0, 0, 0, .5);
    text-align       : center;
}

.toast_body font {
    line-height : 38px;
    font-style  : italic;
    text-align  : center;
}

@keyframes showBox {
    0% {
        transform : translate(0, -100px);
        opacity   : 0.0;
    }

    25% {
        transform : translate(0, -20px);
        opacity   : 0.3;
    }

    50% {
        transform : translate(0, -10px);
        opacity   : 0.6;
    }

    100% {
        transform : translate(0px, 0px);
        opacity   : 1.0;
    }
}

@keyframes hideBox {
    0% {
        transform : translate(0px, 0px);
        opacity   : 1.0;
    }

    25% {
        transform : translate(0, -10px);
        opacity   : 0.7;
    }

    50% {
        transform : translate(0, -20px);
        opacity   : 0.3;
    }

    100% {

        transform : translate(0, -100px);
        opacity   : 0.0;
    }
}