@import url('https://fonts.googleapis.com/css2?family=Viga&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@100;300;400;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@300&display=swap');

:root{
  --fsmall6: .65em;
  --fsmall5: .7em;
  --fsmall4: .75em;
  --fsmall3: .8em;
  --fsmall2: .85em;
  --fsmall1: .9em;
  --fsmall: .95em;
  --fsize: 16px;
  --fsize1: 1.1em;
  --fsize2: 1.2em;
  --fsize3: 1.3em;
  --fsize4: 1.4em;
  --fsize5: 1.5em;
  --fsize6: 1.75em;
  --fsizebig1: 2.25em;
  --fsizebig2: 3em;
  --fsizebig3: 5em;
  --shadow: 0px 0px 4px 0px rgba(0,0,0,.5);
  --shadow2: 1px 1px 6px 0px rgba(0,0,0,.4);
  --btn-shadow: 1px 1px 3px 0px rgba(0,0,0,0.4);
  --btn-shadow2: 1px 1px 3px 0px rgba(0,0,0,0.2);
  --separator: -100px;
  
  --pink: #FD6699;
  --orange: #FD5800;
  --yellow: #FEC400;
  --yellow2: #FD9900;
  --green: #00CE9E;
  --blue: #1899E5;
  --blue2: #3399CC;
  --blue-text: #2754A4;
  --blue-comment: #2754A4;
  --purple-text: #727DFD;
  --orange-btn: #FD9900;
  --bg-purp: #BDC2FB;
  --bg-pink: #FEA8C5;
  --bg-orange: #FEBD58;
  --bg-blue: #69CDFF;
  --bg-purple: #5866FF;
}
body, html{
  height: 100%;
}
body{
  padding: 0;
  margin: 0;

  font-family: 'Open Sans', sans-serif;
  font-size: var(--fsize);
}

/* ---- start general css ----*/
/* --button-- */
a, a:hover{
  color: inherit;
  text-decoration: none;
}
.btn{
  position: relative;
  overflow: hidden;
  -webkit-box-shadow: var(--btn-shadow);
  -moz-box-shadow: var(--btn-shadow);
  box-shadow: var(--btn-shadow);
}
.btn:active, .btn:focus{
  outline: none !important;
  box-shadow: none;
  -webkit-box-shadow: var(--btn-shadow);
  -moz-box-shadow: var(--btn-shadow);
  box-shadow: var(--btn-shadow);
}
.btn:active, a.btn:active{
  transform: scale(.98);
}
.btn-ns, .btn-ns:active, .btn-ns:focus{
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}
.btn div{
  cursor: pointer;
  display: block;
  position: relative;
  z-index: 1;
}
.btn div::after{
  content: '';
  position: absolute;
  z-index: -1;
  top: calc(50% - 15px);
  left: calc(50% - 15px);
  background: rgba(255,255,255, 0.7);
  width: 30px;
  height: 30px;
  border-radius: 100%;
  transform: scale(0);
}
.btn:focus:not(:active) div::after{
  animation: circleGrow 0.3s linear;
}
@keyframes circleGrow{
  0%{
    transform: scale(0);
    opacity: 0;
  }
  20%{
    opacity: 1;
  }
  100%{
    transform: scale(5);
    opacity: 0;
  }
}
/* --button-- */

input:focus, input.form-control:focus{
  box-shadow: inset 0 0 0 #DDD;
  outline: none !important;
}
img{
  width: 100%;
}
.img-square{
  position: relative;
  padding-bottom: 100%;
}
.img-square img{
  position: absolute;
  height: 100%;
  object-fit: cover;
}
.root{
  position: relative;
  width: 100%;
  max-width: 480px;
  min-height: 100vh;
  margin: 0 auto;
  -webkit-box-shadow: var(--shadow);
  -moz-box-shadow: var(--shadow);
  box-shadow: var(--shadow);
}
h1,h2,h3,h4,h5,h6{
  margin-bottom: 0;
}
ul{
  padding-left: 0;
  margin-bottom: 0;
}
ul li{
  list-style: none;
}
.content{
  min-height: calc(100vh - 8.8em);
  color: #000;
}
.header{
  position: sticky;
  top: 0;
  z-index: 997;
}

.modal.fade .modal-dialog{
  -webkit-transform: scale(0.1);
  -moz-transform: scale(0.1);
  -ms-transform: scale(0.1);
  transform: scale(0.1);
  opacity: 0;
  -webkit-transition: ease 0.3s;
  -moz-transition: ease 0.3s;
  transition: ease 0.3s;
}
.modal.show .modal-dialog{
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
  opacity: 1;
}
.modal-backdrop{
  left: 50%;
  max-width: 480px;
  transform: translate(-50%,0)
}

/* --loader--*/
.loader{
  position: relative;
  width: 100%;
  height: 10em;
}
.loader svg{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 12em;
}
/* --end loader--*/

input{
  color: #000 !important;
}
input::placeholder{
  color: #ADADAD !important;
}
.carousel{
  margin: auto -1em;
}
.carousel-cell:first-child{
  left: 1em !important;
  margin-right: 2em !important;
}
.carousel-cell{
  margin-right: 1em;
}
/* ---- end general css ----*/

h5{
  font-family: 'Viga', sans-serif;
}
.play-img{
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 12% !important;
  height: auto !important;
  border-radius: unset !important;
  object-fit: unset !important;
}

/* ---- start login signup ----*/
.login-signup{
  background-image: url('../images/bg-login.png');
  min-height: 100vh;
  background-position: center;
}
.btn-back{
  background: #FFF;
  width: 2em;
  height: 2em;
  position: absolute;
  top: .75em;
  left: .75em;
  border-radius: 5px;
}
.btn-back img{
  width: auto;
  height: 1em;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}
.logo{
  max-width: 11em;
  margin: auto;
  display: block;
  padding-top: 2em;
}
.login-signup-navtab{
  background: rgba(255,255,255,.4);
  margin: 1.75em;
  border-radius: 10px;
  padding: 1.5em;
}
.login-signup-navtab .nav-tabs{
  display: flex;
  justify-content: center;
}
.login-signup-navtab .nav-tabs .nav-item{
  width: 50%;
  text-align: center;
  font-family: 'Viga', sans-serif;
  font-size: var(--fsize4);
}
.nav-tabs .nav-link{
  border: none;
  border-bottom: 6px solid #FFF;
  color: #495057;
}
.nav-tabs .nav-link.active{
  border-color: var(--pink);
  background: none;
  color: #000;
}
.kode-promo{
  color: var(--blue-text);
  text-decoration: underline;
  margin: auto;
  display: block;
  font-family: 'Viga', sans-serif;
  font-size: var(--fsize3);
}
.kode-promo:hover{
  text-decoration: underline;
  color: var(--blue-text);
}

.login-tab-pane{
  color: var(--blue-text);
  padding: 2.25em 0 1em;
}
.login-tab-pane h3{
  font-weight: 700;
  margin-bottom: 5px;
}
.login-tab-pane input{
  font-size: var(--fsize5);
  border-radius: 5px;
  text-align: center;
  height: calc(1.5em + .75rem + 5px);
}
.login-tab-pane input::placeholder{
  font-size: var(--fsmall4);
}
.login-tab-pane input:active, .login-tab-pane input:focus{
  border: 1px solid var(--blue-text) !important;
}
.btn-login{
  background: var(--orange-btn);
  color: #FFF;
  border-radius: 20px;
  margin: 2em auto 0;
  display: block;
  width: 100%;
  max-width: 10em;
  font-size: var(--fsize2);
  font-weight: 600;
}
.btn-login:hover{
  color: #EFEFEF;
}
.signup-tab-pane p{
  color: var(--blue-text);
  margin-top: 1em;
  text-align: center;
}
.signup-tab-pane ul{
  background: #FFF;
  border-radius: 5px;
  text-align: center;
  padding: 0 .75em;
}
.signup-tab-pane ul li{
  border-bottom: 1px solid #E3E3E3;
  padding: .2em 0;
}
.signup-tab-pane ul li:last-child{
  border-bottom: none;
}
.signup-tab-pane ul li .btn{
  font-size: var(--fsize2);
  font-weight: 600;
  width: 100%;
}
.signup-tab-pane ul li .btn div::after{
  background: rgba(200,200,200, 0.7);
}

/*-- slide up content --*/
.blur{
  filter: blur(4px);
  -webkit-filter: blur(4px);
}
.overlay{
  position: fixed;
  display: none;
  width: 100%;
  max-width: 480px;
  height: 100%;
  top: 0;
  left: 50%;
  transform: translate(-50%,0);
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,.5);
  z-index: 999;
  cursor: pointer;
}
.overlay:before{
  content: '';
  filter: blur(20px);
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: -1;
}
.slide-up-content{
  width: 100%;
  max-width: 480px;
  height: 3.5em;
  position: fixed;
  z-index: 1000;
  bottom: 0;
  left: 50%;
  transform: translate(-50%);
  background-color: #FFF;
  overflow: hidden;
  transition: 1s;
  border-radius: 25px 25px 0 0;
  padding-top: 2.5em;
  cursor: pointer;
}
.slide-up-content.open-suc{
  height: 85vh;
}
.slide-up-content .close-suc{
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, 0);
  width: 12em;
  height: 2.5em;
}
.suc-bar{
  background: #D5D5D5;
  width: 10em;
  height: 5px;
  border-radius: 20px;
  display: block;
  margin: auto;
}
#sucInput{
  z-index: 1001;
}
.suc-wrapper{
  position: relative;
  height: 100%;
  display: grid;
  align-items: center;
  padding: 1em 2em 3.5em;
}
.suc-input h4{
  color: var(--blue-text);
  font-weight: 700;
}
.suc-input p{
  font-size: var(--fsize1);
}
.suc-input-val{
  position: relative;
}
.suc-input-val input{
  border: none;
  border-bottom: 1px solid #C3C3C3;
  border-radius: 0;
  box-shadow: inset 0 -1px 0 transparent;
  outline: 0 none;

  font-family: 'Viga', sans-serif;
  font-size: var(--fsize6);
}
.suc-input-val input:focus{
  border-bottom: 2px solid #FFA400;
  box-shadow: inset 0 -1px 0 transparent;
  outline: 0 none;
}
.suc-input-val span{
  position: absolute;
  top: 50%;
  right: 0;
  transform: translate(0,-50%);
}
.suc-input-val span img{
  width: 1.3em;
  height: 1.3em;
}

.suc-message{
  text-align: center;
  
}
.suc-message h4{
  color: var(--blue-text);
  font-weight: 700;
}
.suc-message p{
  font-size: var(--fsize3);
  line-height: 1.4;
  margin-top: .74em;
}
/*-- end slide up content --*/
/* ---- end login signup ----*/

/*-- start header --*/
.header{
  position: sticky;
}
.header-nav, .header-search{
  position: relative;
}
.header-nav{
  background-image: url(../images/header-top.png);
  background-position: bottom;
  background-size: cover;
  background-repeat: no-repeat;
  height: 4.5em;
  z-index: 997;
}
.header-search{
  background-image: url(../images/header-bottom.png);
  background-position: top;
  background-size: cover;
  background-repeat: no-repeat;
  z-index: 996;
  height: 4.5em;
  margin-top: -4.5em;
  transition: 300ms;
}
.search-open{
  -webkit-transform: translateY(4.5em);
  -moz-transform: translateY(4.5em);
  -ms-transform: translateY(4.5em);
  -o-transform: translateY(4.5em);
  transform: translateY(4.5em);
}
.header-home .header-search{
  margin-bottom: 4.5em;
}
.home-header-padding{
  margin-top: -4.5em;
  height: 4.5em;
  transition: 300ms;
}
.home-header-padding.hh-padding{
  height: 0;
}
.btn-menu, .btn-search{
  width: 2em;
  height: 2em;
  position: absolute;
  top: .75em;
  left: .75em;
}
.btn-search{
  top: .75em;
  right: .75em;
  left: unset;
}
.btn-menu img, .btn-search img{
  width: 100%;
  height: auto;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}
.header-nav .logo{
  max-width: 9em;
  margin: auto;
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  padding-top: unset;
}
.header-search{
  display: grid;
  align-items: center;
}
.header-search-inner{
  padding: 0 1.5em;
  position: relative;
}
.search-placeholder{
  position: absolute;
  top: 50%;
  left: 3em;
  transform: translate(0,-50%);
  display: flex;
  align-items: center;
}
.search-placeholder img{
  width: auto;
  height: 1.15em;
}
.search-placeholder span{
  color: #ADADAD;
  margin-left: .5em;
}
.header-search input{
  border-radius: 20px;
  width: 100%;
  padding: 0 1.5em;
}
.btn-search-trigger{
  position: absolute;
  top: 50%;
  right: 0;
  transform: translate(-50%,-50%);
  display: none;
}
.btn-search-trigger img{
  width: auto;
  height: 1.1em;
}
.btn-search-trigger:active, .btn-search-trigger:focus{
  transform: translate(-50%,-50%);
}

.search-result{
  position: fixed;
  top: 4.5em;
  height: 0;
  transition: height 400ms;
  overflow: hidden;
  width: 100%;
  max-width: 480px;
}
.search-result-padding{
  background: rgba(39,84,164,.95);
  height: 4.5em;
}
.search-result-head{
  background: rgba(39,84,164,.95);
  position: absolute;
  padding: 1.25em;
  width: 100%;
  color: #FFF;
}
.btn-close-search{
  position: absolute;
  top: 1em;
  right: 1em;
  padding: 0;
  line-height: 0;
}
.btn-close-search img{
  width: auto;
  height: 1.1em;
}
.search-result-inner{
  background: rgba(39,84,164,.95);
  padding: 0 1.25em 16em;
  margin-top: 4em;
  color: #FFF;
  overflow: auto;
  height: 100%;
  min-height: 100vh;
}
.search-result.active{
  height: 100%;
}
.search-result ul li{
  margin-bottom: 1.4em;
}
.search-result ul li:last-child{
  margin-bottom: 0;
}
/* .search-result .article-title{
  color: #FFF;
} */

.menu{
  position: fixed;
  top: 0;
  height: 100vh;
  width: 100%;
  max-width: 480px;
  z-index: 10002;
  visibility: hidden;
  clip: rect(0, auto, auto, 0);
}
.menu.active{
  visibility: visible;
}
.menu-inner{
  font-family: 'Viga', sans-serif;
  padding: 0 1.5em;
  transform: translateX(-100%);
  transition: all 0.4s ease;
  height: 100%;
  background: rgba(255,255,255,.95);
}
.menu.active .menu-inner{
  transform: translateX(0);
}
.menu-head{
  position: relative;
  height: 5em;
}
.menu-head .logo{
  max-width: 9em;
  margin: auto;
  display: block;
  padding-top: unset;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}
.btn-close-menu{
  position: absolute;
  top: 1.25em;
  right: 0;
  padding: 0;
  line-height: 0;
}
.menu-ul-top{
  margin-top: .5em;
}
.menu-ul-top li{
  margin-bottom: .1em;
}
.menu-ul-top a{
  color: var(--blue-text);
  font-size: var(--fsize3);
  padding-left: 0;
  transition: .15s;
}
.menu-ul-top a:hover{
  color: var(--blue-text);
  transform: scale(1.075);
}
.mut-pink{
  color: var(--pink) !important;
}
.menu-ul-bottom{
  margin-top: 1.1em;
}
.menu-ul-bottom li{
  margin-bottom: .75em;
}
.menu-ul-bottom a{
  color: #FFF !important;
  width: 100%;
  max-width: 9.25em;
  padding: .15em 1em;
  border-radius: 5px;
  font-size: var(--fsize1);
  transition: .15s;
}
.menu-ul-bottom a:hover{
  transform: scale(1.02);
}
.menu-ul-bottom a img{
  width: auto;
  height: 1.25em;
}
.menu-ul-bottom a div{
  cursor: pointer;
  display: block;
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
}
.mub-pink{
  background: var(--pink);
}
.mub-orange{
  background: var(--orange-btn);
}
.mub-blue{
  background: var(--blue);
}
.menu-ul-bottom a span:nth-child(1){
  width: 15%;
}
.menu-ul-bottom a span:nth-child(2){
  width: 85%;
  text-align: left;
  padding-left: 1.25em;
}
/*-- end header --*/

/* label & title */
.label-category{
  margin-bottom: .4em;
  font-size: var(--fsmall1);
  font-weight: 600;
  padding: 0 .35em;
  color: #FFF;
}
.label-pink{
  background: var(--pink);
}
.label-orange{
  background: var(--orange);
}
.label-yellow{
  background: var(--yellow2);
}
.label-blue{
  background: var(--blue);
}
.label-blue2{
  background: var(--blue2);
}
.label-purple{
  background: var(--purple-text);
}
.article-title{
  font-weight: 700;
  line-height: 1.1;

}
/* end label & title */

.slider-carousel {
  padding-bottom: 10px;
}

.slider-menu {
  position: relative;
  z-index: 9999;
  display: block;
  background: linear-gradient(90deg, #FA745C, #FA5B5B) !important;
  padding-left: 0px;
  line-height: 14px;
  -webkit-box-shadow: 0 1px 16px 0 rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0 1px 16px 0 rgba(0, 0, 0, 0.2);
  box-shadow: 0 5px 12px 0 rgba(0, 0, 0, 0.2);

}

.slider-menu.stay {
  margin-top: 0px;
  margin-bottom: 0px;
}

.slider-menu li {
  cursor: pointer;
  display: block;
  font-size: 16px;
  text-align: center;
  padding-top: 15px;
  padding-bottom: 15px;
  padding-left: 30px;
  padding-right: 30px;
  margin-bottom: -14px;
}

.slider-menu li span {
  opacity: 0;
}

.slider-menu li a {
  color: #FFF;
  text-transform: uppercase;
  text-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3);
}

.slider-menu li a:hover {
  color: #FFC679;
}

.slider-menu li a.active {
  color: #FFC679;
}

.list{
  padding: 2em 1em 3.5em;
  border-radius: 0 0 100px 0;
}
.list h5{
  margin-bottom: .75em;
}
.list li{
  margin-bottom: 1em;
}
.list li:last-child{
  margin-bottom: 0;
}
.list-item{
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.list-item-left{
  width: 40%;
}
.lil-img{
  position: relative;
  padding-bottom: 55%;
}
.lil-img img{
  position: absolute;
  height: 100%;
  object-fit: cover;
  border-radius: 4px;
}
.list-item-right{
  width: 60%;
  padding-left: 1.25em;
}
.list-item-right .btn{
  padding: 0 .35em;
  border-radius: 3px;
}
.list-item-right .btn:hover, .list-item-right .btn:active{
  color: #F1F1F1;
}
.lil-title{
  font-weight: 700;
  line-height: 1.2;

  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.lil-time{
  font-size: var(--fsmall6);
  margin-top: .25em;
}
.btn-list-more{
  background: #FFF;
  width: 100%;
  max-width: 12em;
  padding: .25em .75em;
  border-radius: 5px;
  margin-top: 2em;
}
.btn-list-more div{
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.btn-list-more span:nth-child(1){
  font-weight: 700;
  font-size: var(--fsmall);
}
.btn-list-more img{
  width: auto;
  height: .8em;
}
.btn-list-more div::after{
  background: rgba(200, 200, 200, 0.7);
}

/* ---- start home ---- */
.new-updates{
  background: var(--bg-purp);
  padding: 1em 1em 2.5em;
}
.new-updates h5{
  color: var(--purple-text);
  margin-bottom: .75em;
}
.carousel-new-updates .carousel-cell{
  width: 66%;
  margin-right: 1em;
  background: #FFF;
  border-radius: 20px;
}
.cnu-img{
  position: relative;
  padding-bottom: 55%;
}
.cnu-img img{
  position: absolute;
  height: 100%;
  object-fit: cover;
  border-radius: 20px;
}
.cnu-text{
  padding: .75em 1em 1.25em;
  line-height: 1.15;
  font-size: var(--fsmall1);
  font-weight: 600;
}
.cnu-text-inner{
  height: 2.25em;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-align: center;
}
.news{
  background: var(--bg-pink);
  position: relative;
  z-index: 4;
}
.news .btn-list-more, .news .btn-list-more:hover{
  color: var(--pink);
}

.celebrity{
  background: var(--bg-orange);
  position: relative;
  z-index: 3;
}
.celebrity .btn-list-more, .celebrity .btn-list-more:hover{
  color: var(--orange);
}

.lifestyle{
  background: var(--bg-blue);
  position: relative;
  z-index: 2;
}
.lifestyle .btn-list-more, .lifestyle .btn-list-more:hover{
  color: var(--blue);
}

.home .list{
  margin-bottom: var(--separator);
  padding-top: calc(100px + 2em);
}
.home .list:first-child{
  padding-top: 2em !important;
}
.home .list:last-child{
  margin-bottom: 0;
  border-radius: 0;
}

.vote-quiz{
  background: var(--bg-purple);
  padding: 2em 1em;
}
.vote-quiz h5{
  color: var(--yellow);
  margin-bottom: 0;
}
.vote-quiz p{
  color: #FFF;
}
.vote{
  padding-bottom: 1em;
}
.quiz{
  padding: 1em 0;
}
.carousel-vq .carousel-cell{
  width: 82%;
}
.see-more{
  width: 33.33% !important;
}
.see-more .btn{
  display: block;
  padding: 0;
}
.see-more-inner{
  background: #23CE9E;
  position: relative;
  padding-bottom: calc(135% + 3.4em);
  border-radius: 20px;
  width: 100%;
}
.see-more-inner img{
  position: absolute;
  width: 100%;
  max-width: 4em;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%)
}
.vote-item{
  background: #FFF;
  border-radius: 20px;
}
.vote-item-img{
  position: relative;
  padding-bottom: 55%;
}
.vote-item-img img.vote-end-img {
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
}

.disabled-link {
  
  color: grey;
  
}

.vote-item-img img{
  position: absolute;
  height: 100%;
  object-fit: cover;
  border-radius: 20px;
}
.vote-item-bottom{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .7em 1em .9em;
}
.vote-item-new{
  background: var(--yellow);
  color: #FFF;
  width: 100%;
  max-width: 4.5em;
  border-radius: 18px;
  height: 1.8em;
  display: flex;
  align-items: center;
  justify-content: center;
}
.vote-item-btn{
  background: var(--green);
  color: #FFF;
  width: 100%;
  max-width: 6.5em;
  height: 1.8em;
  padding: 0;
  border-radius: 5px;
}
.vote-item-btn.inactive{
  background: #D1D1D1;
}
.vote-item-btn:hover{
  color: #F1F1F1;
}
.vote-item-time{
  background: var(--orange);
  color: #FFF;
  width: 100%;
  max-width: 4.5em;
  border-radius: 18px;
  height: 1.8em;
  display: flex;
  align-items: center;
  justify-content: center; 
}
.vote-quiz hr{
  border-color: #FFF;
}
.vote-item-text{
  font-weight: 700;
  padding: .75em 1em 0;
  line-height: 1.2;

  height: 3.15em;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-align: center;
}

.push-tsel{
  background: var(--bg-purp);
  padding: 1em 1em 0.25em;
}
.music{
  background: var(--bg-purp);
  padding: 2em 1em 2.25em;
}
.music h5{
  color: var(--bg-purple);
  margin-bottom: 1em;
}
.music-inner{
  background: #FFF;
  border-radius: 20px;
  padding: 2em 1em;
}
.music iframe{
  width: 100%;
  height: 400px;
}
/* ---- end home ---- */

.label-page{
  color: #FFF;
  font-size: var(--fsize1);
  padding: 0 .35em;
  font-weight: 600;
}
.page h5{
  font-family: 'Open Sans', sans-serif;
  font-weight: 700;
  line-height: 1.1;
  margin: .35em 0;
}
.time-page{
  font-size: var(--fsmall1);
  margin-bottom: 1.25em;
}
.img-page img{
  border-radius: 5px;
}
.video-page{
  position: relative;
  padding-bottom: 56.25%;
}
.video-page .video-js{
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 5px;
}
.video-page .video-js .vjs-poster{
  border-radius: 5px;
}
.vjs-big-play-button{
  height: 100% !important;
  width: 100% !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%,-50%) !important;
  cursor: pointer !important;
  font-size: unset !important;
  line-height: unset !important;
  padding: unset !important;
  opacity: unset !important;
  border: unset !important;
  background-color: unset !important;
  border-radius: unset !important;
  transition: unset !important;
}
.video-js .vjs-big-play-button .vjs-icon-placeholder:before{
  content: '' !important;
  background-image: url(../images/play.svg) !important;
  background-size: 12% !important;
  background-repeat: no-repeat;
  background-position: center;
}
.video-source{
  font-size: var(--fsmall3);
  font-style: italic;
}
.text-page{
  margin-top: 1.75em;
  font-size: var(--fsmall);
}
.share-page{
  margin: 4em 0 5em;
}
.share-page h5{
  text-align: center;
  font-family: 'Viga', sans-serif;
  font-size: var(--fsize1);
  margin-bottom: 1em;
}
.share-page ul{
  display: flex;
  align-items: center;
  justify-content: center;
}
.share-page ul li{
  margin: 0 .5em;
}
.share-page ul li .btn{
  width: 2.75em;
  padding: 0;
}
.page .list{
  padding: 1.5em 1em 3em;
  border-top: 1px solid;
  border-bottom: 1px solid;
  border-radius: 0;
  margin: 0 -1em;
}
.page .list h5{
  font-family: 'Viga', sans-serif;
  margin-bottom: 1em;
}
.comment{
  padding: 1.75em 0;
}
.comment-item{
  margin-bottom: 2em;
}
.comment-item:last-child{
  margin-bottom: 0;
}
.comment-item h6{
  font-family: 'Viga', sans-serif;
  font-size: var(--fsize1);
  margin-bottom: 1em;
}
.comment-item-inner{
  background: #FFF;
  border-radius: 5px;
  padding: .75em;
}
.comment-item-inner textarea{
  border: none;
  width: 100%;
  resize: none;
}
.comment-textarea{
  height: 12em;
}
.comment-item-inner textarea:active, .comment-item-inner textarea:focus{
  outline: none;
}
.comment-item-inner .btn{
  background: var(--blue-comment);
  color: #FFF;
  padding: 0.1em .5em;
  font-weight: 600;
}
.btn-comment-share{
  font-size: var(--fsize1);
  margin-left: auto;
  display: block;
}
.ciit-name{
  color: var(--blue-comment);
  font-weight: 700;
}
.ciit-text{
  line-height: 1.3;
}
.ciit-time{
  color: #CBCBCB;
  font-size: var(--fsmall3);
  margin: .5em 0 1em;
}
.ciit-button{
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.btn-comment-reply{
  border-radius: 0;
}
.cii-middle{
  padding: .5em 0;
  border-top: 1px solid #DEDEDE;
  margin-top: 1.25em;
}
.ciim-reply{
  color: var(--blue-comment);
  font-weight: 700;
  margin-bottom: 1em;
}
.cii-middle ul li{
  display: flex;
  justify-content: space-between;
  margin-bottom: 1.25em;
}
.cii-middle ul li:last-child{
  margin-bottom: 0;
}
.ciim-left{
  width: 8%;
}
.ciim-right{
  width: 92%;
  padding-left: 1.5em;
}
.ciim-right div:nth-child(1){
  color: var(--blue-comment);
  font-weight: 700;
  margin-bottom: .25em;
}
.ciim-right div:nth-child(2){
  line-height: 1.3;
}
.ciim-right div:nth-child(3){
  color: #CBCBCB;
  font-size: var(--fsmall3);
  margin-top: .4em;
}
.cb-like-dislike{
  display: flex;
  align-items: center;
}
.cb-like-dislike .btn{
  background: #EAEAEA;
  color: #000;
  height: 2.25em;
  line-height: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.cb-like-dislike .btn svg{
  width: 1.25em;
  height: auto;
}
.cb-like-dislike .btn span{
  margin-left: .25em;
}
.cb-like-dislike .btn.like svg .a, .cb-like-dislike .btn.dislike svg .a{
  fill: #FFF;
}
.cb-like-dislike .btn.like, .cb-like-dislike .btn.dislike{
  background: #FF6699;
  color: #FFF;
}
.cb-like-dislike .btn:nth-child(2){
  margin-left: .5em;
}
.cii-bottom{
  border: .5px solid var(--blue-comment);
  border-radius: 3px;
  position: relative;
  margin: 1.5em 0;
}
.cii-bottom-inner{
  padding: .75em;
}
.reply-textarea{
  height: 2em;
}
.suc-comment{
  height: 0;
  padding-top: 0;
}
.suc-comment.open-suc{
  padding-top: 2.5em;
}
.suc-comment .suc-message{
  text-align: left;
}
.suc-comment .suc-message p{
  font-size: var(--fsize);
  margin-top: .2em;
}
.succ-button{
  display: grid;
  margin-top: 1.85em;
}
.succ-button .btn{
  border-radius: 5px;
  text-align: center;
  position: relative;
  color: #FFF;
  font-size: var(--fsize4);
  font-family: 'Viga', sans-serif;
  margin-bottom: .5em;
  padding: .35em 0;
}
.succ-button .btn:last-child{
  margin-bottom: 0;
}
.succ-button img{
  position: absolute;
  top: 50%;
  left: 15%;
  transform: translate(-50%,-50%);
  height: 1.35em;
  width: auto;
}
.succ-btn-fb{
  background: #1176FA;
}
.succ-btn-go{
  background: #F03800;
}

/* ---- text page ---- */
.page{
  padding: 1em 1em 2em;
}
.new-updates-pg{
  background: var(--bg-purp);
}
.new-updates-pg .list{
  border-color: var(--purple-text);
}
.news-pg{
  background: var(--bg-pink);
}
.news-pg .list{
  border-color: var(--pink);
}
.celebrity-pg{
  background: var(--bg-orange);
}
.celebrity-pg .list{
  border-color: var(--orange);
}
.lifestyle-pg{
  background: var(--bg-blue);
}
.lifestyle-pg .list{
  border-color: var(--blue);
}
/* ---- end text page ---- */

/* ---- page list ---- */
.page-list .list{
  border: none;
  padding: 1.5em 1em;
  margin: 0;
}
.category-list{
  background: var(--bg-purp);
}
.new-updates-pg .label-page{
  background: var(--purple-text);
}
.news-list{
  background: var(--bg-pink);
}
.news-pg .label-page, .news-list .label-list{
  background: var(--pink);
}
.celebrity-list{
  background: var(--bg-orange);
}
.celebrity-pg .label-page, .celebrity-list .label-list{
  background: var(--orange);
}
.lifestyle-list{
  background: var(--bg-blue);
}
.lifestyle-pg .label-page, .lifestyle-list .label-list{
  background: var(--blue);
}
/* ---- end page list ---- */

/* ---- music ---- */
.music-pg{
  background: var(--bg-purp);
}
/* ---- end music ---- */

/* ---- prize program ---- */
.prize-program{
  background: var(--bg-purp);
}
.prize-program-inner{
  padding: 1em;
}
.ppi-title{
  color: var(--blue-text);
  font-family: 'Viga', sans-serif;
  font-size: var(--fsize5);
  margin-bottom: .5em;
}
.ppi-text{
  font-size: var(--fsize1);
  line-height: 1.4;
  font-weight: bold;
}
.ppi-time{
  font-size: var(--fsmall2);
  margin-top: .75em;
}
.btn-join-program{
  background: #23CE9E;
  border-radius: 10px;
  width: 95%;
  color: #FFF;
  font-weight: 600;
  font-size: var(--fsize2);
  padding: .25em 0;
  margin: 2em auto 2.25em;
  display: block;
}
.btn-join-program:hover{
  color: #F1F1F1;
}

.cpp-title{
  color: var(--blue-text);
  font-size: var(--fsize3);
  font-weight: 700;
  text-align: center;
  margin-bottom: 1em;
}
.carousel-prize-program .carousel-cell{
  width: 66%;
  margin-right: 15px;
}
.cpp-item{
  position: relative;
  padding-bottom: 56.25%;
}
.cpp-item img{
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 15px;
}
.cpp-text{
  color: var(--blue-text);
  font-family: 'Viga', sans-serif;
  font-size: var(--fsize1);
  text-align: center;
  margin-top: .25em;
}

.accordion{
  margin-top: 4em;
}
.accordion-item{
  background: var(--bg-purple);
  margin-bottom: 1em;
  border-radius: 5px;
  color: #FFF;
}
.accordion-item .btn{
  width: 100%;
  color: #FFF;
  font-family: 'Viga', sans-serif;
  font-size: var(--fsize2);
  padding: .65em 1em;
}
.accordion-item .btn div{
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.accordion-item .btn div span:nth-child(2){
  transform: rotate(-180deg);
  transition: .2s;
}
.accordion-item .btn.collapsed div span:nth-child(2){
  transform: rotate(0deg);
}
.accordion-item .btn img{
  width: 1.25em;
  height: auto;
}
.accordion-item .collapse-inner{
  padding: 0 1em 2em;
}
.mek-pro li{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.75em;
}
.mek-pro li:last-child{
  margin-bottom: 0;
}
.mek-pro-left{
  width: 35%;
}
.mek-pro-right{
  width: 65%;
  padding-left:auto;
}
.mek-pro-right h5{
  font-family: 'Open Sans', sans-serif;
  font-weight: 600;
  color: #FFD752;
  margin-bottom: .15em;
}
.mek-pro-right p{
  margin-bottom: 0;
  line-height: 1.4;
  font-size: var(--fsize);
  font-weight: 100;
}
.mek-pro-right p a, .mek-pro-right p span{
  font-weight: 600;
}
.ai-text-list li{
  margin-bottom: 1.25em;
  font-size: var(--fsmall);
}
.ai-text-list li:last-child{
  margin-bottom: 0;
}
/* ---- end prize program ---- */

/* ---- quiz page ---- */
.quiz-page, .vote-page, .vote-page-question{
  padding: 1.25em 1em;
}
.quiz-ul li, .vote-ul li{
  margin-bottom: 2.25em;
}
.quiz-ul li:last-child, .vote-ul li:last-child{
  margin-bottom: 0;
}

.quiz-page-question, .vote-page-question{
  background: var(--bg-purple);
  min-height: calc(100vh - 4.5em);
}
.qpp-img{
  position: relative;
  padding-bottom: 60%;
}
.qpp-img img{
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.qpp-content{
  padding: 1em;
}
.qpp-content .vote-item-new{
  font-size: var(--fsmall2);
  color: #000;
}
.qpp-text{
  font-size: var(--fsize3);
  font-weight: 600;
  color: #FFF;
  line-height: 1.3;
  padding: .5em 0 1.5em;
}
.btn-mulai-qpp{
  background: #23CE9E;
  width: 100%;
  max-width: 16em;
  margin: auto;
  display: block;
  color: #FFF;
  font-size: var(--fsize2);
  font-weight: 600;
  border-radius: 10px;
}
.btn-mulai-qpp:hover{
  color: #EFEFEF;
}

.sev-answer.open-suc{
  height: 85vh;
}
.six-answer.open-suc{
  height: 77.5vh;
}
.fiv-answer.open-suc{
  height: 70vh;
}
.four-answer.open-suc{
  height: 62.5vh;
}
.suc-quiz{
  position: relative;
  height: 100%;
  padding: 1em 1.5em;
}
.sucq-quest{
  color: var(--blue-text);
  font-size: var(--fsize2);
  font-weight: 700;
  line-height: 1.3;
}
.sucq-quant{
  font-size: var(--fsmall);
  margin: .25em 0 1.5em;
}
.quiz-answer-ul li{
  margin-bottom: .5em;
}
.quiz-answer-ul li:last-child{
  margin-bottom: 0;
}
.quiz-answer-ul li .btn{
  border: 1px solid #707070;
  border-radius: 0;
  width: 100%;
  font-size: var(--fsize2);
  padding: 0.4em 0;
}
.quiz-answer-ul li .btn:active, .quiz-answer-ul li .btn:focus{
  background: #E8E8E8;
}
.loading-quiz{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 100%;
  text-align: center;
}
.loading-quiz{
  max-width: 12.5em;
}
.loading-quiz h5{
  color: #393ABF;
  font-family: 'Open Sans', sans-serif;
  font-weight: 600;
}

.quiz-page-result{
  background: var(--bg-purple);
  padding: 1em;
}
.quiz-page-result .qpp-text{
  padding: 0;
}
.qpr-result{
  margin: 1.75em auto;
  max-width: 14em;
}
.qpr-result-img{
  position: relative;
  padding-bottom: 105%;
}
.qpr-result-img img{
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 5px 5px 0 0;
}
.qpr-result-text{
  background: var(--blue-text);
  color: #FFF;
  text-align: center;
  border-radius: 0 0 5px 5px;
  font-size: var(--fsize2);
  font-weight: 600;
  padding: .75em .5em;
}
.quiz-page-result .share-page{
  margin: 0 0 3em;
  color: #FFF;
}
.quiz-page-result hr, .vote-page-question hr{
  border-color: #A7AEFF;
  margin: 0 -1em;
}
.quiz-other, .vote-other{
  padding: 2em 0;
}
.quiz-other h5, .vote-other h5{
  font-family: 'Open Sans', sans-serif;
  color: #FFF;
  font-size: var(--fsize2);
  margin-bottom: 1em;
  font-weight: 600;
}
/* ---- end quiz page ---- */
/* ---- vote page ---- */
.vpq-img{
  margin: -1.25em -1em 0;
}
.vote-other{
  padding-top: 1em;
}
.vote-option{
  display: grid;
  grid-column-gap: .5em;
  grid-row-gap: 2em;
  grid-template-columns: repeat(2,1fr);
}
.vote-option .btn{
  padding: 0;
  width: 100%;
}
.vote-option .btn:active, .vote-option .btn:focus{
  opacity: .8;
}
.vote-option .btn:focus:not(:active) div::after{
  animation: unset;
}
.vo-img{
  position: relative;
  padding-bottom: 120%;
}
.vo-img img{
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px 10px 0 0;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
}
.vo-text{
  background: var(--blue-text);
  text-align: left;
  border-radius: 0 0 10px 10px;
  padding: .25em 1em;
  font-size: var(--fsmall);
}
.vot-one{
  font-weight: 600;
  color: #FFF;
}
.vot-two{
  font-weight: 300;
  color: #FEC400;
  margin-top: -.15em;
}
.vote-page-question .qpp-content{
  padding: 1em 0;
}
.vote-page-question .share-page{
  color: #FFF;
}

.slide-up-content-vote{
  height: 0;
  padding-top: 0;
}
.slide-up-content-vote.open-suc{
  padding-top: 2.5em;
}
.suc-vote{
  padding: 2em;
  text-align: center;
}
.suc-vote h4{
  color: var(--blue-text);
  font-weight: 700;
  margin-bottom: .5em;
}
.suc-vote p{
  font-size: var(--fsize2);
  line-height: 1.4;
}
.suc-vote .btn{
  color: #FFF;
  width: 100%;
  border-radius: 10px;
  font-size: var(--fsize2);
  font-weight: 600;
}
.btn-vote-submit{
  background: #23CE9E;
}
.btn-vote-cancel{
  background: #D0D0D0;
  margin-top: 1em;
}

.trophy h3{
  color: #FFF;
  font-weight: 700;
}
.trophy-img{
  display: flex;
  align-self: center;
  justify-content: center;
  margin-top: .75em;
}
.trophy-img img{
  width: 100%;
  max-width: 7.5em;
}

.vote-res-item{
  padding: 1px;
}
.rank{
  background: #FFF;
  color: var(--blue-text);
  position: absolute !important;
  right: .35em;
  top: .35em;
  border-radius: 20px;
  display: flex !important;
  align-items: center;
  padding: .15em .35em;
  font-size: var(--fsmall);
  font-weight: 700;  
}
.rank img, .check img{
  width: 1.25em;
  height: auto;
  position: unset;
  object-fit: unset;
  border-radius: unset;
  left: unset;
  top: unset;
  transform: unset;
  margin-right: .35em;
}
.check{
  position: absolute !important;
  bottom: .5em;
  right: .5em;
}
.check img{
  width: 2em;
  margin-right: unset;
}
.vote-option-other{
  margin-top: 2em;
  grid-row-gap: .75em;
  grid-template-columns: repeat(6,1fr);
}
.vote-option-other .rank{
  font-size: var(--fsmall6);
  padding: .1em .5em;
}
.vote-option-other .vo-text{
  font-size: var(--fsmall6);
}
.vote-option-other li{
	grid-column: span 2;
}
.vote-option-other li:last-child:nth-child(3n - 1){
  grid-column-end: -2;
}
.vote-option-other li:nth-last-child(2):nth-child(3n + 1){
  grid-column-end: 4;
}
.vote-option-other li:last-child:nth-child(3n - 2){
  grid-column-end: 5;
}
/* ---- end vote page ---- */

/* ---- footer ---- */
.footer{
  background: var(--bg-purple);
  padding: 1em;
  height: 4.3em;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.footer span:nth-child(1){
  font-size: var(--fsmall1);
  font-family: 'Source Sans Pro', sans-serif;
  color: #FFF;
}
.footer ul{
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 8.75em;
}
.footer ul .btn{
  padding: 0;
  border-radius: 8px;
}
.footer ul li{
  margin: 0 .45em
}
.footer ul li:first-child{
  margin-left: 0;
}
.footer ul li:last-child{
  margin-right: 0;
}
/* ---- end footer ---- */

/* ---- start responsive ----*/
@media only screen and (min-width: 1000px) and (max-height: 700px){
  .login-signup{
    padding-bottom: 5em;
  }
}
@media only screen and (max-width: 350px){
  :root{
    --fsize: 14px;
  }
}
@media only screen and (max-height: 600px){
  .quiz-answer-ul li .btn{
    font-size: var(--fsize);
  }
  .signup-tab-pane ul li .btn{
    font-size: var(--fsize);
  }
  .kode-promo{
    padding-bottom: 3.5em;
  }
}
/* ---- end responsive ----*/