CSS only radio buttons not being checked on click - css

Question

CSS only, I prefer not to add any additional JS. The 2nd radio button is not being "checked" when clicked.
Here's fiddle already created.
HTML:
<div class="account-container">
<div class="form-group">
<div class="control-container clearfix">
<div class="col-md-4 radio">
<input type="radio" name="Gender" value="Mujer" checked />
<label>Mujer</label>
</div>
<div class="col-md-4 radio">
<input type="radio" name="Gender" value="Hombre" />
<label>Hombre</label>
</div>
</div>
</div>
</div>
CSS:
.account-container .radio {
height: 100%;
margin: 0;
}
.account-container .radio label {
position: relative;
line-height: 40px;
cursor: pointer;
padding-left: 30px;
}
.account-container .radio label:before {
content: " ";
display: inline-block;
width: 22px;
height: 22px;
position: absolute;
left: 0;
top: 9px;
border: 1px solid #1fb5e1;
background-color: #fff;
border-radius: 50%;
}
.account-container .radio input[type="radio"]:checked + label:after {
background-color: #1fb5e1;
width: 14px;
height: 14px;
border-radius: 50%;
position: absolute;
content: " ";
left: 5px;
top: 14px;
}

Answer 1

<input type="radio" id="id_of_radio">
<label for="id_of_radio">

Answer 2

The issue is the position of your radio items, since they are not visible, you cannot click on it.
You should use the capability of the label, when you click on it, the bounded element is selected.
http://jsfiddle.net/fvzegu6o/1/
<div class="col-md-4 radio">
<input type="radio" name="Gender" value="Mujer" id="mujer" checked />
<label for="mujer">Mujer</label>
</div>
<div class="col-md-4 radio">
<input type="radio" name="Gender" value="Hombre" id="hombre" />
<label for="hombre">Hombre </label>
</div>