/** Images as Radio buttons */
/* https://codepen.io/hamann/pen/JXZGbq */
/* Christian Hamann */

.cc-selector input{
  margin:0;padding:0;
  -webkit-appearance:none;
  -moz-appearance:none;
  appearance:none;
}

.cc-selector input:active +.img-radio{opacity: .5;}
.cc-selector input:checked +.img-radio{
  -webkit-filter: none;
  -moz-filter: none;
  filter: none;
  box-shadow: 0 0 0 0.25rem rgb(66 70 73 / 23%);
  border-radius: 6px;
}
.img-radio{
  cursor:pointer;
  background-size:contain;
  background-repeat:no-repeat;
  display:inline-block;
  width:70px;height:70px;
  -webkit-transition: all 100ms ease-in;
  -moz-transition: all 100ms ease-in;
  transition: all 100ms ease-in;
  -webkit-filter: brightness(1.8) grayscale(1) opacity(.7);
  -moz-filter: brightness(1.8) grayscale(1) opacity(.7);
  filter: brightness(1.8) grayscale(1) opacity(.7);
}
.img-radio:hover{
  -webkit-filter: brightness(1.2) grayscale(.5) opacity(.9);
  -moz-filter: brightness(1.2) grayscale(.5) opacity(.9);
  filter: brightness(1.2) grayscale(.5) opacity(.9);
}