.about-intro

  .video-wrapper
    position: relative
    padding-bottom: 24.25% /* 16:9 */
    padding-top: 25px
    height: 0
    iframe
      position: absolute
      top: 0
      left: 0
      width: 100%
      height: 100%

  .intro-text
    width: $contentGrid * 5.5
    margin-left: $contentGrid/2
    margin-bottom: 50px

    h1
      +font-semi-bold(32px, 48px)

    .text-divider
      +flex(space-between, flex-start)
      padding-bottom: 60px
      .left-content, .right-content
        width: 48%
      p
        +font-default(16px, 22px)
        a
          +font-default(16px, 22px)
          color: $defaultRed
          text-decoration: underline
.employee-row
  background-color: $defaultRedBlock
  padding: 50px 0 100px
  //padding: 120px 0 100px
  //margin-top: -40px
  margin-bottom: 70px

  .employee
    max-width: 200px
    float: left
    margin: 0 20px

    &:hover
      .portret-image
        img
          opacity: 1.0
          filter: none
          filter: grayscale(0%)
          -webkit-filter: grayscale(0%)

      p
        opacity: 1


    .portret-image
      width: 200px
      max-height: 200px
      overflow: hidden
      position: relative
      img
        width: 100%
        filter: gray
        filter: grayscale(100%)
        -webkit-filter: grayscale(100%)
        opacity: 0.5
        +transition(all 0.3s)


    p
      +font-default(14px, 16.8px)
      color: white
      opacity: 0.5
      +transition(all 0.3s)

.why-umans-row
  h2
    color: $defaultRed
    +font-semi-bold(26px, 32px)
    text-align: center
    margin-bottom: 70px

  .first-row, .second-row, .third-row
    +flex(initial, initial)
    position: relative
    margin-bottom: 80px

  .quote-block, .text-block, .image-block
    width: $contentGrid*2.4
    margin-right: $contentGrid/2
    +flex(initial, baseline)

    &.large
      width: $contentGrid*5.4

    h3
      +font-bold(18px, 28px)
      text-transform: uppercase
      margin-top: 0
      color: $fontColor1

  .image-block
    display: block
    position: relative

    img
      width: 100%
    >div
      width: 100%
      height: 8px
      background-color: $defaultRed
      +position(relative, -8px 0 null 0)

  .small-form
    .submit-button
      margin-bottom: 0


  .text-block
    +flex(initial, baseline)
    p
      +font-default(16px, 24px)

  .quote-block
    +flex(initial, center)
    p
      +font-default(26px, 36px)
      color: $fontColor1

.isolation
  .employee-row
    background: $defaultGreen

  .why-umans-row
    h2
      color: $defaultGreen

    .image-block
      >div
        background-color: $selectedGreen

+media-query($maxWidth + 40px)
  .content-container
    width: calc(100% - 40px)
    padding: 0 20px

+media-query(1100px)
  .why-umans-row
    .first-row, .second-row, .third-row
      +flex-wrap(wrap)

    .quote-block, .text-block, .image-block
      display: inline-block
      width: 35%
      +flex-grow(1)

    .first-row
      margin-bottom: 0
      .quote-block, .text-block, .image-block
        &:nth-child(2n+1)
          margin-right: 5%

        &:nth-child(2n+2)
          margin-left: 5%
          margin-right: 0
          margin-bottom: 40px

    .second-row
      margin-bottom: 0
      .quote-block, .text-block, .image-block
        &:nth-child(1)
          margin-bottom: 40px
        &:nth-child(2n+2)
          margin-right: 5%
          margin-left: 0

        &:nth-child(2n+3)
          margin-left: 5%
          margin-right: 0
          margin-bottom: 40px

    .third-row
      .quote-block, .text-block, .image-block
        &.offset-3
          margin-left: 0

        &:nth-child(2n+1)
          margin-right: 5%

        &:nth-child(2n+2)
          margin-left: 5%
          margin-right: 0
          margin-bottom: 40px

    .image-block.large
      width: 100%
      margin-right: 0%

+media-query(1000px)
  .about-intro
    .grid6
      width: 100%

      &.video-wrapper
        padding-bottom: 53.25%

      &.intro-text
        margin: 45px 0

  .employee-row
    margin-top: 0
    .content-container
      .employee p
        font-size: 14px!important
        line-height: 18px!important

+media-query(500px)
  .why-umans-row
    .quote-block, .text-block, .image-block
      width: 100%
      margin: 0 0 40px !important

    .second-row
      .quote-block, .text-block
        +order(1)

      .image-block.large
        +order(3)

  .about-intro
    .intro-text
      .text-divider
        display: block
        .left-content, .right-content
          width: 100%

        p
          padding: 0!important
          +font-default(16px, 26px)
          a
            +font-default(16px, 26px)