header
  position: fixed
  top: 0
  left: 0
  width: 100%
  z-index: 999
  .content-container
    +flex(space-between, center)
    position: relative
    &:after
      position: absolute
      content: ''
      order: 1
      width: $contentGrid*5
      height: 2px
      background: white
      bottom: 0
      right: 0
      opacity: 1
      +transition(all 0.2s)

  .menu-icon
    position: relative
    cursor: pointer
    z-index: 5
    width: $contentGrid
    background: $navyBlue
    +flex(center, center)
    float: left
    -webkit-box-shadow: 0px 0px 5px 2px rgba(0,0,0,0.2)
    -moz-box-shadow: 0px 0px 5px 2px rgba(0,0,0,0.2)
    box-shadow: 0px 0px 5px 2px rgba(0,0,0,0.2)

    .icon
      height: 17px
      width: 28px
      position: relative
      span
        height: 3px
        background: white
        display: block
        width: 100%
        position: absolute
        left: 0

        &:first-child
          top: 0
        &.middle
          top: 7px
        &:last-child
          bottom: 0
  .link
    float: right
    position: relative
    z-index: 5
    display: block
    opacity: 1
    order: 3
    +transition(all 0.2s)
    p, a, span
      +font-semi-bold(18px)
      color: white

    span
      opacity: 0.6
    &.show
      opacity: 1 !important
  nav
    position: absolute
    height: 100%
    width: 100%
    top: 0
    left: 0

    +transition(all 0.3s)
    +translate3d(0, -101%, 0)

    &.active
      +translate3d(0, 0, 0)


    .menu
      position: relative
      z-index: 2
      list-style: none
      max-width: 1440px
      width: 95%
      height: 100%
      padding: 0
      margin: auto
      background: $navyBlue

      li
        margin-right: 35px
        display: inline-block
        opacity: 0.6
        +transition(all 0.2s)
        cursor: pointer
        height: 100%
        p
          margin: 0
          padding: 0
          height: 100%
          +flex(center, center)
          color: white
          +font-semi-bold(18px)

        &.phone
          float: right
          p, a, span
            color: white
          span
            opacity: 0.6

        &.active
          opacity: 1
        &:hover
          opacity: 0.8


        &:first-child
          margin-left: $contentGrid*2

    .background
      position: absolute
      width: 50% //calculated by Javascript
      background: $navyBlue
      height: 100%
      top: 0
      left: 50% //calculated by Javascript
      webkit-box-shadow: -1px 8px 15px -11px rgba(0,0,0,0.75)
      -moz-box-shadow: -1px 8px 15px -11px rgba(0,0,0,0.75)
      box-shadow: -1px 8px 15px -11px rgba(0,0,0,0.75)

  .clear
    display: none

  &.scrolled
    .content-container:after, .link
      opacity: 0 !important

+media-query(1000px)
  header nav .menu li:first-child
    margin-left: $contentGrid*1.5
+media-query(950px)
  header
    .link
      p, a, span
        +font-semi-bold(16px)
    nav
      .menu
        li
          margin-right: 20px
          p
            +font-semi-bold(16px)
+media-query(800px)
  header
    .link
      p, a, span
        +font-semi-bold(19px)
    nav
      .menu
        li
          p
            +font-semi-bold(19px)

+media-query(740px)
  header.main
    display: none