html {
  width:100%;
  height: 100%;
  background: url(substance-logo.png) center center no-repeat;
}

body {
  font-family: Helvetica, Verdana, sans-serif;
  font-size: 1.5em;
  font-weight: 400;
  color: #333;
  line-height: 1.3em;
  background-color: #FFFFFF;
}

h1 {

}

div.container {
  margin: 2em auto;
  max-width: 30em;
}

div.branding {
  display: block;
  height: 5em;
  margin: 0 0 1.5em;
}

.branding {
  height: 5em;
  width: 10em;
  background-image: url('substance-logo.png');
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center middle;
}

div.logo, h1.logo {
  margin-left: -10000em;
}

@media(min-width: 1367px) {
  div.container {
    margin: 2em auto 3em;
  }
}

@media(min-width: 1441px) {
  body {
    font-size: 1.75em;
  }
}

@media(min-width: 1921px) {
  body {
    font-size: 200%;
  }
   div.container {
    margin: 3em auto;
  }
}

@media(max-width: 860px) {
  div.container {
    margin: 2em 1.5em;
  }
}

@media(max-width: 640px) {

  body {
    font-size: 1.1em;
  }

  div.container {
    margin: 1.5em;
  }

  div.branding {
    height: 4em;
    margin: 0 0 1em;
  }


}