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