@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500&family=Gothic+A1:wght@500&family=Lobster+Two:ital@1&family=Rajdhani:wght@500&display=swap');
/*body {
  background-size: cover !important;
  background:  url(img/background.jpg);
}*/
@import url('https://fonts.googleapis.com/css2?family=Luckiest+Guy&display=swap');

.wheeldialog {
  background: transparent !important;
  width: 100% !important;
  box-shadow: none !important;
  margin: 0px !important;
}
.wheeldialog .close {
  width: 100vw !important;
  height: 100vh !important;
  left: 0px !important;
  background: transparent !important;
  box-shadow: none !important;
}
.inputPre {
  margin-top: 170px !important;
}
/* .fireworks-container{visibility: hidden;} */
.triangle {
  /* background-image: url(img/gradient-bg.png); */
  clip-path: polygon(0 50%, 100% 100%, 100% 0);
  top: -43px;
  background-size: cover !important;
}

.spinbackground {
  position: absolute;
  width: 490px;
  left: calc(50% - 245px);
  top: 10px;
  z-index: 999;
}

.spinner-table {
  height: 410px;
  width: 410px;
  position: relative;
  border-radius: 100%;
  overflow: hidden;
  top: 88px;

  display: block;
  margin: auto;
}

.dial {
  height: 100%;
  transition: all 9s ease-in-out;
  animation-fill-mode: forwards;
  animation-timing-function: linear;
  /*-webkit-animation: rotation 0.4s ease-in-out linear 3;*/
}
.notransition {
  transition: all 0s ease-in-out;
}
.dial.spinning {
  animation-duration: 9s;
  animation-timing-function: cubic-bezier(0.44, -0.205, 0, 1.13);
  animation-name: spinning;
}

.dial.spin {
  -webkit-animation: rotation 0.4s ease-in-out linear 3;
  /*animation: rotation 1s linear 3;
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);*/
}

@-webkit-keyframes rotation {
  0% {
    -webkit-transform: rotate(0deg);
  }
  /*50%     { -webkit-transform: rotate(-180deg); }*/
  100% {
    -webkit-transform: rotate(2520deg);
  }
}

@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }
  /*50%     { transform: rotate(-180deg); }*/
  100% {
    transform: rotate(2520deg);
  }
}

.noreferral,
.needlogin {
  z-index: 99999999;
  position: fixed;
  padding: 40px;
  width: 400px;
  top: 29vh;
  left: calc(50% - 200px);
  text-align: center;
  border-radius: 5px;
  font-size: 24px;
  /* background: linear-gradient(270deg, #690c7c 0%, #2f0538 58.84%) */

  background: linear-gradient(180deg, #4b0165 0%, #9602ca 100%);
  box-sizing: border-box;
  box-shadow: 0px 4px 4px rgb(0 0 0 / 25%);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border-radius: 10px;
}
.noreferral h3,
.needlogin h3 {
  color: #fff;
}

/* .dial:before {
  content: "";
  text-align: center;
  display: block;
  line-height: 60px;
  position: absolute;
  height: 40px;
  width: 40px;
  background: white;
  box-shadow: 0 0 5px 5px rgba(0, 0, 0, 0.1);
  top: 50%;
  left: 50%;
  margin-top: -20px;
  margin-left: -20px;
  border-radius: 100%;
  z-index: 200;
} */

.dial .slice {
  z-index: 150;
  position: absolute;
  top: calc(50% - 54.814893px);
  height: 28%;
  left: 50%;
  width: 50%;
  color: white;
  text-align: right;
  padding-right: 10px;
  display: block;
  transform-origin: left center;
}

/* .dial .slice:nth-child(1){
  background:red !important
}
.dial .slice:nth-child(2){
  background:yellow !important
}
.dial .slice:nth-child(3){
  background:green !important
}
.dial .slice:nth-child(4){
  background:blue !important
}
.dial .slice:nth-child(5){
  background:black !important
}
.dial .slice:nth-child(6){
  background:grey !important
}
.dial .slice:nth-child(7){
  background:red !important
}
.dial .slice:nth-child(8){
  background:yellow !important
}
.dial .slice:nth-child(9){
  background:green !important
}
.dial .slice:nth-child(10){
  background:blue !important
}
.dial .slice:nth-child(11){
  background:black !important
}
.dial .slice:nth-child(12){
  background:grey !important
} */

/*
.dial .slice:before, .dial .slice:after {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
}
.dial .slice:before {
  margin-bottom: -1px;
  margin-top: -2px;
  border-width: 0 0 49.8148928635px 175px;
  border-color: transparent transparent #095B8D transparent;
}
.dial .slice:after {
  margin-top: -1px;
  margin-bottom: -2px;
  border-width: 0 175px 49.8148928635px 0;
  border-color: transparent #095B8D transparent transparent;
}
.dial .slice:nth-child(even):after {
  border-color: transparent #063c5d transparent transparent;
}
.dial .slice:nth-child(even):before {
  border-color: transparent transparent #063c5d transparent;
} */

.dial .slice .label {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 85%;
  line-height: 106px;
  padding-top: 1px;
  padding-bottom: 1px;
  font-size: 16px;
  text-align: right;
  padding-left: 20px;
}

.dial .slice:nth-child(1) {
  transform: rotate(-90deg);
}

.dial .slice:nth-child(2) {
  transform: rotate(-60deg);
}

.dial .slice:nth-child(3) {
  transform: rotate(-30deg);
}

.dial .slice:nth-child(4) {
  transform: rotate(0deg);
}

.dial .slice:nth-child(5) {
  transform: rotate(30deg);
}

.dial .slice:nth-child(6) {
  transform: rotate(60deg);
}

.dial .slice:nth-child(7) {
  transform: rotate(90deg);
}

.dial .slice:nth-child(8) {
  transform: rotate(120deg);
}

.dial .slice:nth-child(9) {
  transform: rotate(150deg);
}

.dial .slice:nth-child(10) {
  transform: rotate(180deg);
}

.dial .slice:nth-child(11) {
  transform: rotate(210deg);
}

.dial .slice:nth-child(12) {
  transform: rotate(240deg);
}

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

@keyframes spinning {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(330deg);
  }
}

.pointer {
  z-index: 999;
  display: block;
  margin: auto;
  width: 60px;
  position: absolute;
  top: 54px;
  left: calc(50% - 30px);
}

/* .triangle{
  clip-path:polygon(0% 50%, 100% -3%, 100% 102%, 0% 51%)
} */

.barImage {
  display: none;
}

.lity {
  background: rgba(0, 0, 0, 0.5);
}
.lity-content:after {
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
}
#spin {
  z-index: 999;
  position: absolute;
  left: calc(50% - 50px);
  top: calc(50% - 50px);
  cursor: pointer;
  transition: ease-in-out 0.2s;
  transform: scale(1);
  width: 100px;
}
#spin:hover {
  transition: ease-in-out 0.2s;
  transform: scale(1.1);
}
.termsandconditionLetter {
  font-family: 'Luckiest Guy', cursive !important;
  color: #fff;
  font-size: 26px;
  text-decoration: none;
  text-align: center;
  margin-top: 15px;
  display: block;
}
.inputText {
  width: 300px;
  line-height: 1.5;
  padding: 15px 10px;
  color: #fff;
  position: relative;
  font-size: 1.2em;
  text-align: center;
  background: #323232;
  border-radius: 5px;
  border: 2px solid rgba(255, 255, 255, 0.6);
  margin-top: 90px;
  margin-bottom: 15px;
  z-index: 999;
  display: block;
  margin: auto;
}
#RewardBox {
  position: fixed;
  top: 100px;
  z-index: 99999999;
  left: calc(50% - 240px);
  width: 480px;
}

.popupImage {
  max-width: 350px;
  max-height: 350px;
  display: block;
  margin: auto;
}
.OneHeartss {
  animation: bopB 1s 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards
    infinite alternate;
}
.winning {
  line-height: 0;
  margin: 0;
  font-size: 50px;
  padding: 0;
  color: white;
  font-family: 'Luckiest Guy', cursive !important;
  text-align: center;
  display: block;
  z-index: 9999999;
  position: relative;
  text-shadow: 0 0.1em 20px rgb(219 31 5), 0.05em -0.03em 0 rgb(219 31 5),
    0.05em 0.005em 0 rgb(219 31 5), 0em 0.08em 0 rgb(219 31 5),
    0.05em 0.08em 0 rgb(219 31 5), 0px -0.03em 0 rgb(219 31 5),
    -0.03em -0.03em 0 rgb(219 31 5), -0.03em 0.08em 0 rgb(219 31 5),
    -0.03em 0 0 rgb(219 31 5);
}
.winning h3 {
  font-family: 'Luckiest Guy', cursive !important;
  color: #fff;
  line-height: 67px;
  font-size: 45px;
}
.winning span {
  transform: scale(0.9);
  display: inline-block;
}
.winning span:first-child {
  -webkit-animation: bop 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards
    infinite alternate;
  animation: bop 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards infinite
    alternate;
}
.winning span:last-child {
  -webkit-animation: bopB 1s 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275)
    forwards infinite alternate;
  animation: bopB 1s 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards
    infinite alternate;
}
@-webkit-keyframes bop {
  0% {
    transform: scale(0.9);
  }

  50%,
  100% {
    transform: scale(1);
  }
}
@keyframes bop {
  0% {
    transform: scale(0.9);
  }

  50%,
  100% {
    transform: scale(1);
  }
}
@-webkit-keyframes bopB {
  0% {
    transform: scale(0.9);
  }

  80%,
  100% {
    transform: scale(1.3) rotateZ(-10deg);
  }
}
@keyframes bopB {
  0% {
    transform: scale(0.9);
  }

  80%,
  100% {
    transform: scale(1.3) rotateZ(-10deg);
  }
}
.coolBtn {
  position: relative;
  background-color: rgba(219, 87, 51, 1);
  color: rgba(255, 255, 255, 1);
  font-family: 'Gothic A1', sans-serif;
  font-weight: bold;
  font-size: 20px;
  text-decoration: none;
  display: block;
  padding: 4px;
  border-radius: 8px;
  box-shadow: 0 9px 0 rgb(219 31 5), 0px 9px 25px rgb(0 0 0 / 70%);
  margin: 20px auto;
  padding: 11px 44px;
  text-align: center;
  border: none;
  width: 250px;
  z-index: 999999999;
  cursor: pointer;
  margin-bottom: 29px !important;
}
.RedeemBox {
  margin-top: 40px !important;
}
.fixedBtn {
  padding: 5px 44px;
  border-radius: 50px;
  width: 50px;
  height: 44px;
  line-height: 29px;
  padding: 0px;
  position: fixed;
  right: 22px;
  bottom: 0;
  cursor: pointer;
  z-index: 9999;
}
.fixedBtn img {
  filter: invert();
}
.playagain {
  background-color: transparent;
  font-family: 'Luckiest Guy', cursive !important;
  color: #fff;
  font-size: 24px;
  text-align: center;
  display: block;
  margin: auto;
  border: none;
}
.fireworkSection {
  z-index: 10900;
  position: relative;
}
.lity-content {
  z-index: 999999 !important;
}
/* .fireworks-container{visibility: hidden;} */
#termsandconditionBox {
  max-height: 80vh !important;
  overflow: scroll;
  max-width: 60vw;
  border-radius: 10px;
}

#example {
  padding-top: 5vh;
  color: white;
  height: 100vh !important;
  width: 100vw !important;
  position: absolute !important;
}
.fireworks-container {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 9999999;
}
#confetti-canvas {
  display: block;
  z-index: 9999 !important;
  pointer-events: none;
  position: absolute !important;
  top: 0px !important;
}
.soundBtn {
  bottom: 76px;
}
@media only screen and (max-width: 1000px) {
  .spinbackground {
    position: absolute;
    width: 468px;
    left: calc(50% - 240px);
    top: 25px;
  }
  .spinbackgroundReferal {
    position: absolute;
    width: 468px;
    left: calc(50% - 240px);
    top: 25px;
  }
  #spin {
    width: 80px;
    top: calc(50% - 40px);
    left: calc(50% - 40px);
  }
  .pointer {
    left: calc(50% - 33px);
    width: 62px;
  }

  #termsandconditionBox {
    max-height: 80vh !important;
    overflow: scroll;
    max-width: 70vw;
    border-radius: 10px;
  }
}

@media only screen and (max-width: 700px) {
  .slice {
    height: 29% !important;
  }
  .spinner-table {
    height: 400px;
    width: 400px;
  }
  .spinbackground {
    position: absolute;
    width: 467px;
    left: calc(50% - 240px);
    top: 24px;
  }
  .spinbackgroundReferal {
    position: absolute;
    width: 467px;
    left: calc(50% - 240px);
    top: 24px;
  }

  #spin {
    width: 80px;
    top: calc(50% - 40px);
    left: calc(50% - 40px);
  }
  .dial .slice .label {
    font-size: 20px !important;
    line-height: 112px;
  }
  .pointer {
    width: 50px;
    left: calc(50% - 25px);
    top: 61px;
  }
  #termsandconditionBox {
    max-height: 80vh !important;
    overflow: scroll;
    max-width: 80vw;
    border-radius: 10px;
  }
  /* .fireworks-container{visibility: hidden;} */
}

@media screen and (max-width: 500px) {
  .spinner-table {
    height: 310px;
    width: 310px;
    top: 83px;
  }
  #spin {
    width: 60px;
    top: calc(50% - 30px);
    left: calc(50% - 30px);
  }
  .spinbackground {
    position: absolute;
    width: 376px;
    left: calc(50% - 190px);
    top: 24px;
  }
  .spinbackgroundReferal {
    position: absolute;
    width: 370px;
    left: calc(50% - 187px);
    margin-top: 19px
  }
  .dial .slice .label {
    font-size: 17px !important;
    line-height: 89px;
  }
  .dial .slice {
    top: calc(50% - 41.814893px);
  }
  .RewardHeadingBox {
    font-size: 36px;
  }
  .complain {
    height: 480px;
  }
  .lightning {
    overflow: hidden;
    width: 100vw;
    position: absolute;
    height: 100vh;
    left: 0px;
    top: 0px;
  }
  #termsandconditionBox {
    max-height: 80vh !important;
    margin-top: 150px !important;
    overflow: scroll;
    max-width: 90vw;
    border-radius: 10px;
  }
  .fireworks-container {
    visibility: hidden;
  }
}

@media screen and (max-width: 400px) {
  .spinbackground {
    position: absolute;
    width: 276px;
    left: calc(50% - 140px);
    top: 24px;
  }
  .spinbackgroundReferal {
    position: absolute;
    width: 276px;
    left: calc(50% - 140px);
    top: 24px;
  }

  .spinner-table {
    height: 235px;
    width: 235px;
    top: 62px;
  }
  .dial .slice {
    top: calc(50% - 28.814893px) !important;
  }
  .dial .slice .label {
    font-size: 15px !important;
    line-height: 62px;
    padding-left: 12px;
  }
  .pointer {
    width: 35px;
    left: calc(50% - 15px);
    top: 44px;
  }
  .inputText {
    width: 200px;
    font-size: 1em;
    padding: 8px 10px;
  }
  .termsandconditionLetter {
    font-size: 18px;
  }
  .complain {
    height: 355px !important;
  }
  .RewardHeadingBox {
    font-size: 20px;
  }
  .popupImage {
    max-width: 250px;
    max-height: 250px;
  }
  .lity-content {
    position: relative;
    top: -150px;
  }
  .lightning {
    overflow: hidden;
    width: 100vw;
    position: absolute;
    height: 100vh;
  }
  #spin {
    width: 50px;
    top: calc(50% - 25px);
    left: calc(50% - 25px);
  }
  .dial .slice .label {
    width: 84%;
  }
  .loadingDivc {
    font-family: 'Luckiest Guy', cursive !important;
    background: rgba(0, 0, 0, 0.5);
    position: absolute;
    width: 100vw;
    height: 100vh;
    top: 0px;
    z-index: 99999;
    text-align: center;
    display: grid;
    align-items: center;
    font-size: 50px;
    color: #fff;
  }
  .winning h3 {
    font-size: 35px !important;
  }
  .noreferral,
  .needlogin {
    padding: 20px;
    width: 320px;
    top: 100px;
    left: calc(50% - 160px);
  }
}

.closeoverlayBtn {
  background: #fff;
  width: 30px;
  height: 30px;
  display: block;
  border-radius: 40px;
  font-size: 22px;
  text-align: center;
  position: absolute;
  right: -15px;
  top: -15px;
  cursor: pointer;
}

.backtoSite {
  font-family: 'Luckiest Guy', cursive !important;
  color: #fff;
  left: calc(50% - 88px);
  position: relative;
  z-index: 9999;
  font-size: 30px;
  top: 175px;
  cursor: pointer;
}
.backtoSite a {
  font-family: 'Luckiest Guy', cursive !important;
  color: #fff;
}

.backtoSiteTwo {
  font-family: 'Luckiest Guy' !important;
  color: #fff;
  left: calc(50% - 88px);
  position: relative;
  z-index: 9999;
  font-size: 30px;

  cursor: pointer;
}
.backtoSiteTwo a {
  font-family: 'Luckiest Guy', cursive !important;
  color: #fff;
}

.spinning_wheel {
  cursor: pointer;
}

.noreferralData h3,
.noreferralData h4 {
  color: #ffe600;
  font-family: Rationale, 'sans-serif' !important;
}

/*
.modalbg .dialog{
top: calc(50% - 300px) !important; 
}
*/

.snowflakes,
#confetti-canvas {
  z-index: 99999999 !important;
  position: absolute !important;
}

.RewardBoxOverlay {
  background: rgba(0, 0, 0, 0.7);
  position: fixed;
  width: 100%;
  height: 100vh;
  top: 0px;
  z-index: 999999;
}

.lightning {
  position: fixed;
  top: 0px;
  right: 50%;
  z-index: 99999999;
}
.lightss {
  width: 300px;
  width: 300px;
  position: absolute;
  display: block;
  margin: auto;
  margin-top: -411px;
  left: calc(50% - 150px);
  z-index: 9999;
}
.LightningOne {
  left: calc(50% - 412px);
  animation: rotate-animation 6s infinite linear;
}
.LightningTwo {
  left: calc(50% - 258px);
  animation: rotate-animation 4s infinite linear;
}
.LightningFour {
  left: calc(50% - 36px);
  animation: rotate-animation-two 4s infinite linear;
}
.LightningFive {
  right: calc(50% - 600px);
  animation: rotate-animation-two 6s infinite linear;
}

@keyframes rotate-animation {
  0% {
    transform: rotate(344deg);
  }
  50% {
    transform: rotate(323deg);
  }
  100% {
    transform: rotate(344deg);
  }
}
@keyframes rotate-animation-two {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(36deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

@media screen and (max-width: 400px) {
  .lightss {
    width: 175px;
    margin-top: -236px;
  }
  .LightningTwo {
    left: calc(50% - 137px);
  }
  .LightningFive {
    right: calc(50% - 400px);
  }
  .LightningOne {
    left: calc(50% - 217px);
  }
}

.heart {
  animation: beat 0.5s /*infinite*/ alternate;
}
@keyframes beat {
  to {
    transform: scale(1.1);
  }
}
.pointerSpin {
  animation-timing-function: linear, ease-in-out;
  animation-duration: 6s;
  animation: pointerspinn 0.25s infinite alternate;
}
@keyframes pointerspinn {
  /* to { transform: scale(1.16); } */
  0% {
    -webkit-transform: rotateZ(-5deg);
    transform: rotateZ(-5deg);
  }
  50% {
    -webkit-transform: rotateZ(5deg);
    transform: rotateZ(5deg);
  }
  100% {
    transform: rotateZ(-5deg);
    -webkit-transform: rotateZ(-5deg);
  }
}

.wheel {
  -webkit-animation: spin 1s linear infinite; /* Safari browser */
  animation: spin 1s linear infinite;
}

/* for Safari browser  */
@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.winnerBg {
  background: url('img/winnerImage.png');
}
#openModalTwo {
  padding-top: 17vh !important;
}
.dialog .close {
  opacity: 1 !important;
}

/* Wheel spin */
.spinning_wheel {
  position: fixed;
  right: -42.5px;
  top: 57%;
  transition: 0.3s;
}
.spinning_wheel img {
  width: 85px;
  height: 85px;
  animation: wheel-clockwise 4s infinite linear;
}

.spinning_wheel:hover {
  transform: scale(1.2);
}

@keyframes wheel-clockwise {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(359deg);
  }
}

@media screen and (max-width: 552px) {
  .spinning_wheel {
    transform: scale(0.7);
  }
}