.demo {
      margin: 60px auto;
    }

    .radiogroup {
      margin: 20px auto;
      position: relative;
    }

    .radiogroup ul {
      list-style: none;
    }

    .radiogroup ul li {
      border-bottom: 2px solid #333333;
    }

    .radiogroup ul li:last-child {
      border-bottom: 1px solid transparent;
    }

    .control input {
      position: absolute;
      left: 30px;
      opacity: 0;
    }

    .control {
      display: block;
      position: relative;
      padding-left: 60px;
      padding-top: 20px;
      padding-bottom: 20px;
      cursor: pointer;
      font-size: 1.4rem;
      font-weight: bold;
    }

    .control span {
      color: #333333;
      transition: color 0.5s;
    }

    .control-indicator {
      position: absolute;
      top: 14px;
      left: 10px;
      height: 30px;
      width: 30px;
      background-color: transparent;
      border: 6px solid #333333;
      border-radius: 50%;
      transition: border-color 0.5s;
    }

    .control-indicator:after {
      content: '';
      position: absolute;
      display: block;
      left: 5px;
      top: 5px;
      height: 20px;
      width: 20px;
      border-radius: 50%;
      transition: border-color 0.5s, background-color 0.5s;
    }

    .control input:focus ~ span,
    .control input:hover ~ span {
      color: #ed3e6a;
    }
    .control input:focus ~ .control-indicator,
    .control input:hover ~ .control-indicator {
      border-color: #fbc610;
    }

    .control input:checked ~ span {
      color: #319bd6;
    }
    .control input:checked ~ .control-indicator {
      border-color: #80bd47;
    }
    .control input:checked ~ .control-indicator:after {
      background-color: #80bd47;
    }