:root {
    --standart-margin:10px;
    --standart-height-ads: 135; /* 125 + 10px (margin) */
    --long-height-ads: 310; 
    --primary-color: #3498db;
    --font-size: 62.5%;
    --small-width-ads:390px;
    --small-height-ads:80px;
    --medium-width-ads:391px;
    --medium-height-ads:132px;
    --medium2-width-ads:390px;
    --medium2-height-ads:426px;
}

@font-face {
    font-family:'Poppins';
    src:url('../fonts/poppins/Poppins-Regular.ttf') format('truetype');
    font-weight:normal;
    font-style:normal;
}
@font-face {
    font-family:'Telkomsel Batik Sans';
    src:url('../fonts/Telkomsel_Batic/TTF/TelkomselBatikSans-Bold.ttf') format('truetype');
    font-weight:normal;
    font-style:normal;
}
*{
    padding: 0;
    margin:0;
    box-sizing: border-box;
}
html{
    /*font size 10px*/
    /* 10px/16px=0.625 = 62.5% */
    /*percentage of user's browser setting*/
    font-size: var(--font-size);
    overflow-x: hidden;
}
/*testing mobile*/
body{
  width:391px;
  margin:0 auto;
}

.el--4,.el--8,.el--10,.el--12,.el--14,.el--16,.el--18,.el--21{
  width:var(--small-width-ads);
  height:var(--small-height-ads);
}
.el--1{
  width:var(--medium-width-ads);
  height:var(--medium-height-ads);
}
.el--3{
  width:var(--medium2-width-ads);
  height:var(--medium2-height-ads);
}
.el--1 > *,
.el--3 > *,
.el--4 > *,
.el--5 > *,
.el--6 > *,
.el--7 > *,
.el--8 > *,
.el--10 > *,
.el--11 > *,
.el--12 > *,
.el--14 > *,
.el--15 > *,
.el--16 > *,
.el--18 > *,
.el--20 > *,
.el--21 > *
 {
  top:50%;
  left:50%;
  transform:translate(-50%,-50%); 
  position: relative;
}
.el--7,.el--11,.el--20{
  width:390px;
  height:188px;
}
.el--15{

  width:390px;
  height: 426px;
}
.el--9,.el--17{
  width:390px;
  height:410px;  
}

/*end testing mobile*/
.standart-size-ads{
  width: 300px;
  height: 250px;
}

.el {
  overflow:auto;
  color: red;
  border-radius: 5px;
  background:#D9D9D9;
  margin-top:18px;
}
.el--5{
  height:233px;
  width:390px;
}

.if-games {
  overflow: hidden;
  width: 359px;
  border: 0px;
  border-radius: 15px;
  height: 215px;
}

.img-mytelkomsel{
  height:100%;
  width:100%;
}

.el--1, .el--3, .el--4, .el--5, .el--6, .el--7, .el--8, .el--10, .el--11, .el--14, .el--13, 
.el--16, .el--19, .el--20, .el--21, .el--22, .el--23, .el--24, .el--25, .el--15{
  overflow:hidden;
}
.el--9 > p,.el--13 > p, .el--12 > p,.el--17 > p, .el--18 > p {
  font-family: "Telkomsel Batik Sans";
  font-size: 24px;
  font-weight: 700;
  color: black;
}

.el--6{
  width: 390px;
  height: 307px;
}
.el--center{
  place-items: center;
  display: grid;
  background: #aeaeaec7;
  margin-top:10px;
  height: 300px;
}

.img-ful-content{
  width: 100%;
  height: 100%;
}
footer {
  background-image: url("../images/footer.jpg");
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  color: white;
  font-family: "Telkomsel Batik Sans";
  font-size: 8px;
  font-weight: 700;
  text-align: center;
  height: 67px;
  padding-top: 10px;
}
.footer {
  display: grid;
  justify-content: center;
}
.footer-media-social {
}
.footer-media-social img {
  width: 15px;
  height: 15px;
  margin: 2px;
}

.footer-digiads img {
  width: 84px;
  height: 28px;
  position: relative;
  top: -6px;
}

.footer-support-center img {
  width: 20px;
  height: 20px;
  position: relative;
  top: -3px;
}

footer a {
  text-decoration: none;
}
.breaking-news{
  width: 390px;
  height:466px;
  background:white;
  overflow:hidden;
}
/*Breaking news*/
#BREAKING_NEWS {
  height: 543px;
}

.splide__slide {
  margin-right: 2rem !important;
  background-color: #fff;
}
.container-news{
  background: #D9D9D9;
  padding: 20px;
  border-radius: 10px;
  margin-top: 20px;
}
.splide__slide a {
  text-decoration: none;
}

.splide__slide img {
  width: 100%;
  height: 263px;
  border-radius: 10px 10px 0px 0px;
}

.title-article {
  font-family: "Telkomsel Batik Sans";
  font-size: 11px;
  line-height: 18px;
  color: #001A41;
  padding-left:10px;
}

.splide__slide p {
  line-height: 20px;
  padding-left: 11px;
}
.content-article {
  font-size: 16px;
  font-family: "Poppins";
  color: #000000;
}


p {
  font-size: 8px;
}
.games > p, .breaking-news > p, .news-article > p {
  font-family: "Telkomsel Batik Sans";
  font-size: 24px;
  font-weight: 700;
  color:black;
}
.hours {
  font-family: 'Poppins';
  font-size: 14px;
  color: #66707A;
  padding-left: 7px;
}

.splide__slide img {
  width: 100%;
  height: 263px;
  border-radius: 10px 10px 0px 0px;
}
.hours > img {
  width: 24px !important;
  height: 24px !important;
}

.mg-top {
  margin-top: 24px;
}

footer img{
height: 70px;
width: 100%;
}
a{
  color: #001A41
}

.std-ads{
  width:300px;
  height:250px;
}

/* RSS */
.rss-list {
  position: relative;
  width: 100%;
  padding: 10px;
  float: left;
}

.rss-list a {
  text-decoration: none;
}

.news {
  text-align: left;
  color: #fff;
  font-family: Tahoma;
  font-family: 'Helvetica-Light';
}

.title-news {
  font-family: "Telkomsel Batik Sans";
  color: #001A41;
  font-size: 18px;
  line-height: 24px;
  font-weight: 700;
}

.txt-article {
  line-height: 24px;
  color: #000000;
  font-weight: 400;
}


.rss-list small {
  color: #66707A;
  display: inline-table;
}
.img-hours {
  width: 24px;
  height: 24px;
}
.txt-time {
  position: relative;
  top: -7px;
  font-weight: 400;
  font-size: 14px;
  line-height: 24px;
  font-family: "Poppins";
}
.news {
  text-align: left;
  color: #fff;
  font-family: Tahoma;
  font-family: 'Helvetica-Light';
}

.splide__pagination__page.is-active {
  background: #e11a1ac9 !important;
}

.wrapper {
  grid-template-columns: 320px;
  grid-template-rows: repeat(1719, 2px);
  background-color: #fff;
  color: #444;
  grid-gap: 18px;
}
.el--1 > div,
.el--4 > div,
.el--6 > div,
.el--7 > div,
.el--8 > div,
.el--10 > div,
.el--11 > div,
.el--12 > div,
.el--13 > div,
.el--14 > div,
.el--15 > div,
.el--16 > div,
.el--18 > div,
.el--20 > div,
.el--21 > div,
.el--13 div,
.el--3 > div
{
  display:inline-block;
}
#NEWS_SLOT_2,#NEWS_SLOT_3{
  background: #D9D9D9;
  overflow-y: scroll;
  height: 93%;
}
.el--13,.el--9,.el--17{
  background:white;
}
.el--13{
  height:363px;
}
.update-terbaru{
  background:#D9D9D9;
  width:390px;
  height: 323px;
}


/* RSS */
.rss-list {
  position: relative;
  width: 100%;
  padding: 5px;
  float: left;
}

.rss-list a {
  text-decoration: none;
}

.news {
  text-align: left;
  color: #fff;
  font-family: Tahoma;
  font-family: 'Helvetica-Light';
}

.title-news {
  font-family: "Telkomsel Batik Sans";
  color: red;
  font-size: 14px;
  line-height: 24px;
  font-weight: 700;
}

.txt-article {
  line-height: 18px;
  color: #000000;
  font-weight: 400;
}
.content-article,.slide-content-article {
  font-size: 14px;
  font-family: "Poppins";
  color: #000000;
}

.rss-list small {
  color: #66707A;
  display: inline-table;
}
.img-hours {
  width: 24px;
  height: 24px;
}
.txt-time {
  position: relative;
  top: -7px;
  font-weight: 400;
  font-size: 10px;
  line-height: 24px;
  font-family: "Poppins";
}
.news {
  text-align: left;
  color: #fff;
  font-family: Tahoma;
  font-family: 'Helvetica-Light';
}

.slide-content-article{
  padding:10px;
}
.slide-content-article div:first-child{
  font-size: 15px;

}

.slide-content-article div:nth-child(2){
  font-size: 12px;
  color: #66707a;
}