.feature-content
  position: relative
  .background
    position: absolute
    width: 50%
    height: 100%
    left: 0
    top: 0
    background-color: $darkBlue
    &:before
      content: ''
      height: 70px
      width: 100%
      background-color: $lightBlue
      opacity: 0.5
      position: absolute
      top: 0
      left: 0

  .content-container.inner
    position: relative
    +flex(flex-end, flex-start)


  .feature-nav
    width: $contentGrid*2.5
    position: absolute
    left: -$contentGrid*0.5
    .header
      height: 70px
      padding: 0 40px
      +flex(flex-start, center)
      h4
        color: white
        +font-semi-bold(24px, 24px)
        font-size: 22px
    ul
      list-style: none
      margin-top: 40px
      padding-bottom: 20px
      padding-right: 20px
      li
        margin-bottom: 18px
        line-height: 18px !important
        a
          +font-light()
          font-size: 15px !important
          line-height: 15px !important
          color: white

          .date
            +font-light(15px, 18px)
            font-size: 14px
            color: $gray
            display: block

        &.active
          +flex(center, center)
          position: relative
          &:before
            content: ''
            +arrowOrange
            left: -25px
            position: absolute
          a
            width: 100%
            +font-semi-bold()
            color: $orange
            .date
              color: $orange
              +font-semi-bold(15px, 18px)
              font-size: 14px

  .feature-detail
    width: $contentGrid*10
    background-color: white
    padding: 15px $contentGrid 50px

    .intro
      +flex(space-between, center)
      margin-bottom: 30px
      .text
        width: 100%
        //margin-right: 20px
        h1
          +font-light(30px, 30px)
          font-size: 28px
          color: $darkBlue
          margin-bottom: 10px
        h2
          +font-light(20px, 28px)
          font-size: 18px
          line-height: 24px
          color: $darkBlue

      .animation-placeholder
        width: 265px

    .other-features
      margin: 25px 0
      border-top: 2px solid $lighterGray
      padding-top: 40px
      position: relative


      >p
        +font-light(24px, 24px)
        font-size: 22px
        line-height: 22px
        color: $lightBlue
        margin: 0 0 40px
      .placeholder
        +flex(space-between, flex-start)
        .feature-block
          width: 30%
          position: relative
          &:after
            content: ''
            position: absolute
            bottom: 0
            left: -10px
            width: calc(100% + 20px)
            height: 2px
            background: $lighterGray
          a
            display: block
          .content
            background-color: #f9f9f9
            padding: 20px 10%
            height: calc(100% - 40px)
            +transition(all 0.3s)


            h5
              +font-semi-bold()
              font-size: 17px !important
              line-height: 17px !important
              color: $darkerBlue
              margin-bottom: 15px

            p
              margin: 0 0 20px
              color: $lightBlue
              +font-light()
              font-size: 15px !important
              line-height: 18px !important
            span
              +font-default()
              font-size: 15px !important
              line-height: 15px !important
              color: $orange
              &:after
                content: ''
                margin-left: 8px
                +arrowOrange
                +transition(all 0.3s)
              +translate3d(0, 0,0)

          &:hover
            .content
              span:after
                +translate3d(5px, 0,0)

+media-query(1580px)
  .feature-content .feature-nav ul li.active:before
    display: none

+media-query(1150px)
  .feature-content
    .feature-nav, .background
      display: none
    .feature-detail
      width: 100%

+media-query(1000px)
  .feature-content
    .feature-detail
      .other-features
        p
          text-align: center
        .placeholder
          +flex(center, flex-start)
          +flex-rows
          .feature-block
            width: 100%
            margin-bottom: 40px
            max-width: 460px
            a
              height: auto !important

+media-query(680px)
  .feature-content
    .feature-detail
      .intro
        .text
          width: 100%
        .animation-placeholder
          display: none