.hero
  ///////////////////////////////////////////////////////////////////////////////////
  $base-border-radius: 3px !default
  $base-accent-color: #477DCA !default
  $large-screen: em(860) !default
  //////////////////////////////////////////////////////////////////////////////////
  $hero-background-top: #7F99BE
  $hero-background-bottom: #20392B
  $hero-color: white
  $gradient-angle: 10deg
  $hero-image: "https://s3.amazonaws.com/FutureGov/sampleimage.jpg"
  +background(url($hero-image), linear-gradient($gradient-angle, $hero-background-bottom, $hero-background-top), no-repeat $hero-background-top scroll)
  background-color: #324766
  background-position: top
  background-repeat: no-repeat
  background-size: cover
  padding-bottom: 3em
  .hero-logo img
    height: 2em
    margin-bottom: 1em
  .hero-inner
    +outer-container
    +clearfix
    color: $hero-color
    margin: auto
    padding: 3.5em
    text-align: center
    .hero-copy
      text-align: center
      h1
        font-size: 1.6em
        margin-bottom: 0.5em
        +media($large-screen)
          font-size: 1.8em
      p
        font-weight: 200
        line-height: 1.4em
        margin: 0 auto 3em auto
        +media($large-screen)
          font-size: 1.1em
          max-width: 40%
    button
      +button(flat, $base-accent-color)
      padding: 0.7em 1em