/*============================================================================
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
==============================================================================*/
$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: #313131;
$colorSecondary: #db1d25;
$colorSecondaryaccent: #db1d25;

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


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

$btnbackColor: #db1d25;
$colorBtnTeriary: transparent;

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

// Text colors
$colorTextBody: #313131;

// Backgrounds
$colorBody: #ffffff;



// Border colors
$colorBorder: #ffffff;

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

// Site Footer
$colorFooterBg: #000000;
$colorFooterText: #ffffff;

// Logo max width
$logoMaxWidth: 60px;

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

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

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

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

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




$headerFontStack: "Droid Sans", "HelveticaNeue", "Helvetica Neue", sans-serif;
$headerFontWeight: 900;

$bodyFontStack: "Droid Sans", "HelveticaNeue", "Helvetica Neue", sans-serif;
$baseFontSize: 16px; // Henceforth known as 1em

@font-face {
  font-family: 'icons';
  src: url('//meatnbone.com/cdn/shop/t/426/assets/icons.eot?126413');
    src: url('//meatnbone.com/cdn/shop/t/426/assets/icons.eot?126413#iefix') format("embedded-opentype"),
      url('//meatnbone.com/cdn/shop/t/426/assets/icons.woff?126413') format("woff"),
        url('//meatnbone.com/cdn/shop/t/426/assets/icons.ttf?126413') format("truetype"),
          url('//meatnbone.com/cdn/shop/t/426/assets/icons.svg?126413#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;
}
.footer-content input#Email.input-group-field.home {
    background-color: #fdf9f9f5;
}
.footer-content h3{
  margin: 0px;
  text-algin:right;
  font-weight: bold;
  font-size: 19px;
}

/*============================================================================
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;
}

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: 15px;
  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 {

}
}

/*============================================================================
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;
  @include at-query ($max, $medium){
    background-color: $colorBody;
  }
}

body {
  background-color: $colorBody;
}

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

.wrapper {
  @include clearfix();
  max-width: 92%;
  margin: 0 auto;
  padding: 0 15px;
  @include at-query ($min, $small) {
    padding: 0;
  }  
  @include at-query ($max, $medium) {   
    padding:0;
  }
}

.header-wrapper {
  @include clearfix();
  max-width: $siteWidth;
  margin: 0 0;
  padding: 0;
  @include at-query ($min, $small) {
    padding: 0 0;
  }
}

.main-content {
  display: block;
  padding-bottom: $gutter * 2;
  @include at-query ($max, $medium) {
    padding-bottom: 0;
    margin-top: 14px;
  }

}
/*.index-pgi .col-img {
	margin-bottom: 60px;
}*/
.index-pgi .col-img {
margin-bottom: 14px;
}
/*============================================================================
#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.3;
  font-family: $bodyFontStack;
  color: $colorTextBody;
  font-weight: 500;
  -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.2;

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

h5 {
  display: block;
  font-family: $headerFontStack;
  font-weight: 500;
  margin: 0 0 2em;
  line-height: 1.2;

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

h3 {
  display: block;
  font-family: $headerFontStack;
  font-weight: 400;
  margin: 0 0 2em;
  line-height: 1.2;

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

h6 {
  display: block;
  font-family: $headerFontStack;
  font-weight: 500;
  margin: 0 0 0.5em;
  line-height: 1.2;

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

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

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

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

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

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

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;
}

.search-result form.col-product-form .overlay, #shopify-section-1516584670311 .overlay {
    position: relative;
    right: 0;
    bottom: 0px;
}

.search-result .col-product-form #productSelect {
    display: inline-block;
}
/*================ Horizontal Rules ================*/
hr {
  clear: both;
  border-top: solid $colorBorder;
  border-width: 1px 0 0;
  margin: $gutter 0;
  height: 0;
  @media screen and (max-width:768px){
    margin-bottom: 15px;
  }

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

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

/*================ Section Headers ================*/
.section-header {
  margin-bottom: 15px;
  @media screen and (max-width:768px){
    margin-bottom: 0 !important;
    margin-top: 46px;
  }
}



@include at-query ($min, $large) {
  .section-header {
    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: 2em;
  }

  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: #313131;;
}

button {
  overflow: visible;
}

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

.btn,
.rte .btn {
  display: inline-block;
  padding: 10px 40px;
font-family:$headerFontStack;
  width: auto;
  margin: 0;
  line-height: 1.42;
  font-weight: 900;
  font-size: 12px;
  text-decoration: none;
  text-align: center;
  vertical-align: middle;
  // white-space: nowrap;
  text-transform: uppercase;
  cursor: pointer;
  border: 1px solid transparent;
  @include user-select(none);
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px transparent;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;

  
  border-radius: 6px;
  text-transform: capitalize;
  padding: 6px 25px;
  font-size: 18px;
  font-weight: 500;
  


  /*================ Set primary button colors - can override later ================*/
  background-color: $btnbackColor;
  color: #ffffff;

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

    -webkit-transition: all 0.3s;
    transition: all 0.3s;
  }

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

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

@media (max-width:767px)  {
  .btn, .btn--secondary, .rte .btn--secondary, .btn--tertiary, .rte .btn--tertiary, .rte .btn, .rte .btn--secondary, .rte .btn--tertiary {

    width: 105px;  }
  .featured-product-container-mobile .featured-product-details span.h2 {width: 205px!important;}
}

@media (max-width:768px)  {
  .btn, .btn--secondary, .rte .btn--secondary, .btn--tertiary, .rte .btn--tertiary, .rte .btn, .rte .btn--secondary, .rte .btn--tertiary {

    min-width: 205px;  }
  .featured-product-container-mobile .featured-product-details span.h2 {min-width: 205px!important;}
  .template-index #shopify-section-home-masonry {
    margin-top: 0 !important;
}
}


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

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

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

@-moz-document url-prefix() { 
  .btn,
  .rte .btn  {
    padding:5px 25px;
  }
}


.sliderh .slick-initialized .slick-slide,
.banner-content{
    background-color: #000;
}

.home-promotion-block .grid__item{
    background-color: #fff;
}
.fs-timeline .fs-timeline-entry {
    background-color: #fff;
}
.color-white{
  color:hsl(0,0%,100%) !important;
  border-color:#ffffff!important;
}
.color-black{
  color:#000!important;
  border-color:#000!important;
}

.cart-continue-button {
border-color:$colorBtnSecondaryText;
}
.btn--tertiary,
.rte .btn--tertiary {
  @extend .btn;
  background-color: $colorBtnTeriary;
 
  border-style: solid;
  border-width: 2px;
   


  &: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%;
  height: 0;
  height: 100%;
  min-height: 500px;

  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 gainsboro;
  max-width: 100%;
  padding: 8px 10px;
  border-radius: $radius;
  color:black;

  &:focus {
    border: 1px solid darken(black, 10%);
    outline:transparent;
  }

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

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

.single-option-selector {

  border-bottom: 4px solid #db1d25;
  border-top: none;
  border-left: none;
  border-right: none;
  width: 200px;
  padding: 8px 10px 8px 0px;


}

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("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='50' fill='#313131'><polygon points='0,0 100,0 50,50'/></svg>");
    repeat: no-repeat;
    position: right 10px center;
    color: transparent;
  }
  background-size:12px;
  min-width:150px;
  padding-right: 30px !important;
  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;
}

/*================ 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;
  font-weight: 900;
  text-transform: uppercase;
  font-size: 12px;
}

/*================ 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;

  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: 10px; 
    
  }

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

  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 {

  vertical-align: middle;
  margin: 0;
}

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

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


}

@media screen and (max-width : 768px){ 
  .input-group-field.banner {
    width: 60%;
  }
}


.input-group-btn {
  position: relative;
  white-space: nowrap;
  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;
  padding: 0 0px 0px 10px;
vertical-align: middle;
}

/*================ 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-dogecoin:before { content: "\e904"; }
.icon-dwolla:before { content: "\e905"; }
.icon-facebook:before { content: "\e902"; }
.icon-fancy:before { content: "\46"; }
.icon-forbrugsforeningen:before { content: "\e906"; }
.icon-google-plus:before { content: "\e909"; }
.icon-grid-view:before { content: "\e603"; }
.icon-hamburger:before { content: "\e601"; }
.icon-instagram:before { content: "\e901"; }
.icon-instagram2:before { content: "\e90b"; }
.icon-interac:before { content: "\49"; }
.icon-jcb:before { content: "\4a"; }
.icon-laser:before { content: "\e907"; }
.icon-list-view:before { content: "\e604"; }
.icon-litecoin:before { content: "\e908"; }
.icon-maestro:before { content: "\6d"; }
.icon-master:before { content: "\4d"; }
.icon-minus:before { content: "\e602"; }
.icon-paypal:before { content: "\50"; }
.icon-pinterest:before { content: "\e903"; }
.icon-plus:before { content: "\e605"; }
.icon-rss:before { content: "\72"; }
.icon-search:before { content: "\e90a"; }
.icon-solo:before { content: "\e902"; }
.icon-stripe:before { content: "\53"; }
.icon-switch:before { content: "\e903"; }
.icon-tumblr:before { content: "\74"; }
.icon-twitter:before { content: "\e900"; }
.icon-vimeo:before { content: "\76"; }
.icon-visa:before { content: "\56"; }
.icon-x:before { content: "\e606"; }
.icon-youtube:before { content: "\e907"; }
.icon-account:before { content: "\e90c"; }


.chevron::before {
  border-style: solid;
  border-width: 0.25em 0.25em 0 0;
  content: '';
  display: inline-block;
  height: 0.45em;
  left: 0.15em;
  position: relative;
  top: 0.15em;
  transform: rotate(-45deg);
  vertical-align: top;
  width: 0.45em;
}

.chevron.right-angle:before {
  left:-15px;
  transform: rotate(45deg);
  float:right;
  font-size: 1.4em;
}

.chevron.left-angle:before {
  left: 32px;
  transform: rotate(-135deg);
  float:left;
  font-size: 1.4em;

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

  li {
    margin: 0 ($gutter / 4) ($gutter / 4);
    color: #ffffff;
    cursor: default;
  }

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

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

.header-icons {

  .icon {
    font-size: 30px;
    line-height: 26px;
    margin-left: 15px;
   @media screen and (max-width:960px){
      margin-left:5px;
    }
  }
  .search-wrapper .icon{
    margin-left:0;
  }

  a {
    color: #292929;

    &:hover {
      color: darken(#292929, 10%);
    }
  }

}


.social-icons {
  &.mobile-social{
    li {
      margin: 0 5px ($gutter / 2);
 
  

      vertical-align: middle;

      @include at-query ($min, $postSmall) {
        margin-left: 0;
      }
      .icon {
        font-size: 30px;
        line-height: 26px;
      }

      a {
        color: #232323;

        &:hover {
          color: darken(#232323, 10%);
        }
      }
    }
  }
  li {
    margin: 0px 0px 15px 15px;
    vertical-align: middle;
    color: #ffffff;


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


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

    a {
      color: #ffffff;

      &:hover {
        color: darken(#ffffff, 10%);
      }
    }
  }
}
@media screen and (max-width:1180px){
.social-icons li {
margin: 1.5%;
}
.related-product {
	padding: 0 20px;
}
}

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

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

  a {
    display: block;
    color:#313131;
  }

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

  }
  .current{
    color:#313131;
  }
}

/*============================================================================
#Site Header
==============================================================================*/
.site-header {
  padding-top: 15px;

}
.site-header__logo img{
 margin: 0px !important; 
}
.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;
    font-family: $headerFontStack;
    text-transform: uppercase;
    font-size: 31px;
    color: #292929;
    letter-spacing: 0.01em;
  }

  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 {
  width: 100%;

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

/*============================================================================
#Site Nav and Dropdowns
==============================================================================*/
.nav-bar {
  background-color: $colorNav;
}
#AccessibleNav{
	display: flex;
    justify-content: space-between;
    align-items: center;
}
.site-nav {
  font-size: 12px;
  cursor: default;
  margin: 0 0 0 0;
  color: #313131;

  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;
  white-space: nowrap;
  color:#292929;

  &:hover,
  &:active,
  &:focus {
    color: #313131;
  }

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

  .site-nav--active > & {

  }

  .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: none;

   
  }
}

/*================ 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: table;
  margin:0 auto;
  width: 100%;
  vertical-align: bottom;
  padding-bottom: 5px;

  // 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: 0 15px;
  text-decoration: none;

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

  &:active,
  &:focus {
    background-color: darken($colorDrawers, 5%);
  }
}
.mobile-nav__link-group{  
  position:absolute;
  top: 15%;
  left: 0;
  right: 0;

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

.mobile-nav__has-sublist {
  display: table;
  width: 80%;
  margin: 0 auto;

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

.mobile-nav__toggle {
  position: absolute;
  right: 0;
}

.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:#292929;
  background-color:#ffffff;
  transition: $drawerTransition;

  a {
    color:#292929;

    &: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;
    }
  }
}

.drawer--bottom {
  max-width: 100%;
  width: 100%;
  height: 100%;
  top: 100%!important;
  bottom: -100%;
  border-top: 1px solid $colorDrawerBorder;
  z-index:9002;

  .js-drawer-open-bottom & {
    display: block;
    @include transform(translateY(-100%));

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

#PageContainer {
  overflow-x:auto;
  margin:0 auto;
  overflow: hidden;
}

/*
Affecting the user's position so when
leaving the menu, they lose their place. 
*/
.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;

}

.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 0 10px;
  color: inherit;
  font-size: 1.4em;
  &:active,
  &:focus {
    background-color: darken($colorDrawers, 5%);
  }
}
.mobile__nav-social-media{
  position:absolute;
  bottom:10px;
  left:0;
  right:0;
  text-align: center;
  .mobile-account-link{
    display:inline-block;
    margin:15px 10px;
    text-transform:uppercase;
    font-weight:800;
  }
}
.mobile-menu-hr{
  border-top:initial;
  border: 1px solid #fff;
  margin: 15px 15px;
}
/*============================================================================
#Site Footer
==============================================================================*/
.site-footer {
  background-color: $colorFooterBg;
  padding:  30px 0 30px 0;
  color: $colorFooterText;

  @include at-query ($min, $large) {
    padding:  30px 0 30px 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;
    text-align: center;
  }

  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: 30px 15px;
    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)
==============================================================================*/


.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;
}

.ajaxcart-item__price-strikethrough {
  float: right;
}

 // settings.ajax_cart_method


.hvr-grow {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
}
.hvr-grow:hover, .hvr-grow:focus, .hvr-grow:active {
  -webkit-transform: scale(1.03);
  -webkit-font-smoothing: antialiased;
  transform: perspective(1px) scale(1.03);
}

.center {text-align:center!important;}

.section-border {
  border: 1px solid rgba(224,224,224,1);
  -webkit-box-shadow: 0px 0px 3px 1px rgba(224,224,224,1);
  -moz-box-shadow: 0px 0px 3px 1px rgba(224,224,224,1);
  box-shadow: 0px 0px 3px 1px rgba(224,224,224,1);

}
.picker__button--today, .picker__button--clear, .picker__button--close {
    font-size: 16px !important;
}
.picker__nav--prev:before, .picker__nav--next:before {
    border-top: .3em solid transparent !important;
    border-bottom: .3em solid transparent !important;
    border-right: 0.4em solid #000000 !important;
}
.picker__nav--next:before {
    border-right: 0!important;
    border-left: 0.4em solid #000000!important;
}
.col-product-form #productSelect {
    display: block;
}
select.product-single__variants{
	margin-bottom: 15px;
    border-left: 1px solid #ddd !important;
    border-right: 1px solid #ddd !important;
    border-top: 1px solid #ddd !important;
    padding-left: 5px !important;
}
.variant-group label[for] {
    font-size: 18px;
}
@media (max-width: 1180px) {
  .three-fifths-width {padding: 0px 0px 15px 15px}
  .masonryh{
    padding-left:0;
  }

}
@media (min-width:1181px){  
  .full-width {padding: 0 15px 0 15px;}
  .half-width {padding: 0 15px 0 15px;}
  .quarter-width {padding: 15px;}
  .two-fifths-width {padding: 0px 0px 30px 0px;}
  .three-fifths-width {padding: 0px 0px 30px 30px;}
  .three-fifths-pad {padding-left: 0px!important;}
}
.content-class { height: 100%;}
.newsletter-content-class {padding: 10px; /*height: 100%;*/}
.list-collections-content {padding: 0px; height: 100%;}
.sliderh {height: 960px; min-height: auto;}
.masonryh {height: 860px; min-height: auto;}
.masonryhrow {height: 480px; min-height: auto;}
/*.newsletterh {height: 425px; min-height: auto;}
.promotionh {height: 425px; min-height: auto;}*/
.bannerh {height: 680px; min-height: auto;}
.featured-collectionh { min-height: auto;}

.featuresh {height: 470px; min-height: auto;}
.blogh {height: 570px; min-height: auto;}
.instagramh {height: 300px; min-height: auto;}
.desktop-cart {padding-right: 15px;}

.headroom {
  will-change: transform;
  transition: transform 200ms linear;
}
/*
.headroom--pinned {
  transform: translateY(0%);
}
.headroom--unpinned {
  transform: translateY(-100%);
}
*/

/*============================================================================


.scroll_fixed {
position:absolute;
top:210px;
width: 100%;
}
.scroll_fixed.fixed {
position:fixed;
top:0;
} 


==============================================================================*/

img.collection-image {width: 100%;}
.collection-image-grid {background: #fff; 
}
.collection__title {
  padding-top: 30px;
  padding-bottom: 15px;
  text-align: center;
  font-family: $headerFontStack;
  color: #313131;
}

.featured-product-collection {height: 400px; min-height: auto;}

.collection-desc {
  width: 80%;
  font-size: 16.5px;
  margin: 0 auto;
  text-align: center;
  font-weight: 400;
  color: #313131;
  line-height: 1.6;
  margin-top: -7px;
  margin-bottom:30px;
  @media screen and (max-width:768px){
    margin-bottom: 15px;
  }
}


.ad-slot-text {background: #000000;}



/* 
Site Footer
*/

.site-footer a {

  color: $colorFooterText;

}

.site-footer a:hover {

  color: #313131;


}

.footer-content {
  display: flex;
  justify-content: space-between;
}

.footer-copyright {

  text-align: center;


}

.header-wrapper {

  width: 100%;
  display: flex;
  justify-content: space-between;
}
.remove-left{
  margin-left: -15px;
}
.picker__table td{
  font-size: 16px;}
/****23-1-2018****/
@font-face {
    font-family: Gotham_lighter;
    src: url(Gotham_lighter.ttf);
}
.collection-desktop-bg {
	position: relative;
}
.farm-title {
	position: absolute;
	bottom: 0;
	background: #ef2526;
	color: #fff;
	width: 100%;
	padding: 10px 30px 0;
}
.farm-desc h2 {
	text-align: left;
	font-size: 30px;
	font-family: Gotham_Bold;
}
.farm-desc {
	text-align: left;
	font-size: 18px;
	font-family: Gotham_lighter;
}
.farm-desc {
	margin: 30px auto;
	text-align: left;
}
.farm-desc .grid__item {
	padding-left: 0;
}
.how-work {
	float: left;
	font-size: 22px;
	font-family: Gotham_Bold;
	font-weight: bold;
}
.farm-products-heading {
	text-align: center;
	text-transform: uppercase;
	font-weight: bold;
	font-family: Gotham_Bold;
	font-size: 40px;
}
.farm-desc p {
	margin-top: 15px;
	margin-bottom: 25px;
}
.right-padding-sectn h2 {
	text-align: center;
	font-weight: bold;
	font-family: Gotham_Bold;
}
.collection-image-grid.collection-desktop-bg1 {
	padding: 0 15%;
}
.collection-desktop-bg1 .collection-featured-image {
	float: left;
	width: 20%;
	position: relative;
	left: 7%;
	top: -35px;
}
.collection-desktop-bg1 .section-header.collection-header {
	float: left;
	width: 80%;
}
.collection-image-grid.collection-desktop-bg1 {
	padding: 7% 10% 2%;
	display: inline-block;
}
.collection-desktop-bg1 .sub-title {
	display: inline-block;
	width: 44%;
	text-align: left;
	color: #ef2526;
	font-size: 19px;
	padding-left: 3%;
	box-sizing: border-box;
	vertical-align: top;
	padding-top: 15px;
}
.collection-desktop-bg1 .collection__title {
	display: inline-block;
	width: 55%;
	text-align: right;
	text-transform: uppercase;
    border-right: 1px solid #231f20;
    padding-right: 3%;
    padding-top: 15px;
    padding-bottom: 15px;
    box-sizing: border-box;
    font-family: Gotham_Bold;
    color: #000;
    font-weight: bold;
}
.collection-desktop-bg1 .collection-header .col-desc{
    font-family: Gotham_lighter;
    letter-spacing: 2px;
    font-size: 16px;
}
.collection-desktop-bg1 .collection-header .collection__title {
	font-size: 45px;
    line-height: 40px;
}
.collection-header .col-desc a {
	text-decoration: underline;
}
.collection-header .col-desc {
	font-size: 20px;
	width: 56%;
	margin: 0 auto;
}
.small-font {
	float: right;
	font-size: 30px;
}
.left-padding-sectn {
	padding-right: 10%;
	border-right: 1px solid #000;
}
.right-padding-sectn {
	padding-left: 10%;
}
.how-work {
	width: 100%;
    text-align: center;
}
.index-pgi p a {
	font-family: Gotham_Bold;
	font-size: 27px;
	text-transform: uppercase;
	font-weight: bold;
}
.farm-allproducts .product-price {
	font-family: Gotham_Bold;
	font-size: 24px;
	color: #e2231a;
	margin-bottom: 10px !important;
	display: block;
}
.farm-title.banner-title h2 {
	margin-bottom: 0;
	font-size: 30px;
    font-family: Gotham_Bold;
}
.shipping_btn.btn {
    width: 100%;
    margin: 10px 0;
}
.quick-view1.btn {
	border-radius: 0;
	text-transform: uppercase;
	font-family: Gotham_Bold;
}
#datepicker {
    width: 100%;
    margin: 10px 0;
}
.datepicker_outer {
    width: 100%;
    margin: 10px 0;
}
#productSelect1 {
    width: 100%;
}
.shipping_options label {
    color: #000;
    font-size: 20px;
    line-height: 45px;
}.shipping_btn.btn {
    width: 100%;
    margin: 10px 0;
}
#datepicker {
    width: 100%;
    margin: 10px 0;
}
#your-shopping-cart .cart-continue-button a{color: #fff}
#your-shopping-cart .cart-continue-button:hover { 
    background-color: #313131;
  	color: #fff;
}
#your-shopping-cart #datepicker1 {
	width: 100%;
  margin: 10px 0;
}
#your-shopping-cart .cart-continue-button:hover a{color: #fff}
#your-shopping-cart .cart-continue-button a:hover{color: #fff}
.feature-flex-right .text-on-right.right-text {
	padding-left: 0;
}
.datepicker_outer {
    width: 100%;
    margin: 10px 0;
}
.shipping_options label {
    color: #000;
    font-size: 20px;
    line-height: 45px;
}
.template-cart .cart-purchase-wrapper .cart-continue-button {
    width:auto;
}
.btn-bottom1 a{
position: relative !important;
padding: 5px 25px;
}
.boxes-sameClass{
	position: relative;
}
.inner-border {
	border: 1px solid #000;
	padding: 20px;
	float: left;
	width: 100%;
	position: relative;
}
.pre-made {
	font-size: 40px;
	font-weight: bold;
	font-family: Gotham_bold;
    color: #000;
}
/*#subscription-boxes .card-shadow .ptest {
	position: absolute;
	z-index: 0;
	width: 100%;
	top: 50%;
	left: auto;
	float: left;
	transform: translateY(-50%);
}*/
.blog_inner_section {
	margin-bottom: 0;
}
.box-1.boxes-sameClass {
	padding-left: 0;
}
.grid-product-container .product-price-grid {
	font-size: 20px;
	font-family: Gotham_Bold;
}
#subscription-boxes .bottom-content {
    width: 55%;
	margin: 0 auto;
    color: #000;
}
#subscription-boxes .bottom-content h2 {
	font-size: 45px;
    font-weight: bold;
	font-family: Gotham_Bold;
}
#subscription-boxes .bottom-content img {
	width: 30%;
	margin-top: 60px;
}
#subscription-boxes .bottom-content p {
	font-size: 21px;
    font-family: Gotham_lighter;
}
.boxes-sameClass .product-price, .product-price-grid .p_desc2 p {
	font-family: Gotham_lighter;
	font-size: 16px; 
	color: #e2231a;
	margin-bottom: 0;
	text-align: left;
	padding-left: 30%;
}
.boxes-sameClass .quick-view1.btn {
	font-size: 12px;
	float: right;
	padding: 5px 20px;
	margin-top: 10px;
	margin-right: 15%;
}
.product-price-grid p {
    margin-bottom: 5px;
    color: #db1d25;
    font-weight: bolder;
}
.template-index input#Email.input-group-field.home::placeholder {
	color: #000;
}
.metatagfield-spce {
  height: auto;
}
.button-section a {
	text-transform: uppercase;
}
#contact-us .zipcode-validation #zipcode::placeholder {
	color: #fff !important;
    opacity: 1;
}
#contact-us .zipcode-validation #zipcode {
	color: #fff !important;
}
.pre-made {
	margin-left: 15px;
}
@-webkit-keyframes slideInDown {
  from {
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
    visibility: visible;
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes slideInDown {
  from {
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  } 
}
.slideInDown {
  -webkit-animation-name: slideInDown;
  animation-name: slideInDown;
}
.mob-collection-icon {
    display: none;
}

 #meat-n-39-bone-all-products #collection-template #bc-sf-filter-right{
  display: block; 
 }
.mob-collection-icon, .mob-collection-icon ul {
    width: 100%;
    float: left;
}
.mob-collection-icon ul {
    margin: 0 0 0 0;
    padding: 0 20px;
}
.mob-collection-icon ul li {
    float: left;
    width: 33.333%;
    list-style: none;
      padding: 0 1%;
    text-align: center;
}
.mob-collection-icon ul li img.col-icon {
    max-width: 80px;
}
.mob-collection-icon ul li h3 {
    font-size: 18px;
    margin-top: 6px;
    min-height: 44px;
}
.mob-collection-icon ul li.four-in-row {
    width:24.333%;
}
form[action^="/cart/add"] [type="submit"] {
    visibility:visible !important;
}


/*===============================
css 9-4-2018
===============================*/
p.product-coltion {min-height: 46px;}
 .index-pgi p.product-coltion a {font-size: 16px;}
.index-pgi .grid-product-container {position: relative;}
 /*form.col-product-form  .overlay, #shopify-section-1516584670311 .overlay {position: absolute;left: 0;right: 0;bottom:-40px;}*/
form.col-product-form .overlay, #shopify-section-1516584670311 .overlay {
left: 0;
right: 0;
display: inline-block;
margin-top: 10px;
}
.shopify-section .banner_bottom {margin: 43px auto;}
div#shopify-section-1529116392624 {
    margin-top: 50px;
}
#shopify-section-1516584670311 .homepage-collection-margin .sold-out {
    position: absolute !important;
}

.related-product .grid-product-container{min-height: 254px; margin-bottom:60px;}
.related-product p.product-coltion{min-height:auto;font-size: 15px;}
.related-product .overlay{    position: absolute;left: 0;right: 0;bottom: 0;}
.related-product p.metatagfield {font-size: 14px;}

/*===============================
css 9-4-2018
===============================*/

/*===============================
TYPOGRAPHY MEDIA QUERIES
===============================*/
@media only screen and (max-width: 1300px) {
  h1 {
    font-size: em(30px);
  }
  h2 {
    font-size: em(26px);
  }
  h3 {
    font-size: em(14px);
    font-weight: 400;
  }
  h4 {
    font-size: em(12px);
  }
  h5 {
    font-size: em(16px);
  }
  h6 {
    font-size: em(14px);
  }
	.collection-desktop-bg1 .collection-header .collection__title {
	font-size: 40px;
}
  .small-font {
	font-size: 28px;
}
  .collection-header .col-desc {
	font-size: 20px;
	width: 350px;
	margin: 0 auto;
}
}
@media only screen and (max-width: 1160px){
	.collection-image-grid.collection-desktop-bg1 {
      padding: 7% 10% 2%;
    }
    .collection-desktop-bg1 .collection-header .collection__title {
	   font-size: 36px;
       line-height: 36px;
	}
    .small-font {
	   font-size: 26px;
    }
    .box-1.boxes-sameClass::before {
      width: 100px;
    }
    .inner-border {
      padding: 20px;
    } 
    .box-2.boxes-sameClass::before {
        left: 10%;
    }
    .boxes-sameClass .quick-view1.btn{
      padding: 5px 10px;
    }
  .pre-made, #productOutput{padding:0 50px;margin-left:0;}
  .grid-product-container .product-price-grid{font-size:16px;}
  .product-price-grid .p_desc2 p{font-size:14px;}
  .boxes-sameClass .quick-view1.btn, .boxes-sameClass .quick-view1.btn--secondary, .boxes-sameClass .quick-view1.btn--tertiary{margin-right:20%;}
  #subscription-boxes .card-shadow .ptest {
	width: 25%;
}
  .grid-product-container .product-price-grid{width:75%;}
  .inner-border {
	padding: 10px;
}
}
@media only screen and (max-width: 960px){
	.collection-image-grid.collection-desktop-bg1 {
      padding: 7% 5% 2%;
    }
  .inner-border {
      padding: 30px 0px 35px 20%;
    } 
  .box-2.boxes-sameClass::before {
      left: 10%;
      top: 30%;
    }
    .box-1.boxes-sameClass::before {
      width: 80px;
      left: 2%;
      top: 30%;
    }
      .boxes-sameClass::before {
        width: 70px;
        left: 5%;
        top: 40%;
    }
 	.button-section a.btn--tertiary{
    	padding: 5px 10px;
    }
    .inner-border {
	padding: 10px;
}
  .grid-product-container .product-price-grid {
    font-size: 13px;
}
  .product-price-grid .p_desc2 p {
    font-size: 12px;
}
.product-price-grid .p_desc2 p{font-size:14px;}
.inner-border {
	min-height: 160px;
}
}
@media only screen and (max-width: 768px) {
/* .col-all-main  div#productOutput {
    display: none;
} */
  .bc-sf-filter-tree-mobile-open{
   display: block !important; 
  }
  #bc-sf-filter-scroll-to-top{
   display: none !important; 
  }
  .scroll-filter{
    position: fixed;
    color: white;
    right: -98px;
    z-index: 999;
    cursor: pointer;
    bottom: 50px;
  }
  span.silder_part {
    background: #fd0707ad;
    padding: 9px 25px;
    border-radius: 13px;
}
  span.arrow_slide {
    background: #000000d1;
    padding: 12px 5px;
    color: #fffdfd;
    font-size: 19px;
    border-radius: 10px;
}
  .scroll-filter.slide_part_demo {
    right: 10px !important;
}
  #meat-n-39-bone-all-products #collection-template #bc-sf-filter-tree-mobile {
    display: none;
}
 #meat-n-39-bone-all-products #collection-template .section-header{
  display: none; 
 }
 #meat-n-39-bone-all-products #collection-template #bc-sf-filter-right{
  display: none; 
 }
  
	.mob-collection-icon {
    display: block;
}
  h2 {
    font-size: em(20px);
  }
  .farm-desc .grid__item.medium--one-whole.one-half {
	width: 100%;
  }
  .left-padding-sectn {
	border-right: none;
    padding-right: 0;
  }
  .right-padding-sectn{
  	padding-left: 0;
  }
  .farm-products-heading {
	font-size: 34px;
  }
  .collection-desktop-bg1 .collection-featured-image {
	float: none;
	width: 100%;
	position: relative;
	left: auto;
	top: auto;
	right: auto;
	text-align: center;
}
  .collection-desktop-bg1 .section-header.collection-header {
	float: none;
	width: 100%;
}
  .collection-desktop-bg1 .collection__title {
	border-right: none;
	width: 100%;
}
  .collection-desktop-bg1 .sub-title {
	width: 100%;
	font-size: 19px;
	padding-left: 0;
	padding-bottom: 15px;
}
  .boxes-sameClass .quick-view1.btn{
    margin-right: 15%;
  }
  .small-font {
	font-size: 24px;
}
  .collection-desktop-bg1 .sub-title {
	font-size: 16px;
}
  .pre-made {
	font-size: 34px;
	margin-left: 15px;
}
  #subscription-boxes .bottom-content {
	width: 100%;
}
  #subscription-boxes .bottom-content h2{
	font-size: 40px;
}
  #subscription-boxes .bottom-content p {
	font-size: 19px;
}
  .collection-desktop-bg1 .collection__title {
	width: 100%;
    margin-bottom: 0;
}
  .small-font {
	float: left;
	width: 100%;
}
  .pre-made {
	margin-top: 20px;
	float: left;
	margin-bottom: 0;
}
  .collection-image-grid.collection-desktop-bg1 {
	padding: 7% 2% 2%;
	box-sizing: border-box;
	width: 100%;
}
    .boxes-sameClass .quick-view1.btn {
	margin-top: 20px;
    width: auto;
    min-width: auto;
}
  .collection-desktop-bg1 .sub-title {
	text-align: center;
	padding-top: 15px;
	border-top: 1px solid #000;
}
  .pre-made, #productOutput {
	padding: 0 50px !important;
	display: inline-block;
}
#productOutput  .grid-product-container {
    margin: 20px 0 0 20px;
}
#productOutput  .medium--one-half {
	width: 45%;
}
  .button-section a {
	margin: 2px auto;
}
  .template-collection main.wrapper {
    min-height:inherit !important;
    height: 100%;
    margin-bottom: 100px;
}
/** .template-collection .sticky-footer {
    bottom: inherit;
    top: 0;
    height: 56px;
}**/
.template-product .search-bar.inner-srch-bar {
    margin-top: 125px !important;
}
/* .col-all-main #collection-template {
    display: none;
} */
form.col-product-form .overlay,#shopify-section-1516584670311 .overlay  {position:relative;bottom:0; margin-top: 15px;}
  p.product-coltion {min-height: auto;}
 .related-product form.col-product-form .overlay{
    position: absolute;
    left: 0;
    right: 0;
    bottom: -40px;
}
  .related-product .grid-product-container {
    min-height: 300px;
    margin-bottom:40px;
  }
}
.boxes-sameClass .quick-view1.btn, .boxes-sameClass .quick-view1.btn--secondary, .boxes-sameClass .quick-view1.btn--tertiary {
	margin-top: 20px;
	width: 125px;
	min-width: 125px;
}
@media only screen and (max-width: 640px){
#productOutput  .grid-product-container {
    margin: 20px 0 0 0;
}
#productOutput  .medium--one-half {
	width: 100%;
}
.boxes-sameClass .quick-view1.btn, .boxes-sameClass .quick-view1.btn--secondary, .boxes-sameClass .quick-view1.btn--tertiary {
	margin-right: 36%;
	width: 130px !important;
	min-width: 130px !important;
}
  .pre-made{margin-left:0;}
   

}
@media only screen and (max-width: 480px){
	.grid-product-container.boxes-sameClass {
      width: 94%;
      margin: 20px 10px;
  }
   .boxes-sameClass .quick-view1.btn{
 	 margin-right: 10%;  
  }
    .grid-product-container.boxes-sameClass {
	width: 90%;
	margin: 20px 5%;
}
  .box-1.boxes-sameClass::before {
	width: 80px;
	left: 3%;
	top: 15%;
}
  .collection-desktop-bg1 .collection-header .collection__title {
	font-size: 32px;
	line-height: 32px;
	padding-right: 0;
    margin-bottm: 0;
}
.collection-desktop-bg1 .sub-title {
	text-align: center;
	padding-top: 15px;
	border-top: 1px solid #000;
}
  .collection-header .col-desc {
	width: 100%;
}
  .sub-title p{margin-bottom: 0}
  .collection-desktop-bg1 .collection-header .col-desc {
	font-size: 16px;
    text-align: center;
}
  .boxes-sameClass .quick-view1.btn {
	margin-top: 20px;
    width: 110px;
    min-width: 110px;
}

  .grid-product-container .product-price-grid {
	font-size: 18px;
	}
  .product-price-grid .p_desc2 p {
    font-size: 14px;
  }
  .pre-made, #productOutput {
	padding: 0 10px !important;
	display: inline-block;
}
  .picker__table td{
  font-size: 14px;}
  .picker__button--today, .picker__button--clear, .picker__button--close {
    font-size: 16px !important;
}
  .mob-collection-icon ul li img.col-icon {
    max-width: 50px;
}
  .mob-collection-icon ul li h3 {
    font-size: 16px;
    margin-top: 6px;
    min-height: 44px;
    margin-bottom: 12px;
}
  .related-product .overlay input[type="submit"]{width:auto; min-width: auto;}
  .related-product .grid-product-container{min-height:auto;}
}
@media only screen and (max-width: 1023px) {
  h2 {
    font-size: em(20px);
  }
}


.social-sharing a {

  font-size: 30px;

}

::-webkit-input-placeholder {
  font-size:16px !important;
}

:-moz-placeholder { 
  font-size:16px;
}

:-ms-input-placeholder {
  font-size:16px;
}
::-ms-input-placeholder {
  font-size:16px;
}
:placeholder-shown {
  font-size:16px;
}
.mobile-show {
	font-size: 1.2em;
	padding: 0;
	margin: 0;
  cursor:pointer;
}
form.col-product-form {
    margin-bottom: 10px;
}
.top-col-list li {
    width: 18%;
    display: inline-block;
    list-style: none;
}
.top-col-list li h3 {
    margin: 10px 0 10px 0px;
}
ul.top-col-list {
    text-align: center;
    margin: 0;
    padding: 0;
}
ul.top-col-list li img {
    max-width: 100%;
}
.site-header .single-dropdown{
width: 100% !important;
text-align: left;
box-shadow: 0 10px 13px rgba(0,0,0,0.1);
}
@media(max-width:767px){
.top-col-list li {
    width: 49%;
    display: inline-block;
    list-style: none;
}
  ul.top-col-list {
    margin-top: 30px;
}
}

@media(max-width:340px){
.mob-collection-icon ul li h3, .mob-collection-icon ul li .h3 {
    font-size: 16px;
    margin-top: 6px;
    min-height: 62px;
    margin-bottom: 12px;
}
}