@charset "UTF-8";
/**
    SNIPCART V2

    We strongly use BEM methodology
    Every rule must be written within .snip-layout class, to prevent basic conflict with your css
    Every class name must be prefix with "snip-"

    IMPORTANT you have to include snipcart's stylesheet AFTER all your stylesheets
*/
/*------------------------------------*    GLOBAL IMPORTS
\*------------------------------------*/
/**
    MIXINS

    [1]. Used to clear floating elements within a container
**/
/**
    CUSTOM FONT FAMILY

    We don't want to load many fonts on your site so we stay classic.
    You can add your custom fonts here and/or define your own fonts family variables.
*/
/**
    ICONS FONT
*/
/**
@font-face {
    font-family: "Snipcart";
    src: url('fonts/snipcart/Snipcart.woff?94043836') format("woff"),
         url('fonts/snipcart/Snipcart.ttf?94043836') format("truetype");
    font-weight: normal;
    font-style: normal;
}
**/
@font-face {
  font-family: 'fontello';
  src: url("fonts/fontello/font/fontello.eot?67682425");
  src: url("fonts/fontello/font/fontello.eot?67682425#iefix") format("embedded-opentype"), url("fonts/fontello/font/fontello.woff2?67682425") format("woff2"), url("fonts/fontello/font/fontello.woff?67682425") format("woff"), url("fonts/fontello/font/fontello.ttf?67682425") format("truetype"), url("fonts/fontello//fontello.svg?67682425#fontello") format("svg");
  font-weight: normal;
  font-style: normal; }

/**
    FONT HELPERS

    If you use custom fonts and you don't want browser side weighted/italic fonts:
    - remove font-weight (or add font-weight: normal for example)
    - add your font-family. Ex: font-family: 'myFont-bold';
*/
/**
    FONT SIZES
*/
/**
    MEDIA QUERIES

    Where all media queries' variables are defined
*/
/**
    COLOR

    Where all color's variables are defined

    Thanks to SASS Map, we can define all colors at one place.
    We also respect our BEM like notation and files architecture.
*/
/*------------------------------------*    GLOBAL VARIABLES
\*------------------------------------*/
/*------------------------------------*    LOCAL VARIABLES
\*------------------------------------*/
/*------------------------------------*    STYLE
\*------------------------------------*/
body.snip-open {
  height: auto !important;
  margin: 0 !important;
  overflow: hidden !important;
  padding: 0 !important; }

.snip-layout {
  background: rgba(123, 123, 123, 0.75);
  bottom: 0;
  color: #999;
  font-family: Arial, sans-serif;
  font-size: 14px;
  left: 0;
  line-height: normal;
  overflow-x: auto;
  padding: 0;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 1040;
  /**
    ICON

    We use icons font. You can use them with css pseudo elements.
    You can also use your own icon set. There's many online services to generate your iconfont (fontello, glyphter, icomoon, ...).
*/
  /*------------------------------------*    GLOBAL VARIABLES
\*------------------------------------*/
  /**
$snip-ico__font: "Snipcart";

$snip-ico--credit-cart: "\e805";
$snip-ico--truck: "\e804";
$snip-ico--letter: "\e803";
$snip-ico--receipt: "\e802";
$snip-ico--checklist: "\e801";
$snip-ico--basket: "\e800";
$snip-ico--check: "\e806";
$snip-ico--close: "\e807";
**/
  /*------------------------------------*    STYLE
\*------------------------------------*/
  /**
    RESET

    We reset to default value for each elements used in snipcart.
    Your style must not impact our style.
*/
  /*------------------------------------*    LOCAL VARIABLES
\*------------------------------------*/
  /*------------------------------------*    STYLE
\*------------------------------------*/
  /**
    BUTTON

    [1]. Classic gray button
    [2]. Smaller button for tooltip
    [3]. Next or validate yellow action button
    [4]. Position classes: right, left, full size button
*/
  /*------------------------------------*    LOCAL VARIABLES
\*------------------------------------*/
  /*------------------------------------*    STYLE
\*------------------------------------*/
  /**
    LAYOUT

    Snipcar main container, basic content container, modal elements, loading screen
*/
  /*------------------------------------*    LOCAL VARIABLES
\*------------------------------------*/
  /*------------------------------------*    STYLE
\*------------------------------------*/
  /**
    HEADER

    Top content for the Cart

    [1]. Connected user welcome message.
    [2]. If you keep the "js-show" class, title will be displayed on small size when there's no total block.
*/
  /*------------------------------------*    LOCAL VARIABLES
\*------------------------------------*/
  /*------------------------------------*    STYLE
\*------------------------------------*/
  /**
    FOOTER

    Footer container and copyright link
*/
  /*------------------------------------*    LOCAL VARIABLES
\*------------------------------------*/
  /*------------------------------------*    STYLE
\*------------------------------------*/
  /**
    ACTION

    Container for action step buttons

    [1]. Clear floating buttons
*/
  /*------------------------------------*    LOCAL VARIABLES
\*------------------------------------*/
  /*------------------------------------*    STYLE
\*------------------------------------*/
  /**
    TABLE

    [1]. Special jedi's mind trick, thanks to inheritance, we only style tbody or thead elements.
         Since we can't define `padding` or `border` for tbody, thead, tr elements, it's easier.
         And for mobile block table behavior, style is already set for those elements.
    [2]. Exception to low specificity rule, as it removes a lot of classes.
         For product table, on small device screen size, we use block display rather than table display.
*/
  /*------------------------------------*    LOCAL VARIABLES
\*------------------------------------*/
  /*------------------------------------*    STYLE
\*------------------------------------*/
  /**
    PRODUCT

    Product component, used for product items, shipping choices and payment methods

    [1]. Do not remove ".js-selected" class
*/
  /*------------------------------------*    LOCAL VARIABLES
\*------------------------------------*/
  /*------------------------------------*    STYLE
\*------------------------------------*/
  /**
    QUANTITY TRIGGER

    Component to modify product quantity in the cart

    [1]. We use flexbox here since overall browser support is about 95% worldwide.
    [2]. Also, as fallback, we 'float' the columns. If your browser doesn't support flexbox, columns will be
         properly positionned even if the columns won't have the same height (graceful degradation).
    [3]. You can choose your own symbol (or even custom icon font) for add and remove product.
*/
  /*------------------------------------*    LOCAL VARIABLES
\*------------------------------------*/
  /*------------------------------------*    STYLE
\*------------------------------------*/
  /**
    LOADER

    Loader element for product modifications
    
    [1]. Do not remove ".js-active" class.
*/
  /*------------------------------------*    LOCAL VARIABLES
\*------------------------------------*/
  /*------------------------------------*    STYLE
\*------------------------------------*/
  /**
    FORM

    Form elements, except for basic input and select styling (check _reset.scss).
    Also form fields errors.
*/
  /*------------------------------------*    LOCAL VARIABLES
\*------------------------------------*/
  /*------------------------------------*    STYLE
\*------------------------------------*/
  /**
    STEP

    Breadcrump list navigation for the cart

    [1]. We add user-select: none to prevent text selection on navigation items
*/
  /*------------------------------------*    LOCAL VARIABLES
\*------------------------------------*/
  /*------------------------------------*    STYLE
\*------------------------------------*/
  /**
    COLUMNS

    Basic grid system for the cart

    [1]. We use flexbox here since overall browser support is about 95% worldwide.
    [2]. Also, as fallback, we 'float' the columns. If your browser doesn't support flexbox, columns will be
         properly positionned even if the columns won't have the same height (graceful degradation).
    [3]. Thanks to flexbox, you can easily order columns. However, it won't be ordered for older browser.
*/
  /*------------------------------------*    LOCAL VARIABLES
\*------------------------------------*/
  /*------------------------------------*    STYLE
\*------------------------------------*/
  /**
    ERROR

    Errors text, except for form fields errors.
*/
  /*------------------------------------*    LOCAL VARIABLES
\*------------------------------------*/
  /*------------------------------------*    STYLE
\*------------------------------------*/
  /**
    STATIC

    Classic text and content blocks
*/
  /*------------------------------------*    LOCAL VARIABLES
\*------------------------------------*/
  /*------------------------------------*    STYLE
\*------------------------------------*/
  /**
    TOOLTIP

    For subscription payment on confirm order view

    [1]. You can choose your own symbol (or even custom icon font) for closed and opened state.
*/
  /*------------------------------------*    LOCAL VARIABLES
\*------------------------------------*/
  /*------------------------------------*    STYLE
\*------------------------------------*/
  /**
    FLASH

    Flash messages
*/
  /*------------------------------------*    LOCAL VARIABLES
\*------------------------------------*/
  /*------------------------------------*    STYLE
\*------------------------------------*/ }
  .snip-layout .snip-ico {
    -webkit-font-smoothing: antialiased;
    font-family: "Fontello";
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    line-height: 1;
    speak: none;
    text-transform: none; }
  .snip-layout .snip-ico--credit-cart:before {
    content: ""; }
  .snip-layout .snip-ico--truck:before {
    content: ""; }
  .snip-layout .snip-ico--letter:before {
    content: ""; }
  .snip-layout .snip-ico--receipt:before {
    content: ""; }
  .snip-layout .snip-ico--checklist:before {
    content: ""; }
  .snip-layout .snip-ico--basket:before {
    content: ""; }
  .snip-layout .snip-ico--check:before {
    content: ""; }
  .snip-layout .snip-ico--close:before {
    content: ""; }
  .snip-layout div,
  .snip-layout span,
  .snip-layout h1,
  .snip-layout h2,
  .snip-layout h3
h4,
  .snip-layout p,
  .snip-layout a,
  .snip-layout img,
  .snip-layout em,
  .snip-layout small,
  .snip-layout strong,
  .snip-layout ol,
  .snip-layout ul,
  .snip-layout li,
  .snip-layout form,
  .snip-layout label,
  .snip-layout table,
  .snip-layout tbody,
  .snip-layout thead,
  .snip-layout tr,
  .snip-layout th,
  .snip-layout td,
  .snip-layout dl,
  .snip-layout dt,
  .snip-layout dd {
    border: 0;
    box-sizing: border-box;
    font-size: 100%;
    font: inherit;
    line-height: inherit;
    margin: 0;
    padding: 0; }
  .snip-layout a,
  .snip-layout button {
    text-decoration: none;
    -webkit-transition: background 0.33s ease;
    transition: background 0.33s ease; }
  .snip-layout table {
    border-collapse: collapse;
    border-spacing: 0; }
  .snip-layout th,
  .snip-layout td {
    vertical-align: middle; }
  .snip-layout ol,
  .snip-layout ul {
    list-style: none; }
  .snip-layout input:focus, .snip-layout input:hover,
  .snip-layout select:focus,
  .snip-layout select:hover {
    box-shadow: none;
    outline: none; }
  .snip-layout input[type=text],
  .snip-layout input[type=password],
  .snip-layout select {
    background: #fff;
    border-radius: 3px;
    border: 1px solid #eee;
    box-sizing: border-box;
    color: #555;
    display: block;
    font-size: 14px;
    height: auto;
    line-height: 18px;
    margin: 0;
    padding: .571em .429em;
    -webkit-transition: border 0.66s ease;
    transition: border 0.66s ease;
    width: 100%; }
    .snip-layout input[type=text]:focus, .snip-layout input[type=text]:hover,
    .snip-layout input[type=password]:focus,
    .snip-layout input[type=password]:hover,
    .snip-layout select:focus,
    .snip-layout select:hover {
      border-color: #333; }
  .snip-layout .snip-btn {
    font-weight: 700;
    background-color: #555;
    border-radius: 3px;
    border: 0;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    font-size: 10px;
    height: 36px;
    line-height: 36px;
    outline: 0;
    padding: 0 1em;
    text-transform: uppercase; }
    .snip-layout .snip-btn:hover {
      background-color: #3c3c3c; }
    @media only screen and (min-width: 48em) {
      .snip-layout .snip-btn {
        font-size: 12px;
        padding: 0 2em; } }
  .snip-layout .snip-btn--small {
    height: auto;
    line-height: normal;
    padding: .417em; }
  .snip-layout .snip-btn--highlight {
    background: #485956;
    color: #fff; }
    .snip-layout .snip-btn--highlight:hover {
      background-color: #313d3b; }
  .snip-layout .snip-btn--left {
    float: left; }
  .snip-layout .snip-btn--right {
    float: right; }
  .snip-layout .snip-btn--full {
    display: block;
    margin-top: 1em;
    text-align: center; }
  .snip-layout .snip-layout__main-container {
    background: #fff;
    margin: 0 auto;
    max-width: 62.25em;
    position: relative; }
  .snip-layout .snip-layout__close {
    color: #fff;
    font-size: 1.8em;
    padding: .333em;
    padding: 0;
    position: absolute;
    right: .417em;
    top: .1em;
    z-index: 2; }
    @media only screen and (min-width: 48em) {
      .snip-layout .snip-layout__close {
        font-size: 1.5em;
        top: .208em; }
        .snip-layout .snip-layout__close.js-hidden {
          display: none; } }
  .snip-layout .snip-layout__loading {
    font-weight: 700;
    color: #333;
    padding: 5em 0;
    text-align: center;
    text-transform: uppercase;
    margin-top: -0.3em; }
  .snip-layout .snip-layout__content {
    padding: 1em 0; }
    @media only screen and (min-width: 48em) {
      .snip-layout .snip-layout__content {
        padding: 2em 0; } }
  .snip-layout .snip-layout__content--highlight {
    background-color: #f8f8f8;
    border-bottom: 1px solid #bbb;
    border-top: 1px solid #bbb;
    padding: 1em 0; }
  .snip-layout .snip-layout__content--bordered {
    border-bottom: 1px solid #eee; }
  .snip-layout .snip-header {
    font-weight: 700;
    background: #485956;
    color: #fff;
    padding: 1em;
    position: relative;
    text-align: left;
    text-transform: uppercase; }
    .snip-layout .snip-header h2 {
      color: #888; }
    @media only screen and (min-width: 48em) {
      .snip-layout .snip-header {
        color: #fff;
        height: 105px;
        padding: 0;
        text-align: center; } }
  .snip-layout .snip-header__user {
    background: #111;
    font-size: 14px;
    padding: .714em 1.429em;
    text-align: center; }
  .snip-layout .snip-header__user-text {
    max-width: 90%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin: auto; }
  .snip-layout .snip-header__user-mail {
    color: #fff; }
  .snip-layout .snip-header__title {
    display: none;
    font-size: 15px;
    text-align: center; }
    .snip-layout .snip-header__title.js-show {
      display: block; }
    @media only screen and (min-width: 48em) {
      .snip-layout .snip-header__title {
        display: block;
        font-size: 30px;
        left: 1.25em;
        line-height: 105px;
        position: absolute;
        text-align: left; } }
  .snip-layout .snip-header__total {
    background: #111;
    border-radius: 5px;
    display: inline-block;
    padding: .5em; }
    @media only screen and (min-width: 48em) {
      .snip-layout .snip-header__total {
        height: 38px;
        line-height: 38px;
        margin-top: 2.188em;
        padding: 0 .625em; } }
  .snip-layout .snip-header__total-label {
    color: #999;
    margin-right: .625em; }
  .snip-layout .snip-header__continue {
    display: none; }
    @media only screen and (min-width: 48em) {
      .snip-layout .snip-header__continue.js-show {
        display: block;
        margin-top: -1.5em;
        position: absolute;
        right: 1.25em;
        top: 50%; } }
  .snip-layout .snip-footer {
    background: #485956;
    padding: .125em .625em;
    text-transform: uppercase; }
  .snip-layout .snip-footer__copyright {
    background: url("img/lock.png") no-repeat left 0.3em;
    color: #888;
    display: inline-block;
    font-size: 10px;
    height: 35px;
    line-height: 35px;
    padding-left: 3.2em; }
  .snip-layout .snip-footer__highlight {
    color: #999; }
  .snip-layout .snip-actions {
    border-top: 1px solid #eee;
    padding: 1em; }
    .snip-layout .snip-actions::after {
      clear: both;
      content: "";
      display: table; }
    @media only screen and (min-width: 48em) {
      .snip-layout .snip-actions {
        padding: 20px; } }
  .snip-layout .snip-actions--no-border {
    border-top: none;
    padding-top: 0; }
  .snip-layout .snip-actions--top {
    border-top: none;
    border-bottom: 1px solid #eee; }
  .snip-layout .snip-actions__link {
    color: #999; }
  .snip-layout .snip-actions__link--small {
    font-size: 12px; }
  .snip-layout .snip-actions__link--right {
    float: right; }
  .snip-layout .snip-table {
    font-size: 14px;
    text-align: left;
    width: 100%; }
    .snip-layout .snip-table td, .snip-layout .snip-table th, .snip-layout .snip-table tr {
      border-bottom: 1px solid #eee;
      padding: inherit; }
      .snip-layout .snip-table td.snip-table__row--no-border, .snip-layout .snip-table th.snip-table__row--no-border, .snip-layout .snip-table tr.snip-table__row--no-border {
        border-bottom: none; }
        .snip-layout .snip-table td.snip-table__row--no-border td, .snip-layout .snip-table th.snip-table__row--no-border td, .snip-layout .snip-table tr.snip-table__row--no-border td {
          border-bottom: 0; }
  .snip-layout .snip-table .snip-table__cell__notices {
    margin: 0;
    padding: 0; }
    .snip-layout .snip-table .snip-table__cell__notices div {
      margin: 10px 20px 5px 20px;
      padding: 10px;
      border-radius: 5px; }
      .snip-layout .snip-table .snip-table__cell__notices div.snip-table__cell__notices--warning {
        background-color: #faf7d3;
        color: #333; }
      .snip-layout .snip-table .snip-table__cell__notices div.snip-table__cell__notices--error {
        background-color: #ff8577;
        color: #333; }
  @media only screen and (max-width: 48em) {
    .snip-layout .snip-table--small {
      display: block;
      font-size: 14px;
      text-align: left; }
      .snip-layout .snip-table--small td, .snip-layout .snip-table--small th, .snip-layout .snip-table--small tr {
        display: block; }
        .snip-layout .snip-table--small td:empty, .snip-layout .snip-table--small th:empty, .snip-layout .snip-table--small tr:empty {
          padding: 0;
          width: 0; }
      .snip-layout .snip-table--small tr {
        padding: 1em 0;
        position: relative; }
        .snip-layout .snip-table--small tr::after {
          clear: both;
          content: "";
          display: table; }
      .snip-layout .snip-table--small td {
        border: 0;
        padding: 1em; }
      .snip-layout .snip-table--small .snip-table__header {
        display: none; }
      .snip-layout .snip-table--small .snip-table__body {
        border: 0;
        display: block;
        padding: 0; }
        .snip-layout .snip-table--small .snip-table__body:empty {
          padding: 0; }
        .snip-layout .snip-table--small .snip-table__body ~ .snip-table__body {
          border-top: 1px solid #eee; }
          .snip-layout .snip-table--small .snip-table__body ~ .snip-table__body:empty {
            border: 0; }
      .snip-layout .snip-table--small .snip-table__body--small,
      .snip-layout .snip-table--small .snip-table__body--big {
        text-align: center; }
        .snip-layout .snip-table--small .snip-table__body--small tr,
        .snip-layout .snip-table--small .snip-table__body--small td,
        .snip-layout .snip-table--small .snip-table__body--big tr,
        .snip-layout .snip-table--small .snip-table__body--big td {
          padding: .5em;
          text-align: inherit; } }
  .snip-layout .snip-table__header {
    font-size: 12px;
    padding: 1em 2em;
    text-transform: uppercase; }
    .snip-layout .snip-table__header ~ .snip-table__header {
      border-top: 1px solid #eee; }
  .snip-layout .snip-table__body {
    border-top: 1px solid #eee;
    display: table-row-group;
    padding: 1.429em; }
  .snip-layout .snip-table__body--small {
    background: #f8f8f8; }
    @media only screen and (min-width: 48em) {
      .snip-layout .snip-table__body--small {
        padding: .429em 1.429em .429em 2.857em; } }
  .snip-layout .snip-table__body--big {
    font-size: 20px; }
    @media only screen and (min-width: 48em) {
      .snip-layout .snip-table__body--big {
        padding: 1.222em 1.111em 1.222em 1.222em; } }
  .snip-layout .snip-table__loading {
    text-align: center;
    font-size: 14px;
    color: #333;
    font-weight: bold;
    text-transform: uppercase; }
  .snip-layout .snip-table__cell--center {
    text-align: center; }
  @media only screen and (min-width: 48em) {
    .snip-layout .snip-table__cell--long-text {
      max-width: 20em; } }
  .snip-layout .snip-table__cell--right {
    text-align: right; }
  .snip-layout .snip-table__cell--clear::after {
    clear: both;
    content: "";
    display: table; }
  .snip-layout .snip-table__cell--invalid {
    text-decoration: line-through;
    font-weight: normal;
    display: block; }
  .snip-layout .snip-table__cell--bold {
    font-weight: 700; }
  .snip-layout .snip-table__cell--highlight {
    font-weight: 700;
    color: #333; }
  .snip-layout .snip-table__cell--success {
    font-weight: 700;
    color: #76d443; }
  @media only screen and (max-width: 48em) {
    .snip-layout .snip-table__small-col {
      float: left;
      margin-top: 2em;
      text-align: center;
      width: 33.333333%; }
      .snip-layout .snip-table__small-col + .snip-table__small-col {
        border-left: 1px solid #eee; } }
  .snip-layout .snip-product {
    background: #f8f8f8;
    border-top: 1px solid #eee;
    font-size: 14px;
    padding: 2em 1.25em; }
    .snip-layout .snip-product::after {
      clear: both;
      content: "";
      display: table; }
  .snip-layout .snip-product--selectable {
    cursor: pointer; }
  .snip-layout .snip-product--selectable-item {
    background: url("img/checkbox.png") no-repeat 0 center;
    padding-left: 2.286em; }
    .snip-layout .snip-product--selectable-item.js-selected {
      background-image: url("img/selected.png"); }
  .snip-layout .snip-product__thumbnail {
    display: none;
    float: left;
    height: 65px;
    margin-right: .714em;
    width: 65px; }
    .snip-layout .snip-product__thumbnail img {
      max-height: 100%;
      max-width: 100%; }
    @media only screen and (min-width: 48em) {
      .snip-layout .snip-product__thumbnail {
        display: block; } }
  .snip-layout .snip-product__name {
    font-weight: 700;
    color: #333;
    font-size: 1.125em;
    overflow: hidden;
    text-transform: uppercase; }
    @media only screen and (min-width: 48em) {
      .snip-layout .snip-product__name {
        font-size: 14px;
        margin-top: .5em; } }
  .snip-layout .snip-product__description {
    font-size: 12.44444px;
    margin-top: .25em;
    overflow: hidden; }
    @media only screen and (min-width: 48em) {
      .snip-layout .snip-product__description {
        font-size: 14px;
        margin-top: .5em; } }
  .snip-layout .snip-product__important {
    font-weight: 700;
    font-size: 12.44444px; }
    @media only screen and (min-width: 48em) {
      .snip-layout .snip-product__important {
        font-size: 14px; } }
  .snip-layout .snip-product__remove {
    color: #a10;
    font-size: 30px;
    position: static; }
    @media only screen and (max-width: 48em) {
      .snip-layout .snip-product__remove {
        position: absolute;
        right: 0.28571em;
        top: 0.57143em; } }
    @media only screen and (min-width: 48em) {
      .snip-layout .snip-product__remove {
        float: left;
        margin: -.154em .192em 0 0; } }
  .snip-layout .snip-product__remove--disabled {
    opacity: 0.2;
    cursor: default; }
  @media only screen and (min-width: 48em) {
    .snip-layout .snip-product__customfields {
      max-width: 200px; } }
  .snip-layout .snip-product__customfields-checkbox {
    float: left;
    margin: 0 .5em .75em 0; }
  .snip-layout .snip-product__empty {
    font-size: 20px;
    padding: 1em 2em;
    text-align: center;
    text-transform: uppercase; }
  .snip-layout .snip-quantity-trigger {
    font-weight: 700;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    color: #111;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin: 0 auto; }
  .snip-layout .snip-quantity-trigger__text {
    float: left;
    padding: 0 .313em; }
  .snip-layout .snip-quantity-trigger__btn--duplicate {
    background-color: #485956;
    border-radius: 30px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    color: #111;
    font-size: 22px;
    font-weight: 400;
    margin-top: -1.6px;
    line-height: 1.6;
    height: 1em;
    width: 1em; }
    .snip-layout .snip-quantity-trigger__btn--duplicate:hover {
      background-color: #313d3b; }
    .snip-layout .snip-quantity-trigger__btn--duplicate:before {
      display: block;
      height: 1em;
      width: 1em; }
  .snip-layout .snip-quantity-trigger__btn {
    background-color: #e7eceb;
    border-radius: 30px;
    color: inherit;
    float: left;
    font-size: 18px;
    font-weight: 400;
    height: 1em;
    width: 1em; }
    .snip-layout .snip-quantity-trigger__btn:hover {
      background-color: #485956; }
    .snip-layout .snip-quantity-trigger__btn:before {
      display: block;
      height: 1em;
      width: 1em; }
  .snip-layout .snip-quantity-trigger__btn--add:before {
    content: "+";
    line-height: 1em; }
  .snip-layout .snip-quantity-trigger__btn--minus:before {
    content: "-";
    line-height: 14px; }
  .snip-layout .snip-quantity-trigger__btn--disabled {
    background-color: #eee;
    color: #bbb;
    cursor: default; }
    .snip-layout .snip-quantity-trigger__btn--disabled:hover {
      background-color: #eee; }
  .snip-layout .snip-loader.js-active {
    background-image: url(img/ajax-loader.gif);
    background-position: center center;
    background-repeat: no-repeat; }
  .snip-layout .snip-loader--table.js-active {
    background-size: 20px 20px;
    height: 20px;
    width: 20px; }
  .snip-layout .snip-loader--bar {
    height: 0.3em;
    width: 100%;
    position: relative;
    overflow: hidden;
    background-color: #222;
    margin-top: -.3em; }
    .snip-layout .snip-loader--bar:before {
      display: block;
      position: absolute;
      content: "";
      left: -200px;
      width: 30%;
      height: 0.3em;
      background-color: #efe778;
      -webkit-animation: snip-loading 2s ease-in-out infinite;
      animation: snip-loading 2s ease-in-out infinite; }
    .snip-layout .snip-loader--bar.js-hidden {
      display: none; }

@-webkit-keyframes snip-loading {
  from {
    left: -30%; }
  to {
    left: 100%; } }

@keyframes snip-loading {
  from {
    left: -30%; }
  to {
    left: 100%; } }
  .snip-layout .snip-form--small {
    padding: 2em 15%;
    text-align: center; }
  .snip-layout .snip-form--discount {
    float: right;
    margin-right: .5em;
    max-width: 50%; }
    @media only screen and (min-width: 48em) {
      .snip-layout .snip-form--discount {
        margin-right: 1em;
        max-width: none; } }
  .snip-layout .snip-form__container {
    clear: left; }
    .snip-layout .snip-form__container::after {
      clear: both;
      content: "";
      display: table; }
    .snip-layout .snip-form__container + .snip-form__container {
      margin-top: 1em; }
  .snip-layout .snip-form__label {
    color: #999;
    display: block;
    font-size: 12px;
    margin: 0 0 .5em 0;
    overflow: hidden;
    text-transform: uppercase;
    cursor: pointer; }
  .snip-layout .snip-form__description {
    margin: 1em 0; }
  .snip-layout .snip-form__help {
    font-weight: 700;
    color: #333;
    float: right;
    font-size: 12px; }
    .snip-layout .snip-form__help:hover {
      text-decoration: underline; }
  .snip-layout .snip-form__select--small {
    float: left;
    width: 49%; }
    .snip-layout .snip-form__select--small ~ .snip-form__select--small {
      margin-left: 2%; }
  .snip-layout .snip-form__error {
    background: #a10;
    border-radius: 3px;
    color: #fff;
    font-size: 14px;
    padding: .357em;
    text-align: center; }
  .snip-layout .snip-steps {
    background: #ccc;
    display: block;
    height: 48px; }
    .snip-layout .snip-steps.snip-steps--4 li {
      width: 25%; }
    .snip-layout .snip-steps.snip-steps--5 li {
      width: 20%; }
    .snip-layout .snip-steps.snip-steps--6 li {
      width: 16.66667%; }
    .snip-layout .snip-steps.snip-steps--7 li {
      width: 14.28571%; }
    @media only screen and (min-width: 48em) {
      .snip-layout .snip-steps {
        height: 60px; } }
  .snip-layout .snip-step__item {
    background: #ccc;
    border-bottom: 1px solid #bbb;
    color: #999;
    cursor: pointer;
    display: table;
    float: left;
    height: inherit;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none; }
    @supports (display: flex) {
      .snip-layout .snip-step__item {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -webkit-justify-content: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -webkit-align-items: center;
        -ms-flex-align: center;
        align-items: center; } }
    .snip-layout .snip-step__item + .snip-step__item {
      border-left: 1px solid #bbb; }
    .snip-layout .snip-step__item.js-active {
      background: #fff;
      border-bottom-color: #fff;
      color: #333; }
    .snip-layout .snip-step__item.js-hidden {
      display: none; }
    @media only screen and (min-width: 48em) {
      .snip-layout .snip-step__item {
        -webkit-box-pack: initial;
        -webkit-justify-content: initial;
        -ms-flex-pack: initial;
        justify-content: initial; } }
  .snip-layout .snip-step__nb {
    display: table-cell;
    font-size: 27.2px;
    padding: 0 .25em;
    text-align: center;
    vertical-align: middle; }
    @media only screen and (min-width: 48em) {
      .snip-layout .snip-step__nb {
        font-size: 34px; } }
  .snip-layout .snip-step__label {
    display: none; }
    @media only screen and (min-width: 48em) {
      .snip-layout .snip-step__label {
        font-weight: 700;
        display: table-cell;
        font-size: 10px;
        line-height: 16px;
        padding-right: .5em;
        text-align: left;
        text-transform: uppercase;
        vertical-align: middle;
        width: 66.666666%; } }
    @media only screen and (min-width: 64em) {
      .snip-layout .snip-step__label {
        padding-right: 1em; } }
  @media only screen and (min-width: 48em) {
    .snip-layout .snip-cols {
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex; }
      .snip-layout .snip-cols::after {
        clear: both;
        content: "";
        display: table; } }
  .snip-layout .snip-col {
    padding: 0 1em 1em; }
    .snip-layout .snip-col + .snip-col {
      border-top: 1px solid #eee;
      padding-top: 1em; }
    @media only screen and (min-width: 48em) {
      .snip-layout .snip-col {
        float: left;
        padding: .25em 1.25em;
        width: 33.333333%; }
        .snip-layout .snip-col + .snip-col {
          border-left: 1px solid #eee;
          border-top: 0;
          padding-top: .25em; } }
  @media only screen and (min-width: 48em) {
    .snip-layout .snip-col--half {
      width: 50%; } }
  .snip-layout .snip-col--right {
    border-left: 1px solid #eee;
    -webkit-box-ordinal-group: 3;
    -webkit-order: 2;
    -ms-flex-order: 2;
    order: 2; }
  .snip-layout .snip-error {
    padding: 2em 15%; }
  .snip-layout .snip-error__text {
    color: #a10;
    font-size: 14px;
    margin-bottom: 1em; }
  .snip-layout .snip-error__text--centered {
    text-align: center; }
  .snip-layout .snip-error__title {
    font-weight: 700;
    color: #333;
    margin: 1em 0;
    text-align: center;
    text-transform: uppercase; }
  .snip-layout .snip-error__list {
    font-size: 14px;
    list-style: disc inside;
    margin: 2em 0; }
  .snip-layout .snip-error__list-item {
    padding: .25em 0; }
  .snip-layout .snip-error__textarea {
    width: 100%; }
  .snip-layout .snip-error__feedback {
    font-size: 14px;
    text-align: center;
    text-transform: uppercase; }
  .snip-layout .snip-static {
    padding: 1em 15%;
    text-align: center; }
  .snip-layout .snip-static--highlight {
    background: #f8f8f8;
    border-top: 1px solid #eee; }
  .snip-layout .snip-static__title {
    font-weight: 700;
    color: #333;
    font-size: 1em;
    text-transform: uppercase; }
  .snip-layout .snip-static__title--main {
    margin: .5em 1.429em 1em; }
  .snip-layout .snip-static__content {
    font-size: 12px;
    line-height: 1.6;
    margin-top: 1em; }
  .snip-layout .snip-static__item {
    max-width: 100%; }
    .snip-layout .snip-static__item ~ .snip-static__item {
      margin-top: 1.5em; }
  .snip-layout .snip-static__link {
    color: #999;
    display: inline-block;
    margin-top: .25em;
    text-decoration: underline; }
    .snip-layout .snip-static__link:hover {
      color: #333; }
  .snip-layout .snip-tooltip {
    background-color: #ccc;
    border-radius: 3px;
    bottom: 100%;
    display: none;
    margin-bottom: 15px;
    padding: 10px 20px;
    position: absolute;
    right: 0;
    text-align: center; }
    .snip-layout .snip-tooltip:after {
      border-color: #ccc transparent;
      border-style: solid;
      border-width: 15px 15px 0;
      bottom: -15px;
      content: "";
      display: block;
      left: 50%;
      position: absolute;
      -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
      transform: translateX(-50%);
      width: 0; }
  .snip-layout .snip-tooltip__toggle:before {
    content: "?";
    display: block;
    text-align: center;
    width: 1.5em; }
  .snip-layout .snip-tooltip__toggle.js-active:before {
    content: "-"; }
  .snip-layout .snip-tooltip__container {
    position: relative; }
  .snip-layout .snip-tooltip__list {
    color: #555; }
  .snip-layout .snip-tooltip__item {
    font-weight: 700;
    color: #111;
    margin-bottom: 5px; }
  .snip-layout .snip-flash__item {
    border-bottom: 1px solid #333;
    padding: 10px 20px;
    font-size: 12px; }
  .snip-layout .snip-flash__item--success {
    background-color: #76d443;
    color: #333; }
  .snip-layout .snip-flash__item--warn {
    background-color: #efe778;
    color: #333; }
  .snip-layout .snip-flash__item--error {
    background-color: #a10;
    color: #fff; }
  @media only screen and (min-width: 64em) {
    .snip-layout {
      font-size: 16px;
      padding: 1.5em 0; } }