Minimal Theme: Changing Background Color of contents in Password Page

Highlighted
Tourist
11 0 2

Hi everyone,

I've been searching through the forums so far but am unable to find the steps needed to walk through some of the solutions i've seen.

My website is http://www.shopfairroads.com. I'm looking to change the background to transparent grey on my Password Page, where the sections state: "A new artisan market delivering uniquely handcrafted homewares and accessories from Africa. Sign up now for launch announcements, promotions and sales."

The reason is because it's very difficult to read the white text (on mobile moreso). 

Some help would be really appreciated! 

Thank you,

Joele

0 Likes
Highlighted

Hi there,
Jack from OpenThinking here!

please try with this code:

.shopify-section-password-header,
.shopify-section-password-content,
.password-page__footer{background-color:rgba(0,0,0,.4) !important}


paste the code in your assets/theme.scss.liquid at the very bottom.

p.s. this code will darken the image doing so your text will popup more.

let me know if this works for your. If yes; accept my answer and give me thumbs up! Thank you.

⚡️ [Shopify Themes]: Lightning-fast, Highly converting, SEO-optimized, Minimal.
⚡️ Need help with your store? [Get a quote]
0 Likes
Highlighted
Tourist
11 0 2

Thank you for the quick reply! I pasted this as the bottom of the asset theme.scss.liquid but I don't see a difference.

 

Also to be more clear, I'm hoping to adjust the text background specified above (and to make it a translucent gray - let's say 50% opacity to start). Is that what's expected with the code you provided?

 

Again, thank you!

0 Likes
Highlighted
Tourist
11 0 2

Also here is the full code on the page

 

/*============================================================================
  Minimal | A theme by Shopify
  Built on Timber v2.0.0
==============================================================================*/

/*================ Variables, theme settings, and Sass mixins from Timber ================*/
/*================ Global | Sass Mixins ================*/
@mixin clearfix() {
  &:after {
    content: "";
    display: table;
    clear: both; }
  *zoom: 1;
}

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

/*============================================================================
  Prefix mixin for generating vendor prefixes.
  Based on https://github.com/thoughtbot/bourbon/blob/master/app/assets/stylesheets/addons/_prefixer.scss
  Usage:
    // Input:
    .element {
      @include prefix(transform, scale(1), ms webkit spec);
    }
    // Output:
    .element {
      -ms-transform: scale(1);
      -webkit-transform: scale(1);
      transform: scale(1);
    }
==============================================================================*/
@mixin prefixFlex($property, $value, $prefixes) {
  @each $prefix in $prefixes {
    @IF $prefix == webkit {
      -webkit-#{$property}: $value;
    } @else if $prefix == moz {
      -moz-#{$property}: $value;
    } @else if $prefix == ms {
      -ms-#{$property}: $value;
    } @else if $prefix == o {
      -o-#{$property}: $value;
    } @else if $prefix == spec {
      #{$property}: $value;
    } @else  {
      @warn 'Unrecognized prefix: #{$prefix}';
    }
  }
}

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

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

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

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

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

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

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

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

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

/*============================================================================
  Accent text
==============================================================================*/

@mixin accentFontStack {
  font-size: em($accentFontSize);
  font-family: $accentFontStack;
  font-weight: $accentFontWeight;
  font-style: $accentFontStyle;
  @IF $typeAccentSpacing {
    letter-spacing: 0.1em;
  }
  @IF $typeAccentTransform {
    text-transform: uppercase;
  }
}

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

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

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

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

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

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

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

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

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

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

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

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

$section-spacing: 55px;
$section-spacing-small: 35px;

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

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

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

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

// Button colors
$colorBtnPrimary: $colorPrimary;
$colorBtnPrimaryHover: lighten($colorBtnPrimary, 10%);
$colorBtnPrimaryActive: darken($colorBtnPrimaryHover, 10%);
$colorBtnPrimaryText: {{ settings.color_button_primary_text }};

$colorBtnTertiary: {{ settings.color_body_bg }};
$colorBtnTertiaryHover: $colorPrimary;
$colorBtnTertiaryActive: darken($colorPrimary, 10%);
$colorBtnTertiaryText: $colorPrimary;

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

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

// Backgrounds
$colorBody: {{ settings.color_body_bg }};
$colorHeader: transparent;
$colorTopBar: {{ settings.color_topbar_bg }};
$passwordBgImage: '{{ 'password-page-background.jpg' | asset_url }}';

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

// Nav and dropdown link background
$colorNavText: {{ settings.color_header_text }};

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

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

// Password page
$passwordPageUseBgImage: true;

/*================ Typography variables ================*/
{% assign accent_family = settings.type_accent_family %}
{% assign base_family = settings.type_base_family %}
{% assign header_family = settings.type_header_family %}

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

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

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

// Body Font
$bodyFontStack: {{ base_family.family }}, {{ base_family.fallback_families }};
$bodyFontWeight: {{ base_family.weight }};
$bodyFontWeightBold: {{ base_family_bold.weight | default: 700 }};
$bodyFontStyle: {{ base_family.style }};
$bodyFontItalic: {{ base_family_italic.style | default: 'italic' }};
$baseFontSize: {{ settings.type_base_size }};

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

// Navigation and buttons
$accentFontStack: {{ accent_family.family }}, {{ accent_family.fallback_families }};
$accentFontWeight: {{ accent_family.weight }};
$accentFontWeightBold: {{ accent_family_bold.weight | default: 700 }};
$accentFontStyle: {{ accent_family.style }};
$accentFontSize: {{ settings.type_accent_size }};

// Header type settings
{% if settings.type_accent_spacing %}
  $typeAccentSpacing: true;
{% else %}
  $typeAccentSpacing: false;
{% endif %}

{% if settings.type_accent_transform %}
  $typeAccentTransform: true;
{% else %}
  $typeAccentTransform: false;
{% endif %}

$colorBlankstate: rgba($colorTextBody, 0.35);
$colorBlankstateBorder: rgba($colorTextBody, 0.15);
$colorBlankstateBackground: rgba($colorTextBody, 0.05);

.placeholder-svg, .icon--placeholder {
  display: block;
  fill: $colorBlankstate;
  background-color: $colorBlankstateBackground;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  border: 1px solid $colorBlankstateBorder;
}

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

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

  .icon {
    border: 0;
  }
}

// Custom styles for some blank state images
.image-bar__content .placeholder-image {
  position: absolute;
  top: 0;
  left: 0;
}

// Overwrite height settings for collection grid.
.grid-link__image-centered {
  .placeholder-svg {
    height: initial;
    max-height: initial;
  }
}


/*================ Vendor-specific styles ================*/
/* Magnific Popup CSS */
.mfp-bg {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1042;
  overflow: hidden;
  position: fixed;
  background: $colorBody;
  opacity: 1;
  filter: alpha(opacity=100); }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


/*================ Theme-specific partials ================*/
h1 {
  font-size: em($headerBaseFontSize);
  line-height: 1.2;
}

h2 {
  font-size: em(floor($headerBaseFontSize * 0.75)); //26px
  line-height: 1.3;
}

h3 {
  font-size: em(floor($headerBaseFontSize * 0.7)); //22px
  line-height: 1.4;
}

h4,
.tags {
  font-size: em(floor($headerBaseFontSize * 0.5)); //16px
  line-height: 1.6;
}

h4 {
  font-size: em(floor($headerBaseFontSize * 0.5)); //16px
  font-weight: $bodyFontWeightBold;
}

h5 {
  font-size: em(floor($headerBaseFontSize * 0.5)); //16px
  line-height: 1.6;
}

h6 {
  font-size: em(floor($headerBaseFontSize * 0.45)); //14px
  line-height: 1.7;
}

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

/*================ Footer ================*/
.site-footer {
  p,
  li,
  .rte,
  input {
    font-size: 0.85em;
  }
}

.main-content {
  margin-top: $gutter / 2;

  .template-index & {
     margin-top: 0;
  }
}

@if ($colorBody == $colorFooterBg) or ($colorFooterBg == rgba(0,0,0,0))  {
  .main-content {
    padding-bottom: 0;

    &:after {
      content: '';
      display: block;
      padding-top: $gutter * 2;
      border-bottom: 1px solid $colorBorder;
    }
  }
}

html, body { background: $colorBody; }

/*================ Index sections ================*/
.index-section {
  padding-top: $section-spacing-small / 2;
  padding-bottom: $section-spacing-small / 2;

  @include at-query($min, $large) {
    padding-top: $section-spacing / 2;
    padding-bottom: $section-spacing / 2;
  }

  .shopify-section:first-child & {
    padding-top: 0;
    border-top: 0;
  }

  .shopify-section:last-child & {
    padding-bottom: 0;
  }
}


/*================ Module-specific styles ================*/
.header-bar {
  @include clearfix();
  font-family: $accentFontStack;
  font-size: em(14px);
  font-weight: $accentFontWeight;
  font-style: $accentFontStyle;
  background-color: $colorTopBar;
  color: $colorTopBarText;
  padding-top: 2px;
  padding-bottom: 2px;
  text-align: center;

  @include at-query($min, $large) {
    text-align: right;
    padding-top: 8px;
    padding-bottom: 8px;
  }

  a,
  button {
    color: $colorTopBarText;

    &:hover,
    &:active,
    &:focus {
      outline-color: $colorTopBarText;
    }
  }

  .inline-list {
    margin-bottom: 0;

    li {
      margin-bottom: 0;
    }
  }
}

@include at-query($min, $large) {
  .header-bar__left {
    text-align: left;
    width: 33.33%;
  }

  .header-bar__right {
    width: 66.66%;
  }
}

.header-bar__module {
  margin-bottom: $gutter/2;

  .header-bar__right &:last-child {
    margin-bottom: 0;
  }

  @include at-query($min, $large) {
    display: inline-block;
    vertical-align: middle;
    text-align: left;
    margin-bottom: 0;
  }
}

.header-bar__module--list {
  list-style: none;
  margin: 0;

  li {
    display: inline-block;
    margin: 0;

    & + li {
      margin-left: 6px;
    }
  }
}

.cart-page-link {
  display: inline-block;
}

.header-bar__cart-icon {
  font-size: 1.4em;
  margin-right: 4px;
}

.hidden-count {
  display: none;
}

.header-bar__sep {
  display: none;

  @include at-query($min, $large) {
    color: $colorTopBarText;
    opacity: 0.4;
    display: inline-block;
    padding: 0 10px;
  }
}

.header-bar__message, .header-message {
  max-width: 100%;
  overflow: hidden;
}

.header-bar__search {
  @include clearfix();
  position: relative;
  background-color: #fff;
  border: 0 none;
  border-radius: $radius;
  min-width: 100px;

  @include at-query($min, $large) {
    max-width: 160px;
    margin-left: 20px;

    &:first-of-type {
      margin-left: 0;
    }
  }

  @include at-query($max, $medium) {
    margin: 12px 30px;
  }

  @include at-query($max, $small) {
    margin: 12px 15px;
  }

  form,
  input,
  button {
    margin-bottom: 0;
  }
}

.header-bar__search-input[type="search"] {
  display: block;
  width: 60%;
  float: right;
  background: transparent;
  border-color: transparent;
  padding: 5px 0;

  &:focus {
    background: transparent;
    border-color: transparent;
  }
}

.header-bar__search-submit {
  position: absolute;
  display: block;
  float: left;
  width: 40%;
  font-size: 16px;
  padding: 4px 0;
  min-height: auto;
}

.supports-fontface {
  .header-bar__search-submit {
    width: 20%;
  }

  .header-bar__search-input[type="search"] {
    width: 100%;
    padding-left: 30px;
  }

  @include at-query($max, $medium) {
    .header-bar__search-form {
      position: relative;
    }

    .header-bar__search-submit {
      width: 35px;
      position: absolute;
      top: 0;
      left: 0;
    }

    .header-bar__search-input[type="search"] {
      width: 100%;
      padding-left: 35px;
    }
  }
}

.header-bar__search {
  .btn,
  .btn:hover,
  .btn:focus {
    background: transparent;
    color: #555;
  }
}

@if ( ($colorTopBar == $colorBody) or ($colorTopBar == rgba(0,0,0,0)) ) {
  .header-bar__search-input::-webkit-input-placeholder {
    color: $colorTopBarText;
  }
  .header-bar__search-input::-moz-placeholder {
    color: $colorTopBarText;
  }
  .header-bar__search-input:-ms-input-placeholder {
    color: $colorTopBarText;
  }
  .header-bar__search-input[type="search"] {
    background-color: rgba(0,0,0,0.03);
  }
  .header-bar__search:first-of-type .header-bar__search-input[type="search"] {
    background-color: transparent;
  }
  .header-bar__search:first-of-type .header-bar__search-input[type="search"]:focus {
    background-color: rgba(0,0,0,0.03);
  }
}

.announcement-bar--mobile {
  padding-top: 5px;
  padding-bottom: 5px;
}

/*================ Module | Grid Link ================*/
.grid-link__container {
  margin-bottom: -$gutter;
}

.grid-link,
.grid-link--focus {
  position: relative;
  display: block;
  padding-bottom: $gutter;
  line-height: 1.3;

  &:hover,
  &:active {
    .grid-link__image {
      opacity: 0.8;
    }
  }
}

.grid-link--focus {
  padding: $gutter / 1.5;
  box-shadow: 0px 1px 1px rgba(0,0,0,0.1);
  margin-bottom: $gutter;

  &:before {
    display: block;
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: $colorFooterBg;
    @include transition(all 0.08s ease-in);
  }

  &:hover,
  &:active {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }
}

.grid-link__image {
  position: relative;
  display: table;
  table-layout: fixed;
  width: 100%;
  margin: 0 auto ( $gutter / 3 );
  @include transition(opacity 0.08s ease-in);

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

.grid-link__image--loading {
  background-color: $colorTextBody;
  -webkit-animation: placeholder-background-loading 1.5s linear infinite;
  animation: placeholder-background-loading 1.5s linear infinite;
}

.grid-link__image-centered {
  display: table-cell;
  vertical-align: middle;
  width: 100%;
  overflow: hidden;
}

.grid-link__image-sold-out {
  img {
    .sold-out & {
      opacity: 0.4;
      filter: alpha(opacity=40);
    }
  }
}

.grid-link__title,
.grid-link__meta {
  position: relative;
  margin-bottom: 5px;
}

.grid-link__title {
  color: $colorTextBody;
  font-family: $headerFontStack;
  font-size: .9em;
  line-height: 1.4;
  font-weight: $bodyFontWeightBold;
}

.grid-link__vendor {
  font-size: .85em;
  font-weight: $bodyFontWeight;
}

.grid-link__meta {
  font-family: $headerFontStack;
  font-size: .75em;
  line-height: 1.5;
  color: lighten($colorTextBody, 10%);
}

.grid-link__sale_price {
  opacity: 0.95;
  filter: alpha(opacity=95);
}

.grid-link__unit-price {
  font-size: 1em;
}

$badgeSize: 60px;
.badge {
  display: table;
  position: absolute;
  width: $badgeSize;
  height: $badgeSize;
  background-color: $colorPrimary;
  color: $colorBtnPrimaryText;
  border-radius: 50%;
  text-transform: uppercase;
  font-weight: $bodyFontWeightBold;
  text-align: center;
  font-size: em(12px);
  line-height: 1.1;
  z-index: 10;
}

.badge--sold-out {
  top: 50%;
  left: 50%;
  margin-top: -($badgeSize / 2);
  margin-left: -($badgeSize / 2);
  background-color: $colorBtnPrimary;
  color: $colorBtnPrimaryText;
}

.badge--sale {
  top: -($badgeSize / 5);
  right: -($badgeSize / 5);
}

.badge__text {
  display: table-cell;
  vertical-align: middle;
  padding: 2px 8px 0;
}

.badge__text--small {
  font-size: 8px;
  padding-top: 0;
}

@-webkit-keyframes placeholder-background-loading {
  0% {
    opacity: 0.02;
  }

    50% {
    opacity: 0.05;
  }

    100% {
    opacity: 0.02;
  }
}

@-ms-keyframes placeholder-background-loading {
  0% {
    opacity: 0.02;
  }

    50% {
    opacity: 0.05;
  }

    100% {
    opacity: 0.02;
  }
}

@keyframes placeholder-background-loading {
  0% {
    opacity: 0.02;
  }

    50% {
    opacity: 0.05;
  }

    100% {
    opacity: 0.02;
  }
}

.mobile-nav-trigger,
.mobile-cart-page-link {
  font-weight: $accentFontWeightBold;

  .icon {
    position: relative;
    top: -1px;
    vertical-align: middle;
    padding-right: 4px;
  }
}

.mobile-nav-trigger {
  display: block;
  float: left;
  background: none;
  border: 0 none;
  padding: 0;
  margin: 0;

  .icon {
    font-size: 1.4em;
  }
}

.mobile-cart-page-link {
  display: block;
  float: right;

  .header-bar__cart-icon {
    font-size: 1.4em;
  }

  .cart-count {
    &:before {
      display: inline;
      content: "(";
    }
    &:after {
      display: inline;
      content: ")";
    }
  }
}

.mobile-nav {
  display: none;
  list-style: none;
  text-align: left;
  margin: 0;

  li {
    margin: 0;
  }
}

.mobile-nav__link {
  display: block;
  border-top: 1px solid $colorTopBarText;
  border-color: rgba($colorTopBarText, 0.2);

  /*================ Can't always control anchor markup to add a class ================*/
  > a {
    display: block;
    padding: ($gutter / 2.5) ($gutter / 2);
    font-size: em(15px);
    font-family: $headerFontStack;
    font-weight: $headerFontWeight;
    font-style: $headerFontStyle;
    text-transform: uppercase;

    @include at-query ($min, $small) {
      padding-left: $gutter;
      padding-right: $gutter;
    }
  }
}

.mobile-nav__sublist-expand,
.mobile-nav__sublist-contract {
  display: inline-block;
  font-size: 0.6em;
  vertical-align: middle;
  margin: -2px 0 0 4px;
}

.mobile-nav__sublist-contract {
  display: none;
}

.mobile-nav__sublist-trigger.is-active {
  .mobile-nav__sublist-contract {
    display: inline-block;
  }

  .mobile-nav__sublist-expand {
    display: none;
  }
}

.mobile-nav__sublist {
  list-style: none;
  margin: 0;
  display: none;
  background-color: $colorBody;
}

.mobile-nav__sublist-link {
  a {
    display: block;
    padding: ($gutter / 2.5) ($gutter / 2);
    color: $colorNavText;
    font-size: em(15px);
    font-family: $headerFontStack;
    font-weight: $headerFontWeight;
    font-style: $headerFontStyle;
    border-top: 1px solid $colorBorder;
    padding-left: $gutter;
    padding-right: $gutter;

    &:hover {
      opacity: 1;
      color: $colorPrimary;
    }

    .mobile-nav__sublist--grandchilds & {
      padding-left: $gutter * 2;
    }
  }
}

.newsletter-grid {
  display: flex;
  flex-wrap: wrap;
}

.newsletter-section {
  .grid-uniform {
    margin-left: 0;
  }

  #contact_form {
    margin-bottom: 0;
  }

  .section-header__title {
    margin-bottom: 0;
  }

  .section-header__title-spacing {
    margin-bottom: $gutter / 2;
  }
}

.newsletter-wrapper {
  .grid-uniform {
    margin-left: 0;
  }
}

.newsletter-grid__item {
  padding: 0;
}

.newsletter-content-wrapper {
  display: flex;
  justify-content: center;
  flex-direction: column;
  height: 100%;
  padding: 50px 15%;
}

.newsletter-content p {
  margin: 0;
}

.newsletter-section {
  .input-group {
    display: block;
  }
  
  .input-group-field {
    margin-bottom: 10px;
  }

  .errors {
    margin-bottom: 10px;
  }
}

/*================ Module | Promo images ================*/

.featured-images .grid__item {
  margin-bottom: $gutter / 2;
}

.collection__grid-image-wrapper {
  width: 100%;
  position: relative;
  margin: 0 auto;
}

.collection__grid-image {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.custom-content {
  @include display-flexbox;
  @include align-items(stretch);
  @include flex-wrap(wrap);
  width: auto;
  margin-bottom: -$gridGutter;
  margin-left: -$gridGutter;

  @include at-query($max, $small) {
    margin-bottom: -$gridGutterMobile;
    margin-left: -$gridGutterMobile;
  }
}

.custom__item {
  @include flex(0 0 auto);
  margin-bottom: $gridGutter;
  padding-left: $gridGutter;
  max-width: 100%;

  @include at-query($max, $small) {
    @include flex(0 0 auto);
    padding-left: $gridGutterMobile;
    margin-bottom: $gridGutterMobile;

    &.small--one-half {
      @include flex(1 0 50%);
      max-width: 400px;
      margin-left: auto;
      margin-right: auto;
    }
  }
}

.custom__item-inner {
  position: relative;
  display: inline-block;
  text-align: left;
  max-width: 100%;
}

.custom__item-inner--video,
.custom__item-inner--html {
  display: block;
}

/*================ Flex item alignment ================*/
.align--top-middle {
  text-align: center;
}

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

.align--middle-left {
  @include align-self(center);
}

.align--center {
  @include align-self(center);
  text-align: center;
}

.align--middle-right {
  @include align-self(center);
  text-align: right;
}

.align--bottom-left {
  @include align-self(flex-end);
}

.align--bottom-middle {
  @include align-self(flex-end);
  text-align: center;
}

.align--bottom-right {
  @include align-self(flex-end);
  text-align: right;
}

.rich-text__heading--medium {
  font-size: em(floor($headerBaseFontSize * 0.88)); //24px default
}
.rich-text__heading--small {
  font-size: em(floor($headerBaseFontSize * 0.7)); //16px default
}

.rich-text__text--large {
  font-size: em(floor($baseFontSize * 1.15));
}
.rich-text__text--small {
  font-size: em(floor($baseFontSize * 0.88));
}

.feature-row {
  @include display-flexbox();
  @include justify-content(space-between);
  @include align-items(center);

  @include at-query ($max, $medium) {
    @include flex-wrap(wrap);
  }
}

.feature-row__item {
  @include flex(0 1 50%);

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

.feature-row__image-wrapper {
  position: relative;
  margin: 0 auto;
}

.feature-row__image {
  display: block;
  margin: 0 auto;

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

  .supports-js & {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
  }

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

.feature-row__text {
  padding-top: $section-spacing-small;
  padding-bottom: $section-spacing-small;

  @include at-query ($max, $medium) {
    order: 2;
    padding-bottom: 0; // always last element on mobile
  }
}

@include at-query ($min, $large) {
  .feature-row__text--left {
    padding-left: $section-spacing-small;
  }

  .feature-row__text--right {
    padding-right: $section-spacing-small;
  }
}

@include at-query ($min, $large) {
  .featured-row__subtext {
    font-size: em($baseFontSize + 2);
  }
}

.featured-blog__post {
  margin-bottom: $gridGutter;

  @include at-query($max, $small) {
    margin-bottom: $gridGutter * 1.25;
  }

  .article__featured-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    display: block;
  }

  .article__featured-image-wrapper {
    position: relative;
    margin-bottom: $gridGutter;

    @include at-query($max, $small) {
      margin-bottom: $gridGutterMobile;
    }

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

  .rte {
    margin-top: $gridGutter * 0.75;
    @include at-query($max, $small) {
      margin-bottom: $gridGutterMobile * 0.75;
    }
  }

  .h3 {
    margin-top: -5px;
  }

  .featured-blog__meta {
    font-size: .85em;
    margin-bottom: -5px;
  }
}

.placeholder {
  .article__featured-link {
    margin-bottom: $gridGutter;

    @include at-query($max, $small) {
      margin-bottom: $gridGutterMobile;
    }
  }
}

.map-section__wrapper {
  @include display-flexbox();
  @include flex-wrap(wrap);
}

.map-section__content {
  @include flex(1 1 auto);
  min-width: 50%;
  overflow: hidden;
  position: relative;

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

.map-section__image {
  height: 100%;
  background-size: cover;
  background-position: center;

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

  // Flexbox height fix for Safari
  @include at-query($min, $large) {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
  }

  // Only show the background image if map fails to load
  .map-section--display-map & {
    display: none !important;
  }
}

.map-section__background-wrapper {
  background-color: $colorBlankstateBackground;
}

.map-section__placeholder {
  height: 100%;

  // Flexbox height fix for Safari
  @include at-query($min, $large) {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
  }

  // Only show the placeholder image if map fails to load
  .map-section--display-map & {
    display: none !important;
  }
}

.map-section__text {
  padding: $gutter;
  background-color: #f4f4f4;

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

  .icon-pin {
    height: $accentFontSize * 0.75;
  }
}

// Optically center map in visible area with
// extended height/widths and negative margins
.map-section__container {
  width: 100%;
  height: 55vh;

  @include at-query($min, $large) {
    position: absolute !important;
    top: 0;
    left: 0;
    height: 100%;
  }
}

.map-section--load-error {
  @include at-query($min, $large) {
    width: 50%;
    margin: 0 auto;
  }

  .errors {
    width: 100%;
  }
}

.gallery__image-container {
  position: relative;
}

.gallery__image-wrapper {
  img {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
  }

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

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

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

  &.mfp-fade {
    -webkit-backface-visibility: hidden;
    opacity: 0;
    @include transition(all 0.3s ease-out);

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


    &.mfp-removing {
      @include transition(all 0.3s ease-out);
      opacity: 0;
      filter: alpha(opacity=0);
    }
  }
}

.mfp-fade {
  &.mfp-wrap {
    .mfp-content {
      opacity: 0;
      @include transition(all 0.3s ease-out);
    }

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

    &.mfp-removing {
        @include transition(all 0.3s ease-out);
      .mfp-content {
        opacity: 0;
      }

      button {
        opacity: 0;
      }
    }
  }

}

.mfp-counter {
  display: none;
}

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

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

.mfp-img {
  background-color: $colorBody;
}

button.mfp-close {
  margin: 30px;
  font-size: em(40px);
  font-weight: 300px;
  opacity: 1;
  filter: alpha(opacity=100);
  color: $colorTextBody;
}

button.mfp-arrow {
  top: 0;
  height: 100%;
  width: 20%;
  margin: 0;
  opacity: 1;
  filter: alpha(opacity=100);

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

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

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

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

  &:before {
    content: '';
    display: inline-block;
    position: relative;
    vertical-align: top;
    height: 25px;
    width: 25px;
    border-style: solid;
    border-width: 4px 4px 0 0;
    @include transform(rotate(-45deg));
  }

  &.mfp-chevron-right {
    right: 55px;

    &:before {
      @include transform(rotate(45deg));
    }
  }

  &.mfp-chevron-left {
    left: 55px;

    &:before {
      @include transform(rotate(-135deg));
    }
  }
}

/*================ Variables ================*/
$button-size: 44px;

/*============================================================================
  #FlexSlider
    - jQuery FlexSlider v2.2.0 | http://www.woothemes.com/flexslider/
    - Contributing author: Tyler Smith (@mbmufffin)
==============================================================================*/
.slideshow-section {
  padding-bottom: $section-spacing-small;

  @include at-query($min, $large) {
    padding-bottom: 0;
  }
}

.flexslider {
  margin: 0;
  padding: 0;
  overflow: visible !important;
}

.flexslider--adapt,
.flexslider--adapt .flex-viewport {
  max-height: 90vh;
}

.flexslider--adapt.flexslider--slide .slides {
  max-height: 90vh;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.flexslider li {
  margin: 0;
  max-width: 100%;
}

.flexslider {
  .slides__slide {
    display: none; /* Hide the slides before the JS is loaded. Avoids image jumping */
    margin: 0;
    position: relative;
    @include backface();
  }
}

.flexslider--adapt {
  .slides__slide {
    height: 100%;
    overflow: hidden;
  }
}

.flexslider--adapt.flexslider--fade {
  .slides__slide {
    position: absolute !important;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
  }
}

.slide-hide,
.slide-hide > img {
  height: 1px;
}

.slide-hide .slides__image,
.slide-hide .placeholder-svg {
  display: none;
}

.slides__image {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  display: block;
  object-fit: cover;
}

.flexslider--adapt .slides__image,
.flexslider--adapt .placeholder-svg {
  height: 100%;
  overflow: hidden;
}

.slides { @include clearfix; }
html[xmlns] .slides { display: block; }
* html .slides { height: 1%; }

/*================ No JS Fallback ================*/
.no-js .slides > li:first-child { display: block; }
.flexslider { position: relative; zoom: 1; }
.flex-viewport { max-height: 2000px; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; }
.loading .flex-viewport { max-height: 300px; }
.flexslider .slides { zoom: 1; }
.carousel li { margin-right: 5px; }

/*================ Controls ================*/
.slider__controls-container {
  position: relative;
}

.slider__controls-button {
  width: $button-size;
  height: $button-size;
  position: absolute;
  margin: 3px 0;
  border-style: none;
  background: transparent;

  .icon {
    font-size: 0.7rem;
    color: $colorPrimary;
    opacity: 1;
    @include transition(opacity 0.3s ease-out);
  }

  &:hover .icon {
    opacity: 0.5;
  }
}

.slider__controls-button--pause {
  right: -15px;

  .icon {
    height: 0.5rem;
    font-size: 0.5rem;
  }
}

.icon-pause {
  display: block;

  .is-paused & {
    display: none;
  }
}

.icon-play {
  display: none;

  .is-paused & {
    display: block;
  }
}

/*================ Direction Nav ================*/
.slider-navigation {
  position: relative;
  margin: 0;
  z-index: 2;
  list-style: none;

  li {
    margin: 0;
  }
}

/*================ Control Nav ================*/
.flex-control-nav {
  width: 100%;
  text-align: center;
  margin: 0;
  padding: 10px 0;
  list-style: none;
  z-index: 3;

  li {
    margin: 0 4px;
    display: inline-block;
    zoom: 1;
    vertical-align: middle;
  }
}

.flex-control-paging li a {
  width: 12px;
  height: 12px;
  display: block;
  background-color: $colorPrimary;
  cursor: pointer;
  text-indent: -9999px;
  border-radius: 20px;
  border: 2px solid #fff;
  @include transition(opacity 0.3s ease-out);

  &:hover {
    opacity: 0.5;
    background-color: $colorPrimary;
  }

  &.flex-active {
    background-color: #fff;
    border-color: $colorPrimary;
    cursor: default;
  }
}

.flex-control-thumbs {margin: 5px 0 0; position: static; overflow: hidden;}
.flex-control-thumbs li {width: 25%; float: left; margin: 0;}
.flex-control-thumbs img {width: 100%; display: block; opacity: .7; cursor: pointer;}
.flex-control-thumbs img:hover {opacity: 1;}
.flex-control-thumbs .flex-active {opacity: 1; cursor: default;}

/*================ Custom Flexslider Styles ================*/
.flexslider .slides {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

.slides__slide::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: #000;
  // The overlay opacity is set on a block level in the section template
  opacity: 0;

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

/*================ Slide text ================*/
.slideshow__mobile-text-container {
  display: block;

  @include at-query($min, $large) {
    display: none;
  }
}

.slides__text-content {
  width: 80%;
  margin: 0 auto;
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  @include transform(translateY(-50%));
  z-index: 1;

  .slide-hide & {
    display: none;
  }

  .no-js & {
    &::after {
      opacity: 0;
      visibility: hidden;
      content: none;
    }
  }
}

.slides__text-content--mobile {
  // Hidden when loading to prevent content flashing
  display: none;
  position: relative;
  transform: none;
  margin-top: $gridGutterMobile;
  padding-bottom: 1rem;
}

.no-js .slides__text-content--mobile:first-of-type {
  display: block;
}

.slides-text-content-wrapper-left {
  width: 50%;
}

.slides-text-content-wrapper-right {
  width: 50%;
  margin-left: auto;
}

.slides__title {
  display: none;
  margin-bottom: 0;

  @include at-query($min, $large) {
    display: block;
  }
}

.slides__title--small {
  font-size: em(floor($headerBaseFontSize * 0.88));
}

.slides__title--large {
  font-size: em(floor($headerBaseFontSize * 1.15));
}

.slides__title--mobile {
  display: block;

  @include at-query($min, $large) {
    display: none;
  }
}

.slides__btn {
  display: none;
  border: none;

  @include at-query($min, $large) {
    display: block;
  }
}

.slides__title + .slides__btn {
  margin-top: $gutter * 3 / 2;
}

.slides__btn {
  max-width: 100%;
  display: none;
  word-wrap: break-word;
  min-height: 3.125rem;
  line-height: 2.2;

  @include at-query($min, $large) {
    display: inline-block;
  }
}

.slides__btn--mobile {
  display: inline-block;

  @include at-query($min, $large) {
    display: none;
  }
}

.slide-hide .slides__btn {
  display: none;
}

/*================ Social share buttons ================*/
$shareButtonHeight: 22px;
$shareButtonCleanHeight: 30px;
$shareBorderColor: #ececec;

.social-sharing {
  font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;

  * {
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
  }

  a {
    display: inline-block;
    color: #fff;
    border-radius: 2px;
    margin: 5px 10px 5px 0;
    height: $shareButtonHeight;
    line-height: $shareButtonHeight;
    text-decoration: none;
    font-weight: $bodyFontWeight;

    &:hover {
      color: #fff;
    }
  }

  span {
    display: inline-block;
    vertical-align: top;
    height: $shareButtonHeight;
    line-height: $shareButtonHeight;
    font-size: 12px;
  }

  .icon {
    padding: 0 5px 0 10px;

    &:before {
      line-height: $shareButtonHeight;
    }
  }

  /*================ Large Buttons ================*/
  &.is-large a {
    height: $shareButtonHeight*2;
    line-height: $shareButtonHeight*2;

    span {
      height: $shareButtonHeight*2;
      line-height: $shareButtonHeight*2;
      font-size: 18px;
    }

    .icon {
      padding: 0 10px 0 18px;

      &:before {
        line-height: $shareButtonHeight*2;
      }
    }
  }
}

.share-title {
  font-weight: $bodyFontWeightBold;
  font-size: 12px;
  padding-right: 10px;

  .is-large & {
    padding-right: 16px;
  }
}

.share-facebook {
  background-color: #3b5998;

  &:hover {
    background-color: darken(#3b5998, 10%);
  }
}

.share-twitter {
  background-color: #00aced;

  &:hover {
    background-color: darken(#00aced, 10%);
  }
}

.share-pinterest {
  background-color: #cb2027;

  &:hover {
    background-color: darken(#cb2027, 10%);
  }
}

/*================ Clean Buttons ================*/
.social-sharing.is-clean {
  a {
    background-color: #fff;
    border: 1px solid $shareBorderColor;
    color: #333;
    height: $shareButtonCleanHeight;
    line-height: $shareButtonCleanHeight;

    span {
      height: $shareButtonCleanHeight;
      line-height: $shareButtonCleanHeight;
      font-size: 13px;
    }

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

    .share-title {
      font-weight: $bodyFontWeight;
    }
  }

  .icon-facebook {
    color: #3b5998;
  }

  .icon-twitter {
    color: #00aced;
  }

  .icon-pinterest {
    color: #cb2027;
  }
}

.order-table {
  border: 1px solid $colorBorder;

  a {
    color: $colorTextBody;
  }

  th, td {
    border: 0;
  }

  tbody th,
  tfoot th {
    font-weight: normal;
    text-transform: none;
    letter-spacing: 0;
  }

  tbody tr + tr {
    border-top: 1px solid $colorBorder;
  }

  thead {
    border-bottom: 1px solid $colorTextBody;
  }

  tfoot {
    border-top: 1px solid $colorTextBody;

    tr {
      &:first-child th,
      &:first-child td {
        padding-top: 1.25em;
      }

      &:nth-last-child(2) th,
      &:nth-last-child(2) td {
        padding-bottom: 1.25em;
      }

      &:last-child th,
      &:last-child td {
        border-top: 1px solid $colorTextBody;
        font-weight: $bodyFontWeightBold;
        padding-top: 1.25em;
        padding-bottom: 1.25em;
      }
    }
  }

  @include at-query($min, $medium) {

    tbody {
      tr {
        &:first-child th,
        &:first-child td {
          padding-top: 1.25em;
        }

        &:last-child th,
        &:last-child td {
          padding-bottom: 1.25em;

          .order-discount--list {
            margin-bottom: 0;
          }
        }
      }
    }

    tfoot {
      tr {
        td, th {
          vertical-align: bottom;
        }
      }
    }
  }

  @include at-query($max, $preMedium) {
    border: 0;

    thead {
      display: none;
    }

    th,
    td {
      float: left;
      clear: left;
      width: 100%;
      text-align: right;
      padding: 0.5rem 0;
      border: 0;
      margin: 0;
    }

    th::before,
    td::before {
      content: attr(data-label);
      float: left;
      text-align: left;
      padding-right: 2em;
      max-width: 80%;
    }

    tbody {
      tr {
        th:first-child {
          padding-top: 1.25em;
        }
        td:last-child {
          padding-bottom: 1.25em;
        }
      }

      th::before,
      td::before {
        font-weight: $bodyFontWeightBold;
      }
    }
  }
}

.order-table__product {
  @include at-query($max, $preMedium) {
    display: flex;
    justify-content: space-between;
  }
}

.order-discount {
  text-transform: uppercase;
  color: $colorLink;
  display: block;
  line-height: 1.2em;

  .icon-saletag {
    margin-right: 0.8em;
    font-size: 0.9em;
  }
}

.order-discount--title {
  word-break: break-word;
  padding-right: 1em;
}

.order-discount--cart {
  font-size: 0.85em;
}

.order-discount--list {
  margin: 0.8em 0 0.6em 1.3em;
  list-style: none;
  padding: 0;
}

.order-discount--price {
  margin-bottom: 0;
}

.order-discount__item {
  text-indent: -1.5em;

  & + .order-discount__item {
    margin-top: 0.6em;
  }
}

.order-discount-wrapper {
  @include at-query($max, $preMedium) {
    display: flex;
    justify-content: space-between;
    width: 100%;
  }
}

.order-discount-cart-wrapper {
  display: flex;
  justify-content: flex-end;
  margin-bottom: $gutter / 4;
}

.order-discount__line {
  vertical-align: bottom;
}


/*================ View-specific styles ================*/
/*============= Templates | Password page =============*/

.template-password {
  height: 100vh;
  text-align: center;
}

.password-page__wrapper {
  display: table;
  height: 100%;
  width: 100%;

  @IF $passwordPageUseBgImage {
    background-image: url($passwordBgImage);
    background-size: cover;
    background-repeat: no-repeat;
    color: #ffffff;
  } @else {
    color: $colorTextBody;
  }

  a {
    color: inherit;
  }

  hr {
    padding: ($gutter / 2) 0;
    margin: 0 auto;
    max-width: ($gutter * 2);

    @IF $passwordPageUseBgImage {
      border-color: inherit;
    } @else {
      border-color: $colorBorder;
    }
  }

  .social-sharing {
    a {
      color: #fff;
    }

    &.is-clean a {
      color: #333;
      background: #fff;

      &:hover{
        background: #ececec;
      }
    }
  }
}

.password-header-section {
  display: table-row;
}

.password-page__header {
  display: table-cell;
  height: 1px;
}

.password-page__header__inner {
  padding: ($gutter / 2) $gutter;
}

.password-page__logo {
  margin-top: 3 * $gutter;

  @IF $passwordPageUseBgImage {
    color: inherit;
  } @else {
    color: $colorNavText;
  }

  .logo {
    max-width: 100%;
  }
}

.password-page__main {
  display: table-row;
  width: 100%;
  height: 100%;
  margin: 0 auto;
}

.password-page__main__inner {
  display: table-cell;
  vertical-align: middle;
  padding: ( $gutter / 2 ) $gutter;
}

.password-page__hero {
  font-family: $headerFontStack;
  font-weight: $headerFontWeight;
  font-style: $headerFontStyle;
  font-size: em(42px);
  line-height: 1.25;
  text-transform: none;
  letter-spacing: 0;
  text-rendering: optimizeLegibility;

  @include at-query($min, $postSmall) {
    font-size: em(60px);
  }

  @include at-query($min, $large) {
    font-size: em(64px);
  }
}

.password-page__message {
  font-style: $bodyFontItalic;
  font-size: 120%;

  img {
    max-width: 100%;
  }
}

.password-page__message,
.password-page__login-form,
.password-page__signup-form {
  max-width: 500px;
  margin: 0 auto;
}

.password-page__message,
.password-page__login-form {
  text-align: center;
  padding: $gutter;
}

.password-page__login-form,
.password-page__signup-form {
  @include at-query($min, $small) {
    padding: 0 $gutter;
  }

  .input-group {
    width: 100%;
  }

  .errors ul {
    list-style-type: none;
    margin-left: 0;
  }
}

.password-page__signup-heading,
.password-page__signup-subheading {
  margin-bottom: 25px;

  a {
    color: $colorPrimary;

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

input[type="submit"].password-page__login-form__submit,
input[type="submit"].password-page__signup-form__submit {
  font-size: 0.9em;
}

.password-page__social-sharing {
  margin-top: $gutter;
}

.password-login,
.admin-login  {
  margin-top: $gutter / 2;
  a:hover {
    color: inherit;
  }
}

.password-login {
  font-family: $headerFontStack;
  font-weight: $headerFontWeight;
  font-style: $headerFontStyle;
  font-size: em(14px);
  line-height: 14px;
}

.lock-icon-svg {
  width: 14px;
  height: 14px;
  display: inline-block;
  vertical-align: baseline;

  path {
    fill: currentColor;
  }
}

.admin-login {
  font-size: 95%;
}

.password-page__footer {
  display: table-row;
  height: 1px;

  @IF $passwordPageUseBgImage{
    color: inherit;
  } @else {
    color: $colorFooterText;
  }
}

.password-page__footer_inner {
  display: table-cell;
  vertical-align: bottom;
  padding: $gutter;
  line-height: 1.5 * $baseFontSize;
  font-size: 95%;
}

.shopify-link {
  color: inherit;

  &:hover {
    color: inherit;
  }
}

.shopify-logo-svg {
  width: 1.5 * $baseFontSize * 120 / 35;
  height: 1.5 * $baseFontSize;
  display: inline-block;
  line-height: 0;
  vertical-align: top;

  path {
    fill: currentColor;
  }
}

/* =========
   Hiding the word 'Shopify' but not from screen readers.
   ========= */

.shopify-name {
    @include visuallyHidden;
}

.search__image-wrapper {
  width: 100%;
  margin: 0 auto;

  &.supports-js {
    position: relative;
  }
}

.search__image {
  display: block;
  margin: 0 auto;

  &.lazyload {
    opacity: 0;
  }

  .supports-js & {
    position: absolute;
    top: 0;
    width: 100%
  }
}

/*================ Templates | Cart Page ================*/
.cart__row {
  position: relative;
  padding-top: $gutter;

  & + & {
    margin-top: $gutter;
    border-top: 1px solid $colorBorder;
  }

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

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

  .js-qty {
    margin: 0;
  }
}

.cart__row--table-large {
  .grid__item {
    word-wrap: break-word;
  }
}

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

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

.cart__image-wrapper {
  width: 100%;
  margin: 0 auto;

  &.supports-js {
    position: relative;
  }
}

.cart__image {
  display: block;
  margin: 0 auto;

  .supports-js & {
    position: absolute;
    top: 0;
    width: 100%;
  }

  &.lazyload {
    opacity: 0;
  }
}

.cart__product-title {
  display: inline-block;
  font-weight: $bodyFontWeightBold;
  line-height: 1.3;
  margin-bottom: 0;
}

.cart__subtotal {
  margin-bottom: 5px;
}

.cart__subtotal-price,
.cart-additional-savings__price {
  margin: 0 0 0 ($gutter / 3);
  display: inline;
}

.cart__policies {
  margin-bottom: 30px;
  font-size: em($baseFontSize - 1);
}

.cart__mini-labels {
  display: block;
  margin: ($gutter / 3) 0;
  font-size: em(12px);

  @include at-query ($min, $large) {
    display: none;
  }
}

input.cart__quantity-selector {
  width: 50%;
  margin: 0 auto;

  @include at-query ($min, $large) {
   float: right;
  }
}

.cart__remove {
  display: block;
}

.cart__note-add.is-hidden {
  display: none;
}

.cart__note {
  display: none;

  &.is-active {
    display: block;
  }
}

.cart .btn {
  margin-bottom: 4px;
}

.cart__additional_checkout {
  margin: ($gutter / 2) 0 0;

  input {
    padding: 0;
  }

  & > *:not(script) {
    padding: 5px 0 0 5px;
    vertical-align: top;
    line-height: 1;

    &:first-child,
    &:empty {
      padding-left: 0px;
    }
  }
}

.cart__continue-btn {
  .cart--no-cookies & {
    display: none;
  }
}

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

.cart--cookie-message {
  display: none;

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

[data-shopify-buttoncontainer] {
  justify-content: flex-end;
}

.shopify-section-password-header,
.shopify-section-password-content,
.password-page__footer{background-color:rgba(0,0,0,.3) !important}
0 Likes
Highlighted

Ok, 

then try adding the code below in your layout/passowrd.liquid file JUST BEFORE CLOSING </head>

 

 

<style>
.shopify-section-password-header,
.shopify-section-password-content,
.password-page__footer{background-color:rgba(0,0,0,.5) !important}
</style>

 


</head>
<body>

 

p.s. .5 = 50%

⚡️ [Shopify Themes]: Lightning-fast, Highly converting, SEO-optimized, Minimal.
⚡️ Need help with your store? [Get a quote]
0 Likes
Highlighted
Tourist
11 0 2

Hello,

 

Not seeing a difference unfortunately..

 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>
      {{ shop.name }}
    </title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1">

    {% if settings.favicon %}
      <link rel="shortcut icon" href="{{ settings.favicon | img_url: '32x32' }}" type="image/png" />
    {% endif %}

    {% include 'social-meta-tags' %}

    {{ content_for_header }}

    <!-- CSS ================================================== -->
    {{ 'timber.scss.css' | asset_url | stylesheet_tag }}
    {{ 'theme.scss.css' | asset_url | stylesheet_tag }}

    <!-- JS ================================================== -->
    <script>
      window.password = window.password || {};

      var password = {
        strings: {
          pageClose: {{ 'general.password_page.close' | t | json }}
        }
      }
    </script>

    {{ 'jquery-2.2.3.min.js' | asset_url | script_tag }}

    <script src="{{ 'lazysizes.min.js' | asset_url }}"></script>
    
 <style>
.shopify-section-password-header,
.shopify-section-password-content,
.password-page__footer{background-color:rgba(0,0,0,.5) !important}
</style>

  </head>

  <body class="template-password">

    <div class="password-page__wrapper">
      {{ content_for_layout }}

      <footer class="password-page__footer" role="contentinfo">
        <div class="password-page__footer_inner">
          {% capture shopify %}
          <a class="shopify-link" href="//www.shopify.com" rel="nofollow" target="_blank" title="Create your own online store with Shopify">
            {% include 'svg-definitions' with 'shopify-logo' %}
            <span class="shopify-name">Shopify</span>
          </a>
          {% endcapture %}
          {{ 'general.password_page.powered_by_shopify_html' | t: shopify: shopify }}
        </div>
      </footer>
    </div>

    <div id="LoginModal" class="password-page__login-form text-center mfp-hide">
      <p class="h4">{{ 'general.password_page.login_form_heading' | t }}</p>
      {% form 'storefront_password' %}
      {{ form.errors | default_errors }}
      <label for="password" class="hidden-label">{{ 'general.password_page.login_form_password_label' | t }}</label>
      <div class="input-group">
        <input type="password" name="password" id="password" class="input-group-field" placeholder="{{ 'general.password_page.login_form_password_placeholder' | t }}" autofocus>
        <span class="input-group-btn">
          <input type="submit" class="btn password-page__login-form__submit" value="{{ 'general.password_page.login_form_submit' | t }}">
        </span>
      </div>
      {% endform %}
      <p class="admin-login">{{ 'general.password_page.admin_link_html' | t }}</p>
    </div>

    {{ 'theme.js' | asset_url | script_tag }}

  </body>
</html>
0 Likes
Highlighted
Tourist
11 0 2

Hello hello - sorry to bother, any suggestions?

0 Likes