.project-detail, .showroom
  margin-bottom: 58px

  .project-images
    a:not(:last-of-type)
      margin-bottom: 20px
      display: block
    img
      width: 100%
      &:first-child
        margin-top: 0

  .information

    &.sticky:not(.no-sticky-allowed)
      position: fixed
      top: 110px

      &.sticky-done
        position: absolute
        bottom: 5px
        top: initial
        right: 0 !important

    h1
      +font-semi-bold(32px, 44px)
      color: $fontColor1
    >p
      +font-default(16px, 22px)
      color: $fontColor1
      margin-bottom: 50px

    .sub-information, .project-sub-information, .openingshours, .location-information
      h2
        +font-default(22px, 26px)
        margin-bottom: 20px
        height: 52px

      ul
        li
          +font-default(16px, 32px)

          span
            font-weight: 600

    .project-sub-information
      ul
        li
          font-size: 16px
          line-height: 18px
          span
            width: 100px
            font-size: 16px
            display: inline-block

    .sub-information
      ul
        li
          &:before
            content: ''
            +greenCheck
            display: inline-block
            margin-right: 10px

    .button-row
      +flex(flex-start, center)
      margin-top: 70px

    .project-button, .showroom-button
      max-width: 250px 
      height: 50px
      width: calc(100% - 80px)
      padding: 0 40px
      +font-semi-bold(16px, 18px)
      float: right
      margin-top: 70px

    .button-placeholder
      padding: 0
      width: 50px
      height: 50px
      display: block
      margin-right: 7px

    .previous, .next, .overview
      padding: 0
      width: 50px
      height: 50px
      border-radius: 9999px
      +flex(center, center)
      margin-right: 7px
      box-sizing: border-box
      border: 2px $fontBlue solid

      &:hover
        background: none
        border: 2px $fontBlue solid

    .next, .previous
      &:hover
        span
          +arrowRightBlue

    .overview
      span
        +sprite(-280px -85px, 16px, 16px)

      &:hover
        span
          +sprite(-280px -105px, 16px, 16px)

    .previous
      span
        +transform(rotate(180deg))

    .showroom-button
      width: 175px
      margin-top: 40px
      float: none
      span
        position: relative
        top: 2px




  .quote-block
    .quote-holder
      position: relative
      padding: 50px 0
      +flex(center, center)
      text-align: center
      background-color: $semiLightGrey

      .placeholder
        position: relative

      h4
        +font-semi-bold(19px, 28px)
        color: $fontColor1
        max-width: 80%
        text-align: center
        margin: auto

        &:before
          content: '“'

        &:after
          content: '”'

      p
        +font-default(15px, 24px)
        text-align: center

      .stars
        display: inline-block
        text-align: center
        position: relative

        >span
          +transform-origin(0 200%)
          +transform(rotate(0deg))
          +transition(all 0.12s, opacity 0.12s)

          &:nth-of-type(5)
            +transition-delay(0.65s)
          &:nth-of-type(4)
            +transition-delay(0.55s)
          &:nth-of-type(3)
            +transition-delay(0.45s)
          &:nth-of-type(2)
            +transition-delay(0.35s)
          &:nth-of-type(1)
            +transition-delay(0.25s)

        p
          position: absolute
          left: -45px
          width: 200px
          text-align: left
          color: $fontColor1
          margin: 0
          +font-default(15px, 21px)
          opacity: 0
          +transition(all 0.3s)
          +transition-delay(0s)

          span
            margin-left: 15px
            +arrowRightRed
            display: inline-block

        .full-star
          +star-full

        .empty-star
          +star-empty

.magnet-box
  height: 100px
  background: $defaultRedBlock

.isolation
  .magnet-box
    background: $defaultGreen

+media-query(($maxWidth + 40px))
  .project-detail
    .content-container
      width: calc(100% - 40px)
      padding: 0 20px

  .project-detail, .showroom
    .information
      &.sticky:not(.no-sticky-allowed)
        right: 20px

        &.sticky-done
          right: 20px !important

+media-query(1350px)
  .project-detail
    .information
      .sub-information
        ul.project-sub-information
          li
            span
              width: 100px

+media-query(1200px)
  .project-detail
    .project-images
      width: 40%
    .information
      width: 55%
      margin-left: 5%

+media-query(1050px)
  .project-detail
    .information
      .sub-information
        ul.project-sub-information
          li
            margin-bottom: 15px
            span
              width: 100%

+media-query(1000px)
  .project-detail
    .information
      .project-sub-information, .sub-information
        float: none
        width: 100%
        margin-left: 0
      .sub-information
        margin-top: 60px
      .openingshours, .location-information
        float: none
        width: 100%
        margin-right: 0
        margin-left: 0
      .location-information
        margin-top: 60px
      .project-button
        float: none
        width: 100%
      .button-row
        margin-top: 40px

+media-query(625px)
  .project-detail
    .content-container
      +flex(flex-start, flex-start)
      +flex-rows
      .information
        width: 100%
        margin-left: 0
        +order(1)
        padding: 0 6%
        .project-button, .showroom-button
          width: 225px
          +font-semi-bold(16px, 22px)

      .project-images
        +order(2)
        width: 100%
        margin-top: 40px