File: D:/HostingSpaces/SBogers72/glashelder.pro/wwwroot/css/glashelder/_home.sass
section#home
padding-top: 75px
background-image: url(../img/audience.jpg)
background-size: cover
background-position: center center
background-repeat: no-repeat
height: 795px
+media($ipad-portrait)
background-size: auto 550px
background-position: top center
.content
+glashelder-outer-container()
h1
position: relative
font-size: 56px
line-height: 72px
font-family: $font-serif
color: $white
font-weight: normal
text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.55)
filter: progid:DXImageTransform.Microsoft.Shadow(color=#333333,direction=135)
top: 20px
+media($ipad-portrait)
top: 30px
font-size: 42px
line-height: 1.5em
a.button
text-decoration: none
position: relative
display: inline-block
background-color: $brand-secondary
color: $white
font-family: $font-sans
font-weight: bold
font-size: 18px
padding: 10px 20px
left: -10px
border-radius: 5px
text-shadow: 0px 0px 10px rgba(darken($brand-secondary, 10), 1)
+transition(background-color .3s)
&:hover
background-color: lighten($brand-secondary, 10)
&:after
content: ''
width: 20px
height: 20px
background-image: url(../img/icons/icon-more.svg)
display: inline-block
position: relative
margin-left: 45px
top: 3px
.floating-panel
background-color: $white
padding: 25px 50px
width: 100%
section#intro-text
margin-top: -315px
overflow: hidden
.content
+glashelder-outer-container()
.col-left
+span-columns(6)
+media($ipad-portrait)
+span-columns(12)
.inner
position: relative
box-sizing: content-box
padding-top: 40px
padding-left: 65px
padding-right: 2.5%
padding-bottom: 100px
left: -65px
width: 100%
background-color: $white
+clearfix
+media($ipad-portrait)
left: -40px
padding-left: 40px
padding-right: 40px
.text
display: table
width: 100%
p, h3
+span-columns(5 of 6)
+media($ipad-portrait)
+span-columns(12)
h3
color: $brand-tint
margin-bottom: 0
.item
display: block
width: 100%
+clearfix
margin-top: 2em
.icon
+span-columns(1 of 6)
width: 45px
+media($ipad-portrait)
display: none
.text
+span-columns(5 of 6)
+media($ipad-portrait)
+span-columns(12)
h3, p
margin: 0
padding: 0
color: $brand-tint
h3
letter-spacing: .075em
text-transform: uppercase
.col-right
+span-columns(6)
+media($ipad-portrait)
display: none
.title
position: relative
width: 310px
background-color: $brand-color
padding-left: 2.5%
left: -2.5%
margin-top: 40px
h2
margin: 0
color: $white
padding: 30px 60px
font-size: 20px
.referentie
position: relative
box-sizing: content-box
width: 100%
background-color: $brand-tint
padding: 40px 65px 40px 0px
border-bottom: 4px solid $brand-light
padding-left: 2.5%
left: -2.5%
&:last-child
border-bottom: none
h3, p
margin: 0
padding: 0
padding-left: 60px
h3
color: $white
font-family: $font-serif
p
color: $white
font-style: italic
section#intro-action
position: relative
margin-top: -50px
.content
width: 100%
max-width: 620px
margin: 0 auto
.nieuwsgierig
background-color: $brand-tint
max-width: 450px
width: 100%
padding: 35px 55px
h4, p, a
color: $white
margin: 0
padding: 0
font-family: $font-sans
text-decoration: none
h4
font-size: 20px
margin-bottom: 1em
.top-shadow
height: 10px
margin-top: -10px
background-image: url(../img/topshadow.png)
max-width: 536px
width: 100%
opacity: .5
.wall-of-fame-call
color: $white
font-family: $font-serif
font-style: italic
font-weight: normal
text-align: center
margin: 2em 0
.button-large
margin-bottom: 1em
.error-page
section#home
height: auto
max-height: 100%
background-attachment: fixed
+media($ipad-portrait)
background-size: auto
background-position: top center
.floating-panel
margin: 150px 0 150px 0
footer
padding-top: 25px
.arrow
display: none