.project-row
  background: $lightGreyBackground
  position: relative
  padding: 40px 0 0

  .content-container

    h2
      +font-default(20px, 32px)
      margin: 0
      text-align: center
      color: $fontColor1

      &:after
        content: ''
        width: 20px
        height: 3px
        background: $highLightRed
        display: block
        margin: auto
        +transition(width 0.5s)

    &:hover
      h2
        &:after
          width: 40px

    .projects
      +flex(flex-start, center)
      margin-top: 28px
      .project
        width: 25%
        a >p
          color: $fontColor2
          +font-default(13px, 16px)
          +transform(translate3d(0,0,0))
          opacity: 1
          +transition(all 0.2s)
          strong
            color: $fontColor1
            +font-semi-bold(14px, 16px)



        .image
          height: 480px
          background-size: cover
          background-position: 50%
          position: relative

          .hover
            position: absolute
            height: 100%
            width: 100%
            +radial-gradient(center, ellipse cover, rgba(255,255,255,0.8) 0%, rgba(255,255,255,1) 100%)
            +flex(center, center)
            opacity: 0
            +transition(all 0.4s)

            h4
              +font-semi-bold(19px, 24px)
              color: $fontColor1
              margin: 0 0 4px
              text-align: center
              +transform(translate3d(0,-10px,0))
              opacity: 0
              +transition(all 0.3s)

            p
              +font-default(15px, 15px)
              color: $fontColor2
              margin: 0 0 15px
              text-align: center
              +transform(translate3d(0,-10px,0))
              opacity: 0
              +transition(all 0.3s)

            .icon
              display: block
              margin: auto
              +arrowRightRed

        &:hover
          //a >p
          //  +transform(translate3d(0,-40px,0))
          //  opacity: 0
          .image
            .hover
              opacity: 1

              h4, p
                opacity: 1
                +transform(translate3d(0,0,0))
  &.isolation-projects-row
    .content-container
      +flex(space-between, flex-start)
      padding: 60px calc( 2% + 20px ) 0
      width: calc(96% - 40px)

      .quality-block
        width: 50%
        padding-top: 60px
        padding-right: $contentGrid
        box-sizing: border-box
        h3
          color: $defaultGreen
          +font-semi-bold(32px, 44px)
          margin-top: 0
        p
          max-width: 500px
          +font-default(16px, 24px)
          color: $fontColor1
        .button
          max-width: 260px
          margin-top: 60px
          +font-semi-bold(16px, 28px)

      .references-block
        width: 50%
        .title
          //+flex(space-between, center)
          a
            +font-semi-bold(14px, 18px)
            color: $fontOrange
            span
              display: inline-block
              margin-left: 5px
              +sprite(-368px 0, 14px, 14px)
              position: relative
              top: 2px

        h2
          text-align: left
          display: block
          width: 100%
          margin-bottom: 20px
          &:after
            margin: 0 auto 0 0
        .projects
          .project
            width: 50%

      h2
        &:after
          background: $defaultGreen

    &.red
      .content-container
        .quality-block
          h3
            color: $fontRed
      h2
        &:after
          background: $highLightRed
.isolation
  .project-row
    &.isolation-projects-row
      .content-container
        .projects .project .image .hover .icon
          +arrowRightGreen
    .content-container
      h2:after
        background-color: $defaultGreen
      .projects .project .image .hover .icon
        +arrowRightGreen

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


+media-query(1150px)
  .project-row
    .content-container
      .projects
        .project
          .image
            height: 375px

+media-query(950px)
  .project-row
    .content-container
      .projects
        .project
          .image
            height: 325px

+media-query(850px)
  .project-row
    .content-container
      .projects
        +flex-rows
        .project
          width: 50%
          margin-bottom: 40px

+media-query(750px)
  .project-row.isolation-projects-row
    .content-container
      display: block
      .quality-block
        width: 100%
        padding: 0
        max-width: 500px
        margin: auto
        h3
          font-size: 24px
          line-height: 32px
      .references-block
        width: 100%
        margin-top: 60px

+media-query(500px)
  .project-row
    .content-container
      .projects
        .project
          .image
            height: 275px

+media-query(400px)
  .project-row
    .content-container
      .projects
        .project
          width: 100%
          .image
            height: 350px

  .project-row.isolation-projects-row
    .content-container
      .references-block
        .title
          a
            display: none
        .projects
          .project
            width: 100%