HEX
Server: Microsoft-IIS/8.5
System: Windows NT YDAWBH120 6.3 build 9600 (Windows Server 2012 R2 Standard Edition) AMD64
User: tentjecom_web (0)
PHP: 7.4.14
Disabled: NONE
Upload Files
File: D:/HostingSpaces/SBogers27/dndin.nl/resources/assets/sass/site/partials/show/_modelDetail.sass
.show-model-detail
  position: relative
  overflow: hidden
  background: $lightGrey

  .return-to-overview
    background-color: $blue
    padding: 20px column(1, 14)
    text-decoration: none
    display: none
    width: 100%

    .arrow
      position: relative
      top: 1px
      left: 4px
      display: block
      width: 12px
      margin-right: 25px
      transform: translate3d(0,0,0)
      transition: transform 0.3s

      svg
        max-height: 15px

      .arrow-icon
        width: 100%
        transform: rotate(90deg)
        transform-origin: center
        .st0
          fill: white

    p
      font-size: 0.8rem
      color: white
      margin: 0
      font-weight: semibold()

    &:hover
      .arrow
        transform: translate3d(-5px,0,0)

  .show-sub-menu
    position: relative
    z-index: 3
    display: inline-block
    width: column(4, 12)
    padding: 116px 50px 80px 0
    vertical-align: top

  .dynamic-content
    position: relative
    z-index: 2
    display: inline-block
    width: column(8, 12)
    padding: 80px 0
    vertical-align: top

    &::after
      content: ''
      position: absolute
      z-index: -1
      display: block
      width: column(14,12)
      height: 200vh // To make sure it's high enough when window is small
      background-color: white
      right: -#{column(2,12)}
      top: 0

    .kms-content
      .button
        margin-top: 40px


    .dynamic-block
      &.full-text-block
        .content
          margin-left: 0
          text-align: left


  +respond-to-width(900)
    background-color: transparent

    .grid-row
      width: 100%
      +flex(flex-start, flex-start)
      +flex-rows

    .return-to-overview
      +order(1)
      +flex(flex-start, center)

    .dynamic-content
      +order(2)
      width: 100%
      padding: 40px column(1, 14)

      +respond-to-width(900)
        &::after
          display: none

    .show-sub-menu
      +order(3)
      background-color: $lightGrey
      width: 100%
      padding: 80px column(1, 14)

  &.overview-page
    +respond-to-width-beyond(900)
      background-color: $blue

    .background-image
      content: ''
      position: absolute
      top: 0
      right: -25%
      width: 50%
      height: 100%
      background-repeat: no-repeat
      background-position: right center
      background-size: cover

    .dynamic-content
      width: column(7, 12)

    +respond-to-width(900)
      .show-sub-menu
        //display: none
      .dynamic-content
        width: 100%
      .background-image
        display: none

  +respond-to-width(750)
    padding-top: 60px