.cu-button {
  font-family: "Montserrat", sans-serif;
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  letter-spacing: 0.16px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

  .cu-button.icon--right {
    flex-direction: row-reverse;
  }

  @media (min-width: 640px) {.cu-button {
    font-size: 16px;
    line-height: 24px
}
  }

  @media (min-width: 1025px) {.cu-button {
    font-size: 18px;
    line-height: 27px
}
  }

  .cu-button:focus {
    outline: none;
    border-color: #0091FF;
  }

  .cu-button.primary,
  .cu-button.secondary {
    border-width: 2px;
    border-style: solid;
    padding: 10px 19px;
    border-radius: 1000px;
  }

  @media (min-width: 640px) {

  .cu-button.primary,
  .cu-button.secondary {
      border-width: 3px;
      padding: 12px 19px
  }
    }

  @media (min-width: 1025px) {

  .cu-button.primary,
  .cu-button.secondary {
      border-width: 4px;
      padding: 14px 30px
  }
    }

  .cu-button.primary.xsmall, .cu-button.secondary.xsmall {
      font-size: 12px;
      line-height: 16px;
    }

  @media (min-width: 640px) {

  .cu-button.primary.xsmall, .cu-button.secondary.xsmall {
        font-size: 12px;
        line-height: 16px
    }
      }

  @media (min-width: 1025px) {

  .cu-button.primary.xsmall, .cu-button.secondary.xsmall {
        font-size: 12px;
        line-height: 16px
    }
      }

  .cu-button.primary.xsmall, .cu-button.secondary.xsmall {
      padding: 4px 10px;
    }

  @media (min-width: 640px) {

  .cu-button.primary.xsmall, .cu-button.secondary.xsmall {
        padding: 4px 10px
    }
      }

  @media (min-width: 1025px) {

  .cu-button.primary.xsmall, .cu-button.secondary.xsmall {
        padding: 4px 10px
    }
      }

  @media (min-width: 640px) {

  .cu-button.primary.small, .cu-button.secondary.small {
        padding: 10px 19px
    }
      }

  @media (min-width: 1025px) {

  .cu-button.primary.small, .cu-button.secondary.small {
        padding: 10px 19px
    }
      }

  @media (min-width: 1025px) {

  .cu-button.primary.medium, .cu-button.secondary.medium {
        padding: 12px 19px
    }
      }

  .cu-button.primary {
    background-color: #FFA9A4;
    border-color: #FFA9A4;
    color: #004133;       
  }

  .cu-button.primary:hover {
      border-color: #BA7B78;
    }

  .cu-button.primary:focus {
      border-color: #BA7B78;
    }

  .cu-button.secondary {
    background-color: #0B5F6A;
    border-color: #0B5F6A;
    color: #FFFFFF;    
  }

  .cu-button.secondary:hover {
      color: #FFFFFF;
      border-color: #1F99A4;
    }

  .cu-button.secondary:focus {
      color: #FFFFFF;
      border-color: #1F99A4;
    }

  .cu-button.tertiary {
    color: #004133;
    border-width: 2px;
    border-style: solid;
    border-radius: 8px;
    border-color: rgba(0,0,0,0);
    padding: 0;
    background-color: rgba(0,0,0,0);
    position: relative;
  }

  .cu-button.tertiary:hover {
      border-width: 2px;
      border-color: rgba(0,0,0,0);
    }

  .cu-button.tertiary:focus {
      border-width: 2px;
      border-color: #0091FF;
    }

  .cu-button.xsmall {
    font-size: 12px;
    line-height: 16px;
  }

  @media (min-width: 640px) {

  .cu-button.xsmall {
      font-size: 12px;
      line-height: 16px
  }
    }

  @media (min-width: 1025px) {

  .cu-button.xsmall {
      font-size: 12px;
      line-height: 16px
  }
    }

  .cu-button.small {
    font-size: 14px;
    line-height: 20px;
  }

  @media (min-width: 640px) {

  .cu-button.small {
      font-size: 14px;
      line-height: 20px
  }
    }

  @media (min-width: 1025px) {

  .cu-button.small {
      font-size: 14px;
      line-height: 20px
  }
    }

  .cu-button.medium {
    font-size: 16px;
    line-height: 24px;
  }

  @media (min-width: 640px) {

  .cu-button.medium {
      font-size: 16px;
      line-height: 24px
  }
    }

  @media (min-width: 1025px) {

  .cu-button.medium {
      font-size: 16px;
      line-height: 24px
  }
    }