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:0;
	font-size:12px;
	color:#666666;
}
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;
	width: 14px;
	height: 14px;
	background: 0 0;
    border:.1rem solid #999999;
	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;
	margin-top:3px;
}
input[type=checkbox].checkbix:focus+label>span {
	outline: 0;
	border-color: #cccccc;
	box-shadow: 0 0 0 1px rgba(0,20,20,.5)
}
input[type=checkbox].checkbix:checked+label>span {
	background: #0b9fe5;
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: 5%;
	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
}