/*============================================================================
  Shopify Timber
  Copyright 2015 Shopify Inc.
  Author Carson Shold @cshold
  Built with Sass - http://sass-lang.com/

  Some things to know about this file:
    - Sass is compiled on Shopify's server so you don't need to convert it to CSS yourself
    - The output CSS is compressed and comments are removed
    - You cannot use @imports in this file
        * Use grunt or gulp tasks to enable @imports - https://github.com/Shopify/shopify-css-import
    - Helpers variables, mixins, and starter classes are provided. Change as needed.
    - The file is prepped with a CSS reset
    - The font icons are prepared using https://icomoon.io/app
==============================================================================*/

/*============================================================================
  Table of Contents

  #Breakpoint and Grid Variables
  #General Variables
  #Sass Mixins
  #Normalize
  #Grid Setup
  #Basic Styles
  #Helper Classes
  #Typography
  #Rich Text Editor
  #Links and Buttons
  #Lists
  #Tables
  #Reponsive Tables
  #OOCSS Media Object
  #Images and Iframes
  #Forms
  #Icons
  #Pagination
  #Site Header
  #Site Nav and Dropdowns
  #Mobile Nav
  #Drawers
  #Site Footer
  #Product and Collection Grids
  #Collection Filters
  #Breadcrumbs
  #Product Page
  #Notes and Form Feedback
  #Cart Page
  #Ajax Cart Styles
==============================================================================*/

/*============================================================================
  #Breakpoint and Grid Variables
==============================================================================*/
{% if settings.enable_product_progressbar %}
$progress_margin:-10px;

{% else %}

     $progress_margin:30px;

{% endif %}

div#progressBar_back {
    position: relative;
    top: -31px;
    z-index: -1;
}
div#progressBar {
    position: relative;
    width: 100%;
    padding-right: 70%;
}
  div#progressBar{
border-radius: 7px 0px 0px 7px !important;
  }

.flip-clock-wrapper{

   margin-top:$progress_margin;

}
$viewportIncrement: 1px;

$small: 480px;
$medium: 768px;
$large: 769px;

$postSmall: $small + $viewportIncrement;
$preMedium: $medium - $viewportIncrement;
$preLarge: $large - $viewportIncrement;

/*================ The following are dependencies of csswizardry grid ================*/
$breakpoints: (
  'small' '(max-width: #{$small})',
  'medium' '(min-width: #{$postSmall}) and (max-width: #{$medium})',
  'medium-down' '(max-width: #{$medium})',
  'large' '(min-width: #{$large})'
);
$breakpoint-has-widths: ('small', 'medium', 'medium-down', 'large');
$breakpoint-has-push:  ('medium', 'medium-down', 'large');
$breakpoint-has-pull:  ('medium', 'medium-down', 'large');

/*============================================================================
  #General Variables
==============================================================================*/

// Timber Colors
$colorPrimary: {{ settings.color_primary }};
$colorSecondary: {{ settings.color_secondary }};

// Button colors
$colorBtnPrimary: $colorPrimary;
$colorBtnPrimaryHover: darken($colorBtnPrimary, 10%);
$colorBtnPrimaryActive: darken($colorBtnPrimaryHover, 10%);
$colorBtnPrimaryText: #fff;

$colorBtnSecondary: $colorSecondary;
$colorBtnSecondaryHover: darken($colorBtnSecondary, 10%);
$colorBtnSecondaryActive: darken($colorBtnSecondaryHover, 10%);
$colorBtnSecondaryText: #fff;

// Text link colors
$colorLink: $colorPrimary;
$colorLinkHover: lighten($colorPrimary, 15%);

// Text colors
$colorTextBody: {{ settings.color_body_text }};

// sale button color and bg
$saleButton: {{ settings.sale_button_option_one_color }};

$saleButton_text_color: {{ settings.sale_button_option__text_one_color }};

$buyButton_text_color: {{ settings.buy_button_text_color }};

// header color
$headerColor: {{ settings.header_bg }};

// Backgrounds
$colorBody: {{ settings.color_body_bg }};

// Border colors
$colorBorder: {{ settings.color_borders }};

// pop up color
$upsell_popup_color: {{ settings.upsell_popup_color }};
$upsell_headline_color: {{ settings.upsell_headline_color }};
$button_yes_color: {{ settings.button_yes_color }};
$button_no_color: {{ settings.button_no_color }};

// Nav and dropdown link background
$colorNav: #f2f2f2;
$colorNavText: #333;

// Site Footer
$colorFooterBg: {{ settings.color_footer_bg }};
$colorFooterText: {{ settings.color_footer_text }};
$footerShareIcon: {{ settings.color_footer_share_icon }};

// header strip
$headerStripBg: {{ settings.header_strip_bg }};
$headerStripColor: {{ settings.header_strip_color }};

// Logo max width
$logoMaxWidth: {{ settings.logo_max_width | default: '450' | remove: 'px' }}px;

// Helper colors
$disabledGrey: #f6f6f6;
$disabledBorder: darken($disabledGrey, 25%);
$errorRed: #d02e2e;
$errorRedBg: #fff6f6;
$successGreen: #56ad6a;
$successGreenBg: #ecfef0;

// Drawers
$drawerNavWidth: 300px;
$drawerCartWidth: 300px;
$colorDrawers: #f6f6f6;
$colorDrawerBorder: darken($colorDrawers, 5%);
$colorDrawerText: #333;
$drawerTransition: all 0.4s cubic-bezier(0.46, 0.01, 0.32, 1);

// Sizing variables
$siteWidth: 1180px;
$gutter: 30px;
$gridGutter: 30px; // can be a %, but nested grids will have smaller margins because of it
$radius: 3px;

// Z-index
$zindexNavDropdowns: 5;
$zindexDrawer: 10;

//visitors counter css settings

$visitor_counter_color: {{ settings.counter_visitor_color }};
$visitor_counter_bg_color: {{ settings.counter_visitor_bg }};


/*================ Typography ================*/

$headerFontStack: 'HelveticaNeue', 'Helvetica Neue', Helvetica, Arial, sans-serif;
$headerFontWeight: 700;

$bodyFontStack: 'HelveticaNeue', 'Helvetica Neue', Helvetica, Arial, sans-serif;
$baseFontSize: 14px; // Henseforth known as 1em

@font-face {
  font-family: 'icons';
  src: url('{{ "icons.eot" | asset_url }}');
  src: url('{{ "icons.eot" | asset_url }}#iefix') format("embedded-opentype"),
       url('{{ "icons.woff" | asset_url }}') format("woff"),
       url('{{ "icons.ttf" | asset_url }}') format("truetype"),
       url('{{ "icons.svg" | asset_url }}#timber-icons') format("svg");
  font-weight: normal;
  font-style: normal;
}
$socialIconFontStack: 'icons';


/*============================================================================
  #Sass Mixins
==============================================================================*/
.clearfix {
  &:after {
    content: '';
    display: table;
    clear: both; }
  *zoom: 1;
}

@mixin clearfix() {
  &:after {
    content: '';
    display: table;
    clear: both; }
  *zoom: 1;
}

/*============================================================================
  Prefixer mixin for generating vendor prefixes:
    - Based on https://github.com/thoughtbot/bourbon/blob/master/app/assets/stylesheets/addons/_prefixer.scss
    - Usage:

      // Input:
      .element {
        @include prefixer(transform, scale(1), ms webkit spec);
      }

      // Output:
      .element {
        -ms-transform: scale(1);
        -webkit-transform: scale(1);
        transform: scale(1);
      }
==============================================================================*/

@mixin prefixer($property, $value, $prefixes) {
  @each $prefix in $prefixes {
    @if $prefix == webkit {
      -webkit-#{$property}: $value;
    } @else if $prefix == moz {
      -moz-#{$property}: $value;
    } @else if $prefix == ms {
      -ms-#{$property}: $value;
    } @else if $prefix == o {
      -o-#{$property}: $value;
    } @else if $prefix == spec {
      #{$property}: $value;
    } @else  {
      @warn "Unrecognized prefix: #{$prefix}";
    }
  }
}

@mixin transform($transform) {
  @include prefixer(transform, $transform, ms webkit spec);
}

@mixin user-select($value: none) {
  @include prefixer(user-select, $value, webkit moz ms spec);
}

@mixin backface($visibility: hidden) {
  @include prefixer(backface-visibility, $visibility, webkit spec);
}

@function em($target, $context: $baseFontSize) {
  @if $target == 0 {
    @return 0;
  }
  @return $target / $context + 0em;
}

@function color-control($color) {
  @if (lightness( $color ) > 40) {
    @return #000;
  }
  @else {
    @return #fff;
  }
}

/*============================================================================
  Layer promotion mixin for creating smoother animations with higher FPS.
==============================================================================*/
@mixin promote-layer($properties: transform) {
  /*-webkit-transform: translateZ(0); // translateZ hack
  will-change: $properties; // spec*/
}

/*============================================================================
  Dependency-free breakpoint mixin
    - Based on http://blog.grayghostvisuals.com/sass/sass-media-query-mixin/
    - Usage docs: http://shopify.github.io/Timber/#sass-mixins
==============================================================================*/
$min: min-width;
$max: max-width;
@mixin at-query ($constraint_, $viewport1_, $viewport2_:null) {
 $constraint: $constraint_; $viewport1: $viewport1_; $viewport2: $viewport2_;
  @if type-of($constraint_) == number {
    $viewport1 : $constraint_; $viewport2 : $viewport1_; $constraint : null;
  }
  @if $constraint == $min {
    @media screen and ($min: $viewport1) {
      @content;
    }
  } @else if $constraint == $max {
    @media screen and ($max: $viewport1) {
      @content;
    }
  } @else {
    @media screen and ($min: $viewport1) and ($max: $viewport2) {
      @content;
    }
  }
}

/*============================================================================
  #Normalize
==============================================================================*/
*, input, :before, :after {
  box-sizing: border-box;
}

html, body {
  padding: 0;
  margin: 0;
}

button:focus {
    outline: none;
}

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

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

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

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

/*============================================================================
  #Grid Setup
    - Based on csswizardry grid, but with floated columns, a fixed gutter size, and BEM classes
    - Breakpoints defined above, under #Breakpoint and Grid Variables
    - Note the inclusion of .grid-uniform to take care of clearfixes on evenly sized grid items
==============================================================================*/
$responsive:         true;
$mobile-first:       true;
$use-silent-classes: false;
$push:               true;
$pull:               false;

/* Force clearfix on grids */
.grid,
.grid-uniform {
  @include clearfix;
}

/* Manual grid__item clearfix */
.grid__item.clear {
  clear: both;
}

$class-type: unquote(".");

@if $use-silent-classes == true {
  $class-type: unquote("%");
}

@mixin grid-media-query($media-query) {
  $breakpoint-found: false;

  @each $breakpoint in $breakpoints {
    $name: nth($breakpoint, 1);
    $declaration: nth($breakpoint, 2);

    @if $media-query == $name and $declaration {
      $breakpoint-found: true;

      @media only screen and #{$declaration} {
        @content;
      }
    }
  }

  @if $breakpoint-found == false {
    @warn "Breakpoint '#{$media-query}' does not exist";
  }
}


/*============================================================================
  Drop relative positioning into silent classes which can't take advantage of
  the `[class*="push--"]` and `[class*="pull--"]` selectors.
==============================================================================*/
@mixin silent-relative() {
  @if $use-silent-classes == true {
    position:relative;
  }
}

/*============================================================================
  Grid Setup
    1. Allow the grid system to be used on lists.
    2. Remove any margins and paddings that might affect the grid system.
    3. Apply a negative `margin-left` to negate the columns' gutters.
==============================================================================*/
#{$class-type}grid,
#{$class-type}grid-uniform {
  list-style: none;
  margin: 0;
  padding: 0;
  margin-left: -$gridGutter;
}

#{$class-type}grid__item {
  box-sizing: border-box;
  float: left;
  min-height: 1px;
  padding-left: $gridGutter;
  vertical-align: top;
  @if $mobile-first == true {
    width: 100%;
  }
}

/*============================================================================
  Reversed grids allow you to structure your source in the opposite
  order to how your rendered layout will appear.
==============================================================================*/
#{$class-type}grid--rev {
  @extend #{$class-type}grid;
  direction: rtl;
  text-align: left;

  > #{$class-type}grid__item {
    direction: ltr;
    text-align: left;
    float: right;
  }
}

/* Gutterless grids have all the properties of regular grids, minus any spacing. */
#{$class-type}grid--full {
  @extend #{$class-type}grid;
  margin-left: 0;

  > #{$class-type}grid__item {
    padding-left: 0;
  }
}

/*============================================================================
  WIDTHS
    - Create width classes, prefixed by the specified namespace.
==============================================================================*/
@mixin device-type($namespace:"") {
  /** Whole */
  #{$class-type}#{$namespace}one-whole       { width: 100%; }

  /* Halves */
  #{$class-type}#{$namespace}one-half        { width: 50%; }

  /* Thirds */
  #{$class-type}#{$namespace}one-third       { width: 33.333%; }
  #{$class-type}#{$namespace}two-thirds      { width: 66.666%; }

  /* Quarters */
  #{$class-type}#{$namespace}one-quarter     { width: 25%; }
  #{$class-type}#{$namespace}two-quarters    { width: 50%; }
  #{$class-type}#{$namespace}three-quarters  { width: 75%; }

  /* Fifths */
  #{$class-type}#{$namespace}one-fifth       { width: 20%; }
  #{$class-type}#{$namespace}two-fifths      { width: 40%; }
  #{$class-type}#{$namespace}three-fifths    { width: 60%; }
  #{$class-type}#{$namespace}four-fifths     { width: 80%; }

  /* Sixths */
  #{$class-type}#{$namespace}one-sixth       { width: 16.666%; }
  #{$class-type}#{$namespace}two-sixths      { width: 33.333%; }
  #{$class-type}#{$namespace}three-sixths    { width: 50%; }
  #{$class-type}#{$namespace}four-sixths     { width: 66.666%; }
  #{$class-type}#{$namespace}five-sixths     { width: 83.333%; }

  /* Eighths */
  #{$class-type}#{$namespace}one-eighth      { width: 12.5%; }
  #{$class-type}#{$namespace}two-eighths     { width: 25%; }
  #{$class-type}#{$namespace}three-eighths   { width: 37.5%; }
  #{$class-type}#{$namespace}four-eighths    { width: 50%; }
  #{$class-type}#{$namespace}five-eighths    { width: 62.5%; }
  #{$class-type}#{$namespace}six-eighths     { width: 75%; }
  #{$class-type}#{$namespace}seven-eighths   { width: 87.5%; }

  /* Tenths */
  #{$class-type}#{$namespace}one-tenth       { width: 10%; }
  #{$class-type}#{$namespace}two-tenths      { width: 20%; }
  #{$class-type}#{$namespace}three-tenths    { width: 30%; }
  #{$class-type}#{$namespace}four-tenths     { width: 40%; }
  #{$class-type}#{$namespace}five-tenths     { width: 50%; }
  #{$class-type}#{$namespace}six-tenths      { width: 60%; }
  #{$class-type}#{$namespace}seven-tenths    { width: 70%; }
  #{$class-type}#{$namespace}eight-tenths    { width: 80%; }
  #{$class-type}#{$namespace}nine-tenths     { width: 90%; }

  /* Twelfths */
  #{$class-type}#{$namespace}one-twelfth     { width: 8.333%; }
  #{$class-type}#{$namespace}two-twelfths    { width: 16.666%; }
  #{$class-type}#{$namespace}three-twelfths  { width: 25%; }
  #{$class-type}#{$namespace}four-twelfths   { width: 33.333%; }
  #{$class-type}#{$namespace}five-twelfths   { width: 41.666% }
  #{$class-type}#{$namespace}six-twelfths    { width: 50%; }
  #{$class-type}#{$namespace}seven-twelfths  { width: 58.333%; }
  #{$class-type}#{$namespace}eight-twelfths  { width: 66.666%; }
  #{$class-type}#{$namespace}nine-twelfths   { width: 75%; }
  #{$class-type}#{$namespace}ten-twelfths    { width: 83.333%; }
  #{$class-type}#{$namespace}eleven-twelfths { width: 91.666%; }
}

/*================ Clearfix helper on uniform grids ================*/
@mixin clearfix-helper($namespace:"") {
  .grid-uniform {
    #{$class-type}#{$namespace}one-half:nth-child(2n+1),
    #{$class-type}#{$namespace}one-third:nth-child(3n+1),
    #{$class-type}#{$namespace}one-quarter:nth-child(4n+1),
    #{$class-type}#{$namespace}one-fifth:nth-child(5n+1),
    #{$class-type}#{$namespace}one-sixth:nth-child(6n+1),
    #{$class-type}#{$namespace}two-sixths:nth-child(3n+1),
    #{$class-type}#{$namespace}three-sixths:nth-child(2n+1),
    #{$class-type}#{$namespace}two-eighths:nth-child(4n+1),
    #{$class-type}#{$namespace}four-eighths:nth-child(2n+1),
    #{$class-type}#{$namespace}five-tenths:nth-child(2n+1),
    #{$class-type}#{$namespace}one-twelfth:nth-child(12n+1),
    #{$class-type}#{$namespace}two-twelfths:nth-child(6n+1),
    #{$class-type}#{$namespace}three-twelfths:nth-child(4n+1),
    #{$class-type}#{$namespace}four-twelfths:nth-child(3n+1),
    #{$class-type}#{$namespace}six-twelfths:nth-child(2n+1)    { clear: both; }
  }
}

/*================ Helper show/hide classes around our breakpoints ================*/
@mixin device-helper($namespace:"") {
  #{$class-type}#{$namespace}show        { display: block!important; }
  #{$class-type}#{$namespace}hide        { display: none!important; }

  #{$class-type}#{$namespace}text-left   { text-align: left!important; }
  #{$class-type}#{$namespace}text-right  { text-align: right!important; }
  #{$class-type}#{$namespace}text-center { text-align: center!important; }

  #{$class-type}#{$namespace}left        { float: left!important; }
  #{$class-type}#{$namespace}right       { float: right!important; }
}

/*================ Our regular, non-responsive width and helper classes ================*/
@include device-type();
@include device-helper();

/*================ Our responsive classes, if we have enabled them ================*/
@if $responsive == true {
  @each $name in $breakpoint-has-widths {
    @include grid-media-query($name) {
      @include device-type('#{$name}--');
      @include device-helper('#{$name}--');
      @include clearfix-helper('#{$name}--');
    }
  }
}

/*============================================================================
  PUSH
    - Push classes, to move grid items over to the right by certain amounts
==============================================================================*/
@mixin push-setup($namespace: "") {
  /* Whole */
  #{$class-type}push--#{$namespace}one-whole       { left: 100%; @include silent-relative(); }

  /* Halves */
  #{$class-type}push--#{$namespace}one-half        { left: 50%; @include silent-relative(); }

  /* Thirds */
  #{$class-type}push--#{$namespace}one-third       { left: 33.333%; @include silent-relative(); }
  #{$class-type}push--#{$namespace}two-thirds      { left: 66.666%; @include silent-relative(); }

  /* Quarters */
  #{$class-type}push--#{$namespace}one-quarter     { left: 25%; @include silent-relative(); }
  #{$class-type}push--#{$namespace}two-quarters    { left: 50%; @include silent-relative(); }
  #{$class-type}push--#{$namespace}three-quarters  { left: 75%; @include silent-relative(); }

  /* Fifths */
  #{$class-type}push--#{$namespace}one-fifth       { left: 20%; @include silent-relative(); }
  #{$class-type}push--#{$namespace}two-fifths      { left: 40%; @include silent-relative(); }
  #{$class-type}push--#{$namespace}three-fifths    { left: 60%; @include silent-relative(); }
  #{$class-type}push--#{$namespace}four-fifths     { left: 80%; @include silent-relative(); }

  /* Sixths */
  #{$class-type}push--#{$namespace}one-sixth       { left: 16.666%; @include silent-relative(); }
  #{$class-type}push--#{$namespace}two-sixths      { left: 33.333%; @include silent-relative(); }
  #{$class-type}push--#{$namespace}three-sixths    { left: 50%; @include silent-relative(); }
  #{$class-type}push--#{$namespace}four-sixths     { left: 66.666%; @include silent-relative(); }
  #{$class-type}push--#{$namespace}five-sixths     { left: 83.333%; @include silent-relative(); }

  /* Eighths */
  #{$class-type}push--#{$namespace}one-eighth      { left: 12.5%; @include silent-relative(); }
  #{$class-type}push--#{$namespace}two-eighths     { left: 25%; @include silent-relative(); }
  #{$class-type}push--#{$namespace}three-eighths   { left: 37.5%; @include silent-relative(); }
  #{$class-type}push--#{$namespace}four-eighths    { left: 50%; @include silent-relative(); }
  #{$class-type}push--#{$namespace}five-eighths    { left: 62.5%; @include silent-relative(); }
  #{$class-type}push--#{$namespace}six-eighths     { left: 75%; @include silent-relative(); }
  #{$class-type}push--#{$namespace}seven-eighths   { left: 87.5%; @include silent-relative(); }

  /* Tenths */
  #{$class-type}push--#{$namespace}one-tenth       { left: 10%; @include silent-relative(); }
  #{$class-type}push--#{$namespace}two-tenths      { left: 20%; @include silent-relative(); }
  #{$class-type}push--#{$namespace}three-tenths    { left: 30%; @include silent-relative(); }
  #{$class-type}push--#{$namespace}four-tenths     { left: 40%; @include silent-relative(); }
  #{$class-type}push--#{$namespace}five-tenths     { left: 50%; @include silent-relative(); }
  #{$class-type}push--#{$namespace}six-tenths      { left: 60%; @include silent-relative(); }
  #{$class-type}push--#{$namespace}seven-tenths    { left: 70%; @include silent-relative(); }
  #{$class-type}push--#{$namespace}eight-tenths    { left: 80%; @include silent-relative(); }
  #{$class-type}push--#{$namespace}nine-tenths     { left: 90%; @include silent-relative(); }

  /* Twelfths */
  #{$class-type}push--#{$namespace}one-twelfth     { left: 8.333%; @include silent-relative(); }
  #{$class-type}push--#{$namespace}two-twelfths    { left: 16.666%; @include silent-relative();  }
  #{$class-type}push--#{$namespace}three-twelfths  { left: 25%; @include silent-relative(); }
  #{$class-type}push--#{$namespace}four-twelfths   { left: 33.333%; @include silent-relative(); }
  #{$class-type}push--#{$namespace}five-twelfths   { left: 41.666%; @include silent-relative(); }
  #{$class-type}push--#{$namespace}six-twelfths    { left: 50%; @include silent-relative(); }
  #{$class-type}push--#{$namespace}seven-twelfths  { left: 58.333%; @include silent-relative(); }
  #{$class-type}push--#{$namespace}eight-twelfths  { left: 66.666%; @include silent-relative(); }
  #{$class-type}push--#{$namespace}nine-twelfths   { left: 75%; @include silent-relative(); }
  #{$class-type}push--#{$namespace}ten-twelfths    { left: 83.333%; @include silent-relative(); }
  #{$class-type}push--#{$namespace}eleven-twelfths { left: 91.666%; @include silent-relative(); }
}

@if $push == true {
  [class*="push--"]{ position:relative; }

  @include push-setup();

  @if $responsive == true {
    @each $name in $breakpoint-has-push {
      @include grid-media-query($name) {
        @include push-setup('#{$name}--');
      }
    }
  }
}

/*============================================================================
  PULL
    - Pull classes, to move grid items back to the left by certain amounts
==============================================================================*/
@mixin pull-setup($namespace: "") {
  /* Whole */
  #{$class-type}pull--#{$namespace}one-whole       { right: 100%; @include silent-relative(); }

  /* Halves */
  #{$class-type}pull--#{$namespace}one-half        { right: 50%; @include silent-relative(); }

  /* Thirds */
  #{$class-type}pull--#{$namespace}one-third       { right: 33.333%; @include silent-relative(); }
  #{$class-type}pull--#{$namespace}two-thirds      { right: 66.666%; @include silent-relative(); }

  /* Quarters */
  #{$class-type}pull--#{$namespace}one-quarter     { right: 25%; @include silent-relative(); }
  #{$class-type}pull--#{$namespace}two-quarters    { right: 50%; @include silent-relative(); }
  #{$class-type}pull--#{$namespace}three-quarters  { right: 75%; @include silent-relative(); }

  /* Fifths */
  #{$class-type}pull--#{$namespace}one-fifth       { right: 20%; @include silent-relative(); }
  #{$class-type}pull--#{$namespace}two-fifths      { right: 40%; @include silent-relative(); }
  #{$class-type}pull--#{$namespace}three-fifths    { right: 60%; @include silent-relative(); }
  #{$class-type}pull--#{$namespace}four-fifths     { right: 80%; @include silent-relative(); }

  /* Sixths */
  #{$class-type}pull--#{$namespace}one-sixth       { right: 16.666%; @include silent-relative(); }
  #{$class-type}pull--#{$namespace}two-sixths      { right: 33.333%; @include silent-relative(); }
  #{$class-type}pull--#{$namespace}three-sixths    { right: 50%; @include silent-relative(); }
  #{$class-type}pull--#{$namespace}four-sixths     { right: 66.666%; @include silent-relative(); }
  #{$class-type}pull--#{$namespace}five-sixths     { right: 83.333%; @include silent-relative(); }

  /* Eighths */
  #{$class-type}pull--#{$namespace}one-eighth      { right: 12.5%; @include silent-relative(); }
  #{$class-type}pull--#{$namespace}two-eighths     { right: 25%; @include silent-relative(); }
  #{$class-type}pull--#{$namespace}three-eighths   { right: 37.5%; @include silent-relative(); }
  #{$class-type}pull--#{$namespace}four-eighths    { right: 50%; @include silent-relative(); }
  #{$class-type}pull--#{$namespace}five-eighths    { right: 62.5%; @include silent-relative(); }
  #{$class-type}pull--#{$namespace}six-eighths     { right: 75%; @include silent-relative(); }
  #{$class-type}pull--#{$namespace}seven-eighths   { right: 87.5%; @include silent-relative(); }

  /* Tenths */
  #{$class-type}pull--#{$namespace}one-tenth       { right: 10%; @include silent-relative(); }
  #{$class-type}pull--#{$namespace}two-tenths      { right: 20%; @include silent-relative(); }
  #{$class-type}pull--#{$namespace}three-tenths    { right: 30%; @include silent-relative(); }
  #{$class-type}pull--#{$namespace}four-tenths     { right: 40%; @include silent-relative(); }
  #{$class-type}pull--#{$namespace}five-tenths     { right: 50%; @include silent-relative(); }
  #{$class-type}pull--#{$namespace}six-tenths      { right: 60%; @include silent-relative(); }
  #{$class-type}pull--#{$namespace}seven-tenths    { right: 70%; @include silent-relative(); }
  #{$class-type}pull--#{$namespace}eight-tenths    { right: 80%; @include silent-relative(); }
  #{$class-type}pull--#{$namespace}nine-tenths     { right: 90%; @include silent-relative(); }

  /* Twelfths */
  #{$class-type}pull--#{$namespace}one-twelfth     { right: 8.333%; @include silent-relative(); }
  #{$class-type}pull--#{$namespace}two-twelfths    { right: 16.666%; @include silent-relative(); }
  #{$class-type}pull--#{$namespace}three-twelfths  { right: 25%; @include silent-relative(); }
  #{$class-type}pull--#{$namespace}four-twelfths   { right: 33.333%; @include silent-relative(); }
  #{$class-type}pull--#{$namespace}five-twelfths   { right: 41.666%; @include silent-relative(); }
  #{$class-type}pull--#{$namespace}six-twelfths    { right: 50%; @include silent-relative(); }
  #{$class-type}pull--#{$namespace}seven-twelfths  { right: 58.333%; @include silent-relative(); }
  #{$class-type}pull--#{$namespace}eight-twelfths  { right: 66.666%; @include silent-relative(); }
  #{$class-type}pull--#{$namespace}nine-twelfths   { right: 75%; @include silent-relative(); }
  #{$class-type}pull--#{$namespace}ten-twelfths    { right: 83.333%; @include silent-relative(); }
  #{$class-type}pull--#{$namespace}eleven-twelfths { right: 91.666%; @include silent-relative(); }
}

@if $pull == true {
  [class*="pull--"]{ position:relative; }

  @include pull-setup();

  @if $responsive == true {
    @each $name in $breakpoint-has-pull {
      @include grid-media-query($name) {
        @include pull-setup('#{$name}--');
      }
    }
  }
}

/*============================================================================
  #Basic Styles
==============================================================================*/
html {
  background-color: $colorFooterBg;
}

body {
  background-color: $colorBody;
}

[tabindex='-1']:focus {
  outline: none;
}

.wrapper {
  @include clearfix();
  max-width: $siteWidth;
  margin: 0 auto;
  padding: 0 ($gutter / 2);

  @include at-query ($min, $small) {
    padding: 0 $gutter;
  }
}

.main-content {
  display: block;
  margin-top: $gutter;
  padding-bottom: $gutter * 2;
}

/*============================================================================
  #Helper Classes
==============================================================================*/
.is-transitioning {
  display: block !important;
  visibility: visible !important;
}

.display-table {
  display: table;
  table-layout: fixed;
  width: 100%;
}

.display-table-cell {
  display: table-cell;
  vertical-align: middle;
  float: none;
}

@include at-query ($min, $large) {
  .large--display-table {
    display: table;
    table-layout: fixed;
    width: 100%;
  }

  .large--display-table-cell {
    display: table-cell;
    vertical-align: middle;
    float: none;
  }
}

.visually-hidden {
  position: absolute;
  overflow: hidden;
  clip: rect(0 0 0 0);
  height: 1px; width: 1px;
  margin: -1px; padding: 0; border: 0;
}

/*============================================================================
  #Typography
==============================================================================*/
body,
input,
textarea,
button,
select {
  font-size: $baseFontSize;
  line-height: 1.6;
  font-family: $bodyFontStack;
  color: $colorTextBody;
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}

h1, h2, h3, h4, h5, h6 {
  display: block;
  font-family: $headerFontStack;
  font-weight: $headerFontWeight;
  margin: 0 0 0.5em;
  line-height: 1.4;

  a {
    text-decoration: none;
    font-weight: inherit;
  }
}

/*================ Use em() Sass function to declare font-size ================*/
h1 {
  font-size: em(36px);
}

h2 {
  font-size: em(28px);
}

h3 {
  font-size: em(22px);
}

h4 {
  font-size: em(20px);
}

h5 {
  font-size: em(16px);
}

h6 {
  font-size: em(14px);
}


.h1 { @extend h1; }
.h2 { @extend h2; }
.h3 { @extend h3; }
.h4 { @extend h4; }
.h5 { @extend h5; }
.h6 { @extend h6; }

p {
  margin: 0 0 ($gutter / 2) 0;

  img {
    margin: 0;
  }
}

em {
  font-style: italic;
}

b, strong {
  font-weight: bold;
}

small {
  font-size: 0.9em;
}

sup, sub {
  position: relative;
  font-size: 60%;
  vertical-align: baseline;
}
sup {
  top: -0.5em;
}

sub {
  bottom: -0.5em;
}

/*================ Blockquotes ================*/
blockquote {
  font-size: 1.125em;
  line-height: 1.45;
  font-style: italic;
  margin: 0 0 $gutter;
  padding: ($gutter / 2) $gutter;
  border-left: 1px solid $colorBorder;

  p {
    margin-bottom: 0;

    & + cite {
      margin-top: $gutter / 2;
    }
  }

  cite {
    display: block;
    font-size: 0.75em;

    &:before {
      content: '\2014 \0020';
    }
  }
}

/*================ Code ================*/
code, pre {
  background-color: #faf7f5;
  font-family: Consolas,monospace;
  font-size: 1em;
  border: 0 none;
  padding: 0 2px;
  color: #51ab62;
}

pre {
  overflow: auto;
  padding: $gutter / 2;
  margin: 0 0 $gutter;
}

/*================ Horizontal Rules ================*/
hr {
  clear: both;
  border-top: solid $colorBorder;
  border-width: 1px 0 0;
  margin: $gutter 0;
  height: 0;

  &.hr--small {
    margin: ($gutter / 2) 0;
  }

  &.hr--clear {
    border-top-color: transparent;
  }
}

/*================ Section Headers ================*/
.section-header {
  margin-bottom: $gutter / 1.5;
}

@include at-query ($min, $large) {
  .section-header {
    display: table;
    width: 100%;
  }

  .section-header__title {
    margin-bottom: $gutter / 2.5;
  }

  .section-header__left {
    display: table-cell;
    vertical-align: middle;
    margin-bottom: 0;

    h1, h2, h3, h4,
    .h1, .h2, .h3, .h4 {
      margin-bottom: 0;
    }
  }

  .section-header__right {
    display: table-cell;
    vertical-align: middle;
    text-align: right;
    width: 335px;

    @include at-query ($max, $medium) {
      margin-bottom: $gutter;
    }
  }
}

.section-header__right {
  .form-horizontal,
  .collection-view {
    display: inline-block;
    vertical-align: middle;
  }

  @include at-query ($min, $postSmall) {
    label + select,
    .collection-view {
      margin-left: $gutter / 2;
    }
  }
}

.collection-view {
  display: inline-block;
  border: 1px solid $colorBorder;
  border-radius: $radius;
  padding: 0 5px;
  height: 37px; // same as form elements
  overflow: hidden;

  /*================ Only show on larger screens ================*/
  @include at-query ($min, $large) {
    display: inline-block;
  }
}

.change-view {
  display: block;
  background: none;
  border: 0 none;
  float: left;
  padding: 10px 8px;
  color: $colorBorder;
  line-height: 1;

  &:hover,
  &:focus {
    color: $colorPrimary;
  }
}

.change-view--active {
  cursor: default;
  color: $colorPrimary;
}

/*============================================================================
  #Rich Text Editor
==============================================================================*/
.rte {
  margin-bottom: $gutter / 2;

  a {
    text-decoration: underline;
  }

  // Add some top margin to headers from the rich text editor
  h1, h2, h3, h4, h5, h6 {
    margin-top: 2em;

    &:first-child {
      margin-top: 0;
    }

    a {
      text-decoration: none;
    }
  }

  > div {
    margin-bottom: $gutter / 2;
  }

  li {
    margin-bottom: 0.4em;
  }
}

.rte--header {
  margin-bottom: 0;
}

/*============================================================================
  #Links and Buttons
==============================================================================*/
a,
.text-link {
  color: $colorLink;
  text-decoration: none;
  background: transparent;
}

a:hover,
a:focus {
 /* color: $colorLinkHover; */
  color: #000;
}

button {
  overflow: visible;
}

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

.btn,
.rte .btn {
  display: inline-block;
  padding: 8px 10px;
  width: auto;
  margin: 0;
  line-height: 1.42;
  font-weight: bold;
  text-decoration: none;
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;
  cursor: pointer;
  border: 1px solid transparent;
  @include user-select(none);
  -webkit-appearance: none;
  -moz-appearance: none;
  border-radius: $radius;

  /*================ Set primary button colors - can override later ================*/
  background-color: $colorBtnPrimary;
  color: $colorBtnPrimaryText;

  &:hover {
    background-color: $colorBtnPrimaryHover;
    color: $colorBtnPrimaryText;
  }

  &:active,
  &:focus {
   background-color: $colorBtnPrimaryActive;
   color: $colorBtnPrimaryText;
  }

  &[disabled],
  &.disabled {
    cursor: default;
    color: $disabledBorder;
    background-color: $disabledGrey;
  }
}

.btn--secondary,
.rte .btn--secondary {
  @extend .btn;
  background-color: $colorBtnSecondary;

  &:hover {
    background-color: $colorBtnSecondaryHover;
    color: $colorBtnSecondaryText;
  }

  &:active,
  &:focus {
   background-color: $colorBtnSecondaryActive;
   color: $colorBtnSecondaryText;
  }
}

.btn--small {
  padding: 4px 5px;
  font-size: em(12px);
}

.btn--large {
  padding: 12px 15px;
  font-size: em(16px);
}

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

/*================ Force an input/button to look like a text link ================*/
.text-link {
  display: inline;
  border: 0 none;
  background: none;
  padding: 0;
  margin: 0;
}

/*============================================================================
  #Lists
==============================================================================*/
ul, ol {
  margin: 0 0 ($gutter / 2) 20px;
  padding: 0;
}

ol { list-style: decimal; }
ul ul, ul ol,
ol ol, ol ul { margin: 4px 0 5px 20px; }
li { margin-bottom: 0.25em; }

ul.square { list-style: square outside; }
ul.disc { list-style: disc outside; }
ol.alpha { list-style: lower-alpha outside; }

.no-bullets {
  list-style: none outside;
  margin-left: 0;
}

.inline-list {
  margin-left: 0;

  li {
    display: inline-block;
    margin-bottom: 0;
  }
}

/*============================================================================
  #Tables
==============================================================================*/
table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
}

table.full {
  width: 100%;
  margin-bottom: 1em;
}

.table-wrap {
  max-width: 100%;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

th {
  font-weight: bold;
}

th, td {
  text-align: left;
  padding: $gutter / 2;
  border: 1px solid $colorBorder;
}

/*============================================================================
  Responsive tables, defined with .table--responsive on table element.
  Only defined for IE9+
==============================================================================*/
.table--responsive {
  @include at-query($max, $small) {
    thead {
      display: none;
    }

    tr {
      display: block;
    }

    // IE9 table layout fixes
    tr,
    td {
      float: left;
      clear: both;
      width: 100%;
    }

    th,
    td {
      display: block;
      text-align: right;
      padding: 15px;
    }

    td:before {
      content: attr(data-label);
      float: left;
      text-align: center;
      font-size: 12px;
      padding-right: 10px;
    }

    &.cart-table {
      img {
        margin: 0 auto;
      }

      .js-qty {
        float: right;
      }
    }
  }
}

@include at-query($max, $small) {
  .table--small-hide {
    display: none !important;
  }

  .table__section + .table__section {
    position: relative;
    margin-top: 10px;
    padding-top: 15px;

    &:after {
      content: '';
      display: block;
      position: absolute;
      top: 0;
      left: 15px;
      right: 15px;
      border-bottom: 1px solid $colorBorder;
    }
  }
}


/*============================================================================
  #OOCSS Media Object
    - http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code/
==============================================================================*/
.media,
.media-flex {
  overflow: hidden;
  _overflow: visible;
  zoom: 1;
}

.media-img {
  float: left;
  margin-right: $gutter;
}

.media-img-right {
  float: right;
  margin-left: $gutter;
}

.media-img img,
.media-img-right img {
  display: block;
}


/*============================================================================
  #Images and Iframes
==============================================================================*/
img {
  border: 0 none;
}

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

img,
iframe {
  max-width: 100%;
}

.video-wrapper {
  position: relative;
  overflow: hidden;
  max-width: 100%;
  padding-bottom: 56.25%;
  height: 0;
  height: auto;

  iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
}


/*============================================================================
  #Forms
==============================================================================*/
form {
  margin-bottom: 0;
}

.form-vertical {
  margin-bottom: $gutter / 2;
}

/*================ Prevent zoom on touch devices in active inputs ================*/
@include at-query($max, $medium) {
  input,
  textarea {
    font-size: 16px;
  }
}

input,
textarea,
button,
select {
  padding: 0;
  margin: 0;
  @include user-select(text);
}

button {
  background: none;
  border: none;
  cursor: pointer;
}

button,
input,
textarea {
  -webkit-appearance: none;
  -moz-appearance: none;
}

button {
  background: none;
  border: none;
  display: inline-block;
  cursor: pointer;
}

input[type="image"] {
  padding-left: 0;
  padding-right: 0;
}

fieldset {
  border: 1px solid $colorBorder;
  padding: $gutter / 2;
}

legend {
  border: 0;
  padding: 0;
}

button,
input[type="submit"] {
  cursor: pointer;
}

input,
textarea,
select {
  border: 1px solid $colorBorder;
  max-width: 100%;
  padding: 8px 10px;
  border-radius: $radius;

  &:focus {
    border: 1px solid darken($colorBorder, 10%);
  }

  &[disabled],
  &.disabled {
    cursor: default;
    background-color: $disabledGrey;
    border-color: $disabledBorder;
  }

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

textarea {
  min-height: 100px;
}

/*================ Input element overrides ================*/
input[type="checkbox"],
input[type="radio"] {
  display: inline;
  margin: 0 8px 0 0;
  padding: 0;
  width: auto;
}

input[type="checkbox"] {
  -webkit-appearance: checkbox;
  -moz-appearance: checkbox;
}

input[type="radio"] {
  -webkit-appearance: radio;
  -moz-appearance: radio;
}

input[type="image"] {
  padding-left: 0;
  padding-right: 0;
}

select {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-position: right center;
  background: {
    image: url('{{ "ico-select.svg" | asset_url }}');
    repeat: no-repeat;
    position: right 10px center;
    color: transparent;
  }
  padding-right: 28px;
  text-indent: 0.01px;
  text-overflow: '';
  cursor: pointer;

  /*================ Hide the svg arrow in IE9 and below ================*/
  .ie9 &,
  .lt-ie9 & {
    padding-right: 10px;
    background-image: none;
  }
}

optgroup {
  font-weight: bold;
}

// Force option color (affects IE only)
option {
  color: #000;
  background-color: #fff;
}

select::-ms-expand {
  display: none;
}

.modal.in .modal-dialog {
    z-index: 9999;
}

/*================ Form labels ================*/
.hidden-label {
  position: absolute;
  height: 0;
  width: 0;
  margin-bottom: 0;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);

  // No placeholders, so force show labels
  .ie9 &,
  .lt-ie9 & {
    position: static;
    height: auto;
    width: auto;
    margin-bottom: 2px;
    overflow: visible;
    clip: initial;
  }
}

label[for] {
  cursor: pointer;
}

/*================ Horizontal Form ================*/
.form-vertical {
  input,
  select,
  textarea {
    display: block;
    margin-bottom: 10px;
  }

  input[type="radio"],
  input[type="checkbox"] {
    display: inline-block;
  }
}

/*================ Error styles ================*/
input,
select,
textarea {
  &.error {
    border-color: $errorRed;
    background-color: $errorRedBg;
    color: $errorRed;
  }
}

label.error {
  color: $errorRed;
}


/*================ Input Group ================*/
.input-group {
  position: relative;
  display: table;
  border-collapse: separate;

  .input-group-field:first-child,
  .input-group-btn:first-child,
  .input-group-btn:first-child > .btn,
  input[type="hidden"]:first-child + .input-group-field,
  input[type="hidden"]:first-child + .input-group-btn > .btn {
    border-radius: $radius 0 0 $radius;
  }

  .input-group-field:last-child,
  .input-group-btn:last-child > .btn {
   border-radius: 0 $radius $radius 0;
  }

  input {
    // Nasty Firefox hack for inputs http://davidwalsh.name/firefox-buttons
    &::-moz-focus-inner {
      border: 0;
      padding: 0;
      margin-top: -1px;
      margin-bottom: -1px;
    }
  }
}

.input-group-field,
.input-group-btn {
  display: table-cell;
  vertical-align: middle;
  margin: 0;
}

.input-group .btn,
.input-group .input-group-field {
  height: 37px;
}

.input-group .input-group-field {
  width: 100%;
}

.input-group-btn {
  position: relative;
  white-space: nowrap;
  width: 1%;
  padding: 0;
}

/*============================================================================
  #Icons
==============================================================================*/
.icon-fallback-text .icon {
  display: none;

  .supports-fontface & {
    display: inline-block;
  }
}

/*============================================================================
  A generic way to visually hide content while
  remaining accessible to screen readers (h5bp.com)
==============================================================================*/
.supports-fontface .icon-fallback-text .fallback-text {
  @extend .visually-hidden;
}

.icon:before {
  display: none;
}

.supports-fontface .icon:before {
  display: inline;
  font-family: $socialIconFontStack;
  text-decoration: none;
  speak: none; // future fallback, limited in effect currently
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/*================ Icon mapping ================*/
.icon-amazon_payments:before { content: "\e800"; }
.icon-american_express:before { content: "\41"; }
.icon-arrow-down:before { content: "\e607"; }
.icon-bitcoin:before { content: "\42"; }
.icon-cart:before { content: "\e600"; }
.icon-cirrus:before { content: "\43"; }
.icon-dankort:before { content: "\64"; }
.icon-diners_club:before { content: "\63"; }
.icon-discover:before { content: "\44"; }
.icon-facebook:before { content: "\66"; }
.icon-fancy:before { content: "\46"; }
.icon-google:before { content: "\67"; }
.icon-google_wallet:before { content: "\47"; }
.icon-grid-view:before { content: "\e603"; }
.icon-hamburger:before { content: "\e601"; }
.icon-instagram:before { content: "\69"; }
.icon-interac:before { content: "\49"; }
.icon-jcb:before { content: "\4a"; }
.icon-list-view:before { content: "\e604"; }
.icon-maestro:before { content: "\6d"; }
.icon-master:before { content: "\4d"; }
.icon-minus:before { content: "\e602"; }
.icon-paypal:before { content: "\50"; }
.icon-pinterest:before { content: "\70"; }
.icon-plus:before { content: "\e605"; }
.icon-rss:before { content: "\72"; }
.icon-search:before { content: "\73"; }
.icon-stripe:before { content: "\53"; }
.icon-tumblr:before { content: "\74"; }
.icon-twitter:before { content: "\54"; }
.icon-vimeo:before { content: "\76"; }
.icon-visa:before { content: "\56"; }
.icon-x:before { content: "\e606"; }
.icon-youtube:before { content: "\79"; }

.payment-icons {
  @include user-select(none);
  cursor: default;

  li {
    margin: 0 ($gutter / 4) ($gutter / 4);
    color: {{ settings.color_footer_share_icon }};
    cursor: default;
  }

  .icon {
    font-size: 30px;
    line-height: 30px;
  }

  .fallback-text {
    text-transform: capitalize;
  }
}

.social-icons li {
  margin: 0 ($gutter / 2) ($gutter / 2);
  vertical-align: middle;

  @include at-query ($min, $postSmall) {
    margin-left: 0;
  }

  .icon {
    font-size: 30px;
    line-height: 26px;
  }

  a {
    color: {{ settings.color_footer_social_link }};

    &:hover {
      color: darken({{ settings.color_footer_social_link }}, 10%);
    }
  }
}

/*============================================================================
  #Pagination
==============================================================================*/
.pagination {
  margin-bottom: 1em;
  text-align: center;

  > span {
    display: inline-block;
    line-height: 1;
  }

  a {
    display: block;
  }

  a,
  .page.current {
    padding: 8px;
  }
}

/*============================================================================
  #Site Header
==============================================================================*/
.site-header {
  padding: ($gutter / 2) 0;

  .grid--table {
    display: table;
    table-layout: fixed;
    width: 100%;

    > .grid__item {
      float: none;
      display: table-cell;
      vertical-align: middle;
    }
  }
}

.site-header__logo {
  text-align: center;
  margin: 0 auto;
  max-width: 100%;

  @include at-query ($min, $large) {
    text-align: left;
  }

  a,
  a:hover,
  a:focus {
    text-decoration: none;
  }

  a, img {
    display: block;
  }

  img {
    margin: 0 auto;
  }
}

.site-header__logo-link {
  max-width: $logoMaxWidth;
  margin: 0 auto;
}

.site-header__cart-toggle {
  display: inline-block;
}

.site-header__search {
  display: inline-block;
  max-width: 400px;
  margin-top: $gutter / 2;
  width: 100%;
}

.search-bar {
  max-width: 100%;

  @include at-query ($max, $medium) {
    margin-left: auto;
    margin-right: auto;
  }
}

/*============================================================================
  #Site Nav and Dropdowns
==============================================================================*/
.nav-bar {
 /* background-color: $colorNav;*/
}

.site-nav {
  font-size: {{ settings.menu_font_size }}px;
  cursor: default;
  margin: 0 0 0 (-$gutter / 2);

  li {
    margin: 0;
    display: block;
  }

  > li {
    position: relative;
    display: inline-block;
  }
}

/*================ Home to hamburger and cart that toggle drawers ================*/
.site-nav--mobile {
  @extend .site-nav;

  .text-right & {
    margin: 0 (-$gutter / 2) 0 0;
  }
}

.site-nav__link {
  display: block;
  text-decoration: none;
  padding: $gutter / 2;
  white-space: nowrap;
  color: {{ settings.menu_color_primary }};

  &:hover,
  &:active,
  &:focus {
    color: darken($colorNavText, 15%);
  }

  .icon-arrow-down {
    position: relative;
    top: -2px;
    font-size: 10px;
    padding-left: $gutter / 4;
  }

  .site-nav--active > & {
    font-weight: bold;
  }

  .site-nav--mobile & {
    display: inline-block;
  }
}

/*================ Dropdowns ================*/
.site-nav__dropdown {
  display: none;
  position: absolute;
  left: 0;
  margin: 0;
  z-index: $zindexNavDropdowns;

  .supports-no-touch .site-nav--has-dropdown:hover &,
  .site-nav--has-dropdown.nav-hover &,
  .nav-focus + & {
    display: block;
  }

  a {
    background-color: $colorNav;

    &:hover,
    &:active,
    &:focus {
      background-color: darken($colorNav, 10%);
    }
  }
}

/*================ Search bar in header ================*/
.nav-search {
  position: relative;
  padding: 10px 0;

  @include at-query ($max, $medium) {
    padding: 0 0 ($gutter / 2);
    margin: 0 auto;
    text-align: center;
  }
}

/*============================================================================
  #Mobile Nav
  - List of items inside the mobile drawer
==============================================================================*/
.mobile-nav {
  // Negative of .drawer left/right padding for full-width link tap area
  margin: (-$gutter / 2) (-$gutter / 2) 0 (-$gutter / 2);

  li {
    margin-bottom: 0;
  }
}

.mobile-nav__search {
  padding: $gutter / 2;

  .search-bar {
    margin-bottom: 0;
  }
}

.mobile-nav__item {
  position: relative;
  display: block;

  // Background color on top level items so there is no
  // element overlap on subnav's CSS toggle animation
  .mobile-nav > & {
    background-color: $colorDrawers;
  }

  &:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: $gutter / 2;
    right: $gutter / 2;
    border-bottom: 1px solid $colorDrawerBorder;
  }

  .mobile-nav > &:last-child:after {
    display: none;
  }
}

// Login/logout links can't have a class on them, so style <a> element
.mobile-nav__item a {
  display: block;
}

.mobile-nav__item a,
.mobile-nav__toggle button {
  color: $colorDrawerText;
  padding: $gutter / 2;
  text-decoration: none;

  &:hover,
  &:active,
  &:focus {
    color: darken($colorDrawerText, 15%);
  }

  &:active,
  &:focus {
    background-color: darken($colorDrawers, 5%);
  }
}

.mobile-nav__item--active {
  font-weight: bold;
}

.mobile-nav__has-sublist {
  display: table;
  width: 100%;

  .mobile-nav__link {
    display: table-cell;
    vertical-align: middle;
    width: 100%;
  }
}

.mobile-nav__toggle {
  display: table-cell;
  vertical-align: middle;
  width: 1%;
}

.mobile-nav__toggle-open {
  .mobile-nav--expanded & {
    display: none;
  }
}

.mobile-nav__toggle-close {
  display: none;

  .mobile-nav--expanded & {
    display: block;
  }
}

.mobile-nav__sublist {
  margin: 0;
  max-height: 0;
  visibility: hidden;
  overflow: hidden;
  transition: all 300ms cubic-bezier(0.57, 0.06, 0.05, 0.95);
  @include backface();

  .mobile-nav--expanded + & {
    visibility: visible;
    max-height: 700px;
    transition: all 700ms cubic-bezier(0.57, 0.06, 0.05, 0.95);
  }

  .mobile-nav__item:after {
    top: 0;
    bottom: auto;
  }

  .mobile-nav__link {
    padding-left: $gutter;
    font-weight: normal;
  }
}

/*============================================================================
  #Drawers
==============================================================================*/
.js-drawer-open {
  overflow: hidden;
  height: 100%;
}

.drawer {
  @include promote-layer();
  display: none;
  position: fixed;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  top: 0;
  bottom: 0;
  padding: 0 ($gutter / 2) ($gutter / 2);
  max-width: 95%;
  z-index: $zindexDrawer;
  color: $colorDrawerText;
  background-color: $colorDrawers;
  transition: $drawerTransition;

  a {
    color: $colorDrawerText;

    &:hover,
    &:focus {
      opacity: 0.7;
    }
  }

  input,
  textarea {
    border-color: $colorDrawerBorder;
  }
}

.drawer--left {
  width: $drawerNavWidth;
  left: -$drawerNavWidth;
  border-right: 1px solid $colorDrawerBorder;

  .js-drawer-open-left & {
    display: block;
    @include transform(translateX($drawerNavWidth));

    .lt-ie9 & {
      left: 0;
    }
  }
}

.drawer--right {
  width: $drawerCartWidth;
  right: -$drawerCartWidth;
  border-left: 1px solid $colorDrawerBorder;

  .js-drawer-open-right & {
    display: block;
    @include transform(translateX(-$drawerCartWidth));

    .lt-ie9 & {
      right: 0;
    }
  }
}

#PageContainer {
  overflow: hidden;
}

.is-moved-by-drawer {
  @include promote-layer();
  transition: $drawerTransition;

  .js-drawer-open-left & {
    @include transform(translateX($drawerNavWidth));
  }

  .js-drawer-open-right & {
    @include transform(translateX(-$drawerCartWidth));
  }
}

.drawer__header {
  display: table;
  height: 70px;
  width: 100%;
  margin-bottom: $gutter / 2;
  border-bottom: 1px solid $colorDrawerBorder;
}

.drawer__title,
.drawer__close {
  display: table-cell;
  vertical-align: middle;
}

.drawer__title {
  width: 100%;
}

.drawer__close {
  width: 1%;
  text-align: center;
  font-size: em(18px);
}

.drawer__close button {
  position: relative;
  right: -20px;
  height: 100%;
  padding: 0 20px;
  color: inherit;

  &:active,
  &:focus {
    background-color: darken($colorDrawers, 5%);
  }
}

/*============================================================================
  #Site Footer
==============================================================================*/
.site-footer {
  background-color: $colorFooterBg;
  padding: 30px 0;
  padding-bottom: 0px !important;
  color: $colorFooterText;

  @include at-query ($min, $large) {
    padding: ($gutter * 2) 0;
  }
}

/*============================================================================
  #Product and Collection Grids
==============================================================================*/
.grid__image {
  display: block;
  margin: 0 auto ($gutter / 2);

  img {
    display: block;
    margin: 0 auto;
  }
}

/*============================================================================
  #Collection Filters
==============================================================================*/
.filter--active {
  font-weight: bold;
}

/*============================================================================
  #Breadcrumbs
==============================================================================*/
.breadcrumb {
  margin-bottom: $gutter;

  a,
  span {
    display: inline-block;
    padding: 0 7px 0 0;
    margin-right: 7px;

    &:first-child {
      padding-left: 0;
    }
  }
}


/*============================================================================
  #Product Page
==============================================================================*/
.product-single__variants {
  display: none;

  .no-js & {
    display: block;
  }
}

.product-single__photos {
  margin-bottom: $gutter;
}

.product-single__photos,
.product-single__thumbnails {
  a, img {
    display: block;
    margin: 0 auto;
  }

  li {
    margin-bottom: $gutter;
  }
}


/*============================================================================
  #Notes and Form Feedback
==============================================================================*/
.note,
.errors {
  border-radius: $radius;
  padding: 6px 12px;
  margin-bottom: $gutter / 2;
  border: 1px solid transparent;
  font-size: 0.9em;
  text-align: left;

  ul,
  ol {
    margin-top: 0;
    margin-bottom: 0;
  }

  li:last-child {
    margin-bottom: 0;
  }

  p {
    margin-bottom: 0;
  }
}

.note {
  border-color: $colorBorder;
}

.errors {
  ul {
    list-style: disc outside;
    margin-left: 20px;
  }
}

.form-success {
  color: $successGreen;
  background-color: $successGreenBg;
  border-color: $successGreen;

  a {
    color: $successGreen;
    text-decoration: underline;

    &:hover {
      text-decoration: none;
    }
  }
}

.form-error,
.errors {
  color: $errorRed;
  background-color: $errorRedBg;
  border-color: $errorRed;

  a {
    color: $errorRed;
    text-decoration: underline;

    &:hover {
      text-decoration: none;
    }
  }
}


/*============================================================================
  #Cart Page
==============================================================================*/
.cart__row {
  position: relative;
  margin-top: $gutter;
  padding-top: $gutter;
  border-top: 1px solid $colorBorder;

  &:first-child {
    margin-top: 0;
  }

  &:first-child {
    padding-top: 0;
  }

  .js-qty {
    margin: 0 auto;
  }
}

.cart-table {
  th {
    font-weight: normal;
  }

  td,
  th {
    padding: 10px 10px;
    border: none;
  }
}

@include at-query ($min, $large) {
  .cart__row--table-large {
    display: table;
    table-layout: fixed;
    width: 100%;

    .grid__item {
      display: table-cell;
      vertical-align: middle;
      float: none;
    }
  }
}

.cart__image {
  display: block;

  img {
    display: block;
    max-width: 100%;
  }
}

.cart__subtotal {
  margin: 0 0 0 ($gutter / 3);
  display: inline;
}

.cart__mini-labels {
  display: block;
  margin: ($gutter / 3) 0;
  font-size: em(12px);

  @include at-query ($min, $large) {
    display: none;
  }
}

.cart__remove {
  display: block;
}










/*============================================================================
  #Ajax Cart Styles (conditionally loaded)
==============================================================================*/
{% if settings.ajax_cart_method == "drawer" %}

.ajaxcart__inner {
  margin-bottom: $gutter;
}

.ajaxcart__row {
  > .grid {
    margin-left: -$gutter / 2;

    > .grid__item {
      padding-left: $gutter / 2;
    }
  }
}

.ajaxcart__product {
  position: relative;
  max-height: 500px;

  &.is-removed {
    max-height: 0;
    overflow: hidden;
    visibility: hidden;
    transition: all 450ms cubic-bezier(0.57,.06,.05,.95);
    @include backface();
  }
}

.ajaxcart__row {
  padding-bottom: $gutter / 2;
  margin-bottom: $gutter / 2;
  border-bottom: 1px solid $colorDrawerBorder;
}

.ajaxcart__product-image {
  display: block;
  overflow: hidden;
  margin-bottom: 15px;

  img {
    display: block;
    margin: 0 auto;
    max-width: 100%;
  }
}

.ajaxcart__product-name,
.ajaxcart__product-meta {
  display: block;
}

.ajaxcart__product-name + .ajaxcart__product-meta {
  padding-top: $gutter / 5;
}

/*================ Quantity Selectors ================*/
.js-qty {
  position: relative;
  margin-bottom: 1em;
  max-width: 100px;
  min-width: 75px;
  overflow: visible;

  input {
    display: block;
    background: none;
    text-align: center;
    width: 100%;
    padding: 5px 25px;
    margin: 0;
  }
}


.js-qty__adjust {
  cursor: pointer;
  position: absolute;
  display: block;
  top: 0;
  bottom: 0;
  border: 0 none;
  padding: 0 8px;
  background: none;
  text-align: center;
  overflow: hidden;
  @include user-select(none);

  &:hover,
  &:focus {
    color: $colorPrimary;
  }
}

.js-qty__adjust--plus {
  right: 0;
  border-left: 1px solid $colorBorder;
}

.js-qty__adjust--minus {
  left: 0;
  border-right: 1px solid $colorBorder;
}

/*================ Quantity Selectors in Ajax Cart ================*/
.ajaxcart__qty {
  @extend .js-qty;
  margin: 0;

  .is-loading & {
    opacity: 0.5;
    transition: none;
  }
}

.ajaxcart__qty-num {
  border-color: $colorDrawerBorder;
  color: $colorDrawerText;
}

.ajaxcart__qty-adjust {
  @extend .js-qty__adjust;
  color: $colorDrawerText;
}

.ajaxcart__qty--plus {
  @extend .js-qty__adjust--plus;
  border-color: $colorDrawerBorder;
}

.ajaxcart__qty--minus {
  @extend .js-qty__adjust--minus;
  border-color: $colorDrawerBorder;
}

{% endif %} // settings.ajax_cart_method

@media (max-width: 768px) {
  .home_prod_info .title {
    font-size: 14px;
  }

  .nav-bar.desktop_nav { display: none !important; }
  .clear { clear: both;}
  #bottom_blocks .bottom-block .block-logo { width: 14%;}
  #bottom_blocks .block-content { width: 80%;}
}

@media (min-width: 769px) {
   .nav-bar.mobile_nav { display: none !important; }
  .clear { display: none;}
  .block-content { float: right; width: 83%;}
}

@media (min-width: 640px) and (max-width: 768px) {
  .item.large--one-quarter {
    float: left;
    padding: 15px;
    width: 50%;
}
  .h_pod a img {
    //width: 100%;
}
  .section-header {
    text-align: center;
}
  .text-right {

}
}
@media (max-width: 639px) {
  .item.large--one-quarter {
    float: left;
    padding: 15px;
    width: 100%;
}
  .h_pod {
    margin: auto;
    text-align: center;
}
}

.template-index .header_main {
    left: 0;
    margin: auto;
   /* position: fixed;*/
    right: 0;
    z-index: 9;
}

.hr {
    border-top: 1px solid #000;
  margin: 20px 0;
}
#AddToCart > span {
    font-size: 30px;
}
#AddToCartZero span{ font-size: 28px; }

#AddToCart {
  background: none repeat scroll 0 0 {{ settings.add_to_cart_bg_color }};
    width: 100%;
}

/*.toShake:hover, .toShake.shake
{
	transition-duration: 3s;
    -webkit-animation: shake 0.8s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
    animation: shake 0.8s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    perspective: 1000px;
}*/

#AddToCartZero {
  background: none repeat scroll 0 0 {{ settings.add_to_cart_bg_color_zero }};
    width: 100%;
}



.buy_button {
  background: none repeat scroll 0 0 {{ settings.buy_button_color }};

}

.progressbar_text{
  color: {{ settings.ProgressBar_bg_color }};

}

.more_load {
  color: {{ settings.ProgressBar_bg_color }};
  padding:10px 15px 5px 15px;display:block;text-align:center;
    font-size: 30px;
}

.site-header{
background:$headerColor;
}


div#progress_bar_text p {
    text-transform: capitalize;
    margin-top: 8px;
}
.product_quantity{ float:none; }

.product_quantity input{
  width: 80px;
    float: left;}

.progress-bar-success{

  background:{{ settings.ProgressBar_timer_bg_color }} !important;


}

.item_main .image {
    margin: auto;
padding-top: 10px;
width: 90%;
}
.item_main {
    border-radius: 5px;
}
.item_main .home_prod_info {
    padding-left: 10px;
    padding-right: 10px;
  	min-height: 50px;
  	text-align: center;
}
.single-option-selector {
    width: 100%;
}
.inline-list > li {
    width: 100%;
}
ul.social_footer li a {
    border: 2px solid $footerShareIcon;
    border-radius: 50%;
    color: $footerShareIcon;
    display: inline-block;
    height: 20px;
    padding: 15px !important;
    text-align: center;
    vertical-align: top;
    width: 20px;
}
.social_footer > li {
    float: left;
    list-style: outside none none;
    margin-right: 10px;
}
.social_footer .icon {
    position: absolute;
    right: 8px;
    top: 8px;
}
.icon-fallback-text {
    position: relative;
}

/* footer above code */
#bottom_blocks .bottom-block {
    border: 1px solid #c9c9c9;
    border-radius: 5px;
    float: left;
    margin-bottom: 10px;
    padding: 15px 10px;
    width: 100%;
}
#bottom_blocks .bottom-block .block-logo {
    float: left;
    height: 49px;
    margin-right: 15px;
    width: 49px;
}
#bottom_blocks .bottom-block .block-content .block-caption {
    color: #676767;
    font-size: 14px;
    font-weight: 600;
}
.block-heading {
    color: #000000;
    font-size: 24px;
    line-height: 20px;
    margin-bottom: 5px;
}
@media (min-width: 900px) {
#bottom_blocks .large--two-fifths {
    float: left;
 /*   margin-right: 2%;*/
    width: 49%;
}
#bottom_blocks .large--two-fifths:first-child {
    margin-right: 2%;
}
}
@media (max-width: 899px) {
#bottom_blocks .large--two-fifths {
    float: left;
 /*   margin-right: 2%;*/
    width: 100%;
}

}

@media (min-width: 481px) and (max-width: 640px) {
  .cart__image img {
    display: block;
    max-width: 60px;
}
  .grid--rev>.grid__item .grid-uniform .grid__item.large--one-third.medium--one-half {
    width: 46%;
    margin: 2%;
}
}

@media (min-width: 361px) and (max-width: 480px) {
  .cd-half-width {
    top: 37% !important;
  }
  .cd-btn {
    font-size: 16px !important;
    margin-top: 0 !important;
    padding: 20px !important;
}
  .cd-half-width > p {
     margin-bottom: 20px !important;
  }
  .cd-half-width > h2 {
    margin-bottom: 20px !important;
  }
  .flexslider.test {
    margin-bottom: -20px;
  }
  .flex-control-nav {
     bottom: 5px !important;
  }

}

@media (min-width: 320px) and (max-width: 360px) {
  .cd-half-width {
    top: 37% !important;
  }
  .cd-btn {
    font-size: 12px !important;
    margin-top: 0 !important;
    padding: 5px !important;
  }
  .cd-half-width > p {
    margin-bottom: 5px !important;
  }
  .cd-half-width > h2 {
    margin-bottom: 5px !important;
  }
  .flexslider.test {
    margin-bottom: -20px;
  }
  .flex-control-nav {
    bottom: 15px !important;
  }
}

#bottom_blocks {
    margin-bottom: 20px;
  min-height: 100px;
}
.social_footer {
    margin: auto;
}
.misnary {

    margin-bottom: 10px;

  width:100%;
}
.template-collection .grid-uniform .grid__item {
    text-align: center;
}

.template-index .main-content {
    padding-bottom: 0;
}

  .overlay:hover {
    color: #fff;
}
  .item {

    padding: 0 13px;
}
  .item_main {
    background: none repeat scroll 0 0 #fff;
    /* border:2px solid #dddddd; */
    padding:0 0;
   /* display: inline-block; */
    margin-bottom: 26px;
}
  .home_prod_info h5 {
    margin: 10px 5px 5px;
}
  .home_prod_info .description {
    margin: 0 5px 5px;
}
@media (min-width:768px){

  .non_carousel li {
    margin-bottom: 18px !important;
}
  .non_carousel .flex-viewport {
width: 100%;
border: none;
box-shadow: none;
}
.non_carousel .flex-viewport ul#ProductThumbs {
width: 100% !important;
}
.non_carousel .flex-viewport ul#ProductThumbs li {
    width: 23.1% !important;
    margin-right: 2.5% !important;
}

  .non_carousel .flex-viewport ul#ProductThumbs li:nth-child(4) {
    margin-right: 0px !important;
}
.non_carousel .flex-direction-nav {
display: none;
}

}
span.featured-box--title {
    padding: 4px 5px;
    text-align: center;
    font-weight: 600;
    /* border: 1px solid #aa0303; */
    color: #514f4f;
    border-radius: 0px 0px 5px 5px;
    /* border-bottom: 4px solid #aa0303; */
    width: 100%;
    display: block;
}

@media (min-width: 320px) and (max-width: 768px) {


ul.mobile-nav__sublist li.mobile-nav__item:after {
    border: none;
}

 ul.mobile-nav__sublist li.mobile-nav__item a {
    color: #fff;
    padding: 5px 26px;
    border: none;
    font-size: 13px;
}
  .grid__item.large--one-half.text-right.secure-shopping {
    text-align: left !important;
}
  .grid__item.large--one-half.text-right.secure-shopping p {
    margin-bottom: 0;
}

   .grid__item.large--one-half.checkout-logos {
    text-align: left !important;
}
  .grid__item.large--one-half.checkout-logos p {
    margin-bottom: -1px;
}
.cart__row {
    padding-top: 0px;
    margin-left: 0px;
      border: none;
}
  input.checkout_btn.btn {
}
.mobile-nav__sublist .awemenu-megamenu-item h3, .mobile-nav__sublist .awemenu-megamenu-item .h3 {
    color: #fff;
    text-transform: uppercase;
    font-size: 16px;
    margin-top: 0;
    padding: 10px 15px;
    background-color: #888888;
    margin-bottom: 0;
}
.mobile-nav__sublist .awemenu-megamenu-item ul.super {
    background-color: #252525;
    margin: 0;
    padding: 10px 15px;
}
  .mobile-nav__sublist .awemenu-megamenu-item ul.super li {
    border-bottom: 1px solid #4a4a4a;
}
  .mobile-nav__sublist .awemenu-megamenu-item ul.super li:last-child {
    border-bottom: none;
}

.mobile-nav__sublist .awemenu-megamenu-item ul.super {
    /* margin-left: 0px; */
}
.mobile-nav__sublist .awemenu-megamenu-item ul.super li a {
    color: #fff;
    font-size: 13px;
    padding: 3px 15px;
}

.mobile-nav--expanded+.mobile-nav__sublist {
    visibility: visible;
    max-height: 1700px;
    transition: all 700ms cubic-bezier(0.57, 0.06, 0.05, 0.95);
    background-color: #252525;
    max-height: 300px !important;
    overflow: scroll;
}

.mobile-nav li {
    margin-bottom: 0;
    border-bottom: 1px solid #4a4a4a;
}

	.grid__item.collage-grid__row>.item {
    float: left;
    width: 100%;
    }

  .third_product_disposition .grid__item.collage-grid__row .item.large--two-thirds a .h_pod {
    height: auto !important;
    width: 100%;
    display: table;
    line-height: normal;
}
  .third_product_disposition .grid__item.collage-grid__row .item.large--one-third a .h_pod {
    height: 100%;
}
  .third_product_disposition .grid__item.collage-grid__row .item.large--one-third a .h_pod img {
    height: auto;
    display: block;
    margin: 0 auto;
}
  .third_product_disposition .grid__item.collage-grid__row .item.large--two-thirds a .h_pod img
  {
    max-width : 250px !important;
    width : 100% !important;
  }

    .fourth_product_disposition p.sale_wheel {

    left: 30% !important;

}
  .second_product_disposition .item.large--one-half {

    width: 100%;
}
.clock-item {
    margin: 8px !important;
    width: 22% !important;
}
  .text .val {
    font-size: 20px !important;
    margin-top: 33px !important;
    color: #3c3c3c;
    text-shadow: none;
}
  .grid__item {
    box-sizing: border-box;
    float: left;
    min-height: 1px;
    padding-left: 0px;
    vertical-align: top;
    width: 100%;
    margin-bottom: 15px;
}
  .text .type-time {
    font-size: 12px !important;
    margin-top: 50px !important;
    color: #3c3c3c;
    text-shadow: none;
}

}
@media (min-width: 768px) and (max-width: 991px) {

  .flexslider .slides img {
    height: auto;
    -moz-user-select: none;
    min-height: 74px;
}

.third_product_disposition .grid__item.collage-grid__row .item.large--two-thirds a .h_pod {
    height: 402px;
    width: 100%;
    display: table;
    line-height: 340px;
}
.third_product_disposition .grid__item.collage-grid__row .item.large--one-third a .h_pod {
    height: 161px;
}

  .fourth_product_disposition p.sale_wheel {

    left: 30% !important;

}

}


@media (min-width: 992px) {
.flexslider .slides img {
    height: auto;
    -moz-user-select: none;
    min-height: 104px;
}
}

@media (min-width: 768px) and (max-width: 890px)
{
#ProductPhotoImg
{
	width:320px !important;
}


.large--one-half {
    width: 50%;
}

}

@media (min-width: 640px) and (max-width: 767px) {

  .grid--rev>.grid__item .grid-uniform .grid__item.large--one-third.medium--one-half {
    width: 46%;
    margin: 2%;
}

  .fourth_product_disposition p.sale_wheel {

    left: 21% !important;

}
  .clock.row {
    float: left;
    width: 100%;
    padding-left: 0px;
}

#ProductPhotoImg
{
	width:320px !important;

}


}


@media (min-width: 550px) and (max-width: 639px) {
  .fourth_product_disposition p.sale_wheel {

    left: 42% !important;

}
  .clock.row {
    float: left;
    width: 100%;
    padding-left: 0px;
}
  .clock-item {
    margin: 8px !important;
    width: 21% !important;
}


#ProductPhotoImg
{
	width:300px !important;

}




}


@media (min-width: 320px) and (max-width: 549px) {
  .fourth_product_disposition p.sale_wheel {

    left: 36% !important;

}
 .counter_box  table#timertwohour.model3 span {
    font-family: Segment7Standard !important;
    font-size: 50px !important;
    padding-right: 3px;
    padding-left: 2px;
}
  .counter_box  table#timertwohour.model3 td {
    font-size: 14px !important;
    font-weight: 100;
    text-transform: uppercase;
    padding-right: 25px !important;

}
  .clock.row {
    float: left;
    width: 100%;
    padding-left: 0px;
}
  .clock-item {
    margin: 8px !important;
    width: 19% !important;
}
#mc-embedded-subscribe-form .input-group-btn {
    float: left;
    width: 100%;
}
  .social_footer {
    margin: 0 auto;
    display: inline-block;
    width: auto;
}

#ProductPhotoImg
{
	width:100% !important;
}


}













.cd-btn {background: {{ settings.btn_bg_color }} !important;}
.flex-direction-nav {
    display: block;
}
.site-footer.small--text-center.foot_above {
    background: none repeat scroll 0 0 #fff;
    padding-bottom: 10px;
    padding-top: 10px;
}
.template-product .progress {
background-color: #eae9e9;
height: 11px !important;
  border-radius: 7px;
}
.progress-bar.progress-bar-success
{
  border-radius: 7px !important;
  background-image: none !important;
}
.nav-bar.mobile_nav .icon-fallback-text.site-nav__link.js-drawer-open-left {
    font-size: 26px;
    padding: 0px;
    color: #fff;
}
.nav-bar.mobile_nav {
    line-height: 0;
}
.nav-bar.mobile_nav .icon-fallback-text {
    font-size: 26px;
}
.site-header .wrapper a {
    color: {{ settings.menu_color_primary }};
}

.not_index .site-header .wrapper a {
    color: {{ settings.menu_other_color_primary }};
}

.not_index .site-nav__link {
color: {{ settings.menu_other_color_primary }};
}

.inline-list.payment-icons > li {
    width: 50px;
}

#subscribe {
  background: none repeat scroll 0 0 {{ settings.newletterbtncolor }};

}

#mc-embedded-subscribe-form .input-group-btn {
    float: left;
    width: 150px;
}
#mail {
    border-radius: 2px;
}
form#mc-embedded-subscribe-form {
    width: 100%;
}

footer.site-footer .owner, footer.site-footer .owner a {
    color:  $colorFooterText;
}

footer ul.inline-list a {
    color: $colorFooterText;
}
.owner, .owner a {
    color: #000;
}
.item.large--one-quarter {
    float: left;
    padding: 15px;
}
.nav-bar.desktop_nav .wrapper {

}
.account {
    padding: 0 15px;
}
.clear_both{clear: both;}
.home_prod_info {
    text-align: center;
  }
.sale strong {color: red;}
.template-collection .grid__item .h6 a {
    color: #000 !important;
}



.second_product_disposition .item.large--one-half {
    position: relative;
    float: left;
}
.second_product_disposition .item.large--one-half:hover .home_prod_info {
        opacity: 1;
}

.second_product_disposition .item.large--one-half .home_prod_info {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    padding-top: 25%;
    background-color: rgba(255, 255, 255, 0.87);
        opacity: 0;
  -webkit-transition: all 400ms ease;
    -moz-transition: all 400ms ease;
    -ms-transition: all 400ms ease;
    -o-transition: all 400ms ease;
    transition: all 400ms ease;
}


.third_product_disposition .grid__item.collage-grid__row:nth-child(odd) .item {
    float: left;
}

.third_product_disposition .grid__item.collage-grid__row:nth-child(even) .item.large--two-thirds {
    float: right;
}

.third_product_disposition .grid__item.collage-grid__row .item {
    float: left;
}
.home_prod_info-act h5, .home_prod_info-act p {
    display: inline;
}

.home_prod_info-act {
    float: left;
    width: 100%;
    text-align: center;
    padding: 18px;
}
.third_product_disposition .grid__item.collage-grid__row .item a .h_pod {
    padding: 20px;
    background-color: #f7f7f7;
}
.third_product_disposition .grid__item.collage-grid__row .item.large--one-third a .h_pod {
    height: 230px;
}
.third_product_disposition .grid__item.collage-grid__row .item.large--one-third a .h_pod img {
    height: 100%;
    display: block;
    margin: 0 auto;
}
.third_product_disposition .grid__item.collage-grid__row .item.large--two-thirds a .h_pod {
    height: 520px;
    width: 100%;
    display: table;
    line-height: 500px;
}
.third_product_disposition .grid__item.collage-grid__row .item.large--two-thirds a .h_pod img {
    width: auto;
    margin: 0 auto;
    vertical-align: middle;
    height: 100%;
    display: table;
}


p.sale_wheel strong {
    line-height: normal;
    vertical-align: middle;
    display: table-cell;
}

p.sale_wheel {

  position: absolute;
     border: 1px solid $saleButton;
    padding: 0px 0px;
    border-radius: 50%;
    width: 62px;
    height: 62px;
    text-align: center;
    text-transform: uppercase;
    color: $saleButton;
    line-height: normal;
    display: table;


}

p.sale_wheel-two strong {
    display: table-cell;
    vertical-align: middle;
}

p.sale_wheel-two {
    position: absolute;
    border: 1px solid $saleButton;
    padding: 0px;
    border-radius: 0px 0px 97% 0px;
    width: 62px;
    height: 62px;
    text-align: left;
    text-transform: uppercase;
    color:$saleButton_text_color;
    line-height: normal;
    background-color: $saleButton;
    padding-left: 2px;
  display:table;
}

p.sale_wheel-three strong {
    display: table-cell;
    vertical-align: middle;
}


  p.sale_wheel-three {
    position: absolute;
    border: 1px solid #ffffff;
    padding:0px;
    border-radius: 50%;
    width: 62px;
    height: 62px;
    text-align: center;
    text-transform: uppercase;
    color: #ffffff;
    line-height: normal;
    box-shadow: 0px 0px 0px 5px $saleButton;
    background-color: $saleButton;
    border-style: dashed;
    display:table;
}


p.sale_wheel-four strong {
    display: table-cell;
    vertical-align: middle;
}

p.sale_wheel-four {
    position: absolute;
    border: 1px solid #ffffff;
    padding: 9px 0px;
    border-radius: 50%;
    width: 55px;
    height: 55px;
    text-align: center;
    text-transform: uppercase;
    color: #ffffff;
    line-height: normal;
    box-shadow: 0px 0px 0px 5px #e70900;
    background-color: #e70900;
    border-style: dashed;
    margin-top: 12px;
  font-size: 12px;
    display:table;
}
p.sale_wheel-four:before {
    content: "";
    position: absolute;
    top: -31px;
    height: 55px;
    width: 80px;
    background-image: url(https://cdn.shopify.com/s/files/1/1475/3640/t/2/assets/christmas_sale.png?14210346024537749440);
    background-size: 100% 100%;
    left: -28px;
}

.third_product_disposition a, .text-link
{
    color: #2d2626;
}

hr, .hr--small, .hr--medium, .hr--large {
 border-width: 1px 0 0 0;

    margin: 20px auto !important;
    border-top: 1px solid #e6e6e6 !important;
}


.box_right {
    width: 39%;
    float: left;
    text-align: right;
    padding-top: 25px;
}


.box_left {
    width: 60%;
    text-align: left;
    float: left;
}

a.buy_button {
    padding: 6px 11px;
    border-radius: 4px;
}


.fourth_product_disposition .h_pod img.image {
    //max-height: 127px;
}

.fourth_product_disposition .h_pod {

    text-align: center;
}


.fourth_product_disposition p.sale_wheel{
    position: absolute;
    border: 1px solid #bf0000;
    padding: 12px 0px;
    border-radius: 50%;
    width: 82px;
    height: 82px;
    text-align: center;
    text-transform: uppercase;
    color: #f5f3f3;
    line-height: 52px;
    left: 36%;
    top: 50px;
    font-size: 13px;
    background: #d14141;
    filter: alpha(opacity=84);
    opacity: 0.84;
}


form#AddToCartForm label.quantity-selector {
float: left;
width: 100%;
margin-bottom: 5px;
}
form#AddToCartForm .product_quantity {
float: left;
width: 125px;
  text-align:center;
}


form#AddToCartForm .product_quantity input#Quantity {
text-align: center;
width: 65px;
float: left;
}

.fourth_product_disposition .item.large--one-quarter:hover .sale_wheel {
    opacity: 1;
}




.fourth_product_disposition .item.large--one-quarter {

    position: relative;
}


.fourth_product_disposition p.sale_wheel {   opacity: 0;
    /* text-align: center; */
    -webkit-transition: opacity 50ms ease-in-out;
    -moz-transition: opacity 50ms ease-in-out;
    -ms-transition: opacity 50ms ease-in-out;
    -o-transition: opacity 50ms ease-in-out;
    transition: opacity 50ms ease-in-out;
    z-index: 5;
}

.first_product_disposition .item.large--one-quarter .home_prod_info p.sale s {
    color: #d75154;
    margin-right: 10px;
}
.first_product_disposition .item.large--one-quarter .home_prod_info p.sale {
    font-weight: 700;
      font-size: 16px;
}
.first_product_disposition .item.large--one-quarter .home_prod_info p.sale sup {
    font-weight: 800;
}
.second_product_disposition .item.large--one-half a .h_pod {
    text-align: center;
}



.alert-header-strip a.close {
   color: $headerStripColor;
    float: right;
    margin-right: 6px;
}

.alert.alert-header-strip {
    text-align: center;
    background: $headerStripBg;
    color: $headerStripColor;
}







div#myModal .modal-dialog .modal-content {
    background-color: Transparent;
}



div#myModal .modal-dialog {
    background-color: $upsell_popup_color;
}

h2.upsell-headline {
    text-align: center;
    color: $upsell_headline_color;
}

#no_button_text a {
    text-align: center;
    margin-top: 20px;
    color: $button_no_color;
    font-weight: 100;
    font-size: 16px;
}

button#yes_button_text {
    background-color: $button_yes_color;
    text-align: center;
    width: 100%;
    padding: 15px;
    font-size: 26px;
}


div#myModal .modal-dialog .modal-content .modal-header button.close {
    opacity: 1;
    color: #fff;
    text-shadow: none;
}



div#myModal .modal-dialog .modal-content .modal-header {
    BORDER: NONE;
}

h3#no_button_text {
    text-align: center;
    margin-top: 12px;
}



/* font family style start*/

$menuFont: {{ settings.menu_font_family }};
$titlefont: {{ settings.title_font_family }};
$descriptionfont: {{ settings.description_font_family }};
$buttonfont: {{ settings.button_font_family }};
$bodyfont: {{ settings.body_font_family }};


.site-header .wrapper a , .mobile-nav__item a
{
  font-family:$menuFont !important;
}


.product-description.rte, .rte {
    font-family: $descriptionfont !important;
}


h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6
{
 font-family: $titlefont !important;
}


.btn, .btn--secondary, .rte .btn--secondary, .rte .btn, .rte .btn--secondary
{
 font-family: $buttonfont !important;
}

body, input, textarea, select
{
 font-family: $bodyfont;
}

/*font family end*/

nav.nav-bar.desktop_nav {
   text-align: right;
}

a.site-header__cart-toggle.js-drawer-open-right {
    color:#fff;
}

.site-header__search {
    display: inline-block;
    max-width: 400px;
    margin-top: 15px;
    width: 50%;
    float: right;
    margin-right: 15px;
}

a.site-header__cart-toggle.js-drawer-open-right{
    color: {{ settings.cart_button_color }} !important;
}

.site-header_cart {
    background: {{ settings.cart_button_bg }};
    padding: 7px 10px 7px 10px;
    text-align: left;
    border-radius: 4px;
    /* width: 47%; */
    float: right;
    margin-top: 15px;
}
span.icon.icon-search {
    color: {{ settings.cart_button_bg }};
}
#search-field{    width: 74%;
    padding-left: 24px;
    border-radius: 4px;}

.icon-fallback-text_site {
    position: relative;
    left: 23px;
}

.account {
    padding: 0 15px;
    width: 90%;
    text-align: right;
    float: right;
}

.checkout_btn{
      background: none repeat scroll 0 0 {{ settings.add_to_cart_bg_color }};

    width: 250px;
    text-transform: uppercase;
    font-size: 26px;
    margin: 0 auto;
}



.timer_box samp {
     color: {{ settings.cart_timer_color }};
    font-weight: bold;
    font-size: 16px;
}

.grid__item.large--one-half.checkout-logos p, .grid__item.large--one-half.secure-shopping p {
    font-weight: bold;
}


#ComparePrice {
    font-size: 18px;
    float: left;
    margin-top: 10px;
    margin-right: 10px;
  text-decoration: line-through;
}
span#salePrice {
    display: inline-block;
    text-transform: uppercase;
    font-size: 13px;
    font-weight: 900;
    padding: 0 8px;
    border-radius: 3px;
    vertical-align: text-bottom;
  color: {{ settings.comparePriceColor}};
    border: 2px solid {{ settings.comparePriceColor}};
}

#ProductPrice {
    font-size: 2em;
    font-weight: bold;
}
@media (max-width: 767px) {
    .item.large--one-quarter {
    text-align: center;
}
  .section-header {
    text-align: center;
}
  .grid, .grid--rev, .grid--full, .grid-uniform {
    margin-left: 0px;
}
  button#yes_button_text {
    background-color: $button_yes_color;
    text-align: center;
    width: 100%;
    padding: 15px;
    font-size: 16px;
    white-space: normal;
}
  a.js-drawer-open-right.site-nav__link {
    float: right;
    margin-top: -58px;
}
   .third_product_disposition .grid__item.collage-grid__row .item.large--two-thirds a .h_pod img {
    width: auto;
    margin: 0 auto;
    vertical-align: middle;
    height: auto !important;
    display: table;
}

 /*hide bottom poup on mobile */
 {% if settings.popup_disable_mobile %}
  #someone-purchased, #recentBox{
  display:none !important;
  }
  {% endif %}

  .zoomContainer{
   display:none !important;

  }
  /* end css done by amit*/

}

@media (min-width: 767px) {
.second_product_disposition .item.large--one-half a .h_pod img {
    max-height: 400px;
}

}
table.model6 {
    margin-top: -25px !important;
    float: left;
    width: 100%;
}

.footer_four{
  text-align: center;
    color: #312e2e;
    margin-bottom: -18px;
}

input.btn--secondary.update-cart {
   background: none;
    color: #080808;
    border: 1px solid #596b8c;
    padding: 16px;
}
p.fake_counter_p {
    text-align: center;
    font-size: 16px;
    margin-top: 20px;
    font-weight: 600;
}
p.fake_counter_p span.fake_counter_b {
    padding: 5px;
    background-color: $visitor_counter_bg_color;
    border-radius: 5px;
    margin-right: 5px;
    margin-left: 5px;
    font-size: 22px;
    font-weight: 600;
    color: $visitor_counter_color;
    position: relative;
    font-family: Segment7Standard;
}
p.fake_counter_p span.fake_counter_b strong {
    font-size: 15px;
}
.misnary a.buy_button:hover{

  color:#fff !important;
}

.misnary a.buy_button{

  color:$buyButton_text_color;
}
table.model3 {
    margin-top: -50px !important;
    position: relative;
    float: left;
}
.clock-item {
    margin-top: -30px;
}
table.model5 {
    margin-top: -28px !important;
}
table#timertwohour {
    margin-top: -35px !important;
}
#model4{
    min-height: 115px !important;
}

.product-description.rte h2 {
    color: #524f4f;
}


@media (width: 768px) {
.item.large--two-thirds {
    width: 66.66%;
}
.item.large--one-third {
    width: 33.33%;
}
  .third_product_disposition .grid__item.collage-grid__row .item.large--two-thirds a .h_pod img {
    width: auto;
    margin: 0 auto;
    vertical-align: middle;
    height: auto;
    display: inline;
}
  .third_product_disposition .grid__item.collage-grid__row .item.large--one-third a .h_pod {
    height: 230px;
    line-height: 187px;
}
  .third_product_disposition .grid__item.collage-grid__row .item.large--one-third a .h_pod img {
    height: auto;
    display: inline;
    margin: 0 auto;
    vertical-align: middle;
}
  .third_product_disposition .grid__item.collage-grid__row .item.large--two-thirds a .h_pod {
    height: 520px;
    width: 100%;
    display: table;
    line-height: 480px;
}

}




  .loading {min-height: 300px; background: url('https://cdn.shopify.com/s/files/1/1620/0633/files/loader.gif') no-repeat center center;}

.flex-caption {
      width: 96%;
      padding: 2%;
      left: 0;
      bottom: 0;
      background: rgba(0,0,0,.5);
      color: #fff;
      text-shadow: 0 -1px 0 rgba(0,0,0,.3);
      font-size: 14px;
      line-height: 18px;
    }

div#ProductPhoto div:first-child {
    margin: 0 auto;

}
.flex-viewport {
    border: 1px solid #ccc;
    box-shadow: 0px 2px 4px #ccc;
}
/*.zoomContainer {
    margin-top: -40px;
}*/
.flexslider .flex-direction-nav a.flex-next {
    right: 0;
    width: 34px;
    padding: 5px;
    background-color: rgba(79, 79, 79, 0.43);
    background-position: -265px 0;
}
.flexslider .flex-direction-nav a.flex-prev {
    left: 0;
    width: 34px;
    padding: 5px;
    background-color: rgba(79, 79, 79, 0.43);
}
.flexslider:hover .flex-direction-nav .flex-prev {
    opacity: 0.7;
    left: 0 !important;
}
.flexslider:hover .flex-direction-nav .flex-next {
    opacity: 0.7;
    right: 0px !important;
}

p.section-header__left a {
    font-weight: 700;
    font-size: 1.893em;
    color: #000;
    text-transform: capitalize;
}

.video_title{ color: {{settings.video_title_color}};

}


@media screen and (min-width: 320px) and (max-width: 767px) {

    table.cart-table.full tr.cart__row td:first-child:before {
    display: none;
}
  .zoomImg { display:none !important; }

}
.mobile-nav>.mobile-nav__item a {
    font-weight: 100;
    text-transform: uppercase;
    font-size: 16px;
}

.mobile-nav>.mobile-nav__item {
    background-color: #f6f6f6;
    border-bottom: 1px solid #7b7b7b;
}


.mobile-nav__item a, .mobile-nav__toggle button {
    font-weight: 600;
}


.top-hedr p {
    margin-bottom: 0;
    font-size: 12px;
    margin-top: 5px;
    margin-left: 10px;
  font-weight: bold;
}

.top-hedr {
    float: left;
}
  .mng-header {
    float: right;
    margin-top: 10px;
}
  .mng-header ul {
    list-style: none;
    margin-top: 10px;
    margin-bottom: 0;
    margin: 0px;
    float: left;
}
  .mng-header ul li {
    float: left;
    padding: 0px;
    border-right: 1px solid #969696;
    line-height: 10px;
}
  .mng-header ul li a {
    font-size: 12px;
    padding: 2px 7px;
       color: $headerStripColor !important;
}
  .mng-header ul li ul li {
    border: none;
}
  .mng-header ul li:last-child {
    border: none;
}
  .alert.alert-header-strip {
    text-align: center;

    float: left;
    width: 100%;
}
.mng-header ul li ul {
    margin: 0px 5px;
}
.mng-header ul li a:hover {
    color: #fff;
    cursor: pointer;
}
.mng-header ul li ul li a {
    padding: 3px;
    cursor: pointer;
}


.text_cart_box {
    width: 65px;
    float: left;
    text-align: center;
    line-height: 22px;
    border-radius: 0px;
}


/**********************************
           Start css
***********************************/




/* New footer Style */
.footer {
    margin-top: 25px;
    margin-top: 1.5625rem;
    padding: 20px 0;
    padding: 1.25rem 0;
    background: #282828;
    color: #6f6f6f;
    font-size: 12px;
    font-size: 0.75rem;
    text-align: center;
}
.template-index .footer {
    margin-top: 0;
}
.footer__row {
    display: table;
    width: 100%;
    margin: 0;
    border: 1px solid #505050;
}

.footer__module--centered {
    text-align: center;
    vertical-align: middle;
}

.footer__module {
    padding: 20px;
    padding: 1.25rem;
    border-right: 1px solid #505050;
}




@media (min-width: 75em){
.footer__module {
    padding: 30px;
    padding: 1.875rem;
}
}
.footer__module+.footer__module, .footer__row+.footer__row .footer__module:first-child {
    border-top: none;
}
.footer__module:last-child {
    border-right: none;
}
.footer__title {
    margin-bottom: 10px;
    margin-bottom: 0.625rem;
    font-size: 11px;
    font-size: 0.6875rem;
  color: {{settings.color_footer_text_heading}};
    text-transform: uppercase;
    float: left;
    width: 100%;
    text-align: left;
}
.footer p {
    margin-bottom: 0;
    float: left;
    width: 100%;
    text-align: left;
    font-size: 12p;
}
.footer__linklist {
    margin-bottom: -8px;
    margin-bottom: -0.5rem;
    -webkit-columns: 2;
    -moz-columns: 2;
    columns: 2;
    -webkit-column-gap: 15px;
    -moz-column-gap: 15px;
    column-gap: 15px;
}
.footer__linklist li {
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    break-inside: avoid;
    /* padding-bottom: 8px; */
    /* padding-bottom: 0.5rem; */
    margin-bottom: 0;
}
.list--unstyled {
    list-style: none;
    padding: 0;
    margin: 0;
    float: left;
    width: 100%;
}
.footer__social .social__item:not(:last-child) {
    margin-right: 10px;
    margin-right: 0.625rem;
}
.footer__social .social__item {
    display: inline-block;
}
.footer__social svg {
    height: 15px;
    height: 0.9375rem;
    width: 15px;
    width: 0.9375rem;
}
.footer__logo {
    text-align: center;
    vertical-align: middle;
    max-width: 150px;
    opacity: 0.5;
    transition: opacity 0.2s ease-in-out;
    will-change: opacity;
}
.footer__form {
    position: relative;
    float: left;
    width: 100%;
}

.footer__copyright a{
  color: {{settings.color_footer_text}};
}
.footer__input {
    border: none;
    background: #6f6f6f;
    background: rgba(111,111,111,0.2);
    float: left;
    width: 100%;
	    color: #ddd;
}
.footer__submit {
    position: absolute;
    right: 0;
    top: 0;
    width: auto;
    background: none;
    border: none;
    text-align: right;
    transition: color 0.25s ease-in-out;
    z-index: 99;
    -webkit-appearance: button;
    cursor: pointer;
    color: #989898;
}
section.footer__module a {
  color: {{settings.color_footer_social_link}};
}
.footer__input, .footer__submit {
    padding: 12px 15px;
    padding: 0.75rem 0.9375rem;
}
.footer__misc {
    margin-top: 30px;
    margin-top: 1.875rem;
}
.footer__misc ul {
    float: right;
}

.footer__misc p {
    float: left;
}
input#mail:focus {
    outline: none;
    border: none;
}



footer.site-footer .wrapper .footer__row:first-child {
    border-bottom: navajowhite;
}
section.footer__module p {
    font-size: 12px;
    letter-spacing: 0.1px;
    margin-bottom: 0px;
      float: left;
    width: 100%;
}

.footer__module+.footer__module {
    border-top: none;
}



.cart_quantity {
    float: right;
    width: 125px;
}
.cart_quantity a.plus-minus {
    display: block;
    float: left;
    height: 40px;
    line-height: 38px;
    color: #808080;
    padding: 0;
    border: 1px solid #e4e4e4;
    margin-top: 0px;
    cursor: pointer !important;
}
.cart_quantity a.plus-minus i.iconsh.cart_plus {
    background-position: -64px -112px;
}
.cart_quantity a.plus-minus i.iconsh.cart_minus {
    background-position: -64px -127px;
}
.cart_quantity a.plus-minus i.iconsh {
    display: inline-block;
    line-height: 0;
    vertical-align: top;
    text-indent: 999em;
    white-space: nowrap;
    overflow: hidden;
    background: url(https://cdn.shopify.com/s/files/1/1712/5595/t/2/assets/ico-sprite-small.png?14161394713507193432);
}

.cart_quantity a.plus-minus i.iconsh {
    width: 16px;
    height: 16px;
    background-repeat: no-repeat;
    margin: 12px 5px;
}
.zoom img {
    display: block;

}
.zoom {
    display: inline-block;
    position: relative;
    width: 100%;
}
.cart_quantity.not_click_btn a.plus-minus {
    cursor: default !important;
    background-color: #eaeaea;
}
.cart_quantity a.plus-minus:hover {
    background-color: #f3f3f3;
}
.drawer__close button:active, .drawer__close button:focus {
    background-color: transparent;
    outline: none;
}

@media (min-width: 320px) and (max-width: 768px) {

  form#AddToCartForm .product_quantity a.plus-minus {
line-height: 43px;
    height:43px;
}

.collection-view button.change-view {
    padding: 3px 5px;
}
.flexslider .slides img {
    height: auto;
    -moz-user-select: none;
    min-height: 81px;
}

.mng-srch a span#CartCount {
    position: absolute;
    /* margin-left: 20px; */
    padding: 3px;
    background-color: rgba(222,222,222,0.99);
    line-height: 16px;
    top: 5px;
    border-radius: 50%;
    text-align: center;
    width: 22px;
    left: 57%;
}

.nav-bar.mobile_nav.featured-box--image img {
    width: 100%;
    margin-bottom: 5px;
}
span.featured-box--title {
    font-size: 18px;
}
.home_prod_info h5.title a {
    font-size: 18px;
}
.nav-bar.mobile_nav .icon-fallback-text.site-nav__link.js-drawer-open-left {
    font-size: 26px;
    padding: 0px;
    color: #fff;
    display: table;
    margin: 0 auto;
  	width: 100%;
}
.large--one-half {
    width: 100%;
}
.footer__module {
    display: block;
    margin-right: 15px;
    margin-right: 0.9375rem;
    padding: 20px 30px;
    padding: 1.25rem 1.875rem;
    border-width: 0 1px 0 0;
    float: left;
    width: 100%;
      border-bottom: 1px solid #505050;
      text-align: center;
}
  .footer__title {
     text-align: center;
     font-size: 12px;
  }
  .footer__misc {
    margin-top: 30px;
    margin-top: 1.875rem;
    text-align: center;
}
.footer__misc ul {
    float: none;
}

.footer__misc p {
    float: none;
}

.js-drawer-open-left .drawer--left {
    display: block;
    -ms-transform: none;
    -webkit-transform: none;
    transform: none;
    max-width: 100%;
    left: 0%;
  	z-index:99;
}
.drawer--left {
    width: 100%;
    left: -100%;
    border-right: none;
    -ms-transform: none;
    -webkit-transform: none;
    transform: none;
}

    .js-drawer-open-left .is-moved-by-drawer {
    -ms-transform: translateX(300px);
    -webkit-transform: none;
    transform: none;
}
	nav.nav-bar.mobile_nav .wrapper {
    padding: 0;
}
  nav.nav-bar.mobile_nav .wrapper .medium-down--show .grid__item.grid--full {
    padding-left: 0px;
}
  nav.nav-bar.mobile_nav .wrapper .large--hide.medium-down--show {

}
  .mng-srch {
    float: left;
    width: 25%;
    text-align: center;
    border: 1px solid #ccc;
    min-height: 55px;
    max-height: 55px;
    background-color: {{ settings.header_background_mobile }};
    border-right: none;
        border-bottom: none;
        position: relative;
}
  .grid__item.one-half.text-right.for-nav-menu {
    display: none;
}
.site-header {
    background: {{ settings.header_background_mobile }};
    max-height: 100px;
    min-height: 100px;
}
  nav.nav-bar.mobile_nav .wrapper {
    padding: 0;
    background-color: {{ settings.header_background_mobile }};
    border-bottom: 1px solid #ddd;
}
  .mng-srch a {
    padding: 15px;
    display: block;
}
  .site-nav--mobile .site-nav__link {
    display: inline-block;
    padding: 15px !important;
}
  div#NavDrawer {
    background-color: transparent;
}

  .drawer__header {
    display: table;
    height: 55px;
    width: 25%;
    margin-bottom: 15px;
    border-bottom: 1px solid #e9e9e9;
    background-color: #f6f6f6;
}
  .drawer__title.h3 {
    display: none;
}
  .drawer__close button {
    position: relative;
    right: 0px;
    height: 42px;
    padding: 12px;
    color: inherit;
    text-align: center;
}
  div#NavDrawer {
    background-color: rgba(0, 0, 0, 0.76);
    padding: 0px;
    margin: 0px;
    top: 100px;
}
  .supports-fontface .icon-fallback-text .icon {
    display: inline-block;
    font-size: 28px;
}
  button.icon-fallback-text.mobile-nav__toggle-open span.icon.icon-plus {
    font-size: 18px;
}
  .mobile-nav {
    margin: -15px -15px 0 -15px;
    padding: 15px;
    padding-top: 0;
}
  li.mobile-nav__item.mobile-nav__search {
    display: none;
}
  div#panel button.btn.icon-fallback-text {
    line-height: 0;
}
  div#panel span.icon.icon-search {
    font-size: 20px;
    padding: 0;
}
}


@media (min-width: 75em){
.footer__linklist {
    -webkit-columns: 3;
    -moz-columns: 3;
    columns: 3;
    -webkit-column-gap: 30px;
    -moz-column-gap: 30px;
    column-gap: 30px;
}
}

@media (min-width: 48em){
.footer__module {
    display: table-cell;
    margin-right: 15px;
    margin-right: 0.9375rem;
    padding: 20px 30px;
    padding: 1.25rem 1.875rem;
    border-width: 0 1px 0 0;
}
}


@media (width: 768px){

.mobile-nav__sublist .awemenu-megamenu-item {
    margin-left: 0px !important;
    list-style: none;
}
  .nav-bar.mobile_nav.featured-box--image img {
    width: 100%;
    margin-bottom: 5px;
}

.grid, .grid--rev, .grid--full, .grid-uniform {
    list-style: none;
    margin: 0;
    padding: 0;
    margin-left: 0;
}
  .main-content .grid--rev .grid-uniform .grid__item.large--one-third.medium--one-half {
    width: 50%;
    padding: 3%;
}
  .related aside.grid .grid__item .grid-uniform .grid__item.large--one-quarter.medium--one-third.small--one-half {
    width: 50%;
    padding: 2%;
    text-align: center;
}
}

@media (min-width: 641px) and (max-width: 767px) {
.related aside.grid .grid__item .grid-uniform .grid__item.large--one-quarter.medium--one-third.small--one-half {
    width: 50%;
    padding: 2%;
    text-align: center;
}
  .cart__image img {
    display: block;
    max-width: 60px;
}
}

@media (max-width: 480px) {
table.cart-table tr.cart__row.table__section a.cart__remove {
    position: absolute;
    top: -14px;
    right: 0;
    background-color: #ff1d1d;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    text-align: center;
    line-height: 29px;
    color: #fff;
      z-index: 99;
}

table.cart-table tr.cart__row.table__section {
    position: relative;
    margin-bottom: 15px;
    border-top: none;
    padding-top: 0px;
    border-bottom: 1px solid #ddd;
}
table.cart-table tr.cart__row.table__section td span.h5 {
    margin-bottom: 0;
}
.cart__image {
    display: block;
    margin-top: -9px;
}
  table.cart-table tr.cart__row.table__section td.text-right:before {
    display: none;
}
  table.cart-table tr.cart__row.table__section td.text-right {
    padding: 0;
}
}

@media (min-width: 320px) and (max-width: 640px) {

  .h_pod a img {
    //width: 100%;
}

  #bottom_blocks .bottom-block .block-logo {
    float: left;
    height: 49px;
    margin-right: 0px;
    width: 100%;
        text-align:center;
}
#bottom_blocks .block-content {
    width: 100%;
    float: left;
    text-align:center;
}

.block-heading {
    color: #000000;
    font-size: 24px;
    line-height: 28px;
    margin-bottom: 5px;
    margin-top: 10px;
    float: left;
    width: 100%;
}
.related aside.grid .grid__item .grid-uniform .grid__item.large--one-quarter.medium--one-third.small--one-half {
    width: 100%;

    text-align: center;
}
}

@media (min-width: 768px) {
	li.site-nav--has-dropdown.megamenu-dropdown {
    position: inherit;
}
  .template-collection .grid-uniform .grid__item {
    text-align: center;
    margin-bottom: 16px;
}
}

/* #AddToCart.big_atc {
    width: auto;
    font-size: 30px;
    font-weight: normal;
    padding: 15px 45px;
} */

.topBarProductFixed {
    display:none;
  	text-align: center;
    position: fixed;
    top: 0;
    background: rgba(255, 255, 255, 0.95);
    left: 0;
    width: 100%;
    box-shadow: 0 0 22px -1px #888;
    z-index:999;
  }
  .topBarProductFixed.active{
    display:block;
  }
  .topBarProductFixed .grid__item.one-half > * {
    display: inline-block;
    margin: 0;
    vertical-align: middle;
  }
  .mobile_title{
    display: none;
  }
  @media only screen and (max-width:667px) {
    .mobile_title{
      display: block;
      margin-bottom: 31px;
    }
    .desktop_title{
      display: none;
    }
    .topBarProductFixed .grid__item.one-half:first-child{
      width:30%;
      margin-bottom: 0;
    }
    .topBarProductFixed .grid__item.one-half:first-child h3{
      display:none;
    }
    .topBarProductFixed .grid__item.one-half:last-child{
      width:70%;
      margin-bottom: 0;
    }

    #AddToCart {
      padding: 18px 8px;
      font-size: 16px;
    }
    #AddToCart span{
      font-size: 15px;
    }

  }

@media (max-width: 768px) and (min-width: 320px){
  .drawer__header, .site-header_currency {
      display: table;
      height: 55px;
      width: 25%;
      margin-bottom: 0px;
      border-bottom: 1px solid #e9e9e9;
      background-color: #f6f6f6;
  }

  .site-header_currency select {
    padding: 8px 30px;
  }
}

/**********************************
                end css
**********************************/