.nav-panel-middle
  height: 50px

  @media(max-width: breakpoint)
    background-color: rgba(43, 44, 46, 0.95)

  a:hover
    text-decoration: none

.nav-panel-middle__ul
  height: 100%
  flex-wrap: nowrap;

  div
    flex-wrap: nowrap;

.nav-panel-middle__li
  user-select: none
  position: relative
  display: inline-block
  margin: 0 5px
  color: white
  text-transform: uppercase
  letter-spacing: 1.25px

  a
    cursor: pointer
    color: white
    display: block
    padding: 20px 12.5px

.nav-panel-middle__btn:before
  content: ''
  position: absolute
  left: 12.5px
  bottom: 12px
  width: calc(100% - 25px)
  height: 3px
  /* by default the bar is light grey and hidden */
  background-color: lightGrey
  transform: scale(0, 1)
  transform-origin: 0 50%
  transition: 250ms

.nav-panel-middle__btn:not(.nav-panel-middle__li--active):hover:before
  /* when you mouse over the bar it becomes partially visible, but still grey */
  transform: scale(0.25, 1)

.nav-panel-middle__btn.nav-panel-middle__li--active:before
  /* when the bar fully expands it turns green */
  background-color: lightGreen

.nav-panel-middle__li--active:before
  transform: scale(1, 1)

.nav-panel-middle__logo
  position: relative
  width: 110px
  height: 30px
  margin: 12.5px 0 12.5px 12.5px
  padding: 0

  @media(max-width: breakpoint)
    margin: 10px 0 10px 12.5px

.nav-panel-middle__logo-img
  position: absolute
  top: -3px
  height: inherit

.nav-panel-middle__tagline-container
  margin-left: 15px

.nav-panel-middle__tagline
  border-left: 1px solid white
  margin: 0
  padding: 0 15px
  font-weight: 300
  font-size: 12px
  line-height: 1

.nav-panel-middle__hamburger
  display: none
  position: relative

  @media(max-width: breakpoint)
    display: block

  position: absolute
  top: 0
  right: 0
  height: inherit
  width: inherit
  margin: 10px
  fill: white

  button
    display: block
    width: 30px
    height: 30px
    padding: 0

  button::-moz-focus-inner
    padding: 0
    border: 0

  svg
    width: inherit
    height: inherit