@charset "UTF-8"
.timeline

  .sky-background.full-text
    padding: 100px 0
    h2
      +font-default(32px, 36px)
      height: auto
      margin-bottom: 20px
    p
      +font-default(18px, 24px)
      max-width: 600px
      margin: auto
      text-align: center

  .main-timeline
    background-color: $lighterGray

    .placeholder
      position: relative
      width: $contentGrid*9
      max-width: 1000px
      margin: auto
      padding: 50px 0

      &:before
        content: ''
        position: absolute
        left: 149px
        top: 50px
        width: 2px
        height: calc(100% - 50px)
        background-color: $gray

    .end-timeline
      position: relative
      width: 100%
      height: 80px
      background: -moz-linear-gradient(top, rgba(241,241,241,1) 0%, rgba(241,241,241,0) 100%) /* FF3.6-15 */
      background: -webkit-linear-gradient(top, rgba(241,241,241,1) 0%,rgba(241,241,241,0) 100%) /* Chrome10-25,Safari5.1-6 */
      background: linear-gradient(to bottom, rgba(241,241,241,1) 0%,rgba(241,241,241,0) 100%) /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f1f1f1', endColorstr='#00f1f1f1',GradientType=0 ) /* IE6-9 */

    .current-rentman
      margin-bottom: 50px

      figure
        position: relative
        width: 80px
        margin: 0 0 0 109px
        img
          width: 100%

    .new-year
      position: relative
      display: block
      width: 80px
      padding: 10px 0
      margin-left: 110px
      margin-bottom: 30px
      text-align: center
      +font-bold(18px, 26px)
      font-size: 18px !important
      line-height: 24px !important
      color: $semiDarkGray
      background-color: $lighterGray

    article
      width: 75%
      margin-left: auto
      margin-bottom: 60px
      border: 2px solid $lightGray
      border-top: none
      background-color: white
      border-radius: 10px

      .date
        position: absolute
        display: block
        margin-top: 7px
        width: 150px
        left: 0
        top: auto
        +font-light(18px, 26px)
        font-size: 18px !important
        line-height: 24px !important
        color: $lightBlue

      .timeline-connection
        position: absolute
        left: 150px
        width: 75%
        height: 20px
        top: auto
        margin-top: 10px

        .circle
          position: absolute
          z-index: 2
          left: -10px
          top: 0
          width: 20px
          height: 20px
          background-color: white
          border-radius: 100%
          border: 2px solid $gray

        .line
          position: relative
          top: 9px
          display: block
          height: 2px
          width: 100%
          background-color: $gray

      .window-bar
        position: relative
        top: -2px
        left: -1px
        background-color: $lightGray
        width: calc(100% + 2px)

      figure
        width: calc(100% - 80px)
        margin: 40px auto
        img
          width: 100%
          &.medium
            display: none

      .content
        padding: 40px 40px 0

        h3
          +font-light(26px)
          line-height: 24px !important
          font-size: 24px
          color: $darkBlue
          margin-bottom: 20px

        p
          +font-light(18px, 26px)
          font-size: 16px
          line-height: 24px
          color: $lightBlue

          &:first-of-type
            margin-top: 0

        ul
          list-style: none
          padding-left: 35px

          li
            position: relative
            +font-light(18px, 26px)
            font-size: 16px
            line-height: 24px
            color: $lightBlue
            margin-bottom: 10px

            &:before
              content: ''
              position: absolute
              left: -35px
              top: 3px
              +sprite(-595px -92px, 21px, 20px)
              display: block

          &.no-checks
            li
              &:before
                top: -3px
                left: 30px
                background: none
                content: '•'
                color: $orange
                width: auto
                height: auto
                font-size: 30px !important

      .button
        width: 80%
        max-width: 240px
        +flex(space-between, center)
        margin: 30px auto 40px
        border: 2px solid $orange
        border-radius: 4px
        +transition(all .3s)
        +font-semi-bold(21px, 21px)
        font-size: 18px
        color: $orange
        padding: 10px 20px

        &:after
          content: ''
          +arrowOrange
          +translate3d(0,0,0)
          +transition(all .3s)
      a
        &:hover
          .button
            background-color: $orange
            color: white
            &:after
              +arrowWhite
              +translate3d( 5px, 0, 0)

      &.with-image
        .content
          padding-top: 0

    a.moreUpdatesLink
      width: 80%
      max-width: 240px
      +flex(space-between, center)
      margin: 30px auto 40px
      border: 2px solid $orange
      border-radius: 4px
      +transition(all .3s)
      +font-semi-bold(21px, 21px)
      font-size: 18px
      color: $orange
      padding: 10px 20px
      position: relative
      left: 12.5%
      cursor: pointer

      &:hover
        background-color: $orange
        color: white

    p.noMoreUpdates
      display: none
      width: 100%
      margin: 30px auto 40px
      color: $orange
      padding: 10px 20px
      position: relative
      left: 12.5%
      text-align: center

  .home-features-row
    .background
      .gray
        display: none

  +media-query(925px)
    .main-timeline
      .placeholder:before
        left: 20px

      .new-year
        margin-left: 0
        width: 50px
        text-indent: -8px


      article
        width: calc(100% - 80px)

        .date
          z-index: 2
          left: 180px
          margin-top: 5px
          +font-default()

        .timeline-connection
          left: 22px

      a.moreUpdatesLink, p.noMoreUpdates
        left: 7.5%

  +media-query(700px)
    .main-timeline
      .placeholder
        width: $contentGrid*10

      a.moreUpdatesLink, p.noMoreUpdates
        left: 7%

  +media-query(500px)
    .main-timeline
      article
        width: calc(100% - 60px)
        .date
          left: 160px

  +media-query(450px)
    .main-timeline

      .placeholder
        width: $contentGrid*11
        &:before
          left: calc(50% - 1px)

      .new-year
        margin-left: 0
        margin-bottom: 15px
        width: 100%
        text-indent: 0

      article
        position: relative
        width: 100%
        margin-bottom: 40px

        .timeline-connection
          display: none

        .date
          width: 100%
          left: 0
          text-align: center

      a.moreUpdatesLink, p.noMoreUpdates
        left: 0