@keyframes showViewLeft {
    from {
        margin-left: 100%;
        opacity: 0;
    }
    to {
        margin-left: 0%;
        opacity: 1;
    }
}

@keyframes hideViewLeft {
    from {
        margin-left: 0%;
        opacity: 1;
    }
    to {
        margin-left: -100%;
        opacity: 0;
    }
}

@keyframes showViewRight {
    from {
        margin-left: -100%;
        opacity: 0;
    }
    to {
        margin-left: 0%;
        opacity: 1;
    }
}

@keyframes hideViewRight {
    from {
        margin-left: 0%;
        opacity: 1;
    }
    to {
        margin-left: 100%;
        opacity: 0;
    }
}

@keyframes showViewUp {
    from {
        top: 0;
        opacity: 0;
    }
    to {
        top: -100%;
        opacity: 1;
    }
}

@keyframes hideViewDown {
    from {
        top: -100%;
        opacity: 1;
    }
    to {
        top: 0%;
        opacity: 0;
    }
}

/*
    Navbar animations
*/
@keyframes showNavbarLeft {
    from {
        margin-left: 100%;
        opacity: 0;
    }
    to {
        margin-left: 0%;
        opacity: 1;
    }
}

@keyframes hideNavbarLeft {
    from {
        margin-left: 0%;
        opacity: 1;
    }
    to {
        margin-left: -100%;
        opacity: 0;
    }
}

@keyframes showNavbarRight {
    from {
        margin-left: -100%;
        opacity: 0;
    }
    to {
        margin-left: 0%;
        opacity: 1;
    }
}

@keyframes hideNavbarRight {
    from {
        margin-left: 0%;
        opacity: 1;
    }
    to {
        margin-left: 100%;
        opacity: 0;
    }
}

@keyframes showNavbarUp {
    from {
        top: 100%;
        opacity: 0;
    }
    to {
        top: 50px;
        opacity: 1;
    }
}

@keyframes hideNavbarDown {
    from {
        top: 50px;
        opacity: 1;
    }
    to {
        top: 100%;
        opacity: 0;
    }
}



/* Non-Mobile */
@keyframes showViewLeftDesktop {
    from {
        /*margin-left: 378px;*/
        opacity: 0;
    }

    to {
        /*margin-left: 0;*/
        opacity: 1;
    }
}

@keyframes hideViewLeftDesktop {
    from {
        margin-left: 0;
        opacity: 1;
    }

    to {
        margin-left: -378px;
        opacity: 0;
    }
}

@keyframes showViewRightDesktop {
    from {
        margin-left: -378px;
        opacity: 0;
    }

    to {
        margin-left: 0;
        opacity: 1;
    }
}

@keyframes hideViewRightDesktop {
    from {
        /*margin-left: 0;*/
        opacity: 1;
    }

    to {
        /*margin-left: 378px;*/
        opacity: 0;
    }
}

@keyframes showViewUpDesktop {
    from {
        top: 0;
        opacity: 0;
    }

    to {
        top: -100%;
        opacity: 1;
    }
}

@keyframes hideViewDownDesktop {
    from {
        top: -100%;
        opacity: 1;
    }

    to {
        top: 0%;
        opacity: 0;
    }
}