.btn-primary {

background-color: $btn-primary-bg;
border-color: $btn-primary-border;

}

.btn-primary:hover {

background-color: $btn-hover-bg;
border-color: $btn-hover-border;

}

.buttons{

display: inline-block;
padding-left: .9rem;
padding-right: .9rem;
padding-top: .125rem;
padding-bottom: .125rem;
&__my-kcc {
  border-color: $color-blue-grey;
  padding-top: .125rem;
  padding-bottom: .125rem;
  margin-top: 0.25rem;
  margin-bottom: .375rem;
  &--mobile {
    position: absolute;
    bottom: .65rem;
    left: 1rem;
  }
}

}

@media screen and (min-width: 992px) {

.buttons__my-kcc:hover,
.buttons__my-kcc:focus {
  //color: $white;
  background-color: #0c3050;
}

}

@media screen and (max-width: 992px) {

.buttons__my-kcc:hover,
.buttons__my-kcc:focus {
  color: $primary-red;
}

}

.buttons__action {

color: $white;
background-color: $primary-red;
border-color: $color-red-darker;
font-family: $font-family-headings;
font-size: 1.3rem;
font-weight: $font-weight-bolder; //dash
line-height: 36px;
letter-spacing: .075rem;
width: 100%;
&:hover,
&:focus {
  color: $white;
  background-color: $primary-blue;
}

}

@media screen and (min-width: 360px) {

.buttons__action {
  font-size: 1.75rem;
  line-height: 48px;
}

}

@media screen and (min-width: 768px) {

.buttons__action {
  font-size: 1.3rem;
  line-height: 36px;
}

}

@media screen and (min-width: 992px) {

.buttons__action {
  font-size: 1.75rem;
  line-height: 48px;
}

}

.buttons__no-decoration, .buttons__no-decoration:focus, .buttons__no-decoration:hover, .buttons__no-decoration:visited {

text-decoration: none;

}