@import "_teaser";
html {
  font-family: 'Helvetica Neue', 'Lato', sans-serif; }
/* apply a natural box layout model to all elements, but allowing components to change */
html {
  box-sizing: border-box; }

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

body {
  /*background-color: #888;*/
  font-size: 10px; }

.pure-g * {
  font-family: 'Helvetica Neue', 'Lato', sans-serif;
  font-weight: 300; }

.container {
  max-width: 960px;
  margin: 0 auto;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
  background-color: #aaa; }

.header {
  background-color: rgba(0, 0, 0, 0.8);
  padding: 8px 8px;
  color: #eee;
  transition: all 1s ease;
  font-size: 1.7em; }

.header__transparent {
  opacity: 0.5; }

.panel {
  padding: 2px; }

.main-feature {
  margin-bottom: 1px;
  background-color: #333; }

.main-feature a {
  color: #fff;
  text-decoration: none;
  opacity: 0.6;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  transition: all 250ms ease; }

.main-feature a:hover {
  opacity: 1;
  border-bottom: 1px solid rgba(255, 255, 255, 9); }

.main-feature__title {
  margin: 0 0 8px 0; }

.main-feature__description {
  font-size: 1.2em;
  padding: 8px;
  background-color: #333;
  color: #fff; }

.sub-features {
  display: flex; }

.sub-features > div {
  padding-right: 1px;
  flex-basis: 25%;
  flex-wrap: wrap; }

.sub-features > div:last-child {
  padding-right: 0; }