*, *:before, *:after {
  box-sizing: border-box;
}

html, body, div, span, object, iframe, figure, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, code, em, img, small, strike, strong, sub, sup, tt, b, u, i, ol, ul, li, fieldset, form, label, table, caption, tbody, tfoot, thead, tr, th, td, main, canvas, embed, footer, header, nav, section, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  text-size-adjust: none;
}

footer, header, nav, section, main {
  display: block;
}

body {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after, q:before, q:after {
  content: "";
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

@font-face {
  font-family: "Bulldog";
  src: url("fonts/Bulldog.eot");
  /* IE9 Compat Modes */
  src: url("fonts/Bulldog.eot?#iefix") format("embedded-opentype"), url("fonts/Bulldog.woff") format("woff"), url("fonts/Bulldog.ttf") format("truetype"), url("fonts/Bulldog.svg#Bulldog") format("svg");
  font-style: normal;
  font-weight: normal;
  text-rendering: optimizeLegibility;
}
@font-face {
  font-family: "Bulldog";
  src: url("fonts/Bulldog-Medium.eot");
  /* IE9 Compat Modes */
  src: url("fonts/Bulldog-Medium.eot?#iefix") format("embedded-opentype"), url("fonts/Bulldog-Medium.woff") format("woff"), url("fonts/Bulldog-Medium.ttf") format("truetype"), url("fonts/Bulldog-Medium.svg#Bulldog-Medium") format("svg");
  font-style: normal;
  font-weight: 500;
  text-rendering: optimizeLegibility;
}
@font-face {
  font-family: "Bulldog";
  src: url("fonts/Bulldog-Bold.eot");
  /* IE9 Compat Modes */
  src: url("fonts/Bulldog-Bold.eot?#iefix") format("embedded-opentype"), url("fonts/Bulldog-Bold.woff") format("woff"), url("fonts/Bulldog-Bold.ttf") format("truetype"), url("fonts/Bulldog-Bold.svg#Bulldog-Medium") format("svg");
  font-style: normal;
  font-weight: 700;
  text-rendering: optimizeLegibility;
}
@font-face {
  font-family: "Century Book";
  src: url("fonts/CenturyStd-Book.ttf") format("truetype");
  font-style: normal;
  font-weight: normal;
  text-rendering: optimizeLegibility;
}
@font-face {
  font-family: "Century";
  src: url("fonts/CenturyStd-Light.ttf") format("truetype");
  font-style: normal;
  font-weight: normal;
  text-rendering: optimizeLegibility;
}
@font-face {
  font-family: "Century";
  src: url("fonts/CenturyStd-Bold.ttf") format("truetype");
  font-style: normal;
  font-weight: bold;
  text-rendering: optimizeLegibility;
}
@font-face {
  font-family: "Century";
  src: url("fonts/CenturyStd-LightItalic.ttf") format("truetype");
  font-style: italic;
  font-weight: normal;
  text-rendering: optimizeLegibility;
}
footer {
  width: 100%;
  background-color: #20372c;
}

.footer {
  display: block;
  padding: 40px 0 20px;
}
.footer img {
  width: 150px;
  height: auto;
  margin-bottom: 20px;
}
.footer-row {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
@media screen and (max-width: 576px) {
  .footer-row {
    flex-direction: column;
  }
}
@media screen and (min-width: 576px) {
  .footer-col:last-child {
    text-align: right;
  }
}
.footer p, .footer a {
  color: #fff;
  text-decoration: none;
  font-weight: 500;
  font-size: 12px;
  line-height: 15px;
}
.footer .social {
  margin-top: 40px;
  margin-bottom: 20px;
}
.footer .social a {
  font-size: 20px;
  line-height: 20px;
  margin: 0 0 0 20px;
}
@media screen and (max-width: 576px) {
  .footer .social a {
    margin: 0 20px 0 0;
  }
}
.footer ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
.footer ul li {
  margin: 0;
  padding: 0;
  display: inline-block;
}
.footer ul li:before {
  content: none;
}
.footer-copy {
  font-weight: normal !important;
  font-size: 10px !important;
}
.footer-copy a {
  text-decoration: underline;
  font-weight: normal !important;
  font-size: 10px !important;
}

.hystmodal__opened {
  position: fixed;
  right: 0;
  left: 0;
  overflow: hidden;
}

.hystmodal__shadow {
  position: fixed;
  border: none;
  display: block;
  width: 100%;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 98;
  opacity: 0;
  transition: opacity 0.15s ease;
  background-color: black;
}

.hystmodal__shadow--show {
  pointer-events: auto;
  opacity: 0.6;
}

.hystmodal {
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  overflow: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  opacity: 1;
  pointer-events: none;
  display: flex;
  flex-flow: column nowrap;
  justify-content: flex-start;
  z-index: 999999999;
  visibility: hidden;
}
.hystmodal h2 {
  font-family: "Century";
  font-size: 40px;
  font-weight: 300;
  line-height: 40px;
  text-align: center;
  color: #33735B;
  margin-bottom: 0.75em;
}
@media screen and (max-width: 576px) {
  .hystmodal h2 {
    font-size: 32px;
    line-height: 34px;
  }
}
.hystmodal h3 {
  font-family: "Century";
  font-size: 32px;
  font-weight: 300;
  line-height: 32px;
  text-align: center;
  color: #fff;
  margin-bottom: 0.75em;
}
@media screen and (max-width: 576px) {
  .hystmodal h3 {
    font-size: 24px;
    line-height: 28px;
  }
}
.hystmodal p, .hystmodal li {
  color: #333333;
  max-width: none;
  text-align: center;
  margin-bottom: 0.75em;
}
.hystmodal ul {
  max-width: none;
}
.hystmodal ul li {
  font-family: Bulldog;
  font-size: 16px;
  font-weight: 400;
  line-height: 16px;
  text-align: center;
}

.hystmodal--active {
  opacity: 1;
}

.hystmodal--moved,
.hystmodal--active {
  pointer-events: auto;
  visibility: visible;
}

.hystmodal__wrap {
  flex-shrink: 0;
  flex-grow: 0;
  width: 100%;
  min-height: 100%;
  margin: auto;
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  justify-content: center;
}

.hystmodal__window {
  margin: 25px 0;
  box-sizing: border-box;
  flex-shrink: 0;
  flex-grow: 0;
  max-width: 540px;
  width: 100%;
  overflow: visible;
  transition: transform 0.2s ease 0s, opacity 0.2s ease 0s;
  transform: scale(0.9);
  opacity: 0;
  display: block;
  padding: 10px;
}

.hystmodal__content {
  background-color: #fff;
  margin: -140px 10px 0;
  overflow: hidden;
  border-radius: 10px;
}

.hystmodal__hero {
  display: block;
  width: 100%;
  height: auto;
  max-width: 380px;
  margin: -30px auto 0;
}
.hystmodal--active .hystmodal__window {
  transform: scale(1);
  opacity: 1;
}

.hystmodal__content-intro {
  padding: 130px 40px 30px;
}
@media screen and (max-width: 576px) {
  .hystmodal__content-intro {
    padding: 130px 30px 30px;
  }
}

.hystmodal__content-select-plan {
  background: #33735B url("images/modal-bg.jpg") no-repeat left top;
  background-size: 100% auto;
  padding: 30px 60px 30px;
}
@media screen and (max-width: 576px) {
  .hystmodal__content-select-plan {
    padding: 30px 20px 30px;
  }
}

.hystmodal__close {
  position: absolute;
  z-index: 10;
  top: 0;
  right: -40px;
  display: block;
  width: 30px;
  height: 30px;
  background-color: #000;
  background-position: center center;
  background-repeat: no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' stroke='%23fff' stroke-linecap='square' stroke-miterlimit='50' stroke-width='2' d='M22 2L2 22'/%3E%3Cpath fill='none' stroke='%23fff' stroke-linecap='square' stroke-miterlimit='50' stroke-width='2' d='M2 2l20 20'/%3E%3C/svg%3E");
  background-size: 100% 100%;
  border: none;
  font-size: 0;
  cursor: pointer;
  outline: none;
}

.hystmodal__close:focus {
  outline: 2px dotted #afb3b9;
  outline-offset: 2px;
}

.form-control {
  display: grid;
  grid-template-columns: 1em auto;
  gap: 1em;
  font-family: Century;
  font-size: 18px;
  font-weight: 400;
  line-height: 21.6px;
  background: #47816B;
  border-radius: 5px;
  padding: 8px;
  border: 2px solid #6C9A89;
  color: #fff;
  margin-bottom: 1em;
}
.form-control + p {
  margin-top: 3em;
}
@media screen and (max-width: 576px) {
  .form-control {
    font-size: 14px;
  }
}

input[type=radio] {
  appearance: none;
  background-color: #fff;
  margin: 0;
  font: inherit;
  color: currentColor;
  width: 1.15em;
  height: 1.15em;
  border: 0.15em solid #684F40;
  border-radius: 50%;
  transform: translateY(-0.08em);
  display: grid;
  place-content: center;
  margin-top: 0.2em;
}

input[type=radio]::before {
  content: "";
  width: 0.6em;
  height: 0.6em;
  border-radius: 50%;
  transform: scale(0);
  transition: 120ms transform ease-in-out;
  box-shadow: inset 1em 1em #684F40;
}

input[type=radio]:checked::before {
  transform: scale(0.5);
}

/*

input[type="radio"]:focus {
  outline: max(2px, 0.15em) solid currentColor;
  outline-offset: max(2px, 0.15em);
}*/
.woocommerce-page .site-main {
  width: 100%;
}
.woocommerce-page .container {
  max-width: 940px;
}
.woocommerce-page .header {
  display: none;
}
.woocommerce-page .is-medium .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-totals-wrapper, .woocommerce-page .is-mobile .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-totals-wrapper, .woocommerce-page .is-small .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-totals-wrapper {
  padding-left: 0;
  padding-right: 12px;
}

.sale-price {
  color: #FFE6A1;
}

.strike-through {
  position: relative;
}
.strike-through:after {
  background-color: #fff;
  position: absolute;
  content: "";
  height: 1px;
  overflow: hidden;
  left: 0;
  right: 0;
  bottom: 0.5em;
  width: 100%;
}

.wp-block-woocommerce-checkout-order-summary-block {
  line-height: 1.3;
}

.checkout-header {
  display: flex;
  padding: 0;
  align-items: center;
  justify-content: center;
  margin: 1em 0 2em;
}

.woocommerce-account .woocommerce-MyAccount-content {
  width: 100% !important;
  float: none !important;
}

.woocommerce-MyAccount-navigation {
  width: 100% !important;
  display: flex !important;
  float: none !important;
}
.woocommerce-MyAccount-navigation ul {
  color: #F7EDDA;
  max-width: none;
  margin-bottom: 3em;
}
.woocommerce-MyAccount-navigation ul li {
  display: inline-block;
  color: #F7EDDA;
  margin: 0 5px;
}
.woocommerce-MyAccount-navigation ul li:before {
  display: none;
}
.woocommerce-MyAccount-navigation ul li a {
  color: #F7EDDA;
}

.woocommerce-MyAccount-navigation-link--downloads, .woocommerce-MyAccount-navigation-link--edit-address {
  display: none !important;
}

.woocommerce-Address, .woocommerce-MyAccount-content, .woocommerce-form-login, .woocommerce-form-login {
  color: #F7EDDA;
  line-height: 1.3;
  margin-bottom: 5em;
}
.woocommerce-Address a, .woocommerce-MyAccount-content a, .woocommerce-form-login a, .woocommerce-form-login a {
  color: #F7EDDA;
}
.woocommerce-Address h2, .woocommerce-MyAccount-content h2, .woocommerce-form-login h2, .woocommerce-form-login h2 {
  font-size: 26px;
}
.woocommerce-Address .input-text, .woocommerce-MyAccount-content .input-text, .woocommerce-form-login .input-text, .woocommerce-form-login .input-text {
  background-color: #fff;
  border: 1px solid #aaa;
  border-radius: 4px;
  font-size: 1.2em;
  line-height: 1;
  padding: 8px 8px 8px 8px;
}

/* Ship / Collection toggle
   WooCommerce draws both states as a transparent box with a near-black outline,
   so on the dark green checkout the selected option is indistinguishable from
   the off one. Give each state its own green. Scoped under .woocommerce-checkout
   to outrank WooCommerce's own !important outline and colour, and matched on
   aria-checked as well as the class in case the modifier is renamed. */
.woocommerce-checkout .wc-block-checkout__shipping-method-option {
  background-color: #1E4534 !important;
  border: none !important;
  outline: 1px solid rgba(247, 237, 218, 0.4) !important;
  color: rgba(247, 237, 218, 0.75) !important;
  /* WooCommerce's hover sets colour to #333, which is unreadable here. */
}
.woocommerce-checkout .wc-block-checkout__shipping-method-option:hover, .woocommerce-checkout .wc-block-checkout__shipping-method-option:focus, .woocommerce-checkout .wc-block-checkout__shipping-method-option:hover:not(:disabled), .woocommerce-checkout .wc-block-checkout__shipping-method-option:focus:not(:disabled) {
  background-color: #265340 !important;
  outline: 1px solid #F7EDDA !important;
  color: #F7EDDA !important;
}
.woocommerce-checkout .wc-block-checkout__shipping-method-option.wc-block-checkout__shipping-method-option--selected, .woocommerce-checkout .wc-block-checkout__shipping-method-option[aria-checked=true] {
  background-color: #33735B !important;
  outline: 2px solid #F7EDDA !important;
  color: #F7EDDA !important;
}
.woocommerce-checkout .wc-block-checkout__shipping-method-option.wc-block-checkout__shipping-method-option--selected:hover, .woocommerce-checkout .wc-block-checkout__shipping-method-option.wc-block-checkout__shipping-method-option--selected:focus, .woocommerce-checkout .wc-block-checkout__shipping-method-option[aria-checked=true]:hover, .woocommerce-checkout .wc-block-checkout__shipping-method-option[aria-checked=true]:focus {
  background-color: #33735B !important;
  outline: 2px solid #F7EDDA !important;
  color: #F7EDDA !important;
}

.woocommerce-form__input-checkbox {
  vertical-align: center;
}

.woocommerce > h2 {
  text-align: center;
  font-size: 38px;
}

.woocommerce form.login, .woocommerce form.checkout_coupon, .woocommerce form.register {
  max-width: 640px;
  margin: 0 auto 4em !important;
  border: none !important;
}

.woocommerce-MyAccount-content {
  min-height: 60vh;
}

.woocommerce .woocommerce-customer-details address {
  line-height: 1.3 !important;
}

.wc-block-components-address-card address .wc-block-components-address-card__address-section {
  display: block;
  margin: 0 0 5px !important;
  line-height: 1.3;
}

.wc-block-components-order-summary__button-text {
  font-size: 1.25em !important;
}

.wc-block-components-totals-wrapper {
  padding-top: 0 !important;
}

.wc-block-components-checkout-step__content {
  color: #F7EDDA;
}

.wc-block-components-sidebar, .wc-block-checkout__shipping-option, .wc-block-checkout__terms {
  color: #F7EDDA;
}

.wc-block-components-radio-control--highlight-checked .wc-block-components-radio-control-accordion-option--checked-option-highlighted, .wc-block-components-radio-control--highlight-checked label.wc-block-components-radio-control__option--checked-option-highlighted {
  border-radius: 4px;
  box-shadow: inset 0 0 0 2px #F7EDDA !important;
  color: #F7EDDA;
  padding-bottom: 10px;
}

.wc-block-components-order-summary-item__image {
  display: none !important;
}

.wc-block-checkout__add-note {
  color: #F7EDDA;
}

.wc-block-components-address-card {
  color: #F7EDDA;
  padding: 0 !important;
}

.wc-block-components-order-summary-item__description {
  /* No left padding (the product image is hidden), but keep the name clear of
     the price on narrow screens. */
  padding: 0 12px 0 0 !important;
}

/*
.wc-block-components-panel__button-icon {
  display: none;
}*/
/*
#billing-fields {
  display: none;
}*/
.wc-block-checkout__terms.wc-block-checkout__terms--with-separator {
  border-top: 1px solid #F7EDDA !important;
  padding-top: 28px !important;
  font-family: Bulldog;
  margin-bottom: 28px !important;
}

.wc-block-components-form .wc-block-checkout__order-notes.wc-block-components-checkout-step {
  margin-bottom: 48px !important;
}

.woocommerce-order {
  margin-bottom: 5em;
  color: #F7EDDA;
}
.woocommerce-order .woocommerce table.shop_table th {
  padding: 0;
}
.woocommerce-order a {
  color: #F7EDDA;
}
.woocommerce-order h2 {
  font-size: 36px;
}
.woocommerce-order ul {
  max-width: none;
}
.woocommerce-order ul.order_details {
  margin: 0 0 3em;
  list-style: none;
}
.woocommerce-order ul.order_details li {
  color: #F7EDDA;
}
.woocommerce-order ul.order_details li:before {
  display: none;
}

/* Checkout text colour
   Only the sidebar, the step content and a few named blocks were given the
   cream text colour, so anything WooCommerce renders elsewhere in the checkout
   fell back to black on the dark green page - most visibly the second order
   summary it shows above the Place Order button. Set the colour once on the
   checkout block so every section, including future ones, inherits it. */
.woocommerce-checkout .wp-block-woocommerce-checkout {
  color: #F7EDDA;
}

/* Place Order button
   Left alone this takes WordPress's default button colours (#32373c grey with
   white 13px text). Use the gold the site keeps for calls to action on dark
   green, filled so the final step stands apart from the outlined fields, with
   the same type and corner radius as the site's other buttons. */
.woocommerce-checkout .wc-block-components-checkout-place-order-button {
  background-color: #FFE6A1 !important;
  color: #142E24 !important;
  border: none !important;
  border-radius: 4px !important;
  font-family: "Century", "Times New Roman";
  font-size: 24px;
  line-height: 24px;
  /* WooCommerce sizes the button in ems, which would make it 72px tall here. */
  min-height: 0 !important;
  padding: 16px 30px 12px !important;
  transition: background-color 0.15s ease;
  /* Replace WooCommerce's blue focus ring with one in the checkout's cream. */
}
.woocommerce-checkout .wc-block-components-checkout-place-order-button:hover:not(:disabled), .woocommerce-checkout .wc-block-components-checkout-place-order-button:focus:not(:disabled) {
  background-color: #F7EDDA !important;
  color: #142E24 !important;
}
.woocommerce-checkout .wc-block-components-checkout-place-order-button:focus, .woocommerce-checkout .wc-block-components-checkout-place-order-button:focus-visible {
  box-shadow: none !important;
  outline: 2px solid #F7EDDA !important;
  outline-offset: 3px;
}
@media screen and (max-width: 576px) {
  .woocommerce-checkout .wc-block-components-checkout-place-order-button {
    font-size: 22px;
  }
}

/* Checkout form controls
   WooCommerce ships these fields white (#fff on #2b2d2f text), which sits badly
   on the dark green checkout. Repaint them in the theme's deep green using the
   same cream as the rest of the checkout copy. */
.woocommerce-checkout {
  /* The dropdown list is painted by the OS, so it needs the colours spelled out
     separately from the closed select. */
  /* Floating labels sit inside the field, so they follow the field colour
     rather than the page. */
  /* CyberSource renders the card number and CSC as iframes. The frame itself is
     transparent, so the background comes from these containers; the text colour
     inside is set through the Flex Microform config in functions.php. */
}
.woocommerce-checkout input[type=text],
.woocommerce-checkout input[type=email],
.woocommerce-checkout input[type=tel],
.woocommerce-checkout input[type=number],
.woocommerce-checkout input[type=password],
.woocommerce-checkout input[type=url],
.woocommerce-checkout input[type=search],
.woocommerce-checkout select,
.woocommerce-checkout textarea {
  background-color: #1E4534 !important;
  border-color: rgba(247, 237, 218, 0.4) !important;
  color: #F7EDDA !important;
  /* Chrome paints autofilled fields with its own background, and the only way
     to cover it is an inset shadow. */
}
.woocommerce-checkout input[type=text]:focus,
.woocommerce-checkout input[type=email]:focus,
.woocommerce-checkout input[type=tel]:focus,
.woocommerce-checkout input[type=number]:focus,
.woocommerce-checkout input[type=password]:focus,
.woocommerce-checkout input[type=url]:focus,
.woocommerce-checkout input[type=search]:focus,
.woocommerce-checkout select:focus,
.woocommerce-checkout textarea:focus {
  background-color: #1E4534 !important;
  border-color: #F7EDDA !important;
  box-shadow: 0 0 0 1px #F7EDDA !important;
  color: #F7EDDA !important;
}
.woocommerce-checkout input[type=text]::placeholder,
.woocommerce-checkout input[type=email]::placeholder,
.woocommerce-checkout input[type=tel]::placeholder,
.woocommerce-checkout input[type=number]::placeholder,
.woocommerce-checkout input[type=password]::placeholder,
.woocommerce-checkout input[type=url]::placeholder,
.woocommerce-checkout input[type=search]::placeholder,
.woocommerce-checkout select::placeholder,
.woocommerce-checkout textarea::placeholder {
  color: rgba(247, 237, 218, 0.6);
  opacity: 1;
}
.woocommerce-checkout input[type=text]:-webkit-autofill, .woocommerce-checkout input[type=text]:-webkit-autofill:hover, .woocommerce-checkout input[type=text]:-webkit-autofill:focus,
.woocommerce-checkout input[type=email]:-webkit-autofill,
.woocommerce-checkout input[type=email]:-webkit-autofill:hover,
.woocommerce-checkout input[type=email]:-webkit-autofill:focus,
.woocommerce-checkout input[type=tel]:-webkit-autofill,
.woocommerce-checkout input[type=tel]:-webkit-autofill:hover,
.woocommerce-checkout input[type=tel]:-webkit-autofill:focus,
.woocommerce-checkout input[type=number]:-webkit-autofill,
.woocommerce-checkout input[type=number]:-webkit-autofill:hover,
.woocommerce-checkout input[type=number]:-webkit-autofill:focus,
.woocommerce-checkout input[type=password]:-webkit-autofill,
.woocommerce-checkout input[type=password]:-webkit-autofill:hover,
.woocommerce-checkout input[type=password]:-webkit-autofill:focus,
.woocommerce-checkout input[type=url]:-webkit-autofill,
.woocommerce-checkout input[type=url]:-webkit-autofill:hover,
.woocommerce-checkout input[type=url]:-webkit-autofill:focus,
.woocommerce-checkout input[type=search]:-webkit-autofill,
.woocommerce-checkout input[type=search]:-webkit-autofill:hover,
.woocommerce-checkout input[type=search]:-webkit-autofill:focus,
.woocommerce-checkout select:-webkit-autofill,
.woocommerce-checkout select:-webkit-autofill:hover,
.woocommerce-checkout select:-webkit-autofill:focus,
.woocommerce-checkout textarea:-webkit-autofill,
.woocommerce-checkout textarea:-webkit-autofill:hover,
.woocommerce-checkout textarea:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px #1E4534 inset !important;
  -webkit-text-fill-color: #F7EDDA !important;
  caret-color: #F7EDDA;
}
.woocommerce-checkout select option {
  background-color: #1E4534;
  color: #F7EDDA;
}
.woocommerce-checkout .wc-block-components-text-input label,
.woocommerce-checkout .wc-block-components-select label,
.woocommerce-checkout .wc-block-components-combobox label,
.woocommerce-checkout .wc-block-components-address-form label {
  color: rgba(247, 237, 218, 0.6) !important;
}
.woocommerce-checkout .wc-block-components-text-input.is-active label,
.woocommerce-checkout .wc-block-components-select.is-active label,
.woocommerce-checkout .wc-block-components-combobox.is-active label {
  color: #F7EDDA !important;
}
.woocommerce-checkout #wc-cybersource-credit-card-account-number-hosted,
.woocommerce-checkout #wc-cybersource-credit-card-csc-hosted {
  background-color: #1E4534 !important;
  border: 1px solid rgba(247, 237, 218, 0.4) !important;
  border-radius: 4px;
}

body {
  display: flex;
  align-items: center;
  flex-direction: column;
  background-color: #142E24;
  -webkit-font-smoothing: antialiased !important;
}

.header {
  position: fixed;
  top: 0;
  width: 100%;
  left: 0;
  right: 0;
  margin: 20px 0;
  opacity: 0;
  z-index: 9999;
}
.header .container {
  display: flex;
  justify-content: flex-end;
}

h1 {
  font-family: "Century", "Times New Roman";
  font-size: 174px;
  text-shadow: 0 0 27px #000;
  font-weight: normal;
  line-height: 1;
  margin-bottom: 0.075em;
  color: #F7EDDA;
}
@media screen and (max-width: 1300px) {
  h1 {
    font-size: 106px;
  }
}
@media screen and (max-width: 576px) {
  h1 {
    font-size: 70px;
  }
}

h2 {
  font-family: "Century", "Times New Roman";
  font-size: 72px;
  font-weight: normal;
  line-height: 1;
  margin-bottom: 0.5em;
  color: #F7EDDA;
}
@media screen and (max-width: 576px) {
  h2 {
    font-size: 36px;
  }
}

p {
  font-size: 14px;
  line-height: 22px;
  font-family: Bulldog, Arial, Helvetica, sans-serif;
  margin-bottom: 1em;
  color: #F7EDDA;
}

strong {
  font-family: Bulldog, Arial, Helvetica, sans-serif;
  font-weight: 500;
}

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

ul {
  max-width: 250px;
  margin: 0 auto;
}
ul li {
  font-size: 15px;
  line-height: 19px;
  font-family: Bulldog, Arial, Helvetica, sans-serif;
  margin-bottom: 5px;
}
ul li:before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  margin: 8px 5px 0 0;
  background-color: #000;
  vertical-align: top;
}

hr {
  border: none;
  height: 2px;
  width: 100%;
  color: transparent;
  background: transparent url("images/dashed.png") repeat-x left top;
  margin: 20px 0 25px;
}

.container {
  width: 100%;
  max-width: 1218px;
  margin: 0 auto;
  padding: 0 32px;
  box-sizing: border-box;
}
.container-sml {
  max-width: 860px;
}
.container.center {
  display: flex;
  align-items: center;
  flex-direction: column;
}

.logo-wrapper {
  width: 156px;
  height: 147px;
  min-height: 147px;
  overflow: hidden;
  margin-top: calc(50vh - 180px);
}
@media screen and (min-width: 1300px) {
  .logo-wrapper {
    margin-top: calc(50vh - 230px);
  }
}
@media screen and (max-width: 576px) {
  .logo-wrapper {
    width: 100px;
    height: 94px;
    min-height: 94px;
  }
}
.logo-wrapper img {
  width: 100%;
  height: auto;
}

.logo {
  text-align: center;
  position: fixed;
  z-index: 1;
  display: flex;
  align-items: center;
  height: 100vh;
  flex-direction: column;
  /*
  @media screen and (max-width: $large) {
    margin-top: 40px;
  }*/
}
.logo-copy {
  padding: 40px 20px 20px;
}
@media (max-width: 576px) {
  .logo-copy {
    max-width: 320px;
  }
}
@media screen and (max-width: 1300px) {
  .logo-copy {
    padding: 30px 20px 20px;
  }
}
.logo-copy p {
  font-family: "Century", "Times New Roman";
  font-size: 29px;
  line-height: 38px;
  margin-bottom: 1em;
  color: #F7EDDA;
}
@media (max-width: 1300px) {
  .logo-copy p {
    font-size: 18px;
    line-height: 24px;
  }
}
@media (max-width: 576px) {
  .logo-copy p {
    font-size: 16px;
    line-height: 22px;
  }
}

.hero {
  height: 130vh;
  min-height: 940px;
  width: 100%;
  margin: 0 auto;
  position: relative;
}
.hero-image {
  width: 100%;
  height: 110vh;
  position: relative;
  background: transparent url("images/wine-club-hero.jpg") no-repeat center top;
  background-size: auto 100%;
  margin: 0 auto;
}

.about-wrapper {
  position: relative;
  height: 170vh;
  margin-bottom: 80px;
  width: 100%;
}
.about-wrapper:after {
  position: absolute;
  content: "";
  width: 100%;
  height: 180px;
  left: 0;
  top: 0;
  right: 0;
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#142e24+0,142e24+100&1+0,0+100 */
  background: linear-gradient(to bottom, #142e24 0%, rgba(20, 46, 36, 0) 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}

.about-copy-wrapper {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  display: flex;
}
.about-copy-wrapper .logo-wrapper {
  margin-top: 100px;
}
.about-copy-wrapper p {
  max-width: 1020px;
  text-align: center;
  font-family: "Century", "Times New Roman";
  font-size: 46px;
  font-weight: 300;
  line-height: 54px;
  margin: 60px auto 0;
  color: #F7EDDA;
}
@media screen and (max-width: 1300px) {
  .about-copy-wrapper p {
    font-size: 30px;
    line-height: 38px;
    margin: 40px auto 0;
    max-width: 740px;
  }
}
@media screen and (max-width: 860px) {
  .about-copy-wrapper p {
    font-size: 20px;
    line-height: 28px;
  }
}

.about {
  height: 100vh;
  /*max-height: 832px;*/
  display: flex;
  align-items: center;
  justify-content: center;
  position: sticky;
  flex-direction: column;
  top: 0;
  width: 100%;
  overflow: hidden;
}

.about-border-content {
  margin: 0 -30%;
  width: 120%;
  height: 100vh;
  display: flex;
  align-items: center;
  flex-direction: column;
  background: transparent url("images/about-bg.jpg") no-repeat center center;
  background-size: cover;
  border-radius: 250px;
  overflow: hidden;
  position: relative;
}
@media screen and (max-width: 1300px) {
  .about-border-content {
    border-radius: 150px;
  }
}
@media (max-width: 576px) {
  .about-border-content {
    border-radius: 60px;
  }
}
.about-border-content .logo-wrapper {
  margin-top: 80px;
}
.about-border-content .bg {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  bottom: 0;
  right: 0;
  top: 0;
  left: 0;
}

.about-border-inner-content {
  position: relative;
  width: 100%;
  max-width: 100vw;
  height: 100vh;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  flex-direction: column;
}
.about-border-inner-content .container {
  z-index: 2;
}
.about-border-inner-content .simone {
  position: absolute;
  content: "";
  width: 50%;
  background: transparent url("images/wine-tasting.png?v=1") no-repeat left top;
  background-size: 100% auto;
  bottom: 0;
  top: 0;
  right: 0;
}
@media screen and (max-width: 860px) {
  .about-border-inner-content .simone {
    width: 70%;
  }
}
@media screen and (max-width: 576px) {
  .about-border-inner-content .simone {
    top: auto;
    left: 0;
    width: 100%;
    height: 250px;
  }
}

.members {
  width: 100%;
  display: flex;
  align-items: center;
  padding-bottom: 80px;
  flex-direction: column;
  background-color: #33735B;
  position: relative;
}
.members:before {
  position: absolute;
  content: "";
  height: 200px;
  width: 100%;
  top: 0;
  left: 0;
  right: 0;
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#142e24+0,33735b+100 */
  background: linear-gradient(to bottom, #142e24 0%, #33735b 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  z-index: 0;
}

.members-intro {
  margin-bottom: 60px;
  z-index: 1;
}
.members-intro p {
  font-family: "Century", "Times New Roman";
  font-weight: normal;
  font-size: 20px;
  line-height: 28px;
}
@media screen and (max-width: 576px) {
  .members-intro p {
    font-size: 16px;
    line-height: 22px;
  }
}

.card-img-wrapper {
  z-index: 1;
  height: 274px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 80px 0 40px;
}
@media screen and (max-width: 576px) {
  .card-img-wrapper {
    height: 174px;
  }
}

.card-img {
  width: 487px;
  height: auto;
}
@media screen and (max-width: 576px) {
  .card-img {
    width: 270px;
  }
}

.options {
  display: flex;
  flex-direction: row;
  gap: 26px;
}
@media screen and (max-width: 860px) {
  .options {
    flex-direction: column;
  }
}
.options p {
  font-family: Bulldog;
  color: #333;
  font-size: 14px;
  font-weight: 400;
  line-height: 15px;
}
.options ul li {
  font-family: Bulldog;
  color: #333;
}
.options .option {
  border: 5px solid #fff;
  width: 33.33333%;
  border-radius: 20px;
  text-align: center;
  background-color: #fff;
  overflow: hidden;
}
@media screen and (max-width: 860px) {
  .options .option {
    width: auto;
  }
}
.options .option-header {
  font-family: "Century", "Times New Roman";
  height: 142px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #33735b url("images/bronze.png") no-repeat center center;
  background-size: cover;
  color: #fff;
  font-family: Bulldog, "Times New Roman";
  font-size: 32px;
  font-weight: 400;
  line-height: 1;
  text-align: center;
}
.options .option-header.silver {
  background-image: url("images/silver.png");
}
.options .option-header.gold {
  background-image: url("images/gold.png");
}
.options .option-content {
  padding: 20px 30px 10px;
}
.options .option-content--price {
  font-family: "Century", "Times New Roman";
  color: #33735b;
  font-size: 40px;
  line-height: 40px;
  margin-bottom: 0;
}
.options .option-content--sml {
  font-family: Bulldog;
  font-size: 13px;
  font-weight: 400;
  line-height: 20.8px;
  letter-spacing: 0.04em;
  text-align: center;
}

.btn {
  vertical-align: center;
  font-family: "Century";
  color: #fff;
  font-size: 24px;
  line-height: 24px;
  border-radius: 4px;
  background-color: #684f40;
  display: inline-block;
  padding: 13px 30px;
  text-decoration: none;
  vertical-align: center;
}
@media screen and (max-width: 576px) {
  .btn {
    padding: 17px 30px 12px;
  }
}

.btn-alt {
  vertical-align: center;
  border: 1px solid #FFE6A1;
  font-family: "Century";
  color: #FFE6A1;
  font-size: 24px;
  line-height: 24px;
  border-radius: 4px;
  display: inline-block;
  padding: 13px 30px;
  text-decoration: none;
  /*
  @media screen and (max-width: $small) {
    font-size: 15px;
    line-height: 15px;
    padding: 9px 10px 7px;
  }*/
}
@media screen and (max-width: 576px) {
  .btn-alt {
    padding: 17px 30px 12px;
  }
}
@media screen and (max-width: 576px) {
  .header .btn-alt {
    font-size: 15px;
    line-height: 15px;
    padding: 10px 10px 6px;
  }
}

.tiers {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 26px;
}
@media screen and (max-width: 1100px) {
  .tiers {
    flex-direction: column;
    align-items: center;
  }
}
@media screen and (max-width: 576px) {
  .tiers {
    margin: 0 -12px;
  }
}

.tier {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  border: 5px solid #fff;
  border-radius: 20px;
  background-color: #fff;
  overflow: hidden;
  text-align: center;
}
@media screen and (max-width: 1100px) {
  .tier {
    flex: none;
    width: 100%;
    max-width: 520px;
  }
}

.tier-header {
  height: 142px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #33735b url("images/bronze.png") no-repeat center center;
  background-size: cover;
  color: #fff;
  font-family: Bulldog, "Times New Roman";
  font-size: 32px;
  font-weight: 400;
  line-height: 1;
}
.tier--silver .tier-header {
  background-image: url("images/silver.png");
}
.tier--gold .tier-header {
  background-image: url("images/gold.png");
}

.tier-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 24px 22px 22px;
}
.tier-content hr {
  margin: 14px 0 22px;
}

.tier-tagline {
  font-family: Bulldog, Arial, Helvetica, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #333;
  margin-bottom: 12px;
}

.tier-description {
  font-family: "Century", "Times New Roman";
  font-style: italic;
  font-size: 18px;
  line-height: 25px;
  color: #333;
  max-width: 300px;
  margin: 0 auto 16px;
}
@media screen and (min-width: 1101px) {
  .tier-description {
    min-height: 75px;
  }
}

.tier-plans {
  max-width: none;
  margin: 0;
  text-align: left;
}

.tier-plan {
  display: grid;
  grid-template-columns: 82px 1fr auto;
  align-items: center;
  column-gap: 12px;
  min-height: 60px;
  margin: 0;
  padding: 6px 0;
}
.tier-plan:before {
  display: none;
}
.tier-plan__term {
  display: flex;
  flex-direction: column;
}
.tier-plan__months {
  font-family: Bulldog, Arial, Helvetica, sans-serif;
  font-size: 12px;
  font-weight: 500;
  line-height: 17px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #333;
}
.tier-plan__bottles {
  font-family: Bulldog, Arial, Helvetica, sans-serif;
  font-size: 13px;
  line-height: 18px;
  color: #684f40;
}
.tier-plan__price {
  font-family: "Century", "Times New Roman";
  font-size: 28px;
  line-height: 1;
  color: #33735b;
  white-space: nowrap;
  border-left: 1px solid #d5d0c6;
  padding: 10px 0 8px 14px;
}
@media screen and (min-width: 1101px) and (max-width: 1160px) {
  .tier-plan__price {
    font-size: 24px;
  }
}
@media screen and (max-width: 576px) {
  .tier-plan__price {
    font-size: 24px;
  }
}
.tier-plan__save {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 54px;
  padding: 8px 6px 6px;
  background-color: #33735b;
  color: #F7EDDA;
  font-family: Bulldog, Arial, Helvetica, sans-serif;
  font-size: 11px;
  font-weight: 500;
  line-height: 15px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: center;
}
.tier-plan__save b {
  font-size: 13px;
  letter-spacing: 0.08em;
}
@media screen and (max-width: 370px) {
  .tier-plan {
    grid-template-columns: 82px 1fr;
    row-gap: 4px;
  }
  .tier-plan__term {
    grid-row: 1/span 2;
  }
  .tier-plan__price {
    grid-column: 2;
    padding: 4px 0 2px 14px;
  }
  .tier-plan__save {
    grid-column: 2;
    justify-self: start;
    flex-direction: row;
    gap: 0.4em;
    min-width: 0;
    margin-left: 14px;
    padding: 4px 8px 2px;
  }
  .tier-plan__save b {
    font-size: 11px;
    letter-spacing: 0.14em;
  }
}

.tier-benefits {
  max-width: 300px;
  margin: 0 auto 22px;
  text-align: left;
}
.tier-benefits li {
  position: relative;
  padding-left: 14px;
  margin-bottom: 9px;
  font-family: Bulldog, Arial, Helvetica, sans-serif;
  font-size: 15px;
  line-height: 20px;
  color: #333;
}
.tier-benefits li:before {
  position: absolute;
  left: 0;
  top: 8px;
  margin: 0;
}
@media screen and (max-width: 1100px) {
  .tier-benefits {
    max-width: 380px;
  }
}

.tier-action {
  margin: auto 0 0;
}
.tier-action .btn {
  display: block;
  text-align: center;
}

.hystmodal ul.tier-modal-benefits li {
  line-height: 21px;
  margin-bottom: 0.6em;
}