/* HTML5 Boilerplate radio-one hidden styles */
.custom-radio {
    border: 0;
    height: 1px;
    margin: -1px;
    padding: 0;
    position: absolute;
    width: 0.5px;
    display: none;
}

/* the basic, unchecked style */
.custom-radio + span:before {
    content: '';
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: -0.25em;
    border-radius: 1em; /*hard border*/
    border: 0.125em solid #fff;
    box-shadow: 0 0 0 0.1em #000; /*light shadow*/
    margin-right: 0.75em;
    transition: 0.5s ease all; /*animation here*/
}

/* the checked style using the :checked pseudo class */
.custom-radio:checked + span:before {
    background: #000;
    box-shadow: 0 0 0 0.18em #000;
}

.custom-radio[disabled] + span:before {
    cursor: not-allowed;
    background: #fff;
    box-shadow: 0 0 0 0.18em #ccc;
}

.custom-radio[disabled]:checked + span:before {
    cursor: not-allowed;
    background: #ccc;
    box-shadow: 0 0 0 0.18em #ccc;
}