.information-row
  position: relative
  padding-bottom: 280px //TODO calculate by Javascript half of element bellow

  .opportunities
    margin-top: 85px

    h2
      width: calc(100% /5 * 4)
      margin-left: calc(100% /5)
      +font-header(36px)
      color: white
      margin-bottom: 50px
    ol
      width: calc(100% /5 * 4)
      margin-left: calc(100% /5)
      counter-reset: li
      padding-left: 0

      li
        +font-default(20px, 32px)
        list-style: none
        +flex(initial, center)
        color: white
        margin-bottom: 10px

        &:last-child
          margin-bottom: 0

        &:before
          content: counter(li) /* Use the counter as content */
          counter-increment: li /* Increment the counter by 1 */
          +font-default(20px)
          color: white
          width: 40px
          height: 40px
          min-width: 40px
          margin-right: 20px
          +flex(center, center)
          border: 1px solid rgba( 255, 255, 255 , 0.4)
          border-radius: 9999px



  .about
    padding-top: 120px
    .overlay
      +position(absolute, 0 0 0 0)
      width: 100%
      height: 100%
      background: #544F4A
      opacity: 0.85
      display: none

    .owner
      width: calc(100% / 7 * 1.5)
      float: left
      position: relative
      z-index: 99
      .image
        width: 100%
        max-width: 160px
        border-radius: 9999px
        overflow: hidden
        margin: 0 auto 10px
        img
          width: 100%

      p
        text-align: center
        margin: 0
        color: white

        &.name
          +font-bold(20px)
          color: $beige

        a
          color: white

    .content
      width: calc(100% / 7 * 4)
      margin-right: calc(100% / 7 * 1)
      float: right
      position: relative
      z-index: 99

      p
        +font-default(20px)
        margin: 0
        color: white

        &.intro
          +font-bold(22px)
          margin-bottom: 20px
          color: white
          .nbr
            +font-bold(22px)
            white-space: nowrap

      .cta-button
        margin-top: 55px
        margin-bottom: 75px
        a
          display: inline-block
          cursor: pointer
          padding: 10px 35px
          background: $blue
          +font-bold(18px)
          color: white
          letter-spacing: 1.8px
          text-transform: uppercase
          +transition(all 0.3s)
          +transform(scale(1))
          &:hover
            +transform(scale(0.95))

  .backgrounds
    position: absolute
    height: 100%
    width: 100%
    .wood
      position: absolute
      top: 0
      left: 0
      width: calc(100% / 1920 * 1080)
      height: 100%
      background: url('/img/sheeps.jpg') 50% 50%
      background-size: cover
      .overlay
        +position(absolute, 0 0 0 0)
        width: 100%
        height: 100%
        background: #544F4A
        opacity: 0.85

    .beige
      background: $beige
      position: absolute
      top: 0
      right: 0
      width: calc(100% / 1920 * 840)
      height: 100%

+media-query(1100px)
  .information-row
    .content-container
      width: 100%

      .about
        position: relative
        width: 100%
        background: url('/img/sheeps.jpg') 50% 50%
        background-size: cover
        .overlay
          display: block
        .owner
          width: calc(100% / 7 * 2)
          .image
            width: 65%

      .opportunities
        width: 100%
        background: $beige
        margin-top: 0
        padding: 50px 0

        h2, ol
          width: calc(100% / 7 * 5)
          margin-left: calc(100% / 7 * 2)


    .backgrounds
      display: none

+media-query(550px)
  .information-row
    .content-container
      .about
        padding-top: 80px
        .owner
          width: 100%
          margin-bottom: 40px
          p
            +font-default(24px)

            &.name
              +font-bold(24px)

            a
              +font-default(24px)

        .content
          width: 80%
          margin: auto
          float: none
          .cta-button
            text-align: center
            a

              margin-left: auto
              margin-right: auto

      .opportunities
        h2, ol
          width: 100%
          margin: 0 auto
        h2
          text-align: center
          margin-bottom: 50px
        ol
          max-width: 320px
          li
            margin-right: 10px