/*!normalize.css v3.0.1 | MIT License | git.io/normalize */
html {
  font-family: sans-serif;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%; }

body {
  margin: 0; }

article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary {
  display: block; }

audio, canvas, progress, video {
  display: inline-block;
  vertical-align: baseline; }

audio:not([controls]) {
  display: none;
  height: 0; }

[hidden], template {
  display: none; }

a {
  background: transparent; }

a:active, a:hover {
  outline: 0; }

abbr[title] {
  border-bottom: 1px dotted; }

b, strong {
  font-weight: bold; }

dfn {
  font-style: italic; }

h1 {
  font-size: 2em;
  margin: .67em 0; }

mark {
  background: #ff0;
  color: #000; }

small {
  font-size: 80%; }

sub, sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline; }

sup {
  top: -0.5em; }

sub {
  bottom: -0.25em; }

img {
  border: 0; }

svg:not(:root) {
  overflow: hidden; }

figure {
  margin: 1em 40px; }

hr {
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  height: 0; }

pre {
  overflow: auto; }

code, kbd, pre, samp {
  font-family: monospace,monospace;
  font-size: 1em; }

button, input, optgroup, select, textarea {
  color: inherit;
  font: inherit;
  margin: 0; }

button {
  overflow: visible; }

button, select {
  text-transform: none; }

button, html input[type="button"], input[type="reset"], input[type="submit"] {
  -webkit-appearance: button;
  cursor: pointer; }

button[disabled], html input[disabled] {
  cursor: default; }

button::-moz-focus-inner, input::-moz-focus-inner {
  border: 0;
  padding: 0; }

input {
  line-height: normal; }

input[type="checkbox"], input[type="radio"] {
  box-sizing: border-box;
  padding: 0; }

input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button {
  height: auto; }

input[type="search"] {
  -webkit-appearance: textfield;
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
  box-sizing: content-box; }

input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none; }

fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: .35em .625em .75em; }

legend {
  border: 0;
  padding: 0; }

textarea {
  overflow: auto; }

optgroup {
  font-weight: bold; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

td, th {
  padding: 0; }

/* ==========================================================================
   Most theme settings should be stored in Sassy CSS variables here, for reuse.
   ========================================================================== */
/*!theme settings */
/* Table of content */
/* 1.  Base styles
   2.  Forms
   3.  Tables
   4.  Layout
   5.  Header
   6.  Navigation
   7.  Tags
   8.  Social and payment methods
   9.  Blog
   10. Product and collection pages
   11. Search form and search results
   12. Footer
*/
/* =====================
   1. Base styles
   ===================== */
html, body {
  background-color: white;
  font-size: 16px;
  line-height: 1.6;
  font-family: "Source Sans Pro", sans-serif;
  color: #898989; }

.paragraph-margins, h1, h2, h3, h4, h5, h6, p, form > div, .rte ul, .rte ol, .selector-wrapper, #searchresults, footer > * {
  margin: 0 0 12px; }

.grid-margins, .product-photo-container {
  margin: 0 0 16px; }

.section-margins, section, #customer, ul, ol, table, header, #main, #site-title, .product-details > div,
.product-details > p {
  margin: 0 0 32px; }

h1, h2, h3, h4, h5, h6 {
  font-family: "Source Sans Pro", sans-serif;
  font-weight: 600;
  text-rendering: optimizeLegibility;
  /* to enable ligatures and kerning */ }

/* http://modularscale.com/scale/?px1=16&px2=32&ra1=1.667&ra2=0 */
.tera {
  font-size: 88.928px;
  line-height: 1; }

.giga, #site-title {
  font-size: 74.112px;
  line-height: 1; }

.mega {
  font-size: 53.344px;
  line-height: 1; }

.alpha, h1 {
  font-size: 44.464px;
  line-height: 1.1; }

.beta, #main > h1, #main .title, .product-details h1, h2 {
  font-size: 32px;
  line-height: 1.1; }

.gamma, h3 {
  font-size: 26.672px;
  line-height: 1.2; }

.delta, h4 {
  font-size: 19.2px;
  line-height: 1.4; }

.epsilon, h5 {
  font-size: 16px;
  line-height: 1.6; }

.zeta, .small-print, .date, .comment-date, h6 {
  font-size: 11.52px;
  line-height: 1.6; }

/* Styling all pages main heading in one fell swoop. */
/* Responsive images and videos. */
img, iframe {
  max-width: 100%; }

.quiet {
  color: #a3a3a3; }

.hint {
  color: #afafaf; }

i, em {
  font-style: italic; }

b, strong {
  font-weight: 600; }

a {
  color: #898989;
  text-decoration: none; }
  a:hover {
    color: #707070; }
  header a, footer a {
    white-space: nowrap;
    color: #898989; }
  header a:hover, footer a:hover {
    color: #707070; }

/* No list style for lists except in RTE content. */
ul, ol {
  list-style-type: none;
  padding: 0; }

.rte ul {
  list-style-type: disc;
  list-style-position: inside; }

.rte ol {
  list-style-type: decimal;
  list-style-position: inside; }

/* =================
   2. Forms
   ================= */
/* Remove placeholder text in inputs when they get focus. */
input:focus::-webkit-input-placeholder {
  color: transparent; }

input:focus::-moz-placeholder {
  color: transparent; }

label {
  display: block; }

select {
  display: inline-block;
  margin: 0;
  padding: .3em 2em .3em 0.6em;
  color: #898989;
  border: 0;
  border-radius: .25em;
  cursor: pointer;
  outline: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: url(//cdn.shopify.com/s/files/1/0069/1647/2889/t/11/assets/arrow-down.svg?v=14914598578120277221) right 0.4em center no-repeat;
  background-color: #ededed; }

@-moz-document url-prefix() {
  /* Impossible to hide the native arrow in Firefox.
     https://gist.github.com/joaocunha/6273016
     Please upvote the bug: https://bugzilla.mozilla.org/show_bug.cgi?id=649849 */
  select {
    background-image: none;
    padding-right: 0; }

  /* Getting rid of dotted line around text in Firefox. */
  select:-moz-focusring {
    color: transparent;
    text-shadow: 0 0 0 #000; } }

/* Getting rid of arrow in IE10 and IE11. */
select::-ms-expand {
  display: none; }

/* Using default arrow with no box in IE8 and IE9. */
.ie8 select, .ie9 select {
  background: #cccccc none;
  padding: 5px;
  border: 1px; }

/* Text inputs. */
textarea, input[type="text"], input[type="email"], input[type="url"], input[type="tel"], input[type="date"], input[type="search"], input[type="number"], input[type="password"] {
  display: inline-block;
  max-width: 100%;
  padding: .4em .6em;
  background-color: transparent;
  border: #e6e6e6 1px solid;
  border-radius: .25em;
  outline: none;
  -webkit-appearance: none; }

.input.small, input.quantity, input[type="number"] {
  width: 50px; }

.input.medium, input[type="search"], #searchresults input[type="search"] {
  width: 150px; }

.input.large, textarea, input[type="text"], input[type="email"], input[type="url"], input[type="tel"], input[type="date"], input[type="password"] {
  width: 300px; }

.input.full-width {
  width: 100%; }

@media (max-width: 480px) {
  textarea, input[type="text"], input[type="email"], input[type="url"], input[type="tel"], input[type="date"], input[type="password"] {
    width: 100%; } }

/* All buttons. */
.button, input[type="submit"], input[type="button"], button, .tag, .subcategories > li, .blog-tags > li {
  display: inline-block;
  padding: .4em .6em;
  background-color: #e6e6e6;
  border: #e6e6e6 1px solid;
  border-radius: .25em;
  text-decoration: none;
  text-transform: uppercase;
  text-rendering: optimizeLegibility; }
  .button:hover, input[type="submit"]:hover, input[type="button"]:hover, button:hover, .tag:hover, .subcategories > li:hover, .blog-tags > li:hover {
    background-color: #cccccc; }

.disabled {
  pointer-events: none;
  opacity: 0.5; }

#searchresults input[type="submit"] {
  width: inherit; }

/* Big, important buttons get a special treatment */
.primary.button, input.primary[type="submit"], input.primary[type="button"], button.primary, .primary.tag, .subcategories > li.primary, .blog-tags > li.primary {
  padding: .5em .7em;
  font-size: 1.2rem;
  background-color: #898989;
  border-color: #898989;
  color: white; }
  .primary.button:hover, input.primary[type="submit"]:hover, input.primary[type="button"]:hover, button.primary:hover, .primary.tag:hover, .subcategories > li.primary:hover, .blog-tags > li.primary:hover {
    background-color: #707070; }

/* For search and newsletter forms, eliminate any spacing between the text box and submit button on the right. */
.inline-collapse input, .search-form input {
  float: left; }
.inline-collapse input:first-child, .search-form input:first-child {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0; }
.inline-collapse input:last-child, .search-form input:last-child {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0; }

/* For IE8. */
.lt-ie9 .inline-collapse input, .lt-ie9 .search-form input, .lt-ie9 #searchresults .inline-collapse input, .lt-ie9 #searchresults .search-form input {
  display: inline-block;
  zoom: 1;
  width: 130px; }

.lt-ie9 .inline-collapse, .lt-ie9 .search-form {
  display: block;
  width: 300px; }

/* ================
   3. Tables
   ================ */
table {
  width: 100%; }
  table th, table td {
    padding: 1em; }
  table tr {
    border-bottom: #e6e6e6 1px solid; }
  table th {
    text-align: left; }

/* ================
   4. Layout
   ================ */
/* Control the web page maximum width. */
.container {
  width: 85%;
  max-width: 960px;
  margin: 0 auto;
  padding: 16px 0; }

/* Safeguards for floats. */
/* Add some space below main section. */
/* Using border-box makes it easier to work with grids:
   See http://www.paulirish.com/2012/box-sizing-border-box-ftw/ */
*, *:before, *:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box; }

/* The Grid. */
.row, .grid, .product {
  margin-left: -16px;
  margin-right: -16px;
  margin-bottom: 16px;
  clear: both; }

.column, .grid > li, .product-photos, .product-details {
  float: left;
  padding-left: 16px;
  padding-right: 16px;
  padding-bottom: 16px; }

.column.full, .grid > li.full, .full.product-photos, .full.product-details {
  width: 100%; }

.column.three-quarters, .grid > li.three-quarters, .three-quarters.product-photos, .three-quarters.product-details {
  width: 75%; }

.column.two-thirds, .grid > li.two-thirds, .two-thirds.product-photos, .two-thirds.product-details {
  width: 66.6%; }

.column.half, .grid > li.half, .two-per-row, .product-photos, .product-details {
  width: 50%; }

.column.third, .grid > li.third, .three-per-row, .third.product-photos, .third.product-details {
  width: 33.3%; }

.column.fourth, .grid > li.fourth, .four-per-row, .fourth.product-photos, .fourth.product-details {
  width: 25%; }

.column.fifth, .grid > li.fifth, .five-per-row, .fifth.product-photos, .fifth.product-details {
  width: 20%; }

.column.sixth, .grid > li.sixth, .six-per-row, .sixth.product-photos, .sixth.product-details {
  width: 16.6%; }

.column.flow-opposite, .grid > li.flow-opposite, .flow-opposite.product-photos, .flow-opposite.product-details {
  float: right; }

@media (max-width: 480px) {
  .column, .grid > li, .product-photos, .product-details {
    float: none;
    width: 100% !important; } }
/* Clearfix applied to .row because row content is floated. */
/* Show and hide depending on screen size. */
@media (max-width: 480px) {
  .show-on-large, .show-on-medium, .hide-on-small {
    display: none; } }
@media (min-width: 480px) {
  .hide-on-large, .show-on-medium, .show-on-small {
    display: none; } }
/* IE8 does not support media queries */
.lt-ie9 .show-on-medium, .lt-ie9 .show-on-small {
  display: none; }

/* Contain floats: nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before, .inline-collapse:before, .search-form:before, header:before, #main:before, footer:before, .row:before, .grid:before, .product:before, .clearfix:after, .inline-collapse:after, .search-form:after, header:after, #main:after, footer:after, .row:after, .grid:after, .product:after {
  content: '';
  display: table; }

.clearfix:after, .inline-collapse:after, .search-form:after, header:after, #main:after, footer:after, .row:after, .grid:after, .product:after {
  clear: both; }

.clearfix, .inline-collapse, .search-form, header, #main, footer, .row, .grid, .product {
  zoom: 1; }

/* Utility classes: Hidden, float left, float right, etc. */
.hidden {
  display: none; }

.left {
  float: left;
  padding-right: 16px; }

.right {
  float: right;
  padding-left: 16px; }

.centered, footer {
  text-align: center; }

.left-aligned {
  text-align: left; }
  @media (max-width: 480px) {
    .left-aligned {
      text-align: center;
      margin: 16px 0; } }

.right-aligned {
  text-align: right; }
  @media (max-width: 480px) {
    .right-aligned {
      text-align: center;
      margin: 16px 0; } }

.clear, header, #main, footer {
  clear: both; }

.clear-after {
  *zoom: 1; }

.clear-after:after {
  content: '';
  display: table;
  clear: both; }

/* ==================
   5. Header
   ================== */
#site-title {
  display: block;
  color: #898989;
  text-decoration: none; }

#logo {
  display: block;
  margin: 8px auto; }
  #logo img {
    max-height: 180px; }

/* ==================
   6. Navigation
   =================== */
/* Main navigation with drop-down menu support */
@media (max-width: 480px) {
  nav.left {
    float: none;
    display: block;
    padding-right: 0;
    width: 100%;
    text-align: center; } }
/* =====================
   7. Tags
   ===================== */
.tag, .subcategories > li, .blog-tags > li {
  margin: 0 5.33333px 5.33333px 0;
  padding: .2em .5em; }
  .tag a, .subcategories > li a, .blog-tags > li a {
    text-decoration: none;
    color: #898989; }
  .tag.active, .subcategories > li.active, .blog-tags > li.active {
    background-color: #898989;
    border-color: #898989; }
    .tag.active a, .subcategories > li.active a, .blog-tags > li.active a {
      color: white; }

.subcategories, .blog-tags {
  font-size: 0; }

.subcategories > li, .blog-tags > li {
  font-size: 13.6px; }

/* ==============
   8. Social
   ============== */
.social-links a {
  font-size: 1.4rem;
  line-height: 2rem;
  display: inline-block;
  padding-right: 2.66667px;
  text-decoration: none; }

/* IE8 does not support SVG. */
.lt-ie9 .payment-types {
  display: none; }

/* ===========
   9. Blog
   =========== */
/* Separating articles with a border on the blog landing page.*/
.template-blog .article {
  border-bottom: #f2f2f2 0.07rem solid;
  padding: 16px 0; }
  .template-blog .article.first {
    padding-top: 0; }
  .template-blog .article.last {
    border-bottom: none; }

/* All blog images should stretch to the full width on small screens. */
@media (max-width: 480px) {
  .template-article .article img {
    display: block;
    width: 100% !important;
    float: none !important;
    margin-top: 8px !important;
    margin-bottom: 8px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    clear: both; } }
.meta > span + span {
  padding-left: 8px; }

/* Square element that contains the blog image, which is
set as a centered background image. */
.square-holder {
  display: block;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  height: 0;
  padding-bottom: 100%; }

/* Fading out content so that the height of the article excerpt
always matches the height of the blog image on the left. */
.fadeout-overflow-bottom {
  position: relative;
  height: 0;
  padding-bottom: 33.33%;
  overflow: hidden; }

.fadeout-overflow-bottom:after {
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 48px;
  background: linear-gradient(to top, white 0, rgba(255, 255, 255, 0) 100%);
  pointer-events: none; }

/* On small screens, we don't truncate content, and don't fade
it out since the blog image is full-width, and the excerpt
is below it. */
@media (max-width: 480px) {
  .fadeout-overflow-bottom {
    height: auto;
    padding-bottom: 0; }

  .fadeout-overflow-bottom:after {
    background: transparent; } }
.lt-ie9 .fadeout-overflow-bottom {
  height: auto;
  padding-bottom: 0; }

#comments {
  margin: 32px 0; }

/* ==========================================================================
  10. Product and collection pages.
  ========================================================================== */
/* Quickly hiding default variant drop-down when JavaScript is enabled */
/* See this: http://www.learningjquery.com/2008/10/1-way-to-avoid-the-flash-of-unstyled-content/ */
.js #product-select {
  display: none; }

/* Product option wrapper. */
.sort-by {
  margin-top: .25rem; }

@media (max-width: 480px) {
  .sort-by {
    float: none;
    margin-bottom: 16px; } }
.prod-caption {
  margin: 2.66667px 0; }

.product-photo-thumb:nth-child(2n+1) {
  clear: both; }

@media (max-width: 480px) {
  .two-per-row.product-photo-thumb {
    width: 50% !important;
    float: left !important; } }
/* ======================================
   11. Search form and search results
   ====================================== */
/* Override to globally-hosted search.css on the /search page */
/* Styling all search forms. You can reuse this for newsletter signup form. */
.search-form {
  display: inline-block;
  margin-top: 3.2px; }

/* Hiding search form in header on small screens */
@media (max-width: 480px) {
  header .search-form {
    display: none; } }
/* =====================
   12. Footer
   ===================== */
footer a + a {
  padding-left: 10.656px; }