.boxbgoverlay {
    transition: initial;
    background: url("game/spinngame_wheel_template_lines_overlay.png");
    background-position: -10px -10px;
}





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



.box1 .span1 b {
  position: absolute;

  transform: rotate(200deg);
  text-align: center;
}

.box1 .span2 b {
  position: absolute;

  transform: rotate(-130deg);
}

.box1 .span3 b {
  position: absolute;

  transform: rotate(-90deg);
}

.box1 .span4 b {
  position: absolute;

  transform: rotate(-45deg);
}

.box1 .span5 b {
  position: absolute;

  transform: rotate(-15deg);
  text-align: center;
}

.box2 .span1 b {
  position: absolute;

  transform: rotate(200deg);
}

.box2 .span2 b {
  position: absolute;

  transform: rotate(-130deg);
  text-align: center;
}

.box2 .span3 b {
  position: absolute;

  transform: rotate(270deg);
}

.box2 .span4 b {
  position: absolute;

  transform: rotate(310deg);
}

.box2 .span5 b {
  position: absolute;

  transform: rotate(-20deg);
  text-align: center;
}











#spingame .mainbox {
  position: relative;
  width: 557px;
  height: 557px;
}

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


#spingame .box {
    width: 100%;
    height: 100%;
    position: relative;
    border-radius: 50%;
    /* border: 10px solid #949090; */
    overflow: hidden;
    transition: all ease-in-out 5s;
    transform: rotate(90deg);
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    outline: 12px solid white;
    outline-style: dotted !important;
    outline-offset: -7px;
}

#spingame span {
  width: 100%;
  height: 100%;
  display: inline-block;
  position: absolute;
}

.span1 {
  clip-path: polygon(0 17%, 0 50%, 50% 50%);
  background-color: green;
}

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

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

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

.span5 {
  clip-path: polygon(100% 18%, 100% 50%, 50% 50%);
  background: #004dc1;
}

.box2 .span3 {
  background-color: #00ff04;
}

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

.font {
  color: white;
  font-size: 17px;
  text-shadow: 0 1px 8px BLACK;
}

.box1 .span1 b {
  position: absolute;
  top: 39%;
  right: 74%;
  transform: rotate(198deg);
  text-align: center;
  font-size: 1.5vw;
}

.box1 .span2 b {
  position: absolute;
  top: 25%;
  right: 60%;
  text-align: center;
  font-size: 1.5vw;
  transform: rotate(-130deg);
}

.box1 .span3 b {
  position: absolute;
  top: 18%;
  right: 40%;
  text-align: center;
  font-size: 1.5vw;
  transform: rotate(-90deg);
}

.box1 .span4 b {
  position: absolute;
  top: 24%;
  right: 20%;
  font-size: 1.5vw;
  text-align: center;
  transform: rotate(-45deg);
}

.box1 .span5 b {
  position: absolute;
  top: 39%;
  right: 11%;
  font-size: 1.5vw;
  transform: rotate(-15deg);
  text-align: center;
}

.box2 .span1 b {
  position: absolute;
  top: 39%;
  right: 72%;
  text-align: center;
  transform: rotate(200deg);
  font-size: 1.5vw;
}

.box2 .span2 b {
  position: absolute;
  top: 24%;
  right: 62%;
  font-size: 1.5vw;
  transform: rotate(-130deg);
  text-align: center;
}

.box2 .span3 b {
  position: absolute;
  top: 17%;
  font-size: 1.5vw;
  right: 42%;
  transform: rotate(270deg);
}

.box2 .span4 b {
  position: absolute;
  top: 23%;
  right: 20%;
  text-align: center;
  font-size: 1.5vw;
  transform: rotate(310deg);
}

.box2 .span5 b {
  position: absolute;
  top: 39%;
  right: 10%;
  font-size: 1.5vw;
  transform: rotate(-17deg);
  text-align: center;
}

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

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

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

audio {
  display: none;
}

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

@media (max-width: 576px) {
  .mainbox {
    width: 100%;
    height: 50%;
  }
}


.span2 img {
    width: 170px !important;
    left: 73px;
    top: 61px;
    position: relative;
    transform: rotate(-95deg);
}


.span5 img {
    width: 176px !important;
    left: 389px;
    top: 139px;
    position: relative;
    transform: rotate(19deg);
}

.box2 .span1 > img {
    width: 170px !important;
    left: 26px;
    top: 161px;
    position: relative;
    transform: rotate(-128deg);
}

.box1 > span.font.span3 > img {
    width: 170px !important;
    left: 205px;
    top: 54px;
    position: relative;
    transform: rotate(-90deg);
}


#effect_canvas {
  height: 100%;
  width: 100%;
  position:fixed;
    left: 0;
    top: 0;
    z-index: 0;  
background-image: radial-gradient(#333, #111) !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed !important;
}

.winner-overlay {
    position: fixed;
    top: -50px !important;
    left: -355px;
    transition: 1s;
    padding: 0% 40% 0 30%;
    width: 100vw;
    height: 100vh;
    z-index: 2;
    display: none;
}





#gamewincont img {
    border: 10px solid #ffffff;
    border-radius: 8px;
    box-shadow: 0 -5px 35px #000;
}


#gamewincont {
    background: rgb(13,20,42);
    background: linear-gradient(0deg, rgb(13 20 42) 55%, rgba(54,57,83,1) 67%);
    padding: 25% 0 0 0;
    text-align: center;
    height:100vh;
    border-radius: 8px;
    margin-top: 40px;
    color: #ffffff;
    text-shadow: 0 5px 15px #000;
    height:100vh;
}

button.swal-button.swal-button--confirm {
    padding: 15px 20px;
    margin: 15px 7px 10px 7px;
    background: #12b90f;
    border: none;
    border-radius: 4px;
    font-size: 30px;
    color:#ffffff;
    box-shadow: 0 1px 4px #000000a6;
}

.swal-title {
    font-size: 30px;
    line-height: 1.6em;
}

#gamewincont {
    font-family: sans-serif;
    font-weight: 800;
}


/*image*/

#spingame .box b {
    opacity: 0;
        padding: 35px;
    margin: -35px;
}


.box1 .span1:before {
  content: "";
  position: absolute;
  width: 133%;
  height: 176%;
  top: -70%;
  left: -13%;
  z-index: -1;
  background: url(https://i.pinimg.com/736x/82/a1/49/82a14986908d78af8a5dd01845dc7588.jpg) 0 0 repeat;
  transform: rotate(210deg);
  background-size: 197px;
}

.box2 .span1:before {
  content: "";
  position: absolute;
  width: 133%;
  height: 176%;
  top: -70%;
  left: -13%;
  z-index: -1;
  background: url(https://i.pinimg.com/736x/82/a1/49/82a14986908d78af8a5dd01845dc7588.jpg) 0 0 repeat;
  transform: rotate(210deg);
  background-size: 197px;
}


.box1 .span2:before {
    content: "";
    position: absolute;
    width: 133%;
    height: 175%;
    top: -49%;
    left: -25%;
    z-index: -1;
    background: url(https://www.americanfootballinternational.com/wp-content/uploads/Slots359.jpg) 0 0 repeat;
    transform: rotate(230deg);
    background-size: 200px;
}


.box2 .span2:before {
    content: "";
    position: absolute;
    width: 133%;
    height: 175%;
    top: -49%;
    left: -25%;
    z-index: -1;
    background: url(https://www.americanfootballinternational.com/wp-content/uploads/Slots359.jpg) 0 0 repeat;
    transform: rotate(230deg);
    background-size: 200px;
}


.box1 .span3:before {
    content: "";
    position: absolute;
    width: 133%;
    height: 175%;
    top: -43%;
    left: -26%;
    z-index: -1;
    background: url(../ads-admin/game/1offcleaner.png) 0 0 repeat;
    transform: rotate(270deg);
    background-size: 335px;
}


.box2 .span3:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: -52%;
    left: -27%;
    z-index: -1;
    background: url(../ads-admin/game/10JULY4HP.png) 0 0 repeat;
    transform: rotate(270deg);
    background-size: 366px;
}


.box1 .span4:before {
    content: "";
    position: absolute;
    width: 123%;
    height: 128%;
    top: -35%;
    left: 74%;
    z-index: -1;
    background: url(../ads-admin/game/freecarwash.png) 54px 24px;
    transform: rotate(-49deg);
    background-size: 152px;
    background-repeat: no-repeat;
}


.box2 .span4:before {
    content: "";
    position: absolute;
    width: 119%;
    height: 119%;
    top: -19%;
    left: 7%;
    z-index: -1;
    background: url(../ads-admin/game/better-luck.png) 0 0 repeat;
    transform: rotate(313deg);
    background-size: 290px;
}



.box1 .span5:before {
    content: "";
    position: absolute;
    width: 204%;
    height: 175%;
    top: -28%;
    left: 0%;
    z-index: -1;
    background: url(../ads-admin/game/freeGLASSCLEANER.png) 0 0 repeat;
    transform: rotate(19deg);
    background-size: 175px;
}


.box2 .span5:before {
    content: "";
    position: absolute;
    width: 119%;
    height: 119%;
    top: -29%;
    left: 41%;
    z-index: -1;
    transform: rotate(381deg);
    background-size: 174px;
}



.box .font::before {
    background: transparent;
}

.box .font {    
background: url('');
background-size:cover;
}


span {
color:#fff;
}





.span1 {
  clip-path: polygon(0 17%, 0 50%, 50% 50%);
}

.span2 {
  clip-path: polygon(0 17%, 30% 0, 50% 50%);
}

.span3 {
  clip-path: polygon(30% 0, 71% 0, 50% 50%);
}

.span4 {
  clip-path: polygon(71% 0, 100% 18%, 50% 50%);
}

.span5 {
  clip-path: polygon(100% 18%, 100% 50%, 50% 50%);
}

.box2 .span3 {
}