.top.landing-page .topbar,
.wrapper.centered .topbar
  margin: 0 auto
  max-width: 1024px

.top.landing-page,
.top.landing-page .topbar
  background-color: #fff

  .button--signin
    margin-top: -4px
    background-color: #ffffff
    background-image: inline-image('landing-page/signingithub.svg')
    background-size: 16px 16px
    border: 2px solid #e4e7e7
    color: #a0a8a8
  .button--signingin
    margin-top: -4px
    border: 2px solid #3FA75F
  .button--signin:hover
    background-color: #73c78d
    background-image: inline-image('landing-page/signingithub-hover.svg')
    border: 2px solid #73c78d
    color: #fff

.landing-centered-wrapper
  .button
    .sync-spinner
      height: 1.45em;
      margin-right: 0.3em;
      transform: translateY(-0.1em);

.wrapper.centered #top,
.wrapper.centered .topbar,
.wrapper.non-centered .topbar
  background-color: #eff0ec

.landing
  margin: 0 auto 170px auto
  font-weight: 300
  overflow: hidden

  h1
    font-size: 5em
    line-height: 1em
    font-weight: 300
    color: #8f9294
    margin-bottom: 0

  .hero, .oss-testing, .customers, .recent-builds, .free-for-oss, .private-repos, .features-list, .build-flows, .user-testimonials
    padding: 70px 0 70px 0

  .hero, .oss-testing, .customers, .recent-builds-text, .free-for-oss, .private-repos, .features-list, .build-flows, .user-testimonials

    h1, h2
      margin-top: 0

    h2
      font-size: 3.3em
      line-height: 1.15em
      font-weight: 300
      color: #39a85b

    p
      line-height: 1.5em
      font-color: #606162
      font-size: 1.7em

  .hero.z-1
    text-align: center
    position: relative
    z-index: 1


  .landing-centered-wrapper
    max-width: 1024px
    margin: 0 auto

    > .columns.medium-6:first-child
      padding-right: 2em
    > .columns.medium-6:last-child
      padding-left: 2em

  #laptop
    margin-bottom: -192px

  #laptop img
    border: 2px solid #d8dadc
    border-radius: 2px

  .hero
    background-color: #faf9f6
    h1
      color: #339999
      line-height: 1.2em
      margin-bottom: 0

    p
      margin: 0
      line-height: 1.5em

    br.mobile-break
      display: none

    .button
      background-color: #39a85b
      color: #fff
      font-size: 2em
      font-weight: 300
      padding: 0.5em
      margin: 1.3em 0 1.3em 0
      border-radius: 2px
      border: 0

      &:hover
        background-color: #73c78d

    .sign-in-mascot
      padding-right: 10px
    .loading-indicator--white
      height: 1.4em;
      line-height: 1;
      margin-right: 0.5em;

  .oss-testing
    background-color: #ffffff
    text-align: center
    position: relative
    z-index: 1000

    h2
      margin: 0

    p
      margin-top: 0.5em
      margin-bottom: 2em

    br.mobile-break
      display: none

  .customers
    text-align: center

    .left
      text-align: left
      padding: 0 0 0 12%

  .recent-builds
    background-color: #faf9f6
    min-height: 44rem

  .recent-builds-text
    text-align: center
    h2
      color: #db4141
      text-align: right
      margin: 0

    a
      color: #828282

    p
      text-align: right
      margin-top: 0.5em
      margin-bottom: 2em

    img
      margin-bottom: 20px

    ul
      padding-left: 0

    li
      background-color: #fff
      border-radius: 4px
      color: #828282
      font-weight: 400
      margin-bottom: 20px
      list-style-type: none
      position: relative
      height: 120px
      width: 100%
      padding: 10px 0 0 60px
      text-align: left

  .free-for-oss
    text-align: center

    h1
      margin-bottom: 0.3em

    p
      margin: 0

    span.bold-italic
      font-weight: 600
      font-style: italic

    br.mobile-no-break
      display: inline-block

  .private-repos
    text-align: center

    h2
      color: #339999
      margin: 0
      text-align: right

    p
      margin-top: 0.5em
      margin-bottom: 2em
      text-align: right

    a
      text-decoration: underline

    .mobile-envelope
      display: none

    .desktop-envelope
      display: inline-block

  .features-list
    background-color: #faf9f6

    h2
      margin: 0

    h3
      font-size: 1.4em
      font-weight: 300
      color: #413c3c
      text-align: center
      margin-bottom: 35px
      padding-top: 40px

    p
      font-size: 1.15em
      font-weight: 300
      color: #606162
      text-align: center

    br.mobile-break
      display: none

    .features-callouts
      text-align: center
      @media #{$medium-only}
        float: none

    #f-co-1, #f-co-2, #f-co-3, #f-co-4
      background-repeat: no-repeat;
      background-position: 50% 0
      height: 32px

    #f-co-1, #f-co-2, #f-co-3, #f-co-4
      background-image: url('../images/landing-page/features-callouts-1.svg')

    #f-co-2
      background-image: url('../images/landing-page/features-callouts-2.svg')

    #f-co-3
      background-image: url('../images/landing-page/features-callouts-3.svg')

    #f-co-4
      background-image: url('../images/landing-page/features-callouts-4.svg')

    .features-checked
      padding-left: 30px
      @media #{$medium-only}
        float: none

      h2
        @media #{$medium-only}
          width: grid-calc(8, 12)
          margin: 1em auto
      ul
        @media #{$medium-only}
          width: grid-calc(5, 12)
          margin: auto

    ul
      @include resetul
      margin-top: 1.6rem;

    li
      font-color: #606162
      font-size: 1.7em
      line-height: 1.7em
      &:before
        @extend %icon
        content: ""
        background-image: url('../images/landing-page/features-check.svg')
        width: 0.7em
        height: 0.7em
        margin-right: .3em

  .build-flows
    text-align: center

    h2
      color: #909295
      
    h2#pr-bf-margin
      margin-top: 90px

    .branch-bf
      .bf
        display: inline-block
        width: 120px

        p
          font-size: 1em
          line-height: 1.5em
          color: #5f6062

    .divider-line-horizontal
      width: 50px
      height: 3px
      background: #eaeaec
      display: inline-block
      margin-bottom: 75px

    .divider-line-vertical
      display: none

  .user-testimonials
    margin-bottom: 50px

    h2
      color: #418793
      text-align: right

    p
      font-size: 1.2em
      font-weight: 300
      color: #606162
      margin: 0
      display: inline-block

    img.avatar
      max-width: 81px
      float: right

    img.social
      margin: -2px 3px 0 15px
      display: inline-block

    .author
      font-weight: 500
      margin: 6px 0 0 0

    .title
      margin: 0 0 20px 0
    a
      font-size: 1.2em

    a:hover
      text-decoration: underline

  @media (max-width: 900px)
    .oss-testing br.mobile-break
      display: inline-block

    .landing-centered-wrapper
      width: 100%

  @media (max-width: 1024px)
    .features-list .features-checked
      margin-top: 40px

    .features-list .features-checked h2
      text-align: center

  @media (max-width: 886px)
    #hero-copy
      display: block
      width: 100%
      text-align: center

    .hero h1
      max-width: 100%

    .hero p
      text-align: center
      max-width: 100%

    .hero br.mobile-break
      display: inline-block

    .features-list .features-callouts
      padding: 0 60px 0 60px

    .features-list .features-checked
      padding: 0 60px 0 60px

  @media (max-width: 846px)
    .build-flows .branch-bf .bf
      width: 100%
      display: block
      clear: all

    .build-flows .branch-bf .bf img
      width: 120px
      height: 120px

    .build-flows .branch-bf .bf p
      font-size: 1.5em

    .build-flows .branch-bf .divider-line-horizontal
      display: none

    .build-flows .branch-bf .divider-line-vertical
      width: 3px
      height: 40px
      background: #eaeaec
      display: inline-block
      margin-bottom: 10px

  @media (max-width: 797px)
    .customers .left
      text-align: center
      padding: 20px 0 0 0

    .recent-builds-text h2,
    .user-testimonials h2,
    .private-repos h2,
    .recent-builds-text p,
    .user-testimonials p,
    .private-repos p
      text-align: center

    .free-for-oss br.mobile-no-break
      display: none

    .private-repos .desktop-envelope
      display: none

    .private-repos .mobile-envelope
      display: inline-block
      margin-bottom: 40px

    .user-testimonials
      margin-bottom: 50px

  @media (max-width: 640px)
    .user-testimonials
      margin-bottom: 140px

  @media (max-width: 608px)
    br.mobile-break
      display: inline-break

.landing-vert-center-m
  @media #{$medium-up}
    position: relative
    transform: translateY(65%)
.landing-vert-center-s
  @media #{$medium-up}
    position: relative
    overflow: auto
    transform: translateY(7%)

.landing-page
  .navigation-nested
    background-color: $white

.landing-rows
  list-style: none
  margin: 0

.landing-row
  .two-line
    padding-left: 2rem
  h2
    padding-left: .5rem
    font-size: 18px
