:root {
  --font-ui: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
  --font-sans: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
  --font-serif: Georgia, serif;
  --font-mono: Overpass Mono, -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
  --font-heading: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
  --spacing-sm: 0.19rem;
  --spacing-md: 0.33rem;
  --spacing-lg: 0.618rem;
  --rgb-primary: 136, 196, 21;
  --color-primary: color($color);
  --rgb-secondary: 8,176,81;
  --color-secondary: color($color);
  --rgb-tertiary: 224,78,38;
  --color-tertiary: color($color);
  --rgb-white: 255,255,255;
  --color-white: color($color);
  --rgb-light: 255,255,255;
  --color-light: color($color);
  --rgb-gray: 220,220,227;
  --color-gray: color($color);
  --rgb-median: 82,92,112;
  --color-median: color($color);
  --rgb-shadow: 19,29,50;
  --color-shadow: color($color);
  --rgb-black: 0,0,0;
  --color-black: color($color);
  --rgb-star: 228,113,43;
  --color-star: color($color);
  --rgb-positive: 8,176,81;
  --color-positive: color($color);
  --rgb-neutral: 54,120,23;
  --color-neutral: color($color);
  --rgb-attention: 253,185,19;
  --color-attention: color($color);
  --rgb-alert: 224,78,38;
  --color-alert: color($color);
  /* --color-accent points to --color-primary */
  --rgb-accent: 136, 196, 21;
  --color-accent: color($value);
  /* --color-text points to --color-shadow */
  --rgb-text: 19,29,50;
  --color-text: color($value);
  /* --color-background points to --color-light */
  --rgb-background: 255,255,255;
  --color-background: color($value);
  /* --color-foreground points to --color-shadow */
  --rgb-foreground: 19,29,50;
  --color-foreground: color($value);
  --rgb-facebook: 59,86,157;
  --color-facebook: color($color);
  --rgb-twitter: 101,172,212;
  --color-twitter: color($color);
  --rgb-google-plus: 222,67,49;
  --color-google-plus: color($color);
  --rgb-pinterest: 206,29,31;
  --color-pinterest: color($color);
  --rgb-instagram: 224,49,112;
  --color-instagram: color($color);
  --rgb-youtube: 230,33,23;
  --color-youtube: color($color);
  --rgb-tumblr: 54,70,93;
  --color-tumblr: color($color);
  --rgb-linkedin: 0,132,191;
  --color-linkedin: color($color);
}
@media only screen and (min-width: 640px) {
  :root {
    --spacing-sm: u(0.381);
    --spacing-md: u(0.5);
    --spacing-lg: u(1);
  }
}
@media only screen and (min-width: 1040px) {
  :root {
    --spacing-md: u(0.618);
    --spacing-lg: u(1.38);
  }
}
@media only screen and (min-width: 1440px) {
  :root {
    --spacing-md: u(0.75);
    --spacing-lg: u(1.618);
  }
}

[data-accent=primary] {
  --rgb-accent: var(--rgb-primary);
  --color-accent: var(--color-primary);
}

[data-accent=secondary] {
  --rgb-accent: var(--rgb-secondary);
  --color-accent: var(--color-secondary);
}

[data-accent=tertiary] {
  --rgb-accent: var(--rgb-tertiary);
  --color-accent: var(--color-tertiary);
}

[data-accent=white] {
  --rgb-accent: var(--rgb-white);
  --color-accent: var(--color-white);
}

[data-accent=light] {
  --rgb-accent: var(--rgb-light);
  --color-accent: var(--color-light);
}

[data-accent=gray] {
  --rgb-accent: var(--rgb-gray);
  --color-accent: var(--color-gray);
}

[data-accent=median] {
  --rgb-accent: var(--rgb-median);
  --color-accent: var(--color-median);
}

[data-accent=shadow] {
  --rgb-accent: var(--rgb-shadow);
  --color-accent: var(--color-shadow);
}

[data-accent=black] {
  --rgb-accent: var(--rgb-black);
  --color-accent: var(--color-black);
}

[data-accent=star] {
  --rgb-accent: var(--rgb-star);
  --color-accent: var(--color-star);
}

[data-accent=positive] {
  --rgb-accent: var(--rgb-positive);
  --color-accent: var(--color-positive);
}

[data-accent=neutral] {
  --rgb-accent: var(--rgb-neutral);
  --color-accent: var(--color-neutral);
}

[data-accent=attention] {
  --rgb-accent: var(--rgb-attention);
  --color-accent: var(--color-attention);
}

[data-accent=alert] {
  --rgb-accent: var(--rgb-alert);
  --color-accent: var(--color-alert);
}

[data-accent=accent] {
  --rgb-accent: var(--rgb-accent);
  --color-accent: var(--color-accent);
}

[data-accent=text] {
  --rgb-accent: var(--rgb-text);
  --color-accent: var(--color-text);
}

[data-accent=background] {
  --rgb-accent: var(--rgb-background);
  --color-accent: var(--color-background);
}

[data-accent=foreground] {
  --rgb-accent: var(--rgb-foreground);
  --color-accent: var(--color-foreground);
}

[data-accent=facebook] {
  --rgb-accent: var(--rgb-facebook);
  --color-accent: var(--color-facebook);
}

[data-accent=twitter] {
  --rgb-accent: var(--rgb-twitter);
  --color-accent: var(--color-twitter);
}

[data-accent=google-plus] {
  --rgb-accent: var(--rgb-google-plus);
  --color-accent: var(--color-google-plus);
}

[data-accent=pinterest] {
  --rgb-accent: var(--rgb-pinterest);
  --color-accent: var(--color-pinterest);
}

[data-accent=instagram] {
  --rgb-accent: var(--rgb-instagram);
  --color-accent: var(--color-instagram);
}

[data-accent=youtube] {
  --rgb-accent: var(--rgb-youtube);
  --color-accent: var(--color-youtube);
}

[data-accent=tumblr] {
  --rgb-accent: var(--rgb-tumblr);
  --color-accent: var(--color-tumblr);
}

[data-accent=linkedin] {
  --rgb-accent: var(--rgb-linkedin);
  --color-accent: var(--color-linkedin);
}

:root {
  --theme-app-color-bg: varColor(white);
  --theme-app-color-text: varColor(shadow);
  --theme-button-background-image: linear-gradient(45deg, varColor(shadow,0), varColor(shadow,0.16));
  --theme-grid-gap: 1.2rem;
}

/*! normalize.css v4.1.1 | MIT License | github.com/necolas/normalize.css */
/* With custom changes for Basekit */
* {
  box-sizing: border-box;
}

/**
 * 1. Change the default font family in all browsers (opinionated).
 * 2. Correct the line height in all browsers.
 * 3. Prevent adjustments of font size after orientation changes in IE and iOS.
 */
html {
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
  font-family: var(--font-ui); /* 1 */
  line-height: 1; /* 2 */
  -ms-text-size-adjust: 100%; /* 3 */
  -webkit-text-size-adjust: 100%; /* 3 */
}

/**
 * Remove the margin in all browsers (opinionated).
 */
body {
  margin: 0;
  background-color: color($color);
  background-color: var(--color-light);
}

/* HTML5 display definitions
   ========================================================================== */
/**
 * Add the correct display in IE 9-.
 * 1. Add the correct display in Edge, IE, and Firefox.
 * 2. Add the correct display in IE.
 */
article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
menu,
nav,
section,
summary { /* 1 */
  display: block;
}

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

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

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

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

/* Links
   ========================================================================== */
/**
 * 1. Remove the gray background on active links in IE 10.
 * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
 */
a {
  background-color: transparent; /* 1 */
  -webkit-text-decoration-skip: objects; /* 2 */
}

/**
 * Remove the outline on focused links when they are also active or hovered
 * in all browsers (opinionated).
 */
a:active,
a:hover {
  outline-width: 0;
}

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

/**
 * Prevent the duplicate application of `bolder` by the next rule in Safari 6.
 */
b,
strong {
  font-weight: inherit;
}

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

/**
 * Add the correct font style in Android 4.3-.
 */
dfn {
  font-style: italic;
}

/**
 * Add the correct background and color in IE 9-.
 */
mark {
  background-color: rgba(136, 196, 21, 0.4);
  background-color: rgba(var(--rgb-accent), 0.4);
  color: inherit;
}

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

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

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

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

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

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

/**
 * Add the correct margin in IE 8.
 */
figure {
  margin: 0;
}

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

/* Forms
   ========================================================================== */
/**
 * 1. Change font properties to `inherit` in all browsers (opinionated).
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
optgroup,
select,
textarea {
  margin: 0; /* 2 */
  font: inherit; /* 1 */
}

/**
 * Restore the font weight unset by the previous rule.
 */
optgroup {
  font-weight: bold;
}

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

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

/**
 * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
 *    controls in Android 4.
 * 2. Correct the inability to style clickable types in iOS and Safari.
 */
button,
html [type=button],
[type=reset],
[type=submit] {
  -webkit-appearance: button; /* 2 */
}

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

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

/**
 * Change the border, margin, and padding in all browsers (opinionated).
 */
fieldset {
  margin: 1em 0;
  padding: 1em;
  border: 1px solid rgba(19,29,50, 0.3);
  border: 1px solid rgba(var(--rgb-text), 0.3);
}

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

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

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

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

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

/**
 * Remove the inner padding and cancel buttons in Chrome and Safari on OS X.
 */
[type=search]::-webkit-search-cancel-button,
[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

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

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

ul, ol {
  margin: 0;
}

th {
  text-align: left;
}

html {
  font-size: 10px;
}

body {
  color: color($value);
  color: var(--color-text);
  text-decoration: none;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  font-size: 1.618rem;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
  font-family: var(--font-ui);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5,
p,
strong, b, em, i {
  margin-top: 0;
  margin-bottom: 0;
  color: inherit;
  -webkit-margin-before: 0;
  -webkit-margin-after: 0;
}

h1 {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
  font-family: var(--font-heading);
}

h2 {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
  font-family: var(--font-heading);
}

h3 {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
  font-family: var(--font-heading);
}

h4 {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
  font-family: var(--font-heading);
}

h5 {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
  font-family: var(--font-heading);
}

h1 {
  font-size: 3.61273512rem;
}

h2 {
  font-size: 2.617924rem;
}

h3 {
  font-size: 2.23284rem;
}

h4, h5 {
  font-size: inherit;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  max-width: 100%;
}

figure {
  margin: 0;
}

ul, ol {
  margin: 0;
}

ul {
  padding: 0;
}
ul li {
  list-style: none;
}

* {
  box-sizing: border-box;
}

hr {
  margin: 1.618rem 0;
}

::-moz-selection {
  background-color: rgba(136, 196, 21, 0.3);
}

::selection {
  background-color: rgba(136, 196, 21, 0.3);
}

a:focus {
  outline-color: color($color);
  outline-color: var(--color-primary);
}

input:focus {
  outline-color: color($color);
  outline-color: var(--color-primary);
}

select:focus {
  outline-color: color($color);
  outline-color: var(--color-primary);
}

button:focus {
  outline-color: color($color);
  outline-color: var(--color-primary);
}

.u-font-mono {
  font-family: Overpass Mono, -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
  font-family: var(--font-mono);
}

/* Atrium Icon Gradients */
#gradient--primary stop {
  transition: 0.3s ease;
  stop-color: color($color);
  stop-color: var(--color-primary);
}
#gradient--primary stop:last-child {
  stop-opacity: 0.6;
}

#gradient--secondary stop {
  transition: 0.3s ease;
  stop-color: color($color);
  stop-color: var(--color-secondary);
}
#gradient--secondary stop:last-child {
  stop-opacity: 0.6;
}

#gradient--tertiary stop {
  transition: 0.3s ease;
  stop-color: color($color);
  stop-color: var(--color-tertiary);
}
#gradient--tertiary stop:last-child {
  stop-opacity: 0.6;
}

#gradient--white stop {
  transition: 0.3s ease;
  stop-color: color($color);
  stop-color: var(--color-white);
}
#gradient--white stop:last-child {
  stop-opacity: 0.6;
}

#gradient--light stop {
  transition: 0.3s ease;
  stop-color: color($color);
  stop-color: var(--color-light);
}
#gradient--light stop:last-child {
  stop-opacity: 0.6;
}

#gradient--gray stop {
  transition: 0.3s ease;
  stop-color: color($color);
  stop-color: var(--color-gray);
}
#gradient--gray stop:last-child {
  stop-opacity: 0.6;
}

#gradient--median stop {
  transition: 0.3s ease;
  stop-color: color($color);
  stop-color: var(--color-median);
}
#gradient--median stop:last-child {
  stop-opacity: 0.6;
}

#gradient--shadow stop {
  transition: 0.3s ease;
  stop-color: color($color);
  stop-color: var(--color-shadow);
}
#gradient--shadow stop:last-child {
  stop-opacity: 0.6;
}

#gradient--black stop {
  transition: 0.3s ease;
  stop-color: color($color);
  stop-color: var(--color-black);
}
#gradient--black stop:last-child {
  stop-opacity: 0.6;
}

#gradient--star stop {
  transition: 0.3s ease;
  stop-color: color($color);
  stop-color: var(--color-star);
}
#gradient--star stop:last-child {
  stop-opacity: 0.6;
}

#gradient--positive stop {
  transition: 0.3s ease;
  stop-color: color($color);
  stop-color: var(--color-positive);
}
#gradient--positive stop:last-child {
  stop-opacity: 0.6;
}

#gradient--neutral stop {
  transition: 0.3s ease;
  stop-color: color($color);
  stop-color: var(--color-neutral);
}
#gradient--neutral stop:last-child {
  stop-opacity: 0.6;
}

#gradient--attention stop {
  transition: 0.3s ease;
  stop-color: color($color);
  stop-color: var(--color-attention);
}
#gradient--attention stop:last-child {
  stop-opacity: 0.6;
}

#gradient--alert stop {
  transition: 0.3s ease;
  stop-color: color($color);
  stop-color: var(--color-alert);
}
#gradient--alert stop:last-child {
  stop-opacity: 0.6;
}

form,
.form {
  transition: opacity 0.5s ease;
}

.is-invalid {
  --rgb-accent: var(--rgb-alert);
  --color-accent: var(--color-alert);
}

label {
  font-weight: 600;
  filter: brightness(0.9);
  transition: 0.2s ease;
}
.info-span-group label {
  display: block;
  margin-bottom: 0.38em;
  color: rgba(19,29,50, 0.75);
  color: rgba(var(--rgb-shadow), 0.75);
}
.input--text label {
  display: block;
  margin-bottom: 0.38em;
  color: rgba(19,29,50, 0.75);
  color: rgba(var(--rgb-shadow), 0.75);
}
.textarea label {
  display: block;
  margin-bottom: 0.38em;
  color: rgba(19,29,50, 0.75);
  color: rgba(var(--rgb-shadow), 0.75);
}
.select label {
  display: block;
  margin-bottom: 0.38em;
  color: rgba(19,29,50, 0.75);
  color: rgba(var(--rgb-shadow), 0.75);
}
label.tooltipped {
  position: relative;
}
label.tooltipped:before {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.2em;
  height: 1.2em;
  border-radius: 50%;
  background-color: color($color);
  background-color: var(--color-neutral);
  color: color($color);
  color: var(--color-white);
  content: "?";
  vertical-align: 0.1em;
  font-size: 85%;
  opacity: 0.7;
}
label.tooltipped:hover:after {
  opacity: 1;
}
label.tooltipped:hover .tooltip {
  display: block;
}

.tooltip {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 2;
  display: none;
  padding: 0.5em;
  border-radius: 3px;
  background-color: rgba(19,29,50, 0.95);
  background-color: rgba(var(--rgb-shadow), 0.95);
  color: color($color);
  color: var(--color-light);
  font-size: 85%;
  pointer-events: none;
}

.form-error {
  position: relative;
  display: flex;
  margin-top: 0.618em;
  padding: 0.618em;
  background-color: rgba(136, 196, 21, 0.2);
  background-color: rgba(var(--rgb-primary), 0.2);
  color: color($color);
  color: var(--color-primary);
}
.form-error svg {
  margin-right: 0.5em;
  fill: currentColor;
}

[type=color] {
  --rgb-accent: 136, 196, 21;
  --rgb-accent: var(--rgb-primary);
  --color-accent: color($color);
  --color-accent: var(--color-primary);
  box-sizing: border-box;
  padding: 0.5em;
  height: 2.5em;
  border: 1px solid rgba(82,92,112, 0.2);
  border-radius: 3px;
  background-color: rgba(255,255,255, 0.3);
  background-color: rgba(var(--rgb-light), 0.3);
  color: inherit;
  text-align: inherit;
  font-size: 1.618rem;
  font-family: inherit;
  line-height: 1.5;
  transition: 0.2s;
}

[type=date] {
  --rgb-accent: 136, 196, 21;
  --rgb-accent: var(--rgb-primary);
  --color-accent: color($color);
  --color-accent: var(--color-primary);
  box-sizing: border-box;
  padding: 0.5em;
  height: 2.5em;
  border: 1px solid rgba(82,92,112, 0.2);
  border-radius: 3px;
  background-color: rgba(255,255,255, 0.3);
  background-color: rgba(var(--rgb-light), 0.3);
  color: inherit;
  text-align: inherit;
  font-size: 1.618rem;
  font-family: inherit;
  line-height: 1.5;
  transition: 0.2s;
}

[type=datetime] {
  --rgb-accent: 136, 196, 21;
  --rgb-accent: var(--rgb-primary);
  --color-accent: color($color);
  --color-accent: var(--color-primary);
  box-sizing: border-box;
  padding: 0.5em;
  height: 2.5em;
  border: 1px solid rgba(82,92,112, 0.2);
  border-radius: 3px;
  background-color: rgba(255,255,255, 0.3);
  background-color: rgba(var(--rgb-light), 0.3);
  color: inherit;
  text-align: inherit;
  font-size: 1.618rem;
  font-family: inherit;
  line-height: 1.5;
  transition: 0.2s;
}

[type=datetime-local] {
  --rgb-accent: 136, 196, 21;
  --rgb-accent: var(--rgb-primary);
  --color-accent: color($color);
  --color-accent: var(--color-primary);
  box-sizing: border-box;
  padding: 0.5em;
  height: 2.5em;
  border: 1px solid rgba(82,92,112, 0.2);
  border-radius: 3px;
  background-color: rgba(255,255,255, 0.3);
  background-color: rgba(var(--rgb-light), 0.3);
  color: inherit;
  text-align: inherit;
  font-size: 1.618rem;
  font-family: inherit;
  line-height: 1.5;
  transition: 0.2s;
}

[type=email] {
  --rgb-accent: 136, 196, 21;
  --rgb-accent: var(--rgb-primary);
  --color-accent: color($color);
  --color-accent: var(--color-primary);
  box-sizing: border-box;
  padding: 0.5em;
  height: 2.5em;
  border: 1px solid rgba(82,92,112, 0.2);
  border-radius: 3px;
  background-color: rgba(255,255,255, 0.3);
  background-color: rgba(var(--rgb-light), 0.3);
  color: inherit;
  text-align: inherit;
  font-size: 1.618rem;
  font-family: inherit;
  line-height: 1.5;
  transition: 0.2s;
}

[type=month] {
  --rgb-accent: 136, 196, 21;
  --rgb-accent: var(--rgb-primary);
  --color-accent: color($color);
  --color-accent: var(--color-primary);
  box-sizing: border-box;
  padding: 0.5em;
  height: 2.5em;
  border: 1px solid rgba(82,92,112, 0.2);
  border-radius: 3px;
  background-color: rgba(255,255,255, 0.3);
  background-color: rgba(var(--rgb-light), 0.3);
  color: inherit;
  text-align: inherit;
  font-size: 1.618rem;
  font-family: inherit;
  line-height: 1.5;
  transition: 0.2s;
}

[type=number] {
  --rgb-accent: 136, 196, 21;
  --rgb-accent: var(--rgb-primary);
  --color-accent: color($color);
  --color-accent: var(--color-primary);
  box-sizing: border-box;
  padding: 0.5em;
  height: 2.5em;
  border: 1px solid rgba(82,92,112, 0.2);
  border-radius: 3px;
  background-color: rgba(255,255,255, 0.3);
  background-color: rgba(var(--rgb-light), 0.3);
  color: inherit;
  text-align: inherit;
  font-size: 1.618rem;
  font-family: inherit;
  line-height: 1.5;
  transition: 0.2s;
}

[type=password] {
  --rgb-accent: 136, 196, 21;
  --rgb-accent: var(--rgb-primary);
  --color-accent: color($color);
  --color-accent: var(--color-primary);
  box-sizing: border-box;
  padding: 0.5em;
  height: 2.5em;
  border: 1px solid rgba(82,92,112, 0.2);
  border-radius: 3px;
  background-color: rgba(255,255,255, 0.3);
  background-color: rgba(var(--rgb-light), 0.3);
  color: inherit;
  text-align: inherit;
  font-size: 1.618rem;
  font-family: inherit;
  line-height: 1.5;
  transition: 0.2s;
}

[type=search] {
  --rgb-accent: 136, 196, 21;
  --rgb-accent: var(--rgb-primary);
  --color-accent: color($color);
  --color-accent: var(--color-primary);
  box-sizing: border-box;
  padding: 0.5em;
  height: 2.5em;
  border: 1px solid rgba(82,92,112, 0.2);
  border-radius: 3px;
  background-color: rgba(255,255,255, 0.3);
  background-color: rgba(var(--rgb-light), 0.3);
  color: inherit;
  text-align: inherit;
  font-size: 1.618rem;
  font-family: inherit;
  line-height: 1.5;
  transition: 0.2s;
}

[type=tel] {
  --rgb-accent: 136, 196, 21;
  --rgb-accent: var(--rgb-primary);
  --color-accent: color($color);
  --color-accent: var(--color-primary);
  box-sizing: border-box;
  padding: 0.5em;
  height: 2.5em;
  border: 1px solid rgba(82,92,112, 0.2);
  border-radius: 3px;
  background-color: rgba(255,255,255, 0.3);
  background-color: rgba(var(--rgb-light), 0.3);
  color: inherit;
  text-align: inherit;
  font-size: 1.618rem;
  font-family: inherit;
  line-height: 1.5;
  transition: 0.2s;
}

[type=text] {
  --rgb-accent: 136, 196, 21;
  --rgb-accent: var(--rgb-primary);
  --color-accent: color($color);
  --color-accent: var(--color-primary);
  box-sizing: border-box;
  padding: 0.5em;
  height: 2.5em;
  border: 1px solid rgba(82,92,112, 0.2);
  border-radius: 3px;
  background-color: rgba(255,255,255, 0.3);
  background-color: rgba(var(--rgb-light), 0.3);
  color: inherit;
  text-align: inherit;
  font-size: 1.618rem;
  font-family: inherit;
  line-height: 1.5;
  transition: 0.2s;
}

[type=time] {
  --rgb-accent: 136, 196, 21;
  --rgb-accent: var(--rgb-primary);
  --color-accent: color($color);
  --color-accent: var(--color-primary);
  box-sizing: border-box;
  padding: 0.5em;
  height: 2.5em;
  border: 1px solid rgba(82,92,112, 0.2);
  border-radius: 3px;
  background-color: rgba(255,255,255, 0.3);
  background-color: rgba(var(--rgb-light), 0.3);
  color: inherit;
  text-align: inherit;
  font-size: 1.618rem;
  font-family: inherit;
  line-height: 1.5;
  transition: 0.2s;
}

[type=url] {
  --rgb-accent: 136, 196, 21;
  --rgb-accent: var(--rgb-primary);
  --color-accent: color($color);
  --color-accent: var(--color-primary);
  box-sizing: border-box;
  padding: 0.5em;
  height: 2.5em;
  border: 1px solid rgba(82,92,112, 0.2);
  border-radius: 3px;
  background-color: rgba(255,255,255, 0.3);
  background-color: rgba(var(--rgb-light), 0.3);
  color: inherit;
  text-align: inherit;
  font-size: 1.618rem;
  font-family: inherit;
  line-height: 1.5;
  transition: 0.2s;
}

[type=week] {
  --rgb-accent: 136, 196, 21;
  --rgb-accent: var(--rgb-primary);
  --color-accent: color($color);
  --color-accent: var(--color-primary);
  box-sizing: border-box;
  padding: 0.5em;
  height: 2.5em;
  border: 1px solid rgba(82,92,112, 0.2);
  border-radius: 3px;
  background-color: rgba(255,255,255, 0.3);
  background-color: rgba(var(--rgb-light), 0.3);
  color: inherit;
  text-align: inherit;
  font-size: 1.618rem;
  font-family: inherit;
  line-height: 1.5;
  transition: 0.2s;
}

input:not([type]) {
  --rgb-accent: 136, 196, 21;
  --rgb-accent: var(--rgb-primary);
  --color-accent: color($color);
  --color-accent: var(--color-primary);
  box-sizing: border-box;
  padding: 0.5em;
  height: 2.5em;
  border: 1px solid rgba(82,92,112, 0.2);
  border-radius: 3px;
  background-color: rgba(255,255,255, 0.3);
  background-color: rgba(var(--rgb-light), 0.3);
  color: inherit;
  text-align: inherit;
  font-size: 1.618rem;
  font-family: inherit;
  line-height: 1.5;
  transition: 0.2s;
}
[type=color][disabled] {
  background-color: rgba(220,220,227, 0.7);
  background-color: rgba(var(--rgb-gray), 0.7);
  opacity: 0.6;
  pointer-events: none;
}
[type=date][disabled] {
  background-color: rgba(220,220,227, 0.7);
  background-color: rgba(var(--rgb-gray), 0.7);
  opacity: 0.6;
  pointer-events: none;
}
[type=datetime][disabled] {
  background-color: rgba(220,220,227, 0.7);
  background-color: rgba(var(--rgb-gray), 0.7);
  opacity: 0.6;
  pointer-events: none;
}
[type=datetime-local][disabled] {
  background-color: rgba(220,220,227, 0.7);
  background-color: rgba(var(--rgb-gray), 0.7);
  opacity: 0.6;
  pointer-events: none;
}
[type=email][disabled] {
  background-color: rgba(220,220,227, 0.7);
  background-color: rgba(var(--rgb-gray), 0.7);
  opacity: 0.6;
  pointer-events: none;
}
[type=month][disabled] {
  background-color: rgba(220,220,227, 0.7);
  background-color: rgba(var(--rgb-gray), 0.7);
  opacity: 0.6;
  pointer-events: none;
}
[type=number][disabled] {
  background-color: rgba(220,220,227, 0.7);
  background-color: rgba(var(--rgb-gray), 0.7);
  opacity: 0.6;
  pointer-events: none;
}
[type=password][disabled] {
  background-color: rgba(220,220,227, 0.7);
  background-color: rgba(var(--rgb-gray), 0.7);
  opacity: 0.6;
  pointer-events: none;
}
[type=search][disabled] {
  background-color: rgba(220,220,227, 0.7);
  background-color: rgba(var(--rgb-gray), 0.7);
  opacity: 0.6;
  pointer-events: none;
}
[type=tel][disabled] {
  background-color: rgba(220,220,227, 0.7);
  background-color: rgba(var(--rgb-gray), 0.7);
  opacity: 0.6;
  pointer-events: none;
}
[type=text][disabled] {
  background-color: rgba(220,220,227, 0.7);
  background-color: rgba(var(--rgb-gray), 0.7);
  opacity: 0.6;
  pointer-events: none;
}
[type=time][disabled] {
  background-color: rgba(220,220,227, 0.7);
  background-color: rgba(var(--rgb-gray), 0.7);
  opacity: 0.6;
  pointer-events: none;
}
[type=url][disabled] {
  background-color: rgba(220,220,227, 0.7);
  background-color: rgba(var(--rgb-gray), 0.7);
  opacity: 0.6;
  pointer-events: none;
}
[type=week][disabled] {
  background-color: rgba(220,220,227, 0.7);
  background-color: rgba(var(--rgb-gray), 0.7);
  opacity: 0.6;
  pointer-events: none;
}
input:not([type])[disabled] {
  background-color: rgba(220,220,227, 0.7);
  background-color: rgba(var(--rgb-gray), 0.7);
  opacity: 0.6;
  pointer-events: none;
}
[type=color]::-moz-placeholder {
  color: rgba(19,29,50, 0.5);
  color: rgba(var(--rgb-text), 0.5);
  font-style: italic;
}
[type=color]::placeholder {
  color: rgba(19,29,50, 0.5);
  color: rgba(var(--rgb-text), 0.5);
  font-style: italic;
}
[type=date]::-moz-placeholder {
  color: rgba(19,29,50, 0.5);
  color: rgba(var(--rgb-text), 0.5);
  font-style: italic;
}
[type=date]::placeholder {
  color: rgba(19,29,50, 0.5);
  color: rgba(var(--rgb-text), 0.5);
  font-style: italic;
}
[type=datetime]::-moz-placeholder {
  color: rgba(19,29,50, 0.5);
  color: rgba(var(--rgb-text), 0.5);
  font-style: italic;
}
[type=datetime]::placeholder {
  color: rgba(19,29,50, 0.5);
  color: rgba(var(--rgb-text), 0.5);
  font-style: italic;
}
[type=datetime-local]::-moz-placeholder {
  color: rgba(19,29,50, 0.5);
  color: rgba(var(--rgb-text), 0.5);
  font-style: italic;
}
[type=datetime-local]::placeholder {
  color: rgba(19,29,50, 0.5);
  color: rgba(var(--rgb-text), 0.5);
  font-style: italic;
}
[type=email]::-moz-placeholder {
  color: rgba(19,29,50, 0.5);
  color: rgba(var(--rgb-text), 0.5);
  font-style: italic;
}
[type=email]::placeholder {
  color: rgba(19,29,50, 0.5);
  color: rgba(var(--rgb-text), 0.5);
  font-style: italic;
}
[type=month]::-moz-placeholder {
  color: rgba(19,29,50, 0.5);
  color: rgba(var(--rgb-text), 0.5);
  font-style: italic;
}
[type=month]::placeholder {
  color: rgba(19,29,50, 0.5);
  color: rgba(var(--rgb-text), 0.5);
  font-style: italic;
}
[type=number]::-moz-placeholder {
  color: rgba(19,29,50, 0.5);
  color: rgba(var(--rgb-text), 0.5);
  font-style: italic;
}
[type=number]::placeholder {
  color: rgba(19,29,50, 0.5);
  color: rgba(var(--rgb-text), 0.5);
  font-style: italic;
}
[type=password]::-moz-placeholder {
  color: rgba(19,29,50, 0.5);
  color: rgba(var(--rgb-text), 0.5);
  font-style: italic;
}
[type=password]::placeholder {
  color: rgba(19,29,50, 0.5);
  color: rgba(var(--rgb-text), 0.5);
  font-style: italic;
}
[type=search]::-moz-placeholder {
  color: rgba(19,29,50, 0.5);
  color: rgba(var(--rgb-text), 0.5);
  font-style: italic;
}
[type=search]::placeholder {
  color: rgba(19,29,50, 0.5);
  color: rgba(var(--rgb-text), 0.5);
  font-style: italic;
}
[type=tel]::-moz-placeholder {
  color: rgba(19,29,50, 0.5);
  color: rgba(var(--rgb-text), 0.5);
  font-style: italic;
}
[type=tel]::placeholder {
  color: rgba(19,29,50, 0.5);
  color: rgba(var(--rgb-text), 0.5);
  font-style: italic;
}
[type=text]::-moz-placeholder {
  color: rgba(19,29,50, 0.5);
  color: rgba(var(--rgb-text), 0.5);
  font-style: italic;
}
[type=text]::placeholder {
  color: rgba(19,29,50, 0.5);
  color: rgba(var(--rgb-text), 0.5);
  font-style: italic;
}
[type=time]::-moz-placeholder {
  color: rgba(19,29,50, 0.5);
  color: rgba(var(--rgb-text), 0.5);
  font-style: italic;
}
[type=time]::placeholder {
  color: rgba(19,29,50, 0.5);
  color: rgba(var(--rgb-text), 0.5);
  font-style: italic;
}
[type=url]::-moz-placeholder {
  color: rgba(19,29,50, 0.5);
  color: rgba(var(--rgb-text), 0.5);
  font-style: italic;
}
[type=url]::placeholder {
  color: rgba(19,29,50, 0.5);
  color: rgba(var(--rgb-text), 0.5);
  font-style: italic;
}
[type=week]::-moz-placeholder {
  color: rgba(19,29,50, 0.5);
  color: rgba(var(--rgb-text), 0.5);
  font-style: italic;
}
[type=week]::placeholder {
  color: rgba(19,29,50, 0.5);
  color: rgba(var(--rgb-text), 0.5);
  font-style: italic;
}
input:not([type])::-moz-placeholder {
  color: rgba(19,29,50, 0.5);
  color: rgba(var(--rgb-text), 0.5);
  font-style: italic;
}
input:not([type])::placeholder {
  color: rgba(19,29,50, 0.5);
  color: rgba(var(--rgb-text), 0.5);
  font-style: italic;
}
[type=color]:hover {
  border-color: color($color);
  border-color: var(--color-accent);
  transition: 0.1s;
}
[type=date]:hover {
  border-color: color($color);
  border-color: var(--color-accent);
  transition: 0.1s;
}
[type=datetime]:hover {
  border-color: color($color);
  border-color: var(--color-accent);
  transition: 0.1s;
}
[type=datetime-local]:hover {
  border-color: color($color);
  border-color: var(--color-accent);
  transition: 0.1s;
}
[type=email]:hover {
  border-color: color($color);
  border-color: var(--color-accent);
  transition: 0.1s;
}
[type=month]:hover {
  border-color: color($color);
  border-color: var(--color-accent);
  transition: 0.1s;
}
[type=number]:hover {
  border-color: color($color);
  border-color: var(--color-accent);
  transition: 0.1s;
}
[type=password]:hover {
  border-color: color($color);
  border-color: var(--color-accent);
  transition: 0.1s;
}
[type=search]:hover {
  border-color: color($color);
  border-color: var(--color-accent);
  transition: 0.1s;
}
[type=tel]:hover {
  border-color: color($color);
  border-color: var(--color-accent);
  transition: 0.1s;
}
[type=text]:hover {
  border-color: color($color);
  border-color: var(--color-accent);
  transition: 0.1s;
}
[type=time]:hover {
  border-color: color($color);
  border-color: var(--color-accent);
  transition: 0.1s;
}
[type=url]:hover {
  border-color: color($color);
  border-color: var(--color-accent);
  transition: 0.1s;
}
[type=week]:hover {
  border-color: color($color);
  border-color: var(--color-accent);
  transition: 0.1s;
}
input:not([type]):hover {
  border-color: color($value);
  border-color: var(--color-accent);
  transition: 0.1s;
}
input:not([type]):hover:not([type]).is-invalid {
  border-color: color($color);
  border-color: var(--color-accent);
}
input:not([type]):hover:not([type]) {
  border-color: color($color);
  border-color: var(--color-accent);
}
[type=color]:focus {
  outline: none;
  border-color: color($color);
  border-color: var(--color-neutral);
  background-color: rgba(54,120,23, 0.1);
  background-color: rgba(var(--rgb-neutral), 0.1);
}
[type=date]:focus {
  outline: none;
  border-color: color($color);
  border-color: var(--color-neutral);
  background-color: rgba(54,120,23, 0.1);
  background-color: rgba(var(--rgb-neutral), 0.1);
}
[type=datetime]:focus {
  outline: none;
  border-color: color($color);
  border-color: var(--color-neutral);
  background-color: rgba(54,120,23, 0.1);
  background-color: rgba(var(--rgb-neutral), 0.1);
}
[type=datetime-local]:focus {
  outline: none;
  border-color: color($color);
  border-color: var(--color-neutral);
  background-color: rgba(54,120,23, 0.1);
  background-color: rgba(var(--rgb-neutral), 0.1);
}
[type=email]:focus {
  outline: none;
  border-color: color($color);
  border-color: var(--color-neutral);
  background-color: rgba(54,120,23, 0.1);
  background-color: rgba(var(--rgb-neutral), 0.1);
}
[type=month]:focus {
  outline: none;
  border-color: color($color);
  border-color: var(--color-neutral);
  background-color: rgba(54,120,23, 0.1);
  background-color: rgba(var(--rgb-neutral), 0.1);
}
[type=number]:focus {
  outline: none;
  border-color: color($color);
  border-color: var(--color-neutral);
  background-color: rgba(54,120,23, 0.1);
  background-color: rgba(var(--rgb-neutral), 0.1);
}
[type=password]:focus {
  outline: none;
  border-color: color($color);
  border-color: var(--color-neutral);
  background-color: rgba(54,120,23, 0.1);
  background-color: rgba(var(--rgb-neutral), 0.1);
}
[type=search]:focus {
  outline: none;
  border-color: color($color);
  border-color: var(--color-neutral);
  background-color: rgba(54,120,23, 0.1);
  background-color: rgba(var(--rgb-neutral), 0.1);
}
[type=tel]:focus {
  outline: none;
  border-color: color($color);
  border-color: var(--color-neutral);
  background-color: rgba(54,120,23, 0.1);
  background-color: rgba(var(--rgb-neutral), 0.1);
}
[type=text]:focus {
  outline: none;
  border-color: color($color);
  border-color: var(--color-neutral);
  background-color: rgba(54,120,23, 0.1);
  background-color: rgba(var(--rgb-neutral), 0.1);
}
[type=time]:focus {
  outline: none;
  border-color: color($color);
  border-color: var(--color-neutral);
  background-color: rgba(54,120,23, 0.1);
  background-color: rgba(var(--rgb-neutral), 0.1);
}
[type=url]:focus {
  outline: none;
  border-color: color($color);
  border-color: var(--color-neutral);
  background-color: rgba(54,120,23, 0.1);
  background-color: rgba(var(--rgb-neutral), 0.1);
}
[type=week]:focus {
  outline: none;
  border-color: color($color);
  border-color: var(--color-neutral);
  background-color: rgba(54,120,23, 0.1);
  background-color: rgba(var(--rgb-neutral), 0.1);
}
input:not([type]):focus {
  outline: none;
  border-color: color($color);
  border-color: var(--color-neutral);
  background-color: rgba(54,120,23, 0.1);
  background-color: rgba(var(--rgb-neutral), 0.1);
}
[type=color].is-invalid {
  --rgb-accent: 224,78,38;
  --rgb-accent: var(--rgb-alert);
  --color-accent: color($color);
  --color-accent: var(--color-alert);
  border-color: color($color);
  border-color: var(--color-accent);
  color: color($color);
  color: var(--color-accent);
}
.is-invalid [type=color] {
  --rgb-accent: 224,78,38;
  --rgb-accent: var(--rgb-alert);
  --color-accent: color($color);
  --color-accent: var(--color-alert);
  border-color: color($color);
  border-color: var(--color-accent);
  color: color($color);
  color: var(--color-accent);
}
[type=date].is-invalid {
  --rgb-accent: 224,78,38;
  --rgb-accent: var(--rgb-alert);
  --color-accent: color($color);
  --color-accent: var(--color-alert);
  border-color: color($color);
  border-color: var(--color-accent);
  color: color($color);
  color: var(--color-accent);
}
.is-invalid [type=date] {
  --rgb-accent: 224,78,38;
  --rgb-accent: var(--rgb-alert);
  --color-accent: color($color);
  --color-accent: var(--color-alert);
  border-color: color($color);
  border-color: var(--color-accent);
  color: color($color);
  color: var(--color-accent);
}
[type=datetime].is-invalid {
  --rgb-accent: 224,78,38;
  --rgb-accent: var(--rgb-alert);
  --color-accent: color($color);
  --color-accent: var(--color-alert);
  border-color: color($color);
  border-color: var(--color-accent);
  color: color($color);
  color: var(--color-accent);
}
.is-invalid [type=datetime] {
  --rgb-accent: 224,78,38;
  --rgb-accent: var(--rgb-alert);
  --color-accent: color($color);
  --color-accent: var(--color-alert);
  border-color: color($color);
  border-color: var(--color-accent);
  color: color($color);
  color: var(--color-accent);
}
[type=datetime-local].is-invalid {
  --rgb-accent: 224,78,38;
  --rgb-accent: var(--rgb-alert);
  --color-accent: color($color);
  --color-accent: var(--color-alert);
  border-color: color($color);
  border-color: var(--color-accent);
  color: color($color);
  color: var(--color-accent);
}
.is-invalid [type=datetime-local] {
  --rgb-accent: 224,78,38;
  --rgb-accent: var(--rgb-alert);
  --color-accent: color($color);
  --color-accent: var(--color-alert);
  border-color: color($color);
  border-color: var(--color-accent);
  color: color($color);
  color: var(--color-accent);
}
[type=email].is-invalid {
  --rgb-accent: 224,78,38;
  --rgb-accent: var(--rgb-alert);
  --color-accent: color($color);
  --color-accent: var(--color-alert);
  border-color: color($color);
  border-color: var(--color-accent);
  color: color($color);
  color: var(--color-accent);
}
.is-invalid [type=email] {
  --rgb-accent: 224,78,38;
  --rgb-accent: var(--rgb-alert);
  --color-accent: color($color);
  --color-accent: var(--color-alert);
  border-color: color($color);
  border-color: var(--color-accent);
  color: color($color);
  color: var(--color-accent);
}
[type=month].is-invalid {
  --rgb-accent: 224,78,38;
  --rgb-accent: var(--rgb-alert);
  --color-accent: color($color);
  --color-accent: var(--color-alert);
  border-color: color($color);
  border-color: var(--color-accent);
  color: color($color);
  color: var(--color-accent);
}
.is-invalid [type=month] {
  --rgb-accent: 224,78,38;
  --rgb-accent: var(--rgb-alert);
  --color-accent: color($color);
  --color-accent: var(--color-alert);
  border-color: color($color);
  border-color: var(--color-accent);
  color: color($color);
  color: var(--color-accent);
}
[type=number].is-invalid {
  --rgb-accent: 224,78,38;
  --rgb-accent: var(--rgb-alert);
  --color-accent: color($color);
  --color-accent: var(--color-alert);
  border-color: color($color);
  border-color: var(--color-accent);
  color: color($color);
  color: var(--color-accent);
}
.is-invalid [type=number] {
  --rgb-accent: 224,78,38;
  --rgb-accent: var(--rgb-alert);
  --color-accent: color($color);
  --color-accent: var(--color-alert);
  border-color: color($color);
  border-color: var(--color-accent);
  color: color($color);
  color: var(--color-accent);
}
[type=password].is-invalid {
  --rgb-accent: 224,78,38;
  --rgb-accent: var(--rgb-alert);
  --color-accent: color($color);
  --color-accent: var(--color-alert);
  border-color: color($color);
  border-color: var(--color-accent);
  color: color($color);
  color: var(--color-accent);
}
.is-invalid [type=password] {
  --rgb-accent: 224,78,38;
  --rgb-accent: var(--rgb-alert);
  --color-accent: color($color);
  --color-accent: var(--color-alert);
  border-color: color($color);
  border-color: var(--color-accent);
  color: color($color);
  color: var(--color-accent);
}
[type=search].is-invalid {
  --rgb-accent: 224,78,38;
  --rgb-accent: var(--rgb-alert);
  --color-accent: color($color);
  --color-accent: var(--color-alert);
  border-color: color($color);
  border-color: var(--color-accent);
  color: color($color);
  color: var(--color-accent);
}
.is-invalid [type=search] {
  --rgb-accent: 224,78,38;
  --rgb-accent: var(--rgb-alert);
  --color-accent: color($color);
  --color-accent: var(--color-alert);
  border-color: color($color);
  border-color: var(--color-accent);
  color: color($color);
  color: var(--color-accent);
}
[type=tel].is-invalid {
  --rgb-accent: 224,78,38;
  --rgb-accent: var(--rgb-alert);
  --color-accent: color($color);
  --color-accent: var(--color-alert);
  border-color: color($color);
  border-color: var(--color-accent);
  color: color($color);
  color: var(--color-accent);
}
.is-invalid [type=tel] {
  --rgb-accent: 224,78,38;
  --rgb-accent: var(--rgb-alert);
  --color-accent: color($color);
  --color-accent: var(--color-alert);
  border-color: color($color);
  border-color: var(--color-accent);
  color: color($color);
  color: var(--color-accent);
}
[type=text].is-invalid {
  --rgb-accent: 224,78,38;
  --rgb-accent: var(--rgb-alert);
  --color-accent: color($color);
  --color-accent: var(--color-alert);
  border-color: color($color);
  border-color: var(--color-accent);
  color: color($color);
  color: var(--color-accent);
}
.is-invalid [type=text] {
  --rgb-accent: 224,78,38;
  --rgb-accent: var(--rgb-alert);
  --color-accent: color($color);
  --color-accent: var(--color-alert);
  border-color: color($color);
  border-color: var(--color-accent);
  color: color($color);
  color: var(--color-accent);
}
[type=time].is-invalid {
  --rgb-accent: 224,78,38;
  --rgb-accent: var(--rgb-alert);
  --color-accent: color($color);
  --color-accent: var(--color-alert);
  border-color: color($color);
  border-color: var(--color-accent);
  color: color($color);
  color: var(--color-accent);
}
.is-invalid [type=time] {
  --rgb-accent: 224,78,38;
  --rgb-accent: var(--rgb-alert);
  --color-accent: color($color);
  --color-accent: var(--color-alert);
  border-color: color($color);
  border-color: var(--color-accent);
  color: color($color);
  color: var(--color-accent);
}
[type=url].is-invalid {
  --rgb-accent: 224,78,38;
  --rgb-accent: var(--rgb-alert);
  --color-accent: color($color);
  --color-accent: var(--color-alert);
  border-color: color($color);
  border-color: var(--color-accent);
  color: color($color);
  color: var(--color-accent);
}
.is-invalid [type=url] {
  --rgb-accent: 224,78,38;
  --rgb-accent: var(--rgb-alert);
  --color-accent: color($color);
  --color-accent: var(--color-alert);
  border-color: color($color);
  border-color: var(--color-accent);
  color: color($color);
  color: var(--color-accent);
}
[type=week].is-invalid {
  --rgb-accent: 224,78,38;
  --rgb-accent: var(--rgb-alert);
  --color-accent: color($color);
  --color-accent: var(--color-alert);
  border-color: color($color);
  border-color: var(--color-accent);
  color: color($color);
  color: var(--color-accent);
}
.is-invalid [type=week] {
  --rgb-accent: 224,78,38;
  --rgb-accent: var(--rgb-alert);
  --color-accent: color($color);
  --color-accent: var(--color-alert);
  border-color: color($color);
  border-color: var(--color-accent);
  color: color($color);
  color: var(--color-accent);
}
input:not([type]).is-invalid {
  --rgb-accent: 224,78,38;
  --rgb-accent: var(--rgb-alert);
  --color-accent: color($color);
  --color-accent: var(--color-alert);
  border-color: color($value);
  border-color: var(--color-accent);
  color: color($value);
  color: var(--color-accent);
}
input:not([type]).is-invalid:not([type]).is-invalid {
  color: color($color);
  color: var(--color-accent);
}
input:not([type]).is-invalid:not([type]) {
  color: color($color);
  color: var(--color-accent);
}
input:not([type]).is-invalid:not([type]).is-invalid {
  border-color: color($color);
  border-color: var(--color-accent);
}
input:not([type]).is-invalid:not([type]) {
  border-color: color($color);
  border-color: var(--color-accent);
}
.is-invalid input:not([type]) {
  --rgb-accent: 224,78,38;
  --rgb-accent: var(--rgb-alert);
  --color-accent: color($color);
  --color-accent: var(--color-alert);
  border-color: color($color);
  border-color: var(--color-accent);
  color: color($color);
  color: var(--color-accent);
}
.is-invalid input:not([type]):not([type]) {
  color: color($color);
  color: var(--color-accent);
}
.is-invalid input:not([type]):not([type]).is-invalid {
  color: color($color);
  color: var(--color-accent);
}
.is-invalid input:not([type]):not([type]) {
  color: color($color);
  color: var(--color-accent);
}
.is-invalid input:not([type]):not([type]) {
  border-color: color($color);
  border-color: var(--color-accent);
}
.is-invalid input:not([type]):not([type]).is-invalid {
  border-color: color($color);
  border-color: var(--color-accent);
}
.is-invalid input:not([type]):not([type]) {
  border-color: color($color);
  border-color: var(--color-accent);
}
.input--text [type=color],
.input--text [type=date],
.input--text [type=datetime],
.input--text [type=datetime-local],
.input--text [type=email],
.input--text [type=month],
.input--text [type=number],
.input--text [type=password],
.input--text [type=search],
.input--text [type=tel],
.input--text [type=text],
.input--text [type=time],
.input--text [type=url],
.input--text [type=week],
.input--text input:not([type]) {
  width: 100%;
}

.input--text {
  position: relative;
}
.input--text.is-required label:after {
  margin-left: 0.3em;
  color: color($color);
  color: var(--color-attention);
  content: "*";
}

.text-input-collapsed-group {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  width: 40.0616384629rem;
}
.text-input-collapsed-group input {
  flex: auto;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}
.text-input-collapsed-group input + input {
  margin-top: -1px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
.text-input-collapsed-group input + input:hover, .text-input-collapsed-group input + input:focus, .text-input-collapsed-group input + input:active {
  z-index: 1;
}
.text-input-collapsed-group input:last-child {
  border-bottom-right-radius: 3px;
  border-bottom-left-radius: 3px;
}
[type=number] {
  font-family: Overpass Mono, -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
  font-family: var(--font-mono);
}

select {
  --rgb-accent: 136, 196, 21;
  --rgb-accent: var(--rgb-primary);
  --color-accent: color($color);
  --color-accent: var(--color-primary);
  box-sizing: border-box;
  padding: 0.5em;
  height: 2.5em;
  border: 1px solid rgba(82,92,112, 0.2);
  border-radius: 3px;
  background-color: rgba(255,255,255, 0.3);
  background-color: rgba(var(--rgb-light), 0.3);
  color: inherit;
  text-align: inherit;
  font-size: 1.618rem;
  font-family: inherit;
  line-height: 1.5;
  transition: 0.2s;
}
select[disabled] {
  background-color: rgba(220,220,227, 0.7);
  background-color: rgba(var(--rgb-gray), 0.7);
  opacity: 0.6;
  pointer-events: none;
}
select::-moz-placeholder {
  color: rgba(19,29,50, 0.5);
  color: rgba(var(--rgb-text), 0.5);
  font-style: italic;
}
select::placeholder {
  color: rgba(19,29,50, 0.5);
  color: rgba(var(--rgb-text), 0.5);
  font-style: italic;
}
select:hover {
  border-color: color($color);
  border-color: var(--color-accent);
  transition: 0.1s;
}
select:focus {
  outline: none;
  border-color: color($color);
  border-color: var(--color-neutral);
  background-color: rgba(54,120,23, 0.1);
  background-color: rgba(var(--rgb-neutral), 0.1);
}
select.is-invalid {
  --rgb-accent: 224,78,38;
  --rgb-accent: var(--rgb-alert);
  --color-accent: color($color);
  --color-accent: var(--color-alert);
  border-color: color($color);
  border-color: var(--color-accent);
  color: color($color);
  color: var(--color-accent);
}
.is-invalid select {
  --rgb-accent: 224,78,38;
  --rgb-accent: var(--rgb-alert);
  --color-accent: color($color);
  --color-accent: var(--color-alert);
  border-color: color($color);
  border-color: var(--color-accent);
  color: color($color);
  color: var(--color-accent);
}
.select select {
  padding-right: 1em;
  width: 100%;
}
.is-invalid select {
  border-color: color($color);
  border-color: var(--color-accent);
  color: color($color);
  color: var(--color-accent);
}

.select.is-required label:after {
  margin-left: 0.3em;
  color: color($color);
  color: var(--color-attention);
  content: "*";
}

option {
  color: color($color);
  color: var(--color-shadow);
}

.radio {
  position: relative;
}
.radio.is-required label:after {
  margin-left: 0.3em;
  color: color($color);
  color: var(--color-attention);
  content: "*";
}
.radio [type=radio] {
  position: absolute;
  opacity: 0;
}
.radio [type=radio]:checked + label:before {
  background-color: color($value);
  background-color: var(--color-accent);
  opacity: 1;
}
.radio [type=radio]:checked + label:after {
  background-color: color($color);
  background-color: var(--color-light);
  transition-delay: 0.1s;
  transform: translateY(-50%) scale(0.4);
}
.radio [type=radio]:focus + label:before {
  background-color: rgba(136, 196, 21, 0.3);
  background-color: rgba(var(--rgb-primary), 0.3);
  box-shadow: undefined;
  box-shadow: 0 0 2px 2px var(--color-emerald);
  opacity: 1;
  transition: 0.1s ease;
}
.radio [type=radio]:focus:checked + label:before {
  background-color: color($color);
  background-color: var(--color-primary);
}
.radio label {
  position: relative;
  display: block;
  padding: 0.25em 0.25em 0.25em 1.5em;
}
.radio label:before, .radio label:after {
  position: absolute;
  top: 50%;
  left: 0;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  content: "";
  transform: translateY(-50%);
}
@media only screen and (min-width: 1040px) {
  .radio label:before, .radio label:after {
    transition: 0.1s ease;
  }
}
@media only screen and (min-width: 1040px) {
  .radio label:hover:before {
    opacity: 0.5;
  }
}
.radio label:active:before {
  opacity: 0.6;
}
.radio label:before {
  background-color: color($value);
  background-color: var(--color-text);
  opacity: 0.25;
}
.radio label:after {
  transform: translateY(-50%) scale(0);
}

.checkbox {
  position: relative;
}
.checkbox.is-required label:after {
  margin-left: 0.3em;
  color: color($color);
  color: var(--color-attention);
  content: "*";
}
.checkbox.centered {
  display: inline-block;
  align-self: center;
}
.checkbox [type=checkbox] {
  position: absolute;
  opacity: 0;
}
.checkbox [type=checkbox]:checked + label:before {
  background-color: color($color);
  background-color: var(--color-primary);
  opacity: 1;
}
.checkbox [type=checkbox]:checked + label:after {
  width: 1em;
  transition-delay: 0.1s;
}
.checkbox [type=checkbox]:focus + label:before {
  background-color: rgba(136, 196, 21, 0.3);
  background-color: rgba(var(--rgb-primary), 0.3);
  box-shadow: undefined;
  box-shadow: 0 0 2px 2px var(--color-emerald);
  opacity: 1;
  transition: 0.1s ease;
}
.checkbox [type=checkbox]:focus:checked + label:before {
  background-color: color($color);
  background-color: var(--color-primary);
}
.checkbox label {
  position: relative;
  display: block;
  padding: 0.25em 0.25em 0.25em 1.5em;
}
.checkbox label:before, .checkbox label:after {
  position: absolute;
  top: 50%;
  left: 0;
  display: block;
  width: 1em;
  height: 1em;
  content: "";
  transform: translateY(-50%);
}
@media only screen and (min-width: 1040px) {
  .checkbox label:before, .checkbox label:after {
    transition: 0.4s ease;
  }
}
@media only screen and (min-width: 1040px) {
  .checkbox label:hover:before {
    opacity: 0.5;
  }
}
.checkbox label:active:before {
  opacity: 0.3;
}
.checkbox label:before {
  background-color: color($value);
  background-color: var(--color-text);
  opacity: 0.25;
}
.checkbox label:after {
  width: 0;
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSc5LjcxJyBoZWlnaHQ9JzYuNzYnIHZpZXdCb3g9JzAgMCA5LjcxIDYuNzYnPjxkZWZzPiA8c3R5bGUgdHlwZT0ndGV4dC9jc3MnPnBvbHlsaW5lIHtzdHJva2U6IHdoaXRlO2ZpbGw6IG5vbmU7c3Ryb2tlLXdpZHRoOiAxLjU7fSAgPC9zdHlsZT4gPC9kZWZzPjxwb2x5bGluZSBwb2ludHM9JzAuMzUgMi43NSAzLjY1IDYuMDUgOS4zNSAwLjM1Jy8+PC9zdmc+);
  background-position: left 0.125em center;
  background-size: 0.75em;
  background-repeat: no-repeat;
}

textarea {
  --rgb-accent: 136, 196, 21;
  --rgb-accent: var(--rgb-primary);
  --color-accent: color($color);
  --color-accent: var(--color-primary);
  box-sizing: border-box;
  padding: 0.5em;
  height: 2.5em;
  border: 1px solid rgba(82,92,112, 0.2);
  border-radius: 3px;
  background-color: rgba(255,255,255, 0.3);
  background-color: rgba(var(--rgb-light), 0.3);
  color: inherit;
  text-align: inherit;
  font-size: 1.618rem;
  font-family: inherit;
  line-height: 1.5;
  transition: 0.2s;
}
textarea[disabled] {
  background-color: rgba(220,220,227, 0.7);
  background-color: rgba(var(--rgb-gray), 0.7);
  opacity: 0.6;
  pointer-events: none;
}
textarea::-moz-placeholder {
  color: rgba(19,29,50, 0.5);
  color: rgba(var(--rgb-text), 0.5);
  font-style: italic;
}
textarea::placeholder {
  color: rgba(19,29,50, 0.5);
  color: rgba(var(--rgb-text), 0.5);
  font-style: italic;
}
textarea:hover {
  border-color: color($color);
  border-color: var(--color-accent);
  transition: 0.1s;
}
textarea:focus {
  outline: none;
  border-color: color($color);
  border-color: var(--color-neutral);
  background-color: rgba(54,120,23, 0.1);
  background-color: rgba(var(--rgb-neutral), 0.1);
}
textarea.is-invalid {
  --rgb-accent: 224,78,38;
  --rgb-accent: var(--rgb-alert);
  --color-accent: color($color);
  --color-accent: var(--color-alert);
  border-color: color($color);
  border-color: var(--color-accent);
  color: color($color);
  color: var(--color-accent);
}
.is-invalid textarea {
  --rgb-accent: 224,78,38;
  --rgb-accent: var(--rgb-alert);
  --color-accent: color($color);
  --color-accent: var(--color-alert);
  border-color: color($color);
  border-color: var(--color-accent);
  color: color($color);
  color: var(--color-accent);
}

.textarea textarea {
  min-height: 11.0890051809rem;
  width: 100%;
  height: auto;
}

.range input {
  margin-top: 0.618em;
  width: 100%;
}

[type=range] {
  background: transparent;
  -webkit-appearance: none;
}
[type=range]::-webkit-slider-thumb {
  margin-top: -0.7em;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  background-color: color($value);
  background-color: var(--color-accent);
  -webkit-appearance: none;
}
[type=range]::-moz-range-thumb {
  margin-top: -0.7em;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  background-color: color($value);
  background-color: var(--color-accent);
  -webkit-appearance: none;
}
[type=range]::-ms-thumb {
  margin-top: -0.7em;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  background-color: color($value);
  background-color: var(--color-accent);
  -webkit-appearance: none;
}
[type=range]:focus {
  outline: none;
}
[type=range]::-webkit-slider-runnable-track {
  margin-top: 0.6em;
  width: 100%;
  height: 0;
  border-width: 0.4em 0 0 0;
  border-style: solid;
  border-color: rgba(19,29,50, 0.3);
  border-color: rgba(var(--rgb-text), 0.3);
  color: transparent;
  cursor: pointer;
}
[type=range]::-moz-range-track {
  margin-top: 0.6em;
  width: 100%;
  height: 0;
  border-width: 0.4em 0 0 0;
  border-style: solid;
  border-color: rgba(19,29,50, 0.3);
  border-color: rgba(var(--rgb-text), 0.3);
  color: transparent;
  cursor: pointer;
}
[type=range]::-ms-track {
  margin-top: 0.6em;
  width: 100%;
  height: 0;
  border-width: 0.4em 0 0 0;
  border-style: solid;
  border-color: rgba(19,29,50, 0.3);
  border-color: rgba(var(--rgb-text), 0.3);
  color: transparent;
  cursor: pointer;
}

fieldset {
  margin: 0.5em;
  padding: calc(0.19rem * 2);
  padding: calc(var(--spacing-sm) * 2);
  width: 100%;
  border-color: rgba(19,29,50, 0.2);
  border-color: rgba(var(--rgb-text), 0.2);
}

@media only screen and (min-width: 640px) {
  fieldset {
  padding: calc(u(0.381) * 2);
  padding: calc(var(--spacing-sm) * 2);
  }
}
fieldset[class*=flex-] {
  box-sizing: border-box;
  padding: calc(0.19rem * 2);
  padding: calc(var(--spacing-sm) * 2);
}
@media only screen and (min-width: 640px) {
  fieldset[class*=flex-] {
  padding: calc(u(0.381) * 2);
  padding: calc(var(--spacing-sm) * 2);
  }
}

legend {
  font-weight: 700;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
  font-family: var(--font-heading);
}
legend + * {
  margin-top: 0 !important;
}

.toggle {
  position: relative;
  display: block;
  transform: translate(0, 0);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.toggle [type=checkbox] {
  position: absolute;
  top: 0.618em;
  right: 0.618em;
  opacity: 0;
}
.toggle [type=checkbox]:focus {
  outline: none;
}
.toggle [type=checkbox]:focus + label:before {
  right: -1px;
  border: 1px rgb(136, 196, 21) solid;
}
.toggle [type=checkbox]:checked + label:before {
  color: color($color);
  color: var(--color-light);
}
.toggle [type=checkbox]:checked + label:after {
  border-radius: 50%;
  background: color($color);
  background: var(--color-primary);
  color: color($color);
  color: var(--color-light);
  transform: translate(10%, -50%);
}
.toggle label {
  position: relative;
  display: inline-block;
  padding: 0.618em 0;
  padding-left: 5.32rem;
}
.toggle label:hover {
  filter: brightness(1.2);
}
.widget-panel .toggle label {
  padding-right: 6rem;
  padding-left: 0;
}
.toggle label:before {
  position: absolute;
  top: 50%;
  left: 0;
  width: 4rem;
  height: 1.52rem;
  border-width: 1px;
  border-style: solid;
  border-color: rgba(19,29,50, 0.1);
  border-color: rgba(var(--rgb-text), 0.1);
  border-radius: 999px;
  background-color: rgba(19,29,50, 0.1);
  background-color: rgba(var(--rgb-text), 0.1);
  content: "";
  transform: translateY(-50%);
}
.widget-panel .toggle label:before {
  right: 0;
  left: auto;
}
.toggle label:after {
  position: absolute;
  top: 50%;
  left: 2rem;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background-color: color($color);
  background-color: var(--color-light);
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
  content: "";
  transition: 0.15s ease;
  transform: translate(-105%, -50%);
}
.widget-panel .toggle label:after {
  right: 0;
  left: auto;
}

.input--toggle-group .toggle {
  margin-top: 0.5em;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 1em 1.25em;
  min-height: 3em;
  border: none;
  border-radius: 3px;
  background-color: color($value);
  background-color: var(--color-accent);
  background-image: linear-gradient(45deg, varColor(shadow,0), varColor(shadow,0.16));
  background-image: var(--theme-button-background-image);
  color: color($color);
  color: var(--color-shadow);
  font-weight: 600;
  font-size: 1.618rem;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
  font-family: var(--font-heading);
  line-height: 1;
  transition: 0.3s;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}

.button--full-width {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 1em 1.25em;
  min-height: 3em;
  border: none;
  border-radius: 3px;
  background-color: color($value);
  background-color: var(--color-accent);
  background-image: linear-gradient(45deg, varColor(shadow,0), varColor(shadow,0.16));
  background-image: var(--theme-button-background-image);
  color: color($color);
  color: var(--color-shadow);
  font-weight: 600;
  font-size: 1.618rem;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
  font-family: var(--font-heading);
  line-height: 1;
  transition: 0.3s;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}
.button span, .button--full-width span {
  transition: 0.2s;
}
.button svg, .button--full-width svg {
  display: block;
  fill: currentColor;
}
.button:hover, .button--full-width:hover {
  filter: brightness(1.1);
  transition: 0.1s;
}
.button:focus {
  outline: none;
  box-shadow: 0 0 4px 2px color($color);
  box-shadow: 0 0 4px 2px var(--color-attention);
}
.button--full-width:focus {
  outline: none;
  box-shadow: 0 0 4px 2px color($color);
  box-shadow: 0 0 4px 2px var(--color-attention);
}
.button:active, .button--full-width:active {
  filter: brightness(0.86);
  transform: scale(0.99);
}
.button.is-white {
  background-color: color($color);
  background-color: var(--color-white);
  color: rgba(0,0,0, 0.9);
  color: rgba(var(--rgb-black), 0.9);
}
.is-white.button--full-width {
  background-color: color($color);
  background-color: var(--color-white);
  color: rgba(0,0,0, 0.9);
  color: rgba(var(--rgb-black), 0.9);
}
.button.is-outlined {
  background-color: transparent;
  background-image: none;
  box-shadow: inset 0 0 1px 1px color($value);
  box-shadow: inset 0 0 1px 1px var(--color-accent);
  color: inherit;
}
.is-outlined.button--full-width {
  background-color: transparent;
  background-image: none;
  box-shadow: inset 0 0 1px 1px color($value);
  box-shadow: inset 0 0 1px 1px var(--color-accent);
  color: inherit;
}
.button.is-outlined:focus {
  outline: none;
  box-shadow: inset 0 0 1px 1px color($value), 0 0 4px 2px color($color);
  box-shadow: inset 0 0 1px 1px var(--color-accent), 0 0 4px 2px var(--color-attention);
}
.is-outlined.button--full-width:focus {
  outline: none;
  box-shadow: inset 0 0 1px 1px color($value), 0 0 4px 2px color($color);
  box-shadow: inset 0 0 1px 1px var(--color-accent), 0 0 4px 2px var(--color-attention);
}
.button.is-outlined:hover {
  background-color: color($value);
  background-color: var(--color-accent);
  background-image: linear-gradient(45deg, varColor(shadow,0), varColor(shadow,0.16));
  background-image: var(--theme-button-background-image);
  box-shadow: none;
  color: color($color);
  color: var(--color-white);
}
.is-outlined.button--full-width:hover {
  background-color: color($value);
  background-color: var(--color-accent);
  background-image: linear-gradient(45deg, varColor(shadow,0), varColor(shadow,0.16));
  background-image: var(--theme-button-background-image);
  box-shadow: none;
  color: color($color);
  color: var(--color-white);
}
.button.is-transparent, .is-transparent.button--full-width {
  background-color: transparent;
  color: inherit;
}
.button.is-transparent:hover {
  background-color: color($value);
  background-color: var(--color-accent);
  color: color($color);
  color: var(--color-white);
}
.is-transparent.button--full-width:hover {
  background-color: color($value);
  background-color: var(--color-accent);
  color: color($color);
  color: var(--color-white);
}
.button[disabled] {
  color: rgba(19,29,50, 0.5);
  color: rgba(var(--rgb-text), 0.5);
  filter: grayscale(0.9) brightness(0.9);
  pointer-events: none;
}
[disabled].button--full-width {
  color: rgba(19,29,50, 0.5);
  color: rgba(var(--rgb-text), 0.5);
  filter: grayscale(0.9) brightness(0.9);
  pointer-events: none;
}
.button .disabled {
  color: rgba(19,29,50, 0.5);
  color: rgba(var(--rgb-text), 0.5);
  filter: grayscale(0.9) brightness(0.9);
  pointer-events: none;
}
.button--full-width .disabled {
  color: rgba(19,29,50, 0.5);
  color: rgba(var(--rgb-text), 0.5);
  filter: grayscale(0.9) brightness(0.9);
  pointer-events: none;
}
.button .is-disabled {
  color: rgba(19,29,50, 0.5);
  color: rgba(var(--rgb-text), 0.5);
  filter: grayscale(0.9) brightness(0.9);
  pointer-events: none;
}
.button--full-width .is-disabled {
  color: rgba(19,29,50, 0.5);
  color: rgba(var(--rgb-text), 0.5);
  filter: grayscale(0.9) brightness(0.9);
  pointer-events: none;
}

.button--full-width {
  padding: 1em;
  width: 100%;
}

.button--text {
  display: inline-flex;
  align-items: center;
  border: none;
  border-radius: 0;
  background-color: transparent;
  color: color($value);
  color: var(--color-accent);
  font-weight: 700;
}
.button--text atrium-icon {
  fill: currentColor;
}
.button--text * + * {
  margin-left: 0.5em;
}

.table-wrapper {
  flex: auto;
  overflow: auto;
}
.table-wrapper table, .table-wrapper > * {
  max-width: 100%;
}

th {
  text-align: left;
}

.table--standard {
  min-width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}
.table--standard th {
  height: 4.76rem;
  background-color: rgba(136, 196, 21, 0.15);
  background-color: rgba(var(--rgb-accent), 0.15);
  color: color($value);
  color: var(--color-accent);
}
.table--standard th, .table--standard td {
  padding: 0.75em 0.38em;
}
.view-section .table--standard th:first-child {
  padding-left: 0.33rem;
  padding-left: var(--spacing-md);
  width: 0;
}
@media only screen and (min-width: 1440px) {
  .view-section .table--standard th:first-child {
  padding-left: u(0.75);
  padding-left: var(--spacing-md);
  }
}
@media only screen and (min-width: 1040px) {
  .view-section .table--standard th:first-child {
  padding-left: u(0.618);
  padding-left: var(--spacing-md);
  }
}
@media only screen and (min-width: 640px) {
  .view-section .table--standard th:first-child {
  padding-left: u(0.5);
  padding-left: var(--spacing-md);
  }
}
.view-section .table--standard td:first-child {
  padding-left: 0.33rem;
  padding-left: var(--spacing-md);
  width: 0;
}
@media only screen and (min-width: 1440px) {
  .view-section .table--standard td:first-child {
  padding-left: u(0.75);
  padding-left: var(--spacing-md);
  }
}
@media only screen and (min-width: 1040px) {
  .view-section .table--standard td:first-child {
  padding-left: u(0.618);
  padding-left: var(--spacing-md);
  }
}
@media only screen and (min-width: 640px) {
  .view-section .table--standard td:first-child {
  padding-left: u(0.5);
  padding-left: var(--spacing-md);
  }
}
.view-section .table--standard th:last-child {
  padding-right: 0.33rem;
  padding-right: var(--spacing-md);
  width: 0;
  text-align: right;
}
@media only screen and (min-width: 1440px) {
  .view-section .table--standard th:last-child {
  padding-right: u(0.75);
  padding-right: var(--spacing-md);
  }
}
@media only screen and (min-width: 1040px) {
  .view-section .table--standard th:last-child {
  padding-right: u(0.618);
  padding-right: var(--spacing-md);
  }
}
@media only screen and (min-width: 640px) {
  .view-section .table--standard th:last-child {
  padding-right: u(0.5);
  padding-right: var(--spacing-md);
  }
}
.view-section .table--standard td:last-child {
  padding-right: 0.33rem;
  padding-right: var(--spacing-md);
  width: 0;
  text-align: right;
}
@media only screen and (min-width: 1440px) {
  .view-section .table--standard td:last-child {
  padding-right: u(0.75);
  padding-right: var(--spacing-md);
  }
}
@media only screen and (min-width: 1040px) {
  .view-section .table--standard td:last-child {
  padding-right: u(0.618);
  padding-right: var(--spacing-md);
  }
}
@media only screen and (min-width: 640px) {
  .view-section .table--standard td:last-child {
  padding-right: u(0.5);
  padding-right: var(--spacing-md);
  }
}
.table--standard th.cell-title, .table--standard td.cell-title {
  font-weight: 600;
}
.table--standard th.cell-numeric, .table--standard td.cell-numeric {
  text-align: right;
}
.table--standard th.cell-break-word, .table--standard td.cell-break-word {
  word-break: break-all;
}
.table--standard tr:nth-child(even) th {
  background-color: rgba(220,220,227, 0.15);
  background-color: rgba(var(--rgb-gray), 0.15);
}
.table--standard tr:nth-child(even) td {
  background-color: rgba(220,220,227, 0.15);
  background-color: rgba(var(--rgb-gray), 0.15);
}
.table--standard a {
  color: color($value);
  color: var(--color-accent);
  font-weight: 600;
}

#__bs_notify__ {
  top: auto !important;
  right: 50% !important;
  bottom: 10px !important;
  min-width: 12rem;
  border-radius: 999px !important;
  background-color: color($color) !important;
  background-color: var(--color-primary) !important;
  transform: translateX(50%) !important;
  animation: fade-in 0.3s ease;
}

:root {
  background-color: varColor(white);
  background-color: var(--theme-app-color-bg);
  color: varColor(shadow);
  color: var(--theme-app-color-text);
}

.grid {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  margin-right: calc(1.2rem * -0.5);
  margin-right: calc(var(--theme-grid-gap) * -0.5);
  margin-left: calc(1.2rem * -0.5);
  margin-left: calc(var(--theme-grid-gap) * -0.5);
}
.grid > * {
  margin-top: calc(1.2rem * 0.5);
  margin-top: calc(var(--theme-grid-gap) * 0.5);
  padding: calc(1.2rem * 0.5);
  padding: calc(var(--theme-grid-gap) * 0.5);
}
.grid.no-wrap {
  flex-wrap: nowrap;
}

.grid-1-col {
  flex-basis: 50%;
  flex-grow: 0;
  flex-shrink: 0;
}
@media only screen and (min-width: 640px) {
  .grid-1-col {
    flex-basis: 33.3333333333%;
  }
}
@media only screen and (min-width: 1040px) {
  .grid-1-col {
    flex-basis: 8.3333333333%;
  }
}

.grid-2-col {
  flex-basis: 50%;
  flex-grow: 0;
  flex-shrink: 0;
}
@media only screen and (min-width: 640px) {
  .grid-2-col {
    flex-basis: 33.3333333333%;
  }
}
@media only screen and (min-width: 1040px) {
  .grid-2-col {
    flex-basis: 16.6666666667%;
  }
}

.grid-3-col {
  flex-basis: 100%;
  flex-grow: 0;
  flex-shrink: 0;
}
@media only screen and (min-width: 640px) {
  .grid-3-col {
    flex-basis: 66.6666666667%;
  }
}
@media only screen and (min-width: 1040px) {
  .grid-3-col {
    flex-basis: 25%;
  }
}

.grid-4-col {
  flex-basis: 100%;
  flex-grow: 0;
  flex-shrink: 0;
}
@media only screen and (min-width: 640px) {
  .grid-4-col {
    flex-basis: 66.6666666667%;
  }
}
@media only screen and (min-width: 1040px) {
  .grid-4-col {
    flex-basis: 33.3333333333%;
  }
}

.grid-5-col {
  flex-basis: 100%;
  flex-grow: 0;
  flex-shrink: 0;
}
@media only screen and (min-width: 640px) {
  .grid-5-col {
    flex-basis: 100%;
  }
}
@media only screen and (min-width: 1040px) {
  .grid-5-col {
    flex-basis: 41.6666666667%;
  }
}

.grid-6-col {
  flex-basis: 100%;
  flex-grow: 0;
  flex-shrink: 0;
}
@media only screen and (min-width: 640px) {
  .grid-6-col {
    flex-basis: 100%;
  }
}
@media only screen and (min-width: 1040px) {
  .grid-6-col {
    flex-basis: 50%;
  }
}

.grid-7-col {
  flex-basis: 100%;
  flex-grow: 0;
  flex-shrink: 0;
}
@media only screen and (min-width: 640px) {
  .grid-7-col {
    flex-basis: 100%;
  }
}
@media only screen and (min-width: 1040px) {
  .grid-7-col {
    flex-basis: 58.3333333333%;
  }
}

.grid-8-col {
  flex-basis: 100%;
  flex-grow: 0;
  flex-shrink: 0;
}
@media only screen and (min-width: 640px) {
  .grid-8-col {
    flex-basis: 100%;
  }
}
@media only screen and (min-width: 1040px) {
  .grid-8-col {
    flex-basis: 66.6666666667%;
  }
}

.grid-9-col {
  flex-basis: 100%;
  flex-grow: 0;
  flex-shrink: 0;
}
@media only screen and (min-width: 640px) {
  .grid-9-col {
    flex-basis: 100%;
  }
}
@media only screen and (min-width: 1040px) {
  .grid-9-col {
    flex-basis: 75%;
  }
}

.grid-10-col {
  flex-basis: 100%;
  flex-grow: 0;
  flex-shrink: 0;
}
@media only screen and (min-width: 640px) {
  .grid-10-col {
    flex-basis: 100%;
  }
}
@media only screen and (min-width: 1040px) {
  .grid-10-col {
    flex-basis: 83.3333333333%;
  }
}

.grid-11-col {
  flex-basis: 100%;
  flex-grow: 0;
  flex-shrink: 0;
}
@media only screen and (min-width: 640px) {
  .grid-11-col {
    flex-basis: 100%;
  }
}
@media only screen and (min-width: 1040px) {
  .grid-11-col {
    flex-basis: 91.6666666667%;
  }
}

.grid-12-col {
  flex-basis: 100%;
  flex-grow: 0;
  flex-shrink: 0;
}
@media only screen and (min-width: 640px) {
  .grid-12-col {
    flex-basis: 100%;
  }
}
@media only screen and (min-width: 1040px) {
  .grid-12-col {
    flex-basis: 100%;
  }
}

/*

One Click Accessibility Plugin (Ally)

Extras Fixes for (modes):

- General
- High Contrast
- Grayscale

*/
/* Start - General */
#pojo-a11y-skip-content {
  display: none;
}

#pojo-a11y-toolbar.pojo-a11y-toolbar-right,
#pojo-a11y-toolbar .pojo-a11y-toolbar-right .pojo-a11y-toolbar-open {
  z-index: 10005;
}

.pojo-a11y-toolbar-text {
  font-size: 1.5rem;
  font-weight: 500;
}

html body.pojo-a11y-high-contrast a {
  background-color: transparent !important;
}

html body.pojo-a11y-high-contrast a.button, html body.pojo-a11y-high-contrast a.button--full-width,
html body.pojo-a11y-high-contrast a:hover svg {
  background-color: #400000 !important;
}

/* End - General */
/* Start - CF7 */
body.pojo-a11y-high-contrast form.wpcf7-form label {
  color: #00ffff !important;
}

body.pojo-a11y-high-contrast form.wpcf7-form span span {
  color: #0080ff !important;
}

body.pojo-a11y-high-contrast form.wpcf7-form input::-moz-placeholder {
  color: yellow !important;
}

body.pojo-a11y-high-contrast form.wpcf7-form input,
body.pojo-a11y-high-contrast form.wpcf7-form textarea,
body.pojo-a11y-high-contrast form.wpcf7-form input::placeholder {
  color: yellow !important;
}

/* End - CF7 */
body.pojo-a11y-high-contrast {
  background-color: black !important;
}

body.pojo-a11y-high-contrast .search-form-box input::-moz-placeholder {
  color: yellow !important;
}

body.pojo-a11y-high-contrast .search-form-box input,
body.pojo-a11y-high-contrast .search-form-box input::placeholder {
  color: yellow !important;
}
body.pojo-a11y-high-contrast .wpcf7 button {
  background-color: transparent !important;
  border: none !important;
}

#laptop-service :nth-child(2) img {
  width: 190px;
}

.contact-title {
  padding-left: 1em;
  padding-top: 1em;
  text-align: center;
}

.index {
  border: 1px solid #bdbdbd;
}
.index .site-nav {
  margin: 0 0 2em 0;
}

.store-title {
  color: rgb(154, 213, 50);
  z-index: 2000;
  padding-left: 0.7em;
  padding-top: 2.5em;
  transition: 0.3s ease;
  display: none;
}
.store-title h4 {
  color: white;
}
@media only screen and (max-width: 639px) {
  .store-title {
    display: none;
  }
}
@media only screen and (min-width: 1280px) {
  .store-title {
    padding-top: 3.5em;
    display: block;
  }
}

p {
  line-height: 1.3em;
}

header {
  background-color: black;
  padding: 0.5em;
  display: flex;
  flex-direction: column;
}
header section {
  color: white;
  display: flex;
  justify-content: flex-end;
}

header button {
  background-color: black;
  border: none;
}
header button svg {
  fill: white;
}

.search .search-input input::-moz-placeholder {
  color: gray;
  opacity: 1;
}

.search .search-input input::placeholder {
  color: gray;
  opacity: 1;
}

.navigation {
  height: 5em;
  background-color: black;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
@media only screen and (min-width: 640px) {
  .navigation {
    height: 6em;
  }
}
@media only screen and (max-width: 359px) {
  .navigation {
    height: initial;
    flex-direction: column;
  }
  .navigation .info {
    border-right: none !important;
    padding-right: 0 !important;
    margin: 1.618rem;
  }
  .navigation .info a:before {
    display: inline !important;
  }
}
.navigation img {
  padding: 0.5em;
  margin-left: 1.3em;
  transition: 0.3s ease;
}
@media only screen and (max-width: 359px) {
  .navigation img {
    height: auto !important;
    width: 160px;
    margin-top: 0em !important;
    margin-left: 0;
  }
}
@media only screen and (max-width: 639px) {
  .navigation img {
    height: auto;
    width: 160px;
    margin-top: 0.5em;
  }
}
@media only screen and (min-width: 640px) {
  .navigation img {
    z-index: 1000;
    height: auto;
    width: 200px;
    margin-top: 0.5em;
  }
}
@media only screen and (min-width: 1152px) {
  .navigation img {
    height: auto;
    width: 220px;
    margin-top: 4.3em;
  }
}
.navigation .page-header {
  flex: 3;
}

.search {
  display: flex;
  justify-content: flex-end;
  text-align: right;
}
.search .info {
  padding-right: 1em;
  border-right: 1.5px solid gray;
  height: 70%;
  font-size: 1.2rem;
}
@media only screen and (min-width: 768px) {
  .search .info {
    font-size: 1.38rem;
  }
}
@media only screen and (min-width: 990px) {
  .search .info {
    font-size: 1.618rem;
  }
}
.search .info a {
  color: rgb(136, 196, 21);
  font-weight: bold;
  transition: 0.3s ease;
  font-size: 1.4em;
}
.search .info a:hover {
  color: rgba(136, 196, 21, 0.8);
}
.search .info a:active {
  color: rgba(136, 196, 21, 0.7);
}
.search .info p:first-child {
  color: rgb(154, 213, 50);
}
.search .info p:nth-child(2) {
  color: #c5c5c5;
}
@media only screen and (max-width: 639px) {
  .search .info a {
    font-size: 1.6em !important;
    display: block;
  }
  .search .info a:before {
    content: "Call:";
    display: block;
  }
  .search .info p {
    display: none;
  }
}
@media only screen and (min-width: 640px) {
  .search .info {
    display: inline-block;
  }
}
.search .search-input {
  line-height: 1;
  margin-right: 1em;
  display: none;
  flex-direction: row-reverse;
}
@media only screen and (min-width: 640px) {
  .search .search-input {
    padding-left: 1em;
    display: flex;
  }
}
.search .search-input input {
  background-color: black;
  border: none;
  font-size: 1em;
  color: white;
  width: 70%;
  height: 100%;
}
.search .search-input svg {
  fill: rgb(255,255,255) !important;
}
.search .search-input #searchsubmit {
  visibility: hidden;
  flex: 0 0 1%;
  position: absolute;
  top: 0;
  left: 0;
}
.search .search-input input[type=text] {
  flex: 0 0 85%;
  transition: 0.3s ease;
}
.search .search-input input[type=text]:hover {
  background: rgba(255,255,255, 0.2);
}
.search .search-input input[type=text]:active {
  background: rgba(255,255,255, 0.1);
}
.search .search-input .search-form-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.mobile-site-nav {
  background-color: rgb(42, 50, 49);
  color: white;
  padding-top: 1em;
  text-align: center;
  padding-bottom: 1.1em;
}
.mobile-site-nav li {
  display: block;
  padding: 1.1em;
}
.mobile-site-nav ul {
  display: flex;
  flex-direction: column;
  background-color: rgb(42, 50, 49);
}
@media only screen and (max-width: 639px) {
  .mobile-site-nav {
    display: flex;
    justify-content: center;
  }
}
@media only screen and (min-width: 820px) {
  .mobile-site-nav {
    display: none;
  }
}
.mobile-site-nav .summary {
  padding-bottom: 1em;
}
.mobile-site-nav .summary::-webkit-details-marker {
  display: none;
}

.site-nav {
  background-color: rgb(42, 50, 49);
  display: flex;
  justify-content: flex-end;
  display: none;
}
.site-nav.is-open {
  display: flex;
}
@media only screen and (min-width: 820px) {
  .site-nav {
    display: flex;
  }
}

.nav-title {
  color: rgb(154, 213, 50);
  display: none;
}
@media only screen and (min-width: 1040px) {
  .nav-title {
    display: inline-block;
  }
}

li {
  display: inline-block;
}

.site-offer-section {
  background-color: #f4f5f7;
  padding-bottom: 1em;
}
@media only screen and (max-width: 639px) {
  .site-offer-section {
    padding-right: 2em;
    padding-left: 2em;
  }
}
@media only screen and (min-width: 640px) {
  .site-offer-section {
    padding-left: 3em;
    padding-right: 3em;
  }
}
@media only screen and (min-width: 1040px) {
  .site-offer-section {
    padding-right: 8em;
    padding-left: 8em;
  }
}
.site-offer-section p {
  font-size: 0.9em;
  margin: 0.3em;
}
.site-offer-section .offer-desc {
  font-weight: 200;
  font-size: 0.7em;
  margin: auto;
}
@media only screen and (min-width: 1040px) {
  .site-offer-section .offer-desc {
    width: 60%;
  }
}
.site-offer-section .offer-des {
  text-align: center;
  color: rgb(73, 111, 42);
  font-size: 1em;
}
.site-offer-section .site-offer {
  display: flex;
  justify-content: space-around;
  text-align: center;
  flex-direction: row;
  flex-wrap: wrap;
}
@media only screen and (min-width: 640px) {
  .site-offer-section .site-offer {
    flex-wrap: nowrap;
  }
}
.site-offer-section .site-offer section {
  text-align: center;
  flex: 1;
}
@media only screen and (max-width: 639px) {
  .site-offer-section .site-offer section {
    margin: 0;
  }
}
@media only screen and (min-width: 640px) {
  .site-offer-section .site-offer section {
    margin: 1em;
  }
}
@media only screen and (min-width: 1040px) {
  .site-offer-section .site-offer section {
    margin: 1em;
  }
}
.site-offer-section .site-offer section img {
  width: 70px;
  margin-bottom: 1em;
}
.site-offer-section .site-offer section .offer-title {
  font-weight: 600;
  font-size: 1.2em;
  margin-bottom: 0.4em;
}

.site-offer-section :first-child {
  padding-top: 0.5em;
}

#site-offer-section {
  border-top: none;
  background-color: white;
  padding-bottom: 1em;
  margin: 0.6em;
}
#site-offer-section section {
  flex: 1 0 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  margin-bottom: 1.38rem;
}
@media only screen and (min-width: 480px) {
  #site-offer-section section {
    flex: 1 0 45%;
    margin-bottom: 0;
  }
  #site-offer-section section:nth-of-type(1), #site-offer-section section:nth-of-type(2) {
    margin-bottom: 1.38rem;
  }
}
@media only screen and (min-width: 640px) {
  #site-offer-section section {
    flex: 1 0 20%;
    margin-bottom: 1em;
  }
  #site-offer-section section:nth-of-type(1), #site-offer-section section:nth-of-type(2) {
    margin-bottom: 1em;
  }
}
#site-offer-section a {
  color: rgb(136, 196, 21);
  font-weight: 600;
  transition: 0.3s ease;
}
#site-offer-section a:hover {
  color: rgba(136, 196, 21, 0.7);
}
#site-offer-section a:active {
  color: rgba(136, 196, 21, 0.5);
}
#site-offer-section img {
  width: 150px;
  margin-bottom: 2em;
}

header {
  padding: 0 !important;
}

.welcome-header {
  display: flex;
  padding-top: 2.4em;
  padding-left: 0.6em;
  padding-right: 0.6em;
  flex-direction: column;
  text-align: center;
}
.welcome-header p {
  color: rgb(73, 111, 42);
}
.welcome-header h1 {
  font-weight: 600;
  font-size: 1.8em;
  margin-bottom: 0.2em;
}
@media only screen and (max-width: 639px) {
  .welcome-header img {
    width: 85%;
    margin-top: 1.3em;
    margin-right: 0.4em;
    margin-left: 0.4em;
    margin-bottom: 1.3em;
  }
}
@media only screen and (min-width: 640px) {
  .welcome-header img {
    width: 70%;
    margin: 3em;
  }
}
@media only screen and (min-width: 1040px) {
  .welcome-header img {
    width: 60%;
    margin: 3em;
  }
}

.site-review-section {
  background-color: #fff;
  padding: 0 2.4em 0 2.4em;
  border: 10px rgb(154, 213, 50) solid;
}
.site-review-section .section-title {
  margin-top: 2.23284rem;
}
@media only screen and (max-width: 639px) {
  .site-review-section {
    padding: 2.4em 0 0 0;
  }
}
.site-review-section p:first-child {
  text-align: center;
  margin-bottom: 0.4em;
  font-size: 1.6em;
}
.site-review-section .offer-des {
  text-align: center;
  color: rgb(227, 106, 1);
  font-size: 1.2em;
  padding-bottom: 2em;
}
.site-review-section .review-heading {
  font-weight: 600;
}
.site-review-section .site-offer {
  display: flex;
  flex-wrap: wrap;
}
.site-review-section .site-offer section {
  text-align: left;
  padding: 1em;
  padding: 0 4px;
  border-color: pink;
}
@media only screen and (max-width: 639px) {
  .site-review-section .site-offer section {
    flex: 100%;
    max-width: 100%;
  }
}
@media only screen and (min-width: 640px) {
  .site-review-section .site-offer section {
    flex: 48%;
    padding-left: 2em;
    max-width: 48%;
    padding-bottom: 1em;
  }
}
@media only screen and (min-width: 1040px) {
  .site-review-section .site-offer section {
    flex: 24%;
    padding-left: 3em;
    max-width: 24%;
    border-left: 1px solid rgba(169, 169, 169, 0.5);
  }
  .site-review-section .site-offer section:first-child {
    border: none;
  }
}
.site-review-section .site-offer section p {
  display: inline-block;
  font-weight: normal;
  color: gray;
  font-size: 0.9em;
}
.site-review-section .site-offer section a {
  color: rgb(154, 213, 50);
  font-weight: 600;
  display: block;
}
.site-review-section .site-offer section svg {
  fill: rgb(227, 106, 1);
}
@media only screen and (max-width: 639px) {
  .site-review-section .site-offer section {
    margin: 0.6em;
  }
}
@media only screen and (min-width: 640px) {
  .site-review-section .site-offer section {
    margin: 0.2em;
  }
}
.site-review-section .site-offer section .offer-title {
  padding-top: 1em;
  padding-bottom: 0.4em;
  text-align: left;
  font-size: 1em;
  margin-right: 0.5em;
  font-weight: normal;
}
.site-review-section .site-offer section .date-review {
  color: gray;
}

.posts {
  background-color: #f4f5f7;
  padding: 2.4em;
}
.posts p:first-child {
  text-align: center;
  margin-bottom: 0.3em;
  font-size: 1.6em;
}
.posts .offer-des {
  text-align: center;
  color: rgb(73, 111, 42);
}
.posts .site-offer {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  margin-top: 1em;
}
@media only screen and (min-width: 480px) {
  .posts .site-offer {
    flex-direction: row;
  }
}
@media only screen and (min-width: 768px) {
  .posts .site-offer {
    padding-right: 3em;
    padding-left: 3em;
  }
}
@media only screen and (min-width: 820px) {
  .posts .site-offer {
    padding-right: 0;
    padding-left: 0;
  }
}
@media only screen and (min-width: 1680px) {
  .posts .site-offer {
    padding-right: 8em;
    padding-left: 8em;
  }
}
.posts a {
  color: rgb(73, 111, 42);
  font-weight: 600;
  display: block;
  margin-top: 1em;
}
.posts section {
  flex: 1 0 100%;
  padding-top: 1em;
  padding-bottom: 2em;
}
@media only screen and (min-width: 480px) {
  .posts section {
    flex: 1 0 52%;
    padding-left: 1em;
    padding-right: 1em;
  }
}
@media only screen and (min-width: 640px) {
  .posts section {
    padding-left: 1em;
    padding-right: 1em;
    flex: 1 0 33%;
  }
}
@media only screen and (min-width: 1040px) {
  .posts section {
    padding-left: 2em;
    padding-right: 2em;
  }
}
@media only screen and (min-width: 1680px) {
  .posts section {
    padding-left: 3em;
    padding-right: 3em;
  }
}
.posts .post-title {
  font-weight: 500;
  font-size: 1.3em;
  padding-top: 0.5em;
  padding-bottom: 0.5em;
  line-height: 1.2em;
}
.posts .post-snippet p {
  text-align: left;
  font-weight: center;
  line-height: 1.5em;
  font-size: 0.8em;
}
.posts img {
  width: 100%;
}

.site-close {
  display: flex;
  flex-direction: column;
  justify-content: center;
  border: 10px rgb(154, 213, 50) solid;
  border-bottom: none;
}
.site-close a {
  color: rgb(136, 196, 21);
  transition: 0.3s ease;
}
.site-close a:hover {
  color: rgba(136, 196, 21, 0.7);
}
.site-close a:active {
  color: rgba(136, 196, 21, 0.5);
}
@media only screen and (min-width: 640px) {
  .site-close {
    flex-direction: row;
  }
}
.site-close p:first-child {
  font-size: 1.6em;
}
.site-close p {
  margin-bottom: 0.5em;
}
.site-close input {
  margin-bottom: 0.5em;
  width: 100%;
  background-color: #f4f5f7;
  border: none;
}
.site-close textarea {
  width: 100%;
  background-color: #f4f5f7;
  height: 5em;
  border: none;
}
.site-close section {
  flex: 1;
}
.site-close section:first-child {
  display: flex;
  justify-content: center;
}
.site-close button {
  display: block;
  margin-top: 1em;
  border: none;
  background: rgb(154, 213, 50);
  color: white;
  padding-right: 2em;
  padding-left: 2em;
  padding-top: 2em;
  padding-bottom: 0em;
  font-weight: bold;
}
.site-close .des {
  margin-bottom: 1.3em;
  font-size: 0.9em;
}
.site-close .site-close__contact-form {
  padding-top: 2.5em;
  width: 70%;
  padding-bottom: 2em;
}
.site-close .site-close__contact-form button {
  display: inline-block;
  padding: 0;
  align-items: center;
  text-align: center;
  margin: 1.618rem 0;
  flex-direction: column;
  position: relative;
  background: transparent;
}
.site-close .site-close__contact-form button input {
  margin: 1.38rem;
  margin-left: 0;
  text-align: center;
  background-color: rgb(154, 213, 50);
  color: #fff;
  padding: 2rem 0;
  cursor: pointer;
}
.site-close .site-close__contact-form button .ajax-loader {
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translate(0, -50%);
}

.map-contact {
  display: flex;
  flex-direction: column;
  padding-bottom: 1em;
}
@media only screen and (min-width: 1040px) {
  .map-contact {
    padding-bottom: 0;
  }
}
@media only screen and (max-width: 639px) {
  .map-contact .maps {
    flex: 2;
    height: 18em;
  }
}
@media only screen and (min-width: 640px) {
  .map-contact .maps {
    flex: 2;
  }
}
@media only screen and (min-width: 1040px) {
  .map-contact .maps {
    flex: 3;
  }
}
.map-contact .maps iframe {
  width: 100%;
  height: 100%;
}
.map-contact .contact-details {
  display: flex;
  flex: 1;
  flex-direction: column;
}
@media only screen and (min-width: 640px) {
  .map-contact .contact-details {
    flex-direction: column;
  }
}
@media only screen and (min-width: 1040px) {
  .map-contact .contact-details {
    flex-direction: row;
  }
}
.map-contact .contact-details .phone {
  font-size: 1.6em;
  font-weight: 600;
  display: inline;
  color: rgb(154, 213, 50);
}
.map-contact .contact-details .site-close__open-times {
  padding-top: 2em;
  font-size: 0.9em;
}
.map-contact .contact-details .site-close__open-times p {
  line-height: 1em;
}
.map-contact .contact-details .site-close__open-times p:first-child {
  font-size: 1.6em;
  display: inline;
  font-weight: 600;
}
@media only screen and (max-width: 639px) {
  .map-contact .contact-details .site-close__open-times {
    border: none;
    padding-top: 2em;
    padding-left: 0;
    text-align: center;
  }
}
@media only screen and (min-width: 640px) {
  .map-contact .contact-details .site-close__open-times {
    border: none;
    padding-top: 2em;
    text-align: center;
  }
}
@media only screen and (min-width: 1040px) {
  .map-contact .contact-details .site-close__open-times {
    padding-right: 1.5em;
    text-align: left;
  }
}
.map-contact .contact-details .site-close__address {
  font-size: 0.9em;
  height: 50%;
  margin-top: 2em;
}
.map-contact .contact-details .site-close__address p:first-child {
  font-size: 1em;
  font-weight: 600;
}
@media only screen and (max-width: 639px) {
  .map-contact .contact-details .site-close__address {
    border: none;
    padding-left: 0;
    text-align: center;
  }
}
@media only screen and (min-width: 640px) {
  .map-contact .contact-details .site-close__address {
    border: none;
    padding: 0;
    text-align: center;
  }
}
@media only screen and (min-width: 1040px) {
  .map-contact .contact-details .site-close__address {
    border-left: 1px solid gray;
    padding-left: 1.5em;
    text-align: left;
  }
}

.bg-image {
  background-image: url("../../assets/images/e-tech-footer-logo-green.svg");
  background-repeat: no-repeat;
  background-position: center 1.5%;
  background-size: 4em;
}
@media only screen and (min-width: 640px) {
  .bg-image {
    background-size: 7.5em 7.5em;
    background-position: 100.5% 103%;
  }
}
@media only screen and (min-width: 1040px) {
  .bg-image {
    background-size: 16em 16em;
    background-position: 100% 120%;
  }
}

.swiper-container {
  z-index: 0;
  padding-top: 2em;
  padding-bottom: 2em;
}
.swiper-container .section-title {
  padding-bottom: 1em;
}
.swiper-container h1 {
  font-weight: 600;
  text-align: center;
  font-size: 1.8em;
}
@media only screen and (min-width: 1040px) {
  .swiper-container .swiper-button-next,
  .swiper-container .swiper-button-prev {
    display: none;
  }
}

.swiper-container-people {
  width: 60%;
  height: 60%;
  z-index: 0;
}

.swiper-slide {
  padding-top: 1em;
  text-align: center;
  font-size: 18px;
  /* Center slide text vertically */
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}
.swiper-slide figure {
  height: 100%;
}
.swiper-slide figure img {
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
@media only screen and (min-width: 640px) {
  .swiper-slide {
    flex-direction: row;
  }
}

.swiper-slide_brands {
  /*z-index: 1000;*/
  cursor: pointer;
}

.summary::-webkit-details-marker {
  display: none;
}

.sidenav {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: rgb(42, 50, 49);
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
}
@media only screen and (min-width: 640px) {
  .sidenav {
    display: none;
  }
}
.sidenav p {
  color: white;
  padding: 8px 8px 8px 52px;
  color: lightgray;
}
.sidenav li {
  color: white;
  padding: 8px 8px 8px 64px;
  display: block;
}

.sidenav a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
  transition: 0.3s;
}

.sidenav a:hover {
  color: #f1f1f1;
}

.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}
.open-nav {
  font-size: 1.4em;
  cursor: pointer;
  color: white;
  background-color: rgb(42, 50, 49);
}

.site-nav {
  position: relative;
}
.site-nav ul {
  padding: 0;
  display: flex;
  align-items: center;
}
@media only screen and (max-width: 819px) {
  .site-nav ul {
    flex-direction: column;
    width: 100%;
  }
}
.site-nav li {
  padding: 0;
  margin: 0;
}
@media only screen and (max-width: 819px) {
  .site-nav li {
    width: 100%;
    text-align: center;
    position: relative;
  }
}
.site-nav .nav-title {
  padding: 0 1em;
}
.site-nav .summary {
  color: white;
  padding: 1em;
  transition: 0.3s ease;
  display: block;
}
.site-nav .summary:hover {
  background-color: black;
  color: rgb(154, 213, 50);
}
.site-nav.is-open {
  z-index: 100;
}

@media only screen and (max-width: 819px) {
  .site-navigation {
    width: 100%;
  }
}

.site-nav-item__content {
  position: absolute;
  background-color: white;
  box-shadow: 0 1em 4em rgba(0, 0, 0, 0.1);
  left: 0;
  padding: 2rem;
  right: 0;
  top: 100%;
  display: flex;
}
@media only screen and (max-width: 819px) {
  .site-nav-item__content {
    flex-direction: column;
    z-index: 100;
  }
}
.site-nav-item__content:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 10px;
  top: 0;
  left: 0;
  background: rgb(136, 196, 21);
}
@media only screen and (min-width: 640px) {
  .site-nav-item__content {
    padding: u(0.5);
    padding: var(--spacing-md);
  }
  @media only screen and (min-width: 1440px) {
    .site-nav-item__content {
    padding: u(0.75);
    padding: var(--spacing-md);
    }
  }
  @media only screen and (min-width: 1040px) {
    .site-nav-item__content {
    padding: u(0.618);
    padding: var(--spacing-md);
    }
  }
  @media only screen and (min-width: 640px) {
    .site-nav-item__content {
    padding: u(0.5);
    padding: var(--spacing-md);
    }
  }
}
.site-nav-item__content ul {
  display: flex;
  align-items: flex-start;
  margin: 0 1.38rem;
  width: 100%;
}
.site-nav-item__content ul:first-of-type {
  margin-left: 0;
}
@media only screen and (max-width: 819px) {
  .site-nav-item__content ul {
    margin: 0;
    display: flex;
  }
  .site-nav-item__content ul:first-of-type p {
    margin-top: 2em;
  }
}
.site-nav-item__content ul p {
  font-weight: 700;
}
.site-nav-item__content .menu-item-has-children {
  display: flex;
  flex-direction: column;
}
.site-nav-item__content .menu-item-has-children ul {
  display: flex;
  flex-direction: column;
}
.site-nav-item__content .nav-sub-heading {
  display: flex !important;
}
.site-nav-item__content .nav-sub-heading:hover:before {
  content: none;
}
.site-nav-item__content .nav-sub-heading a[title=Sub-heading] {
  border-left: 2px rgb(154, 213, 50) solid;
  padding-left: 0.4em;
  margin-top: 1em;
  margin-bottom: 1em;
  color: black;
  font-weight: 700;
  display: inline-block !important;
}
@media only screen and (min-width: 640px) {
  .site-nav-item__content .nav-sub-heading a[title=Sub-heading] {
    font-size: 1em;
  }
}
@media only screen and (min-width: 1040px) {
  .site-nav-item__content .nav-sub-heading a[title=Sub-heading] {
    font-size: 1.2em;
  }
}
@media only screen and (max-width: 639px) {
  .site-nav-item__content .nav-sub-heading a[title=Sub-heading] {
    font-weight: 600;
    margin-top: 2em;
  }
}
.site-nav-item__content .nav-sub-heading .sub-menu li {
  color: black !important;
  font-size: 1em !important;
}
.site-nav-item__content .nav-sub-heading .sub-menu li:first-child {
  color: black !important;
}
.site-nav-item__content p {
  border-left: 2px rgb(154, 213, 50) solid;
  padding-left: 0.4em;
  margin-top: 1em;
  margin-bottom: 1em;
}
@media only screen and (min-width: 640px) {
  .site-nav-item__content p {
    font-size: 0.8em;
  }
}
@media only screen and (min-width: 1040px) {
  .site-nav-item__content p {
    font-size: 1em;
  }
}
@media only screen and (max-width: 639px) {
  .site-nav-item__content p {
    font-weight: 600;
  }
}
.site-nav-item__content li {
  display: block;
  padding-left: 0.6em;
  font-size: 0.7em;
  margin-bottom: 0.5em;
  padding-bottom: 0.5em;
  transition: 0.3s ease;
  position: relative;
  text-align: left;
  flex: 1 0 12.5%;
}
@media only screen and (max-width: 819px) {
  .site-nav-item__content li {
    text-align: center;
    padding: 0;
    flex: auto;
  }
}
.site-nav-item__content li a {
  display: block;
}
@media only screen and (max-width: 819px) {
  .site-nav-item__content li a {
    font-size: 1.618rem;
    padding: 1em 0;
  }
}
.site-nav-item__content .sub-menu li {
  transition: 0.2s ease;
  border-bottom: 2px solid transparent;
}
.site-nav-item__content .sub-menu li:hover {
  border-bottom: 2px solid rgb(136, 196, 21);
}

.section-title {
  text-align: center;
  font-weight: 500;
  font-size: 1.6em;
}

.welcome-image img {
  height: auto !important;
}

.nav-logo {
  position: relative;
  z-index: 1;
  transition: 0.3s ease;
}
.nav-logo:hover {
  opacity: 0.9;
}
.nav-logo:active {
  opacity: 0.8;
}

.search-page h1 {
  display: inline;
  text-align: center;
}
.search-page h2 {
  font-size: 3.61273512rem;
  display: inline;
  font-weight: lighter;
  text-transform: uppercase;
}
.search-page .search-results-displayed {
  margin-top: 0.5em;
  color: rgb(154, 213, 50);
  font-size: 2.23284rem;
}
.search-page .display-search-results {
  margin-top: 1em;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: center;
}
.search-page .display-search-results .search-reslt-out {
  width: 100%;
  padding-bottom: 1em;
  text-align: center;
  padding-left: 1em;
}
.search-page .display-search-results .search-result {
  padding-top: 2em;
  margin: 1em;
  padding: 1em;
  border: 1px solid rgba(154, 213, 50, 0.3);
}
@media only screen and (max-width: 424px) {
  .search-page .display-search-results .search-result {
    width: 100%;
  }
}
@media only screen and (min-width: 640px) {
  .search-page .display-search-results .search-result {
    width: 60%;
  }
}
@media only screen and (min-width: 820px) {
  .search-page .display-search-results .search-result {
    width: 40%;
  }
}
@media only screen and (min-width: 1280px) {
  .search-page .display-search-results .search-result {
    width: 30%;
  }
}
.search-page .display-search-results .search-result a {
  color: white;
  margin-top: 1em;
}

#brands-slider .swiper-slide {
  height: 5em;
  padding: 0 2em;
}
@media only screen and (min-width: 640px) {
  #brands-slider .swiper-slide {
    padding: 1em;
    height: 4em;
  }
  #brands-slider .swiper-slide:first-of-type {
    padding-left: 0;
  }
  #brands-slider .swiper-slide:last-of-type {
    padding-right: 2em;
  }
}
#brands-slider .swiper-slide figure {
  width: 100%;
  height: 100%;
  background-size: cover;
}

#tilt .site-offer section {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1 0 100%;
}
@media only screen and (min-width: 480px) {
  #tilt .site-offer section {
    flex: 1 0 48%;
  }
}
@media only screen and (min-width: 640px) {
  #tilt .site-offer section {
    flex: 1 0 33%;
  }
}

.homepage-blog-section figure {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: calc(0.618rem * 4) calc(0.33rem * 2);
  padding: calc(var(--spacing-lg) * 4) calc(var(--spacing-md) * 2);
}

@media only screen and (min-width: 1440px) {
  .homepage-blog-section figure {
  padding: calc(u(1.618) * 4) calc(u(0.75) * 2);
  padding: calc(var(--spacing-lg) * 4) calc(var(--spacing-md) * 2);
  }
}

@media only screen and (min-width: 1040px) {
  .homepage-blog-section figure {
  padding: calc(u(1.38) * 4) calc(u(0.618) * 2);
  padding: calc(var(--spacing-lg) * 4) calc(var(--spacing-md) * 2);
  }
}

@media only screen and (min-width: 640px) {
  .homepage-blog-section figure {
  padding: calc(u(1) * 4) calc(u(0.5) * 2);
  padding: calc(var(--spacing-lg) * 4) calc(var(--spacing-md) * 2);
  }
}

@media only screen and (min-width: 1440px) {
  .homepage-blog-section figure {
  padding: calc(u(1.618) * 4) calc(u(0.75) * 2);
  padding: calc(var(--spacing-lg) * 4) calc(var(--spacing-md) * 2);
  }
}

@media only screen and (min-width: 1040px) {
  .homepage-blog-section figure {
  padding: calc(u(1.38) * 4) calc(u(0.618) * 2);
  padding: calc(var(--spacing-lg) * 4) calc(var(--spacing-md) * 2);
  }
}

@media only screen and (min-width: 640px) {
  .homepage-blog-section figure {
  padding: calc(u(1) * 4) calc(u(0.5) * 2);
  padding: calc(var(--spacing-lg) * 4) calc(var(--spacing-md) * 2);
  }
}

@media only screen and (min-width: 1440px) {
  .homepage-blog-section figure {
  padding: calc(u(1.618) * 4) calc(u(0.75) * 2);
  padding: calc(var(--spacing-lg) * 4) calc(var(--spacing-md) * 2);
  }
}

@media only screen and (min-width: 1040px) {
  .homepage-blog-section figure {
  padding: calc(u(1.38) * 4) calc(u(0.618) * 2);
  padding: calc(var(--spacing-lg) * 4) calc(var(--spacing-md) * 2);
  }
}

@media only screen and (min-width: 640px) {
  .homepage-blog-section figure {
  padding: calc(u(1) * 4) calc(u(0.5) * 2);
  padding: calc(var(--spacing-lg) * 4) calc(var(--spacing-md) * 2);
  }
}

@media only screen and (min-width: 1440px) {
  .homepage-blog-section figure {
  padding: calc(u(1.618) * 4) calc(u(0.75) * 2);
  padding: calc(var(--spacing-lg) * 4) calc(var(--spacing-md) * 2);
  }
}

@media only screen and (min-width: 1040px) {
  .homepage-blog-section figure {
  padding: calc(u(1.38) * 4) calc(u(0.618) * 2);
  padding: calc(var(--spacing-lg) * 4) calc(var(--spacing-md) * 2);
  }
}

@media only screen and (min-width: 640px) {
  .homepage-blog-section figure {
  padding: calc(u(1) * 4) calc(u(0.5) * 2);
  padding: calc(var(--spacing-lg) * 4) calc(var(--spacing-md) * 2);
  }
}
@media only screen and (min-width: 640px) {
  .homepage-blog-section figure {
    padding: calc(u(1) * 2) calc(u(0.5) * 2);
    padding: calc(var(--spacing-lg) * 2) calc(var(--spacing-md) * 2);
  }
  @media only screen and (min-width: 1440px) {
    .homepage-blog-section figure {
    padding: calc(u(1.618) * 2) calc(u(0.75) * 2);
    padding: calc(var(--spacing-lg) * 2) calc(var(--spacing-md) * 2);
    }
  }
  @media only screen and (min-width: 1040px) {
    .homepage-blog-section figure {
    padding: calc(u(1.38) * 2) calc(u(0.618) * 2);
    padding: calc(var(--spacing-lg) * 2) calc(var(--spacing-md) * 2);
    }
  }
  @media only screen and (min-width: 640px) {
    .homepage-blog-section figure {
    padding: calc(u(1) * 2) calc(u(0.5) * 2);
    padding: calc(var(--spacing-lg) * 2) calc(var(--spacing-md) * 2);
    }
  }
  @media only screen and (min-width: 1440px) {
    .homepage-blog-section figure {
    padding: calc(u(1.618) * 2) calc(u(0.75) * 2);
    padding: calc(var(--spacing-lg) * 2) calc(var(--spacing-md) * 2);
    }
  }
  @media only screen and (min-width: 1040px) {
    .homepage-blog-section figure {
    padding: calc(u(1.38) * 2) calc(u(0.618) * 2);
    padding: calc(var(--spacing-lg) * 2) calc(var(--spacing-md) * 2);
    }
  }
  @media only screen and (min-width: 640px) {
    .homepage-blog-section figure {
    padding: calc(u(1) * 2) calc(u(0.5) * 2);
    padding: calc(var(--spacing-lg) * 2) calc(var(--spacing-md) * 2);
    }
  }
  @media only screen and (min-width: 1440px) {
    .homepage-blog-section figure {
    padding: calc(u(1.618) * 2) calc(u(0.75) * 2);
    padding: calc(var(--spacing-lg) * 2) calc(var(--spacing-md) * 2);
    }
  }
  @media only screen and (min-width: 1040px) {
    .homepage-blog-section figure {
    padding: calc(u(1.38) * 2) calc(u(0.618) * 2);
    padding: calc(var(--spacing-lg) * 2) calc(var(--spacing-md) * 2);
    }
  }
  @media only screen and (min-width: 640px) {
    .homepage-blog-section figure {
    padding: calc(u(1) * 2) calc(u(0.5) * 2);
    padding: calc(var(--spacing-lg) * 2) calc(var(--spacing-md) * 2);
    }
  }
  @media only screen and (min-width: 1440px) {
    .homepage-blog-section figure {
    padding: calc(u(1.618) * 2) calc(u(0.75) * 2);
    padding: calc(var(--spacing-lg) * 2) calc(var(--spacing-md) * 2);
    }
  }
  @media only screen and (min-width: 1040px) {
    .homepage-blog-section figure {
    padding: calc(u(1.38) * 2) calc(u(0.618) * 2);
    padding: calc(var(--spacing-lg) * 2) calc(var(--spacing-md) * 2);
    }
  }
  @media only screen and (min-width: 640px) {
    .homepage-blog-section figure {
    padding: calc(u(1) * 2) calc(u(0.5) * 2);
    padding: calc(var(--spacing-lg) * 2) calc(var(--spacing-md) * 2);
    }
  }
}
.homepage-blog-section figure img {
  display: none;
}

footer {
  background-color: black;
  color: white;
}

.menu-footer {
  display: flex;
}
@media only screen and (max-width: 639px) {
  .menu-footer {
    flex-direction: column;
    text-align: center;
    padding: 4em 1.618rem 2em;
  }
}
@media only screen and (min-width: 640px) {
  .menu-footer {
    text-align: left;
    flex-direction: row;
    padding-bottom: 3em;
  }
}
@media only screen and (min-width: 1040px) {
  .menu-footer {
    padding-bottom: 4em;
  }
}
.menu-footer section {
  padding-top: 2em;
}
@media only screen and (min-width: 640px) {
  .menu-footer section {
    padding-left: 2em;
    padding-right: 1em;
    flex: 1 0 25%;
  }
}
@media only screen and (min-width: 1040px) {
  .menu-footer section {
    padding-left: 3em;
    padding-right: 2em;
  }
}
.menu-footer section svg {
  fill: rgb(136, 196, 21);
  margin-right: 1em;
}
.menu-footer section p {
  font-size: 1em;
  font-weight: bold;
}
@media only screen and (min-width: 640px) {
  .menu-footer section p {
    padding-left: 0.6em;
  }
}
@media only screen and (min-width: 1040px) {
  .menu-footer section p {
    border-left: 2px rgb(136, 196, 21) solid;
  }
}
.menu-footer section a {
  display: block;
  font-size: 0.8em;
  margin-top: 0.7em;
  margin-bottom: 0.7em;
  color: #f4f5f7;
  transition: 0.3s ease;
}
@media only screen and (min-width: 640px) {
  .menu-footer section a {
    padding-left: 0.9em;
  }
}
.menu-footer section a:hover {
  color: rgba(228, 229, 231, 0.7);
}
.menu-footer section a:active {
  color: rgba(228, 229, 231, 0.5);
}

.footer-info {
  line-height: 1.2em;
  padding-bottom: 2em;
  justify-content: space-between;
}
.footer-info .email {
  color: rgb(136, 196, 21);
  display: inline;
}
@media only screen and (max-width: 639px) {
  .footer-info .info {
    text-align: center;
    padding: 0 1em;
  }
}
@media only screen and (min-width: 640px) {
  .footer-info .info {
    padding-left: 3em;
    text-align: left;
  }
}
.footer-info a {
  color: rgb(136, 196, 21);
  transition: 0.3s ease;
}
.footer-info a:hover {
  color: rgba(136, 196, 21, 0.7);
}
.footer-info a:active {
  color: rgba(136, 196, 21, 0.5);
}

.footer_links {
  flex: 1 0 15% !important;
  padding-left: 1em !important;
}
.footer_links a {
  display: inline-block !important;
  padding-left: 0 !important;
}
.footer_links a svg {
  transition: 0.3s ease;
}
.footer_links a:hover svg {
  fill: rgba(136, 196, 21, 0.7);
}
.footer_links a:active svg {
  fill: rgba(136, 196, 21, 0.5);
}

.copyrt {
  padding-bottom: 1em;
  padding-top: 1em;
}
@media only screen and (max-width: 639px) {
  .copyrt {
    width: 100%;
    text-align: center;
    padding-right: 1em;
    padding-left: 1em;
    border-top: 1px solid rgb(136, 196, 21);
  }
}
@media only screen and (min-width: 640px) {
  .copyrt {
    width: 90%;
    text-align: left;
    padding-left: 3em;
    font-size: 0.8em;
    border-top: 1px solid rgb(136, 196, 21);
  }
}
@media only screen and (min-width: 1040px) {
  .copyrt {
    width: 86%;
  }
}
@media only screen and (min-width: 1680px) {
  .copyrt {
    width: 90%;
  }
}
.copyrt a {
  color: rgb(136, 196, 21);
  transition: 0.3s ease;
}
.copyrt a:hover {
  color: rgba(136, 196, 21, 0.7);
}
.copyrt a:active {
  color: rgba(136, 196, 21, 0.5);
}

.section-search {
  display: flex;
  flex-direction: column;
  padding: 0.618rem;
  padding: var(--spacing-lg);
}

@media only screen and (min-width: 1440px) {
  .section-search {
  padding: u(1.618);
  padding: var(--spacing-lg);
  }
}

@media only screen and (min-width: 1040px) {
  .section-search {
  padding: u(1.38);
  padding: var(--spacing-lg);
  }
}

@media only screen and (min-width: 640px) {
  .section-search {
  padding: u(1);
  padding: var(--spacing-lg);
  }
}

.display-search-results {
  display: flex;
  flex-direction: column;
}

.search-result {
  margin: 0.19rem 0;
  margin: var(--spacing-sm) 0;
}

@media only screen and (min-width: 640px) {
  .search-result {
  margin: u(0.381) 0;
  margin: var(--spacing-sm) 0;
  }
}
.search-result p {
  margin: 0.19rem 0;
  margin: var(--spacing-sm) 0;
}
@media only screen and (min-width: 640px) {
  .search-result p {
  margin: u(0.381) 0;
  margin: var(--spacing-sm) 0;
  }
}

.contact-form button {
  display: inline-block;
  padding: 0;
  align-items: center;
  text-align: center;
  margin: 1.618rem 0;
  flex-direction: column;
  position: relative;
  background: transparent;
}
.contact-form button input {
  margin: 1.38rem;
  margin-left: 0;
  text-align: center;
  background-color: rgb(154, 213, 50);
  color: #fff;
  padding: 2rem 0;
  cursor: pointer;
}
.contact-form button .ajax-loader {
  position: absolute;
  top: 50%;
  right: -ms(3);
}

.display-search-results__empty {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  border: 1px solid rgba(136, 196, 21, 0.3);
  padding: calc(0.33rem * 2);
  padding: calc(var(--spacing-md) * 2);
  margin-top: 0.33rem;
  margin-top: var(--spacing-md);
  font-weight: 600;
  text-align: center;
}

@media only screen and (min-width: 1440px) {
  .display-search-results__empty {
  margin-top: u(0.75);
  margin-top: var(--spacing-md);
  }
}

@media only screen and (min-width: 1040px) {
  .display-search-results__empty {
  margin-top: u(0.618);
  margin-top: var(--spacing-md);
  }
}

@media only screen and (min-width: 640px) {
  .display-search-results__empty {
  margin-top: u(0.5);
  margin-top: var(--spacing-md);
  }
}

@media only screen and (min-width: 1440px) {
  .display-search-results__empty {
  padding: calc(u(0.75) * 2);
  padding: calc(var(--spacing-md) * 2);
  }
}

@media only screen and (min-width: 1040px) {
  .display-search-results__empty {
  padding: calc(u(0.618) * 2);
  padding: calc(var(--spacing-md) * 2);
  }
}

@media only screen and (min-width: 640px) {
  .display-search-results__empty {
  padding: calc(u(0.5) * 2);
  padding: calc(var(--spacing-md) * 2);
  }
}
@media only screen and (min-width: 640px) {
  .display-search-results__empty {
    text-align: left;
  }
}
.display-search-results__empty h3 {
  margin-bottom: 0.33rem;
  margin-bottom: var(--spacing-md);
}
@media only screen and (min-width: 1440px) {
  .display-search-results__empty h3 {
  margin-bottom: u(0.75);
  margin-bottom: var(--spacing-md);
  }
}
@media only screen and (min-width: 1040px) {
  .display-search-results__empty h3 {
  margin-bottom: u(0.618);
  margin-bottom: var(--spacing-md);
  }
}
@media only screen and (min-width: 640px) {
  .display-search-results__empty h3 {
  margin-bottom: u(0.5);
  margin-bottom: var(--spacing-md);
  }
}
.display-search-results__empty p {
  margin-bottom: 0.33rem;
  margin-bottom: var(--spacing-md);
}
@media only screen and (min-width: 1440px) {
  .display-search-results__empty p {
  margin-bottom: u(0.75);
  margin-bottom: var(--spacing-md);
  }
}
@media only screen and (min-width: 1040px) {
  .display-search-results__empty p {
  margin-bottom: u(0.618);
  margin-bottom: var(--spacing-md);
  }
}
@media only screen and (min-width: 640px) {
  .display-search-results__empty p {
  margin-bottom: u(0.5);
  margin-bottom: var(--spacing-md);
  }
}
.display-search-results__empty .button {
  margin-top: 0.19rem;
  margin-top: var(--spacing-sm);
  display: inline-flex;
  max-width: 200px;
  color: rgb(255,255,255);
}
@media only screen and (min-width: 640px) {
  .display-search-results__empty .button {
  margin-top: u(0.381);
  margin-top: var(--spacing-sm);
  }
}
.display-search-results__empty .button--full-width {
  margin-top: 0.19rem;
  margin-top: var(--spacing-sm);
  display: inline-flex;
  max-width: 200px;
  color: rgb(255,255,255);
}
@media only screen and (min-width: 640px) {
  .display-search-results__empty .button--full-width {
  margin-top: u(0.381);
  margin-top: var(--spacing-sm);
  }
}

.section__ratings {
  padding: 0.19rem 0;
  padding: var(--spacing-sm) 0;
}

@media only screen and (min-width: 640px) {
  .section__ratings {
  padding: u(0.381) 0;
  padding: var(--spacing-sm) 0;
  }
}
.section__ratings svg {
  fill: rgb(228,113,43);
}

.section__review {
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 1px solid rgb(136, 196, 21);
  padding: 0.33rem;
  padding: var(--spacing-md);
}

@media only screen and (min-width: 1440px) {
  .section__review {
  padding: u(0.75);
  padding: var(--spacing-md);
  }
}

@media only screen and (min-width: 1040px) {
  .section__review {
  padding: u(0.618);
  padding: var(--spacing-md);
  }
}

@media only screen and (min-width: 640px) {
  .section__review {
  padding: u(0.5);
  padding: var(--spacing-md);
  }
}
.section__review .button, .section__review .button--full-width {
  color: rgb(255,255,255);
}
.section__review h3 {
  font-size: 4px;
  text-align: center;
}

.customer-review {
  font-size: 2.23284rem;
  font-style: italic;
  margin: 0.19rem 0;
  margin: var(--spacing-sm) 0;
}

@media only screen and (min-width: 640px) {
  .customer-review {
  margin: u(0.381) 0;
  margin: var(--spacing-sm) 0;
  }
}

.section__customer-review {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
}
.section__customer-review h3 span {
  font-size: 1.38rem;
  font-weight: 400;
  display: block;
  margin-top: 1.38rem;
}
.section__customer-review p {
  margin-bottom: 0.19rem;
  margin-bottom: var(--spacing-sm);
  margin-top: 0;
}
@media only screen and (min-width: 640px) {
  .section__customer-review p {
  margin-bottom: u(0.381);
  margin-bottom: var(--spacing-sm);
  }
}
.section__customer-review p span {
  display: block;
  font-size: 2.617924rem;
  font-weight: 600;
  color: rgb(136, 196, 21);
  margin-bottom: 0.19rem;
  margin-bottom: var(--spacing-sm);
}
@media only screen and (min-width: 640px) {
  .section__customer-review p span {
  margin-bottom: u(0.381);
  margin-bottom: var(--spacing-sm);
  }
}

.acf-map {
  height: 100%;
}

.section__contact {
  width: 95% !important;
  margin: 0 auto;
  flex-direction: column;
}
@media only screen and (min-width: 640px) {
  .section__contact {
    padding: 0;
    padding-top: 2em;
  }
}
@media only screen and (min-width: 990px) {
  .section__contact {
    width: 90% !important;
  }
}
.section__contact .acf-map {
  height: 25em;
  margin-top: 1.618rem;
  border: 5px solid rgb(136, 196, 21);
}
@media only screen and (min-width: 640px) {
  .section__contact {
    flex-direction: row;
  }
}
@media only screen and (min-width: 640px) {
  .section__contact .contact-form {
    flex: 1 0 45%;
  }
}
.section__contact .contact-form h1 {
  font-weight: 700;
}
.section__contact .repair-section_desktop-img {
  height: auto !important;
  margin-top: 0;
  display: flex !important;
  flex-direction: column;
  width: 100%;
  margin-bottom: 4.235801032rem;
}
@media only screen and (min-width: 640px) {
  .section__contact .repair-section_desktop-img {
    width: initial;
    margin: 2em;
    flex: 1 0 55%;
    margin-right: 0;
    margin-left: 0;
    margin-top: calc(u(0.5) * 5);
    margin-top: calc(var(--spacing-md) * 5);
  }
  @media only screen and (min-width: 1440px) {
    .section__contact .repair-section_desktop-img {
    margin-top: calc(u(0.75) * 5);
    margin-top: calc(var(--spacing-md) * 5);
    }
  }
  @media only screen and (min-width: 1040px) {
    .section__contact .repair-section_desktop-img {
    margin-top: calc(u(0.618) * 5);
    margin-top: calc(var(--spacing-md) * 5);
    }
  }
  @media only screen and (min-width: 640px) {
    .section__contact .repair-section_desktop-img {
    margin-top: calc(u(0.5) * 5);
    margin-top: calc(var(--spacing-md) * 5);
    }
  }
}
@media only screen and (min-width: 768px) {
  .section__contact .repair-section_desktop-img {
    margin-left: 2em;
    margin-top: calc(0.33rem * 4);
    margin-top: calc(var(--spacing-md) * 4);
  }
  @media only screen and (min-width: 1440px) {
    .section__contact .repair-section_desktop-img {
    margin-top: calc(u(0.75) * 4);
    margin-top: calc(var(--spacing-md) * 4);
    }
  }
  @media only screen and (min-width: 1040px) {
    .section__contact .repair-section_desktop-img {
    margin-top: calc(u(0.618) * 4);
    margin-top: calc(var(--spacing-md) * 4);
    }
  }
  @media only screen and (min-width: 640px) {
    .section__contact .repair-section_desktop-img {
    margin-top: calc(u(0.5) * 4);
    margin-top: calc(var(--spacing-md) * 4);
    }
  }
}
@media only screen and (min-width: 990px) {
  .section__contact .repair-section_desktop-img {
    width: initial;
    margin: 2em;
    flex: 1 0 55%;
    margin-right: 0;
    margin-top: calc(0.33rem * 4.5);
    margin-top: calc(var(--spacing-md) * 4.5);
  }
  @media only screen and (min-width: 1440px) {
    .section__contact .repair-section_desktop-img {
    margin-top: calc(u(0.75) * 4.5);
    margin-top: calc(var(--spacing-md) * 4.5);
    }
  }
  @media only screen and (min-width: 1040px) {
    .section__contact .repair-section_desktop-img {
    margin-top: calc(u(0.618) * 4.5);
    margin-top: calc(var(--spacing-md) * 4.5);
    }
  }
  @media only screen and (min-width: 640px) {
    .section__contact .repair-section_desktop-img {
    margin-top: calc(u(0.5) * 4.5);
    margin-top: calc(var(--spacing-md) * 4.5);
    }
  }
}
@media only screen and (min-width: 1040px) {
  .section__contact .repair-section_desktop-img {
    margin-top: calc(u(0.618) * 3);
    margin-top: calc(var(--spacing-md) * 3);
  }
  @media only screen and (min-width: 1440px) {
    .section__contact .repair-section_desktop-img {
    margin-top: calc(u(0.75) * 3);
    margin-top: calc(var(--spacing-md) * 3);
    }
  }
  @media only screen and (min-width: 1040px) {
    .section__contact .repair-section_desktop-img {
    margin-top: calc(u(0.618) * 3);
    margin-top: calc(var(--spacing-md) * 3);
    }
  }
  @media only screen and (min-width: 640px) {
    .section__contact .repair-section_desktop-img {
    margin-top: calc(u(0.618) * 3);
    margin-top: calc(var(--spacing-md) * 3);
    }
  }
}
@media only screen and (min-width: 1280px) {
  .section__contact .repair-section_desktop-img {
    margin-top: 0.33rem;
    margin-top: var(--spacing-md);
  }
  @media only screen and (min-width: 1440px) {
    .section__contact .repair-section_desktop-img {
    margin-top: u(0.75);
    margin-top: var(--spacing-md);
    }
  }
  @media only screen and (min-width: 1040px) {
    .section__contact .repair-section_desktop-img {
    margin-top: u(0.618);
    margin-top: var(--spacing-md);
    }
  }
  @media only screen and (min-width: 640px) {
    .section__contact .repair-section_desktop-img {
    margin-top: u(0.5);
    margin-top: var(--spacing-md);
    }
  }
}

.contact-us__form {
  padding-top: 0 !important;
}

.content-post {
  display: flex;
  align-items: center;
  justify-content: center;
}
.content-post p {
  line-height: 1.5;
}

.repair-details .content-post {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.product-image {
  flex: 1 0 25%;
  padding: calc(0.618rem * 4) calc(0.33rem * 3);
  padding: calc(var(--spacing-lg) * 4) calc(var(--spacing-md) * 3);
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}

@media only screen and (min-width: 1440px) {
  .product-image {
  padding: calc(u(1.618) * 4) calc(u(0.75) * 3);
  padding: calc(var(--spacing-lg) * 4) calc(var(--spacing-md) * 3);
  }
}

@media only screen and (min-width: 1040px) {
  .product-image {
  padding: calc(u(1.38) * 4) calc(u(0.618) * 3);
  padding: calc(var(--spacing-lg) * 4) calc(var(--spacing-md) * 3);
  }
}

@media only screen and (min-width: 640px) {
  .product-image {
  padding: calc(u(1) * 4) calc(u(0.5) * 3);
  padding: calc(var(--spacing-lg) * 4) calc(var(--spacing-md) * 3);
  }
}

@media only screen and (min-width: 1440px) {
  .product-image {
  padding: calc(u(1.618) * 4) calc(u(0.75) * 3);
  padding: calc(var(--spacing-lg) * 4) calc(var(--spacing-md) * 3);
  }
}

@media only screen and (min-width: 1040px) {
  .product-image {
  padding: calc(u(1.38) * 4) calc(u(0.618) * 3);
  padding: calc(var(--spacing-lg) * 4) calc(var(--spacing-md) * 3);
  }
}

@media only screen and (min-width: 640px) {
  .product-image {
  padding: calc(u(1) * 4) calc(u(0.5) * 3);
  padding: calc(var(--spacing-lg) * 4) calc(var(--spacing-md) * 3);
  }
}

@media only screen and (min-width: 1440px) {
  .product-image {
  padding: calc(u(1.618) * 4) calc(u(0.75) * 3);
  padding: calc(var(--spacing-lg) * 4) calc(var(--spacing-md) * 3);
  }
}

@media only screen and (min-width: 1040px) {
  .product-image {
  padding: calc(u(1.38) * 4) calc(u(0.618) * 3);
  padding: calc(var(--spacing-lg) * 4) calc(var(--spacing-md) * 3);
  }
}

@media only screen and (min-width: 640px) {
  .product-image {
  padding: calc(u(1) * 4) calc(u(0.5) * 3);
  padding: calc(var(--spacing-lg) * 4) calc(var(--spacing-md) * 3);
  }
}

@media only screen and (min-width: 1440px) {
  .product-image {
  padding: calc(u(1.618) * 4) calc(u(0.75) * 3);
  padding: calc(var(--spacing-lg) * 4) calc(var(--spacing-md) * 3);
  }
}

@media only screen and (min-width: 1040px) {
  .product-image {
  padding: calc(u(1.38) * 4) calc(u(0.618) * 3);
  padding: calc(var(--spacing-lg) * 4) calc(var(--spacing-md) * 3);
  }
}

@media only screen and (min-width: 640px) {
  .product-image {
  padding: calc(u(1) * 4) calc(u(0.5) * 3);
  padding: calc(var(--spacing-lg) * 4) calc(var(--spacing-md) * 3);
  }
}
.product-image figure img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
@media only screen and (min-width: 768px) {
  .product-image {
    display: block;
  }
}

.product-image__mobile {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  display: block;
  margin: calc(0.33rem * 6) 0;
  margin: calc(var(--spacing-md) * 6) 0;
  width: 350px;
  height: 350px;
}

@media only screen and (min-width: 1440px) {
  .product-image__mobile {
  margin: calc(u(0.75) * 6) 0;
  margin: calc(var(--spacing-md) * 6) 0;
  }
}

@media only screen and (min-width: 1040px) {
  .product-image__mobile {
  margin: calc(u(0.618) * 6) 0;
  margin: calc(var(--spacing-md) * 6) 0;
  }
}

@media only screen and (min-width: 640px) {
  .product-image__mobile {
  margin: calc(u(0.5) * 6) 0;
  margin: calc(var(--spacing-md) * 6) 0;
  }
}
.product-image__mobile img {
  display: none !important;
}
@media only screen and (max-width: 767px) {
  .product-image__mobile {
    padding: calc(0.618rem * 5) calc(0.33rem * 3);
    padding: calc(var(--spacing-lg) * 5) calc(var(--spacing-md) * 3);
  }
  @media only screen and (min-width: 1440px) {
    .product-image__mobile {
    padding: calc(u(1.618) * 5) calc(u(0.75) * 3);
    padding: calc(var(--spacing-lg) * 5) calc(var(--spacing-md) * 3);
    }
  }
  @media only screen and (min-width: 1040px) {
    .product-image__mobile {
    padding: calc(u(1.38) * 5) calc(u(0.618) * 3);
    padding: calc(var(--spacing-lg) * 5) calc(var(--spacing-md) * 3);
    }
  }
  @media only screen and (min-width: 640px) {
    .product-image__mobile {
    padding: calc(u(1) * 5) calc(u(0.5) * 3);
    padding: calc(var(--spacing-lg) * 5) calc(var(--spacing-md) * 3);
    }
  }
  @media only screen and (min-width: 1440px) {
    .product-image__mobile {
    padding: calc(u(1.618) * 5) calc(u(0.75) * 3);
    padding: calc(var(--spacing-lg) * 5) calc(var(--spacing-md) * 3);
    }
  }
  @media only screen and (min-width: 1040px) {
    .product-image__mobile {
    padding: calc(u(1.38) * 5) calc(u(0.618) * 3);
    padding: calc(var(--spacing-lg) * 5) calc(var(--spacing-md) * 3);
    }
  }
  @media only screen and (min-width: 640px) {
    .product-image__mobile {
    padding: calc(u(1) * 5) calc(u(0.5) * 3);
    padding: calc(var(--spacing-lg) * 5) calc(var(--spacing-md) * 3);
    }
  }
  @media only screen and (min-width: 1440px) {
    .product-image__mobile {
    padding: calc(u(1.618) * 5) calc(u(0.75) * 3);
    padding: calc(var(--spacing-lg) * 5) calc(var(--spacing-md) * 3);
    }
  }
  @media only screen and (min-width: 1040px) {
    .product-image__mobile {
    padding: calc(u(1.38) * 5) calc(u(0.618) * 3);
    padding: calc(var(--spacing-lg) * 5) calc(var(--spacing-md) * 3);
    }
  }
  @media only screen and (min-width: 640px) {
    .product-image__mobile {
    padding: calc(u(1) * 5) calc(u(0.5) * 3);
    padding: calc(var(--spacing-lg) * 5) calc(var(--spacing-md) * 3);
    }
  }
  @media only screen and (min-width: 1440px) {
    .product-image__mobile {
    padding: calc(u(1.618) * 5) calc(u(0.75) * 3);
    padding: calc(var(--spacing-lg) * 5) calc(var(--spacing-md) * 3);
    }
  }
  @media only screen and (min-width: 1040px) {
    .product-image__mobile {
    padding: calc(u(1.38) * 5) calc(u(0.618) * 3);
    padding: calc(var(--spacing-lg) * 5) calc(var(--spacing-md) * 3);
    }
  }
  @media only screen and (min-width: 640px) {
    .product-image__mobile {
    padding: calc(u(1) * 5) calc(u(0.5) * 3);
    padding: calc(var(--spacing-lg) * 5) calc(var(--spacing-md) * 3);
    }
  }
}
@media only screen and (max-width: 639px) {
  .product-image__mobile {
    padding: calc(0.618rem * 8) calc(0.33rem * 3);
    padding: calc(var(--spacing-lg) * 8) calc(var(--spacing-md) * 3);
  }
  @media only screen and (min-width: 1440px) {
    .product-image__mobile {
    padding: calc(u(1.618) * 8) calc(u(0.75) * 3);
    padding: calc(var(--spacing-lg) * 8) calc(var(--spacing-md) * 3);
    }
  }
  @media only screen and (min-width: 1040px) {
    .product-image__mobile {
    padding: calc(u(1.38) * 8) calc(u(0.618) * 3);
    padding: calc(var(--spacing-lg) * 8) calc(var(--spacing-md) * 3);
    }
  }
  @media only screen and (min-width: 640px) {
    .product-image__mobile {
    padding: calc(u(1) * 8) calc(u(0.5) * 3);
    padding: calc(var(--spacing-lg) * 8) calc(var(--spacing-md) * 3);
    }
  }
  @media only screen and (min-width: 1440px) {
    .product-image__mobile {
    padding: calc(u(1.618) * 8) calc(u(0.75) * 3);
    padding: calc(var(--spacing-lg) * 8) calc(var(--spacing-md) * 3);
    }
  }
  @media only screen and (min-width: 1040px) {
    .product-image__mobile {
    padding: calc(u(1.38) * 8) calc(u(0.618) * 3);
    padding: calc(var(--spacing-lg) * 8) calc(var(--spacing-md) * 3);
    }
  }
  @media only screen and (min-width: 640px) {
    .product-image__mobile {
    padding: calc(u(1) * 8) calc(u(0.5) * 3);
    padding: calc(var(--spacing-lg) * 8) calc(var(--spacing-md) * 3);
    }
  }
  @media only screen and (min-width: 1440px) {
    .product-image__mobile {
    padding: calc(u(1.618) * 8) calc(u(0.75) * 3);
    padding: calc(var(--spacing-lg) * 8) calc(var(--spacing-md) * 3);
    }
  }
  @media only screen and (min-width: 1040px) {
    .product-image__mobile {
    padding: calc(u(1.38) * 8) calc(u(0.618) * 3);
    padding: calc(var(--spacing-lg) * 8) calc(var(--spacing-md) * 3);
    }
  }
  @media only screen and (min-width: 640px) {
    .product-image__mobile {
    padding: calc(u(1) * 8) calc(u(0.5) * 3);
    padding: calc(var(--spacing-lg) * 8) calc(var(--spacing-md) * 3);
    }
  }
  @media only screen and (min-width: 1440px) {
    .product-image__mobile {
    padding: calc(u(1.618) * 8) calc(u(0.75) * 3);
    padding: calc(var(--spacing-lg) * 8) calc(var(--spacing-md) * 3);
    }
  }
  @media only screen and (min-width: 1040px) {
    .product-image__mobile {
    padding: calc(u(1.38) * 8) calc(u(0.618) * 3);
    padding: calc(var(--spacing-lg) * 8) calc(var(--spacing-md) * 3);
    }
  }
  @media only screen and (min-width: 640px) {
    .product-image__mobile {
    padding: calc(u(1) * 8) calc(u(0.5) * 3);
    padding: calc(var(--spacing-lg) * 8) calc(var(--spacing-md) * 3);
    }
  }
}
@media only screen and (min-width: 768px) {
  .product-image__mobile {
    display: none;
  }
}

.single_product .repair-section {
  flex: 1 0 75%;
}

#drift-widget-container {
  z-index: 2147483647 !important;
}
#drift-widget-container iframe {
  z-index: 21474836488 !important;
}

@media only screen and (max-width: 479px) {
  .wpcf7-form-control-wrap {
    transform: scale(0.82);
    transform-origin: 0 0;
  }
}
@media only screen and (max-width: 479px) {
  .wpcf7-form-control-wrap {
    transform: scale(0.72);
    transform-origin: 0 0;
  }
}

.single_product a button {
  cursor: pointer;
  transition: 0.3s ease;
}
.single_product a:hover button {
  background-color: rgba(42, 50, 49, 0.7);
}
.single_product a:active button {
  background-color: rgba(42, 50, 49, 0.8);
  transform: scale(0.95);
}

#cookie-consent-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  z-index: 999999;
  justify-content: center;
  align-items: center;
  transition: opacity 0.5s ease;
}
#cookie-consent-overlay.visible {
  display: flex;
  opacity: 1;
}
#cookie-consent-overlay #cookie-consent-banner {
  background: rgb(154, 213, 50);
  padding: 20px;
  text-align: center;
  border-radius: 5px;
  display: flex;
  gap: 20px;
  align-items: center;
}
@media only screen and (max-width: 639px) {
  #cookie-consent-overlay #cookie-consent-banner {
    flex-direction: column;
  }
}
#cookie-consent-overlay #cookie-consent-banner p {
  margin: 0;
  color: black;
  font-size: 2.2rem;
}
#cookie-consent-overlay #cookie-consent-banner button {
  padding: 10px 20px;
  background: black;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 2rem;
  margin: 0;
}
#cookie-consent-overlay #cookie-consent-banner button:hover {
  background: black;
  color: rgb(154, 213, 50);
}

.blog-snippet {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  width: auto;
  flex: 1 0 100%;
}
@media only screen and (min-width: 640px) {
  .blog-snippet {
    flex: 1 0 40%;
  }
}
@media only screen and (min-width: 990px) {
  .blog-snippet {
    flex: 1 0 29%;
  }
}
.blog-snippet .blog-link {
  display: block;
}
.blog-snippet figure {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: calc(0.618rem * 2) calc(0.33rem * 2);
  padding: calc(var(--spacing-lg) * 2) calc(var(--spacing-md) * 2);
  width: 100%;
  height: 258px;
}
@media only screen and (min-width: 1440px) {
  .blog-snippet figure {
  padding: calc(u(1.618) * 2) calc(u(0.75) * 2);
  padding: calc(var(--spacing-lg) * 2) calc(var(--spacing-md) * 2);
  }
}
@media only screen and (min-width: 1040px) {
  .blog-snippet figure {
  padding: calc(u(1.38) * 2) calc(u(0.618) * 2);
  padding: calc(var(--spacing-lg) * 2) calc(var(--spacing-md) * 2);
  }
}
@media only screen and (min-width: 640px) {
  .blog-snippet figure {
  padding: calc(u(1) * 2) calc(u(0.5) * 2);
  padding: calc(var(--spacing-lg) * 2) calc(var(--spacing-md) * 2);
  }
}
@media only screen and (min-width: 1440px) {
  .blog-snippet figure {
  padding: calc(u(1.618) * 2) calc(u(0.75) * 2);
  padding: calc(var(--spacing-lg) * 2) calc(var(--spacing-md) * 2);
  }
}
@media only screen and (min-width: 1040px) {
  .blog-snippet figure {
  padding: calc(u(1.38) * 2) calc(u(0.618) * 2);
  padding: calc(var(--spacing-lg) * 2) calc(var(--spacing-md) * 2);
  }
}
@media only screen and (min-width: 640px) {
  .blog-snippet figure {
  padding: calc(u(1) * 2) calc(u(0.5) * 2);
  padding: calc(var(--spacing-lg) * 2) calc(var(--spacing-md) * 2);
  }
}
@media only screen and (min-width: 1440px) {
  .blog-snippet figure {
  padding: calc(u(1.618) * 2) calc(u(0.75) * 2);
  padding: calc(var(--spacing-lg) * 2) calc(var(--spacing-md) * 2);
  }
}
@media only screen and (min-width: 1040px) {
  .blog-snippet figure {
  padding: calc(u(1.38) * 2) calc(u(0.618) * 2);
  padding: calc(var(--spacing-lg) * 2) calc(var(--spacing-md) * 2);
  }
}
@media only screen and (min-width: 640px) {
  .blog-snippet figure {
  padding: calc(u(1) * 2) calc(u(0.5) * 2);
  padding: calc(var(--spacing-lg) * 2) calc(var(--spacing-md) * 2);
  }
}
@media only screen and (min-width: 1440px) {
  .blog-snippet figure {
  padding: calc(u(1.618) * 2) calc(u(0.75) * 2);
  padding: calc(var(--spacing-lg) * 2) calc(var(--spacing-md) * 2);
  }
}
@media only screen and (min-width: 1040px) {
  .blog-snippet figure {
  padding: calc(u(1.38) * 2) calc(u(0.618) * 2);
  padding: calc(var(--spacing-lg) * 2) calc(var(--spacing-md) * 2);
  }
}
@media only screen and (min-width: 640px) {
  .blog-snippet figure {
  padding: calc(u(1) * 2) calc(u(0.5) * 2);
  padding: calc(var(--spacing-lg) * 2) calc(var(--spacing-md) * 2);
  }
}
.blog-snippet figure img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.blog-excerpt {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  align-items: flex-start;
}

.blog-single .repair-section img {
  width: 100%;
  height: auto;
}

.product {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}
@media only screen and (max-width: 639px) {
  .product {
    padding: 1em;
  }
}
@media only screen and (min-width: 640px) {
  .product {
    padding: 2em 2em 2em 2em;
  }
}
@media only screen and (min-width: 1040px) {
  .product {
    width: 85%;
    padding: 3em 0 0 0;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 639px) {
  .product .repair-section_desktop-img {
    display: none;
  }
}
@media only screen and (min-width: 640px) {
  .product .repair-section_desktop-img {
    display: inline-block;
    height: 25em;
    width: auto;
  }
}
@media only screen and (min-width: 1040px) {
  .product .repair-section_desktop-img {
    height: 25em;
  }
}

@media only screen and (max-width: 767px) {
  .repair-section_mobile-img {
    height: 22em;
    padding-top: 0.5em;
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: auto !important;
    padding-bottom: 0.5em;
  }
}
@media only screen and (min-width: 768px) {
  .repair-section_mobile-img {
    display: none;
  }
}

.repair-section {
  max-width: 55em;
  font-size: 2.23284rem;
}
@media only screen and (min-width: 640px) {
  .repair-section {
    padding: 0.5em;
  }
}
@media only screen and (min-width: 1040px) {
  .repair-section {
    padding: 0em 2em 0 2em;
  }
}
.repair-section p {
  font-size: 85%;
  font-weight: 500;
}
@media only screen and (min-width: 640px) {
  .repair-section p {
    font-size: 90%;
  }
}
@media only screen and (max-width: 639px) {
  .repair-section .repair-policy-description {
    display: none;
  }
}
@media only screen and (min-width: 640px) {
  .repair-section .repair-policy-description {
    display: inline-block;
    font-size: 0.78em;
    margin-top: 2em;
    margin-bottom: 1em;
    text-align: center;
  }
}
@media only screen and (min-width: 1040px) {
  .repair-section .repair-policy-description {
    font-size: 1em;
    margin-top: 2em;
    text-align: left;
  }
}
.repair-section .repair-policy-description_mobile-view {
  padding-top: 1em;
  display: flex;
  flex-wrap: wrap;
  justify-content: center !important;
}
.repair-section .repair-policy-description_mobile-view li {
  display: block;
  height: 20%;
  padding: 0 0.5em 0 0.5em;
  margin: 0.5em 0 0.5em 0;
  text-align: center;
  border-right: 1px solid black;
  font-weight: 500;
}
.repair-section .repair-policy-description_mobile-view li:last-child {
  border: none;
}
@media only screen and (min-width: 640px) {
  .repair-section .repair-policy-description_mobile-view {
    text-align: left;
  }
  .repair-section .repair-policy-description_mobile-view li:first-of-type {
    padding-left: 0;
  }
}
.repair-section h3 {
  line-height: 1.3em;
}
@media only screen and (max-width: 639px) {
  .repair-section h3 {
    text-align: center;
  }
}
@media only screen and (min-width: 640px) {
  .repair-section h3 {
    text-align: left;
  }
}
.repair-section h1 {
  font-weight: 200;
}
@media only screen and (max-width: 639px) {
  .repair-section h1 {
    text-align: center;
  }
}
@media only screen and (min-width: 640px) {
  .repair-section h1 {
    text-align: left;
    margin-bottom: 0.5em;
  }
}
@media only screen and (min-width: 1040px) {
  .repair-section h1 {
    margin-bottom: 0.8em;
  }
}

.repair-details {
  display: flex;
  flex-direction: column;
}
.repair-details a[href^="tel:"] {
  font-weight: bold;
}
@media only screen and (max-width: 479px) {
  .repair-details a[href^="tel:"] {
    display: inline;
  }
}
@media only screen and (min-width: 640px) {
  .repair-details a[href^="tel:"] {
    display: block;
    padding-top: 0.5em;
  }
}
@media only screen and (min-width: 820px) {
  .repair-details a[href^="tel:"] {
    padding-top: 0;
    display: inline;
  }
}
.repair-details li {
  display: block;
  font-size: 2.23284rem;
  font-weight: 600;
  line-height: 1.2;
  margin-bottom: 0.5em;
  text-align: center;
}
.repair-details li button {
  background-color: rgb(42, 50, 49);
  border: none;
  color: white;
  max-width: 10em;
  padding: 0.7em;
  text-align: left;
  font-weight: 600;
  margin-top: 0.3em;
  margin-bottom: 0.3em;
}
@media only screen and (min-width: 640px) {
  .repair-details li button {
    font-size: 0.8em;
  }
}
@media only screen and (min-width: 1040px) {
  .repair-details li button {
    font-size: 1em;
  }
}
.repair-details li h3 {
  font-weight: 400;
  font-size: 1.5em;
  text-align: center;
}
@media only screen and (min-width: 1040px) {
  .repair-details li h3 {
    text-align: left;
  }
}
.repair-details li p {
  font-size: 0.7em;
  font-weight: 700;
}
@media only screen and (min-width: 1040px) {
  .repair-details li {
    text-align: left;
  }
}
@media only screen and (max-width: 639px) {
  .repair-details {
    flex-direction: column;
  }
}
@media only screen and (min-width: 820px) {
  .repair-details {
    flex-direction: row;
  }
}
.repair-details ul {
  color: white;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background-color: rgb(154, 213, 50);
}
@media only screen and (max-width: 639px) {
  .repair-details ul {
    padding: 0.7em;
  }
}
@media only screen and (min-width: 640px) {
  .repair-details ul {
    padding: 1.5em 1em;
  }
}
.repair-details section {
  padding: 1.5em;
  background-color: #f4f5f7;
  font-weight: 500;
}
@media only screen and (max-width: 639px) {
  .repair-details section {
    flex: 1;
    font-size: 1.2em;
    text-align: left;
  }
}
@media only screen and (min-width: 640px) {
  .repair-details section {
    flex: 2;
    font-size: 0.9em;
  }
}
@media only screen and (min-width: 1040px) {
  .repair-details section {
    padding: 2em;
  }
}
.repair-details section p {
  margin-top: 1.618rem;
}
.repair-details section p:first-of-type {
  margin-top: 0;
}

html, body {
  height: 100%;
}

.product-body {
  display: flex;
  flex-direction: column;
}

.product-page {
  flex: 1 0 auto;
}

.view-footer {
  flex-shrink: 0;
}

.footer-filler {
  background-color: #f4f5f7;
  border: none;
  height: 3em;
  flex-shrink: 0;
}
@media only screen and (max-width: 639px) {
  .footer-filler {
    display: none;
  }
}
@media only screen and (min-width: 640px) {
  .footer-filler {
    display: block;
  }
}

.blog-section {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}
.blog-section .heading-blog {
  text-align: center;
  width: 100%;
  padding-bottom: 0.7em;
  font-weight: 300;
}
.blog-section .blog-snppet {
  margin-right: 1em;
  margin-left: 1em;
}
@media only screen and (max-width: 424px) {
  .blog-section .blog-snppet {
    width: 100%;
  }
}
@media only screen and (min-width: 640px) {
  .blog-section .blog-snppet {
    width: 60%;
  }
}
@media only screen and (min-width: 820px) {
  .blog-section .blog-snppet {
    width: 40%;
  }
}
@media only screen and (min-width: 1280px) {
  .blog-section .blog-snppet {
    width: 30%;
  }
}
.blog-section .blog-snppet .blog-excerpt {
  padding: 0.5em;
  border: 1px rgba(154, 213, 50, 0.5) solid;
  border-top: none;
}
.blog-section .blog-snppet h2 {
  font-weight: 400;
  margin-top: 0.2em;
  margin-bottom: 0.5em;
}
.blog-section .blog-snppet p {
  margin-top: 0.4em;
}
.blog-section .blog-snppet .button, .blog-section .blog-snppet .button--full-width {
  margin-top: 1em;
  color: white;
}
.blog-section .blog-snppet img {
  width: 100%;
}

#brands-slider .swiper-button-next,
#brands-slider .swiper-button-prev {
  background: none;
  width: auto;
  height: auto;
  top: 70%;
  bottom: initial;
  z-index: 1000;
}
#brands-slider .swiper-button-next svg,
#brands-slider .swiper-button-prev svg {
  position: relative;
  z-index: 1000;
}
#brands-slider .swiper-button-prev {
  transform: rotate(270deg);
}
#brands-slider .swiper-button-next {
  transform: rotate(90deg);
}

#reviews-slider .swiper-button-next,
#reviews-slider .swiper-button-prev {
  background: none;
  width: auto;
  height: auto;
  z-index: 1000;
}
#reviews-slider .swiper-button-next svg,
#reviews-slider .swiper-button-prev svg {
  position: relative;
  z-index: 1000;
}
@media only screen and (min-width: 640px) {
  #reviews-slider .swiper-button-next svg,
  #reviews-slider .swiper-button-prev svg {
    display: none;
  }
}
#reviews-slider .swiper-button-prev {
  transform: rotate(270deg);
}
#reviews-slider .swiper-button-next {
  transform: rotate(90deg);
}
#reviews-slider .swiper-wrapper {
  align-items: flex-start;
}
@media only screen and (min-width: 640px) {
  #reviews-slider .swiper-wrapper {
    transform: none !important;
    flex-wrap: wrap;
  }
}
@media only screen and (min-width: 1040px) {
  #reviews-slider .swiper-wrapper {
    flex-wrap: nowrap;
  }
}
#reviews-slider .swiper-slide_brands {
  height: 100%;
}
@media only screen and (min-width: 640px) {
  #reviews-slider .swiper-slide {
    width: auto !important;
    flex: 1 0 48%;
    height: auto !important;
    padding: 1.618rem;
  }
}
@media only screen and (min-width: 1040px) {
  #reviews-slider .swiper-slide {
    flex: 1 0 20%;
    height: inherit !important;
    padding: 0;
  }
}

.site-review-section .site-offer {
  padding: 0 !important;
}
@media only screen and (min-width: 640px) {
  .site-review-section .site-offer {
    padding-top: 0 !important;
    padding-bottom: 2em !important;
  }
}

.site-review-section {
  align-items: flex-start;
}
.site-review-section .site-offer {
  padding: 1.5em;
}
.site-review-section .site-offer .swiper-container {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
.site-review-section .site-offer #reviews-slider section {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  max-width: 100%;
  padding-left: 2em;
  padding-right: 2em;
}
@media only screen and (min-width: 640px) {
  .site-review-section .site-offer #reviews-slider section {
    padding: 0;
  }
}
@media only screen and (min-width: 1040px) {
  .site-review-section .site-offer #reviews-slider section {
    padding: 0;
    padding-left: 3em;
    border-left: 1px solid rgba(169, 169, 169, 0.5);
  }
  .site-review-section .site-offer #reviews-slider section:first-child {
    border: none;
  }
}

.contact-add-page {
  text-align: center;
}
@media only screen and (min-width: 640px) {
  .contact-add-page {
    text-align: left;
    display: flex;
  }
  .contact-add-page div {
    flex: 1 0 45%;
    margin-right: 1.618rem;
  }
  .contact-add-page div:last-of-type {
    margin-right: 0;
  }
}
.contact-add-page p {
  line-height: 1.4;
}
.contact-add-page p span {
  font-weight: 700;
}

.repair-policy-description_mobile-view {
  font-size: 0.7em;
}

.site-nav-item.isopen {
  display: block;
}

.site-nav-item .site-nav-item__content {
  z-index: 1;
  color: black;
  padding: 2rem;
}
.site-nav-item .site-nav-item__content li {
  font-size: 0.9em !important;
}