scss

{% comment %}
/*
Fast Navigation == Double click + Ctrl+F + Enter

_Font_face

_Functions
    _Control_color
    _Strip_number
    _Adaptive_color

_Variables
    _Master_variable
    _All_variable

_Mixins
    _Media_query
    _Structure
    _Transitions
    _Shadows
    _Hovers
    _Placeholders
    _Font_stack
    _Buttons
    _Utilities
    _Icons
    _Font_stack
    _Animations
    _Flexbox

_Structure
    _Grid_setup
    _Section_header
    _Main_content
    _Box
    _Wrapper
    _Product_grid
    _Collection_grid
    _Article_grid

_Vendor
    _Magnific_popup
    _Slick_slider
    _jQuery_zoom

_Onboarding

_Partials
    _Reset
    _Typography
    _Links
    _Select_option
    _Form_elements
    _Input_group
    _List
    _Hr
    _Buttons
    _Tables
    _Images
    _RTE
    _Blockquote
    _Pagination
    _Icons
    _Quantity_selectors

_Homepage_section
    _Hero
    _Collection_list
    _Featured_collection
    _Featured_producte
    _Featured_blog
    _Featured_row
    _Featured_contentp
    _Featured_video
    _Featured_column
    _Featured_image
    _Newsletter
    _Gallery
    _Quotes
    _Logo_list
    _Custom_html
    _Map

_Global_section
    _Announcement
    _Header
    _Drawers
    _Cart_drawer
    _Nav_drawer
    _Search_drawer
    _Guarantee
    _Footer

_Components
    _Overlay
    _Loading
    _Payment_icons
    _Cardbox
    _Currency_selector

_Template
  _All_collection_template
  _Collection_template
  _Product_template
  _Blog_template
  _Article_template

_Pages
  _Password_page
  _Cart_page
  _Search_page
  _Contact_page
  _Policies_page

_Utilities

_App_style
  _Review_widget
  _Product_review
  _shopify_digital_downloads

_Animate_css

_App_override
  _animate_css
  _font_awesome

*/
{% endcomment %}


/*============================================================================
  _Timber
==============================================================================*/
/*================ Debutify Variables ================*/
// Border
$borderRadius: {{ settings.border_radius }}px;
$borderWidth: {{ settings.border_width }}px;
$borderStyle: solid;
$rounded: 5px;
$round: 25px;


/*============================================================================
  Shopify Timber v2.1.0 | github.com/shopify/timber
  Copyright 2015 Shopify Inc.
  Author Carson Shold @cshold
  Built with Sass - http://sass-lang.com/

  Some things to know about this file:
    - Sass is compiled on Shopify's server so you don't need to convert it to CSS yourself
    - The output CSS is compressed and comments are removed
    - This file merges your stylesheets into one master at assets/timber.scss.liquid
==============================================================================*/

/*================ Variables, theme settings, and Sass mixins ================*/
/*============================================================================
  #Sass Mixins
==============================================================================*/
.clearfix {
  &:after {
    content: '';
    display: table;
    clear: both;
  }
}

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

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

/*============================================================================
  Prefix mixin for generating vendor prefixes.
  Based on https://github.com/thoughtbot/bourbon/blob/master/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 prefixFlex($property, $value, $prefixes) {
  @each $prefix in $prefixes {
    @if $prefix == webkit {
      -webkit-#{$property}: $value;
    } @else if $prefix == moz {
      -moz-#{$property}: $value;
    } @else if $prefix == ms {
      -ms-#{$property}: $value;
    } @else if $prefix == o {
      -o-#{$property}: $value;
    } @else if $prefix == spec {
      #{$property}: $value;
    } @else  {
      @warn 'Unrecognized prefix: #{$prefix}';
    }
  }
}

@mixin keyframes($name) {
  @-webkit-keyframes #{$name} {
    @content;
  }
  @-moz-keyframes #{$name} {
    @content;
  }
  @-ms-keyframes #{$name} {
    @content;
  }
  @keyframes #{$name} {
    @content;
  }
}

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

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

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

@mixin gradient($from, $to, $fallback) {
  background: $fallback;
  background: -moz-linear-gradient(top, $from 0%, $to 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,$from), color-stop(100%,$to));
  background: -webkit-linear-gradient(top, $from 0%, $to 100%);
  background: -o-linear-gradient(top, $from 0%, $to 100%);
  background: -ms-linear-gradient(top, $from 0%, $to 100%);
  background: linear-gradient(top bottom, $from 0%, $to 100%);
}

@mixin backface($visibility: hidden) {
  @include prefix('backface-visibility', #{$visibility});
}

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

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

@function adaptive-color($color, $percentage) {
  @if (lightness( $color ) > 40) {
    @return darken($color, $percentage);
  }
  @else {
    @return lighten($color, $percentage);
  }
}

@function strip-units($number) {
  @return $number / ($number * 0 + 1);
}

//Font Stack Mixins
@mixin headerFontStack {
  font-family: $headerFontStack;
  font-weight: $headerFontWeight;
  font-style: $headerFontStyle;
}

@mixin accentFontStack {
  font-family: $accentFontStack;
  font-weight: $accentFontWeight;
  font-style: $accentFontStyle;
  {% if settings.accent_spacing %}
    letter-spacing: 0.1em;
  {% endif %}
  {% if settings.accent_transform %}
    text-transform: uppercase;
  {% endif %}
}

@mixin visuallyHidden {
  clip: rect(0 0 0 0);
  clip: rect(0, 0, 0, 0);
  overflow: hidden;
  position: absolute;
  height: 1px;
  width: 1px;
}

/*================ Animations and keyframes ================*/
@include keyframes(spin) {
  0% {
    @include transform(rotate(0deg));
  }

  100% {
    @include transform(rotate(360deg));
  }
}

@include keyframes(fadeIn) {
  0%, 35% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

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

/*============================================================================
  Flexbox prefix mixins from Bourbon
    https://github.com/thoughtbot/bourbon/blob/master/app/assets/stylesheets/css3/_flex-box.scss
==============================================================================*/
@mixin display-flexbox() {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 100%; // necessary for ie10
}

@mixin flex-wrap($value: nowrap) {
  @include prefixFlex(flex-wrap, $value, webkit moz ms spec);
}

@mixin flex-direction($value) {
  @include prefixFlex(flex-direction, $value, webkit moz ms spec);
}

@mixin align-items($value: stretch) {
  $alt-value: $value;

  @if $value == 'flex-start' {
    $alt-value: start;
  } @else if $value == 'flex-end' {
    $alt-value: end;
  }

  // sass-lint:disable no-misspelled-properties
  -ms-flex-align: $alt-value;
  @include prefixFlex(align-items, $value, webkit moz ms o spec);
}

@mixin flex($value) {
  @include prefixFlex(flex, $value, webkit moz ms spec);
}

@mixin flex-basis($width: auto) {
  // sass-lint:disable no-misspelled-properties
  -ms-flex-preferred-size: $width;
  @include prefixFlex(flex-basis, $width, webkit moz spec);
}

@mixin align-self($align: auto) {
  // sass-lint:disable no-misspelled-properties
  -ms-flex-item-align: $align;
  @include prefixFlex(align-self, $align, webkit spec);
}

@mixin justify-content($justify: flex-start) {
  @include prefixFlex(justify-content, $justify, webkit ms spec);
}

$viewportIncrement: 1px;
$siteWidth: 1050px;
$small: 590px;
$medium: 768px;
$large: 769px;
$xlarge: $siteWidth + $viewportIncrement;

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

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

/*================ Color variables ================*/
$colorPrimary: {{ settings.color_primary }};
$colorSecondary: {{ settings.color_secondary }};

// Button colors
$colorBtnPrimary: $colorPrimary;
$colorBtnPrimaryHover: lighten($colorBtnPrimary, 12%);
$colorBtnPrimaryActive: adaptive-color($colorPrimary, 24%);
$colorBtnPrimaryText: {{ settings.color_button_text }};

$colorBtnSecondary: $colorSecondary;
$colorBtnSecondaryHover: lighten($colorBtnSecondary, 10%);
$colorBtnSecondaryActive: adaptive-color($colorSecondary, 10%);
$colorBtnSecondaryText: {{ settings.color_button_text }};

$colorBtnSecondaryAccent: $colorBtnPrimary;
$colorBtnSecondaryAccentHover: lighten($colorBtnSecondaryAccent, 12%);
$colorBtnSecondaryAccentActive: adaptive-color($colorBtnSecondaryAccent, 24%);

// Text link colors
$colorLink: $colorSecondary;
$colorLinkHover: $colorPrimary;

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

// Heading colors
$colorHeadings: {{ settings.color_headings }};

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

// Border size
$borderWidthHeader: 1px;

// Nav and dropdown link background
$colorNav: $colorBody;
$colorNavText: $colorHeadings;

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

// Drawer sizes and colors
$drawerNavWidth: 300px;
$drawerCartWidth: 300px;
$drawerCartWidthLarge: 400px; // small-up width
$drawerHeaderHeight: 80px;
$drawerCartFooterHeight: 130px; // default, overwritten by JS
$colorDrawerText: {{ settings.color_drawer_text }};
$colorDrawerButtonText: {{ settings.color_drawer_button_text }};
$drawerTransition: 'all 0.35s cubic-bezier(0.46, 0.01 , 0.32, 1)';

// Sizing variables
$gutter: 30px;
$gridGutterMobile: 22px;
$section-spacing-small: 35px;
$gridGutter: 30px; // can be a %, but nested grids will have smaller margins because of it
$contentTopMargin: 80px;
$contentTopMarginSmall: 35px;
$radius: 0;
$customSelectHeight: 46px;

// Z-index
$zindexNavDropdowns: 5;
$zindexDrawer: 10;
$zindexHeroHeader: 2;
$zindexDrawerOverlay: 20;

// Product Collage Grid
$collageImageXLarge: 670px;
$collageImageLarge: 520px;
$collageImageMedium: 310px;
$collageImageSmall: 230px;

{% if settings.product_vendor_enable %}
  $collageImageLarge: 544px;
{% endif %}

// Collection Collage Grid
// These heights are used to determine the row height for the
// collection grid.
$collectionCollageRowHeightFull: 450px;
$collectionCollageRowHeightLarge: 310px;
$collectionCollageRowHeightSmall: 280px;

// Password page
$passwordPageUseBgImage: true;

// Section onboarding
$color-blankstate: rgba($colorTextBody, 0.35);
$color-blankstate-background: rgba($colorTextBody, 0.10);

/*================ Typography ================*/
{%- assign accent_family = settings.accent_family -%}
{%- assign base_family = settings.base_family -%}
{%- assign header_family = settings.header_family -%}

{{ accent_family | font_face }}
{{ base_family | font_face }}
{{ header_family | font_face }}

{%- assign base_family_bold = base_family | font_modify: 'weight', 'bolder' -%}
{%- assign base_family_italic = base_family | font_modify: 'style', 'italic' -%}
{%- assign base_family_bold_italic = base_family_bold | font_modify: 'style', 'italic' -%}
{%- assign accent_family_bold = accent_family | font_modify: 'weight', 'bolder' -%}

{{ base_family_bold | font_face }}
{{ base_family_italic | font_face }}
{{ base_family_bold_italic | font_face }}
{{ accent_family_bold | font_face }}

// Header Font
$headerFontStack: {{ header_family.family }}, {{ header_family.fallback_families }};
$headerFontWeight: {{ header_family.weight }};
$headerFontStyle: {{ header_family.style }};

// Body Font
$bodyFontStack: {{ base_family.family }}, {{ base_family.fallback_families }};
$bodyFontWeight: {{ base_family.weight }};
$bodyFontWeightBold: {{ base_family_bold.weight | default: 700 }};
$bodyFontStyle: {{ base_family.style }};

// Accent Font
$accentFontStack: {{ accent_family.family }}, {{ accent_family.fallback_families }};
$accentFontWeight: {{ accent_family.weight }};
$accentFontWeightBold: {{ accent_family_bold.weight | default: 700 }};
$accentFontStyle: {{ accent_family.style }};

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

$socialIconFontStack: 'icons';

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

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

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

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

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

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


/*================ Site-wide styles ================*/
/*================ Partials | Layout Styles ================*/
html,
body {
  background-color: $colorBody;
}

*:focus {
  outline: none;
}


em {
  font-style: italic;
}

b, strong {
  font-weight: bold;
}

small {
  font-size: 0.9em;
}

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

sub {
  bottom: -0.5em;
}

code, pre {
  background-color: #faf7f5;
  font-family: Consolas,monospace;
  font-size: 1em;
  border: 0 none;
  padding: 0 2px;
  color: #51ab62;
}

pre {
  overflow: auto;
  padding: $gutter/2;
  margin: 0 0 $gutter;
}

/*================ Partials | Lists ================*/
ul, ol {
  padding: 0;
  text-rendering: optimizeLegibility;
}

ol ol {
  list-style: lower-alpha;
}

ol { list-style: decimal; }

ul.square { list-style: square outside; }
ul.disc { list-style: disc outside; }
ol.alpha { list-style: lower-alpha outside; }

.no-bullets {
  list-style: none outside;
  margin-left: 0;
}

/*================ Partials | Helper Classes ================*/
.clearfix {
  &:after {
    content: "";
    display: table;
    clear: both; }
  *zoom: 1;
}

.is-transitioning {
  display: block !important;
  visibility: visible !important;
}

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

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

@include at-query ($min, $large) {
  .large--display-table {
    display: table;
    table-layout: fixed;
    width: 100%;
  }

  .large--display-table-cell {
    display: table-cell;
    vertical-align: middle;
    float: none;
  }
}

.visually-hidden {
  @include visuallyHidden();
}

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

.media-img {
  float: left;
  margin-right: $gutter;
}

.media-img-right {
  float: right;
  margin-left: $gutter;
}

.media-img img,
.media-img-right img {
  display: block;
}

/*=============== Image Transitions ===================*/
.fade-in {
  opacity: 0;
  transition: opacity 250ms ease-out;

  &.lazyloaded {
    opacity: 1;
  }

  .no-js & {
    @include visuallyHidden();
  }
}

/*================ Partials | Links and Buttons ================*/
button {
  overflow: visible;
}

button[disabled],
html input[disabled] {
  cursor: default;
}

.btn,
.rte .btn {
  display: inline-block;
  padding: 8px 10px;
  margin: 0;
  width: auto;
  line-height: 1.42;
  font-weight: bold;
  text-decoration: none;
  text-align: center;
  vertical-align: middle;
  white-space: normal;
  cursor: pointer;
  border: 1px solid transparent;
  @include prefix('user-select', 'none');
  -webkit-appearance: none;
  -moz-appearance: none;
  border-radius: $radius;

}

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

/*================ Partials | Images, SVG, and iframes ================*/
img {
  border: 0 none;
}

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

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

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

.table-wrap {
  max-width: 100%;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

/*================ Partials | Forms ================*/
form {
  margin: 0;
}



/*================ Prevent zoom on touch devices in active inputs ================*/
@include at-query($max, $medium) {
  input,
  textarea {
    font-size: 16px;
  }
}

button,
input,
textarea {
  -webkit-appearance: none;
  -moz-appearance: none;
}

button {
  background: none;
  border: none;
  display: inline-block;
  cursor: pointer;
}

legend {
  border: 0;
  padding: 0;
}

button,
input[type="submit"] {
  cursor: pointer;
}

input,
textarea,
select {
  max-width: 100%;
  padding: 8px 10px;
  border-radius: $radius;

  &[disabled],
  &.disabled {
    cursor: default;
    background-color: $disabledGrey;
    border-color: $disabledBorder;
  }

  &.input-full {
    width: 100%;
  }
}

textarea {
  min-height: 100px;
}

/*================ Input element overrides ================*/
input[type="checkbox"],
input[type="radio"] {
  margin: 0 10px 0 0;
  padding: 0;
  width: auto;
}

input[type="checkbox"] {
  -webkit-appearance: checkbox;
  -moz-appearance: checkbox;
}

input[type="radio"] {
  -webkit-appearance: radio;
  -moz-appearance: radio;
}

input[type="image"] {
  padding-left: 0;
  padding-right: 0;
}

optgroup {
  font-weight: bold;
}

// Force option color (affects IE only)
option {
  color: #000;
  background-color: #fff;
}

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

/*================ Form labels ================*/
.hidden-label {
  @include visuallyHidden();

  // No placeholders, so force show labels
  .ie9 &,
  .lt-ie9 & {
    position: static;
    height: auto;
    width: auto;
    margin-bottom: 2px;
    overflow: visible;
    clip: initial;
  }
}

label[for] {
  cursor: pointer;
}


/*================ Input Group ================*/
.input-group {
  position: relative;
  display: table;
  border-collapse: separate;

  input {
    // Nasty Firefox hack for inputs http://davidwalsh.name/firefox-buttons
    &::-moz-focus-inner {
      border: 0;
      padding: 0;
      margin-top: -1px;
      margin-bottom: -1px;
    }
  }
}

.input-group-field,
.input-group-btn {
  display: table-cell;
  vertical-align: middle;
  margin: 0;
}


.input-group .input-group-field {
  width: 100%;
}

.input-group-btn {
  position: relative;
  white-space: nowrap;
  width: 1%;
  padding: 0;
}

/*================ Selector wrapper ================*/
.selector-wrapper {
  label {
    margin-right: 10px;
  }

  + .selector-wrapper {
    margin-top: $gutter/2;
  }
}

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

.icon-fallback-text .icon {
  display: none;

  .supports-fontface & {
    display: inline-block;
  }
}

/*============================================================================
  A generic way to visually hide content while
  remaining accessible to screen readers (h5bp.com)
==============================================================================*/

.icon:before {
  display: none;
}

.supports-fontface .icon:before {
  display: inline;
  font-family: $socialIconFontStack;
  text-decoration: none;
  speak: none; // future fallback, limited in effect currently
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

.payment-icons {
  @include prefix('user-select', 'none');
  cursor: default;
  margin-bottom: 0;

  li {
    margin: 0 ($gutter / 4) ($gutter / 4);
    cursor: default;
  }

  .icon {
    font-size: 30px;
    line-height: 30px;
  }

  .fallback-text {
    text-transform: capitalize;
  }
}

.social-icons .icon {
  padding-right: 4px;
}

.social-icons .icon-google_plus {
  font-size: 0.8em;
}

/*================ Module | Rich Text Editor ================*/
.rte {
  @include clearfix;

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

  a {
    text-decoration: none;
  }

  li {
    margin-bottom: 0;
  }


  table {
    table-layout: fixed;
  }
  .fas {
    margin-right: 6px;
    color: #8cc300 !important;
  }
}

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

.rte--nomargin {
  margin-bottom: 0;
}


/*================ Module | Site Header ================*/
.site-header {

  .grid--table {
    display: table;
    //table-layout: fixed;
    width: 100%;

    > .grid__item {
      float: none;
      display: table-cell;
    }
  }

}

/*================ Module | Search Bar ================*/
.search-bar {
  max-width: 100%;
}

.search-bar--header {
  max-width: 300px;
}


/*================ Module | Site Nav and Dropdowns ================*/
.site-nav__item {
  position: relative;
  display: inline-block;
  margin: 0;

  li {
    display: block;
  }
}

.site-nav--mobile {
  @extend .site-nav;
  margin-left: -10px;

  &.text-right {
    margin: 0 -10px 0 0;
  }
}

.site-nav__link--icon {
  padding-left: $gutter / 4;
  padding-right: $gutter / 4;
}

.site-nav--mobile {
  .site-nav__link {
    display: inline-block;
  }

  .icon {
    font-size: em(30px);
  }
}

/*================ Dropdowns ================*/
.site-nav__dropdown {
  opacity: 0;
  display: block;
  position: absolute;
  left: 0;
  margin: 0;
  z-index: $zindexNavDropdowns;
  pointer-events: none;

  a {
    text-align: left;
  }

  &.nav-outside {
    left: auto;
    right: 0;
  }
}

/*================ Mobile navigation ================*/
.mobile-nav {
  li {
    margin-bottom: 0;
    list-style: none;
  }
}

.mobile-nav__item {
  position: relative;
  display: block;

  &:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: $gutter/2;
    right: $gutter/2;
    border-bottom: 1px solid transparent;
  }

  .mobile-nav > &:last-child:after {
    display: none;
  }
}

.mobile-nav__has-sublist {
  display: table;
  width: 100%;

  .mobile-nav__link {
    display: table-cell;
    vertical-align: middle;
    width: 100%;
  }
}


.mobile-nav__toggle {
  display: table-cell;
  vertical-align: middle;
  width: 1%;
}

.mobile-nav__toggle-open {
  display: block;

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

.mobile-nav__toggle-close {
  display: none;

  .mobile-nav--expanded & {
    display: block;
  }
}

/*================ View-specific styles ================*/
/*================ Templates | Cart Page ================*/
.cart__row {
  position: relative;
}

.cart__image {
  display: block;

  img {
    width: 100%;
    display: block;
  }
}

.cart__product-name {
  margin-bottom: 0;
}

.cart__discount {
  padding-top: 3px;
}

.cart__product-meta {
  margin-bottom: 0;
}

.cart--continue-browsing {
  .cart--no-cookies & {
    display: none;
  }
}

.cart--empty-message {
  .cart--no-cookies & {
    display: none;
  }
}

.cookie-message {
  display: none;
  padding-bottom: 25px;

  .cart--no-cookies & {
    display: block;
  }
}











/*============================================================================
  _Font_face
==============================================================================*/

{%- assign accent_family = settings.accent_family -%}
{%- assign base_family = settings.base_family -%}
{%- assign header_family = settings.header_family -%}

{{ accent_family | font_face }}
{{ base_family | font_face }}
{{ header_family | font_face }}

{%- assign base_family_bold = base_family | font_modify: 'weight', 'bolder' -%}
{%- assign base_family_italic = base_family | font_modify: 'style', 'italic' -%}
{%- assign base_family_bold_italic = base_family_bold | font_modify: 'style', 'italic' -%}
{%- assign accent_family_bold = accent_family | font_modify: 'weight', 'bolder' -%}

{{ base_family_bold | font_face }}
{{ base_family_italic | font_face }}
{{ base_family_bold_italic | font_face }}
{{ accent_family_bold | font_face }}


/*============================================================================
  _Functions
==============================================================================*/

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

/*================ _Strip_number ================*/
@function strip-units($number) {
  @return $number / ($number * 0 + 1);
}

/*================ _Adaptive_color ================*/
@function adaptive-color($color, $percentage) {
  @if (lightness( $color ) > 40) {
    @return darken($color, $percentage);
  }
  @else {
    @return lighten($color, $percentage);
  }
}
@function adaptive-color-reverse($color, $percentage) {
  @if (lightness( $color ) > 40) {
    @return lighten($color, $percentage);
  }
  @else {
    @return darken($color, $percentage);
  }
}

/*============================================================================
  _Variables
==============================================================================*/

/*================ _Master_variables ================*/

//base font size
$baseFontSize: {{ settings.base_font_size }}px;
$baseFontSize-sm: floor($baseFontSize * .8);
$baseFontSize-lg: floor($baseFontSize * 1.2);

//spacer
$spacer: $baseFontSize;
$spacer-xs: floor($spacer * .25);
$spacer-sm: floor($spacer * .5);
$spacer-lg: floor($spacer * 1.5);
$spacer-xl: floor($spacer * 3);

//grid
$gutter: 30px;
$gutter-sm: 16px;
$gutter-lg: ($gutter * 2);

//percentage for default color
$percentageColor: 3%;
$percentageColorBorder: 2%;

//body
$colorBody: {{ settings.color_body_bg }};
$colorBodyText: {{ settings.color_body_text }};
$baseLineHeight: 1.5;

//default color
$colorDefault: {{ settings.color_default }};

//border
$borderWidth: {{ settings.border_width }}px;
$colorBorder: adaptive-color($colorDefault, $percentageColorBorder);
$borderStyle: solid;
$borders: ($borderWidth) ($borderStyle) ($colorBorder);

/*================ _All_variables ================*/

//colors
$colorPrimary: {{ settings.color_primary }};
$colorSecondary: {{ settings.color_secondary }};
$colorBuy: {{ settings.color_buy }};
$colorButtonText: {{ settings.color_button_text }};
$colorSale: {{ settings.color_sale }};

//button size
$paddingButtonY: 16px;
$paddingButtonX: 24px;
$paddingButtonSmallY: 6px;
$paddingButtonSmallX: 10px;

//input size
$heightInputBorder: $borderWidth * 2;
$heightInputInner: floor(($baseFontSize * $baseLineHeight) + ($paddingButtonY * 2));
$heightInput: $heightInputInner + $heightInputBorder;
$heightInputInnerSmall: floor(($baseFontSize * $baseLineHeight) + ($paddingButtonSmallY * 2));
$heightInputSmall: $heightInputInnerSmall + $heightInputBorder;

//social medias
$colorFacebook: #3b5998;
$colorTwitter: #1da1f2;
$colorPinterest: #bd081c;
$colorInstagram: #e1306c;
$colorSnapchat: #fffc00;
$colorGoogle: #dd4b39;
$colorTumblr: #35465c;
$colorYoutube: #ff0000;
$colorVimeo: #1ab7ea;

//dropdown
$paddingDropdown: $spacer-sm;
$paddingDropdownItem: $spacer;

// Border radius
$circle: 100px;
$borderRadius: {{ settings.border_radius }}px;

//shadows
$shadowColor: color-control($colorBody);
$shadowOpacity: 0.07;

$shadow: 0px 0px 40px rgba($shadowColor, $shadowOpacity);
$shadow-sm: 0px 0px 40px rgba($shadowColor, $shadowOpacity);
$shadowTop: 0px 0px 40px rgba($shadowColor, $shadowOpacity);
$shadowBottom: 0px 0px 40px rgba($shadowColor, $shadowOpacity);
$shadowLeft: 0px 0px 40px rgba($shadowColor, $shadowOpacity);
$shadowRight: 0px 0px 40px rgba($shadowColor, $shadowOpacity);

// hover opacity
$opacity-link-hover: 0.6;
$opacity-link-active: 1;
$opacity-link-focus: 1;

// overlay
$colorOverlay: {{ settings.color_overlay }};
$opacityOverlay: {{ settings.opacity_overlay }}/100;

// Header
$heightHeaderScrolling: 60px;
$heightHeader: 60px;
$heightHeaderMobile: 60px;

// Navigation
$colorNav: {{ settings.color_nav_bg }};
$colorNavText: {{ settings.color_nav_text }};
$colorHeroHeader: {{ settings.color_transparent_nav_text }};
$colorTranparentNavText: $colorHeroHeader;

// Footer
$colorFooter: {{ settings.color_footer_bg }};
$colorFooterText: {{ settings.color_footer_text }};
$colorFooterDefault: {{ settings.color_footer_default }};
$colorFooterPrimary: {{ settings.color_footer_primary }};
$colorFooterButtonText: {{ settings.color_footer_button_text }};
$colorCopyright: {{ settings.color_copyright_bg }};
$colorCopyrightText: {{ settings.color_copyright_text }};

// Announcement
$colorAnnouncement: {{ settings.color_announcement_bg }};
$colorAnnouncementText: {{ settings.color_announcement_text }};
{% if settings.announcement_size == 'small' %}
$heightAnnouncement: $heightInputSmall;
{% else %}
$heightAnnouncement: $heightInput;
{% endif %}
$heightAnnouncementMobile: $heightInputSmall;

// transitions
$transitionDuration: 0.3s;
$transitionTiming: ease;
$transitions: all ($transitionDuration) ($transitionTiming);
$transitionDrawers: all 0.5s $transitionTiming;

// Text link colors
$colorLink: $colorSecondary;
$colorLinkHover: $colorSecondary;

//product image color
{% if settings.color_product %}
$colorProduct: $colorDefault;
{% else %}
$colorProduct: initial;
{% endif %}

// Helper colors
$colorError: $colorSecondary;
$colorSuccess: $colorPrimary;

// Drawer sizes and colors
$drawerNavWidth: 350px;
$drawerNavWidthMobile: 85%;
$drawerCartWidth: 450px;
$drawerCartWidthMobile: 100%;
$drawerHeaderHeight: $heightHeader;
$drawerCartFooterHeight: 130px; // default, overwritten by JS
$colorDrawer: {{ settings.color_drawer_bg }};
$colorDrawerText: {{ settings.color_drawer_text }};
$colorDrawerDefault: {{ settings.color_drawer_default }};
$colorDrawerPrimary: {{ settings.color_drawer_primary }};
$colorDrawerBuy: {{ settings.color_drawer_buy }};
$colorDrawerButtonText: {{ settings.color_drawer_button_text  }};
$colorDrawerOverlay: {{ settings.color_drawer_overlay }};
$colorDrawerOverlayOpacity: {{ settings.color_drawer_overlay_opacity }}/100;

{% if settings.color_product %}
$drawerColorProduct: $colorDrawerDefault;
{% else %}
$drawerColorProduct: initial;
{% endif %}

//hero
$heroHeightXsmall: 300px;
$heroHeightSmall: 400px;
$heroHeightMedium: 500px;
$heroHeightLarge: 600px;

{% if settings.hero_header %}
$heroHeightXlarge: 100vh;
{% else %}
$heroHeightXlarge: calc(100vh - #{$heightHeaderScrolling});
{% endif %}

$heroHeightMobileXsmall: 200px;
$heroHeightMobileSmall: 300px;
$heroHeightMobileMedium: 400px;
$heroHeightMobileLarge: 500px;
$heroHeightMobileXlarge: calc(100vh - #{$heightHeaderMobile});

// Collection Grid
$collectionHeightXsmall: inherit;
$collectionHeightSmall: 200px;
$collectionHeightMedium: 300px;
$collectionHeightLarge: 400px;
$collectionHeightXlarge: 500px;

// Z-index
$zindexIncrement: 3;
$zindexBase: 0;
$zindexOverBody: ($zindexBase + $zindexIncrement);
$zindexHeader: ($zindexOverBody + $zindexIncrement);
$zindexNavDropdowns: ($zindexHeader + $zindexIncrement);
$zindexDrawer: {{ settings.zindex_drawer }};
$zindexDrawerOverlay: ($zindexDrawer - $zindexIncrement);
$zindexUnderOverlay: ($zindexDrawerOverlay - $zindexIncrement);

// Header Font Stack
$headerFontStack: {{ header_family.family }}, {{ header_family.fallback_families }};
$headerFontWeight: {{ header_family.weight }};
$headerFontStyle: {{ header_family.style }};
$headerFontSize: {{ settings.header_font_size }}px;
$headerTextTransform: {{ settings.header_transform }};
$headerLetterSpacing: {{ settings.header_spacing }}px;

// Accent Font Stack
$accentFontStack: {{ accent_family.family }}, {{ accent_family.fallback_families }};
$accentFontWeight: {{ accent_family.weight }};
$accentFontStyle: {{ accent_family.style }};
$accentTextTransform: {{ settings.accent_transform }};

// Base Font Stack
$baseFontStack: {{ base_family.family }}, {{ base_family.fallback_families }};
$baseFontWeight: {{ base_family.weight }};
$baseFontStyle: {{ base_family.style }};

//header sizes
$headerSize1: $headerFontSize;
$headerSize2: floor($headerFontSize * 0.90);
$headerSize3: floor($headerFontSize * 0.80);
$headerSize4: floor($headerFontSize * 0.70);
$headerSize5: floor($headerFontSize * 0.60);
$headerSize6: floor($headerFontSize * 0.50);

$headerLineHeight: 1.2;

//page title size
$bigFontSize: {{ settings.header_font_size_big }}px;

//typography utility
$headerMarginBottom: floor($spacer * 0.75);
$colorHeadings: {{ settings.color_headings }};
$textAlignTitle: center;
$navIconSize: 20px;


/*============================================================================
  _Mixins
==============================================================================*/

/*==== _Media_query ============================ */

//width variables
$viewportIncrement: 0.1px;

//small
$small: 769px;
$postSmall: $small + $viewportIncrement;

//medium (also change in map.liquid 1024.1px | theme.js.liquid _THEME_VARIABLES)
$medium: 1024px;
$postMedium: $medium + $viewportIncrement;

//large
$large: $postMedium;

//xlarge
$xlarge: 1150px;

//site width
$siteWidth: $xlarge;

// Constraints
$min: min-width;
$max: max-width;

//timber media query.. use @screen below
@mixin at-query ($constraint, $viewport1, $viewport2:null) {
  @if $constraint == $min {
    @media screen and ($min: $viewport1) {
      @content;
    }
  } @else if $constraint == $max {
    @media screen and ($max: $viewport1) {
      @content;
    }
  } @else {
    @media screen and ($min: $viewport1) and ($max: $viewport2) {
      @content;
    }
  }
}

//screen - target only the selected viewport
@mixin screen ($viewport) {

  @if $viewport == $small {
    @media screen and ($max: $viewport) {
      @content;
    }
  }

  @else if $viewport == $medium {
    @media screen and ($min: $postSmall) and ($max: $viewport) {
      @content;
    }
  }

  @else if $viewport == $large {
    @media screen and ($min: $viewport) {
      @content;
    }
  }

  @else if $viewport == $xlarge {
    @media screen and ($min: $xlarge) {
      @content;
    }
  }
}

//screen up  - target everything OVER the selected viewport (non inclusive)
@mixin screenUp ($viewport) {

  @media screen and ($min: $viewport) {
    @content;
  }
}

//screen down - target everything UNDER the selected viewport (non inclusive)
@mixin screenDown ($viewport) {

  @media screen and ($max: $viewport) {
    @content;
  }
}

//box
@mixin makeBox{
  @include transition($transitions);
  padding-top: $gutter;
  padding-bottom: $gutter;

  @include screenUp($small) {
    padding-top: $gutter-lg;
    padding-bottom: $gutter-lg;
  }
}

//wrapper
@mixin makeWrapper($widthWrapper){
  @include transition(padding $transitionDuration $transitionTiming, max-width $transitionDuration $transitionTiming);
  margin: 0 auto;
  padding-left: $gutter;
  padding-right: $gutter;
  max-width: $widthWrapper;

  @include screen($small) {
    padding-left: $gutter-sm;
    padding-right: $gutter-sm;
  }
}

/*================ _Transitions ================*/
@mixin transition($transitionName...) {
    -moz-transition:    $transitionName;
    -ms-transition:     $transitionName;
    -o-transition:      $transitionName;
    -webkit-transition: $transitionName;
    transition:         $transitionName;
}

/*================ _Shadows ================*/
@mixin shadow($shadowType...) {
    -moz-box-shadow:    $shadowType;
    -ms-box-shadow:     $shadowType;
    -o-box-shadow:      $shadowType;
    -webkit-box-shadow: $shadowType;
    box-shadow:         $shadowType;
}

/*================ _Hovers ================*/
@mixin hovers{
  {% if settings.transition_hover_enabled %}
    @include transition($transitions);
  {% endif %}

  &:hover{
    opacity: $opacity-link-hover;
  }
  &:focus{
    opacity: $opacity-link-active;
  }
  &:active{
    opacity: $opacity-link-focus;
  }
}

/*================ _Placeholders ================*/
@mixin placeholder($colorPlaceholder){

    &::-webkit-input-placeholder {
      color: $colorPlaceholder;
      opacity: 0.7;
    }
    &:-moz-placeholder {
      color: $colorPlaceholder;
      opacity: 0.7;
    }
    &::-moz-placeholder {
      color: $colorPlaceholder;
      opacity: 0.7;
    }
    &:-ms-input-placeholder {
      color: $colorPlaceholder;
      opacity: 0.7;
    }
    &::-ms-input-placeholder {
      color: $colorPlaceholder;
      opacity: 0.7;
    }
}

/*================ _Font_stack ================*/
//header
@mixin headerFontStack {
  font-family: $headerFontStack;
  font-weight: $headerFontWeight;
  font-style: $headerFontStyle;
  text-transform: $headerTextTransform;
  letter-spacing: $headerLetterSpacing;
}

//accent
@mixin accentFontStack {
  font-family: $accentFontStack;
  font-weight: $accentFontWeight;
  font-style: $accentFontStyle;
  text-transform: $accentTextTransform;
  letter-spacing: $accentLetterSpacing;
}

//base
@mixin baseFontStack {
  font-family: $baseFontStack;
  font-weight: $baseFontWeight;
  font-style: $baseFontStyle;
}

//lead
@mixin leadFontStack {
  font-size: $baseFontSize-lg;
}

//page title
@mixin pageTitle{
  @include screenUp($small) {
    font-size: $bigFontSize;
  }
}

/*================  _Buttons ================*/

//button base
@mixin buttonBase{
  {% if settings.transition_hover_enabled %}
    @include transition($transitions);
  {% endif %}

  @include accentFontStack;
  border: $borders;
  border-radius: $borderRadius;
  padding: ($paddingButtonY) ($paddingButtonX);
  line-height: $baseLineHeight;
  display:inline-block;
  text-align:center;
  font-size: $baseFontSize;
}

//button - modify or add new $style
@mixin button($background,$color,$style:default){
  @if $style == 'default'{
    background-color: $background;
    border-color: $background;
    color: $color;
  }

  @else if $style == 'outline'{
    background-color: transparent;
    border-color: $background;
    color: $background;

    &:hover{
      background-color: $background;
      border-color: $background;
      color: $color;
      opacity:$opacity-link-focus;
    }
    &:focus{
      opacity: $opacity-link-focus;
    }
    &:active{
      opacity: $opacity-link-hover;
    }
  }
}

//button small
@mixin buttonSmall {
  padding: ($paddingButtonSmallY) ($paddingButtonSmallX);
}

//square
@mixin buttonSquare {
  height: $heightInput;
  width: $heightInput;
  line-height: $heightInputInner;
  padding: 0;
  letter-spacing:0px;
}

//small square
@mixin buttonSquareSmall {
  height: $heightInputSmall;
  width: $heightInputSmall;
  line-height: $heightInputInnerSmall;
  padding: 0;
  letter-spacing:0px;
}

//input
@mixin input{
  border: $borders;
  border-radius: $borderRadius;
  padding: ($paddingButtonY) ($paddingButtonX);
  line-height: $baseLineHeight;
  display:inline-block;

  @include button($colorDefault,$colorBodyText);
  @include placeholder($colorBodyText);

  &[disabled],
  &.disabled {
    cursor: default;
    opacity: $opacity-link-hover;
  }

  &.input-full {
    width: 100%;
  }

  &.error {
    border-color: $colorError;
  }
}

@mixin inputSmall{
  padding: $paddingButtonSmallY $paddingButtonSmallX!important;
}

//select
@mixin select{
  @include input;

  padding-right: $paddingButtonX*2;
  text-indent: 0.01px;
  text-overflow: '';
  cursor: pointer;
  border: 2px solid #dedede;
  background-color: #fff;

  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: {
    image: url('{{ "ico-select.svg" | asset_url }}')!important;
    repeat: no-repeat!important;
    position: right $paddingButtonX center!important;
    size: auto $baseFontSize;
  }

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

//select small
@mixin selectSmall{
  padding: ($paddingButtonSmallY) ($paddingButtonSmallX*3) ($paddingButtonSmallY) ($paddingButtonSmallX)!important;
  background-position: right $paddingButtonSmallX center!important;

  .ie9 &,
  .lt-ie9 & {
    padding-right: $paddingButtonSmallX;
  }
}

/*================ _Pagination ================*/
//pagination
@mixin pagination{
  margin: 0;
  text-align: center;

  & > *{
    display: inline-block;

    &:not(:last-child){
      margin-right: $spacer-xs;
    }
  }
}

//pagination button
@mixin paginationButton{
  @include buttonBase;
  @include button($colorPrimary,$colorButtonText,outline);
  @include buttonSquareSmall;
}

//pagination active button
@mixin paginationActiveButton{
  @include buttonBase;
  @include button($colorPrimary,$colorButtonText);
  @include buttonSquareSmall;
}


/*================ _Utilities ================*/
//table center
@mixin tableCenter{
  display: table;

  & > *{
    display: table-cell;
    vertical-align: middle;
  }
}

//inline list
@mixin inlineList($display:block){
  margin-left:0px;
  margin-bottom:$spacer-sm;
  list-style:none;

  > *:not(:last-child){
    @if $display == 'block'{
      margin-right: $spacer-xs;
    }
    @else if $display == 'flex'{
      margin-right: $spacer-sm;
    }
  }

  > *{
    margin-bottom: $spacer-sm;
    display:inline-block;
    list-style:none;
  }
}

//hide
@mixin visuallyHidden($imp:"") {
  clip: rect(0 0 0 0) #{$imp};
  clip: rect(0, 0, 0, 0) #{$imp};
  overflow: hidden #{$imp};
  position: absolute #{$imp};
  height: 1px #{$imp};
  width: 1px #{$imp};
}
.visually-hidden{@include visuallyHidden;}

//show
@mixin visuallyShown($imp:"") {
  clip: initial #{$imp};
  clip: initial #{$imp};
  overflow: visible #{$imp};
  position: inherit #{$imp};
  height: initial #{$imp};
  width: initial #{$imp};
}
.visually-shown{@include visuallyShown;}

//sticky
@mixin sticky{
  position: -webkit-sticky;
  position: sticky;
  transform: translate3d(0,0,0);
}

//icon
@mixin fontAwesome{
  font-family: "Font Awesome 5 Free";
  font-weight:900;
}

//link style
@mixin linkStyle{
  color: $colorSecondary;
  text-decoration: underline!important;
}

//auto spacing
@mixin autoSpacer($spacerSize){
  > * {
    margin-bottom:0px;

    & + *{
      margin-top: $spacerSize;
    }
  }

  > h1,h2,h3,h4,h5,h6{
    & + *{
      margin-top: $headerMarginBottom;
    }
  }
}

//remove content
@mixin removeContent{
  font-size: 0px;

  &:before, &:after{
    font-size: $baseFontSize;
  }
}

//background set
@mixin bgSet{
  @include display-flexbox();
  @include justify-content(center);
  @include align-items(center);
  overflow: hidden;
  position: relative;
  background: {
    size: cover;
    repeat: no-repeat;
    position: center;
  }
}

//image set
@mixin imgSet{
  display: block;
  margin: 0 auto;
  position: absolute;
  width: 100%;
  top: 0;
  bottom: 0;
  left: 0;
  right:0;
}

//round border radius
@mixin RadiusCircle{
  @if $borderRadius == 30px {
    border-radius: $circle;
  }
  @else{
    border-radius: $borderRadius;
  }
}

//variant status
@mixin variantAvailable{
  display:none!important;
  .variant-available &{
    display:inherit!important;
  }
}

@mixin variantSoldout{
  display:none!important;
  .variant-soldout &{
    display:inherit!important;
  }
}

@mixin textDiscount{
  @include accentFontStack;
  text-transform: uppercase;
  font-size: $baseFontSize-sm;
  color: $colorSale;
}

//image hover effect
@mixin imageEffect{
  @include screenUp($small){
    overflow:hidden;
    border-radius:$borderRadius;

    img,.collection_grid-item{
      @include transition($transitions);
    }
    &:hover{
      img,.collection_grid-item{
        @include transform(scale(1.05));
      }
    }
  }
}

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

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

/*============================================================================
  Prefix mixin for generating vendor prefixes.
  Based on https://github.com/thoughtbot/bourbon/blob/master/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) {
  -webkit-#{$property}: #{$value};
  -moz-#{$property}: #{$value};
  -ms-#{$property}: #{$value};
  -o-#{$property}: #{$value};
  #{$property}: #{$value};
}

@mixin prefixFlex($property, $value, $prefixes) {
  @each $prefix in $prefixes {
    @if $prefix == webkit {
      -webkit-#{$property}: $value;
    } @else if $prefix == moz {
      -moz-#{$property}: $value;
    } @else if $prefix == ms {
      -ms-#{$property}: $value;
    } @else if $prefix == o {
      -o-#{$property}: $value;
    } @else if $prefix == spec {
      #{$property}: $value;
    } @else  {
      @warn 'Unrecognized prefix: #{$prefix}';
    }
  }
}

@mixin keyframes($name) {
  @-webkit-keyframes #{$name} {
    @content;
  }
  @-moz-keyframes #{$name} {
    @content;
  }
  @-ms-keyframes #{$name} {
    @content;
  }
  @keyframes #{$name} {
    @content;
  }
}


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

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

@mixin gradient($from, $to, $fallback) {
  background: $fallback;
  background: -moz-linear-gradient(top, $from 0%, $to 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,$from), color-stop(100%,$to));
  background: -webkit-linear-gradient(top, $from 0%, $to 100%);
  background: -o-linear-gradient(top, $from 0%, $to 100%);
  background: -ms-linear-gradient(top, $from 0%, $to 100%);
  background: linear-gradient(top bottom, $from 0%, $to 100%);
}

@mixin backface($visibility: hidden) {
  @include prefix('backface-visibility', #{$visibility});
}

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


/*================ _Animations ================*/
@mixin animated($animationName){
  @include prefix('animation-duration', #{1s});
  @include prefix('animation-fill-mode', #{both});
  @include prefix('animation-name', #{$animationName});
}

@include keyframes(spin) {
  0% {
    @include transform(rotate(0deg));
  }

  100% {
    @include transform(rotate(360deg));
  }
}

@include keyframes(heroContentIn) {
  from {
    opacity:0;
    @include transform(translate3d(0, 15px, 0));
  }

  to {
    opacity:1;
    @include transform(translate3d(0, 0, 0));
  }
}

/*================ _Flexbox ================*/
@mixin display-flexbox() {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  //width: 100%; // necessary for ie10
}
@mixin display-inline-flexbox() {
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
}

@mixin flex-wrap($value: nowrap) {
  @include prefixFlex(flex-wrap, $value, webkit moz ms spec);
}

@mixin flex-direction($value) {
  @include prefixFlex(flex-direction, $value, webkit moz ms spec);
}

@mixin align-items($value: stretch) {
  $alt-value: $value;

  @if $value == 'flex-start' {
    $alt-value: start;
  } @else if $value == 'flex-end' {
    $alt-value: end;
  }

  -ms-flex-align: $alt-value;
  @include prefixFlex(align-items, $value, webkit moz ms o spec);
}

@mixin flex($value) {
  @include prefixFlex(flex, $value, webkit moz ms spec);
}

@mixin flex-basis($width: auto) {
  -ms-flex-preferred-size: $width;
  @include prefixFlex(flex-basis, $width, webkit moz spec);
}

@mixin flex-grow($value: auto) {
  @include prefixFlex(flex-grow, $value, webkit moz spec);
}

@mixin flex-shrink($value: auto) {
  @include prefixFlex(flex-shrink, $value, webkit moz spec);
}

@mixin align-self($align: auto) {
  -ms-flex-item-align: $align;
  @include prefixFlex(align-self, $align, webkit spec);
}

@mixin justify-content($justify: flex-start) {
  @include prefixFlex(justify-content, $justify, webkit ms spec);
}


//flex grid
@mixin flexRow{
  @include display-flexbox();
  @include flex-wrap(wrap);
}

@mixin flexCol{
  @include flex(1);
}


/*============================================================================
  _Structure
==============================================================================*/


/*================ _Grid_setup ================*/

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


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

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

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

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

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

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

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

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


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

/*============================================================================
  Grid Setup
    1. Allow the grid system to be used on lists.
    2. Remove any margins and paddings that might affect the grid system.
    3. Apply a negative `margin-left` to negate the columns' gutters.
==============================================================================*/

//grid + grid-uniform
#{$class-type}grid,
#{$class-type}grid-uniform{
  list-style: none;
  margin: 0;
  padding: 0;
  margin-left: -$gutter;
  @include clearfix;

  @include screen($small){
    margin-left: -$gutter-sm;
  }
}

//grid uniform
.grid-uniform{
  @include flexRow;
}

//grid spacer
.grid--spacer{
  margin-bottom: -$gutter;

  &.grid--small{
    margin-bottom: -$gutter-sm;
  }

  @include screen($small){
    margin-bottom: -$gutter-sm;
  }
}

//grid item
#{$class-type}grid__item {
  @include box-sizing();
  float: left;
  min-height: 1px;
  vertical-align: top;
  padding-left: $gutter;

  @if $mobile-first == true {
    width: 100%;
  }

  @include screen($small){
    padding-left: $gutter-sm;
  }

  //add spacing to .grid--spacer > .grid-item
  #{$class-type}grid--spacer > &{
    margin-bottom: $gutter;

    @include screen($small){
      margin-bottom: $gutter-sm;
    }
  }

  //for grid small
  #{$class-type}grid--spacer#{$class-type}grid--small > &{
    margin-bottom: $gutter-sm;
  }

}

//grid small
#{$class-type}grid--small {
  margin-left: -$gutter-sm;

  #{$class-type}grid__item {
    padding-left: $gutter-sm;
  }
}

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

  // IE8 needs this double-defined.. why? don't know
  .lt-ie9 & {
    margin-left: 0;
  }

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

//grid rev
#{$class-type}grid--rev {
  @extend #{$class-type}grid;
  direction: rtl;
  text-align: left;

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

  #{$class-type}#{$namespace}full       { width: 100%!important; }
}

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

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

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

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

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

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

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

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

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

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

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

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

  @include push-setup();

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

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

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

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

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

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

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

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

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

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

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

  @include pull-setup();

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

/*================ _Shopify_section ================ */
.shopify-section{
  position:relative;
}

/*================ _Section_header ================*/
.section-header{
  margin-bottom: $spacer;
  text-align: $textAlignTitle;
}

//_Big Title
.hero__title, .page-title, .product-title-big, .shopify-policy__title h1 {
  @include pageTitle;
}

.hero__title{
  font-weight: 900;
  font-style: italic;
}

.section-header__subtitle{
  @include leadFontStack;
}

/*================ _Main_content ================*/
.main-content {
  display: block;
  @include makeBox;

  //remove padding from these templates
  .template-index &, .template-collection &, .template-product &, .template-article &{
    padding-top:0;
    padding-bottom:0;
  }
}

/*================ _Box ================*/
.box{
  @include makeBox;
}

/*================ _Wrapper ================*/
.wrapper {
  @include makeWrapper($siteWidth);
}

.wrapper-fluid {
  @include makeWrapper(100%);
}

.wrapper-boxed{
  @include makeWrapper($siteWidth/2);
}

.wrapper-full {
  max-width: 100%;
}

/*================ _Product_grid ================*/
.grid-product__wrapper {
  text-align: center;
  border-radius: $borderRadius;
}

.grid-product__image-wrapper {
  position: relative;
  width: 100%;
  display: table;
  table-layout: fixed;
}

.grid-product__image-link {
  background-color: $colorProduct;

  .is-sold-out & {
    opacity: $opacity-link-hover;
  }
}

.product--image{
  background-color: $colorProduct;

  &.lazyload {
    opacity: 0;
  }
}

//sale tag
.tag-wrapper{
  position: absolute;
  z-index: $zindexOverBody;

  &.tag-top-left{
    top: $gutter-sm;
    left: $gutter-sm;

    .small--six-twelfths &{
      @include screen($small){
        top: ($gutter-sm / 2);
        left: ($gutter-sm / 2);
      }
    }
  }

  &.tag-top-right{
    top: $gutter-sm;
    right: $gutter-sm;

    .small--six-twelfths &{
      @include screen($small){
        top: ($gutter-sm / 2);
        right: ($gutter-sm / 2);
      }
    }
  }

  &.tag-bottom-right{
    bottom: $gutter-sm;
    right: $gutter-sm;

    .small--six-twelfths &{
      @include screen($small){
        bottom: ($gutter-sm / 2);
        right: ($gutter-sm / 2);
      }
    }
  }

  &.tag-bottom-left{
    bottom: $gutter-sm;
    left: $gutter-sm;

    .small--six-twelfths &{
      @include screen($small){
        bottom: ($gutter-sm / 2);
        left: ($gutter-sm / 2);
      }
    }
  }
}

.sales-tag{
  @include buttonBase;
  @include buttonSmall;
  @include textDiscount;

  .hide-tag-mobile &{
    @include screen($small){
      @include buttonSquareSmall;
    }
  }
  &.tag-sold-out{
    @include button($colorBody,$colorBodyText);
    border-color: $colorBorder;
  }
  &.tag-on-sale{
    @include button($colorSale,$colorButtonText);
  }
}

.tag-text{

  .hide-tag-mobile &{
    @include screen($small){
      display:none;
    }
  }
}


//meta
.grid-product__meta {
  position: relative;
  display: block;
  padding-top: $spacer-sm;

  @include autoSpacer($spacer-xs);

  .is-sold-out & {
    opacity: $opacity-link-hover;
  }
}

.grid-product__price{

}

.grid-product__price-min {
  position: relative;
}
.price-compare{
  text-decoration: line-through;
}

//product title
.grid-product__title{
  @include headerFontStack;
  color: $colorHeadings;
}

//vendor
.grid-product__vendor{
  font-size: $baseFontSize-sm;
}
.vendor{

}

//slick product gord
.slick-product-grid{

  //remove grid styling when slick active
  &.slick-initialized{
    margin-bottom:0px;
    margin-left:0px;
    display:block;

    .slick-slide{
      clear: inherit!important;
      padding: 0px;
    }
  }
}

.grid.large--eight-twelfths{
  @include screen($large){
    margin:auto;
    .grid__item{
      position:relative;
      left:-$gutter/2;
    }
    &.slick-initialized{
      .grid__item{
        position:static;
      }
    }
  }
}

/*================ _Collection_grid ================*/
.collection_grid-link{
  display: block;
  overflow: hidden;
  height:100%;
  position: relative;

  .grid--full &{
    border-radius: 0px;
  }
}

.collection_grid-item{
  @include bgSet;
  @include makeBox;
  height:100%;
  border-radius: $borderRadius;

  @include screen($small){
    min-height: $collectionHeightSmall!important;
  }

  .grid--full &{
    border-radius: 0px;
  }
}

.collection_grid-inner{
  width:100%;
  padding: 0 $gutter-sm;
  z-index: ($zindexBase + 1);
}

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

.collection_grid-title{
  margin-bottom: 0;
}

.collection_grid--xsmall{
  min-height: $collectionHeightXsmall;
}
.collection_grid--small{
  min-height: $collectionHeightSmall;
}
.collection_grid--medium{
  min-height: $collectionHeightMedium;
}
.collection_grid--large{
  min-height: $collectionHeightLarge;
}
.collection_grid--xlarge{
  min-height: $collectionHeightXlarge;
}


/*================ _Article_grid ================*/

//image
.article__featured-link {

}

//tags
.tags--article{

}



/*============================================================================
  _Vendor
==============================================================================*/

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

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

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

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

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

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

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

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

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

.mfp-zoom {
  cursor: pointer;
  cursor: -webkit-zoom-in;
  cursor: -moz-zoom-in;
  cursor: zoom-in; }

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

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

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

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

.mfp-preloader {
  color: #CCC;
  position: absolute;
  top: 50%;
  width: auto;
  text-align: center;
  margin-top: -0.8em;
  left: 8px;
  right: 8px;
  z-index: 1044; }
  .mfp-preloader a {
    color: #CCC; }
    .mfp-preloader a:hover {
      color: #FFF; }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.mfp-ie7 .mfp-img {
  padding: 0; }
.mfp-ie7 .mfp-bottom-bar {
  width: 600px;
  left: 50%;
  margin-left: -300px;
  margin-top: 5px;
  padding-bottom: 5px; }
.mfp-ie7 .mfp-container {
  padding: 0; }
.mfp-ie7 .mfp-content {
  padding-top: 44px; }
.mfp-ie7 .mfp-close {
  top: 0;
  right: 0;
  padding-top: 0; }

/*================ Module | Product Lightbox ================*/

.mfp-bg {
  background-color: $colorBody;

  &.mfp-fade {
    -webkit-backface-visibility: hidden;
    opacity: 0;
    @include transition($transitions);

    //background opacity after load
    &.mfp-ready {
      opacity: 1;
      filter: alpha(opacity=100);
    }


    &.mfp-removing {
      @include transition($transitions);
      opacity: 0;
      filter: alpha(opacity=0);
    }
  }
}

.mfp-fade {
  &.mfp-wrap {
    .mfp-content {
      opacity: 0;
      @include transition($transitions);
    }

    &.mfp-ready {
      .mfp-content {
        opacity: 1;
      }
    }

    &.mfp-removing {
        @include transition($transitions);
      .mfp-content {
        opacity: 0;
      }

      button {
        opacity: 0;
      }
    }
  }

}

.mfp-counter {
  display: none;
}

.mfp-figure {
  .mfp-gallery .mfp-image-holder & {
    cursor: zoom-out;
  }

  &:after {
    box-shadow: none;
  }
}

.mfp-img {
  background-color: $colorDefault;
  max-height:90vh!important;
}

button.mfp-close {
  margin: $gutter;
  color: $colorBodyText;
  opacity:1;
  @include buttonBase;
  @include buttonSquareSmall;
  @include button($colorDefault,$colorBodyText);

  @include removeContent;

  &:before{
    @include fontAwesome;
    content:"\f00d";
  }
}

button.mfp-arrow {
  top: 0;
  height: 100%;
  width: 20%;
  margin: 0;
  z-index: 1045;

  &:after,
  & .mfp-a {
    display: none;
  }

  &:before,
  & .mfp-b {
    display: none;
  }

  &:active {
    margin-top: 0;
  }
}

.mfp-chevron {
  position: absolute;
  pointer-events: none;

  &:before {
    @include fontAwesome;
    font-size: 50px;
    line-height: 0;
  }

  &.mfp-chevron-right {
    right: $gutter;

    &:before {
      content:"\f105";
    }
  }

  &.mfp-chevron-left {
    left: $gutter;

    &:before {
      content:"\f104";
    }
  }
}


.lt-ie9 {
  .mfp-chevron:before,
  .mfp-chevron:after {
    position: absolute;
    display: block;
    border-width: 0;
    top: 50%;
    margin-top: -25px;
  }

  .mfp-chevron:before {
    z-index: 5;
  }

  .mfp-chevron:after {
    z-index: 2;
  }

  .mfp-chevron-right:after {
    left: 80%;
  }

  .mfp-chevron-right:before {
    left: 80%;
  }

  .mfp-chevron-left:after {
    right: 80%;
  }

  .mfp-chevron-left:before {
    right: 80%;
  }
}


/*================ _Slick_slider ================*/
$slick-font-family: "slick-icons, sans-serif";
$slick-arrow-color: $colorBodyText;
$slick-dot-color: $colorSecondary;
$slick-dot-size: 6px;
$slick-opacity-default: 1;
$slick-opacity-on-hover: $opacity-link-hover;
$slick-opacity-on-focus: $opacity-link-focus;
$slick-opacity-not-active: 1;

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

  &:focus {
    outline: none;
  }

  &.dragging {
    cursor: pointer;
    cursor: hand;
  }
  .slick-disabled &{
    cursor: default!important;
  }
}
.slick-slider .slick-track,
.slick-slider .slick-list {
  @include transform(translate3d(0, 0, 0));
}

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

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

  &:after {
    clear: both;
  }

  .slick-disabled &{
    @include transform(translate3d(0px, 0px, 0px)!important);
  }
}

.slick-slide {
  float: left;
  height: 100%;
  min-height: 1px;
  display: none;

  [dir="rtl"] & {
    float: right;
  }
  img {
    display: block;
  }

  &.dragging img {
    pointer-events: none;
  }

  .slick-initialized & {
    @include display-flexbox();
  }

  .slick-vertical & {
    display: block;
    height: auto;
    border: 1px solid transparent;
  }
  &:focus{
    outline:none;
  }
}

//_Slick navigation
.slick-navigation{
  display:none;
  width:100%;
  min-height: $heightInputSmall;
  margin-top:$spacer;
  @include align-items(center);

  .slick-slider[data-arrows="true"] + &, .slick-slider[data-dots="true"] + &{
    @include flexRow();
  }

  .hero-container + &{
    position: absolute;
    bottom: 0;
    width: 100%;
    left: 0;
    right: 0;
    margin: 0;
    padding: $gutter-sm;

    .slick-dots li button{
      border-color: $colorHeroHeader;
    }

    .slick-dots li.slick-active button{
      background-color: $colorHeroHeader;
    }

    .slick-arrows{
      color: $colorHeroHeader;
    }
  }
}

.slick-arrows{
  @include buttonBase;
  @include buttonSquareSmall;
  @include button(transparent,$colorBodyText);

  .slick-slider[data-arrows="false"] + .slick-navigation &{
    display:none;
  }
}

.slick-prev{
/*   padding-left: $gutter;
  @include screen($small){
    padding-left: $gutter-sm;
  } */
}

.slick-right{
/*   padding-right: $gutter;
  @include screen($small){
    padding-right: $gutter-sm;
  } */
}

.slick-dots-container{
  @include flex(auto);
}

.slick-dots{
  margin: 0;
  list-style: none;
  text-align: center;
  @include display-flexbox();
  @include justify-content(center);
  @include align-items(center);

  .slick-slider[data-dots="false"] + .slick-navigation &{
    display:none;
  }

  .hero-slick &{
    button {
      border-color: $colorHeroHeader;
    }
    .slick-active button {
      background-color: $colorHeroHeader;
    }
  }

  li {
    vertical-align: middle;
    position: relative;
    display: inline-block;
    padding:5px;

    button {
      background-color: transparent;
      color: $slick-dot-color;
      border:$borders;
      border-color: $slick-dot-color;
      padding:0px;
      display: block;
      width: 10px;
      height: 10px;
      border-radius: $circle;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-indent: -9999px;
      @include transition($transitions);

      .hero-slick &{
        border-color:$colorHeroHeader;
      }
    }

    &.slick-active button {
      background-color: $slick-dot-color;

      .hero-slick &{
        background-color:$colorHeroHeader;
      }
    }
  }
}

/*================ _jQuery_zoom ================*/
.zoomImg{
  @include transition(opacity $transitionDuration $transitionTiming);
  min-height: 100%;
  min-width: 100%;
}

/*============================================================================
  _Onboarding
==============================================================================*/

/*================ Sections onboarding ================*/
.placeholder-svg {
  border-radius: $borderRadius;
  fill: rgba($colorHeadings,.2);
  background-color: $colorDefault;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;

  .bg-section &{
    background-color: $colorBody;
  }

}

.placeholder-background {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;

  .hero & {
    background-color: transparent;
  }
}

.hero__slide {
  &.slide--placeholder {
    background-color: $colorBody !important;
  }
}


/*============================================================================
  _Partials
==============================================================================*/

/*================ _Reset ================*/

//selection
::selection {
    background-color: $colorSecondary;
    color: #ffffff;
}

html{
  overflow:initial!important;
  margin-right: 0px!Important;
}

body{
  overflow-x: hidden;
}

fieldset{
  margin:0px;
}

/*================ element that have hovers ================*/
a,
button,
.btn,
input,
select,
textarea
{
  @include hovers;
  outline:none!important;
}


/*================ _Typography ================*/
html,
body,
input,
textarea,
button,
select {
  @include baseFontStack;
  font-size: $baseFontSize;
  line-height: $baseLineHeight;
  color: $colorBodyText;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
}

p {
  text-rendering: optimizeLegibility;
  margin-top: 0;
  margin-bottom: $spacer;
}

h1, h2, h3, h4, h5, h6 {
  display: block;
  margin-top:0px;
  line-height: $headerLineHeight;
  margin-bottom: $headerMarginBottom;
  text-rendering: optimizeLegibility;
  color: $colorHeadings;

  @include headerFontStack;

  a {
    color: $colorHeadings;
    text-decoration: none;
    font-weight: inherit;
  }
}

h1 {
  font-size: $headerSize1;
}
h2 {
  font-size: $headerSize2;
}
h3 {
  font-size: $headerSize3;
}
h4 {
  font-size: $headerSize4;
}
h5 {
  font-size: $headerSize5;
}
h6 {
  font-size: $headerSize6;
}

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

small{
  font-size: $baseFontSize-sm;
}

/*================ _Links ================*/
a {
  color: $colorBodyText;
  text-decoration: none;
  background: transparent;
}
.view-all-box{
  text-align:$textAlignTitle;
  margin-top:$gutter;
  @include screen($small){
    margin-top:$gutter-sm;
  }
}

/*================ _Form_elements ================*/
input
{
  @include input;
}

.input--small{
  @include inputSmall;
}

//send form button
input[type='submit']{
  @include buttonBase;
  @include button($colorPrimary,$colorButtonText);
}

//textarea
textarea{
  @include input;
  vertical-align: top;
}

//checkbox
input[type='checkbox']{
  height: initial;
}

input[type="image"] {
  background-color: transparent;
}

label {

  &[for]{
    @include hovers;
  }

  //error style
  &.error {
    color: $colorError;
  }
}

// Vertical Form
.form-vertical {
  input,
  select,
  textarea {
    display: block;
    margin-bottom: $spacer;
  }

  textarea{
    min-height:200px;
  }

  input[type="checkbox"],
  input[type="radio"],
  .btn {
    display: inline-block;
  }

  .btn {
    display: inline-block;
  }
}

//Notes and Form Feedback
.note,
.errors{
  border-radius: $borderRadius;
  color: $colorError;
  border: $borders;
  padding: $paddingButtonSmallY $paddingButtonSmallX;
  margin-bottom: $spacer;
  text-align: left;

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

  a{
    @include linkStyle;
  }

  li:last-child {
    margin-bottom: 0;
  }

  p {
    margin-bottom: 0;
  }
}
//errors
.errors{
  border-color: $colorError;
}
//success
.form-success {
  border-color: $colorSuccess;
  text-align:center;

  .newsletter-section &{
    margin-bottom:0px;
  }
}

/*================ _Select_option ================*/
select{
  @include select;
}

.select--small{
  @include selectSmall;
}

option {
  color: $colorBodyText;
  background-color: $colorBody;
  cursor: pointer;
}

/*================ _Input_group ================*/
.input-group-field{
    border-top-right-radius: 0!important;
    border-bottom-right-radius: 0!important;
    width: 100%;

    .input-group-full &{
      border-radius:0;
      border-color:transparent;
      padding-left:0px;
      background-color: transparent;
      font-size: $baseFontSize-lg;
      height: $heightInput;
    }
}

.input-group-btn{
  .btn,button,input{
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    white-space: nowrap;

    .sumbit-text{
      white-space: nowrap;
      @include screen($small){
        display:none;
      }
    }

    @include screen($small){
      @include buttonSquare;
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }

    .input-group-full &{
      border-radius: $borderRadius;
      @include screen($small){
        @include buttonSquare;
      }
    }

  }
}



/*================ _List ================*/
ol,
ul,
dl {
  margin: 0 0 ($spacer) ($spacer);
}

//fieldset
fieldset{
  padding:0px;
}

/*================ _Hr ================*/
hr {
  clear: both;
  border-color: transparent;
  border-width: 1px 0 0;
  height: 0;
  width: 50px;
  margin: 0 auto;
  padding-top:$spacer/2;
  padding-bottom:$spacer/2;
}
.hr--xs{
  padding-top:$spacer-xs/2;
  padding-bottom:$spacer-xs/2;
}
.hr--sm{
  padding-top:$spacer-sm/2;
  padding-bottom:$spacer-sm/2;
}
.hr--lg{
  padding-top:$spacer-lg/2;
  padding-bottom:$spacer-lg/2;
}
.hr--xl{
  padding-top:$spacer-xl/2;
  padding-bottom:$spacer-xl/2;
}
.hr--breaker{
  width:100%;
  padding:0px;
}

/*================ _Buttons ================*/
/*to style buttons go in the mixins "@mixin buttonBase"*/

//default
.btn{
  @include buttonBase;
  @include button($colorDefault,$colorBodyText);
}

//primary
.btn--primary{
  @include button($colorPrimary,$colorButtonText);
}
.btn-outline-primary{
  @include button($colorPrimary,$colorButtonText,outline);
}

//secondary
.btn--secondary{
  @include button($colorSecondary,$colorButtonText);
}
.btn-outline-secondary{
  @include button($colorSecondary,$colorButtonText,outline);
}

//buy
.btn--buy{
  @include button($colorBuy,$colorButtonText);
  {% if settings.button_uppercase %}
  text-transform: uppercase;
  font-size: 20px;
  background: linear-gradient(302.5deg,#ffd11f 0.0%,#ffc333) !important;
  {% endif %}
}
.btn-outline-buy{
  @include button($colorBuy,$colorButtonText,outline);
}

//button square
.btn--square{
  @include buttonSquare;
}
.btn-square-small{
  @include buttonSquareSmall;
}

//button sizing
.btn--small {
  @include buttonSmall;
}
.btn--full {
  width: 100%!important;
}

//banner
.btn--banner{
  padding-left: $gutter;
  padding-right: $gutter;
  border-left: none;
  border-right: none;
  border-radius: 0px;
  display: block;
  width: 100%;

  @include screen($small) {
    padding-left: $gutter-sm;
    padding-right: $gutter-sm;
  }
}

//capchca button
.shopify-challenge__button{
  @include button($colorPrimary,$colorButtonText);
}


//social media share
.btn-facebook{
  &:hover{
    @include button($colorFacebook,#fff,outline);
  }
}
.btn-twitter{
  &:hover{
    @include button($colorTwitter,#fff,outline);
  }
}
.btn-pinterest{
  &:hover{
    @include button($colorPinterest,#fff,outline);
  }
}

//social media
.btn-instagram{
  &:hover{
    @include button($colorInstagram,$colorButtonText,outline);
  }
}
.btn-snapchat{
  &:hover{
    @include button($colorSnapchat,$colorButtonText,outline);
  }
}
.btn-google{
  &:hover{
    @include button($colorGoogle,$colorButtonText,outline);
  }
}
.btn-tumblr{
  &:hover{
    @include button($colorTumblr,$colorButtonText,outline);
  }
}
.btn-youtube{
  &:hover{
    @include button($colorYoutube,$colorButtonText,outline);
  }
}
.btn-vimeo{
  &:hover{
    @include button($colorVimeo,$colorButtonText,outline);
  }
}


//scroll to top button
.btn-top{
  @include button($colorBody,$colorHeadings);
  position: fixed;
  text-align: center;
  font-size: $navIconSize;
  z-index: ($zindexOverBody - 1);
  bottom: -($gutter + $heightInput);
  opacity:0;
  @include shadow($shadow);

  &:hover{
    @include hovers;
  }

  @include screen($small){
    bottom: $gutter-sm;
  }

  &.btn-top-visible{
    bottom: $gutter;
    opacity:1;
  }

  &.btn-top-left{
    left: $gutter;
    @include screen($small){
      left: $gutter-sm;
    }
  }
  &.btn-top-right{
    right: $gutter;
    @include screen($small){
      right: $gutter-sm;
    }
  }
  &.btn-top-center{
    left: 50%;
    margin-left: -($heightInput/2);
  }
}



/*================ _Tables ================*/

//horizontal scroll table
.table-wrap {
  max-width: 100%;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: $borderRadius;

  table{
    table-layout: auto;
  }
}

//table
table {
  width: 100%;
  border-spacing: 0;
  position: relative;
  border: $borders;
  border-radius: $borderRadius;

  a{
    @include linkStyle;
  }

  //tr
  tr{
    @include transition($transitions);
    &:hover{
      background-color: $colorDefault;
    }

    //th
    th,.table__title {
      background-color: $colorDefault;
      text-align:left;
      @include accentFontStack;
    }

    th{
      @include screen($small){
        font-size: $baseFontSize-sm;
      }
    }

    //th
    th{
      &:first-child{
        border-top-left-radius:$borderRadius;
      }
      &:last-child{
        border-top-right-radius:$borderRadius;
      }
    }

    //td
    td {
      padding: $gutter-sm;
    }

    //th & td
    th,td{
      border: none;
      position: relative;
      padding: $gutter-sm;

      &:before {
        content: '';
        display: block;
        position: absolute;
        bottom: 0;
        right: 0px;
        height:100%;
        border-right: $borders;
      }

      &:after {
        content: '';
        display: block;
        position: absolute;
        bottom: 0;
        left: 0px;
        right: 0px;
        border-bottom: $borders;
      }
    }

    //last child reset
    th:last-child:before, td:last-child:before{
      border-right: 0px;
    }
    &:last-child td:after{
      border-bottom: 0px;
    }
  }

  //tfoot
  tfoot tr:first-child td{
    border-top: $borders;
  }
}

//order tables
.order-table{
  td[data-label="Discount"], .table-discount-code{
    color: $colorSale;
  }
  .money {
    font-family: inherit;
    font-weight: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    font-style: inherit;
  }
  .table-discount-code{
    @include accentFontStack;
    font-size: $baseFontSize-sm;
    text-transform:uppercase;
  }

  @include screen($small){
    text-align:right;

    thead{
      display: none;
    }

    td{
      //padding: $gutter-sm;
      @include display-flexbox();
      @include align-items(center);
      @include justify-content(space-between);
    }

    td:before{
      content: attr(data-label);
      float: left;
      position: static;
      border:0px;
      padding-right:$gutter-sm;
    }

    tbody td:before{
      @include accentFontStack;
      font-size: $baseFontSize-sm;
    }

    //separator
    .table__section{

      & + .table__section{
        td:first-child{
          border-top: $borders;
        }
      }

      td:after{
        display:none;
      }
    }

    .table--small-hide{
      display: none !important;
    }
  }
}



.order-notes{
  margin-top: $spacer-sm;
}

/*================ _Images ================*/
img{
  border-radius: $borderRadius;
}

.image-wrapper{
  position: relative;
}

.image{
  @include imgSet;
}

.image-link{
  position: relative;
  display: block;
  width: 100%;
  border-radius: $borderRadius;
}

.image-spacer{
  margin-bottom: $spacer;
}

/*================ _RTE ================*/
.rte{
  margin-bottom: $spacer;

  & > :last-child{
    margin-bottom:0;
  }

  blockquote {
    padding: $gutter;
    text-align: center;
    font-size: $baseFontSize-lg;
    margin-bottom: $spacer;

    &:before{
      @include fontAwesome;
      content:"\f10d";
      color: $colorSecondary;
      display:block;
      text-align: left;
      margin-left: -$gutter-sm;
    }
    &:after{
      @include fontAwesome;
      content:"\f10e";
      color: $colorSecondary;
      display:block;
      text-align: right;
      margin-right: -$gutter-sm;
    }

    p:last-child{
      margin-bottom:0px;
    }
  }

  a{
    color: $colorSecondary;
    word-break: break-word;
  }

  .fas{
    color:$colorSecondary;
  }
}

/*================ _Blockquote ================*/
blockquote {
  margin:0px;
  display: block;
  width: 100%;
}

cite{
  display: block;
  font-size: $baseFontSize-sm;

  &:before {
    content: "\2014 \0020";
  }
}


/*================ _Pagination ================*/
.pagination {

  @include pagination;

  a,.page.current{
    @include paginationButton;
  }
  .page.current{
    @include paginationActiveButton;
  }
}

/*================ _Icons ================*/
.icon-fallback-text .fallback-text {
  @include visuallyHidden;
}


/*================ _Quantity_selectors ================*/

//quantity container
.qty-container{
  position: relative;
  max-width: $heightInputSmall*3;
  width:100%;

  //product form
  .product-single__form &{
    max-width: 100%;
  }

  //cart page
  .cart__row--table &{

  }

  //ajaxcart loading
  .is-loading & {
    opacity: $opacity-link-hover;
    @include transition(none);
  }
}

//quantity input
.qty-input{
  text-align: center;
  @include inputSmall;

   //js
   .qty-container &{
    background-color: transparent;
    border-color: transparent;
    //disable arrows of quantity input
    -moz-appearance:textfield;
    &::-webkit-outer-spin-button,&::-webkit-inner-spin-button {
      display: none;
      -webkit-appearance: none;
      margin: 0;
    }
  }

  //product form
  .product-single__form &{
    width:100%;

    //reaply to remove transparency
    border-color:$colorDefault;
    background-color:$colorDefault;
  }
}

//quantity buttons
.qty-adjust{
  position: absolute;
  display: none;
  top:0;
  z-index: 1;
  overflow: hidden;
  @include prefix('user-select', 'none');
  @include backface(hidden);

  .qty-container &{
    display:inherit;
  }
}

//minus button
.qty-minus{
  left:0;
}

//plus button
.qty-plus{
  right:0;
}

/*============================================================================
  _Global_section
==============================================================================*/

/*================ _Announcement ================*/
.announcement-container{
  position:relative;
  background-color: $colorBody;
  z-index:$zindexHeader!important;
  overflow:hidden;
  @include display-flexbox();
}

.announcement-wrapper{
  width:100%;
}

.announcement-bar{
  background-color:$colorAnnouncement;
  color:$colorAnnouncementText;
  height: $heightAnnouncement;
  overflow:hidden;

  @include accentFontStack;
  @include display-flexbox();
  @include justify-content(center);
  @include align-items(center);
  @include flex(auto);

  @include screen($small){
    height: $heightAnnouncementMobile;
    font-size:$baseFontSize-sm;
    line-height: 1.2;
  }
}

/*================ _Header ================*/
.header-section{
  position: relative;
  z-index: $zindexHeader;

  .sticky-header &{
    @include sticky;
    top:0;
  }
}

//header-container
.header-container {
  height: $heightHeaderScrolling;
  @include transition($transitions);

  @include screen($small){
    position: relative!important;
  }
}

//site header
.site-header{
  //background-color: $colorNav;
  background-color: rgba(0,0,0,0.9);
  backdrop-filter: saturate(180%) blur(5px);
  height: $heightHeaderScrolling;
  @include transition($transitions);

  ul{
    margin-bottom: 0;
  }
}

//header-wrapper
.header-wrapper{
  height: 100%;
  @include display-flexbox();
  @include align-items(center);
}

//nav containers
.nav-containers{
  @include screenDown($large){
     margin: 0px;
  }
}

//nav container left icons
.nav-container-left-icons{
  order: 1;
  display: none;

  .inner-nav-containers{
    @include display-flexbox();
    margin-left: 0;
    margin-right: $spacer;
  }

  //mobile style
  @include screenDown($large){
    display: block;
    @include flex(1);
  }

  //nav type styles
  @include screenUp($postMedium){
    .nav-center-logo &{
      @include flex(1);
    }
    .nav-hidden &{
      display: block;
      @include flex(1);
    }
  }
}

//nav container logo
.nav-container-logo{
  order:2;
  .inner-nav-containers{
    margin-left:0;
  }

  //nav type styles
  @include screenUp($postMedium){
    .nav-center &{
      @include flex(1);
    }
    .nav-center-logo &{
      order: 3;
    }
  }
}

//nav container menu
.nav-container-menu{
  order: 3;

  //mobile style
  @include screenDown($large){
    display: none;
  }

  //nav type styles
  .nav-left &{
    margin-right: auto;
  }
  .nav-right &{
    margin-left: auto;
  }
  .nav-center &{
    .inner-nav-containers{margin-right:$spacer;}
  }
  .nav-center-logo &{
    @include flex(1);
    order:2;
    .inner-nav-containers{margin-left:0; margin-right:$spacer;}
  }
  .nav-hidden &{
    display: none;
  }
}

//nav container right icons
.nav-container-right-icons{
  order:4;
  text-align: right;

  .inner-nav-containers{
    @include display-flexbox();
    @include justify-content(flex-end);
  }

  @include screenDown($large){
    @include flex(1);
  }

  //nav type styles
  @include screenUp($postMedium){
    .nav-center &{
      @include flex(1);
      .inner-nav-containers{margin-left:0;}
    }
    .nav-center-logo &{
      @include flex(1);
    }
    .nav-hidden &{
      @include flex(1);
    }
  }
}

.site-nav,
.site-nav--open {
  white-space: nowrap;
}

//nav inner-container
.inner-nav-containers{
  @include align-items(center);

  .nav-container-left &{
    margin-left: 0px;
  }

  .nav-left .nav-container-logo &, .nav-right .nav-container-logo &{
    @include screenUp($postMedium){
      margin-left: 0px;
    }
  }
}

//nav items
.site-nav__item {
  line-height: 1;
  white-space: normal;
  margin-bottom: 0px;

  li{
    margin-bottom: 0px;
  }
}

//Nav Links
.site-nav__link {
  @include accentFontStack;
  display: inline-block;
  text-decoration: none;
  padding: 12px;
  white-space: nowrap;
  color: $colorNavText;
  font-weight: 400 !important;

  .icon-arrow-down {
    position: relative;
    top: -2px;
    padding-left: 5px;
    font-size: 10px;
  }
}

//nav has dropdown
.site-nav--has-dropdown {

  > a {
    position: relative;
    z-index: $zindexNavDropdowns + 1;
  }

  //toggle link states of parents when hovering childrens
  &:hover > a{
    opacity: $opacity-link-hover;
    @include hovers;
  }

  //dropdown link hover style
  &:hover > .site-nav__dropdown-link,
  .site-nav__dropdown-link:hover,
  .site-nav__dropdown-link:active,
  .site-nav__dropdown-link:focus{
    color: $colorSecondary;
    border-color:$colorSecondary;
    background-color: $colorDefault;
  }

  &.site-nav--has-dropdown-grandchild {
    a:before {
      display: none;
    }
  }
}

//dropdowns
.site-nav__dropdown, .site-nav__dropdown-grandchild ul{
  background-color: $colorBody;
  min-width: 100%;
  padding: $paddingDropdown 0;
  @include shadow($shadow);

  //prevent radius from being larger than dropdown padding
  @if $borderRadius > $paddingDropdown{
    border-radius: $paddingDropdown;
  }
  @else{
    border-radius: $borderRadius;
  }
}

//first dropdown
.site-nav__dropdown {
  @include transition($transitions);
  @include transform(translate3d(0px, -12px, 0px));

  .supports-no-touch .site-nav--has-dropdown:hover &,
  .site-nav--has-dropdown.nav-hover &,
  .nav-focus + & {
    opacity: 1;
    pointer-events: auto;
    @include transform(translate3d(0px, 0px, 0px));
  }
}

//second dropdown
.site-nav__dropdown-grandchild {
  position: absolute;
  left: 100%;
  width: 100%;
  margin: 0;
  z-index: $zindexNavDropdowns;
  opacity: 0;
  pointer-events: none;
  top: -$paddingDropdown/2;

  @include transition($transitions);
  @include transform(translate3d(-12px, 0px, 0px));

  ul{
    margin: 0 0 0 5px;
  }

  &.nav-outside {
    left: -100%;
  }

  .nav-outside + & {
    @include transform(translate3d(12px, 0px, 0px));
  }

  .supports-no-touch .site-nav--has-dropdown-grandchild:hover &,
  .site-nav--has-dropdown-grandchild.nav-hover &,
  .nav-focus + & {
    opacity: 1;
    pointer-events: initial;
    @include transform(translate3d(0px, 0px, 0px));
  }
}

//dropdown links
.site-nav__dropdown-link {
  display: block;
  white-space: nowrap;
  padding: ($paddingDropdownItem) ($paddingDropdownItem) ($paddingDropdownItem) (($paddingDropdownItem) - $spacer-xs);
  background-color: transparent;
  color: $colorBodyText;
  border-left:$spacer-xs solid transparent;

  .site-nav--has-grandchildren & {
    padding-right: $paddingDropdownItem * 2;
  }

  .site-nav__dropdown-grandchild & {
    white-space: normal;
  }

  .fas{
    position: absolute;
    right: $paddingDropdownItem;
  }
}

//logo
.site-header__logo-link{
  float: left;
  @include headerFontStack;
  font-size: $headerSize1;

  @include screen($small){
    font-size: $headerSize6;
  }
}

.logo{
  border-radius:0;
}

.site-header__logo{
  margin:0;

  a{
    color: $colorNavText;
    display: block;
    line-height:0;
  }

  img{
    max-width:100%;
    width: auto;
    @include transition($transitions);
  }

  //hide inverted logo
  .inverted-logo{
    @include visuallyHidden;
  }
  //
  .mobile-logo{
    display:none;
  }
}

//icons
.site-nav__link--icon {
  letter-spacing: 0!important;
  @include screenUp($small){
    font-size:$navIconSize;
  }
}

//cart bubble
.cart-link {
  position: relative;
}
.cart-link__bubble {
  display: none;
}
.cart-link__bubble--visible {
  display: block;
  position: absolute;
  width: 14px;
  height: 14px;
  right: 4px;
  border: 2px solid $colorNav;
  background-color: $colorSale;
  border-radius: $circle;
  @include transition($transitions);

  {% case settings.cart_icon %}
    {% when 'cart' %}
      top: 1px;
    {% when 'bag' %}
      top: 8px;
      right: 5px;
    {% when 'basket' %}
      top: 8px;
  {% endcase %}

  @include screen($small){
    width: 12px;
    height: 12px;
  }
}

//sticky header
.sticky-header.is-scrolling{
  @include screenUp($small){

    .header-section{
      @include transform(translatey(-($heightHeaderScrolling - $heightHeader)));
    }

    .site-header{
      height: $heightHeader;
      position:absolute;
      width: 100%;
      top: ($heightHeaderScrolling - $heightHeader);
      @include shadow($shadowBottom);
    }

    //show default logo - hide inverted logo
    .site-header__logo{
      .default-logo{
        @include visuallyShown(!important);
      }
      .inverted-logo{
        @include visuallyHidden(!important);
      }
    }

    //reaply style to overwrite hero header
    .site-header{
      // background-color: $colorNav;
      background-color: rgba(0,0,0,0.9);
      backdrop-filter: saturate(180%) blur(5px);
    }
    .site-nav__link, .site-header__logo-link{
      color: $colorNavText;
    }
    .cart-link__bubble--visible{
      background-color: $colorSale;
      border-color: $colorNav;
    }

  }
}

//mobile header
@include screen($small){

  .header-section{
    @include sticky;
    top:0;
  }
  .header-container{
    height: $heightHeaderMobile;
  }
  .site-header{
    background-color: rgba(0,0,0,0.9);
    backdrop-filter: saturate(180%) blur(5px);
    height: $heightHeaderMobile;
    @include shadow($shadowBottom);
  }

  //hide default and inverted logo - show mobile logo
  .site-header__logo{
    .default-logo{
      display:none;
    }
    .inverted-logo{
      display:none;
    }
    .mobile-logo{
      display: block;
    }
  }

  //reaply style to overwrite hero header
  .site-header{
    //background-color: $colorNav!important;
  }
  .site-nav__link, .site-header__logo-link{
    color: $colorNavText!important;
  }
  .cart-link__bubble--visible{
    background-color: $colorSale!important;
    border-color: $colorNav!important;
  }
}

/*================ _Drawers ================*/
.js-drawer-open {
  @include screen($small){
    //overflow: hidden;
  }
}

.drawer {
  display: none;
  position: fixed;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  top: 0;
  bottom: 0;
  z-index: $zindexDrawer;
  color: $colorDrawerText;
  border-color: adaptive-color($colorDrawerDefault, $percentageColorBorder);
  background-color: $colorDrawer;

  @include transition($transitionDrawers);

  //overwrite .btn and form elements
  .btn, textarea, input{
    @include button($colorDrawerDefault,$colorDrawerText);
    @include placeholder($colorDrawerText);
  }
  //overwrite border color
  .ajaxcart__row,.mobile-nav__spacer{
    border-color: adaptive-color($colorDrawerDefault, $percentageColorBorder)!important;
  }
  //overwrite primary buttons
  .btn--primary{
    @include button($colorDrawerPrimary,$colorDrawerButtonText);
  }
  .btn-outline-primary{
    @include button($colorDrawerPrimary,$colorDrawerButtonText,outline);
  }
  //overwrite buy buttons
  .btn--buy{
    @include button($colorDrawerBuy,$colorDrawerButtonText);
  }
  .btn-outline-buy{
    @include button($colorDrawerBuy,$colorDrawerButtonText,outline);
  }
  //overwrite links
  a{
    color:$colorDrawerText;
  }
  .text-link{
    color:$colorDrawerPrimary;
  }
}

//drawer left
.drawer--left {
  @include shadow($shadowRight);

  //large
  @include screenUp($small){
    width: $drawerNavWidth;
    left: -$drawerNavWidth;
  }

  //mobile
  @include screen($small) {
    width: $drawerNavWidthMobile;
    left: -$drawerNavWidthMobile;
  }

  .js-drawer-open-left & {
    display: block;
    @include transform(translateX(100%));

    .lt-ie9 & {
      left: 0;
    }
  }
}

//drawer right
.drawer--right {
  @include shadow($shadowLeft);

  //large
  @include screenUp($small){
    width: $drawerCartWidth;
    right: -$drawerCartWidth;
  }

  //mobile
  @include screen($small) {
    width: $drawerCartWidthMobile;
    right: -$drawerCartWidthMobile;
  }

  .js-drawer-open-right & {
    display: block;
    @include transform(translateX(-100%));

    .lt-ie9 & {
      right: 0;
    }
  }
}

//drawer top
.drawer--top {
  min-height: $heightInput + $gutter*2;
  top: -($heightInput + $gutter*2);
  left:0;
  right:0;
  bottom:inherit;
  max-width:100%;
  @include shadow($shadowBottom);

  .drawer__inner{
    overflow: hidden;
  }

  .js-drawer-open-top & {
    display: block;
    @include transform(translateY( ($heightInput + $gutter*2) ));

    .lt-ie9 & {
      top: 0;
    }
  }
}

.drawer__title {
  @include headerFontStack;
  font-size: $headerSize3;
  line-height:1;
}


//drawer overlay
.overlay-drawer{
  background-color: $colorOverlay;
  position:fixed;
  left:0;
  right:0;
  top:0;
  bottom:0;
  width:100%;
  height:100%;
  opacity: 0;
  pointer-events: none;
  z-index:$zindexDrawerOverlay;
  @include transition($transitionDrawers);

  .js-drawer-open &{
    pointer-events: auto;
    opacity: $colorDrawerOverlayOpacity;
  }
}

//drawer header
.drawer__header {
  display: table;
  height: $heightHeader;
  width: 100%;

  @include screen($small){
    height: $heightHeaderMobile;
  }
}

.drawer__fixed-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  padding: 0 $gutter;
  @include shadow($shadowBottom);
  height: $heightHeader;
  overflow: visible; // for close button hit area
  z-index:10;

  @include screen($small) {
    padding: 0 $gutter-sm;
    height: $heightHeaderMobile;
  }
}

.drawer__title,
.drawer__close {
  display: table-cell;
  vertical-align: middle;
}

.drawer__close{
  text-align: right;
}

//drawer inner
.drawer__inner {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  padding: $gutter;

  @include screen($small){
    padding: $gutter $gutter-sm;
  }

  .drawer--has-fixed-header & {
    top: $heightHeader;

    @include screen($small){
      top: $heightHeaderMobile;
    }
  }

  .drawer--has-fixed-footer & {
    overflow: hidden;
  }

}

/*================ _Cart_drawer ================*/
.cart-empty-container{
  display:none;
}
#CartDrawer .drawer__inner{
  @include display-flexbox();
  @include flex-direction(column);
  @include justify-content(center);
}

.ajaxcart__inner--has-fixed-footer {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: 0;
  bottom: $drawerCartFooterHeight; // overwritten with JS
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  padding: $gutter;

  @include screen($small){
    padding: $gutter $gutter-sm;
  }
}

//row container
.ajaxcart__product{
  position: relative;
  max-height: 500px;

  &.is-removed {
    max-height: 0;
    opacity:0;
    overflow: hidden;
    visibility: hidden;
    @include backface(hidden);
    @include transition($transitionDrawers);
  }
}

//row
.ajaxcart__row{
   margin-bottom: $gutter;

  .cart-spacer &{
    padding-bottom: $gutter;
    border-bottom: $borders;
  }

  .ajaxcart__product:last-child &{
    padding-bottom: 0;
    margin-bottom: 0;
    border-bottom: 0;
  }
}

.ajaxcart__grid-info{
  @include align-self(center);
  padding-left: $gutter-sm!important;
}

.ajaxcart__grid{
/*   @include animated(fadeIn); */
}

//drawer product image
.ajaxcart__product-image {
  display: block;
  overflow: hidden;

  img {
    display: block;
    margin: 0 auto;
    max-width: 100%;
    background-color: $drawerColorProduct;
  }
}

//drawer product name
.ajaxcart__product-name,
.cart__product-name {
  @include headerFontStack;
  color: $colorDrawerText;
}

//quantity/price grid
.ajaxcart__quantity-grid{
  @include align-items(center);

  &.ajaxcart__has-discount{
    @include align-items(flex-start);
  }
}
.ajaxcart__quantity-grid__item{
  @include flex(0);
}
.ajaxcart__price-grid__item{
  @include flex(1);
  padding-left: $spacer-xs!important;
}
.ajaxcart__price{
  .ajaxcart__has-discount &{
    display: block;
  }
}

//product name
.ajaxcart__product-name--wrapper{
  margin-bottom: $spacer-xs;
}
.ajaxcart__product-name{
  display: inline-block;
}

//product variant
.ajaxcart__product-meta{
  display: block;
  font-size: $baseFontSize-sm;
}

//price
.ajaxcart__price--strikethrough,
.cart__price--strikethrough {
  text-decoration: line-through;
  font-size: $baseFontSize-sm;
}

//discount
.order-discount{
  margin: 0px;
  list-style: unset;
}
.order-discount__item{
  margin-top: $spacer-xs;
}

//cart notes
.ajaxcart__note {

}

//checkout note
.ajaxcart__note_checkout{

}

//footer fixed
.ajaxcart__footer--fixed {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: $gutter;
  min-height: $drawerCartFooterHeight; // overwritten by JS
  background-color: $colorDrawer;
  @include shadow($shadowTop);
  @include screen($small) {
    padding: $gutter-sm;
  }
}

//cart subtotal
.ajaxcart__subtotal{
  margin-bottom: $spacer-sm;
  @include accentFontStack;
}
.ajaxcart__savings{
  margin-bottom: $spacer-xs;
}

//loading
.ajaxcart-loading-icon{
  display: none!important;
  color: $colorDrawerPrimary;
  font-size: $baseFontSize-lg;

  .drawer--is-loading &{
    display: block!important;
  }
}

/*================ _Nav_drawer ================*/
#NavDrawer{

  //social media
  .social-medias{
    position: absolute;
    bottom: 0;
    width: 100%;
    height: $heightHeaderMobile;
    background: $colorDrawer;
    padding:0 $gutter-sm;
    @include shadow($shadowTop);
    @include display-flexbox();
  }
  .social-medias-icon{
    @include flex(1);
    @include display-flexbox();
    @include justify-content(center);
    @include align-items(center);
  }
}



.mobile-nav{
  margin-left: 0px;
  margin-top: -$gutter-sm;
  margin-bottom: 0px;

  .has-social-medias &{
    margin-bottom: ($heightHeaderMobile - $gutter + $gutter-sm);
  }
}

.mobile-nav__item{

  .mobile-nav > & {
    background-color: $colorDrawer;
  }

  a{
    padding:$gutter-sm 0;
    color: $colorDrawerText;
    text-decoration: none;

    @include screen($small){
      padding:$gutter-sm 0;
    }
  }
}

//all links
.mobile-nav__item a{
  display: block;
}

//firts level links
.mobile-nav__has-sublist a,
.mobile-nav > .mobile-nav__item:not(.mobile-nav__item--secondary) > a{
  @include accentFontStack;
  font-size: $headerSize5;
}

//second level links
.mobile-nav > .mobile-nav__item > .mobile-nav__sublist > .mobile-nav__item > a,
.mobile-nav > .mobile-nav__item > .mobile-nav__sublist > .mobile-nav__item > .mobile-nav__has-sublist >a{
  @include accentFontStack;
  font-size: $headerSize6;
}

//third level links
.mobile-nav__subsublist a{

}

//secondary nav links
.mobile-nav__item--secondary{
  a {

  }
}

//spacer
.mobile-nav__spacer {

  .cart-spacer &{
    border-top: $borders;
    margin-top: $gutter-sm;
    padding-bottom: $gutter-sm;
  }
}

//close submenu first
.mobile-nav__sublist{
  display: none;
  margin-bottom: 0px;
}


/*================ _Search_drawer ================*/

/*================ _Guarantee ================*/
#section-guarantee{
  .box{
    @include screenUp($small){
      padding: $gutter 0;
    }
  }

  @include screen($small){
    .box,.wrapper,.grid,.grid__item{
      padding:0px;
      margin:0;
    }
    .grid__item + .grid__item{
      border-top: $borders;
    }
  }

  .large--eight-twelfths{
    .guarantee-item{
      @include flex-direction(column);
    }
    .guarantee-icon{
      margin-bottom: $spacer;
    }
  }
}

.guarantee-item{
  @include display-flexbox();

  .guarantee-title{
    margin-top: -$spacer-xs;
    letter-spacing: 0px;
    font-size: 18px;
  }

  &.guarantee-title-only{
    @include align-items(center);
  }

  @include screen($small){
    padding: $gutter $gutter-sm;
  }
}

.guarantee-icon{
  padding-right: $gutter-sm;
  font-size: 0.8em;
  color: #8cc300;
}

.guarantee-content{
  @include autoSpacer($spacer);
}

/*================ _Footer ================*/
//footer
.site-footer .btn--primary {
  background-color: #ffcb00 !important;
}
.site-footer{
  background-color: $colorFooter;
  color: $colorFooterText;

  .social-icons{
    a{
      color: $colorFooterText;
    }
    .fab{
      margin-right: $spacer-xs;
    }
  }

  //overwrite .btn and form elements
  .btn,textarea, input{
    @include button($colorFooterDefault,$colorFooterText);
    @include placeholder($colorFooterText);
  }
  //overwrite primary buttons
  .btn--primary{
    @include button($colorFooterPrimary,$colorFooterButtonText);
  }
  .btn-outline-primary{
    @include button($colorFooterPrimary,$colorFooterButtonText,outline);
  }

  .footer-item{
    @include flex(1);

    @include screen($small){
      @include flex(100%);
    }

    &:last-child{
      margin-bottom: 0;
    }

    &.footer-link_list,&.footer-social_medias{
      @include screen($small){
        @include flex(50%);
      }
    }

    &.footer-newsletter{
      @include screenUp($small){
        @include flex(2);
        max-width:50%;
        margin-left:auto;
        margin-right:auto;
      }

      form{
        margin-bottom: $spacer;
      }
    }
  }

  .image-link{
    margin-bottom:$spacer-sm;
  }

  ul li a{
    display: inline-block;
    margin-bottom: $spacer-sm;
  }

  .footer-single-item{
    text-align:center;

    ul li a{
      font-size: $baseFontSize-lg;
    }
  }

  .inline-footer{
    @include screenUp($small){
      li{
        display:inline-block;
        margin-right:$gutter;
        margin-bottom: 0px;
        &:last-child{
          margin-right:0px;
        }
      }
    }
  }

  .note, .errors{
    color: $colorFooterText;
    border-color: $colorFooterPrimary;
  }
}

.site-footer__linktitle{
  color: $colorFooterText;
  font-weight: 600;
  letter-spacing: 0px;
  font-size: 22px;
  text-transform: uppercase !important;
}

.site-footer__linklist{
  a{
    color: $colorFooterText;
  }
}

//bottom footer
.bottom-footer{
  background-color: $colorCopyright;
  padding: $gutter 0;

  .credentials{
    color: $colorCopyrightText;
    a{
      color: $colorCopyrightText;
    }
  }

  @include screenUp($postMedium){
    p{
      margin-bottom: 0px;
    }
    .grid{
       @include display-flexbox();
       @include align-items(center);
    }
  }

  .grid__item:last-child{
    line-height: 0;
  }
}

//footer spacer
.footer-spacer{
  @include screen($small){
    height: $heightHeaderMobile;
  }
}

.credentials{
  font-size: $baseFontSize-sm;
  & > span:last-child{
    @include visuallyHidden;
  }
}


/*============================================================================
  _Components
==============================================================================*/

/*================ _Overlay ================*/
.overlay{
  position: relative;

  &::after{
    content: '';
    display: block;
    position: absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
    width: 100%;
    height: 100%;
    background-color: $colorOverlay;
    opacity:$opacityOverlay;
  }

  h1,h2,h3,h4,h5,h6,p,.text-link{
    color:$colorHeroHeader;
  }
}

.overlay-text{
  h1,h2,h3,h4,h5,h6,p,.text-link{
    color:$colorHeroHeader;
  }
}

/*================ _Loading ================*/
.btn--loading {
  opacity: $opacity-link-hover!important;

  .btn__text{
    @include visuallyHidden;
  }

  &:after {
    @include fontAwesome;
    content:"\f110";
    display: block;
    @include animation(fa-spin 2s infinite linear);
  }
}

/*================ _Payment_icons ================*/
.payment-icons-list{
  line-height:0;

  .bottom-footer &{
     margin-bottom: 0px;

     @include screenDown($large){
       margin-top: $spacer;
     }
  }
}

/*================ _Cardbox ================*/
.cardbox{
  background: $colorBody;
  padding: $gutter-sm;
  @include shadow($shadow);
  @include RadiusCircle;
}

/*================ _Currency_selector ================*/
.currency-form{

  .currency-selector{
    @include accentFontStack;
  }

  .price-wrapper &{
    margin-left: auto;
  }

  .bottom-footer &{
    @include screen($large){
      display: inline-block;
      margin-right: $spacer-sm;
    }
    @include screenDown($large){
      display: block;
      margin-bottom: $spacer;
    }
  }

  .nav-container-right-icons &{
    margin-right: $spacer-sm;
    @include screenDown($large){
      display: none;
    }
  }

  .mobile-nav &{
    margin-top: $gutter-sm;

    .currency-selector,.currency-loading{
      width: 100%;
    }
  }

  .announcement-container &{
    @include screenUp($small){
      position:absolute;
      right:0;
      height:100%;
      background-color:$colorDefault;
    }
    @include screen($small){
      background-color:$colorAnnouncement;
    }
    .currency-selector,.currency-loading{
      border-radius:0;
      height:100%;
      border:none!important;
    }
  }

  .select-custom{
    background-image: url('{{ "ico-select-custom.svg" | asset_url }}')!important;
  }
}


/*============================================================================
  _Homepage_section
==============================================================================*/


/*================ _Hero ================*/

//hero header
.hero-header{
  &.hero-container{
    .announcement-active &{
      margin-top: -$heightAnnouncement;

      @include screen($small){
        margin-top: -$heightAnnouncementMobile;
      }
    }

    .announcement-mobile-hide &{
      @include screen($small){
        margin-top: 0px!important;
      }
    }
  }

  .hero__inner {
    .announcement-active &{
      padding-top: $heightAnnouncement;

      @include screen($small){
        padding-top: $heightAnnouncementMobile;
      }
    }
  }

  .hero-content{
    .transparent-header &{
      @include screenUp($small){
        padding-top: $heightHeader;
      }
    }
  }
}

.hero-container{
  overflow: hidden;
}

//hero bob
.hero{
  @include bgSet;
  width: 100%;

  .hero-collection &, .hero-index:not(.hero-slick) &{
    @include animated(fadeIn);
  }
}

//hero size desktop
.hero--xsmall{
  min-height: $heroHeightXsmall;
}
.hero--small{
  min-height: $heroHeightSmall;
}
.hero--medium{
  min-height: $heroHeightMedium;
}
.hero--large{
  min-height: $heroHeightLarge;
}
.hero--xlarge{
  min-height: $heroHeightXlarge;
}

//hero size mobile
.hero-mobile-xsmall{
  @include screen($small){
    min-height: $heroHeightMobileXsmall;
  }
}
.hero-mobile-small{
  @include screen($small){
    min-height: $heroHeightMobileSmall;
  }
}
.hero-mobile-medium{
  @include screen($small){
    min-height: $heroHeightMobileMedium;
  }
}
.hero-mobile-large{
  @include screen($small){
    min-height: $heroHeightMobileLarge;
  }
}
.hero-mobile-xlarge{
  @include screen($small){
    min-height: $heroHeightMobileXlarge;
  }
}

.hero__inner {
  width:100%;
  position: relative;
  z-index: 2;

  .hero-slick[data-dots="true"] &, .hero-slick[data-arrows="true"] &{
    padding-bottom: $heightInputSmall;
  }
}

//hero text wrapper
.hero__text-wrapper {
  @include makeWrapper($siteWidth);
  @include makeBox;
}

//hero-content bob
.hero-content{

  .slick-active &, .hero-collection &, .hero-index:not(.hero-slick) &{
    @include animated(heroContentIn);
  }
}

//hero text
.hero__text{
  @include screenUp($postSmall){
    @include leadFontStack;
  }
}

.hero__btn{
  margin-bottom: $spacer;
}

//no js
.hero__image-no-js {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: top center;
  height: 100vh;
  min-height: 550px;
  opacity: 1;
  padding-bottom: 70%;
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  opacity: 1;

  @include at-query($min, $large) {
    padding-bottom: 45%;
  }
}


/*================ _Hero_slick ================*/
.hero-slick{
  opacity:0;

  &.slick-initialized{
    @include animated(fadeIn);
  }

  //slick track
  .slick-track{
    @include display-flexbox();
  }
  //slick slide
  .slick-slide{
    height:inherit;
  }
}

//slide
.hero__slide{
  outline:none!important;
  position: relative;
}

//active slide
.slick-active{

}

/*================ _Collection_list ================*/
.collection-grid__item-link{
  border-radius: $borderRadius;
}
.wrapper-filter{

}

/*================ _Featured_collection ================*/


/*================ _Featured_product ================*/


/*================ _Featured_blog ================*/


/*================ _Featured_row ================*/
.featured-row {
  @include flexRow;
  @include align-items(center);
}

.featured-row__item{

}

.featured-row-right{
  order:1;
  @include screen($small){
    order:inherit;
  }
}

.feature-row__image-wrapper{
  @include screen($small){
    margin-bottom: $spacer;
  }
}

/*================ _Featured_content ================*/


/*================ _Featured_video ================*/
.video-wrapper{
  border-radius: $borderRadius;

  .grid--full &{
    border-radius: 0px;
  }
}

/*================ _Featured_column ================*/


/*================ _Featured_image ================*/
.featured-image-section{
  .wrapper--full{
    .image{
      border-radius: 0px;
    }
  }
}


/*================ _Newsletter ================*/
.newsletter-section{

}
.newsletter__input{

  .bg-section &{
    background-color: $colorBody;
    border-color: $colorBody;
  }
}

/*================ _Gallery ================*/
.gallery-section{

}
.image-bar {
  overflow: hidden;

  @include screen($small) {
    max-width: 400px;
    margin: 0 auto;
  }
}

.image-bar__item {
  display: block;
  background: {
    repeat: no-repeat;
    position: 50% 50%;
    size: cover;
  }
}

.image-bar__content, .image-bar__item {
  position: relative;
  width: 100%;

  .image-bar--small & {
    height: 94px;
  }

  .image-bar--medium & {
    height: 357px;
  }

  .image-bar--large & {
    height: 488px;
  }
}

.image-bar__caption {
  position: absolute;
  top: 50%;
  @include transform(translateY(-50%));
  width: 100%;
  text-align: center;
}


/*================ _Quotes ================*/
.quote-image-wrapper{
  margin-bottom: $spacer;
}

.quote-image{
  margin: auto;
}

.quote-icon-wrapper{
  border-radius: $borderRadius;
  background-color:$colorDefault;
  margin: auto;
  margin-bottom: $spacer;
  @include RadiusCircle;
  @include display-flexbox();
  @include align-items(center);
  @include justify-content(center);

  .bg-section &{
    background-color: $colorBody;
  }
}

.quote-icon{
  color: $colorSecondary;
  font-size: $navIconSize;
}

/*================ _Logo_list ================*/
.logo-list-section{

}

.logo-bar {
  list-style: none;
  text-align: center;
  margin-left:0;
  margin-bottom: -$gutter;
}

.logo-bar__item {
  display: inline-block;
  vertical-align: middle;
  max-width: 160px;
  margin: 0 ($gutter-sm) $gutter;

  @include screen($small){
    display: block;
    margin: 0 auto $gutter-sm;
  }
}

.logo-bar__image {
  display: block;
  margin: 0 auto;
  border-radius: 0px;
}

.logo-bar__link {
  display: block;
}


/*================ _Custom_html ================*/
.custom-content {
  @include flexRow;
  @include align-items(stretch);
  width: auto;
  margin-left: -$gutter;
}

.custom__item {
  @include flex(0 0 auto);
  max-width: 100%;
  padding-left: $gutter;

  @include screen($small) {
    @include flex(0 0 auto);

    &.small--one-half {
      @include flex(1 0 50%);
      max-width: 400px;
      margin-left: auto;
      margin-right: auto;
    }
  }
}

.custom__item-inner {
  position: relative;
  display: inline-block;
  text-align: left;
  max-width: 100%;
}

.custom__item-inner--video,
.custom__item-inner--html {
  display: block;
}


/*================ _Map ================*/
.map-container {
  position: relative;
  width: 100%;
  overflow: hidden;
  @include flexRow;
  @include align-items(center);
  @include flex-direction(row);
  @include makeBox;

  @include at-query($max, $medium) {
    min-height: auto;
  }
}

.map-section__wrapper {
  height: 100%;
  @include flex-shrink(0);
  @include flex-grow(1);
  @include flex-basis(100%);
  @include display-flexbox();
  @include flex-wrap(wrap);
  @include flex-direction(row);
}

.map-section--load-error {
  height: auto;
}

.map-section__overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 0;
  z-index: 0;
}

.map-section__error {
  position: relative;
  z-index: 3;

  @include at-query($max, $medium) {
    position: absolute;
    margin: 0 2rem;
    top: 50%;
    @include transform(translateY(-50%));
  }
}

.map-section__content-wrapper {
  position: relative;
  text-align: center;
  height: 100%;
  @include display-flexbox();
  @include flex-grow(0);
}

.map-section__content {
  position: relative;
  display: inline-block;
  background-color: $colorBody;
  padding: $gutter;
  width: 100%;
  text-align: center;
  z-index: ($zindexBase + 1);
  border-radius: $borderRadius;
  @include flexRow;
  @include align-items(center);
  min-height: 350px;

  // Make sure every children is on one line
  & > * {
    width: 100%;
  }

  @include at-query($max, $medium) {
    background-color: $colorDefault;
    min-height: auto;
    display: block;

    .ie9 & {
      top: 10%;
    }
  }

  @include screenDown($large){
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
  }

  .map-section--load-error & {
    position: static;
    transform: translateY(0);
  }
}

.map-section__link {
  display: block;
  position: absolute;
  top: 0;
  left: 50%;
  max-width: none;
  width: 100%;
  height: 100%;
  z-index: 2;
  @include transform(translateX(-50%));
}

// Optically center map in visible area with
// extended height/widths and negative margins
.map-section__container {
  position: absolute;
  height: 100%;
  min-height: auto;
  left: 0;
  top: 0;
  // map is centered on resize, larger widths allow pin to be off-center
  width: 130%;

  @include at-query($max, $medium) {
    position: relative;
    max-width: $siteWidth;
    width: 100%;
    height: 55vh;
  }

}

.map_section__directions-btn {
  [class^="icon"] {
    height: 1em;
  }

  * {
    vertical-align: middle;
  }
}

.map-section__background-wrapper {
  @include flex-basis(100%);
  @include flex-grow(0);
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;

  @include at-query($max, $medium) {
    overflow: hidden;
    position: relative;
    @include flex-basis(100%);
  }

  @include screenDown($large){
    border-bottom-right-radius: $borderRadius;
    border-bottom-left-radius: $borderRadius;
  }

  .ie9 & {
    width: 100%;
    height: 500px;
  }

  .map-section--onboarding & {
    min-height: 350px;
  }

  .placeholder-background {
    height: 100%;
  }

  .js {
    .no-js & {
      @include visuallyHidden;
    }
  }
}

.map-section__image {
  height: 100%;
  background-size: cover;
  background-position: center;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;

  @include at-query($max, $medium) {
    position: relative;
  }

  // Only show the background image if map fails to load
  .map-section--display-map & {
    display: none !important;
  }

 .map-section--load-error & {
    display: block !important;
  }
}

// Hide Google maps UI
.gm-style-cc,
.gm-style-cc + div {
  visibility: hidden;
}

.flex--third {
  @include flex-basis(33%);

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

  .ie9 & {
    width: 33%;
    float: left;
    display: block;

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


/*============================================================================
  _Template
==============================================================================*/

/*================ _Collection_template ================*/
.collection-description{
  @include leadFontStack;
}

.tags--collection a{
  @include buttonBase;
  @include button($colorPrimary,$colorButtonText,outline);
  @include buttonSmall;
}

.tags--collection .tag--active a{
  @include button($colorPrimary,$colorButtonText);
}


.filter-dropdown, .tags--collection{
  @include inlineList;

  @include screen($small){

    .filter-dropdown__label{
      margin-bottom: $spacer-xs;
      text-align: left;
      width: 100%;
    }
  }
}

.collection-sorting{
  @include align-self(flex-end);
}

/*================ _Product_template ================*/

//product single
.product-single{

}

//product wrapper
.product-wrapper{
  @include screenUp($small){
    @include display-flexbox;
    width:inherit;
  }
}

.product-photos-right{
  .product-photos{
    order:2;
  }
}

//Product photo
.product-single__photos {
  overflow-anchor: none;
}

.product-single__photo--container{
  max-width:100%!important;
  margin: 0 auto;
}

.product-stacked__photos{
  .product-single__photo--flex-wrapper + .product-single__photo--flex-wrapper{
    @include screenUp($small){
      margin-top: $gutter;
    }
  }

  @include screen($large){
    @include flexRow;
    margin-left:-$gutter;

    .product-single__photo--flex-wrapper{
      padding-left: $gutter;

      &:nth-child(n+3){
        flex:50%;
      }
    }
  }
}

//product photo wrapper
.product-single__photo--flex-wrapper {
  @include display-flexbox();
  width: 100%;
  position: relative;

  &.not-featured-image{
    .layout-thumbnail &{
      display:none;
    }
    .slick-initialized &{
      .layout-thumbnail &{
        display:block;
      }
    }
    @include screen($small){
      display:none;
      .slick-initialized &{
        display:block;
      }
    }
  }
}

.product-single__photo--flex {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  @include flex(1);
  -ms-flex-item-align: center;
  -webkit-align-self: center;
  align-self: center;
}

//product featured photo wrapper
.product-single__photo-wrapper{
  border-radius: $borderRadius;
}

//product main img
.product-single__photo{
  background-color: $colorProduct;

  //zoom
  &[data-mfp-src] {
    @include screenUp($small){
      cursor: zoom-in;
    }
  }
}

//thumbnail wrapper
.product-single__thumbnails{
  margin-top: $gutter-sm;

  &:not(.slick-slider){
    margin-right:-$borderWidth;
    .grid__item{
      &:nth-child(n+6){
        display:none;
      }
    }
  }

  &.slick-initialized{
    margin-left:0;
    .grid__item{
      padding:0;
    }
  }

  .slick-current{
    .product-single__thumbnail{
      border-color:$colorSecondary;
    }
  }

  .product-single__thumbnail{
    @include screenUp($small){
      &:focus{
        border-color:$colorSecondary;
      }
    }
  }

  .layout-stacked &{
    @include screenUp($small){
      display:none!important;
    }
  }
}

//thumbnail link
.product-single__thumbnail{
  display: block;
  border:$borders;
  border-color: transparent;
  border-radius: $borderRadius;
  cursor: pointer;
}

//thumbnail img
.product-single__thumb{
  background-color: $colorProduct;
  width: 100%;
  display: block;
}

//format slick slider
.slick-format{
  &.slick-initialized{

    //reset
    .grid__item{
      clear:inherit!important;
      padding:0px;
    }

    //set format
    .slick-slide{
      margin-left:$gutter/2;
      margin-right:$gutter/2;

      @include screen($small){
        margin-left:$gutter-sm/2;
        margin-right:$gutter-sm/2;
      }
    }

    @include screen($small){
      margin-left:-$gutter-sm;
      margin-right:-$gutter-sm;

      .slick-list{
        padding-left:($gutter-sm/2);
        padding-right:($gutter-sm/2);
      }
    }

    @include screenUp($small){
      border-radius: $borderRadius;
      .slick-list{
        margin-left:-($gutter/2);
        margin-right:-($gutter/2);
      }
    }

    //small format
    &.slick-format-sm{
      .slick-slide{
        margin-left:$gutter-sm/2;
        margin-right:$gutter-sm/2;
      }
      @include screenUp($small){
        .slick-list{
          margin-left:-($gutter-sm/2);
          margin-right:-($gutter-sm/2);
        }
      }
    }

  }
}

//sticky
.product-single__meta{
  padding-top: $spacer;

  {% if settings.sticky_header %}
    top: $heightHeader;
  {% else %}
    top:0px;
  {% endif %}
}

.product-sticky{
  @include screenUp($small){
    @include sticky;
  }
}

//breadcrubs
.breadcrumb{
  @include accentFontStack;
  font-size: $baseFontSize-sm;
  padding: $paddingButtonSmallY 0;
  background-color: $colorDefault;
}

//vendor
.product-single__vendor{
  font-size: $baseFontSize-sm;
  margin-bottom: $headerMarginBottom;
}

//title
.product-single__title {
  word-wrap: break-word;
  @include screen($small){
    font-size: $headerSize3;
  }
}

//price wrapper
.price-wrapper{
  margin-bottom: $spacer;
  padding-bottom: $spacer;
  border-bottom: $borders;
  @include display-flexbox();
  @include align-items(center);

  @include screen($small){
    border:0;
    background-color: $colorDefault;
    padding: $gutter-sm;
    margin-left: -$gutter-sm;
    margin-right: -$gutter-sm;
    padding: $gutter-sm;
  }

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

.product-single__price{
  font-size: 36px !important;
  font-weight: 400 !important;
  color: #8cc300 !important;
  &.on-sale{
    margin-left:$spacer-xs;
  }
}

.product-single__price,
.product-single__price--compare-at {
  font-size: $baseFontSize-lg;
}
.product-single__price--compare-at {
  display: inline-block;
  text-decoration: line-through;
}

//variant
.variant-wrapper{

}
.radio-wrapper{
  @include flex(50%);

  @include screenDown($large){
    @include flex(100%);
  }
}

//product form item
.product-single__form {
    font-family: Oswald !important;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 600;
}

.product-single__form .product-form__item{
  &:not(.product-form__item-radio){
    margin-bottom: $spacer;
  }

  & > label{
    display: block;
    margin-bottom:$spacer-xs;
  }

  .product-form__input{
    width: 100%;
    font-family: Oswald;
    letter-spacing: 1px;
    @include selectSmall;
  }
}

//variant dropdown
.single-option-selector__radio{

}

//variant buttons
.single-option-radio {
  @include inlineList;

  border: 0;
  padding-top: 0;
  position: relative;

  input {
    @include visuallyHidden;

    .lt-ie9 & {
      position: relative;
      height: auto;
      width: auto;
      clip: initial;
    }
  }

  //variant button
  label {
   @include button($colorPrimary,$colorButtonText,outline);

    &.disabled{

      .lt-ie9 & {
        display: none;
      }
    }
  }

  //selected variant button
  input[type='radio']:checked + label {
    @include button($colorPrimary,$colorButtonText);
  }

}

//hide select
.product-single__variants {
  display: none;

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

//quantity wrapper
.product-single__quantity{

}

//button wrapper
.product-single__add-to-cart--full-width {
  width: 100%;
}

.product-single__add-to-cart{
  @include display-inline-flexbox();
  @include flex-wrap(wrap);
  @include align-items(flex-start);

  @include screen($small){
    @include display-flexbox();
  }
}

//add to cart
.btn--add-to-cart{
  margin-bottom: $spacer;
  @include flex(auto);

  @include screen($small){
    @include flex(100%);
  }

  .product-single__add-to-cart--full-width & {
    @include flex(100%);
  }
}

//dynamic unbranded button
.product-single__form .shopify-payment-button .shopify-payment-button__button.shopify-payment-button__button--unbranded{
  @include buttonBase;
  @include button($colorBuy,$colorButtonText, outline);
  {% if settings.button_uppercase %}
  text-transform: uppercase;
  {% endif %}

  {% if settings.buy_now_text != blank %}
    @include removeContent;
    &:before{
      content: "{{ settings.buy_now_text }}";
    }
  {% endif %}
}

//dynamic branded button
.product-single__form .shopify-payment-button .shopify-payment-button__button.shopify-payment-button__button--branded .shopify-cleanslate > div[role='button']{
  border-radius: $borderRadius!important;
  padding: $paddingButtonY $paddingButtonX!important;
}
.shopify-payment-button__button--branded .shopify-cleanslate iframe{
  max-height: $heightInput!important;
}

.shopify-payment-button{
  margin-bottom: $spacer;
  @include flex(auto);

  @include screenUp($small){
    margin-left: $spacer-sm;
  }

  .product-single__add-to-cart--full-width &{
    margin-left: 0px;
  }
}

.shopify-payment-button__button--hidden{
  display:none!important;
}

//more payment option
.shopify-payment-button .shopify-payment-button__more-options{
  @include buttonBase;
  @include buttonSmall;
  @include button($colorDefault,$colorBodyText);
  margin-top:$spacer;

  {% if settings.more_payment_text != blank %}
    @include removeContent;
    &:before{
      content: "{{ settings.more_payment_text }}";
    }
  {% endif %}

  &:hover:not([disabled]){
    text-decoration: unset;
  }
}

//paypal button
.zoid-outlet > iframe.zoid-component-frame{
  z-index: inherit!important;
}

//cart icon
.button-cart-icon{
  @include variantAvailable;
}
.button-soldout-icon{
  @include variantSoldout;
}

.product-tags{
  margin-top: $spacer;

  a:not(:last-child){
    margin-right: $spacer-xs;
  }
}

//back box
.back-box{
  text-align:center;

  //remove border top of following section
  & + *{
    border-top:none!important;
  }

  & + .shopify-section > div{
    border-top:none!important;
  }
}


/*================ _All_collection_template ================*/


/*================ _Blog_template ================*/

//RRS
.rss-link {
  font-size: 0.6em;
}


/*================ _Article_template ================*/

//blog-meta
.blog-meta{
  p{
    .hero__text-content &{
     margin-bottom: $headerMarginBottom;
    }
  }
}

//author
.featured-blog__author {
  display: inline-block;

  & + .featured-blog__date{
    margin-left: $spacer-sm;
  }

  @include screenUp($small){
    .template-article &{
      @include leadFontStack;
    }
  }

  .collection-hero &{
    margin-bottom:0;
  }
}

//date
.featured-blog__date {
  display: inline-block;

  @include screenUp($small){
    .template-article &{
      @include leadFontStack;
    }
  }

  .collection-hero &{
    margin-bottom:0;
  }
}

//Comments
.comment-section{

}
.comment{
  border-bottom: $borders;
  padding: $spacer-sm 0;

  &.last{
     border-bottom: 0px;
     margin-bottom: -($gutter-sm);
  }
}
.comment-author {
}
.comment-date {
  @include accentFontStack;
}

/*============================================================================
  _Pages
==============================================================================*/

/*================ _Password_page ================*/
.template-password{
  position: relative;
  min-height:100vh;
}

//header
.password-page__header{
  text-align:right;

  @include screen($small){
    text-align: center;
  }
}

//content
.password-page__header__inner, .password-page__footer_inner {
  padding: $gutter;
}
.password-page__logo {
  .logo {
    max-width: 100%;
  }
}
.password-page__main {
  width: 100%;
  height: 100%;
  margin: 0 auto;
}
.password-page__message {
  font-style: italic;
  font-size: 120%;

  img {
    max-width: 100%;
  }
}
.password-page__login-form,
.password-page__signup-form {

  .errors ul {
    list-style-type: none;
    margin-left: 0;
  }
}
.lt-ie9 .template-password {
  .newsletter__submit-text--small,
  .password-page__login-form__submit-text--small {
    display: none !important;
  }
}

//footer
.password-page__footer{
  position: absolute;
  bottom:0;
  left:0;
  right:0;
  width:100%;
}
.shopify-logo-svg {
  width: 1.5 * $baseFontSize * 120 / 35;
  height: 1.5 * $baseFontSize;
  display: inline-block;
  line-height: 0;
  vertical-align: top;

  path {
    fill: currentColor;
  }
  .lt-ie9 & {
    display: none;
  }
}
.shopify-name {
  @include visuallyHidden;
}


/*================ _Cart_page ================*/
.cart__row--table-large{
  @include screenUp($small){
    display: table;
    table-layout: fixed;
    width: 100%;

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

//row
.cart__row {
  margin-bottom: $gutter;

  .grid, .grid--full{
    @include screen($medium){
      margin-left: -$gutter-sm;
    }
  }
  .grid__item{
    @include screen($medium){
      padding-left: $gutter-sm;
    }
  }

  .cart-spacer &{
    padding-bottom: $gutter;
    border-bottom: $borders;
  }

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

//product image
.cart__image img{
 background-color: $colorProduct;
}

.cart__product-meta{
  &:not(:last-child){
    margin-bottom: $spacer-xs;
  }
}

.cart__header-labels {
  @include accentFontStack;

  & > .grid-uniform{
    @include align-items(flex-end);
  }
}

.cart-quantity-price{
  @include screen($small){
    margin-top: $gutter-sm;
  }
}

//quantity/price grid
.cart__quantity-grid{
  @include align-items(center);

  &.cart__has-discount{
    @include screen($small){
      @include align-items(flex-start);
    }
  }
}
.cart__quantity-grid__item{
  @include flex(0);
}
.cart__price-grid__item{
  @include flex(1);
}


//cart note
.cart__note-container{
}
.cart__note{

  @include screen($small){
    margin-bottom: $gutter;
  }
}
.cart__note label, .ajaxcart__note label{
  margin-bottom: $spacer-sm;
  display: block;
}

.cart__subtotal{
  margin-bottom: $spacer-sm;
  @include accentFontStack;
}

.cart__savings{
  margin-bottom: $spacer-xs;
}

//update button
.update-cart{
  margin-bottom: $spacer;
}

//checkout button
.cart-checkout{
  margin-bottom: $spacer;
}

.additional_checkout_buttons {
  .dynamic-checkout__content{
    padding-top:$gutter-sm!important;
    @include screenDown($large) {
      padding-top:0!important;
    }
  }

  //button group
  div[data-shopify-buttoncontainer="true"]{
    margin: 0 (-$gutter-sm/2) !important;
    margin-bottom: 0 !important;
  }

  //buttons
  div[data-testid="grid-cell"]{
    @include flex(1!important);
    margin-left:$gutter-sm/2!important;
    margin-right:$gutter-sm/2!important;
    margin-bottom:0!important;

    @include screenDown($large) {
      margin-top:$gutter-sm!important;
    }
  }
}

/*================ _Search_page ================*/
//overrides for IE8 for non-collage grid
.lt-ie9 .grid-uniform .grid-search {
  display: inline-block;
  margin-left: -4px;
  float: none;
}

.grid-search__product {
  position: relative;
  text-align: center;
}

.grid-search__page{
  height: 100%;
}

.grid-search__page-link {
  display: block;
  background-color: $colorDefault;
  border-radius: $borderRadius;
  border: $borders;
  padding: 20px;
  color: $colorBodyText;
  overflow: hidden;
  height: 100%;
}

.grid-search__page-content {
  display: block;
  height: 100%;
  overflow: hidden;
  @include display-flexbox();
  @include justify-content(center);
  @include flex-direction(column);
}

.grid-search__image {
  display: block;
  padding: $spacer;
  margin: 0 auto;
  max-height: 100%;
  max-width: 100%;

  @include at-query($min, $large) {
    position: absolute;
    top: 50%;
    left: 50%;
    @include prefix('transform', 'translate(-50%, -50%)');

    .lt-ie9 {
      position: static;
      @include prefix('transform', 'translate(0, 0)');
    }
  }
}

/*================ _Contact_page ================*/


/*================ _Policies_page ================*/
.shopify-policy__title{
  margin-bottom: $spacer;
  text-align: $textAlignTitle;
}

.shopify-policy__container{
  max-width: 100%!important;
  padding:0px!important;
  @include screen($large){
    max-width: 66.666%!important;
  }
}



/*============================================================================
  _Utilities
==============================================================================*/
.inline{display: inline-block;}
.m-reset{margin:initial;}
.large--auto{
  @include at-query($min, $large){
    width: auto;
  }
}
.visible{
  opacity:1;
  visibility: visible;
}
.show{
  display: block;
}
.lead{@include leadFontStack;}
[disabled],
.disabled{
  cursor: default!Important;
  opacity:$opacity-link-hover!important;
}
.space{display:block;}
.inline-list{@include inlineList;}
.bg-section{background-color: $colorDefault;}
.border-section{border-top: $borders;}
.bg-default{background-color: $colorDefault;}
.text-link {
  @include linkStyle;
}
.mb-0{
  margin-bottom:0!important;

  & > *{
    margin-bottom:0!important;
  }
}
.p-0{
  padding:0px!important;
}
.border-top{border-top:$borders;}
.border-bottom{border-bottom:$borders;}
.line{
  border-bottom: $borders;
}
.auto-spacer{
  @include autoSpacer($spacer);
}
.draggable{
  cursor: move; /* fallback if grab cursor is unsupported */
  cursor: grab;
  cursor: -moz-grab;
  cursor: -webkit-grab;

  &:active{
    cursor: move; /* fallback if grab cursor is unsupported */
    cursor: grab;
    cursor: -moz-grab;
    cursor: -webkit-grab;
    cursor: grabbing;
    cursor: -moz-grabbing;
    cursor: -webkit-grabbing;
  }
}
.bgset{
  @include bgSet;
}
.text-discount{
  @include textDiscount;
}
.money,.ajaxcart__price,.price-wrapper,.grid-product__price,.cart__price{
  @include accentFontStack;
}
.on-sale {
  color: $colorSale;
}

.flex-fill{
  @include flex(auto);
}

//enable image hover effect
{% if settings.image_effect %}
.image-effect,.product--wrapper,.ajaxcart__product-image,.cart__image,.product-single__thumbnail,.collection_grid-link,.link-instagram_feed,.image-link-sales_pop{
  @include imageEffect;
}
{% endif %}
/*============================================================================
  _App_style
==============================================================================*/

/*================ _Review_widget ================*/

//review widget
.review-widget{

}

//review badge
.review-badge{

  & + .product-single__title{
    margin-top: $headerMarginBottom;
  }

  .product-single__title + &{
    margin-bottom: $spacer;
  }

  //product grid
  .grid-product__meta &{

  }
}


/*================ _Product_review ================*/

//review badge
.spr-badge{

}

//review widget
#shopify-product-reviews {

  //box
  @include makeBox;
  margin:0px!important;

  //wrapper
  .spr-container{
    @include makeWrapper($siteWidth);
    border:0px!important;
    padding-top:0px;
    padding-bottom:0px;
  }

  //main title
  .spr-header-title{
    margin-bottom: $headerMarginBottom;
    font-size: $headerSize2;
  }

  //form container
  .spr-form{
    @include animated(fadeIn);
  }

  //write review title
  .spr-form-title{
    margin-bottom: $headerMarginBottom;
    font-size: $headerSize3;
  }

  //write review button
  .spr-summary-actions-newreview{
    @include buttonBase;
    @include button($colorPrimary,$colorButtonText,outline);
    margin-top: $spacer;
  }

  //send review button
  .spr-button{
    @include buttonBase;
    @include button($colorPrimary,$colorButtonText);
  }

  //pagination
  .spr-pagination > div{
    @include pagination;
  }
  .spr-pagination-page{
    &:not(.is-active) a{
      @include paginationButton;
    }

    &.is-active{
      @include paginationActiveButton;
    }
  }

  //other styling
  .new-review-form{
    padding:0;
    border:none;
  }
  .spr-review, .spr-form, .spr-pagination{
    border-top: $borders;
  }
  .spr-header{
    text-align: center;
  }
  .spr-review-content-body,
  .spr-review-header-byline,
  .spr-form-label {
    font-size: inherit;
    line-height: inherit;
  }
  .spr-form-label {
    display: block;
    text-align: left;
  }
  .spr-summary-actions-newreview {
    float: none;
  }
  .spr-summary-caption,
  .spr-summary-actions {
    display: block;
  }
}


/*================ _shopify_digital_downloads ================*/
#digital-downloads-proxy{

  .sdd-download{
    padding: 0px;
  }

  .sdd-download-product{
    line-height: $headerLineHeight;
    margin-bottom: $headerMarginBottom;
    text-rendering: optimizeLegibility;
    color: $colorHeadings;
    @include headerFontStack;
  }

  .sdd-download-file{
    @include leadFontStack;
  }

  .sdd-download .sdd-download-button{
    @include buttonBase;
    @include button($colorPrimary,$colorButtonText,outline);
    font-size: $baseFontSize;
  }
}



/*============================================================================
  _Animate_css
==============================================================================*/
@charset "UTF-8";

/*!
 * animate.css -http://daneden.me/animate
 * Version - 3.7.0
 * Licensed under the MIT license - http://opensource.org/licenses/MIT
 *
 * Copyright (c) 2018 Daniel Eden
 */

@-webkit-keyframes bounce{0%,20%,53%,80%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);-webkit-transform:translateZ(0);animation-timing-function:cubic-bezier(.215,.61,.355,1);transform:translateZ(0)}40%,43%{-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-transform:translate3d(0,-30px,0);animation-timing-function:cubic-bezier(.755,.05,.855,.06);transform:translate3d(0,-30px,0)}70%{-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-transform:translate3d(0,-15px,0);animation-timing-function:cubic-bezier(.755,.05,.855,.06);transform:translate3d(0,-15px,0)}90%{-webkit-transform:translate3d(0,-4px,0);transform:translate3d(0,-4px,0)}}@keyframes bounce{0%,20%,53%,80%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);-webkit-transform:translateZ(0);animation-timing-function:cubic-bezier(.215,.61,.355,1);transform:translateZ(0)}40%,43%{-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-transform:translate3d(0,-30px,0);animation-timing-function:cubic-bezier(.755,.05,.855,.06);transform:translate3d(0,-30px,0)}70%{-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-transform:translate3d(0,-15px,0);animation-timing-function:cubic-bezier(.755,.05,.855,.06);transform:translate3d(0,-15px,0)}90%{-webkit-transform:translate3d(0,-4px,0);transform:translate3d(0,-4px,0)}}.bounce{-webkit-animation-name:bounce;-webkit-transform-origin:center bottom;animation-name:bounce;transform-origin:center bottom}@-webkit-keyframes flash{0%,50%,to{opacity:1}25%,75%{opacity:0}}@keyframes flash{0%,50%,to{opacity:1}25%,75%{opacity:0}}.flash{-webkit-animation-name:flash;animation-name:flash}@-webkit-keyframes pulse{0%{-webkit-transform:scaleX(1);transform:scaleX(1)}50%{-webkit-transform:scale3d(1.05,1.05,1.05);transform:scale3d(1.05,1.05,1.05)}to{-webkit-transform:scaleX(1);transform:scaleX(1)}}@keyframes pulse{0%{-webkit-transform:scaleX(1);transform:scaleX(1)}50%{-webkit-transform:scale3d(1.05,1.05,1.05);transform:scale3d(1.05,1.05,1.05)}to{-webkit-transform:scaleX(1);transform:scaleX(1)}}.pulse{-webkit-animation-name:pulse;animation-name:pulse}@-webkit-keyframes rubberBand{0%{-webkit-transform:scaleX(1);transform:scaleX(1)}30%{-webkit-transform:scale3d(1.25,.75,1);transform:scale3d(1.25,.75,1)}40%{-webkit-transform:scale3d(.75,1.25,1);transform:scale3d(.75,1.25,1)}50%{-webkit-transform:scale3d(1.15,.85,1);transform:scale3d(1.15,.85,1)}65%{-webkit-transform:scale3d(.95,1.05,1);transform:scale3d(.95,1.05,1)}75%{-webkit-transform:scale3d(1.05,.95,1);transform:scale3d(1.05,.95,1)}to{-webkit-transform:scaleX(1);transform:scaleX(1)}}@keyframes rubberBand{0%{-webkit-transform:scaleX(1);transform:scaleX(1)}30%{-webkit-transform:scale3d(1.25,.75,1);transform:scale3d(1.25,.75,1)}40%{-webkit-transform:scale3d(.75,1.25,1);transform:scale3d(.75,1.25,1)}50%{-webkit-transform:scale3d(1.15,.85,1);transform:scale3d(1.15,.85,1)}65%{-webkit-transform:scale3d(.95,1.05,1);transform:scale3d(.95,1.05,1)}75%{-webkit-transform:scale3d(1.05,.95,1);transform:scale3d(1.05,.95,1)}to{-webkit-transform:scaleX(1);transform:scaleX(1)}}.rubberBand{-webkit-animation-name:rubberBand;animation-name:rubberBand}@-webkit-keyframes shake{0%,to{-webkit-transform:translateZ(0);transform:translateZ(0)}10%,30%,50%,70%,90%{-webkit-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}20%,40%,60%,80%{-webkit-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0)}}@keyframes shake{0%,to{-webkit-transform:translateZ(0);transform:translateZ(0)}10%,30%,50%,70%,90%{-webkit-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}20%,40%,60%,80%{-webkit-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0)}}.shake{-webkit-animation-name:shake;animation-name:shake}@-webkit-keyframes headShake{0%{-webkit-transform:translateX(0);transform:translateX(0)}6.5%{-webkit-transform:translateX(-6px) rotateY(-9deg);transform:translateX(-6px) rotateY(-9deg)}18.5%{-webkit-transform:translateX(5px) rotateY(7deg);transform:translateX(5px) rotateY(7deg)}31.5%{-webkit-transform:translateX(-3px) rotateY(-5deg);transform:translateX(-3px) rotateY(-5deg)}43.5%{-webkit-transform:translateX(2px) rotateY(3deg);transform:translateX(2px) rotateY(3deg)}50%{-webkit-transform:translateX(0);transform:translateX(0)}}@keyframes headShake{0%{-webkit-transform:translateX(0);transform:translateX(0)}6.5%{-webkit-transform:translateX(-6px) rotateY(-9deg);transform:translateX(-6px) rotateY(-9deg)}18.5%{-webkit-transform:translateX(5px) rotateY(7deg);transform:translateX(5px) rotateY(7deg)}31.5%{-webkit-transform:translateX(-3px) rotateY(-5deg);transform:translateX(-3px) rotateY(-5deg)}43.5%{-webkit-transform:translateX(2px) rotateY(3deg);transform:translateX(2px) rotateY(3deg)}50%{-webkit-transform:translateX(0);transform:translateX(0)}}.headShake{-webkit-animation-name:headShake;-webkit-animation-timing-function:ease-in-out;animation-name:headShake;animation-timing-function:ease-in-out}@-webkit-keyframes swing{20%{-webkit-transform:rotate(15deg);transform:rotate(15deg)}40%{-webkit-transform:rotate(-10deg);transform:rotate(-10deg)}60%{-webkit-transform:rotate(5deg);transform:rotate(5deg)}80%{-webkit-transform:rotate(-5deg);transform:rotate(-5deg)}to{-webkit-transform:rotate(0deg);transform:rotate(0deg)}}@keyframes swing{20%{-webkit-transform:rotate(15deg);transform:rotate(15deg)}40%{-webkit-transform:rotate(-10deg);transform:rotate(-10deg)}60%{-webkit-transform:rotate(5deg);transform:rotate(5deg)}80%{-webkit-transform:rotate(-5deg);transform:rotate(-5deg)}to{-webkit-transform:rotate(0deg);transform:rotate(0deg)}}.swing{-webkit-animation-name:swing;-webkit-transform-origin:top center;animation-name:swing;transform-origin:top center}@-webkit-keyframes tada{0%{-webkit-transform:scaleX(1);transform:scaleX(1)}10%,20%{-webkit-transform:scale3d(.9,.9,.9) rotate(-3deg);transform:scale3d(.9,.9,.9) rotate(-3deg)}30%,50%,70%,90%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate(3deg);transform:scale3d(1.1,1.1,1.1) rotate(3deg)}40%,60%,80%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate(-3deg);transform:scale3d(1.1,1.1,1.1) rotate(-3deg)}to{-webkit-transform:scaleX(1);transform:scaleX(1)}}@keyframes tada{0%{-webkit-transform:scaleX(1);transform:scaleX(1)}10%,20%{-webkit-transform:scale3d(.9,.9,.9) rotate(-3deg);transform:scale3d(.9,.9,.9) rotate(-3deg)}30%,50%,70%,90%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate(3deg);transform:scale3d(1.1,1.1,1.1) rotate(3deg)}40%,60%,80%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate(-3deg);transform:scale3d(1.1,1.1,1.1) rotate(-3deg)}to{-webkit-transform:scaleX(1);transform:scaleX(1)}}.tada{-webkit-animation-name:tada;animation-name:tada}@-webkit-keyframes wobble{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}15%{-webkit-transform:translate3d(-25%,0,0) rotate(-5deg);transform:translate3d(-25%,0,0) rotate(-5deg)}30%{-webkit-transform:translate3d(20%,0,0) rotate(3deg);transform:translate3d(20%,0,0) rotate(3deg)}45%{-webkit-transform:translate3d(-15%,0,0) rotate(-3deg);transform:translate3d(-15%,0,0) rotate(-3deg)}60%{-webkit-transform:translate3d(10%,0,0) rotate(2deg);transform:translate3d(10%,0,0) rotate(2deg)}75%{-webkit-transform:translate3d(-5%,0,0) rotate(-1deg);transform:translate3d(-5%,0,0) rotate(-1deg)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes wobble{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}15%{-webkit-transform:translate3d(-25%,0,0) rotate(-5deg);transform:translate3d(-25%,0,0) rotate(-5deg)}30%{-webkit-transform:translate3d(20%,0,0) rotate(3deg);transform:translate3d(20%,0,0) rotate(3deg)}45%{-webkit-transform:translate3d(-15%,0,0) rotate(-3deg);transform:translate3d(-15%,0,0) rotate(-3deg)}60%{-webkit-transform:translate3d(10%,0,0) rotate(2deg);transform:translate3d(10%,0,0) rotate(2deg)}75%{-webkit-transform:translate3d(-5%,0,0) rotate(-1deg);transform:translate3d(-5%,0,0) rotate(-1deg)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.wobble{-webkit-animation-name:wobble;animation-name:wobble}@-webkit-keyframes jello{0%,11.1%,to{-webkit-transform:translateZ(0);transform:translateZ(0)}22.2%{-webkit-transform:skewX(-12.5deg) skewY(-12.5deg);transform:skewX(-12.5deg) skewY(-12.5deg)}33.3%{-webkit-transform:skewX(6.25deg) skewY(6.25deg);transform:skewX(6.25deg) skewY(6.25deg)}44.4%{-webkit-transform:skewX(-3.125deg) skewY(-3.125deg);transform:skewX(-3.125deg) skewY(-3.125deg)}55.5%{-webkit-transform:skewX(1.5625deg) skewY(1.5625deg);transform:skewX(1.5625deg) skewY(1.5625deg)}66.6%{-webkit-transform:skewX(-.78125deg) skewY(-.78125deg);transform:skewX(-.78125deg) skewY(-.78125deg)}77.7%{-webkit-transform:skewX(.390625deg) skewY(.390625deg);transform:skewX(.390625deg) skewY(.390625deg)}88.8%{-webkit-transform:skewX(-.1953125deg) skewY(-.1953125deg);transform:skewX(-.1953125deg) skewY(-.1953125deg)}}@keyframes jello{0%,11.1%,to{-webkit-transform:translateZ(0);transform:translateZ(0)}22.2%{-webkit-transform:skewX(-12.5deg) skewY(-12.5deg);transform:skewX(-12.5deg) skewY(-12.5deg)}33.3%{-webkit-transform:skewX(6.25deg) skewY(6.25deg);transform:skewX(6.25deg) skewY(6.25deg)}44.4%{-webkit-transform:skewX(-3.125deg) skewY(-3.125deg);transform:skewX(-3.125deg) skewY(-3.125deg)}55.5%{-webkit-transform:skewX(1.5625deg) skewY(1.5625deg);transform:skewX(1.5625deg) skewY(1.5625deg)}66.6%{-webkit-transform:skewX(-.78125deg) skewY(-.78125deg);transform:skewX(-.78125deg) skewY(-.78125deg)}77.7%{-webkit-transform:skewX(.390625deg) skewY(.390625deg);transform:skewX(.390625deg) skewY(.390625deg)}88.8%{-webkit-transform:skewX(-.1953125deg) skewY(-.1953125deg);transform:skewX(-.1953125deg) skewY(-.1953125deg)}}.jello{-webkit-animation-name:jello;-webkit-transform-origin:center;animation-name:jello;transform-origin:center}@-webkit-keyframes heartBeat{0%{-webkit-transform:scale(1);transform:scale(1)}14%{-webkit-transform:scale(1.3);transform:scale(1.3)}28%{-webkit-transform:scale(1);transform:scale(1)}42%{-webkit-transform:scale(1.3);transform:scale(1.3)}70%{-webkit-transform:scale(1);transform:scale(1)}}@keyframes heartBeat{0%{-webkit-transform:scale(1);transform:scale(1)}14%{-webkit-transform:scale(1.3);transform:scale(1.3)}28%{-webkit-transform:scale(1);transform:scale(1)}42%{-webkit-transform:scale(1.3);transform:scale(1.3)}70%{-webkit-transform:scale(1);transform:scale(1)}}.heartBeat{-webkit-animation-duration:1.3s;-webkit-animation-name:heartBeat;-webkit-animation-timing-function:ease-in-out;animation-duration:1.3s;animation-name:heartBeat;animation-timing-function:ease-in-out}@-webkit-keyframes bounceIn{0%,20%,40%,60%,80%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{-webkit-transform:scale3d(.3,.3,.3);opacity:0;transform:scale3d(.3,.3,.3)}20%{-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}40%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}60%{-webkit-transform:scale3d(1.03,1.03,1.03);opacity:1;transform:scale3d(1.03,1.03,1.03)}80%{-webkit-transform:scale3d(.97,.97,.97);transform:scale3d(.97,.97,.97)}to{-webkit-transform:scaleX(1);opacity:1;transform:scaleX(1)}}@keyframes bounceIn{0%,20%,40%,60%,80%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{-webkit-transform:scale3d(.3,.3,.3);opacity:0;transform:scale3d(.3,.3,.3)}20%{-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}40%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}60%{-webkit-transform:scale3d(1.03,1.03,1.03);opacity:1;transform:scale3d(1.03,1.03,1.03)}80%{-webkit-transform:scale3d(.97,.97,.97);transform:scale3d(.97,.97,.97)}to{-webkit-transform:scaleX(1);opacity:1;transform:scaleX(1)}}.bounceIn{-webkit-animation-duration:.75s;-webkit-animation-name:bounceIn;animation-duration:.75s;animation-name:bounceIn}@-webkit-keyframes bounceInDown{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{-webkit-transform:translate3d(0,-3000px,0);opacity:0;transform:translate3d(0,-3000px,0)}60%{-webkit-transform:translate3d(0,25px,0);opacity:1;transform:translate3d(0,25px,0)}75%{-webkit-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0)}90%{-webkit-transform:translate3d(0,5px,0);transform:translate3d(0,5px,0)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes bounceInDown{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{-webkit-transform:translate3d(0,-3000px,0);opacity:0;transform:translate3d(0,-3000px,0)}60%{-webkit-transform:translate3d(0,25px,0);opacity:1;transform:translate3d(0,25px,0)}75%{-webkit-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0)}90%{-webkit-transform:translate3d(0,5px,0);transform:translate3d(0,5px,0)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.bounceInDown{-webkit-animation-name:bounceInDown;animation-name:bounceInDown}@-webkit-keyframes bounceInLeft{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{-webkit-transform:translate3d(-3000px,0,0);opacity:0;transform:translate3d(-3000px,0,0)}60%{-webkit-transform:translate3d(25px,0,0);opacity:1;transform:translate3d(25px,0,0)}75%{-webkit-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}90%{-webkit-transform:translate3d(5px,0,0);transform:translate3d(5px,0,0)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes bounceInLeft{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{-webkit-transform:translate3d(-3000px,0,0);opacity:0;transform:translate3d(-3000px,0,0)}60%{-webkit-transform:translate3d(25px,0,0);opacity:1;transform:translate3d(25px,0,0)}75%{-webkit-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}90%{-webkit-transform:translate3d(5px,0,0);transform:translate3d(5px,0,0)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.bounceInLeft{-webkit-animation-name:bounceInLeft;animation-name:bounceInLeft}@-webkit-keyframes bounceInRight{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{-webkit-transform:translate3d(3000px,0,0);opacity:0;transform:translate3d(3000px,0,0)}60%{-webkit-transform:translate3d(-25px,0,0);opacity:1;transform:translate3d(-25px,0,0)}75%{-webkit-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0)}90%{-webkit-transform:translate3d(-5px,0,0);transform:translate3d(-5px,0,0)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes bounceInRight{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{-webkit-transform:translate3d(3000px,0,0);opacity:0;transform:translate3d(3000px,0,0)}60%{-webkit-transform:translate3d(-25px,0,0);opacity:1;transform:translate3d(-25px,0,0)}75%{-webkit-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0)}90%{-webkit-transform:translate3d(-5px,0,0);transform:translate3d(-5px,0,0)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.bounceInRight{-webkit-animation-name:bounceInRight;animation-name:bounceInRight}@-webkit-keyframes bounceInUp{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{-webkit-transform:translate3d(0,3000px,0);opacity:0;transform:translate3d(0,3000px,0)}60%{-webkit-transform:translate3d(0,-20px,0);opacity:1;transform:translate3d(0,-20px,0)}75%{-webkit-transform:translate3d(0,10px,0);transform:translate3d(0,10px,0)}90%{-webkit-transform:translate3d(0,-5px,0);transform:translate3d(0,-5px,0)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes bounceInUp{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{-webkit-transform:translate3d(0,3000px,0);opacity:0;transform:translate3d(0,3000px,0)}60%{-webkit-transform:translate3d(0,-20px,0);opacity:1;transform:translate3d(0,-20px,0)}75%{-webkit-transform:translate3d(0,10px,0);transform:translate3d(0,10px,0)}90%{-webkit-transform:translate3d(0,-5px,0);transform:translate3d(0,-5px,0)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.bounceInUp{-webkit-animation-name:bounceInUp;animation-name:bounceInUp}@-webkit-keyframes bounceOut{20%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}50%,55%{-webkit-transform:scale3d(1.1,1.1,1.1);opacity:1;transform:scale3d(1.1,1.1,1.1)}to{-webkit-transform:scale3d(.3,.3,.3);opacity:0;transform:scale3d(.3,.3,.3)}}@keyframes bounceOut{20%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}50%,55%{-webkit-transform:scale3d(1.1,1.1,1.1);opacity:1;transform:scale3d(1.1,1.1,1.1)}to{-webkit-transform:scale3d(.3,.3,.3);opacity:0;transform:scale3d(.3,.3,.3)}}.bounceOut{-webkit-animation-duration:.75s;-webkit-animation-name:bounceOut;animation-duration:.75s;animation-name:bounceOut}@-webkit-keyframes bounceOutDown{20%{-webkit-transform:translate3d(0,10px,0);transform:translate3d(0,10px,0)}40%,45%{-webkit-transform:translate3d(0,-20px,0);opacity:1;transform:translate3d(0,-20px,0)}to{-webkit-transform:translate3d(0,2000px,0);opacity:0;transform:translate3d(0,2000px,0)}}@keyframes bounceOutDown{20%{-webkit-transform:translate3d(0,10px,0);transform:translate3d(0,10px,0)}40%,45%{-webkit-transform:translate3d(0,-20px,0);opacity:1;transform:translate3d(0,-20px,0)}to{-webkit-transform:translate3d(0,2000px,0);opacity:0;transform:translate3d(0,2000px,0)}}.bounceOutDown{-webkit-animation-name:bounceOutDown;animation-name:bounceOutDown}@-webkit-keyframes bounceOutLeft{20%{-webkit-transform:translate3d(20px,0,0);opacity:1;transform:translate3d(20px,0,0)}to{-webkit-transform:translate3d(-2000px,0,0);opacity:0;transform:translate3d(-2000px,0,0)}}@keyframes bounceOutLeft{20%{-webkit-transform:translate3d(20px,0,0);opacity:1;transform:translate3d(20px,0,0)}to{-webkit-transform:translate3d(-2000px,0,0);opacity:0;transform:translate3d(-2000px,0,0)}}.bounceOutLeft{-webkit-animation-name:bounceOutLeft;animation-name:bounceOutLeft}@-webkit-keyframes bounceOutRight{20%{-webkit-transform:translate3d(-20px,0,0);opacity:1;transform:translate3d(-20px,0,0)}to{-webkit-transform:translate3d(2000px,0,0);opacity:0;transform:translate3d(2000px,0,0)}}@keyframes bounceOutRight{20%{-webkit-transform:translate3d(-20px,0,0);opacity:1;transform:translate3d(-20px,0,0)}to{-webkit-transform:translate3d(2000px,0,0);opacity:0;transform:translate3d(2000px,0,0)}}.bounceOutRight{-webkit-animation-name:bounceOutRight;animation-name:bounceOutRight}@-webkit-keyframes bounceOutUp{20%{-webkit-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0)}40%,45%{-webkit-transform:translate3d(0,20px,0);opacity:1;transform:translate3d(0,20px,0)}to{-webkit-transform:translate3d(0,-2000px,0);opacity:0;transform:translate3d(0,-2000px,0)}}@keyframes bounceOutUp{20%{-webkit-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0)}40%,45%{-webkit-transform:translate3d(0,20px,0);opacity:1;transform:translate3d(0,20px,0)}to{-webkit-transform:translate3d(0,-2000px,0);opacity:0;transform:translate3d(0,-2000px,0)}}.bounceOutUp{-webkit-animation-name:bounceOutUp;animation-name:bounceOutUp}@-webkit-keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.fadeIn{-webkit-animation-name:fadeIn;animation-name:fadeIn}@-webkit-keyframes fadeInDown{0%{-webkit-transform:translate3d(0,-100%,0);opacity:0;transform:translate3d(0,-100%,0)}to{-webkit-transform:translateZ(0);opacity:1;transform:translateZ(0)}}@keyframes fadeInDown{0%{-webkit-transform:translate3d(0,-100%,0);opacity:0;transform:translate3d(0,-100%,0)}to{-webkit-transform:translateZ(0);opacity:1;transform:translateZ(0)}}.fadeInDown{-webkit-animation-name:fadeInDown;animation-name:fadeInDown}@-webkit-keyframes fadeInDownBig{0%{-webkit-transform:translate3d(0,-2000px,0);opacity:0;transform:translate3d(0,-2000px,0)}to{-webkit-transform:translateZ(0);opacity:1;transform:translateZ(0)}}@keyframes fadeInDownBig{0%{-webkit-transform:translate3d(0,-2000px,0);opacity:0;transform:translate3d(0,-2000px,0)}to{-webkit-transform:translateZ(0);opacity:1;transform:translateZ(0)}}.fadeInDownBig{-webkit-animation-name:fadeInDownBig;animation-name:fadeInDownBig}@-webkit-keyframes fadeInLeft{0%{-webkit-transform:translate3d(-100%,0,0);opacity:0;transform:translate3d(-100%,0,0)}to{-webkit-transform:translateZ(0);opacity:1;transform:translateZ(0)}}@keyframes fadeInLeft{0%{-webkit-transform:translate3d(-100%,0,0);opacity:0;transform:translate3d(-100%,0,0)}to{-webkit-transform:translateZ(0);opacity:1;transform:translateZ(0)}}.fadeInLeft{-webkit-animation-name:fadeInLeft;animation-name:fadeInLeft}@-webkit-keyframes fadeInLeftBig{0%{-webkit-transform:translate3d(-2000px,0,0);opacity:0;transform:translate3d(-2000px,0,0)}to{-webkit-transform:translateZ(0);opacity:1;transform:translateZ(0)}}@keyframes fadeInLeftBig{0%{-webkit-transform:translate3d(-2000px,0,0);opacity:0;transform:translate3d(-2000px,0,0)}to{-webkit-transform:translateZ(0);opacity:1;transform:translateZ(0)}}.fadeInLeftBig{-webkit-animation-name:fadeInLeftBig;animation-name:fadeInLeftBig}@-webkit-keyframes fadeInRight{0%{-webkit-transform:translate3d(100%,0,0);opacity:0;transform:translate3d(100%,0,0)}to{-webkit-transform:translateZ(0);opacity:1;transform:translateZ(0)}}@keyframes fadeInRight{0%{-webkit-transform:translate3d(100%,0,0);opacity:0;transform:translate3d(100%,0,0)}to{-webkit-transform:translateZ(0);opacity:1;transform:translateZ(0)}}.fadeInRight{-webkit-animation-name:fadeInRight;animation-name:fadeInRight}@-webkit-keyframes fadeInRightBig{0%{-webkit-transform:translate3d(2000px,0,0);opacity:0;transform:translate3d(2000px,0,0)}to{-webkit-transform:translateZ(0);opacity:1;transform:translateZ(0)}}@keyframes fadeInRightBig{0%{-webkit-transform:translate3d(2000px,0,0);opacity:0;transform:translate3d(2000px,0,0)}to{-webkit-transform:translateZ(0);opacity:1;transform:translateZ(0)}}.fadeInRightBig{-webkit-animation-name:fadeInRightBig;animation-name:fadeInRightBig}@-webkit-keyframes fadeInUp{0%{-webkit-transform:translate3d(0,100%,0);opacity:0;transform:translate3d(0,100%,0)}to{-webkit-transform:translateZ(0);opacity:1;transform:translateZ(0)}}@keyframes fadeInUp{0%{-webkit-transform:translate3d(0,100%,0);opacity:0;transform:translate3d(0,100%,0)}to{-webkit-transform:translateZ(0);opacity:1;transform:translateZ(0)}}.fadeInUp{-webkit-animation-name:fadeInUp;animation-name:fadeInUp}@-webkit-keyframes fadeInUpBig{0%{-webkit-transform:translate3d(0,2000px,0);opacity:0;transform:translate3d(0,2000px,0)}to{-webkit-transform:translateZ(0);opacity:1;transform:translateZ(0)}}@keyframes fadeInUpBig{0%{-webkit-transform:translate3d(0,2000px,0);opacity:0;transform:translate3d(0,2000px,0)}to{-webkit-transform:translateZ(0);opacity:1;transform:translateZ(0)}}.fadeInUpBig{-webkit-animation-name:fadeInUpBig;animation-name:fadeInUpBig}@-webkit-keyframes fadeOut{0%{opacity:1}to{opacity:0}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}.fadeOut{-webkit-animation-name:fadeOut;animation-name:fadeOut}@-webkit-keyframes fadeOutDown{0%{opacity:1}to{-webkit-transform:translate3d(0,100%,0);opacity:0;transform:translate3d(0,100%,0)}}@keyframes fadeOutDown{0%{opacity:1}to{-webkit-transform:translate3d(0,100%,0);opacity:0;transform:translate3d(0,100%,0)}}.fadeOutDown{-webkit-animation-name:fadeOutDown;animation-name:fadeOutDown}@-webkit-keyframes fadeOutDownBig{0%{opacity:1}to{-webkit-transform:translate3d(0,2000px,0);opacity:0;transform:translate3d(0,2000px,0)}}@keyframes fadeOutDownBig{0%{opacity:1}to{-webkit-transform:translate3d(0,2000px,0);opacity:0;transform:translate3d(0,2000px,0)}}.fadeOutDownBig{-webkit-animation-name:fadeOutDownBig;animation-name:fadeOutDownBig}@-webkit-keyframes fadeOutLeft{0%{opacity:1}to{-webkit-transform:translate3d(-100%,0,0);opacity:0;transform:translate3d(-100%,0,0)}}@keyframes fadeOutLeft{0%{opacity:1}to{-webkit-transform:translate3d(-100%,0,0);opacity:0;transform:translate3d(-100%,0,0)}}.fadeOutLeft{-webkit-animation-name:fadeOutLeft;animation-name:fadeOutLeft}@-webkit-keyframes fadeOutLeftBig{0%{opacity:1}to{-webkit-transform:translate3d(-2000px,0,0);opacity:0;transform:translate3d(-2000px,0,0)}}@keyframes fadeOutLeftBig{0%{opacity:1}to{-webkit-transform:translate3d(-2000px,0,0);opacity:0;transform:translate3d(-2000px,0,0)}}.fadeOutLeftBig{-webkit-animation-name:fadeOutLeftBig;animation-name:fadeOutLeftBig}@-webkit-keyframes fadeOutRight{0%{opacity:1}to{-webkit-transform:translate3d(100%,0,0);opacity:0;transform:translate3d(100%,0,0)}}@keyframes fadeOutRight{0%{opacity:1}to{-webkit-transform:translate3d(100%,0,0);opacity:0;transform:translate3d(100%,0,0)}}.fadeOutRight{-webkit-animation-name:fadeOutRight;animation-name:fadeOutRight}@-webkit-keyframes fadeOutRightBig{0%{opacity:1}to{-webkit-transform:translate3d(2000px,0,0);opacity:0;transform:translate3d(2000px,0,0)}}@keyframes fadeOutRightBig{0%{opacity:1}to{-webkit-transform:translate3d(2000px,0,0);opacity:0;transform:translate3d(2000px,0,0)}}.fadeOutRightBig{-webkit-animation-name:fadeOutRightBig;animation-name:fadeOutRightBig}@-webkit-keyframes fadeOutUp{0%{opacity:1}to{-webkit-transform:translate3d(0,-100%,0);opacity:0;transform:translate3d(0,-100%,0)}}@keyframes fadeOutUp{0%{opacity:1}to{-webkit-transform:translate3d(0,-100%,0);opacity:0;transform:translate3d(0,-100%,0)}}.fadeOutUp{-webkit-animation-name:fadeOutUp;animation-name:fadeOutUp}@-webkit-keyframes fadeOutUpBig{0%{opacity:1}to{-webkit-transform:translate3d(0,-2000px,0);opacity:0;transform:translate3d(0,-2000px,0)}}@keyframes fadeOutUpBig{0%{opacity:1}to{-webkit-transform:translate3d(0,-2000px,0);opacity:0;transform:translate3d(0,-2000px,0)}}.fadeOutUpBig{-webkit-animation-name:fadeOutUpBig;animation-name:fadeOutUpBig}@-webkit-keyframes flip{0%{-webkit-animation-timing-function:ease-out;-webkit-transform:perspective(400px) scaleX(1) translateZ(0) rotateY(-1turn);animation-timing-function:ease-out;transform:perspective(400px) scaleX(1) translateZ(0) rotateY(-1turn)}40%{-webkit-animation-timing-function:ease-out;-webkit-transform:perspective(400px) scaleX(1) translateZ(150px) rotateY(-190deg);animation-timing-function:ease-out;transform:perspective(400px) scaleX(1) translateZ(150px) rotateY(-190deg)}50%{-webkit-animation-timing-function:ease-in;-webkit-transform:perspective(400px) scaleX(1) translateZ(150px) rotateY(-170deg);animation-timing-function:ease-in;transform:perspective(400px) scaleX(1) translateZ(150px) rotateY(-170deg)}80%{-webkit-animation-timing-function:ease-in;-webkit-transform:perspective(400px) scale3d(.95,.95,.95) translateZ(0) rotateY(0deg);animation-timing-function:ease-in;transform:perspective(400px) scale3d(.95,.95,.95) translateZ(0) rotateY(0deg)}to{-webkit-animation-timing-function:ease-in;-webkit-transform:perspective(400px) scaleX(1) translateZ(0) rotateY(0deg);animation-timing-function:ease-in;transform:perspective(400px) scaleX(1) translateZ(0) rotateY(0deg)}}@keyframes flip{0%{-webkit-animation-timing-function:ease-out;-webkit-transform:perspective(400px) scaleX(1) translateZ(0) rotateY(-1turn);animation-timing-function:ease-out;transform:perspective(400px) scaleX(1) translateZ(0) rotateY(-1turn)}40%{-webkit-animation-timing-function:ease-out;-webkit-transform:perspective(400px) scaleX(1) translateZ(150px) rotateY(-190deg);animation-timing-function:ease-out;transform:perspective(400px) scaleX(1) translateZ(150px) rotateY(-190deg)}50%{-webkit-animation-timing-function:ease-in;-webkit-transform:perspective(400px) scaleX(1) translateZ(150px) rotateY(-170deg);animation-timing-function:ease-in;transform:perspective(400px) scaleX(1) translateZ(150px) rotateY(-170deg)}80%{-webkit-animation-timing-function:ease-in;-webkit-transform:perspective(400px) scale3d(.95,.95,.95) translateZ(0) rotateY(0deg);animation-timing-function:ease-in;transform:perspective(400px) scale3d(.95,.95,.95) translateZ(0) rotateY(0deg)}to{-webkit-animation-timing-function:ease-in;-webkit-transform:perspective(400px) scaleX(1) translateZ(0) rotateY(0deg);animation-timing-function:ease-in;transform:perspective(400px) scaleX(1) translateZ(0) rotateY(0deg)}}.animated.flip{-webkit-animation-name:flip;-webkit-backface-visibility:visible;animation-name:flip;backface-visibility:visible}@-webkit-keyframes flipInX{0%{-webkit-animation-timing-function:ease-in;-webkit-transform:perspective(400px) rotateX(90deg);animation-timing-function:ease-in;opacity:0;transform:perspective(400px) rotateX(90deg)}40%{-webkit-animation-timing-function:ease-in;-webkit-transform:perspective(400px) rotateX(-20deg);animation-timing-function:ease-in;transform:perspective(400px) rotateX(-20deg)}60%{-webkit-transform:perspective(400px) rotateX(10deg);opacity:1;transform:perspective(400px) rotateX(10deg)}80%{-webkit-transform:perspective(400px) rotateX(-5deg);transform:perspective(400px) rotateX(-5deg)}to{-webkit-transform:perspective(400px);transform:perspective(400px)}}@keyframes flipInX{0%{-webkit-animation-timing-function:ease-in;-webkit-transform:perspective(400px) rotateX(90deg);animation-timing-function:ease-in;opacity:0;transform:perspective(400px) rotateX(90deg)}40%{-webkit-animation-timing-function:ease-in;-webkit-transform:perspective(400px) rotateX(-20deg);animation-timing-function:ease-in;transform:perspective(400px) rotateX(-20deg)}60%{-webkit-transform:perspective(400px) rotateX(10deg);opacity:1;transform:perspective(400px) rotateX(10deg)}80%{-webkit-transform:perspective(400px) rotateX(-5deg);transform:perspective(400px) rotateX(-5deg)}to{-webkit-transform:perspective(400px);transform:perspective(400px)}}.flipInX{-webkit-animation-name:flipInX;-webkit-backface-visibility:visible!important;animation-name:flipInX;backface-visibility:visible!important}@-webkit-keyframes flipInY{0%{-webkit-animation-timing-function:ease-in;-webkit-transform:perspective(400px) rotateY(90deg);animation-timing-function:ease-in;opacity:0;transform:perspective(400px) rotateY(90deg)}40%{-webkit-animation-timing-function:ease-in;-webkit-transform:perspective(400px) rotateY(-20deg);animation-timing-function:ease-in;transform:perspective(400px) rotateY(-20deg)}60%{-webkit-transform:perspective(400px) rotateY(10deg);opacity:1;transform:perspective(400px) rotateY(10deg)}80%{-webkit-transform:perspective(400px) rotateY(-5deg);transform:perspective(400px) rotateY(-5deg)}to{-webkit-transform:perspective(400px);transform:perspective(400px)}}@keyframes flipInY{0%{-webkit-animation-timing-function:ease-in;-webkit-transform:perspective(400px) rotateY(90deg);animation-timing-function:ease-in;opacity:0;transform:perspective(400px) rotateY(90deg)}40%{-webkit-animation-timing-function:ease-in;-webkit-transform:perspective(400px) rotateY(-20deg);animation-timing-function:ease-in;transform:perspective(400px) rotateY(-20deg)}60%{-webkit-transform:perspective(400px) rotateY(10deg);opacity:1;transform:perspective(400px) rotateY(10deg)}80%{-webkit-transform:perspective(400px) rotateY(-5deg);transform:perspective(400px) rotateY(-5deg)}to{-webkit-transform:perspective(400px);transform:perspective(400px)}}.flipInY{-webkit-animation-name:flipInY;-webkit-backface-visibility:visible!important;animation-name:flipInY;backface-visibility:visible!important}@-webkit-keyframes flipOutX{0%{-webkit-transform:perspective(400px);transform:perspective(400px)}30%{-webkit-transform:perspective(400px) rotateX(-20deg);opacity:1;transform:perspective(400px) rotateX(-20deg)}to{-webkit-transform:perspective(400px) rotateX(90deg);opacity:0;transform:perspective(400px) rotateX(90deg)}}@keyframes flipOutX{0%{-webkit-transform:perspective(400px);transform:perspective(400px)}30%{-webkit-transform:perspective(400px) rotateX(-20deg);opacity:1;transform:perspective(400px) rotateX(-20deg)}to{-webkit-transform:perspective(400px) rotateX(90deg);opacity:0;transform:perspective(400px) rotateX(90deg)}}.flipOutX{-webkit-animation-duration:.75s;-webkit-animation-name:flipOutX;-webkit-backface-visibility:visible!important;animation-duration:.75s;animation-name:flipOutX;backface-visibility:visible!important}@-webkit-keyframes flipOutY{0%{-webkit-transform:perspective(400px);transform:perspective(400px)}30%{-webkit-transform:perspective(400px) rotateY(-15deg);opacity:1;transform:perspective(400px) rotateY(-15deg)}to{-webkit-transform:perspective(400px) rotateY(90deg);opacity:0;transform:perspective(400px) rotateY(90deg)}}@keyframes flipOutY{0%{-webkit-transform:perspective(400px);transform:perspective(400px)}30%{-webkit-transform:perspective(400px) rotateY(-15deg);opacity:1;transform:perspective(400px) rotateY(-15deg)}to{-webkit-transform:perspective(400px) rotateY(90deg);opacity:0;transform:perspective(400px) rotateY(90deg)}}.flipOutY{-webkit-animation-duration:.75s;-webkit-animation-name:flipOutY;-webkit-backface-visibility:visible!important;animation-duration:.75s;animation-name:flipOutY;backface-visibility:visible!important}@-webkit-keyframes lightSpeedIn{0%{-webkit-transform:translate3d(100%,0,0) skewX(-30deg);opacity:0;transform:translate3d(100%,0,0) skewX(-30deg)}60%{-webkit-transform:skewX(20deg);opacity:1;transform:skewX(20deg)}80%{-webkit-transform:skewX(-5deg);transform:skewX(-5deg)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes lightSpeedIn{0%{-webkit-transform:translate3d(100%,0,0) skewX(-30deg);opacity:0;transform:translate3d(100%,0,0) skewX(-30deg)}60%{-webkit-transform:skewX(20deg);opacity:1;transform:skewX(20deg)}80%{-webkit-transform:skewX(-5deg);transform:skewX(-5deg)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.lightSpeedIn{-webkit-animation-name:lightSpeedIn;-webkit-animation-timing-function:ease-out;animation-name:lightSpeedIn;animation-timing-function:ease-out}@-webkit-keyframes lightSpeedOut{0%{opacity:1}to{-webkit-transform:translate3d(100%,0,0) skewX(30deg);opacity:0;transform:translate3d(100%,0,0) skewX(30deg)}}@keyframes lightSpeedOut{0%{opacity:1}to{-webkit-transform:translate3d(100%,0,0) skewX(30deg);opacity:0;transform:translate3d(100%,0,0) skewX(30deg)}}.lightSpeedOut{-webkit-animation-name:lightSpeedOut;-webkit-animation-timing-function:ease-in;animation-name:lightSpeedOut;animation-timing-function:ease-in}@-webkit-keyframes rotateIn{0%{-webkit-transform:rotate(-200deg);-webkit-transform-origin:center;opacity:0;transform:rotate(-200deg);transform-origin:center}to{-webkit-transform:translateZ(0);-webkit-transform-origin:center;opacity:1;transform:translateZ(0);transform-origin:center}}@keyframes rotateIn{0%{-webkit-transform:rotate(-200deg);-webkit-transform-origin:center;opacity:0;transform:rotate(-200deg);transform-origin:center}to{-webkit-transform:translateZ(0);-webkit-transform-origin:center;opacity:1;transform:translateZ(0);transform-origin:center}}.rotateIn{-webkit-animation-name:rotateIn;animation-name:rotateIn}@-webkit-keyframes rotateInDownLeft{0%{-webkit-transform:rotate(-45deg);-webkit-transform-origin:left bottom;opacity:0;transform:rotate(-45deg);transform-origin:left bottom}to{-webkit-transform:translateZ(0);-webkit-transform-origin:left bottom;opacity:1;transform:translateZ(0);transform-origin:left bottom}}@keyframes rotateInDownLeft{0%{-webkit-transform:rotate(-45deg);-webkit-transform-origin:left bottom;opacity:0;transform:rotate(-45deg);transform-origin:left bottom}to{-webkit-transform:translateZ(0);-webkit-transform-origin:left bottom;opacity:1;transform:translateZ(0);transform-origin:left bottom}}.rotateInDownLeft{-webkit-animation-name:rotateInDownLeft;animation-name:rotateInDownLeft}@-webkit-keyframes rotateInDownRight{0%{-webkit-transform:rotate(45deg);-webkit-transform-origin:right bottom;opacity:0;transform:rotate(45deg);transform-origin:right bottom}to{-webkit-transform:translateZ(0);-webkit-transform-origin:right bottom;opacity:1;transform:translateZ(0);transform-origin:right bottom}}@keyframes rotateInDownRight{0%{-webkit-transform:rotate(45deg);-webkit-transform-origin:right bottom;opacity:0;transform:rotate(45deg);transform-origin:right bottom}to{-webkit-transform:translateZ(0);-webkit-transform-origin:right bottom;opacity:1;transform:translateZ(0);transform-origin:right bottom}}.rotateInDownRight{-webkit-animation-name:rotateInDownRight;animation-name:rotateInDownRight}@-webkit-keyframes rotateInUpLeft{0%{-webkit-transform:rotate(45deg);-webkit-transform-origin:left bottom;opacity:0;transform:rotate(45deg);transform-origin:left bottom}to{-webkit-transform:translateZ(0);-webkit-transform-origin:left bottom;opacity:1;transform:translateZ(0);transform-origin:left bottom}}@keyframes rotateInUpLeft{0%{-webkit-transform:rotate(45deg);-webkit-transform-origin:left bottom;opacity:0;transform:rotate(45deg);transform-origin:left bottom}to{-webkit-transform:translateZ(0);-webkit-transform-origin:left bottom;opacity:1;transform:translateZ(0);transform-origin:left bottom}}.rotateInUpLeft{-webkit-animation-name:rotateInUpLeft;animation-name:rotateInUpLeft}@-webkit-keyframes rotateInUpRight{0%{-webkit-transform:rotate(-90deg);-webkit-transform-origin:right bottom;opacity:0;transform:rotate(-90deg);transform-origin:right bottom}to{-webkit-transform:translateZ(0);-webkit-transform-origin:right bottom;opacity:1;transform:translateZ(0);transform-origin:right bottom}}@keyframes rotateInUpRight{0%{-webkit-transform:rotate(-90deg);-webkit-transform-origin:right bottom;opacity:0;transform:rotate(-90deg);transform-origin:right bottom}to{-webkit-transform:translateZ(0);-webkit-transform-origin:right bottom;opacity:1;transform:translateZ(0);transform-origin:right bottom}}.rotateInUpRight{-webkit-animation-name:rotateInUpRight;animation-name:rotateInUpRight}@-webkit-keyframes rotateOut{0%{-webkit-transform-origin:center;opacity:1;transform-origin:center}to{-webkit-transform:rotate(200deg);-webkit-transform-origin:center;opacity:0;transform:rotate(200deg);transform-origin:center}}@keyframes rotateOut{0%{-webkit-transform-origin:center;opacity:1;transform-origin:center}to{-webkit-transform:rotate(200deg);-webkit-transform-origin:center;opacity:0;transform:rotate(200deg);transform-origin:center}}.rotateOut{-webkit-animation-name:rotateOut;animation-name:rotateOut}@-webkit-keyframes rotateOutDownLeft{0%{-webkit-transform-origin:left bottom;opacity:1;transform-origin:left bottom}to{-webkit-transform:rotate(45deg);-webkit-transform-origin:left bottom;opacity:0;transform:rotate(45deg);transform-origin:left bottom}}@keyframes rotateOutDownLeft{0%{-webkit-transform-origin:left bottom;opacity:1;transform-origin:left bottom}to{-webkit-transform:rotate(45deg);-webkit-transform-origin:left bottom;opacity:0;transform:rotate(45deg);transform-origin:left bottom}}.rotateOutDownLeft{-webkit-animation-name:rotateOutDownLeft;animation-name:rotateOutDownLeft}@-webkit-keyframes rotateOutDownRight{0%{-webkit-transform-origin:right bottom;opacity:1;transform-origin:right bottom}to{-webkit-transform:rotate(-45deg);-webkit-transform-origin:right bottom;opacity:0;transform:rotate(-45deg);transform-origin:right bottom}}@keyframes rotateOutDownRight{0%{-webkit-transform-origin:right bottom;opacity:1;transform-origin:right bottom}to{-webkit-transform:rotate(-45deg);-webkit-transform-origin:right bottom;opacity:0;transform:rotate(-45deg);transform-origin:right bottom}}.rotateOutDownRight{-webkit-animation-name:rotateOutDownRight;animation-name:rotateOutDownRight}@-webkit-keyframes rotateOutUpLeft{0%{-webkit-transform-origin:left bottom;opacity:1;transform-origin:left bottom}to{-webkit-transform:rotate(-45deg);-webkit-transform-origin:left bottom;opacity:0;transform:rotate(-45deg);transform-origin:left bottom}}@keyframes rotateOutUpLeft{0%{-webkit-transform-origin:left bottom;opacity:1;transform-origin:left bottom}to{-webkit-transform:rotate(-45deg);-webkit-transform-origin:left bottom;opacity:0;transform:rotate(-45deg);transform-origin:left bottom}}.rotateOutUpLeft{-webkit-animation-name:rotateOutUpLeft;animation-name:rotateOutUpLeft}@-webkit-keyframes rotateOutUpRight{0%{-webkit-transform-origin:right bottom;opacity:1;transform-origin:right bottom}to{-webkit-transform:rotate(90deg);-webkit-transform-origin:right bottom;opacity:0;transform:rotate(90deg);transform-origin:right bottom}}@keyframes rotateOutUpRight{0%{-webkit-transform-origin:right bottom;opacity:1;transform-origin:right bottom}to{-webkit-transform:rotate(90deg);-webkit-transform-origin:right bottom;opacity:0;transform:rotate(90deg);transform-origin:right bottom}}.rotateOutUpRight{-webkit-animation-name:rotateOutUpRight;animation-name:rotateOutUpRight}@-webkit-keyframes hinge{0%{-webkit-animation-timing-function:ease-in-out;-webkit-transform-origin:top left;animation-timing-function:ease-in-out;transform-origin:top left}20%,60%{-webkit-animation-timing-function:ease-in-out;-webkit-transform:rotate(80deg);-webkit-transform-origin:top left;animation-timing-function:ease-in-out;transform:rotate(80deg);transform-origin:top left}40%,80%{-webkit-animation-timing-function:ease-in-out;-webkit-transform:rotate(60deg);-webkit-transform-origin:top left;animation-timing-function:ease-in-out;opacity:1;transform:rotate(60deg);transform-origin:top left}to{-webkit-transform:translate3d(0,700px,0);opacity:0;transform:translate3d(0,700px,0)}}@keyframes hinge{0%{-webkit-animation-timing-function:ease-in-out;-webkit-transform-origin:top left;animation-timing-function:ease-in-out;transform-origin:top left}20%,60%{-webkit-animation-timing-function:ease-in-out;-webkit-transform:rotate(80deg);-webkit-transform-origin:top left;animation-timing-function:ease-in-out;transform:rotate(80deg);transform-origin:top left}40%,80%{-webkit-animation-timing-function:ease-in-out;-webkit-transform:rotate(60deg);-webkit-transform-origin:top left;animation-timing-function:ease-in-out;opacity:1;transform:rotate(60deg);transform-origin:top left}to{-webkit-transform:translate3d(0,700px,0);opacity:0;transform:translate3d(0,700px,0)}}.hinge{-webkit-animation-duration:2s;-webkit-animation-name:hinge;animation-duration:2s;animation-name:hinge}@-webkit-keyframes jackInTheBox{0%{-webkit-transform:scale(.1) rotate(30deg);-webkit-transform-origin:center bottom;opacity:0;transform:scale(.1) rotate(30deg);transform-origin:center bottom}50%{-webkit-transform:rotate(-10deg);transform:rotate(-10deg)}70%{-webkit-transform:rotate(3deg);transform:rotate(3deg)}to{-webkit-transform:scale(1);opacity:1;transform:scale(1)}}@keyframes jackInTheBox{0%{-webkit-transform:scale(.1) rotate(30deg);-webkit-transform-origin:center bottom;opacity:0;transform:scale(.1) rotate(30deg);transform-origin:center bottom}50%{-webkit-transform:rotate(-10deg);transform:rotate(-10deg)}70%{-webkit-transform:rotate(3deg);transform:rotate(3deg)}to{-webkit-transform:scale(1);opacity:1;transform:scale(1)}}.jackInTheBox{-webkit-animation-name:jackInTheBox;animation-name:jackInTheBox}@-webkit-keyframes rollIn{0%{-webkit-transform:translate3d(-100%,0,0) rotate(-120deg);opacity:0;transform:translate3d(-100%,0,0) rotate(-120deg)}to{-webkit-transform:translateZ(0);opacity:1;transform:translateZ(0)}}@keyframes rollIn{0%{-webkit-transform:translate3d(-100%,0,0) rotate(-120deg);opacity:0;transform:translate3d(-100%,0,0) rotate(-120deg)}to{-webkit-transform:translateZ(0);opacity:1;transform:translateZ(0)}}.rollIn{-webkit-animation-name:rollIn;animation-name:rollIn}@-webkit-keyframes rollOut{0%{opacity:1}to{-webkit-transform:translate3d(100%,0,0) rotate(120deg);opacity:0;transform:translate3d(100%,0,0) rotate(120deg)}}@keyframes rollOut{0%{opacity:1}to{-webkit-transform:translate3d(100%,0,0) rotate(120deg);opacity:0;transform:translate3d(100%,0,0) rotate(120deg)}}.rollOut{-webkit-animation-name:rollOut;animation-name:rollOut}@-webkit-keyframes zoomIn{0%{-webkit-transform:scale3d(.3,.3,.3);opacity:0;transform:scale3d(.3,.3,.3)}50%{opacity:1}}@keyframes zoomIn{0%{-webkit-transform:scale3d(.3,.3,.3);opacity:0;transform:scale3d(.3,.3,.3)}50%{opacity:1}}.zoomIn{-webkit-animation-name:zoomIn;animation-name:zoomIn}@-webkit-keyframes zoomInDown{0%{-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);-webkit-transform:scale3d(.1,.1,.1) translate3d(0,-1000px,0);animation-timing-function:cubic-bezier(.55,.055,.675,.19);opacity:0;transform:scale3d(.1,.1,.1) translate3d(0,-1000px,0)}60%{-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);-webkit-transform:scale3d(.475,.475,.475) translate3d(0,60px,0);animation-timing-function:cubic-bezier(.175,.885,.32,1);opacity:1;transform:scale3d(.475,.475,.475) translate3d(0,60px,0)}}@keyframes zoomInDown{0%{-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);-webkit-transform:scale3d(.1,.1,.1) translate3d(0,-1000px,0);animation-timing-function:cubic-bezier(.55,.055,.675,.19);opacity:0;transform:scale3d(.1,.1,.1) translate3d(0,-1000px,0)}60%{-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);-webkit-transform:scale3d(.475,.475,.475) translate3d(0,60px,0);animation-timing-function:cubic-bezier(.175,.885,.32,1);opacity:1;transform:scale3d(.475,.475,.475) translate3d(0,60px,0)}}.zoomInDown{-webkit-animation-name:zoomInDown;animation-name:zoomInDown}@-webkit-keyframes zoomInLeft{0%{-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);-webkit-transform:scale3d(.1,.1,.1) translate3d(-1000px,0,0);animation-timing-function:cubic-bezier(.55,.055,.675,.19);opacity:0;transform:scale3d(.1,.1,.1) translate3d(-1000px,0,0)}60%{-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);-webkit-transform:scale3d(.475,.475,.475) translate3d(10px,0,0);animation-timing-function:cubic-bezier(.175,.885,.32,1);opacity:1;transform:scale3d(.475,.475,.475) translate3d(10px,0,0)}}@keyframes zoomInLeft{0%{-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);-webkit-transform:scale3d(.1,.1,.1) translate3d(-1000px,0,0);animation-timing-function:cubic-bezier(.55,.055,.675,.19);opacity:0;transform:scale3d(.1,.1,.1) translate3d(-1000px,0,0)}60%{-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);-webkit-transform:scale3d(.475,.475,.475) translate3d(10px,0,0);animation-timing-function:cubic-bezier(.175,.885,.32,1);opacity:1;transform:scale3d(.475,.475,.475) translate3d(10px,0,0)}}.zoomInLeft{-webkit-animation-name:zoomInLeft;animation-name:zoomInLeft}@-webkit-keyframes zoomInRight{0%{-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);-webkit-transform:scale3d(.1,.1,.1) translate3d(1000px,0,0);animation-timing-function:cubic-bezier(.55,.055,.675,.19);opacity:0;transform:scale3d(.1,.1,.1) translate3d(1000px,0,0)}60%{-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);-webkit-transform:scale3d(.475,.475,.475) translate3d(-10px,0,0);animation-timing-function:cubic-bezier(.175,.885,.32,1);opacity:1;transform:scale3d(.475,.475,.475) translate3d(-10px,0,0)}}@keyframes zoomInRight{0%{-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);-webkit-transform:scale3d(.1,.1,.1) translate3d(1000px,0,0);animation-timing-function:cubic-bezier(.55,.055,.675,.19);opacity:0;transform:scale3d(.1,.1,.1) translate3d(1000px,0,0)}60%{-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);-webkit-transform:scale3d(.475,.475,.475) translate3d(-10px,0,0);animation-timing-function:cubic-bezier(.175,.885,.32,1);opacity:1;transform:scale3d(.475,.475,.475) translate3d(-10px,0,0)}}.zoomInRight{-webkit-animation-name:zoomInRight;animation-name:zoomInRight}@-webkit-keyframes zoomInUp{0%{-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);-webkit-transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);animation-timing-function:cubic-bezier(.55,.055,.675,.19);opacity:0;transform:scale3d(.1,.1,.1) translate3d(0,1000px,0)}60%{-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);-webkit-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);animation-timing-function:cubic-bezier(.175,.885,.32,1);opacity:1;transform:scale3d(.475,.475,.475) translate3d(0,-60px,0)}}@keyframes zoomInUp{0%{-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);-webkit-transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);animation-timing-function:cubic-bezier(.55,.055,.675,.19);opacity:0;transform:scale3d(.1,.1,.1) translate3d(0,1000px,0)}60%{-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);-webkit-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);animation-timing-function:cubic-bezier(.175,.885,.32,1);opacity:1;transform:scale3d(.475,.475,.475) translate3d(0,-60px,0)}}.zoomInUp{-webkit-animation-name:zoomInUp;animation-name:zoomInUp}@-webkit-keyframes zoomOut{0%{opacity:1}50%{-webkit-transform:scale3d(.3,.3,.3);opacity:0;transform:scale3d(.3,.3,.3)}to{opacity:0}}@keyframes zoomOut{0%{opacity:1}50%{-webkit-transform:scale3d(.3,.3,.3);opacity:0;transform:scale3d(.3,.3,.3)}to{opacity:0}}.zoomOut{-webkit-animation-name:zoomOut;animation-name:zoomOut}@-webkit-keyframes zoomOutDown{40%{-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);-webkit-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);animation-timing-function:cubic-bezier(.55,.055,.675,.19);opacity:1;transform:scale3d(.475,.475,.475) translate3d(0,-60px,0)}to{-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);-webkit-transform:scale3d(.1,.1,.1) translate3d(0,2000px,0);-webkit-transform-origin:center bottom;animation-timing-function:cubic-bezier(.175,.885,.32,1);opacity:0;transform:scale3d(.1,.1,.1) translate3d(0,2000px,0);transform-origin:center bottom}}@keyframes zoomOutDown{40%{-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);-webkit-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);animation-timing-function:cubic-bezier(.55,.055,.675,.19);opacity:1;transform:scale3d(.475,.475,.475) translate3d(0,-60px,0)}to{-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);-webkit-transform:scale3d(.1,.1,.1) translate3d(0,2000px,0);-webkit-transform-origin:center bottom;animation-timing-function:cubic-bezier(.175,.885,.32,1);opacity:0;transform:scale3d(.1,.1,.1) translate3d(0,2000px,0);transform-origin:center bottom}}.zoomOutDown{-webkit-animation-name:zoomOutDown;animation-name:zoomOutDown}@-webkit-keyframes zoomOutLeft{40%{-webkit-transform:scale3d(.475,.475,.475) translate3d(42px,0,0);opacity:1;transform:scale3d(.475,.475,.475) translate3d(42px,0,0)}to{-webkit-transform:scale(.1) translate3d(-2000px,0,0);-webkit-transform-origin:left center;opacity:0;transform:scale(.1) translate3d(-2000px,0,0);transform-origin:left center}}@keyframes zoomOutLeft{40%{-webkit-transform:scale3d(.475,.475,.475) translate3d(42px,0,0);opacity:1;transform:scale3d(.475,.475,.475) translate3d(42px,0,0)}to{-webkit-transform:scale(.1) translate3d(-2000px,0,0);-webkit-transform-origin:left center;opacity:0;transform:scale(.1) translate3d(-2000px,0,0);transform-origin:left center}}.zoomOutLeft{-webkit-animation-name:zoomOutLeft;animation-name:zoomOutLeft}@-webkit-keyframes zoomOutRight{40%{-webkit-transform:scale3d(.475,.475,.475) translate3d(-42px,0,0);opacity:1;transform:scale3d(.475,.475,.475) translate3d(-42px,0,0)}to{-webkit-transform:scale(.1) translate3d(2000px,0,0);-webkit-transform-origin:right center;opacity:0;transform:scale(.1) translate3d(2000px,0,0);transform-origin:right center}}@keyframes zoomOutRight{40%{-webkit-transform:scale3d(.475,.475,.475) translate3d(-42px,0,0);opacity:1;transform:scale3d(.475,.475,.475) translate3d(-42px,0,0)}to{-webkit-transform:scale(.1) translate3d(2000px,0,0);-webkit-transform-origin:right center;opacity:0;transform:scale(.1) translate3d(2000px,0,0);transform-origin:right center}}.zoomOutRight{-webkit-animation-name:zoomOutRight;animation-name:zoomOutRight}@-webkit-keyframes zoomOutUp{40%{-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);-webkit-transform:scale3d(.475,.475,.475) translate3d(0,60px,0);animation-timing-function:cubic-bezier(.55,.055,.675,.19);opacity:1;transform:scale3d(.475,.475,.475) translate3d(0,60px,0)}to{-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);-webkit-transform:scale3d(.1,.1,.1) translate3d(0,-2000px,0);-webkit-transform-origin:center bottom;animation-timing-function:cubic-bezier(.175,.885,.32,1);opacity:0;transform:scale3d(.1,.1,.1) translate3d(0,-2000px,0);transform-origin:center bottom}}@keyframes zoomOutUp{40%{-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);-webkit-transform:scale3d(.475,.475,.475) translate3d(0,60px,0);animation-timing-function:cubic-bezier(.55,.055,.675,.19);opacity:1;transform:scale3d(.475,.475,.475) translate3d(0,60px,0)}to{-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);-webkit-transform:scale3d(.1,.1,.1) translate3d(0,-2000px,0);-webkit-transform-origin:center bottom;animation-timing-function:cubic-bezier(.175,.885,.32,1);opacity:0;transform:scale3d(.1,.1,.1) translate3d(0,-2000px,0);transform-origin:center bottom}}.zoomOutUp{-webkit-animation-name:zoomOutUp;animation-name:zoomOutUp}@-webkit-keyframes slideInDown{0%{-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0);visibility:visible}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes slideInDown{0%{-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0);visibility:visible}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.slideInDown{-webkit-animation-name:slideInDown;animation-name:slideInDown}@-webkit-keyframes slideInLeft{0%{-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0);visibility:visible}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes slideInLeft{0%{-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0);visibility:visible}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.slideInLeft{-webkit-animation-name:slideInLeft;animation-name:slideInLeft}@-webkit-keyframes slideInRight{0%{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0);visibility:visible}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes slideInRight{0%{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0);visibility:visible}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.slideInRight{-webkit-animation-name:slideInRight;animation-name:slideInRight}@-webkit-keyframes slideInUp{0%{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0);visibility:visible}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes slideInUp{0%{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0);visibility:visible}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.slideInUp{-webkit-animation-name:slideInUp;animation-name:slideInUp}@-webkit-keyframes slideOutDown{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0);visibility:hidden}}@keyframes slideOutDown{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0);visibility:hidden}}.slideOutDown{-webkit-animation-name:slideOutDown;animation-name:slideOutDown}@-webkit-keyframes slideOutLeft{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0);visibility:hidden}}@keyframes slideOutLeft{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0);visibility:hidden}}.slideOutLeft{-webkit-animation-name:slideOutLeft;animation-name:slideOutLeft}@-webkit-keyframes slideOutRight{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0);visibility:hidden}}@keyframes slideOutRight{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0);visibility:hidden}}.slideOutRight{-webkit-animation-name:slideOutRight;animation-name:slideOutRight}@-webkit-keyframes slideOutUp{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0);visibility:hidden}}@keyframes slideOutUp{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0);visibility:hidden}}.slideOutUp{-webkit-animation-name:slideOutUp;animation-name:slideOutUp}.animated{-webkit-animation-duration:1s;-webkit-animation-fill-mode:both;animation-duration:1s;animation-fill-mode:both}.animated.infinite{-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite}.animated.delay-1s{-webkit-animation-delay:1s;animation-delay:1s}.animated.delay-2s{-webkit-animation-delay:2s;animation-delay:2s}.animated.delay-3s{-webkit-animation-delay:3s;animation-delay:3s}.animated.delay-4s{-webkit-animation-delay:4s;animation-delay:4s}.animated.delay-5s{-webkit-animation-delay:5s;animation-delay:5s}.animated.fast{-webkit-animation-duration:.8s;animation-duration:.8s}.animated.faster{-webkit-animation-duration:.5s;animation-duration:.5s}.animated.slow{-webkit-animation-duration:2s;animation-duration:2s}.animated.slower{-webkit-animation-duration:3s;animation-duration:3s}@media (prefers-reduced-motion){.animated{-webkit-animation:unset!important;-webkit-transition:none!important;animation:unset!important;transition:none!important}}





/*============================================================================
  _App_override
==============================================================================*/

/*================ _animate_css ================*/
.animated{
  -webkit-animation-duration:1s!important;
  -webkit-animation-fill-mode:both!important;
  animation-duration:1s!important;
  animation-fill-mode:both!important;

  &.slow{
    -webkit-animation-duration:2s!important;
    animation-duration:2s!important;
  }
  &.fast{
    -webkit-animation-duration:.8s!important;
    animation-duration:.8s!important;
  }
  &.faster{
    -webkit-animation-duration:.5s!important;
    animation-duration:.5s!important;
  }
}

/*================ _font_awesome ================*/
[class*=" fa-"]:before{
  margin-right: inherit!important;
}
.fas:before{
  font-family: "Font Awesome 5 Free"!important;
  font-weight:900!important;
}
.fab:before{
  font-family: "Font Awesome 5 Brands"!important;
}

  .product-usp .fas{
    margin-right:5px !important;
  }

  .naar-productpagina{
    font-family: Oswald;
    font-weight: 600;
    color: #676767;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-decoration: underline;
    padding-bottom: 10px;
  }

  .product-single__description.rte{
    margin-top: 20px !important;
  }

  .ql-font-trebuchet-ms{
    font-family: Oswald !important;
    font-size: 32px !important;
    color: #191919 !important;
    letter-spacing: 1px !important;
  }