.navbar-fixed {
  height: $nav_height;

  nav {
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    height: $nav_height;
    line-height: $nav_height;
    -webkit-transition: height 0.5s, line-height 0.5s;
    transition: height 0.5s, line-height 0.5s;

    @media only screen and (min-width: 1250px) {
        padding-right: 20px;
    }

    .nav-wrapper {
      width: 100%;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;

      .brand-logo {
        height: 100%;
        font-size: 0px;
        position: relative;
        flex-shrink: 0;

        img {
          height: 100%;
        }

        &.small {
          img {
            height: 100%;
          }
        }
      }

      .nav-mobile-toggle,
      .nav-mobile-toggle i {
        cursor: pointer;
        padding: 0 16px;
        height: $nav_height;
        line-height: $nav_height;
        color: $zim_green;
        font-size: 1.5rem;
      }

      ul {

        li {
          max-width: 160px;
          text-align: center;

          a {
            font-family: $ratio;
            font-size: 16px;
            font-weight: 400;
            height: $nav_height;
            color: $text-primary;
            padding: 0 20px;
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            line-height: 20px;
            -webkit-transition: height 0.5s, line-height 0.5s;
            transition: height 0.5s, line-height 0.5s;

            // This removes the blue/dotted outline on hover in Chrome and FF
            &:focus,
            &:active {
              outline: none;
              -moz-outline-style: none;
            }
          }

          @media only screen and (min-width: 1441px) {
            max-width: 200px;
            a {
              font-size: 20px;
            }
          }


          &.selected,
          &.ancestor {
            a {
              font-family: $ratio;

              &.text-color-lime {
                color: $zim_lime;
              }

              &.text-color-orange {
                color: $zim_orange;
              }

              &.text-color-yellow {
                color: $zim_yellow;
              }
            }
          }

          .dropdown-content {
            -webkit-box-shadow: none;
            -moz-box-shadow: none;
            box-shadow: none;

            li {
              padding: 0;
              height: 50px;
              display: flex;
              justify-content: center;
              align-items: center;

              &:hover {
                background-color: transparent;
              }

              a {
                font-family: $ratio;
                padding: 0;
                height: 50px;
                width: 100%;
              }
            }
          }
        }
      }

      ul#nav-desktop {
        display: flex;
        flex-direction: row;
        justify-content: flex-end;

        li {
          color: #000000 !important;

          &.id_5,
          &.id_12 {
            a {
              color: $zim_green !important;
            }
          }

          &.id_6,
          &.id_7 {
            a {
              color: $zim_yellow !important;
            }
          }

          &.id_8,
          &.id_9 {
            a {
              color: $zim_lime !important;
            }
          }

          &.id_15,
          &.id_16 {
            a {
              color: $zim_orange !important;
            }
          }

          &.selected {
            a {
              background-color: rgba(0, 0, 0, 0.1);
            }
          }
        }

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

      ul#nav-mobile {
        position: fixed;
        width: 450px;
        right: 0px;
        background-color: #ffffff;
        height: calc(100% - #{$nav_height});
        overflow-x: auto;

        @media screen and (max-width: 450px) {
          width: 100%;
        }

        @media (pointer: none), (pointer: coarse) {
          overflow: auto;
          padding-bottom: 100px;
        }

        @media screen and (min-width: 1462px) {
          display: none;
        }

        li {
          float: none;
          line-height: 48px;
          position: relative;
          max-width: none;
          height: auto;

          a {
            line-height: 60px;
            text-align: left;
            font-family: $ratio;
            font-size: 1.75rem;
            padding: 0 32px;
            height: auto;
            justify-content: flex-start;
          }

          &.id_15,
          &.id_16 {
            a {
              line-height: 40px;
              padding-top: 10px;
              padding-bottom: 10px;
            }
          }

          &.descendant {
            padding-left: 16px;
            line-height: 32px;
            margin-bottom: 16px;

            a {
              font-family: $ratio;
              font-size: 1rem;
            }
          }

          ul {
            &.sub-nav-mobile {
              max-height: 0;
              transition: max-height 0.3s ease;
              overflow: hidden;
              a {
                font-size: 1.1rem;
                line-height: 55px;
              }

              @media (pointer: none), (pointer: coarse) {
                max-height: 500px;
              }
            }
          }

          &:hover {
            ul {
              &.sub-nav-mobile {
                transition: max-height 1s ease;
              }
            }
          }

          color: #000000 !important;

          &.id_5,
          &.id_12 {
            a {
              color: $zim_green !important;
            }
          }

          &.id_6,
          &.id_7 {
            a {
              color: $zim_yellow !important;
            }
          }

          &.id_8,
          &.id_9 {
            a {
              color: $zim_lime !important;
            }
          }

          &.id_15,
          &.id_16 {
            a {
              color: $zim_orange !important;
            }
          }

          &.selected {
            a {
              background-color: rgba(0, 0, 0, 0.1);
            }
          }
        }
      }
    }
  }

  // Once the user scrolled down, the navbar shrinks to a smaller size
  &.navbar-scrolled {
    height: $nav_height_scrolled;

    nav {
      height: $nav_height_scrolled;
      line-height: $nav_height_scrolled;

      ul li a {
        font-family: $ratio;
        height: $nav_height_scrolled;
      }
    }

    .nav-mobile-toggle,
    .nav-mobile-toggle i {
      // display: none;
      height: $nav_height_scrolled;
      line-height: $nav_height_scrolled;
      font-size: 1.5rem;
    }

    ul#nav-mobile {
      top: $nav_height_scrolled;
    }
  }
}

@media only screen and (min-width: $breakpoint_medium) and (max-width: 1460px) {
  ul#nav-mobile {
    top: 125px;
  }
}

@media only screen and (max-width: $breakpoint_medium) {
  // Make the brand logo left aligned on mobile instead of centered
  .navbar-fixed {
    height: $nav_height_mobile;

    nav {
      height: $nav_height_mobile;
      line-height: $nav_height_mobile;

      .nav-wrapper {
        .brand-logo {
          font-size: 0px;
          left: 0;
          transform: none;
          -webkit-transform: none;
        }

        .nav-mobile-toggle,
        .nav-mobile-toggle i {
          height: $nav_height_mobile;
          line-height: $nav_height_mobile;
          font-size: 1.5rem;
        }

        ul#nav-mobile {
          top: 56px;
          height: calc(100% - #{$nav_height_mobile});

          li {
            position: relative;
            float: none;
            line-height: 48px;
            height: auto;
            text-align: left;
            min-width: 160px;
            max-width: none;
            padding: 0 !important;

            a {
              font-family: $ratio;
              line-height: $nav_height_mobile;
              height: auto;
              font-size: 1.1rem;
              padding: 0 32px;
              display: block;
              text-align: left;
            }

            .sub-nav-mobile li {
              top: 0px;
              line-height: 32px;
              margin-bottom: 16px;

              a {
                font-size: 0.8rem;
              }
            }
          }
        }
      }
    }

    &.navbar-scrolled {
      height: $nav_height_mobile;

      nav {
        height: $nav_height_mobile;
        line-height: $nav_height_mobile;

        ul li a {
          font-family: $ratio;
          line-height: $nav_height_mobile;
        }
      }

      .nav-mobile-toggle,
      .nav-mobile-toggle i {
        cursor: pointer;
        height: $nav_height_mobile;
        line-height: $nav_height_mobile;
      }

      ul#nav-mobile {
        top: $nav_height_mobile;
      }
    }
  }
}

@media only screen and (min-width: 1461px) {
  .navbar-fixed {
    nav {
      .nav-wrapper {
        .nav-mobile-toggle {
          display: none;
        }
      }
    }
  }
}

@media only screen and (max-width: 1460px) and (min-width: 1250px) {
  .navbar-fixed {
    nav {
      .nav-wrapper {
        .nav-mobile-toggle {
          display: none;
        }
      }
    }
  }
}