.colleagues-block
  width: 140%
  margin-left: -20%
  padding-top: 50px
  padding-bottom: 50px

  .colleague-holder
    width: calc(92.5% / 4)
    margin-right: 2.5%
    float: left
    margin-bottom: 10px
    position: relative
    cursor: pointer
    +transform(scale(1.0))
    +transition(all 0.2s)

    &:hover
      +transform(scale(1.02))

    &:nth-child(4n+4)
      margin-right: 0

    img
      width: 100%
      position: relative
      top: 4px

    p
      height: 50px
      font-size: 18px
      padding-left: 15px
      width: calc(100% - 15px)
      +flex(initial,center)
      +position(absolute, null null 0 null)
      background-color: rgba(0,0,0, 0.7)
    .name
      span
        display: block
        +arrowRightWhite
        margin-left: 15px

.popUp
  +position(fixed, 0 0 0 0)
  background-color: rgba(0,0,0, 0.7)
  z-index: -999
  +flex(center, center)
  opacity: 0.0
  +transition(all 0.4s)

  &.active
    opacity: 1.0
    z-index: 999

  .popup-holder
    width: 90%
    max-height: 80%
    display: none
    background-color: $contentBackground1
    padding: 5%
    overflow-x: hidden
    overflow-y: auto
    position: relative


    .close
      +sprite(-32px -65px, 25px, 25px)
      display: block
      +position(absolute, 40px 40px null null)
      cursor: pointer


    .middle-block
      +flex(space-around, center)
      max-width: calc(1125px + 16.66666666666%)
      margin: auto

      .middle-placeholder
        max-width: 450px

    img
      width: 40%
      max-width: 500px

      &.below775
        display: none
        margin-top: 20px
        width: 80%

    h2
      font-size: 34px

    p
      margin-top: 25px
      font-size: 18px
      line-height: 28px

    &.active
      display: block

  .side-by-side-grid
    position: absolute
    left: calc(50% - (1125px / 2))
    bottom: 0
    padding: 0
    width: 100%
    overflow: hidden

    .button-holder
      border-top: none
      padding: 30px 0
    a
      display: none
    .grid
      margin-top: 0
      top: 0 !important

+media-query(1850px)
  .colleagues-block
    width: 130%
    margin-left: -15%

+media-query(1730px)
  .colleagues-block
    width: 116%
    margin-left: -8%

+media-query(1400px)
  .colleagues-block

    .colleague-holder
      width: calc(95% / 3)
      margin-right: 2.5%

      &:nth-child(4n+4)
        margin-right: 2.5%

      &:nth-child(3n+3)
        margin-right: 0

  .popup-holder
    .side-by-side-grid
      display: none

+media-query(1100px)
  .colleagues-block

    .colleague-holder
      width: calc(97.5% / 2)
      margin-right: 2.5%
      margin-bottom: 30px

      &:nth-child(3n+3)
        margin-right: 2.5%

      &:nth-child(2n+2)
        margin-right: 0


+media-query(900px)
  .popUp
    .popup-holder
      h2, p, h3, img
        width: 80%
        margin-left: auto
        margin-right: auto
        max-width: none

      .middle-block
        .middle-placeholder
          width: 100%

      img.below775
        display: block
      img.above775
        display: none

    .side-by-side-grid
      .grid
        margin-top: -100px

+media-query(500px)
  .colleagues-block
    .colleague-holder
      width: 100%
      margin-right: 0
      margin-bottom: 50px