.post-detail
  position: absolute
  height: 100%
  width: 100%
  overflow: auto
  background-color: $grayBrownish
  transition: all 0.5s

  .relevant-posts
    position: fixed
    width: 100%
    height: 0%
    overflow: hidden 
    transition: height 0.4s
    z-index: 10
    left: 0
    bottom: 0
    pointer-events: none
    &.beauty
      .shader, .content
        background-color: $darkGray
      .content
        h3
          small
            color: white
            opacity: 0.3
        .close
          &:before, &:after
            background-color: white
            opacity: 0.3
        .posts
          .post
            a
              .date
                color: white
                opacity: 0.3

    &.fashion
      .shader, .content
        background-color: darken($yellow, 10%)
      .content
        h3
          small
            color: $darkerGray
            opacity: 0.5
        .close
          &:before, &:after
            background-color: $darkerGray
            opacity: 0.5
        .posts
          .post
            a
              .date
                color: $darkerGray
                opacity: 0.5
    .shader
      position: absolute
      width: 100%
      height: 100%
      background-color: $turquoise
      opacity: 0
      transition: all 0.3s

    .content
      background-color: $turquoise
      width: 50%
      height: 100%
      max-width: 480px
      position: absolute
      right: 50%
      top: 0
      +translate3d(0, 100%, 0)
      transition: 0.4s
      transition-delay: 0s
      h3
        width: 240px
        margin: 0 auto
        padding: 60px 0
        span
          opacity: 0.5
          +font-header(54px, 60px)
          color: white
        small
          +font-default(18px, 24px)
          color: darken($turquoise, 15%)
      .close
        position: absolute
        top: 20px
        right: 20px
        width: 80px
        height: 20px
        +flex(flex-end, center)
        cursor: pointer
        &:hover
          p
            opacity: 1
        p
          +font-default(13px, 18px)
          text-transform: uppercase
          color: white
          opacity: 0.5
          position: absolute
          margin: 0
          height: 20px
          top: 0
          left: 0
          transition: all 0.4s
        &:before, &:after
          content: ''
          position: absolute
          width: 20px
          height: 2px
          background-color: darken($turquoise, 15%)
          display: block
          top: 7px
          right: 0
          transition: all 0.3s
          +transform(rotate(-45deg))
        &:after
          +transform(rotate(45deg))
      .posts
        width: 360px
        margin: 0 auto
        .post
          padding: 30px 0
          border-bottom: 1px solid rgba(255, 255, 255, 0.3)
          &:last-of-type
            border-bottom: none
            padding-bottom: 0
          a
            padding-right: 25px
            display: block
            position: relative
            &:after
              content: ''
              +arrowWhite
              position: absolute
              right: 0
              bottom: calc( 50% - 8px)
              opacity: 0.75
              +translate3d(0,0,0)
              transition: all 0.3s

            h4
              +font-header(18px, 28px)
              color: white
              opacity: 0.75
              transition: all 0.3s
            .date
              +font-default(14px, 16px)
              color: darken($turquoise, 15%)
              font-style: italic
            &:hover
              h4
                opacity: 1
              &:after
                opacity: 1
                +translate3d(35px, 0,0 )
    &.active
      height: 100%
      pointer-events: all
      .content
        +translate3d(0, 0, 0)
        transition-delay: 0.2s
      .shader
        opacity: 0.4

  figure
    position: fixed
    left: 0
    top: 0
    height: 100vh
    width: 50%
    margin: 0
    z-index: 5
    background-color: $whitish
    pointer-events: none
    opacity: 1
    transition: opacity 0.3s

    .open-relevant
      position: absolute
      width: 80px
      height: 80px
      background-color: $turquoise
      right: 0
      bottom: 0
      z-index: 10
      cursor: pointer
      +flex(center, center)
      pointer-events: all
      span
        color: white
        opacity: 0.5
        font-size: 24px
        line-height: 28px

    .category-icon
      position: absolute
      right: 0
      top: 0
      height: 68px
      width: 68px
      +flex(center, center)
      pointer-events: all
      opacity: 1
      +translate3d(0, 0, 0)
      transition: all 0.3s, transform 0.3s linear 0.4s, opacity 0.3s linear 0.4s
      span
        display: block

      &.lifestyle
        background-color: $turquoise
        &:hover
          background-color: darken($turquoise, 5%)
        span
          +sprite(-123px -105px, 23px, 20px)
      &.fashion
        background-color: $yellow
        &:hover
          background-color: darken($yellow, 10%)
        span
          +sprite(-147px -105px, 21px, 22px)
      &.beauty
        background-color: $darkGray
        &:hover
          background-color: darken($darkGray, 10%)
        span
          +sprite(-168px -105px, 28px, 17px)

    .detail-image
      width: 100%
      height: 100%
      position: absolute
      left: 0
      top: 0
      opacity: 0
      +translate3d(0, 0, 0)
      transition: all 0.5s
      &.active
        opacity: 1
      .image
        width: 100% !important
        height: 100%
        background-size: cover
        background-position: center
        background-repeat: no-repeat
        &.large
          display: none

    .controls
      position: absolute
      width: 100%
      left: 0
      top: 20vh
      display: none

      .control
        width: 120px
        height: 40px
        background-color: rgba(255, 255, 255, 0.7)
        +flex(center, center)
        +font-default(12px, 12px)
        color: $darkGray
        text-transform: uppercase
        cursor: pointer
        pointer-events: all
        transition: all 0.3s
        &.next
          margin-left: auto
          margin-bottom: 180px

        &:hover
          background-color: white
  .detail-page
    height: auto
    min-height: 100vh
    position: relative

    .content-container
      height: auto
      width: 100%

    .right-content
      width: 50%
      position: relative
      background-color: white
      +translate3d(0,0,0)
      opacity: 1
      transition: all 0.5s

      header
        background-color: $grayBrownish
        padding: 100px 0 40px
        h1, .date
          width: calc(100% / 3 * 2)
          margin: 0 auto
        h1
          +font-header(45px, 55px)
          color: black
          margin-bottom: 5px
        .date
          text-transform: uppercase
          color: $darkGray
          +font-default(12px, 14px)
          letter-spacing: 0.6px
      figure
        display: none
      .logo
        position: absolute
        left: 0
        top: 0

      .text
        height: auto
        display: block
        padding: 80px 0 0px

        h2
          color: $turquoise
          +font-header(24px, 32px)
          margin-top: 80px
          &:first-of-type
            margin-top: 40px
        p, li
          +font-light(18px, 24px)
          color: black
          margin: 40px 0
        a
          text-decoration: underline
          color: $turquoise
          +font-default(18px, 24px)
        li
          margin: 0
      .post-info
        width: calc(100% / 3 * 2)
        margin: 0 auto 40px
        .stripe
          height: 2px
          width: 15px
          margin-bottom: 15px
          background-color: black
        .info
          +flex(flex-start, center)
          span
            width: 150px
          span, p, a
            text-transform: uppercase
            +font-default(12px, 14px)
            letter-spacing: 1px
            color: black
            display: block
            margin: 0
          a
            text-decoration: underline



      .comments
        width: calc(100% / 3 * 2 + 16px)
        margin: 0 auto
        min-height: 185px

      footer
        background-color: $grayBrownish
        height: 240px
        position: relative
        margin-top: 30px
        .navigation
          position: absolute
          right: 0
          top: 0
          width: 100%
          +flex(flex-end, flex-start)
          .nav-block
            width: 120px
            height: 120px
            +flex(center, center)
            transition: width 0.6s
            overflow: hidden
            cursor: pointer

            &.top
              background-color: white
              transition: all 0.3s
              span
                +arrowBlack
                transform: rotate(-90deg)
              &:hover
                background-color: $whitish

            &.next,&.previous
              position: absolute
              right: -120px
              .icon
                +arrowWhite
                position: absolute
                top: calc(50% - 8px)

              span
                color: $whitish
                position: absolute
                +font-default(14px, 16px)
                text-transform: uppercase
                top: calc(50% - 7px)
                opacity: 0
                transition: all 0.4s
                transition-delay: 0s

              &:hover
                width: 240px
                span
                  opacity: 1
                  transition-delay: 0.2s
            &.previous
              background-color: $turquoise

              top: 120px
              .icon
                transform: rotate(180deg)
                left: 51px
              span
                right: 30px
                width: 100px
            &.next
              background-color: $darkGray
              top: 0
              span
                left: 30px
                width: 130px
              .icon
                right: 51px

        .social-link
          position: absolute
          left: 45px
          bottom: 40px
          padding-bottom: 0
          width: auto
          p
            margin-top: 0

  &.animate
    background-color: transparent
    transition: all 0s
    figure
      opacity: 0
      transition: all 0s
      .detail-image
        transition: all 0s
        +translate3d(-50%, 0, 0)

      .category-icon
        opacity: 0
        +translate3d(100%, 0, 0)
        transition: all 0s
    .detail-page
      .right-content
        opacity: 0
        +translate3d(0, 25vh, 0)
        transition: all 0s

  &.moveOut
    z-index: 10
    background-color: transparent
    figure
      opacity: 0
      .detail-image
        +translate3d(-50%, 0, 0)
      .category-icon
        opacity: 0
        transition-delay: 0s
    .detail-page
      .right-content
        opacity: 0
        +translate3d(0, -25vh, 0)

+media-query(1700px)
  .post-detail
    .detail-page
      .right-content
        footer
          height: 200px
          .navigation
            .nav-block
              height: 100px
              width: 100px
              &.top
                position: absolute
                right: 100px
                top: 0
              &.next,&.previous
                right: 0
              &.previous
                top: 100px
                .icon
                  left: 41px
              &.next
                .icon
                  right: 43px

+media-query-height-or-width(900px, 750px)
  .post-detail
    position: relative
    margin-top: 60px
    overflow: visible

    .relevant-posts
      display: none

    figure
      position: relative
      width: 100%
      height: 75vh
      pointer-events: all
      &.no-images
        height: 68px

      .detail-image
        .image
          &.xlarge
            display: none
          &.large
            display: block
      .open-relevant
        display: none
      .controls
        top: auto !important
        bottom: 40px
        .control.next
          margin-bottom: 40px

    .detail-page
      padding-top: 60px
      .right-content
        width: 100%
        .logo
          display: none !important
        header
          padding: 40px 10%
          h1
            font-size: 36px
            line-height: 44px
            margin-bottom: 15px
          h1, .date
            width: 100%

        .text
          width: 100%
          padding: 50px 10% 20px
        .post-info, .comments
          width: 100%
          padding: 0 10%
        footer
          height: 200px
          .navigation
            .nav-block
              height: 100px
              width: 100px
              &.top
                position: absolute
                right: 100px
                top: 0

              &.next, &.previous
                right: 0
                span
                  opacity: 0
              &.next
                span
                  left: 41px
                .icon
                  right: 43px
              &.previous
                top: 100px
                span
                  right: 42px
                .icon
                  left: 41px
          .social-link
            left: 0
            padding-left: 10%
+media-query(575px)
  .post-detail
    .detail-page
      .right-content
        footer
          height: 265px

+media-query(450px)
  .post-detail
    .detail-page
      .right-content
        footer
          height: 300px
          .social-link
            bottom: 20px
          .navigation
            position: relative

            .nav-block
              width: 175px
              &.top
                right: auto
                left: 0
                width: 80px
                height: 80px
              &.next, &.previous
                height: 80px
                top: 0
                right: 0
                span, .icon
                  font-size: 12px
                  position: relative
                  top: 0
                  left: 0
                  right: 0
                  opacity: 1
                .icon
                  margin-right: 20px
                &:hover
                  width: 175px
              &.next
                span
                  +order(1)
                  width: 104px
                .icon
                  +order(2)
                  margin-right: 0
                  margin-left: 20px

                //.icon
                //  position: relative
                //  top: 0
                //  right: 0
                //  left: 0
                //span
                //  opacity: 0
              &.previous
                top: 80px