/****************************************
  ==== LAYOUT
****************************************/

.btn {
  width: 100%; line-height: 1; display: block; position: relative; overflow: hidden; padding: 12px 25px; font-size: 1.4em; font-weight: 700; text-align: center; cursor: pointer; text-decoration: none; margin: 0; border: 0; outline: 0; border-image-width: 0; -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;
}
.btn, .btn:hover, .btn:focus, .btn:active {
  color: #fff; text-decoration: none; outline: 0;
}
.btn:active {
  -webkit-transform: scale(0.98); -moz-transform: scale(0.98); transform: scale(0.98); -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none;
}
.btn-primary {
  display: -webkit-flex; display: flex; padding: 20px 40px; justify-content: center; align-items: center; -webkit-border-radius: 100px; -moz-border-radius: 100px; border-radius: 100px;
}

/****************************************
  ==== COLORS
****************************************/

.btn {
  background-color: #9E007E; border: 2px solid #9E007E;
}
.btn:hover, .btn:focus, .btn:active {
  color: #FFF; background-color: #9E007E;
}
.btn:hover {
  -webkit-box-shadow: 0 0 0 3px rgba(158, 0, 126, .2); -moz-box-shadow: 0 0 0 3px rgba(158, 0, 126, .2); box-shadow: 0 0 0 3px rgba(158, 0, 126, .2);
}
.btn:focus {
  border-color: #9E007E; -webkit-box-shadow: 0 0 0 2px #fff, 0 0 0 4px #9E007E; -moz-box-shadow: 0 0 0 2px #fff, 0 0 0 4px #9E007E; box-shadow: 0 0 0 2px #fff, 0 0 0 4px #9E007E;
}
.btn:active {
  background-color: #7E0065;
}
.btn.outlined {
  background: transparent; border: #000000 1px solid; color: #000000; padding: 14px 30px;
}
.btn.outlined:focus {
  outline: none;
}

/****************************************
  ==== TRANSPARENT
****************************************/

.btn.trans {
  background: transparent; color: #000000; border: none; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none;
}

.btn.trans:focus, .btn.trans:active {
  background: #F7F4F2;
}

/****************************************
  ==== POSITIONS
****************************************/

.btn.center {
  float: none; display: inline-block; vertical-align: top;
}

/****************************************
  ==== DISABLED
****************************************/

.btn.disabled {
  background: #F7F4F2; color: #8c8986; border: 2px solid #F7F4F2; cursor: not-allowed; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none;
}
.btn.disabled:active {
  -webkit-transform: none; -moz-transform: none; transform: none;
}