File: D:/HostingSpaces/SBogers10/zuiderbos.komma.pro/wwwroot/css/partials/mobile/_footerLinks.sass
.footer-link-block
display: none
position: relative
font-size: 1.3rem
line-height: 1.6
letter-spacing: 0.4px
background-color: black
&:last-child
margin-right: 0
.placeholder
position: relative
+flex(flex-start, center)
+flex-rows
width: 100%
height: 100%
padding: 35px column(1, 12)
text-decoration: none
figure
+flex(center, center)
width: 60px
height: 60px
margin-right: 20px
border-radius: 100%
background-color: rgba(255,255,255,0.1)
&:before
content: ''
display: block
h4
margin: 0
font-size: 1rem
line-height: 1.4
color: white
opacity: 0.8
p
margin: 0
font-size: 0.85rem
font-style: italic
color: white
span
position: absolute
top: calc(50% - 5px)
right: column(1, 12)
display: inline-block
margin-left: 20px
+arrowWhite
+translate3d(0,0,0)
transition: transform 0.3s
&:hover
span
+translate3d(5px, 0, 0)
&.new-zuiderbos
background-color: $pink
.placeholder
figure
background-color: $lightPink
&:before
+sprite(-122px -128px, 27px, 26px)
&.latest-news
background-color: $darkBlue
.placeholder
figure
background-color: $bluer
&:before
+sprite(-95px -128px, 25px, 25px)
&.faq
background-color: $yellow
.placeholder
figure
background-color: $lightYellow
&:before
+sprite(-174px -128px, 12px, 24px)
&.academy
background-color: $globalBlue
.placeholder
figure
background-color: $servicesBlue
&:before
+sprite(-167px -390px, 28px, 25px)
&.education
background-color: $servicesBlue
.placeholder
figure
background-color: $globalBlue
&:before
+sprite(-135px -400px, 28px, 16px)
[class^="vso"] &
&.new-zuiderbos
background-color: $darkTurquoise
.placeholder
figure
background-color: $turquoise
&.latest-news
background-color: $blue
.placeholder
figure
background-color: $lightBlue
+respond-to-width(840)
display: block