.checkbox-container {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    text-align: center;
}
.checkbox-container input[type="checkbox"] {
    display: none;
}
.checkbox-container label {
    cursor: pointer;
}

.checkbox {
    transform: scale(2);
    vertical-align: middle;
    margin: 0;
}

.checkbox-container .checkbox {
    display: inline-block;
    width: 15px;
    height: 15px;
    background: #d0d0d0;
}
.checkbox-container .checkbox:after {
    content: "";
    position: absolute;
    width: 0px;
    height: 3px;
    left: 1px;
    background: #3498db;
    -webkit-transform: translate(4px, 11px) rotate(-45deg);
            transform: translate(4px, 11px) rotate(-45deg);
    -webkit-transform-origin: left;
            transform-origin: left;
    transition: all 150ms;
    transition-delay: 0ms;
}
.checkbox-container .checkbox:before {
    content: "";
    position: absolute;
    width: 0px;
    height: 3px;
    left: 1px;
    background: #3498db;
    -webkit-transform: translate(1px, 6px) rotate(45deg);
            transform: translate(1px, 6px) rotate(45deg);
    -webkit-transform-origin: left;
            transform-origin: left;
    transition: all 150ms;
    transition-delay: 150ms;
}

.checkbox-container input[type="checkbox"]:checked ~ .checkbox:before {
    width: 7px;
    transition-delay: 0ms;
}
.checkbox-container input[type="checkbox"]:checked ~ .checkbox:after {
    width: 13px;
    transition-delay: 150ms;