/*  =============================================================================
 *  TYPOGRAPHY STYLES
 *  ============================================================================= */
html, body { margin: 0; font-family: 'Lato', sans-serif; font-size: 18px; font-weight: 300; }
h1, h2, h3, h4, h5, h6 { font-family: 'Montserrat', sans-serif; }
p, option, select, input, textarea { font-size: 18px; font-family: 'Lato', sans-serif; font-weight: 300; }

.ff-montserrat { font-family: 'Montserrat', sans-serif; }
.ff-lato { font-family: 'Lato', sans-serif; }
.introText { font-size: 16px; line-height: 1.4rem; }

h1,.f1 { font-size: 2rem; }
h2,.f2 { font-size: 1.5rem; }
h3,.f3 { font-size: 1rem; }
h4,.f4 { font-size: 1rem; }
h5,.f5 { font-size: 0.9rem; }
h6,.f6 { font-size: 0.5rem; }

p { line-height: 1.75rem; }
.lhxs { line-height: 1.1rem; }
.lhs { line-height: 1.4rem; }


.caps { text-transform: uppercase; }
.italic { font-style:italic; }

.fw-light { font-weight: 300; }
.fw-normal { font-weight: 400; }
.fw-bold { font-weight: 800; }

.text-white { color: #fff; }
.text-dark { color: $darker-gray; }
.text-green { color: $green; }
.text-red { color: $red; }

a { text-decoration: none; color: inherit;}
a:visited { text-decoration: none; color: inherit;}


@media only screen and (min-width: 40em) {
  h1,.f1-ns { font-size: 3rem; }
  h2,.f2-ns { font-size: 2rem; }
  h3,.f3-ns { font-size: 1.5rem; }
  h4,.f4-ns { font-size: 1rem; }
  h5,.f5-ns { font-size: 0.8rem; }
  h6,.f6-ns { font-size: 0.5rem; }
  .text-dark-ns { color: $darker-gray; }
  .introText-ns { font-size: 24px; line-height: 1.8rem; }
}
