@charset "UTF-8";
@import url(http://fonts.googleapis.com/css?family=Roboto:400,700,700italic,900,900italic,500italic,500,400italic);
@import url(https://fonts.googleapis.com/css?family=Lato:400,100,300,700);
@import url(https://fonts.googleapis.com/css?family=Indie+Flower);
html {
  box-sizing: border-box; }

*, *::after, *::before {
  box-sizing: inherit; }

@media screen and (min-width: 800px) {
  .grid {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto; }
    .grid::after {
      clear: both;
      content: "";
      display: table; }
    .grid .columns-1 {
      float: left;
      display: block;
      margin-right: 2.35765%;
      width: 6.17215%; }
      .grid .columns-1:last-child {
        margin-right: 0; }
    .grid .columns-2 {
      float: left;
      display: block;
      margin-right: 2.35765%;
      width: 14.70196%; }
      .grid .columns-2:last-child {
        margin-right: 0; }
    .grid .columns-3 {
      float: left;
      display: block;
      margin-right: 2.35765%;
      width: 23.23176%; }
      .grid .columns-3:last-child {
        margin-right: 0; }
    .grid .columns-4 {
      float: left;
      display: block;
      margin-right: 2.35765%;
      width: 31.76157%; }
      .grid .columns-4:last-child {
        margin-right: 0; }
    .grid .columns-5 {
      float: left;
      display: block;
      margin-right: 2.35765%;
      width: 40.29137%; }
      .grid .columns-5:last-child {
        margin-right: 0; }
    .grid .columns-6 {
      float: left;
      display: block;
      margin-right: 2.35765%;
      width: 48.82117%; }
      .grid .columns-6:last-child {
        margin-right: 0; }
    .grid .columns-7 {
      float: left;
      display: block;
      margin-right: 2.35765%;
      width: 57.35098%; }
      .grid .columns-7:last-child {
        margin-right: 0; }
    .grid .columns-8 {
      float: left;
      display: block;
      margin-right: 2.35765%;
      width: 65.88078%; }
      .grid .columns-8:last-child {
        margin-right: 0; }
    .grid .columns-9 {
      float: left;
      display: block;
      margin-right: 2.35765%;
      width: 74.41059%; }
      .grid .columns-9:last-child {
        margin-right: 0; }
    .grid .columns-10 {
      float: left;
      display: block;
      margin-right: 2.35765%;
      width: 82.94039%; }
      .grid .columns-10:last-child {
        margin-right: 0; }
    .grid .columns-11 {
      float: left;
      display: block;
      margin-right: 2.35765%;
      width: 91.4702%; }
      .grid .columns-11:last-child {
        margin-right: 0; }
    .grid .columns-12 {
      float: left;
      display: block;
      margin-right: 2.35765%;
      width: 100%; }
      .grid .columns-12:last-child {
        margin-right: 0; }
    .grid .columns-1 {
      float: left;
      display: block;
      margin-right: 2.35765%;
      width: 6.17215%; }
      .grid .columns-1:last-child {
        margin-right: 0; }
    .grid .columns-2 {
      float: left;
      display: block;
      margin-right: 2.35765%;
      width: 14.70196%; }
      .grid .columns-2:last-child {
        margin-right: 0; }
    .grid .columns-3 {
      float: left;
      display: block;
      margin-right: 2.35765%;
      width: 23.23176%; }
      .grid .columns-3:last-child {
        margin-right: 0; }
    .grid .columns-4 {
      float: left;
      display: block;
      margin-right: 2.35765%;
      width: 31.76157%; }
      .grid .columns-4:last-child {
        margin-right: 0; }
    .grid .columns-5 {
      float: left;
      display: block;
      margin-right: 2.35765%;
      width: 40.29137%; }
      .grid .columns-5:last-child {
        margin-right: 0; }
    .grid .columns-6 {
      float: left;
      display: block;
      margin-right: 2.35765%;
      width: 48.82117%; }
      .grid .columns-6:last-child {
        margin-right: 0; }
    .grid .columns-7 {
      float: left;
      display: block;
      margin-right: 2.35765%;
      width: 57.35098%; }
      .grid .columns-7:last-child {
        margin-right: 0; }
    .grid .columns-8 {
      float: left;
      display: block;
      margin-right: 2.35765%;
      width: 65.88078%; }
      .grid .columns-8:last-child {
        margin-right: 0; }
    .grid .columns-9 {
      float: left;
      display: block;
      margin-right: 2.35765%;
      width: 74.41059%; }
      .grid .columns-9:last-child {
        margin-right: 0; }
    .grid .columns-10 {
      float: left;
      display: block;
      margin-right: 2.35765%;
      width: 82.94039%; }
      .grid .columns-10:last-child {
        margin-right: 0; }
    .grid .columns-11 {
      float: left;
      display: block;
      margin-right: 2.35765%;
      width: 91.4702%; }
      .grid .columns-11:last-child {
        margin-right: 0; }
    .grid .columns-12 {
      float: left;
      display: block;
      margin-right: 2.35765%;
      width: 100%; }
      .grid .columns-12:last-child {
        margin-right: 0; }
    .grid .columns-1 {
      float: left;
      display: block;
      margin-right: 2.35765%;
      width: 6.17215%; }
      .grid .columns-1:last-child {
        margin-right: 0; }
    .grid .columns-2 {
      float: left;
      display: block;
      margin-right: 2.35765%;
      width: 14.70196%; }
      .grid .columns-2:last-child {
        margin-right: 0; }
    .grid .columns-3 {
      float: left;
      display: block;
      margin-right: 2.35765%;
      width: 23.23176%; }
      .grid .columns-3:last-child {
        margin-right: 0; }
    .grid .columns-4 {
      float: left;
      display: block;
      margin-right: 2.35765%;
      width: 31.76157%; }
      .grid .columns-4:last-child {
        margin-right: 0; }
    .grid .columns-5 {
      float: left;
      display: block;
      margin-right: 2.35765%;
      width: 40.29137%; }
      .grid .columns-5:last-child {
        margin-right: 0; }
    .grid .columns-6 {
      float: left;
      display: block;
      margin-right: 2.35765%;
      width: 48.82117%; }
      .grid .columns-6:last-child {
        margin-right: 0; }
    .grid .columns-7 {
      float: left;
      display: block;
      margin-right: 2.35765%;
      width: 57.35098%; }
      .grid .columns-7:last-child {
        margin-right: 0; }
    .grid .columns-8 {
      float: left;
      display: block;
      margin-right: 2.35765%;
      width: 65.88078%; }
      .grid .columns-8:last-child {
        margin-right: 0; }
    .grid .columns-9 {
      float: left;
      display: block;
      margin-right: 2.35765%;
      width: 74.41059%; }
      .grid .columns-9:last-child {
        margin-right: 0; }
    .grid .columns-10 {
      float: left;
      display: block;
      margin-right: 2.35765%;
      width: 82.94039%; }
      .grid .columns-10:last-child {
        margin-right: 0; }
    .grid .columns-11 {
      float: left;
      display: block;
      margin-right: 2.35765%;
      width: 91.4702%; }
      .grid .columns-11:last-child {
        margin-right: 0; }
    .grid .columns-12 {
      float: left;
      display: block;
      margin-right: 2.35765%;
      width: 100%; }
      .grid .columns-12:last-child {
        margin-right: 0; }
    .grid .columns-1 {
      float: left;
      display: block;
      margin-right: 2.35765%;
      width: 6.17215%; }
      .grid .columns-1:last-child {
        margin-right: 0; }
    .grid .columns-2 {
      float: left;
      display: block;
      margin-right: 2.35765%;
      width: 14.70196%; }
      .grid .columns-2:last-child {
        margin-right: 0; }
    .grid .columns-3 {
      float: left;
      display: block;
      margin-right: 2.35765%;
      width: 23.23176%; }
      .grid .columns-3:last-child {
        margin-right: 0; }
    .grid .columns-4 {
      float: left;
      display: block;
      margin-right: 2.35765%;
      width: 31.76157%; }
      .grid .columns-4:last-child {
        margin-right: 0; }
    .grid .columns-5 {
      float: left;
      display: block;
      margin-right: 2.35765%;
      width: 40.29137%; }
      .grid .columns-5:last-child {
        margin-right: 0; }
    .grid .columns-6 {
      float: left;
      display: block;
      margin-right: 2.35765%;
      width: 48.82117%; }
      .grid .columns-6:last-child {
        margin-right: 0; }
    .grid .columns-7 {
      float: left;
      display: block;
      margin-right: 2.35765%;
      width: 57.35098%; }
      .grid .columns-7:last-child {
        margin-right: 0; }
    .grid .columns-8 {
      float: left;
      display: block;
      margin-right: 2.35765%;
      width: 65.88078%; }
      .grid .columns-8:last-child {
        margin-right: 0; }
    .grid .columns-9 {
      float: left;
      display: block;
      margin-right: 2.35765%;
      width: 74.41059%; }
      .grid .columns-9:last-child {
        margin-right: 0; }
    .grid .columns-10 {
      float: left;
      display: block;
      margin-right: 2.35765%;
      width: 82.94039%; }
      .grid .columns-10:last-child {
        margin-right: 0; }
    .grid .columns-11 {
      float: left;
      display: block;
      margin-right: 2.35765%;
      width: 91.4702%; }
      .grid .columns-11:last-child {
        margin-right: 0; }
    .grid .columns-12 {
      float: left;
      display: block;
      margin-right: 2.35765%;
      width: 100%; }
      .grid .columns-12:last-child {
        margin-right: 0; }
    .grid .shift-1 {
      margin-left: 8.5298%; }
    .grid .shift-2 {
      margin-left: 17.05961%; }
    .grid .shift-3 {
      margin-left: 25.58941%; }
    .grid .shift-4 {
      margin-left: 34.11922%; }
    .grid .shift-5 {
      margin-left: 42.64902%; }
    .grid .shift-6 {
      margin-left: 51.17883%; }
    .grid .shift-7 {
      margin-left: 59.70863%; }
    .grid .shift-8 {
      margin-left: 68.23843%; }
    .grid .shift-9 {
      margin-left: 76.76824%; }
    .grid .shift-10 {
      margin-left: 85.29804%; }
    .grid .shift-11 {
      margin-left: 93.82785%; }
    .grid .shift-12 {
      margin-left: 102.35765%; }
    .grid .shift-1 {
      margin-left: 8.5298%; }
    .grid .shift-2 {
      margin-left: 17.05961%; }
    .grid .shift-3 {
      margin-left: 25.58941%; }
    .grid .shift-4 {
      margin-left: 34.11922%; }
    .grid .shift-5 {
      margin-left: 42.64902%; }
    .grid .shift-6 {
      margin-left: 51.17883%; }
    .grid .shift-7 {
      margin-left: 59.70863%; }
    .grid .shift-8 {
      margin-left: 68.23843%; }
    .grid .shift-9 {
      margin-left: 76.76824%; }
    .grid .shift-10 {
      margin-left: 85.29804%; }
    .grid .shift-11 {
      margin-left: 93.82785%; }
    .grid .shift-12 {
      margin-left: 102.35765%; }
    .grid .shift-1 {
      margin-left: 8.5298%; }
    .grid .shift-2 {
      margin-left: 17.05961%; }
    .grid .shift-3 {
      margin-left: 25.58941%; }
    .grid .shift-4 {
      margin-left: 34.11922%; }
    .grid .shift-5 {
      margin-left: 42.64902%; }
    .grid .shift-6 {
      margin-left: 51.17883%; }
    .grid .shift-7 {
      margin-left: 59.70863%; }
    .grid .shift-8 {
      margin-left: 68.23843%; }
    .grid .shift-9 {
      margin-left: 76.76824%; }
    .grid .shift-10 {
      margin-left: 85.29804%; }
    .grid .shift-11 {
      margin-left: 93.82785%; }
    .grid .shift-12 {
      margin-left: 102.35765%; }
    .grid .shift-1 {
      margin-left: 8.5298%; }
    .grid .shift-2 {
      margin-left: 17.05961%; }
    .grid .shift-3 {
      margin-left: 25.58941%; }
    .grid .shift-4 {
      margin-left: 34.11922%; }
    .grid .shift-5 {
      margin-left: 42.64902%; }
    .grid .shift-6 {
      margin-left: 51.17883%; }
    .grid .shift-7 {
      margin-left: 59.70863%; }
    .grid .shift-8 {
      margin-left: 68.23843%; }
    .grid .shift-9 {
      margin-left: 76.76824%; }
    .grid .shift-10 {
      margin-left: 85.29804%; }
    .grid .shift-11 {
      margin-left: 93.82785%; }
    .grid .shift-12 {
      margin-left: 102.35765%; } }
.centered-navigation {
  background-color: #E7F1EC;
  border-bottom: 1px solid #d4e6dd;
  min-height: 60px;
  width: 100%;
  z-index: 9999; }
  .centered-navigation .mobile-logo {
    display: inline;
    float: left;
    max-height: 60px;
    padding-left: 1em; }
    .centered-navigation .mobile-logo img {
      max-height: 60px;
      opacity: .6;
      padding: .8em 0; }
    @media screen and (min-width: 53.75em) {
      .centered-navigation .mobile-logo {
        display: none; } }
  .centered-navigation .centered-navigation-mobile-menu {
    color: rgba(51, 51, 51, 0.7);
    display: block;
    float: right;
    line-height: 60px;
    margin: 0;
    padding-right: 1em;
    text-decoration: none;
    text-transform: uppercase; }
    @media screen and (min-width: 53.75em) {
      .centered-navigation .centered-navigation-mobile-menu {
        display: none; } }
    .centered-navigation .centered-navigation-mobile-menu:focus, .centered-navigation .centered-navigation-mobile-menu:hover {
      color: #333; }
  .centered-navigation .centered-navigation-wrapper {
    max-width: 68em;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    z-index: 999; }
    .centered-navigation .centered-navigation-wrapper::after {
      clear: both;
      content: "";
      display: table; }
    .centered-navigation .centered-navigation-wrapper::after {
      clear: both;
      content: "";
      display: table; }
  .centered-navigation ul.centered-navigation-menu {
    -webkit-transform-style: preserve-3d;
    clear: both;
    display: none;
    margin: 0 auto;
    overflow: visible;
    padding: 0;
    width: 100%;
    z-index: 99999; }
    .centered-navigation ul.centered-navigation-menu.show {
      display: block; }
    @media screen and (min-width: 53.75em) {
      .centered-navigation ul.centered-navigation-menu {
        display: block;
        text-align: center; } }
  @media screen and (min-width: 53.75em) {
    .centered-navigation .nav-link:first-child {
      margin-left: 2.2em; } }
  .centered-navigation ul li.nav-link {
    background: #E7F1EC;
    display: block;
    line-height: 60px;
    overflow: hidden;
    padding-right: 1em;
    text-align: right;
    width: 100%;
    z-index: 9999; }
    .centered-navigation ul li.nav-link a {
      color: rgba(51, 51, 51, 0.7);
      display: inline-block;
      outline: none;
      text-decoration: none; }
      .centered-navigation ul li.nav-link a:focus, .centered-navigation ul li.nav-link a:hover {
        color: #333; }
    @media screen and (min-width: 53.75em) {
      .centered-navigation ul li.nav-link {
        background: transparent;
        display: inline;
        line-height: 60px; }
        .centered-navigation ul li.nav-link a {
          padding-right: 1em; } }
  .centered-navigation li.logo.nav-link {
    display: none;
    line-height: 0; }
    @media screen and (min-width: 53.75em) {
      .centered-navigation li.logo.nav-link {
        display: inline; } }
  .centered-navigation .github-logo {
    margin-bottom: -0.66667em;
    max-height: 2em;
    opacity: 0.6;
    font-size: 36px;
    float: right; }
  .centered-navigation li.more.nav-link {
    padding-right: 0; }
    @media screen and (min-width: 53.75em) {
      .centered-navigation li.more.nav-link {
        padding-right: 1em; } }
    .centered-navigation li.more.nav-link > ul > li:first-child a {
      padding-top: 1em; }
    .centered-navigation li.more.nav-link a {
      margin-right: 1em; }
    .centered-navigation li.more.nav-link > a {
      padding-right: 0.6em; }
    .centered-navigation li.more.nav-link > a:after {
      position: absolute;
      top: auto;
      right: -0.4em;
      bottom: auto;
      left: auto;
      color: rgba(51, 51, 51, 0.7);
      content: "\25BE"; }
  .centered-navigation li.more {
    overflow: visible;
    padding-right: 0; }
    .centered-navigation li.more a {
      padding-right: 1em; }
    .centered-navigation li.more > a {
      padding-right: 1.6em;
      position: relative; }
      @media screen and (min-width: 53.75em) {
        .centered-navigation li.more > a {
          margin-right: 1em; } }
      .centered-navigation li.more > a:after {
        content: "›";
        font-size: 1.2em;
        position: absolute;
        right: 0.5em; }
    .centered-navigation li.more:focus > .submenu, .centered-navigation li.more:hover > .submenu {
      display: block; }
    @media screen and (min-width: 53.75em) {
      .centered-navigation li.more {
        padding-right: 1em;
        position: relative; } }
  .centered-navigation ul.submenu {
    display: none;
    padding-left: 0; }
    @media screen and (min-width: 53.75em) {
      .centered-navigation ul.submenu {
        left: -1em;
        position: absolute;
        top: 1.5em; } }
    @media screen and (min-width: 53.75em) {
      .centered-navigation ul.submenu .submenu {
        left: 11.8em;
        top: 0; } }
    .centered-navigation ul.submenu li {
      display: block;
      padding-right: 0; }
      @media screen and (min-width: 53.75em) {
        .centered-navigation ul.submenu li {
          line-height: 46.15385px; }
          .centered-navigation ul.submenu li:first-child > a {
            border-top-left-radius: 3px;
            border-top-right-radius: 3px; }
          .centered-navigation ul.submenu li:last-child > a {
            border-bottom-left-radius: 3px;
            border-bottom-right-radius: 3px;
            padding-bottom: .7em; } }
      .centered-navigation ul.submenu li a {
        background-color: #ddebe4;
        display: inline-block;
        text-align: right;
        text-decoration: none;
        width: 100%; }
        @media screen and (min-width: 53.75em) {
          .centered-navigation ul.submenu li a {
            background-color: #E7F1EC;
            padding-left: 1em;
            text-align: left;
            width: 12em; } }

body {
  font-family: 'Roboto', sans-serif; }

.column-example {
  background-color: #88C05A;
  text-align: center;
  color: #292e38;
  padding: 20px;
  margin-top: 10px;
  margin-bottom: 10px; }

.grid-container {
  background-color: #CFD3D8;
  padding: 20px;
  width: 1200px;
  margin: 0 auto; }
  .grid-container h2 {
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    text-align: center; }

.logo {
  display: block;
  margin: 0 auto;
  margin-bottom: -80px; }

.logo-text {
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
  text-align: center;
  font-size: 60px;
  font-color: #4a4a4a; }

.tag {
  font-family: 'Indie Flower', cursive;
  text-align: center;
  font-size: 20px; }

/*# sourceMappingURL=grid.css.map */