/* STRUCTURE */
html { overflow-y:scroll; }
html, body { width:100%; height:100%; }
body {
  position:relative;
  font:62.5% Verdana, Helvetica, Arial, Sans-Serif; /* 1 em = 10px */
  line-height:1.4;
  background-color:#fff;
  color:#000;
  padding:0; margin:0;
}

/* GENERAL */
h1, h2, h3, h4, h5, h6 { font-weight:normal; }
a { color:#333; background-color:#eee; }
a:hover {
  background-color:#da37a4;
  color:#fff;
}
p { font-size:1.4em; }
.container {
  max-width:96em;
  margin:0 auto;
  padding:10em 2em 0;
}
em { font-style:italic; }
strong { font-weight:bold; }
.stub { color:#666; }
.haus { color:#aaa; }

/* FLOATS */
.group:after {
  display:block;
  content:"";
  clear:both;
  height:0;
}
.group { *zoom:1; } /* IE 6/7 */

.logo {
  text-indent:-9999em;
  width:286px;
  height:243px;
  margin: 0 auto;
  margin-bottom:3em;
  background-image:url(../images/logo.png);
  background-repeat:no-repeat;
  background-position:center;
  background-color:#fff;
  padding:1em;
}

.heading {
  text-align:center;
  font-size:1.8em;
  margin-bottom:1em;
  color:#000;
}

.paragraph {
  text-align:center;
  font-size:1.8em;
}

.call-to-action {
  display:inline-block;
  padding:0.5em 0.833em;
  background-color:#eee;
}

.call-to-action:hover {
  background-color:#d6ecc1;
  color:#000;
}

/* Tablet */
@media (max-width: 768px) {
  .container { padding-top:6em; }
  .logo { width:200px; height:170px; background-size:contain; }
  .paragraph { font-size:1.6em; }
}

/* Phone */
@media (max-width: 480px) {
  .container { padding-top:4em; }
  .logo { width:150px; height:127px; }
  .paragraph { font-size:1.4em; }
}