@charset "UTF-8";
/*============================================================================
  Pipeline Theme   )`-....._,.-'``'-.,_,.='``'-.,   |  Built with Slate
==============================================================================*/

/*================ TOOLS ================*/
/*================ Mixins ================*/
@mixin clearfix() {
  &::after {
    content: '';
    display: table;
    clear: both;
  }

  // sass-lint:disable
  *zoom: 1;
}

@mixin prefix($property, $value) {
  -webkit-#{$property}: #{$value};
  -moz-#{$property}: #{$value};
  -ms-#{$property}: #{$value};
  -o-#{$property}: #{$value};
  #{$property}: #{$value};
}

@mixin transition($transition: 0.1s all) {
  @include prefix('transition', #{$transition});
}

@mixin transform($transform) {
  @include prefix(transform, $transform);
}

@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 backface($visibility: hidden) {
  @include prefix('backface-visibility', #{$visibility});
}

@mixin box-sizing($box-sizing: border-box) {
  -webkit-box-sizing: #{$box-sizing};
  -moz-box-sizing: #{$box-sizing};
  box-sizing: #{$box-sizing};
}

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

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

/*============================================================================
  Dependency-free breakpoint mixin
    - http://blog.grayghostvisuals.com/sass/sass-media-query-mixin/
==============================================================================*/
$min: min-width;
$max: max-width;
@mixin at-query ($constraint, $viewport1, $viewport2:null) {
  @if $constraint == $min {
    @media screen and ($min: $viewport1) {
      @content;
    }
  } @else if $constraint == $max {
    @media screen and ($max: $viewport1) {
      @content;
    }
  } @else {
    @media screen and ($min: $viewport1) and ($max: $viewport2) {
      @content;
    }
  }
}

@mixin visually-hidden() {
  // sass-lint:disable no-important
  position: absolute !important;
  overflow: hidden;
  clip: rect(0 0 0 0);
  height: 1px;
  width: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
}

@mixin visually-shown($position: inherit) {
  // sass-lint:disable no-important
  position: $position !important;
  overflow: auto;
  clip: auto;
  width: auto;
  height: auto;
  margin: 0;
}


/*================ SETTINGS ================*/
/*================ Color Variables ================*/

// Main Colors
$colorPrimary: #333333;
$colorSplash: #f6a8b0;

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

// Text colors
$colorTextBody: #000000;

// Backgrounds
$colorBody: #ffffff;

// Border colors
$colorBorder: #cccccc;

// Account Bar
$colorInfoBg: #f5cddc;
$colorInfoText: #000000;

// Nav and dropdown link background
$colorNav: #ffffff;
$colorNavText: #333333;
$colorNavBorder: $colorInfoBg;

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

// Homepage
$colorHomeDark: #2e3438;
$colorHomeLight: #f7f7f7;

// Products
$colorProductBg: #ffffff;
$colorProductArrows: #cccccc;

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

$colorBtnSecondary: $colorBody;
$colorBtnSecondaryHover: lighten($colorSplash, 10%);
$colorBtnSecondaryActive: lighten($colorSplash, 5%);
$colorBtnSecondaryText: $colorTextBody;

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

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

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





@font-face {
  font-family: Poppins;
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url("//www.celebrationbox.co.nz/cdn/fonts/poppins/poppins_n7.56758dcf284489feb014a026f3727f2f20a54626.woff2") format("woff2"),
       url("//www.celebrationbox.co.nz/cdn/fonts/poppins/poppins_n7.f34f55d9b3d3205d2cd6f64955ff4b36f0cfd8da.woff") format("woff");
}

@font-face {
  font-family: Poppins;
  font-weight: 300;
  font-style: normal;
  font-display: swap;
  src: url("//www.celebrationbox.co.nz/cdn/fonts/poppins/poppins_n3.05f58335c3209cce17da4f1f1ab324ebe2982441.woff2") format("woff2"),
       url("//www.celebrationbox.co.nz/cdn/fonts/poppins/poppins_n3.6971368e1f131d2c8ff8e3a44a36b577fdda3ff5.woff") format("woff");
}

@font-face {
  font-family: Poppins;
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url("//www.celebrationbox.co.nz/cdn/fonts/poppins/poppins_n4.0ba78fa5af9b0e1a374041b3ceaadf0a43b41362.woff2") format("woff2"),
       url("//www.celebrationbox.co.nz/cdn/fonts/poppins/poppins_n4.214741a72ff2596839fc9760ee7a770386cf16ca.woff") format("woff");
}


  @font-face {
  font-family: Poppins;
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url("//www.celebrationbox.co.nz/cdn/fonts/poppins/poppins_n4.0ba78fa5af9b0e1a374041b3ceaadf0a43b41362.woff2") format("woff2"),
       url("//www.celebrationbox.co.nz/cdn/fonts/poppins/poppins_n4.214741a72ff2596839fc9760ee7a770386cf16ca.woff") format("woff");
}




  @font-face {
  font-family: Poppins;
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url("//www.celebrationbox.co.nz/cdn/fonts/poppins/poppins_n4.0ba78fa5af9b0e1a374041b3ceaadf0a43b41362.woff2") format("woff2"),
       url("//www.celebrationbox.co.nz/cdn/fonts/poppins/poppins_n4.214741a72ff2596839fc9760ee7a770386cf16ca.woff") format("woff");
}




  @font-face {
  font-family: Poppins;
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url("//www.celebrationbox.co.nz/cdn/fonts/poppins/poppins_n4.0ba78fa5af9b0e1a374041b3ceaadf0a43b41362.woff2") format("woff2"),
       url("//www.celebrationbox.co.nz/cdn/fonts/poppins/poppins_n4.214741a72ff2596839fc9760ee7a770386cf16ca.woff") format("woff");
}




  @font-face {
  font-family: Poppins;
  font-weight: 300;
  font-style: italic;
  font-display: swap;
  src: url("//www.celebrationbox.co.nz/cdn/fonts/poppins/poppins_i3.8536b4423050219f608e17f134fe9ea3b01ed890.woff2") format("woff2"),
       url("//www.celebrationbox.co.nz/cdn/fonts/poppins/poppins_i3.0f4433ada196bcabf726ed78f8e37e0995762f7f.woff") format("woff");
}




  @font-face {
  font-family: Poppins;
  font-weight: 400;
  font-style: italic;
  font-display: swap;
  src: url("//www.celebrationbox.co.nz/cdn/fonts/poppins/poppins_i4.846ad1e22474f856bd6b81ba4585a60799a9f5d2.woff2") format("woff2"),
       url("//www.celebrationbox.co.nz/cdn/fonts/poppins/poppins_i4.56b43284e8b52fc64c1fd271f289a39e8477e9ec.woff") format("woff");
}



$baseFontSize: 14px; // Henceforth known as 1em

$bodyFontStack: Poppins, sans-serif;
$bodyFontStyle: normal;
$bodyFontWeight: 300;
$bodyFontWeightBold: 400;
$bodyFontAdjust: 1.1;

$titleFontStack: Poppins, sans-serif;
$titleFontStyle: normal;
$titleFontWeight: 700;
$titleFontWeightBold: 400;
$titleFontAdjust: 1.1;

$accentFontStack: Poppins, sans-serif;
$accentFontStyle: normal;
$accentFontWeight: 400;
$accentFontWeightBold: 400;
$accentFontAdjust: 0.8;

// Icons
@font-face {
  font-family: 'icons';
  src: url('//www.celebrationbox.co.nz/cdn/shop/t/122/assets/icons.eot?v=33645675370527648931783259862');
  src: url('//www.celebrationbox.co.nz/cdn/shop/t/122/assets/icons.eot?v=33645675370527648931783259862#iefix') format("embedded-opentype"),
       url('//www.celebrationbox.co.nz/cdn/shop/t/122/assets/icons.woff?v=3715827288646208141783259864') format("woff"),
       url('//www.celebrationbox.co.nz/cdn/shop/t/122/assets/icons.ttf?v=105297763297538311311783259864') format("truetype"),
       url('//www.celebrationbox.co.nz/cdn/shop/t/122/assets/icons.svg?v=80220311310459971271783259863#timber-icons') format("svg");
  font-weight: normal;
  font-style: normal;
  font-display:swap;
}

$socialIconFontStack: 'icons';


/*================ COMMON ================*/
/*============================================================================
  #Normalize
==============================================================================*/
*, input, :before, :after {
  @include box-sizing();
}

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

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

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

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

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

/*============================================================================
  #Grid 
    - 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
==============================================================================*/

/*================ Breakpoint and Grid Variables ================*/
$viewportIncrement: 1px;

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

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

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


$responsive:         true;
$mobile-first:       true;
$use-silent-classes: false;
$push:               true;
$pull:               false;

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/*================ CSS3 Vertical Align Helper ================*/
.vertical-align {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

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

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

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

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

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

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

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

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

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

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

  @include push-setup();

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

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

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

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

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

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

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

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

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

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

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

  @include pull-setup();

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

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

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

.title{
  font-family: $titleFontStack;
  font-weight: $titleFontWeight;
  font-style: $titleFontStyle;
  text-transform: uppercase; letter-spacing: 1px;
}
.body{
  font-family: $bodyFontStack;
  font-weight: $bodyFontWeight;
  font-style: $bodyFontStyle;
}
.accent{
  font-family: $accentFontStack;
  font-weight: $accentFontWeight;
  font-style: $accentFontStyle;
  text-transform: uppercase;
  letter-spacing: 1px;
  .strong, &.strong {
    font-weight: $accentFontWeightBold;
  }
}
.uppercase{
  @extend .accent;
  font-size: $baseFontSize * $accentFontAdjust;
}

/*================ Headings ================*/
h1, h2, h3, h4, h5, h6 {
  @extend .title;
  margin: 0 0 0.75em;
  line-height: 1.4;
  a {
    text-decoration: none;
    font-weight: inherit;
  }
  .strong, &.strong {
    font-weight: $titleFontWeightBold;
  }
}

h1 {
  font-size: em(23px * $titleFontAdjust);
  @include at-query ($max, $small) {
    font-size: em(15px * $titleFontAdjust);
  }
}

h2 {
  font-size: em(23px * $titleFontAdjust);
  @include at-query ($max, $small) {
    font-size: em(11px * $titleFontAdjust);
  }
}

h3 {
  font-size: em(14px * $titleFontAdjust);
  @include at-query ($max, $small) {
    font-size: em(11px * $titleFontAdjust);
  }
}

h4 {
  font-size: em(14px * $titleFontAdjust);
  @include at-query ($max, $small) {
    font-size: em(11px * $titleFontAdjust);
  }
}

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

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

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

/*================ Headings with accent font ================*/

.h1--accent {
  font-size: em(36px * $accentFontAdjust);
  @include at-query ($max, $small) {
    font-size: em(28px * $accentFontAdjust);
  }
}

.h2--accent {
  font-size: em(28px * $accentFontAdjust);
  @include at-query ($max, $small) {
    font-size: em(22px * $accentFontAdjust);
  }
}

.h3--accent {
  font-size: em(22px * $accentFontAdjust);
  @include at-query ($max, $small) {
    font-size: em(20px * $accentFontAdjust);
  }
}

.h4--accent {
  font-size: em(20px * $accentFontAdjust);
  @include at-query ($max, $small) {
    font-size: em(18px) * $accentFontAdjust;
  }
}

.h5--accent {
  font-size: em(16px * $accentFontAdjust);
}

.h6--accent {
  font-size: em(14px * $accentFontAdjust);
}

.h1--accent,
.h2--accent,
.h3--accent,
.h4--accent,
.h5--accent,
.h6--accent{
  @extend .accent;
  letter-spacing: 1px;
  margin: 0 0 0.75em;
  line-height: 1.4;
  a {
    text-decoration: none;
    font-weight: inherit;
  }
  .strong, &.strong {
    font-weight: $accentFontWeightBold;
  }
}


/*================ Headings with body font ================*/

.h1--body {
  font-size: em(36px * $bodyFontAdjust);
  @include at-query ($max, $small) {
    font-size: em(28px * $bodyFontAdjust);
  }
}

.h2--body {
  font-size: em(28px * $bodyFontAdjust);
  @include at-query ($max, $small) {
    font-size: em(22px * $bodyFontAdjust);
  }
}

.h3--body {
  font-size: em(22px * $bodyFontAdjust);
  @include at-query ($max, $small) {
    font-size: em(20px * $bodyFontAdjust);
  }
}

.h4--body {
  font-size: em(20px * $bodyFontAdjust);
  @include at-query ($max, $small) {
    font-size: em(18px) * $bodyFontAdjust;
  }
}

.h5--body {
  font-size: em(16px * $bodyFontAdjust);
}

.h6--body {
  font-size: em(14px * $bodyFontAdjust);
}

.h1--body,
.h2--body,
.h3--body,
.h4--body,
.h5--body,
.h6--body{
  @extend .body;
  text-transform: none;
  letter-spacing: 0px;
  margin: 0 0 0.75em;
  line-height: 1.4;
  a {
    text-decoration: none;
    font-weight: inherit;
  }
}



/*================ Body elements ================*/

p {
  @extend .body;
  font-size: 14px * $bodyFontAdjust;
  margin: 0 0 ($gutter / 2) 0;
  img {
    margin: 0;
  }
}

em,
.em {
  font-style: italic;
}

b, strong, .strong {
  font-weight: $bodyFontWeightBold;
}

small,
.small {
  font-size: 0.9em * $bodyFontAdjust;
}

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

sub, .sub {
  bottom: -0.5em;
}

s, .s{
  text-decoration: line-through;
  opacity: 0.5;
}

/*================ Blockquotes ================*/
blockquote {
  font-size: 1.125em * $bodyFontAdjust;
  line-height: 1.71;
  font-style: italic;
  margin: 0 0 $gutter;
  padding: ($gutter / 2) $gutter;
  border-left: 1px solid $colorBorder;
  p {
    margin-bottom: 0;
    & + cite {
      margin-top: $gutter / 2;
    }
  }
  cite {
    display: block;
    font-size: 0.75em * $bodyFontAdjust;
    &:before {
      content: '\2014 \0020';
    }
  }
}

/*================ Code ================*/
code, pre {
  font-family: Consolas,monospace;
  font-size: 1em;
  border: 0 none;
  border-left: 1px solid $colorBorder;
  padding: 0 2px;
}

pre {
  overflow: auto;
  padding: $gutter / 2;
  margin: 0 0 $gutter;
}
.unicode{
  font-family: "Lucida Sans Unicode", "Arial Unicode MS, Arial";
}
.lt-ie9 .unicode{
  display: none;
}

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

  &.hr--small {
    margin: ($gutter / 2) 0;
  }
  &.hr--double {
    margin: ($gutter * 2) 0;
  }
  &.hr--clear {
    border-top-color: transparent;
  }
  &.hr--dash {
    margin: $gutter auto;
    width: 80px;
  }
  &.hr--thick {
    border-width: 2px 0 0;
  }
  &.hr--underline{
    margin-top: 10px;
    margin-bottom: 20px;
  }
}



/*============================================================================
  #Lists
==============================================================================*/
ul, ol {
  margin: 0 0 $gutter;
  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;
}


/*============================================================================
  #Basic Styles
==============================================================================*/
body:not(.template-index){
  background-color: $colorBody;
}

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

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

  @include at-query ($min, $small) {
    padding: 0 $gutter;
  }
}
.main-content {
  display: block;
  padding-bottom: $gutter * 4;
}


/*================ Section Headers ================*/
.section-header {
  margin-bottom: $gutter / 1.5;
}
@include at-query ($min, $large) {
  .section-header {
    display: table;
    width: 100%;
  }
  .section-header__title {
    margin-bottom: $gutter / 2.5;
  }
  .section-header__left {
    display: table-cell;
    vertical-align: middle;
    margin-bottom: 0;
    h1, h2, h3, h4,
    .h1, .h2, .h3, .h4 {
      margin-bottom: 0;
    }
  }
  .section-header__right {
    display: table-cell;
    vertical-align: middle;
    text-align: right;
    @include at-query ($max, $medium) {
      margin-bottom: $gutter;
    }
  }
}
.section-header__right {
  .btn{
    margin-top: 3px !important;
  }
  .form-horizontal,
  .collection-view {
    display: inline-block;
    vertical-align: middle;
  }
  @include at-query ($min, $postSmall) {
    label + select,
    .collection-view {
      margin-left: $gutter / 2;
    }
  }
}
.collection-view {
  display: inline-block;
  border: 1px solid $colorBorder;
  border-radius: $radius;
  padding: 0 5px;
  height: 37px; // same as form elements
  overflow: hidden;
  /*================ Only show on larger screens ================*/
  @include at-query ($min, $large) {
    display: inline-block;
  }
}
.change-view {
  display: block;
  background: none;
  border: 0 none;
  float: left;
  padding: 10px 8px;
  color: $colorBorder;
  line-height: 1;
  &:hover,
  &:focus {
    color: $colorPrimary;
  }
}
.change-view--active {
  cursor: default;
  color: $colorPrimary;
}

/*============================================================================
  #Icons
==============================================================================*/
.icon-fallback-text .icon {
  display: none;
  .supports-fontface & {
    display: inline-block;
  }
}

/*============================================================================
  A generic way to visually hide content while
  remaining accessible to screen readers (h5bp.com)
==============================================================================*/
.supports-fontface .icon-fallback-text .fallback-text {
  clip: rect(0 0 0 0);
  overflow: hidden;
  position: absolute;
  height: 1px;
  width: 1px;
}
.icon:before {
  display: none;
}
.supports-fontface .icon:before {
  display: inline;
  font-family: $socialIconFontStack;
  text-decoration: none;
  speak: none; // future fallback, limited in effect currently
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/*================ Icon mapping ================*/
.icon-amazon_payments:before{ content: "\e800"; }
.icon-american_express:before{ content: "\41"; }
.icon-apple_pay:before{ content: "\e90c"; }
.icon-arrow-down:before{ content: "\e607"; }
.icon-arrow-left:before{ content: "\e901"; }
.icon-arrow-right:before{ content: "\e902"; }
.icon-bitcoin:before{ content: "\42"; }
.icon-cart:before{ content: "\e600"; }
.icon-cirrus:before{ content: "\e904"; }
.icon-customer:before{ content: "\e605"; }
.icon-dankort:before{ content: "\64"; }
.icon-diners_club:before{ content: "\63"; }
.icon-discover:before{ content: "\44"; }
.icon-dogecoin:before{ content: "\e908"; }
.icon-dwolla:before{ content: "\e903"; }
.icon-facebook:before{ content: "\e609"; }
.icon-fancy:before{ content: "\46"; }
.icon-forbrugsforeningen:before{ content: "\e905"; }
.icon-google_plus:before{ content: "\e90a"; }
.icon-hamburger:before{ content: "\e601"; }
.icon-instagram:before{ content: "\e907"; }
.icon-interac:before{ content: "\49"; }
.icon-jcb:before{ content: "\4a"; }
.icon-litecoin:before{ content: "\e909"; }
.icon-maestro:before{ content: "\e906"; }
.icon-master:before{ content: "\e90b"; }
.icon-minus:before{ content: "\e602"; }
.icon-paypal:before{ content: "\50"; }
.icon-pinterest:before{ content: "\e608"; }
.icon-plus:before{ content: "\e603"; }
.icon-rss:before{ content: "\72"; }
.icon-search:before{ content: "\73"; }
.icon-shopify_pay:before{ content: "\e900"; }
.icon-snapchat:before{ content: "\e90d"; }
.icon-tumblr:before{ content: "\74"; }
.icon-twitter:before{ content: "\54"; }
.icon-vimeo:before{ content: "\76"; }
.icon-visa:before{ content: "\56"; }
.icon-x:before{ content: "\e604"; }
.icon-youtube:before{ content: "\79"; }

.payment-icons {
  @include prefix('user-select', 'none');
  cursor: default;
  li {
    margin: 0 ($gutter / 4) ($gutter / 4);
    color: #2e3438;
    cursor: default;
  }
  .icon {
    font-size: 30px;
    line-height: 20px;
  }
  .fallback-text {
    text-transform: capitalize;
  }
}
.social-icons li {
  margin: 0 ($gutter / 2) ($gutter / 2);
  vertical-align: middle;

  @include at-query ($min, $postSmall) {
    margin-left: 0;
  }
  .icon {
    font-size: 26px;
    line-height: 20px;
  }
  a {
    color: #2e3438;
    &:hover {
      color: darken(#2e3438, 10%);
    }
  }
}

/*============================================================================
  #Rich Text Editor
==============================================================================*/
.rte {
  margin-bottom: $gutter / 2;
  // Add some top margin to headers from the rich text editor
  h1, h2, h3, h4, h5, h6 {
    margin-top: 1.5em;
    &:first-child {
      margin-top: 0;
    }
  }
  > div {
    margin-bottom: $gutter / 2;
  }
  ul, ol {
    margin-left: 35px;
    font-size: 14px * $bodyFontAdjust;
  }
  ul {
    @extend ul.disc;
  }
  ul ul, ol ul {
    list-style-type: circle;
  }
  ol ol ul, ol ul ul, ul ol ul, ul ul ul {
    list-style-type: square;
  }
  li {
    margin-bottom: 0.4em;
  }
  img{
    max-width: 100%;
    height: auto;
  }
  img[style*="float: left"],
  img[style*="float:left"]{
    margin-right: $gutter/2;
  }
  img[style*="float: right"],
  img[style*="float:right"]{
    margin-left: $gutter/2;
  }
  word-wrap: break-word;
}
.rte--header {
  margin-bottom: 0;
}
.rte__table-wrapper {
  max-width: 100%;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
.columns{
  -webkit-column-gap: $gutter*1.5;
  -moz-column-gap: $gutter*1.5;
  column-gap: $gutter*1.5;
  -webkit-columns: 2 $small/2;
  -moz-columns: 2 $small/2;
  columns: 2 $small/2;
}


/*============================================================================
  #Tables
==============================================================================*/
table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
}
table.full {
  width: 100%;
  margin-bottom: 1em;
}
.table-wrap {
  max-width: 100%;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
tr{
  border-bottom: 1px solid $colorBorder;
}
th {
  font-weight: $bodyFontWeightBold;
}
th, td {
  text-align: left;
  padding: $gutter / 2;
}

/* Responsive tables for IE9+ */
html:not(.lt-ie9) {
  .table--responsive {
    @include at-query($max, $small) {
      thead {
        display: none;
      }

      tr {
        display: block;
      }

      tbody{
        border-top: 1px solid $colorBorder;
      }

      tbody td:not(:first-child){
        border-top: 1px solid rgba($colorBorder, 0.2);
      }

      tfoot{
        border-top: 1px solid $colorBorder;
        border-bottom: 2px solid $colorBorder;
      }

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

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

      td:before {
        content: attr(data-label);
        float: left;
        @extend .h6--accent;
        padding-right: 10px;
      }
    }
  }

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


/*============================================================================
  #Links and Buttons
==============================================================================*/
a,
.text-link {
  color: $colorLink;
  text-decoration: underline;
  background: transparent;
}
a:hover,
a:focus {
  color: $colorLinkHover;
}
button {
  overflow: visible;
}
button[disabled],
html input[disabled] {
  cursor: default;
}

.btn{
  display: inline-block;
  padding: 8px 10px;
  margin: 0;
  line-height: 1.42;
  font-weight: $bodyFontWeight;
  text-decoration: none;
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;
  cursor: pointer;
  border: 1px solid transparent;
  @include prefix('user-select', 'none');
  -webkit-appearance: none;
  -moz-appearance: none;
  border-radius: $radius;
  background-color: $colorBtnPrimary;
  color: $colorBtnPrimaryText;
  &:hover {
    background-color: $colorBtnPrimaryHover;
    color: $colorBtnPrimaryText;
  }
  &:active,
  &:focus {
   background-color: $colorBtnPrimaryActive;
   color: $colorBtnPrimaryText;
   outline: none;
  }
  &[disabled],
  &.disabled {
    cursor: default;
    color: $disabledBorder;
    background-color: $disabledGrey;
    &:hover{
      color: $disabledBorder !important;
      background-color: $disabledGrey !important;
    }
  }
}

.btn--secondary,
input.btn--secondary {
  @extend .btn;
  background-color: $colorBtnSecondary;
  border: 1px solid $colorBtnSecondaryText;
  color: $colorBtnSecondaryText;
  &:hover {
    background-color: $colorBtnSecondaryHover;
    color: $colorBtnSecondaryText;
  }
  &:focus,
  &:active {
   background-color: $colorBtnSecondaryActive;
   color: $colorBtnSecondaryText;
  }
}
.btn--small {
  padding: 6px 7px;
  font-size: em(10px * $bodyFontAdjust);
  .uppercase, &.uppercase {
    font-size: em(10px * $accentFontAdjust);
  }
}
.btn--large {
  padding: 12px 20px;
  font-size: em(18px * $bodyFontAdjust);
  .uppercase, &.uppercase {
    font-size: em(18px * $accentFontAdjust);
  }
}
.btn--full {
  width: 100%;
}
.btn--clear {
  background-color: transparent;
  color: $colorPrimary;
  border: 1px solid $colorPrimary;
  &:hover,
  &:focus,
  &:active{
    color: $colorPrimary;
    background-color: rgba($colorSplash, 0.3);
  }
  &.disabled{
    border: 1px solid $disabledBorder;
  }
}
.lt-ie9 .btn--clear:hover{
  background-color: $colorSplash;
}
.btn--splash {
  background-color: $colorSplash;
  &:hover,
  &:focus,
  &:active{
    background-color: darken($colorSplash, 10%);
  }
}
.btn--square{
  border-radius: 0px !important;
}
.btn--outline{
  background-color: #FFFFFF;
  border: 1px solid $colorHomeDark;
  box-shadow: 0 0 0 8px #FFFFFF;
  color: $colorHomeDark;
  margin: 8px;
  &:hover, &:focus, &:active{
    color: $colorSplash;
    background-color: #FFFFFF;
  }
}

.add-to-cart__wrapper .btn--large{
  padding: 22px 20px;
  line-height: 0;
}


/*================ Force an input/button to look like a text link ================*/
.text-link {
  display: inline;
  border: 0 none;
  background: none;
  padding: 0;
  margin: 0;
}
.shopify-product-form{
  max-width: 400px;
  margin: 0 auto;
}
.shopify-payment-button .shopify-payment-button__button {
  margin-top: 15px;
  border-radius: $radius;
  overflow: hidden;
}

.variant--soldout .shopify-payment-button,
.variant--unavailabe .shopify-payment-button{
  opacity: 0;
}
.shopify-payment-button{
  transition: opacity 0.4s ease-out;
}



.shopify-payment-button .shopify-payment-button__button--unbranded{
  padding: 16px 20px;
  font-family:  $accentFontStack;
  text-transform: uppercase;
  background-color: $colorSplash;
  font-size: em(18px * $accentFontAdjust);
  font-weight: $bodyFontWeight;
  letter-spacing: 1px;
  @include prefix('user-select', 'none');
  -webkit-appearance: none;
  -moz-appearance: none;
  &:hover:not([disabled]){
    background-color: darken($colorSplash, 10%);
  }
  &:active,
  &:focus {
    background-color: darken($colorSplash, 12%);
    outline: none;
  }
}
.shopify-payment-button .shopify-payment-button__more-options{
  &:active{
    text-decoration: underline;
    outline: none;
    transform: translateY(1px);
  }
}


/*============================================================================
  #Forms
==============================================================================*/
form {
  margin-bottom: $gutter;
}
@include at-query($max, $medium) {
  input,
  textarea,
  select{
    font-size: 16px;
  }
}
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"],
textarea {
  -webkit-appearance: none;
  -moz-appearance: none;
}
input,
textarea,
select,
fieldset {
  border-radius: $radius;
  max-width: 100%;
  &.input-full {
    width: 100%;
  }
}

input,
select,
textarea {
  padding: 8px 10px;
  line-height: 1.42;
}
fieldset {
  border: 1px solid $colorBorder;
  padding: $gutter / 2;
}
legend {
  border: 0;
  padding: 0;
}
optgroup {
  font-weight: $bodyFontWeightBold;
}
input {
  display: inline-block;
  width: auto;
}
button,
input[type="submit"] {
  cursor: pointer;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
input[type="submit"] {
  @extend .btn;
}
.hidden-label {
    clip: rect(0 0 0 0);
    clip: rect(0, 0, 0, 0);
    overflow: hidden;
    position: absolute;
    height: 1px;
    width: 1px;
}

/*================ 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"],
textarea,
select {
  border: 1px solid $colorBorder;
  width: 100%;
  max-width: 100%;
  display: block;
  margin: 0 0 1em;
  background-color: transparent;
  outline: none;
  &:focus {
    border: 1px solid darken($colorBorder, 10%);
    box-shadow: 0 0 5px rgba(#000, .15);
  }
  &[disabled],
  &.disabled {
    cursor: default;
    background-color: $disabledGrey;
    border-color: $disabledBorder;
  }
}
textarea {
  min-height: 100px;
}
input[type="checkbox"],
input[type="radio"] {
  display: inline;
  margin: 0;
  padding: 0;
}
select {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-position: right center;
  background: {
    image: url('//www.celebrationbox.co.nz/cdn/shop/t/122/assets/ico-select.svg?v=18310958269001584211783259945');
    repeat: no-repeat;
    position: right 10px center;
    color: transparent;
  }
  padding-right: 28px;
  text-indent: 0.01px;
  text-overflow: '';
  cursor: pointer;

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

// Force option color (affects IE only)
option {
  color: #000;
  background-color: #fff;
}
select::-ms-expand {
  display: none;
}

/*================ Form labels ================*/
label,
legend {
  display: block;
  margin-bottom: 2px;
  font-weight: $bodyFontWeightBold;
  &.inline {
    display: inline;
  }
  .form-horizontal &.label--hidden,
  &.label--hidden {
    height: 0;
    width: 0;
    margin-bottom: 0;
    overflow: hidden;
    .ie9 &,
    .lt-ie9 & {
      height: auto;
      width: auto;
      margin-bottom: 2px;
      overflow: visible;
    }
  }
}

/*================ We don't want the same label treatment for checkboxes/radios ================*/
input[type="checkbox"] + label,
input[type="radio"] + label {
  font-weight: $bodyFontWeight;
}
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,
  select,
  label {
    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"],
textarea {
  &.error {
    border-color: $errorRed;
    background-color: $errorRedBg;
    color: $errorRed;
  }
}
label.error {
  color: $errorRed;
}

/*================ Input Group ================*/
.input-group {
  position: relative;
  display: table;
  border-collapse: separate;
  .input-group-field:first-child,
  .input-group-btn:first-child,
  .input-group-btn:first-child > .btn,
  input[type="hidden"]:first-child + .input-group-field,
  input[type="hidden"]:first-child + .input-group-btn > .btn {
    border-radius: $radius 0 0 $radius;
  }
  .input-group-field:last-child,
  .input-group-btn:last-child > .btn {
   border-radius: 0 $radius $radius 0;
  }
  input {
    // Nasty Firefox hack for inputs http://davidwalsh.name/firefox-buttons
    &::-moz-focus-inner {
      border: 0;
      padding: 0;
      margin-top: -1px;
      margin-bottom: -1px;
    }
  }
}
.input-group-field,
.input-group-btn {
  display: table-cell;
  vertical-align: middle;
  margin: 0;
}
.input-group .btn,
.input-group .input-group-field {
  height: 37px;
}
.input-group .input-group-field {
  width: 100%;
  margin-bottom: 0;
}
.input-group-btn {
  position: relative;
  white-space: nowrap;
  width: 1%;
  padding: 0;
}

/*============================================================================
  #Notes and Form Feedback
==============================================================================*/
.note,
.errors {
  border-radius: $radius;
  padding: 6px 12px;
  margin-bottom: $gutter / 2;
  border: 1px solid transparent;
  font-size: 0.9em;
  text-align: left;
  ul,
  ol {
    margin-top: 0;
    margin-bottom: 0;
  }
  li:last-child {
    margin-bottom: 0;
  }
  p {
    margin-bottom: 0;
  }
}
.note {
  border-color: $colorBorder;
}
.errors {
  ul {
    list-style: disc outside;
    margin-left: 20px;
  }
}
.form-success {
  color: $successGreen;
  background-color: $successGreenBg;
  border-color: $successGreen;
  a {
    color: $successGreen;
    text-decoration: underline;

    &:hover {
      text-decoration: none;
    }
  }
}
.form-error,
.errors {
  color: $errorRed;
  background-color: $errorRedBg;
  border-color: $errorRed;
  a {
    color: $errorRed;
    text-decoration: underline;

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

/*============================================================================
  #Images and Iframes
==============================================================================*/
img {
  border: 0 none;
}
svg:not(:root) {
  overflow: hidden;
}
img.auto,
.grid__item img,
.grid__item iframe {
  max-width: 100%;
}
.rte__video-wrapper, .sky-pilot-embed {
  position: relative;
  overflow: hidden;
  max-width: 100%;
  padding-bottom: 56.25%;
  height: 0;
  height: auto;
  iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
}


/*============================================================================
  #Helper Classes
==============================================================================*/
.clearfix {
  @include clearfix();
}

.left { float: left; }
.right { float: right; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.hidden { display: none; }
.lighten{ opacity: 0.5; }
.display-table {
  display: table;
  table-layout: fixed;
  width: 100%;
}
.display-table-cell {
  display: table-cell;
  vertical-align: middle;
  float: none;
}
@include at-query ($min, $large) {
  .large--display-table {
    display: table;
    table-layout: fixed;
    width: 100%;
  }
  .large--display-table-cell {
    display: table-cell;
    vertical-align: middle;
    float: none;
  }
}
.page-margin{
  padding-top: $gutter*2;
}
@include at-query($max, $small) {
  .hidden-sm {
    display: none;
  }
}
@include at-query($max, $medium) {
  .hidden-md-down {
    display: none;
  }
}
@media only screen and (min-width: ($small + 1px) ) and (max-width: ($medium) ){
  .hidden-md {
    display: none;
  }
}
@include at-query($min, $medium) {
  .hidden-md-up {
    display: none;
  }
}
@include at-query($min, $large) {
  .hidden-lg {
    display: none;
  }
}

// Hide and show
.visually-hidden {
  @include visually-hidden();
}
.js-focus-hidden:focus {
  outline: none;
}
.label-hidden {
  @include visually-hidden();

  // No placeholders, so force show labels
  .no-placeholder & {
    @include visually-shown();
  }
}
.visually-shown {
  @include visually-shown();
}

// Used on product variants
html.no-js{
  .js{
    display: none;
  }
}
html.supports-js {
  .no-js{
    display: none;
  }
}

html.no-js{
  .lazyload{
    display: none;
  }
}

.lazywide{
  display: block;
  width: 100%;
}

// Only show when browser cookies are not supported
.supports-no-cookies:not(html) {
  display: none;

  html.supports-no-cookies & {
    display: block;
  }
}

// Only show when browser cookies are supported
.supports-cookies {
  html.supports-no-cookies & {
    display: none;
  }
}

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

/*============================================================================
  This file is build around onboarding markup loaded in Shopify-built themes and Timber
    - Handles empty state hover styles with specific markup
==============================================================================*/

.helper-note {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -80px;
  margin-left: -255px;
  max-width: 510px;
  font-size: 14px;
  background: #000;
  border: none;
  color: #fff;
  text-align: left;
  padding: 30px;
  z-index: 99999;
  opacity: 0;
  -webkit-font-smoothing: initial;
  filter: alpha(opacity=0);
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
  box-sizing: border-box;
  -webkit-transition: opacity 0.3s cubic-bezier(0,0,0.33,1), transform 0.5s cubic-bezier(0.45, 0, 0, 0.95);
  -moz-transition: opacity 0.3s cubic-bezier(0,0,0.33,1), transform 0.5s cubic-bezier(0.45, 0, 0, 0.95);
  -ms-transition: opacity 0.3s cubic-bezier(0,0,0.33,1), transform 0.5s cubic-bezier(0.45, 0, 0, 0.95);
  -o-transition: opacity 0.3s cubic-bezier(0,0,0.33,1), transform 0.5s cubic-bezier(0.45, 0, 0, 0.95);
  transition: opacity 0.3s cubic-bezier(0,0,0.33,1), transform 0.5s cubic-bezier(0.45, 0, 0, 0.95);
}

@media only screen and (max-width: 509px) {
  .helper-note {
    width: 95%;
    margin-top: 10%;
    margin-left: 2.5%;
    top: 0;
    left: 0;
  }
}

.helper-note p {
  margin-bottom: 15px;
  margin-left: 40px;
  font-size: 14px;
  line-height: 20px;
}

.helper-note p:last-child {
  margin-bottom: 0;
}

.helper-note h3 {
  font-size: 19px;
  color: #fff;
  margin-left: 40px;
  text-transform: none;
}

.helper-note a {
  color: #fff;
  text-decoration: underline;
}

.helper-note a:hover,
.helper-note a:active {
  color: #ccc;
}

.helper-note a.secondary-action {
  display: inline-block;
  line-height: 30px;
  color: #ccc;
  text-decoration: none;
}

.helper-note a.secondary-action:hover,
.helper-note a.secondary-action:focus {
  opacity: 0.7;
}

.helper-note a.admin-btn-primary {
  margin-right: 15px;
  cursor: pointer;
  display: inline-block;
  white-space: normal;
  min-height: 32px;
  line-height: 30px;
  padding: 0 9px;
  font-size: 14px;
  border-radius: 0px;
  text-decoration: none;
  white-space: nowrap;
  text-transform: none;
  vertical-align: middle;
  background-color: #d86353;
  border: 1px solid #b74737;
  color: #fff;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.helper-note a.admin-btn-primary:hover,
.helper-note a.admin-btn-primary:focus {
  opacity: 0.7;
}

.helper-note a.admin-btn-primary:active {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) inset;
  background-color: #b74737;
  border-color: #b74737;
}

.helper-note .helper-icon {
  float: left;
  margin-top: 4px;
  width: 24px;
  height: 24px;
  background-size: contain;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE2IDE2Ij48c3R5bGUgdHlwZT0idGV4dC9jc3MiPmNpcmNsZSwgZWxsaXBzZSwgbGluZSwgcGF0aCwgcG9seWdvbiwgcG9seWxpbmUsIHJlY3QsIHRleHQgeyBmaWxsOiAjOThhN2I1ICFpbXBvcnRhbnQ7IH08L3N0eWxlPjxwYXRoIGZpbGw9IiM1MjYwNjYiIGQ9Ik01IDloLTN2MWgzdi0xem0xLTJoLTR2MWg0di0xem0tNCA1aDN2LTFoLTN2MXptOCAyLjA0NmwtOS4wMDItLjA0Ni0uMDA0LTloMy4wMDZ2LTNoNnYyaDF2LTEuOTU0bC0xLjA4LTEuMDQ2aC02LjkybC0yLjk5OCAyLjk4Ni0uMDAyIDExLjAxNGgxMXYtNGwtMSAxLjA0NnYyem0tNi45OTYtMTEuNjA1djEuNTg2aC0xLjYwOGwxLjYwOC0xLjU4NnptMi45ODcgOS4wNThsMi4yMDYtLjA1OSA2LjgwNS01LjU1NC0xLjY4OS0yLjEwNC02LjgwNSA1LjU1NC0uNTE3IDIuMTYzem0xLjE2OS0xLjcxNWwuODMxLS4xNTYuMTU1LjgzNS0xLjIwMS41NjUuMjE1LTEuMjQ0eiIvPjwvc3ZnPg==");
  display: inline-block;
  vertical-align: top;
}

.helper-section {
  position: relative;
  clear: both;
}

.helper-section:hover .helper-note {
  opacity: 1;
  filter: alpha(opacity=100);
  -webkit-transform: translateY(-20px);
  -moz-transform: translateY(-20px);
  -ms-transform: translateY(-20px);
  -o-transform: translateY(-20px);
  transform: translateY(-20px);
}

.helper-section .helper-content {
  opacity: 1;
  filter: alpha(opacity=100);
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-transition: opacity 0.25s cubic-bezier(0.67, 0, 1, 1);
  -moz-transition: opacity 0.25s cubic-bezier(0.67, 0, 1, 1);
  -ms-transition: opacity 0.25s cubic-bezier(0.67, 0, 1, 1);
  -o-transition: opacity 0.25s cubic-bezier(0.67, 0, 1, 1);
  transition: opacity 0.25s cubic-bezier(0.67, 0, 1, 1);
}

.helper-section:hover .helper-content {
  opacity: 0.2;
  filter: alpha(opacity=20);
  -webkit-transition: opacity 0.3s cubic-bezier(0, 0, 0.33, 1);
  -moz-transition: opacity 0.3s cubic-bezier(0, 0, 0.33, 1);
  -ms-transition: opacity 0.3s cubic-bezier(0, 0, 0.33, 1);
  -o-transition: opacity 0.3s cubic-bezier(0, 0, 0.33, 1);
  transition: opacity 0.3s cubic-bezier(0, 0, 0.33, 1);
}


/*================ MODULES ================*/
/*============================================================================
  #Pagination (Including Shopify Product Reviews)
==============================================================================*/
.pagination {
  margin-bottom: 1em;
}

/*================ Custom Pagination ================*/
.pagination-custom, .sky-pilot-pagination {
  display: inline-block;
  padding-left: 0;
  margin: 0 0 $gutter;
  border-radius: $radius;
}
.pagination-custom > li, .sky-pilot-pagination span
{
  display: inline;
}

.spr-pagination > div{
  display: inline-block;
}

.spr-summary-actions-newreview{
  @extend .btn;
}

.spr-pagination .spr-pagination-page,
.spr-pagination .spr-pagination-next,
.spr-pagination .spr-pagination-prev {
  display: inline;
  position: relative;
}

.pagination-custom > li > a,
.pagination-custom > li > span,
.spr-pagination-page > a,
.spr-pagination-page.is-active,
.spr-pagination .spr-pagination-deco,
.spr-pagination-next > a,
.spr-pagination-prev > a,
.sky-pilot-pagination > span > a{
  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,
.spr-pagination > div > span:first-child > a,
.spr-pagination > div > span:first-child.is-active,
.sky-pilot-pagination > span:first-child > a
{
  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,
.spr-pagination > div > span:last-child > a,
.spr-pagination > div > span:last-child.is-active,
.sky-pilot-pagination > span:last-child > a
{
  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,
.sky-pilot-pagination > span > a:hover
{
  color: $colorSplash;
}
.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: $colorSplash;
}
.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 * $bodyFontAdjust);
}
.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;
}
.pagination-custom-sm > li > a,
.pagination-custom-sm > li > span {
  padding: 5px 10px;
  font-size: em(12px * $bodyFontAdjust);
}
.pagination-custom-sm > li:first-child > a,
.pagination-custom-sm > li:first-child > span {
  border-bottom-left-radius: 3px;
  border-top-left-radius: 3px;
}
.pagination-custom-sm > li:last-child > a,
.pagination-custom-sm > li:last-child > span {
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
}

/*============================================================================
  #Site Header
==============================================================================*/
$infoBarHeight: 20px;
$infoBarPadding: 5px;
.info-bar--upper{
  height: auto !important;
}
.info-bar{
  background-color: $colorInfoBg;
  color: $colorInfoText;
  padding:  $infoBarPadding 0;
  min-height: $infoBarHeight + (2*$infoBarPadding);;
  a:link{
    color: $colorInfoText;
    text-decoration: none;
  }
  a:visited,
  a:focus,
  a:active,
  a:hover{
    color: rgba($colorInfoText, 0.9);
    text-decoration: underline;
  }
  .wrapper{position: relative;}
  :after{
    position: absolute;
    z-index: 500;
    left: 0;
    top: 0;
    width: $gutter/2;
    height: $infoBarHeight + $infoBarPadding;
    background-color: $colorInfoBg;
  }
}
.header-message--crowded{
  padding: 0 25px 0 25px;
}
.header-account-link{
  float: left;
}
.header-message {
  line-height: $infoBarHeight;
  margin-bottom: 0;
}
.site-header {
  position: relative;
  background-color: $colorNav;
  border-bottom: 1px solid $colorNavBorder;
}
.logo-wrapper{
  max-width: 80%;
}

.header-logo {
  @extend .title;
  text-align: left;
  margin: 0;
  a{
    text-decoration: none;
    color: $colorNavText;
  }
  a:hover,
  a:focus {
    text-decoration: none;
    color: darken($colorNavText, 10%);
  }
  a,
  img {
    display: block;
  }
}
.header--small .logo-image{ max-height: 40px; }
.header--medium .logo-image{ max-height: 60px; }
.header--large .logo-image{ max-height: 80px; }
.header--xl .logo-image{ max-height: 100px; }

.header--small .nav--desktop .header-menu > ul > li > a{
  padding-top: 20px;
  padding-bottom: 20px;
}
.header--medium .nav--desktop .header-menu > ul > li > a{
  padding-top: 30px;
  padding-bottom: 30px;
}
.header--large .nav--desktop .header-menu > ul > li > a{
  padding-top: 40px;
  padding-bottom: 40px;
}
.header--xl .nav--desktop .header-menu > ul > li > a{
  padding-top: 50px;
  padding-bottom: 50px;
}


/*================ Search bar in header ================*/
.search {
  max-width: 100%;
  margin-bottom: 0;
  display: block;
}
.header-search__wrapper{
  position: absolute;
  top: -3px;
  right: ($gutter / 2);
  @include at-query ($min, $small) {
    right: $gutter;
  }
}


.header-search {
  text-align: right;
  background-color: transparent;
  .search-bar{
    position: relative;
    z-index: 100;
    height: $infoBarHeight + 6px;
    color: $colorInfoBg;
    font-size: 16px !important;
    padding: 0 25px 0 0;
    text-align: right;
    border: none;
    margin-bottom: 0;
    border-bottom: 1px solid transparent;
    border-radius: 0px;
    width: 5px;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    cursor: pointer;
    &:focus,
    &:active{
      @include at-query ($min, $small) {
        width: 250px;
      }
      @include at-query ($max, $small) {
        width: $small;
      }
      border: none;
      cursor: text;
      padding: 0;
      margin-right: 24px;
      color: $colorInfoText;
      background-color: $colorInfoBg;
      border-bottom: 1px solid rgba($colorNav, 0.5);
      box-shadow: none;
    }
  }
  .search-btn{
    position: absolute;
    top: 0;
    right: 0px;
    height: $infoBarHeight + 6px;
    border-top-right-radius: $radius;
    border-bottom-right-radius: $radius;
    width: 23px;
    background: url("//www.celebrationbox.co.nz/cdn/shop/t/122/assets/search.svg?v=162918692910337898401783259945");
    background-repeat: no-repeat;
    background-position:  right 3px center;
    &:focus,
    &:active{
      @if (lightness( $colorInfoBg ) > 40) {
        outline: none;
        box-shadow: 0 0 5px darken($colorInfoBg, 30%);
      }
      @else {
        outline: none;
        box-shadow: 0 0 5px lighten($colorInfoBg, 80%);
      }
    }
  }
  .input-group,
  .input-group-field {
    margin-bottom: 0;
  }
}

.lt-ie9 .header-search__wrapper .header-search .search .search-bar,
.lt-ie9 .header-search__wrapper .header-search .search{
  width: 250px !important;
}


/*============================================================================
  #Site Nav and Dropdowns
==============================================================================*/
.main-menu {
  cursor: default;
  margin-bottom: 0px;
  ul { margin: 0;}
  li {
    margin: 0;
    display: block;
  }
  a {
    text-decoration: none;
    color: $colorNavText;
    &:hover,
    &:active,
    &:focus,
    &.nav-focus{
      color: $colorSplash;
    }
  }
  a:focus:active{
    transform: translate(0px, 1px);
  }
  .main-menu--active a:focus{
    color: darken($colorSplash, 15%);
  }
}
.main-menu--active > a{
  color: $colorSplash;
}
.main-menu-dropdown{
  background-color: $colorNav;
}
.logo-wrapper--image .header-logo{
  line-height: 0;
}

/*================ Large / Small Display Logic ================*/
@include at-query($max, $medium){
  .nav--mobile{
    display: block;
  }
  .nav--desktop{
    position: absolute;
    left: -9999px;
  }
}

@include at-query($min, $medium){
  .nav--desktop{
    position: static;
  }

  .nav--mobile{
    display: none;
  }
}

.showMobile {
  .nav--mobile {
    display: block;
  }

  .nav--desktop{
    position: absolute;
    left: -9999px;
  }
}

.showDesktop {
  .nav--desktop{
    position: static;
  }
  .nav--mobile{
    display: none;
  }
}

/*============================================================================
  #Small Meganav
==============================================================================*/
.nav--mobile {
  .header-logo{
    padding: $gutter/2 0;
    text-align: center;
    a, img{
    display: inline-block;
    }
    .logo-image{
      max-width: 80%;
    }
  }
  .logo-wrapper{
    margin-left: 10%;
  }
  .mobile-wrapper{
    @include clearfix;
    position: relative;
  }
  .header-hamburger,
  .header-cart{
    position: absolute;
    top: 50%;
    z-index: 1000;
    margin-top:-12px;
    width: 25px;
    height: 25px;
  }
  .header-hamburger{
    right: 0;
    background: url("//www.celebrationbox.co.nz/cdn/shop/t/122/assets/nav.svg?v=26803026734522429501783259945") no-repeat left 0 center;
  }
  .header-cart{
    left: 0;
    background: url("//www.celebrationbox.co.nz/cdn/shop/t/122/assets/cart.svg?v=2150843169828136821783259944") no-repeat left 0 center;
  }
  .header-cart__bubble{
    position: absolute;
    top: 50%;
    margin-top: -14px;
    left: 19px;
    width: 12px;
    height: 12px;
    border-radius: 12px;
    background-color: $colorNavText;
    color: transparent;
  }
  .header-menu,
  .main-menu-dropdown{
    display: none;
  }
  .grandparent.main-menu--expanded > .main-menu-dropdown,
  .parent.main-menu--expanded > .main-menu-dropdown,
  .header-menu.main-menu--expanded{
    display: block;
  }
  .main-menu--expanded > a{
    color: $colorSplash;
  }
  /* Add padding for fat fingers */
  .nav-carat{
    padding-right: 9px;
    padding-left: 15px;
    float: right;
  }
  /* Show a plus to expand menu, minus to contract */
  .main-menu--expanded > .nav-carat{
    & > .plus{
      display: none;
    }
    & > .minus{
      display: block;
    }
  }
  .nav-carat .minus{
      display: none;
  }
  .main-menu li a{
    display: inline-block;
    padding-top: $gutter/2;
    padding-bottom: $gutter/2;
    @extend .uppercase;
  }
  .main-menu li{
    display: block;
    border-bottom: 1px solid rgba($colorNavBorder, .2);
    &.main-menu--expanded{
      border-bottom: none;
    }
  }
  @include at-query($max, $medium){
    .main-menu > li:nth-last-child(2){
      border-bottom: none;
    }
  }
  .main-menu-dropdown ul{
    margin-left: $gutter/2;
  }
  .meganav_image,
  .cart-text-link{
    display: none !important;
  }
  @include at-query($min, $medium){
    .mobile-wrapper{
      position: initial;
    }
    .header-hamburger{
      right: $gutter;
    }
    .header-cart{
      left: $gutter;
    }
    .header-cart__bubble{
      left: 19px + $gutter;
    }
    .header-menu{
      position: absolute;
      right: 0;
      background-color: $colorNav;
      z-index: 9000;
      border-left: 1px solid $colorNavBorder;
      border-bottom: 1px solid $colorNavBorder;
      min-width: 400px;
      padding: $gutter;
      &.main-menu--expanded{
        -webkit-animation-duration: 0.2s;
        animation-duration: 0.2s;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
        -webkit-animation-name: slideInRight;
        animation-name: slideInRight;
      }
    }
  }
}
/* ie8  icon replacement*/
.lt-ie9 .nav--mobile .header-hamburger{
  background: url("//www.celebrationbox.co.nz/cdn/shop/t/122/assets/nav.png?v=110023802000881813481783259865");
  background-position: right center;
  background-repeat: no-repeat;
}
.lt-ie9 .nav--mobile .header-cart{
  background: url("//www.celebrationbox.co.nz/cdn/shop/t/122/assets/cart.png?v=1716126564397997821783259479");
  background-position: left center;
  background-repeat: no-repeat;
}
.lt-ie9 .header-search .search-bar{
  background: url("//www.celebrationbox.co.nz/cdn/shop/t/122/assets/search.png?v=26650866564319548591783259915");
  background-position: right center;
  background-repeat: no-repeat;
}
.lt-ie9 .hero-image-overlay,
.lt-ie9 .collection-image-overlay{
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
}

@-webkit-keyframes slideInRight {
  from {
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
    visibility: visible;
  }

  100% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes slideInRight {
  from {
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
    visibility: visible;
  }

  100% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}


/*============================================================================
  #Large Meganav
==============================================================================*/
.nav--desktop {
  display: table;
  width: 100%;
  .header-logo{
    margin-bottom: 0;
  }
  .logo-wrapper, .mobile-wrapper {
    float:none;
    display: table-cell;
    vertical-align: middle;
  }
  .header-hamburger,
  .nav-carat,
  .header-cart__bubble{
    display: none !important;
  }
  .header-menu{
    text-align: right;
  }
  .main-menu {
    font-size: 1.1em * $accentFontAdjust;
    display: inline-block;
    & > li {
      display: inline-block;

      &:first-child a {
        margin-left: $gutter/3;
      }
      & > a {
        display: block;
        margin-left: $gutter;
        white-space: nowrap;
        @extend .uppercase;
      }
    }
  }
  .main-menu-dropdown {
    text-align: left;
    li{ padding-top: $gutter/4; }
  }

  /*================ Large MegaNav ================*/
  .grandparent > .main-menu-dropdown{
    display: none;
    position: absolute;
    background-color: $colorNav;
    width: 100%;
    left: 0;
    margin: 0;
    z-index: 5000;
    border-bottom: 1px solid $colorNavBorder;
  }
  .grandparent.hover > .main-menu-dropdown{
    display: block;
  }
  .grandparent > .main-menu-dropdown ul{
    max-width: $siteWidth;
    margin: 0 auto;
    padding: $gutter/3 $gutter 20px $gutter;
    @include clearfix();
    &:first-child{
      padding-left: 0;
    }
  }
  .grandparent > .main-menu-dropdown > ul > .parent > a{
    border-bottom: 1px solid $colorNavBorder;
    width: 100%;
    display: inline-block;
    padding-bottom: 17px;
    font-weight: $accentFontWeightBold;
  }
  .grandparent .parent .child a{
    @extend .uppercase;
  }
  .meganav_image_wrapper{
    float: right;
    padding-left: $gridGutter;
    padding-top: 10px;
  }
  .meganav_image{
    vertical-align:top;
    @include box-sizing();
    img{
      max-width: 100%;
      max-height: 500px;
    }
  }
  /* catch the cast where a grandparent has a child */
  .grandparent > .main-menu-dropdown > ul > .parent,
  .grandparent > .main-menu-dropdown > ul > .child{
    float: left;
    min-height: 1px;
    padding-left: $gridGutter;
    padding-top: 0px;
    vertical-align: top;
    @include box-sizing();
    & > a{
      @extend .uppercase;
    }
  }

  .kids-2.grandparent > .main-menu-dropdown > ul > li,
  .kids-1.grandparent > .main-menu-dropdown > ul > li{
    width: 50%;
    &:nth-child(2n+1){
      clear:both;
    }
  }
  .kids-3.grandparent > .main-menu-dropdown > ul > li,
  .kids-6.grandparent > .main-menu-dropdown > ul > li,
  .kids-9.grandparent > .main-menu-dropdown > ul > li{
    width: 33.333%;
    &:nth-child(3n+1){
      clear:both;
    }
  }
  .kids-4.grandparent > .main-menu-dropdown > ul > li,
  .kids-7.grandparent > .main-menu-dropdown > ul > li,
  .kids-8.grandparent > .main-menu-dropdown > ul > li{
    width: 25%;
    &:nth-child(4n+1){
      clear:both;
    }
  }
  .kids-5.grandparent > .main-menu-dropdown > ul > li,
  .kids-10.grandparent > .main-menu-dropdown > ul > li{
    width: 20%;
    &:nth-child(5n+1){
      clear:both;
    }
  }

  /*================ Large Dropdown ================*/
  .main-menu > .parent > .main-menu-dropdown{
    display: none;
    position: absolute;
    background-color: $colorNav;
    z-index: 5000;
    @extend .uppercase;
    padding: 0 $gutter ($gutter*.75) $gutter;
    border-bottom: 1px solid $colorNavBorder;
    border-left: 1px solid $colorNavBorder;
    border-right: 1px solid $colorNavBorder;
  }
  .main-menu > .parent:hover > .main-menu-dropdown,
  .main-menu > .parent.hover > .main-menu-dropdown{
    display: block;
  }
  .main-menu > .parent:first-child > .main-menu-dropdown{
    margin-left: -30px;
  }
}

/*============================================================================
 Gift Cards
==============================================================================*/

// Gift Card Colors
$borderColor: $colorPrimary;
$colorGiftText: #999; // note, this is always on a white background
$colorGiftBorder: $colorPrimary;

/*============================================================================
  #Base Styles
==============================================================================*/
.template-giftcard,
.template-giftcard body {
  background: $colorBody;

  a {
    text-decoration: none;
  }
}

.template-giftcard .wrapper {
  max-width: 588px;

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

.giftcard-header {
  padding: ($gutter * 2) 0;
  font-size: 1em;
  text-align: center;
  -webkit-animation: fadein 0.5s ease-in-out both 0.4s;
  animation: fadein 0.5s ease-in-out both 0.4s;
}

.shop-url {
  display: none;
}

.giftcard {
  -webkit-animation: slideup 0.8s ease-in-out;
  animation: slideup 0.8s ease-in-out
}

.giftcard__border {
  background-color: $colorGiftBorder;
  border-radius: 4px;
  border: 1px solid darken($colorGiftBorder, 5%);
  padding: 1em;
  -webkit-animation: container-slide 0.8s ease-in-out;
  animation: container-slide 0.8s ease-in-out
}

.giftcard__content {
  @include clearfix;
  background-color: #fff;
  color: $colorGiftText;
  border: 1px solid darken($colorGiftBorder, 5%);
  border-radius: 3px;
  -webkit-animation: cardslide 0.8s ease-in-out;
  animation: cardslide 0.8s ease-in-out;
}

.giftcard__header {
  @include clearfix;
  border-bottom: 1px solid $borderColor;
  padding: $gutter / 2;
}

.giftcard__title {
  float: left;
  margin-bottom: 0;
}

.giftcard__tag {
  display: block;
  float: right;
  background-color: lighten($colorGiftText, 10%);
  border: 1px solid transparent;
  color: #fff;
  padding: $gutter / 3;
  border-radius: 4px;
  font-size: 0.75em;
  text-transform: uppercase;
  letter-spacing: .05em;
  line-height: 1;
}

.giftcard__tag--active {
  background: transparent;
  color: $colorGiftText;
  border: 1px solid lighten($colorGiftText, 20%);
}

.giftcard__wrap {
  position: relative;
  margin: ($gutter / 2) ($gutter / 2) $gutter;

  img {
    position: relative;
    display: block;
    border-radius: 10px;
    z-index: 2;
  }

  &:before,
  &:after {
    content: "";
    position: absolute;
    width: 47px;
    height: 47px;
    z-index: 3;
  }

  &:before {
    background: url('/cdn/s/assets/gift-card/corner-top-left-2ba3edcd9e97ba146cd01a8161365c5e.svg') 0 0 no-repeat;
    top: -1px;
    left: -1px;
  }

  &:after {
    background: url('/cdn/s/assets/gift-card/corner-bottom-right-1fb9bf49ff9564325e6b7c0fb0a7ff45.svg') 0 0 no-repeat;
    bottom: -1px;
    right: -1px;
  }

  .lt-ie9 &:before,
  .lt-ie9 &:after {
    display: none;
  }
}

.giftcard__code {
  position: absolute;
  bottom: $gutter;
  text-align: center;
  width: 100%;
  z-index: 50;
}

.giftcard__code--medium {
  font-size: .875em;
}

.giftcard__code--small {
  font-size: .75em;
}

.giftcard__code__inner {
  display: inline-block;
  vertical-align: baseline;
  background-color: #fff;
  padding: .5em;
  border-radius: 4px;
  max-width: 450px;
  -webkit-box-shadow: 0 0 0 1px rgba(0,0,0,0.1);
  box-shadow: 0 0 0 1px rgba(0,0,0,0.1);

  .giftcard__code--small & {
    overflow: auto;
  }
}

.giftcard__code__text {
  font-weight: $bodyFontWeight;
  font-size: 1.875em;
  text-transform: uppercase;
  border-radius: 2px;
  border: 1px dashed $borderColor;
  padding: .4em .5em;
  display: inline-block;
  vertical-align: baseline;
  color: #777;
  line-height: 1;

  .disabled & {
    color: #999;
    text-decoration: line-through;
  }
}

.giftcard__amount {
  position: absolute;
  top: 0;
  right: 0;
  color: #fff;
  font-size: 2.75em;
  line-height: 1.2;
  padding: $gutter / 2;
  z-index: 50;

  strong {
    display: block;
    text-shadow: 3px 3px 0 rgba(0,0,0,0.1);
  }
}

.giftcard__amount--medium {
  font-size: 2em;
}

.tooltip {
  display: block;
  position: absolute;
  top: -50%;
  right: 50%;
  margin-top: 16px;
  z-index: 3;
  color: #fff;
  text-align: center;
  white-space: nowrap;
  -webkit-animation: popup 0.5s ease-in-out both 0.7s;
  animation: popup 0.5s ease-in-out both 0.7s;

  &:before {
    content: "";
    display: block;
    position: absolute;
    left: 100%;
    bottom: 0;
    width: 0;
    height: 0;
    margin-left: -5px;
    margin-bottom: -5px;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 5px solid #333;
    border-top: 5px solid rgba(51,51,51,0.9);
  }
}

.tooltip__label {
  display: block;
  position: relative;
  right: -50%;
  border: none;
  border-radius: 4px;
  background: #333;
  background: rgba(51,51,51,0.9);
  min-height: 14px;
  font-weight: $bodyFontWeight;
  font-size: 12px;
  text-decoration: none;
  line-height: 16px;
  text-shadow: none;
  padding: .5em .75em;
  margin-left: .25em;

  small {
    text-transform: uppercase;
    letter-spacing: .1em;
    color: #b3b3b3;
    font-size: .875em;
  }
}

.giftcard__instructions {
  text-align: center;
  margin: 0 ($gutter / 2) $gutter;
}

.giftcard__actions {
  position: relative;
  border-top: 1px solid $borderColor;
  padding: $gutter ($gutter / 2);
  text-align: center;
  overflow: hidden;
}

.action-link {
  position: absolute;
  left: $gutter / 2;
  top: 50%;
  font-size: 0.875em;
  font-weight: $bodyFontWeightBold;
  display: block;
  text-transform: uppercase;
  letter-spacing: .2em;
  color: lighten($colorGiftText, 10%);
  margin-top: -10px;

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

.action-link__print {
  display: inline-block;
  vertical-align: baseline;
  width: 17px;
  height: 17px;
  vertical-align: middle;
  margin-right: 5px;
  opacity: 0.25;
  background: {
    image: url('/cdn/s/assets/gift-card/icon-print-164daa1ae32d10d1f9b83ac21b6f2c70.png');
    repeat: no-repeat;
    position: 0 0;
  }

  .svg & {
    background-image: url('/cdn/s/assets/gift-card/icon-print-6a10b2fb86d223b8c783c9696eaf4c31.svg');
  }

  .action-link:hover & {
    opacity: 0.4;
  }
}

.giftcard__footer {
  text-align: center;
  padding: ($gutter * 2) 0;
  -webkit-animation: fadein 0.5s ease-in-out both 0.4s;
  animation: fadein 0.5s ease-in-out both 0.4s
}

.giftcard__icon {
  width: 45px;
  display: inline-block;
  vertical-align: baseline;
}

#QrCode {
  img {
    padding: $gutter;
    border: 1px solid $borderColor;
    border-radius: 4px;
    margin: 0 auto $gutter;
  }
}


/*============================================================================
  #Media Queries
==============================================================================*/

/*================ Medium-down width ================*/
@media screen and (max-width: 580px) {
  .giftcard {
    font-size: 12px;
  }

  .giftcard-header {
    padding: $gutter 0;
  }

  .header-logo {
    font-size: 2em;
  }

  .giftcard__border {
    padding: $gutter / 2;
  }

  .giftcard__actions {
    padding: $gutter / 2;
  }

  .giftcard__actions .btn {
    width: 100%;
    padding-left: 0;
    padding-right: 0;
  }

  .action-link {
    display: none;
  }
}

/*================ Small width ================*/
@media screen and (max-width: 400px) {
  .giftcard__amount strong {
    text-shadow: 2px 2px 0 rgba(0,0,0,0.1);
  }

  .giftcard__wrap:before,
  .giftcard__wrap:after {
    display: none;
  }

  .giftcard__code {
    font-size: .75em;
  }

  .giftcard__code--medium {
    font-size: .65em;
  }

  .giftcard__code--small {
    font-size: .55em;
  }
}


/*================ Small height ================*/
@media screen and (max-height: 800px) {
  .header-logo img {
    max-height: 90px;
  }
}


/*============================================================================
  #Print Styles
==============================================================================*/
@media print {
  @page {
    margin: 0.5cm;
  }

  p, h2, h3 {
    orphans: 3;
    widows: 3;
  }

  h2, h3 {
    page-break-after: avoid;
  }

  html, body {
    background-color: #fff;
  }

  .giftcard-header {
    padding: 10px 0;
  }

  .giftcard__content,
  .giftcard__border {
    border: 0 none;
  }

  .giftcard__actions,
  .giftcard__wrap:before,
  .giftcard__wrap:after,
  .tooltip,
  .add-to-apple-wallet {
    display: none;
  }

  .giftcard__title {
    float: none;
    text-align: center;
  }

  .giftcard__code__text {
    color: #555;
  }

  .shop-url {
    display: block;
  }

  .logo {
    color: #58686F;
  }
}

/*============================================================================
  #Keyframe Animations
==============================================================================*/
@-webkit-keyframes slideup {
  0% {
    opacity: 0;
    -webkit-transform: translateY(2000px) rotate(10deg)
  }

  60% {
    opacity: 1;
    -webkit-transform: translateY(-30px)
  }

  80% {
    -webkit-transform: translateY(10px)
  }

  100% {
    -webkit-transform: translateY(0) rotate(0deg)
  }
}

@-ms-keyframes slideup {
  0% {
    opacity: 0;
    -webkit-transform: translateY(2000px) rotate(10deg)
  }

  60% {
    opacity: 1;
    -webkit-transform: translateY(-30px)
  }

  80% {
    -webkit-transform: translateY(10px)
  }

  100% {
    -webkit-transform: translateY(0) rotate(0deg)
  }
}

@keyframes slideup {
  0% {
    opacity: 0;
    -webkit-transform: translateY(2000px) rotate(10deg)
  }

  60% {
    opacity: 1;
    -webkit-transform: translateY(-30px)
  }

  80% {
    -webkit-transform: translateY(10px)
  }

  100% {
    -webkit-transform: translateY(0) rotate(0deg)
  }
}

@-webkit-keyframes popup {
  0% {
    opacity: 0;
    -webkit-transform: translateY(30px)
  }

  60% {
    opacity: 1;
    -webkit-transform: translateY(-10px)
  }

  80% {
    -webkit-transform: translateY(2px)
  }

  100% {
    -webkit-transform: translateY(0)
  }
}

@-ms-keyframes popup {
  0% {
    opacity: 0;
    -webkit-transform: translateY(30px)
  }

  60% {
    opacity: 1;
    -webkit-transform: translateY(-10px)
  }

  80% {
    -webkit-transform: translateY(2px)
  }

  100% {
    -webkit-transform: translateY(0)
  }
}

@keyframes popup {
  0% {
    opacity: 0;
    -webkit-transform: translateY(30px)
  }

  60% {
    opacity: 1;
    -webkit-transform: translateY(-10px)
  }

  80% {
    -webkit-transform: translateY(2px)
  }

  100% {
    -webkit-transform: translateY(0)
  }
}

@-webkit-keyframes container-slide {
  0% {
    opacity: 0;
    -webkit-transform: rotate(0deg)
  }

  100% {
    -webkit-transform: rotate(0deg)
  }
}

@-ms-keyframes container-slide {
  0% {
    opacity: 0;
    -webkit-transform: rotate(0deg)
  }

  100% {
    -webkit-transform: rotate(0deg)
  }
}

@keyframes container-slide {
  0% {
    opacity: 0;
    -webkit-transform: rotate(0deg)
  }

  100% {
    -webkit-transform: rotate(0deg)
  }
}

@-webkit-keyframes fadein {
  0% {
    opacity: 0
  }

  100% {
    opacity: 100
  }
}

@-ms-keyframes fadein {
  0% {
    opacity: 0
  }

  100% {
    opacity: 100
  }
}

@keyframes fadein {
  0% {
    opacity: 0
  }

  100% {
    opacity: 100
  }
}

/*============================================================================
  #Tabs and mobile accordion
==============================================================================*/
.tabs-wrapper{
  padding-top: 30px;
}
.product-tabs{
  max-width: 100%;
}
ul.tabs {
  margin: 0px 0px 0px 0px;
  padding: 0px;
  list-style: none;
  display: inline-block;
  position: relative;
}
ul.tabs > li {
  background: none;
  color: $colorPrimary;
  display: inline-block;
  padding: 10px 0px;
  margin: 0rem 3rem 0rem 0rem;
  font-weight: $bodyFontWeight;
  cursor: pointer;
  vertical-align: bottom;
  border-bottom: 2px solid transparent;
  position: relative;
}
ul.tabs > li.current{
  border-bottom: 2px solid $colorBorder;
  color: #656565;
  font-weight: $bodyFontWeightBold;
}
ul.tabs > li:not(.current):after {
  content: '';
  display: inline-block;
  width: 10px;
  height: 10px;   
  background-image: url('//www.celebrationbox.co.nz/cdn/shop/t/122/assets/arrow.png?v=21143137855211281741783259473');
  background-size: contain;
  background-repeat: no-repeat;
  position: absolute;
  right: -25px;
  top: 50%;
  transform: translateY(-50%);
}
.tab-content{
  display: none;
  border-top:1px solid $colorBorder;
  padding: 15px 15px 15px 0px;
  min-height: 6rem;
}
.tab-content.current{
  display: inherit;
}
.accordion {
  border-bottom:1px solid $colorBorder;
}
.accordion-toggle {
  cursor: pointer;
  border-top: 1px solid $colorBorder;
  padding: 1rem 0;
  margin-bottom: auto;
  color: darken($colorPrimary, 10%);
}
.accordion-content {
  display: none;
  color: darken($colorPrimary, 10%);
  padding-bottom: $gutter;
}
.accordion-content.accordion--open{
  display: block;
}
.accordion .icon-minus, .accordion .icon-plus{
  float:right;
  color: $colorBorder;
}

/*============================================================================
  #Site Homepage
==============================================================================*/

.template-index .product__related{
  display: none;
}
.template-index .main-content{
  padding-bottom: 0px;
}

/*================ Spacing ================*/
.homepage-blog,
.homepage-product,
.homepage-columns,
.homepage-instagram,
.homepage-newsletter,
.homepage-collection{
  padding-top: $gutter*3;
  padding-bottom: $gutter*3;
}
.homepage-page{
  padding-top: $gutter*3;
  padding-bottom: $gutter*2;
}
.homepage-collection-grid{
  padding-top: $gutter*2;
  padding-bottom: $gutter*3;
}
.homepage-logos{
  padding-top: $gutter;
  padding-bottom: $gutter - 10px;
}
.homepage-logos.homepage-logos--tall{
  padding-top: $gutter*2;
  padding-bottom: $gutter*2;
}

.adjust--white + .adjust--white,
.adjust--light + .adjust--light,
.adjust--splash + .adjust--splash,
.adjust--dark + .adjust--dark{
  .homepage-page,
  .homepage-blog,
  .homepage-logos,
  .homepage-columns,
  .homepage-product,
  .homepage-newsletter,
  .homepage-collection,
  .homepage-collection-grid,
  .homepage-instagram{
    padding-top: 0px;
  }
}

.homepage-collection .product-grid-item{ margin-bottom: 0;
    min-height: 350px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-bottom: 50px; }


/*================ Titles ================*/
.home__title{
  @extend .title;
  margin-bottom: $gutter/2;
  @include at-query($max, $small){ font-size: 2em; }
}
.home__subtitle{
  @extend .h5--accent;
  font-weight: $accentFontWeightBold;
  text-align: center;
  opacity: 0.75;
  padding-bottom: $gutter/2;
  margin-bottom: $gutter;
  position: relative;
  &::after{
    content: "";
    margin: auto;
    width: 30px;
    height: 3px;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: black;
    opacity: 0.2;
  }
}

a .home__title,
a .home__subtitle{
  text-decoration: none;
}

.homepage-image.homepage--white a .home__title,
.homepage-image.homepage--white a .home__subtitle,
.homepage-image.homepage--white a .title--flex,
.homepage-image.homepage--white a .content--flex{
  color: #ffffff;
}
.homepage-image.homepage--light a .home__title,
.homepage-image.homepage--light a .home__subtitle,
.homepage-image.homepage--light a .title--flex,
.homepage-image.homepage--light a .content--flex{
  color: $colorHomeLight;
}
.homepage-image.homepage--splash a .home__title,
.homepage-image.homepage--splash a .home__subtitle,
.homepage-image.homepage--splash a .title--flex,
.homepage-image.homepage--splash a .content--flex{
  color: $colorSplash;
}
.homepage-image.homepage--dark a .home__title,
.homepage-image.homepage--dark a .home__subtitle,
.homepage-image.homepage--dark a .title--flex,
.homepage-image.homepage--dark a .content--flex{
  color: $colorHomeDark;
}
.homepage--dark .home__subtitle::after{
  background: #fff;
}


/*================ Colors ================*/
.homepage--white{
  background-color: #fff;
}
.homepage--light{
  background-color: $colorHomeLight;
}
.homepage--splash{
  background-color: $colorSplash;
}
.homepage--dark{
  background-color: $colorHomeDark;
}
.homepage-product .product-page{
  background-color: transparent;
}

.homepage-image.homepage--splash, .color-text.homepage--splash{ color: $colorSplash; background-color: transparent;}
.homepage-image.homepage--dark, .color-text.homepage--dark{ color: $colorHomeDark; background-color: transparent;}

.homepage-image.homepage--white{ color: #ffffff;  background-color: transparent; }
.homepage-image.homepage--light{ color: $colorHomeLight; background-color: transparent;}

.color-text.homepage--white, .color-text.homepage--light{ color: $colorTextBody; background-color: transparent; }

.homepage--splash,
.homepage--dark{
  color: #fff;
  .on-sale,
  .figcaption a,
  .js-qty__adjust,
  .ajaxcart__qty-adjust,
  .js-qty input[type="text"],
  .figcaption a .price_wrapper,
  .ajaxcart__qty input[type="text"],
  input, textarea, button, select{
    color: #fff;
  }
  .on-sale .compare-at{
    color: rgba(#fff, 0.5);
  }
  .btn--clear{
    color: white;
    border: 1px solid white;
  }
  .btn--clear.disabled {
    border: 1px solid rgba(#000, 0.3);
    color: rgba(#fff, 0.3);
  }
  .blog__article{
    background-color: #fff;
    color: $colorTextBody;
    border: none;
  }
}

.homepage--splash .blog__article .btn--splash{
  background-color: darken($colorSplash, 10%);
  &:hover{
    background-color: darken($colorSplash, 15%);
  }
}
.homepage-image.homepage--white .btn--clear {
  color: #fff;
  border: 1px solid #fff;
  &:hover, &:focus, &:active{
    color: #000;
    background-color: #fff;
  }
}
.homepage-image.homepage--light .btn--clear {
  color: $colorHomeLight;
  border: 1px solid $colorHomeLight;
  &:hover, &:focus, &:active{
    color: $colorHomeDark;
    background-color: $colorHomeLight;
  }
}

.homepage-image.homepage--splash .btn--clear{
  color: $colorSplash;
  border: 1px solid $colorSplash;
  &:hover, &:focus, &:active{
    color: #ffffff;
    background-color: $colorSplash;
  }
}
.homepage-image.homepage--dark .btn--clear {
  color: $colorHomeDark;
  border: 1px solid $colorHomeDark;
  &:hover, &:focus, &:active{
    color: #ffffff;
    background-color: $colorHomeDark;
  }
}

/*================ Shared Image Classes ================*/

.homepage-image{
  overflow: hidden;
  position: relative;
}
.background-size-cover{
  display: block;
  background-size: cover;
  background-position: center center;
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
}
.responsive-wide-image{
  width: 100%;
  display: block;
}
.content--centered{
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  width: 90%;
  left: 0;
  right: 0;
  margin: 0 auto;
  text-align: center;
  z-index: 100;
  max-width: $siteWidth - $gutter*2;
}
.ie9 .content--centered{
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
.use_screen_full{ height: 100vh; }
.use_screen_three_quarters{ height: 75vh; }
.use_screen_two_thirds{ height: 66vh; }
.use_screen_one_half{ height: 50vh; }
.use_screen_one_third{ height: 33vh; }
.use_screen_one_fifth{ height: 20vh; }

.image--flex{
  display: block;
  width: 50%;
  margin: 0 auto;
}

.title--flex{
  margin-bottom: 0.5em;
  @extend .title;
  margin-bottom: $gutter/2;
}
.content--flex{
  margin-bottom: 1.5em;
  font-weight: $bodyFontWeight;
  font-size: em(18px * $bodyFontAdjust);
  @include at-query ($max, $small) {
    font-size: em(16px * $bodyFontAdjust);
  }
}
@include at-query($max, $medium){
  .content--centered .btn--large{
    padding: 8px 10px;
    font-size: em(16px * $accentFontAdjust);
  }
}
.image-overlay{
  position: absolute;
  top:0;
  bottom:0;
  left:0;
  right:0;
  z-index: 10;
}
.homepage--white .image-overlay,
.homepage--light .image-overlay{
  background-color: #000;
}
.homepage--splash .image-overlay,
.homepage--dark .image-overlay{
  background-color: #FFF;
}
.image-overlay-0{  opacity: 0;}
.image-overlay-5{  opacity: 0.05;}
.image-overlay-10{ opacity: 0.10;}
.image-overlay-15{ opacity: 0.15;}
.image-overlay-20{ opacity: 0.20;}
.image-overlay-25{ opacity: 0.35;}
.image-overlay-30{ opacity: 0.30;}
.image-overlay-35{ opacity: 0.35;}
.image-overlay-40{ opacity: 0.40;}
.image-overlay-45{ opacity: 0.45;}
.image-overlay-50{ opacity: 0.50;}
.image-overlay-55{ opacity: 0.55;};
.image-overlay-60{ opacity: 0.60;}
.image-overlay-65{ opacity: 0.65;}
.image-overlay-70{ opacity: 0.70;}
.image-overlay-75{ opacity: 0.75;}
.image-overlay-80{ opacity: 0.80;}
.image-overlay-85{ opacity: 0.85;}
.image-overlay-90{ opacity: 0.90;}
.image-overlay-95{ opacity: 0.95;}
.image-overlay-100{ opacity: 1;}

.placeholder-svg {
  fill: #b4b6b9;
  background-color: #f4f4f4;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
}
.homepage-logos .placeholder-svg {
  background-color: #f7f7f7;
  display: block;
}





/*================ Video ================*/

.homepage-video__play{
  margin-top: .5em;
}

.homepage-video__play{
  @include at-query($max, $medium){
    .icon-play{
      height: 80px;
      width: 66px;
      background-size: 66px 66px;
    }
  }
  opacity: 1;
  @include transition(opacity 0.2s ease-out);
  &:hover{
    opacity: 0.75;
  }
  &:focus,
  &:active{
    outline: none;
  }
}

/*=== Hero Scroll ==*/
.index-sections > .shopify-section:not(:first-child) .scroll_icon_wrap{
  display: none;
}

.scroll_icon_wrap {
  text-align: center;
  position: absolute;
  margin-left: auto;
  margin-right: auto;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 400;
  @include at-query($max, $small){
    display: none;
  }
}
.scroll_link{
  display: block;
  position: absolute;
  text-align: center;
  left: 50%;
  width: 250px;
  margin-left: -125px;
  bottom: 0px;
  padding-bottom: 20px;
  padding-top: 20px;
  height: 60px;
  &:hover .scroll_icon{
    opacity: 1;
  }
  &:focus{
    outline: none;
  }
}

.scroll_icon {
  opacity: 0.7;
  position: absolute;
  left: 50%;
  bottom: 20px;
  margin-left: -25px;
  zoom: 50%;
  -moz-transform:scale(0.5);
}

.homepage-image .scroll__link{
  position: absolute;
  bottom: 0;
}

.bloop {
  -webkit-transform-origin: center bottom;
  transform-origin: center bottom;
  animation: bloop 1.8s infinite;
  -webkit-animation: bloop 1.8s infinite;
}
@-webkit-keyframes bloop {
  from, 20%, 30%, 40%, 50%, 60%, to {
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
  }

  15% {
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-out;
    -webkit-transform: translate3d(0, -12px, 0);
    transform: translate3d(0, -12px, 0);
  }

  25% {
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
    -webkit-transform: translate3d(0,6px,0);
    transform: translate3d(0,6px,0);
  }
  35% {
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-out;
    -webkit-transform: translate3d(0,-3px,0);
    transform: translate3d(0,-3px,0);
  }
  45% {
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-in;
    -webkit-transform: translate3d(0,2px,0);
    transform: translate3d(0,2px,0);
  }
}
@keyframes bloop {
  from, 20%, 30%, 40%, 50%, 60%, to {
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
  }

  15% {
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-out;
    -webkit-transform: translate3d(0, -12px, 0);
    transform: translate3d(0, -12px, 0);
  }

  25% {
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
    -webkit-transform: translate3d(0,6px,0);
    transform: translate3d(0,6px,0);
  }
  35% {
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-out;
    -webkit-transform: translate3d(0,-3px,0);
    transform: translate3d(0,-3px,0);
  }
  45% {
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-in;
    -webkit-transform: translate3d(0,2px,0);
    transform: translate3d(0,2px,0);
  }
}

/*=============== Columns ===============*/

.home--uppercase{
  opacity: 0.75;
}
@include at-query ($max, $small) {
  .homepage-columns .grid__item:not(:last-child) a.btn{
    margin-bottom: 40px;
  }
}

/*=============== Image Columns ===============*/

.homepage-double{
  background-color: $colorBody;
}
.homepage-double form{
  margin-bottom: 0;
}
.double__block{
  position: relative;
  overflow: hidden;
  .home__subtitle{
    text-align: inherit;
    margin-bottom: $gutter/2 + 2px;
  }
  .content--centered{
    max-width: $siteWidth/2 - $gutter*2;
  }
}
.homepage-double .double__block{
  height: 100%;
}

.double__block .text-left .home__subtitle::after{ right: initial; }
.double__block .text-right .home__subtitle::after{ left: initial; }

@include at-query ($max, $small) {
  .homepage-double.use_screen_full{ height: auto; .double__block{ height: 100vh; } }
  .homepage-double.use_screen_three_quarters{ height: auto; .double__block{ height: 66vh; } }
  .homepage-double.use_screen_two_thirds{ height: auto; .double__block{ height: 66vh; } }
  .homepage-double.use_screen_one_half{ height: auto; .double__block{ height: 50vh; } }
  .homepage-double.use_screen_one_third{ height: auto; .double__block{ height: 33vh; } }
  .homepage-double.use_screen_one_fifth{ height: auto; .double__block{ height: 20vh; } }
}

.rte--homepage{
  font-size: 1.2em * $bodyFontAdjust;
  margin-bottom: 0;
}


/*============================================================================
Collection grid section
==============================================================================*/
.collection-grid-item {
  position: relative;
  width: 100%;
  min-height: 265px;
  margin-top: 30px;
  @include at-query($max, $medium) {
    padding: 0 30;
  }
}

.collection-grid--single{
  @include at-query($min, $large) {
    margin-left: 25%;
  }
}

.collection-grid-item__overlay {
  position: relative;
  display: block;
  height: 100%;
  width: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  @include transition(transform 1.1s ease-out);
}

.collection-grid-item__content{
  @extend .content--centered;
  .home__title{
    margin-bottom: 1.2em;
  }
  .home__title, .btn {
    @include transition(transform .15s ease-out);
  }
}

.collection-grid-item__link {
  border: 2px solid transparent;
  position: absolute;
  overflow: hidden;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  &:focus {
    border-color: rgba(0, 0, 0, 0.1);
  }
  &:hover,
  &:focus {
    .collection-grid-item__overlay{
      @include transform(scale(1.05));
    }
    .btn{
        -webkit-transform: translateY(-2px);
        -ms-transform: translateY(-2px);
        transform: translateY(-2px);
    }
    .home__title{
        -webkit-transform: translateY(2px);
        -ms-transform: translateY(2px);
        transform: translateY(2px);
    }
  }
}

// trigger button hover state on card hover
.collection-grid-item__link {
  &:hover,
  &:focus {
    .btn--splash{
      background-color: darken($colorSplash, 10%);
    }
    .btn--outline{
      color: $colorHomeDark;
    }
  }
}
.homepage-image.homepage--white .collection-grid-item__link{
  &:hover,
  &:focus {
    .btn--clear{
      color: #000;
      background-color: #fff;
    }
  }
}
.homepage-image.homepage--light .collection-grid-item__link{
  &:hover,
  &:focus {
    .btn--clear{
      color:  $colorHomeDark;
      background-color: $colorHomeLight;
    }
  }
}
.homepage-image.homepage--splash .collection-grid-item__link{
  &:hover,
  &:focus {
    .btn--clear{
      color: #ffffff;
      background-color: $colorSplash;
    }
  }
}
.homepage-image.homepage--dark .collection-grid-item__link{
  &:hover,
  &:focus {
    .btn--clear{
      color: #ffffff;
      background-color: $colorHomeDark;
    }
  }
}

/*================ Page ================*/
.homepage-page{
  hr{
    width: 75%;
    margin-left: 12%;
  }
}
.homepage-page__content{
  text-align: center;
  font-size: 1.2em * $bodyFontAdjust;
  margin-bottom: 30px;
}

/*================ Newsletter ================*/

.homepage-newsletter .newsletter-form .input-group-field{
  color: $colorTextBody;
}

/*================ Instagram ================*/

.instagram--square{
  position: absolute;
  display: block;
  border-width: 1px;
  border-style: solid;
  background-size: cover;
  background-position: center center;
  overflow: hidden;
}
@mixin instagram-squares($namespace:"") {
  .instagram--square.#{$namespace}one-half        { width: 50%; height: 50vw; }
  .instagram--square.#{$namespace}one-third       { width: 33.333%; height: 33.333vw; }
  .instagram--square.#{$namespace}one-quarter     { width: 25%; height: 25vw; }
  .instagram--square.#{$namespace}one-fifth       { width: 20%; height: 20vw; }
  .instagram--square.#{$namespace}one-sixth       { width: 16.666%; height: 16.666vw; }
}
@each $name in $breakpoint-has-widths {
  @include grid-media-query($name) {
    @include instagram-squares('#{$name}--');
  }
}
.homepage--dark .instagram--square{ border-color: $colorHomeDark; }
.homepage--light .instagram--square{ border-color: $colorHomeLight; }
.homepage--splash .instagram--square{ border-color: $colorSplash; }
.homepage--white .instagram--square{ border-color: #fff; }


.homepage-instagram{
  .grid-uniform{
    margin-left: 0;
  }
  a{
    position: relative;
    color: white;
    text-align: center;
    font-size: 2em;
  }
  a:hover::after{
    content:'';
    background-color: black;
    position: absolute;
    opacity: 0.5;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100;
  }
  .icon{
    position: absolute;
    z-index: 200;
    bottom: 5px;
    width: 27px;
    height: 27px;
    left: 50%;
    margin-left: -12px;
    opacity: 0;
    @include transition(all .2s ease-out);
  }
  a:hover .icon{
    opacity: 1;
    bottom: 47%;
  }
  a img{
    display: block;
  }
}

.homepage-instagram .placeholder-svg{
  vertical-align: middle;
  border-bottom: 1px solid #fff;
  border-right: 1px solid #fff;
}


/*================ Logos ================*/

.logo-bar {
  text-align: center;
  margin-top: -10px;
}

.logo-bar__item {
  display: inline-block;
  vertical-align: middle;
  width: 160px;    // logo width
  margin: 10px 30px;   // logo spacing
  @include at-query ($max, $small) {
    width: 110px;    // logo width
    margin: 10px 10px;   // logo spacing
  }
}

.logo-bar__image {
  display: block;
  margin: 0 auto;
  max-width: 100%;
}

.logo-bar__link {
  display: block;
}


/*============================================================================
  # Home slideshow
==============================================================================*/
.slideshow__slide{
  position: relative;
}

.slideshow__slide img {
  max-width: 100%;
}

.use_screen_full .slideshow__slide{ height: 100vh; }
.use_screen_three_quarters .slideshow__slide{ height: 75vh; }
.use_screen_two_thirds .slideshow__slide{ height: 66vh; }
.use_screen_one_half .slideshow__slide{ height: 50vh; }
.use_screen_one_third .slideshow__slide{ height: 33vh; }
.use_screen_one_fifth .slideshow__slide{ height: 20vh; }

.homepage-slideshow.use_screen_full{ min-height: 100vh; }
.homepage-slideshow.use_screen_three_quarters{ min-height: 75vh; }
.homepage-slideshow.use_screen_two_thirds{ min-height: 66vh; }
.homepage-slideshow.use_screen_one_half{ min-height: 50vh; }
.homepage-slideshow.use_screen_one_third{ min-height: 33vh; }
.homepage-slideshow.use_screen_one_fifth{ min-height: 20vh; }

.background-size-cover--slide{
  display: block;
  background-size: cover;
  background-position: center center;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 1;
}

.button-image-slide{
  display: block;
  width: 100%;
  &:focus {
    outline: 0;
    opacity: 0.8;
    padding-top: 2px;
  }
}

.homepage--white.slick-arrow:before{ color: #ffffff; }
.homepage--light.slick-arrow:before{ color: $colorHomeLight; }
.homepage--splash.slick-arrow:before{ color: $colorSplash; }
.homepage--dark.slick-arrow:before{ color: $colorHomeDark; }

.slideshow__slide .content--centered{
  padding-left: 40px;
  padding-right: 40px;
}


/*================ Map ================*/

.map-section--display-map .map-section__image {
  display: none !important;
}

.map-section--load-error {
  @include at-query($min, $large) {
    width: 50%;
    margin: 0 auto;
  }

  .errors {
    width: 100%;
  }
}

.map-section__container{
  min-height: 100%;
}



.no-js .lazy-image{
  display: none;
}
.no-js .homepage-slideshow,
.no-js .homepage-image:not(.double__block){
  height: auto !important;
}


/*============================================================================
  #Site Footer
==============================================================================*/
.site-footer-wrapper {
  position: relative;
  background-color: $colorFooterBg;
  color: $colorFooterText;
  text-align: left;
  hr {
    border-top: 1px solid rgba($colorFooterText, 0.5);
  }
  a{
    color: $colorFooterText;
    &:hover{
      color: rgba($colorFooterText, 0.9);
    }
  }
}
.footer-logo{
  position: absolute;
  left: 50%;
  img {
    max-width: 120px;
    max-height: 80px;
  }
}
.footer-logo img{
  z-index: 100;
  position: relative;
}
.site-footer {
  padding-top: $gutter*2;
  padding-bottom: $gutter;
}
.lt-ie9 .site-footer{
  border-top: $gutter*2 solid $colorFooterBg;
}
.footer-quicklinks li{
  margin: 0 0 $gutter/2 0;
}

.footer-secondary,
.footer-quicklinks{
  @extend .h6--accent;
  a{
    text-decoration: none;
    &:hover,
    &:active,
    &:focus{
      text-decoration: underline;
    }
  }
}

.footer-secondary-wrapper{
  text-align: center;
  position: relative;
}
.footer-secondary{
  margin-bottom: 0;
}
.footer-social,
.footer-payment{
  @extend .uppercase;
  margin-bottom: 0px;
  display: inline-block;
  a{
    text-decoration: none;
  }
  @include at-query ($max, $large) {
    margin: $gutter 0 0 0;
    text-align: center;
  }
}
.footer-secondary{
  li{ margin: $gutter*1.5 $gutter/2 0 $gutter/2; }
}
.footer-social, .footer-payment{
  li{ margin: $gutter*1.5 $gutter/4 0 $gutter/4; }
}
@include at-query ($max, $small) {
  .footer-social, .footer-payment, .footer-secondary{
    line-height: 2.5em;
    li{ margin: 5px 5px 0 5px; }
  }
}

.newsletter-form{
  padding: 5px;
  border-radius: $radius;
  border: 1px solid $colorBorder;
  background-color: $colorBody;
  input{
    border: none;
    &:active,
    &:focus{
      border:none;
      box-shadow: none;
    }
  }
}
.footer .newsletter-form{
  border: 1px solid darken($colorFooterBg, 20%);
}

.input-group.newsletter-form .input-group-btn .btn{
  border-radius: $radius;
}


/*============================================================================
  #Product and Collection Grids
==============================================================================*/

.on-sale {
  color: $colorSplash;
  .compare-at{
    margin-top: $gutter/2;
    text-decoration: line-through !important;
    color: rgba( $colorPrimary, 0.5);
  }
}

.figcaption a{
  text-decoration: none;
}

.product__price{
  @include at-query ($max, $medium){
    margin-top: $gutter;
    margin-bottom: $gutter/2;
  }
  @include at-query ($min, $medium){
    margin-bottom: $gutter/2;
  }
}

.add-to-cart__wrapper{
  margin-top: 2.7em;
}

.product-form-errors {
  color: red;
}

.product__arrows{
  padding-bottom: $gutter;
}

.product-grid-item {
  display: block;
  position: relative;
  margin-bottom: $gutter;
}

a .price_wrapper{
  color: $colorTextBody;
  position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
}

.product__related{
  margin-bottom: $gutter*2;
}


/*================ Collection ================*/


.product-grid-item .figcaption.hover .price_wrapper p,
.product-grid-item .figcaption.hover .name_wrapper p {
  margin-bottom: $gutter/4;
}
@include at-query ($max, $large) {
  .product-grid-item .figcaption.hover{
    position: relative;
    padding: $gutter/2 0;
  }
}

@include at-query ($min, $large) {
  .product-grid-item .figcaption.hover .price_wrapper p,
  .product-grid-item .figcaption.hover .name_wrapper p{
    margin-bottom: $gutter/4;
  }
  .product-grid-item .figcaption.hover{
    padding: $gutter/2 0;
  }
  .product-grid-item .figcaption.hover .price_wrapper{
    opacity: 0;
    -ms-transform: translate(0px,10px); /* IE 9 */
    -webkit-transform: translate(0px,10px); /* Safari */
    transform: translate(0px,10px);
    -webkit-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;
  }
  .product-grid-item:hover .figcaption.hover .price_wrapper{
    opacity: 1;
    -ms-transform: translate(0px,0px); /* IE 9 */
    -webkit-transform: translate(0px,0px); /* Safari */
    transform: translate(0px,0px);
  }
  .lt-ie9 .product-grid-item .figcaption.hover .price_wrapper{
    opacity: 1;
  }
}

.product-grid-item .figcaption.under{
  position: relative;
  padding: $gutter/2 0;
  min-height: 150px;
}

label.quatity-selector{
  position: absolute;
  top: -20px;
}

@function set-accent-text-color($color) {
  @if (lightness($color) > 80) {
    @return $colorTextBody; // Lighter backgorund, return dark color
  } @else {
    @return #ffffff; // Darker background, return light color
  }
}
.sticker{
  @extend .uppercase;
  float:left;
  position: absolute;
  left: 0;
  top: 0;
  padding: 5px;
  background: $colorSplash;
  color: set-accent-text-color($colorSplash);
  z-index: 400;
}

.share__link{
  @extend .uppercase;
}

/*=== Sensible heights for product grid images ===*/
.product-grid-item{
  text-align: center;
}

.lazy-image{
  display: block;
  position: relative;
  background-size: cover;
}

.lazy-image img {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
}

.fade-in.lazyloaded {
  opacity: 1;
}

.fade-in {
  opacity: 0;
  -webkit-transition: opacity .25s ease-in-out;
  -moz-transition: opacity .25s ease-in-out;
  -o-transition: opacity .25s ease-in-out;
  transition: opacity .25s ease-in-out;
}

.supports-no-touch .double__image{
  .collection__image__bottom{ opacity: 0; }
  &:hover{
    .collection__image__bottom{ opacity: 1; }
  }
}
.supports-touch .collection__image__bottom{
  display: none;
}

.collection__image__bottom{
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center center;
  overflow: hidden;
  -webkit-transition: opacity .25s ease-in-out;
  -moz-transition: opacity .25s ease-in-out;
  -o-transition: opacity .25s ease-in-out;
  transition: opacity .25s ease-in-out;
}

/*============================================================================
  #Collections
==============================================================================*/
.collection{
  background: $colorBody;
  padding-top: $gutter*2;
  padding-bottom: $gutter*4;
  .main-content{ padding-bottom: 0; }
}
.template-collection .main-content{
  padding-bottom: 0;
}
.toggle-filters{
  border-color: $colorBorder;
  margin-bottom: $gutter/2;
  img{ display: block; }
}

/* toggle collection sidebar */

@include at-query ($max, $medium) {
  .collection__sort select{
    font-size: 16px !important;
    text-transform: none;
    letter-spacing: 0px;
  }
  .collection__sort label{
    display: none;
  }
  .collection-filters {
    display: none;
  }
  .collection-sidebar{
    padding-top: 0;
  }
}

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


/* Set thickness of active-state marker */
$borderThickness: 3px;
$borderSpacing: 10px;
.collection-nav{
  margin-bottom: $gutter;
  .collection-nav--active > a{
    border-left: $borderThickness solid $colorBorder;
  }
  & > li{
    margin-bottom: $gutter/3;
    padding: 0px;
    a{
      @extend .uppercase;
      padding-left: $gutter/3;
      margin-left: ($borderSpacing + $borderThickness) * -1;
      text-decoration: none;
      border-left: $borderThickness solid transparent;
      &:hover{
        border-left: $borderThickness solid $colorSplash;
      }
    }
  }
  @include at-query($max, $medium){
    border-top: 1px solid $colorBorder;
    margin-top: $borderSpacing;
    padding-top: $borderSpacing;
  }
}

.collection-nav--child{
  margin-left: $borderSpacing + $borderThickness;
  & > li{
    margin-bottom: $gutter/4;
    & > a{
      border-left: $borderThickness solid rgba($colorBorder, 0.2);
    }
  }
}

.collection-list-item:not(first-child){
  border-bottom: 1px solid $colorBorder;
  padding-top: $gutter*2;
}

.product-list-item{
  margin-bottom: 10px;
}

/*============================================================================
  #Breadcrumbs
==============================================================================*/
.breadcrumb {
  margin-bottom: $gutter;
  margin-top: 0 - $gutter;
  font-size: em(14px * $accentFontAdjust);
  @extend .h6--accent;
  a,
  span {
    display: inline-block;
    padding: ($gutter / 2) 7px ($gutter / 2) 0;
    margin-right: 7px;
    text-decoration: none;
    &:first-child {
      padding-left: 0;
    }
  }
  a:hover{
    text-decoration: underline;
  }
}


/*============================================================================
  #Product Page
==============================================================================*/
.template-product .main-content{
  padding-bottom: 0;
}
.template-product .product-section > .wrapper:last-of-type{
  padding-bottom: 120px;
}

.product-page{
  padding-top: $gutter*2;
  padding-bottom: $gutter;
  background-color: $colorProductBg;
}
.selector-wrapper select,
.product-form__variants{
  margin: 0 auto 2em auto;;
  border-left: none;
  border-right: none;
  border-top: none;
  border-radius: 0px;
  text-align-last:center;
  padding-left: 28px;
}
.product-form__variants {
  display: none;
  .no-js  & {
    display: block;
  }
}
.selector-wrapper label, .quantity-selector__wrapper label{
  margin-top: 3em;
  text-align: center;
  @extend .uppercase;
}
.variant--soldout .quantity-selector__wrapper,
.variant--unavailabe .quantity-selector__wrapper{
  opacity: 0;
  label, input, button{
    cursor: default;
  }
}
.quantity-selector__wrapper{
  transition: opacity 0.4s ease-out;
}

.product__slides{
  margin-bottom: $gutter;
  overflow-y: hidden;
  a, img {
    display: block;
    margin: 0 auto;
  }
  li {
    margin-bottom: $gutter;
  }
}
.product__slides .product__photo--additional{ display: none; }
.product__slides.slick-initialized .product__photo--additional{ display: block; }

.product-form label{
  @extend .title;
  margin-top: 2em;
}
.share{
  padding-bottom: $gutter;
  padding-top: $gutter;
}
.share__link{
  text-decoration: none;
  margin-left: $gutter/2;
  margin-right: $gutter/2;
}
.border-bottom-link {
  text-decoration: none;
  cursor: pointer;
  border-bottom: 1px solid $colorBorder;
  padding-bottom: 3px;
  &:hover{
    border-bottom: 1px solid darken($colorBorder, 10%);
  }
}
.product-description--below{
  margin-top: $gutter*2;
}

// video button
.product__photo{
  position: relative;
}
.product__play .icon{
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -50px;
  margin-left: -50px;
}
.product__play{
  position: absolute;
  top:0;
  bottom:0;
  left:0;
  right:0;
  opacity: 1;
  @include transition(opacity 0.2s ease-out);
  &:hover{
    opacity: 0.75;
  }
}

/*============================================================================
  #Blogs and Comments
==============================================================================*/
.blog{
  background-color: $colorBody;
  padding-bottom: $gutter*4;
}
.template-blog .main-content{
  padding-bottom: 0;
}

.template-article .background-size-cover,
.template-article .use_image{
  z-index: -1;
}

.blog__link{
  text-decoration: none;
  color: inherit;
  .blog__article--image .blog__article__title,
  .blog__article__title,
  .blog__article__text{
    @include transition(transform .15s ease-out);
  }
  .blog__article__overlay {  @include transition(transform 1.1s ease-out); }
  &:hover{
    color: inherit;
    .blog__article__title{ color: darken($colorSplash, 20%); }
    .blog__article--image .blog__article__title{
      -webkit-transform: translateY(-10px);
      -ms-transform: translateY(-10px);
      transform: translateY(-10px);
    }
    .blog__article__overlay{
      @include transform(scale(1.05));
    }
    .blog__article__text{
        -webkit-transform: translateY(-2px);
        -ms-transform: translateY(-2px);
        transform: translateY(-2px);
    }
    .blog__article__title{
        -webkit-transform: translateY(2px);
        -ms-transform: translateY(2px);
        transform: translateY(2px);
    }
  }
}

.blog__article{
  border: 1px solid  rgba(#000, 0.1);
  box-shadow: 1px 1px 7px rgba(#000, 0.1);
  border-radius: $radius;
  padding: $gutter;
  margin-bottom: $gutter;
  @include at-query ($max, $small) {
    padding-left: $gutter/2;
    padding-right: $gutter/2;
  }
  .btn--full{
    margin-bottom: ($gutter + 5px) * -1;
    border-top-right-radius:0;
    border-top-left-radius:0;
  }
  .share{
  padding-top: $gutter/2;
  padding-bottom: 0px
  }
}

.blog__article-header-image{
  background-size: cover;
  background-position: center center;
  position: relative;
  z-index: 0;
  padding: $gutter*6 $gutter $gutter $gutter;
  margin-top: $gutter*-1;
  @extend .banner;
  color: #fff;
  @include at-query ($max, $small) {
    padding: $gutter*3 $gutter/2 $gutter/2 $gutter/2;
  }
  a{ color: #fff; }
  &:after {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.65) 100%);
    background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%);
    background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6000000',GradientType=0 );
  }
}

.blog__article--over-image{
  border: none;
  margin-top: -140px;
  background-color: #fff;
  z-index: 100;
  position: relative;
  @include at-query ($max, $medium) {
    margin-top: -100px;
  }
}

.blog__article--card{
  margin-top: $gutter;
  margin-bottom: 0;
  box-shadow: none;
  border-radius: 0;
}
.blog .blog__article--card{
  margin-top: 0;
  margin-bottom: $gutter;
}
.blog__article--image{
  position: relative;
  overflow: hidden;
  border: none;
}
.blog__article__overlay{
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
  background-size: cover;
  background-position: center center;
  border: none;
  &:after {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.65) 100%);
    background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%);
    background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6000000',GradientType=0 );
  }
}
.blog__article__content{
  margin-top: $gutter/2;
}
.blog__article--card .blog__article__content{
  margin: 0;
  min-height: 200px;
}
.blog__article--image .blog__article__content{
  display: table;
  .blog__article__title{
    position: relative;
    display: table-cell;
    vertical-align: bottom;
    color: white;
    a{ color: white; }
  }
}

.banner,
.blog__article .btn--full{
  margin-left: $gutter * -1;
  width: calc(100% + 60px);
  position: relative;
  max-width: none;
  @include at-query ($max, $small) {
    width: calc(100% + 30px);
    margin-left: $gutter / -2;
  }
}

.blog__article header{
  text-align: center;
  margin-bottom: $gutter;
  .blog__article--light{
    opacity: 0.6;
  }
}
.blog__article footer{
  margin-bottom: $gutter;
}
.blog__sidebar{
  position: relative;
}
.template-article .blog__sidebar{
  position: relative;
  margin-top: 40px;
}
.blog__rss{
  position:absolute;
  top:5px;
  right: 0;
}
.blog__comments{
  text-decoration: none;
  em{ color: rgba($colorPrimary, 0.5); }
  &:hover{
    text-decoration: underline;
  }
}
.blog__tag{
  text-decoration: none;
  position: relative;
  color: $colorBody;
  background-color: $colorSplash;
  border-radius: $radius;
  padding: $gutter/6 $gutter/6 $gutter/6 $gutter/2;
  margin-bottom: $gutter/2;
  margin-bottom: 3px;
  display: inline-block;
  @extend .uppercase;
  &:before{
    content: '';
    width: 5px;
    height: 5px;
    border-radius: 10px;
    position: absolute;
    top: 11px;
    left: 5px;
    background-color: $colorBody;;
  }
}

.comment {
  margin-bottom: $gutter;
  & + & {
    border-top: 1px solid rgba($colorBorder, 0.1);
    padding-top: $gutter;
  }
}




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

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

  &:first-child {
    padding-top: 0;
    border-top: 0 none;
  }
  a{
    text-decoration: none;
  }
  .js-qty {
    margin: 0;
  }
}
@include at-query ($min, $large) {
  .cart__row--table-large {
    display: table;
    table-layout: fixed;
    width: 100%;

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

  img {
    display: block;
  }
}
.cart__subtotal {
  margin: 0 0 0 ($gutter / 3);
  display: inline;
}
.cart__mini-labels {
  display: block;
  margin: ($gutter / 3) 0;
  font-size: em(12px * $bodyFontAdjust);

  @include at-query ($min, $large) {
    display: none;
  }
}
.cart__remove {
  display: block;
}
.cart__footer{
  text-align: right;
}
.cart__instructions__label{
  text-align: left;
}
.hidden-count{
  display: none;
}

.additional-checkout-buttons {
  margin: 20px 0;
  padding: 8px;
  background-color: darken($colorBody, 2%);
  border: 1px solid darken($colorBody, 5%);
  text-align: right;

  & > *:not(script) {
    padding: 12px 0 0 5px;
    vertical-align: top;
    line-height: 1;

    &:first-child,
    &:empty {
      padding-left: 0px;
    }
  }
  @include at-query ($min, $small) {
    padding: 18px 18px 8px 18px;
  }
}



.ajaxcart .additional-checkout-buttons{
  margin: 0;
  padding: 0;
  background-color: darken($colorSplash, 20%);
  border: none;
  text-align: center;
  min-height: 0;
  & > *:not(script) {
    margin-top: 8px;
    margin-bottom: 8px;
  }
}


/*============================================================================
  #Quantity Selectors
==============================================================================*/
.ajaxcart--hide{
  opacity: 0;
}

.js-qty {
  position: relative;
  margin-bottom: 1em;
  max-width: 103px;
  min-width: 75px;
  overflow: visible;
  @include backface(hidden);

  input[type="text"] {
    display: block;
    background: none;
    text-align: center;
    width: 100%;
    padding: 5px 30px;
    margin: 0;
  }
}

.product-single .js-qty{
  margin-left: auto;
  margin-right: auto;
}

.js-qty__adjust {
  cursor: pointer;
  position: absolute;
  display: block;
  padding: 0 12px;
  top: 0px;
  bottom: 0px;
  border: 0 none;
  background: none;
  text-align: center;
  overflow: hidden;
  -webkit-user-select: none;
  -moz-user-select:    none;
  -ms-user-select:     none;
  -o-user-select:      none;
  user-select:         none;
  @include transition(all 0.2s ease-out);

  &:hover,
  &:focus {
    color: $colorSplash;
    outline: none;
  }

  &:active {
    color: darken($colorSplash, 20%);
    outline: none;
  }
}

.update-cart:focus {
  outline: none;
}

.js-qty__adjust--plus {
  right: 0;
}

.js-qty__adjust--minus {
  left: 0;
}

/*============================================================================
  #Quantity Selectors in the Ajax Cart
==============================================================================*/
.ajaxcart__qty,
body.template-cart .js-qty{
  @extend .js-qty;
  display: inline-block;
  margin: 0;

  .is-loading & {
    opacity: 0.5;
    @include transition(none);
  }
}

.ajaxcart__qty-adjust {
  @extend .js-qty__adjust;
}

.ajaxcart__qty--plus {
  @extend .js-qty__adjust--plus;
}

.ajaxcart__qty--minus {
  @extend .js-qty__adjust--minus;
}

.ajaxcart__errors{
  margin-top: $gutter/2;
}

/*============================================================================
  #Charge Rabbit
==============================================================================*/
.charge_rabbit, .sky-pilot{
  @extend .wrapper;
  @extend .page-margin;
}
.sky-pilot-access-denied{
  text-align: center;
  a{
    @extend .btn;
  }

  h5{
    @extend h3;
    @extend .title;
  }
}
.charge_rabbit{
  .login_or_signup{
    text-align: center;

    a#login_link, a#signup_link{
      @extend .btn;
      display: block;
      margin: 15px auto;
      max-width: 300px;
    }
  }
  @include at-query ($min, $medium) {
    .address_info, .card_info{
      width: 50%;
      float: left;
    }
  }

  @include at-query ($max, $medium) {
    .address_info{
      margin-top: 20px;
    }
  }
  a.update-card-link, a.update-address-link{
    @extend .btn;
    margin-top: 10px;
  }
  dl{
    dt{
      font-weight: $bodyFontWeightBold;
      width: 30%;
    }
    dt, dd{
      float: left;
      -webkit-margin-start: 0;
    }
    dd{
      width: 70%;
    }
  }
  .subscription_actions{
    clear: both;
    padding-top: 20px;
  }
  .continue_shopping a{
    @extend .btn;
  }
  .cancel-subscription-wrapper{
    text-align: center;
    a{
      @extend .btn;
      display: block;
      margin: 15px auto;
      max-width: 300px;
    }
  }
  a.cancel-subscription-link{
    @extend .btn;
    background: $errorRed;
  }
}


/*============================================================================
  #Password Page
==============================================================================*/

.template-password {
  height: 100vh;
  text-align: center;
}
.password-section{
  width: 100%;
  height: 100%;
}
.password__wrapper {
  display: table;
  height: 100%;
  width: 100%;
  color: $colorTextBody;
  background-color: $colorSplash;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  background-color: $colorTextBody;
  .password__footer__inner {
    color: #fff;
  }
  a {
    color: inherit;
  }
}

.password__main {
  display: table-row;
  width: 100%;
  height: 100%;
  margin: 0 auto;
}

.password__main__inner {
  display: table-cell;
  vertical-align: middle;
  padding: ( $gutter / 2 ) $gutter;
  @include at-query($max, $small) {
    padding: $gutter/3 $gutter/3;
  }
  @include at-query($min, $small) {
    padding: $gutter/3 $gutter;
  }
}

.password__box{
  background-color: $colorBody;
  max-width: 600px;
  margin: 0 auto;
  @include at-query($max, $small) {
    padding: $gutter $gutter;
  }
  @include at-query($min, $small) {
    padding: $gutter 0;
  }
}

.template-password .newsletter-form{
  border: 1px solid rgba($colorBorder, 0.5);
}
.storefront-password-form{
  margin-top: $gutter;
}

.password__hero {
  @extend .title;
  font-size: em(42px * $titleFontAdjust);
  line-height: 1.15;
  letter-spacing: 0;
  text-rendering: optimizeLegibility;
  padding-bottom: $gutter;
  padding-top: $gutter;

  @include at-query($min, $postSmall) {
    font-size: em(50px * $titleFontAdjust);
  }

  @include at-query($min, $large) {
    font-size: em(55px * $titleFontAdjust);
  }
  .logo {
    max-width: 100%;
    max-height: 200px;
  }
}

.password__message {
  font-size: 120%;
  img {
    max-width: 100%;
  }
}

.password__hero,
.password__message,
.password__login-form,
.password__signup-form {
  max-width: 500px;
  margin: 0 auto;
}

.password__login-form {
  text-align: center;
  padding:  $gutter*2 $gutter;
}

.password__login-form,
.password__box{
  -moz-box-shadow:    0 0 10px rgba(#000, 0.3);
  -webkit-box-shadow: 0 0 10px rgba(#000, 0.3);
  box-shadow:         0 0 10px rgba(#000, 0.3);
  border-radius: 4px;
}

.password__login-form,
.password__signup-form {
  background-color: $colorBody;
  @include at-query($min, $small) {
    padding-left: $gutter;
    padding-right: $gutter;
  }
  .input-group {
    width: 100%;
  }
  .errors ul {
    list-style-type: none;
    margin-left: 0;
  }
}
.password__signup-form {
  padding-top: $gutter;
}

.password__signup-form__heading {
  margin-bottom: 0.8em;
}
.password__social-sharing {
  margin-top: $gutter;
}
.password__social-sharing__heading {
  margin-bottom: 0;
}

.admin-login  {
  margin-top: $gutter / 2;
  margin-bottom: 0;
  a{
    text-decoration: none;
  }
}
.admin-login {
  font-size: 95%;
}

.password__footer {
  display: table-row;
  height: 1px;
}

.password__footer__inner {
  display: table-cell;
  vertical-align: bottom;
  padding: $gutter;
  line-height: 1.5em;
  font-size: 95%;
  color: $colorFooterText;
  a{
    text-decoration: none;
    margin: 0 $gutter / 2;
    @include at-query($max, $medium) {
      display: block;
      margin-top: $gutter/2;
    }
  }
}


/*================ VENDOR ================*/
/*============================================================================
  #Slick Slider
==============================================================================*/

.slick-slider {
  position: relative;
  display: block;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -ms-touch-action: pan-y;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
}
.slick-list {
  position: relative;
  overflow: hidden;
  display: block;
  margin: 0;
  padding: 0;

  &:focus {
    outline: none;
  }

  &.dragging {
    cursor: pointer;
    cursor: hand;
  }
}
.slick-slider .slick-track,
.slick-slider .slick-list {
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

.slick-track {
  position: relative;
  left: 0;
  top: 0;
  display: block;

  &:before,
  &:after {
    content: "";
    display: table;
  }

  &:after {
    clear: both;
  }

  .slick-loading & {
    visibility: hidden;
  }
}
.slick-slide {
  float: left;
  height: 100%;
  min-height: 1px;
  display: none;
  [dir="rtl"] & {
    float: right;
  }
  img {
    display: block;
  }
  &.slick-loading img {
    display: none;
  }
  &.dragging img {
    pointer-events: none;
  }

  .slick-initialized & {
    display: block;
  }

  .slick-loading & {
    visibility: hidden;
  }
  .slick-vertical & {
    display: block;
    height: auto;
    border: 1px solid transparent;
  }
}

/*============================================================================
  #Slick Theme
==============================================================================*/

$slick-dot-color: $colorBorder;
$slick-dot-color-active: $slick-dot-color ;
$slick-dot-character: "•" !default;
$slick-dot-size: 30px !default;
$slick-opacity-default: 0.75 !default;
$slick-opacity-on-hover: 1 !default;
$slick-opacity-not-active: 0.75 !default;

/* Slider */

.slick-list {
  .slick-loading & {
    background: $colorProductBg;
  }
}

/* Arrows */

.slick-prev,
.slick-next {
    position: absolute;
    top: 50%;
    margin-top: -124px;
    z-index: 500;
    cursor: pointer;
    background: transparent;
    color: transparent;
    border: none;
    outline: none;
    opacity: $slick-opacity-not-active;
    -webkit-text-size-adjust: none;
    font-size: 1px;
    letter-spacing: -1px;
    &:before {
      font-size: 3rem;
      letter-spacing: normal;
      color: $colorProductArrows;
    }
    @include transition(opacity .2s ease-out);
    &:hover{
      outline: none;
      opacity: $slick-opacity-on-hover;
    }
    &.slick-disabled:before {
      opacity: $slick-opacity-not-active;
    }
}

.slick-next {
  right: 0;
  padding: 100px 0 100px 20px;
  @extend .icon-arrow-right;
  @extend .icon;
}

.slick-prev {
  left: 0;
  padding: 100px 20px 100px 0;
  @extend .icon-arrow-left;
  @extend .icon;
}

/* Dots */

.slick-slider {
  margin-bottom: 5px;
}

.product__thumbs--square{
  .slick-dots {
    list-style: none;
    display: block;
    text-align: center;
    padding: 0;
    margin: 0;
    width: 100%;
    li {
      position: relative;
      display: inline-block;
      height: 40px;
      width: 40px;
      margin: 10px 5px;
      padding: 0;
      cursor: pointer;
    }
  }
}

.slick-dots {
  li {
    button {
      border: 0;
      background: transparent;
      display: block;
      height: 20px;
      width: 20px;
      outline: none;
      line-height: 0px;
      font-size: 0px;
      color: transparent;
      padding: 5px;
      cursor: pointer;
      &:hover, &:focus {
        outline: none;
        &:before {
          opacity: $slick-opacity-on-hover;
        }
      }
      &:before {
        position: absolute;
        top: 0;
        left: 0;
        content: $slick-dot-character;
        width: 20px;
        height: 20px;
        font-size: $slick-dot-size;
        line-height: 20px;
        text-align: center;
        color: $slick-dot-color;
        opacity: $slick-opacity-not-active;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
      }
    }
    &.slick-active button:before {
      color: $slick-dot-color-active;
      opacity: $slick-opacity-on-hover;
    }
  }
}

/*============================================================================
  #Magnific Popup CSS (used on password page)
==============================================================================*/
.mfp-bg {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1042;
  overflow: hidden;
  position: fixed;
  background: #0b0b0b;
  opacity: 0.8;
  filter: alpha(opacity=80); }

.mfp-wrap {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1043;
  position: fixed;
  outline: none !important;
  -webkit-backface-visibility: hidden; }

.mfp-container {
  text-align: center;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  padding: 0 8px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

.mfp-container:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle; }

.mfp-align-top .mfp-container:before {
  display: none; }

.mfp-content {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  margin: 0 auto;
  text-align: left;
  z-index: 1045; }

.mfp-inline-holder .mfp-content, .mfp-ajax-holder .mfp-content {
  width: 100%;
  cursor: auto; }

.mfp-ajax-cur {
  cursor: progress; }

.mfp-zoom-out-cur, .mfp-zoom-out-cur .mfp-image-holder .mfp-close {
  cursor: -moz-zoom-out;
  cursor: -webkit-zoom-out;
  cursor: zoom-out; }

.mfp-zoom,
.product__photo img[data-mfp-src] {
  cursor: pointer;
  cursor: -webkit-zoom-in;
  cursor: -moz-zoom-in;
  cursor: zoom-in; }

.mfp-auto-cursor .mfp-content {
  cursor: auto; }

.mfp-close, .mfp-arrow, .mfp-preloader, .mfp-counter {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none; }

.mfp-loading.mfp-figure {
  display: none; }

.mfp-hide {
  display: none !important; }

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.mfp-preloader {
  color: #CCC;
  position: absolute;
  top: 50%;
  width: auto;
  text-align: center;
  margin-top: -0.8em;
  left: 8px;
  right: 8px;
  z-index: 1044;
  &:after{
    content: '';
    display: inline-block;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    border: .25rem solid rgba(#fff, 0.2);
    border-top-color: #fff;
    animation: spin 1s infinite linear;
  }
}
  .mfp-preloader a {
    color: #CCC; }
    .mfp-preloader a:hover {
      color: #FFF; }

.mfp-s-ready .mfp-preloader {
  display: none; }

.mfp-s-error .mfp-content {
  display: none; }

button.mfp-close, button.mfp-arrow {
  overflow: visible;
  cursor: pointer;
  background: transparent;
  border: 0;
  -webkit-appearance: none;
  display: block;
  outline: none;
  padding: 0;
  z-index: 1046;
  -webkit-box-shadow: none;
  box-shadow: none; }
button::-moz-focus-inner {
  padding: 0;
  border: 0; }

.mfp-close {
  width: 44px;
  height: 44px;
  line-height: 44px;
  position: absolute;
  right: 0;
  top: 0;
  text-decoration: none;
  text-align: center;
  opacity: 0.65;
  filter: alpha(opacity=65);
  padding: 0 0 18px 10px;
  color: #FFF;
  font-style: normal;
  font-size: 28px;
  font-family: Arial, Baskerville, monospace; 
 }
  .mfp-close:hover, .mfp-close:focus {
    opacity: 1;
    filter: alpha(opacity=100); }
  .mfp-close:active {
    top: 1px; }

.mfp-close-btn-in .mfp-close {
  color: #333; }

.mfp-image-holder .mfp-close, .mfp-iframe-holder .mfp-close {
  color: #FFF;
  right: -6px;
  text-align: right;
  padding-right: 6px;
  width: 100%; }

.mfp-counter {
  position: absolute;
  top: 0;
  right: 0;
  color: #CCC;
  font-size: 12px;
  line-height: 18px;
  white-space: nowrap; }

.mfp-arrow {
  position: absolute;
  opacity: 0.65;
  filter: alpha(opacity=65);
  margin: 0;
  top: 50%;
  margin-top: -55px;
  padding: 0;
  width: 90px;
  height: 110px;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }
  .mfp-arrow:active {
    margin-top: -54px; }
  .mfp-arrow:hover, .mfp-arrow:focus {
    opacity: 1;
    filter: alpha(opacity=100); }
  .mfp-arrow:before, .mfp-arrow:after, .mfp-arrow .mfp-b, .mfp-arrow .mfp-a {
    content: '';
    display: block;
    width: 0;
    height: 0;
    position: absolute;
    left: 0;
    top: 0;
    margin-top: 35px;
    margin-left: 35px;
    border: medium inset transparent; }
  .mfp-arrow:after, .mfp-arrow .mfp-a {
    border-top-width: 13px;
    border-bottom-width: 13px;
    top: 8px; }
  .mfp-arrow:before, .mfp-arrow .mfp-b {
    border-top-width: 21px;
    border-bottom-width: 21px;
    opacity: 0.7; }

.mfp-arrow-left {
  left: 0; }
  .mfp-arrow-left:after, .mfp-arrow-left .mfp-a {
    border-right: 17px solid #FFF;
    margin-left: 31px; }
  .mfp-arrow-left:before, .mfp-arrow-left .mfp-b {
    margin-left: 25px;
    border-right: 27px solid #3F3F3F; }

.mfp-arrow-right {
  right: 0; }
  .mfp-arrow-right:after, .mfp-arrow-right .mfp-a {
    border-left: 17px solid #FFF;
    margin-left: 39px; }
  .mfp-arrow-right:before, .mfp-arrow-right .mfp-b {
    border-left: 27px solid #3F3F3F; }

.mfp-iframe-holder {
  padding-top: 40px;
  padding-bottom: 40px; }
  .mfp-iframe-holder .mfp-content {
    line-height: 0;
    width: 100%;
    max-width: 900px; }
  .mfp-iframe-holder .mfp-close {
    top: -40px; }

.mfp-iframe-scaler {
  width: 100%;
  height: 0;
  overflow: hidden;
  padding-top: 56.25%; }
  .mfp-iframe-scaler iframe {
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
    background: #000; }

/* Main image in popup */
img.mfp-img {
  width: auto;
  max-width: 100%;
  height: auto;
  display: block;
  line-height: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: 40px 0 40px;
  margin: 0 auto; }

/* The shadow behind the image */
.mfp-figure {
  line-height: 0; }
  .mfp-figure:after {
    content: '';
    position: absolute;
    left: 0;
    top: 40px;
    bottom: 40px;
    display: block;
    right: 0;
    width: auto;
    height: auto;
    z-index: -1;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
    background: #444; }
  .mfp-figure small {
    color: #BDBDBD;
    display: block;
    font-size: 12px;
    line-height: 14px; }
  .mfp-figure figure {
    margin: 0; }

.mfp-bottom-bar {
  margin-top: -36px;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  cursor: auto; }

.mfp-title {
  text-align: left;
  line-height: 18px;
  color: #F3F3F3;
  word-wrap: break-word;
  padding-right: 36px; }

.mfp-image-holder .mfp-content {
  max-width: 100%; }

.mfp-gallery .mfp-image-holder .mfp-figure {
  cursor: pointer; }

@media screen and (max-width: 800px) and (orientation: landscape), screen and (max-height: 300px) {
  /**
       * Remove all paddings around the image on small screen
       */
  .mfp-img-mobile .mfp-image-holder {
    padding-left: 0;
    padding-right: 0; }
  .mfp-img-mobile img.mfp-img {
    padding: 0; }
  .mfp-img-mobile .mfp-figure:after {
    top: 0;
    bottom: 0; }
  .mfp-img-mobile .mfp-figure small {
    display: inline;
    margin-left: 5px; }
  .mfp-img-mobile .mfp-bottom-bar {
    background: rgba(0, 0, 0, 0.6);
    bottom: 0;
    margin: 0;
    top: auto;
    padding: 3px 5px;
    position: fixed;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box; }
    .mfp-img-mobile .mfp-bottom-bar:empty {
      padding: 0; }
  .mfp-img-mobile .mfp-counter {
    right: 5px;
    top: 3px; }
  .mfp-img-mobile .mfp-close {
    top: 0;
    right: 0;
    width: 35px;
    height: 35px;
    line-height: 35px;
    background: rgba(0, 0, 0, 0.6);
    position: fixed;
    text-align: center;
    padding: 0; }
 }

@media all and (max-width: 900px) {
  .mfp-arrow {
    -webkit-transform: scale(0.75);
    transform: scale(0.75); }

  .mfp-arrow-left {
    -webkit-transform-origin: 0;
    transform-origin: 0; }

  .mfp-arrow-right {
    -webkit-transform-origin: 100%;
    transform-origin: 100%; }

  .mfp-container {
    padding-left: 6px;
    padding-right: 6px; }
 }

.mfp-ie7 .mfp-img {
  padding: 0; }
.mfp-ie7 .mfp-bottom-bar {
  width: 600px;
  left: 50%;
  margin-left: -300px;
  margin-top: 5px;
  padding-bottom: 5px; }
.mfp-ie7 .mfp-container {
  padding: 0; }
.mfp-ie7 .mfp-content {
  padding-top: 44px; }
.mfp-ie7 .mfp-close {
  top: 0;
  right: 0;
  padding-top: 0; }
button.mfp-close {
  margin: 30px;
  font-size: em(40px);
  font-weight: $bodyFontWeightBold;
  opacity: 1;
  filter: alpha(opacity=100);
  color: #fff;
}

/*============ Theme Specific MFP ==================*/

.mfp-bg { background-color: rgba(0,0,0,0.75); }
.template-password .mfp-bg { background-color: $colorSplash; }

/* Wider images for zoom */
.mfp-figure figure {
  overflow-y: scroll;
}
img.mfp-img{
  max-height: none !important;
}
button.mfp-close {
  margin: 0px;
}

/* Size chart popup for product page */
.mfp-content .product-modal {
  position: relative;
  background: #FFF;
  padding: $gutter*1.5 $gutter;
  width: auto;
  margin: 20px auto;
  max-width: $siteWidth;
  @include at-query ($max, $small) {
    padding: $gutter*1.5 $gutter/2;
  }
}

.mfp-bg {
  &.mfp-fade {
    -webkit-backface-visibility: hidden;
    opacity: 0;
    @include transition(all 0.3s ease-out);
    &.mfp-ready {
      opacity: 1;
      filter: alpha(opacity=100);
    }
    &.mfp-removing {
      @include transition(all 0.1s ease-out);
      opacity: 0;
      filter: alpha(opacity=0);
    }
  }
}

.mfp-fade {
  &.mfp-wrap {
    .mfp-content {
      opacity: 0;
      @include transition(all 0.3s ease-out);
    }
    &.mfp-ready {
      .mfp-content {
        opacity: 1;
      }
    }
    &.mfp-removing {
        @include transition(all 0.1s ease-out);
      .mfp-content {
        opacity: 0;
      }
      button {
        opacity: 0;
      }
    }
  }
}






/*============ Add any custom styles below this line ==================*/
.Product__Gift-Main {
  background-color: #fff;
  overflow: hidden;
  width: 100%;
  border: 1px solid #dfe1e3;
}
.Product__Gift-Main .Gift-Row {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.Product__Gift-Main .Gift-Row .Gift-Row-Image {
  margin: 0;
  height: 150px;
  overflow: hidden;
  display: inline-block;
  line-height: 0;
}
.Product__Gift-Main .Gift-Row .Gift-Row-Image img {
  width: 100%;
  border-radius: 0;
  height: auto;
  object-fit: cover;
}
.Product__Gift-Main .Gift-Row .Gift-Row-Text {
  display: inline-block;
  width: 100%;
  padding: 10px;
  text-align: left;
}
.Product__Gift-Main .Gift-Row .Gift-Row-Text p {
  margin: 0;
}
.Product__Gift-Main .Gift-Row .Gift-Row-Text .gift-price {
  float: right;
}
.Product__Gift-Main .Gift-Row .Gift-Row-Action {
  width: 100%;
  padding: 0 10px 5px;
}
#gt-add-video-btn {
  width: 100%;
  margin-bottom: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
}
#gt-add-video-btn img {
  width: 16px;
  height: 16px;
  margin-right: 6px;
}
#gt-add-video-btn.gt-button-disabled {
  background-color: #999999;
  border-color: #999999;
  color: #fff;
}
.klaviyo-bis-trigger,
#klaviyo-bis-modal .btn{
  background-color: transparent;
  color: #333333;
  border: 1px solid #333333;
  width: 100% !important;
  padding: 14px 20px;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-top: 10px !important;
  margin-bottom: 40px !important;
}
.klaviyo-bis-trigger:hover,
#klaviyo-bis-modal .btn:hover {
  color: #333333;
  background-color: rgba(207, 48, 0, 0.3)!important;
}

#AddToCart-product, #formdata-submit-button{
  background-color:#ee286c;
  color:#fff;
}
#AddToCart-product:hover, #formdata-submit-button:hover {
  opacity: 0.8!important;
}
#formdata-submit-button span{color:#fff!important;}
#formdata-submit-button {
  position: relative;
}
#formdata-submit-button .spinner {
  visibility: hidden;
  width: 20px;
  height: 20px;
  border: 3px solid rgba(0, 0, 0, 0.1);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  position: absolute;
  top: 12px;
  right: 20px;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
#shopify-section-header .menuToggle {
  padding: 25px;
  margin-right: -10px;
  margin-top: -25px;
  background-position:center;
}

.nav--mobile .main-menu li a {
  padding-left: 30px;
  padding-right: 30px;
  margin-right: -15px;
}

.footer-quicklinks li {
  margin:0!important;
}

.footer-quicklinks li a {
  padding: 8px 0 7px;
  display: block;
}

.logo-image {
  width:195px!important;
  max-width:unset!important;
}


#AjaxifyCart #storePickupApp {
  margin: 0 1em;
}

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {  
   #storePickupApp .checkoutMethod {
        flex: 1 1 auto !important;
        width: 50% !important;             
      }   
    #storePickupApp .checkoutMethod > div:nth-child(1), .shippingIcon, .pickupIcon {
       width: 100% !important;
     }
}


@media all and (max-width: 900px) {
  .template-product [data-oke-widget] {
    padding-left: 35px;
  }
  .template-product .product-accordion {
    padding-left: 25px;
  }
  .template-product #qab_bar {
    padding: 20px !important;
  }
  .template-product .product__related {
    margin-left: 25px;
  }
}

.template-collection .grid-uniform {
  display: flex;
  flex-wrap: wrap;
}

.template-collection .product-grid-item {
  padding-bottom: 50px;
  position: relative;
}

.add-to-cart-collection, .add-to-cart-collection-custom {
  position: absolute;
  bottom:20px;
  background-color: #ee286c;
  color: #fff;
  padding: 22px 20px;
  line-height: 0;
  width:150px;
  left:calc((50% - 75px) + 15px);
  cursor: pointer;
  font-size: 15px;
  text-decoration: none;
}

@media (max-width:400px) {
  .add-to-cart-collection, .add-to-cart-collection-custom {
   width:140px;
  }
}

.add-to-cart-collection:hover, 
.add-to-cart-collection:focus,
.add-to-cart-collection-custom:hover,
.add-to-cart-collection-custom:focus {
  color: #fff;
  opacity:0.9;
}

.powered-by-rebuy {
  display: none !important;
}
.footer-payment .icon.icon-visa {
  transform: translateY(-4px);
}
.homepage-image .lazy-image.mobile {
  display: none;
}
.zooomyterms_container {
  display: flex;
  gap: 10px;
  text-align: left;
}

/*================ Product tag badges (theme settings) ================*/
.product-tag-badge {
  position: absolute;
  bottom: 14px;
  right: 10px;
  top: auto;
  left: auto;
  z-index: 350;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  box-sizing: border-box;
  padding: 4px;
  line-height: 1.1;
  font-size: 13px;
  pointer-events: none;
}
.product-tag-badge__text {
  display: block;
  max-width: 100%;
}
.product-tag-badge--product-page {
  bottom: 14px;
  right: 12px;
  top: auto;
  left: auto;
  width: 86px;
  height: 86px;
  font-size: 14px;
  padding: 5px;
}
.product-single__gallery-badge-wrap {
  position: relative;
}
@media only screen and (max-width: 480px) {
  .product-tag-badge {
    bottom: 12px;
    right: 8px;
    width: 64px;
    height: 64px;
    font-size: 12px;
    padding: 3px;
  }
  .product-tag-badge--product-page {
    bottom: 12px;
    right: 10px;
    width: 72px;
    height: 72px;
    font-size: 13px;
    padding: 4px;
  }
}