nav { animation: slide-out .25s forwards; }
nav.open { animation: slide-in .25s forwards; }



@keyframes slide-in {
    from { top: -325px; }
    to { top: 0; }
}

@keyframes slide-out {
    from { top: 0; }
    to { top: -325px; }
}

@media(min-width: 768px) {
    @keyframes slide-in {
        from { top: -55px; }
        to { top: 0; }
    }

    @keyframes slide-out {
        from { top: 0; }
        to { top: -55px; }
    }
}