iframe {
  border: none; }

* {
  box-sizing: border-box; }

html {
  height: 100%;
  padding: 50px 0 50px;
  padding: 5vw 0 5vw; }

body {
  min-height: 100%;
  margin: 0 5% 50px;
  margin: 0 5% 5vw;
  position: relative;
  display: flex;
  flex-direction: column; }

body:after {
  content: "";
  display: block;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 50px;
  height: 5vw;
  clear: both; }

.container {
  flex: 1;
  flex-basis: auto; }

main {
  display: block;
  padding: 0 1em 0;
  font-size: 1.2em; }
  @media (min-width: 35em) and (max-width: 45em), (min-width: 65em) {
    main {
      padding-left: 2em;
      padding-right: 2em; } }

main:after {
  content: "";
  display: table;
  clear: both; }

footer, h1 {
  margin: 0;
  padding: 1em;
  z-index: 1; }

nav, body::before {
  background: #343797; }

nav {
  color: #cccccd;
  text-align: center;
  font-family: sans-serif;
  text-transform: uppercase; }
  nav a {
    display: block;
    margin: 0.5em;
    border: 1px solid #cccccd;
    padding: 0.5em;
    text-decoration: inherit;
    color: inherit;
    word-wrap: break-word;
    -webkit-hyphens: auto;
        -ms-hyphens: auto;
            hyphens: auto;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }
    nav a:hover {
      color: #e5040a;
      border-color: #e5040a; }
    nav a:active {
      background: #e5040a;
      color: #cccccd;
      border-color: #cccccd; }

@media (min-width: 10em) {
  nav {
    padding: 0.25em;
    display: flex;
    flex-flow: row wrap; }
    nav a {
      flex: 0 0 48%;
      margin: 1vw 1%; } }
@media (min-width: 45em) {
  nav {
    padding: 0.25em;
    display: flex;
    flex-flow: row wrap; }
    nav a {
      flex: 0 0 23%;
      margin: 1vw 1%; } }
@media (min-width: 35em) and (max-width: 45em), (min-width: 65em) {
  nav, body::before {
    width: 9.5rem; }

  nav {
    float: left;
    display: block;
    padding: 0;
    position: relative;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    max-height: 100vh;
    overflow: auto; }
    nav a {
      margin: .5em; }
    nav + * {
      margin-left: 9.5rem; }

  body::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    max-height: none; } }
figure {
  margin: 1em 0; }
  figure > * {
    width: 100%; }
  figure > img {
    height: auto; }
  figure > iframe {
    min-height: 180px;
    max-height: 50vh;
    background: #eee; }

@media (min-width: 45.0625em) {
  figure {
    min-width: 40%;
    max-width: 50%;
    float: right;
    padding-left: 2em;
    background: white; } }
.gallery {
  list-style: none;
  padding: 0;
  text-align: center;
  font-size: 0;
  flex-flow: row wrap;
  justify-content: center;
  display: flex; }
  .gallery li {
    font-size: 1rem;
    margin: 0 0.5em 1em;
    display: inline-block;
    flex: auto;
    width: 200px;
    max-width: 400px; }
    .gallery li > a {
      display: block;
      color: inherit;
      text-decoration: inherit; }
  .gallery img {
    width: 100%;
    border: none;
    height: auto;
    display: block; }
  .gallery .title {
    margin: .5em;
    text-decoration: underline; }
  .gallery :link .title {
    color: blue; }
  .gallery :visited .title {
    color: purple; }
  .gallery :active .title {
    color: red; }

html {
  background: url(/assets/images/background.png);
  background: repeating-linear-gradient(135deg, #e5040a 0, #e5040a 75px, #cccccd 75px, #cccccd 150px) fixed; }

body {
  background: white;
  box-shadow: 0 0 4em black;
  font-family: sans-serif;
  z-index: 1000; }

footer, h1 {
  font-family: "Syncopate", sans-serif;
  text-transform: uppercase;
  text-align: center;
  color: #343797;
  text-shadow: 0 1px rgba(255, 255, 255, 0.5);
  background: #c2c2c2;
  background: linear-gradient(#d6d6d6, #aeaeae); }

h1 {
  position: relative;
  text-shadow: 0.1em 0.1em #e5040a; }
  h1 > span {
    display: block;
    margin-bottom: .5em;
    letter-spacing: -2px;
    font-size: 1.5em;
    margin: 0; }
    h1 > span > span {
      font-size: 1.25em;
      position: relative;
      top: .0625em;
      display: inline-block; }

h2 {
  color: #343797;
  padding-bottom: 2px;
  border-bottom: 1px solid #cccde5;
  display: block; }

.social {
  float: right; }
  .social a {
    font-size: 0;
    width: 16px;
    height: 16px;
    display: block; }
    .social a:before {
      content: url(/assets/images/facebook.svg); }

ul {
  padding-left: 30px; }

.social {
  float: right; }
  .social a {
    font-size: 0;
    width: 16px;
    height: 16px;
    display: block; }
    .social a:before {
      content: url(/assets/images/facebook.svg); }