/** Shopify CDN: Minification failed

Line 91:2 Comments in CSS use "/* ... */" instead of "//"
Line 166:2 Comments in CSS use "/* ... */" instead of "//"
Line 182:2 Comments in CSS use "/* ... */" instead of "//"
Line 228:0 Comments in CSS use "/* ... */" instead of "//"
Line 233:20 Comments in CSS use "/* ... */" instead of "//"
Line 239:20 Comments in CSS use "/* ... */" instead of "//"
Line 324:0 Comments in CSS use "/* ... */" instead of "//"
Line 325:0 Comments in CSS use "/* ... */" instead of "//"
Line 352:1 Unexpected "0%"
Line 353:1 Unexpected "100%"
... and 183 more hidden warnings

**/
@charset "UTF-8";
/*============================================================================
  Velstar Theme | Built with Slate
    - You cannot use native CSS/Sass @imports in this file without a build script
==============================================================================*/

/* Table of Contents
==================================================

    #Tools
    #Settings
    #Common
    #Vendor

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

/* ==========================================================================
#Tools
========================================================================== */

/* Table of Contents
==================================================

    #Clearfix
    #Prefix
    #Media Query
    #Visually Hidden
    #Visually Shown
    #PX to REM
    #Aspect Ratio

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

/* ==========================================================================
#Clearfix
========================================================================== */

/* START CUSTOM CSS  */


.hero .slick-slider .slick-arrow {
  background-color: black !important;
}

img {
    max-width: 100%;
    width: auto;
}

div#shopify-section-d5caccc1-e5a8-486e-a471-8cf0c8797153 img.img-fluid {
    height: 70px;
    width: 130px;
    margin-top: 20px;
    margin-bottom: 20px;
}

div#shopify-section-d5caccc1-e5a8-486e-a471-8cf0c8797153 h2.h1 {
    font-size: 35px;
}

.head-top-actions p {
    font-size: 11px !important;
}

/* END CUSTOM CSS  */

@mixin clearfix() {
  &::after {
    content: '';
    display: table;
    clear: both;
  }

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

/* ==========================================================================
#Prefix
========================================================================== */

/*
  Prefix mixin for generating vendor prefixes.
  Based on https://github.com/thoughtbot/bourbon/blob/v4-stable/app/assets/stylesheets/addons/_prefixer.scss

  Usage:
    // Input:
    .element {
      @include prefix(transform, scale(1), ms webkit spec);
    }

    // Output:
    .element {
      -ms-transform: scale(1);
      -webkit-transform: scale(1);
      transform: scale(1);
    }
*/
@mixin prefix($property, $value, $prefixes) {
  @each $prefix in $prefixes {
    @if $prefix == webkit {
      -webkit-#{$property}: $value;
    } @else if $prefix == moz {
      -moz-#{$property}: $value;
    } @else if $prefix == ms {
      -ms-#{$property}: $value;
    } @else if $prefix == o {
      -o-#{$property}: $value;
    } @else if $prefix == spec {
      #{$property}: $value;
    } @else  {
      @warn 'Unrecognized prefix: #{$prefix}';
    }
  }
}


/* ==========================================================================
#Media Query
========================================================================== */

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


/* ==========================================================================
#Visually Hidden
========================================================================== */

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

/* ==========================================================================
#Visually Shown
========================================================================== */

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

/* ==========================================================================
#PX to REM
========================================================================== */

@mixin px-to-rem($pxValue, $property: "font-size", $standard-size: 16) {
  #{$property}: $pxValue + px;
  #{$property}: $pxValue/$standard-size + rem;
}

/* ==========================================================================
#Aspect Ratio
========================================================================== */

@mixin aspect-ratio($width, $height, $property: "padding-top") {  
  #{$property}: ($height / $width) * 100%;
}


/* ==========================================================================
#Settings
========================================================================== */

/* Table of Contents
==================================================

    #Colours
    #Fonts
    #Breakpoints
    #Grid

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

/* ==========================================================================
#Colours
========================================================================== */

//BG: Do we want to allow the user to change the primary colour? any benefit to this?
$brand-primary: #FFF1E5;
$brand-secondary: #E7C6AB;
$brand-tertiary: #cc0000;

$gray-100: #f9f9f9; //Caris Defined
$gray-200: #e9ecef;
$gray-300: #dee2e6;
$gray-400: #ced4da;
$gray-500: #b7bbc0; 
$gray-600: #6c757d;
$gray-700: #464646; //Caris Defined
$gray-800: #3c3c3c; 
$gray-900: #212529;

$danger: #f8d7da;
$dangerText: #721c24;
$dangerBtn: #dc3545;

$warning:#fff3cd;
$warningText:#856404;

$success:#d4edda;
$successText:#155724;
$successBtn:#28a745;


/* ==========================================================================
#Fonts
========================================================================== */

/* @font-face{
	font-family:"Helvetica";
	font-weight:100;
	font-style:normal;
	src:url("/cdn/fonts/helvetica/helvetica_n3.e01288c0d2e8e4f4101819b750499a38c41ed953.woff2?&hmac=94da4a346be1a7cd63fb632b3d10a7eeb0f68855fe2e54adfb534dc20c4af195") format("woff2"),
	url("/cdn/fonts/helvetica/helvetica_n3.689236138e1e3e1b03386488943f79b29e240af5.woff?&hmac=be08d4fd5a6baeaf9106864ba38e68c42f5015fa0c2b6307aa4a2967325afa60") format("woff")
}

@font-face{
	font-family:"Helvetica";
	font-weight:normal;
	font-style:normal;
	src:url("/cdn/fonts/helvetica/helvetica_n4.fe093fe9ca22a15354813c912484945a36b79146.woff2?&hmac=64c57d7fee8da8223a0d4856285068c02c248ef210cae57dcd9c3e633375e8a4") format("woff2"),
	url("/cdn/fonts/helvetica/helvetica_n4.8bddb85c18a0094c427a9bf65dee963ad88de4e8.woff?&hmac=f74109e3105603c8a8cfbd8dec4e8a7e53572346fb96aacec203fc3881ddabf1") format("woff")
}

@font-face {
	font-family: 'Helvetica-Neue';
	font-weight:normal;
	font-style:normal;
	src: url('{{ "HelveticaNeue-Thin.woff2" | asset_url }}') format("woff2"),
			 url('{{ "HelveticaNeue-Thin.woff" | asset_url }}') format("woff");
}*/

/* $title-font: "Montserrat", sans-serif;
$body-font: "Jost", sans-serif;
$search-font: "Jost", sans-serif; */



$font-size-base: 16px;
$line-height-base: 18px;
$title-font-color: #000;
$body-font-color: #000;

/* ==========================================================================
#Breakpoints
========================================================================== */

$screen-xs:0;
$screen-sm:576px;
$screen-md:768px;
$screen-lg:992px;
$screen-xl:1200px;
$screen-xxl:1500px;

$container-sm:540px;
$container-md:720px;
$container-lg:960px;
$container-xl:1140px;
$container-xxl:1440px;

$small: 'small';
$small-down: 'small-down';
$small-up: 'small-up';
$medium: 'medium';
$medium-down: 'medium-down';
$medium-up: 'medium-up';
$large: 'large';
$large-down: 'large-down';
$large-up: 'large-up';
$widescreen: 'widescreen';
$widescreen-down: 'widescreen-down';
$widescreen-ultra: 'widescreen-ultra';

// The `$breakpoints` list is used to build our media queries.
// You can use these in the media-query mixin.
$breakpoints: (
  	$small '(min-width: #{$screen-sm}) and (max-width: #{$screen-md - 1})',
	$small-down '(max-width: #{$screen-sm - 1})',	
  	$small-up '(min-width: #{$screen-sm})',
  	$medium '(min-width: #{$screen-md}) and (max-width: #{$screen-lg - 1})',
  	$medium-down '(max-width: #{$screen-md - 1})',
  	$medium-up '(min-width: #{$screen-md})',
  	$large '(min-width: #{$screen-lg}) and (max-width: #{$screen-xl - 1})',
  	$large-down '(max-width: #{$screen-lg - 1})',
  	$large-up '(min-width: #{$screen-lg})',
	$widescreen '(min-width: #{$screen-xl})',
	$widescreen-down '(max-width: #{$screen-xl})',
	$widescreen-ultra '(min-width: #{$screen-xxl})'
);


/* ==========================================================================
#Grid
========================================================================== */

$gutter:30px;

/* ==========================================================================
#Keyframes
========================================================================== */
@keyframes insideHeaderScroll {
	0%   {top: -28px;}
	100% {top: 0px;}
}

@keyframes bounce {
	0%, 20%, 50%, 80%, 100% {
		transform: translateY(0);
	}
	40% {
		transform: translateY(-14px);
	}
	60% {
		transform: translateY(-7px);
	}
}

/* ==========================================================================
#Common
========================================================================== */

/*!
 * Bootstrap Reboot v4.1.1 (https://getbootstrap.com/)
 * Copyright 2011-2018 The Bootstrap Authors
 * Copyright 2011-2018 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 * Forked from Normalize.css, licensed MIT (https://github.com/necolas/normalize.css/blob/master/LICENSE.md)
 */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-family: sans-serif;
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -ms-overflow-style: scrollbar;
  -webkit-tap-highlight-color: transparent;
}

@-ms-viewport {
  width: device-width;
}

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

body {
  margin: 0;
  font-family: $body-font;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: $body-font-color;
  text-align: left;
  background-color: #fff;
}

[tabindex="-1"]:focus {
  outline: 0 !important;
}

hr {
  box-sizing: content-box;
  height: 0;
  overflow: visible;
}

h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  margin-bottom: 0.5rem;
}

p {
  margin-top: 0;
  margin-bottom: 1rem;
}

abbr[title],
abbr[data-original-title] {
  text-decoration: underline;
  -webkit-text-decoration: underline dotted;
  text-decoration: underline dotted;
  cursor: help;
  border-bottom: 0;
}

address {
  margin-bottom: 1rem;
  font-style: normal;
  line-height: inherit;
}

ol,
ul,
dl {
  margin-top: 0;
  margin-bottom: 1rem;
}

ol ol,
ul ul,
ol ul,
ul ol {
  margin-bottom: 0;
}

dt {
  font-weight: 700;
}

dd {
  margin-bottom: .5rem;
  margin-left: 0;
}

blockquote {
  margin: 0 0 1rem;
}

dfn {
  font-style: italic;
}

b,
strong {
  font-weight: bolder;
}

small {
  font-size: 80%;
}

sub,
sup {
  position: relative;
  font-size: 75%;
  line-height: 0;
  vertical-align: baseline;
}

sub {
  bottom: -.25em;
}

sup {
  top: -.5em;
}

a {
  color: #000;
  background-color: transparent;
  -webkit-text-decoration-skip: objects;
  text-decoration: none;
}

a:hover {
  color: darken($brand-secondary,7%);
}

a:focus {
  outline: none;
}

a:not([href]):not([tabindex]) {
  color: inherit;
  text-decoration: none;
}

a:not([href]):not([tabindex]):hover, a:not([href]):not([tabindex]):focus {
  color: inherit;
  text-decoration: none;
}

a:not([href]):not([tabindex]):focus {
  outline: 0;
}

pre,
code,
kbd,
samp {
  font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 1em;
}

pre {
  margin-top: 0;
  margin-bottom: 1rem;
  overflow: auto;
  -ms-overflow-style: scrollbar;
}

figure {
  margin: 0 0 1rem;
}

img {
  vertical-align: middle;
  border-style: none;
}

svg:not(:root) {
  overflow: hidden;
}

table {
  border-collapse: collapse;
}

caption {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  color: #6c757d;
  text-align: left;
  caption-side: bottom;
}

th {
  text-align: inherit;
}

label {
  display: inline-block;
  margin-bottom: 0.5rem;
}

button {
  border-radius: 0;
}

button:focus {
  outline: 1px dotted;
  outline: 5px auto -webkit-focus-ring-color;
}

input,textarea {
  font-family: $search-font !important;
  border: 1px solid #000;
}

input,
button,
select,
optgroup,
textarea {
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

button,
input {
  overflow: visible;
}

button,
select {
  text-transform: none;
}

button,
html [type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  padding: 0;
  border-style: none;
}

input[type="radio"],
input[type="checkbox"] {
  box-sizing: border-box;
  padding: 0;
}

input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="month"] {
  -webkit-appearance: listbox;
}

textarea {
  overflow: auto;
  resize: vertical;
}

fieldset {
  min-width: 0;
  padding: 0;
  margin: 0;
  border: 0;
}

legend {
  display: block;
  width: 100%;
  max-width: 100%;
  padding: 0;
  margin-bottom: .5rem;
  font-size: 1.5rem;
  line-height: inherit;
  color: inherit;
  white-space: normal;
}

progress {
  vertical-align: baseline;
}

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

[type="search"] {
  outline-offset: -2px;
  -webkit-appearance: none;
}

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

::-webkit-file-upload-button {
  font: inherit;
  -webkit-appearance: button;
}

output {
  display: inline-block;
}

summary {
  display: list-item;
  cursor: pointer;
}

template {
  display: none;
}

[hidden] {
  display: none !important;
}
/*# sourceMappingURL=bootstrap-reboot.css.map */
/*!
 * Bootstrap Grid v4.1.1 (https://getbootstrap.com/)
 * Copyright 2011-2018 The Bootstrap Authors
 * Copyright 2011-2018 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 */

 @-ms-viewport {
	width: device-width;
}

html {
	box-sizing: border-box;
	-ms-overflow-style: scrollbar;
}

*,
*::before,
*::after {
	box-sizing: inherit;
}

.container {
	width: 100%;
	padding-right: ($gutter / 2);
	padding-left: ($gutter / 2);
	margin-right: auto;
	margin-left: auto;
}

@media (min-width: $screen-sm) {
	.container {
		max-width: $container-sm;
	}
}

@media (min-width: $screen-md) {
	.container {
		max-width: $container-md;
	}
}

@media (min-width: $screen-lg) {
	.container {
		max-width: $container-lg;
	}
}

@media (min-width: $screen-xl) {
	.container {
		max-width: $container-xl;
	}
}

@media (min-width: $screen-xxl) {
	.container {
		max-width: $container-xxl;
	}
}

.container-fluid {
	width: 100%;
	padding-right: ($gutter / 2);
	padding-left: ($gutter / 2);
	margin-right: auto;
	margin-left: auto;
	max-width:1920px;
}

.row {
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	margin-right: ($gutter / -2);
	margin-left: ($gutter / -2);
}

.no-gutters {
	margin-right: 0;
	margin-left: 0;
}

.no-gutters > .col,
.no-gutters > [class*="col-"] {
	padding-right: 0;
	padding-left: 0;
}

.col-1,
.col-2,
.col-3,
.col-4,
.col-5,
.col-6,
.col-7,
.col-8,
.col-9,
.col-10,
.col-11,
.col-12,
.col,
.col-auto,
.col-sm-1,
.col-sm-2,
.col-sm-3,
.col-sm-4,
.col-sm-5,
.col-sm-6,
.col-sm-7,
.col-sm-8,
.col-sm-9,
.col-sm-10,
.col-sm-11,
.col-sm-12,
.col-sm,
.col-sm-auto,
.col-md-1,
.col-md-2,
.col-md-3,
.col-md-4,
.col-md-5,
.col-md-6,
.col-md-7,
.col-md-8,
.col-md-9,
.col-md-10,
.col-md-11,
.col-md-12,
.col-md,
.col-md-auto,
.col-lg-1,
.col-lg-2,
.col-lg-3,
.col-lg-4,
.col-lg-5,
.col-lg-6,
.col-lg-7,
.col-lg-8,
.col-lg-9,
.col-lg-10,
.col-lg-11,
.col-lg-12,
.col-lg,
.col-lg-auto,
.col-xl-1,
.col-xl-2,
.col-xl-3,
.col-xl-4,
.col-xl-5,
.col-xl-6,
.col-xl-7,
.col-xl-8,
.col-xl-9,
.col-xl-10,
.col-xl-11,
.col-xl-12,
.col-xl,
.col-xl-auto,
.col-xxl-1,
.col-xxl-2,
.col-xxl-3,
.col-xxl-4,
.col-xxl-5,
.col-xxl-6,
.col-xxl-7,
.col-xxl-8,
.col-xxl-9,
.col-xxl-10,
.col-xxl-11,
.col-xxl-12,
.col-xxl,
.col-xxl-auto {
	position: relative;
	width: 100%;
	min-height: 1px;
	padding-right: 15px;
	padding-left: 15px;
}

.col {
	-ms-flex-preferred-size: 0;
	flex-basis: 0;
	-ms-flex-positive: 1;
	flex-grow: 1;
	max-width: 100%;
}

.col-auto {
	-ms-flex: 0 0 auto;
	flex: 0 0 auto;
	width: auto;
	max-width: none;
}

.col-1 {
	-ms-flex: 0 0 8.333333%;
	flex: 0 0 8.333333%;
	max-width: 8.333333%;
}

.col-2 {
	-ms-flex: 0 0 16.666667%;
	flex: 0 0 16.666667%;
	max-width: 16.666667%;
}

.col-3 {
	-ms-flex: 0 0 25%;
	flex: 0 0 25%;
	max-width: 25%;
}

.col-4 {
	-ms-flex: 0 0 33.333333%;
	flex: 0 0 33.333333%;
	max-width: 33.333333%;
}

.col-5 {
	-ms-flex: 0 0 41.666667%;
	flex: 0 0 41.666667%;
	max-width: 41.666667%;
}

.col-6 {
	-ms-flex: 0 0 50%;
	flex: 0 0 50%;
	max-width: 50%;
}

.col-7 {
	-ms-flex: 0 0 58.333333%;
	flex: 0 0 58.333333%;
	max-width: 58.333333%;
}

.col-8 {
	-ms-flex: 0 0 66.666667%;
	flex: 0 0 66.666667%;
	max-width: 66.666667%;
}

.col-9 {
	-ms-flex: 0 0 75%;
	flex: 0 0 75%;
	max-width: 75%;
}

.col-10 {
	-ms-flex: 0 0 83.333333%;
	flex: 0 0 83.333333%;
	max-width: 83.333333%;
}

.col-11 {
	-ms-flex: 0 0 91.666667%;
	flex: 0 0 91.666667%;
	max-width: 91.666667%;
}

.col-12 {
	-ms-flex: 0 0 100%;
	flex: 0 0 100%;
	max-width: 100%;
}

.order-first {
	-ms-flex-order: -1;
	order: -1;
}

.order-last {
	-ms-flex-order: 13;
	order: 13;
}

.order-0 {
	-ms-flex-order: 0;
	order: 0;
}

.order-1 {
	-ms-flex-order: 1;
	order: 1;
}

.order-2 {
	-ms-flex-order: 2;
	order: 2;
}

.order-3 {
	-ms-flex-order: 3;
	order: 3;
}

.order-4 {
	-ms-flex-order: 4;
	order: 4;
}

.order-5 {
	-ms-flex-order: 5;
	order: 5;
}

.order-6 {
	-ms-flex-order: 6;
	order: 6;
}

.order-7 {
	-ms-flex-order: 7;
	order: 7;
}

.order-8 {
	-ms-flex-order: 8;
	order: 8;
}

.order-9 {
	-ms-flex-order: 9;
	order: 9;
}

.order-10 {
	-ms-flex-order: 10;
	order: 10;
}

.order-11 {
	-ms-flex-order: 11;
	order: 11;
}

.order-12 {
	-ms-flex-order: 12;
	order: 12;
}

.offset-1 {
	margin-left: 8.333333%;
}

.offset-2 {
	margin-left: 16.666667%;
}

.offset-3 {
	margin-left: 25%;
}

.offset-4 {
	margin-left: 33.333333%;
}

.offset-5 {
	margin-left: 41.666667%;
}

.offset-6 {
	margin-left: 50%;
}

.offset-7 {
	margin-left: 58.333333%;
}

.offset-8 {
	margin-left: 66.666667%;
}

.offset-9 {
	margin-left: 75%;
}

.offset-10 {
	margin-left: 83.333333%;
}

.offset-11 {
	margin-left: 91.666667%;
}

@media (min-width: $screen-sm) {
	.col-sm {
		-ms-flex-preferred-size: 0;
		flex-basis: 0;
		-ms-flex-positive: 1;
		flex-grow: 1;
		max-width: 100%;
	}
	.col-sm-auto {
		-ms-flex: 0 0 auto;
		flex: 0 0 auto;
		width: auto;
		max-width: none;
	}
	.col-sm-1 {
		-ms-flex: 0 0 8.333333%;
		flex: 0 0 8.333333%;
		max-width: 8.333333%;
	}
	.col-sm-2 {
		-ms-flex: 0 0 16.666667%;
		flex: 0 0 16.666667%;
		max-width: 16.666667%;
	}
	.col-sm-3 {
		-ms-flex: 0 0 25%;
		flex: 0 0 25%;
		max-width: 25%;
	}
	.col-sm-4 {
		-ms-flex: 0 0 33.333333%;
		flex: 0 0 33.333333%;
		max-width: 33.333333%;
	}
	.col-sm-5 {
		-ms-flex: 0 0 41.666667%;
		flex: 0 0 41.666667%;
		max-width: 41.666667%;
	}
	.col-sm-6 {
		-ms-flex: 0 0 50%;
		flex: 0 0 50%;
		max-width: 50%;
	}
	.col-sm-7 {
		-ms-flex: 0 0 58.333333%;
		flex: 0 0 58.333333%;
		max-width: 58.333333%;
	}
	.col-sm-8 {
		-ms-flex: 0 0 66.666667%;
		flex: 0 0 66.666667%;
		max-width: 66.666667%;
	}
	.col-sm-9 {
		-ms-flex: 0 0 75%;
		flex: 0 0 75%;
		max-width: 75%;
	}
	.col-sm-10 {
		-ms-flex: 0 0 83.333333%;
		flex: 0 0 83.333333%;
		max-width: 83.333333%;
	}
	.col-sm-11 {
		-ms-flex: 0 0 91.666667%;
		flex: 0 0 91.666667%;
		max-width: 91.666667%;
	}
	.col-sm-12 {
		-ms-flex: 0 0 100%;
		flex: 0 0 100%;
		max-width: 100%;
	}
	.order-sm-first {
		-ms-flex-order: -1;
		order: -1;
	}
	.order-sm-last {
		-ms-flex-order: 13;
		order: 13;
	}
	.order-sm-0 {
		-ms-flex-order: 0;
		order: 0;
	}
	.order-sm-1 {
		-ms-flex-order: 1;
		order: 1;
	}
	.order-sm-2 {
		-ms-flex-order: 2;
		order: 2;
	}
	.order-sm-3 {
		-ms-flex-order: 3;
		order: 3;
	}
	.order-sm-4 {
		-ms-flex-order: 4;
		order: 4;
	}
	.order-sm-5 {
		-ms-flex-order: 5;
		order: 5;
	}
	.order-sm-6 {
		-ms-flex-order: 6;
		order: 6;
	}
	.order-sm-7 {
		-ms-flex-order: 7;
		order: 7;
	}
	.order-sm-8 {
		-ms-flex-order: 8;
		order: 8;
	}
	.order-sm-9 {
		-ms-flex-order: 9;
		order: 9;
	}
	.order-sm-10 {
		-ms-flex-order: 10;
		order: 10;
	}
	.order-sm-11 {
		-ms-flex-order: 11;
		order: 11;
	}
	.order-sm-12 {
		-ms-flex-order: 12;
		order: 12;
	}
	.offset-sm-0 {
		margin-left: 0;
	}
	.offset-sm-1 {
		margin-left: 8.333333%;
	}
	.offset-sm-2 {
		margin-left: 16.666667%;
	}
	.offset-sm-3 {
		margin-left: 25%;
	}
	.offset-sm-4 {
		margin-left: 33.333333%;
	}
	.offset-sm-5 {
		margin-left: 41.666667%;
	}
	.offset-sm-6 {
		margin-left: 50%;
	}
	.offset-sm-7 {
		margin-left: 58.333333%;
	}
	.offset-sm-8 {
		margin-left: 66.666667%;
	}
	.offset-sm-9 {
		margin-left: 75%;
	}
	.offset-sm-10 {
		margin-left: 83.333333%;
	}
	.offset-sm-11 {
		margin-left: 91.666667%;
	}
}

@media (min-width: $screen-md) {
	.col-md {
		-ms-flex-preferred-size: 0;
		flex-basis: 0;
		-ms-flex-positive: 1;
		flex-grow: 1;
		max-width: 100%;
	}
	.col-md-auto {
		-ms-flex: 0 0 auto;
		flex: 0 0 auto;
		width: auto;
		max-width: none;
	}
	.col-md-1 {
		-ms-flex: 0 0 8.333333%;
		flex: 0 0 8.333333%;
		max-width: 8.333333%;
	}
	.col-md-2 {
		-ms-flex: 0 0 16.666667%;
		flex: 0 0 16.666667%;
		max-width: 16.666667%;
	}
	.col-md-3 {
		-ms-flex: 0 0 25%;
		flex: 0 0 25%;
		max-width: 25%;
	}
	.col-md-4 {
		-ms-flex: 0 0 33.333333%;
		flex: 0 0 33.333333%;
		max-width: 33.333333%;
	}
	.col-md-5 {
		-ms-flex: 0 0 41.666667%;
		flex: 0 0 41.666667%;
		max-width: 41.666667%;
	}
	.col-md-6 {
		-ms-flex: 0 0 50%;
		flex: 0 0 50%;
		max-width: 50%;
	}
	.col-md-7 {
		-ms-flex: 0 0 58.333333%;
		flex: 0 0 58.333333%;
		max-width: 58.333333%;
	}
	.col-md-8 {
		-ms-flex: 0 0 66.666667%;
		flex: 0 0 66.666667%;
		max-width: 66.666667%;
	}
	.col-md-9 {
		-ms-flex: 0 0 75%;
		flex: 0 0 75%;
		max-width: 75%;
	}
	.col-md-10 {
		-ms-flex: 0 0 83.333333%;
		flex: 0 0 83.333333%;
		max-width: 83.333333%;
	}
	.col-md-11 {
		-ms-flex: 0 0 91.666667%;
		flex: 0 0 91.666667%;
		max-width: 91.666667%;
	}
	.col-md-12 {
		-ms-flex: 0 0 100%;
		flex: 0 0 100%;
		max-width: 100%;
	}
	.order-md-first {
		-ms-flex-order: -1;
		order: -1;
	}
	.order-md-last {
		-ms-flex-order: 13;
		order: 13;
	}
	.order-md-0 {
		-ms-flex-order: 0;
		order: 0;
	}
	.order-md-1 {
		-ms-flex-order: 1;
		order: 1;
	}
	.order-md-2 {
		-ms-flex-order: 2;
		order: 2;
	}
	.order-md-3 {
		-ms-flex-order: 3;
		order: 3;
	}
	.order-md-4 {
		-ms-flex-order: 4;
		order: 4;
	}
	.order-md-5 {
		-ms-flex-order: 5;
		order: 5;
	}
	.order-md-6 {
		-ms-flex-order: 6;
		order: 6;
	}
	.order-md-7 {
		-ms-flex-order: 7;
		order: 7;
	}
	.order-md-8 {
		-ms-flex-order: 8;
		order: 8;
	}
	.order-md-9 {
		-ms-flex-order: 9;
		order: 9;
	}
	.order-md-10 {
		-ms-flex-order: 10;
		order: 10;
	}
	.order-md-11 {
		-ms-flex-order: 11;
		order: 11;
	}
	.order-md-12 {
		-ms-flex-order: 12;
		order: 12;
	}
	.offset-md-0 {
		margin-left: 0;
	}
	.offset-md-1 {
		margin-left: 8.333333%;
	}
	.offset-md-2 {
		margin-left: 16.666667%;
	}
	.offset-md-3 {
		margin-left: 25%;
	}
	.offset-md-4 {
		margin-left: 33.333333%;
	}
	.offset-md-5 {
		margin-left: 41.666667%;
	}
	.offset-md-6 {
		margin-left: 50%;
	}
	.offset-md-7 {
		margin-left: 58.333333%;
	}
	.offset-md-8 {
		margin-left: 66.666667%;
	}
	.offset-md-9 {
		margin-left: 75%;
	}
	.offset-md-10 {
		margin-left: 83.333333%;
	}
	.offset-md-11 {
		margin-left: 91.666667%;
	}
}

@media (min-width: $screen-lg) {
	.col-lg {
		-ms-flex-preferred-size: 0;
		flex-basis: 0;
		-ms-flex-positive: 1;
		flex-grow: 1;
		max-width: 100%;
	}
	.col-lg-auto {
		-ms-flex: 0 0 auto;
		flex: 0 0 auto;
		width: auto;
		max-width: none;
	}
	.col-lg-1 {
		-ms-flex: 0 0 8.333333%;
		flex: 0 0 8.333333%;
		max-width: 8.333333%;
	}
	.col-lg-2 {
		-ms-flex: 0 0 16.666667%;
		flex: 0 0 16.666667%;
		max-width: 16.666667%;
	}
	.col-lg-3 {
		-ms-flex: 0 0 25%;
		flex: 0 0 25%;
		max-width: 25%;
	}
	.col-lg-4 {
		-ms-flex: 0 0 33.333333%;
		flex: 0 0 33.333333%;
		max-width: 33.333333%;
	}
	.col-lg-5 {
		-ms-flex: 0 0 41.666667%;
		flex: 0 0 41.666667%;
		max-width: 41.666667%;
	}
	.col-lg-6 {
		-ms-flex: 0 0 50%;
		flex: 0 0 50%;
		max-width: 50%;
	}
	.col-lg-7 {
		-ms-flex: 0 0 58.333333%;
		flex: 0 0 58.333333%;
		max-width: 58.333333%;
	}
	.col-lg-8 {
		-ms-flex: 0 0 66.666667%;
		flex: 0 0 66.666667%;
		max-width: 66.666667%;
	}
	.col-lg-9 {
		-ms-flex: 0 0 75%;
		flex: 0 0 75%;
		max-width: 75%;
	}
	.col-lg-10 {
		-ms-flex: 0 0 83.333333%;
		flex: 0 0 83.333333%;
		max-width: 83.333333%;
	}
	.col-lg-11 {
		-ms-flex: 0 0 91.666667%;
		flex: 0 0 91.666667%;
		max-width: 91.666667%;
	}
	.col-lg-12 {
		-ms-flex: 0 0 100%;
		flex: 0 0 100%;
		max-width: 100%;
	}
	.order-lg-first {
		-ms-flex-order: -1;
		order: -1;
	}
	.order-lg-last {
		-ms-flex-order: 13;
		order: 13;
	}
	.order-lg-0 {
		-ms-flex-order: 0;
		order: 0;
	}
	.order-lg-1 {
		-ms-flex-order: 1;
		order: 1;
	}
	.order-lg-2 {
		-ms-flex-order: 2;
		order: 2;
	}
	.order-lg-3 {
		-ms-flex-order: 3;
		order: 3;
	}
	.order-lg-4 {
		-ms-flex-order: 4;
		order: 4;
	}
	.order-lg-5 {
		-ms-flex-order: 5;
		order: 5;
	}
	.order-lg-6 {
		-ms-flex-order: 6;
		order: 6;
	}
	.order-lg-7 {
		-ms-flex-order: 7;
		order: 7;
	}
	.order-lg-8 {
		-ms-flex-order: 8;
		order: 8;
	}
	.order-lg-9 {
		-ms-flex-order: 9;
		order: 9;
	}
	.order-lg-10 {
		-ms-flex-order: 10;
		order: 10;
	}
	.order-lg-11 {
		-ms-flex-order: 11;
		order: 11;
	}
	.order-lg-12 {
		-ms-flex-order: 12;
		order: 12;
	}
	.offset-lg-0 {
		margin-left: 0;
	}
	.offset-lg-1 {
		margin-left: 8.333333%;
	}
	.offset-lg-2 {
		margin-left: 16.666667%;
	}
	.offset-lg-3 {
		margin-left: 25%;
	}
	.offset-lg-4 {
		margin-left: 33.333333%;
	}
	.offset-lg-5 {
		margin-left: 41.666667%;
	}
	.offset-lg-6 {
		margin-left: 50%;
	}
	.offset-lg-7 {
		margin-left: 58.333333%;
	}
	.offset-lg-8 {
		margin-left: 66.666667%;
	}
	.offset-lg-9 {
		margin-left: 75%;
	}
	.offset-lg-10 {
		margin-left: 83.333333%;
	}
	.offset-lg-11 {
		margin-left: 91.666667%;
	}
}

@media (min-width: $screen-xl) {
	.col-xl {
		-ms-flex-preferred-size: 0;
		flex-basis: 0;
		-ms-flex-positive: 1;
		flex-grow: 1;
		max-width: 100%;
	}
	.col-xl-auto {
		-ms-flex: 0 0 auto;
		flex: 0 0 auto;
		width: auto;
		max-width: none;
	}
	.col-xl-1 {
		-ms-flex: 0 0 8.333333%;
		flex: 0 0 8.333333%;
		max-width: 8.333333%;
	}
	.col-xl-2 {
		-ms-flex: 0 0 16.666667%;
		flex: 0 0 16.666667%;
		max-width: 16.666667%;
	}
	.col-xl-3 {
		-ms-flex: 0 0 25%;
		flex: 0 0 25%;
		max-width: 25%;
	}
	.col-xl-4 {
		-ms-flex: 0 0 33.333333%;
		flex: 0 0 33.333333%;
		max-width: 33.333333%;
	}
	.col-xl-5 {
		-ms-flex: 0 0 41.666667%;
		flex: 0 0 41.666667%;
		max-width: 41.666667%;
	}
	.col-xl-6 {
		-ms-flex: 0 0 50%;
		flex: 0 0 50%;
		max-width: 50%;
	}
	.col-xl-7 {
		-ms-flex: 0 0 58.333333%;
		flex: 0 0 58.333333%;
		max-width: 58.333333%;
	}
	.col-xl-8 {
		-ms-flex: 0 0 66.666667%;
		flex: 0 0 66.666667%;
		max-width: 66.666667%;
	}
	.col-xl-9 {
		-ms-flex: 0 0 75%;
		flex: 0 0 75%;
		max-width: 75%;
	}
	.col-xl-10 {
		-ms-flex: 0 0 83.333333%;
		flex: 0 0 83.333333%;
		max-width: 83.333333%;
	}
	.col-xl-11 {
		-ms-flex: 0 0 91.666667%;
		flex: 0 0 91.666667%;
		max-width: 91.666667%;
	}
	.col-xl-12 {
		-ms-flex: 0 0 100%;
		flex: 0 0 100%;
		max-width: 100%;
	}
	.order-xl-first {
		-ms-flex-order: -1;
		order: -1;
	}
	.order-xl-last {
		-ms-flex-order: 13;
		order: 13;
	}
	.order-xl-0 {
		-ms-flex-order: 0;
		order: 0;
	}
	.order-xl-1 {
		-ms-flex-order: 1;
		order: 1;
	}
	.order-xl-2 {
		-ms-flex-order: 2;
		order: 2;
	}
	.order-xl-3 {
		-ms-flex-order: 3;
		order: 3;
	}
	.order-xl-4 {
		-ms-flex-order: 4;
		order: 4;
	}
	.order-xl-5 {
		-ms-flex-order: 5;
		order: 5;
	}
	.order-xl-6 {
		-ms-flex-order: 6;
		order: 6;
	}
	.order-xl-7 {
		-ms-flex-order: 7;
		order: 7;
	}
	.order-xl-8 {
		-ms-flex-order: 8;
		order: 8;
	}
	.order-xl-9 {
		-ms-flex-order: 9;
		order: 9;
	}
	.order-xl-10 {
		-ms-flex-order: 10;
		order: 10;
	}
	.order-xl-11 {
		-ms-flex-order: 11;
		order: 11;
	}
	.order-xl-12 {
		-ms-flex-order: 12;
		order: 12;
	}
	.offset-xl-0 {
		margin-left: 0;
	}
	.offset-xl-1 {
		margin-left: 8.333333%;
	}
	.offset-xl-2 {
		margin-left: 16.666667%;
	}
	.offset-xl-3 {
		margin-left: 25%;
	}
	.offset-xl-4 {
		margin-left: 33.333333%;
	}
	.offset-xl-5 {
		margin-left: 41.666667%;
	}
	.offset-xl-6 {
		margin-left: 50%;
	}
	.offset-xl-7 {
		margin-left: 58.333333%;
	}
	.offset-xl-8 {
		margin-left: 66.666667%;
	}
	.offset-xl-9 {
		margin-left: 75%;
	}
	.offset-xl-10 {
		margin-left: 83.333333%;
	}
	.offset-xl-11 {
		margin-left: 91.666667%;
	}
}

@media (min-width: $screen-xxl) {
	.col-xxl {
		-ms-flex-preferred-size: 0;
		flex-basis: 0;
		-ms-flex-positive: 1;
		flex-grow: 1;
		max-width: 100%;
	}
	.col-xxl-auto {
		-ms-flex: 0 0 auto;
		flex: 0 0 auto;
		width: auto;
		max-width: none;
	}
	.col-xxl-1 {
		-ms-flex: 0 0 8.333333%;
		flex: 0 0 8.333333%;
		max-width: 8.333333%;
	}
	.col-xxl-2 {
		-ms-flex: 0 0 16.666667%;
		flex: 0 0 16.666667%;
		max-width: 16.666667%;
	}
	.col-xxl-3 {
		-ms-flex: 0 0 25%;
		flex: 0 0 25%;
		max-width: 25%;
	}
	.col-xxl-4 {
		-ms-flex: 0 0 33.333333%;
		flex: 0 0 33.333333%;
		max-width: 33.333333%;
	}
	.col-xxl-5 {
		-ms-flex: 0 0 41.666667%;
		flex: 0 0 41.666667%;
		max-width: 41.666667%;
	}
	.col-xxl-6 {
		-ms-flex: 0 0 50%;
		flex: 0 0 50%;
		max-width: 50%;
	}
	.col-xxl-7 {
		-ms-flex: 0 0 58.333333%;
		flex: 0 0 58.333333%;
		max-width: 58.333333%;
	}
	.col-xxl-8 {
		-ms-flex: 0 0 66.666667%;
		flex: 0 0 66.666667%;
		max-width: 66.666667%;
	}
	.col-xxl-9 {
		-ms-flex: 0 0 75%;
		flex: 0 0 75%;
		max-width: 75%;
	}
	.col-xxl-10 {
		-ms-flex: 0 0 83.333333%;
		flex: 0 0 83.333333%;
		max-width: 83.333333%;
	}
	.col-xxl-11 {
		-ms-flex: 0 0 91.666667%;
		flex: 0 0 91.666667%;
		max-width: 91.666667%;
	}
	.col-xxl-12 {
		-ms-flex: 0 0 100%;
		flex: 0 0 100%;
		max-width: 100%;
	}
	.order-xxl-first {
		-ms-flex-order: -1;
		order: -1;
	}
	.order-xxl-last {
		-ms-flex-order: 13;
		order: 13;
	}
	.order-xxl-0 {
		-ms-flex-order: 0;
		order: 0;
	}
	.order-xxl-1 {
		-ms-flex-order: 1;
		order: 1;
	}
	.order-xxl-2 {
		-ms-flex-order: 2;
		order: 2;
	}
	.order-xxl-3 {
		-ms-flex-order: 3;
		order: 3;
	}
	.order-xxl-4 {
		-ms-flex-order: 4;
		order: 4;
	}
	.order-xxl-5 {
		-ms-flex-order: 5;
		order: 5;
	}
	.order-xxl-6 {
		-ms-flex-order: 6;
		order: 6;
	}
	.order-xxl-7 {
		-ms-flex-order: 7;
		order: 7;
	}
	.order-xxl-8 {
		-ms-flex-order: 8;
		order: 8;
	}
	.order-xxl-9 {
		-ms-flex-order: 9;
		order: 9;
	}
	.order-xxl-10 {
		-ms-flex-order: 10;
		order: 10;
	}
	.order-xxl-11 {
		-ms-flex-order: 11;
		order: 11;
	}
	.order-xxl-12 {
		-ms-flex-order: 12;
		order: 12;
	}
	.offset-xxl-0 {
		margin-left: 0;
	}
	.offset-xxl-1 {
		margin-left: 8.333333%;
	}
	.offset-xxl-2 {
		margin-left: 16.666667%;
	}
	.offset-xxl-3 {
		margin-left: 25%;
	}
	.offset-xxl-4 {
		margin-left: 33.333333%;
	}
	.offset-xxl-5 {
		margin-left: 41.666667%;
	}
	.offset-xxl-6 {
		margin-left: 50%;
	}
	.offset-xxl-7 {
		margin-left: 58.333333%;
	}
	.offset-xxl-8 {
		margin-left: 66.666667%;
	}
	.offset-xxl-9 {
		margin-left: 75%;
	}
	.offset-xxl-10 {
		margin-left: 83.333333%;
	}
	.offset-xx-11 {
		margin-left: 91.666667%;
	}
}

.d-none {
	display: none !important;
}

.d-inline {
	display: inline !important;
}

.d-inline-block {
	display: inline-block !important;
}

.d-block {
	display: block !important;
}

.d-table {
	display: table !important;
}

.d-table-row {
	display: table-row !important;
}

.d-table-cell {
	display: table-cell !important;
}

.d-flex {
	display: -ms-flexbox !important;
	display: flex !important;
}

.d-inline-flex {
	display: -ms-inline-flexbox !important;
	display: inline-flex !important;
}

@media (min-width: $screen-sm) {
	.d-sm-none {
		display: none !important;
	}
	.d-sm-inline {
		display: inline !important;
	}
	.d-sm-inline-block {
		display: inline-block !important;
	}
	.d-sm-block {
		display: block !important;
	}
	.d-sm-table {
		display: table !important;
	}
	.d-sm-table-row {
		display: table-row !important;
	}
	.d-sm-table-cell {
		display: table-cell !important;
	}
	.d-sm-flex {
		display: -ms-flexbox !important;
		display: flex !important;
	}
	.d-sm-inline-flex {
		display: -ms-inline-flexbox !important;
		display: inline-flex !important;
	}
}

@media (min-width: $screen-md) {
	.d-md-none {
		display: none !important;
	}
	.d-md-inline {
		display: inline !important;
	}
	.d-md-inline-block {
		display: inline-block !important;
	}
	.d-md-block {
		display: block !important;
	}
	.d-md-table {
		display: table !important;
	}
	.d-md-table-row {
		display: table-row !important;
	}
	.d-md-table-cell {
		display: table-cell !important;
	}
	.d-md-flex {
		display: -ms-flexbox !important;
		display: flex !important;
	}
	.d-md-inline-flex {
		display: -ms-inline-flexbox !important;
		display: inline-flex !important;
	}
}

@media (min-width: $screen-lg) {
	.d-lg-none {
		display: none !important;
	}
	.d-lg-inline {
		display: inline !important;
	}
	.d-lg-inline-block {
		display: inline-block !important;
	}
	.d-lg-block {
		display: block !important;
	}
	.d-lg-table {
		display: table !important;
	}
	.d-lg-table-row {
		display: table-row !important;
	}
	.d-lg-table-cell {
		display: table-cell !important;
	}
	.d-lg-flex {
		display: -ms-flexbox !important;
		display: flex !important;
	}
	.d-lg-inline-flex {
		display: -ms-inline-flexbox !important;
		display: inline-flex !important;
	}
}

@media (min-width: $screen-xl) {
	.d-xl-none {
		display: none !important;
	}
	.d-xl-inline {
		display: inline !important;
	}
	.d-xl-inline-block {
		display: inline-block !important;
	}
	.d-xl-block {
		display: block !important;
	}
	.d-xl-table {
		display: table !important;
	}
	.d-xl-table-row {
		display: table-row !important;
	}
	.d-xl-table-cell {
		display: table-cell !important;
	}
	.d-xl-flex {
		display: -ms-flexbox !important;
		display: flex !important;
	}
	.d-xl-inline-flex {
		display: -ms-inline-flexbox !important;
		display: inline-flex !important;
	}
}

@media (min-width: $screen-xxl) {
	.d-xxl-none {
		display: none !important;
	}
	.d-xxl-inline {
		display: inline !important;
	}
	.d-xxl-inline-block {
		display: inline-block !important;
	}
	.d-xxl-block {
		display: block !important;
	}
	.d-xxl-table {
		display: table !important;
	}
	.d-xxl-table-row {
		display: table-row !important;
	}
	.d-xxl-table-cell {
		display: table-cell !important;
	}
	.d-xxl-flex {
		display: -ms-flexbox !important;
		display: flex !important;
	}
	.d-xxl-inline-flex {
		display: -ms-inline-flexbox !important;
		display: inline-flex !important;
	}
}

@media print {
	.d-print-none {
		display: none !important;
	}
	.d-print-inline {
		display: inline !important;
	}
	.d-print-inline-block {
		display: inline-block !important;
	}
	.d-print-block {
		display: block !important;
	}
	.d-print-table {
		display: table !important;
	}
	.d-print-table-row {
		display: table-row !important;
	}
	.d-print-table-cell {
		display: table-cell !important;
	}
	.d-print-flex {
		display: -ms-flexbox !important;
		display: flex !important;
	}
	.d-print-inline-flex {
		display: -ms-inline-flexbox !important;
		display: inline-flex !important;
	}
}

.flex-row {
	-ms-flex-direction: row !important;
	flex-direction: row !important;
}

.flex-column {
	-ms-flex-direction: column !important;
	flex-direction: column !important;
}

.flex-row-reverse {
	-ms-flex-direction: row-reverse !important;
	flex-direction: row-reverse !important;
}

.flex-column-reverse {
	-ms-flex-direction: column-reverse !important;
	flex-direction: column-reverse !important;
}

.flex-wrap {
	-ms-flex-wrap: wrap !important;
	flex-wrap: wrap !important;
}

.flex-nowrap {
	-ms-flex-wrap: nowrap !important;
	flex-wrap: nowrap !important;
}

.flex-wrap-reverse {
	-ms-flex-wrap: wrap-reverse !important;
	flex-wrap: wrap-reverse !important;
}

.flex-fill {
	-ms-flex: 1 1 auto !important;
	flex: 1 1 auto !important;
}

.flex-grow-0 {
	-ms-flex-positive: 0 !important;
	flex-grow: 0 !important;
}

.flex-grow-1 {
	-ms-flex-positive: 1 !important;
	flex-grow: 1 !important;
}

.flex-shrink-0 {
	-ms-flex-negative: 0 !important;
	flex-shrink: 0 !important;
}

.flex-shrink-1 {
	-ms-flex-negative: 1 !important;
	flex-shrink: 1 !important;
}

.justify-content-start {
	-ms-flex-pack: start !important;
	justify-content: flex-start !important;
}

.justify-content-end {
	-ms-flex-pack: end !important;
	justify-content: flex-end !important;
}

.justify-content-center {
	-ms-flex-pack: center !important;
	justify-content: center !important;
}

.justify-content-between {
	-ms-flex-pack: justify !important;
	justify-content: space-between !important;
}

.justify-content-around {
	-ms-flex-pack: distribute !important;
	justify-content: space-around !important;
}

.align-items-start {
	-ms-flex-align: start !important;
	align-items: flex-start !important;
}

.align-items-end {
	-ms-flex-align: end !important;
	align-items: flex-end !important;
}

.align-items-center {
	-ms-flex-align: center !important;
	align-items: center !important;
}

.align-items-baseline {
	-ms-flex-align: baseline !important;
	align-items: baseline !important;
}

.align-items-stretch {
	-ms-flex-align: stretch !important;
	align-items: stretch !important;
}

.align-content-start {
	-ms-flex-line-pack: start !important;
	align-content: flex-start !important;
}

.align-content-end {
	-ms-flex-line-pack: end !important;
	align-content: flex-end !important;
}

.align-content-center {
	-ms-flex-line-pack: center !important;
	align-content: center !important;
}

.align-content-between {
	-ms-flex-line-pack: justify !important;
	align-content: space-between !important;
}

.align-content-around {
	-ms-flex-line-pack: distribute !important;
	align-content: space-around !important;
}

.align-content-stretch {
	-ms-flex-line-pack: stretch !important;
	align-content: stretch !important;
}

.align-self-auto {
	-ms-flex-item-align: auto !important;
	align-self: auto !important;
}

.align-self-start {
	-ms-flex-item-align: start !important;
	align-self: flex-start !important;
}

.align-self-end {
	-ms-flex-item-align: end !important;
	align-self: flex-end !important;
}

.align-self-center {
	-ms-flex-item-align: center !important;
	align-self: center !important;
}

.align-self-baseline {
	-ms-flex-item-align: baseline !important;
	align-self: baseline !important;
}

.align-self-stretch {
	-ms-flex-item-align: stretch !important;
	align-self: stretch !important;
}

@media (min-width: $screen-sm) {
	.flex-sm-row {
		-ms-flex-direction: row !important;
		flex-direction: row !important;
	}
	.flex-sm-column {
		-ms-flex-direction: column !important;
		flex-direction: column !important;
	}
	.flex-sm-row-reverse {
		-ms-flex-direction: row-reverse !important;
		flex-direction: row-reverse !important;
	}
	.flex-sm-column-reverse {
		-ms-flex-direction: column-reverse !important;
		flex-direction: column-reverse !important;
	}
	.flex-sm-wrap {
		-ms-flex-wrap: wrap !important;
		flex-wrap: wrap !important;
	}
	.flex-sm-nowrap {
		-ms-flex-wrap: nowrap !important;
		flex-wrap: nowrap !important;
	}
	.flex-sm-wrap-reverse {
		-ms-flex-wrap: wrap-reverse !important;
		flex-wrap: wrap-reverse !important;
	}
	.flex-sm-fill {
		-ms-flex: 1 1 auto !important;
		flex: 1 1 auto !important;
	}
	.flex-sm-grow-0 {
		-ms-flex-positive: 0 !important;
		flex-grow: 0 !important;
	}
	.flex-sm-grow-1 {
		-ms-flex-positive: 1 !important;
		flex-grow: 1 !important;
	}
	.flex-sm-shrink-0 {
		-ms-flex-negative: 0 !important;
		flex-shrink: 0 !important;
	}
	.flex-sm-shrink-1 {
		-ms-flex-negative: 1 !important;
		flex-shrink: 1 !important;
	}
	.justify-content-sm-start {
		-ms-flex-pack: start !important;
		justify-content: flex-start !important;
	}
	.justify-content-sm-end {
		-ms-flex-pack: end !important;
		justify-content: flex-end !important;
	}
	.justify-content-sm-center {
		-ms-flex-pack: center !important;
		justify-content: center !important;
	}
	.justify-content-sm-between {
		-ms-flex-pack: justify !important;
		justify-content: space-between !important;
	}
	.justify-content-sm-around {
		-ms-flex-pack: distribute !important;
		justify-content: space-around !important;
	}
	.align-items-sm-start {
		-ms-flex-align: start !important;
		align-items: flex-start !important;
	}
	.align-items-sm-end {
		-ms-flex-align: end !important;
		align-items: flex-end !important;
	}
	.align-items-sm-center {
		-ms-flex-align: center !important;
		align-items: center !important;
	}
	.align-items-sm-baseline {
		-ms-flex-align: baseline !important;
		align-items: baseline !important;
	}
	.align-items-sm-stretch {
		-ms-flex-align: stretch !important;
		align-items: stretch !important;
	}
	.align-content-sm-start {
		-ms-flex-line-pack: start !important;
		align-content: flex-start !important;
	}
	.align-content-sm-end {
		-ms-flex-line-pack: end !important;
		align-content: flex-end !important;
	}
	.align-content-sm-center {
		-ms-flex-line-pack: center !important;
		align-content: center !important;
	}
	.align-content-sm-between {
		-ms-flex-line-pack: justify !important;
		align-content: space-between !important;
	}
	.align-content-sm-around {
		-ms-flex-line-pack: distribute !important;
		align-content: space-around !important;
	}
	.align-content-sm-stretch {
		-ms-flex-line-pack: stretch !important;
		align-content: stretch !important;
	}
	.align-self-sm-auto {
		-ms-flex-item-align: auto !important;
		align-self: auto !important;
	}
	.align-self-sm-start {
		-ms-flex-item-align: start !important;
		align-self: flex-start !important;
	}
	.align-self-sm-end {
		-ms-flex-item-align: end !important;
		align-self: flex-end !important;
	}
	.align-self-sm-center {
		-ms-flex-item-align: center !important;
		align-self: center !important;
	}
	.align-self-sm-baseline {
		-ms-flex-item-align: baseline !important;
		align-self: baseline !important;
	}
	.align-self-sm-stretch {
		-ms-flex-item-align: stretch !important;
		align-self: stretch !important;
	}
}

@media (min-width: $screen-md) {
	.flex-md-row {
		-ms-flex-direction: row !important;
		flex-direction: row !important;
	}
	.flex-md-column {
		-ms-flex-direction: column !important;
		flex-direction: column !important;
	}
	.flex-md-row-reverse {
		-ms-flex-direction: row-reverse !important;
		flex-direction: row-reverse !important;
	}
	.flex-md-column-reverse {
		-ms-flex-direction: column-reverse !important;
		flex-direction: column-reverse !important;
	}
	.flex-md-wrap {
		-ms-flex-wrap: wrap !important;
		flex-wrap: wrap !important;
	}
	.flex-md-nowrap {
		-ms-flex-wrap: nowrap !important;
		flex-wrap: nowrap !important;
	}
	.flex-md-wrap-reverse {
		-ms-flex-wrap: wrap-reverse !important;
		flex-wrap: wrap-reverse !important;
	}
	.flex-md-fill {
		-ms-flex: 1 1 auto !important;
		flex: 1 1 auto !important;
	}
	.flex-md-grow-0 {
		-ms-flex-positive: 0 !important;
		flex-grow: 0 !important;
	}
	.flex-md-grow-1 {
		-ms-flex-positive: 1 !important;
		flex-grow: 1 !important;
	}
	.flex-md-shrink-0 {
		-ms-flex-negative: 0 !important;
		flex-shrink: 0 !important;
	}
	.flex-md-shrink-1 {
		-ms-flex-negative: 1 !important;
		flex-shrink: 1 !important;
	}
	.justify-content-md-start {
		-ms-flex-pack: start !important;
		justify-content: flex-start !important;
	}
	.justify-content-md-end {
		-ms-flex-pack: end !important;
		justify-content: flex-end !important;
	}
	.justify-content-md-center {
		-ms-flex-pack: center !important;
		justify-content: center !important;
	}
	.justify-content-md-between {
		-ms-flex-pack: justify !important;
		justify-content: space-between !important;
	}
	.justify-content-md-around {
		-ms-flex-pack: distribute !important;
		justify-content: space-around !important;
	}
	.align-items-md-start {
		-ms-flex-align: start !important;
		align-items: flex-start !important;
	}
	.align-items-md-end {
		-ms-flex-align: end !important;
		align-items: flex-end !important;
	}
	.align-items-md-center {
		-ms-flex-align: center !important;
		align-items: center !important;
	}
	.align-items-md-baseline {
		-ms-flex-align: baseline !important;
		align-items: baseline !important;
	}
	.align-items-md-stretch {
		-ms-flex-align: stretch !important;
		align-items: stretch !important;
	}
	.align-content-md-start {
		-ms-flex-line-pack: start !important;
		align-content: flex-start !important;
	}
	.align-content-md-end {
		-ms-flex-line-pack: end !important;
		align-content: flex-end !important;
	}
	.align-content-md-center {
		-ms-flex-line-pack: center !important;
		align-content: center !important;
	}
	.align-content-md-between {
		-ms-flex-line-pack: justify !important;
		align-content: space-between !important;
	}
	.align-content-md-around {
		-ms-flex-line-pack: distribute !important;
		align-content: space-around !important;
	}
	.align-content-md-stretch {
		-ms-flex-line-pack: stretch !important;
		align-content: stretch !important;
	}
	.align-self-md-auto {
		-ms-flex-item-align: auto !important;
		align-self: auto !important;
	}
	.align-self-md-start {
		-ms-flex-item-align: start !important;
		align-self: flex-start !important;
	}
	.align-self-md-end {
		-ms-flex-item-align: end !important;
		align-self: flex-end !important;
	}
	.align-self-md-center {
		-ms-flex-item-align: center !important;
		align-self: center !important;
	}
	.align-self-md-baseline {
		-ms-flex-item-align: baseline !important;
		align-self: baseline !important;
	}
	.align-self-md-stretch {
		-ms-flex-item-align: stretch !important;
		align-self: stretch !important;
	}
}

@media (min-width: $screen-lg) {
	.flex-lg-row {
		-ms-flex-direction: row !important;
		flex-direction: row !important;
	}
	.flex-lg-column {
		-ms-flex-direction: column !important;
		flex-direction: column !important;
	}
	.flex-lg-row-reverse {
		-ms-flex-direction: row-reverse !important;
		flex-direction: row-reverse !important;
	}
	.flex-lg-column-reverse {
		-ms-flex-direction: column-reverse !important;
		flex-direction: column-reverse !important;
	}
	.flex-lg-wrap {
		-ms-flex-wrap: wrap !important;
		flex-wrap: wrap !important;
	}
	.flex-lg-nowrap {
		-ms-flex-wrap: nowrap !important;
		flex-wrap: nowrap !important;
	}
	.flex-lg-wrap-reverse {
		-ms-flex-wrap: wrap-reverse !important;
		flex-wrap: wrap-reverse !important;
	}
	.flex-lg-fill {
		-ms-flex: 1 1 auto !important;
		flex: 1 1 auto !important;
	}
	.flex-lg-grow-0 {
		-ms-flex-positive: 0 !important;
		flex-grow: 0 !important;
	}
	.flex-lg-grow-1 {
		-ms-flex-positive: 1 !important;
		flex-grow: 1 !important;
	}
	.flex-lg-shrink-0 {
		-ms-flex-negative: 0 !important;
		flex-shrink: 0 !important;
	}
	.flex-lg-shrink-1 {
		-ms-flex-negative: 1 !important;
		flex-shrink: 1 !important;
	}
	.justify-content-lg-start {
		-ms-flex-pack: start !important;
		justify-content: flex-start !important;
	}
	.justify-content-lg-end {
		-ms-flex-pack: end !important;
		justify-content: flex-end !important;
	}
	.justify-content-lg-center {
		-ms-flex-pack: center !important;
		justify-content: center !important;
	}
	.justify-content-lg-between {
		-ms-flex-pack: justify !important;
		justify-content: space-between !important;
	}
	.justify-content-lg-around {
		-ms-flex-pack: distribute !important;
		justify-content: space-around !important;
	}
	.align-items-lg-start {
		-ms-flex-align: start !important;
		align-items: flex-start !important;
	}
	.align-items-lg-end {
		-ms-flex-align: end !important;
		align-items: flex-end !important;
	}
	.align-items-lg-center {
		-ms-flex-align: center !important;
		align-items: center !important;
	}
	.align-items-lg-baseline {
		-ms-flex-align: baseline !important;
		align-items: baseline !important;
	}
	.align-items-lg-stretch {
		-ms-flex-align: stretch !important;
		align-items: stretch !important;
	}
	.align-content-lg-start {
		-ms-flex-line-pack: start !important;
		align-content: flex-start !important;
	}
	.align-content-lg-end {
		-ms-flex-line-pack: end !important;
		align-content: flex-end !important;
	}
	.align-content-lg-center {
		-ms-flex-line-pack: center !important;
		align-content: center !important;
	}
	.align-content-lg-between {
		-ms-flex-line-pack: justify !important;
		align-content: space-between !important;
	}
	.align-content-lg-around {
		-ms-flex-line-pack: distribute !important;
		align-content: space-around !important;
	}
	.align-content-lg-stretch {
		-ms-flex-line-pack: stretch !important;
		align-content: stretch !important;
	}
	.align-self-lg-auto {
		-ms-flex-item-align: auto !important;
		align-self: auto !important;
	}
	.align-self-lg-start {
		-ms-flex-item-align: start !important;
		align-self: flex-start !important;
	}
	.align-self-lg-end {
		-ms-flex-item-align: end !important;
		align-self: flex-end !important;
	}
	.align-self-lg-center {
		-ms-flex-item-align: center !important;
		align-self: center !important;
	}
	.align-self-lg-baseline {
		-ms-flex-item-align: baseline !important;
		align-self: baseline !important;
	}
	.align-self-lg-stretch {
		-ms-flex-item-align: stretch !important;
		align-self: stretch !important;
	}
}

@media (min-width: $screen-xl) {
	.flex-xl-row {
		-ms-flex-direction: row !important;
		flex-direction: row !important;
	}
	.flex-xl-column {
		-ms-flex-direction: column !important;
		flex-direction: column !important;
	}
	.flex-xl-row-reverse {
		-ms-flex-direction: row-reverse !important;
		flex-direction: row-reverse !important;
	}
	.flex-xl-column-reverse {
		-ms-flex-direction: column-reverse !important;
		flex-direction: column-reverse !important;
	}
	.flex-xl-wrap {
		-ms-flex-wrap: wrap !important;
		flex-wrap: wrap !important;
	}
	.flex-xl-nowrap {
		-ms-flex-wrap: nowrap !important;
		flex-wrap: nowrap !important;
	}
	.flex-xl-wrap-reverse {
		-ms-flex-wrap: wrap-reverse !important;
		flex-wrap: wrap-reverse !important;
	}
	.flex-xl-fill {
		-ms-flex: 1 1 auto !important;
		flex: 1 1 auto !important;
	}
	.flex-xl-grow-0 {
		-ms-flex-positive: 0 !important;
		flex-grow: 0 !important;
	}
	.flex-xl-grow-1 {
		-ms-flex-positive: 1 !important;
		flex-grow: 1 !important;
	}
	.flex-xl-shrink-0 {
		-ms-flex-negative: 0 !important;
		flex-shrink: 0 !important;
	}
	.flex-xl-shrink-1 {
		-ms-flex-negative: 1 !important;
		flex-shrink: 1 !important;
	}
	.justify-content-xl-start {
		-ms-flex-pack: start !important;
		justify-content: flex-start !important;
	}
	.justify-content-xl-end {
		-ms-flex-pack: end !important;
		justify-content: flex-end !important;
	}
	.justify-content-xl-center {
		-ms-flex-pack: center !important;
		justify-content: center !important;
	}
	.justify-content-xl-between {
		-ms-flex-pack: justify !important;
		justify-content: space-between !important;
	}
	.justify-content-xl-around {
		-ms-flex-pack: distribute !important;
		justify-content: space-around !important;
	}
	.align-items-xl-start {
		-ms-flex-align: start !important;
		align-items: flex-start !important;
	}
	.align-items-xl-end {
		-ms-flex-align: end !important;
		align-items: flex-end !important;
	}
	.align-items-xl-center {
		-ms-flex-align: center !important;
		align-items: center !important;
	}
	.align-items-xl-baseline {
		-ms-flex-align: baseline !important;
		align-items: baseline !important;
	}
	.align-items-xl-stretch {
		-ms-flex-align: stretch !important;
		align-items: stretch !important;
	}
	.align-content-xl-start {
		-ms-flex-line-pack: start !important;
		align-content: flex-start !important;
	}
	.align-content-xl-end {
		-ms-flex-line-pack: end !important;
		align-content: flex-end !important;
	}
	.align-content-xl-center {
		-ms-flex-line-pack: center !important;
		align-content: center !important;
	}
	.align-content-xl-between {
		-ms-flex-line-pack: justify !important;
		align-content: space-between !important;
	}
	.align-content-xl-around {
		-ms-flex-line-pack: distribute !important;
		align-content: space-around !important;
	}
	.align-content-xl-stretch {
		-ms-flex-line-pack: stretch !important;
		align-content: stretch !important;
	}
	.align-self-xl-auto {
		-ms-flex-item-align: auto !important;
		align-self: auto !important;
	}
	.align-self-xl-start {
		-ms-flex-item-align: start !important;
		align-self: flex-start !important;
	}
	.align-self-xl-end {
		-ms-flex-item-align: end !important;
		align-self: flex-end !important;
	}
	.align-self-xl-center {
		-ms-flex-item-align: center !important;
		align-self: center !important;
	}
	.align-self-xl-baseline {
		-ms-flex-item-align: baseline !important;
		align-self: baseline !important;
	}
	.align-self-xl-stretch {
		-ms-flex-item-align: stretch !important;
		align-self: stretch !important;
	}
}

@media (min-width: $screen-xxl) {
	.flex-xxl-row {
		-ms-flex-direction: row !important;
		flex-direction: row !important;
	}
	.flex-xxl-column {
		-ms-flex-direction: column !important;
		flex-direction: column !important;
	}
	.flex-xxl-row-reverse {
		-ms-flex-direction: row-reverse !important;
		flex-direction: row-reverse !important;
	}
	.flex-xxl-column-reverse {
		-ms-flex-direction: column-reverse !important;
		flex-direction: column-reverse !important;
	}
	.flex-xxl-wrap {
		-ms-flex-wrap: wrap !important;
		flex-wrap: wrap !important;
	}
	.flex-xxl-nowrap {
		-ms-flex-wrap: nowrap !important;
		flex-wrap: nowrap !important;
	}
	.flex-xxl-wrap-reverse {
		-ms-flex-wrap: wrap-reverse !important;
		flex-wrap: wrap-reverse !important;
	}
	.flex-xxl-fill {
		-ms-flex: 1 1 auto !important;
		flex: 1 1 auto !important;
	}
	.flex-xxl-grow-0 {
		-ms-flex-positive: 0 !important;
		flex-grow: 0 !important;
	}
	.flex-xxl-grow-1 {
		-ms-flex-positive: 1 !important;
		flex-grow: 1 !important;
	}
	.flex-xxl-shrink-0 {
		-ms-flex-negative: 0 !important;
		flex-shrink: 0 !important;
	}
	.flex-xxl-shrink-1 {
		-ms-flex-negative: 1 !important;
		flex-shrink: 1 !important;
	}
	.justify-content-xxl-start {
		-ms-flex-pack: start !important;
		justify-content: flex-start !important;
	}
	.justify-content-xxl-end {
		-ms-flex-pack: end !important;
		justify-content: flex-end !important;
	}
	.justify-content-xxl-center {
		-ms-flex-pack: center !important;
		justify-content: center !important;
	}
	.justify-content-xxl-between {
		-ms-flex-pack: justify !important;
		justify-content: space-between !important;
	}
	.justify-content-xxl-around {
		-ms-flex-pack: distribute !important;
		justify-content: space-around !important;
	}
	.align-items-xxl-start {
		-ms-flex-align: start !important;
		align-items: flex-start !important;
	}
	.align-items-xxl-end {
		-ms-flex-align: end !important;
		align-items: flex-end !important;
	}
	.align-items-xxl-center {
		-ms-flex-align: center !important;
		align-items: center !important;
	}
	.align-items-xxl-baseline {
		-ms-flex-align: baseline !important;
		align-items: baseline !important;
	}
	.align-items-xxl-stretch {
		-ms-flex-align: stretch !important;
		align-items: stretch !important;
	}
	.align-content-xxl-start {
		-ms-flex-line-pack: start !important;
		align-content: flex-start !important;
	}
	.align-content-xxl-end {
		-ms-flex-line-pack: end !important;
		align-content: flex-end !important;
	}
	.align-content-xxl-center {
		-ms-flex-line-pack: center !important;
		align-content: center !important;
	}
	.align-content-xxl-between {
		-ms-flex-line-pack: justify !important;
		align-content: space-between !important;
	}
	.align-content-xxl-around {
		-ms-flex-line-pack: distribute !important;
		align-content: space-around !important;
	}
	.align-content-xxl-stretch {
		-ms-flex-line-pack: stretch !important;
		align-content: stretch !important;
	}
	.align-self-xxl-auto {
		-ms-flex-item-align: auto !important;
		align-self: auto !important;
	}
	.align-self-xxl-start {
		-ms-flex-item-align: start !important;
		align-self: flex-start !important;
	}
	.align-self-xxl-end {
		-ms-flex-item-align: end !important;
		align-self: flex-end !important;
	}
	.align-self-xxl-center {
		-ms-flex-item-align: center !important;
		align-self: center !important;
	}
	.align-self-xxl-baseline {
		-ms-flex-item-align: baseline !important;
		align-self: baseline !important;
	}
	.align-self-xxl-stretch {
		-ms-flex-item-align: stretch !important;
		align-self: stretch !important;
	}
}
/* Table of Contents
==================================================

    #Helper Classes
    #Display Classes
	#Spacing Classes
	#Lists

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

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

.visually-hidden, .sr-only {
  @include visually-hidden();
}

.js-focus-hidden:focus {
  outline: none;
}

.label-hidden {
  @include visually-hidden();

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

.visually-shown {
  @include visually-shown();
}

.hide { 
	display:none !important;
}

// Only show when JS is not supported
.no-js:not(html) {
  display: none;

  .no-js & {
    display: block;
  }
}

// Only show when JS is supported
.js {
  .no-js & {
    display: none;
  }
}

.img-fluid {
	max-width:100%;
	height:auto;
}

.no-scroll {
	overflow:hidden;
	width: 100%;
	//height: 100%;

	@media screen and (max-width: 978px) {
		position: fixed;
	}
}

.quickview-open {
	overflow:hidden;

	@media screen and (max-width: 978px) {
		position: fixed;
	}
}

.text-left {
	text-align: left;
}

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

.text-right {
	text-align: right;
}

@include media-query($small-up) {
	.text-sm-right {
		text-align:right;
	} 
}

@include media-query($medium-up) {
	.text-md-right {
		text-align:right;
	} 
}

@include media-query($large-up) {
	.text-lg-right {
		text-align:right;
	} 
}

@include media-query($widescreen) {
	.text-xl-right {
		text-align:right;
	} 
}

@include media-query($small-up) {
	.text-sm-left {
		text-align:left;
	} 
}

@include media-query($medium-up) {
	.text-md-left {
		text-align:left;
	} 
}

@include media-query($large-up) {
	.text-lg-left {
		text-align:left;
	} 
}

@include media-query($widescreen) {
	.text-xl-left {
		text-align:left;
	} 
}

@include media-query($small-up) {
	.text-sm-center {
		text-align:center;
	} 
}

@include media-query($medium-up) {
	.text-md-center {
		text-align:center;
	} 
}

@include media-query($large-up) {
	.text-lg-center {
		text-align:center;
	} 
}

@include media-query($widescreen) {
	.text-xl-center {
		text-align:center;
	} 
}

.border-v {
	border-top:1px solid $brand-primary;
	border-bottom:1px solid $brand-primary;
}

.border-t {
	border-top:1px solid $brand-primary;
}

.border-b {
	border-bottom:1px solid $brand-primary;
}

/* ==========================================================================
#Display Classes
========================================================================== */

.d-none {
  display: none !important;
}

.d-inline {
  display: inline !important;
}

.d-inline-block {
  display: inline-block !important;
}

.d-block {
  display: block !important;
}

.d-table {
  display: table !important;
}

.d-table-row {
  display: table-row !important;
}

.d-table-cell {
  display: table-cell !important;
}

.d-flex {
  display: -ms-flexbox !important;
  display: flex !important;
}

.d-inline-flex {
  display: -ms-inline-flexbox !important;
  display: inline-flex !important;
}

@media (min-width: $screen-sm) {
  .d-sm-none {
    display: none !important;
  }
  .d-sm-inline {
    display: inline !important;
  }
  .d-sm-inline-block {
    display: inline-block !important;
  }
  .d-sm-block {
    display: block !important;
  }
  .d-sm-table {
    display: table !important;
  }
  .d-sm-table-row {
    display: table-row !important;
  }
  .d-sm-table-cell {
    display: table-cell !important;
  }
  .d-sm-flex {
    display: -ms-flexbox !important;
    display: flex !important;
  }
  .d-sm-inline-flex {
    display: -ms-inline-flexbox !important;
    display: inline-flex !important;
  }
}

@media (min-width: $screen-md) {
  .d-md-none {
    display: none !important;
  }
  .d-md-inline {
    display: inline !important;
  }
  .d-md-inline-block {
    display: inline-block !important;
  }
  .d-md-block {
    display: block !important;
  }
  .d-md-table {
    display: table !important;
  }
  .d-md-table-row {
    display: table-row !important;
  }
  .d-md-table-cell {
    display: table-cell !important;
  }
  .d-md-flex {
    display: -ms-flexbox !important;
    display: flex !important;
  }
  .d-md-inline-flex {
    display: -ms-inline-flexbox !important;
    display: inline-flex !important;
  }
}

@media (min-width: $screen-lg) {
  .d-lg-none {
    display: none !important;
  }
  .d-lg-inline {
    display: inline !important;
  }
  .d-lg-inline-block {
    display: inline-block !important;
  }
  .d-lg-block {
    display: block !important;
  }
  .d-lg-table {
    display: table !important;
  }
  .d-lg-table-row {
    display: table-row !important;
  }
  .d-lg-table-cell {
    display: table-cell !important;
  }
  .d-lg-flex {
    display: -ms-flexbox !important;
    display: flex !important;
  }
  .d-lg-inline-flex {
    display: -ms-inline-flexbox !important;
    display: inline-flex !important;
  }
}

@media (min-width: $screen-xl) {
  .d-xl-none {
    display: none !important;
  }
  .d-xl-inline {
    display: inline !important;
  }
  .d-xl-inline-block {
    display: inline-block !important;
  }
  .d-xl-block {
    display: block !important;
  }
  .d-xl-table {
    display: table !important;
  }
  .d-xl-table-row {
    display: table-row !important;
  }
  .d-xl-table-cell {
    display: table-cell !important;
  }
  .d-xl-flex {
    display: -ms-flexbox !important;
    display: flex !important;
  }
  .d-xl-inline-flex {
    display: -ms-inline-flexbox !important;
    display: inline-flex !important;
  }
}

/* ==========================================================================
#Spacing Classes
========================================================================== */

.m-0 {
	margin: 0 !important;
}

.mt-0,
.my-0 {
	margin-top: 0 !important;
}

.mr-0,
.mx-0 {
	margin-right: 0 !important;
}

.mb-0,
.my-0 {
	margin-bottom: 0 !important;
}

.ml-0,
.mx-0 {
	margin-left: 0 !important;
}

.m-1 {
	margin: 0.25rem !important;
}

.mt-1,
.my-1 {
	margin-top: 0.25rem !important;
}

.mr-1,
.mx-1 {
	margin-right: 0.25rem !important;
}

.mb-1,
.my-1 {
	margin-bottom: 0.25rem !important;
}

.ml-1,
.mx-1 {
	margin-left: 0.25rem !important;
}

.m-2 {
	margin: 0.5rem !important;
}

.mt-2,
.my-2 {
	margin-top: 0.5rem !important;
}

.mr-2,
.mx-2 {
	margin-right: 0.5rem !important;
}

.mb-2,
.my-2 {
	margin-bottom: 0.5rem !important;
}

.ml-2,
.mx-2 {
	margin-left: 0.5rem !important;
}

.m-3 {
	margin: 1rem !important;
}

.mt-3,
.my-3 {
	margin-top: 1rem !important;
}

.mr-3,
.mx-3 {
	margin-right: 1rem !important;
}

.mb-3,
.my-3 {
	margin-bottom: 1rem !important;
}

.ml-3,
.mx-3 {
	margin-left: 1rem !important;
}

.m-4 {
	margin: 1.5rem !important;
}

.mt-4,
.my-4 {
	margin-top: 1.5rem !important;
}

.mr-4,
.mx-4 {
	margin-right: 1.5rem !important;
}

.mb-4,
.my-4 {
	margin-bottom: 1.5rem !important;
}

.ml-4,
.mx-4 {
	margin-left: 1.5rem !important;
}

.m-5 {
	margin: 3rem !important;
}

.mt-5,
.my-5 {
	margin-top: 3rem !important;
}

.mr-5,
.mx-5 {
	margin-right: 3rem !important;
}

.mb-5,
.my-5 {
	margin-bottom: 3rem !important;
}

.ml-5,
.mx-5 {
	margin-left: 3rem !important;
}

.p-0 {
	padding: 0 !important;
}

.pt-0,
.py-0 {
	padding-top: 0 !important;
}

.pr-0,
.px-0 {
	padding-right: 0 !important;
}

.pb-0,
.py-0 {
	padding-bottom: 0 !important;
}

.pl-0,
.px-0 {
	padding-left: 0 !important;
}

.p-1 {
	padding: 0.25rem !important;
}

.pt-1,
.py-1 {
	padding-top: 0.25rem !important;
}

.pr-1,
.px-1 {
	padding-right: 0.25rem !important;
}

.pb-1,
.py-1 {
	padding-bottom: 0.25rem !important;
}

.pl-1,
.px-1 {
	padding-left: 0.25rem !important;
}

.p-2 {
	padding: 0.5rem !important;
}

.pt-2,
.py-2 {
	padding-top: 0.5rem !important;
}

.pr-2,
.px-2 {
	padding-right: 0.5rem !important;
}

.pb-2,
.py-2 {
	padding-bottom: 0.5rem !important;
}

.pl-2,
.px-2 {
	padding-left: 0.5rem !important;
}

.p-3 {
	padding: 1rem !important;
}

.pt-3,
.py-3 {
	padding-top: 1rem !important;
}

.pr-3,
.px-3 {
	padding-right: 1rem !important;
}

.pb-3,
.py-3 {
	padding-bottom: 1rem !important;
}

.pl-3,
.px-3 {
	padding-left: 1rem !important;
}

.p-4 {
	padding: 1.5rem !important;
}

.pt-4,
.py-4 {
	padding-top: 1.5rem !important;
}

.pr-4,
.px-4 {
	padding-right: 1.5rem !important;
}

.pb-4,
.py-4 {
	padding-bottom: 1.5rem !important;
}

.pl-4,
.px-4 {
	padding-left: 1.5rem !important;
}

.p-5 {
	padding: 3rem !important;
}

.pt-5,
.py-5 {
	padding-top: 3rem !important;
}

.pr-5,
.px-5 {
	padding-right: 3rem !important;
}

.pb-5,
.py-5 {
	padding-bottom: 3rem !important;
}

.pl-5,
.px-5 {
	padding-left: 3rem !important;
}

.m-auto {
	margin: auto !important;
}

.mt-auto,
.my-auto {
	margin-top: auto !important;
}

.mr-auto,
.mx-auto {
	margin-right: auto !important;
}

.mb-auto,
.my-auto {
	margin-bottom: auto !important;
}

.ml-auto,
.mx-auto {
	margin-left: auto !important;
}

@media (min-width: $screen-sm) {
	.m-sm-0 {
		margin: 0 !important;
	}
	.mt-sm-0,
	.my-sm-0 {
		margin-top: 0 !important;
	}
	.mr-sm-0,
	.mx-sm-0 {
		margin-right: 0 !important;
	}
	.mb-sm-0,
	.my-sm-0 {
		margin-bottom: 0 !important;
	}
	.ml-sm-0,
	.mx-sm-0 {
		margin-left: 0 !important;
	}
	.m-sm-1 {
		margin: 0.25rem !important;
	}
	.mt-sm-1,
	.my-sm-1 {
		margin-top: 0.25rem !important;
	}
	.mr-sm-1,
	.mx-sm-1 {
		margin-right: 0.25rem !important;
	}
	.mb-sm-1,
	.my-sm-1 {
		margin-bottom: 0.25rem !important;
	}
	.ml-sm-1,
	.mx-sm-1 {
		margin-left: 0.25rem !important;
	}
	.m-sm-2 {
		margin: 0.5rem !important;
	}
	.mt-sm-2,
	.my-sm-2 {
		margin-top: 0.5rem !important;
	}
	.mr-sm-2,
	.mx-sm-2 {
		margin-right: 0.5rem !important;
	}
	.mb-sm-2,
	.my-sm-2 {
		margin-bottom: 0.5rem !important;
	}
	.ml-sm-2,
	.mx-sm-2 {
		margin-left: 0.5rem !important;
	}
	.m-sm-3 {
		margin: 1rem !important;
	}
	.mt-sm-3,
	.my-sm-3 {
		margin-top: 1rem !important;
	}
	.mr-sm-3,
	.mx-sm-3 {
		margin-right: 1rem !important;
	}
	.mb-sm-3,
	.my-sm-3 {
		margin-bottom: 1rem !important;
	}
	.ml-sm-3,
	.mx-sm-3 {
		margin-left: 1rem !important;
	}
	.m-sm-4 {
		margin: 1.5rem !important;
	}
	.mt-sm-4,
	.my-sm-4 {
		margin-top: 1.5rem !important;
	}
	.mr-sm-4,
	.mx-sm-4 {
		margin-right: 1.5rem !important;
	}
	.mb-sm-4,
	.my-sm-4 {
		margin-bottom: 1.5rem !important;
	}
	.ml-sm-4,
	.mx-sm-4 {
		margin-left: 1.5rem !important;
	}
	.m-sm-5 {
		margin: 3rem !important;
	}
	.mt-sm-5,
	.my-sm-5 {
		margin-top: 3rem !important;
	}
	.mr-sm-5,
	.mx-sm-5 {
		margin-right: 3rem !important;
	}
	.mb-sm-5,
	.my-sm-5 {
		margin-bottom: 3rem !important;
	}
	.ml-sm-5,
	.mx-sm-5 {
		margin-left: 3rem !important;
	}
	.p-sm-0 {
		padding: 0 !important;
	}
	.pt-sm-0,
	.py-sm-0 {
		padding-top: 0 !important;
	}
	.pr-sm-0,
	.px-sm-0 {
		padding-right: 0 !important;
	}
	.pb-sm-0,
	.py-sm-0 {
		padding-bottom: 0 !important;
	}
	.pl-sm-0,
	.px-sm-0 {
		padding-left: 0 !important;
	}
	.p-sm-1 {
		padding: 0.25rem !important;
	}
	.pt-sm-1,
	.py-sm-1 {
		padding-top: 0.25rem !important;
	}
	.pr-sm-1,
	.px-sm-1 {
		padding-right: 0.25rem !important;
	}
	.pb-sm-1,
	.py-sm-1 {
		padding-bottom: 0.25rem !important;
	}
	.pl-sm-1,
	.px-sm-1 {
		padding-left: 0.25rem !important;
	}
	.p-sm-2 {
		padding: 0.5rem !important;
	}
	.pt-sm-2,
	.py-sm-2 {
		padding-top: 0.5rem !important;
	}
	.pr-sm-2,
	.px-sm-2 {
		padding-right: 0.5rem !important;
	}
	.pb-sm-2,
	.py-sm-2 {
		padding-bottom: 0.5rem !important;
	}
	.pl-sm-2,
	.px-sm-2 {
		padding-left: 0.5rem !important;
	}
	.p-sm-3 {
		padding: 1rem !important;
	}
	.pt-sm-3,
	.py-sm-3 {
		padding-top: 1rem !important;
	}
	.pr-sm-3,
	.px-sm-3 {
		padding-right: 1rem !important;
	}
	.pb-sm-3,
	.py-sm-3 {
		padding-bottom: 1rem !important;
	}
	.pl-sm-3,
	.px-sm-3 {
		padding-left: 1rem !important;
	}
	.p-sm-4 {
		padding: 1.5rem !important;
	}
	.pt-sm-4,
	.py-sm-4 {
		padding-top: 1.5rem !important;
	}
	.pr-sm-4,
	.px-sm-4 {
		padding-right: 1.5rem !important;
	}
	.pb-sm-4,
	.py-sm-4 {
		padding-bottom: 1.5rem !important;
	}
	.pl-sm-4,
	.px-sm-4 {
		padding-left: 1.5rem !important;
	}
	.p-sm-5 {
		padding: 3rem !important;
	}
	.pt-sm-5,
	.py-sm-5 {
		padding-top: 3rem !important;
	}
	.pr-sm-5,
	.px-sm-5 {
		padding-right: 3rem !important;
	}
	.pb-sm-5,
	.py-sm-5 {
		padding-bottom: 3rem !important;
	}
	.pl-sm-5,
	.px-sm-5 {
		padding-left: 3rem !important;
	}
	.m-sm-auto {
		margin: auto !important;
	}
	.mt-sm-auto,
	.my-sm-auto {
		margin-top: auto !important;
	}
	.mr-sm-auto,
	.mx-sm-auto {
		margin-right: auto !important;
	}
	.mb-sm-auto,
	.my-sm-auto {
		margin-bottom: auto !important;
	}
	.ml-sm-auto,
	.mx-sm-auto {
		margin-left: auto !important;
	}
}

@media (min-width: $screen-md) {
	.m-md-0 {
		margin: 0 !important;
	}
	.mt-md-0,
	.my-md-0 {
		margin-top: 0 !important;
	}
	.mr-md-0,
	.mx-md-0 {
		margin-right: 0 !important;
	}
	.mb-md-0,
	.my-md-0 {
		margin-bottom: 0 !important;
	}
	.ml-md-0,
	.mx-md-0 {
		margin-left: 0 !important;
	}
	.m-md-1 {
		margin: 0.25rem !important;
	}
	.mt-md-1,
	.my-md-1 {
		margin-top: 0.25rem !important;
	}
	.mr-md-1,
	.mx-md-1 {
		margin-right: 0.25rem !important;
	}
	.mb-md-1,
	.my-md-1 {
		margin-bottom: 0.25rem !important;
	}
	.ml-md-1,
	.mx-md-1 {
		margin-left: 0.25rem !important;
	}
	.m-md-2 {
		margin: 0.5rem !important;
	}
	.mt-md-2,
	.my-md-2 {
		margin-top: 0.5rem !important;
	}
	.mr-md-2,
	.mx-md-2 {
		margin-right: 0.5rem !important;
	}
	.mb-md-2,
	.my-md-2 {
		margin-bottom: 0.5rem !important;
	}
	.ml-md-2,
	.mx-md-2 {
		margin-left: 0.5rem !important;
	}
	.m-md-3 {
		margin: 1rem !important;
	}
	.mt-md-3,
	.my-md-3 {
		margin-top: 1rem !important;
	}
	.mr-md-3,
	.mx-md-3 {
		margin-right: 1rem !important;
	}
	.mb-md-3,
	.my-md-3 {
		margin-bottom: 1rem !important;
	}
	.ml-md-3,
	.mx-md-3 {
		margin-left: 1rem !important;
	}
	.m-md-4 {
		margin: 1.5rem !important;
	}
	.mt-md-4,
	.my-md-4 {
		margin-top: 1.5rem !important;
	}
	.mr-md-4,
	.mx-md-4 {
		margin-right: 1.5rem !important;
	}
	.mb-md-4,
	.my-md-4 {
		margin-bottom: 1.5rem !important;
	}
	.ml-md-4,
	.mx-md-4 {
		margin-left: 1.5rem !important;
	}
	.m-md-5 {
		margin: 3rem !important;
	}
	.mt-md-5,
	.my-md-5 {
		margin-top: 3rem !important;
	}
	.mr-md-5,
	.mx-md-5 {
		margin-right: 3rem !important;
	}
	.mb-md-5,
	.my-md-5 {
		margin-bottom: 3rem !important;
	}
	.ml-md-5,
	.mx-md-5 {
		margin-left: 3rem !important;
	}
	.p-md-0 {
		padding: 0 !important;
	}
	.pt-md-0,
	.py-md-0 {
		padding-top: 0 !important;
	}
	.pr-md-0,
	.px-md-0 {
		padding-right: 0 !important;
	}
	.pb-md-0,
	.py-md-0 {
		padding-bottom: 0 !important;
	}
	.pl-md-0,
	.px-md-0 {
		padding-left: 0 !important;
	}
	.p-md-1 {
		padding: 0.25rem !important;
	}
	.pt-md-1,
	.py-md-1 {
		padding-top: 0.25rem !important;
	}
	.pr-md-1,
	.px-md-1 {
		padding-right: 0.25rem !important;
	}
	.pb-md-1,
	.py-md-1 {
		padding-bottom: 0.25rem !important;
	}
	.pl-md-1,
	.px-md-1 {
		padding-left: 0.25rem !important;
	}
	.p-md-2 {
		padding: 0.5rem !important;
	}
	.pt-md-2,
	.py-md-2 {
		padding-top: 0.5rem !important;
	}
	.pr-md-2,
	.px-md-2 {
		padding-right: 0.5rem !important;
	}
	.pb-md-2,
	.py-md-2 {
		padding-bottom: 0.5rem !important;
	}
	.pl-md-2,
	.px-md-2 {
		padding-left: 0.5rem !important;
	}
	.p-md-3 {
		padding: 1rem !important;
	}
	.pt-md-3,
	.py-md-3 {
		padding-top: 1rem !important;
	}
	.pr-md-3,
	.px-md-3 {
		padding-right: 1rem !important;
	}
	.pb-md-3,
	.py-md-3 {
		padding-bottom: 1rem !important;
	}
	.pl-md-3,
	.px-md-3 {
		padding-left: 1rem !important;
	}
	.p-md-4 {
		padding: 1.5rem !important;
	}
	.pt-md-4,
	.py-md-4 {
		padding-top: 1.5rem !important;
	}
	.pr-md-4,
	.px-md-4 {
		padding-right: 1.5rem !important;
	}
	.pb-md-4,
	.py-md-4 {
		padding-bottom: 1.5rem !important;
	}
	.pl-md-4,
	.px-md-4 {
		padding-left: 1.5rem !important;
	}
	.p-md-5 {
		padding: 3rem !important;
	}
	.pt-md-5,
	.py-md-5 {
		padding-top: 3rem !important;
	}
	.pr-md-5,
	.px-md-5 {
		padding-right: 3rem !important;
	}
	.pb-md-5,
	.py-md-5 {
		padding-bottom: 3rem !important;
	}
	.pl-md-5,
	.px-md-5 {
		padding-left: 3rem !important;
	}
	.m-md-auto {
		margin: auto !important;
	}
	.mt-md-auto,
	.my-md-auto {
		margin-top: auto !important;
	}
	.mr-md-auto,
	.mx-md-auto {
		margin-right: auto !important;
	}
	.mb-md-auto,
	.my-md-auto {
		margin-bottom: auto !important;
	}
	.ml-md-auto,
	.mx-md-auto {
		margin-left: auto !important;
	}
}

@media (min-width: $screen-lg) {
	.m-lg-0 {
		margin: 0 !important;
	}
	.mt-lg-0,
	.my-lg-0 {
		margin-top: 0 !important;
	}
	.mr-lg-0,
	.mx-lg-0 {
		margin-right: 0 !important;
	}
	.mb-lg-0,
	.my-lg-0 {
		margin-bottom: 0 !important;
	}
	.ml-lg-0,
	.mx-lg-0 {
		margin-left: 0 !important;
	}
	.m-lg-1 {
		margin: 0.25rem !important;
	}
	.mt-lg-1,
	.my-lg-1 {
		margin-top: 0.25rem !important;
	}
	.mr-lg-1,
	.mx-lg-1 {
		margin-right: 0.25rem !important;
	}
	.mb-lg-1,
	.my-lg-1 {
		margin-bottom: 0.25rem !important;
	}
	.ml-lg-1,
	.mx-lg-1 {
		margin-left: 0.25rem !important;
	}
	.m-lg-2 {
		margin: 0.5rem !important;
	}
	.mt-lg-2,
	.my-lg-2 {
		margin-top: 0.5rem !important;
	}
	.mr-lg-2,
	.mx-lg-2 {
		margin-right: 0.5rem !important;
	}
	.mb-lg-2,
	.my-lg-2 {
		margin-bottom: 0.5rem !important;
	}
	.ml-lg-2,
	.mx-lg-2 {
		margin-left: 0.5rem !important;
	}
	.m-lg-3 {
		margin: 1rem !important;
	}
	.mt-lg-3,
	.my-lg-3 {
		margin-top: 1rem !important;
	}
	.mr-lg-3,
	.mx-lg-3 {
		margin-right: 1rem !important;
	}
	.mb-lg-3,
	.my-lg-3 {
		margin-bottom: 1rem !important;
	}
	.ml-lg-3,
	.mx-lg-3 {
		margin-left: 1rem !important;
	}
	.m-lg-4 {
		margin: 1.5rem !important;
	}
	.mt-lg-4,
	.my-lg-4 {
		margin-top: 1.5rem !important;
	}
	.mr-lg-4,
	.mx-lg-4 {
		margin-right: 1.5rem !important;
	}
	.mb-lg-4,
	.my-lg-4 {
		margin-bottom: 1.5rem !important;
	}
	.ml-lg-4,
	.mx-lg-4 {
		margin-left: 1.5rem !important;
	}
	.m-lg-5 {
		margin: 3rem !important;
	}
	.mt-lg-5,
	.my-lg-5 {
		margin-top: 3rem !important;
	}
	.mr-lg-5,
	.mx-lg-5 {
		margin-right: 3rem !important;
	}
	.mb-lg-5,
	.my-lg-5 {
		margin-bottom: 3rem !important;
	}
	.ml-lg-5,
	.mx-lg-5 {
		margin-left: 3rem !important;
	}
	.p-lg-0 {
		padding: 0 !important;
	}
	.pt-lg-0,
	.py-lg-0 {
		padding-top: 0 !important;
	}
	.pr-lg-0,
	.px-lg-0 {
		padding-right: 0 !important;
	}
	.pb-lg-0,
	.py-lg-0 {
		padding-bottom: 0 !important;
	}
	.pl-lg-0,
	.px-lg-0 {
		padding-left: 0 !important;
	}
	.p-lg-1 {
		padding: 0.25rem !important;
	}
	.pt-lg-1,
	.py-lg-1 {
		padding-top: 0.25rem !important;
	}
	.pr-lg-1,
	.px-lg-1 {
		padding-right: 0.25rem !important;
	}
	.pb-lg-1,
	.py-lg-1 {
		padding-bottom: 0.25rem !important;
	}
	.pl-lg-1,
	.px-lg-1 {
		padding-left: 0.25rem !important;
	}
	.p-lg-2 {
		padding: 0.5rem !important;
	}
	.pt-lg-2,
	.py-lg-2 {
		padding-top: 0.5rem !important;
	}
	.pr-lg-2,
	.px-lg-2 {
		padding-right: 0.5rem !important;
	}
	.pb-lg-2,
	.py-lg-2 {
		padding-bottom: 0.5rem !important;
	}
	.pl-lg-2,
	.px-lg-2 {
		padding-left: 0.5rem !important;
	}
	.p-lg-3 {
		padding: 1rem !important;
	}
	.pt-lg-3,
	.py-lg-3 {
		padding-top: 1rem !important;
	}
	.pr-lg-3,
	.px-lg-3 {
		padding-right: 1rem !important;
	}
	.pb-lg-3,
	.py-lg-3 {
		padding-bottom: 1rem !important;
	}
	.pl-lg-3,
	.px-lg-3 {
		padding-left: 1rem !important;
	}
	.p-lg-4 {
		padding: 1.5rem !important;
	}
	.pt-lg-4,
	.py-lg-4 {
		padding-top: 1.5rem !important;
	}
	.pr-lg-4,
	.px-lg-4 {
		padding-right: 1.5rem !important;
	}
	.pb-lg-4,
	.py-lg-4 {
		padding-bottom: 1.5rem !important;
	}
	.pl-lg-4,
	.px-lg-4 {
		padding-left: 1.5rem !important;
	}
	.p-lg-5 {
		padding: 3rem !important;
	}
	.pt-lg-5,
	.py-lg-5 {
		padding-top: 3rem !important;
	}
	.pr-lg-5,
	.px-lg-5 {
		padding-right: 3rem !important;
	}
	.pb-lg-5,
	.py-lg-5 {
		padding-bottom: 3rem !important;
	}
	.pl-lg-5,
	.px-lg-5 {
		padding-left: 3rem !important;
	}
	.m-lg-auto {
		margin: auto !important;
	}
	.mt-lg-auto,
	.my-lg-auto {
		margin-top: auto !important;
	}
	.mr-lg-auto,
	.mx-lg-auto {
		margin-right: auto !important;
	}
	.mb-lg-auto,
	.my-lg-auto {
		margin-bottom: auto !important;
	}
	.ml-lg-auto,
	.mx-lg-auto {
		margin-left: auto !important;
	}
}

@media (min-width: $screen-xl) {
	.m-xl-0 {
		margin: 0 !important;
	}
	.mt-xl-0,
	.my-xl-0 {
		margin-top: 0 !important;
	}
	.mr-xl-0,
	.mx-xl-0 {
		margin-right: 0 !important;
	}
	.mb-xl-0,
	.my-xl-0 {
		margin-bottom: 0 !important;
	}
	.ml-xl-0,
	.mx-xl-0 {
		margin-left: 0 !important;
	}
	.m-xl-1 {
		margin: 0.25rem !important;
	}
	.mt-xl-1,
	.my-xl-1 {
		margin-top: 0.25rem !important;
	}
	.mr-xl-1,
	.mx-xl-1 {
		margin-right: 0.25rem !important;
	}
	.mb-xl-1,
	.my-xl-1 {
		margin-bottom: 0.25rem !important;
	}
	.ml-xl-1,
	.mx-xl-1 {
		margin-left: 0.25rem !important;
	}
	.m-xl-2 {
		margin: 0.5rem !important;
	}
	.mt-xl-2,
	.my-xl-2 {
		margin-top: 0.5rem !important;
	}
	.mr-xl-2,
	.mx-xl-2 {
		margin-right: 0.5rem !important;
	}
	.mb-xl-2,
	.my-xl-2 {
		margin-bottom: 0.5rem !important;
	}
	.ml-xl-2,
	.mx-xl-2 {
		margin-left: 0.5rem !important;
	}
	.m-xl-3 {
		margin: 1rem !important;
	}
	.mt-xl-3,
	.my-xl-3 {
		margin-top: 1rem !important;
	}
	.mr-xl-3,
	.mx-xl-3 {
		margin-right: 1rem !important;
	}
	.mb-xl-3,
	.my-xl-3 {
		margin-bottom: 1rem !important;
	}
	.ml-xl-3,
	.mx-xl-3 {
		margin-left: 1rem !important;
	}
	.m-xl-4 {
		margin: 1.5rem !important;
	}
	.mt-xl-4,
	.my-xl-4 {
		margin-top: 1.5rem !important;
	}
	.mr-xl-4,
	.mx-xl-4 {
		margin-right: 1.5rem !important;
	}
	.mb-xl-4,
	.my-xl-4 {
		margin-bottom: 1.5rem !important;
	}
	.ml-xl-4,
	.mx-xl-4 {
		margin-left: 1.5rem !important;
	}
	.m-xl-5 {
		margin: 3rem !important;
	}
	.mt-xl-5,
	.my-xl-5 {
		margin-top: 3rem !important;
	}
	.mr-xl-5,
	.mx-xl-5 {
		margin-right: 3rem !important;
	}
	.mb-xl-5,
	.my-xl-5 {
		margin-bottom: 3rem !important;
	}
	.ml-xl-5,
	.mx-xl-5 {
		margin-left: 3rem !important;
	}
	.p-xl-0 {
		padding: 0 !important;
	}
	.pt-xl-0,
	.py-xl-0 {
		padding-top: 0 !important;
	}
	.pr-xl-0,
	.px-xl-0 {
		padding-right: 0 !important;
	}
	.pb-xl-0,
	.py-xl-0 {
		padding-bottom: 0 !important;
	}
	.pl-xl-0,
	.px-xl-0 {
		padding-left: 0 !important;
	}
	.p-xl-1 {
		padding: 0.25rem !important;
	}
	.pt-xl-1,
	.py-xl-1 {
		padding-top: 0.25rem !important;
	}
	.pr-xl-1,
	.px-xl-1 {
		padding-right: 0.25rem !important;
	}
	.pb-xl-1,
	.py-xl-1 {
		padding-bottom: 0.25rem !important;
	}
	.pl-xl-1,
	.px-xl-1 {
		padding-left: 0.25rem !important;
	}
	.p-xl-2 {
		padding: 0.5rem !important;
	}
	.pt-xl-2,
	.py-xl-2 {
		padding-top: 0.5rem !important;
	}
	.pr-xl-2,
	.px-xl-2 {
		padding-right: 0.5rem !important;
	}
	.pb-xl-2,
	.py-xl-2 {
		padding-bottom: 0.5rem !important;
	}
	.pl-xl-2,
	.px-xl-2 {
		padding-left: 0.5rem !important;
	}
	.p-xl-3 {
		padding: 1rem !important;
	}
	.pt-xl-3,
	.py-xl-3 {
		padding-top: 1rem !important;
	}
	.pr-xl-3,
	.px-xl-3 {
		padding-right: 1rem !important;
	}
	.pb-xl-3,
	.py-xl-3 {
		padding-bottom: 1rem !important;
	}
	.pl-xl-3,
	.px-xl-3 {
		padding-left: 1rem !important;
	}
	.p-xl-4 {
		padding: 1.5rem !important;
	}
	.pt-xl-4,
	.py-xl-4 {
		padding-top: 1.5rem !important;
	}
	.pr-xl-4,
	.px-xl-4 {
		padding-right: 1.5rem !important;
	}
	.pb-xl-4,
	.py-xl-4 {
		padding-bottom: 1.5rem !important;
	}
	.pl-xl-4,
	.px-xl-4 {
		padding-left: 1.5rem !important;
	}
	.p-xl-5 {
		padding: 3rem !important;
	}
	.pt-xl-5,
	.py-xl-5 {
		padding-top: 3rem !important;
	}
	.pr-xl-5,
	.px-xl-5 {
		padding-right: 3rem !important;
	}
	.pb-xl-5,
	.py-xl-5 {
		padding-bottom: 3rem !important;
	}
	.pl-xl-5,
	.px-xl-5 {
		padding-left: 3rem !important;
	}
	.m-xl-auto {
		margin: auto !important;
	}
	.mt-xl-auto,
	.my-xl-auto {
		margin-top: auto !important;
	}
	.mr-xl-auto,
	.mx-xl-auto {
		margin-right: auto !important;
	}
	.mb-xl-auto,
	.my-xl-auto {
		margin-bottom: auto !important;
	}
	.ml-xl-auto,
	.mx-xl-auto {
		margin-left: auto !important;
	}
}

.fixed-ratio {
	position: relative;
	display:block;
	width:100%;
	height:auto;
	overflow:hidden;
	text-decoration: none;
	@include aspect-ratio(4,4);

	&.portrait {
		@include aspect-ratio(4,5);

		> * {
			max-height:100%;
			width:auto !important;
		}
	}

	&.portrait-crop {
		@include aspect-ratio(4,5);
	}

	&.square-crop {
		> * {
			max-height:100%;
			width:auto !important;
		}
	}

	> * {
		position: absolute;
		top:0;
		right:0;
		left:0;
		bottom:0;
		margin-right: auto !important;
		margin-left:auto !important;
		//margin-top:auto !important;
		//margin-bottom:auto !important;
		display:block;
		max-width:100%;
	}
	
}


/*============================================================================
  Skip to content button
    - Overrides .visually-hidden when focused
==============================================================================*/
.skip-link:focus {
  @include visually-shown(absolute);
  color: $body-font-color;
  padding: $gutter / 2;
  z-index: 9999;
  transition: none;
}

/* ==========================================================================
#Lists
========================================================================== */

.list-unstyled {
	padding-left: 0;
	list-style: none;
}

.list-inline {
	padding-left: 0;
	list-style:none;

	> li {
		display:inline-block;

		&:not(:last-child) {
			margin-right: .5rem;
		}
	}
}


/* Table of Contents
==================================================

    #Icons
    #Icon Fallback

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

/* ==========================================================================
#Icons
========================================================================== */

.icon {
  display: inline-block;
  width: 20px;
  height: 20px;
  vertical-align: middle;
  fill: currentColor;

  .no-svg & {
    display: none;
  }
}

.icon--wide {
  width: 40px;
}

svg,
symbol {
  &.icon:not(.icon--full-color) {
    circle,
    ellipse,
    g,
    line,
    path,
    polygon,
    polyline,
    rect {
      //fill: inherit;
      //stroke: inherit;
    }
  }

}
/* ==========================================================================
#Icon Fallback
========================================================================== */

/*============================================================================
  A generic way to visually hide content while
  remaining accessible to screen readers (h5bp.com)
==============================================================================*/
.icon-fallback-text {
  @include visually-hidden();

  .no-svg & {
    @include visually-shown(static);
  }
}
$color-blankstate: rgba($body-font-color, 0.35);
$color-blankstate-border: rgba($body-font-color, 0.2);
$color-blankstate-background: rgba($body-font-color, 0.1);

.placeholder-svg {
  display: block;
  fill: $color-blankstate;
  background-color: $color-blankstate-background;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  border: 1px solid $color-blankstate-border;
}

.placeholder-svg--small {
  width: 480px;
}

.placeholder-noblocks {
  padding: 40px;
  text-align: center;
}

// Mimic a background image by wrapping the placeholder svg with this class
.placeholder-background {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;

  .icon {
    border: 0;
  }
}

/* Table of Contents
==================================================

	#General
    #Shopify Section
    #Background Styles
	#Challenge
	#Wishlist

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

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

//For use with Lazyloading images.
img[data-sizes="auto"] { display: block; width: 100%; }

/* ==========================================================================
#Shopify Section
========================================================================== */
.shopify-section {
	//margin-top: 1.5rem;

	@include media-query($large-up) {
		//margin-top: 2.5rem;
	}
	
	&:first-of-type {
		//margin-top: 0;
	}
}

#shopify-section-header, #shopify-section-product, #shopify-section-collection {
	margin-top: 0;
}

.sectionInsidePage {
	padding-top: 58px;
	transition: all .3s linear;

	@include media-query($large-up) {
		padding-top: 56px;
	}

	&.move {
		padding-top: 83px;
		transition: none !important;

		@include media-query($large-up) {
			padding-top: 85px;
		}
	}
}


.template-index #shopify-section-footer {
	margin-top: 0;
}

#preview-bar-iframe {
	height:50px;
}
/* ==========================================================================
#Background Styles
========================================================================== */

.bg-grey {
	background-color: $gray-100;
}

.bg-grey-content {
	background-color: $gray-100;
	padding:1rem;
	height:100%;
}

.bg-green {
	background-color: $brand-tertiary;
}

/* ==========================================================================
#Challenge
========================================================================== */

//BG: If attemping to login/creating an account, sometimes the user can be redirected to a /challenge page that asks them to confirm they are not a robot. This doesn't seem to be a physical page, so just have to add the stlying here. 

.shopify-challenge__container {
	margin:2rem auto !important;
	
	.shopify-challenge__button {
		@extend .btn;
		@extend .btn-primary;
	}
}

/* ==========================================================================
#Wishlist
========================================================================== */

#bookmarks {
	width:100%;

	.product {

		.image {
			max-height: 500px;
		}

		img {
			height:auto !important;
			max-height: 500px;
		}

		.text {
			padding:0
		}

		.product_title {
			text-align:center;
			height: auto !important;
			margin-bottom: 15px;
			margin-top: 15px;

			a {
				color: #000;

				&:hover {
					color: $brand-secondary;
				}
			}
		}

		.variant_title {
			display:none;
		}

		.buttons {
			padding:0;
			display: flex;
			flex-direction: row-reverse;
			flex-wrap: wrap;
			justify-content: center;

			.addsingleproduct {
				margin-right: 10px;
			}
		}

		.price {
			text-align:center;
			margin-bottom: 15px;
		}
	}
}
/* Table of Contents
==================================================

	#Heading
	#Content

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


/* ==========================================================================
#Heading
========================================================================== */

h1, h2, h3, h4, h5, h6 {
	margin: 1em 0 0.5em;
  	font-weight: inherit;
  	line-height: 1.2;
	color:$title-font-color;
	letter-spacing: 3px !important;
  text-transform: uppercase;
    /* font-family: "athelas", serif !important; */
}

.h1, .h2, .h3, .h4, .h5, .h6 {
  	letter-spacing: 3px !important
  text-transform: uppercase;
    /* font-family: "athelas", serif !important; */
}


h1, .h1 {
	margin: 0px;
	font-size: 29px;
	line-height: 36px;

	
	@include media-query($large-up) {
		  font-size: 48px;
		  line-height: 57px;
	}
}

h2, .h2 {
	@include px-to-rem(25);
	
	@include media-query($large-up) {
	  	@include px-to-rem(33);
	}
}

h3, .h3 {
	@include px-to-rem(22);
	
	@include media-query($large-up) {
		@include px-to-rem(27);
  	}
}

h4, .h4 {
	@include px-to-rem(20);

	@include media-query($large-up) {
		@include px-to-rem(24);
  	}
}

.h5 {
	font-size:1rem;
}

/* ==========================================================================
#Content
========================================================================== */

p, li, a, td, blockquote, label, input, select {
	font-size: 16px;
	letter-spacing: 1px;
	
}

.text-v-small {
	font-size:0.75rem; //12px
	letter-spacing:1px;
	font-weight:300;
}

.text-small {
	font-size:0.875rem; //14px
}

.text-large {
	font-size:1rem; //16px
}

.title-border {
	padding-bottom: .5rem;
	border-bottom:2px solid $brand-primary;
}

.text-link {
	color:$brand-secondary;
}

.text-primary {
	color:$brand-primary;
}

.uppercase {
	text-transform:uppercase;
}

.underline {
	margin:1rem 0;
	
	&:after {
		display:block;
		width:100%;
		height:1px;
		content:'';
		margin-top:1rem;
		background-color: #000;
	}
}

.title-bg {
	position: relative;
	text-align:center;
	margin-bottom: 2rem;
	
	&:before, &:after {
		position:absolute;
		top:calc(50% - 3px);
		content:'';
		display:block;
		width:100%;
		height:2px;
		transform:translateY(-50%);
	}
	
	&:before {
		background-color: $gray-200;
	}
	
	&:after {
		background-color: $gray-200;
		margin-top:6px;
	}
	
	> h1, h2, h3, h4, h5, h6 {
		position: relative;
		display:inline-block;
		background-color: #fff;
		margin: 0 !important;
		text-align:center;
		z-index:1;
		padding:0 2.5rem;
		
		&:before, &:after {
			position:absolute;
			top:50%;
			content:'';
			display:inline-block;
			width:2px;
			height:17px;
			background-color: $gray-200;
			transform: translateY(-50%);
		}
		
		&:before {
			left:0;
		}
		
		&:after {
			right:0;
		}
	}
}
/* Table of Contents
==================================================

    #Rich Text Editor

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

/* ==========================================================================
#Rich Text Editor
========================================================================== */
.rte {

  a {
    text-decoration: underline;
    color: #000;

    &:hover {
      color: $brand-secondary;
    }
  }
	
  img {
    height: auto;
    width: 100%;

    @include media-query($large-up) {
      width: auto;
    }
  }

  table {
    table-layout: fixed;
  }

  ul,
  ol {
    margin: 0 0 ($gutter / 2) $gutter;
  }

  // Match the styles from RTE nested lists
  ul {
    list-style: disc outside;

    ul {
      list-style: circle outside;

      ul {
        list-style: square outside;
      }
    }
  }
}

.text-center.rte,
.text-center .rte {
  ul,
  ol {
    margin-left: 0;
    list-style-position: inside;
  }
}

// allow table to scroll for tables in the RTE since we don't know
// how many columns they will contain. Class added by JS.
// sass-lint:disable no-misspelled-properties
.rte-table {
  max-width: 100%;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

// This class is wrapped around YouTube/Vimeo embeds in the RTE
// to make them responsive and prevent layout breaking
.rte__video-wrapper {
  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%;
  }
}

// This class is wrapped around tables in the RTE
// to prevent layout breaking with a scrollable parent
.rte__table-wrapper {
  max-width: 100%;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

/*============================================================================
  Responsive tables, defined with .responsive-table on table element.
==============================================================================*/

.responsive-table {

	@include media-query($medium-up) {
		thead {
			th {
				padding: .5rem;
				border-bottom: 1px solid $gray-300;
			}
		}
		
		tbody {
			td {
				padding:.5rem;
			}
		}
	}
	
	tbody .responsive-table-row {
		background-color: $gray-100;
		
		&:nth-child(odd) {
			background-color:$gray-200;
		}
	}
	
	tfoot {
		td {
			font-weight:600;
			padding:.5rem 0;
		}
	}
	
	a {
		color:$brand-primary;
	}
}

@include media-query($medium-down) {
	.responsive-table {
		width: 100%;


		thead {
			display: none;
		}

		tr {
			display: block;
		} // IE9 table layout fixes
		tr,
		td {
			float: left;
			clear: both;
			width: 100%;
		}

		th,
		td {
			display: block;
			padding: .5rem $gutter / 2;
			margin: 0;
		}

		td::before {
			display: block;
			content: attr(data-label);
			text-align: left;
			text-transform: uppercase;
			font-weight:600;
			font-size: 0.875rem;
		}
	} // Add a keyline between rows
}
/* Table of Contents
==================================================

    #Button General
    #Button Primary
    #Button Secondary
    #Button Tertiary
    #Button Quaternary
    #Button Dark
    #Button Wide
    #Button Disabled
    #Button Plain
	#Button Danger
	#Wishlist Buttons

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

/* ==========================================================================
#Button General
========================================================================== */

.btn {
  	display: inline-block;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
	@include prefix(user-select, none, webkit moz ms spec);
    border: 1px solid transparent;
    padding: 11px 10px !important;
	font-size: 0.75rem !important; //12px
	text-transform: uppercase;
	text-decoration: none;
	line-height: 1.5 !important;
	@extend .text-small;
	letter-spacing:1px;
	transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
	cursor: pointer;
	border-radius:0 !important; 
	width:auto !important;
	font-family: $body-font !important; 
	height: 40px;

	@include media-query($medium-up) {
		//height:40px;
	}
	
	@include media-query($large-up) {

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

	&:focus {
		outline:0;
	}
}

/* ==========================================================================
#Button Primary
========================================================================== */

.btn-primary {
	position: relative;
    vertical-align: middle;
    color: #000 !important;
    display: inline-block;
    text-align: center;
    transition: 0.5s;
    cursor: pointer;
	-webkit-transition: 0.5s;
	background-color: $brand-secondary !important;
	border: 1px solid $brand-secondary !important;

	&:hover {
		border: 1px solid #000 !important;
		background-color: #fff !important;
		transition: 0.5s;
	}
}


.btn-test {
	position: relative;
    vertical-align: middle;
    color: #0b7;
    display: inline-block;
    height: 60px;
    line-height: 60px;
    text-align: center;
    transition: 0.5s;
    padding: 0 20px;
    cursor: pointer;
    border: 2px solid #0b7;
	-webkit-transition: 0.5s;
	
	&::after, &::before {
		width: 100%;
		height: 100%;
		z-index: 3;
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		box-sizing: border-box;
		-webkit-transform: scale(0);
		transition: 0.5s;
	}

	&::before {
		border-bottom: 3px solid red;
    	border-left: 3px solid red;
    	-webkit-transform-origin: 0 100%;
	}

	&::after {
		border-top: 3px solid red;
		border-right: 3px solid red;
		-webkit-transform-origin: 100% 0%;
	}

	&:hover {
		border: 1px solid rgba(0,160,80,0);
		color:red;

		&::after, &::before {
			-webkit-transform: scale(1);
		}

	}

}


/* ==========================================================================
#Button Secondary
========================================================================== */

.btn-secondary {
	color: #000;
	background-color: #fff;
	border:1px solid #000;
	
	&:hover {
		background-color: $brand-secondary;
		color: #000;
		border: 1px solid $brand-secondary;
	}
}

/* ==========================================================================
#Button Tertiary
========================================================================== */

.btn-tertiary {
	color: #000;
	background-color: #fff;
	border:1px solid #000;
	transition: 0.5s;
	
	&:hover {
		background-color: $brand-secondary;
		border:1px solid $brand-secondary;
		transition: 0.5s;
	}
}

/* ==========================================================================
#Button Dark
========================================================================== */

.btn-dark {
	background-color: $gray-900;
	color:#fff;
	
	&:hover {
		background-color: lighten($gray-900,5%);
		color:#fff;
	}
}

/* ==========================================================================
#Button Wide
========================================================================== */

.btn-wide {
	padding-left: 2rem;
	padding-right: 2rem;
	
	@include media-query($medium-up) {
		padding-left: 3rem;
		padding-right: 3rem;
	}
}

/* ==========================================================================
#Button Disabled
========================================================================== */

.btn-disabled {
	background-color: $gray-300;
	color:$gray-600;
	cursor:not-allowed;
}

/* ==========================================================================
#Button Plain 
========================================================================== */

.btn-plain {
	border:1px solid $gray-300;
	
	&:hover {
		background-color: $gray-100;
	}
}

/* ==========================================================================
#Button Danger
========================================================================== */

.btn-danger {
	background-color: $dangerBtn;
	color:#fff;
	
	&:hover {
		color:#fff;
		background-color: darken($dangerBtn,7%);
	}
}

/* ==========================================================================
#Wishlist Button
========================================================================== */

.wishlistpage .btn {
	height:auto !important;
	color: #000 !important;
}
/* Table of Contents
==================================================

    #Forms
    #Site Search
    #Custom Styling
    #Error Styling
==================================================
*/

/* ==========================================================================
#Forms
========================================================================== */

/*============================================================================
  Form scaffolding
    - Selectors setup for you to style form elements how you want
    - Focus, error, and disabled states are set to be extended
==============================================================================*/
input,
textarea,
select {
  border-radius: 0;
  max-width: 100%;
  width:100%;
  height:40px;
  padding:0 25px;
  transition:border-color .3s ease-in-out;
  background-color: #fff;
  font-size: 16px;
  border: 1px solid #000;


  &:focus {
    outline:0;
  }

  &[disabled] {
    cursor: default;
    background-color: #000;
    border-color: #000;
  }
}

[type="checkbox"] {
  width:auto;   
}

form [type="submit"] {
  height:40px;
  min-width: 130px;
}

textarea {
 	min-height: 100px;
	height:auto;
  padding:15px 25px;
  letter-spacing:2px;
  font-weight:300;
}

.form-group {
	margin-bottom: 1rem;
	
	&.form-full > * {
		width:100%;
	}
	
	&.form-inline {
		display:flex;
		flex-direction:row;
		align-items: stretch;
		
		> * {
			align-self: center;
		}
	}
}

/* ==========================================================================
#Site Search
========================================================================== */

body.template-search {

  .collection-header {
    .site-search {
		
      input[type="search"] {
        width:55%;
        
        @include media-query($small-up) {
          width:70%;
        }
      }
      
      button[type="submit"] {
        width:calc(45% - 1rem);
        margin-left: 1rem;
        padding-left: 0;
        padding-right: 0;
        vertical-align: top;
        
        @include media-query($small-up) {
          width:calc(30% - 1rem);
        }
      }
    }
  }
}

/* ==========================================================================
#Custom Styling
========================================================================== */

select {
  @include prefix(appearance, none, webkit moz spec);
  background-position: right center;
  background: {
    //image: url($svg-select-icon);
    image: url({{ "dropdown_arrow_0.5px.svg" | asset_url }});
    repeat: no-repeat;
    position: right 20px center;
  }
  padding-right: 28px;
  text-indent: 0.01px;
  text-overflow: '';
  cursor: pointer;

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

select::-ms-expand {
  display: none;
}

/* ==========================================================================
#Error Styling
========================================================================== */

input,
select,
textarea {
  &.input-error {
    border-color: $dangerText;
    //background-color: #000;
    //color: #000;
  }
}

/* ==========================================================================
#Templates
========================================================================== */

/* Table of Contents
==================================================

    #Collection Header
    #Sidebar - Filter
    #Product Listing
    #Pagination
	#Collection Pagination / Sort By
	#Product Quickview Frame
	#Product Quickview Overlay

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


/* ==========================================================================
#Collection Header
========================================================================== */

.template-collection {
	.collection-header {
		> .container-fluid {

			@include media-query($small-down) {
				padding: 0px;
			}
		}
	}

	.collection-listing {
		> .container-fluid {

			@include media-query($small-down) {
				padding: 0px;
			}
		}
	}
}

.collection-header {
	padding: 0 15px;
	background-color: #fff;
	margin-top: 15px;

	@include media-query($small-up) {
		margin-top: 40px;
	}

	h1 {
		margin-bottom: 15px;
		font-size: 29px;
		line-height: 36px;

		@include media-query($large-up) {
			margin-bottom: 25px;
			font-size: 48px;
			line-height: 48px;
		}
	}

	.rte {
		font-size: 13px;
		letter-spacing: 1px;
		line-height: 21px;
		width: 100%;
		margin: 0 auto 25px;

		@include media-query($large-down) {
			position: relative;
			//height:70px;
			overflow:hidden;

			&:after {
				position: absolute;
				left:0;
				bottom:0;
				display:block;
				width:100%;
				height:100%;
				//content:'';
				background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba($gray-100,1) 100%);
				background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba($gray-100,1) 100%);
				background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba($gray-100,1) 100%);
				filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='$gray-100',GradientType=0 );
				visibility: visible;
				opacity: 1;
				transition: all 1s ease-in-out;
			}
		}

		@include media-query($large-up) {
			height:auto !important;
			font-size: 16px;
			line-height: 24px;
			max-width: 80%;
			margin: 0 auto 39px;
		}

		&.active:after {
			visibility: hidden;
			opacity: 0;
		}

	}

	input[type="search"] {
		background-color: #fff;
	}
}

.collection-sub-nav {
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;

	&.active {
		display:flex;
	}

	@include media-query($large-down) {
		height:0;
		overflow:hidden;
	}

	@include media-query($large-up) {
		display:flex !important;
		justify-content: center;
		height:auto !important;
	}

	ul {

		width:100%;

		@include media-query($small-up) {
			width:50%;
		}

		@include media-query($medium-up) {
			width:33.33%;
		}

		@include media-query($large-up) {
			/* one item */
			&:first-child:nth-last-child(1) {
			/* -or- li:only-child { */
				width: 100%;
			}

			/* two items */
			&:first-child:nth-last-child(2),
			&:first-child:nth-last-child(2) ~ ul {
				width: 50%;
			}

			/* three items */
			&:first-child:nth-last-child(3),
			&:first-child:nth-last-child(3) ~ ul {
				width: 33.3333%;
			}

			/* four items */
			&:first-child:nth-last-child(4),
			&:first-child:nth-last-child(4) ~ ul {
				width: 25%;
			}
			
			/* five items */
			&:first-child:nth-last-child(5),
			&:first-child:nth-last-child(5) ~ ul {
				width: 20%;
			}
			
			/* six items */
			&:first-child:nth-last-child(6),
			&:first-child:nth-last-child(6) ~ ul {
				width: 16.66%;
			}
		}
	}

	li + li {
		margin-top: 1rem;
	}

	a {
		text-decoration: none;
		text-transform: uppercase;
		font-size:0.75rem;

		&:hover {
			text-decoration: underline;
			color:$brand-primary;
		}
	}
}

.collection-read-more {
	font-size:0.75rem;
	text-transform:uppercase;
	letter-spacing:1px;
	cursor: pointer;

	@include media-query($large-up) {
		display:none;
	}

}

/* ==========================================================================
#Sidebar - Filter
========================================================================== */

.refineWrapper {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
	margin-bottom: 15px;
	padding: 0px;

	@include media-query($large-up) {
		flex-direction: column;
		justify-content: flex-start;
		margin-bottom: 0px;
		padding: 0 15px;
	}
}

.collection-listing {
	display:inline-block;
	width:100%;
	padding: 0 15px;
}
	
.filter-container {
	position: relative;
	width: 50%;
	padding: 0 15px;

	@include media-query($large-up) {
		width: 100%;
		padding: 0px;
	}

	.filter-title {
		display:flex;
		flex-direction:row;
		justify-content: space-between;
		align-items: center;
		padding: 1rem 0;
		margin: 0;
		cursor: pointer;
		letter-spacing:1px;
		font-size: 12px;
		line-height: 15px;
		text-transform:uppercase;
		text-align: center;

		.arrow {
			width: 12px;
			height: 6px;
			transition: all .3s linear;

			.icon {
				width: 100%;
				height: 100%;
				vertical-align: top;

				path {
				}
			}
		}
		
		&.active {
			.arrow {
				transform: rotate(180deg);
			}
		}
	}
}

#bc-sf-filter-tree {
	display:block !important;
}

.bc-sf-filter-option-block {
	border-bottom: none;
	padding: 0;
	margin-bottom:1rem;
}

.bc-sf-filter-selection-wrapper {
	margin: 0px !important;
	padding: 0px !important;

	.bc-sf-filter-selected-items {
		margin: 0px !important;

		> div {
			margin-right: 0px !important;
			margin-top: 8px !important;
			width: 100%;
		}

		.selected-item {
			.bc-sf-filter-clear {
				margin-top: 0px !important;
			}
		}

		a {
			text-decoration: none !important;
		}

		.selected-type {
			font-size: 12px !important;
			line-height: 15px !important;
			text-decoration: none !important;
			text-transform: capitalize !important;
		}
	}
}

.bc-sf-filter-block-title {
	border-top:none !important;
	border-bottom: none;
	padding:0 !important;

	h3 {
		text-transform: uppercase;
		color: #000;
		font-family: $body-font;
		font-size: 12px !important;
		line-height: 15px !important;
		margin: 0px;
		padding: 0px;
		width: 100%;
		font-weight: 100 !important;

		span {
			width: 100%;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			position: relative;
			padding: 1rem 0;

			&:after {
				background: {
					image: url({{ "dropdown_arrow_0.5px.svg" | asset_url }});
					repeat: no-repeat;
					position: center center;
				}
				display: inline-block;
				content: "";
				width: 12px;
				height: 6px;
				align-self: flex-start;
				transition: all .3s linear;
				transform: rotate(180deg);
				position: relative;
				top: 3px;
			}

			&:before {
				position: absolute;
				right: 0px;
				top: 50%;
				margin: 0px !important;
				transform: translateY(-50%);
				display: none !important;
			}

			&.up {
				&:after {
					transition: all .3s linear;
					transform: rotate(0deg);
				}
			}
		}
	}
}

.bc-sf-filter-block-content {
	margin: 0px !important;
	max-height: none !important;

	ul {
		li {
			a {
				margin-bottom: 1rem;
				font-size: 12px !important;
				line-height: 15px !important;
				font-weight: 100 !important;
			}

			span {
				&:first-child {
					top: -1px !important;
					border-radius: 50%;
				}
			}
		}
	}

	.bc-sf-filter-option-value {
		margin-left: 0px !important;
	}

	.bc-sf-filter-option-amount {
		margin: 0 0 0 3px;
	}
}

.bc-sf-filter-option-swatch.circle-grid {
	li {
		margin-right: .5rem !important;

		.bc-sf-filter-option-swatch-image {
			border:1px solid $gray-600 !important;
		}

		a {
			margin-bottom: .5rem !important;

			&.selected .bc-sf-filter-option-swatch-image {
				border:none !important;
			}
		}
	}

}

.filter-sidebar {
	display:none;
	width:100%;
	padding: 0 15px;
	background-color: #fff;
	margin-bottom: 0px;
	z-index:2;

	@include media-query($large-up) {
		position: relative;
		padding: 0px;
		left:0;
	}

	@include media-query($large-down) {
		.bc-sf-filter-option-block:last-child {
			padding-bottom: 0;
		}
	}

	/*BG: Not sure why the bc sf filter is playing up, but their styling is hiding the elements I need */
	#bc-sf-filter-tree:not(.bc-sf-filter-tree-mobile-open) {
		display:block !important;
	}

	#bc-sf-filter-tree .bc-sf-filter-option-block {
		padding:0 !important;
		border-top:0 !important;
	}

	.bc-sf-filter-option-hidden {
		display:block !important;
	}
	
	.bc-sf-filter-option-block .bc-sf-filter-block-content {
		ul li input[type=checkbox]+a {
			font-size:0.75rem;
		}

		.bc-sf-filter-option-value {
			margin-left: .5rem;
		}
	}

		
}

#bc-sf-filter-top-sorting {
	width: 50% !important;
	padding: 0 15px;

	@include media-query($large-up) {
		margin-bottom: 10px;
		width: 100% !important;
		padding: 0px;
	}

	label {
		display:none !important;
		text-transform: uppercase;
		font-size:0.875rem;
		letter-spacing:1px;
		margin-right: 1rem;
	}

	select {
		font-size: 12px;
		line-height: 15px;
		text-transform: uppercase;
		width: 100%;
		letter-spacing:1px;
		padding: 1rem 0;
		background-color: #fff;
		background-position: right 0px center;
		height: 100%;
		border: none;
	}
}

.collection-view {
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
	justify-content: center;
	list-style:none;
	padding:0;
	margin:0;

	@include media-query($medium-down) {
		margin-bottom: 1.5rem;
	}

	@include media-query($medium-up) {
		justify-content: flex-end;
	}

	li {
		display:block;
		//padding:.5rem 0;

		& + li {
			border-left:1px solid $brand-primary;
			padding-left: 1rem;
			margin-left: 1rem;
		}

		svg {
			fill:#fff;
			stroke:#000;
			stroke-width: .5px;
		}
		
		&.active {
			svg {
				fill:$brand-secondary;
				stroke:#fff;
			}
		}
	}
}


/* ==========================================================================
#Product Listing
========================================================================== */

#bc-sf-filter-products {
	
	&.collection-view-three {
		.product-single {
			//col-4
			@include media-query($widescreen) {
				-ms-flex: 0 0 33.333333%;
				flex: 0 0 33.333333%;
				max-width: 33.333333%;
			}

			//col-6
			@include media-query($widescreen-down) {
				-ms-flex: 0 0 50%;
				flex: 0 0 50%;
				max-width: 50%;
			}
						
			//col-12
			@include media-query($medium-down) {
				-ms-flex: 0 0 100%;
				flex: 0 0 100%;
				max-width: 100%;
			}
		}
	}

	&.collection-view-six {
		.product-single {
			//col-6
			-ms-flex: 0 0 50%;
			flex: 0 0 50%;
			max-width: 50%;

			//col-4
			@include media-query($medium-up) {
				-ms-flex: 0 0 33.333333%;
				flex: 0 0 33.333333%;
				max-width: 33.333333%;
			}

			//col-2
			@include media-query($widescreen-ultra) {
				-ms-flex: 0 0 25%;
				flex: 0 0 25%;
				max-width: 25%
			}
		}
	}

	#bc-sf-filter-message {
		width: 100%;
		display: block;
		padding: 0 15px;
		text-align: left;
	}
}

.collection-listing .product-single {
	display:flex;
	flex-direction:column;
	margin-bottom: 1.5rem;

	@include media-query($small-up){
		margin-bottom: 1rem;
	}

	&.sold-out {
		.product-quickview {
			display: none !important;
		}

		.product-soldOut {
			display: block;
		}
	}

    &:hover {
		.product-image-hover {

			.primary-image {
				display:none;
			}

			.secondary-image {
				display:block;
			}
		}
    }
	
	@include media-query($large-up) {
		margin-bottom: 2rem;
	}
	
	a {
		color:$title-font-color;
	}
	
	&:hover {
		.product-title {
			//color:$brand-secondary;

		}
	}
		
	.product-image {
		position: relative;
		display:block;

		a {
			text-decoration: none;
		}

		img {
			@extend .img-fluid;
		}

		.lazyload {
			width:100% !important;
			filter: blur(5px);
		}

		.lazyloaded {
			filter: blur(0);
			width:100% !important;
		}
	}
	
	.product-image-hover {
		.secondary-image {
			display:none;
		}
	}

	.product-status {
		position: absolute;
		top:.5rem;
		right:.5rem;
		display:none;
		flex-direction:column;
		justify-content: center;
		padding:.5rem;
		text-align:center;
		background-color:rgba($brand-secondary,.5);
		letter-spacing:1px;
		font-size: 0.625rem;
		text-transform: uppercase;
		width:60px;
		height:60px;
		border-radius:50%;
		color:$brand-primary;
		font-family: $title-font;

		@include media-query($large-up) {
			top:1rem;
			right:1rem;
			background-color:$brand-secondary;
			width:80px;
			height:80px;
			padding:1rem;
			font-size: 0.75rem;
			letter-spacing:2.5px;
		}

		&.sale {
			display:none !important;
		}

		// &.sale, &.new-in, &.new-season {
		// 	background-color: $brand-secondary;
		// 	color:#fff;
		// }

    }
    
    .product-wishlist {
		cursor: pointer;
		position: absolute;
		top: 10px;
		right: 10px;
		height:auto !important;

		@include media-query($small-up) {
			top: 15px;
			right: 15px;
		}

        .smartwishlist {
            display:block;
            width: 15px;
			height: 15px;
			
			@include media-query($small-up) {
				width: 20px;
				height: 20px;
			}

            &.unbookmarked {
                background-image: url('{{ 'icon-wishlist.svg' | asset_url }}');
                background-repeat: no-repeat;
                background-size: contain;
            }

            &.bookmarked {
                background-image: url('{{ 'icon-wishlist-added.svg' | asset_url }}');
                background-repeat: no-repeat;
                background-size: contain;
            }

            > span {
                display:none;
            }
        }
	}
	
	.product-quickview {
		bottom:1rem;
		text-align:center;
		width: 100%;
		display: block;
		margin-top: auto;

		.btn {
			width: 100% !important;
			font-size: 11px;
			line-height: 13px;
			letter-spacing: 0.5px;
			padding: 14px;
			cursor: pointer;
		}
	}

	.product-soldOut {
		bottom:1rem;
		text-align:center;
		width: 100%;
		display: block;
		margin-top: auto;
		display: none;

		.btn {
			width: 100% !important;
			font-size: 11px;
			line-height: 13px;
			letter-spacing: 0.5px;
			padding: 14px;
		}
	}

	.sale-percentage {
		display:none;
		float:right;
		margin-top: -.5rem;
		margin-bottom: -.5rem;
		margin-right: -1rem;
		margin-left: 1rem;
		padding:.5rem;
		background-color: darken($brand-primary,10%);

		@include media-query($small-up) {
			display:block;
		}
	}
	
	.product-details {
		display:block;
		padding: 10px 0 0;
		text-align:left;
		flex: 1;
		display: flex;
		flex-direction: column;

		a {
			text-decoration: none;
		}
	}

	.product-title-wishlist {
		display:flex;
		flex-direction:row;
		align-items: center;

		.product-title {
			margin-top: 0;
			margin-bottom: 0;
			width: 100%;
			text-align: center;
			text-transform: uppercase;
		}

		.product-wishlist {
			display:flex;
			flex-direction:column;
			justify-content: center;
		}
	}

	.product-variants {
		display:block;
		width:100%;
		transition:all .3s ease-in-out;

		ul {
			display:flex;
			flex-direction:row;
			flex-wrap:wrap;
			list-style:none;
			padding:0;
			margin:1rem -.5rem 0;
		}

		li {
			display:none;
			width:25px;
			height:25px;
			margin-left: .5rem;

			@include media-query($medium-up) {
				width:40px;
				height:40px;
			}

			&:nth-child(-n+6){
				display:block;
			}
		}

		.more-variants span {
			display:flex;
			flex-direction:column;
			justify-content: center;
			align-items: center;
			font-size:1.2rem;
			font-weight:300;
			background-color: $gray-200;
		}

		a, span {
			display:block;
			height:inherit;
			width:inherit;
		}
		
	}
	
	.product-brand {
		display:block;
		margin-bottom: .5rem;
		font-weight: 700;
		text-transform: uppercase;
		letter-spacing:1.5px;
	}

	.product-title {
		display:block;
		margin-bottom: 10px;
		text-align: center;

		@include media-query($large-up) {
			margin-bottom: 15px;
		}

		h3 {
			margin: 0px;
		}

		a {
			font-size: 12px;
			line-height: 14px;

			@include media-query($small-up) {
				font-size: 14px;
				line-height: 17px;
			}

			&:hover {
				color: $brand-secondary;
				text-decoration: none;
			}
		}
	}

	.product-price {
		display:block;
		margin: 0px;
		font-size: 12px;
		line-height: 14px;
		margin-top: auto;
		margin-bottom: 10px;
		letter-spacing: 0.5px;
		text-align: center;

		@include media-query($small-up) {
			font-size: 14px;
			line-height: 17px;
			margin-bottom: 15px;
		}

		> .product-price {
			margin: 0px;
		}

		&:empty {
			display:none;
		}

		.product-price-original {
			font-size: 12px;
			line-height: 14px;
			margin-left: .5rem;
			text-decoration: line-through;

			@include media-query($small-up) {
				font-size: 14px;
				line-height: 17px;
			}
		}
	}
}

/* ==========================================================================
#Pagination
========================================================================== */

.pagination {
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
	justify-content: center;
	align-items: center;
	width: 100%;
	margin-top: 10px;

	@include media-query($large-up) {
		margin-top: 0px;
	}
	
	&:before {
		display: block;
		content:'';
		width:100%;
		height:1px;
		background-color: #000000;
		margin-bottom: 1.5rem;
		display: none;
		
		@include media-query($large-up) {
			margin-bottom: 1.5rem;
		}
	}
	
	> span {
		display:flex;
		flex-direction:column;
		justify-content: center;
		align-items: center;
		width: 30px;
		height:30px;
		border:1px solid $gray-500;
		transition:all .3s ease-in-out;
		margin-bottom: .8rem;

		@include media-query($small-up) {
			width: 40px;
			height:40px;
		}
		
		&:hover {
			border-color:$brand-secondary;
			background-color: $brand-secondary;
			
			svg {
				fill:#fff;
			}
		}
		
		svg {
			transition:all .3s ease-in-out;
		}
		
		& + span {
			margin-left: .8rem;
		}
		
		&.page {
			border-color:$gray-200;
			background-color: $gray-200;
			color:$title-font-color;
			transition:all .3s ease-in-out;
			
			&:hover {
				border-color:$brand-secondary;
				background-color: $brand-secondary;
				
				a {
					color:#fff;
					text-decoration: none;
				}
			}
			
			> a {
				color:$title-font-color;
				transition:color .3s ease-in-out;
			}
		}

		&.next, &.previous {
			width:auto;
			padding-left: .5rem;
			padding-right: .5rem;

			@include media-query($small-up) {
				padding-left: 1rem;
				padding-right: 1rem;
			}

			a {
				text-decoration: none;

				&:hover {
					color:#fff;
				}
			}
		}
		
		&.current {
			border-color:$brand-secondary;
			background-color: $brand-secondary;
			color:#fff;
		}
		
		&.disabled {
			display:none;
		}
	}
	
	a {
		display:flex;
		flex-direction:column;
		justify-content: center;
		align-items: center;
		width:100%;
		height:100%;
	}
}

.bc-sf-filter-load-more-button {
	font-size: 14px;
	line-height: 17px;
	letter-spacing: 0.5px;
	border: 0px !important;
	border-bottom: 1px solid #000 !important;
	padding: 10px 0 !important;
	color: #000 !important;

	&:hover {
		color: $brand-secondary !important;
		border-bottom: 1px solid $brand-secondary !important;
	}
}


/* ==========================================================================
#Collection Pagination / Sort By
========================================================================== */

.collection-pagination-sortby {
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
	justify-content: flex-start;
	align-items: stretch;
	//border: 1px solid $gray-900;
	
	
	@include media-query($small-up) {
		justify-content: flex-end;
	}
	
	.collection-product-count {
		margin-right: auto;
		
		@include media-query($small-down) {
			width:100%;
			margin-bottom: 1rem;
		}
		
		.current-products-showing {
			font-weight: 600;
		}
	}
	
	#bc-sf-filter-top-sorting {
		//border-left:1px solid $gray-900;
		
		@include media-query($small-up) {
			padding-left: 1rem;
		}
		
		select {
			height:35px;
		}
	}
	
	.sort-text {
		margin-right: .5rem;
	}
	
	> div {
		align-self: center;
		font-size:0.875rem;
	}

}

.pagination_bottom {
	text-align: center;
	border-top: 1px solid #B7BBC0;
	padding: 30px 0 0 0;
	margin: 40px 0 0 0;

	span {
		cursor: pointer;
		display: inline-block;
		margin: 3px;
		list-style-type: none;
		background: #fff;
		color: #000;
		font-weight: 700;
		border: 1px solid #B7BBC0;
		font-size: 16px;

		@media screen and (max-width: $screen-xl) {
			font-size: 14px;
		}

		a {
			padding: 10px 20px;
			display: block;
		}

		&.current {
			background: #000;
			color: #fff !important;
			padding: 10px 20px;
			cursor: auto;
		}

		&.next {
			display: none;
		}

		&.prev {
			display: none;
		}

		&.deco {
			padding: 10px 20px;
			cursor: auto;
		}
	}
}

/* ==========================================================================
#Product Quickview Frame
========================================================================== */

.product-quickview-frame {
	position: fixed;
	top:1rem;
	left:0;
	right:0;
	opacity:0;
	visibility: hidden;
	margin:0 auto;
	background-image: url('{{ 'bc-sf-filter-loading.gif' | asset_url }}');
	background-position: center center;
	background-repeat:no-repeat;
	transition:all .3s ease-in-out;
	z-index:11;
	top:50%;
	transform: translateY(-50%);

	&.active {
		opacity:1;
		visibility: visible;
	}

	.frame-content {
		background-color: #fff;
		position: relative;
	}

	.frame-close {
		z-index:102;
		cursor:pointer;
		text-align:right;
		overflow:hidden;
		position: absolute;
		top: -23px;
		right: -23px;
		//padding: 13px 15px;
		//border: 0.5px solid #000;
		//border-radius: 50%;
		background-color: transparent;

		.icon {
			width: 50px;
			height: 50px;
		}
	}
}

/* ==========================================================================
#Product Quickview Product
========================================================================== */

.product-quickview-frame {

	.quickview-product-details {
		margin-top: 0px !important;
		padding-top: 15px;
		max-height: 75vh;
		overflow-y: scroll;

		@include media-query($small-up) {
			max-height: 90vh;
		}

		.product-detail-images {

			img {
				@include media-query($widescreen-ultra) {
					//max-width: 300px;
				}
			}
		}
	}
	
	.product-title {
		margin-top:12px;
		margin-bottom: 10px;
		font-size: 14px;
		line-height: 17px;
		letter-spacing: 0.5px;
		font-weight: 100;
		text-align: center;

		a {
			text-decoration:none;
			font-size: 14px;
			line-height: 17px;
			letter-spacing: 0.5px;
			text-transform: uppercase;

			&:hover {
				color: $brand-secondary;
				text-decoration: none;
			}
		}
	}

	.product-detail-price {
		margin-left:0;
		color: #000;
		font-size: 14px;
		line-height: 17px;
		display: block;
		margin-bottom: 21px;
		text-align: center;
	}

	.productSize {
		font-size: 12px;
		line-height: inherit;
		letter-spacing: 0.33px;
		padding: 0px 10px;
		height: 46px;
		border: 1px solid #000;
		max-height: 40px;
		background: {
			image: url({{ "dropdown_arrow_1px.svg" | asset_url }});
			repeat: no-repeat;
			position: right 15px center;
		}

		@include media-query($widescreen-ultra) {
			padding: 0px 20px;
			background: {
				image: url({{ "dropdown_arrow_1px.svg" | asset_url }});
				repeat: no-repeat;
				position: right 20px center;
			}
		}
	}

	.quickBuy {
		.error {
			//display: none !important;
		}
	}

	.sizeError {
		margin-top: 10px;
		font-size: 14px;
		line-height: 17px;
		display: none;
		padding: 10px;
		background-color:$danger;
		color:$dangerText;
	}

	.btn-add-to-cart {
		font-size: 14px;
		line-height: 17px;
		letter-spacing: 1px;
		padding: 14px;
		border: 1px solid #000;
	}

	.product-price-original {
		margin-left:.5rem;
	}

	.product-detail-price-wrapper {
		margin: 0px 0 15px;
	}

	.swatch {
		display:flex;
		flex-direction:row;
		flex-wrap:wrap;
		justify-content: center;
		align-items: center;
		display:none;

		&.swatch-color {
			display:none;
		}
		
		.swatch-header {
			width:100%;
		}
	}

	.swatch-element {
		margin-top:0 !important;
		margin-left:.2rem !important;
		padding:.2rem;

		& + .swatch-element {
			border-left:1px solid #000;
		}

		&.active {
			border:1px solid #000;
		}
	}

	.btn-add-to-cart {
		width:100% !important;
		margin-top: 0px !important;
	}

	.btn-add-to-cart.variant-not-available {
		background-color: $gray-500;
		border-color: $gray-600 !important;
	}

}

.product-quickview-overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	opacity: 0;
	visibility: hidden;
	background-color: rgba(#fff,.8);
	z-index:10;
	transition:all .3s ease-in-out;

	&.active {
		opacity:1;
		visibility: visible;
	}
}
/* Table of Contents
==================================================

    #Product Detail Container
	#Product Collection Navigation
	#Product Detail Images Container
    #Product Detail Images
    #Product Detail Images Thumbnails
    #Slick Arrows
    #Slick Dots
    #Product Title
    #Product Vendor
    #Product Price
    #Product Quantity
	#Product Add to Basket
	#Product Countdown
	#Product Wishlist App
	#Product Add To Basket Ajax
	#Product Dynamic Checkout
	#Product Assurance
    #Accordion
    #Product Featured Details
    #Product Shipping
	#Product Reviews
    #Related Products Section
    #Recently Viewed Products Section
	#Related Products Pro App
	#Product Colors App
	#Product notify back in stock app
	


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


/* ==========================================================================
#Product Detail Container
========================================================================== */
.product-detail-container {
	margin-top: 0rem;

	&.quickview-product-details {
		margin-top: 1rem;
	}
	
	@include media-query($medium-up) {
		margin-top: 40px;
		padding: 0 15px;
	}

}

/* ==========================================================================
#Product Collection Navigation
========================================================================== */

.product-collection-navigation {
	display:none;
	flex-direction: row;
	flex-wrap:wrap;
	border-bottom:1px solid $gray-300;
	padding-top: .5rem;
	padding-bottom: .5rem;
	margin-bottom: .5rem;
	
	@include media-query($medium-up) {
		display:flex;
	}
	
	.previous, .next {
		display:flex;
		flex-direction:row;
		align-items:center;
		justify-content:flex-start;
		width:50%;
		text-transform: uppercase;
		font-size:0.875rem;
		letter-spacing:1px;
		
	}
	
	p {
		margin-bottom: 0;
	}
	
	a {
		display:flex;
		flex-direction:row;
		align-items: center;
		color:$body-font-color;
		text-decoration: none;
		transition:all .3s ease-in-out;
		
		svg {
			transition:all .3s ease-in-out;
		}
		
		&:hover {
			color:$brand-secondary;
			
			svg {
				fill:$brand-secondary;
			}
		}
	}
	
	.previous {
		text-align:left;
	}
	
	.next {
		justify-content:flex-end;
		a {
			justify-content: flex-end;
		}
	}
	
}

/* ==========================================================================
#Product Detail Images Container
========================================================================== */

.product-detail-image-container {
	margin-bottom: 20px;
}

@include media-query($medium-up) {
	.product-detail-image-container {
		margin-bottom: 0px;

		.product-detail-primary-images {
			width: 100%;
		}

		.product-detail-secondary-images {
			width:100%;

			.product-image-thumbnail-wrapper {
				padding:0;
				width: 32%;

				&:nth-child(1) {
					display: none;
				}

				&:nth-child(2), &:nth-child(3) {
					width: 49%;
				}

			}

			.row {
				margin-left:0;
				margin-right:0;
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;
				justify-content: space-between;
				
			}

			.product-detail-thumbnails {
				//margin-top:-3px;

				&:after {
					content: "";
					width: 32%;
				}
			}

			.product-image-thumbnail {
				padding: 10px 0 0;

				@include media-query($widescreen-ultra) {
					padding: 13px 0 0;
				}
			}
		}

	}
}

/* ==========================================================================
#Product Detail Images
========================================================================== */

//Prevent initial flash of images.
.product-detail-images {
	
	.product-image {
		display:none;
		position: relative;

		@include media-query($large-up) {
			//padding:0 5px 0;
		}
		
		&:first-of-type {
			display:block;
		}
	}
	
	img {
		margin: 0 auto;
	}

	.product-wishlist {
		cursor: pointer;
		position: absolute;
		top: 15px;
		right: 15px;
		height: auto !important;

		@include media-query($medium-up) {
			display: none;
		}

        .smartwishlist {
            display:block;
            width: 20px;
            height: 20px;

            &.unbookmarked {
                background-image: url('{{ 'icon-wishlist.svg' | asset_url }}');
                background-repeat: no-repeat;
                background-size: contain;
            }

            &.bookmarked {
                background-image: url('{{ 'icon-wishlist-added.svg' | asset_url }}');
                background-repeat: no-repeat;
                background-size: contain;
            }

            > span {
                display:none;
            }
        }
	}
}

/* ==========================================================================
#Product Detail Images Thumbnails
========================================================================== */

.product-detail-thumbnails {
	.product-image-thumbnail {
		//cursor:pointer;

		
		&:focus {
			outline:none;
		}
		
		img {
			margin: 0 auto;
			display: block;
		}
	}
}

/* ==========================================================================
#Slick Arrows
========================================================================== */

body.template-product, .quickview-product-details {
	.slick-arrow {
		position: absolute;
		top:50%;
		transform:translateY(-50%);
		display:block;
		width: 40px;
		height: 180px;
		background-color: transparent;
		border:none;
		-webkit-appearance: none;
		border-radius:0;
		cursor: pointer;
		padding:5px 0;
		text-align: center;
		z-index:3;
		
		&:focus {
			outline:0;
		}

		svg {
			display: inline-block;
			fill:$title-font-color;
			width:30px;
			height:30px;
		}
	}

	.slick-arrow.slick-prev {
		left:0px;

		@include media-query($large-up) {
			left:5px;
		}
	}

	.slick-arrow.slick-next {
		right:0px;

		@include media-query($large-up) {
			right:5px;
		}
	}
}

.quickview-product-details {
	.slick-arrow {
		width: 40px;
		height: 120px;
	}
}

body.template-product .product-detail-thumbnails {
	.slick-arrow {
		width: 30px;
		height: 100%;
		background-color:rgba($brand-secondary,.8);

		&:hover {
			background-color:rgba($brand-secondary,1);
		}

		svg {
			width:20px;
			height:20px;
		}
	}
	
	.slick-arrow.slick-prev {
		left:15px;

		@include media-query($large-up) {
			left: 15px;
			top: -13px;
			width: 25px;
			height: 54px;
			transform: rotate(90deg);
			background-color: rgba($brand-secondary,.8);
			transition:all .3s ease-in-out;

			svg {
				margin-bottom:-2px;
			}

			&:hover {
				background-color: rgba($brand-secondary,1);
			}
		}

		@include media-query($widescreen) {
			left: 22px;
			top: -19px;
			width: 23px;
    		height: 66px;
		}

		@include media-query($widescreen-ultra) {
			left: 30px;
			top: -27px;
			width: 25px;
			height: 83px;
		}
	}

	.slick-arrow.slick-next {
		right:15px;

		@include media-query($large-up) {
			right: 14px;
			top:auto;
			bottom: -5px;
			width: 28px;
			height: 53px;
			transform: rotate(90deg);
			background-color: rgba($brand-secondary,.8);
			transition:all .3s ease-in-out;

			svg {
				margin-bottom:-2px;
			}

			&:hover {
				background-color: rgba($brand-secondary,1);
			}
		}

		@include media-query($widescreen) {
			right: 21px;
			top: auto;
			bottom: -14px;
			width: 25px;
			height: 66px;
		}

		@include media-query($widescreen-ultra) {
			right: 30px;
			top:auto;
			bottom: -23px;
			width: 25px;
			height: 83px;
		}
	}
}

/* ==========================================================================
#Slick Dots
========================================================================== */

.template-product, .product-quickview-frame {
	.slick-dots {
		display: flex;
		flex-direction: row;
		width: 100%;
		justify-content: center;
		list-style:none;
		margin: 0 0 25px;
		padding: 0;
		text-align: center;
		position: absolute;
		bottom: 0px;

		@include  media-query($medium-up) {
			display: none !important;
		}
		
		li {
			display:inline-block;
			margin-right: 20px;

			&:last-of-type {
				margin: 0px;
			}
		}
		
		.slick-active button {
			background-color: #000;
		}
		
		button {
			display:block;
			width:10.5px;
			height:10.5px;
			-webkit-appearance: none;
			border-radius: 50%;
			border:0;
			background-color: transparent;
			border:1px solid #000;
			text-indent:-9999px;
			cursor: pointer;
			padding: 0px;
			
			&:focus {
				outline:0;
			}
		}
	}
}

.product-quickview-frame .slick-slider .slick-dots {
	position: absolute;
	bottom:0;
	left:0;
	width:100%;

	button {
		height:15px;
		width:15px;
		background-color: #fff;
	}
}

/* ==========================================================================
#newInTag
========================================================================== */

.newInTag {
	text-transform: uppercase;
	font-size: 12px;
	line-height: 12px;
	letter-spacing: 1px;
	margin-bottom: 15px;
	text-align: center;

	@include media-query($medium-up) {
		margin-bottom: 20px;
		text-align: left;
	}

}

/* ==========================================================================
#Product Title
========================================================================== */

.product-title {
	margin-bottom: 15px;
	margin-top: 0px;
	font-size: 22px;
	line-height: 22px;
	text-align:center;
	letter-spacing:1px;
	text-transform: uppercase;

	@include media-query($medium-up){
		text-align: left;
		margin-top: 0px;
		margin-bottom: 20px;
	}
}

/* ==========================================================================
#Product Vendor
========================================================================== */

body.template-product .product-detail-container {
	.product-vendor {
		font-size:1.75rem;
		font-weight: 700;
		color:$title-font-color;
		text-transform: uppercase;
		margin-bottom: 0;


		@include media-query($medium-up) {
			margin-top: 2rem;
			font-size:1.875rem;
		}

		@include media-query($large-up) {
			font-size:2.25rem;
		}
	}
}
/* ==========================================================================
#Product Price
========================================================================== */

.product-detail-price-wrapper {
	margin-bottom: 0rem;
	text-align:center;
	
	@include media-query($medium-up) {
		margin-bottom: 20px;
		text-align: left;
	}
}

.product-detail-price {
	color: #000;
	font-size: 22px;
	line-height: 22px;
	letter-spacing: 1px;
}

.product-price-original {
	color: #000;
	font-size: 22px;
	line-height: 22px;
	letter-spacing: 1px;

	span {
		text-decoration: line-through !important;
	}
}

/* ==========================================================================
#Product SKU
========================================================================== */

.variant-sku {
	width: 100%;
	text-align: center;
	font-size: 12px;
	letter-spacing: 0.5px;
	display: block;
	line-height: 12px;
	margin-bottom: 15px;
	text-transform: uppercase;

	@include media-query($medium-up) {
		text-align: left;
		margin-bottom: 20px;
	}
}

/* ==========================================================================
#Product Add to Basket
========================================================================== */

.product-add-to-basket {
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
	margin-bottom: 10px;

	@include media-query($large-up) {
		margin-bottom: 20px;
	}
	
	[type="submit"] {
		text-transform: uppercase;
		cursor:pointer;
		width: 100% !important;

		@include media-query($medium-up) {
			width:calc(100% - 60px) !important;
			margin-right:20px;
		}
	}
	
	button:disabled,
	button[disabled]{
		@extend .btn-disabled;
	}

	.emailAvail {
		text-transform: uppercase;
		cursor:pointer;
		width: 100% !important;
		display: none;

		@include media-query($medium-up) {
			width:calc(100% - 60px) !important;
			margin-right:20px;
		}
	}
}

.product-quickview-frame .btn-add-to-cart {
	width:100%;
}

/* ==========================================================================
#Product Swatch
========================================================================== */

.variant-size {
	margin-top: 20px;
	margin-bottom: 10px;

	@include media-query($medium-up) {
		margin-top: 0px;
		margin-bottom: 20px;
	}

	.swatch-header {
		display: none;
	}

	select {
		font-size: 12px;
		border: 1px solid #000;
		//max-width: 110px;
		padding: 0 30px 0 20px;
		width: auto;
		background: {
			image: url({{ "dropdown_arrow_1px.svg" | asset_url }});
			repeat: no-repeat;
			position: right 12px center;
		}
	}
}

/* ==========================================================================
#Product Dynamic Checkout
========================================================================== */

.shopify-payment-button__button {
	height:40px;
	min-height:40px;

	&.shopify-payment-button__button--unbranded {
		border-radius:0 !important;
		display:none !important;
	}
}

.shopify-payment-button__button--unbranded + .shopify-payment-button__more-options {
	display:none !important;
}

.shopify-payment-button__more-options {
	margin-bottom: 1rem;
	margin-top: 1.5rem;
	font-size:0.875rem !important;
	text-transform:uppercase !important;
}

/* ==========================================================================
#Product Quantity
========================================================================== */

.product-quantity-container {
	display:none;
	
	.product-quantity {
		width:60px;
		text-align:center;
	}
	
	.quantity-controls {
		display:none;
		flex-direction:column;
		justify-content: space-between;
		width:25px;
		margin-left: 5px;
		
		@include media-query($medium-up) {
			display:flex;
		}
	}
	
	.quantity-increase, .quantity-decrease {
		display:flex !important;
		flex-direction:row;
		justify-content: center;
		align-items: center;
		display:block;
		border:1px solid $gray-300;
		width:17.5px;
		height:17.5px;
		
		@include media-query($large-up) {
			width:22.5px;
			height:22.5px;
		}
		
		.icon {
			fill:$gray-600;
			width:10px;
			height:10px;
			
			@include media-query($large-up) {
				width:15px;
				height:15px;
			}
		}
	}
}

/* ==========================================================================
#Product Countdown
========================================================================== */

#product-countdown-timer {
	border-top:1px solid $brand-primary;
	//border-bottom:1px solid $brand-primary;
	padding:1rem 0 0;

	#product-countdown {
		display:flex;
		flex-direction:row;
		flex-wrap:wrap;
		justify-content:center;
		align-items:center;
		padding:1rem 0;

		> div {
			span {
				display:block;
				width:100%;
				text-align:center;
			}

			& + div {
				margin-left:1.5rem;
			}
		}
	}

	.hours, .minutes, .seconds {
		font-size:1.125rem;
		font-weight:600;
		letter-spacing:3px;
	}

	.smalltext, p {
		text-transform:uppercase;
		font-size:0.75rem;
		font-weight:300;
		letter-spacing:1px;
	}

	p {
		margin:0;
		text-align:center;
	}
}

/* ==========================================================================
#Product Wishlist App
========================================================================== */

.product-add-to-basket {
	.product-wishlist {
		cursor: pointer;
		position: relative;
		height: auto !important;
		display: none;
		padding: 9px;
		border: 1px solid #000;
		border-radius: 50%;
	
		@include media-query($medium-up) {
			display: block;
		}
	
		.smartwishlist {
			display:block;
			width: 20px;
			height: 20px;
			margin-left: 0 !important;
	
			&.unbookmarked {
				background-image: url('{{ 'icon-wishlist-1px.svg' | asset_url }}');
				background-repeat: no-repeat;
				background-size: contain;
			}
	
			&.bookmarked {
				background-image: url('{{ 'icon-wishlist-added.svg' | asset_url }}');
				background-repeat: no-repeat;
				background-size: contain;
			}
	
			> span {
				display:none;
			}
		}
	}
}

/* ==========================================================================
#Product Add to basket ajax
========================================================================== */

.ajaxified-cart-feedback, .ajaxfeedback {
	display:block;
	width:100%;
	padding:.5rem;
	margin:1rem 0;
	order:3;
	
	&.success {
		background-color:$success;
		color:$successText;
		border-left:3px solid $successText;
	}
	
	&.error {
		background-color:$danger;
		color:$dangerText;
		border-left:3px solid $dangerText;
	}
}

.btn-adding {
	
	.icon {
		margin-left: 1rem;
		-webkit-animation:spin 2s linear infinite;
    	-moz-animation:spin 2s linear infinite;
		animation:spin 2s linear infinite;
		margin-top: -3px;
	}
}

.btn-added {
	background-color: $successBtn !important;
	color:#fff !important;
	border-color: $successBtn !important;
	padding-left:2rem;
	padding-right:2rem;
	
	span {
		display:flex;
		flex-direction:row;
		justify-content: center;
		
		.icon {
			margin-left: 1rem;
			order:1;
			margin-top: -3px;
		}
	}
}

@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }

/* ==========================================================================
#Product Assurance
========================================================================== */

.product-assurance {
	border-bottom:1px solid $gray-300;
	border-top:1px solid $gray-300;
	margin-top: 2rem;
	padding-top: 1.3rem;
	padding-bottom: 1.3rem;
	text-align:center;

	.title {
		font-weight:600;
		font-size:1.125rem;
	}
	
	p {
		margin-bottom: 0;
		font-size:0.875rem;
		text-transform: uppercase;
		letter-spacing:1px;
	}
}


/* ==========================================================================
#Accordion
========================================================================== */


.accordion-container {
	margin-top: 20px;
	
	@include media-query($medium-up) {
		margin-top: 26px;
	}
	
	.plus-minus-icon {
		display:block;
		margin-left: auto;
		margin-right: .5rem;
		
		@include media-query($medium-up) {
			height:12px;
			width:12px;
		}
		
		&:before, &:after {
			background-color: $brand-primary;
			
			@include media-query($medium-up) {
				height:12px;
				width:1px;
			}
		}
	}
	
	.accordion-item {
		&.active {
			.plus-minus-icon {
				&:before, &:after {
					-webkit-transform: rotate(90deg);
					transform: rotate(90deg);
				}
			}
			
			.accordion-title {
				.arrow {
					transform: rotate(180deg);
					transition: all .3s linear;
				}
			}
		}
	}
	
	.accordion-title {
		display:flex;
		flex-direction:row;
		justify-content: space-between;
		padding:1rem 0;
		cursor: pointer;
		font-size: 20px;
		line-height: 24px;
		align-items: center;

		.arrow {
			width: 10.5px;
			height: 10.5px;
			transition: all .3s linear;

			svg {
				width: 100%;
				height: 100%;
				vertical-align: top;
			}
		}

		h3 {
			font-size: 20px;
			line-height: 24px;
		}
	}
	
	.accordion-content {
		display:none;
		padding-top: 0rem;
		padding-bottom: 10px;

		.rte {
			margin-bottom: 0rem;
			font-size: 14px;
			line-height: 20px;
			letter-spacing: 0.5px;

			* {
				font-size: 14px;
				line-height: 20px;
				letter-spacing: 0.5px;
				margin: 0px;
			}
		}
	}
	
	h3 {
		margin-top: 0;
		margin-bottom: 0;
		font-size:1rem;
		font-weight:300;
		letter-spacing:2px;
	}
	
}



/* ==========================================================================
#Product Featured Details
========================================================================== */

.product-featured-details {
	margin-top: 2rem;
	
	& + .product-featured-details {
		padding-top: 2rem;
		border-top:1px solid $gray-300;
	}
	
	h3 {
		@extend .h4;
		margin: 0;
		margin-bottom: .5rem;
		font-weight: 300;
		color:$brand-primary;
	}
	
	.rte {
		font-weight:300;
	}
}

/* ==========================================================================
#Product Shipping
========================================================================== */

.shipping-bg {
    background-color:$brand-primary;
    padding:1rem;
    margin-top:1.5rem;

    h3 {
        @include px-to-rem(20);
        margin-top:0;
    }

    p,a,span {
        @include px-to-rem(14);

        &::last-of-type {
            margin-bottom: 0;
        }
    }
}

/* ==========================================================================
#Product Reviews
========================================================================== */

.product-reviews {
	background-color:$gray-100;
	padding:1rem;
	margin-top:1rem;

	@include media-query($medium-up) {
		padding:2rem;
	}

	.spr-container {
		padding:0;
		border:none;
		text-align:center;
	}
}

.spr-summary {
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
	justify-content:center;
	align-items:center;

	&:before, &:after {
		display:none !important;
	}

	.spr-starrating {
		order:2;
	}

	.spr-summary-caption {
		order:1;
		margin-right:1.5rem;
	}

	.spr-summary-actions {
		order:3;
		margin-left:1.5rem;
	}
}

.spr-review {
	border-top:1px solid $gray-200;

	.spr-review-header {
		display:flex;
		flex-direction:row;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;

		span, h3 {
			margin-bottom: 0;
		}

		.spr-starratings {
			margin-right:1.5rem;
		}

		.spr-review-header-title {
			order:3;
			width:100%;
			margin:.7rem 0;
			font-size:1.25rem;
			letter-spacing:3px;
			font-weight:400;
		}

	}

	.spr-review-content-body {
		font-size:0.75rem;
		line-height:2;
	}
}

.spr-review-header-byline {
	opacity:1 !important;
	font-style:normal !important;
	font-size: 0.75rem !important;
	letter-spacing:1px;

	strong {
		font-style:normal;
		font-weight:300;

		&:first-child {
			color:$brand-primary;
			font-weight:600;
		}
	}
}


.spr-starrating,.spr-starratings {

	.spr-icon-star {
		color:$brand-secondary;
	}

	.spr-icon + .spr-icon {
		margin-left: .5rem;
	}
}

.new-review-form {
	fieldset {

		&:after, &:before {
			display:none;
		}

		> div {
			width:100%;
			margin-bottom: 1.5rem;
		}

		label {
			display:block;
			text-align:left;
		}

		input[type="text"], input[type="email"], textarea {
			background-color: $gray-200;
		}

	}

	.spr-form-contact {
		> div {
			@include media-query($medium-up) {
				display:block;
				float:left;
				width:calc(50% - 15px);

				& + div {
					margin-left: 30px;
				}
			}
		}
	}
}

/* ==========================================================================
#Related Products
========================================================================== */

.related-products {

	h3 {
		text-align: left;
		width: 100%;
		display: block;
		font-size: 20px;
		line-height: 24px;
		letter-spacing: 1px;
		margin-top: 40px;
		margin-bottom: 24px;
	
		@include media-query($medium-up) {
			text-align: center;
			font-size: 24px;
			line-height: 29px;
			margin-top: 80px;
		}
	}

	.featured-product {
		padding: 0 15px !important;
	}

	.product-title {
		margin: 20px 0 !important;
		text-transform: capitalize;
	}

	.product-image {
		position: relative;

		.product-wishlist {
			cursor: pointer;
			position: absolute;
			top: 15px;
			right: 15px;
			height: auto !important;
	
			.smartwishlist {
				display:block;
				width: 20px;
				height: 20px;
	
				&.unbookmarked {
					background-image: url('{{ 'icon-wishlist.svg' | asset_url }}');
					background-repeat: no-repeat;
					background-size: contain;
				}
	
				&.bookmarked {
					background-image: url('{{ 'icon-wishlist-added.svg' | asset_url }}');
					background-repeat: no-repeat;
					background-size: contain;
				}
	
				> span {
					display:none;
				}
			}
		}
	}

	.slick-dots {
		position: relative;
		margin: 0px !important;

		li {
			margin-right: 10px;

			&:last-of-type {
				margin-right: 0px;
			}
		}

		button {
			height: 10px !important;
			padding: 0px;
			width: 10px !important;
		}

	}
}


/* ==========================================================================
#Recently Viewed Products
========================================================================== */

.product-recently-viewed-products {
	padding:1rem 0;
	
	@include media-query($medium-up) {
		padding:2rem 0;
	}
}

/* ==========================================================================
#Related Products Pro App
========================================================================== */

body.template-product .a1p_list-products {
	
	a {
		outline:0 !important;
		text-decoration: none;
	}
	
	.a1p-product-card:hover {
		.a1p-product-card__title > a {
			color:$brand-primary;
		}
	}
	
	.slick-arrow {
		position: absolute;
		top:42%;
		transform:translateY(-50%);
		display:block;
		width: 40px;
		height: 180px;
		background-color: transparent;
		border:none;
		-webkit-appearance: none;
		border-radius:0;
		cursor: pointer;
		padding:5px 0;
		text-align: center;
		z-index:3;
		
		@include media-query($small) {
			top:35%;
		}

		@include media-query($medium) {
			top:32%;
		}
		
		@include media-query($large) {
			top:30%;
		}

		@include media-query($widescreen) {
			top:35%;
		}
		
		&:focus {
			outline:0;
		}

		svg {
			display: inline-block;
			fill:$title-font-color;
			width:30px;
			height:30px;
		}
	}

	.slick-arrow.slick-prev {
		left:15px;
		@include media-query($medium-up) {
			//transform: translateX(-50%);
		}
	}

	.slick-arrow.slick-next {
		right:15px;
		@include media-query($medium-up) {
			//transform: translateX(50%);
		}
	}

	.slick-dots {
		display:block !important;
		list-style:none;
		margin: 3rem 0 0;
		padding: 0;
		text-align: center;
		
		li {
			display:inline-block;
			
			& + li {
				margin-left: .5rem;
			}
		}
		
		.slick-active button {
			background-color: #000;
		}
		
		button {
			display:block;
			width:16px;
			height:16px;
			-webkit-appearance: none;
			border-radius: 50%;
			border:0;
			background-color: #fff;
			border:1px solid #000;
			text-indent:-9999px;
			cursor: pointer;
			
			&:focus {
				outline:0;
			}
		}
	}
}

/* ==========================================================================
#Product Colors App
========================================================================== */

div[id*="webyze-product-colors-"] {
	width:100% !important;
	padding:0px !important;
	display:flex !important;
	flex-direction:row;
	flex-wrap:wrap;
	justify-content: center;

	.product-colour-title {
		width:100%;
		text-align:center;
		font-size:1.125rem;
		font-weight:300;
		letter-spacing:3px;
	}

	.product-colour-variant {
		font-style:italic;
		text-transform:uppercase;
		margin-left: .5rem;
		font-weight:300;
	}

	.swatchProductColor {
		border-radius:0 !important;
		box-shadow:0px 0px 0px #ffffff !important;
		border:1px solid transparent !important;
		padding:3px !important;
		margin:5px !important;
		width:23px !important;
		height:23px !important;

		> div {
			width:23px !important;
			height:23px !important;
		}

		&.currentSwatch {
			border-color:#000 !important;
		}
	}

	&:before {
		display:none !important;
	}
}

/* ==========================================================================
#Product notify back in stock app
========================================================================== */
.BIS_trigger {
	display:none !important;
}
/* Table of Contents
==================================================

	#Basket Item
	#Basket Sidebar
	#Basket Checkout
	#Ajax Feedback
	#Payment Icons

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


/* ==========================================================================
#Basket Item
========================================================================== */

.basket-item {
	display:flex;
	flex-direction:column;
	padding:1.5rem 0;
	border-bottom:1px solid $gray-800;

	&:first-child {
		border-top:1px solid $gray-800;
	}

	@include media-query($medium-up) {
		flex-direction:row;
		padding:2rem 0;
	}

	.basket-item-image {
		display:flex;
		flex-direction:column;
		justify-content: center;
		@include media-query($medium-up) {
			width:35%;
		}

		@include media-query($large-up) {
			width:20%;
		}
	}

	.basket-item-details {
		display:flex;
		flex-direction:column;
		justify-content: flex-start;
		margin-top: 20px;
		

		@include media-query($medium-up) {
			width:calc(55% - 1rem);
			margin-left: 1rem;
			margin-top: 0px;
		}

		@include media-query($large-up) {
			width:calc(70% - 1rem);
		}
	}

	.basket-actions {
		
		@include media-query($medium-down) {
			margin-top: 1rem;
		}

		@include media-query($medium-up) {
			text-align:right;
			width:10%;
		}

		a {
			display:inline-block;
			padding:.3rem .75rem;
			border:1px solid #000;
			@include px-to-rem(12);
			text-transform:uppercase;
			color:#000;
			text-decoration: none;
			transition:all .3s ease-in-out;

			&:hover {
				background-color: #000;
				color:#fff;
				transition:all .3s ease-in-out;
			}
		}
	}

	.product-title {
		text-align: left;
		margin-bottom: 5px;
	}

	.product-sku {
		@include px-to-rem(13);
		color: #000;
		margin-bottom: 10px;
		text-transform: uppercase;
		font-size: 12px;
		letter-spacing: 0.5px;
	}

	.product-variant {
		margin-bottom: 10px;
	}

	.product-quantity {
		display:flex;
		flex-direction:row;
		align-items: center;
		margin-bottom: 10px;

		.label {
			display:inline-block;
			margin-right:.5rem;
		}

		select {
			display:inline-block;
			padding-left:1rem;
			padding-right: calc(1.5rem + 10px);
			width:auto !important;
			border: 1px solid #000;
		}
	}

}

/* ==========================================================================
#Basket Sidebar
========================================================================== */

.basket-sidebar {
	@include media-query($medium-down) {
		//margin-top:2rem;
	}
}

.basket-sidebar-section {

	& + .basket-sidebar-section {
		margin-top:1rem;
	}

	h4 {
		@include px-to-rem(16);
		text-transform:uppercase;
		border-bottom:1px solid #000;
		padding-bottom: .3rem;
	}

	.content {
		padding:.5rem 0;
	}
}

/* ==========================================================================
#Basket Checkout
========================================================================== */

.basket-checkout {
	border:1px solid #000;
	padding:1.5rem;
	text-align:center;
	margin-bottom:2rem;
	margin-top: 2rem;

	@include media-query($large-up) {
		margin-top: 0rem;
	}
	
	.basket-total {
		display:flex;
		flex-direction:row;
		align-items:center;
		justify-content: center;
		margin-bottom:1rem;

		> span {
			text-transform:uppercase;
			margin-right:.5rem;
			font-size: 16px !important;
			letter-spacing: 1px;
		}

		.basket-total-value {
			margin: 0px;
		}

		.basket-total-value > span {
			font-size: 16px !important;
			color:$title-font-color;
			letter-spacing: 1px;
			margin: 0px;
		}
	}
}

/* ==========================================================================
#Ajax Feedback
========================================================================== */

.ajaxFeedbackCart {
	display:inline-block;
	padding:.5rem;
    margin-left: 1rem;
    
    &.variant-status {
        display:flex;
        flex-direction: row;
        align-items:center;
        margin-left:0;
        margin-top:1rem;
        margin-bottom:1.5rem;

        span,a {
            @include px-to-rem(14);
        }
    }

	&.success {
		background-color:$success;
		color:$successText;
		border-left:3px solid $successText;
	}
	
	&.warning {
		background-color:$warning;
		color:$warningText;
		border-left:3px solid $warningText;
    }

    svg {
        display:inline-block;
        width:40px;
        height:40px;
        margin-right:.5rem;

        .st1 {
            fill:transparent;
        }
    }
    
    a {
        text-decoration: underline;
        color:inherit;
    }
}

/* ==========================================================================
#Payment Icons
========================================================================== */

.payment-icons {
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
	align-items: center;
	justify-content: center;
	list-style:none;
	padding:0;
	margin:0;

	li {
		margin:.3rem;
	}
}

.featured-images.slick-slide {
    height: auto !important;
}      
/* Table of Contents
==================================================

    #Login Forms
    #Login Register
    #Login Exisiting
    #Login Errors
	#Login Sucess

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


/* ==========================================================================
#Login Forms
========================================================================== */

body.template-login .form-group {
	> input, select {
		width:100%;
	}
	
	input[type="submit"] {
		width:auto;
	}
}


/* ==========================================================================
#Login Register
========================================================================== */

.login-register {
	height:100%;
	background-color: $gray-100;
	padding:1rem;
	
	h2 {
		margin-top: 0;
	}
}

/* ==========================================================================
#Login Exisiting
========================================================================== */

.login-exisiting {
	height:100%;
	background-color: $gray-100;
	padding:1rem;
	
	h2 {
		margin-top: 0;
	}
}

#RecoverPassword {
	color:$brand-secondary;
}


/* ==========================================================================
#Login Errors
========================================================================== */

.errors {
	
	background-color: $danger;
	border-left:3px solid $dangerText;
	padding:.5rem;
	margin-bottom: 1rem;
	
	ul {
		list-style:none;
		margin: 0;
		padding: 0;
	}
	
	li {
		color:$dangerText;
	}
}

/* ==========================================================================
#Login Success
========================================================================== */

.form-success {
	background-color: $success;
	border-left:3px solid $successText;
	padding:.5rem;
	margin-bottom: 1rem;
	color:$successText;
}
/* Table of Contents
==================================================

    #Register

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


/* ==========================================================================
#Register
========================================================================== */

.register-account {
	background-color: $gray-100;
	padding:1rem;
	
	.form-group > * {
		width:100%;
	}
}
/* Table of Contents
==================================================

	#My Account
	#Order Products
	#Table Order History

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

/* ==========================================================================
#My Account
========================================================================== */
.template-account, .template-addresses {

	.account-my-orders {
		display:none;
	}

	a[class*="account-my"] {
		display:flex;
		flex-direction:column;
		justify-content: flex-end;
		align-items: center;
		height:200px;
		width:100%;
		text-decoration: none;
		padding-bottom:30%;

		&.active {
			border:2px solid #000;
		}

		&:hover {
			color:$brand-secondary;
			text-decoration: underline;
		}

		@include media-query($medium-up) {
			height:300px;
		}

		.account-icon {
			margin-bottom: 1rem;
		}

		.account-icon {
			max-width:50px;
			display:block;
		}

		svg {
			fill:auto;
			stroke:auto;

			g {
				fill:auto;
				stroke:auto;
			}
		}

		.title {
			font-size:1.25rem;
			letter-spacing:3px;
		}
	}
}

/* ==========================================================================
#Order Products
========================================================================== */

.order-products {
	display:flex;
	flex-direction:row;
	align-items:stretch;
	width:100%;

	@include media-query($medium-down) {
		flex-wrap:wrap;
		margin-left:-15px;
		margin-right:-15px;
	}
	
	a {
		text-decoration: none;

		@include media-query($medium-up) {
			& + a {
				margin-left: .5rem;
			}
		}
	}

	@include media-query($medium-down) {
		> * {
			width:50%;
			padding-left:15px;
			padding-bottom: 15px;
		}
	}

	.remaning-order-count {
		display:flex;
		flex-direction:column;
		justify-content: center;
		align-items: center;
		width:50%;
		padding-left:15px;

		@include media-query($medium-up) {
			width:205px;
			margin-left: .5rem;
		}

		span {
			font-size:3rem;
		}
	}
}

.order-statuses {
	@include media-query($medium-down) {
		h3 {
			display:inline-block;
			font-size:1rem;
		}
	}

}

.account-my-orders {
	> .row {
		margin-bottom: 2em;
		padding-top:1rem;
		border-top:1px solid #dbdbdb;

		@include media-query($medium-up) {
			margin-bottom: 3rem;
		}
	}
}

/* ==========================================================================
#Table Order History
========================================================================== */

#table-order-history {
	
	@include media-query($medium-up) {
		td,th {
			width:20%;
		}
	}
}
/* Table of Contents
==================================================

    #Customer Address

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


/* ==========================================================================
#Customer Address
========================================================================== */

.customer-address {
	& + .customer-address {
		border-top:1px solid $gray-300;
		margin-top: 1rem;
		padding-top: 1rem;
	}
}
/* Table of Contents
==================================================

    #Categories
    #Blog Listing
    #Pagination

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


/* ==========================================================================
#Categories
========================================================================== */

.categories-sidebar {
	padding: 0px;
	height:100%;
}

.template-blog .categories-title {
	@include media-query($large-up) {
		display:none;
	}
}

.categories-title {
	display:flex;
	flex-direction: row;
	align-items: center;
	margin-top:1rem;
	margin-bottom:0;
	padding-bottom: 1rem;

	@include media-query($large-up) {
		display: none;
	}
	
	@include media-query($large-down) {
		cursor:pointer;
	}
	
	.arrow {
		margin-left: auto;
		transition: all .3s linear;
	}

	&.active {
		.arrow {
			transform: rotate(90deg);
			transition: all .3s linear;
		}
	}
}

.categories-links {
	display:none;
	list-style:none;
	padding:0;
	margin:0 0 1rem;
	
	@include media-query($large-up) {
		display:block;
	}
	

	.tag-link {
		@extend .btn;
		@extend .btn-primary;
		display:block;
	}

	li {
		&:last-of-type {
			a {
				border-bottom: 0px;
			}
		}
	}

	a {
		display: block;
		padding: 10px 0;
		border-bottom: 1px solid #000;
		text-transform: capitalize;
	}
}

body.template-article {
	.sidebar-title {
		@include media-query($large-up) {
			display:none;
		}
	}
}


/* ==========================================================================
#Blog Listing
========================================================================== */

.blog-listing {
	margin-bottom: 1.5rem;

	@include media-query($medium-up) {
		margin-bottom: 2.5rem;
	}
	
	header {
		margin-bottom: 0;

			h3 {
			margin-top: 0;
			margin-bottom: 0;
			text-align: center;
			
			> a {
				font-size: 24px;
				line-height: 29px;
				color: #000;
				text-decoration: none;
				letter-spacing:1px;

				&:hover {
					color: $brand-secondary;
				}
			}
		}
	}
	
	footer {
		margin: 0;
		margin-top: 20px;
		padding: 0;
		text-align:center;
		font-size: 16px;
		line-height: 21px;
		letter-spacing: 1px;
	}

	.blog-read-more {
		width: 100%;
		display: block;
		margin-top: 20px;

		a {
			width: 100%;
			display: block;
			font-size: 14px !important;
		}
	}
	
	.blog-listing-content {
		display:flex;
		flex-direction:column;
		padding:1.5rem 0 0;

		.rte, .rte p {
			font-size:0.75rem;
			line-height:1.8;
		}
	}

	ul {
		margin: 0;
		padding: 0;
	}
	
	.image-placeholder {
		border:1px solid $gray-400;
	}
	
	.read-more {
		margin-top: auto;
		color: $brand-primary;
	}
	
}

/* ==========================================================================
#Blog Tags
========================================================================== */

.blog-tags {
	margin-bottom:1.5rem;

	@include media-query($medium-up) {
		margin-bottom:3rem;
	}

	ul {
		display:flex;
		flex-direction:row;
		flex-wrap:wrap;
		justify-content: center;
		align-items: center;
		list-style:none;
		margin:0;
		padding: 0;
	}

	li {
		margin-bottom: 10px;
		font-size: 14px;
		line-height: 14px;

		& + li {
			margin-left: 10px;
		}
	}

	a {
		display:block;
		text-decoration: none;
		padding: 10px 20px !important;
		font-size: 14px !important;
	}

	.btn.active {
		background-color: $brand-secondary;
		color: #000000;
	}
}

/* ==========================================================================
#Pagination
========================================================================== */

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

	span {
		display: inline-block;
		list-style:none;
		padding:0;
		margin:0;
		background-color: #fff;
		color: $brand-primary;
		font-weight: 400;
		border: 1px solid $gray-300;
		height:35px;
		width:35px;
		line-height: 35px;
		text-align: center;
		transition: all .3s ease-in-out;
		
		& + span {
			margin-left: .5rem;
		}
		
		&.next, &.prev {
			width:auto;
			padding:0 .5rem;
		}
		
		&:hover {
			background-color: $brand-secondary;
			border-color: $brand-secondary;
			color:#fff;
			
			> * {
				color:#fff;
				text-decoration: none;
			}
		}

		&.current {
			background-color: $brand-primary;
			border-color:$brand-primary;
			color: #fff;
		}
	}
}
/* Table of Contents
==================================================

    #Article
    #Article Tags
    #Article Social Share

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


/* ==========================================================================
#Article
========================================================================== */


body.template-article article {
	
	header {
		margin-bottom: 1rem;
		
		> h1 {
			margin: 0;
			text-align: center;
		}
		
		> P {
			font-size:0.875rem;
			font-style: italic;
		}

		> time {
			display: inline-block;
			margin-top: 20px;
			text-align: center;
			font-size: 16px;
			line-height: 21px;
			width: 100%;
		}
	}
	
}

/* ==========================================================================
#Article Tags
========================================================================== */

.article-tags {
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
	align-items: center;
	margin:1rem 0;
	padding: 1rem 0;
	border-top:1px solid $gray-300;
	border-bottom:1px solid $gray-300;
	
	h3 {
		font-size:$font-size-base;
		margin: 0;
		padding: 0;
	}
	
	ul {
		list-style:none;
		margin: 0 0 0 1rem;
		padding: 0;
	}
	
	li {
		display:inline-block;
		margin:.3rem;
	}
}

/* ==========================================================================
#Article Social Share
========================================================================== */

.article-sharing {
	margin:1.5rem 0 1rem;
	
	h3 {
		margin: 0 0 .5rem 0;
		padding: 0;
	}
	
	.social-sharing {
		text-align: left;
	}
	
	a + a {
		margin-left: 1rem;
	}
	
	a {
		color:$body-font-color;
	}
	
	.icon-facebook {
		fill:#3b5998;
	}
	
	.icon-twitter {
		fill:#1da1f2;
	}
	
	.icon-pinterest {
		fill:#bd081c;
	}
}
/* Table of Contents
==================================================

    #Order Details
    #Product Single
    #Order Total

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


/* ==========================================================================
#Order Details
========================================================================== */

.order-details {
    h3 {
        display:inline-block;
        
        @include media-query($medium-up) {
            width:40%;
        }
    }

    span {
        display:inline-block;

        @include media-query($medium-up) {
            width:45%;
        }
    }
}

/* ==========================================================================
#Product Single
========================================================================== */

.template-order {
    .product-single {
        .product-title {
            text-align:left;
            padding-bottom:.5rem;

            a {
                text-decoration: none;
            }
        }

        .product-variant {
            font-size:0.875rem;
            font-weight:300;
            letter-spacing:1px;
            text-transform:uppercase;
            padding-bottom:.5rem;
        }

        .product-price {
            font-size:1.125rem;
            font-weight:300;
            margin-top:0.3rem;
            letter-spacing:3px;

            .product-price-original {
                margin-left: .5rem;
            }
        }
    }
}

/* ==========================================================================
#Order Total
========================================================================== */

.order-price-breakdown {
    h3 {
        margin: .5rem 0;
        font-weight:400;
    }

    .money {
        font-size:1.25rem !important;
        font-weight:400 !important;
        letter-spacing:3px !important;
    }
}
/* Table of Contents
==================================================

    #Opening Times Template
    #Delivery Map Template
    #Page Image Template

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


/* ==========================================================================
#Opening Times Template
========================================================================== */

#shop-opening-hours {

    h2 {
        margin:.5rem 0 1.5rem;
    }

    .opening-times {
        letter-spacing:2px;
        margin-bottom: 1rem;
        font-size: 0.875rem;
    }
}

/* ==========================================================================
#Delivery Map Template
========================================================================== */

#delivery-amp-shipping {
    .delivery-shipping-row {
        + .delivery-shipping-row {
            margin-top: .5rem;
        }
        [class*="col"] p {
            display:block;
            background-color: $gray-100;
            padding:.5rem 1rem;
            font-size: 0.875rem;
            letter-spacing:2px;

            @include media-query($medium-up) {
                padding-left:1.5rem;
                padding-right:1.5rem;
            }
        }
    }
}

/* ==========================================================================
#Page Image Template
========================================================================== */

.template-page {

    .page-container {
        position: relative;
        overflow:hidden;
        padding:0;
    }

    .page-background {

        @include media-query($medium-down) {
            position: absolute;
            top:0;
            left:0;
            right:0;
            bottom:0;
        }

        .page-background-image {
            width:100%;
            height:100vh;
            background-size: cover;
            background-position: center center;

            @include media-query($medium-up) {
                width:100%;
                height:950px;
            }
        }
    }

    .page-content {
        @include media-query($medium-up) {
            position: absolute;
            top:0;
            left:0;
            right:0;
            margin:0 auto;
            z-index:2;
        }

        .bg-grey {
            @include media-query($medium-down) {
                background-color: rgba($gray-100,.9);
                padding:2rem;
            }

            @include media-query($medium-up) {
                padding:3rem;
            }
        }

    }
}
/* Table of Contents
==================================================

    #MainContent
    #Contact Form
    #Social Sharing
    #Button
    #Enter Using Password
    #Login
    #Footer

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


/* ==========================================================================
#MainContent
========================================================================== */

body.template-password {
    #MainContent {
        position: relative;

        h2 {
            margin-top:0;
        }
    }
}

/* ==========================================================================
#Contact Form
========================================================================== */

body.template-password {
    #contact_form {
        margin-bottom:1rem;

        label {
            display:none;
        }
    }
}

/* ==========================================================================
#Social Sharing
========================================================================== */

body.template-password {
    .social-sharing {
        a {
            margin-left:1rem;
            text-decoration: none;
        }
    }
}


/* ==========================================================================
#Button
========================================================================== */

body.template-password {
    .btn, button[type="submit"] {
        @extend .btn;
        @extend .btn-primary;
        margin-top:1rem;
    }
}

/* ==========================================================================
#Enter Using Password
========================================================================== */

body.template-password {
    a[href^="#Login"] {
        position: fixed;
        top:1rem;
        right:1rem;
    }
}

/* ==========================================================================
#Login
========================================================================== */

body.template-password {
    #Login-bg {
        display:none;
        opacity:0;
        visibility: hidden;
        position:fixed;
        top:0;
        right:0;
        left:0;
        bottom:0;
        background-color: rgba(#000,.6);
        z-index:1;
        transition:all .3s ease-in-out;

        &.active {
            display: block;
            opacity:1;
            visibility: visible;
        }
    }

    #Login {
        display:none;
        opacity:0;
        visibility: hidden;
        position: fixed;
        top:25%;
        left:0;
        right:0;
        margin-left:auto;
        margin-right:auto;
        padding:1rem;
        width:calc(100% - 30px);
        background-color: #fff;
        z-index:2;
        transition:all .3s ease-in-out;

        &.active {
            display:block;
            opacity:1;
            visibility: visible;
        }

        @include media-query($large-up) {
            width:40%;
            top:50%;
            transform:translateY(-50%);
        }

        @include media-query($widescreen) {
            width:30%;
        }

        h4, p {
            text-align:center;
        }

    }

    #login_form {
        text-align:center;
        label {
            display:none;
        }

        button[type="submit"] {
            margin-bottom:1.5rem;
        }
    }
}

/* ==========================================================================
#Footer
========================================================================== */

body.template-password {
    footer {
        a {
            display:flex;
            flex-direction:row;
            align-items: center;
            justify-content: center;
            text-decoration: none;
        }

        svg {
            fill:#000;
            width:100px;
            margin-left:.5rem;
        }
    }
}
/* Table of Contents
==================================================


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


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

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

.wishlisttitlecontainer {
	.btn {
		border: 1px solid #000 !important;
		background: #fff !important;
		transition: all .3s linear;
		9

		&:hover {
			background-color: $brand-secondary !important;
			border: 1px solid $brand-secondary !important;
		}
	}
}

.addbutton {
	background-color: #fff !important;
	border: 1px solid #000 !important;
	transition: all .3s linear;
	padding: 11px 10px !important;

	&:hover {
		background-color: $brand-secondary !important;
		border: 1px solid $brand-secondary !important;
	}
}

.removebutton {
	border: 1px solid #000 !important;
	transition: all .3s linear;
	padding: 11px 10px !important;

	&:hover {
		background-color: $brand-secondary !important;
		border: 1px solid $brand-secondary !important;
	}
}

/* ==========================================================================
#Sections
========================================================================== */
/* Table of Contents
==================================================
	
	#Headroom
	#Head Top Actions
    #Head Assurance
    #Site Logo
    #Site Header
    #Header Actions
    #Header Basket
    #Cart Content
    #Mobile Search Bar
	#Mobile Navigation Icon
	#Curreny Convertor App

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

/* ==========================================================================
#Headroom
========================================================================== */ 

#site-header {
	position: fixed;
	top: 0px;
	width: 100vw;
	z-index: 10;
	background-color: transparent;

	@include media-query($small-up) {
		width: 100%;
	}

	&.move {
		top: 27px;
	}

	&.InsidePage {
		background: #fff;
	}

	&.headroom--not-top {
		//will-change: transform;
		position: fixed;
		z-index: 15;
		right: 0;
		left: 0;
		top: 0;

		&:after {
			background: #fff;
			transition: all .3s linear;
		}
	}
	
	&.headroom {
		//transition: transform 200ms linear;
	}
	&.headroom--pinned {
		//transform: translateY(0%);
	}
	&.headroom--unpinned {
	}

	&.headroom--top {
		//transform:none !important;

		.search-bar {
			visibility: hidden;
			opacity: 0;
		}
	}

	&.top {
		top: 0px;
		transition: top .3s linear;

		&.headroom--not-top {
			transition: background-color .3s linear;
		}
	}

	&.top-already {
		top: 0px;
		transition: none;
	}

	&:before {
		display: none !important;
	}

	> .container-fluid {
		background-color: transparent;
		position: relative;
		//transition: all .3s linear;

		> .row {
			padding-top: 17px;
			margin: 0px;
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			position: relative;
			z-index: 15;

			@include media-query($large-up) {
				padding-top: 30px;
			}
		}

		.navheightOverlay {
			content: "";
			display: block;
			width: 100%;
			height: 0%;
			background-color: #fff;
			position: absolute;
			top: 0;
			left: 0;
			z-index: 10;
			transition: height .3s linear;

			&.scroll {
				transition: none;
			}
		}
	}

	&:after {
		content: "";
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0px;
		left: 0px;
		background-color: transparent;
		//transition: all .4s linear .05s;
	}
}

/* ==========================================================================
#Header Wrapper Widths
========================================================================== */ 

.currency-select {
	flex: 1;
	padding: 0;

	@include media-query($large-up) {
		padding: 0 15px;
		width: (100% / 3);
	}
}

.logo-wrapper {
	width: 100%;
	padding: 0;
	max-width: 137px;
	line-height: 0;

	@media only screen and (min-width: 333px) {
		max-width: 147px;
	}

	@include media-query($small-up) {
		max-width: 250px;
	}

	@include media-query($large-up) {
		padding: 0 15px;
		width: (100% / 3);
		max-width: none;
	}
}

.header-actions-wrapper {
	flex: 1;
	padding: 0 5px;

	@include media-query($large-up) {
		padding: 0 15px;
		width: (100% / 3);
	}
}

.navigation-wrapper {
	width: 100%;
	padding: 0 15px;
	position: relative;
}

/* ==========================================================================
#Head Top Actions
========================================================================== */ 

.head-top-actions {
	background: $brand-primary;
	position: fixed;
	top: 0;
	z-index: 10;
	width: 100%;
	height: 42px;
	visibility: visible;
	opacity: 1;
	display: none;
	transition: all .3s linear;

	&.show {
		display: block;
	}

	&.close {
		height: 0px;
		transition: all .3s linear;
		visibility: hidden;
		opacity: 0;
	}

	&.close-already {
		height: 0px;
		visibility: hidden;
		opacity: 0;
	}

	@media only screen and (min-width: 350px) {
		height: 27px;
	}

	@include media-query($small-up) {
		z-index: 10;
	}

	p {
		text-align: center;
		font-size: 12px;
		line-height: 15px;
		margin: 0px;
		padding: 6px 20px;
		letter-spacing: 1px;

		@include media-query($small-up) {
			padding: 6px 0;
		}

		a {
			font-size: 12px;
			line-height: 15px;
			cursor: pointer;
			display: inline-block !important;
			text-decoration: none;

			&:hover {
				color: #000;
				text-decoration: underline;
			}
		}
	}

	.close {
		position: absolute;
		right: 15px;
		top: 0px;
		cursor: pointer;
		opacity: 1;

		&:hover {
			opacity: 1;
		}
	}
}

/* ==========================================================================
#Head Assurance
========================================================================== */ 

.head-assurance {
    background-color: $brand-secondary;
    color:#fff;
    padding:.5rem 0;
    margin-bottom: 1rem;

    @include media-query($large-up) {
        padding:.7rem 0;
    }

    p {
        margin:0;
        text-transform: uppercase;
        font-weight:600;
        @extend .text-small;
        letter-spacing:2px;
    }
}


/* ==========================================================================
#Site Logo
========================================================================== */ 

.site-logo {
	margin-bottom: 0;
	position: relative;
    
    a {
        display:block;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
    }
	
	svg {
        width:100%;
        height:100%;
        max-width:274px;
        max-height:28px;
		fill: rbga(255,255,255,1);
		vertical-align: inherit;
		//transition: none;

		@include media-query($large-up) {
			transition: fill .4s linear;
		}

		path {
			//transition: none;
			fill: rbga(255,255,255,1);

			@include media-query($large-up) {
				transition: fill .4s linear;
			}
		}
	}

	img {
		@include media-query($large-up) {
			margin-top: -5px;
		}
	}
}

/* ==========================================================================
#Header Actions
========================================================================== */

.header-actions {
    display:flex;
    flex-direction:row;
	align-items: center;

    > [class^="header-"] {

        &.active:not(.header-mobile-menu) {
            

            .icon {
                
            }
        }
	}
	
	.header-wishlist {
		.wishlist-icon {
			display: none;

			> a {
				display: flex;
				flex-direction: row;
				text-decoration: none;

				.topbadge {
					align-self: center;
					color: #000 !important;
					background-color: transparent !important;
					border-radius: 0px !important;
					font-size: 16px;
					line-height: 18px;
					max-width: none !important;
					max-height: none !important;
					text-decoration: none !important;
					font-family: $body-font !important;
					font-weight: 100;
					padding: 0px !important;
					display: inline-block;
					margin: 0px !important;
					margin-left: 5px !important;

					&:before {
						content: "("
					}

					&:after {
						content: ")";
					}
				}
			}
		}
	}

	.header-account {

		.account-icon {
			display: none;
			width:20px;
			height:20px;

			> a {
				display: block;
				line-height: 20px;
			}
		}

		> a {
			position: relative;
			color: #fff;
			text-decoration: none;
			font-size: $font-size-base;
			line-height: 1;
			display: none;
			transition: all .4s linear;
			padding-top: 4px;

			@media only screen and (max-width: 1100px) {
				font-size: 14px;
			}

			@include media-query($large-up) {
				display: block;
			}
	
			.topbadge {
				position: absolute;
				bottom: -5px;
				right: -5px;
				padding: 0px !important;
				text-align: center;
				display: block;
				width: 15px;
				height: 15px;
				line-height: 17px;
				background-color: #ffffff !important;
				color: black !important;
				font-size: 10px;
				font-weight: 300;
			}
		}
	}

    .icon {
        transition:all .3s ease-in-out;
        width:20px;
		height:20px;
		fill: none;

        @include media-query($large-up) {
           
		}
		
		&.icon-account {
			stroke:#000;

			g {
				stroke-width: 1px;
			}
		}
		
		&.icon-Basket-icon {
            stroke:#000;
        }
        
        &.icon-Wishlist-icon {
            stroke: #000;
        }
    }
    
}

/* ==========================================================================
#Header Currency Selector
========================================================================== */

/* ==========================================================================
#Header Basket
========================================================================== */

.header-basket {
	display: block;
	position: relative;

	@include media-query($medium-up) {
		&:hover, &.hover {
			> .cart-mini-contents {
				transform: translateY(0);
				visibility: visible;
				opacity: 1;
				transition: all .3s ease-in-out;
			}
		}
	}
	
	a {
		text-decoration: none;
	}
	
	.cart-icon {
		position:relative;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		padding-left: 0px;

		@include media-query($small-up) {
			padding-left: 15px;
		}

		.shopping-bag {
			display: block;
			height: 20px;

			@include media-query($large-up) {
				display: none;
			}

			.icon-basket {
				stroke: #fff;
				transition: none;
				width: 20px;
				height: 20px;
				vertical-align: top;

				rect, path {
					stroke: #fff;
					stroke-width: 1px;
				}
			}
		}
	}

	.cart-title {
		font-size: $font-size-base;
		line-height: 1;
		color: #fff;
		padding: 4px 5px 0 15px;
		border-left: 1px solid #fff;
		display: none;
		transition-property: color, border-left;
		transition-duration: .4s;
		transition-timing-function: linear;

		@media only screen and (max-width: 1100px) {
			font-size: 14px;
		}

		@include media-query($large-up) {
			display: block;
		}
	}
	
	.cart-count {
		position: relative;
		text-align:center;
		color: #fff;
		font-size: 14px;
		line-height: 14px;
		margin-left: 0px;
		transition: none;

		@include media-query($small-up) {
			margin-left: 5px;
			align-self: flex-end;
		}

		@include media-query($large-up) {
			display: block;
			font-size: $font-size-base;
			line-height: 16px;
			margin-left: 0px;
			align-self: center;
			padding-top: 4px;
			transition: color .4s linear;
		}

		@media only screen and (max-width: 1100px) {
			font-size: 14px !important;
			padding-top: 3px;
		}

		&:before {
			content: "(";
		}

		&:after {
			content: ")";
		}

		&.no-items {

		}
	}

	.icon {

	}
}

.animated {
	-webkit-animation-duration: 1s;
	animation-duration: 1s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
}

@keyframes swing {
	20% {
	  -webkit-transform: rotate3d(0, 0, 1, 15deg);
	  transform: rotate3d(0, 0, 1, 15deg);
	}
  
	40% {
	  -webkit-transform: rotate3d(0, 0, 1, -10deg);
	  transform: rotate3d(0, 0, 1, -10deg);
	}
  
	60% {
	  -webkit-transform: rotate3d(0, 0, 1, 5deg);
	  transform: rotate3d(0, 0, 1, 5deg);
	}
  
	80% {
	  -webkit-transform: rotate3d(0, 0, 1, -5deg);
	  transform: rotate3d(0, 0, 1, -5deg);
	}
  
	to {
	  -webkit-transform: rotate3d(0, 0, 1, 0deg);
	  transform: rotate3d(0, 0, 1, 0deg);
	}
  }
  
  .swing {
	-webkit-transform-origin: top center;
	transform-origin: top center;
	-webkit-animation-name: swing;
	animation-name: swing;
  }
  
/* ==========================================================================
#Cart Contents
========================================================================== */

.cart-mini-contents {
	position: absolute;
	right: 0px;
	margin-top:13px;
	width:250px;
	background-color:#fff;
	padding: 15px;
	z-index:101;
	transform:translateY(2rem);
	visibility: hidden;
	opacity: 0;
	transition: all .3s ease-in-out;
	max-height: 620px;
	overflow: hidden;
	overflow-y: scroll;
	
	.cart-item {
		display:flex;
		flex-direction:row;
		
		& + .cart-item {
			margin-top: 12px;
			padding-top: 12px;
			border-top:1px solid #000;
		}
	}
	
	.cart-item-left {
		width: 35%;
	}
	
	.cart-item-right {
		width:calc(65% - 10px);
		margin-left: 10px;

		> [class^="cart-prod"] {
			margin-bottom: 5px;

			&:last-of-type {
				margin: 0px;
			}
		}
	}
	
	.cart-prod-name, .cart-prod-price {
		line-height: inherit;
		font-size: 12px;
	}
	
	.cart-prod-name > a {
		font-size: 12px;
		letter-spacing: 0.5px;
		text-transform: uppercase;
	}
	
	.cart-prod-variant, .cart-prod-quantity {
		color: #000;
		font-size: 12px;
		line-height: inherit;
		letter-spacing: 1px;

		span {
			font-size: 12px;
			letter-spacing: 1px;
		}
	}

	.cart-prod-variant {
		span {
			&:before {
				content: "Size:";
				font-size: 12px;
				letter-spacing: 1px;
				margin-right: 5px;
			}
		}
	}
	
	.cart-prod-price {
		color: #000;
	}
	
	.cart-prod-remove {
		font-size: 12px;
		text-decoration: underline;
		cursor: pointer;
		letter-spacing: 1px;
		margin-top: 5px;
	}
	
	.cart-mini-actions {
		margin-top:.5rem;
		padding-top:.5rem;
		
		.btn {
			width:100% !important;
			
			& + .btn {
				margin-top: .5rem;
			}
		}
	}
	
	.cart-mini-total {
		display:flex;
		flex-direction:row;
		justify-content: center;
		align-items: center;
		border-top:1px solid #000000;
		margin:.5rem 0;
		padding:.5rem 0;
		
		.mini-cart-label {
			font-size: 16px;
			text-transform: uppercase;
		}
		
		.mini-cart-total {
			font-size: 16px;
			margin-left: 5px;
		}
	}
}

/* ==========================================================================
#Desktop Search Bar
========================================================================== */

.header-search {
	margin-left: auto;
	margin-right: 50px;
	display: none;

	@include media-query($large-up) {
		display: block;
	}
    
	.site-search {
		display:flex;
		flex-direction:row;
		width: 150px;
		position: relative;
	}
	
	input[type="search"] {
        width: 100%;
		background: none;
		color: #fff;
		padding: 0px;
		border: none;
		transition: color .4s linear;
		font-family: $search-font;
		font-size: 16px;
		line-height: 1;
		min-width: auto;
		margin-right: 40px;
		overflow: hidden;
		
		&::placeholder {
			color: #fff;
			border: none;
			transition: color .4s linear;
			font-family: $search-font;
			font-size: 16px;
			line-height: normal;
		}

		&:focus {
			outline: none;
			box-shadow: none;
		}
	}
	
	button[type="submit"] {
		padding: 0px;
		margin: 0px;
		font-size: 0px;
		background: none;
		height: auto;
		border: none;
		cursor: pointer;
		width: 37px;
		min-width: 37px;
		position: absolute;
		right: 0;
		top: 50%;
		transform: translate(0%, -50%);


		&:focus {
			outline: none;
		}


		svg.icon {
			width: 100%;
			height: 100%;
			max-width: 27px;
			max-height: 27px;
			
			g {
				stroke: #fff;
				transition: all .4s linear;
	
				circle {
					fill: none;
				}
		
				path {
					fill: #fff;
				}
			}
		}
	}
}

.header-search-icon-desktop {
	display: none;
	cursor: pointer;
	width: 20px;
	height: 20px;

	svg.icon {
		width: 100%;
		height: 100%;
		max-width: 20px;
		max-height: 20px;
		vertical-align: top;
		
		g {
			stroke: #000;
			stroke-width: 1px;

			circle {
				fill: none;
			}
	
			path {
				fill: #000;
			}
		}
	}
}

/* ==========================================================================
#Mobile Search Bar
========================================================================== */

.header-search-icon-mobile {
	cursor: pointer;
	width: 20px;

	svg.icon {
		width: 100%;
		height: 100%;
		max-width: 20px;
		max-height: 20px;
		
		g {
			stroke: #fff;
			stroke-width: 1px;

			@include media-query($large-up){
				stroke-width: 0.5px;
			}

			circle {
				fill: none;
			}
	
			path {
				fill: #fff;
			}
		}
	}
}

.search-bar {
	background-color: #fff;
    display:none;
	padding: 1rem 0;
	position: relative;
	z-index: 110;
    
	.site-search {
		display:flex;
		flex-direction:row;
	}
	
	input[type="search"] {
        width: 100%;
		border: none;
		background: #fff;
		text-align: center;
		outline: none;
		font-family: $search-font;

		&:focus {
			outline: none;
			box-shadow: none;

			&::placeholder {
				font-size: 0px;
			}
		}
	}
	
	button[type="submit"] {
		width:calc(35% - .5rem) !important;
        margin-left: 1rem;
        @extend .btn;
        @extend .btn-dark;
        padding-left: 0;
        padding-right: 0;
	}
}

/* ==========================================================================
#Mobile Navigation Icon
========================================================================== */

.header-mobile-menu {
	position: relative;
    cursor: pointer;
	width: 20px;
	margin-left: 5px;
	padding: 9px;

	@media only screen and (min-width: 333px) {
		margin-left: 10px;
	}

	@include media-query($small-up){
		margin-left: 15px;
	}

    span {
        display:block;
    }
	
	&:hover {
		.burger {
			//background-color: $brand-secondary;
			
			&:before, &:after {
				//background-color: $brand-secondary;
			}
		}
	}
	
	&.active .burger {
		//background-color: rgba($brand-secondary,0);
		//z-index:101;
		
		&:before,&:after {
			//background-color: #000;
		}
		
		&:before {
			top: 0;
    		-webkit-transform: rotate(45deg);
    		transform: rotate(45deg);
		}
		
		&:after {
			bottom: 0;
    		-webkit-transform: rotate(-45deg);
    		transform: rotate(-45deg);
		}
	}
	
	.burger {
		position: absolute;
		background-color: #fff;
		width: 20px;
		height: 1px;
		top: 50%;
		right: auto;
		left: 0;
		opacity: 1;
		//border-radius: 15px;
		line-height: 1px;
		
		&:before, &:after {
			position: absolute;
			display: block;
			background-color: #fff;
			width: 20px;
			height: 1px;
			content: "";
			line-height: 1px;
			//border-radius: 15px;
		}
		
		&:before {
			top: 7px;
    		-webkit-transform: rotate(0);
    		transform: rotate(0);
		}
		
		&:after {
			bottom: 7px;
    		-webkit-transform: rotate(0);
    		transform: rotate(0);
		}
	}
}

/* ==========================================================================
#Top Section within Mobile Navigation
========================================================================== */

.top-section {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-content: center;
	//border-top: 1px solid #000;

	@include media-query($small-up) {
		//border-top: none;
	}
}

.search-bar-mobile {
	background-color: #fff;
	padding: 5px 0;
	width: 80%;
	display: inline-block;

	@include media-query($large-up) {
		display: none;
	}
    
	.site-search {
		display:flex;
		flex-direction:row-reverse;
	}
	
	input[type="search"] {
        width: 100%;
		background: none;
		color: #000;
		font-size: $font-size-base;
		line-height: $line-height-base;
		letter-spacing: 1px;
		font-weight: 100;
		padding: 0px;
		border: none;
		font-family: $search-font;
		
		&::placeholder {
			color: #000;
			font-size: 14px;
			line-height: 17px;
			letter-spacing: 0.58px;
			font-weight: 100;
			opacity: 0.3;
			border: none;
		}

		&:focus {
			outline: none;
			box-shadow: none;
		}
	}
	
	button[type="submit"] {
		padding: 0px;
		margin: 0px 15px 0 0;
		font-size: 0px;
		background: none;
		height: auto;
		border: none;
		cursor: pointer;
		width: 37px;
		min-width: 37px;

		svg.icon {
			width: 100%;
			height: 100%;
			max-width: 20px;
			max-height: 20px;
			
			g {
				stroke: #000;
	
				circle {
					fill: none;
				}
		
				path {
					fill: #000;
				}
			}
		}
	}
}

.header-mobile-menu-close {
	position: relative;
    cursor: pointer;
	display: inline-block;
	margin-left: auto;
	margin-right: 15px;
	width: 25px;

    span {
        display:block;
    }
	
	.burger {
		position: absolute;
		background-color: rgba($brand-secondary,0);
		width: 25px;
		height: 1px;
		top: 50%;
		right: auto;
		left: 0;
		opacity: 1;
		//border-radius: 15px;
		
		&:before, &:after {
			position: absolute;
			display: block;
			background-color: #000;
			width: 25px;
			height: 1px;
			content: "";
			//border-radius: 15px;
		}
		
		&:before {
			top: 0;
    		-webkit-transform: rotate(45deg);
    		transform: rotate(45deg);
		}
		
		&:after {
			bottom: 0;
    		-webkit-transform: rotate(-45deg);
    		transform: rotate(-45deg);
		}
	}
}

/* ==========================================================================
#Curreny Convertor App
========================================================================== */

.header-currency-select {
	display: none;

	@include media-query($large-up) {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
	}
}

.doubly-wrapper {
    position:static !important;
	margin-top: 0 !important;
	display: flex;
	flex-direction: row;

	svg {

		path {
			fill: #fff !important;
			stroke: #fff !important;
		}
	}
}

.doubly-nice-select {
	padding: 0 18px 0 0 !important;
	height: auto !important;
	background: transparent !important;
	border: none !important;
	line-height: inherit !important;

	&:after {
		border-bottom: 2px solid #fff !important;
		border-right: 2px solid #fff !important;
		top: 5px !important;
		right: 0px !important;
		transition: all .4s linear !important;
	}
}

.doubly-nice-select .current {
	color: #fff !important;
	font-size: $font-size-base;
	line-height: $line-height-base;
	letter-spacing: 1px;
	font-weight: 100;
	transition: all .4s linear !important;
}

.doubly-nice-select .current .flags {
	display: none !important;
}

.doubly-nice-select.right .list {
	margin-top: 16px !important;
	left: 0 !important;
	right: auto !important;
}
/* Table of Contents
==================================================
	
	Styling for sticky header

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

/* ==========================================================================
#Headroom
========================================================================== */ 
#site-header {
	&.InsidePage {

		&.headroom--not-top {
			
		}

		>.container-fluid {
			>.row {
				padding: 17px 0px;

				@include media-query($large-up) {
					padding: 0px;
				}
			}
		}
	
		.currency-select {

			@include media-query($large-up) {
				display: none;
			}
		}
	
		.logo-wrapper {
			order: 1;
			text-align: left;
			width: 100%;
			max-width: 147px;
			z-index: 110;

			@include media-query($small-up) {
				max-width: 250px;
			}

			@include media-query($large-up) {
				position: absolute;
				left: 0px;
				top: 12px;
			}
		}
	
		.site-logo {
			svg {
				fill: #000;
				max-width: 250px;
				max-height: 26px;

				path {
					fill: #000;
				}
			}
		}
	
		.navigation-wrapper {
			order: 2;
			flex: 1;
			display: none;

			@include media-query($large-up) {
				display: block;
			}
		}

		#site-navigation {
			margin-top: 0px;

			> ul > li {
				> a {
					padding: 20px 0;
				}
			}

			a {
				color: #000;
			}

			.sub-menu-container {
				top: 52px;
			}

		} 
	
		.header-actions-wrapper {
			order: 3;
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			justify-content: flex-end;
			width: 28%;
			margin-left: auto;
			flex: 1;
			padding: 0;
			width: auto;

			@include media-query($large-up) {
				position: absolute;
				right: 15px;
				top: 16px;
				padding: 0px;
				z-index: 110;
			}
		}

		.header-search-icon-desktop {
			display: none;
			width: 20px;

			body.template-search & {
				//display: none;
			}

			@include media-query($large-up) {
				display: block;
			}

			svg.icon {
				max-width: 20px;
				max-height: 20px;
			}
		}

		.search-bar {
			visibility: visible;
			opacity: 1;
		}

		.header-search-icon-mobile {
			svg.icon {
				g {
					stroke: #000;

					path {
						fill: #000;
					}
				}
			}
		}

		.header-search {
			display: none;
		}

		.header-wishlist {
			padding: 0 0 0 25px;
			display: none;

			@include media-query($large-up) {
				padding: 0 0 0 25px;
				display: block;
			}

			@include media-query($widescreen-ultra) {
				padding: 0 0 0 37px;
			}

			.wishlist-icon {
				display: block;

				svg {
					vertical-align: top;

					path {
						width: 100%;
						height: 100%;
						stroke-width: 1px;
					}
				}

				.topbadge {
					font-size: 14px;
					line-height: 14px;
				}
			}
		}

		.header-account {
			padding: 0 0 0 25px;
			display: none;

			@include media-query($large-up) {
				padding: 0 0 0 25px;
				display: block;
			}

			@include media-query($widescreen-ultra) {
				padding: 0 0 0 37px;
			}

			.account-icon {
				display: block;
			}

			> a {
				display: none;
			}
		}

		.header-basket {
			padding: 0 0 0 15px;

			@include media-query($large-up) {
				padding: 0 0 0 25px;
			}

			@include media-query($widescreen-ultra) {
				padding: 0 0 0 37px;
			}

			.cart-icon {
				padding: 0px;
			}

			.shopping-bag {
				height: 20px;
				display: flex;
				flex-direction: column;

				@include media-query($large-up) {
					//height: 27px;
				}

				.icon-basket {
					stroke: #000;
					transition: none;

					rect, path  {
						stroke: #000;
					}
				}
			}

			.cart-title {
				display: none;
			}

			.cart-count {
				color: #000;
				align-self: center;
				margin-left: 4px;

				@include media-query($large-up) {
					padding-top: 0px;
					font-size: 14px;
					line-height: 14px;
				}

				&.no-items {
					display: none;
				}
			}
		}

		.header-mobile-menu .burger {
			background-color: #000;

			&:before {
				background-color: #000;
			}

			&:after {
				background-color: #000;
			}
		}

		.doubly-nice-select {
		
			&:after {
				border-bottom: 2px solid #000 !important;
				border-right: 2px solid #000 !important;
			}
		}
	}
}




/* Table of Contents
==================================================
	
	Styling for sticky header

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

.head-top-actions {
	&.headroom--not-top {
		opacity: -1;
		visibility: visible;
		transition: none;
	}
}

/* ==========================================================================
#Headroom
========================================================================== */ 
#site-header {
	&.headroom--not-top {
		animation: insideHeaderScroll .3s linear;
		-webkit-backface-visibility: hidden;

		>.container-fluid {
			>.row {
				padding: 17px 0px;

				@include media-query($large-up) {
					padding: 0px;
				}
			}
		}
	
		.currency-select {
			width: 0px;
			height: 0px;
			visibility: hidden;
			opacity: 0;
			flex: 0;
			padding: 0px;
			margin: 0px;

			.current {
				color: #000 !important;
			}
		}
	
		.logo-wrapper {
			order: 1;
			text-align: left;
			width: 100%;
			max-width: 147px;
			z-index: 110;

			@include media-query($small-up) {
				max-width: 250px;
			}

			@include media-query($large-up) {
				position: absolute;
				left: 0px;
				top: 12px;
			}
		}
	
		.site-logo {
			svg {
				fill: #000;
				max-width: 250px;
				max-height: 26px;
				transition: none;

				path {
					fill: #000;
					transition: none;
				}
			}
		}
	
		.navigation-wrapper {
			order: 2;
			flex: 1;
		}

		#site-navigation {
			margin-top: 0px;

			> ul > li {
				> a {
					padding: 20px 0;
				}
			}

			a {
				color: #000;
				transition: none;
			}

			.sub-menu-container {
				top: 52px;
			}

		} 
	
		.header-actions-wrapper {
			order: 3;
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			justify-content: flex-end;
			width: auto;
			flex: 1;

			@include media-query($large-up) {
				position: absolute;
				right: 15px;
				top: 16px;
				padding: 0px;
				z-index: 110;
			}
		}

		.header-search-icon-desktop {
			display: none;
			width: 20px;

			@include media-query($large-up) {
				display: block;
			}

			svg.icon {
				max-width: 20px;
				max-height: 20px;
			}
		}

		.header-search {
			width: 0px;
			visibility: hidden;
			opacity: 0;
			flex: 0;
			padding: 0px;
			margin: 0px;
			height: 0px;
			min-width: 0px;

			input[type="search"] {
				color: #000;

				&::placeholder {
					color: #000;
				}
			}

			svg.icon g {
				stroke: #000;
			}
		}

		.header-wishlist {
			padding: 0 0 0 25px;
			display: none;

			@include media-query($large-up) {
				padding: 0 0 0 25px;
				display: block;
			}

			@include media-query($widescreen-ultra) {
				padding: 0 0 0 37px;
			}

			.wishlist-icon {
				display: block;

				svg {
					vertical-align: top;

					path {
						width: 100%;
						height: 100%;
						stroke-width: 1px;
					}
				}

				.topbadge {
					font-size: 14px;
					line-height: 14px;
				}
			}
		}

		.header-account {
			padding: 0 0 0 25px;
			display: none;

			@include media-query($large-up) {
				padding: 0 0 0 25px;
				display: block;
			}

			@include media-query($widescreen-ultra) {
				padding: 0 0 0 37px;
			}

			.account-icon {
				display: block;
			}

			> a {
				width: 0px;
				visibility: hidden;
				opacity: 0;
				flex: 0;
				padding: 0px;
				margin: 0px;
				height: 0px;
				color: #000;
				transition: none;
			}
		}

		.header-basket {
			padding: 0 0 0 0px;

			@include media-query($small-up) {
				padding: 0 0 0 15px;
			}

			@include media-query($large-up) {
				padding: 0 0 0 25px;
			}

			@include media-query($widescreen-ultra) {
				padding: 0 0 0 37px;
			}

			.cart-icon {
				padding: 0px;
			}

			.shopping-bag {
				height: 20px;
				display: flex;
				flex-direction: column;

				.icon-basket {
					stroke: #000;
					transition: none;

					rect, path {
						stroke: #000;
					}
				}
			}

			.cart-title {
				transition: none !important;
				width: 0px;
				visibility: hidden;
				opacity: 0;
				flex: 0;
				padding: 0px;
				margin: 0px;
				height: 0px;
				color: #000;
				border-left: 1px solid #000;
			}

			.cart-count {
				color: #000;
				align-self: center;
				margin-left: 4px;
				transition: none;

				@include media-query($large-up) {
					align-self: center;
					padding-top: 0px;
					font-size: 14px;
					line-height: 14px;
				}

				&.no-items {
					width: 0px;
					visibility: hidden;
					opacity: 0;
					flex: 0;
					padding: 0px;
					margin: 0px;
					height: 0px;
					color: #000;
					transition: none;
				}
			}
		}

		.header-mobile-menu .burger {
			background-color: #000;

			&:before {
				background-color: #000;
			}

			&:after {
				background-color: #000;
			}
		}

		.doubly-nice-select {
		
			&:after {
				border-bottom: 2px solid #000 !important;
				border-right: 2px solid #000 !important;
			}
		}
	}
}




/* Table of Contents
==================================================

Styling for when Navigation is open

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

/* ==========================================================================
#Headroom
========================================================================== */ 

#site-header {
	&.openNavigation {

		.container-fluid {

		}

		.doubly-nice-select .current {
			color: #000 !important;
			transition: none;
		}

		.site-logo svg {
			fill: #000;
			transition: none;

			path {
				fill: #000;
				transition: none;
			}
		}

		.header-search {
			input[type="search"] {
				color: #000;
				transition: none;

				&::placeholder {
					color: #000;
					transition: none;
				}
			}

			button[type="submit"] svg.icon g {
				stroke: #000;
				transition: none;
			}
		}

		.header-actions .header-account > a {
			color: #000;
			transition: none;
		}

		.header-basket {
			.cart-title {
				color: #000;
				border-left: 1px solid #000;
				transition: none;
			}
			.cart-count {
				color: #000;
				transition: none;
			}
		}

		#site-navigation a {
			color: #000;
			transition: none;
		}

		.doubly-nice-select {
		
			&:after {
				border-bottom: 2px solid #000 !important;
				border-right: 2px solid #000 !important;
				transition: none !important;
			}
		}
	}
}
/* Table of Contents
==================================================

    #header-text-features
	#Slick Styling

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

/* ==========================================================================
#header-text-features
========================================================================== */

.header-text-features {
	background-color: $brand-secondary;
	padding-top:1rem;
	padding-bottom:1rem;

	.text-features-slick.default-content {
		display:flex;
	}

	.slick-list {
		width:100%;
	}
	
	.text-feature {
		@include media-query($large-up) {
			width:auto !important;
		}
		
	}
	
	.text-feature > div {
		height:100%;
	}
	
	.icon {
		width:25px;
		height:25px;
	}
	
	.text-feature-heading {
		margin: 0;
		font-size:0.75rem; //12px;
		font-weight:600;
		text-transform: uppercase;
		line-height:1;
		letter-spacing:2px;
	}
	
	.text-feature-subheading {
		display:block;
		margin-top: 2px;
		font-size:0.75rem; //12px;
		font-weight:300;
		line-height:1;
		letter-spacing:2px;
	}
	
}


/* ==========================================================================
#header-text-features
========================================================================== */
.header-text-features {
	.slick-initialized {
	
		
		.slick-track {
			display: flex;
			flex-direction: row;
			align-items: stretch;
		}
		
		.slick-slide {
			height:inherit;
			
			&:focus {
				outline:0;
			}
			
			> div {
				height:100%;
			}
		}
		
		.slick-list {
			@include media-query($small-down) {
				width:80%;
				margin-left:auto;
				margin-right:auto;
			}
		}
		
		.slick-arrow {
			position: absolute;
			top:50%;
			transform:translateY(-50%);
			display:block;
			width: 30px;
			height: 30px;
			background-color: transparent;
			-webkit-appearance: none;
			border:0;
			border-radius:0;
			cursor: pointer;
			padding:5px 0;
			text-align: center;
			
			&:focus {
				outline:0;
			}
			
			svg {
				display: inline-block;
				fill:$title-font-color;
				width:20px;
				height:20px;
			}
		}
		
		.slick-arrow.slick-prev {
			left:15px;
			
			@include media-query($small-up) {
				left:-30px;
			}
		}
		
		.slick-arrow.slick-next {
			right:15px;
			
			@include media-query($small-up) {
				right:-30px;
			}
		}
		

	}
}
/* Table of Contents
==================================================

    #Hero
    #Hero placeholder
    #Slick Dots
    #Slick Arrows

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

/* ==========================================================================
#Hero
========================================================================== */

.hero {

	@include media-query($small-down) {
		max-height: 100vh;
	}

	.slick-track,
	.slick-list {
		-webkit-perspective: 2000;
		-webkit-backface-visibility: hidden;
	}
	
	.no-js & {
		.hero-item {
			display:block;
		}
	}
	
	.hero-item {
		position: relative;
		display:none;
		max-height: none;

		@include media-query($small-down) {
			max-height: 100vh;
		}

		@include media-query($widescreen) {
			max-height: 789px;
		}

		@include media-query($widescreen-ultra) {
			max-height: 969px;
		}
		
		&:first-of-type {
			display:block;
		}
		
		&:focus {
			outline:0;
		}

		a.wrapperLink {
			display: block;
			width: 100%;
			height: 100%;
			position: relative;
			z-index: 10px;
		}
	}
	
	.hero-image {
		img,svg {
			display:block;
		}
		
		img {
			max-width:100%;
			margin:0 auto;
			width: 100%;
		}
	}
	
	.hero-content {
		padding-top:15px;
		padding-bottom: 15px;
		position: absolute;
		//bottom: 0px;
		width: 100%;
		top:50%;
		transform: translateY(-50%);

		@include media-query($medium-up) {
			&.hero-content-top {
				top:1rem;
				transform: translateY(0);
			}
		}
		
		@include media-query($medium-up) {
			top:50%;
			left:0;
			right:0;
			transform: translateY(-50%);
		}

		@include media-query($medium-up) {
			&.hero-content-bottom {
				top:auto;
				bottom:0;
				transform: translateY(0);
			}
		}

		.content {
			//background-color: rgba(249,249,249,0.8);
			padding:0px;

			@include media-query($medium-up) {
				padding:10px 35px 35px;
			}
		}

		.content-btn {

			& + .btn {
				transform:translateY(-100%);
				margin-top: -1rem;
				margin-left: 1rem;
				margin-right: 1rem;
			}
		}
		
		h2 {
			color:#fff;
			font-size: 24px;
			line-height: 24px;
			margin: 0px;
			font-family: $title-font;
			text-align: center;
			
			@include media-query($medium-down) {
				margin-top: 0;
			}

			@include media-query($small-up) {
				font-size: 60px;
				line-height: 60px;
				text-align: left;
			}
			
			@include media-query($large-up) {
				@extend .h1;
				letter-spacing:2px;
				font-size: 80px;
				line-height: 80px;
			}

			&.heroSmall {
				font-size: 24px;
				line-height: 24px;

				@include media-query($small-up) {
					font-size: 40px;
					line-height: 40px;
				}
			}
		}

		.rte {
			font-size: 16px;
			line-height: 16px;
			margin-top: 15px;
			color: #fff;
			text-align: center;

			@include media-query($small-up) {
				font-size: 20px;
				line-height: 20px;
				letter-spacing: 1.43px;
				text-align: left;
			}

			p {
				font-size: 16px;
				line-height: 16px;
				color: #fff;
				margin-bottom: 0px;

				@include media-query($small-up) {
					font-size: 20px;
					line-height: 20px;
					letter-spacing: 1.43px;
				}
			}
		}

		.hero-link {
			color: #FFFFFF;
			font-size: 16px;
			line-height: 16px;
			letter-spacing: 0.67px;
			margin-top: 10px;
			text-decoration: none;
			width: 100%;
			display: block;
			text-align: center;

			@include media-query($small-up) {
				font-size: 20px;
				letter-spacing: 1.43px;
				line-height: 20px;
				margin-top: 17px;
				text-align: left;
			}
		}

		.mobile-arrow {
			animation: bounce 3s infinite;
			cursor: pointer;

			svg {
				stroke: #FFFFFF;
				width: 30px;
				height: 30px;

				path {
					stroke: #FFFFFF;
				}
			}
		}
	}

	.three-d-box .three-d-foreground{
		@include media-query($medium-down) {
			border:1px solid #000;
		}
	}
}


/* ==========================================================================
#hero-placeholder
========================================================================== */
.hero-placeholder {
	display:block;
	width:1250px;
	max-height:520px;
	border:1px solid $gray-300;
}

/* ==========================================================================
#Slick Dots
========================================================================== */

.hero .slick-slider .slick-dots {
	display:block;
	list-style:none;
	margin: 1rem 0 0;
	padding: 0;
	text-align: center;
	height:16px;
	
	
	@include media-query($medium-up) {
		position:absolute;
		bottom:0;
		left:50%;
		margin:0;
		margin-bottom: 1rem;
		transform:translateX(-50%);
		height:22px;
		border-radius:22px;
		background-color: rgba(232,232,232,0.4);
	}
	
	li {
		display:inline-block;
		
		& + li {
			margin-left: .5rem;
		}
	}
	
	.slick-active button {
		background-color: $brand-secondary;
	}
	
	button {
		display:block;
		width:16px;
		height:16px;
		-webkit-appearance: none;
		border-radius: 50%;
		border:0;
		background-color: $gray-500;
		text-indent:-9999px;
		cursor: pointer;
		
		
		@include media-query($medium-up) {
			height:22px;
			width:22px;
			background-color: rgba(#fff,0.6);
		}
		
		&:focus {
			outline:0;
		}
	}
}

/* ==========================================================================
#Slick Arrows
========================================================================== */

.hero .slick-slider {
	.slick-arrow {
		position: absolute;
		top:50%;
		transform:translateY(-50%);
		display:block;
		width: 40px;
		height: 40px;
		background-color: transparent;
		-webkit-appearance: none;
		border:0;
		border-radius:0;
		cursor: pointer;
		padding:5px 0;
		text-align: center;
		z-index:3;
		
		&:focus {
			outline:0;
		}

		svg {
			display: inline-block;
			fill:#fff;
			width:30px;
			height:30px;
		}
	}

	.slick-arrow.slick-prev {
		left:15px;

	}

	.slick-arrow.slick-next {
		right:15px;

	}
}
/* Table of Contents
==================================================

	#Hero Static
	#Hero Static - Instagram Banner
	#About Us Static Hero

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

/* ==========================================================================
#Hero Static
========================================================================== */

.hero-static {

	.hero-image img {
		height: auto;
	}

	.hero-content {
		display: flex;
		flex-direction: column;
		justify-content: center;

		@include media-query($medium-up) {
			&.hero-content-top {
				justify-content: flex-start;
			}
		}

		h2 {
			margin-bottom: 16px;

			@include media-query($large-up) {
				font-size: 60px;
				line-height: 67px;
				letter-spacing: 0.5px;
			}
		}

		.hero-link {

		}

		.content-btn {
			padding-bottom: 0px;
		}
	}
}

/* ==========================================================================
#Instagram Banner 
========================================================================== */

.instagram-banner {
	.hero-image img {
		height: auto;
	}
	.hero-content {
		h2 {
			font-size: 60px;
			line-height: 69px;

			@include media-query($large-up) {
				font-size: 80px;
				line-height: 89px;
			}
		}

		.hero-link {
			text-align: center;
		}

	}
}

/* ==========================================================================
#About Us Static Hero 
========================================================================== */

.hero-static-aboutUs {

	.hero-image {
		max-height: none;
        overflow: hidden;

		@include media-query($widescreen) {
			max-height: 789px;
		}

		@include media-query($widescreen-ultra) {
			max-height: 969px;
		}

		img {
			max-width:100%;
			margin:0 auto;
		}
	}
	
	.hero-content {

		&.hero-content-middle {
			top: 50%;
			transform: translateY(-50%);
		}

		h2 {
			margin-bottom: 0px;
			font-size: 32px;
			line-height: 36px;

			@include media-query($medium-up) {
				font-size: 60px;
				font-size: 64px;
			}
		}

		.rte {
			font-size: 16px;
			line-height: 21px;
			letter-spacing: 0.5px;
			margin-top: 15px;
			width: 100%;

			@include media-query($medium-up) {
				max-width: 60%;
				margin: 25px auto 0;
			}
		}
	}
}
/* Table of Contents
==================================================

    #Logo Listing
    #Logo Placeholder

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

/* ==========================================================================
#Logo Listing
========================================================================== */

.logo-listing-item {
	img {
		display:block;
		margin: 0 auto;
	}
}

/* ==========================================================================
#Logo PLaceholder
========================================================================== */

.logo-placeholder {
	border:1px solid $gray-300;
}
/* Table of Contents
==================================================

    #Featured Products
    #Slick Dots
    #Slick Arrows

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

/* ==========================================================================
#Featured Products
========================================================================== */

.featured-products {
	margin-bottom: 40px;

	@include media-query($medium-up) {
		margin-bottom: 0px;
	}

	h2 {
		margin-top: 40px;
		margin-bottom: 0px;
		font-size: 24px;
		line-height: 29px;
		letter-spacing: 0.5px;
		font-family: $body-font;
		padding-left: 20px;
	}

	.rte {
		p {
			margin: 0px;
		}
	}

	.featured-product {
		display:flex !important;
		flex-direction:column;
		padding: 0 20px;
		
		&:focus {
			outline:0;
		}

		&:hover {
			.product-title, .product-price {
				//color:$brand-primary;

				&:after {
					width:100%;
					//background-color:$brand-primary;
				}
			}
		}
	}
	
	.product-image {
		&:focus {
			outline:0;
		}

		a:focus {
			outline:0;
		}

		img {
			margin: 0 auto;
			width: 100%;

			&.lazyload {
				//width:100% !important;
				filter: blur(5px);
				//max-height: 525px;
			}
	
			&.lazyloaded {
				filter: blur(0);
			}
		}
	}
	
	.featured-product .product-details {
		//margin-top: auto;

		> a {
			display:block;
			color:$title-font-color;
			text-decoration: none;

			&:hover {
				color: $brand-secondary;
			}
		}
	}

	.product-detailsn {
		margin-top: auto;

		a {
			display: block;
			padding: 20px 0;
			text-decoration: none;
		}
	}
	
	.product-title {
		display:block;
		text-align: left;
		margin: 0px;
		font-size: 12px;
		line-height: 15px;
		letter-spacing: 1px;
		transition:all .3s ease-in-out;
		text-transform: capitalize;

		&:after {
			//display:block;
			display:none;
			margin:.8rem auto 1rem;
			width:50px;
			background-color: #000;
			height:1px;
			content:'';
			transition:all .3s ease-in-out;
		}

		@include  media-query($large-up) {
			text-align: center;
		}
	}
	
	.product-price {
		display:block;
		text-align: left;
		font-size:0.75rem;
		font-weight: 600;
		transition:all .3s ease-in-out;
	}

	.product-price-original {
		text-decoration: line-through;
		font-size:0.75rem;
	}
}

/* ==========================================================================
#Slick Dots
========================================================================== */

.featured-products .slick-slider .slick-dots {
	display:block;
	list-style:none;
	margin: 1.5rem 0;
	padding: 0;
	text-align: center;
	//display: none !important;

	@include  media-query($medium-up) {
		display: block !important;
		margin: 3rem 0;
	}
	
	li {
		display:inline-block;
		font-size: 10px;
		
		& + li {
			margin-left: .5rem;
		}
	}
	
	.slick-active button {
		background-color: #fff;
	}
	
	button {
		display:block;
		width:10px;
		height:10px;
		-webkit-appearance: none;
		border-radius: 50%;
		border:0;
		background-color: #000;
		border:1px solid #000;
		text-indent:-9999px;
		cursor: pointer;
		padding: 0px;
		
		&:focus {
			outline:0;
		}
	}
}

/* ==========================================================================
#Slick Arrows
========================================================================== */

.featured-products .slick-slider {
	.slick-arrow {
		position: absolute;
		top:50%;
		transform:translateY(-50%);
		display:block;
		width: 40px;
		height: 40px;
		background-color: transparent;
		border:none;
		-webkit-appearance: none;
		border-radius:0;
		cursor: pointer;
		padding:5px 0;
		text-align: center;
		z-index:3;
		
		// @include media-query($small) {
		// 	top:35%;
		// }

		// @include media-query($medium) {
		// 	top:40%;
		// }
		
		// @include media-query($large-up) {
		// 	top:35%;
		// }
		
		&:focus {
			outline:0;
		}

		svg {
			display: inline-block;
			fill:$title-font-color;
			width:30px;
			height:30px;
		}
	}

	.slick-arrow.slick-prev {
		left:15px;
		@include media-query($small-up) {
			left:-40px;
		}
	}

	.slick-arrow.slick-next {
		right:15px;
		
		@include media-query($small-up) {
			right:-40px;
		}
	}
}
/* Table of Contents
==================================================

    #Featured Images

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

/* ==========================================================================
#Featured Images
========================================================================== */
.featured-gallery {
    margin-top: 0px;
    width: 100%;
    margin: 0 auto;

    @include media-query($medium-up) {
        margin-top: 50px;
        max-width: 1130px;
    }
}

.featured-gallery-wrapper {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;

    .itemWrapper {
        width: 100%;

        @include media-query($medium-up) {
            width: 49%;
            max-width: 540px;
        }
    }
}

.featured-gallery-item {
    margin-bottom: 0px;
    max-width: 540px;
    margin: 0 auto;

    @include media-query($medium-up) {
        margin: 0 auto 50px;
        max-width: none;
    }
}

.featured-gallery-item.image-content {
    position: relative;

    .featured-item-content {
        position: absolute;
        top:0;
        right:0;
        bottom:0;
        left:0;
        z-index:2;
    }

    .featured-item-opacity {
        position: absolute;
        top:0;
        right:0;
        bottom:0;
        left:0;
        z-index:1;
        background-color: #000;
    }

    a {
        display:flex;
        flex-direction:column;
        justify-content: flex-end;
        align-items: flex-start;
        height:100%;
        width:100%;
        text-decoration: none;
        color:$brand-primary;
        padding: 0 30px;

        @include media-query($large-up) {
            padding: 0 50px;
        }
    }

    .h2 {
        color:#fff;
        font-family: $title-font;
        font-size: 30px;
        line-height: 33px;
        letter-spacing: 0.5px;
        margin: 0px;

        @include media-query($medium-up) {
            font-size: 40px;
            line-height: 45px;
        }
    }

    .ShopNow {
        position: relative;
        margin-top: 10px;
        margin-bottom: 40px;
        font-size: 20px;
        line-height: 24px;
        letter-spacing: 1.43px;

        @include media-query($large-up) {
            margin-top: 5px;
        }
    }
}

.featured-gallery-item.content-below {
    .featured-item-content {
        .h2 {
            text-transform: uppercase;
            letter-spacing:6px;
            font-weight:600;
            margin-bottom: 1.2rem;
        }
    }
}
/* Table of Contents
==================================================

    #Featured Products
    #Slick Dots
    #Slick Arrows

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

/* ==========================================================================
#Featured Products
========================================================================== */

.featured-images-slider {

	.featured-images {
		display:flex !important;
		flex-direction:column;
		
		&:focus {
			outline:0;
		}

		&:hover {
			.featured-image-title {
				color:$brand-primary;
			}
		}
	}
	
	.featured-image {
		&:focus {
			outline:0;
		}

		a:focus {
			outline:0;
		}

		img {
			margin: 0 auto;
		}
	}
	
	.featured-images .featured-image-details {
		margin-top: auto;

		> a {
			display:block;
			color:$title-font-color;
			text-decoration: none;
		}
	}
	
	.featured-image-title {
		display:block;
		text-align: center;
		margin-top: 1rem;
		margin-bottom: .5rem;
		font-size:0.875rem; //14px
        font-weight: 600;
        text-transform: uppercase;
		transition:all .3s ease-in-out;
	}
	
}

/* ==========================================================================
#Slick Dots
========================================================================== */

.featured-images-slider .slick-slider .slick-dots {
	display:block;
	list-style:none;
	margin: 3rem 0 0;
	padding: 0;
	text-align: center;
	
	li {
		display:inline-block;
		
		& + li {
			margin-left: .5rem;
		}
	}
	
	.slick-active button {
		background-color: #000;
	}
	
	button {
		display:block;
		width:16px;
		height:16px;
		-webkit-appearance: none;
		border-radius: 50%;
		border:0;
		background-color: #fff;
		border:1px solid #000;
		text-indent:-9999px;
		cursor: pointer;
		
		&:focus {
			outline:0;
		}
	}
}

/* ==========================================================================
#Slick Arrows
========================================================================== */

.featured-images-slider .slick-slider {
	.slick-arrow {
		position: absolute;
		top:47%;
		transform:translateY(-50%);
		display:block;
		width: 40px;
		height: 180px;
		background-color: transparent;
		border:none;
		-webkit-appearance: none;
		border-radius:0;
		cursor: pointer;
		padding:5px 0;
		text-align: center;
		z-index:3;
		
		@include media-query($small) {
			top:35%;
		}

		@include media-query($medium) {
			top:41%;
		}
		
		@include media-query($large) {
			top:38%;
		}

		@include media-query($widescreen) {
			top:40%;
		}
		
		&:focus {
			outline:0;
		}

		svg {
			display: inline-block;
			fill:$title-font-color;
			width:30px;
			height:30px;
		}
	}

	.slick-arrow.slick-prev {
		left:15px;
		@include media-query($medium-up) {
			//transform: translateX(-50%);
		}
	}

	.slick-arrow.slick-next {
		right:15px;
		@include media-query($medium-up) {
			//transform: translateX(50%);
		}
	}
}
/* Table of Contents
==================================================

    #Featured Images - About Us Page

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

/* ==========================================================================
#Featured Images - About Us Page
========================================================================== */

.featured-gallery-item-aboutUs {
    position: relative;

    .featured-item-content {
        padding: 75px 30px;
        width: 100%;

        @include media-query($large-up) {
            position: absolute;
            padding: 0px 100px;
            max-width: 50%;
        }

        @include media-query($widescreen-ultra) {
            max-width: 38%;
        }

        &.hero-content-middle {
            @include media-query($large-up) {
                top: 50%;
                transform: translateY(-50%);
            }
        }

        &.hero-content-top {
            @include media-query($large-up) {
                top: 0px;
                transform: none;
                padding: 100px 100px 0px;
            }
        }

        &.hero-content-bottom {
            @include media-query($large-up) {
                bottom: 0px;
                transform: none;
                padding: 0px 100px 100px;
            }
        }

        h2 {
            margin: 0px;
            padding: 0px;
            font-size: 24px;
            line-height: 24px;
            text-transform: capitalize;
            font-family: $title-font;
            margin-bottom: 15px;

            @include media-query($large-up) {
                color: #fff;
                font-size: 28px;
                line-height: 32px;
            }
        }

        .rte {
            margin: 0px;
            padding: 0px;
            font-size: 16px;
            line-height: 21px;
            letter-spacing: 0.5px;
            font-family: $body-font;

            @include media-query($large-up) {
                color: #fff;
                font-size: 18px;
                line-height: 22px;
                letter-spacing: 1px;
            }
        }
    }

    .featured-item-image {
        max-height: none;
        overflow: hidden;

		@include media-query($widescreen) {
			max-height: 789px;
		}

		@include media-query($widescreen-ultra) {
			max-height: 969px;
		}

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


/* Table of Contents
==================================================

    #Featured Images - About Us Page

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

/* ==========================================================================
#Featured Images - About Us Page
========================================================================== */

.featured-gallery-noText {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;

    .itemWrapper {
        width: 50%;
    }

    .featured-item-image {
        max-height: none;
        overflow: hidden;

		@include media-query($widescreen) {
			max-height: 789px;
		}

		@include media-query($widescreen-ultra) {
			max-height: 969px;
        }
        
        img {
            max-width:100%;
			margin:0 auto;
        }
    }
}


/* Table of Contents
==================================================

    #Instagram

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

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

.instagram-feed {
    h2 {
        font-size: 18px;
        line-height: 22px;
        letter-spacing: 0.75px;
        margin-top: 20px;
        margin-bottom: 6px;
        width: 100%;
        text-align: center;
    }
    
    #showcase-gallery-13369 {
        .showcase-grid-buttons {
            display: none !important;
        }
    }
}
/* Table of Contents
==================================================

	#Newsletter signup
    #Footer Columns
    #Footer Plus Minus Icon
	#Footer Links
	#Footer Copy
	#Footer Social Links

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

/* ==========================================================================
#Newsletter signup
========================================================================== */

.newsletter-signup {
	background-position:center center;
	background-size:cover;
	background-repeat:no-repeat;
	margin-bottom: 27px;

	@include media-query($medium-up) {

	}

	h3 {
		color:#fff;
		text-transform: uppercase;
		font-weight:bold;
		letter-spacing:1px;

		@include media-query($large-up) {
			font-size:3rem;
			font-weight:normal;
		}
	}

	.newsletter-content p {
		font-size:1.125rem;
	}

	.gdpr-text p {
		font-size:0.75rem; //12px
	}
	
	.rte {
		font-size:0.875rem; //14px

		@include media-query($medium-up) {
			font-size:1rem; //16px
		}
	}

	.form-group {
		margin: 0px;
	}

	input[type="email"] {
		border-right: none;
		font-size: 10px;
		line-height: 12px;
		padding: 0 16px;
		box-sizing: border-box;
	}

	[type="submit"] {
		width:100% !important;
		padding: 0px;
		border-color: $brand-secondary;
		min-width: auto;
		background: {
			image: url({{ "arrow_newsletter.svg" | asset_url }});
			repeat: no-repeat;
			position: center center;
			color: $brand-secondary;
		}

		&:hover {
			background: {
				image: url({{ "arrow_newsletter_black.svg" | asset_url }});
				repeat: no-repeat;
				position: center center;
			}
		}
	} 

	.content__gdprLegal {
		font-size:0.75rem; // 12px
	}

	.ql-editor {
		display: none !important;
	}

	.kwGIvD, .bYbfhI, .qYFrN {
		padding: 0px !important;
	}

	.bqQGYX {
		border: 1px solid #000 !important;
		font-size: 12px !important;
		font-family: $search-font !important;
		border-radius: 0px !important;

		&::placeholder {
			color: #000 !important;
			font-size: 12px !important;
			font-family: $search-font !important;
		}
	}

	.izyMjd {
		font-size: 0px !important;
		background-color: $brand-secondary !important;
		color: #000 !important;
		border-radius: 0px !important;
		padding: 19px 25px !important;
		background: {
			image: url({{ "arrow_newsletter.svg" | asset_url }}) !important;
			repeat: no-repeat !important;
			position: center center !important;
			color: $brand-secondary !important;
		}
	}

}

/* ==========================================================================
#Footer Columns
========================================================================== */

footer {

}

.footer-col {
	margin: 48px 0;

	@include media-query($medium-up) {
        padding-bottom: 0;
		position: relative;
		margin: 74px 0 64px;
    }
	
	@include media-query($small-up) {
		padding-bottom: 1rem;
	}
	
	@include media-query($small) {
		margin-bottom: .5rem;
	}
	
	.footer-title {
		display:flex;
		flex-direction:row;
		flex-wrap:nowrap;
		align-items: center;
		margin: 0 0 26px;
		letter-spacing: 1px;
		font-weight: 100;

		@include media-query($small-down) {
			margin-top: 0px;
			margin-bottom: 23px;
			font-size: 18px;
			line-height: 22px;
		}

		@include media-query($medium-up) {
			justify-content: center;
		}

		&.active {
			.icon-chevron-down {
				transform: rotate(180deg);
			}
		}
		
		.icon-chevron-down {
			display:block;
			width:15px;
			height:15px;
			margin-left: .5rem;
			transition:all .3s ease-in-out;

			@include media-query($small-up) {
				display:none;
			}
		}
        
	}
	
	.footer-content {
		
		@include media-query($small-up) {
			display:block !important;
		}
	}

	&.social {
		margin: 48px 0 0;

		@include media-query($medium-down) {
			order: -1;
		}

		@include media-query($medium-up) {
			margin: 74px 0 64px;
		}

		.footer-title {
			justify-content: center;
		}

		.footer-social {
			.footer-title {
				//margin-bottom: 14px;
			}
		}
	}
}

body.user-gb .footer-content.ie-content, body.user-ie .footer-content.uk-content {
	display:none !important;
}



/* ==========================================================================
#Footer Plus Minus Icon
========================================================================== */

footer .plus-minus-icon {
	margin-left: .5rem;
	&:before,&:after {
		background-color: $title-font-color;
	}
	
	@include media-query($small-up) {
		display:none;
	}
}

.active > .plus-minus-icon {
	&:before, &:after {
		-webkit-transform: rotate(90deg);
    	transform: rotate(90deg);
	}
}

/* ==========================================================================
#Footer Links
========================================================================== */

.footer-links {
	list-style: none;
	margin: 0;
	padding: 0;
	
	li {
		margin-bottom: 10px;

		&:last-child {
			margin-bottom: 0px;
		}
		
		@include media-query($medium-up) {
			text-align: left;
			margin-bottom: 0px;
		}
	}
	
	a {
		text-decoration: none;
		font-size: 12px;
		line-height: 20px;
		letter-spacing: 0.5px;
		display: block;
		width: 100%;
		text-align: left;

		@include media-query($medium-up) {
			text-align: center;
		}
		
		&:hover {
			text-decoration: underline;
		}
	}
}

/* ==========================================================================
#Footer Copy
========================================================================== */

.footer-copy {
	padding: 5px 0;
	margin-top: 0px;
	background-color:#fff;
	color:#000;
	font-size: 12px;
	line-height: 20px;
	letter-spacing: 0.5px;
	width: 100%;
	text-align: center;

	@include media-query($medium-up) {
		text-align: left;
		padding:1rem 0;
	}
	
	a {
		color:#fff;
		text-decoration: underline;
	}
	
	.icon-velstar-logo {
		width:60px;
	}

	> .container-fluid {
		.row {
			padding: 0 15px;
		}
	}
}


/* ==========================================================================
#Footer Social Links
========================================================================== */

.footer-social {
	
	ul {
		padding:0;
		margin:0;
		display: flex;
		flex-direction: row;
		justify-content: center;
	}
	
	li {
		display:block;
		float:left;
		width:30px;
		height:30px;
		margin-right: 20px;

		&:last-child {
			margin-right: 0px;
		}
		
		&:hover {
		}
		
		& + li {
			margin-left: 5px;
		}
	}
	
	a {
		display:flex;
		width:100%;
		height:100%;
		justify-content: center;
		align-items: center;

		&:hover {
			color: transparent;
		}
	}
	
	.icon {
		width: 100%;
		height: 100%;
	}
}
/* Table of Contents
==================================================

    #Parallax

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

/* ==========================================================================
#Parallax
========================================================================== */

.jarallax {
    position: relative;
    z-index: 0;
    
    @include media-query($large-up) {
        height:500px;
    }

    .jarallax-img {
        position: absolute;
        object-fit: cover;
        /* support for plugin https://github.com/bfred-it/object-fit-images */
        font-family: 'object-fit: cover;';
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: -1;
    }

    .jarallax-static {
        position:static;
        height:inherit;
        width:100%;
        @include media-query($large-up) {
            display:none;
        }

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

    div[id*="jarallax-container"] {
        @include media-query($large-down) {
            display:none;
        }
    }

}

/* ==========================================================================
#Snippets
========================================================================== */

/* Table of Contents
==================================================

	#Site Navigation
	#Navigation Overlay
	#Plus / Minus Icon

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

/* ==========================================================================
#Site Navigation
========================================================================== */

#site-navigation {
	width: 100vw;
	z-index: 100;
	//display: flex;
	//flex-direction: column;
	//flex-wrap: wrap;
	
	@include media-query($small-up) {
		width:75%;
	}
	
	@include media-query($large-down) {
		position: fixed;
		top:0px;
		bottom:0;
		left:0;
		//padding:4rem 0 0;
		background-color: #fff;
		transform:translateX(-100%);
		overflow-x:hidden;
		transition: top .3s linear;
		
	}
	
	@include media-query($large-up) {
		width:100%;
		max-width: 50%;
		margin-left:auto;
		margin-right:auto;
		margin-top: 16px;
	}
	
	@include media-query($widescreen) {
		max-width: 837px;
	}

	@include media-query($small-down) {
		top: 0px;
	}

	&.top {
		@include media-query($large-down) {
			top: 0px;
			transition: top .3s linear;
		}

		.top-section {
			border: none !important;
		}
	}
	
	&.active {
		transform:translateX(0%);
	}

	&.transition {
		//BG: Adding class via JS to prevent flicker when resizing.
		@include media-query($large-down) {
			transition: all .3s linear;
		}
	}
	
	ul {
		margin: 0;
		padding: 0;
		list-style:none;
		border-top: 1px solid #000;

		@include media-query($large-up) {
			border-top: none;
		}

		&.top-level {
			overflow-x:hidden;
			overflow-y: auto;
			//height: 100%;
			height: calc(100% - 125px);
		}
	}
	
	a {
		display:block;
		color:#000;
		text-decoration: none;
		transition: color .4s linear;

		@include media-query($large-up) {
			color: #fff;
		}

		svg {
			path {
				fill: none;
				stroke: #000;
			}
		}
	}
	
	.sub-menu-container {
		display: none;

		> .container-fluid {
			background-color: transparent;
			position: relative;
			z-index: 15;

			> .row {
				background-color: transparent;
			}
		}

		ul {
			@include media-query($large-up) {
				width: 100%;
				float:left;
			}

			@include media-query($widescreen) {
				width:200px;
			}

			a {
				color: #000;
			}

			> li > a {
				display:block;
				padding:.7rem 1.5rem;

				@include media-query($large-down) {
					&:hover {
						background-color: $gray-600;
					}
				}

				@include media-query($large-up) {
					//color:$brand-primary;
					font-size:0.875rem; //14px; 
					&:hover {
						text-decoration: underline;
					}
				}
			}
		}
		
		@include media-query($large-up) {
			position: absolute;
			left:-15px;
			width: 100vw;
			box-sizing: border-box;
			background-color: transparent;
			visibility: hidden;
			opacity: 0;
			display: block;
			padding-left: 150px;
			padding-right: 150px;
			transition: all 0.1s linear;

			ul > li {
				width:100%;
			}
		}

	}
	
	.menu-parent-link .icon {
		margin-right: .5rem;
	}
	
	//Top Level Nav
	> ul {

	 	@include media-query($large-up) {
			display:flex;
			flex-direction:row;
		}
			> li {
				
			@include media-query($large-up) {
				width:15%;
				
				/* one item */
				&:first-child:nth-last-child(1) {
				/* -or- li:only-child { */
					width: 100%;
				}

				/* two items */
				&:first-child:nth-last-child(2),
				&:first-child:nth-last-child(2) ~ li {
					width: 50%;
				}

				/* three items */
				&:first-child:nth-last-child(3),
				&:first-child:nth-last-child(3) ~ li {
					width: 33.3333%;
				}

				/* four items */
				&:first-child:nth-last-child(4),
				&:first-child:nth-last-child(4) ~ li {
					width: 25%;
				}
				
				/* five items */
				&:first-child:nth-last-child(5),
				&:first-child:nth-last-child(5) ~ li {
					width: 20%;
				}
				
				/* six items */
				&:first-child:nth-last-child(6),
				&:first-child:nth-last-child(6) ~ li {
					width: 16.66%;
				}
				
				
				&:hover, &.active {
					> a {
						color: #fff;
					}
					
					> .sub-menu {
						display:flex !important;
						flex-wrap:wrap;
					}
				}
			}
				
			&.has-child > a {
				svg.icon{
					display: block;
					transition: all .3s linear;
					width: 15px;
					height: 15px;

					@include media-query($large-up) {
						width:10px;
						margin-left: .5rem;
						display: none !important;
					}

					path {
						stroke-width: 1px;
						width: 100%;
						height: 100%;
					}
				}
				
				.plus-minus-icon {
					display:block;
					
					@include media-query($large-up) {
						display:none;
					}
				}
			}

			&.menu-item-sale > a {
				font-weight:600;
			}

			&.active {
				> a {
					
					@include media-query($large-up) {
						> span:before {
							visibility: visible; 
							transform: scaleX(1);
						}
					}

					svg {
						transform: rotate(90deg);
						transition: all .3s linear;

						path {
			
						}
					}
				}

				.sub-menu-container {
					visibility: visible;
					opacity: 1;
					transition: all .3s linear;
				}
			} 

			> a {
				display:flex;
				align-items:center;
				justify-content: space-between;
				padding-top: 15px;
				padding-bottom: 15px;
				padding-left: ($gutter);
				padding-right: ($gutter / 2);
				font-size: 18px;
				line-height: 18px;
				letter-spacing:1px;
				font-weight:100;
				
				@include media-query($large) {
					padding-left: 0;
					padding-right: 0;
				}
				
				@include media-query($large-up) {
					justify-content: center;
					text-align:center;
					padding-top:1rem;
					padding-bottom:1rem;
					padding-left: 0;
					padding-right: 0;
					font-size: 16px;
					line-height: 16px;
				}
				
				@include media-query($widescreen) {

				}

				&:hover {
					@include media-query($large-down) {

					}
					
					@include media-query($large-up) {
						> span:before {
							visibility: visible;
    						transform: scaleX(1);
						}
					}
				}

				@include media-query(large-up) {
					> span {
						display:block;
						position: relative;

						&:before {
							content:"";
							position: absolute;
							width:100%;
							height:2px;
							bottom:-2px;
							left:0;
							background-color:$brand-secondary;
							visibility: hidden;
							transform: scaleX(0);
							transition:all .25s linear;
						}
					}
				}
				
				.plus-minus-icon {
					display:none;
				}
				
				svg.icon {
					display:none;
				}

				&.noLink {
					@include media-query($large-up) {
						cursor: auto;
					}
				}
			}
		}
	}

	.mobile-Top-Link {
		@include media-query($large-up) {
			display: none !important;
		}
		
		a {
			padding: 15px 0px 15px 15px;

			&:hover {
				background-color: $brand-primary;
			}
		}
	}

	//Sub Menu Row
	.sub-menu-row {
		display:flex;
		flex-direction:column;
		width: 100%;

		@include media-query($large-up) {
			flex-direction:row;
			width:50%;
		}

		.sub-menu {
			width:100%;

			@include media-query($large-up) {
				width:50%;
			}

			@include media-query($large-down) {
				> ul {
					display:none;
					border-top: 0px;

					li {

					}

					a {
						transition:all .3s ease-in-out;

						&:hover {
							background-color: $brand-primary;
							text-decoration: none;
							color: #000;
						}
					}
				}

				&.active {
					 background-color: $gray-400;
				}
			}

			@include media-query($large-up) {
				padding: 15px;
				padding-bottom: 60px;
			}

			&.multiple {
				@include media-query($large-up) {
					display:inline-flex;
					flex-direction:row;
					width:49.5%;
				}
			}

			&.image {
				@include media-query($large-up) {
					display:flex;
					flex-direction:column;
					max-width:232px;

					img {
						transition:all .3s ease-in-out;
					}

					&:hover {
						img {
							filter: grayscale(100%);
						}
					}
				}

				.sub-menu-title {
					@include media-query($large-up) {
						margin-top:auto;
					}
				}
			}

			&.single {
				@include media-query($large-down) {
					> ul {
						display:block;
						background-color:$gray-200;

						> li > a {
							line-height:1rem;
							padding:.7rem 25px;
						}
					}
				}

				@include media-query($large-up) {
					padding-top:0;
					padding-bottom:0;
				}
			}

			.plus-minus-icon:before,.plus-minus-icon:after {
				background-color: #000;
			}


			&.mobile-show {
				ul {
					display: block;
					
					@include media-query($large-up) {
						margin-top: 63px;
					}
				}
			}

			h4 {
				margin: 0px;
				font-size: 12px;
				line-height: 15px;
				letter-spacing: 1px;
				text-transform: uppercase;
				padding: 15px 0px 15px 15px;
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;
				justify-content: space-between;
				align-items: center;
				cursor: pointer;

				@include media-query($large-up) {
					margin-top: 24px;
					margin-bottom: 15px;
					font-size: 20px;
					line-height: 24px;
					letter-spacing: 1.25px;
					padding: 0px;
					text-transform: capitalize;
					cursor: auto;
				}

				svg.icon {
					display: block;
					transition: all .3s linear;
					width: 15px;
					height: 15px;

					@include media-query($large-up) {
						display: none !important;
					}

					path {
						fill: none;
						stroke: #000;
						stroke-width: 1px;
						width: 100%;
						height: 100%;
					}
				}

				&.active {

					svg.icon {
						transform: rotate(90deg);
						transition: all .3s linear;
					}
				}
			}

			ul {
				li {
					a {
						font-size: 12px;
						line-height: 15px;
						letter-spacing: 1px;
						padding: 15px 15px;

						@include media-query($large-up) {
							padding: 0px;
							font-size: 16px;
							line-height: 25px;
						}
					}
				}
			}
		}
	}

	// Nav variations
	.menu-wrapper {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-between;

		&.two-Nav {
			.sub-menu-row {
				width: 100%;

				.sub-menu {
					width: 100%;
				}
			}
		}
	}

	.featured-wrapper {
		.sub-menu-row {
			width: 100%;
		}
	}

	//Featured Menus
	.featured-menu-link {
		display: none;

		@include media-query($large-up) {
			position: relative;
			width:48%;
			margin-top: 39px;
			margin-bottom: 60px;
			display: block;
		}

		@include media-query($widescreen-ultra) {
			max-width: 375px;
		}

		h3 {
			width: 100%;
			margin: 0px;

			@include media-query($large-down) {
				transition:background-color .3s ease-in-out;
				&:hover {
					background-color: $gray-400;
				}
			}

			@include media-query($large-up) {
				position: absolute;
				bottom: 0;
				left:0;
				z-index:2;
				border-top:0;
				padding: 0;
				margin: 0 0 50px;
			}

			> a {
				font-size: 26px;
				line-height: 29px;
				letter-spacing: 0.5px;
				display: block;
				box-sizing: border-box;
				padding: 15px 10px;
				font-size: $font-size-base;
				line-height: $line-height-base;
				letter-spacing: 1px;
				font-family: $title-font;

				&:hover {
					text-decoration: none;
				}

				@include media-query($large-up) {
					color:#fff !important;
					text-transform: capitalize;
					font-size: 26px;
					line-height: 29px;
					letter-spacing: 0.5px;
					padding: 0 15px !important;
				}
			}
		}

		> a.ShopNow {
			margin-bottom: 16px;
			position: absolute;
			bottom: 0px;
			color: #fff !important;
			font-size: 18px;
			line-height: 22px;
			padding-left: 15px !important;
			z-index: 2;
			display: none;

			@include media-query($large-up) {
				display: block;
			}
		}

		.sub-menu-image {
			a {
				display:block;
				margin: 0;
				padding: 0;
			}

			img {
				transition: all .3s linear;
			}
		}

		&:hover {
			img {
				filter: grayscale(100%);
			}
		}
	}
}

/* ==========================================================================
#Navigation Overlay
========================================================================== */

.nav-overlay {
	visibility:hidden;
	position: fixed;
	top:0;
	left:0;
	right:0;
	bottom:0;
	background-color: rgba(#000,0);
	opacity:0;
	z-index:-1;
	transition:all .2s ease-in-out;
	width: 100vw;
	
	&.active {
		visibility: visible;
		background-color: rgba(#000,.5);
		opacity:1;
		z-index:99;
	}
}

/* ==========================================================================
#Navigation Overlay Desktop
========================================================================== */

.nav-overlay-desktop {
	visibility:hidden;
	position: fixed;
	top:0;
	left:0;
	right:0;
	bottom:0;
	background-color: rgba(#fff,0.8);
	opacity:0;
	z-index:-1;
	transition:all .3s linear;
	
	@include media-query($large-down) {
		display: none !important;
	}
	
	&.active {
		visibility: visible;
		opacity:1;
		z-index:9;
		transition:all .3s linear;
	}
}

/* ==========================================================================
#Plus / Minus Icon
========================================================================== */

.plus-minus-icon {
	position:relative;
	width:15px;
	height:15px;
	
	@include media-query($large-up) {
		display:none;
	}
	
	&:before, &:after {
		display:block;
		position: absolute;
		left:50%;
  		width: 2px;
  		height: 12px;
  		background-color: #fff;
  		-webkit-transform-origin: 50% 50%;
        transform-origin: 50% 50%;
  		transition: 0.5s all ease;
		content:'';
	}
	
	&:before {
		-webkit-transform: rotate(-90deg);
        transform: rotate(-90deg);
	}
}

.active > a > .plus-minus-icon {
	&:before, &:after {
		-webkit-transform: rotate(90deg);
    	transform: rotate(90deg);
	}
}

.active > .sub-menu-title > .plus-minus-icon {
	&:before, &:after {
		-webkit-transform: rotate(90deg);
    	transform: rotate(90deg);
	}
}

/* ==========================================================================
#nav-footer
========================================================================== */

.nav-footer {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
	width: 100%;
	margin-top: auto;
	padding-top: 20px;
	align-content: center;
	position: absolute;
	bottom: 0px;

	@include media-query($large-up) {
		display: none;
	}

	.nav-wishlist {
		width: 49.5%;
	}

	.nav-account {
		width: 49.5%;
	}

	.space {
		width: 1px;
		height: 20px;
		background: #000;
		display: block;
		position: relative;
		margin: 0px;
		padding: 0px;
		align-self: center
	}

	a {
		font-size: 16px;
		line-height: 16px;
		letter-spacing: 0.67px;
		padding: 15px 0;
		display: flex !important;
		flex-direction: row;
		justify-content: center;
		align-items: center;

		svg {
			margin-right: 18px;
			vertical-align: top;

			g {
				width: 100%;
				height: 100%;
			}
		}

		.topbadge {
			align-self: flex-end;
			color: #000 !important;
			background-color: transparent !important;
			border-radius: 0px !important;
			font-size: 16px;
			line-height: 16px;
			max-width: none !important;
			max-height: none !important;
			text-decoration: none !important;
			font-family: $body-font !important;
			font-weight: 100;
			padding: 0px !important;
			display: inline-block;
			margin: 0px !important;
			margin-left: 5px !important;

			&:before {
				content: "("
			}

			&:after {
				content: ")";
			}
		}
	}
}
/* Table of Contents
==================================================

    #breadcrumbs

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

/* ==========================================================================
#breadcrumbs
========================================================================== */
.breadcrumb {
	margin-bottom: 10px;

	@include media-query($large-up) {
		margin-bottom: 0px;
	}

	a {
		font-size: 12px;
		line-height: 15px;
		text-decoration: none;
	}

	span:not(.seperator) {
		text-transform: uppercase;
		font-size: 12px;
		line-height: 15px;
	}
	
	body.template-product & {
		margin-bottom: 1rem;
		
		@include media-query($medium-down) {
			.container {
				padding-left: 0;
				padding-right: 0;
			}
		}
	}
	
	@include media-query($medium-up) {
		body.template-product & {
			border-bottom: 0px;
		}
	}
}
/* Table of Contents
==================================================

    #Swatch
    #Swatch Custom
    #Swatch Size
    #Size Guide
    #Quickview Swatch

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

/* ==========================================================================
#Swatch
========================================================================== */
.swatch { 
  margin:1.5em 0; 
}
/* Label */
.swatch .header {
  margin: 0.5em 0;
}
/* Hide radio buttons.*/
.swatch input { 
  display:none;
}
.swatch label {
  /* Rounded corners */
  -webkit-border-radius:50%;
  -moz-border-radius:50%;
  border-radius:50%;
  /* To give width and height */
  float:left;
  /* Color swatches contain no text so they need to have a width. */
  width:30px !important; 
  height:30px !important;
  /* No extra spacing between them */
  margin:0;
  /* The border when the button is not selected */
  border:$gray-200 1px solid;
  /* Background color */
  background-color:#ddd;
  /* Styling text */
  font-size:13px;
  text-align:center;
  line-height:35px;
  white-space:nowrap;
  text-transform:uppercase;
	
	@include media-query($large-up) {
		width:45px !important;
		height:45px !important;
	}
}
.swatch-element label { padding:0 10px; }
.color.swatch-element label { padding:0; }
/* Styling selected swatch */
/* Slightly raised */
.swatch input:checked + label {
  //border:3px solid $gray-700;
} 
.swatch .swatch-element {
  margin:.5rem 0 0 .5rem;
  cursor:pointer;
  transition:all .3s ease-in-out;
}
// /* Image with the cross in it */
// .crossed-out { position:absolute; width:100%; height:100%; left:0; top:0; }
// .swatch .swatch-element .crossed-out { display:none; }
// .swatch .swatch-element.soldout .crossed-out { display:block; }
// .swatch .swatch-element.soldout label {
//   filter: alpha(opacity=60); /* internet explorer */
//   -khtml-opacity: 0.6;      /* khtml, old safari */
//   -moz-opacity: 0.6;       /* mozilla, netscape */
//   opacity: 0.6;           /* fx, safari, opera */
// }
/* Tooltips */
.swatch .tooltip {
  text-align:center;
  background-color:$brand-secondary;
  color:#fff;
  bottom:100%;
  padding: 10px;
  display:block;
  position:absolute;
  width:110px;
  left:calc(-73% + 3px);
  margin-bottom:15px;
  /* Make it invisible by default */
  filter:alpha(opacity=0);
  -khtml-opacity: 0;
  -moz-opacity: 0;
  opacity:0;
  visibility:hidden;
  /* Animations */
  -webkit-transform: translateY(10px);
     -moz-transform: translateY(10px);
      -ms-transform: translateY(10px);
       -o-transform: translateY(10px);
          transform: translateY(10px);
  -webkit-transition: all .25s ease-out;
     -moz-transition: all .25s ease-out;
      -ms-transition: all .25s ease-out;
       -o-transition: all .25s ease-out;
          transition: all .25s ease-out;
  -webkit-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
     -moz-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
      -ms-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
       -o-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
          box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
  z-index: 10000;
  -moz-box-sizing:border-box; 
  -webkit-box-sizing:border-box; 
  box-sizing:border-box;
  font-size:0.875rem;
	
	@include media-query($large-down) {
		left:-120%;
	}
	
	
}
.swatch .tooltip:before {
  bottom:-20px;
  content:" ";
  display:block;
  height:20px;
  left:0;
  position:absolute;
  width:100%;
}
/* CSS triangle */
.swatch .tooltip:after {
  border-left:solid transparent 10px;
  border-right:solid transparent 10px;
  border-top:solid $brand-secondary 10px;
  bottom:-10px;
  content:" ";
  height:0;
  left:50%;
  margin-left:-13px;
  position:absolute;
  width:0;
}
.swatch .swatch-element:hover .tooltip {
  filter:alpha(opacity=100);
  -khtml-opacity:1;
  -moz-opacity:1;
  opacity:1;
  visibility:visible;
  -webkit-transform:translateY(0px);
     -moz-transform:translateY(0px);
      -ms-transform:translateY(0px);
       -o-transform:translateY(0px);
          transform:translateY(0px);
}
.swatch.error {
  background-color:#E8D2D2!important;
  color:#333!important;
  padding:1em;
  border-radius:5px;
}
.swatch.error p {
  margin:0.7em 0;
}
.swatch.error p:first-child {
  margin-top:0;
}
.swatch.error p:last-child {
  margin-bottom:0;
}
.swatch.error code {
  font-family:monospace;
}


/* ==========================================================================
#Swatch Custom
========================================================================== */

.swatch-size {
	//display:none;
}

.variant-color {
	display:none;
}

.swatch-color {
  display:none;
	margin-bottom: 2rem;
}

.swatch-header {
  text-align:center;
  font-size:1.125rem;
  font-weight:300;
  letter-spacing:3px;
	padding-bottom: .5rem;
}

.variant-size {
	//margin-bottom: 10px;

	select {
    //width:100%;
	}
}

/* ==========================================================================
#Swatch Size
========================================================================== */

.swatch-size {

	input:checked+label {
		background-color:$gray-100;
    color:#000;
    outline:1px solid #000;
	}

	.swatch-element label {
		display:flex;
		flex-direction:column;
		align-items:center;
		justify-content:center;
		width:31px !important;
    height:31px !important;
    font-size:0.6875rem;
		border-radius:0px !important;
		border:3px solid #fff;
    background-color:$gray-100;
    outline:1px solid #fff;
    cursor:pointer;
    transition:all .3s ease-in-out;

    &:hover {
      background-color:$gray-300;
    }
  }
  
  // .swatch-element.soldout label {
  //   background-color:$gray-200;
  //   color:$gray-700;
  // }
}

/* ==========================================================================
#Size Guide
========================================================================== */

.swatch .swatch-header .size-guide {
  display:none;
}

.swatch-size {
  display:flex;
  flex-direction:row;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;

  .swatch-header {
    width:100%;
  }
}


/* ==========================================================================
#Quickview Swatch
========================================================================== */

.product-quickview-frame {

  .swatch {
    margin-left:-10px;
    margin-right:-10px;
  }

  .swatch-header {
    margin-left:10px;
    margin-right:10px;
  }

  .swatch-element {
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    margin:0px 10px 10px;
    border:1px solid $brand-secondary;
    color:#000;
    height:55px;
    width:55px;
    cursor: pointer;

    &.active {
      background-color:$brand-secondary;
      color:#fff;
    }
  }
}
/* Table of Contents
==================================================

	#Social Sharing Products

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

/* ==========================================================================
#Social Sharing Products
========================================================================== */

.social-sharing-products {
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
    align-items: center;
    justify-content:center;
    list-style: none;
    margin: 1.5rem 0px 0;
    padding: 0;

    @include media-query($medium-up) {
        margin-top: 35px;
    }

    li {
        margin-right: 20px;

        &:last-of-type {
            margin-right: 0px;
        }
    }

    .text {
        font-size:1.125rem; //18px
        text-transform: uppercase;
        width:100%;
        text-align:center;

        @include media-query($small) {
            width:auto;
            margin-right: 2rem;
        }

        @include media-query($widescreen) {
            width:auto;
            margin-right: 2rem;
        }
    }

    li:not(.text) > a {
        display:flex;
        flex-direction:column;
        justify-content: center;
        align-items: center;
        width:30px;
        height:30px;
        transition:all .3s ease-in-out;

        &:hover {
 
        }

        .icon {
            fill:#fff;
            width: 100%;
            height: 100%;
        }
    }
}
/* Table of Contents
==================================================

    #Size Guide Container
    #Size Guide Overlay
    #Size Guide Tabs
    #Size Guide Table

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

/* ==========================================================================
#Size Guide Container
========================================================================== */

.template-product .size-guide {
    display: block;
    width: 100%;
    text-align: center;
    text-transform: uppercase;
    font-size: 0.75rem;
    font-weight: 300;
    letter-spacing: 3px;
    margin-bottom: 1.5rem;
    text-decoration:underline;
}

.size-guide-frame {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    top:50%;
    left:0;
    right:0;
    margin:0 auto;
    transform: translateY(-50%);
    z-index:101;
    transition:all .3s ease-in-out;

    &.active {
        visibility: visible;
        opacity:1;
    }
}

.size-guide-container {
    background-color: #fff;
    padding:1rem;
    overflow:hidden;

    p {
        font-size:0.75rem;
    }
}

.size-guide-close {
    float:right;
    cursor: pointer;
}

/* ==========================================================================
#Size Guide Overlay
========================================================================== */

.size-guide-overlay {
    visibility: hidden;
    opacity: 0;
    position:fixed;
    top:0;
    right:0;
    bottom:0;
    left:0;
    background-color: rgba(#000,.5);
    z-index:100;
    transition:all .3s ease-in-out;

    &.active {
        visibility: visible;
        opacity:1;
    }
}

/* ==========================================================================
#Size Guide Tabs
========================================================================== */

.size-tabs {
    display:flex;
    flex-direction: row;
    flex-wrap:wrap;
    justify-content: center;
    align-items:stretch;
    list-style:none;
    padding:0;
    margin:0 0 1rem;

    li {
        width:20%;
        text-align:center;
        border:1px solid #000;
        padding:.5rem;
        border-right:none;

        &:last-of-type {
            border-right:1px solid #000;
        }

        &.active {
            background-color: #000;

            a {
                color:#fff;
            }
        }
    }

    a {
        display:flex;
        flex-direction:column;
        justify-content: center;
        height:100%;
        width:100%;
        font-size:0.875rem;
        align-self:center;
    }
}



/* ==========================================================================
#Size Guide Table
========================================================================== */

.size-guide-container table {
    display:none;
	width:100%;
	border-left:1px solid #000;
    margin-bottom: 2rem;
    
    &.active {
        display:table;
    }

	thead {
		background-color: #000;

		// @include media-query($large-down) {
		// 	display:none;
		// }

		th {
			border-right:1px solid #000;
			color:#fff;
			padding:.8rem .5rem;
			text-transform: uppercase;
			text-align:center;
		}
	}

	tbody {

		tr {
            border-bottom:1px solid #000;

			&:nth-child(odd) {
				background-color: $gray-100;
			}

			// &:first-of-type {
			// 	border-top:10px solid #000;
			// }

			// @include media-query($large-down) {
			// 	border-bottom:1px solid #000;
			// }
		}
		td {
			padding:.8rem .5rem;
			text-align:center;
			border-right:1px solid #000;

			@include media-query($large-up) {
				border-bottom:1px solid #000;
			}

			// @include media-query($large-down) {
			// 	display:block;
			// 	text-align:left;
			// }

			// &:before {
			// 	@include media-query($large-down) {
			// 		display: block;
			// 		content: attr(data-label);
			// 		font-weight:700;
			// 		text-transform:uppercase;
			// 		color:#000;
			// 	}
			// }
		}
    }
    .weight-kg, .weight-pounds, .height-cm, .height-inch {
		display:block;
	}

	.weight-kg, .height-cm {
		@include media-query($large-down) {
			border-bottom:1px dotted #c3c3c3;
			padding-bottom:.3rem;
			margin-bottom:.3rem;
		}
		@include media-query($large-up) {
			display:block;
			width:calc(100% + 1rem);
			margin-left: -.5rem;
			margin-bottom: .5rem;
			padding-bottom: .5rem;
			border-bottom:1px dotted #c3c3c3;
		}
	}
}
/* Table of Contents
==================================================

    #Our Store specific styling

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

/* ==========================================================================
#Our Store
========================================================================== */

.our-store {

    h2 {
        margin: 0px;
        font-size: 20px;
        line-height: 21px;
        text-transform: uppercase;
        letter-spacing: 1.17px;
        margin-bottom: 10px;
    }

    .rte {
        p {
            font-size: 14px;
            line-height: 25px;
            margin: 0px;
        }
    }
    
    a {
        font-size: 14px;
        line-height: 25px;
    }

    span {
        font-size: 14px;
        line-height: 25px;
    }

    .store-map {
        filter: grayscale(100%);
    }

}

.no-padding p {
  margin-bottom: 0;
  font-size: 0.875rem;
}

.no-padding p strong {
  font-weight: 900;
}








:root {
  --alpha-button-background: 1;
  --alpha-button-border: 1;
  --alpha-link: 0.85;
  --alpha-badge-border: 0.1;
  --focused-base-outline: 0.2rem solid rgba(var(--color-foreground), 0.5);
  --focused-base-outline-offset: 0.3rem;
  --focused-base-box-shadow: 0 0 0 0.3rem rgb(var(--color-background)), 0 0 0.5rem 0.4rem rgba(var(--color-foreground), 0.3);
}

.product-card-wrapper .card,
.contains-card--product {
  --border-radius: var(--product-card-corner-radius);
  --border-width: var(--product-card-border-width);
  --border-opacity: var(--product-card-border-opacity);
  --shadow-horizontal-offset: var(--product-card-shadow-horizontal-offset);
  --shadow-vertical-offset: var(--product-card-shadow-vertical-offset);
  --shadow-blur-radius: var(--product-card-shadow-blur-radius);
  --shadow-opacity: var(--product-card-shadow-opacity);
  --shadow-visible: var(--product-card-shadow-visible);
  --image-padding: var(--product-card-image-padding);
  --text-alignment: var(--product-card-text-alignment);
}

.collection-card-wrapper .card,
.contains-card--collection {
  --border-radius: var(--collection-card-corner-radius);
  --border-width: var(--collection-card-border-width);
  --border-opacity: var(--collection-card-border-opacity);
  --shadow-horizontal-offset: var(--collection-card-shadow-horizontal-offset);
  --shadow-vertical-offset: var(--collection-card-shadow-vertical-offset);
  --shadow-blur-radius: var(--collection-card-shadow-blur-radius);
  --shadow-opacity: var(--collection-card-shadow-opacity);
  --shadow-visible: var(--collection-card-shadow-visible);
  --image-padding: var(--collection-card-image-padding);
  --text-alignment: var(--collection-card-text-alignment);
}

.article-card-wrapper .card,
.contains-card--article {
  --border-radius: var(--blog-card-corner-radius);
  --border-width: var(--blog-card-border-width);
  --border-opacity: var(--blog-card-border-opacity);
  --shadow-horizontal-offset: var(--blog-card-shadow-horizontal-offset);
  --shadow-vertical-offset: var(--blog-card-shadow-vertical-offset);
  --shadow-blur-radius: var(--blog-card-shadow-blur-radius);
  --shadow-opacity: var(--blog-card-shadow-opacity);
  --shadow-visible: var(--blog-card-shadow-visible);
  --image-padding: var(--blog-card-image-padding);
  --text-alignment: var(--blog-card-text-alignment);
}

.contains-content-container,
.content-container {
  --border-radius: var(--text-boxes-radius);
  --border-width: var(--text-boxes-border-width);
  --border-opacity: var(--text-boxes-border-opacity);
  --shadow-horizontal-offset: var(--text-boxes-shadow-horizontal-offset);
  --shadow-vertical-offset: var(--text-boxes-shadow-vertical-offset);
  --shadow-blur-radius: var(--text-boxes-shadow-blur-radius);
  --shadow-opacity: var(--text-boxes-shadow-opacity);
  --shadow-visible: var(--text-boxes-shadow-visible);
}

.contains-media,
.global-media-settings {
  --border-radius: var(--media-radius);
  --border-width: var(--media-border-width);
  --border-opacity: var(--media-border-opacity);
  --shadow-horizontal-offset: var(--media-shadow-horizontal-offset);
  --shadow-vertical-offset: var(--media-shadow-vertical-offset);
  --shadow-blur-radius: var(--media-shadow-blur-radius);
  --shadow-opacity: var(--media-shadow-opacity);
  --shadow-visible: var(--media-shadow-visible);
}

/* base */

.page-width {
  max-width: var(--page-width);
  margin: 0 auto;
  padding: 0 1.5rem;
}

body:has(.section-header .drawer-menu) .announcement-bar-section .page-width {
  max-width: 100%;
}

.page-width.drawer-menu {
  max-width: 100%;
}

.page-width-desktop {
  padding: 0;
  margin: 0 auto;
}

.utility-bar__grid.page-width {
  padding-left: 3rem;
  padding-right: 3rem;
}

@media screen and (min-width: 750px) {
  .page-width {
    padding: 0 3rem;
  }

  .header.page-width,
  .utility-bar__grid.page-width {
    padding-left: 3.2rem;
    padding-right: 3.2rem;
  }

  .page-width--narrow {
    padding: 0 9rem;
  }

  .page-width-desktop {
    padding: 0;
  }

  .page-width-tablet {
    padding: 0 5rem;
  }
}

@media screen and (min-width: 990px) {
  .header:not(.drawer-menu).page-width {
    padding-left: 3rem;
    padding-right: 3rem;
  }

  .page-width--narrow {
    max-width: 72.6rem;
    padding: 0;
  }

  .page-width-desktop {
    max-width: var(--page-width);
    padding: 0 3rem;
  }
}

.isolate {
  position: relative;
  z-index: 0;
}

.section + .section {
  margin-top: var(--spacing-sections-mobile);
}

@media screen and (min-width: 750px) {
  .section + .section {
    margin-top: var(--spacing-sections-desktop);
  }
}

.element-margin-top {
  margin-top: 5rem;
}

@media screen and (min-width: 750px) {
  .element-margin {
    margin-top: calc(5rem + var(--page-width-margin));
  }
}

.background-secondary {
  background-color: rgba(var(--color-foreground), 0.04);
}

.grid-auto-flow {
  display: grid;
  grid-auto-flow: column;
}

.page-margin,
.shopify-challenge__container {
  margin: 7rem auto;
}

.rte-width {
  max-width: 82rem;
  margin: 0 auto 2rem;
}

.list-unstyled {
  margin: 0;
  padding: 0;
  list-style: none;
}

.hidden {
  display: none !important;
}

.visually-hidden {
  position: absolute !important;
  overflow: hidden;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip: rect(0 0 0 0);
  word-wrap: normal !important;
}

.visually-hidden--inline {
  margin: 0;
  height: 1em;
}

.overflow-hidden {
  overflow: hidden;
}

.skip-to-content-link:focus {
  z-index: 9999;
  position: inherit;
  overflow: auto;
  width: auto;
  height: auto;
  clip: auto;
}

.full-width-link {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
}

::selection {
  background-color: rgba(var(--color-foreground), 0.2);
}

.text-body {
  font-size: 1.5rem;
  letter-spacing: 0.06rem;
  line-height: calc(1 + 0.8 / var(--font-body-scale));
  font-family: var(--font-body-family);
  font-style: var(--font-body-style);
  font-weight: var(--font-body-weight);
}

h1,
h2,
h3,
h4,
h5,
.h0,
.h1,
.h2,
.h3,
.h4,
.h5 {
  font-family: var(--font-heading-family);
  font-style: var(--font-heading-style);
  font-weight: var(--font-heading-weight);
  letter-spacing: calc(var(--font-heading-scale) * 0.06rem);
  color: rgb(var(--color-foreground));
  line-height: calc(1 + 0.3 / max(1, var(--font-heading-scale)));
  word-break: break-word;
}

.hxxl {
  font-size: clamp(calc(var(--font-heading-scale) * 5.6rem), 14vw, calc(var(--font-heading-scale) * 7.2rem));
  line-height: 1.1;
}

.hxl {
  font-size: calc(var(--font-heading-scale) * 5rem);
  line-height: calc(1 + 0.3 / max(1, var(--font-heading-scale)));
}

@media only screen and (min-width: 750px) {
  .hxl {
    font-size: calc(var(--font-heading-scale) * 6.2rem);
  }
}

.h0 {
  font-size: calc(var(--font-heading-scale) * 4rem);
}

@media only screen and (min-width: 750px) {
  .h0 {
    font-size: calc(var(--font-heading-scale) * 5.2rem);
  }
}

h1,
.h1 {
  font-size: calc(var(--font-heading-scale) * 3rem);
}

@media only screen and (min-width: 750px) {
  h1,
  .h1 {
    font-size: calc(var(--font-heading-scale) * 4rem);
  }
}

h2,
.h2 {
  font-size: calc(var(--font-heading-scale) * 2rem);
}

@media only screen and (min-width: 750px) {
  h2,
  .h2 {
    font-size: calc(var(--font-heading-scale) * 2.4rem);
  }
}

h3,
.h3 {
  font-size: calc(var(--font-heading-scale) * 1.7rem);
}

@media only screen and (min-width: 750px) {
  h3,
  .h3 {
    font-size: calc(var(--font-heading-scale) * 1.8rem);
  }
}

h4,
.h4 {
  font-family: var(--font-heading-family);
  font-style: var(--font-heading-style);
  font-size: calc(var(--font-heading-scale) * 1.5rem);
}

h5,
.h5 {
  font-size: calc(var(--font-heading-scale) * 1.2rem);
}

@media only screen and (min-width: 750px) {
  h5,
  .h5 {
    font-size: calc(var(--font-heading-scale) * 1.3rem);
  }
}

h6,
.h6 {
  color: rgba(var(--color-foreground), 0.75);
  margin-block-start: 1.67em;
  margin-block-end: 1.67em;
}

blockquote {
  font-style: italic;
  color: rgba(var(--color-foreground), 0.75);
  border-left: 0.2rem solid rgba(var(--color-foreground), 0.2);
  padding-left: 1rem;
}

@media screen and (min-width: 750px) {
  blockquote {
    padding-left: 1.5rem;
  }
}

.caption {
  font-size: 1rem;
  letter-spacing: 0.07rem;
  line-height: calc(1 + 0.7 / var(--font-body-scale));
}

@media screen and (min-width: 750px) {
  .caption {
    font-size: 1.2rem;
  }
}

.caption-with-letter-spacing {
  font-size: 1rem;
  letter-spacing: 0.13rem;
  line-height: calc(1 + 0.2 / var(--font-body-scale));
  text-transform: uppercase;
}

.caption-with-letter-spacing--medium {
  font-size: 1.2rem;
  letter-spacing: 0.16rem;
}

.caption-with-letter-spacing--large {
  font-size: 1.4rem;
  letter-spacing: 0.18rem;
}

.caption-large,
.customer .field input,
.customer select,
.field__input,
.form__label,
.select__select {
  font-size: 1.3rem;
  line-height: calc(1 + 0.5 / var(--font-body-scale));
  letter-spacing: 0.04rem;
}

.color-foreground {
  color: rgb(var(--color-foreground));
}

table:not([class]) {
  table-layout: fixed;
  border-collapse: collapse;
  font-size: 1.4rem;
  border-style: hidden;
  box-shadow: 0 0 0 0.1rem rgba(var(--color-foreground), 0.2);
  /* draws the table border  */
}

table:not([class]) td,
table:not([class]) th {
  padding: 1em;
  border: 0.1rem solid rgba(var(--color-foreground), 0.2);
}

@media screen and (max-width: 749px) {
  .small-hide {
    display: none !important;
  }
}

@media screen and (min-width: 750px) and (max-width: 989px) {
  .medium-hide {
    display: none !important;
  }
}

@media screen and (min-width: 990px) {
  .large-up-hide {
    display: none !important;
  }
}

.left {
  text-align: left;
}

.center {
  text-align: center;
}

.right {
  text-align: right;
}

.uppercase {
  text-transform: uppercase;
}

.light {
  opacity: 0.7;
}

a:empty,
ul:empty,
dl:empty,
div:empty,
section:empty,
article:empty,
p:empty,
h1:empty,
h2:empty,
h3:empty,
h4:empty,
h5:empty,
h6:empty {
  display: none;
}

.link,
.customer a {
  cursor: pointer;
  display: inline-block;
  border: none;
  box-shadow: none;
  text-decoration: underline;
  text-underline-offset: 0.3rem;
  color: rgb(var(--color-link));
  background-color: transparent;
  font-size: 1.4rem;
  font-family: inherit;
}

.link--text {
  color: rgb(var(--color-foreground));
}

.link--text:hover {
  color: rgba(var(--color-foreground), 0.75);
}

.link-with-icon {
  display: inline-flex;
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: 0.1rem;
  text-decoration: none;
  margin-bottom: 4.5rem;
  white-space: nowrap;
}

.link-with-icon .icon {
  width: 1.5rem;
  margin-left: 1rem;
}

a:not([href]) {
  cursor: not-allowed;
}

.circle-divider::after {
  content: '\2022';
  margin: 0 1.3rem 0 1.5rem;
}

.circle-divider:last-of-type::after {
  display: none;
}

hr {
  border: none;
  height: 0.1rem;
  background-color: rgba(var(--color-foreground), 0.2);
  display: block;
  margin: 5rem 0;
}

@media screen and (min-width: 750px) {
  hr {
    margin: 7rem 0;
  }
}

.full-unstyled-link {
  text-decoration: none;
  color: currentColor;
  display: block;
}

.placeholder {
  background-color: rgba(var(--color-foreground), 0.04);
  color: rgba(var(--color-foreground), 0.55);
  fill: rgba(var(--color-foreground), 0.55);
}

details > * {
  box-sizing: border-box;
}

.break {
  word-break: break-word;
}

.visibility-hidden {
  visibility: hidden;
}

@media (prefers-reduced-motion) {
  .motion-reduce {
    transition: none !important;
    animation: none !important;
  }
}

:root {
  --duration-short: 100ms;
  --duration-default: 200ms;
  --duration-announcement-bar: 250ms;
  --duration-medium: 300ms;
  --duration-long: 500ms;
  --duration-extra-long: 600ms;
  --duration-extra-longer: 750ms;
  --duration-extended: 3s;
  --ease-out-slow: cubic-bezier(0, 0, 0.3, 1);
  --animation-slide-in: slideIn var(--duration-extra-long) var(--ease-out-slow) forwards;
  --animation-fade-in: fadeIn var(--duration-extra-long) var(--ease-out-slow);
}

.underlined-link,
.customer a,
.inline-richtext a {
  text-underline-offset: 0.3rem;
  text-decoration-thickness: 0.1rem;
  transition: text-decoration-thickness ease 100ms;
}

.underlined-link,
.customer a {
  color: rgba(var(--color-link), var(--alpha-link));
}

.inline-richtext a,
.rte.inline-richtext a {
  color: currentColor;
}

.underlined-link:hover,
.customer a:hover,
.inline-richtext a:hover {
  color: rgb(var(--color-link));
  text-decoration-thickness: 0.2rem;
}

.icon-arrow {
  width: 1.5rem;
}

h3 .icon-arrow,
.h3 .icon-arrow {
  width: calc(var(--font-heading-scale) * 1.5rem);
}

/* arrow animation */
.animate-arrow .icon-arrow path {
  transform: translateX(-0.25rem);
  transition: transform var(--duration-short) ease;
}

.animate-arrow:hover .icon-arrow path {
  transform: translateX(-0.05rem);
}

.svg-wrapper {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 20px;
  height: 20px;
}

.svg-wrapper > svg {
  height: 100%;
  width: 100%;
}

/* base-details-summary */
summary {
  cursor: pointer;
  list-style: none;
  position: relative;
}

summary .icon-caret {
  position: absolute;
  height: 0.6rem;
  right: 1.5rem;
  top: calc(50% - 0.2rem);
}

summary::-webkit-details-marker {
  display: none;
}

.disclosure-has-popup {
  position: relative;
}

.disclosure-has-popup[open] > summary::before {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  display: block;
  cursor: default;
  content: ' ';
  background: transparent;
}

.disclosure-has-popup > summary::before {
  display: none;
}

.disclosure-has-popup[open] > summary + * {
  z-index: 100;
}

@media screen and (min-width: 750px) {
  .disclosure-has-popup[open] > summary + * {
    z-index: 4;
  }

  .facets .disclosure-has-popup[open] > summary + * {
    z-index: 2;
  }
}

.placeholder-svg {
  height: 100%;
  width: 100%;
}

/* base-focus */
/*
  Focus ring - default (with offset)
*/

*:focus {
  outline: 0;
  box-shadow: none;
}

*:focus-visible {
  outline: var(--focused-base-outline);
  outline-offset: var(--focused-base-outline-offset);
  box-shadow: var(--focused-base-box-shadow);
}

/* Fallback - for browsers that don't support :focus-visible, a fallback is set for :focus */
.focused {
  outline: var(--focused-base-outline);
  outline-offset: var(--focused-base-outline-offset);
  box-shadow: var(--focused-base-box-shadow);
}

/*
  Focus ring - inset
*/

.focus-inset:focus-visible {
  outline: 0.2rem solid rgba(var(--color-foreground), 0.5);
  outline-offset: -0.2rem;
  box-shadow: 0 0 0.2rem 0 rgba(var(--color-foreground), 0.3);
}

.focused.focus-inset {
  outline: 0.2rem solid rgba(var(--color-foreground), 0.5);
  outline-offset: -0.2rem;
  box-shadow: 0 0 0.2rem 0 rgba(var(--color-foreground), 0.3);
}

/*
  Focus ring - none
*/

/* Dangerous for a11y - Use with care */
.focus-none {
  box-shadow: none !important;
  outline: 0 !important;
}

.focus-offset:focus-visible {
  outline: 0.2rem solid rgba(var(--color-foreground), 0.5);
  outline-offset: 1rem;
  box-shadow: 0 0 0 1rem rgb(var(--color-background)), 0 0 0.2rem 1.2rem rgba(var(--color-foreground), 0.3);
}

.focus-offset.focused {
  outline: 0.2rem solid rgba(var(--color-foreground), 0.5);
  outline-offset: 1rem;
  box-shadow: 0 0 0 1rem rgb(var(--color-background)), 0 0 0.2rem 1.2rem rgba(var(--color-foreground), 0.3);
}

/* component-title */
.title,
.title-wrapper-with-link {
  margin: 3rem 0 2rem;
}

.title-wrapper-with-link .title {
  margin: 0;
}

.title .link {
  font-size: inherit;
}

.title-wrapper {
  margin-bottom: 3rem;
}

.title-wrapper-with-link {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1rem;
  margin-bottom: 3rem;
  flex-wrap: wrap;
}

.title--primary {
  margin: 4rem 0;
}

.title-wrapper--self-padded-tablet-down,
.title-wrapper--self-padded-mobile {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

@media screen and (min-width: 750px) {
  .title-wrapper--self-padded-mobile {
    padding-left: 0;
    padding-right: 0;
  }
}

@media screen and (min-width: 990px) {
  .title,
  .title-wrapper-with-link {
    margin: 5rem 0 3rem;
  }

  .title--primary {
    margin: 2rem 0;
  }

  .title-wrapper-with-link {
    align-items: center;
  }

  .title-wrapper-with-link .title {
    margin-bottom: 0;
  }

  .title-wrapper--self-padded-tablet-down {
    padding-left: 0;
    padding-right: 0;
  }
}

.title-wrapper-with-link .link-with-icon {
  margin: 0;
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.title-wrapper-with-link .link-with-icon .svg-wrapper {
  width: 1.5rem;
}

.title-wrapper-with-link a {
  margin-top: 0;
  flex-shrink: 0;
}

.title-wrapper--no-top-margin {
  margin-top: 0;
}

.title-wrapper--no-top-margin > .title {
  margin-top: 0;
}

.subtitle {
  font-size: 1.8rem;
  line-height: calc(1 + 0.8 / var(--font-body-scale));
  letter-spacing: 0.06rem;
  color: rgba(var(--color-foreground), 0.7);
}

.subtitle--small {
  font-size: 1.4rem;
  letter-spacing: 0.1rem;
}

.subtitle--medium {
  font-size: 1.6rem;
  letter-spacing: 0.08rem;
}

/* component-grid */
.grid {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 2rem;
  padding: 0;
  list-style: none;
  column-gap: var(--grid-mobile-horizontal-spacing);
  row-gap: var(--grid-mobile-vertical-spacing);
}

@media screen and (min-width: 750px) {
  .grid {
    column-gap: var(--grid-desktop-horizontal-spacing);
    row-gap: var(--grid-desktop-vertical-spacing);
  }
}

.grid:last-child {
  margin-bottom: 0;
}

.grid__item {
  width: calc(25% - var(--grid-mobile-horizontal-spacing) * 3 / 4);
  max-width: calc(50% - var(--grid-mobile-horizontal-spacing) / 2);
  flex-grow: 1;
  flex-shrink: 0;
}

@media screen and (min-width: 750px) {
  .grid__item {
    width: calc(25% - var(--grid-desktop-horizontal-spacing) * 3 / 4);
    max-width: calc(50% - var(--grid-desktop-horizontal-spacing) / 2);
  }
}

.grid--gapless.grid {
  column-gap: 0;
  row-gap: 0;
}

@media screen and (max-width: 749px) {
  .grid__item.slider__slide--full-width {
    width: 100%;
    max-width: none;
  }
}

.grid--1-col .grid__item {
  max-width: 100%;
  width: 100%;
}

.grid--3-col .grid__item {
  width: calc(33.33% - var(--grid-mobile-horizontal-spacing) * 2 / 3);
}

@media screen and (min-width: 750px) {
  .grid--3-col .grid__item {
    width: calc(33.33% - var(--grid-desktop-horizontal-spacing) * 2 / 3);
  }
}

.grid--2-col .grid__item {
  width: calc(50% - var(--grid-mobile-horizontal-spacing) / 2);
}

@media screen and (min-width: 750px) {
  .grid--2-col .grid__item {
    width: calc(50% - var(--grid-desktop-horizontal-spacing) / 2);
  }

  .grid--4-col-tablet .grid__item {
    width: calc(25% - var(--grid-desktop-horizontal-spacing) * 3 / 4);
  }

  .grid--3-col-tablet .grid__item {
    width: calc(33.33% - var(--grid-desktop-horizontal-spacing) * 2 / 3);
  }

  .grid--2-col-tablet .grid__item {
    width: calc(50% - var(--grid-desktop-horizontal-spacing) / 2);
  }
}

@media screen and (max-width: 989px) {
  .grid--1-col-tablet-down .grid__item {
    width: 100%;
    max-width: 100%;
  }

  .slider--tablet.grid--peek {
    margin: 0;
    width: 100%;
  }

  .slider--tablet.grid--peek .grid__item {
    box-sizing: content-box;
    margin: 0;
  }

  .slider.slider--tablet .scroll-trigger.animate--slide-in,
  .slider.slider--mobile .scroll-trigger.animate--slide-in {
    animation: none;
    opacity: 1;
    transform: inherit;
  }

  .scroll-trigger:not(.scroll-trigger--offscreen) .slider--tablet {
    animation: var(--animation-slide-in);
  }
}

@media screen and (min-width: 990px) {
  .grid--6-col-desktop .grid__item {
    width: calc(16.66% - var(--grid-desktop-horizontal-spacing) * 5 / 6);
    max-width: calc(16.66% - var(--grid-desktop-horizontal-spacing) * 5 / 6);
  }

  .grid--5-col-desktop .grid__item {
    width: calc(20% - var(--grid-desktop-horizontal-spacing) * 4 / 5);
    max-width: calc(20% - var(--grid-desktop-horizontal-spacing) * 4 / 5);
  }

  .grid--4-col-desktop .grid__item {
    width: calc(25% - var(--grid-desktop-horizontal-spacing) * 3 / 4);
    max-width: calc(25% - var(--grid-desktop-horizontal-spacing) * 3 / 4);
  }

  .grid--3-col-desktop .grid__item {
    width: calc(33.33% - var(--grid-desktop-horizontal-spacing) * 2 / 3);
    max-width: calc(33.33% - var(--grid-desktop-horizontal-spacing) * 2 / 3);
  }

  .grid--2-col-desktop .grid__item {
    width: calc(50% - var(--grid-desktop-horizontal-spacing) / 2);
    max-width: calc(50% - var(--grid-desktop-horizontal-spacing) / 2);
  }

  .slider.slider--desktop .scroll-trigger.animate--slide-in {
    animation: none;
    opacity: 1;
    transform: inherit;
  }

  .scroll-trigger:not(.scroll-trigger--offscreen) .slider--desktop {
    animation: var(--animation-slide-in);
  }
}

@media screen and (min-width: 990px) {
  .grid--1-col-desktop {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .grid--1-col-desktop .grid__item {
    width: 100%;
    max-width: 100%;
  }
}

@media screen and (max-width: 749px) {
  .grid--peek.slider--mobile {
    margin: 0;
    width: 100%;
  }

  .grid--peek.slider--mobile .grid__item {
    box-sizing: content-box;
    margin: 0;
  }

  .grid--peek .grid__item {
    min-width: 35%;
  }

  .grid--peek.slider .grid__item:first-of-type {
    margin-left: 1.5rem;
  }

  /* Fix to show some space at the end of our sliders in all browsers */
  .grid--peek.slider:after {
    margin-left: calc(-1 * var(--grid-mobile-horizontal-spacing));
  }

  .grid--2-col-tablet-down .grid__item {
    width: calc(50% - var(--grid-mobile-horizontal-spacing) / 2);
  }

  .slider--tablet.grid--peek.grid--2-col-tablet-down .grid__item,
  .grid--peek .grid__item {
    width: calc(50% - var(--grid-mobile-horizontal-spacing) - 3rem);
  }

  .slider--tablet.grid--peek.grid--1-col-tablet-down .grid__item,
  .slider--mobile.grid--peek.grid--1-col-tablet-down .grid__item {
    width: calc(100% - var(--grid-mobile-horizontal-spacing) - 3rem);
  }
}

@media screen and (min-width: 750px) and (max-width: 989px) {
  .slider--tablet.grid--peek .grid__item {
    width: calc(25% - var(--grid-desktop-horizontal-spacing) - 3rem);
  }

  .slider--tablet.grid--peek.grid--3-col-tablet .grid__item {
    width: calc(33.33% - var(--grid-desktop-horizontal-spacing) - 3rem);
  }

  .slider--tablet.grid--peek.grid--2-col-tablet .grid__item,
  .slider--tablet.grid--peek.grid--2-col-tablet-down .grid__item {
    width: calc(50% - var(--grid-desktop-horizontal-spacing) - 3rem);
  }

  .slider--tablet.grid--peek .grid__item:first-of-type {
    margin-left: 1.5rem;
  }

  .grid--2-col-tablet-down .grid__item {
    width: calc(50% - var(--grid-desktop-horizontal-spacing) / 2);
  }

  .grid--1-col-tablet-down.grid--peek .grid__item {
    width: calc(100% - var(--grid-desktop-horizontal-spacing) - 3rem);
  }
}

/* component-media */
.media {
  display: block;
  background-color: rgba(var(--color-foreground), 0.1);
  position: relative;
  overflow: hidden;
}

.media--transparent {
  background-color: transparent;
}

.media > *:not(.zoom):not(.deferred-media__poster-button),
.media model-viewer {
  display: block;
  max-width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

.media > img {
  object-fit: cover;
  object-position: center center;
  transition: opacity 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

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

.media--portrait {
  padding-bottom: 125%;
}

.media--landscape {
  padding-bottom: 66.6%;
}

.media--cropped {
  padding-bottom: 56%;
}

.media--16-9 {
  padding-bottom: 56.25%;
}

.media--circle {
  padding-bottom: 100%;
  border-radius: 50%;
}

.media.media--hover-effect > img + img {
  opacity: 0;
}

@media screen and (min-width: 990px) {
  .media--cropped {
    padding-bottom: 63%;
  }
}

deferred-media {
  display: block;
}

/* component-button */
/* Button - default */

.button--secondary,
.button--tertiary {
  --color-button: var(--color-secondary-button);
  --color-button-text: var(--color-secondary-button-text);
}

.button--tertiary {
  --alpha-button-background: 0;
  --alpha-button-border: 0.2;
}

.button,
.shopify-challenge__button,
.customer button,
button.shopify-payment-button__button--unbranded {
  --shadow-horizontal-offset: var(--buttons-shadow-horizontal-offset);
  --shadow-vertical-offset: var(--buttons-shadow-vertical-offset);
  --shadow-blur-radius: var(--buttons-shadow-blur-radius);
  --shadow-opacity: var(--buttons-shadow-opacity);
  --shadow-visible: var(--buttons-shadow-visible);
  --border-offset: var(--buttons-border-offset); /* reduce radius edge artifacts */
  --border-opacity: calc(1 - var(--buttons-border-opacity));
  border-radius: var(--buttons-radius-outset);
  position: relative;
}

.button,
.shopify-challenge__button,
.customer button,
button.shopify-payment-button__button--unbranded {
  min-width: calc(12rem + var(--buttons-border-width) * 2);
  min-height: calc(4.5rem + var(--buttons-border-width) * 2);
}

.button,
.shopify-challenge__button,
.customer button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border: 0;
  padding: 0 3rem;
  cursor: pointer;
  font: inherit;
  font-size: 1.5rem;
  text-decoration: none;
  color: rgb(var(--color-button-text));
  transition: box-shadow var(--duration-short) ease;
  -webkit-appearance: none;
  appearance: none;
  background-color: rgba(var(--color-button), var(--alpha-button-background));
}

.button:before,
.shopify-challenge__button:before,
.customer button:before,
.shopify-payment-button__button--unbranded:before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  border-radius: var(--buttons-radius-outset);
  box-shadow: var(--shadow-horizontal-offset) var(--shadow-vertical-offset) var(--shadow-blur-radius)
    rgba(var(--color-shadow), var(--shadow-opacity));
}

.button:after,
.shopify-challenge__button:after,
.customer button:after,
.shopify-payment-button__button--unbranded:after {
  content: '';
  position: absolute;
  top: var(--buttons-border-width);
  right: var(--buttons-border-width);
  bottom: var(--buttons-border-width);
  left: var(--buttons-border-width);
  z-index: 1;
  border-radius: var(--buttons-radius);
  box-shadow: 0 0 0 calc(var(--buttons-border-width) + var(--border-offset))
      rgba(var(--color-button-text), var(--border-opacity)),
    0 0 0 var(--buttons-border-width) rgba(var(--color-button), var(--alpha-button-background));
  transition: box-shadow var(--duration-short) ease;
}

.button:not([disabled]):hover::after,
.shopify-challenge__button:hover::after,
.customer button:hover::after,
.shopify-payment-button__button--unbranded:hover::after {
  --border-offset: 1.3px;
  box-shadow: 0 0 0 calc(var(--buttons-border-width) + var(--border-offset))
      rgba(var(--color-button-text), var(--border-opacity)),
    0 0 0 calc(var(--buttons-border-width) + 1px) rgba(var(--color-button), var(--alpha-button-background));
}

.button--secondary:after {
  --border-opacity: var(--buttons-border-opacity);
}

.button:focus-visible,
.button:focus,
.button.focused,
.shopify-payment-button__button--unbranded:focus-visible,
.shopify-payment-button__button--unbranded:focus {
  outline: 0;
  box-shadow: 0 0 0 0.3rem rgb(var(--color-background)), 0 0 0 0.5rem rgba(var(--color-foreground), 0.5),
    0 0 0.5rem 0.4rem rgba(var(--color-foreground), 0.3);
}

.button:focus:not(:focus-visible):not(.focused),
.shopify-payment-button__button--unbranded:focus:not(:focus-visible):not(.focused) {
  box-shadow: inherit;
}

.button::selection,
.shopify-challenge__button::selection,
.customer button::selection {
  background-color: rgba(var(--color-button-text), 0.3);
}

.button,
.button-label,
.shopify-challenge__button,
.customer button {
  font-size: 1.5rem;
  letter-spacing: 0.1rem;
  line-height: calc(1 + 0.2 / var(--font-body-scale));
}

.button--tertiary {
  font-size: 1.2rem;
  padding: 1rem 1.5rem;
  min-width: calc(9rem + var(--buttons-border-width) * 2);
  min-height: calc(3.5rem + var(--buttons-border-width) * 2);
}

.button--small {
  padding: 1.2rem 2.6rem;
}

/* Shopify Accelerated Checkout */

shopify-accelerated-checkout {
  --shopify-accelerated-checkout-button-border-radius: var(--buttons-radius-outset);
  --shopify-accelerated-checkout-button-box-shadow: var(--shadow-horizontal-offset) var(--shadow-vertical-offset) var(--shadow-blur-radius)
  rgba(var(--color-shadow), var(--shadow-opacity));
}
shopify-accelerated-checkout-cart {
  --shopify-accelerated-checkout-button-border-radius: var(--buttons-radius-outset);
  --shopify-accelerated-checkout-button-box-shadow: var(--shadow-horizontal-offset) var(--shadow-vertical-offset) var(--shadow-blur-radius)
  rgba(var(--color-shadow), var(--shadow-opacity));
}


/* Button - other */

.button:disabled,
.button[aria-disabled='true'],
.button.disabled,
.customer button:disabled,
.customer button[aria-disabled='true'],
.customer button.disabled,
.quantity__button.disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.button--full-width {
  display: flex;
  width: 100%;
}

.button.loading {
  color: transparent;
  position: relative;
}

@media screen and (forced-colors: active) {
  .button.loading {
    color: rgb(var(--color-foreground));
  }
}

.button.loading > .loading__spinner {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
  height: 100%;
  display: flex;
  align-items: center;
}

.button.loading > .loading__spinner .spinner {
  width: fit-content;
}

.button.loading > .loading__spinner .path {
  stroke: rgb(var(--color-button-text));
}

/* Button - social share */

.share-button {
  display: block;
  position: relative;
}

.share-button details {
  width: fit-content;
}

.share-button__button {
  font-size: 1.4rem;
  display: flex;
  align-items: center;
  color: rgb(var(--color-link));
  margin-left: 0;
  padding-left: 0;
  min-height: 4.4rem;
}

details[open] > .share-button__fallback {
  animation: animateMenuOpen var(--duration-default) ease;
}

.share-button__button:hover {
  text-decoration: underline;
  text-underline-offset: 0.3rem;
}

.share-button__button,
.share-button__fallback button {
  cursor: pointer;
  background-color: transparent;
  border: none;
}

.share-button__button .icon-share {
  height: 1.2rem;
  margin-right: 1rem;
  min-width: 1.3rem;
}

.share-button__fallback {
  display: flex;
  align-items: center;
  position: absolute;
  top: 3rem;
  left: 0.1rem;
  z-index: 3;
  width: 100%;
  min-width: max-content;
  border-radius: var(--inputs-radius);
  border: 0;
}

.share-button__fallback:after {
  pointer-events: none;
  content: '';
  position: absolute;
  top: var(--inputs-border-width);
  right: var(--inputs-border-width);
  bottom: var(--inputs-border-width);
  left: var(--inputs-border-width);
  border: 0.1rem solid transparent;
  border-radius: var(--inputs-radius);
  box-shadow: 0 0 0 var(--inputs-border-width) rgba(var(--color-foreground), var(--inputs-border-opacity));
  transition: box-shadow var(--duration-short) ease;
  z-index: 1;
}

.share-button__fallback:before {
  background: rgb(var(--color-background));
  pointer-events: none;
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-radius: var(--inputs-radius-outset);
  box-shadow: var(--inputs-shadow-horizontal-offset) var(--inputs-shadow-vertical-offset)
    var(--inputs-shadow-blur-radius) rgba(var(--color-shadow), var(--inputs-shadow-opacity));
  z-index: -1;
}

.share-button__fallback button {
  width: 4.4rem;
  height: 4.4rem;
  padding: 0;
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  right: var(--inputs-border-width);
}

.share-button__fallback button:hover {
  color: rgba(var(--color-foreground), 0.75);
}

.share-button__fallback button:hover .svg-wrapper {
  transform: scale(1.07);
}

.share-button__close:not(.hidden) + .share-button__copy {
  display: none;
}

.share-button__close,
.share-button__copy {
  background-color: transparent;
  color: rgb(var(--color-foreground));
}

.share-button__copy:focus-visible,
.share-button__close:focus-visible {
  background-color: rgb(var(--color-background));
  z-index: 2;
}

.share-button__copy:focus,
.share-button__close:focus {
  background-color: rgb(var(--color-background));
  z-index: 2;
}

.field:not(:focus-visible):not(.focused) + .share-button__copy:not(:focus-visible):not(.focused),
.field:not(:focus-visible):not(.focused) + .share-button__close:not(:focus-visible):not(.focused) {
  background-color: inherit;
}

.share-button__fallback .field:after,
.share-button__fallback .field:before {
  content: none;
}

.share-button__fallback .field {
  border-radius: 0;
  min-width: auto;
  min-height: auto;
  transition: none;
}

.share-button__fallback .field__input:focus,
.share-button__fallback .field__input:-webkit-autofill {
  outline: 0.2rem solid rgba(var(--color-foreground), 0.5);
  outline-offset: 0.1rem;
  box-shadow: 0 0 0 0.1rem rgb(var(--color-background)), 0 0 0.5rem 0.4rem rgba(var(--color-foreground), 0.3);
}

.share-button__fallback .field__input {
  box-shadow: none;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  filter: none;
  min-width: auto;
  min-height: auto;
}

.share-button__fallback .field__input:hover {
  box-shadow: none;
}

.share-button__fallback .icon {
  width: 1.5rem;
  height: 1.5rem;
}

.share-button__message:not(:empty) {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  margin-top: 0;
  padding: 0.8rem 0 0.8rem 1.5rem;
  margin: var(--inputs-border-width);
}

.share-button__message:not(:empty):not(.hidden) ~ * {
  display: none;
}

/* component-form */
.field__input,
.select__select,
.customer .field input,
.customer select {
  -webkit-appearance: none;
  appearance: none;
  background-color: rgb(var(--color-background));
  color: rgb(var(--color-foreground));
  font-family: var(--font-body-family);
  font-style: var(--font-body-style);
  font-weight: var(--font-body-weight);
  font-size: 1.6rem;
  width: 100%;
  box-sizing: border-box;
  transition: box-shadow var(--duration-short) ease;
  border-radius: var(--inputs-radius);
  height: 4.5rem;
  min-height: calc(var(--inputs-border-width) * 2);
  min-width: calc(7rem + (var(--inputs-border-width) * 2));
  position: relative;
  border: 0;
}

.field:before,
.select:before,
.customer .field:before,
.customer select:before,
.localization-form__select:before {
  pointer-events: none;
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-radius: var(--inputs-radius-outset);
  box-shadow: var(--inputs-shadow-horizontal-offset) var(--inputs-shadow-vertical-offset)
    var(--inputs-shadow-blur-radius) rgba(var(--color-shadow), var(--inputs-shadow-opacity));
  z-index: -1;
}

.field:after,
.select:after,
.customer .field:after,
.customer select:after,
.localization-form__select:after {
  pointer-events: none;
  content: '';
  position: absolute;
  top: var(--inputs-border-width);
  right: var(--inputs-border-width);
  bottom: var(--inputs-border-width);
  left: var(--inputs-border-width);
  border: 0.1rem solid transparent;
  border-radius: var(--inputs-radius);
  box-shadow: 0 0 0 var(--inputs-border-width) rgba(var(--color-foreground), var(--inputs-border-opacity));
  transition: box-shadow var(--duration-short) ease;
  z-index: 1;
}

.select__select {
  font-family: var(--font-body-family);
  font-style: var(--font-body-style);
  font-weight: var(--font-body-weight);
  font-size: 1.2rem;
  color: rgba(var(--color-foreground), 0.75);
}

.field:hover.field:after,
.select:hover.select:after,
.select__select:hover.select__select:after,
.customer .field:hover.field:after,
.customer select:hover.select:after,
.localization-form__select:hover.localization-form__select:after {
  box-shadow: 0 0 0 calc(0.1rem + var(--inputs-border-width))
    rgba(var(--color-foreground), var(--inputs-border-opacity));
  outline: 0;
  border-radius: var(--inputs-radius);
}

.field__input:focus-visible,
.select__select:focus-visible,
.customer .field input:focus-visible,
.customer select:focus-visible,
.localization-form__select:focus-visible.localization-form__select:after {
  box-shadow: 0 0 0 calc(0.1rem + var(--inputs-border-width)) rgba(var(--color-foreground));
  outline: 0;
  border-radius: var(--inputs-radius);
}

.field__input:focus,
.select__select:focus,
.customer .field input:focus,
.customer select:focus,
.localization-form__select:focus.localization-form__select:after {
  box-shadow: 0 0 0 calc(0.1rem + var(--inputs-border-width)) rgba(var(--color-foreground));
  outline: 0;
  border-radius: var(--inputs-radius);
}

.localization-form__select:focus {
  outline: 0;
  box-shadow: none;
}

.text-area,
.select {
  display: flex;
  position: relative;
  width: 100%;
}

/* Select */

.select .svg-wrapper,
.customer select + .svg-wrapper {
  height: 0.6rem;
  width: 1rem;
  pointer-events: none;
  position: absolute;
  top: calc(50% - 0.2rem);
  right: 0;
}

.select__select,
.customer select {
  cursor: pointer;
  line-height: calc(1 + 0.6 / var(--font-body-scale));
  padding: 0 calc(var(--inputs-border-width) + 3rem) 0 2rem;
  margin: var(--inputs-border-width);
  min-height: calc(var(--inputs-border-width) * 2);
}

/* Field */

.field {
  position: relative;
  width: 100%;
  display: flex;
  transition: box-shadow var(--duration-short) ease;
}

.customer .field {
  display: flex;
}

.field--with-error {
  flex-wrap: wrap;
}

.field__input,
.customer .field input {
  flex-grow: 1;
  text-align: left;
  padding: 1.5rem;
  margin: var(--inputs-border-width);
  transition: box-shadow var(--duration-short) ease;
}

.field__label,
.customer .field label {
  font-size: 1.6rem;
  left: calc(var(--inputs-border-width) + 2rem);
  top: calc(1rem + var(--inputs-border-width));
  margin-bottom: 0;
  pointer-events: none;
  position: absolute;
  transition: top var(--duration-short) ease, font-size var(--duration-short) ease;
  color: rgba(var(--color-foreground), 0.75);
  letter-spacing: 0.1rem;
  line-height: 1.5;
}

.field__input:focus ~ .field__label,
.field__input:not(:placeholder-shown) ~ .field__label,
.field__input:-webkit-autofill ~ .field__label,
.customer .field input:focus ~ label,
.customer .field input:not(:placeholder-shown) ~ label,
.customer .field input:-webkit-autofill ~ label {
  font-size: 1rem;
  top: calc(var(--inputs-border-width) + 0.5rem);
  left: calc(var(--inputs-border-width) + 2rem);
  letter-spacing: 0.04rem;
}

.field__input:focus,
.field__input:not(:placeholder-shown),
.field__input:-webkit-autofill,
.customer .field input:focus,
.customer .field input:not(:placeholder-shown),
.customer .field input:-webkit-autofill {
  padding: 2.2rem 1.5rem 0.8rem 2rem;
  margin: var(--inputs-border-width);
}

.field__input::-webkit-search-cancel-button,
.customer .field input::-webkit-search-cancel-button {
  display: none;
}

.field__input::placeholder,
.customer .field input::placeholder {
  opacity: 0;
}

.field__button {
  align-items: center;
  background-color: transparent;
  border: 0;
  color: currentColor;
  cursor: pointer;
  display: flex;
  height: 4.4rem;
  justify-content: center;
  overflow: hidden;
  padding: 0;
  position: absolute;
  right: 0;
  top: 0;
  width: 4.4rem;
}

.field__button > .svg-wrapper {
  height: 2.5rem;
  width: 2.5rem;
}

.field__input:-webkit-autofill ~ .field__button,
.field__input:-webkit-autofill ~ .field__label,
.customer .field input:-webkit-autofill ~ label {
  color: rgb(0, 0, 0);
}

/* Text area */

.text-area {
  font-family: var(--font-body-family);
  font-style: var(--font-body-style);
  font-weight: var(--font-body-weight);
  min-height: 10rem;
  resize: none;
}

input[type='checkbox'] {
  display: inline-block;
  width: auto;
  margin-right: 0.5rem;
}

/* Form global */

.form__label {
  display: block;
  margin-bottom: 0.6rem;
}

.form__message {
  align-items: center;
  display: flex;
  font-size: 1.4rem;
  line-height: 1;
  margin-top: 1rem;
}

.form__message--large {
  font-size: 1.6rem;
}

.customer .field .form__message {
  font-size: 1.4rem;
  text-align: left;
}

.form__message .icon,
.customer .form__message .svg-wrapper {
  flex-shrink: 0;
  height: 1.3rem;
  margin-right: 0.5rem;
  width: 1.3rem;
}

.form__message--large .icon,
.customer .form__message .svg-wrapper {
  height: 1.5rem;
  width: 1.5rem;
  margin-right: 1rem;
}

.customer .field .form__message .svg-wrapper {
  align-self: start;
}

.form-status {
  margin: 0;
  font-size: 1.6rem;
}

.form-status-list {
  padding: 0;
  margin: 2rem 0 4rem;
}

.form-status-list li {
  list-style-position: inside;
}

.form-status-list .link::first-letter {
  text-transform: capitalize;
}

/* component-quantity */
.quantity {
  color: rgba(var(--color-foreground));
  position: relative;
  width: calc(14rem / var(--font-body-scale) + var(--inputs-border-width) * 2);
  display: flex;
  border-radius: var(--inputs-radius);
  min-height: calc((var(--inputs-border-width) * 2) + 4.5rem);
}

.quantity:after {
  pointer-events: none;
  content: '';
  position: absolute;
  top: var(--inputs-border-width);
  right: var(--inputs-border-width);
  bottom: var(--inputs-border-width);
  left: var(--inputs-border-width);
  border: 0.1rem solid transparent;
  border-radius: var(--inputs-radius);
  box-shadow: 0 0 0 var(--inputs-border-width) rgba(var(--color-foreground), var(--inputs-border-opacity));
  transition: box-shadow var(--duration-short) ease;
  z-index: 1;
}

.quantity:before {
  background: rgb(var(--color-background));
  pointer-events: none;
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-radius: var(--inputs-radius-outset);
  box-shadow: var(--inputs-shadow-horizontal-offset) var(--inputs-shadow-vertical-offset)
    var(--inputs-shadow-blur-radius) rgba(var(--color-shadow), var(--inputs-shadow-opacity));
  z-index: -1;
}

.quantity__input {
  color: currentColor;
  font-family: var(--font-body-family);
  font-style: var(--font-body-style);
  font-weight: var(--font-body-weight);
  font-size: 1.6rem;
  font-weight: 500;
  opacity: 0.85;
  text-align: center;
  background-color: transparent;
  border: 0;
  padding: 0 0.5rem;
  width: 100%;
  flex-grow: 1;
  -webkit-appearance: none;
  appearance: none;
}

.quantity__button {
  width: calc(4.5rem / var(--font-body-scale));
  flex-shrink: 0;
  font-size: 1.8rem;
  border: 0;
  background-color: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgb(var(--color-foreground));
  padding: 0;
}

.quantity__button:first-child {
  margin-left: calc(var(--inputs-border-width));
}

.quantity__button:last-child {
  margin-right: calc(var(--inputs-border-width));
}

.quantity__button .svg-wrapper {
  width: 1rem;
  pointer-events: none;
}

.quantity__button:focus-visible,
.quantity__input:focus-visible {
  background-color: rgb(var(--color-background));
  z-index: 2;
}

.quantity__button:focus,
.quantity__input:focus {
  background-color: rgb(var(--color-background));
  z-index: 2;
}

.quantity__button:not(:focus-visible):not(.focused),
.quantity__input:not(:focus-visible):not(.focused) {
  box-shadow: inherit;
  background-color: inherit;
}

.quantity__input:-webkit-autofill,
.quantity__input:-webkit-autofill:hover,
.quantity__input:-webkit-autofill:active {
  box-shadow: 0 0 0 10rem rgb(var(--color-background)) inset !important;
  -webkit-box-shadow: 0 0 0 10rem rgb(var(--color-background)) inset !important;
}

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

.quantity__input[type='number'] {
  -moz-appearance: textfield;
}

.quantity__rules {
  margin-top: 0.5rem;
  position: relative;
  font-size: 1.2rem;
}

.quantity__rules .caption {
  display: inline-block;
  margin-top: 0;
  margin-bottom: 0;
}

.quantity__rules .divider + .divider::before {
  content: '\2022';
  margin: 0 0.5rem;
}

.quantity__rules-cart {
  position: relative;
}

.product__info-container .loading__spinner:not(.hidden) ~ *,
.quantity__rules-cart .loading__spinner:not(.hidden) ~ * {
  visibility: hidden;
}

/* component-modal */
.modal__toggle {
  list-style-type: none;
}

.modal__toggle-close {
  display: none;
}

.modal__toggle-open {
  display: flex;
}

.modal__close-button.link {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0rem;
  height: 4.4rem;
  width: 4.4rem;
  background-color: transparent;
}

.modal__close-button .icon {
  width: 1.7rem;
  height: 1.7rem;
}

.modal__content {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgb(var(--color-background));
  z-index: 4;
  display: flex;
  justify-content: center;
  align-items: center;
}

.media-modal {
  cursor: zoom-out;
}

.media-modal .deferred-media {
  cursor: initial;
}

/* component-cart-count-bubble */
.cart-count-bubble:empty {
  display: none;
}

.cart-count-bubble {
  position: absolute;
  background-color: rgb(var(--color-button));
  color: rgb(var(--color-button-text));
  height: 1.7rem;
  width: 1.7rem;
  border-radius: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 0.9rem;
  bottom: 0.8rem;
  left: 2.2rem;
  line-height: calc(1 + 0.1 / var(--font-body-scale));
}

/* utility-bar */
.utility-bar {
  height: 100%;
}

.utility-bar--bottom-border {
  border-bottom: 0.1rem solid rgba(var(--color-foreground), 0.08);
}

@media screen and (min-width: 990px) {
  .utility-bar--bottom-border-social-only {
    border-bottom: 0.1rem solid rgba(var(--color-foreground), 0.08);
  }
}

.utility-bar__grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas: 'announcements';
}

.utility-bar__grid .list-social {
  justify-content: flex-start;
  align-content: center;
  margin-left: -1.2rem;
  grid-area: social-icons;
}

@media screen and (max-width: 989px) {
  .utility-bar .utility-bar__grid .list-social {
    display: none;
  }
}

.utility-bar .list-social__item .icon {
  scale: 0.9;
}

@media screen and (min-width: 990px) {
  .utility-bar__grid--3-col {
    grid-template-columns: 3fr 4fr 3fr;
    grid-template-areas: 'social-icons announcements language-currency';
  }

  .utility-bar__grid--2-col {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: 'social-icons language-currency';
  }

  .announcement-bar.announcement-bar--one-announcement,
  .announcement-bar--one-announcement .announcement-bar__link {
    width: fit-content;
    margin: auto;
  }
}

.announcement-bar,
.announcement-bar__announcement {
  color: rgb(var(--color-foreground));
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  align-content: center;
  grid-area: announcements;
}

.announcement-bar .slider--everywhere {
  margin-bottom: 0;
  scroll-behavior: auto;
}

.utility-bar__grid .announcement-bar-slider {
  width: 100%;
}

.utility-bar__grid .announcement-bar-slider {
  width: 100%;
}

.announcement-bar-slider,
.announcement-bar-slider .slider {
  width: 100%;
}

.announcement-bar .slider-button--next {
  margin-right: -1.5rem;
  min-width: 44px;
}

.announcement-bar .slider-button--prev {
  margin-left: -1.5rem;
  min-width: 44px;
}

.announcement-bar .slider-button--next:focus-visible,
.announcement-bar .slider-button--prev:focus-visible,
.utility-bar .list-social__link:focus-visible {
  outline-offset: -0.3rem;
  box-shadow: 0 0 0 -0.2rem rgb(var(--color-foreground));
}

.localization-wrapper {
  grid-area: language-currency;
  align-self: center;
  display: flex;
  justify-content: flex-end;
}

.localization-wrapper .localization-selector + .disclosure__list-wrapper {
  animation: animateMenuOpen var(--duration-default) ease;
}

.utility-bar .localization-wrapper .disclosure .localization-form__select,
.utility-bar .localization-wrapper .disclosure__link {
  font-size: calc(var(--font-heading-scale) * 1.3rem);
}

@media screen and (min-width: 990px) {
  body:has(.section-header .header:not(.drawer-menu)) .utility-bar .page-width {
    padding-left: 5rem;
    padding-right: 5rem;
  }

  .announcement-bar-slider {
    width: 60%;
  }

  .announcement-bar .slider-button {
    height: 3.8rem;
  }
}

.announcement-bar__link {
  display: flex;
  width: 100%;
  text-decoration: none;
  height: 100%;
  justify-content: center;
  align-items: center;
}

.announcement-bar__link:hover {
  text-decoration: underline;
}

.announcement-bar__link .icon-arrow {
  display: inline-block;
  pointer-events: none;
  margin-left: 0.8rem;
  vertical-align: middle;
  margin-bottom: 0.2rem;
}

.announcement-bar__message {
  text-align: center;
  padding: 1rem 0;
  margin: 0;
  letter-spacing: 0.1rem;
  min-height: 3.8rem;
}

.announcement-bar-slider--fade-in-next .announcement-bar__message,
.announcement-bar-slider--fade-in-previous .announcement-bar__message,
.announcement-bar-slider--fade-out-next .announcement-bar__message,
.announcement-bar-slider--fade-out-previous .announcement-bar__message {
  animation-duration: var(--duration-announcement-bar);
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
}

.announcement-bar-slider--fade-in-next .announcement-bar__message {
  --announcement-translate-from: -1.5rem;
  /* Prevent flicker */
  opacity: 0;
  animation-name: translateAnnouncementSlideIn;
  animation-delay: var(--duration-announcement-bar);
}

.announcement-bar-slider--fade-in-previous .announcement-bar__message {
  --announcement-translate-from: 1.5rem;
  /* Prevent flicker */
  opacity: 0;
  animation-name: translateAnnouncementSlideIn;
  animation-delay: var(--duration-announcement-bar);
}

.announcement-bar-slider--fade-out-next .announcement-bar__message {
  --announcement-translate-to: 1.5rem;
  animation-name: translateAnnouncementSlideOut;
}

.announcement-bar-slider--fade-out-previous .announcement-bar__message {
  --announcement-translate-to: -1.5rem;
  animation-name: translateAnnouncementSlideOut;
}

@keyframes translateAnnouncementSlideIn {
  0% {
    opacity: 0;
    transform: translateX(var(--announcement-translate-from));
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes translateAnnouncementSlideOut {
  0% {
    opacity: 1;
    transform: translateX(0);
  }
  100% {
    opacity: 0;
    transform: translateX(var(--announcement-translate-to));
  }
}

/* section-header */
.section-header.shopify-section-group-header-group {
  z-index: 3;
}

.shopify-section-header-sticky {
  position: sticky;
  top: 0;
}

.shopify-section-header-hidden {
  top: calc(-1 * var(--header-height));
}

.shopify-section-header-hidden.menu-open {
  top: 0;
}

.section-header.animate {
  transition: top 0.15s ease-out;
}

.shopify-section-group-header-group {
  z-index: 4;
}

.section-header ~ .shopify-section-group-header-group {
  z-index: initial;
}

/* Main Header Layout */
.header-wrapper {
  display: block;
  position: relative;
  background-color: rgb(var(--color-background));
}

.header-wrapper--border-bottom {
  border-bottom: 0.1rem solid rgba(var(--color-foreground), 0.08);
}

.header {
  display: grid;
  grid-template-areas: 'left-icons heading icons';
  grid-template-columns: 1fr 2fr 1fr;
  align-items: center;
}

@media screen and (max-width: 749px) {
  .header--has-app {
    grid-template-columns: auto 1fr auto;
  }
}

@media screen and (min-width: 990px) {
  .header {
    grid-template-columns: 1fr auto 1fr;
  }

  .header--top-left,
  .header--middle-left:not(.header--has-menu) {
    grid-template-areas:
      'heading icons'
      'navigation navigation';
    grid-template-columns: 1fr auto;
  }

  .header--top-left.drawer-menu,
  .header--middle-left.drawer-menu {
    grid-template-areas: 'navigation heading icons';
    grid-template-columns: auto 1fr auto;
    column-gap: 1rem;
  }

  .header--middle-left {
    grid-template-areas: 'heading navigation icons';
    grid-template-columns: auto auto 1fr;
    column-gap: 2rem;
  }

  .header--middle-center:not(.drawer-menu) {
    grid-template-areas: 'navigation heading icons';
    grid-template-columns: 1fr auto 1fr;
    column-gap: 2rem;
  }

  .header--middle-center a.header__heading-link {
    text-align: center;
  }

  .header--top-center {
    grid-template-areas:
      'left-icons heading icons'
      'navigation navigation navigation';
  }

  .header--top-center.drawer-menu {
    grid-template-areas: 'left-icons heading icons';
    grid-template-columns: 1fr auto 1fr;
  }

  .header:not(.header--middle-left, .header--middle-center) .header__inline-menu {
    margin-top: 1.05rem;
  }
}

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

.header__heading {
  margin: 0;
  line-height: 0;
}

.header > .header__heading-link {
  line-height: 0;
}

.header__heading,
.header__heading-link {
  grid-area: heading;
  justify-self: center;
}

.header__heading-link {
  display: inline-block;
  padding: 0.75rem;
  text-decoration: none;
  word-break: break-word;
}

.header__heading-link:hover .h2 {
  color: rgba(var(--color-foreground), 0.75);
}

.header__heading-link .h2 {
  line-height: 1;
  color: rgba(var(--color-foreground), 0.75);
}

.header__heading-logo {
  height: auto;
  max-width: 100%;
}

.header__heading-logo-wrapper {
  width: 100%;
  display: inline-block;
  transition: width 0.3s cubic-bezier(0.52, 0, 0.61, 0.99);
}

@media screen and (max-width: 989px) {
  .header__heading,
  .header__heading-link {
    text-align: center;
  }

  .header--mobile-left .header__heading,
  .header--mobile-left .header__heading-link {
    text-align: left;
    justify-self: start;
  }

  .header--mobile-left {
    grid-template-columns: auto 2fr 1fr;
  }
}

@media screen and (min-width: 990px) {
  .header--middle-left .header__heading-link,
  .header--top-left .header__heading-link {
    margin-left: -0.75rem;
  }

  .header__heading,
  .header__heading-link {
    justify-self: start;
  }

  .header--middle-center .header__heading-link,
  .header--middle-center .header__heading {
    justify-self: center;
    text-align: center;
  }

  .header--top-center .header__heading-link,
  .header--top-center .header__heading {
    justify-self: center;
    text-align: center;
  }
}

/* Header icons */
.header__icons {
  display: flex;
  grid-area: icons;
  justify-self: end;
  padding-right: 0.8rem;
  gap:10px;
}

.header__icons .shopify-app-block {
  max-width: 4.4rem;
  max-height: 4.4rem;
  overflow: hidden;
}

.header__icon:not(.header__icon--summary),
.header__icon span {
  display: flex;
  align-items: center;
  justify-content: center;
}

.header__icon {
  color: rgb(var(--color-foreground));
}

.header__icon span {
  height: 100%;
}

.header__icon .svg-wrapper {
  width: 44px;
  height: 44px;
}

.header__icon::after {
  content: none;
}

.header__icon:hover .icon,
.modal__close-button:hover .icon {
  transform: scale(1.07);
}

.header__icon .icon {
  height: 2rem;
  width: 2rem;
  fill: none;
  vertical-align: middle;
}

.header__icon,
.header__icon--cart .icon {
  height: 4.4rem;
  width: 4.4rem;
  padding: 0;
}

.header__icon--cart {
  position: relative;
  margin-right: -1.2rem;
}

.header__icon--menu[aria-expanded='true']::before {
  content: '';
  top: 100%;
  left: 0;
  height: calc(var(--viewport-height, 100vh) - (var(--header-bottom-position, 100%)));
  width: 100%;
  display: block;
  position: absolute;
  background: rgba(var(--color-foreground), 0.5);
}

.header__icon--account shop-user-avatar {
  --shop-avatar-size: 2.8rem;
}

details .header__icon-close {
  display: none;
}

details[open] .header__icon-close {
  display: inline-block;
}

account-icon {
  display: flex;
}

/* Search */
menu-drawer + .header__search {
  display: none;
}

.header > .header__search {
  grid-area: left-icons;
  justify-self: start;
}

.header--top-center.drawer-menu > .header__search {
  margin-left: 3.2rem;
}

.header--top-center header-drawer {
  grid-area: left-icons;
}

.header:not(.header--has-menu) * > .header__search {
  display: none;
}

.header__search {
  display: inline-flex;
  line-height: 0;
}

.header--top-center > .header__search {
  display: none;
}

.header--top-center * > .header__search {
  display: inline-flex;
}

@media screen and (min-width: 990px) {
  .header:not(.header--top-center) * > .header__search,
  .header--top-center > .header__search {
    display: inline-flex;
  }

  .header:not(.header--top-center) > .header__search,
  .header--top-center * > .header__search {
    display: none;
  }
}

details[open] > .search-modal {
  opacity: 1;
  animation: animateMenuOpen var(--duration-default) ease;
}

details[open] .modal-overlay {
  display: block;
}

details[open] .modal-overlay::after {
  position: absolute;
  content: '';
  background-color: rgb(var(--color-foreground), 0.5);
  top: 100%;
  left: 0;
  right: 0;
  height: 100vh;
}

.search-modal {
  opacity: 0;
  border-bottom: 0.1rem solid rgba(var(--color-foreground), 0.08);
  min-height: calc(100% + var(--inputs-margin-offset) + (2 * var(--inputs-border-width)));
  height: 100%;
}

.search-modal__content {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 0 5rem 0 1rem;
  line-height: calc(1 + 0.8 / var(--font-body-scale));
  position: relative;
}

.search-modal__content-bottom {
  bottom: calc((var(--inputs-margin-offset) / 2));
}

.search-modal__content-top {
  top: calc((var(--inputs-margin-offset) / 2));
}

.search-modal__form {
  width: 100%;
}

.search-modal__close-button {
  position: absolute;
  right: 0.3rem;
}

@media screen and (min-width: 750px) {
  .search-modal__close-button {
    right: 1rem;
  }

  .search-modal__content {
    padding: 0 6rem;
  }
}

@media screen and (min-width: 990px) {
  .search-modal__form {
    max-width: 74.2rem;
  }

  .search-modal__close-button {
    position: initial;
    margin-left: 0.5rem;
  }
}

/* Header menu drawer */
.header__icon--menu .icon {
  display: block;
  position: absolute;
  opacity: 1;
  transform: scale(1);
  transition: transform 150ms ease, opacity 150ms ease;
}

details:not([open]) > .header__icon--menu .icon-close,
details[open] > .header__icon--menu .icon-hamburger {
  visibility: hidden;
  opacity: 0;
  transform: scale(0.8);
}

.js details[open]:not(.menu-opening) > .header__icon--menu .icon-close {
  visibility: hidden;
}

.js details[open]:not(.menu-opening) > .header__icon--menu .icon-hamburger {
  visibility: visible;
  opacity: 1;
  transform: scale(1.07);
}

.js details > .header__submenu {
  opacity: 0;
  transform: translateY(-1.5rem);
}

details[open] > .header__submenu {
  animation: animateMenuOpen var(--duration-default) ease;
  animation-fill-mode: forwards;
  z-index: 1;
}

@media (prefers-reduced-motion) {
  details[open] > .header__submenu {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Header menu */
.header__inline-menu {
  margin-left: -1.2rem;
  grid-area: navigation;
  display: none;
}

.header--top-center .header__inline-menu,
.header--top-center .header__heading-link {
  margin-left: 0;
}

@media screen and (min-width: 990px) {
  .header__inline-menu {
    display: block;
  }

  .header--top-center .header__inline-menu {
    justify-self: center;
  }

  .header--top-center .header__inline-menu > .list-menu--inline {
    justify-content: center;
  }

  .header--middle-left .header__inline-menu {
    margin-left: 0;
  }
}

.header__menu {
  padding: 0 1rem;
}

.header__menu-item {
  padding: 1.2rem;
  text-decoration: none;
  color: rgba(var(--color-foreground), 0.75);
}

.header__menu-item:hover {
  color: rgb(var(--color-foreground));
}

.header__menu-item span {
  transition: text-decoration var(--duration-short) ease;
}

.header__menu-item:hover span {
  text-decoration: underline;
  text-underline-offset: 0.3rem;
}

details[open] > .header__menu-item {
  text-decoration: underline;
}

details[open]:hover > .header__menu-item {
  text-decoration-thickness: 0.2rem;
}

details[open] > .header__menu-item .icon-caret {
  transform: rotate(180deg);
}

.header__active-menu-item {
  transition: text-decoration-thickness var(--duration-short) ease;
  color: rgb(var(--color-foreground));
  text-decoration: underline;
  text-underline-offset: 0.3rem;
}

.header__menu-item:hover .header__active-menu-item {
  text-decoration-thickness: 0.2rem;
}

.header__submenu {
  transition: opacity var(--duration-default) ease, transform var(--duration-default) ease;
}

.global-settings-popup,
.header__submenu.global-settings-popup {
  border-radius: var(--popup-corner-radius);
  border-color: rgba(var(--color-foreground), var(--popup-border-opacity));
  border-style: solid;
  border-width: var(--popup-border-width);
  box-shadow: var(--popup-shadow-horizontal-offset) var(--popup-shadow-vertical-offset) var(--popup-shadow-blur-radius)
    rgba(var(--color-shadow), var(--popup-shadow-opacity));
  z-index: -1;
}

.header__submenu.list-menu {
  padding: 1rem 0;
}

.header__submenu .header__submenu {
  background-color: rgba(var(--color-foreground), 0.03);
  padding: 1rem 0;
  margin: 1rem 0;
}

.header__submenu .header__menu-item:after {
  right: 2rem;
}

.header__submenu .header__menu-item {
  justify-content: space-between;
  padding: 0.8rem 2rem;
}

.header__submenu .header__menu-item:hover {
  text-decoration-line: underline;
}

.header__menu-item .icon-caret {
  right: 0.8rem;
}

.header__submenu .icon-caret {
  flex-shrink: 0;
  margin-left: 1rem;
  position: static;
}

header-menu > details,
details-disclosure > details {
  position: relative;
}

@keyframes animateMenuOpen {
  0% {
    opacity: 0;
    transform: translateY(-1.5rem);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.overflow-hidden-mobile,
.overflow-hidden-tablet,
.overflow-hidden-desktop {
  overflow: hidden;
}

@media screen and (min-width: 750px) {
  .overflow-hidden-mobile {
    overflow: auto;
  }
}

@media screen and (min-width: 990px) {
  .overflow-hidden-tablet {
    overflow: auto;
  }
}

.badge {
  border: 1px solid transparent;
  border-radius: var(--badge-corner-radius);
  display: inline-block;
  font-size: 1.2rem;
  letter-spacing: 0.1rem;
  line-height: 1;
  padding: 0.5rem 1.3rem 0.6rem 1.3rem;
  text-align: center;
  background-color: rgb(var(--color-badge-background));
  border-color: rgba(var(--color-badge-border), var(--alpha-badge-border));
  color: rgb(var(--color-badge-foreground));
  word-break: break-word;
}

.gradient {
  background: rgb(var(--color-background));
  background: var(--gradient-background);
  background-attachment: fixed;
}

@media screen and (forced-colors: active) {
  .icon {
    color: CanvasText;
    fill: CanvasText !important;
  }

  .icon-close-small path {
    stroke: CanvasText;
  }
}

.ratio {
  display: flex;
  position: relative;
  align-items: stretch;
}

.ratio::before {
  content: '';
  width: 0;
  height: 0;
  padding-bottom: var(--ratio-percent);
}

.content-container {
  border-radius: var(--text-boxes-radius);
  border: var(--text-boxes-border-width) solid rgba(var(--color-foreground), var(--text-boxes-border-opacity));
  position: relative;
}

.content-container:after {
  content: '';
  position: absolute;
  top: calc(var(--text-boxes-border-width) * -1);
  right: calc(var(--text-boxes-border-width) * -1);
  bottom: calc(var(--text-boxes-border-width) * -1);
  left: calc(var(--text-boxes-border-width) * -1);
  border-radius: var(--text-boxes-radius);
  box-shadow: var(--text-boxes-shadow-horizontal-offset) var(--text-boxes-shadow-vertical-offset)
    var(--text-boxes-shadow-blur-radius) rgba(var(--color-shadow), var(--text-boxes-shadow-opacity));
  z-index: -1;
}

.content-container--full-width:after {
  left: 0;
  right: 0;
  border-radius: 0;
}

@media screen and (max-width: 749px) {
  .content-container--full-width-mobile {
    border-left: none;
    border-right: none;
    border-radius: 0;
  }
  .content-container--full-width-mobile:after {
    display: none;
  }
}

.global-media-settings {
  position: relative;
  border: var(--media-border-width) solid rgba(var(--color-foreground), var(--media-border-opacity));
  border-radius: var(--media-radius);
  overflow: visible !important;
  background-color: rgb(var(--color-background));
}

.global-media-settings:after {
  content: '';
  position: absolute;
  top: calc(var(--media-border-width) * -1);
  right: calc(var(--media-border-width) * -1);
  bottom: calc(var(--media-border-width) * -1);
  left: calc(var(--media-border-width) * -1);
  border-radius: var(--media-radius);
  box-shadow: var(--media-shadow-horizontal-offset) var(--media-shadow-vertical-offset) var(--media-shadow-blur-radius)
    rgba(var(--color-shadow), var(--media-shadow-opacity));
  z-index: -1;
  pointer-events: none;
}

.global-media-settings--no-shadow {
  overflow: hidden !important;
}

.global-media-settings--no-shadow:after {
  content: none;
}

.global-media-settings img,
.global-media-settings iframe,
.global-media-settings model-viewer,
.global-media-settings video,
.global-media-settings .placeholder-svg {
  border-radius: calc(var(--media-radius) - var(--media-border-width));
}

.content-container--full-width,
.global-media-settings--full-width,
.global-media-settings--full-width img,
.global-media-settings--full-width video,
.global-media-settings--full-width iframe,
.global-media-settings--full-width .placeholder-svg {
  border-radius: 0;
  border-left: none;
  border-right: none;
}

/* check for flexbox gap in older Safari versions */
@supports not (inset: 10px) {
  .grid {
    margin-left: calc(-1 * var(--grid-mobile-horizontal-spacing));
  }

  .grid__item {
    padding-left: var(--grid-mobile-horizontal-spacing);
    padding-bottom: var(--grid-mobile-vertical-spacing);
  }

  @media screen and (min-width: 750px) {
    .grid {
      margin-left: calc(-1 * var(--grid-desktop-horizontal-spacing));
    }

    .grid__item {
      padding-left: var(--grid-desktop-horizontal-spacing);
      padding-bottom: var(--grid-desktop-vertical-spacing);
    }
  }

  .grid--gapless .grid__item {
    padding-left: 0;
    padding-bottom: 0;
  }

  @media screen and (min-width: 749px) {
    .grid--peek .grid__item {
      padding-left: var(--grid-mobile-horizontal-spacing);
    }
  }

  .product-grid .grid__item {
    padding-bottom: var(--grid-mobile-vertical-spacing);
  }

  @media screen and (min-width: 750px) {
    .product-grid .grid__item {
      padding-bottom: var(--grid-desktop-vertical-spacing);
    }
  }
}

.font-body-bold {
  font-weight: var(--font-body-weight-bold);
}

/* outline and border styling for Windows High Contrast Mode */
@media (forced-colors: active) {
  .button,
  .shopify-challenge__button,
  .customer button {
    border: transparent solid 1px;
  }

  .button:focus-visible,
  .button:focus,
  .button.focused,
  .shopify-payment-button__button--unbranded:focus-visible,
  .shopify-payment-button [role='button']:focus-visible,
  .shopify-payment-button__button--unbranded:focus,
  .shopify-payment-button [role='button']:focus {
    outline: solid transparent 1px;
  }

  .field__input:focus,
  .select__select:focus,
  .customer .field input:focus,
  .customer select:focus,
  .localization-form__select:focus.localization-form__select:after {
    outline: transparent solid 1px;
  }

  .localization-form__select:focus {
    outline: transparent solid 1px;
  }
}

.rte:after {
  clear: both;
  content: '';
  display: block;
}

.rte > *:first-child {
  margin-top: 0;
}

.rte > *:last-child {
  margin-bottom: 0;
}

.rte table {
  table-layout: fixed;
}

@media screen and (min-width: 750px) {
  .rte table td {
    padding-left: 1.2rem;
    padding-right: 1.2rem;
  }
}

.rte img {
  height: auto;
  max-width: 100%;
  border: var(--media-border-width) solid rgba(var(--color-foreground), var(--media-border-opacity));
  border-radius: var(--media-radius);
  box-shadow: var(--media-shadow-horizontal-offset) var(--media-shadow-vertical-offset) var(--media-shadow-blur-radius)
    rgba(var(--color-shadow), var(--media-shadow-opacity));
  margin-bottom: var(--media-shadow-vertical-offset);
}

.rte ul,
.rte ol {
  list-style-position: inside;
  padding-left: 2rem;
}

.rte li {
  list-style: inherit;
}

.rte li:last-child {
  margin-bottom: 0;
}

.rte a {
  color: rgba(var(--color-link), var(--alpha-link));
  text-underline-offset: 0.3rem;
  text-decoration-thickness: 0.1rem;
  transition: text-decoration-thickness var(--duration-short) ease;
}

.rte a:hover {
  color: rgb(var(--color-link));
  text-decoration-thickness: 0.2rem;
}

.rte blockquote {
  display: inline-flex;
}

.rte blockquote > * {
  margin: -0.5rem 0 -0.5rem 0;
}

/* Image mask global styles */

.shape--mask {
  display: block;
  height: 0;
  width: 0;
}

.shape--arch {
  clip-path: url('#Shape-Arch');
}

.shape--blob {
  clip-path: polygon(var(--shape--blob-1));
}

.shape--chevronleft {
  clip-path: polygon(100% 0%, 85% 50%, 100% 100%, 15% 100%, 0% 50%, 15% 0%);
}

.shape--chevronright {
  clip-path: polygon(85% 0%, 100% 50%, 85% 100%, 0% 100%, 15% 50%, 0% 0%);
}

.shape--circle {
  clip-path: circle(closest-side);
}

.shape--diamond {
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

.shape--parallelogram {
  clip-path: polygon(15% 0, 100% 0%, 85% 100%, 0% 100%);
}

.shape--round {
  clip-path: ellipse(45% 45% at 50% 50%);
}

/* Fixed background */
.animate--fixed {
  clip-path: inset(0);
}

.animate--fixed > img:not(.zoom):not(.deferred-media__poster-button),
.animate--fixed > svg:not(.zoom):not(.deferred-media__poster-button) {
  position: fixed;
  height: 100vh;
}

/* Zoom in image on scroll */
.animate--zoom-in {
  --zoom-in-ratio: 1;
}

.animate--zoom-in > img,
.animate--zoom-in > .svg-wrapper {
  transition: scale var(--duration-short) linear;
  scale: var(--zoom-in-ratio);
}

/* Animations */

@media (prefers-reduced-motion: no-preference) {
  .animate--ambient > img,
  .animate--ambient > .svg-wrapper {
    animation: animateAmbient 30s linear infinite;
  }

  @keyframes animateAmbient {
    0% {
      transform: rotate(0deg) translateX(1em) rotate(0deg) scale(1.2);
    }
    100% {
      transform: rotate(360deg) translateX(1em) rotate(-360deg) scale(1.2);
    }
  }

  .scroll-trigger.animate--fade-in,
  .scroll-trigger.animate--slide-in {
    opacity: 0.01;
  }

  .scroll-trigger.animate--slide-in {
    transform: translateY(2rem);
  }

  .scroll-trigger:not(.scroll-trigger--offscreen).animate--fade-in {
    opacity: 1;
    animation: var(--animation-fade-in);
  }

  .scroll-trigger:not(.scroll-trigger--offscreen).animate--slide-in {
    animation: var(--animation-slide-in);
    animation-delay: calc(var(--animation-order) * 75ms);
  }

  .scroll-trigger.scroll-trigger--design-mode.animate--fade-in,
  .scroll-trigger.scroll-trigger--design-mode.animate--slide-in,
  .scroll-trigger.scroll-trigger--design-mode .slider,
  .scroll-trigger:not(.scroll-trigger--offscreen).scroll-trigger--cancel {
    opacity: 1;
    animation: none;
    transition: none;
    transform: none;
  }

  .scroll-trigger.scroll-trigger--design-mode.animate--slide-in {
    transform: translateY(0);
  }

  @keyframes slideIn {
    from {
      transform: translateY(2rem);
      opacity: 0.01;
    }
    to {
      transform: translateY(0);
      opacity: 1;
    }
  }

  @keyframes fadeIn {
    from {
      opacity: 0.01;
    }
    to {
      opacity: 1;
    }
  }
}

/* Element Hovers: Vertical Lift, 3d Lift */

@media (prefers-reduced-motion: no-preference) and (hover: hover) {
  .animate--hover-3d-lift .card-wrapper .card--card,
  .animate--hover-3d-lift .card-wrapper .card--standard .card__inner,
  .animate--hover-3d-lift .button:not(.button--tertiary),
  .animate--hover-3d-lift .shopify-challenge__button,
  .animate--hover-3d-lift .customer button,
  .animate--hover-3d-lift .shopify-payment-button__button,
  .animate--hover-3d-lift .deferred-media .deferred-media__poster-button {
    transition: transform var(--duration-long) ease, box-shadow var(--duration-long) ease;
    transform-origin: center;
  }

  .animate--hover-3d-lift .card-wrapper:hover .card--card,
  .animate--hover-3d-lift .card-wrapper:hover .card--standard .card__inner,
  .animate--hover-3d-lift .button:not(.button--tertiary):not([disabled]):hover,
  .animate--hover-3d-lift .shopify-challenge__button:not([disabled]):hover,
  .animate--hover-3d-lift .customer button:not([disabled]):hover,
  .animate--hover-3d-lift .shopify-payment-button__button:hover,
  .animate--hover-3d-lift .deferred-media:hover .deferred-media__poster-button {
    transition: transform var(--duration-extended) ease, box-shadow var(--duration-long) ease; /* Slow the card transition speed while hover is active. */
    transform: rotate(1deg);
    box-shadow: -1rem -1rem 1rem -1rem rgba(0, 0, 0, 0.05), 1rem 1rem 1rem -1rem rgba(0, 0, 0, 0.05),
      0 0 0.5rem 0 rgba(255, 255, 255, 0), 0 2rem 3.5rem -2rem rgba(0, 0, 0, 0.5);
  }

  .animate--hover-3d-lift .deferred-media:hover .deferred-media__poster-button {
    transform: translate(-50%, -50%) scale(1.05); /* Apply a specialized transform to the video play button. */
  }

  .animate--hover-3d-lift .collage__item .card-wrapper:hover .card--card,
  .animate--hover-3d-lift .collage__item .card-wrapper:hover .card--standard .card__inner {
    transform: rotate(0.5deg); /* Less intense rotation for collage items. */
  }

  .animate--hover-3d-lift .product-grid .grid__item:hover,
  .animate--hover-3d-lift .collection-list .grid__item:hover,
  .animate--hover-3d-lift .collage__item:hover,
  .animate--hover-3d-lift .blog-articles .article:hover,
  .animate--hover-3d-lift .complementary-slide li:hover {
    z-index: 2; /* Make sure the hovered card is the topmost card. */
  }

  .animate--hover-3d-lift .product-grid {
    isolation: isolate; /* Ensure z-index changes here don't negatively effect other UI stacking. */
  }

  .animate--hover-3d-lift .card-wrapper .card--shape.card--standard:not(.card--text) .card__inner {
    box-shadow: none;
    transition: transform var(--duration-long) ease, filter var(--duration-long) ease;
  }

  .animate--hover-3d-lift .card-wrapper:hover .card--shape.card--standard:not(.card--text) .card__inner {
    transition: transform calc(2 * var(--duration-extended)) ease, filter var(--duration-long) ease; /* Slow the card transition speed while hover is active. */
    filter: drop-shadow(0rem 2rem 2rem rgba(0, 0, 0, 0.15)) drop-shadow(0rem 1rem 1rem rgba(0, 0, 0, 0.15));
  }

  .animate--hover-3d-lift .card-wrapper:hover .card--card:after,
  .animate--hover-3d-lift .card-wrapper:hover .card--standard .card__inner:after,
  .animate--hover-3d-lift
    .card-wrapper:hover
    .card--shape.card--standard:not(.card--text)
    .card__inner
    .card__media:before {
    background-image: var(--easter-egg);
    background-size: 250px 250px;
    mix-blend-mode: color-dodge;
    pointer-events: none;
    z-index: 2;
  }

  .animate--hover-3d-lift
    .card-wrapper:hover
    .card--shape.card--standard:not(.card--text)
    .card__inner
    .card__media:before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
  }

  .animate--hover-3d-lift .card-wrapper .card--card:before,
  .animate--hover-3d-lift .card-wrapper .card--standard .card__media:after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0;
    pointer-events: none;
    transition: background-position calc(2 * var(--duration-extended)) ease, opacity var(--duration-default) ease;
    mix-blend-mode: overlay;
    background-size: 400% 100%;
    background-position: 90% 0;
    background-repeat: no-repeat;
    background-image: linear-gradient(
      135deg,
      rgba(255, 255, 255, 0) 45%,
      rgba(255, 255, 255, 1) 50%,
      rgba(255, 255, 255, 0) 55%
    );
  }

  .animate--hover-3d-lift .card-wrapper:hover .card--card:before,
  .animate--hover-3d-lift .card-wrapper:hover .card--standard .card__media:after {
    opacity: 0.2;
    transition: background-position 6s ease, opacity var(--duration-long) ease;
    background-position: left;
    z-index: 2;
  }

  :root {
    --easter-egg: none;
    --sparkle: url('./sparkle.gif');
  }

  .animate--hover-vertical-lift .button:not(.button--tertiary),
  .animate--hover-vertical-lift .shopify-challenge__button,
  .animate--hover-vertical-lift .customer button,
  .animate--hover-vertical-lift .shopify-payment-button__button {
    transition: transform var(--duration-default) var(--ease-out-slow);
  }

  .animate--hover-vertical-lift .card-wrapper .card--card,
  .animate--hover-vertical-lift .card-wrapper .card--standard .card__inner {
    transition: transform var(--duration-medium) var(--ease-out-slow);
  }

  .animate--hover-vertical-lift .card-wrapper:hover .card--card,
  .animate--hover-vertical-lift .card-wrapper:hover .card--standard .card__inner {
    transform: translateY(-0.75rem);
  }

  .animate--hover-vertical-lift .card-wrapper:active .card--card,
  .animate--hover-vertical-lift .card-wrapper:active .card--standard .card__inner {
    transform: translateY(-0.5rem);
  }

  .animate--hover-vertical-lift .button:not(.button--tertiary):not([disabled]):hover,
  .animate--hover-vertical-lift .shopify-challenge__button:not([disabled]):hover,
  .animate--hover-vertical-lift .customer button:not([disabled]):hover,
  .animate--hover-vertical-lift .shopify-payment-button__button:hover {
    transform: translateY(-0.25rem);
  }

  .animate--hover-vertical-lift .button:not(.button--tertiary):not([disabled]):active,
  .animate--hover-vertical-lift .shopify-challenge__button:not([disabled]):active,
  .animate--hover-vertical-lift .customer button:not([disabled]):active,
  .animate--hover-vertical-lift .shopify-payment-button__button:active {
    transform: translateY(0);
  }

  .animate--hover-vertical-lift .button:not([disabled]):hover:after,
  .animate--hover-vertical-lift .customer button:not([disabled]):hover:after,
  .animate--hover-vertical-lift .shopify-payment-button__button:not([disabled]):hover:after {
    --border-offset: 0.3px; /* Default is 1.3px as defined above in this file. This removes 1px to prevent the border from growing on buttons when this effect is on.  */
    box-shadow: 0 0 0 calc(var(--buttons-border-width) + var(--border-offset))
        rgba(var(--color-button-text), var(--border-opacity)),
      0 0 0 var(--buttons-border-width) rgba(var(--color-button), var(--alpha-button-background));
  }

  .animate--hover-vertical-lift .button:not([disabled]).button--secondary:hover:after {
    --border-offset: 0px; /* Prevent the border from growing on buttons when this effect is on. */
  }
}

/* Loading spinner */
.loading__spinner {
  position: absolute;
  z-index: 1;
  width: 1.8rem;
}

.loading__spinner {
  width: 1.8rem;
  display: inline-block;
}

.spinner {
  animation: rotator 1.4s linear infinite;
}

@keyframes rotator {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(270deg);
  }
}

.path {
  stroke-dasharray: 280;
  stroke-dashoffset: 0;
  transform-origin: center;
  stroke: rgb(var(--color-foreground));
  animation: dash 1.4s ease-in-out infinite;
}

@media screen and (forced-colors: active) {
  .path {
    stroke: CanvasText;
  }
}

@keyframes dash {
  0% {
    stroke-dashoffset: 280;
  }
  50% {
    stroke-dashoffset: 75;
    transform: rotate(135deg);
  }
  100% {
    stroke-dashoffset: 280;
    transform: rotate(450deg);
  }
}

.loading__spinner:not(.hidden) + .cart-item__price-wrapper,
.loading__spinner:not(.hidden) ~ cart-remove-button {
  opacity: 50%;
}

.loading__spinner:not(.hidden) ~ cart-remove-button {
  pointer-events: none;
  cursor: default;
}

/* Progress bar */
.progress-bar-container {
  width: 100%;
  margin: auto;
}

.progress-bar {
  height: 0.13rem;
  width: 100%;
}

.progress-bar-value {
  width: 100%;
  height: 100%;
  background-color: rgb(var(--color-foreground));
  animation: indeterminateAnimation var(--duration-extra-longer) infinite ease-in-out;
  transform-origin: 0;
}

.progress-bar .progress-bar-value {
  display: block;
}

@keyframes indeterminateAnimation {
  0% {
    transform: translateX(-20%) scaleX(0);
  }
  40% {
    transform: translateX(30%) scaleX(0.7);
  }
  100% {
    transform: translateX(100%) scaleX(0);
  }
}