File: D:/HostingSpaces/BVerhoeven/verhoevendak.nl/wwwroot/css/pages/_services-subpages.sass
body.service_roofing, body.service_insulation, body.service_renovation, body.service_slates, body.service_solarpanels
.services-content
.breadcrumb
margin: 105px 0 70px 0
&:after
content: ""
opacity: 0.5
top: 0
left: 0
bottom: 0
right: 0
position: absolute
z-index: -5
background: white url('/img/clouds_bg.jpg') no-repeat
.services-intro
padding: 0
height: 1400px
z-index: 1
.grid-row
.grid-col
vertical-align: top
h1
margin: 0 0 35px 0
color: $fontGray
svg
width: 48px
height: 36px
margin-right: 20px
.cls-1
stroke: $fontGray
.cls-2
stroke: $lightOrange
&.na-isolatie
> svg
.cls-1
stroke: $lightOrange
.cls-2
stroke: $fontGray
.text
font-size: 24px
line-height: 38px
padding-right: column(1.9)
margin-bottom: 80px
color: $fontLightGray
.first-img
width: 100%
padding-bottom: 42%
display: block
background-size: cover
margin-bottom: 90px
.second-img, .third-img
padding-bottom: 45%
background-size: cover
.third-img
width: column(6.2)
.diensten-menu
height: 740px
margin-top: 45px
.grid-col
vertical-align: top
display: flex
.button
width: 100%
font-size: 27px
height: 96px
margin-bottom: 0px
border: none
background: none
border-bottom: solid 2px rgba(0,0,0,0.08)
text-align: left
border-radius: 0
padding-left: 0
transition: all .25s ease-in-out
.icon-grid-view
background: url(/img/svg/icon-grid-view.svg)
width: 0
height: 34px
display: block
float: left
margin: 32px 0 0 -60px
transition: margin-left .25s ease-in-out
svg
width: 0
height: 36px
top: 30px
left: 0
transition: width .25s ease-in-out
.cls-1
stroke: $fontGray
.cls-2
stroke: $lightOrange
&.na-isolatie
> svg
.cls-1
stroke: $lightOrange
.cls-2
stroke: $fontGray
&.arrow:after
right: 0
&:before
margin: 0
content: ''
&:hover
color: $lightOrange
padding-left: 60px
border-bottom: solid 2px $lightOrange
transition: all .25s ease-in-out
&.arrow:after
background-position: -84px center
.icon-grid-view
width: 34px
svg
width: 48px
.button
margin-bottom: 30px
.right
position: relative
.big-hexagon-holder
position: absolute
bottom: 10%
left: 9%
z-index: -1
transform: rotate(15deg) scale(0.8)
.diensten-blok
//background: white url('/img/clouds_bg.jpg') no-repeat
padding-top: 128px
position: relative
h1
margin-bottom: 60px
line-height: 60px
text-align: center
.icon-holder
height: 645px
background-color: $fontGray
margin-left: column(0.5)
width: column(13)
z-index: 1
padding-top: 5px
.grid-row
height: 275px
.grid-col
padding: 90px 0 0 65px
text-align: center
color: white
width: column(4.45)
height: 100%
letter-spacing: 0.2px
h4
font-size: 28px
line-height: 62px
img
width: 55px
height: 70px
margin: 0 auto
p
font-size: 18px
line-height: 24px
margin-top: -8px
.button
top: 70px
.hexagon-frame
height: 100%
width: 100%
position: absolute
top: 0
overflow: hidden
z-index: 0
.big-hexagon-holder
left: 62.5%
position: relative
top: 25%
svg
transform: rotate(10deg) scale(1.1)
.st0
fill: url(#SVGID_1_)
.dienstenLink
width: 100%
font-size: 19px
line-height: 24px
text-align: center
padding: 67px 0 125px
a
color: $fontLightGray
text-decoration: none
border-bottom: solid 2px $fontLightGray
padding-bottom: 1px
.soorten-dakbedekking
background-color: $fontGray
position: relative
overflow: visible
font-size: 1em
line-height: 1.6em
height: 485px
margin-bottom: 165px
padding-top: 117px
color: white
.left
margin-left: column(1.2)
width: column(3.5)
h2
margin: 0 50px 75px 0
font-style: italic
font-size: 35px
line-height: 38.46px
letter-spacing: -0.35px
.imgHolder
width: 100%
padding-bottom: 95%
background-repeat: no-repeat
background-size: cover
.textholder
vertical-align: top
font-size: 18px
line-height: 28px
width: column(7)
.text
p
margin: 4px 0
a
color: rgba(white, 0.7)
&:hover
color: white
.imgholder
//width: column(7)
//margin-left: column(1)
vertical-align: bottom
height: 100%
background-size: cover
.dienstenLink
width: 100%
font-size: 18px
line-height: 28px
color: $fontLightGray
text-align: center
margin: -50px 0 120px 0
&:after
content: "-"
color: $darkOrange
font-weight: bold
display: block
margin: 18px
font-size: 32px
a
color: $fontLightGray
text-decoration: none
border-bottom: solid 2px $fontLightGray
padding-bottom: 1px
.call-to-action-contact
left: column(-1)
.uit-je-dak
.imgholder
width: 49.8%
float: right
+respond-to-width(840)
body.service_roofing, body.service_insulation, body.service_renovation, body.service_slates, body.service_solarpanels
padding-top: 120px
.services-content
.breadcrumb
margin-top: 0
margin-bottom: 20px
.services-intro
height: auto
margin-bottom: 80px
.grid-row
width: 100%
margin: 0
& > .col-4
display: none
.right
width: column(13)
margin-left: column(1)
.text
font-size: 18px
line-height: 30px
.full-row
margin: 0
width: 90%
.grid-col
.first-img
width: 90%
.soorten-dakbedekking
height: auto
padding: 50px 0
.left, .right
margin-left: 0
width: 100%
h2
margin-bottom: 55px
.imgHolder
padding-bottom: 50%
.textholder
width: 100%
margin-left: 0
.uit-je-dak
.textholder
a.button
min-width: 180px
height: 40px
font-size: 16px
line-height: 40px
+respond-to-width(760)
body.service_roofing, body.service_insulation, body.service_renovation, body.service_slates, body.service_solarpanels
.uit-je-dak
height: auto
padding: 10%
.textholder
width: 100%
margin: 0 5%
max-width: 90%
text-align: center
h1
margin: 10% 0
h2
p
font-size: 28px
line-height: 40px
a.button
font-size: 16px
line-height: 40px
.imgholder
display: none
+respond-to-width(435)
body.service_roofing, body.service_insulation, body.service_renovation, body.service_slates, body.service_solarpanels
padding-top: 90px
.services-intro
margin-bottom: 20px
.grid-row
.grid-col
h1
font-size: 1.7em
svg
width: 40px
height: 24px
margin-right: 14px
.right
.text
font-size: 16px
line-height: 24px
margin-bottom: 40px
.grid-col
.first-img,
.second-img,
.third-img
width: 90%
margin: 0
margin-bottom: 10px
float: none
pointer-events: none
.second-img,
.third-img
width: 100%
.soorten-dakbedekking
padding-top: 20px
margin-bottom: 0
.left
h2
margin: 0 50px 30px 0
font-size: 28px
.textholder
.text
p
font-size: 16px
line-height: 24px
.dienstenLink
display: none
.call-to-action-contact
margin-bottom: 0
padding-bottom: 0
left: 0
.grid-row
width: 100%
.cta-text
width: 100%
margin: 0
padding-bottom: 5%
h2, h4
padding-left: 30%
.round-portrait
left: 10%
.phone, .mail
height: 65px
img
height: 75%