/** Shopify CDN: Minification failed

Line 51:2 Unexpected "'small'"
Line 58:0 Comments in CSS use "/* ... */" instead of "//"
Line 61:0 Comments in CSS use "/* ... */" instead of "//"
Line 70:2 Expected identifier but found "*"
Line 75:3 Unexpected "zoom"
Line 90:16 Expected identifier but found "$"
Line 90:27 Expected identifier but found whitespace
Line 90:28 Unexpected "$"
Line 91:52 Unexpected "#"
Line 91:54 Expected identifier but found "$"
... and 695 more hidden warnings

**/
/* Namespaced CSS extracted from new-custom.scss(.liquid); limited to .bast-container */
.bast-container /*============================================================================
  Shoppers Grid System
  Copyright 2018 SoapTheme.
  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, .bast-container mixins, .bast-container 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
==============================================================================*/

/*============================================================================
#PageLoader and MainContent
#Breakpoint and Grid Variables
#General Variables
#Sass Mixins
#Normalize
#Grid Setup
#Basic Styles
#Helper Classes
==============================================================================*/

/*============================================================================
  #Breakpoint and Grid Variables
==============================================================================*/



/*================ The following are dependencies of csswizardry grid ================*/
  'small' '(max-width: #{$small}.bast-container )', .bast-container 'small-up' '(min-width: #{$postSmall}.bast-container )', .bast-container 'medium' '(min-width: #{$postSmall}.bast-container ) and (max-width: #{$medium}.bast-container )', .bast-container 'medium-down' '(max-width: #{$medium}.bast-container )', .bast-container 'medium-up' '(min-width: #{$postMedium}.bast-container )', .bast-container 'large' '(min-width: #{$postMedium}.bast-container ) and (max-width: #{$large}.bast-container )', .bast-container 'large-down' '(max-width: #{$large}.bast-container )', .bast-container 'large-up' '(min-width: #{$postLarge}.bast-container )', .bast-container 'xlarge-down' '(min-width: #{$postLarge}.bast-container ) and (max-width: #{$xlarge}.bast-container )', .bast-container 'xlarge' '(min-width:#{$postxLarge}.bast-container )'
);

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

// Sizing variables


// Z-index

/*============================================================================
  #Sass Mixins
==============================================================================*/
.clearfix{.bast-container &:after{
    content: '';
    display: table;
    clear: both; }
  *zoom: 1;
}.bast-container &:after{
    content: '';
    display: table;
    clear: both; }
  *zoom: 1;
}.bast-container /*============================================================================
  Prefixer mixin for generating vendor prefixes:
    - Based on https://github.com/thoughtbot/bourbon/blob/master/app/assets/stylesheets/addons/_prefixer.scss
    - Usage:

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

      -webkit-#{$property}: $value;
    } @else if $prefix == moz {.bast-container -moz-#{$property}: $value;
    } @else if $prefix == ms {.bast-container -ms-#{$property}: $value;
    } @else if $prefix == o {.bast-container -o-#{$property}: $value;
    } @else if $prefix == spec {.bast-container #{$property}: $value;
    } @else  {
      @warn "Unrecognized prefix: #{$prefix}";
    }
  }
}

}

}

}

  }
  }
}

/*============================================================================
  Layer promotion mixin for creating smoother animations with higher FPS.
==============================================================================*/
  -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
==============================================================================*/
  }
    @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;
    }
  }
}.bast-container /*============================================================================
  c
    - Based on csswizardry grid, .bast-container but with floated columns, .bast-container a fixed gutter size, .bast-container and BEM classes
    - Breakpoints defined above, .bast-container under #Breakpoint and Grid Variables
    - Note the inclusion of .grid-uniform to take care of clearfixes on evenly sized grid items
==============================================================================*/

/* Force clearfix on grids */
.grid, .bast-container .grid-uniform{
}.bast-container /* Manual grid__item clearfix */
.grid__item.clear{
  clear: both;
}


}




      @media only screen and #{$declaration}.bast-container {
        @content;
      }
    }
  }

    @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.
==============================================================================*/
    position:relative;
  }
}.bast-container /*============================================================================
  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}.bast-container grid, .bast-container #{$class-type}.bast-container grid-uniform{
  list-style: none;
  margin: 0;
  padding: 0;
  margin-left: -$gridGutter;
    margin-left: -$gridGutter / 2;
  }
}.bast-container #{$class-type}.bast-container grid__item{
  box-sizing: border-box;
  float: left;
  min-height: 1px;
  padding-left: $gridGutter;
  padding-left: $gridGutter / 2;
}
  vertical-align: top;
    width: 100%;
  };


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

    > .grid__item{
      float: none;
      display: table-cell;
      vertical-align: middle;
    }
  }.bast-container /*============================================================================
  Reversed grids allow you to structure your source in the opposite
  order to how your rendered layout will appear.
==============================================================================*/
#{$class-type}.bast-container grid--rev{.bast-container direction: rtl;
  text-align: left;

  > #{$class-type}.bast-container grid__item{
    direction: ltr;
    text-align: left;
    float: right;
  }
}.bast-container /* Gutterless grids have all the properties of regular grids, .bast-container minus any spacing. */
#{$class-type}.bast-container grid--full{.bast-container margin-left: 0;

  > #{$class-type}.bast-container grid__item{
    padding-left: 0;
  }
}.bast-container /*============================================================================
  WIDTHS
    - Create width classes, .bast-container prefixed by the specified namespace.
==============================================================================*/
  /** Whole */
  #{$class-type}.bast-container #{$namespace}.bast-container one-whole{ width: 100%; }.bast-container /* Halves */
  #{$class-type}.bast-container #{$namespace}.bast-container one-half{ width: 50%; }.bast-container /* Thirds */
  #{$class-type}.bast-container #{$namespace}.bast-container one-third{ width: 33.333%; }.bast-container #{$class-type}.bast-container #{$namespace}.bast-container two-thirds{ width: 66.666%; }.bast-container /* Quarters */
  #{$class-type}.bast-container #{$namespace}.bast-container one-quarter{ width: 25%; }.bast-container #{$class-type}.bast-container #{$namespace}.bast-container two-quarters{ width: 50%; }.bast-container #{$class-type}.bast-container #{$namespace}.bast-container three-quarters{ width: 75%; }.bast-container /* Fifths */
  #{$class-type}.bast-container #{$namespace}.bast-container one-fifth{ width: 20%; }.bast-container #{$class-type}.bast-container #{$namespace}.bast-container two-fifths{ width: 40%; }.bast-container #{$class-type}.bast-container #{$namespace}.bast-container three-fifths{ width: 60%; }.bast-container #{$class-type}.bast-container #{$namespace}.bast-container four-fifths{ width: 80%; }.bast-container /* Sixths */
  #{$class-type}.bast-container #{$namespace}.bast-container one-sixth{ width: 16.666%; }.bast-container #{$class-type}.bast-container #{$namespace}.bast-container two-sixths{ width: 33.333%; }.bast-container #{$class-type}.bast-container #{$namespace}.bast-container three-sixths{ width: 50%; }.bast-container #{$class-type}.bast-container #{$namespace}.bast-container four-sixths{ width: 66.666%; }.bast-container #{$class-type}.bast-container #{$namespace}.bast-container five-sixths{ width: 83.333%; }.bast-container /* Eighths */
  #{$class-type}.bast-container #{$namespace}.bast-container one-eighth{ width: 12.5%; }.bast-container #{$class-type}.bast-container #{$namespace}.bast-container two-eighths{ width: 25%; }.bast-container #{$class-type}.bast-container #{$namespace}.bast-container three-eighths{ width: 37.5%; }.bast-container #{$class-type}.bast-container #{$namespace}.bast-container four-eighths{ width: 50%; }.bast-container #{$class-type}.bast-container #{$namespace}.bast-container five-eighths{ width: 62.5%; }.bast-container #{$class-type}.bast-container #{$namespace}.bast-container six-eighths{ width: 75%; }.bast-container #{$class-type}.bast-container #{$namespace}.bast-container seven-eighths{ width: 87.5%; }.bast-container /* Tenths */
  #{$class-type}.bast-container #{$namespace}.bast-container one-tenth{ width: 10%; }.bast-container #{$class-type}.bast-container #{$namespace}.bast-container two-tenths{ width: 20%; }.bast-container #{$class-type}.bast-container #{$namespace}.bast-container three-tenths{ width: 30%; }.bast-container #{$class-type}.bast-container #{$namespace}.bast-container four-tenths{ width: 40%; }.bast-container #{$class-type}.bast-container #{$namespace}.bast-container five-tenths{ width: 50%; }.bast-container #{$class-type}.bast-container #{$namespace}.bast-container six-tenths{ width: 60%; }.bast-container #{$class-type}.bast-container #{$namespace}.bast-container seven-tenths{ width: 70%; }.bast-container #{$class-type}.bast-container #{$namespace}.bast-container eight-tenths{ width: 80%; }.bast-container #{$class-type}.bast-container #{$namespace}.bast-container nine-tenths{ width: 90%; }.bast-container /* Twelfths */
  #{$class-type}.bast-container #{$namespace}.bast-container one-twelfth{ width: 8.333%; }.bast-container #{$class-type}.bast-container #{$namespace}.bast-container two-twelfths{ width: 16.666%; }.bast-container #{$class-type}.bast-container #{$namespace}.bast-container three-twelfths{ width: 25%; }.bast-container #{$class-type}.bast-container #{$namespace}.bast-container four-twelfths{ width: 33.333%; }.bast-container #{$class-type}.bast-container #{$namespace}.bast-container five-twelfths{ width: 41.666% }.bast-container #{$class-type}.bast-container #{$namespace}.bast-container six-twelfths{ width: 50%; }.bast-container #{$class-type}.bast-container #{$namespace}.bast-container seven-twelfths{ width: 58.333%; }.bast-container #{$class-type}.bast-container #{$namespace}.bast-container eight-twelfths{ width: 66.666%; }.bast-container #{$class-type}.bast-container #{$namespace}.bast-container nine-twelfths{ width: 75%; }.bast-container #{$class-type}.bast-container #{$namespace}.bast-container ten-twelfths{ width: 83.333%; }.bast-container #{$class-type}.bast-container #{$namespace}.bast-container eleven-twelfths{ width: 91.666%; }
}.bast-container /*================ Clearfix helper on uniform grids ================*/
  .grid-uniform{.bast-container #{$class-type}.bast-container #{$namespace}.bast-container one-half:nth-child(2n+1), .bast-container #{$class-type}.bast-container #{$namespace}.bast-container one-third:nth-child(3n+1), .bast-container #{$class-type}.bast-container #{$namespace}.bast-container one-quarter:nth-child(4n+1), .bast-container #{$class-type}.bast-container #{$namespace}.bast-container one-fifth:nth-child(5n+1), .bast-container #{$class-type}.bast-container #{$namespace}.bast-container one-sixth:nth-child(6n+1), .bast-container #{$class-type}.bast-container #{$namespace}.bast-container two-sixths:nth-child(3n+1), .bast-container #{$class-type}.bast-container #{$namespace}.bast-container three-sixths:nth-child(2n+1), .bast-container #{$class-type}.bast-container #{$namespace}.bast-container two-eighths:nth-child(4n+1), .bast-container #{$class-type}.bast-container #{$namespace}.bast-container four-eighths:nth-child(2n+1), .bast-container #{$class-type}.bast-container #{$namespace}.bast-container five-tenths:nth-child(2n+1), .bast-container #{$class-type}.bast-container #{$namespace}.bast-container one-twelfth:nth-child(12n+1), .bast-container #{$class-type}.bast-container #{$namespace}.bast-container two-twelfths:nth-child(6n+1), .bast-container #{$class-type}.bast-container #{$namespace}.bast-container three-twelfths:nth-child(4n+1), .bast-container #{$class-type}.bast-container #{$namespace}.bast-container four-twelfths:nth-child(3n+1), .bast-container #{$class-type}.bast-container #{$namespace}.bast-container six-twelfths:nth-child(2n+1){ clear: both; }
  }
}.bast-container /*================ Helper show/hide classes around our breakpoints ================*/
  #{$class-type}.bast-container #{$namespace}.bast-container show{ display: block!important; }.bast-container #{$class-type}.bast-container #{$namespace}.bast-container hide{ display: none!important; }.bast-container #{$class-type}.bast-container #{$namespace}.bast-container text-left{ text-align: left!important; }.bast-container #{$class-type}.bast-container #{$namespace}.bast-container text-right{ text-align: right!important; }.bast-container #{$class-type}.bast-container #{$namespace}.bast-container text-center{ text-align: center!important; }.bast-container #{$class-type}.bast-container #{$namespace}.bast-container left{ float: left!important; }.bast-container #{$class-type}.bast-container #{$namespace}.bast-container right{ float: right!important; }
}

/*================ Our regular, non-responsive width and helper classes ================*/

/*================ Our responsive classes, if we have enabled them ================*/
    }
  }
}.bast-container /*============================================================================
    - Push classes, .bast-container to move grid items over to the right by certain amounts
==============================================================================*/
  /* Whole */
  #{$class-type}.bast-container push--#{$namespace}.bast-container one-whole{ left: 100%; @include silent-relative(); }.bast-container /* Halves */
  #{$class-type}.bast-container push--#{$namespace}.bast-container one-half{ left: 50%; @include silent-relative(); }.bast-container /* Thirds */
  #{$class-type}.bast-container push--#{$namespace}.bast-container one-third{ left: 33.333%; @include silent-relative(); }.bast-container #{$class-type}.bast-container push--#{$namespace}.bast-container two-thirds{ left: 66.666%; @include silent-relative(); }.bast-container /* Quarters */
  #{$class-type}.bast-container push--#{$namespace}.bast-container one-quarter{ left: 25%; @include silent-relative(); }.bast-container #{$class-type}.bast-container push--#{$namespace}.bast-container two-quarters{ left: 50%; @include silent-relative(); }.bast-container #{$class-type}.bast-container push--#{$namespace}.bast-container three-quarters{ left: 75%; @include silent-relative(); }.bast-container /* Fifths */
  #{$class-type}.bast-container push--#{$namespace}.bast-container one-fifth{ left: 20%; @include silent-relative(); }.bast-container #{$class-type}.bast-container push--#{$namespace}.bast-container two-fifths{ left: 40%; @include silent-relative(); }.bast-container #{$class-type}.bast-container push--#{$namespace}.bast-container three-fifths{ left: 60%; @include silent-relative(); }.bast-container #{$class-type}.bast-container push--#{$namespace}.bast-container four-fifths{ left: 80%; @include silent-relative(); }.bast-container /* Sixths */
  #{$class-type}.bast-container push--#{$namespace}.bast-container one-sixth{ left: 16.666%; @include silent-relative(); }.bast-container #{$class-type}.bast-container push--#{$namespace}.bast-container two-sixths{ left: 33.333%; @include silent-relative(); }.bast-container #{$class-type}.bast-container push--#{$namespace}.bast-container three-sixths{ left: 50%; @include silent-relative(); }.bast-container #{$class-type}.bast-container push--#{$namespace}.bast-container four-sixths{ left: 66.666%; @include silent-relative(); }.bast-container #{$class-type}.bast-container push--#{$namespace}.bast-container five-sixths{ left: 83.333%; @include silent-relative(); }.bast-container /* Eighths */
  #{$class-type}.bast-container push--#{$namespace}.bast-container one-eighth{ left: 12.5%; @include silent-relative(); }.bast-container #{$class-type}.bast-container push--#{$namespace}.bast-container two-eighths{ left: 25%; @include silent-relative(); }.bast-container #{$class-type}.bast-container push--#{$namespace}.bast-container three-eighths{ left: 37.5%; @include silent-relative(); }.bast-container #{$class-type}.bast-container push--#{$namespace}.bast-container four-eighths{ left: 50%; @include silent-relative(); }.bast-container #{$class-type}.bast-container push--#{$namespace}.bast-container five-eighths{ left: 62.5%; @include silent-relative(); }.bast-container #{$class-type}.bast-container push--#{$namespace}.bast-container six-eighths{ left: 75%; @include silent-relative(); }.bast-container #{$class-type}.bast-container push--#{$namespace}.bast-container seven-eighths{ left: 87.5%; @include silent-relative(); }.bast-container /* Tenths */
  #{$class-type}.bast-container push--#{$namespace}.bast-container one-tenth{ left: 10%; @include silent-relative(); }.bast-container #{$class-type}.bast-container push--#{$namespace}.bast-container two-tenths{ left: 20%; @include silent-relative(); }.bast-container #{$class-type}.bast-container push--#{$namespace}.bast-container three-tenths{ left: 30%; @include silent-relative(); }.bast-container #{$class-type}.bast-container push--#{$namespace}.bast-container four-tenths{ left: 40%; @include silent-relative(); }.bast-container #{$class-type}.bast-container push--#{$namespace}.bast-container five-tenths{ left: 50%; @include silent-relative(); }.bast-container #{$class-type}.bast-container push--#{$namespace}.bast-container six-tenths{ left: 60%; @include silent-relative(); }.bast-container #{$class-type}.bast-container push--#{$namespace}.bast-container seven-tenths{ left: 70%; @include silent-relative(); }.bast-container #{$class-type}.bast-container push--#{$namespace}.bast-container eight-tenths{ left: 80%; @include silent-relative(); }.bast-container #{$class-type}.bast-container push--#{$namespace}.bast-container nine-tenths{ left: 90%; @include silent-relative(); }.bast-container /* Twelfths */
  #{$class-type}.bast-container push--#{$namespace}.bast-container one-twelfth{ left: 8.333%; @include silent-relative(); }.bast-container #{$class-type}.bast-container push--#{$namespace}.bast-container two-twelfths{ left: 16.666%; @include silent-relative();  }.bast-container #{$class-type}.bast-container push--#{$namespace}.bast-container three-twelfths{ left: 25%; @include silent-relative(); }.bast-container #{$class-type}.bast-container push--#{$namespace}.bast-container four-twelfths{ left: 33.333%; @include silent-relative(); }.bast-container #{$class-type}.bast-container push--#{$namespace}.bast-container five-twelfths{ left: 41.666%; @include silent-relative(); }.bast-container #{$class-type}.bast-container push--#{$namespace}.bast-container six-twelfths{ left: 50%; @include silent-relative(); }.bast-container #{$class-type}.bast-container push--#{$namespace}.bast-container seven-twelfths{ left: 58.333%; @include silent-relative(); }.bast-container #{$class-type}.bast-container push--#{$namespace}.bast-container eight-twelfths{ left: 66.666%; @include silent-relative(); }.bast-container #{$class-type}.bast-container push--#{$namespace}.bast-container nine-twelfths{ left: 75%; @include silent-relative(); }.bast-container #{$class-type}.bast-container push--#{$namespace}.bast-container ten-twelfths{ left: 83.333%; @include silent-relative(); }.bast-container #{$class-type}.bast-container push--#{$namespace}.bast-container eleven-twelfths{ left: 91.666%; @include silent-relative(); }
}.bast-container [class*="push--"]{ position:relative; }


      }
    }
  }
}.bast-container /*============================================================================
  PULL
    - Pull classes, .bast-container to move grid items back to the left by certain amounts
==============================================================================*/
  /* Whole */
  #{$class-type}.bast-container pull--#{$namespace}.bast-container one-whole{ right: 100%; @include silent-relative(); }.bast-container /* Halves */
  #{$class-type}.bast-container pull--#{$namespace}.bast-container one-half{ right: 50%; @include silent-relative(); }.bast-container /* Thirds */
  #{$class-type}.bast-container pull--#{$namespace}.bast-container one-third{ right: 33.333%; @include silent-relative(); }.bast-container #{$class-type}.bast-container pull--#{$namespace}.bast-container two-thirds{ right: 66.666%; @include silent-relative(); }.bast-container /* Quarters */
  #{$class-type}.bast-container pull--#{$namespace}.bast-container one-quarter{ right: 25%; @include silent-relative(); }.bast-container #{$class-type}.bast-container pull--#{$namespace}.bast-container two-quarters{ right: 50%; @include silent-relative(); }.bast-container #{$class-type}.bast-container pull--#{$namespace}.bast-container three-quarters{ right: 75%; @include silent-relative(); }.bast-container /* Fifths */
  #{$class-type}.bast-container pull--#{$namespace}.bast-container one-fifth{ right: 20%; @include silent-relative(); }.bast-container #{$class-type}.bast-container pull--#{$namespace}.bast-container two-fifths{ right: 40%; @include silent-relative(); }.bast-container #{$class-type}.bast-container pull--#{$namespace}.bast-container three-fifths{ right: 60%; @include silent-relative(); }.bast-container #{$class-type}.bast-container pull--#{$namespace}.bast-container four-fifths{ right: 80%; @include silent-relative(); }.bast-container /* Sixths */
  #{$class-type}.bast-container pull--#{$namespace}.bast-container one-sixth{ right: 16.666%; @include silent-relative(); }.bast-container #{$class-type}.bast-container pull--#{$namespace}.bast-container two-sixths{ right: 33.333%; @include silent-relative(); }.bast-container #{$class-type}.bast-container pull--#{$namespace}.bast-container three-sixths{ right: 50%; @include silent-relative(); }.bast-container #{$class-type}.bast-container pull--#{$namespace}.bast-container four-sixths{ right: 66.666%; @include silent-relative(); }.bast-container #{$class-type}.bast-container pull--#{$namespace}.bast-container five-sixths{ right: 83.333%; @include silent-relative(); }.bast-container /* Eighths */
  #{$class-type}.bast-container pull--#{$namespace}.bast-container one-eighth{ right: 12.5%; @include silent-relative(); }.bast-container #{$class-type}.bast-container pull--#{$namespace}.bast-container two-eighths{ right: 25%; @include silent-relative(); }.bast-container #{$class-type}.bast-container pull--#{$namespace}.bast-container three-eighths{ right: 37.5%; @include silent-relative(); }.bast-container #{$class-type}.bast-container pull--#{$namespace}.bast-container four-eighths{ right: 50%; @include silent-relative(); }.bast-container #{$class-type}.bast-container pull--#{$namespace}.bast-container five-eighths{ right: 62.5%; @include silent-relative(); }.bast-container #{$class-type}.bast-container pull--#{$namespace}.bast-container six-eighths{ right: 75%; @include silent-relative(); }.bast-container #{$class-type}.bast-container pull--#{$namespace}.bast-container seven-eighths{ right: 87.5%; @include silent-relative(); }.bast-container /* Tenths */
  #{$class-type}.bast-container pull--#{$namespace}.bast-container one-tenth{ right: 10%; @include silent-relative(); }.bast-container #{$class-type}.bast-container pull--#{$namespace}.bast-container two-tenths{ right: 20%; @include silent-relative(); }.bast-container #{$class-type}.bast-container pull--#{$namespace}.bast-container three-tenths{ right: 30%; @include silent-relative(); }.bast-container #{$class-type}.bast-container pull--#{$namespace}.bast-container four-tenths{ right: 40%; @include silent-relative(); }.bast-container #{$class-type}.bast-container pull--#{$namespace}.bast-container five-tenths{ right: 50%; @include silent-relative(); }.bast-container #{$class-type}.bast-container pull--#{$namespace}.bast-container six-tenths{ right: 60%; @include silent-relative(); }.bast-container #{$class-type}.bast-container pull--#{$namespace}.bast-container seven-tenths{ right: 70%; @include silent-relative(); }.bast-container #{$class-type}.bast-container pull--#{$namespace}.bast-container eight-tenths{ right: 80%; @include silent-relative(); }.bast-container #{$class-type}.bast-container pull--#{$namespace}.bast-container nine-tenths{ right: 90%; @include silent-relative(); }.bast-container /* Twelfths */
  #{$class-type}.bast-container pull--#{$namespace}.bast-container one-twelfth{ right: 8.333%; @include silent-relative(); }.bast-container #{$class-type}.bast-container pull--#{$namespace}.bast-container two-twelfths{ right: 16.666%; @include silent-relative(); }.bast-container #{$class-type}.bast-container pull--#{$namespace}.bast-container three-twelfths{ right: 25%; @include silent-relative(); }.bast-container #{$class-type}.bast-container pull--#{$namespace}.bast-container four-twelfths{ right: 33.333%; @include silent-relative(); }.bast-container #{$class-type}.bast-container pull--#{$namespace}.bast-container five-twelfths{ right: 41.666%; @include silent-relative(); }.bast-container #{$class-type}.bast-container pull--#{$namespace}.bast-container six-twelfths{ right: 50%; @include silent-relative(); }.bast-container #{$class-type}.bast-container pull--#{$namespace}.bast-container seven-twelfths{ right: 58.333%; @include silent-relative(); }.bast-container #{$class-type}.bast-container pull--#{$namespace}.bast-container eight-twelfths{ right: 66.666%; @include silent-relative(); }.bast-container #{$class-type}.bast-container pull--#{$namespace}.bast-container nine-twelfths{ right: 75%; @include silent-relative(); }.bast-container #{$class-type}.bast-container pull--#{$namespace}.bast-container ten-twelfths{ right: 83.333%; @include silent-relative(); }.bast-container #{$class-type}.bast-container pull--#{$namespace}.bast-container eleven-twelfths{ right: 91.666%; @include silent-relative(); }
}.bast-container [class*="pull--"]{ position:relative; }


      }
    }
  }
}.bast-container /*============================================================================
  #Basic Styles
==============================================================================*/

[tabindex='-1']:focus{
  outline: none;
}.bast-container .main-container{
  padding-bottom: 7.143vw;
}.bast-container .wrapper-container{
  box-sizing:content-box;
  max-width: $siteWidth;

    max-width: $siteWidthLarge;
  }

    max-width: $siteWidthMedium;
  } 
  margin: 0 auto;
  padding: 0 ($gutter / 2);
    padding: 0 $gutter;
  }
}.bast-container .main-content{
  display: block;
  margin-bottom:30px;
}.bast-container .full-height{
  height: 100vh;
}.bast-container /*============================================================================
  #Helper Classes
==============================================================================*/
.is-transitioning{
  display: block !important;
  visibility: visible !important;
}.bast-container .display-table{
  display: table!important;
  table-layout: fixed;
  width: 100%;
}.bast-container .display-table-cell{
  display: table-cell;
  vertical-align: middle;
  float: none;
}.bast-container .large--display-table{
    display: table;
    table-layout: fixed;
    width: 100%;
  }.bast-container .large--display-table-cell{
    display: table-cell;
    vertical-align: middle;
    float: none;
  }
}.bast-container .visually-hidden{
  position: absolute;
  overflow: hidden;
  clip: rect(0 0 0 0);
  height: 1px; width: 1px;
  margin: -1px; padding: 0; border: 0;
}.bast-container /*================================
  Reset Password Template
==================================*/
.reset_password-form{.bast-container max-width:480px;
  margin: 30px auto;
  padding: 0 15px;
  h1{
    color: #a32136;
    margin-bottom:0px;
    text-align:center;
  }.bast-container .reset_password_wrapper{
    margin-bottom:30px;
  }.bast-container lable{
    width:30%;
    display:inline-block;
    padding-right:5px;
  }.bast-container input{
    width:70%;
    display:inline-block;
    padding:5px;
    margin-bottom:10px;
      width:100%;
    }
  }.bast-container input[type='submit']{
    max-width:150px;
    margin:auto;
    color:#000;
  }
}.bast-container /* --------- Page template design-products ---------*/
li.no-bullets{
  list-style:none;
}.bast-container .design_products-content{.bast-container position:relative;
  ul.select-product-lists{.bast-container padding:0px;
    width:50%;
    display:inline-block;
    float:left;
    li.design-product_title{.bast-container background-color: #eee;
      border: dotted 1px #ccc;
      padding:10px 15px;
      cursor:pointer;
      line-height:1.26;
      display:block;
      &.active{
        background: #777;
        color:#fff;
      }
    }
  }.bast-container .select-product-forms{
    width:50%;
    display:inline-block;
  }.bast-container .select-product_options{.bast-container margin-bottom:30px;
      display:none;
      border:1px dotted #ccc;
      padding:5px;
      &.active{
        display:inline-block;
      }.bast-container .option_swatch{.bast-container width:45px;
        height:45px;
        margin-right:5px;
        margin-bottom:5px;
        cursor:pointer;
        float:left;       
        &.active{
          border:2px solid #666;
          box-shadow: 0 0 1px #000;
        }.bast-container &:hover{
          box-shadow:0 0 1px #000;
        };
      }.bast-container .product-add-alert{.bast-container line-height:18px; 
        padding: 5px; 
        background-color: #dedede;
        display:none;
        a{
          color: #c30404;
        }.bast-container &.active{
          display:block;
        }
      }
    }.bast-container .selector-wrapper{.bast-container label{
      display:none;
    }.bast-container .single-option-selector{
      display:none;
    } 
  }   
}.bast-container .product-image_wrapper{.bast-container position:relative;
  .select-product_image{
    position: absolute;
    top:0;
    left: 0;
    width:100%;
  }
}.bast-container .cart-login_btn, .bast-container .product-submit{.bast-container width:100%;
  border-radius: 0px;
  background:#777;
  color:#fff;
  font-size:14px;
  &:hover{
    color:#fff;
    box-shadow:0 0 1px #999;
  };
}.bast-container .login_title{.bast-container color:#C30404;
  a{
    color:#777;
  }
  line-height:1.2;
}.bast-container .cart-login_form{.bast-container display:none;
  height:100vh;
  width:100%;
  position:fixed;
  top:0;
  left:0;
  background-color:rgba(95, .bast-container 95, .bast-container 95, .bast-container 0.5);
  .cart_login-wrapper{.bast-container position:absolute;
    left:50%;
    top:50%;
    transform: translate(-50%, .bast-container -50%);
    .cart-login_content{.bast-container width:300px;
      height:150px;
      border:solid 4px #E0E85D;
      border-radius: 6px;
      background-color: #fff;
      text-align:left;
      padding:10px;
      position:relative;      
      h1{
        font-size:24px;
        text-transform: initial;
        color:#222;
        text-align:left;
      }.bast-container .login_form-close{
          display: inline-block;
          width: 28px;
          height: 28px;
          position: absolute;
          top: -12px;
          right: -12px;
          text-align: center;
          line-height: 24px;
          color: #fff;
          background: #000;
          border-radius: 50%;
          border: 2px solid #fff;
          cursor:pointer;
        }
      }
    }
}.bast-container /* ---------- Design product option swatch ---------------*/
.swatch_wrapper{.bast-container display:flex;
  flex-wrap: wrap;
  .swatch{.bast-container flex: 1 1 100%;
    max-width:100%;
    &.color_swatch{
      order:2;
    }.bast-container .swatch-element{.bast-container margin:0px;
      label{
        background-size:100%;
        box-shadow:none;
        border-radius: 0px;
      }
    }.bast-container input:checked + label.option_swatch{
      box-shadow: none;
      border:none;
    }
  }  
}.bast-container /*------------------- Homepage's css -------------------*/
.bx-wrapper{
  margin-top:0px;
}.bast-container .slider-holder{.bast-container position:relative;
  button.slick-arrow{
    display:none !important;
  }.bast-container .banner-slide_nav{.bast-container cursor: pointer;
    position:absolute;
    top:50%;
    width:30px;
    height:30px;
    line-height:30px;
    background:rgba(255, .bast-container 255, .bast-container 255, .bast-container 0.7);
    color:#777;
    transform: translateY(-50%);
    z-index:999;
    opacity: 0;
    text-align:center;
    &.nav-prev{
      left:0;
    }.bast-container &.nav-next{
      right:0;
    }
  }.bast-container &:hover{.bast-container .banner-slide_nav{
      opacity: 1;
    }    
  };
}.bast-container /* Register cutomer template */
#customer-fields{.bast-container .customer_level-selector{
    margin-bottom:15px;
  }.bast-container .level-group{.bast-container label{
      display:inline-block;
      padding-left:10px;
    }
  }.bast-container .customr-field{.bast-container margin-bottom:15px;
    label.customr-control-label{
      width:15%;
      text-align:right;
      display:inline-block;
      float:left;
      height:40px;
      line-height:40px;
      margin:0px;
      padding-right:15px;
        width:100%;
        display:block;
        text-align:left;
      }
    }.bast-container &.customr-required{.bast-container label.customr-control-label:before{
        content: '* ';
        color: #F00;
        font-weight: bold;
      }
    }.bast-container label.required:before{
        content: '* ';
        color: #F00;
        font-weight: bold;
    }.bast-container input, .bast-container select{
      height:40px;
      line-height: 40px;
      padding-left:10px;
      width:85% !important;
      display:inline-block;
      font-size:12px;
        width:100% !important;
        display:block;
      }
    }.bast-container input[type='radio']{
      width:initial;
      height:initial;
    }.bast-container .field-header{.bast-container width:100%;
      border-bottom:1px dotted;
      label.customr-control-label{
        font-size: 18px;
        padding: 7px 0px;
        width:100%;
        float:initial;
        text-align:left;
        color:#333;
      }
    }
  }.bast-container .customer_info-item{.bast-container label{
      width:15%;
      display:inline-block;
      text-align:right;
      padding-right:15px;
    }
  }.bast-container .form-footer{.bast-container .cancel-form{
      display:none;
    }
  }.bast-container label[for="group-selector"], .bast-container label[for="professional-level_selector"], .bast-container label[for="retail-selector"]{
    font-size:15px;
    padding-bottom:5px;
  }.bast-container #group-selector, .bast-container #professional-level_selector{
      height:40px;
      line-height: 40px;
      padding-left:10px;
      width:100% !important;
      display:inline-block;
      font-size:12px;
      margin-bottom:15px;
  }.bast-container #retail-selector{.bast-container label{
      display:inline-block;
      padding-left:5px;
    }
  }
}.bast-container /*============== Featured Products ===============*/
.featured-products{.bast-container .section_title{
    font-size:24px;
  }.bast-container .product-thumb{.bast-container .caption{.bast-container .product-title{.bast-container padding: 5px 0px;
        .product-price{
          display:inline-block;
          float:right;
          line-height:1.2;
          margin-bottom:0px;
        }
      }.bast-container .product-vendor{
        line-height:1.2;
        margin-bottom: 10px;
      }.bast-container .shopnow-btn{
        width:100%;
        border-radius:0px;
      }
    }
  }
}.bast-container /*===============image thumbnail ================*/
.product-views{.bast-container position: relative;
  .slide-nav{.bast-container position: absolute;
    top:50%;
    cursor:pointer;
    &.nav-prev{
      left:0px;
    }.bast-container &.nav-next{
      right:0px;
    }
  }.bast-container .thumbnails{.bast-container overflow:initial;
    align-items:center;
    padding:0 15px;
    li.image-additional{
      max-width:auto;
    }
  }
}.bast-container /*========Homepage mobile banner ===========*/
#mobile-banner{.bast-container display:none;
  width:100%;
  .mobile-banner_image{.bast-container img{
      width:100%;
    }
  }
    display:block;
  }
}.bast-container #socTab{
    display:none;
  }
}.bast-container /*Mobile Header*/
#mobilemenu{.bast-container display:none;
  #mobile_logo{.bast-container max-width: 100px;
    img{
      transition: all 0.8s;
      width: 100%;
    }
  }.bast-container background-color:#fff;
  justify-content: center;
  align-items: center;
  flex-wrap:wrap;
  padding: 15px;
  width: 100%;
  z-index: 999;
  position:fixed;
  &.sticky{.bast-container position:fixed;
    top:0;
    left:0;
    width:100%;
    z-index:999;
    margin-left:0px;
    #mobile_logo{.bast-container img{
        transition: all 0.8s;
        max-width:100px;
      }
    }
  }
    display:flex;
  }
}.bast-container // mobile sidebar
#my-navigation{.bast-container .submenu-holder{.bast-container height: auto;
    overflow: initial;
    position: initial;
    .submenu{.bast-container position:initial;
      width: 100%;
      li{
        display:block; 
        width: 100%;
        margin: 0px; 
        clear:both;
        
      }
    }
  }
}.bast-container .reset-success-text{
    border: 1px dotted;
    padding: 5px;
    background: rgba(63, 130, 46, 0.3);
    color: green;
}.bast-container #cart_added-popup{.bast-container #cart_popup-title{
    font-size: 24px;
    color: #000;
    margin-bottom: 15px;
  }.bast-container .item-content{
    margin-bottom:20px;
  }.bast-container .cart-item_content{.bast-container .line_item-title{
      margin:5px 0px;
    }.bast-container p{
      margin:0px;
      line-height:1.3;
    }
  }.bast-container .cart-popup-btn{
    background-color:#a32136;
    text-align:center;
    max-width:160px;
    width:100%;
    display:block;
    margin-bottom:10px;
    text-decoration: none;
  }.bast-container .cart-total_content{
    margin:5px;
    line-height:1.2;
  }
}.bast-container .product_image{.bast-container img{
    width:100%;
  }
}.bast-container #landing_nav{.bast-container .landing-link{.bast-container .title-link{
      text-align:center;
    }
  }
}.bast-container //Newsletter SignUp Form
#mc_embed_signup{.bast-container max-width:640px;
  margin:0 auto;
  padding:0 15px 15px 15px;
  h3{
    color: #fff;
  }.bast-container .mc-field-group{.bast-container position:relative;
    width:100%;
    margin-right:0px;
    #mce-EMAIL{
      outline:none;
      width: 100%;
      height:40px;
      line-height:40px;
      font-size:14px;
      color: #333;
      width:100%;
      padding:0 5px;
    }.bast-container #mc-embedded-subscribe{
      background-color:#e74c3c;
      color:#fff;
      position: absolute;
      top:0;
      border-radius:0px;
      border:0px;
      padding:0 10px;
      right:0px;
      max-width:100px;
      height:40px;
      line-height:40px;
      text-align:center;
      margin-right:0px;
    }
  }.bast-container h3{
      font-size:16px;
      margin-right:15px;
    }
  }
}.bast-container #awarp-product-related{
  margin-bottom:30px;
}.bast-container /* New Product Template product.with-collection.liquid  */
.sub-collection{.bast-container .sub_product-form{.bast-container padding:15px;
    border:1px dotted #777;
    margin-bottom:15px;
    .sub-product_detail{.bast-container display:flex;
      flex-wrap:wrap;
      justify-content: space-between;
      h3.sub-product_title{
        color:#666;
        margin-top:0px;
      }.bast-container .sub-product_price{
        color: #C30404;
        font-size:20px;
      }
    }.bast-container .sub-product_thumbs{.bast-container .sub_product-image-thumb{.bast-container display:inline-block; 
        margin-right:5px;
        margin-bottom:10px;
        &.active{
          border:1px solid #999;
        }
      }
    }.bast-container .single-option-selector{
      width: 100%;
      height: 30px;
      line-height: 30px;
    }.bast-container .sub_product-add{
      margin-top:15px;
    }
  }
}.bast-container /* Collection template */
.collection-pagination{.bast-container a{.bast-container padding:0 3px;
    &.jp-current{
      color: #FF4242;
      font-weight: bold;
    }
  }
}.bast-container /*===========================================
  Collections list template
=============================================*/
div[data-section-type="collection-listing"]{.bast-container .product-layout{.bast-container .product-thumb{.bast-container img.img-responsive{
        min-height:150px;
        width:auto;
      }
    }.bast-container .col-lg-3:nth-child(4n+1){
        clear:both;
      }
    }.bast-container .col-sm-6:nth-child(2n+1){
        clear:both;
      };
    }
  }
}.bast-container /*====================================================
   New Product Template
======================================================*/
.options .selector-wrapper{
    margin-top: 15px;
}.bast-container .options .selector-wrapper:first-child{
    margin-top: 0;
}.bast-container .options .selector-wrapper label{
    display: block;
    margin-bottom: 5px;
}.bast-container .options .selector-wrapper select{
    display: block;
    padding: 6px 12px;
    width: 100%;
    height: 34px;
    background-color: #fff;
    background-image: none;
    border-color: #7F8184;
    font-size: 12px;
    color: #555;
    line-height: 1.42857143;
}.bast-container #original-price{
    margin-top: 15px;
}.bast-container #original-price #thisIsOriginal{
    display: inline-block;
}.bast-container .div_row{
  padding:0px;
  margin: 0 auto;
  display: inline-block;
}.bast-container .div_related{
  padding:0px;
}.bast-container .div_thumbs{
  margin: 0 auto;
  width:125px;      
}.bast-container .alert-success{
  background-color:#dbdbdb;
  color:#606060;
  font-weight: normal;
  text-align: center;
  text-align: center;
  margin-bottom:30px;
}.bast-container .alert{
      margin-top: 15px;
      margin-bottom: 0;
  }.bast-container .close{
      color:white;
      opacity:0.6;
  }.bast-container .alert a{
      color:#3c763d;/*white*/
      font-weight: bold;
  }.bast-container .close:hover{
      color:white;
      opacity:0.87;
  }
  @media only screen and (max-width: 478px) {.bast-container .div_related{
          width:100%;
          padding-left:0px;
      }.bast-container .h4_class{
      }.bast-container .div_thumbs{
          width:100%;
          text-align:center;
          padding-left:17px;
      }.bast-container .product-thumb .image img{
          zoom: 1.3;
      }
  }.bast-container /*---------- New Product template - product.bundle ----------*/
div.bundle-products{.bast-container padding: 15px;
  border: 1px solid;
  .bundle-products-header{
    text-align:center;
    margin: 0 0 15px 0px;
    width:100%;
  }.bast-container #bundle-select_form{.bast-container lable[for="bundle-selector"]{
      display:block;
      font-size: 14px;
    }.bast-container #bundle-selector{
      width:100%;
      height:30px;
    }
  }.bast-container .bundle-products-container{
    /*display:none;*/
  }.bast-container .bundle-product-form_container{.bast-container display:none;
    .bundle-product-form{.bast-container .selector-wrapper{.bast-container label{
          width:100%;
        }.bast-container .single-option-selector{
          width:100%;
          height:30px;
        }
      }
    }.bast-container &.active{
      display:block;
    }
  }.bast-container #add-bundle-to-cart{.bast-container margin-top:30px;
    width:100%;
    height:30px;
    background-color: #7f8184;
    color:#fff;
    border:none;
    &:hover{
      box-shadow: 0 0 1px #999;
    };
  }
}.bast-container //Styles for check-gift-card-balance template. 
#gw-check-balance{.bast-container padding: 30px 15px; 
  .product-form{.bast-container // text-align:center;
    .product-form__item{.bast-container margin-bottom:10px;
      display:inline-block;
      text-align:center;
      #gw-input-name{
        display:none;
      }.bast-container #gw-code-input{
        height:35px; 
        padding:0 10px;
        width: 250px;
        border: 1px solid; 
      }.bast-container #gw-check-balance-button{
        border-radius: 0px; 
        height: 35px; 
        min-width:100px; 
        padding: 0 25px; 
        line-height:35px; 
        font-size: 14px;         
      }
    }
  }
}.bast-container // Styles for gift-card collection template 20/11/2018 create by Wang. (no pushed to production)
.collection-banner.collection-gift-card{.bast-container img{
    width: 100%; 
  }
}.bast-container // Styles for Stamped Review widget
#stamped-reviews-widget[data-widget-type="carousel"] .stamped-carousel-scroll .stamped-reviews-image{display: none !important;}.bast-container #stamped-reviews-widget[data-widget-type="carousel"] .stamped-carousel-scroll .stamped-reviews-message, .bast-container #stamped-reviews-widget[data-widget-type="carousel"] .stamped-carousel-scroll .stamped-reviews-author{margin-left: 0 !Important;}

@media only screen and (max-width:690px) {.bast-container div#stamped-reviews-widget[data-widget-type="carousel"] .stamped-carousel-scroll .stamped-reviews-message, .bast-container div#stamped-reviews-widget[data-widget-type="carousel"] .stamped-carousel-scroll .stamped-reviews-author{margin-left:0 !important;}}.bast-container .collection-pagination{
	display: none !important;
}