/*==========================================================================
  Navigation / Header
  ========================================================================== */

header, #sticky-navigation
  position: relative
  z-index: 10

  .shadow-container
    position: relative
    background-color: white
    box-shadow: 0 1px 20px 0 rgba(0, 0, 0, 0.5)

    .nav-bar
      max-height: 100px
      padding: 13px 0 30px 0
      overflow: visible
      position: relative

      .offerte-button
        z-index: -1
        font-size: 17px
        line-height: 53px
        height: 49px
        min-width: 200px
        letter-spacing: -0.3px
        padding-left: 12px
        position: absolute
        right: 0
        top:  95%


  .grid-col
    vertical-align: baseline

  .top-bar
    height: 35px
    display: block
    padding: 0
    color: white
    background-color: $fontGray

    .right-bar
      height: 100%
      line-height: 34px
      font-size: 15px
      letter-spacing: -0.01px
      font-weight: bold
      text-align: right
      overflow: visible
      position: static

      a
        color: white
        text-decoration: none

      .mail
        position: relative
        z-index: 1
        &:before
          content: ''
          +mailIcon
          margin: 0 12px 0 20px
          +translate3d(0,0,0)

      .tel
        position: relative
        z-index: 1
        &:before
          content: ''
          +phoneIcon
          margin: 0 6px 0 40px
          +translate3d(0,0,0)

      .bar-stretcher
        width: 45%
        background: linear-gradient(90deg, $lightOrange 0%, $darkOrange 100%)
        height: 35px
        display: block
        position: absolute
        top: 0
        right: 0
        z-index: 0

  // Main logo
  .logo
    overflow: visible
    width: column(2.25)
    max-width: 200px

  /* Navigation
   ========================================================================== */

  nav
    width: 80%

    ul
      +flex(space-between, center)
      +flex-rows
      list-style: none

      li
        align-self: center
        a
          color: $fontGray
          font-size: 14px
          letter-spacing: -0.14px
          text-decoration: none
          text-transform: uppercase
          font-weight: bold

        &.active
          a
            color: $lightOrange
            position: relative



            &:before
              content: ""
              position: absolute
              left: 33%
              display: block
              bottom: -8px
              background: transparent url(/img/svg/active-arrow.svg) no-repeat center
              height: 222%
              width: 35%




    &.arrow
      &:before
        right: 10px
        font-size: 22px


#sticky-navigation
  position: fixed
  top: 0
  left: 0
  z-index: 50
  opacity: 0
  width: 100%
  height: 60px
  transform: translate3d(0, -60px, 0)
  transition: transform 0.4s, opacity 0.4s

  &.active
    opacity: 1
    transform: translate3d(0, 0, 0)

  .shadow-container
    .nav-bar
      max-height: 60px
      padding-top: 8px
      .logo
        max-width: 100px

      nav
        line-height: 0

      .offerte-button
        top: 85%

+respond-to-width(1025)
  header
    .top-bar
      .right-bar
        font-size: 14px
        width: 60%

        .bar-stretcher
          width: 54%

+respond-to-width(840)
  header
    .shadow-container, .offerte-button
      display: none

  #sticky-navigation
    display: none