header {
    width: 100%;
    text-align: center;
    padding-top: calc(15px + 1vh);
	z-index: 1000000;
}

header .logo {
    width: 20vw;
    min-width: 200px;
    max-width: 100%;
}

#menu {
    display: flex;
    justify-content: center;
    font-size: var(--size-medium);
    font-family: var(--font-bourton);
	z-index: 100;
}

#menu ul {
    display: flex;
    list-style: none;
    gap: calc(35px);
    padding: 0;
}

#menu li, #menu a {
    font-family: var(--font-heading);
    color: var(--color-tsp-brown);
    text-decoration: none;
}

#menu li:hover, #menu a:hover {
    color: var(--color-tsp-orange);
}

/* Handle Sub-Menus */
#menu {
    margin-bottom: 20px;
}

#menu .sub-menu {
    display: none;
    width: 200px;
    background-color: white;
    text-align: left;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1), 0 6px 20px 0 rgba(0, 0, 0, 0.1);
    padding: 15px;
    font-size: 0.8em;
    left: -50px;
	z-index: 10000;
}

#menu .menu-item-has-children {
    position: relative;
}

#menu .menu-item-has-children:hover .sub-menu {
    display: block;
    position: absolute;
}

.sub-menu li {
    padding: 5px;
}