/* ========== RESET ========== */

h5, h6 {
  line-height: 1.5em
}

a, body, div, h1, h2, h3, h4, h5, h6, html, li, ol, p, span, ul {
  border: 0;
  font-family: inherit;
  font-size: 100%;
  font-style: inherit;
  font-weight: inherit;
  margin: 0;
  outline: 0;
  padding: 0;
  vertical-align: baseline
}

article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section {
  display: block;
  margin: 0 10%
}

.display-inline-block, .site-title h1 a {
  display: inline-block
}

*, html {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box
}

html {
  background-color: #fff
}

body, html {
  width: 100%;
  height: 100%
}

body {
  font-size: 87.52%;
  line-height: 1.6875;
  font-family: 'Source Sans 3', 'Source Sans Pro', sans-serif;
  color: #666;
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  -webkit-tap-highlight-color: rgba(0, 0, 0, .1)
}

/* ========== TYPOGRAPHY ========== */

h1, h2, h3, h4, h5, h6 {
  font-family: 'Source Sans 3', 'Source Sans Pro', sans-serif
}

h1, h2, h3, h4 {
  font-weight: 700
}

h5, h6 {
  font-weight: 400
}

h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
  font-weight: inherit;
  color: inherit
}

h1 {
  font-size: 9em;
  letter-spacing: -.04em;
  line-height: 1.5em
}

h2 {
  font-size: 6em
}

h3 {
  font-size: 2.0em;
  font-weight: 400 !important;
}

h4 {
  font-size: 1.1em
}

h5 {
  letter-spacing: -.05em;
  font-size: 1.6em
}

h6, p {
  font-size: 1em
}

h6 {
  letter-spacing: .1em;
  text-transform: uppercase
}

p {
  margin-bottom: 1.5em;
  line-height: 2em
}

p:empty {
  margin-bottom: 0
}

/* ========== LINKS ========== */

a {
  color: #e45f4d;
  text-decoration: none
}

a:focus {
  outline: #ddd solid 2px;
  outline: rgba(0, 0, 0, .1) solid 2px
}

a:hover {
  text-decoration: underline
}

a:active, a:hover {
  outline: 0
}

a img {
  border: 0
}

/* ========== LOGO ========== */

.logo {
  opacity: 1;
  filter: alpha(opacity=100);
  letter-spacing: .2em;
  border: 2px solid #000;
  padding: 10px
}

.logo:hover {
  opacity: .5;
  filter: alpha(opacity=50)
}

/* ========== UTILITIES ========== */

img.round {
  border-radius: 100%
}

.screen-reader-text, .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0
}

.no-bottom { margin-bottom: 0!important }
.double-margin-top { margin-top: 3em }
.double-margin-bottom { margin-bottom: 3em }
.text-left { text-align: left }
.text-center { text-align: center }
.text-right { text-align: right }
.text-justify { text-align: justify }
.text-nowrap { white-space: nowrap }
.text-lowercase { text-transform: lowercase }
.text-uppercase { text-transform: uppercase }
.text-capitalize { text-transform: capitalize }
.text-big-italic { font-size: 1.2em; font-style: italic }
.text-dark { color: #333 }
.text-green { color: #00c853 }

/* ========== LAYOUT ========== */

header {
  margin-top: 5%
}

.site-title {
  position: relative;
  padding-right: 3.2em
}

.site-title h1 {
  margin-bottom: 0;
  font-size: 1em;
  line-height: 1
}

.site-title h1 a {
  text-decoration: none
}

.featured-info {
  margin-bottom: 2em;
  max-width: 100%;
}

.featured-info h1 {
  margin-top: .6em;
  margin-left: -.04em
}

.featured-info h2 {
  margin-bottom: 0.3em;
  font-size: 4em;
  letter-spacing: -.01em;
  line-height: 1.1875em
}

.featured-info h3 {
  margin-bottom: 2.5em;
  line-height: 1.4em
}

.content {
  padding-bottom: 2em
}

footer {
  padding-bottom: 4em;
  color: #5c5e5f
}

footer h4 {
  font-weight: 400;
  font-size: 1.3em;
  letter-spacing: .5px
}

footer h4, footer p {
  margin-bottom: 0
}

/* ========== RESPONSIVE: Tablet ========== */

@media only screen and (max-width: 900px) {
  h1 {
    font-size: 7em;
  }

  .featured-info h2 {
    font-size: 3em;
  }

  h3 {
    font-size: 1.6em;
  }
}

/* ========== RESPONSIVE: Mobile ========== */

@media only screen and (max-width: 600px) {
  h1 {
    font-size: 5em;
    line-height: 1em;
  }

  .featured-info h1 {
    margin-bottom: 0.2em;
  }

  .featured-info h2 {
    margin-bottom: 0.5em;
    font-size: 2.2em;
    line-height: 1.2em;
  }

  h3 {
    font-size: 1.3em;
  }

  .featured-info h3 {
    margin-bottom: 1.8em;
  }

  footer h4 {
    font-size: 1.2em;
    line-height: 1.3em;
  }
}

/* ========== RESPONSIVE: Small Mobile ========== */

@media only screen and (max-width: 400px) {
  h1 {
    font-size: 3.5em;
  }

  .featured-info h2 {
    font-size: 1.8em;
  }

  h3 {
    font-size: 1.15em;
  }

  footer h4 {
    font-size: 1.1em;
  }
}