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

.btn {
  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: #2666f1; border: 2px solid #2666f1;
}
.btn:hover, .btn:focus, .btn:active {
  color: #1f2b3f; background-color: #fff;
}
.btn:hover {
  -webkit-box-shadow: 0 0 0 3px rgba(38, 102, 241, 0.2); -moz-box-shadow: 0 0 0 3px rgba(38, 102, 241, 0.2); box-shadow: 0 0 0 3px rgba(38, 102, 241, 0.2);
}
.btn:focus {
  border-color: #62737a; -webkit-box-shadow: 0 0 0 2px #fff, 0 0 0 4px #2666f1; -moz-box-shadow: 0 0 0 2px #fff, 0 0 0 4px #2666f1; box-shadow: 0 0 0 2px #fff, 0 0 0 4px #2666f1;
}
.btn:active {
  background-color: #c8e8fa;
}
.btn.outlined {
  background: transparent; border: #3b475e 1px solid; color: #3b475e; padding: 14px 30px;
}
.btn.outlined:focus {
  outline: none;
}

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

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

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

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

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

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

.btn.disabled {
  background: #f4f5f6; color: #62737a; border: 2px solid #e8e9ec; 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;
}
