.btn {
  display: inline-block;
  font-weight: 700;
  color: #222222;
  text-align: center;
  -webkit-user-select: none;
          user-select: none;
  border: 1px solid #000;
  padding: 7px 12px;
  cursor: pointer;
  text-decoration: none;
  transition: all .4s ease; }
  .btn {
    font-size: 14px; }
  @media (min-width: 320px) {
    .btn {
      font-size: calc(14px + 4 * (100vw - 320px) / 2080); } }
  @media (min-width: 2400px) {
    .btn {
      font-size: 18px; } }
  .btn:hover {
    color: #FFF;
    text-decoration: none; }
  .is-tabbing .btn:focus {
    background-color: #000;
    color: #FFF;
    text-decoration: none; }
  .btn:disabled, .btn.is-disabled {
    transition: none;
    opacity: .6;
    box-shadow: none;
    cursor: not-allowed;
    background-color: #FFF; }
    .prefers-reduced-motion .btn:disabled, .prefers-reduced-motion .btn.is-disabled {
      transition: none; }
  .btn:active, .btn.active {
    background-color: #d9d9d9; }
  .btn--primary {
    display: inline-block;
    font-weight: 700;
    color: #222222;
    text-align: center;
    -webkit-user-select: none;
            user-select: none;
    border: 1px solid #000;
    padding: 7px 12px;
    cursor: pointer;
    text-decoration: none;
    transition: all .4s ease;
    background: linear-gradient(to right, #000 0%, #000 50%, #FFF 50%, #FFF 100%);
    background-size: 200%;
    background-position: -100%;
    color: #000;
    transition: all 0.25s ease-in-out;
    line-height: 1.1; }
    .btn--primary {
      font-size: 14px; }
    @media (min-width: 320px) {
      .btn--primary {
        font-size: calc(14px + 4 * (100vw - 320px) / 2080); } }
    @media (min-width: 2400px) {
      .btn--primary {
        font-size: 18px; } }
    .btn--primary:hover {
      color: #FFF;
      text-decoration: none; }
    .is-tabbing .btn--primary:focus {
      background-color: #000;
      color: #FFF;
      text-decoration: none; }
    .btn--primary:disabled, .btn--primary.is-disabled {
      transition: none;
      opacity: .6;
      box-shadow: none;
      cursor: not-allowed;
      background-color: #FFF; }
      .prefers-reduced-motion .btn--primary:disabled, .prefers-reduced-motion .btn--primary.is-disabled {
        transition: none; }
    .btn--primary:active, .btn--primary.active {
      background-color: #d9d9d9; }
    .btn--primary:hover, .btn--primary:focus {
      color: #FFF;
      background-position: 0; }
  .btn--secondary {
    display: inline-block;
    font-weight: 700;
    color: #222222;
    text-align: center;
    -webkit-user-select: none;
            user-select: none;
    border: 1px solid #000;
    padding: 7px 12px;
    cursor: pointer;
    text-decoration: none;
    transition: all .4s ease;
    background: linear-gradient(to right, #FFF 0%, #FFF 50%, #000 50%, #000 100%);
    background-size: 200%;
    background-position: -100%;
    color: #FFF;
    border: none;
    transition: all 0.25s ease-in-out;
    text-transform: uppercase;
    padding: 20px 60px; }
    .btn--secondary {
      font-size: 14px; }
    @media (min-width: 320px) {
      .btn--secondary {
        font-size: calc(14px + 4 * (100vw - 320px) / 2080); } }
    @media (min-width: 2400px) {
      .btn--secondary {
        font-size: 18px; } }
    .btn--secondary:hover {
      color: #FFF;
      text-decoration: none; }
    .is-tabbing .btn--secondary:focus {
      background-color: #000;
      color: #FFF;
      text-decoration: none; }
    .btn--secondary:disabled, .btn--secondary.is-disabled {
      transition: none;
      opacity: .6;
      box-shadow: none;
      cursor: not-allowed;
      background-color: #FFF; }
      .prefers-reduced-motion .btn--secondary:disabled, .prefers-reduced-motion .btn--secondary.is-disabled {
        transition: none; }
    .btn--secondary:active, .btn--secondary.active {
      background-color: #d9d9d9; }
    .btn--secondary {
      font-size: 16px; }
    .btn--secondary:hover, .btn--secondary:focus {
      color: #000 !important;
      background-position: 0  !important; }
    .btn--secondary.is-green {
      background: linear-gradient(to right, #FFF 0%, #FFF 50%, #3B997C 50%, #3B997C 100%);
      background-size: 200%;
      background-position: -100%;
      border: 2px solid #3B997C; }
    .btn--secondary.is-purple {
      background: linear-gradient(to right, #FFF 0%, #FFF 50%, #8A65A0 50%, #8A65A0 100%);
      background-size: 200%;
      background-position: -100%;
      border: 2px solid #8A65A0; }
  .btn--tertiary {
    display: inline-block;
    font-weight: 700;
    color: #222222;
    text-align: center;
    -webkit-user-select: none;
            user-select: none;
    border: 1px solid #000;
    padding: 7px 12px;
    cursor: pointer;
    text-decoration: none;
    transition: all .4s ease;
    background: linear-gradient(to right, #FFF 0%, #FFF 50%, transparent 50%, transparent 100%);
    background-size: 200%;
    background-position: -100%;
    color: #FFF;
    border: 1px solid #FFF;
    transition: all 0.25s ease-in-out;
    padding: 10px 20px; }
    .btn--tertiary {
      font-size: 14px; }
    @media (min-width: 320px) {
      .btn--tertiary {
        font-size: calc(14px + 4 * (100vw - 320px) / 2080); } }
    @media (min-width: 2400px) {
      .btn--tertiary {
        font-size: 18px; } }
    .btn--tertiary:hover {
      color: #FFF;
      text-decoration: none; }
    .is-tabbing .btn--tertiary:focus {
      background-color: #000;
      color: #FFF;
      text-decoration: none; }
    .btn--tertiary:disabled, .btn--tertiary.is-disabled {
      transition: none;
      opacity: .6;
      box-shadow: none;
      cursor: not-allowed;
      background-color: #FFF; }
      .prefers-reduced-motion .btn--tertiary:disabled, .prefers-reduced-motion .btn--tertiary.is-disabled {
        transition: none; }
    .btn--tertiary:active, .btn--tertiary.active {
      background-color: #d9d9d9; }
    .btn--tertiary:hover, .btn--tertiary:focus {
      background-position: 0;
      color: #000; }
    .btn--tertiary.active {
      background-position: 0;
      color: #000; }
  .btn--reset {
    display: inline-block;
    font-weight: 700;
    color: #222222;
    text-align: center;
    -webkit-user-select: none;
            user-select: none;
    border: 1px solid #000;
    padding: 7px 12px;
    cursor: pointer;
    text-decoration: none;
    transition: all .4s ease;
    background-color: transparent;
    border: none;
    padding: 0; }
    .btn--reset {
      font-size: 14px; }
    @media (min-width: 320px) {
      .btn--reset {
        font-size: calc(14px + 4 * (100vw - 320px) / 2080); } }
    @media (min-width: 2400px) {
      .btn--reset {
        font-size: 18px; } }
    .btn--reset:hover {
      color: #FFF;
      text-decoration: none; }
    .is-tabbing .btn--reset:focus {
      background-color: #000;
      color: #FFF;
      text-decoration: none; }
    .btn--reset:disabled, .btn--reset.is-disabled {
      transition: none;
      opacity: .6;
      box-shadow: none;
      cursor: not-allowed;
      background-color: #FFF; }
      .prefers-reduced-motion .btn--reset:disabled, .prefers-reduced-motion .btn--reset.is-disabled {
        transition: none; }
    .btn--reset:active, .btn--reset.active {
      background-color: #d9d9d9; }
    .btn--reset:hover, .btn--reset:focus {
      background-color: transparent; }
  .btn--prev, .btn--next {
    display: inline-block;
    font-weight: 700;
    color: #222222;
    text-align: center;
    -webkit-user-select: none;
            user-select: none;
    border: 1px solid #000;
    padding: 7px 12px;
    cursor: pointer;
    text-decoration: none;
    transition: all .4s ease;
    background: #222222;
    color: #FFF;
    font-size: 21px;
    padding: 25px 30px;
    border: none; }
    .btn--prev, .btn--next {
      font-size: 14px; }
    @media (min-width: 320px) {
      .btn--prev, .btn--next {
        font-size: calc(14px + 4 * (100vw - 320px) / 2080); } }
    @media (min-width: 2400px) {
      .btn--prev, .btn--next {
        font-size: 18px; } }
    .btn--prev:hover, .btn--next:hover {
      color: #FFF;
      text-decoration: none; }
    .is-tabbing .btn--prev:focus, .is-tabbing .btn--next:focus {
      background-color: #000;
      color: #FFF;
      text-decoration: none; }
    .btn--prev:disabled, .btn--prev.is-disabled, .btn--next:disabled, .btn--next.is-disabled {
      transition: none;
      opacity: .6;
      box-shadow: none;
      cursor: not-allowed;
      background-color: #FFF; }
      .prefers-reduced-motion .btn--prev:disabled, .prefers-reduced-motion .btn--prev.is-disabled, .prefers-reduced-motion .btn--next:disabled, .prefers-reduced-motion .btn--next.is-disabled {
        transition: none; }
    .btn--prev:active, .btn--prev.active, .btn--next:active, .btn--next.active {
      background-color: #d9d9d9; }
    .btn--prev.disabled, .btn--prev:disabled, .btn--next.disabled, .btn--next:disabled {
      opacity: 1;
      background: #222222;
      color: #FFF;
      cursor: default; }
      .btn--prev.disabled span, .btn--prev:disabled span, .btn--next.disabled span, .btn--next:disabled span {
        opacity: 0.6; }