#wrapper {
  #universal_nav {
    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 {
        &.active {
            background-color: $secondary;
        }
        a.nav-link {
            color: $universal_navbar_text_color;
        }
    }
    .navbar-toggler {
        .icon-bar {
            background-color: $universal_navbar_text_color;
        }
    }
    .dropdown-menu {
        z-index: 9999999;
    }
  }
  #main-navigation {
    padding-top: $navbar_height_padding;
    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 {
        .icon-bar {
            background-color: $navbar_text_color;
        }
    }
    .navbar-toggler {
      .icon-bar {
        background-color: $navbar_text_color;
      }
    }
    .search {
        .dropdown-menu.show {
            right: 0 !important;
            min-width: 300px;
            left: auto;
        }
    }
  }
  // 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: .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);
        }
      }
    }
  }
}