.ntl-button-wrapper {
  margin: var(--ntl-spacing-xxl) 0;
}

.ntl-button {
  align-items: center;
  appearance: none;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--ntl-radius-sm);
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  justify-content: center;
  line-height: 1.25;
  padding: 0.6em 1em;
  text-align: center;
  text-decoration: none;
  transition: background-color var(--ntl-transition-fast), border-color var(--ntl-transition-fast), color var(--ntl-transition-fast);
}
.ntl-button:hover, .ntl-button:focus {
  text-decoration: none;
}

.ntl-button--large {
  font-size: var(--ntl-font-size-h4);
  padding: 0.75em 1.25em;
}

.ntl-button--primary {
  background: var(--ntl-color-primary);
  border-color: var(--ntl-color-primary);
  color: var(--ntl-color-background-white);
}
.ntl-button--primary:hover, .ntl-button--primary:focus {
  background: var(--ntl-color-primary-hover);
  border-color: var(--ntl-color-primary-hover);
  color: var(--ntl-color-background-white);
}

.ntl-button--dark {
  background: var(--ntl-color-dark);
  border-color: var(--ntl-color-dark);
  color: var(--ntl-color-background-white);
}
.ntl-button--dark:hover, .ntl-button--dark:focus {
  background: var(--ntl-color-dark-hover);
  border-color: var(--ntl-color-dark-hover);
  color: var(--ntl-color-background-white);
}

.ntl-button--success {
  background: var(--ntl-color-success);
  border-color: var(--ntl-color-success);
  color: var(--ntl-color-background-white);
}
.ntl-button--success:hover, .ntl-button--success:focus {
  background: var(--ntl-color-success-hover);
  border-color: var(--ntl-color-success-hover);
  color: var(--ntl-color-background-white);
}

.ntl-button--transparent {
  background: transparent;
  border: 3px solid var(--ntl-color-background-white);
  color: var(--ntl-color-background-white);
}
.ntl-button--transparent:hover, .ntl-button--transparent:focus {
  border-color: rgba(255, 255, 255, 0.65);
  color: var(--ntl-color-background-white);
}

.ntl-social-button {
  border: 0;
  color: var(--ntl-color-background-white);
  font-weight: 700;
  min-height: 2.5rem;
  min-width: 2.5rem;
  padding: 0.55rem;
}
.ntl-social-button:hover, .ntl-social-button:focus {
  color: var(--ntl-color-background-white);
}

.ntl-social-button--facebook {
  background: #4f7dd4;
}

.ntl-social-button--x {
  background: var(--ntl-color-dark-hover);
}

.ntl-social-button--linkedin {
  background: #21a6d8;
}