input[type=checkbox].checkbix {
	position: absolute;
	opacity: 0;
	z-index: -1
}

input[type=checkbox].checkbix+label {
	position: relative;
	display: -webkit-inline-box;
	display: -ms-inline-flexbox;
	display: inline-flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	color: inherit;
	-webkit-transition: all 250ms cubic-bezier(.4,0,.23,1);
	transition: all 250ms cubic-bezier(.4,0,.23,1);
	margin-bottom: .15rem
}

input[type=checkbox].checkbix+label>span {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	margin-right: .5em;
	width: 16px;
	height: 16px;
	background: 0 0;
	border: .1rem solid #fff;
	border-radius: 1px;
	cursor: pointer;
	-webkit-transition: all 250ms cubic-bezier(.4,0,.23,1);
	transition: all 250ms cubic-bezier(.4,0,.23,1);
	position: relative
}



input[type=checkbox].checkbix:checked+label>span {
	background: #5ECD62;
	border: .1rem solid transparent;
	-webkit-animation: reveal .2s cubic-bezier(.4,0,.5,1);
	animation: reveal .2s cubic-bezier(.4,0,.5,1)
}

input[type=checkbox].checkbix:checked+label>span:before {
	content: "";
	position: absolute;
	top: 0;
	left: 22%;
	margin-left: auto;
	margin-right: auto;
	border-right: 2px solid transparent;
	border-bottom: 2px solid transparent;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	-webkit-transform-origin: 0 100%;
	transform-origin: 0 100%;
	-webkit-animation: checkboxcheck 125ms 50ms cubic-bezier(.1,0,.1,1) forwards;
	animation: checkboxcheck 125ms 50ms cubic-bezier(.1,0,.1,1) forwards
}

@-webkit-keyframes reveal {
	0%,100% {
		-webkit-transform: scale(1);
		transform: scale(1)
	}

	33% {
		-webkit-transform: scale(.5);
		transform: scale(.5)
	}
}

@keyframes reveal {
	0%,100% {
		-webkit-transform: scale(1);
		transform: scale(1)
	}

	33% {
		-webkit-transform: scale(.5);
		transform: scale(.5)
	}
}

@-webkit-keyframes checkboxcheck {
	0% {
		width: 0;
		height: 0;
		border-color: #fff;
		-webkit-transform: rotate(45deg);
		transform: rotate(45deg)
	}

	33% {
		width: .2em;
		height: .3em;
		-webkit-transform: rotate(45deg);
		transform: rotate(45deg)
	}

	100% {
		width: .2em;
		height: .4em;
		border-color: #fff;
		-webkit-transform: rotate(45deg);
		transform: rotate(45deg)
	}
}

@keyframes checkboxcheck {
	0% {
		width: 0;
		height: 0;
		border-color: #fff;
		-webkit-transform: rotate(45deg);
		transform: rotate(45deg)
	}

	33% {
		width: .2em;
		height: .3em;
		-webkit-transform: rotate(45deg);
		transform: rotate(45deg)
	}

	100% {
		width: .2em;
		height: .4em;
		border-color: #fff;
		-webkit-transform: rotate(45deg);
		transform: rotate(45deg)
	}
}

input[type=checkbox].checkbix[data-size=large]+label>span {
	width: 24px;
	height: 24px
}

input[type=checkbox].checkbix[data-size=large]+label>span:before {
	-webkit-animation: checkboxchecklarge 125ms 50ms cubic-bezier(.1,0,.1,1) forwards;
	animation: checkboxchecklarge 125ms 50ms cubic-bezier(.1,0,.1,1) forwards;
	border-right: 3px solid transparent;
	border-bottom: 3px solid transparent
}

@-webkit-keyframes checkboxchecklarge {
	0% {
		width: 0;
		height: 0;
		border-color: #fff;
		-webkit-transform: rotate(45deg);
		transform: rotate(45deg)
	}

	33% {
		width: .3em;
		height: .6em;
		-webkit-transform: rotate(45deg);
		transform: rotate(45deg)
	}

	100% {
		width: .3em;
		height: .6em;
		border-color: #fff;
		-webkit-transform: rotate(45deg);
		transform: rotate(45deg)
	}
}

@keyframes checkboxchecklarge {
	0% {
		width: 0;
		height: 0;
		border-color: #fff;
		-webkit-transform: rotate(45deg);
		transform: rotate(45deg)
	}

	33% {
		width: .3em;
		height: .6em;
		-webkit-transform: rotate(45deg);
		transform: rotate(45deg)
	}

	100% {
		width: .3em;
		height: .6em;
		border-color: #fff;
		-webkit-transform: rotate(45deg);
		transform: rotate(45deg)
	}
}

input[type=checkbox].checkbix[data-shape=circled]+label>span {
	border-radius: 100%
}

input[type=checkbox].checkbix[data-color=black]:checked+label>span {
	background: #111
}

input[type=checkbox].checkbix[data-color=blue]:checked+label>span {
	background: #0074D9
}

input[type=checkbox].checkbix[data-color=red]:checked+label>span {
	background: #FF4136
}

input[type=checkbox].checkbix[data-color=gray]:checked+label>span {
	background: #AAA
}

input[type=checkbox].checkbix[data-color=orange]:checked+label>span {
	background: #FF851B
}