.home-main-content
  position: relative
  z-index: 3
  background-color: $darkBrown

  .background
    position: absolute
    left: 0
    top: 0
    width: 100%
    height: 100%

    .fill-out
      position: absolute
      right: 0
      top: 0
      height: 100%
      width: column(5.5, 14)
      background-color: $darkerBrown

      +respond-to-width-beyond(1680)
        width: calc( (1440px / 12 * 4.5) + ((100% - 1440px) / 2 ))

      &:before
        content: ''
        position: absolute
        opacity: 0.08
        left: 0
        top: 0
        width: 50px
        height: 100%
        background: linear-gradient(to right, rgba(0,0,0,1) 0%, rgba(0,0,0,0.2) 35%, rgba(0,0,0,0) 100%)

  .grid-row
    position: relative
    z-index: 2

  .kms-content

    >*:first-child
      margin-top: 0
    >*:last-child
      margin-bottom: 0

    h2, h3, h4, h5
      font-size: 1.6rem
      color: white
      font-weight: medium()

    h4
      font-size: 1.4rem

    h5
      font-size: 1.2rem

    p, li
      color: $lightBrown
      font-size: 1rem

    a
      color: white
      text-decoration: underline

  .left, .right
    display: inline-block
    vertical-align: top
    padding: calc(100vw / 12) 0 calc(100vw / 12 * 3)

    +respond-to-width-beyond(1440)
      padding: 120px 0 360px column(0.5, 12)

  .left
    margin-left: column(1, 12)
    width: column(5.5, 12)
    margin-right: column(1, 12)
    padding: calc(100vw / 12) 0 calc(100vw / 12 * 3)

    +respond-to-width-beyond(1440)
      padding: 120px 0 240px

    .button
      margin-top: 40px

    .kms-content
      ul
        li
          &:before
            content: ''
            top: 10px
            color: transparent
            +sprite(269px 87px, 18px, 13px)

  .right
    position: relative
    width: column(4.5, 12)
    padding-left: column(0.5, 12)

    .kms-content
      position: relative
      z-index: 3
      ul
        li
          position: relative
          padding-left: 40px

          &:before
            left: 0
            top: 8px
            content: ''
            +sprite(290px 87px, 18px, 13px)

    .button
      +flex(space-between, center)
      max-width: 275px

    .work-at
      margin-top: 20px

      .counter
        +flex(center, center)
        width: 24px
        height: 24px
        text-align: center
        color: white
        font-size: 15px
        line-height: 1
        font-weight: bold()
        background-color: $red
        border-radius: 100%
        &:before
          position: relative
          top: -1px
          content: attr(data-counter)

  .scroll-to-placeholder
    position: absolute
    left: 0
    bottom: 0
    +flex(flex-end, center)
    width: column(3, 12)
    height: 60px
    border-right: 1px solid $brown

    +respond-to-width(1000)
      display: none

    .scroll-to-target
      +flex(center, center)
      height: 60px
      width: 60px

      .arrow
        display: inline-block
        +sprite(470px 1px, 19px, 13px)
        transform: translate3d(0,0,0) rotate(90deg)
        transition: transform 0.3s

      &:hover
        .arrow
          transform: translate3d(0, 5px, 0) rotate(90deg)

  +respond-to-width(1000)
    .background
      display: none

    .grid-row
      width: 100%
      padding-bottom: calc(100vw / 12)

    .right, .left
      width: 100%
      margin: 0
      padding-left: column(1, 12)
      padding-right: column(1, 12)
      padding-bottom: calc(100vw / 12)

    .right
      padding-top: 0


    #work-at-block
      position: relative
      height: 200px
      width: column(12, 14)
      max-width: 700px
      //height: 200px
      margin-left: auto
      margin-right: auto

      .content
        width: calc(100% - 200px)

      .icon
        width: 200px
        height: 200px

  +respond-to-width(700)
    .grid-row
      padding-bottom: 0

    .right, .left
      padding-left: 20px
      padding-right: 20px

    #work-at-block
      display: block
      height: auto
      width: 100%
      padding: 30px 20px
      margin-left: auto
      margin-right: auto

      .content
        width: 100%
        padding: 0

      .icon
        display: none

      .button
        +flex(space-between, flex-start)
        margin-top: 30px
        position: relative
        bottom: 0
        left: 0