#spinWeel .modal-dialog .modal-content {
  background-image: linear-gradient(to bottom, #010201, #090908, #11100f, #161514, #1a1919, #1f1e1e, #242222, #292727, #302d2d, #373434, #3e3a3b, #454142);
  max-width: 50% !important;
  padding: 25px;
  height: 100%;
  margin: auto;
  border: 1px solid #fff;
  position: relative;
  overflow: hidden !important;
}

button.close {
  position: absolute;
  right: 30px;
  top: 15px;
}

.is-sticky .secondary-header .countdown {
  position: relative !important;
  top: -1rem !important;
  margin: auto !important;
  width: fit-content;
  left: 0;
  transform: none;
}

.secondary-header .countdown { 
  background-image: linear-gradient(to right, #BF1E2E, #79081f); 
  padding: 10px; 
  width: fit-content; 
  margin: auto; 
  position: absolute; 
  top: -2rem; 
  left: 50%; 
  transform: translateX(-50%); 
  -webkit-transform: translateX(-50%); 
  -moz-transform: translateX(-50%); 
  -ms-transform: translateX(-50%); 
  -o-transform: translateX(-50%);
}

.secondary-header .countdown h3 {
  font-size: 20px;
  margin-bottom:0px;
  line-height:30px;
  margin-right:5px;
}

.secondary-header .countdown .timer {
  font-size: 13px !important;
  display:flex;
  align-items:center;
}

.secondary-header .countdown .timer {
  border:0px
}

.countdown {
  color: #fff !important;
  text-align: center;
}

.countdown {
  display: flex;
  justify-content: center;
  gap:20px;
  margin-bottom:0px;
}

.countdown .timer {
  border:1px solid #fff;
  width:100px;
}

.countdown .timer h3 {
  color: #fff !important;
  margin-bottom:0px;
}

#spinWeel .modal-header .close {
  color: #fff;
  opacity: 1;
}

div#spinWeel .modal-dialog {
  min-width: 100% !important;
  height: 100%;
  margin: 0;
}

.mainbox {
  position: relative;
  width: 700px;
  height: 700px;
  margin: auto;
  transform: scale(0.9);
}

.box {
  width: 100%;
  height: 100%;
  position: relative;
  border-radius: 50%;
  border: 10px solid #606161;
  overflow: hidden;
  transition: all ease 5s;
  /* transform: scale(0.8); */
}

.box1 span ,.box2 span{
width: 50%;
height: 50%;
display: inline-block;
position: absolute;
}

.span1{
clip-path: polygon(0 92%, 100% 50%, 0 8%);
top: 175px;
left: 0;
background-color: #ffeb3b;
}

.span2{
clip-path: polygon(100% 92%, 0 50%, 100% 8%);
top: 165px;
right: 0;
background-color: #e91e63;
}

.span3{
clip-path: polygon(50% 0%, 8% 100%, 92% 100%);
bottom: 0;
left: 175px;
background-color: #4caf50;
}

.span4{
clip-path: polygon(50% 100%, 92% 0, 8% 0);
top: 0;
left: 165px;
background-color: #3f51b5;
}

.span5{
clip-path: polygon(50% 100%, 92% 0, 8% 0);
top: 0;
left: 160px;
background-color: #3f51b5;
}

.span6{
clip-path: polygon(50% 100%, 92% 0, 8% 0);
top: 0;
left: 180px;
background-color: #3f51b5;
}

/*SPAIN COLORS*/

.box1 .span3, .box1 span.span4 {
  background-image: linear-gradient(to right bottom, #777474, #7e7c7c, #858384, #8d8b8c, #949394, #9a9a9b, #a1a0a1, #a7a7a8, #aeaeaf, #b4b5b6, #bbbdbd, #c2c4c4);
  color: #fff !important;
}

.box1 span.span1, .box1 span.span2 {
  background-color: #fff;
}

.box2 span.span1, .box2 span.span2, .box2 span.span3, .box2 span.span4 {
  background-image: linear-gradient(to right, #bf061e, #b8061e, #b1061e, #ab071d, #a4071d, #9e071d, #97061c, #91061c, #89061c, #82061c, #7a071b, #73071b);
  color: #fff;
}

/*SPAIN COLORS*/

/*EXTRAS*/
.box1 .span3 b, 
.box2 .span3 b {
  transform: translate(-60%, -50%) rotate(-270deg) !IMPORTANT;
}

.box1 .span2 b, 
.box2 .span2 b {
  transform: translate(-20%, -20%) rotate(-360deg);
}

.box1 .span1 b, 
.box2 .span1 b {
  transform: translate(-70%, -70%) rotate(180deg);
}

.box1 .span4 b, 
.box2 .span4 b {
  transform: translate(-45%, -50%) rotate(-90deg);
}

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

span b {
  width: 60%;
  height: 65px;
  line-height: 25px;
  border-radius: 50%;
  font-size: 20px;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

span.font-sm {
  width: auto !important;
  height: auto;
  display: block;
  position: unset !important;
  font-size: 16px !important;
  line-height: 16px;
}

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

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

.box span.active {
  background-image: linear-gradient(to right top, #54ec3c, #53e744, #52e34b, #51de51, #51d957, #4fd456, #4ecf56, #4cca55, #47c34f, #42bc49, #3db643, #38af3d);
  color: #fff;
}

.weelPriceAwardedForm form {
  width: 80%;
  margin: auto;
  background-color: #fff;
  padding: 50px;
  border-radius: 15px !important;
  margin-top: 30px;
}

#spin-offer-status {
display: none;
border: 1px solid;
padding: 5px;
margin-top: 15px;
}
#spinWeel .modal-header .close {
    z-index: 999;
}
@media screen and (max-width: 1680px) {
 div#mainbox {
    transform: scale(0.6) translateY(-25%) translateX(-5%) !important;
    /*width:600px;*/
    /*height:600px;*/
}
 div#mainbox + h4{
    transform: translateY(-200px) !important;
     
 }
/*.mainbox {*/
/*    transform: scale(0.75) !important;*/
/*    }*/
/*div#mainbox {*/
/*  width: 600px;*/
/*  height: 600px;*/
/*}*/
/*.span1 {*/
/*  top: 150px;*/
/*}*/
/*.span2 {*/
/*  top: 140px;*/
/*}*/
/*.span3 {*/
/*  left: 150px;*/
/*}*/
/*.span4 {*/
/*  left: 140px;*/
/*}*/
}

@media screen and (max-width: 1440px) {}

@media screen and (max-width: 1366px) {
     div#mainbox {
        transform: scale(0.6) translateY(-25%) translateX(-15%) !important;
         
     }
     .timer h3 {
    font-size: 28px !important;
    line-height: 34px !important;
}
#spinWeel .modal-dialog .modal-content {
    padding-top: 0px;
}
section#spin_wheel_sec > h4 {
    font-size: 1rem;
}
section#spin_wheel_sec > h4 + p {
    font-size: 1rem;
}
    div#mainbox + h4 {
    transform: translateY(-225px) !important;
}
}

@media screen and (max-width: 1280px) {
  #spinWeel .modal-dialog .modal-content {
    max-width: 60% !important;
    overflow: scroll !important;
}
div#mainbox {
    transform: scale(0.6) translateY(-25%) translateX(-3%) !important;
}
}

@media screen and (max-width: 1024px) {
  #spinWeel .modal-dialog .modal-content {
    max-width: 80% !important;
}
}

@media screen and (max-width: 991px) {
  .weelPriceAwardedForm form {
    width: 100%;
}
.secondary-header .countdown h3 {
  font-size: 18px !important;
}
}

@media screen and (max-width: 800px) {
  div#mainbox {
    width: 500px;
    height: 500px;
}
span b {
  font-size: 16px !important;
}
span.font-sm {
  width: max-content;
  font-size: 14px !important;
  left: 20px;
  position: relative !important;
}
div#mainbox {
  width: 500px;
  height: 500px;
}
.span1 {
  top: 125px;
}
.span2 {
  top: 112px;
}
.span3 {
  left: 125px;
}
.span4 {
  left: 113px;
}
.box1 .span2 b, .box2 .span2 b {
  transform: translate(-28%, -23%) rotate(-360deg);
}
.box1 .span3 b, .box2 .span3 b {
  transform: translate(-58%, -25%) rotate(-270deg) !IMPORTANT;
}
div#mainbox + h4 {
    transform: translateY(-135px) !important;
}
}

@media screen and (max-width: 768px) {}

@media screen and (max-width: 767px) {
    div#mainbox {
    transform: scale(0.6) translateY(-25%) translateX(-32%) !important;
}
}

@media screen and (max-width: 480px) {
  div#mainbox {
    width: 300px;
    height: 300px;
}
.spin {
  width: 60px;
  height: 60px;
  font-size: 15px;
}
div#mainbox {
  width: 380px;
  height: 380px;
}
#spinWeel .modal-dialog .modal-content {
  max-width: 100% !important;
}
.box1 .span2 b, .box2 .span2 b {
  transform: translate(-45%, -25%) rotate(-360deg);
}
.box1 .span1 b, .box2 .span1 b {
  transform: translate(-60%, -60%) rotate(180deg);
}
.box1 .span3 b, .box2 .span3 b {
  transform: translate(-55%, -25%) rotate(-270deg) !IMPORTANT;
}
.span1 {
  top: 85px;
}
.span2 {
  top: 90px;
}
.span3 {
  left: 91px;
}
.span4 {
  left: 92px;
}
span.font-sm, span b {
  font-size: 12px !important;
}
div#mainbox {
    transform: scale(0.6) translateY(-25%) translateX(-8%) !important;
}
div#mainbox + h4 {
    transform: translateY(-100px) !important;
}
}

@media screen and (max-width: 414px) {}

@media screen and (max-width: 375px) {}

@media screen and (max-width: 360px) {}