/*==========================================================================
  Service - Detail page - Video
  ========================================================================== */



.ajax-container.our-studio-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 0.5s, opacity 0.5s, border-radius 0.5s ease 0.5s

    .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

    +respond-to-width-or-height(950, 700)
      height: 50px
      width: 50px

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

  .video-pop-up
    position: absolute
    z-index: -1
    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

    #ytplayer
      width: 100%
      height: 100%

  &.animateOut
    .video-pop-up
      opacity: 0 !important



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

    .close-button
      position: fixed
      top: 5%
      width: 45px
      height: 45px
      border-radius: 0
      color: white
      &.show
        z-index: 1002

    .video-pop-up
      position: fixed
      width: 100%
      height: 100%
      border-radius: 0
      background-color: rgba(0,0,0, 0.8) 

      &.active
        z-index: 1001

      #ytplayer
        position: absolute
        width: 100%
        height: 90%
        max-height: 400px
        left: 0
        top: 5%