.price-wheel.mainbox {
  position: relative;
  width: 500px;
  height: 500px;
}

.price-wheel.mainbox:after {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  background: url(../niswebtech-img/arrow-bottom.png) no-repeat;
  background-size: 5%;
  left: 5%;
  top: 48%;
  transform: rotate(90deg);
}

.price-wheel .box {
  width: 100%;
  height: 100%;
  position: relative;
  border-radius: 50%;
  border: 10px solid #d9d8d8;
  overflow: hidden;
  transition: all ease-in-out 5s;
  transform: rotate(90deg);
}

.price-wheel span {
  width: 100%;
  height: 100%;
  display: inline-block;
  position: absolute;
  color: #fff;
  font-size: 16px;
}

.price-wheel .font {
  font-size: 14px;
}

.price-wheel .span1 {
  clip-path: polygon(0 17%, 0 50%, 50% 50%);
  background-color: #FFC312;
}

.price-wheel .span2 {
  clip-path: polygon(0 17%, 30% 0, 50% 50%);
  background-color: #F79F1F;
}

.price-wheel .span3 {
  clip-path: polygon(30% 0, 71% 0, 50% 50%);
  background-color: #EE5A24;
}

.price-wheel .span4 {
  clip-path: polygon(71% 0, 100% 18%, 50% 50%);
  background-color: #fa8231;
}

.price-wheel .span5 {
  clip-path: polygon(100% 18%, 100% 50%, 50% 50%);
  background: #006266;
}

.price-wheel .span6 {
  clip-path: polygon(0 17%, 0 50%, 50% 50%);
  background-color: #009432;
}

.price-wheel .span7 {
  clip-path: polygon(0 17%, 30% 0, 50% 50%);
  background-color: #A3CB38;
}

.price-wheel .span8 {
  clip-path: polygon(30% 0, 71% 0, 50% 50%);
  background-color: #1B1464;
}

.price-wheel .span9 {
  clip-path: polygon(71% 0, 100% 18%, 50% 50%);
  background-color: #ED4C67;
}

.price-wheel .span10 {
  clip-path: polygon(100% 18%, 100% 50%, 50% 50%);
  background: #6F1E51;
}


.price-wheel .box2 {
  width: 100%;
  height: 100%;
  transform: rotate(180deg);
}

.price-wheel .price-wheel .font {
  color: white;
  font-size: 20px;
}

.price-wheel .box1 .span1 b {
  position: absolute;
  top: 38%;
  right: 69%;
  transform: rotate(200deg);
}

.price-wheel .box1 .span2 b {
  position: absolute;
  top: 23%;
  right: 59%;
  transform: rotate(-130deg);
}

.price-wheel .box1 .span3 b {
  position: absolute;
  top: 15%;
  right: 37%;
  transform: rotate(-90deg);
}

.price-wheel .box1 .span4 b {
  position: absolute;
  top: 22%;
  right: 13%;
  transform: rotate(-45deg);
}

.price-wheel .box1 .span5 b {
  position: absolute;
  top: 38%;
  right: 6%;
  transform: rotate(-15deg);
}

.price-wheel .box2 .span1 b {
  position: absolute;
  top: 38%;
  right: 68%;
  transform: rotate(200deg);
}

.price-wheel .box2 .span2 b {
  position: absolute;
  top: 24%;
  right: 58%;
  transform: rotate(-130deg);
}

.price-wheel .box2 .span3 b {
  position: absolute;
  top: 15%;
  right: 37%;
  transform: rotate(270deg);
}

.price-wheel .box2 .span4 b {
  position: absolute;
  top: 23%;
  right: 17%;
  transform: rotate(310deg);
}

.price-wheel .box2 .span5 b {
  position: absolute;
  top: 38%;
  right: 12%;
  transform: rotate(-20deg);
}

.price-wheel .spin {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 75px;
  height: 75px;
  border-radius: 50%;
  border: 4px solid white;
  background-color: #ff5722;
  color: #fff;
  box-shadow: 0 5px 20px #000;
  font-weight: bold;
  font-size: 22px;
  cursor: pointer;
  z-index: 1000;
}

.price-wheel .spin:active {
  width: 70px;
  height: 70px;
  font-size: 20px;
}

.price-wheel .mainbox.animate:after {
  animation: animateArrow 0.7s ease infinite;
}

audio {
  display: none;
}

@keyframes animateArrow {
  50% {
    right: -50px;
  }
}

@media (max-width: 576px) {
  .price-wheel .mainbox {
    width: 100%;
    height: 50%;
  }
}
@media only screen and (max-width: 767px) {
.price-wheel.mainbox {
    position: relative;
    width: 340px;
    height: 340px;
}
.price-wheel .font {
  font-size: 10px;
}

}