body {
  background-color: #eeeff3;
  display: block;
  width: 100%;
  float: left;
  position: relative;
  -webkit-overflow-scrolling: touch;
  font-family: "Open Sans", sans-serif;
  overflow-y: hidden;

  background-image:
    url(../images/bg-main-left.png), url(../images/bg-main-right.png),
    url(../images/bg-main.jpg);
  background-position:
    left center,
    right center,
    center center;
  background-size:
    contain,
    auto 87%,
    cover;
  background-repeat: no-repeat, no-repeat, repeat;

  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}
.hf {
  float: left;
  width: 100%;
}
.ns {
  width: 1200px;
  margin: 0 auto;
}
a:hover {
  color: inherit;
  text-decoration: none;
}

/* scroller */
i.shout-icon:before {
  content: url(../images/shout-icon.png);
}
.scroller .ns {
  position: relative;
}
.scroller i.shout-icon {
  position: absolute;
  left: 0;
  top: 7px;
}
.banner-container {
  position: relative;
}
.scroller {
  background: #061222;
  color: #fff;
  font-size: 13px;
  height: 34px;
  position: relative;
  bottom: 1px;
}
.scroller marquee {
  width: 100%;
  float: left;
  margin-left: 30px;
  position: relative;
  top: 7px;
}

/* slick */
.slick-slide img {
  width: 100%;
}
.slick-slider,
.slick-dotted.slick-slider {
  margin-bottom: -6px;
}
.slick-next {
  right: 30px;
}
.slick-next {
  right: 30px;
}
.slick-prev {
  left: 30px;
  z-index: 1;
}
.slick-dots {
  bottom: 15px;
}
/* slick end */

img {
  width: 100%;
}
.mainTabs {
  display: none;
  z-index: 1;
}
.mainTabs.active {
  display: block;
}
.logo {
  width: 7%;
  max-width: 144px;
  margin: 2% 0 0;
}
.centerer {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 70%;
  margin-bottom: -6%;
}
.centerBg {
  width: 75%;
  margin: 0 auto;
}
.centerBgCont {
  margin-top: 9%;
}
.preTitle {
  width: 23%;
  margin: -8% auto 0;
}
.mascot {
  width: 38%;
  margin: -2% auto 0;
}
.btn_store {
  position: absolute;
  top: 0;
  width: 27%;
  left: 5%;
  margin-top: 21%;
  cursor: pointer;
}
.btn_wlive {
  position: absolute;
  top: 0;
  width: 27%;
  left: 5%;
  margin-top: 27%;
  cursor: pointer;
}
.btn_wc {
  position: absolute;
  top: 0;
  width: 43%;
  left: 5%;
  margin-top: 34%;
  cursor: pointer;
}
.btn_tnc {
  position: absolute;
  top: 0;
  width: 31%;
  right: 6%;
  margin-top: 22%;
  cursor: pointer;
}
.btn_play {
  position: absolute;
  top: 0;
  width: 32%;
  right: 5%;
  margin-top: 30%;
  cursor: pointer;
}
.btn_play img {
  transition: 0.2s;
  scale: 1;
}
.btn_play:hover img {
  scale: 1.05;
}
.postTitle {
  width: 42%;
  margin: -11% auto 0;
}
.postUname {
  position: absolute;
  top: 0;
  width: 23%;
  left: 5%;
  margin-top: 3%;
}
.postUname span {
  color: #fff;
  position: absolute;
  top: 0;
  left: 0;
  font-size: 16px;
  text-transform: uppercase;
  text-align: center;
  width: 83%;
  margin: 0 8.5%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding-bottom: 1%;
  font-weight: 500;
}
.postChances {
  top: 0;
  width: 23%;
  left: 5%;
  margin-top: 9%;
}
.postChances span {
  color: #fff;
  position: absolute;
  top: 0;
  left: 0;
  font-size: 16px;
  text-transform: uppercase;
  text-align: center;
  width: 55%;
  margin: 0 8.5% 0 36.5%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  font-weight: 500;
}
.postRewards {
  position: absolute;
  top: 0;
  width: 17%;
  right: 8%;
  margin-top: 0;
  cursor: pointer;
}
.postTnc {
  position: absolute;
  top: 0;
  width: 29%;
  right: 9%;
  margin-top: 42%;
  cursor: pointer;
  z-index: 1;
}
.postLogout {
  position: absolute;
  top: 0;
  width: 22%;
  left: 14%;
  margin-top: 42%;
  cursor: pointer;
  z-index: 1;
}
.spinCont {
  position: relative;
  width: 41%;
  margin: -4% auto 0;
}
.spinWheel {
  position: absolute;
  top: 0;
  z-index: -1;
  width: 90%;
  margin-top: 12%;
  left: 50%;
  margin-left: -45%;
}

/* 5 rotations * 360 + 360 degrees final stop */
.spinWheel.spin0 {
  animation: spin0 5s ease-out 1 forwards;
}
@keyframes spin0 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(2160deg);
  }
}
.spinWheel.spin1 {
  animation: spin1 5s ease-out 1 forwards;
}
@keyframes spin1 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(2130deg);
  }
}
.spinWheel.spin2 {
  animation: spin2 5s ease-out 1 forwards;
}
@keyframes spin2 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(2100deg);
  }
}
.spinWheel.spin3 {
  animation: spin3 5s ease-out 1 forwards;
}
@keyframes spin3 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(2070deg);
  }
}
.spinWheel.spin4 {
  animation: spin4 5s ease-out 1 forwards;
}
@keyframes spin4 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(2040deg);
  }
}
.spinWheel.spin5 {
  animation: spin5 5s ease-out 1 forwards;
}
@keyframes spin5 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(2010deg);
  }
}
.spinWheel.spin6 {
  animation: spin6 5s ease-out 1 forwards;
}
@keyframes spin6 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(1980deg);
  }
}
.spinWheel.spin7 {
  animation: spin7 5s ease-out 1 forwards;
}
@keyframes spin7 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(1950deg);
  }
}
.spinWheel.spin8 {
  animation: spin8 5s ease-out 1 forwards;
}
@keyframes spin8 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(1920deg);
  }
}
.spinWheel.spin9 {
  animation: spin9 5s ease-out 1 forwards;
}
@keyframes spin9 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(1890deg);
  }
}
.spinWheel.spin10 {
  animation: spin10 5s ease-out 1 forwards;
}
@keyframes spin10 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(1860deg);
  }
}
.spinWheel.spin11 {
  animation: spin11 5s ease-out 1 forwards;
}
@keyframes spin11 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(1830deg);
  }
}

.spinBtn {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16%;
  margin-top: -4%;
  margin-left: -8%;
  cursor: pointer;
}
.modal-content {
  height: 100%;
  font-family: "Poppins", sans-serif;
  border: none;
}
.modal-dialog {
  max-width: none;
  margin-top: 6%;
}
#tncModal .modal-dialog {
  width: 467px;
  height: 540px;
}
#tncModal .modal-content {
  background-color: transparent;
  background-image: url(../images/modal-tnc.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
#tncModal .modal-body {
  height: 86%;
  padding: 0 12px 0 0;
  margin: 13% 4% 0;
  overflow: auto;
  flex: none;
  font-size: 14px;
  color: #000;
  font-family: "Poppins", sans-serif;
}
#tncModal .modal-body h3 {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 3px;
}
#tncModal .modal-body a {
  color: blue;
}
.btn-close {
  right: -20px;
  top: -20px;
  position: absolute;
  filter: invert(1);
}
#loginModal .modal-dialog {
  width: 767px;
  height: 540px;
}
#loginModal .modal-content {
  background-color: transparent;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
#loginModal .modal-body {
  height: 100%;
  padding: 0;
  margin: 0;
  flex: none;
  font-size: 14px;
}
#loginModal .modal-body h3 {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 3px;
}
#loginModal .modal-body a {
  color: blue;
}
.loginLogo {
  width: 12%;
  margin: 0 auto 2%;
}
.loginUname {
  width: 31%;
  top: 0;
  z-index: 1;
  left: 34%;
  margin-top: 30%;
}
.loginUname input {
  position: absolute;
  top: 0;
  left: 8%;
  width: 82%;
  text-align: center;
  color: #fff;
  background: transparent;
  border: none;
  outline: none;
  height: 100%;
}
.loginReg {
  top: 0;
  margin-top: 60%;
  color: #fff;
  width: 100%;
  text-align: center;
}
#loginModal .loginReg a {
  color: #ffc323;
}
.loginPlayBtn {
  width: 40%;
  top: 0;
  z-index: 1;
  left: 30%;
  margin-top: 40%;
  cursor: pointer;
}
.loginPlayBtn img {
  transition: 0.2s;
  scale: 1;
}
.loginPlayBtn:hover img {
  scale: 1.05;
}
#rewardsModal .modal-dialog {
  width: 600px;
  height: auto;
}
#rewardsModal .modal-content {
  background-color: transparent;
}
#rewardsModal .modal-body {
  height: 100%;
}

#resultModal .modal-dialog {
  width: 340px;
  height: auto;
}
#resultModal .modal-content {
  background-color: transparent;
}
#resultModal .modal-body {
  height: 100%;
}
.resultCont {
  position: absolute;
  background: #568201;
  top: 0;
  width: 80%;
  margin-top: 54%;
  left: 50%;
  margin-left: -40%;
  color: #fff;
  font-weight: 500;
  font-size: 14px;
  border-radius: 16px;
  line-height: 1;
  padding: 7px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  text-transform: uppercase;
}
.swal2-popup #swal2-content {
  font-size: 14px;
}
.swal2-popup .swal2-title {
  font-size: 22px;
}

@media only screen and (max-width: 1200px) {
  body {
    background-position:
      -20% center,
      179% 80%,
      center center;
    background-size:
      contain,
      67% auto,
      cover;
  }
  .centerer {
    width: 100%;
    margin-bottom: 0;
  }
  .logo {
    width: 18%;
  }
  .centerBgCont {
    margin-top: 13%;
  }
  .centerBg {
    width: 100%;
    margin: 0 auto;
  }
  .postTitle {
    width: 64%;
    margin: -14% auto 0;
  }
  .postUname span,
  .postChances span {
    font-size: 11px;
  }
  .postUname {
    width: 33%;
    left: 1%;
    margin-top: 13%;
  }
  .postChances {
    width: 27%;
    left: 1%;
    margin-top: 20.5%;
  }
  .postRewards {
    width: 25%;
    right: 0;
    margin-top: 8%;
  }
  .spinCont {
    width: 62%;
    margin: -2% auto 0;
  }
  .postLogout {
    width: 29%;
    left: 2%;
    margin-top: 76.5%;
  }
  .postTnc {
    width: 41%;
    right: 2%;
    margin-top: 76%;
  }
  .preTitle {
    width: 41%;
    margin: -10% auto 0;
  }
  .mascot {
    width: 60%;
    margin: 0 auto;
  }
  .btn_wc {
    width: 52%;
    left: 2%;
    margin-top: 71%;
  }
  .btn_wlive {
    width: 32%;
    left: 4%;
    margin-top: 63%;
  }
  .btn_store {
    width: 35%;
    left: 6%;
    margin-top: 55%;
  }
  .btn_play {
    width: 43%;
    right: 0%;
    margin-top: 51%;
  }
  .btn_tnc {
    width: 39%;
    right: 2%;
    margin-top: 72%;
  }
  #resultModal .modal-dialog {
    width: 340px;
    margin: 50% auto 5%;
  }
  #rewardsModal .modal-dialog {
    width: 95%;
    margin: 60% auto 5%;
  }
  .btn-close {
    right: 3px;
    top: -40px;
    z-index: 9;
  }
  #loginModal .modal-dialog {
    width: 100%;
    height: auto;
    margin: 50% auto 5%;
  }
  .loginUname {
    width: 42%;
    left: 29%;
    margin-top: 30%;
    font-size: 12px;
  }
  .loginPlayBtn {
    width: 46%;
    left: 26%;
    margin-top: 43%;
  }
  .loginReg {
    margin-top: 67%;
  }
  #tncModal .modal-dialog {
    width: 375px;
    height: 433px;
    margin: 40% auto 5%;
  }
  #tncModal .modal-body {
    height: 85%;
    padding: 0;
    margin: 15% 6% 0;
    font-size: 12px;
  }
  #tncModal .modal-body h3 {
    font-size: 14px;
  }
}