label.customcheckbox {
	position: relative;
	padding-left: 30px;
	font-size: 14px;
	cursor: pointer;
	font-weight:400;
	margin:0;
	display: inline;
}
label.customcheckbox:before, label.customcheckbox:after {
	font-family: EtudWorkIcons;
	font-size: 21px;
	/*absolutely positioned*/
	position: absolute; top: 0; left: 0;
}
label.customcheckbox:before {
	content: '\e904'; /*unchecked*/
}
label.customcheckbox:after {
	content: '\e903'; /*checked*/
	color:#27ae60;
	background-color:#fff;
	/*checked icon will be hidden by default by using 0 max-width and overflow hidden*/
	max-width: 0;
	overflow: hidden;
	opacity: 0.5;
	/*CSS3 transitions for animated effect*/
	transition: all 0.35s;
}

/*hiding the original checkboxes*/
input[type="checkbox"].customcheckbox {
	display: none;
}
/*when the user checks the checkbox the checked icon will animate in*/
input[type="checkbox"].customcheckbox:checked + label.customcheckbox:after {
	max-width: 25px; /*an arbitratry number more than the icon's width*/
	opacity: 1; /*for fade in effect*/
}