/*==========================================================================
  Our Studio - Overview page
  ========================================================================== */



.ajax-container.our-studio-overview
  +respond-to-height(800)
  position: relative

  .title
    position: absolute
    left: 0
    bottom: 0
    height: 200px
    width: 100%
    padding: 0 15%
    +flex(flex-start, center)


    h1
      position: relative
      margin-bottom: -12px
      z-index: 2
      font-size: 3rem
      line-height: 1.2
      text-transform: uppercase
      color: $darkBlue

      small
        display: block
        font-size: 0.5em
        color: white
        opacity: 0.5
        +translate3d(0,0,0)

  .navigation-placeholder
    position: absolute
    height: calc(100% - 200px)
    min-height: 525px
    width: 100%
    padding: 0 20px
    left: 0
    top: 0
    +flex(space-around, center)

  .studio-block
    position: relative
    text-decoration: none
    width: 30%
    height: 30vw
    max-height: 525px

    &:before
      //content: ''
      //position: absolute
      //z-index: 2
      //width: 100%
      //height: 100%
      //top: 0
      //left: 0
      //background-color: $darkBlue
      //opacity: 1
      //transition: opacity 0.5s

    figure
      position: absolute
      z-index: 1
      width: 100%
      height: 80%
      top: 0
      left: 0
      background-position: center
      background-size: cover
      background-repeat: no-repeat
      +flex(center, center)

      .shape
        position: absolute
        z-index: 2
        top: 10%
        left: 10%
        +flex(center, center)
        width: 80%
        height: 80%
        transform: scale3d(1,1,1)
        transition: transform 0.6s, opacity 0.6s

        svg
          width: 75%

          &#square
            width: 50%
            transform-origin: 50% 50%
            transform: rotate(45deg)

    &:hover
      figure
        .shape
          transform: scale3d(0.8, 0.8, 1)
          opacity: 0.4

    p
      position: absolute
      z-index: 3
      left: 0
      bottom: 0
      width: 100%
      margin: 0
      padding: 10px 20px
      font-family: din()
      background-color: white
      font-size: 2rem
      line-height: 1.2
      color: $gray
      text-transform: uppercase
      transition: color 0.5s

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

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

      //+respond-to-height(800)
      //  left: 10px
      //  font-size: 1.9rem

    &:hover
      &:before
        opacity: 0

      p
        color: darken($gray, 10%)

    &:nth-last-child(even)
      p
        color: $darkBlue

      &:hover
        p
          color: darken($darkBlue, 10%)

  /* Small Tablet view
     ========================================================================== */
  +respond-to-width-or-height(900, 700)
    +flex(center, flex-start)
    +flex-rows

    .title
      +order(1)
      position: relative
      padding: 50px 10%
      height: auto
      h1
        margin-bottom: 0
        padding: 0 20px

    .navigation-placeholder
      position: relative
      +flex(center, flex-start)
      +flex-rows
      +order(2)
      padding: 0 0 100px

    .studio-block
      width: 80%
      height: auto
      margin-bottom: 40px

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

      figure
        position: relative
        height: 50vw

      p
        position: relative



  /* Mobile view
    ========================================================================== */
  +respond-to-width-or-height(600, 600)

    .title
      width: 100%
      h1
        font-size: 2.2rem
        padding: 0

    .studio-block
      width: 100%
      max-height: none

      figure
        height: 50vh

      p
        text-align: center