File: D:/HostingSpaces/BVerhoeven/verhoevendak.nl/wwwroot/css/pages/_contact.sass
/*==========================================================================
Contact page
========================================================================== */
.contact-content
overflow: hidden
&: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
.grid-row
.grid-col
vertical-align: top
.breadcrumb
margin: 88px 0 0 0
.intro
padding-top: 70px
padding-bottom: 80px
border-bottom: solid 1px rgba(0,0,0,0.1)
h1, h2
font-style: italic
color: $fontGray
h1
font-size: 40px
line-height: 50px
letter-spacing: -0.2px
margin: 27px 0 55px 0
h2
font-size: 24px
h3
font-size: 24px
color: $lightOrange
font-style: italic
p
font-size: 24px
line-height: 34px
color: $fontLightGray
.right
margin-left: column(2.7)
overflow: visible
.grid-col
overflow: visible
padding-bottom: 100%
h2, h3
font-size: 24px
line-height: 30px
letter-spacing: -0.24px
.round-portrait
width: 150%
height: 65%
border-radius: 50%
position: absolute
left: -50%
top: -10%
overflow: hidden
z-index: 10
box-shadow: 0 3px 6px rgba(0,0,0,0.1)
figure
height: 100%
background-size: cover
background-position: center center
.scroll-hinter
top: 132%
left: 28%
width: 33%
height: 0
.icon
top: 0
.icon .mouse-body,
.icon .mouse-wheel,
.icon .arrow
fill: #E0E0E0
.formholder
padding-bottom: 30px
position: relative
clear: both
.letterholder
.footerletter
color: $lightOrange
font-weight: bold
margin-right: 5px
width: 40px
display: inline-block
a
text-decoration: none
color: $fontGray
&:hover
color: $fontLightGray
.form, h2
max-width: 100%
padding-top: 75px
label
font-size: 10px
line-height: 30px
text-transform: uppercase
color: #757575
top: 0
position: absolute
margin: -30px 0 0 0
div.first_name, div.last_name,
div.email, div.phone
width: 48%
div.extra_message
clear: both
.form-element
margin-bottom: 72px
position: relative
input, textarea
border: none
background-color: #EEEEEE
border-left: solid 10px #CCCCCC
&:focus
border-left: solid 10px $lightOrange
+ label
color: $lightOrange
&.alert
border-left: solid 10px #EF5350
input
height: 55px
textarea
height: 275px
.submit
border-radius: 11px
max-width: 250px
font-size: 18px
line-height: 28px
letter-spacing: -0.36px
p
position: relative
padding: 15px 18px
&:after
position: absolute
right: 10%
top: 17%
width: 14px
font-weight: bold
font-size: 31px
content: '\003e'
+transform(scale(0.6,1))
.big-hexagon-holder
position: absolute
right: -10%
bottom: -11%
transform: rotate(22deg) scale(1.15)
z-index: -1
svg
.st0
fill: url(#SVGID_1_)
h4
font-size: 22px
line-height: 30px
letter-spacing: -0.22px
color: $fontGray
padding: 0 45% 0 0
font-weight: bold
margin: 62px 0
.mapholder
height: 47.4vw
max-height: 550px
background-color: $fontGray
.headerholder
margin-left: column(2)
font-size: 22px
line-height: 46px
letter-spacing: -0.36px
font-style: italic
color: white
display: table
height: 100%
h1
display: table-cell
vertical-align: middle
#map
height: 47.4vw
max-height: 550px
.referencesLink
width: 100%
font-size: 18px
line-height: 28px
color: $fontLightGray
text-align: center
margin: 133px 0 95px 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
&:hover
color: $lightOrange
border-bottom: solid 2px $lightOrange
+respond-to-width(1025)
.contact-content
a.button
min-width: 180px
height: 40px
font-size: 14px
line-height: 40px
.formholder
.big-hexagon-holder
transform: rotate(22deg) scale(1)
+respond-to-width(840)
.contact-content
.breadcrumb
margin-top: 40px
.intro
padding-bottom: 40px
margin-bottom: 60px
.right
height: 200px
float: none
margin-left: column(1, 12)
.left
width: 100%
h1
margin: 27px 0
br
display: none
.formholder
.left, .right
width: 100%
.left
.textholder
float: left
.letterholder
width: 45%
float: right
h4
margin: 0
padding: 0
.big-hexagon-holder
transform: rotate(22deg) scale(0.8)
.mapholder
.headerholder
font-size: 16px
+respond-to-width(760)
.contact-content
.intro
padding-bottom: 18px
.right
width: 100%
.grid-col
.round-portrait
width: 90%
height: 40%
left: 0
top: -5%
.left
h1
font-size: 36px
margin: 27px 0 10px 0
p
font-size: 18px
.formholder
.left
.textholder, .letterholder
float: none
width: 100%
.form
div.first_name, div.last_name, div.email, div.phone
width: 100%
.mapholder
height: auto
padding-bottom: 0
.headerholder
font-size: 14px
width: 100%
margin-left: 0
padding: 10% 5%
#map
float: none
width: 100%
padding-bottom: 70%
.referencesLink
margin: 45px 0 35px 0
.uit-je-dak
.textholder
a.button
font-size: 16px
line-height: 40px
+respond-to-width(435)
.contact-content
.intro
h1
font-size: 26px
margin: 5%
.right
float: none
margin-left: 0
height: 100px
.grid-col
float: none
.left
h1
font-size: 26px
line-height: 1.6em
p
font-size: 16px
line-height: 24px
.formholder
h4
margin-bottom: 20px
.left
font-size: 16px
line-height: 24px
.mapholder
background-color: transparent
.headerholder
color: $fontGray
padding: 5%
.referenties
display: none
.referencesLink
display: none