/*==========================================================================
  Clients page
  ========================================================================== */



.ajax-container.clients
  position: relative
  overflow: hidden
  background-color: $lightGray
  transition: background 0.4s ease 0s

  .title
    position: absolute
    left: 0
    top: 0
    background-color: $red
    +flex(center, center)
    width: 100%
    height: 50%
    transition: all 0.5s

    h1
      margin: 0
      font-size: 3rem
      line-height: 1.2
      text-transform: uppercase
      text-align: center
      color: white
      +translate3d(0,0,0)
      opacity: 1
      transition: all 0.4s ease 0.3s

      +respond-to-width(880)
        font-size: 2rem

      +respond-to-width(620)
        font-size: 1.6rem

    //p
    //  margin-top: 0
    //  font-size: 1.5rem
    //  line-height: 1.2
    //  text-transform: uppercase
    //  color: $fontBlack
    //  opacity: 0.5
    //  +translate3d(0,0,0)
    //  font-family: din()
    //  transition: all 0.4s ease 0.2s

    &.loaded-animation
      background-color: transparent
      h1, p
        +translate3d(-40px, 0, 0)
        opacity: 0

  .clients-grid
    position: absolute
    left: 0
    bottom: 0
    width: 100%
    height: 50%

    .controllers
      position: absolute
      z-index: 8
      height: 100%
      width: calc(100% - 40px)
      left: 20px
      top: 0
      pointer-events: none
      +flex(space-between, center)

      &.loaded-animation
        .controller
          opacity: 0

      .controller
        pointer-events: all
        display: block
        cursor: pointer
        +sprite(-58px -41px, 22px, 22px)
        transform: translate3d(0,0,0) scale3d(1.2, 1.2, 1) rotate(90deg)
        opacity: 1
        transition: transform 0.3s, opacity 0.5s ease 0.3s

        &:hover
          transform: translate3d(0,0,0) scale3d(1.1, 1.1, 1) rotate(90deg)

        &.next
          transform: translate3d(0,0,0) scale3d(1.2, 1.2, 1) rotate(-90deg)

          &:hover
            transform: translate3d(0,0,0) scale3d(1.1, 1.1, 1) rotate(-90deg)




    .group
      position: absolute
      width: 100%
      height: 100%
      top: 0
      left: 0
      +flex(flex-start, flex-start)
      +flex-rows

      &.active
        z-index: 2
        .client
          opacity: 1

          figure
            opacity: 1
            +translate3d(0, 0, 0)

    .client
      position: relative
      +flex(center, center)
      width: 25%
      height: 50%
      +translate3d(0,0,0)
      opacity: 0
      transition: all 0.5s
      background-color: $lighterGray

      &:nth-child(2),&:nth-child(4),&:nth-child(5),&:nth-child(7)
        background-color: #e4e4e4

      &.animation-part
        opacity: 0
        background-color: transparent
        figure
          opacity: 0 !important
          transform: translate3d(0, 40px, 0) !important

      @for $i from 1 through 8
        &:nth-child(#{$i})
          figure
            transition-delay: #{$i * 0.05}s

      .placeholder
        position: relative
        display: block
        width: 100%
        padding-bottom: 25%

      a, figure
        position: absolute
        width: 100%
        height: 100%
        top: 0
        left: 0
        +flex(center, center)
        transition: all 0.4s
        +translate3d(0,0,0)

      figure
        opacity: 0
        +translate3d(0, 40px, 0)

        span
          display: block
          width: 70%
          max-width: 200px
          height: 80%
          background-repeat: no-repeat
          background-size: contain
          background-position: center

          &.small
            display: none

  &.animateOut
    background-color: $gray
    transition: background 0.4s ease 0.7s

    .title
      background-color: transparent
      h1, p
        +translate3d(-40px, 0, 0)
        opacity: 0

    .clients-grid
      .client
        opacity: 0 !important
        background-color: transparent

      .controllers
        .controller
          opacity: 0

  //Edge support
  @supports (-ms-ime-align: auto)
    .clients-grid
      +flex(space-around, center)
      +flex-rows
      width: 100%

      .client
        width: 33%
        margin-bottom: 40px

        +respond-to-width(700)
          width: 50%
          padding-bottom: 0

  /* Mobile view
    ========================================================================== */
  +respond-to-width-or-height(500, 600)
    .title
      position: relative
      width: 100%
      height: auto
      padding: 80px 40px 40px
      h1
        font-size: 2.2rem

      p
        font-size: 1.2rem

    .clients-grid
      position: relative
      height: 600px

      .group
        .client
          height: 150px
          width: 50%


          &:nth-child(1),&:nth-child(4),&:nth-child(5),&:nth-child(8)
            background-color: $lighterGray

          &:nth-child(2),&:nth-child(3),&:nth-child(6),&:nth-child(7)
            background-color: #e4e4e4

        &.active
          z-index: 2
          opacity: 1