.newsletter {
  padding-bottom: 8em;
  --sl-input-height-medium: 4em;
}
.newsletter.grid {
  --padding-vertical: 5em;
}
.newsletter h3 {
  margin: 0 0 1em;
  grid-column: var(--eighth)/span var(--third);
}
.newsletter sl-input, .newsletter input {
  grid-column: var(--eighth)/span calc(var(--quarter) + var(--third));
  border-bottom: none;
}
.newsletter sl-input::part(form-control), .newsletter input::part(form-control) {
  padding: 0;
}
.newsletter sl-input::part(base), .newsletter input::part(base) {
  padding: 0 1.5em;
  background-color: rgba(255, 255, 255, 0.2);
}
.newsletter sl-input::part(input), .newsletter input::part(input) {
  color: white;
}
.newsletter sl-input::part(input)::-moz-placeholder, .newsletter input::part(input)::-moz-placeholder {
  color: white;
}
.newsletter sl-input::part(input):-ms-input-placeholder, .newsletter input::part(input):-ms-input-placeholder {
  color: white;
}
.newsletter sl-input::part(input)::placeholder, .newsletter input::part(input)::placeholder {
  color: white;
}
.newsletter input[type=submit], .newsletter button[type=submit] {
  --background-color: var(--action-color);
  --color: white;
  --hover-color: white;
  --hover-background: var(--body-text-color);
}
.newsletter form {
  display: contents;
}
.newsletter #mc_embed_signup input[type=email].email {
  width: 100%;
  -webkit-appearance: none;
  padding: 1.5em 2em;
  background-color: rgba(255, 255, 255, 0.2);
  border: none;
  border-radius: 0px;
  color: white;
}
.newsletter #mc_embed_signup input[type=email].email::-moz-placeholder {
  color: white !important;
  opacity: 1;
}
.newsletter #mc_embed_signup input[type=email].email:-ms-input-placeholder {
  color: white !important;
  opacity: 1;
}
.newsletter #mc_embed_signup input[type=email].email::placeholder {
  color: white !important;
  opacity: 1;
}
.newsletter sl-button, .newsletter input[type=submit], .newsletter button[type=submit] {
  grid-column: calc(var(--half) + var(--eighth) + var(--twelfth))/span var(--sixth);
  --sl-input-border-radius-small:0px;
  --sl-input-border-radius-medium:0px;
}
.newsletter sl-button::part(base), .newsletter input[type=submit]::part(base), .newsletter button[type=submit]::part(base) {
  box-sizing: content-box;
  border-width: 3px;
}
.newsletter #mc_embed_signup input[type=submit] {
  -webkit-appearance: none;
  background-color: var(--secondary-color);
  color: white;
  border-radius: 0px;
  width: 100%;
  padding: 1.5em 2em;
  height: auto;
}
@media (hover: hover) {
  .newsletter #mc_embed_signup input[type=submit]:hover {
    background-color: white;
    color: var(--secondary-color);
  }
}
.newsletter sl-checkbox {
  grid-column: var(--eighth)/span var(--third);
  color: white;
}
.newsletter sl-checkbox::part(control) {
  border-color: white;
  background-color: transparent;
}
.newsletter sl-checkbox::part(label) {
  color: rgba(255, 255, 255, 0.4);
  text-transform: none;
  font-weight: 400;
  font-size: var(--step--2);
}
.newsletter sl-checkbox::part(checked-icon) {
  color: white;
}
.newsletter #mc_embed_signup, .newsletter #mc_embed_signup form, .newsletter #mc_embed_signup form > div, .newsletter #mc_embed_signup .clear {
  display: contents;
}
@media screen and (max-width: 768px) {
  .newsletter sl-button {
    grid-column: -2;
  }
  .newsletter sl-button::part(base) {
    width: -webkit-min-content;
    width: -moz-min-content;
    width: min-content;
  }
  .newsletter sl-input {
    grid-column: 1/-2;
  }
  .newsletter sl-checkbox {
    grid-column: 1/span var(--half);
  }
}
@media screen and (max-width: 500px) {
  .newsletter {
    padding-bottom: 5rem;
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
    align-items: stretch;
  }
  .newsletter h3 {
    flex: 1 0 100%;
  }
  .newsletter input[type=submit] {
    flex: 1 0 auto;
    max-width: 15ch;
  }
  .newsletter input[type=email] {
    max-width: calc(100% - 15ch - 2em);
  }
}
@media screen and (max-width: 450px) {
  .newsletter sl-input {
    grid-column: 1/span var(--columns);
  }
  .newsletter sl-button {
    margin: 1em 0;
  }
  .newsletter sl-checkbox {
    grid-row: last;
    align-self: center;
    grid-column: 1/-2;
  }
}
@media screen and (max-width: 375px) {
  .newsletter input[type=submit] {
    max-width: 100%;
  }
  .newsletter input[type=email] {
    max-width: 100%;
    margin: 0.5em 0 !important;
  }
}