.radio-image {
    display: inline-block;
    width: 35px;
    height: 35px;
    background-image: url('/Content/images/radio-buttons-retina.png');
    background-size: 280px 105px;
    position: absolute;
    top: -9px;
    margin-left: 12px;
}
input[type=radio] {
    position: absolute;
    margin: 0px;
    left: -10000px;
}
input[type=radio]:checked ~ span.radio-text {
    color: #2480fe;
    font-weight: 600;
}
label.radio-label {
    font-size: 12px;
    font-weight: 400;
    color: #555555;
    height: 24px;
    width: 100%;
    cursor: pointer;
}

/*Gender*/
.gender-male span.radio-image {
    background-position: 0px 0px;
}
.gender-male:hover span.radio-image,
.gender-male input:focus ~ span.radio-image {
    background-position: -35px 0px;
}
.gender-male input:checked ~ span.radio-image,
.gender-male input:checked:hover ~ span.radio-image {
    background-position: -70px 0px;
}
.gender-female span.radio-image {
    background-position: -140px 0px;
}
.gender-female:hover span.radio-image,
.gender-female input:focus ~ span.radio-image {
    background-position: -175px 0px;
}
.gender-female input:checked ~ span.radio-image,
.gender-female input:checked:hover ~ span.radio-image {
    background-position: -210px 0px;
}

/*Tobacco*/
.tobacco-yes span.radio-image {
    background-position: 0px -35px;
}
.tobacco-yes:hover span.radio-image,
.tobacco-yes input:focus ~ span.radio-image {
    background-position: -35px -35px;
}
.tobacco-yes input:checked ~ span.radio-image,
.tobacco-yes input:checked:hover ~ span.radio-image {
    background-position: -70px -35px;
}
.tobacco-no span.radio-image {
    background-position: -140px -35px;
}
.tobacco-no:hover span.radio-image,
.tobacco-no input:focus ~ span.radio-image {
    background-position: -175px -35px;
}
.tobacco-no input:checked ~ span.radio-image,
.tobacco-no input:checked:hover ~ span.radio-image {
    background-position: -210px -35px;
}

/*input-validation-error*/
input[type=radio].input-validation-error ~ span.radio-text {
    color: #FF5353;
}
#genderMale.input-validation-error ~ span.radio-image {
    background-position: -105px 0px;
}
#genderFemale.input-validation-error ~ span.radio-image {
    background-position: -245px 0px;
}
#tobaccoYes.input-validation-error ~ span.radio-image {
    background-position: -105px -35px;
}
#tobaccoNo.input-validation-error ~ span.radio-image {
    background-position: -245px -35px;
}


/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) { 
    /**************************************************
        Radio Buttons
    **************************************************/
    .radio-image {
        width: 40px;
        height: 40px;
        background-size: 320px 120px;
        position: absolute;
        top: -2px;
        right: 15px;
    }
    label.radio-label {
        font-size: 15px;
        padding-top: 13px;
        height: 42px;
    }

    /*Gender*/
    .gender-male {
        padding-left: 35px;
    }
    .gender-female {
        padding-left: 25px;
    }

    .gender-male span.radio-image {
        background-position: 0px 0px;
    }
    .gender-male:hover span.radio-image,
    .gender-male input:focus ~ span.radio-image {
        background-position: -40px 0px;
    }
    .gender-male input:checked ~ span.radio-image,
    .gender-male input:checked:hover ~ span.radio-image {
        background-position: -80px 0px;
    }

    .gender-female span.radio-image {
        background-position: -160px 0px;
    }
    .gender-female:hover span.radio-image,
    .gender-female input:focus ~ span.radio-image {
        background-position: -200px 0px;
    }
    .gender-female input:checked ~ span.radio-image,
    .gender-female input:checked:hover ~ span.radio-image {
        background-position: -240px 0px;
    }

    /*Tobacco*/
    .tobacco-yes,
    .tobacco-no {
        padding-left: 55px;
    }

    .tobacco-yes span.radio-image {
        background-position: 0px -40px;
    }
    .tobacco-yes:hover span.radio-image,
    .tobacco-yes input:focus ~ span.radio-image {
        background-position: -40px -40px;
    }
    .tobacco-yes input:checked ~ span.radio-image,
    .tobacco-yes input:checked:hover ~ span.radio-image {
        background-position: -80px -40px;
    }

    .tobacco-no span.radio-image {
        background-position: -160px -40px;
    }
    .tobacco-no:hover span.radio-image,
    .tobacco-no input:focus ~ span.radio-image {
        background-position: -200px -40px;
    }
    .tobacco-no input:checked ~ span.radio-image,
    .tobacco-no input:checked:hover ~ span.radio-image {
        background-position: -240px -40px;
    }

    /*input-validation-error*/
    #genderMale.input-validation-error ~ span.radio-image {
        background-position: -120px 0px;
    }
    #genderFemale.input-validation-error ~ span.radio-image {
        background-position: -280px 0px;
    }
    #tobaccoYes.input-validation-error ~ span.radio-image {
        background-position: -120px -40px;
    }
    #tobaccoNo.input-validation-error ~ span.radio-image {
        background-position: -280px -40px;
    }
}