#nav
  margin-bottom: 20px

  .navbar-nav
    display: inline-block

  .navbar-nav
    float: none

  .navbar-collapse,
  .navbar-header
    text-align: center

  ul
    list-style: none
    text-align: center

    .nav_item
      display: inline-block
      background: none
      border: none
      border-bottom: 3px solid rgba($main-color, 0)
      border-radius: none
      +transition(border-color, 200ms)

      a
        display: block
        +size(100% 100%)
        padding: 5px 14px
        text-decoration: none
        color: #fff
        font-size: 32px
        font-weight: 600
        +transition(color, 200ms)

      &:hover
        background-color: transparent
        border-color: rgba($main-color, 1)

        a
          background-color: transparent
          color: $main-color

  #navbar-collapse-button.navbar-toggle
    float: none
    margin: 0
    color: $main-color
    font-size: 32px
    +transition(color, 200ms)

    &:hover,
    &:active
      background-color: transparent

    &.collapsed
      color: #fff

      &:hover
        color: $main-color

  @media (max-width: 767px)
    .navbar-collapse
      background: #212121
      border-radius: 5px
      border: 1px solid #212121
      box-shadow: inset 0 0 6px #212121

    ul
      .nav_item
        display: block
        padding: 5px