.lc-button {
  cursor: pointer;
  color: #fff;
  border: 1px solid;
  transition: background .3s ease, border .3s ease, color .3s ease, opacity .3s ease !important;
  text-decoration: none !important;
  display: inline-block;
  line-height: 1.2;
  border-radius: 0;
  font-weight: bold;
  text-transform: uppercase;
  position: relative;
  font-size: 1.4rem;
  padding: 10px 20px;
}
.lc-button span.show-on-loading {
  display: none;
}

.lc-button.uppercase {
  text-transform: uppercase;
}

.lc-button.strong {
  font-weight: bold;
}

.lc-button:disabled {
  opacity: 0.5;
}

.lc-hidden-submit {
  display: none;
}

/* --- triangle --- */
.lc-button.triangle-right {
  margin-right: 8px;
}

.lc-button.triangle-left {
  margin-left: 8px;
}

.lc-button.triangle-left:after,
.lc-button.triangle-left:before {
  left: -1px;
}

.lc-button.triangle-right:after,
.lc-button.triangle-right:before {
  right: -1px;
}

.lc-button.triangle-left:after,
.lc-button.triangle-left:before,
.lc-button.triangle-right:after,
.lc-button.triangle-right:before {
  content: '';
  height: 56%;
  width: 10px;
  position: absolute;
  transition: background .3s ease;
}

.lc-button.triangle-left:before {
  top: -1px;
  transform-origin: top left;
  transform: rotate(20deg);
}

.lc-button.triangle-right:before {
  top: -1px;
  transform-origin: top right;
  transform: rotate(-20deg);
}

.lc-button.triangle-left:after {
  bottom: -1px;
  transform-origin: bottom left;
  transform: rotate(-20deg);
}

.lc-button.triangle-right:after {
  bottom: -1px;
  transform-origin: bottom right;
  transform: rotate(20deg);
}

/* --- loading --- */
.lc-button.loading span.hide-on-loading {
  display: none;
}
.lc-button.loading span.show-on-loading {
  display: inline-block;
}

/* --- sizes --- */
.lc-button.small {
  font-size: 14px;
  padding: 7px 14px;
}

.lc-button.medium {
  font-size: 14px;
  padding: 10px 20px;
}

/* --- colors --- */
.lc-button.gold {
  background-color: #d2930f;
  border-color: #d2930f;
}

.lc-button.gold:hover {
  background-color: #8f640a;
  border-color: #8f640a;
}

.lc-button.blue {
  background-color: #193c4a;
  border-color: #193c4a;
}

.lc-button.blue:hover {
  background-color: #071115;
  border-color: #071115;
}

.lc-button.light-blue {
  background-color: #808A96;
  border-color: #808A96;
}

.lc-button.light-blue:hover {
  background-color: #5e6671;
  border-color: #5e6671;
}

.lc-button.grey {
  background-color: #b8b8b8;
  border-color: #b8b8b8;
}

.lc-button.grey:hover {
  background-color: #949494;
  border-color: #949494;
}

.lc-button.light-grey {
  background-color: #f1f2f4;
  border-color: #f1f2f4;
}

.lc-button.light-grey:hover {
  background-color: #c9cdd5;
  border-color: #c9cdd5;
}

.lc-button.white {
  background-color: #fff;
  border-color: #fff;
}

.lc-button.white:hover {
  background-color: #dbdbdb;
  border-color: #dbdbdb;
}

.lc-button.black {
  background-color: #000;
  border-color: #000;
}

.lc-button.black:hover {
  background-color: black;
  border-color: black;
}

.lc-button.gold,
.lc-button.gold:after,
.lc-button.gold:before {
  background-color: #d2930f;
}

.lc-button.gold:hover,
.lc-button.gold:hover:after,
.lc-button.gold:hover:before {
  background-color: #8f640a;
}

.lc-button.blue,
.lc-button.blue:after,
.lc-button.blue:before {
  background-color: #193c4a;
}

.lc-button.blue:hover,
.lc-button.blue:hover:after,
.lc-button.blue:hover:before {
  background-color: #071115;
}

.lc-button.light-blue,
.lc-button.light-blue:after,
.lc-button.light-blue:before {
  background-color: #808A96;
}

.lc-button.light-blue:hover,
.lc-button.light-blue:hover:after,
.lc-button.light-blue:hover:before {
  background-color: #5e6671;
}

.lc-button.grey,
.lc-button.grey:after,
.lc-button.grey:before {
  background-color: #b8b8b8;
}

.lc-button.grey:hover,
.lc-button.grey:hover:after,
.lc-button.grey:hover:before {
  background-color: #949494;
}

.lc-button.light-grey,
.lc-button.light-grey:after,
.lc-button.light-grey:before {
  background-color: #f1f2f4;
}

.lc-button.light-grey:hover,
.lc-button.light-grey:hover:after,
.lc-button.light-grey:hover:before {
  background-color: #c9cdd5;
}

.lc-button.white,
.lc-button.white:after,
.lc-button.white:before {
  background-color: #fff;
}

.lc-button.white:hover,
.lc-button.white:hover:after,
.lc-button.white:hover:before {
  background-color: #dbdbdb;
}

.lc-button.black,
.lc-button.black:after,
.lc-button.black:before {
  background-color: #000;
}

.lc-button.black:hover,
.lc-button.black:hover:after,
.lc-button.black:hover:before {
  background-color: black;
}

.lc-button.color-gold {
  color: #d2930f;
}

.lc-button.color-blue {
  color: #193c4a;
}

.lc-button.color-light-blue {
  color: #808A96;
}

.lc-button.color-grey {
  color: #b8b8b8;
}

.lc-button.color-light-grey {
  color: #f1f2f4;
}

.lc-button.color-white {
  color: #fff;
}

.lc-button.color-black {
  color: #000;
}

.lc-button.gold,
.lc-button.gold:hover {
  color: #fff;
}

.lc-button.blue,
.lc-button.blue:hover {
  color: #fff;
}

.lc-button.black,
.lc-button.black:hover {
  color: #fff;
}

.lc-button.white-blue-border {
  border: 1px #193c4a solid;
  color: #193c4a;
}

.lc-button.white-blue-border:hover {
  background-color: #f1f2f4;
  color: #193c4a;
}

/* --- states --- */
.lc-button:active {
  transform: translate(0, 1px);
}

.lc-button:disabled {
  cursor: auto;
  background-color: #666;
}