.part-detail
  position: relative
  z-index: 15
  background: $yellowish url('/img/noise2.png')
  padding-bottom: 100px

  .styling-block
    width: 100%
    .left, .right
      background: $yellowish url('/img/noise2.png')
      &:before
        border-color: rgba(82, 82, 82, 0.5)
    .left
      top: -167px
    &.first
      margin-bottom: -268px
      margin-top: 340px
    &.bottom
      margin-bottom: -20px
      .left, .right
        background-color: $yellowish
        background-image: url('/img/noise2.png')
        background-size: auto
        bottom: 0
        top: auto 
  .part-information
    position: relative
    z-index: 100
    padding-bottom: 120px

    .content-container
      width: calc( 100% - 360px )
    .part-info
      +flex(space-between, flex-start)
      .main-title
        display: none
        +header-font2(64px, 64px)
        font-size: 60px
        color: $blue
        text-transform: uppercase
        text-shadow: 3px 3px rgba(0,0,0, 0.15)
        max-width: 560px
        margin: 30px 0
        word-break: break-word

      .images
        width: calc(50% - 20px)
        .main-block
          background-color: white
          border-radius: 12px
          padding: 8px 0
          +flex(center, center)
          position: relative

          .video-wrapper
            position: absolute
            padding-bottom: 70% /* 16:9 */
            height: 0
            width: calc(100% - 14px)
            border-radius: 12px
            overflow: hidden
            display: inline-table
            top: 10px
            border: Dashed rgba(82, 82, 82, 0.5) 2px
            &.inactive
              opacity: 0
              pointer-events: none
            iframe
              position: absolute
              top: 6px
              left: 6px
              width: calc(100% - 12px)
              height: calc(100% - 12px)
              border-radius: 12px
          .main-block-wrapper
            width: calc(100% - 12px)
            border-radius: 12px
            border: Dashed rgba(82, 82, 82, 0.5) 2px
            position: relative
            padding-bottom: 70% /* 16:9 */
            display: inline-table
            height: 0
            &.inactive
              opacity: 0
              pointer-events: none
            .main-block-content
              position: absolute
              left: 6px
              top: 6px
              height: calc(100% - 12px)
              width: calc(100% - 12px)
              span
                position: absolute
                height: 100%
                width: 100%
                left: 0
                top: 0
                background-size: cover
                background-position: 50%
                display: none
                border-radius: 12px
                &.active
                  display: block
                  &.medium
                    display: none
        .image-nav
          margin-top: 20px
          width: 100%
          +flex(flex-start, center)
          +flex-rows
          .item
            height: 100px
            width: 100px
            background-color: white
            border-radius: 12px
            margin-right: 20px
            margin-bottom: 20px
            position: relative
            cursor: pointer
            +flex(center, center)
            +transition(all 0.3s)

            &:hover:not(.active) 
              background-color: rgba(255,255,255,0)
              .wrapper
                width: 100%
                height: 100%
                border: Dashed rgba(82, 82, 82, 0.0) 2px
                span
                  height: 100%
                  width: 100%

            &.active
              background-color: $blue
              .wrapper
                border: Dashed rgba(250, 242, 224, 0.8) 2px
            &:last-of-type
              margin-right: 0
            .wrapper
              height: calc(100% - 8px)
              width: calc(100% - 8px)
              border: Dashed rgba(82, 82, 82, 0.5) 2px
              border-radius: 12px
              +flex(center, center)
              +transition(all 0.3s)
              span
                width: calc(100% - 10px)
                height: calc(100% - 10px)
                background-size: cover
                background-position: 50%
                border-radius: 12px
                +transition(all 0.3s)
      .content
        width: calc(50% - 20px)
        &.full-width
          width: 100%
          max-width: 700px
          margin: 40px auto
        h1
          +header-font2(64px, 64px)
          font-size: 60px
          color: $blue
          text-transform: uppercase
          text-shadow: 3px 3px rgba(0,0,0, 0.15)
          max-width: 560px
        ul, ol
          padding: 0
          margin-top: 30px
          list-style: none
          max-width: 560px
          position: relative
          .mobile-nav
            display: none
          li
            +font-default(24px, 40px)
            font-size: 20px
            line-height: 36px
            color: $darkGray
            +flex(flex-start, center)
            border-bottom: 2px dashed rgba(82, 82, 89, 0.5)
            strong
              color: $darkGray
              +header-font2(24px)
              font-weight: bold
              font-size: 20px
              text-transform: uppercase
              letter-spacing: 0.21px
              width: 175px
              display: block
            &.price
              border: none
              position: absolute
              top: -20px
              right: -40px
              width: 111px
              height: 111px
              +flex(center, center)
              .background
                position: absolute
                top: 0
                right: 0
                +sprite(-560px -215px, 111px, 111px)
              .inner
                position: relative
                color: white
                +font-default()
                font-size: 24px !important
                line-height: 24px !important
                margin: 0
                +transform(rotate(15deg))
              &.sold
                .background
                  +sprite(-1125px -190px, 107px, 107px)
        .button-placeholder
          width: 100%
          max-width: 560px
          text-align: right
        .button
          background-color: $darkGray
          height: 55px
          width: 240px
          margin-top: 15px
          display: inline-block
          cursor: pointer
          box-shadow: 10px 10px rgba(82, 82, 82, 0.5)
          +transition(all 0.3s)

          .placeholder
            padding: 3px 5px
            display: block
            height: 100%
          .inner-button
            border-style: Dashed
            border-color: rgba(250, 242, 224, 0.5)
            border-width: 2px
            height: 100%
            +flex(center, center)
            p
              margin: 0
              text-align: center
              +font-bold()
              font-size: 18px !important
              line-height: 21px !important
              padding: 0 20px
              color: $lightGray
              &:after
                content: ''
                +arrowBlue
                margin-left: 20px
                margin-bottom: -3px
                +transition(all 0.3s)
          &:hover
            background-color: darken($darkGray, 5%)
            box-shadow: 0px 0px rgba(82, 82, 82, 0.0)

            .inner-button p:after
              +arrowWhite
    .extra-info
      margin-top: 50px
      +flex(space-between, center)
      .left, .right
        width: calc(50% - 20px)
        +flex(space-between, center)
      .mobile
        display: block
        width: 100%
        .text
          width: 100%
          max-width: 560px
          margin: auto
          margin-bottom: 50px
          text-align: center
        .badge
          width: 100%
          max-width: 560px
          margin: 50px auto
        .controls
          max-width: 560px
          margin: auto
          +flex(space-around, center)
      .previous-item, .next-item
        cursor: pointer
        width: 120px
        p
          +font-bold(24px, 26px)
          font-size: 20px
          line-height: 21px
          text-align: center
        .button
          width: 48px
          height: 48px
          position: relative
          margin: auto
          +flex(center, center)
          &:after
            content: ''
            +arrowWhite
            position: relative
            left: 2px
            +transform(rotate(0deg))
            +transition(all 0.3s)
          .background
            +sprite(-500px -215px, 48px, 48px)
            position: absolute
            top: 0
            left: 0
            +transform(rotate(0deg))
            +transition(all 8s)
            +transition-timing-function(linear)
        &:hover
          .button
            &:after
              +arrowBlue
            .background
              +transform(rotate(360deg))

      .previous-item
        .button:after
          left: -3px
          +transform(rotate(180deg))
      .badge
        border-radius: 12px
        background: $blue url('/img/noise.png')
        padding: 12px
        width: calc(100% - 160px)
        .content
          border-radius: 12px
          border-style: Dashed
          border-color: rgba(82, 82, 82, 0.5)
          border-width: 2px
          padding: 40px 10%
          text-align: right
          h3
            +header-font2(52px, 64px)
            font-size: 48px
            text-transform: uppercase
            color: $lightGray
            letter-spacing: 0.5px
            text-shadow: 4px 4px $darkGray
            margin: 0
            text-align: left
          p
            +font-default(21px, 26px)
            font-size: 18px
            color: $lightGray
            text-align: left
          .button
            background-color: $beige
            height: 60px
            margin-top: 0
            display: inline-block
            cursor: pointer
            box-shadow: 10px 10px rgba(82, 82, 82, 0.5)
            +transition(all 0.3s)
            .placeholder
              padding: 3px 5px
              display: block
              height: 100%
            .inner-button
              border-style: Dashed
              border-color: rgba(82, 82, 82, 0.5)
              border-width: 2px
              height: 100%
              +flex(center, center)
              p
                margin: 0
                text-align: center
                +font-bold(21px, 21px)
                font-size: 19px
                padding: 0 40px
            &:hover
              background-color: darken($beige, 5%)
              box-shadow: 0px 0px rgba(82, 82, 82, 0.0)
      .text
        width: calc(100% - 160px)
        max-width: 520px

+media-query(1300px)
  .part-detail
    .part-information
      .content-container
        max-width: 700px
      .part-info
        +flex-rows
        .main-title
          display: block
          width: 100%
        .images
          width: 100%
        .content
          width: 100%
          max-width: 560px
          margin: auto
          h1
            display: none
      .extra-info
        .left, .right
          display: none
        .mobile
          display: block

+media-query(1150px)
  .part-detail
    .part-information
      .content-container
        width: calc( 100% - 100px )
+media-query(900px)
  .part-detail
    .styling-block.first
      margin-bottom: -400px

+media-query(450px)
  .part-detail
    .part-information
      .content-container
        width: 100%
      .part-info
        .main-title
          width: calc(100% - 60px)
          margin-left: auto
          margin-right: auto
          font-size: 32px
          line-height: 38px
        .images
          .main-block
            padding: 8px 0
            border-radius: 0

            .video-wrapper
              width: 100%
              border-right: none
              border-left: none
              border-radius: 0
              iframe
                top: 6px
                left: 0
                width: 100%
                border-radius: 0
                height: calc(100% - 12px)
            .main-block-wrapper
              width: 100%
              border-radius: 0
              border-right: none
              border-left: none
              .main-block-content
                width: 100%
                border-radius: 0
                left: 0
                span
                  border-radius: 0
          .image-nav
            width: calc(100% - 60px)
            margin-left: auto
            margin-right: auto
            .item
              height: 80px
              width: 80px
              .wrapper
                height: calc(100% - 5px)
                width: calc(100% - 5px)
                span
                  width: calc(100% - 6px)
                  height: calc(100% - 6px)
        .content, .content.full-width
          width: calc(100% - 60px)
          max-width: 560px
          margin: auto
          h1
            display: none
          ul
            li.price
              display: none
            .mobile-nav
              +flex(flex-start, center)
      .extra-info
        width: calc(100% - 60px)
        margin-left: auto
        margin-right: auto
        .left, .right
          display: none
        .mobile
          display: block