.call-to-action {
    &--margin-top {
      margin-top: 16px;
    }
    &--wide-back {
      padding: 8px 8px 4px;
    }
}

.call-to-action__button {
    &--primary  {
      background-color: transparent;
      @include font($baton-medium);
      font-weight: normal;
      max-width: 185px;
      max-height: 41px;
      background-position: -607px -82px;
      @media only screen and (min-width: 280px) {
        max-width: 263px;
        max-height: 42px;
        background-position: -344px -40px;
      }
      @media only screen and (min-width: 360px) {
        max-width: 344px;
      	max-height: 40px;
      	background-position: 0 0;
      }
    }
    &--secondary {
      font-weight: normal;
      max-width: 186px;
      max-height: 43px;
      background-position: -1542px -249px;
      @media only screen and (min-width: 280px) {
        max-width: 264px;
        max-height: 44px;
        background-position: -1278px -205px;
      }
      @media only screen and (min-width: 360px) {
        max-width: 346px;
        max-height: 42px;
        background-position: -932px -163px;
      }
    }
    &--yellow {
      max-width: 119px;
    }

    &-text {
      @include font($baton-medium);
      color: $white;
      pointer-events: none;
      background: transparent;
      -webkit-appearance: none;
      background-color: transparent;
      &--primary {
        color: $white;
      }
      &--secondary {
        color: $springster-purple;
      }
      &--yellow {
        color: $springster-purple;
      }
      &--hyperlink {
        color: $springster-purple;
        pointer-events: auto;
      }
    }
}
