File: D:/HostingSpaces/SBogers10/douven.komma.pro/resources/assets/sass/site/pages/_references.sass
/*==========================================================================
References page
========================================================================== */
html
body.references
.content
.refHeader
margin-top: 90px
h3
font-size: 26px
color: $douvBlue
margin-left: column(0.5, 12)
.refBlock
display: -ms-flexbox
display: -webkit-box
display: flex
height: auto
margin-bottom: 120px
background-color: white
color: $douvPurple
box-shadow: 15px 15px 40px 10px rgba(0, 0, 0, 0.05)
.left
width: column(3.5, 12)
height: auto
padding: 30px column(0.5, 12)
ul
list-style: none
padding: 0
margin: 0
margin-top: 28px
&.refs
+flex(space-between, center)
flex-wrap: wrap
li
flex-shrink: 0
width: 50%
text-align: center
color: #CED5D9
margin-bottom: 50px
position: relative
&.active
pointer-events: none
.ref-holder
background: url('/img/svg/refs_yellow.svg') no-repeat left top
background-size: 370px
&:hover
.ref-holder
background: url('/img/svg/refs_blue.svg') no-repeat left top
background-size: 370px
&.ref-pinkpop
.ref-holder
background-position: -110.5px -191px
.ref-holder
display: inline-block
width: 125px
height: 71px
background: url('/img/svg/refs.svg') no-repeat left top
background-size: 370px
cursor: pointer
&.ref-rock-werchter
.ref-holder
background-position: 27.5px top
&.ref-pukkelpop
.ref-holder
background-position: -115.5px top
&.ref-bospop
.ref-holder
background-position: -259.5px top
&.ref-moulin-blues
.ref-holder
background-position: 27.5px -111px
&.ref-pinkpop
.ref-holder
background-position: -110.5px -111px
&.active
.ref-holder
background-position: -110.5px -191px
&.ref-intents
.ref-holder
background-position: -250px -111px
&.ref-bavaria
.ref-holder
background: url('/img/svg/referenties/bavaria.svg') no-repeat left top
background-size: 290px
background-position: -85px 0px
&:hover
background-position: 20px 0px
&.active
.ref-holder
background-position: -195px 0px
&.ref-freshgrooves
.ref-holder
background: url('/img/svg/referenties/fresh-grooves.svg') no-repeat left top
background-size: 370px
background-position: -128px 0px
&:hover
background-position: 10px 0px
&.active
.ref-holder
background-position: -266px 0px
.right
width: column(8.5, 12)
height: auto
z-index: 0
overflow: visible
.refItem
position: absolute
display: block
opacity: 0
transition: opacity 0.3s
height: 100%
width: 100%
z-index: 0
+flex(space-between, flex-start)
&.active
position: relative
opacity: 1
z-index: 5
.quoteHolder
width: column(3, 8.5)
padding: 0 column(0.5, 8.5)
height: 100%
min-height: 750px
background: $douvBlue url('/img/bg_repeat.png') repeat
.quote
position: absolute
display: block
width: 100%
height: 100%
min-height: 750px
opacity: 0
font-size: 16px
line-height: 26px
letter-spacing: 0.08px
padding: 60px 0
color: white
transition: opacity 0.3s
&.active
position: relative
opacity: 1
h2
margin: 0
margin-bottom: 50px
font-weight: bold
font-size: 30px
letter-spacing: -0.15px
color: #E8F0F4
blockquote
position: relative
margin: 0
padding: 0
&:before
content: "\201C"
font-family: 'Open Sans', sans-serif
font-weight: bold
font-size: 28px
color: #F0B833
position: absolute
top: 0
left: -0.8em
&:after
content: "\201D"
font-family: 'Open Sans', sans-serif
font-weight: bold
font-size: 28px
color: #F0B833
position: absolute
bottom: -0.8em
right: -0.8em
.imgHolder
width: column(5.5, 8.5)
height: 750px
max-height: 750px
background-color: $douvLightGray
background-size: cover
background-repeat: no-repeat
.refLink
position: absolute
bottom: 0
z-index: 10
right: -25%
min-width: 180px
border-radius: 0
html.ie
body.references
.content
.refBlock
.left
ul
&.refs
li
&.active, &:hover
.ref-holder
background-size: 460px
&.ref-rock-werchter
.ref-holder
background-position: 27.5px -12.5px
&.active, &:hover
.ref-holder
background-position: -20px 0
&.ref-pukkelpop
.ref-holder
background-position: -115.5px -12.5px
&.active, &:hover
.ref-holder
background-position: -160.5px 1px
&.ref-bospop
.ref-holder
background-position: -259.5px -12.5px
&.active, &:hover
.ref-holder
background-position: -303px 2px
&.ref-moulin-blues
.ref-holder
background-position: 27.5px -125px
&.active, &:hover
.ref-holder
background-position: -20px -111.5px
&.ref-pinkpop
.ref-holder
background-position: -110.5px -125px
&.active, &:hover
.ref-holder
background-position: -155.5px -190px
&.ref-intents
.ref-holder
background-position: -246px -126px
&.active, &:hover
.ref-holder
background-position: -290px -111px
+respond-to-width(1440)
html
body.references
.content
.refHeader
margin-top: 0
padding: 0 column(0.5, 12)
color: $douvBlue
background-color: white
.refBlock
display: block
padding-left: 0
padding-right: 0
margin-bottom: 0
.left, .right
width: 100%
.left
height: 30%
padding-bottom: 0
ul.refs
li
width: 15%
.right
height: 70%
.refItem
padding-left: 0
padding-right: 0
+respond-to-width(840)
html
body.references
.content
.refBlock
height: auto
.left
height: 35%
padding-bottom: 0
ul.refs
li
width: 33%
margin-bottom: 25px
.right
height: 65%
.refItem
display: block
transition: height 0.3s
.quoteHolder
width: 100%
height: auto
min-height: 30%
transition: height 0.3s
.quote
position: relative
opacity: 1
width: 100%
height: auto
min-height: auto
margin-bottom: 30px
transition: opacity 0.3s
padding: column(0.5, 8.5) 0
.refLink
bottom: -30px
right: -7%
.imgHolder
width: 100%
+respond-to-width(435)
html
body.references
.content
.refBlock
.left
ul.refs
li
width: 50%