#wrapper {
  @include media-breakpoint-up($nav_expand_point) {
    .navbar.hover_animated .nav-item > .dropdown-menu {
      display: block;
      opacity: 0;
      visibility: hidden;
      transition: 0.3s;
      margin-top: 0;
    }
    .navbar.hover_animated .nav-item:hover .nav-link {
      color: #fff;
    }
    .navbar.hover_animated .dropdown-menu.fade-down {
      top: 80%;
      transform: rotateX(-75deg);
      transform-origin: 0% 0%;
    }
    .navbar.hover_animated .dropdown-menu.fade-up {
      top: 180%;
    }
    .navbar.hover_animated .nav-item:hover > .dropdown-menu {
      transition: 0.3s;
      opacity: 1;
      visibility: visible;
      top: 100%;
      transform: rotateX(0deg);
    }
  }

  #universal_nav {
    z-index: 2;
    position: static;
    padding-top: $universal_navbar_height_padding;
    padding-bottom: $universal_navbar_height_padding;
    background-color: $universal_navbar_bg_color;
    color: $universal_navbar_text_color;
    .nav-item {
      &.nav-item-icon {
        a.nav-link {
          padding: 5px 12px;
        }
        &:hover {
          span {
            color: $universal_navbar_text_color;
          }
        }
        span {
          color: #fff;
        }
      }
      &:hover {
        a.nav-link {
          color: $universal_navbar_active_text_hover_color;
        }
      }
      &.active {
        background-color: $universal_navbar_active_bg_color;
        a.nav-link {
          color: $universal_navbar_active_text_color;
        }
      }
      a.nav-link {
        color: $universal_navbar_text_color;
        padding: 5px 20px;
      }
    }
    .navbar-toggler,
    .dropdown_hamburger {
      .icon-bar {
        background-color: $universal_navbar_text_color;
      }
    }
    .dropdown-menu {
      z-index: 9999999;
    }
  }
  #main-navigation {
    padding-top: $navbar_height_padding;
    z-index: 999;
    padding-bottom: $navbar_height_padding;
    background-color: $navbar_bg_color !important;
    color: $navbar_text_color;
    .navbar-brand {
      img {
        height: 60px;
        width: auto;
      }
    }
    .nav-item {
      &.active {
        a::before {
          display: block;
          opacity: 1;
          width: 100% !important;
          left: 0 !important;
        }
      }
      a.nav-link {
        color: $navbar_text_color;
      }
    }
    .navbar-toggler,
    .dropdown_hamburger {
      .icon-bar {
        background-color: $navbar_text_color;
      }
    }
    .search {
      .dropdown-menu.show {
        right: 0 !important;
        min-width: 300px;
        left: auto;
      }
      button.btn.btn-outline-primary.border-0 {
        display: block;
        border-radius: 0px;
      }
    }
  }
  // Multi-level dropdowns
  .navbar {
    li {
      @include media-breakpoint-down(sm) {
        text-align: center;
      }
    }
    .nav-item {
      @include media-breakpoint-down(sm) {
        text-align: center;
      }
      a.nav-link {
        color: $navbar_text_color;
        // text-transform: uppercase;
        text-decoration: none;
        // letter-spacing: 0.15em;
        display: inline-block;
        padding: 15px 20px;
        position: relative;
        &:before {
          background: none repeat scroll 0 0 transparent;
          bottom: 0;
          content: "";
          display: block;
          height: 3px;
          left: 50%;
          position: absolute;
          background: $primary;
          transition: width 0.3s ease 0s, left 0.3s ease 0s;
          width: 0;
        }
        &:hover {
          &:before {
            width: 100%;
            left: 0;
          }
        }
      }
    }
    .dropdown-toggle {
      cursor: pointer;
      @include media-breakpoint-up(md) {
        &:not(.nav-link)::after {
          display: inline-block;
          width: 0;
          height: 0;
          margin-left: 0.5em;
          vertical-align: 0;
          border-bottom: 0.3em solid transparent;
          border-top: 0.3em solid transparent;
          border-left: 0.3em solid;
        }
      }
    }
    .dropdown-menu {
      background-color: #f9f9f9;
      padding-top: 0px;
      padding-bottom: 0px;
      border-radius: 0px;
      @include media-breakpoint-down(sm) {
        padding: 10px;
        padding-top: 10px;
        padding-bottom: 10px;
      }
      a {
        cursor: pointer;
        color: #000;
        padding: 0.5rem 1.5rem;
        width: 100%;
        display: inline-block;
      }
      li {
        &:hover {
          background-color: $primary;
          color: #fff;
          & > a {
            color: #fff;
            text-decoration: none;
          }
        }
      }
    }

    .dropdown-item {
      padding: 0;
      @include media-breakpoint-down(sm) {
        text-align: center;
      }
      &.active {
        color: inherit;
        text-decoration: none;
        background-color: inherit;
      }
      &:focus {
        color: #16181b;
        text-decoration: none;
        background-color: #f8f9fa;
      }
      &:hover {
        background-color: $primary;
        color: #fff;
        & > a {
          color: #fff;
          text-decoration: none;
        }
      }
    }
  }

  /* remove navbar button stying */
  .navbar-toggler {
    background: none;
    border: none;

    /* remove the blue outline when active or focused */
    &:active,
    &:focus {
      outline: 0;
    }

    /* basic styles for each icon bar */
    .icon-bar {
      display: block;
      width: 22px;
      height: 2px;
      border-radius: 1px;
      margin: 4px 0 4px 0;
      transition: all 0.2s;

      /* custom .navbar-dark .icon-bar background */
      .navbar-dark & {
        background: #ffffff;
      }

      /* .navbar open top .icon-bar rotated down 45° */
      &:nth-of-type(1) {
        transform: rotate(45deg);
        transform-origin: 10% 10%;
      }

      /* .navbar open middle .icon-bar invisible */
      &:nth-of-type(2) {
        opacity: 0;
        filter: alpha(opacity=0);
      }

      /* .navbar open bottom .icon-bar rotated up 45° */
      &:nth-of-type(3) {
        transform: rotate(-45deg);
        transform-origin: 10% 90%;
      }
    }

    /* styles for when .navbar is closed */
    &.collapsed {
      .icon-bar {
        /* .navbar closed top .icon-bar no rotation - straight */
        &:nth-of-type(1) {
          transform: rotate(0);
        }

        /* .navbar open middle .icon-bar visible */
        &:nth-of-type(2) {
          opacity: 1;
          filter: alpha(opacity=100);
        }

        /* .navbar open bottom .icon-bar no rotation - straight */
        &:nth-of-type(3) {
          transform: rotate(0);
        }
      }
    }
  }
  .dropdown_hamburger {
    button {
      background: none;
      border: none;
      /* remove the blue outline when active or focused */
      &:active,
      &:focus {
        outline: 0;
      }
    }

    .icon-bar {
      display: block;
      width: 22px;
      height: 2px;
      border-radius: 1px;
      margin: 4px 0 4px 0;
      transition: transform opacity filter transform-origin 0.2s;
    }
    .icon-bar {
      /* .navbar closed top .icon-bar no rotation - straight */
      &:nth-of-type(1) {
        transform: rotate(0);
      }

      /* .navbar open middle .icon-bar visible */
      &:nth-of-type(2) {
        opacity: 1;
        filter: alpha(opacity=100);
      }

      /* .navbar open bottom .icon-bar no rotation - straight */
      &:nth-of-type(3) {
        transform: rotate(0);
      }
    }
    /* styles for when .navbar is closed */
    &.show {
      /* basic styles for each icon bar */
      .icon-bar {
        /* .navbar open top .icon-bar rotated down 45° */
        &:nth-of-type(1) {
          transform: rotate(45deg);
          transform-origin: 10% 10%;
        }

        /* .navbar open middle .icon-bar invisible */
        &:nth-of-type(2) {
          opacity: 0;
          filter: alpha(opacity=0);
        }

        /* .navbar open bottom .icon-bar rotated up 45° */
        &:nth-of-type(3) {
          transform: rotate(-45deg);
          transform-origin: 10% 90%;
        }
      }
    }
  }
}