/*!
Theme Name: Ddrops 2020 US EN
Theme URI: http://underscores.me/
Author: Nathan Adshead
Author URI: http://nateweb.ca
Description: Ddrops 2020 US EN
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: vitamin-d-drops
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.

Vitamin D Drops is based on Underscores https://underscores.me/, (C) 2012-2017 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/
/*--------------------------------------------------------------
# Normalize
--------------------------------------------------------------*/
/*! normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */
/* Document
	 ========================================================================== */
/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
html {
  line-height: 1.15;
  /* 1 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
}

/* Sections
	 ========================================================================== */
/**
 * Remove the margin in all browsers.
 */
body {
  margin: 0;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/* Grouping content
	 ========================================================================== */
/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
  -webkit-box-sizing: content-box;
          box-sizing: content-box;
  /* 1 */
  height: 0;
  /* 1 */
  overflow: visible;
  /* 2 */
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
  font-family: monospace, monospace;
  /* 1 */
  font-size: 1em;
  /* 2 */
}

/* Text-level semantics
	 ========================================================================== */
/**
 * Remove the gray background on active links in IE 10.
 */
a {
  background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
  border-bottom: none;
  /* 1 */
  text-decoration: underline;
  /* 2 */
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
  /* 2 */
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp {
  font-family: monospace, monospace;
  /* 1 */
  font-size: 1em;
  /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */
small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content
	 ========================================================================== */
/**
 * Remove the border on images inside links in IE 10.
 */
img {
  border-style: none;
}

/* Forms
	 ========================================================================== */
/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  /* 1 */
  font-size: 100%;
  /* 1 */
  line-height: 1.15;
  /* 1 */
  margin: 0;
  /* 2 */
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button,
input {
  /* 1 */
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select {
  /* 1 */
  text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */
button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */
fieldset {
  padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *		`fieldset` elements in all browsers.
 */
legend {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  /* 1 */
  color: inherit;
  /* 2 */
  display: table;
  /* 1 */
  max-width: 100%;
  /* 1 */
  padding: 0;
  /* 3 */
  white-space: normal;
  /* 1 */
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
  vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */
textarea {
  overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */
[type="checkbox"],
[type="radio"] {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  /* 1 */
  padding: 0;
  /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type="search"] {
  -webkit-appearance: textfield;
  /* 1 */
  outline-offset: -2px;
  /* 2 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */
[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
  -webkit-appearance: button;
  /* 1 */
  font: inherit;
  /* 2 */
}

/* Interactive
	 ========================================================================== */
/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */
details {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */
summary {
  display: list-item;
}

/* Misc
	 ========================================================================== */
/**
 * Add the correct display in IE 10+.
 */
template {
  display: none;
}

/**
 * Add the correct display in IE 10.
 */
[hidden] {
  display: none;
}

/*--------------------------------------------------------------
# Colours
--------------------------------------------------------------*/
/* Blues */
/* Grays */
/* Blacks */
/* Greens */
/* Purples */
/* Oranges */
/* Yellows */
/* Pinks */
/* FAQ box colours */
.backing-green {
  background-color: #78af2d;
}

.backing-gray {
  background-color: #f6f6f6;
}

.backing-purple {
  background-color: #572b8a;
}

/*--------------------------------------------------------------
# Product colors
--------------------------------------------------------------*/
/* Backgroung gradient from https://cssgradient.io/ */
/* slider settings
0 = product colour
80 = light colour
100 = product colour
*/
/* Blue */
div.blue section#product-hero {
  background: #0080c6;
}

div.blue figure.size-control li {
  color: #0080c6;
}

/* div.blue figure.size-control li.tns-nav-active {
  border: 2px solid #0080c6;
} */

div.blue figure.size-control li:hover,
div.blue figure.size-control li.tns-nav-active  {
  background-color: #8ed8f8;
  border: 2px solid #8ed8f8;
}

@media all and (max-width: 980px) {
  div.blue section#product-hero {
    background: none #0080c6;
  }
}

div.blue section#dose-info p a {
  color: #0080c6;
}

div.blue section#dose-info p a:hover {
  color: #8ed8f8;
}

div.blue section#recommend {
  padding: 0;
}

div.blue section#recommend .box {
  background-color: #0080c6;
}

div.blue section#contents h3.contents span {
  color: #0080c6;
}

div.blue section#contents div.box {
  background-color: #0080c6;
}

div.blue section#break {
  background-color: #0080c6;
}

div.blue section#info-slider ul {
  -ms-grid-columns: (33%)[3];
      grid-template-columns: repeat(3, 33%);
}

div.blue section#info-slider ul li:hover {
  color: #0080c6;
}

div.blue section#info-slider ul li.tns-nav-active {
  color: #0080c6;
}

div.blue section#carousel ul li.tns-item div.content span {
  color: #0080c6;
}

div.blue section#carousel ul li.tns-item div.contents p {
  color: #0080c6;
}

div.blue section#carousel ul li.tns-item div.contents p a {
  color: #0080c6;
}

div.blue section#carousel ul li.tns-item div.contents p a:hover {
  color: #8ed8f8;
}

div.blue section#reviews h2 {
  color: #0080c6;
}

div.blue section#reviews a.btn,
div.blue section#reviews button {
  background-color: #0080c6;
  border: none;
}

div.blue section#reviews a.btn:hover,
div.blue section#reviews button:hover {
  background-color: #8ed8f8;
  color: #0080c6;
}

div.blue section#reviews .r-post h2::after {
  background-color: #0080c6;
}

div.blue section#reviews .glsr-review {
  border-bottom: 1px solid #0080c6;
}

div.blue section#reviews .page-numbers {
  background-color: #0080c6;
}

div.blue section#reviews .page-numbers.current {
  background-color: #8ed8f8;
}

/* Pink */
div.pink section#product-hero {
  background: #d80b8d;
}

div.pink figure.size-control ul#sizes li {
  color: #d80b8d;
}

div.pink figure.size-control ul#sizes li.tns-nav-active {
  border: 2px solid #d80b8d;
}

div.pink figure.size-control ul#sizes li:hover {
  background-color: #ffb9e6;
  border: 2px solid #ffb9e6;
}

@media all and (max-width: 980px) {
  div.pink section#product-hero {
    background: none #d80b8d;
  }
}

div.pink section#dose-info p a {
  color: #d80b8d;
}

div.pink section#dose-info p a:hover {
  color: #f341b2;
}

div.pink section#recommend {
  padding: 0;
}

div.pink section#recommend .box {
  background-color: #d80b8d;
}

div.pink section#contents h3.contents span {
  color: #d80b8d;
}

div.pink section#contents div.box {
  background-color: #d80b8d;
}

div.pink section#break {
  background-color: #d80b8d;
}

div.pink section#info-slider ul {
  -ms-grid-columns: (33%)[3];
      grid-template-columns: repeat(3, 33%);
}

div.pink section#info-slider ul li:hover {
  color: #d80b8d;
}

div.pink section#info-slider ul li.tns-nav-active {
  color: #d80b8d;
}

div.pink section#carousel ul li.tns-item div.content span {
  color: #d80b8d;
}

div.pink section#carousel ul li.tns-item div.contents p {
  color: #d80b8d;
}

div.pink section#carousel ul li.tns-item div.contents p a {
  color: #d80b8d;
}

div.pink section#carousel ul li.tns-item div.contents p a:hover {
  color: #f341b2;
}

div.pink section#reviews h2 {
  color: #d80b8d;
}

div.pink section#reviews a.btn,
div.pink section#reviews button {
  background-color: #d80b8d;
  border: none;
}

div.pink section#reviews a.btn:hover,
div.pink section#reviews button:hover {
  background-color: #ffb9e6;
  color: #d80b8d;
}

div.pink section#reviews .r-post h2::after {
  background-color: #d80b8d;
}

div.pink section#reviews .glsr-review {
  border-bottom: 1px solid #d80b8d;
}

div.pink section#reviews .page-numbers {
  background-color: #d80b8d;
}

div.pink section#reviews .page-numbers.current {
  background-color: #ffb9e6;
}

/* Green */
div.green section#product-hero {
  background: #8ec63f;
}

div.green figure.size-control ul#sizes li {
  color: #8ec63f;
}

div.green figure.size-control ul#sizes li.tns-nav-active {
  border: 2px solid #8ec63f;
}

div.green figure.size-control ul#sizes li:hover {
  background-color: #eaffcb;
  border: 2px solid #eaffcb;
}

@media all and (max-width: 980px) {
  div.green section#product-hero {
    background: none #8ec63f;
  }
}

div.green section#dose-info p a {
  color: #8ec63f;
}

div.green section#dose-info p a:hover {
  color: #b9de84;
}

div.green section#recommend {
  padding: 0;
}

div.green section#recommend .box {
  background-color: #8ec63f;
}

div.green section#contents h3.contents span {
  color: #8ec63f;
}

div.green section#contents div.box {
  background-color: #8ec63f;
}

div.green section#break {
  background-color: #8ec63f;
}

div.green section#info-slider ul {
  -ms-grid-columns: (33%)[3];
      grid-template-columns: repeat(3, 33%);
}

div.green section#info-slider ul li:hover {
  color: #8ec63f;
}

div.green section#info-slider ul li.tns-nav-active {
  color: #8ec63f;
}

div.green section#carousel ul li.tns-item div.content span {
  color: #8ec63f;
}

div.green section#carousel ul li.tns-item div.contents p {
  color: #8ec63f;
}

div.green section#carousel ul li.tns-item div.contents p a {
  color: #8ec63f;
}

div.green section#carousel ul li.tns-item div.contents p a:hover {
  color: #b9de84;
}

div.green section#reviews h2 {
  color: #8ec63f;
}

div.green section#reviews a.btn,
div.green section#reviews button {
  background-color: #8ec63f;
  border: none;
}

div.green section#reviews a.btn:hover,
div.green section#reviews button:hover {
  background-color: #eaffcb;
  color: #8ec63f;
}

div.green section#reviews .r-post h2::after {
  background-color: #8ec63f;
}

div.green section#reviews .glsr-review {
  border-bottom: 1px solid #8ec63f;
}

div.green section#reviews .page-numbers {
  background-color: #8ec63f;
}

div.green section#reviews .page-numbers.current {
  background-color: #eaffcb;
}

/* Purple */
div.purple section#product-hero {
  background: #592a8a;
}

div.purple figure.size-control ul#sizes li {
  color: #592a8a;
}

div.purple figure.size-control ul#sizes li.tns-nav-active {
  border: 2px solid #592a8a;
}

div.purple figure.size-control ul#sizes li:hover {
  background-color: #d5b4f7;
  border: 2px solid #d5b4f7;
}

@media all and (max-width: 980px) {
  div.purple section#product-hero {
    background: none #592a8a;
  }
}

div.purple section#dose-info p a {
  color: #592a8a;
}

div.purple section#dose-info p a:hover {
  color: #894fc5;
}

div.purple section#recommend {
  padding: 0;
}

div.purple section#recommend .box {
  background-color: #592a8a;
}

div.purple section#contents h3.contents span {
  color: #592a8a;
}

div.purple section#contents div.box {
  background-color: #592a8a;
}

div.purple section#break {
  background-color: #592a8a;
}

div.purple section#info-slider ul {
  -ms-grid-columns: (33%)[3];
      grid-template-columns: repeat(3, 33%);
}

div.purple section#info-slider ul li:hover {
  color: #592a8a;
}

div.purple section#info-slider ul li.tns-nav-active {
  color: #592a8a;
}

div.purple section#carousel ul li.tns-item div.content span {
  color: #592a8a;
}

div.purple section#carousel ul li.tns-item div.contents p {
  color: #592a8a;
}

div.purple section#carousel ul li.tns-item div.contents p a {
  color: #592a8a;
}

div.purple section#carousel ul li.tns-item div.contents p a:hover {
  color: #894fc5;
}

div.purple section#reviews h2 {
  color: #592a8a;
}

div.purple section#reviews a.btn,
div.purple section#reviews button {
  background-color: #592a8a;
  border: none;
}

div.purple section#reviews a.btn:hover,
div.purple section#reviews button:hover {
  background-color: #d5b4f7;
  color: #592a8a;
}

div.purple section#reviews .r-post h2::after {
  background-color: #592a8a;
}

div.purple section#reviews .glsr-review {
  border-bottom: 1px solid #592a8a;
}

div.purple section#reviews .page-numbers {
  background-color: #592a8a;
}

div.purple section#reviews .page-numbers.current {
  background-color: #d5b4f7;
}

/* Baby Blue */
div.baby-blue section#product-hero {
  background: #d3eefb;
}

div.baby-blue section#product-hero h1.product-name {
  color: #0080c6 !important;
}

div.baby-blue section#product-hero .sub-text {
  color: #0080c6 !important;
}

div.baby-blue section#product-hero ul li {
  color: #0080c6 !important;
}

div.baby-blue figure.size-control ul#sizes li {
  color: #8bd3f5;
}

div.baby-blue figure.size-control ul#sizes li.tns-nav-active {
  border: 2px solid #8bd3f5;
}

div.baby-blue figure.size-control ul#sizes li:hover {
  background-color: #0080c6;
  border: 2px solid #0080c6;
  color: white;
}

@media all and (max-width: 980px) {
  div.baby-blue section#product-hero {
    /* background: none #8bd3f5; */
    background: none #d3eefb;
  }
}

div.baby-blue section#dose-info p a {
  color: #8bd3f5;
}

div.baby-blue section#dose-info p a:hover {
  color: #0080c6;
}

div.baby-blue section#recommend {
  padding: 0;
}

div.baby-blue section#recommend .box {
  background-color: #8bd3f5;
}

div.baby-blue section#contents h3.contents span {
  color: #8bd3f5;
}

div.baby-blue section#contents div.box {
  background-color: #8bd3f5;
}

div.baby-blue section#break {
  background-color: #8bd3f5;
}

div.baby-blue section#info-slider ul {
  -ms-grid-columns: (33%)[3];
      grid-template-columns: repeat(3, 33%);
}

div.baby-blue section#info-slider ul li:hover {
  color: #8bd3f5;
}

div.baby-blue section#info-slider ul li.tns-nav-active {
  color: #8bd3f5;
}

div.baby-blue section#carousel ul li.tns-item div.content span {
  color: #8bd3f5;
}

div.baby-blue section#carousel ul li.tns-item div.contents p {
  color: #8bd3f5;
}

div.baby-blue section#carousel ul li.tns-item div.contents p a {
  color: #8bd3f5;
}

div.baby-blue section#carousel ul li.tns-item div.contents p a:hover {
  color: #0080c6;
}

div.baby-blue section#reviews h2 {
  color: #8bd3f5;
}

div.baby-blue section#reviews a.btn,
div.baby-blue section#reviews button {
  background-color: #8bd3f5;
  border: none;
}

div.baby-blue section#reviews a.btn:hover,
div.baby-blue section#reviews button:hover {
  background-color: #0080c6;
}

div.baby-blue section#reviews .r-post h2::after {
  background-color: #8bd3f5;
}

div.baby-blue section#reviews .glsr-review {
  border-bottom: 1px solid #8bd3f5;
}

div.baby-blue section#reviews .page-numbers {
  background-color: #8bd3f5;
}

div.baby-blue section#reviews .page-numbers.current {
  background-color: #0080c6;
}

/* Dark Blue */
div.dark-blue section#product-hero {
  background: #002d73;
}

div.dark-blue section#product-hero h1.product-name {
  color: #002d73;
}

div.dark-blue figure.size-control ul#sizes li {
  color: #002d73;
}

div.dark-blue figure.size-control ul#sizes li.tns-nav-active {
  border: 2px solid #002d73;
}

div.dark-blue figure.size-control ul#sizes li:hover {
  background-color: #0080c6;
  border: 2px solid #0080c6;
  color: white;
}

@media all and (max-width: 980px) {
  div.dark-blue section#product-hero {
    background: none #002d73;
  }
}

div.dark-blue section#dose-info p a {
  color: #002d73;
}

div.dark-blue section#dose-info p a:hover {
  color: #0080c6;
}

div.dark-blue section#recommend {
  padding: 0;
}

div.dark-blue section#recommend .box {
  background-color: #002d73;
}

div.dark-blue section#contents h3.contents span {
  color: #002d73;
}

div.dark-blue section#contents div.box {
  background-color: #002d73;
}

div.dark-blue section#break {
  background-color: #002d73;
}

div.dark-blue section#info-slider ul {
  -ms-grid-columns: (33%)[3];
      grid-template-columns: repeat(3, 33%);
}

div.dark-blue section#info-slider ul li:hover {
  color: #002d73;
}

div.dark-blue section#info-slider ul li.tns-nav-active {
  color: #002d73;
}

div.dark-blue section#carousel ul li.tns-item div.content span {
  color: #002d73;
}

div.dark-blue section#carousel ul li.tns-item div.contents p {
  color: #002d73;
}

div.dark-blue section#carousel ul li.tns-item div.contents p a {
  color: #002d73;
}

div.dark-blue section#carousel ul li.tns-item div.contents p a:hover {
  color: #0080c6;
}

div.dark-blue section#reviews h2 {
  color: #002d73;
}

div.dark-blue section#reviews a.btn,
div.dark-blue section#reviews button {
  background-color: #002d73;
  border: none;
}

div.dark-blue section#reviews a.btn:hover,
div.dark-blue section#reviews button:hover {
  background-color: #0080c6;
}

div.dark-blue section#reviews .r-post h2::after {
  background-color: #002d73;
}

div.dark-blue section#reviews .glsr-review {
  border-bottom: 1px solid #002d73;
}

div.dark-blue section#reviews .page-numbers {
  background-color: #002d73;
}

div.dark-blue section#reviews .page-numbers.current {
  background-color: #0080c6;
}

/*--------------------------------------------------------------
# Typography
--------------------------------------------------------------*/
/* Fonts */
/* Headings */
h1,
h2,
h3,
h4,
h5,
h6 {
  line-height: 1.5;
  margin: 0;
  word-wrap: break-word;
}

p {
  word-wrap: break-word;
}

h1.hero-title {
  font-size: 3rem;
  font-weight: 900;
  color: white;
  text-align: center;
}

h1.page-title {
  font-size: 2.5rem;
  font-weight: 900;
  color: white;
  text-align: center;
}

p.sub-title {
  color: white;
  font-size: 1.2rem;
  width: 100%;
  max-width: 550px;
  margin: 0 auto;
  text-align: center;
  padding: 0 1rem;
}

h2 {
  font-size: 2rem;
  font-weight: 900;
  text-align: center;
  color: #333;
  margin-bottom: 3rem;
}

h2.ingredients-title {
  color: white;
  font-size: 2rem;
  font-weight: 700;
}

h2.box-title {
  color: white;
  font-size: 2rem;
  margin-bottom: 2rem;
}

p.hero-sub {
  margin: 0.7rem 0 2rem 0;
  font-size: 1.4rem;
  font-weight: 500;
  color: white;
}

h5.newsletter {
  color: white;
  font-size: 2rem;
  font-weight: 900;
  margin-bottom: 0;
}

h6.footer {
  color: #707070;
  font-weight: 900;
  margin-bottom: 0.95rem;
  font-size: 1.1rem;
  text-transform: uppercase;
}

li.expand a::after,
.tns-controls {
  font-family: Fontawesome;
}

sup {
  top: -0.2em;
  font-size: 60%;
}

/* QR pages sup overwrite */
body.info sup {
  top: -0.5em;
}

/*--------------------------------------------------------------
# Site
--------------------------------------------------------------*/
:root {
  font-size: 16px;
}

* {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  position: relative;
  outline: none !important;
}

body {
  font-family: museo-sans-rounded, sans-serif;
  font-weight: 300;
  font-style: normal;
  line-height: 1.5;
  -webkit-overflow-scrolling: touch;
}

body,
html {
  width: 100%;
  height: 100%;
}

section {
  padding: 4rem 0 5rem 0;
}

.container {
  width: 100%;
  margin: 0 auto;
}

.main-container {
  width: 100%;
}

.full-container {
  max-width: 1600px;
}

.lg-container {
  max-width: 1300px;
}

.pro-container {
  max-width: 1100px;
}

.mid-container {
  max-width: 1000px;
}

.sm-container {
  max-width: 950px;
}

.tween-container {
  max-width: 730px;
}

.mini-container {
  max-width: 430px;
}

.clear::after,
.container::after {
  content: "";
  display: block;
  clear: both;
}

.d-flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.d-grid {
  display: -ms-grid;
  display: grid;
}

.left {
  float: left;
}

.right {
  float: right;
}

a {
  display: block;
  text-decoration: none;
  word-break: break-word;
}

ul {
  padding: 0;
  margin: 0;
  list-style-type: none;
}

img {
  display: block;
}

.btn {
  color: white;
  padding: 0.5rem 4rem;
  display: inline-block;
  border-radius: 0.25rem;
  -webkit-box-shadow: 0 3px 8px rgba(0, 0, 0, 0.5);
          box-shadow: 0 3px 8px rgba(0, 0, 0, 0.5);
  font-size: 1rem;
  line-height: 2.5rem;
}

.blue__btn {
  background-color: #0080c6;
}

.blue__btn:hover {
  background-color: #0094e5;
}

.orange__btn {
  background-color: #ff901d;
}

.orange__btn:hover {
  background-color: #ec8e3d;
}

/* Remove hero top space */
section#hero {
  padding: 0;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  min-height: 150px;
  height: 40vh;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  max-height: 550px;
}

#color-bar {
  overflow: hidden;
}

/* Additional block */
section#additional {
  padding: 0 2rem;
}

section#additional div.box {
  padding: 4rem 0;
}

section#additional div.box aside {
  float: left;
  width: 50%;
  min-width: 200px;
  -ms-grid-columns: 70px 73%;
      grid-template-columns: 70px 73%;
  gap: 2rem;
}

section#additional div.box aside div.img {
  border-radius: 50%;
  border: 1px solid #0080c6;
  width: 70px;
  height: 70px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  top: 1rem;
}

section#additional div.box aside div.img img {
  padding: 0.9rem;
  width: 100%;
}

section#additional div.box aside div.text h6 {
  color: #0080c6;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.1;
  margin-bottom: 1rem;
}

section#additional div.box aside div.text p {
  font-weight: 500;
}

section#additional div.box aside div.text p a {
  display: inline-block;
  color: #0080c6;
  font-weight: 700;
}

section#additional div.box aside div.text p a:hover {
  color: #8ed8f8;
}

section#additional div.box aside:first-child {
  border-right: 1px solid #0080c6;
}

section#additional div.box aside:last-child {
  padding-left: 3rem;
}

.content-block {
  max-width: 1000px;
  margin: 0 auto;
}

/* Recommend boxes */
section#recommend {
  padding: 0;
}

section#recommend .box {
  padding: 4rem 2rem;
}

section#recommend .box ul {
  text-align: center;
}

section#recommend .box ul li {
  display: inline-block;
  width: 100%;
  max-width: 12%;
  min-width: 100px;
  margin: 0 1rem;
  vertical-align: top;
  text-align: center;
}

section#recommend .box ul li img {
  margin: 0 auto;
}

section#recommend .box ul li span {
  display: block;
  color: white;
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1.2;
  margin: 0.6rem 0 0.8rem 0;
  text-transform: uppercase;
}

/* Spacing for nav */
div#content {
  padding-top: 68px;
}

/* References Box */
section#references {
  padding: 6rem 1rem 0 1rem;
}

section#references a {
  cursor: pointer;
}

section#references a span::before {
  content: 'Show references';
  color: #0080c6;
  font-size: 0.8rem;
  font-weight: 700;
}

section#references a span::after {
  content: '\f139';
  font-family: Fontawesome;
  margin-left: 0.4rem;
  color: #0080c6;
  font-size: 0.7rem;
  display: inline-block;
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}

section#references a::after {
  content: '';
  width: 100%;
  height: 1px;
  background-color: #0080c6;
  display: block;
  position: absolute;
  top: 0.7rem;
  right: 0;
  width: calc(100% - 8rem);
}

section#references div.contents {
  max-height: 0;
  overflow: hidden;
}

section#references div.contents ol {
  counter-reset: my-counter;
  list-style: none;
  padding: 0;
}

section#references div.contents ol li {
  counter-increment: my-counter;
  color: #707070;
  margin-bottom: 2rem;
}

section#references div.contents ol li a {
  display: inline-block;
  font-weight: 700;
  color: #0080c6;
}

section#references div.contents ol li a:hover {
  color: #8ed8f8;
}

section#references div.contents ol li a::after {
  content: none;
}

section#references div.contents ol li::before {
  content: "[" counter(my-counter) "] ";
  color: #707070;
}

body.info section#references div.contents ol li::before {
  content: "";
}

section#references.open span::after {
  -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
}

section#references.open span::before {
  content: 'Hide references';
}

section#references.open div.contents {
  max-height: 500px;
}

/*--------------------------------------------------------------
# Navigation
--------------------------------------------------------------*/
nav#site-navigation {
  display: block;
}

nav#site-navigation ul#menu-main-navigation li {
  display: inline-block;
}

nav#site-navigation ul#menu-main-navigation li a {
  text-decoration: none;
  padding: 0.7rem;
  color: #707070;
  font-size: 0.85rem;
  cursor: pointer;
  text-transform: uppercase;
  font-weight: 900;
}

nav#site-navigation ul#menu-main-navigation li a:hover {
  color: #0080c6;
}

nav#site-navigation ul#menu-main-navigation li.current-menu-item a {
  color: #0080c6;
}

nav#site-navigation ul#menu-main-navigation li.expand {
  margin-right: 10px;
}

nav#site-navigation ul#menu-main-navigation li.expand a::after {
  content: " \0203A";
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
  display: block;
  position: absolute;
  top: 0.6rem;
  right: -0.1rem;
  font-weight: 700;
}

body nav#site-navigation ul#menu-main-navigation li.expand a.active {
  color: #0080c6;
}

body nav#site-navigation ul#menu-main-navigation li.expand a.active::after {
  -webkit-transform: rotate(-90deg);
          transform: rotate(-90deg);
  right: 0.19rem;
}

nav#mobile-nav ul#menu-mobile-menu li.show ul.sub-menu {
  display: block;
}

/*--------------------------------------------------------------
# Header
--------------------------------------------------------------*/
header#masthead {
  position: fixed;
  top: 0;
  width: 100%;
  left: 0;
  background-color: white;
  width: 100%;
  z-index: 999;
  -webkit-box-shadow: 0 -5px 10px 5px rgba(0, 0, 0, 0.5);
          box-shadow: 0 -5px 10px 5px rgba(0, 0, 0, 0.5);
}

header#masthead .header-backing {
  background-color: white;
}

header#masthead .header-backing .container {
  padding: 0 1rem;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-grid-columns: 140px 1fr 60px 90px;
      grid-template-columns: 140px 1fr 60px 90px;
}

header#masthead .header-backing .container #main-logo {
  min-width: 60px;
  max-width: 90px;
  width: 6rem;
  padding: 0.7rem 0;
}

header#masthead .header-backing .container #search {
  -ms-grid-column-align: end;
      justify-self: end;
}

header#masthead .header-backing .container #search a.search-btn {
  cursor: pointer;
}

header#masthead .header-backing .container #search a.search-btn svg path {
  fill: #0080c6;
}

header#masthead .header-backing .container #search a.search-btn.over svg path {
  fill: #a6a6a6;
}

header#masthead .header-backing .container #search a.search-btn:hover svg path {
  fill: #8ed8f8;
}

header#masthead nav#products-nav {
  width: 100%;
  background-color: white;
  z-index: -2;
  position: absolute;
  bottom: 2rem;
  padding: 1.5rem 0 2.5rem 0;
  -webkit-box-shadow: 0 -5px 10px 5px rgba(0, 0, 0, 0.5);
          box-shadow: 0 -5px 10px 5px rgba(0, 0, 0, 0.5);
}

header#masthead nav#products-nav .container {
  width: 100%;
  max-width: 1313px;
}

header#masthead nav#products-nav .container ul {
  text-align: center;
}

header#masthead nav#products-nav .container ul li {
  display: inline-block;
  width: 13.5%;
  vertical-align: top;
}

header#masthead nav#products-nav .container ul li a img {
  margin: 0 auto 1rem auto;
  width: 100%;
  max-width: 80px;
}

header#masthead nav#products-nav .container ul li a span {
  display: block;
  text-align: center;
  color: #333;
}

header#masthead nav#products-nav .container ul li a span.label {
  font-size: 1rem;
  font-weight: 700;
}

header#masthead nav#products-nav .container ul li a span.sub {
  font-size: 0.8rem;
  font-weight: 500;
}

header#masthead nav#products-nav .container ul li a .view-all {
  width: 137px;
  height: 137px;
  border: 1px solid lightgray;
  margin: 0 auto;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  color: #707070;
  font-size: 1.2rem;
  text-transform: uppercase;
  font-weight: 700;
  text-align: center;
}

header#masthead nav#products-nav .container ul li a:hover span {
  color: #0080c6;
}

header#masthead nav#products-nav .container ul li a:hover .view-all {
  color: #0080c6;
}

nav.active-menu {
  bottom: -260px !important;
}

/*--------------------------------------------------------------
# Search results
--------------------------------------------------------------*/
.screen-reader-text,
.search-submit {
  display: none;
}

input[type="search"].search-field {
  width: 100%;
  height: 70px;
  border: 0;
  padding: 0 4rem;
  font-size: 1.2rem;
  background-color: #f1f1f1;
}

input[type="search"].search-field:focus {
  background-color: white;
}

input[type="search"]::-webkit-input-placeholder {
  color: #afafaf;
}

input[type="search"]:-ms-input-placeholder {
  color: #afafaf;
}

input[type="search"]::-ms-input-placeholder {
  color: #afafaf;
}

input[type="search"]::placeholder {
  color: #afafaf;
}

#search-bar {
  z-index: 9;
  width: 100%;
  height: 70px;
  position: fixed;
  top: -40px;
  left: 0;
  background-color: white;
  -webkit-box-shadow: 0 -5px 10px 5px rgba(0, 0, 0, 0.5);
          box-shadow: 0 -5px 10px 5px rgba(0, 0, 0, 0.5);
}

#search-bar.expand {
  top: 70px;
}

.searchwp-live-search-result a {
  font-size: 1rem;
  color: #0080c6;
  font-weight: 500;
}

.searchwp-live-search-result:hover {
  background-color: #f1f1f1;
}

/*--------------------------------------------------------------
# Language selector
--------------------------------------------------------------*/
body.ca-en nav#mobile ul li.language a::before {
  content: 'CA (EN)';
}

body.ca-fr nav#mobile ul li.language a::before {
  content: 'CA (FR)';
}

body.us-en nav#mobile ul li.language a::before {
  content: 'US (EN)';
}

body.us-es nav#mobile ul li.language a::before {
  content: 'US (ES)';
}

body.uk-en nav#mobile ul li.language a::before {
  content: 'UK (EN)';
}

div#lang {
  float: right;
  padding: 0;
  margin-right: 0;
  margin-left: auto;
}

div#lang a {
  text-decoration: none;
  color: gray;
  cursor: pointer;
  padding: 0.2em 0 0.2em 1em;
  border-left: 1px solid gray;
}

#lang-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 99999;
  display: none;
}

body.lang-menu {
  height: 100vh;
  overflow-y: hidden;
  padding-right: 15px;
}

body.lang-menu header#masthead {
  padding-right: 15px;
}

body.lang-menu #lang-modal {
  display: block;
}

body.lang-menu #lang-modal #wrap {
  background-color: rgba(255, 255, 255, 0.8);
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  height: 100%;
}

body.lang-menu #lang-modal #selector-box {
  width: 100%;
  max-width: 300px;
  margin: 0 auto;
  background-color: white;
  -webkit-box-shadow: 1px 1px 15px rgba(0, 0, 0, 0.3);
          box-shadow: 1px 1px 15px rgba(0, 0, 0, 0.3);
}

body.lang-menu #lang-modal ul#lang-list,
body.lang-menu #lang-modal ul#qr-lang-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

body.lang-menu #lang-modal ul#lang-list li,
body.lang-menu #lang-modal ul#qr-lang-list li {
  border-bottom: 1px solid gray;
}

body.lang-menu #lang-modal ul#lang-list li a,
body.lang-menu #lang-modal ul#qr-lang-list li a {
  text-align: center;
  text-decoration: none;
  color: gray;
  text-transform: uppercase;
  padding: 1em;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 90% 10%;
      grid-template-columns: 90% 10%;
}

body.lang-menu #lang-modal ul#lang-list li a span,
body.lang-menu #lang-modal ul#qr-lang-list li a span {
  text-align: left;
}

body.lang-menu #lang-modal ul#lang-list li a .flag img,
body.lang-menu #lang-modal ul#qr-lang-list li a .flag img {
  max-width: 25px;
  margin: 0 0 0 auto;
}

body.lang-menu #lang-modal ul#lang-list li:last-of-type,
body.lang-menu #lang-modal ul#qr-lang-list li:last-of-type {
  border-bottom: none;
}

#lang-modal ul#lang-list li a:hover,
#lang-modal ul#qr-lang-list li a:hover,
body.ca-en #lang-modal ul#lang-list li a.ca-en,
body.ca-fr #lang-modal ul#lang-list li a.ca-fr,
body.us-en #lang-modal ul#lang-list li a.us-en,
body.us-es #lang-modal ul#lang-list li a.us-es,
body.uk-en #lang-modal ul#lang-list li a.uk-en,
body.us-cn #lang-modal ul#lang-list li a.cn-cn,
body.us-cn #lang-modal ul#qr-lang-list li a.cn-cn,
body.us-en #lang-modal ul#qr-lang-list li a.cn-en {
  background-color: #0080c6;
  color: white !important;
}

body.ca-en div#lang a::before {
  content: 'CA (EN)';
}

body.ca-fr div#lang a::before {
  content: 'CA (FR)';
}

body.us-en div#lang a::before {
  content: 'US (EN)';
}

body.us-es div#lang a::before {
  content: 'US (ES)';
}

body.uk-en div#lang a::before {
  content: 'UK (EN)';
}

#first-lang-modal {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
  z-index: -999;
}

#first-lang-modal #wrap {
  background-color: rgba(255, 255, 255, 0.8);
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  height: 100%;
}

#first-lang-modal #wrap .content {
  background-color: white;
  border-radius: 10px;
  padding: 3rem;
  -webkit-box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2);
          box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2);
  margin: 0 auto;
}

#first-lang-modal #wrap .content .logo {
  width: 150px;
  height: auto;
  margin: 0 auto 2rem auto;
}

#first-lang-modal #wrap .content .logo img {
  width: 100%;
}

#first-lang-modal #wrap .content p {
  font-weight: 700;
  text-align: center;
}

#first-lang-modal #wrap .content ul.first-lang-list li {
  padding: 0.9rem 0;
}

#first-lang-modal #wrap .content ul.first-lang-list li a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  color: #333;
}

#first-lang-modal #wrap .content ul.first-lang-list li a span {
  display: inline-block;
  width: 100%;
  padding-right: 2rem;
}

#first-lang-modal #wrap .content ul.first-lang-list li a .flag {
  display: inline-block;
  width: 30px;
}

#first-lang-modal #wrap .content ul.first-lang-list li a:hover span {
  color: #0080c6;
}

body.lang #first-lang-modal {
  display: block;
  z-index: 99999;
}

/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/
footer#colophon section#newsletter {
  background-color: #0080c6;
  padding: 4rem 1.5rem;
}

footer#colophon section#newsletter #news-img {
  width: 4.8rem;
  margin-right: 2rem;
}

footer#colophon section#newsletter #news-text p {
  color: white;
  margin: 0;
  font-size: 1rem;
  font-weight: 500;
  width: 100%;
  max-width: 350px;
}

footer#colophon section#footer {
  padding: 6rem 2rem 4rem 2rem;
}

footer#colophon section#footer #foot-nav {
  margin-right: 2rem;
}

footer#colophon section#footer #foot-nav nav {
  width: 100%;
  min-width: 170px;
}

footer#colophon section#footer #foot-nav nav ul li {
  margin: 0.5rem 0;
}

footer#colophon section#footer #foot-nav nav ul li a {
  text-decoration: none;
  color: #707070;
  font-size: 1rem;
  font-weight: 500;
}

footer#colophon section#footer #foot-nav nav ul li a:hover {
  color: #8ed8f8;
}

footer#colophon section#footer #foot-nav nav ul li.current-menu-item a {
  color: #0080c6;
}

footer#colophon section#footer section#social-footer {
  padding: 6rem 0 0 0;
}

footer#colophon section#footer section#social-footer nav#social-footer ul#social {
  width: 100%;
  margin: 0 auto;
  text-align: center;
}

footer#colophon section#footer section#social-footer nav#social-footer ul#social li {
  width: 1.3rem;
  height: 1.3rem;
  display: inline-block;
  margin: 0 0.5rem;
}

footer#colophon section#footer section#social-footer nav#social-footer ul#social li a img {
  width: 100%;
  -webkit-filter: grayscale(1);
          filter: grayscale(1);
}

footer#colophon section#footer section#social-footer nav#social-footer ul#social li a:hover img {
  -webkit-filter: grayscale(0);
          filter: grayscale(0);
}

footer#colophon section#footer aside#disclaimer {
  width: 100%;
  max-width: 430px;
  margin-left: auto;
}

footer#colophon section#footer aside#disclaimer p {
  color: #a6a6a6;
  font-weight: 500;
  margin: 0;
  font-size: 0.9rem;
}

footer#colophon section#copyright {
  background-color: #0080c6;
  text-align: center;
  color: white;
  width: 100%;
  padding: 1rem 0;
  font-size: 0.9rem;
}

nav#mobile {
  display: block;
  position: fixed;
  bottom: 0;
  background-color: #0080c6;
  width: 100%;
  z-index: 9999;
  height: 53px;
  -webkit-box-shadow: 0 -2px 9px rgba(0, 0, 0, 0.2);
          box-shadow: 0 -2px 9px rgba(0, 0, 0, 0.2);
}

nav#mobile ul li {
  display: inline-block;
}

nav#mobile ul li a.mobile {
  text-decoration: none;
  height: 75px;
}

nav#mobile ul li a.mobile::before {
  content: url(./img/icon-hamburger.svg);
  display: inline-block;
  height: 24px;
  width: 20px;
  margin-right: 1rem;
}

nav#mobile ul li a {
  text-transform: uppercase;
  font-weight: 900;
  position: relative;
  cursor: pointer;
  color: white;
  padding: 0 1rem;
  line-height: 3.6rem;
  font-size: 22px;
}

nav#mobile ul li.language {
  float: right;
}

nav#mobile-nav {
  position: fixed;
  top: 0;
  left: -100%;
  background-color: white;
  width: 100%;
  height: 100%;
  z-index: 9998;
  display: block;
}

nav#mobile-nav ul {
  padding: 0.5rem 1rem;
}

nav#mobile-nav ul li {
  display: block;
  border-bottom: 2px solid #f6f6f6;
}

nav#mobile-nav ul li a {
  display: block;
  padding: 0.5rem 0;
  color: #0080c6;
  font-size: 1.5rem;
  cursor: pointer;
  line-height: 2;
  height: auto;
  font-weight: 900;
}

nav#mobile-nav ul li ul.sub-menu {
  padding: 0 0 1rem 1rem !important;
  display: none;
}

nav#mobile-nav ul li ul.sub-menu li {
  border: none !important;
}

nav#mobile-nav ul li ul.sub-menu li a {
  color: #707070 !important;
  padding: 0 !important;
  font-size: 1.2rem;
}

nav#mobile-nav ul li:last-of-type {
  border-bottom: none;
}

nav#mobile-nav ul .drop > a::after {
  content: "+";
  position: absolute;
  right: 0;
}

nav#mobile-nav.open {
  left: 0;
}

div#disc-mobile {
  padding: 0 2rem 2rem 2rem;
  color: #a6a6a6;
}

div#disc-mobile,
nav#mobile,
nav#mobile-nav {
  display: none;
}

body.nav-expand ul.sub-menu {
  display: block !important;
}

/*--------------------------------------------------------------
# Slider
--------------------------------------------------------------*/
body.page-our-story section#slider-block {
  padding: 0;
  margin: 5rem 0;
}

body.page-our-story section#slider-block div#tns1-mw {
  width: 85%;
  max-width: 900px;
  margin: 0 auto;
}

body.page-our-story section#slider-block div#tns1-mw div.story-slider div.slide div.img img {
  width: 100%;
  max-width: 180px;
  margin: 0 auto;
}

body.page-our-story section#slider-block div#tns1-mw div.story-slider div.slide p.text {
  font-size: 0.9rem;
  font-weight: 500;
}

body.page-our-story section#slider-block div#tns1-mw div.story-slider div.slide p.text a {
  display: inline-block;
  color: #0080c6;
}

body.page-our-story section#slider-block div#tns1-mw div.story-slider div.slide p.text a:hover {
  color: #8ed8f8;
}

.tns-outer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.tns-controls {
  position: absolute;
  height: auto;
  max-height: 40px;
  width: 100%;
}

.tns-controls button span::before {
  font-size: 2.5rem;
  opacity: 0.5;
}

.tns-controls button:hover span::before {
  opacity: 1;
}

[data-controls] {
  border: 0;
  padding: 0;
  font-size: 30px;
  position: absolute;
  top: 50%;
  margin-top: -18px;
  z-index: 1;
  background: transparent;
}

[data-controls="prev"] {
  left: 0;
}

[data-controls="next"] {
  right: 0;
}

section#awards {
  padding-left: 1rem;
  padding-right: 1rem;
}

section#awards .container {
  text-align: center;
}

section#awards .container .tns-outer {
  margin: 4rem 0;
}

section#awards .container .tns-outer li.item {
  margin: 0;
}

section#awards .container .tns-outer li.item img {
  margin: 0 auto;
}

/*--------------------------------------------------------------
# Search page
--------------------------------------------------------------*/
#content.content-search section#hero {
  background-repeat: no-repeat;
  background-size: cover;
}

#content.content-search section#hero h1 {
  color: white;
  line-height: 1.1;
  font-size: 3rem;
  text-align: center;
}

#content.content-search article.products a.post-thumbnail img {
  margin: 0 auto;
}

#content.content-search article a {
  border-bottom: 1px solid #a6a6a6;
  padding: 2rem 2.5rem;
}

#content.content-search article a header.entry-header h2.entry-title {
  text-align: left;
  color: #0080c6;
  font-size: 1.2rem;
}

#content.content-search article a header.entry-header h2.entry-title a {
  color: #0080c6;
}

#content.content-search article a div.content {
  -ms-grid-columns: 200px 1fr;
      grid-template-columns: 200px 1fr;
  gap: 2rem;
}

#content.content-search article a div.content .img,
#content.content-search article a div.content .color {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  width: 200px;
  height: 200px;
  border-radius: 5px;
}

#content.content-search article a div.content .color {
  background-color: #0080c6;
}

#content.content-search article a div.content .color img {
  max-width: 130px;
  width: 65%;
  height: 100%;
  margin: 0 auto;
}

#content.content-search article a div.content .entry-summary {
  color: #333;
  font-size: 0.9rem;
  width: 70%;
}

#content.content-search article a div.content .img,
#content.content-search article a div.content .entry-summary {
  display: inline-block;
  vertical-align: top;
}

#content.content-search article a div.content .title-container {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

#content.content-search article a div.content .title-container h2 {
  text-align: left;
  color: #0080c6;
  font-size: 2rem;
  margin: 0;
}

#content.content-search article a:hover {
  background-color: #f6f6f6;
}

.navigation {
  margin: 2rem auto;
  text-align: center;
}

.navigation li {
  display: inline;
}

.navigation li a {
  color: white;
  font-weight: 500;
  text-decoration: none;
  padding: 1rem;
  border-radius: 5px;
  background-color: #0080c6;
  display: inline-block;
}

.navigation li a:hover {
  background-color: #8ed8f8;
}

.navigation li.active a {
  background-color: #8ed8f8;
}

/*--------------------------------------------------------------
# Home page
--------------------------------------------------------------*/
body.page-home section#hero {
  height: auto;
  display: block;
  min-height: 0;
  max-height: 100%;
  overflow: hidden;
}

body.page-home section#hero div.home-hero {
  height: 650px;
  background-size: cover;
  background-position: left bottom;
}

body.page-home section#hero div.home-hero,
body.page-home section#hero div.slide-two {
  height: 100%;
}

body.page-home #hero-slide {
  height: 650px;
}

@media screen and (max-width: 1100px) {
  body.page-home #hero-slide {
    height: 543px;
  }
}

body.page-home section#hero div.home-hero .hero-container {
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  padding: 0 2rem;
}

body.page-home section#hero div.home-hero .hero-container div {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
}

body.page-home section#hero div.home-hero .hero-container div h1.hero-title {
  text-align: left;
  color: #0080c6;
  width: 100%;
  max-width: 700px;
  margin-bottom: 1.5rem;
  font-weight: 700;
  font-size: 5rem;
  line-height: 1.2;
}

body.page-home section#hero div.home-hero .hero-container div h1.hero-title span {
  color: white;
  font-size: 1.3em;
  line-height: 0;
}

body.page-home section#hero div.home-hero .hero-container div p {
  color: #707070;
}

body.page-home section#hero div.home-hero .hero-container div a.orange__btn {
  font-size: 1.5rem;
  font-weight: 500;
  padding: 1rem 4rem;
}

body.page-home section#hero div.home-hero .hero-container div.bottle {
  position: absolute;
  right: 2rem;
  top: 0;
  width: 40vw;
  max-width: 600px;
  min-width: 460px;
  padding: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 100%;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

body.page-home section#hero div.home-hero .hero-container div.bottle img {
  width: 100%;
  -webkit-filter: drop-shadow(6px 8px 20px rgba(0, 0, 0, 0.6));
          filter: drop-shadow(6px 8px 20px rgba(0, 0, 0, 0.6));
}

body.page-home section#hero div.slide-two {
  /* height: 650px; */
  background-size: cover;
  background-position: center right;
}

body.page-home section#hero .tns-outer {
  display: block;
}

body.page-home section#hero .tns-nav {
  position: absolute;
  bottom: 0;
  text-align: center;
  z-index: 9;
  margin: 0 auto;
  width: 100%;
}

body.page-home section#hero .tns-nav > [aria-controls] {
  width: 9px;
  height: 9px;
  padding: 0;
  margin: 0 5px;
  border-radius: 50%;
  background: #ddd;
  border: 0;
}

body.page-home section#hero .tns-nav .tns-nav-active {
  background: #ff901d;
}

body.page-home section#hero div.slide-two .text-container {
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: baseline;
  -ms-flex-align: baseline;
  align-items: baseline;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  padding: 0 2rem;
}

body.page-home section#hero div.slide-two .text-container figure {
  padding: 0;
  width: auto;
  margin: 50px 0 0 20vw;
}

body.page-home section#hero div.slide-two .text-container figure .logo {
  width: 100%;
  max-width: 150px;
  margin: 0 auto 1rem auto;
}

body.page-home section#hero div.slide-two .text-container figure .line-one {
  text-align: center;
  font-size: 2.5rem;
  line-height: 1;
}

body.page-home section#hero div.slide-two .text-container figure .line-one span {
  display: block;
  font-weight: 800;
  font-size: 4.45rem;
  line-height: 3rem;
}

body.page-home section#hero div.slide-two .text-container figure .num {
  text-align: left;
  color: #0080c6;
  font-weight: 700;
  font-size: 6.5rem;
  line-height: 5.1rem;
  height: auto;
  display: inline-block;
  display: block;
  grid-row-start: 1;
  grid-row-end: 3;
}

body.page-home section#hero div.slide-two .text-container figure .text {
  display: inline-block;
  width: 100%;
}

body.page-home section#hero div.slide-two .text-container figure .line-one,
body.page-home section#hero div.slide-two .text-container figure .line-two {
  text-align: left;
  color: #0080c6;
  font-weight: 700;
}

body.page-home section#hero div.slide-two .text-container figure .line-one {
  text-align: center;
  font-size: 1.35rem;
  line-height: 1.5;
}

body.page-home section#hero div.slide-two .text-container figure .line-two {
  font-size: 2rem;
  /* font-size: 1.55rem; */
  text-align: center;
  line-height: 1;
}

body.page-home section#hero-mobile {
  display: none;
}

body.page-home section#hero-mobile .full-container {
  text-align: center;
}

body.page-home section#hero-mobile .full-container h1.hero-title {
  color: #0080c6;
  padding-top: 2rem;
}

body.page-home section#hero-mobile .full-container h1.hero-title span {
  font-size: 1.2em;
}

body.page-home section#boxes {
  padding: 2rem 0;
}

body.page-home section#boxes ul {
  -ms-grid-columns: (32%)[3];
      grid-template-columns: repeat(3, 32%);
  grid-gap: 2%;
}

body.page-home section#boxes ul li {
  overflow: hidden;
}

body.page-home section#boxes ul li a {
  width: 100%;
  min-height: 14rem;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  padding: 1rem;
}

body.page-home section#boxes ul li a h2 {
  text-align: center;
  color: white;
  font-weight: 700;
  width: 100%;
  font-size: 2rem;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.2);
  margin: 0;
  z-index: 2;
}

body.page-home section#boxes ul li a img {
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
}

body.page-home section#registry .bg-color {
  background-color: #f6f6f6;
  padding: 4rem 0 5rem 0;
}
body.page-home section#registry ul.registry {
  grid-template-columns: repeat(3, 1fr);
}
body.page-home section#registry ul.registry li {
  text-align: center;
}
body.page-home section#registry ul.registry li img {
  margin: 0 auto;
  width: 100%;
  max-width: 250px;
}
body.page-home section#registry h2 {
  margin-bottom: 0;
}
body.page-home section#registry h2 span {
  font-weight: 300;
}
body.page-home section#registry .container-sm img {
  width: 100%;
  max-width: 200px;
  margin: 2rem auto;
}

@media all and (max-width:600px) {
  body.page-home section#registry ul.registry {
    display: block;
  }
}

body.page-home section#ingredients {
  padding: 0;
}

body.page-home section#ingredients div.contents {
  padding: 0 2rem;
}

body.page-home section#ingredients div.details {
  height: 37rem;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background-color: #0080c6;
}

body.page-home section#ingredients div.details div.bar {
  width: 100%;
  position: absolute;
  padding: 2rem;
}

body.page-home section#ingredients div.details div.bar div.container {
  margin: 0 auto;
  max-width: 750px;
}

body.page-home section#ingredients div.details div.bar div.container h2.ingredients-title {
  color: white;
  margin-bottom: 2rem;
}

body.page-home section#ingredients div.details ul.home-manufacturing {
  text-align: center;
  margin: 0 auto;
}

body.page-home section#ingredients div.details ul.home-manufacturing li.item {
  display: inline-block;
  width: 10%;
  min-width: 110px;
  vertical-align: top;
  margin: 0 0 1rem 0;
}

body.page-home section#ingredients div.details ul.home-manufacturing li.item img {
  margin: 0 auto;
  max-width: 60px;
}

body.page-home section#ingredients div.details ul.home-manufacturing li.item span {
  display: block;
  text-align: center;
  color: white;
  font-size: 0.5rem;
  text-transform: uppercase;
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1.2;
  margin: 0.6rem 0;
  font-weight: 700;
}

body.page-home section#ingredients div#twitter {
  padding: 0 2rem 0 3rem;
  background-color: #4099ff;
  color: white;
}

body.page-home section#ingredients div#twitter .container {
  text-align: center;
}

body.page-home section#ingredients div#twitter .container #ctf {
  width: auto !important;
  display: inline-block;
  overflow: visible;
}

body.page-home section#ingredients div#twitter .container #ctf::before {
  content: "\f099";
  display: block;
  position: absolute;
  font-family: Fontawesome;
  font-size: 1.1rem;
  top: 15px;
  left: -1.5rem;
  line-height: 1.4;
}

body.page-home section#ingredients div#twitter .container #ctf p.ctf-tweet-text,
body.page-home section#ingredients div#twitter .container #ctf p.ctf-media-link {
  font-size: 0.9rem;
  font-weight: 500;
  color: white;
}

body.page-home section#ingredients div#twitter .container #ctf p.ctf-tweet-text a,
body.page-home section#ingredients div#twitter .container #ctf p.ctf-media-link a {
  display: inline-block;
}

body.page-home section#blog-feed {
  padding: 0;
}

body.page-home section#blog-feed .full-container {
  background-color: #f6f6f6;
  padding: 0 2rem;
}

body.page-home section#blog-feed .full-container .mid-container {
  padding: 6rem 0;
  -ms-grid-columns: (1fr)[2];
      grid-template-columns: repeat(2, 1fr);
}

body.page-home section#blog-feed .full-container .mid-container aside.read {
  text-align: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

body.page-home section#blog-feed .full-container .mid-container aside.read h2 {
  color: #333;
  font-size: 2rem;
  margin-bottom: 2rem;
}

body.page-home section#blog-feed .full-container .mid-container aside.read p {
  font-weight: 500;
  font-size: 1rem;
  width: 100%;
  max-width: 450px;
  margin: 0 auto 2rem auto;
}

body.page-home section#blog-feed .full-container .mid-container aside.blog {
  -ms-grid-columns: (1fr)[2];
      grid-template-columns: repeat(2, 1fr);
  -ms-grid-rows: (1fr)[2];
      grid-template-rows: repeat(2, 1fr);
  gap: 0.8rem;
}

body.page-home section#blog-feed .full-container .mid-container aside.blog article.blog-box a h2.blog-heading,
body.page-home section#blog-feed .full-container .mid-container aside.blog article.blog-box a p.blog-text {
  color: white;
  text-align: left;
  line-height: 1.2;
}

body.page-home section#blog-feed .full-container .mid-container aside.blog article.blog-box a h2 {
  margin-bottom: 1rem;
}

body.page-home section#blog-feed .full-container .mid-container aside.blog article.blog-box a h2::after {
  content: "";
  display: block;
  background-color: white;
  width: 30px;
  height: 7px;
  margin: 1.5rem 0;
}

body.page-home section#blog-feed .full-container .mid-container aside.blog article.blog-box a p {
  font-size: 0.9rem;
  font-weight: 500;
  margin: 0 0 1rem 0;
  font-size: 1rem;
}

body.page-home section#blog-feed .full-container .mid-container aside.blog article.blog-box a span {
  color: white;
  font-weight: 500;
}

body.page-home section#blog-feed .full-container .mid-container aside.blog article.blog-box a span::after {
  content: " \0203A";
  font-weight: 500;
}

body.page-home section#blog-feed .full-container .mid-container aside.blog article.blog-box a .box-contain article.blog-box {
  width: 50%;
  float: left;
}

body.page-home section#blog-feed .full-container .mid-container aside.blog article.blog-box:nth-child(1) {
  -ms-grid-column-span: 2;
      grid-column-end: span 2;
  padding: 2rem;
}

body.page-home section#blog-feed .full-container .mid-container aside.blog article.blog-box:nth-child(2) {
  background-color: #f18f30;
}

body.page-home section#blog-feed .full-container .mid-container aside.blog article.blog-box:nth-child(2) a h2.blog-heading {
  font-size: 1.1rem;
}

body.page-home section#blog-feed .full-container .mid-container aside.blog article.blog-box:nth-child(2) a p.blog-text {
  display: none;
}

body.page-home section#blog-feed .full-container .mid-container aside.blog article.blog-box:nth-child(3) {
  background-color: #91d8f6;
}

body.page-home section#blog-feed .full-container .mid-container aside.blog article.blog-box:nth-child(3) a h2.blog-heading {
  font-size: 1.1rem;
  color: #333;
}

body.page-home section#blog-feed .full-container .mid-container aside.blog article.blog-box:nth-child(3) a h2.blog-heading::after {
  background-color: #333;
}

body.page-home section#blog-feed .full-container .mid-container aside.blog article.blog-box:nth-child(3) a p.blog-text {
  display: none;
}

body.page-home section#blog-feed .full-container .mid-container aside.blog article.blog-box:nth-child(3) a span {
  color: #333;
}

body.page-home section#blog-feed .full-container .mid-container aside.blog article.blog-box:hover {
  -webkit-transform: scale(1.05);
          transform: scale(1.05);
  z-index: 1;
}

body.page-home section#blog-feed .full-container .mid-container aside.blog article.blog-box {
  padding: 1rem 1.5rem;
}

body.page-home section#blog-feed .full-container .mid-container aside.blog article.blog-box:nth-child(1) {
  background-color: #d61b8b;
}

body.page-home section#blog-feed .full-container .mid-container aside.blog div.box-contain {
  -ms-grid-columns: 49% 49%;
      grid-template-columns: 49% 49%;
  grid-gap: 2.2%;
}

body.page-home section#blog-feed .full-container .mid-container aside.blog div.box-contain article.blog-box:nth-child(1) {
  background-color: #f18f30;
  margin: 0;
}

body.page-home section#blog-feed .full-container .mid-container aside.blog div.box-contain article.blog-box:nth-child(1) h2 {
  font-size: 1.4rem;
}

body.page-home section#blog-feed .full-container .mid-container aside.blog div.box-contain article.blog-box:nth-child(2) {
  background-color: #91d8f6;
  margin: 0;
}

body.page-home section#blog-feed .full-container .mid-container aside.blog div.box-contain article.blog-box:nth-child(2) h2 {
  color: #333;
  font-size: 1.4rem;
}

body.page-home section#blog-feed .full-container .mid-container aside.blog div.box-contain article.blog-box:nth-child(2) h2::after {
  background-color: #333;
}

body.page-home section#blog-feed .full-container .mid-container aside.blog div.box-contain article.blog-box:nth-child(2) span {
  color: #333;
}

body.page-home section#blog-feed .full-container .mid-container aside.blog div.box-contain article.blog-box:nth-child(2) span::after {
  color: #333;
}

/*--------------------------------------------------------------
# Where to buy page
--------------------------------------------------------------*/
body.page-where-to-buy section {
  padding: 6rem 0 6rem 0;
}

body.page-where-to-buy section div.box {
  background-color: #f6f6f6;
  padding: 1.2rem 0;
}

body.page-where-to-buy section div.box h2 {
  margin-bottom: 2rem;
}

body.page-where-to-buy section div.box p {
  text-align: center;
  font-weight: 300;
  font-size: 1.1rem;
  padding: 0 2rem;
}

body.page-where-to-buy section div.box div.container {
  width: 100%;
  padding: 2rem;
}

body.page-where-to-buy section div.box div.container a.logo-box {
  float: left;
}

body.page-where-to-buy section div.box div.container a.logo-box img {
  -webkit-filter: grayscale(100%);
          filter: grayscale(100%);
}

body.page-where-to-buy section div.box div.container a::before {
  content: 'Shop now';
  position: absolute;
  width: 100%;
  bottom: 1.5rem;
  left: 0;
  right: 0;
  text-align: center;
  text-decoration: underline;
  color: #333;
}

body.page-where-to-buy section div.box div.container a:hover::before {
  color: red;
}

body.page-where-to-buy section div.box div.container a.logo-box:first-child {
  border-right: 1px solid lightgray;
  padding-right: 2rem;
}

body.page-where-to-buy section div.box div.container a.logo-box:last-child {
  padding-left: 2rem;
}

body.page-where-to-buy section div.box div.container a.logo-box:hover img {
  -webkit-filter: grayscale(0%);
          filter: grayscale(0%);
}

body.page-where-to-buy section div.box div.container ul {
  text-align: center;
}

body.page-where-to-buy section div.box div.container ul li {
  display: inline-block;
  width: 225px;
}

body.page-where-to-buy section div.box div.container ul li a img {
  width: 100%;
  -webkit-filter: grayscale(100%);
          filter: grayscale(100%);
}

body.page-where-to-buy section div.box div.container ul li a:hover img {
  -webkit-filter: grayscale(0);
          filter: grayscale(0);
}

body.page-where-to-buy section div.box div.container ul li::after {
  content: '';
  display: block;
  position: absolute;
  right: -1px;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  width: 1px;
  height: 90%;
  background: #eaeaea;
}

body.page-where-to-buy section div.box div.container ul li:last-child::after {
  content: none;
}

body.page-where-to-buy section div.box div.container ul li:nth-child(4n+4)::after {
  content: none;
}

body.page-where-to-buy section#online-retailers,
body.page-where-to-buy section#authorized-retailers {
  padding-top: 0;
}

body.page-where-to-buy section#online-retailers p.disc,
body.page-where-to-buy section#authorized-retailers p.disc {
  font-size: 0.9rem;
}

body.page-where-to-buy div.logo-container {
  text-align: center;
  margin: 2rem 0 0 0;
}

body.page-where-to-buy div.logo-container a {
  width: 240px;
  display: inline-block;
  padding: 0 2rem;
  vertical-align: top;
}

body.page-where-to-buy div.logo-container a figure {
  margin: 0;
}

body.page-where-to-buy div.logo-container a figure img {
  width: 100%;
}

body.page-where-to-buy div.logo-container a span {
  display: block;
  color: black;
}

body.page-where-to-buy div.logo-container a:hover span {
  color: #0080c6;
}

/*--------------------------------------------------------------
# Contact us page
--------------------------------------------------------------*/
body.page-contact-us section#contacts {
  padding: 5rem 1rem 4rem 1rem;
}

body.page-contact-us section#contacts div.mid-container {
  text-align: center;
  border-bottom: 1px solid lightgray;
  padding-bottom: 2rem;
}

body.page-contact-us section#contacts div.mid-container div.box {
  width: 100%;
  max-width: 240px;
  display: inline-block;
  text-align: center;
  padding: 0 1rem 2rem 1rem;
  vertical-align: top;
}

body.page-contact-us section#contacts div.mid-container div.box div.img {
  border: 1px solid #0080c6;
  border-radius: 50%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  text-align: center;
  margin: 0 auto 1rem auto;
  width: 67px;
  height: 67px;
}

body.page-contact-us section#contacts div.mid-container div.box div.img img {
  width: 37px;
}

body.page-contact-us section#contacts div.mid-container div.box h2 {
  color: #0080c6;
  font-size: 1rem;
  font-weight: 700;
  margin: 1rem 0 0.5rem 0;
}

body.page-contact-us section#contacts div.mid-container div.box div.text {
  font-size: 0.95rem;
  color: #707070;
  font-weight: 500;
}

body.page-contact-us section#contacts div.mid-container div.box div.text a {
  color: #0080c6;
  font-weight: 700;
  display: inline-block;
}

body.page-contact-us section#contacts div.mid-container div.box div.text a:hover {
  color: #8ed8f8;
}

body.page-contact-us section#contact-content {
  padding: 0 2rem 5rem 2rem;
}

body.page-contact-us section#contact-content p {
  font-weight: 300;
  font-size: 1.1rem;
  color: #333;
  margin-top: 0;
}

body.page-contact-us section#contact-content p a {
  display: inline-block;
  color: #0080c6;
  font-weight: 700;
}

body.page-contact-us section#contact-content p a:hover {
  color: #8ed8f8;
}

body.page-contact-us section#contact-content ul.social {
  -ms-grid-columns: 420px (40px)[4];
      grid-template-columns: 420px repeat(4, 40px);
  grid-gap: 1rem;
  margin-top: 2rem;
}

body.page-contact-us section#contact-content ul.social li a {
  width: 100%;
  height: 100%;
}

body.page-contact-us section#contact-content ul.social li a img {
  border-radius: 50%;
  width: 100%;
  padding: 0.6rem;
}

body.page-contact-us section#contact-content ul.social li a[href*="facebook.com"] img {
  background-color: #3b5998;
}

body.page-contact-us section#contact-content ul.social li a[href*="twitter.com"] img {
  background-color: #429cd6;
}

body.page-contact-us section#contact-content ul.social li a[href*="instagram.com"] img {
  background: #b900b4;
}

body.page-contact-us section#contact-content ul.social li a[href*="youtube.com"] img {
  background: #c4302b;
}

body.page-contact-us section#contact-content ul.social li a:hover img {
  -webkit-transform: scale(1.2);
          transform: scale(1.2);
}

body.page-contact-us section#contact-content ul.social li:first-child {
  font-weight: 700;
  font-size: 1.2rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

body.page-contact-us section#contact-content ul.social li:nth-child(n+2) {
  width: 40px;
}

/*--------------------------------------------------------------
# Our story page
--------------------------------------------------------------*/
body.page-our-story section#content {
  padding: 5rem 0 5rem 0;
}

body.page-our-story section#content div.content-block {
  padding: 0 2rem;
}

body.page-our-story section#content div.content-block p {
  font-size: 1.1rem;
  font-weight: 300;
  color: #333;
  margin: 0 0 1.5rem 0;
}

body.page-our-story section#content section#bottle-block {
  background-color: #0080c6;
  color: white;
  padding: 2rem 6rem;
  margin-top: 6rem;
  min-height: 250px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

body.page-our-story section#content section#bottle-block div.content-block {
  margin: 0;
}

body.page-our-story section#content section#bottle-block div.content-block p {
  margin: 0;
  width: 100%;
  max-width: 660px;
  color: white;
}

body.page-our-story section#content section#bottle-block div.content-block p a {
  display: inline-block;
  color: inherit;
  font-weight: 700;
}

body.page-our-story section#content section#bottle-block div.content-block p a:hover {
  color: #8ed8f8;
}

body.page-our-story section#content section#bottle-block img {
  position: absolute;
  right: 10%;
  top: 1.2rem;
  width: 20%;
  max-width: 120px;
  min-width: 60px;
}

body.page-our-story section#content section#quality-block {
  background-color: #f6f6f6;
  padding: 4rem 2rem 5rem 2rem;
}

body.page-our-story section#content section#quality-block h2 {
  color: #0080c6;
  text-align: left;
  font-size: 2rem;
}

body.page-our-story section#content section#quality-block p {
  font-weight: 500;
}

body.page-our-story section#content section#quality-block p a {
  display: inline-block;
  color: #0080c6;
  font-weight: 700;
}

body.page-our-story section#content section#quality-block p a:hover {
  color: #8ed8f8;
}

body.page-our-story section#content section#instagram {
  padding-top: 0;
}

/*--------------------------------------------------------------
# Authenticity page
--------------------------------------------------------------*/
body.page-authenticity section#content {
  padding: 0;
}

body.page-authenticity section#content section#standards-block {
  padding: 5rem 1rem;
  min-height: 250px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

body.page-authenticity section#content section#standards-block .content-block {
  max-width: 800px;
}

body.page-authenticity section#content section#standards-block .content-block h2 {
  color: #333;
}

body.page-authenticity section#content section#standards-block .content-block p {
  font-size: 1.1rem;
  text-align: center;
  color: #333;
}

body.page-authenticity section#content section#standards-block .content-block p a {
  display: inline-block;
  color: inherit;
  font-weight: 700;
  color: #0080c6;
}

body.page-authenticity section#content section#standards-block .content-block p a:hover {
  color: #8ed8f8;
}

body.page-authenticity section#authentic-block {
  -ms-grid-columns: (1fr)[2];
      grid-template-columns: repeat(2, 1fr);
  padding: 0;
}

body.page-authenticity section#authentic-block div.img {
  background-position: center left;
  background-size: cover;
  background-repeat: no-repeat;
}

body.page-authenticity section#authentic-block div.content {
  background-color: #0080c6;
  padding: 2rem 3rem;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

body.page-authenticity section#authentic-block div.content p {
  color: white;
  font-size: 1.2rem;
}

body.page-authenticity section#awards {
  padding: 5rem 0;
}

body.page-authenticity section#reseller {
  padding: 5rem 1rem;
  text-align: center;
  color: #ec8e3d;
  font-size: 2rem;
  line-height: 1.3;
  margin: 3rem 0 0 0;
}

body.page-authenticity section#online-retailer {
  padding: 5rem 2rem 0 2rem;
}

body.page-authenticity section#online-retailer h3 {
  color: #333;
  font-size: 2rem;
  text-align: center;
  font-weight: 900;
}

body.page-authenticity section#online-retailer p {
  font-size: 1.2rem;
  text-align: center;
}

body.page-authenticity section#online-retailer ul.logos {
  text-align: center;
}

body.page-authenticity section#online-retailer ul.logos li {
  width: 100%;
  max-width: 198px;
  min-width: 50px;
  display: inline-block;
}

body.page-authenticity section#online-retailer ul.logos li a img {
  width: 100%;
}

/*--------------------------------------------------------------
# Healthcare Practitioners page
--------------------------------------------------------------*/
body.page-healthcare-practitioners section#hero {
  padding: 0 2rem;
  background-position: top center;
}

body.page-healthcare-practitioners section#recommend {
  padding-top: 0;
}

body.page-healthcare-practitioners section#join {
  padding: 5rem 1rem;
  background-repeat: no-repeat;
  background-position-x: 90%;
  background-position-y: bottom;
}

body.page-healthcare-practitioners section#join div.content {
  width: 100%;
  max-width: 690px;
}

body.page-healthcare-practitioners section#join div.content h4 {
  font-size: 2rem;
  font-weight: 900;
  color: #0080c6;
  line-height: 1.1;
  margin-bottom: 2rem;
}

body.page-healthcare-practitioners section#join div.content p {
  margin: 0 0 1.5rem 0;
}

body.page-healthcare-practitioners section#join div.content a {
  margin: 2rem 0 0 0;
}

/*--------------------------------------------------------------
# Reseller page
--------------------------------------------------------------*/
body.page-reseller section#hero {
  padding: 0 2rem;
}

body.page-reseller section#recommend {
  padding-top: 0;
}

body.page-reseller section#join {
  padding: 5rem 0;
}

body.page-reseller section#join .content {
  text-align: center;
}

body.page-reseller section#join .content h2 {
  line-height: 1.1;
  margin-bottom: 2rem;
}

body.page-reseller section#join .content p {
  color: #707070;
  text-align: center;
  margin: 0 0 2rem 0;
}

body.page-reseller section#join .content ul {
  text-align: center;
  padding: 2rem 0;
}

body.page-reseller section#join .content ul li {
  display: inline-block;
  width: 33%;
  min-width: 50px;
  vertical-align: top;
}

body.page-reseller section#join .content ul li div.img {
  border: 1px solid #0080c6;
  border-radius: 50%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  text-align: center;
  margin: 0 auto 1rem auto;
  width: 67px;
  height: 67px;
}

body.page-reseller section#join .content ul li div.img img {
  width: 37px;
}

body.page-reseller section#join .content ul li div.content h4 {
  color: #0080c6;
}

body.page-reseller section#note {
  padding: 3rem 1rem;
  text-align: center;
  font-size: 2rem;
  line-height: 1.3;
}

body.page-reseller section#note p {
  color: #ff901d;
  font-weight: 300;
}

body.page-reseller section#bottles {
  text-align: center;
  padding: 4rem 1rem;
}

body.page-reseller section#bottles img {
  width: 90%;
  max-width: 550px;
  margin: 0 auto;
}

/*--------------------------------------------------------------
# FAQs & QR pages
--------------------------------------------------------------*/
body.info #hero {
  display: block;
  max-height: 575px;
  min-height: auto;
  height: auto;
}

body.info #hero .d-grid {
  grid-template-columns: 1fr 1fr;
  grid-gap: 3rem;
}

body.info #hero h1.page-title {
  width: 100%; 
  max-width: 500px;
  margin: 0 0 0 auto;
}

body.info #hero p.sub-title {
  max-width: 500px;
  margin: 0 0 0 auto;
}

body.info #hero .img img {
   margin: 3rem auto 0 0;
   max-height: 450px;
}

body.info #hero .d-flex {
  align-items: center;
}

body.info .dia-foot {
  display: block;
  width: 100%;
  max-width: 650px;
  margin: 2rem auto 0 auto;
  text-align: center;
}

body.info .dia-foot h4 {
  text-align: center;
  margin-bottom: 2rem;
}

body.info .dia-foot iframe {
  margin: 3rem auto;
}

body.page-faqs #nav-top,
body.info #nav-top {
  display: none;
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  line-height: 1;
  z-index: 99;
}

body.page-faqs #nav-top span,
body.info #nav-top span {
  font-family: Fontawesome;
  font-size: 4rem;
  color: #707070;
}

body.page-faqs section#hero {
  background-repeat: repeat;
  background-size: 13rem 13rem;
  background-color: #87bf50;
}

section#faq {
  -ms-grid-columns: 385px 1fr;
      grid-template-columns: 385px 1fr;
  -webkit-column-gap: 3rem;
          column-gap: 3rem;
  padding: 4rem 2rem 0 2rem;
}

section#faq aside.categories .stick {
  position: -webkit-sticky;
  position: sticky;
  top: 90px;
}

section#faq aside.categories .stick ul.box {
  background-color: #f6f6f6;
  padding: 1rem 2rem;
  border-radius: 10px;
}

section#faq aside.categories .stick ul.box li {
  border-bottom: 1px solid rgba(112, 112, 112, 0.24);
}

section#faq aside.categories .stick ul.box li a {
  font-weight: 900;
  font-size: 0.9rem;
  color: #707070;
  padding: 0.5rem 0;
  text-transform: uppercase;
}

section#faq aside.categories .stick ul.box li a:hover {
  color: #0080c6;
}

section#faq aside.categories .stick ul.box li:last-of-type {
  border-bottom: none;
}

section#faq aside.categories .stick div.box {
  background-color: #f6f6f6;
  padding: 2rem 1rem;
  border-radius: 10px;
  margin-top: 1rem;
}

section#faq aside.categories .stick div.box div.img {
  width: 100%;
  max-width: 100px;
  min-width: 50px;
  margin: 0 auto;
}

section#faq aside.categories .stick div.box div.img img {
  width: 100%;
}

section#faq aside.categories .stick div.box p {
  font-weight: 500;
  text-align: center;
  margin-bottom: 0;
}

section#faq aside.categories .stick div.box p a {
  display: inline-block;
  font-weight: 700;
  color: #0080c6;
}

section#faq aside.categories .stick div.box p a:hover {
  color: #8ed8f8;
}

section#faq div#faq-content div.block {
  margin-bottom: 5.5rem;
}
body.info section#faq div#faq-content div.block {
  margin-bottom: 3rem;
}

section#faq div#faq-content div.block h3 {
  margin-bottom: 1rem;
  font-size: 1.3rem;
}

section#faq div#faq-content div.block div.faq-box {
  border-radius: 10px;
  padding: 0.5rem 2rem 0 2rem;
  margin-bottom: 0.6rem;
}

section#faq div#faq-content div.block div.faq-box article.q {
  border-bottom: 1px solid rgba(0, 0, 0, 0);
  font-weight: 700;
  margin: 0 0 0.5rem 0;
  padding: 0.5rem 2rem 0.5rem 0;
  cursor: pointer;
}

section#faq div#faq-content div.block div.faq-box article.q::after {
  content: "+";
  position: absolute;
  top: 10px;
  right: 0;
  cursor: pointer;
}

section#faq div#faq-content div.block div.faq-box article.a {
  overflow: hidden;
  padding: 0 0 0 1.5rem;
  font-weight: 500;
  color: #333;
  max-height: 0;
}

body.info section#faq div#faq-content div.block div.faq-box article.a span {
  display: block;
  font-weight: 700;
}
body.info section#faq div#faq-content div.block div.faq-box article.a ul {
  /* padding: 1rem 0 0 1.5rem; */
  /* padding: 0; */
  padding: 0 0 0 1.5rem;
/*   list-style-type: none; */

}
body.info section#faq div#faq-content div.block div.faq-box article.a ul.awards {
  list-style-type: none;
  padding: 0;
  width: auto;
  margin: 0 auto;
  text-align: center;
}

body.info section#faq div#faq-content div.block div.faq-box article.a ul.awards li {
  display: inline-block;
  padding: 0 1rem;
}

@media screen and (max-width: 768px) {
  body.info section#faq aside.categories .stick div.box {
    display: none;
  }
}

section#faq div#faq-content div.block div.faq-box article.a a {
  display: inline-block;
  font-weight: 700;
}

section#faq div#faq-content div.block div.faq-box article.a ul {
  padding: 1rem 0 1rem 1.5rem;
  list-style-type: disc;
}

section#faq div#faq-content div.block div.faq-box article.a .container {
  text-align: center;
  max-width: 650px;
  padding: 2rem 0 2rem 0;
}

.vid-container {
  padding-top: 56.25%;
  height: 0;
  position: relative;
}
.vid-container iframe {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
}

section#faq div#faq-content div.block div.faq-box article.a .container img {
  margin: 0 auto;
  max-height: 250px;
}

section#faq div#faq-content div.block div.faq-box article.a p.a-foot {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: (33%)[3];
      grid-template-columns: repeat(3, 33%);
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

section#faq div#faq-content div.block div.faq-box article.a p.a-foot span:first-child {
  text-align: left;
}

section#faq div#faq-content div.block div.faq-box article.a p.a-foot span {
  text-align: center;
}

section#faq div#faq-content div.block div.faq-box.expanded article.q {
  border-bottom: 1px solid black;
}

section#faq div#faq-content div.block div.faq-box.expanded article.q::after{
  content: "-";
}

section#faq div#faq-content div.block div.faq-box.expanded article.a {
  max-height: 2000px;
  opacity: 1;
  padding-bottom: 2rem;
}

div.anchor {
  top: -100px;
}

ul.illustrations {
    padding: 0!important;
    margin: 0;
    list-style-type: none!important;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

ul.illustrations li img {
    margin: 0 auto;
}

/*--------------------------------------------------------------
# FAQs & QR pages colours
--------------------------------------------------------------*/
#hero.probiotic {
  background-color: #21c7d3!important;
}

#hero.probiotic h1.page-title,
#hero.probiotic p.sub-title {
  color: white;
}

#hero.orange {
  background-color: #f8a953!important;
}

#hero.orange h1.page-title,
#hero.orange p.sub-title {
  color: white;
}

#hero.algae-green {
  background-color: #6fb444!important;
}

#hero.algae-green h1.page-title,
#hero.algae-green p.sub-title {
  color: white;
}

#hero.baby-blue {
  background-color: #d3eefb!important;
}

#hero.baby-blue h1.page-title,
#hero.baby-blue p.sub-title {
  color: #0080c6;
}

#hero.purple {
  background-color: #592a8a!important;
}

#hero.purple h1.page-title,
#hero.purple p.sub-title {
  color: white;
}

#hero.blue {
  background-color: #0080c6!important;
}

#hero.blue h1.page-title,
#hero.blue p.sub-title {
  color: white;
}

#hero.dark-blue {
  background-color: #002d73!important;
}

#hero.dark-blue h1.page-title,
#hero.dark-blue p.sub-title {
  color: white;
}

#hero.green {
  background-color: #8ec63f!important;
}

#hero.green h1.page-title,
#hero.green p.sub-title {
  color: white;
}

.block.blue .faq-box {
  background-color: #e8f4fa;
}

.block.blue .faq-box .q {
  color: #0080c6;
}

.block.blue .faq-box .a a::after {
  background-color: #0080c6;
}

.block.blue .faq-box a {
  color: #0080c6;
}

.block.blue .faq-box a:hover {
  color: #8ed8f8;
}

.block.green .faq-box {
  background-color: #eaf5dc;
}

.block.green .faq-box .q {
  color: #8ec63f;
}

.block.green .faq-box .a a::after {
  background-color: #8ec63f;
}

.block.green .faq-box a {
  color: #8ec63f;
}

.block.green .faq-box a:hover {
  color: #46631d;
}

.block.pink .faq-box {
  background-color: #f8d3ea;
}

.block.pink .faq-box .q {
  color: #d80b8d;
}

.block.pink .faq-box .a a::after {
  background-color: #d80b8d;
}

.block.pink .faq-box a {
  color: #d80b8d;
}

.block.pink .faq-box a:hover {
  color: #fd75cb;
}

.block.purple .faq-box {
  background-color: #f0ecf5;
}

.block.purple .faq-box .q {
  color: #592a8a;
}

.block.purple .faq-box .a a::after {
  background-color: #592a8a;
}

.block.purple .faq-box a {
  color: #592a8a;
}

.block.purple .faq-box a:hover {
  color: #b68de0;
}

/*--------------------------------------------------------------
# Other brands page
--------------------------------------------------------------*/
body.page-other-brands section#brands div.box {
  background-color: #f6f6f6;
  padding: 1.2rem 0;
}

body.page-other-brands section#brands div.box p {
  text-align: center;
  font-weight: 300;
  font-size: 1.1rem;
  padding: 0 2rem;
}

body.page-other-brands section#brands div.box ul {
  text-align: center;
}

body.page-other-brands section#brands div.box ul li {
  border-right: 1px solid #a6a6a6;
  width: 100%;
  max-width: 280px;
  display: inline-block;
  padding: 0 2rem;
}

body.page-other-brands section#brands div.box ul li a img {
  width: 100%;
}

body.page-other-brands section#brands div.box ul li a:hover img {
  -webkit-filter: grayscale(100%);
          filter: grayscale(100%);
}

body.page-other-brands section#brands div.box ul li:last-of-type {
  border: none;
}

body.page-other-brands section#online-retailers {
  padding-left: 1rem;
  padding-right: 1rem;
}

body.page-other-brands section#online-retailers h2 {
  text-align: center;
  font-weight: 300;
  font-size: 1.8rem;
  margin-bottom: 1.5rem;
}

body.page-other-brands section#online-retailers .sm-container {
  max-width: 500px;
}

body.page-other-brands section#online-retailers .sm-container p {
  text-align: center;
  font-size: 1.1rem;
}

body.page-other-brands div.logo-container {
  text-align: center;
  margin: 2rem 0 0 0;
}

body.page-other-brands div.logo-container a {
  width: 240px;
  display: inline-block;
  padding: 0 2rem;
  vertical-align: top;
}

body.page-other-brands div.logo-container a figure {
  margin: 0;
}

body.page-other-brands div.logo-container a figure img {
  width: 100%;
}

body.page-other-brands div.logo-container a span {
  display: block;
  color: black;
}

body.page-other-brands div.logo-container a:hover span {
  color: #0080c6;
}

body.page-other-brands section#authorized-retailers {
  padding-left: 1rem;
  padding-right: 1rem;
}

body.page-other-brands section#authorized-retailers h2 {
  text-align: center;
  font-weight: 300;
  font-size: 1.8rem;
  margin-bottom: 1.5rem;
}

body.page-other-brands section#authorized-retailers .sm-container {
  max-width: 500px;
}

body.page-other-brands section#authorized-retailers .sm-container p {
  text-align: center;
  font-size: 1.1rem;
}

body.page-other-brands section#authorized-retailers div.logo-container a {
  padding: 0 1rem;
}

/*--------------------------------------------------------------
# Why vitamin d page
--------------------------------------------------------------*/
body.page-why-vitamin-d section#hero {
  background-position: center right;
}

body.page-why-vitamin-d section#hero h1.page-title {
  background-repeat: no-repeat;
  background-position: top center;
  line-height: 12.5rem;
}

body.page-why-vitamin-d section#one {
  padding: 4rem 0 2rem 0;
}

body.page-why-vitamin-d section#one ul {
  text-align: center;
}

body.page-why-vitamin-d section#one ul li.box {
  display: inline-block;
  width: 33.3%;
  max-width: 129px;
  margin: 0 7.6%;
}

body.page-why-vitamin-d section#one ul li.box img {
  width: 100%;
}

body.page-why-vitamin-d section#two {
  padding: 0 1rem 4rem 1rem;
}

body.page-why-vitamin-d section#two h2 {
  color: #0080c6;
}

body.page-why-vitamin-d section#two p {
  color: #707070;
  font-size: 1.1rem;
  text-align: center;
  margin: 0;
}

body.page-why-vitamin-d section#three {
  padding: 0;
  -ms-grid-columns: 45% 55%;
      grid-template-columns: 45% 55%;
}

body.page-why-vitamin-d section#three div.img {
  background-position: center left;
  background-size: cover;
}

body.page-why-vitamin-d section#three div.content {
  background-color: #0080c6;
  padding: 3rem 4rem;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

body.page-why-vitamin-d section#three div.content p {
  color: white;
  font-size: 1.2rem;
}

body.page-why-vitamin-d section#four {
  padding: 4rem 0 5rem 0;
}

body.page-why-vitamin-d section#four .box {
  padding: 0 2rem;
}

body.page-why-vitamin-d section#four .box .mid-container {
  padding: 0 0 3rem 0;
}

body.page-why-vitamin-d section#four .box .mid-container p {
  text-align: center;
  font-size: 1.2rem;
  font-weight: 700;
  color: #0080c6;
  margin: 0;
}

body.page-why-vitamin-d section#four .box ul {
  text-align: center;
}

body.page-why-vitamin-d section#four .box ul li {
  display: inline-block;
  width: 100%;
  max-width: 115px;
  min-width: 100px;
  margin: 0 4rem;
  vertical-align: top;
  text-align: center;
}

body.page-why-vitamin-d section#four .box ul li img {
  margin: 0 auto;
  max-width: 130px;
}

body.page-why-vitamin-d section#four .box ul li span {
  display: block;
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1.2;
  margin: 0.6rem 0 0.8rem 0;
  color: #0080c6;
}

body.page-why-vitamin-d section#five {
  padding: 0;
  -ms-grid-columns: 55% 45%;
      grid-template-columns: 55% 45%;
  margin-bottom: 6rem;
}

body.page-why-vitamin-d section#five div.img {
  background-size: cover;
  background-position: top center;
}

body.page-why-vitamin-d section#five div.content {
  background-color: #ff901d;
  padding: 3rem 4rem;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

body.page-why-vitamin-d section#five div.content h2.box-title {
  text-align: center;
}

body.page-why-vitamin-d section#five div.content p {
  color: white;
  font-size: 1.2rem;
}

body.page-why-vitamin-d section#six {
  padding-top: 0;
  padding-left: 1rem;
  padding-right: 1rem;
}

body.page-why-vitamin-d section#six p {
  text-align: center;
  font-size: 1.3rem;
  color: #707070;
  font-weight: 500;
}

body.page-why-vitamin-d section#six ul {
  text-align: center;
}

body.page-why-vitamin-d section#six ul li {
  display: inline-block;
}

body.page-why-vitamin-d section#six ul li a {
  color: #0080c6;
  text-transform: uppercase;
  font-weight: 700;
  font-size: 1.4rem;
  display: inline-block;
}

body.page-why-vitamin-d section#six ul li a:hover {
  color: #8ed8f8;
}

body.page-why-vitamin-d section#six ul li:not(:last-of-type)::after {
  content: '|';
  color: #0080c6;
  position: relative;
  font-size: 1.4rem;
  padding: 0 1.5rem;
}


/* CTA Section */
/* body.page-why-vitamin-d section#cta {
  padding: 4rem 5rem;
  background-color: #ffde02;
} */

section#cta {
  padding: 4rem 5rem;
  background-color: #ffde02;
}

body.info section#cta {
  margin-top: 6rem;
}

/* body.page-why-vitamin-d section#cta .d-grid {
  -ms-grid-columns: 35% 1fr;
      grid-template-columns: 35% 1fr;
  -ms-grid-rows: none;
      grid-template-rows: none;
  -webkit-column-gap: 4rem;
          column-gap: 4rem;
} */

section#cta .d-grid {
  -ms-grid-columns: 35% 1fr;
      grid-template-columns: 35% 1fr;
  -ms-grid-rows: none;
      grid-template-rows: none;
  -webkit-column-gap: 4rem;
          column-gap: 4rem;
}

/* body.page-why-vitamin-d section#cta .d-grid .img {
  max-width: 400px;
  margin: 0 auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
} */

section#cta .d-grid .img {
  max-width: 400px;
  margin: 0 auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

/* body.page-why-vitamin-d section#cta .d-grid .img img {
  width: 100%;
} */

section#cta .d-grid .img img {
  width: 100%;
}

/* body.page-why-vitamin-d section#cta .d-grid .text {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
} */

section#cta .d-grid .text {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

/* body.page-why-vitamin-d section#cta .d-grid .text p {
  text-align: left;
  font-size: 2.5rem;
  color: #592a8a;
  font-weight: 900;
  margin: 0;
} */

section#cta .d-grid .text p {
  text-align: left;
  font-size: 2.5rem;
  color: #592a8a;
  font-weight: 900;
  margin: 0;
}

/* body.page-why-vitamin-d section#cta .d-grid .text p a {
  display: inline-block;
  color: inherit;
  text-decoration: underline;
} */

section#cta .d-grid .text p a {
  display: inline-block;
  color: inherit;
  text-decoration: underline;
}

/* body.page-why-vitamin-d section#cta .d-grid .text p a:hover {
  color: #894fc5;
} */

section#cta .d-grid .text p a:hover {
  color: #894fc5;
}

section#pro-disclaimer {
  padding: 0;
}
section#pro-disclaimer .mid-container {
  text-align: center;
}
section#pro-disclaimer ,mid-container p {
  font-weight: 500;
  font-size: 1rem;
  color: #a6a6a6;
}

/*--------------------------------------------------------------
# Basic page
--------------------------------------------------------------*/
section#hero.basic {
  background-color: #0080c6;
}

section#basic {
  padding: 4rem 0 0 0;
}

section#basic dl {
  font-size: 1.2rem;
  padding: 0 2rem;
}

section#basic dl dt {
  color: #0080c6;
  font-weight: 700;
  margin-bottom: 1rem;
}

section#basic dl dt ul li a {
  display: inline-block;
  color: #0080c6;
  font-weight: 700;
}

section#basic dl dt ul li a:hover {
  color: #8ed8f8;
}

section#basic dl dd {
  margin-bottom: 3rem;
  color: #707070;
  font-weight: 300;
  margin-left: 0;
}

section#basic dl dd a {
  display: inline-block;
  color: #0080c6;
  font-weight: 700;
}

section#basic dl dd a:hover {
  color: #8ed8f8;
}

section#basic dl dd ul {
  list-style-type: disc;
  -webkit-padding-start: 2.5rem;
          padding-inline-start: 2.5rem;
}

section#basic dl dd ul li {
  margin-bottom: 0.8rem;
}

section#basic dl dd p {
  margin-bottom: 1rem;
}

section#basic dl img {
  width: 100%;
}

section#basic div.anchor {
  top: -100px;
}

@media (max-width: 768px) {
  div.anchor {
    top: -1.5rem;
  }
}

/*--------------------------------------------------------------
# Product list
--------------------------------------------------------------*/
body.page-products-all section#content,
body.page-adults section#content,
body.page-children section#content,
body.page-pregnancy section#content,
body.page-babies section#content {
  padding-left: 1rem;
  padding-right: 1rem;
}

body.page-products-all section#content div.contents,
body.page-adults section#content div.contents,
body.page-children section#content div.contents,
body.page-pregnancy section#content div.contents,
body.page-babies section#content div.contents {
  -ms-grid-columns: 290px 1fr;
      grid-template-columns: 290px 1fr;
}

body.page-products-all section#content div.contents aside.select h2,
body.page-adults section#content div.contents aside.select h2,
body.page-children section#content div.contents aside.select h2,
body.page-pregnancy section#content div.contents aside.select h2,
body.page-babies section#content div.contents aside.select h2 {
  font-weight: 500;
  font-size: 1.5rem;
  margin-bottom: 1rem;
}

body.page-products-all section#content div.contents aside.select div.box,
body.page-adults section#content div.contents aside.select div.box,
body.page-children section#content div.contents aside.select div.box,
body.page-pregnancy section#content div.contents aside.select div.box,
body.page-babies section#content div.contents aside.select div.box {
  background-color: #f6f6f6;
  padding: 1.5rem 2rem;
}

body.page-products-all section#content div.contents aside.select div.box h3,
body.page-adults section#content div.contents aside.select div.box h3,
body.page-children section#content div.contents aside.select div.box h3,
body.page-pregnancy section#content div.contents aside.select div.box h3,
body.page-babies section#content div.contents aside.select div.box h3 {
  color: #707070;
  text-transform: uppercase;
  font-weight: 900;
  font-size: 1rem;
  margin: 0 0 1rem 0;
}

body.page-products-all section#content div.contents aside.select div.box button,
body.page-adults section#content div.contents aside.select div.box button,
body.page-children section#content div.contents aside.select div.box button,
body.page-pregnancy section#content div.contents aside.select div.box button,
body.page-babies section#content div.contents aside.select div.box button {
  border: none;
  background-color: transparent;
  cursor: pointer;
  padding: 0.4rem 0.8rem;
}

body.page-products-all section#content div.contents aside.select div.box button.is-checked,
body.page-adults section#content div.contents aside.select div.box button.is-checked,
body.page-children section#content div.contents aside.select div.box button.is-checked,
body.page-pregnancy section#content div.contents aside.select div.box button.is-checked,
body.page-babies section#content div.contents aside.select div.box button.is-checked {
  background-color: #0080c6;
  color: white;
}

body.page-products-all section#content div.contents aside.list div.container,
body.page-adults section#content div.contents aside.list div.container,
body.page-children section#content div.contents aside.list div.container,
body.page-pregnancy section#content div.contents aside.list div.container,
body.page-babies section#content div.contents aside.list div.container {
  text-align: center;
}

body.page-products-all section#content div.contents aside.list div.container div.grid-item,
body.page-adults section#content div.contents aside.list div.container div.grid-item,
body.page-children section#content div.contents aside.list div.container div.grid-item,
body.page-pregnancy section#content div.contents aside.list div.container div.grid-item,
body.page-babies section#content div.contents aside.list div.container div.grid-item {
  display: inline-block;
  width: 30%;
  max-width: 280px;
  min-width: 230px;
  margin: 0 1% 2% 1%;
  padding: 2% 2.5%;
  border-radius: 20px;
}

body.page-products-all section#content div.contents aside.list div.container div.grid-item a img,
body.page-adults section#content div.contents aside.list div.container div.grid-item a img,
body.page-children section#content div.contents aside.list div.container div.grid-item a img,
body.page-pregnancy section#content div.contents aside.list div.container div.grid-item a img,
body.page-babies section#content div.contents aside.list div.container div.grid-item a img {
  width: 100%;
  height: auto;
}

body.page-products-all section#content div.contents aside.list div.container div.grid-item a span,
body.page-adults section#content div.contents aside.list div.container div.grid-item a span,
body.page-children section#content div.contents aside.list div.container div.grid-item a span,
body.page-pregnancy section#content div.contents aside.list div.container div.grid-item a span,
body.page-babies section#content div.contents aside.list div.container div.grid-item a span {
  color: #0080c6;
  font-size: 1.2rem;
  font-weight: 700;
}

body.page-products-all section#content div.contents aside.list div.container div.grid-item:hover,
body.page-adults section#content div.contents aside.list div.container div.grid-item:hover,
body.page-children section#content div.contents aside.list div.container div.grid-item:hover,
body.page-pregnancy section#content div.contents aside.list div.container div.grid-item:hover,
body.page-babies section#content div.contents aside.list div.container div.grid-item:hover {
  -webkit-box-shadow: 0 7px 16px 0 rgba(0, 0, 0, 0.09);
          box-shadow: 0 7px 16px 0 rgba(0, 0, 0, 0.09);
}

.gutter-sizer {
  width: 4%;
}

/*--------------------------------------------------------------
# Product specific
--------------------------------------------------------------*/
.kids section#content div.container,
.adults section#content div.container,
.pregnancy section#content div.container,
.baby section#content div.container {
  text-align: left;
}

.kids section#content div.container div.grid-item,
.adults section#content div.container div.grid-item,
.pregnancy section#content div.container div.grid-item,
.baby section#content div.container div.grid-item {
  display: inline-block;
  width: 30%;
  max-width: 280px;
  min-width: 230px;
  margin: 0 2rem 2rem 2rem;
  padding: 1.5rem 2rem;
  border-radius: 20px;
}

.kids section#content div.container div.grid-item a img,
.adults section#content div.container div.grid-item a img,
.pregnancy section#content div.container div.grid-item a img,
.baby section#content div.container div.grid-item a img {
  width: 100%;
  height: auto;
}

.kids section#content div.container div.grid-item a span,
.adults section#content div.container div.grid-item a span,
.pregnancy section#content div.container div.grid-item a span,
.baby section#content div.container div.grid-item a span {
  color: #0080c6;
  font-size: 1.2rem;
  font-weight: 700;
}

.kids section#content div.container div.grid-item:hover,
.adults section#content div.container div.grid-item:hover,
.pregnancy section#content div.container div.grid-item:hover,
.baby section#content div.container div.grid-item:hover {
  -webkit-box-shadow: 0 7px 16px 0 rgba(0, 0, 0, 0.09);
          box-shadow: 0 7px 16px 0 rgba(0, 0, 0, 0.09);
}

.gutter-sizer {
  width: 4%;
}

/*--------------------------------------------------------------
# Product page single
--------------------------------------------------------------*/
body.single section#product-hero {
  padding-bottom: 0;
  padding-left: 2rem;
  padding-right: 2rem;
}

body.single section#product-hero div.contain {
  -ms-grid-columns: 2fr 1fr;
      grid-template-columns: 2fr 1fr;
  grid-gap: 8%;
}

body.single section#product-hero div.contain ul.product-img li img {
  width: 100%;
  max-width: 340px;
  margin: 0 auto;
}

body.single section#product-hero div.contain div.text h1.product-name {
  font-size: 4rem;
  font-weight: 700;
  color: white;
  line-height: 1.1;
}

body.single section#product-hero div.contain div.text h1.product-name sup {
  top: -1.2em;
  font-size: 30%;
}

body.single section#product-hero div.contain div.text div.sub-text {
  margin: 0;
  font-size: 1.4rem;
  color: white;
  font-weight: 500;
  padding: 1rem 0;
}

body.single section#product-hero div.contain div.text div.sub-text ul {
  list-style-type: disc;
  -webkit-margin-before: 0.5em;
          margin-block-start: 0.5em;
  -webkit-margin-after: 0.5em;
          margin-block-end: 0.5em;
  -webkit-margin-start: 0;
          margin-inline-start: 0;
  -webkit-margin-end: 0;
          margin-inline-end: 0;
  -webkit-padding-start: 1.7rem;
          padding-inline-start: 1.7rem;
  text-align: left;
}

body.single section#product-hero div.contain div.text div.sub-text ul li {
  font-size: 1.1rem;
  color: white;
  font-weight: 500;
}

body.single figure.size-control {
  margin: 0 0 1.5rem 0;
}

body.single figure.size-control span {
  font-weight: 700;
  display: block;
}

body.single figure.size-control li {
  display: inline-block;
  background-color: white;
  border-radius: 5px;
  border: 2px solid white;
  padding: 0.7rem 1rem;
  cursor: pointer;
  font-weight: 700;
}

body.single figure.size-control ul#sizes {
  display: block !important;
}

body.single figure.size-control.disabled {
  display: none;
}

body.single section#product-hero div.contain div.text div.size span {
  font-weight: 500;
}

body.single section#product-hero div.contain div.text figure.shop {
  margin: 2rem 0 5rem 0;
}

body.single section#product-hero div.contain div.text figure.shop div.btns div.item {
  display: inline-block;
  vertical-align: bottom;
}

body.single section#product-hero div.contain div.text figure.shop div.btns {
  text-align: center;
}

body.single section#product-hero div.contain div.text figure.shop div.btns div.item {
  margin-bottom: 0.2rem;
}

body.single section#product-hero div.contain div.text figure.shop div.btns div.item span {
  font-weight: 700;
  display: block;
  width: 100%;
  text-align: center;
  max-width: 150px;
}

body.single section#product-hero div.contain div.text figure.shop div.btns div.item a {
  min-height: 55px;
  min-width: 120px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  text-align: center;
}

body.single section#product-hero div.contain div.text figure.shop div.btns div.item a.shop {
  border-radius: 5px;
  width: 100%;
  max-width: 221px;
  padding: 1.35rem 3rem;
  background-color: #2ecc2e;
  font-weight: 700;
  color: white;
  -webkit-box-shadow: 0px 0px 7px 2px rgba(0, 0, 0, 0.15);
          box-shadow: 0px 0px 7px 2px rgba(0, 0, 0, 0.15);
  min-height: 69.75px;
}

body.single section#product-hero div.contain div.text figure.shop div.btns div.item a.shop:hover {
  transform: scale(1.1);
  z-index: 1;
}

body.single section#product-hero div.contain div.text figure.shop div.btns div.item a.shop span {
  font-size: 2rem;
  font-weight: 500;
  max-width: none;
}

body.single section#product-hero div.contain div.text figure.shop div.btns div.item a.shop:hover {
  background-color: #4caf50;
}

body.single section#product-hero div.contain div.text figure.shop div.btns div.item a.amazon-btn {
  background-color: white;
  padding: 1rem 3rem;
}

body.single section#product-hero div.contain div.text figure.shop div.btns div.item a.amazon-btn img {
  width: 100%;
}

body.single section#product-hero div.contain div.text figure.shop div.btns div.item a.amazon-btn:hover {
  background-color: white !important;
}

body.single section#product-hero a.misc {
  width: 100%;
  text-align: center;
  color: white;
  display: block;
  font-weight: 900;
  font-size: 1.5rem;
  padding: 0.3rem 1rem;
  /* color: rgb(0, 128, 198); */
  color: white;
}
body.products-baby-ddrops section#product-hero a.misc {
  color: #0080c6;
}
body.single section#product-hero a.misc:hover {
  color: lightgrey;
}
body.products-baby-ddrops section#product-hero a.misc:hover {
  color: #3fbbff;
}

body.single section#info {
  background-color: #fed230;
  padding: 1rem;
}

body.single section#info ul {
  text-align: center;
  -ms-grid-columns: (32%)[3];
      grid-template-columns: repeat(3, 32%);
  grid-gap: 2%;
}

body.single section#info ul li {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

body.single section#info ul li .img {
  width: 10%;
  display: inline-block;
  max-height: 50px;
  margin-right: 1rem;
  min-width: 60px;
}

body.single section#info ul li .img img {
  width: auto;
  max-height: 40px;
  margin: 0 auto;
}

body.single section#info ul li h4.label {
  width: 70%;
  color: white;
  font-size: 1.9rem;
  font-weight: 900;
  display: inline-block;
  text-align: left;
}

body.single section#dose-info {
  padding-left: 1rem;
  padding-right: 1rem;
}

body.single section#dose-info img {
  margin: 0 auto;
  width: 100%;
  max-width: 55px;
  min-width: 40px;
}

body.single section#dose-info p {
  color: #707070;
  font-weight: 500;
  text-align: center;
}

body.single section#dose-info p a {
  display: inline-block;
  font-weight: 700;
}

body.single section#contents {
  padding: 0;
}

body.single section#contents .bg-img {
  background-repeat: no-repeat;
  background-position: right bottom;
  min-height: 630px;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
}

body.single section#contents .bg-img div.contents {
  padding: 2rem 0;
  max-width: 700px;
}

body.single section#contents .bg-img div.contents h3 {
  color: #333;
  font-size: 3rem;
  font-weight: 900;
  padding-left: 2.1rem;
  margin-bottom: 0.6rem;
}

body.single section#contents .bg-img div.contents .box {
  padding: 2.5rem 3.5rem;
  border-radius: 50px;
  width: 100%;
  max-width: 700px;
  margin-bottom: 5rem;
}

body.single section#contents .bg-img div.contents .box h5 {
  color: white;
  font-size: 2rem;
  margin-bottom: 0.7rem;
  font-weight: 900;
}

body.single section#contents .bg-img div.contents .box p {
  color: white;
  font-weight: 700;
  font-size: 1.2rem;
}

body.single section#break {
  padding: 1rem;
}

body.single section#info-slider {
  background-color: #fed230;
  padding: 1rem 0;
}

body.single section#info-slider ul {
  -ms-grid-columns: (1fr)[2];
      grid-template-columns: repeat(2, 1fr);
}

body.single section#info-slider ul li {
  font-weight: 900;
  text-align: center;
  color: white;
  display: inline-block;
  padding: 1rem 0;
  cursor: pointer;
}

body.single section#carousel ul li.tns-item {
  text-align: center;
}

body.single section#carousel ul li.tns-item div.content {
  width: 25%;
  display: inline-block;
  margin: 0 2rem;
  max-width: 300px;
  vertical-align: top;
}

body.single section#carousel ul li.tns-item div.content div.img {
  text-align: center;
}

body.single section#carousel ul li.tns-item div.content div.img img {
  margin: 0 auto;
  width: 50%;
  min-width: 150px;
}

body.single section#carousel ul li.tns-item div.content span {
  display: block;
  text-align: center;
  font-weight: 500;
}

body.single section#carousel ul li.tns-item div.contents {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
}

body.single section#carousel ul li.tns-item div.contents p {
  text-align: left;
  font-weight: 500;
}

body.single section#carousel ul li.tns-item div.contents p a {
  font-weight: 700;
  display: inline-block;
}

body.single section#reviews {
  padding-top: 0;
  padding-left: 1rem;
  padding-right: 1rem;
}

body.single section#reviews .glsr-no-margins {
  font-weight: 700;
  text-align: center;
  font-size: 1.2rem;
}

body.single section#reviews .r-form {
  text-align: center;
}

body.single section#reviews .r-form .glsr-ltr {
  max-height: 0;
  overflow: hidden;
}

body.single section#reviews .r-form .glsr-ltr form {
  padding: 2rem 0;
}

body.single section#reviews .r-form .glsr-ltr form input,
body.single section#reviews .r-form .glsr-ltr form textarea {
  padding: 0.3rem 0.8rem;
  border-radius: 4px;
  border: 1px solid #a6a6a6;
  font-size: 1.1rem;
  line-height: 1.5;
}

body.single section#reviews .r-form .glsr-ltr form input::-webkit-input-placeholder,
body.single section#reviews .r-form .glsr-ltr form textarea::-webkit-input-placeholder {
  color: #a6a6a6;
}

body.single section#reviews .r-form .glsr-ltr form input:-ms-input-placeholder,
body.single section#reviews .r-form .glsr-ltr form textarea:-ms-input-placeholder {
  color: #a6a6a6;
}

body.single section#reviews .r-form .glsr-ltr form input::-ms-input-placeholder,
body.single section#reviews .r-form .glsr-ltr form textarea::-ms-input-placeholder {
  color: #a6a6a6;
}

body.single section#reviews .r-form .glsr-ltr form input::placeholder,
body.single section#reviews .r-form .glsr-ltr form textarea::placeholder {
  color: #a6a6a6;
}

body.single section#reviews .r-form .glsr-ltr form label {
  text-align: left;
}

body.single section#reviews .r-form .glsr-ltr form label.glsr-label-rating {
  text-align: center;
  font-size: 1.2rem;
  padding: 0.2rem 0;
  font-weight: 500;
}

body.single section#reviews .r-form .glsr-ltr form label.glsr-text-label,
body.single section#reviews .r-form .glsr-ltr form label.glsr-textarea-label,
body.single section#reviews .r-form .glsr-ltr form label.glsr-email-label {
  display: none;
}

body.single section#reviews .r-form .glsr-ltr form span.gl-star-rating-stars {
  position: relative;
  height: 26px;
  vertical-align: middle;
}

body.single section#reviews .r-form .glsr-ltr form .gl-star-rating[data-star-rating] {
  display: inline-block;
}

body.single section#reviews .r-form .glsr-ltr form .glsr-label-text span,
body.single section#reviews .r-form .glsr-ltr form .glsr-label-textarea span,
body.single section#reviews .r-form .glsr-ltr form .glsr-label-email span {
  display: none;
}

body.single section#reviews .r-form .glsr-ltr.open {
  max-height: 900px;
}

body.single section#reviews .r-form a.btn {
  cursor: pointer;
}

body.single section#reviews .r-post {
  margin: 3rem 0 2rem 0;
}

body.single section#reviews .r-post h2 {
  margin-bottom: 1rem;
  font-size: 1.5rem;
}

body.single section#reviews button {
  cursor: pointer;
}

body.single section#reviews [class*=glsr-] {
  font-family: museo-sans-rounded, sans-serif;
}

body.single section#reviews .glsr-field {
  margin-bottom: 1.3rem;
}

body.single section#reviews .glsr-form-message {
  padding: 1.5rem 0;
  font-size: 1.2rem;
  font-weight: 500;
}

body.single section#reviews .glsr-has-errors {
  color: red;
}

body.single section#reviews .glsr-is-invalid {
  border: 1px solid red !important;
}

body.single section#reviews .glsr-field-error {
  color: red;
  font-size: 1.1rem;
  font-weight: 500;
}

body.single section#reviews .glsr-review-date span {
  color: #a6a6a6;
  font-weight: 500;
}

body.single section#reviews .glsr-review-author span {
  font-weight: 500;
  color: #a6a6a6;
  font-weight: 700;
}

body.single section#reviews .glsr-review {
  padding-bottom: 1.5rem;
  margin-bottom: 1.5rem;
}

body.single section#reviews .glsr-review-author::before {
  content: '';
}

body.single section#reviews .glsr-label-rating span::after {
  content: '*';
  color: red;
}

body.single section#reviews .glsr-field-toggle label::after {
  content: '*';
  color: red;
}

body.single section#reviews .glsr-minimal .glsr-reviews,
body.single section#reviews .glsr-minimal .glsr-reviews-wrap {
  display: -ms-grid;
  display: grid;
  grid-gap: 1rem !important;
  gap: 1rem !important;
}

body.single section#reviews .pagination .navigation {
  margin: 2rem auto;
  text-align: center;
}

body.single section#reviews .page-numbers {
  color: white;
  font-weight: 500;
  text-decoration: none;
  padding: 1rem;
  border-radius: 5px;
  display: inline-block;
}

/*--------------------------------------------------------------
# Hy-Vee Revised page
--------------------------------------------------------------*/
body.page-hy-vee section#hero {
  min-height: 500px;
}

body.page-hy-vee section#hero .content {
  width: 100%;
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 2rem;
}

body.page-hy-vee section#hero .content h1 {
  font-size: 4.5rem;
  font-weight: 900;
  color: #0080c6;
  line-height: 1.2;
  color: #2b3e99;
}

body.page-hy-vee section#hero .content h2 {
  text-align: left;
  font-weight: 700;
  font-size: 2.5rem;
  margin-bottom: 0;
  line-height: 1.2;
  color: #0080c6;
}

body.page-hy-vee section#hero .content ul {
  margin-bottom: 2rem;
}

body.page-hy-vee section#hero .content ul li {
  display: block;
  color: black;
  background: url("img/orange_bullet.svg") no-repeat left 0.7rem;
  background-size: 0.5rem;
  width: 100%;
  max-width: 600px;
  padding-left: 1.5rem;
  margin-bottom: 0.5rem;
  font-size: 1.2rem;
  text-align: left;
  margin-top: 0.5rem;
  font-weight: 700;
}

@media all and (max-width: 1024px) {
  body.page-hy-vee section#hero .content ul {
    max-width: 450px;
  }
}

body.page-hy-vee section#hero .content .cta .logo {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

body.page-hy-vee section#hero .content .cta .logo span {
  color: #8DC63F;
  font-weight: 500;
  display: inline-block;
  margin-right: 1rem;
  margin-top: -2rem;
  font-style: italic;
  font-weight: 700;
  font-size: 1.3rem;
}

body.page-hy-vee section#hero .content .cta .logo img {
  display: inline-block;
  width: 260px;
}

body.page-hy-vee section#mobile {
  display: none;
  padding: 2rem;
}

body.page-hy-vee section#mobile h1 {
  font-size: 4.5rem;
  font-weight: 900;
  color: #2b3e99;
  line-height: 1.2;
  text-align: center;
}

body.page-hy-vee section#mobile h2 {
  text-align: left;
  font-weight: 700;
  font-size: 2.5rem;
  margin-bottom: 0;
  line-height: 1.2;
  text-align: center;
  color: #0080c6;
}

body.page-hy-vee section#mobile ul {
  margin-bottom: 2rem;
  text-align: center;
}

body.page-hy-vee section#mobile ul li {
  display: inline-block;
  color: black;
  background: url("img/orange_bullet.svg") no-repeat left 0.7rem;
  background-size: 0.5rem;
  width: auto;
  padding-left: 1.5rem;
  margin-bottom: 0.5rem;
  font-size: 1.2rem;
  text-align: left;
  margin-top: 0.5rem;
  font-weight: 700;
}

body.page-hy-vee section#mobile .cta .logo {
  padding: 0;
}

body.page-hy-vee section#mobile .cta .logo span {
  color: #8DC63F;
  font-weight: 500;
  display: block;
  margin-right: 1rem;
  margin-top: 0;
  font-style: italic;
  font-weight: 700;
  font-size: 1.3rem;
  text-align: center;
}

body.page-hy-vee section#mobile .cta .logo img {
  display: block;
  width: 260px;
  margin: 1rem auto;
}

@media all and (max-width: 768px) {
  body.page-hy-vee section#mobile {
    display: block;
  }
  body.page-hy-vee section#mobile h1 {
    font-size: 3.5rem;
  }
  body.page-hy-vee section#mobile h2 {
    font-size: 1.8rem;
  }
}

body.page-hy-vee section#location {
  background-color: #8ed8f8;
  padding: 0;
}

body.page-hy-vee section#location p {
  color: white;
  text-transform: uppercase;
  text-align: center;
  font-size: 2rem;
  font-weight: 500;
  margin: 0;
  padding: 1.2rem 2rem;
  letter-spacing: 0.4rem;
}

@media all and (max-width: 768px) {
  body.page-hy-vee section#location p {
    font-size: 1.3rem;
  }
}

body.page-hy-vee section#city {
  padding: 2rem 0;
  text-align: center;
}

body.page-hy-vee section#city a {
  padding: 0.8rem 2rem;
  color: white;
  font-weight: 700;
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
  font-size: 1.3rem;
  background-color: #0080c6;
  border-radius: 5px;
  display: inline-block;
  margin: 0 auto;
  cursor: pointer;
}

body.page-hy-vee section#city a:hover {
  color: black;
  background-color: #8ed8f8;
}

body.page-hy-vee figure#city-modal {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0%;
  left: 0;
  background-color: rgba(255, 255, 255, 0.6);
  z-index: 999;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  display: none;
  margin: 0;
}

body.page-hy-vee figure#city-modal .content {
  margin: 0 auto;
  width: 100%;
  max-width: 500px;
  min-width: 300px;
  height: 90vh;
  max-height: 600px;
  min-height: 300px;
}

body.page-hy-vee figure#city-modal .content ul.city {
  height: 100%;
  overflow-x: hidden;
  overflow-y: scroll;
}

body.page-hy-vee figure#city-modal .content ul.city li a {
  background-color: #0080c6;
  color: white;
  font-weight: 700;
  cursor: pointer;
  padding: 0.5rem 2rem;
  text-align: center;
  font-size: 1.2rem;
  border-bottom: 1px solid white;
}

body.page-hy-vee figure#city-modal .content ul.city li a:hover {
  background-color: #8ed8f8;
  color: black;
}

body.page-hy-vee figure#city-modal.open {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

body.page-hy-vee section#google-map {
  padding: 0;
}

body.page-hy-vee section#google-map #map {
  height: 50vh;
  max-height: 550px;
  min-height: 200px;
}

@media all and (max-width: 768px) {
  body.page-hy-vee section#google-map {
    display: none;
  }
}

body.page-hy-vee section#why .box ul li span {
  color: #000EB7;
}

body.page-hy-vee section#city-list {
  padding: 2rem 0 1rem 0;
}

body.page-hy-vee section#city-list ul {
  text-align: center;
  display: none;
}

body.page-hy-vee section#city-list ul li {
  display: inline-block;
  width: 24%;
  vertical-align: top;
}

body.page-hy-vee section#city-list ul li a {
  text-decoration: none;
  font-size: 1em;
  color: #707070;
  font-weight: 700;
  padding: 0.5em;
  text-align: center;
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}

body.page-hy-vee section#city-list ul li a:hover {
  color: #0080c6;
}

@media all and (max-width: 1024px) {
  body.page-hy-vee section#city-list ul li {
    width: 49%;
  }
}

body.page-hy-vee section#city-list ul.visible {
  display: block;
}

body.page-hy-vee section#two {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: right center;
  max-height: 482px;
  min-height: 300px;
}

body.page-hy-vee section#two .content {
  width: 100%;
  max-width: 665px;
  color: #000EB7;
  font-weight: 700;
  font-size: 1.2rem;
  padding: 0 2rem;
}

body.page-hy-vee section#two .content h2 {
  font-size: 3.5rem;
  font-weight: 900;
  line-height: 1.2;
  color: #2b3e99;
  text-align: left;
  margin-bottom: 1rem;
}

body.page-hy-vee section#two .content ul {
  text-align: center;
  margin: 2rem 0;
}

body.page-hy-vee section#two .content ul li {
  margin: 0;
  vertical-align: top;
  color: black;
  text-align: left;
  background: url("img/checkmark.svg") no-repeat left 0.3rem;
  background-size: 1.2rem;
  padding-left: 1.8rem;
  margin-bottom: 0.5rem;
}

body.page-hy-vee section#dose-info {
  padding: 4rem 1rem;
}

body.page-hy-vee section#dose-info img {
  margin: 0 auto 1rem auto;
  width: 100%;
  max-width: 55px;
  min-width: 40px;
}

body.page-hy-vee section#dose-info p {
  color: #000EB7;
  font-weight: 500;
  text-align: center;
  width: 100%;
  margin: 0 auto;
  font-weight: 700;
}

body.page-hy-vee section#contents {
  padding-top: 0;
}

body.page-hy-vee section#contents .bg-img {
  background-repeat: no-repeat;
  background-position: right bottom;
  min-height: 630px;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  background-size: contain;
}

body.page-hy-vee section#contents .bg-img div.contents {
  padding: 0 1rem;
}

body.page-hy-vee section#contents .bg-img div.contents h3 {
  color: #333;
  font-size: 3rem;
  font-weight: 900;
  padding-left: 2.1rem;
  margin-bottom: 0.6rem;
}

body.page-hy-vee section#contents .bg-img div.contents span {
  color: #000EB7;
}

body.page-hy-vee section#contents .bg-img div.contents .box {
  padding: 2.5rem 3.5rem;
  border-radius: 50px;
  width: 100%;
  max-width: 700px;
  margin-bottom: 5rem;
  background-color: white;
  border: 2px solid  #f28f1f;
}

body.page-hy-vee section#contents .bg-img div.contents .box h5 {
  font-size: 2rem;
  margin-bottom: 0.7rem;
  font-weight: 900;
  color: #0080c6;
}

body.page-hy-vee section#contents .bg-img div.contents .box p {
  font-weight: 700;
  font-size: 1.2rem;
  color: #0080c6;
}

@media all and (max-width: 900px) {
  nav#site-navigation ul#menu-main-navigation li a {
    padding: 0.5rem;
  }
  body.page-hy-vee section#contents .bg-img {
    background-image: none !important;
    display: block;
    text-align: center;
    min-height: 0;
  }
  body.page-hy-vee section#contents .bg-img div.contents h3 {
    text-align: center;
    padding: 0;
  }
  body.page-hy-vee section#contents .bg-img div.contents .box {
    margin: 0 auto;
  }
}

body.page-hy-vee section#four {
  padding-top: 0;
  padding-left: 2rem;
  padding-right: 2rem;
}

body.page-hy-vee section#four h4 {
  font-size: 3.5rem;
  font-weight: 900;
  line-height: 1.2;
  color: #2b3e99;
  text-align: center;
  margin-bottom: 2rem;
}

body.page-hy-vee section#four ul {
  text-align: center;
}

body.page-hy-vee section#four ul li {
  display: inline-block;
  color: black;
  font-size: 1.2rem;
  font-weight: 500;
  background: url("img/x.svg") no-repeat left center;
  background-size: 1.5rem;
  width: 100%;
  max-width: 450px;
  padding-left: 2.5rem;
  margin-bottom: 0.5rem;
  font-size: 1.5rem;
  text-align: left;
}

body.page-hy-vee section#four ul li:nth-child(2n) {
  max-width: 200px;
}

@media all and (max-width: 480px) {
  body.page-hy-vee section#four ul li {
    font-size: 1.2rem;
  }
}

body.page-hy-vee section#how-to-use {
  padding-top: 0;
}

body.page-hy-vee section#how-to-use h6 {
  width: 100%;
  background-color: #8ed8f8;
  color: #000EB7;
  text-align: center;
  font-weight: 900;
  font-size: 2rem;
  padding: 1.2rem 2rem;
}

body.page-hy-vee section#how-to-use p {
  color: black;
  font-weight: 700;
  font-size: 1.2rem;
  margin: 2.5rem auto 3rem auto;
  text-align: center;
  padding: 0 1rem;
}

body.page-hy-vee section#how-to-use .content {
  max-width: 1300px;
  margin: 0 auto;
}

body.page-hy-vee section#how-to-use .content ul li {
  display: inline-block;
  width: 32%;
  text-align: center;
  padding: 0 2rem;
}

body.page-hy-vee section#how-to-use .content ul li .content {
  display: inline-block;
  margin: 0 auto;
  max-width: 300px;
  vertical-align: top;
}

body.page-hy-vee section#how-to-use .content ul li .content div.img {
  text-align: center;
}

body.page-hy-vee section#how-to-use .content ul li .content div.img img {
  margin: 0 auto;
  width: 50%;
  min-width: 150px;
}

body.page-hy-vee section#how-to-use .content ul li .content span {
  display: block;
  text-align: center;
  font-weight: 500;
  color: #0080c6;
}

@media all and (max-width: 768px) {
  body.page-hy-vee section#four ul li {
    display: block;
    max-width: 300px !important;
    margin: 0 auto 0.5rem auto;
  }

  body.page-hy-vee section#how-to-use .content ul li {
    display: block;
    width: 100%;
    padding: 2rem;
  }
  
  body.page-hy-vee section#how-to-use {
    padding-bottom: 0;
  }
}

body.page-hy-vee section#three {
  padding: 2rem 0 5rem 0;
}

body.page-hy-vee section#three .content {
  width: 100%;
  padding: 0 2rem;
  text-align: center;
}

body.page-hy-vee section#three .content a.location-btn {
  display: inline-block;
  color: white;
  background-color: #000EB7;
  border-radius: 5px;
  padding: 0.8rem 3rem;
  border: 2px solid #000EB7;
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
  margin: 2rem 0;
  font-weight: 700;
  margin: 0 auto;
  cursor: pointer;
  font-size: 1.2rem;
}

body.page-hy-vee section#three .content a.location-btn:hover {
  color: #000EB7;
  background-color: white;
}

@media all and (max-width: 1024px) {
  body.page-hy-vee section#hero {
    min-height: 0;
    max-height: none;
    height: 390px;
  }
  body.page-hy-vee section#hero .content h1 {
    font-size: 3rem;
  }
  body.page-hy-vee section#hero .content h2 {
    font-size: 1.5rem;
  }
  body.page-hy-vee section#hero .content p {
    font-size: 1rem;
    max-width: 330px;
  }
  body.page-hy-vee section#hero .content .cta .logo span {
    font-size: 1rem;
  }
  body.page-hy-vee section#hero .content .cta .logo img {
    width: 200px;
  }
  body.page-hy-vee section#two {
    background-image: none !important;
    padding: 2rem 0;
    max-height: none;
  }
  body.page-hy-vee section#two .content {
    max-width: 100%;
  }
  body.page-hy-vee section#two .content h2 {
    text-align: center;
  }
  body.page-hy-vee section#two .content ul {
    margin: 2rem auto;
  }
  body.page-hy-vee section#two .content ul li {
    max-width: 100%;
    min-width: 100px;
    width: auto;
    margin: 0 1rem;
    text-align: left;
    display: block;
  }
  body.page-hy-vee section#learn {
    padding: 0;
  }
}

/*-- Probiotics Mobile Start --*/
.item-mobile {
  display: none;
}
/*-- Probiotics Mobile End --*/

@media all and (max-width: 980px) {
  body.page-hy-vee section#three {
    background-image: none !important;
    padding: 2rem 0 0 0;
  }
  body.page-hy-vee section#three .content {
    max-width: 100%;
    text-align: center;
  }
  body.page-hy-vee section#three .content a.location-btn {
    margin: 2rem auto;
  }
}

@media all and (max-width: 768px) {
  body.page-hy-vee section#hero {
    background-position: 76% center;
  }
  body.page-hy-vee section#hero .content {
    display: none;
  }
  body.page-hy-vee section#two .content ul {
    width: 100%;
    text-align: center;
  }
  body.page-hy-vee figure#city-modal section#city-list ul {
    height: calc(100vh - 106px);
  }
  body.page-hy-vee figure#city-modal section#city-list ul li {
    width: 100%;
  }
}

/*--------------------------------------------------------------
# Blog landing
--------------------------------------------------------------*/
body.category section#hero,
body.author-single section#hero,
body.tag section#hero {
  background-repeat: repeat;
  background-size: 13rem 13rem;
  background-color: #f6f6f6;
  background-image: url("img/pattern-blog.svg");
}

body.category section#hero h1,
body.author-single section#hero h1,
body.tag section#hero h1 {
  color: #202020;
  line-height: 1.1;
  font-size: 3rem;
}

body.category section#hero p.sub-title,
body.author-single section#hero p.sub-title,
body.tag section#hero p.sub-title {
  color: #202020;
  font-size: 1.2rem;
  width: 100%;
  max-width: 660px;
  text-align: center;
  line-height: 1.4;
  padding: 0 1rem;
  margin: 1rem auto;
}

body.category section#hero p.sub-title a,
body.author-single section#hero p.sub-title a,
body.tag section#hero p.sub-title a {
  display: inline-block;
  color: #0080c6;
  font-weight: 700;
}

body.category section#hero p.sub-title a:hover,
body.author-single section#hero p.sub-title a:hover,
body.tag section#hero p.sub-title a:hover {
  color: #8ed8f8;
}

body.category #blog-nav,
body.author-single #blog-nav,
body.tag #blog-nav {
  background-color: #0080c6;
}

body.category #blog-nav nav#blog ul.menu,
body.author-single #blog-nav nav#blog ul.menu,
body.tag #blog-nav nav#blog ul.menu {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: (1fr)[2];
      grid-template-columns: repeat(2, 1fr);
}

body.category #blog-nav nav#blog ul.menu li a,
body.author-single #blog-nav nav#blog ul.menu li a,
body.tag #blog-nav nav#blog ul.menu li a {
  color: white;
  text-transform: uppercase;
  font-weight: 700;
  padding: 1rem 2rem;
  text-align: center;
}

body.category #blog-nav nav#blog ul.menu li ul.sub-menu,
body.author-single #blog-nav nav#blog ul.menu li ul.sub-menu,
body.tag #blog-nav nav#blog ul.menu li ul.sub-menu {
  position: absolute;
  background-color: #0094e5;
  max-height: 0;
  z-index: 9;
  width: 100%;
  overflow: hidden;
  -webkit-transition: all 0.4s ease-out;
  transition: all 0.4s ease-out;
}

body.category #blog-nav nav#blog ul.menu li ul.sub-menu li,
body.author-single #blog-nav nav#blog ul.menu li ul.sub-menu li,
body.tag #blog-nav nav#blog ul.menu li ul.sub-menu li {
  -webkit-transition: all 0.1s linear;
  transition: all 0.1s linear;
}

body.category #blog-nav nav#blog ul.menu li ul.sub-menu li a,
body.author-single #blog-nav nav#blog ul.menu li ul.sub-menu li a,
body.tag #blog-nav nav#blog ul.menu li ul.sub-menu li a {
  color: white;
  font-size: 0.9rem;
  -webkit-transition: all 0.1s linear;
  transition: all 0.1s linear;
}

body.category #blog-nav nav#blog ul.menu li ul.sub-menu li:hover,
body.author-single #blog-nav nav#blog ul.menu li ul.sub-menu li:hover,
body.tag #blog-nav nav#blog ul.menu li ul.sub-menu li:hover {
  background-color: #0080c6;
}

body.category #blog-nav nav#blog ul.menu li:hover a,
body.author-single #blog-nav nav#blog ul.menu li:hover a,
body.tag #blog-nav nav#blog ul.menu li:hover a {
  color: #8ed8f8;
}

body.category #blog-nav nav#blog ul.menu li:hover ul.sub-menu,
body.author-single #blog-nav nav#blog ul.menu li:hover ul.sub-menu,
body.tag #blog-nav nav#blog ul.menu li:hover ul.sub-menu {
  max-height: 500px;
}

body.category #blog-mobile,
body.author-single #blog-mobile,
body.tag #blog-mobile {
  display: none;
}

body.category #blog-mobile a.roll-out,
body.author-single #blog-mobile a.roll-out,
body.tag #blog-mobile a.roll-out {
  color: white;
  font-size: 1.3rem;
  font-weight: 700;
  text-align: center;
  padding: 0.8rem 0;
}

body.category #blog-mobile a.roll-out::after,
body.author-single #blog-mobile a.roll-out::after,
body.tag #blog-mobile a.roll-out::after {
  content: " \0203A";
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
  display: block;
  position: absolute;
  color: white;
  top: 0;
  bottom: 0;
  margin: auto;
  right: 3rem;
  width: auto;
  height: 2.2rem;
  pointer-events: none;
  line-height: 1;
  font-weight: 900;
  font-size: 1.2rem;
}

body.category #blog-mobile ul.menu li a,
body.author-single #blog-mobile ul.menu li a,
body.tag #blog-mobile ul.menu li a {
  color: white;
  font-size: 1.1rem;
  text-align: center;
  padding: 0.9rem 0;
}

body.category #blog-mobile ul.menu li ul.sub-menu,
body.author-single #blog-mobile ul.menu li ul.sub-menu,
body.tag #blog-mobile ul.menu li ul.sub-menu {
  background-color: #0094e5;
}

body.category #blog-mobile ul.menu li ul.sub-menu li a,
body.author-single #blog-mobile ul.menu li ul.sub-menu li a,
body.tag #blog-mobile ul.menu li ul.sub-menu li a {
  color: white;
  text-align: center;
}

body.category #blog-mobile .menu-blog-navigation-container,
body.author-single #blog-mobile .menu-blog-navigation-container,
body.tag #blog-mobile .menu-blog-navigation-container {
  max-height: 0;
  overflow: hidden;
}

body.category #blog-mobile.expand a::after,
body.author-single #blog-mobile.expand a::after,
body.tag #blog-mobile.expand a::after {
  -webkit-transform: rotate(-90deg);
          transform: rotate(-90deg);
  right: 2rem;
  color: #8ed8f8;
}

body.category #blog-mobile.expand .menu-blog-navigation-container,
body.author-single #blog-mobile.expand .menu-blog-navigation-container,
body.tag #blog-mobile.expand .menu-blog-navigation-container {
  max-height: 2000px;
}

body.category .content,
body.author-single .content,
body.tag .content {
  padding: 0 1rem;
}

body.category .content #sort,
body.author-single .content #sort,
body.tag .content #sort {
  margin-top: 2rem;
}

body.category .content #sort label,
body.author-single .content #sort label,
body.tag .content #sort label {
  font-size: 1.1rem;
  font-weight: 700;
}

body.category .content #sort .select-box,
body.author-single .content #sort .select-box,
body.tag .content #sort .select-box {
  display: inline-block;
}

body.category .content #sort .select-box select#sortbox,
body.author-single .content #sort .select-box select#sortbox,
body.tag .content #sort .select-box select#sortbox {
  background: #f6f6f6;
  border: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  color: #707070;
  padding: 0 2rem 0 1rem;
  cursor: pointer;
  outline: none;
  border-radius: 5px;
  vertical-align: baseline;
  height: 50px;
}

body.category .content #sort .select-box::after,
body.author-single .content #sort .select-box::after,
body.tag .content #sort .select-box::after {
  content: " \0203A";
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
  display: block;
  position: absolute;
  color: #707070;
  top: 0;
  bottom: 0;
  margin: auto;
  right: 1rem;
  width: auto;
  height: 2.2rem;
  pointer-events: none;
  line-height: 1;
  font-weight: 900;
  font-size: 1.2rem;
}

body.category .content section#content .d-grid,
body.author-single .content section#content .d-grid,
body.tag .content section#content .d-grid {
  -ms-grid-columns: (1fr)[4];
      grid-template-columns: repeat(4, 1fr);
}

body.category .content section#content .d-grid .item,
body.author-single .content section#content .d-grid .item,
body.tag .content section#content .d-grid .item {
  padding: 1.2rem;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}

body.category .content section#content .d-grid .item .thumb,
body.author-single .content section#content .d-grid .item .thumb,
body.tag .content section#content .d-grid .item .thumb {
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 1rem;
  height: 160px;
}

body.category .content section#content .d-grid .item .thumb img,
body.author-single .content section#content .d-grid .item .thumb img,
body.tag .content section#content .d-grid .item .thumb img {
  max-width: 100%;
  width: 100%;
  height: 100%;
  -webkit-transform: scale(0.4);
          transform: scale(0.4);
}

body.category .content section#content .d-grid .item h3,
body.author-single .content section#content .d-grid .item h3,
body.tag .content section#content .d-grid .item h3 {
  color: #0080c6;
}

body.category .content section#content .d-grid .item .blurb,
body.author-single .content section#content .d-grid .item .blurb,
body.tag .content section#content .d-grid .item .blurb {
  padding-bottom: 1rem;
  border-bottom: 1px solid #a6a6a6;
}

body.category .content section#content .d-grid .item .blurb p,
body.author-single .content section#content .d-grid .item .blurb p,
body.tag .content section#content .d-grid .item .blurb p {
  color: #707070;
  font-weight: 500;
  line-height: 1.2;
}

body.category .content section#content .d-grid .item .blurb span,
body.author-single .content section#content .d-grid .item .blurb span,
body.tag .content section#content .d-grid .item .blurb span {
  color: #0080c6;
  font-weight: 500;
}

body.category .content section#content .d-grid .item #details,
body.author-single .content section#content .d-grid .item #details,
body.tag .content section#content .d-grid .item #details {
  padding-top: 0.6rem;
}

body.category .content section#content .d-grid .item #details .date,
body.author-single .content section#content .d-grid .item #details .date,
body.tag .content section#content .d-grid .item #details .date {
  text-align: right;
  color: #707070;
  font-weight: 500;
}

body.category .content section#content .d-grid .item:hover .thumb img,
body.author-single .content section#content .d-grid .item:hover .thumb img,
body.tag .content section#content .d-grid .item:hover .thumb img {
  -webkit-transform: scale(0.6);
          transform: scale(0.6);
}

body.category .content section#content .d-grid .item:nth-child(9n+1) .thumb,
body.author-single .content section#content .d-grid .item:nth-child(9n+1) .thumb,
body.tag .content section#content .d-grid .item:nth-child(9n+1) .thumb {
  background-color: #ff901d;
}

body.category .content section#content .d-grid .item:nth-child(9n+1):hover,
body.author-single .content section#content .d-grid .item:nth-child(9n+1):hover,
body.tag .content section#content .d-grid .item:nth-child(9n+1):hover {
  background-color: #fff4e8;
}

body.category .content section#content .d-grid .item:nth-child(9n+2) .thumb,
body.author-single .content section#content .d-grid .item:nth-child(9n+2) .thumb,
body.tag .content section#content .d-grid .item:nth-child(9n+2) .thumb {
  background-color: #0080c6;
}

body.category .content section#content .d-grid .item:nth-child(9n+2):hover,
body.author-single .content section#content .d-grid .item:nth-child(9n+2):hover,
body.tag .content section#content .d-grid .item:nth-child(9n+2):hover {
  background-color: #e5f2f9;
}

body.category .content section#content .d-grid .item:nth-child(9n+3) .thumb,
body.author-single .content section#content .d-grid .item:nth-child(9n+3) .thumb,
body.tag .content section#content .d-grid .item:nth-child(9n+3) .thumb {
  background-color: #8dc63f;
}

body.category .content section#content .d-grid .item:nth-child(9n+3):hover,
body.author-single .content section#content .d-grid .item:nth-child(9n+3):hover,
body.tag .content section#content .d-grid .item:nth-child(9n+3):hover {
  background-color: #f3f9eb;
}

body.category .content section#content .d-grid .item:nth-child(9n+4) .thumb,
body.author-single .content section#content .d-grid .item:nth-child(9n+4) .thumb,
body.tag .content section#content .d-grid .item:nth-child(9n+4) .thumb {
  background-color: #fed230;
}

body.category .content section#content .d-grid .item:nth-child(9n+4):hover,
body.author-single .content section#content .d-grid .item:nth-child(9n+4):hover,
body.tag .content section#content .d-grid .item:nth-child(9n+4):hover {
  background-color: #fffaea;
}

body.category .content section#content .d-grid .item:nth-child(9n+5) .thumb,
body.author-single .content section#content .d-grid .item:nth-child(9n+5) .thumb,
body.tag .content section#content .d-grid .item:nth-child(9n+5) .thumb {
  background-color: #572e8f;
}

body.category .content section#content .d-grid .item:nth-child(9n+5):hover,
body.author-single .content section#content .d-grid .item:nth-child(9n+5):hover,
body.tag .content section#content .d-grid .item:nth-child(9n+5):hover {
  background-color: #eeeaf4;
}

body.category .content section#content .d-grid .item:nth-child(9n+6) .thumb,
body.author-single .content section#content .d-grid .item:nth-child(9n+6) .thumb,
body.tag .content section#content .d-grid .item:nth-child(9n+6) .thumb {
  background-color: #d80b8c;
}

body.category .content section#content .d-grid .item:nth-child(9n+6):hover,
body.author-single .content section#content .d-grid .item:nth-child(9n+6):hover,
body.tag .content section#content .d-grid .item:nth-child(9n+6):hover {
  background-color: #fbe6f3;
}

body.category .content section#content .d-grid .item:nth-child(9n+7) .thumb,
body.author-single .content section#content .d-grid .item:nth-child(9n+7) .thumb,
body.tag .content section#content .d-grid .item:nth-child(9n+7) .thumb {
  background-color: #c41039;
}

body.category .content section#content .d-grid .item:nth-child(9n+7):hover,
body.author-single .content section#content .d-grid .item:nth-child(9n+7):hover,
body.tag .content section#content .d-grid .item:nth-child(9n+7):hover {
  background-color: #f9e7eb;
}

body.category .content section#content .d-grid .item:nth-child(9n+8) .thumb,
body.author-single .content section#content .d-grid .item:nth-child(9n+8) .thumb,
body.tag .content section#content .d-grid .item:nth-child(9n+8) .thumb {
  background-color: #8ed8f8;
}

body.category .content section#content .d-grid .item:nth-child(9n+8):hover,
body.author-single .content section#content .d-grid .item:nth-child(9n+8):hover,
body.tag .content section#content .d-grid .item:nth-child(9n+8):hover {
  background-color: #f3fbfe;
}

body.category .content section#content .d-grid .item:nth-child(9n+9) .thumb,
body.author-single .content section#content .d-grid .item:nth-child(9n+9) .thumb,
body.tag .content section#content .d-grid .item:nth-child(9n+9) .thumb {
  background-color: #00853f;
}

body.category .content section#content .d-grid .item:nth-child(9n+9):hover,
body.author-single .content section#content .d-grid .item:nth-child(9n+9):hover,
body.tag .content section#content .d-grid .item:nth-child(9n+9):hover {
  background-color: #e5f3eb;
}

/*--------------------------------------------------------------
# Blog post
--------------------------------------------------------------*/
.blog-single section#content {
  padding: 4rem 1rem 5rem 1rem;
}

.blog-single section#content .date-grid {
  -ms-grid-columns: 2fr 7fr;
      grid-template-columns: 2fr 7fr;
  gap: 2%;
}

.blog-single section#content .date-grid #date {
  font-weight: 700;
  font-size: 1.2rem;
  text-align: right;
}

.blog-single section#content .date-grid .contents .copy p {
  font-size: 1.1rem;
  margin: 0 0 1.3rem 0;
}

.blog-single section#content .date-grid .contents .copy p a {
  display: inline-block;
  color: #0080c6;
  font-weight: 500;
}

.blog-single section#content .date-grid .contents .copy p a:hover {
  color: #8ed8f8;
}

.blog-single section#content .date-grid .contents .copy strong {
  font-weight: 700;
  display: block;
  margin-bottom: 0.5rem;
  font-size: 1.1rem;
}

.blog-single section#content .date-grid .contents .copy ul {
  list-style-type: disc;
  -webkit-margin-before: 0.5em;
          margin-block-start: 0.5em;
  -webkit-margin-after: 2em;
          margin-block-end: 2em;
  -webkit-margin-start: 0;
          margin-inline-start: 0;
  -webkit-margin-end: 0;
          margin-inline-end: 0;
  -webkit-padding-start: 1.7rem;
          padding-inline-start: 1.7rem;
  text-align: left;
}

.blog-single section#content .date-grid .contents .copy ul li {
  font-size: 1.1rem;
}

.blog-single section#content .date-grid .contents figure#tags {
  margin: 0 0 2rem 0;
  padding: 0.5rem 0;
  border-bottom: 1px solid #333;
}

.blog-single section#content .date-grid .contents figure#tags a {
  display: inline-block;
  color: #0080c6;
  font-weight: 500;
}

.blog-single section#content .date-grid .contents figure#tags a:hover {
  color: #8ed8f8;
}

.blog-single section#content .date-grid .contents figure#author {
  margin: 4rem 0 0 0;
  padding: 2rem 3rem 2.5rem 3rem;
  background-color: #0080c6;
}

.blog-single section#content .date-grid .contents figure#author .d-grid {
  -ms-grid-columns: 1fr 3fr 2fr;
      grid-template-columns: 1fr 3fr 2fr;
  gap: 4%;
}

.blog-single section#content .date-grid .contents figure#author .d-grid .left-contents h4 {
  color: #fed230;
  text-transform: uppercase;
  margin-bottom: 1rem;
  text-align: center;
  font-size: 0.85rem;
}

.blog-single section#content .date-grid .contents figure#author .d-grid .left-contents #author-avatar img {
  margin: 0 auto;
  -webkit-filter: drop-shadow(4px 4px 0px #8ed8f8);
          filter: drop-shadow(4px 4px 0px #8ed8f8);
}

.blog-single section#content .date-grid .contents figure#author .d-grid .mid-contents {
  padding-top: 2rem;
}

.blog-single section#content .date-grid .contents figure#author .d-grid .mid-contents h5 {
  color: white;
  font-size: 1.1rem;
  padding-bottom: 1rem;
  border-bottom: 2px solid #fed230;
}

.blog-single section#content .date-grid .contents figure#author .d-grid .mid-contents p {
  color: white;
}

.blog-single section#content .date-grid .contents figure#author .d-grid .mid-contents p a {
  display: inline-block;
  color: white;
}

.blog-single section#content .date-grid .contents figure#author .d-grid .mid-contents p a:hover {
  color: #d3edfb;
}

.blog-single section#content .date-grid .contents figure#author .d-grid .mid-contents h4 {
  color: white;
}

.blog-single section#content .date-grid .contents figure#author .d-grid .mid-contents ul#social-net {
  margin: 0.2rem 0 0 0;
}

.blog-single section#content .date-grid .contents figure#author .d-grid .mid-contents ul#social-net li {
  opacity: 0.7;
  width: 30px;
  display: inline-block;
}

.blog-single section#content .date-grid .contents figure#author .d-grid .mid-contents ul#social-net li a {
  padding: 0.3rem;
}

.blog-single section#content .date-grid .contents figure#author .d-grid .mid-contents ul#social-net li a img {
  width: 100%;
}

.blog-single section#content .date-grid .contents figure#author .d-grid .mid-contents ul#social-net li:hover {
  opacity: 1;
}

.blog-single section#content .date-grid .contents figure#author .d-grid .right-contents .d-grid {
  -ms-grid-columns: 2fr 1fr;
      grid-template-columns: 2fr 1fr;
}

.blog-single section#content .date-grid .contents figure#author .d-grid .right-contents .d-grid h4 {
  color: #fed230;
  text-transform: uppercase;
  margin-bottom: 1rem;
  text-align: left;
}

.blog-single section#content .date-grid .contents figure#author .d-grid .right-contents .d-grid a {
  text-align: right;
  color: white;
  text-transform: uppercase;
  font-weight: 700;
  font-size: 0.9rem;
}

.blog-single section#content .date-grid .contents figure#author .d-grid .right-contents .d-grid a:hover {
  text-decoration: underline;
}

.blog-single section#content .date-grid .contents figure#author .d-grid .right-contents ul#blog-list li {
  border-bottom: 1px solid #8bd3f5;
  margin: 1rem 0 1.1rem 0;
}

.blog-single section#content .date-grid .contents figure#author .d-grid .right-contents ul#blog-list li a h6 {
  color: white;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.1;
  display: block;
}

.blog-single section#content .date-grid .contents figure#author .d-grid .right-contents ul#blog-list li a p {
  color: #8bd3f5;
  font-size: 0.8rem;
  font-weight: 500;
  margin: 0.7em 0 1em 0;
}

.blog-single section#content .date-grid .contents figure#author .d-grid .right-contents ul#blog-list li:last-of-type {
  border-bottom: none;
}

.blog-single section#content .date-grid .contents figure#author .d-grid .right-contents ul#blog-list li:hover a h6 {
  text-decoration: underline;
}

body.single section#breadcrumbs {
  background-color: #f6f6f6;
  padding: 0.5rem 0 0.2rem 0;
}

body.single section#breadcrumbs p#breadcrumbs {
  margin: 0;
  padding: 0 1rem;
}

body.single section#breadcrumbs span {
  color: #0080c6;
  font-weight: 700;
}

body.single section#breadcrumbs span a {
  display: inline-block;
  color: #0080c6;
  font-weight: 700;
}

/*--------------------------------------------------------------
# 404
--------------------------------------------------------------*/
body.error404 #primary {
  padding-top: 75px;
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
}

body.error404 #primary main section.error-404 {
  padding: 4rem 2rem;
}

body.error404 #primary main section.error-404 h3 {
  color: #0080c6;
  font-size: 7rem;
  text-align: center;
  font-weight: 900;
  margin-bottom: 2rem;
}

body.error404 #primary main section.error-404 p {
  margin-bottom: 1rem;
  font-size: 1.5rem;
  font-weight: 500;
  text-align: center;
}

body.error404 #primary main section.error-404 .btn-container {
  text-align: center;
}

body.error404 #primary main section.error-404 .btn-container a {
  display: inline-block;
}

/*--------------------------------------------------------------
# Responsive
--------------------------------------------------------------*/
@media all and (max-width: 1300px) {
  body.page-home section#hero div.slide-two .text-container figure {
    margin: 50px 0 0 0;
  }
}
@media all and (max-width: 1200px) {
  body.page-home section#hero div.home-hero .hero-container div.bottle {
    right: -2rem;
  }
  body.page-home section#boxes ul li a {
    min-height: 12rem;
  }
  body.page-home section#blog-feed .full-container .mid-container {
    padding: 4rem 0;
    display: block;
  }
  body.page-home section#blog-feed .full-container .mid-container aside {
    float: none !important;
    width: 100% !important;
    margin-bottom: 4rem;
  }
  body.page-home section#blog-feed .full-container .mid-container aside.read .contents {
    margin: 0 auto;
  }
  body.page-healthcare-practitioners section#join {
    padding: 0 2rem 4rem 2rem;
  }
  body.page-healthcare-practitioners section#join div.tween-container {
    max-width: 1000px;
  }
  body.page-products-all section#content {
    padding-top: 2rem;
  }
  body.page-products-all section#content div.contents aside.select div.box {
    padding: 1.2rem;
  }
  body.single section#info ul li h4.label {
    font-size: 1.5rem;
    width: 253px;
  }
  body.single section#product-hero div.contain div.text figure.shop div.btns div.item a.shop span {
    font-size: 1.5rem;
  }
  body.single section#product-hero div.contain div.text figure.shop div.btns div.item a.amazon-btn {
    width: 241px;
  }
  body.single section#product-hero figure.size-control {
    left: 0;
    right: 0;
    text-align: center;
    top: 0;
  }
}

@media all and (max-width: 1024px) {
  header#masthead nav#products-nav .container ul li a .view-all,
  header#masthead nav#vd-nav .container ul li a .view-all {
    font-size: 1rem;
    width: 100px;
    height: 100px;
  }
  header#masthead nav#products-nav .container ul li a span.label,
  header#masthead nav#vd-nav .container ul li a span.label {
    font-size: 0.8rem;
  }
  body.page-home section#hero div.home-hero {
    height: 500px;
  }
  body.page-home section#hero div.home-hero .hero-container div {
    padding-bottom: 0;
  }
  body.page-home section#hero div.home-hero .hero-container div h1.hero-title {
    font-size: 3.5rem;
    max-width: 500px;
  }
}

@media all and (max-width: 1062px) {
  header#masthead nav#vd-nav .container ul li {
    width: 150px;
  }
}

@media all and (max-width: 980px) {

   /*-- Probiotics Mobile Start --*/
   .item-mobile {
    display: block;
  }
  body.single section#product-hero .container .product-swap div.item {
    display: none;
  }
  body.single section#product-hero #tns3-ow {
    display: block;
  }
  body.single section#product-hero #tns4-ow {
    display: block;
  }
  body.single section#product-hero #tns4-ow .tns-nav {
    display: none;
  }
  body.single section#product-hero .item-mobile .tns-nav {
    display: block;
  }
  /*-- Probiotics Mobile End --*/

  section#additional div.box aside {
    float: none !important;
    width: 100% !important;
    border: none !important;
    padding: 0 !important;
    margin-bottom: 2.5rem;
    -ms-grid-columns: 70px 1fr;
        grid-template-columns: 70px 1fr;
  }
  body.page-our-story section#content section#bottle-block div.content-block p,
  body.info section#content section#bottle-block div.content-block p {
    width: 75%;
  }
  body.page-faqs #nav-top,
  body.info #nav-top {
    display: block;
  }
  body.page-faqs section#faq,
  body.info section#faq {
    -ms-grid-columns: none;
        grid-template-columns: none;
    display: block;
    padding: 2rem;
  }
  body.page-faqs section#faq aside.categories div.stick,
  body.info section#faq aside.vategories div.stick {
    margin-bottom: 2rem;
    position: relative;
    top: 0;
  }
  body.page-faqs section#faq aside.categories div.stick ul.box {
    width: 49%;
    float: left;
    margin-right: 2%;
  }
  body.info section#faq aside.categories div.stick ul.box {
    width: 100%;
    text-align: center;
    float: none;
    margin: 0 0 2rem 0;
  }
  body.page-faqs section#faq aside.categories div.stick div.box,
  body.info section#faq aside.categories div.stick div.box {
    float: left;
    width: 49%;
    margin: 0;
  }
  body.info section#faq aside.categories div.stick div.box {
    display: none;
  }
  body.page-faqs section#faq div#faq-content div.block,
  body.info section#faq div#faq-content div.block {
    margin-bottom: 2rem;
  }
  body.page-healthcare-practitioners section#join {
    background-image: none !important;
  }
  body.page-products-all section#content {
    padding: 2rem 1rem;
  }
  body.page-products-all section#content div.contents {
    display: block;
    -ms-grid-columns: none;
        grid-template-columns: none;
  }
  body.single section#breadcrumbs p#breadcrumbs {
    text-align: center;
  }
  body.single section#product-hero {
    padding: 2rem;
  }
  body.single section#product-hero figure.size-control {
    left: 0;
    right: 0;
    text-align: center;
    top: 0;
  }
  body.single section#product-hero div.contain {
    display: block;
    -ms-grid-columns: none;
        grid-template-columns: none;
    gap: 0;
  }
  body.single section#product-hero div.contain div.product-img {
    width: 50%;
    margin: 0 auto;
    min-width: 250px;
  }
  body.single section#product-hero div.contain div.text {
    text-align: center;
  }
  body.single section#product-hero div.contain div.text figure.shop {
    margin: 2rem 0 2rem 0;
  }
  body.single section#product-hero div.contain div.text figure.shop div.btns {
    display: block;
    width: 100%;
  }
  body.single section#product-hero div.contain div.text figure.shop div.btns span {
    font-size: 1.5rem;
  }
  body.single section#product-hero div.contain div.text figure.shop div.btns a.shop {
    max-width: 250px;
    margin: 0.5rem auto;
  }
  body.single section#product-hero div.contain div.text figure.shop div.btns a span {
    font-size: 1.5rem;
  }
  body.single section#info ul {
    display: block;
    -ms-grid-columns: none;
        grid-template-columns: none;
    gap: 0;
  }
  body.single section#info ul li {
    margin: 0.5rem 0;
  }
  body.single section#product-hero .tns-outer {
    display: block;
  }
  body.page-where-to-buy section div.box div.container ul li:nth-child(3n+3)::after {
    content: none;
  }
  body.page-where-to-buy section div.box div.container ul li:nth-child(4n+4)::after {
    content: '';
  }
  body.page-home section#boxes ul li a {
    min-height: 10rem;
  }
  body.category .content section#content .d-grid,
  body.author-single .content section#content .d-grid,
  body.tag .content section#content .d-grid {
    -ms-grid-columns: (1fr)[2];
        grid-template-columns: repeat(2, 1fr);
  }
  .blog-single section#content .date-grid .contents figure#author .d-grid {
    display: block;
  }
  .blog-single section#content .date-grid .contents figure#author .d-grid .left-contents {
    margin-bottom: 1.5rem;
  }
  .blog-single section#content .date-grid .contents figure#author .d-grid .mid-contents {
    padding: 0;
    margin-bottom: 1.5rem;
  }
  .blog-single section#content .date-grid .contents figure#author .d-grid .mid-contents h5,
  .blog-single section#content .date-grid .contents figure#author .d-grid .mid-contents p,
  .blog-single section#content .date-grid .contents figure#author .d-grid .mid-contents h4 {
    text-align: center;
  }
  .blog-single section#content .date-grid .contents figure#author .d-grid .mid-contents ul#social-net {
    margin: 1rem auto;
    width: 100%;
    text-align: center;
  }
  .blog-single section#content .date-grid .contents figure#author .d-grid .mid-contents h5 {
    font-size: 2rem;
  }
  .blog-single section#content .date-grid .contents figure#author .d-grid .right-contents .d-grid {
    display: block;
  }
  .blog-single section#content .date-grid .contents figure#author .d-grid .right-contents .d-grid h4 {
    text-align: center;
  }
  .blog-single section#content .date-grid .contents figure#author .d-grid .right-contents .d-grid a {
    text-align: center;
    font-size: 1.5rem;
  }
  header#masthead .header-backing .container {
    -ms-grid-columns: 110px 1fr 30px 90px;
        grid-template-columns: 110px 1fr 30px 90px;
  }
  header#masthead .header-backing .container #search a.search-btn {
    display: block;
  }
  header#masthead .header-backing .container #search form {
    display: block;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
  }
  header#masthead .header-backing .container #search form label {
    width: 100%;
  }
  header#masthead .header-backing .container #search form label .is-search-input {
    border-radius: 0;
    border: none;
    font-size: 1.4rem;
    padding: 1rem;
    height: auto;
  }
  header#masthead .header-backing .container #search form label .is-search-input:focus {
    border: none;
    background-color: white;
  }
  header#masthead .header-backing .container #search form.expand {
    top: 68px;
  }
  header#masthead .header-backing .container #search button.is-search-submit {
    display: none;
  }
}

@media all and (max-width: 900px) {
  body.page-home section#hero div.slide-two {
    height: 650px;
    background-size: 1300px;
    background-position: bottom right;
    background-repeat: no-repeat;
  }
}

@media all and (max-width: 768px) {
  body.page-home section#hero div.home-hero .hero-container div h1.hero-title {
    margin: 0 auto;
    text-align: center;
  }
  body.page-home section#hero div.home-hero .hero-container div a.orange__btn {
    display: none;
  }
  body.page-home section#hero div.home-hero .hero-container {
    display: block;
    padding-top: 2rem;
  }
  body.page-home section#boxes {
    padding: 0 0 2rem 0;
  }
  body.page-home section#hero div.home-hero {
    background-color: white;
    /* background-size: 923px; */
    background-repeat: no-repeat;
    background-position: top left;
  }
  body.page-home section#hero div.home-hero .hero-container div.bottle img {
    position: absolute;
    bottom: -3px;
  }
  body.page-home section#hero div.slide-two .text-container {
    padding: 1rem 1rem;
  }
  body.page-home section#hero div.slide-two .text-container figure {
    grid-template-columns: 120px 1fr;
    margin: 0 auto;
    width: 480px;
  }
  body.page-home section#hero div.slide-two .text-container figure .logo {
    margin: 0 auto 0.5rem auto;
  }
  body.page-home section#hero div.slide-two .text-container figure .line-one {
    /* display: inline-block; */
    display: block;
  }
  body.page-home section#hero div.slide-two .text-container figure .line-one span {
    /* display: inline-block; */
    font-size: 4.4rem;
    line-height: 3.5rem;
  }
  body.page-home section#hero div.slide-two .text-container figure .line-two {
    font-size: 2rem;
    width: 100%;
  }
  body.page-faqs #nav-top, body.info #nav-top {
    bottom: 4rem;
  }
  :root {
    font-size: 14px;
  }
  header#masthead {
    position: relative;
  }
  header#masthead .header-backing .container {
    -ms-grid-columns: (1fr)[2];
        grid-template-columns: repeat(2, 1fr);
  }
  header#masthead .header-backing .container div#main-logo {
    margin: 0 auto 0 0;
    float: none;
  }
  header#masthead nav#products-nav,
  header#masthead nav#vd-nav {
    display: none;
  }
  nav#site-navigation,
  div#lang,
  aside#disclaimer,
  nav#products-nav {
    display: none;
  }
  div#disc-mobile,
  nav#mobile,
  nav#mobile-nav {
    display: block;
  }
  div#content {
    padding-top: 0;
  }
  body.lang-menu {
    padding-right: 0 !important;
  }
  footer#colophon section#newsletter .container {
    display: block;
  }
  footer#colophon section#newsletter .container div#news-img {
    display: none;
  }
  footer#colophon section#footer .container {
    display: block;
  }
  footer#colophon section#footer .container div#foot-nav {
    display: block;
  }
  footer#colophon section#footer .container div#foot-nav nav h6.footer {
    -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
    border-radius: 5px;
    height: 50px;
    padding: 0 24px;
    border: 2px solid rgba(0, 0, 0, 0.15);
    background: white;
    display: block;
    width: 100%;
    cursor: pointer;
    line-height: 3em;
    margin: 13px 0 0 0;
  }
  footer#colophon section#footer .container div#foot-nav nav h6.footer::after {
    content: "+";
    float: right;
  }
  footer#colophon section#footer .container div#foot-nav nav div {
    display: none;
    background: #F6F6F6;
    font-size: 0.8rem;
  }
  footer#colophon section#footer .container div#foot-nav nav div ul {
    padding: 1rem;
    margin-top: 0;
  }
  footer#colophon section#footer .container div#foot-nav nav div ul li {
    margin-bottom: 1rem;
  }
  footer#colophon section#footer .container div#foot-nav nav div ul li a {
    font-weight: 300;
    font-size: 1.2rem;
  }
  footer#colophon section#footer .container div#foot-nav nav.expand div {
    display: block;
  }
  footer#colophon section#footer section#social-footer nav#social-footer ul#social li {
    width: 2rem;
    height: 2rem;
  }
  footer#colophon section#copyright {
    padding-bottom: 65px;
  }
  /* body.page-home section#hero div.home-hero {
    max-height: 350px;
  } */
  /* body.page-home section#hero div.home-hero .hero-container div {
    display: none;
  } */
  body.page-home section#hero div.home-hero .hero-container div.bottle {
    min-width: 300px;
    left: 0;
  }
  body.page-home section#hero-mobile {
    display: block;
  }
  body.page-home section#hero-mobile {
    display: block;
    padding-top: 0;
    padding-bottom: 0;
  }
  body.page-home section#hero-mobile .btn {
    width: 100%;
    border-radius: 0;
    box-shadow: none;
    min-height: 10rem;
    display: flex;
    align-items: center;
  }
  body.page-home section#hero-mobile .btn span {
    display: block;
    width: 100%;
    text-align: center;
    font-weight: 700;
    font-size: 2rem;
    text-shadow: 0 1px 10px rgb(0 0 0 / 20%);
    margin: 0;
  }

  body.page-home section#boxes ul.d-grid {
    -ms-grid-columns: none;
        grid-template-columns: none;
    grid-gap: 0;
  }
  body.page-home section#boxes ul.d-grid li {
    background-size: 280px;
  }
  body.page-home section#boxes ul.d-grid li a {
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  body.page-home section#boxes ul.d-grid li a img {
    display: none;
  }
  body.page-home section#ingredients div.details {
    background-image: none !important;
    height: auto;
  }
  body.page-home section#ingredients div.details div.bar {
    height: 100%;
    position: relative;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  body.page-home section#ingredients div.details div.bar div.contents {
    padding: 0;
  }
  body.page-home section#ingredients div.details ul.home-manufacturing {
    max-width: 436px;
  }
  body.page-home section#blog-feed aside.blog {
    display: block;
  }
  body.page-home section#blog-feed aside.blog article.blog-box {
    display: block;
    margin-bottom: 1rem;
  }
  h1.hero-title {
    font-size: 2rem;
  }
  body.page-where-to-buy section#online-retailers,
  body.page-where-to-buy section#authorized-retailers {
    padding-top: 4rem;
  }
  body.page-where-to-buy section#retailers {
    padding-top: 0;
    padding-bottom: 0;
  }
  body.page-where-to-buy section#retailers div.box div.contain {
    max-width: none;
    margin: 0;
  }
  body.page-where-to-buy section#retailers div.box div.contain a.logo-box {
    float: none;
    border: none !important;
    padding: 0 !important;
  }
  body.page-where-to-buy section#retailers div.box div.contain a.logo-box img {
    margin: 0 auto;
  }
  body.page-where-to-buy section#online-retailers {
    padding-bottom: 0;
  }
  body.page-where-to-buy section#online-retailers div.logo-container a {
    display: block;
    margin: 1rem auto;
    padding: 2rem;
  }
  body.page-contact-us section#contacts {
    max-width: 600px;
    margin: 0 auto;
  }
  body.page-contact-us section#contact-content {
    padding: 0 2rem 2rem 2rem;
  }
  body.page-contact-us section#contact-content ul.social {
    display: block;
  }
  body.page-contact-us section#contact-content ul.social li {
    text-align: center;
    margin: 0 auto 1rem auto;
    display: block !important;
  }
  body.page-our-story section#content section#bottle-block {
    padding: 2rem 3rem;
  }
  body.page-our-story section#content section#bottle-block div.content-block {
    padding: 0;
  }
  body.page-our-story section#content section#bottle-block div.content-block p {
    width: 100%;
  }
  body.page-our-story section#content section#bottle-block img {
    display: none;
  }
  body.page-authenticity section#standards-block {
    padding: 2rem 3rem;
  }
  body.page-authenticity section#authentic-block {
    -ms-grid-columns: none;
        grid-template-columns: none;
    display: block;
  }
  body.page-authenticity section#authentic-block div.img {
    display: none;
  }
  body.page-authenticity section#authentic-block div.content {
    width: 100%;
  }
  body.page-faqs #nav-top {
    bottom: 70px;
  }
  body.page-faqs div.anchor {
    top: -1.5rem;
  }
  body.page-faqs section#faq aside.categories div.stick ul.box,
  body.page-faqs section#faq aside.categories div.stick div.box {
    width: 100%;
    float: none;
    margin: 0 0 2rem 0;
  }
  body.page-faqs section#faq aside.categories div.stick ul.box li a,
  body.page-faqs section#faq aside.categories div.stick div.box li a {
    text-align: center;
  }
  body.page-faqs section#faq div#faq-content div.block {
    margin-bottom: 2rem;
  }
  body.page-faqs section#faq div#faq-content div.block div.faq-box article.a p.a-foot {
    display: block;
    -ms-grid-columns: none;
        grid-template-columns: none;
  }
  body.page-faqs section#faq div#faq-content div.block div.faq-box article.a p.a-foot span {
    display: block;
    text-align: left;
    margin-bottom: 0.5rem;
  }
  body.info section#hero {
    max-height: 2000px;
  }
  body.info section#hero .d-grid {
    display: block;
    padding: 2rem 0 0 0;
  }
  body.info section#hero .d-grid h1.page-title {
    margin: 0 auto;
  }
  body.info section#hero .d-grid p.sub-title {
    margin: 0 auto;
  }
  body.info section#hero .d-grid .img img {
    margin: 0 auto;
  }

  body.page-healthcare-practitioners section#recommend,
  body.page-reseller section#recommend {
    padding-bottom: 2rem;
  }
  body.page-reseller section#join .content ul li {
    display: block;
    margin: 0 auto;
    width: 100%;
  }
  body.page-why-vitamin-d section#one ul li.box {
    width: 6.25rem;
    margin: 0 3%;
  }
  body.page-why-vitamin-d section#two {
    padding-bottom: 2rem;
  }
  body.page-why-vitamin-d section#three,
  body.page-why-vitamin-d section#five {
    display: block;
    -ms-grid-columns: none;
        grid-template-columns: none;
  }
  body.page-why-vitamin-d section#three div.img,
  body.page-why-vitamin-d section#five div.img {
    display: none;
  }
  body.page-why-vitamin-d section#three div.content,
  body.page-why-vitamin-d section#five div.content {
    width: 100%;
  }
  section#hero.basic {
    height: 100px;
    padding-left: 1rem;
    padding-right: 1rem;
  }
  section#basic {
    padding-top: 2rem;
  }
  body.page-products-all section#hero {
    height: 250px;
  }
  body.single section#contents div.bg-img {
    width: 100%;
    display: block;
    background-image: none !important;
    min-height: 0;
  }
  body.single section#contents div.bg-img div.contents {
    padding: 2rem 0;
  }
  body.single section#contents div.bg-img div.contents h3 {
    text-align: center;
    padding: 0 1rem;
    line-height: 1;
    margin-bottom: 0.5rem;
  }
  body.single section#contents div.bg-img div.contents .box {
    max-width: 100%;
    margin: 0;
  }
  body.single section#info-slider ul {
    display: block;
    -ms-grid-columns: none;
        grid-template-columns: none;
  }
  body.single section#info-slider ul li {
    width: 100%;
    display: block;
    font-size: 1.2rem;
  }
  body.single section#carousel ul li.tns-item div.content {
    width: 50%;
    min-width: 250px;
    display: block;
    margin: 0.5rem auto;
  }
  body.single section#carousel ul li.tns-item div.contents {
    padding: 0 1rem;
  }
  body.category #blog-nav nav#blog,
  body.author-single #blog-nav nav#blog,
  body.tag #blog-nav nav#blog {
    display: none;
  }
  body.category #blog-nav nav#blog-mobile,
  body.author-single #blog-nav nav#blog-mobile,
  body.tag #blog-nav nav#blog-mobile {
    display: block;
  }
  body.category .content section#content .d-grid,
  body.author-single .content section#content .d-grid,
  body.tag .content section#content .d-grid {
    -ms-grid-columns: (1fr)[1];
        grid-template-columns: repeat(1, 1fr);
  }
  .blog-single section#content {
    padding: 2rem 1rem;
  }
  .blog-single section#content .date-grid {
    display: block;
  }
  .blog-single section#content .date-grid #date {
    text-align: left;
    margin-bottom: 1.5rem;
  }
  .is-ajax-search-posts {
    display: block;
  }
  form.is-search-form {
    position: absolute;
  }
  #content.content-search article a div.content {
    display: block;
    text-align: center;
  }
  #content.content-search article a div.content .img,
  #content.content-search article a div.content .color {
    width: 150px;
    height: 150px;
    margin: 0 auto;
  }
  #content.content-search article a div.content h2.entry-title {
    width: 100%;
    text-align: center;
  }
  #search-bar {
    position: absolute;
  }
  #search-bar.expand {
    top: 65px;
  }
}

@media all and (max-width: 737px) {
  body.page-where-to-buy section div.box div.container ul li:nth-child(2n+2)::after {
    content: none;
  }
  body.page-where-to-buy section div.box div.container ul li:nth-child(2n+3)::after {
    content: '';
  }
  body.page-where-to-buy section div.box div.container ul li:last-of-type::after {
    content: none;
  }
  section#cta .d-grid {
    -ms-grid-columns: none;
        grid-template-columns: none;
    -webkit-column-gap: 0;
            column-gap: 0;
    display: block;
  }
  section#cta .d-grid .text p {
    text-align: center;
  }
}

@media all and (max-width: 560px) {
  body.page-home section#hero div.slide-two {
    height: 548px;
    background-size: 900px;
  }
  body.page-home section#hero div.slide-two .text-container figure {
    width: 390px;
    grid-template-columns: 95px 1fr;
  }
  body.page-home section#hero div.slide-two .text-container figure .line-one {
    font-size: 1.4rem;
    line-height: 1.5rem;
    max-width: 200px;
    margin: 0 auto;
  }
  body.page-home section#hero div.slide-two .text-container figure .line-one span {
    font-size: 2.5rem;
    line-height: 2.5rem;
  }

  body.lang-menu #lang-modal ul#lang-list li a {
    display: block;
  }
  body.lang-menu #lang-modal ul#lang-list li a span {
    font-size: 1.2rem;
    font-weight: 500;
  }
  body.lang-menu #lang-modal ul#lang-list li a div.flag {
    display: none;
  }
  body.page-contact-us section#contacts div.mid-container div.box {
    padding: 0.5rem;
  }
  section#additional div.box aside {
    -ms-grid-columns: none;
        grid-template-columns: none;
  }
  section#additional div.box aside div.img {
    display: none;
  }
  body.single section#product-hero {
    padding: 1rem;
  }
  body.single section#product-hero div.contain div.text h1.product-name {
    font-size: 2.5rem;
  }
  body.single section#contents .bg-img div.contents .box {
    padding: 2rem 1.5rem;
    border-radius: 0;
  }
  body.page-why-vitamin-d section#one {
    padding: 1rem;
  }
  body.page-why-vitamin-d section#one ul li.box {
    width: 70px;
  }
  body.page-why-vitamin-d section#three {
    padding-bottom: 2rem;
  }
  body.page-why-vitamin-d section#five {
    padding-bottom: 2rem;
  }
  body.page-why-vitamin-d section#six ul li {
    display: block;
  }
  body.page-why-vitamin-d section#six ul li::after {
    content: none !important;
  }
  body.page-why-vitamin-d section#references a {
    text-align: center;
  }
  body.page-why-vitamin-d section#references a span::before {
    font-size: 1.2rem;
  }
  body.page-why-vitamin-d section#references a span::after {
    font-size: 1rem;
  }
  body.page-why-vitamin-d section#references a::after {
    width: 100%;
    top: auto;
    bottom: -1rem;
  }
  body.page-why-vitamin-d section#references div.contents {
    margin-top: 1rem;
  }
  body.page-where-to-buy section div.box div.container ul li {
    display: block;
    width: 100%;
    max-width: 300px;
    margin: 0 auto;
  }
  body.page-where-to-buy section div.box div.container ul li::after {
    content: none !important;
  }
  body.page-other-brands section#brands div.box ul li {
    display: block;
    border: none;
    margin: 0 auto;
  }
}

@media all and (max-width: 460px) {
  body.page-home section#hero div.home-hero .hero-container div h1.hero-title {
    font-size: 2.5rem;
    line-height: 1;
  }
}

@media all and (max-width: 400px) {
  body.page-home section#hero div.slide-two {
    height: 477px;
    /* background-position: -540px bottom; */
  }
  body.page-home section#hero div.slide-two .text-container figure {
    width: 290px;
    grid-gap: 0 0.5rem;
    grid-template-columns: 65px 1fr;
  }
}

/*--------------------------------------------------------------
# Product Transition Animations
--------------------------------------------------------------*/
@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.fadeIn {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
}

@-webkit-keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

.fadeOut {
  -webkit-animation-name: fadeOut;
  animation-name: fadeOut;
}

/*--------------------------------------------------------------
# Transitions
--------------------------------------------------------------*/
nav.expanded-nav,
nav#site-navigation ul#menu-main-navigation li.expand a::after,
.btn,
.tns-controls button span::before,
ul#menu-main-navigation li a,
a.logo-box img,
div.logo-container a span,
ul.social a img,
#foot-nav nav ul li a,
nav#social-footer ul#social li a img,
p a,
a::after,
div.text a,
dd a,
#products-nav ul li a div.view-all,
#products-nav ul li a span,
ul#sizes li,
ul#info-nav li,
nav#mobile-nav,
.stick ul.box li a,
section#six ul li a,
section#references a span::after,
section#references div.contents ol li a,
section#brands div.box ul li a img
#nav-top span,
div.faq-box article.a a,
ul#social-net li,
.blog-landing section#content .d-grid .item,
input[type="search"].search-field,
#search-bar,
#search a.search-btn svg path {
  -webkit-transition: all 0.4s ease-out;
  transition: all 0.4s ease-out;
}

.item .thumb img {
  -webkit-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
}

div.grid-item {
  -webkit-transition: -webkit-box-shadow 0.3s ease-in-out;
  transition: -webkit-box-shadow 0.3s ease-in-out;
  transition: box-shadow 0.3s ease-in-out;
  transition: box-shadow 0.3s ease-in-out, -webkit-box-shadow 0.3s ease-in-out;
}

article.a,
section#references div.contents,
.shortcode-site-reviews-form {
  -webkit-transition: max-height 0.4s ease;
  transition: max-height 0.4s ease;
}

article.q {
  -webkit-transition: border-bottom 0.5s ease;
  transition: border-bottom 0.5s ease;
}

article.blog-box,
section#boxes li a img {
  -webkit-transition: -webkit-transform 0.4s ease;
  transition: -webkit-transform 0.4s ease;
  transition: transform 0.4s ease;
  transition: transform 0.4s ease, -webkit-transform 0.4s ease;
}

#blog-mobile .menu-blog-navigation-container {
  -webkit-transition: all 0.8s ease-out;
  transition: all 0.8s ease-out;
}
/*# sourceMappingURL=style.css.map */