@keyframes slide_up_offscreen
{
    from
    {
        transform: translateY(50%);
    }

    to
    {
        transform: translateY(-50%);
    }
}

@keyframes slide_up_center
{

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

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

@keyframes slide_to_right
{
    to {
        transform: translateX(150px);
    }
}

@keyframes slide_to_left
{
    from {
        transform: translateX(150px);
    }

    to {
        transform: translateX(0%);
    }
}

.animate_slide_up_center
{
    /*Apply the sliding up animation*/
    animation: slide_up_center 0.5s ease-in;
}

.animate_slide_up_offscreen
{
    /*Slide up off screen*/
    animation: slide_up_offscreen 0.5s ease-out;
}

.animate_sliding_right
{
    /*Slide to the right*/
    animation: slide_to_right 0.5s forwards;
}

.animate_sliding_left
{
    /*Slide to the left*/
    animation: slide_to_left 0.5s forwards;
}