.heroHeader {
    opacity: 0;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}

/* Line 1 */
#hh1 {
    animation-name: fadeUp-1;
}

/* Line 2 */
#hh2 {
    animation-name: fadeUp-2;
    animation-delay: 0.2s;
}

/* Line 3 */
#hh3 {
    animation-name: fadeUp-3;
    animation-delay: 0.4s;
}

/* Line 4 */
#hh4 {
    animation-name: fadeUp-4;
    animation-delay: 0.6s;
}

/* Line 5 */
#hh5 {
    animation-name: fadeUp-5;
    animation-delay: 0.8s;
}

.delay-10{
    animation-delay: 1s;
}

/* Animations */
@keyframes fadeUp-1 {
    from { opacity: 0; transform: translateY(40px); }
    to   { opacity: 0.15; transform: translateY(0); }
}

@keyframes fadeUp-2 {
    from { opacity: 0; transform: translateY(40px); }
    to   { opacity: 0.25; transform: translateY(0); }
}

@keyframes fadeUp-3 {
    from { opacity: 0; transform: translateY(40px); }
    to   { opacity: 0.35; transform: translateY(0); }
}

@keyframes fadeUp-4 {
    from { opacity: 0; transform: translateY(40px); }
    to   { opacity: 0.45; transform: translateY(0); }
}

@keyframes fadeUp-5 {
    from { opacity: 0; transform: translateY(40px); }
    to   { opacity: 1; transform: translateY(0); }
}