header
  position: relative
  background: $white
  width: 100%

  .content-container
    position: relative
    +flex(space-between, flex-start)
    height: $navigationHeight
    max-height: $navigationHeight

// logo in white square
.logo
  z-index: 9
  position: relative
  background: $white
  width: $logoBlockWidth
  height: $logoBlockHeight
  padding: $logoBlockPadding
  img
    width: 100%
    height: 100%

  +respond-to(small)
    width: 200px
    padding: 10px

  +respond-to(mobile)
    display: none !important

// navigation
.main-navigation
  max-width: 100%
  align-self: center
  ul
    +flex()
    list-style: none
    text-transform: none
    li
      margin-left: 20px
      &:first-child
        margin-left: 0
      &.active
        a
          color: $mainNavActiveColor

      a
        +font-semi-bold(17px, 30px)
        color: $mainNavLinkColor
        transition: color 0.4s ease
        &:hover
          color: $mainNavHoverColor