* .button:after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: inherit;
  opacity: 0;
  pointer-events: none;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%) rotate(45deg);
  transform: translate(-50%, -50%) rotate(45deg);
}

* .button {
  cursor: pointer;
  text-decoration: none;
  border: solid 2px;
  border-radius: var(--button-border-radius);
  background: transparent;
  vertical-align: top;
  padding-left: calc(1 * var(--spacing-mobile));
  padding-right: calc(1 * var(--spacing-mobile));
  line-height: var(--button-line-height);
  position: relative;
  display: -webkit-inline-flex;
  display: inline-flex;
  -webkit-align-items: center;
  align-items: center;
  height: var(--button-height);
  color: var(--colour-one);
  border-color: var(--colour-one);
  transition: var(--transition) border-color, var(--transition) color, var(--transition) background 0.15s, var(--transition) opacity;
  position: relative;
  overflow: hidden;
  overflow: hidden !important;
}
@media (min-width: 768px) {
  * .button {
    padding-left: calc(1 * var(--spacing-tablet));
    padding-right: calc(1 * var(--spacing-tablet));
  }
}
@media (min-width: 992px) {
  * .button {
    padding-left: calc(1 * var(--spacing-desktop));
    padding-right: calc(1 * var(--spacing-desktop));
  }
}
@media (min-width: 1200px) {
  * .button {
    padding-left: calc(1 * var(--spacing-large));
    padding-right: calc(1 * var(--spacing-large));
  }
}
* .button:after {
  width: 10px;
  height: 10px;
}
* .button .la,
* .button .las,
* .button .fa {
  font-size: 2.2rem;
  vertical-align: middle;
}
* .button > span + span {
  margin-left: 10px;
}
* .button:after {
  background: var(--colour-one);
}
* .button:hover, * .button:focus {
  color: var(--colour-neutral);
}
* .button:hover:after, * .button:focus:after {
  -webkit-animation: materialise 0.7s forwards;
  animation: materialise 0.7s forwards;
  transition: -webkit-transform 0.7s ease;
  transition: transform 0.7s ease;
  transition: transform 0.7s ease, -webkit-transform 0.7s ease;
  -webkit-transform: translate(-50%, -50%) scale(15);
  transform: translate(-50%, -50%) scale(15);
}
@-webkit-keyframes materialise {
  0% {
    opacity: 1;
  }
  55% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes materialise {
  0% {
    opacity: 1;
  }
  55% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
* .button:hover, * .button:focus, * .button--active {
  color: var(--colour-neutral);
  background: var(--colour-one);
}
* .button[data-bg]:after {
  background-color: attr(data-bg color, red);
}
* .button--1--alt {
  background: var(--colour-one);
  color: var(--colour-neutral);
}
* .button--1--alt:after {
  background: var(--colour-neutral);
}
* .button--1--alt:hover, * .button--1--alt:focus {
  background: var(--colour-neutral);
  color: var(--colour-one);
}
* .button--2 {
  color: var(--colour-two);
  border-color: var(--colour-two);
}
* .button--2:after {
  background: var(--colour-two);
}
* .button--2:hover, * .button--2:focus {
  background: var(--colour-two);
}
* .button--2--alt {
  background: var(--colour-two);
  border-color: var(--colour-two);
  color: var(--colour-neutral);
}
* .button--2--alt:after {
  background: var(--colour-neutral);
}
* .button--2--alt:hover, * .button--2--alt:focus {
  background: var(--colour-neutral);
  color: var(--colour-two);
}
* .button--3 {
  color: var(--colour-three);
  border-color: var(--colour-three);
}
* .button--3:after {
  background: var(--colour-three);
}
* .button--3:hover, * .button--3:focus {
  background: var(--colour-three);
}
* .button--3--alt {
  background: var(--colour-three);
  color: var(--colour-neutral);
  border-color: var(--colour-three);
}
* .button--3--alt:after {
  background: var(--colour-neutral);
}
* .button--3--alt:hover, * .button--3--alt:focus {
  background: var(--colour-neutral);
  color: var(--colour-three);
}
* .button--4 {
  color: var(--colour-six);
  border-color: var(--colour-six);
}
* .button--4:after {
  background: var(--colour-six);
}
* .button--4:hover, * .button--4:focus {
  background: var(--colour-six);
}
* .button--4--alt {
  background: var(--colour-six);
  color: var(--colour-neutral);
  border-color: var(--colour-six);
}
* .button--4--alt:after {
  background: var(--colour-neutral);
}
* .button--4--alt:hover, * .button--4--alt:focus {
  background: var(--colour-neutral);
  color: var(--colour-six);
}
* .button--neutral {
  color: var(--colour-neutral);
  border-color: var(--colour-neutral);
  background: transparent;
}
* .button--neutral:after {
  background: var(--colour-neutral);
}
* .button--neutral:hover, * .button--neutral:focus {
  background: var(--colour-neutral);
  color: var(--colour-title);
}
* .button--neutral--alt {
  background: var(--colour-neutral);
  color: var(--colour-title);
  border-color: var(--colour-neutral);
}
* .button--neutral--alt:after {
  background: var(--colour-title);
}
* .button--neutral--alt:hover, * .button--neutral--alt:focus {
  background: var(--colour-title);
  color: var(--colour-neutral);
}
* .button.disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
@media (max-width: 767px) {
  * .button--rms--0 {
    border: none;
    height: auto;
    padding: 0;
  }
  * .button--rms--0:after {
    display: none !important;
  }
  * .button--rms--0:hover {
    background: transparent;
    color: inherit;
  }
}

@media (min-width: 768px) {
  [role=button] {
    cursor: pointer;
  }
}