.services-blocks
  padding: 50px 0 0
  .block
    //padding: 25px 25px 75px
    padding: 25px
    margin: 0 ($contentGrid/2) 50px
    position: relative
    //&.clicked
    //  .overlay-block
    //    height: 20px
    //
    //&:hover
    //  .overlay-block
    //    height: 20px

    &:nth-child(2n + 1)
      clear: left

    &:last-of-type
      margin-bottom: 0

    .video
      width: 100%
      max-width: 960px
      margin: auto
      margin-bottom: 25px
      background-color: $lightGray
      .video-wrapper
        position: relative
        padding-bottom: 51.3% /* 16:9 */
        padding-top: 25px
        height: 0
        iframe, .video-overlay
          position: absolute
          top: 0
          left: 0
          width: 100%
          height: 100%
        .video-overlay
          z-index: 2
          +flex(center, center)
          opacity: 1
          cursor: pointer
          +transition(all 0.2s)
          .button
            width: 25%
            max-width: 85px
            +transform(scale(1))
            +transition(all 0.4s)
            img
              width: 100%
          &:hover
            .button
              +transform(scale(0.85))

          &.hide
            opacity: 0
            pointer-events: none
            +transition(all 0.5s)
            +transition-delay(0.7s)
            .button
              +transition(all 0.8s)
              +transform(scale(0.3))

    h3
      +font-bold(24px)
      margin: 0
      height: 50px
      position: relative
      z-index: 5
      color: $black
      +transition(all 0.3s)

      span
        +font-bold(24px)
        margin-right: 20px
        color: $black
        +transition(color 0.2s)

    h5
      +font-bold(20px)
      margin: 0

    p
      margin: 0
      color: $darkGray

      strong
        color: $black

    .icon
      float: right

    .overlay-block
      +position(absolute, null 0 0 0)
      width: 100%
      height: 80%
      overflow: hidden
      +transition(all 0.3s)

      img
        width: 105%
        position: absolute
        left: -2.5%

      .color
        background-color: $yellow
        opacity: 0.85
        +position(absolute , 0 0 0 0)
        height: 100%
        width: 100%


    &.ob
      .icon
        +sprite(0 -220px, 38px, 38px)
    &.bs
      .icon
        +sprite(-40px -220px, 27px, 45px)
    &.bc
      .icon
        +sprite(-75px -180px, 35px, 49px)
    &.bcr
      .icon
        +sprite(-120px -180px, 36px, 31px)
    &.pr
      .icon
        +sprite(-70px -230px, 40px, 40px)
    &.im
      .icon
        +sprite(-158px -230px, 33px, 29px)
    &.op
      .icon
        +sprite(-160px -180px, 45px, 25px)
    &.fb
      .icon
        +sprite(-115px -230px, 38px, 28px)

+media-query(1080px)
  .services-blocks
    .block
      h3
        +font-bold(21px, 21px)
      p
        +font-default(16px)

+media-query(900px)
  .services-blocks
    .block
      margin-bottom: 15px
      p
        +font-default(16px, 19px)

+media-query(850px)
  .services-blocks
    .block
      width: 100%
      max-width: 475px
      margin: 0 auto 50px
      float: none

      p
        +font-default(18px)

+media-query(435px)
  .services-blocks
    .block
      margin-bottom: 20px

+media-query(400px)
  .services-blocks
    .block
      p
        +font-default(16px)