.c-radio {
	position: relative;
}

/* visually hide the radio button,
   and set it up to be positioned over
   the styled radio button replacement
*/
.c-radio > input[type="radio"] {
	-moz-appearance: none;
	-webkit-appearance: none;
	appearance: none; /* in case this ever gets supported */
	background: none;
	opacity: .00001;
	z-index: 2;
}

.c-radio > label {
	display: inline-block;
	padding: 0 .5em 0 2em;
}


.c-radio > input[type="radio"],
.c-radio > label:before,
.c-radio > label:after {
	border: 1px solid;
	height: 1em;
	left: .125em;
	position: absolute;
	top: .25em;
	width: 1em;
}

.c-radio > input[type="radio"],
.c-radio > label:before,
.c-radio > label:after {
	border-radius: 100%;
	content: " ";
	transition:
		border-color .2s ease-in-out,
		box-shadow .2s ease-in-out;
}

.c-radio > label:after {
	border-color: #c0c0c0;
}

.c-radio > label:before {
	border-color: transparent;
	box-shadow: 0 0 0 0px rgba(0,0,0,0);
}

.c-radio > input:checked ~ label:before {
	border-color: transparent;
	box-shadow: 0 0 0 2px #356AE6;
}

.c-radio > input:focus ~ label:before {
	border-color: transparent;
	/* box-shadow: 0 0 0 2px #356AE6; */
	box-shadow: 0 0 0 3px #356AE6;
}

.c-radio > input:checked ~ label:after {
	border-color: #fff;
	border-width: 1px;
	box-shadow: inset 0 0 0 4px #356AE6;
}

.c-radio > input[disabled] ~ label {
	opacity: .5;
}

@media screen and (-ms-high-contrast: active) {
	.c-radio > input:checked ~ label:before {
		background: window;
		border: 6px solid buttonface;
		box-shadow: none;
	}
}