/* Fonts */
@import url("//fonts.googleapis.com/css?family=Source+Sans+Pro:100,200,300,400,600,400italic|Expletus+Sans:500");
/* Resets */
:root {
  box-sizing: border-box; }

*, :before, :after {
  box-sizing: inherit; }

/* Body */
body {
  font-family: "Source Sans Pro", "sans-serif";
  font-weight: 400;
  font-size: 16px;
  line-height: 1.25;
  margin: 0;
  padding: 0;
  color: #222;
  background-color: #fff; }

/* Headings */
h1, h2, h3, h4, h5 {
  color: #000;
  font-family: "Source Sans Pro", "sans-serif";
  font-weight: 300;
  margin: 1em 0 0 0; }

/* Links */
a {
  color: #26c;
  text-decoration: none; }

a:hover {
  color: #26c;
  text-decoration: underline; }

/* Layout */
header,
main,
footer {
  padding-left: 32px;
  padding-right: 32px; }

.l-container {
  margin: 0 auto;
  min-width: 512px;
  max-width: 1024px;
  clear: both; }

.l-cols {
  padding-right: 256px; }

.l-col-1 {
  float: left;
  width: 100%; }

.l-col-2 {
  float: right;
  width: 224px;
  margin-right: -256px; }

@media only screen and (max-width: 675px) {
  .l-cols {
    padding-right: 0; }
  .l-col-1 {
    float: none; }
  .l-col-2 {
    float: none;
    width: auto;
    margin-right: 0; } }

/* Brand */
.brand {
  font-family: 'Expletus Sans','sans-serif';
  font-weight: 500;
  margin: 0; }
  .brand a {
    color: #000; }

/* header */
header {
  background-color: #fff;
  padding-top: 16px;
  padding-bottom: 16px;
  position: relative;
  z-index: 100; }

header:after {
  content: '';
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  border-top: 1px solid rgba(0, 0, 0, 0.15);
  left: 0;
  position: absolute;
  top: 100%;
  width: 100%; }

/* Hero */
.hero {
  background-color: #EBE9EC;
  position: relative;
  height: 256px;
  z-index: 10; }
  .hero .hero-inner {
    height: 256px;
    background-image: url("../Images/hero-flask.jpg");
    background-position: 50% 50%;
    background-repeat: no-repeat; }

.retro-display body {
  background-color: #000;
  color: #fff; }

.retro-display .hero {
  background-color: transparent;
  height: 512px;
  position: fixed;
  top: 64px;
  width: 100%; }

.retro-display .hero .hero-inner {
  display: none; }

.retro-display .hero canvas {
  width: 100%;
  height: 100%; }

.retro-display main {
  background-color: rgba(0, 0, 0, 0.5);
  margin-top: 384px;
  overflow: hidden;
  position: relative;
  z-index: 200; }