File: D:/HostingSpaces/BVerhoeven/verhoevendak.nl/wwwroot/css/pages/_contractors.sass
/*==========================================================================
Main page
========================================================================== */
body.contractors
.contractors-content
position: relative
&:after
content: ""
opacity: 0.5
top: 0
left: 0
bottom: 0
right: 0
height: 40%
position: absolute
z-index: -1
background: white url('/img/clouds_bg.jpg') no-repeat
.top
position: relative
overflow: visible
font-size: 1em
line-height: 1.6em
height: 0
padding-bottom: 73%
padding-top: 65px
+respond-to-width-beyond(1400)
padding-bottom: 1024px
.textholder
vertical-align: top
font-size: 18px
line-height: 28px
color: $fontLightGray
overflow: visible
h1
margin-top: 41%
font-style: italic
font-size: 40px
line-height: 38.46px
letter-spacing: -0.2px
color: $fontGray
margin-bottom: 50px
.text
margin-bottom: 60px
font-size: 18px
line-height: 28px
color: $fontLightGray
.imgholder
vertical-align: bottom
max-height: 400px
overflow: visible
z-index: 5
figure
width: 100%
margin-top: 80px
background-size: cover
background-position: bottom center
max-height: 700px
display: block
padding-bottom: 130%
.big-hexagon-holder
display: block
bottom: 360px
overflow: visible
position: relative
left: -344px
z-index: -1
> svg
transform: rotate(30deg) scale(0.4)
> .st0
fill: url(#SVGID_1_)
.scroll-hinter
position: relative
z-index: 35
bottom: 660px
left: -120px
width: 130px
.keurmerk
margin-top: 110px
margin-bottom: 150px
height: 650px
position: relative
.imgholder
margin-left: column(1.7)
z-index: 2
padding-bottom: 3%
img
box-shadow: 0 5px 5px 0px rgba(0,0,0,0.1)
margin-bottom: 50px
.textholder
margin-left: column(-1.1)
padding: 6% 9% 6.5% column(2.3)
background: linear-gradient(-90deg, $lightOrange 0%, $darkOrange 100%)
box-shadow: 0 5px 5px 0px rgba(0,0,0,0.1)
z-index: 1
h1
font-style: italic
font-size: 35px
line-height: 38.46px
letter-spacing: -0.35px
color: #FFFFFF
p
padding-top: 23px
font-size: 18px
line-height: 28px
color: #FFFFFF
.big-hexagon-holder
position: relative
right: -50%
top: -44%
z-index: 0
width: 10%
+spinLeftAnimation('spin1', 0.16)
-webkit-animation: spin1 360s linear infinite
animation: spin1 360s linear infinite
-webkit-backface-visibility: hidden
svg
width: 50%
.contact
background-color: $fontGray
height: 450px
color: white
padding-top: 72px
box-shadow: 0 5px 5px 0px rgba(0,0,0,0.1)
position: relative
.grid-col
vertical-align: top
.titleholder
margin-left: column(2)
padding-right: 50px
h1
margin-top: 12px
font-style: italic
font-size: 35px
line-height: 38.46px
letter-spacing: -0.35px
.textholder
color: white
//margin-left: column(0.95)
p
font-size: 18px
line-height: 28px
padding-bottom: 12px
.big-hexagon-holder
position: absolute
left: -1.5%
bottom: -64%
z-index: -1
+spinRightAnimation('spin2', 0.32)
-webkit-animation: spin2 360s linear infinite
animation: spin2 360s linear infinite
-webkit-backface-visibility: hidden
> svg
width: 100%
> .st0
fill: url(#SVGID_1_)
.reference-linkholder
text-align: center
margin: 90px 0 60px 0
font-size: 18px
line-height: 28px
a
text-decoration: none
color: $fontLightGray
padding-bottom: 1px
border-bottom: solid 2px
&:hover
color: $lightOrange
border-bottom: solid 2px $lightOrange
.yellowline
width: 10px
height: 10px
margin: 20px 0
display: inline-block
border-bottom: solid 2px $lightOrange
.uit-je-dak
.imgholder
position: absolute
//.uit-je-dak
// background: linear-gradient(-90deg, $lightOrange 50%, $darkOrange 100%)
// position: relative
// overflow: visible
// font-size: 1em
// line-height: 1.6em
// height: 0
// padding-bottom: 28.57%
// box-shadow: 0px 5px 10px rgba(0,0,0,0.1)
//
// .textholder
// vertical-align: top
// letter-spacing: 0.2px
// margin-left: column(1.95)
//
// h1
// margin: 20% 0 10% 0
// font-style: italic
// font-size: 30px
// line-height: 42px
// letter-spacing: -0.3px
// color: white
//
// .imgholder
// width: column(7)
// margin-left: column(1)
// vertical-align: bottom
// background-size: cover
// display: block
// height: 0
// padding-bottom: 18.55%
// padding-top: 10%
/* Mobile view
========================================================================== */
+respond-to-width(1025)
body.contractors
.top
.textholder
h1
margin-top: 34%
font-size: 30px
p
font-size: 15px
line-height: 25px
.big-hexagon-holder, .scroll-hinter
display: none
.keurmerk
.imgholder
padding-bottom: 15%
.textholder
//padding: 5% 9% 6.5% column(2.3)
.contractors-content
a.button
min-width: 180px
height: 40px
font-size: 14px
line-height: 40px
+respond-to-width(840)
body.contractors
.top
.breadcrumb
margin-bottom: 75px
.textholder
h1
margin-top: 0
.imgholder
img
margin-top: 0
.contractors-content
a.button
min-width: 180px
height: 40px
font-size: 14px
line-height: 40px
.contact
.titleholder, .textholder
width: 75%
margin-left: column(2)
+respond-to-width(760)
body.contractors
.top
height: auto
padding-bottom: 0
padding-top: 35px
.imgholder
figure
margin-top: 0
.breadcrumb
margin-bottom: 0
margin-left: 0
.textholder
width: 100%
margin-left: 0
margin-bottom: 50px
h1
margin-top: 10%
.imgholder
width: 100%
max-height: none
margin-bottom: 50px
.keurmerk
height: auto
width: 100%
margin: 110px 0 0 0
.big-hexagon-holder
display: none
.textholder
width: 100%
margin-left: 0
padding: 6% 9%
.imgholder
width: 100%
background: linear-gradient(-90deg, $lightOrange 0%, $darkOrange 100%)
margin-left: 0
padding: 9% 0 0 9%
img
margin-bottom: 0
float: left
width: 40%
margin-right: 10%
.contact
height: auto
padding: 72px 0
.titleholder, .textholder
width: 85%
margin-left: column(1)
+respond-to-width(435)
body.contractors
.top
.textholder
h1
font-size: 26px
margin: 5% 0
.text
margin-bottom: 30px
.imgholder
float: none
width: column(14, 12)
position: relative
margin-left: column(-1, 12)
margin-bottom: 0
.keurmerk
margin: 0
.textholder
h1
font-size: 26px
margin: 5% 0
p
font-size: 16px
line-height: 24px
.contact
padding: 15px 0px 45px 0
.titleholder
h1
font-size: 26px
margin: 5% 0
.textholder
p
font-size: 16px
line-height: 24px
.referenties
display: none