.features-library-row
  background-color: $orange
  position: relative
  padding: 80px 0

  &.detail-page
    background-color: $darkBlue
    display: none

  &:before
    content: ''
    pointer-events: none
    position: absolute
    top: 0
    left: 0
    width: 100%
    height: 40px
    background-image: url('/img/horizontal-shadow.png')
    background-size: contain
    background-repeat: repeat-x

  h3
    color: white
    +font-default(34px, 46px)
    text-align: center
    margin: 0 0 45px

  .features
    width: $contentGrid*10
    margin: auto
    +flex(space-between, flex-start)

  ul
    list-style: none
    padding: 0
    margin: 0
    width: calc((100% - 80px) / 3)

    li
      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-of-type(4)
        border-bottom: none

  .button
    border-radius: 4px
    border: 2px solid white
    display: block
    max-width: 260px
    margin: 60px auto 0

    a
      +flex(space-between, center)
      padding: 10px 20px 10px 35px
      +font-default(21px, 25px)
      color: white
      &:after
        content: ''
        +arrowWhite
        +translate3d(0,0,0)
        +transition(all .3s)
    &:hover
      a:after
        +translate3d(5px, 0,0)

+media-query(1150px)
  .features-library-row.detail-page
    display: block


+media-query(740px)
  .features-library-row
    .features
      width: $contentGrid*10
      margin: auto
      display: block
    ul
      width: 100%
      li:nth-of-type(4)
        border-bottom: 1px solid $lighterGray30