.checkmark {
  border-radius: 50%;
  bottom: auto;
  box-shadow: 0 0 0 #FFC34E inset;
  display: block;
  height: 75px;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  stroke: #2A110A;
  stroke-miterlimit: 10;
  stroke-width: 2;
  top: 40%;
  width: 75px;
  animation: fill .1s ease-in-out .25s forwards, scale .3s ease-in-out .6s both;
}

.checkmark__circle {
  stroke-dasharray: 166;
  stroke-dashoffset: 166;
  stroke-width: 2;
  stroke-miterlimit: 10;
  stroke: #FFC34E;
  fill: none;
  animation: stroke 0.2s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}

.checkmark__check {
  transform-origin: 50% 50%;
  stroke-dasharray: 48;
  stroke-dashoffset: 48;
  animation: stroke 0.15s cubic-bezier(0.65, 0, 0.45, 1) 0.6s forwards;
}

.checkmark.reverse-animation {
  animation: fadeOut .4s;
}

@keyframes stroke {
  100% {
    stroke-dashoffset: 0;
  }
}
@keyframes scale {
  0%, 100% {
    transform: none;
  }
  50% {
    transform: scale3d(1.1, 1.1, 1);
  }
}
@keyframes fill {
  100% {
    box-shadow: inset 0px 0px 0px 50px #FFC34E;
  }
}

@keyframes fadeOut {
  0 {
    opacity: 1;
    box-shadow: inset 0px 0px 0px 50px #FFC34E;
  }
  100% {
    opacity: 0;
    box-shadow: inset 0px 0px 0px 50px #FFC34E;
  }
}




/*Animations*/
@keyframes bounce {
  0%,50%,100% {
  	 transform:translateY(0);
  }
  25%,75% {
  	 transform:translateY(-10px);
  }
}
@-webkit-keyframes bounce {
  0%,50%,100% {
  	 -webkit-transform:translateY(0);
  }
  25%,75% {
  	 -webkit-transform:translateY(-10px);
  }
}