.home-features-row
  position: relative

  .background
    position: absolute
    width: 100%
    height: 100%
    left: 0
    top: 0
    .gray
      background-color: #f5f5f5
      position: absolute
      width: 50%
      height: 100%
      left: 0
      top: 0
    .orange
      background-color: $orange
      position: absolute
      width: 50%
      height: calc(100% - 61px)
      right: 0
      top: 0


  .content-container
    position: relative

  .content
    width: $contentGrid*4
    margin-left: $contentGrid
    display: inline-block
    padding: 80px 15px 100px 0px

    h3
      +font-default(34px, 36px)
      color: $darkBlue
      position: relative
      &:before
        content: ''
        +sprite(-35px -67px, 31px, 28px)
        display: inline-block
        position: absolute
        left: -50px
        top: 4px

    h4
      +font-light(26px, 36px)
      color: $lightBlue
      font-size: 24px

    h2
      +font-light(24px, 36px)
      color: $lightBlue
      font-size: 21px

    p
      +font-default(21px, 30px)
      font-size: 18px
      color: $darkBlue
      width: 100%
      max-width: 300px

    .feature-button
      width: 100%
      max-width: 240px
      margin-top: 50px
      background: $orange
      +transition(all .3s)
      border-radius: 4px
      display: inline-block
      a
        +font-semi-bold(21px, 21px)
        font-size: 18px
        color: white
        padding: 15px 25px
        +flex(space-between, center)
        &:after
          content: ''
          +arrowWhite
          +translate3d(0,0,0)
          +transition(all .3s)
      &:hover
        background-color: $fellOrange
        a:after
          +translate3d( 5px, 0, 0)

  .features-block
    background-color: $orange
    position: absolute
    height: 100%
    top: 0
    left: $contentGrid*5
    width: calc(#{$contentGrid} * 6 - 8px)
    padding: 0 0 0 $contentGrid/2
    +flex(center, center)

    .vertical-shadow
      width: 40px
      height: 100%
      position: absolute
      left: 0
      top: 0
      +transform(rotate(180deg))
      background-image: url("/img/vertical_small_shadow.png")

    .feature-button
      width: 100%
      position: absolute
      bottom: 0
      right: 0
      max-width: 280px
      margin-top: 50px
      border-radius: 4px
      display: inline-block
      &:before
        pointer-events: none
        content: ''
        position: absolute
        left: 0
        top: 0
        width: 100%
        height: 100%
        background-image: url("/img/vertical_large_shadow.png")
        background-position: left top
        background-repeat: repeat-y
      a
        +font-semi-bold(21px, 21px)
        font-size: 18px
        color: white
        padding: 5px 25px
        height: 60px
        +flex(space-between, center)
        background-color: rgba(234, 118, 0 , 0)
        +transition(all .3s)
        &:after
          content: ''
          +arrowWhite
          +translate3d(0,0,0)
          +transition(all .3s)
      &:hover
        a
          background-color: rgba(234, 118, 0 , 0.4)
          &:after
            +translate3d( 5px, 0, 0)


    ul
      list-style: none
      padding: 0
      margin: 0
      +flex(space-between, flex-start)
      +flex-wrap(wrap)
      +flex-direction(row)
      +flex-flow(row wrap)

      li
        width: calc(100% / 11 * 5)
        border-bottom: 1px solid $lighterGray30
        a
          +font-semi-bold(18px, 18px)
          font-size: 16px
          color: white
          height: 60px
          +flex(flex-start, center)
          span
            display: inline-block
            width: 45px
            text-align: center
            margin-right: 10px
            &:before
              display: inline-block
              content: ''

        &:nth-child(4n+4)
          border-bottom: 0

        &.project-management
          order: 1
          a span:before
            +sprite(-200px 0, 42px, 32px)
        &.transport-scheduling
          order: 3
          a span:before
            +sprite(-200px -35px, 38px, 26px)
        &.quotation-invoicing
          order: 5
          a span:before
            +sprite(-200px -65px, 23px, 28px)
        &.qr-code-tracking
          order: 7
          a span:before
            +sprite(-200px -95px, 22px, 22px)
        &.dynamic-interface
          order: 2
          a span:before
            +sprite(-200px -120px, 37px, 33px)
        &.freelancer-portal
          order: 4
          a span:before
            +sprite(-250px -65px, 13px, 32px)
        &.warehouse-module
          order: 6
          a span:before
            +sprite(-290px 0, 37px, 32px)
        &.time-tracking
          order: 8
          a span:before
            +sprite(-74px -75px, 27px, 27px)


+media-query(1050px)
  .home-features-row
    .background
      .orange
        height: 100%
    .features-block
      width: $contentGrid*7

+media-query(850px)
  .home-features-row
    .content-container
      width: 100%
      background: #f5f5f5
    .background
      display: none
    .content
      width: $contentGrid*8
      margin: 0 $contentGrid*2
    .features-block
      padding: 80px $contentGrid 100px
      position: relative
      left: auto
      top: auto
      width: 100%

      .vertical-shadow
        display: none

+media-query(500px)
  .home-features-row
    .features-block
      ul
        li
          width: 100%
          &:nth-child(4n+4)
            border-bottom: 1px solid $lighterGray30