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: 2px solid #be9e75;
	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:focus+label>span {
	outline: 0;
	border-color: #be9e75;
	box-shadow: 0 0 0 0;
}

input[type=checkbox].checkbix:checked+label>span {
	background: #be9e75;
	border: 2px 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: "";
	margin: auto;
	position: absolute;
	top: -1px;
	left: 0;
	bottom: 0;
	right: 0;
	border-right: 2px solid transparent;
	border-bottom: 2px solid transparent;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	-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 {
	top: -2px;
	-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;
	box-sizing: content-box
}

@-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
}