.header-title {
    scale: 0%;
    animation-name: headerTitle;
    animation-duration: 500ms;
}
.header-title-rev {
    scale: 100%;
    animation-name: headerTitleRev;
    animation-duration: 500ms;
}

.header-title-div {
    animation-name: headerTitleDiv;
    animation-duration: 500ms;
}

.header-title-div-rev {
    animation-name: headerTitleDivRev;
    animation-duration: 500ms;
}

.header-logo {
    scale: 75%;
    animation-name: headerLogo;
    animation-duration: 1s;
}

.header-logo-rev {
    scale: 100%;
    animation-name: headerLogoRev;
    animation-duration: 1s;
}

.header-logo-resp {
    display: block;
    opacity: 1;
    animation-name: headerLogoResp;
    animation-duration: 3s;
}

.header-nav-resp {
    display: block;
    opacity: 1;
    animation-name: headerNavResp;
    animation-duration: 3s;
}

@keyframes headerTitle {
    from {
        scale: 100%;
    }
    to {
        scale: 0%
    }
}

@keyframes headerTitleRev {
    from {
        scale: 0%;
    }
    to {
        scale: 100%;
    }
}

@keyframes headerTitleDiv {
    from {
        transform: translateX(0px);
    }
    to {
        transform: translateX(-200px);
    }
}

@keyframes headerTitleDivRev {
    from {
        transform: translateX(-200px);
    }
    to {
        transform: translateX(0px);
    }
}

@keyframes headerLogo {
    from {
        scale: 100%;
    }
    to {
        scale: 75%;
    }
}

@keyframes headerLogoRev {
    from {
        scale: 75%;
    }
    to {
        scale: 100%;
    }
}

@keyframes headerLogoResp { 
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
    from {
        scale: 0%;
    }
    to {
        scale: 75%;
    }
}

@keyframes headerNavResp { 
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}