/*==========================================================================
  Service - Detail page - Projects
  ========================================================================== */



.ajax-container.services-detail

  .close-button
    position: absolute
    z-index: 103
    right: 0
    top: 0
    height: 60px
    width: 60px
    +flex(center, center)
    color: $fontBlack
    cursor: pointer
    background-color: white
    border-radius: 0 25px 0 25px
    font-family: din()
    font-size: 25px
    line-height: 1
    opacity: 0
    transform: scale3d(0.2,0.2,1)
    transition: transform 1s, opacity 1s, border-radius 1s ease 1s

    .corner
      position: absolute
      width: $corners
      height: $corners
      svg
        width: 100%
        height: 100%
        position: absolute
        left: 0
        top: 0
        path
          fill: white

      &.left-corner
        left: -$corners
        top: 0
      &.right-corner
        right: 0
        bottom: -$corners

    &.show
      opacity: 1
      transform: scale3d(1,1,1)
      border-radius: 0 0 0 25px

  .projects
    position: absolute
    height: 100%
    width: 100%
    top: 0
    left: 0
    border-radius: 25px
    overflow: hidden
    opacity: 0
    background-color: $lightGray
    transition: opacity 0.5s

    &.active
      z-index: 102
      opacity: 1
      .navigator
        opacity: 1

      article
        +translate3d(0, 0, 0)

    .navigator
      position: absolute
      left: 2.5%
      top: 0
      +flex(space-between, center)
      height: 100%
      width: 95%
      opacity: 0
      pointer-events: none
      transition: opacity 0.5s

      .nav-button
        position: relative
        z-index: 2
        font-size: 5rem
        line-height: 1
        color: white
        text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.4)
        opacity: 0.6
        cursor: pointer
        pointer-events: all
        transition: opacity 0.2s
        &:hover
          opacity: 1

    .mobile-view
      display: none
      position: absolute
      padding: 25px 0
      width: 100%
      left: 0
      bottom: 0
      background-color: $lighterGray
      pointer-events: all
      opacity: 1

      p
        color: $fontBlack
        text-shadow: 0 0 0 rgba(255,255,255, 0)

      span
        +sprite(-58px -41px, 22px, 22px)

    article
      position: absolute
      left: 0
      top: 0
      height: 100%
      width: 100%
      +flex(flex-start, flex-start)
      +flex-rows
      padding: 2.5%

      opacity: 0
      +translate3d(0,100%,0)
      transition: opacity 0.5s, transform 0.5s

      &.active
        opacity: 1
        z-index: 2


      .title-placeholder
        position: relative
        z-index: 1
        width: 100%

      h2, h3
        position: relative
        display: inline-block
        line-height: 1
        background-color: white
        text-transform: uppercase

      h2
        font-size: 4rem
        padding: 11px 15px 0
        color: $red

      h3
        font-size: 2.4rem
        line-height: 1
        padding: 0 15px
        color: $lightGray

      .quote
        position: relative
        display: inline-block
        width: 100%
        max-width: 600px
        padding: 20px 30px
        background-color: $red
        +align-self(flex-end)

        .text
          color: white
          font-style: italic
          font-size: 0.9rem
          *:first-child:before
            content: open-quote
          *:last-child:after
            content: close-quote
          p
            &:first-of-type
              margin-top: 0

        span
          color: $lightGray
          font-size: 1.2rem

      figure
        position: absolute
        left: 0
        top: 0
        width: 100%
        height: 100%

        span
          position: absolute
          left: 0
          top: 0
          width: 100%
          height: 100%
          background-position: center
          background-size: cover
          background-repeat: no-repeat
          display: none

          &.original
            display: block


  &.animateOut
    .close-button, .projects
      opacity: 0
      transition-delay: 0.7s

  +respond-to-width(1250)
    .projects
      padding-bottom: 99px
      article
        padding: 0
        overflow: auto
        display: block
        height: calc(100% - 99px)
        background-color: $red
        .title-placeholder
          background-color: $lighterGray
          padding: 5px 20px 10px
          br
            display: none

        h2, h3
          display: block
          background-color: transparent

        h2
          font-size: 2.8rem

        h3
          font-size: 2rem

        figure
          position: relative
          display: block
          height: 0
          padding-bottom: 60%

        .quote
          display: block
          max-width: none

    .next-service
      &.main-view
        display: none

      &.mobile-view
        display: block

  /* Mobile view
    ========================================================================== */
  +respond-to-width-or-height(500, 600)
    .close-button
      position: fixed
      top: 0
      width: 45px
      height: 45px
      border-radius: 0
      &.show
        z-index: 1002

    .projects
      position: fixed
      width: 100%
      height: 100%
      border-radius: 0
      //background-color: rgba(0,0,0, 0.8)
      background-color: white

      &.active
        z-index: 1002

      .navigator
        z-index: 1003
        height: 46%
        top: 100px

      article
        width: 100%
        padding: 0

        h2
          display: block
          font-size: 1.4rem
          min-height: 45px
          width: 100%
          padding: 11px 50px 15px 15px

        figure
          position: relative
          height: 0
          padding-bottom: 60%

        .quote
          font-size: 0.9rem

          span
            font-size: 1rem