.styling-block
  height: 340px
  position: relative
  pointer-events: none


  .left, .right
    position: absolute
    top: -167px
    height: 100%
    width: 50%
    background: $darkGray url('/img/noise.png')
    &:before
      width: calc(100% - 3px)
      content: ''
      position: absolute
      top: 20px
      height: 1px
      border-style: Dashed
      border-color: rgba(254, 253, 251, 0.5)
      border-width: 2px
      border-bottom: none
      border-left: none
      border-right: none

  .left
    left: 1px
    +transform(skewY(15deg))
    &:before
      left: 0
  .right
    right: 0
    +transform(skewY(-15deg))
    &:before
      right: 0

  &.bottom-block
    height: 360px
    overflow: hidden
    margin-top: -150px
    .left, .right
      top: 50%
      height: 360px
      background: transparent url('/img/line-gradient.png')
      &:before
        top: 6px
    .left
      opacity: 0.5

  &.bottom
    bottom: 0
    top: auto
    position: absolute
    width: 100%
    margin-bottom: -340px
    .left, .right
      &:before
        top: auto
        bottom: 20px


.pocket
  +sprite(-949px -300px, 255px, 300px)
  margin: 0 10px
  a
    +flex(center, center)
    +flex-rows
    >p
      +header-font(62px, 73px)
      color: $red
      margin: 35px 0 10px
      text-shadow: 3px 2px rgba(82,82,82,0.3)
      +transform(rotate(-15deg))
    .button
      background-color: $darkGray
      height: 60px
      width: 180px
      margin-top: 20px
      display: inline-block
      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(21px, 21px)
          font-size: 19px
          padding: 0 40px
          color: $lightGray
      &:hover
        background-color: darken($darkGray, 5%)
        box-shadow: 0px 0px rgba(82, 82, 82, 0.0)

  &.page-pocket
    margin-bottom: 50px
    a
      >p
        +header-font(50px, 55px)
        font-size: 50px !important
        line-height: 55px !important
        text-align: center

        strong
          display: inline-block
          +header-font(55px, 55px)
          font-size: 55px !important
          color: $darkGray
          width: 100%
  &.part-pocket
    margin: 0 20px 50px
    a
      >p
        +header-font(62px, 114px)
        font-size: 62px !important
        line-height: 114px !important
    &.chromewerk
      a
        >p
          +header-font(62px, 73px)
          font-size: 62px !important
          line-height: 73px !important
        >p:first-of-type
          margin-bottom: 0
          width: 100%
          margin-left: 25px
        >p:nth-child(2)
          margin-top: -32px
          width: 75%
          text-align: right
    &.verlichting, &.aandrijving, &.plaatwerk
      a
        >p
          +header-font(48px, 114px)
          font-size: 48px !important
          line-height: 114px !important

.coupon
  +sprite(-395px -355px, 530px, 240px)
  margin: 0 20px 60px
  a
    height: 100%
    width: 100%
    +flex(center, center)
    position: relative
  .content
    display: block
    height: 80%
    width: calc(90% - 200px)
    margin-top: -20px
    h3, h5
      +header-font(32px, 32px)
      font-size: 32px !important
      line-height: 30px !important 
      color: $yellowish
      +flex(flex-start, center)
      text-shadow: 3px 2px rgba(82,82,82,0.3)
      +transform(rotate(-4deg))
      width: 83%
      margin: 10px 0 5px

    h5
      font-size: 26px !important
      line-height: 26px !important
      color: $darkGray
      margin: 0 5px 12px
    .text
      p, li, h2
        +font-default()
        font-size: 15px !important
        line-height: 19px !important
        color: $lightGray
        margin: 5px 0 0

    .button
      background-color: $darkGray
      height: 48px
      width: 170px
      margin-top: 15px
      display: inline-block
      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: 15px !important
          line-height: 18px !important
          padding: 0 20px
          color: $lightGray
      &:hover
        background-color: darken($darkGray, 5%)
        box-shadow: 0px 0px rgba(82, 82, 82, 0.0)
    &.full
      width: 80%

  .image
    width: 178px
    height: 186px
    background: white
    border-radius: 12px
    margin-right: 22px
    +flex(center, center)
    .image-border
      width: 161px
      height: 173px
      border-radius: 12px
      +flex(center, center)
      border-style: Dashed
      border-color: rgba(82, 82, 82, 0.5)
      border-width: 2px
      .image-placeholder
        width: 152px
        height: 165px
        border-radius: 12px
        background-size: cover
        background-position: 50%
        background-repeat: no-repeat
  .price
    position: absolute
    width: 107px
    height: 107px
    +flex(center, center)
    right: -20px
    top: -40px
    .background
      +sprite(-380px -214px, 107px, 107px)
      position: absolute
      top: 0
      left: 0
    p
      +font-default()
      font-size: 21px !important
      line-height: 28px !important
      color: $lightGray
      text-align: center
      position: relative
      +transform(rotate(12deg))
    &.sold
      .background
        +sprite(-1008px -190px, 107px, 107px)
+media-query(680px)
  .coupon
    width: 100%
    margin: 0 0 40px
    background-image: none
    background-color: $beige
    position: relative
    height: 320px
    &:before, &:after
      border-bottom: Dashed rgba(82, 82, 82, 0.5) 2px
      content: ''
      width: 100%
      position: absolute
      left: 0
      height: 2px
    &:before
      top: 10px
    &:after
      bottom: 10px
    .price
      top: -30px
      right: 10px
    a
      padding: 40px 0
    .content
      margin-top: 10px

+media-query(460px)
  .coupon
    height: auto
    a
      +flex-rows
    .image
      width: 90%
      max-width: 250px
      height: 250px
      .image-border
        width: calc(100% - 18px)
        height: calc(100% - 14px)
        .image-placeholder
          width: calc(100% - 18px)
          height: calc(100% - 14px)
    .content
      width: calc(100% - 80px)
      max-width: 250px
      .button
        margin-top: 40px

+media-query(400px)
  .pocket.part-pocket
    margin-left: auto
    margin-right: auto