@import url(https://fonts.googleapis.com/css?family=Roboto:100,300,400,500);
body {
  margin: 0; }

h1 {
  font-size: 63px;
  font-weight: 100; }

h2 {
  font-size: 3em;
  font-weight: 100; }

.header-wrapper {
  background: transparent radial-gradient(circle farthest-side at right bottom, #f96d21 5%, #f96d21 25%, #cc5a1c 80%, #b65019 98%) repeat scroll 0% 0%;
  font-family: 'Roboto', sans-serif;
  font-weight: 200;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.3);
  color: #eef0f2;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: 80px 800px;
  padding-left: 40px; }

.header-brand {
  grid-column: span 6;
  font-weight: 500;
  font-size: 1.7em;
  /* 16 * 0.0625 = 1px */
  letter-spacing: 0.125em;
  display: flex;
  align-items: center; }

.header-brand > svg {
  height: 50px;
  width: 50px;
  stroke: #eef0f2;
  fill: #eef0f2;
  filter: drop-shadow(0 1px 8px rgba(0, 0, 0, 0.3)); }

.header-brand > div {
  padding-left: 10px; }

.header-item {
  grid-column: span 2;
  font-weight: 400;
  letter-spacing: 0.08em;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-transform: uppercase; }

.header-item:hover {
  border-bottom: #ffd972 solid 3px; }

.header-hero {
  grid-column: span 5;
  font-size: 21px;
  font-weight: 300;
  line-height: 1.4;
  vertical-align: middle; }

.header-hero-img {
  grid-column: span 7;
  background-image: url("img/hero-screen2.png");
  background-size: 660px;
  background-repeat: no-repeat; }

.content-wrapper {
  background-color: #eef0f2;
  font-family: 'Roboto', sans-serif;
  font-weight: 200;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: 200px; }

.content-build, .content-run, .content-scale {
  grid-column: span 12;
  padding: 0px 20px 0px 20px;
  display: none; }

.content-build > h2, .content-run > h2, .content-scale > h2 {
  text-align: right; }

.footer {
  grid-column: span 12;
  background-color: #393d3f;
  box-shadow: 0px -2px 4px 0px rgba(33, 33, 33, 0.35);
  color: #d1d1d1; }