/*!
Theme Name: Ddrops 2022 US CN
Theme URI: http://underscores.me/
Author: Nathan Adshead
Author URI: http://nateweb.ca
Description: Ddrops 2022 US CN
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 section#product-hero div.contain div.text figure#size-control ul#sizes li {
  color: #0080c6;
}

div.blue section#product-hero div.contain div.text figure#size-control ul#sizes li.tns-nav-active {
  border: 2px solid #0080c6;
}

div.blue section#product-hero div.contain div.text figure#size-control ul#sizes li:hover {
  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 section#product-hero div.contain div.text figure#size-control ul#sizes li {
  color: #d80b8d;
}

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

div.pink section#product-hero div.contain div.text 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 section#product-hero div.contain div.text figure#size-control ul#sizes li {
  color: #8ec63f;
}

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

div.green section#product-hero div.contain div.text 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 section#product-hero div.contain div.text figure#size-control ul#sizes li {
  color: #592a8a;
}

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

div.purple section#product-hero div.contain div.text 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 section#product-hero div.contain div.text figure#size-control ul#sizes li {
  color: #8bd3f5;
}

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

div.baby-blue section#product-hero div.contain div.text 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 section#product-hero div.contain div.text figure#size-control ul#sizes li {
  color: #002d73;
}

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

div.dark-blue section#product-hero div.contain div.text 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;
  z-index: 9;
}

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;
      grid-template-columns: 140px 1fr;
}

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

/*--------------------------------------------------------------
# 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)';
}

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

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

body.us-cn div#lang a::before {
  content: 'CN (CN)';
}

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

@media screen and (max-width:870px) {
  body.page-home section#hero div.home-hero .hero-container div h1.hero-title {

  }  
}

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-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.product-section {
  padding: 0;
}

body.page-home section.product-section h4 {
  text-align: center;
}

body.page-home section.product-section h4 span {
  font-size: 700;
  color: white;
}

body.page-home section.product-section h4.pro-logo {
  padding: 0.7rem 1rem;
}

body.page-home section.product-section h4.pro-logo img {
  margin: 0 auto;
  width: 100%;
  max-height: 55px;
}

body.page-home section.product-section h4.pro-logo:nth-of-type(2) img {
  max-width: 200px;
}

body.page-home section.product-section h4.pro-logo:nth-of-type(4) img {
  max-width: 180px;
}

body.page-home section.product-section .contents {
  padding: 2rem 0 3rem 0;
}

body.page-home section.product-section ul {
  padding-top: 1rem;
  text-align: center;
}

body.page-home section.product-section ul li {
  display: inline-block;
  width: 49%;
  max-width: 250px;
  padding: 0.5rem;
  vertical-align: top;
}

@media all and (max-width: 560px) {
  body.page-home section.product-section ul li {
    display: block;
    margin: 0 auto;
  }
}

body.page-home section.product-section ul li img {
  width: 100%;
}

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

#hero.probiotic h1.page-title,
#hero.probiotic p.sub-title {
  color: white;
}
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;

}
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.page-faqs #nav-top, body.info #nav-top {
    bottom: 4rem;
  }
  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;
  /* width: 100%; */
  /* max-width: 322px; */
  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;
}

ul.how-to-ill {
  list-style-type: none!important;
  margin: 0;
  padding: 0!important;
}
ul.how-to-ill li {
  display: grid;
  align-items: center;
  grid-template-columns: 180px auto;
  gap: 2rem;
}
ul.how-to-ill li img {
  width: 100%;
  padding: 1.5rem;
}
ul.how-to-ill p {
  margin: 0;
}

/*--------------------------------------------------------------
# FAQs & QR pages colours
--------------------------------------------------------------*/
#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; */
	background-color: #7e46b9!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; */
	background-color: #1d488b!important;
}
.products-qr-2000-iu #hero.dark-blue {
	padding-bottom: 4.5rem;
}

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

#hero.green {
/*   background-color: #8ec63f!important; */
	background-color: #b3e370!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;
}

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

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

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 .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 img {
  width: 100%;
}

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

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 a {
  display: inline-block;
  color: inherit;
  text-decoration: underline;
}

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 section#product-hero div.contain div.text figure#size-control {
  margin: 0 0 1.5rem 0;
}

body.single section#product-hero div.contain div.text figure#size-control span {
  font-weight: 700;
  display: block;
}

body.single section#product-hero div.contain div.text figure#size-control ul#sizes {
  display: block !important;
}

body.single section#product-hero div.contain div.text figure#size-control ul#sizes 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 section#product-hero div.contain div.text figure#size-control.disable {
  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 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: 300px;
  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);
}

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

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

/*----------------------------------------------------------------
# Language switch
-----------------------------------------*/
a.cli-privacy-readmore:before {
  content: "展开" !important;
}

.cli-collapsed a.cli-privacy-readmore:before {
  content: "收起" !important;
}

span.cli-necessary-caption:before {
    content: '始终启用';
    position: absolute;
    background-color: #f2f2f2;
    right: 0;
    width: 100%;
}

.cli-switch input:checked + .cli-slider:after {
    content: "启用" !important;
}

.cli-switch .cli-slider:after {
    content: "已禁用" !important;
}

.cli-tab-footer a#wt-cli-privacy-save-btn:before {
	content: "保存并接受" !important;
	position: absolute;
    background-color: #61a229;
    right: 0;
    width: 100%;
}

.cli-tab-footer a#wt-cli-privacy-save-btn:after {
	visibility: hidden;
}

/*--------------------------------------------------------------
# Responsive
--------------------------------------------------------------*/
@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;
  }
}

@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) {
  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.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: 870px) {
  body.page-home section#hero div.home-hero {
    height: auto;
  }
  
  body.page-home section#hero div.home-hero .hero-container {
    display: block;
  }

  body.page-home section#hero div.home-hero .hero-container div h1.hero-title {
    position: relative;
    margin: 0 auto;
    text-align: center;
    padding-top: 2rem;
  }

  body.page-home section#hero div.home-hero .hero-container div.bottle {
    position: relative;
    display: block;
    left: 0;
    right: 0;
  }
}

@media all and (max-width: 768px) {
  :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#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#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;
  }
  h1.hero-title {
    font-size: 2rem;
  }
  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;
  }
  /* 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;
  }

  ul.how-to-ill img {
    margin: 0 auto;
    max-width: 200px;
  }
  ul.how-to-ill li {
    display: block;
  }
}

@media all and (max-width: 737px) {
  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.home-hero .hero-container div h1.hero-title {
    color: white;
    font-size: 2.4rem;
  }
  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.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-home section#hero div.home-hero {
    background-image: none !important;
    background-color: #0080c6;
  }
}

/*--------------------------------------------------------------
# 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;
}