@import url('https://fonts.googleapis.com/css?family=Lato:400,500,600,700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Lato', sans-serif;
}
html,body{
  display: grid;
  height: 100%;
  place-items: center;
  background: #0069d9;
  font-family: 'Lato', sans-serif;
}
.wrapper{
  display: inline-flex;
  height: 80px;
  width: 300px;
  align-items: center;
  justify-content: space-evenly;
  border-radius: 5px;
  padding: 20px 15px;
  /*box-shadow: 5px 5px 30px rgba(0,0,0,0.2);*/
}
.wrapper .option{
  background: #e72f67;
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  margin: 0 10px;
  border-radius: 5px;
  cursor: pointer;
  padding: 0 10px;
  border: 2px solid lightgrey;
  transition: all 0.3s ease;
}
.wrapper .option .dot{
  height: 17px;
  width: 17px;
  background: #fcf0d6;
  border-radius: 50%;
  position: relative;
}
.wrapper .option .dot::before{
  position: absolute;
  content: "";
  top: 3px;
  left: 3px;
  width: 11px;
  height: 11px;
  background: #825737;
  border-radius: 50%;
  opacity: 0;
  transform: scale(1.5);
  transition: all 0.3s ease;
}
input[type="radio"]{
  display: none;
}
#option-1:checked:checked ~ .option-1,
#option-2:checked:checked ~ .option-2,
#option-3:checked:checked ~ .option-3,
#option-4:checked:checked ~ .option-4,
#option-5:checked:checked ~ .option-5,
#option-6:checked:checked ~ .option-6,
#option-7:checked:checked ~ .option-7,
#option-8:checked:checked ~ .option-8,
#option-9:checked:checked ~ .option-9,
#option-10:checked:checked ~ .option-10,
#option-11:checked:checked ~ .option-11,
#option-12:checked:checked ~ .option-12,
#option-13:checked:checked ~ .option-13,
#option-14:checked:checked ~ .option-14,
#option-15:checked:checked ~ .option-15,
#option-16:checked:checked ~ .option-16,
#option-17:checked:checked ~ .option-17,
#option-18:checked:checked ~ .option-18,
#option-19:checked:checked ~ .option-19,
#option-20:checked:checked ~ .option-20,
#option-21:checked:checked ~ .option-21,
#option-22:checked:checked ~ .option-22,
#option-23:checked:checked ~ .option-23,
#option-24:checked:checked ~ .option-24,
#option-25:checked:checked ~ .option-25,
#option-26:checked:checked ~ .option-26,
#option-27:checked:checked ~ .option-27,
#option-28:checked:checked ~ .option-28,
#option-29:checked:checked ~ .option-29,
#option-30:checked:checked ~ .option-30,
#option-31:checked:checked ~ .option-31,
#option-32:checked:checked ~ .option-32,
#option-33:checked:checked ~ .option-33,
#option-34:checked:checked ~ .option-34,
#option-35:checked:checked ~ .option-35,
#option-36:checked:checked ~ .option-36,
#option-37:checked:checked ~ .option-37,
#option-38:checked:checked ~ .option-38,
#option-39:checked:checked ~ .option-39{
  border-color: #825737;
  background: #825737;
}
#option-1:checked:checked ~ .option-1 .dot,
#option-2:checked:checked ~ .option-2 .dot,
#option-3:checked:checked ~ .option-3 .dot,
#option-4:checked:checked ~ .option-4 .dot,
#option-5:checked:checked ~ .option-5 .dot,
#option-6:checked:checked ~ .option-6 .dot,
#option-7:checked:checked ~ .option-7 .dot,
#option-8:checked:checked ~ .option-8 .dot,
#option-9:checked:checked ~ .option-9 .dot,
#option-10:checked:checked ~ .option-10 .dot,
#option-11:checked:checked ~ .option-11 .dot,
#option-12:checked:checked ~ .option-12 .dot,
#option-13:checked:checked ~ .option-13 .dot,
#option-14:checked:checked ~ .option-14 .dot,
#option-15:checked:checked ~ .option-15 .dot,
#option-16:checked:checked ~ .option-16 .dot,
#option-17:checked:checked ~ .option-17 .dot,
#option-18:checked:checked ~ .option-18 .dot,
#option-19:checked:checked ~ .option-19 .dot,
#option-20:checked:checked ~ .option-20 .dot,
#option-21:checked:checked ~ .option-21 .dot,
#option-22:checked:checked ~ .option-22 .dot,
#option-23:checked:checked ~ .option-23 .dot,
#option-24:checked:checked ~ .option-24 .dot,
#option-25:checked:checked ~ .option-25 .dot,
#option-26:checked:checked ~ .option-26 .dot,
#option-27:checked:checked ~ .option-27 .dot,
#option-28:checked:checked ~ .option-28 .dot,
#option-29:checked:checked ~ .option-29 .dot,
#option-30:checked:checked ~ .option-30 .dot,
#option-31:checked:checked ~ .option-31 .dot,
#option-32:checked:checked ~ .option-32 .dot,
#option-33:checked:checked ~ .option-33 .dot,
#option-34:checked:checked ~ .option-34 .dot,
#option-35:checked:checked ~ .option-35 .dot,
#option-36:checked:checked ~ .option-36 .dot,
#option-37:checked:checked ~ .option-37 .dot,
#option-38:checked:checked ~ .option-38 .dot,
#option-39:checked:checked ~ .option-39 .dot{
  background: #fff;
}
#option-1:checked:checked ~ .option-1 .dot::before,
#option-2:checked:checked ~ .option-2 .dot::before,
#option-3:checked:checked ~ .option-3 .dot::before,
#option-4:checked:checked ~ .option-4 .dot::before,
#option-5:checked:checked ~ .option-5 .dot::before,
#option-6:checked:checked ~ .option-6 .dot::before,
#option-7:checked:checked ~ .option-7 .dot::before,
#option-8:checked:checked ~ .option-8 .dot::before,
#option-9:checked:checked ~ .option-9 .dot::before,
#option-10:checked:checked ~ .option-10 .dot::before,
#option-11:checked:checked ~ .option-11 .dot::before,
#option-12:checked:checked ~ .option-12 .dot::before,
#option-13:checked:checked ~ .option-13 .dot::before,
#option-14:checked:checked ~ .option-14 .dot::before,
#option-15:checked:checked ~ .option-15 .dot::before,
#option-16:checked:checked ~ .option-16 .dot::before,
#option-17:checked:checked ~ .option-17 .dot::before,
#option-18:checked:checked ~ .option-18 .dot::before,
#option-19:checked:checked ~ .option-19 .dot::before,
#option-20:checked:checked ~ .option-20 .dot::before,
#option-21:checked:checked ~ .option-21 .dot::before,
#option-22:checked:checked ~ .option-22 .dot::before,
#option-23:checked:checked ~ .option-23 .dot::before,
#option-24:checked:checked ~ .option-24 .dot::before,
#option-25:checked:checked ~ .option-25 .dot::before,
#option-26:checked:checked ~ .option-26 .dot::before,
#option-27:checked:checked ~ .option-27 .dot::before,
#option-28:checked:checked ~ .option-28 .dot::before,
#option-29:checked:checked ~ .option-29 .dot::before,
#option-30:checked:checked ~ .option-30 .dot::before,
#option-31:checked:checked ~ .option-31 .dot::before,
#option-32:checked:checked ~ .option-32 .dot::before,
#option-33:checked:checked ~ .option-33 .dot::before,
#option-34:checked:checked ~ .option-34 .dot::before,
#option-35:checked:checked ~ .option-35 .dot::before,
#option-36:checked:checked ~ .option-36 .dot::before,
#option-37:checked:checked ~ .option-37 .dot::before,
#option-38:checked:checked ~ .option-38 .dot::before,
#option-39:checked:checked ~ .option-39 .dot::before{
  opacity: 1;
  transform: scale(1);
}
.wrapper .option span{
  font-size: 17px;
  color: #fcf0d6;
  white-space: nowrap;
}
#option-1:checked:checked ~ .option-1 span,
#option-2:checked:checked ~ .option-2 span,
#option-3:checked:checked ~ .option-3 span,
#option-4:checked:checked ~ .option-4 span,
#option-5:checked:checked ~ .option-5 span,
#option-6:checked:checked ~ .option-6 span,
#option-7:checked:checked ~ .option-7 span,
#option-8:checked:checked ~ .option-8 span,
#option-9:checked:checked ~ .option-9 span,
#option-10:checked:checked ~ .option-10 span,
#option-11:checked:checked ~ .option-11 span,
#option-12:checked:checked ~ .option-12 span,
#option-13:checked:checked ~ .option-13 span,
#option-14:checked:checked ~ .option-14 span,
#option-15:checked:checked ~ .option-15 span,
#option-16:checked:checked ~ .option-16 span,
#option-17:checked:checked ~ .option-17 span,
#option-18:checked:checked ~ .option-18 span,
#option-19:checked:checked ~ .option-19 span,
#option-20:checked:checked ~ .option-20 span,
#option-21:checked:checked ~ .option-21 span,
#option-22:checked:checked ~ .option-22 span,
#option-23:checked:checked ~ .option-23 span,
#option-24:checked:checked ~ .option-24 span,
#option-25:checked:checked ~ .option-25 span,
#option-26:checked:checked ~ .option-26 span,
#option-27:checked:checked ~ .option-27 span,
#option-28:checked:checked ~ .option-28 span,
#option-29:checked:checked ~ .option-29 span,
#option-30:checked:checked ~ .option-30 span,
#option-31:checked:checked ~ .option-31 span,
#option-32:checked:checked ~ .option-32 span,
#option-33:checked:checked ~ .option-33 span,
#option-34:checked:checked ~ .option-34 span,
#option-35:checked:checked ~ .option-35 span,
#option-36:checked:checked ~ .option-36 span,
#option-37:checked:checked ~ .option-37 span,
#option-38:checked:checked ~ .option-38 span,
#option-39:checked:checked ~ .option-39 span{
  color: #fff;
}