Decoupled heading classes from html and edited font-size variables.

Visual styles should never be applied directly to HTML elements. They should always be applied with class names. 

The size of my headings shouldn't be determined by which HTML element they use. I should be able to apply any heading size to any h tag.

This was possible by using classes .h1 through .h6 but those aren't semantic classes. Applying the .h2 class to a <h6> tag suggests that I want my <h6> heading to look like a <h2> heading. But what should a <h2> heading look like?

Using classes like .large, .medium, .small is much more semantic. Just like Bootstrap's buttons.