/* =======================================================================
   Style Guide
   ======================================================================= */

.color-primary { #3f9a82; }
.color-accent { #e9dc7e; }
.color-background { #3b596a; }
.color-shadow { #2b424e; }

/* =======================================================================
   Essentials & Layout
   ======================================================================= */

html {
  font: 400 120%/1.6 "Lato", sans-serif;
  -webkit-font-smoothing: antialiased;
}

@media screen and (max-width: 600px) {
  html { font-size: 115%; }
}

body {
  background: #3b596a;
  color: #fff;
  margin: 0;
}

.container {
  margin: 0 auto;
  padding: 0 1rem ;
}

.intro {
  font-size: 1.4rem;
  margin: 2rem auto;
  text-align: center;
}

@media screen and (min-width: 860px) {
  .container {
    max-width: 800px;
    padding: 0;
  }
}

section { padding: 3rem 0; }

.alt { background: #35505f; }

.last { border-bottom: none; }

footer {
  font-weight: 600;
  padding: 3rem 0;
  text-align: center;
}

footer ul {
  margin: 0;
  padding: 0;
}

footer li {
  display: inline-block;
  text-align: center;
}

footer li:first-child { margin-right: 1.5rem; }

footer a { color: #fff; }

/* =======================================================================
   Typography
   ======================================================================= */

h1, h2, h3, h4, h5 {
  color: #e9dc7e;
  display: block;
  font-weight: 400;
  line-height: 1.4em;
  margin: 0;
  padding: 0;
}

h1 { font-size: 1.8rem; }

h2 {
  font-size: 1.4rem;
  font-weight: 600;
}

h3 {
  font-size: 1.1rem;
  padding: .12em 0;
}

h4 { font-size: 1rem; }

p { margin: .2rem 0 1.5rem 0;}

p:last-child { margin-bottom: 0; }

strong { font-weight: 700; }

q { font-style: italic; }

q:before {
  content: "\201C";
  font-family: "Georgia", serif;
}

q:after {
  content: "\201D";
  font-family: "Georgia", serif;
}

/* =======================================================================
   Hyperlinks
   ======================================================================= */

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

a:hover { text-decoration: underline; }

/* =======================================================================
   Page Elements
   ======================================================================= */

header {
  background: #2b424e;
  font-size: 1.1em;
  margin-top: 2em;
}

@media screen and (max-width: 600px) {
  header { margin: 0; }
}

nav {
  background: #3f9a82;
  height: 80px;
}

nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: center;
}

@media screen and (min-width: 600px) {
  nav ul { text-align: right; }
}

nav li {
  display: inline-block;
  line-height: 80px;
  text-align: center;
  width: 23%;
}

@media screen and (min-width: 600px) {
  nav li { width: 65px; }
}

nav li a {
  color: #fff;
  display: block;
  text-decoration: none;
}

nav li a:hover {
  background: #3a8e78;
  text-decoration: none;
}

.title-small {
  color: #fff;
  float: left;
  font-weight: 700;
  letter-spacing: 1px;
  line-height: 80px;
  text-transform: uppercase;
}

@media screen and (max-width: 600px) {
  .title-small { display: none; }
}

@media screen and (min-width: 600px) {
  .title-large { display: none; }
}

@media screen and (max-width: 600px) {
  .title-large {
    display: block;
    float: none;
    font-size: 2.3rem;
    font-weight: 700;
    padding: 1.3em 0;
    text-align: center;
    text-transform: uppercase;
  }
}

.circle-header {
  background: #35505f;
  border: 3px solid #fff;
  border-radius: 50%;
  color: #e9dc7e;
  font-size: 1.2rem;
  font-weight: 700;
  height: 90px;
  line-height: 90px;
  margin: 0 auto 3rem auto;
  text-align: center;
  width: 90px;
}

.references {
  margin: .3rem 1.2rem;
  padding: 0;
}

/* =======================================================================
   Content Examples
   ======================================================================= */

.row {
  background: #35505f;
  border-radius: 9px;
  margin: 3rem auto;
  padding: 2rem 1rem;
  text-align: center;
  width: 90%;
}

.column {
  display: inline-block;
  vertical-align: bottom;
  width: 49%;
}

.px { font-size: 30px; }

.px-large { font-size: 50px; }

.box {
  background: #3f9a82;
  border-radius: 3px;
  display: inline-block;
  margin: .8em 0;
}

.small {
  height: 40px;
  width: 40px;
}

.large {
  height: 75px;
  width: 75px;
}

.em { font-size: 4em; }

.padding-px { padding: 5px; }

.padding-em { padding: 1.5em; }

.rem-font { font-size: 2.8rem; }

.em-font { font-size: 2.8em; }

.special { font-size: 14px; }

.normal { font-size: 1rem; }

.percent {
  height: 40px;
  width: 90%;
}

.large-percent { font-size: 200%; }

.px26 { font-size: 26px; }

.px52 { font-size: 52px; }

/* =======================================================================
   Clearfix
   ======================================================================= */

/**
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    contenteditable attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that are clearfixed.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */
.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.cf:after { clear: both; }

/**
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
.cf {
    clear: both;
    *zoom: 1;
}