.lds-dual-ring {
  display: inline-block;
  width: 80px;
  height: 80px;
  margin-top: 200px;
}
.lds-dual-ring:after {
  content: " ";
  display: block;
  width: 64px;
  height: 64px;
  margin: 8px;
  border-radius: 50%;
  border: 6px solid #cef;
  border-color: #cef transparent #cef transparent;
  animation: lds-dual-ring 1.2s linear infinite;
}
@keyframes lds-dual-ring {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
#loading{
  position: fixed;
  width: 100%;
  height: 100%;
  background-color: rgb(0, 0, 0,.5);
  z-index: 9999999;
text-align: center;
}
#loading p{
  text-align: center;
  font-size: 20px;
  font-weight: bolder;
}
#loadMore {
  width: 200px;
  color: #fff;
  display: block;
  text-align: center;
  margin: 20px auto;
  padding: 10px;
  border-radius: 10px;
  border: 5px solid white;
  background-color: #490139;
  transition: .3s;
  text-decoration: none;
  font-size: 20px;
  font-weight: bolder;
}
#article{
  text-align: center;
  background-color: #03058a;
  margin-bottom: -20px;
  width: 100%;
  height: 100%;
}
#article p{
  padding: 0.2% 25%;
  text-align: justify;
}
#article p a{
  text-decoration: none;
  color: #eee;
}
.tabel{
 border-top: 2px solid white;
 margin-top:5px;
}
#loadMore:hover {
  color: white;
  background-color: #ff4fe8;
  border: 5px solid white;
  text-decoration: none;
}
.noContent {
  color: #000 !important;
  background-color: transparent !important;
  pointer-events: none;
  display: none;
}
.navigasi img{
    width: 50%;
    height: 50%;
  }
  .LC{
    position:fixed;
    bottom:5px;
    left:14px;
    z-index:100;
    width:60px;
    height:60px;
    }
    .LC1{
      position:fixed;
      bottom:70px;
      left:14px;
      z-index:100;
      width:60px;
      height:60px;
      }
  .promo{
      height: 55px;
      line-height: 55px;
      width: 100%;
      position: relative;
      padding-bottom: 20px;
    }
    .logo{
      z-index: 999;
      width: 30px;
      height: 30px;
    }
    .text{
      position: absolute;
      bottom: 15px;
      width: 100%;
      height: 30px;
      line-height: 30px;
      text-align: center;
      margin: 0px auto;
      z-index: 9999;
    }
        @keyframes warnabg {
      0%   {box-shadow: 1px 1px 15px 15px rgb(255, 17, 0,.5);}
      10%  {box-shadow: 1px 1px 17px 17px rgb(255, 119, 0,.5);}
      20%  {box-shadow: 1px 1px 19px 19px rgb(250, 233, 0,.5);}
      30%  {box-shadow: 1px 1px 21px 21px rgb(104, 250, 0,.5);}
      40%  {box-shadow: 1px 1px 23px 23px rgb(0, 250, 87,.5);}
      50%  {box-shadow: 1px 1px 25px 25px rgb(0, 250, 229,.5);}
      60%  {box-shadow: 1px 1px 23px 23px rgb(0, 62, 250,.5);}
      70%  {box-shadow: 1px 1px 21px 21px rgb(62, 0, 250,.5);}
      80%  {box-shadow: 1px 1px 19px 19px rgb(162, 0, 250,.5);}
      90%  {box-shadow: 1px 1px 17px 17px rgb(250, 0, 212,.5);} 
      100% {box-shadow: 1px 1px 15px 15px rgb(250, 0, 108,.5);}
      }
        @keyframes warna {
      0% {color: gold;}
      10% {color: #ff0000;}
      20% {color: #ffe600;}
      30% {color: #2bff00;}
      40% {color: #00ffea;}
      50% {color: #001aff;}
      60% {color: #b700ff;}
      70% {color: #4d800b;}
      80% {color: #fcfafb;}
      90% {color: #fcad03;} 
      100% {color: gold;}
      }
    .brand{
            background-color: black;
            font-size: 20px;
            font-weight: bolder;
        } 
    .kelapkelip {
        font-family: tahoma, arial, helvetica, sans-serif;
        font-size: 15px;
        color: #fb3c3c;
        animation: kelapkelip 1s ease-out infinite;
    }
    p {
        text-align:justify;
    }
    .site-description ol {
        list-style-type: decimal;
        list-style-position: inside;
    }
    @keyframes kelapkelip { 
    from { 
    text-shadow: 0px 0px 1px #def, 0px 0px 2px #def, 0px 0px 2px #def, 0px 0px 2px #def, 0px 0px 2px #def, 0px 0px 2px #def, 0px 0px 2px #fff, 0px 0px 12px #fff, 0px 0px 5px #fff, 0px 0px 5px #fff, 0px 0px 5px #7B96B8, 0px 0px 5px #7B96B8, 0px 5px 2px #ffffe8, 0px 5px 25px #009BFF, 0px 5px 50px #009BFF, 0px 5px 50px #009BFF, 0px -5px 50px #009BFF, 0px -5px 50px #009BFF; 
    color: #bef8fa, #bef8fa, #bef8fa, #FBD63C, #FBD63C, #FBD63C, #FBD63C, #fb3c3c;
    } 
    }
            .search #searchbar{
        background-color: white;
        border-radius: 10px;
        width: 100%;
        text-align: center;
        height: 30px;
        font-size: 20px;
        font-weight: bolder;
        position: relative;
        margin-left: 0px;
    }
    .search{
        margin-bottom: 20px;
        width: 100%;
        position: relative;
        right: 0px;
        justify-content: right;
    }
    .judul{
      position: relative;
      left: 11%;
      margin-bottom: -10px;
      font-size: 24px;
    }
    .page-wrap{
        display: flex;
        justify-content: center;
        flex-wrap: wrap; 
        width: 100%;
        position: relative;
        margin: 0px auto;
    }
    @media (max-width:850px){
      .topbar{
        text-align: center;
      }
     .isibawah{
      position: absolute;
      right: 0px;
      margin-top: 20px;
    }
    .provider{
      width: 100px;
      margin-top: 10px;
    }
    }
      .isibawah{
        width: 70%;
        height: auto;
        margin: 0px auto;
      }
      .isibawah a{
      width: 100%;
      height: 30px;
      background-color: #ff5d0d;
      box-shadow: 0px 0px 1px 1px rgb(255, 94, 13,.3);
      display: block;
      line-height: 30px;
      border: 1px solid white;
      text-align: center;
      text-decoration: none;
      border-radius: 50px;
      color: Black ;
      font-weight: bolder ;
      font-size: 24px;
      margin-bottom: 10px;
    }
     .isibawah a:hover{
    background-color: #fc8403;
    box-shadow: 0px 0px 5px 5px rgb(252, 132, 3,.5);
     }
          .waktu{
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom:  0px;
    }
    .waktu p{
      color: white;
      text-align: center;
      font-size: 30px;
      font-weight: bolder;
    
    }
    .tPutih{
        color: white;
        text-shadow: 0px 0px 5px black,0px 0px 7px red,0px 0px 10px cyan;
    }
    .tHitam{
        color: black;
        text-shadow: 0px 0px 3px white,0px 0px 5px cyan;
    
    }
    .progress-bar{
        color: black;
        font-weight: bolder;
        font-size: 20px;
    
    }
    .tulisan{
        font-size: 26px;
        font-weight: bolder;
        color: black;
        position: relative;
        top: 55px;
        left: 80px;
    }
.topbar{
    width: 100%;
    height: 82px;
    background-color: #490139;
    position: fixed;
    z-index: 99999;
    top: 0px;
    border-bottom: 5px solid #ff4fe8 ;
    text-align: center;
    animation: warnabg 10s infinite;
    }
    .navigasi{
     position: relative;
     margin-top: 80px;
     text-align: center;
     background-color: #490139;
     width: 100%;
     height:100%;
     line-height: 50px;
     border-bottom: 5px solid #ff4fe8 ;
    }
   
    body {
      background: #333;
      text-align: left;
      color: #eee;
      font-family: system-ui, sans-serif;
      height: 100%;
      margin: 0px;
      background-image: url('../img/bg.webp');
      /* background-color: #000c36; */
     /* background-image: linear-gradient(#000c36, #210909 ); */
    }   
    .body2 .provider a:hover{
      background-color: #ff4fe8;
      position: relative;
      left: 3px;
     }
      #waktu{
       color:#ff9cf2;
     text-shadow: 4px 4px 1px black;
   }
   .body2 .provider a{
      margin: 5px;
      border: 3px solid white;
      width: 75px;
      height: 75px;
      position: relative;
      left: -10px;
      transition: 0.5s;
     }

     .body2 .provider a img{
      width: 75px;
      height: 75px;
      padding:5px;
     }
     .body2{
         width: 100%;
         display: flex;
         flex-wrap: nowrap;
         /* background-color: #000c36; */
     }
     .navigasi ul li{
      list-style-type: none;
      display: inline-block;
      letter-spacing: 3px;
      margin: 15px auto;
      margin-bottom: -20px;
      width: 250px;
      height: 55px;
      background-color: #490139;
      border-radius: 5px;
      line-height: 45px;
      border:5px solid #ff4fe8;
  
     }
     .navigasi ul li a{
      text-decoration: none;
      font-size: 24px;
      color: white;
      font-weight: bolder;
      text-align: center;
     }
     .navigasi ul li:hover{
      background-color: #ff4fe8;
      border:5px solid white;
      color: white;
      box-shadow: 0px 5px 5px 5px rgba(249, 183, 255, 0.7);
     }
      .show a{
        width: 120px;
        height: 120px;
        float: left;
        margin: 5px;
        position: relative;
      }
      .show a span input{
        display: block;
        position: absolute;
        top: 170px;
        width: 210px;
        height: 50px;
        border-radius: 20px;
        box-shadow: 5px 20px 25px gold inset;
        background-color: goldenrod;
        font-weight: bolder;
        color: black;
      }
      .show a span input:hover{
        box-shadow: 5px 5px 10px gold outset;
        background-color: gold;
      }
      .show a span {
        display: block;
        width: 210px;
        height: 250px;
        line-height: 260px;
        background-color: rgba(0,0,0,0.7);
        text-align: center;
        position: absolute;
        top: 0;
        margin-left: -5px;
        margin-top: -5px;
        font-weight: bolder;
        font-size: 16px;
        color:  pink;
        text-shadow: 1px 1px 3px black;
        opacity: 0;
        transform: scale(0) rotateY(180deg);
        transition: .3s;
        z-index: 101;
        border-radius: 20px;
      }
      .show a:hover span{
        opacity: 1;
        transform: scale(1) rotateY(0deg);
        z-index: 99999;
        border-radius: 10px;
      }
      .show a span p{
        text-align: center;
        border-radius: 20px;
      }
      .show a img{
        position: relative;
        height: 220px;
        width: 210px;
        top: -5px;
        left: -5px;
        z-index: 100;
      }
      .show{
         width: 220px;
         height: 260px;
         border: 5px outset #fc89ed;
         border-radius: 10px;
         margin: 10px;
         display: none;
         }
        .provider{
       display: flex;
       justify-content: safe center;
       flex-wrap: wrap;
       padding: 5px;
       width: 210px;
       height: 100%;
       margin-left: 0px;
       position: relative;
       border: 5px solid #ff4fe8;
       border-radius: 10px;
   }
   .copyright{
         font-size: 20px;
         width: 100%;
         height: 78px;
         color: whitesmoke;
         text-align: center;
         line-height: 75px;
         background-color: #490139;
         box-shadow: 1px 1px 15px 15px rgb(255, 255, 250,.3);
         border-top: 3px solid #ff4fe8;
       }
  
       .copyright a{
         color: gold;
         text-decoration: none;
         animation: warna 20s infinite;
       }
       .progress{
          width:210px;
          height:30px;
          position: relative;
          bottom: -90px;
          border: 3px inset black;
          border-radius: 30px;
      }
      .navigasi img{
        margin-left: 30px;
      }
      .iklan img{
        border:2px solid white;
        margin-bottom:20px;
      }