@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,200,300,200italic,300italic,400italic,600,700,600italic,700italic,900,900italic);
html {
  height: 100%; }

body {
  padding: 0;
  margin: auto;
  height: 100%;
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
  background: white;
  text-align: left; }

div {
  box-sizing: padding-box; }

#header-image {
  margin-bottom: -4em;
  min-height: 14em;
  max-height: 28em;
  height: 40vh;
  width: 100%;
  background-image: url("../img/header.jpg");
  background-size: cover;
  background-position: center center;
  overflow: hidden; }

#content {
  text-align: center;
  margin: auto;
  max-width: calc(100vw - 10em); }
  #content div {
    vertical-align: top; }
  #content #header {
    display: inline-block;
    padding: 0;
    height: 11em;
    width: 40%;
    text-align: right; }
    #content #header img {
      width: auto;
      max-width: 100%;
      height: 11em;
      background: white;
      border: 2em solid white;
      border-right-width: 1em; }
  #content .content {
    width: 60%; }

.content {
  text-align: left;
  display: inline-block;
  padding: 2em;
  background: white; }
  .content.iframe h1 {
    margin-top: 0; }
  .content h1 {
    font-weight: bold; }
  .content ul {
    margin-left: 0;
    padding-left: 1.2em; }
    .content ul li {
      margin-left: 0;
      padding-left: 0; }
  .content form {
    padding: 2em 0; }
    .content form label {
      width: 20%; }
    .content form input, .content form select, .content form textarea {
      max-width: 80%;
      width: 20em;
      border: 1px solid #ccc; }
    .content form div div {
      padding: 0.5em 0; }
      .content form div div a {
        white-space: nowrap;
        margin-top: 1em;
        margin-left: 0em; }
    .content form button {
      margin-top: 1em;
      margin-right: 1em; }

#footer {
  padding: 2em;
  font-size: 0.8em;
  text-align: right; }

@media screen and (max-width: 1000px) {
  #content {
    max-width: calc(100vw - 4em); }
    #content #header, #content .content {
      display: block;
      width: 100%;
      background: white; }
    #content #header {
      text-align: center; }
      #content #header img {
        border-width: 2em; }
    #content .content {
      padding-top: 0; } }
@media screen and (max-width: 600px) {
  .content h1 {
    font-size: 24px; }
  .content form label {
    display: block;
    max-width: 100%;
    width: 100%; }
  .content form input, .content form select, .content form textarea {
    max-width: 100%;
    width: 100%; } }