.text-anim {
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
}

.text-anim:first-of-type {
    animation: showup 7s 1 forwards
}

.text-anim:last-of-type {
    width: 0px;
    animation: reveal 3s 1 forwards;
}

.text-anim:last-of-type .image-wrapper {
    margin-left: -800px;
    animation: slidein 7s 1 forwards;
}

@keyframes showup {
    0% { opacity: 0; }
    20% { opacity: 1; }
    80% { opacity: 1; }
    100% { opacity: 1; }
}

@keyframes slidein {
    0% { margin-left: -800px; }
    20% { margin-left: -800px; }
    35% { margin-left: 0px; }
    100% { margin-left: 0px; }
}

@keyframes reveal {
    0% { opacity: 0; width: 0px; }
    20% { opacity: 1; width: 0px; }
    30% { width: 800px; }
    80% { opacity: 1; }
    100% { opacity: 1; width: 800px; }
}


.hidden-navbar {
    opacity: 0;
    transform: translateY(-100%);
}

.show-navbar {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 1s ease, transform 1s ease;
}