/* ------------------------------ Visibility */

/* Make visible */

@keyframes make-visible {
    to {
        opacity: 1;
    }
}

/* Make invisible */

@keyframes make-invisible {
    to {
        opacity: 0;
    }
}

/* ------------------------------ Brand */

/* Move brand right */

@keyframes move-brand-right {
    to {
        transform: translateX(1rem);
    }
}

/* Move brand left */

@keyframes move-brand-left {
    to {
        transform: translateX(-1rem);
    }
}

/* ------------------------------ Nav */

/* Move nav right */

@keyframes move-nav-right {
    to {
        transform: translateX(4rem);
    }
}

/* Move nav left */

@keyframes move-nav-left {
    to {
        transform: translateX(-4rem);
    }
}