.checkmark {
	position: relative;
	left: -15px;
	z-index: 1;
	opacity: 1;
	width: 22px;
	border-radius: 50%;
	display: inline;
	stroke-width: 6;
	stroke: #fff;
	stroke-miterlimit: 10;
	margin: -4px -15px;
	-webkit-box-shadow: inset 0px 0px 0px #fff;
			box-shadow: inset 0px 0px 0px #fff;
	/*-webkit-animation: fill .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both;*/
			/*animation: fill .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both;*/
			animation: fill .4s ease-in-out forwards, scale .3s ease-in-out forwards;			
    opacity: 0;
}

.checkmark.animate {
    opacity: 1;
}


.checkmark__circle {
	stroke-dasharray: 166;
	stroke-dashoffset: 166;
	stroke-width: 3;
	stroke-miterlimit: 10;
	stroke: #fff;
	fill: none;
	-webkit-animation: stroke .6s cubic-bezier(0.650, 0.000, 0.450, 1.000) forwards;
			animation: stroke .6s cubic-bezier(0.650, 0.000, 0.450, 1.000) forwards;
	}

.checkmark__check {
	-webkit-transform-origin: 50% 50%;
		-ms-transform-origin: 50% 50%;
			transform-origin: 50% 50%;
	stroke-dasharray: 48;
	stroke-dashoffset: 48;
	-webkit-animation: stroke .3s cubic-bezier(0.650, 0.000, 0.450, 1.000) .8s forwards;
			animation: stroke .3s cubic-bezier(0.650, 0.000, 0.450, 1.000) .8s forwards;
	}

@-webkit-keyframes stroke {
	100% {
		stroke-dashoffset: 0px;
		}
	}

@keyframes stroke {
	100% {
		stroke-dashoffset: 0px;
		}
	}

@-webkit-keyframes scale {
	0%, 100% {
		-webkit-transform: none;
				transform: none;
		}
	50% {
		-webkit-transform: scale3d(1.1, 1.1, 1);
				transform: scale3d(1.1, 1.1, 1);
		}
	}

@keyframes scale {
	0%, 100% {
		-webkit-transform: none;
				transform: none;
		}
	50% {
		-webkit-transform: scale3d(1.1, 1.1, 1);
				transform: scale3d(1.1, 1.1, 1);
		}
	}

@-webkit-keyframes fill {
	100% {
		-webkit-box-shadow: inset 0px 0px 0px 30px #B0D056;
				box-shadow: inset 0px 0px 0px 30px #B0D056;
		}
	}

@keyframes fill {
	100% {
		-webkit-box-shadow: inset 0px 0px 0px 30px #B0D056;
				box-shadow: inset 0px 0px 0px 30px #B0D056;
		}
	}