html {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
*,
*:before,
*:after {
  -webkit-box-sizing: inherit;
  -moz-box-sizing: inherit;
  box-sizing: inherit;
  margin: 0;
}
body {
  background: #fff;
  color: #373d3f;
  font: 300 1em/1.4 'Roboto Condensed', sans-serif;
}
a,
a:hover,
a:focus {
  color: #373d3f;
  text-decoration: none;
}
header {
  width: 100%;
  padding: 106px 46px 12px;
  text-align: center;
}
#logo, #hello{ display: inline-block }
#logo {
  background-image: url("logo.png");
  width: 138px;
  height: 137px;
}
#hello {
  text-indent: -9999px;
  background-image: url("hello.png");
  width: 132px;
  height: 78px;
  overflow: hidden;
}
#content .keywords span,
.footer a {
  text-transform: uppercase;
}
#content {
  max-width: 660px;
  margin: 0 auto;
  padding: 0 46px;
  font-size: 1.25em;
}
#content,
#content > .contact {
  display: block;
}
#content h1 {
  font-size: 1.875rem;
  font-weight: 300;
  line-height: 3.7;
  margin-top: 15px;
}
#content h1 > #hello {
  margin: 0 0 0 -19px;
}
#content > p {
  padding-top: 24px;
}
#content > p:first-of-type{
  margin-top: -24px;
}
#content .contact .half {
  padding-top: 32px;
  display: block;
}
#content .contact .half > strong,
#content .contact .half > a {
  display: block;
}
#content .contact .half > strong > span {
  color: #b12631;
}
@media all and (max-width: 640px) {
  #content .contact .half a {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }
}
#content .keywords {
  font: 100 1em/1.4 'Roboto', sans-serif;
  width: 100%;
  padding: 56px 0 64px;
  zoom: 1;
}
#content .keywords:after {
  content: '';
  display: block;
  clear: both;
}
#content .keywords span {
  font-size: 155%;
  text-align: center;
  display: block;
  float: left;
  width: 33.33%;
}
#content .keywords span:first-of-type {
  text-align: left;
}
#content .keywords span:last-of-type {
  text-align: right;
}
.footer {
  width: 100%;
  padding: 36px 0;
  text-align: center;
  line-height: 1.8;
  background: #383d3f;
}
.footer > div {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 46px;
}
.footer,
.footer a,
.footer a:hover,
.footer a:focus {
  color: #afb5af;
}
br.mobile-only {
  display: none;
}
@media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx) {
  #logo {
    background-image: url("logo@2x.png");
    background-size: 138px 138px;
  }
  #hello {
    background-image: url("hello@2x.png");
    background-size: 132px 78px;
  }
}
@media all and (max-width: 640px) {
  header {
    padding: 76px 46px 0;
  }
  #hello{ display: block;  }
  #content h1{ line-height: 1.0; margin-bottom: 24px;}
  #content br.mobile-only {
    display: block;
    margin: 24px 0 0;
  }
  #content .contact .half {
    width: 100%;
    display: block;
  }
  #content .contact .half:first-of-type {
    padding: 24px 0 0;
  }
  #content .contact .half:last-of-type {
    padding: 24px 0 0;
  }
  #content .keywords {
    padding: 0 0 46px;
  }
  #content .keywords span {
    padding-top: 24px;
    width: auto;
    text-align: center;
    margin-right: 0;
  }
  #content .keywords span:first-of-type {
    padding-top: 46px;
  }
  #content .keywords span:first-of-type,
  #content .keywords span:last-of-type {
    text-align: center;
  }
  #content .keywords span,
  #content .keywords span:last-of-type {
    float: none;
  }
}
