File: D:/HostingSpaces/SBogers84/zuiderbos.nl/wwwroot/css/partials/landingspage/_servicesSelection.sass
.services-selection
text-align: center
margin-bottom: 100px
> .grid-col
background-color: $servicesGray
+flex(flex-start, center)
position: relative
height: 240px
margin: 0 auto
padding: 0
text-decoration: none
transition: background-color 0.3s
.logo
+flex(center, center)
height: 240px
width: 25%
background-color: $globalBlue
&:after
content: ''
display: inline-block
+sprite(-205px -220px, 100px, 205px)
a
text-align: left
position: relative
width: 25%
height: 100%
padding: 0 40px 0 30px
color: white
font-size: 1.3rem
text-decoration: none
line-height: 1.3
font-weight: bold()
+flex(space-between, center)
background: linear-gradient(to right, rgba(0, 0, 0, 0.025), rgba(0, 0, 0, 0.0))
&:hover
background-color: darken($servicesGray, 5%)
span
+translate3d(15px,0,0)
//a
// text-decoration: none
// color: white
sub
display: block
opacity: 0.7
font-size: 1rem
font-weight: regular()
span
position: absolute
right: 30px
top: 60px
+sprite(-95px -365px, 40px, 31px)
+translate3d(0,0,0)
transition: transform 0.3s
+respond-to-width(1300)
+arrowWhite
top: 75px
+respond-to-width(350)
display: none
+respond-to-width(1400)
width: column(11, 12)
// width: column(7, 12)
//
//+respond-to-width(1000)
// width: column(11, 12)
+respond-to-width(840)
margin: 0 auto 20px
width: 100%
> .grid-col
width: 100%
.logo
display: none
a
width: 33%
p
width: 100%
+respond-to-width(600)
> .grid-col
height: auto
width: 100%
display: block
a
width: 100%
height: auto
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.025), rgba(0, 0, 0, 0.0))
p
text-align: center