colours
Main Text: #323232
blue: #009AC5
dk-blue: #0075A9
pink: #ed54a7
light-grey: #F2F2F2Type
p
font-family: Lato
color: #111
font-size: 17px
font-weight: 400
line-height: 1.6
margin-top: 0px
h1, h2, h3, h5, h6
font-family: Effra
font-weight: 500
h1
font-size: 45px
line-height: 1.05
letter-spacing: 0px
font-weight: 300
margin-bottom: 0.2em
h2
font-size: 28px
line-height: 1.2
margin-bottom: 0.4em
font-weight: 300
h3
font-size: 22px
line-height: 1.38
margin-bottom: 1.2em
margin-top: 0px
h4
font-size: 18px
line-height: 1.38
font-weight: 400
h5
font-size: 16px
line-height: 1.38
margin-bottom: 1.2em
h6
font-size: 14px
.font–s (smaller)
font-size: 14px
line-height: 1.2
.font–l (lighten font)
color: #aaa
.font–b (make font bold)
font-weight: 700
blockquote, q
.drop-cap (georgia)
.drop-cap-2 (baskerville)
Wraps
.wrap
width: 100%
.wrap–x-sm
padding: 10px 0px
.wrap–sm
padding: 50px 0px
.wrap–med
padding: 100px 0px
.wrap–lg
padding: 200px 0px
.wrap–fixed
height: 400px
.bg-grey
background: grey
.bg-pink
background: pink
.bg-blue
background: blue
.bg-blue-dark
background: dark blue
Structure
.container
max-width: 1200px
.width-700 (centred div 700px wide)
max-width: 700px
margin: 0 auto
.alignleft (float left)
.alignright
cards & boxes
.card
.card-2 (shadow)
.card-3
.bordered-card–l (white centre with thick light-grey border)
.bordered-card–r
.box-1
.box-2
.box-3 (pink)
.box-4 (blue)
.left
text-align: left
.right
text-align: right
.txt-white
color: #fff
.txt-side–r
padding-left: 50px
.txt-side–r p
font-size: 20px
.txt-side–l
padding-right: 50px
.txt-side–l p
font-size: 20px
.txt-mid padding: 20px
.txt-mid–sm
max-width: 300px
margin: 0 auto
.centered
text-align: center