.bt{
    font-family: var(--18-px-regular-font-family, 'Montserrat');
    display: block;
    padding: 0 20px;
    height: 50px;
    line-height: 50px;
    border-radius: 4px;
    color: #FFF;
    border: 0;
    outline: 0;
    text-align: center;
    transition: .2s ease-out;
    cursor: pointer;
    overflow: hidden;
    position: relative;
    text-transform: uppercase;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    box-shadow: 0 2px 2px 0 
      rgba(0,0,0,0.14),0 1px 5px 0                 rgba(0,0,0,0.12),0 3px 1px -2px               rgba(0,0,0,0.2);
  }
  
  .bt:hover{
    box-shadow: 0 3px 3px 0 rgba(0,0,0,0.14),0 1px 7px 0 rgba(0,0,0,0.12),0 3px 1px -1px rgba(0,0,0,0.2);
  }
  
  .bt:before {
    content: "";
    position: absolute;
    display: inline-block;
    vertical-align: middle;
    z-index: 1;
    will-change: opacity, transform;
    background-color: rgba(236, 240, 241, .3);
    top: 50%;
    left: 50%;
    border-radius: 100%;
    width: 0;
    padding-top: 0;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
  }
  
  .bt:active:before {
    width: 120%;
    padding-top: 120%;
    transition: width .2s ease-out, padding-top .2s ease-out;
  }
  
  .default{
    background-color: var(--custom-blue);
  }
  .default:hover{
    background-color: lighten(#009688,2);
  }

  .btn-block
  {
    width: 100%;
    margin: 50px 0;
  }