File: D:/HostingSpaces/BVerhoeven/verhoevendak.nl/wwwroot/css/partials/home/_home.sass
body.home
h1
font-style: italic
font-weight: bold
font-size: 40px
line-height: 38.46px
letter-spacing: -0.2px
margin: 45px 0
color: $fontGray
p
font-size: 18px
line-height: 28px
.home-header
.logo
display: none
.home-vid-container, .home-img-container
position: relative
height: 31vw
max-height: 625px
z-index: 0
background: url("/img/header-img.jpg") no-repeat
background-size: cover
background-position: top center
&:before
content: ''
display: none
width: 100%
height: 31vw
background: url("/img/header-img.jpg") no-repeat
background-size: cover
background-position: center center
.home-img
position: absolute
top: 0
left: 0
width: 100%
height: 100%
.header-hexagon
.overlay-hexagon
color: white
width: column(4, 12)
height: 56vw
max-height: 832px
margin-top: 12vw
padding: 10% 4% 0 4%
background: transparent url("/img/svg/overlay-hexagon.svg") no-repeat -9px top
background-size: 105%
z-index: 1
h2
font-size: 145%
line-height: 130%
font-style: italic
//+respond-to-width-beyond(2050)
// font-size: 37px
p
font-size: 100%
line-height: 150%
letter-spacing: -0.18px
.text
height: 66%
.bottom
width: 100%
height: 53px
display: flex
align-items: center
flex-direction: column
.scroll-hinter
position: static
width: 30%
height: 0
svg
position: relative
.button
margin: 0 20%
top: -55px
min-width: unset
width: 75%
max-width: 70%
.home-vid-container
display: block
position: relative
height: 0
padding-bottom: 31%
//padding-left: column(1)
z-index: 0
background-color: #2e2e2e
#video
width: 100%
padding-bottom: 31%
position: absolute
left: 0
top: 0
iframe
position: absolute
z-index: 1
left: 0
top: 0
height: 100%
width: 100%
transition: opacity 0.8s
.home-intro
padding: 40px 0
min-height: 500px
background-color: #F9F9FA
.grid-row
.grid-col
width: column(7, 12)
.video-wrapper
width: 100%
margin-bottom: 50px
#video
position: relative
width: 100%
padding-bottom: 56.25%
iframe
position: absolute
left: 0
top: 0
display: block
width: 100%
height: 100%
.text
max-width: 625px
p
color: #546E7A
.tel
position: relative
z-index: 1
&:before
content: ''
+blackPhoneIcon
margin: 0 6px 0 0
+translate3d(0,0,0)
.home-diensten-menu
height: 838px
.diensten-menu
.grid-col
a
flex-basis: 46%
flex-grow: 0
margin-right: 4%
h1
margin: 70px 0 77px 0
.home-projecten
position: relative
&:after
content: ""
opacity: 0.5
top: 0
left: 0
bottom: 0
right: 0
width: 100%
z-index: -1
position: absolute
background: white url('/img/clouds_bg.jpg') no-repeat
-moz-transform: scaleX(-1) scaleY(-1)
-o-transform: scaleX(-1) scaleY(-1)
-webkit-transform: scaleX(-1) scaleY(-1)
transform: scaleX(-1) scaleY(-1)
h1
color: white
margin: 3.41% 0
> .grid-row
position: relative
.grid-col
position: relative
overflow: visible
z-index: 1
img
width: 100%
.nieuwbouw, .renovatie
vertical-align: top
h1
position: absolute
top: 17%
left: -15%
z-index: 20
color: white
border-bottom: solid 10px #396EC2
transition: transform 0.2s
img
transition: transform 0.2s
&:hover
h1, img
+transform(scale(1.01))
.nieuwbouw
margin-right: 2%
.hexagon-frame
position: absolute
top: 0
z-index: 0
height: 75%
width: 100%
overflow: hidden
background: linear-gradient(-90deg, $lightOrange 0%, $darkOrange 100%)
box-shadow: 0 5px 10px rgba(0,0,0,0.1)
.big-hexagon-holder
left: 38.5%
position: relative
top: -10%
svg
+spinLeftAnimation('spin3', 1.1)
-webkit-animation: spin3 360s linear infinite
animation: spin3 360s linear infinite
-webkit-backface-visibility: hidden
.projectenLink
width: 100%
font-size: 18px
line-height: 24px
text-align: center
padding: 155px 0 149px
&: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
&:hover
color: $lightOrange
border-bottom: solid 2px $lightOrange
.home-referenties
background-color: $darkOrange
height: auto
//padding-bottom: 28.57%
position: relative
z-index: 1
box-shadow: 0 5px 10px rgba(0,0,0,0.15)
.references-text
margin-left: column(1.9)
max-width: column(3.5)
vertical-align: top
padding-top: 4.5%
h2
color: white
font-style: italic
font-size: 32px
margin-bottom: 30px
line-height: 42px
p
color: white
font-style: italic
font-size: 32px
margin-bottom: 30px
line-height: 42px
a
font-size: 18px
line-height: 28px
letter-spacing: -0.36px
padding-top: 12px
.references-imgHolder
margin-left: column(1.6)
figure
display: block
width: 100%
height: 0
padding-bottom: 47.1%
padding-top: 10%
margin: 0
background-repeat: no-repeat
background-size: cover
.diensten-blok
background: white url('/img/clouds_bg.jpg') no-repeat
padding-top: 128px
position: relative
h1
margin: 0 auto
margin-bottom: 60px
line-height: 55px
text-align: center
position: relative
z-index: 2
.icon-holder
height: 645px
background-color: $fontGray
margin-left: column(0.5)
width: column(13)
z-index: 2
padding-top: 5px
box-shadow: 0px 5px 10px rgba(0,0,0,0.2)
.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: 25px
line-height: 30px
padding-bottom: 16px
padding-top: 10px
img
width: 55px
height: 70px
margin: 0 auto
p
font-size: 16px
line-height: 28px
margin-top: -8px
.button
margin-top: 70px
font-size: 18px
line-height: 28px
letter-spacing: -0.36px
padding-top: 12px
.hexagon-frame
height: 100%
width: 100%
position: absolute
top: 0
overflow: hidden
z-index: 0
.big-hexagon-holder
left: 62.5%
position: relative
top: 20%
svg
+spinRightAnimation('spin4', 1.1)
-webkit-animation: spin4 360s linear infinite
animation: spin4 360s linear infinite
-webkit-backface-visibility: hidden
.st0
fill: url(#SVGID_1_)
.dienstenLink
width: 100%
font-size: 18px
line-height: 24px
text-align: center
padding: 67px 0 125px
color: #616161
position: relative
z-index: 2
&: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
&:hover
color: $lightOrange
border-bottom: solid 2px $lightOrange
.call-to-action-contact
margin-bottom: 150px
&:after
background: none
body.IE
.home-vid-container, .home-img-container
.header-hexagon
.overlay-hexagon
padding-top: 13%
+respond-to-width-beyond(1025)
body.home
.home-vid-container, .home-img-container
.header-hexagon
.overlay-hexagon
h2
font-size: 100%
line-height: 150%
p
font-size: 65%
line-height: 158%
+respond-to-width-beyond(1230)
body.home
.home-vid-container, .home-img-container
.header-hexagon
.overlay-hexagon
h2
font-size: 120%
p
font-size: 80%
line-height: 160%
.button
margin: 0 15%
+respond-to-width-beyond(1390)
body.home
.home-vid-container, .home-img-container
.header-hexagon
.overlay-hexagon
h2
font-size: 136%
p
font-size: 90%
+respond-to-width-beyond(1520)
body.home
.home-vid-container, .home-img-container
.header-hexagon
.overlay-hexagon
//h2
// font-size: 100%
// line-height: 150%
//p
// font-size: 1vw
// line-height: 1.5vw
.button
margin: 0 100px
+respond-to-width(1120)
body.home
.home-vid-container, .home-img-container
.header-hexagon
.overlay-hexagon
.button
//top: -145px
margin: 0 12%
.home-diensten-menu
height: 930px
.diensten-menu
.grid-col
a
flex-basis: 100%
flex-grow: 0
margin-right: 0
margin-bottom: 40px
line-height: 80px
.home-projecten
.hexagon-frame
.big-hexagon-holder
> svg
width: 60%
+respond-to-width(1025)
body.home
.home-vid-container, .home-img-container
position: relative
height: auto
max-height: none
background: none
&:before
display: block
#video
padding-bottom: 56vw
.header-hexagon
position: relative
top: -1px
background-color: $fontGray
padding: 0 column(1, 11) 5% column(1, 11)
width: 100%
//height: 35vw
.overlay-hexagon
position: static
width: 100%
max-width: 100%
background: none
height: auto
margin-top: 0
padding: 4%
h2
width: 100%
margin: 20px 0
padding: 0 2%
position: static
max-width: 100%
font-size: 28px
line-height: 40px
p
position: static
width: 95%
padding: 0 2%
max-width: 100%
margin-bottom: 30px
font-size: 18px
line-height: 28px
.bottom
display: block
.button
font-size: 18px
margin: 0 2%
top: 0
max-width: unset
width: auto
min-width: 247px
.scroll-hinter, .overlay-hexagon-holder
display: none
.overlay-hexagon-holder
> svg
display: none
.home-intro
padding: 20px 0 60px 0
height: auto
.grid-row
.offset-5
padding: 0 column(1, 12) 5% column(1, 12)
width: 100%
margin-left: 0
.home-referenties
h2
p
font-size: 22px
margin-bottom: 30px
line-height: 36px
.references-text
padding-top: 3.5%
.content
a.button
padding-top: 8px
min-width: 180px
//height: 45px
.diensten-blok
.icon-holder
.grid-row
.grid-col
.button
top: 90px
font-size: 16px
line-height: 20px
.dienstenLink
padding: 90px 0 60px
+respond-to-width(840)
body.home
.home-vid-container, .home-img-container
&:before
height: 45vw
.header-hexagon
.overlay-hexagon
p
width: 95%
.home-vid-container, .home-img-container
.overlay-hexagon
top: 100%
padding: 2% 12%
color: white
width: 100%
max-width: unset
height: 200px
display: block
position: absolute
background-color: $fontGray
left: 0
h2
width: 100%
h1
font-size: 32px
.home-diensten-menu
height: auto
padding: 10% 0
h1
margin-top: 0
.diensten-menu
.grid-col
a
height: 80px
font-size: 18px
svg
width: 40px
left: 30px
top: 10px
.bg
width: 80px
height: 80px
left: 10px
top: 10px
.home-projecten
.projectenLink
padding: 155px 0 90px
.hexagon-frame
box-shadow: none
.home-referenties
.references-text
padding-top: 0
a
padding-top: 12px !important
.content
a.button
min-width: 180px
//height: 40px
font-size: 14px
line-height: 26px
.diensten-blok
.icon-holder
.grid-row
.grid-col
padding: 90px 0 0 24px
vertical-align: top
h4
font-size: 20px
line-height: 26px
p
font-size: 14px
margin-top: 0
a.button
min-width: 165px
height: 40px
font-size: 14px
line-height: 16px
top: 41%
&.arrow
padding-right: 45px
.dienstenLink
padding: 90px 0 60px
+respond-to-width(760)
body.home
.home-projecten
.grid-row
padding-bottom: 5%
height: auto
width: 100%
background: linear-gradient(-90deg, $lightOrange 0%, $darkOrange 100%)
.grid-col
width: 90%
margin-top: 10%
h1
top: 0
left: 0
font-size: 26px
padding-left: column(1,12)
.renovatie
margin-left: 0
.hexagon-frame
height: 50%
bottom: 0
background: none
.home-referenties
height: auto
padding: 10%
.references-text
width: 100%
margin: 0 5%
max-width: 90%
text-align: center
h2
p
font-size: 28px
line-height: 40px
a.button
font-size: 22px
line-height: 24px
.references-imgHolder
display: none
.diensten-blok
h1
padding: 3%
.icon-holder
height: auto
width: 100%
margin-left: 0
.grid-row
height: auto
width: 100%
.grid-col
width: 100%
text-align: left
padding: 50px 0 40px column(1)
border-bottom: solid 1px lightgray
&:last-child
border-bottom: none
img
float: left
h4
font-size: 18px
float: left
width: 70%
margin-left: 10%
padding-top: 0
p
float: left
width: 70%
margin-left: 10%
a.button
font-size: 16px
line-height: 20px
padding-top: 12px
min-width: 180px
height: 40px
margin: 20px 0
&.arrow
padding-right: 52px
+respond-to-width(520)
body.home
.home-diensten-menu
height: auto
.diensten-menu
.grid-col
a:before
margin-right: 40%
+respond-to-width(435)
body.home
h1
font-size: 24px
line-height: 28px
p
font-size: 16px
line-height: 24px
.home-header
.logo
padding-top: 15px
height: 80px
.home-vid-container, .home-img-container
background-size: contain
background-position: center -65px
.home-diensten-menu
h1
margin-bottom: 10%
.grid-row
.col-11
width: 100%
margin-left: 0
a
height: 70px
line-height: 70px
padding-top: 0
&:before
margin-right: 30%
svg
left: 18px
width: 35px
top: 0
.bg
width: 70px
height: 70px
left: 0
top: 0
.home-vid-container, .home-img-container
.header-hexagon
padding: 5% 0
.overlay-hexagon
h2
font-size: 24px
line-height: 28px
margin-top: 0
p
font-size: 16px
line-height: 24px
.home-intro
padding: 0
.grid-row
width: 100%
.offset-5
padding: 10% 5%
h1
margin-top: 0
.home-projecten
.grid-row
padding-bottom: 0
.grid-col
width: 100%
margin-left: 0
margin-top: 4%
overflow: hidden
.nieuwbouw,
.renovatie
height: 200px
overflow: hidden
.renovatie
margin-top: 0
.projectenLink
display: none
.home-referenties
.references-text
a
padding-top: 14px !important
&.button
font-size: 18px
.diensten-blok
padding-top: 0
h1
margin-bottom: 0
color: white
background-color: $fontGray
.icon-holder
.grid-row
.grid-col
padding: 30px 0 20px column(1)
&:first-child
border-top: solid 1px lightgray
&:last-child
padding: 20px 0 20px column(1)
img
width: 40px
.dienstenLink
display: none
.call-to-action-contact
margin-bottom: 0
padding-bottom: 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%