/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; }
html, body, div, span, h1, h2, h3, h4, h5, h6, p, a, img, ul, li,
article, aside, footer, header, nav, section {
  margin: 0; padding: 0; border: 0;
  font-size: 100%; font: inherit; vertical-align: baseline;
}
article, aside, footer, header, nav, section { display: block; }
ul { list-style: none; }

/* ---- Base ---- */
html { -webkit-text-size-adjust: 100%; }
body {
  line-height: 1;
  font-family: 'Montserrat', Arial, Helvetica, sans-serif;
  font-weight: 400;
  font-size: 100%;
  color: #444;
  -webkit-font-smoothing: antialiased;
  background: #333333;
}
br.clearfloat {
  font-size: 1px; line-height: 0; margin: 0;
  clear: both; height: 0; display: block;
}
h1, h2, h3, h4, h5, h6 {
  font-family: 'Montserrat', Arial, Helvetica, sans-serif;
  font-weight: 600;
  letter-spacing: 1px;
  margin: 0;
}
a { color: #005cb9; text-decoration: underline; }
a:hover { text-decoration: none; }
p, li { font-size: 0.9rem; line-height: 1.3; }

/* ---- Table helpers for vertical centring ---- */
div.table { display: table; height: 100%; }
div.table_cell { display: table-cell; vertical-align: middle; }

/* ---- Fixed header bar ---- */
header.main {
  position: fixed; top: 0; left: 0; width: 100%;
  height: 50px; padding: 0 10px;
  background: rgba(25, 23, 21, 0.9);
  z-index: 2000;
}
div.sitebranding {
  position: relative; float: left; height: 100%;
}
div.sitebranding img { max-height: 40px; max-width: 200px; }
div.sitebranding_cpu {
  position: relative; float: right; height: 100%;
}
div.sitebranding_cpu img { max-width: 120px; max-height: 30px; }

/* ---- Hero banner ---- */
div.header_wrapper {
  background-color: #0c1829;
  background-image: url('/assets/images/nano_banner-wrapper.jpg');
  background-size: cover;
  background-position: bottom center;
}
div.banner_wrapper {
  position: relative; width: auto; height: auto;
  padding: 50px 30px 0 30px;
  border-bottom: 1px solid #005CB9;
}
div.banner {
  position: relative; width: auto; max-width: 1200px;
  height: auto; margin: 0 auto; padding: 150px 0;
}
div.banner div.intro_block {
  float: left; width: auto; padding: 20px;
  background: rgba(0, 0, 0, 0.5);
}
div.banner div.intro_block p {
  font-family: 'Montserrat', Arial, Helvetica, sans-serif;
  font-weight: 600;
  font-size: 2.3rem; line-height: 1.2;
  letter-spacing: normal; color: white;
}
div.banner div.intro_block p.highlight {
  font-family: 'Montserrat', Arial, Helvetica, sans-serif;
  font-weight: 600;
  font-size: 1.6rem;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: #a5d1fa;
  margin-top: 5px;
}

/* ---- Main content area ---- */
div.content_wrapper {
  padding: 50px 30px;
  background: white;
  position: relative;
}
article.main {
  width: auto; max-width: 1200px; height: auto; margin: 0 auto;
}
article h1 { font-size: 2em; margin-bottom: 20px; }
article p { margin-bottom: 15px; }

/* ---- Footer ---- */
section.footer_wrapper { width: 100%; height: auto; padding-bottom: 70px; }
footer.top {
  position: relative; width: auto; height: 60px;
  background: #444444;
}
footer.top div.logo { float: left; margin: 15px 20px; }
footer.top div.logo img { max-width: 100%; max-height: 40px; }
footer.btm {
  width: auto; height: auto; margin: 0 auto; padding: 15px 20px;
}
footer.btm p { font-size: 0.75em; text-align: right; color: #93897f; }
nav.footer { float: left; }
nav.footer ul { margin: 0; list-style: none; }
nav.footer a { font-size: 0.75rem; color: white; text-decoration: none; }
nav.footer a:focus,
nav.footer a:hover { text-decoration: underline; }