.centered-navigation
  ///////////////////////////////////////////////////////////////////////////////////
  $base-border-radius: 3px !default
  $dark-gray: #333 !default
  $large-screen: em(860) !default
  $base-font-color: $dark-gray !default
  //////////////////////////////////////////////////////////////////////////////////
  $centered-navigation-padding: 1em
  $centered-navigation-logo-height: 2em
  $centered-navigation-background: $dark-gray
  $centered-navigation-color: transparentize(white, 0.3)
  $centered-navigation-color-hover: white
  $centered-navigation-height: 60px
  $centered-navigation-item-padding: 1em
  $centered-navigation-submenu-padding: 1em
  $centered-navigation-submenu-width: 12em
  $centered-navigation-item-nudge: 2.2em
  $horizontal-bar-mode: $large-screen
  background-color: $centered-navigation-background
  border-bottom: 1px solid darken($centered-navigation-background, 6%)
  min-height: $centered-navigation-height
  width: 100%
  z-index: 9999
  // Mobile view
  .mobile-logo
    display: inline
    float: left
    max-height: $centered-navigation-height
    padding-left: $centered-navigation-padding
    img
      max-height: $centered-navigation-height
      opacity: .6
      padding: .8em 0
    +media($horizontal-bar-mode)
      display: none
  .centered-navigation-mobile-menu
    color: $centered-navigation-color
    display: block
    float: right
    font-weight: 700
    line-height: $centered-navigation-height
    margin: 0
    padding-right: $centered-navigation-submenu-padding
    text-decoration: none
    text-transform: uppercase
    +media($horizontal-bar-mode)
      display: none

    &:focus,
    &:hover
      color: $centered-navigation-color-hover
  // Nav menu
  .centered-navigation-wrapper
    +outer-container
    +clearfix
    position: relative
    z-index: 999
  ul.centered-navigation-menu
    -webkit-transform-style: preserve-3d
    // stop webkit flicker
    clear: both
    display: none
    margin: 0 auto
    overflow: visible
    padding: 0
    width: 100%
    z-index: 99999
    &.show
      display: block
    +media($horizontal-bar-mode)
      display: block
      text-align: center
  // The nav items
  .nav-link:first-child
    +media($horizontal-bar-mode)
      margin-left: $centered-navigation-item-nudge
  ul li.nav-link
    background: $centered-navigation-background
    display: block
    line-height: $centered-navigation-height
    overflow: hidden
    padding-right: $centered-navigation-submenu-padding
    text-align: right
    width: 100%
    z-index: 9999
    a
      color: $centered-navigation-color
      display: inline-block
      outline: none
      text-decoration: none
      &:focus,
      &:hover
        color: $centered-navigation-color-hover
    +media($horizontal-bar-mode)
      background: transparent
      display: inline
      line-height: $centered-navigation-height
      a
        padding-right: $centered-navigation-item-padding
  li.logo.nav-link
    display: none
    line-height: 0
    +media($large-screen)
      display: inline
  .logo img
    margin-bottom: -$centered-navigation-logo-height / 3
    max-height: $centered-navigation-logo-height
    opacity: 0.6
  // Sub menus
  li.more.nav-link
    padding-right: 0
    +media($large-screen)
      padding-right: $centered-navigation-submenu-padding

    > ul > li:first-child a
      padding-top: 1em
    a
      margin-right: $centered-navigation-submenu-padding
    > a
      padding-right: 0.6em
    > a:after
      +position(absolute, auto -0.4em auto auto)
      color: $centered-navigation-color
      content: "\25BE"
  li.more
    overflow: visible
    padding-right: 0
    a
      padding-right: $centered-navigation-submenu-padding
    > a
      padding-right: 1.6em
      position: relative
      +media($large-screen)
        margin-right: $centered-navigation-submenu-padding

      &:after
        content: "›"
        font-size: 1.2em
        position: absolute
        right: $centered-navigation-submenu-padding / 2
    &:focus > .submenu,
    &:hover > .submenu
      display: block
    +media($horizontal-bar-mode)
      padding-right: $centered-navigation-submenu-padding
      position: relative
  ul.submenu
    display: none
    padding-left: 0
    +media($horizontal-bar-mode)
      left: -$centered-navigation-submenu-padding
      position: absolute
      top: 1.5em

    .submenu
      +media($horizontal-bar-mode)
        left: $centered-navigation-submenu-width - 0.2em
        top: 0
    li
      display: block
      padding-right: 0
      +media($horizontal-bar-mode)
        line-height: $centered-navigation-height / 1.3
        &:first-child > a
          border-top-left-radius: $base-border-radius
          border-top-right-radius: $base-border-radius
        &:last-child > a
          border-bottom-left-radius: $base-border-radius
          border-bottom-right-radius: $base-border-radius
          padding-bottom: .7em

      a
        background-color: darken($centered-navigation-background, 3%)
        display: inline-block
        text-align: right
        text-decoration: none
        width: 100%
        +media($horizontal-bar-mode)
          background-color: $centered-navigation-background
          padding-left: $centered-navigation-submenu-padding
          text-align: left
          width: $centered-navigation-submenu-width