.button,
.button-wrapper p a,
.tito tito-widget .tito-wrapper .tito-submit-wrapper,
.form .mktoForm .mktoButtonRow .mktoButtonWrap button[type=submit].mktoButton,
.form .mktoForm .mktoButtonRow .mktoButtonWrap.mktoRound button[type=submit].mktoButton,
.hs-button {
  display: inline-block;
  padding: var(--gutter-width);
  box-shadow: 3px 4px rgba(0,0,0,0.1);
  margin-top: var(--gutter-width);
  margin-right: var(--gutter-width);
  margin-bottom: var(--gutter-width);
  text-decoration: none;
  text-shadow: unset;
  font-weight: 500;
  transition: all 500ms ease;
  cursor: pointer;
  border: 3px solid var(--button-border-color);
}

.button,
.button-wrapper p a,
.button.button-cta:hover,
.hero .button:first-child:hover,
.tito tito-widget .tito-wrapper .tito-submit-wrapper,
.form .mktoForm .mktoButtonRow .mktoButtonWrap button[type=submit].mktoButton,
.form .mktoForm .mktoButtonRow .mktoButtonWrap.mktoRound button[type=submit].mktoButton,
.hs-button:hover {
  color: var(--button-text-color);
  border: 3px solid var(--button-border-color);
  background-color: var(--button-fill-color);
}

.button:hover,
.button-wrapper p a:hover,
.button.button-cta,
.hero .button:first-child,
.tito tito-widget .tito-wrapper .tito-submit-wrapper:hover,
.form .mktoForm .mktoButtonRow .mktoButtonWrap button[type=submit].mktoButton:hover,
.form .mktoForm .mktoButtonRow .mktoButtonWrap.mktoRound button[type=submit].mktoButton:hover,
.hs-button {
  color: var(--button-cta-text-color);
  border: 3px solid var(--button-border-color);
  background-color: var(--button-cta-fill-color);
}

.button:active,
.button-wrapper p a:active,
.form .mktoForm .mktoButtonRow .mktoButtonWrap button[type=submit].mktoButton:active,
.form .mktoForm .mktoButtonRow .mktoButtonWrap.mktoRound button[type=submit].mktoButton:active,
.hs-button:active {
  box-shadow: 0px 0px transparent;
}

a.button:visted {
}

.button.extra-wide,
.button-wrapper p a {
  width: auto;
  text-align: center;
  padding-right: 60px;
  padding-left: 60px;
}

.button.full-width,
.cta_button {
  display: block;
  width: auto;
  text-align: center;
  margin-right: unset;
}

.button.center {
  display: block;
  width: 40%;
  margin-left: auto;
  margin-right: auto;
}

.button:disabled {
  background-color: #dddddd;
  color: #8b8b8b;
  border-color: #c6c6c6;
  cursor: auto;
}

/* Marketo Fixes, because their CSS SUCKS!important 😅 */
.form .mktoForm .mktoButtonRow .mktoButtonWrap.mktoRound {
  margin-left: 0 !important;
}

.form .mktoForm .mktoButtonRow .mktoButtonWrap button[type=submit].mktoButton,
.form .mktoForm .mktoButtonRow .mktoButtonWrap.mktoRound button[type=submit].mktoButton {
  padding: var(--gutter-width) !important;
  border-radius: 0 !important;
  height: inherit !important;
  width: 100% !important;
  font-family: inherit !important;
  font-size: inherit !important;
  font-weight: 500 !important;
  text-transform: none !important;
}

.form .mktoForm .mktoButtonRow .mktoButtonWrap button[type=submit].mktoButton,
.form .mktoForm .mktoButtonRow .mktoButtonWrap.mktoRound button[type=submit].mktoButton {
  color: var(--button-text-color) !important;
  border: 3px solid var(--button-border-color) !important;
  background-color: var(--button-fill-color) !important;
  background-image: none !important;
}

.form .mktoForm .mktoButtonRow .mktoButtonWrap button[type=submit].mktoButton:hover,
.form .mktoForm .mktoButtonRow .mktoButtonWrap.mktoRound button[type=submit].mktoButton:hover {
  color: var(--button-cta-text-color) !important;
  border: 3px solid var(--button-border-color) !important;
  background-color: var(--button-cta-fill-color) !important;
  background-image: none !important;
}