@font-face {
  font-family: 'm+ 1c';
  src: url('fonts/mplus-1c-black.ttf') format('truetype');
  font-weight: 900;
}

@font-face {
  font-family: 'm+ 1c';
  src: url('fonts/mplus-1c-heavy.ttf') format('truetype');
  font-weight: 800;
}

@font-face {
  font-family: 'm+ 1c';
  src: url('fonts/mplus-1c-bold.ttf') format('truetype');
  font-weight: 700;
}

@font-face {
  font-family: 'm+ 1c';
  src: url('fonts/mplus-1c-medium.ttf') format('truetype');
  font-weight: 500;
}

@font-face {
  font-family: 'm+ 1c';
  src: url('fonts/mplus-1c-regular.ttf') format('truetype');
  font-weight: 400;
}

@font-face {
  font-family: 'm+ 1c';
  src: url('fonts/mplus-1c-light.ttf') format('truetype');
  font-weight: 300;
}

@font-face {
  font-family: 'm+ 1c';
  src: url('fonts/mplus-1c-thin.ttf') format('truetype');
  font-weight: 100;
}

body {
  background-color: #232323;
  color: #fff;
  font-family: 'm+ 1c', "Helvetica Neue";
  font-size: 22px;
  line-height: 1.5;
  margin: 0;
}

h1, h2, h3 {
  font-size: 48px;
  font-weight: 600;
  line-height: 1;
}

h3 {
  font-size: 28px;
  margin: 30px 0 0 0;
  padding: 8px 0;
}

h4 {
  font-size: 28px;
  margin: 30px 0 0 0;
  padding: 8px 0;
  font-weight: 300;
}

ol {
  margin: 30px 0;
}

hr {
  border: 0px;
  border-bottom: 2px solid black;
}

input, textarea {
  font-size: 22px;
}

input.error, textarea.error {
  border: 2px solid #f00;
}

textarea {
  height: 120px;
  width: 276px;
  box-sizing: border-box;
}

.wrapper {
  margin: 0 auto;
  max-width: 950px;
}
.wrapper:after {
  content: "";
  display: table;
  clear: both;
}

.section {
  padding: 22px;
}

.section.head {
  background-color: #232323;
}

.section.hero {
  padding-top: 0;
}

.section.hero h1 {
  font-size: 96px;
}

.heropic {
  display: block;
  width: 100%;
}

.specs {
  column-count: 4;
}

.specs .part {
  padding-bottom: 30px;
  -webkit-column-break-inside: avoid;
}

.specs h3 {
  margin: 0;
}

.specs ul {
  margin: 0;
  padding: 0;
}

.specs li {
  list-style-type: none;
  padding: 2px 0;
}

.colleft, .colright {
  float: left;
  width: 50%;
  box-sizing: border-box;
}

.colleft {
  padding-right: .5em;
}

.colright {
  padding-left: .5em;
}

.cta {
  background-image: -webkit-image-set(image-url(cta) 1x, image-url(cta_2x) 2x);
  background-position: center right;
  background-repeat: no-repeat;
  box-sizing: border-box;
  color: #000;
  display: block;
  font-size: 18px;
  font-weight: 500;
  line-height: 25px;
  margin-left: -10px;
  padding: 5px 10px;
  text-decoration: none;
}

.intro {
  font-size: 28px;
  margin-bottom: 4rem;
}

.q {
  font-weight: 600;
}
.v {
  font-style: italic;
  font-size: 14px;
}

.error {
  color: #f00;
}

.manual {
  color: #eee;
}

.manual p {
  margin: 1.5em 0;
}

.manual h2 {
  margin-top: 2em;
}

.manual h3 {
  margin-top: 2em;
  font-weight: 500;
  color: #999;
}

.manual img {
  max-width: 50%;
}

@media (min-width: 767px) {
  .section.hero {
      padding-bottom: 100px;
  }
}

@media (max-width: 767px) {
  .section.hero h1 {
    font-size: 48px;
  }

  .specs {
    column-count: 2;
  }
}

@media (max-width: 479px) {
  .intro {
    font-size: 18px;
    margin-bottom: 2rem;
  }

  .section.hero img {
    margin-top: 0px;
  }

  .specs {
    column-count: 1;
  }

  body {
    font-size: 16px;
  }
}