.btn {
  color: $primary-bg;
  background: $primary-color;
  border-color: $primary-color;
  border-radius: 20px;
  padding: 16px 32px;
  border: 1px solid;
  font-weight: 700;
  font-family: "Roboto", Arial, sans-serif;

  @include media-breakpoint-down(xl) {
    font-size: $font-size-16;
    padding: 12px 25px;
  }

  @include media-breakpoint-down(md) {
    font-size: $font-size-14;
    padding: 10px 20px;
  }

  &.btn-alt {
    background: transparent;
    border-color: $primary-bg;

    &:hover,
    &:active,
    &:focus {
      border-color: $fifth-color;
      background: transparent;
    }
  }

  &:hover,
  &:active,
  &:focus {
    color: $primary-bg;
    background: transparent linear-gradient(181deg, $fifth-color 0%, $fifth-color 100%) 0% 0% no-repeat padding-box;
  }

  &.btn-primary {
    color: $primary-bg;
    background: transparent linear-gradient(181deg, $tertiary-color 0%, $fifth-color 100%) 0% 0% no-repeat padding-box;
    border-color: transparent;

    &:hover,
    &:active,
    &:focus {
      color: $primary-bg;
      background: transparent linear-gradient(181deg, $fifth-color 0%, $fifth-color 100%) 0% 0% no-repeat padding-box;
    }
  }

  &:focus {
    box-shadow: none;
  }
}