a.button {
  padding: 1.6rem 2.8rem;
  border-radius: 8px;
  color: var(--color-white);
  background-color: var(--color-primary);
  font-family: var(--header-font);
  font-variant-ligatures: contextual;
  -moz-font-feature-settings: "calt";
  -webkit-font-feature-settings: "calt";
  font-feature-settings: "calt";
  font-size: var(--text-button);
  text-transform: uppercase;
  letter-spacing: 1px;
  display: inline-block;
  transition: all 200ms ease-in;
  transition: background-color 200ms ease-in;
  text-align: center;
}
a.button:hover {
  text-decoration: none;
  background-color: var(--color-primary-bright);
  transition: background-color 200ms ease-in;
  color: var(--color-white);
}
a.button.button--reversed {
  background-color: var(--color-white);
  border: 2px solid var(--color-primary-bright);
  color: var(--color-primary-bright);
  padding: 1.4rem;
  font-weight: 600;
  transition: background-color 200ms ease-in;
}
a.button.button--reversed:hover {
  border-color: var(--color-primary-light);
  color: var(--color-primary-light);
}
a.button.button--reversed:active,
a.button.button--reversed:focus {
  border-color: var(--color-primary-dark);
  color: var(--color-primary-dark);
}

a.button--alt {
  background-color: var(--color-secondary);
  width: 100%;
}
.expert-search a.button--alt {
  padding: 1.6rem;
}
a.button--alt:hover,
a.button--alt:focus,
.profile-edit
  [id*="field-articles"]
  button:hover
  .profile-edit
  [id*="field-articles"]
  button:focus,
.profile-edit
  [id*="field-work"]
  button:hover
  .profile-edit
  [id*="field-work"]
  button:focus {
  background-color: var(--color-secondary-light);
  color: var(--color-white);
  text-decoration: none;
}
a.button--alt:active {
  background-color: var(--color-secondary-dark);
  color: var(--color-white);
}
a.button--scimex {
  background-color: var(--color-tertiary);
}
a.button--scimex:active,
a.button--scimex:hover {
  background-color: var(--color-tertiary-light);
}

a.button--alt.button--reversed {
  background-color: var(--color-white);
  border: 2px solid var(--color-secondary);
  color: var(--color-secondary);
  padding: 1.4rem;
  font-weight: 600;
  transition: background-color 200ms ease-in;
}

a.button--alt.button--reversed:hover {
  border-color: var(--color-secondary-light);
  color: var(--color-secondary-light);
  background-color: var(--color-white);
}

a.button--alt.button--reversed:active,
a.button--alt.button--reversed:focus {
  border-color: var(--color-secondary-dark);
  color: var(--color-secondary-dark);
  background-color: var(--color-white);
}

a.button.button--white {
  background: none;
  border-color: var(--color-white);
  padding: 1rem 0.6rem;
  color: var(--color-white);
  border: 2px solid var(--color-white);
  transition: all 200ms ease-in;
}
a.button.button--white:active,
a.button.button--white:focus,
a.button.button--white:hover {
  background-color: var(--color-white);
  color: var(--color-primary-bright);
}

a.button.button--alt.button--white {
  background: none;
  width: unset;
  border-color: var(--color-white);
  padding: 1rem 2.8rem;
  color: var(--color-white);
  border: 2px solid var(--color-white);
  transition: all 200ms ease-in;
}

a.button.button--alt.button--white:active,
a.button.button--alt.button--white:focus,
a.button.button--alt.button--white:hover {
  background-color: var(--color-white);
  color: var(--color-secondary);
}

.field--name-field-work .field-add-more-submit,
.form-actions .btn-danger {
  background-color: var(--color-white);
  border: 2px solid var(--color-secondary);
  color: var(--color-secondary);
  padding: 1.4rem;
  margin-bottom: 1rem;
  font-weight: 600;
  transition: background-color 200ms ease-in;
}

.btn-danger span {
  display: none;
}
.field-add-more-submit:hover,
.btn-danger:hover {
  border-color: var(--color-secondary-light);
  color: var(--color-secondary-light);
}
.field-add-more-submit:active,
.btn-danger:active,
.field-add-more-submit:focus,
.btn-danger:focus {
  border-color: var(--color-secondary-dark);
  color: var(--color-secondary-dark);
}

.form__button {
  background-color: var(--color-secondary);
  color: var(--color-white);
  padding: 1rem;
  border-radius: 8px;
  border: none;
  width: 100%;
  height: 46px;
  text-transform: uppercase;
  font-size: var(--text-button);
  transition: background-color 200ms ease-in;
  font-family: var(--header-font);
  font-variant-ligatures: contextual;
  -moz-font-feature-settings: "calt";
  -webkit-font-feature-settings: "calt";
  font-feature-settings: "calt";
}

.breakpoint-mobile-only .form__button {
  display: block;
  width: 100%;
  margin-top: 2rem;
}
.breakpoint-mobile-only .contact__submit .form__button {
  margin-top: unset;
}

.form__button:hover,
.form__button:focus,
.form__button:active:hover,
.form__button:active:focus {
  color: var(--color-white);
  background-color: var(--color-secondary-light) !important;
  border: none;
}

.form__button:active {
  background-color: var(--color-secondary-dark);
}

.form__button--stretch {
  width: 243px;
  margin-top: 35px;
}

.form__button--full-width {
  width: 100%;
  margin-top: 35px;
}

.form__button.form__button--alt:hover {
  background-color: var(--color-secondary-light);
}
.form__button.form__button--alt:active {
  background-color: var(--color-secondary-dark);
}

.btn-primary:focus,
.btn-primary:active {
  color: var(--color-primary-dark);
}

.btn-default:focus,
.btn-default:active {
  color: var(--color-white);
}

.social__button {
  padding-top: 3rem;
}

.button--full-width {
  width: 100%;
}

.mail-wrapper {
  position: absolute;
  z-index: 2;
  display: none;
  transition: 1s;
  width: 100%;
  word-wrap: break-word;
}

.contact-wrapper {
  width: 100%;
}