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/SBogers75/roost-interieurbouw.nl/wwwroot/css/partials/subPartials/_references.sass
.reference-row
  background-color: $background
  padding-top: 120px
  position: relative


  .reference-text
    margin-left: $contentGrid
    background: white

    .title
      +font-bold(60px, 60px)
      color: $fontRed
      margin: 0
      padding: 48px $contentGrid
      width: $contentGrid*10
      height: 90px

    .content-container
      width: $contentGrid*10
      margin: auto
      p
        +font-default(22px, 28px)
  .reference-logo
    .reference
      width: $contentGrid*5
      margin: 24px ($contentGrid/2)
      float: left
      height: 100px
      line-height: 100px
      text-align: center

      img
        max-width: 280px
        max-height: 100px
        display: inline-block
        vertical-align: middle

  .reference-photo
    +position(absolute, calc(156px + 110px) $contentGrid null null)
    height: calc(100% - (156px + 110px))
    +flex(center, center)
    background: url('/images/structure/reference_image.jpg') no-repeat 50% 50%
    background-size: cover
    .border-animation-down
      +position(absolute, 0 0 null null)
      width: 10px
      height: 100%
      background: $darkRed
      +transition(all 0.5s)
      +transition-delay(1.5s)
      &.not-in-view
        height: 0

    .border-animation-left
      width: 100%
      float: right
      height: 10px
      background: $darkRed
      +position(absolute, null 0 0 null)
      +transition(all 0.5s)
      +transition-delay(2s)
      &.not-in-view
        width: 0

.border-animation-right
  width: calc(100% - (100%/12*5/12*5.8))
  z-index: 9
  height: 10px
  background: $darkRed
  +position(absolute, calc(156px + 110px) null null calc(((100%/12)*1) + ((100%/12)*5/12*1)))
  +transition(all 0.5s)
  +transition-delay(1s)
  &.not-in-view
    width: 0



+media-query(1640px)
  .reference-row
    .reference-logo
      .reference
        img
          max-width: 80%

+media-query(1400px)
  .reference-row
    .reference-logo
      .reference
        margin: 10px ($contentGrid/2)

+media-query(800px)
  .border-animation-right
    width: 100%
    left: 0
    z-index: 0

  .reference-row
    .reference-text, .reference-photo
      width: $contentGrid*10
      margin: auto $contentGrid

    .reference-photo
      display: none