@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@400;600;700;800&display=swap');
/* @import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@600&display=swap'); */

:root{
  --bg: #4B47A9;
  --content-c: #000;
  --content-c-invert: #FFF;
  --footer-bg: #453D98;
  --footer-c: #FFF;

  --popup-backdrop-bg: #000000E6;
  --popup-content-bg: linear-gradient(#4B47A9CC,#4B47A9);
  --red-circle-bg: #56B6DB;
  --red-circle-c: #000;
  --popup-inner-h2-c: #FFF;
  --popup-inner-h2-s: #00000029;
  --popup-inner-h4-c: #FFF;
  --popup-inner-h5-c: #FFF;
  --pz-popup-inner-h2-c: #FFF;
  --pz-red-circle-bg: #56B6DB;
  --pz-red-circle-c: #000;
  --pj-red-circle-bg1: #FDA700;
  --pj-red-circle-c1: #FFF;
  --pj-red-circle-bg2: #FFD500;
  --pj-red-circle-c2: #000;

  --wheely-core-bg: #01A7FF;
  --wheely-core-bo: #E8E8E8;
  --wheely-bo: #FFF;
  --wheely-text-h5: #FFF;

  --color-slice-1: #56B6DB;
  --color-slice-2: #5D6FE0;
  --color-slice-3: #56B6DB;
  --color-slice-4: #5D6FE0;
  --color-slice-5: #56B6DB;
  --color-slice-6: #5D6FE0;
}

main{
  font-family: 'Nunito Sans', sans-serif;
}
.burst{
  opacity: .1;
}
.content{
  background: none;
}
.wheely-header{
  background: url("https://ne.tykcdn.com/assets/wheely/funjpop/header.png") no-repeat center center;
  background-size: cover;
}
.prize .text {
  font-size: var(--fsize8);
}
.btn-spin-inner{
  background: url("https://s.tykcdn.com/assets/wheely/fk/btn_putar.svg") no-repeat center bottom;
  background-size: contain;
}
.path-putar{
  background: url("https://s.tykcdn.com/assets/wheely/gacha/btn_putar_txt.svg") no-repeat center center;
  background-size: contain;
}
.btn-tutup-inner{
  background: url("https://ne.tykcdn.com/assets/wheely/funjpop/btn_oke.svg") no-repeat center center;
  background-size: contain;
}
/*====*/
.popup-inner h2{
  letter-spacing: 0;
}
.popup-inner .h4-5{
  line-height: 1.1;
}
.popup-inner .h4-5 span{
  display: inline-flex;
}
.popup-zonk .red-circle-sm{
  display: none;
}
.popup-inner h5{
  font-family: 'Nunito Sans', sans-serif;
}
.red-circle-sm{
  display: none;
}
.red-circle-text{
  display: flex;
}
.ticker-inner{
  background: url("https://ne.tykcdn.com/assets/wheely/funjpop/pointer.svg") no-repeat left center;
  background-size: contain;
}

/*====*/
.theming, .popup-theming{
  display: none;
}

/*page*/
/*burst*/
.burst{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    height: 100%;
    min-height: 300vh;
    width: 100%;
    min-width: 300vw;
    opacity: .1;
}
.burst > div{
    background: url('https://s.tykcdn.com/assets/susun/burst.svg') no-repeat center center;
    background-size: cover;
    height: 100%;
    animation: Spin 22s linear infinite;
}
@keyframes Spin{
    0%{transform: rotate(0deg)}
    100%{transform: rotate(360deg)}
}
/*end burst*/

.modal{
    z-index: 10001;
}
.modal-spin{
    color: #FFF;
}
.modal-spin .modal-content{
    background: #4B47A9;
    border-radius: 25px;
    padding:  4.25rem 1rem 2.15rem;
    max-width: 350px;
    margin: 0 auto;
    overflow: hidden;
}
.modal-spin .modal-content h1{
    font-weight: 300;
    line-height: .9;
}
.modal-spin .modal-content h4{
    font-weight: 300;
    line-height: 1;
}
.modal-spin .modal-content h4 b{
    font-weight: 500;
    font-style: italic;
}
.modal-spin .modal-content .btn{
    background: #FA3D8D;
    border: 3px solid #FF64A5;
    color: #FFF;
    border-radius: 20px;
    font-size: 1.1rem;
    font-weight: 600;
    width: -moz-max-content;
    width: max-content;
    padding: .15rem 1rem;
    min-width: 7.5rem;
    margin: 2rem auto 0;
}

/*floating*/
.flt-wrap{
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: 32.5%;
    width: 100%;
    max-width: 480px;
    z-index: 999;
}
.flt{
    position: absolute;
    right: 0;
    width: 100%;
    max-width: 4rem;
}
.flt-inner{
    display: block;
    padding-bottom: 110.2%;
    background: url('https://ne.tykcdn.com/assets/wheely/funjpop/flt.png') no-repeat center center;
    background-size: contain;
    animation: Flt ease infinite 1.5s;
}
@keyframes Flt{
    0%{transform:scale(1,1)translateY(0px)}
    8.5%{transform:scale(1.1,.9)translateY(0px)}
    17%{transform:scale(.9,1.1)translateY(-10px)}
    25.5%{transform:scale(1,1)translateY(0px)}
    34%{transform:scale(1.1,.9)translateY(0px)}
    42.5%{transform:scale(.9,1.1)translateY(-10px)}
    60%{transform:scale(1.05,.95)translateY(0px)}
    80%{transform:scale(1,1)translateY(0px)}
    100%{transform:scale(1,1)translateY(0px)}
}
/*end floating*/
/*====*/