.home-content
  background: $defaultRedBlock
  padding: 80px 0

  h2
    +font-semi-bold(32px, 44px)
    color: white

  p
    +font-default(16px, 22px)
    color: white
    a
      color: white
      +font-semi-bold(16px, 22px)
      text-decoration: underline
    &.intro
      +font-semi-bold(20px, 32px)
      a
        color: white

  .left-content
    .button
      width: 100%
      max-width: 260px
      margin-top: 55px
  .isolation-row
    >h2
      margin-top: 0
      text-align: center
    .advantages
      clear: both
      padding-top: 40px
      max-width: 1200px
      margin: 0 auto
      .advantage-block
        width: calc((100% - 80px) /3)
        h3
          +font-default(24px, 34px)
          strong
            +font-semi-bold(24px, 34px)
  .advantages
    +flex(space-between, flex-start)

    .advantage-block
      width: 45%
      background: white
      border-top: 12px solid $blackBackground
      padding: 42px 35px 35px
      box-sizing: border-box

      h3
        +font-default(18px, 24px)
        height: 80px
        margin: 0 0 10px
        padding: 0

      ul
        margin-bottom: 40px

        li
          +font-default(15px, 21px)
          margin-bottom: 15px
          padding-left: 25px
          position: relative

          &:before
            content: ' '
            +sprite(-250px -40px, 12px, 13px)
            display: inline-block
            position: absolute
            left: 0
            top: 4px

.home-intro-content
  position: relative
  .left-content
    h1
      +font-light(46px, 58px)
      margin: 120px 0 50px

    .streamer
      p
        &.intro
          +font-light(24px, 32px)
          color: $fontColor1
          margin-bottom: 15px
        +font-default(16px, 24px)
        color: $fontColor1
        margin: 0 0 30px

    .sub-streamer
      +font-semi-bold(16px, 20px)
      color: $fontOrange
      +flex(initial, center)
      margin: 0 0 100px
      //margin: 0 0 40px
      span
        +circleArrowOrange
        display: inline-block
        margin-left: 5px

  .image-container
    display: inline-block

    img
      position: fixed
      top: 60px
      width: 50%
      max-width: 900px
      z-index: -10

.isolation
  .home-content
    background: $defaultGreen

.c-home-message
  border: 3px solid $defaultRedBlock
  max-width: 320px
  margin: -60px 0 60px
  padding: 25px 40px
  border-radius: 20px
  color: $fontColor1

  .isolation &
    border-color: $defaultGreen

.c-home-message__title
  display: block
  margin-top: 0
  margin-bottom: 10px
  +font-light(24px, 32px)

.c-home-message__text
  +font-default(16px, 24px)

.c-home-message__location
  margin-bottom: 0
  +font-semi-bold(18px, 24px)

+media-query($maxWidth)
  .home-content
    .left-content
      +calc(width, "#{$contentGrid} * 5 - 40px")
      padding: 0 20px

    .advantages
      +calc(width, "#{$contentGrid} * 6 - 20px")
      padding-right: 20px
    .isolation-row
      .advantages
        width: 100%

+media-query(1380px)
  .home-content
    .advantages
      display: block

      .advantage-block
        width: 100%
        max-width: 400px
        margin-left: auto
        margin-right: auto

        &:first-of-type
          margin-bottom: 40px
    .isolation-row
      .grid6.left-content
        width: 100%
        margin-left: auto
        margin-right: auto
        box-sizing: border-box
        max-width: 800px
        float: none

      .advantages
        +flex(space-between, flex-start)
        .advantage-block
          width: calc((100% - 80px) / 3)

+media-query(1050px)
  .home-content
    .isolation-row
      .advantages
        +flex-rows
        .advantage-block
          width: calc((100% - 80px) / 2)

+media-query(900px)
  .home-intro-content
    .left-content
      width: 98%
      max-width: 500px
    .image-container
      display: none


+media-query(1050px)
  .home-content
    .isolation-row
      .advantages
        display: block
        .advantage-block
          width: 90%
          &:last-of-type
            margin-top: 40px

+media-query(650px)
  .home-intro-content
    .left-content
      h1
        margin-top: 60px
        font-size: 32px
        line-height: 42px
        margin-bottom: 20px
  .home-content
    h2
      +font-semi-bold(26px, 36px)

    .content-container
      +flex(flex-start, flex-start)
      +flex-rows
      &.isolation-row
        h2
          width: 100%
    .left-content
      width: 100%

    .advantages
      width: 100%
      padding-right: 0
      margin-top: 80px
      margin-left: 0
      +flex(center, flex-start)
      +flex-rows
      .advantage-block
        box-sizing: border-box
        width: 100%
        max-width: 345px

+media-query(400px)
  .home-intro-content
    .left-content
      h1
        margin-top: 40px
  .home-content
    .content-container
      padding: 0
      width: 100%
      .advantages
        .advantage-block
          width: 90%

      &.isolation-row
        .advantages
          .advantage-block
            h3
              +font-default(20px, 28px)
              strong
                +font-semi-bold(20px, 28px)