/* Note: .cta- is the default. Don't forget the minus! It isolates the link / buttom from child elements e.g. .cta_lbl */
/* Do not add margins, use a container if required */

[class^="cta-"] {
  /* cta properties never change */
  padding: 0 12px 0 16px;
  display: inline-block;
  font: normal 16px/37px boldfont, sans-serif;
  border: 2px solid transparent;
  border-radius: 100px;
  text-align: center;
  text-decoration: none;
  text-shadow: none;
  outline: 0 solid transparent;
  white-space: nowrap;
  -webkit-transition: box-shadow 0.3s;
  transition: box-shadow 0.3s;
}
button[class^="cta-"]::-moz-focus-inner {
  border: 0;
  padding: 0;
}

[class^="cta-"]:focus {
  outline: 0 solid transparent;
}

[class^="cta_lbl"] {
  display: inline-block;
  padding: 0;
  margin: 0;
  line-height: 1.3; /* distance between descenders and underline */
  border: 0 solid transparent;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  transition: border-bottom-color .3s ease-out;
}

a:hover [class^="cta_lbl"],
a:focus [class^="cta_lbl"],
button:hover [class^="cta_lbl"],
button:focus [class^="cta_lbl"] {
  border-bottom-color: currentColor;
}


[class^="cta"] svg {
  display: inline-block;
  width: 1.25em;
  height: 1.5em;
  vertical-align: text-bottom;
  fill: currentColor;
}