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 #ffcc71;
    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:#ffcc71;
    box-shadow:0 0 0 1px rgba(0,20,20,.5)
}
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:"";
    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
}