.cases
  margin-top: -60px
  .tabs
    height: 60px
    background-color: $darkBlue
    width: $contentGrid*10
    margin: auto
    +flex(flex-start, center)
    .label
      +flex(flex-start, center)
      height: 60px
      padding: 0 4%
      cursor: pointer
      background-color: transparent
      +transition(all 0.2s)
      p
        +font-semi-bold(20px, 20px)
        font-size: 18px
        line-height: 18px
        color: white
      &:hover
        background-color: darken($darkBlue, 5%)
      &.active
        background-color: white
        p
          color: $orange

  .cases-placeholder
    position: relative
    height: 800px
    width: $contentGrid*10
    margin: 100px auto
    +transition(all 0.3s)

  .case
    position: absolute
    opacity: 0
    pointer-events: none
    width: 100%
    +flex(space-between, flex-start)
    +transition(all 0.3s)
    &.active
      opacity: 1
      z-index: 2
      pointer-events: all

    .information
      width: 25%
      background-color: $lighterGray
      padding: 40px 2% 80px
      position: relative
      .image
        width: 80%
        margin: 35px auto 55px
        img
          width: 100%
      .description
        margin-bottom: 40px
      h4
        +font-bold(22px, 26px)
        font-size: 20px
        line-height: 22px
        color: $darkBlue
        margin: 0 0 2px
        text-align: center

      p
        +font-light(19px, 26px)
        font-size: 16px
        line-height: 22px
        color: $darkBlue

        &.location
          margin: 0
          text-align: center
        span
          +font-semi-bold(19px, 26px)
          font-size: 16px
          line-height: 22px
          width: 70%
          max-width: 150px
          color: $darkerBlue
          display: inline-block

      .website
        position: absolute
        bottom: 0
        left: 0
        width: 100%
        height: 60px
        +flex(center, center)
        background-color: rgba(178, 186, 194, 0.25)

        p, p a
          +font-default(20px, 22px)
          font-size: 18px
          line-height: 22px
          color: $darkBlue

    .reviews
      width: 62.5%
      h5
        +font-semi-bold(26px, 26px)
        font-size: 24px
        line-height: 24px
        color: $darkBlue
        width: 80%
        margin-left: 20%

      .review
        +flex(space-between, flex-start)
        .image-placeholder
          width: 20%
          margin-top: 101px
          .image
            width: 100px
            height: 100px
            background-size: cover
            background-position: center
            border-radius: 9999px
        .content
          width: 80%
          margin-top: 50px
          border-top: 1px solid $lighterGray
          padding-top: 50px

          p
            +font-light(18px, 24px)
            font-size: 16px
            line-height: 22px
            color: $darkBlue
          .text
            margin-bottom: 25px
            *:first-child
              margin-top: 0
              &:before
                content: open-quote

            *:last-child:after
              content: close-quote
          .name
            margin-bottom: 2px
          .function
            margin: 0
            +font-semi-bold(18px, 24px)
            font-size: 16px
            line-height: 22px

        &:first-of-type
          .image-placeholder
            margin-top: 50px
          .content
            margin-top: 50px
            border-top: none
            padding-top: 0

+media-query(1250px)
  .cases
    .cases-placeholder
      margin: 50px auto
    .case
      display: block

      .information
        width: 100%
        max-width: 600px
        margin: 0 auto 50px
        padding: 40px 8% 80px
      .reviews
        width: 100%
        max-width: 600px
        margin: 0 auto
        h5
          width: 100%
          text-align: center
          margin-left: 0
        .review
          .image-placeholder
            width: 25%
          .content
            width: 75%
            p
              +font-light(19px, 24px)
            .function
              +font-semi-bold(19px, 24px)

+media-query(650px)
  .cases
    .cases-placeholder
      width: 100%
    .case
      .information
        max-width: 500px
      .reviews
        .review
          display: block
          margin-bottom: 80px
          .image-placeholder
            margin: 50px auto 0
          .content
            margin: 35px auto 0
            margin-top: 35px
            padding-top: 0
            width: 90%
            border-top: none
            max-width: 350px

+media-query(450px)
  .cases
    .content-container
      width: 100%
    .cases-placeholder
      width: 100%