/* CSS Checkboxes */
div.checkboxes {
	width:100%;
	}

	div.checkboxes div {
		float:left;
	    display:inline-block;
	    cursor: pointer;
	    position: relative;
		width:calc(33% - var(--margin-xs));
		margin-right:var(--margin-xs);
		margin-bottom:var(--margin-xs);
		border-radius:var(--radius-tight);
		height:32px;
		}
		
	.checkboxes .checkbox {
	    display:table-cell;
	    width:100%;
	    height:100%;
	    vertical-align:middle;
	    text-align:center;
	  	}
	
	.checkboxes label {
	    color:var(--color-font);
	    cursor: pointer;
	    position: relative;
		width:100%;
		border-radius:var(--radius-tight);
		border:1px solid var(--color-light);
		background-color:var(--color-very-light);
		padding-left:4px;
		font-size:14px;
		line-height:32px;
		height:32px;
		font-weight:500;
	  	}
	  
	  	.checkboxes label:hover {
			background-color:white;
			outline:1px solid var(--color-blue);
			}
	  	
	  	.checkboxes label span {
		    display:inline-block;
		    position:relative;
		    top:-1px;
		    background-color:rgb(0,0,0,.1);
		    box-shadow:inset var(--shadow);
		    width:24px;
		    height:24px;
		    transform-origin: center;
		    border-radius:var(--radius-tight);
		    vertical-align:middle;
		    margin-right:10px;
		    transform:scale(.7);
		    transition: background-color 150ms 200ms, transform 350ms cubic-bezier(0.78, -1.22, 0.17, 1.89);
		  	}
		  	
		  	.checkboxes label span:before {
		  		content:"";
		  		width:0px;
		  		height:2px;
		  		border-radius:2px;
		  		background:var(--color-purple);
		  		position:absolute;
		  		transform:rotate(45deg);
		  		top:13px;
		  		left:9px;
		  		transition:width 50ms ease 50ms;
		  		transform-origin:0% 0%;
	  			}
	  			
	  		.checkboxes label span:after {
	  			content:"";
	  			width:0;
	  			height:2px;
	  			border-radius:2px;
	  			background:var(--color-purple);
	  			position:absolute;
	  			transform:rotate(305deg);
	  			top:16px;
	  			left:10px;
	  			transition:width 50ms ease;
	  			transform-origin:0% 0%;
	  			}
	  			
	  		.checkboxes label:hover span:before {
	  			width:5px;
	  			transition:width 100ms ease;
	  			}
	  			
	  		.checkboxes label:hover span:after {
	  			width:10px;
	  			transition:width 150ms ease 100ms;
	  			}
	
	.checkboxes input[type=checkbox] {
		display:none !important;
		}
		
		.checkboxes input[type=checkbox]:checked + label span {
			background-color:var(--color-purple);
			transform:scale(1);
			}
	  			
		.checkboxes input[type=checkbox]:checked + label span:after {
	    	width:10px;
			background:white;
			transition:width 150ms ease 100ms;
	  		}
	  		
	  	.checkboxes input[type=checkbox]:checked + label span:before {
	    	width:5px;
			background:white;
			transition:width 150ms ease 100ms;
	  		}
	  		
	  	.checkboxes input[type=checkbox]:checked + label:hover span {
	    	background-color:var(--color-purple);
			transform:scale(1);
	  		}
	  		
	  	.checkboxes input[type=checkbox]:checked + label:hover span:after {
	    	width:10px;
			background:white;
			transition:width 150ms ease 100ms;
	  		}
	  		
	  	.checkboxes input[type=checkbox]:checked + label:hover span:before {
	    	width:5px;
			background:white;
			transition:width 150ms ease 100ms;
	  		}