#subject
{
    position: relative;

    height: 8vh;
}

#subject .container-mid
{
    position: absolute;
    top: 50%;

    width: 100%;

    -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
            transform: translateY(-50%);
}

#subject .container-mid h1
{
    line-height: 1.2em;

    margin-top: 1em;
    margin-bottom: 0;
}

#subject .animation-container
{
    -webkit-transition: .5s ease;
         -o-transition: .5s ease;
            transition: .5s ease;
}

#subject .animation-container.animation-fade
{
    opacity: 0;
}

#subject .animation-container.animation-fade.run-animation
{
    opacity: 1;
}

#subject .animation-container.animation-fade-up
{
    -webkit-transform: translateY(10vh);
        -ms-transform: translateY(10vh);
            transform: translateY(10vh);

    opacity: 0;
}

#subject .animation-container.animation-fade-up.run-animation
{
    -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
            transform: translateY(0);

    opacity: 1;
}

#subject .animation-container.animation-fade-down
{
    -webkit-transform: translateY(-10vh);
        -ms-transform: translateY(-10vh);
            transform: translateY(-10vh);

    opacity: 0;
}

#subject .animation-container.animation-fade-down.run-animation
{
    -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
            transform: translateY(0);

    opacity: 1;
}