#header
  position: fixed
  top: 0
  left: 0
  z-index: 10
  width: 100%

  // Blue header bar
  // ==========================================================================

  // Blue bar
  .blue-bar
    position: relative
    z-index: 10
    background: rgba($blue,0.95)
    color: #fff

    .center
      +grid-height
      @extend %clearfix

    // Logo
    #logo-holder
      display: block
      +calculate(width, "25% - 50px")
      +respond-to-width(1300px)
        width: 25%

      img
        +grid-height-s(.75)
        +grid-margin($top: .2)

    // Navigation
    #nav-holder
      +calculate(width, "75% + 32px")
      +respond-to(medium)
        +calculate(width, "75% + 40px")

    .nav-main
      float: left
      width: auto
      //+grid-padding-s($left: 1)
      li
        float: left
        +grid-margin-s($right: .5)
        a
          display: block
          color: rgba(255,255,255,.7)
          font-size: 1.4em // 14px
          +grid-line-height
          +transition(color 150ms ease-out)
        &:hover
          a
            color: #fff
        &.active
          a
            color: #fff
            +bold

    // Login / Shopping cart
    .nav-sub
      float: right
      width: auto

      // Cart
      .cart
        display: block
        float: left
        background: $dark-grey
        color: #fff
        +grid-line-height
        text-align: center
        font-size: 1.4em

        +transition(background-color .2s ease-out, color .2s ease-out)

        .sep
          color: #9E9E9E
          margin: 0 2px
        .quantity
          +bold
          color: #fff

        &:hover
          background: #262626
          color: $blue



  // White header bar
  // ==========================================================================

  // White bar
  .white-bar
    background: #fff
    border-bottom: 1px solid #EAE7E4

    #shop-name
      width: 25%

    // Title
    .title
      +grid-line-height($factor: 2)
      font-size: 3.2em // 32px
      color: $blue
      +semibold-uc

    // Search
    .search-bar
      position: absolute
      top: 50%
      width: 33.33333%
      left: 25%

      +grid-margin-s($top: -0.5)

    .streamer
      +grid-line-height($factor: 2)

      +calculate(left, "25% - 32px")
      +respond-to(medium)
        +calculate(left, "25% - 40px")
      +grid-margin-s($left: 1)
      +italic
      font-size: 1.8em


  // Customer service
  .customer-service
    display: block
    position: absolute
    top: 0
    right: 0
    +grid-height-s(3.25)
    +grid-margin-s($top: .25)
    color : $grey

  // Person
  .person
    position: absolute
    top: 0
    right: 0
    +grid-height-s(3.25)
    +grid-width-s(3.25)

    border-radius: 52px
    border: 4px solid #fff
    overflow: hidden

    +respond-to(medium)
      border-radius: 65px

    img
      width: 100%

  // Text cloud
  .cloud
    display: block
    position: relative
    z-index: 10
    margin: 16px 0 0 0
    +grid-margin-s($right: 3)
    +grid-padding-s($top: .25, $right: .5, $bottom: .25, $left: .5)

    background: #fff
    border-radius: $border-radius
    +outer-glow(4px,0.1)

    +type-basic

    .phone
      color: $blue
    .name
      +italic

    // Little arrow
    &:after
      content: ''
      display: block
      position: absolute
      top: 50%
      right: -8px
      margin-top: -5px
      +triangle(8px 16px,#fff,right)