input[type="radio"] {
    /* hide the real radio button - but not with display:none as it causes x-browser problems */
    opacity:0.001;
    position:absolute;
    /*left:-10000;*/
}
input[type="radio"] + label {
    cursor: pointer;
}
/* N.B You could use a child span in the label if you didn't want to use the :after pseudo */
input[type="radio"] + label:before {
    display:inline-block;
    content:"●";
    font-size:38px;
    line-height:19px;
    text-align:center;
    color:#fff;
    background: #fff;
    width: 25px;
    height: 25px;
    vertical-align: middle;
    margin: 0 10px;
    border-radius:50%;  
    border:1px solid grey;

}
input[type="radio"] + label:hover:before {
    background: #fff;    
}
input[type="radio"]:checked + label:before {
    color:#36d7b7;
    background: #fff; 

    border-color:solid grey;
}
@media only screen and (max-width: 1000px) {	
	input[type="radio"] + label:before {
	line-height:26px;
	font-size:23px;
	border-radius:50%;
	border:1px solid grey;
	}
}