*,html{margin:0;padding:0;border:0;outline:0;font-weight:inherit;font-style:inherit;font-family:inherit;-moz-box-sizing:border-box;box-sizing:border-box;font-size:100%;text-align:left}img{color:transparent;font-size:0;vertical-align:middle;-ms-interpolation-mode:bicubic}ol,ul{list-style:none}li{display:list-item}a img{border:0}a{text-decoration:none}b,strong{font-weight:800}i,em{font-style:italic}img{max-width:100%}.btn,input[type=button],select,button{-webkit-appearance:none;cursor:pointer;background-color:transparent}.hide{display:none;}

:root{
  --site-container:987px;
  --size-1:5px;
  --size-2:8px;
  --size-3:13px;
  --size-4:21px;
  --size-5:34px;
  --size-6:55px;
  --max-zindex:2147483648;
  --title-fontsize:15px;
  --bg-1:32deg 57% 87%;
  --bg-3:0deg 0% 100%; 
  --bg-4:0deg 0% 13%; 
}

body, html{font-family:'Nunito',sans-serif; font-size:var(--size-3); font-weight:400; letter-spacing:0.2px; font-feature-settings:'lnum' 1; 
-webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; -webkit-font-smoothing:antialiased; 
-moz-osx-font-smoothing:grayscale; text-rendering:optimizeSpeed;}
html{scroll-behavior:smooth;}
body{overflow-x:hidden; position:relative; background-color:hsl(var(--bg-1) / 100%); padding-top:var(--size-6);}
a{font-weight:bold;}
.btn, a.btn, button.btn{padding:var(--size-3) var(--size-4); font-weight:normal; -webkit-appearance:none; text-transform:capitalize; 
display:flex; text-align:center; align-items:center; justify-content:center;}
#btt, .popup-copied, .section-route-popup{display:none;}
.content_center{display:flex; justify-content:center; align-items:center;}
.flex_ori{display:block; overflow:hidden; position:relative; line-height:0;}
.flex_ori:before{content:''; display:block;}
.flex_ori img{position:absolute; z-index:2; top:0; left:0; width:100%; height:100%; object-fit:cover;}
.flex_ori img:not([src]){visibility:hidden;}
.float-overlay, .popup-copied, .popup-route, .popup-kloter{display:none;}
.more-link{margin-top:var(--size-4); display:flex; align-items:center;}
.more-link .svgicon{margin-left:var(--size-2);}
.muat-lainnya{margin-top:var(--size-4); display:flex; align-items:center;}
.muat-lainnya .svgicon{margin-left:var(--size-2);}
.section-title{font-size:21px; font-weight:900; text-transform:uppercase; position:relative; font-style:italic;
margin-bottom:var(--size-4); padding-left:var(--size-3); width:100%;}
.section-title > *{word-wrap:break-word; word-break:break-word; hyphens:auto;
display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden;}
.section-title:before{content:''; display:block; position:absolute; height:29px; width:5px; top:0; left:var(--size-3); 
transform:skew(-12deg) translate(-12px,0px);}
.section-subtitle{margin-top:calc(var(--size-3) *-1); margin-bottom:var(--size-4);}
.sticky-link{height:100%; padding:0 var(--size-3); font-weight:bold;}
.sticky-link .svgicon{width:auto; height:calc(var(--title-fontsize) + var(--size-1));}
.width-max{position:relative; width:100%; max-width:var(--site-container); display:flex; flex-wrap:wrap; margin:0 auto;}

header{position:fixed; top:0; left:0; width:100%; height:var(--size-6); z-index:calc(var(--max-zindex) - 2000);
background-color:hsl(var(--bg-4) / 100%);}
header > span{justify-content:space-between; height:100%;}
.header-logo svg{width:auto; height:21px;}

menu{display:grid; z-index:calc(var(--max-zindex) - 3000); grid-auto-flow:column; align-items:center; overflow-x:auto;}

.share-list{display:flex;}

.site-container{min-height:calc(100vh - var(--size-6)); margin-top: var(--size-3);}
.section-row{padding:var(--size-6) var(--size-4); display:flex; flex-wrap:wrap; justify-content:center; position:relative; z-index: 2;}

/* .section-news-split{padding-top:0; padding-bottom:0;} */
.section-video{padding-top:21px; padding-bottom:21px;}
.section-news-split{padding-bottom:0;}
.cover-title{padding:0; margin-bottom:var(--size-4);}
.cover-title .main-logo{width:100%; max-width:377px;}
.cover-title .main-logo:before{padding-top:37.89%;}

.section-news .width-max, .section-news-split .width-max{display:grid; grid-gap:var(--size-5);}
.title-theme-hj{font-size: 24px; text-align: center; color: #212121; font-weight: 700; margin-bottom: var(--size-5);}

.content-list-container{display:grid; grid-gap:var(--size-4);}
.content-list-box{display:grid; grid-gap:var(--size-3); grid-template-rows:min-content; fill:hsl(var(--bg-1) / 55%);}
.content-list-thumb-frame{border-radius:var(--size-3); overflow:hidden;}
.content-list-info{display:flex; align-items:center;}
.content-list-title{width:100%; font-size:var(--title-fontsize); line-height:140%; margin-bottom:var(--size-1); 
display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; overflow:hidden;}
.content-list-date{color:var(--color-default); font-weight:normal;}

.article-list-container{display:grid;}
.content-article-box{grid-template-columns:var(--thumb-size) 1fr;}

.video-list{width:100%;}
.video-small-container{display:grid; grid-gap:var(--size-4); grid-template-columns:repeat(auto-fit, minmax(140px,1fr));}
.content-video-box{padding-bottom:var(--size-2);}
.content-video-box .content-list-thumb-frame:before{padding-top:56.25%;}
.content-video-box .content-list-thumb-frame iframe{position:absolute; top:0; left:0; width:100%; height:100%;}
.content-video-box .content-list-info{align-items:flex-start;}
.content-video-icon{position:absolute; z-index:2; top:0; left:0; bottom:0; right:0;}
.content-video-icon .svgicon{height:auto;}
.sj-video-dailymotion{position:absolute !important; top:0; left:0; width:100%; height:100%;}

/* Iklan */
.slotiklan { overflow: hidden; position: relative;}
.slotiklan-topdesktop { contain-intrinsic-size: 1px 200px; min-height: 250px; z-index: 2 !important; }
.slotiklan-video-320x180:before, .slotiklan-topdesktop:before, .slotiklan-970x200:before .slotiklan:before { content: 'Promote your products or services here. We work with Impressions/ Install / Click / Sessions / Leads etc. Campaign with us sales@viva.co.id'; padding: 15px; }
.slotiklan:before { position: absolute; z-index: -1; top: 0; left: 0; bottom: 0; right: 0; margin: auto; padding: 10px; box-sizing: border-box; display: flex; justify-content: center; align-items: center; content: 'Campaign with us sales@viva.co.id'; line-height: 150%; text-align: center; }

.iklan-skin { position: absolute !important; z-index: 1 !important; top: 0; left: 0; width: 100%; height: 100%; }
.iklan-skin > span { display: flex; justify-content: space-between; width: 100%; position: -webkit-sticky; position: sticky; top: 60px; }
.iklan-skin-left { margin-left: -175px; }
.iklan-skin-right { margin-right: -175px; }
.slotiklan-160x600 { contain-intrinsic-size: 1px 600px; height: 600px; }
.slotiklan-160x600:before { opacity: 0; }
.slotiklan-300x250 { contain-intrinsic-size: 1px 250px; height: 250px; }
.slotiklan-300x250:before { width: 300px; height: 250px; }
.slotiklan-728x90 { contain-intrinsic-size: 1px 90px; height: 90px; }
.slotiklan-728x90:before { width: 728px; height: 90px; }
.slotiklan-320x50 { contain-intrinsic-size: 1px 50px; height: 50px; }
.slotiklan-320x50:before { width: 320px; height: 50px; }
.ads-column-container{display: grid; grid-template-columns: 1fr; grid-template-rows: min-content; grid-row-gap: 30px; position: -webkit-sticky; position: sticky; padding-bottom: 0.1px; top: 144px;}
.iklan-standar-iab{margin: var(--size-4) 0; position: relative; z-index: 2;}

.site-container > span { width: 100%; min-height: 100vh; margin: 0 auto; display: block; }

@media screen and (min-width:0px) and (max-width:1023px){
  .desktop-only{display:none !important; visibility:hidden; content-visibility:hidden;}
  .desktop-only iframe[loading=lazy]{content-visibility:hidden !important;}
  
  header{padding:0 var(--size-2);}
  
  menu{height:calc(var(--size-5) + var(--size-2)); position:fixed; top:var(--size-6); left:0; width:100%;
  background-color:hsl(var(--bg-4) / 95%); border-bottom:1px solid var(--color-border);}
  menu .sticky-link:first-child{padding-left:var(--size-4);}
  menu .sticky-link:last-child{padding-right:var(--size-4);}
  menu .sticky-link > span{position:relative;}
  menu .sticky-link:not(:first-child) > span:before{content:''; display:block; position:absolute; top:0; left:calc(var(--size-3) * -1); 
  width:1px; height:100%; background-color:var(--color-border);}
  @supports(-webkit-backdrop-filter:none) or (backdrop-filter:none){
    menu{-webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); background-color:hsl(var(--bg-4) / 89%);}
  }
  
  .content-article-box{--thumb-size:89px;}
  .content-article-box .content-list-thumb-frame:before{padding-top:100%;}
  
  .content-video-icon .svgicon{width:var(--size-5);}
  
  .section-news-cover .content-article-box:first-child{--thumb-size:100%; grid-template-columns:1fr; padding-bottom:var(--size-4);
  border-bottom:1px dashed var(--color-border);}
  .section-news-cover .content-article-box:first-child .content-list-thumb-frame:before{padding-top:56.25%;}
  
  .section-news-split .article-list[id=tips]{padding-bottom:0;}
}