@keyframes grow_name {
    /* 0%   {font-size: 0; width: 0;} */
    0%  {font-size: 6vw; width: 60%;}
    100% {font-size: 6vw; width: 100%;}
}

@keyframes hide_title {
    0%   {height:100%;}
    50%  {height:100%;}
    100% {height: 90%;}
}

#hero span{
    animation-name: grow_name;
    animation-duration: 1s;
    /* animation-delay: 50ms; */
    animation-fill-mode: forwards;
}

@media only screen and (min-width: 1000px) {
    #title {
        animation-name: hide_title;
        animation-duration: 1s;
        /* animation-delay: 50ms; */
        animation-fill-mode: forwards;
    }
}

@media only screen and (max-width: 1000px) {
    #title {
        animation-name: hide_title;
        animation-duration: 1s;
        /* animation-delay: 50ms; */
        animation-fill-mode: forwards;
    }
}