/* 4SITE BASE SASS BREAKPOINT SLICER */
/* 4SITE BASE NORMALIZE AND SANITIZE */
/* Document
 * ========================================================================== */
/**
 * Add border box sizing in all browsers (opinionated).
 */
*,
::before,
::after {
  box-sizing: border-box;
}

/**
 * 1. Add text decoration inheritance in all browsers (opinionated).
 * 2. Add vertical alignment inheritance in all browsers (opinionated).
 */
::before,
::after {
  text-decoration: inherit;
  /* 1 */
  vertical-align: inherit;
  /* 2 */
}

/**
 * 1. Use the default cursor in all browsers (opinionated).
 * 2. Change the line height in all browsers (opinionated).
 * 3. Use a 4-space tab width in all browsers (opinionated).
 * 4. Remove the grey highlight on links in iOS (opinionated).
 * 5. Prevent adjustments of font size after orientation changes in
 *    IE on Windows Phone and in iOS.
 * 6. Breaks words to prevent overflow in all browsers (opinionated).
 */
html {
  cursor: default;
  /* 1 */
  line-height: 1.5;
  /* 2 */
  -moz-tab-size: 4;
  /* 3 */
  -o-tab-size: 4;
     tab-size: 4;
  /* 3 */
  -webkit-tap-highlight-color: transparent;
  -ms-text-size-adjust: 100%;
  /* 5 */
  -webkit-text-size-adjust: 100%;
  /* 5 */
  word-break: break-word;
  /* 6 */
}

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

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

/* Grouping content
 * ========================================================================== */
/**
 * Remove the margin on nested lists in Chrome, Edge, IE, and Safari.
 */
dl dl,
dl ol,
dl ul,
ol dl,
ul dl {
  margin: 0;
}

/**
 * Remove the margin on nested lists in Edge 18- and IE.
 */
ol ol,
ol ul,
ul ol,
ul ul {
  margin: 0;
}

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

/**
 * Add the correct display in IE.
 */
main {
  display: block;
}

/**
 * Remove the list style on navigation lists in all browsers (opinionated).
 */
nav ol,
nav ul {
  list-style: none;
  padding: 0;
}

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

/**
 * Add the correct text decoration in Edge 18-, IE, and Safari.
 */
abbr[title] {
  text-decoration: underline;
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}

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

/* Embedded content
 * ========================================================================== */
/*
 * Change the alignment on media elements in all browsers (opinionated).
 */
audio,
canvas,
iframe,
img,
svg,
video {
  vertical-align: middle;
}

/**
 * Add the correct display in IE 9-.
 */
audio,
video {
  display: inline-block;
}

/**
 * Add the correct display in iOS 4-7.
 */
audio:not([controls]) {
  display: none;
  height: 0;
}

/**
 * Remove the border on iframes in all browsers (opinionated).
 */
iframe {
  border-style: none;
}

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

/**
 * Change the fill color to match the text color in all browsers (opinionated).
 */
svg:not([fill]) {
  fill: currentColor;
}

/**
 * Hide the overflow in IE.
 */
svg:not(:root) {
  overflow: hidden;
}

/* Tabular data
 * ========================================================================== */
/**
 * Collapse border spacing in all browsers (opinionated).
 */
table {
  border-collapse: collapse;
}

/* Forms
 * ========================================================================== */
/**
 * Remove the margin on controls in Safari.
 */
button,
input,
select {
  margin: 0;
}

/**
 * 1. Show the overflow in IE.
 * 2. Remove the inheritance of text transform in Edge 18-, Firefox, and IE.
 */
button {
  overflow: visible;
  /* 1 */
  text-transform: none;
  /* 2 */
}

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

/**
 * 1. Change the inconsistent appearance in all browsers (opinionated).
 * 2. Correct the padding in Firefox.
 */
fieldset {
  border: 1px solid #a0a0a0;
  /* 1 */
  padding: 0.35em 0.75em 0.625em;
  /* 2 */
}

/**
 * Show the overflow in Edge 18- and IE.
 */
input {
  overflow: visible;
}

/**
 * 1. Correct the text wrapping in Edge 18- and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 */
legend {
  color: inherit;
  /* 2 */
  display: table;
  /* 1 */
  max-width: 100%;
  /* 1 */
  white-space: normal;
  /* 1 */
}

/**
 * 1. Add the correct display in Edge 18- and IE.
 * 2. Add the correct vertical alignment in Chrome, Edge, and Firefox.
 */
progress {
  display: inline-block;
  /* 1 */
  vertical-align: baseline;
  /* 2 */
}

/**
 * Remove the inheritance of text transform in Firefox.
 */
select {
  text-transform: none;
}

/**
 * 1. Remove the margin in Firefox and Safari.
 * 2. Remove the default vertical scrollbar in IE.
 * 3. Change the resize direction in all browsers (opinionated).
 */
textarea {
  margin: 0;
  /* 1 */
  overflow: auto;
  /* 2 */
  resize: vertical;
  /* 3 */
}

/**
 * Remove the padding in IE 10-.
 */
[type="checkbox"],
[type="radio"] {
  padding: 0;
}

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

/**
 * Correct the cursor style of increment and decrement buttons in Safari.
 */
::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/**
 * Correct the text style of placeholders in Chrome, Edge, and Safari.
 */
::-webkit-input-placeholder {
  color: inherit;
  opacity: 0.54;
}

/**
 * Remove the inner padding in Chrome, Edge, and Safari on macOS.
 */
::-webkit-search-decoration {
  -webkit-appearance: none;
}

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

/**
 * Remove the inner border and padding of focus outlines in Firefox.
 */
::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus outline styles unset by the previous rule in Firefox.
 */
:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Remove the additional :invalid styles in Firefox.
 */
:-moz-ui-invalid {
  box-shadow: none;
}

/* Interactive
 * ========================================================================== */
/*
 * Add the correct display in Edge 18- and IE.
 */
details {
  display: block;
}

/*
 * Add the correct styles in Edge 18-, IE, and Safari.
 */
dialog {
  background-color: white;
  border: solid;
  color: black;
  display: block;
  height: -moz-fit-content;
  height: -webkit-fit-content;
  height: fit-content;
  left: 0;
  margin: auto;
  padding: 1em;
  position: absolute;
  right: 0;
  width: -moz-fit-content;
  width: -webkit-fit-content;
  width: fit-content;
}

dialog:not([open]) {
  display: none;
}

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

/* Scripting
 * ========================================================================== */
/**
 * Add the correct display in IE 9-.
 */
canvas {
  display: inline-block;
}

/**
 * Add the correct display in IE.
 */
template {
  display: none;
}

/* User interaction
 * ========================================================================== */
/*
 * 1. Remove the tapping delay in IE 10.
 * 2. Remove the tapping delay on clickable elements
      in all browsers (opinionated).
 */
a,
area,
button,
input,
label,
select,
summary,
textarea,
[tabindex] {
  /* 1 */
  touch-action: manipulation;
  /* 2 */
}

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

/* Accessibility
 * ========================================================================== */
/**
 * Change the cursor on busy elements in all browsers (opinionated).
 */
[aria-busy="true"] {
  cursor: progress;
}

/*
 * Change the cursor on control elements in all browsers (opinionated).
 */
[aria-controls] {
  cursor: pointer;
}

/*
 * Change the cursor on disabled, not-editable, or otherwise
 * inoperable elements in all browsers (opinionated).
 */
[aria-disabled="true"],
[disabled] {
  cursor: not-allowed;
}

/*
 * Change the display on visually hidden accessible elements
 * in all browsers (opinionated).
 */
[aria-hidden="false"][hidden] {
  display: initial;
}

[aria-hidden="false"][hidden]:not(:focus) {
  clip: rect(0, 0, 0, 0);
  position: absolute;
}

/* CLIENT VARIABLES */
/* @TODO Look into replicating "Teach a System of Space Visually" as a Development page that shows all styling decisions for the brand
 * https://medium.com/eightshapes-llc/space-in-design-systems-188bcbae0d62#.fwng4aef7
 */
/* 4SITE BASE STYLING */
/************************************
* Browser Form Autofill
* REF: https://medium.com/@brunn/detecting-autofilled-fields-in-javascript-aed598d25da7
***********************************/
/* There is a browser bug that causes small text to be shown during the process of autofilling, no workaround at the moment */
/* https://stackoverflow.com/questions/57242841/input-text-very-small-when-hovering-on-autofill-suggestion */
/* https://bugs.chromium.org/p/chromium/issues/detail?id=953689#c24 */
/* Screencast: https://d.pr/v/2xecBA */
@-webkit-keyframes onAutoFillStart {
  from {
    /**/
  }
  to {
    /**/
  }
}

@keyframes onAutoFillStart {
  from {
    /**/
  }
  to {
    /**/
  }
}

@-webkit-keyframes onAutoFillCancel {
  from {
    /**/
  }
  to {
    /**/
  }
}

@keyframes onAutoFillCancel {
  from {
    /**/
  }
  to {
    /**/
  }
}

input:-webkit-autofill {
  /* Expose a hook for JavaScript when autofill is shown */
  /* JavaScript can capture 'animationstart' events */
  -webkit-animation-name: onAutoFillStart;
  animation-name: onAutoFillStart;
  /* Make the background color transition really slowly */
  transition: background-color 50000s ease-in-out 0s;
}

input:not(:-webkit-autofill) {
  /* Expose a hook for JS onAutoFillCancel */
  /* JavaScript can capture 'animationstart' events */
  -webkit-animation-name: onAutoFillCancel;
  animation-name: onAutoFillCancel;
}

.is-autofilled,
.is-autofilled label {
  transition: none !important;
}

/* @TODO Design buttons with style (Primary, Secondary, Text Only, Outine)
 * See #3 https://medium.com/eightshapes-llc/component-examples-9c4b3bb3b308
 */
/* Buttons */
button {
  display: block;
  margin: 0 0 1rem 0;
  font-family: inherit;
  padding: 0.85rem 1rem;
  -webkit-appearance: none;
  border: 1px solid transparent;
  border-radius: 0px;
  transition: background-color 0.25s ease-out, color 0.25s ease-out;
  font-size: 1rem;
  text-align: center;
  cursor: pointer;
  background-color: #000000;
  color: #ffffff;
}

.en__submit button {
  margin-top: 2rem;
  background-color: #f1700b;
  border-color: #f1700b;
  color: #ffffff;
  border-radius: 0px;
  display: block;
  font-size: calc(0.05552em * 24);
  font-weight: 900;
  line-height: 1;
  padding: 18px 0;
}

.en__submit,
.en__submit button {
  width: 100%;
}

.en__submit button:hover,
.en__submit button:focus,
button.cta.primary:hover,
button.cta.primary:focus {
  background-color: #f1700b;
}

.next-step .en__submit button {
  width: initial;
  margin-left: auto;
}

button:hover,
button:focus {
  background-color: #f1700b;
}

button[disabled],
button[disabled]:hover,
button[disabled]:focus {
  background-color: #949494;
  color: #ffffff;
  content: "Processing...";
}

button[disabled] {
  opacity: 0.25;
  cursor: not-allowed;
}

/* EN sets width to 100%, without setting max-width it overflows offscreen */
.en__component--column.en__component--advcolumn,
.en__component--row--1 .en__component--column,
.en__component--row--2 .en__component--column {
  max-width: 100vw;
}

/* Reset minimum and default width */
.en__component--column {
  min-width: auto !important;
  width: auto !important;
}

/* Fix for flexbox sub-pixel rounding causing a 1px jitter in Chrome. */
/* And because EN inserts a div at the end of rows in the page builder, we needed to use a more permiscuse scope. */
/* This fix has NOT been tested for regressions in other browsers */
/* e.g https://d.pr/i/CRYKHa */
body:not(#en__pagebuilder) .en__component--column:last-of-type,
#en__pagebuilder .en__component--column {
  position: relative;
  right: -0.15px;
}

/************************************
* Error Messages
***********************************/
/* Page Level Errors */
.en__errorHeader {
  margin-left: -1.875rem;
  margin-right: -1.875rem;
  padding: 0.5rem 2rem;
  color: #e74b3c;
  font-weight: 700;
  text-align: center;
  background-color: #f4ddda;
}

.en__errorList > .en__error {
  margin-left: -1.875rem;
  margin-right: -1.875rem;
  padding: 0.5rem 2rem;
  list-style: none;
  color: #e74b3c;
  text-align: center;
  background-color: #f4ddda;
}

.en__errorList > .en__error:last-child {
  border-bottom: 5px solid #e74b3c;
}

/* Field Level Inline Errors */
/* Pick up the normal spacing on the error element to contunue form pacing continues as expected when in an error state */
.en__component .en__field.en__field--select.en__field--validationFailed,
.en__component .en__field.en__field--radio.en__field--validationFailed,
.en__component .en__field.en__field--checkbox.en__field--validationFailed,
.en__component .en__field.en__field--splittext.en__field--validationFailed,
.en__component .en__field.en__field--tripletext.en__field--validationFailed,
.en__component .en__field.en__field--splitselect.en__field--validationFailed,
.en__component .en__field.en__field--tripleselect.en__field--validationFailed {
  margin-bottom: 1rem;
}

.en__component .en__field__error {
  padding: 0.25rem 0.5rem 0 0;
  color: #e74b3c;
  font-size: 0.75rem;
  order: 3;
}

/* TODO Not working anymore since we removed our corresponding JS */
/* When EN's field validator flags an error it jumps the user to the first error on thepage. Our custom error JS executes after EN's and sets a body level class that we can reorder the field presentation on. If we don't wait to re-order the fields, the page will jump to the error which appears below the input resulting in the user having to scroll up to make the change. This is something that should be fixed on EN's end and how they handle errors, but until then we need this work around */
/* Code dependent on "oc-en-error-helpers.js" which must execute after EN's "pagedata.js" */
body.error-jump-assist .en__component .en__field__error {
  order: 1;
}

.en__field--text.en__field--validationFailed input,
.en__field--email.en__field--validationFailed input,
.en__field--telephone.en__field--validationFailed input,
.en__field--number.en__field--validationFailed input,
.en__field--textarea.en__field--validationFailed textarea,
.en__field--select.en__field--validationFailed select {
  border-color: #e74b3c;
  background-color: #fef6f5;
}

.en__component
.en__field.en__field--select.en__field--withOther.en__field--validationFailed
.en__field__element,
.en__component
.en__field.en__field--radio.en__field--validationFailed
.en__field__element,
.en__component
.en__field.en__field--checkbox.en__field--validationFailed
.en__field__element,
.en__component
.en__field.en__field--splittext.en__field--validationFailed
.en__field__element,
.en__component
.en__field.en__field--tripletext.en__field--validationFailed
.en__field__element,
.en__component
.en__field.en__field--splitselect.en__field--validationFailed
.en__field__element,
.en__component
.en__field.en__field--tripleselect.en__field--validationFailed
.en__field__element {
  border: 1px solid #e74b3c;
  background-color: #fef6f5;
  padding: 0.5rem 0.5rem 0rem 0.5rem;
  border-radius: 0px;
}

.en__field--text.en__field--validationFailed .en__field__error,
.en__field--email.en__field--validationFailed .en__field__error,
.en__field--telephone.en__field--validationFailed .en__field__error,
.en__field--number.en__field--validationFailed .en__field__error,
.en__field--textarea.en__field--validationFailed .en__field__error,
.en__field--select.en__field--validationFailed .en__field__error,
.en__component
.en__field.en__field--select.en__field--withOther.en__field--validationFailed
.en__field__error,
.en__component
.en__field.en__field--radio.en__field--validationFailed
.en__field__error,
.en__component
.en__field.en__field--checkbox.en__field--validationFailed
.en__field__error,
.en__component
.en__field.en__field--splittext.en__field--validationFailed
.en__field__error,
.en__component
.en__field.en__field--tripletext.en__field--validationFailed
.en__field__error,
.en__component
.en__field.en__field--splitselect.en__field--validationFailed
.en__field__error,
.en__component
.en__field.en__field--tripleselect.en__field--validationFailed
.en__field__error {
  border-top-right-radius: 0px;
  border-top-left-radius: 0px;
}

.en__field--radio.en__field--validationFailed
.en__field--checkbox.en__field--validationFailed {
  border-color: #e74b3c;
}

.en__field--validationFailed.has-value input,
.en__field--validationFailed.has-value textarea,
.en__field--select.en__field--validationFailed.has-value select {
  border-color: #949494;
  background-color: initial;
}

div:not(.manual-form-layout) .en__field--donationAmt.en__field--withOther.en__field--validationFailed
.en__field__element--radio {
  border-radius: 0.3rem !important;
  margin-bottom: 0.5rem;
}

div:not(.manual-form-layout) .en__field--donationAmt.en__field--withOther.en__field--validationFailed
.en__field__error {
  border-radius: 0.3rem !important;
}

.en__field__item {
  padding: initial;
}

.en__field__item,
.en__field__element--calendar,
.en__field__element--checkbox,
.en__field__element--email,
.en__field__element--number,
.en__field__element--password,
.en__field__element--radio,
.en__field__element--range,
.en__field__element--rating,
.en__field__element--select,
.en__field__element--splitselect,
.en__field__element--splittext,
.en__field__element--telephone,
.en__field__element--text,
.en__field__element--textarea,
.en__field__element--tripleselect,
.en__field__element--tripletext {
  display: flex;
  flex-wrap: wrap;
}

/* Reset height */
.en__field__input--textarea {
  height: initial !important;
}

/************************************
    * General overrides of EN styles
    ***********************************/
/* In the event Theme CSS causes a hidden field to become displayed, force its display to remain hidden */
/* This was an issue originally reported by EN staff, not sure if it still persists with recent styling updates */
.en__hidden {
  display: none !important;
}

.en__field,
.en__captcha {
  padding-bottom: 0;
  margin-bottom: 1rem;
  display: flex;
  flex-direction: column;
  position: relative;
}

/* For inputs with multiple components, apply the bottom margin to the field items so that if they wrap they maintain vertical spacing between them */
/*
  .en__component .en__field.en__field--radio,
  .en__component .en__field.en__field--checkbox,
  .en__component .en__field.en__field--splittext,
  .en__component .en__field.en__field--tripletext,
  .en__component .en__field.en__field--splitselect,
  .en__component .en__field.en__field--tripleselect{
  margin-bottom: 0;
  }*/
/* Make the spacing between wrapping elements tighter so the user knows they're related */
.en__component
.en__field.en__field--select
.en__field__item:not(.en__field__item--other),
.en__component
.en__field.en__field--radio
.en__field__item:not(.en__field__item--other),
.en__component
.en__field.en__field--checkbox
.en__field__item:not(.en__field__item--other),
.en__component
.en__field.en__field--splittext
.en__field__item:not(.en__field__item--other),
.en__component
.en__field.en__field--tripletext
.en__field__item:not(.en__field__item--other),
.en__component
.en__field.en__field--splitselect
.en__field__item:not(.en__field__item--other),
.en__component
.en__field.en__field--tripleselect
.en__field__item:not(.en__field__item--other) {
  margin-bottom: 0.5rem;
  margin-right: 1rem;
  display: flex;
  align-items: center;
}

.en__component div[class*="withOther"].en__field .en__field__item {
  margin-bottom: 0.5rem;
  margin-right: 1rem;
}

body .en__component--formblock .en__field:first-of-type,
body .en__component--formblock .en__field div.en__field__item:first-of-type {
  margin-left: 0rem !important;
}

/* Needs QA: ENs page builder adds a div to the formblock DOM on hover. This will cause a small right margin to appear as the expected input fields are no longer the last of their siblings */
body .en__component--formblock .en__field:last-of-type,
body .en__component--formblock .en__field div.en__field__item:last-of-type {
  margin-right: 0rem !important;
}

/* If the form field has a hidden "other" field we need to remove the end of row spacing */
/* NEED TO REVISIT FOR CODE CLEANUP */
.en__component--formblock
.en__field--withOther
div.en__field__item:nth-last-child(2) {
  margin-right: 0px;
}

.en__component--formblock .en__field:only-child,
.en__component--formblock .en__field div.en__field__item:only-child {
  margin-left: 0;
  margin-right: 0;
}

.en__component--formblock .row-wrap .en__field,
.en__component--formblock .row-wrap .en__field div.en__field__item {
  margin-left: 0.5rem;
  margin-right: 0.5rem;
}

.en__field__item {
  padding: 0;
}

/* EN sets field labels to a fixed width of 180px, this makes them responsive */
.en__field__label {
  width: auto;
}

/************************************
     * Inputs
     ***********************************/
/* General */
input[type="date"],
input[type="datetime"],
input[type="datetime-local"],
input[type="email"],
input[type="month"],
input[type="number"],
input[type="password"],
input[type="range"],
input[type="search"],
input[type="tel"],
input[type="text"],
input[type="time"],
input[type="url"],
input[type="week"],
input[type="hidden"],
select,
select.en__field__input--select,
select.en__field__input--splitselect,
select.en__field__input--tripleselect {
  max-width: 100%;
  width: 100%;
  min-width: initial;
  display: block;
  box-sizing: border-box;
  height: auto !important;
  margin: 0rem;
  padding: 0.5rem;
  border: 1px solid #000000;
  border-radius: 0px;
  background-color: transparent;
  box-shadow: inset 0 1px 2px rgba(10, 10, 10, 0.1);
  font-family: inherit;
  font-size: 1rem;
  font-weight: normal;
  line-height: 1.5;
  color: #000000;
  transition: box-shadow 0.25s, border-color 0.25s ease-in-out;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}

textarea {
  max-width: 100%;
  width: 100%;
  min-width: initial;
  display: block;
  box-sizing: border-box;
  height: auto;
  margin: 0rem;
  padding: 0.5rem;
  border: 1px solid #000000;
  border-radius: 0px;
  background-color: transparent;
  box-shadow: inset 0 1px 2px rgba(10, 10, 10, 0.1);
  font-family: inherit;
  font-size: 1rem;
  font-weight: normal;
  line-height: 1.5;
  color: #000000;
  transition: box-shadow 0.25s, border-color 0.25s ease-in-out;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}


select,
select.en__field__input--select,
select.en__field__input--splitselect,
select.en__field__input--tripleselect {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='32' height='24' viewBox='0 0 32 24'><polygon points='0,0 32,0 16,24' style='fill: rgb%28138, 138, 138%29'></polygon></svg>");
  background-origin: content-box;
  background-position: right -1rem center;
  background-repeat: no-repeat;
  background-size: 0.5625rem 0.375rem;
  padding-right: 1.5rem;
  transition: box-shadow 0.25s, border-color 0.25s ease-in-out;
}

textarea {
  height: 7rem;
  resize: vertical;
}

/* Focus state */
input[type="date"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="email"]:focus,
input[type="month"]:focus,
input[type="number"]:focus,
input[type="password"]:focus,
input[type="range"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="text"]:focus,
input[type="time"]:focus,
input[type="url"]:focus,
input[type="week"]:focus,
select:focus,
textarea:focus {
  outline: none;
  border: 1px solid #8a8a8a;
  background-color: #ffffff;
  box-shadow: 0 0 0.3125rem #cacaca;
  transition: box-shadow 0.25s, border-color 0.25s ease-in-out;
}

/**
      * Form Block Component: Select Fields
      * Overrides EN Default Styling to ensure mobile friendly widths
      */
.en__field__input--select {
  min-width: initial !important;
}

/* Placeholder styling */
/* Chrome, Firefox, Opera, Safari 10.1+ */
::-webkit-input-placeholder {
  color: #cacaca;
  opacity: 1;
  /* Firefox */
}

:-ms-input-placeholder {
  color: #cacaca;
  opacity: 1;
  /* Firefox */
}

::-ms-input-placeholder {
  color: #cacaca;
  opacity: 1;
  /* Firefox */
}

::-moz-placeholder {
  color: #cacaca;
  opacity: 1;
  /* Firefox */
}

::placeholder {
  color: #cacaca;
  opacity: 1;
  /* Firefox */
}

/* Internet Explorer 10-11 */
:-ms-input-placeholder {
  color: #cacaca;
}

/* Microsoft Edge */
::-ms-input-placeholder {
  color: #cacaca;
}

/* Custom Styling for Radio & Checkbox Inputs */
.en__field__input--radio,
.en__field__input--checkbox,
.en__contactDetails__select {
  border: 0;
  clip: rect(0 0 0 0);
  -webkit-clip-path: inset(50%);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  white-space: nowrap;
}

.en__field__input--radio + .en__field__label,
.en__field__input--checkbox + .en__field__label,
.en__contactDetails__rows {
  position: relative;
  margin-left: 2rem;
  cursor: pointer;
  display: flex;
  align-items: center;
}

.en__field__input--radio + .en__field__label::before,
.en__field__input--checkbox + .en__field__label::before,
.en__contactDetails__rows::before {
  content: "";
  position: absolute;
  height: calc(1.4rem - 2px);
  width: calc(1.4rem - 2px);
  left: -2rem;
  display: inline-block;
  vertical-align: middle;
  border: 4px solid #000000;
  box-shadow: inset 0 0 0 5px #ffffff;
  background-color: #ffffff;
  cursor: pointer;
  transition-duration: 0.25s;
  transition-property: border-color, background-color;
}

.en__field__input--radio + .en__field__label::before {
  border-radius: 50%;
}

.en__field__input--checkbox + .en__field__label::before,
.en__contactDetails__rows::before {
  border-radius: 0;
  border-width: 2px;
  box-shadow: none;
}

.en__field__input--radio:checked + .en__field__label::before,
.en__field__input--checkbox:checked + .en__field__label::before,
.en__contactDetails__select:checked + .en__contactDetails__rows::before {
  background-color: #f1700b;
  box-shadow: inset 0 0 0 2px #ffffff;
  border-width: 2px;
}

.en__field__input--checkbox:checked + .en__field__label::before,
.en__contactDetails__select:checked + .en__contactDetails__rows::before {
  color: #f1700b;
  background-color: transparent;
}

.en__field__input--checkbox:checked + .en__field__label::after,
.en__contactDetails__select:checked + .en__contactDetails__rows::after {
  content: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='21' height='16' viewBox='0 0 21 16'><path fill='%23F57E20' fill-rule='nonzero' d='M18.76.16L6.68 12.113l-4.44-4.392a.555.555 0 0 0-.779 0L.161 9.006a.541.541 0 0 0 0 .771L6.29 15.84a.555.555 0 0 0 .78 0l13.77-13.624a.541.541 0 0 0 0-.771L19.539.16a.555.555 0 0 0-.779 0z'/></svg>");
  position: absolute;
  left: -28px;
  top: 0;
  width: 21px;
  height: 16px;
  color: #f1700b;
  background-color: transparent;
  font-size: calc(0.05552em * 18);
}

/* QA Needed: Would like to find a way so that radio input focus is round rather than square. May require re-writing how radio inputs are styled */
.en__field__input--radio:focus + .en__field__label::before,
.en__field__input--checkbox:focus + .en__field__label::before,
.en__contactDetails__select:focus + .en__contactDetails__rows::before {
  outline: #8a8a8a auto 0.3125rem;
}

/* QA Needed: EN's hidden input field */
.en__field--hidden {
  display: block;
  width: 100% !important;
}

/* Uses Padding instead of Margin because padding is counted in the Flex-basis width whereas Margin is outside */
/* One optimization idea is to break this file up into three CSS files, 1-10, 11-20, and 21-30. That was they can be included only if that template is using them. */
/* Should confirm if the EN class field could even hold enough chars to fit defining 20 fields plus their start/stop classes */
/* Why 20 pre-defined options? To cover a single form component with all of the following: * 1. First Name (50%) | 2. Last Name (50%) * 3. Email (100%) * 4. Email Opt-in (100%) * 5. Phone (100%) * 6. Phone Opt-in (100%) * 7. Street (100%) * 8. Street 2 (100%) * 9. City (33%) | 10. State (33%) | 11. Zip (33%) * 12. Country (100%) * 13. Giving Frequency (100%) * 14. Giving Amount (100%) * 15. Gift Type (100%) * 16. Credit Card Number (100%) * 17. Credit Card Expiration (50%) | 18. Credit Card CVV (50%) * 19. Custom Field (100%) * 20. Custom Field (100%) */
/* Make all en fields 100% */
.en__field {
  flex-basis: 100%;
  padding-bottom: 1rem;
  margin-bottom: 0rem;
}

.en__field__element--splittext,
.en__field__element--splitselect,
.en__field__element--tripleselect {
  align-items: flex-start;
}

/* Includes overrides of existing CSS, need for resolve this duplicate styling */
.en__field__element--splittext .en__field__item:nth-of-type(1),
.en__field__element--splitselect .en__field__item:nth-of-type(1) {
  flex-basis: 50% !important;
  padding-left: 0rem !important;
  padding-right: 0.5rem !important;
  padding-bottom: 0.5rem !important;
  margin: 0 !important;
}

/* Includes overrides of existing CSS, need for resolve this duplicate styling */
.en__field__element--splittext .en__field__item:nth-of-type(2),
.en__field__element--splitselect .en__field__item:nth-of-type(2) {
  flex-basis: 50% !important;
  padding-left: 0.5rem !important;
  padding-right: 0rem !important;
  padding-bottom: 0.5rem !important;
  margin: 0 !important;
}

/* Includes overrides of existing CSS, need for resolve this duplicate styling */
.en__field__element--tripletext .en__field__item:nth-of-type(1),
.en__field__element--tripleselect .en__field__item:nth-of-type(1) {
  flex-basis: 33.33333% !important;
  padding-left: 0rem !important;
  padding-right: 0.5rem !important;
  padding-bottom: 0.5rem !important;
  margin: 0 !important;
}

/* Includes overrides of existing CSS, need for resolve this duplicate styling */
.en__field__element--tripletext .en__field__item:nth-of-type(2),
.en__field__element--tripleselect .en__field__item:nth-of-type(2) {
  flex-basis: 33.33333% !important;
  padding-left: 0.5rem !important;
  padding-right: 0.5rem !important;
  padding-bottom: 0.5rem !important;
  margin: 0 !important;
}

/* Includes overrides of existing CSS, need for resolve this duplicate styling */
.en__field__element--tripletext .en__field__item:nth-of-type(3),
.en__field__element--tripleselect .en__field__item:nth-of-type(3) {
  flex-basis: 33.33333% !important;
  padding-left: 0.5rem !important;
  padding-right: 0rem !important;
  padding-bottom: 0.5rem !important;
  margin: 0 !important;
}

.en__component--formblock.manual-form-layout {
  margin-left: -0.5rem;
  margin-right: -0.5rem;
}

.en__field {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.en__component--formblock:not(.manual-form-layout) .en__field:first-child {
  padding-left: 0;
}

.en__component--formblock:not(.manual-form-layout) .en__field:last-child {
  padding-right: 0;
}

.en__field--withOther .en__field__element--select .en__field__item:first-child {
  margin-right: 0 !important;
}

/* Custom Styles */
/* Default Stylings for Common Form Fields */
/* Can be disabled by added manual-form-layout at the template or component level */
div:not(.manual-form-layout) .en__component--formblock {
  display: flex;
  flex-wrap: wrap;
}

div:not(.manual-form-layout) .en__field--firstName,
div:not(.manual-form-layout) .en__field--lastName,
div:not(.manual-form-layout) .en__field--bankAccountNumber,
div:not(.manual-form-layout) .en__field--bankRoutingNumber {
  flex-basis: 50%;
}

div:not(.manual-form-layout) .en__field--ccexpire {
  flex-basis: calc((100% / 3) * 2);
}

div:not(.manual-form-layout) .en__field--checkbox,
div:not(.manual-form-layout) .en__field--emailAddress,
div:not(.manual-form-layout) .en__field--phoneNumber,
div:not(.manual-form-layout) .en__field--phoneNumber2,
div:not(.manual-form-layout) .en__field--country,
div:not(.manual-form-layout) .en__field--address1,
div:not(.manual-form-layout) .en__field--honname,
div:not(.manual-form-layout) .en__field--infname,
div:not(.manual-form-layout) .en__field--infemail,
div:not(.manual-form-layout) .en__field--infcountry,
div:not(.manual-form-layout) .en__field--infadd1,
div:not(.manual-form-layout) .en__field--gftrsn,
div:not(.manual-form-layout) .en__field--paymenttype,
div:not(.manual-form-layout) .en__field--ccnumber,
div:not(.manual-form-layout) .en__field--bankAccountType {
  flex-basis: 100%;
  padding-left: 0;
  padding-right: 0;
}

div:not(.manual-form-layout) .en__field--city,
div:not(.manual-form-layout) .en__field--region,
div:not(.manual-form-layout) .en__field--postcode,
div:not(.manual-form-layout) .en__field--infcity,
div:not(.manual-form-layout) .en__field--infreg,
div:not(.manual-form-layout) .en__field--infpostcd,
div:not(.manual-form-layout) .en__field--ccvv {
  flex-basis: calc(100% / 3);
}

div:not(.manual-form-layout) .en__field--city,
div:not(.manual-form-layout) .en__field--infcity,
div:not(.manual-form-layout) .en__field--ccexpire {
  padding-left: 0;
}

div:not(.manual-form-layout) .en__field--lastName,
div:not(.manual-form-layout) .en__field--postcode,
div:not(.manual-form-layout) .en__field--infpostcd,
div:not(.manual-form-layout) .en__field--ccvv {
  padding-right: 0;
}

div:not(.manual-form-layout) .en__field--recurrpay,
div:not(.manual-form-layout) .en__field--donationAmt {
  align-items: center;
  padding-left: 0;
  padding-right: 0;
}

div:not(.manual-form-layout) .en__field--donationAmt.en__field--withOther
.en__field__element--radio
.en__field__item:nth-last-child(1) {
  display: flex !important;
}

div:not(.manual-form-layout) .en__field--donationAmt.en__field--withOther
.en__field__element--radio
.en__field__item:nth-last-child(2) {
  display: none !important;
}

div:not(.manual-form-layout) .en__field--donationAmt.en__field--withOther {
  align-items: center;
}

.inline-country .en__field--country {
  position: absolute;
  right: 0;
  align-items: flex-end;
}

.inline-country .en__field--country select {
  width: 80px;
  z-index: 1;
  background-color: transparent;
  box-shadow: none;
  -moz-text-align-last: right;
       text-align-last: right;
}

.inline-country .en__field--country .en__field__error {
  z-index: 1;
}

/* Needs QA: Makes images responsive. Look into not using !important. */
img {
  max-width: 100%;
  margin: 0 auto;
  display: inherit;
}

/************************************
 * Loading spinner for submit button
 ***********************************/
.loader-wrapper {
  display: flex;
  justify-content: center;
}

.loader {
  position: relative;
  width: 1.5rem;
  height: 1.5rem;
  margin-right: 0.5rem;
  margin-top: -3px;
  margin-left: -2rem;
}

.loader-quart {
  border-radius: 50%;
  border: 0.375rem solid rgba(255, 255, 255, 0.4);
}

.loader-quart::before {
  content: "";
  position: absolute;
  top: -0.375rem;
  right: -0.375rem;
  bottom: -0.375rem;
  left: -0.375rem;
  border-radius: 3.125rem;
  border: 0.375rem solid transparent;
  border-top-color: #ffffff;
  -webkit-animation: spin 1s linear infinite;
  animation: spin 1s linear infinite;
}

@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
    tranform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    tranform: rotate(360deg);
  }
}

@keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
    tranform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    tranform: rotate(360deg);
  }
}

/************************************
   * Utility: Ellipsis Loader
   * .ellipsis-loader - Displays animated looping ellipse at end of content
   ***********************************/
.ellipsis-loader::after {
  overflow: hidden;
  display: inline-block;
  vertical-align: bottom;
  -webkit-animation: ellipsis steps(4, end) 250ms infinite;
  animation: ellipsis steps(4, end) 250ms infinite;
  content: "\2026";
  /* ascii code for the ellipsis character */
  width: 0px;
}

@keyframes ellipsis {
  to {
    width: 1.25em;
  }
}

@-webkit-keyframes ellipsis {
  to {
    width: 1.25em;
  }
}

/* Something in EN is causing outlines to overlap, this prevents the issue */
#EN__RootElement .pboAdvancedRow__preview .en__component--column {
  margin-bottom: 1px;
}

#EN__RootElement .pboAdvancedRow__preview .en__component--column:before {
  padding: 0.5rem 0;
}

/*
* ##########################################################
* # ENGRID - Mobile First Styling
* # LAYOUT - Page Builder Preview Layout
* #####################2#####################################
*/
#EN__RootElement .pboAdvancedRow__preview .en__component--column div {
  align-items: center;
  display: flex;
  justify-content: center;
}

#EN__RootElement
.pboAdvancedRow__preview
.en__component--column.page-alert::before {
  content: "Page Alert";
}

#EN__RootElement
.pboAdvancedRow__preview
.en__component--column.content-header::before {
  content: "Content Header";
}

#EN__RootElement
.pboAdvancedRow__preview
.en__component--column.body-headerOutside::before {
  content: "Body Header Outside";
}

#EN__RootElement
.pboAdvancedRow__preview
.en__component--column.body-header::before {
  content: "Body Header Spacer";
}

#EN__RootElement
.pboAdvancedRow__preview
.en__component--column.body-banner::before {
  content: "Body Banner";
}

#EN__RootElement
.pboAdvancedRow__preview
.en__component--column.body-bannerOverlay::before {
  content: "Body Banner Overlay";
}

#EN__RootElement
.pboAdvancedRow__preview
.en__component--column.body-top::before {
  content: "Body Top (Copy)";
}

#EN__RootElement
.pboAdvancedRow__preview
.en__component--column.body-side::before {
  content: "Body Side (Copy)";
}

#EN__RootElement
.pboAdvancedRow__preview
.en__component--column.body-main::before {
  content: "Body Main (Form)";
}

#EN__RootElement
.pboAdvancedRow__preview
.en__component--column.body-bottom::before {
  content: "Body Bottom (Copy)";
}

#EN__RootElement
.pboAdvancedRow__preview
.en__component--column.body-footer::before {
  content: "Body Footer Spacer";
}

#EN__RootElement
.pboAdvancedRow__preview
.en__component--column.body-footerOutside::before {
  content: "Body Footer Outside";
}

#EN__RootElement
.pboAdvancedRow__preview
.en__component--column.content-footerSpacer::before {
  content: "Content Footer Spacer";
}

#EN__RootElement
.pboAdvancedRow__preview
.en__component--column.content-preFooter::before {
  content: "Content Pre Footer";
}

#EN__RootElement
.pboAdvancedRow__preview
.en__component--column.content-footer::before {
  content: "Content Footer";
}

#EN__RootElement
.pboAdvancedRow__preview
.en__component--column.page-backgroundImage::before {
  content: "Page Background Image";
}

#EN__RootElement
.pboAdvancedRow__preview
.en__component--column.page-backgroundImageOverlay::before {
  content: "Page Background Image Overlay";
}

#EN__RootElement
.pboAdvancedRow__preview
.en__component--column.page-customCode::before {
  content: "Page Custom Code";
}

/*
* ##########################################################
* # ENGRID - BODY Column Breakpoint Styling
* # LAYOUT - Page Builder Preview Layout
* ##########################################################
*/
/* Sum of all MIN values of the Body Columns */
@media screen and (min-width: 700px) {
  /* prettier-ignore */
  #EN__RootElement .pboAdvancedRow__preview .en__component--advrow,
  #EN__RootElement .pboAdvancedRow__preview .en__component--advrow .pseudo-subgrid {
    /* autoprefixer grid: off */
    grid-template-columns: [pc-start lpc-start] minmax(25px, 1fr) [lpc-end cc-start lcc-start] minmax(25px, 1fr) [lcc-end bc-start lbc-start] minmax(300px, 300px) [lbc-end rbc-start] minmax(300px, 300px) [rbc-end bc-end rcc-start] minmax(25px, 1fr) [rcc-end cc-end rpc-start] minmax(25px, 1fr) [rpc-end pc-end];
  }
}

/*
* ##########################################################
* # LAYOUT - Page Builder Custom Styles
* ##########################################################
*/
#en__pagebuilder {
  /* When in page builder we want to center the content area on the page and must reduce it by 50px to make it visible because of the sidebar */
  width: calc(100% - 51px);
  /* If in page builder, give the background some color so that input fields stand out */
  background-color: #f1f1f1;
  /* If the user accidentally deletes all content from the form, prevent it from completely collapsing in on itself and making it impossible for the user to add new content */
  /* Adjust the editable space in the Page Editor so that the content can occupy as much space as possible */
  /* Page builder adds a hidden div to the bottom of the layout, this can result in undesired spacing */
}

#en__pagebuilder form {
  min-height: 25px !important;
}

#en__pagebuilder .page-backgroundImage img:not([loading]) {
  border: 5px solid red;
}

#en__pagebuilder .pboAdvancedRow__preview .en__container {
  margin-left: 1px !important;
  margin-right: 1px !important;
  margin-bottom: 0px !important;
  border: none !important;
}

#en__pagebuilder .pboAdvancedRow__preview .en__component--row:nth-last-child(2) {
  padding-bottom: 0px;
}

#en__pagebuilder .pboAdvancedRow__preview .en__component--advrow {
  width: 100%;
}

#en__pagebuilder .hide {
  background-color: #ff00001a !important;
}

#en__pagebuilder .hide.pboAdvancedRow__preview .en__component--column {
  outline-color: #ff0000 !important;
  z-index: 1;
}

#en__pagebuilder .inmem-y,
#en__pagebuilder .inmem-n,
#en__pagebuilder .giveBySelect-card,
#en__pagebuilder .giveBySelect-check,
#en__pagebuilder .giveBySelect-paypal,
#en__pagebuilder .inmem-Y,
#en__pagebuilder .inmem-N,
#en__pagebuilder .giveBySelect-Card,
#en__pagebuilder .giveBySelect-Check,
#en__pagebuilder .giveBySelect-Paypal {
  background-color: #0000ff1a !important;
}

#en__pagebuilder .inmem-y.pboAdvancedRow__preview .en__component--column,
#en__pagebuilder .inmem-n.pboAdvancedRow__preview .en__component--column,
#en__pagebuilder .giveBySelect-card.pboAdvancedRow__preview .en__component--column,
#en__pagebuilder .giveBySelect-check.pboAdvancedRow__preview .en__component--column,
#en__pagebuilder .giveBySelect-paypal.pboAdvancedRow__preview .en__component--column,
#en__pagebuilder .inmem-Y.pboAdvancedRow__preview .en__component--column,
#en__pagebuilder .inmem-N.pboAdvancedRow__preview .en__component--column,
#en__pagebuilder .giveBySelect-Card.pboAdvancedRow__preview .en__component--column,
#en__pagebuilder .giveBySelect-Check.pboAdvancedRow__preview .en__component--column,
#en__pagebuilder .giveBySelect-Paypal.pboAdvancedRow__preview .en__component--column {
  outline-color: #0000ff !important;
  z-index: 1;
}

#en__pagebuilder .live-giving-amount,
#en__pagebuilder .live-giving-upsell-amount,
#en__pagebuilder .live-giving-upsell-amount-raw,
#en__pagebuilder .live-giving-frequency {
  background-color: #00ff001a !important;
}

#en__pagebuilder .live-giving-amount.pboAdvancedRow__preview .en__component--column,
#en__pagebuilder .live-giving-upsell-amount.pboAdvancedRow__preview .en__component--column,
#en__pagebuilder .live-giving-upsell-amount-raw.pboAdvancedRow__preview .en__component--column,
#en__pagebuilder .live-giving-frequency.pboAdvancedRow__preview .en__component--column {
  outline-color: #00ff00 !important;
  z-index: 1;
}

#en__pagebuilder .pboAdvancedRow__preview
.en__component--column.page-backgroundImageOverlay::before {
  min-height: 350px !important;
}

#en__pagebuilder .page-backgroundImage img {
  width: auto !important;
  height: 350px !important;
  margin: 0 auto;
}

/* Remove fixed min-width on Thermometer bar */
.enWidget__bar .enWidget__progress {
  min-width: initial;
}

/* General Purposes Utility Classes */
.no-margin {
  margin: 0px;
}

.no-top-margin {
  margin-top: 0px;
}

.no-bottom-margin {
  margin-top: 0px;
}

.css-display_flex {
  display: flex;
}

.css-flex-wrap_wrap {
  flex-wrap: wrap;
}

.css-align-items_flex-start {
  align-items: flex-start;
}

.css-align-items_flex-end {
  align-items: flex-end;
}

.small {
  font-size: 90%;
}

/* 4SITE BASE LAYOUTS */
/* BASE Layout - IE 11 Fallback for ENGRID's CSS Grid */
#engrid .en__component--advrow {
  flex-direction: column;
}

#engrid .en__component--advcolumn {
  flex-basis: auto;
}

/* BASE Layout - For Browsers that do support CSS Grid */
@supports (display: grid) {
  #engrid .en__component--advrow,
  #engrid .en__component--advrow .pseudo-subgrid,
  #EN__RootElement
.pboAdvancedRow__preview
.en__component--row.en__component--advrow {
    /* autoprefixer grid: off */
    display: grid;
  }
}

body:not(#en__pagebuilder) #engrid:not(.legacy) form > .en__component--advrow {
  width: 100vw;
  max-width: 100vw;
}

#engrid.legacy .en__component--advrow .en__component--advrow {
  display: flex !important;
}

#en__pagebuilder .messageOverlay.hidden:only-child::before {
  font-size: 18px;
  font-weight: 700;
  color: #999999;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

#en__pagebuilder .messageOverlay.hidden:only-child {
  visibility: visible;
  color: transparent;
  background-color: transparent;
}

#en__pagebuilder .messageOverlay.hidden:only-child .messageOverlay__message {
  display: none;
}

#en__pagebuilder .messageOverlay.hidden {
  visibility: hidden;
  display: block !important;
}

/* prettier-ignore */
#en__pagebuilder .page-alert .messageOverlay.hidden:only-child::before {
  content: "Page Alert";
}

/* prettier-ignore */
#en__pagebuilder .content-header .messageOverlay.hidden:only-child::before {
  content: "Content Header";
}

/* prettier-ignore */
#en__pagebuilder .body-headerOutside .messageOverlay.hidden:only-child::before {
  content: "Body Header Outside";
}

/* prettier-ignore */
#en__pagebuilder .body-header .messageOverlay.hidden:only-child::before {
  content: "Body Header Spacer";
}

/* prettier-ignore */
#en__pagebuilder .body-banner .messageOverlay.hidden:only-child::before {
  content: "Body Banner";
}

/* prettier-ignore */
#en__pagebuilder .body-bannerOverlay .messageOverlay.hidden:only-child::before {
  content: "Body Banner Overlay";
}

/* prettier-ignore */
#en__pagebuilder .body-top .messageOverlay.hidden:only-child::before {
  content: "Body Top (Copy)";
}

/* prettier-ignore */
#en__pagebuilder .body-side .messageOverlay.hidden:only-child::before {
  content: "Body Side (Copy)";
}

/* prettier-ignore */
#en__pagebuilder .body-main .messageOverlay.hidden:only-child::before {
  content: "Body Main (Form)";
}

/* prettier-ignore */
#en__pagebuilder .body-bottom .messageOverlay.hidden:only-child::before {
  content: "Body Bottom (Copy)";
}

/* prettier-ignore */
#en__pagebuilder .body-footer .messageOverlay.hidden:only-child::before {
  content: "Body Footer Spacer";
}

/* prettier-ignore */
#en__pagebuilder .body-footerOutside .messageOverlay.hidden:only-child::before {
  content: "Body Footer Outside";
}

/* prettier-ignore */
#en__pagebuilder .content-footerSpacer .messageOverlay.hidden:only-child::before {
  content: "Content Footer Spacer";
}

/* prettier-ignore */
#en__pagebuilder .content-preFooter .messageOverlay.hidden:only-child::before {
  content: "Content Pre Footer";
}

/* prettier-ignore */
#en__pagebuilder .content-footer .messageOverlay.hidden:only-child::before {
  content: "Content Footer";
}

/* prettier-ignore */
#en__pagebuilder .page-backgroundImage .messageOverlay.hidden:only-child::before {
  content: "Page Background Image";
}

/* prettier-ignore */
#en__pagebuilder .page-backgroundImageOverlay .messageOverlay.hidden:only-child::before {
  content: "Page Background Image Overlay";
}

/* prettier-ignore */
#en__pagebuilder .page-customCode .messageOverlay.hidden:only-child::before {
  content: "Custom Code";
}

/* prettier-ignore */
#en__pagebuilder .page-alert {
  min-height: 5rem;
}

/* prettier-ignore */
#en__pagebuilder .content-header {
  min-height: 5rem;
}

/* prettier-ignore */
#en__pagebuilder .body-headerOutside {
  min-height: 5rem;
}

/* prettier-ignore */
#en__pagebuilder .body-header {
  min-height: 5rem;
}

/* prettier-ignore */
#en__pagebuilder .body-banner {
  min-height: 5rem;
}

/* prettier-ignore */
#en__pagebuilder .body-bannerOverlay {
  min-height: 5rem;
}

/* prettier-ignore */
#en__pagebuilder .body-top {
  min-height: 5rem;
}

/* prettier-ignore */
#en__pagebuilder .body-side {
  min-height: 5rem;
}

/* prettier-ignore */
#en__pagebuilder .body-main {
  min-height: 5rem;
}

/* prettier-ignore */
#en__pagebuilder .body-bottom {
  min-height: 5rem;
}

/* prettier-ignore */
#en__pagebuilder .body-footer {
  min-height: 5rem;
}

/* prettier-ignore */
#en__pagebuilder .body-footerOutside {
  min-height: 5rem;
}

/* prettier-ignore */
#en__pagebuilder .content-footerSpacer {
  min-height: 5rem;
}

/* prettier-ignore */
#en__pagebuilder .content-preFooter {
  min-height: 5rem;
}

/* prettier-ignore */
#en__pagebuilder .content-footer {
  min-height: 5rem;
}

/* prettier-ignore */
#en__pagebuilder .page-customCode {
  min-height: 5rem;
}

/* prettier-ignore */
#en__pagebuilder .page-backgroundImage {
  min-height: 15rem;
}

/* prettier-ignore */
#en__pagebuilder .page-backgroundImageOverlay {
  min-height: 15rem;
}

/*
* ##########################################################
* # ENGRID - Mobile First Styling
* # We specify 'grid-template-areas' and 'grid-area' in the event the Advanced Rows
* # are created in a different DOM order in Engaging Networks Page Builder, since
* # the user can not re-order the rows once they add them.
* ##########################################################
*/
#engrid:not(.legacy) .en__component--advrow {
  min-height: 100vh;
}

/* The 'pseudo-subgrid' is used to position first generation child content horizontally in page spanning grid components' */
/* prettier-ignore */
#engrid .en__component--advrow,
#engrid .en__component--advrow .pseudo-subgrid,
#EN__RootElement .en__component--advrow,
#EN__RootElement .en__component--advrow .pseudo-subgrid {
  /* autoprefixer grid: off */
  grid-template-columns: [pc-start lpc-start lpc-end cc-start lcc-start lcc-end bc-start lbc-start lbc-end] auto [rbc-start rbc-end bc-end rcc-start rcc-end cc-end rpc-start rpc-end pc-end];
}

/* prettier-ignore */
#engrid .en__component--advrow,
#EN__RootElement .pboAdvancedRow__preview .en__component--row.en__component--advrow {
  /* autoprefixer grid: off */
  grid-template-rows: [page-start page-alert-start] minmax(0px, auto) [page-alert-end content-header-start] minmax(0px, auto) [content-header-end body-headerOutside-start] minmax(0px, auto) [body-headerOutside-end body-header-start] minmax(0px, auto) [body-header-end body-banner-start] minmax(0px, auto) [body-banner-end body-bannerOverlay-start] minmax(0px, auto) [body-bannerOverlay-end body-top-start] minmax(0px, auto) [body-top-end body-side-start] minmax(0px, auto) [body-side-end body-main-start] minmax(0px, auto) [body-main-end body-bottom-start] minmax(0px, auto) [body-bottom-end body-footer-start] minmax(0px, auto) [body-footer-end body-footerOutside-start] minmax(0px, auto) [body-footerOutside-end content-footerSpacer-start] minmax(0px, 1fr) [content-footerSpacer-end content-preFooter-start] minmax(0px, auto) [content-preFooter-end content-footer-start] minmax(0px, auto) [content-footer-end page-backgroundImage-start] minmax(0px, auto) [page-backgroundImage-end page-backgroundImageOverlay-start] minmax(0px, auto) [page-backgroundImageOverlay-end page-end page-customCode-start] minmax(0px, auto) [page-customCode-end];
}

#engrid .en__component--advrow .page-alert,
#EN__RootElement .en__component--advrow .page-alert {
  grid-column: pc;
  grid-row: page-alert;
}

#engrid .en__component--advrow .content-header,
#EN__RootElement .en__component--advrow .content-header {
  grid-column: pc;
  grid-row: content-header;
}

#engrid .en__component--advrow .content-header.pseudo-subgrid > div,
#EN__RootElement .en__component--advrow .content-header.pseudo-subgrid > div {
  grid-column: cc;
}

#engrid .en__component--advrow .body-headerOutside,
#EN__RootElement .en__component--advrow .body-headerOutside {
  grid-column: cc;
  grid-row: body-headerOutside;
}

#engrid .en__component--advrow .body-header,
#EN__RootElement .en__component--advrow .body-header {
  grid-column: bc;
  grid-row: body-header;
}

#engrid .en__component--advrow .body-banner,
#EN__RootElement .en__component--advrow .body-banner {
  grid-column: bc;
  grid-row: body-banner;
}

#engrid .en__component--advrow .body-bannerOverlay,
#EN__RootElement .en__component--advrow .body-bannerOverlay {
  grid-column: bc;
  grid-row: body-bannerOverlay;
}

#engrid .en__component--advrow .body-top,
#EN__RootElement .en__component--advrow .body-top {
  grid-column: bc;
  grid-row: body-top;
}

#engrid .en__component--advrow .body-side,
#EN__RootElement .en__component--advrow .body-side {
  grid-column: bc;
  grid-row: body-side;
}

#engrid .en__component--advrow .body-main,
#EN__RootElement .en__component--advrow .body-main {
  grid-column: bc;
  grid-row: body-main;
}

#engrid .en__component--advrow .body-bottom,
#EN__RootElement .en__component--advrow .body-bottom {
  grid-column: bc;
  grid-row: body-bottom;
}

#engrid .en__component--advrow .body-footer,
#EN__RootElement .en__component--advrow .body-footer {
  grid-column: bc;
  grid-row: body-footer;
}

#engrid .en__component--advrow .body-footerOutside,
#EN__RootElement .en__component--advrow .body-footerOutside {
  grid-column: cc;
  grid-row: body-footerOutside;
}

#engrid .en__component--advrow .content-footerSpacer,
#EN__RootElement .en__component--advrow .content-footerSpacer {
  grid-column: cc;
  grid-row: content-footerSpacer;
}

#engrid .en__component--advrow .content-preFooter,
#EN__RootElement .en__component--advrow .content-preFooter {
  grid-column: cc;
  grid-row: content-preFooter;
}

#engrid .en__component--advrow .content-footer,
#EN__RootElement .en__component--advrow .content-footer {
  grid-column: pc;
  grid-row: content-footer;
}

#engrid .en__component--advrow .content-footer.pseudo-subgrid > div,
#EN__RootElement .en__component--advrow .content-footer.pseudo-subgrid > div {
  grid-column: cc;
}

#engrid .en__component--advrow .page-customCode,
#EN__RootElement .en__component--advrow .page-customCode {
  grid-column: pc;
  grid-row: page-customCode;
}

#engrid .en__component--advrow .page-backgroundImage,
#EN__RootElement .en__component--advrow .page-backgroundImage {
  grid-column: pc;
  grid-row: page-backgroundImage;
}

#engrid .en__component--advrow .page-backgroundImageOverlay,
#EN__RootElement .en__component--advrow .page-backgroundImageOverlay {
  grid-column: pc;
  grid-row: page-backgroundImageOverlay;
}

#engrid .en__component--advrow > div,
#EN__RootElement .en__component--advrow > div {
  grid-column: pc;
  grid-row: na;
}

#engrid
.en__component--advrow.en__component--active
.en__component__actions.en__component__actions--advrow {
  grid-row: page;
}

/*
* ##########################################################
* # ENGRID - BODY Column Breakpoint Styling
* ##########################################################
*/
/* Sum of all MIN values of the Body Columns */
@media screen and (min-width: 650px) {
  /* prettier-ignore */
  #engrid .en__component--advrow,
  #engrid .en__component--advrow .pseudo-subgrid {
    /* autoprefixer grid: off */
    grid-template-columns: [pc-start lpc-start] minmax(25px, 1fr) [lpc-end cc-start lcc-start] minmax(0px, 50px) [lcc-end bc-start lbc-start] minmax(300px, 425px) [lbc-end rbc-start] minmax(300px, 425px) [rbc-end bc-end rcc-start] minmax(0px, 50px) [rcc-end cc-end rpc-start] minmax(25px, 1fr) [rpc-end pc-end];
  }
}

/*
* ##########################################################
* # ENGRID - Default Stylings
* ##########################################################
*/
#engrid .en__component--advrow .body-header,
#engrid .en__component--advrow .body-banner,
#engrid .en__component--advrow .body-bannerOverlay,
#engrid .en__component--advrow .body-top,
#engrid .en__component--advrow .body-side,
#engrid .en__component--advrow .body-main,
#engrid .en__component--advrow .body-bottom,
#engrid .en__component--advrow .body-footer {
  position: relative;
  background-color: #ffffff;
  padding-left: 1.75rem;
  padding-right: 1.75rem;
}

#engrid .en__component--advrow .body-header {
  padding-top: 1.75rem;
  min-height: 0px;
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
}

#engrid .en__component--advrow .body-footer {
  padding-bottom: 1.75rem;
  min-height: 0px;
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
}

#engrid .en__component--advrow .body-header::before,
#engrid .en__component--advrow .body-banner::before,
#engrid .en__component--advrow .body-top::before,
#engrid .en__component--advrow .body-side::before,
#engrid .en__component--advrow .body-main::before,
#engrid .en__component--advrow .body-bottom::before,
#engrid .en__component--advrow .body-footer::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -2;
  box-shadow: 0 36px 50px 0 rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 2px 1px -1px rgba(0, 0, 0, 0.12);
}

body:not(#en__pagebuilder) #engrid .page-customCode {
  display: none;
}

body:not(#en__pagebuilder)
#engrid
.en__component--advrow
.page-backgroundImage {
  background-position: top left;
  background-repeat: no-repeat;
  z-index: -3;
  background-size: cover;
}

body:not(#en__pagebuilder).footer-below-fold
#engrid
.en__component--advrow
.page-backgroundImage {
  -webkit-clip-path: polygon(100% 0, 100% 90vh, 50% 110vh, 0 90vh, 0 0);
  clip-path: polygon(100% 0, 100% 90vh, 50% 110vh, 0 90vh, 0 0);
  height: 120vh;
  background-color: #487c0f;
}

body:not(#en__pagebuilder)
#engrid.legacy
.en__component--advrow
.page-backgroundImage {
  background-position: top right;
}

body:not(#en__pagebuilder)
#engrid
.en__component--advrow
.page-backgroundImageOverlay {
  z-index: -1;
}

.i1-25 .en__field:nth-of-type(1),
.i2-25 .en__field:nth-of-type(2),
.i3-25 .en__field:nth-of-type(3),
.i4-25 .en__field:nth-of-type(4),
.i5-25 .en__field:nth-of-type(5),
.i6-25 .en__field:nth-of-type(6),
.i7-25 .en__field:nth-of-type(7),
.i8-25 .en__field:nth-of-type(8),
.i9-25 .en__field:nth-of-type(9) {
  flex-basis: 25%;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.i1-33 .en__field:nth-of-type(1),
.i2-33 .en__field:nth-of-type(2),
.i3-33 .en__field:nth-of-type(3),
.i4-33 .en__field:nth-of-type(4),
.i5-33 .en__field:nth-of-type(5),
.i6-33 .en__field:nth-of-type(6),
.i7-33 .en__field:nth-of-type(7),
.i8-33 .en__field:nth-of-type(8),
.i9-33 .en__field:nth-of-type(9) {
  flex-basis: 33.33333%;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.i1-50 .en__field:nth-of-type(1),
.i2-50 .en__field:nth-of-type(2),
.i3-50 .en__field:nth-of-type(3),
.i4-50 .en__field:nth-of-type(4),
.i5-50 .en__field:nth-of-type(5),
.i6-50 .en__field:nth-of-type(6),
.i7-50 .en__field:nth-of-type(7),
.i8-50 .en__field:nth-of-type(8),
.i9-50 .en__field:nth-of-type(9) {
  flex-basis: 50%;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.i1-66 .en__field:nth-of-type(1),
.i2-66 .en__field:nth-of-type(2),
.i3-66 .en__field:nth-of-type(3),
.i4-66 .en__field:nth-of-type(4),
.i5-66 .en__field:nth-of-type(5),
.i6-66 .en__field:nth-of-type(6),
.i7-66 .en__field:nth-of-type(7),
.i8-66 .en__field:nth-of-type(8),
.i9-66 .en__field:nth-of-type(9) {
  flex-basis: 66.66666%;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.i1-75 .en__field:nth-of-type(1),
.i2-75 .en__field:nth-of-type(2),
.i3-75 .en__field:nth-of-type(3),
.i4-75 .en__field:nth-of-type(4),
.i5-75 .en__field:nth-of-type(5),
.i6-75 .en__field:nth-of-type(6),
.i7-75 .en__field:nth-of-type(7),
.i8-75 .en__field:nth-of-type(8),
.i9-75 .en__field:nth-of-type(9) {
  flex-basis: 75%;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.i1-100 .en__field:nth-of-type(1),
.i2-100 .en__field:nth-of-type(2),
.i3-100 .en__field:nth-of-type(3),
.i4-100 .en__field:nth-of-type(4),
.i5-100 .en__field:nth-of-type(5),
.i6-100 .en__field:nth-of-type(6),
.i7-100 .en__field:nth-of-type(7),
.i8-100 .en__field:nth-of-type(8),
.i9-100 .en__field:nth-of-type(9) {
  flex-basis: 100%;
  padding-left: 0rem;
  padding-right: 0rem;
}

/* For items at the start of a row, remove left padding */
.i1-start .en__field:nth-of-type(1),
.i2-start .en__field:nth-of-type(2),
.i3-start .en__field:nth-of-type(3),
.i4-start .en__field:nth-of-type(4),
.i5-start .en__field:nth-of-type(5),
.i6-start .en__field:nth-of-type(6),
.i7-start .en__field:nth-of-type(7),
.i8-start .en__field:nth-of-type(8),
.i9-start .en__field:nth-of-type(9) {
  padding-left: 0;
}

/* For items at the end of a row, remove right padding */
.i1-end .en__field:nth-of-type(1),
.i2-end .en__field:nth-of-type(2),
.i3-end .en__field:nth-of-type(3),
.i4-end .en__field:nth-of-type(4),
.i5-end .en__field:nth-of-type(5),
.i6-end .en__field:nth-of-type(6),
.i7-end .en__field:nth-of-type(7),
.i8-end .en__field:nth-of-type(8),
.i9-end .en__field:nth-of-type(9) {
  padding-right: 0;
}

.i1-center .en__field:nth-of-type(1),
.i2-center .en__field:nth-of-type(2),
.i3-center .en__field:nth-of-type(3),
.i4-center .en__field:nth-of-type(4),
.i5-center .en__field:nth-of-type(5),
.i6-center .en__field:nth-of-type(6),
.i7-center .en__field:nth-of-type(7),
.i8-center .en__field:nth-of-type(8),
.i9-center .en__field:nth-of-type(9) {
  align-items: center;
}

#en__pagebuilder .i1-hide .en__field:nth-of-type(1),
#en__pagebuilder .i2-hide .en__field:nth-of-type(2),
#en__pagebuilder .i3-hide .en__field:nth-of-type(3),
#en__pagebuilder .i4-hide .en__field:nth-of-type(4),
#en__pagebuilder .i5-hide .en__field:nth-of-type(5),
#en__pagebuilder .i6-hide .en__field:nth-of-type(6),
#en__pagebuilder .i7-hide .en__field:nth-of-type(7),
#en__pagebuilder .i8-hide .en__field:nth-of-type(8),
#en__pagebuilder .i9-hide .en__field:nth-of-type(9) {
  background-color: #ff00001a !important;
}

body:not(#en__pagebuilder) .i1-hide .en__field:nth-of-type(1),
body:not(#en__pagebuilder) .i2-hide .en__field:nth-of-type(2),
body:not(#en__pagebuilder) .i3-hide .en__field:nth-of-type(3),
body:not(#en__pagebuilder) .i4-hide .en__field:nth-of-type(4),
body:not(#en__pagebuilder) .i5-hide .en__field:nth-of-type(5),
body:not(#en__pagebuilder) .i6-hide .en__field:nth-of-type(6),
body:not(#en__pagebuilder) .i7-hide .en__field:nth-of-type(7),
body:not(#en__pagebuilder) .i8-hide .en__field:nth-of-type(8),
body:not(#en__pagebuilder) .i9-hide .en__field:nth-of-type(9) {
  display: none;
}

/* Force input visibility */
/* Still needs JS to auto select last radio on input */
/* prettier-ignore */
.i1-show-hidden-radio-input .en__field:nth-of-type(1) .en__field__element--radio .en__field__item:nth-last-child(1),
.i2-show-hidden-radio-input .en__field:nth-of-type(2) .en__field__element--radio .en__field__item:nth-last-child(1),
.i3-show-hidden-radio-input .en__field:nth-of-type(3) .en__field__element--radio .en__field__item:nth-last-child(1),
.i4-show-hidden-radio-input .en__field:nth-of-type(4) .en__field__element--radio .en__field__item:nth-last-child(1),
.i5-show-hidden-radio-input .en__field:nth-of-type(5) .en__field__element--radio .en__field__item:nth-last-child(1),
.i6-show-hidden-radio-input .en__field:nth-of-type(6) .en__field__element--radio .en__field__item:nth-last-child(1),
.i7-show-hidden-radio-input .en__field:nth-of-type(7) .en__field__element--radio .en__field__item:nth-last-child(1),
.i8-show-hidden-radio-input .en__field:nth-of-type(8) .en__field__element--radio .en__field__item:nth-last-child(1),
.i9-show-hidden-radio-input .en__field:nth-of-type(9) .en__field__element--radio .en__field__item:nth-last-child(1) {
  display: flex !important;
}

/* Hide Other Input Radio Value because it is auto-selected with JS when a value is entered in the Other Input Text field. */
/* prettier-ignore */
.i1-show-hidden-radio-input .en__field:nth-of-type(1) .en__field__element--radio .en__field__item:nth-last-child(2),
.i2-show-hidden-radio-input .en__field:nth-of-type(2) .en__field__element--radio .en__field__item:nth-last-child(2),
.i3-show-hidden-radio-input .en__field:nth-of-type(3) .en__field__element--radio .en__field__item:nth-last-child(2),
.i4-show-hidden-radio-input .en__field:nth-of-type(4) .en__field__element--radio .en__field__item:nth-last-child(2),
.i5-show-hidden-radio-input .en__field:nth-of-type(5) .en__field__element--radio .en__field__item:nth-last-child(2),
.i6-show-hidden-radio-input .en__field:nth-of-type(6) .en__field__element--radio .en__field__item:nth-last-child(2),
.i7-show-hidden-radio-input .en__field:nth-of-type(7) .en__field__element--radio .en__field__item:nth-last-child(2),
.i8-show-hidden-radio-input .en__field:nth-of-type(8) .en__field__element--radio .en__field__item:nth-last-child(2),
.i9-show-hidden-radio-input .en__field:nth-of-type(9) .en__field__element--radio .en__field__item:nth-last-child(2) {
  display: none !important;
}

/* On error, restyle if the field is also centered */
/* prettier-ignore */
.i1-show-hidden-radio-input.i1-center .en__field:nth-of-type(1).en__field--validationFailed .en__field__element--radio,
.i2-show-hidden-radio-input.i2-center .en__field:nth-of-type(2).en__field--validationFailed .en__field__element--radio,
.i3-show-hidden-radio-input.i3-center .en__field:nth-of-type(3).en__field--validationFailed .en__field__element--radio,
.i4-show-hidden-radio-input.i4-center .en__field:nth-of-type(4).en__field--validationFailed .en__field__element--radio,
.i5-show-hidden-radio-input.i5-center .en__field:nth-of-type(5).en__field--validationFailed .en__field__element--radio,
.i6-show-hidden-radio-input.i6-center .en__field:nth-of-type(6).en__field--validationFailed .en__field__element--radio,
.i7-show-hidden-radio-input.i7-center .en__field:nth-of-type(7).en__field--validationFailed .en__field__element--radio,
.i8-show-hidden-radio-input.i8-center .en__field:nth-of-type(8).en__field--validationFailed .en__field__element--radio,
.i9-show-hidden-radio-input.i9-center .en__field:nth-of-type(9).en__field--validationFailed .en__field__element--radio {
  border-radius: 0.3rem !important;
  margin-bottom: 0.5rem;
}

/* On error, restyle if the field is also centered */
/* prettier-ignore */
.i1-show-hidden-radio-input.i1-center .en__field:nth-of-type(1).en__field--validationFailed .en__field__error,
.i2-show-hidden-radio-input.i2-center .en__field:nth-of-type(2).en__field--validationFailed .en__field__error,
.i3-show-hidden-radio-input.i3-center .en__field:nth-of-type(3).en__field--validationFailed .en__field__error,
.i4-show-hidden-radio-input.i4-center .en__field:nth-of-type(4).en__field--validationFailed .en__field__error,
.i5-show-hidden-radio-input.i5-center .en__field:nth-of-type(5).en__field--validationFailed .en__field__error,
.i6-show-hidden-radio-input.i6-center .en__field:nth-of-type(6).en__field--validationFailed .en__field__error,
.i7-show-hidden-radio-input.i7-center .en__field:nth-of-type(7).en__field--validationFailed .en__field__error,
.i8-show-hidden-radio-input.i8-center .en__field:nth-of-type(8).en__field--validationFailed .en__field__error,
.i9-show-hidden-radio-input.i9-center .en__field:nth-of-type(9).en__field--validationFailed .en__field__error {
  border-radius: 0.3rem !important;
}

@media screen and (max-width: 40em) {
  .i1-m50 .en__field:nth-of-type(1),
  .i2-m50 .en__field:nth-of-type(2),
  .i3-m50 .en__field:nth-of-type(3),
  .i4-m50 .en__field:nth-of-type(4),
  .i5-m50 .en__field:nth-of-type(5),
  .i6-m50 .en__field:nth-of-type(6),
  .i7-m50 .en__field:nth-of-type(7),
  .i8-m50 .en__field:nth-of-type(8),
  .i9-m50 .en__field:nth-of-type(9) {
    flex-basis: 50%;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
  /* For items at the start of a row, remove left padding */
  .i1-mstart .en__field:nth-of-type(1),
  .i2-mstart .en__field:nth-of-type(2),
  .i3-mstart .en__field:nth-of-type(3),
  .i4-mstart .en__field:nth-of-type(4),
  .i5-mstart .en__field:nth-of-type(5),
  .i6-mstart .en__field:nth-of-type(6),
  .i7-mstart .en__field:nth-of-type(7),
  .i8-mstart .en__field:nth-of-type(8),
  .i9-mstart .en__field:nth-of-type(9) {
    padding-left: 0;
  }
  /* For items at the end of a row, remove right padding */
  .i1-mend .en__field:nth-of-type(1),
  .i2-mend .en__field:nth-of-type(2),
  .i3-mend .en__field:nth-of-type(3),
  .i4-mend .en__field:nth-of-type(4),
  .i5-mend .en__field:nth-of-type(5),
  .i6-mend .en__field:nth-of-type(6),
  .i7-mend .en__field:nth-of-type(7),
  .i8-mend .en__field:nth-of-type(8),
  .i9-mend .en__field:nth-of-type(9) {
    padding-right: 0;
  }
  .i1-m100 .en__field:nth-of-type(1),
  .i2-m100 .en__field:nth-of-type(2),
  .i3-m100 .en__field:nth-of-type(3),
  .i4-m100 .en__field:nth-of-type(4),
  .i5-m100 .en__field:nth-of-type(5),
  .i6-m100 .en__field:nth-of-type(6),
  .i7-m100 .en__field:nth-of-type(7),
  .i8-m100 .en__field:nth-of-type(8),
  .i9-m100 .en__field:nth-of-type(9) {
    flex-basis: 100%;
    padding-left: 0rem;
    padding-right: 0rem;
  }
}

/* 4SITE ADDON STYLING */
/*
* ##########################################################
* # DEBUG
* ##########################################################
*/
.debug {
  margin-top: 47px;
}

#debug-bar {
  display: flex;
  padding: 0.5rem;
  border-bottom: 1px solid #cccccc;
  justify-content: space-between;
  background: #f5f5f5;
  position: fixed;
  width: 100vw;
  top: 0;
  z-index: 2147483640;
  box-shadow: 0 36px 50px 0 rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 2px 1px -1px rgba(0, 0, 0, 0.12);
}

#debug-bar #info-wrapper,
#debug-bar #buttons-wrapper {
  display: flex;
}

#debug-bar #info-wrapper span {
  margin: 0rem 1rem 0rem 0rem;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  font-family: Arial, sans-serif;
  display: flex;
  align-items: center;
}

#debug-bar #buttons-wrapper span {
  margin: 0rem 1rem 0rem 1rem;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  font-family: Arial, sans-serif;
  display: flex;
  align-items: center;
  cursor: pointer;
}

#debug-bar #buttons-wrapper button {
  margin: 0rem 0rem 0rem 1rem;
  padding: 9px;
  border: none;
  background-color: #3d9cd6;
  color: #ffffff;
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  font-family: Arial, sans-serif;
  border-radius: 6px;
}

#debug-bar #buttons-wrapper button:hover, #debug-bar #buttons-wrapper button:focus, #debug-bar #buttons-wrapper button:active {
  background-color: #1c6d9e;
}

/* prettier-ignore */
.radio-to-buttons .en__field--radio input[type="radio"] + label,
.give-by-select .en__field--radio input[type="radio"] + label,
.en__field--donationAmt.en__field--radio input[type="radio"] + label {
  border-radius: 0px;
}

/* TODO Possibly Trim */
/* prettier-ignore */
.radio-to-buttons .en__field--radio .en__field__input--radio + .en__field__label,
.give-by-select .en__field--radio .en__field__input--radio + .en__field__label,
.en__field--donationAmt.en__field--radio .en__field__input--radio + .en__field__label {
  margin-left: 0rem !important;
}

/* prettier-ignore */
.radio-to-buttons .en__field--radio .en__field__input--radio + .en__field__label::before,
.give-by-select .en__field--radio .en__field__input--radio + .en__field__label::before,
.en__field--donationAmt.en__field--radio .en__field__input--radio + .en__field__label::before {
  display: none !important;
}

/* prettier-ignore */
.radio-to-buttons .en__field--radio input[type="radio"] + label,
.radio-to-buttons .en__field--radio .en__field__item--other input[type="text"],
.give-by-select .en__field--radio input[type="radio"] + label,
.give-by-select .en__field--radio .en__field__item--other input[type="text"],
.en__field--donationAmt.en__field--radio input[type="radio"] + label,
.en__field--donationAmt.en__field--radio .en__field__item--other input[type="text"],
.en__field--donationAmt.en__field--radio .en__field__item--other input[type="tel"],
.en__field--donationAmt.en__field--radio .en__field__item--other input[type="number"] {
  background-color: #000000;
  color: #ffffff;
}

/* prettier-ignore */
.radio-to-buttons .en__field--radio input[type="radio"]:checked + label,
.radio-to-buttons .en__field--radio .en__field__item--other.has-value input,
.radio-to-buttons .en__field--radio .en__field__item--other:not(.en__field__item--hidden) input,
.give-by-select .en__field--radio input[type="radio"]:checked + label,
.give-by-select .en__field--radio .en__field__item--other.has-value input,
.give-by-select .en__field--radio .en__field__item--other:not(.en__field__item--hidden) input,
.en__field--donationAmt.en__field--radio input[type="radio"]:checked + label,
.en__field--donationAmt.en__field--radio .en__field__item--other.has-value input,
.en__field--donationAmt.en__field--radio .en__field__item--other:not(.en__field__item--hidden) input {
  text-transform: none;
  background-color: #f1700b;
  border-color: #f1700b;
  color: #ffffff;
}

/* prettier-ignore */
.radio-to-buttons .en__field--radio label.en__field__label.en__field__label--item,
.give-by-select .en__field--radio label.en__field__label.en__field__label--item,
.en__field--donationAmt.en__field--radio label.en__field__label.en__field__label--item {
  border: 1px solid #000000;
  background-position-x: 40px;
}

/* TODO Possibly Trim */
/* TODO Possibly Trim */
/* prettier-ignore */
.radio-to-buttons .en__field__input--other,
.give-by-select .en__field__input--other,
.en__field--donationAmt.en__field__input--other {
  height: auto !important;
}

/* TODO Possibly Trim */
/* prettier-ignore */
.radio-to-buttons .en__field--radio input[type="radio"]:focus + label,
.give-by-select .en__field--radio input[type="radio"]:focus + label,
.en__field--donationAmt.en__field--radio input[type="radio"]:focus + label {
  outline: none !important;
  border: 1px solid #666666 !important;
  box-shadow: 0 0 0.3125rem #cacaca !important;
  transition: box-shadow 0.25s, border-color 0.125s ease-in-out !important;
}

.en__field--donationAmt input[type="number"]::-webkit-inner-spin-button,
.en__field--donationAmt input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
  -moz-appearance: textfield;
}

.has-give-monthly
.en__field--donationAmt
div:not(.en__field__item--other)
.en__field__label--item::after {
  content: "/mo";
  line-height: 2;
  font-size: 75%;
  margin-left: 0.1875rem;
  opacity: 0.5;
  text-transform: lowercase;
}

.en__ecarditems__thumb {
  height: auto !important;
}

button.en__ecarditems__addrecipient {
  margin: 4px !important;
}

.en__ecardrecipients__name,
.ecardrecipient__name {
  width: calc(50% - 1rem) !important;
}

.en__ecardrecipients__email,
.ecardrecipient__email {
  width: calc(50% - 1rem) !important;
}

.ecardrecipient__name,
.ecardrecipient__email {
  font-family: inherit;
  font-size: 1rem;
  font-weight: normal;
  line-height: 1.5;
  color: #0a0a0a;
  opacity: 0.8;
  padding-left: 10px;
  padding-right: 10px;
}

.en__ecardrecipients__list:before {
  /* content: "Recipient List"; */
  color: #323232;
  font-weight: bold;
  font-style: normal;
  font-stretch: normal;
  line-height: normal;
  letter-spacing: normal;
  color: #323232;
}

.en__ecardrecipients__recipient {
  padding: 0;
}

.en__ecardrecipients__list {
  min-height: 50px;
  border: 0px;
  padding: 0px;
}

.ecardrecipient__remove button {
  width: 30px;
  height: 30px;
  background-color: #e74b3c;
  padding: 0 !important;
  font-size: 12px !important;
  position: relative;
  right: 2px;
}

.en__ecarditems__thumb img {
  height: 150px !important;
  width: auto;
  border: 2px solid #009bc4;
  -webkit-filter: brightness(75%);
  filter: brightness(75%);
}

.en__ecarditems__thumb:hover img {
  -webkit-filter: brightness(87.5%);
  filter: brightness(87.5%);
  opacity: 0.75;
}

.en__ecarditems__thumb.thumb--active img {
  -webkit-filter: brightness(100%);
  filter: brightness(100%);
}

.en__ecarditems__thumb {
  width: auto !important;
}

.en__ecarditems__thumb:last-child {
  margin-right: 0px;
}

.en__ecardmessage__default {
  margin-bottom: 40px;
  height: 18rem;
}

button.en__ecarditems__prevclose {
  background-color: transparent;
  top: 5px;
  right: -29px;
  font-size: 2rem;
  padding: 0;
  margin: 0;
  border: none;
}

.en__ecarditems__showprev {
  background-color: #323232;
  margin-bottom: 40px;
}

@media screen and (max-width: 700px) {
  button.en__ecarditems__prevclose {
    right: 17px;
    color: #9e9e9e;
  }
}

.en__additional__amount,
.en__additional__label,
.en__ticket__currency,
.en__ticket__name,
.en__ticket__price {
  font-size: inherit;
}

.en__ticket__selector {
  display: flex;
}

.en__additional__amount,
.en__ticket__field--cost {
  width: initial;
}

.en__ticket__field--quantity {
  width: initial;
}

.en__ticket__minus,
.en__ticket__plus {
  background-color: transparent;
}

.en__ticket__minus:hover,
.en__ticket__minus:focus,
.en__ticket__plus:hover,
.en__ticket__plus:focus {
  background-color: #ffffff;
}

/*
* ##########################################################
* # Field Level Inline "Fancy Errors"
* ##########################################################
*/
#engrid.fancy-errors .en__component .en__field__error {
  padding: 0.25rem 0.5rem;
  color: #ffffff;
  font-size: 0.75rem;
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
  background-color: #e74b3c;
  order: 3;
}

#engrid.fancy-errors .en__field--text.en__field--validationFailed input,
#engrid.fancy-errors .en__field--email.en__field--validationFailed input,
#engrid.fancy-errors .en__field--telephone.en__field--validationFailed input,
#engrid.fancy-errors .en__field--number.en__field--validationFailed input,
#engrid.fancy-errors .en__field--textarea.en__field--validationFailed textarea,
#engrid.fancy-errors .en__field--select.en__field--validationFailed select {
  border-bottom-right-radius: 0px;
  border-bottom-left-radius: 0px;
}

#engrid.fancy-errors
.en__component
.en__field.en__field--select.en__field--withOther.en__field--validationFailed
.en__field__element,
#engrid.fancy-errors
.en__component
.en__field.en__field--radio.en__field--validationFailed
.en__field__element,
#engrid.fancy-errors
.en__component
.en__field.en__field--checkbox.en__field--validationFailed
.en__field__element,
#engrid.fancy-errors
.en__component
.en__field.en__field--splittext.en__field--validationFailed
.en__field__element,
#engrid.fancy-errors
.en__component
.en__field.en__field--tripletext.en__field--validationFailed
.en__field__element,
#engrid.fancy-errors
.en__component
.en__field.en__field--splitselect.en__field--validationFailed
.en__field__element,
#engrid.fancy-errors
.en__component
.en__field.en__field--tripleselect.en__field--validationFailed
.en__field__element {
  border-bottom-left-radius: 0rem;
  border-bottom-right-radius: 0rem;
}

#engrid.fancy-errors
.en__component
.en__field.en__field--select.en__field--withOther.en__field--validationFailed.has-value
.en__field__element,
#engrid.fancy-errors
.en__component
.en__field.en__field--radio.en__field--validationFailed.has-value
.en__field__element,
#engrid.fancy-errors
.en__component
.en__field.en__field--checkbox.en__field--validationFailed.has-value
.en__field__element,
#engrid.fancy-errors
.en__component
.en__field.en__field--splittext.en__field--validationFailed.has-value
.en__field__element,
#engrid.fancy-errors
.en__component
.en__field.en__field--tripletext.en__field--validationFailed.has-value
.en__field__element,
#engrid.fancy-errors
.en__component
.en__field.en__field--splitselect.en__field--validationFailed.has-value
.en__field__element,
#engrid.fancy-errors
.en__component
.en__field.en__field--tripleselect.en__field--validationFailed.has-value
.en__field__element,
#engrid.fancy-errors .en__field--validationFailed.has-value .en__field__error {
  border-color: #949494;
  background-color: #949494;
  color: #ffffff;
}

/*
* ##########################################################
* # FLOAT LABELS
* ##########################################################
*/
#engrid.float-labels .en__field--text input[type="text"],
#engrid.float-labels .en__field--email input[type="email"],
#engrid.float-labels .en__field--telephone input[type="tel"],
#engrid.float-labels .en__field--textarea textarea {
  padding: 1rem 0.5rem 0rem 0.5rem;
}

#engrid.float-labels .en__field--select select {
  padding: 1rem 1.5rem 0rem 0.5rem;
  background-position: right -1rem top 0.25rem;
}

#engrid.float-labels .en__field--text label.en__field__label,
#engrid.float-labels .en__field--email label.en__field__label,
#engrid.float-labels .en__field--telephone label.en__field__label,
#engrid.float-labels .en__field--textarea label.en__field__label,
#engrid.float-labels .en__field--select label.en__field__label {
  /* z-index: -1; */
  position: absolute;
  transform-origin: top left;
  transform: translate(0.5rem, 4px) scale(1);
  opacity: 0.5;
  transition: all 0.15s ease-in-out;
  cursor: text;
}

#engrid.float-labels .en__field--text.has-value label.en__field__label,
#engrid.float-labels .en__field--text.has-focus label.en__field__label,
#engrid.float-labels .en__field--email.has-value label.en__field__label,
#engrid.float-labels .en__field--email.has-focus label.en__field__label,
#engrid.float-labels .en__field--telephone.has-value label.en__field__label,
#engrid.float-labels .en__field--telephone.has-focus label.en__field__label,
#engrid.float-labels .en__field--textarea.has-value label.en__field__label,
#engrid.float-labels .en__field--textarea.has-focus label.en__field__label,
#engrid.float-labels .en__field--select label.en__field__label {
  transform: translate(0.5rem, 0px) scale(0.7);
}

#engrid.float-labels .en__field--text.en__field--validationFailed label,
#engrid.float-labels .en__field--email.en__field--validationFailed label,
#engrid.float-labels .en__field--telephone.en__field--validationFailed label,
#engrid.float-labels .en__field--number.en__field--validationFailed label,
#engrid.float-labels .en__field--textarea.en__field--validationFailed label,
#engrid.float-labels .en__field--select.en__field--validationFailed label {
  opacity: 1;
}

#engrid.float-labels
.en__field--text.en__field--validationNeeded
.en__field__error,
#engrid.float-labels
.en__field--email.en__field--validationNeeded
.en__field__error,
#engrid.float-labels
.en__field--telephone.en__field--validationNeeded
.en__field__error,
#engrid.float-labels
.en__field--textarea.en__field--validationNeeded
.en__field__error,
#engrid.float-labels
.en__field--select.en__field--validationNeeded
.en__field__error {
  border-top-right-radius: 0px;
  border-top-left-radius: 0px;
}

#engrid.float-labels .en__field--text.en__field--validationNeeded input,
#engrid.float-labels .en__field--email.en__field--validationNeeded input,
#engrid.float-labels .en__field--telephone.en__field--validationNeeded input,
#engrid.float-labels .en__field--textarea.en__field--validationNeeded textarea,
#engrid.float-labels .en__field--select.en__field--validationNeeded select {
  border-bottom-right-radius: 0px;
  border-bottom-left-radius: 0px;
}

#endgrid:not(.legacy).float-labels div:not(.manual-form-layout) .en__field--country {
  top: 0.1rem;
}

#endgrid:not(.legacy).float-labels div:not(.manual-form-layout) #endgrid:not(.legacy) .en__field--country #en__field_supporter_country {
  padding: 0.5rem 1.5rem 0.5rem 0.5rem;
  background-position: right -1rem top 0.55rem;
}

.float-labels .en__field--ccexpire .en__field__label {
  display: none;
}

.en__component--contactblock,
.en__contact__detail {
  padding: initial;
}

.en__contactDetails__select {
  margin-left: 0;
}

/* EN sets background of the contact block to white making it not ideal for non-white backgrounds. This resets it to an initial state "transparent". */
.en__component--contactblock,
.en__contact__detail,
.en__contact__toggle,
.en__contact--open .en__contact__toggle {
  background-color: initial;
}

#en__field_transaction_ccnumber {
  background-size: contain;
  background-repeat: no-repeat;
  background-position-x: calc(100% - 0.5rem);
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEwAAABMCAYAAADHl1ErAAAACXBIWXMAABYlAAAWJQFJUiTwAAAB8ElEQVR4nO2c4W3CMBBGz1H/NyNkAzoCo2SDrkI3YJSOABt0g9IJXBnOqUkMyifUqkrek04RlvMjT2c7sc6EGKPBfBpcaSBMBGEiCBNBmAjCRBAmgjARhIkgTARhIggTQZhK2q0Yh5l1ZrYzs0PqsrI4+LN3VTeThkvntUm6Fbuxn2E/LITQmtm7mW08Sb/MbO9tpxhjui6WEMLWzJKDdO3N7Nmf9ZjaYoyn8y8X1o6GXxLV1lJyDeE+9oWPQ/ZRG4b9WkVVpqe+8LLLo7ErM6t248qllZnWBc+uV5+zumGsQjm3f/ic9tb4JGeeXcga4U723rptilVx0avgg2Q3m/JNn+y6zeAm+GSWUi/c7L5yfB77RJhACOHs6WnuLfmGpTI3YditEEGYCMJEECaCMJHZqySvHRfIMBGEiSBMBGEiCBNBmAjCRBAmgjARhIkgTGT2t+R/59EdYXZcfwmEiSBMBGEiCBNZzCr5VzvCZJjIIMxrPKFC6abMsHbaFcZuGq8StqKwDqZkN8emKBbrvawHCtxJ7y1nVxQF34lxUXBupOy8EtWy88jBhknUDjbkPhyd+Xn2l9lHZ8rgcNZVTA5nTYRFjv/dPf7HvzuJ8C0pgjARhIkgTARhIggTQZgIwkQQJoIwEYSJIEwEYQpm9g2Ro5zhLcuLBwAAAABJRU5ErkJggg==);
}

#en__field_transaction_ccnumber.live-card-type-amex {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEwAAABMCAYAAADHl1ErAAAACXBIWXMAABYlAAAWJQFJUiTwAAADN0lEQVR4nO2c4W3bMBBGj0b/2xtUG8Qb1CNkgygTtCN4BHWCqht0hHQDZwNvUGUCFrSP6uV4VH2SURT294CDIYoSpJcjLZ+khBgjgctZwZUPCHMCYU4gzAmEOYEwJxDmBMKcQJgTCHMCYU4gzAmEeUnVCh1E1BBRR0SH1OXO4sDn3phuioZz53uTVItO+xnrYSGEDRG9ENEDJ+kbEfXcNsQY0+fNEkLYEVFykD5bIlrzub6mthjjcFpiYRs1/JKojZWS9xDsoxc+DtmHNQzbexVlTE+t8NLl0djIzLI2vHNpMtOawNn1meesZhyrQM7tR57Tvq54kiPOLshSsJOeW3cr8a1409+CC8luHuSVPrKrzugm8GSWUi9Uu985PI/9gjAHIYSTJ/z4dgJhTiDMCYQ5gTAnEOYEwpxcRVi6sAshDOlaRUQn1u/UuhR7Yz+t7jex/VT0ar9bdXyH4iQcxPN1a1nacJRA9kaJdxiLbucf+MV6Yz9H3W9iex36/kPL2275WIpioPMcT9t/uEaGcaEt88alkDW3d0XvM+uUUTHGnrPgkYg+Fr1KflYKBT3/4Z54+VsIIdX6vlTLzTNZlGGqKnngA8zLx79kyFHs58VYb2VYz8s6cjb31n7mZpbOMLqCMHmiLdfDB9UmT/hFDT29fpDDyxBWi12070/kfW6t4/cKWzTp852WT6IpZdcP1a2lEjnh79Vy97+XmmZn2ET669irDNNZKGMjs9bIsOqQrGTXVbJscYbxhPpUrLB5l2U86VpfBt8vmJAbQ9aO2/V91Wf+JJ74e65tLWJWhumsMdY/Gn/lsW8lyxo9LxoZVot/cllBC4QN+uCMPsV1lZSrhnQv2ucIK2SJ/RXSrOOdirwtKq4XgorrTCDMCYQ5gTAnEOYEwpxAmBMIczIK48oDMJBuZIYt/lF6w4xuVly2JfFgHSjJbl5Xoj7eXqP0cWuwk1yeOrnCQ8EToR8Kzo147NwI87HzaN84wIsN6sWGvA6vzvw59+3Fr84ou3g5Sw3Dd34qKYnX/yqv/+G/OznBb0knEOYEwpxAmBMIcwJhTiDMCYQ5gTAnEOYEwpxAmBMI80BEvwGtRvGyYNudeQAAAABJRU5ErkJggg==);
}

#en__field_transaction_ccnumber.live-card-type-discover {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEwAAABMCAYAAADHl1ErAAAACXBIWXMAABYlAAAWJQFJUiTwAAAD2ElEQVR4nO2c7XGbQBCGdzX5bzoIHZgOQgkqgVQQl0AqiNwB7kCuIHIHuAM6iFLBZU7eU5blDmtt/7Led+YG67gvHm6XYwFzCIGgy7UBK58AzCkAcwrAnAIwpwDMKQBzCsCcAjCnAMwpAHMKwJwCMK9itMImIqqJaEdEYyxyZWmUY6+zbBYZL4WvDVIp7SyfczyMmSsiOhDRrUzSv0Q0SN4xhBC3n1bM3BJRZBC3HRHdyLE+x7wQwvH0S4BVxvwiqCo3Ja8hCY9B8RgTj5wZdtcKKuOeOsVll6yx1jMrV/HKoemZVrPMrh/is+qzrULat0/i0+434uRIZhdgGQmTQXLbjboqfuqr4DuV2NzqlT5mV1lnNizOLE49Lha/cokf+wNgDjHziRNuvp0CMKcAzCkAcwrAnAIwpwDMqS9rxSWo1qqsFEwcVZlawiCHFGQ09Y72PpWZGyLaqv37EML0St9DKsPMveTtTLupzkGiMPXioP7fF3YqLx7PpI9rTeFl3ZoNbfSF0O3hHFB7GWD8ow/L2NoibGTCJcHG4SR4t8/s130ccrE7VW+rytjUqjEXx5lhkcpcBOxOhW7TQA4FYEHCIekMDwpur/ZvBU4nB9qsAJ+BVYG9vRpriutNBmprUqXGPKh9k+Q1BRYuYK3JH2l5tnoZTBAzazPtHVMgrtBfnQFk05RrS59cDazQz+wkW8CFOqdxvNXp72Xb6EzxJw8SbPvNzBMzx9mZfF3Mf7L+Sinnc6y+yu/ki5Iv7Ew+Sb9BJ9NWx8yHOE4i+haDqK897Pnwq2QIIQ78uzxtiQf3i5l3i4LvV2rzTpx97OshEwR9MsmqlrqPF54wn0maJ0xNbnqrslvjV8IrfuJikzRmNNp2LzVJ1edx7UmZ1ySbeBbFvEaJ0j7mLsPMPMTLvsSQ0hlLJvhTtntm3kYzjW0y8zHWEVO9X/Q+V69+JfOL43kujKc1aTaLVJ83atau6i3LiiG3rJC/j5ny249cVhQuJHaJUVpW9Jkre6XaWXX6qwFEORvWrifttGUmNSlf6qQlA+kFp6qTTLl6y8I101ZlnXXKz8yUSfps9LGo8lOhnxOnVWDQEhjuJZ0CMKcAzCkAcwrAnAIwpwDMKQBz6gxMVtZQRpqNnmG52wjIsNlI3IrMfRs0V2LzvFEvi3VyIw0pCZMUzT2xwkvBK8m+FJwy8dp5JmVfOw/LsHPAhw3LDxvSPnw6Mw+CXvbpjKGLj7OMGc74FKYkPv8rPGzGf3dyCveSTgGYUwDmFIA5BWBOAZhTAOYUgDkFYE4BmFMA5hSAOQVgHhHRP6I5XnrWAd2fAAAAAElFTkSuQmCC);
}

#en__field_transaction_ccnumber.live-card-type-mastercard {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEwAAABMCAYAAADHl1ErAAAACXBIWXMAABYlAAAWJQFJUiTwAAAC20lEQVR4nO2c4VHjMBBGV577jzvAVwEpISWkBHfAlUAJuQ5CB5SQEkwF0AGhgr1RWPmEJBuvI2XA/t7MTgbFSqw3sixtLAwzE5hOBVc6IEwJhCmBMCUQpgTClECYEghTAmFKIEwJhCmBMCUQpsVmK8IgooaI9kTU2UNWFp20vUm6iQo+Dl6bpKHYh376fJgxpiaiIxHdSSd9J6KDlJ2Y2b4uFmPMloisA/vaEtGNtPXZljHz6fyXCKuDy8+KqlNdcg0hPg6ej875SF2G7VpFJYan1vOyd1dj4/esVMWVS/N7WmOkd93LmNX01yrwx/ZXGdP+VjLIkfQuyAoQJwcp3VbeXXHRd8ELcW7u/Jk+etcwvRsjg5ntembw8JUj49gbhCkwxpw9YfGtBMKU/Lrml8lYsJPJsk/HzE9Rhc91bb1NUGznR0/Xng7xxxAWz3IzzpabYMacCtvoh0TdB3kvVedqa1/vu8oKkx71VYNdnFweSnqTJh9n6+5S5/BjhImsVOOG4o/XI6dKDqOItOLCZjT66NW9JNN7GsqWfndhX41ZyZ4RpFTmRvasizuPIhNXY4ztXS/RG8O8M3Mtde2d73bwyOn8ZubXjG0qOnHdRSXjHOWkNplkzTmHSZQSto1Kxulm1hsj52f1lBJWRyVl66XI+Vk9WBopKSVs7lIl5xKnyHKplDBt9tatEXNmfYtkkDGtmEjRaYWc6GP0xjA3ko0gWWxfymNOWVH7sDT6BksjxuL7ImlI7yi/bDEJxKv+avSTU9TuLomf2SaCn9lmAmFKIExJL0ye8QQJfDd+DyuSP1oIvZtKnhKmUhnKheDcPFdeGqSVeRLwECetlJxd4aHgkQgfCnaFeOw8EcnHzhkbG6JIbWxwx2DrzP+2byZvnfEDm7M+RbQ5KxLG2P43uv0P/91JCdaSSiBMCYQpgTAlEKYEwpRAmBIIUwJhSiBMCYQpgTAlEKaBiP4BgA2Na6o553cAAAAASUVORK5CYII=);
}

#en__field_transaction_ccnumber.live-card-type-visa {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEwAAABMCAYAAADHl1ErAAAACXBIWXMAABYlAAAWJQFJUiTwAAADv0lEQVR4nO2c7XHaQBCG95j8Nx1YHZgOQgehBFJBKMElKB2QDiiBdCB3gCsIruAyJ+/Jy2oPWCwHB73vzI3hdFpOD7t7H0IOMUaCztcErHwCMKcAzCkAcwrAnAIwpwDMKQBzCsCcAjCnAMwpAHMKwLxKuxW6EFFFRDURNanJyErD116ZbHoVr43HBqlUas2n2w8LIUyJaEtED+ykL0S05rp9jDH9vVmFEOZElBikv0siuuNrfUp1McZ9+46BTVX4JVBTyyXHUJjHWvBoMg8rDJdjBWWkp6XgUudorKRnWSeOHJr0tCqwd/3gnFV1sQrJ3L7jnPZzwkmO2LsAS4mZrLl2PhGj4k2Pgu9UZvMgZ/rwrrI6NoGTWXK9UGw+cnEe+wNgDoUQWk5YfDsFYE4BmFMA5tSX/6WjvJuQ1Vxzkh1fB8n+OupYIaLZkQ1Gc7eDiB5Vu5rtRGs9y6uQrWE/MjRt3+pTrx8XriljN6O4BJgwVDGIveroxmi7U23SuStVtzJ2CqyyVbanRh8i72X1+n01YMobDjqrji8soGo3ILKdyrhwXWplX4PP5dHq79WBsVEdDpU4tlHHFtY5hdDdqM9J8GcnvNc8973Ahh4lN+p9yikpYSeP+Sbqn2OMue2DqH/qWWTx8qRVOjfG2IhjySvvRfMX3YehNDQwveORO7tU9TX1Rz55vh4BE+wmhKDtZK3E6+dsn3UvYQ+hwUJSxXqXmI1wmRZCbxntewwHNuXIZ+S72sinC6uvnyEkk36L15URLr/EHEqHSxtmfHyubGV9VZ6svW6d7QgNGpZDe1gvYav3M9FWet6+YG9e8LYZH5dTiaZge2vZvvooGQvTi8IF6VA6elFGWM/PmKsd/TI+RUieuOErk7EOk/a8lNhDCCseWYneRlmtvRGOJd0VbFykQT2Mvw1rObNXbXTo5nmZDmGr7Iwl1anyrsT/kUmfjOkFiTsvWXpKkRP1qQT9whPXlar/nnaNZTnxeRfrIzzM+vYr1UYm652oL3lYvt1VFdaNvUW2GiyO5shzPezT7umHEGYMhjic9VThX/en5YSbIGcKN0EuFIA5BWBOAZhTAOZUB8zYm4IMNtLDBt1kuzF1bCZiWxgeVlZm8zQR677l0Fu5tyBmkndFWlb4UfCRon8UnCvxs3OjmD87j/ZNB/NW/4hA9R5syMfw6Mzbtc/OfnRG0cXDWSoMD/gUXBKP/xUe/8N/d3IKa0mnAMwpAHMKwJwCMKcAzCkAcwrAnAIwpwDMKQBzCsCcAjCPiOgvXtk55dl58ogAAAAASUVORK5CYII=);
}

#en__field_transaction_ccnumber.live-card-type-invalid {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEwAAABMCAYAAAGwkGG9AAAACXBIWXMAABYlAAAWJQFJUiTwAAAGAGlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxNDUgNzkuMTYzNDk5LCAyMDE4LzA4LzEzLTE2OjQwOjIyICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgeG1sbnM6cGhvdG9zaG9wPSJodHRwOi8vbnMuYWRvYmUuY29tL3Bob3Rvc2hvcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RFdnQ9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZUV2ZW50IyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOSAoTWFjaW50b3NoKSIgeG1wOkNyZWF0ZURhdGU9IjIwMTktMDMtMTdUMDc6MTk6MTEtMDQ6MDAiIHhtcDpNb2RpZnlEYXRlPSIyMDE5LTExLTE0VDE3OjE0OjA3LTA1OjAwIiB4bXA6TWV0YWRhdGFEYXRlPSIyMDE5LTExLTE0VDE3OjE0OjA3LTA1OjAwIiBkYzpmb3JtYXQ9ImltYWdlL3BuZyIgcGhvdG9zaG9wOkNvbG9yTW9kZT0iMyIgcGhvdG9zaG9wOklDQ1Byb2ZpbGU9InNSR0IgSUVDNjE5NjYtMi4xIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOmI3ZjM5M2JmLWIxOTgtNDE4NC1hYTc0LTVhZWQ2YThkZmQyOCIgeG1wTU06RG9jdW1lbnRJRD0iYWRvYmU6ZG9jaWQ6cGhvdG9zaG9wOjI3OGU1YjAwLTE1MmEtYWQ0OC05MWRlLTQxODRjMjljMTY2YiIgeG1wTU06T3JpZ2luYWxEb2N1bWVudElEPSJ4bXAuZGlkOjEzNjgxYzU5LWM0MzgtNDhmYi05Mjk1LWM4M2U0MjZhMmIwNyI+IDx4bXBNTTpIaXN0b3J5PiA8cmRmOlNlcT4gPHJkZjpsaSBzdEV2dDphY3Rpb249ImNyZWF0ZWQiIHN0RXZ0Omluc3RhbmNlSUQ9InhtcC5paWQ6MTM2ODFjNTktYzQzOC00OGZiLTkyOTUtYzgzZTQyNmEyYjA3IiBzdEV2dDp3aGVuPSIyMDE5LTAzLTE3VDA3OjE5OjExLTA0OjAwIiBzdEV2dDpzb2Z0d2FyZUFnZW50PSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOSAoTWFjaW50b3NoKSIvPiA8cmRmOmxpIHN0RXZ0OmFjdGlvbj0ic2F2ZWQiIHN0RXZ0Omluc3RhbmNlSUQ9InhtcC5paWQ6YjdmMzkzYmYtYjE5OC00MTg0LWFhNzQtNWFlZDZhOGRmZDI4IiBzdEV2dDp3aGVuPSIyMDE5LTExLTE0VDE3OjE0OjA3LTA1OjAwIiBzdEV2dDpzb2Z0d2FyZUFnZW50PSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOSAoTWFjaW50b3NoKSIgc3RFdnQ6Y2hhbmdlZD0iLyIvPiA8L3JkZjpTZXE+IDwveG1wTU06SGlzdG9yeT4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz6n87dMAAADzElEQVR4nO2cTXKiQBiGHyj3YXYskxMkB5AqZy0Lc4IwJ4hH0Rs4JxgX7GMVF4gnmOxkF+cEzKIbJUSRDxE6sZ8qKmra5uXla/z6B5wsy6iDW6sU4GzGQ4AJsDxUwI8T0jB4HQAZ4FTV5sfJQ+1dt1YwS8MgAxgAdxUFHX0wC6d9H+vUWKs2ZzMenjJ65p4ogB8n01q7O7tQpjcGFYV2Wlv0qe45rEPt81wHZzMezoBp0wr8OAEgDQOvHA6NjtmPEwc+n6LKEKpSBs09ywNm12wPKavL7gjKyhxgVtybZEvDYKeu1TgzN2jNrczZjIce8AZ4DesYAS9+nDiDMyvCj5MV4KRhkLnnVFSm2AKaxsiuNQwOfdgUc0OjyVWj7O3OntYPcyT8jlPaPlT20oos9hnf2dchP06cK7metXqYbdLqUbaJscLy8M+ZAc/9SGENTPw4eYP9tSwDfqGyx2mXaooZFIBOgOauFvUILLoUdAydzT7nMbYs/b9RytdkKyawRYwN/mO/l2enCHUpx1iOsY5dvTBx8DftyUk5GrNVMbZGXfGNYgA8AK8oa38A277EpGGwAJ5az+7a5OpbpRhjhdkYk2KFSbHCpBgrrNh9u0Xl/vc9aZn7cTLN3+SOvQJ/gRXwk8+DOhfbdK/oEYj0+LUHKruYoVzqLM8v48fJEvDSMIiAd8DJZzZ6S3cOdHi3wCLPYLcd66kiAv6Y2CpXcPxy0VtP3I+TbZWw3jFWmB0ikGKFSbHCpBg72nP1jokxenzMKNIwGIGBwlDr5da5sEV/Oj7xDEwGqLT6XX8Y9aVGd0LegbUfJ2/F7psJwz67LpwdhpJihUmxwqQYK8zYy4WpGHsmTcUaJsQaJsQaJsQaJsQaJqS8OBH6XaBoGh9m3GBvmIeaicinAn+jFk9uu1LWF4cGc3SnewY86Y/WwMiPk62zGQ9vUVOUoIyKLi3SJI6NfuXk65/02zuX/QLTOVdmVh38OIlQ3gAsXfbNcNmHoC/CUv+9L/5KrrrX8TXQt10BshH0b9lLT8MA2N/WeQqbhwmxhgmRNMneFiFdklNpRRkbYUKsYUKsYUKsYUKsYUK6WvrRBY0Sa5u4XhhrmJDv1CQbJdbnJK6TJju8BtIwmOSvXfaDYwtafGDMd0EPVy/027mLGrufAzeoxWNRD7qMpHADzQ16QqQ4a+TxcSLkH8rZFWoyZNWRzk7Rj/XzUPdRe6hn70Qok6AwAQKHp9lA3VA21V/u66ayvlijgmOWP4+kiF3uJMTmYUKsYUKsYUKsYUKsYUKsYUL+AyAeaTYde17aAAAAAElFTkSuQmCC);
}

#enModal {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 2147483645;
  background-color: rgba(0, 0, 0, 0.85);
  width: 100vw;
  height: 100%;
  transition: top 0.4s ease-in-out;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

#enModal.exitModal {
  background-color: rgba(231, 75, 60, 0.85);
  color: #ffffff;
}

#enModal.upsellModal .button-close::before, #enModal.upsellModal .button-close::after {
  background-color: white;
}

#enModal.exitModal .button-close::before, #enModal.exitModal .button-close::after {
  background-color: black;
}

#enModal.is-hidden {
  top: -100vh;
}

#enModal .button-close {
  position: absolute;
  right: 32px;
  top: 32px;
  width: 24px;
  height: 24px;
  opacity: 0.6;
  transition: 0.3s opacity ease-in-out;
}

@media (max-width: 600px) {
  #enModal .button-close {
    opacity: 1;
  }
}

#enModal .button-close:hover {
  opacity: 1;
}

#enModal .button-close::before, #enModal .button-close::after {
  position: absolute;
  left: 15px;
  content: " ";
  height: 24px;
  width: 3px;
  /* This value is the OPPOSITE color of our background */
}

#enModal .button-close::before {
  transform: rotate(45deg);
}

#enModal .button-close::after {
  transform: rotate(-45deg);
}

#enModal .enModal-container {
  max-width: 820px;
  border-radius: 0px;
  background-color: #ffffff;
  color: #000000;
  z-index: 1;
  position: relative;
}

#enModal .enModal-container h1 {
  font-size: 48px;
  font-weight: 900 !important;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: -1px;
  text-transform: uppercase;
}

#enModal .enModal-container .highlight {
  background-color: #f9f003;
  color: #343432;
  padding: 0.15em;
  display: inline-block;
}

#enModal .enModal-container .highlight::before {
  margin-bottom: -0.41rem;
  content: "";
  display: block;
  height: 0;
  width: 0;
}

#enModal .enModal-container .highlight::after {
  margin-top: -0.37em;
  content: "";
  display: block;
  height: 0;
  width: 0;
}

#enModal .enModal-container .title {
  color: #000000;
}

#enModal .enModal-container .accent {
  color: #f1700b;
}

#enModal .enModal-container .cta {
  cursor: pointer;
  transition: 0.3s background-color ease-in-out, 0.3s color ease-in-out;
}

#enModal .enModal-container .img {
  position: absolute;
  bottom: 0px;
  right: 0;
  z-index: -1;
}

@media (max-width: 600px) {
  #enModal .enModal-container .img {
    bottom: -80px;
    max-height: 250px;
  }
}

#enModal .enModal-container .cta-groups {
  display: flex;
}

#enModal .enModal-container .cta-groups.column {
  flex-direction: column;
}

#enModal .enModal-container .cta-groups.row {
  margin-top: 2rem;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

#enModal .enModal-container .cta-groups.center {
  align-items: center;
  justify-content: center;
}

#enModal .enModal-container .cta-groups .group {
  flex-grow: 1;
  display: flex;
}

#enModal.exitModal #enModalContent {
  padding: 4rem;
}

#enModal.exitModal #enModalContent .cta-groups .group {
  flex-direction: row;
  margin-left: 1rem;
  margin-right: 1rem;
}

#enModal.exitModal #enModalContent .cta-groups .group.primary {
  justify-content: flex-end;
}

#enModal.exitModal #enModalContent .cta-groups .group.primary button {
  margin: 0;
  padding: 18px;
}

#enModal.exitModal #enModalContent .cta-groups .group.secondary {
  justify-content: flex-start;
  text-align: center;
}

#enModal.upsellModal #enModalContent {
  display: flex;
  flex-direction: row;
}

#enModal.upsellModal #enModalContent .modal-left-column {
  flex-basis: 50%;
  background-size: cover;
  background-position: left center;
}

#enModal.upsellModal #enModalContent .modal-right-column {
  background-color: #2e2e2c;
  flex-basis: 50%;
  padding: calc(0.8652rem * 2.5);
  text-align: center;
}

#enModal.upsellModal #enModalContent .modal-right-column .cta-groups .group {
  flex-direction: column;
}

#enModal.upsellModal #enModalContent .modal-right-column .cta-groups .group.primary {
  margin-bottom: 50px;
}

#enModal.upsellModal #enModalContent .modal-right-column .cta-groups .group.primary button {
  padding: 18px;
}

@media (max-width: 600px) {
  #enModal.upsellModal #enModalContent {
    flex-direction: column;
  }
  #enModal.upsellModal #enModalContent .modal-left-column {
    display: none;
  }
}

#enModal .cta.primary {
  width: 100%;
  max-width: 230px;
}

#enModal .dark-background h1,
#enModal .dark-background p,
#enModal .dark-background a {
  color: #ffffff;
}

/* Utilizes the standard NeverBounce Implimentation but styles it to match the client brand */
/* Note, we add "async" to the javascript file call */
/* @TODO Check support for "fancyerrors" and float labels, as well as input fields with rounded borders
/*
    <script type="text/javascript">
        _NBSettings = {
            apiKey: 'CLIENT-API-KEY'
        };
    </script>
    <script async type="text/javascript" src="https://cdn.neverbounce.com/widget/dist/NeverBounce.js"></script>
*/
#engrid div[id^=nb-field-] {
  max-width: 100% !important;
  width: 100% !important;
}

#engrid div[id^=nb-field-] div.nb-feedback {
  display: block !important;
  margin-top: 0px !important;
  max-width: 100% !important;
  width: 100% !important;
  position: absolute !important;
  left: -99999px !important;
  padding: .25rem .5rem !important;
  font-size: 1.125em !important;
  font-size: .75rem !important;
  font-family: HarmoniaSansStd !important;
  font-weight: 400 !important;
  font-stretch: normal !important;
  font-style: normal !important;
  line-height: 1.44 !important;
  letter-spacing: normal !important;
  transition-timing-function: cubic-bezier(0, 1, 0, 1) !important;
}

#engrid div[id^=nb-field-] div.nb-feedback .nb-poweredby {
  display: none !important;
}

#engrid div[id^=nb-field-].nb-error input {
  border-color: #e74b3c !important;
  background-color: #fef6f5 !important;
}

#engrid div[id^=nb-field-].nb-error .nb-feedback {
  position: initial !important;
  border: none !important;
  background-color: #e74b3c !important;
  color: #ffffff !important;
}

#engrid div[id^=nb-field-].nb-error .nb-feedback .nb-icon-cancel {
  display: none !important;
}

#engrid div[id^=nb-field-].nb-success input {
  border-color: initial !important;
}

/* Make sure that background colors are not hard coded */
.en__twitterTarget,
.en__tweetBackgroundText,
.en__tweet,
.en__tweetDisabled,
.en__tweetButton,
.en__tweetContact {
  background-color: initial;
}

.en__contacts {
  flex-direction: column;
}

.en__tweetContact {
  margin: 0 0 1rem 0;
  padding: 0;
  width: initial;
}

.en__twitterTarget__image {
  margin-left: 0;
  margin-right: 1rem;
}

.en__twitterTarget__details span {
  display: block;
}

.en__twitterTarget__details br {
  display: none;
}

.en__tweetButton__send,
.en__tweetButton__sent {
  background-color: #f1700b;
  border-radius: 0;
}

/* CLIENT STYLING AND LAYOUTS */
@font-face {
  font-family: "HarmoniaSansStd";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local("HarmoniaSansStd"), local("HarmoniaSansStd-Regular"), url("https://acb0a5d73b67fccd4bbe-c2d8138f0ea10a18dd4c43ec3aa4240a.ssl.cf5.rackcdn.com/10042/HarmoniaSansStd-Regular.otf") format("opentype");
}

@font-face {
  font-family: "HarmoniaSansStd";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: local("HarmoniaSansStd Medium"), local("HarmoniaSansStd-Medium"), url("https://acb0a5d73b67fccd4bbe-c2d8138f0ea10a18dd4c43ec3aa4240a.ssl.cf5.rackcdn.com/10042/HarmoniaSansStd-SemiBd.otf") format("opentype");
}

@font-face {
  font-family: "HarmoniaSansStd";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: local("HarmoniaSansStd Bold"), local("HarmoniaSansStd-Bold"), url("https://acb0a5d73b67fccd4bbe-c2d8138f0ea10a18dd4c43ec3aa4240a.ssl.cf5.rackcdn.com/10042/HarmoniaSansStd-Bold.otf") format("opentype");
}

@font-face {
  font-family: "HarmoniaSansStd";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: local("HarmoniaSansStd Black"), local("HarmoniaSansStd-Black"), url("https://acb0a5d73b67fccd4bbe-c2d8138f0ea10a18dd4c43ec3aa4240a.ssl.cf5.rackcdn.com/10042/HarmoniaSansStd-Black.otf") format("opentype");
}

body {
  background-color: #ffffff;
}

body,
body#en__pagebuilder {
  font-family: HarmoniaSansStd;
  font-size: 1.125em;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.44;
  letter-spacing: normal;
}

body:not(#en__pagebuilder) {
  /* We need to set labels for error messages, but don't want them visually displayed outside page builder */
  /* en__field--153853 is In Memoriam */
}

body:not(#en__pagebuilder) .en__field--153853 > label,
body:not(#en__pagebuilder) .en__field--recurrpay > label,
body:not(#en__pagebuilder) .en__field--donationAmt > label {
  display: none;
}

/* RAN Named their EMAIl Opt-in `email` which causes it to get the generated class `en__field--email` that matches the auto assigned class `en__field--email` given to EMAIL type fields. This fixes that collision of styles. https://d.pr/i/ziiG76 */
.en__field--102600 label {
  position: relative !important;
  transform: initial !important;
  opacity: 1 !important;
}

/* Legacy Template Support */
.legacy .en__component--row--1,
.legacy .en__component--row--2 {
  display: initial !important;
}

h1 {
  font-family: HarmoniaSansStd;
  font-size: calc(0.05552em * 48);
  font-weight: 900;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: -1px;
  text-align: center;
  margin-bottom: 0;
  text-transform: uppercase;
}

h2 {
  font-family: HarmoniaSansStd;
  font-size: calc(0.05552em * 24);
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: normal;
}

h3 {
  font-family: HarmoniaSansStd;
  font-size: calc(0.05552em * 16);
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: normal;
}

label.en__field__label {
  font-family: HarmoniaSansStd;
  font-size: calc(0.05552em * 12);
  font-weight: 500;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: 1.68px;
  text-transform: uppercase;
}

.en__field__label--item {
  font-family: HarmoniaSansStd;
  font-size: calc(0.05552em * 18);
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.44;
  letter-spacing: normal;
}

.en__field--donationAmt .en__field__label--item,
.en__field--donationAmt .en__field__item--other::before,
.en__field--donationAmt .en__field__item--other input {
  font-family: HarmoniaSansStd;
  font-size: calc(0.05552em * 24);
  font-weight: 900;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: normal;
}

.en__field--recurrpay label.en__field__label {
  font-size: calc(0.05552em * 24);
}

.give-by-select .en__field--radio label {
  justify-content: center;
  margin-top: 0.83rem;
  display: block;
  width: 100%;
  font-size: calc(0.05552em * 24);
  font-weight: 900;
  line-height: 1;
  padding: 18px 0;
}

.highlight {
  background-color: #f9f003;
  color: #343432;
  padding: 0.5rem;
  font-weight: 500;
  display: inline-block;
}

.highlight.big {
  font-size: 120%;
}

.en__field--donationAmt input[type="text"].en__field__input--other,
.en__field--donationAmt input[type="number"].en__field__input--other,
.en__field--donationAmt input[type="tel"].en__field__input--other {
  padding-left: 33%;
  min-height: 64px;
}

.en__field--donationAmt .en__field__item--other::before {
  display: block;
  content: "$";
  position: relative;
  height: 0;
  left: calc((100% / 3) - 1rem);
  top: 1.1rem;
  color: #ffffff;
  width: 0;
}

.en__field--monthly_upsell_checkbox
.en__field__input--checkbox
+ .en__field__label {
  display: inline-block !important;
}

.en__field--monthly_upsell_checkbox
.en__field__input--checkbox
+ .en__field__label::before {
  margin-top: 0.25rem;
}

.en__field--recurrpay label.en__field__label {
  font-weight: 900 !important;
  text-transform: none !important;
}

.en__field--recurrpay label.en__field__label::before {
  top: 3px;
}

.en__field--recurrpay .en__field--recurrpay > label {
  display: none;
}

.monthly-gift-upsell-tooltip {
  text-align: center;
}

.monthly-gift-upsell-tooltip .highlight:after {
  bottom: -12px;
  left: 60%;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  border: 20px solid transparent;
  border-top-color: #f9f003;
  margin-left: 30px;
  z-index: 1;
}

.en__field__input--checkbox + .en__field__label,
.en__contactDetails__rows {
  font-size: calc(0.05552em * 18);
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0.4px;
  display: inline-block;
}

.en__field__input--checkbox + .en__field__label .highlight,
.en__contactDetails__rows .highlight {
  font-weight: 700;
  margin-top: -0.5rem;
  margin-left: -0.2rem;
}

.en__field--donationAmt .en__field__element--radio {
  justify-content: center;
  flex-wrap: wrap;
  justify-items: center;
  margin: 0.9375rem auto;
}

.en__field--donationAmt .en__field__element--radio .en__field__item,
.en__component--formblock
.en__field--donationAmt
div.en__field__item:first-of-type,
.en__component--formblock
.en__field--donationAmt
div.en__field__item:last-of-type {
  margin: 0 0.25rem 1rem 0.25rem !important;
  margin-top: 0 !important;
  margin-right: 0.25rem !important;
  margin-bottom: 1rem !important;
  margin-left: 0.25rem !important;
}

.en__field--donationAmt .en__field__element--radio .en__field__item {
  width: calc((100% / 3) - (1rem / 2));
}

.en__field--donationAmt .en__field__element--radio .en__field__item label {
  width: 100%;
  display: flex;
  justify-content: center;
  height: 64px;
  align-items: center;
}

.content-preFooter {
  background-color: #ffffff;
  background-image: url("https://acb0a5d73b67fccd4bbe-c2d8138f0ea10a18dd4c43ec3aa4240a.ssl.cf5.rackcdn.com/10042/pre-footer-donation-background.png");
  background-position: bottom left;
  background-repeat: no-repeat;
}

.content-preFooter h1 {
  flex-basis: 100%;
  line-height: 1;
  margin-bottom: 60px;
}

.pre-footer-card-wrapper {
  display: flex;
  flex-wrap: wrap;
  width: 90%;
  margin: 0 auto;
  margin-bottom: 260px;
  justify-content: center;
}

.pre-footer-card {
  display: flex;
  flex-direction: column;
  text-align: center;
  width: 100%;
  max-width: 350px;
  padding: 0rem 1rem 2rem 1rem;
}

.pre-footer-card img {
  display: block;
  margin-bottom: 35px;
}

.pre-footer-card .header-wrapper h2 {
  margin: 0;
  font-size: calc(0.05552em * 32);
  font-weight: 900;
  letter-spacing: 1px;
  color: #000000;
  text-transform: uppercase;
  line-height: 1;
  padding: 1rem 1rem 0.5rem 1rem;
}

.pre-footer-card p {
  font-size: calc(0.05552em * 16);
  line-height: 1.58;
  letter-spacing: 0.2px;
  text-align: center;
  color: #000000;
}

.content-footer {
  background-color: #000;
}

.footer-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  padding: 30px 0px;
  flex-wrap: wrap;
}

.footer-wrapper .footer-logo {
  padding: 1rem;
}

.footer-wrapper .footer-logo img {
  width: 100%;
  max-width: 245px;
}

.footer-wrapper .footer-menu {
  padding: 1rem;
}

.footer-wrapper .footer-menu a {
  display: block;
  color: #fff;
  font-size: calc(0.05552em * 16);
  font-weight: bold;
  text-decoration: none;
}

.footer-wrapper .footer-menu a:hover {
  text-decoration: underline;
}

.footer-wrapper .footer-copy {
  padding: 1rem;
  max-width: 452px;
}

.footer-wrapper .footer-copy p {
  font-size: calc(0.05552em * 14);
  font-weight: 400;
  line-height: 1.57;
  letter-spacing: 0.6px;
  color: #ffffff;
}

.footer-wrapper .footer-badges {
  padding: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.footer-wrapper .footer-badges img {
  display: block;
}

.footer-wrapper .footer-badges img:first-of-type {
  margin-right: 30px !important;
}

@media screen and (min-width: 970px) {
  .footer-wrapper .footer-copy p {
    border-left: 1px solid #fff;
    padding-left: 65px;
  }
}

@media screen and (max-width: 497px) {
  .footer-wrapper {
    text-align: center;
  }
}

.give-by-select .en__field--radio .en__field__item {
  flex-grow: 1;
}

.give-by-select .en__field--radio .en__field__item input[type="radio"] + label {
  flex-grow: 1;
  padding: 1rem 0 1rem 2.25rem;
  background-position-x: calc(50% - 25px);
  background-position-y: calc(50% - 2px);
  background-repeat: no-repeat;
  font-size: calc(0.05552em * 18);
  font-weight: bold;
  letter-spacing: 0.4px;
  text-align: center;
  color: #ffffff;
  text-transform: none;
}

.give-by-select .en__field--radio input[value$="ard"] + label {
  background-size: 24px 18px;
  background-image: url("https://acb0a5d73b67fccd4bbe-c2d8138f0ea10a18dd4c43ec3aa4240a.ssl.cf5.rackcdn.com/10042/card.png?v=1572545889000");
}

.give-by-select .en__field--radio input[value$="heck"] + label {
  background-size: 18px 16px;
  background-image: url("https://acb0a5d73b67fccd4bbe-c2d8138f0ea10a18dd4c43ec3aa4240a.ssl.cf5.rackcdn.com/10042/bank.png?v=1572545890000");
}

.give-by-select .en__field--radio input[value$="aypal"] + label {
  background-size: 17px 20px;
  background-image: url("https://acb0a5d73b67fccd4bbe-c2d8138f0ea10a18dd4c43ec3aa4240a.ssl.cf5.rackcdn.com/10042/paypal.png?v=1572545891000");
}

#en__field_supporter_monthly_upsell_checkbox:checked + .en__field__label:after {
  top: 0.25rem;
}

.en__field--donationAmt input.en__field__input--other::-webkit-input-placeholder {
  opacity: 0.7;
}

.en__field--donationAmt input.en__field__input--other::-moz-placeholder {
  opacity: 0.7;
}

.en__field--donationAmt input.en__field__input--other:-ms-input-placeholder {
  opacity: 0.7;
}

.en__field--donationAmt input.en__field__input--other::-ms-input-placeholder {
  opacity: 0.7;
}

.en__field--donationAmt input.en__field__input--other::placeholder {
  opacity: 0.7;
}

.white-font {
  color: #ffffff;
}

/** Hide COLUMNS when viewed publicly and in page builder, but not the page builder pop-up preview. **/
/* prettier-ignore */
.en__component--advrow:not(.show) :not(.pboAdvancedRow__preview) .hide.en__component--column {
  display: none;
}

/** Hide CONTENT when viewed publicly, but not when viewed in page builder. **/
body:not(#en__pagebuilder) .en__component--advrow:not(.show) .hide {
  display: none !important;
}

/*
* ####################################################################################################################
* # ENGRID CLIENT LAYOUT
* # Center Left 1 Column
* ####################################################################################################################
*/
/*
* ##########################################################
* # MOBILE FIRST BREAKPOINT
* ##########################################################
*/
#engrid.layout-centerleft1col {
  /* prettier-ignore */
}

#engrid.layout-centerleft1col .en__component--advrow,
#engrid.layout-centerleft1col .en__component--advrow .pseudo-subgrid {
  /* autoprefixer grid: off */
  grid-template-columns: [pc-start lpc-start] minmax(0px, 1fr) [lpc-end cc-start lcc-start] minmax(15px, 1fr) [lcc-end bc-start lbc-start] minmax(calc(50vw - 15px), 250px) [lbc-end rbc-start] minmax(calc(50vw - 15px), 250px) [rbc-end bc-end rcc-start] minmax(15px, 1fr) [rcc-end cc-end rpc-start] minmax(0px, 1fr) [rpc-end pc-end];
}

body:not(#en__pagebuilder) #engrid.layout-centerleft1col .page-backgroundImage {
  grid-row: page-start / content-footerSpacer-end;
}

/*
* ##########################################################
* # BODY BREAKPOINT
* # Sum of all MIN values of the Body Columns
* ##########################################################
*/
@media screen and (min-width: 600px) {
  #engrid.layout-centerleft1col {
    /* prettier-ignore */
  }
  #engrid.layout-centerleft1col .en__component--advrow,
  #engrid.layout-centerleft1col .en__component--advrow .pseudo-subgrid {
    /* autoprefixer grid: off */
    grid-template-columns: [pc-start lpc-start] minmax(25px, 1fr) [lpc-end cc-start lcc-start] minmax(25px, 25px) [lcc-end bc-start lbc-start] minmax(250px, 340px) [lbc-end rbc-start] minmax(250px, 340px) [rbc-end bc-end rcc-start] minmax(25px, 475px) [rcc-end cc-end rpc-start] minmax(25px, 1fr) [rpc-end pc-end];
  }
}

/*
* ##########################################################
* # CONTENT BREAKPOINT
* # Sum of all MAX values of the Body Columns + 1px
* ##########################################################
*/
/*
* ####################################################################################################################
* # ENGRID CLIENT LAYOUT
* # Center Center 1 Column
* ####################################################################################################################
*/
/*
* ##########################################################
* # MOBILE FIRST BREAKPOINT
* ##########################################################
*/
#engrid.layout-centercenter1col {
  /* prettier-ignore */
}

#engrid.layout-centercenter1col .en__component--advrow,
#engrid.layout-centercenter1col .en__component--advrow .pseudo-subgrid {
  /* autoprefixer grid: off */
  grid-template-columns: [pc-start lpc-start] minmax(0px, 1fr) [lpc-end cc-start lcc-start] minmax(15px, 1fr) [lcc-end bc-start lbc-start] minmax(calc(50vw - 15px), 250px) [lbc-end rbc-start] minmax(calc(50vw - 15px), 250px) [rbc-end bc-end rcc-start] minmax(15px, 1fr) [rcc-end cc-end rpc-start] minmax(0px, 1fr) [rpc-end pc-end];
}

body:not(#en__pagebuilder) #engrid.layout-centercenter1col .page-backgroundImage {
  grid-row: page-start / content-footerSpacer-end;
}

/*
* ##########################################################
* # BODY BREAKPOINT
* # Sum of all MIN values of the Body Columns
* ##########################################################
*/
@media screen and (min-width: 600px) {
  #engrid.layout-centercenter1col {
    /* prettier-ignore */
  }
  #engrid.layout-centercenter1col .en__component--advrow,
  #engrid.layout-centercenter1col .en__component--advrow .pseudo-subgrid {
    /* autoprefixer grid: off */
    grid-template-columns: [pc-start lpc-start] minmax(25px, 1fr) [lpc-end cc-start lcc-start] minmax(25px, 250px) [lcc-end bc-start lbc-start] minmax(250px, 340px) [lbc-end rbc-start] minmax(250px, 340px) [rbc-end bc-end rcc-start] minmax(25px, 250px) [rcc-end cc-end rpc-start] minmax(25px, 1fr) [rpc-end pc-end];
  }
}

/*
* ##########################################################
* # CONTENT BREAKPOINT
* # Sum of all MAX values of the Body Columns + 1px
* ##########################################################
*/
/*
* ####################################################################################################################
* # ENGRID CLIENT LAYOUT
* # Center Center 1 Column Wide
* ####################################################################################################################
*/
/*
* ##########################################################
* # MOBILE FIRST BREAKPOINT
* ##########################################################
*/
#engrid.layout-centercenter1col-wide {
  /* prettier-ignore */
}

#engrid.layout-centercenter1col-wide .en__component--advrow,
#engrid.layout-centercenter1col-wide .en__component--advrow .pseudo-subgrid {
  /* autoprefixer grid: off */
  grid-template-columns: [pc-start lpc-start] minmax(0px, 1fr) [lpc-end cc-start lcc-start] minmax(15px, 1fr) [lcc-end bc-start lbc-start] minmax(calc(50vw - 15px), 250px) [lbc-end rbc-start] minmax(calc(50vw - 15px), 250px) [rbc-end bc-end rcc-start] minmax(15px, 1fr) [rcc-end cc-end rpc-start] minmax(0px, 1fr) [rpc-end pc-end];
}

body:not(#en__pagebuilder) #engrid.layout-centercenter1col-wide .page-backgroundImage {
  grid-row: page-start / content-footerSpacer-end;
}

/*
* ##########################################################
* # BODY BREAKPOINT
* # Sum of all MIN values of the Body Columns
* ##########################################################
*/
@media screen and (min-width: 600px) {
  #engrid.layout-centercenter1col-wide {
    /* prettier-ignore */
  }
  #engrid.layout-centercenter1col-wide .en__component--advrow,
  #engrid.layout-centercenter1col-wide .en__component--advrow .pseudo-subgrid {
    /* autoprefixer grid: off */
    grid-template-columns: [pc-start lpc-start] minmax(25px, 1fr) [lpc-end cc-start lcc-start] minmax(25px, 250px) [lcc-end bc-start lbc-start] minmax(250px, 440px) [lbc-end rbc-start] minmax(250px, 440px) [rbc-end bc-end rcc-start] minmax(25px, 250px) [rcc-end cc-end rpc-start] minmax(25px, 1fr) [rpc-end pc-end];
  }
}

/*
* ##########################################################
* # CONTENT BREAKPOINT
* # Sum of all MAX values of the Body Columns + 1px
* ##########################################################
*/
/*
* ####################################################################################################################
* # ENGRID CLIENT LAYOUT
* # Center Right 1 Column
* ####################################################################################################################
*/
/*
* ##########################################################
* # MOBILE FIRST BREAKPOINT
* ##########################################################
*/
#engrid.layout-centerright1col {
  /* prettier-ignore */
}

#engrid.layout-centerright1col .en__component--advrow,
#engrid.layout-centerright1col .en__component--advrow .pseudo-subgrid {
  /* autoprefixer grid: off */
  grid-template-columns: [pc-start lpc-start] minmax(0px, 1fr) [lpc-end cc-start lcc-start] minmax(15px, 1fr) [lcc-end bc-start lbc-start] minmax(calc(50vw - 15px), 250px) [lbc-end rbc-start] minmax(calc(50vw - 15px), 250px) [rbc-end bc-end rcc-start] minmax(15px, 1fr) [rcc-end cc-end rpc-start] minmax(0px, 1fr) [rpc-end pc-end];
}

body:not(#en__pagebuilder) #engrid.layout-centerright1col .page-backgroundImage {
  grid-row: page-start / content-footerSpacer-end;
}

/*
* ##########################################################
* # BODY BREAKPOINT
* # Sum of all MIN values of the Body Columns
* ##########################################################
*/
@media screen and (min-width: 600px) {
  #engrid.layout-centerright1col {
    /* prettier-ignore */
  }
  #engrid.layout-centerright1col .en__component--advrow,
  #engrid.layout-centerright1col .en__component--advrow .pseudo-subgrid {
    /* autoprefixer grid: off */
    grid-template-columns: [pc-start lpc-start] minmax(25px, 1fr) [lpc-end cc-start lcc-start] minmax(25px, 475px) [lcc-end bc-start lbc-start] minmax(250px, 340px) [lbc-end rbc-start] minmax(250px, 340px) [rbc-end bc-end rcc-start] minmax(25px, 25px) [rcc-end cc-end rpc-start] minmax(25px, 1fr) [rpc-end pc-end];
  }
}

/*
* ##########################################################
* # CONTENT BREAKPOINT
* # Sum of all MAX values of the Body Columns + 1px
* ##########################################################
*/
/*
* ####################################################################################################################
* Layout - Center ANY
* ####################################################################################################################
*/
/*
* ##########################################################
* # ENGRID - Mobile First Styling
* # LAYOUT - Center ANY
* ##########################################################
*/
@media screen and (max-width: 360px) {
  #engrid .monthly-gift-upsell-tooltip .highlight:after {
    display: none;
  }
}

@media screen and (max-width: 400px) {
  #engrid
.give-by-select
.en__field--radio
.en__field__item
input[type="radio"]
+ label {
    background-image: none;
    padding-left: 0;
    padding-right: 0;
  }
  #engrid h1 {
    font-size: calc((0.05552em * 48) * 0.85);
  }
  #engrid h2,
  #engrid .en__field--donationAmt .en__field__label--item,
  #engrid .en__field--donationAmt .en__field__item--other::before,
  #engrid .en__field--donationAmt .en__field__item--other input,
  #engrid .give-by-select .en__field--radio label,
  #engrid .en__field--recurrpay label.en__field__label,
  #engrid .highlight.big {
    font-size: calc((0.05552em * 24) * 0.9);
  }
  body #engrid h3,
  #engrid .pre-footer-card p,
  #engrid .pre-footer-card.footer-wrapper .footer-menu a {
    font-size: calc((0.05552em * 16) * 1);
  }
  #engrid label.en__field__label {
    font-size: calc((0.05552em * 12) * 0.95);
  }
  #engrid
.en__field__label--item
#engrid
.en__field__input--checkbox
+ .en__field__label,
  #engrid .en__contactDetails__rows,
  #engrid
.give-by-select
.en__field--radio
.en__field__item
input[type="radio"]
+ label {
    font-size: calc((0.05552em * 18) * 1);
  }
}

@media screen and (max-width: 599px) {
  body #engrid {
    font-size: 94%;
  }
  #engrid .en__field--donationAmt .en__field__element--radio .en__field__item {
    width: calc(50% - 0.5rem);
  }
}

#engrid h1 {
  margin-top: 5px;
}

#engrid.layout-centerleft1col .page-alert,
#engrid.layout-centerleft1col .content-header,
#engrid.layout-centerleft1col .body-banner,
#engrid.layout-centerleft1col .body-bannerOverlay,
#engrid.layout-centerleft1col .body-side,
#engrid.layout-centerleft1col .body-footerOutside,
#engrid.layout-centerleft1col .page-backgroundImageOverlay,
#engrid.layout-centercenter1col .page-alert,
#engrid.layout-centercenter1col .content-header,
#engrid.layout-centercenter1col .body-banner,
#engrid.layout-centercenter1col .body-bannerOverlay,
#engrid.layout-centercenter1col .body-side,
#engrid.layout-centercenter1col .body-footerOutside,
#engrid.layout-centercenter1col .page-backgroundImageOverlay,
#engrid.layout-centercenter1col-wide .page-alert,
#engrid.layout-centercenter1col-wide .content-header,
#engrid.layout-centercenter1col-wide .body-banner,
#engrid.layout-centercenter1col-wide .body-bannerOverlay,
#engrid.layout-centercenter1col-wide .body-side,
#engrid.layout-centercenter1col-wide .body-footerOutside,
#engrid.layout-centercenter1col-wide .page-backgroundImageOverlay,
#engrid.layout-centerright1col .page-alert,
#engrid.layout-centerright1col .content-header,
#engrid.layout-centerright1col .body-banner,
#engrid.layout-centerright1col .body-bannerOverlay,
#engrid.layout-centerright1col .body-side,
#engrid.layout-centerright1col .body-footerOutside,
#engrid.layout-centerright1col .page-backgroundImageOverlay {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  border: 0;
  padding: 0;
  white-space: nowrap;
  -webkit-clip-path: inset(100%);
  clip-path: inset(100%);
  clip: rect(0 0 0 0);
  overflow: hidden;
}

#engrid.layout-centerleft1col .body-headerOutside,
#engrid.layout-centercenter1col .body-headerOutside,
#engrid.layout-centercenter1col-wide .body-headerOutside,
#engrid.layout-centerright1col .body-headerOutside {
  margin-top: 2rem;
  margin-bottom: 2rem;
  grid-column: bc;
}

#engrid.layout-centerleft1col .content-preFooter,
#engrid.layout-centercenter1col .content-preFooter,
#engrid.layout-centercenter1col-wide .content-preFooter,
#engrid.layout-centerright1col .content-preFooter {
  grid-column: pc;
  background-size: contain;
}

#engrid.layout-centerleft1col .content-preFooter.pseudo-subgrid > div,
#engrid.layout-centercenter1col .content-preFooter.pseudo-subgrid > div,
#engrid.layout-centercenter1col-wide .content-preFooter.pseudo-subgrid > div,
#engrid.layout-centerright1col .content-preFooter.pseudo-subgrid > div {
  grid-column: bc;
}

#engrid.layout-centerleft1col .body-footer,
#engrid.layout-centercenter1col .body-footer,
#engrid.layout-centercenter1col-wide .body-footer,
#engrid.layout-centerright1col .body-footer {
  margin-bottom: 5rem;
}

#engrid.layout-centerleft1col .content-footer.pseudo-subgrid > div,
#engrid.layout-centercenter1col .content-footer.pseudo-subgrid > div,
#engrid.layout-centercenter1col-wide .content-footer.pseudo-subgrid > div,
#engrid.layout-centerright1col .content-footer.pseudo-subgrid > div {
  grid-column: bc;
}

body:not(#en__pagebuilder) #engrid.layout-centerleft1col,
body:not(#en__pagebuilder) #engrid.layout-centercenter1col,
body:not(#en__pagebuilder) #engrid.layout-centercenter1col-wide,
body:not(#en__pagebuilder) #engrid.layout-centerright1col {
  /* This should use a more robust solution for adding a gradient overlay to the background image, but below the overlay text */
}

body:not(#en__pagebuilder) #engrid.layout-centerleft1col .content-preFooter > div,
body:not(#en__pagebuilder) #engrid.layout-centercenter1col .content-preFooter > div,
body:not(#en__pagebuilder) #engrid.layout-centercenter1col-wide .content-preFooter > div,
body:not(#en__pagebuilder) #engrid.layout-centerright1col .content-preFooter > div {
  min-height: 710px;
}

body:not(#en__pagebuilder) #engrid.layout-centerleft1col .page-backgroundImage::before,
body:not(#en__pagebuilder) #engrid.layout-centercenter1col .page-backgroundImage::before,
body:not(#en__pagebuilder) #engrid.layout-centercenter1col-wide .page-backgroundImage::before,
body:not(#en__pagebuilder) #engrid.layout-centerright1col .page-backgroundImage::before {
  content: "";
  background-image: radial-gradient(circle at 50% 0, rgba(0, 0, 0, 0.3), transparent 53%);
  z-index: -3;
  grid-column: pc;
}

body:not(#en__pagebuilder) #engrid.layout-centerleft1col .page-backgroundImageOverlay,
body:not(#en__pagebuilder) #engrid.layout-centercenter1col .page-backgroundImageOverlay,
body:not(#en__pagebuilder) #engrid.layout-centercenter1col-wide .page-backgroundImageOverlay,
body:not(#en__pagebuilder) #engrid.layout-centerright1col .page-backgroundImageOverlay {
  grid-row: page-start / body-main-end;
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.3) 0%, transparent 30%);
}

body#en__pagebuilder #engrid.layout-centerleft1col .page-backgroundImage > div,
body#en__pagebuilder #engrid.layout-centerleft1col .page-backgroundImageOverlay > div,
body#en__pagebuilder #engrid.layout-centercenter1col .page-backgroundImage > div,
body#en__pagebuilder #engrid.layout-centercenter1col .page-backgroundImageOverlay > div,
body#en__pagebuilder #engrid.layout-centercenter1col-wide .page-backgroundImage > div,
body#en__pagebuilder #engrid.layout-centercenter1col-wide .page-backgroundImageOverlay > div,
body#en__pagebuilder #engrid.layout-centerright1col .page-backgroundImage > div,
body#en__pagebuilder #engrid.layout-centerright1col .page-backgroundImageOverlay > div {
  grid-column: bc;
}

/*
* ##########################################################
* # ENGRID - BODY Column Breakpoint Styling
* # LAYOUT - Center ANY - [class^="layout-center"][class$="1col"]
* ##########################################################
*/
/* Sum of all MIN values of the Body Columns */
@media screen and (min-width: 600px) {
  #engrid.layout-centerleft1col .en__component--advrow .body-header,
  #engrid.layout-centerleft1col .en__component--advrow .body-banner,
  #engrid.layout-centerleft1col .en__component--advrow .body-bannerOverlay,
  #engrid.layout-centerleft1col .en__component--advrow .body-top,
  #engrid.layout-centerleft1col .en__component--advrow .body-side,
  #engrid.layout-centerleft1col .en__component--advrow .body-main,
  #engrid.layout-centerleft1col .en__component--advrow .body-bottom,
  #engrid.layout-centerleft1col .en__component--advrow .body-footer,
  #engrid.layout-centercenter1col .en__component--advrow .body-header,
  #engrid.layout-centercenter1col .en__component--advrow .body-banner,
  #engrid.layout-centercenter1col .en__component--advrow .body-bannerOverlay,
  #engrid.layout-centercenter1col .en__component--advrow .body-top,
  #engrid.layout-centercenter1col .en__component--advrow .body-side,
  #engrid.layout-centercenter1col .en__component--advrow .body-main,
  #engrid.layout-centercenter1col .en__component--advrow .body-bottom,
  #engrid.layout-centercenter1col .en__component--advrow .body-footer,
  #engrid.layout-centercenter1col-wide .en__component--advrow .body-header,
  #engrid.layout-centercenter1col-wide .en__component--advrow .body-banner,
  #engrid.layout-centercenter1col-wide .en__component--advrow .body-bannerOverlay,
  #engrid.layout-centercenter1col-wide .en__component--advrow .body-top,
  #engrid.layout-centercenter1col-wide .en__component--advrow .body-side,
  #engrid.layout-centercenter1col-wide .en__component--advrow .body-main,
  #engrid.layout-centercenter1col-wide .en__component--advrow .body-bottom,
  #engrid.layout-centercenter1col-wide .en__component--advrow .body-footer,
  #engrid.layout-centerright1col .en__component--advrow .body-header,
  #engrid.layout-centerright1col .en__component--advrow .body-banner,
  #engrid.layout-centerright1col .en__component--advrow .body-bannerOverlay,
  #engrid.layout-centerright1col .en__component--advrow .body-top,
  #engrid.layout-centerright1col .en__component--advrow .body-side,
  #engrid.layout-centerright1col .en__component--advrow .body-main,
  #engrid.layout-centerright1col .en__component--advrow .body-bottom,
  #engrid.layout-centerright1col .en__component--advrow .body-footer {
    padding-left: 3.5rem;
    padding-right: 3.5rem;
  }
  #engrid.layout-centerleft1col .en__component--advrow .body-header,
  #engrid.layout-centercenter1col .en__component--advrow .body-header,
  #engrid.layout-centercenter1col-wide .en__component--advrow .body-header,
  #engrid.layout-centerright1col .en__component--advrow .body-header {
    padding-top: 4rem;
  }
  #engrid.layout-centerleft1col .en__component--advrow .body-footer,
  #engrid.layout-centercenter1col .en__component--advrow .body-footer,
  #engrid.layout-centercenter1col-wide .en__component--advrow .body-footer,
  #engrid.layout-centerright1col .en__component--advrow .body-footer {
    padding-bottom: 4rem;
  }
  #engrid.layout-centerleft1col .body-headerOutside,
  #engrid.layout-centercenter1col .body-headerOutside,
  #engrid.layout-centercenter1col-wide .body-headerOutside,
  #engrid.layout-centerright1col .body-headerOutside {
    margin-top: 4rem;
    margin-bottom: 4rem;
  }
  #engrid.layout-centerleft1col [class^="body-"],
  #engrid.layout-centercenter1col [class^="body-"],
  #engrid.layout-centercenter1col-wide [class^="body-"],
  #engrid.layout-centerright1col [class^="body-"] {
    border-left: 1px solid black;
    border-right: 1px solid black;
  }
  #engrid.layout-centerleft1col .body-header,
  #engrid.layout-centercenter1col .body-header,
  #engrid.layout-centercenter1col-wide .body-header,
  #engrid.layout-centerright1col .body-header {
    margin-top: 1rem;
    border-top: 1px solid black;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
  }
  #engrid.layout-centerleft1col .content-preFooter.pseudo-subgrid > div,
  #engrid.layout-centercenter1col .content-preFooter.pseudo-subgrid > div,
  #engrid.layout-centercenter1col-wide .content-preFooter.pseudo-subgrid > div,
  #engrid.layout-centerright1col .content-preFooter.pseudo-subgrid > div {
    grid-column: cc;
  }
  #engrid.layout-centerleft1col .content-footer.pseudo-subgrid > div,
  #engrid.layout-centercenter1col .content-footer.pseudo-subgrid > div,
  #engrid.layout-centercenter1col-wide .content-footer.pseudo-subgrid > div,
  #engrid.layout-centerright1col .content-footer.pseudo-subgrid > div {
    grid-column: cc;
  }
}

/*
* ##########################################################
* # ENGRID - Content Column Breakpoint Styling
* # LAYOUT - Center ANY - [class^="layout-center"][class$="1col"]
* ##########################################################
*/
/* Sum of all MAX values of the Body Columns + 1px */
@media screen and (min-width: 1231px) {
  #engrid.layout-centerleft1col .content-preFooter,
  #engrid.layout-centercenter1col .content-preFooter,
  #engrid.layout-centercenter1col-wide .content-preFooter,
  #engrid.layout-centerright1col .content-preFooter {
    background-size: cover;
  }
  body:not(#en__pagebuilder) #engrid.layout-centerleft1col .content-preFooter > div,
  body:not(#en__pagebuilder) #engrid.layout-centercenter1col .content-preFooter > div,
  body:not(#en__pagebuilder) #engrid.layout-centercenter1col-wide .content-preFooter > div,
  body:not(#en__pagebuilder) #engrid.layout-centerright1col .content-preFooter > div {
    min-height: 1010px;
  }
}