/** Shopify CDN: Minification failed

Line 144:0 Unexpected "{"
Line 144:1 Expected identifier but found "%"
Line 145:2 Unexpected "$"
Line 146:1 Expected identifier but found "%"
Line 147:2 Unexpected "$"
Line 148:1 Expected identifier but found "%"
Line 150:0 Unexpected "$"
Line 157:1 Expected identifier but found "%"
Line 158:2 Unexpected "$"
Line 159:1 Expected identifier but found "%"
... and 343 more hidden warnings

**/
  html{line-height:1.15;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,footer,header,nav,section{display:block}h1{font-size:2em;margin:.67em 0}figcaption,figure,main{display:block}figure{margin:1em 40px}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent;-webkit-text-decoration-skip:objects}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:inherit;font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}dfn{font-style:italic}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}audio,video{display:inline-block}audio:not([controls]){display:none;height:0}img{border-style:none}svg:not(:root){overflow:hidden}button,input,optgroup,select,textarea{font-family:sans-serif;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}button,html [type="button"],/* 1 */
[type="reset"],[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{display:inline-block;vertical-align:baseline}textarea{overflow:auto}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px}[type="search"]::-webkit-search-cancel-button,[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details,/* 1 */
menu{display:block}summary{display:list-item}canvas{display:inline-block}template{display:none}[hidden]{display:none}

@mixin clearfix() {
  &:after {
    content: "";
    display: table;
    clear: both; }
  *zoom: 1;
}

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

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

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

@mixin transform-origin($top: 0, $left: 0) {
  -webkit-transform-origin: $top $left;
          transform-origin: $top $left;
}

@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 visuallyHidden {
  clip: rect(0 0 0 0);
  clip: rect(0, 0, 0, 0);
  overflow: hidden;
  position: absolute;
  height: 1px;
  width: 1px;
}

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

@mixin content-tl($top: 0, $left: 0, $width: 15px, $height: 15px, $bg: #000000) {
  content: "";
  display: block;
  width: $width;
  height: $height;
  position: absolute;
  top: $top;
  left: $left;
  background-color: $bg;
}

@mixin content-tr($top: 0, $right: 0, $width: 15px, $height: 15px, $bg: #000000) {
  content: "";
  display: block;
  width: $width;
  height: $height;
  position: absolute;
  top: $top;
  right: $right;
  background-color: $bg;
}

@mixin content-br($bottom: 0, $right: 0, $width: 15px, $height: 15px, $bg: #000000) {
  content: "";
  display: block;
  width: $width;
  height: $height;
  position: absolute;
  bottom: $bottom;
  right: $right;
  background-color: $bg;
}

@mixin content-bl($bottom: 0, $left: 0, $width: 15px, $height: 15px, $bg: #000000) {
  content: "";
  display: block;
  width: $width;
  height: $height;
  position: absolute;
  bottom: $bottom;
  left: $left;
  background-color: $bg;
}

@mixin animation($animation: none) {
  -webkit-animation: #{$animation};
     -moz-animation: #{$animation};
      -ms-animation: #{$animation};
          animation: #{$animation};
}

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

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

{% if settings.enable_wide_layout %}
  $siteWidth: 1340px;
{% else %}
  $siteWidth: 1040px;
{% endif %}

$gutter: 30px;
$gridGutter: 30px;
$radius: 2px;

$small: 480px;
$medium: 768px;
$large: 769px;
{% if settings.enable_wide_layout %}
  $wide: 1200px;
{% endif %}

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

$breakpoints: (
  'small' '(max-width: #{$small})',
  'medium' '(min-width: #{$postSmall}) and (max-width: #{$medium})',
  'medium-down' '(max-width: #{$medium})',
  {% if settings.enable_wide_layout %}
  'large' '(min-width: #{$large}) and (max-width: #{$wide})',
  {% else %}
  'large' '(min-width: #{$large})',
  {% endif %}
  'post-large' '(min-width: #{$large})'{% if settings.enable_wide_layout %},
  'wide' '(min-width: #{$wide})'{% endif %}
);
$breakpoint-has-widths: ('small', 'medium', 'medium-down', 'large', 'post-large', 'wide');
$breakpoint-has-push:  ('medium', 'medium-down', 'large', 'post-large', 'wide');
$breakpoint-has-pull:  ('medium', 'medium-down', 'large', 'post-large', 'wide');

$colorBackground:   {{ settings.color_body_bg }};
$colorPrimary:      {{ settings.color_primary }};
$colorHighlight:    {{ settings.color_highlight }};
$colorAccent:       {{ settings.color_accent }};
$colorAdditional:   {{ settings.color_additional }};
$colorInverse:      {{ settings.color_inverse }};
$colorNeutral:      {{ settings.color_neutral }};
$colorAdditionalSecond: lighten(desaturate(adjust-hue(#5c4b51, 10.2674), 3.8939), 32.9412);
$colorHighlightSecond:  lighten(saturate(adjust-hue(#f06060, 0.0000), 8.1505), 12.5490);

$colorBtnPrimary: $colorHighlight;
$colorBtnPrimaryHover: $colorPrimary;
$colorBtnPrimaryActive: $colorPrimary;
$colorBtnPrimaryText: $colorInverse;

$colorLink: $colorHighlight;
$colorLinkHover: $colorPrimary;

$colorTextBody:       {{ settings.color_body_text }};
$colorTextBodyLight:  lighten(desaturate(adjust-hue($colorTextBody, 4.0336), 3.1089), 47.8431);
$colorTextHeader:     {{ settings.color_headers }};
$colorTextAddHeader:  {{ settings.color_add_headers }};

$colorBody: {{ settings.color_body_bg }};
$colorTopBar: $colorPrimary;

$colorBorder: $colorInverse;

$passwordPageUseBgImage: true;

{% if settings.font_body_family contains 'Google' %}
  {% assign font_base_parts = settings.font_body_family | split: '_' %}
  {% assign font_base_name = font_base_parts[1] %}
  {% capture base_family %}"{{ font_base_name | split: ':' | first | replace: '+', ' ' }}"{% if font_base_parts.last == 'serif' %}, serif {% else %}, Tahoma, Geneva, sans-serif{% endif %}{% endcapture %}
{% else %}
  {% assign base_family = settings.font_body_family %}
{% endif %}

{% if settings.font_header_page_family contains 'Google' %}
  {% assign font_header_page_parts = settings.font_header_page_family | split: '_' %}
  {% assign font_header_page_name = font_header_page_parts[1] %}
  {% capture header_page_family %}"{{ font_header_page_name | split: ':' | first | replace: '+', ' ' }}"{% if font_header_page_parts.last == 'serif' %}, serif {% else %}, Tahoma, Geneva, sans-serif{% endif %}{% endcapture %}
  {% assign header_page_weight = font_header_page_parts[2] %}
{% else %}
  {% assign header_page_family = settings.font_header_page_family %}
  {% assign header_page_weight = 700 %}
{% endif %}

{% if settings.font_header_family contains 'Google' %}
  {% assign font_header_parts = settings.font_header_family | split: '_' %}
  {% assign font_header_name = font_header_parts[1] %}
  {% capture header_family %}"{{ font_header_name | split: ':' | first | replace: '+', ' ' }}"{% if font_header_parts.last == 'serif' %}, serif {% else %}, Bitter, 'Palatino Linotype', 'Book Antiqua', Palatino, serif{% endif %}{% endcapture %}
  {% assign header_weight = font_header_parts[2] %}
{% else %}
  {% assign header_family = settings.font_header_family %}
  {% assign header_weight = 700 %}
{% endif %}

{% if settings.font_additional_family contains 'Google' %}
  {% assign font_additional_parts = settings.font_additional_family | split: '_' %}
  {% assign font_additional_name = font_additional_parts[1] %}
  {% capture additional_family %}"{{ font_additional_name | split: ':' | first | replace: '+', ' ' }}"{% if font_additional_parts.last == 'serif' %}, serif {% else %}, Bitter, 'Palatino Linotype', 'Book Antiqua', Palatino, serif{% endif %}{% endcapture %}
  {% assign additional_weight = font_additional_parts[2] | default: 400 %}
{% else %}
  {% assign additional_family = settings.font_additional_family %}
  {% assign additional_weight = 700 %}
{% endif %}

{% if settings.font_accent_family contains 'Google' %}
  {% assign font_accent_parts = settings.font_accent_family | split: '_' %}
  {% assign font_accent_name = font_accent_parts[1] %}
  {% capture accent_family %}"{{ font_accent_name | split: ':' | first | replace: '+', ' ' }}"{% if font_accent_parts.last == 'serif' %}, serif {% else %}, Tahoma, Geneva, sans-serif{% endif %}{% endcapture %}
  {% assign accent_weight = font_accent_parts[2] %}
{% else %}
  {% assign accent_family = settings.font_accent_family %}
  {% assign accent_weight = 400 %}
{% endif %}


$bodyFontStack: {{ base_family }};
$baseFontSize: {{ settings.font_body_size }};


$additionalBodyFontStack: {{ additional_family }};
$additionalBodyFontWeight: {{ additional_weight }};

$headerPageFontStack: {{ header_page_family }};
$headerPageFontWeight: {{ header_page_weight }};
$headerPageFontSize: {{ settings.font_header_page_size }};

$headerTextFontStack: {{ header_family }};
$headerTextFontWeight: {{ header_weight }};
$headerBaseTextFontSize: {{ settings.font_header_size }};

$accentFontStack: {{ accent_family }};

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

.grid,
.grid-uniform {
  @include clearfix;
}

.grid__item.clear {
  clear: both;
}

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

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

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

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

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

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

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

@mixin silent-relative() {
  @if $use-silent-classes == true {
    position:relative;
  }
}

#{$class-type}grid,
#{$class-type}grid-uniform {
  list-style: none;
  margin: 0;
  padding: 0;
  margin-left: -$gridGutter;
}

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

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

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

#{$class-type}grid--full {
  @extend #{$class-type}grid;
  margin-left: 0;

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

@mixin device-type($namespace:"") {
  #{$class-type}#{$namespace}one-whole       { width: 100%; }

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

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

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

  #{$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%; }

  #{$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%; }

  #{$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%; }

  #{$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%; }

  #{$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%; }
}

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

@mixin device-helper($namespace:"") {
  #{$class-type}#{$namespace}show        { display: block; }
  #{$class-type}#{$namespace}hide        { display: none; }

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

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

@include device-type();
@include device-helper();

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

@mixin push-setup($namespace: "") {
  #{$class-type}push--#{$namespace}one-whole       { left: 100%; @include silent-relative(); }

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

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

  #{$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(); }

  #{$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(); }

  #{$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(); }

  #{$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(); }

  #{$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(); }

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

@mixin pull-setup($namespace: "") {
  #{$class-type}pull--#{$namespace}one-whole       { right: 100%; @include silent-relative(); }

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

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

  #{$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(); }

  #{$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(); }

  #{$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(); }

  #{$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(); }

  #{$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(); }

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

$xs-min: 480px;
$sm-min: 768px;
$md-min: 1024px;
$lg-min: 1200px;
$container-sm: $sm-min;
$container-md: $md-min;
$container-lg: $lg-min;

.f-l-container {
  margin-right: auto;
  margin-left: auto;
}

.f-l-row {
  box-sizing: border-box;
  display: flex;
  flex: 0 1 auto;
  flex-direction: row;
  flex-wrap: wrap;
}

.f-l-row.reverse {
  flex-direction: row-reverse;
}

.f-l-col.reverse {
  flex-direction: column-reverse;
}

.f-l-col-xs,
.f-l-col-xs-1,
.f-l-col-xs-2,
.f-l-col-xs-3,
.f-l-col-xs-4,
.f-l-col-xs-5,
.f-l-col-xs-6,
.f-l-col-xs-7,
.f-l-col-xs-8,
.f-l-col-xs-9,
.f-l-col-xs-10,
.f-l-col-xs-11,
.f-l-col-xs-12,
.f-l-col-xs-offset-0,
.f-l-col-xs-offset-1,
.f-l-col-xs-offset-2,
.f-l-col-xs-offset-3,
.f-l-col-xs-offset-4,
.f-l-col-xs-offset-5,
.f-l-col-xs-offset-6,
.f-l-col-xs-offset-7,
.f-l-col-xs-offset-8,
.f-l-col-xs-offset-9,
.f-l-col-xs-offset-10,
.f-l-col-xs-offset-11,
.f-l-col-xs-offset-12 {
  box-sizing: border-box;
  flex: 0 0 auto;
}

.f-l-col-xs {
  flex-grow: 1;
  flex-basis: 0;
  max-width: 100%;
}

.f-l-col-xs-1 {
  flex-basis: 8.33333333%;
  max-width: 8.33333333%;
}

.f-l-col-xs-2 {
  flex-basis: 16.66666667%;
  max-width: 16.66666667%;
}

.f-l-col-xs-3 {
  flex-basis: 25%;
  max-width: 25%;
}

.f-l-col-xs-4 {
  flex-basis: 33.33333333%;
  max-width: 33.33333333%;
}

.f-l-col-xs-5 {
  flex-basis: 41.66666667%;
  max-width: 41.66666667%;
}

.f-l-col-xs-6 {
  flex-basis: 50%;
  max-width: 50%;
}

.f-l-col-xs-7 {
  flex-basis: 58.33333333%;
  max-width: 58.33333333%;
}

.f-l-col-xs-8 {
  flex-basis: 66.66666667%;
  max-width: 66.66666667%;
}

.f-l-col-xs-9 {
  flex-basis: 75%;
  max-width: 75%;
}

.f-l-col-xs-10 {
  flex-basis: 83.33333333%;
  max-width: 83.33333333%;
}

.f-l-col-xs-11 {
  flex-basis: 91.66666667%;
  max-width: 91.66666667%;
}

.f-l-col-xs-12 {
  flex-basis: 100%;
  max-width: 100%;
}

.f-l-col-xs-offset-0 {
  margin-left: 0;
}

.f-l-col-xs-offset-1 {
  margin-left: 8.33333333%;
}

.f-l-col-xs-offset-2 {
  margin-left: 16.66666667%;
}

.f-l-col-xs-offset-3 {
  margin-left: 25%;
}

.f-l-col-xs-offset-4 {
  margin-left: 33.33333333%;
}

.f-l-col-xs-offset-5 {
  margin-left: 41.66666667%;
}

.f-l-col-xs-offset-6 {
  margin-left: 50%;
}

.f-l-col-xs-offset-7 {
  margin-left: 58.33333333%;
}

.f-l-col-xs-offset-8 {
  margin-left: 66.66666667%;
}

.f-l-col-xs-offset-9 {
  margin-left: 75%;
}

.f-l-col-xs-offset-10 {
  margin-left: 83.33333333%;
}

.f-l-col-xs-offset-11 {
  margin-left: 91.66666667%;
}

.f-l-start-xs {
  justify-content: flex-start;
  text-align: start;
}

.f-l-center-xs {
  justify-content: center;
  text-align: center;
}

.f-l-end-xs {
  justify-content: flex-end;
  text-align: end;
}

.f-l-top-xs {
  align-items: flex-start;
}

.f-l-middle-xs {
  align-items: center;
}

.f-l-bottom-xs {
  align-items: flex-end;
}

.f-l-around-xs {
  justify-content: space-around;
}

.f-l-between-xs {
  justify-content: space-between;
}

.f-l-first-xs {
  order: -1;
}

.f-l-last-xs {
  order: 1;
}

@media (min-width: $sm-min) {
  .f-l-container {
    width: $container-sm;
  }

  .f-l-col-sm,
  .f-l-col-sm-1,
  .f-l-col-sm-2,
  .f-l-col-sm-3,
  .f-l-col-sm-4,
  .f-l-col-sm-5,
  .f-l-col-sm-6,
  .f-l-col-sm-7,
  .f-l-col-sm-8,
  .f-l-col-sm-9,
  .f-l-col-sm-10,
  .f-l-col-sm-11,
  .f-l-col-sm-12,
  .f-l-col-sm-offset-0,
  .f-l-col-sm-offset-1,
  .f-l-col-sm-offset-2,
  .f-l-col-sm-offset-3,
  .f-l-col-sm-offset-4,
  .f-l-col-sm-offset-5,
  .f-l-col-sm-offset-6,
  .f-l-col-sm-offset-7,
  .f-l-col-sm-offset-8,
  .f-l-col-sm-offset-9,
  .f-l-col-sm-offset-10,
  .f-l-col-sm-offset-11,
  .f-l-col-sm-offset-12 {
    box-sizing: border-box;
    flex: 0 0 auto;
  }

  .f-l-col-sm {
    flex-grow: 1;
    flex-basis: 0;
    max-width: 100%;
  }

  .f-l-col-sm-1 {
    flex-basis: 8.33333333%;
    max-width: 8.33333333%;
  }

  .f-l-col-sm-2 {
    flex-basis: 16.66666667%;
    max-width: 16.66666667%;
  }

  .f-l-col-sm-3 {
    flex-basis: 25%;
    max-width: 25%;
  }

  .f-l-col-sm-4 {
    flex-basis: 33.33333333%;
    max-width: 33.33333333%;
  }

  .f-l-col-sm-5 {
    flex-basis: 41.66666667%;
    max-width: 41.66666667%;
  }

  .f-l-col-sm-6 {
    flex-basis: 50%;
    max-width: 50%;
  }

  .f-l-col-sm-7 {
    flex-basis: 58.33333333%;
    max-width: 58.33333333%;
  }

  .f-l-col-sm-8 {
    flex-basis: 66.66666667%;
    max-width: 66.66666667%;
  }

  .f-l-col-sm-9 {
    flex-basis: 75%;
    max-width: 75%;
  }

  .f-l-col-sm-10 {
    flex-basis: 83.33333333%;
    max-width: 83.33333333%;
  }

  .f-l-col-sm-11 {
    flex-basis: 91.66666667%;
    max-width: 91.66666667%;
  }

  .f-l-col-sm-12 {
    flex-basis: 100%;
    max-width: 100%;
  }

  .f-l-col-sm-offset-0 {
    margin-left: 0;
  }

  .f-l-col-sm-offset-1 {
    margin-left: 8.33333333%;
  }

  .f-l-col-sm-offset-2 {
    margin-left: 16.66666667%;
  }

  .f-l-col-sm-offset-3 {
    margin-left: 25%;
  }

  .f-l-col-sm-offset-4 {
    margin-left: 33.33333333%;
  }

  .f-l-col-sm-offset-5 {
    margin-left: 41.66666667%;
  }

  .f-l-col-sm-offset-6 {
    margin-left: 50%;
  }

  .f-l-col-sm-offset-7 {
    margin-left: 58.33333333%;
  }

  .f-l-col-sm-offset-8 {
    margin-left: 66.66666667%;
  }

  .f-l-col-sm-offset-9 {
    margin-left: 75%;
  }

  .f-l-col-sm-offset-10 {
    margin-left: 83.33333333%;
  }

  .f-l-col-sm-offset-11 {
    margin-left: 91.66666667%;
  }

  .f-l-start-sm {
    justify-content: flex-start;
    text-align: start;
  }

  .f-l-center-sm {
    justify-content: center;
    text-align: center;
  }

  .f-l-end-sm {
    justify-content: flex-end;
    text-align: end;
  }

  .f-l-top-sm {
    align-items: flex-start;
  }

  .f-l-middle-sm {
    align-items: center;
  }

  .f-l-bottom-sm {
    align-items: flex-end;
  }

  .f-l-around-sm {
    justify-content: space-around;
  }

  .f-l-between-sm {
    justify-content: space-between;
  }

  .f-l-first-sm {
    order: -1;
  }

  .f-l-last-sm {
    order: 1;
  }
}

@media (min-width: $md-min) {
  .f-l-container {
    width: $container-md;
  }

  .f-l-col-md,
  .f-l-col-md-1,
  .f-l-col-md-2,
  .f-l-col-md-3,
  .f-l-col-md-4,
  .f-l-col-md-5,
  .f-l-col-md-6,
  .f-l-col-md-7,
  .f-l-col-md-8,
  .f-l-col-md-9,
  .f-l-col-md-10,
  .f-l-col-md-11,
  .f-l-col-md-12,
  .f-l-col-md-offset-0,
  .f-l-col-md-offset-1,
  .f-l-col-md-offset-2,
  .f-l-col-md-offset-3,
  .f-l-col-md-offset-4,
  .f-l-col-md-offset-5,
  .f-l-col-md-offset-6,
  .f-l-col-md-offset-7,
  .f-l-col-md-offset-8,
  .f-l-col-md-offset-9,
  .f-l-col-md-offset-10,
  .f-l-col-md-offset-11,
  .f-l-col-md-offset-12 {
    box-sizing: border-box;
    flex: 0 0 auto;
  }

  .f-l-col-md {
    flex-grow: 1;
    flex-basis: 0;
    max-width: 100%;
  }

  .f-l-col-md-1 {
    flex-basis: 8.33333333%;
    max-width: 8.33333333%;
  }

  .f-l-col-md-2 {
    flex-basis: 16.66666667%;
    max-width: 16.66666667%;
  }

  .f-l-col-md-3 {
    flex-basis: 25%;
    max-width: 25%;
  }

  .f-l-col-md-4 {
    flex-basis: 33.33333333%;
    max-width: 33.33333333%;
  }

  .f-l-col-md-5 {
    flex-basis: 41.66666667%;
    max-width: 41.66666667%;
  }

  .f-l-col-md-6 {
    flex-basis: 50%;
    max-width: 50%;
  }

  .f-l-col-md-7 {
    flex-basis: 58.33333333%;
    max-width: 58.33333333%;
  }

  .f-l-col-md-8 {
    flex-basis: 66.66666667%;
    max-width: 66.66666667%;
  }

  .f-l-col-md-9 {
    flex-basis: 75%;
    max-width: 75%;
  }

  .f-l-col-md-10 {
    flex-basis: 83.33333333%;
    max-width: 83.33333333%;
  }

  .f-l-col-md-11 {
    flex-basis: 91.66666667%;
    max-width: 91.66666667%;
  }

  .f-l-col-md-12 {
    flex-basis: 100%;
    max-width: 100%;
  }

  .f-l-col-md-offset-0 {
    margin-left: 0;
  }

  .f-l-col-md-offset-1 {
    margin-left: 8.33333333%;
  }

  .f-l-col-md-offset-2 {
    margin-left: 16.66666667%;
  }

  .f-l-col-md-offset-3 {
    margin-left: 25%;
  }

  .f-l-col-md-offset-4 {
    margin-left: 33.33333333%;
  }

  .f-l-col-md-offset-5 {
    margin-left: 41.66666667%;
  }

  .f-l-col-md-offset-6 {
    margin-left: 50%;
  }

  .f-l-col-md-offset-7 {
    margin-left: 58.33333333%;
  }

  .f-l-col-md-offset-8 {
    margin-left: 66.66666667%;
  }

  .f-l-col-md-offset-9 {
    margin-left: 75%;
  }

  .f-l-col-md-offset-10 {
    margin-left: 83.33333333%;
  }

  .f-l-col-md-offset-11 {
    margin-left: 91.66666667%;
  }

  .f-l-start-md {
    justify-content: flex-start;
    text-align: start;
  }

  .f-l-center-md {
    justify-content: center;
    text-align: center;
  }

  .f-l-end-md {
    justify-content: flex-end;
    text-align: end;
  }

  .f-l-top-md {
    align-items: flex-start;
  }

  .f-l-middle-md {
    align-items: center;
  }

  .f-l-bottom-md {
    align-items: flex-end;
  }

  .f-l-around-md {
    justify-content: space-around;
  }

  .f-l-between-md {
    justify-content: space-between;
  }

  .f-l-first-md {
    order: -1;
  }

  .f-l-last-md {
    order: 1;
  }
}

@media (min-width: $lg-min) {
  .f-l-container {
    width: $container-lg;
  }

  .f-l-col-lg,
  .f-l-col-lg-1,
  .f-l-col-lg-2,
  .f-l-col-lg-3,
  .f-l-col-lg-4,
  .f-l-col-lg-5,
  .f-l-col-lg-6,
  .f-l-col-lg-7,
  .f-l-col-lg-8,
  .f-l-col-lg-9,
  .f-l-col-lg-10,
  .f-l-col-lg-11,
  .f-l-col-lg-12,
  .f-l-col-lg-offset-0,
  .f-l-col-lg-offset-1,
  .f-l-col-lg-offset-2,
  .f-l-col-lg-offset-3,
  .f-l-col-lg-offset-4,
  .f-l-col-lg-offset-5,
  .f-l-col-lg-offset-6,
  .f-l-col-lg-offset-7,
  .f-l-col-lg-offset-8,
  .f-l-col-lg-offset-9,
  .f-l-col-lg-offset-10,
  .f-l-col-lg-offset-11,
  .f-l-col-lg-offset-12 {
    box-sizing: border-box;
    flex: 0 0 auto;
  }

  .f-l-col-lg {
    flex-grow: 1;
    flex-basis: 0;
    max-width: 100%;
  }

  .f-l-col-lg-1 {
    flex-basis: 8.33333333%;
    max-width: 8.33333333%;
  }

  .f-l-col-lg-2 {
    flex-basis: 16.66666667%;
    max-width: 16.66666667%;
  }

  .f-l-col-lg-3 {
    flex-basis: 25%;
    max-width: 25%;
  }

  .f-l-col-lg-4 {
    flex-basis: 33.33333333%;
    max-width: 33.33333333%;
  }

  .f-l-col-lg-5 {
    flex-basis: 41.66666667%;
    max-width: 41.66666667%;
  }

  .f-l-col-lg-6 {
    flex-basis: 50%;
    max-width: 50%;
  }

  .f-l-col-lg-7 {
    flex-basis: 58.33333333%;
    max-width: 58.33333333%;
  }

  .f-l-col-lg-8 {
    flex-basis: 66.66666667%;
    max-width: 66.66666667%;
  }

  .f-l-col-lg-9 {
    flex-basis: 75%;
    max-width: 75%;
  }

  .f-l-col-lg-10 {
    flex-basis: 83.33333333%;
    max-width: 83.33333333%;
  }

  .f-l-col-lg-11 {
    flex-basis: 91.66666667%;
    max-width: 91.66666667%;
  }

  .f-l-col-lg-12 {
    flex-basis: 100%;
    max-width: 100%;
  }

  .f-l-col-lg-offset-0 {
    margin-left: 0;
  }

  .f-l-col-lg-offset-1 {
    margin-left: 8.33333333%;
  }

  .f-l-col-lg-offset-2 {
    margin-left: 16.66666667%;
  }

  .f-l-col-lg-offset-3 {
    margin-left: 25%;
  }

  .f-l-col-lg-offset-4 {
    margin-left: 33.33333333%;
  }

  .f-l-col-lg-offset-5 {
    margin-left: 41.66666667%;
  }

  .f-l-col-lg-offset-6 {
    margin-left: 50%;
  }

  .f-l-col-lg-offset-7 {
    margin-left: 58.33333333%;
  }

  .f-l-col-lg-offset-8 {
    margin-left: 66.66666667%;
  }

  .f-l-col-lg-offset-9 {
    margin-left: 75%;
  }

  .f-l-col-lg-offset-10 {
    margin-left: 83.33333333%;
  }

  .f-l-col-lg-offset-11 {
    margin-left: 91.66666667%;
  }

  .f-l-start-lg {
    justify-content: flex-start;
    text-align: start;
  }

  .f-l-center-lg {
    justify-content: center;
    text-align: center;
  }

  .f-l-end-lg {
    justify-content: flex-end;
    text-align: end;
  }

  .f-l-top-lg {
    align-items: flex-start;
  }

  .f-l-middle-lg {
    align-items: center;
  }

  .f-l-bottom-lg {
    align-items: flex-end;
  }

  .f-l-around-lg {
    justify-content: space-around;
  }

  .f-l-between-lg {
    justify-content: space-between;
  }

  .f-l-first-lg {
    order: -1;
  }

  .f-l-last-lg {
    order: 1;
  }
}

html {
  height: 100%;
}

body {
  height: 100%;
  {% if settings.bg_image_choice == 'bg_custom' %}
    background: url({{ 'bg_custom.png' | asset_url }});
    {% if settings.bg_image_display == 'bg_image_stretch' %}
    background-size: cover;
    {% endif %}
  {% else %}
    background-color: $colorBody;
  {% endif %}

  text-rendering: optimizeLegibility;
  -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
   overflow-x: hidden;
   -webkit-tap-highlight-color: rgba(0,0,0,0);
}

.wrapper {
  @include clearfix();
  max-width: $siteWidth;
  margin: 0 auto;
  padding-top: 0 ;
  padding-bottom: 0;
  padding-left: ($gridGutter / 2);
  padding-right: ($gridGutter / 2);
}

@media screen and (min-width: $small) {
    .wrapper {
        padding: 0 $gridGutter;
    }
}

.content-wrapper {
  overflow: hidden;
  position: relative;
}

.main-content {
  display: block;
}

.currency-is-hide span.money,
.currency-is-hide .currency-picker {
  opacity: 0;
}

.wf-loading body {
  opacity: 0;
}

.wf-active body,
.wf-inactive body {
  -webkit-transition: opacity 1s ease-out;
          transition: opacity 1s ease-out;
}

@media (min-width: 769px) {
  .template-index .main-content,
  .template-index .footer {
    opacity: 1;
  }

  .main-content {
    opacity: 1;
  }
}

svg path {
    @include transition(fill 300ms ease-in-out);
}

::selection {
  background: $colorAccent;
}
::-moz-selection {
  background: $colorAccent;
}

input,
textarea,
select,
button {
  background-color: transparent;
  border: none;
  outline: none;
  -webkit-appearance: none;
  border-radius: 0;
  -webkit-border-radius: 0px;
  color: inherit;
  font: inherit;
}

input:-webkit-autofill {
    -webkit-box-shadow:none;
    -webkit-text-fill-color: #333;
}

input:-webkit-autofill:focus {
    -webkit-box-shadow: none;
    -webkit-text-fill-color: #333;
}

input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

input[type="number"] {
    -moz-appearance: textfield;
}

[placeholder]::-webkit-input-placeholder {
  opacity: 1;
  @include transition(all 150ms ease-in-out);
}
[placeholder]:-moz-placeholder {
  opacity: 1;
  @include transition(all 150ms ease-in-out);
  } /* FF 4-18 */
[placeholder]::-moz-placeholder {
  opacity: 1;
  @include transition(all 150ms ease-in-out);
  } /* FF 19+ */
[placeholder]:-ms-input-placeholder {
  opacity: 1;
  @include transition(all 150ms ease-in-out);
  } /* IE 10+ */

input:focus::-webkit-input-placeholder,
textarea:focus::-webkit-input-placeholder  {
  opacity: 0
}

input:focus:-moz-placeholder,
textarea:focus:-moz-placeholder {
  opacity: 0
} /* FF 4-18 */

input:focus::-moz-placeholder,
textarea:focus::-moz-placeholder {
  opacity: 0
} /* FF 19+ */

input:focus:-ms-input-placeholder,
textarea:focus:-ms-input-placeholder {
  opacity: 0
} /* IE 10+ */

input:-webkit-autofill,
input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0px 1000px white inset;
}

body {
  font-size: $baseFontSize;
  line-height: 1.7;
  font-family: $bodyFontStack, sans-serif;
  color: $colorTextBody;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}

a {
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}

h1, h2, h3, h4, h5, h6 {
  font-family: $headerTextFontStack;
  font-weight: $headerTextFontWeight;
  margin: 0;
  line-height: 1.4;

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

h1 {
  font-size: em($headerBaseTextFontSize); // 32px
}

h2 {
  font-size: em(floor($headerBaseTextFontSize * 0.75)); // 24px
}

h3 {
  font-size: em(floor($headerBaseTextFontSize * 0.66)); // 21px
}

h4 {
  font-size: em(floor($headerBaseTextFontSize * 0.56)); // 18px
}

h5 {
  font-size: em(floor($headerBaseTextFontSize * 0.5)); // 16px
}

h6 {
  font-size: em(floor($headerBaseTextFontSize * 0.5)); // 16px
}

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

p {
  margin: 0;

  img {
    margin: 0;
  }
}

em {
  font-style: italic;
}

strong {
  font-weight: bold;
}

small {
  font-size: 0.9em;
}

.heading--add {
  font-family: $additionalBodyFontStack;
  font-size: 24px;
  line-height: 35px;
  font-weight: normal;
}

.heading--add-small {
  font-family: $additionalBodyFontStack;
  font-size: 16px;
  line-height: 20px;
  font-weight: normal;
}

.heading--page {
  font-family: $headerPageFontStack;
  font-size: $headerPageFontSize;
  font-weight: 300;
  text-transform: uppercase;
}

.heading--page-md {
  @extend .heading--page;
  font-size: 26px;
}

.heading--page-xs {
  @extend .heading--page;
  font-size: 24px;
}

.heading--page-small {
  @extend .heading--page;
  font-size: 28px;
}

.subheading--page {
  font-family: $headerTextFontStack;
  font-weight: normal;
  font-size: 26px;
}

.subheading--page-small {
  font-family: $headerTextFontStack;
  font-weight: normal;
  font-size: 16px;
  line-height: 20px;
/*   color: $colorAdditionalSecond; */
color:#040404a6;
}

.heading--accent {
  font-family: $accentFontStack;
  font-size: 125px;
  font-weight: normal;
  color: $colorInverse;
  text-transform: capitalize;
}

.heading--strong {
  font-family: $headerPageFontStack;
  font-size: 32px;
  font-weight: 800;
  line-height: 42px;
}

.text-highlight {
  font-style: normal;
  background-color: $colorAccent;
}

a {
  color: inherit;
  text-decoration: none;
  @include transition(color 300ms ease-in-out);
}

button {
  padding: 0;
  background-color: transparent;
  border: none;
  @include transition(color 300ms ease-in-out);
}

ul, ol {
  margin: 0;
  padding: 0;
}

ul { list-style: none; }
ol { list-style: decimal; }

table {
  width: 100%;
  margin-bottom: 1em;
  border-collapse: collapse;
  border-spacing: 0;
}

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

th {
  font-weight: bold;
}

th, td {
  /* text-align: left; */
  padding: $gutter / 2;
  border: 1px solid $colorBorder;
}

.clearfix {
  clear: both;
  &:after {
    content: "";
    display: table;
    clear: both; }
  *zoom: 1;
}

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

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

.elem-hide {
  visibility: hidden;
}

.display-none {
  display: none;
}

.fallback-text {
  display: none;
}

.grid--in-row {
  margin-bottom: 72px;
  display: inline-block;
  vertical-align: top;
  max-width: 260px;
}

.grid--in-row-fix {
  max-width: 260px;
  max-height: 320px;
  width: 100%;
  height: 100%;
}

.blog-container {
  .hr--clear-inverse:last-child {
    margin-bottom: 22px;
  }
}

.sorting_toolbar {
  text-align: center;

  .blog-sorting__clear-query {
    margin-bottom: 20px;
    padding: 5px 10px;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
  }

  .blog-sorting__clear-query .icon--plus-small {
    padding: 0;
    padding-right: 21px;
    width: 10px;
    height: 10px;
    display: inline-block;
  }

  .blog-sorting__clear-query .icon--plus-small:before,
  .blog-sorting__clear-query .icon--plus-small:after {
    width: 10px;
    @include transition(background-color 300ms ease-in-out);
  }

  .blog-sorting__clear-query .icon--plus-small:before {
    @include transform(rotate(45deg));
  }

  .blog-sorting__clear-query .icon--plus-small:after {
    @include transform(rotate(-45deg));
  }

  .blog-sorting__clear-query:hover {
    color: $colorHighlight;
  }

  .blog-sorting__clear-query:hover .icon--plus-small:before,
  .blog-sorting__clear-query:hover .icon--plus-small:after {
    background-color: $colorHighlight;
  }

  .blog-sort-wrapper {
    clear: both;
    overflow: hidden;
    position: relative;
    transition: height 300ms ease-in-out;
    text-align: left;
  }

  .blog-sort__collapse-btn {
    margin-left: -52px;
    padding-top: 23px;
    top: 0;
    left: 50%;
    font-size: 12px;
    font-weight: 800;
    color: $colorHighlight;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
  }

  .blog-sort__collapse-btn .icon--plus-small {
    padding: 0;
    padding-right: 21px;
    display: inline-block;
  }

  .blog-sort__collapse-btn .icon--plus-small:before,
  .blog-sort__collapse-btn .icon--plus-small:after {
    background-color: $colorHighlight;
    @include transition(background-color 300ms ease-in-out);
  }

  .blog-sort-wrapper.open + .blog-sort__collapse-btn .icon--plus-small:after {
    opacity: 0;
  }
}

.blog-sorting_choosed-tags {
  width: 100%;
  text-align: left;

  .choosen-tag {
    padding: 5px 28px 5px 2px;
    margin: 2px;
    background-color: $colorPrimary;
    color: $colorInverse;
    display: inline-block;
    border-radius: 3px;
    font-size: 14px;
    cursor:pointer;
  }

  .icon--plus-small {
    padding: 0;
    padding-right: 21px;
    width: 10px;
    height: 10px;
    display: inline-block;
  }

  .icon--plus-small:before,
  .icon--plus-small:after {
    width: 10px;
    background-color: $colorInverse;
    @include transition(background-color 300ms ease-in-out);
  }

  .icon--plus-small:before {
    @include transform(rotate(45deg));
  }

  .icon--plus-small:after {
    @include transform(rotate(-45deg));
  }
}


.blog-sort-tags {
  text-align: left;

  .sort-tag {
    padding: 3px 20px;
    margin: 2px;
    display: inline-block;
    border-radius: 3px;
    font-size: 14px;
    border: 1px solid $colorNeutral;
    cursor:pointer;
    -webkit-transition: background-color 300ms ease-in-out, color 300ms ease-in-out;
            transition: background-color 300ms ease-in-out, color 300ms ease-in-out;
  }

  .sort-tag:hover {
    background-color: $colorPrimary;
    color: $colorInverse;
  }

  .sort-char {
    padding-left: 35px;
    padding-right: 18px;
    display: inline-block;
    font-size: 16px;
    font-weight: 800;
    text-transform: uppercase;
  }
}

@media (min-width: 769px) {
  .blog-sorting_choosed-tags {
    float: left;
    width: 75%;
  }

  .sorting_toolbar .blog-sorting__clear-query {
    margin-bottom: 0;
    float: right;
  }
}

.article {
  .img-holder {

    img {
      width: 100%;
      position: relative;
      top: 0;
      left: 0;
      @include transform(translate3d(0, 0, 0));
    }
  }

  .img-holder--cover {
    height: 560px;

    img {
      display: none;
    }
  }

  .article__img {
    width: 100%;
    max-width: 480px;
  }

  .article__title {
    padding-top: 40px;
    font-weight: normal;
    text-align: center;

    a:hover {
      color: $colorHighlight;
    }
  }

  .article__date {
    padding-top: 10px;
    text-align: center;
  }

  .article__author {
    font-family: $additionalBodyFontStack;
    font-size: 16px;
    color: $colorTextBodyLight;
  }

  .article__content {
    padding-top: 20px;

    h1, h2, h3, h4, h5 {
      margin-top: 25px;
      margin-bottom: 15px;
    }

    p {
      padding-bottom: 0;
    }

    ol {
      margin-top: 30px;
    }
  }

  .recipe__directions {
    ol {
      padding-top: 15px;
    }
  }
}

.article + div {
  margin-top: 40px;
}

.article--blog {
  margin: 0 auto;
  padding-top: 50px;
  width: 100%;
  max-width: 680px;
  text-align: center;

  .article__title {
    padding-top: 25px;
  }

  .article__date {
    margin-top: -2px;
  }

  .article__content {
    padding-top: 22px;
    line-height: 30px;
  }

  .article__author {
    padding-top: 20px;
  }

  & ~ .hr--clear-inverse {
    margin: 40px 0 10px 2%;
    width: 96%;
  }
}

.article--recipe {
  padding-top: 80px;

  .img-holder {
    margin: 0 auto;
    height: auto;
    max-width: 480px;
    text-align: center;
    background-color: $colorInverse;

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

  .article__title {
    padding-top: 38px;
    line-height: 42px;
  }

  .article__content {
    padding-top: 0;
    margin-top: -10px;
    margin-bottom: 40px;
  }

  .rte.article__content p,
  .rte.article__content div {
    max-width: 100%;
  }

  .rte.article__content h2 {
    text-align: left;
  }

  .article__desc {
    margin-top: 28px;
    margin-bottom: 28px;
    padding: 21px 0;
    width: 100%;
    font-family: $additionalBodyFontStack;
    color: $colorTextBodyLight;
    border-top: 3px solid $colorNeutral;
    border-bottom: 3px solid $colorNeutral;

    span:first-child {
      padding-left: 8px;
    }

    span:last-child {
      padding-right: 11px;
      float:right;
    }
  }

  .recipe__directions ol {
    margin-top: 0;
    padding-left: 0;
    padding-top: 0;

  }
}

@media(min-width: 769px) {
  .article--recipe {
    .img-holder {
      padding-right: 60px;
      float: left;
    }

    .article__title {
      padding-top: 8px;
    }

    .recipe__ingredients {
      width: 30%;
      float: left;
    }

    .recipe__directions-wrapper {
      width: 63%;
      float: right;
    }

    .recipe__directions {
      -webkit-column-count: 2;
         -moz-column-count: 2;
              column-count: 2;

      -webkit-column-gap: 50px;
         -moz-column-gap: 50px;
              column-gap: 50px;
    }
  }
}

@media (min-width: 769px) and (max-width: 896px) {
  .article--recipe {

    .article__content {
      clear: both;
    }

    .article__desc {
      width: 40%;
      float: left;
      text-align: center;

      span:first-child,
      span:last-child {
        padding: 0;
        float: none;
        display: block;
      }
    }
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .article--recipe {
    .img-holder {
      padding-right: 30px;
      max-width: 380px;
    }
  }
}


.comments {
  margin: 0 auto;
  padding-top: 50px;
  padding-bottom: 100px;
  max-width: 760px;
  text-align: center;

  .comments__info-message {
    padding: 20px;
    font-size: 14px;
    border: 3px solid $colorAdditional;

    span {
      color: $colorAdditional;
    }
  }

  .comments__list {
    padding-top: 17px;
    text-align: left;
  }
}

.comment {
  margin-left: 10px;

  .comment__avatar {
    display: none;
  }

  .comment__body {
    padding-top: 5px;
  }

  .comment_info {
    font-size: 14px;
    color: $colorAdditionalSecond;
  }

  .rte {
    p {
      padding-bottom: 20px;
    }
  }
}

@media (min-width: 481px) {
  .comment .comment__avatar {
    width: 70px;
    height: 70px;
    display: block;
    float: left;
    overflow: hidden;
    border-radius: 50%;
    border: 3px solid $colorNeutral;

    img {
      width: 70px;
      height: 70px;
    }
  }

  .comment .comment__body {
    margin-left: 100px;
  }
}

.btn {
  text-transform: uppercase;
  font-family: $bodyFontStack;
  font-weight: 800;
  letter-spacing: 1px;
}

.btn--default {
    text-align: center;
    color: $colorInverse;
    border-radius: 3px;
    display: inline-block;
    position: relative;
    overflow: hidden;
    background-color: #c79a48;
    z-index: 2;
    color: #fff;
    min-width: unset !important;
    cursor: pointer;
    padding: 10px 25px !important;
}

.btn--default:before {
  content: '';
  width: 120%;
  height: 480%;
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  background-color: $colorBtnPrimaryHover;
  @include transform(translate3d(-50%, -50%, 0) scale(0));
  @include transform-origin(50%, 50%);
  border-radius: 50%;
  opacity: 0;
  @include transition(all 300ms ease-in-out);
  z-index: -1;
}

.btn--default:hover:before {
  @include transform(translate3d(-50%, -50%, 0) scale(1));
  opacity: 1;
}

.btn--underlines {
  display: inline-block;
  color: $colorBtnPrimary;
  @include transition(all 300ms ease-in-out);

  svg {
    display: block;
    margin: 0 auto;
  }

  svg path {
    fill: $colorBtnPrimary;
  }

  &:hover {
    color: $colorBtnPrimaryHover;

    svg path {
      fill: $colorBtnPrimaryHover;
    }
  }
}

.btn--underlines-container {
  display: inline-block;

  svg {
    display: block;
    margin: 0 auto;
  }

  .btn--underlines + svg path {
    fill: $colorHighlight;
  }

  .btn--underlines:hover + svg path {
    fill: $colorPrimary;
  }
}

.btn--underlines-disable .btn--underlines {
  color: $colorAdditionalSecond;
}

.btn--underlines-disable .btn--underlines + svg path,
.btn--underlines-disable .btn--underlines:hover + svg path {
  fill: $colorAdditionalSecond;
}

.btn--full {
  width: 100%;
}

.btn--text {
  padding: 10px;
  cursor: pointer;
}

.btn--disabled {
  background-color: #ada2a4;

  &:hover:before {
    display: none;
  }
}

.text-link--form {
  color: lighten(desaturate(adjust-hue($colorPrimary, 10.2674), 3.8939), 32.9412);
  text-transform: lowercase;
  @include transition(opacity 300ms ease-in-out);
}

.text-link--form:hover {
  opacity: .4;
}

.text-link--default {
  font-weight: 600;
  color: $colorLink;

  &:hover {
    color: $colorLinkHover;
  }
}

.text-link--inverse {
  font-weight: 600;
  color: $colorLinkHover;

  &:hover {
    color: $colorLink;
  }
}

.text-link--default-upper {
  text-transform: uppercase;
  font-weight: 800;
}

.collection__toolbar {
  .collection__toolbar-views {
    text-align: center;

    .grid-view,
    .list-view {
      margin-bottom: 5px;
      padding: 10px;
      display: inline-block;
    }

    .svg-icon path {
      fill: $colorAdditionalSecond;
      @include transition(all 300ms ease-in-out);
    }
  }

  .collection__filters {
    text-align: center;
  }
}

.collection__toolbar .collection__toolbar-views .grid-view .svg-icon path {
  fill: $colorPrimary;
}

.collection__toolbar .collection__toolbar-views .list-view:hover .svg-icon path {
  fill: $colorHighlight;
}

.collection__toolbar.collection__toolbar--list .grid-view .svg-icon path {
  fill: $colorAdditionalSecond;
}

.collection__toolbar.collection__toolbar--list .grid-view:hover .svg-icon path {
  fill: $colorHighlight;
}

.collection__toolbar.collection__toolbar--list .list-view .svg-icon path,
.collection__toolbar.collection__toolbar--list .list-view:hover .svg-icon path  {
  fill: $colorPrimary;
}

.collections-list-wrapper {
  padding-top: 50px;
  padding-bottom: 20px;
  overflow: hidden;
  text-align: center;
}

.collection-wrapper {
  margin: 0 -9px;
  text-align: center;
}

.collections-list {
  padding-top: 47px;
  text-align: center;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;

  .collections-list__item {
    margin-right: 3px;
    margin-bottom: 55px;
    max-width: 257px;
    display: inline-block;
    text-align: center;
    box-sizing: border-box;

    &:last-child {
      margin-right: 0;
    }
  }

  .collections-list__link {
    width: 257px;
    height: 257px;
    display: block;
    vertical-align: middle;
    line-height: 0;
    background-color: $colorNeutral;
    position: relative;
    overflow: hidden;
    @include transition(background-color 320ms ease-in-out);
  }

  .collections-list__link img {
    height: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate3d(-50%, -50%, 0);
    transform: translate3d(-50%, -50%, 0);
  }

  .img-holder--no-product {
    border: 4px solid #f5f4f4;
    box-sizing: border-box;
  }

  .img-holder--no-product img{
    @include transform(translate3d(-50%, -50%, 0));
  }

  .collections-list__title {
    margin-top: 12px;
    font-size: 18px;
    @include transition(background-color 320ms ease-in-out);
  }

  .collections-list__item:hover {
    .collections-list__link {
      background-color: $colorHighlight;
    }

    .collections-list__title {
      color: $colorHighlight;
    }
  }
}

.customer-sidebar {
  padding-top: 33px;
  width: 100%;

  .customer__name {
    font-size: 18px;
    font-weight: bold;
  }

  .customer__logout-link a {
    padding: 15px 0;
    font-weight: 600;
    color: $colorLink;

    &:hover {
      color: $colorLinkHover;
    }
  }

  .text-link--default,
  .customer__logout-link {
    padding: 15px 0;
  }

  .text-link--default:last-child {
    display: block;
  }
}

@media (min-width: 769px) {
  .customer-sidebar {
    max-width: 260px;
    float: right;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .customer-sidebar {
    max-width: 210px;
  }
}

.orders {
  padding-top: 33px;
  width: 100%;
  text-align: center;
}

.orders a:hover {
  color: $colorHighlight;
}

.orders-empty {
  .orders-empty__info {
    padding-bottom: 53px;
  }
}

.order-cancelled {
  margin: 10px 0;
  padding: 20px;
  max-width: 640px;
  display: inline-block;
  font-size: 14px;
  text-align: center;
  border: 3px solid $colorAccent;
  box-sizing: border-box;

  .order-cancelled__reason {
    padding: 16px 0 12px 0;
    font-size: 16px;
    font-weight: 600;
  }

  a {
    font-weight: 600;
    color: $colorLink;

    &:hover {
      color: $colorLinkHover;
    }
  }

  p:last-child {
    line-height: 30px;
  }
}

.table--orders {
  tbody tr td:nth-child(1) {
    width: 17%;
  }

  tbody tr td:nth-child(2) {
    width: 17%;
  }

  tbody tr td:nth-child(3) {
    width: 26%;
  }

  tbody tr td:nth-child(4) {
    width: 26%;
  }

  tbody tr td:nth-child(5) {
    width: 14%;
  }
}

.table--order {
  tbody tr td:nth-child(1) {
    width: 52%;
  }

  tbody tr td:nth-child(2) {
    width: 12%;
  }

  tbody tr td:nth-child(3) {
    width: 12%;
  }

  tbody tr td:nth-child(4) {
    width: 12%;
  }

  tbody tr td:nth-child(5) {
    width: 12%;
  }
}

/* Media styles */
@media (min-width: 769px) {
  .orders {
    width: 67.5%;
    float: left;
  }

  .order-cancelled {
    padding: 20px 100px;
  }
}

/* Address
/* -------------------------------------------------------------------------- */
.address {
  font-size: 16px;
  font-style: normal;
  line-height: 30px;
}

.address--customer {
  padding: 20px 0 30px 0;
}

.addresses-container {
  padding-top: 35px;
  text-align: center;
}

.address-wrapper {
  margin-left: 10px;
  padding-bottom: 60px;
  display: inline-block;
  text-align: left;

  .heading--add-small {
    margin-bottom: 18px;
  }
}

.addresses-container--account {
  padding-top: 50px;
  overflow: hidden;

  .address-wrapper {
    padding: 0;
    margin: 0 20px;
    margin-bottom: 40px;
    min-width: 220px;
    min-height: 300px;
    position: relative;
    background-color: $colorNeutral;
  }

  .address {
    padding: 41px 15px 20px 37px;
    position: relative;
    vertical-align: top;
  }

  .address__mark {
    padding: 4px 11px 0px;
    position: absolute;
    top: 9px;
    right: 11px;
    font-size: 11px;
    font-weight: bold;
    line-height: 18px;
    text-transform: uppercase;
    background-color: rgba($colorAccent, .6);
  }
}

.address-actions {
  position: absolute;
  bottom: 32px;
  right: 24px;
  text-align: right;

  a {
    padding: 12px 0px 12px 35px;
    font-size: 16px;
    font-weight: 600;
    color: $colorLink;

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

.add-address {
  padding-top: 13px;
  text-align: center;

  .icon--plus {
    margin-left: -25px;
    padding-right: 35px;
    display: inline-block;

    &:before,
    &:after {
      background-color: $colorLink;
    }
  }

  .text-link--default:hover .icon--plus:before,
  .text-link--default:hover .icon--plus:after {
    background-color: $colorLinkHover;
  }
}

/* Media styles */
@media (min-width: 481px) {
  .address-wrapper {
    margin-left: 45px;
  }

  .addresses-container--account .address-wrapper {
    float: left;
  }
}

@media (min-width: 769px) {
  .address-wrapper {
    margin-left: 45px;
    display: inline-block;

    &:nth-child(2) {
      padding-left: 110px;
    }
  }
}





/* Drawers
/* -------------------------------------------------------------------------- */
.drawer {

  .drawer__btn-close {
    padding: 10px 10px;
    position: absolute;
    top: 10px;
    right: 11px;
    cursor: pointer;

    &:hover .icon--close:before,
    &:hover .icon--close:after {
      background-color: $colorHighlight;
    }
  }

  .drawer__header {
    text-align: center;
  }

  &.open {
    z-index: 7;
  }
}

// Drawer menu
.drawer--menu {
  .drawer__header {
    padding: 35px 0;
  }

  .site-logo {
    display: inline-block;
    vertical-align: middle;
/*     line-height: 150px; */
    z-index: 1111;
  }

  .store-desc {
    margin: 0 12px;
    display: inline-block;
    font-family: $headerTextFontStack;
    font-size: 14px;
    font-style: italic;
    line-height: 20px;
    @include transition(opacity 300ms ease-in-out);
  }

  & > .store-desc {
    margin-top: 10px;
    position: absolute;
    top: 0;
    left: 50%;
    width: 100%;
    max-width: 200px;
    text-align: center;
    @include transform(translatex(-50%));
    z-index: -1;
  }

  .drawer__header > .store-desc {
    display: none;
    @include transform(translate3d(0, -30px, 0));
  }
}

// Drawer cart
.drawer--cart {

  .drawer__header {
    padding: 19px 20px;
  }

  .drawer--cart-total {
    display: none;
  }

  .drawer__wrapper {
    background-color: $colorNeutral;
  }

  .drawer__btn-open {
    left: auto;
    top: 6px;
    right: 37px;
    min-width: 0px;
    -webkit-transition: color 300ms ease-in-out, transform 450ms cubic-bezier(0.5, 0.13, 0.5, 0.87);
        -ms-transition: color 300ms ease-in-out, transform 450ms cubic-bezier(0.5, 0.13, 0.5, 0.87);
            transition: color 300ms ease-in-out, transform 450ms cubic-bezier(0.5, 0.13, 0.5, 0.87);


    &:hover {
      color: $colorHighlight;

      .svg-icon path {
        fill: $colorHighlight;
      }
    }
  }

  .drawer__btn-close {
    top: 6px;
    right: 8px;
  }

  .drawer__header {
    .heading--add-small {
      text-align: left;
    }
  }
}


@media (min-width: 769px) {

  .drawer--menu.open {
    z-index: 4 !important;
  }

  .drawer--menu .drawer__wrapper .site-logo {
    display: inline-block;
  }

  .drawer--cart .drawer--cart-total {
    padding-top: 0;
    display: block;
    float: right;
    font-size: 16px;
    font-weight: 500;
  }

  .drawer--cart .drawer__btn-open {
    min-width: 100px;
  }
}



/* Navigation
/* -------------------------------------------------------------------------- */
.nav-list {

  .nav-list__item{
    @include transition(background-color 310ms ease-in-out);
  }

  .nav-list__item:hover {
    background-color: $colorNeutral;

    .icon--plus-small:before,
    .icon--plus-small:after {
      background-color: $colorPrimary;
    }
  }

  .nav-list__link {
    padding: 15px 38px 14px 38px;
    display: block;
    color: #fff;
    position: relative;
    z-index: 2;
  }

  .has-dropdown {
    position: relative;

    .icon--plus-small {
      padding: 16px 40px 17px 12px;
      position: absolute;
      top: 8px;
      right: 0px;
      cursor: pointer;
      z-index: 1;

      &:before,
      &:after {
        left: 17px;
        -webkit-transition: background-color 310ms ease-in-out, opacity 310ms ease-in-out;
                transition: background-color 310ms ease-in-out, opacity 310ms ease-in-out;
      }
    }
  }

  .nav-list__dropdown {
    background-color: $colorNeutral;

    .nav-list__item > .nav-list__link {
      padding: 9px 38px 10px 59px;

      &:hover {
        color: $colorLink;
      }
    }

    .nav-list__item:last-child > .nav-list__link {
      padding-bottom: 27px;
    }

    .nav-list__dropdown .nav-list__item > .nav-list__link {
      padding-left: 79px;
    }

    & > .nav-list__item--add {
      .nav-list__image,
      .nav-list__desc {
        display: none;
      }

      .nav-list__title {
        font-family: $bodyFontStack;
        font-size: 16px;
        font-weight: normal;
      }
    }
  }

  .has-dropdown.show-dropdown {
    background-color: $colorNeutral;

    & > .icon--plus-small {
      background-color: $colorNeutral;

      &:before,
      &:after {
        background-color: $colorAdditionalSecond;
      }
    }

    & > .nav-list__link {
      color: $colorAdditionalSecond;
    }

    & > .icon--plus-small:after {
      opacity: 0;
    }
  }

  .has-dropdown.show-dropdown > .nav-list__dropdown {
    display: block;
  }

  .has-dropdown > .nav-list__dropdown{
    display: none;
  }

  .nav-list__item--divider {
    margin: 37px 0;
    width: 100%;
    height: 3px;
    background-color: $colorNeutral;

    &:hover {
      background-color: $colorNeutral;
    }
  }

  .nav-list__item--logout-desktop {
    display: none;
  }
}

.nav-list .form-wrapper {
  padding: 0 38px;
}


/* Media styles */
@media (min-width: 769px) {
  .drawer--menu {
    position: relative;

    .drawer__btn-close,
    .drawer__btn-open {
      display: none;
    }

    .drawer__header {
      margin: 0 auto;
      padding: 17px 0;
    }

    .store-desc--mobile {
      display: none;
    }
  }

  .drawer--menu .drawer__header>.store-desc {
    display: inline-block;
  }

  .nav-list {
    margin: 0 auto;
    padding-top: 7px;
    width: 100%;
/*    max-width: 1200px; */
/*    height: 84px; */
    position: relative;
    text-align: center;
    display: flex;
    justify-content: space-around;
    font-weight:bold;
/*     width:80%; */
    align-items:center;

    .nav-list__item {
      display: inline-block;

      &:hover {
        background-color: transparent;
      }

      &:hover .nav-list__link {
        color: $colorLink;
      }

      &.has-dropdown:hover .nav-list__link:before,
      &.has-dropdown:hover .nav-list__link:after {
        background-color: $colorLink;
      }

      &.active .nav-list__link {
        color: $colorHighlight;
      }

      &.active .nav-list__link:before,
      &.active .nav-list__link:after {
        background-color: $colorHighlight;
      }
    }

    & > .has-dropdown {
      position: relative;

      .nav-list__dropdown {
        background-color: $colorInverse;
      }

      & > .nav-list__dropdown {
        padding: 40px 60px;
        width: 100%;
         max-width: 1000px;
        max-width: 100%;
        display: block;
        position: absolute;
        top: 75%;
        left: 50%;
        text-align: left;
        box-sizing: border-box;
        opacity: 0;
        visibility: hidden;

        @include transition(opacity 320ms ease-in-out);
        @include transform(translateX(-50%));
        -webkit-box-shadow: 0px 10px 30px 0px rgba($colorPrimary,0.1);
                box-shadow: 0px 10px 30px 0px rgba($colorPrimary,0.1);

        &:hover {
          display: block;
        }

        .icon--plus-small {
          display: none;
        }
      }

      &:hover {
        & > .nav-list__dropdown {
          visibility: visible;
          opacity: 1;
        }
      }
    }

    .has-dropdown--tertiary {
      position: static;
    }

    & > .has-dropdown > .nav-list__link {
      padding: 25px 0px 25px 0px;
      position: relative;

      &:before,
      &:after {
        margin: 0px -3px;

        @include content-tr(35px, -14px, 8px, 2px, $colorTextBody);
        @include transition(background-color 250ms ease-in-out);
      }

      &:after {
        margin: -3px 0;
        width: 2px;
        height: 8px;
        opacity: 1;
        @include transition(all 250ms ease-in-out);
      }
    }

    & > .has-dropdown:hover > .nav-list__link:after {
      opacity: 0;
      @include transform(translateY(100%));
    }

    & > .has-dropdown > .nav-list__dropdown > .has-dropdown > .nav-list__dropdown,
    & > .has-dropdown > .nav-list__dropdown > .has-dropdown {
      position: relative;
      float: left;
    }

    & .has-dropdown > .nav-list__dropdown > .nav-list__item {
      padding-right: 7%;
    }

    .has-dropdown--tertiary > .nav-list__dropdown > .nav-list__item {
      max-width: 160px;
      width: 100%;
    }

    & > .has-dropdown > .nav-list__dropdown > .nav-list__item:last-child {
      padding-right: 0px;
    }

    & > .has-dropdown--tertiary > .nav-list__dropdown > .nav-list__item > .nav-list__link {
      padding: 0;
      font-family: $additionalBodyFontStack;
      font-size: 14px;
      color: $colorTextBody;
      text-transform: uppercase;
      line-height: 1.4;
    }

    & > .has-dropdown > .nav-list__dropdown > .has-dropdown > .nav-list__dropdown,
    & > .has-dropdown > .nav-list__dropdown > .has-dropdown > .nav-list__dropdown .nav-list__item {
      display: block;
    }

    & > .has-dropdown > .nav-list__dropdown > .has-dropdown > .nav-list__dropdown {
      padding: 5px 0;
    }

    & > .has-dropdown > .nav-list__dropdown > .has-dropdown > .nav-list__dropdown .nav-list__link {
      padding: 7px 0 7px 0;
      color: $colorAdditionalSecond;
      text-transform:capitalize;

      &:hover {
        color: $colorPrimary;
      }
    }

    .nav-list__link {
      padding: 25px 0px;
      white-space: normal;

    }

    .nav-list__item--search,
    .nav-list__item--logout,
    .nav-list__item--creat-account,
    .nav-list__item--currency,
    .nav-list__item--divider,
    .nav-list__item .icon--plus-small,
    .nav-list__item--login.has-dropdown .nav-list__link:before,
    .nav-list__item--login.has-dropdown .nav-list__link:after,
    .nav-list__item--login.has-dropdown:hover .nav-list__dropdown,
    .nav-list__item.has-dropdown:hover > .nav-list__dropdown .nav-list__link:before,
    .nav-list__item.has-dropdown:hover > .nav-list__dropdown .nav-list__link:after,
    .nav-list__item--login.has-dropdown .icon--plus-small {
      display: none;
    }

    .nav-list__item--logout-desktop {
      display: block;
    }

    .has-dropdown .icon--plus-small {
      padding: 0;
      margin-top: -4px;
      top: 50%;
      right: 20px;
      background-color: transparent;
    }

    & > .has-dropdown > .nav-list__dropdown.nav-list__dropdown--secondary {
      padding: 0;
      width: auto;
      min-width: 200px;
    }

    & > .has-dropdown.nav-list__item--mega {
      position: static;
    }

    & > .has-dropdown.nav-list__item--mega > .nav-list__dropdown {
      padding: 50px 40px;
      width: 100%;
      text-align: center;
    }

    & > .has-dropdown.nav-list__item--mega > .nav-list__dropdown > .nav-list__item {
      display: inline-block;
      max-width: 200px
    }

    & > .has-dropdown.nav-list__item--mega >.nav-list__dropdown.nav-list__dropdown--secondary > .nav-list__item {
      display: inline-block;
    }

    & > .has-dropdown.nav-list__item--mega > .nav-list__dropdown > .nav-list__item .nav-list__desc {
      text-align: left;
    }

    & > .has-dropdown > .nav-list__dropdown.nav-list__dropdown--secondary > .nav-list__item {
      padding-right: 0;
      display: block;
    }

    & > .has-dropdown > .nav-list__dropdown.nav-list__dropdown--secondary > .nav-list__item > .nav-list__link {
      padding: 7px 40px;
      color: $colorAdditionalSecond;
    }

    & > .has-dropdown > .nav-list__dropdown.nav-list__dropdown--secondary > .nav-list__item > .nav-list__link:hover {
      color: $colorPrimary;
    }

    & > .has-dropdown:not(.nav-list__item--mega) > .nav-list__dropdown.nav-list__dropdown--secondary > .nav-list__item:first-child > .nav-list__link {
      padding-top: 21px;
    }

    & > .has-dropdown > .nav-list__dropdown.nav-list__dropdown--secondary > .nav-list__item:last-child > .nav-list__link {
      padding-bottom: 31px;
    }

    .nav-list__item--mega > .nav-list__dropdown {
      padding: 50px 40px;
    }

    .nav-list__dropdown > .nav-list__item--add {
      .nav-list__link {
        padding: 0;
      }

      .nav-list__image,
      .nav-list__desc {
        display: block;
      }

      .nav-list__image {
        max-height: 70px;
        text-align: center;

        img {
          height: 100%;
        }
      }

      .nav-list__title {
        margin-top: 25px;
        font-family: $additionalBodyFontStack;
        color: $colorTextBody;
        text-transform: uppercase;
        text-align: center;
      }

      .nav-list__desc {
        margin-top: 20px;
        font-family: $bodyFontStack;
        font-size: 14px;
        line-height: 20px;
        color: $colorAdditionalSecond;
        text-transform: none;

        em {
          font-family: $additionalBodyFontStack;
          font-style: italic;
          color: $colorTextBody;
        }
      }
    }

    .has-dropdown > .nav-list__dropdown > .nav-list__item--add {
      padding-right: 35px;
      max-width: 200px;
      vertical-align: top;

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

  .nav-list .currency-picker {
    display: none;
  }

  .drawer--cart {
    .drawer__btn-open {
      top: 49px;
    }
  }

  .nav-list .has-dropdown.show-dropdown {
    background-color: transparent;
  }

  .nav-list .has-dropdown.show-dropdown:not(.active) > .nav-list__link {
    color: $colorTextBody;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .drawer--menu .drawer__header>.store-desc {
    display: none;
  }

  .nav-list > .has-dropdown--tertiary > .nav-list__dropdown > .nav-list__item {
    margin-bottom: 30px
  }

  .nav-list > .has-dropdown > .nav-list__dropdown {
    padding-bottom: 30px;
  }

  .nav-list  > .has-dropdown.nav-list__item--mega > .nav-list__dropdown.nav-list__dropdown--secondary {
    width: 80%;
  }

  .nav-list  > .has-dropdown.nav-list__item--mega > .nav-list__dropdown > .nav-list__item {
    max-width: 40%;
  }

  .nav-list__item--mega > .nav-list__dropdown {
    padding-bottom: 0;
  }

  .nav-list > .has-dropdown > .nav-list__dropdown > .nav-list__item--add {
    padding-right: 12px;
    padding-left: 12px;
    margin-bottom: 50px;
    max-width: 45%;
  }
}



/* Shopping cart
/* -------------------------------------------------------------------------- */
.cart-wrapper {
  background-color: $colorNeutral;
  height: 100%;

}

.cart {
  padding: 20px 40px 60px 40px;
  height: auto;/*ios scroll needed*/
  min-height: 100%;/*ios scroll needed*/
  box-sizing: border-box;

  .cart-header {
    padding: 4px 0 25px 0;

    .cart-header__item {
      padding: 0 5px 0 26px;
      float: right;
      font-family: $additionalBodyFontStack;
      font-size: 12px;
      text-transform: uppercase;
    }
  }

  .cart__block {
    padding-top: 16px;
  }

  .cart__total {
    padding-top: 35px;
    padding-bottom: 20px;

    .heading--add-small {
      float: left;
    }

    .cart-total {
      margin-top: -13px;
      float: right;
      font-weight: 500;
      font-size: 24px;
    }

    .cart-total__info {
      padding-top: 13px;
      font-size: 14px;
      line-height: 20px;
      color: $colorAdditionalSecond;
    }
  }

  .update-cart {
    margin-right: 13px;
    margin-top: -3px;
    float: right;
    font-weight: 600;
    color: $colorHighlight;

    span:first-child {
      padding-right: 10px;
      opacity: 1;
      vertical-align: top;
      @include transition(opacity 300ms ease-in-out);
    }

    .icon {
      margin-top: 2px;
      opacity: 1;
      display: inline-block;
    }

    .svg-icon path {
      fill: $colorPrimary;
      @include transition(fill 300ms ease-in-out);
    }

    &:hover{
      span:first-child {
        opacity: 1;
      }

      .svg-icon path {
        fill: $colorHighlight;
      }
    }
  }

  .update-cart.updating .svg-icon {
    @include animation(rotateUpdate 300ms ease-in-out 0s infinite);
  }

  .cart__note.form {
    div:nth-child(2) {
      margin-top: 13px;
    }

    .form__field--textarea {
      margin-top: 0;
    }
  }

  .cart__checkout-btn {
/*     padding-bottom: 55px; */
  }

  .cart__shipping-calculator {
    padding-top: 47px;
  }

  .form--default .form__field--textarea {
    margin-top: 13px;
    margin-bottom: 30px;
    width: 100%;
    max-height: 120px;
  }

  .cart-list__item {
    padding: 10px 0 30px 0;
    position: relative;
    overflow: hidden;
    text-align: right;

    & > div {
      float: left;
    }
  }

  .cart-list__item--img {
    padding-right: 6px;

    img {
      @include transform(translate3d(-50%, -50%, 0));
    }
  }

  .cart-list__item--title {
    width: 90px;
    line-height: 77px;
    text-align: left;

    a {
      display: inline-block;
      vertical-align: middle;
      font-size: 14px;
      line-height: 20px;
      color: $colorTextBody;
    }
  }

  div.cart-list__item--price {
    padding: 25px 0;
    width: 60px;
    font-size: 14px;
    font-weight: 500;
    float: right;
    text-align: right;
  }

  div.cart-list__item--quantity {
    padding-left: 4px;
    width: 40px;
    height: 40px;
    text-align: center;
    display: inline-block;
    float: none;

    .icon {
      margin-top: 0;
      margin-left: 3px;
    }

    .icon,
    .icon:last-child {
      float: none;
    }
  }

  .cart-list__item--special {
    padding: 46px 0 0 0;
    width: 100%;
    display: inline-block;
    vertical-align: middle;
    font-size: 14px;
    line-height: 20px;
    color: $colorTextBody;

    .cart-list__item--price {
      float: right;
    }

    .cart-list__item--remove {
      display: none;
    }
  }

  .cart-list__item--remove {
    position: absolute;
    top: 9px;
    left: 0;
    z-index: 2;

    a {
      padding: 5px 4px;
      width: 25px;
      height: 25px;
      box-sizing: border-box;
      display: block;
      background-color: $colorInverse;
      border-radius: 50%;
      @include transition(background-color 300ms ease-in-out);
    }

    a:hover {
      background-color: $colorBtnPrimaryHover;
    }

    a:hover .icon:before,
    a:hover .icon:after {
      background-color: $colorInverse;
    }
  }

  .cart__block .form__field--placeholder  {
    @include transform-origin(0, 0);
  }
}

@-webkit-keyframes rotateUpdate {
  100% {
    @include transform(rotate(180deg));
  }
}

@keyframes rotateUpdate {
  100% {
    @include transform(rotate(180deg));
  }
}

.cart.cart--lg {
  padding: 25px 0;

  .cart-header .cart-header__item:first-child {
    width: 39px;
  }

  .cart-list .cart-list__item {
    text-align: right;
  }

  .cart-list__item .cart-list__item--img,
  .cart-list__item .cart-list__item--title {
    float: left;
    text-align: left;
  }

  .cart-list__item .cart-list__item--remove,
  .cart-list__item .cart-list__item--price,
  .cart-list__item .cart-list__item--quantity {
    display: inline-block;
    float: none;
    vertical-align: top;
  }

  .cart-list__item .cart-list__item--img {
    padding-left: 7px;
  }

  .cart-list__item--special .cart-list__item--price {
    float: right;
  }

  .cart-list__item--special .cart-list__item--remove {
    display: none;
  }

  .cart-list__item--special .cart-list__item--title {
    width: 43%;
  }

  .cart-list__item--title {
    width: 28%;
  }

  .cart-list__item--quantity {
    margin-top: -8px;
  }

  .cart-list__item--remove {
    padding: 0 12px;
    box-sizing: border-box;
  }

  .cart-list__item--remove a {
    padding: 5px 5px;
  }

  .cart-list__item--price {
    padding: 18px 11px 25px 0;
  }

  .cart-list__item--remove {
    top: 7px;
    left: -7px;
  }

  .icon--delete:before,
  .icon--delete:after {
    width: 13px;
  }

  .cart__checkout-btn,
  .shipping-calculator .field-full {
    float: right;
    min-width: 100%;
  }

  .form--default {
    max-width: 100%;
  }

  .cart-empty {
    height: 60vh;
  }
}

/* Media styles */
@media (min-width: 481px) {
  .cart--lg .cart__checkout-btn,
  .cart--lg .shipping-calculator .field-full {
    min-width: 280px;
  }
}

@media (min-width: 769px) {
  .cart--lg {
    padding: 25px 20px;

    form > .heading--add-small {
      margin-bottom: -23px;
      padding-left: 15px;
    }

//    .cart-header .cart-header__item:first-child {
//      width: 88px;
//    }

    .cart-list__item--title {
      width: 360px;
    }

    .cart-list__item .cart-list__item--img {
      padding-left: 0;
    }

    .cart-list__item--quantity {
      margin-top: 0;
    }

    .cart-list__item--price {
      width: 76px;
    }

    .icon--delete:before,
    .icon--delete:after {
      width: 15px;
    }
  }
}

.cart-empty {
  height: 100%;
  position: relative;
  text-align: center;

  .cart-empty__wrapper {
    width: 100%;
    position: absolute;
    top: 150px;
    @include transform(translateY(-20%));
  }

  .cart-empty__info {
    padding-top: 20px;
    font-size: 14px;
    line-height: 20px;
  }

  .btn {
    margin-top: 57px;
  }
}

// Terms & conditions
  .terms_and_conditions_checkbox:checked ~ .terms_and_conditions_text{
    display:none;
  }

// Special packing
.special-packing {

  .special-packing__block {
    padding-top: 15px;
    overflow: hidden;

    .special-packing__item:nth-child(2) {
      float: left;
    }

    .special-packing__item:nth-child(3) {
      float: right;
    }
  }

  .special-packing__item {
    display: block;
    cursor: pointer;

    input {
      display: none;
    }

    label {
      padding: 8px 13px;
      display: inline-block;
      font-size: 14px;
      color: $colorInverse;
      background-color: $colorAdditionalSecond;
      border-radius: 3px;
      cursor: pointer;
    }

    input:checked + label {
      padding-right: 33px;
      background-color: $colorPrimary;
      background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWlkWU1pZCIgd2lkdGg9IjEyIiBoZWlnaHQ9IjE0IiB2aWV3Qm94PSIwIDAgMTIgMTQiPiAgPHBhdGggZmlsbD0iI2ZmZiIgZD0iTTExLjg2NiwyLjMwNCBMNS44NjYsMTIuNjk2IEM1LjU5MCwxMy4xNzQgNC45NzgsMTMuMzM4IDQuNTAwLDEzLjA2MiBDNC4yNjQsMTIuOTI2IDQuMTA3LDEyLjcwOCA0LjAzOSwxMi40NjUgQzMuODc4LDEyLjM4MSAzLjczMiwxMi4yNjcgMy42MzQsMTIuMDk4IEwwLjYzNCw2LjkwMiBDMC4zNTgsNi40MjQgMC41MjIsNS44MTIgMS4wMDAsNS41MzYgQzEuNDc4LDUuMjYwIDIuMDkwLDUuNDI0IDIuMzY2LDUuOTAyIEw0LjkyMywxMC4zMzAgTDEwLjEzNCwxLjMwNCBDMTAuNDEwLDAuODI1IDExLjAyMiwwLjY2MiAxMS41MDAsMC45MzggQzExLjk3OCwxLjIxNCAxMi4xNDIsMS44MjYgMTEuODY2LDIuMzA0IFoiIGNsYXNzPSJjbHMtMSIvPjwvc3ZnPg==);
      background-repeat: no-repeat;
      background-position: 88% 50%;
    }

    input:checked + label .special-packing__price {
      display: none;
    }
  }
}

/* Media styles */
@media (min-width: 769px) {
  .special-packing {
    .heading--add-small {
      padding-top: 10px;
      float: left;
    }

    .special-packing__block {
      padding-top: 0;
      float: right;
    }

    .special-packing__block .special-packing__item:nth-child(2) {
      margin-right: 22px;
    }
  }
}


/* Shipping calculator
/* -------------------------------------------------------------------------- */
.shipping-calculator {

  .shipping-calculator__container {
    margin-top: 0;
    padding-top: 15px;
  }

  .field input {
    padding: 21px 8px 22px 19px;
    font-size: 14px;
    background-color: $colorInverse;
    width: 100%;
    box-sizing: border-box;
  }

  .field-full {
    margin-top: 21px;
  }

  .dropdown .dropdown__button {
    min-height: 59px;
  }

  #wrapper-response {
    font-size: 14px;
    text-align: center;
  }

  #shipping-rates-feedback {
    padding-top: 20px;
  }

  #shipping-rates {
    padding-bottom: 20px;
  }
}

/* Media styles */
@media (min-width: 769px) {

  .cart{
    .cart-header{
      .cart-header__item:first-child {
        width: 30px;
      }

      .cart-header__item:last-child {
        width: 60px;
      }
    }

    .cart-list__item--img {
      padding: 0;
      width: 85px;
    }

    .cart-list__item--title {
      width: 304px;
    }

    div.cart-list__item--quantity {
      padding-top: 19px;
      padding-left: 0;
      width: 90px;
      text-align: center;

      .icon {
        margin-top: 10px;
        margin-left: 0;
        float: right;
        vertical-align: inherit;

        &:last-child {
          margin-left: 0px;
          float: left;
        }
      }

      input {
        margin-left: 8px;
        margin-right: 0;
        width: 40px;
      }

      .icon--arrow-up,
      .icon--arrow-down {
        margin-top: 11px;
        @include transform(rotate(90deg));
      }
    }

    div.cart-list__item--price {
      width: 72px;
    }

    .cart-list__item--remove {
//      padding: 0;
//      width: 42px;
//      position: relative;
//      top: auto;
//      display: block;
//      text-align: right;

//      a {
//        width: auto;
//        height: auto;
//        display: inline-block;
//        padding: 28px 0 10px 10px;
//        background-color: transparent;
//        border-radius: 0;
//      }

//      a:hover {
//        background-color: transparent;
//      }
//
//      a:hover .icon:before,
//      a:hover .icon:after {
//        background-color: $colorHighlight;
//      }

//      .icon {
//        margin: 0 auto;
//      }
    }

    .form--default {
      max-width: 100%;
    }
  }

  .shipping-calculator {
    .field {
      margin-right: 16px;
      float: left;

      &:nth-child(3) {
        margin-right: 0;
      }
    }

    .dropdown {
      margin-left: 0;
      width: 172px;

      .dropdown-list-wrapper {
        max-width: 190px;
      }
    }

    .field-full {
      margin-top: 0px;
    }
  }
}

/* Additional mobile menu (with search icon and links)
/* -------------------------------------------------------------------------- */
.additional-mobile-menu {
  width: 100%;
  position: fixed;
  top: 0;
  z-index: 10;

  @include transform(translate3d(0, -100%, 0));
  -webkit-backface-visibility: hidden;
}

.additional-mobile-menu.show {
  @include animation( showBar 500ms cubic-bezier(0.55, 0, 0, 1.195) 0ms forwards);
}

// Show fixed bar
@keyframes showBar {
  0% {
    @include transform(translate3d(0, -100%, 0));
  }

  0.1% {
    opacity: 1;
  }

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

@-webkit-keyframes showBar {
  0% {
    @include transform(translate3d(0, -100%, 0));
  }

  0.1% {
    opacity: 1;
  }

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

.additional-mobile-menu__list {
  width: 100%;
  background-color: $colorTopBar;
  text-align: center;

  .additional-mobile-menu__list-item {
    display: inline-block;
  }

  .additional-mobile-menu__list-link {
    padding: 15px 10px 17px 8px;
    display: inline-block;
    font-family: $additionalBodyFontStack;
    color: $colorTextBodyLight;
    text-transform: lowercase;
    vertical-align: middle;

    .icon {
      .svg-icon__path {
        fill: $colorInverse;
      }
    }
  }

  .additional-mobile-menu__list-item--search .additional-mobile-menu__list-link {
    padding: 5px 13px;
  }

  .additional-mobile-menu__list-item--search .icon {
    padding-top: 10px;
    display: inline-block;
  }
}

/* Media styles */
@media (min-width: 769px) {
  .additional-mobile-menu.show {
    display: none;
  }
}

/* ==========================================================================
   Forms
   ========================================================================== */
.form {
  .form__field,
  .form__select {
    padding: 11px 17px 11px 17px;
    width: 100%;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
  }

  .form__select {
    margin-bottom: 20px;
    font-size: 14px;
    color: $colorAdditionalSecond;
    background-color: $colorInverse;
  }

  input[type=checkbox] {
    display: none;
  }

  .form_checkbox-label {
    padding-left: 40px;
    position: relative;
    font-size: 14px;
    cursor: pointer;

    &:before {
      @include content-tl(-2px, 1px, 16px, 16px, $colorInverse);
      border-radius: 3px;
    }
  }

  input[type=checkbox]:checked + .form_checkbox-label:after {
    @include content-tl(0, 0, 16px, 16px, transparent);

    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWlkWU1pZCIgd2lkdGg9IjkiIGhlaWdodD0iNyIgdmlld0JveD0iMCAwIDkgNyI+ICA8cGF0aCBmaWxsPSIjNWM0YjUxIiBkPSJNOC4wNTIsMS42NzcgTDUuMTY3LDYuMzIzIEM1LjE1Miw2LjM1MiA1LjEzNCw2LjM3OSA1LjExNSw2LjQwNyBMNS4wOTAsNi40NDggQzUuMDYxLDYuNDg5IDUuMDIwLDYuNTEyIDQuOTg3LDYuNTQ3IEM0Ljk1MSw2LjU4NCA0LjkyNyw2LjYyOSA0Ljg4NCw2LjY2MCBDNC44NzYsNi42NjYgNC44NjYsNi42NjcgNC44NTgsNi42NzIgQzQuNTI0LDYuOTIyIDQuMDYyLDYuOTU1IDMuNjk5LDYuNzA2IEMzLjU0Miw2LjU5OCAzLjQ0MSw2LjQ0NiAzLjM2OSw2LjI4NCBMMS4xMjMsMy4yMTcgQzAuNzk3LDIuNzcxIDAuODkzLDIuMTQ2IDEuMzM5LDEuODE5IEMxLjc4NSwxLjQ5MyAyLjQxMCwxLjU5MCAyLjczNywyLjAzNSBMNC4yMjAsNC4wNjEgTDYuNDAzLDAuNTQ1IEM2LjcxNiwwLjA5MCA3LjMzOSwtMC4wMjYgNy43OTQsMC4yODcgQzguMjQ5LDAuNTk5IDguMzY1LDEuMjIyIDguMDUyLDEuNjc3IFoiIGNsYXNzPSJjbHMtMSIvPjwvc3ZnPg==);
    background-repeat: no-repeat;
    background-position: 5px 3px;
  }

  .form__row {
    position:relative;
  }

  .form__row-block {
    position: relative;
    z-index: 2;
  }

  .error {
    margin-bottom: 20px;
    padding: 17px 17px;
    width: 100%;
    height: 100%;
    position: relative;
    text-align: left;
    border: 3px solid $colorHighlightSecond;
    background-color: $colorInverse;
    box-sizing: border-box;
    @include transform(scale(0));
    @include transform-origin(50%,  0%);

    .error__message {
      padding: 5px 29px 5px 48px;
      font-size: 14px;
      line-height: 20px;

      span {
        font-weight: 600;
        color: $colorHighlight;
      }
    }

    .error__counter {
      position: absolute;
      top: 22px;
      left: 30px;
      font-size: 16px;
      font-weight: bold;
      color: $colorHighlight;
    }

    .icon {
      padding: 10px 0;
      position: absolute;
      top: 11px;
      right: 2px;
      cursor: pointer;
    }

    .icon:before,
    .icon:after {
      width: 12px;
      background-color: $colorHighlight;
    }
  }
}

.form .error.show-message {
  @include animation(showError 320ms ease-in-out 0s forwards);
}

@-webkit-keyframes showError{
  0% {
    @include transform(scale(0));
  }
  100% {
    @include transform(scale(1));
  }
}

@keyframes showError{
  0% {
    @include transform(scale(0));
  }
  100% {
    @include transform(scale(1));
  }
}

.form .error.hide-message {
  @include animation(hideError 320ms ease-in-out 0s forwards);
}

@-webkit-keyframes hideError{
  0% {
    @include transform(scale(1));
  }
  100% {
    @include transform(scale(0));
  }
}

@keyframes hideError{
  0% {
    @include transform(scale(1));
  }
  100% {
    @include transform(scale(0));
  }
}

.label-hide {
  display: none;
}

.quantity-field {
  .icon {
    margin-top: 10px;
    width: 20px;
    height: 20px;
    float: right;
    cursor: pointer;
    vertical-align: middle;
    box-sizing: border-box;

    &:last-child {
      float: left;
    }
  }

  .icon--arrow-left:before,
  .icon--arrow-left:after,
  .icon--arrow-right:before,
  .icon--arrow-right:after {
    top: 3px;
  }

  .icon--arrow-left:after,
  .icon--arrow-right:after {
    margin-top: 3px;
  }

  input {
    margin-right: 3px;
    margin-top: -2px;
    margin-bottom: 2px;
    width: 100%;
    height: 40px;
    font-size: 14px;
    text-align: center;
    color: $colorTextAddHeader;
    background-color: $colorInverse;
    border-radius: 3px;
  }
}

.product-variants-radio-btns {
  padding: 34px 0 39px 0;
}

.product-variants-radio-btns .radio-btn {
  margin-right: 28px;
  display: inline-block;
  line-height: 16px;
  position: relative;
}

.product-variants-radio-btns .radio-btn:last-child {
  margin-right: 0;
}

.product-variants-radio-btns input[type=radio] {
  opacity: 0;
  visibility: hidden;
}

.product-variants-radio-btns label {
  padding-left: 25px;
  text-transform: uppercase;
  font-size: 12px;
  line-height: 20px;
  cursor: pointer;
  position: relative;
  z-index: 1;
}

.product-variants-radio-btns input:checked + label {
  font-weight: bold;
}

.product-variants-radio-btns input:disabled + label {
  opacity: .5;
}

.product-variants-radio-btns input:disabled ~ .radio-point {
  background-color: #ada2a4;
}

.product-variants-radio-btns input:checked ~ .radio-point:after {
  margin-top: -6px;
  margin-left: -6px;
  width: 8px;
  height: 8px;
  border-width: 2px;
}

.product-variants-radio-btns .radio-point {
  margin-top: -8px;
  display: inline-block;
  position: absolute;
  top: 50%;
  left: 0;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  z-index: 0;
  background-color: $colorHighlight;
  -webkit-transform-origin: 50% 50%;
        transform-origin: 50% 50%;
}

.product-variants-radio-btns .radio-point:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #000;
  opacity: .1;
  border-radius: 50%;
}

.product-variants-radio-btns .radio-point:after {
  content: "";
  margin-top: -9px;
  margin-left: -9px;
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  background-color: transparent;
  border: 5px solid $colorInverse;
  border-radius: 50%;
}

/* .form--default {
  margin: 0 auto;
  margin-top: 52px;
  max-width: 280px;
} */
  .form__row--text,
  .form__row--text .text-link--default {
    font-size: 16px;
  }

  .form__row--text {
    margin: 20px -5px 0 -5px;
  }

  .form__field {
    margin-bottom: 30px;
    font-size: 14px;
    background-color: $colorNeutral;
    // border-radius: 3px;
    border: 1px solid;
  }

  .form__field--textarea {
    padding: 15px 19px;
    font-size: 14px;
    line-height: 20px;
    color: $colorPrimary;
    background-color: $colorInverse;
    // border-radius: 3px;
    resize: none;
  }

  .form__field--textarea-neutral {
    padding: 15px 19px;
    margin-bottom: 12px;
    height: 140px;
    font-size: 14px;
    line-height: 20px;
    color: $colorPrimary;
    background-color: $colorNeutral;
    border: 1px solid #b19960;
    box-sizing: border-box;
    resize: none;
  }

  .form__field:focus,
  .form__field--textarea-neutral:focus {
    background-color: $colorInverse;

    & + .form__field--placeholder {
      @include transform(translateY(-27px) scale(0.86));
      opacity: 1;
    }

    & ~ .form__field--info {
      display: block;
    }
  }

  .form__field--placeholder {
    position: absolute;
    top: 8px;
    left: 17px;
    font-size: 14px;
    color: $colorAdditionalSecond;

    @include transition(all 250ms ease-in-out);
    opacity: 0;

    &:hover {
      cursor: text;
    }
  }

  .form__field--info {
    margin-top: -10px;
    padding-bottom: 20px;
    width: 100%;
    max-width: 250px;
    display: none;
    font-size: 14px;
    line-height: 20px;
    color: $colorAdditionalSecond;
  }

  .form__field--full {
    width: 100%;
  }

  .text-link--default {
    font-size: 14px;
  }

  .field__error {
    border-color: $colorHighlightSecond;
  }

  .field__error:focus {
    border-color: $colorNeutral;
  }

  .hide-border {
    border-color: $colorNeutral;
  }

  ::-webkit-input-placeholder {
    color: $colorAdditionalSecond;
  }

  :-moz-placeholder {
    color: $colorAdditionalSecond;
  }

  ::-moz-placeholder {
    color: $colorAdditionalSecond;
  }

  :-ms-input-placeholder {
    color: $colorAdditionalSecond;
  }
}

.form--default--inverse {
  .form__field {
    padding: 12px 17px 12px 17px;
    background-color: $colorInverse;
  }
}

.form--inverse {
  position: relative;

  .form__field {
    color: $colorPrimary;
    border-bottom: 1px solid $colorPrimary;
  }

  .form__row {
    padding: 10px 0px 8px;
  }

  .form__row--submit {
    padding: 0;
    text-align: center;
  }

  .btn--submit {
    padding: 28px 20px;
    color: $colorBtnPrimary;
    @include transition(color 300ms ease-in-out);

    &:hover {
      color: $colorBtnPrimaryHover;
    }
  }

  .form__info {
    padding: 30px 0 0;
    font-size: 14px;
    line-height: 20px;
    color: lighten(desaturate(adjust-hue($colorPrimary, 10.2674), 3.8939), 32.9412);
    text-align: center;
  }

  .error {
    margin: 15px 0 0px -40px;
    width: 320px;
    height: 100%;

    .error__message {
      color: $colorTextBody;
    }
  }

  .field__error {
    border-color: $colorHighlight;
  }

  .hide-border {
    border-color: $colorPrimary;
  }

  ::-webkit-input-placeholder {
    color: $colorPrimary;
  }

  :-moz-placeholder { /* Firefox 18- */
    color: $colorPrimary;
  }

  ::-moz-placeholder {  /* Firefox 19+ */
    color: $colorPrimary;
  }

  :-ms-input-placeholder {
    color: $colorPrimary;
  }
  input:-webkit-autofill,
  input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0px 1000px #f5f4f4 inset;
  }
}

.errors {
  margin-bottom: 20px;
  margin-left: -20%;
  padding: 17px 17px;
  width: 140%;
  height: 100%;
  position: relative;
  text-align: left;
  border: 3px solid $colorHighlightSecond;
  background-color: $colorInverse;
  box-sizing: border-box;
}

.errors ul{
  padding: 5px 29px 5px 48px;
  font-size: 14px;
  line-height: 20px;
}

.form--search-primary {
  position: relative;
  z-index: 1;

  .form__field {
    padding: 3px 8px 12px 0;
    margin-left: 10px;
    font-size: 16px;
    color: $colorTextBody;
    border-bottom: 1px solid $colorPrimary;
  }

  .btn--submit {
    display: none;
  }

  ::-webkit-input-placeholder {
    color: $colorPrimary;
  }

  :-moz-placeholder { /* Firefox 18- */
     color: $colorPrimary;
  }

  ::-moz-placeholder {  /* Firefox 19+ */
     color: $colorPrimary;
  }

  :-ms-input-placeholder {
     color: $colorPrimary;
  }
}

.form--subscribe {
  margin: 0 auto;
  width: 100%;
  max-width: 640px;

  .form__field {
    text-align: center;
    padding: 20px;
    box-sizing: border-box;
    width: 100%;
    font-size: 16px;
    background-color: $colorInverse;
    // border-radius: 3px;
  }

  .btn--submit {
    width: 100%;

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

.form--login {
  .form__row--recover-pass {
    margin-top: 0px;
    margin-bottom: 25px;
  }
}

.form--recover {
  margin-top: 25px;
}

.form-wrapper--recover-password .recover-info {
  padding-top: 40px;
  text-align: center;
}

.form--contact {
  margin-bottom: 80px;
  max-width: 520px;

  .heading--page {
    padding-bottom: 30px;
    font-size: 28px;
    text-align: center;
  }

  .contact-success {
    margin-bottom: 15px;
    padding: 15px;
    font-size: 14px;
    text-align: center;
    border: 3px solid $colorAdditional;

    span {
      font-weight: 600;
      color: $colorAdditional;
    }
  }
}

.form--comments {
  margin-top: 47px;
  max-width: 520px;

  .heading--add {
    padding-bottom: 25px;
  }
}

.dropdown {
  .dropdown-list {
    height: 250px;
    overflow: scroll;
  }
}

.form-cart-message {
  margin: 0 auto;
  margin-bottom: 10px;
  padding: 20px;
  width: 100%;
  max-width: 280px;
  position: absolute;
  top: -155%;
  left: 0;
  font-size: 14px;
  line-height: 20px;
  border: 3px solid $colorAdditional;
  box-sizing: border-box;
  background-color: $colorInverse;
  z-index: 1;
  opacity: 0;
  @include transform(translateY(100%));

  span {
    font-weight: 600;
    color: $colorAdditional;
  }
}

.form-cart-message--error {
  border-color: $colorAccent;
}

.form-cart-message.show-message {
  @include animation(showMsgCart 300ms ease-in-out 0s forwards);
}

@-webkit-keyframes showMsgCart {
  0% {
    opacity: 0;
    @include transform(translateY(100%));
  }

  100% {
    opacity: 1;
    @include transform(translateY(0%));
  }
}

@keyframes showMsgCart {
  0% {
    opacity: 0;
   @include transform(translateY(100%));
  }

  100% {
    opacity: 1;
    @include transform(translateY(0%));
  }
}

.form-cart-message.hide-message {
  @include animation(hideMsgCart 300ms ease-in-out 0s forwards);
}

@-webkit-keyframes hideMsgCart {
  0% {
    opacity: 1;
    @include transform(translateY(0));
  }

  100% {
    opacity: 0;
    @include transform(translateY(100%));
  }
}

@keyframes hideMsgCart {
  0% {
    opacity: 1;
    @include transform(translateY(0));
  }

  100% {
    opacity: 0;
    @include transform(translateY(100%));
  }
}

.js-wishlist .form-cart-message {
  margin: 0 auto;
  max-width: 640px;
  position: relative;
  top: 0;
  left: 0;
  text-align: center;
  @include transform(translate3d(0, 0, 0) scale(0));
}

.js-wishlist .form-cart-message.show-message {
  @include animation(showMsgWishlist 300ms ease-in-out 0s forwards);
}

.js-wishlist .form-cart-message.hide-message {
  @include animation(hideMsgWishlist 300ms ease-in-out 0s forwards);
}

.remove-message {
  margin: 0 auto;
  padding: 10px 0;
  max-width: 640px;
  font-size: 14px;
  text-align: center;
  border: 3px solid $colorAccent;
  opacity: 0;
  @include transform(translate3d(0, 0, 0) scale(0));
}

.remove-message.show-message {
  @include animation(showMsgWishlist 300ms ease-in-out 0s forwards);
}

@-webkit-keyframes showMsgWishlist {
  100% {
    opacity: 1;
    @include transform(translate3d(0, 0, 0) scale(1));
  }
}

@keyframes showMsgWishlist {
  100% {
    opacity: 1;
    @include transform(translate3d(0, 0, 0) scale(1));
  }
}

.remove-message.hide-message {
  @include animation(hideMsgWishlist 300ms ease-in-out 0s forwards);
}

@-webkit-keyframes hideMsgWishlist {
  0% {
    opacity: 1;
    visibility: visible;
    @include transform(translate3d(0, 0, 0) scale(1));
  }

  100% {
    opacity: 0;
    @include transform(translate3d(0, 0, 0) scale(0));
  }
}

@keyframes hideMsgWishlist {
  0% {
    opacity: 1;
    @include transform(translate3d(0, 0, 0) scale(1));
  }

  100% {
    opacity: 0;
    @include transform(translate3d(0, 0, 0) scale(0));
  }
}

/* Media styles */
@media (min-width: 769px) {
  .form--default .form__row-blocks {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    -webkit-box-flex-wrap: wrap;
    -moz-box-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;

    -webkit-box-justify-content: center;
    -moz-box-justify-content: center;
    -ms-justify-content: center;
    -webkit-justify-content: center;
    justify-content: center;

    .form__row-block:first-child {
      margin-right: 20px;
    }


    .error {
      margin-left: 0%;
      min-width: 140%;
      width: 100%;
    }

    .error:first-child {
      -webkit-box-ordinal-group: 1;
      -moz-box-ordinal-group: 1;
      -ms-flex-order: 1;
      -webkit-order: 1;
      order: 1;
    }

    .error:nth-child(3) {
      -webkit-box-ordinal-group: 2;
      -moz-box-ordinal-group: 2;
      -ms-flex-order: 2;
      -webkit-order: 2;
      order: 2;
    }

    .form__row-block:nth-child(4) {
      -webkit-box-ordinal-group: 4;
      -moz-box-ordinal-group: 4;
      -ms-flex-order: 4;
      -webkit-order: 4;
      order: 4;
    }

    .form__row-block:nth-child(2) {
      margin-right: 20px;
      -webkit-box-ordinal-group: 3;
      -moz-box-ordinal-group: 3;
      -ms-flex-order: 3;
      -webkit-order: 3;
      order: 3;
    }

    .form__row-block:last-child {
      margin-right: 0;
    }
  }

  .form__row-block {
    width: 48%;
    float: left;


    &:last-child {
      float: right;
    }
  }

  .form--default {
    .form__field--info {
      margin-top: 0;
      max-width: 200px;
      position: absolute;
      top: 5px;
      left: 108%;
    }
  }

  .form--login .form__row--recover-pass {
    margin-top: -10px;
  }

  .form--default .error {
    margin-left: -20%;
    width: 140%;
  }
}

@media (min-width: 1025px) {
  .form--default .form__field--info {
    max-width: 250px;
  }
}

@media (min-width: 481px) {
  .form--subscribe {
    position: relative;

    .form__field {
      text-align: left;
    }

    .btn--submit {
      width: 180px;
      position: absolute;
      top: 50%;
      right: 0;
      color: $colorBtnPrimaryHover;
      background-color: transparent;
      transform: translate(0, -50%);

      &:hover {
        color: $colorBtnPrimary;
        background-color: transparent;
      }
    }
  }
}

/* Subscribe form
/* -------------------------------------------------------------------------- */
.subscribe-form--footer {
  padding: 47px 20px 58px 20px;
  text-align: center;

  .subheading--page-small {
    padding: 13px 0 13px 0;
  }
}

/* Media styles */
@media (min-width: 769px) {
  .subscribe-form--footer .subheading--page-small {
    padding: 13px 0 5px 0 !important;
  }
}


/* ==========================================================================
   Icons
   ========================================================================== */
.icon:before,
.icon:after {
  @include transition(all 300ms ease-in-out);
}

.icon--hamburger {
  width: 20px;
  height: 16px;
  display: block;
  position: relative;

  span {
    display: block;
    width: 20px;
    height: 2px;
    position: absolute;
    left: 0;
    background-color: $colorPrimary;
  }

  span:first-child {
    top: 0px;
  }

  span:nth-child(2) {
    margin-top: -1px;
    top: 50%;
  }

  span:last-child {
    bottom: 0px;
  }
}

.icon--search {
  cursor: pointer;

  .svg-icon path {
    fill: $colorTextBody;
  }
}

.icon--search:hover .svg-icon path {
  fill: $colorHighlight;
}

.icon--cart {

  .svg-icon path {
    fill: $colorPrimary;
  }
}

.icon--close {
  width: 20px;
  height: 20px;
  display: block;
  position: relative;

  &:before,
  &:after {
    margin: -1px -10px;
    content: "";
    display: block;
    width: 20px;
    height: 2px;
    position: absolute;
    left: 50%;
    top: 50%;
    background-color: $colorPrimary;

    @include transform-origin($top: 50%, $left: 50%);
  }

  &:before {
    @include transform(rotate(45deg));
  }

  &:after {
    @include transform(rotate(-45deg));
  }
}

.icon--close-small {
  width: 20px;
  height: 20px;
  display: block;
  position: absolute;

  &:before,
  &:after {
    margin: -1px -4px;
    content: "";
    display: block;
    width: 8px;
    height: 2px;
    position: absolute;
    left: 50%;
    top: 50%;
    background-color: $colorInverse;

    @include transform-origin($top: 50%, $left: 50%);
  }

  &:before {
    @include transform(rotate(45deg));
  }

  &:after {
    @include transform(rotate(-45deg));
  }
}

.icon--delete {
  width: 15px;
  height: 15px;
  display: block;
  position: relative;

  &:before,
  &:after {
    margin: -1px -7px;
    content: "";
    display: block;
    width: 15px;
    height: 2px;
    position: absolute;
    left: 50%;
    top: 50%;
    background-color: $colorPrimary;

    @include transform-origin($top: 50%, $left: 50%);
  }

  &:before {
    @include transform(rotate(45deg));
  }

  &:after {
    @include transform(rotate(-45deg));
  }
}

.icon--minus {
  width: 13px;
  height: 13px;
  display: block;
  position: relative;

  &:before {
    margin-left: -6px;

    @include content-tl(50%, 0, 13px, 3px, $colorPrimary);
    @include transform-origin($top: 50%, $left: 50%);
    border-radius: 3px;
  }
}

.icon--plus {
  width: 13px;
  height: 13px;
  display: block;
  position: relative;

  &:before,
  &:after {

    @include content-tl(50%, 50%, 13px, 3px, $colorPrimary);
    @include transform-origin($top: 50%, $left: 50%);
    border-radius: 3px;
  }

  &:after {
    @include transform(rotate(90deg));
  }
}

.icon--plus-small {
  padding: 16px;
  width: 8px;
  height: 8px;
  display: block;
  position: relative;

  &:before,
  &:after {
    margin: -1px -4px;

    @include content-tl(50%, 50%, 8px, 2px, $colorPrimary);
    @include transform-origin($top: 50%, $left: 50%);
  }

  &:after {
    @include transform(rotate(90deg));
  }
}

.icon--arrow-up {
  width: 15px;
  height: 15px;
  display: inline-block;
  position: relative;

  &:before {
    content: "";
    width: 0;
    height: 0;
    display: block;
    background-color: transparent;
    position: absolute;
    top: 0px;
    left: 0px;
    border-style: solid;
    border-width: 0 8px 12px 8px;
    border-color: transparent transparent $colorAdditionalSecond transparent;
    border-radius: 2px;

    @include transform-origin(50%, 50%);
    @include transition(none);
  }

  &:after {
    content: "";
    width: 0;
    height: 0;
    display: block;
    position: absolute;
    top: 4px;
    left: 4px;
    background-color: transparent;
    border-style: solid;
    border-width: 0 4px 6px 4px;
    border-color: transparent transparent $colorNeutral transparent;
    border-radius: 1px;

    @include transform-origin(50%, 50%);
    @include transition(none);
  }
}

.icon--arrow-down {
  @extend .icon--arrow-up;
  &:before,
  &:after {
    @include transform(rotate(180deg));
  }

  &:after {
    top: 2px;
  }
}

.icon--arrow-left {
  @extend .icon--arrow-up;
  &:before,
  &:after {
    @include transform(rotate(-90deg));
  }

  &:after {
    top: 3px;
    left: 5px;
  }
}

.icon--arrow-right {
  @extend .icon--arrow-up;
  &:before,
  &:after {
    @include transform(rotate(90deg));
  }

  &:after {
    top: 3px;
    left: 3px;
  }
}

/* Payment methods icons
/* -------------------------------------------------------------------------- */
.icon-payment {
  font-family: FontAwesome;
  font-size: 38px;
  color: $colorTextBody;
}

.icon--american_express:before {
  content: "\f1f3";
}

.icon--diners_club:before {
  content: "\f24c";
}

.icon--discover:before {
  content: "\f1f2";
}

.icon--jcb:before {
  content: "\f24b";
}

.icon--master:before {
  content: "\f1f1";
}

.icon--visa:before {
  content: "\f1f0";
}

.icon--paypal:before {
  content: "\f1f4";
}

.icon--google:before {
  content: "\f1f4";
}

.icon--bitcoin:before {
  content: "\f15a";
}


/* ==========================================================================
   Product
   ========================================================================== */
.product {
  position: relative;

  .product__link:hover:before {
    opacity: .2;
  }

  .product__title a:hover {
    color: $colorHighlight;
  }


  .product__link {
    display: block;
    position: relative;
    line-height: 0;

    &:before {
      @include content-tl(0px, 0px, 100%, 100%, $colorHighlight);
      opacity: 0;
      z-index: 3;
      @include transition(opacity 320ms ease-in-out);
    }
  }

  .img-holder--product {
    min-width: 260px;
    min-height: 260px;
  }

  .img-holder--no-product {
    border: 4px solid $colorNeutral;
    box-sizing: border-box;

    img {
      @include transform(translate3d(-50%, -50%, 0) scale(1));
    }
  }

  .product__price-point {
  display: block;
  font-size: 14px;
  line-height: 7px;
  color: $colorTextBody;
  text-align: center;

  .product__price {
    margin-top: 15px;
    display: block;
    font-size: 16px;
    font-weight: 700;
  }

  .product__compare-price {
    line-height: 12px;
    text-decoration: line-through;
  }
}

.product__badge {
  width: 60px;
  height: 60px;
  display: block;
  position: absolute;
  top: 20px;
  right: 20px;
  font-weight: bold;
  font-size: 14px;
  line-height: 57px;
  color: $colorInverse;
  text-align: center;
  background-color: $colorAccent;
  border-radius: 50%;
  z-index: 2;
}

  .product__info {
    padding-top: 15px;
    text-align: center;

    .product__title {
      font-size: 16px;
      @include transition(color 150ms ease-in-out);
      padding: 0px 5px 5px 5px !important;
    line-height: 24px;
    }

    .product__spec {
      display: block;
      font-family: $additionalBodyFontStack;
      font-size: 14px;
    }

    .product__spec a:hover {
      color: $colorTextBody;
    }
  }

  .product--sold-out {
    position: relative;

    &:before {
      content: {{ 'products.product_page.sold_out' | t | json}};
      text-transform: uppercase;
      position: absolute;
      top: 50%;
      left: 50%;
      height: auto;
      width: auto;
      font-family: $bodyFontStack;
      font-weight: 600;
      opacity: 1;
      background: transparent;

      @include transform(translate3d(-50%, -50%, 0));
      z-index: 3;
    }

    &:after {
      content: "";

      @include content-tl(0, 0, 100%, 100%, $colorInverse);
      opacity: .6;
      z-index: 2;
    }

    &:hover:before {
      opacity: 1;
    }
  }
}

.product--lg {
  padding-top: 25px;
  padding-bottom: 25px;
  /* text-align: center; */

  &:hover {
    .product__title {
      color: $colorPrimary;
    }
  }

  .product__title {
    font-weight: normal;
  }

  .product__info {
    padding-top: 0;
    margin-bottom: 33px;

    .product__spec {
      font-size: 16px;
    }
  }

  .product__price {
    padding-top: 10px;
    display: inline-block;
    font-size: 32px;
    color: $colorHighlight;
  }

  .product__size-unit {
    margin-top: -15px;
    font-family: $additionalBodyFontStack;
    font-size: 16px;
  }

  .form-wrapper {
    margin: 25px -40px 0 -40px;
    padding: 30px 0 25px 0;
    background-color: $colorNeutral;
  }

  .form-wrapper--wishlist {
    margin-top: 0;
    padding-top: 0;

    .text-link--default {
      margin-top: 20px;
    }

    .icon--plus {
      padding-right: 30px;
      display: inline-block;
    }

    .icon--plus:before,
    .icon--plus:after {
      background-color: $colorLink;
    }

    .text-link--default:hover .icon--plus:before,
    .text-link--default:hover .icon--plus:after {
      background-color: $colorLinkHover;
    }

    p {
      padding-top: 20px;
    }
  }

  .form {
    margin: 0 auto;
    width: 320px;
    max-width: 320px;
    text-align: center;

    .quantity-field {
      margin-left: -40px;
      display: inline-block;
    }

    .quantity-field .icon {
      padding: 20px;
    }

    .quantity-field .icon--arrow-left {
      margin-right: 3px;
    }

    .quantity-field .icon--arrow-left:before,
    .quantity-field .icon--arrow-left:after {
      left: auto;
      right: 0;
    }

    .quantity-field .icon--arrow-left:after {
      margin-right: 3px;
    }

    .js-price-and-value {
      margin-left: -20px;
    }

    .form__field {

      max-width: 80px;
      background-color: $colorInverse;
    }

    .btn--submit {
      max-width: 280px;
    }
  }

  .product__desc {
    text-align: left;

    .product__desc-content {
      margin: 0 auto;
      max-width: 640px;
      padding-top: 8px;
      line-height: 30px;
    }

    .product__desc-content ul {
      padding-left: 0;
    }

    .product__desc-content ul li:before {
      display: none;
    }

    p {
      padding-bottom: 0;
    }
  }

  .product-recipe {
    text-align: left;

    .img-holder {
      margin: 0 -15px;

      img {
        width: 100%;
      }
    }

    .product-recipe__title {
      padding: 32px 0 6px 0;
      font-family: $bodyFontStack;
      font-size: 16px;
      font-weight: 700;
      line-height: 30px;
    }
  }

  .product-recipe__spec-title {
    display: none;
  }

  .product-recipe__content {
    line-height: 40px;
    counter-reset: point;

    p {
      padding-bottom: 0;
    }

    ol {
      padding-left: 0;
      padding-top: 30px;
      list-style: none;

      li {
        padding: 50px 0 0 0;
        position: relative;
        line-height: 30px;

        &:before {
          content: counter(point, decimal);
          counter-increment: point 1;
          position: absolute;
          top: 10px;
          left: 5px;
          font-family: $bodyFontStack;
          font-size: 16px;
          font-weight: 700;
          color: $colorTextBodyLight;
        }
      }
    }
  }

  .license-mark {
    padding: 5px 10px;
    box-sizing: border-box;
    position: absolute;
    bottom: 8px;
    right: 0;
    width: 100%;
    display: inline-block;
    font-size: 14px;
    line-height: 20px;
    text-align: left;
    color: $colorInverse;

    &:before {
      @include content-bl(0, 0, 100%, 120px, $colorPrimary);
      background: -webkit-linear-gradient(top, rgba($colorInverse,0) 0%, rgba($colorPrimary,1) 100%);
      background:    -moz-linear-gradient(top, rgba($colorInverse,0) 0%, rgba($colorPrimary,1) 100%);
      background:     -ms-linear-gradient(top, rgba($colorInverse,0) 0%, rgba($colorPrimary,1) 100%);
      background:         linear-gradient(to bottom, rgba($colorInverse,0) 0%, rgba($colorPrimary,1) 100%);
      opacity: .5;
    }

    a {
      padding: 15px;
      position: relative;
      color: $colorInverse;
      z-index: 1;

      &:before {
        content: {{ 'products.product_page.special_recipe_license_mark' | t | json}};
        font-size: 14px;
      }
    }
  }
}

.product-description-flex {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;

  -webkit-flex-direction: column-reverse;
     -moz-flex-direction: column-reverse;
      -ms-flex-direction: column-reverse;
          flex-direction: column-reverse;
  & > .wrapper {
    width: 91%;
  }
}

.product-reviews {
  text-align: center;

  .fold-content {
    padding-top: 0;
  }

  #shopify-product-reviews {
    margin: 0;
  }

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

  .spr-header-title {
    display: none;
    margin-bottom: 0;
    font-family: $additionalBodyFontStack;
    font-weight: normal;
  }

  .spr-summary-actions {
    margin-top: 25px;
    display: block;
  }

  .spr-summary-caption {
    font-family: $additionalBodyFontStack;
    font-size: 16px;
    font-style: italic;
    color: $colorAdditionalSecond;
  }

  .spr-summary-actions-newreview {
    margin-left: 20px;
    float: none;
    font-weight: 600;
    color: $colorLink;
    position: relative;

    &:before,
    &:after {
      @include content-tl(8px, -19px, 13px, 3px, $colorLink);
      border-radius: 3px;

      @include transition(background-color 300ms ease-in-out);
    }

    &:after {
      margin: -5px 5px;
      width: 3px;
      height: 13px;
    }

    &:hover {
      color: $colorLinkHover;
    }

    &:hover:before,
    &:hover:after {
      background-color: $colorLinkHover;
    }
  }

  .spr-icon.spr-icon-star-empty:before,
  .spr-icon.spr-icon-star:before,
  .spr-icon.spr-icon-star-half-alt:before {
    display: none;
  }

  .spr-icon.spr-icon-star-empty,
  .spr-icon.spr-icon-star,
  .spr-icon.spr-icon-star-hover,
  .spr-icon.spr-icon-star-half-alt {
    margin-top: -2px;
    padding: 0 3px;
    width: 15px;
    height: 15px;
    display: inline-block;
    vertical-align: middle;
    background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWlkWU1pZCIgd2lkdGg9IjE0IiBoZWlnaHQ9IjEzIiB2aWV3Qm94PSIwIDAgMTQgMTMiPiAgPHBhdGggZmlsbD0iI2YzYjU2MiIgZD0iTTAuMjgyLDUuMzk5IEw0LjgxMSw0LjMxMSBMNy4yNTMsMC4zNDUgTDkuNjg3LDQuMzE2IEwxNC4yMTQsNS40MTMgTDExLjE4OSw4Ljk1NSBMMTEuNTQ0LDEzLjYwMCBMNy4yNDEsMTEuODE3IEwyLjkzNCwxMy41OTAgTDMuMjk5LDguOTQ3IEwwLjI4Miw1LjM5OSBaIi8+PC9zdmc+) no-repeat;
    opacity: 1;
  }

  .spr-icon.spr-icon-star-empty {
    background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWlkWU1pZCIgd2lkdGg9IjE0IiBoZWlnaHQ9IjEzIiB2aWV3Qm94PSIwIDAgMTQgMTMiPiAgPHBhdGggZmlsbD0iI2QxY2FjYyIgZD0iTTAuMjgyLDUuMzk5IEw0LjgxMSw0LjMxMSBMNy4yNTMsMC4zNDUgTDkuNjg3LDQuMzE2IEwxNC4yMTQsNS40MTMgTDExLjE4OSw4Ljk1NSBMMTEuNTQ0LDEzLjYwMCBMNy4yNDEsMTEuODE3IEwyLjkzNCwxMy41OTAgTDMuMjk5LDguOTQ3IEwwLjI4Miw1LjM5OSBaIi8+PC9zdmc+) no-repeat;
  }

  .spr-icon.spr-icon-star-hover {
    background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWlkWU1pZCIgd2lkdGg9IjE0IiBoZWlnaHQ9IjEzIiB2aWV3Qm94PSIwIDAgMTQgMTMiPiAgPHBhdGggZmlsbD0iI2YzYjU2MiIgZD0iTTAuMjgyLDUuMzk5IEw0LjgxMSw0LjMxMSBMNy4yNTMsMC4zNDUgTDkuNjg3LDQuMzE2IEwxNC4yMTQsNS40MTMgTDExLjE4OSw4Ljk1NSBMMTEuNTQ0LDEzLjYwMCBMNy4yNDEsMTEuODE3IEwyLjkzNCwxMy41OTAgTDMuMjk5LDguOTQ3IEwwLjI4Miw1LjM5OSBaIi8+PC9zdmc+) no-repeat;
  }

  .spr-icon.spr-icon-star-half-alt {
    background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWlkWU1pZCIgd2lkdGg9IjE0IiBoZWlnaHQ9IjEzIiB2aWV3Qm94PSIwIDAgMTQgMTMiPiAgPHBhdGggZmlsbD0iI2QxY2FjYyIgZD0iTTAuMjgyLDUuMzk5IEw0LjgxMSw0LjMxMSBMNy4yNTMsMC4zNDUgTDkuNjg3LDQuMzE2IEwxNC4yMTQsNS40MTMgTDExLjE4OSw4Ljk1NSBMMTEuNTQ0LDEzLjU5OSBMNy4yNDEsMTEuODE3IEwyLjkzNCwxMy41OTAgTDMuMjk5LDguOTQ3IEwwLjI4Miw1LjM5OSBaIi8+ICA8cGF0aCBmaWxsPSIjZjNiNTYyIiBkPSJNNy4wMDAsMTEuOTE2IEwyLjkzNCwxMy41OTAgTDMuMjk5LDguOTQ3IEwwLjI4Miw1LjM5OSBMNC44MTEsNC4zMTEgTDcuMDAwLDAuNzU2IEw3LjAwMCwxMS45MTYgWiIvPjwvc3ZnPg==) no-repeat;
  }


  .spr-form {
    margin-top: 0;
    border: none;
    z-index: 10;

    & > form {
      margin: 0 auto;
      padding-top: 48px;
      padding-bottom: 80px;
      width: 100%;
      max-width: 640px;
      position: relative;
      background-color: $colorNeutral;

      & > * {
        margin: 0 auto;
        max-width: 280px;
      }
    }

    .spr-form-title {
      margin-bottom: 124px;
      max-width: 100%;
      font-family: $headerPageFontStack;
      font-size: 28px;
      line-height: 48px;
      font-weight: 300;
      text-transform: uppercase;
    }

    .spr-form-label {
      display: none;
      font-size: 14px;
    }

    .spr-form-input {
      padding: 12px 17px 12px 17px;
      width: 100%;
      font-size: 14px;
      background-color: $colorInverse;
      border-radius: 3px;
    }

    .spr-form-contact-name,
    .spr-form-contact-email,
    .spr-form-contact-location,
    .spr-form-review-rating,
    .spr-form-review-title,
    .spr-form-review-body {
      margin: 0 0 20px 0;
    }

    .spr-form-review-body > .spr-form-input {
      padding: 0;
      background: transparent;
    }

    .spr-form-input-textarea {
      height: 180px;
      resize: none;
      box-sizing: border-box;
    }

    .spr-form-review-rating {
      margin-left: -140px;
      position: absolute;
      top: 145px;
      left: 50%;
      text-align: left;

      .spr-form-label {
        display: block;
      }
    }

    .spr-starrating {
      padding: 0;
      padding-top: 18px;
      background-color: transparent;
    }

    .spr-button-primary {
      margin-top: 13px;
      width: 100%;
      height: 60px;
      float: none;
      font-size: 16px;
      color: $colorInverse;
      background-color: $colorBtnPrimary;
      border-radius: 3px;
      @include transition(background-color 300ms ease-in-out);

      &:hover {
        background-color: $colorBtnPrimaryHover;
      }
    }

    .spr-form-actions a {
      margin-top: 20px;
      display: inline-block;
    }

    .modal__btn-close {
      padding: 20px;
      display: none;
      position: absolute;
      top: 0;
      right: 0;
      font-size: 16px;
      @include transition(color 300ms ease-in-out);

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

  .spr-reviews {
    margin-top: 12px;
  }

  .spr-review {
    padding: 24px 0px 1px 0px;
    margin-bottom: 24px;
    position: relative;
    text-align: left;
    box-sizing: border-box;
    border: none;

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

    &:last-child {
      padding-bottom: 1px;
    }
  }

  .spr-review-header-byline {
    margin-top: 5px;
    opacity: 1;
    font-size: 0;
  }

  .spr-review-header-byline strong {
    font-family: $additionalBodyFontStack;
    font-size: 14px;
    font-weight: normal;
    font-style: normal;
    color: $colorTextBodyLight;
  }

  .spr-review-header-byline strong:first-child {
    position: absolute;
    bottom: 0;
    left: 0;
  }

  .spr-review-header-byline strong:first-child:before {
    content: "by";
    padding-right: 3px;
    display: inline-block;
  }

  .spr-review-header-title {
    font-size: 18px;
    line-height: 24px;
  }

  .spr-review-header-starratings {
    margin-bottom: 10px;
  }

  .spr-review-content {
    margin-top: 16px;
    margin-bottom: 34px;
  }

  .spr-review-content-body {
    font-size: 14px;
    line-height: 24px;
  }

  .spr-review-footer {
    display: none;
  }

  .spr-form .spr-form-message-error {
    margin-bottom: 20px;
    padding: 20px;
    position: relative;
    font-size: 14px;
    text-align: center;
    background-color: $colorHighlight;
    border-radius: 3px;
    box-sizing: border-box;

    &:before {
      content: "";
      display: block;
      width: 0;
      height: 0;
      position: absolute;
      bottom: -8px;
      right: 12px;
      background-color: transparent;
      border-style: solid;
      border-width: 8px 0px 0 8px;
      border-color: #f06060 transparent transparent transparent;
    }
  }
}

/* Media styles */
@media (min-width: 769px) {
  .product-description-flex {
    display: block;

    & > .wrapper {
      width: 100%;
    }
  }
  .product-reviews {
    padding-top: 60px;
    padding-bottom: 60px;

    .spr-form {
      padding-top: 30px;


      .modal__btn-close {
        display: none;
      }
    }

    .spr-review {
      padding: 24px 47px 0 47px;
      max-width: 33.3333%;
      float: left;
    }

    .spr-review-header-byline strong:first-child {
      left: 47px;
    }
  }
}

.similar-product {
  padding-top: 25px;
  padding-bottom: 38px;
}

.product--list {
  padding: 30px 0;
  text-align: center;

  .product__link {
    display: inline-block;
  }

  .product__info {
    .product__title {
      font-size: 21px;
      line-height: 28px;
    }

    .product__spec {
      margin-top: -3px;
    }

    .product__desc {
      padding-top: 12px;
      line-height: 30px;

      p {
        padding-bottom: 0;
      }
    }
  }

  .form-cart-message {
    margin-left: -140px;
    left: 50%;
  }

  .product__add-cart {
    padding-top: 20px;
    position: relative;
  }
}

@media (min-width: 769px) {
  .product--list .form-cart-message {
    margin-left: 0px;
    left: 0;
  }
}

/* Components
/* -------------------------------------------------------------------------- */
.components-list {
  padding-right: 8px;
  padding-bottom: 20px;

  .components-list__item {
    margin-bottom: 10px;
  }

  .components-list__value {
    float: right;
    font-family: $bodyFontStack;
    font-size: 20px;

    strong {
      font-weight: 500;
    }
  }
}

.components-list--elements {
  .components-list__item {
    margin: 10px 6px 0 0;
    width: 40px;
    height: 40px;
    display: inline-block;
    text-align: center;
    line-height: 40px;
    background-color: $colorInverse;
    border-radius: 50%;
  }
}

.components-container {
  margin: 0 -30px;
  margin-bottom: 3px;
  padding: 20px 30px 8px 30px;
  background-color: $colorNeutral;

  &:first-child {
    background-color: $colorInverse;
  }

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

/* Media styles */
@media (min-width: 481px) {
  .product--lg .product-recipe .img-holder {
    margin: 0 auto;
    max-width: 320px;
  }

  .product--lg .product-recipe .bg-cover {
    padding: 50px 70px;
    display: inline-block;
    line-height: 0;
  }

  .product--lg .license-mark {
    bottom: 0;
  }
}

@media (min-width: 769px) {
  .product--lg {
    padding-top: 35px;
    padding-bottom: 0;

    .product__expense {
      display: inline-block;
    }

    .product__price {
      font-size: 48px;
    }

    .product__size-unit {
      margin-top: -15px;
      font-size: 20px;
    }

    .form-wrapper {
      margin: 42px 0 0 130px;
      padding: 0;
      display: inline-block;
      background-color: transparent;
    }

    .form-wrapper--wishlist {
      margin: 0 0 60px 130px;
      display: block;

      .text-link--default {
        margin-left: 20px;
      }

      p {
        margin-left: 125px;

        .text-link--default {
          margin-left: 0;
        }
      }
    }

    .form {

      .form__field {
        background-color: $colorNeutral;
      }

      .quantity-field {
        .icon:after {
          border-color: transparent transparent $colorInverse transparent;
        }
      }
    }

    .product__desc,
    .product-recipe {
      text-align: center;

      &.fold {
        .fold__content {
          padding-top: 0;
          display: block;
        }
      }
    }

    .product-recipe {
      padding-bottom: 18px;
      overflow: hidden;

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

      .product-recipe__content.left {
        padding-top: 5px;
        padding-left: 35px;
        width: 30%;
      }

      .product-recipe__content.right {
        margin-top: -10px;
        padding-top: 11px;
        width: 63%;
        -webkit-column-count: 2;
           -moz-column-count: 2;
                column-count: 2;

        -webkit-column-gap: 50px;
           -moz-column-gap: 50px;
                column-gap: 50px;
      }

      .product-recipe__title {
        margin-top: -52px;
        font-size: 18px;
      }
    }

    .product-recipe__spec-title {
      display: block;
      position: absolute;
      top: 50%;
      font-size: 18px;
      line-height: 42px;
      letter-spacing: 20px;
      color: $colorTextBodyLight;
      text-transform: uppercase;

      strong {
        font-weight: 800;
      }
    }

    .product-recipe__spec-title.left {
      right: 100%;
    }

    .product-recipe__spec-title.right {
      padding-left: 35px;
      left: 100%;
    }
  }

  .product--list {
    padding: 20px 0;
    overflow: hidden;
    text-align: left;

    .product__link {
      display: block;
      float: left;
    }

    .product__info {
      margin-left: 300px;
      text-align: left;
    }

    .product__add-cart {
      padding-top: 30px;
      margin-left: 300px;
    }
  }

  .product-container {
    padding: 40px 0 40px 0;
  }

  .components-container {
    margin: 0;
    margin: 18px 0px 50px 0;
    padding: 0;
    vertical-align: top;
    width: 30%;
    display: inline-block;
    text-align: left;
    background-color: transparent;

    .components-list,
    .components__title {
      padding-left: 65px;
      padding-right: 0;
    }

    &:first-child .components-list,
    &:first-child .components__title {
      padding-right: 40px;
      padding-left: 12px;
    }

    &:last-child .components-list,
    &:last-child .components__title {
      padding-left: 60px;
    }
  }

  .components-list--elements {
    width: auto;
    display: block;

    .components-list__item {
      background-color: $colorNeutral;
    }
  }

  .similar-product {
    text-align: center;

    .heading {
      padding-top: 52px;
      text-align: center;
    }

    &.fold {
      .fold__content {
        padding-top: 0;
        display: block;
      }
    }

    .carousel {
      margin-top: 28px;
    }
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .product--lg .product-recipe {
    padding-top: 10px;

    .fold__content {
      padding-top: 18px;
    }

    .product-recipe__title {
      margin-top: -53px;
    }
  }

  .product--lg .product-recipe__spec-title {
    letter-spacing: 7px;
  }

  .product--lg .product-recipe__spec-title.right {
    padding-left: 5px;
  }
}

.product--lg-alt {
  padding-top: 55px;

  .img-holder {
    line-height: 0;
  }

  .img-holder img {
    width: 100%;
  }

  .product__img {
    margin-top: 25px;
    padding: 45px 0;
    max-width: 500px;
    box-sizing: border-box;
  }

  .product__info {
    padding-top: 40px;

    .product__title {
      font-weight: bold;
    }

    .product__spec {
      font-size: 14px;
    }
  }

  .form-wrapper {
    margin: 15px -40px 0 -40px;
    display: block;
    background-color: transparent;
  }

  .form {
    max-width: 280px;
  }

  .form .form__field {
    background-color: $colorNeutral;
  }

  .quantity-field .icon:after {
    border-color: transparent transparent $colorInverse transparent;
  }
}

@media (min-width: 481px) {
  .product--lg-alt {
    .product__img {
      padding: 45px;
    }
  }
}

@media (min-width: 481px) and (max-width: 768px) {
  .product--lg-alt {
    .product__img {
      margin: 0 auto;
      margin-top: 25px;
    }
  }
}

@media (min-width: 769px) {
  .product--lg-alt {
    .heading--page {
      width: 40%;
      float: left;
    }

    .product__img {
      margin-right: 75px;
      padding: 60px 80px;
      width: 50%;
      float: right;
    }

    .product__info {
      padding-top: 24px;
      width: 40%;
      clear: left;
      float: left;
    }

    .product__price {
      font-size: 32px;
    }

    .form-wrapper {
      margin-top: 37px;
    }
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .product--lg-alt .product__img {
    margin-right: 0;
  }
}

/* ==========================================================================
   RTE content
   ========================================================================== */
.rte {
  h1,
  h2 {
    font-weight: normal;
  }

  h1,
  h2,
  h3,
  h4,
  h5 {
    text-align: center;
  }

  h3 {
    padding-bottom: 5px;
  }

  h4 {
    padding-top: 12px;
    padding-bottom: 5px;
  }


  img {
    width: 100%;
    height: auto;

    & + p {
      margin-right: 50px;
    }
  }

  a {
    font-weight: 600;
    color: $colorLink;

    &:hover {
      color: $colorLinkHover;
    }
  }

  table {
    margin: 0 auto;
    margin-top: 20px;
    max-width: 780px;

    td {
      padding: 0;
      padding-top: 10px;
      line-height: 30px;
    }

    tbody tr:last-child td{

    }

    img {
      margin-left: 0;
      padding-right: 0;
      float: none;
    }
  }

  ul {
    padding-left: 15px;
    padding-bottom: 40px;

  }

  ol {
    margin-top: -25px;
    padding-left: 15px;
    padding-bottom: 40px;
    counter-reset: point;
    list-style: none;

    li {
      padding: 6px 0 6px 25px;
      position: relative;

      &:before {
        content: counter(point, decimal);
        counter-increment: point 1;
        position: absolute;
        top: 5px;
        left: 0px;
        font-family: $bodyFontStack;
        font-size: 16px;
        font-weight: 700;
        color: $colorTextBodyLight;
      }
    }
  }
}


.rte.article__content {
  ul {
    margin-top: 30px;
  }

  .two-block {
    padding-bottom: 40px;

    .first-block,
    .second-block {
      box-sizing: border-box;
    }

    img {
      padding: 0;
      margin: 0;
      float: none;
      max-width: 320px;
    }

    .block-text {
      padding-right: 55px;
      line-height: 30px;
    }
  }
}

/* Media styles */
@media (min-width: 769px) {
  .rte {
    img {
      margin-left: -10px;
      padding-right: 60px;
      width: auto;
      float: left;
    }

    ul,
    ol {
      padding-left: 95px;
      padding-bottom: 40px;
    }

    .full-content {
      margin-left: -145px;
      width: 1024px;

      img {
        width: 33%;
      }
    }
  }

  .rte.article__content {

    .two-block {
      overflow: hidden;

      .first-block,
      .second-block {
        width: 50%;
        float: left;
      }

      .second-block {
        padding-left: 10px;
      }


      .block-text {
        padding-right: 55px;
        line-height: 30px;
      }
    }
  }
}

/* ==========================================================================
   Sections
   ========================================================================== */
.section-heading {
  position: relative;
  font-size: 32px;
  line-height: 48px;
  text-align: center;
}

.section-heading:before {
  position: absolute;
  top: 0;
  left: 50%;
  display: block;
  font-family: $accentFontStack;
  font-size: 125px;
  text-transform: capitalize;
  color: $colorAccent;
  opacity: .4;
}

.section {
  position: relative;
  z-index: 2;



  .section-heading--landing {
    font-size: 28px;
    z-index: 1;
  }

  .section-heading--landing:before {
    top: -37px;
    color: darken(desaturate(adjust-hue($colorNeutral, 0.0000), 1.0582), 6.4706);
    opacity: 1;
    @include transform(translateX(-50%));
    z-index: -1;
  }
}

.section--page {
  padding: 0px 0 83px 0;
}

.section--form {
  padding: 48px 0 213px 0;
}

.section--form-small {
  padding-bottom: 341px;

  .form--default {
    margin-top: 91px;
  }
}

.section--form-login {
  padding-bottom: 292px;
}

.section--bottom-small {
  padding-bottom: 100px;
}

.section--page-search {
  padding: 140px 0 310px 0;
}

.section--page-search-alt {
  padding: 125px 0 83px 0;
}

.section--advantages {
  padding-top: 112px;
}

.section-heading--advantages:before {
  content: "{{ settings.about_us_subheading_overlap }}";
  top: -6px;
  font-size: 81px;
  color: $colorPrimary;

  @include transform(translateX(-30%));
}

.section--special-offer {
  .section-heading {
    margin-top: 95px;
    font-size: 28px;
  }

  .section-heading:before {
    top: -36px;
    font-size: 125px;
    color: $colorAccent;

    @include transform(translateX(-50%));
  }
}

.section--subscribe {
  margin-top: 98px;

  .section-heading {
    padding: 0 25px;
    font-size: 28px;
  }

  .section-heading:before {
    content: "{{ settings.homepage_subscribe_block_subheading_overlap}}";
    top: 50%;
    font-size: 125px;
    color: $colorAccent;

    @include transform(translate3d(-50%, -50%, 0));
  }

  .section__info {
    padding-top: 10px;
    line-height: 30px;
  }

  .form--subscribe .form__field {
    background-color: $colorNeutral;
  }
}

.section--homepage-recipe {
  padding-top: 147px;

  .section-heading:before {
    top: -10px;
    font-size: 125px;
    color: $colorAccent;

    @include transform(translate3d(-50%, -50%, 0));
  }

  .section__info {
    padding-top: 17px;
  }

  .article {
    max-width: 100%;

    .img-holder img {
      width: 100%;
    }

    .article__title {
      padding-top: 5px;
    }

    .article__date {
      padding-top: 0;
    }
  }
}

.section--landing-product {
  padding-top: 127px;

  .section-heading:before {
    content: "{{ settings.landing_product_section_overlap }}";
  }
}

.section--landing-benefit {
  padding-top: 117px;
  padding-bottom: 76px;

  .section-heading:before {
    content: "{{ settings.landing_benefit_section_overlap }}";
  }
}

.section--landing-reviews {
  padding-top: 145px;
  padding-bottom: 120px;

  .section-heading:before {
    content: "{{ settings.landing_reviews_section_overlap }}";
  }
}

.section--landing-cta {
  padding-top: 85px;
  padding-bottom: 145px;
}

@media (min-width: 769px) {
  .section--subscribe {
    padding: 43px 0 33px 0;
    background-color: $colorAccent;

    .heading-block {
      width: 100%;
      float: left;
    }

    .form-wrapper {
      width: 77%;
      float: right;
    }

    .section__info {
      text-align: left;
    }

    .section-heading {
      padding: 0;
      color: $colorInverse;
    }

    .section-heading:before {
      color: $colorInverse;
    }

    .form--subscribe {
      margin: 12px 0 0 0;
    }

    .form--subscribe .form__field {
      background-color: $colorInverse;
    }
  }

  .section--homepage-recipe {
    .article {
      .img-holder {
        margin-left: 60px;
        width: 40%;
        float: left;
      }

      .article__info {
        margin-right: 60px;
        width: 40%;
        float: right;
      }
    }
  }
}


/* ==========================================================================
   Sliders
   ========================================================================== */

/* Homepage slider
/* -------------------------------------------------------------------------- */
.flexslider-thumb {
  margin: 0;
  border: none;
  border-radius: 0;
  border-bottom: 3px solid $colorInverse;

  .slide {
    height: 100vh;
    overflow: hidden;
    position: relative;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    img {
      width: 100%;
      display: none;
    }
  }

  .flex-direction-nav {
    display: none;
  }

  .flex-control-thumbs {
    margin-top: -110px;
    padding-top: 20px;
    width: 110px;
    position: absolute;
    right: 5px;
    top: 50%;
    bottom: initial;
    z-index: 2;
  }

  .flex-control-thumbs li {
    margin: 0 auto;
    margin-bottom: 30px;
    width: 70px;
    height: 70px;
    display: block;
    position: relative;
    overflow: hidden;
    float: none;
    border-radius: 50%;
    border: 4px solid $colorInverse;
    z-index: 2;
    @include transition(transform 220ms ease-in-out);

    img {
      opacity: 1;
    }

    &:hover:not(.active-thumb) {
      @include transform(scale(1.34));
    }

    &.active-thumb {
      border-color: transparent;
      opacity: .3;
    }
  }
}

.flexslider-thumb--homepage {
  .slide {
    .slide__info-part {
      position: absolute;
      top: 50%;
      left: 50%;
      text-align: center;
      @include transform(translateX(-50%));
    }

    .slide__link {
      display: block;
      color: $colorTextHeader;
    }

    .slide__price-point {
      width: 140px;
      height: 140px;
      text-align: center;
      background-color: $colorHighlight;
      border-radius: 50%;
      position: absolute;
      top: 50%;
      left: 50%;
      @include transform(translateX(-50%));

      .slide__price {
        padding-top: 39px;
        display: block;
        font-size: 32px;
        line-height: 34px;
      }

      .slide__subheading {
        text-align: center;
      }

      .slide__desc em {
        font-family: $additionalBodyFontStack;
        font-size: 16px;
        font-weight: normal;
      }
    }
  }
}

.flexslider-thumb--product {

  .flex-control-thumbs li {
    position: relative;

    img {
      position: absolute;
      top: 50%;
      left: 50%;
      @include transform(translate3d(-50%, -50%, 0) scale(1.8));
    }
  }
}

/* Media styles */
@media (max-width: 768px) {
  .flexslider-thumb {

    .slide {
      @include transition(none);
    }

    .flex-control-thumbs {
      margin-top: 0px;
      width: 100%;
      position: absolute;
      right: 50%;
      top: 90%;
      bottom: initial;
      z-index: 2;

      @include transform(translate3d(50%, -50%, 0));
    }

    .flex-control-thumbs li{
      margin-right: 20px;
      margin-bottom: 0px;
      display: inline-block;

     
    }
  }

}

@media (min-width: 1537px) {
  .flexslider-thumb--homepage {
    .slide__heading {
      font-size: calc(100vw / 40);
    }

    .slide__subheading {
      font-size: calc(100vw / 62);
    }

    .slide .slide__price-point {
      width: calc(100vw / 11);
      height: calc(100vw / 11);
    }

    .slide .slide__price-point .slide__price {
      padding-top: calc(100vw / 40);
      font-size: calc(100vw / 50);
      line-height: calc(100vw / 47);
    }

    .slide .slide__price-point .slide__desc {
      font-size: calc(100vw / 100);
    }

  }
}

/* Our advantages slider
/* -------------------------------------------------------------------------- */
.slider-advantages {
  padding-top: 22px;
  max-width: 640px;

  .swiper-slide {
    min-height: 600px;

    .slide-index {
      margin-top: -7px;
      position: absolute;
      top: 0;
      left: 0;
      font-family: $additionalBodyFontStack;
      font-size: 32px;
      font-weight: normal;
    }

    .slide-info {
      padding-left: 50px;
      padding-bottom: 30px;
      margin: 0 auto;
      width: 100%;
      position: relative;
      box-sizing: border-box;

      p {
        padding-top: 7px;
        line-height: 30px;
      }
    }

    .img-holder {
      height: 300px;
      width: 100%;

      img {
        width: auto;
        height: auto;
        padding: 10px 0;
        @include transform (translate3d(-50%, -50%, 0));
      }
    }

    .slide-overlay-phrase {
      position: absolute;
      top: 76px;
      left: 50%;
      font-size: 18px;
      font-weight: 800;
      letter-spacing: 37px;
      opacity: .2;
    }

  }

  .navigation-buttons {
    margin-top: 5px;
    position: relative;

    &:before {
      @include content-bl( 0, 0, 100%, 3px, #000000);
    }
  }

  .swiper-slide--1 {
    .slide-overlay-phrase {
      margin-left: -103px;
    }
  }

  .swiper-slide--2 {
    .slide-overlay-phrase {
      margin-left: -129px;
      letter-spacing: 29px;
    }
  }

  .swiper-slide--3 {
    .slide-overlay-phrase {
      margin-left: -124px;
    }
  }

  .swiper-button-next,
  .swiper-button-prev {
    width: auto;
    height: auto;
    top: auto;
    bottom: 2px;
    font-family: $bodyFontStack;
    font-size: 16px;
    font-weight: 800;
    text-transform: uppercase;
    background: none;
    outline: none;

    @include transition(color 300ms ease-in-out);

    &:hover {
      color: $colorHighlight;
    }

    &.swiper-button-disabled {
      display: none;
    }
  }

  &[data-active-slide="1"] .navigation-buttons:before {
    background-color: $colorAccent;
  }

  &[data-active-slide="2"] .navigation-buttons:before {
    background-color: $colorAdditional;
  }

  &[data-active-slide="3"] .navigation-buttons:before {
    background-color: $colorHighlight;
  }

  &[data-active-slide="1"] .swiper-button-next:hover,
  &[data-active-slide="1"] .swiper-button-prev:hover {
    color: $colorAccent;
  }

  &[data-active-slide="2"] .swiper-button-next:hover,
  &[data-active-slide="2"] .swiper-button-prev:hover {
    color: $colorHighlight;
  }

  &[data-active-slide="3"] .swiper-button-next:hover,
  &[data-active-slide="3"] .swiper-button-prev:hover {
    color: $colorAdditional;
  }

  .swiper-button-next {
    right: 0;
  }

  .swiper-button-prev {
    left: 0;
  }
}

.template-page .section-heading--advantages {
  margin-top: 16px;
}

.template-page .swiper-container.slider-advantages {
  padding-top: 0;
  margin-bottom: 55px;
  max-width: 640px;

  .swiper-slide .slide-index {
    margin-top: 8px;
  }

  .swiper-slide--1 .heading--add {
    max-width: 215px;
  }

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

@media (min-width: 426px) {
  .slider-advantages .swiper-slide .slide-info {
    padding-left: 70px;
  }
}

/* Media styles */
@media (min-width: 641px) and (max-width: 768px) {
  .slider-advantages .swiper-slide {
    min-height: 500px;
  }

  .slider-advantages .swiper-slide .slide-info {
    padding-left: 70px;
    width: 65%;
  }
}

@media (min-width: 769px) {
  .slider-advantages {
    min-height: 300px;

    .swiper-slide {
      min-height: 310px;

      .slide-info {
        padding-left: 60px;
        padding-bottom: 0;
        width: 50%;
        float: left;
      }

      .img-holder {
        width: 47%;
        display: block;
        float: right;
      }
    }
  }
}

/* Carousel
/* -------------------------------------------------------------------------- */
.carousel {
  .swiper-slide {
    text-align: center;
  }

  .carousel__navigation {
    margin: 0 auto;
    max-width: 240px;
    position: relative;
  }

  .carousel-button-next,
  .carousel-button-prev {

    width: 60px;
    top: auto;
    bottom: 18px;
    left: 18px;
    line-height: 50px;
    background: none;

    &:before {
      margin-top: -2px;
      @include content-tl(50%, 16px, 46px, 2px, $colorPrimary);
      @include transition(background-color 300ms ease-in-out);
    }

    .icon:before {
      border-color: transparent transparent $colorPrimary transparent;
      @include transition(border-color 300ms ease-in-out);
    }
  }

  .carousel-button-next:hover .icon:before,
  .carousel-button-prev:hover .icon:before {
    border-color: transparent transparent $colorBtnPrimary transparent;
  }

  .carousel-button-next:hover:before,
  .carousel-button-prev:hover:before {
    background-color: $colorBtnPrimary;
  }

  // disabled button
  .carousel-button-next.swiper-button-disabled .icon:before,
  .carousel-button-prev.swiper-button-disabled .icon:before {
    border-color: transparent transparent $colorAdditionalSecond transparent;
  }

  .carousel-button-next.swiper-button-disabled:before,
  .carousel-button-prev.swiper-button-disabled:before {
    background-color: $colorAdditionalSecond;
  }

  // disabled button
  .carousel-button-next.swiper-button-disabled:hover .icon:before,
  .carousel-button-prev.swiper-button-disabled:hover .icon:before {
    border-color: transparent transparent $colorAdditionalSecond transparent;
  }

  .carousel-button-next.swiper-button-disabled:hover:before,
  .carousel-button-prev.swiper-button-disabled:hover:before {
    background-color: $colorAdditionalSecond;
  }

  .carousel-button-next {
    left: auto;
    right: 18px;
    text-align: right;
  }

  .carousel-button-next:before {
    left: auto;
    right: 16px;
  }

  .swiper-active-slide {
    margin-left: -11px;
    position: absolute;
    bottom: 31px;
    left: 50%;
    font-size: 14px;
    text-align: center;
  }

  .grid--in-row {
    width: 100%;
    height: auto;
  }

  .img-holder--product {
    min-width: 100%;
    min-height: 100%;
    overflow: visible;

    img {
      width: 100%;
      position: relative;
      top: 0;
      left: 0;

      @include transform(translate3d(0, 0, 0));
    }
  }
}

.carousel--homepage {
  .product__link {
    width: 100%;
    height: 360px;
    display: inline-block;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: cover;
  }

  .grid--in-row {
    max-width: 100%;
  }

  .img-holder--product {
    width: 100%;
    overflow: hidden;
    display: none;

    img {
      position: absolute;
      top: 50%;
      left: 50%;

      @include transform(translate3d(-50%, -50%, 0));
    }
  }

  .homepage-swiper-btn-next,
  .homepage-swiper-btn-prev {
    z-index: 10;
    cursor: pointer;
  }

  .homepage-swiper-pagination {
    display: none;
  }
}

.carousel--product {
  margin-bottom: 72px;
  text-align: center;

  .product__link {
    min-height: 256px;
    display: inline-block;
  }

  .swiper-slide {
    -webkit-flex-grow: 1;
       -moz-flex-grow: 1;
        -ms-flex-grow: 1;
            flex-grow: 1;
  }

  .grid--in-row {
    margin-bottom: 0;
  }

  .img-holder--product {
    width: 260px;
    height: 260px;
    overflow: hidden;

    img {
      width: auto;
      position: absolute;
      top: 50%;
      left: 50%;

      @include transform(translate3d(-50%, -50%, 0));
    }
  }

  .carousel-button-next,
  .carousel-button-prev {
    margin-top: 20px;
    display: inline-block;
    position: relative;
    top: 0;
    left: 0;
  }

  .carousel-button-next {
    text-align: right;
    margin-left: 80px;
  }

  .carousel-button-prev {
    text-align: left;
  }

  .swiper-active-slide {
    bottom: 11px;
  }
}

/* Media styles */
@media (min-width: 481px) {
  .carousel .swiper-active-slide {
    display: none;
  }
}

@media (min-width: 769px) {
  .carousel {
    .grid--in-row {
      max-width: 260px;
    }

    &.hide-arrow .swiper-button-next,
    &.hide-arrow .swiper-button-prev {
      display: none;
    }
  }

  .carousel--homepage {
    .grid--in-row {
      max-width: 100%;
    }

    .homepage-swiper-pagination {
      margin-left: -24px;
      display: block;
      position: absolute;
      bottom: 31px;
      left: 50%;
      z-index: 10;

      .swiper-pagination-bullet {
        margin-right: 13px;
        height: 6px;
        width: 6px;
        vertical-align: middle;
        background-color: $colorPrimary;
        opacity: 1;

        &:last-child {
          margin-right: 0;
        }
      }

      .swiper-pagination-bullet-active {
        width: 8px;
        height: 8px;
        background-color: $colorHighlight;
      }
    }
  }
}

/* ==========================================================================
   Social media icons
   ========================================================================== */
.social-icons {
  .social-icons__item {
    display: block;
    float: left;
    line-height: 0;
  }

  .social-icons__link {
    display: inline-block;
    position: relative;
    font-size: 16px;

    .fa {
      vertical-align: middle;
      line-height: 50px;
    }
  }
}

.social-icons--inverse {
  padding-top: 0px !important;
  padding-bottom: 15px !important;
  text-align: center;

  .social-icons__item {
    margin-bottom: 10px;
    margin-right: 10px;
    float: none;
    display: inline-block;
  }

  .social-icons__link {
    width: 50px;
    height: 50px;
    background-color: $colorInverse;
    border-radius: 50%;
    -webkit-transition: background-color 300ms ease-in-out, color 300ms ease-in-out;
            transition: background-color 300ms ease-in-out, color 300ms ease-in-out;

    &:hover {
      color: $colorInverse;
      background-color: $colorPrimary;
    }
  }
}

/* Media styles */
@media (min-width: 769px){
  .social-icons--inverse {
    padding-top: 25px;
    padding-bottom: 0;
  }

  .social-icons--inverse .social-icons__item {
    display: block;
    float: left;
  }
}

/* ==========================================================================
   Templates specific styles
   ========================================================================== */
.page-description {
  padding-bottom: 12px;
  text-align: center;

  .heading--page {
    padding-bottom: 4px;
  }
}

.page-description--alt {
  padding-top: 50px;
}

.msg {
  line-height: 30px;

  .btn {
    margin-top: 40px;
  }
}

.msg--no-result {
  padding-top: 130px;
}


.template-product .form-cart-message {
  margin-left: -140px;
  left: 50%;
}

.template-page {
  .rte {
    /* padding: 45px 0 100px 0; */

    h1 {
      font-family: $headerPageFontStack;
      font-size: 32px;
      font-weight: 300;
      line-height: 48px;
      text-align: center;
      text-transform: uppercase;
    }

    h2 {
      padding-bottom: 45px;
      font-size: 16px;
      text-align: center;
      color: $colorAdditionalSecond;
    }

    p {
      margin: 0 auto;
/*       max-width: 720px; */
      line-height: 30px;

      a {
        font-weight: 600;
        color: $colorHighlight;

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

   

    img {
      margin: 0 auto;
      padding: 10px 0;
      display: block;
    }
  }

  .section--advantages {
    padding: 58px 0 66px 0;
  }
}

{% comment %} .template-cart {

  .main-content {
    padding-bottom: 135px;
    background-color: $colorNeutral;
  }

  .instagram-feed-container:before {
    @include content-tl(0, 0, 100%, 3px, $colorInverse);
  }
} {% endcomment %}

@media (min-width: 768px) {
  .template-product .form-cart-message {
    margin-left: 0;
    left: 20px;
  }
}

/* Gift card page
/* -------------------------------------------------------------------------- */
.gift-card-template {
  .footer {
    margin: 0 auto;
    margin-top: 50px;
    max-width: 720px;
    text-align: center;
    position: relative;
    background-color: $colorInverse;
    z-index: 1;

    .copyright {
      padding: 0;
    }

    .site-logo {
      margin: 20px 0;
      display: inline-block;
    }

    .site-logo img {
      height: 50px;
      -webkit-filter: grayscale(1);
              filter: grayscale(1);
    }
  }
}

.gift-card-container {
  background: url({{ 'img_svg_confetti.svg' | asset_url }});

  .wrapper {
    height: 100%;
  }
}

.gift-card-wrapper {
  padding-top: 10%;
  margin: 0 auto;
  max-width: 720px;
  height: 100%;
  position: relative;
  background-color: $colorInverse;

  &:after {
    @include content-tl(0, 0, 100%, 100%, $colorInverse);
    z-index: -1;
  }

  .gift-card_desc {
    padding-top: 10px;
  }
}

.gift-card {
  margin: 0 auto;
  margin-top: 43px;
  max-width: 560px;
  position: relative;
  text-align: center;
  background-color: $colorNeutral;
  overflow: hidden;

  .gift-card__value {
    padding-bottom: 10px;
    display: inline-block;
    font-size: 120px;
    font-weight: 300;
    line-height: 1;

    strong {
      font-weight: 300;
    }

    small {
      margin-left: -30px;
      padding-top: 30px;
      vertical-align: top;
      display: inline-block;
      font-size: 24px;
      font-weight: 600;
    }

    &.medium {
      padding-bottom: 40px;
      font-size: 80px;

      small {
        padding-top: 18px;
      }
    }
  }

  .gift-card__code {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 2px;
    color: $colorHighlight;
  }

  .gift-card__img {
    display: none;
  }

  .gift-card__body {
    padding: 30px 0;
  }

  .gift-card__expire {
    padding-top: 37px;
    font-size: 12px;
    letter-spacing: 1.2px;
    text-transform: uppercase;

    .gift-card__expire-date {
      padding-left: 20px;
    }
  }
}

.gift-card__actions {
  margin: 0 auto;
  padding-top: 75px;
  max-width: 560px;

  .gift-card__action {
    display: none;
  }

  .svg-icon {
    padding: 0 5px;
    vertical-align: text-bottom;
  }

  .svg-icon path {
    fill: $colorHighlight;
  }

  .gift-card__action:hover .svg-icon path {
    fill: $colorPrimary;
  }
}

/* Media styles */
@media (min-width: 481px) {
  .gift-card {
    margin-top: 93px;
    text-align: left;

    .gift-card__img {
      display: inline-block;
      float: left;
    }

    .gift-card__body {
      margin-left: 80px;
      padding: 0;
      float: left;
    }

    .gift-card__expire .gift-card__expire-date {
      margin-right: -27px;
      float: right;
    }
  }

  .gift-card__actions .gift-card__action {
    margin: 0 auto;
    padding-top: 7px;
    display: block;
    max-width: 560px;
    font-weight: 800;
    text-transform: uppercase;
  }
}

@media (min-width: 481px) and (max-width: 768px) {
  .gift-card {
    max-width: 470px;

    .gift-card__img {
      width: 140px;
    }

    .gift-card__body {
      margin-left: 20px;
    }

    .gift-card__value {
      padding-top: 0;
    }

    .gift-card__expire .gift-card__expire-date {
      margin-right: 0;
    }
  }
}

@media (min-width: 769px) {
  .gift-card-template .footer {
    margin-top: -130px;
  }

  .gift-card-container {
    height: 100%;
    overflow: hidden;
  }

  .gift-card {
    .gift-card__value {
      padding-top: 50px;
    }
  }
}

@media (max-height: 840px) {
  .gift-card-template .footer {
    margin-top: 0;
  }
}

/* Page 404
/* -------------------------------------------------------------------------- */
.page-404 {
  min-height: 100%;

  .page-404__fallback {
    padding: 30px 0;

    .heading--page-xs {
      padding-bottom: 13px;
    }
  }

  .page-404__btn {
    position: absolute;
    top: 27px;
    left: 30px;

    &:last-child {
      padding: 10px;
      font-size: 0;
      left: auto;
      top: 30px;
      right: 30px;
    }

    .svg-icon path {
      fill: $colorPrimary;
    }

    &:hover {
      color: $colorHighlight;
    }

    &:hover .svg-icon path {
      fill: $colorHighlight;
    }
  }

  .link-list {
    padding-top: 33px;
  }
}

.alternative {
  position: relative;
  z-index: -3;

  .footer {
    padding: 0 10px;
    margin-top: -80px;
    height: 80px;
    background-color: transparent;
  }
}

@media (min-width: 769px) and (max-height: 640px) {
  .alternative .page-404 + .footer {
    margin-top: 0px;
  }
}

/* Password page
/* -------------------------------------------------------------------------- */
.page-password {
  padding-top: 8%;
  width: 100%;
  height: 100%;
  position: relative;
  text-align: center;
  background: transparent url({{'img_password_page_bg.jpg' | asset_url }});
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  z-index: -2;
  box-sizing: border-box;

  &:before {
    @include content-tl(0, 0, 100%, 100%, $colorPrimary);
    opacity: .6;
    z-index: -1;
  }

  .logo-wrapper {
    margin: 0 auto;
    height: 100%;
    width: 100%;
    max-width: 100px;
    max-height: 100px;
    position: relative;
    background-color: $colorInverse;
    border-radius: 50%;

    .site-logo {
      position: absolute;
      top: 47%;
      left: 50%;

      @include transform(translate3d(-50%,-50%,0));
    }

    img {
      max-height: 62px;
    }
  }

  .page-password__content {
    padding: 10px 0 13px 0;

    .heading--accent {
      font-size: 68px;
      line-height: 60px;
    }

  }

  .page-password__message {
    padding-top: 13px;
    color: $colorInverse;
  }

  & + .footer {
    margin-top: -31px;
    height: 31px;
    font-size: 14px;
    color: $colorInverse;
    text-align: center;

    a {
      vertical-align: middle;
      display: inline-block;
    }

    svg {
      padding-left: 10px;
      width: 83px;
    }
  }

  .form--subscribe {
    .form__field {
      padding: 20px 30px;
    }
  }

  .social-sharing {
    padding: 20px;

    .heading--add-small {
      padding-bottom: 10px;
    }
  }
  .social-sharing__icon-list--password-page {
    display: flex;
      justify-content: center;
  }
}

/* Media styles */
@media (min-width: 481px) {
  .page-404 .page-404__fallback {
    padding: 55px 0;
  }

  .page-password {
    .logo-wrapper {
      max-width: 120px;
      max-height: 120px;
    }

    .page-password__content {
      padding-top: 20px;

      .heading--accent {
        font-size: 81px;
        line-height: 70px;
      }
    }

    .form--subscribe .btn--submit {
      width: 170px;
    }

    & + .footer {
      margin-top: -80px;
      height: 80px;
    }

    .social-sharing {
      padding-top: 20px;
    }
  }
}

/* Wishlist page
/* -------------------------------------------------------------------------- */

.wishlist-fallback {
  text-align: center;
  padding: 50px 0;
}

.table--wishlist.table {
  margin-top: 53px;
  min-width: 450px;

  thead th {
    padding-left: 25px;
    font-size: 14px;
    font-weight: 600;

    &:nth-child(3),
    &:last-child {
      padding-left: 0;
    }
  }

  tbody td {
    padding: 38px 0 23px 14px;
  }

  .wishlist__info {
    width: 60%;

    & > div {
      float: left;
    }
  }

  .wishlist__item-title {
    margin-left: 25px;
    line-height: 70px;
    vertical-align: middle;
  }

  .img-holder {
    width: 70px;
    height: 70px;
    overflow: hidden;
  }

  .wishlist__item-price {
    padding-left: 31px;
    width: 14%;
    font-weight: 600;
  }

  .wishlist__remove-item {
    width: 13%;

    a .icon:before,
    a .icon:after {
      @include transition(background-color 300ms ease-in-out);
    }

    a:hover .icon:before,
    a:hover .icon:after {
      background-color: $colorHighlight;
    }
  }

  .wishlist__item-bag {
    padding-top: 42px;
    width: 13%;

    svg path {
      fill: $colorPrimary;
    }

    a:hover svg path {
      fill: $colorHighlight;
    }
  }
}

.wishlist-empty {
  padding-top: 60px;

  .wishlist-empty__info {
    padding-bottom: 20px;
  }
}

/* Landing page
/* -------------------------------------------------------------------------- */
#landing-page {

  .header:before,
  .header:after,
  .nav-list,
  .store-desc,
  .main-nav-open-btn {
    display: none;
  }

  .drawer--menu .drawer__header {
    padding-top: 25px;
  }

  .header {
    height: 0;
    position: absolute;
    top: 0;
    left: 0;
    background-color: transparent;
  }

  .site-logo {
    width: 88px;
    height: 88px;
    position: relative;
    background-color: $colorInverse;
    border-radius: 50%;

    img {
      height: 50%;
      position: absolute;
      top: 45%;
      left: 50%;

      @include transform(translate3d(-50%, -50%,0));
    }
  }

  .drawer--menu .site-logo--mobile {
    display: none;
  }

  .cart-open-btn {
    color: $colorInverse;
  }

  .cart-open-btn:hover {
    color: $colorHighlight;
  }

  .cart-open-btn .icon--cart .svg-icon path,
  .search-container .icon--search .svg-icon path {
    fill: $colorInverse;
  }

  .cart-open-btn:hover .svg-icon path,
  .search-container .icon--search:hover .svg-icon path {
    fill: $colorHighlight;
  }

  .instagram-feed-container,
  .subscribe-form--footer {
    display: none;
  }

  .main-content--top {
    margin-top: 0 !important;
  }

  .currency-picker .dropdown .dropdown__button {
    color: $colorInverse;
  }

  .currency-picker .dropdown.open .dropdown__button {
    color: $colorTextBody;
  }

  .currency-picker .dropdown .dropdown__button:hover {
    color: $colorHighlight;
  }

  .currency-picker .dropdown .icon:before,
  .currency-picker .dropdown .icon:after {
    background-color: $colorInverse;
  }

  .currency-picker .dropdown.open .icon:before,
  .currency-picker .dropdown.open .icon:after {
    background-color: $colorTextBody;
  }

  .currency-picker .dropdown .dropdown__button:hover + .icon:before,
  .currency-picker .dropdown .dropdown__button:hover + .icon:after {
    background-color: $colorHighlight;
  }

  .form--search-primary .form__field {
    color: $colorInverse;
    border-color: $colorInverse;
  }

  .form--search-primary ::-webkit-input-placeholder {
    color: $colorInverse;
  }

  .form--search-primary :-moz-placeholder { /* Firefox 18- */
    color: $colorInverse;
  }

  .form--search-primary ::-moz-placeholder {  /* Firefox 19+ */
    color: $colorInverse;
  }

  .form--search-primary :-ms-input-placeholder {
    color: $colorInverse;
  }
}

.landing-page {
  .subheading--page {
    margin-bottom: 20px;
  }
}

/* Media styles */
@media (min-width: 769px) {
  .landing-page {
    .subheading--page {
      margin-bottom: 0px;
    }
  }

  #landing-page .drawer__header .store-desc {
    color: $colorInverse;
  }
}


/* Countdown clock
/* -------------------------------------------------------------------------- */
.countdown-clock-wrapper {
  margin-top: 20px;
  margin: 0 auto;
  padding: 35px 37px 34px 47px;
  max-width: 720px;
  width: 170px;
  position: relative;
  box-shadow: 16px 0px 30px rgba(0, 0, 0, .16);

  &:before {
    @include content-tl(0, 0, 100%, 100%, $colorInverse);
    opacity: .1;
  }
}

.countdown-clock {
  margin: 0;
  width: 165px;

  .flip {
    box-shadow: none;
    border-radius: 0;
  }

  ul {
    margin: 5px 0px 5px 4px;
    width: 50px;
    height: 70px;
    float: none;
    display: inline-block;
    background-color: $colorInverse;
  }

  ul li {
    line-height: 65px;
  }

  ul li a div {
    font-family: $additionalBodyFontStack;
  }

  ul li a div.up:after {
    display: none;
  }

  ul li a div.down {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }

  ul li a div div.inn {
    font-size: 34px;
    color: $colorPrimary;
    background-color: $colorInverse;
    border-radius: 0;
    -webkit-text-shadow: none;
            text-shadow: none;
  }

  ul.play li.flip-clock-before .up .shadow,
  ul.play li.flip-clock-active .down .shadow,
  ul.play li.flip-clock-before .down .shadow,
  ul.play li.flip-clock-active .up .shadow {
    background: none;
  }

  ul.play li.flip-clock-before .up,
  ul.play li.flip-clock-before .up .shadow,
  ul.play li.flip-clock-before .down,
  ul.play li.flip-clock-before .down .shadow,
  ul.play li.flip-clock-active .down .shadow,
  ul.play li.flip-clock-active .down {
    @include animation(none);
  }

  .flip-clock-dot {
    display: none;
  }

  .flip-clock-divider {
    width: auto;
    height: auto;
    display: block;
    position: static;
    float: none;

    &:first-child {
      width: auto;
    }
  }

  .flip-clock-divider .flip-clock-label {
    position: static;
    font-family: $additionalBodyFontStack;
    font-size: 18px;
    font-weight: bold;
    color: $colorInverse;
  }

  .flip-clock-divider.seconds .flip-clock-label,
  .flip-clock-divider.minutes .flip-clock-label {
    right: -78px;
  }

  .flip-clock-divider.hours .flip-clock-label {
    right: -60px;
  }

  .flip-clock-divider.days .flip-clock-label {
    right: -47px;
  }
}

/* Product packs
/* -------------------------------------------------------------------------- */
.product-pack-wrapper {
  margin: 0 auto;
  padding-top: 45px;
  width: 100%;
  max-width: 960px;
  text-align: center;
}

.product-pack {
  margin: 0 auto;
  padding-bottom: 60px;
  margin-bottom: 30px;
  max-width: 300px;
  width: 100%;
  min-height: 460px;
  position: relative;
  text-align: center;
  box-shadow: 5px 5px 30px rgba(0, 0, 0, .16);

  .product-pack__header {
    height: 100px;
    line-height: 100px;
    text-align: center;
    background-color: $colorAdditional;
  }

  .product-pack__title {
    display: inline-block;
    color: $colorInverse;
    font-size: 24px;
    vertical-align: middle;
  }

  .product-pack__content {
    padding: 52px 49px;
    text-align: left;

    ul li {
      padding-left: 45px;
      padding-bottom: 13px;
      position: relative;
    }

    ul li:before {
      margin-top: -2px;

      @include content-tl(15px, 0, 4px, 4px, $colorPrimary);
      border-radius: 50%;
    }
  }

  .form {
    margin-left: -15%;
    position: absolute;
    bottom: 50px;
    left: 50%;

    .form-cart-message {
      display: none;
    }
  }
}

.product-pack--1 {
  .btn--underlines {
    color: $colorAdditional;
  }

  .btn--underlines:hover {
    color: $colorPrimary;
  }

  .btn--underlines svg path {
    fill: $colorAdditional;
  }

  .btn--underlines:hover svg path {
    fill: $colorPrimary;
  }
}

.product-pack--2 {
  .product-pack__header {
    background-color: $colorAccent;
  }

  .btn--underlines {
    color: $colorAccent;
  }

  .btn--underlines:hover {
    color: $colorPrimary;
  }

  .btn--underlines svg path {
    fill: $colorAccent;
  }

  .btn--underlines:hover svg path {
    fill: $colorPrimary;
  }
}

.product-pack--3 {
  .product-pack__header {
    background-color: $colorHighlight;
  }
}

/* Media styles */
@media (min-width: 769px) {
  .product-pack {
    margin-right: 30px;
    float: left;

    &:last-child {
      margin-right: 0;
    }
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .product-pack {
    margin-right: 20px;
    max-width: 30%;
    display: inline-block;
    float: none;

    &:first-child {
      float: left;
    }

    &:last-child {
      margin-right: 0;
      float: right;
    }

    .product-pack__content {
      padding: 32px 29px;
    }

    .product-pack__content ul li {
      padding-left: 25px;
    }

    .btn {
      margin-left: 0;
      @include transform(translateX(-50%));
    }
  }
}


/* Product CTA
/* -------------------------------------------------------------------------- */
.product-pack__cta {
  padding: 50px 0;
}

.product-pack__cta-list {
  margin-right: -20px;
  text-align: center;

  .product-pack__cta-item {
    font-size: 18px;
    font-weight: 800;
    letter-spacing: 20px;
    display: block;
    vertical-align: middle;
  }

  .product-pack__cta-circle {
    margin: 0 auto;
    margin-top: 15px;
    margin-bottom: 15px;
    width: 140px;
    height: 140px;
    color: $colorInverse;
    letter-spacing: normal;
    text-align: center;
    background-color: $colorPrimary;
    border-radius: 50%;

    span {
      display: inline-block;
    }

    span:first-child {
      margin-top: 16px;
      margin-bottom: -15px;
      font-size: 42px;
      font-weight: normal;
    }

    span:last-child {
      font-family: $additionalBodyFontStack;
      font-size: 16px;
      font-weight: normal;
      text-transform: lowercase;
      display: block;
    }
  }
}

/* Media styles */
@media (min-width: 769px) {
  .product-pack__cta-list {
    .product-pack__cta-item {
      display: inline-block;
    }

    .product-pack__cta-circle {
      margin: 0 50px;
    }
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .product-pack__cta-list {
    .product-pack__cta-item {
      letter-spacing: 10px;
    }

    .product-pack__cta-circle {
      margin: 0 20px;
      letter-spacing: normal;
    }
  }
}

/* Benefits
/* -------------------------------------------------------------------------- */
.benefit-list {
  padding-top: 35px;
  counter-reset: point;
  text-align: center;

  .benefit-list__item {
    margin: 0 auto;
    margin-bottom: 25px;
    padding-left: 70px;
    max-width: 400px;
    position: relative;
    display: block;
    vertical-align: top;
    text-align: left;

    &:before {
      @include content-tl(-7px, 0, 100%, 100%, transparent);
      content: "0"counter(point, decimal);
      counter-increment: point 1;
      font-family: $additionalBodyFontStack;
      font-size: 32px;
    }
  }

  .benefit-list__title {
    padding: 0 40px 0 0;
    font-size: 24px;
    font-family: $additionalBodyFontStack;
    font-weight: normal;
    line-height: 40px;
  }

  .benefit-list__content {
    padding-top: 8px;
    font-size: 16px;
    line-height: 30px;
  }
}

/* Media styles */
@media (min-width: 769px) and (max-width: 1024px) {
  .benefit-list .benefit-list__item {
    max-width: 450px;
  }
}

@media (min-width: 1025px) {
  .benefit-list .benefit-list__item {
    margin-left: 30px;
    max-width: 219px;
    display: inline-block;
  }
}

/* Reviews
/* -------------------------------------------------------------------------- */
.reviews-list {
  margin: 0 auto;
  padding-top: 25px;
  width: 100%;
  text-align: center;

  .reviews-list__item {
    margin: 0 25px 50px 10px;
    padding: 43px 50px 43px 60px;
    width: 300px;
    position: relative;
    display: inline-block;
    box-sizing: border-box;
    text-align: left;
    box-shadow: 5px 5px 30px rgba(0, 0, 0, .16);

    .review__header {
      text-align: center;

      .review__title {
        margin-bottom: -7px;
        font-size: 18px;
      }

      span {
        font-family: $additionalBodyFontStack;
        font-size: 14px;
        line-height: 20px;
      }
    }

    .icon--underline-big, {
      display: none;
    }
  }

  .review__navigation {
    display: none;
  }

  .review__content {
    padding-top: 33px;
    line-height: 30px;
  }

  .reviews-list__item.center {
    background-color: $colorInverse;
  }

  .reviews-list__item.left,
  .reviews-list__item.right {
    height: 300px;
    height: auto;
    float: none;
  }

  .reviews-list__item.left .review__navigation .next,
  .reviews-list__item.right .review__navigation .prev {
    display: none;
  }

  .review__navigation {
    margin-top: 41px;
    margin-left: -22px;
    position: absolute;
    top: 50%;
    left: 50%;
    text-align: center;
  }

  .review__navigation .review__navigation-btn {
    font-size: 16px;
    font-weight: 800;
    color: $colorInverse;
  }

  .img-holder--circle {
    margin: 0 auto;
    width: 109px;
    height: 109px;
    overflow: hidden;
    border-radius: 50%;
    border: 4px solid $colorInverse;

    img {
      width: 100%;
    }
  }

  .icon--underline-big {
    position: absolute;
    top: 70px;
    left: -100%;
    width: 290%;
    height: 100%;
    z-index: -1;
  }
}

// one
.reviews-list .reviews-list__item--1 .img-holder--circle {
  border-color: $colorAdditional;
}

// two
.reviews-list .reviews-list__item--2 .img-holder--circle {
  border-color: $colorAccent;
}

// three
.reviews-list .reviews-list__item--3 .img-holder--circle {
  border-color: $colorHighlight;
}

/* Media styles */
@media (min-width: 769px) {
  .reviews-list {
    margin: 0 auto;
    padding-top: 25px;
    width: 100%;
    text-align: center;

    .reviews-list__item {
      margin: 0;
      width: 300px;
      position: relative;
      display: inline-block;
      box-sizing: border-box;
      text-align: left;
      box-shadow: 5px 5px 30px rgba(0, 0, 0, .16);

      .img-holder {
        position: absolute;
        border: 4px solid $colorInverse;
      }

      .review__header {
        padding-left: 30px;
        text-align: left;

        .review__title {
          margin-bottom: -7px;
          font-size: 18px;
        }

        span {
          font-family: $additionalBodyFontStack;
          font-size: 14px;
          line-height: 20px;
        }
      }
    }

    .review__content {
      padding-top: 33px;
      line-height: 30px;
    }

    .review__navigation {
      display: block;
    }

    .reviews-list__item.center {
      padding: 63px 50px 63px 60px;
      background-color: $colorInverse;

      .img-holder {
        top: 15px;
        left: -45px;
      }

      .review__navigation {
        display: none;
      }

      .icon--underline-big {
        display: block;
      }
    }

    .reviews-list__item.left,
    .reviews-list__item.right {
      margin-top: 70px;
      width: 172px;
      height: 300px;
      cursor: pointer;

      .img-holder {
        margin-top: -63px;
        margin-left: -44px;
        width: 80px;
        height: 80px;
        top: 50%;
        left: 50%;
      }

      .review__body,
      .icon--underline-big {
        display: none;
      }
    }

    .reviews-list__item.left {
      float: left;
    }

    .reviews-list__item.right {
      float: right;
    }

    .reviews-list__item.left .review__navigation .next,
    .reviews-list__item.right .review__navigation .prev {
      display: none;
    }

    .review__navigation {
      margin-top: 41px;
      margin-left: -22px;
      position: absolute;
      top: 50%;
      left: 50%;
      text-align: center;
    }

    .review__navigation .review__navigation-btn {
      font-size: 16px;
      font-weight: 800;
      color: $colorInverse;
    }

    .img-holder--circle {
      width: 109px;
      height: 109px;
      overflow: hidden;
      border-radius: 50%;

      img {
        width: 100%;
      }
    }

    .icon--underline-big {
      position: absolute;
      top: 70px;
      left: -100%;
      width: 290%;
      height: 100%;
      z-index: -1;
    }
  }

  // one
  .reviews-list .reviews-list__item--1 {
    background-color: $colorAdditional;
  }
  .reviews-list .reviews-list__item--1 .icon--underline-big path {
    fill: $colorAdditional;
  }
  .reviews-list .reviews-list__item--1.center .img-holder--circle {
    border-color: $colorAdditional;
  }

  // two
  .reviews-list .reviews-list__item--2 {
    background-color: $colorAccent;
  }
  .reviews-list .reviews-list__item--2 .icon--underline-big path {
    fill: $colorAccent;
  }
  .reviews-list .reviews-list__item--2.center .img-holder--circle {
    border-color: $colorAccent;
  }

  // three
  .reviews-list .reviews-list__item--3 {
    background-color: $colorHighlight;
  }
  .reviews-list .reviews-list__item--3 .icon--underline-big path {
    fill: $colorHighlight;
  }
  .reviews-list .reviews-list__item--3.center .img-holder--circle {
    border-color: $colorHighlight;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .reviews-list .icon--underline-big {
    left: -65%;
    width: 230%;
  }
}

/* CTA buttons
/* -------------------------------------------------------------------------- */
.cta-btn-list {
  padding-top: 52px;

  .btn--cta {
    margin-bottom: 7px;
    padding: 17px 0px;
    min-width: 280px;
    display: inline-block;
  }

  .btn--cta-1 {
    background-color: $colorAdditional;
  }

  .btn--cta-2 {
    background-color: $colorAccent;
  }

  .btn--cta-3 {
    background-color: $colorHighlight;
  }
}

/* Media styles */
@media (min-width: 769px) {
  .cta-btn-list {
    .cta-btn-list__item {
      margin-right: 15px;
      display: inline-block;

      &:last-child {
        margin-right: 0;
      }
    }
  }

  .alternative {
    .footer {
      margin-top: -60px;
      height: 60px;
    }
  }

  .countdown-clock-wrapper {
    margin-top: 92px;
    padding: 55px 54px 44px 47px;
    width: auto;
  }

  .countdown-clock {
    width: 675px;

    ul {
      height: 80px;
      width: 60px;
      float: left;
    }

    ul li {
      line-height: 75px;
    }

    ul li a div div.inn {
      font-size: 44px;
    }

    .flip-clock-divider {
      width: 20px;
      height: 80px;
      float: left;
      position: relative;
      display: inline-block;

      &.seconds {
        width: 55px;
      }

      &:first-child {
        width: 0;
      }

      .flip-clock-label {
        position: absolute;
        top: -25px;
      }
    }
  }

  .countdown-clock--big {
    width: 680px;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .cta-btn-list .btn--cta {
    min-width: 210px;
  }
}

@media (min-width: 1025px) {
  .template-page .rte {
    img {
      padding: 20px 0;
      display: inline-block;
    }
  }
}

/* ==========================================================================
   Footer
   ========================================================================== */
.footer {
  position: relative;
  opacity: 1;
  z-index: 2;

  .footer__item {
/*     padding: 0 34px; */

    &:nth-child(n+2) .heading--add-small {
      margin-top: 33px;
    }

    .heading--add-small {
      margin-top: 0;
    }
  }
}

.social-disable .footer__item--payments {
  margin-top: 60px;
}

/* Media styles */
@media (min-width: 481px){
  .footer .footer__item:nth-child(n+2) .heading--add-small {
    margin-top: 65px;
  }
}

@media (min-width: 769px){
  .footer .wrapper {
    padding-bottom: 35px;
  }

  .footer.social-disable .wrapper {
    padding-bottom: 55px;
  }

  .footer__item {
/*     padding-left: 23px; */
  }

  .footer .footer__item:first-child {
    padding-left: 50px;
  }

  .social-disable .footer__item--payments {
    margin-top: 0;
  }
}

.footer-list {
  padding-top: 12px;

  .footer-list__link {
    padding: 2px 0;
    display: inline-block;
/*     color: $colorAdditionalSecond; */

    
  }
}

.footer__item--blog {
  .footer__item--blog-item {
    padding-top: 35px;
  }

  .article-link {
    width: 140px;
    height: 140px;
    display: block;
    overflow: hidden;
  }

  .article-title {
    font-size: 18px;
  }

  .article-excerpt {
    font-size: 14px;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .footer__item--blog .article-link{
    float: none;
  }

  .footer__item--blog.large--one-third .article-desc {
    padding-left: 0;
  }
}

@media (min-width: 481px) and ( max-width: 768px) {
  .footer__item--blog .article-link{
    float: none;
  }

  .footer__item--blog.large--one-third .article-desc {
    padding-left: 0;
  }

  .footer .large--one-quarter.footer__item--contact,
  .footer .large--one-quarter.footer__item--contact +  .footer__item--blog,
  .footer .large--one-quarter.footer__item--contact +  .footer__item--blog + .footer__item--menu,
  .footer .large--one-quarter.footer__item--contact {
    width: 33.33%
  }

  .footer .large--one-quarter.footer__item--contact-half {
    width: 50%;
  }

  .social-disable .large--one-quarter.footer__item--contact,
  .social-disable .large--one-quarter.footer__item--blog,
  .social-disable .large--one-quarter.footer__item--menu {
    width: 33%;
  }

  .social-disable .large--one-third.footer__item--contact,
  .social-disable .large--one-third.footer__item--blog,
  .social-disable .large--one-third.footer__item--menu {
    width: 50%;
  }

  .payment-disable .large--one-quarter.footer__item--contact,
  .payment-disable .large--one-quarter.footer__item--contact +  .footer__item--blog,
  .payment-disable .large--one-quarter.footer__item--contact +  .footer__item--blog + .footer__item--menu {
    width: 50%;
  }

  .payment-disable .large--one-third.footer__item--contact,
  .payment-disable .large--one-third.footer__item--blog,
  .payment-disable .large--one-third.footer__item--menu {
    width: 33%;
  }
}

.footer__item--social .heading--add-small {
  display: none;
}

.footer__item--payments {
  background-color: $colorBackground;

  .heading--add-small {
    display: none;
  }
}

.footer__item--contact {
  ul {
    padding-top: 16px;
    color: $colorAdditionalSecond;
  }

  ul > li {
    padding-left: 39px;
    margin-bottom: 14px;
    position: relative;
    list-style: none;

    i {
      position: absolute;
      top: 6px;
      left: 11px;
    }

    a:hover {
      color: $colorHighlight;
    }
  }

  .fa-envelope {
    top: 9px;
    font-size: 12px;
  }

  .fa-mobile {
    top: 3px;
    font-size: 18px;
  }

  .fa-map-marker {
    top: 4px;
    font-size: 16px;
  }
}

@media( max-width: 768px) {
  .footer__item--social,
  .footer__item--payments {
    width: 107%;
  }
}

@media (min-width: 769px){
  .footer__item--payments .heading--add-small,
  .footer__item--social .heading--add-small {
    display: block;
  }

  .footer__item--payments {
    background-color: transparent;
  }
}

.list-payments {
  padding-bottom: 25px;
  text-align: center;

  .list-payments__item {
    margin-right: 15px;
    margin-bottom: 33px;
    display: inline-block;
    line-height: 0;
    height: 40px;
    width: 48px;
  }

  .list-payments__item--img {
    /*margin-top: 15px;*/
    // width: 54px;
  }
}

@media (min-width: 769px){
  .list-payments {
    padding-top: 20px;
    padding-bottom: 0;
  }

  .list-payments .list-payments__item {
    margin-bottom: 10px;
    /*display: block;*/
    float: left;
    line-height: normal;
  }
}

/* ==========================================================================
   Other components
   ========================================================================== */

/* Contacts
/* -------------------------------------------------------------------------- */
.contact-short {
  text-align: center;
  color: $colorInverse;
  background-color: $colorPrimary;

  .contact-short__block {
    padding: 23px 0px 0px 0px;
    box-sizing: border-box;
    text-align: center;

    &:last-child {
      padding-bottom: 23px;
    }
  }

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

  .contact-short__title {
    font-size: 12px;
    text-transform: uppercase;
  }

  .contact-short__contact {
    a:hover {
      color: $colorHighlight;
    }
  }
}

.contact-full {
  padding-top: 65px;
  padding-bottom: 60px;

  .address {
    padding-top: 15px;
  }
}

.contact-full.large--one-half:first-child {
  padding-bottom: 0;
}

/* Media styles */
@media (min-width: 769px) {
  .contact-short {
    .contact-short__block {
      padding: 23px 0px;
      text-align: left;
    }

    .large--one-half .contact-short__block {
      padding-left: 130px;
    }

    .large--one-third .contact-short__block {
      padding-left: 100px;
    }
  }

  .contact-full.large--one-half:first-child {
    padding-left: 255px;
    padding-bottom: 60px;
  }

  .contact-full.large--one-half:last-child {
    padding-left: 100px;
  }
}


@media (min-width: 769px) and (max-width: 1024px) {
  .contact-full.large--one-half:first-child {
    padding-left: 100px;
  }
}

/* Copyright
/* -------------------------------------------------------------------------- */
.copyright {
  display: none;
}

{% comment %} .copyright-mobile {
  padding: 61px 0 31px 0;
  font-size: 16px;
  line-height: 30px;
  text-align: center;
  color: $colorAdditionalSecond;
} {% endcomment %}
.copyright {
    padding: 0px 23px 54px !important;
    display: block;
    font-size: 16px;
    line-height: 20px !important;
    text-align: left !important;
     color: black !important;
    background-color: #fff;
    width: 20%;
}


/* Media styles */
@media (min-width: 769px){
  .copyright-mobile {
    display: none;
  }

  .copyright {
    padding: 62px 0 54px 0;
    display: block;
    font-size: 16px;
    line-height: 30px;
    text-align: center;
    color: $colorAdditionalSecond;
    background-color: $colorBackground;
  }
}

/* Date
/* -------------------------------------------------------------------------- */
.date {
  font-family: $additionalBodyFontStack;
  font-size: 16px;
  color: $colorTextBodyLight;
}

/* Dividers
/* -------------------------------------------------------------------------- */
.hr--clear {
  margin: 0;
  width: 100%;
  height: 3px;
  background-color: $colorInverse;
  border: none;
}

.hr--clear-inverse {
  margin: 0;
  width: 100%;
  height: 3px;
  background-color: $colorNeutral;
  border: none;
}

.hr--wrapper {
  margin: 0 auto;
  max-width: $siteWidth;
  width: 100%;
}

.hr--short {
  width: 96%;
  margin-left: 2%;
}

.hr--desktop {
  display: none;
}

/* Media styles */
@media (min-width: 769px) {
  .hr--desktop {
    display: block;
  }
}

/* Dropdown
/* -------------------------------------------------------------------------- */
.dropdown {
  margin-left: 16px;
  position: relative;
  display: inline-block;

  .icon {
    margin-top: -15px;
    position: absolute;
    top: 50%;
    right: 27px;
    cursor: pointer;
    width: 8px;
    height: 8px;
  }

  .icon:before {
    content: "";
    width: 0;
    height: 0;
    display: block;
    background-color: transparent;
    position: absolute;
    top: 0px;
    left: 0px;
    border-style: solid;
    border-width: 0 8px 12px 8px;
    border-color: transparent transparent $colorAdditionalSecond transparent;
    border-radius: 2px;

    @include transform-origin(50%, 50%);
    @include transform(rotate(180deg));
    @include transition(none);
  }

  .icon:after {
    content: "";
    width: 0;
    height: 0;
    display: block;
    position: absolute;
    top: 2px;
    left: 4px;
    background-color: transparent;
    border-style: solid;
    border-width: 0 4px 6px 4px;
    border-color: transparent transparent $colorNeutral transparent;
    border-radius: 1px;

    @include transform-origin(50%, 50%);
    @include transform(rotate(180deg));
    @include transition(none);
  }

  .dropdown-list {
    height: auto;
    width: 100%;
    max-width: 180px;
    visibility: hidden;
    position: absolute;
    top: 85%;
    left: 0;
    overflow: initial;
    text-align: left;
    background-color: $colorNeutral;
    border-radius: 3px;
    z-index: 6;

    -webkit-box-shadow: 0px 10px 30px 0px rgba($colorPrimary,0.1);
            box-shadow: 0px 10px 30px 0px rgba($colorPrimary,0.1);


    @include transition(transform 330ms cubic-bezier(0.820, 0.000, 0.355, 1.340));
    @include transform-origin(95%, 0%);
    @include transform(scale(0));

    &:before {
      content: "";
      position: absolute;
      top: -7px;
      right: 14px;
      display: block;
      background-color: transparent;
      width: 0;
      height: 0;
      border-style: solid;
      border-width: 0 5px 7px 5px;
      border-color: transparent transparent $colorNeutral transparent;
    }

    .dropdown-list__item {
      padding: 9px 18px 8px 18px;
      font-size: 14px;
      color: $colorAdditionalSecond;
      cursor: pointer;

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

.dropdown.open {
  .icon:before,
  .icon:after {
    @include transform(rotate(0deg));
  }

  .icon:after {
    top: 4px;
  }

  .dropdown-list {
    visibility: visible;
    @include transform(scale(1));
  }
}

.dropdown .dropdown__button,
.js-dropdown {
  margin-bottom: 20px;
  padding: 8px 8px 8px 19px;
  width: 180px;
  font-size: 14px;
  text-align: left;
  color: $colorAdditionalSecond;
  background-color: $colorNeutral;
  border-radius: 3px;
  border:1px solid;
}

.dropdown--scroll {
  margin-left: 0;
  width: 100%;

  .dropdown__button {
    padding: 18px 8px 18px 19px;
    width: 100%;
    background-color: $colorInverse;
  }

  .dropdown-list-container {
    padding-bottom: 30px;
    height: 540px;
    width: 100%;
    max-width: 100%;
    visibility: hidden;
    position: absolute;
    top: 85%;
    left: 0;
    text-align: left;
    background-color: $colorInverse;
    border-radius: 3px;
    z-index: 5;

    -webkit-box-shadow: 0px 10px 30px 0px rgba($colorPrimary,0.1);
            box-shadow: 0px 10px 30px 0px rgba($colorPrimary,0.1);


    @include transition(transform 330ms cubic-bezier(0.820, 0.000, 0.355, 1.340));
    @include transform-origin(95%, 0%);
    @include transform(scale(0));

    &:before {
      content: "";
      position: absolute;
      top: -7px;
      right: 14px;
      display: block;
      background-color: transparent;
      width: 0;
      height: 0;
      border-style: solid;
      border-width: 0 5px 7px 5px;
      border-color: transparent transparent $colorInverse transparent;
    }

    &:after {
      margin-left: -7px;
      @include content-bl(11px, 50%, 13px, 8px, transparent);
      background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWlkWU1pZCIgd2lkdGg9IjEzIiBoZWlnaHQ9IjgiIHZpZXdCb3g9IjAgMCAxMyA4Ij4gIDxwYXRoIGZpbGw9IiNhZGEyYTQiIGQ9Ik0xMi41MDAsNy44NjYgQzEyLjE3NCw4LjA1NSAxMS43OTMsOC4wMjUgMTEuNDkyLDcuODQ0IEMxMS4zNTcsNy45MTcgMTEuMjExLDcuOTY5IDExLjA0Nyw3Ljk2OSBMMC45NTMsNy45NjkgQzAuNDI3LDcuOTY5IDAuMDAwLDcuNTQyIDAuMDAwLDcuMDE2IEMwLjAwMCw2LjY0MyAwLjIyMCw2LjMyOCAwLjUzMiw2LjE3MSBDMC41NTMsNi4wNzEgMC41NzgsNS45NzAgMC42MzQsNS44NzYgTDUuNjM0LDAuNDY4IEM1LjkxMCwwLjAwNCA2LjUyMiwtMC4xNTUgNy4wMDAsMC4xMTMgQzcuMDk3LDAuMTY3IDcuMTcwLDAuMjQyIDcuMjQwLDAuMzE5IEM3LjQ5NSwwLjM4MiA3LjcyNSwwLjU0MiA3Ljg2NiwwLjc4OCBMMTIuODY2LDYuNDkzIEMxMy4xNDIsNi45NzQgMTIuOTc4LDcuNTg4IDEyLjUwMCw3Ljg2NiBaIiBjbGFzcz0iY2xzLTEiLz48L3N2Zz4=) no-repeat;

      @include transform(rotate(180deg));
    }
  }

  .dropdown-list-wrapper {
    padding-top: 30px;
    height: 540px;
    width: 100%;
    box-sizing: border-box;

    &:before{
      margin-left: -7px;
      @include content-tl(11px, 50%, 13px, 8px, transparent);
      background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWlkWU1pZCIgd2lkdGg9IjEzIiBoZWlnaHQ9IjgiIHZpZXdCb3g9IjAgMCAxMyA4Ij4gIDxwYXRoIGZpbGw9IiNhZGEyYTQiIGQ9Ik0xMi41MDAsNy44NjYgQzEyLjE3NCw4LjA1NSAxMS43OTMsOC4wMjUgMTEuNDkyLDcuODQ0IEMxMS4zNTcsNy45MTcgMTEuMjExLDcuOTY5IDExLjA0Nyw3Ljk2OSBMMC45NTMsNy45NjkgQzAuNDI3LDcuOTY5IDAuMDAwLDcuNTQyIDAuMDAwLDcuMDE2IEMwLjAwMCw2LjY0MyAwLjIyMCw2LjMyOCAwLjUzMiw2LjE3MSBDMC41NTMsNi4wNzEgMC41NzgsNS45NzAgMC42MzQsNS44NzYgTDUuNjM0LDAuNDY4IEM1LjkxMCwwLjAwNCA2LjUyMiwtMC4xNTUgNy4wMDAsMC4xMTMgQzcuMDk3LDAuMTY3IDcuMTcwLDAuMjQyIDcuMjQwLDAuMzE5IEM3LjQ5NSwwLjM4MiA3LjcyNSwwLjU0MiA3Ljg2NiwwLjc4OCBMMTIuODY2LDYuNDkzIEMxMy4xNDIsNi45NzQgMTIuOTc4LDcuNTg4IDEyLjUwMCw3Ljg2NiBaIiBjbGFzcz0iY2xzLTEiLz48L3N2Zz4=) no-repeat;
    }
  }

  .dropdown-list {
    height: 100%;
    width: 100%;
    max-width: 100%;
    position: relative;
    background-color: transparent;
    -webkit-box-shadow: none;
            box-shadow: none;

    &:before {
      display: none;
    }

    .dropdown-list__item.active {
      position: relative;

      &:before {
        @include content-tl(16px, 5px, 9px, 7px, transparent);
          background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWlkWU1pZCIgd2lkdGg9IjkiIGhlaWdodD0iNyIgdmlld0JveD0iMCAwIDkgNyI+ICA8cGF0aCBmaWxsPSIjNWM0YjUxIiBkPSJNOC4wNTIsMS42NzcgTDUuMTY3LDYuMzIzIEM1LjE1Miw2LjM1MiA1LjEzNCw2LjM3OSA1LjExNSw2LjQwNyBMNS4wOTAsNi40NDggQzUuMDYxLDYuNDg5IDUuMDIwLDYuNTEyIDQuOTg3LDYuNTQ3IEM0Ljk1MSw2LjU4NCA0LjkyNyw2LjYyOSA0Ljg4NCw2LjY2MCBDNC44NzYsNi42NjYgNC44NjYsNi42NjcgNC44NTgsNi42NzIgQzQuNTI0LDYuOTIyIDQuMDYyLDYuOTU1IDMuNjk5LDYuNzA2IEMzLjU0Miw2LjU5OCAzLjQ0MSw2LjQ0NiAzLjM2OSw2LjI4NCBMMS4xMjMsMy4yMTcgQzAuNzk3LDIuNzcxIDAuODkzLDIuMTQ2IDEuMzM5LDEuODE5IEMxLjc4NSwxLjQ5MyAyLjQxMCwxLjU5MCAyLjczNywyLjAzNSBMNC4yMjAsNC4wNjEgTDYuNDAzLDAuNTQ1IEM2LjcxNiwwLjA5MCA3LjMzOSwtMC4wMjYgNy43OTQsMC4yODcgQzguMjQ5LDAuNTk5IDguMzY1LDEuMjIyIDguMDUyLDEuNjc3IFoiIGNsYXNzPSJjbHMtMSIvPjwvc3ZnPg==) no-repeat;
        @include transition(background 300ms ease-in-out);
      }
    }

    .dropdown-list__item.active:hover {
      position: relative;

      &:before {
          background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWlkWU1pZCIgd2lkdGg9IjkiIGhlaWdodD0iNyIgdmlld0JveD0iMCAwIDkgNyI+ICA8cGF0aCBmaWxsPSIjZmZmZmZmIiBkPSJNOC4wNTIsMS42NzcgTDUuMTY3LDYuMzIzIEM1LjE1Miw2LjM1MiA1LjEzNCw2LjM3OSA1LjExNSw2LjQwNyBMNS4wOTAsNi40NDggQzUuMDYxLDYuNDg5IDUuMDIwLDYuNTEyIDQuOTg3LDYuNTQ3IEM0Ljk1MSw2LjU4NCA0LjkyNyw2LjYyOSA0Ljg4NCw2LjY2MCBDNC44NzYsNi42NjYgNC44NjYsNi42NjcgNC44NTgsNi42NzIgQzQuNTI0LDYuOTIyIDQuMDYyLDYuOTU1IDMuNjk5LDYuNzA2IEMzLjU0Miw2LjU5OCAzLjQ0MSw2LjQ0NiAzLjM2OSw2LjI4NCBMMS4xMjMsMy4yMTcgQzAuNzk3LDIuNzcxIDAuODkzLDIuMTQ2IDEuMzM5LDEuODE5IEMxLjc4NSwxLjQ5MyAyLjQxMCwxLjU5MCAyLjczNywyLjAzNSBMNC4yMjAsNC4wNjEgTDYuNDAzLDAuNTQ1IEM2LjcxNiwwLjA5MCA3LjMzOSwtMC4wMjYgNy43OTQsMC4yODcgQzguMjQ5LDAuNTk5IDguMzY1LDEuMjIyIDguMDUyLDEuNjc3IFoiIGNsYXNzPSJjbHMtMSIvPjwvc3ZnPg==) no-repeat;
      }
    }

    .dropdown-list__item {
      -webkit-transition: color 300ms ease-in-out, background-color 300ms ease-in-out;
              transition: color 300ms ease-in-out, background-color 300ms ease-in-out;
    }

    .dropdown-list__item:hover {
      color: $colorInverse;
      background-color: $colorPrimary;
    }

  }

  .dropdown-list:after {
    border-color: transparent transparent $colorInverse transparent;
  }

  .icon:after {
    border-color: transparent transparent $colorInverse transparent;
  }
}

.dropdown--scroll.open .dropdown-list-container {
  visibility: visible;

  @include transform(scale(1));
}

/* Fold elements
/* -------------------------------------------------------------------------- */
.fold {
  .fold__toggle {
    position: relative;
    text-align: left;
    cursor: pointer;

    &:before,
    &:after {
      @include content-tr(50%, 10px, 13px, 3px, $colorHighlight);
      @include transform-origin($top: 50%, $left: 50%);
      border-radius: 3px;
    }

    &:after {
      @include transform(rotate(90deg));
    }

    &:hover:before,
    &:hover:after {
      background-color: $colorPrimary
    }
  }

  .fold__content {
    padding-top: 28px;
    display: none;
  }
}

.fold.open {
  .fold__toggle:after {
    display: none;
  }

  .fold__content {
    display: block;
  }
}

/* Media styles */
@media (min-width: 769px) {
  .fold .fold__content {
    display: block;
  }

  .fold .fold__toggle {
    cursor: default;
    text-align: center;
  }

  .fold .fold__toggle:before,
  .fold .fold__toggle:after {
    display: none;
  }
}

/* Hero images
/* -------------------------------------------------------------------------- */
.hero-img {
  height: 700px;
  position: relative;

  .hero-img__content {
    position: absolute;
    top: 50%;
    left: 50%;
    color: $colorInverse;
    text-align: center;
    opacity: 1;

    @include transform(translate3d(-50%, -50%, 0));

    em {
      margin-bottom: -75px;
      display: block;
      font-style: normal;
      opacity: .6;
    }
  }
}

.hero-img--contact {
  height: 560px;

  .hero-img__content {
    top: 40%;
  }

  &:before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    background-color: $colorPrimary;
    opacity: .6;
  }

  {% if settings.contact_banner_enable %}
    background-image: url({{ 'img_contact_banner.jpg' | asset_url }});
    background-size: cover;
    background-position: 50% 50%;
  {% endif %}
}

.hero-img--404 {
  height: 480px;
  height: 43vh;
  position: relative;
  background-image: url({{ 'img_404_bg.jpg' | asset_url }});
  background-size: cover;
  background-position: 50% 50%;

  &:before {
    @include content-tl(0, 0, 100%, 100%, $colorAccent);

    opacity: .04;
  }
}

.hero-img--landing {
  height: 740px;
  position: relative;
  background-image: url({{ 'img_landing_hero.jpg' | asset_url }});
  background-size: cover;
  background-position: 50% 50%;

  &:before {
    @include content-tl(0, 0, 100%, 100%, $colorPrimary);

    opacity: .7;
  }

  .hero-img__content {
    padding-top: 95px;
    position: relative;
    top: 0;
    left: 0;
    @include transform(translate3d(0, 0, 0));

  }

  .hero-img__content em {
    margin-bottom: 0;
    font-style: italic;
    opacity: 1;
  }
}

/* Media styles */
@media (min-width: 481px) {
  .hero-img--404 {
    height: 700px;
    height: 62.5vh;
  }
}

@media (min-width: 769px) {
  .hero-img--landing {
    .hero-img__content {
      padding-top: 0;
      position: absolute;
      top: 200px;
      left: 50%;
      @include transform(translateX(-50%));
    }
  }

  {% if settings.contact_banner_enable %}
  .hero-img--contact {
    background-position: 50% 80%;
  }
  {% endif %}
}

/* Images
/* -------------------------------------------------------------------------- */
.img-holder {
  position: relative;
  overflow: hidden;
  z-index: 2;

  a {
    display: inline-block;
    line-height: 0;
  }

  img {
    position: absolute;
    top: 50%;
    left: 50%;
    height: 100%;

    @include transform(translate3d(-50%, -50%, 0));
  }
}

.img-holder--block {
  overflow: visible;

  img {
    position: relative;
    top: 0;
    left: 0;

    @include transform(translate3d(0, 0, 0));
  }
}

.img-holder--circle {
  border: 4px solid $colorInverse;
  border-radius: 50%;
}

.img-holder--circle-sm {
  width: 70px;
  height: 70px;
}

.bg-cover {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAMAAAC7IEhfAAAAD1BMVEVcTFL///9cTFJcTFJcTFIux7vQAAAABXRSTlMAAAgPFr80/pcAAAAnSURBVHgBY2DEBAxMWMAwVziqcFQhFoBdITMWwIIFjCoEg1GFowoBVCYPevB5gSUAAAAASUVORK5CYII=);
}

/* Instagram feed
/* -------------------------------------------------------------------------- */
.instagram-feed-container {
  padding: 47px 20px 58px 20px;
  text-align: center;

  .subheading--page-small {
    padding: 13px 0 13px 0;
  }
}

.instagram-feed {
  overflow: hidden;

  a {
    display: block;
    float: left;
    width: 50%;
    position: relative;
    line-height: 0;

    &:before {
      @include content-tl(0, 0, 100%, 100%, $colorNeutral);

      @include transition(opacity 300ms ease-in-out);
      opacity: 0;
    }

    &:nth-child(n+5){
      display: none;
    }

    &:hover:before {
      opacity: .6;
    }
  }

  img {
    width: 100%;
    max-width: 212px;
  }
}

/* Media styles */
@media( max-width: 768px) and (min-width: 481px) {
  .instagram-feed {
    a {
      width: 33.33%;

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

      &:nth-child(n+7){
        display: none;
      }
    }

    img {
      max-width: 240px;
    }
  }
}

@media( min-width: 769px) {
  .instagram-feed-container {
    padding-left: 0;
    padding-right: 0;

    .subheading--page-small {
      padding: 13px 0 35px 0;
    }
  }

  .instagram-feed {
    a {
      width: 12.5%;

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

    img {
      max-width: 306px;
    }
  }
}

/* Maps
/* -------------------------------------------------------------------------- */
.map-wrapper {
  position: relative;

  .map {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;

    iframe {
      width: 100%;
      height: 100%;
    }
  }

  .map-container {
    width: 100%;
    height: 100%;

    .btn {
      position: absolute;
      top: 10px;
      right: 50px;
      @include transition(none);
    }

    .btn:before {
      @include transition(transform 300ms ease-in-out);
    }
  }
}

/* Modal
/* -------------------------------------------------------------------------- */
.modal {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba($colorPrimary, .6);
  z-index: 15;

  .modal-container {
    padding-bottom: 40px;
    padding-top: 52px;
    width: 100%;
    max-width: 640px;
    position: absolute;
    top: 10%;
    left: 50%;
    text-align: center;
    background-color: $colorNeutral;
    @include transform(translateX(-50%));
  }

  .modal__btn-close {
    position: absolute;
    top: 11px;
    right: 8px;
    @include transition(color 300ms ease-in-out);

    &:hover {
      color: $colorHighlight;
    }
  }

  .modal-form {
    margin-top: 50px;
    text-align: center;

    .heading--page-small {
      padding-bottom: 50px;
    }

    .btn--submit {
      margin-top: 32px;
    }

    .form__text-link {
      margin-top: 15px;
      padding: 10px;
      display: inline-block;
    }
  }
}

.modal--address {
  .modal-container {
    top: 0px;
    bottom: 0px;
    overflow: hidden;
  }

  .modal__body .overview {
    background-color: $colorNeutral;
  }

  .modal__body {
    margin: 0 auto;
    height: 100%;
    max-width: 100%;
  }

  .modal-form {
    margin-top: 45px;
    padding-bottom: 80px;
    min-height: 780px;
  }

  .dropdown--scroll .dropdown__button {
    padding: 9px 17px 8px 17px;
  }

  .dropdown--scroll .dropdown-list-container,
  .dropdown--scroll .dropdown-list-wrapper {
    height: 330px;
  }

  .scrollable .scrollbar-track .thumb {
    background-color: $colorAdditionalSecond;
  }
}

.modal--address-delete {
  .modal-container {
    padding: 67px 20px 53px 20px;
    box-sizing: border-box;
    line-height: 20px;
  }

  .modal__info {
    padding-top: 20px;
    padding-bottom: 40px;
    font-size: 14px;
  }

  .modal__actions {
    a:first-child {
      margin-right: 80px;
      color: $colorPrimary;
      opacity: .4;
      @include transition(opacity 300ms ease-in-out);

      &:hover {
        opacity: 1;
      }
    }
  }
}

.modal-open {
  .header,
  .footer,
  .drawer {
    z-index: 1;
  }
}

/* Media styles */
@media (min-width: 481px) {
  .modal--address-delete {
    .modal-container {
      padding: 67px 70px 53px 70px;
    }
  }
}

@media (min-width: 769px) {
  .modal--address {
    .modal-container {
      top: 80px;
      bottom: 80px;
    }
  }
}

/* Lists
/* -------------------------------------------------------------------------- */
.link-list {
  .link-list__item {
    padding: 0 2%;
    display: inline-block;
    position: relative;

    &:before {
      margin-top: -2px;
      @include content-tr(50%, -2px, 4px, 4px, $colorPrimary);

      border-radius: 50%;
    }

    &:last-child:before {
      display: none;
    }
  }

  .link-list__link {
    font-weight: 800;
    text-transform: uppercase;

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

/* Media styles */
@media (min-width: 769px) {
  .link-list {
    .link-list__item {
      padding: 0 4.5%;
    }
  }
}

/* Pagination
/* -------------------------------------------------------------------------- */
.pagination {
  clear: both;
  padding-top: 25px;
  text-align: center;

  .pagination__item {
    width: 40px;
    height: 40px;
    display: inline-block;
    color: $colorTextBody;
    background-color: $colorNeutral;
    border-radius: 50%;
    -webkit-transition: background-color 300ms ease-in-out, color 300ms ease-in-out;
            transition: background-color 300ms ease-in-out, color 300ms ease-in-out;
    cursor: pointer;


    .pagination__link {
      @include transition(none);
    }

    .icon:before,
    .icon:after {
      @include transition(border-color 300ms ease-in-out);
    }

    &:hover {
      color: $colorInverse;
      background-color: $colorPrimary;

      .icon:before {
        border-color: transparent transparent $colorInverse transparent;
      }

      .icon:after {
        border-color: transparent transparent $colorPrimary transparent;
      }
    }

    &:first-child {
      float: left;
      display: inline-block;
    }

    &:last-child {
      float: right;
      display: inline-block;
    }
  }

  .pagination__item--parts {
    display: inline-block;
  }

  .pagination__parts .pagination__item--center {
    display: none;

    .active,
    &:first-child,
    &:last-child {
      display: inline-block;
      float: none;
    }
  }

  .pagination__parts .pagination__item {
    margin-left: 7px;
    margin-right: 7px;
  }

  .pagination__link {
    height: 100%;
    display: block;
    font-size: 16px;
    line-height: 2.5;
    text-align: center;
  }

  .pagination__item.active,
  .pagination__item.disabled,
  .pagination__item:hover.disabled,
  .pagination__item:hover.active, {
    margin-top: -3px;
    color: $colorTextBody;
    background-color: $colorInverse;
    border: 3px solid $colorNeutral;
    cursor: default;

    .icon:before {
      border-color: transparent transparent $colorNeutral transparent;
    }

    .icon:after {
      border-color: transparent transparent $colorInverse transparent;
    }
  }

  .pagination__item.disabled .pagination__link,
  .pagination__item.active .pagination__link,
  .pagination__item--ellip .pagination__link,
  .pagination__item.disabled,
  .pagination__item.active,
  .pagination__item--ellip {
    cursor: default;
  }

  .pagination__item--ellip,
  .pagination__item--ellip:hover {
    font-size: 25px;
    color: $colorTextBody;
    background-color: transparent;
    cursor: default;
    display: none;
  }

  .pagination__item--ellip .pagination__link {
    font-size: 25px;
    line-height: 25px;
  }

  .pagination__item--prev,
  .pagination__item--next {
    position: relative;

    .icon {
      margin-top: -6px;
      position: absolute;
      top: 50%;
      left: 50%;
    }
  }

  .pagination__item--prev .icon {
    margin-left: -10px;
  }

  .pagination__item--next .icon {
    margin-left: -6px;
  }
}

.pagination--simple {
  padding-top: 50px;
  overflow: hidden;
  padding-bottom: 47px;

  .pagination__item {
    margin: 0 20px;
    width: auto;
    position: relative;
    font-weight: 800;
    letter-spacing: 1px;
    color: $colorTextBodyLight;
    background-color: transparent;

    -webkit-transition: background-color 300ms ease-in-out, color 300ms ease-in-out;
            transition: background-color 300ms ease-in-out, color 300ms ease-in-out;

    &:before {
      @include content-tl(0, 0, 40px, 40px, $colorNeutral);
      border-radius: 50%;
      z-index: 0;
      @include transition(background-color 300ms ease-in-out);
    }

    &:hover {
      color: $colorPrimary;
      background-color: transparent;

      &:before {
        background-color: $colorPrimary;
      }
    }

    &:last-child:before {
      left: auto;
      right: 0;
    }
  }

  .pagination__item.disable {
    color: $colorNeutral;

    &:before {
      width: 32px;
      height: 32px;
      background-color: $colorInverse;
      border: 4px solid $colorNeutral;
    }

    .pagination__link {
      cursor: default;
    }

    .icon:before {
      border-color: transparent transparent $colorNeutral transparent;
    }

    .icon:after {
      border-color: transparent transparent $colorInverse transparent;
    }
  }

  .pagination__link {
    padding-left: 10px;
    display: inline-block;
    text-align: left;
  }

  .pagination__link-text {
    display: none;
  }

  .pagination__item:last-child .pagination__link  {
    padding-left: 0;
    padding-right: 10px;
  }

  .icon {
    vertical-align: middle;
  }

  .icon--arrow-left {
    margin-right: 20px;
  }

  .icon--arrow-right {
    margin-left: 20px;
  }
}

@media (min-width: 481px) {
  .pagination .pagination__item {
    margin: 0 7px;
  }

  .pagination .pagination__item--ellip,
  .pagination .pagination__item--ellip:hover {
    display: inline-block;
  }
}


/* Media styles */
@media (min-width: 481px) and (max-width: 768px) {

  .pagination .pagination__item.active.pagination__item--ellip-add {
    margin-right: 40px;
    margin-left: 40px;
    position: relative;
  }

  .pagination .pagination__item.active.pagination__item--ellip-add:before,
  .pagination .pagination__item.active.pagination__item--ellip-add:after {
    content: '...';
    display: block;
    position: absolute;
    top: -5px;
    width: 40px;
    height: 40px;
    font-size: 25px;
  }

  .pagination .pagination__item.active.pagination__item--ellip-add:before {
    left: -50px;
  }

  .pagination .pagination__item.active.pagination__item--ellip-add:after {
    right: -50px;
  }
}

@media (min-width: 769px) {
  .pagination--simple .pagination__link-text {
    display: inline-block;
  }

  .pagination {
    .pagination__item {
      display: inline-block;
    }
  }

  .pagination .pagination__parts .pagination__item--center {
    display: inline-block;
  }
}

/* Search
/* -------------------------------------------------------------------------- */
.search-container--lg {
  margin: 0 auto;
  margin-top: 15px;
  max-width: 520px;

  /* .icon--search {
    position: absolute;
    top: 0;
    right: -3px;
  } */

  .form--search-primary {
    .btn--submit {
      width: 30px;
      height: 30px;
      display: block;
      position: absolute;
      top: -2px;
      right: -2px;
      text-indent: 999px;
      opacity: .1;
      z-index: 2;
    }

    .btn--submit:hover + .icon--search .svg-icon path {
      fill: $colorHighlight;
    }
  }
}

.search-results {
  margin: 0 -7px;
  padding-top: 30px;
  text-align: center;
}

.search-result {
  padding: 0 13px;
  text-align: left;
  vertical-align: top;
  box-sizing: border-box;

  .search-result__title {
    font-size: 18px;
    line-height: 24px;

    .highlight {
      font-weight: bold;
    }
  }

  .date {
    font-size: 14px;
  }

  .search-result__desc {
    padding-top: 6px;
    padding-bottom: 9px;
    font-size: 14px;
    line-height: 24px;
  }

  .search-result__author {
    font-family: $additionalBodyFontStack;
    font-size: 14px;
    color: $colorTextBodyLight;
  }

  .highlight {
    font-weight: normal;
    background-color: $colorAccent;
  }
}

/* Media styles */
@media (min-width: 769px) {
  .search-results {
    text-align: left;
  }

  .search-popup {
    transform: scale(0);
    visibility: hidden;

    .search-popup__container {
      padding: 0 60px;
      width: 100%;
      min-width: 420px;
      background: $colorInverse;
      box-sizing: border-box;
      text-align: left;
    }

    .scrollable .scrollbar-track .thumb {
      opacity: .4;
    }

    .search-popup__scroll-container {
      margin-left: -205px;
      position: absolute;
      top: 100%;
      left: 50%;
      height: 565px;
      width: 100%;
      min-width: 420px;
      -webkit-box-shadow: 0px 10px 30px 0px rgba($colorPrimary,0.1);
              box-shadow: 0px 10px 30px 0px rgba($colorPrimary,0.1);
    }

    .search-popup__scroll-container:before,
    .search-popup__scroll-container:after {
      content: '';
      display: block;
      height: 25px;
      width: 100%;
      background-color: $colorInverse;
    }

    .search-popup__scroll-container:before{
      -webkit-box-shadow: 0px 0px 30px 0px rgba($colorPrimary,0.1);
              box-shadow: 0px 0px 30px 0px rgba($colorPrimary,0.1);
    }

    .search-popup__scroll-container:after{
      -webkit-box-shadow: -5px 0px 30px 0px rgba($colorPrimary,0.1);
              box-shadow: -5px 0px 30px 0px rgba($colorPrimary,0.1);
    }
  }

  .msg-show .search-popup .search-popup__scroll-container{
    height: auto;
  }
  .msg-show .search-popup .search-popup__scroll-container:before,
  .msg-show .search-popup .search-popup__scroll-container:after {
    -webkit-box-shadow: -5px 0px 30px 0px rgba($colorPrimary,0);
            box-shadow: -5px 0px 30px 0px rgba($colorPrimary,0);
  }

  .search-popup__item {
    padding: 15px 0;

    .img-holder {
      height: 70px;
      width: 70px;
      float: left;
      border-radius: 50%;
    }

    .img-holder img {
      height: 100%;
    }

    .search-popup__item-link {
      height: 100%;
      width: 100%;
      display: block;
      position:relative;
    }

    .product__spec {
      margin-top: -1px;
      display: block;
      font-size: 14px;
      font-family: $additionalBodyFontStack;
      color: $colorTextBodyLight;
    }

    .search-popup__item-title {
      font-size: 18px;
      @include transition(color 300ms ease-in-out);
    }

    .search-popup__item-price {
      margin-top: 2px;
      margin-right: 15px;
      font-size: 18px;
      font-weight: 600;
      display: inline-block;
    }

    .search-popup__item-price-compare {
      text-decoration: line-through;
    }

    .search-popup__desc-wrapper {
      margin-left: 88px;
      padding: 2px 0;
    }
  }

  .search-popup__error {
    font-size: 14px;
    text-align: center;
    color: $colorAdditionalSecond;
  }

  .search-popup__error a {
    font-weight: 600;
    color: $colorLink;
  }

  .search-popup__error a:hover {
    color: $colorLinkHover;
  }

  .search-popup__item .search-popup__item-link:hover .search-popup__item-title {
    color: $colorBtnPrimary;
  }

  .popup-active .search-popup {
    -webkit-animation: openPopup 300ms ease-in-out 0ms forwards;
        -ms-animation: openPopup 300ms ease-in-out 0ms forwards;
            animation: openPopup 300ms ease-in-out 0ms forwards;
  }
}

@-webkit-keyframes openPopup {
  0% {
    transform: scale(0);
    visibility: hidden;
  }

  100% {
    transform: scale(1);
    visibility: visible;
  }
}

@-ms-keyframes openPopup {
  0% {
    transform: scale(0);
    visibility: hidden;
  }

  100% {
    transform: scale(1);
    visibility: visible;
  }
}

@keyframes openPopup {
  0% {
    transform: scale(0);
    visibility: hidden;
  }

  100% {
    transform: scale(1);
    visibility: visible;
  }
}

@media (min-width: 769px) and (max-width: 1024px){
  .search-popup .search-popup__scroll-container {
    margin-left: -145px;
  }
}

/* Social sharing
/* -------------------------------------------------------------------------- */
.social-sharing {
  padding: 20px 0;
  background-color: $colorNeutral;
  text-align: center;

  .social-sharing__title {
    padding-right: 0;
    font-size: 12px;
    text-transform: uppercase;
  }

  .social-sharing__item {
    margin-left: 5px;
    width: 40px;
    height: 40px;
    display: inline-block;
    overflow: hidden;
    line-height: 40px;
    background-color: $colorInverse;
    color: $colorPrimary;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    -webkit-transition: background-color 300ms ease-in-out, color 300ms ease-in-out, fill 300ms ease-in-out;
            transition: background-color 300ms ease-in-out, color 300ms ease-in-out, fill 300ms ease-in-out;

    svg path {
      fill: $colorPrimary;
    }

    &:hover,
    &:hover svg path {
      color: $colorInverse;
      fill: $colorInverse;
      background-color: $colorPrimary;
    }
  }
}

.social-sharing-clear {
  background-color: transparent;

  .heading--add-small {
    font-size: 12px;
    color: $colorInverse;
  }

  .social-sharing__title {
    display: none;
  }
}

.social-sharing--product {
  margin-top: -20px;
  padding-bottom: 25px;
  background-color: transparent;
  display: flex;
  justify-content: center;
  align-items: center;

  .social-sharing__item {
    background-color: $colorNeutral;
  }
}

/* Media styles */
@media (min-width: 769px) {
  .social-sharing {
    .social-sharing__title {
      padding-right: 20px;
    }

    .social-sharing__item {
      margin-left: 16px;
    }
  }

  .social-sharing--product {
    margin-top: 0;
    padding: 20px 0;
    background-color: $colorNeutral;

    .social-sharing__item {
      background-color: $colorInverse;
    }
  }
}

/* Special offers
/* -------------------------------------------------------------------------- */

.special-offer-container{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin-top:-5px;
}

.spesial-offer {
  flex-basis: 384px;
  flex-grow: 1;
  margin-bottom: 3px;
  padding-top: 62px;
  height: calc(50vw / 1.5); /* use aspect ratio based on padding */
  min-height: 540px;
  position: relative;
  text-align: center;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  box-sizing: border-box;

  &:before {
    @include content-tl(0, 0, 100%, 100%,  $colorHighlight);
    opacity: 0;
    @include transition(opacity 300ms ease-in-out);
  }

  &:hover:before {
    opacity: 0.2;
  }

  .spesial-offer__info {
    margin: 0 auto;
    margin-top: -65px;
    padding: 45px 0 0 25px;
    width: 50%;
    min-width: 270px;
    overflow: hidden;
    position: absolute;
    top: 50%;
    left: 25%;
    box-sizing: border-box;
    font-family: $additionalBodyFontStack;

    &:before {
      @include content-br(45px, 0, 60%, 3px, $colorAccent);
      left: 100px;
      width: initial;
      margin-left: 35px;
    }
  }

  .spesial-offer__mark {
    padding: 0 5px;
    width: 100px;
    height: 100px;
    display: block;
    float: left;
    line-height: 100px;
    color: $colorInverse;
    background-color: $colorAccent;
    border-radius: 50%;
    box-sizing: border-box;

    strong {
      display: inline-block;
      vertical-align: middle;
      line-height: 18px;
    }
  }

  .spesial-offer__desc {
    margin-top: 23px;
    float: right;
  }

  .btn {
    position: absolute;
    bottom: 25px;
    left: 50%;

    @include transform(translateX(-50%));
  }
}


@media (min-width: 1200px) {
  .spesial-offer {
    .heading--page {
      font-size: calc(90vw / 38);
    }

    .subheading--page {
      font-size: calc(100vw / 46);
    }

    .spesial-offer__info {
      font-size: calc(100vw / 75);
      &:before {
        @include content-br(45px, 0, 60%, 3px, $colorAccent);
        width: initial;
        left: calc(100vw / 12);
        margin-left: 35px;
      }
    }

    .spesial-offer__mark {
      width: calc(100vw / 12);
      height: calc(100vw / 12);
      line-height: calc(100vw / 12);
    }
    .spesial-offer__mark strong {
      line-height: calc(100vw / 75);
    }

    .spesial-offer__info:before {
      bottom: calc(100vw / 25);
    }
  }
}

/* Tables
/* -------------------------------------------------------------------------- */
.table {
  margin-bottom: 30px;

  .table__link a{
    font-weight: 600;
    color: $colorLink;

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

.table-wrapper {
  overflow-x: scroll;

  table {
    min-width: 460px;
  }
}

.table--clear {
  th,
  td {
    font-size: 14px;
  }

  th {
    padding: 2px 0 10px 10px;
    font-weight: 600;
  }

  thead tr {
    border-bottom: 3px solid $colorNeutral;
  }

  tbody td,
  tfoot td {
    padding: 25px 0 16px 10px;
    border-bottom: 1px solid $colorNeutral;
  }
}

/* Media styles */
@media (min-width: 769px) {
  .table-wrapper {
    overflow-x: auto;
  }
}

/* ==========================================================================
   Scroll rules
   ========================================================================== */
.scrollable {
  position: relative;
}

.scrollable:focus {
  outline: 0;
}

.scrollable .viewport {
  position: relative;
  overflow: hidden;
  min-height: 100%;
  height: 100%;
}

.scrollable .scrollbar-track {
  position: absolute;
  right: 5px;
  height: 100%;
}

.scrollable .scrollbar-track .thumb {
  position: absolute;
  z-index: 190;
  width: 100%;
  min-height: 10px;
}

.scrollable .not-selectable {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.scrollable .scrollbar-track {
  width: 7px;
  right: 5px;
}

.scrollable .scrollbar-track .thumb {
  background-color: $colorAdditionalSecond;
  opacity: 0;
  border-radius: 3px;
  -webkit-transition: opacity 600ms ease-in-out;
          transition: opacity 600ms ease-in-out;
}

.scrollable .scrollbar-track:hover .thumb {
  opacity: 1;
}

.scrollable .overview {
  width: 100%;
  min-height: 100%;
  position: relative;
  background-color: $colorInverse;
}

.scrollable .display-none {
  display: none;
}

.scrollable .scrollbar-track .thumb.scroll-active {
  opacity: 0.4;
}


/* ==========================================================================
   Parallax
   ========================================================================== */
.parallax {
  .parallax__back {
    width: 100%;
    z-index: 0;
    position: fixed;
    top: 0;
    left: 0;
    box-sizing: border-box;
  }

  .parallax__base {
    background-color: $colorInverse;
    position: relative;
    z-index: 1;
  }

  .parallax__base:after {
    content: "";
    display: block;
    width: 100%;
    height: 86px;
    position: absolute;
    bottom: -86px;
    left: 0;
    background-color: #fff;
  }

  .fade-up {
    opacity: 0;
  }
}

.parallax-move {

  .fade-up {
    @include animation(showUp 1s cubic-bezier(0.7,0,0.3,1) 0s forwards);
    -webkit-animation-name: showUp;
            animation-name: showUp;
    -webkit-animation-duration: 1s;
            animation-duration: 1s;
    -webkit-animation-timing-function: cubic-bezier(0.7,0,0.3,1);
            animation-timing-function: cubic-bezier(0.7,0,0.3,1);
    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
  }

  // .product__desc {
  //   @include animation(showUp 1s cubic-bezier(0.7,0,0.3,1) 0.2s forwards);
  // }
}

/* Media styles */
@media (max-width: 768px) {
  .parallax .parallax__back,
  .parallax .parallax__base {
    -webkit-transform: translate3d(0, 0, 0) !important;
        -ms-transform: translate3d(0, 0, 0) !important;
            transform: translate3d(0, 0, 0) !important;

    -webkit-transition: none !important;
            transition: none !important;
  }

  .empty-div:before {
    @include content-tl(0, 0, 100%, 140px, transparent);
    z-index: 1;
    background: -webkit-linear-gradient(top,        rgba($colorNeutral, 1) -20%, rgba($colorInverse, 0) 100%);
    background:    -moz-linear-gradient(top,        rgba($colorNeutral, 1) -20%, rgba($colorInverse, 0) 100%);
    background:         linear-gradient(to bottom,  rgba($colorNeutral, 1) -20%, rgba($colorInverse, 0) 100%);
  }
}

.delay-one,
.parallax__base .delay-one {
 -webkit-animation-delay: 0.2s;
         animation-delay: 0.2s;
}

.delay-two,
.parallax__base .delay-two {
 -webkit-animation-delay: 0.4s;
         animation-delay: 0.4s;
}

.delay-three,
.parallax__base .delay-three {
 -webkit-animation-delay: 0.6s;
         animation-delay: 0.6s;
}

.delay-four,
.parallax__base .delay-four {
 -webkit-animation-delay: 0.8s;
         animation-delay: 0.8s;
}

.delay-five,
.parallax__base .delay-five {
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}

@keyframes showUp {
  0% {
    @include transform(translateY(400px));
    opacity: 0;
  }

  100% {
    @include transform(translateY(0px));
    opacity: 1;
  }
}

@-webkit-keyframes showUp {
  0% {
    @include transform(translateY(400px));
    opacity: 0;
  }

  100% {
    @include transform(translateY(0px));
    opacity: 1;
  }
}

/* ==========================================================================
   Information button
   ========================================================================== */
.gruit-popup {
  z-index: 2;
}

.gruit-popup__open-btn:before {
  margin-left: -10px;
  margin-top: -8px;
  width: 21px;
  height: 16px;
  background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHByZXNlcnZlQXNwZWN0UmF0aW89InhNaWRZTWlkIiB3aWR0aD0iMjEiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAyMSAxNiI+PHBhdGggZmlsbD0iI2ZmZiIgZD0iTTE5IDE2SDJjLTEuMTA1IDAtMi0uODk1LTItMlYyQzAgLjg5Ni44OTUgMCAyIDBoMTdjMS4xMDUgMCAyIC44OTYgMiAydjEyYzAgMS4xMDUtLjg5NSAyLTIgMnpNMy42MDMgMmw2LjkxIDUuMzY1TDE3LjQwNCAyaC0xMy44ek0xOSAzLjI0bC04LjMzNyA2LjQ5NC0uMTctLjE3MmMtLjA1My4wNDgtLjA5Ni4wODUtLjE1Ni4xNDJMMiAzLjIzMlYxM2MwIC41NTIuNDQ4IDEgMSAxaDE1Yy41NTIgMCAxLS40NDggMS0xVjMuMjR6IiBjbGFzcz0iY2xzLTEiLz48L3N2Zz4=') no-repeat;
}


.gruit-popup__open-btn:hover {
  opacity: 1;
}

.gruit-popup__open-btn .svg-container path {
  fill: $colorHighlight;
}

.gruit-popup__open-btn:hover .svg-container path {
  fill: $colorPrimary;
}

.gruit-popup__open-btn:hover:after {
  border-color: $colorPrimary;
}

.gruit-popup__close-btn:before,
.gruit-popup__close-btn:after {
  background-color: $colorPrimary;
}

.gruit-popup__close-btn:hover:before,
.gruit-popup__close-btn:hover:after {
  background-color: $colorHighlight;
}

.gruit-popup__news {
  border-color: $colorPrimary;
}

.gruit-popup__author {
  display: none;
}

.gruit-popup__news-title {
  margin-top: 47px;
  font-family: $headerTextFontStack;
  font-size: 16px;
  font-weight: normal;
  line-height: 20px;
  text-transform: uppercase;
}

.gruit-popup__link {
  margin-top: 40px;
  display: inline-block;
  color: $colorLink;
  letter-spacing: 1px;
}

.gruit-popup__link:hover {
  color: $colorLinkHover;
}

.gruit-popup__link svg {
  display: block;
  margin: 0 auto;
}

.gruit-popup__link svg path {
  fill: $colorLink;

  @include transition(fill 300ms ease-in-out);
}

.gruit-popup__link:hover svg path {
  fill: $colorLinkHover;
}
.gruit-popup__news-text {
  line-height: 30px;
}

.gruit-popup .coupon-code {
  margin: 0 auto;
  margin-bottom: 27px;
  padding: 2px 0;
  width: 180px;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  border: 3px solid $colorPrimary;
}

/* ==========================================================================
   Animations
   ========================================================================== */
.display-none {
  display: none;
}

.display-block {
  display: none;
}

.fade-in {
  @include animation( fadeIn 350ms ease-in-out);
}

@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
    @include transform(translate3d(0, 100%, 0));
  }

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

@keyframes fadeIn {
  0% {
    opacity: 0;
    @include transform(translate3d(0, 100%, 0));
  }

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

.fade-out {
  @include animation( fadeOut 350ms ease-in-out 0ms forwards);
}

@-webkit-keyframes fadeOut {
  0% {
    opacity: 1;
    @include transform(translate3d(0, 0, 0));
  }

  100% {
    opacity: 0;
    @include transform(translate3d(0, 100%, 0));
  }
}

@keyframes fadeOut {
  0% {
    opacity: 1;
    @include transform(translate3d(0, 0, 0));
  }

  100% {
    opacity: 0;
    @include transform(translate3d(0, 100%, 0));
  }
}


.fade-in-opacity {
  @include animation( fadeInOpacity 350ms ease-in-out);
}

@-webkit-keyframes fadeInOpacity {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes fadeInOpacity {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.fade-out-opacity {
  @include animation( fadeOutOpacity 350ms ease-in-out 0ms forwards);
}

@-webkit-keyframes fadeOutOpacity {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@keyframes fadeOutOpacity {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

// Loading spinner
.loading-spiner {
  &:after {
    content: "";
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-left: 10px;
    line-height: 10px;
    vertical-align: text-bottom;
    background-color: $colorInverse;
    border-radius: 100%;
    -webkit-animation: sk-scaleout 1.0s infinite ease-in-out;
    animation: sk-scaleout 1.0s infinite ease-in-out;
  }
}

@-webkit-keyframes sk-scaleout {
  0% {
    -webkit-transform: scale(0)
  }

  100% {
    -webkit-transform: scale(1.0);
    opacity: 0;
  }
}

@keyframes sk-scaleout {
  0% {
    -webkit-transform: scale(0);
    transform: scale(0);
  } 100% {
    -webkit-transform: scale(1.0);
    transform: scale(1.0);
    opacity: 0;
  }
}

@-webkit-keyframes contentTop {
  100% {
    @include transform(transslate3d(0, 0px, 0));
  }
}

@keyframes contentTop {
  100% {
    @include transform(transslate3d(0, 0px, 0));
  }
}

.content-to-top2 {
  @include animation(contentTop2 450ms ease-in-out 0s forwards);
}

@-webkit-keyframes contentTop2 {
  100% {
    @include transform(translateY(0));
  }
}

@keyframes contentTop2 {
  100% {
    @include transform(translateY(0));
  }
}


/* ==========================================================================
   Version 1.2
   ========================================================================== */

/* Add to cart product (boxed view)
/* -------------------------------------------------------------------------- */
.product--boxed {
  padding-top: 55px;
  padding-bottom: 50px;
}

.product--boxed .product__content {
  padding: 25px 25px;
  max-width: 100%;
  position: relative;
  text-align: center;
  top: 0;
  @include transform(none);
}

.product--boxed .product__title {
  font-size: 20px;
  line-height: 42px;
}

.product--boxed .product__info .product__spec {
  text-align: center;
  font-size: 14px;
}

.product--boxed .product__desc {
  text-align: center;
}

.product--boxed .form {
    width: 100%;
    max-width: 100%;
}

.product--boxed .form-wrapper {
  padding: 0;
  margin: 0;
  display: block;
  background-color: #fff;
}

.product--boxed .form-cart-message {
  margin-left: -140px;
  left: 50%;
}

.product--boxed .form-wrapper--wishlist,
.product--boxed .form-wrapper--wishlist p {
  margin-left: 0;
}

.product--boxed .product-variants-radio-btns {
  overflow: hidden;
  padding-top: 0;
}

.product--boxed .product-variants-radio-btns .radio-btn {
  margin-right: -3px;
  margin-bottom: -3px;
  padding: 0 21px;
  border: 3px solid #f3f4f5;
  height: 60px;
  line-height: 53px;
  box-sizing: border-box;
}

.product--boxed .product-variants-radio-btns .radio-btn:last-child {
  border-right: 3px solid #f3f4f5;
}

.product--boxed .product-variants-radio-btns .radio-point {
  left: 20px;
}

.product--boxed .product__desc .product__desc-content {
  padding-bottom: 34px;
}

.product--boxed .product__block .product__block-item:first-child {
  background: none;
}

.carousel--product-gallery {
  width: 100%;
  padding-bottom: 60px;
}

.carousel--product-gallery .swiper-slide {
  text-align: left;
  background-color: $colorInverse;
}

.carousel--product-gallery .swiper-slide img {
  width: auto;
  height: 100%;
  position: relative;
  top: 50%;
  left: 50%;
  @include transform(translate3d(-50%, -50%, 0));
}

.carousel--product-gallery .img-holder {
  height: 50vh;
}

.carousel--product-gallery .carousel__navigation {
  display: none;
}

.carousel--product-gallery .carousel-button-next,
.carousel--product-gallery .carousel-button-prev {
  bottom: 0;
}

.carousel--product-gallery .carousel-button-prev {
  text-align: left;
}

@media (min-width: 769px) {

  .product__block {
    min-height: 600px;
  }

  .product__block .product__block-item {
    float: left;
    width: 50%;
    height: 100%;
  }

  .product--boxed .product__block .product__block-item:first-child {
    width: 60%;
  }

  .product--boxed .product__block .product__block-item:last-child {
    width: 40%;
  }

  .product--boxed .product__content {
    padding: 55px 25px;
    text-align: left;
  }

  .product--boxed .form,
  .product--boxed .product__desc,
  .product--boxed .product__info .product__spec {
    text-align: left;
  }

  .product--boxed .form .quantity-field {
    margin-left: -28px;
  }

  .product--boxed .form-cart-message {
    margin-left: 0;
    left: 0;
  }

  .product--boxed .form-wrapper--wishlist {
    text-align: left;
  }

  .product--boxed .product-variants-radio-btns .radio-btn {
    display: block;
    float: left;
  }

  .carousel--product-gallery {
    padding-bottom: 0;
  }

  .carousel--product-gallery .swiper-slide img {
    position: absolute;
    top: 50%;
    left: 50%;
    @include transform(translate3d(-50%, -50%, 0));
  }

  .carousel--product-gallery .img-holder {
    height: 624px;
  }

  .carousel--product-gallery .carousel-button-next,
  .carousel--product-gallery .carousel-button-prev {
    display: none;
  }

  .carousel--product-gallery .carousel__navigation {
    display: flex;
    display: -webkit-flex;
    justify-content: center;
    margin-top: 20px;
    max-width: 100%;
    text-align: center;
  }

  .carousel--product-gallery .carousel__navigation .swiper-pagination-bullet {
    width: 25%;
    height: 150px;
    display: inline-block;
    overflow: hidden;
    position: relative;
    opacity: 1;
    background-color: transparent;
    border-radius: 0;
  }
  .carousel--product-gallery .carousel__navigation .swiper-pagination-bullet:nth-child(1){
    margin-left: 0;
  }
  .carousel--product-gallery .carousel__navigation .swiper-pagination-bullet:nth-last-child(1){
    margin-right: 0;
  }


  .carousel--product-gallery .carousel__navigation .swiper-pagination-bullet:before {
    @include content-tl(0, 0, 100%, 100%, $colorInverse);
    opacity: 0;
    @include transition(opacity 300ms ease-in-out);

  }

  .carousel--product-gallery .carousel__navigation .swiper-pagination-bullet-active {
    background-color: transparent;
  }

  .carousel--product-gallery .carousel__navigation .swiper-pagination-bullet-active:before {
    opacity: .6;
    z-index: 1;
  }

  .carousel--product-gallery .carousel__navigation img {
      height: 100%;
      text-align: center;
      position: relative;
      @include transform(translateX(-50%));
      left: 50%;
  }
}


@media (min-width: 1401px) {
  .product--boxed.wrapper {
    max-width: 100%;
  }

  .carousel--product-gallery .swiper-slide img {
    display: block;
    position: relative;
    top: 0;
    left: 50%;
    @include transform(translateX(-50%));
  }

  .carousel--product-gallery .carousel__navigation .swiper-pagination-bullet {
    width: 150px;
  }

  .product--boxed .product__block .product__block-item:first-child {
    width: 50%;
  }

  .product--boxed .product__content {
    padding-left: 10%;
  }

  .product--boxed .product__desc .product__desc-content {
    margin: 0;
  }
}


/* Add to cart product on collection page
/* -------------------------------------------------------------------------- */
.product__visuals {
  position: relative;
}

.product__visuals .product__cart {
  position: absolute;
  bottom: 30px;
  left: 0;
  width: 100%;
  text-align: center;
}

.product__visuals .product__link:before {
  background-color: $colorPrimary;
}

.product__visuals .product__cart .btn--submit  {
  opacity: 0;
  visibility: hidden;
  @include transform(translateY(50%));
  transition: opacity 300ms ease-in-out, visibility 300ms ease-in-out, transform 300ms ease-in-out;
  z-index: 5;
}

.product .product__link:hover + .product__cart .btn--submit,
.product__cart .btn--submit:hover {
  opacity: 1;
  visibility: visible;
  @include transform(translateY(0%));
}

.btn--circle {
  width: 60px;
  height: 60px;
  border-radius: 50%;
}

.btn--circle .icon--plus {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -7px;
  margin-top: -8px;
}

.btn--circle .icon--minus {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -8px;
}

.btn--circle .icon--plus:before,
.btn--circle .icon--plus:after,
.btn--circle .icon--minus:before, {
  left: 0;
  background-color: $colorInverse;
}

.btn--circle:before {
  width: 104%;
  height: 104%;
  @include transform(none);
  top: -2%;
  left: -2%;
}

.btn--circle:hover:before {
  @include transform(none);
}

.product__visuals .js-form-cart-alt .form-cart-message {
  display: none;
}

.product__visuals .quantity-field {
  position: absolute;
  bottom: 0;
  left: 50%;
  @include transform(translateX(-50%));
  z-index: 5;
  text-align: center;
  visibility: hidden;
}

.product__visuals .quantity-field .btn:first-child {
  @include transform(translateX(50%));
  margin-right: -2px;
  @include transition(transform 300ms ease-in-out);
}

.product__visuals .quantity-field .btn:last-child {
  @include transform(translateX(-50%));
  margin-left: -2px;
  @include transition(transform 300ms ease-in-out);
}

.product__visuals .quantity-field .form__field {
  display: none;
}

.product__visuals .quantity__info {
  position: absolute;
  top: -140%;
  color: #fff;
  font-size: 18px;
  text-align: center;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
}

.product__visuals .quantity__info span {
  display: block;
}

.product__visuals .quantity__info .quantity__counter {
  font-family: $additionalBodyFontStack;
  font-size: 24px;
}

.product__visuals.product-in-cart .product__link:before,
.product__visuals.product-in-cart .product__link:hover:before{
  opacity: .3;
}

.product__visuals.product-in-cart .btn--submit {
  display: none;
}

.product__visuals.product-in-cart .quantity-field {
  visibility: visible;
}

.product__visuals.product-in-cart .quantity-field .btn:first-child{
  @include transform(translateX(-20%));
}

.product__visuals.product-in-cart .quantity-field .btn:last-child {
  @include transform(translateX(20%));
}

/* Progress bar for PJAX
/* -------------------------------------------------------------------------- */
.progress-bar {
  position: relative;
}

.progress-bar:before {
  @include content-tl(3px, 0, 100%, 3px, $colorPrimary);
  @include animation(progressBarPJAX 10s ease-in-out);

  z-index: 3;
}

@-webki-keyframes progressBarPJAX {
  0%{
    @include transform(scaleX(0));
  }

  10%{
    @include transform(scaleX(.15));
  }

  19%{
    @include transform(scaleX(.19));
  }

  35%{
    @include transform(scaleX(.66));
  }

  80%{
    @include transform(scaleX(.8));
  }

  97%{
    @include transform(scaleX(.97));
  }
}

@keyframes progressBarPJAX {
  0%{
    @include transform(scaleX(0));
  }

  10%{
    @include transform(scaleX(.15));
  }

  19%{
    @include transform(scaleX(.19));
  }

  35%{
    @include transform(scaleX(.66));
  }

  80%{
    @include transform(scaleX(.8));
  }

  97%{
    @include transform(scaleX(.97));
  }
}

.progress-bar--loaded:before {
  @include animation(progressBarPJAXLoaded 150ms ease-in-out);
}

@-webkitkeyframes progressBarPJAXLoaded {
  100%{
    @include transform(scaleX(1));
  }
}

@keyframes progressBarPJAXLoaded {
  100%{
    @include transform(scaleX(1));
  }
}

/* ==========================================================================
   Version 1.3
   ========================================================================== */


/* Product Piker
/* -------------------------------------------------------------------------- */
.product-picker {
  padding-top: 190px;
  z-index: 4;
}

{% if settings.pick_products_subheading_overlap != blank %}
.product-picker .section-heading:before {
  content: "{{settings.pick_products_subheading_overlap}}";
  top: -35px;
  margin-left: -25px;
  @include transform(translateX(-50%));
}
{% endif %}

.picker-packs-container {
  text-align: center;
}

.product-picker .section__info  {
  margin-top: 5px;
}

.picker-pack {
  margin: 0 35px;
  margin-bottom: 60px;
  display: inline-block;
  max-width: 365px;
  text-align: left;
  cursor: pointer;
  position: relative;
}

.picker-pack .image-holder {
  height: 365px;
  width: 365px;
  overflow: hidden;
  position: relative;
}

.picker-pack .image-holder:before {
  @include content-tl(0, 0, 100%, 100%, $colorNeutral);
  @include transform(scale(1));
  @include transition(transform 300ms ease-in-out);
}

.picker-pack .image-holder img {
  position: absolute;
  top: 0;
  left: 50%;
  height: 100%;
  @include transform(translateX(-50%));
}

.picker-pack .checked-bg {
  position: absolute;
  top: 44px;
  left: -21px;
  fill: $colorHighlight;
  z-index: -1;
  @include transform(scale(0) rotate(180deg));
  @include transition(transform 300ms ease-in-out);
}

.picker-pack__info {
  margin-top: 10px;
  padding-left: 30px;
  padding-right: 17px;
  overflow: hidden;
}

.title-container {
  float: left;
}

.picker-pack .picker-pack__title {
  font-size: 18px;
}

.picker-pack .picker-pack__subtitle {
  font-family: $additionalBodyFontStack;
  color: $colorTextBodyLight;
}

.picker-pack .picker-pack__price {
  margin-top: 5px;
  float: right;
  font-size: 30px;
  line-height: 42px;
  color: $colorHighlight;
}

.check-icon-wrapper {
  margin-top: -35px;
  margin-left: -35px;
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  height: 70px;
  width: 70px;
  background-color: $colorHighlight;
  border-radius: 50%;

  @include transform-origin(50% 50%);
  @include transform(scale(0));
  @include transition(transform 300ms ease-in-out);
}

.check-icon-wrapper .check-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -10px;
  margin-left: -10px;
}

.check-icon path {
  stroke: #fff;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 4px;
  stroke-dasharray: 45;
  stroke-dashoffset: 50;
  fill: none;

  @include transition(stroke-dashoffset 300ms ease-in-out 300ms );
}

.is-choosed.picker-pack .image-holder:before {
  @include transform(scale(0));
}

.is-choosed.picker-pack .checked-bg {
  @include transform(scale(1) rotate(0deg));
}

.is-choosed .check-icon-wrapper {
  @include transform(scale(1));
}

.is-choosed .check-icon path {
  stroke-dashoffset: 0;
}


/*    Picker Navigation    */
.picker-nav {
  position: fixed;
  bottom: 120px;
  left: 0;
  width: 100%;
  min-height: 120px;
  background-color: $colorNeutral;

  -webkit-box-shadow: 0px -2px 20px 0px rgba(92, 75, 81, 0.14);
  -moz-box-shadow:    0px -2px 20px 0px rgba(92, 75, 81, 0.14);
  box-shadow:         0px -2px 20px 0px rgba(92, 75, 81, 0.14);

  @include transform(translateY(200%));
  @include transition(transform 300ms ease-in-out);
}

.pack-choosed  .picker-nav.is-hide {
  @include transition(none);
}

.picker-nav-container {
  padding-bottom: 32px;
  position: relative;
}

.picker-nav .image-holder {
  height: 110px;
  width: 110px;
  overflow: hidden;
  position: absolute;
  top: 5px;
  left: 0px;
}

.picker-nav .image-holder img {
  position: relative;
  top: 0;
  left: 50%;
  height: 100%;
  @include transform(translateX(-50%));
}

.choosed-pack-info {
  margin-left: 135px;
  padding-top: 32px;
  float: left;
}

.picker-nav-btns {
  padding-top: 30px;
  float: right;
}

.picker-nav .next-btn,
.picker-nav .prev-btn {
  display: inline-block;
}

.picker-nav .prev-btn.disable,
.picker-nav .next-btn.disable {
  display: none;
}

.picker-nav .prev-btn {
  padding: 17px;
  margin-right: 10px;
  width: 60px;
  height: 60px;
  box-sizing: border-box;
}

.picker-nav .next-btn {
  min-width: 235px;
}

.picker-nav .next-btn .arrow-r {
  margin-left: 15px;
}

.arrow-r {
  width: 13px;
  height: 13px;
  display: inline-block;
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWlkWU1pZCIgd2lkdGg9IjExIiBoZWlnaHQ9IjEzIiB2aWV3Qm94PSIwIDAgMTEgMTMiPiAgPHBhdGggc3Ryb2tlPSIjZmZmIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMnB4IiBmaWxsPSJub25lIiBkPSJNMS4wMDAsMS4wMDAgTDEuMDAwLDEyLjAwMCBMMTAuMDAwLDYuMDAwIEwxLjAwMCwxLjAwMCBaIi8+PC9zdmc+);
  background-repeat: no-repeat;
}

.arrow-l {
  width: 13px;
  height: 13px;
  display: inline-block;
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWlkWU1pZCIgd2lkdGg9IjExIiBoZWlnaHQ9IjEzIiB2aWV3Qm94PSIwIDAgMTEgMTMiPiAgPHBhdGggc3Ryb2tlPSIjZjA2MDYwIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMnB4IiBmaWxsPSJub25lIiBkPSJNMTAuMDAwLDAuOTcxIEwxMC4wMDAsMTEuOTk4IEwxLjAwMCw1Ljk4MyBMMTAuMDAwLDAuOTcxIFoiIGNsYXNzPSJjbHMtMSIvPjwvc3ZnPg==);
  background-repeat: no-repeat;
}

.product-picker .btn.last .arrow-r {
  width: 16px;
  height: 20px;
  vertical-align: top;
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWlkWU1pZCIgd2lkdGg9IjE2IiBoZWlnaHQ9IjIwIiB2aWV3Qm94PSIwIDAgMTYgMjAiPiAgPHBhdGggZmlsbD0iI2ZmZiIgZD0iTTE0LjAwMCwyMC4wMDAgTDIuMDAwLDIwLjAwMCBDMC44OTUsMjAuMDAwIC0wLjAwMCwxOS4xMDUgLTAuMDAwLDE4LjAwMCBMLTAuMDAwLDcuMDAwIEMtMC4wMDAsNS44OTUgMC44OTUsNS4wMDAgMi4wMDAsNS4wMDAgTDQuMDAwLDUuMDAwIEw0LjAwMCw0LjAwMCBDNC4wMDAsMS43OTEgNS43OTEsLTAuMDAwIDguMDAwLC0wLjAwMCBDMTAuMjA5LC0wLjAwMCAxMi4wMDAsMS43OTEgMTIuMDAwLDQuMDAwIEwxMi4wMDAsNS4wMDAgTDE0LjAwMCw1LjAwMCBDMTUuMTA1LDUuMDAwIDE2LjAwMCw1Ljg5NSAxNi4wMDAsNy4wMDAgTDE2LjAwMCwxOC4wMDAgQzE2LjAwMCwxOS4xMDUgMTUuMTA1LDIwLjAwMCAxNC4wMDAsMjAuMDAwIFpNMTAuMDAwLDQuMDAwIEMxMC4wMDAsMi44OTUgOS4xMDUsMi4wMDAgOC4wMDAsMi4wMDAgQzYuODk1LDIuMDAwIDYuMDAwLDIuODk1IDYuMDAwLDQuMDAwIEw2LjAwMCw1LjAwMCBMMTAuMDAwLDUuMDAwIEwxMC4wMDAsNC4wMDAgWk0xNC4wMDAsOC4wMDAgQzE0LjAwMCw3LjQ0OCAxMy41NTIsNy4wMDAgMTMuMDAwLDcuMDAwIEwzLjAwMCw3LjAwMCBDMi40NDgsNy4wMDAgMi4wMDAsNy40NDggMi4wMDAsOC4wMDAgTDIuMDAwLDE3LjAwMCBDMi4wMDAsMTcuNTUyIDIuNDQ4LDE4LjAwMCAzLjAwMCwxOC4wMDAgTDEzLjAwMCwxOC4wMDAgQzEzLjU1MiwxOC4wMDAgMTQuMDAwLDE3LjU1MiAxNC4wMDAsMTcuMDAwIEwxNC4wMDAsOC4wMDAgWk0xMi4wMDAsMTcuMDAwIEMxMS40NDgsMTcuMDAwIDExLjAwMCwxNi41NTIgMTEuMDAwLDE2LjAwMCBMMTEuMDAwLDEzLjAwMCBDMTEuMDAwLDEyLjQ0OCAxMS40NDgsMTIuMDAwIDEyLjAwMCwxMi4wMDAgQzEyLjU1MiwxMi4wMDAgMTMuMDAwLDEyLjQ0OCAxMy4wMDAsMTMuMDAwIEwxMy4wMDAsMTYuMDAwIEMxMy4wMDAsMTYuNTUyIDEyLjU1MiwxNy4wMDAgMTIuMDAwLDE3LjAwMCBaIi8+PC9zdmc+);
}

.btn--clear {
  background-color: $colorInverse;
}

.choosed-pack-info .total-heading {
  display: block;
  font-size: 12px;
  font-weight: normal;
  line-height: 14px;
  text-transform: uppercase;
  color: $colorTextBodyLight;
}

.choosed-pack-info .choosed-pack-total {
  font-size: 24px;
  font-weight: 500;
  color: $colorPrimary;
}

.choosed-pack-info .choosed-pack-desc {
  max-width: 430px;
  margin-top: 35px;
  line-height: 30px;
}

.choosed-pack-info .choosed-pack-desc a {
  color: $colorHighlight;
  font-weight: 600;
  @include transition(color 300ms ease-in-out);
}

.choosed-pack-info .choosed-pack-desc a:hover {
  color: $colorPrimary;
}

.choosed-pack-info .choosed-pack-author {
  margin-top: 30px;
  display: block;
  font-size: 16px;
  font-family: $additionalBodyFontStack;
  color: $colorTextBodyLight;
}

.pack-choosed .picker-nav {
  @include transform(translateY(100%));
}

.pack-choosed .image-holder img {
  visibility: visible;
}

.pack-choosed .choosed-pack-info .choosed-pack-desc {
  display: block;
}

.pack-choosed .picker-nav.is-hover {
  @include transform(translateY(120px));
}

.pack-choosed .picker-nav.is-stick {
  position: static;
  transform: none;
  bottom: 0;
  transition: none;
  border-bottom: 3px solid $colorInverse;
  box-shadow: none;
}

.pack-choosed .picker-nav-container {
  padding: 0 15px;
  padding-bottom: 40px;
  margin: 0 auto;
  max-width: 1040px;
  box-sizing: border-box;
}

.product-picker .picker-nav-container .choosed-pack-info {
  float: none;
  display: inline-block;
  vertical-align: top;
}

.product-picker .picker-nav-container .picker-nav-btns {
  position: relative;
}

.product-picker .picker-nav-container .form-cart-message {
  top: -75%;
  left: 50%;
  margin-left: -105px;
}


/*    Product pack    */
.pack-products {
  display: none;
}

.pack-product {
  padding: 27px 24px;
  margin: 0 auto;
  margin-bottom: 12px;
  max-width: 800px;
  box-sizing: border-box;
  border: 3px solid $colorNeutral;

  display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox;      /* TWEENER - IE 10 */
  display: -webkit-flex;     /* NEW - Chrome */
  display: flex;

  -webkit-justify-content: flex-start;
          justify-content: flex-start;

  -webkit-align-items: center;
          align-items: center;
}

.pack-product .image-holder {
  margin-left: 40px;
  width: 180px;
  height: 180px;
  overflow: hidden;
}

.pack-product .image-holder img {
  height: 100%;
  position: relative;
  top: 0;
  left: 50%;

  @include transform(translateX(-50%));
}

.pack-product .pack-product__title {
  font-size: 18px;
}

.pack-product .pack-product__info {
  margin-left: 65px;
  min-width: 235px;
}

.pack-product .product__spec {
  font-size: 16px;
  font-family: $additionalBodyFontStack;
  color: $colorTextBodyLight;
}

.pack-product .pack-product__price {
  margin-left: 50px;
  font-size: 30px;
  line-height: 42px;
  color: $colorHighlight;
}

.pack-product .pack-product__checkbox {
  display: block;
  width: 48px;
  height: 48px;
  position: relative;
  box-sizing: border-box;
  border: 3px solid $colorNeutral;
}

.pack-product .pack-product__checkbox input {
  opacity: 0;
  visibility: hidden;
}

.pack-product__checkbox label {
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  cursor: pointer;
}

.pack-product__checkbox label svg {
  margin-top: -6px;
  margin-left: -6px;
  position: absolute;
  top: 50%;
  left: 50%;
}

.pack-product__checkbox label path {
  stroke: $colorPrimary;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2px;
  stroke-dasharray: 45;
  stroke-dashoffset: 50;
  @include transition(stroke-dashoffset 200ms ease-in-out );
}

.pack-product__checkbox input:checked + label path {
  stroke-dashoffset: 0;
}


/*    Summary    */
.summary-container {
  margin: 0 auto;
  padding-top: 25px;
  max-width: 460px;
  text-align: center;
}

.summary-container .picker-pack {
  margin-bottom: 35px;
  cursor: default;
}

.summary-container .picker-pack__info {
  margin-top: 45px;
}

.summary-container .picker-pack .image-holder:before {
  display: none;
}

.summary-container .picker-pack .checked-bg {
  @include transform(none);
}

.summary-list-title {
  text-transform: uppercase;
  font-family: $additionalBodyFontStack;
  font-size: 12px;
  font-weight: normal;
  color: $colorTextBodyLight;
}

.summary-list {
  padding: 28px 0;
  margin-bottom: 40px;
  text-align: left;
  border-top: 3px solid $colorNeutral;
  border-bottom: 3px solid $colorNeutral;
}

.summary-list.accessories-list {
  border-top: none;
  padding: 17px 0 28px 0;
}

.summary-list .summary-list__item {
  padding: 11px;
  padding-left: 90px;
  border-bottom: 1px solid $colorNeutral;
}

.summary-list .summary-list__item:last-child {
  border-bottom: none;
}

/* Tabs
/* -------------------------------------------------------------------------- */
.tab-wrapper {
  padding-bottom: 30px;
  margin-top: 18px;
}

.tabs-content {
  margin-top: 15px;
}

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

.tab-list .tab {
  display: inline-block;
}

.tab-list .tab.is-hide {
  display: none;
}

.tab-list .tab__link {
  padding: 40px 30px;
  display: inline-block;
  position: relative;
  font-size: 14px;
  font-weight: 500;
  text-transform: uppercase;
  line-height: 18px;
  color: $colorHighlight;

  @include transition(color 300ms ease-in-out);
}

.tab-list .tab__link:hover {
  color: $colorPrimary;
}

.tab .tab__link .underline {
  visibility: hidden;
  position: absolute;
  top: 60px;
  left: 50%;
  @include transform(translateX(-50%));
}

.tab .tab__link .underline path {
  fill: $colorPrimary;
}

.tab.is-active .tab__link .underline {
  visibility: visible;
}

.tab.is-active .tab__link {
  color: $colorPrimary;
}

.tab-list .tab.disable .tab__link{
  cursor: default;
  color: $colorTextBodyLight;
}

.tab-content {
  display: none;
}

.tab-content.is-active {
  display: block;
}

@media (max-width: 768px) {
  .pack-choosed .choosed-pack-info .choosed-pack-desc,
  .choosed-pack-info .choosed-pack-author {
    display: none;
  }

  .pack-choosed .picker-nav .image-holder {
    display: none;
  }

  .pack-choosed .picker-nav .choosed-pack-info {
    text-align: left;
  }

  .product-picker .picker-nav-container .form-cart-message {
    top: -75%;
    left: auto;
    right: 0;
    margin-left: 0;
    width: 220px;
  }

  .picker-nav.is-hover {
    @include transform(translateY(100%) !important);
  }

  .tab-list .tab__link {
    padding: 30px 20px;
  }

  .picker-pack {
    margin-left: 0;
    margin-right: 0;
  }

  .picker-pack .image-holder {
    height: 275px;
    width: 275px;
  }

  .picker-pack__info {
    padding-left: 0px;
    padding-right: 0px;
    text-align: center;
  }

  .title-container,
  .picker-pack .picker-pack__price {
    float: none;
  }

  .picker-pack .checked-bg {
    top: -10px;
    left: -5px;
  }

  .picker-pack .checked-bg svg {
    width: 288px;
  }

  .choosed-pack-info {
    margin-left: 0;
    text-align: center;
  }

  .picker-nav .next-btn {
    width: 60px;
    box-sizing: border-box;
    text-align: center;
    padding: 17px;
    height: 60px;
    min-width: auto;
  }

  .picker-nav .next-btn span:first-child {
    display: none;
  }

  .picker-nav .next-btn .arrow-r {
    margin-left: 0;
  }

  .pack-product {
    flex-direction: column;
    text-align: center;
    max-width: 275px;
  }
  .pack-product .pack-product__checkbox,
  .pack-product .image-holder {
    margin: 0 auto;
    margin-bottom: 30px;
  }

  .pack-product .pack-product__info,
  .pack-product .pack-product__price {
    margin: 0;
  }

  .summary-list .summary-list__item {
    padding-left: 30px;
  }

  .product-picker .picker-nav .next-btn {
    min-width: auto;
  }

  .product-picker .picker-nav .next-btn span:first-child {
    display: none;
  }

  .product-picker .picker-nav .next-btn .arrow-r {
    margin-left: 0;
  }
}

@media (min-width: 769px) and (max-width:1024px) {
  .picker-nav-container {
    width: 95%;
    margin: 0 auto;
    float: none;
  }

  .picker-nav-btns {
    position: absolute;
    top: 0;
    right: 0;
  }

  .product-picker .choosed-pack-info {
    margin-left: 115px;
  }

  .product-picker .choosed-pack-desc {
    max-width: 300px;
  }

  .product-picker .picker-nav .next-btn {
    width: 60px;
    min-width: auto;
  }

  .product-picker .picker-nav .next-btn span:first-child {
    display: none;
  }

  .product-picker .picker-nav .next-btn .arrow-r {
    margin-left: 0;
  }
}



/* Hero block with image
/* -------------------------------------------------------------------------- */
.hero-image {
  height: 100vh;
  max-height: 1000px;
  backgroung-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  position: relative;
}

.hero-image .hero-image__content {
  position: absolute;
  top: 75px;
  left: 50%;
  transform: translateX(-50%);
  max-width: 550px;
  width: 100%;
}

.hero-image__title {
  margin-bottom: 32px;
  font-family: $headerPageFontStack;
  font-size: 60px;
  font-weight: 700;
  line-height: 72px;
}

.hero-image__desc {
  margin-bottom: 57px;
  font-family: $additionalBodyFontStack;
  font-size: 24px;
  font-style: italic;
  line-height: 36px;
}

@media (min-width: 769px){
  .hero-image .hero-image__content {
    top: 175px;
  }
}




/* Feedback section
/* -------------------------------------------------------------------------- */
.section--feedback {
  padding-top: 30px;
}

.section--feedback .section-heading {
  margin-bottom: 35px;
  margin-top: 90px;
}

.section--feedback .section-heading:before {
  top: -35px;
  @include transform(translateX(-50%));
}

.section--feedback .feedback-container {
  text-align: center;
}

.section--feedback .feedback__photo,
.section--feedback .feedback__desc {
  box-sizing: border-box;
  display: inline-block;
}

.section--feedback .feedback__photo .img-holder{
  max-width: 300px;
  max-height: 300px;
  padding: 60px 58px;
  margin: 0 auto;
}

.section--feedback .feedback__photo img {
  position: relative;
  top: 0;
  left: 50%;
  @include transform(translateX(-50%));
  width: 100%;
}

.section--feedback .feedback__name {
  font-size: 24px;
  line-height: 30px;
}

.section--feedback .feedback__passion {
  font-family: $additionalBodyFontStack;
  color: $colorTextBodyLight;
  margin-top: 5px;
  margin-bottom: 15px;
}

.section--feedback .feedback__info {
  line-height: 30px;
}

.section--feedback .feedback__info p:last-child{
  line-height: 30px;
}

.section--feedback .feedback__contact {
  font-family: $additionalBodyFontStack;
  color: $colorTextBodyLight;
  margin-top: 25px;
  line-height: 24px;
}

.section--feedback .feedback__contact a {
  color: #1da1f2;
}

@media (min-width: 769px) {
  .section--feedback .feedback-container {
    text-align: left;
  }

  .section--feedback .feedback__photo,
  .section--feedback .feedback__desc {
    width: 50%;
    box-sizing: border-box;
    display: block;
  }

  .section--feedback .feedback__desc {
    padding: 40px 5px 0 5px;
  }

  .section--feedback .feedback__photo {
    float: left;
  }

  .section--feedback .feedback__desc {
    float: right;
  }

  .section--feedback .feedback__info {
    max-width: 400px;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .section--feedback .feedback__desc {
    padding-left:15px;
  }
}



/* -------------------------------------------------------------------------- */
/* Lookbook Page
/* -------------------------------------------------------------------------- */

/* Animation after page loading
/* -------------------------------------------------------------------------- */
.animation-start .lookbook__image {
  opacity: 0;
  @include transform(translateY(100%));
  -webkit-transition: opacity 300ms ease-in-out 300ms, -webkit-transform 300ms ease-in-out 300ms;
          transition: opacity 300ms ease-in-out 300ms, transform 300ms ease-in-out 300ms;
}

.animation-start .product__index,
.animation-start .lookbook-cart .btn {
  @include transform(scale(0));
}

.animation-start .product-grid-item--alt {
  opacity: 0;

  -webkit-transform: translateY(50px);
          transform: translateY(50px);

  -webkit-transition: transform 1s cubic-bezier(0.6, 0.2, 0.1, 1), opacity 1s cubic-bezier(0.6, 0.2, 0.1, 1);
          transition: transform 1s cubic-bezier(0.6, 0.2, 0.1, 1), opacity 1s cubic-bezier(0.6, 0.2, 0.1, 1);
}

.animation .lookbook__image {
  opacity: 1;
  @include transform(translateY(0%));
}

.animation .lookbook-cart.show .btn {
  @include transform(scale(1));
}

.animation .product__index.show {
  @include animation(pulseShadow 9s infinite cubic-bezier(0.66, 0, 0, 1));
  @include transform(scale(1));
}

.animation .product-grid-item--alt.show-in {
  opacity: 1;

  -webkit-transform: translateY(0px);
          transform: translateY(0px);
}

/* Section lookbook
/* -------------------------------------------------------------------------- */
.section--lookbook .section-heading:before {
  top: -10px;
  font-size: 125px;
  color: $colorInverse;

  @include transform(translate3d(-50%, -50%, 0));
}

.section--lookbook .section__info {
  max-width: 480px;
  margin: 0 auto;
  padding-top: 6px;
}

.section--lookbook .picker-nav-container {
  padding: 35px 0;
  border-top: 3px solid #f5f4f4;
  border-bottom: 3px solid #f5f4f4;
  overflow: hidden;
  text-align: center;
}

.section--lookbook .picker-nav {
  position: relative;
  top: 0;
  left: 0;
  z-index: 6;
  background-color: transparent;
  -webkit-box-shadow: none;
          box-shadow: none;
  @include transform(translateY(0));
}

.section--lookbook .choosed-pack-info {
  padding-top: 0;
  text-align: left;
}

.section--lookbook .choosed-pack-info .choosed-pack-desc {
  max-width: 100%;
  margin-top: 0;
}

.section--lookbook .picker-nav__total {
  margin-top: 27px;
  text-align: center;
}

.section--lookbook .total-heading {
  display: block;
  font-size: 12px;
  font-weight: normal;
  line-height: 14px;
  text-transform: uppercase;
  color: #d1cacc;
}

.section--lookbook .choosed-pack-total {
  margin-bottom: 23px;
  display: block;
  font-size: 24px;
  font-weight: 500;
}

.section--lookbook .picker-nav .image-holder {
  height: 100px;
  width: 100px;
  position: relative;
  top: 0px;
  left: 0px;
  display: inline-block;
}

.section--lookbook .picker-nav .checkout-btn span:first-child {
  vertical-align: top;
}

.section--lookbook .picker-nav .checkout-btn svg {
  margin-left: 10px;
}

.lookbook__header {
  padding-top: 140px;
  box-sizing: border-box;
  position: relative;
  height: 553px;
  color: $colorInverse;
  background-color: $colorPrimary;
}


/* Lookbook Pick
/* -------------------------------------------------------------------------- */

.lookbook-pick {
  margin-bottom: 40px;
  max-width: 500px;
  position: absolute;
  bottom: -45%;
  left: 50%;
  color: $colorPrimary;
  @include transform(translateX(-50%));
  z-index: 4;
}

.lookbook-pick .lookbook__image {
  position: relative;
  width: 400px;
}

.lookbook-pick .lookbook__image:before,
.lookbook-pick .lookbook__image:after {
  content: "";
  margin-top: 20px;
  position: absolute;
  top: 50%;
  width: 88px;
  height: 80px;
  display: block;
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWlkWU1pZCIgd2lkdGg9Ijg4IiBoZWlnaHQ9IjgwIiB2aWV3Qm94PSIwIDAgODggODAiPiAgPHBhdGggZmlsbD0iI2FkYTJhNCIgZD0iTTg2LjExMyw1MS44ODQgQzg1LjE0Miw1Mi41NzIgODQuMjgxLDUzLjEwOCA4My4zMzksNTMuNjUxIEM4Mi40MTQsNTQuMTkwIDgxLjQ3MCw1NC42ODkgODAuNTA4LDU1LjE1OCBDNzguNTg1LDU2LjA5MyA3Ni41ODUsNTYuODkyIDc0LjUxNiw1Ny41MzEgQzcyLjQ0Myw1OC4xNjMgNzAuMjgwLDU4LjU3NCA2OC4wODAsNTguNzc2IEM2Ni45NzMsNTguODUyIDY1Ljg2NSw1OC45MzIgNjQuNzQxLDU4Ljg1MSBDNjMuNjIwLDU4Ljg2MiA2Mi41MDQsNTguNjE4IDYxLjM4Nyw1OC40NzQgTDYxLjI2Niw1OC40NDUgQzYwLjI2Myw1OC4xNTYgNTkuMzg2LDU4LjAyNSA1OC4yMjQsNTcuNTQ1IEM1Ny4wODAsNTcuMTU3IDU2LjEwOCw1Ni42NTQgNTUuMTI3LDU2LjE1NyBDNTMuMjExLDU1LjA4OCA1MS40MjUsNTMuODQzIDQ5LjgxOCw1Mi40MzQgQzQ4LjIxNyw1MS4wMjEgNDYuNzUwLDQ5LjQ5MSA0NS40MTQsNDcuODY4IEM0NC43NDYsNDcuMDU3IDQ0LjEwNyw0Ni4yMjQgNDMuNTA0LDQ1LjM2MiBDNDIuODg3LDQ0LjQ5MCA0Mi4zNDAsNDMuNjU4IDQxLjc2MCw0Mi42NDQgTDQwLjcyNiw0MC44MzggTDQyLjQxOSwzOS43NDQgQzQzLjQyMSwzOS4wOTcgNDQuMzIwLDM4LjYyNSA0NS4yNzQsMzguMTA5IEM0Ni4yMTYsMzcuNjA0IDQ3LjE3NCwzNy4xNDIgNDguMTQ4LDM2LjcxMCBDNTAuMTAwLDM1Ljg2MiA1Mi4wOTcsMzUuMTE0IDU0LjE0OSwzNC41MTMgQzU1LjE4NSwzNC4yMzcgNTYuMjIxLDMzLjk3MCA1Ny4yODcsMzMuNzk2IEM1OC4zMzYsMzMuNTczIDU5LjQyNiwzMy40OTkgNjAuNDk3LDMzLjQwMSBDNjEuNTgzLDMzLjM3MiA2Mi42NjIsMzMuMzA4IDYzLjc1MywzMy40MDEgQzY0Ljg0MiwzMy40MDYgNjUuOTE3LDMzLjY2MiA2Ni45OTUsMzMuODE0IEM2OC4xNDYsMzQuMTU1IDY4Ljk0NCwzNC4yODkgNzAuMDU2LDM0Ljc3MCBDNzEuMTMxLDM1LjE1MiA3Mi4wNjcsMzUuNjU1IDczLjAxMCwzNi4xNTIgQzczLjkxNSwzNi43MDEgNzQuODQ0LDM3LjIzMCA3NS42NjgsMzcuODc4IEM3Ni41MjEsMzguNDk3IDc3LjM0MiwzOS4xMzkgNzguMTQwLDM5LjgxNSBDNzkuNzEwLDQxLjE4NSA4MS4yMDMsNDIuNjI3IDgyLjYxNiw0NC4xNTEgTDg0LjcxMSw0Ni40NzggQzg1LjQyNSw0Ny4yNzYgODYuMDM5LDQ4LjA1NiA4Ni43NzIsNDguOTg0IEw4OC4wMDUsNTAuNTQ0IEw4Ni4xMTMsNTEuODg0IFpNODEuNDk0LDQ4LjYyOSBDODEuMDY0LDQ3Ljc3OSA4MC41NDIsNDYuOTc3IDgwLjAwNSw0Ni4xODUgQzc4LjkwOCw0NC42MTkgNzcuNjUxLDQzLjE1OCA3Ni4yNDYsNDEuODYxIEM3NS41MjIsNDEuMjM4IDc0LjgxNiw0MC41OTIgNzQuMDE5LDQwLjA2OCBDNzMuMjU5LDM5LjQ5MSA3Mi40MjAsMzkuMDQ0IDcxLjYwNiwzOC41NjkgQzcwLjc2MCwzOC4xNDcgNjkuOTE0LDM3LjcxNyA2OS4wNzgsMzcuNDQxIEM2OC4zNDYsMzcuMDk1IDY3LjEzNiwzNi44NzAgNjYuMzUyLDM2LjY0MSBDNjUuNDIzLDM2LjU0MSA2NC41MTcsMzYuMzI3IDYzLjU3MCwzNi4zNDkgQzYyLjYzNSwzNi4yODAgNjEuNjg5LDM2LjM1NyA2MC43NDksMzYuNDUxIEM1OS44MTIsMzYuNjAwIDU4Ljg2OSwzNi43MTIgNTcuOTQ1LDM2Ljk3MiBDNTcuMDE1LDM3LjE4MSA1Ni4xMDIsMzcuNDc5IDU1LjE5MSwzNy43NzkgQzU0LjM4MCwzOC4wNjYgNTMuNTgyLDM4LjM5NSA1Mi43OTMsMzguNzQ2IEw1OS4wODIsNDAuOTc5IEw0OS4zODAsNDAuNTI4IEM0OS4xODAsNDAuNjU0IDQ4Ljk3OSw0MC43NzYgNDguNzc3LDQwLjkwMCBMNjQuMjYwLDQ1LjQzMyBMNDguMDg0LDQzLjc3MyBDNDguMjM1LDQzLjk3OSA0OC4zODksNDQuMTgyIDQ4LjUzOCw0NC4zODggTDU4LjE3NCw0Ny44MTAgTDUxLjE3Nyw0Ny40ODQgQzUxLjcyNCw0OC4wNTUgNTIuMjc5LDQ4LjYxOCA1Mi44NjEsNDkuMTQ4IEM1NC4yNDIsNTAuMzk1IDU1Ljc0Nyw1MS40NjYgNTcuMzIxLDUyLjM4MCBDNTguMTI5LDUyLjgwMSA1OC45MzksNTMuMjMxIDU5LjcwNiw1My41MDEgQzYwLjA4NSw1My42NjIgNjAuNDY1LDUzLjgzMCA2MC45OTEsNTMuOTUyIEw2Mi4zNjgsNTQuMzMzIEM2My4yNDMsNTQuNDQzIDY0LjA5OSw1NC42NjIgNjUuMDAxLDU0LjY1NiBDNjUuOTAyLDU0LjczNyA2Ni44MTksNTQuNjc2IDY3LjczOCw1NC42MjkgQzY5LjU3Myw1NC40MTYgNzEuNDEwLDU0LjAzMCA3My4yMDksNTMuNDM1IEM3NS4wMDQsNTIuODMyIDc2Ljc2Niw1Mi4wODUgNzguNDY4LDUxLjIwNiBDNzkuMzE4LDUwLjc2NyA4MC4xNTYsNTAuMzAwIDgwLjk2OSw0OS43OTkgQzgxLjI0OCw0OS42MzEgODEuNTMwLDQ5LjQ0NyA4MS44MTAsNDkuMjY2IEM4MS43MDMsNDkuMDUyIDgxLjYwMCw0OC44MzYgODEuNDk0LDQ4LjYyOSBaTTQxLjUyMSwyNC4xMzggQzQxLjE3NywyNS4xODUgNDAuNTg2LDI2LjE1MCA0MC4wOTIsMjcuMTQ4IEw0MC4wMjYsMjcuMjUxIEMzOS40MjcsMjguMTAxIDM5LjAyMSwyOC44NzggMzguMTg2LDI5LjgxNiBDMzcuNDQ2LDMwLjc2NiAzNi42NDksMzEuNTIyIDM1Ljg1NSwzMi4yODcgQzM0LjIwOSwzMy43NTIgMzIuNDMyLDM1LjA0NSAzMC41NTIsMzYuMTIyIEMyOC42NzEsMzcuMTkyIDI2LjcxOCwzOC4xMDIgMjQuNzE2LDM4Ljg2NCBDMjMuNzE0LDM5LjI0NCAyMi43MDIsMzkuNTkwIDIxLjY3MywzOS44OTYgQzIwLjYzMCw0MC4yMTEgMTkuNjQ3LDQwLjQ3MiAxOC40NzcsNDAuNzEyIEwxNi4zOTIsNDEuMTM2IEwxNS44NjQsMzkuMjM0IEMxNS41NTIsMzguMTA4IDE1LjM3NiwzNy4xMzIgMTUuMTc3LDM2LjA4OSBDMTQuOTg1LDM1LjA2MiAxNC44MzgsMzQuMDMyIDE0LjcyNywzMi45OTcgQzE0LjUyMSwzMC45MjcgMTQuNDI0LDI4Ljg0NiAxNC40ODksMjYuNzU2IEMxNC41NTAsMjUuNzA5IDE0LjYxOCwyNC42NjUgMTQuNzg2LDIzLjYyMSBDMTQuOTAxLDIyLjU3OCAxNS4xNzYsMjEuNTQyIDE1LjQxOCwyMC41MTUgQzE1LjczNCwxOS40OTUgMTYuMDE0LDE4LjQ3MSAxNi40NTAsMTcuNDg0IEMxNi43OTksMTYuNDcxIDE3LjM4OSwxNS41NDYgMTcuODc5LDE0LjU4OCBDMTguNTc1LDEzLjYxOCAxOC45NTgsMTIuOTE0IDE5Ljc3NywxMi4wMjIgQzIwLjQ5MCwxMS4xMzUgMjEuMjc2LDEwLjQxNCAyMi4wNTcsOS42ODMgQzIyLjg3OCw5LjAwMyAyMy42ODgsOC4yOTcgMjQuNTc5LDcuNzIyIEMyNS40NTAsNy4xMTIgMjYuMzM2LDYuNTM5IDI3LjI0NSw1Ljk5NyBDMjkuMDc1LDQuOTQzIDMwLjk1MSwzLjk4MiAzMi44ODIsMy4xMjAgTDM1LjgwOCwxLjg2MyBDMzYuODExLDEuNDM1IDM3Ljc2MywxLjA5NSAzOC44OTksMC42ODkgTDQwLjgwNywwLjAwNiBMNDEuNTEyLDIuMTY2IEM0MS44NzMsMy4yNzUgNDIuMTIxLDQuMjM1IDQyLjM1Miw1LjI3NSBDNDIuNTg0LDYuMjk2IDQyLjc3MCw3LjMyNCA0Mi45MjEsOC4zNTkgQzQzLjIyMiwxMC40MjggNDMuMzY2LDEyLjUyOCA0My4zMzIsMTQuNjQ0IEM0My4yOTEsMTYuNzYyIDQzLjAwNSwxOC44OTggNDIuNTA2LDIxLjAwNiBDNDIuMjI5LDIyLjA2MCA0MS45NTUsMjMuMTE1IDQxLjUyMSwyNC4xMzggWk0zOC40MzEsOS4wODMgQzM4LjI3Myw4LjE2MCAzOC4wODQsNy4yNDAgMzcuODU1LDYuMzM1IEMzNy43NzksNi4wMjUgMzcuNjg5LDUuNzA4IDM3LjYwMSw1LjM5MyBDMzcuMzYwLDUuNDI5IDM3LjExOCw1LjQ2MCAzNi44ODIsNS40OTcgQzM1LjkxOSw1LjY0NSAzNC45NzMsNS44OTIgMzQuMDMzLDYuMTU3IEMzMi4xNjIsNi43MTEgMzAuMzQzLDcuNDQ3IDI4LjYzNiw4LjM3MCBDMjcuODAxLDguODU4IDI2Ljk0OSw5LjMyMyAyNi4xODcsOS45MDkgQzI1LjM4NiwxMC40NDUgMjQuNjg0LDExLjA5MyAyMy45NjMsMTEuNzEwIEMyMy4yODUsMTIuMzcxIDIyLjU5OSwxMy4wMzEgMjIuMDY2LDEzLjcyOCBDMjEuNDk4LDE0LjMwNyAyMC44OTUsMTUuMzY1IDIwLjQyNSwxNi4wMjggQzIwLjAzNCwxNi44NjIgMTkuNTM3LDE3LjY0MyAxOS4yNTksMTguNTMxIEMxOC44OTcsMTkuMzgxIDE4LjY3MSwyMC4yODQgMTguNDY2LDIxLjE4OCBDMTguMzE0LDIyLjEwNSAxOC4xMjQsMjMuMDE2IDE4LjA4NSwyMy45NTMgQzE3Ljk5MywyNC44ODIgMTcuOTk0LDI1LjgyMCAxNy45OTcsMjYuNzU4IEMxOC4wMTksMjcuNTk4IDE4LjA4NywyOC40MzkgMTguMTc4LDI5LjI3OCBMMjIuMzQyLDI0LjA4NyBMMTguODMxLDMyLjk4NyBDMTguODkwLDMzLjIxMCAxOC45NDYsMzMuNDM0IDE5LjAwMiwzMy42NTggTDI4LjMxNSwyMC41OTIgTDIxLjU3OCwzNS4xNTkgQzIxLjgyNiwzNS4wODAgMjIuMDcyLDM0Ljk5NyAyMi4zMjAsMzQuOTE5IEwyOC43MDAsMjYuOTY1IEwyNi4xNjgsMzMuMzgzIEMyNi44OTYsMzMuMDQ0IDI3LjYxOSwzMi42OTQgMjguMzE5LDMyLjMxMCBDMjkuOTcwLDMxLjM5NiAzMS40ODgsMzAuMzEzIDMyLjg3NiwyOS4xMjAgQzMzLjU0MSwyOC40OTMgMzQuMjE2LDI3Ljg2NyAzNC43MjIsMjcuMjMzIEMzNC45OTgsMjYuOTI4IDM1LjI4MiwyNi42MjQgMzUuNTY3LDI2LjE3MSBMMzYuMzc1LDI1LjAwMiBDMzYuNzU5LDI0LjIyMCAzNy4yNDMsMjMuNDg5IDM3LjUyMSwyMi42NDcgQzM3Ljg4NiwyMS44MzMgMzguMTE3LDIwLjk2MCAzOC4zNjMsMjAuMDkxIEMzOC43MzYsMTguMzE5IDM4Ljk0MiwxNi40OTQgMzguOTMzLDE0LjY0MiBDMzguOTE2LDEyLjc5MSAzOC43NDYsMTAuOTI4IDM4LjQzMSw5LjA4MyBaTTE3LjkxNiw1MC4zNTggQzE4Ljk0NSw1MC42NDAgMTkuOTM4LDUxLjA3NSAyMC45MjcsNTEuNDc4IEMyMS44OTUsNTEuOTQ5IDIyLjg3NCw1Mi4zODcgMjMuNzg4LDUyLjk3MCBDMjQuNzcxLDUzLjQ5NyAyNS41MDMsNTQuMTM4IDI2LjUwMiw1NC44NzggQzI3LjIyNiw1NS41OTggMjcuOTUzLDU2LjE2MiAyOC42NzMsNTcuMDczIEMyOS40MzQsNTcuOTA2IDMwLjAxNiw1OC43ODIgMzAuNjA3LDU5LjY1NCBDMzEuMTM5LDYwLjU1OCAzMS43MDIsNjEuNDUzIDMyLjExNiw2Mi40MDYgQzMyLjU3MCw2My4zNDUgMzIuOTg0LDY0LjI5MyAzMy4zNjEsNjUuMjU5IEMzNC4wODYsNjcuMTk1IDM0LjcwNyw2OS4xNTkgMzUuMjIwLDcxLjE2MiBMMzUuOTQ2LDc0LjE4OCBDMzYuMTkyLDc1LjIyNCAzNi4zNTgsNzYuMTk3IDM2LjU1OCw3Ny4zNTkgTDM2Ljg5NSw3OS4zMTAgTDM0LjU5MCw3OS42MzMgQzMzLjQwNyw3OS43OTkgMzIuMzk1LDc5Ljg4MCAzMS4zMDYsNzkuOTMwIEMzMC4yMzUsNzkuOTg2IDI5LjE2Niw3OS45OTYgMjguMDk3LDc5Ljk3MiBDMjUuOTU5LDc5LjkyMiAyMy44MTksNzkuNzE0IDIxLjY5NCw3OS4zMzQgQzE5LjU3MCw3OC45NDcgMTcuNDcyLDc4LjMyMCAxNS40NDIsNzcuNDkyIEMxNC40MzMsNzcuMDUyIDEzLjQyMSw3Ni42MTUgMTIuNDcxLDc2LjAyOCBDMTEuNDgxLDc1LjUyNCAxMC42MTgsNzQuNzk2IDkuNzA1LDc0LjE1NiBMOS42MTMsNzQuMDc1IEM4Ljg2OSw3My4zNjAgOC4xNjAsNzIuODQwIDcuMzcwLDcxLjg4MiBDNi41NTAsNzEuMDEyIDUuOTM3LDcwLjEyMSA1LjMxMyw2OS4yMjkgQzQuMTQxLDY3LjQwMyAzLjE2Nyw2NS40NzggMi40MjksNjMuNDkwIEMxLjY5OSw2MS41MDEgMS4xNDIsNTkuNDcxIDAuNzQ0LDU3LjQxNyBDMC41NDYsNTYuMzkwIDAuMzgzLDU1LjM1NyAwLjI2Niw1NC4zMTYgQzAuMTQxLDUzLjI1OCAwLjA1OSw1Mi4yNzAgMC4wMzQsNTEuMTAzIEwtMC4wMTAsNDkuMDI0IEwyLjAwMiw0OC44MjggQzMuMTkzLDQ4LjcxMyA0LjIwOCw0OC43MDUgNS4yOTQsNDguNjg0IEM2LjM2Myw0OC42NjcgNy40MjcsNDguNjk2IDguNDkwLDQ4Ljc1OSBDMTAuNjExLDQ4LjkwMSAxMi43MjQsNDkuMTUwIDE0LjgxNSw0OS41NTYgQzE1Ljg1OCw0OS43ODYgMTYuODk3LDUwLjAyNCAxNy45MTYsNTAuMzU4IFpNMTEuNTk3LDUyLjY5NSBMMTYuMDU1LDU3LjU2MCBMNy43NDUsNTIuNzE0IEM3LjUwOSw1Mi43MzQgNy4yNzMsNTIuNzUxIDcuMDM2LDUyLjc2OCBMMTguNDczLDYzLjg4OSBMNS4wNTIsNTUuMDAzIEM1LjA4Niw1NS4yNTUgNS4xMjQsNTUuNTA1IDUuMTU3LDU1Ljc1NyBMMTEuOTg3LDYzLjIxMiBMNS45OTMsNTkuNzE3IEM2LjIwMSw2MC40NzQgNi40MjAsNjEuMjI4IDYuNjc3LDYxLjk2NSBDNy4yOTMsNjMuNzA3IDguMTA0LDY1LjM0NyA5LjA0OSw2Ni44ODAgQzkuNTU3LDY3LjYyNCAxMC4wNjMsNjguMzc4IDEwLjYwOCw2OC45NjkgQzEwLjg2NCw2OS4yODUgMTEuMTE4LDY5LjYwOCAxMS41MjIsNjkuOTU4IEwxMi41NDksNzAuOTI3IEMxMy4yNjYsNzEuNDI2IDEzLjkxMyw3Mi4wMTQgMTQuNzA5LDcyLjQyMCBDMTUuNDYyLDcyLjkwNiAxNi4yOTcsNzMuMjcyIDE3LjEyNyw3My42NTEgQzE4Ljg0Miw3NC4zMDIgMjAuNjQxLDc0LjgwMSAyMi41MDcsNzUuMDk3IEMyNC4zNzMsNzUuMzg1IDI2LjI3OSw3NS41MjcgMjguMTk1LDc1LjUyOCBDMjkuMTUzLDc1LjUyNyAzMC4xMTMsNzUuNDk2IDMxLjA2Nyw3NS40MjQgQzMxLjM5NCw3NS40MDIgMzEuNzI5LDc1LjM2OCAzMi4wNjIsNzUuMzM1IEMzMi4wNzAsNzUuMDk3IDMyLjA4Myw3NC44NTggMzIuMDg5LDc0LjYyNSBDMzIuMTE4LDczLjY3MiAzMi4wNDMsNzIuNzIxIDMxLjk1MCw3MS43NzIgQzMxLjczNyw2OS44NzggMzEuMzMyLDY4LjAwNCAzMC43MTcsNjYuMjA4IEMzMC4zODAsNjUuMzIzIDMwLjA2OCw2NC40MjYgMjkuNjE5LDYzLjU5NiBDMjkuMjI3LDYyLjczNSAyOC43MDMsNjEuOTUzIDI4LjIxNiw2MS4xNTggQzI3LjY3NCw2MC4zOTYgMjcuMTM3LDU5LjYyNyAyNi41MzMsNTguOTk4IEMyNi4wMjgsNTguMzMxIDI1LjE2Myw1Ny42NTUgMjQuNDU4LDU2Ljk4NCBDMjMuODE1LDU2LjU3OSAyMy4wMzEsNTUuODkzIDIyLjIxNiw1NS41MDQgQzIxLjQyOCw1NS4wMTUgMjAuNTYwLDU0LjY0OSAxOS42ODgsNTQuMzAyIEMxOC43OTMsNTQuMDA1IDE3LjkxMSw1My42NzMgMTYuOTc0LDUzLjQ4MSBDMTYuMDU3LDUzLjI0MCAxNS4xMTEsNTMuMDg2IDE0LjE2OCw1Mi45MzUgQzEzLjMxNyw1Mi44MTggMTIuNDU4LDUyLjc0NSAxMS41OTcsNTIuNjk1IFoiLz48L3N2Zz4=);
  background-repeat: no-repeat;
  z-index: -1;
}

.lookbook-pick .lookbook__image:before {
  left: -63px;
  @include transform(rotateY(180deg));
}

.lookbook-pick .lookbook__image:after {
  right: -63px;
}

.lookbook-pick .lookbook__image img {
  width: 100%;
}

.lookbook-pick__container {
  position: absolute;
  min-height: 47px;
  min-width: 47px;
}

.lookbook-pick .product__container {
  padding: 35px 45px;
  visibility: hidden;
  position: absolute;
  top: -55px;
  left: 47px;
  width: 410px;
  background-color: $colorInverse;
  box-sizing: border-box;
  z-index: 6;
  opacity: 0;
  -webkit-box-shadow: 4px 7px 30px 0px rgba(0, 0, 0, 0.2);
          box-shadow: 4px 7px 30px 0px rgba(0, 0, 0, 0.2);


  -webkit-transition: visibility 300ms ease-in-out, opacity 300ms ease-in-out;
          transition: visibility 300ms ease-in-out, opacity 300ms ease-in-out;
}

.lookbook-pick .product__counter {
  font-family: $additionalBodyFontStack;
  font-size: 78px;
  line-height: 78px;
  font-weight: bold;
  color: $colorTextBodyLight;
}

.lookbook-pick .product__info {
  margin-top: 22px;
  position: relative;
}

.lookbook-pick .product__title {
  max-width: 230px;
  font-size: 18px;
}

.lookbook-pick .product__spec {
  max-width: 230px;
  font-family: $additionalBodyFontStack;
  font-size: 16px;
  color: $colorTextBodyLight;
}

.lookbook-pick .product__price {
  position: absolute;
  top: 0;
  right: 13px;
  font-size: 30px;
  color: $colorHighlight;
}

.lookbook-pick .product__desc {
  margin-top: 31px;
  line-height: 30px;
}

.lookbook-pick .product__index {
  position: absolute;
  width: 42px;
  height: 42px;
  display: block;
  color: $colorInverse;
  text-align: center;
  vertical-align: middle;
  line-height: 42px;
  background-color: $colorHighlight;
  border-radius: 50%;
  z-index: 5;
  cursor: pointer;
  -webkit-box-shadow: 0 0 0 0 rgba(240, 96, 96, 0.4);
          box-shadow: 0 0 0 0 rgba(240, 96, 96, 0.4);

  -webkit-transition: background-color 300ms ease-in-out, -webkit-transform 300ms ease-in-out 600ms;
          transition: background-color 300ms ease-in-out, transform 300ms ease-in-out 600ms;

}

.lookbook-pick .product__index:hover {
  background-color: $colorPrimary;
  @include animation(none);
}

.lookbook-pick .product__index:hover + .product__container {
  visibility: visible;
  opacity: 1;
}

.product__container:hover {
  visibility: visible;
  opacity: 1;
}

.lookbook-pick .lookbook-cart {
  margin-bottom: -60px;
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 131px;
  height: 131px;
  text-align: center;
  color: $colorInverse;
  z-index: 5;

  @include transform(translateX(-50%));
}

.lookbook-pick .lookbook-cart .btn {
  width: 100%;
  height: 100%;
  background-color: $colorHighlight;
  border-radius: 50%;
  -webkit-box-shadow: 0px 4px 20px 0px rgba(165, 23, 23, 0.5);
          box-shadow: 0px 4px 20px 0px rgba(165, 23, 23, 0.5);

  -webkit-transition: -webkit-transform 300ms ease-in-out 300ms, background-color 300ms ease-in-out;
          transition: transform 300ms ease-in-out 300ms, background-color 300ms ease-in-out;
}

.lookbook-pick .lookbook-cart .btn:hover {
  background-color: $colorPrimary;
}

.lookbook-pick .lookbook-cart .svg-icon {
  margin: 0 auto;
  margin-bottom: 7px;
  display: block;
}

.lookbook-cart .form-cart-message {
  width: 280px;
  top: -100%;
  left: -70px;
  color: $colorPrimary;
}

.lookbook-cart--total {
  position: relative;
}

.lookbook-cart--total .form-cart-message {
  right: 50%;
  margin-right: -140px;
}

@media (min-width: 769px) {
  .lookbook-cart--total .form-cart-message {
    right: 0;
    margin-right: 0;
  }
}



/* Products Section
/* -------------------------------------------------------------------------- */
.section--lookbook {
  margin-bottom: 100px;
}

.section--lookbook .product-section {
  margin: 0 auto;
  margin-top: 350px;
  margin-bottom: 50px;
  max-width: 1140px;
  text-align: center;
}

.product-grid-item--alt {
  margin-bottom: 50px;
  padding: 0 8px;
  display: inline-block;
  width: 100%;
  max-width: 350px;
  box-sizing: border-box;
}

.product-grid-item--alt .img-holder {
  height: 350px;
  border: 3px solid $colorNeutral;
}

.product-grid-item--alt .product__info {
  padding: 0 28px;
  padding-top: 9px;
  text-align: left;
  position: relative;
}

.product-grid-item--alt .product__price {
  position: absolute;
  top: 9px;
  right: 20px;
  font-size: 30px;
  color: $colorHighlight;
}

.product-grid-item--alt .product__info .product__spec {
  font-size: 16px;
}

.product-grid-item--alt .checkbox-lg {
  position: absolute;
  bottom: 26px;
  left: 26px;
  z-index: 2;
}


/* Checkbox Large
/* -------------------------------------------------------------------------- */
.checkbox-lg input {
  display: none;
}

.checkbox-lg label {
  width: 48px;
  height: 48px;
  display: inline-block;
  box-sizing: border-box;
  line-height: 40px;
  text-align: center;
  border: 3px solid $colorNeutral;
  cursor: pointer;
}

.checkbox-lg label svg {
  display: inline-block;
  vertical-align: middle;
}

.checkbox-lg label path {
  stroke: $colorPrimary;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 45;
  stroke-dashoffset: 47;
  stroke-width: 2px;
  fill: none;
  fill-rule: evenodd;
  @include transition(stroke-dashoffset 300ms ease-in-out);
}

.checkbox-lg input:checked + label path {
  stroke-dashoffset: 0;
}

/* Media Styles
/* -------------------------------------------------------------------------- */
@media (min-width: 425px) {
  .section--lookbook .picker-nav .checkout-btn span:first-child {
    display: inline-block;
  }

  .section--lookbook .checkout-btn .arrow-r {
    margin-left: 10px;
  }

  .lookbook-pick .lookbook__image {
    width: auto;
  }

  .lookbook-pick .lookbook__image img {
    width: auto;
  }
}

@media (max-width: 768px) {
  #lookbook-page .main-content--top {
    margin-top: 0;
  }

  #lookbook-page .site-logo {
    background-color: $colorInverse;
    border-radius: 50%;
    line-height: 91px;
    width: 100px;
    height: 100px;
  }

  #lookbook-page .main-nav-open-btn .icon span {
    background-color: $colorInverse;
  }

  #lookbook-page .cart-count {
    color: $colorInverse;
  }

  #lookbook-page .icon--cart .svg-icon path {
    fill: $colorInverse;
  }

  #lookbook-page .main-nav-open-btn:hover .icon span {
    background-color: $colorHighlight;
  }

  #lookbook-page .cart-open-btn:hover .cart-count {
    color: $colorHighlight;
  }

  #lookbook-page .cart-open-btn:hover .svg-icon path {
    fill: $colorHighlight;
  }

  .lookbook-pick__container {
    top: 0 !important;
    left: 0 !important;
    width: 100%;
    height: 100%;
  }

  .lookbook-pick .product__container {
    max-width: 320px;
    margin-left: -160px;
    top: 170px;
    left: 50%;
    width: 100%;
  }

  .lookbook-pick .product__title,
  .lookbook-pick .product__spec {
    max-width: 150px;
  }

  .lookbook-pick .product__price {
    top: -13px;
    right: 0;
  }

  .section--lookbook .picker-nav {
    bottom: 100px;
  }

  .section--lookbook .choosed-pack-info {
    padding-top: 22px;
    float: none;
    text-align: center;
  }

  .section--lookbook .picker-nav-btns {
    padding-top: 20px;
  }
}

@media (min-width: 769px) {
  .section--lookbook .choosed-pack-info .choosed-pack-desc {
    max-width: 420px;
    display: block;
  }

  .section--lookbook .picker-nav-container {
    text-align: initial;
  }

  .section--lookbook .picker-nav .image-holder {
    position: absolute;
    top: 35px;
    left: 0px;
    display: inline-block;
  }

  .section--lookbook .picker-nav__total {
    margin-top: 7px;
    float: right;
    text-align: right;
  }

  .product-grid-item--alt {
    width: 33%;
  }

  .lookbook-pick .lookbook__image {
    width: auto;
  }

  .lookbook-pick .lookbook__image img {
    width: 100%;
  }

  .lookbook-pick__container:hover .product__container {
    visibility: visible;
    opacity: 1;
  }

  .lookbook-pick .product__index {
    top: 0 !important;
    left: 0 !important;
  }

}

@media (min-width: 769px) and (max-width: 1024px) {
  .product-grid-item--alt {
    width: 50%;
  }

  .section--lookbook .choosed-pack-info .choosed-pack-desc {
    max-width: 320px;
  }
}




/* ==========================================================================
   Version 1.4
   ========================================================================== */
.site-logo-name {
  font-size: 28px;
  height: 150px;
  display: inline-block;
  vertical-align: middle;
  margin-top: 40px;
  font-weight: 600;
  font-family: $additionalBodyFontStack;
}


/* Pack offer section
/* -------------------------------------------------------------------------- */
.section--pack .section-heading {
  margin-top: 130px;
  font-size: 50px;
  letter-spacing: 30px;
  font-weight: 900;
}

.section--pack .section-heading:before {
  margin-left: -10px;
  top: -80px;
  @include transform(translateX(-50%));
  color: $colorTextBodyLight;
  letter-spacing: normal;
  font-weight: normal;
  opacity: 1;
}

.section--pack .pack-container .form-wrapper{
  display: block;
  margin: 0;
  margin-top: 35px;
}

.section--pack .pack__image {
  margin: 0 auto;
  margin-top: -10px;
  margin-bottom: 55px;
  max-width: 555px;
  text-align: center;
  position: relative;
  z-index: 1;
}

.section--pack .pack__image img {
  width: 100%;
}

.section--pack .pack-container {
  text-align: center;
}

.section--pack .pack__price {
  font-size: 48px;
  line-height: 42px;
  display: block;
}

.section--pack .pack__desc {
  margin-top: 36px;
  max-width: 400px;
  display: inline-block;
  line-height: 30px;
}

.section--pack .form-cart-message {
  left: 20px;
}

.pack-offer.pack-offer-lt,
.pack-offer.pack-offer-lb,
.pack-offer.pack-offer-rt,
.pack-offer.pack-offer-rb {
  position: absolute;
  min-width: 10px;
  display: none;
}

.pack-offer.pack-offer-lt {
  bottom: 15px;
  left: -185px;
}

.pack-offer.pack-offer-rt {
  bottom: 15px;
  right: -185px;
}

.pack-offer.pack-offer-lb {
  bottom: -85px;
  left: -75px;
}

.pack-offer.pack-offer-rb {
  bottom: -85px;
  right: -75px;
}

.pack-offer.pack-offer-lt:before,
.pack-offer.pack-offer-lb:before,
.pack-offer.pack-offer-rt:before,
.pack-offer.pack-offer-rb:before {
  content: "";
  display: block;
  position: absolute;
  top: -12px;
  left: -55px;
  width: 50px;
  height: 43px;
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWlkWU1pZCIgd2lkdGg9IjUxIiBoZWlnaHQ9IjQyIiB2aWV3Qm94PSIwIDAgNTEgNDIiPjxwYXRoIGZpbGw9IiNkMWNhY2MiIGQ9Ik00OS42MjYsMTYuMjAwIEM0OS4wNjIsMTYuODczIDQ4LjE4MiwxNy4xNDggNDcuMzI3LDE2LjkxMyBMNDAuOTY3LDE1LjE0NCBDMzYuMjc3LDMzLjE3OCAxOC4zNDYsNDQuNTg3IDAuMTM2LDQwLjc2MyBMMC44NDUsMzcuMjEyIEMxNy4xOTMsNDAuNjQ2IDMzLjI5MSwzMC4zODcgMzcuNDk1LDE0LjE3OSBMMzEuNzg2LDEyLjU5MSBDMzEuMTA4LDEyLjQwNCAzMC41NzEsMTEuOTE5IDMwLjMwNCwxMS4yODUgQzMwLjI0NywxMS4xNDcgMzAuMjAxLDExLjAwMyAzMC4xNzAsMTAuODUzIEMyOS45OTUsMTAuMDA3IDMwLjMwMyw5LjE1MSAzMC45NzksOC42MTYgTDQwLjk5NywwLjczMiBDNDEuNTQ0LDAuMjk5IDQyLjI0NCwwLjE0OCA0Mi45MjAsMC4zMTcgQzQzLjU5NiwwLjQ4NyA0NC4xNDksMC45NTMgNDQuNDM0LDEuNTg4IEw0OS45NTIsMTMuNzk4IEM1MC4yODksMTQuNTM3IDUwLjE5NCwxNS41MjUgNDkuNjI2LDE2LjIwMCBaTTQxLjg4MCw0LjY1MiBMMzUuMzE0LDkuODE5IEw0NS40OTIsMTIuNjQ4IEw0MS44ODAsNC42NTIgWiIvPjwvc3ZnPg==);
  background-repeat: no-repeat;
}

.pack-offer.pack-offer-lt:before,
.pack-offer.pack-offer-lb:before {
  left: auto;
  right: -5px;
  transform: translate(100%, 0);
}

.pack-offer.pack-offer-rt:before,
.pack-offer.pack-offer-rb:before {
  @include transform(rotateY(-180deg));
}


.pack-offer.pack-offer-lt,
.pack-offer.pack-offer-lb {
  text-align: left;
}

.pack-offer.pack-offer-rt,
.pack-offer.pack-offer-rb {
  text-align: right;
}

.pack-offer .pack-offer__title {
  margin-bottom: -4px;
}

.pack-offer .pack-offer__title a {
  font-size: 20px;
  font-weight: normal;
  line-height: 42px;
  @include transition(color 300ms ease-in-out);
}

.pack-offer .pack-offer__title a:hover {
  color: $colorHighlight;
}

.pack-offer .pack-offer__spec {
  font-family: $additionalBodyFontStack;
  font-size: 14px;
  color: $colorTextBodyLight;
}

.pack-offer .pack-offer__spec a {
  @include transition(color 300ms ease-in-out);
}

.pack-container .form-wrapper {
  padding: 0;
  background-color: $colorInverse;
}

.pack-container .form .form__field{
  background-color: $colorNeutral;
}

.pack-container .quantity-field .icon:after {
  border-color: transparent transparent $colorInverse transparent;
}

.pack-offer .pack-offer__spec a:hover {
  color: $colorPrimary;
}

@media (min-width: 426px) {
  .section--pack .section-heading {
    font-size: 80px;
    letter-spacing: 30px;
  }
}

@media (min-width: 769px) {
  .section--pack .section-heading {
    font-size: 125px;
    letter-spacing: 50px;
  }

  .pack-offer.pack-offer-lt,
  .pack-offer.pack-offer-lb,
  .pack-offer.pack-offer-rt,
  .pack-offer.pack-offer-rb {
    display: block;
  }

  .section--pack .pack__image {
    margin-bottom: 110px;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .section--pack .pack__image {
    max-width: 450px;
  }

  .pack-offer.pack-offer-lt {
    left: -140px;
  }

  .pack-offer.pack-offer-rt {
    right: -140px;
  }

  .pack-offer.pack-offer-lb {
    left: 0;
  }

  .pack-offer.pack-offer-rb {
    right: 0;
  }
}

/* Featured collections block
/* -------------------------------------------------------------------------- */
.featured-collections__list .featured-collections__item {
  padding-right: 5px;
  box-sizing: border-box;
  float: left;
  display: block;
  text-align: center;
  width: 100%;
}

.featured-collections__list .featured-collections__item:last-child {
  padding-right: 0;
}

.featured-collections__list .item__link {
  display: block;
}

.featured-collections__list .img-holder {
  min-height: 290px;
}

.featured-collections__list img {

  position: absolute;
  top: 50%;
  left: 50%;
  height: auto;
  @include transform(translate3d(-50%, -50%, 0));
}

.featured-collections__list .item__title {
  margin: 30px 0;
  font-family: $additionalBodyFontStack;
  font-size: 18px;
  font-weight: 700;
  line-height: 24px;
}

.featured-collections__list .item__1 .img-holder {
  background-color: $colorAdditional;
}


.featured-collections__list .item__2 .img-holder {
  background-color: $colorHighlight;
}

.featured-collections__list .item__3 .img-holder {
  background-color: $colorAccent;
}

@media (min-width: 769px) {
  .featured-collections__list .one {
      width: 100%;
  }

  .featured-collections__list .two {
      width: 50%;
  }

  .featured-collections__list .three {
      width: 33.333%;
  }

  .featured-collections__list .featured-collections__item {
    padding-right: 5px;
  }

  .featured-collections__list .featured-collections__item:last-child {
    padding-right: 0;
  }
}

/* Hero block (about us)
/* -------------------------------------------------------------------------- */
.hero-msg-container {
  position: absolute;
  top: 50%;
  left: 50%;
  text-align: center;
  -webkit-transform: translate3d(-50%, -50%, 0);
          transform: translate3d(-50%, -50%, 0);
  color: $colorInverse;
}

.hero-msg-container h1 {
  font-family: "Alex Brush",Tahoma,Geneva,sans-serif;
  font-size: 70px;
  text-transform: none;
  line-height: 70px;
}

@media(min-width: 769px) {
  .hero-msg-container h1 {
    font-size: 100px;
  }
}

.hero-about-us {
  position: relative;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
}

.hero-about-us:before,
.hero-about-us:after {
  content: "";
    display: block;
    width: 100%;
    height: 100%;
    background-color: #000;
    position: absolute;
    top: 0;
    left: 0;
    opacity: .4;
}

.hero-about-us:after {
  opacity: .1;
    background-color: #fff;
}

.hero-about-us .hero-msg-container {
  top: 50%;
  left: 0;
  text-align: left;
  @include transform(translate3d(0, -50%, 0));
  z-index: 1;
}

.hero-about-us .hero-msg-container h2 {
  margin-bottom: 25px;
  font-family: $bodyFontStack;
  font-size: 32px;
  line-height: 42px;
  text-transform: uppercase;
}

.hero-about-us .hero-msg-container em {
  font-family: $accentFontStack;
  font-size: 81px;
  font-weight: normal;
  font-style: normal;
  text-transform: capitalize;
  opacity: .7;
}

.hero-about-us .hero-msg-container p {
  font-size: 24px;
  line-height: 36px;
}

.hero-msg-container-wrapper {
  height: 100vh;
  position: relative;
}

.hero-about-us .btn--underlines-container {
  margin-top: 30px;
}

.hero-about-us .btn--underlines-container a,
.hero-about-us .btn--underlines-container svg {
  -webkit-transition: color 300ms ease-in-out, fill 300ms ease-in-out;
          transition: color 300ms ease-in-out, fill 300ms ease-in-out;
}

.hero-about-us .btn--underlines-container svg {
  margin-top: 5px
}

.hero-about-us .btn--underlines-container:hover a {
  cursor: pointer;
  color: $colorHighlight;
}

.hero-about-us .btn--underlines-container:hover svg > path {
  fill: $colorHighlight;
}

/* Recipe blocks
/* -------------------------------------------------------------------------- */
/* Block 1 */
.block {
  overflow: hidden;
}

.block__half {
  min-height: 500px;
  position: relative;
  text-align: center;
}

.recipe-block-1 {
  background-color: $colorNeutral;
}

.recipe-block-1 .block__half--bg {
  background-repeat: no-repeat;
  background-position: 50% 50%;
}

.recipe-block-1 .block__half:first-child {
  max-width: 500px;
  margin: 0 auto;
}

.recipe-block-1 .block__title {
  margin-bottom: 4px;
  font-family: Raleway;
  font-size: 32px;
  font-weight: 300;
  line-height: 42px;
}

.recipe-block-1 .block__desc {
  margin-bottom: 52px;
  font-family: $additionalBodyFontStack;
  font-size: 24px;
  font-style: italic;
  line-height: 36px;
}

.block .block__content {
    padding: 0;
    position: absolute;
    top: 50%;
    left: 0;
    max-width: 350px;
    width: 100%;
    margin-top: -127px;
  }

@media (min-width: 426px) {
  .block .block__content {
    left: 50%;
    margin-left: -175px;
  }
}


@media (min-width: 769px) {
  .recipe-block-1 {
    overflow: hidden;
  }

  .recipe-block-1 .block {
    padding: 0;
  }

  .block .block__content {
    padding-left: 10px;
  }

  .block__half {
    text-align: left;
    width: 50%;
    min-height: 620px;
    float: left;
  }

  .recipe-block-1 .block__content {
    padding: 0;
    padding-left: 10px;
    position: absolute;
    top: 50%;
    left: 50%;
    max-width: 350px;
    width: 100%;
    margin-left: -175px;
    margin-top: -127px;
  }
}




/* Block 2 */
.recipe-block-2 .block {
  background-color: $colorPrimary;
}

.recipe-block-2 .block__half--bg {
  background: url({{'img_recipe_block_2.jpg' | asset_url }}) 50% 50% no-repeat;
  background-size: cover;
}

.recipe-block-2 .block__title {
  color: $colorInverse;
  font-family: Raleway;
  font-size: 32px;
  font-weight: 700;
  line-height: 42px;
}

.recipe-block-2 .block__desc {
  margin-bottom: 52px;
  color: $colorInverse;
  font-family: $additionalBodyFontStack;
  font-size: 24px;
  font-style: italic;
  line-height: 36px;
  opacity: .7;
}

.recipe-block-2 .block__content .btn {
  width: 220px;
}

.recipe-block-2 .block__content {
  max-width: 400px;
}

@media (min-width: 426px) {
  .recipe-block-2 .block__content {
      margin-left: -200px;
  }
}


/* Information box
/* -------------------------------------------------------------------------- */
.section--promobox-info {
  padding: 50px 0;
  background-color: $colorAccent;
}

.section--promobox-info .promobox-msg {
  font-size: 24px;
  color: $colorInverse;
}

.section--promobox-info .promobox-msg strong {
  color: $colorPrimary;
}


/* Staff section
/* -------------------------------------------------------------------------- */
.section--staff .section-heading {
  margin-bottom: 35px;
  margin-top: 90px;
}

.section--staff .section-heading:before {
  top: -35px;
  @include transform(translateX(-50%));
}

.section--staff .employee-container {
  text-align: center;
}

.section--staff .employee {
  margin-bottom: 55px;
}

.section--staff .employee__photo,
.section--staff .employee__desc {
  padding: 60px 58px;
  box-sizing: border-box;
  display: inline-block;
}

.section--staff .employee__desc {
  padding: 10px 5px 0 5px
}

.section--staff .employee__photo .img-holder{
  max-width: 300px;
  max-height: 300px;
}

.section--staff .employee__photo img {
  position: relative;
  top: 0;
  left: 50%;
  @include transform(translateX(-50%));
  width: 100%;
}

.section--staff .employee__name {
  font-size: 24px;
  line-height: 30px;
}

.section--staff .employee__passion {
  font-family: $additionalBodyFontStack;
  color: $colorTextBodyLight;
  margin-top: 5px;
  margin-bottom: 15px;
}

.section--staff .employee__info {
  line-height: 30px;
}

@media (min-width: 769px) {
  .section--staff .employee-container {
    text-align: left;
  }

  .section--staff .employee {
    margin-bottom: 0;
  }


  .section--staff .employee-container .employee {
    width: 80%;
    margin: 0 auto;
  }

  .section--staff .employee__photo,
  .section--staff .employee__desc {
    width: 50%;
    padding: 60px 58px;
    box-sizing: border-box;
    display: block;
  }

  .section--staff .employee__desc {
    padding: 94px 5px 0 58px;
  }

  .section--staff .employee-container .employee:nth-child(odd) .employee__photo {
    float: left;
  }

  .section--staff .employee-container .employee:nth-child(odd) .employee__desc {
    float: right;
  }

  .section--staff .employee-container .employee:nth-child(even) .employee__photo {
    float: right;
  }

  .section--staff .employee-container .employee:nth-child(even) .employee__desc {
    float: left;
  }

  .section--staff .employee-container .employee {
    clear: both;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .section--staff .employee-container .employee {
    width: 95%;
  }

  .section--staff .employee__desc {
    padding-top: 45px;
  }
}


/* Special offer product (type 2)
/* -------------------------------------------------------------------------- */
.product--full {
  min-height: 400px;
  overflow: hidden;
}

.product--full .img-holder--product {
  min-height: 100%;

}

.product--full .img-holder--product img {
  position: relative;
  top: 0;
  left: 0;
  height: 100%;
  max-width: 850px;
  @include transform(none);
}

.product--full .product__info {
  padding-top: 47px;
}

@media (min-width: 769px) {
  .product--full .image-wrapper,
  .product--full .product__info {
    width: 50%;
    float: left;
    clear: none;
  }

  .product--full .img-holder--product {
  height: 600px;
  }


  .product--full .product__info {
      padding-top: 125px;
  }

  .product__info-container {
    float: left;
    /* margin-left: 17%; */
  }

  .product--full .img-holder--product img {
    position: absolute;
    top: 50%;
    left: 50%;
    width: auto;
    @include transform(translate3d(-50%, -50%, 0));
  }

}

/* Special offer product with options
/* -------------------------------------------------------------------------- */
.section--offer-product-options {
  background-color: #f9f9f9;

  .img-holder {
    height: 520px;
  }

  .img-holder img {
    height: 100%;
    position: relative;
    left: 50%;
    top: 0;
    @include transform(translateX(-50%));
  }

  .product__title {
    font-size: 20px;
    font-weight: normal;
    line-height: 42px;
  }


  .product__content {
    margin-top: 27px;
    padding: 0 10px;
    text-align: center;
  }

  .product-variants-radio-btns {
    padding-top: 0px;
  }

  .product-variants-radio-btns .radio-point:after {
    border-color: #f9f9f9;
  }

  .product__images-container {
    height: 520px;
    position: relative;
  }

  .product__images-container a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;

    transition: opacity 300ms ease-in-out;
  }

  .product__images-container a.show-in {
    opacity: 1;
  }
}


@media (min-width: 769px) {
  .section--offer-product-options .product__info {
    padding-top: 0;
    text-align: left;
  }

  .section--offer-product-options .product__content {
    margin-top: 127px;
    max-width: 460px;
    text-align: left;
  }
}


/* Block with special season offer
/* -------------------------------------------------------------------------- */
.offer-season {
  overflow: hidden;
    padding-top: 80px;
}

.offer-season .section-heading {
  margin-bottom: 45px;
  font-size: 28px;
}

.section-heading--season:before {
  content: "{{ settings.offer_season_overlap_subheading }}";
    top: -36px;
  @include transform(translateX(-50%));
}

.offer-season__product-one {
  position: relative;
  background-color: $colorAdditional;
}

.offer-season__product-two {
  position: relative;
  background-color: $colorAccent;
}

.offer-season__img {
  background: url({{ 'img_offer_season.jpg' | asset_url }}) 50% 50% no-repeat;
    background-size: cover;
    height: 100%;
    width: 100%;
}

.offer-season__content > div {
  min-height: 440px;
}

.offer-season__product-title {
  font-family: $additionalBodyFontStack;
  font-size: 18px;
  font-weight: 700;
  line-height: 24px;
  margin-top: 26px;
  display: inline-block;
}

.offer-season__product-one > a,
.offer-season__product-two > a {
  margin-left: -93px;
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%);
  text-align: center;
}


.offer-season .img-holder {
  overflow: hidden;
  border-radius: 50%;
  width: 170px;
  height: 170px;
  border: 8px solid white;
  display: block;
}

.offer-season .img-holder img {
  @include transform(translate3d(-50%, -50%, 0));
  height: 100%;
}

.arrow {
  width: 60px;
  height: 20px;
  display: block;
}

.offer-season .arrow {
  margin: 0 auto;
}

.arrow .icon--arrow-right:before {
    border-color: transparent transparent $colorPrimary transparent;
}

.offer-season__product-one .arrow .icon--arrow-right:after {
    border-color: transparent transparent $colorAdditional transparent;
}

.offer-season__product-two .arrow .icon--arrow-right:after {
    border-color: transparent transparent $colorAccent transparent;
}


.arrow--next {
  text-align: right;
  position: relative;
}

.arrow--next:before {
  content: "";
  margin-top: -1px;
  position: absolute;
  top: 50%;
  left: 0;
  height: 2px;
  width: 44px;
  background-color: $colorPrimary;
}

@media (min-width: 769px) {
  .offer-season__product-one {
    width: calc(50% - 170px);
  }

  .offer-season__product-two {
    width: calc(50% - 170px);
  }

  .offer-season__img {
    max-width: 340px;
  }

  .offer-season__content > div {
      float: left;
  }

  .offer-season__product-one > a,
  .offer-season__product-two > a{
       margin-left: -73px;
  }

  .offer-season .img-holder {
    width: 140px;
    height: 140px;
  }


}

@media (min-width: 1025px) {

  .offer-season__product-one {
    width: calc(50% - 220px);
  }

  .offer-season__product-two {
    width: calc(50% - 220px);
  }

  .offer-season__img {
    max-width: 440px;
  }

  .offer-season .img-holder {
    width: 170px;
    height: 170px;
    margin: 0 auto;
  }

  .offer-season__product-one > a,
  .offer-season__product-two > a{
       margin-left: 0;
  }

  .offer-season__product-one > a {
    right: 33%;
    left: auto;
  }

  .offer-season__product-two > a {
    left: 33%;
  }
}


/* Hero block with products
/* -------------------------------------------------------------------------- */
.hero-products__bg {
  position: relative;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
}

.hero-products__bg:before,
.hero-products__bg:after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #000;
  opacity: .4;
}

.hero-products__bg:after {
  background-color: #fff;
  opacity: .1;
}

.hero-products-wrapper {
  position: relative;
  z-index: 2;
}

.hero-products .hero-msg-container {
  position: relative;
  top: 0;
  left: 0;
  @include transform(none);
}

.hero-products__product {
    margin: 70px auto;
    height: 170px;
    width: 170px;
    background-color: $colorInverse;
    border-radius: 50%;
    text-align: center;
  }

.hero-products__product .arrow-curve {
  display: none;
}

.hero-products__product .arrow {
  margin: 3px auto;
  display:block;
}

.hero-products__product > a {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

.hero-products__product > a .product__name,
.hero-products__product > a .price {
  @include transition(color 300ms ease-in-out);
}

.hero-products__product > a .arrow--next:before {
  @include transition(background-color 300ms ease-in-out);
}

.hero-products__product > a .icon--arrow-right:before {
  @include transition(border-color 300ms ease-in-out);
}

.hero-products__product > a:hover .product__name,
.hero-products__product > a:hover .price {
  color: $colorHighlight;
}

.hero-products__product > a:hover .arrow--next:before {
  background-color: $colorHighlight;
}

.hero-products__product > a:hover .icon--arrow-right:before {
  border-color: transparent transparent $colorHighlight transparent;
}

.hero-products__product .price {
  padding-top: 50px;
  margin-bottom: 7px;
  display: block;
  font-size: 30px;
  line-height: 30px;
}

.hero-products__product .product__name {
  font-size: 18px;
}

.hero-products__title {
  font-family: $accentFontStack;
  font-size: 81px;
  font-weight: normal;
  font-style: normal;
  line-height: 61px;
}

.hero-products__subtitle {
  font-family: $bodyFontStack;
  font-size: 24px;
  font-weight: normal;
  font-style: normal;
  text-transform: uppercase;
}

@media (min-width: 769px) {
  .hero-products-wrapper {
    height: 400px;
  }

  .hero-products .hero-msg-container {
    left: 0;
    top: 50%;
    @include transform(translateY(-50%));
    z-index: 1;
    width: 100%;
  }

  .hero-products__product {
    margin: 0;
    height: 170px;
    width: 170px;
    background-color: $colorInverse;
    border-radius: 50%;
    text-align: center;
    position: absolute;
    z-index: 2;
  }

  .hero-products__product.product-1 {
    top: 20px;
    left: 20px;
  }

  .hero-products__product.product-2 {
    bottom: 20px;
    right: 20px;
  }

  .hero-products__product .price {
    padding-top: 55px;
  }

  .hero-products__product .arrow-curve {
    position: absolute;
    display: block;
  }

  .hero-products__product .arrow {
    display: none;
  }

  .hero-products__product.product-1 .arrow-curve {
    bottom: -53px;
    left: 0;
  }

  .hero-products__product.product-2 .arrow-curve {
    right: 70px;
    top: -70px;
    @include transform(rotate(155deg));
  }

}

/* Recipe section for the homepage. Recipes with authors
/* -------------------------------------------------------------------------- */
.section--homepage-recipe-authors {
  text-align: center;
}

.section--homepage-recipe-authors .section-heading {
  margin-top: 90px;
  margin-bottom: 17px;
}

.section--homepage-recipe-authors .section-heading:before {
  top: -35px;
  @include transform(translateX(-50%));
}

.section--homepage-recipe-authors .section__info {
  margin-bottom: 40px;
}

.section--homepage-recipe-authors .article {
  margin: 0 auto;
  margin-bottom: 50px;
  display: block;
  max-width: 300px;
  text-align: left;
}

.section--homepage-recipe-authors .article .article-img-container{
  position: relative;
}

.section--homepage-recipe-authors .article .img-holder {
  position: relative;
  overflow: hidden;
  height: 300px;
  width: 100%;
}

.section--homepage-recipe-authors .article .img-holder--no-img {
  text-align: center;
  padding-top: 50px;
  box-sizing: border-box;
}

.section--homepage-recipe-authors .article .img-holder img {
  position: absolute;
  top: 0;
  left: 50%;
  @include transform(translateX(-50%));
  height: 100%;
  width: auto;
}

.section--homepage-recipe-authors .article .article__date {
  padding: 14px 30px;
  position: absolute;
  bottom: 20px;
  left: 50%;
  min-width: 180px;
  box-sizing: border-box;
  @include transform(translateX(-50%));
  background-color: $colorAccent;
  z-index: 3;
}

.section--homepage-recipe-authors .article .article__date:before,
.section--homepage-recipe-authors .article .article__date:after {
  @include content-tl(0, 0, 100%, 100%, transparent);
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWlkWU1pZCIgd2lkdGg9IjM0IiBoZWlnaHQ9IjI3IiB2aWV3Qm94PSIwIDAgMzQgMjciPjxwYXRoIGZpbGw9IiNmZmYiIGQ9Ik0zMy42NDgsMC40NDMgQzIyLjQzMiw3LjM0NCAxMS4yMTYsMTQuMjQ0IDAuMDAwLDIxLjE0NSBMMC4wMDAsMTguNTc4IEM2Ljk3OCwxNC41MDQgMTMuOTk1LDEwLjQ0MyAyMS4xMDIsNi40MTggQzI3LjIzMCwyLjk0OSAzNS41NjksLTEuMzYxIDMzLjY0OCwwLjQ0MyBaTTAuMDAwLDI0LjczNyBDMS45NTAsMjMuNjIzIDMuODc5LDIyLjUwMSA1LjgzOSwyMS4zOTEgQzExLjk2NywxNy45MjEgMjAuMzA2LDEzLjYxMSAxOC4zODQsMTUuNDE2IEMxMi4yNTYsMTkuMTg2IDYuMTI4LDIyLjk1NiAwLjAwMCwyNi43MjcgTDAuMDAwLDI0LjczNyBaIi8+PC9zdmc+);
  background-position: 0 0;
  background-repeat: no-repeat;
}

.section--homepage-recipe-authors .article .article__date:after {
  left: auto;
  right: 0;
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWlkWU1pZCIgd2lkdGg9IjI3IiBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMjcgMjQiPjxwYXRoIGZpbGw9IiNmZmYiIGQ9Ik0yNy4wMDAsMi4yNjYgQzIyLjY0MSw0LjcyMSAxOC42MTYsNi44NDggMTUuNDk4LDguMjI5IEMxNy41MDMsNi4zNjMgMjEuODE4LDMuMzY0IDI3LjAwMCwtMC4wMjYgTDI3LjAwMCwyLjI2NiBaTTI3LjAwMCw1LjI1MiBMMjcuMDAwLDguMjM2IEMxNy41OTgsMTMuOTYyIDYuODc2LDIwLjI2MSAwLjIzNSwyMy4yMDEgQzMuODc4LDE5LjgxMSAxNS4xMjYsMTIuNjkwIDI1LjQwMCw2LjI1NCBDMjUuOTMwLDUuOTIyIDI2LjQ2OSw1LjU4NSAyNy4wMDAsNS4yNTIgWiIvPjwvc3ZnPg==);
  background-position: 100% 100%;
}

.section--homepage-recipe-authors .article .date {
  color: $colorInverse;
}

.section--homepage-recipe-authors .article .article__info {
  margin-top: 31px;
  margin-left: 55px;
  text-align: left;
}

.section--homepage-recipe-authors .article .article__title {
  padding-top: 0;
  font-size: 18px;
  text-align: left;
  font-weight: bold;
  line-height: 24px;
}


.section--homepage-recipe-authors .article .article__author-photo {
  margin-top: 35px;
  height: 42px;
  width: 42px;
  border-radius: 50%;
  overflow: hidden;
  float: left;
}

.section--homepage-recipe-authors .article .article__author-photo img {
  height: 100%;
}

@media (min-width: 592px) {
  .section--homepage-recipe-authors .article {
    max-width: 515px;
  }

  .section--homepage-recipe-authors .article .article-img-container{
    display: inline-block;
    vertical-align: middle;
  }

  .section--homepage-recipe-authors .article .img-holder {
    height: 220px;
    width: 220px;
  }

  .section--homepage-recipe-authors .article .article__author-photo {
    margin-top: 0px;
    float: none;
    display: inline-block;
    vertical-align: middle;
    margin-left: 25px;
  }

  .section--homepage-recipe-authors .article .article__info {
    margin-top: 0px;
    margin-left: 10px;
    display: inline-block;
    vertical-align: middle;
  }

}

@media (min-width: 769px) {
  .section--homepage-recipe-authors .article {
    margin-left: 5px;
    max-width: 33%;
    display: inline-block;
    vertical-align: top;
  }

  .section--homepage-recipe-authors .article .article__author-photo {
    margin-top: 35px;
    margin-left: 0px;
    float: left;
    display: block;
  }

  .section--homepage-recipe-authors .article .article-img-container{
    display: block;
  }

  .section--homepage-recipe-authors .article .img-holder {
    height: 300px;
    width: 300px;
  }

  .section--homepage-recipe-authors .article .article__info {
    margin-top: 31px;
    margin-left: 55px;
    display: block;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .section--homepage-recipe-authors .article {
    max-width: 220px;
  }

  .section--homepage-recipe-authors .article .img-holder {
    height: 220px;
    width: 220px;
  }
}

/* ==========================================================================
   Version 1.5
   ========================================================================== */
@media (max-width: 768px) {
  .product__visuals .product__cart .btn--submit {
    opacity: 1;
    visibility: visible;
    @include transform(translateY(0%));
  }
}

{% if settings.popup_enable %}
/* Popup
/* -------------------------------------------------------------------------- */
.popup {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  z-index: 100;
  opacity: 0;
  visibility: hidden;

  -webkit-transition: opacity 300ms ease-in-out, visibility 300ms ease-in-out;
          transition: opacity 300ms ease-in-out, visibility 300ms ease-in-out;

  &:before {
    @include content-tl(0, 0, 100%, 100%, $colorPrimary);
    @include transition(opacity 300ms ease-in-out);
    opacity: 0;
  }

  .popup-content {
    margin: 0 auto;
    position: relative;
    top: 50%;
    left: 0;
    max-width: 800px;
    min-height: 600px;
    width: 100%;
    box-sizing: border-box;
    z-index: 1;
    background-color: $colorInverse;
    @include transform(translateY(-50%));

    opacity: 0;
    visibility: hidden;

    -webkit-transition: opacity 300ms ease-in-out, visibility 300ms ease-in-out;
    transition: opacity 300ms ease-in-out, visibility 300ms ease-in-out;
  }

  .popup-heading {
    font-family: $bodyFontStack;
  }

  .popup-discount-offer {
    font-family: $bodyFontStack;
    font-weight: 900;
    letter-spacing: -0.02em;
    font-size: 86px;
    line-height: 68px;
  }
}

.popup-discount--image {

  .popup-content {
    padding-top: 160px;
    padding-left: 15px;
    padding-bottom: 90px;
    background-repeat: no-repeat;
    overflow: hidden;
  }

  .popup-content:before {
    @include content-tl(140px, 0, 100%, 100%, $colorInverse);
    z-index: -1;
  }

  .popup-heading {
    margin-top: 5px;
    margin-bottom: 6px;
    font-size: 24px;
    font-weight: normal;
    line-height: 36px;
  }

  .popup-discount-code {
    margin-top: 40px;
    margin-left: 10px;
    padding: 5px 15px;
    display: inline-block;
    font-size: 16px;
    letter-spacing: 0.4em;
    color: $colorHighlight;
    text-transform: uppercase;
    border: 1px solid $colorHighlight;
  }

  .popup-discount-info {
    margin-left: 10px;
    margin-top: 10px;
    font-size: 18px;
    line-height: 24px;
    color: $colorAdditionalSecond;
  }

  .popup-discount-offer {
    text-align: center;
    margin-left: -15px;
    color: $colorHighlight;
  }

  .popup-link-container {
    margin-left: 10px;
    margin-top: 20px;

    .close-btn {
      padding: 15px 0 1px 0;
      position: relative;
      display: inline-block;
      color: $colorAdditionalSecond;
      border-bottom: 2px solid $colorAdditionalSecond;
    }
  }

  .popup-link {
    font-size: 16px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    text-align: right;

    @include transition(color 300ms ease-in-out);

    span {
      margin-right: 10px;
      float: left;
    }

    svg path {
      fill: $colorPrimary;
      @include transition(fill 300ms ease-in-out);
    }

    &:hover {
      color: $colorHighlight;

      svg path {
        fill: $colorHighlight;
      }
    }
  }

  .close-btn {
    display: none;
  }
}


.popup-discount--image.is-open {
  visibility: visible;
  opacity: 1;

  &:before {
    opacity: .6;
  }

  .popup-content {
    opacity: 1;
    visibility: visible;
  }
}

@media (min-width: 426px) and (max-width: 768px) {
  .popup-discount--image .popup-content {
    padding-left: 15%;
  }

  .popup-discount--image .popup-discount-offer {
    margin-left: -15%;
    font-size: 136px;
    line-height: 110px;
  }
}

@media (min-width: 769px) {
  .popup-discount--image {
    .popup-content {
      padding-left: 303px;
      padding-bottom: 120px;
    }

    .popup-content:before {
      display: none;
    }

    .popup-discount-offer {
      text-align: left;
      margin-left: 0;
      font-size: 136px;
      line-height: 110px;
    }

    .popup-link-container {
      margin-left: 0;
      margin-top: 20px;
      width: 400px;
      height: 396px;
      position: absolute;
      bottom: 0;
      right: 0;
      z-index: -1;
      background-image: url({{'img_popup-link-container-bg.png' | asset_img_url: '400x' }});

      .close-btn {
        display: none;
      }
    }

    .popup-link {
      position: absolute;
      bottom: 23px;
      right: 30px;
      color: $colorInverse;

      span {
        margin-right: 0px;
        display: block;
        float: none;
      }

      svg path {
        fill: $colorInverse;
      }
    }

    .popup-link:hover {
      color: $colorPrimary;

      svg path {
        fill: $colorPrimary;
      }
    }

    .close-btn {
      display: block;
      padding: 15px;
      position: absolute;
      top: 0;
      right: 0;

      span {
        width: 16px;
        height: 16px;
      }
    }
  }
}

@media (max-height: 640px) {
  .popup-discount--image .popup-content {
    padding-top: 160px;
    padding-left: 15px;
    max-width: 600px;
    min-height: 450px;
  }

  .popup-discount--image .popup-content:before {
    @include content-tl(140px, 0, 100%, 100%, $colorInverse);
    z-index: -1;
  }

  .popup-discount--image .popup-discount-offer {
    font-size: 86px;
    line-height: 68px;
  }

  .popup-discount--image .popup-discount-info {
    font-size: 14px;
    line-height: 19px;
  }
}

@media (max-height: 640px) and (min-width: 425px) {
  .popup-discount--image .popup-content {
    padding-left: 15%;
  }
}

@media (max-height: 640px) and (min-width: 769px) {
  .popup-discount--image .popup-content {
    padding-left: 90px;
  }
}
{% endif %}


/* ==========================================================================
   Version 1.6
   ========================================================================== */

/* General Styles
   ========================================================================== */
.javascript-is-disabled {
  padding: 5px;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  color: $colorPrimary;
  text-align: center;
  background-color: $colorNeutral;
  z-index: 5;
}

@media all and (min-width: 769px) {
  body:after {
    content: 'widescreen';
    display: none;
  }
}

/* New Header Styles
   ========================================================================== */

/* Logo */
/* .logo-container {
  padding: 6px 0 13px 0;
  display: flex;
  justify-content: left;
  align-items: center;
} */

.site-logo {
  {% if settings.header_mobile_logo_disable %}
    display: none;
  {% else %}
    display: inline-block;
  {% endif %}
}

.site-logo img {
  height: 100%;
  vertical-align: middle;
}

.site-name {
  text-transform: uppercase;
  font-weight: 700;
  line-height: 96px;
}

/*.logo-container .site-logo img {
  max-height: 60px;
}

/* Buttons to open drawers */
.main-nav-open-btn {
  padding: 14px 15px;
  position: absolute;
  left: 6px;
  top: 7px;
}

.main-nav-open-btn .icon span {
  @include transition(background-color 300ms ease-in-out);
}

.main-nav-open-btn:hover .icon span {
  background-color: $colorHighlight;
}
.nav-list__item--cart .cart-open-btn{
  display: none;
}
.cart-open-btn {
  padding: 10px 16px;
  position: absolute;
  top: 10px;
  right: 12px;
  z-index: 4;

  @include transition(transform 450ms cubic-bezier(0.5, 0.13, 0.5, 0.87));

  .cart-count {
    width: 16px;
    height: 16px;
    display: inline-block;
    position: absolute;
    top: 2px;
    right: 1px;
    font-size: 11px;
    line-height: 15px;
    color: $colorInverse;
    background-color: $colorHighlight;
    border-radius: 50%;
  }

  .cart-total {
    margin-right: 4px;
    display: none;

    @include transition(color 300ms ease-in-out);
  }
}

.cart-open-btn:hover .cart-total {
  color: $colorHighlight;
}

.cart-open-btn:hover svg path {
  fill: $colorHighlight;
}

.header .drawer--menu .drawer__header {
  height: auto;
}

.store-desc,
.search-container {
  display: none;
}

@media (min-width: 769px) {
  .header .drawer--menu .site-logo,
  .header .drawer--menu .site-name {
    display: none;
  }

  .header.fixed .nav-list__item--cart .cart-open-btn{
    opacity: 1;
    top: 0;
  }
  .nav-list__item--cart{
    padding: 25px 0;
  }
  .nav-list__item--cart .cart-open-btn{
    display: inline;
    position: relative;
    top: -30px;
    right: 0;
    opacity: 0;
  }
  .nav-list__item--cart .cart-open-btn .cart-count {
    top: -14px;
    right: -26px;
  }

  .header.fixed .cart-open-btn{
    opacity: 0;
    transform: translateY(45px);
  }

  .site-logo {
    display: inline-block;
    z-index:1111;
  }

  .logo-container .site-logo img {
    height: 100%;
  }

  .store-desc {
    margin: 0 12px;
    display: inline-block;
    font-family: $headerTextFontStack;
    font-size: 14px;
    font-style: italic;
    line-height: 20px;
  }

  .logo-container .store-desc:first-child {
    @include transition(opacity 300ms ease-in-out);
  }

  .main-nav-open-btn {
    display: none;
  }

  .cart-open-btn {
    padding: 0;
    top: 63px;
    right: 63px;
    min-width: 80px;
    @include transition(all 300ms ease-in-out);

    .cart-total {
      display: inline-block;
    }

    .cart-count {
      top: -8px;
      right: -16px;
    }
  }

  .search-container {
    display: block;
    position: absolute;
    top: 60px;
/*     left: 55px; */
    z-index: 6;
    @include transition(opacity 300ms ease-in-out);

    .form--search-primary {
      float: left;
    }

    .form__field {
      padding: 3px 0 12px 0;
      width: 0px;
      @include transition (width 320ms cubic-bezier(0.455, 0.030, 0.515, 0.955));
    }

    .icon--search {
      padding: 5px 10px;
      position: absolute;
      top: -2px;
      right: -30px;
    }
  }

  .search-container.open {
    .icon--search {
      right: 0px;
    }

    .form__field {
      width: 210px;
    }

    .currency-picker {
      opacity: 0;
    }
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .search-container.open ~ .logo-container .store-desc:first-child {
    opacity: 0;
  }
}
@media (min-width: 769px) {
  .search-container.open ~ form .currency-picker {
    opacity: 0;
  }
}

.overflow-hidden {
  overflow: hidden;
}


/* Header for Cart page
   ========================================================================== */
.header--cart {
  height: 190px;
  position: relative;
  text-align: center;
  background-color: $colorInverse;

  &:after {
    display: none;
  }

  .site-logo {
    display: none;
  }

  .cart-continue-shop {
    position: absolute;
    top: 0;
    left: 0;
    width: 250px;
    height: 100%;
    text-align: left;
    z-index: 5;

    .cart-continue-shop__link {
      padding-top: 84px;
      padding-left: 17px;
      display: block;
      height: 100%;
      line-height: 18px;
      box-sizing: border-box;

      @include transition(all 300ms ease-in-out);

      .icon {
        padding-right: 8px;
      }

      .icon:before {
        top: 4px;
        border-color: transparent transparent $colorHighlight transparent;
        @include transition(border-color 300ms ease-in-out);
      }

      .icon:after {
        top: 7px;
        border-color: transparent transparent $colorInverse transparent;
        @include transition(border-color 300ms ease-in-out);
      }
    }

    .text-clear {
      padding-left: 30px;
      display: inline-block;
      font-size: 14px;
      font-weight: normal;
      color: $colorTextAddHeader;
      @include transition(color 300ms ease-in-out);
    }

    .cart-continue-shop__link:hover {
      color: $colorInverse;
      background-color: $colorHighlight;

      .icon:before {
        border-color: transparent transparent $colorInverse transparent;
      }

      .icon:after {
        border-color: transparent transparent $colorHighlight transparent;
      }

      .text-clear {
        color: $colorInverse;
      }
    }
  }
}

/* Media styles */
@media (min-width: 481px) {
  .header--cart {
    text-align: right;

    .site-logo {
      padding: 0 25px;
      height: 100%;
      display: inline-block;
      height: 90px;
      line-height: 190px;

      img {
        display: inline-block;
        vertical-align: middle;
      }
    }
  }
}

@media (min-width: 769px) {
  .header--cart {
    text-align: center;
    min-height: 200px
  }
  .header.header--cart::after {
    bottom: 0;
  }
}


/* Drawer Styles (mobile menu and cart)
   ========================================================================== */

/* Drawer General Styles */
.drawer {
  text-align: left;
  background-color: rgba($colorPrimary, 0);
  overflow: visible;
  @include transition(background-color 350ms ease-in-out);
}

.drawer.open {
  position: fixed;
  top: 0;
  bottom: 0;
  height: 100vh;
  width: 100%;
  overflow: hidden;
  background-color: rgba($colorPrimary, 0.6);
  z-index:111 !important;
}

.drawer .drawer__wrapper {
  width: 100%;
  padding-bottom: 40px;

  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  overflow-x: hidden;

  position: absolute;
  top: 0;
  bottom: 0px;
  z-index: 5;

  background-color: $colorInverse;
  @include transition(transform 350ms ease-in-out);
}

.drawer--left-side.close .drawer__wrapper {
  @include transform(translate3d(-100%, 0, 0));
  height: 100vh;
}

.drawer--right-side.close .drawer__wrapper {
  @include transform(translate3d(100%, 0, 0));
  height: 100vh;
}

.drawer.open .drawer__wrapper {
  @include transform(translate3d(0, 0, 0));
}

/* Drawer Menu Styles */
.drawer--menu .drawer__wrapper {
  left: 0px;
}


/* Drawer Cart Styles */
.drawer--cart .drawer__wrapper {
  background-color: $colorNeutral;
}

// Overlay
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-color: $colorPrimary;
  z-index: 4;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: opacity 450ms ease-in-out, visibility 450ms ease-in-out;
          transition: opacity 450ms ease-in-out, visibility 450ms ease-in-out;
}

//.drawer.open .overlay {
//  opacity: .6;
//  visibility: visible;
//}

/* Drawer Responsive Styles */
@media (min-width: 769px) {

  /* Drawer Menu Styles */
  .drawer--menu {
    position: relative;
  }

  .drawer.drawer--menu .drawer__wrapper {
    width: 100%;
    height: 100%;
    min-height: 100%;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    overflow-x: visible;
    padding-bottom: 0px;
    position: relative;
    background-color: transparent;
    left: 0;
    z-index: 3;
    @include transform(translate3d(0, 0, 0));
  }

  .drawer--menu.open {
    position: relative;
    height: auto;
    overflow-y: visible;
    overflow-x: visible;
  }

  .drawer--menu.open {
    background-color: rgba($colorPrimary, 0);
  }

  /* Drawer Cart Styles */
  .drawer--cart .drawer__wrapper {
    width: 640px;
    right: 0px;
  }

  .drawer--cart .drawer__btn-close {
    right: 30px;
  }

  .drawer--cart .drawer__header {
    padding: 19px 40px;
  }
}

/* Cart Responsive Styles */
@media (min-width: 769px) {

  .cart .cart-list__item--title {
    width: 296px;
  }

  .cart .cart-list__item--title > span {
    display: block;
    font-size: 13px;
    color: $colorAdditionalSecond;
    margin-top: -52px;
  }
}

/* ==========================================================================
   IE11 Styles
   ========================================================================== */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  .dropdown .dropdown-list {
    overflow: hidden;
  }

  .search-container .currency-picker .open.dropdown .dropdown__button {
    background-color: $colorInverse;
  }
}



/* ==========================================================================
   Version 1.7
   ========================================================================== */

.parallax .parallax__base,
.parallax .parallax__back  {
  transition: transform 450ms cubic-bezier(0.50, 0.130, 0.5, 0.87);
}




/* ==========================================================================
   Header
   ========================================================================== */
/* General Header Styles */
.header {
  box-sizing: border-box;
  float: left;
  width: 100%;
}

.header-wrapper {
  position: relative;
  text-align: center;
  z-index: 4;
}

.header--clear {
  height: 0px;
}

.header--clear:before {
  @include content-tl(0, 0, 100%, 140px, transparent);
  z-index: 3;
  background: -webkit-linear-gradient(top,        rgba($colorNeutral, 1) -20%, rgba($colorInverse, 0) 100%);
  background:    -moz-linear-gradient(top,        rgba($colorNeutral, 1) -20%, rgba($colorInverse, 0) 100%);
  background:         linear-gradient(to bottom,  rgba($colorNeutral, 1) -20%, rgba($colorInverse, 0) 100%);
}

.header .icon--search,
.header .currency-picker {
  display: none;
}


/* Media styles */
@media (min-width: 769px) {
  .header {
    height: auto;
    float: none;
    position: relative;
    z-index: 100;
    top: 84px; //needed for smuze animation
    @include transform(translate3d(0, -84px, 0));
    background-color: $colorNeutral;
    -webkit-transition: background-color 400ms ease-in-out, transform 450ms cubic-bezier(0.50, 0.130, 0.5, 0.87);
            transition: background-color 400ms ease-in-out, transform 450ms cubic-bezier(0.50, 0.130, 0.5, 0.87);
  }

  /* .header:after {
    content: "";
    margin-left: 2%;
    position: absolute;
    bottom: 87px;
    display: block;
    width: 96%;
    height: 3px;
    background-color: $colorInverse;
    z-index: 3;
    opacity: 1;

    @include transition (opacity 450ms ease-in-out);
  } */

  .header .icon--search {
    display: block;
    position: absolute;
    //top: 64px;
    //left: 62px;
  }

  .header .currency-picker {
    display: block;
  }

  .header--clear {
    background-color: transparent;

    &:after {
      display: none;
    }

    &:before {
      height: 200px;
    }
  }

  .header--clear .nav-list {
    background-color: $colorInverse;
    @include transition(background-color 450ms cubic-bezier(0.50, 0.130, 0.5, 0.87));
  }

  .header .drawer__header {
    display: block;
    overflow: hidden;
    opacity: 1;
  }

  .header .drawer--menu .drawer__header {
    display: none;
  }

  .header.fixed {
    position: fixed;
    top: 84px;
    @include transform(translate3d(0, -100%, 0));

    &:after {
      opacity: 0;
    }

    .drawer--menu .drawer__header {
      opacity: 0;
    }

    .drawer__btn-open {
      @include transform(translate3d(0, 100px, 0));
    }
  }

  .header--clear.fixed {
    background-color: $colorNeutral;

    .nav-list {
      background-color: $colorNeutral;
    }
  }
}

/*
  --------------------------------------------------------
    Currency picker
  --------------------------------------------------------
*/

/*  Currency picker near the search icon
  --------------------------------------------------------
*/
.currency-picker {
  position: absolute;
  top: 62px;
  left: 89px;
  display: block;
  @include transition(opacity 200ms ease-in-out);
  z-index: 6;

  select {
    margin-top: -17px;
    margin-left: -6px;
    padding: 16px 48px 20px 39px;
    font-size: 16px;
    font-weight: 500;
    color: $colorPrimary;
    background-color: transparent;

    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    text-overflow: '';
  }

  .dropdown {
    margin-left: 0;
    margin-top: -21px;

    .dropdown__button {
      margin-bottom: 0;
      margin-left: 21px;
      padding: 0 14px 0 0px;
      width: 100%;
      position: relative;
      font-size: 16px;
      font-weight: 500;
      color: $colorTextBody;
      background-color: transparent;
      border-radius: 0;
      z-index: 7;

      &:hover {
        color: $colorHighlight;
      }
    }

    .dropdown-list {
      display: block;
      visibility: hidden;
      background-color: $colorInverse;
      border-radius: 0;
      opacity: 0;
      -webkit-transition: opacity 300ms ease-in-out, transform 300ms ease-in-out;
              transition: opacity 300ms ease-in-out, transform 300ms ease-in-out;
      @include transform(translateY(-20%));
    }

    .dropdown-list:before {
      width: 100%;
      height: 60px;
      border: none;
      top: -60px;
      right: 0;
      background-color: $colorInverse;
    }

    .dropdown-list .dropdown-list__item {
      padding: 5px 18px 7px 39px;
      font-size: 16px;
      @include transition(color 300ms ease-in-out);

      &:last-child {
        padding-bottom: 33px;
      }
    }

    .icon {
      margin-top: -6px;
      right: 0;
      z-index: 6;
    }

    .icon:before,
    .icon:after {
      border: none;
      border-radius: 3px;
      background-color: $colorTextBody;
    }

    .icon:before {
      width: 8px;
      height: 2px;
      top: 5px;

      @include transition(background-color 300ms ease-in-out);
    }

    .icon:after {
      width: 2px;
      height: 8px;
      left: 3px;

      @include transition(all 300ms ease-in-out);
      @include transform(translateY(0));
    }

    .dropdown__button:hover + .icon:before,
    .dropdown__button:hover + .icon:after {
      background-color: $colorHighlight;
    }
  }

  .dropdown.open {
    margin-left: -18px;
    z-index: 12;

    .dropdown__button {
      padding: 20px 46px 20px 39px;
      margin-left: 0;
    }

    .dropdown-list {
      opacity: 1;
      visibility: visible;
      -webkit-transition: opacity 300ms ease-in-out, transform 300ms ease-in-out;
              transition: opacity 300ms ease-in-out, transform 300ms ease-in-out;
      @include transform(translateY(0%));
    }

    .icon:after {
      opacity: 0;
      @include transform(translateY(100%));
    }
  }
}


/*  Currency picker in the mobile navigation
  --------------------------------------------------------
*/
.nav-list__item--currency .nav-list__link {
  overflow: hidden;
    padding: 0;
    min-height: 57px;

  .nav-list__item__label {
    position: absolute;
    z-index: 13;
    padding: 15px 0 0 35px;
    float: left;
  }
}
.nav-list__item--currency .currency-picker {
  display: block;
  position: static;

  .icon {
    display: none;
  }

  .dropdown {
    margin-left: 0;
    margin-top: 0;
    width: 100%;
    display: block;
  }

  .dropdown__button {
    margin-bottom: 0;
    margin-top: 0;
    padding: 20px 20px;
    width: 100%;
    float: right;
    position: absolute;
    display: block;
    text-align: right;
    font-size: 16px;
    font-weight: 500;
    color: $colorPrimary;
    background-color: transparent;
    z-index: 7;
    top: 0px;
    right: 0;
    left: 0;
    box-sizing: border-box;
    margin-left: 0;
  }

  .dropdown-list {
    display: none;
    padding: 54px 0 0 0;
    max-width: 100%;
    position: relative;
    top: 0;
    left: 0;
    clear: both;
    border-radius: 0px;
    background-color: $colorNeutral;
    -webkit-box-shadow: none;
            box-shadow: none;
  }

  .dropdown-list .dropdown-list__item {
    padding: 6px 18px 7px 59px;
    font-size: 16px;
    color: $colorPrimary;
  }

  .dropdown-list .dropdown-list__item:hover {
    color: $colorHighlight;
  }

  .dropdown.open .dropdown-list {
    display: block;
  }

  .dropdown.open .dropdown__button {
    padding: 20px;
  }

  .dropdown-list:before {
    display: none;
  }
}

@media (min-width: 769px) {
  .nav-list .currency-picker {
    display: none;
  }
}



{% if settings.search_header_type == 'voice' %}
/* ==========================================================================
   Speech Recognizer
   ==========================================================================
*/

/* Speech Recognizer Container
/* -------------------------------------------------------------------------- */
.search-container {
  transition: none;

  .search-box {
    display: none;
    opacity: 0;
    visibility: hidden;
    @include transform(translateY(50px));

    -webkit-transition: transform 300ms ease-in-out, visibility 300ms ease-in-out, opacity 300ms ease-in-out;
            transition: transform 300ms ease-in-out, visibility 300ms ease-in-out, opacity 300ms ease-in-out;
  }

  .search-close-btn {
    padding: 20px;
    float: right;
    display: none;
    opacity: 0;
    visibility: hidden;
    @include transform(translateY(20px));
    -webkit-transition: transform 150ms ease-in-out, visibility 150ms ease-in-out, opacity 150ms ease-in-out;
            transition: transform 150ms ease-in-out, visibility 150ms ease-in-out, opacity 150ms ease-in-out;
  }

  .search-box__bg {
    position: absolute;
    width: 200vw;
    height: 200vw;
    top: 0;
    left: 0;
    background-color: $colorInverse;
    border-radius: 50%;

    z-index: 5;

    @include transform(scale3d(0, 0, 0) translate3d(-50%, -50%, 0));
    transform-origin: 0 0;
  }

  .search-box__overlay {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    height: 100vh;
    width: 100%;
    width: 100vw;
    background-color: transparent;
    cursor: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWlkWU1pZCIgd2lkdGg9IjExLjcxOSIgaGVpZ2h0PSIxMS43MTkiIHZpZXdCb3g9IjAgMCAxMS43MTkgMTEuNzE5Ij48cGF0aCBmaWxsPSIjNWM0YjUxIiBkPSJNNy4yNTgsNS44NDQgTDExLjQxNSwxMC4wMDEgQzExLjgwNSwxMC4zOTEgMTEuODA1LDExLjAyNCAxMS40MTUsMTEuNDE1IEMxMS4wMjQsMTEuODA1IDEwLjM5MSwxMS44MDUgMTAuMDAxLDExLjQxNSBMNS44NDQsNy4yNTggTDEuNjg3LDExLjQxNSBDMS4yOTYsMTEuODA1IDAuNjYzLDExLjgwNSAwLjI3MywxMS40MTUgQy0wLjExOCwxMS4wMjQgLTAuMTE4LDEwLjM5MSAwLjI3MywxMC4wMDEgTDQuNDMwLDUuODQ0IEwwLjI3MywxLjY4NyBDLTAuMTE4LDEuMjk2IC0wLjExOCwwLjY2MyAwLjI3MywwLjI3MyBDMC42NjMsLTAuMTE4IDEuMjk2LC0wLjExOCAxLjY4NywwLjI3MyBMNS44NDQsNC40MzAgTDEwLjAwMSwwLjI3MyBDMTAuMzkxLC0wLjExOCAxMS4wMjQsLTAuMTE4IDExLjQxNSwwLjI3MyBDMTEuODA1LDAuNjYzIDExLjgwNSwxLjI5NiAxMS40MTUsMS42ODcgTDcuMjU4LDUuODQ0IFoiLz48L3N2Zz4=), auto;
    z-index: -1;
  }

  &:before {
    visibility: hidden;
    opacity: 0;

    box-shadow: 0px 10px 30px 0px rgba(92, 75, 81, 0.1);

    @include content-tl(0, 0, 100%, 100%, transparent);

    -webkit-transition: visibility 300ms ease-in-out, opacity 300ms ease-in-out;
            transition: visibility 300ms ease-in-out, opacity 300ms ease-in-out;
  }
}

.search-box-wrapper {
  margin: 0 auto;
  margin-top: 40vh;
  max-width: 870px;
  position: relative;
  text-align: left;
}


/* Speech Recognizer form
/* -------------------------------------------------------------------------- */
.search-box {
  width: 100%;
  display: block;
  position: relative;
  text-align: left;
  z-index: 4;

  .search-box__label {
    position: absolute;
    bottom: 0px;
    left: 0;
    width: 83%;
    height: 3px;

    overflow: hidden;
    z-index: 1;

    -webkit-transition: visibility 150ms ease-in-out, opacity 150ms ease-in-out;
            transition: visibility 150ms ease-in-out, opacity 150ms ease-in-out;
  }

  .search-box__label:after {
    content: "";
    display: block;
    position: absolute;
    right: 0;
    bottom: 0;
    height: 3px;
    width: 200%;
    background: #f06060;
    background: linear-gradient(to right, #8cbeb2 0%,#f06060 33.333%,#f3b562 66.666%,#8cbeb2 100%) repeat;
    background-size: 50% 100%;
    z-index: 3;
    opacity: 0;

    @include transition(opacity 600ms ease-in-out);
  }

  .search-box__search-field {
    padding: 0;
    margin: 0;
    padding-bottom: 10px;
    width: 83%;
    font-size: 32px;
    font-weight: 300;
    text-transform: capitalize;
    border-bottom: 3px solid $colorNeutral;
    position: relative;

    pointer-events: auto;
  }

  .search-box__search-field::-webkit-input-placeholder { /* Chrome/Opera/Safari */
    font-size: 32px;
    font-weight: 300;
    color: $colorPrimary;
  }

  .search-box__search-field::-moz-placeholder { /* Firefox 19+ */
    font-size: 32px;
    font-weight: 300;
    color: $colorPrimary;
  }

  .search-box__search-field:-ms-input-placeholder { /* IE 10+ */
    font-size: 32px;
    font-weight: 300;
    color: $colorPrimary;
  }

  .search-box__record-btn {
    margin: 0 18px;
    width: 40px;
    height: 40px;
    padding: 9px 12px;
    background-color: $colorNeutral;
    border-radius: 50%;

    @include transition(opacity 300ms ease-in-out);
  }

  .search-box__submit-btn {
    margin-left: 11px;
    @include transition(opacity 300ms ease-in-out);
  }

  .search-box__record-btn:hover path,
  .search-box__submit-btn:hover path {
    @include transition(fill 300ms ease-in-out);
  }

  .search-box__record-btn:hover path,
  .search-box__submit-btn:hover path {
    fill: $colorHighlight;
  }

  .search-box__record-btn .pause {
    padding-left: 1px;
    display: none;
  }
}

.search-box__alt-results {
  padding-top: 10px;
  position: absolute;
  top: 100%;
  left: 0;
  width: 83%;
  opacity: 0;

  @include transition(opacity 300ms ease-in-out);
}

.search-box__alt-result {
  margin-top: 10px;
  margin-right: 30px;
  padding: 5px 0px;
  display: inline-block;
  font-size: 18px;
  line-height: 18px;
  text-transform: capitalize;
  color: $colorTextBodyLight;
  cursor: pointer;

  @include transition(color 300ms ease-in-out);
}

.search-box__alt-result--sm {
  font-size: 16px;
}

.search-box__alt-result.is-hide {
  display: none;
}

.search-box__alt-result:hover {
  color: $colorPrimary;
}

.search-box__error-msg {
  padding: 20px 0;
  position: absolute;
  top: 100%;
  left: 0px;
  width: 83%;
  box-sizing: border-box;
  text-align: center;
  color: $colorInverse;
  background-color: $colorHighlight;
  opacity: 0;

  @include transform-origin(0, 0);
  @include transform(scaleY(0));
  -webkit-transition: transform 300ms ease-in-out, opacity 300ms ease-in-out;
          transition: transform 300ms ease-in-out, opacity 300ms ease-in-out;
}
.search-box__block-msg {
  padding: 20px;
  position: absolute;
  top: 100%;
  right: -230px;
  max-width: 304px;
  font-size: 14px;
  color: #ada2a4;
  text-align: center;
  background-color: #fff;
  opacity: 0;
  box-shadow: 0px 10px 30px 0px rgba(92,75,81,0.1);
  @include transform-origin(0, 0);
  @include transform(scaleY(0));
  -webkit-transition: transform 300ms ease-in-out, opacity 300ms ease-in-out;
          transition: transform 300ms ease-in-out, opacity 300ms ease-in-out;
}
.search-box__block-msg > a {
  font-weight: 600;
  color: $colorPrimary;

  @include transition(color 300ms ease-in-out);
}
.search-box__block-msg > a:hover {
  color: $colorHighlight;
}
.search-container.is-opening {
  position: absolute;
  top: 2vh;
  left: 2%;
  width: 96%;
  height: 96vh;
  overflow: hidden;
  z-index: 7;

  .search-open-btn {
    display: none;
  }

  .search-box,
  .search-close-btn {
    display: block;
  }

  .search-box__bg {
    -webkit-animation: showBg .6s ease-in-out 0s forwards;
            animation: showBg .6s ease-in-out 0s forwards;
  }
}

@-webkit-keyframes showBg {

  to {
    @include transform(scale3d(1, 1, 1) translate3d(-50%, -50%, 0));
  }
}
@keyframes showBg {

  to {
    @include transform(scale3d(1, 1, 1) translate3d(-50%, -50%, 0));
  }
}
.search-container.is-open {
  position: absolute;
  top: 2vh;
  left: 2%;
  width: 96%;
  height: 96vh;
  background-color: $colorInverse;
  z-index: 7;

  -webkit-transition: transform 400ms ease-in-out, visibility 300ms ease-in-out, opacity 300ms ease-in-out;
          transition: transform 400ms ease-in-out, visibility 300ms ease-in-out, opacity 300ms ease-in-out;

  &:before {
    visibility: visible;
    opacity: 1;
  }

  .search-box__bg,
  .search-open-btn,
  .currency-picker {
    display: none;
  }

  .search-close-btn {
    display: block;
    opacity: 1;
    visibility: visible;
    @include transform(translateY(0px));
  }

  .search-box {
    display: block;
    opacity: 1;
    visibility: visible;

    @include transform(translateY(0));

    -webkit-transition: transform 300ms ease-in-out, visibility 300ms ease-in-out, opacity 300ms ease-in-out;
            transition: transform 300ms ease-in-out, visibility 300ms ease-in-out, opacity 300ms ease-in-out;
  }

  .search-box__overlay {
    visibility: visible;
  }
}

.search-container--lg .form--search-primary .search-box__submit-btn {
  display: inline-block;
  position: relative;
  top: 0;
  right: 0;
  text-indent: initial;
  opacity: 1;
}

.search-container--lg {
    max-width: 400px;
    position: relative;
    margin: unset;
}

.search-box .search-popup .search-popup__scroll-container {
  margin-left: 0;
  left: 0;
  width: 83%;
}

@media (min-width: 769px) {
  .header.fixed .search-container{
    opacity: 0;
    visibility: hidden;
  }

  .header .search-container .icon--search {
    position: relative;
    top: 0;
    left: 0;
    right: 0;
  }

  .search-container .currency-picker {
    margin-left: -6px;
    float: none;
    display: inline-block;
  }
}
.search-container.is-closing {
  -webkit-animation: isClosing .4s ease-in-out 0s forwards;
          animation: isClosing .4s ease-in-out 0s forwards;

  &:before {
    visibility: hidden;
    opacity: 0;
  }
}

@-webkit-keyframes isClosing {

  to {
    @include transform(translate3d(0, -100%, 0));
  }
}


@keyframes isClosing {

  to {
    @include transform(translate3d(0, -100%, 0));
  }
}
.search-container.is-closed {
  .search-box__overlay {
    visibility: hidden;
  }

  &:before {
    visibility: hidden;
    opacity: 0;
  }
}
.search-box.recording {
  .search-box__record-btn .mic {
    display: none;
  }

  .search-box__record-btn .pause {
    display: block;
  }

  .search-box__search-field {
    pointer-events: none;
  }

  .search-box__search-field::-webkit-input-placeholder { /* Chrome/Opera/Safari */
    color: $colorTextBodyLight;
  }

  .search-box__search-field::-moz-placeholder { /* Firefox 19+ */
    color: $colorTextBodyLight;;
  }

  .search-box__search-field:-ms-input-placeholder { /* IE 10+ */
    color: $colorTextBodyLight;
  }

  button[disabled] {
    opacity: .6;
  }

  button[disabled]:hover path {
    fill: $colorPrimary;
  }
}

@-webkit-keyframes dotJump {
  0%   {@include transform(translateY(0));}
  20%  {@include transform(translateY(-4px));}
  40%  {@include transform(translateY(0));}
}

@keyframes dotJump {
  0%   {@include transform(translateY(0));}
  20%  {@include transform(translateY(-4px));}
  40%  {@include transform(translateY(0));}
}
.search-box.processing {

  .search-box__label:after {
    opacity: 1;
    -webkit-animation: gradientAnim 3s ease-in-out infinite;
            animation: gradientAnim 3s ease-in-out infinite;
  }

  .search-box__search-field {
    pointer-events: none;
  }

  .search-box__search-field::-webkit-input-placeholder { /* Chrome/Opera/Safari */
    color: $colorTextBodyLight;
  }

  .search-box__search-field::-moz-placeholder { /* Firefox 19+ */
    color: $colorTextBodyLight;;
  }

  .search-box__search-field:-ms-input-placeholder { /* IE 10+ */
    color: $colorTextBodyLight;
  }

  button[disabled] {
    opacity: .6;
  }

  button[disabled]:hover path {
    fill: $colorPrimary;
  }
}

@-webkit-keyframes gradientAnim {

  0% {
    @include transform(translateX(0));
  }

  100% {
    @include transform(translateX(50%));
  }
}

@keyframes gradientAnim {

  0% {
    @include transform(translateX(0));
  }

  100% {
    @include transform(translateX(50%));
  }
}
.search-box.result {
  & + .search-box__alt-results {
    opacity: 1;
  }
}
.search-box.error {
  .search-box__error-msg {
    @include transform(scaleY(1));
    opacity: 1;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .search-box .search-box__search-field,
  .search-box .search-box__label,
  .search-box .search-box__error-msg,
  .search-box .search-box__alt-results {
    width: 79%;
  }
}
{% endif %}

#product-multi-variants {
  text-align: right;
  padding: 20px 10px 0 5px;
}
.product--boxed #product-multi-variants {
  max-width: 300px;
  padding: 20px 0 0 0;
  display: inline-block;
}
#product-multi-variants .selector-wrapper label {
  float: left;
  max-width: 90px;
  text-align: left;
}
@media (max-width: 769px) {
  .product--boxed #product-multi-variants .selector-wrapper .dropdown-list {
    background-color: #f5f4f4;
  }
  .product--boxed #product-multi-variants .selector-wrapper .dropdown__button {
    background-color: #f5f4f4;
  }
  #product-multi-variants .selector-wrapper .dropdown-list {
    background-color: #fff;
  }
  #product-multi-variants .selector-wrapper .dropdown__button {
    background-color: #fff;
  }
}
.white-background{
  background-color: white;
}
.spesial-offer--one.spesial-offer.spesial-offer--1499162299897-0 a,
.spesial-offer--two.spesial-offer.spesial-offer--1499162299897-1 a
{
  color: #fff;
}
.form-wrapper p{color: #000;}
.offer-season__product-title{color: #000;}
h4.product__title{color: #000;}
span.slide-index{color: #000;}
 .slide-info h4.heading--add{color: #000;}
 .swiper-button-next{color: #000;}
.feedback__info h1{color: #000;}
.product .product__badge {background: #F06060;}
div#shopify-section-footer {
    max-width: 1400px;
    margin: -4px auto 0;
  border-top: 2px solid ;
}
.grid {
    display: grid ;
}
.heading_1 {
    font-size: 24px;
    color: black; 
     letter-spacing:3px;
   grid-column-start: 1;
  grid-column-end: 5;
}
.heading_2 {
  margin-top:60px;
  grid-column-start: 1;
  grid-column-end: 5;
}
.heading2_inner{
  letter-spacing:3px;
    font-size: 24px;
    color: black; 
}
.footer .footer__item:nth-child(n+2) .heading--add-small {
    margin-top: 20px;
    font-size: 24px;
        color: #b1b1b1;
  letter-spacing:1px;
}
p.textarea_methods_1 {
    margin-top: 15px !important; 
  line-height:2.2;
      font-weight: 700;
}
.icon_img565 {
    position: relative !important;
    left: 26% !important;
   
}
.header a {
    font-family: 'Montserrat', sans-serif !important;
}
#shopify-section-footer h1, h4 {
    font-family: 'Oswald', sans-serif  !important;
}

#shopify-section-footer a {
    font-family: 'Lato', sans-serif  !important;
}
main.main-content .grid {
    margin: 0 auto;
}
.wrapper.white-background .grid .grid__item.fold.similar-product.fade-up.delay-five {
    padding-bottom: 0 !important;
}
.wrapper.white-background .grid .grid__item .fold.similar-product.fade-up.delay-five .fold__content .carousel--product {
    margin-bottom: 20px !important;
}
@media only screen and (max-width: 767px) {
  .slider-advantages {
padding-top: 22px;
max-width: 340px;
}
section.offer-season .section-heading--season:before{
font-size:100px;

}
section.offer-season .offer-season__content .offer-season__product-one > a {
width: 100%;
margin: 0 auto;
left: 0;
}
section.offer-season .offer-season__content .offer-season__product-one > a > span {
margin: 0 auto;
}
section.offer-season .offer-season__product-two > a{
width: 100%;
margin: 0 auto;
left: 0;
}
section.offer-season .offer-season__product-two > a > span{
margin: 0 auto;
}
.section--advantages {
padding-top: 112px;
}
.section--advantages {
padding-top: 12px;
}
section.section.section--subscribe.section--subscribe-1477906775199.clearfix .form-wrapper input#mce-EMAIL {
border: 1px solid;
padding: 14px 5px;
margin-bottom: 5px;
text-align: center;
}
.spesial-offer
.heading--page, .heading--page-md, .heading--page-xs, .heading--page-small {
font-family: Lato,Tahoma,Geneva,sans-serif;
font-size: 32px;
font-weight: 300;
text-transform: uppercase;
line-height: 1.2;
text-shadow: 3px 2px 3px black;
}
.spesial-offer
.subheading--page {
font-family: Lato,Bitter,Palatino Linotype,Book Antiqua,Palatino,serif;
font-weight: 400;
font-size: 24px;
}
section.section.section--feedback.clearfix .feedback__info > h1 > strong {
font-size: 18px;
}
  /* .Featured-carousel-wrapper {
    padding-top: 3px !important;
    padding-bottom: 3px !important;
} */
  .section--special-offer .section-heading {
    margin-top: 50px!important;
    font-size: 28px;
}
  .collections-list-wrapper .heading--page,
  .template-collection .heading--page,
  .template-customers-login .heading--page{
    font-size:32px;
    line-height: 1.2;
  }
}
.collection-banner {text-align: center;}
.rte a{text-decoration:underline;}
@media only screen and (max-width:990px){
  h1#col-top {padding-top: 30px;margin-top:30px;}
}
@media only screen and (max-width:767px){
div#shopify-section-header {height: 0px!important;}
main.main-content {margin-top: 70px;}
}



.template-search .search .section--page-search {
    padding: 81px 0 50px 0;
}
.template-search .search-results .product .img-holder img {  transform: translate(-50%, -50%) !important; }