.button,
.big-button {
  -webkit-appearance: none;
  background-color: var(--colors-primary-500);
  border: none;
  border-radius: 1.5rem;
  cursor: pointer;
  display: inline-block;
  font-family: var(--text-fonts-sans);
  font-weight: var(--text-weights-semibold);
  line-height: 1;
  padding: var(--dimensions-xs) var(--dimensions-l);
  transition:
    background-color 0.25s ease-out,
    color 0.25s ease-out;

  &:hover {
    background-color: var(--colors-primary-400);
    border: none;
  }

  &:focus {
    border: none;
  }

  &:active {
    border: none;
  }
}

.big-button {
  padding: var(--dimensions-m) var(--dimensions-l);
}

/* Colors */
.button,
.big-button {
  &.coral,
  &.salmon {
    background-color: var(--colors-secondary-500);

    &:hover {
      background-color: var(--colors-secondary-400);
    }
  }
}

/*
[data-whatinput='mouse'] .button {
  outline: 0;
}
.button:focus,
.button:hover {
  background-color: var(--colors-primary-400);
}
.button.tiny {
  font-size: 0.6rem;
}
.button.small {
  font-size: 0.75rem;
}
.button.large {
  font-size: 1.25rem;
}
.button.expanded {
  display: block;
  margin-left: 0;
  margin-right: 0;
  width: 100%;
}
.button.primary:focus,
.button.primary:hover {
  background-color: var(--colors-primary-400);
  color: var(--colors-foreground);
}
.button.secondary {
  background-color: #767676;
  color: var(--colors-background);
}
.button.secondary:focus,
.button.secondary:hover {
  background-color: #5e5e5e;
  color: var(--colors-background);
}
.button.success {
  background-color: #3adb76;
  color: var(--colors-foreground);
}
.button.success:focus,
.button.success:hover {
  background-color: #22bb5b;
  color: var(--colors-foreground);
}
.button.warning {
  background-color: #ffba02;
  color: var(--colors-foreground);
}
.button.warning:focus,
.button.warning:hover {
  background-color: #ce9600;
  color: var(--colors-foreground);
}
.button.alert {
  background-color: var(--colors-secondary-300);
  color: var(--colors-foreground);
}
.button.alert:focus,
.button.alert:hover {
  background-color: #d34422;
  color: var(--colors-foreground);
}
.button.disabled,
.button[disabled] {
  cursor: not-allowed;
  opacity: 0.25;
}
.button.disabled,
.button.disabled:focus,
.button.disabled:hover,
.button[disabled],
.button[disabled]:focus,
.button[disabled]:hover {
  background-color: var(--colors-primary-500);
  color: var(--colors-background);
}
.button.disabled.primary,
.button[disabled].primary {
  cursor: not-allowed;
  opacity: 0.25;
}
.button.disabled.primary,
.button.disabled.primary:focus,
.button.disabled.primary:hover,
.button[disabled].primary,
.button[disabled].primary:focus,
.button[disabled].primary:hover {
  background-color: var(--colors-primary-500);
  color: var(--colors-foreground);
}
.button.disabled.secondary,
.button[disabled].secondary {
  cursor: not-allowed;
  opacity: 0.25;
}
.button.disabled.secondary,
.button.disabled.secondary:focus,
.button.disabled.secondary:hover,
.button[disabled].secondary,
.button[disabled].secondary:focus,
.button[disabled].secondary:hover {
  background-color: #767676;
  color: var(--colors-background);
}
.button.disabled.success,
.button[disabled].success {
  cursor: not-allowed;
  opacity: 0.25;
}
.button.disabled.success,
.button.disabled.success:focus,
.button.disabled.success:hover,
.button[disabled].success,
.button[disabled].success:focus,
.button[disabled].success:hover {
  background-color: #3adb76;
  color: var(--colors-foreground);
}
.button.disabled.warning,
.button[disabled].warning {
  cursor: not-allowed;
  opacity: 0.25;
}
.button.disabled.warning,
.button.disabled.warning:focus,
.button.disabled.warning:hover,
.button[disabled].warning,
.button[disabled].warning:focus,
.button[disabled].warning:hover {
  background-color: #ffba02;
  color: var(--colors-foreground);
}
.button.disabled.alert,
.button[disabled].alert {
  cursor: not-allowed;
  opacity: 0.25;
}
.button.disabled.alert,
.button.disabled.alert:focus,
.button.disabled.alert:hover,
.button[disabled].alert,
.button[disabled].alert:focus,
.button[disabled].alert:hover {
  background-color: var(--colors-secondary-300);
  color: var(--colors-foreground);
}
.button.clear,
.button.clear.disabled,
.button.clear.disabled:focus,
.button.clear.disabled:hover,
.button.clear:focus,
.button.clear:hover,
.button.clear[disabled],
.button.clear[disabled]:focus,
.button.clear[disabled]:hover,
.button.hollow,
.button.hollow.disabled,
.button.hollow.disabled:focus,
.button.hollow.disabled:hover,
.button.hollow:focus,
.button.hollow:hover,
.button.hollow[disabled],
.button.hollow[disabled]:focus,
.button.hollow[disabled]:hover {
  background-color: transparent;
}
.button.hollow {
  border: 1px solid var(--colors-primary-500);
  color: var(--colors-primary-500);
}
.button.hollow:focus,
.button.hollow:hover {
  border-color: #015072;
  color: #015072;
}
.button.hollow.primary,
.button.hollow:focus.disabled,
.button.hollow:focus[disabled],
.button.hollow:hover.disabled,
.button.hollow:hover[disabled] {
  border: 1px solid var(--colors-primary-500);
  color: var(--colors-primary-500);
}
.button.hollow.primary:focus,
.button.hollow.primary:hover {
  border-color: #015072;
  color: #015072;
}
.button.hollow.primary:focus.disabled,
.button.hollow.primary:focus[disabled],
.button.hollow.primary:hover.disabled,
.button.hollow.primary:hover[disabled] {
  border: 1px solid var(--colors-primary-500);
  color: var(--colors-primary-500);
}
.button.hollow.secondary {
  border: 1px solid #767676;
  color: #767676;
}
.button.hollow.secondary:focus,
.button.hollow.secondary:hover {
  border-color: #3b3b3b;
  color: #3b3b3b;
}
.button.hollow.secondary:focus.disabled,
.button.hollow.secondary:focus[disabled],
.button.hollow.secondary:hover.disabled,
.button.hollow.secondary:hover[disabled] {
  border: 1px solid #767676;
  color: #767676;
}
.button.hollow.success {
  border: 1px solid #3adb76;
  color: #3adb76;
}
.button.hollow.success:focus,
.button.hollow.success:hover {
  border-color: #157539;
  color: #157539;
}
.button.hollow.success:focus.disabled,
.button.hollow.success:focus[disabled],
.button.hollow.success:hover.disabled,
.button.hollow.success:hover[disabled] {
  border: 1px solid #3adb76;
  color: #3adb76;
}
.button.hollow.warning {
  border: 1px solid #ffba02;
  color: #ffba02;
}
.button.hollow.warning:focus,
.button.hollow.warning:hover {
  border-color: #815d00;
  color: #815d00;
}
.button.hollow.warning:focus.disabled,
.button.hollow.warning:focus[disabled],
.button.hollow.warning:hover.disabled,
.button.hollow.warning:hover[disabled] {
  border: 1px solid #ffba02;
  color: #ffba02;
}
.button.hollow.alert {
  border: 1px solid var(--colors-secondary-300);
  color: var(--colors-secondary-300);
}
.button.hollow.alert:focus,
.button.hollow.alert:hover {
  border-color: #842b15;
  color: #842b15;
}
.button.hollow.alert:focus.disabled,
.button.hollow.alert:focus[disabled],
.button.hollow.alert:hover.disabled,
.button.hollow.alert:hover[disabled] {
  border: 1px solid var(--colors-secondary-300);
  color: var(--colors-secondary-300);
}
.button.clear {
  border: 1px solid var(--colors-primary-500);
  color: var(--colors-primary-500);
}
.button.clear:focus,
.button.clear:hover {
  color: #015072;
}
.button.clear:focus.disabled,
.button.clear:focus[disabled],
.button.clear:hover.disabled,
.button.clear:hover[disabled] {
  border: 1px solid var(--colors-primary-500);
  color: var(--colors-primary-500);
}
.button.clear,
.button.clear.disabled,
.button.clear:focus,
.button.clear:focus.disabled,
.button.clear:focus[disabled],
.button.clear:hover,
.button.clear:hover.disabled,
.button.clear:hover[disabled],
.button.clear[disabled] {
  border-color: transparent;
}
.button.clear.primary {
  border: 1px solid var(--colors-primary-500);
  color: var(--colors-primary-500);
}
.button.clear.primary:focus,
.button.clear.primary:hover {
  color: #015072;
}
.button.clear.primary:focus.disabled,
.button.clear.primary:focus[disabled],
.button.clear.primary:hover.disabled,
.button.clear.primary:hover[disabled] {
  border: 1px solid var(--colors-primary-500);
  color: var(--colors-primary-500);
}
.button.clear.primary,
.button.clear.primary.disabled,
.button.clear.primary:focus,
.button.clear.primary:focus.disabled,
.button.clear.primary:focus[disabled],
.button.clear.primary:hover,
.button.clear.primary:hover.disabled,
.button.clear.primary:hover[disabled],
.button.clear.primary[disabled] {
  border-color: transparent;
}
.button.clear.secondary {
  border: 1px solid #767676;
  color: #767676;
}
.button.clear.secondary:focus,
.button.clear.secondary:hover {
  color: #3b3b3b;
}
.button.clear.secondary:focus.disabled,
.button.clear.secondary:focus[disabled],
.button.clear.secondary:hover.disabled,
.button.clear.secondary:hover[disabled] {
  border: 1px solid #767676;
  color: #767676;
}
.button.clear.secondary,
.button.clear.secondary.disabled,
.button.clear.secondary:focus,
.button.clear.secondary:focus.disabled,
.button.clear.secondary:focus[disabled],
.button.clear.secondary:hover,
.button.clear.secondary:hover.disabled,
.button.clear.secondary:hover[disabled],
.button.clear.secondary[disabled] {
  border-color: transparent;
}
.button.clear.success {
  border: 1px solid #3adb76;
  color: #3adb76;
}
.button.clear.success:focus,
.button.clear.success:hover {
  color: #157539;
}
.button.clear.success:focus.disabled,
.button.clear.success:focus[disabled],
.button.clear.success:hover.disabled,
.button.clear.success:hover[disabled] {
  border: 1px solid #3adb76;
  color: #3adb76;
}
.button.clear.success,
.button.clear.success.disabled,
.button.clear.success:focus,
.button.clear.success:focus.disabled,
.button.clear.success:focus[disabled],
.button.clear.success:hover,
.button.clear.success:hover.disabled,
.button.clear.success:hover[disabled],
.button.clear.success[disabled] {
  border-color: transparent;
}
.button.clear.warning {
  border: 1px solid #ffba02;
  color: #ffba02;
}
.button.clear.warning:focus,
.button.clear.warning:hover {
  color: #815d00;
}
.button.clear.warning:focus.disabled,
.button.clear.warning:focus[disabled],
.button.clear.warning:hover.disabled,
.button.clear.warning:hover[disabled] {
  border: 1px solid #ffba02;
  color: #ffba02;
}
.button.clear.warning,
.button.clear.warning.disabled,
.button.clear.warning:focus,
.button.clear.warning:focus.disabled,
.button.clear.warning:focus[disabled],
.button.clear.warning:hover,
.button.clear.warning:hover.disabled,
.button.clear.warning:hover[disabled],
.button.clear.warning[disabled] {
  border-color: transparent;
}
.button.clear.alert {
  border: 1px solid var(--colors-secondary-300);
  color: var(--colors-secondary-300);
}
.button.clear.alert:focus,
.button.clear.alert:hover {
  color: #842b15;
}
.button.clear.alert:focus.disabled,
.button.clear.alert:focus[disabled],
.button.clear.alert:hover.disabled,
.button.clear.alert:hover[disabled] {
  border: 1px solid var(--colors-secondary-300);
  color: var(--colors-secondary-300);
}
.button.clear.alert,
.button.clear.alert.disabled,
.button.clear.alert:focus,
.button.clear.alert:focus.disabled,
.button.clear.alert:focus[disabled],
.button.clear.alert:hover,
.button.clear.alert:hover.disabled,
.button.clear.alert:hover[disabled],
.button.clear.alert[disabled] {
  border-color: transparent;
}
.button.dropdown::after {
  border: 0.4em inset;
  border-bottom-width: 0;
  border-color: var(--colors-background) transparent transparent;
  border-top-style: solid;
  content: '';
  float: right;
  height: 0;
  margin-left: 1em;
  position: relative;
  top: 0.4em;
  width: 0;
}
.button-group,
.card {
  display: -ms-flexbox;
}
.button.dropdown.clear.primary::after,
.button.dropdown.clear::after,
.button.dropdown.hollow.primary::after,
.button.dropdown.hollow::after {
  border-top-color: var(--colors-primary-500);
}
.button.dropdown.clear.secondary::after,
.button.dropdown.hollow.secondary::after {
  border-top-color: #767676;
}
.button.dropdown.clear.success::after,
.button.dropdown.hollow.success::after {
  border-top-color: #3adb76;
}
.button.dropdown.clear.warning::after,
.button.dropdown.hollow.warning::after {
  border-top-color: #ffba02;
}
.button.dropdown.clear.alert::after,
.button.dropdown.hollow.alert::after {
  border-top-color: var(--colors-secondary-300);
}
.button.arrow-only::after {
  float: none;
  margin-left: 0;
  top: -0.1em;
}
a.button:focus,
a.button:hover {
  text-decoration: none;
}
.button-group {
  display: flex;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -ms-flex-align: stretch;
  align-items: stretch;
}
.button-group::after,
.button-group::before {
  content: ' ';
  display: table;
  -ms-flex-preferred-size: 0;
  flex-basis: 0;
  -ms-flex-order: 1;
  order: 1;
}
.button-group::after {
  clear: both;
}
.button-group .button {
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  font-size: 0.9rem;
  margin: 0 1px 1px 0;
}
.button-group .button:last-child {
  margin-right: 0;
}
.button-group.tiny .button {
  font-size: 0.6rem;
}
.button-group.small .button {
  font-size: 0.75rem;
}
.button-group.large .button {
  font-size: 1.25rem;
}
.button-group.expanded .button {
  -ms-flex: 1 1 0px;
  flex: 1 1 0px;
}
.button-group.primary .button {
  background-color: var(--colors-primary-500);
  color: var(--colors-foreground);
}
.button-group.primary .button:focus,
.button-group.primary .button:hover {
  background-color: var(--colors-primary-400);
  color: var(--colors-foreground);
}
.button-group.secondary .button {
  background-color: #767676;
  color: var(--colors-background);
}
.button-group.secondary .button:focus,
.button-group.secondary .button:hover {
  background-color: #5e5e5e;
  color: var(--colors-background);
}
.button-group.success .button {
  background-color: #3adb76;
  color: var(--colors-foreground);
}
.button-group.success .button:focus,
.button-group.success .button:hover {
  background-color: #22bb5b;
  color: var(--colors-foreground);
}
.button-group.warning .button {
  background-color: #ffba02;
  color: var(--colors-foreground);
}
.button-group.warning .button:focus,
.button-group.warning .button:hover {
  background-color: #ce9600;
  color: var(--colors-foreground);
}
.button-group.alert .button {
  background-color: var(--colors-secondary-300);
  color: var(--colors-foreground);
}
.button-group.alert .button:focus,
.button-group.alert .button:hover {
  background-color: #d34422;
  color: var(--colors-foreground);
}
.button-group.stacked,
.button-group.stacked-for-medium,
.button-group.stacked-for-small {
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
.button-group.stacked .button,
.button-group.stacked-for-medium .button,
.button-group.stacked-for-small .button {
  -ms-flex: 0 0 100%;
  flex: 0 0 100%;
}
.button-group.stacked .button:last-child,
.button-group.stacked-for-medium .button:last-child,
.button-group.stacked-for-small .button:last-child {
  margin-bottom: 0;
}
.button-group.stacked-for-medium.expanded .button,
.button-group.stacked-for-small.expanded .button,
.button-group.stacked.expanded .button {
  -ms-flex: 1 1 0px;
  flex: 1 1 0px;
}
@media print, screen and (min-width: 48em) {
  .button-group.stacked-for-small .button {
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    margin-bottom: 0;
  }
}
@media print, screen and (min-width: 64em) {
  .button-group.stacked-for-medium .button {
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    margin-bottom: 0;
  }
}
@media screen and (max-width: 47.99875em) {
  .button-group.stacked-for-small.expanded {
    display: block;
  }
  .button-group.stacked-for-small.expanded .button {
    display: block;
    margin-right: 0;
  }
}
@media screen and (max-width: 63.99875em) {
  .button-group.stacked-for-medium.expanded {
    display: block;
  }
  .button-group.stacked-for-medium.expanded .button {
    display: block;
    margin-right: 0;
  }
}
.close-button {
  color: var(--colors-neutral-500);
  cursor: pointer;
  position: absolute;
}
[data-whatinput='mouse'] .close-button {
  outline: 0;
}
.close-button:focus,
.close-button:hover {
  color: var(--colors-foreground);
}
.close-button.small {
  font-size: 1.5em;
  line-height: 1;
  right: 0.66rem;
  top: 0.33em;
}
.close-button,
.close-button.medium {
  font-size: 2em;
  line-height: 1;
  right: 1rem;
  top: 0.5rem;
}

.button,
.button.gray,
.button.primary,
.button.tealish {
  color: var(--colors-foreground);
  font-family: var(--text-fonts-sans);
  font-size: 0.9375rem;
  font-weight: 700;

  text-align: center;
}

.button,
.button.primary {
  background-color: var(--colors-primary-500);
  border: 0;
}
.button.primary:hover,
.button:hover {
  background-color: var(--colors-primary-400);
  border-bottom: 0;
  color: var(--colors-foreground);
}
.button.primary:active,
.button.primary:focus,
.button:active,
.button:focus {
  outline: 2px solid var(--colors-foreground);
}
.button.gray {
  background-color: #f4f4f4;
  border: 0;
}
.button.gray:hover {
  background-color: #e2e2e2;
  border-bottom: 0;
  color: var(--colors-foreground);
}
.button.gray:active,
.button.gray:focus {
  outline: 2px solid var(--colors-foreground);
}
.button.tealish {
  background-color: #50c4b7;
  border: 0;
}
.small-button,
.small-button.navy {
  font-family: var(--text-fonts-sans);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1;
  text-align: center;
}
.button.tealish:hover {
  background-color: #6bcdc2;
  border-bottom: 0;
  color: var(--colors-foreground);
}
.button.tealish:active,
.button.tealish:focus {
  outline: 2px solid var(--colors-foreground);
}
.small-button {
  background-color: var(--colors-primary-500);
  border: 0;
  color: var(--colors-foreground);
}
.small-button:hover {
  background-color: var(--colors-primary-400);
  border-bottom: 0;
  color: var(--colors-foreground);
}
.small-button:active,
.small-button:focus {
  outline: 2px solid var(--colors-foreground);
}
.small-button.navy {
  background-color: var(--colors-foreground);
  border: 0;
  color: var(--colors-background);
}
.big-button,
.big-button.salmon,
.big-button.tealish,
.mailchimp-signup-subscribe-block-stay-connected-form input[type='submit'] {
  font-family: var(--text-fonts-sans);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1;
  padding: 1rem;
  text-align: center;
}
.small-button.navy:hover {
  background-color: #0e305a;
  border-bottom: 0;
  color: var(--colors-background);
}
.small-button.navy:active,
.small-button.navy:focus {
  border: 2px dotted var(--colors-primary-500);
  outline: 0;
}
.big-button {
  background-color: var(--colors-primary-500);
  border: 0;
  color: var(--colors-foreground);
}
.big-button:hover {
  background-color: var(--colors-primary-400);
  border-bottom: 0;
  color: var(--colors-foreground);
}
.big-button:active,
.big-button:focus {
  outline: 2px solid var(--colors-foreground);
}
.big-button.salmon,
.mailchimp-signup-subscribe-block-stay-connected-form input[type='submit'] {
  background-color: #ff8568;
  border: 0;
  color: var(--colors-foreground);
}
.big-button.salmon:hover,
.mailchimp-signup-subscribe-block-stay-connected-form
  input:hover[type='submit'] {
  background-color: #ff957c;
  border-bottom: 0;
  color: var(--colors-foreground);
}
.big-button.salmon:active,
.big-button.salmon:focus,
.mailchimp-signup-subscribe-block-stay-connected-form
  input:active[type='submit'],
.mailchimp-signup-subscribe-block-stay-connected-form
  input:focus[type='submit'] {
  outline: 2px solid var(--colors-foreground);
}
.big-button.tealish {
  background-color: #50c4b7;
  border: 0;
  color: var(--colors-foreground);
}
.big-button.tealish:hover {
  background-color: #6bcdc2;
  border-bottom: 0;
  color: var(--colors-foreground);
}
.big-button.tealish:active,
.big-button.tealish:focus {
  outline: 2px solid var(--colors-foreground);
}

.button-group {
  margin-bottom: 1rem;
} */