/** Shopify CDN: Minification failed

Line 17:0 Comments in CSS use "/* ... */" instead of "//"
Line 18:0 Comments in CSS use "/* ... */" instead of "//"
Line 19:0 Comments in CSS use "/* ... */" instead of "//"
Line 22:2 Expected identifier but found "$"
Line 23:2 Expected identifier but found "$"
Line 24:2 Expected identifier but found "$"
Line 38:2 Expected identifier but found "$"
Line 39:2 Expected identifier but found "$"
Line 41:2 Expected identifier but found "$"
Line 54:0 Comments in CSS use "/* ... */" instead of "//"
... and 233 more hidden warnings

**/

//************************************************************************//
// Hover color generator
//************************************************************************//

@function hover($color, $isLink: false) {
  $lightness: lightness($color);
  $lightColor: false;
  $multiplier: 1;
  @if $lightness > 10% { $lightColor: true; }
  @if $isLink { $multiplier: 2; }

  @if $lightColor {
    $lightness: ($lightness / 20) * $multiplier;
    $color: darken($color, $lightness);
  } @else {
    @if $lightness < 2.5% { $lightness: 30%; }
    @else if $lightness < 7.5% { $lightness: 15%; }
    $lightness: ($lightness / 10) * $multiplier;
    $color: lighten($color, $lightness);
  }

  $saturation: saturation($color);
  $saturatedColor: false;
  @if $saturation > 0% { $saturatedColor: true; }
  $saturation: ($saturation / 20) * $multiplier;

  @if $saturatedColor {
    @if $lightColor {
      $color: desaturate($color, $saturation);
    } @else {
      $color: saturate($color, $saturation);
    }
  }

  @return $color;
}

//************************************************************************//
// Secondary border
//************************************************************************//

@function border($color) {
  @if lightness($color) > 50% {
    $color: lighten($color, 5%);
  } @else {
    $color: darken($color, 5%);
  }
  @return $color;
}

//************************************************************************//
// Color Contrast
//************************************************************************//

@function shade($color, $percent) {
  @return mix(#000, $color, $percent);
}

@function tint($color, $percent) {
  @return mix(#fff, $color, $percent);
}

@function contrast($color, $percent: 6%) {
  @if (lightness($color) > 50) {
    @return shade($color, $percent);
  } @else {
    @return tint($color, $percent);
  }
}

$content-width: 84%;
$max-width: 1430px;
$min-width: 290px;

$background-color: {{ settings.background-colour }};

$title-color: {{ settings.title-colour }};
$title-font: {{ settings.main-title-font }};

$logo-link-color: {{ settings.logotype-link-colour }};
$logo-link-color-hover: {{ settings.logotype-link-hover-colour }};

$secondary-header-font: {{ settings.secondary-header-font }};

$meta-font: {{ settings.meta-font }};

$accent-color: {{ settings.accent-colour }};
$accent-color-hover: {{ settings.accent-hover-colour }};
$button-text-color: {{ settings.button-text-colour }};

$body-font: {{ settings.body-font }};
$text-color: {{ settings.text-colour }};
$light-text-color: mix($background-color, $text-color, 60%);
$lightest-text-color: mix($background-color, $text-color, 75%);

$primary-border-color: {{ settings.primary-border-colour }};
$secondary-border-color: border($primary-border-color);

$nav-link-color: {{ settings.nav-link-colour }};
$nav-link-color-hover: {{ settings.nav-link-hover-colour }};
$nav-link-dropdown-color: {{ settings.nav-link-dropdown-colour }};
$nav-background-color: {{ settings.nav-background-colour }};
$nav-border-color: {{ settings.nav-border-colour }};

$header-action-link-color: {{ settings.header-action-link-colour }};
$header-action-link-color-hover: {{ settings.header-action-link-hover-colour }};

$select-background-color: mix($background-color, $primary-border-color, 75%);
$theme-detail-link-color: $light-text-color;
$theme-detail-link-color-hover: hover($theme-detail-link-color, true);

$mobile-nav-secondary-color: contrast($nav-background-color, 5%);
$mobile-nav-tertiary-color: contrast($nav-background-color, 10%);
$mobile-nav-quaternary-color: contrast($nav-background-color, 15%);

$badge-color-soldout: #C0C0C0;
$badge-color-sale: {{ settings.accent-colour }};
$badge-color-new: #2C2C2C;

$placeholder-svg-color: {{ settings.primary-border-colour }};
$placeholder-svg-background: contrast($background-color, 5%);



//************************************************************************//
// Prefixer
//************************************************************************//

// Variable settings for /addons/prefixer.scss
$prefix-for-webkit:    true !default;
$prefix-for-mozilla:   true !default;
$prefix-for-microsoft: true !default;
$prefix-for-opera:     true !default;
$prefix-for-spec:      true !default; // required for keyframe mixin

@mixin prefixer ($property, $value, $prefixes) {
  @each $prefix in $prefixes {
    @if $prefix == webkit {
      @if $prefix-for-webkit {
        -webkit-#{$property}: $value;
      }
    }
    @else if $prefix == moz {
      @if $prefix-for-mozilla {
        -moz-#{$property}: $value;
      }
    }
    @else if $prefix == ms {
      @if $prefix-for-microsoft {
        -ms-#{$property}: $value;
      }
    }
    @else if $prefix == o {
      @if $prefix-for-opera {
        -o-#{$property}: $value;
      }
    }
    @else if $prefix == spec {
      @if $prefix-for-spec {
        #{$property}: $value;
      }
    }
    @else  {
      @warn "Unrecognized prefix: #{$prefix}";
    }
  }
}

@mixin disable-prefix-for-all() {
  $prefix-for-webkit:    false;
  $prefix-for-mozilla:   false;
  $prefix-for-microsoft: false;
  $prefix-for-opera:     false;
  $prefix-for-spec:      false;
}

//************************************************************************//
// Transitions
//************************************************************************//

// Shorthand mixin. Supports multiple parentheses-deliminated values for each variable.
// Example: @include transition (all 2s ease-in-out);
//          @include transition (opacity 1s ease-in 2s, width 2s ease-out);
//          @include transition-property (transform, opacity);

@mixin transition ($properties...) {
  // Fix for vendor-prefix transform property
  $needs-prefixes: false;
  $webkit: ();
  $moz: ();
  $spec: ();

  // Create lists for vendor-prefixed transform
  @each $list in $properties {
    @if nth($list, 1) == "transform" {
      $needs-prefixes: true;
      $list1: -webkit-transform;
      $list2: -moz-transform;
      $list3: ();

      @each $var in $list {
        $list3: join($list3, $var);

        @if $var != "transform" {
          $list1: join($list1, $var);
          $list2: join($list2, $var);
        }
      }

      $webkit: append($webkit, $list1);
         $moz: append($moz,    $list2);
        $spec: append($spec,   $list3);
    }

    // Create lists for non-prefixed transition properties
    @else {
      $webkit:  append($webkit, $list, comma);
      $moz:     append($moz,    $list, comma);
      $spec:    append($spec,   $list, comma);
    }
  }

  @if $needs-prefixes {
    transition: $spec;
  }
  @else {
    @if length($properties) >= 1 {
      @include prefixer(transition, $properties, webkit moz spec);
    }

    @else {
      $properties: all 0.15s ease-out 0s;
      @include prefixer(transition, $properties, webkit moz spec);
    }
  }
}

@mixin transition-property ($properties...) {
   transition-property: transition-property-names($properties, false);
}

@mixin transition-duration ($times...) {
  @include prefixer(transition-duration, $times, webkit moz spec);
}

@mixin transition-timing-function ($motions...) {
// ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier()
  @include prefixer(transition-timing-function, $motions, webkit moz spec);
}

@mixin transition-delay ($times...) {
  @include prefixer(transition-delay, $times, webkit moz spec);
}

//************************************************************************//
// Transform
//************************************************************************//

@mixin transform($property: none) {
//  none | <transform-function>
  @include prefixer(transform, $property, webkit moz ms o spec);
}

@mixin transform-origin($axes: 50%) {
// x-axis - left | center | right  | length | %
// y-axis - top  | center | bottom | length | %
// z-axis -                          length
  @include prefixer(transform-origin, $axes, webkit moz ms o spec);
}

@mixin transform-style ($style: flat) {
  @include prefixer(transform-style, $style, webkit moz ms o spec);
}

//************************************************************************//
// Border-radius
//************************************************************************//

@mixin border-top-radius($radii) {
  @include prefixer(border-top-left-radius, $radii, spec);
  @include prefixer(border-top-right-radius, $radii, spec);
}

@mixin border-bottom-radius($radii) {
  @include prefixer(border-bottom-left-radius, $radii, spec);
  @include prefixer(border-bottom-right-radius, $radii, spec);
}

@mixin border-left-radius($radii) {
  @include prefixer(border-top-left-radius, $radii, spec);
  @include prefixer(border-bottom-left-radius, $radii, spec);
}

@mixin border-right-radius($radii) {
  @include prefixer(border-top-right-radius, $radii, spec);
  @include prefixer(border-bottom-right-radius, $radii, spec);
}

//************************************************************************//
// Breakpoint
//************************************************************************//

@mixin breakpoint($point) {
  @if $point == full {
    @media (min-width: 1081px) { @content; }
  }
  @else if $point == large {
    @media (min-width: 720px) { @content; }
  }
  @else if $point == tablet {
    @media (min-width: 720px) and (max-width: 960px) { @content; }
  }
  @else if $point == small {
    @media (max-width: 719px) { @content; }
  }
  @else if $point == phone {
    @media (max-width: 480px) { @content; }
  }
  @else if $point == slideshow-special {
    @media (max-width: 938px) { @content; }
  }
  @else if $point == device {
    @media (max-device-width: 1024px) { @content; }
  }
  @else if $point == mobile-nav {
    @media (max-device-width: 1024px), (max-width: 719px) { @content; }
  }
}

//************************************************************************//
// Placeholders
//************************************************************************//

$placeholders: '-webkit-input-placeholder',
               '-moz-placeholder',
               '-ms-input-placeholder';

@mixin placeholder {
  @each $placeholder in $placeholders {
    @if $placeholder == "-webkit-input-placeholder" {
      &::#{$placeholder} {
        @content;
      }
    }
    @else if $placeholder == "-moz-placeholder" {
      // FF 18-
      &:#{$placeholder} {
        @content;
      }

      // FF 19+
      &::#{$placeholder} {
        @content;
      }
    }
    @else {
      &:#{$placeholder} {
        @content;
      }
    }
  }
}

@mixin lt-ie9 {

  .lt-ie9 & {
    @content;
  }
}

@mixin lt-ie10 {

  .lt-ie10 & {
    @content;
  }
}

@mixin ie10 {

  .ie10 & {
    @content;
  }
}

//************************************************************************//
// Position
//************************************************************************//

@mixin position ($position: relative, $coordinates: 0 0 0 0) {

  @if type-of($position) == list {
    $coordinates: $position;
    $position: relative;
  }

  $top: nth($coordinates, 1);
  $right: nth($coordinates, 2);
  $bottom: nth($coordinates, 3);
  $left: nth($coordinates, 4);

  position: $position;

  @if $top == auto {
    top: $top;
  }
  @else if not(unitless($top)) {
    top: $top;
  }

  @if $right == auto {
    right: $right;
  }
  @else if not(unitless($right)) {
    right: $right;
  }

  @if $bottom == auto {
    bottom: $bottom;
  }
  @else if not(unitless($bottom)) {
    bottom: $bottom;
  }

  @if $left == auto {
    left: $left;
  }
  @else if not(unitless($left)) {
    left: $left;
  }
}

//************************************************************************//
// Opacity
//************************************************************************//

@mixin opacity ($value) {
  $IEValue: $value*100;
  opacity: $value;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity="+$IEValue+")";
  filter: alpha(opacity=$IEValue);
}
#wholesale-page {

//************************************************************************//
// Aspect ratio
//************************************************************************//

@mixin ratio($ratio: 1 1) {
  $width: 100%;
  $height: percentage(nth($ratio, 2) / nth($ratio, 1));

  width: $width;
  height: 0;
  padding-bottom: $height;
}

.medium-down--hide {
  display: block;
}
.medium-up--hide {
  display: none;
}

@media (max-width: 767px) {
  .medium-down--hide {
    display: none;
  }
  .medium-up--hide {
    display: block;
  }
}

.uc-title {
  font-family: $secondary-header-font;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.select-wrapper {
  position: relative;
  width:305px;
  max-width: 250px;
  background-color: #fff;
  text-align: left;
  border-radius: 2px;
  box-shadow: 0px 0px 0px 1px #cacaca;
  display: inline-block;
  color: #797676;
  font-size:12px;
  padding:8px 10px;
  font-family: $meta-font;
  cursor: pointer;

  &:before {
    content: '';
	  position: absolute;
	  top: 13px;
	  right: 8px;
	  border-top: 5px solid #666;
	  border-left: 5px solid transparent;
	  border-right: 5px solid transparent;
  }

  &:after {
    content: '';
	  position: absolute;
	  top: 13px;
	  border-top: 3px solid #fff;
	  border-left: 3px solid transparent;
	  border-right: 3px solid transparent;
	  right: 10px;
  }

  label.select-text {
    width: 100%;
    margin: 0;
    max-width: 82%;
    text-align: left;
  }

  select {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2;
    width: 100%; // needed for Firefox
    height: 100%; // needed for IE
    color: #000;
    cursor: pointer;
    opacity: 0;
    -webkit-appearance: none;
  }
}

.empty {
  font-size:16px;
  margin:40px 0 60px;
  font-style: italic;

  @include breakpoint(small) {
    width:100%;
    text-align: center;
    padding:0 30px;
  }

  a {
    color: $accent-color;
    &:hover { color: $accent-color-hover; }
  }
}

.error-message, .alert-message {
  font-family:'Opens Sans', sans-serif;
  background-color:#FBEDEC;
  color:#ee575a;
  font-size:12px;
  border:1px solid #EA555C;
  height: 42px;
  width:75%;

  &.success {
    border-color: #4faa2a;
    background-color:#f2f9ed;
    color:#66b544;
  }

  @include breakpoint(small) { width:100%; }
}

.content-area {
  display: block; 
  margin:0 auto;
  padding:0 15px;
  max-width:$max-width;
  width:$content-width;
  @include breakpoint(small) {
    width:100%;
  }
}

.section-title {
  font-family: $secondary-header-font;
  font-size:18px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-align: center;
  margin:0 0 45px;
  padding:45px 0 0;
  color: $title-color;
}

.section-border {
  border-top: 1px solid $primary-border-color;

  main section:first-child & { border-top: 0; }
}

.action-button {
  font-family: $secondary-header-font;
  font-size:14px;
  font-weight:600;
  letter-spacing: 0.1em;
  color: $button-text-color;
  background-color: $accent-color;
  padding:9px 14px;
  text-transform: uppercase;
  cursor:pointer;
  border-radius: 4px;
  display: inline-block;

  &:hover             {
    background-color: $accent-color-hover;
    color: $button-text-color;
  }

  &.desaturated       { background-color: $primary-border-color; }
  &.desaturated:hover { background-color: $lightest-text-color; }
}

.field {
  border: 1px solid $primary-border-color;
  color: $text-color;
  font-family: $meta-font;
  outline:none;
  font-size: 12px;
  padding:8px 12px;
  display: inline-block;
  @include transition(box-shadow 250ms, border 250ms, color 250ms);

  &.error {
    border:1px solid #F3AAAD;
    color:#ee575a;
    @include placeholder { color:#ee575a; }
    box-shadow: 0px 0px 7px rgba(238, 87, 90, 0.4);
  }
}

.page-title {
  padding:16px 0 35px;
  border-bottom: 1px solid $primary-border-color;
  text-align: center;
  margin-top: 25px;

  &.cart {
  	text-transform: uppercase;
  	padding-bottom: 30px;
	}

  @include breakpoint(small) {
    padding:35px 0;
    text-align:center;
    border-bottom:none;
  }

  .label {
    font-size:35px;
    font-weight:700;
    font-family: $title-font;
    color: $title-color;

    {% if settings.main-title-uppercase %}
      font-size: calc(35px * 0.875);
      text-transform: uppercase;
    {% endif %}

    a { color: $title-color; }

    @include breakpoint(small) { display: block; white-space:pre-line; }
  }
}

.load-up {
  padding:0 30px;
  font-size:14px;
  color: $light-text-color;

  .featured-collections & {
    padding-bottom:65px;
  }
}

.centering-wrapper {
  // Run through auto-prefixer for ie10 support
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.placeholder-svg {
  min-height: 25vh;

  .slideshow & {
    min-height: 66vh;

    @media screen and (max-width: 720px) {
      min-height: 25vh;
    }
  }
}

.placeholder-background {
  background-color: $placeholder-svg-background;
}

.placeholder-svg {
  background-color: $placeholder-svg-background;
  fill: $placeholder-svg-color;
}

.money.no-price,
.money[data-orig-price="none"] {
  display: none;
}

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

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

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

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

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

.main-footer {
  padding:0 15px;
  margin-top: 65px;

  .footer-message,
  .email {
    color: $light-text-color;
    font-size:14px;

    a {
      color: $light-text-color;
      &:hover { color: hover($light-text-color, true); }
    }
  }

  .connect {
    display: block;
    text-align: center;
    border-top: 1px solid $primary-border-color;
    border-bottom: 1px solid $primary-border-color;
    font-size: 0;

    > li {
      width:33.3333%;
      height:185px;
      border-left: 1px solid $primary-border-color;
      text-align:center;
      display: inline-block;
      vertical-align: top;

      &:first-child { border-left:none; }

      @media screen and (max-width: 910px) {
        width:100% !important;
        height: auto;
        border-left:none;
        border-top: 1px solid $primary-border-color;

        &:first-child { border-top:none; }
      }
    }

    &.module-count-1 > li, &.module-count-2 > li { width:50%; }

    &.module-count-1 > li { border-left: 0; }

    .title {
      font-size: 14px;
      color: $light-text-color;
      @extend .uc-title;

    }

    .contact {

      .title {
        margin-bottom:35px;
      }

    }

    .social {

      .title {
        margin-bottom:35px;
      }

      > ul {
        padding:0 20px;
        font-size: 0;
      }

      .social-link {
        width:26px;
        height: 26px;
        margin: 0 8px 0;
        position: relative;
        border-radius: 4px;
        display: inline-block;

        a {
          font-family: 'icons';
          -webkit-font-smoothing: antialiased;
          line-height: 0px;
          font-size: 43px;
          position: absolute;
          top: 0;
          right: 0;
          left: 0;
          bottom: 0;
          color: $light-text-color;

          &:hover { color: hover($light-text-color, true);  }
        }

        svg {
          width: 26px;
          height: 26px;
          color: $light-text-color;

          &:hover { color: hover($light-text-color, true);  }
        }

        &.twitter   a   { top:11px; font-size:48px; }
        &.facebook  a   { top:12px; }
        &.pinterest a   { top:12px; }
        &.google-plus a { top:14px; font-size:40px; }
        &.instagram a   { top:12px; font-size:40px; }
        &.tumblr a      { top:12px; font-size:45px; }
        &.youtube a     { top:11px; }
        &.vimeo a       { top:12px; }
      }

    }

    .newsletter {

      .title {
        margin-bottom:36px;
      }

      .wrap {
        display: inline-block;
        width:75%;
        max-width: 267px;
        padding-right:65px;
        margin:0 auto;
        position: relative;

        @media screen and (max-width: 910px) { width:210px; }
      }

      .email, .submit {
        outline:none;
        border:none;
        padding:0;
        margin:0;
        font-family: $secondary-header-font;
      }

      .email {
        border: 1px solid $primary-border-color;
        padding:8px 0 8px 8px;
        width: calc(100% - 16px);
        background: transparent;
        font-size:12px;
        font-family: $meta-font;
        color: $light-text-color;
      }

      .submit {
        position: absolute;
        top:-1px;
        right: 0px;
        bottom: 0px;
        width:65px;
        background: $nav-link-color-hover;
        font-size:10px;
        letter-spacing:0.1em;
        color: $background-color;
        text-transform: uppercase;
        text-align:center;
        border-radius: 0px;

        &:hover { background: $nav-link-color;  }
      }

    }

  }

  .sub-footer {
    margin:40px 0;
    font-family: $secondary-header-font;
    font-size:12px;
    color: $theme-detail-link-color;

    @media screen and (max-width: 910px) { text-align:center }

    nav {
      text-align: center;
      margin-top: 50px;
      margin-bottom: 50px;
      padding: 0 30px;

      li {
        display: inline-block;
        margin: 0 10px 10px;
      }

      a {
        color: $theme-detail-link-color;

        &:hover {
          color: $theme-detail-link-color-hover;
        }
      }

      svg {
        width: 25px;
        height: 25px;
        color: $title-color;
      }

      .social-link:not(:last-of-type) { margin-right: 16px; }
    }

    p {
      text-align: center;
      margin:50px 0 30px;

      @media screen and (max-width: 910px) {
        display: inline-block;
        margin:10px 0 15px;
      }

      a       { color: $theme-detail-link-color; }
      a:hover { color: $theme-detail-link-color-hover; }
    }

    nav ~ p {
      margin-top: 20px;
    }

    .payment-options {
      margin: 10px 0 50px;
      display: block;
      text-align: center;

      li {
        display: inline-block;
        width: 55px;
        height: 34px;
        margin: 0 5px;
      }

      svg {
        width: 55px;
        height: 34px;
        fill: $light-text-color;
      }
    }
  }
}

#main-footer {
  line-height: 22px;

  .module-count-0 { border-bottom: 0; }

  .newsletter,
  .contact,
  .footer-menu {
    padding-top: 40px;
    padding-bottom: 40px;
    font-size: 1rem;
    color: $light-text-color;

    @media screen and (max-width: 910px) { padding-top: 40px; }

    li {
      font-size: 13px;
      line-height: 2em;
    }

    a { color: currentColor; }
  }

  .connect {
    display: table;
    width: 100%;

    @media screen and (max-width: 910px) {
      display: block;
    }

    > li.first {
      padding-left: 20px;
      padding-right: 20px;

      @media (min-width: 1000px) {
        padding-left: 40px;
        padding-right: 40px;
      }
    }

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

    @media screen and (max-width: 910px) {
      > li {
        display: block;
        padding-top: 40px;
        padding-bottom: 40px;
        width: 100%;
      }
    }
  }
}

.main-footer-alt {

  .connect {
    .newsletter .wrap { width: 100%; }

    > li:first-of-type {
      border: 0;
    }
  }

  .footer-message + form { margin-top: 2em; }

  .module-count-2 > li { width: 50%; }

  .module-count-3 {
    > li.first { width: 50%; }
    > li:not(.first) { width: 25%; }
  }
}

a { color: $accent-color; }
a:hover { color: $accent-color-hover; }

* { box-sizing: border-box; }
input::-ms-clear { display: block; }

input[type="text"], input[type="email"], input[type="number"], input[type="password"], textarea {
  -webkit-appearance: none;
  border-radius: 0px;
  @include placeholder { color: $lightest-text-color; }
}

.lt-ie9 input[type="password"] {
  font-family:Arial, sans-serif !important; /* Opens Sans has known bug with passwords fields in IE8 */
}

textarea {
  background-color: $background-color;
}

body {
  color: $text-color;
  font-family: $body-font;
  background-color: $background-color;
}

body,
html{
  top: 0;
  left: 0;
  width: 100%;
  height: auto; /* iOS position:fixed; elements fix (not 100%) */
  min-height: 100%;
  overflow-x: hidden;
}

.main-header-wrap {
  position: relative;
  z-index: 5000;

  .main-header {
    position: relative;
  }

  // Sticky header on desktop
  &.main-header--minimal {
    @include breakpoint(large) {
      position: fixed;
      top: 0;
      right: 0;
      left: 0;
      background-color: $background-color;
    }
  }
}

// Minicart

.main-header-wrap .main-header .mini-cart {
  position: absolute;
  top: 35px;
  left: -243px;
  display: none;
  width: 308px;
  cursor: auto;
  background: $background-color;
  border: 1px solid $primary-border-color;
  @include breakpoint(small) { display: none; }

  &.account-enabled {
    left: -147px;

    .arrow {
      left: 175px;
    }
  }

  &.empty-cart {
    .no-items { display: block; }
    .options  { display: none; }
  }

  .arrow, .arrow:before {
    position: absolute;
    top: -8px;
    left: 294px;
    width: 0;
    height: 0;
    margin-left: -7px;
    border-right: 8px solid transparent;
    border-bottom: 8px solid $background-color;
    border-left: 8px solid transparent;

    @include lt-ie9 { display: none; }
  }

  .arrow:before {
    position: absolute;
    top: -1px;
    left: 50%;
    z-index: -1;
    display: block;
    margin-left: -16px;
    border-right: 16px solid transparent;
    border-bottom: 16px solid $primary-border-color;
    border-left: 16px solid transparent;
    content: "";
  }

  .no-items {
    display: none;
    margin: 30px 0 30px;
    font-family: $body-font;
    font-size: 14px;
    font-style: italic;
    text-align: center;
  }

  .item {
    width:100%;
    border-bottom: 1px solid $secondary-border-color;
    &.first {
      border-top: 1px solid $secondary-border-color;
      margin-top: 1.5em;
    }
  }

  .image-wrap, .details {
    float:left;
    margin:20px;
  }

  .image-wrap {
    position: relative;
    width: 97px;

    img { width: 100%; }

    a {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;

      &.overlay {
        box-shadow: inset 0 0 0 1px rgba(0,0,0,0.1);
      }
    }
  }

  .details {
    width: 150px;
    margin-left: 0px;
  }

  .brand {
    @extend .uc-title;
    margin: 0 0 3px 0;
    font-size: 10px;

    a { color: $text-color; }
  }

  .title {
    margin: 0 0 7px 0;
    font-family: $body-font;
    font-size: 14px;

    span {
      color: $lightest-text-color;
      &.quantity { margin-left: 4px; }
    }

    a {
      color: $accent-color;
    }
  }

  .price {
    margin: 0 0 6px 0;
    font-family: $body-font;
    font-size: 12px;
    color: $text-color;
  }

  .variant,
  .property {
    margin: 0;
    font-family: $meta-font;
    font-size: 11px;
    color: $text-color;
  }

  .property {
    margin-top: 2px;
  }

  .options {
    padding: 20px;

    .action-button {
      width: 133px;
      text-align: center;
    }

    .view-cart {
      float: left;
    }

    .checkout {
      float: right;
    }
  }
}

.mini-cart-items-wrap {
  .main-header--minimal & {
    // window height - (cart totals + header height + gutter)
    max-height: calc(100vh - 160px);
    overflow: auto;
  }
}

// Search

.search-wrap {
  position: absolute;
  top: 50%;
  right: 0;
  z-index: 2500;
  display: none;
  width: 100%;
  margin-top: -16px;
  background-color: $background-color;
  border: 1px solid $primary-border-color;
  border-radius: 31px;

  // Left-aligned
  .main-header--normal.main-header--centered & {
    right: auto;
    left: 0;
  }

  // In tools
  .main-header--tools & {
    max-width: 360px;

    @include breakpoint(small) {
      display: none;
    }
  }

  form {
    display: block;
    font-size: 0;
  }

  input {
    display: block;
    width: 100%;
    padding: 8px 38px 8px 12px;
    font-family: $meta-font;
    font-size: 12px;
    color: $light-text-color;

    @include ie10 { padding-top: 9px; }
  }

  .icon-search {
    position: absolute;
    top: 50%;
    right: 12px;
    width: 18px;
    height: 24px;
    margin-top: -13px;
    font-family: "icons";
    font-size: 25px;
    line-height: 26px;
    color: $primary-border-color;
    -webkit-font-smoothing: antialiased;
  }
}

// Currency switcher

.currency-switcher {
  font-family: $meta-font;

  .selected-currency {
    display: inline-block;
  }

  .drop-arrow {
    position: relative;
    top: -1px;
    left: 0;
    margin-left: 4px;
    font-family: "icons";
    line-height: 0px;
    -webkit-font-smoothing: antialiased;

    .compact & {
      display: inline-block;
      font-size: 14px;
    }
  }

  select[name=currencies] {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    color: rgb(0, 0, 0);
    cursor: pointer;
    opacity: 0;
    filter: alpha(opacity=0);
    -webkit-appearance: none;
  }

  .compact & {
    padding-top: 14px;
    font-size: 13px;
    font-weight: 600;
  }
}

// Action links

.action-links {
  position: relative;
  z-index: 2000;
  padding: 0 15px;

  .main-header--normal:not(.main-header--centered) & {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-justify-content: space-between;
        -ms-flex-pack: justify;
            justify-content: space-between;

    &::before {
      -webkit-order: 1;
          -ms-flex-order: 1;
              order: 1;
    }

    @include breakpoint(large) {
      padding-top: 20px;
    }
  }

  @include breakpoint(small) {
    min-width: 0;
  }
}

// Responsive

// Stick mobile menu
@media screen and (max-width: 719px) {
  .header-mobile-stick {
    .compact {
      position: fixed;
      top: 0;
      right: 0;
      left: 0;
      background-color: $background-color;
    }

    .action-links {
      display: none;
    }

    & + * {
      padding-top: 175px;
    }
  }
}

.main-header--minimal {
  .main-header nav.full.multi-line:before { display: none; }

  ~ .page-body-content {
    padding-top: 1px;
  }
}

.header-minimal {
  display: table;
  width: 100%;
  padding-right: 2em;
  padding-left: 2em;
  white-space: nowrap;

  .main-header--centered & {
    table-layout: fixed;
  }

  // Children
  nav.full,
  .store-title,
  .main-header--tools {
    display: table-cell;
    padding: 30px 0;
    vertical-align: middle;

    .main-header--centered & {
      width: 30%;
    }
  }

  nav.full {
    width: 100%;
    text-align: center;

    &.bordered {
      border: 0;
    }

    @media screen and (max-width: 1200px) {
      display: none;
    }

    ul {
      text-align: left;
      white-space: normal;
    }

    .nav-item .label:before { display: none; }
  }

  .main-header--tools {
    @media screen and (max-width: 1200px) {
      display: none;
    }

    .main-header--centered & {
      width: 30%;

      .main-header--tools-left {
        float: none;
      }
    }
  }
}

// Site title / logo

.store-title {
  @extend .uc-title;
  display: block;
  max-width: 48%;
  margin: 30px 0;
  clear: left;
  font-size: 28px;
  letter-spacing: 0.2em !important;

  .main-header--centered & {
    float: none;
    max-width: 100%;
    text-align: center;
  }

  .main-header--minimal & {
    white-space: normal;
  }

  .main-header--minimal:not(.main-header--centered) & {
    float: none;
    width: 25%;
    margin: 30px 0;

    @media screen and (min-width: 1201px) {
      padding-right: 20px;
    }

    @media screen and (max-width: 1200px) {
      width: 100%;
      text-align: center;
    }
  }

  @include breakpoint(small) {
    width: 100%;
    max-width: 100%;
    margin: 30px 0;
    font-size: 23px;
    text-align: center;
  }

  @include breakpoint(tablet) {
    font-size: 21px;
  }

  img {
    display: inline-block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 200px;
  }

  a {
    display: inline-block;
    color: $logo-link-color;
    &:hover { color: $logo-link-color-hover; }
  }
}

// Header tools

.main-header--tools {
  position: relative;
  -webkit-order: 2;
      -ms-flex-order: 2;
          order: 2;
  float: right;
  max-width: 70%;

  .main-header--centered &,
  .main-header--expanded & {
    float: none;
    width: 100%;
    max-width: none;
    margin-top: 20px;
    margin-bottom: 15px;
  }

  // Hide tools on mobile (except in expanded mode)
  .main-header--normal &,
  .main-header--minimal & {
    @include breakpoint(small) {
      display: none;
    }
  }

  .main-header--minimal & {
    float: none;
    width: 40%;
    text-align: right;
    visibility: visible;
  }
}

.main-header--tools-left {
  display: inline-block;

  .main-header--centered.main-header--minimal & { float: none; }
  .main-header--centered.main-header--normal & { float: left; }
}

.main-header--tools-right {
  display: inline-block;

  .main-header--centered.main-header--normal & { float: right; }
}

.main-header--tools-group {
  width: 100%;
  text-align: right;

  @include breakpoint(mobile-nav) {
    display: none;
  }
}

.main-header--tools {
  .currency-switcher,
  .search,
  .mini-cart-wrap,
  .account-options {
    position: relative;
    display: inline-block;
    margin: 0 10px;
    font-family: $meta-font;
    font-size: 12px;
    color: $header-action-link-color;

    &:hover,
    &.active {
      color: $header-action-link-color-hover;
    }

    &.active {
      z-index: 5000;
    }
  }

  .icon {
    position: absolute;
    top: 0;
    left: 0;
    font-family: "icons";
    line-height: 0;
    -webkit-font-smoothing: antialiased;
  }

  .search {
    .icon {
      top: 8px;
      font-size: 25px;
    }
  }

  .mini-cart-wrap {
    position: relative;
    cursor: pointer;

    .icon {
      top: 5px;
      font-size: 40px;
    }
  }

  .account-options {
    padding-left: 25px;
    margin-right: 0px;

    .icon {
      top: 7px;
      font-size: 27px;
    }
  }
}

.main-header--tools-icon svg {
  width: 25px;
  height: 18px;
  margin: 0 10px;
  vertical-align: bottom;

  .main-header--minimal & {
    display: inline-block;
    width: 1.32em;
    height: 1.32em;
    margin-right: 0.5em;
    vertical-align: middle;
  }
}

// Social links

.main-header .social-links {
  float: left;
  margin: 0;

  .social-link {
    margin-left: 10px;
  }

  svg {
    width: 20px;
    height: 20px;
    color: $header-action-link-color
  }
}


.home-video-embed-wrapper {
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0,0,0,0.8);
  z-index: 9999;
  @include opacity(0);

  @include transition(opacity 0.2s ease-out);

  &.opening {
    display: block;
  }

  &.open {
    @include opacity(1);
  }
}

.home-video-embed {
  width: 100%;
  margin: 0 auto;
  padding: 30px;

  &.centered {
    position: absolute;
    top: 50%;
    padding: 0 30px;
  }

  iframe {
    @include opacity(0);
    @include transition(opacity 0.4s ease-out);
  }

  .fluid-width-video-wrapper iframe {
    @include opacity(1);
  }
}

.home-video .home-module-content {
  position: relative;
}

.home-video-screenshot {
  position: relative;

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

.home-video-content {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  max-width: 640px;
  padding: 0 30px;
  color: white;
  text-align: center;

  @include transform(translate(-50%, -50%));

  .sidebar-enabled & {
    @include breakpoint(large) {
      position: relative;
      top: auto;
      left: auto;
      margin: 0 auto;

      @include transform(translate(0,0));
    }
  }

  @include breakpoint(medium) {
    position: relative;
    top: auto;
    left: auto;
    margin: 0 auto;

    @include transform(translate(0,0));
  }

  .text-color-dark & {
    color: black;
  }

  h2 {
    margin: 30px 0 0;
    color: inherit;
    font-size: 40px;

    .sidebar-enabled & {
      @include breakpoint(large) {
        font-size: 24px;
      }
    }

    @include breakpoint(medium) {
      font-size: 24px;
    }
  }

  p {
    margin-top: 30px;
  }

  .button {
    background: none;
    border: 2px solid white;
    color: white;
  }

  .text-color-dark & .button {
    border-color: black;
    color: black;
  }

  .text-color-dark &,
  .text-color-light & {
    .button {

      .sidebar-enabled & {
        @include breakpoint(large) {
          border: none;
        }
      }

      @include breakpoint(medium) {
        border: none;
      }
    }
  }
}

.home-video-play-button {
  cursor: pointer;

  .text-color-dark & {
    color: black;
  }

  svg {
    width: 55px;
    height: 55px;
    padding: 15px;
    vertical-align: middle;
    background-color: $background-color;
    color: $text-color;
    border-radius: 50%;
  }

  .sidebar-enabled & {
    @include breakpoint(large) {
      display: none;
    }
  }

  @include breakpoint(medium) {
    display: none;
  }

  &.mobile {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    text-align: center;

    @include transform(translate(-50%, -50%));

    .sidebar-enabled & {
      @include breakpoint(large) {
        display: block;
      }
    }

    @include breakpoint(medium) {
      display: block;
    }
  }
}

$navigation-border: $nav-border-color;
$navigation-border-hover: contrast($nav-background-color, 15%);

.main-header nav {
  padding: 0 15px;
  border-top: 1px solid $navigation-border;

  .content-area { padding: 0; }

  &.bordered { border-bottom: 1px solid $navigation-border; }

  &.full {
    @include breakpoint(mobile-nav) { display: none; }
  }

  &.compact {
    display: none;

    @include breakpoint(mobile-nav) { display: block; }
  }
}

.main-header--minimal nav.compact {
  display: none;

  @media screen and (max-width: 1200px) { display: block; }
}

.main-header--centered:not(.main-header--minimal) nav.full > ul {
  text-align: center;
}

// Align left-most link to the left edge of the content, unless
// it has a dropdown
.main-header--normal,
.main-header--expanded {
  &:not(.main-header--centered) .main-header--nav-links {
    margin-left: -23px;

    > li.first.dropdown {
      margin-left: 23px;
    }
  }
}

.main-header nav.full {
  position: relative;
  z-index: 1000;

  &.multi-line {
    text-align: center;

    &::before {
      position: absolute;
      top: 50%;
      right: 0;
      left: 0;
      display: block;
      height: 1px;
      background-color: $primary-border-color;
      content: "";
    }
  }

  &.compress {
    .nav-item {
      > .label {
        padding: 25px 15px;
        font-size: 11px;
      }

      &.dropdown > a,
      &.has-mega-nav > a {
        padding-right: 30px;

        .icon {
          right: 12px;
          line-height: 14px;
        }
      }
    }
  }

  .nav-item {
    position: relative;
    display: inline-block;
    text-align: left;

    > .label {
      @extend .uc-title;
      position: relative;
      display: block;
      padding: 25px;
      font-size: 12px;
      color: $nav-link-color;

      &::before {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        width: 1px;
        background-color: $navigation-border;
        content: "";
      }

      &:hover { color: $nav-link-color-hover; }
    }

    &.last a::before { display: none; }
    &.dropdown { position: relative; }

    &.dropdown > a,
    &.has-mega-nav > a { padding-right: 40px; }

    &.dropdown:hover,
    &.has-mega-nav.active {
      background-color: $nav-background-color;

      > .label {
        color: $nav-link-dropdown-color;

        &::before { background-color: $navigation-border-hover; }

        &::after {
          position: absolute;
          top: 0;
          left: -1px;
          width: 1px;
          height: 100%;
          background-color: $navigation-border-hover;
          content: "";

          .main-header--minimal & { display: none; }
        }
      }

      > .dropdown-wrap { display: block; }
    }

    .icon {
      position: absolute;
      top: 25px;
      right: 22px;
      width: 12px;
      height: 12px;
      font-family: "icons";
      font-size: 16px;
      line-height: 15px;

      @include ie10 { top: 27px; }
      @include lt-ie9 { top: 27px; }
    }

    .dropdown-wrap {
      position: absolute;
      top: 100%;
      left: -1px;
      z-index: 1000;
      display: none;
      width: 198px;
      background-color: $nav-background-color;
      border: 1px solid $navigation-border-hover;

      .main-header--minimal & { left: 0; }

      &.child.right {
        top: 0;
        right: -198px;
        left: auto;
      }

      &.child.left {
        top: 0;
        left: -198px;
      }

      .dropdown-item {
        position: relative;

        &:hover {
          > a .label, > a .icon { @include opacity(1); }
          > .dropdown-wrap { display: block; }
        }

        .icon {
          top: 26px;
          right: 16px;
          font-size: 18px;
        }
      }

      .dropdown-item a {
        display: block;
        padding: 23px 42px 23px 26px;
        font-family: $body-font;
        font-size: 14px;
        border-top: 1px solid $navigation-border;

        .label, .icon {
          @include opacity(0.7);
          color: $nav-link-dropdown-color;
          background-color: $nav-background-color;
        }
      }

      .dropdown-item.first {
        > a { border-top: 0; }
        > .dropdown-wrap { top: -1px; }
      }
    }
  }
}

nav.compact {
  position: relative;

  ul { font-size: 0; }

  .nav-item {
    position: relative;
    display: inline-block;
    width: 33.33333%;
    height: 55px;
    font-family: "icons";
    text-align: center;
    -webkit-font-smoothing: antialiased;

    &.dropdown .icon {
      margin-top: 8px;
      font-size: 27px;
    }

    &.account .icon {
      margin-top: 8px;
      font-size: 27px;
    }

    &.cart {
      .icon {
        margin-top: -5px;
        font-size: 41px;
      }

      .icon-bag,
      .icon-cart {
        width: 25px;
        height: 18px;
      }
    }

    &.search .icon {
      margin-top: 8px;
      font-size: 27px;
    }

    &.cart {
      .count {
        position: absolute;
        top: 14px;
        left: 50%;
        display: block;
        padding: 3px 3px 0;
        margin-left: 4px;
        line-height: 10px;
        background-color: $header-action-link-color;
        border: 1px solid  $background-color;
        border-radius: 12px;

        span {
          position: relative;
          top: -2px;
          padding: 0;
          margin: 0;
          font-family: "Helvetica Neue";
          font-size: 10px;
          color: $background-color;
        }
      }
    }

    > a,
    > div {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      color: $header-action-link-color;
      cursor: pointer;

      span {
        display: block;
        margin-top: 15px;
        text-align: center;
      }

      &::before {
        position: absolute;
        top: 11px;
        right: 0;
        bottom: 11px;
        width: 1px;
        background-color: $navigation-border;
        content: "";
      }
    }

    &.last a::before,
    &.last div::before { display: none; }

    &.active {
      background-color: $nav-background-color;

      > a, > div {
        color: $nav-link-dropdown-color;

        &::before {
          background-color: $nav-link-dropdown-color;

          @include breakpoint(mobile-nav) {
            display: none;
          }
        }
      }

      .arrow { background-color: $nav-link-dropdown-color; }
    }

    .dropdown-wrap {
      display: none;

      &.top {
        position: absolute;
        top: 100%;
        left: 0;
      }
    }
  }

  &.account-enabled,
  &.currency-enabled {
    .nav-item { width: 25%; }
  }

  &.account-enabled.currency-enabled {
    .nav-item { width: 20%; }
  }

  .search-outer-wrap {
    position: absolute;
    top: -5px;
    right: 0;
    bottom: -5px;
    left: 0;
    display: none;
    background: transparent;

    .search-wrap {
      top: 50%;
      right: 8%;
      left: 8%;
      display: block;
      width: auto;
      height: 36px;
    }
  }
}

.mega-nav {
  position: absolute;
  top: -9999px;
  right: 0;
  left: 0;
  z-index: 1500;
  margin-top: 1px;
  overflow: hidden;
  background-color: $nav-background-color;
  box-shadow: 0 1px 0 0 rgba($nav-background-color, 0.2);

  .main-header--minimal & {
    margin-top: -5px;
  }

  .mega-nav-wrap {
    position: relative;
    left: -5px;
    padding: 0;
  }

  .mega-nav-list {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
    -webkit-justify-content: space-between;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }

  .back {
    @include transform(scale(1.05));
    @include opacity(0.7);
    position: absolute;
    top: 47px;
    left: 50%;
    z-index: 5000;
    display: none;
    width: 0;
    height: 0;
    margin-left: -2px;
    border-right: 5px solid transparent;
    border-bottom: 10px solid $nav-link-dropdown-color;
    border-left: 5px solid transparent;

    &:hover {  @include opacity(1); }
  }

  .list {
    display: inline-block;
    -webkit-align-content: stretch;
        -ms-flex-line-pack: stretch;
            align-content: stretch;
    -webkit-flex-grow: 1;
        -ms-flex-positive: 1;
            flex-grow: 1;
    -webkit-flex-shrink: 0;
        -ms-flex-negative: 0;
            flex-shrink: 0;
    padding-right: 15px;
    padding-left: 15px;
    margin-top: 34px;
    margin-bottom: 34px;
    vertical-align: top;
    background-color: $nav-background-color;

    &.one-col {
      width: 100%;

      .list-item {
        width: 150px;
      }
    }

    // Less than perfect ratios required for IE
    &.two-col { -webkit-flex-basis: 45%; -ms-flex-preferred-size: 45%; flex-basis: 45%; }
    &.three-col { -webkit-flex-basis: 28%; -ms-flex-preferred-size: 28%; flex-basis: 28%; }

    .label {
      @extend .uc-title;
      width: 100%;
      padding: 10px 0 24px;
      margin: 0 0 22px;
      font-size: 14px;
      color: $nav-link-dropdown-color;
      border-bottom: 1px solid rgba($nav-link-dropdown-color, 0.15);

      a { color: $nav-link-dropdown-color; }
    }

    .list-item {
      display: inline-block;
      width: 50%;
      padding-right: 10px;
      margin: 0 -4px 14px 0;
      vertical-align: top;

      &.one-column {
        display: block;
        width: 100%;
      }

      a {
        @include opacity(0.7);
        display: inline-block;
        min-width: 100px;
        font-size: 14px;
        color: $nav-link-dropdown-color;
        background-color: $nav-background-color;

        &:hover { @include opacity(1); }
      }

      a.show-more { @include opacity(1); }

      .more-icon {
        position: relative;
        top: -1px;
        margin-left: 6px;
        font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
        font-weight: 100;
      }
    }
  }

  .expanded-list,
  .category-list {
    position: relative;
    display: none;

    .list {
      display: none;
      width: 100%;
      margin-left: 0;

      &.active { display: block; }
    }

    .list-item { width: 150px; }
  }
}

.mobile-dropdown {
  position: relative;
  z-index: 5000;
  display: none;
  margin-top: -2px;
  background-color: $nav-background-color;

  .main-header--minimal & {
    position: absolute;
    top: 100%;
    right: 0px;
    left: 0px;
    max-height: calc(100vh - 58px);
    overflow-y: auto;
  }

  .list {
    &.primary {
      background-color: $nav-background-color;

      > .first {
        padding-top: 10px;
        border-top: 0;
      }
    }

    &.secondary {
      display: none;
      background-color: $mobile-nav-secondary-color;

      .list-item a { background-color: $mobile-nav-secondary-color; }
    }

    &.tertiary {
      display: none;
      background-color: $mobile-nav-tertiary-color;

      .list-item a { background-color: $mobile-nav-tertiary-color; }
    }

    &.quaternary {
      display: none;
      background-color: $mobile-nav-quaternary-color;

      .list-item a { background-color: $mobile-nav-quaternary-color; }
    }

    .list-item {
      width: 100%;
      border-top: 1px solid rgba($nav-link-dropdown-color, 0.05);

      a {
        @extend .uc-title;
        @include opacity(0.7);
        position: relative;
        display: block;
        width: $content-width;
        min-width: $min-width;
        padding: 19px 15px;
        margin: 0 auto;
        font-size: 12px;
        color: $nav-link-dropdown-color;
      }

      .icon {
        //scss-lint:disable UrlFormat
        @include opacity(0.7);
        position: absolute;
        top: 6px;
        right: 0;
        width: 38px;
        height: 38px;
        font-size: 25px;
        line-height: 38px;
        text-align: center;
      }

      .icon::after {
        display: block;
        width: 38px;
        height: 38px;
        overflow: hidden;
        font-size: 25px;
        line-height: 38px;
        color: $nav-link-dropdown-color;
        text-align: center;
        content: "\00d7";
        -webkit-transform: rotate(45deg);
            -ms-transform: rotate(45deg);
                transform: rotate(45deg);
        -webkit-transform-origin: 50% 55%;
            -ms-transform-origin: 50% 55%;
                transform-origin: 50% 55%;
      }

      &.expanded > a .icon::after { -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); }
    }
  }
}

.compact .mobile-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
}

.ir { display: block; border: 0; text-indent: -999em; overflow: hidden; background-color: transparent; background-repeat: no-repeat; text-align: left; direction: ltr; *line-height: 0; }
.ir br { display: none; }
.hidden { display: none !important; visibility: hidden; }
.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }
.invisible { visibility: hidden; }
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }

@media print {
  * { background: transparent !important; color: black !important; box-shadow:none !important; text-shadow: none !important; -webkit-filter:none !important; filter:none !important; -ms-filter: none !important; }
  a, a:visited { text-decoration: underline; }
  a[href]:after { content: " (" attr(href) ")"; }
  abbr[title]:after { content: " (" attr(title) ")"; }
  .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; }
  pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
  thead { display: table-header-group; }
  tr, img { page-break-inside: avoid; }
  img { max-width: 100% !important; }
  @page { margin: 0.5cm; }
  p, h2, h3 { orphans: 3; widows: 3; }
  h2, h3 { page-break-after: avoid; }
}
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }
audio:not([controls]) { display: none; }
[hidden] { display: none; }

html { font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
html, button, input, select, textarea { font-family: sans-serif; color: #222; }
body { margin: 0; font-size: 1em; line-height: 1.4; }

a { text-decoration:none; }
a:focus { outline: none; }
a:hover, a:active { outline: 0; }
abbr[title] { border-bottom: 1px dotted; }
b, strong { font-weight: bold; }
blockquote { margin: 1em 40px; }
dfn { font-style: italic; }
hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }
ins { background: #ff9; color: #000; text-decoration: none; }
mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; }
pre, code, kbd, samp { font-family: monospace, serif; _font-family: 'courier new', monospace; font-size: 1em; }
pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }

q { quotes: none; }
q:before, q:after { content: ""; content: none; }
small { font-size: 85%; }
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }

h1,
h2,
h3,
h4,
h5,
h6 { padding:0; margin:0; }

ul, ol { margin: 0; padding: 0; display:block; list-style:none; }
dd { margin: 0 0 0 40px; }
nav ul, nav ol { list-style: none; list-style-image: none; margin: 0; padding: 0; }

img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; }
svg:not(:root) { overflow: hidden; }
figure { margin: 0; }

form { margin: 0; }
fieldset { border: 0; margin: 0; padding: 0; }

label { cursor: pointer; }
legend { border: 0; *margin-left: -7px; padding: 0; white-space: normal; }
button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; }
button, input { line-height: normal; }
button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; *overflow: visible; }
button[disabled], input[disabled] { cursor: default; }
input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; *width: 13px; *height: 13px; }
input[type="search"] { -webkit-appearance: textfield; box-sizing: content-box; }
input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }
button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }
textarea { overflow: auto; vertical-align: top; resize: vertical; }
input:valid, textarea:valid {  }
input:invalid, textarea:invalid { background-color: #f0dddd; }
input { background:none; outline: none; border:none; }

table { border-collapse: collapse; border-spacing: 0; }
td { vertical-align: top; }

.chromeframe { margin: 0.2em 0; background: #ccc; color: black; padding: 0.2em 0; }

.rte {
  font-size:14px;

  p, blockquote, h1, h2, ul, ol { margin:0 0 20px; }

  p, blockquote, li, a {
    font-size:14px;
    line-height: 22px;
  }

  > table:first-child {
    margin-top:0px;
  }

  > p:first-child .image-wrap {
    margin-top:6px;
  }

  ul, ol {
    padding-left:20px;
  }

  ul { list-style-type: disc; }
  ol { list-style-type: decimal; }
  li { margin: 8px 0; }

  blockquote {
    max-width:70%;
    font-style: italic;
    color: $light-text-color;
    padding-left:20px;
    margin-left:0;
    border-left: 2px solid $secondary-border-color;
  }

  img {
    max-width:100%;
  }

  iframe, object, embed {
    border:0;
    outline:0;
  }

  a {
    color: $accent-color;
    &:hover { color: $accent-color-hover; }
  }

  h1, h2, h3, h4, h5, h6 {
    color: $title-color;
    font-weight:7000;
  }

  h1 { font-size:28px; }
  h2 { font-size:21px; }
  h3 { font-size:18px; margin:0 0 18px;}
  h4 { font-size:16px; margin:0 0 16px;}
  h5 { font-size:14px; margin:0 0 14px;}
  h6 { font-size:12px; margin:0 0 12px;}

  hr {
    width:100%;
    height: 1px;
    margin:40px 0;
    background-color: $secondary-border-color;
    outline: none;
    border:none;

    @include breakpoint(small) { margin:20px 0; }
  }

  .caption {
    font-style: italic;
    font-size:12px;
    color: $light-text-color;
    margin-top:-10px;
  }

  .image-wrap {
    max-width:100%;
    position: relative;
    box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,0.1);
    display: inline-block;

    img,
    svg {
      display: block;
      position: relative;
      z-index:-2;
    }
  }

  table {
    margin:30px 0;
    width:100%;
    border: 1px solid $primary-border-color;

    td, th {
      border: 1px solid $secondary-border-color;
      padding:23px 25px 22px;
    }

    thead td, thead th {
      background-color: $select-background-color;
    }
  }

  .tabs {
    text-align: left;
    display: block;
    width:100%;
    height:42px;
    border-bottom: 1px solid $primary-border-color;
    list-style: none;
    padding:0;
    margin:0;
    white-space: nowrap;

    li {
      width:auto;
      height:40px;
      padding:0;
      margin:0;
      display: inline-block;
      vertical-align: top;

      a {
        display: block;
        height:41px;
        font-family: $meta-font;
        font-size:14px;
        line-height: 42px;
        padding:0 16px;
        color: $accent-color;
        border-top:1px solid transparent;
        border-right:1px solid transparent;
        border-left:1px solid transparent;

        &:hover { color: $title-color; }
      }

      &.active a {
        color: $text-color;
        border-top: 1px solid $primary-border-color;
        border-left: 1px solid $primary-border-color;
        border-right: 1px solid $primary-border-color;
        background-color: $background-color;
        height: 42px;
        @include border-top-radius(4px);
      }
    }


  }

  .tabs-content {
    text-align: left;
    display: block;
    width:100%;
    height:auto;
    position: relative;
    list-style: none;
    padding:0;
    margin:0;
    overflow: hidden;

    > li {
      display: none;
      margin: 30px 0 20px;
      &.active { display:block; }
    }
  }

}

.column-title {
  display: none;
}

table.mobile-layout {
  border-bottom: none;

  .column-title {
    font-weight: 700;
    width: 114px;
    padding-right: 23px;
    display: inline-block;
  }

  thead {
    display: none;
  }

  tr td {
    width: 100%;
    display: block;
    text-align: left;
    border-top: 1px solid $primary-border-color !important;
    border-bottom: none;
    border-left: none;
    border-right: none;

    /* < IE 10 fix */
    float:left;
    clear:left;

    &:first-child {
      border-top: none!important;
    }

    &:last-child {
      border-bottom: 1px solid $primary-border-color !important;
    }
  }

  tr:nth-child(even) td {
    background: $select-background-color;
  }
}

.social-links {
  margin-bottom: -8px;
}


.sidebar {
  float:right;
  width:25%;
  padding-left:3%;

  @include breakpoint(small) {
    width:100%;
    margin-top:45px;
    margin-bottom:10px;
    padding-left:0px;
  }

  .module {
    border-top: 1px solid $secondary-border-color;
    padding:25px 0;

    &.first { padding-top:0; border-top:none; }

    > label {
      display: block;
      margin-bottom:22px;
      font-size:14px;
      color: $title-color;
      cursor:auto;
      @extend .uc-title;
    }
  }

  .recent-posts {
    .post {
      margin:14px 0;
      &.first { margin-top:0px; }
      &.last { margin-bottom:0px; }
    }
    .title {
      font-size:14px;
      color: $title-color;
      margin-bottom:6px;
      display: inline-block;

      &:hover { color: $accent-color; }
    }
    .date {
      display: block;
      font-size:12px;
      color: $light-text-color;
      @extend .uc-title;
    }
  }

  .tags-list {
    .tag {
      margin:12px 0;
      a {
        font-size: 14px;
        color: $title-color;

        &:hover { color: $accent-color; }
      }
      .count {
        font-size:12px;
        color: $light-text-color;
        margin-left:5px;
        @extend .uc-title;
      }

      &:hover .count { color: hover($light-text-color, true); }
    }
  }

  .twitter {

    .tweets {
      margin-bottom:20px;
    }

    .tweet {
      margin-top:22px;
      &:first-child { margin-top:0px; }
    }

    .text {
      font-style: italic;
      font-size:14px;
      line-height: 22px;
      margin:0;

      a { color: $accent-color; }
    }

    .date {
      font-size: 12px;
      color: $light-text-color;
      margin-top:14px;
      display: inline-block;
      @extend .uc-title;
    }

    .follow-us  {
      font-size:14px;
    }

  }

}
.breadcrumb-navigation {
  font-family: $meta-font;
  font-size:12px;
  padding:45px 90px 5px 0px;
  @include breakpoint(small) { display:none; }

  a       { color: $accent-color; }
  a:hover { color: $accent-color-hover; }

  .template-collection & { padding: 0; }

  .sep {
    padding-left: 4px;
    padding-right: 4px;
  }
}

.template-list-collections {

  .collections {
    padding-top: 40px;
    padding-bottom: 40px;
    margin-left: -30px;
    font-size: 0;

    @include breakpoint(small) {
      padding-top:10px;
      margin-left: 0;
    }
  }

  .collection-wrap {
    margin-bottom:25px;
  }

  .rte {
    margin-top:20px;
    @include breakpoint(small) {
      display: none;
    }
  }

}

.collections, .featured-collections {
  @include breakpoint(small) { margin-left:0; }

  .collection-wrap {
    display: inline-block;
    vertical-align: top;
    width:33.3333%;
    padding-left:30px;

    @include breakpoint(small) {
      width:60%;
      min-width:290px;
      display: block;
      margin:0 auto 35px;
      padding:0;
    }
  }

  .collection {
    display: inline-block;
    vertical-align: top;
    position: relative;
    width:100%;
    padding-bottom:76.66666667%;
    background-position:50% 50%;
    background-size:cover;
    background-repeat: no-repeat;

    &:hover {
      .label  { visibility:hidden; }
      .browse { visibility:visible; }

      a {
        background: url("{{ 'ie-product-overlay-bg.png' | asset_url }}") repeat 50% 50%;
        background: rgba(208,189,179,0.7);
      }
    }

    @include breakpoint(small) {
      height: 230px;

      &:hover {
        .browse { visibility:hidden;  }
        .label  { visibility:visible; }
        a { background:transparent !important; }
      }
    }

    .label, .browse {
      position:absolute;
      top:50%;
      left:0;
      right:0;
      z-index:1000;
      text-align:center;
      color:#ffffff;
      text-shadow: 0px 0px 10px rgba(0,0,0,0.33);
      margin:0;
      padding:0 30px;
    }

    .label {
      font-size: 21px;
      font-family: $title-font;

      {% if settings.main-title-uppercase %}
        font-size: calc(21px * 0.875) !important;
        text-transform: uppercase;
      {% endif %}

      &.preload { visibility:hidden; }
    }

    .browse {
      visibility:hidden;
      font-size:22px;
      line-height: 30px;
      text-transform: none;
      text-shadow: none;
      font-weight: 700;
      @extend .uc-title;
    }

    a {
      position: absolute;
      top:0;
      right:0;
      bottom:0;
      left:0;
      z-index:2000;
      box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,0.1);
    }

  }

}

.collection-title-header {
  background-size: cover;
  padding-top: 0;

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

  .collection-image {
    width: 100%;
    opacity: 0;
  }

  &.page-title {
    // Fallback styles incase image fails to load
    min-height: 200px;
    overflow: hidden;
  }
}

.collection-header .breadcrumb-navigation {
  text-align: center;
}

.picture-block {
  position: relative;
  background-color: mix($light-text-color, $background-color, 10%);

  .picture-block-wrapper {
    position: relative;
  }

  + .picture-block.home-section {
    margin-top: 0;
  }
}

.picture-block-image {
  background-size: cover;
  background-position: center center;
  height: 100%;

  img,
  svg {
    width: 100%;
    opacity: 0;
  }
}

.picture-block + .content-area .section-border { border-top: 0; }

@media screen and (min-width: 700px) {
  .picture-block-right {
    .picture-block-wrapper {
      position: absolute;
      top: 0;
      right: 50%;
      bottom: 0;
      left: 0;
    }

    .picture-block-image {
      float: right;
      width: 50%;
    }
  }

  .picture-block-left {
    .picture-block-wrapper {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 50%;
    }

    .picture-block-image {
      float: left;
      width: 50%;
    }
  }
}

@media screen and (max-width: 700px) {
  .picture-block-wrapper .centering-wrapper {
    // Override normal centering style on smallest screens
    display: relative;
    position: static;
  }

  .picture-block-content {
    margin: 0 auto;
    padding-top: 50px;
    padding-bottom: 50px;
  }
}

.picture-block-content {
  max-width: 60%;
  text-align: center;
}

.picture-block-heading {
  margin-bottom: 30px;
  color: $title-color;
  font-family: $title-font;
  font-size: 60px;
  line-height: 62px;
  font-weight: 700;

  @media screen and (max-width: 800px) {
    font-size: 45px;
    line-height: 46px;
  }

  @media screen and (max-width: 500px) {
    font-size: 32px;
    line-height: 32px;
  }
}

.picture-block-body {
  color: $light-text-color;
}

@media screen and (max-width: 700px) {
  .picture-block-image { width: 100%; }
}

.picture-block-empty {
  background-color: mix($light-text-color, $background-color, 10%);
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  text-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;

  p { max-width: 75%; }
}

.pagination {
  clear: both;
  padding-bottom:10px;
  text-align: center;

  > li {
    font-family: $meta-font;
    font-size:12px;
    border-left: 1px solid $secondary-border-color;
    padding:3px 0 3px 8px;
    margin-left:8px;
    display: inline-block;

    &:first-child {
      border-left:none;
      padding-left:0;
      margin-left:8px;
    }

    &.previous a, &.next a {
      color: $accent-color;
      &:hover { color: $accent-color-hover; }
    }

    &.position {
      color: $text-color;
    }

  }

  &.jump-to-page {
    li.previous {
      padding-right:8px;
      border-right: 1px solid $secondary-border-color;
    }

    li.jump-to-link {
      border:none;
      margin-left:0;
    }
  }
}

.product-list {
  text-align:left;
  margin-left:-30px;
  font-size: 0;
  @include breakpoint(small) { margin-left:0; }
}

.product {
  width:25%;
  padding-left:30px;
  text-align: left;
  display: inline-block;
  vertical-align: top;

  @include breakpoint(small) {
    display: block;
    width:60% !important;
    min-width:290px !important;
    margin:0 auto 35px;
    padding-left:0px;
    text-align:center;

    &.last { margin-bottom:0px; }
  }

  figure {
    position: relative;
    background-position: center center;
    background-size: cover;

    .product-grid-default & {
      background-image: none !important; // override inline style
    }

    .product-grid-square & { @include ratio(1 1); }
    .product-grid-tall & { @include ratio(4 5); }
    .product-grid-taller & { @include ratio(2 3); }
    .product-grid-wide & { @include ratio(3 2); }

    .product-grid-square &,
    .product-grid-tall &,
    .product-grid-taller &,
    .product-grid-wide & {
      @include breakpoint(small) {
        height: auto;
        padding-bottom: 0;
        background-image: none !important; // override inline style
      }
    }


    > img,
    > svg {
      width:100%;
      vertical-align: top;
      display: none;

      .product-grid-default & {
        display: block;
      }

      @include breakpoint(small) {
        display: block;
      }
    }

    > a {
      position: absolute;
      top:0;
      right:0;
      bottom:0;
      left:0;
      z-index:2000;

      &.with-border {
        box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,0.1);
        @include lt-ie9 { border: 1px solid $primary-border-color; }
      }
    }
  }

  .with-border + .overlay {
    @include breakpoint(small) {
      box-shadow: inset 0px 0px 0px 1px $background-color;
    }
  }

  .overlay {
    @include opacity(0);
    position: absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
    z-index:3001;
    background: url("{{ 'ie-product-overlay-bg.png' | asset_url }}") repeat 50% 50%;
    background: rgba($accent-color, 0.7);
    cursor: pointer;

    @include breakpoint(small) {
      @include opacity(1);
      position: relative;
      background: none;
      cursor: default;
      box-shadow: inset 0px 0px 0px 1px $background-color;
    }

    &:hover {
      @include opacity(1);

      ~ .centering-wrapper,
      ~ .badges-wrapper { display: none; }
    }

    .label {
      position: absolute;
      top:50%;
      left:0;
      right:0;
      text-align:center;
      font-size:14px;
      line-height: 30px;
      padding:0 15px;
      color:#ffffff;
      @extend .uc-title;

      @include breakpoint(small) {
        color: $title-color;
      }
    }
  }

  .quick-shop-content { display:none; }

  .quickshop-trigger {
    @include breakpoint(small) { display: none; }
  }
}

// Sale, New and Sold Out badges on product items
.badge {
  display: inline-block;
  margin-right: 6px;
  padding: 7px 13px;
  font-family: $secondary-header-font;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  color: $background-color;
  letter-spacing: 1px;

  @media screen and (min-width: 1001px) and (max-width: 1250px) {
    font-size: 10px;
    padding: 5px 10px;
  }

  @media screen and (min-width: 719px) and (max-width: 1500px) {
    .product-list-withsidebar & {
      font-size: 10px;
      padding: 5px 10px;
    }
  }
}

.badges-wrapper {
  position: absolute;
  display: inline-block;
  top: 20px;
  left: 20px;
}

.badge-sale { background-color: $badge-color-sale; }
.badge-new { background-color: $badge-color-new; }
.badge-soldout { background-color: $badge-color-soldout; }

.product, .quick-shop-content, #product-area {

  .brand {
    font-size:12px;
    margin:25px 0 0;
    @extend .uc-title;

    @include breakpoint(small) { margin-top:30px; }

    a { color: $light-text-color; }
  }
  .title {
    font-size:16px;
    font-weight: 700;
    color: $title-color;
    font-family: $title-font;
    margin:10px 0 0;

    {% if settings.main-title-uppercase %}
      text-transform: uppercase;
    {% endif %}

    a {
      color: $title-color;
      &:hover { color: $accent-color; }
    }
  }
  .price {
    font-size:14px;
    color: $text-color;
    margin:13px 0 0;

    .label {
      color: $title-color;
      margin-right: 5px;
    }
    .original {
      text-decoration: line-through;
      margin-right: 2px;
    }
  }
}

.no-touch .product-card-alt {
  .product-card-details-overlay {
    max-width: calc(100% - 30px);
    max-height: 100%;
    overflow: hidden;
  }

  .product-card-details {
    display: none;

    @include breakpoint(small) {
      display: block;
      margin-top: 25px;
    }
  }
  .brand { margin-top: 0; }
}

.product-card-details-overlay {
  color: $background-color;
  text-align: center;

  @include breakpoint(small) {
    display: none;
  }

  .title {
    font-size: 22px;
  }

  .title,
  .price,
  a:hover,
  a {
    color: $background-color;

    @include breakpoint(small) {
      color: $title-color;
    }
  }
}

/*
The quick shop product area derives almost all
of it's styles from the product page. Styles can
be found in product.scss
*/

.quick-shop {
  display: none;
  position: fixed;
  top:0;
  bottom:0;
  left:0;
  right:0;
  background: url("{{ 'ie-product-overlay-bg.png' | asset_url }}") repeat 50% 50%;
  background: rgba(0,0,0,0.5);
  z-index:9000;
  overflow: auto;
  -moz-opacity:0;
  opacity:0;
  .product-details-wrapper {
  	.options {
  		.selector-wrapper {
  			float: none !important;
  		}
  	}
  	.description {
  		padding-top: 0;
  	}
	}
}

.quick-shop-modal {
  width:72%;
  min-width: 690px;
  max-width: 1028px;
  padding:15px;
  margin:0 auto;
}

.quick-shop-content {
  background: $background-color;
  padding:42px 30px 65px;
  box-shadow: 0px 0px 0px 1px rgba(0,0,0,0.2);

  .product-details-wrapper {
    .header {
      padding-bottom: 26px !important;
      position: relative;

      .close-modal {
        font-family: 'icons';
        font-size: 3em;
        -webkit-font-smoothing:antialiased;
        line-height: 0px;
        position: absolute;
        top: -28px;
        right: -30px;
        color: #ccc;
        cursor: pointer;
      }

      .title {
        font-size:28px !important;
        margin:8px 0 15px !important;
      }
    }

    .rte .image-wrap img {
      z-index: 1;
    }

    .go-to-product span {
      font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
      position: relative;
      top:-1px;
    }
    .error-wrap {
      font-size:14px;
      font-style:italic;
      color: $accent-color;
    }
  }
}

#shipping-calculator {
  padding-top:40px;
  border-top: 1px solid $primary-border-color;

  .wrapper-setup {
    width:40%;
    float:left;

    @include breakpoint(small) { width:100%; }

    p {
      margin:25px 0;
      &:first-child { margin-top:0; }
    }

    label, select {
      display: inline-block;
    }

    label {
      width:50%;
      font-size: 14px;
      text-align: right;
      padding-right:30px;
      cursor:auto;

      @include breakpoint(small) {
        width:100%;
        text-align:left;
        display: block;
        padding-right: 0px;
        margin-bottom:15px;
      }
    }

    #address_country, #address_province, #address_zip {
      width:50%;

      @include breakpoint(small) {
        width:100%;
      }
    }

    .pxuSexyDropWrapper {
      width:50% !important;
      @include breakpoint(small) { width:100% !important; }

      #address_country, #address_province {
        width:100%;
      }
    }

    .input-wrap {
      width:50%;
      float:right;

      @include breakpoint(small) {
        width:100%;
        margin-top:10px;
        .action-button { width:100%; }
      }
    }
  }

  .wrapper-response {
    width:50%;
    float:right;
    font-size: 14px;

    @include breakpoint(small) {
      width:100%;
      margin-top:10px;
    }

    .message {
      font-style: italic;
      margin:0 0 25px;
    }

    .shipping-rates {
      list-style: disc;
      padding-left:20px;
      color: $light-text-color;
    }
  }


}
/*
* * * * * * * * * * * * * * * * * * * * * * * * * * *
ShopPad App: Tracktor
https://apps.shopify.com/tracktor-2
* * * * * * * * * * * * * * * * * * * * * * * * * * */

#tracktorContainer {
  position: relative;
  margin: 0 auto !important;
  padding: 0 15px;
  max-width: 1030px;
  width: 84% !important;

  .signedby {
    margin-bottom: 10px;
  }
}
#tracktorOrderDetails {
  h1 {
    font-family: $title-font;
    color: $title-color;
  }
  p {
    color: $text-color;
  }
}
#tracktor.themeDark #tracktorOrderStatus div,
#tracktor.themeLight #tracktorOrderStatus div {
  background-color: $background-color !important;
  box-shadow: 0 0 0 1px $primary-border-color !important;
}
#tracktorProgress {

  dt {
    color: $title-color;
  }
  dd {
    color: $text-color;
  }
}
#tracktorLoader span,
#tracktorOrderError p {
  color: $text-color;
}
#tracktorOrderForm {

  h1 {
    color: $title-color;
    font-family: $title-font;
  }
  label {
    position: relative;
    font-size: 14px;
    color: $text-color;
    margin-bottom: 5px;
    width: 100%;
    display: inline-block;
  }
  input {
      box-sizing: border-box;
      width: 100%;
      color: $light-text-color;
      font-size: 12px;
      padding:8px 10px;
      font-family: $meta-font;
      background-color: $background-color;
      border: 0;
      border-radius: 4px;
      box-shadow: 0 0 0 1px $primary-border-color;
      -webkit-appearance: none;
      -moz-appearance: none;
      -ms-appearance: none;
      -o-appearance: none;
      appearance: none;
      outline: none;
  }
  #tracktorTrack {
    font-family: $secondary-header-font;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.1em;
    color: $button-text-color;
    background-color: $accent-color;
    padding: 9px 14px;
    text-transform: uppercase;
    cursor: pointer;
    border-radius: 4px;
    display: inline-block;
    border: 0;

    &:hover {
      background-color: $accent-color-hover;
      color: $button-text-color;
    }
  }
}

#tracktorOrderStatus {

  h1 {
    color: $title-color;
  }
}
@media screen and (max-width: 797px) {
  #tracktor.themeDark #tracktorOrderStatus div,
  #tracktor.themeLight #tracktorOrderStatus div {
    height: auto !important;
    background-color: rgba(0, 0, 0, 0) !important;
    box-shadow: none !important;
  }
}


/* * * * * * * * * * * * * * * * * * * * * * * * * * * *
ShopPad App: Bouncer
https://apps.shopify.com/bouncer
* * * * * * * * * * * * * * * * * * * * * * * * * * */

#bouncer_modal_heading {
  font-family: $title-font;
}
#bouncer_modal_subheading,
#bouncer_modal_exit {
  font-family: $body-font;
}
#bouncer_modal_datepicker {

  span {
    position: relative;
    display: inline-block;
    margin: 0 5px;

    &:before {
      content: '';
      display: block;
      position: absolute;
      right: 0;
      top: 0;
      bottom: 0;
      width: 38px;
      background: $primary-border-color;
      border-radius: 0 4px 4px 0;
      pointer-events: none;
    }
    &:after {
      content: '';
      display: block;
      position: absolute;
      top: 14px;
      right: 14px;
      width: 0;
      height: 0;
      border-style: solid;
      border-width: 6px 4px 0 4px;
      border-color: $light-text-color transparent transparent transparent;
      pointer-events: none;
    }
    select {
      box-sizing: border-box;
      width: 100%;
      color: $light-text-color;
      font-size: 12px;
      padding: 8px 48px 8px 10px;
      font-family: $meta-font;
      background-color: $select-background-color;
      border: 0;
      border-radius: 4px;
      box-shadow: 0 0 0 1px $primary-border-color;
      -webkit-appearance: none;
      -moz-appearance: none;
      -ms-appearance: none;
      -o-appearance: none;
      appearance: none;
      outline: none;
    }
  }
}
#bouncer_modal_submit {
  font-family: $secondary-header-font;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: $button-text-color;
  background-color: $accent-color;
  padding: 9px 14px;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: 4px;
  display: inline-block;
  border: 0;

  &:hover {
    background-color: $accent-color-hover;
    color: $button-text-color;
  }
}


/* * * * * * * * * * * * * * * * * * * * * * * * * * *
ShopPad App: Uploadery
https://apps.shopify.com/uploadery
* * * * * * * * * * * * * * * * * * * * * * * * * * */

#uploadery-container {
  margin-bottom: 20px;

  &:empty {
    display: none !important;
  }
  &.side-labels {

    label > div {
      display: inline-block;
      min-height: 30px;
      position: absolute;
      top: 0;
      left: 74px;
      width: 50%;
      padding-top: 0;
      margin-top: 0;

      @include breakpoint(small) {
        display: block;
      }

      input {
        left: 0;
        top: 10px;
        width: 100%;
      }
    }
    input {
      position: absolute;
      top: 0;
      left: 74px;
      width: 50%;

      @include breakpoint(small) {
        position: relative;
        top: auto;
        left: auto;
        width: 100%;
      }
    }
  }
  form {
    display: inline-block;
    width: 100%;
    padding-top: 12px;
    margin-bottom: 20px;
    box-shadow: 0 -1px 0 0 $secondary-border-color;
    background-color: inherit;
  }
  label {
      position: relative;
      font-size: 14px;
      color: $text-color;
      width: 100%;
      display: inline-block;
      overflow: hidden;
      min-height: 40px;

      .spb-fileupload {
        margin-top: 5px;
      }
  }
  input[type=file] {
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    -o-appearance: none;
    appearance: none;
    outline: none;
    font-size: 14px;
    color: $text-color;

    &::-webkit-file-upload-button {
      font-size: 14px;
      color: $text-color;
      font-family: $meta-font;
      background-color: $background-color;
      border: 1px solid $primary-border-color;
      border-radius: 4px;
      color: $light-text-color;
      box-sizing: border-box;
      padding: 4px 6px;
      outline: none;
    }
  }
  .uploaderyProgressBar {
    max-width: 200px;
    display: inline-block;
  }
}


/* * * * * * * * * * * * * * * * * * * * * * * * * * *
ShopPad App: Infinite Options
https://apps.shopify.com/custom-options
* * * * * * * * * * * * * * * * * * * * * * * * * * */

#infiniteoptions-container {

  &:empty {
    display: none !important;
  }

  &.side-labels > div {

    > label {
      width: 54px;
      margin-right: 20px;
      float: left;
      text-align: right;

      @include breakpoint(small) {
        width: 100%;
        float: none;
        text-align: left;
      }
    }
    > span {
      width: 50%;

      @include breakpoint(small) {
        width: 100%;
      }
    }
  }

  > div {
    margin-bottom: 20px;
    display: inline-block;
    width: 100%;
    padding-top: 12px;
    border-top: 1px solid $secondary-border-color;

    > label {
      font-size: 14px;
      color: $text-color;
      margin-bottom: 5px;
      width: 100%;
      display: inline-block;
    }
    > span {
      width: 100%;
      display: inline-block;

      label {
        /* radio button labels */
        font-size: 14px;
        color: $text-color;
        margin-bottom: 5px;
        width: 100%;
        display: inline-block;
        vertical-align: middle;
        cursor: pointer;
        position: relative;

        input[type=radio] {
          float: left;
          margin-right: 10px;
          display: inline-block;
          background-color: $background-color;
          box-shadow: 0 0 0 1px $primary-border-color;
          width: 20px;
          height: 20px;
          border-radius: 10px;
          -webkit-appearance: none;
          -moz-appearance: none;
          -ms-appearance: none;
          -o-appearance: none;
          appearance: none;
          outline: none;

          &:checked:after {
            content: '';
            position: absolute;
            width: 10px;
            height: 10px;
            background-color: $light-text-color;
            border-radius: 10px;
            top: 5px;
            left: 5px;
          }
        }
      }
    }
  }
  .spb-select {
    position: relative;

    &:before {
      content: '';
      display: block;
      position: absolute;
      right: 0;
      top: 0;
      bottom: 0;
      width: 38px;
      background: $primary-border-color;
      border-radius: 0 4px 4px 0;
      pointer-events: none;
    }
    &:after {
      content: '';
      display: block;
      position: absolute;
      top: 14px;
      right: 14px;
      width: 0;
      height: 0;
      border-style: solid;
      border-width: 6px 4px 0 4px;
      border-color: $light-text-color transparent transparent transparent;
      pointer-events: none;
    }
    select {
      box-sizing: border-box;
      width: 100%;
      color: $light-text-color;
      font-size: 12px;
      padding: 8px 10px;
      font-family: $meta-font;
      background-color: $select-background-color;
      border: 0;
      border-radius: 4px;
      box-shadow: 0 0 0 1px $primary-border-color;
      -webkit-appearance: none;
      -moz-appearance: none;
      -ms-appearance: none;
      -o-appearance: none;
      appearance: none;
      outline: none;
    }
  }
  input[type=text],
  input[type=number],
  input[type=url],
  input[type=password],
  input[type=email],
  textarea {
    box-sizing: border-box;
    width: 100%;
    color: $light-text-color;
    font-size: 12px;
    padding: 8px 10px;
    font-family: $meta-font;
    background-color: $background-color;
    border: 0;
    border-radius: 4px;
    box-shadow: 0 0 0 1px $primary-border-color;
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    -o-appearance: none;
    appearance: none;
    outline: none;
  }
  input[type=number]::-webkit-inner-spin-button,
  input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }
  textarea {
    min-height: 75px;
  }
  fieldset {
    border: 0;

    label {
      font-size: 14px;
      color: $text-color;
      margin-bottom: 5px;
      width: 100%;
      display: inline-block;
    }
    input[type=checkbox] {
      float: left;
      margin-right: 10px;
      display: inline-block;
      background-color: $background-color;
      box-shadow: 0 0 0 1px $primary-border-color;
      width: 20px;
      height: 20px;
      border-radius: 4px;
      -webkit-appearance: none;
      -moz-appearance: none;
      -ms-appearance: none;
      -o-appearance: none;
      appearance: none;
      outline: none;

      &:checked:after {
        content: '\2713';
        position: absolute;
        width: 20px;
        height: 20px;
        color: $light-text-color;
        top: 0;
        left: 0;
        text-align: center;
        line-height: 20px;
      }
    }
  }
}


/* * * * * * * * * * * * * * * * * * * * * * * * * * *
ShopPad App: Coin
https://apps.shopify.com/coin
* * * * * * * * * * * * * * * * * * * * * * * * * * */

.main-header {

  #coin-container {
    display: inline-block;
    position: relative;
    float: left;
    overflow: hidden;

    &:empty {
      display: none !important;
    }

    &:after {
      content: '';
      display: block;
      position: absolute;
      top: 8px;
      right: 10px;
      width: 0;
      height: 0;
      border-style: solid;
      border-width: 6px 4px 0 4px;
      border-color: $light-text-color rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
      pointer-events: none;
    }
    label {
      font-size: 12px;
      color: $header-action-link-color;
      font-family: "Open Sans",sans-serif;
    }
    select {
      display: inline-block;
      width: auto;
      background-color: transparent;
      border: 0;
      font-size: 12px;
      color: $header-action-link-color;
      margin: 0 0 0 10px;
      padding-right: 25px;
      -webkit-appearance: none;
      -moz-appearance: none;
      -ms-appearance: none;
      -o-appearance: none;
      appearance: none;

      &::-ms-expand {
        display: none;
      }
    }
  }
}
.mobile-dropdown {

  #coin-container {
    position: relative;
    display: block;
    width: 100%;
    min-width: $min-width;
    overflow: hidden;
    min-height: 1px;

    &:empty {
      display: none !important;
    }

    &:after {
      content: '';
      display: block;
      position: absolute;
      bottom: 22px;
      right: 13%;
      width: 0;
      height: 0;
      border-style: solid;
      border-width: 6px 4px 0 4px;
      border-color: #fff rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
      pointer-events: none;
    }
    select {
      display: block;
      width: $content-width;
      min-width: $min-width;
      background-color: transparent;
      border: 0;
      font-size: 12px;
      color: #fff;
      margin: 0 auto;
      padding: 19px 15px;
      @extend .uc-title;
      -webkit-appearance: none;
      -moz-appearance: none;
      -ms-appearance: none;
      -o-appearance: none;
      appearance: none;
      font-size: 16px;

      &::-ms-expand {
        display: none;
      }
    }
    label {
      font-size: 12px;
      color: rgba(255,255,255,.5);
      @extend .uc-title;
      display: block;
      width: $content-width;
      min-width: $min-width;
      margin: 0 auto;
      padding: 19px 15px;

      select {
        margin: 0;
        padding: 0;
        width: 100%;
        min-width: 100%;
      }
    }
  }
}


.template-404 {

  .content {
    padding-bottom:60px;
  }

  .message {
    width:50%;
    margin:40px 0;

    @include breakpoint(small) {
      width:100%;
      margin-top:0px;
      text-align:center;
    }
  }

}
.customer {

  .empty {
    margin-top:0px;
  }

  .message {
    font-size: 14px;
    font-style: italic;
    color: $light-text-color;
    margin: 20px 0 50px;
  }

  .page-title {
    @include breakpoint(small) {
      border-bottom: 1px solid $primary-border-color;
    }
  }

  .back-link {
    font-family: $meta-font;
    font-size: 12px;
    color: $light-text-color;
    margin-bottom:20px;
    display:none;
    @include breakpoint(small) { display: inline-block; }
  }

  .header-link {
    float:right;
    margin-top:20px;
    font-size:12px;
    color: $light-text-color;
    @extend .uc-title;

    @include breakpoint(small) {
      float: none;
      margin-top:25px;
      display: inline-block;
    }
  }

  .account-form {
    width:38%;
    padding:25px 0 100px;
    @include breakpoint(small) {
      width:100%;
      padding:10px 0 55px;
      text-align: center;
    }

    .error-message {
      height: auto;
      margin:0 0 25px;
      text-align:center;
      width:100%;

      @include breakpoint(small) { margin-top:25px; }

      span {
        margin-top: 12px 0;
        display: inline-block;
      }
    }

    .field-wrap {
      margin-top:20px;
      &.author { margin-top:0; }

      label {
        cursor: auto;
        display: block;
        font-size:14px;
        margin-bottom: 12px;
        @include breakpoint(small) { text-align: left; }
      }

      .field {
        width:100%;
      }

      textarea {
        min-height: 210px;
      }

    }

    .submit-button {
      margin-top:30px;
      padding:10px 14px 9px;

      @include breakpoint(small) {
        width:100%;
        margin-top:35px;
      }
    }

    .helper {
      margin: 0 0 8px 15px;
      font-size: 12px;
      font-family: $meta-font;
      color: $light-text-color;
      display: inline-block;
      vertical-align: bottom;

      @include breakpoint(small) {
        margin:30px 0 0;
      }
    }

  }

  .table {
    width:100%;
    border: 1px solid $primary-border-color;

    th {
      background: $select-background-color;
      padding:22px 0;
      font-size: 14px;
      font-weight: 400;
      text-align: left;

      &.first { padding:22px 0px 22px 30px; }

      @include breakpoint(small) { display:none; }
    }

    td {
      padding:32px 30px 32px 0;
      border-top: 1px solid $primary-border-color;
      font-size:14px;
      vertical-align: middle;
      position: relative;

      &.first { padding:32px 30px; }

      &:before {
        display: none;
        width: 25%;
        margin-right:20px;
        color: $light-text-color;
        text-align: right;
      }

      @include breakpoint(small) {
        display: inline-block;
        vertical-align: top;
        border-top:none;

        &.first { border-top: 1px solid $primary-border-color; }
        &:before {
          display: inline-block;
          vertical-align: top;
        }
      }

    }

  }

}

.customer.account {

  .content-wrap {
    margin:50px 0 85px;
    min-height: 200px;
  }

  .title {
    display: block;
    font-size: 14px;
    margin-bottom: 20px;
    @extend .uc-title;

    @include breakpoint(small) { text-align:center; }
  }

  .account-info, .order-history {
    float:left;
    @include breakpoint(small) { float:none; }
  }

  .account-info {
    font-size: 14px;
    width: 30%;
    padding-right: 30px;

    @include breakpoint(small) {
      width:100%;
      padding-right:0px;
      margin-bottom:40px;
      text-align: center;
    }

    .name, .email, .address, .city, .country, .view-addresses { display:block; }

    .name {
      font-weight: 700;
      color: $title-color;
      font-family: $title-font;
      margin-bottom:12px;

      {% if settings.main-title-uppercase %}
        font-size: calc(14px * 0.875) !important;
        text-transform: uppercase;
      {% endif %}
    }

    .email {
      margin-bottom:25px;
      a {
        color: $accent-color;
        font-size:12px;
      }
    }

    .address, .city, .country {

    }

    .address-wrap {
      margin-bottom:25px;
    }

    .view-addresses {
      font-family: $meta-font;
      font-size: 12px;
      color: $light-text-color;
    }

  }

  .order-history {
    width:70%;
    @include breakpoint(small) { width: 100%; }
  }

  .table.orders {

    .order-number {
      width:31.25%;

      a {
        color: $accent-color;
        font-size:16px;
      }

      .date {
        font-family: $meta-font;
        font-size:12px;
        color: $light-text-color;
        display: inline-block;

        @include breakpoint(small) { display:inline; }
      }

      &:before { content:'Order' }
    }

    .payment-status {
      width:25%;
      &:before { content:'Payment' }
    }

    .fulfillment-status {
      width:25%;
      &:before { content:'Filled?' }
    }

    .total {
      width:18.75%;
      color: $title-color;
      &:before { content:'Total' }
    }

    @include breakpoint(small) {
      .order-number, .payment-status, .fulfillment-status, .total {
       width:100%;
       padding:12px 12px 12px 30px;
     }
     .first { padding-top:30px; }
     .last { padding-bottom:30px; }
   }
 }

}

.customer.addresses {
  padding-bottom:80px;
  @include breakpoint(small) { padding-bottom:50px; }

  .address-list {
    width:75%;
    padding:15px 0 0px;

    @include breakpoint(small) {
      width:100%;
      padding-top:0;
      text-align:center;
    }

    .list li {
      padding:35px 0;
      border-bottom: 1px solid $secondary-border-color;

      &.last { padding-bottom:40px; }
    }

    .name {
      font-size:14px;
      font-weight: 700;
      color: $title-color;
      font-family: $title-font;
      margin:0 0 25px;

      {% if settings.main-title-uppercase %}
        font-size: calc(14px * 0.875) !important;
        text-transform: uppercase;
      {% endif %}

      .default {
        font-size: 12px;
        font-weight:400;
        color: $light-text-color;
        margin-left:2px;
      }
    }

    .address-1, .address-2, .address-3 {
      font-size:14px;
      margin:3px 0;
    }

    .action {
      display: block;
      margin-top:25px;

      a {
        font-family: $meta-font;
        font-size: 12px;
        color: $light-text-color;

        &:first-child { margin-right:15px; }
      }
    }
  }

  .add-new {
    display: block;
    font-size:14px;
    color: $accent-color;
    margin-top:45px;
    @include breakpoint(small) { text-align:center; }
  }

  .add-address {
    margin-top:45px;
    padding-top:40px;
    width:75%;
    border-top: 1px solid $primary-border-color;
    @include breakpoint(small) { width:100%; }

    &.new-user {
      display: block !important;
      padding-top:0;
      border-top:0;
    }
  }

  .edit-add-address {
    @include breakpoint(small) {
      text-align:left;
    }

    .wrap {
      width:75%;
      margin-bottom:22px;

      @include breakpoint(small) {
        width:100%;
      }

      > label {
        display: inline-block;
        font-size:14px;
        margin-bottom:12px;
      }
      .field {
        display: block;
        width:100%;
      }
      .styled-select, .pxuSexyDropWrapper {
        display: block;
        width:330px;
        height:32px;

        @include breakpoint(small) {
          width:100%;
        }
      }
      .styled-select {
        top:5px;
      }
    }
    .default-wrap {
      font-family: $meta-font;
      font-size:12px;
      color: $light-text-color;
      margin:35px 0 45px;

      input, span {
        display: inline-block;
      }

      input {
        margin-right:4px;
      }
    }
    .submit-wrap {
      span {
        font-family: $meta-font;
        color: $light-text-color;
        font-size:12px;
        margin-left:15px;

        a { color: $text-color; }
      }

      @include breakpoint(small) {
        text-align: center;
        .action-button {
          width:100%;
        }
        span {
          display: block;
          margin:25px 0 15px;
        }
      }
    }
  }

}

/* Both blog and article template */
.template-blog, .template-article {

  .content-wrap {
    padding-top:40px;
    padding-bottom:80px;
    @include breakpoint(small) {
      padding-top:0;
      padding-bottom:0;
    }
  }

  .articles {
    float:left;
    width:75%;
    padding-right:3%;

    @include breakpoint(small) {
      width:100%;
      border-bottom: 1px solid $primary-border-color;
      padding-bottom:15px;
      padding-right:0px;
    }

    .meta {
      float:left;
      width: 30%;
      padding-right:6%;
      position: relative;

      @include breakpoint(small) {
        width:100%;
        border-bottom: 1px solid $secondary-border-color;
        margin-bottom:35px;
        padding-right:0px;
      }

      li {
        margin-bottom:28px;
        padding-top:28px;
        border-top: 1px solid $secondary-border-color;

        @include breakpoint(small) {
          border-top:none;
        }

        label, .text, .text a {
          color: $light-text-color;
        }

        label {
          display: block;
          font-size:12px;
          cursor:auto;
          @extend .uc-title;

          a {
            color: $light-text-color;
            &:hover { color: hover($light-text-color, true); }
          }
        }

        .text {
          font-family: $meta-font;
          font-size:12px;

          a:hover {
            color: hover($light-text-color, true);
          }
        }

        &.title {
          display:none;
          @include breakpoint(small) {
            display:block;
            text-align: center;
            border-top: 1px solid $secondary-border-color;
            padding:40px 0 0;
            margin-bottom:25px;
          }

        }

        &.date {
          border-top:0;
          padding-top:0;

          @include breakpoint(small) {
            width:100%;
            text-align: center;
            padding-bottom:35px;
            margin-bottom:0px;
          }

          label { font-size:14px; }
        }

        &.author, &.tags, &.comments { @include breakpoint(small) { display:none; } }

        &.author {
          .avatar-wrap {
            width:54px;
            height: 54px;
            overflow: hidden;
            margin-bottom:15px;
            border-radius: 54px;
          }

          .avatar {
            width:54px;
            @include breakpoint(small) { width:46px; }
          }

        }

        &.tags {
          @include breakpoint(small) {
            float:right;
            padding-right:20px;
            text-align: center;
          }
        }

        &.prev-next-post {
          .label { display:inline; }
          .icon  { display:none;  }

          @include breakpoint(small) {
            height: 0;
            width: 0;
            padding:0;
            margin:0;

            .label { display:none;  }
            .icon  { display:block; }

            .previous, .next {
              position:absolute;
              height:22px;
              width:22px;
              top:50%;
              margin-top:-11px;
              font-family:'icons';
            }

            .next       { left:0; }
            .previous   { right:0; }
            .slash      { display:none; }

            .icon {
              font-family: 'icons';
              font-size:50px;
              color: $secondary-border-color;
              line-height: 16px;
              text-indent:0px;
              text-transform: lowercase;
            }

            .next .icon     { text-indent:2px; }
            .previous .icon { text-indent:-11px; }

          }
        }

        &.share-buttons {
          @include breakpoint(small) {
            display: none;
          }

          .share-wrap {
            width:100%;
            height:42px;
            display: inline-block;
            vertical-align: top;

            > iframe, > div {
              display: inline-block;
              vertical-align: top;
            }

            &.first {
              border-top: 1px solid $primary-border-color;
            }

            &.facebook {
              .fb_iframe_widget span {
                vertical-align: top;
              }
            }
          }

        }

      }

      &.mobile {
        display: none;

        @include breakpoint(small) {
          display: block;
          border-top: 1px solid $secondary-border-color;
          border-bottom:none;
          float:none;
          margin-bottom:0;
          margin-top:10px;
        }

        li.author, li.tags {
          display: none;
          @include breakpoint(small) {
            display:block;
            width:50%;
            margin:0;
            padding:20px 0;

            label {
              margin-top:5px;
            }
          }
          @include breakpoint(phone) {
            width:100%;
            text-align:center;
          }
        }

        li.author {
          @include breakpoint(small) {
            float:left;
            padding-left:20px;

            .avatar-wrap {
              float:left;
              width:46px;
              height:46px;
              margin:0 10px 0 0;
            }

            .avatar {
              width:46px;
            }
          }

          @include breakpoint(phone) {
            float:none;

            .avatar-wrap {
              float:none;
              margin:0 auto 10px;
            }

          }

        }

        li.tags {
          @include breakpoint(phone) {
            padding-top:0px;
          }
        }

        li.share-buttons {
          display: block;
          width:100%;
          padding-top:30px;
          margin-bottom:30px;
          float:left;
          text-align: center;
          border-top: 1px solid $primary-border-color;

          .share-wrap {
            width:auto;
            height: 20px;
            margin:0 8px;
          }
        }

      }
    }

    .article {
      border-top: 1px solid $secondary-border-color;
      padding-top:40px;
      margin-bottom:25px;

      @include breakpoint(small) {
        border-top:none;
        margin:0 0 30px;
        padding:0;
      }

      &.first {
        border-top:none;
        padding-top:0;
      }

      .article-content {
        float:right;
        width:70%;

        @include breakpoint(small) { width:100%; }

        .title {
          display:block;
          @include breakpoint(small) { display:none; }
        }

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

      .article-image {
        margin-bottom: 20px;
      }

      .title {
        margin-top:-3px;
        margin-bottom:30px;
        &, a {
          color: $title-color;
          font-family: $title-font;
          font-size:28px;
          font-weight: 700;
          line-height: 1.2;

          {% if settings.main-title-uppercase %}
            font-size: calc(28px * 0.875) !important;
            text-transform: uppercase;
          {% endif %}
        }

        a:hover {
          color: $accent-color;
        }
      }


    }

  }

  .articles .pagination {
    width:75%;
    float:right;
    display:block;
    @include breakpoint(small) { display:none; }
  }

  .mobile .pagination {
    margin-bottom:45px;
    padding-bottom:0;
    display:none;
    @include breakpoint(small) { display:block; }
  }


}

/* Just the article template */
.template-article {

  .articles {
    .article {
      border-top:none;
      padding-top:0px;
    }

    .comments-wrap {
      border-top: 1px solid $primary-border-color;
      padding-top:40px;
      margin-bottom:45px;

      @include breakpoint(large) {
        width:100%;
        float:right;
        margin-bottom:20px;
      }

      &.no-comments { margin-bottom:35px; }

      .title {
        display: block !important;
        font-size:14px;
        font-weight: 400;
        color: $title-color;
        @extend .uc-title;

        .count {
          color: $light-text-color;
        }
      }

      &.read {
        @include breakpoint(large) { margin-top:20px; }

        .comments {
          margin:35px 0 25px;
        }

        .comment {
          padding:25px 0;
          border-top: 1px solid $secondary-border-color;

          &:first-child {
            padding:0 0 25px;
            border-top:none;
          }

          &.last { padding:25px 0 0; }

          .date {
            display: block;
            font-size:12px;
            color: $light-text-color;
            margin-bottom:10px;
            @extend .uc-title;

            &:hover { color: hover($light-text-color, true); }
          }
          .body p {
            font-size:14px;
            line-height: 22px;
            font-style:italic;
            margin:0 0 20px;
          }
          .author {
            font-family: $meta-font;
            font-size:12px;
            color: $light-text-color;
            width:100%;
            text-align:right;
            margin:25px 0 0;
          }
        }

      }

      &.submit {
        @include breakpoint(small) { margin-bottom:45px; }

        .error-message {
          margin:25px 0;
          text-align:center;

          span {
            margin-top:12px;
            display: inline-block;
          }
        }

        .title {
          margin-bottom:35px;
        }

        .field-wrap {
          margin-top:20px;

          @include breakpoint(large) {
            width:75%;
          }

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

          label {
            cursor: auto;
            display: block;
            font-size:14px;
            margin-bottom: 12px;
          }

          .field {
            width:100%;
          }

          textarea {
            min-height: 210px;
          }

        }

        .submit-button {
          margin-top:30px;
          padding:10px 14px 9px;

          @include breakpoint(small) {
            width:100%;
          }
        }

      }

    }

  }

}

.template-cart {

  .content {
    padding-bottom:65px;
    .page-title {
      .label {
        font-family: 'AvenirNextCondensed';
      }
      &.cart {
        padding-bottom: 10px;
      }
    }
    .related-products {
      .section-title {
        font-family: 'AvenirNextCondensed';
        font-size: 32px;
        font-weight: 700;
        letter-spacing: 1px;
        padding-top: 25px;
        margin-bottom: 25px;
      }
    }
  }

  .table {
    width:100%;
    margin:20px 0 30px;

    @include breakpoint(small) { margin-top:0px; }

    th {
      padding:22px 0;
      font-size: 14px;
      font-weight: 400;
      text-align: left;

      &.first { padding:22px 0px 22px 30px; }

      @include breakpoint(small) { display:none; }
    }

    &, tr, td, tbody {
      @include breakpoint(small) {
        display:block;
        width:100%;
        box-sizing: border-box;
        float:left;
        clear:left;
      }
    }

    td {
      padding:12px 10px 12px 0;
      vertical-align: middle;
      position: relative;

      @include breakpoint(small) {
        display: block;
        border-top:none;
      }

      &.first {
        padding:15px 0;
        @include breakpoint(small) {
          border-top: 1px solid $primary-border-color;
        }
      }

      .image-wrap {
      	img {
      		max-width: 130px;
      	}
    	}

      &.product-item {
        width:42.8%;
        font-size: 0;

        @include breakpoint(small) {
          width: 100%;
          padding: 30px 12px 12px 30px;
        }

        .image-wrap {
          width:25%;
          display: inline-block;
          vertical-align: middle;

          .image {
            width:100%;
            position: relative;

            display: inline-block;
            .outline {
              position: absolute;
              top:0;
              right:0;
              bottom:0;
              left:0;
              border:1px solid rgba(0,0,0,0.1);
            }
            img { width:100%; }
          }
        }

        .wrap {
          font-size: 1em;
          width:75%;
          padding-left:20px;
          padding-right:35px;
          position: relative;
          display: inline-block;
          vertical-align: middle;
        }

        .label {
          display: block;

          &.vendor {
            color: $light-text-color;
            font-size:10px;
            margin-bottom:10px;
            @extend .uc-title;
          }
          &.title {
            margin-bottom:15px;
            a {
              color: $accent-color;
              font-size:16px;
            }
          }
          &.variant {
            font-family: $meta-font;
            font-size: 12px;
          }
        }
      }

      &.price {
        width:17.2%;
        font-size:14px;
        &:before { content:'Price' }

        @include breakpoint(small) {
          width: 100%;
          padding: 12px 12px 12px 30px;
        }
      }

      &.quantity {
        width:17.2%;

        @include breakpoint(small) {
          width: 100%;
          padding: 12px 12px 12px 30px;
        }

        &:before {
          content:'Quantity';
          margin-top:2px;
        }

        .field {
          width:42px;
          text-align: center;
          color: $light-text-color;
          border-width: 2px;

          @include breakpoint(small) {
           padding:3px 0;
           width:25px;
          }
        }
      }

      &.total {
        width: 17.2%;
        font-size:14px;
        color: $title-color;
        &:before { content:'Total' }

        @include breakpoint(small) {
          width: 100%;
          padding: 12px 12px 30px 30px;
        }
      }

      &.remove {
        width:5.6%;

        @include breakpoint(small) {
          position: absolute;
          right: 35px;
          padding: 0;
          width: 13px;
        }

        a {
          display: inline-block;
          vertical-align: middle;
          position: relative;
          top:-2px;
          width:12px;
          height:15px;
          font-family: 'icons';
          color: $secondary-border-color;
          line-height: 10px;
          text-indent:-8px;
          font-size:47px;

          @include breakpoint(small) {
            top: 17px;
          }

          &:hover { color: $primary-border-color; }
        }
      }

      &:before {
        display: none;
        width: 25%;
        margin-right:30px;
        font-size: 14px;
        color: $light-text-color;
        text-align: right;

        @include breakpoint(small) {
          display: inline-block;
          vertical-align: top;
        }
      }
    }
  }

  .item-properties {
    margin-top: 15px;
    font-family: $meta-font;
    font-size: 12px;
  }

  .item-property {
    margin-top: 5px;
  }

  .cart-tools {
    padding-bottom:40px;

    .instructions {
      float:left;
      width:48.5%;

      @include breakpoint(small) {
        display:block;
        width:100%;
        margin-bottom:35px;
      }

      p {
        margin:0 0 15px;
      }

      .field {
        width:100%;
        min-height:86px;
      }
    }

    .totals {
      float:right;
      width:240px;
      @include breakpoint(small) { width:100%; }

      .price {
        font-size:28px;
        color: $title-color;
        margin:0;
      }

      .message {
        font-size: 14px;
        font-style: italic;
        color: $light-text-color;
        margin: 10px 0 25px;
      }

      .checkout {
        width: 100%;
        border-top: 1px solid $secondary-border-color;
        padding-top: 20px;
        margin-top: 30px;

        .action-button {
          color: #ffffff;
          margin-bottom: 10px;

          @include breakpoint(small) {
            width: 100%;
            text-align: center;
          }
        }
      }
    }
  }
}

.cart-update {
  display: none;

  .touch & {
    display: inline-block;
  }
}

.additional-checkout-buttons {
  display: block;

  .additional-checkout-button {
    margin-left: 0 !important;
  }

  > * {
    float: left;
  }
}

// Apple Pay features inline styles: this removes a funny margin
.shopify-apple-pay-button {
  margin-left: 0 !important;
}

.template-collection {

  .content {
    padding-bottom:65px;
    @include breakpoint(small) { padding-bottom:50px; }
  }

  .page-title {
    position: relative;
    white-space: nowrap;

    .label {
      display: inline;
      white-space: normal;

      {% if settings.main-title-uppercase %}
        position: relative;
        top: 4px;
      {% endif %}

      @include breakpoint(small) {
        display: block;
      }
    }

    .tags-wrap {
      display: inline-block;
      vertical-align: top;
      margin-top:18px;

      &.preload { position: absolute; left:-99999px; }

      @include breakpoint(small) {
        margin-top:30px;
      }
    }

    .pxuSexyDropWrapper {
      display:none;
      position: absolute !important;
      right:0;
      top:25px;

      &.show { display: inline-block; }

      @include breakpoint(small) {
        display:block !important;
        position: relative !important;
        right:auto;
        top:auto;
      }

      select {
        top:4px !important;
      }
    }

    .tags {
      display: inline-block;
      vertical-align: top;
      position: relative;
      padding-left:16px;
      margin-left:28px;

      &:before {
        content:'';
        position: absolute;
        left: 0;
        top: -12px;
        bottom: -8px;
        width: 1px;
        background: $secondary-border-color;
      }

      @include breakpoint(small) {
        display:none !important;
      }

      .tag {
        display: none;
        font-size: 14px;
        margin:0 12px;
        &.show { display: inline-block; }

        a { color: $title-color; }
        a:hover { color: $accent-color; }
      }
    }
  }

  .collection-header {
    float: left;
    width: 100%;

    .description {
      text-align: center;
      margin-top:50px;
      margin-left: auto;
      margin-right: auto;
      max-width: 90%;

      @include breakpoint(small) {
        float:none;
        width:100%;
        margin-top:0px;
        padding-right:0px;
        text-align: center;
      }
      @media screen and (min-width: 400px) { max-width: 80%; }
      @media screen and (min-width: 800px) { max-width: 60%; }
      @media screen and (min-width: 1100px ) { max-width: 550px; }
    }

    .pagination {
      float:right;
      text-align: right;

      @include breakpoint(small) { display:none; }
    }
  }

  .product-list {
    float: left;
    width: 100%;
    padding: 50px 0 0;

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

    .product {
      margin-bottom:42px;
      @include breakpoint(small) { margin-bottom:35px; }
    }

    &.row-of-2 .product { width: 50%; }

    &.row-of-3 .product {
      width: 33.3%;
      @media screen and (max-width: 1000px ) { width: 50%; }
    }

    &.row-of-4 .product {
      width: 25%;
      @media screen and (max-width: 1000px) { width: 50%; }
    }
  }

  .product-list-withsidebar {
    float: right;
    width: 80%;

    @media screen and (max-width: 1200px ) {
      &.row-of-3 .product { width: 33.3%; }
      &.row-of-4 .product { width: 50%; }
    }
  }

  .product-list-sidebar {
    padding-top: 50px;
    font-size: 1rem;
    float: left;
    width: 20%;

    a {
      .remove {
        padding-left: 10px;
        color: $light-text-color;
      }

      &:hover .remove {
        color: inherit;
      }
    }

    ul ul {
      margin-left: 8px;
      margin-bottom: 8px;
      font-size: 0.9rem;
    }
  }

  @media screen and (max-width: 700px) {
    .product-list-sidebar,
    .product-list-withsidebar {
      width: 100%;
      padding-bottom: 50px;
    }

    .product-list-sidebar { text-align: center; }
  }

}

.collection-heading-tools {
  padding-top: 50px;
  border-top: 1px solid $primary-border-color;
}

.collection-heading-details {
  margin-top: 30px;
  margin-bottom: 30px;
}

.collection-heading-details,
.collection-title {
  width: 100%;
  margin-top: 40px;
  margin-bottom: 40px;

  .centering-wrapper & { margin: 0; }

  .description {
    margin-right: auto;
    margin-left: auto;
    max-width: 90%;

    @media screen and (min-width: 400px) { max-width: 80%; }
    @media screen and (min-width: 800px) { max-width: 60%; }
    @media screen and (min-width: 1100px ) { max-width: 550px; }
  }

  .rte {
    word-wrap: break-word;
  }
}

.collection-title-header {
  position: relative;
  float: left;
  width: 100%;

  &.page-title .label {
    color: $accent-color;
    font-size: 11vw;
    line-height: 0.825em;
    word-break: break-word;

    @media screen and (max-width: 400px) { font-size: 42px }
    @media screen and (min-width: 1400px) { font-size: 160px }
  }
}

.collection-title {
  .label { margin: 30px 0; }
}

.tools-wrap {
  display: inline-block;
  margin-right: 1em;

  select {
    color: inherit;
    background: none;
    border: 0;
    text-decoration: underline;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
  }

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

  svg { display: none; }
}

.collection-tools-left,
.collection-tools-right {
  width: 50%;
  white-space: nowrap;
}

.collection-tools-left {
  float: left;
  font-family: $meta-font;
  font-size: 16px;
}

.collection-tools-right {
  float: right;
}

.product-list-sidebar {
  font-family: $meta-font;
  font-size: 14px;
  line-height: 25px;

  .collection-sorter {
    label {
      @extend .sidebar-title;
    }

    .sort-dropdown {
      white-space: nowrap;
      display: block;
    }

    select {
      color: inherit;
      margin-top: 1em;
      border: 0;
      background-color: transparent;
      padding-right: 17px;
      margin-right: -17px;
      max-width: 100%;
      cursor: pointer;
      appearance: none;
      -webkit-appearance: none;
      -moz-appearance: none;

      &:focus {
        outline-offset: 10px;
      }
    }

    svg {
      width: 10px;
      height: 6px;
      display: inline-block;
      margin-left: 0;
      vertical-align: middle;
      pointer-events: none;
    }

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

.sidebar-title {
  font-size: 1em;
  text-transform: uppercase;
  font-weight: normal;
  margin-bottom: 1em;

  &:not(:first-child) {
    margin-top: 3em;
  }
}

.product-list-sidebar a { color: inherit; }

.gift-card-template {

  .btn {
    background-color: #58686f;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 1.5em;
    font-size: 0.875em;
    line-height: 1;
    border-radius: 4px;
    display: inline-block;
    vertical-align: baseline;
    zoom: 1;
    *display: inline;
    *vertical-align: auto;
  }

  .btn:hover {
    background-color: #414d53;
  }

  .wrap {
    width: 95%;
    max-width: 540px;
    margin: 0 auto;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    100% {
      opacity: 100;
    }
  }

  @keyframes fadein {
    0% {
      opacity: 0;
    }

    100% {
      opacity: 100;
    }
  }

  header {
    text-align: center;
    padding: 3em 0;
    -webkit-animation: fadein 0.5s ease-in-out both 0.4s;
    animation:fadein 0.5s ease-in-out both 0.4s
  }

  .shop-title {
    font-size: 2.25em;
    font-weight: 600;
    color: #bfbfbf;
    max-width: 300px;
    display: block;
    margin: 0 auto;

    &:hover {
      color: #999999;
    }

    img {
      max-height: 100%;
      margin: 0 auto;
    }
  }

  main {
    -webkit-animation: slideup 0.8s ease-in-out;
    animation: slideup 0.8s ease-in-out;
    padding-bottom: 3em;
  }

  .gift-card-outer-container {
    background-color: #34aadc;
    border-radius: 4px;
    box-shadow:0 0 0 1px rgba(0,0,0,0.1) inset;
    padding: 1em;
    -webkit-animation: container-slide 0.8s ease-in-out;
    animation: container-slide 0.8s ease-in-out;
  }

  .gift-card-inner-container {
    background-color: #fff;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.1);
    border-radius: 2px;
    -webkit-animation: cardslide 0.8s ease-in-out;
    animation: cardslide 0.8s ease-in-out;

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

  .gift-card-header {
    border-bottom: 1px solid #f2f2f2;
    padding: 0.75em;
    display: block;
    overflow: hidden;
    position: relative;

    h2 {
      float: left;
      margin: 0.12em 0;
    }

    .tag {
      float: right;
    }
  }

  .tag {
    background-color: #bfbfbf;
    padding: 0.5em;
    padding-bottom: 0.35em;
    border-radius: 4px;
    font-size: 0.75em;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #fff;
    line-height: 1;

    &.light {
      background: transparent;
      color: #bfbfbf;
      border: 1px solid #d9d9d9;
    }
  }

  .gift-card-holder {
    margin: 0.75em;
    margin-bottom: 1.25em;
    margin-top: 1.25em;
    position: relative;

    .corner {
      display: block;
      width: 47px;
      height: 47px;
      position: absolute;
      z-index: 2;

      &.top-left {
        background: url("/cdn/s/assets/gift-card/corner-top-left-1585103bdd46bf1297b88f31bdfce999.png") 0 0 no-repeat;
        top: -1px;
        left: -1px;
      }

      &.bottom-right {
        background: url("/cdn/s/assets/gift-card/corner-bottom-right-ba899b18631cb91859e186c2cc1c6970.png") 0 0 no-repeat;
        bottom: -1px;
        right: -1px;
      }
    }
  }

  .gift-card {
    position: relative;
    box-sizing: border-box;
    position: relative;

    &:before {
      content:  '';
      position: absolute;
      width: 100%;
      height: 100%;
      box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,0.1);
      border-radius: 10px;
      z-index: 1;
      pointer-events: none;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
      display: block;
    }

    img {
      border-radius: 10px;
      max-width: 100%;
    }
  }

  .gift-card-code-outer {
    position: absolute;
    bottom: 1em;
    text-align: center;
    width: 100%;

    &.medium {
      font-size: 0.875em;
    }

    &.small {
      font-size: 0.75em;
    }
  }

  .gift-card-code-inner {
    display: inline-block;
    vertical-align: baseline;
    zoom: 1;
    *display: inline;
    *vertical-align: auto;
    background-color: #fff;
    padding: 0.5em;
    border-radius: 4px;
    max-width: 450px;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.1);

    strong {
      font-weight: 400;
      font-size: 1.875em;
      text-transform: uppercase;
      border-radius: 2px;
      border: 1px dashed #e5e5e5;
      padding: 0.4em 0.5em;
      display: inline-block;
      vertical-align: baseline;
      zoom: 1;
      *display: inline;
      *vertical-align: auto;
      color: #777;
      line-height: 1;
    }
  }

  .small .gift-card-code-inner {
    overflow: auto;
  }

  .disabled .gift-card-code-inner strong {
    color: #999;
    text-decoration: line-through;
  }

  .gift-card-code-inner span+span {
    margin-left: 0.25em;
  }

  .gift-card-amount {
    position: absolute;
    top: 0;
    right: 0;
    color: #fff;
    font-size: 2.75em;
    padding: 0.4em 0.5em;
  }

  .gift-card-amount.medium {
    font-size: 2.25em;
  }

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

  .tooltip {
    position: relative;

    &:hover .tooltip-container {
      display: block;
    }
  }

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

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

  .tooltip-label {
    display: block;
    position: relative;
    right: -50%;
    border: none;
    border-radius: 4px;
    background: #333;
    background: rgba(51,51,51,0.9);
    color: #fff;
    min-height: 14px;
    font-weight: 400;
    font-size: 0.4em;
    text-decoration: none;
    line-height: 16px;
    text-shadow: none;
    padding: 0.5em 0.75em;
    margin-left: 0.25em;
  }

  .gift-card-instructions {
    font-size: 0.875em;
    text-align: center;
    color: #999;
    margin: 0 0.75em 1.5em;
  }

  .gift-card-qr-code{
    display: block;

    img {
      padding: 1.25em;
      border: 1px solid #f2f2f2;
      border-radius: 10px;
      margin: 0 auto 1.25em;
    }
  }

  .gift-card-actions {
    border-top: 1px solid #f2f2f2;
    padding: 1.25em 0.75em;
    text-align: center;
    position: relative;
    display: block;
    overflow: hidden;
  }

  .action-link {
    font-size: 0.875em;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: #bfbfbf;
    margin-top: 1.75em;
    position: absolute;
    left: 1.25em;
    top: 1.25em;

    &:hover {
      color: #999;

      .ico-16 {
        opacity: 0.4;
      }
    }
  }

  .ico-16 {
    display: inline-block;
    vertical-align: baseline;
    zoom: 1;
    *display: inline;
    *vertical-align: auto;
    width: 17px;
    height: 17px;
    vertical-align: bottom;
    margin-bottom: -1px;
    background-position: 0 0;
    background-repeat: no-repeat;
    margin-right: 0.5em;
    opacity: 0.25;
    transition: opacity 0.3s ease-in-out;

    &.print {
      background-image: url("/cdn/s/assets/gift-card/icon-print-164daa1ae32d10d1f9b83ac21b6f2c70.png");
    }
  }

  footer[role='contentinfo'] {
    padding-bottom: 3em;
    text-align: center;
    -webkit-animation: fadein 0.5s ease-in-out both 0.4s;
    animation: fadein 0.5s ease-in-out both 0.4s;
  }

  .gift-card-apple-wallet-badge {
    display: inline-block;
  }

  .gift-card-apple-wallet-badge-image {
    display: block;
  }

  @media screen and (max-width: 580px){
    body {
      font-size: 12px;
    }

    h2 {
      font-size: 1.5em;
    }

    .gift-card-outer-container {
      padding: 0.5em;
    }

    .tooltip-container {
      top: -65%;
    }

    .gift-card-actions .btn {
      width: 100%;
      padding-left: 0
      ;padding-right: 0;
      font-size: 1.125em;
    }

    .action-link {
      position: relative !important;
      left: auto !important;
      right: auto !important;
      top: auto !important;
      font-size: 1.125em;
      display: none;
    }

    .action-link + .action-link {
      margin-left: 1.5em;
    }
  }

  @media screen and (max-width: 400px){
    h2 {
      font-size: 1.25em;
    }

    .gift-card {
      font-size: 10px;
    }

    .gift-card-holder .corner {
      display: none;

      &.bottom-right {
        background-position: bottom right !important;
      }
    }

    .gift-card-amount strong {
      text-shadow: 2px 2px 0 rgba(0,0,0,0.1);
    }

    .tooltip-container {
      top: -75%;
    }
  }

  @media screen and (max-height: 800px){
    .shop-title {
      max-height: 100px;
    }
  }

  @media screen and (max-height: 750px){
    .shop-title {
      max-height: 80px;
    }

    header {
      padding: 2em 0;
    }

    footer[role='contentinfo'],
    main {
      padding-bottom: 2em;
    }
  }

  @media print{
    @page {
      margin: 0.5cm;
    }

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

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

    body {
      background-color: #fff;
    }

    .gift-card-actions,
    .gift-card-holder .corner,
    .tooltip-container,
    .gift-card:before {
      display: none;
    }

    .gift-card-code-inner strong {
      color: #555;
    }

    .gift-card-amount .tooltip {
      color: #fff !important;
    }

    .shop-title {
      color: #58686f;
    }

    .gift-card-outer-container,
    .gift-card-inner-container,
    .gift-card-code-inner,
    .gift-card:before {
      box-shadow: none;
    }
  }
}

.template-index {

  .slideshow {
    overflow: hidden;
    position: relative;
    transition: height 1s ease;

    &.content-area {
      @include breakpoint(small) {
        padding: 0;
        box-sizing: content-box;
      }

      .slide::before {
        content: none;
      }
    }

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

  .slide {
    width:100%;
    float:left;
    margin-right:-100%;
    overflow: hidden;
    position: relative;
    z-index: 1000;
    text-align: center;
    @include opacity(0);

    &.active { z-index:2000; }

    &::before {
      content: '';
      display: block;
      position: absolute;
      top:0;
      left:0;
      right:0;
      height: 2px;
      background-color: rgba(0,0,0,0.1);
      z-index: 2500;
    }
  }

  .slide .image-wrap {
    position:relative;
  }

  .slide img,
  .slide svg {
    width: 100%;
  }

  .slide {
    .jump-to-slide {
      position: absolute;
      bottom:2px;
      left:10px;
      z-index:6000;
      display: block;
      height:32px;
      max-width:150px;
      overflow: hidden;

      li {
        display: inline-block;
        height: 11px;
        width:11px;
        margin:0 8px;
        background-color:#ffffff;
        background-color:rgba(255,255,255,0.5);
        cursor: pointer;
        border-radius: 11px;

        &.active, &:hover { background-color:rgba(255,255,255,0.7); }
      }
    }

    &.invert .jump-to-slide {
      li {
        background-color:rgba(0,0,0,0.5);
        &.active, &:hover { background-color:rgba(0,0,0,0.7); }
      }
    }

    .prev, .next {
      display: block;
      position: absolute;
      top:50%;
      z-index:3000;
      margin-top:-30px;
      width:60px;
      height:60px;
      cursor:pointer;

      .icon {
        font-family: 'icons';
        font-size:99px;
        color:#ffffff;
        line-height: 62px;
        @include opacity(0.5);

        &:hover { @include opacity(0.75); }
      }

      @include breakpoint(slideshow-special) {
        width:39px;
        height:39px;
        top:auto;
        bottom:1px;

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

    &.invert .icon, &.invert .icon {
      color:#000000;
    }

    .prev {
      left:0;
      @include breakpoint(slideshow-special) { left:auto; right:40px; }
    }

    .next {
      right:0;
    }
  }

  .slide .content-outer-wrap {
    position: absolute;
    left:50%;
    top:0;
    bottom:0;
    width:$content-width;
    max-width:$max-width;

    @include breakpoint(small) {
      position: relative;
      left:0;
      background-color: $accent-color;
      width:100%;
    }
  }

  .slide .mobile-link {
    display: none;
    @include breakpoint(small) {
      display: block;
      position: absolute;
      top:0;
      right:0;
      bottom:0;
      left:0;
      z-index:1000;
    }
  }

  .slide .content-inner-wrap {
    position: absolute;
    left:-50%;
    top:0;
    bottom:0;
    width:100%;

    @include breakpoint(small) { position: static; }
  }

  .slide .content {
    position: absolute;
    text-align: left;
    padding:0 15px;

    @include breakpoint(small) {
      position: static;
      text-align: center;
      padding:20px 15px;
    }

    &.left    { left:0;     }
    &.bottom  { bottom:10%; }
    &.top     { top:10%;    }
    &.center {
      left:0;
      right:0;
      text-align:center;
    }

    &.right {
      right:0;
      text-align:right;
      @include breakpoint(small) { text-align:center; }
    }

    .title {
      font-size: 56px;
      font-weight:700;
      color:#ffffff;
      cursor: default;
      font-family: $title-font;
      text-shadow: 0px 0px 10px rgba(0,0,0,0.33);

      {% if settings.main-title-uppercase %}
        text-transform: uppercase;
        font-size: calc(56px * 0.875) !important;
      {% endif %}

      @include breakpoint(small) {
        font-size:36px;
        white-space: nowrap;
        overflow-x:hidden;
        text-shadow: none;

        {% if settings.main-title-uppercase %}
          font-size: calc(36px * 0.875) !important;
        {% endif %}
      }

      @include breakpoint(phone) {
        font-size: 21px;

        {% if settings.main-title-uppercase %}
          font-size: calc(21px * 0.875) !important;
        {% endif %}
      }
    }

    .tagline {
      font-size: 28px;
      font-weight:400;
      color:#ffffff;
      margin-top:4px;
      cursor: default;
      text-shadow: 0px 0px 10px rgba(0,0,0,0.33);

      @include breakpoint(small) {
        font-size:16px;
        margin-top:10px;
        overflow-x:hidden;
        text-shadow: none;
      }

      @include breakpoint(phone) { font-size:14px; }
    }

    .call-to-action {
      padding:20px;
      line-height: 1.0em;
      position: relative;
      font-size: 15px;
      font-weight: 700;
      letter-spacing: 0.1em;
      color: $button-text-color;
      background-color: $accent-color;
      margin-top:24px;
      display: inline-block;
      @extend .uc-title;

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

      @include breakpoint(small) {
        font-size: 12px;
        margin-top: 0;
        white-space: nowrap;
        padding-bottom: 0px;
      }

      @include breakpoint(phone) {
        font-size:10px;
      }

      .arrow {
        font-family: 'icons';
        font-size: 22px;

        @include breakpoint(small) {
          font-size: 18px;
        }
        @include breakpoint(phone) {
          font-size: 15px;
        }
      }
    }
  }

  .featured-text-container {
    text-align:center;
    padding: 55px 15px 0;

    @include breakpoint(small) {
      padding: 30px 15px 35px;
    }

    &.feature-borders .featured-text {
      padding: 55px 0;
      border-top: 1px solid $primary-border-color;

      @include breakpoint(small) {
        padding: 30px 15px 35px;
      }

      &:first-of-type {
        padding-top: 0;
        border: 0;
      }

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

    h2, h3 {
      display: inline-block;
      width:70%;
      margin:10px 0;

      p {
        margin: 0;
      }
    }

    h2 {
      font-size: 28px;
      font-weight:700;
      color: $title-color;
      font-family: $title-font;
      line-height: 33px;

      {% if settings.main-title-uppercase %}
        text-transform: uppercase;
        font-size: calc(28px * 0.875) !important;
      {% endif %}

      @include breakpoint(small) {
        font-size:21px;

        {% if settings.main-title-uppercase %}
          font-size: calc(21px * 0.875) !important;
        {% endif %}
      }
    }

    h3 {
      display: inline-block;
      font-size: 18px;
      font-weight: 400;
      color: $text-color;
      line-height:29px;

      @include breakpoint(small) {
        font-size:16px;
        line-height: 25px;
      }
    }
  }

  .featured-text + .featured-text {
    margin-top: 30px;
  }

  .feature-borders .featured-text + .featured-text {
    margin-top: 0;
  }

  .featured-collections {
    text-align:center;

    &.first {
      .section-title {
        border-top:0px;
        padding-top:75px;
      }
    }

    .wrap {
      margin-left:-30px;
      font-size:0px;
      @include breakpoint(small) { margin-left:0; }
    }
  }

  .featured-collection {
    text-align: center;

    &.first {
      .section-title {
        border-top:0px;
        padding-top:75px;
      }
    }

    &.multi-row {
      .product {
        margin-bottom: 42px;
      }
    }

    .product-list {
      &.row-of-2 .product { width: 50%; }

      &.row-of-3 .product {
        width: 33.3%;
        @media screen and (max-width: 1000px ) {
          width: 50%;
          margin-bottom: 42px;
        }
      }

      &.row-of-4 .product {
        width: 25%;
        @media screen and (max-width: 1000px) {
          width: 50%;
          margin-bottom: 42px;
        }
      }
    }
  }

  .articles {
    margin-left: -30px;
    font-size: 0;

    @include breakpoint(small) {  margin-left:0; }
  }

  .article {
    display: inline-block;
    vertical-align: top;
    width: 25%;
    text-align: left;
    padding-left: 30px;

    &.first { margin-left:0; }

    @include breakpoint(small) {
      display: block;
      width:60%;
      min-width:290px;
      margin:0 auto 30px;
      margin-bottom:30px;
      padding-left:0px;

      &.first { margin:0 auto 30px; }
      &.last { margin-bottom:0px; }
    }

    .date {
      display: block;
      font-size:12px;
      color: $light-text-color;
      margin-bottom:10px;
      @extend .uc-title;
    }

    .title {
      display: block;
      font-weight:700;
      font-size:16px;
      font-family: $title-font;
      margin-bottom:18px;
      color: $title-color;

      {% if settings.main-title-uppercase %}
        font-size: calc(16px * 0.875) !important;
        text-transform: uppercase;
      {% endif %}

      &:hover { color: $accent-color; }
    }

    .rte {
      color: $text-color;
      font-size:14px;
      line-height:1.6;

      img {
        width:100%;
      }
    }

    .article-image {
      display: block;
      margin-bottom: 20px;
    }
  }
}

.logo-list-container {
  margin: 0 -20px;
}

.logo-list {
  font-size: 0;
  text-align: center;
}

.logo-list-item {
  display: inline-block;
  padding: 10px 20px;
  vertical-align: middle;

  .rows-of-3 & {
    width: 33.333%;
  }

  .rows-of-4 & {
    width: 25%;
  }

  .rows-of-5 & {
    width: 20%;
  }

  .rows-of-3 &,
  .rows-of-4 &,
  .rows-of-5 & {
    @include breakpoint(small) {
      width: 50%;
    }
  }

  .logo-list-item-wrap {
    max-width: 240px;
    margin: 0 auto;
  }

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

.home-section {
  position: relative;
  padding-top: 65px;
  margin-top: 65px;

  .slideshow-sibling-section & {
    margin-top: 0;
  }

  > .section-title {
    padding-top: 0;
  }

  &.has-heading {
    padding-top: 50px;
  }

  &.has-border {
    &::before {
      position: absolute;
      top: 0;
      display: block;
      width: calc(100% - 30px);
      border-top: 1px solid $primary-border-color;
      content: "";
    }

    > .section-title {
      padding-top: 0;
    }
  }

  &.multi-row {
    margin-bottom: -42px; // 42px of product's bottom margins
  }

  &.picture-block,
  &.slideshow:not(.content-area) {
    padding-top: 0;

    &::before {
      display: none;
    }
  }

  &.slideshow.content-area {
    padding-top: 0;
  }
}

.template-index .shopify-section {
  &:not(:first-of-type) {
    .slide::before { display: none; }
  }

  &:first-of-type {
    [data-section-type] > *:first-child {
      margin-top: 0;

      &.slideshow.content-area {
        margin-top: 65px;

        @include breakpoint(small) {
          margin-top: 0;
        }
      }

      &::before {
        display: none;
      }
    }

    .home-video:first-of-type {
      padding-top: 0;
    }
  }
}

.instagram-widget {
  position: relative;
}

.instagram-photos {
  margin: 0 -10px;
  font-size: 0;
  background: url("{{ 'loading.gif' | asset_url }}") no-repeat center;

  &.visible {
    background: none;
  }

  @include breakpoint(small) {
    margin: 0 25px;
  }
}

.instagram-photo {
  opacity: 0;
  visibility: hidden;
  display: inline-block;
  margin: 0 10px;
  width: calc(16.666% - 20px);

  @include breakpoint(tablet) {
    width: calc(33.333% - 20px);
    margin-bottom: 20px;
  }

  @include breakpoint(small) {
    width: calc(33.333% - 20px);
    margin-bottom: 20px;
  }

  @include breakpoint(phone) {
    width: calc(50% - 20px);
    margin-bottom: 20px;
  }

  &:nth-child(n+4) {
    @include breakpoint(tablet) {
      margin-bottom: 0;
    }

    @include breakpoint(small) {
      margin-bottom: 0;
    }

    @include breakpoint(phone) {
      margin-bottom: 20px;
    }
  }

  &:nth-child(n+7) {
    display: none;
  }

  .visible & {
    opacity: 1;
    visibility: visible;
    @include transition(opacity 0.5s ease-out);
  }

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

  .placeholder-svg {
    min-height: auto;
  }
}

.twitter-tweet {
  margin: 0 auto;
  max-width: 60%;
  line-height: 1.375em;
  text-align: center;
  word-wrap: break-word;
  font-size: 18px;

  @media screen and (min-width: 500px) { font-size: 20px; }
  @media screen and (min-width: 900px) { font-size: 22px; }
  @media screen and (min-width: 1200px) { font-size: 24px; }

  img {
    height: 14px;
    vertical-align: sub;
  }

  .tweet-wrap {
    &:nth-child(n+2) {
      display: none;
    }
  }

  .timestamp {
    display: block;
    margin-top: 2em;
    font-size: 12px;
    font-family: $meta-font;
    color: $light-text-color;

    @extend .uc-title;

    .divider { margin: 0 10px; }

    img,
    span[data-scribe='element:name'] {
      display: none;
    }

    @include breakpoint(phone) {
      .divider {
        display: none;
      }

      span[data-scribe='element:screen_name'] {
        display: block;
      }
    }

    [data-scribe="component:author"] {
      display: inline-block;
    }
  }
}

.paused .prev,
.paused .next, {
  opacity: 0;
}

.customer.login {

  #recover-password {
    display: none;
  }

  .secondary-wrap {
    width:100%;
    padding-top:35px;
    margin-top:35px;
    border-top: 1px solid $primary-border-color;

    @include breakpoint(small) {
      text-align:center;

      .action-button {
        width:100%;
      }
    }

    p {
      font-size:14px;
      margin:0 0 20px;
    }

  }

}
.customer.order {

  .content-wrap {
    margin:50px 0 85px;
    @include breakpoint(small) { margin:30px 0 55px; }
  }

  .shipping-info, .order-history {
    float:left;
    @include breakpoint(small) { float:none; }
  }

  .shipping-info {
    font-size: 14px;
    line-height: 22px;
    width: 30%;
    padding-right: 30px;

    @include breakpoint(small) {
      width:100%;
      padding-right:0px;
      margin-bottom:40px;
      text-align: center;
    }

    .shipping-title {
      display: block;
      font-weight: 700;
      color: $title-color;
      font-family: $title-font;
      margin-bottom:10px;

      {% if settings.main-title-uppercase %}
        font-size: calc(14px * 0.875) !important;
        text-transform: uppercase;
      {% endif %}
    }

    .address, .city, .country { display:block; }

    .address-wrap {
      margin-bottom:30px;
    }

  }

  .order-history {
    width:70%;
    @include breakpoint(small) { width: 100%; }

    .table {

      td {
        @include breakpoint(small) {
          width:100% !important;
          padding:12px 12px 12px 30px !important;
        }

        &.first { @include breakpoint(small) { padding-top:30px !important; } }
        &.last  { @include breakpoint(small) { padding-bottom:30px !important; } }

        &.product-item {
          width:46%;

          .wrap, .image-wrap { display: inline-block; }
          .wrap {
            width:75%;
            padding-left:30px;
            @include breakpoint(small) { padding-left:20px; }
          }

          .image-wrap {
            width:25%;
            position: relative;

            img { width:100%; }

            a {
              position: absolute;
              top:0;
              right:0;
              bottom:0;
              left:0;

              &.overlay { box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,0.1); }
            }
          }

          .label {
            display: block;

            &.vendor {
              color: $light-text-color;
              font-size:10px;
              margin-bottom:10px;
              @extend .uc-title;
            }
            &.title {
              margin-bottom:15px;
              a {
                color: $accent-color;
                font-size:16px;
              }
            }
            &.variant {
              font-family: $meta-font;
              font-size: 12px;
            }
          }

        }
        &.price {
          width:18%;
          &:before { content:'Price' }
        }
        &.quantity {
          width:18%;
          font-family: $meta-font;
          font-size:12px;
          color: $light-text-color;
          &:before {
            content:'Quantity';
            font-family: $body-font;
            font-size: 14px;
            color: $light-text-color;
            top:9px;
          }
          span {
            @include breakpoint(small) {
              position: relative;
              top:3px;
            }
          }
        }
        &.total {
          width:18%;
          &:before { content:'Total' }
        }
      }
    }

    .order-totals {
      width:100%;
      @include breakpoint(small) { display:none; }

      ul {
        border-bottom: 1px solid $secondary-border-color;
        padding:30px 0;
        text-align:right;
        font-size:14px;

        &.sub-total { padding:30px 0 35px; }

        li {
          text-align: right;
          padding:10px 0;

          &.order-subtotal { padding-top:0; }
          &.order-tax.last { padding-bottom:0; }

          &.order-total {
            padding:3px 0 5px;
            span { color: $title-color; }
          }
        }

        h2, span { display: inline-block; }

        h2 {
          font-weight: 400;
          font-size: 14px;
        }

        span {
          width:90px;
          text-align: left;
          margin-left: 30px;
        }
      }
    }
  }
}

.template-page, .template-contact {

  .text-content-wrap {
    padding-bottom:80px;
    padding-top:40px;
    @include breakpoint(small) { padding-top:0; padding-bottom:50px; }
  }

  .text-content.has-sidebar {
    float:left;
    width:68.5714%;
    padding-right:30px;

    @include breakpoint(small) {
      width:100%;
      float: none;
      padding-right:0px;
    }
  }

  .sidebar {
    float:right;
    width:31.4286%;
    padding-left:8.5714%;

    @include breakpoint(small) {
      float:none;
      width:100%;
      margin-top:40px;
      padding-top:30px;
      padding-left:0px;
      border-top: 1px solid $primary-border-color;
    }

    .title {
      color: $title-color;
      font-size:14px;
      margin-bottom:30px;
      @extend .uc-title;
    }
  }
}

.template-contact {

  .alert-message {
    margin:0 0 25px;
    text-align:center;
    width:100%;
    height: auto;
    padding: 12px;
    line-height: 1.5em;

    span {
      display: inline-block;
    }
  }

  .field-wrap {
    margin-top: 20px;

    &.author {
      margin-top: 0;

      @include breakpoint(tablet) { margin-top: 20px; }
      @include breakpoint(small) { margin-top: 20px; }
    }

    label {
      cursor: auto;
      display: block;
      font-size:14px;
      margin-bottom: 12px;
    }

    .field {
      width:100%;
    }

    textarea {
      min-height: 210px;
    }

  }

  .submit-button {
    margin-top:30px;
    padding:10px 14px 9px;

    @include breakpoint(small) {
      width:100%;
    }
  }

  .full-width-form {
    width: 50%;

    @include breakpoint(tablet) { width: 75%; }
    @include breakpoint(small) {width: 100%;}
  }

}

// -- Layout -- //
.password-page-background {
  height: 100vh;
  text-align: center;
  background-size: cover;
  background-position: center center;

  .lt-ie9 & {
    height: 100%;
    min-height: 100%;
  }

  .form-title {
    margin-bottom: 15px;
    font-size: 16px;
  }

  div.errors {
    margin-top: 8px;
    margin-bottom: 8px;
  }

  .social-links {
    margin-top: 30px;
    margin-bottom: 30px;
  }

  .social-link:not(:first-child) { margin-left: 1em; }

  svg {
    display: inline-block;
    width: 32px;
    height: 32px;
  }
}

.password-page {
  display: table;
  width: 100%;
  height: 100%;

  .lt-ie9 & {
    min-width: 100%;
    min-height: 100%;
  }
}

.password-page-footer,
.password-page-header {
  display: table-row;
  height: 1px;
}

.password-page-header {
  font-size: 14px;
  text-align: right;
}

.admin-login-modal {
  .lt-ie9 & {
    display: none;
  }
}

.password-page-footer {
  color: $light-text-color;
  font-size: 14px
}

.password-page-content {
  display: table-row;
  width: 100%;
  height: 100%;
  margin: 0 auto;

  h2 {
    font-family: $title-font;
    font-size: 28px;
    font-weight: 700;
    line-height: 33px;
    color: $title-color;
  }
}

.password-page-inner {
  display: table-cell;
  padding: 10px 15px;

  .password-page-content & {
    vertical-align: middle;
  }

  .password-page-header &,
  .password-page-footer & {
    font-size: 95%;
    line-height: 1.2;
    vertical-align: bottom;
  }
}

// -- Page Header -- //
.password-login-text {
  text-align: right;
}

.password-page-logo {
  padding-bottom: 15px;

  .store-title {
    display: block;
    font-size: 28px;
    letter-spacing: 0.2em !important;
    margin: 0;
    @extend .uc-title;

    @include breakpoint(tablet) { font-size:21px; }
    @include breakpoint(small)  {
      font-size: 23px;
      max-width: 100%;
      text-align: center;
    }

    img {
      width: 100%;
      max-width: 480px;

      &.regular-logo {
        display: inline-block;
      }

      &.retina-logo {
        display: none;
        max-height: {{ settings.checkout-logo-height }}px;
      }

      @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
        &.regular-logo {
          display: none;
        }

        &.retina-logo {
          display: inline-block;
        }
      }
    }

    a {
      color: $logo-link-color;
      &:hover { color: $logo-link-color-hover; }
    }
  }
}

// -- Sign up form -- //
.password-page-form-header {
  padding-top: 15px;
  padding-bottom: 15px;
  border-top: 1px solid $primary-border-color;

  &:after {
    content: '';
    display: block;
    max-width: 50px;
    margin: 15px auto 0;
    border-bottom: 1px solid $primary-border-color;
  }
}

.password-page-message {
  margin-top: 1em;
  margin-bottom: 0;
}

// -- Admin Form -- //

.password-page-modal-wrapper {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 9000;
  display: none;
  background: rgba(0, 0, 0, 0.5);
  overflow: auto;
  @include opacity(0);

  .lt-ie9 & {
    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNgOAMAAM8AzbfAeUUAAAAASUVORK5CYII=");
  }
}

.password-page-modal {
  width: 100%;
  max-width: 100%;
  padding: 42px 30px;
  margin: 0 auto;
  background: $background-color;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2);

  @include breakpoint(small) {
    width: 100%;
  }

  @include breakpoint(large) {
    max-width: 415px;
  }

  .header {
    position: relative;
    padding-bottom: 15px;
  }

  .close-modal {
    position: absolute;
    top: -30px;
    right: -15px;
    font-family: 'icons';
    font-size: 3em;
    -webkit-font-smoothing: antialiased;
    line-height: 0;
    color: #ccc;
    cursor: pointer;
  }

  .admin-login {
    font-size: 14px;
    color: $light-text-color;
  }
}

// -- Password Page Forms -- //

.password-page-field-wrap {
  position: relative;
  display: inline-block;
  width: 100%;
  max-width: 350px;
  padding-right: 65px;
  margin: 0 auto;
  border: 1px solid $primary-border-color;

  @include breakpoint(small) {
    width: 100%;
    max-width: 100%;
  }

  .password-page-input,
  .submit {
    padding: 0;
    margin: 0;
    font-family: $secondary-header-font;
    font-size: 10px;
    border: 0;
    outline: none;
  }

  .password-page-input {
    font-size: 16px; // For iOS to avoid needless zooming
  }

  .password-page-input {
    width: 100%;
    padding: 8px 0 8px 8px;
    font-family: $meta-font;
    color: $light-text-color;
    background: transparent;
  }

  .submit {
    position: absolute;
    top: -1px;
    right: -1px;
    bottom: -1px;
    width: 65px;
    letter-spacing: 0.1em;
    color: $background-color;
    text-align: center;
    text-transform: uppercase;
    background: $light-text-color;
    border-radius: 0;

    &:hover { background: hover($light-text-color, true); }
  }
}

#product-area, .quick-shop-content {
  .showcase, .pager, .details { float: left; }

  .showcase, .pager {
    .container {
      margin-bottom:10px;

      @include breakpoint(small) { margin-bottom: 0; }
    }

    .wrap {
      position: relative;
      z-index: 100;

      .overlay {
        position: absolute;
        top:0;
        right:0;
        bottom:0;
        left:0;
        box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,0.1);
        @include transition(box-shadow 200ms);

        @include lt-ie9 { border: 1px solid $primary-border-color; }
      }

      &.active .overlay { box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,0.3); }

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

  }

  .showcase {
    width: 50%;
    padding:0 15px 0 0;

    .container {
      overflow: hidden;
      position: relative;
      width: 80%;
      float: left;

      &.wide {
        width: 100%;
      }

      .spinner {
        position: absolute !important;
        left:50% !important;
        top:50% !important;
        z-index: 50 !important;
      }

      @include breakpoint(small) {
        width:100%;
      }
    }

    @include breakpoint(small) {
      width:100%;
      padding:0;
    }

    .notes {
      float: left;
      width: 100%;

      @include breakpoint(small) { display:none; }
    }
    .notes a {
      font-family: $meta-font;
      font-size:12px;
      color: $light-text-color;
      position: relative;
      padding-left:28px;
      display: inline-block;

      &.email-us, &.fitting-guide, &.guides, &.toggle-fullview  { margin-top:15px; }

      .icon {
        display: block;
        font-family:'icons';
        margin-right:5px;
        font-size: 87px;
        line-height: 10px;
        text-indent: -17px;
        position: absolute;
        left:0;
        top:0;
        width:20px;
        height:20px;
        overflow: hidden;
        -webkit-font-smoothing: antialiased;
      }

      &.toggle-fullview .icon {
        font-size: 79px;
        margin-top: -3px;
      }

      &.guides .icon {
        font-size:80px;
        text-indent:-14px;
      }

      &.email-us .icon, &.fitting-guide .icon {
        font-size: 86px;
        margin-left: -1px;
        margin-top: -3px;
      }
    }
  }

  .product-main-image {
    position: relative;
    @include transition(height 0.2s ease-in);

    img {
      z-index: 100;
      display: block;
      margin: 0 auto;
      @include transition(opacity 0.2s ease-in);
    }

    &.zoom-enabled {
      cursor: pointer;
      cursor: zoom-in;

      .touch & {
        cursor: pointer;
      }
    }
  }

  .image-list-item{
    position: relative;
    ~ .image-list-item { margin-top: 10px; }
  }

  .product-zoom {
    position: absolute;
    background-color: white;
    background-repeat: no-repeat;
    display: none;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 10;
    border: 1px solid rgba(0,0,0,0.1);

    cursor: pointer;
    cursor: zoom-out;

    &.active {
      display: block;
    }
  }

  .pager {
    float: right;
    width: 20%;
    padding: 0 0 0 30px;

    @include breakpoint(small) {
      width:100%;
      padding:30px 0 0;
      text-align: center;
    }

    .wrap {
      margin-top:10px;
      vertical-align: top;

      &.first  { margin-top:0px; }

      @include breakpoint(small) {
        display: inline-block;
        width:64px;
        margin:0 8px 20px;
      }
    }
    .overlay {
      cursor:pointer;
    }
  }

  .below-main-image {
    width: 100%;
    padding: 0;
    font-size: 0;
    margin-bottom: 10px;

    @include breakpoint(small) {
      padding-top: 30px;
    }

    .inner {
      margin: 0 -6px;
    }

    .wrap {
      width: 20%;
      display: inline-block;
      padding: 0 6px;

      @include breakpoint(small) {
        width: 64px;
        margin: 0 10px 20px;
        padding: 0;
      }

      &.first {
        margin-top: 10px;

        @include breakpoint(small) {
          margin-top: 0;
        }
      }

      .overlay {
        left: 6px;
        right: 6px;

        @include breakpoint(small) {
          left: 0;
          right: 0;
        }
      }
    }
  }

  .product-details-wrapper {
    float: left;
    width:50%;
    padding:0 0 0 55px;

    @include breakpoint(small) {
      width:100%;
      padding:30px 0 0;
      margin-top:10px;

      &.border {
        border-top: 1px solid $primary-border-color;
      }
    }

    .header {
      padding-bottom:30px;
      @include breakpoint(small) { display:none; }

      .brand {
        font-size:14px;
        margin:0 0 0;
        color: $light-text-color;
      }

      .title {
        font-size:35px;
        margin:8px 0 20px;
      }

      .price {
        font-size:18px;
        margin:0 0 0;

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

    .share-buttons {
      padding:0px 0 20px;
      @include breakpoint(small) {
        display: none;
      }
    }

    .description {
      border-bottom: 1px solid #ababab;
    }

    .options {
      padding:32px 0 12px;

      &.unavailable {
        padding:20px 0;
      }

      @include breakpoint(small) {
        border-top:0px;
        padding-top:5px;
        padding-bottom:32px;
      }

      .field {
        position: relative;
        left:-4px;
        width:46px;
        text-align: center;
      }

      .selector-wrapper {
      	float: left;
      	&.submit-wrapper {
      		margin-left: 15px;
      	}
      	.field {
      		border-width: 2px;
      		padding: 6px 12px;
      		width: 36px;
      	}
    	}

      .select-wrapper,
      .selector-wrapper {
        margin-bottom:20px;

        &.quantity {
          margin-top: 15px;

          > label {
            margin-right: 20px;
          }
        }

        @include breakpoint(small) {
          &.quantity {
            margin-bottom:15px;
          }

          &.submit-wrapper {
            margin-bottom:15px;

            input { width:100%; }
          }
        }

        .single-option-selector {
          width:100%;
          @include breakpoint(small) {
            width:100% !important;
          }
        }

        .pxuSexyDropWrapper {
          width: 50%;
          @include breakpoint(small) {
            width:100% !important;
          }
        }

        .submit { margin-top:13px; padding: 11px 29px; }

        &.submit-wrapper {
          label { display: none; }
        }
      }

      .disabled {
        background: $primary-border-color;
        cursor:default;
        margin-top:12px;
      }

      &.unavailable .disabled {
        margin-top:0;
      }
    }

    .inline-field-wrapper > label {
      font-size:14px;
      color: $text-color;
      margin-right:20px;
      text-align:right;
      max-width:40%;
      display: inline-block;

      @include breakpoint(small) {
        width:100% !important;
        max-width:100% !important;
        text-align: left;
        margin-right:0;
        margin-bottom:15px;
      }
    }

    .js-required {
      display: none;

      .js & { display: block; }
    }

    .no-js-required {
      .js & { display: none; }
    }

    .description {
      padding-top:25px;

      &.no-border {
        border-top:0px;
      }

      .go-to-product {
        font-size:12px;
        color: $accent-color;
        @extend .uc-title;

        @include ie10       { span { font-weight:600; } }
        @include lt-ie10    { span { font-weight:600; } }
      }

    }

  }

  .product-details {
    padding-top: 10px;
    text-align: left;

    li {
      text-align: left;
    }
  }

  .details.no-options {
    .options {
      padding:20px 0 12px;
      .selector-wrapper label { display:none; }
    }

    @include breakpoint(small) {
      margin:0;
      padding:0;

      .options {
        padding:30px 0;
      }
    }
  }

}

.template-product {

  .error-message {
    height: auto;
    margin-left: auto;
    margin-right: auto;
    padding: 10px;
    text-align: center;
  }

  #product-area {
    position: relative;
    padding: 30px 0 60px;

    @include breakpoint(small) {
      padding:25px 0;
    }

    .mobile-product-title {
      display: none;
      text-align: center;
      margin-top: 40px;

      @include breakpoint(small) { display:block; }

      .brand {
        color: $light-text-color;
        font-size:14px;
        margin:0 0 0;
      }

      .title {
        font-size: 35px;
        margin: 5px 0 20px;
      }

      .price {
        font-size: 18px;
      }

      .share-buttons {
        margin: 30px 0;
      }
    }

    .share-wrap {
      height:25px;
      margin: 0 12px 10px 0;
      text-align: left;
      display: inline-block;
      vertical-align: top;

      > iframe, > div {
        display: inline-block;
        vertical-align: top;
      }

      &.first {
        border-top: 1px solid $primary-border-color;
      }

      &.facebook {
        width:61px;
        .fb_iframe_widget span {
          vertical-align: top!important;
        }
      }
      &.twitter   { width:56px; }
      &.google    { width:32px; }
      &.pinterest { width:39px; }
    }
  }

  .related-products {
    margin-bottom:80px;
  }
}

.fullscreen-product-viewer {
  display: none;
  -webkit-opacity:0;
  -moz-opacity:0;
  opacity:0;
  position: fixed;
  z-index:5000;
  top:0;
  right:0;
  bottom:0;
  left:0;
  overflow:auto;
  background: url("{{ 'ie-product-overlay-bg.png' | asset_url }}") repeat 50% 50%;
  background:rgba(0,0,0,0.5);

  .modal {
    width:72%;
    min-width: 690px;
    max-width: 1028px;
    margin:0 auto;
    padding:15px;

    &.transitions-are-go {
      @include transition(margin-top 0.3s linear);
    }
  }

  .modal-wrap {
    position: relative;
    background-color: $background-color;
    padding:44px 30px;
    width:100%;
  }

  .close {
    display: block;
    position: absolute;
    top:5px;
    right:5px;
    width:24px;
    height:24px;
    color:#000000;
    cursor: pointer;
    line-height: 21px;
    text-indent: -5px;
    font-family: 'icons';
    font-size:62px;
    @include opacity(0.3);

    &:hover { @include opacity(0.4) }
  }

  .showcase, .pager {
    .wrap {
      position: relative;

      .overlay {
        position: absolute;
        top:0;
        right:0;
        bottom:0;
        left:0;
        box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,0.1);
        @include transition(box-shadow 200ms);

        @include lt-ie9 { border: 1px solid $primary-border-color; }
      }

      &.active .overlay { box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,0.3); }

      img { width:100%; height:auto; }
    }
  }

  .showcase {
    width:100%;
    padding:0 90px 0 0;

    &.wide { padding:0; }

    .container {
      position: relative;
      .spinner {
        position: absolute !important;
        left:50% !important;
        top:50% !important;
        z-index: 50 !important;
      }
    }
    .wrap { z-index:100; }
  }

  .pager {
    position: absolute;
    top:44px;
    right:30px;
    width:58px;
    @include transition(height 0.3s linear);

    .wrap { margin-bottom:20px; }
    .wrap img { display:block; }
    .overlay { cursor:pointer; }
  }

}

.antiscroll-wrap {
  display: inline-block;
  position: relative;
  overflow: hidden;
}

.antiscroll-scrollbar {
  background: gray;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 7px;
  box-shadow: 0 0 1px #fff;
  position: absolute;
  opacity: 0;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  -webkit-transition: linear 300ms opacity;
  -moz-transition: linear 300ms opacity;
  -o-transition: linear 300ms opacity;
}

.antiscroll-scrollbar-shown {
  opacity: 1;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
}

.antiscroll-scrollbar-horizontal {
  height: 7px;
  margin-left: 2px;
  bottom: 2px;
  left: 0;
}

.antiscroll-scrollbar-vertical {
  width: 7px;
  margin-top: 2px;
  right: 2px;
  top: 0;
}

.antiscroll-inner {
  overflow: scroll;
  height: 100%!important;
}

/** A bug in Chrome 25 on Lion requires each selector to have their own
blocks. E.g. the following:

.antiscroll-inner::-webkit-scrollbar, .antiscroll-inner::scrollbar {...}

causes the width and height rules to be ignored by the browser resulting
in both native and antiscroll scrollbars appearing at the same time.
*/
.antiscroll-inner::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.antiscroll-inner::scrollbar {
  width: 0;
  height: 0;
}

.template-product .breadcrumb-navigation {
  margin: 0 auto;
  padding: 45px 0px 5px 0px;
}

.template-search {

  .results {
    width:100%;
    padding-bottom:50px;
  }

  .results-label {
    font-size: 14px;
    font-style: italic;
    margin:40px 0;

    @include breakpoint(small) {
      margin:0 0 40px;
      text-align: center;
    }
  }

  .result {
    display: block;
    width:66%;
    padding:30px 0;
    border-top: 1px solid $secondary-border-color;
    font-size: 0;

    @include breakpoint(small) { width:100%; }

    &.first { padding-top:0 !important; border-top:0; }
  }

  .result.item-article {
    padding:30px 0 10px;

    .title {
      font-weight: 700;
      font-size: 16px;
      color: $title-color;
      margin:0 0 12px;
    }

    .date {
      margin-bottom:20px;
      color: $light-text-color;
      font-size:12px;
      @extend .uc-title;
    }

    .item-image {
      margin-bottom: 12px;
    }
  }

  .result.item-product {

    figure, .details {
      display: inline-block;
      vertical-align: top;
    }

    figure {
      position: relative;
      width:32%;

      img {
        width:100%;
      }

      a {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 2000;

        &.overlay {
          box-shadow: inset 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
        }
      }
    }

    .details {
      width:68%;
      padding-left:30px;

      .brand {
        font-size:10px;
        margin:5px 0 0;
        @extend .uc-title;

        a { color: $light-text-color; }
      }
      .title {
        font-size:16px;
        color: $accent-color;
        margin:14px 0 0;

        a { color: $accent-color; }
      }
      .price {
        font-size:14px;
        color: $text-color;
        margin:16px 0 0;

        .label {
          color: $title-color;
          margin-right: 5px;
        }
        .original {
          text-decoration: line-through;
          margin-right: 2px;
        }
      }
    }

  }

  .pagination {
    padding-bottom:40px;
  }

}

.mini-cart-heading {
	text-align: center;
  font-size: 2.2em;
  font-weight: 100;
  margin: 15px 0;
}
.guarantee-content {
	margin-top: 30px;
  padding-bottom: 25px;
	li {
		font-family: 'AvenirNextCondensed';
		font-size: 18px;
		line-height: 1.5;
		text-align: left;
		font-weight: 500;
		&:before {
			content: "\2713\0020";
			margin-right: 10px;
		}
    @media (max-width: 1024px) {
      font-size: 14px;
    }
	}
}
.mini-cart-items-wrap {
	padding: 0 20px;
	.item {
		&:last-child {
			border-bottom: 0 !important;
		}
	}
	ul {
		li {
			font-size: 13px;
			line-height: 1.5;
			text-align: left;
			font-family: 'AvenirNextCondensed';
			font-weight: 600;
			&:before {
				content: "\2713\0020";
				margin-right: 5px;
			}
		}
	}
}
.main-header-wrap {
	.main-header {
		.mini-cart {
			.image-wrap {
				margin: 20px 0;
			}
			.details {
				width: auto;
				float: right;
				max-width: 150px;
        margin-right: 15px;
				.title {
					font-size: 16px;
					font-weight: 600;
				}
				.price {
					font-size: 16px;
					font-weight: 600;
				}
				.variant {
					font-size: 15px;
					font-weight: 600;
				}
			}
			.options {
				text-align: center;
				.checkout {
					font-size: 24px;
					width: 100%;
					font-weight: 800;
					float: none;
				}
			}
		}
	}
}

a {
	&.swym-wishlist {
		color: #666;
	}
}

.swym-button-bar {
	display: block !important;
	margin: 10px 0 !important;
	.disabled {
		background: #fff !important;
		margin-top: 0 !important;
	}
}

.ui-tabs {
	position: relative;/* position: relative prevents IE scroll bug (element with position: relative inside container with overflow: auto appear as "fixed") */
	padding: .2em;
}
.ui-tabs .ui-tabs-nav {
	margin: 0;
	padding: .2em .2em 0;
}
.ui-tabs .ui-tabs-nav li {
	list-style: none;
	float: left;
	position: relative;
	top: 0;
	margin: 1px .2em 0 0;
	border-bottom-width: 0;
	padding: 0;
	white-space: nowrap;
}
.ui-tabs .ui-tabs-nav .ui-tabs-anchor {
	float: left;
	padding: .5em 1em;
	text-decoration: none;
}
.ui-tabs .ui-tabs-nav li.ui-tabs-active {
	margin-bottom: -1px;
	padding-bottom: 1px;
}
.ui-tabs .ui-tabs-nav li.ui-tabs-active .ui-tabs-anchor,
.ui-tabs .ui-tabs-nav li.ui-state-disabled .ui-tabs-anchor,
.ui-tabs .ui-tabs-nav li.ui-tabs-loading .ui-tabs-anchor {
	cursor: text;
}
.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-active .ui-tabs-anchor {
	cursor: pointer;
}
.ui-tabs .ui-tabs-panel {
	display: block;
	border-width: 0;
	padding: 1em 1.4em;
	background: none;
}

.tabs_description {
  margin-top: 80px; padding: 0 60px;
  .header_wrapper { margin: 0 auto; border-bottom: 1px solid rgba(31, 31, 31, 0.12);}
  .ui-tabs .ui-tabs-nav { margin: 0 auto; display: table; border: none; background: #fff;}
  .ui-tabs .ui-tabs-nav li.ui-tabs-active {
    background: #fff; border: none; border-bottom: 2px solid #1F1F1F;
  }
  .ui-tabs .ui-tabs-nav li { border: none; background: #fff;}
  .ui-tabs .ui-tabs-nav li a { color: rgba(0,0,0,.45); transition: .2s all;	font-size: 14px;	font-weight: bold;	line-height: 18px; opacity: .45;
    &:hover { color: rgba(0,0,0,.65); }
  }
  .ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited { color: #000 !important;	font-size: 16px;	font-weight: 500;	line-height: 18px; opacity: 1!important;}
  .ui-tabs .ui-tabs-panel { padding: 80px 0;}
  .featured_product_img { text-align: center;}
  .text_block {
    margin-bottom: 50px;
    .text_title { margin-bottom: 16px; color: #000000;	font-size: 15px;	font-weight: normal;	letter-spacing: 1px;	line-height: 1.3em;}
    .context { color: #1F1F1F;	font-size: 15px;	font-weight: 300;	line-height: 1.45em;}
  }
  #tabs-2 {
  	margin: 0 auto;
    > ul {
    	list-style-type: none; margin-left: 0;
      > li { position: relative; padding-left: 34px;
        &:before {
        	content: ""; display: inline-block; width: 24px; height: 1px; background-color: #222; position: absolute; left: 0;     top: 15px;
        }
      }
    }
  }
}

.wear-date {
	margin: 15px 0 20px 0;
	input {
		border: 1px solid #ababab;
		margin-top: 15px;
	}
}

#wholesale-login {
  margin: 0 auto;
  margin-bottom: 3em;
  max-width: 380px;
  text-align: center;
  input {
    border: 1px solid rgba(0,0,0,0.1);
    margin: 0 auto 1em;
    padding: 5px;
    width: 100%;
    &.action-button {
      max-width: 380px;
      padding: 10px 14px 9px;
      background: #E7DED4;
      color: #595655;
    }
  }
}
.wholesale-wrap {
  padding: 0 16px;
  margin: 0 auto;
  max-width: 1400px;
  #contactFormWrapper {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-flow: column wrap;
    -moz-flex-flow: column wrap;
    -ms-flex-flow: column wrap;
    flex-flow: column wrap;
    -webkit-flex-flow: row wrap;
    -moz-flex-flow: row wrap;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
    .input-group {
      display: -webkit-box;
      display: -webkit-flex;
      display: -moz-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-flex-flow: column nowrap;
      -moz-flex-flow: column nowrap;
      -ms-flex-flow: column nowrap;
      flex-flow: column nowrap;
      margin: 1em 0;
      -webkit-box-flex: 1;
      -webkit-flex: 1 1 40%;
      -moz-box-flex: 1;
      -moz-flex: 1 1 40%;
      -ms-flex: 1 1 40%;
      flex: 1 1 40%;
      textarea {
        border: 1px solid rgba(0,0,0,0.1);
        &:hover {
           border: 1px solid rgba(0,0,0,0.1);
          outline: none!important;
        }
      }
      input {
        border: 1px solid rgba(0,0,0,0.1);
        padding: 5px;
        &.action-button {
          max-width: 380px;
          padding: 10px 14px 9px;
          display: block;
          width: 100%;
          margin: 0 auto;
          background: #E7DED4;
          color: #595655;
        }
      }
      &:nth-child(odd) {
        margin-right: 1em;
        @media (max-width: 767px) {
          margin-right: 0;
        }
      }
      &:nth-child(even) {
        margin-left: 1em;
        @media (max-width: 767px) {
          margin-left: 0;
        }
      }
      &.input-full-width {
        -webkit-box-flex: 1;
        -webkit-flex: 1 1 100%;
        -moz-box-flex: 1;
        -moz-flex: 1 1 100%;
        -ms-flex: 1 1 100%;
        flex: 1 1 100%;
        margin-left: 0;
        margin-right: 0;
      }
    }
  }
}

#accordion {
  &.ui-accordion {
    .ui-accordion-header {
      background: #fff;
      border: 0;
      &.ui-state-active {
        background: #797676;
      }
    }
    .ui-accordion-content {
      height: auto !important;
      padding: 0 0.5em;
    }
  }
}

@media (max-width: 767px) {
  .tabs_description {
    margin-top: 0;
    padding: 0;
    margin-bottom: 20px;
  }
}
}