.bttn-default {
  color: #fff;
}

.bttn-primary, .bttn, .bttn-lg, .bttn-md, .bttn-sm, .bttn-xs {
  color: #1d89ff;
}

.bttn, .bttn-lg, .bttn-md, .bttn-sm, .bttn-xs {
  margin: 0;
  padding: 0;
  border-width: 0;
  border-color: transparent;
  background: transparent;
  font-weight: 400;
  cursor: pointer;
  position: relative;
}

.bttn-lg {
  padding: 8px 15px;
  font-size: 24px;
  font-family: inherit;
}

.bttn-md {
  font-size: 20px;
  font-family: inherit;
  padding: 5px 12px;
}

.bttn-sm {
  padding: 4px 10px;
  font-size: 16px;
  font-family: inherit;
}

.bttn-xs {
  padding: 3px 8px;
  font-size: 12px;
  font-family: inherit;
}

.bttn-fill {
  margin: 0;
  padding: 0;
  border-width: 0;
  border-color: transparent;
  background: transparent;
  font-weight: 400;
  cursor: pointer;
  position: relative;
  font-size: 20px;
  font-family: inherit;
  padding: 5px 12px;
  z-index: 0;
  border: none;
  background: #fff;
  color: #1d89ff;
  -webkit-transition: all 0.3s cubic-bezier(0.02, 0.01, 0.47, 1);
  transition: all 0.3s cubic-bezier(0.02, 0.01, 0.47, 1);
}

.bttn-fill:before {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #1d89ff;
  content: '';
  opacity: 0;
  -webkit-transition: opacity 0.15s ease-out, -webkit-transform 0.15s ease-out;
  transition: opacity 0.15s ease-out, -webkit-transform 0.15s ease-out;
  transition: transform 0.15s ease-out, opacity 0.15s ease-out;
  transition: transform 0.15s ease-out, opacity 0.15s ease-out, -webkit-transform 0.15s ease-out;
  z-index: -1;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
}

.bttn-fill:hover, .bttn-fill:focus {
  box-shadow: 0 1px 8px rgba(58,51,53,0.3);
  color: #fff;
  -webkit-transition: all 0.5s cubic-bezier(0.02, 0.01, 0.47, 1);
  transition: all 0.5s cubic-bezier(0.02, 0.01, 0.47, 1);
}

.bttn-fill:hover:before, .bttn-fill:focus:before {
  opacity: 1;
  -webkit-transition: opacity 0.2s ease-in, -webkit-transform 0.2s ease-in;
  transition: opacity 0.2s ease-in, -webkit-transform 0.2s ease-in;
  transition: transform 0.2s ease-in, opacity 0.2s ease-in;
  transition: transform 0.2s ease-in, opacity 0.2s ease-in, -webkit-transform 0.2s ease-in;
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}

.bttn-fill.bttn-xs {
  padding: 3px 8px;
  font-size: 12px;
  font-family: inherit;
}

.bttn-fill.bttn-xs:hover, .bttn-fill.bttn-xs:focus {
  box-shadow: 0 1px 4px rgba(58,51,53,0.3);
}

.bttn-fill.bttn-sm {
  padding: 4px 10px;
  font-size: 16px;
  font-family: inherit;
}

.bttn-fill.bttn-sm:hover, .bttn-fill.bttn-sm:focus {
  box-shadow: 0 1px 6px rgba(58,51,53,0.3);
}

.bttn-fill.bttn-md {
  font-size: 20px;
  font-family: inherit;
  padding: 5px 12px;
}

.bttn-fill.bttn-md:hover, .bttn-fill.bttn-md:focus {
  box-shadow: 0 1px 8px rgba(58,51,53,0.3);
}

.bttn-fill.bttn-lg {
  padding: 8px 15px;
  font-size: 24px;
  font-family: inherit;
}

.bttn-fill.bttn-lg:hover, .bttn-fill.bttn-lg:focus {
  box-shadow: 0 1px 10px rgba(58,51,53,0.3);
}

.bttn-fill.bttn-default {
  background: #fff;
  color: #1d89ff;
}

.bttn-fill.bttn-default:hover, .bttn-fill.bttn-default:focus {
  color: #fff;
}

.bttn-fill.bttn-default:before {
  background: #1d89ff;
}

.bttn-fill.bttn-primary {
  background: #1d89ff;
  color: #fff;
}

.bttn-fill.bttn-primary:hover, .bttn-fill.bttn-primary:focus {
  color: #fff;
}

.bttn-fill.bttn-primary:before {
  background: #151414;
}

.tilt-outer {
  transform-style: preserve-3d;
  transform: perspective(1000px);
}

.hvr-grow {
  display: inline-block;
  vertical-align: middle;
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  transition-duration: 0.7s;
  transition-property: transform;
}

.hvr-grow:hover, .hvr-grow:focus, .hvr-grow:active {
  transform: scale(1.05);
}