/* Scss Document */
*, *:before, *:after {
  box-sizing: border-box;
  outline: none; }


.hide {
  display: none; }
.flex-container {display: flex; flex-wrap: wrap;}
.flex50 {flex: 50%;}
.purple-btn{ display: block; width: 250px; padding: 15px 0; color: #fff; border-radius: 200px; background: #cf5bd0; margin: auto}
.purple-btn:hover{ display: block; width: 250px; padding: 15px 0; color: #fff; border-radius: 200px; background: #b843b9; margin: auto; text-decoration: none;}

.bl-btn-o{ display: block; width: 250px; padding: 11px 0; color: #2aa4d6; border-radius: 200px; background: #fff; border:3px solid #2aa4d6; margin: auto}
.bl-btn-o:hover{ display: block; width: 250px; padding: 11px 0; color: #2aa4d6; border-radius: 200px; background: #e8f8ff;border:3px solid #2aa4d6; margin: auto; text-decoration: none;}

.button {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 12.5rem;
  magrin: 0;
  padding: 1.5rem 3.125rem;
  background-color: #0077b1;
  border: none;
  border-radius: 0.3125rem;
  box-shadow: 0 12px 24px 0 rgba(0, 0, 0, 0.2);
  color: white;
	font-size:18px; 
  overflow: hidden; cursor: hand; cursor: pointer; }
  .button:before {
    position: absolute;
    content: '';
    bottom: 0;
    left: 0;
    width: 0%;
    height: 100%;
    background-color: #54d98c; }
  .button span {
    position: absolute;
    line-height: 0; }
    .button span i {
      transform-origin: center center; }
    .button span:nth-of-type(1) {
      top: 50%;
      transform: translateY(-50%); }
    .button span:nth-of-type(2) {
      top: 100%;
      transform: translateY(0%);
      font-size: 24px; }
    .button span:nth-of-type(3) {
      display: none; }

.active {
  background-color: #2ecc71; }
  .active:before {
    width: 100%;
    transition: width 3s linear; }
  .active span:nth-of-type(1) {
    top: -100%;
    transform: translateY(-50%); }
  .active span:nth-of-type(2) {
    top: 50%;
    transform: translateY(-50%); }
    .active span:nth-of-type(2) i {
      animation: loading 500ms linear infinite; }
  .active span:nth-of-type(3) {
    display: none; }

.finished {
  background-color: #54d98c; }
  .finished .submit {
    display: none; }
  .finished .loading {
    display: none; }
  .finished .check {
    display: block !important;
    font-size: 24px;
    animation: scale 0.5s linear; }
    .finished .check i {
      transform-origin: center center; }

@keyframes loading {
  100% {
    transform: rotate(360deg); } }
@keyframes scale {
  0% {
    transform: scale(10); }
  50% {
    transform: scale(0.2); }
  70% {
    transform: scale(1.2); }
  90% {
    transform: scale(0.7); }
  100% {
    transform: scale(1); } }