#landing-hero{
    display: inline-block;
    margin-top: calc(var(--section-padding) + 50px);
    padding: 0;
    left: calc((100vw - var(--grid-width)) / 2);
    width: 90%;
}

#landing-hero-copy{
    position: relative;
    display: inline-block;
    height: auto;
    width: var(--grid-width);
    left: calc((100vw - var(--grid-width)) / 2);
}

#landing-hero-headline{
    position: relative;
    display: inline-block;
    width: auto;
    left: 0;
}

.title-fixed{
    position: relative;
    bottom: -12px;
}
  
.hero-titles{
    position: relative;
    height: var(--h1height);
    bottom: -12px;
    overflow: hidden;
    margin: 0;
    padding: 0;
}

.hero-title-list{
    position: absolute;
    display: inline-block;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    animation-name: example;
    animation-duration: 12s;
    animation-direction: forwards;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}

@keyframes example {
    0%   {top: calc( 0px - ( var(--h1height) * 0 ) ) ;}
    22%   {top: calc( 0px - ( var(--h1height) * 0 ) ) ;}

    25%  {top: calc( 0px - ( var(--h1height) * 1 ) ) ;}
    47%  {top: calc( 0px - ( var(--h1height) * 1 ) ) ;}

    50%  {top: calc( 0px - ( var(--h1height) * 2 ) ) ;}
    72%  {top: calc( 0px - ( var(--h1height) * 2 ) ) ;}

    75%  {top: calc( 0px - ( var(--h1height) * 3 ) ) ;}
    97%  {top: calc( 0px - ( var(--h1height) * 3 ) ) ;}

    100% {top: calc( 0px - ( var(--h1height) * 4 ) ) ;}
}

#landing-hero-para{
    width: 400px;
    position: relative;
    display: inline-block;
    margin-left: 50px;
    left: 0;
    bottom: 0;
}

#landing-hero-links{
    margin-top: 30px;
}

#landing-work h5{
    background-color: var(--none);
    color: var(--black);

}

/*-- Landing Work --*/

#page-landing .grid div:nth-child(n+5) {  
    display: none; /*cap projects shown at 4*/
}

#landing-showreel-button{
    z-index: 10;
    position: absolute;
    bottom: 30px;
    right: 30px;
}