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

@keyframes showViewLeftSm {
    from {
        margin-left: -300px;
        opacity: 0;
    }
    to {
        margin-left: -300px;
        opacity: 1;
    }
}

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

@keyframes hideViewLeftSm {
    from {
        margin-left: 0;
        opacity: 1;
    }
    to {
        margin-left: -100px;
        opacity: 0;
    }
}

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

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

@keyframes hideViewRightSm {
    from {
        margin-left: -300px;
        opacity: 1;
    }
    to {
        margin-left: -300px;
        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 showNavbarLeftSm {
    from {
        margin-left: 100px;
        opacity: 0;
    }
    to {
        margin-left: 0;
        opacity: 1;
    }
}

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

@keyframes hideNavbarLeftSm {
    from {
        margin-left: 0;
        opacity: 1;
    }
    to {
        margin-left: -100px;
        opacity: 0;
    }
}

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

@keyframes showNavbarRightSm {
    from {
        margin-left: -100px;
        opacity: 0;
    }
    to {
        margin-left: 0;
        opacity: 1;
    }
}

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

@keyframes hideNavbarRightSm {
    from {
        margin-left: 0;
        opacity: 1;
    }
    to {
        margin-left: 100px;
        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;
    }
}