.md-checkbox {
    position: relative;
}

.md-checkbox input[type="checkbox"] {
    visibility: hidden;
    position: absolute;
}

.md-checkbox label {
    cursor: pointer;
    padding-left: 30px;
}

.md-checkbox label > span {
    display: block;
    position: absolute;
    left: 0;
    -webkit-transition-duration: .3s;
    -moz-transition-duration: .3s;
    transition-duration: .3s;
}

.md-checkbox input[type="checkbox"]:checked ~ label > .check {
    opacity: 1;
    -webkit-transform: scale(1) rotate(45deg);
    -moz-transform: scale(1) rotate(45deg);
    transform: scale(1) rotate(45deg);
}

.md-checkbox label > .check {
    top: -4px;
    left: 6px;
    width: 10px;
    height: 20px;
    border: 2px solid #36c6d3;
    border-top-width: 2px;
    border-left-width: 2px;
    border-top-style: solid;
    border-left-style: solid;
    border-top-color: rgb(54, 198, 211);
    border-left-color: rgb(54, 198, 211);
    border-top: none;
    border-left: none;
    opacity: 0;
    z-index: 5;
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    transform: rotate(180deg);
    -webkit-transition-delay: .3s;
    -moz-transition-delay: .3s;
    transition-delay: .3s;
}

.md-checkbox label > span {
    display: block;
    position: absolute;
    left: 0;
    -webkit-transition-duration: .3s;
    -moz-transition-duration: .3s;
    transition-duration: .3s;
}

.md-checkbox input[type="checkbox"]:checked ~ label > .box {
    opacity: 0;
    -webkit-transform: scale(0) rotate(-180deg);
    -moz-transform: scale(0) rotate(-180deg);
    transform: scale(0) rotate(-180deg);
}

.md-checkbox label > .box {
    top: 0;
    border: 2px solid #666;
    height: 20px;
    width: 20px;
    z-index: 5;
    -webkit-transition-delay: .2s;
    -moz-transition-delay: .2s;
    transition-delay: .2s;
}

.md-checkbox label > span {
    display: block;
    position: absolute;
    left: 0;
    -webkit-transition-duration: .3s;
    -moz-transition-duration: .3s;
    transition-duration: .3s;
}