/**
 * Basic stuff - not really radio style related
 */
html {
  box-sizing: border-box;
  line-height: 1.5;
  background: #e7e7e7;
  text-align: left;
}

*, *:before, *:after {
  box-sizing: inherit;
}


h1 {
  color: #fff;
  margin: 10% 0 0 0;
}

/*****
 *
 * Radio checked style related
 * the fun part starts here
 *
 */
input[type=radio] {
  display: none;
}

/**
 * How it should look when hovered
 */
.active-label, label:focus, label:hover, label:active, input:checked + label {
  color: #7C3414;
}
.active-label:before, label:focus:before, label:hover:before, label:active:before, input:checked + label:before {
  background: white;
  border-color: #7C3414;
}

/**
 * Make those labels sexy
 */
label {
  color: #777;
  font-size: 2rem;
  font-weight: bold;
  line-height: 1;
  cursor: pointer;
  display: inline-block;
  padding: 1.2rem 1rem 1rem 4rem;
  position: relative;
  background: white;
  white-space: no-wrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: all .15s ease;
  /**
   * This is the radio fake dot basically
   */
}
label:first-of-type {
  border: 0;
}
label:before {
  content: "";
  position: absolute;
  left: 1rem;
  top: 1rem;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: .2rem solid #ccc;
}

/**
 * How it should look when checked
 */
input:checked + label:before {
  border-color: white;
  border: none;
  background: #7C3414;
}

/**
 * How it should look when disabled
 */
input:disabled + label {
  background: white;
  color: rgba(0, 0, 0, 0.5);
  cursor: not-allowed;
}
input:disabled + label:hover {
  border-color: rgba(0, 0, 0, 0.1);
}
input:disabled + label:before {
  border-color: white;
  background: white;
}