Style the hero portion of Middleman landing page

* Add `Fira` fonts to directory
* Add new color variables for Middleman branding
* Install Bourbon, Neat, and set CSS to very basic
* Edit hero content in copy
* Update hero with relevant blocks of content before CSS style of terminal
* Add browser using code

![middleman-hero](https://cloud.githubusercontent.com/assets/816402/4891784/a670dc4e-63ab-11e4-8bfa-e5bd1338e698.png)

I know this is a little nit-picky, but could we reorder these classes so they appear in the order they would on the page?

Right now we have:

```
.hero-content {...}
.hero-content-headline {...}
.hero-headline{...}
.hero-content-logo{...}
```

What if we just inverted the order of the list?