$large-screen: 50em !default;
$medium-screen: 30em !default;
$submenu-width: 12em;

$action-color: #477DCA !default;
$sliding-panel-border-color: #eee;
$sliding-panel-background: #fff;
$sliding-panel-color: $primary;
$sliding-panel-border: 1px solid $sliding-panel-border-color;
$sliding-panel-background-hover: $primary;
$sliding-panel-color-hover: #fff;
$sliding-panel-background-focus: darken($sliding-panel-background, 5%);

.navigation-bar {
  display: none;
  @include media ($medium-screen) {
    display: inline-block;
  }
  .navigation-wrapper {
    @include clearfix;
    @include outer-container;
    position: relative;
  }

  .logo {
    float: left;

    img {
      max-height: 2em;
      padding-left: 1em;
      padding-right: 1em;
    }
  }

  nav {
    float: none;

    @include media ($medium-screen) {
      float: left;
      text-align: center;
      line-height: 1.5em;
      padding-top: 0.3em;
    }
  }

  ul.navigation-menu {
    clear: both;
    margin: 0 auto;
    overflow: visible;
    padding: 0;
    width: 100%;

    @include media ($medium-screen) {
      display: block;
      margin: 0;
      padding: 0;
    }
  }

  // Nav items
  ul li.nav-link {
    display: block;
    text-align: right;
    width: 100%;

    @include media ($medium-screen) {
      background: transparent;
      display: inline;
      text-decoration: none;
      width: auto;
    }
  }

  li.nav-link a {
    display: inline-block;

    @include media ($large-screen) {
      padding-right: 1em;
    }
  }
}