input[type=radio] {
  display: none;
}
/**
 * How it should look when hovered
 */
.active-label, label:focus, label:hover, label:active, input:checked + label {
  color: #FF3600;
}
.active-label:before, label:focus:before, label:hover:before, label:active:before, input:checked + label:before {
  border-color: #FF3600;
}
/**
 * Make those labels sexy
 */
label {
  font-weight: bold;
  line-height: 1em;
  cursor: pointer;
  display: block;
  padding: .2rem 1rem .3rem 3rem;
  position: relative;
  whitespace: no-wrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: all 0.15s ease;
	width: auto;
	text-align: center;
}
label:first-of-type {
  border: 0;
  /**
   * This is the radio fake dot basically
   */
}
label:before {
  content: "";
  position: absolute;
  left: 1rem;
  top: 0rem;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 0.1rem solid #ccc;
}
/**
 * How it should look when checked
 */
input:checked + label:before {
  border: none;
  background: #FF3600;
  left: 1.1rem;
  top: .1rem;
	
}