header
  background-color: $lighterGray
  height: 60px
  .grid-row
    height: 100%
  .logo
    width: column(1)
    margin-left: column(1)
    margin-top: 61px
    img
      width: 100%

  nav
    width: column(8)
    margin-left: column(1)
    height: 100%

    ul
      margin: 0
      padding-left: 0
      list-style: none
      height: 100%
      li
        height: 100%
        a
          color: $lightBlue
          font-weight: light()
          +flex(center, center)
          height: 100%
          text-decoration: none

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

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

  .language
    width: 80px
    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
        +translate3d(0, -15px, 0)
        transition: all 0.3s
        a
          text-transform: uppercase
          font-weight: light()
          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-weight: 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