header
  .content-container
    +flex(flex-start, flex-start)
  .logo
    width: $contentGrid
    margin-left: $contentGrid
    margin-top: 61px
    img
      width: 100%
  nav
    width: $contentGrid * 8
    margin-left: $contentGrid

    ul
      padding-left: 0
      list-style: none

      &.secondary-nav
        height: 60px
        +flex(flex-end, center)
        margin: 0
        border-bottom: 1px solid $lighterGray
        li
          margin-left: 50px
          height: 100%
          position: relative
          &:before
            position: absolute
            left: -25px
            top: 17px
            content: '|'
            color: $lighterGray
          &:first-child
            &:before
              display: none
          a
            +font-light()
            font-size: 15px !important
            line-height: 60px !important
            display: block

          &.active
            a
              +font-semi-bold()
              color: $darkBlue
              &:after
                content: ''
                width: 100%
                height: 2px
                background-color: $darkBlue
                position: absolute
                left: 0
                bottom: 12px

      li
        a
          color: $lightBlue
          +font-light()
          font-size: 19px !important
          line-height: 22px !important

    .main-nav
      +flex(space-between, center)
      height: 117px
      .capterra
        position: relative
        top: -3px
      ul
        width: calc(100% - 265px)
        +flex(flex-end, center)
        margin: 0
        li
          margin-left: 45px
          &:first-of-type
            margin-left: 0 !important

          &:last-child
            border: 2px solid $orange
            border-radius: 4px
            a
              padding: 13px 26px
              display: block
              color: $orange
          &.active
            position: relative
            a
              +font-semi-bold()
              color: $darkBlue
              &:after
                content: ''
                width: 100%
                height: 2px
                background-color: $darkBlue
                position: absolute
                left: 0
                bottom: -4px
            &:last-child
              background-color: $orange
              a
                color: white
                &:after
                  display: none
  .language
    width: calc(#{$contentGrid} - 40px)
    margin-left: 40px
    padding-right: 5px
    ul
      list-style: none
      padding: 0
      +flex(flex-end, flex-start)
      +flex-rows
      li
        text-align: right
        width: 100%
        +order(2)
        opacity: 0
        line-height: 18px !important
        +translate3d(0, -15px, 0)
        +transition(all 0.3s)
        a
          text-transform: uppercase
          +font-light()
          font-size: 13px !important
          line-height: 30px !important
          color: $gray
          position: relative
          +transition(all 0.2s)
          &:after
            content: ''
            width: 0
            height: 2px
            background-color: $darkBlue
            position: absolute
            left: 0
            bottom: -4px
            +transition(width 0.3s)
        &:nth-child(2)
          +translate3d(0, -25px, 0)
        &:nth-child(3)
          +translate3d(0, -35px, 0)
        &:nth-child(4)
          +translate3d(0, -45px, 0)
        &:nth-child(5)
          +translate3d(0, -55px, 0)

        &.active
          +order(1)
          opacity: 1
          position: relative
          +translate3d(0,0,0)
          a
            +font-semi-bold()
            color: $darkBlue
            &:after
              width: 100%
    &:hover
      ul
        li
          opacity: 1
          +translate3d(0,0,0)
          a:hover
            &:after
              width: 100%
          a:after
            background-color: $lightBlue
            height: 1px
          &.active a:after
            height: 2px
            background-color: $darkBlue

.sticky-header
  position: fixed
  height: 100px
  width: 100%
  box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.11)
  left: 0
  top: 0
  z-index: 1000
  background-color: white
  opacity: 0
  +translate3d(0, -40px, 0)
  +transition(all 0.5s)
  pointer-events: none
  .content-container
    height: 100%
    +flex(space-between, center)
    .logo
      margin-left: $contentGrid
      img
        height: 80px
    ul
      margin-right: $contentGrid
      padding-left: 0
      list-style: none
      +flex(flex-end, center)
      li
        margin-left: 35px

        a
          color: $lightBlue
          +font-light()
          font-size: 15px !important
          line-height: 22px !important

        &:first-of-type
          margin-left: 0 !important

        &:last-child
          border: 2px solid $orange
          border-radius: 4px
          a
            padding: 13px 26px
            display: block
            color: $orange
        &.active
          position: relative
          a
            +font-semi-bold()
            color: $darkBlue
            &:after
              content: ''
              width: 100%
              height: 2px
              background-color: $darkBlue
              position: absolute
              left: 0
              bottom: -5px
          &:last-child
            background-color: $orange
            a
              color: white
              &:after
                display: none
  &.show
    opacity: 1
    pointer-events: all
    +translate3d(0, 0, 0)
+media-query(1400px)
  header
    .logo
      width: $contentGrid*2
      margin-right: 0
      img
        max-width: 120px
    nav
      width: 66%
      margin-left: 0
      ul
        &.secondary-nav
          li
            a
              font-size: 13px !important
              line-height: 60px !important
        li
          a
            font-size: 16px !important
      .main-nav
        ul
          li:last-child
            a
              padding: 8px 14px

+media-query(1150px)
  header
    nav
      width: $contentGrid * 8
      margin-left: $contentGrid
      .main-nav
        +flex(flex-end, center)
        .capterra
          display: none
        ul
          width: 100%

+media-query(1000px)
  header
    nav
      .main-nav
        ul
          li
            margin-left: 30px

+media-query(850px)
  header
    nav
      ul.secondary-nav
        li
          margin-left: 30px
          &:before
            left: -15px
      .main-nav
        ul
          li
            a
              font-size: 14px !important
+media-query(800px)
  .sticky-header
    .content-container
      width: 100%
      padding: 0 10px
      .logo
        margin-left: 0
      ul
        margin-right: 0