@import mixins/clearfix

*
  box-sizing: border-box

body
  margin: 0
  font-family: Roboto, sans-serif
  font-size: 14px
  line-height: 1.5
  color: #444

  background: url(/images/background.jpg) center center no-repeat fixed
  background-size: cover

a
  color: #0000ed
  text-decoration: none
  &:hover
    text-decoration: underline

.content-holder
  margin: 0 auto
  padding: 40px
  width: 800px

  background: #fff
  @extend %clearfix

.content, .sidebar
  float: left

.content
  width: 75%
  padding-right: 80px

.intro
  margin: 1em auto
  width: 60%

  font-weight: 300
  font-style: italic
  font-size: 24px
  text-align: center
  line-height: 1.2

.sidebar
  width: 25%
  text-align: center

  img.logo
    width: 100%

  .title
    display: block
    margin-bottom: 30px
    width: 100%
    font-size: 1.4em
    font-weight: 700

  .call-to-action
    display: block
    margin-bottom: 10px
    &.error
      color: #ed0000
.button
  position: relative
  display: block

  &.donate
    padding: 0 20px
    width: 100%
    height: 60px
    line-height: 60px
    border-radius: 8px
    background: #F15A24
    color: #fff
    font-size: 1.5em
    font-weight: 700
    text-align: left
    text-decoration: none

    &:after
      content: ''
      position: absolute
      top: 50%
      right: 20px
      margin-top: -9px
      width: 21px
      height: 18px
      background: url(/images/heart.svg)

    &:hover
      background: #00CA2C

.clear
  clear: both

.image-holder
  width: 100%
  img
    display: block
    width: 100%


p.highlight
  padding-left: 10px
  border-left: 5px solid #00CA2C

footer
  margin-top: 40px
  color: #999
  font-size: 13px