/* Welcome to Compass.
 * In this file you should write your main styles. (or centralize your imports)
 * Import this file using the following HTML or equivalent:
 * <link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" /> */
@import url(/fonts/Open%20Sans/OpenSans.css);
@import url(/fonts/Vista%20Slab%20OTCE%20Light/VistaSlabOTCE-LightItalic.css);
@import url(/fonts/Vista%20Slab%20OTCE%20Reg/VistaSlabOTCE-Bold.css);
@import url(/fonts/Vista%20Slab%20OTCE%20Reg/VistaSlabOTCE-Reg.css);
html, body, div, span, applet, object, iframe,
h1, h2, h3, h2, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  font-size: 100%;
  vertical-align: baseline; }

html {
  line-height: 1; }

ol, ul {
  list-style: none; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

caption, th, td {
  text-align: left;
  font-weight: normal;
  vertical-align: middle; }

q, blockquote {
  quotes: none; }
  q:before, q:after, blockquote:before, blockquote:after {
    content: "";
    content: none; }

a img {
  border: none; }

article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
  display: block; }

p {
  font-size: 1em;
  line-height: 1.7em;
  font-family: "Open Sans", arial, sans-seris;
  margin: 1em 0; }
  p.leadin, p.standout {
    font-family: "VistaSlabOTCELight", times, serif;
    color: #60abf8;
    font-size: 1.3em;
    line-height: 1.4em;
    margin-top: 0; }
  p.leadin {
    text-align: center;
    color: #2c2c2c;
    display: block;
    max-width: 800px;
    margin: 0 auto 2em; }

h3, h2 {
  font-family: "VistaSlabOTCEReg", times, serif;
  font-weight: 700;
  line-height: 1.4em;
  font-size: 1.3em;
  margin: 1em 0; }

h2 {
  color: #60abf8;
  font-size: 2em;
  text-align: center;
  margin-bottom: 0.2em; }

.wrap {
  max-width: 1100px;
  margin: 2em auto; }

section {
  padding: 0 20px;
  overflow: hidden; }

@media screen and (max-width: 480px) {
  section.top {
    text-align: center; } }
section.top .wrap {
  overflow: hidden;
  margin: 1em auto; }
@media screen and (min-width: 481px) {
  section.top .logo {
    float: left; } }
section.top .logo img {
  width: 100%;
  max-width: 250px; }
section.top .social {
  padding-top: 10px; }
  @media screen and (min-width: 481px) {
    section.top .social {
      float: right; } }
  section.top .social li {
    display: inline-block;
    line-height: 10px;
    margin: 0 10px;
    vertical-align: middle; }

section.banner {
  background-image: url("../img/banner-bg.jpg");
  background-position: center center;
  background-size: auto; }
  section.banner p {
    color: #ffffff;
    text-align: center;
    font-family: "VistaSlabOTCEReg", times, serif;
    font-size: 1em;
    text-shadow: 2px 2px 0 rgba(66, 64, 64, 0.2);
    text-shadow: 2px 2px 0 0 rgba(66, 64, 64, 0.2); }
  section.banner h1 {
    font-size: 20vw;
    margin: 5vw 0;
    text-shadow: 0.04em 0.02em 2px rgba(66, 64, 64, 0.32); }
    @media screen and (min-width: 701px) {
      section.banner h1 {
        font-size: 5em;
        margin: 0.3em 0 0.2em; } }
    @media screen and (min-width: 911px) {
      section.banner h1 {
        font-size: 8em;
        margin: 0.2em 0; } }
    section.banner h1 span {
      display: block;
      text-align: center; }
      section.banner h1 span.selfie {
        font-family: "VistaSlabOTCELight", times, serif;
        position: relative;
        z-index: 9;
        letter-spacing: -0.1em; }
        section.banner h1 span.selfie:before {
          content: "#";
          font-size: 60%;
          margin-left: -0.5em; }
      section.banner h1 span.nation {
        margin-top: -0.25em;
        font-family: "VistaSlabOTCEReg", times, serif;
        font-weight: 700;
        text-transform: uppercase;
        color: #ffffff; }
  @media screen and (min-width: 701px) {
    section.banner .wrap {
      margin: 0 auto;
      overflow: hidden; }
      section.banner .wrap > div {
        float: left; }
    section.banner .text {
      width: calc(100% - 383px);
      box-sizing: border-box;
      padding: 0 20px 0 0; }
    section.banner .img {
      width: 383px; }
      section.banner .img img {
        display: block;
        max-width: 100%; } }
  @media screen and (max-width: 700px) {
    section.banner img {
      display: none; } }

section.content:nth-of-type(even) {
  background-color: #ebf7fd; }
section.content img {
  max-width: 100%;
  display: block;
  margin: 2em auto; }
section.content .small {
  text-align: center;
  font-size: 0.8em;
  color: #2c2c2c;
  font-family: "VistaSlabOTCELight", times, serif; }

@media screen and (min-width: 701px) {
  .row {
    overflow: hidden; }
    .row .text {
      width: 48%;
      float: left; }
      .row .text p, .row .text h3, .row .text h2 {
        padding: 0 2em 0 0; }
    .row .table {
      width: calc(100% - 48%);
      float: right; }
    .row:nth-child(even) .text {
      float: right; }
      .row:nth-child(even) .text p, .row:nth-child(even) .text h3, .row:nth-child(even) .text h2 {
        padding: 0 0 0 2em; }
    .row:nth-child(even) .table {
      float: left; } }
section.outro {
  background-color: #4a8fd5;
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjQwMHB4IiBjeT0iNDAwcHgiIHI9IjQwMCUiPjxzdG9wIG9mZnNldD0iMi41JSIgc3RvcC1jb2xvcj0iIzYwYWJmOCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzRhOGZkNSIvPjwvcmFkaWFsR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
  background-size: 100%;
  background-image: -moz-radial-gradient(400px 400px, #60abf8 10px, #4a8fd5 400px);
  background-image: -webkit-radial-gradient(400px 400px, #60abf8 10px, #4a8fd5 400px);
  background-image: radial-gradient(400px 400px, #60abf8 10px, #4a8fd5 400px); }
  section.outro p {
    color: #ffffff;
    font-family: "VistaSlabOTCEReg", times, serif;
    max-width: 800px;
    margin: auto;
    text-align: center;
    font-size: 1.1em; }
    section.outro p a {
      text-decoration: underline;
      color: inherit; }

section.footer {
  text-align: center;
  padding: 1em 2em 2em; }
  section.footer p {
    color: #2c2c2c; }
  section.footer img {
    width: 100%;
    max-width: 250px; }