.site-header {
    height: 90px;
    z-index: 99;
    position: sticky;
    top: 0;

    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 30px;
    align-items: center;

    padding-left: 30px;
    padding-right: 30px;

    background: #000;
    border-bottom: 1px solid var(--primary-dark);
    transition: all 0.5s;

    &.active {
    
    }

    .branding {
        display: block;
        height: max-content;
        align-self: start;
        position: relative;
        z-index: 99;
        width: 150px;
        height: 90px;

        .placeholder {
            background: #000;            
            border-left: 1px solid var(--primary-dark);
            border-right: 1px solid var(--primary-dark);
            border-bottom: 1px solid var(--primary-dark);           
            padding: 10px 13px;             
        }

        img {
            height: auto;
        }
    }

    .mobile {
        display: none;
    }

    .mobile-toggle {
        cursor: pointer;
        display: none;
        margin-left: auto;

        @media only screen and (max-width: 980px) {
            display: grid;
            gap: 8px;
        }

        &:hover {
            span {
                background: rgba(255, 255, 255, 0.8);
            }
        }

        span {
            width: 18px;
            height: 2px;
            background: rgba(255, 255, 255, 0.5);
            display: block;
            transition: all 0.2s;
        }
    }

    .navigation {
        display: flex;
        align-items: center;
        gap: 30px;

        @media only screen and (max-width: 980px) {
            display: none;
        }

        a {
            color: #fff;
            font-size: 18px;

            font-family: var(--font-heading);
            transition: all 0.2s;

            &:hover, &.active {
                color: var(--site-primary);
            }
        }

        span {
            color: var(--site-primary);
            opacity: 0.5;

            &:last-child {
                display: none;
            }
        }
    }

    #mobile {
        display: none;


        @media only screen and (max-width: 980px) {
            grid-template-columns: 1fr 1fr;
            position: fixed;
            z-index: 9;
            background: #000000;
            top: 90px;
            left: 0;
            right: 0;
            height: calc(100vh - 90px);
            justify-content: center;
            padding: 50px;
        }

        &.open {
            display: grid;
        }
    }


    #left {
        margin-left: auto;
    }

    .facebook {
        margin-left: auto;
    }

}