/** Shopify CDN: Minification failed

Line 80:0 Unexpected "$"
Line 106:0 Comments in CSS use "/* ... */" instead of "//"
Line 107:16 Unexpected "{"
Line 107:26 Expected ":"
Line 107:43 Unexpected ";"
Line 108:15 Unexpected "{"
Line 108:25 Expected ":"
Line 108:41 Unexpected ";"
Line 110:0 Comments in CSS use "/* ... */" instead of "//"
Line 114:0 Comments in CSS use "/* ... */" instead of "//"
... and 287 more hidden warnings

**/
@charset "UTF-8";

#preview-bar-iframe { display: none !important; }
html { padding: 0 !important; }

img[src*="insight.adsrvr.org"] {
	display: none !important;
}

/*============================================================================
  ============= Pipeline theme is built on Timber 2.0.2 ======================
  ============================================================================

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

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

==============================================================================

  Table of Contents

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

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

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

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

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

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

// Main Colors
$colorPrimary: {{ settings.color_primary }};
$colorSplash: {{ settings.color_splash }};

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

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

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

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

// Account Bar
$colorInfoBg: {{ settings.color_account_bg }};
$colorInfoText: {{ settings.color_account_text }};

// Nav and dropdown link background
$colorNav: {{ settings.color_header_bg }};
$colorNavText: {{ settings.color_header_text }};
$colorNavBorder: $colorInfoBg;

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

// Homepage
$colorHomeDark: {{ settings.homepage_background_dark }};
$colorHomeLight: {{ settings.homepage_background_light }};

// 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;
$holidayGreen: #037d50;

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

// Convenience colors
$white: #ffffff;
$offwhite: #fafafa;
$faint-grey: #eeeeee;
$light-grey: #dddddd;
$grey: #999999;
$dark-grey: #303030;
$black: #000000;

$nude: #fdf0e2;
$blush: #fae4cb;
$boxfox-pink: #E51164;

$boxfox-nude: #ffcc99;
$boxfox-light-nude: #fdf0e2;

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

@mixin clearfix() {
  &:after {
    content: '';
    display: table;
    clear: both; }
  *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 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;
  }
}

@mixin respond-to($breakpoint) {
  @if $breakpoint == "small" {
    @media (max-width: 480px) {
      @content;
    }
  }

  @else if $breakpoint == "medium" {
    @media (max-width: 767px) {
      @content;
    }
  }

  @else if $breakpoint == "large" {
    @media (min-width: 768px) {
      @content;
    }
  }

	@else if $breakpoint == "larger" {
    @media (min-width: 960px) {
      @content;
    }
  }

	@else if $breakpoint == "larger-down" {
    @media (max-width: 960px) {
      @content;
    }
  }

  @else if $breakpoint == "xlarge" {
    @media (min-width: 1200px) {
      @content;
    }
  }

  @else if $breakpoint == "tablet" {
    @media only screen and (min-width: 768px) and (max-width: 1024px){
      @content;
    }
	}

  @else {
    @media ($breakpoint) {
      @content;
    }
  }
}

@mixin transform($transform) {
	-webkit-transform: $transform;
  -moz-transform: $transform;
	-ms-transform: $transform;
  -o-transform: $transform;
  transform: $transform;
}

@mixin transition($transition: all 500ms ease 0s) {
	-webkit-transition: $transition;
  -moz-transition: $transition;
	-ms-transition: $transition;
  -o-transition: $transition;
  transition: $transition;
}

@mixin transition-property($property) {
	-webkit-transition-property: $property;
	-moz-transition-property: $property;
	-ms-transition-property: $property;
	-o-transition-property: $property;
	transition-property: $property;
}

@mixin transition-duration($duration) {
	-webkit-transition-property: $duration;
	-moz-transition-property: $duration;
	-ms-transition-property: $duration;
	-o-transition-property:$duration;
	transition-property: $duration;
}

@mixin transition-timing-function($timing) {
	-webkit-transition-timing-function: $timing;
	-moz-transition-timing-function: $timing;
	-ms-transition-timing-function: $timing;
	-o-transition-timing-function: $timing;
	transition-timing-function: $timing;
}

@mixin transition-delay($delay) {
	-webkit-transition-delay: $delay;
	-moz-transition-delay: $delay;
	-ms-transition-delay: $delay;
	-o-transition-delay: $delay;
	transition-delay: $delay;
}

@mixin flexbox {
	display: -webkit-box;
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flexbox;
	display: flex;
}

%flexbox { @include flexbox; }

@mixin inline-flex {
	display: -webkit-inline-box;
	display: -webkit-inline-flex;
	display: -moz-inline-flex;
	display: -ms-inline-flexbox;
	display: inline-flex;
}

%inline-flex { @include inline-flex; }

@mixin flex-direction($value: row) {
	@if $value == row-reverse {
		-webkit-box-direction: reverse;
		-webkit-box-orient: horizontal;
	} @else if $value == column {
		-webkit-box-direction: normal;
		-webkit-box-orient: vertical;
	} @else if $value == column-reverse {
		-webkit-box-direction: reverse;
		-webkit-box-orient: vertical;
	} @else {
		-webkit-box-direction: normal;
		-webkit-box-orient: horizontal;
	}
	-webkit-flex-direction: $value;
	-moz-flex-direction: $value;
	-ms-flex-direction: $value;
	flex-direction: $value;
}

@mixin flex-wrap($value: nowrap) {
	// No Webkit Box fallback.
	-webkit-flex-wrap: $value;
	-moz-flex-wrap: $value;
	@if $value == nowrap {
		-ms-flex-wrap: none;
	} @else {
		-ms-flex-wrap: $value;
	}
	flex-wrap: $value;
}

@mixin flex-flow($values: (row nowrap)) {
	// No Webkit Box fallback.
	-webkit-flex-flow: $values;
	-moz-flex-flow: $values;
	-ms-flex-flow: $values;
	flex-flow: $values;
}

@mixin order($int: 0) {
	-webkit-box-ordinal-group: $int + 1;
	-webkit-order: $int;
	-moz-order: $int;
	-ms-flex-order: $int;
	order: $int;
}

@mixin flex-grow($int: 0) {
	-webkit-box-flex: $int;
	-webkit-flex-grow: $int;
	-moz-flex-grow: $int;
	-ms-flex-positive: $int;
	flex-grow: $int;
}

@mixin flex-shrink($int: 1) {
	-webkit-flex-shrink: $int;
	-moz-flex-shrink: $int;
	-ms-flex-negative: $int;
	flex-shrink: $int;
}

@mixin flex-basis($value: auto) {
	-webkit-flex-basis: $value;
	-moz-flex-basis: $value;
	-ms-flex-preferred-size: $value;
	flex-basis: $value;
}

@mixin flex($fg: 1, $fs: null, $fb: null) {
	// Set a variable to be used by box-flex properties
	$fg-boxflex: $fg;

	// Box-Flex only supports a flex-grow value so let's grab the
	// first item in the list and just return that.
	@if type-of($fg) == 'list' {
		$fg-boxflex: nth($fg, 1);
	}

	-webkit-box-flex: $fg-boxflex;
	-webkit-flex: $fg $fs $fb;
	-moz-box-flex: $fg-boxflex;
	-moz-flex: $fg $fs $fb;
	-ms-flex: $fg $fs $fb;
	flex: $fg $fs $fb;
}

@mixin justify-content($value: flex-start) {
	@if $value == flex-start {
		-webkit-box-pack: start;
		-ms-flex-pack: start;
	} @else if $value == flex-end {
		-webkit-box-pack: end;
		-ms-flex-pack: end;
	} @else if $value == space-between {
		-webkit-box-pack: justify;
		-ms-flex-pack: justify;
	} @else if $value == space-around {
		-ms-flex-pack: distribute;
	} @else {
		-webkit-box-pack: $value;
		-ms-flex-pack: $value;
	}
	-webkit-justify-content: $value;
	-moz-justify-content: $value;
	justify-content: $value;
}

@mixin align-items($value: stretch) {
	@if $value == flex-start {
		-webkit-box-align: start;
		-ms-flex-align: start;
	} @else if $value == flex-end {
		-webkit-box-align: end;
		-ms-flex-align: end;
	} @else {
		-webkit-box-align: $value;
		-ms-flex-align: $value;
	}
	-webkit-align-items: $value;
	-moz-align-items: $value;
	align-items: $value;
}

@mixin align-self($value: auto) {
	// No Webkit Box Fallback.
	-webkit-align-self: $value;
	-moz-align-self: $value;
	@if $value == flex-start {
		-ms-flex-item-align: start;
	} @else if $value == flex-end {
		-ms-flex-item-align: end;
	} @else {
		-ms-flex-item-align: $value;
	}
	align-self: $value;
}

@mixin align-content($value: stretch) {
	// No Webkit Box Fallback.
	-webkit-align-content: $value;
	-moz-align-content: $value;
	@if $value == flex-start {
		-ms-flex-line-pack: start;
	} @else if $value == flex-end {
		-ms-flex-line-pack: end;
	} @else {
		-ms-flex-line-pack: $value;
	}
	align-content: $value;
}

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

/*============================================================================
  #Typography
==============================================================================*/
$baseFontSize: {{ settings.base_font_size }}; // Henceforth known as 1em (assumed at 14px)

// Title
{% if settings.font_title contains 'google:' %}
  {% assign title-FontArray = settings.font_title | split: ':' %}
  {% assign title-FontName = title-FontArray[2] %}
  {% capture title-FontStack %}"{{ title-FontName | replace: '+', ' ' }}"{% if title-FontArray[1] == 'serifStack' %}, "Big Caslon","Bodoni MT",Georgia,serif {% else %}, "Helvetica Neue",Arial,sans-serif{% endif %}{% endcapture %}
{% else %}
  {% assign title-FontStack = settings.font_title %}
{% endif %}

// Body (same logic)
{% if settings.font_body contains 'google:' %}
  {% assign body-FontArray = settings.font_body | split: ':' %}
  {% assign body-FontName = body-FontArray[2] %}
  {% capture body-FontStack %}"{{ body-FontName | replace: '+', ' ' }}"{% if body-FontArray[1] == 'serifStack' %}, "Big Caslon","Bodoni MT",Georgia,serif {% else %}, "Helvetica Neue",Arial,sans-serif{% endif %}{% endcapture %}
{% else %}
  {% assign body-FontStack = settings.font_body %}
{% endif %}

// Accent (same logic)
{% if settings.font_accent contains 'google:' %}
  {% assign accent-FontArray = settings.font_accent | split: ':' %}
  {% assign accent-FontName = accent-FontArray[2] %}
  {% capture accent-FontStack %}"{{ accent-FontName | replace: '+', ' ' }}"{% if accent-FontArray[1] == 'serifStack' %}, "Big Caslon","Bodoni MT",Georgia,serif {% else %}, "Helvetica Neue",Arial,sans-serif{% endif %}{% endcapture %}
{% else %}
  {% assign accent-FontStack = settings.font_accent %}
{% endif %}

$titleFontStack: {{title-FontStack}};
$bodyFontStack: {{body-FontStack}};
$accentFontStack: {{accent-FontStack}};

.title{
  font-family: $titleFontStack;
  {% if settings.font_title_capitalize %}text-transform: uppercase; letter-spacing: 1px;{% endif %}
  -webkit-font-smoothing: antialiased;
}
@mixin title(){
  font-family: $titleFontStack;
  {% if settings.font_title_capitalize %}text-transform: uppercase; letter-spacing: 1px;{% endif %}
  -webkit-font-smoothing: antialiased;
}

.uppercase{
  font-family:  $accentFontStack;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 0.8em;
}
@mixin uppercase(){
  font-family:  $accentFontStack;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 0.8em;
}

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

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

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

/*================ Use em() Sass function to declare font-size ================*/
h1 {
  font-size: em(36px);
  @include at-query ($max, $small) {
    font-size: em(28px);
  }
}

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

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

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

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

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

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

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

.h1--body,
.h2--body,
.h3--body,
.h4--body,
.h5--body,
.h6--body{
  text-transform: none;
  letter-spacing: 0px;
  font-family: $bodyFontStack;
}

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

  img {
    margin: 0;
  }
}

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

b, strong, .strong {
  font-weight: bold;
}

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

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

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

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

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

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

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

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

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

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

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

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


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

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

#{$class-type}grid__item {
  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}--');
      }
    }
  }
}

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

  // .template-page-corporate-concierge.main-content
  .template-page-corporate-concierge & {

    @include at-query ($max, $medium - 1) {
      padding-bottom: 10px;
    }
  }
}

/*============================================================================
  #Helper Classes
==============================================================================*/
.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;
}
.page-content{
	margin: 0 auto;
  padding: 0 $gutter;
	max-width: 1200px;
}
@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;
  }
}

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

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

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

/*============================================================================
  #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;
    font-family: 'Brandon Text' !important;
  }
  ul, ol {
    margin-left: 35px;
  }
  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;
}
.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;
}
/*============================================================================
  #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;
}

/*add button fade on hover (refinery.cc)*/
.btn:hover {
opacity:.8;
}
/**/

.btn{
  display: inline-block;
  padding: 8px 10px;
  margin: 0;
  line-height: 1.42;
  font-weight: normal;
  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;
  }
  &[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 !important;
  border: 1px solid $colorBtnSecondaryText !important;
  color: $colorBtnSecondaryText !important;
  &:hover {
    background-color: $colorBtnSecondaryHover !important;
    color: $colorBtnSecondaryText !important;
  }
  &:focus,
  &:active {
   background-color: $colorBtnSecondaryActive !important;
   color: $colorBtnSecondaryText !important;
  }
}
.btn--small {
  padding: 6px 7px;
  font-size: em(10px);
}
.btn--large {
  padding: 12px 20px;
  font-size: em(14px);
  @extend .title;
}
.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 1px #FFFFFF;
  color: $colorHomeDark;
  margin: 8px;
  &:hover, &:focus, &:active{
    color: $colorSplash;
    background-color: #FFFFFF;
  }
}


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

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

/*============================================================================
  #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: bold;
}
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;
        @include uppercase;
        font-size: 12px;
        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;
      }
    }
  }
}


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

/*============================================================================
  #Images and Iframes
==============================================================================*/
img {
	margin: 0;
	width: auto;
	max-width: 100%;
  border: 0 none;
}
svg:not(:root) {
  overflow: hidden;
}
img.auto,
.grid__item img,
.grid__item iframe {
  max-width: 100%;
}
.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%;
  }
}

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

/*============================================================================
  #Forms
==============================================================================*/
form {
  margin-bottom: 20px;
}
input,
textarea,
button,
select {
  font-size: 1em;
}
@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: bold;
}
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: rgba(239, 239, 239, 0.6) !important;
    border-color: rgba(239, 239, 239, 0.6) !important;
  }
}
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('{{ "ico-select.svg" | asset_url }}');
    repeat: no-repeat;
    position: right 10px center;
    color: transparent;
  }
  padding-right: 28px;
  text-indent: 0.01px;
  text-overflow: '';
  cursor: pointer;

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

// 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: bold;
  &.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: normal;
}
label[for] {
  cursor: pointer;
}
.label-hint {
  color: #999;
}

/*================ Horizontal Form ================*/
form.form-horizontal,
.form-horizontal {
  margin-bottom: 0;
  input[type="text"],
  input[type="search"],
  input[type="password"],
  input[type="email"],
  input[type="file"],
  input[type="number"],
  input[type="tel"],
  input[type="url"],
  textarea,
  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;
}

/*============================================================================
  #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: "\e900"; }
.icon-arrow-right:before { content: "\e901"; }
.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: "\e902"; }
.icon-facebook:before { content: "\e609"; }
.icon-fancy:before { content: "\46"; }
.icon-forbrugsforeningen:before { content: "\e903"; }
.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: "\e905"; }
.icon-master:before { content: "\e906"; }
.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-snapchat:before { content: "\e90b"; }
.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: {{ settings.color_footer_social_link }};
    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: {{ settings.color_footer_social_link }};
    &:hover {
      color: darken({{ settings.color_footer_social_link }}, 10%);
    }
  }
}


/*============================================================================
  #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: $colorTextBody;
}
.pagination-custom > .disabled > span,
.pagination-custom > .disabled > a,
.pagination-custom > .disabled > a:hover,
.pagination-custom > .disabled > a:focus {
  color: #999999;
  cursor: not-allowed;
}
.pagination-custom-lg > li > a,
.pagination-custom-lg > li > span {
  padding: 10px 16px;
  font-size: em(18px);
}
.pagination-custom-lg > li:first-child > a,
.pagination-custom-lg > li:first-child > span {
  border-bottom-left-radius: 6px;
  border-top-left-radius: 6px;
}
.pagination-custom-lg > li:last-child > a,
.pagination-custom-lg > li:last-child > span {
  border-top-right-radius: 6px;
  border-bottom-right-radius: 6px;
}
.pagination-custom-sm > li > a,
.pagination-custom-sm > li > span {
  padding: 5px 10px;
  font-size: em(12px);
}
.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;
$searchWidth: 80px;
.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{
  @include at-query ($min, $small) {
    padding: 2px $searchWidth 0 $searchWidth;
  }
  @include at-query ($max, $small) {
    padding-top: $infoBarHeight + $infoBarPadding;
  }
}
.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;

	&.has-bottom-banner {
		border-bottom: none;
	}
}
.bottom-banner {
	padding: 5px 0;
	color: $black;
	background: $nude;
	text-align: right;

	span, a {
		color: $black;
		font-family: Baskerville;
		font-size: 16px;
		font-style: italic;
		text-decoration: none;
	}
}
.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: $colorInfoBg;
  .search-bar{
    position: relative;
    z-index: 100;
    height: $infoBarHeight + 6px;
    color: $colorInfoBg;
    font-size: 16px;
    padding: 0 25px 0 0;
    text-align: right;
    border: none;
    margin-bottom: 0;
    border-bottom: 1px solid transparent;
    border-radius: 0px;
    width: $searchWidth;
    -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;
      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("{{ 'search.svg' | asset_url }}");
    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;
}
.nav-link--green {
  color: $holidayGreen !important; // overriding theme styles
}

/*================ 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%;
    margin-top:-12px;
    width: 25px;
    height: 25px;
  }
  .header-hamburger{
    right: 0;
    background: url("{{ 'nav.svg' | asset_url }}") no-repeat left 0 center;
  }
  .header-cart{
    left: 0;
    background: url("{{ 'cart.svg' | asset_url }}") 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;
    @include 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("{{ 'nav.png' | asset_url }}");
  background-position: right center;
  background-repeat: no-repeat;
}
.lt-ie9 .nav--mobile .header-cart{
  background: url("{{ 'cart.png' | asset_url }}");
  background-position: left center;
  background-repeat: no-repeat;
}
.lt-ie9 .header-search .search-bar{
  background: url("{{ 'search.png' | asset_url }}");
  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;
    display: inline-block;
    & > li {
      display: inline-block;

      &:first-child a {
        margin-left: $gutter/3;
      }
      & > a {
        display: block;
        margin-left: $gutter;
        white-space: nowrap;
        @include 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;
  }
  .grandparent .parent .child a{
    @include 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{
      @include 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;
    @include 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
  }
}



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

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

/*================ Spacing ================*/
.homepage-blog,
.homepage-product,
.homepage-instagram{
  padding-top: $gutter*3;
  padding-bottom: $gutter*3;
}
.homepage-page,
.homepage-collection{
  padding-top: $gutter*3;
  padding-bottom: $gutter*2;
}
.homepage-logos{
  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-product,
  .homepage-collection,
  .homepage-instagram{
    padding-top: 0px;
  }
}


/*================ Titles ================*/
.home__title{
  @extend .title;
  margin-bottom: $gutter/2;
  @include at-query($max, $small){ font-size: 2em; }
}
.home__subtitle{
  @extend .uppercase;
  text-align: center;
  font-weight: bold;
  opacity: 0.75;
  font-size: 1em;
  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{
  color: #ffffff;
}
.homepage-image.homepage--light a .home__title,
.homepage-image.homepage--light a .home__subtitle{
  color: $colorHomeLight;
}
.homepage-image.homepage--splash a .home__title,
.homepage-image.homepage--splash a .home__subtitle{
  color: $colorSplash;
}
.homepage-image.homepage--dark a .home__title,
.homepage-image.homepage--dark a .home__subtitle{
  color: $colorHomeDark;
}


/*================ 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;
}
.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{
  max-width: 100%;
  zoom: 50%;
  -moz-transform:scale(0.5);
}

.title--flex{
  margin-bottom: 0.5em;
  @extend .title;
  margin-bottom: $gutter/2;
}
.content--flex{
  margin-bottom: 1.5em;
}
@include at-query($max, $medium){
  .title--flex{
    font-size: 2em;
  }
  .content--flex{
    font-size: 1.3em;
  }
}
.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%;
}

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

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

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

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

  @include at-query ($max, $medium) {
    padding: 0 15px;
  }
  .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 .fs-mobile
  .fs-mobile  {

    // .homepage-instagram .fs-mobile .fs-entry-container
    .fs-entry-container {
      height: 100% !important; // override fs styling
      width: 100% !important; // override fs styling
      padding-top: calc(100% / 1) !important; // override fs styling

      @include at-query (null, $medium, $larger) {
        height: 50% !important; // override fs styling
        width: 50% !important; // override fs styling
        padding-top: calc(100% / 2) !important; // override fs styling
      }
    }
  }
}

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



/*============================================================================
  #Site Footer
==============================================================================*/
.site-footer-wrapper {
  position: relative;
  background-color: $colorFooterBg;
  color: $colorFooterText;
  text-align: left;
  hr {
    border-top: 1px solid rgba($colorFooterText, 0.5);
  }

}

.site-footer {
  padding-top: $gutter;
  padding-bottom: $gutter;

	.image {
		display: block;
		margin: 0 0 15px 0;
	}

	.title {
		margin: 0 0 15px 0;
		font-size: 24px;
		line-height: 1.5;
		text-transform: uppercase;
	}

	.description {
		margin: 0 0 15px 0;
		font-size: 14px;
		line-height: 1.5;
	}

	.menu {
		display: block;
		margin: 0;
		padding: 0;
		list-style: none;

		a {
			display: block;
			font-size: 14px;
			line-height: 1.5;
			color: $colorFooterText;
			text-decoration: none;

	    &:hover{
	      color: rgba($colorFooterText, 0.9);
	    }
		}

		&.layout-horizontal {
			li {
				display: inline-block;
				margin: 0;
				padding: 0;
			}

			li + li {
				margin-left: 15px;
			}
		}

		&.layout-vertical {
			li {
				display: block;
				margin: 0;
				padding: 10px 0;
			}
		}

		&.layout-bar {
			border-top: solid 1px $black;
			border-bottom: solid 1px $black;

			li {
				display: block;
				margin: 0;
				padding: 10px 0;
			}

		}


	}

	.social-icons {
		display: block;
		margin: 15px 0 0 0;
		padding: 0;

		.social-icon {
			display: inline-block;
			margin: 0;
			padding: 0;
			font-size: 24px;
			color: $colorFooterText;
			text-decoration: none;

	    &:hover{
	      color: rgba($colorFooterText, 0.9);
	    }
		}

		.social-icon + .social-icon {
			margin-left: 15px;
		}
	}

}

.footer-quicklinks li{
  margin: 0 0 $gutter/2 0;
}

.footer-secondary,
.footer-quicklinks{
  @include uppercase();
  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{
  @include uppercase();
  margin-bottom: 0px;
  display: inline-block;
  a{
    text-decoration: none;
  }
  @include at-query ($max, $large) {
    margin: $gutter 0 0 0;
    text-align: center;
  }
}
@include at-query ($min, $large) {
  .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; }
  }
}
.footer-social, .footer-payment, .footer-secondary{
  line-height: 2.5em;
  li{ margin: $gutter*0.5 $gutter/4 0 $gutter/4; }
}

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

/*============================================================================
  #Product and Collection Grids
==============================================================================*/
.money {
	color: $colorPrimary;

	&.on-sale {
		color: $boxfox-pink;
	}

	&.compare-at {
		color: $colorPrimary;
		text-decoration: line-through !important;
	}
}

.figcaption a{
  text-decoration: none;
}

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

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

.add-to-cart__notify {
  display: none !important; // override klaviyo

  // .add-to-cart__notify-wrapper .add-to-cart__notify
  .add-to-cart__notify-wrapper & {
    display: block !important; // override klaviyo
  }
}

.product__build-oos {

  // .product__build-oos.button
  &.button {
    display: none;
  }
}

.product__arrows{
  padding-bottom: $gutter;
}

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

a .price_wrapper{
  color: $colorTextBody;
}

.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
.product-grid-item .figcaption.under{
  position: relative;
  padding: $gutter/2 0;
}

// .product-grid-item .figcaption-small.under
.product-grid-item .figcaption--small.under {
  padding-right: 50px;

  @include respond-to('medium') {
    padding-right: 40px;
  }
}

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

.share__link{
  @extend .uppercase;
}

/*=== Sensible heights for product grid images ===*/
.product-grid-item{
  text-align: center;
}
.grid__image {
  display: block;
}
.lt-ie9 .grid__image img,
.ie9 .grid__image img{
  top: 0;
}


html:not(.lt-ie9) .image_autoheight_enable{
$xl: 960px;
$double-xl: 1120px;

.grid__image img {
  max-height: 100%;
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

@include at-query($max, $small) {
  .small--one-whole > .grid__image{
    height: auto !important;
    img{
      max-height: none;
      top: auto;
      -webkit-transform: translateY(0);
      -ms-transform: translateY(0);
      transform: translateY(0);
    }
  }
}

@media only screen and (min-width: ($small + 1px) ) and (max-width: ($medium) ){
  .medium--one-whole > .grid__image{
    height: auto !important;
    img{
      max-height: none;
      top: auto;
      -webkit-transform: translateY(0);
      -ms-transform: translateY(0);
      transform: translateY(0);
    }
  }
}
@include at-query($min, $large) {
  .large--one-whole > .grid__image{
    height: auto !important;
    img{
      max-height: none;
      top: auto;
      -webkit-transform: translateY(0);
      -ms-transform: translateY(0);
      transform: translateY(0);
    }
  }
}

/* Small */
@include at-query($max, $small) {
  .small--one-half,
  .small--one-third,
  .medium--one-half,
  .medium--one-third,
  .medium--one-quarter,
  .medium--one-fifth,
  .medium--one-sixth,
  .large--one-half,
  .large--one-third,
  .large--one-quarter,
  .large--one-fifth,
  .large--one-sixth,
  .one-half,
  .one-third,
  .one-quarter,
  .one-fifth,
  .one-sixth{
    .grid__image{ height: $small/2; }
  }
  .small--one-half .grid__image{
    height: ($small - (2 *  $gutter) ) / 2;
  }
  .small--one-third .grid__image{
    height: ($small - (3 *  $gutter) ) / 3;
  }
  .small--one-quarter .grid__image{
    height: ($small - (4 *  $gutter) ) / 4;
  }
  .small--one-fifth .grid__image{
    height: ($small - (5 *  $gutter) ) / 5;
  }
  .small--one-sixth .grid__image{
    height: ($small - (6 *  $gutter) ) / 6;
  }
}

/* Medium */
@media only screen and (min-width: ($small + 1px) ) and (max-width: ($medium) ){
  .medium--one-half .grid__image,
          .one-half .grid__image {
    height: ($small - (2 *  $gutter) ) / 2;
  }
  .medium--one-third .grid__image,
          .one-third .grid__image {
    height: ($small - (3 *  $gutter) ) / 3;
  }
  .medium--one-quarter .grid__image,
          .one-quarter .grid__image {
    height: ($small - (4 *  $gutter) ) / 4;
  }
  .medium--one-fifth .grid__image,
          .one-fifth .grid__image {
    height: ($small - (5 *  $gutter) ) / 5;
  }
  .medium--one-sixth .grid__image,
          .one-sixth .grid__image {
    height: ($small - (6 *  $gutter) ) / 6;
  }
}

/* Large */
@media only screen and (min-width: ($medium + 1px) ) and (max-width: ($xl) ){
  .large--one-half .grid__image,
         .one-half .grid__image {
    height: ($medium - (2 *  $gutter) ) / 2;
  }
  .large--one-third .grid__image,
         .one-third .grid__image {
    height: ($medium - (3 *  $gutter) ) / 3;
  }
  .large--one-quarter .grid__image,
         .one-quarter .grid__image {
    height: ($medium - (4 *  $gutter) ) / 4;
  }
  .large--one-fifth .grid__image,
         .one-fifth .grid__image {
    height: ($medium - (5 *  $gutter) ) / 5;
  }
  .large--one-sixth .grid__image,
         .one-sixth .grid__image {
    height: ($medium - (6 *  $gutter) ) / 6;
  }
}

/* XL */
@include at-query($min, $xl) {
  .large--one-half .grid__image,
         .one-half .grid__image {
    height: ($xl - (2 *  $gutter) ) / 2;
  }
  .large--one-third .grid__image,
         .one-third .grid__image {
    height: ($xl - (3 *  $gutter) ) / 3;
  }
  .large--one-quarter .grid__image,
         .one-quarter .grid__image {
    height: ($xl - (4 *  $gutter) ) / 4;
  }
  .large--one-fifth .grid__image,
         .one-fifth .grid__image {
    height: ($xl - (5 *  $gutter) ) / 5;
  }
  .large--one-sixth .grid__image,
         .one-sixth .grid__image {
    height: ($xl - (6 *  $gutter) ) / 6;
  }
}

/* Double XL */
@include at-query($min, $double-xl) {
  .large--one-half .grid__image,
         .one-half .grid__image {
    height: ($double-xl - (2 *  $gutter) ) / 2;
  }
  .large--one-third .grid__image,
         .one-third .grid__image {
    height: ($double-xl - (3 *  $gutter) ) / 3;
  }
  .large--one-quarter .grid__image,
         .one-quarter .grid__image {
    height: ($double-xl - (4 *  $gutter) ) / 4;
  }
  .large--one-fifth .grid__image,
         .one-fifth .grid__image {
    height: ($double-xl - (5 *  $gutter) ) / 5;
  }
  .large--one-sixth .grid__image,
         .one-sixth .grid__image {
    height: ($double-xl - (6 *  $gutter) ) / 6;
  }
}
}

/*============================================================================
  #Collections
==============================================================================*/
.filter--active {
  font-weight: bold;
}
.collection{
  background: $colorBody;
  padding-top: $gutter*2;
  padding-bottom: $gutter*4;
  .main-content{ padding-bottom: 0; }
}
.template-collection .main-content{
  padding-bottom: 0;
}

.collection__sort{
  padding: $gutter/2 0;
  border-bottom: 1px solid $colorBorder;
  font-size: 0.85em;
}

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

/*============================================================================
  #Breadcrumbs
==============================================================================*/
.breadcrumb {
  margin-bottom: $gutter;
  margin-top: 0 - $gutter;
  font-size: 0.7em;
  @include uppercase;
  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;
}

.product-page{
  padding-top: $gutter*2;
  padding-bottom: $gutter;
  background-color: {{ settings.product_background_color }};
}
.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;
  @include uppercase();
}

.card-to-and-from {
	@include flexbox;
	@include flex-flow(row nowrap);
	@include justify-content(flex-start);
	@include align-items(flex-start);
	@include align-content(flex-start);

	.input-wrapper {
		width: 100%;

		&.to-field {
			padding-right: 15px;
		}

		&.from-field {
			padding-left: 15px;
		}

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

		&:last-child {
			padding-right: 0 !important;
		}
	}

	@include respond-to('max-width: 768px') {
		@include flex-flow(row wrap);

		.input-wrapper.to-field,
		.input-wrapper.from-field {
			padding-left: 0 !important;
			padding-right: 0 !important;
		}
	}

}

.card-message-wrapper {
	margin: 1em 0;

	textarea {
		margin: 0;
	}
}

.product__slides{
  margin-bottom: $gutter;
  overflow-y: hidden;
  a, img {
    display: block;
    margin: 0 auto;
  }
  li {
    margin-bottom: $gutter;
  }
}
.product__photo,
.product__photo img{
  @include at-query ($max, $medium) {
    max-height: $small;
  }
  @include at-query ($min, $medium) {
    max-height: $small * 1.5;
  }
}
.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;
}
.share__link{
  text-decoration: none;
  margin-left: $gutter/2;
  margin-right: $gutter/2;
}
.vendor__link a{
  text-decoration: none;
}

.product-description--below{
  margin-top: $gutter*2;
}

.marketplace-item #gsAppContainer {
	display: none !important;
}

/*============================================================================
  #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{ @include transition(transform .15s 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{
  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;
  @include at-query ($max, $medium) {
    margin-top: -100px;
  }
}

.blog__article--card{
  margin-top: $gutter;
  margin-bottom: 0;
}
.blog .blog__article--card{
  margin-top: 0;
  margin-bottom: $gutter;
}

.blog__article--image{
  background-size: cover;
  background-position: center center;
  z-index: 0;
  position: relative;
  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{
    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;
  font-family: 'Brandon Text';
  .accent{
    opacity: 0.6;
  }
  h2 {
    font-family: 'Brandon Text';
  }
}
.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;
  @include 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;
  }
}

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

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

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

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

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

  &:first-child {
    padding-top: 0;
    border-top: 0 none;
  }
  a{
    text-decoration: none;
  }
  .js-qty {
    margin: 0;
  }

  .cart__item__title {
    a {
      font-family: 'Brandon Text';
    }
  }
}
.cart__row--table-large {
  span {
    font-family: 'Brandon Text';
  }
}
@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);

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

.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,
#your-shopping-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: bold;
      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 {
  @include title();
  font-size: em(42px);
  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);
  }

  @include at-query($min, $large) {
    font-size: em(55px);
  }
  .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.5 * $baseFontSize;
  font-size: 95%;
  color: $colorFooterText;
  a{
    text-decoration: none;
    margin: 0 $gutter / 2;
    @include at-query($max, $medium) {
      display: block;
      margin-top: $gutter/2;
    }
  }
}

/*============================================================================
  #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: {{ settings.product_background_color }};
  }
}

/* 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: 46px;
      font-size: 3rem;
      letter-spacing: normal;
      color: {{ settings.product_slideshow_arrows }};
    }
    @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 {

}

.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;
    }
    @media all and (max-width: 767px) {
      width: 90%;
    }
  }
}

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


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

.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: inline-block;
}

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

/*============================================================================
  #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: 300px;
  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; }

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


/*============ SPLASH PAGES | ABOVE MARKET ==================*/
.splash-page-section {
	display: block;
	margin: 0 auto;

	// Backgrounds
	.background-white {
		color: $black;
		background-color: $white;
	}

	.background-nude {
		color: $black;
		background-color: $nude;
	}

	.background-blush {
		color: $black;
		background-color: $blush;
	}

	.background-black {
		color: $white;
		background-color: $black;
	}

	// Buttons
	.btn-white {
		color: $black;
		background-color: $white;
	}

	.btn-nude {
		color: $black;
		background-color: $nude;
	}

	.btn-blush {
		color: $white;
		background-color: $blush;
	}

	.btn-black {
		color: $white;
		background-color: $black;
        font-size: 12px;
        letter-spacing: 0px;
        font-weight: 400;
        line-height: 20px;
        border-radius: 0px;
        padding: 11px 30px;
	}

	// Typography
	h1, h2, h3, h4, h5, h6, p, ul, ol, li {
		color: inherit;
	}
}

// Section block types
.splash-page-section {
	display: block;
	margin: 0 auto;
	padding: 0;

	@include at-query($max, $medium) {
		.wrapper {
			padding: 0;
		}
  }
}


.editorial-content {
	position: relative;
	display: flex;
	flex-flow: row wrap;
	align-items: center;
	justify-content: center;

	.editorial-content-image {
		margin: 0;
		width: 50%;
		padding: 0;

		&.image-only {
			width: 100%;
		}

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

		@include at-query($max, $medium) {
			width: 100%;
			order: 1 !important;
		}
	}

	.editorial-content-copy {
		margin: 0;
		width: 50%;
		padding: 80px;
		text-align: left;

		@include at-query($max, $medium) {
			padding: 20px $gutter 40px;
			width: 100%;
			order: 2 !important;
    }

    // .splash-page-section__lets-get-started .editorial-content .editorial-content-copy
    .splash-page-section__lets-get-started & {
      max-width: 1000px;

      @include at-query($min, $medium) {
        padding: 40px 80px 80px;
      }
    }

    // .splash-page-section__at-your-service .editorial-content .editorial-content-copy
    .splash-page-section__at-your-service & {
      max-width: 360px;
      padding: 20px;
    }
	}

	&.image-left .editorial-content-image { order: 1; }
	&.image-left .editorial-content-copy { order: 2; }

	&.image-right .editorial-content-image { order: 2; }
	&.image-right .editorial-content-copy { order: 1; }

	&.text-only .editorial-content-image { display: none; }
  &.text-only .editorial-content-copy { width: 100%; text-align: center; }

  // .editorial-content .editorial-form
  .editorial-form {
    display: flex;
    flex-direction: column;

    // .editorial-content .editorial-form .editorial-form__row
    .editorial-form__row {
      display: flex;
      flex-direction: row;

      @include at-query ($max, $medium - 1) {
        flex-direction: column;
      }
    }

    // .editorial-content .editorial-form .editorial-form__label
    .editorial-form__label {
      margin: 0 10px;
      text-align: left;

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

    // .editorial-content .editorial-form .editorial-form__label-col
    .editorial-form__label-col {
      display: flex;
      flex-direction: column;
      flex-basis: 50%;
      margin: 0 10px;

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

    // .editorial-content .editorial-form select,
    // .editorial-content .editorial-form input
    select,
    input {
      padding: 12px 10px;
    }
  }
}

.editorial-form__btn-container {
  display: flex;
  justify-content: center;

  @include at-query($max, $medium - 1) {
    flex-direction: column;
  }
}

.editorial-form__submit {
  padding: 0px 90px !important; // override input styling on form
  margin: 0 5px;
}

.editorial-form__request-btn {
  border: solid black 1px;
  padding: 0px 55px !important; // override padding set by .btn
  margin: 0 10px;

  @include at-query($max, $medium - 1) {
    margin: 10px 0 0;
  }
}

.editorial-form__header {
  display: flex;
  flex-direction: row;
  padding: 30px;

  @include at-query($max, $medium - 1) {
    flex-direction: column;
    padding: 50px 30px 25px;
  }

  // .editorial-form__header hr
  hr {
    margin: 0 50px;
    height: inherit;
    border-width: 1px;

    @include at-query($max, $medium - 1) {
      margin: 25px 0 40px;
    }
  }
}

.editorial-form__heading {
  text-align: left;
  flex-basis: 50%;
}

.editorial-form__heading-header {

  @include at-query($max, $medium - 1) {
    padding: 0 8px;
  }
}

.editorial-form__logo-wrapper {
  flex-basis: 50%;
  display: flex;
  align-items: center;
  justify-content: end;
}

@media all and (max-width: 767px) {
  .editorial-form__logo-wrapper {
    justify-content: center;
  }
}

.editorial-form__logo-wrapper img {
  width: 525px;
}

.editorial-form__logo-divider {
  border-top: 1px solid black;
}

.editorial-form__copy {
  text-align: left;
  max-width: 525px;
  margin-bottom: 5px;

  @include at-query($max, $medium - 1) {
    margin: 0 auto 20px;
  }
}

.editorial-form__request {
  background-color: #FDF0E2;
  border-radius: 16px;
  width: fit-content;
  padding: 5px 24px;

  @include at-query($max, $medium - 1) {
    padding: 8px 24px;
  }
}

.editorial-form__request-email {

  @include at-query($max, $medium - 1) {
    white-space: nowrap;
  }
}

.one-product-block {

	.product-block {
		position: relative;
		display: flex;
		flex-flow: row wrap;
		align-items: center;
		justify-content: center;
		padding: 0;

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

	.product-block-images {
		margin: 0;
		width: 50%;
		padding: 0;

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

		@include at-query($max, $medium) {
			width: 100%;
			order: 1 !important;
		}
	}

	.product-block-info {
		margin: 0;
		width: 50%;
		padding: 80px;
		text-align: left;

		@include at-query($max, $medium) {
			padding: 40px 0 0 0;
			width: 100%;
			order: 2 !important;
		}
	}

	&.image-left .product-block-images { order: 1; }
	&.image-left .product-block-info { order: 2; }

	&.image-right .product-block-images { order: 2; }
	&.image-right .product-block-info { order: 1; }

	form,
	.image-slider,
	.js-qty {
		margin: 0 auto;
	}

}

.two-product-block {
	position: relative;
	display: flex;
	flex-flow: row wrap;
	align-items: center;
	justify-content: center;

	.product-block {
		margin: 0;
		width: 50%;
		padding: $gutter;
		text-align: center;

		@include at-query($max, $medium) {
			width: 100%;
		}
	}

	.product-block-images {
		margin-bottom: $gutter;

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

	.product-block-info {
		margin: 0;
	}

	form,
	.image-slider,
	.js-qty {
		margin: 0 auto;
	}

}

.gallery-images {
	display: block;
	margin: 0;
	padding: $gutter 0;

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

	&:after {
		content: '';
		display: table;
		clear: both;
	}

	.gallery-image {
		position: relative;
		float: left;
		padding: 0 0 100% 0;
		width: 100%;

		&.primary {
			padding: 0 0 66.666% 0;
			width: 66.666%;

			@include at-query($max, $medium) {
				float: none;
				padding: 0 0 100% 0;
				width: 100%;
			}
		}

		&.secondary {
			padding: 0 0 33.333% 0;
			width: 33.333%;

			@include at-query($max, $medium) {
				padding: 0 0 50% 0;
				width: 50%;
			}
		}
	}

	@include at-query($max, $medium) {
		.gallery-image.primary .gallery-image-wrapper {
			margin: 0;
		}

		.gallery-image.primary + .gallery-image.secondary .gallery-image-wrapper {
			margin: 10px 5px 10px 0;
		}

		.gallery-image.secondary + .gallery-image.secondary .gallery-image-wrapper {
			margin: 10px 0 10px 5px;
		}
	}

	&.large-image-left .gallery-image.primary { float: left; }
	&.large-image-right .gallery-image.primary { float: right; }

	.gallery-image-wrapper {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		margin: 10px;
		background-position: center;
		background-repeat: no-repeat;
		background-size: cover;


		img {
			display: none;
			margin: 0;
			width: 100%;
			height: auto;
		}
	}

}

.gallery-images-section + .gallery-images-section {
	margin-top: -($gutter * 2);
}

.product-grid {

	.product-grid-header {
		margin: 0;
		padding: 80px;
		text-align: center;

		@include at-query($max, $medium) {
			padding: 40px $gutter;
		}
	}

}

.press-logos {
	padding: 80px 0;
  text-align: center;

  @include at-query($max, $medium - 1) {
    padding: 40px 30px;
  }

	.press-logos-container {
		@include flexbox;
		@include flex-flow(row wrap);
		@include justify-content(center);
		@include align-items(center);
		@include align-content(center);

		@media (min-width: 769px) {
			&.lg-columns-1 .logo { width: 100%; }
			&.lg-columns-2 .logo { width: 50%; }
			&.lg-columns-3 .logo { width: 33.33%; }
			&.lg-columns-4 .logo { width: 25%; }
			&.lg-columns-5 .logo { width: 20%; }
			&.lg-columns-6 .logo { width: 16.66%; }
		}

		@media (max-width: 768px) {
			&.md-columns-1 .logo { width: 100%; }
			&.md-columns-2 .logo { width: 50%; }
			&.md-columns-3 .logo { width: 33.33%; }
			&.md-columns-4 .logo { width: 25%; }
			&.md-columns-5 .logo { width: 20%; }
			&.md-columns-6 .logo { width: 16.66%; }
		}

		@media (max-width: 480px) {
			&.sm-columns-1 .logo { width: 100%; }
			&.sm-columns-2 .logo { width: 33.33%; }
			&.sm-columns-3 .logo { width: 33.33%; }
			&.sm-columns-4 .logo { width: 25%; }
			&.sm-columns-5 .logo { width: 20%; }
			&.sm-columns-6 .logo { width: 16.66%; }
		}

		.logo {
			margin: 0;
      padding: 20px;

      @include at-query($max, $medium - 1) {
        padding: 10px;
      }
		}

	}
}

.client-testimonials {
	padding: 80px 0;
  text-align: center;
  background-color: #FDF0E2;
  position: relative;

  @include at-query($max, $medium - 1) {
    padding: 80px 30px;
  }

  // .client-testimonials .client-testimonials-container
	.client-testimonials-container {
		@include flexbox;
		@include justify-content(center);
		@include align-items(stretch);
    @include align-content(stretch);

    @media (max-width: 767px) {
      flex-direction: column;
    }

		@media (min-width: 769px) {
			&.lg-columns-1 .testimonial { width: 100%; }
			&.lg-columns-2 .testimonial { width: 50%; }
			&.lg-columns-3 .testimonial { width: 33.33%; }
			&.lg-columns-4 .testimonial { width: 25%; }
		}

		@media (max-width: 768px) {
			&.md-columns-1 .testimonial { width: 100%; }
			&.md-columns-2 .testimonial { width: 50%; }
			&.md-columns-3 .testimonial { width: 33.33%; }
			&.md-columns-4 .testimonial { width: 25%; }
		}

		@media (max-width: 480px) {
			&.sm-columns-1 .testimonial { width: 100%; }
			&.sm-columns-2 .testimonial { width: 50%; }
			&.sm-columns-3 .testimonial { width: 33.33%; }
			&.sm-columns-4 .testimonial { width: 25%; }
		}

    // .client-testimonials .client-testimonials-container .testimonial
		.testimonial {
			@include flexbox;
			@include flex-flow(column nowrap);
			@include justify-content(center);
			@include align-items(stretch);
			@include align-content(stretch);
			margin: 0;
      padding: 20px;
      border: 1px solid black;
      position: relative;
      height: 285px;
      max-width: 371px;

      // .client-testimonials .client-testimonials-container .testimonial:nth-child(1n)
      &:nth-child(1n) {

        @include at-query($max, $medium - 1) {
          border-top: none;
        }

        @include at-query($min, $medium) {
          border-right: none;
        }
      }

      // .client-testimonials .client-testimonials-container .testimonial:first-child
      &:first-child {
        @include at-query($max, $medium) {
          border-top: 1px solid black;
        }
      }


      // .client-testimonials .client-testimonials-container .testimonial .text
			.text {
				@include flex(1 1 auto);
				margin-bottom: 20px;
			}

      // .client-testimonials .client-testimonials-container .testimonial .logo
			.logo {
				@include flex(0 0 auto);
        margin: 0;
        position: absolute;
        left: 50%;
        transform: translate(-50%, -10%);
        bottom: 10%;
			}
    }

    // .client-testimonials .client-testimonials-container .testimonial-content
    .testimonial-content {
      align-items: center;
    }

    // .client-testimonials .client-testimonials-container .testimonial-quotes
    .testimonial-quotes {
      background: url("{{ 'quotes.svg' | asset_url }}") no-repeat;
      height: 15px;
      width: 47px;
      position: absolute;
      top: 40px;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  }

  // .client-testimonials h3
  h3 {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white !important; // override default h3 color styling
    background: black;
    padding: 10px 15px;
    text-transform: uppercase;
    font-size: 16px;

    @include at-query($max, $medium - 1) {
      width: 75%;
    }
  }

  // .client-testimonials .slide
  .slide {
    float: left;
    min-height: 1px;
  }

  // .client-testimonials .slick-slide
  .slick-slide {
    @include flexbox;
    @include justify-content(center);
    @include align-items(center);
    margin: 0;
    padding: 0;
    height: auto;

    // .client-testimonials .slick-slide img
    img {
      margin: 0 auto;
    }
  }

  // .client-testimonials .slick-track
  .slick-track {
    @include flexbox;

    @include at-query($min, $medium + 1) {
      left: 13px;
    }
  }

  // .client-testimonials .slick-dots
  .slick-dots {
    display: flex;
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);

    // .client-testimonials .slick-dots li
    li {
      margin: 0 0.25rem;
    }

    // .client-testimonials .slick-dots li
    button {
      border: 1px solid black;
      border-radius: 100%;
      display: inline-block;
      height: 14px;
      width: 14px;
      position: relative;
    }

    // .client-testimonials .slick-dots li.slick-active button
    li.slick-active button::before {
      content: "";
      display: block;
      position: absolute;
      width: 7px;
      height: 7px;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background: black;
      border-radius: 100%;
    }
  }

  // .client-testimonials .slick-arrow
  .slick-arrow {
    position: absolute;
    top: 50%;
    margin: 0;
    padding: 0;
    width: 30px;
    height: 30px;
    font-size: 20px;
    line-height: 30px;
    text-align: center;
    color: inherit;
    cursor: pointer;

    @include transform(translateY(-50%));

    // .client-testimonials .slick-arrow .fa
    // .client-testimonials .slick-arrow .far
    .fa,
    .far {
      vertical-align: middle;
    }

    // .client-testimonials .slick-arrow.previous
    &.previous {
      left: 0;
    }

    // .client-testimonials .slick-arrow.mext
    &.next {
      right: 0;
    }
  }
}

.media-grid__container {
  display: grid;
  list-style: none;
  grid-template-columns: repeat(30, 1fr);
  padding-top: 96px;

  @include at-query($max, $medium) {
    padding: 50px 15px 20px !important; // override splash page padding
  }

  // .media-grid__container .media-grid__media
  .media-grid__media {

    // .media-grid__container .media-grid__media:nth-child(1)
    &:nth-child(1) {
      grid-row: 2 / span 10;
      grid-column: 1/span 10;
      z-index: 0;

      @include at-query($max, $medium - 1) {
        grid-row: 32 / span 10;
        grid-column: 1/span 12;
        z-index: 0;
      }
    }

    // .media-grid__container .media-grid__media:nth-child(2)
    &:nth-child(2) {
      grid-row: 1 / span 10;
      grid-column: 13 / span 18;
      z-index: 4;

      @include at-query($max, $medium - 1) {
        grid-row: 1 / span 10;
        grid-column: 3 / span 27;
        z-index: 1;
        padding-bottom: 20px;
      }
    }

    // .media-grid__container .media-grid__media:nth-child(3)
    &:nth-child(3) {
      grid-row: 9 / span 10;
      grid-column: 7 / span 9;
      z-index: 1;

      @include at-query($max, $medium - 1) {
        grid-row: 40 / span 10;
        grid-column: 6 / span 11;
        z-index: 1;
      }
    }

    // .media-grid__container .media-grid__media:nth-child(4)
    &:nth-child(4) {
      grid-row: 12 / span 13;
      grid-column: 17 / span 10;

      @include at-query($max, $medium - 1) {
        grid-row: 33 / span 18;
        grid-column: 19 / span 16;
      }
    }

    // .media-grid__container .media-grid__media:nth-child(5)
    &:nth-child(5) {
      grid-row: 20 / span 7;
      grid-column: 5 / span 10;

      @include at-query($max, $medium - 1) {
        grid-row: 46 / span 11;
        grid-column: 15 / span 15;
      }
    }
  }
}

/*
.collection-header {
	position: relative;
	display: flex;
	flex-flow: row wrap;
	align-items: center;
	justify-content: center;

	.collection-header-title {
		margin: 0;
		width: 100%;
		padding: 50px $gutter;
		text-align: center;

		@include at-query($max, $medium) {
			order: 1;
		}
	}

	.collection-header-image {
		margin: 0;
		width: 40%;
		padding: 0;

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

		@include at-query($max, $medium) {
			width: 100%;
			order: 2;
		}
	}

	.collection-header-text {
		margin: 0;
		width: 60%;
		padding: 0 40px;

		@include at-query($max, $medium) {
			padding: 40px $gutter;
			width: 100%;
			order: 3;
		}
	}
}

.featured-item {
	float: left;
	padding-left: 30px;
	width: 100%;
	min-height: 1px;
	vertical-align: top;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;

	.two-columns & {
		width: 50%;
	}

	.featured-item-wrapper {
		display: flex;
		flex-flow: row wrap;
		align-items: center;
		justify-content: center;
	}

	.featured-item-slideshow {
		margin: 0;
		width: 50%;
	}

	.featured-item-info {
		margin: 0;
		width: 50%;
		padding: 0 40px;
	}
}

*/




.team-members {
	@include flexbox;
	@include flex-flow(row wrap);
	@include justify-content(flex-start);
	@include align-items(flex-start);
	@include align-content(flex-start);

	margin-left: -20px;
	margin-right: -20px;

	.team-member {
		padding: 30px 20px;
		width: 33.33%;
		text-align: left;
		text-decoration: none;
		cursor: pointer;

		@include respond-to('medium') {
		  width: 50%;
		}

		@include respond-to('small') {
		  width: 100%;
		}
	}

	.team-member-image {
		position: relative;
		margin-bottom: 20px;
		padding: 0;
		overflow: hidden;

		img {
			display: block;
			margin: 0 auto;
			width: auto;
			max-width: 100%;
			@include transition(all 0.25s ease);
		}
	}

	.team-member:hover,
	.team-member:active,
	.team-member:focus {
		.team-member-image img {
			@include transform(scale(1.03));
		}
	}


	.team-member-name {
		margin: 0;
		color: $black;
	}

	.team-member-title {
		margin: 0;
		color: $grey;
	}

	.team-member-location {
		margin: 0;
	}
}

.no-scroll {
	overflow: hidden !important;
}

.person-modal {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 100px 20px;
	background: rgba(255, 255, 255, 1);
	overflow: auto;
	z-index: 99999;
	-webkit-overflow-scrolling: touch;

	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	@include transform(scale(1.25));
	@include transition(all 0.25s ease);

	&.visible {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		@include transform(scale(1));
	}

	.person-modal-inner {
		position: relative;
		margin: 0 auto;
		width: 1200px;
		max-width: 100%;
	}

	.person-modal-close {
		position: absolute;
		top: -40px;
		right: 0;
		width: 40px;
		height: 40px;
		line-height: 30px;
		color: $grey;
		font-size: 40px;
		font-weight: 300;
		text-align: center;
		text-decoration: none;
	}

	.person-modal-bio {
		@include flexbox;
		@include flex-flow(row wrap);
		@include justify-content(flex-start);
		@include align-items(flex-start);
		@include align-content(flex-start);

		.person-modal-name {
			margin: 0;
			color: $black;
			font-size: 36px;
			width: 100%;
		}

		.person-modal-title {
			margin: 0;
			color: $grey;
			font-size: 32px;
			width: 100%;
		}

		.person-modal-location {
			margin: 0;
			color: $grey;
			font-size: 24px;
			font-weight: 300;
			width: 100%;
		}

		.person-modal-about {
			padding: 30px 30px 30px 0;
			color: $grey;
			font-size: 18px;
			width: 50%;

			@include respond-to('medium') {
				padding: 30px 0;
			  width: 100%;
			}

			p {
				font-size: 18px;
			}
		}

		.person-modal-image {
			padding: 30px 0 30px 30px;
			width: 50%;

			@include respond-to('medium') {
				padding: 30px 0;
			  width: 100%;
			}

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

.job-postings {
	@include flexbox;
	@include flex-flow(row wrap);
	@include justify-content(flex-start);
	@include align-items(flex-start);
	@include align-content(flex-start);

	margin-left: -20px;
	margin-right: -20px;

	.job-posting {
		padding: 30px 20px;
		width: 33.33%;
		text-align: left;
		text-decoration: none;
		cursor: pointer;

		@include respond-to('medium') {
		  width: 50%;
		}

		@include respond-to('small') {
		  width: 100%;
		}
	}

	.job-posting-title {
		margin: 0;
		color: $black;
	}

	.job-posting-location {
		margin: 0;
		color: $grey;
	}
}


.job-modal {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 100px 20px;
	background: rgba(255, 255, 255, 1);
	overflow: auto;
	z-index: 99999;
	-webkit-overflow-scrolling: touch;

	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	@include transform(scale(1.25));
	@include transition(all 0.25s ease);

	&.visible {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		@include transform(scale(1));
	}

	.job-modal-inner {
		position: relative;
		margin: 0 auto;
		width: 1200px;
		max-width: 100%;
	}

	.job-modal-close {
		position: absolute;
		top: -40px;
		right: 0;
		width: 40px;
		height: 40px;
		line-height: 30px;
		color: $grey;
		font-size: 40px;
		font-weight: 300;
		text-align: center;
		text-decoration: none;
	}

	.job-modal-bio {
		@include flexbox;
		@include flex-flow(row wrap);
		@include justify-content(flex-start);
		@include align-items(flex-start);
		@include align-content(flex-start);

		.job-modal-title {
			margin: 0;
			color: $black;
			font-size: 36px;
			width: 100%;
		}

		.job-modal-location {
			margin: 0;
			color: $grey;
			font-size: 32px;
			width: 100%;
		}

		.job-modal-about {
			padding: 30px 30px 30px 0;
			color: $grey;
			font-size: 18px;
			width: 60%;

			@include respond-to('medium') {
				padding: 30px 0;
			  width: 100%;
			}

			p {
				font-size: 18px;
			}
		}

		.job-modal-button {
			padding: 30px 0 30px 30px;
			width: 40%;

			@include respond-to('medium') {
				padding: 30px 0;
			  width: 100%;
			}

			.btn {
				display: block;
				margin: 0;
				width: 100%;
				max-width: 100%;
			}
		}
	}
}




.newsletter-modal {
	position: fixed;
	overflow: auto;
	-webkit-overflow-scrolling: touch;
	z-index: 99999;

	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	@include transition(opacity 0.5s ease);

	&.visible {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
	}

	&.full-screen-modal {
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		padding: 20px;
		background: rgba(red($nude), green($nude), blue($nude), 0.8);

		.newsletter-modal-inner {
			@include flexbox;
			@include flex-flow(row nowrap);
			@include justify-content(center);
			@include align-items(center);
			@include align-content(center);

			width: 100%;
			min-height: 100%;
			@include transform(translateY(10%));
			@include transition(all 0.5s ease);
		}

		.newsletter {
			position: relative;
			max-width: 600px;
			background: $white;
		}

		&.visible .newsletter-modal-inner {
			@include transform(translateY(0));
		}
	}

	&.bottom-slide-up {
		top: auto;
		left: 0;
		right: 0;
		bottom: 0;
		box-shadow: 0px -3px 5px rgba(0, 0, 0, 0.1);
		@include transform(translateY(100%));
		@include transition(transform 0.5s ease);

		.newsletter-modal-inner {
			width: 100%;
			background: $white;
		}

		.newsletter {
			position: relative;
			background: $white;

			form {
				margin: 0 auto;
				max-width: 600px;
			}
		}

		&.visible {
			@include transform(translateY(0));
		}

	}

	.newsletter-modal-inner {
		position: relative;
		margin: 0 auto;
	}

	.newsletter {
		padding: 25px;

		.form-message {
			margin: 0;
			padding: 0;
			text-align: center;

			&.error {
				margin-bottom: 15px;
				padding: 10px 20px;
		    color: $errorRed;
				background-color: $errorRedBg;
				border: solid 1px $errorRed;
			}

			&.success {
				margin-bottom: 15px;
				padding: 10px 20px;
	  		color: $successGreen;
	  		background: $successGreenBg;
	  		border: solid 1px $successGreen;
			}
		}

		.newsletter-close {
			position: absolute;
			top: 0;
			right: 0;
			width: 30px;
			height: 30px;
			line-height: 30px;
			font-size: 24px;
			color: $black;
			text-align: center;
			text-decoration: none;
		}

		.newsletter-image {
			margin: 0 0 15px 0;

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

		.newsletter-title {
			margin: 0 0 15px 0;
			text-align: center;
		}

		.newsletter-description {
			margin: 0 0 15px 0;
			text-align: center;

			p { margin: 0; }
			p+p { margin-top: 15px; }
		}

		.newsletter-inputs {
			@include flexbox;
			@include flex-flow(row wrap);
			@include justify-content(flex-start);
			@include align-items(flex-start);
			@include align-content(flex-start);

			margin: 0;
			padding: 0;

			.field {
				margin: 0;
				padding: 0;
				width: 100%;

				input, button {
					margin: 0;
					padding: 10px 20px;
					width: 100%;
					line-height: 24px;
				}
			}

			.field.field-email {
				padding-right: 10px;
				width: 65%;
			}

			.field.field-button {
				padding-left: 10px;
				width: 35%;
			}

			@include respond-to('max-width: 600px') {
				.field.field-email {
					padding: 0;
					width: 100%;
				}

				.field.field-button {
					padding: 10px 0 0 0;
					width: 100%;
				}
			}
		}

		.newsletter-footer {
			margin: 15px 0 0 0;
			text-align: center;

			p { margin: 0; }
			p+p { margin-top: 15px; }
		}

		form {
			display: block;
			margin: 0;
			padding: 0;
		}
	}


}


.multiple-addresses {
	text-align: left;

	.multiple-address-form {
		display: none;
		margin: 20px 0;
	}

	.disclaimer {
		display: block;
		margin: 10px 0;

	}
}


label.checkbox {
	@include flexbox;
	@include flex-flow(row nowrap);
	@include justify-content(flex-start);
	@include align-items(flex-start);

	margin: 0;
	cursor: pointer;

	input[type="checkbox"] {
		@include flex(0 0 auto);
		position: relative;
		display: inline-block;
		margin: 0 7px 0 0;
		width: 18px;
		height: 18px;
		outline: 0;
		color: $white;
		border-radius: 3px;
		border: solid 2px $black;
		-webkit-appearance: none;
		background: transparent;
		vertical-align: middle;
		cursor: pointer;
		@include transition(all 0.25s ease-in-out);

		&:before {
			position: absolute;
			top: 50%;
			left: 50%;
			content: '\f00c';
			font-family: 'Font Awesome 5 Pro';
			font-weight: 900;
			font-size: 10px;
			opacity: 0;
			@include transform(translate(-50%, -50%));
		}

		&:after {
			display: none;
		}

		&:checked {
			background: $black;
			border: solid 2px $black;

			&:before {
				opacity: 1;
			}

		}

	}

	span {
		@include flex(1 1 auto);
		display: inline-block;
		margin: 0;
		line-height: 18px;
		font-weight: normal;
		vertical-align: middle;
	}
}


#gs__toggle-box label {
	display: inline-block;
	margin-bottom: 40px;
	color: #ffffff !important;
	font-size: 10px !important;
	font-weight: 600;
	font-family: 'Brandon Text';
	text-transform: uppercase;
}


#gsGroups {
	margin-top: 80px;
}


.boxfox-pink {
	color: $boxfox-pink;
}


.site-footer .newsletter-form {
	input[type="email"] {
		font-family: 'Brandon Text',sans-serif !important;
		padding: 0 !important;
		background: none !important;
		border: none !important;
	}

	button {
		font-family: 'Brandon Text',sans-serif !important;
	}
}

/* #Flex Grid
================================================== */
.flex-grid {
	@include flexbox;
	@include flex-flow(row wrap);
	@include justify-content(flex-start);
	@include align-items(center);

/*margin: 0 -20px;*/ 
  	/*^ made footer extend past mobile device width (refinery.cc)*/

	&.vertical-align-top {
		@include align-items(flex-start);
	}

	&.vertical-align-middle {
		@include align-items(center);
	}

	&.vertical-align-bottom {
		@include align-items(flex-end);
	}

	&.horizontal-align-left {
		@include justify-content(flex-start);
	}

	&.horizontal-align-center {
		@include justify-content(center);
	}

	&.horizontal-align-right {
		@include justify-content(flex-end);
	}

	.flex-column {
		padding: 20px;
		width: 100%;

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

		&.one-third {
			width: 33.33%;
		}

		&.two-thirds {
			width: 66.66%;
		}

		@include respond-to('large') {
			&.desktop-one-fourth { width: 25%; }
			&.desktop-two-fourth { width: 50%; }
			&.desktop-three-fourth { width: 75%; }
			&.desktop-four-fourth { width: 100%; }

			&.desktop-one-third { width: 33.33%; }
			&.desktop-two-third { width: 66.66%; }
			&.desktop-three-third { width: 100%; }

			&.desktop-one-half { width: 50%; }
			&.desktop-two-half { width: 100%; }

			&.desktop-one-whole { width: 100%; }
		}

		@include respond-to('medium') {
			&.tablet-one-fourth { width: 25%; }
			&.tablet-two-fourth { width: 50%; }
			&.tablet-three-fourth { width: 75%; }
			&.tablet-four-fourth { width: 100%; }

			&.tablet-one-third { width: 33.33%; }
			&.tablet-two-third { width: 66.66%; }
			&.tablet-three-third { width: 100%; }

			&.tablet-one-half { width: 50%; }
			&.tablet-two-half { width: 100%; }

			&.tablet-one-whole { width: 100%; }

			&.one-half  { width: 100%; }
			&.one-third  { width: 100%; }
			&.two-thirds  { width: 100%; }
		}

		@include respond-to('small') {
			&.mobile-one-fourth { width: 25%; }
			&.mobile-two-fourth { width: 50%; }
			&.mobile-three-fourth { width: 75%; }
			&.mobile-four-fourth { width: 100%; }

			&.mobile-one-third { width: 33.33%; }
			&.mobile-two-third { width: 66.66%; }
			&.mobile-three-third { width: 100%; }

			&.mobile-one-half { width: 50%; }
			&.mobile-two-half { width: 100%; }

			&.mobile-one-whole { width: 100%; }

			&.one-half  { width: 100%; }
			&.one-third  { width: 100%; }
			&.two-thirds  { width: 100%; }
		}

	}
}


/* Notification Bar */
.notification-top-bar,
.notification-bar {
  margin: 0;
  padding: 0;

  .slide {
    float: left;
    min-height: 1px;

    a {
      display: block;
      padding: 5px 30px;
      text-align: center;
      text-decoration: none;
    }
  }

  .slick-slider {
    margin: 0;
    padding: 0;
  }

  .slick-track {
    @include flexbox;
  }

  .slick-slide {
    @include flexbox;
    @include flex-flow(row wrap);
    @include justify-content(center);
    @include align-items(center);
    margin: 0;
    padding: 0;
    height: auto;
  }

  .slick-arrow {
    position: absolute;
    top: 50%;
    margin: 0;
    padding: 0;
    width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    color: inherit;
    cursor: pointer;

    @include transform(translateY(-50%));

    .fa,
    .far {
      vertical-align: middle;
    }

    &.previous {
      left: 0;
    }

    &.next {
      right: 0;
    }
  }
}

/* Blog Carousel */
.blog-carousel {
  margin: 0;
  padding: 0;

  // .blog-carousel .one-whole
  .one-whole {
    padding-left: 0;
  }

  // .blog-carousel .slide
  .slide {
    float: left;
    min-height: 1px;

    // .blog-carousel .slide a
    a {
      display: block;
      padding: 5px 30px;
      text-align: center;
      text-decoration: none;
    }
  }

  // .blog-carousel .slick-slider
  .slick-slider {
    margin: 0;
    padding: 0;
  }

  // .blog-carousel .slick-track
  .slick-track {
    @include flexbox;
  }

  // .blog-carousel .slick-slide
  .slick-slide {
    @include flexbox;
    @include flex-flow(column wrap);
    margin: 0;
    height: auto;
  }

  // .blog-carousel .slick-arrow
  .slick-arrow {
    position: absolute;
    top: 42%;
    margin: 0;
    padding: 0;
    width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    color: inherit;
    cursor: pointer;

    @include transform(translateY(-50%));

    // .blog-carousel .slick-arrow .fa,
    // .blog-carousel .slick-arrow .far
    .fa,
    .far {
      vertical-align: middle;
    }

    // ..blog-carousel .slick-arrow.previous
    &.previous {
      left: 0;

  		@media (max-width: 480px) {
  			left: 5px;
  		}
    }

    // .blog-carousel .slick-arrow.next
    &.next {
      right: -30px;
    }
  }
}

/* Mobile Navigation */
.nav--mobile .header-menu {
	display: none;
	@include flex-flow(row wrap);

	&.main-menu--expanded {
		@include flexbox;
	}

	.bf-top-menu {
		order: 2;
		width: 100%;

		.search-link {
			display: none;
		}

		.account-link {
			margin: 0;
			padding: 0;

			a {
				display: inline-block;
				margin: 0;
				padding: 15px 0;
				font-family: 'Brandon Text';
				text-transform: uppercase;
				letter-spacing: 1px;
				font-size: 0.8em;
			}
		}
	}

	.main-menu {
		order: 1;
		width: 100%;
	}

}

/* Search Widget */
.search-widget {

	.search-widget-inner {
		@include flexbox;
		@include flex-flow(row wrap);
		@include justify-content(center);
		@include align-items(center);
		margin: 0;
		padding: 0;
		width: 100%;
		height: 100%;

		.search-form {
			@include flexbox;
			@include flex-flow(row nowrap);
			@include justify-content(flex-start);
			@include align-items(center);
			@include align-content(center);
			margin: 0 auto;
			padding: 0;
			width: 100%;
			max-width: 600px;
			border: solid 2px $black;
			background: $white;

			.search-input {
				@include flex(1 1 auto);
				margin: 0;
				padding: 20px;
				font-size: 16px;
				line-height: 24px;
				background: transparent;
				border: none;
				outline: none;
			}

			.search-control {
				@include flex(0 0 auto);
				margin: 0;
				padding: 20px;
				font-size: 16px;
				line-height: 24px;
				text-align: center;
				background: transparent;
				border: none;
				outline: none;
			}
		}
	}

	@include respond-to('large') {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		margin: 0;
		padding: 20px;
		background: rgba(red($nude), green($nude), blue($nude), 0.75);
		z-index: 2147483638;

		@include transition(opacity 0.25s ease-in);

		pointer-events: none;
		visibility: hidden;
		opacity: 0;

		&.visible {
			pointer-events: auto;
			visibility: visible;
			opacity: 1;
		}

		.search-widget-inner {
			max-height: 400px;
		}
	}

	@include respond-to('medium') {
		display: block;
		margin: 0;
		padding: 0;
		width: 100%;

		.search-widget-inner {
			margin-bottom: 10px;

			.search-form {
				border: none;
				border-bottom: solid 2px $black;

				.search-input {
					padding: 10px 20px;
				}

				.search-control {
					padding: 10px 20px;

					&.search-toggle {
						display: none;
					}
				}
			}
		}
	}
}

/* FAQs */
.faq-section {
	.section-title {
		margin: 0;
		padding: 10px 20px;
		font-weight: bold;
		text-align: left;
	}

	.question-set + .section-title {
		margin-top: 60px;
	}

	.question-set {
		margin: 20px;

		a.question {
			color: $black;
			font-weight: bold;
			text-decoration: none;
		}

		.answer {
			display: none;
			margin: 15px 0 0 0;

			p { margin: 0; }
		}

		&.expanded {
			a.question {
				color: $boxfox-pink;
			}

			.answer {
				display: block;
				padding-left: 20px;
				border-left: solid 3px $nude;
			}
		}

	}
}

/* Add to Cart Disclaimer */
.add-to-cart-disclaimer {
	margin-top: 20px;
}


/* MARKETPLACE COLLECTION */
.collection-controller {
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	align-items: flex-start;
	margin: 105px auto 40px auto;
	padding: 0 20px;
	width: 100%;
	max-width: 1200px;

	@media (max-width: 768px) {
		margin-top: 40px;
	}

	.collection-header {
		margin-bottom: 30px;
		padding-bottom: 30px;
		width: 100%;
		text-align: center;
	}

	.collection-sidebar {
		margin: 0;
		padding: 0 40px 0 0;
		width: 360px;

		@media (max-width: 1200px) {
			width: 300px;
		}

		@media (max-width: 768px) {
			margin: 0;
			padding: 0;
			width: 100%;
		}

		.collection-filters {
			margin: 0;
			padding: 0;

			.filter-scroll {
				margin: 0;
				padding: 0;
			}

			.filter-buttons {
				display: none;
				margin: 0;
			}

			@media (max-width: 768px) {
				@include flexbox;
				@include flex-flow(column nowrap);
				@include justify-content(flex-start);
				@include align-items(stretch);
				@include align-content(stretch);
				position: fixed;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				margin: 0;
				padding: 0;
				width: 100%;
				height: 100%;
				background: #ffffff;
				overflow: auto;
				z-index: 200000;

				@include transition(all 0.25s ease-in-out);
				@include transform(translateX(100%));
				visibility: hidden;
				opacity: 0;

				&.visible {
					@include transform(translateX(0));
					visibility: visible;
					opacity: 1;
				}

				.filter-scroll {
					flex: 1 1 auto;
					margin: 0;
					padding: 0 20px;
					width: 100%;
					overflow: auto;
				}

				.filter-buttons {
					display: block;
					flex: 0 0 auto;
					margin: 0;
					padding: 20px;
					width: 100%;
				}

			}
		}


	}

	.collection-sidebar + .collection-body {
		width: calc(100% - 360px);

		@media (max-width: 1200px) {
			width: calc(100% - 300px);
		}

		@media (max-width: 768px) {
			width: 100%;
		}
	}

	.collection-body {}

	.sidebar-group {
		position: relative;
		margin: 20px 0;
		padding: 0;

		&.expanded {
			.group-content {
				max-height: 1000px;
			}
		}

		&.background-offwhite {
			padding: 20px;
			background: #fafafa;
		}

		.group-toggle {
			position: absolute;
			top: 20px;
			right: 20px;
			font-size: 14px;
			line-height: 1.5;
			pointer-events: none;
		}

		.group-title {
			margin: 0;
			padding-right: 20px;
			color: #000000;
			font-size: 14px;
			font-weight: 700;
			line-height: 1.5;
			text-transform: uppercase;
			cursor: pointer;
		}

		.group-content {
			margin: 0;
			padding: 0;
			max-height: 0;
			overflow: auto;

			.group-item {
				display: block;
				margin: 10px 0 0 0;
				padding: 0;
			}
		}

	}

	.collection-toolbar {
		display: flex;
		flex-flow: row nowrap;
		justify-content: space-between;
		align-items: flex-start;
		margin: 0;
		padding: 0;
		width: 100%;

		@media (max-width: 768px) {
			flex-flow: row wrap;
			justify-content: flex-start;
		}

    .search-wrapper {
      position: relative;
      display: block;
      margin: 0;
      padding: 0;
      width: 100%;

      .search-icon {
        position: absolute;
        top: 50%;
        left: 0;
				padding-left: 10px;
				width: auto;
				font-size: 14px;
				text-align: left;
        @include transform(translateY(-50%));
				pointer-events: none;
      }

      input[type="search"] {
  			display: block;
  			margin: 0;
  			padding: 10px 10px 10px 30px;
  			height: auto;
  			font-size: 16px;
  			line-height: 24px;
        border: solid 1px $black;
  		}
    }

		.sort-by {
			display: block;
			margin: 0 0 0 auto;
			padding: 10px 32px 10px 10px;
			height: auto;
			width: auto;
			font-size: 12px;
			line-height: 24px;
			border: solid 1px $black;
		}

		.button {
			display: none;
			margin: 0;
			padding: 10px;
			width: 100%;
			font-size: 12px;
			line-height: 24px;
		}

		.chip-list {
			order: 1;
			margin: 0 -5px;
			padding: 0 5px 0 0;

			@media (max-width: 768px) {
				order: 2;
				width: 100%;
			}
		}

		.input {
			order: 2;
			flex: 0 0 auto;

			@media (max-width: 768px) {
				order: 1;
				width: 100%;

				display: flex;
				flex-flow: row nowrap;
				justify-content: flex-start;
				align-items: center;
				margin: 10px 0;
				padding: 0;
				width: 100%;

				.button {
					display: block;
					width: 50%;
					margin-right: 5px;
				}

				.sort-by {
					display: block;
					width: 50%;
					margin-left: 5px;
				}
			}
		}

	}

	.product-grid {
		display: flex;
		flex-flow: row wrap;
		justify-content: flex-start;
		align-items: stretch;
		margin: 0 -20px;

		@media (max-width: 768px) {
			margin: 0;
		}

		// .collection-controller .product-grid .product
		.product {
			display: flex;
			flex-flow: column nowrap;
			justify-content: flex-start;
			align-items: stretch;
			position: relative;
			margin: 0;
			padding: 20px;
			width: 33.33%;

			@media (max-width: 1200px) {
				width: 50%;
			}

			@media (max-width: 480px) {
				width: 100%;
			}

			.product-info {
				flex: 1 1 auto;
        text-decoration: none;

        &:hover .product-image img {
          opacity: 0;
        }
      }

      // .collection-controller .product-grid .product-flag
      .product-flag {
        top: 5px;
        right: 0;
        left: unset;
        max-width: 45px;
      }

      // .collection-controller .product-grid .product-meta--small
      .product-meta--small {
        padding-right: 40px;
      }

      .product-image {
        margin: 0;
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;

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

      .product-vendor {
				margin: 10px 0 0 0;
				font-size: 13px;
				color: #000000;
				line-height: 1.3;
        text-transform: uppercase;
			}

      .product-title {
				margin: 0 0 10px 0;
				font-size: 11px;
				color: #000000;
				line-height: 1.3;
        text-transform: uppercase;
			}

			.product-price {
        margin: 10px 0 0 0;
				font-size: 13px;
				color: #000000;
				line-height: 1.3;
        text-transform: uppercase;


			}

			.product-buttons {
        flex: 0 0 auto;
				margin: 15px 0 0 0;

        .button {
					padding: 10px;
					font-size: 12px;

					@include transition(all 0.25s ease-in-out);
					@include transform(translateY(20px));
          opacity: 0;

					@media (max-width: 768px) {
						@include transform(translateY(0px));
		        opacity: 1;
					}
        }
			}

			@media (min-width: 769px) {
				&:hover .product-buttons .button {
					@include transform(translateY(0px));
	        opacity: 1;
	      }
			}

		}
	}

	.chip-list {
		display: flex;
		flex-flow: row wrap;
		justify-content: flex-start;
		align-items: flex-start;

		.chip {
			display: inline-block;
			margin: 5px;
			padding: 5px 10px;
			font-size: 0;
			line-height: 0;
			background: #fff;
			border: solid 2px $black;
			border-radius: 5px;
			vertical-align: middle;

			.chip-label {
				display: inline-block;
				font-size: 12px;
				font-weight: 700;
				line-height: 1;
				color: $black;
				white-space: nowrap;
				vertical-align: middle;

			}

			.chip-remove {
				display: inline-block;
				margin: 0 0 0 5px;
				padding: 0;
				font-size: 12px;
				font-weight: 700;
				line-height: 1;
				color: $black;
				background: transparent;
				border: none;
				outline: none;
				vertical-align: middle;
			}
		}
	}

	.no-results {
		margin: 0;
		padding: 40px 20px;
		text-align: center;
		background: #fafafa;
		border: solid 2px $black;
		border-radius: 5px;

		@media (max-width: 768px) {
			margin: 20px 0 0 0;
		}

		.title {
			margin: 0;
			font-size: 20px;
			font-weight: 700;
		}

		.message {
			margin: 0 0 20px 0;
		}

	}

}

.product-flag {
  max-width: 80px;
  position: absolute;
  top: 0;
  left: 15px;
  z-index: 1;

  @include respond-to('medium') {
    left: 30px;
  }

  // .template-search .product-flag
  .template-search & {
    max-width: 40px;
    top: -10px;
  }

  // .collection .product-flag
  .collection & {
    max-width: 55px;
    left: unset;
    right: 0;
    top: 5px;

  	@include respond-to('medium') {
      max-width: 45px;
      top: 10px;
  	}
  }

  // .template-product-build-a-box .product-flag
  .template-product-build-a-box & {
    top: 0;
    right: 0;
    left: unset;
    max-width: 45px;
  }
}

.product-flag--rainbow {

  // .collection .product-flag--rainbow
  .collection & {
    top: 20px;
  }

  // .template-product .product-flag--rainbow
  .template-product & {
    top: 20px;
  }
}

.product-meta--small {
  padding-right: 40px;
}

.position-relative {
  position: relative;
}

.marketplace-logos {
	@include flexbox;
	@include flex-flow(row nowrap);
	@include justify-content(center);
	@include align-items(center);
	@include align-content(center);

	width: 100%;

	@include respond-to('medium') {
		@include flex-flow(row wrap);
	}

	.logo {
		display: inline-block;
		margin: 0;
		padding: 0 20px;
		width: 20%;
		height: 50px;

		@include respond-to('medium') {
			padding: 20px;
			width: 100%;
			height: auto;

		}
	}

	img {
		display: block;
		margin: 0 auto;
		height: 100%;
		object-fit: contain;

		@include respond-to('medium') {
			height: auto;
			max-height: 80px;

		}
	}
}


/* #Cart - Flyout
================================================== */
.cart-flyout {

	&.visible {
		.cart-flyout-wrapper {
			right: 0;
		}

		.cart-flyout-background {
			opacity: 1;
			pointer-events: auto;
		}
	}

	.cart-flyout-wrapper {
		@include flexbox;
		@include flex-flow(column nowrap);
		@include justify-content(flex-start);
		@include align-items(stretch);
		@include align-content(stretch);

		position: fixed;
		margin: 0;
	  padding: 0;
		top: 0;
		right: -$cart-flyout-width;
		bottom: 0;
		width: $cart-flyout-width;
		max-width: 100%;
		height: 100%;
		background: $white;
		//box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.75);
		overflow: hidden;

		@include transition(right 0.25s ease-in-out);
		z-index: 20001;

		.cart-header {
			@include flex(0 0 auto);

			@include flexbox;
			@include flex-flow(row nowrap);
			@include justify-content(flex-start);
			@include align-items(center);
			@include align-content(center);

			margin: 0;
			padding: 0;
			border-bottom: solid 1px $light-grey;

			.title {
				@include flex(1 1 auto);
				margin: 0;
				padding: 15px 20px;
				font-size: 18px;
				line-height: 1;
				text-align: left;
			}

			.close {
				@include flex(0 0 auto);
				margin: 0;
				padding: 15px 20px;
				color: $black;
	      font-size: 18px;
				line-height: 1;
				background: none;
				border: none;
				outline: none;
				text-align: center;
			}

			.count {
				@include flex(0 0 auto);
				margin: 0;
				padding: 15px 20px;
				font-size: 13px;
				line-height: 1;
				text-align: right;
			}
		}

		.cart-body {
			@include flexbox;
			@include flex-flow(column nowrap);
			@include justify-content(flex-start);
			@include align-items(stretch);
			@include align-content(stretch);

			@include flex(1 1 auto);
			padding: 20px;
			overflow: auto;
	    -webkit-overflow-scrolling: touch;
			background: $offwhite;

			.cart-shipping {
				@include flex(0 0 auto);
		  }

			.cart-container {
				@include flex(1 1 auto);
				margin: 0;
			}

			.cart-subtotals {
				@include flex(0 0 auto);
				margin: 20px 0 0 0;
				padding: 20px 0 0 0;
				border-top: solid 1px $light-grey;

				.subtotal-row {
					@include flexbox;
					@include flex-flow(row nowrap);
					@include justify-content(flex-start);
					@include align-items(center);
					@include align-content(center);
					margin: 0;

					& + .subtotal-row {
						margin-top: 5px;
					}

					.label,
					.value {
						margin: 0;
						padding: 0;
						color: $black;
						font-size: 14px;
						font-weight: bold;
						line-height: 1.5;
					}

					.label {
						@include flex(1 1 auto);
						text-align: left;
					}

					.value {
						@include flex(0 0 auto);
						text-align: right;
					}

					.helper {
						font-weight: normal;
					}
				}

			}
		}

		.cart-footer {
			@include flex(0 0 auto);

			margin: 0;
			padding: 20px;
			border-top: solid 1px $light-grey;

			.delivery-disclaimer {
				margin-bottom: 10px;
				padding: 10px;
				font-size: 10px;
				line-height: 1.2;
				background: $nude;
				border: solid 1px $blush;
				border-radius: 2px;
			}

			.subtotal-row {
				@include flexbox;
				@include flex-flow(row nowrap);
				@include justify-content(flex-start);
				@include align-items(center);
				@include align-content(center);

				.label,
				.value {
					margin: 0;
					padding: 0;
					color: $black;
					font-size: 18px;
					font-weight: bold;
					line-height: 1.5;
				}

				.label {
					@include flex(1 1 auto);
					text-align: left;
				}

				.value {
					@include flex(0 0 auto);
					text-align: right;
				}
			}

			.actions {
				margin: 0;
				padding: 15px 0 0 0;
			}

			.disclaimer {
				padding: 15px 0 0 0;
				font-size: 10px;
				line-height: 1.2;
			}
		}

	}

	.cart-flyout-background {
		position: fixed;
		margin: 0;
	  padding: 0;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0,0,0,0.4);
		z-index: 20000;

		opacity: 0;
		pointer-events: none;
		@include transition(opacity 0.25s ease-in-out);
	}
}

/* #Cart - Shipping Message
================================================== */
.cart-shipping {
  margin: 0 0 20px 0;
  padding: 0;

  &.free-shipping {
    .shipping-meter .fill {
      background-color: $blush;
    }
  }

	.shipping-progress {
		margin: 0 0 10px 0;
	}

  .shipping-message {
    margin: 0 0 5px 0;
    color: $black;
    font-size: 12px;
    text-align: left;
  }

  .shipping-meter {
    position: relative;
    display: block;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 12px;
    background-color: $white;
		border: solid 1px $black;
    border-radius: 12px;

    &.no-progress .fill {
      opacity: 0;
    }

    .fill {
      position: absolute;
      top: 0;
      left: 0;
      padding: 0;
      height: 10px;
      line-height: 10px;
      font-size: 8px;
      text-align: right;
      color: $white;
      background-color: $blush;
      border-radius: 12px;
      overflow: hidden;
      opacity: 1;
      @include transition(all 0.5s ease);

      .text {
        white-space: nowrap;
      }
    }
  }

  .shipping-helper {
    margin: 0;
    color: $black;
    font-size: 12px;
    text-align: left;

		.text-link {
			font-weight: bold;
			cursor: pointer;
		}
  }

	.multi-shipping-helper {
		margin: 10px 0 0 0;
    color: $dark-grey;
    font-size: 12px;
    text-align: left;

		.text-link {
			font-weight: bold;
			cursor: pointer;
		}
	}
}

.cart-addon-carousel {
	margin: 10px 0 0 0;
	padding: 10px 20px;
	background: $nude;
	border: solid 1px $blush;
	border-radius: 2px;

	.addon-title {
		margin: 0;
		font-size: 14px;
		font-weight: 700;
		text-transform: uppercase;
		line-height: 1;
	}

	.addon-description {
		margin: 0;
		font-size: 13px;
		font-weight: 400;
	}

	.addon-carousel {
		margin: 10px 0;
		padding: 0;
		background: $white;
		border: solid 1px $blush;
		border-radius: 2px;

		.slick-slider {
			margin: 0;
		}

		.slick-prev,
		.slick-next {
			top: 50%;
			margin: 0;
			padding: 0;
			width: 20px;
			height: 32px;
			background: transparent;
			opacity: 1;
			@include transform(translateY(-50%));

			&:before {
				font-size: 16px !important;
			}
		}

		.slick-prev {
			left: -20px;
		}

		.slick-next {
			right: -20px;
		}

		.carousel-item {
			@include flexbox;
			@include flex-flow(row nowrap);
			@include justify-content(flex-start);
			@include align-items(stretch);
			@include align-content(stretch);
			margin: 0;
			padding: 10px;
			width: 100%;

			.item-image {
				@include flex(0 0 auto);
				margin: 0;
				padding: 0;
				width: 80px;

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

			.item-info {
				@include flex(1 1 auto);
				margin: 0;
				padding: 0 0 0 20px;
				width: 100%;

				.item-product-vendor {
					display: block;
					color: $black;
					font-size: 13px;
					line-height: 1.3;
					text-decoration: none;
					text-transform: uppercase;
				}


				.item-product-title {
					display: block;
					color: $black;
					font-size: 11px;
					line-height: 1.3;
					text-decoration: none;
					text-transform: uppercase;
				}

				.item-price {
					display: block;
					margin: 10px 0;
					font-size: 13px;
					line-height: 1.3;
				}

				.item-actions {
					.button {
						padding: 10px;
						font-size: 11px;
						line-height: 1.3;
					}
				}
			}

		}

	}

	.addon-disclaimer {
		margin: 0;
		font-size: 12px;
		font-weight: 400;
	}
}


/* #Cart - Item
================================================== */
.cart-group {
	margin: 20px 0 0 0;

	.cart-group-title {
		margin: 0;
		font-size: 14px;
		font-weight: 700;
		text-transform: uppercase;
	}

	.cart-group-description {
		margin: 5px 0 15px 0;
		font-size: 12px;
		line-height: 1.3;
	}

	& + .cart-group {
		margin-top: 20px;
		padding-top: 20px;
		border-top: solid 1px $light-grey;
	}
}

.cart-item {
	display: block;
	margin: 10px 0 0 0;
	padding: 20px;
	background: $white;
	border: solid 1px $light-grey;
	border-radius: 2px;

	.item-info {
		@include flexbox;
		@include flex-flow(row nowrap);
		@include justify-content(flex-start);
		@include align-items(stretch);
		@include align-content(stretch);
		margin: 0;
		padding: 0;
		width: 100%;

		.item-photo {
			@include flex(0 0 auto);
			margin: 0;
			padding: 0;
			width: 100px;

			@media (max-width: 480px) {
				width: 80px;
			}

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

		.item-details {
			@include flex(1 1 auto);
			position: relative;
			margin: 0;
			padding: 0 0 0 20px;
			width: 100%;

			.item-remove {
				position: absolute;
				top: 0;
				right: 0;
				width: auto;
				color: $grey;
				font-size: 13px;
				line-height: 1.3;
				text-align: center;
				cursor: pointer;
			}

			.item-title {
				display: block;
				margin: 0;
				padding-right: 24px;

				.item-product-vendor {
					display: block;
					color: $black;
					font-size: 13px;
					line-height: 1.3;
					text-decoration: none;
					text-transform: uppercase;
				}

				.item-product-title {
					display: block;
					color: $black;
					font-size: 11px;
					line-height: 1.3;
					text-decoration: none;
					text-transform: uppercase;
				}

				.item-variant-title {
					display: block;
					color: $grey;
					font-size: 14px;
					line-height: 18px;
					text-decoration: none;
				}

				.item-discount-title {
					display: block;
					color: $boxfox-pink;
					font-size: 12px;
					line-height: 16px;
					font-weight: bold;
				}

				.item-properties {
					display: block;
					margin: 10px 0 0 0;
					font-size: 11px;
					line-height: 1.3;

				}

				.item-bundle-contents {
					ul {
						margin: 0;
						padding: 0;
						list-style: none;

						li {
							position: relative;
							margin: 0;
							padding: 0;

							.icon {
								position: absolute;
								top: 0;
								left: 0;
								font-size: 4px;
								line-height: 18px;
								color: $grey;
							}

							.label {
								display: block;
								padding-left: 12px;
								font-size: 12px;
								line-height: 18px;
								color: $grey;
								vertical-align: top;
							}
						}
					}
				}
			}

			.item-price-quantity {
				@include flexbox;
				@include flex-flow(row nowrap);
				@include justify-content(space-between);
				@include align-items(center);
				margin: 10px 0 0 0;
				width: 100%;

				@media (max-width: 480px) {
					@include flex-flow(row wrap);
				}

				.item-price {
					@include flex(0 0 auto);
					font-size: 13px;
					line-height: 1.3;
					text-transform: uppercase;
					text-align: left;

					@media (max-width: 480px) {
						@include flex(1 1 auto);
						width: 100%;
						text-align: left;
					}
				}

				.item-quantity {
					@include flex(1 1 auto);
					text-align: right;

					@media (max-width: 480px) {
						@include flex(1 1 auto);
						margin-top: 10px;
						width: 100%;
						text-align: left;
					}
				}

			}


		}


	}
}

.cart-empty {
	display: block;
	margin: 20px 0 0 0;
	padding: 20px;
	text-align: center;
	border-top: solid 1px $light-grey;
}


.video-wrapper {
  position: relative;
	padding-top: 25px;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;

	&.square-media {
		padding-top: 0;
		padding-bottom: 100%;
	}

	iframe,
  object,
  embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
		border: none;
  }
}

/* #Quantity Widget
================================================== */
.quantity-widget {
	display: inline-block;
	margin: 0;
	padding: 0;
	font-size: 0;
	border: solid 1px $light-grey;
	border-radius: 2px;
	white-space: nowrap;
	overflow: hidden;
	vertical-align: top;

	.quantity-input {
		display: inline-block;
		margin: 0;
		padding: 6px 0;
		width: 54px;
		height: auto;
		font-size: 14px;
		line-height: 20px;
		text-align: center;
		border: none;
		vertical-align: top;

		&:focus {
			border: none;
			outline: none;
			background: $offwhite;
		}

		&::-webkit-inner-spin-button,
		&::-webkit-outer-spin-button {
			-webkit-appearance: none;
			margin: 0;
		}
	}

	.quantity-control {
		display: inline-block;
		margin: 0;
		padding: 0;
		width: 32px;
		height: 32px;
		line-height: 30px;
		font-size: 12px;
		text-align: center;
		vertical-align: top;
		border-radius: 0;
		outline: 0;
		border: none;

		color: $black;
		background-color: transparent;

		&:focus,
		&:active,
		&:hover {
			color: $boxfox-pink;
			background-color: transparent;
			box-shadow: none;
		}

		&:disabled,
		&.disabled {
			color: $light-grey;
			opacity: 1;
			cursor: default;
			pointer-events: none;
		}

		.fa {
			vertical-align: middle;
		}
	}


}

.fa-fast-spin {
  -webkit-animation: fa-spin 1s infinite linear;
  animation: fa-spin 1s infinite linear;
}

/* BUTTONS */
.button {
	display: block;
	margin: 0;
	padding: 15px 20px;
	width: 100%;
	font-size: 13px;
	font-weight: bold;
	letter-spacing: 1px;
	text-transform: uppercase;
	text-decoration: none;
	text-align: center;
	color: $white;
	background: $black;
	border: solid 1px $black;
	outline: none;

	&.btn--fix {
		ext-transform: uppercase;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    letter-spacing: 2px;
    line-height: 45px;
    border-radius: 0;
    font-weight: 600;
    padding: 0 20px;
    font-size: 10px;
	}

	.btn + &,
	.button + & {
		margin-top: 20px;
	}

	&:hover {
		color: $white;
		background: $black;
		border: solid 1px $black;
	}

	&.outline {
		color: $black;
		background: $white;
		border: solid 1px $black;

		&:hover {
			color: $black;
			background: $white;
			border: solid 1px $black;
		}
	}
}

// Backgrounds
.background-white {
	color: $black;
	background-color: $white;

	h1, h2, h3, h4, h5, h6, p, ul, ol, li {
		color: inherit;
	}
}

.background-nude {
	color: $black;
	background-color: $nude;

	h1, h2, h3, h4, h5, h6, p, ul, ol, li {
		color: inherit;
	}
}

.background-blush {
	color: $black;
	background-color: $blush;

	h1, h2, h3, h4, h5, h6, p, ul, ol, li {
		color: inherit;
	}
}

.background-black {
	color: $white;
	background-color: $black;

	h1, h2, h3, h4, h5, h6, p, ul, ol, li {
		color: inherit;
	}
}



//custom form inputs
[type=radio] {
position: absolute;
opacity: 0;
width: 0;
height: 0;
}

/* IMAGE STYLES */
input[type=radio] + div {
	cursor: pointer;
	margin-top: 7px;
}



/* CHECKED STYLES */


.custom-form {
	justify-content: space-between;
}

.custom-form-label {
	  line-height: 30px;
    text-align: center;
    text-transform: uppercase;
    font-family: 'Brandon Text';
    letter-spacing: 1px;
    font-size: 0.8em;
}

.box-options {
	@include flexbox;
	@include flex-flow(row nowrap);
	@include justify-content(space-between);
	@include align-items(center);
	margin: 0 -10px;

	@include respond-to('medium') {
		margin: 0 -20px;
	}

	.box-option {
		display: block;
		margin: 0;
		padding: 0 10px;
		width: 50%;

		@include respond-to('medium') {
			padding: 0 20px;
		}

		.box {
			position: relative;
			display: block;
			margin: 0;
			padding: 0;
			color: $black;
			text-decoration: none;
			border: solid 2px $light-grey;

			&.selectedBox {
				color: $black;
				border: solid 3px $black;
			}

			.box-title {
				margin: 0;
				padding: 10px 0;
				font-weight: bold;
				text-align: center;
				text-transform: uppercase;
			}

			.selected-flag {
				position: absolute;
				top: 0;
				right: 0;
				width: 22px;
				height: 22px;
				line-height: 22px;
				color: $white;
				text-align: center;

				&:after {
				    content: '';
				    position: absolute;
				    top: 0;
				    right: 0;
				    border-color: transparent;
				    border-style: solid;
						border-width: 20px;
				    border-right-color: $boxfox-pink;
				    border-top-color: $boxfox-pink;
						z-index: 1;
				}

				.flag-icon {
					position: relative;
					z-index: 2;
				}

			}


		}
	}

}


.pick-card {
	display: block;
	margin: 25px 0 0 0;
	padding: 15px 20px;
	width: 100%;
	font-weight: bold;
	text-align: center;
	border: 2px dashed $light-grey;
	cursor: pointer;
}

.picked-card {
	@include flexbox;
	@include flex-flow(row nowrap);
	@include justify-content(flex-start);
	@include align-items(center);
	@include align-content(center);

	margin: 25px 0 0 0;
	width: 100%;
	border: 2px solid $black;
	cursor: pointer;

	.card-image {
		max-height: 80px;
		height: 100%;
		align-self: center;
	}

	.card-info {
		display: block;
		margin: 0;
		padding-left: 25px;
	}

	.title {
		font-size: 16px;
		font-weight: bold;
	}

	.subtitle {
		color: $grey;
	}
}

.showModal {
	display: flex !important;
}

.pick-card-modal {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: 0;
	padding: 20px;
	width: 100%;
	height: 100%;
	justify-content: center;
	align-items: center;
	background-color: rgba(0,0,0,0.4);
	overflow: auto;
	z-index: 1010;

	.pick-card-wrapper {
		margin: auto;
		padding: 20px;
		max-width: 1180px;
		text-align: center;
		background-color: $white;
		border-radius: 10px;
	}
}


.hide-input {
	visibility: hidden;
	position: absolute;
}

@media only screen and (max-width: 750px) {
	.custom-form-boxes {
		justify-content: space-around;
	}

	.pick-card-modal {
		align-items: flex-start;
	}

	.pick-card-container {
		border-radius: 0px;
	}
}


@media only screen and (max-width: 600px) {
	.pick-card-container {
		.pick-card-card {
			max-width: 180px;
		}
	}
}

.notification {
  margin: 0 auto 40px auto;
  padding: 10px 30px;
  text-align: center;
  background: $boxfox-light-nude;
  border: solid 1px $boxfox-nude;
  border-radius: 5px;

	.value {
		font-weight: bold;
	}
}


/* BRANDS AND AUTHORS */
.brands-controller {
	margin: 0 auto;
	padding: 0 20px;
	max-width: 1200px;

	.page-description {
		margin: 15px auto;
		width: 100%;
		max-width: 600px;
		text-align: justify;
	}
}

.vendor-toolbar {
	@include flexbox;
	@include flex-flow(row wrap);
	@include justify-content(flex-start);
	@include align-items(flex-start);
	@include align-content(flex-start);

	.vendor-toolbar--accolades {
		margin: 30px auto;
		width: 100%;
		text-align: center;

		a {
			position: relative;
			display: inline-block;
			margin: 0 5px;
			width: 100px;
			height: 100px;
			text-decoration: none;
			border-radius: 50%;
			border: solid 4px transparent;
			@include transition(all 0.25s linear);

			.checkmark {
				position: absolute;
				top: 50%;
				left: 50%;
				font-size: 24px;
				opacity: 0;
				@include transform(translate(-50%, -50%));
				@include transition(all 0.25s linear);
			}

			&.checked {
				border: solid 4px $black;

				.checkmark {
					opacity: 1;
				}
			}
		}

		.learn-more {
			width: 100%;

			a {
				width: auto;
				height: auto;
			}
		}
	}

	.vendor-toolbar--search {
		width: 100%;

		input {
			display: block;
			margin: 0;
			width: 100%;
		}
	}

	.vendor-toolbar--links {
		@include flexbox;
		@include flex-flow(row nowrap);
		@include justify-content(space-between);
		@include align-items(center);
		@include align-content(center);

		margin: 0;
		padding: 20px 0;
		width: 100%;
		overflow: auto;

		// Hide scroll bar...
		scrollbar-width: none;
		-ms-overflow-style: none;
	  &::-webkit-scrollbar {
	    width: 0px;
	    background: transparent;
	  }

		a {
			display: inline-block;
			margin: 0;
			padding: 10px;
			color: $grey;
			text-decoration: none;

			&:hover {
				color: $black;
			}
		}
	}
}

.vendor-list {
	display: block;
	margin: 0;
	padding: 0;
	list-style: none;

	&.has-filters {

		.vendor-group--title {
			display: none;
		}

		.vendor-group--links {
			padding: 0;
			border-top: none;
		}

		.vendor-profile {
			padding: 10px 0;
			width: 100%;
			border-top: solid 1px $light-grey;
		}

		.no-vendors {
			display: none;
		}

		.vendor-profile--title {
			font-weight: bold;
		}

		.vendor-profile--description {
			display: block;
		}

	}

	.vendor-group {
		@include flexbox;
		@include flex-flow(row nowrap);
		@include justify-content(flex-start);
		@include align-items(flex-start);
		@include align-content(flex-start);
		margin: 0;
		padding: 0;

		@media only screen and (max-width: 768px) {
			position: relative;
			@include flex-flow(row wrap);
		}
	}

	.vendor-group--title {
		margin: 0;
		padding: 20px 10px;
		width: 100px;

		@media only screen and (max-width: 768px) {
			position: -webkit-sticky;
	    position: sticky;
	    top: 0;
	    margin: 0;
	    padding: 20px;
			width: 100%;
	    background: #fff;
			border-bottom: solid 1px $light-grey;
	    z-index: 2;
		}
	}

	.vendor-group--links {
		@include flexbox;
		@include flex-flow(row wrap);
		@include justify-content(flex-start);
		@include align-items(flex-start);
		@include align-content(flex-start);
		margin: 0;
		padding: 10px 0;
		width: calc(100% - 100px);
		list-style: none;
		border-top: solid 1px $light-grey;

		@media only screen and (max-width: 768px) {
			padding: 0;
			width: 100%;
			border: none;
		}
	}

	.no-vendors {
		display: block;
		margin: 0;
		padding: 10px 20px;
		width: 100%;
		color: $grey;
		font-style: italic;
	}

	.vendor-profile {
		display: block;
		margin: 0;
		padding: 10px 20px;
		width: 33.33%;

		@media only screen and (max-width: 768px) {
			width: 100%;
		}
	}

	.vendor-profile--link {
		display: block;
		text-decoration: none;
	}

	.vendor-profile--title {
		display: inline-block;
		vertical-align: middle;
	}

	.vendor-profile--description {
		display: none;
	}

	.vendor-profile--accolade {
		display: inline-block;
		margin-left: 5px;
		vertical-align: middle;
	}

	.no-results {
		margin: 0;
		padding: 40px 0;
		text-align: center;
		background: $boxfox-light-nude;
	}
}

/* CHIP LIST */
.chip-list {
	margin: 0;
	text-align: center;

	.chip {
		display: inline-block;
		margin: 5px;
		padding: 5px 0;
		border-radius: 5px;
		background: $white;
		border: solid 1px $black;

		.chip-title {
			display: inline-block;
			margin: 0;
			padding: 0 0 0 10px;
			font-weight: bold;
		}

		.chip-remove {
			display: inline-block;
			margin: 0;
			padding: 0 10px;
			text-decoration: none;
		}
	}
}

/* ACCOLADE MODAL */
.accolade-modal {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: 0;
	padding: 20px;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.75);
	visibility: hidden;
	opacity: 0;
	overflow: auto;
	@include transition(all 0.5s ease);

	z-index: 2147483647;

	.accolade-modal-inner {
		@include flexbox;
		@include flex-flow(row nowrap);
		@include justify-content(center);
		@include align-items(center);
		@include align-content(center);

		position: relative;
		margin: auto;
		padding: 0;
		height: 100%;
		width: 600px;
		max-width: 100%;
		overflow: auto;
		@include transform(translateY(25%));
		@include transition(all 0.5s ease);
	}

	.accolade-modal-body {
		position: relative;
		margin: auto;
		padding: 24px;
		width: 100%;
		text-align: center;
		background: $white;
		box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.1);
		border-radius: 5px;

		.accolade-close {
			position: absolute;
			top: 0;
			right: 0;
			padding: 12px;
			font-size: 16px;
			line-height: 20px;
		}
	}

	&.active {
		visibility: visible;
		opacity: 1;

		.accolade-modal-inner {
			@include transform(translateY(0));
		}
	}

	.accolade-list {}

	.accolade-profile {
		@include flexbox;
		@include flex-flow(row nowrap);
		@include justify-content(flex-start);
		@include align-items(flex-start);
		margin: 0;
		padding: 20px 0;
	}

	.accolade-profile--image {
		width: 100px;
	}

	.accolade-profile--info {
		padding-left: 30px;
		width: 100%;
		text-align: left;
	}

}


/* COLLECTION TEMPLATE */
.template-collection {
	.collection {
		padding-top: 20px;
	}

	.product-grid-item {
		text-align: left;
	}
}

.collection-hero {
	@include flexbox;
	@include flex-flow(row nowrap);
	@include justify-content(center);
	@include align-items(center);
	@include align-content(center);
	margin: 0 auto;
	padding: 0;

	.collection-hero--media {
		margin: 0;
		padding: 0;
		width: 40%;
	}

	.collection-hero--info {
		margin: 0;
		padding: 80px 40px;
		width: 60%;
	}

	.collection-hero--accolades {
		.collection-hero--accolade {
			margin: 15px;
			width: 80px;
		}
	}


}

.collection-header {
	svg {
		margin: 0;
		height: 100px;
	}
}


/* INVENTORY MODAL */
.inventory-modal {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.75);
	z-index: 1000;

	opacity: 0;
	visibility: hidden;

	&.visible {
		opacity: 1;
		visibility: visible;
	}

	.inventory-modal-inner {
		@include flexbox;
		@include flex-flow(row nowrap);
		@include justify-content(center);
		@include align-items(center);
		@include align-content(center);
		margin: 0;
		padding: 20px;
		width: 100%;
		height: 100%;
		overflow: auto;
	}

	.modal-card {
		@include flexbox;
		@include flex-flow(column nowrap);
		@include justify-content(flex-start);
		@include align-items(stretch);
		@include align-content(stretch);

		margin: auto;
		padding: 0;
		width: 100%;
		max-width: 800px;
		max-height: 100%;
		background: $white;
		border-radius: 5px;

		.card-title {
			@include flex(0 0 auto);
			padding: 20px;
			border-bottom: solid 1px $light-grey;

			h1, h2, h3, h4 {
				margin: 0;
				text-transform: uppercase;
			}
		}

		.card-body {
			@include flex(1 1 auto);
			padding: 20px;
			overflow: auto;
		}

		.card-footer {
			@include flex(0 0 auto);

			@include flexbox;
			@include flex-flow(row nowrap);
			@include justify-content(flex-start);
			@include align-items(flex-start);

			padding: 0;
			border-top: solid 1px $light-grey;

			.button {
				margin: 20px;

				&.disabled {
					opacity: 0.5;
					pointer-events: none;
				}
			}
		}
	}

	.box-profile {
		@include flexbox;
		@include flex-flow(row nowrap);
		@include justify-content(flex-start);
		@include align-items(flex-start);
		margin: 30px 0 0 0;

		.box-image {
			@include flex(0 0 auto);
			margin: 0;
			padding: 0;
			width: 120px;
		}

		.box-info {
			@include flex(1 1 auto);
			margin: 0;
			padding-left: 20px;
			font-size: 12px;

			.item-disclaimer {
				margin: 0 0 5px 0;
				font-size: 16px;
				font-weight: 700;
				color: $grey;
			}

			.box-title {
				font-weight: 700;
			}

			.variant-title {
				color: $grey;
			}

			.box-price {
				margin-top: 10px;
			}
		}

	}

	.box-contents {
		display: block;
		margin: 30px 0 0 0;
		padding: 0;
		list-style: none;

		li {
			display: block;
			margin: 0;
			padding: 10px 20px;
			border-top: solid 1px $faint-grey;

			.item-icon {
				display: inline-block;
				margin-right: 10px;

				&.check {
					color: $successGreen;
				}

				&.warning {
					color: $boxfox-pink;
				}
			}
		}
	}

	.item-replacement-overview {
		@include flexbox;
		@include flex-flow(row nowrap);
		@include justify-content(flex-start);
		@include align-items(flex-start);
		margin: 20px -20px;

		.box-profile {
			margin: 0;
			padding: 0 20px;
			width: 50%;
		}

	}
}

.text-muted {
	color: $grey;
}

.line-through {
	text-decoration: line-through;
}

// klaviyo pop up styles
.needsclick [name="email"] {
  text-align: center !important; // important required to override klaviyo base styles
  padding-left: 0 !important; // important required to override klaviyo base styles
}
.fVNHP.fVNHP.fVNHP.fVNHP.fVNHP.fVNHP {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important; // important required to override klaviyo base styles
}

.signup {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}

.signup__image {
  flex-basis: 33.33%;
}

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

  .page-margin.page-margin--signup {
    padding-top: 15px;
  }

  .signup {
    flex-direction: column;
    margin: 0 15px;
  }

  .signup__image {
    margin: 0 130px;
  }
}

@media only screen and (max-width: 480px) {

  .signup__image {
    margin: 0 40px;
  }
}

.signup .kl-private-quill-wrapper-Lkqws1.kl-private-quill-wrapper-Lkqws1.kl-private-quill-wrapper-Lkqws1 .ql-editor span,
.signup .etaOCU.etaOCU.etaOCU.etaOCU.etaOCU.etaOCU,
.signup .jOOVbq.jOOVbq.jOOVbq.jOOVbq.jOOVbq.jOOVbq {
  font-family: $titleFontStack;
}

.signup .jOOVbq.jOOVbq.jOOVbq.jOOVbq.jOOVbq.jOOVbq:hover {
  background-color: $boxfox-light-nude;
}

// Landing Page Header
.landing-header {
  display: flex;
  justify-content: center;
  margin-bottom: 100px;
  flex-wrap: wrap;

  @media(max-width: 768px) {
    flex-basis: 100%;
  }

  &.image-left .landing-header-image-wrapper { order: 1; }
	&.image-left .landing-header-text { order: 2; }

	&.image-right .landing-header-image-wrapper { order: 2; }
	&.image-right .landing-header-text { order: 1; }

  .landing-header-text {
    flex-basis: 40%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;

    @media(max-width: 768px) {
      flex-basis: 100%;
      padding: 40px 0;
    }
  }

  .landing-header-title {
    margin-bottom: 10px;
    font-size: 28px;
  }

  .landing-header-copy {
    font-size: 16px;
    max-width: 360px;
    margin: 0 auto;
    line-height: 1.2;
    margin-bottom: 30px;
  }

  .landing-header-image-wrapper {
    flex-basis: 60%;

    @media(max-width: 768px) {
      flex-basis: 100%;
    }
  }

  // Buttons
	.btn-white {
		color: $black;
		background-color: $white;
	}

	.btn-nude {
		color: $black;
		background-color: $nude;
	}

	.btn-blush {
		color: $white;
		background-color: $blush;
	}

	.btn-black {
		color: $white;
		background-color: $black;
	}

  .landing-header-image {
    width: 100%;
    object-fit: cover;
    height: 100%;
    object-position: center top;
    vertical-align: -webkit-baseline-middle;
  }
}

.landing-product-item {
  display: flex;
  justify-content: center;
  margin-bottom: 100px;
  flex-wrap: wrap;

  &.image-left .landing-product-item-image-wrapper { order: 1; }
  &.image-right .landing-product-item-image-wrapper { order: 2; }

  &.image-left .landing-product-item-content { order: 2; }
  &.image-right .landing-product-item-content { order: 1; }

  .landing-product-item-image-wrapper {
   flex-basis: 40%;

   @media(max-width: 768px) {
    flex-basis: 100%;
   }
  }

  .landing-product-item-image {
    width: 100%;
    object-fit: cover;
    height: 100%;
    object-position: center top;
    vertical-align: -webkit-baseline-middle;
   }

  .landing-product-item-content {
    flex-basis: 60%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
    padding: 0 15px;

    @media(max-width: 768px) {
      flex-basis: 100%;
      padding: 40px 0;
    }
  }
}

.btn--load_more {
  min-width: 120px;
}

.filter-loading-spiner {
  text-align: center;
  font-size: 40px;
}

// refinery.cc 11 15 21

.image-slider {
  text-align: center;

  .image-slider-container {
    margin: 50px auto;

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

  .slick-list {
    margin: 0 -10px;
  }

  .slick-track {
    margin: 0 auto;
  }

  .image-slide {
    padding: 10px;

    img {
      @include at-query ($max, $small) {
        width: 300px;
        height: auto;
      }
    }
  }

  .slick-arrow {
    position: absolute;
    top: 50%;
    margin: 0;
    padding: 0;
    width: 30px;
    height: 30px;
    font-size: 20px;
    line-height: 30px;
    text-align: center;
    cursor: pointer;
    transform: translateY(-50%);

    &.previous {
      left: 0;
    }

    &.next {
      right: 0;
    }
  }
}
// end refinery.cc 11 15 21

.logo-tag-selector {
  margin-top: 15px !important;
}

.pick-photo {
  margin-top: 2em;
  position: relative;
  width: 100%;
}

.pdp-photo-label {
  margin-bottom: 0 !important;
  height: 100%;
  text-align: center;
  padding: 15px 20px;
  background-color: #e51264;
  color: #FFFFFF;
  border: 2px dashed #dddddd;
  margin-top: 0!important;
  width: 100%;
}

.pdp-photo-upload {
  position: absolute !important;
  left: 0;
  top: 0;
  height: 58px!important;
  width: 100% !important;
  opacity: 0;
  z-index: 10;
  cursor: pointer;
  margin-bottom: 0 !important;
}
.pick-photo {
  .picked-card {
    display: none;
  }
}

.change-photo {
  height: 110px;
  position: relative;
  width: 100%;

  .picked-card {
    display: flex;
  }

  .pdp-photo-label {
    display: none;
  }
}

.page-desc-container {
  max-width: 50%;
  margin: 0 auto;
  padding-bottom: 50px;
}

.id-item-grid {
  display: flex;
  margin-left: -13px;
  margin-right: -13px;
  justify-content: center;
  width: calc(100% + 26px);
  flex-wrap: wrap;
  flex-grow: 1;
}

.id-item {
  width: 33.33333%;
  padding: 0 13px;

  .item-img-container {
    position: relative;
    padding-top: 106.666666667%;
  }

  .item-text-container {
    padding-top: 20px;
  }

  img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

.shopping-container {
  margin: 20px 0;
  display: flex;
  padding: 70px 10%;
  align-items: center;
  justify-content: space-between;
  background-color: #f5f5f5;

  .shopping-header {
    flex: 0 0 50%;
    text-align: left;
  }

  .shopping-list {
    flex: 0 0 37.5%;
    display: flex;
    flex-flow: column;
  }

  .shopping-link {
    padding-bottom: 20px;
    text-decoration: none;
  }
}

.redeem-container {
  display: flex;
  align-items: center;

  .redeem-text-container {
    width: calc(50% + 10px);
  }

  .redeem-img-container {
    width: calc(50% - 10px);

    img {
      width: 100%;
    }
  }
}

.id-container {
  padding-top: 60px;
}

@media screen and (max-width: 959px) {
  .page-desc-container {
    max-width: 100%;
  }
}

@media screen and (max-width: 769px) {
  .id-item {
    width: 100%;
    margin-bottom: 10px;

    .item-img-container {
      padding-top: 62%;
    }
  }

  .redeem-container {
    margin: 40px 0;
  }

  .id-container {
    padding-top: 40px;
  }

  .page-desc-container {
    padding-bottom: 30px;
  }
}
.top_bar_Slider .slick-next:before, .top_bar_2 .slick-next:before, .top_bar_Slider .slick-prev:before, .top_bar_2 .slick-prev:before {
display:none;
}
.top_bar_Slider .slick-next, .top_bar_2 .slick-next, .top_bar_Slider .slick-prev, .top_bar_2 .slick-prev {
font-size:13px;
top:25px !important;
}
.accordion label{
width:100%;
    font-size: 0.7em !important;
}
.accordion span{
    font-size: 12.5px !important;
    line-height: 1.6 !important;
    font-family: 'Brandon Text' !important;
    color: #000 !important;
    font-weight: 600 !important;
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: 100%;
}
.template-page-new-corp .page-margin{
padding-top:0;
}
.template-page-new-corp .main-content{
padding-bottom:0;
}
.cart__row a:hover{
text-decoration:none;
color:initial;
}
.cart__row .h4--body{
font-size:17px;
}
.cart__row .money {
    color: #000;
    font-size: 15px;
}
.cart__row small {
    font-size: 11px;
}
.input-box form{
margin:0;
display:flex !important;
}
.footer-input .input-box input{
margin:0;
padding: 1px 2px;
}

#productInfo-product {
  @media screen and (max-width: $medium) {
    margin-top: 40px;
  }
}

.collection-logo {
  margin-bottom: 40px;
}

.product-gift .product-variants__gift {
  display: block;
}

.grid__image {
    position: relative;
}

.trending-now {
    position: absolute;
    left: 10px;
    top: 10px;
    background: #f9fafb;
    padding: 0px 6px;
    z-index: 1;
    font-size: 14px;
}

.fea-description {
    font-size: 16px;
    letter-spacing: 0px;
    font-weight: 400;
    line-height: 20px;
    text-align: center;
    padding-bottom: 16px;
}

.grid-item-flex {
  display: flex;
  flex-flow: column;
  justify-content: space-between;
}




/* STYLE.CSS */
.hero_slide_wrapper{
  position:relative;
}
.hero_slide_content{
  position: absolute;
  bottom: 10%;
  left: 7%;
  transform: translate(-10%, -7%);
}
.hero_slide_content h2{
  font-family: "TT Ramillas", "Times New Roman", Times, serif;
  font-style: italic;
  font-size: 32px;
  line-height: 38px;
}
.hero_slide_content a{
  font-family: "Brandon Text", Arial, Helvetica, sans-serif;
  font-size: 24px;
  line-height: 28px;
  text-decoration: none;
}
.hero_slide_wrapper img {
  display: block;
  width: 100%;
}
.slick-arrow{
  position: absolute;
  top: 50%;
  transform: translateX(-50%);
  border: none;
  background: transparent;
}
.slick-next{
  right: 0;
}
.slick-prev{
  left:40px;
  z-index: 9;
}
.mobile_img{
  display:none !important;
}
.btn{
  padding: 0.375rem 30px;
}
.marketplace-container a, .direct-mail a{
  text-decoration: none;
  border-bottom: 1px solid #000;
  width: 135px;
  padding-bottom: 8px;
  text-align: center;
}
.marketplace-container a{
  width: 145px;
}
.as-seen-in .footer-grid{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  align-content: center;
  justify-content: space-between;
  flex-direction: row;
}
.as-seen-in img {
  width: 100px;
  height: auto;
}
.as-seen-in h3{
  margin-bottom: 50px;
}
.logos-container {
  padding: 50px 80px;
}
.top_bar_Slider .slick-arrow, .top_bar_2 .slick-arrow{
top: 50%;
    transform: translateY(-50%) !important;
}

.top_bar_2.slick-initialized .slick-slide {
    padding-left: 30px;
    padding-right: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  position: relative;
  left: -3px;
}

.top_bar_2 .slick-track {
    display: flex;
  justify-content: center;
  align-items: center;
}
.top_bar_Slider .slick-prev, .top_bar_2 .slick-prev{
  left: 10px;
}
.top_bar_Slider .slick-next, .top_bar_2 .slick-next{
  right: 10px;
}
.header_nav{
      display: block;
    width: 100%;
  padding: 0 37px;
}
.header_nav .col {
    -ms-flex: 1;
    flex: 1;
    min-height: 1px;
    padding-left: 1.2rem;
    padding-right: 1.2rem;
}
.header_nav .col-lg-2 {
    -ms-flex: 0 0 16.66667%;
    flex: 0 0 16.66667%;
    max-width: 16.66667%;
}

.nav__list {
    display: -ms-flexbox;
    display: flex;
    list-style-type: none;
    -ms-flex-pack: center;
    justify-content: space-between;
    -ms-flex-align: center;
    align-items: center;
    height: 100%;
    width: 100%;
  margin-bottom: 0;
}
.nav__item {
    cursor: pointer;
    position: relative;
    padding: 0.8rem 0;
}
.nav__item:not(:last-child) {
    margin-right: 2.4rem;
}
.header_nav a{
  text-decoration:none;
}
.actions {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: end;
    justify-content: flex-end;
  list-style: none;
      margin-top: 15px;

}
.actions__item {
    cursor: pointer;
    padding: 0.8rem 0;
}
.actions__item:not(:last-child) {
    margin-right: 1.6rem;
}
.actions__item a {
    text-decoration: none;
    color: var(--color-secondary);
    transition: color .2s;
}
.p_max_width{
  max-width:535px;
}
.footer-input .input-box {
    max-width: 240px;
}
.input-box .contact-form{
  width: 100%;
  display:block;
}
.input-box button{
 float:right;
}
.footer-input .input-box input {
    color:#fff;
}
.footer-input .input-box input:focus-visible {
    outline: none;
  color:#fff;
}
.btm_content{
  margin-top:25px;
}
.social_icons{
      display: flex;
    align-items: center;
    justify-content: space-between;
}
.social_icons li img{
  width:32px;
}
.btm_content p{
  margin-bottom:7px;
}
.br_foot{
  padding:0;
}
.main-footer .container.bottom_menu {
    color: white;
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 4fr 2fr 2fr 2fr;
    grid-template-columns: 4fr 6fr;
    -ms-grid-rows: 3;
    grid-template-rows: 3;
    grid-column-gap: 0;
}
.search-widget .search-widget-inner {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-flow: row wrap;
  -moz-flex-flow: row wrap;
  -ms-flex-flow: row wrap;
  flex-flow: row wrap;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  -moz-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  -moz-align-items: center;
  align-items: center;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%; }
  .search-widget .search-widget-inner .search-form {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-flow: row nowrap;
    -moz-flex-flow: row nowrap;
    -ms-flex-flow: row nowrap;
    flex-flow: row nowrap;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    -webkit-justify-content: flex-start;
    -moz-justify-content: flex-start;
    justify-content: flex-start;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    -moz-align-items: center;
    align-items: center;
    -webkit-align-content: center;
    -moz-align-content: center;
    -ms-flex-line-pack: center;
    align-content: center;
    margin: 0 auto;
    padding: 0;
    width: 100%;
    max-width: 600px;
    border: solid 2px black;
    background: white; }
    .search-widget .search-widget-inner .search-form .search-input {
      -webkit-box-flex: 1;
      -webkit-flex: 1 1 auto;
      -moz-box-flex: 1;
      -moz-flex: 1 1 auto;
      -ms-flex: 1 1 auto;
      flex: 1 1 auto;
      margin: 0;
      padding: 20px;
      font-size: 16px;
      line-height: 24px;
      background: transparent;
      border: none;
      outline: none; }
    .search-widget .search-widget-inner .search-form .search-control {
      -webkit-box-flex: 0;
      -webkit-flex: 0 0 auto;
      -moz-box-flex: 0;
      -moz-flex: 0 0 auto;
      -ms-flex: 0 0 auto;
      flex: 0 0 auto;
      margin: 0;
      padding: 20px;
      font-size: 16px;
      line-height: 24px;
      text-align: center;
      background: transparent;
      border: none;
      outline: none; }
@media (min-width: 768px) {
  .search-widget {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0;
    padding: 20px;
    background: rgba(253, 240, 226, 0.75);
    z-index: 2147483638;
    -webkit-transition: opacity 0.25s ease-in;
    -moz-transition: opacity 0.25s ease-in;
    -ms-transition: opacity 0.25s ease-in;
    -o-transition: opacity 0.25s ease-in;
    transition: opacity 0.25s ease-in;
    pointer-events: none;
    visibility: hidden;
    opacity: 0; }
    .search-widget.visible {
      pointer-events: auto;
      visibility: visible;
      opacity: 1; }
    .search-widget .search-widget-inner {
      max-height: 400px; } }


  .collage_gallery.slick-initialized.slick-slider
  {
    padding-top: 10px;

  }
@media (max-width: 767px) {

  .search-widget {
    display: block;
    margin: 0;
    padding: 0;
    width: 100%; }
    .search-widget .search-widget-inner {
      margin-bottom: 10px; }
      .search-widget .search-widget-inner .search-form {
        border: none;
        border-bottom: solid 2px black; }
        .search-widget .search-widget-inner .search-form .search-input {
          padding: 10px 20px; }
        .search-widget .search-widget-inner .search-form .search-control {
          padding: 10px 20px; }
          .search-widget .search-widget-inner .search-form .search-control.search-toggle {
            display: none; } }
.desk_hide{
  display:none;
}
.botm_ftr ul {
    display: flex;
    justify-content: space-between;
    max-width: 300px;
    align-items: center;
    margin: 0 auto;
    padding-bottom: 0.5em;
    list-style: none;
}
.botm_ftr {
  padding-top:0.5em;
}
.desktop-nav .menu-items li a img {
    max-width: 100%;
      width: auto;
    height: auto;
}
#shopify-section-new-footer{
  margin-bottom:-24px;
}
.add-to-cart__wrapper .btn{
     text-transform: uppercase;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    letter-spacing: 2px;
    line-height: 45px;
    border-radius: 0;
    font-weight: 600;
    padding: 0 20px;
    font-size: 10px;
  border: 1px solid #000;
}
@media only screen and (max-width: 991.98px) {
  .hero_slide_content h2 {
    font-size: 28px;
    line-height: 34px;
  }
  .hero_slide_content a {
    font-size: 20px;
    line-height: 24px
  }
  .footer-grid div{
    width:calc(100%/3);
  }
  .header_logo{
    display:none;
  }
}
@media only screen and (max-width: 767.98px) {
  .mob_hide{
    display:none !important;
  }
  .desk_hide{
    display:block;
    grid-column-start: 1;
    grid-column-end: 4;
    grid-row-end: 3;
        margin-top: 20px;
  }
  .footer-input .input-box {
    max-width: 100%;
}
  .br_foot {
    padding: 0;
    grid-column-start: 1;
    grid-column-end: 4;
    grid-row-end: 3;
}
  .main-footer .container.bottom_menu {
    grid-template-columns: repeat(3, 1fr);
  }
  .header_nav{
    display:none;
  }
  .order_1{
    order:1;
  }
  .as-seen-in img {
    width: 60px;
    height: auto;
  }
  .logos-container {
    padding: 20px 0px 20px 0px;
  }
  .order_2{
    order:2;
  }
  .box-of-week{
    display: flex;
    flex-direction: column;
  }
  .hero_slide_content {
        position: absolute;
    bottom: 15%;
    right: 10%;
    transform: translate(10%,15%);
    text-align: center;
    left: unset;
  }
  .desktop_img{
    display:none  !important;
  }
  .mobile_img{
    display:block  !important;
  }
  .hero_slide_content h2 {
    font-size: 25px;
    line-height: 30px;
  }
  .hero_slide_content a {
    font-size: 18px;
    line-height: 22px
  }
    .main-footer .container {
    padding: 0 20px;
}
  .botm_ftr ul {
    display: flex;
    justify-content: center;
    margin-top: 0px;
    list-style: none;
    align-items: center;
    padding-left: 0;
    padding-bottom: 10px;
    gap: 15px;
    width: 100%;
  }
}
@media only screen and (max-width: 479.98px) {
  .hero_slide_content h2 {
    font-size: 20px;
    line-height: 24px;
  }
  .hero_slide_content a {
    font-size: 16px;
    line-height: 18px;
  }
}
@media (min-width: 768px) {
  .news_br_foot{
    padding:0 25px;
  }
.footer-input {
display:block;
}


}

  .concierge-section{
    background:white;
    padding-top: 100px;
    padding-bottom: 100px;
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-pack:center;
    -ms-flex-pack:center;
    justify-content:center;
    -webkit-box-align:center;
    -ms-flex-align:center;
    align-items:center
  }
  .concierge-section .concierge-container{
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-pack:justify;
    -ms-flex-pack:justify;
    justify-content:space-between;
    max-width:1580px;
    width:100%;
  }
  @media (max-width: 768px){
    .marketplace-container a, .direct-mail a {
      font-size:12px !important;
    }
    .concierge-section .concierge-container{
      -webkit-box-orient:vertical;
      -webkit-box-direction:normal;
      -ms-flex-direction:column;
      flex-direction:column
    }
    .concierge-section .concierge-container .logo img{
      margin-top:0px;
      margin-bottom:30px
    }
  }
  .concierge-section .concierge-container .logo{
    max-width:500px;
    width:100%;
    padding-right:30px
  }
  .concierge-section .concierge-container .logo img{
    max-width:411px;
    margin-top:30px;
    display:block
  }
    .concierge-section .concierge-container .logo h2{
    margin-top:30px;
    display:block
  }
  .concierge-section .concierge-container .content{
    max-width:963px;
    width:100%
  }
  .concierge-section .concierge-container .content h3{
    font-family:"TT Ramillas";
    font-style:normal;
    font-weight:300;
    font-size:66px;
    line-height:92px;
    color:#000000
  }
  .concierge-section .concierge-container .content p{
    max-width:935px;
    width:100%;
    font-family:"Brandon Text";
    font-style:normal;
    font-weight:390;
    font-size:26px;
    line-height:36px;
    color:#000000;
    margin-bottom:44px
  }
.content a{
    font-family:"Brandon Text";
    font-style:normal;
    font-weight:390;
    font-size:18px;
    line-height:25px;
    color:#ffff;
    text-decoration:none;
    width:250px;
    height:70px;
    background-color:#000000;
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-pack:center;
    -ms-flex-pack:center;
    justify-content:center;
    -webkit-box-align:center;
    -ms-flex-align:center;
    align-items:center
  }
  .what-we-do{
    background-color:#e8e3dd;

  }
  .what-we-do-container{
    max-width:1720px;
    width:100%;


    margin: 0 auto;
  }
  @media (max-width: 768px){
    .what-we-do-container{
      -webkit-box-orient:vertical;
      -webkit-box-direction:normal;
      -ms-flex-direction:column;
      flex-direction:column
    }
  }
  .what-we-do-container h3{
    height:92px;
    font-family:"TT Ramillas";
    font-style:normal;
    font-weight:300;
    font-size:66px;
    line-height:92px;
    text-align:center;
    text-transform:capitalize;
    color:#000000
  }
  .what-we-do-container .what-we-do-list{
    list-style-type:none;
    width:100%;
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -ms-flex-pack:distribute;
    justify-content:space-around;
    -ms-flex-wrap:wrap;
    flex-wrap:wrap;
  padding-left:0;
  }

  .what-we-do-container .what-we-do-list li{
    -webkit-box-flex:1;
    -ms-flex:1;
    flex:1;
    text-align:center
  }
  .what-we-do-container .what-we-do-list li .circle{
    width:200px;
    height:200px;
    background:#ffff;
    border-radius:50%;
    margin:49px auto 34px;
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-align:center;
    -ms-flex-align:center;
    align-items:center;
    -webkit-box-pack:center;
    -ms-flex-pack:center;
    justify-content:center;
    position:relative
  }
  .what-we-do-container .what-we-do-list li .circle .title{
    font-family:"Brandon Text";
    font-style:normal;
    font-weight:450;
    font-size:24px;
    line-height:33px;
    text-align:center;
    position:relative;
    z-index:5
  }
  .what-we-do-container .what-we-do-list li .circle::before{
    background:#ffff;
    border-radius:50%;
    content:"";
    position:absolute;
    -webkit-transition:all 0.5s ease-in;
    transition:all 0.5s ease-in;
    z-index:1
  }
  .what-we-do-container .what-we-do-list li .circle .icon{
    position: absolute;
    width: 20px;
    height: 20px;
    z-index: 1;
    overflow: hidden;
    bottom: 0%;
        -webkit-transition: all 0.5s ease-in;
    transition: all 0.2s ease-in;
    opacity:0;
  }
  .what-we-do-container .what-we-do-list li .circle .icon svg{
    position:absolute;
    bottom:0;
    left:50%;
    -webkit-transform:translateX(-50%);
    transform:translateX(-50%);
    z-index:6;
    -webkit-transition:all 0.5s ease-in;
    transition:all 0.2s ease-in;

  }
  .what-we-do-container .what-we-do-list li {
  position: relative;
  margin-top: 0;
  transition: margin-top ease 0.5s;
}
  .what-we-do-container .what-we-do-list .circle_link:hover li{
    margin-top: -2em;
    transition: margin-top ease 0.5s;
  }
/*   .what-we-do-container .what-we-do-list li .circle:hover::before{
    -webkit-transform:scale(1.09);
    transform:scale(1.09)
  } */
  .what-we-do-container .what-we-do-list .circle_link:hover li .circle .icon{
        bottom: 20%;
    opacity:1;
        -webkit-transition: all 0.5s ease-in;
    transition: all 0.2s ease-in;
  }
  .what-we-know-for{
    width:100%;
    padding-top:140px;
    padding-bottom:140px;
    background-color:#000000;
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-align:center;
    -ms-flex-align:center;
    align-items:center;
    -webkit-box-pack:center;
    -ms-flex-pack:center;
    justify-content:center
  }
.icons_content span{
  font-family:"Brandon Text";
}
  .what-we-know-for h3{
    font-family:"TT Ramillas";
    font-style:normal;
    font-weight:300;
    font-size:66px;
    line-height:92px;
    text-align:center;
    text-transform:capitalize;
    color:#ffffff
  }
  .what-we-know-for-container{
    margin-top:100px;
    max-width:1364px;
    padding-left:30px;
    padding-right:30px;
    margin-right:auto;
    margin-left:auto;
    width:100%
  }
  .what-we-know-for-container h6{
    font-family:"Poppins";
    font-style:normal;
    font-weight:600;
    font-size:20px;
    line-height:30px;
    text-transform:uppercase;
    color:#ffff;
    margin-bottom:50px
  }
  .what-we-know-for-container .what-we-know-details{
    max-width:964px;
    width:100%;
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -ms-flex-pack:distribute;
    justify-content:space-around;
    list-style-type:none;
    padding-left:0px;
    -ms-flex-wrap:wrap;
    flex-wrap:wrap;
    margin:auto
  }
  .what-we-know-for-container .what-we-know-details li{
    -webkit-box-flex:1;
    -ms-flex:1;
    flex:1;
    position:relative;
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-pack:center;
    -ms-flex-pack:center;
    justify-content:center
  }
  .what-we-know-for-container .what-we-know-details li:last-child::before{
    display:none
  }
  .what-we-know-for-container .what-we-know-details li::before{
    content:"";
    height:16px;
    width:1px;
    background-color:white;
    position:absolute;
    right:0px;
    top:32px
  }
  .what-we-know-for-container .what-we-know-details li .detail-heading{
    font-family:"Brandon Text";
    font-style:normal;
    font-weight:450;
    font-size:35px;
    line-height:35px;
    color:#ffffff
  }
  .what-we-know-for-container .what-we-know-details li .detail-text{
    font-family:"Brandon Text";
    font-style:normal;
    font-weight:450;
    font-size:26px;
    line-height:39px;
    color:#ffffff
  }
  .what-we-know-for-container .what-we-know-subdetails{
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    margin-top:100px;
    -webkit-box-pack:justify;
    -ms-flex-pack:justify;
    justify-content:space-between;
    -ms-flex-wrap:wrap;
    flex-wrap:wrap
  }
  .what-we-know-for-container .what-we-know-subdetails .what-we-know-subdetails-item{
    -webkit-box-flex:1;
    -ms-flex:1;
    flex:1;
    padding:0 15px;
    max-width:300px;
    min-width:200px
  }
  .what-we-know-for-container .what-we-know-subdetails .what-we-know-subdetails-item h3{
    font-family:"Brandon Text";
    font-style:normal;
    font-weight:390;
    font-size:20px;
    line-height:28px;
    text-transform:uppercase;
    color:#ffffff;
    text-align:left
  }
  .what-we-know-for-container .what-we-know-subdetails .what-we-know-subdetails-item p{
    font-family:"Brandon Text";
    font-style:normal;
    font-weight:390;
    font-size:20px;
    line-height:28px;
    color:#fafafa;
    opacity:0.7
  }
  .reviews{
    padding-top:100px;
    padding-bottom:100px
  }
  .reviews .review-heading{
    font-family:"Brandon Text";
    font-style:normal;
    font-weight:390;
    font-size:42px;
    line-height:58px;
    text-align:center;
    text-transform:uppercase;
    color:#000000;
    margin-bottom:60px
  }
  .reviews .reviews-container .responsive-slider{
    max-width:1400px;
    margin:auto
  }
  .reviews .reviews-container .responsive-slider .slick-prev.slick-arrow,.reviews .reviews-container .responsive-slider .slick-next.slick-arrow{
    background-color:transparent;
    color:transparent;
    border:transparent;
    background-repeat:no-repeat;
    width:65.88px;
    height:41.53px;
    position:absolute;
    z-index:5
  }
  .reviews .reviews-container .responsive-slider .slick-prev.slick-arrow{
    top:50%;
    left:0px;
    -webkit-transform:translateY(-50%);
    transform:translateY(-50%);
    background-image:url(../img/arrowleft.png)
  }
  .reviews .reviews-container .responsive-slider .slick-next.slick-arrow{
    top:50%;
    right:0px;
    -webkit-transform:translateY(-50%);
    transform:translateY(-50%);
    background-image:url(../img/arrowright.png)
  }
  .reviews .reviews-container .review-card{
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-orient:horizontal;
    -webkit-box-direction:normal;
    -ms-flex-direction:row;
    flex-direction:row;
    -webkit-box-align:start;
    -ms-flex-align:start;
    align-items:flex-start;
    padding:50px 30px;
    max-width:600px;
    height:470px;
    background:#fafafa;
    border-radius:10px;
    justify-content: space-around;
      margin:0 auto;
  }
  .reviews .reviews-container .review-card .content{
    padding-left:30px
  }
  .reviews .reviews-container .review-card .content .sub-heading{
    font-family:"Brandon Text";
    font-style:normal;
    font-weight:450;
    font-size:15px;
    line-height:21px;
    letter-spacing:0.08em;
    color:#000000
  }
  .reviews .reviews-container .review-card .content-heading{
    font-family:"Brandon Text";
    font-style:normal;
    font-weight:450;
    font-size:22px;
    line-height:31px;
    margin-top:10px;
    color:#434343
  }
  .reviews .reviews-container .review-card .content p{
    font-family:"Brandon Text";
    font-style:normal;
    margin-top:10px;
    margin-bottom:0px;
    font-weight:390;
    font-size:20px;
    line-height:28px;
    color:#434343
  }
  .reviews .reviews-container .review-card .content .job-title{
    font-family:"Brandon Text";
    font-style:normal;
    font-weight:450;
    font-size:15px;
    line-height:21px;
    margin-top:10px;
    color:#434343
  }
  .reviews .reviews-container .responsive-slider .slick-next.slick-arrow{
    -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-transition-duration: 0.5s;
  transition-duration: 0.5s;
    right:-50px;
  }
  .reviews .reviews-container .responsive-slider .slick-next.slick-arrow:hover {
  -webkit-transform: scale(1.2) translateY(-5px);
  transform: scale(1.2) translateY(-5px);

/*   -webkit-transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36);
  transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36); */
}
  .reviews .reviews-container .responsive-slider .slick-prev.slick-arrow{
    -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-transition-duration: 0.5s;
  transition-duration: 0.5s;
    left:-60px;
  }
  .reviews .reviews-container .responsive-slider .slick-prev.slick-arrow:hover {
   -webkit-transform: scale(1.2) translateY(-5px);
  transform: scale(1.2) translateY(-5px);
  -webkit-transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36);
  transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36);
}
  .reviews .reviews-container .responsive-slider .slick-arrow img {
    max-width:75%;
  }

   @media (min-width: 1600px){
     .reviews .reviews-container .responsive-slider .slick-prev.slick-arrow{
    left:-120px;
  }
       .reviews .reviews-container .review-card{
    max-width:640px;
  }
       .reviews .reviews-container .responsive-slider .slick-next.slick-arrow{
    right:-110px;
  }
   }
  @media (max-width: 1440.98px){
    .what-we-do-container .what-we-do-list{
      padding-left:0;
    }
    .what-we-do-container .what-we-do-list li .circle {
    width: 170px;
    height: 170px;
    }
    .what-we-do-container .what-we-do-list li .circle .title{
      font-size:16px !important;
    }
    .reviews .reviews-container .review-card{
      max-width:490px;
    }
    .reviews .reviews-container .responsive-slider{
      max-width:1100px;
    }
  }
    @media (max-width: 1199.98px){
    .what-we-do-container .what-we-do-list li .circle {
    width: 150px;
    height: 150px;
    }
    .what-we-do-container .what-we-do-list li .circle .title{
      font-size:15px !important;
    }
          .reviews .reviews-container .slick-slide.slick-active:not(.slick-current) .review-card{
margin-right: 60px;
            margin-left: 30px;
    }

      .reviews .reviews-container .slick-slide.slick-current.slick-active .review-card{
        margin-left: 60px;
        margin-right: 30px;
      }
      .review-card .icon svg{
        width:25px;
      }
        .reviews .reviews-container .review-card .content-heading {
    font-size:20px;
  }
  .reviews .reviews-container .review-card .content p{
    font-size:18px;
  }
      .reviews .reviews-container .responsive-slider .slick-prev.slick-arrow{
        left:0;
      }
      .reviews .reviews-container .responsive-slider .slick-next.slick-arrow{
        right:0;
      }
  }
     @media (max-width: 1024.98px){
    .what-we-do-container .what-we-do-list li .circle {
    width: 120px;
    height: 120px;
    }
    .what-we-do-container .what-we-do-list li .circle .title{
      font-size:13px !important;
    }
                 .reviews .reviews-container .review-card{


                   padding:40px 15px;
                   margin:0 50px;
    }
               .reviews .reviews-container .review-card .content-heading {
    font-size:17px;
  }
  .reviews .reviews-container .review-card .content p{
    font-size:15px;
  }
  }
       @media (max-width: 991.98px){
    .what-we-do-container .what-we-do-list li .circle {
    width: 100px;
    height: 100px;
    }
    .what-we-do-container .what-we-do-list li .circle .title{
      font-size:13px !important;
      line-height:20px !important;
    }
  }
@media (max-width: 767.98px){
.reviews-container .slick-dots {
  bottom: -50px !important;
}
  .reviews-container .slick-dots li button:before {
    background: black !important;
  }
.concierge-section .concierge-container .logo {
    padding-right: 0;
}
  .concierge-section .concierge-container .logo img{
    max-width: 275px;
    display: block;
    padding-right: 0;
  }
  .content a{
        width: 200px;
    height: 50px;
    text-align: left;
    padding-left: 0;
    margin-left: 0;
  }
  .what-we-do-list {
    justify-content: center !important;
  }
  .what-we-do-list .circle_link{
    width:calc(100%/3);
  }
  .what-we-do-container .what-we-do-list li .circle .title{
        font-size: 12px !important;
    text-align: center;
    margin: 0 auto;
  }
  .what-we-do-container .what-we-do-list li .circle::before {
    width: 100px;
    height: 100px;
  }
  .what-we-do-container .what-we-do-list li .circle {
    width: 100px;
    height: 100px;
        margin: 10px auto;
  }
  .what-we-do-container .what-we-do-list li .circle .icon {
    width: 140px;
    height: 140px;
  }
  .what-we-do-container .what-we-do-list{
    padding-left:0;
  }
  .what-we-do-container h3 {
    font-size: 20px !important;
  }
  .reviews .review-heading{
        font-size: 26px !important;
    line-height: 34px !important;
    padding: 0 15px;
  }
  .review-card .icon svg{
    width:25px;
  }
  .reviews .reviews-container .review-card .content {
    padding-left: 15px;
}
  .reviews .reviews-container .review-card .content-heading {
    font-size:20px;
  }
  .reviews .reviews-container .review-card .content p{
    font-size:18px;
  }
  .reviews .reviews-container .review-card {
    padding: 35px 20px;
        margin: 0 50px !important;
    max-width:100%;
    max-height: auto !important;
    height: auto !important;
  }
  .reviews {
    padding-top: 0px;
    padding-bottom: 0px;
}
  .what-we-know-for h3.tr_head{
    font-size:22px !important;
    line-height:26px !important;
  }
  .what-we-know-for-container {
    margin-top: 40px !important;
  }
  .what-we-know-for-container .what-we-know-details li .detail-heading{
    font-size: 28px !important;
    line-height: 32px !important;
    font-weight: 700 !important;
  }
  .what-we-know-for-container .what-we-know-details li .detail-text{
    font-size: 14px !important;
    font-weight: 300 !important;
    line-height: 18px !important;
  }
  .what-we-know-for-container .what-we-know-details li{
    width: calc(100%/2);
    display: block;
    -webkit-box-flex: unset;
    -ms-flex: unset;
    flex: unset;
    margin-bottom: 30px;
    padding-left: 15px;
  }
  .what-we-know-for-container .what-we-know-details li::before{
    width:0;
    visibility:hidden;
  }
  .what-we-know-for-container .what-we-know-details {
    justify-content: flex-start;
  }
  .what-we-know-for-container .what-we-know-subdetails {
    margin-top: 20px;
  }
  .what-we-know-for-container .what-we-know-subdetails .what-we-know-subdetails-item{
    max-width:100%;
  }
  .slick-dots {
    position: absolute;
    bottom: -25px;
    display: block;
    width: 100%;
    padding: 0;
    margin: 0;
    list-style: none;
    text-align: center;
}
  .slick-dots li {
    position: relative;
    display: inline-block;
    width: 20px;
    height: 20px;
    margin: 0 3px;
    padding: 0;
    cursor: pointer;
}
  .slick-dots li button {
    font-size: 0;
    line-height: 0;
    display: block;
    width: 20px;
    height: 20px;
    padding: 5px;
    cursor: pointer;
    color: transparent;
    border: 0;
    outline: none;
    background: transparent;
}
  .slick-dots li button:before {
font-family: 'slick';
    font-size: 6px;
    line-height: 20px;
    position: absolute;
    top: 0;
    left: 0;
    width: 7px;
    height: 7px;
    content: '';
    text-align: center;
    opacity: .5;
    color: #fff;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background-color: #fff;
    border-radius: 50px;
}
  .slick-dots li.slick-active button:before {
    opacity: 1;
    color: #fff;
}
  .what-we-know-for {

    width: 100%;
    padding-top: 60px;
    padding-bottom: 60px;
  }
}
@media (max-width: 500px){
.reviews .reviews-container .review-card {
margin: 0px 25px !important;

}
}
@media (max-width: 370.98px){
  .what-we-do-container .what-we-do-list li .circle .title{
        font-size: 9px !important;
    text-align: center;
    margin: 0 auto;
  }
  .what-we-do-container .what-we-do-list li .circle::before {
    width: 80px;
    height: 80px;
  }
  .what-we-do-container .what-we-do-list li .circle {
    width: 80px;
    height: 80px;
        margin: 7px auto;
  }

}

/*   .collage_gallery{
        max-width: 1150px;
    margin: 0 auto;
  } */
  .tr_grid_wrapper .grid {
  position:relative;
  display: grid;
  grid-template-areas:
  "left right-up"
  "left right-down";

    grid-gap: 10px;
}

.tr_grid_wrapper .left {
  grid-area: left;
  width: 100%;
    display: block;
    overflow: hidden;
}
.tr_grid_wrapper .right-up {
  grid-area: right-up;
  width: 100%;
    display: block;
    overflow: hidden;
}
.tr_grid_wrapper .right-down{
  grid-area: right-down;
  width: 100%;
    display: block;
    overflow: hidden;
}
  .tr_grid_wrapper img{
    width: 100%;

  }
  .slick-slider.collage_gallery .slick-list{
    padding:0 20% 0 10%;
  }
  .tr_grid_wrapper{
    margin:0 5px;
  }
  .collage_gallery{
    margin:50px 0;
  }
.shopify-section .row{
      align-items: stretch;
    justify-content: center;
}
.content h3 {
    font-family: "TT Ramillas";
}
.tr_content .content span {
    font-family:"Brandon Text";
}

.tr_content .content{
      display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}
.tr_content .button_holder, .tr_content .content_holder, .tr_content .subtitle_holder{
  margin-bottom: 15px;
}
#shopify-section-nc-intro-section-image{
  margin-bottom:70px;
}
.what-we-know-for.tr_know_for{
  min-height: auto;
    width: 100%;
    padding-top: 25px;
    padding-bottom: 100px
}
.tr_know_for .what-we-know-for-container{
      margin-top: 85px;
}
.icons_wrapper{
  display: flex;
    align-items: center;
    justify-content: center;
      gap: 15px;
}
.icons_wrapper span{
  display:block;
}
.icons_holder .icons_img{
    width:60px;
  max-width:100%;
}
.how-it-work.tr_hiw{
      padding: 70px 0 80px;
}
.tr_grid_wrapper .grid{
  margin-right:30px;
}
.direct-mail img{
  width:100%;
}
.direct-mail p {
    margin-bottom: 75px;
}
/* #shopify-section-template--14241381777526__16571068638a8abfc7{
  overflow:hidden;
}
.collage_gallery{
  width: 2200px;
} */
  @media (max-width: 767.98px){
    .tr_grid_wrapper .grid {

    }
    .tr_content{
  margin-top:20px;
}

  }
    @media (max-width: 479.98px){

      .tr_grid_wrapper {
    margin: 0 2.5px;
}
      .reviews-container{
        padding:0 10px;
      }
        .reviews .reviews-container .review-card {
        margin: 0 30px;
  }
  }

 .page-margin {
   padding-top: 0;
 }

 .cart-page {
   display: flex;
   flex-direction: column-reverse;
   padding-bottom: 20px;
   align-items: flex-end;
 }

.header_social_media a {
   transition: none !important;
 }

.navSlide .header_social_media a {
  transition: 0.4s !important;
}
.mob_search_form .search-widget {
  opacity: 0;
    transition: opacity 0.4s ease-in;
    -ms-transition: opacity 0.4s ease-in;
    -moz-transition: opacity 0.4s ease-in;
    -webkit-transition: opacity 0.4s ease-in;
}
.navSlide .mob_search_form .search-widget {
  opacity: 1;
    transition: opacity 0.4s ease-in;
    -ms-transition: opacity 0.4s ease-in;
    -moz-transition: opacity 0.4s ease-in;
    -webkit-transition: opacity 0.4s ease-in;
}

.concierge-section .renew-container .content .klaviyo-form input {
  min-width: 300px;
}

.concierge-section .renew-container .content h6 {
  text-align: center;
  width: 60%;
  color: gray;
}

.concierge-section .renew-container .content {
  flex: 1 1;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.concierge-section .renew-container .logo {
  width: 100%;
  padding-right: 30px;
  flex: 1 1;
}

.concierge-section .renew-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  max-width: 1280px;
  width: 100%;
}

@media (max-width: 767.98px){
  .concierge-section .renew-container {
    flex-direction: column;
    gap: 40px;
  }
  .concierge-section .renew-container .logo {
    padding-left: 30px;
  }
  .concierge-section .renew-container .content {
    padding: 0 30px;
  }
}

/*============ SPLASH PAGES | ABOVE MARKET ==================*/
.splash-page-section {
  display: block;
  margin: 0 auto; }
  .splash-page-section .background-white {
    color: black;
    background-color: white; }
  .splash-page-section .background-nude {
    color: black;
    background-color: #fdf0e2; }
  .splash-page-section .background-blush {
    color: black;
    background-color: #fae4cb; }
  .splash-page-section .background-black {
    color: white;
    background-color: black; }
  .splash-page-section .btn-white {
    color: black;
    background-color: white; }
  .splash-page-section .btn-nude {
    color: black;
    background-color: #fdf0e2; }
  .splash-page-section .btn-blush {
    color: white;
    background-color: #fae4cb; }
  .splash-page-section .btn-black {
    color: white !important;
    background-color: black !important;
    font-size: 12px;
    letter-spacing: 0px;
    font-weight: 400;
    line-height: 20px;
    border-radius: 0px;
    padding: 11px 30px; }
  .splash-page-section h1, .splash-page-section .h1, .splash-page-section .h1--body, .splash-page-section h2, .splash-page-section .h2, .splash-page-section .h2--body, .splash-page-section h3, .splash-page-section .h3, .splash-page-section .h3--body, .splash-page-section .sky-pilot-access-denied h5, .sky-pilot-access-denied .splash-page-section h5, .splash-page-section .sky-pilot-access-denied .h5, .sky-pilot-access-denied .splash-page-section .h5, .splash-page-section .sky-pilot-access-denied .h5--body, .sky-pilot-access-denied .splash-page-section .h5--body, .splash-page-section h4, .splash-page-section .h4, .splash-page-section .h4--body, .splash-page-section h5, .splash-page-section .h5, .splash-page-section .h5--body, .splash-page-section h6, .splash-page-section .h6, .splash-page-section .h6--body, .splash-page-section p, .splash-page-section ul, .splash-page-section ol, .splash-page-section li {
    color: inherit; }

/*============ SPLASH PAGES | ABOVE MARKET ==================*/
.splash-page-section {
    background-color: $blush;
	display: block;
	margin: 0 auto;

	// Backgrounds
	.background-white {
		color: $black;
		background-color: $white;
	}

	.background-nude {
		color: $black;
		background-color: $nude;
	}

	.background-blush {
		color: $black;
		background-color: $blush;
	}

	.background-black {
		color: $white;
		background-color: $black;
	}

	// Buttons
	.btn-white {
		color: $black;
		background-color: $white;
	}

	.btn-nude {
		color: $black;
		background-color: $nude;
	}

	.btn-blush {
		color: $white;
		background-color: $blush;
	}

	.btn-black {
		color: $white;
		background-color: $black;
        font-size: 12px;
        letter-spacing: 0px;
        font-weight: 400;
        line-height: 20px;
        border-radius: 0px;
        padding: 11px 30px;
	}

	// Typography
	h1, h2, h3, h4, h5, h6, p, ul, ol, li {
		color: inherit;
	}
}

// Section block types
.splash-page-section {
	display: block;
	margin: 0 auto;
	padding: 0;

	@include at-query($max, $medium) {
		.wrapper {
			padding: 0;
		}
  }
}


.editorial-content {
	position: relative;
	display: flex;
	flex-flow: row wrap;
	align-items: center;
	justify-content: center;

	.editorial-content-image {
		margin: 0;
		width: 50%;
		padding: 0;

		&.image-only {
			width: 100%;
		}

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

		@include at-query($max, $medium) {
			width: 100%;
			order: 1 !important;
		}
	}

	.editorial-content-copy {
		margin: 0;
		width: 50%;
		padding: 80px;
		text-align: left;

		@include at-query($max, $medium) {
			padding: 20px $gutter 40px;
			width: 100%;
			order: 2 !important;
    }

      /*END SPLASH */

  
/* END STYLE.CSS*/