.button {
  display: inline-block;
  vertical-align: middle;
  zoom: 1;
  *display: inline;
  text-decoration: none;
  font-size: 1em;
  font-weight: 300;
  color: #333333;
  border: 1px solid #cbd3dd;
  white-space: nowrap;
  cursor: pointer;
  line-height: 1;
  padding: 12px 20px;
  border-radius: 3px;
  text-align: center;
  -o-user-select: none;
  -ms-user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  user-select: none;
  position: relative;
  background-color: #f6f7f8;
  outline: none;
  -webkit-transition: opacity 0.25s ease, background-color 0.25s ease;
  -moz-transition: opacity 0.25s ease, background-color 0.25s ease;
  -ms-transition: opacity 0.25s ease, background-color 0.25s ease;
  -o-transition: opacity 0.25s ease, background-color 0.25s ease;
  transition: opacity 0.25s ease, background-color 0.25s ease;
}
.button.button-icon-right i {
  margin-right: 0;
  margin-left: 10px;
}
.button i {
  margin-right: 10px;
  vertical-align: middle;
}
.button:active {
  bottom: -1px;
}
.button.large {
  font-size: 1.125em;
  padding: 18px 42px;
  border-radius: 5px;
}
.button.large.button-icon {
  padding: 16px 42px 16px 22px;
}
.button.large.button-icon-right {
  padding: 16px 22px 16px 42px;
}
.button.rounded {
  border-radius: 21px;
}
.button.rounded.small {
  border-radius: 16px;
}
.button.rounded.large {
  border-radius: 27px;
}
.button.small {
  font-size: 0.875em;
  padding: 8px 16px;
}
.button.full {
  display: block;
  width: 100%;
}
.button.green,
.button.blue,
.button.blue-light,
.button.purple,
.button.orange,
.button.red {
  color: white;
  border: 1px solid rgba(0, 0, 0, 0.2);
}
.button.green {
  background-color: #44bb55;
}
.button.green:hover {
  background-color: #3da84d;
}
.button.blue {
  background-color: $navyBlue;
}
.button.blue:hover {
  background-color: #1e79b6;
}
.button.blue-light {
  background-color: #48cacc;
}
.button.blue-light:hover {
  background-color: #37c2c4;
}
.button.purple {
  background-color: #8d3deb;
}
.button.purple:hover {
  background-color: #7f26e9;
}
.button.orange {
  background-color: #ff530d;
}
.button.orange:hover {
  background-color: #f34600;
}
.button.red {
  background-color: #ff3625;
}
.button.red:hover {
  background-color: #ff1e0b;
}
.button.stroke {
  background-color: transparent;
}
.button.stroke.green {
  color: #44bb55;
  border-color: #44bb55;
}
.button.stroke.blue {
  color: #3a6d91;
  border-color: #3a6d91;
}
.button.stroke.blue-light {
  color: #48cacc;
  border-color: #48cacc;
}
.button.stroke.purple {
  color: #8d3deb;
  border-color: #8d3deb;
}
.button.stroke.orange {
  color: #ff530d;
  border-color: #ff530d;
}
.button.stroke.red {
  color: #ff3625;
  border-color: #ff3625;
}
.button.stroke.white {
  color: white;
  border-color: white;
}
.button.stroke.black {
  color: #333333;
  border-color: #333333;
}
.button.stroke.green:hover,
.button.stroke.blue:hover,
.button.stroke.blue-light:hover,
.button.stroke.purple:hover,
.button.stroke.orange:hover,
.button.stroke.red:hover {
  color: white;
}
.button:hover {
  text-decoration: none;
}
.button-list .button {
  margin-right: 10px;
  margin-bottom: 10px;
}
.button-list .button:last-child {
  margin-right: 0;
}