.callout-section {
  padding: var(--space-double);
  background-color: var(--color-off-white);
  text-align: center;
  color: var(--color-night-sky);
}

@media only screen and (min-width: 769px) {
  .callout-section {
    padding: var(--space-sextuple) 0;
  }
}

.callout-section .callout-section-heading {
  font-size: 1.5rem;
  font-weight: bold;
}

@media only screen and (min-width: 769px) {
  .callout-section p {
    padding: 0 15rem;
  }

  .subnav ~ .main-content .callout-section p {
    padding: 0 10%;
  }
}

.callout-section .form-actions {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

@media only screen and (min-width: 769px) {
  .callout-section .form-actions {
    flex-direction: row;
    flex-wrap: nowrap;
  }
}

.callout-section .form-actions .button {
  width: 16rem;
  background-color: var(--color-golden-hour);
  color: var(--color-grey-darkest);
}

.callout-section .form-actions .button.grey-dark {
  background-color: var(--color-grey-dark);
  border: 1px solid var(--color-grey-dark);
  color: var(--color-white);
}

.callout-section .form-actions .button.grey-dark:hover,
.callout-section .form-actions .button.grey-dark:focus {
  color: var(--color-grey-dark);
  background-color: var(--color-white);
}

.callout-section .form-actions .button.form-submit {
  margin-top: 1rem;
}

.callout-section .form-actions li {
  margin: var(--space) 0;
}

@media only screen and (min-width: 769px) {
  .callout-section .form-actions li {
    margin: 0;
  }
}

.callout-section .form-actions li:nth-of-type(2) {
  margin: 0;
}

@media only screen and (min-width: 769px) {
  .callout-section .form-actions li:nth-of-type(2) {
    margin: 0 var(--space-quadruple);
  }
}

.callout-section .cta-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

@media only screen and (min-width: 769px) {
  .callout-section .cta-list {
    flex-direction: row;
    flex-wrap: nowrap;
  }
}

.callout-section .cta-list .button {
  width: 16rem;
}

.callout-section .cta-list .button.grey-dark {
  background-color: var(--color-grey-dark);
  border: 1px solid var(--color-grey-dark);
  color: var(--color-white);
}

.callout-section .cta-list .button.grey-dark:hover,
.callout-section .cta-list .button.grey-dark:focus {
  color: var(--color-grey-dark);
  background-color: var(--color-white);
}

.callout-section .cta-list .button.form-submit {
  margin-top: 1rem;
}

.callout-section .cta-list li {
  margin: var(--space) 0;
}

@media only screen and (min-width: 769px) {
  .callout-section .cta-list li {
    margin: 0;
  }
}

.callout-section .cta-list li:nth-of-type(2) {
  margin: 0;
}

@media only screen and (min-width: 769px) {
  .callout-section .cta-list li:nth-of-type(2) {
    margin: 0 var(--space-quadruple);
  }
}

.callout-section.white {
  background-color: var(--color-white);
  color: var(--color-grey-darkest);
}

.callout-section.off-white {
  background-color: var(--color-off-white);
  color: var(--color-grey-dark);
}

.callout-section.gold {
  background-color: var(--color-golden-hour);
  color: var(--color-grey-darkest);
}

.callout-section.grey_dark {
  background-color: var(--color-grey-dark);
  color: var(--color-white);
}

.callout-section .mailchimp-signup-subscribe-form,
.callout-section .email_signup {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
}

.callout-section .mailchimp-signup-subscribe-form input,
.callout-section .email_signup input {
  margin: 0 var(--space) 0 0;
  border: 1px solid var(--color-grey-light);
  height: 2.5rem;
}

.callout-section .mailchimp-signup-subscribe-form label,
.callout-section .email_signup label {
  display: none;
}

.callout-section .mailchimp-signup-subscribe-form label.option,
.callout-section .email_signup label.option {
  display: inline;
}