diff --git a/css/_grid-mixins.scss.liquid b/css/_grid-mixins.scss.liquid
new file mode 100644
index 0000000..5a01821
--- /dev/null
+++ b/css/_grid-mixins.scss.liquid
@@ -0,0 +1,284 @@
+/*============================================================================
+  #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;
+
+$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;
+  }
+}
+
+/*============================================================================
+  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; }
+}
+
+/*============================================================================
+  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(); }
+}
+
+/*============================================================================
+  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(); }
+}
\ No newline at end of file
diff --git a/css/_grid.scss.liquid b/css/_grid.scss.liquid
index dfd6f08..e9cc63e 100755
--- a/css/_grid.scss.liquid
+++ b/css/_grid.scss.liquid
@@ -1,15 +1,3 @@
-/*============================================================================
-  #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 {
@@ -21,44 +9,6 @@ $pull:               false;
   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.
@@ -74,6 +24,7 @@ $class-type: unquote(".");
 }
 
 #{$class-type}grid__item {
+  box-sizing: border-box;
   float: left;
   min-height: 1px;
   padding-left: $gridGutter;
@@ -81,7 +32,6 @@ $class-type: unquote(".");
   @if $mobile-first == true {
     width: 100%;
   }
-  @include box-sizing();
 }
 
 /*============================================================================
@@ -110,107 +60,6 @@ $class-type: unquote(".");
   }
 }
 
-/*============================================================================
-  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();
@@ -228,70 +77,8 @@ $class-type: unquote(".");
 
 /*============================================================================
   PUSH
-    - Push classes, to move grid items over to the right by certain amounts
+    - Push classes
 ==============================================================================*/
-@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; }
@@ -311,68 +98,6 @@ $class-type: unquote(".");
   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; }
diff --git a/css/_reset.scss.liquid b/css/_reset.scss.liquid
index cc9a1c0..85a05c0 100755
--- a/css/_reset.scss.liquid
+++ b/css/_reset.scss.liquid
@@ -1,9 +1,8 @@
-/*==============================================================================
+/*============================================================================
   #Normalize
-=================================================================================*/
-
+==============================================================================*/
 *, input, :before, :after {
-  @include box-sizing();
+  box-sizing: border-box;
 }
 
 html, body {
diff --git a/css/_rest-of-styles.scss.liquid b/css/_rest-of-styles.scss.liquid
index b921a02..ea18901 100755
--- a/css/_rest-of-styles.scss.liquid
+++ b/css/_rest-of-styles.scss.liquid
@@ -33,6 +33,15 @@ body {
 /*============================================================================
   #Helper Classes
 ==============================================================================*/
+.clearfix {
+  @include clearfix();
+}
+
+.is-transitioning {
+  display: block !important;
+  visibility: visible !important;
+}
+
 .display-table {
   display: table;
   table-layout: fixed;
@@ -59,6 +68,14 @@ body {
   }
 }
 
+.visually-hidden {
+  position: absolute;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  height: 1px; width: 1px;
+  margin: -1px; padding: 0; border: 0;
+}
+
 /*============================================================================
   #Typography
 ==============================================================================*/
@@ -308,6 +325,10 @@ hr {
 .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;
@@ -315,20 +336,16 @@ hr {
     &:first-child {
       margin-top: 0;
     }
+
+    a {
+      text-decoration: none;
+    }
   }
 
   > div {
     margin-bottom: $gutter / 2;
   }
 
-  ul, ol {
-    margin-left: 35px;
-  }
-
-  ul {
-    @extend ul.disc;
-  }
-
   li {
     margin-bottom: 0.4em;
   }
@@ -344,7 +361,7 @@ hr {
 a,
 .text-link {
   color: $colorLink;
-  text-decoration: underline;
+  text-decoration: none;
   background: transparent;
 }
 
@@ -362,9 +379,11 @@ html input[disabled] {
   cursor: default;
 }
 
-.btn {
+.btn,
+.rte .btn {
   display: inline-block;
   padding: 8px 10px;
+  width: auto;
   margin: 0;
   line-height: 1.42;
   font-weight: bold;
@@ -374,7 +393,7 @@ html input[disabled] {
   white-space: nowrap;
   cursor: pointer;
   border: 1px solid transparent;
-  @include prefix('user-select', 'none');
+  @include user-select(none);
   -webkit-appearance: none;
   -moz-appearance: none;
   border-radius: $radius;
@@ -403,7 +422,7 @@ html input[disabled] {
 }
 
 .btn--secondary,
-input.btn--secondary {
+.rte .btn--secondary {
   @extend .btn;
   background-color: $colorBtnSecondary;
 
@@ -446,24 +465,31 @@ input.btn--secondary {
   #Lists
 ==============================================================================*/
 ul, ol {
-  margin: 0 0 $gutter;
+  margin: 0 0 ($gutter / 2) 20px;
   padding: 0;
 }
 
-ul { list-style: none outside; }
 ol { list-style: decimal; }
 ul ul, ul ol,
 ol ol, ol ul { margin: 4px 0 5px 20px; }
 li { margin-bottom: 0.25em; }
 
-ol, ul.square, ul.disc { margin-left: 20px; }
 ul.square { list-style: square outside; }
 ul.disc { list-style: disc outside; }
 ol.alpha { list-style: lower-alpha outside; }
 
-.inline-list li {
-  display: inline-block;
-  margin-bottom: 0;
+.no-bullets {
+  list-style: none outside;
+  margin-left: 0;
+}
+
+.inline-list {
+  margin-left: 0;
+
+  li {
+    display: inline-block;
+    margin-bottom: 0;
+  }
 }
 
 /*============================================================================
@@ -496,6 +522,77 @@ th, td {
   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
@@ -535,9 +632,8 @@ svg:not(:root) {
   overflow: hidden;
 }
 
-img.auto,
-.grid__item img,
-.grid__item iframe {
+img,
+iframe {
   max-width: 100%;
 }
 
@@ -563,48 +659,53 @@ img.auto,
   #Forms
 ==============================================================================*/
 form {
-  margin-bottom: $gutter;
+  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 {
-  font-size: 1em;
+  padding: 0;
+  margin: 0;
+  @include user-select(text);
+}
+
+button {
+  background: none;
+  border: none;
+  cursor: pointer;
 }
 
 button,
-input[type="text"],
-input[type="search"],
-input[type="password"],
-input[type="email"],
-input[type="file"],
-input[type="number"],
-input[type="tel"],
-input[type="submit"],
-input[type="url"],
+input,
 textarea {
   -webkit-appearance: none;
   -moz-appearance: none;
 }
 
-input,
-textarea,
-select,
-fieldset {
-  border-radius: $radius;
-  max-width: 100%;
-
-  &.input-full {
-    width: 100%;
-  }
+button {
+  background: none;
+  border: none;
+  display: inline-block;
+  cursor: pointer;
 }
 
-input,
-select,
-textarea {
-  padding: 8px 10px;
-  line-height: 1.42;
+input[type="image"] {
+  padding-left: 0;
+  padding-right: 0;
 }
 
 fieldset {
@@ -617,40 +718,18 @@ legend {
   padding: 0;
 }
 
-optgroup {
-  font-weight: bold;
-}
-
-input {
-  display: inline-block;
-  width: auto;
-}
-
 button,
 input[type="submit"] {
   cursor: pointer;
 }
 
-input[type="submit"] {
-  @extend .btn;
-}
-
-/*================ Input width and border ================*/
-input[type="text"],
-input[type="search"],
-input[type="password"],
-input[type="email"],
-input[type="file"],
-input[type="number"],
-input[type="tel"],
-input[type="url"],
+input,
 textarea,
 select {
   border: 1px solid $colorBorder;
-  width: 100%;
   max-width: 100%;
-  display: block;
-  margin: 0 0 1em;
+  padding: 8px 10px;
+  border-radius: $radius;
 
   &:focus {
     border: 1px solid darken($colorBorder, 10%);
@@ -662,17 +741,38 @@ select {
     background-color: $disabledGrey;
     border-color: $disabledBorder;
   }
+
+  &.input-full {
+    width: 100%;
+  }
 }
 
 textarea {
   min-height: 100px;
 }
 
+/*================ Input element overrides ================*/
 input[type="checkbox"],
 input[type="radio"] {
   display: inline;
-  margin: 0;
+  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 {
@@ -699,6 +799,10 @@ select {
   }
 }
 
+optgroup {
+  font-weight: bold;
+}
+
 // Force option color (affects IE only)
 option {
   color: #000;
@@ -710,78 +814,48 @@ select::-ms-expand {
 }
 
 /*================ Form labels ================*/
-label,
-legend {
-  display: block;
-  margin-bottom: 2px;
-  font-weight: bold;
-
-  &.inline {
-    display: inline;
-  }
-
-  .form-horizontal &.label--hidden,
-  &.label--hidden {
-    height: 0;
-    width: 0;
-    margin-bottom: 0;
-    overflow: hidden;
+.hidden-label {
+  position: absolute;
+  height: 0;
+  width: 0;
+  margin-bottom: 0;
+  overflow: hidden;
+  clip: rect(1px, 1px, 1px, 1px);
 
-    .ie9 &,
-    .lt-ie9 & {
-      height: auto;
-      width: auto;
-      margin-bottom: 2px;
-      overflow: visible;
-    }
+  // No placeholders, so force show labels
+  .ie9 &,
+  .lt-ie9 & {
+    position: static;
+    height: auto;
+    width: auto;
+    margin-bottom: 2px;
+    overflow: visible;
+    clip: initial;
   }
 }
 
-/*================ We don't want the same label treatment for checkboxes/radios ================*/
-input[type="checkbox"] + label,
-input[type="radio"] + label {
-  font-weight: normal;
-}
-
 label[for] {
   cursor: pointer;
 }
 
-.label-hint {
-  color: #999;
-}
-
 /*================ Horizontal Form ================*/
-form.form-horizontal,
-.form-horizontal {
-  margin-bottom: 0;
-
-  input[type="text"],
-  input[type="search"],
-  input[type="password"],
-  input[type="email"],
-  input[type="file"],
-  input[type="number"],
-  input[type="tel"],
-  input[type="url"],
-  textarea,
+.form-vertical {
+  input,
   select,
-  label {
+  textarea {
+    display: block;
+    margin-bottom: 10px;
+  }
+
+  input[type="radio"],
+  input[type="checkbox"] {
     display: inline-block;
-    margin-bottom: 0;
-    width: auto;
   }
 }
 
 /*================ Error styles ================*/
-input[type="text"],
-input[type="search"],
-input[type="password"],
-input[type="email"],
-input[type="file"],
-input[type="number"],
-input[type="tel"],
-input[type="url"],
+input,
+select,
 textarea {
   &.error {
     border-color: $errorRed;
@@ -839,7 +913,6 @@ label.error {
 
 .input-group .input-group-field {
   width: 100%;
-  margin-bottom: 0;
 }
 
 .input-group-btn {
@@ -865,11 +938,7 @@ label.error {
   remaining accessible to screen readers (h5bp.com)
 ==============================================================================*/
 .supports-fontface .icon-fallback-text .fallback-text {
-  clip: rect(0 0 0 0);
-  overflow: hidden;
-  position: absolute;
-  height: 1px;
-  width: 1px;
+  @extend .visually-hidden;
 }
 
 .icon:before {
@@ -892,19 +961,19 @@ label.error {
 
 /*================ Icon mapping ================*/
 .icon-american_express:before { content: "\41"; }
-.icon-arrow-down:before { content: "\34"; }
+.icon-arrow-down:before { content: "\e607"; }
 .icon-bitcoin:before { content: "\42"; }
-.icon-cart:before { content: "\5b"; }
+.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-dankort:before { content: "\64"; }
 .icon-facebook:before { content: "\66"; }
 .icon-fancy:before { content: "\46"; }
 .icon-google:before { content: "\67"; }
 .icon-google_wallet:before { content: "\47"; }
 .icon-grid-view:before { content: "\e603"; }
-.icon-hamburger:before { content: "\e600"; }
+.icon-hamburger:before { content: "\e601"; }
 .icon-instagram:before { content: "\69"; }
 .icon-interac:before { content: "\49"; }
 .icon-jcb:before { content: "\4a"; }
@@ -922,11 +991,11 @@ label.error {
 .icon-twitter:before { content: "\54"; }
 .icon-vimeo:before { content: "\76"; }
 .icon-visa:before { content: "\56"; }
-.icon-x:before { content: "\78"; }
+.icon-x:before { content: "\e606"; }
 .icon-youtube:before { content: "\79"; }
 
 .payment-icons {
-  @include prefix('user-select', 'none');
+  @include user-select(none);
   cursor: default;
 
   li {
@@ -972,139 +1041,49 @@ label.error {
 ==============================================================================*/
 .pagination {
   margin-bottom: 1em;
-}
-
-/*================ Custom Pagination ================*/
-.pagination-custom {
-  display: inline-block;
-  padding-left: 0;
-  margin: 0 0 $gutter;
-  border-radius: $radius;
-}
-
-.pagination-custom > li {
-  display: inline;
-}
-
-.pagination-custom > li > a,
-.pagination-custom > li > span {
-  position: relative;
-  float: left;
-  padding: 5px 10px;
-  margin-left: -1px;
-  line-height: 1.42;
-  text-decoration: none;
-  border: 1px solid $colorBorder;
-}
-
-.pagination-custom > li:first-child > a,
-.pagination-custom > li:first-child > span {
-  margin-left: 0;
-  border-bottom-left-radius: 4px;
-  border-top-left-radius: 4px;
-}
-
-.pagination-custom > li:last-child > a,
-.pagination-custom > li:last-child > span {
-  border-top-right-radius: 4px;
-  border-bottom-right-radius: 4px;
-}
-
-.pagination-custom > li > a:hover,
-.pagination-custom > li > span:hover,
-.pagination-custom > li > a:focus,
-.pagination-custom > li > span:focus {
-  // hover color
-}
-
-.pagination-custom > .active > a,
-.pagination-custom > .active > span,
-.pagination-custom > .active > a:hover,
-.pagination-custom > .active > span:hover,
-.pagination-custom > .active > a:focus,
-.pagination-custom > .active > span:focus {
-  z-index: 2;
-  cursor: default;
-  color: $colorTextBody;
-}
-
-.pagination-custom > .disabled > span,
-.pagination-custom > .disabled > a,
-.pagination-custom > .disabled > a:hover,
-.pagination-custom > .disabled > a:focus {
-  color: #999999;
-  cursor: not-allowed;
-}
-
-.pagination-custom-lg > li > a,
-.pagination-custom-lg > li > span {
-  padding: 10px 16px;
-  font-size: em(18px);
-}
-
-.pagination-custom-lg > li:first-child > a,
-.pagination-custom-lg > li:first-child > span {
-  border-bottom-left-radius: 6px;
-  border-top-left-radius: 6px;
-}
-
-.pagination-custom-lg > li:last-child > a,
-.pagination-custom-lg > li:last-child > span {
-  border-top-right-radius: 6px;
-  border-bottom-right-radius: 6px;
-}
+  text-align: center;
 
-.pagination-custom-sm > li > a,
-.pagination-custom-sm > li > span {
-  padding: 5px 10px;
-  font-size: em(12px);
-}
+  > span {
+    display: inline-block;
+    line-height: 1;
+  }
 
-.pagination-custom-sm > li:first-child > a,
-.pagination-custom-sm > li:first-child > span {
-  border-bottom-left-radius: 3px;
-  border-top-left-radius: 3px;
-}
+  a {
+    display: block;
+  }
 
-.pagination-custom-sm > li:last-child > a,
-.pagination-custom-sm > li:last-child > span {
-  border-top-right-radius: 3px;
-  border-bottom-right-radius: 3px;
+  a,
+  .page.current {
+    padding: 8px;
+  }
 }
 
-
 /*============================================================================
   #Site Header
 ==============================================================================*/
 .site-header {
   padding: ($gutter / 2) 0;
 
-  @include at-query ($min, $large) {
-    padding: $gutter 0;
-  }
-
-  @include at-query ($min, $large) {
-    .grid {
-      display: table;
-      table-layout: fixed;
-      width: 100%;
+  .grid--table {
+    display: table;
+    table-layout: fixed;
+    width: 100%;
 
-      > .grid__item {
-        float: none;
-        display: table-cell;
-        vertical-align: middle;
-      }
+    > .grid__item {
+      float: none;
+      display: table-cell;
+      vertical-align: middle;
     }
   }
 }
 
 .site-header__logo {
   text-align: center;
-  margin: 0 auto ($gutter / 2);
-  max-width: {{ settings.logo_max_width }}px;
+  margin: 0 auto;
+  max-width: 100%;
 
   @include at-query ($min, $large) {
-    margin-bottom: 0;
+    text-align: left;
   }
 
   a,
@@ -1122,15 +1101,28 @@ label.error {
   }
 }
 
-.site-header__text-links {
-  margin-bottom: 0;
+.site-header__logo-link {
+  max-width: $logoMaxWidth;
+  margin: 0 auto;
+}
+
+.site-header__cart-toggle {
+  display: inline-block;
+}
+
+.site-header__search {
+  display: inline-block;
+  max-width: 400px;
+  margin-top: $gutter / 2;
+  width: 100%;
 }
 
 .search-bar {
   max-width: 100%;
 
   @include at-query ($max, $medium) {
-    margin: 0 auto;
+    margin-left: auto;
+    margin-right: auto;
   }
 }
 
@@ -1139,19 +1131,12 @@ label.error {
 ==============================================================================*/
 .nav-bar {
   background-color: $colorNav;
-
-  ul {
-    margin: 0;
-  }
-
-  li {
-    margin: 0;
-  }
 }
 
 .site-nav {
   font-size: em(16px);
   cursor: default;
+  margin: 0 0 0 (-$gutter / 2);
 
   li {
     margin: 0;
@@ -1161,15 +1146,15 @@ label.error {
   > li {
     position: relative;
     display: inline-block;
-
-    &:first-child a {
-      padding-left: 0;
-    }
   }
+}
 
-  @include at-query ($max, $medium) {
-    margin: 0 auto;
-    text-align: center;
+/*================ Home to hamburger and cart that toggle drawers ================*/
+.site-nav--mobile {
+  @extend .site-nav;
+
+  .text-right & {
+    margin: 0 (-$gutter / 2) 0 0;
   }
 }
 
@@ -1186,9 +1171,20 @@ label.error {
     color: darken($colorNavText, 15%);
   }
 
+  .icon-arrow-down {
+    position: relative;
+    top: -2px;
+    font-size: 10px;
+    padding-left: $gutter / 4;
+  }
+
   .site-nav--active > & {
     font-weight: bold;
   }
+
+  .site-nav--mobile & {
+    display: inline-block;
+  }
 }
 
 /*================ Dropdowns ================*/
@@ -1196,7 +1192,8 @@ label.error {
   display: none;
   position: absolute;
   left: 0;
-  z-index: 5;
+  margin: 0;
+  z-index: $zindexNavDropdowns;
 
   .supports-no-touch .site-nav--has-dropdown:hover &,
   .site-nav--has-dropdown.nav-hover &,
@@ -1225,20 +1222,264 @@ label.error {
     margin: 0 auto;
     text-align: center;
   }
+}
 
-  .input-group,
-  .input-group-field {
+/*============================================================================
+  #Mobile Nav
+  - List of items inside the mobile drawer
+==============================================================================*/
+.mobile-nav {
+  // Negative of .drawer left/right padding for full-width link tap area
+  margin: (-$gutter / 2) (-$gutter / 2) 0 (-$gutter / 2);
+
+  li {
+    margin-bottom: 0;
+  }
+}
+
+.mobile-nav__search {
+  padding: $gutter / 2;
+
+  .search-bar {
     margin-bottom: 0;
   }
 }
 
+.mobile-nav__item {
+  position: relative;
+  display: block;
+
+  // Background color on top level items so there is no
+  // element overlap on subnav's CSS toggle animation
+  .mobile-nav > & {
+    background-color: $colorDrawers;
+  }
+
+  &:after {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    left: $gutter / 2;
+    right: $gutter / 2;
+    border-bottom: 1px solid $colorDrawerBorder;
+  }
+
+  .mobile-nav > &:last-child:after {
+    display: none;
+  }
+}
+
+// Login/logout links can't have a class on them, so style <a> element
+.mobile-nav__item a {
+  display: block;
+}
+
+.mobile-nav__item a,
+.mobile-nav__toggle button {
+  color: $colorDrawerText;
+  padding: $gutter / 2;
+  text-decoration: none;
+
+  &:hover,
+  &:active,
+  &:focus {
+    color: darken($colorDrawerText, 15%);
+  }
+
+  &:active,
+  &:focus {
+    background-color: darken($colorDrawers, 5%);
+  }
+}
+
+.mobile-nav__item--active {
+  font-weight: bold;
+}
+
+.mobile-nav__has-sublist {
+  display: table;
+  width: 100%;
+
+  .mobile-nav__link {
+    display: table-cell;
+    vertical-align: middle;
+    width: 100%;
+  }
+}
+
+.mobile-nav__toggle {
+  display: table-cell;
+  vertical-align: middle;
+  width: 1%;
+}
+
+.mobile-nav__toggle-open {
+  .mobile-nav--expanded & {
+    display: none;
+  }
+}
+
+.mobile-nav__toggle-close {
+  display: none;
+
+  .mobile-nav--expanded & {
+    display: block;
+  }
+}
+
+.mobile-nav__sublist {
+  margin: 0;
+  max-height: 0;
+  visibility: hidden;
+  overflow: hidden;
+  transition: all 300ms cubic-bezier(0.57, 0.06, 0.05, 0.95);
+  @include backface();
+
+  .mobile-nav--expanded + & {
+    visibility: visible;
+    max-height: 700px;
+    transition: all 700ms cubic-bezier(0.57, 0.06, 0.05, 0.95);
+  }
+
+  .mobile-nav__item:after {
+    top: 0;
+    bottom: auto;
+  }
+
+  .mobile-nav__link {
+    padding-left: $gutter;
+    font-weight: normal;
+  }
+}
+
+/*============================================================================
+  #Drawers
+==============================================================================*/
+.js-drawer-open {
+  overflow: hidden;
+  height: 100%;
+}
+
+.drawer {
+  @include promote-layer();
+  display: none;
+  position: fixed;
+  overflow-y: auto;
+  overflow-x: hidden;
+  -webkit-overflow-scrolling: touch;
+  top: 0;
+  bottom: 0;
+  padding: 0 ($gutter / 2) ($gutter / 2);
+  max-width: 95%;
+  z-index: $zindexDrawer;
+  color: $colorDrawerText;
+  background-color: $colorDrawers;
+  transition: $drawerTransition;
+
+  a {
+    color: $colorDrawerText;
+
+    &:hover,
+    &:focus {
+      opacity: 0.7;
+    }
+  }
+
+  input,
+  textarea {
+    border-color: $colorDrawerBorder;
+  }
+}
+
+.drawer--left {
+  width: $drawerNavWidth;
+  left: -$drawerNavWidth;
+  border-right: 1px solid $colorDrawerBorder;
+
+  .js-drawer-open-left & {
+    display: block;
+    @include transform(translateX($drawerNavWidth));
+
+    .lt-ie9 & {
+      left: 0;
+    }
+  }
+}
+
+.drawer--right {
+  width: $drawerCartWidth;
+  right: -$drawerCartWidth;
+  border-left: 1px solid $colorDrawerBorder;
+
+  .js-drawer-open-right & {
+    display: block;
+    @include transform(translateX(-$drawerCartWidth));
+
+    .lt-ie9 & {
+      right: 0;
+    }
+  }
+}
+
+#PageContainer {
+  overflow: hidden;
+}
+
+.is-moved-by-drawer {
+  @include promote-layer();
+  transition: $drawerTransition;
+
+  .js-drawer-open-left & {
+    @include transform(translateX($drawerNavWidth));
+  }
+
+  .js-drawer-open-right & {
+    @include transform(translateX(-$drawerCartWidth));
+  }
+}
+
+.drawer__header {
+  display: table;
+  height: 70px;
+  width: 100%;
+  margin-bottom: $gutter / 2;
+  border-bottom: 1px solid $colorDrawerBorder;
+}
+
+.drawer__title,
+.drawer__close {
+  display: table-cell;
+  vertical-align: middle;
+}
+
+.drawer__title {
+  width: 100%;
+}
+
+.drawer__close {
+  width: 1%;
+  text-align: center;
+  font-size: em(18px);
+}
+
+.drawer__close button {
+  position: relative;
+  right: -20px;
+  height: 100%;
+  padding: 0 20px;
+  color: inherit;
+
+  &:active,
+  &:focus {
+    background-color: darken($colorDrawers, 5%);
+  }
+}
 
 /*============================================================================
   #Site Footer
 ==============================================================================*/
 .site-footer {
   background-color: $colorFooterBg;
-  border-top: 1px solid $colorBorder;
   padding: $gutter 0;
   color: $colorFooterText;
 
@@ -1250,14 +1491,6 @@ label.error {
 /*============================================================================
   #Product and Collection Grids
 ==============================================================================*/
-.sold-out {
-
-}
-
-.on-sale {
-
-}
-
 .grid__image {
   display: block;
   margin: 0 auto ($gutter / 2);
@@ -1284,7 +1517,7 @@ label.error {
   a,
   span {
     display: inline-block;
-    padding: ($gutter / 2) 7px ($gutter / 2) 0;
+    padding: 0 7px 0 0;
     margin-right: 7px;
 
     &:first-child {
@@ -1305,15 +1538,6 @@ label.error {
   }
 }
 
-@include at-query($min, $large) {
-  .selector-wrapper,
-  .product-single__variants {
-    select {
-      max-width: 40%;
-    }
-  }
-}
-
 .product-single__photos {
   margin-bottom: $gutter;
 }
@@ -1330,18 +1554,6 @@ label.error {
   }
 }
 
-/*============================================================================
-  #Blogs and Comments
-==============================================================================*/
-.comment {
-  margin-bottom: $gutter;
-
-  & + & {
-    border-top: 1px solid $colorBorder;
-    padding-top: $gutter;
-  }
-}
-
 
 /*============================================================================
   #Notes and Form Feedback
@@ -1428,11 +1640,22 @@ label.error {
 
   &:first-child {
     padding-top: 0;
-    border-top: 0 none;
   }
 
   .js-qty {
-    margin: 0;
+    margin: 0 auto;
+  }
+}
+
+.cart-table {
+  th {
+    font-weight: normal;
+  }
+
+  td,
+  th {
+    padding: 30px 15px;
+    border: none;
   }
 }
 
@@ -1455,6 +1678,7 @@ label.error {
 
   img {
     display: block;
+    max-width: 100%;
   }
 }
 
@@ -1477,15 +1701,141 @@ label.error {
   display: block;
 }
 
-// ==============================================================================
-// #Demo Styles - for empty store state
-// ==============================================================================
-.demo-image {
-  background: url('//cdn.shopify.com/s/files/1/0383/9765/t/1/assets/blankslate-producticon.png?4') no-repeat center center #eee;
+/*============================================================================
+  #Ajax Cart Styles (conditionally loaded)
+==============================================================================*/
+{% if settings.ajax_cart_enable %}
+
+.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;
-  padding: 100px 0;
-  color: #aaa;
-  font-size: 0.875em;
-  text-decoration: none;
-}
\ No newline at end of file
+  overflow: hidden;
+  @include user-select(none);
+
+  &:hover,
+  &:focus {
+    color: $colorPrimary;
+  }
+}
+
+.js-qty__adjust--plus {
+  right: 0;
+  border-left: 1px solid $colorBorder;
+}
+
+.js-qty__adjust--minus {
+  left: 0;
+  border-right: 1px solid $colorBorder;
+}
+
+/*================ Quantity Selectors in Ajax Cart ================*/
+.ajaxcart__qty {
+  @extend .js-qty;
+  margin: 0;
+
+  .is-loading & {
+    opacity: 0.5;
+    transition: none;
+  }
+}
+
+.ajaxcart__qty-num {
+  border-color: $colorDrawerBorder;
+  color: $colorDrawerText;
+}
+
+.ajaxcart__qty-adjust {
+  @extend .js-qty__adjust;
+  color: $colorDrawerText;
+}
+
+.ajaxcart__qty--plus {
+  @extend .js-qty__adjust--plus;
+  border-color: $colorDrawerBorder;
+}
+
+.ajaxcart__qty--minus {
+  @extend .js-qty__adjust--minus;
+  border-color: $colorDrawerBorder;
+}
+
+{% endif %} // settings.ajax_cart_enable
\ No newline at end of file
diff --git a/css/_sass-helpers.scss.liquid b/css/_sass-helpers.scss.liquid
index 2144aa1..3445e49 100755
--- a/css/_sass-helpers.scss.liquid
+++ b/css/_sass-helpers.scss.liquid
@@ -26,7 +26,7 @@ $breakpoint-has-pull:  ('medium', 'medium-down', 'large');
   #General Variables
 ==============================================================================*/
 
-// Primary Colors
+// Timber Colors
 $colorPrimary: {{ settings.color_primary }};
 $colorSecondary: {{ settings.color_secondary }};
 
@@ -62,6 +62,9 @@ $colorNavText: #333;
 $colorFooterBg: {{ settings.color_footer_bg }};
 $colorFooterText: {{ settings.color_footer_text }};
 
+// Logo max width
+$logoMaxWidth: {{ settings.logo_max_width | default: '450' | remove: 'px' }}px;
+
 // Helper colors
 $disabledGrey: #f6f6f6;
 $disabledBorder: darken($disabledGrey, 25%);
@@ -70,12 +73,24 @@ $errorRedBg: #fff6f6;
 $successGreen: #56ad6a;
 $successGreenBg: #ecfef0;
 
+// Drawers
+$drawerNavWidth: 300px;
+$drawerCartWidth: 300px;
+$colorDrawers: #f6f6f6;
+$colorDrawerBorder: darken($colorDrawers, 5%);
+$colorDrawerText: #333;
+$drawerTransition: all 0.4s cubic-bezier(0.46, 0.01, 0.32, 1);
+
 // Sizing variables
 $siteWidth: 1180px;
 $gutter: 30px;
 $gridGutter: 30px; // can be a %, but nested grids will have smaller margins because of it
 $radius: 3px;
 
+// Z-index
+$zindexNavDropdowns: 5;
+$zindexDrawer: 10;
+
 /*================ Typography ================*/
 
 $headerFontStack: 'HelveticaNeue', 'Helvetica Neue', Helvetica, Arial, sans-serif;
@@ -100,14 +115,6 @@ $socialIconFontStack: 'icons';
 /*============================================================================
   #Sass Mixins
 ==============================================================================*/
-.clearfix {
-  &:after {
-    content: '';
-    display: table;
-    clear: both; }
-  *zoom: 1;
-}
-
 @mixin clearfix() {
   &:after {
     content: '';
@@ -116,36 +123,52 @@ $socialIconFontStack: 'icons';
   *zoom: 1;
 }
 
-@mixin prefix($property, $value) {
-  -webkit-#{$property}: #{$value};
-  -moz-#{$property}: #{$value};
-  -ms-#{$property}: #{$value};
-  -o-#{$property}: #{$value};
-  #{$property}: #{$value};
-}
+/*============================================================================
+  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 transition($transition: 0.1s all) {
-  @include prefix('transition', #{$transition});
+@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 gradient($from, $to, $fallback) {
-  background: $fallback;
-  background: -moz-linear-gradient(top, $from 0%, $to 100%);
-  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,$from), color-stop(100%,$to));
-  background: -webkit-linear-gradient(top, $from 0%, $to 100%);
-  background: -o-linear-gradient(top, $from 0%, $to 100%);
-  background: -ms-linear-gradient(top, $from 0%, $to 100%);
-  background: linear-gradient(top bottom, $from 0%, $to 100%);
+@mixin transform($transform) {
+  @include prefixer(transform, $transform, ms webkit spec);
 }
 
-@mixin backface($visibility: hidden) {
-  @include prefix('backface-visibility', #{$visibility});
+@mixin user-select($value: none) {
+  @include prefixer(user-select, $value, webkit moz ms spec);
 }
 
-@mixin box-sizing($box-sizing: border-box) {
-  -webkit-box-sizing: #{$box-sizing};
-  -moz-box-sizing: #{$box-sizing};
-  box-sizing: #{$box-sizing};
+@mixin backface($visibility: hidden) {
+  @include prefixer(backface-visibility, $visibility, webkit spec);
 }
 
 @function em($target, $context: $baseFontSize) {
@@ -164,13 +187,26 @@ $socialIconFontStack: 'icons';
   }
 }
 
+/*============================================================================
+  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
-    - http://blog.grayghostvisuals.com/sass/sass-media-query-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) {
+@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;
@@ -184,4 +220,4 @@ $max: max-width;
       @content;
     }
   }
-}
+}
\ No newline at end of file
diff --git a/css/theme.scss.liquid b/css/theme.scss.liquid
index 9b4b8fa..d35e3e0 100755
--- a/css/theme.scss.liquid
+++ b/css/theme.scss.liquid
@@ -2,5 +2,6 @@
 
 @import url('_sass-helpers.scss.liquid');
 @import url('_reset.scss.liquid');
+@import url('_grid-mixins.scss.liquid');
 @import url('_grid.scss.liquid');
 @import url('_rest-of-styles.scss.liquid');
diff --git a/gulpfile.js b/gulpfile.js
index bec2bb5..618b089 100755
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -8,7 +8,7 @@ var globalConfig = {
 
 // Process CSS
 gulp.task('styles', function(){
-  return gulp.src(globalConfig.src + '/**/*.*')
+  return gulp.src(globalConfig.src + '/**/[^_]*.*')
     .pipe(cssimport())
     .pipe(gulp.dest('assets/'));
 })
diff --git a/package.json b/package.json
index 9e9751a..53721f6 100644
--- a/package.json
+++ b/package.json
@@ -1,12 +1,12 @@
 {
   "name": "shopify-css-import",
   "devDependencies": {
-    "grunt": "~0.4.4",
-    "grunt-concurrent": "~0.5.0",
+    "grunt": "~0.4.5",
+    "grunt-concurrent": "~1.0.0",
     "grunt-contrib-watch": "~0.6.1",
-    "grunt-exec": "~0.4.5",
+    "grunt-exec": "~0.4.6",
     "grunt-gulp": "^0.1.0",
-    "load-grunt-tasks": "^0.4.0",
+    "load-grunt-tasks": "~3.2.0",
     "gulp": "~3.8.11",
     "gulp-cssimport": "~1.3.1"
   }