header
{
    position: sticky;
    top: 0px;
    display: grid;
    grid-template-columns: 125px 1fr 1fr;
    height: var(--header-ht);
    width: 100%;
    background-color: var(--white);
    padding-top: 10px;
    padding-bottom: 10px;
    z-index: 6000;  /* Needs to stay on top */
    border-bottom: 1px solid var(--black);
    box-shadow: 0px 3px 10px black;
}
    header > *
    {
        display: flex;
        position: relative;
        justify-content: center;
        align-items: center;
    }
    header > *:nth-child(1)
    {
        /* Logo */
        background-image: url(hrhrepairs/hrh_repairs_logo.png);
        background-repeat: no-repeat;
        background-position: center right;
        background-size: contain;
    }

    header > *:nth-child(3)
    {
        display: block;
        grid-template-columns: repeat(4, 1fr);
    }
        header :nth-child(3) > *
        {
            display: inline-flex;
            position: relative;
            top: -10px;
            height: calc(100% + 20px);
            align-items: center;
            margin-left: 10px;
            color: black;
            text-decoration: none;
        }
            header :nth-child(3) > *:hover
            {
                background-color: var(--blue_30);
            }
    header .header_submenu
    {
    }
        header .header_submenu > div
        {
            display: none;
        }
        header .header_submenu:hover > div
        {
            display: block;
            position: absolute;
            top: calc(100% + -1px);
            min-height: 100px;
            max-height: 200px;
            overflow-y: auto;
            width: calc(170% + 35px);
            right: 0;
            background-color: white;
            border-bottom-left-radius: 10px;
            border-bottom-right-radius: 10px;
            box-shadow: 0 3px 3px black;
        }
            header .header_submenu > div > *
            {
                display: block;
                margin-bottom: 10px;
                padding-left: 30px;
                background-position: 3px center;
                background-size: 20px;
                background-repeat: no-repeat;
                color: black;
                text-decoration: none;
            }
                header .header_submenu > div > *:hover
                {
                    text-decoration: underline;
                }


@media screen and (max-width: 800px)
{
    header
    {
        grid-template-columns: 50px 0 1fr;
        grid-gap: 5px;
    }
    header > :nth-child(3)
    {
        display: block;
        position: relative;
    }
        header > :nth-child(3):after
        {
            content: attr(alt);
            display: flex;
            justify-content: center;
            align-items: center;
            position: absolute;
            top: 0;
            right: 0;
            width: 100%;
            height: 100%;
        }
        header > :nth-child(3) > *
        {
            display: none;
        }
    /************** HOVER */
        header > :nth-child(3):hover
        {
            position: absolute;
            top: 100%;
            right: 0;
            width: 100%;
            min-height: 200px;
            border: 1px dashed red;
        }
        header > :nth-child(3):hover:after
        {
            height: calc(100% - 20px);
            top: -120px;
        }
        header > :nth-child(3):hover > *
        {
            display: block;
            background-color: white;
            min-height: 30px;
            padding-left: 10px;
            z-index: 200;
        }
        header > :nth-child(3):hover .header_submenu
        {
            width: unset;
        }
            header > :nth-child(3):hover .header_submenu:hover
            {
                width: unset;
            }
            header > :nth-child(3):hover .header_submenu > div
            {
                display: block;
                min-height: unset;
                width: unset;
                top: unset;
                max-height: unset;
                align-items: center;
            }
                header > :nth-child(3):hover .header_submenu > div > *
                {
                    min-height: 30px;
                    display: flex;
                    align-items: center;
                }
}