.c58-mobile-container {
  height: 83px;
}

.c58-mobile {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
}

.c58-mobile.c58-mobile-floating {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  height: 2.5rem;
  z-index: 10;
}

ul.c58-nav-items {
  white-space: nowrap;
  padding-top: 0.5rem;
  overflow: auto;
}

ul.c58-nav-items li {
  display: inline-block;
  margin-right: 2.25rem;
  padding-bottom: 0.5rem;
  position: relative;
}

ul.c58-nav-items li:after {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 0;
  height: 1px;
  margin-bottom: 1px;
  background-color: #cfcfcf;
  width: 50vw;
  content: '';
}

ul.c58-nav-items li:first-child {
  margin-left: 1.125rem;
}

ul.c58-nav-items li a,
ul.c58-nav-items li a:hover,
ul.c58-nav-items li a:visited {
  font-family: "LL Circular Book Web", sans-serif;
  text-decoration: none;
  --text-opacity: 1;
  color: #404040;
  color: rgba(64, 64, 64, var(--text-opacity));
}

/* selected indicator */

ul.c58-nav-items li::before {
  position: absolute;
  bottom: 0;
  left: 0;
  --bg-opacity: 1;
  background-color: #ffcc5b;
  background-color: rgba(255, 204, 91, var(--bg-opacity));
  opacity: 0;
  width: 100%;
  content: '';
  z-index: 1;
  height: 3px;
  transition: opacity 0.3s;
}

ul.c58-nav-items li.c58-active::before {
  opacity: 1;
  transition: all 0.6s;
}

ul.c58-nav-items li.c58-active a {
  font-family: "LL Circular Bold Web", sans-serif;
}

@media (min-width: 1026px) {
  ul.c58-nav-items {
    white-space: normal;
    padding-top: 0;
  }

  ul.c58-nav-items li:after {
    display: none;
  }

  ul.c58-nav-items li {
    padding-left: 0;
    display: block;
    margin-right: 0;
    padding-bottom: 0;
    transition: padding-left 0.3s;
  }

  ul.c58-nav-items li:first-child {
    margin-left: 0;
  }

  ul.c58-nav-items li:not(:last-child) {
    margin-bottom: 1.25rem;
  }

  ul.c58-nav-items li.c58-active {
    padding-left: 1.125rem;
    transition: padding-left 0.3s;
  }

  /* selected indicator */

  ul.c58-nav-items li::before {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    --bg-opacity: 1;
    background-color: #ffcc5b;
    background-color: rgba(255, 204, 91, var(--bg-opacity));
    opacity: 0;
    content: '';
    width: 3px;
    transition: opacity 0.3s;
  }

  ul.c58-nav-items li.c58-active::before {
    opacity: 1;
    transition: all 0.6s;
  }

  .c58-desktop {
    position: absolute;
    top: 0;
    left: 0;
    margin-top: 170px;
  }

  .c58-desktop.c58-desktop-floating {
    position: fixed;
  }
}

