header {
    position: sticky;
    top: 0;
    z-index: 999;
    background: var(--header-background);
}

#nav_wrapper {
    display: flex;
    /* background: #555; */
    align-items: center;
    padding-block: 0.75rem;
}
#nav_wrapper div:has(.logo) {
    display: flex;
    flex-direction: column;
    align-items: center;
    .telephone {
        margin-block: 0.5rem;
    }
}

#menu {
    display: flex;
    a {
        border-bottom: none;
        text-decoration: none;
        color: var(--color-1) !important;
        filter: brightness(90%);
    }
    a:hover {
        filter: brightness(130%);
            position: relative;
        }
        a::after {
            content: '';
            position: absolute;
            left: 0;
            bottom: -2px;
            width: 100%;
            height: 2px;
            background: var(--color-2);
            opacity: 0;
            transition: opacity 0.3s ease-in-out;
        }
        a:not(.telephone):hover::after {
            opacity: 1;
    }
}
/* Extra right margin on element before phone element */
#menu li:has(+ li > .telephone) a {
    margin-inline-end: calc(2rem + 0.35vw);
}
#menu li:has(.telephone) {
    height:100%;
    display: flex;
    align-items: center;
}
a.telephone {
    font-family: var(--text-font-family);
    margin: 0;
    display: flex;
    align-items: center;
    color: var(--color-5);
    filter: brightness(130%) !important;
    font-weight: var(--menu-font-weight);
    svg {
        margin-right: 0.1rem;
    }
}

@media screen and (min-width:668px) {
    .container {
        padding-top: 35px;
    }
}

.container {
    padding-bottom: 35px;
}

@media screen and (max-width: 1054px) {
    .logo {
        padding-block-end: 0.7rem;
    }
    #menu {
        width: 100%;
    }
    #menu {
        margin-top: 15px;
    }
    /* See README about mobile menu */
    #nav_wrapper #menu {
        display: none;
    }
    #nav_wrapper {
        justify-content: center;
    }
    header {
        position: static;
    }
}
@media screen and (min-width: 1055px) {
    #nav_wrapper {
        justify-content: space-between;
        .logo + .telephone {
            display: none;
        }
    }
    ul.main-menu {
        margin-top: 1.15rem;
    }
}

/* Colors */
#menu .has-sub-menu > ul a:hover {
    background-color: #9c9c9c;
}

#menu .has-sub-menu > ul {
    background-color: #444;
}
/* Cascade colors in touch menu levels - each level gets slightly darker*/
#tm:checked ~ ul .has-sub-menu > ul {
    background-color: rgba(0,0,0, .25);
}

.has-sub-menu > a {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
    cursor: pointer
}

.drop-icon {
    margin-left: 5px;
}

#menu a {
    cursor: auto;
}
.drop-icon, #menu a:not([href="#"]) {
  cursor: pointer;
}

#menu ul:not(.main-menu) {
  margin: 0;
  padding: 0;
}

#menu .main-menu {
  display: none;
}

#tm:checked + .main-menu {
  display: block;
}

@media screen and (min-width: 400px) and (max-width: 500px) {
    .main-menu {
        margin-left: 33%;
    }
}
@media screen and (min-width: 501px) and (max-width: 600px) {
    .main-menu {
        margin-left: 45%;
    }
}
@media screen and (min-width: 601px) and (max-width: 700px) {
    .main-menu {
        margin-left: 52%;
    }
}
@media screen and (min-width: 701px) and (max-width: 800px) {
    .main-menu {
        margin-left: 57%;
    }
}
@media screen and (min-width: 801px) and (max-width: 900px) {
    .main-menu {
        margin-left: 62%;
    }
}
@media screen and (min-width: 901px) and (max-width: 1000px) {
    .main-menu {
        margin-left: 68%;
    }
}

#menu input[type="checkbox"],
#menu ul span.drop-icon {
  display: none;
}

#menu li,
#toggle-menu,
#menu .has-sub-menu > ul {
  border-style: none;
  /* The following puts a border at the bottom */
  /* border-style: solid; */
  border-color: rgba(255, 255, 255, .15);
}

#menu li,
#toggle-menu {
  border-width: 0 0 1px;
}

#menu .has-sub-menu > ul {
  border-width: 1px 1px 0;
  margin: 0 calc(1rem + 0.35vw);
}

#menu .has-sub-menu > ul li:last-child {
  border-width: 0;
}

#menu li,
#toggle-menu,
#menu a:not(.telephone) {
    position: relative;
    display: block;
    /* text-shadow: 1px 1px 0 rgba(0, 0, 0, .125); */
    text-transform: uppercase;
    font-weight: 600;
    color: var(--menu-text-color);
    font-family: var(--elements-font-family);
    font-size: var(--menu-font-size);
    font-weight: var(--menu-font-weight);
}
#menu a:not(.telephone) {
    margin: 0.75rem calc(0.5rem + 0.35vw);
    transition: all .125s ease-in-out;
    -webkit-transition: all .125s ease-in-out;
}

#toggle-menu {
    display: flex;
    justify-content: flex-end;
    margin: 0.75rem 0.75rem;
}
#toggle-menu .drop-icon {
    margin: calc(0px - 0.75rem) calc(0px - 0.75rem) !important;
}

#menu .has-sub-menu > ul {
  display: none;
}

#menu input[type="checkbox"]:checked + ul {
  display: block;
}

#toggle-menu .drop-icon,
#menu li label.drop-icon {
  margin: calc(0px - 0.75rem + 0.5px) calc(0rem - 0.5rem - 0.35vw);
}

#menu label.drop-icon, #toggle-menu span.drop-icon {
    font-size: 1.25rem;
    text-align: center;
    background-color: rgba(0, 0, 0, 0.25);
    color: rgba(255, 255, 255, .75);
    text-shadow: 0 0 0 transparent;
}

#menu label.drop-icon {
    padding: inherit;
}
#toggle-menu span.drop-icon {
    padding: inherit;
}

@media only screen and (min-width: 1000px) {
    #menu .main-menu {
        display: block;
    }

    #toggle-menu,
    #menu label.drop-icon {
        display: none;
    }

    #menu ul span.drop-icon {
        display: inline-block;
    }

    #menu li {
        float: left;
        border-width: 0 0 0 0;
        /* Provides vertical bars between main menu items... */
        /* border-width: 0 1px 0 0; */
    }

    #menu .has-sub-menu > ul li {
        float: none;
    }

    #menu .has-sub-menu > ul {
        border-width: 0;
        margin: 0;
        width: 14rem;
        position: absolute;
        top: 100%;
        left: 0;
        z-index: 3000;
    }

    #menu .has-sub-menu > ul,
    #menu input[type="checkbox"]:checked + ul {
        display: none;
    }

    #menu .has-sub-menu > ul li {
        border-width: 0 0 1px;
    }

    #menu .has-sub-menu > ul .has-sub-menu > ul {
        top: 0;
        left: 100%;
    }

    #menu li:hover > input[type="checkbox"] + ul {
        display: block;
    }
}