.fof {
    &::before {
        background-image: $fofPoster;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: 50% 50%;
        content: " ";
        position: fixed;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        z-index: 1;
    }
    .main-inner {
        background: rgba(0, 0, 0, 0.25);
        min-height: 100%;
        min-width: 100%;
        position: absolute;
        z-index: 3;
    }
    video {
        position: fixed;
        top: 50%;
        left: 50%;
        min-width: 100%;
        min-height: 100%;
        width: auto;
        height: auto;
        z-index: 2;
        transform: translateX(-50%) translateY(-50%);
    }
    h1 {
        font-size: 3rem;
        text-transform: uppercase;
        letter-spacing: 0.3rem;
        text-align: center;
        top: 15%;
        left: 5%;
        right: 5%;
        position: absolute;
        color: #fff;
        margin: 0.67em 0;
    }
    .fof-footer {
        font-size: 2rem;
        position: absolute;
        bottom: 15%;
        left: 10%;
        right: 10%;
        text-align: center;
    }
    a {
        color: #eee;
        &:hover {
            color: #fff;
        }
    }
    @media only screen and (max-device-width: 1024px) {
        #bgvid {
            display: none;
        }
    }
}