body {
  background-color: #f3f3f3;
}

.bg-container {
  position: absolute;
  top: 20%;
  width: 100%;
}

.box {
  position: absolute;
  top: 0;
  transform: rotate(80deg);
  left: 20%;
}

.wave {
  position: absolute;
  opacity: 0.4;
  width: 1200px;
  height: 1000px;
  border-radius: 43%;
}

.wave.one {
  animation: rotate 7000ms infinite linear;
  opacity: 0.1;
  background: rgba(149, 84, 255, 0.31);
}

.wave.two {
  animation: rotate 3000ms infinite linear;
  opacity: 0.1;
  background: rgba(149, 84, 255, 0.31);
}

.wave.three {
  animation: rotate 7500ms infinite linear;
  background-color: rgba(149, 84, 255, 0.31);
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  from {
    transform: rotate(360deg);
  }
}

#shape10,
#shape9,
#shape8,
#shape1 {
  transform-box: fill-box;
  transform-origin: center;
  -webkit-animation: rotate-center 2s cubic-bezier(0.445, 0.05, 0.55, 0.95)
    infinite alternate both;
  animation: rotate-center 2s cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite
    alternate both;
}

#cir1,
#cir2,
#cir3 {
  transform-box: fill-box;
  transform-origin: center;
  -webkit-animation: rotate-scale-down-diag-2 2s linear infinite both;
  animation: rotate-scale-down-diag-2 2s linear infinite both;
}

#cir4,
#cir5,
#cir6 {
  transform-box: fill-box;
  transform-origin: center;
  -webkit-animation: rotate-scale-down-diag-2 1s linear infinite both;
  animation: rotate-scale-down-diag-2 1s linear infinite both;
}

/**
 * ----------------------------------------
 * animation rotate-center
 * ----------------------------------------
 */
@-webkit-keyframes rotate-center {
  0% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes rotate-center {
  0% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

/**
 * ----------------------------------------
 * animation rotate-scale-down-diag-2
 * ----------------------------------------
 */
@-webkit-keyframes rotate-scale-down-diag-2 {
  0% {
    -webkit-transform: scale(1) rotate3d(-1, 1, 0, 0deg);
    transform: scale(1) rotate3d(-1, 1, 0, 0deg);
  }
  50% {
    -webkit-transform: scale(0.5) rotate3d(-1, 1, 0, 180deg);
    transform: scale(0.5) rotate3d(-1, 1, 0, 180deg);
  }
  100% {
    -webkit-transform: scale(1) rotate3d(-1, 1, 0, 360deg);
    transform: scale(1) rotate3d(-1, 1, 0, 360deg);
  }
}
@keyframes rotate-scale-down-diag-2 {
  0% {
    -webkit-transform: scale(1) rotate3d(-1, 1, 0, 0deg);
    transform: scale(1) rotate3d(-1, 1, 0, 0deg);
  }
  50% {
    -webkit-transform: scale(0.5) rotate3d(-1, 1, 0, 180deg);
    transform: scale(0.5) rotate3d(-1, 1, 0, 180deg);
  }
  100% {
    -webkit-transform: scale(1) rotate3d(-1, 1, 0, 360deg);
    transform: scale(1) rotate3d(-1, 1, 0, 360deg);
  }
}

#_checkbox {
  display: none;
}

label {
    text-align:center;
  position: absolute;
  top: 50%;
  right: 0;
  left: 0;
  width: 35px;
  height: 35px;
  margin: 0 auto;
  background-color: #f72414;
  transform: translateY(-50%);
  border-radius: 50%;
  box-shadow: 0 7px 10px #ffbeb8;
  cursor: pointer;
  transition: 0.2s ease transform, 0.2s ease background-color,
    0.2s ease box-shadow;
  overflow: hidden;
  z-index: 1;
  border: 2px solid rgba(0, 0, 0, 0.44);
}




label:active {
  transform: translateY(-50%) scale(0.9);
}
.selected{
  content: "";
  position: absolute;
  background-color: #fff;
  border-radius: 2px;
  opacity: 0;
  transition: 0.2s ease transform, 0.2s ease opacity;  
}
#tick_mark {
  position: absolute;
  top: -1px;
  right: 0;
  left: 0;
  width: 20px;
  height: 20px;
  margin: 0 auto;
  margin-left: 4px;
  transform: rotateZ(-40deg);
}

#tick_mark:before,
#tick_mark:after {
  content: "";
  position: absolute;
  background-color: #fff;
  border-radius: 2px;
  opacity: 0;
  transition: 0.2s ease transform, 0.2s ease opacity;
}

#tick_mark:before {
  left: 0;
  bottom: 0;
  width: 10px;
  height: 30px;
  box-shadow: -2px 0 5px rgba(0, 0, 0, 0.23);
  transform: translateY(-68px);
}

#tick_mark:after {
  left: 0;
  bottom: 0;
  width: 100%;
  height: 10px;
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.23);
  transform: translateX(78px);
}
#number1:checked + label {
background-color: #07d410;
box-shadow: 0 7px 10px #92ff97;
}#number2:checked + label {
background-color: #07d410;
box-shadow: 0 7px 10px #92ff97;
}#number3:checked + label {
background-color: #07d410;
box-shadow: 0 7px 10px #92ff97;
}#number4:checked + label {
background-color: #07d410;
box-shadow: 0 7px 10px #92ff97;
}#number5:checked + label {
background-color: #07d410;
box-shadow: 0 7px 10px #92ff97;
}#number6:checked + label {
background-color: #07d410;
box-shadow: 0 7px 10px #92ff97;
}#number7:checked + label {
background-color: #07d410;
box-shadow: 0 7px 10px #92ff97;
}#number8:checked + label {
background-color: #07d410;
box-shadow: 0 7px 10px #92ff97;
}#number9:checked + label {
background-color: #07d410;
box-shadow: 0 7px 10px #92ff97;
}#number10:checked + label {
background-color: #07d410;
box-shadow: 0 7px 10px #92ff97;
}#number11:checked + label {
background-color: #07d410;
box-shadow: 0 7px 10px #92ff97;
}#number12:checked + label {
background-color: #07d410;
box-shadow: 0 7px 10px #92ff97;
}#number13:checked + label {
background-color: #07d410;
box-shadow: 0 7px 10px #92ff97;
}#number14:checked + label {
background-color: #07d410;
box-shadow: 0 7px 10px #92ff97;
}#number15:checked + label {
background-color: #07d410;
box-shadow: 0 7px 10px #92ff97;
}#number16:checked + label {
background-color: #07d410;
box-shadow: 0 7px 10px #92ff97;
}#number17:checked + label {
background-color: #07d410;
box-shadow: 0 7px 10px #92ff97;
}#number18:checked + label {
background-color: #07d410;
box-shadow: 0 7px 10px #92ff97;
}#number19:checked + label {
background-color: #07d410;
box-shadow: 0 7px 10px #92ff97;
}#number20:checked + label {
background-color: #07d410;
box-shadow: 0 7px 10px #92ff97;
}#number21:checked + label {
background-color: #07d410;
box-shadow: 0 7px 10px #92ff97;
}#number22:checked + label {
background-color: #07d410;
box-shadow: 0 7px 10px #92ff97;
}#number23:checked + label {
background-color: #07d410;
box-shadow: 0 7px 10px #92ff97;
}#number24:checked + label {
background-color: #07d410;
box-shadow: 0 7px 10px #92ff97;
}#number25:checked + label {
background-color: #07d410;
box-shadow: 0 7px 10px #92ff97;
}#number26:checked + label {
background-color: #07d410;
box-shadow: 0 7px 10px #92ff97;
}#number27:checked + label {
background-color: #07d410;
box-shadow: 0 7px 10px #92ff97;
}#number28:checked + label {
background-color: #07d410;
box-shadow: 0 7px 10px #92ff97;
}#number29:checked + label {
background-color: #07d410;
box-shadow: 0 7px 10px #92ff97;
}#number30:checked + label {
background-color: #07d410;
box-shadow: 0 7px 10px #92ff97;
}#number31:checked + label {
background-color: #07d410;
box-shadow: 0 7px 10px #92ff97;
}#number32:checked + label {
background-color: #07d410;
box-shadow: 0 7px 10px #92ff97;
}#number33:checked + label {
background-color: #07d410;
box-shadow: 0 7px 10px #92ff97;
}#number34:checked + label {
background-color: #07d410;
box-shadow: 0 7px 10px #92ff97;
}#number35:checked + label {
background-color: #07d410;
box-shadow: 0 7px 10px #92ff97;
}#number36:checked + label {
background-color: #07d410;
box-shadow: 0 7px 10px #92ff97;
}#number37:checked + label {
background-color: #07d410;
box-shadow: 0 7px 10px #92ff97;
}#number38:checked + label {
background-color: #07d410;
box-shadow: 0 7px 10px #92ff97;
}#number39:checked + label {
background-color: #07d410;
box-shadow: 0 7px 10px #92ff97;
}#number40:checked + label {
background-color: #07d410;
box-shadow: 0 7px 10px #92ff97;
}#number41:checked + label {
background-color: #07d410;
box-shadow: 0 7px 10px #92ff97;
}#number42:checked + label {
background-color: #07d410;
box-shadow: 0 7px 10px #92ff97;
}#number43:checked + label {
background-color: #07d410;
box-shadow: 0 7px 10px #92ff97;
}#number44:checked + label {
background-color: #07d410;
box-shadow: 0 7px 10px #92ff97;
}#number45:checked + label {
background-color: #07d410;
box-shadow: 0 7px 10px #92ff97;
}
#_checkbox:checked + label:before {
  width: 0;
  height: 0;
}

#_checkbox:checked + label #tick_mark:before,
#_checkbox:checked + label #tick_mark:after {
  transform: translate(0);
  opacity: 1;
}