body {
    counter-reset: section;
}

x::before {
    counter-increment: section;
    content: "Q" counter(section) ": ";
	display:inline;
}


input[type="radio"] {
  display: none;
  &:not(:disabled) ~ label {
    cursor: pointer;
  }
  &:disabled ~ label {
    color: hsla(150, 5%, 75%, 1);
    border-color: hsla(150, 5%, 75%, 1);
    box-shadow: none;
    cursor: not-allowed;
  }
}
label {
  height: 100%;
  width:100%;
  display: block;
  background: white;
  border: 2px solid hsla(150, 75%, 50%, 1);
  border-radius: 20px;
  padding: 1rem;
  margin-bottom: 1rem;
  //margin: 1rem;
  text-align: center;
  box-shadow: 0px 3px 10px -2px hsla(150, 5%, 65%, 0.5);
  position: relative;
}
label1 {
  height: 100%;
  width:100%;
  display: inline-table;
  background: white;
  border: 1px solid hsla(150, 75%, 50%, 1);
  border-radius: 100px;
  padding: 1rem;
  margin-bottom: 1rem;
  //margin: 1rem;
  text-align: left;
  box-shadow: 0px 3px 10px -2px hsla(150, 5%, 65%, 0.5);
  position: relative;
  background-color: #FFFFFF;
  border-spacing:30px;
 
}
table {
  height: 100%;
  width:100%;
  display: inline-table;
  background: white;
  
  padding: 1rem;
  margin-bottom: 1rem;
  //margin: 1rem;
  text-align: left;
 
  position: relative;
  background-color: #FFFFFF;
  border-spacing:20px;
}


input[type="radio"]:checked + label {
  background: hsla(150, 75%, 50%, 1);
  color: hsla(215, 0%, 100%, 1);
  box-shadow: 0px 0px 20px hsla(150, 100%, 50%, 0.75);
  &::after {
    color: hsla(215, 5%, 25%, 1);
    font-family: FontAwesome;
    border: 2px solid hsla(150, 75%, 45%, 1);
    content: "\f00c";
    font-size: 24px;
    position: absolute;
    top: -25px;
    left: 50%;
    transform: translateX(-50%);
    height: 50px;
    width: 50px;
    line-height: 50px;
    text-align: center;
    border-radius: 50%;
    background: white;
    box-shadow: 0px 2px 5px -2px hsla(0, 0%, 0%, 0.25);
  }
}
input[type="radio"]#control_05:checked + label {
  background: red;
  border-color: red;
}
p {
   font-family: "Open Sans", sans-serif;
   font-weight: normal;
   font-size:16px;
   color:#333333;
}


@media only screen and (max-width: 700px) {
  section {
    flex-direction: column;
  }
}







h1 {
  font-family: "Open Sans", sans-serif;;
  font-weight: normal;
  text-align: center;
  color: rgba(255, 255, 255, 0.5);
  margin-top: 10%;
}

.wrap {
  margin: 5% 20px 20px -125px;
  overflow: hidden;
  position: absolute;
  left: 50%;
  top: 20%;
}

.log {
  color: #DDD;
  margin-top: 20%;
  padding: 0 5px;
  opacity: .3;
  transition: all 250ms;
  text-align: center;
  display: none;
}

.radio-group {
  width:100%;
  display: inline-table;
  table-layout: fixed;
  border-spacing: 0;
  border-collapse: separate;
  float: left;
  box-sizing:border-box;
  
}

.radio-group__label {
  display: table-cell;
  height: 28px;
  padding: 5px;
  vertical-align: middle;
  text-align: center;
  position: relative;
  border: 1px solid;
  border-color:hsla(120,100%,50%,0.3);
  border-style:;
  border-radius: 0px 0 0 0px;  
  color: #4F5167;
  -moz-transition: border 500ms, color 500ms;
  -o-transition: border 500ms, color 500ms;
  -webkit-transition: border 500ms, color 500ms;
  transition: border 500ms, color 500ms;
  cursor: pointer;
   box-sizing:border-box;
  
}

.radio-group__label + input + .radio-group__label {
  border-radius: 0 0px 0px 0;
  border-style: solid solid solid none;
}

.radio-group__label + input + .radio-group__label:before {
  content: " ";
  display: block;
  position: absolute;
  top: -1px;
  width: 100%;
  height: 100%;
  border:;
  border-radius: 5px 0 0 5px;
  transform: translate3d(0, 0, 0);
  transition: all 250ms;
}

.radio-group__label + input:checked + .radio-group__label:before {
  border-radius: 0 5px 5px 0;
  transform: translate3d(-6px, 0, 0);
}

.radio-group__option:checked + label {
  color: #389E29;
}

.radio-group__option {
  display: none;
}