@font-face {
  font-family: 'MaterialDesignIcons';
  src: url('/css/fonts/materialdesignicons-webfont.woff2?v=1') format('woff2'), url('/css/fonts/materialdesignicons-webfont.woff?v=1') format('woff'), url('/css/fonts/materialdesignicons-webfont.ttf?v=1') format('truetype');
  font-weight: normal !important;
  font-style: normal !important; }

body {
  background-color: #2e3057;
  font: 14px/1.5em "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; }

a {
  color: #2f4f4f; }
  a:hover {
    color: #a6a8b2; }

h1, h2, h3, h4, h5, h6 {
  color: #2e3158;
  line-height: 1;
  font-family: Tahoma, Geneva, sans-serif;
  font-weight: normal; }

.cart-button {
  text-decoration: none;
  background-image: -webkit-linear-gradient(top, #eee, #a6a8b3);
  /* Safari 5.1+, Chrome 10+ */
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#eee', endColorstr='#a6a8b3')";
  /* IE8+ */
  background-image: linear-gradient(to bottom, #eee, #a6a8b3);
  color: #2e3158;
  border-radius: 6px;
  text-shadow: 0 1px #ddd;
  display: block;
  cursor: pointer;
  line-height: 2em;
  border: 1px solid #888;
  font-weight: bold;
  text-align: center;
  font-size: 14px;
  padding: 0 6px; }
  .cart-button:hover {
    text-decoration: none; }

.main-menu {
  list-style: none; }

.main-menu--link {
  text-decoration: none; }

.site-header {
  background: #fff; }

.site-content {
  background: #fff;
  padding: 12px; }

.site-content--header {
  margin: 6px 0 36px;
  background: #b6b9ca;
  font-size: 18px;
  padding: 0 12px;
  color: #fff;
  line-height: 2em; }

.site-content--footer {
  background: #f4f5f7;
  text-align: center;
  list-style: none;
  padding: 6px; }
  .site-content--footer li {
    display: inline; }
  .site-form {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    padding-bottom: 24px; }

.site-form--column {
  -webkit-flex: 1 1 auto;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  padding: 0 12px; }

@media screen and (min-width: 641px) {
  .site-form--column {
    -webkit-flex: 1 1 50%;
    -ms-flex: 1 1 50%;
    flex: 1 1 50%;
    max-width: 300px; } }

.site-footer {
  font-size: 0.75em;
  color: #789;
  text-align: center;
  padding: 12px; }

@media screen and (max-width: 640px) {
  .site-header {
    padding: 12px; }

  .main-menu {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 100;
    background: transparent;
    overflow: visible;
    max-width: 100px;
    transition: max-width 0.2s; }
    .main-menu::before {
      content: attr(data-mobile-button);
      cursor: default;
      padding: 12px;
      display: block; }

  .main-menu--item {
    display: none; }

  ._main-menu-is-open {
    overflow: hidden; }
    ._main-menu-is-open .main-menu {
      position: fixed;
      background: #000;
      color: #fff;
      height: 100%;
      overflow: auto;
      max-width: 80%; }
      ._main-menu-is-open .main-menu::after {
        content: "";
        position: fixed;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        z-index: -1; }
    ._main-menu-is-open .main-menu--item {
      display: block; }
    ._main-menu-is-open .main-menu--link {
      color: #fff;
      display: block;
      padding: 12px;
      border-top: 1px solid #444; }

  .site-content--footer {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    -webkit-justify-content: space-between;
    -moz-justify-content: space-between;
    justify-content: space-between;
    padding: 12px; } }

@media screen and (min-width: 641px) {
  .site-header {
    margin: 24px auto 0 auto;
    border: 6px solid #cfd1d8;
    border-bottom: none;
    padding: 18px;
    padding-bottom: 0;
    max-width: 960px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex; }

  .main-menu {
    -webkit-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    list-style: none;
    text-align: right; }

  .main-menu--item {
    display: inline-block; }

  .main-menu--link {
    display: block;
    padding: 0 12px;
    transition: color 0.4s; }

  .site-content {
    border: 6px solid #cfd1d8;
    border-top: none;
    margin: 0 auto;
    max-width: 960px;
    padding: 18px; }

  .site-content--footer {
    text-align: right;
    display: block; }
    .site-content--footer a {
      padding: 0 10px; } }