html {margin: 0;padding: 0;}
body {margin: 0;padding: 0;color:#414141;font-size:16px !important;font-family:"Arial";background:#e9e9e9;}

.relative{position:relative !important;}
.static{position:static !important;}
.absolute{position:absolute !important;}
.fixed{position:fixed !important;}
.stick-fixed{position: fixed !important;top: 0;left: 0;}
.transition-height{-webkit-transition:height .17s cubic-bezier(0,0,.58,1);-moz-transition:height .17s cubic-bezier(0,0,.58,1);-o-transition:height .17s cubic-bezier(0,0,.58,1);-ms-transition:height .17s cubic-bezier(0,0,.58,1);transition:all .55s cubic-bezier(.645,.045,.355,1) 0s;}
.main-nav{}
.menuside:hover .sidebar{top:15vh;}

/* start flex */
.flexcenter{display: flex;justify-content: center;align-items: center;}
.flexleft{display: flex;justify-content: left;align-items: center;}
.flexright{display: flex;justify-content:right;align-items: center;}
/* finish flex */

/* start header top */
.header-top{position:fixed;top:0;left:0;right:0;padding:0 0;z-index:999999999;}
.topleft{float:left;height:50px;margin:0 0 0 20px;}
.topleft img{width:auto;height:20px;margin:0 5px 0 0;opacity:0.7;}
.header-top h2{float:left;font-size:90%;font-weight:normal;padding:0;margin:0 15px 0 0;position:relative;z-index:2;line-height:1.1;color:#fff;}
.icon-top{float:right;height:50px;background-color:rgba(255,255,255,0.2);border-left:rgba(0,0,0,0.3) 1px solid;padding:0 10px;}
.icon-top img{width:auto;height:20px;opacity:0.7;}
.header-top .dropdown-toggle:after{display:none !important;}
.header-top-search{float:right;width:25%;position:relative;margin:0 0 0 0;}
.header-top-search .form-control {
  position:relative;
  height:50px;
  line-height:50px;
  border-radius:0;
  padding: 0 50px 0 10px;
  font-size: 90%;
  color: #fff;
  margin:0 0 0 0!important;
  border:none;
  background-color:transparent;
  text-align:right;
}
.pencarian {position:relative;}
.pencarian .form-control {height:40px;line-height:40px;padding: 0 50px 0 10px;}
.header-top-search .form-control:focus{color: #fff;box-shadow:none;outline:none;}
.pencarian .form-control:focus{box-shadow:none;outline:none;}
.header-top-search .form-control::-moz-placeholder {color: #fff;}
.header-top-search .form-control:-ms-input-placeholder {color: #fff;}
.header-top-search .form-control::-webkit-input-placeholder {color: #fff;}
.go-search img{width:22px;height:22px;opacity:0.7;}
.go-search svg{fill: #fff;width:20px;height:20px;opacity:0.7;}
.go-search{position:absolute;right:5px;top:0;height:50px;width:40px;padding:0;margin:0;border:none;outline:none;box-shadow:none;background:transparent;}
.pencarian .go-search{height:40px;width:30px;}
.online-visitor{float:right;height:50px;padding:0 10px;border-left:rgba(0,0,0,0.3) 1px solid;}
.online-visitor p, .online-visitor h4{line-height:1;padding:0;margin:0;font-size:90%;color:#fff;}
.online-visitor h4{font-weight:bold;margin:0 0 0 5px;font-size:100%;}
#warna .dropdown-menu, #terbaru .dropdown-menu{
  position: absolute;
  top:50px;
  left:auto;
  right:0 !important;
  float: none;
  width:230px;
  margin:0;
  padding:10px;
  border-radius:none;
  border:none !important;
  z-index:800 !important;
  border-radius:0 0 5px 5px !important;
  margin-top:0;
  z-index:1090 !important;
}
/* finish header top */

/* start panel */
.panel-hadir{
  width:0;
  position: fixed;
  top:50px;
  right:0;
  bottom:0;
  overflow: hidden;
  transition: 0.5s;
  z-index:999999;
}
.panel-left{
  display:none;
  position: fixed;
  top: 50px;
  left:22%;
  right:0;
  bottom:0;
  overflow: hidden;
  transition: 0.5s;
  z-index:0;
}
.panel-hadir-area{position:absolute;top:0;right:0;bottom:0;width:22%;overflow:hidden;}
.panel-hadir-inner{position:absolute;top:40px;right:15px;bottom:0;left:15px;overflow:hidden;}
.panel-hadir-box{position:absolute;top:50px;right:0;bottom:0;left:0;overflow:hidden;}
.panel-left-area{position:absolute;top:30px;left:30px;right:30px;bottom:30px;border-radius:5px;overflow:hidden;}
.panel-left-absolute{position:absolute;top:64px;left:20px;right:20px;bottom:20px;-webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.15);-moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.15);box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.15);border-radius:5px;}
.sidepanel, .sidepanelmap {
  width: 0;
  position: fixed;
  top: 50px;
  right: -1px;
  bottom:0;
  background-color: #fff;
  overflow: hidden;
  transition: 0.5s;
  border-left:#bdbdbd 1px solid;
}
.rightpanel{
  width: 0;
  position: fixed;
  top: 0;
  left: -1px;
  bottom:0;
  overflow: hidden;
  transition: 0.5s;
  background-color:rgba(0,0,0,0.5);
  z-index:99999999999;
}
.sidepanel-inner{position:absolute;top:40px;left:0;right:0;bottom:0;padding:15px;}
.rightpanel-inner{position:absolute;top:0;left:0;right:45px;bottom:0;padding-bottom:200px;}
/* finish panel */

/* start change */
.to-dark, .to-light{float:right;width:45px;height:50px;border-left:rgba(0,0,0,0.2) 1px solid;padding:0 10px;color:#dbdbdb;font-size:90%;margin:0;line-height:1.2;background:rgba(0,0,0,0.3);}
.to-dark img, .to-light img{width:auto;height:24px;}
.to-dark a{color:#dbdbdb;}
.to-dark a:hover{color:#fff;}
.to-light{background:rgba(255,255,255,0.5);display:none;}
/* finish change */

/* start leftside */
.menuside{position:fixed;left:0;top:50px;width:22%;bottom:0;z-index:900;z-index:99999999;font-size:16px !important;}
.logo-container{position:absolute;top:0;left:0;right:0;text-align:center;height:30vh;background-repeat:no-repeat;background-position:center;background-size:cover;}
.logo-container-cover{position:absolute;top:0;left:0;right:0;bottom:0;opacity:0.75;}
.logo{position:relative;overflow:hidden;text-align:center;min-height:12vh;z-index:99999999;padding:0 0;margin:0 20px 10px;transition: all 0.2s linear 0s;-webkit-transition: all 0.2s linear 0s;-moz-transition: all 0.2s linear 0s;-o-transition: all 0.2s linear 0s;}
.logo img{display:block;margin:0 auto 5px;width:auto;height:12vh;transition: all 0.2s linear 0s;-webkit-transition: all 0.2s linear 0s;-moz-transition: all 0.2s linear 0s;-o-transition: all 0.2s linear 0s;}
.logo-title{position: relative;overflow: hidden;margin:0 auto;text-align:center;}
.logo-title h1{position:relative;overflow:hidden;font-size:125%;text-transform:uppercase;padding:0;line-height:1.1;margin:0 0;font-weight:bold;background: linear-gradient(90deg, transparent, #fff, transparent);background-repeat: no-repeat;background-size: 80%;animation: animate 5s linear infinite;-webkit-background-clip: text;-webkit-text-fill-color: rgba(255, 255, 255, 0);}
.logo-title-back{position:absolute;left:0;top:0;right:0;bottom:0;text-align:center;}
.logo-title-back h3{font-size:125%;text-transform:uppercase;padding:0;line-height:1.1;margin:0 0;font-weight:bold;color:rgba(255,255,255,0.6);}
.logo-small{font-size:80%;font-weight:500;}
.logo-desk{position:relative;overflow:hidden;text-align:center;line-height:1.1;font-size:90%;padding:0;margin:0 20px;color:#fff;}
.logo-absolute{position:absolute;left:0;right:0;top:50%;-webkit-transform: translate3d(0, -50%, 0);-moz-transform: translate3d(0, -50%, 0);-ms-transform: translate3d(0, -50%, 0);-o-transform: translate3d(0, -50%, 0);transform: translate3d(0, -50%, 0);}
.menuside:hover .logo-container{height:15vh;}
.menuside:hover .logo{min-height:10vh;margin:0 20px 0;display: flex;justify-content: center;align-items: center;}
.menuside:hover .logo img{margin:0 5px 0 auto;height:10vh;} 
.menuside:hover .logo-title{margin:0 auto 0 0;text-align:left;}
.menuside:hover .logo-title h1, .menuside:hover .logo-title-back h3{font-size:110%;text-align:left;}
.menuside:hover .logo-desk{display:none;}

/* finish leftside */

/* start global */
.withscroll {width:100%;float:left;overflow-y: scroll;scrollbar-color:rgba(0,0,0,0.1) transparent;scrollbar-width: thin;height:100%;}
.withscroll::-webkit-scrollbar {width: 5px;}
.withscroll::-webkit-scrollbar-track {background:transparent;}
.withscroll::-webkit-scrollbar-thumb {background:rgba(0,0,0,0.1);}
.withscroll-padding{padding:15px;position:relative;overflow:hidden;}
.mainbody{position:absolute;top:50px;left:22%;right:0;}
.mainbody-container{position:absolute;top:0;left:0;right:0;}
.gridview{position:relative;padding:0 0;margin:0 0;display: grid;grid-template-columns:70% auto;border-bottom:#bdbdbd 1px solid;}
.borderbatas{border-top:#bdbdbd 1px solid;}
.sidebarright {grid-template-columns: 30% auto;float:right !important;margin:0 0 0 auto;min-height:calc(100vh - 50px);border-left:#bdbdbd 1px solid;}
.sidebarright ul {list-style: none;margin:0 0 0 0;padding: 0;position:relative;overflow:hidden;}
.sidebarright ul {position: sticky !important;top:50px;}
.box-default{position:relative;overflow:hidden;padding:10px;border:#bdbdbd 1px solid;margin:0;border-radius:5px;-webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.15);-moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.15);box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.15);}
.relative-hidden{position:relative;overflow:hidden;width:100%;}
.absolute-title{position:absolute;bottom:0;left:0;right:0;padding:0 10px 10px;z-index:8;transition: all 0.2s linear 2s;-webkit-transition: all 0.2s linear 2s;-moz-transition: all 0.2s linear 0s;-o-transition: all 0.2s linear 2s;}
.absolute-title h2{font-size:100%;margin:0 0 5px;padding:0;line-height:1.1;color:#fff;font-weight:bold;}
.absolute-title h3{font-size:100%;margin:0 0 5px;padding:0;line-height:1.1;color:#dbdbdb;font-weight:normal;}

.absolute-title-aparatur{position:absolute;width:100%;text-align:center;bottom:0;left:0;right:0;padding:0 0 10px;z-index:8;transition: all 0.2s linear 2s;-webkit-transition: all 0.2s linear 2s;-moz-transition: all 0.2s linear 0s;-o-transition: all 0.2s linear 2s;}
.absolute-title-aparatur h3{font-size:100%;margin:0 auto 5px;padding:0 10px;line-height:1.1;color:#fff;font-weight:bold;}
.absolute-title-aparatur p{font-size:100%;margin:0 auto 5px;padding:0 10px;line-height:1.1;color:#dbdbdb;font-weight:normal;}
.bottom-gradient{position:absolute;left:0;top:0;right:0;bottom:0;z-index:2;background: rgb(0,0,0);
background: -moz-linear-gradient(90deg, rgba(0,0,0,1) 0%, transparent 40%, transparent 100%);
background: -webkit-linear-gradient(90deg, rgba(0,0,0,1) 0%, transparent 40%, transparent 100%);
background: linear-gradient(90deg, rgba(0,0,0,1) 0%, transparent) 40%, transparent 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#000000",endColorstr="transparent",GradientType=1);}
.map-home{height:200px;border-radius:5px;}
.sliderstyle{position:relative;overflow:hidden;min-height:50vh;margin:15px 20px 0;border-radius:7px;}
.running-home{position:relative;overflow:hidden;}
.running-home p{font-size:100%;line-height:1.1;padding:0 !important;margin:0 !important;color:#414141;opacity:1 !important;}
.running-page{position:relative;overflow:hidden;margin:0 -20px;}
.running-info{padding:7px 15px 7px 10px;border-radius:5px;}
.running-info h3{font-size:100%;line-height:1.1;padding:0;margin:0;color:#fff !important;font-weight:normal;}
.pimpinan{position:relative;overflow:hidden;padding:10px;margin:0 0 10px;border:#bdbdbd 1px solid;}
.running-info img{width:auto;height:20px;margin:0 5px 0 0;}
.pimpinan img{float:right !important;width:30%;height:auto;margin:0 0 0 auto !important;}
.pimpinan h2{padding:0;margin:0 10px 0 0;line-height:1.4;font-size:100%;color:#414141 !important;}
.terbaru{position:relative;overflow:hidden;padding:0 0 0 15px;margin:5px 0;line-height:1.2;font-size:14px !important;}
.terbaru:after{content:"";position:absolute;top:5px;left:0;width:8px;height:8px;border-radius:8px;background:#bdbdbd;}
.pilih{position:relative;overflow:hidden;margin:5px 0;height:20px;}
.pilih p{font-size:100%;margin:0 0 0 7px;padding:0;line-height:1.2;}
.pilih-hijau{float:left;width:18px;height:18px;background:#00d018;color:#00d018;}
.pilih-biru{float:left;width:18px;height:18px;background:#0098d8;color:#0098d8;}
.pilih-merah{float:left;width:18px;height:18px;background:#d51c1c;color:#d51c1c;}
.pilih-toska{float:left;width:18px;height:18px;background:#00a5a3;color:#00a5a3;}
.pilih-ungu{float:left;width:18px;height:18px;background:#ac3f82;color:#ac3f82;}
.pilih-abu{float:left;width:18px;height:18px;background:#8e8e8e;color:#8e8e8e;}
#warna .dropdown-menu h3{display:block;font-weight:normal;margin:0;padding:0;line-height:1.2;font-size:100%;}
.tombol{display:inline-block;outline:none;padding:7px 10px;margin:0;box-shadow:none;color:#fff;font-weight:normal;cursor:pointer;border-radius:5px;border:none;}
.tombol:hover{color:#fff;}
.tombol-small{margin:5px 3px;padding:7px 10px;outline:none;border:none;box-shadow:none;border-radius:4px;cursor:pointer;}
.tombol-small p{font-size:90%;margin:0;padding:0;float:right;line-height:1.1;font-weight:normal;color:#fff;}
.tombol-small img{float:left;margin:0 5px 0 0;width:auto;height:16px;}
.indikator h2{font-size:110%;margin:0 0 10px;padding:0;line-height:1.2;font-weight:bold;}
.indikator h3{font-size:100%;margin:0 0 10px;padding:0;line-height:1.2;font-weight:bold;}
.box-standar{position:relative;overflow:hidden;padding:10px;border-radius:4px;border:#bdbdbd 1px solid;margin:0 0 20px;}
.heading-keterangan{position:relative;overflow:hidden;padding:15px;font-size:100%;font-weight:normal;margin:0 0 20px;line-height:1.2;border:#bdbdbd 1px solid;}
.statisstyle .box-header h3{font-size:160%;margin:10px 1rem 20px;font-weight:bold;line-height: 1.2;padding:0;text-transform:uppercase;}
.statisstyle .box-body {margin:0 1rem;}
table, .statisstyle table{width:100% !important;}
td {font-size:100% !important;}
/* finish global */

/* start column */
.column-2{width:50%;float:left;}
.column-2b{width:50%;float:left;margin:0 0 10px;}
.gallerystyle .column-2{margin:0 0 20px;}
.column-3{width:33.33333333%;float:left;margin:0 0;}
.column-4{width:25%;float:left;margin:0 0;}
.column-3b{width:33.33333333%;float:left;margin:0 0;}
.column-5{width:20%;float:left;margin:0 0 20px;}
.column-6{width: 16.66666667%;float:left;margin:0 0 10px;}

/* finish column */

/* start margin padding */
.margin-min3{margin:0 -3px;}
.padding-lr-3{padding:0 3px;}
.margin-min5{margin:0 -5px;}
.padding-lr-5{padding:0 5px;}
.margin-min7{margin:0 -7px;}
.padding-lr-7{padding:0 7px;}
.margin-min10{margin:0 -10px;}
.padding-lr-10{padding:0 10px;}
.margin-min15{margin:0 -15px;}
.padding-lr-15{padding:0 15px;}
.margin-min20{margin:0 -20px;}
.padding-lr-20{padding:0 20px;}
.mlr-min20{margin:0 -20px;position:relative;overflow:hidden;}
.mlr-20{margin:0 20px;}
.mlr-25{margin:0 25px;}
.mlr-5{margin:0 5px;}
.mlr-0{margin:0 0;}
.mlr-0{margin:0;}
.pd-10{padding:10px;}
.mb-10{margin-bottom:10px !important;}
.mb-20{margin-bottom:20px;}
.mt-20{margin-top:20px !important;}
.mt-10{margin-top:10px !important;}
/* finish margin padding */

/* start carouselright */
.carouselright {background:transparent;position: relative;overflow:hidden;}
.statistik .carouselright{padding:0 35px;}
.album .carouselright, .sinergi .carouselright, .aparatur-home .carouselright, .aparatur-right .carouselright, .lapakstyle .carouselright, .videostyle .carouselright{padding:54px 5px 0;margin-top:-44px;}
.carouselright-cell {width: 100%;counter-increment: gallery-cell;}
.statistik .carouselright-cell {width: 33.33333333%;}
.album .carouselright-cell {width: 50%;}
.sinergi .carouselright-cell {width: 25%;}
.lapakstyle .carouselright-cell {width: 33.33333333%;}
.videostyle .carouselright-cell {width: 33.33333333%;}
.flickity-enabled {position: relative;}
.flickity-enabled:focus { outline: none;}
.flickity-viewport {overflow: hidden;position: relative;height: 100%;z-index: 2;}
.flickity-slider {position: absolute;width: 100%;height: 100%;}
.flickity-enabled.is-draggable {-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;}
.flickity-enabled.is-draggable .flickity-viewport {cursor: move;cursor: -webkit-grab;cursor: grab;}
.flickity-enabled.is-draggable .flickity-viewport.is-pointer-down {cursor: -webkit-grabbing;cursor: grabbing;}
.flickity-prev-next-button {position: absolute;top:0;width: 25px;height: 25px;background-color:transparent;background-size: 60% auto;background-position: center;background-repeat: no-repeat;cursor: pointer;z-index:10;border-radius:4px;}
.flickity-prev-next-button.previous {left:6px;background-position: center;background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E");}
.flickity-prev-next-button.next { right: 6px;background-position: center;background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E");}
.flickity-prev-next-button:disabled {filter: alpha(opacity=0); /* IE8 */opacity: 0;cursor: auto;}
.flickity-prev-next-button svg {display:none;}
.flickity-page-dots {display:none;}
.sliderstyle .flickity-prev-next-button{top:50%;-webkit-transform: translate3d(0, -50%, 0);-moz-transform: translate3d(0, -50%, 0);-ms-transform: translate3d(0, -50%, 0);-o-transform: translate3d(0, -50%, 0);transform: translate3d(0, -50%, 0);opacity:0;border:none;}
.sliderstyle:hover .flickity-prev-next-button{opacity:1;}
.sliderstyle .flickity-prev-next-button.next{right:15px;}
.sliderstyle .flickity-prev-next-button.previous {left:15px;}
.statistik .flickity-prev-next-button, .utkartikel .flickity-prev-next-button{background-size: 40% auto;width: 25px;height: 50px;top:50%;-webkit-transform: translate3d(0, -50%, 0);-moz-transform: translate3d(0, -50%, 0);-ms-transform: translate3d(0, -50%, 0);-o-transform: translate3d(0, -50%, 0);transform: translate3d(0, -50%, 0);}
.album .flickity-prev-next-button, .sinergi .flickity-prev-next-button, .aparatur-home .flickity-prev-next-button, .aparatur-right .flickity-prev-next-button, .lapakstyle .flickity-prev-next-button, .videostyle .flickity-prev-next-button{width:44px;height:44px;background-size:20% auto;background-position: center;border:none;}
.album .flickity-prev-next-button.previous, .sinergi .flickity-prev-next-button.previous {left:10px;}
.album .flickity-prev-next-button.next, .sinergi .flickity-prev-next-button.next {right:10px;}
.aparatur-home .flickity-prev-next-button.previous, .aparatur-right .flickity-prev-next-button.previous{left:0;}
.aparatur-home .flickity-prev-next-button.next, .aparatur-right .flickity-prev-next-button.next {right:0;}
.statistik .flickity-prev-next-button.previous {border-left:none;border-radius:0 5px 5px 0;left:0;background-position: center;}
.statistik .flickity-prev-next-button.next { border-right:none;border-radius:5px 0 0 5px;right: 0;background-position: center;}
/* finish carouselright */

/* start image */
.image-slider, .image-height-default, .image-height-medium, .image-height-tall, .image-aparatur, .image-lapak{width: 100%;display: block;position: relative;overflow:hidden;background-size:cover;background-repeat:no-repeat;background-position:center;border-radius:5px;}
.image-slider{height:60vh;border-radius:7px;}
.image-height-default{padding-bottom:60%;}
.category-image .image-height-default{padding-bottom:75%;}
.image-height-medium{padding-bottom:70%;}
.image-height-tall{padding-bottom:90%;}
.image-aparatur{height:45vh;}
.image-lapak{padding-bottom:60%;}
.image-slider img, .image-height-default img, .image-height-medium img, .image-height-tall img, .image-aparatur img, .image-lapak img, .foto-hadir img{display:block;width:100%;height:100%;position: absolute;top: 50%;left: 50%;margin:0 auto;object-fit: cover;-webkit-transform: translate3d(-50%, -50%, 0);-moz-transform: translate3d(-50%, -50%, 0);-ms-transform: translate3d(-50%, -50%, 0);-o-transform: translate3d(-50%, -50%, 0);transform: translate3d(-50%, -50%, 0);}
.logo-no-image img{display:block;width:20%;height:auto;position: absolute;top: 0%;left: 50%;margin:0 auto;object-fit: cover;-webkit-transform: translate3d(-50%, -50%, 0);-moz-transform: translate3d(-50%, -50%, 0);-ms-transform: translate3d(-50%, -50%, 0);-o-transform: translate3d(-50%, -50%, 0);transform: translate3d(-50%, -50%, 0);}
.logo-no-image img{top:50%;}
.image-slider-shadow{position:absolute;left:0;top:0;right:0;bottom:0;-webkit-box-shadow: inset 0px 0px 15px 0px rgba(0,0,0,0.5);-moz-box-shadow: inset 0px 0px 15px 0px rgba(0,0,0,0.5);box-shadow: inset 0px 0px 15px 0px rgba(0,0,0,0.5);}
/* finish image */

/* start headline */
.headline{position:relative;width:100%;float:left;margin:0;border-radius:7px;}
.headline-judul{position:relative;margin:15px 0 0 -20px;display:inline-block;}
.headline-judul:after{content:"";position:absolute;bottom:-10px;left:0;border-left:transparent 10px solid;border-top:#000 10px solid;}
.headline h1{position:relative;display:inline-block;margin:0;padding:10px 20px;line-height:1.2 !important;font-size:100%;font-weight:bold;color:#fff;}
.headline h2{display:block;font-size:110%;font-weight:bold;color:#fff;margin:15px 0 0;padding:0;}
.headline p{display:block;font-size:90%;font-weight:500;color:#fff;margin:5px 0 0;padding:0;line-height:1.1;}
.headline-image{width:40%;float:right;margin:0 0 10px 10px;position:relative;}
/* finish headline */

/* start fortab */
.fortab{position:relative;width:100%;float:left;margin:-44px 0 0;}
.fortab-inner{position:relative;}
.main{margin:0 auto 0;width:100%;position:relative;}
.content2{width:100%;margin:0 0 0;padding:10px 0 0;position:relative;z-index:1;overflow: hidden;}
.content2 > div{display: none;padding:0 0 0;position:relative;text-align:left;z-index:1;width:100%;height:auto;}
.fortab input{display:none;}
.fortab label{position:relative;width:auto;margin:0;text-align:center;padding:0;width:28px;height:44px;font-weight:normal;float:left;font-size:100%;cursor:pointer;z-index:2;}
.fortab label img{width:auto;height:16px;float:left;opacity:0.6;}
.fortab input:checked + label{opacity:1;}
.fortab input:checked + label:after{content:"";position: absolute;left: 50%;bottom:0;margin:0;border-left: 8px solid transparent;border-right:8px solid transparent;border-bottom:6px solid #fff;-webkit-transform: translate3d(-50%, 0, 0);-moz-transform: translate3d(-50%, 0, 0);-ms-transform: translate3d(-50%, 0, 0);-o-transform: translate3d(-50%, 0, 0);transform: translate3d(-50%, 0, 0);}
#tab_one:checked ~ .content2 #content2_one, #tab_two:checked ~ .content2 #content2_two, #tab_three:checked ~ .content2 #content2_three{display:block;}
/* finish fortab */

/* start article home */
.article-home-image{width:40%;float:left;}
.article-home-title{width:60%;float:right;}
.article-home-title h2{font-size:100%;margin:10px 0 10px;padding:0;line-height:1.1;font-weight:bold;}
.info{font-size:100%;margin:0 10px 5px 0;padding:0;line-height:1.1;font-weight:normal;float:left;}
.info i.fa{margin:0 5px 0 0;padding:0;line-height:1 !important;opacity:0.6;}
.article-home-title p{font-size:100%;margin:5px 0 0;padding:0;line-height:1.1;font-weight:normal;}
.intro-article-posting{float:left;width:50px;text-align:center;border:#bdbdbd 1px solid;}
.intro-tanggal{font-size:140%;font-weight:normal;color:#fff;margin:0;padding:0;line-height:1;height:40px;background:#dbdbdb;}
.intro-bulan{font-size:100%;font-weight:normal;margin:0;padding:0;line-height:1.1;height:54px;}
.intro-article-isi{position:relative;overflow:hidden;margin-left:60px;font-size:100%;font-weight:normal;padding:0;line-height:1.1;}
/* finish article home */

/* start heading */
.heading-module{position:relative;overflow:hidden;border-radius:5px;}
.heading-module h1{position:relative;font-size:100%;margin:0 10px;padding:0;line-height:1;font-weight:bold;text-transform:uppercase;color:#fff;height:44px;}
.heading-icon{position:relative;float:right;height:44px;padding:0;border-radius:3px;margin:0 10px 0 0;}
.heading-icon img{width:auto;height:16px;float:left;margin:0 5px 0 0;opacity:0.6;}
.heading-icon p{font-size:100%;margin:0;padding:0;line-height:1.1;font-weight:normal;color:#fff;}
#listkategori .dropdown-menu{font-size:100% !important;right:0;padding:15px;margin:0 0 0 !important;border:#bdbdbd 1px solid;left:auto;top:54px;}
.heading-border-bottom h1{font-size:100%;margin:0 0 15px;padding:0 0 5px;line-height:1.1;font-weight:bold;border-bottom:#bdbdbd 1px solid;}
.heading-module-image{position:relative;float:left;width:44px;height:44px;margin-right:10px;background-color:rgba(255,255,255,0.2);}
.heading-module-image:after{content:"";position:absolute;left:0;top:0;border-top:rgba(0,0,0,0.1) 44px solid;border-right:transparent 44px solid;}
.heading-module-image img{width:30px;height:30px;}
/* finish heading */

/* start statistik */
.stat-penduduk {position:relative;overflow:hidden;padding:20px;border-radius:5px;}
.stat-penduduk p{font-size:100%;margin:0;padding:0;line-height:1.1;font-weight:normal;}
.stat-penduduk h3{font-size:130%;margin:0;margin-right:5px;padding:0;line-height:1.1;font-weight:normal;}
.stat-penduduk i.fa{margin:0 6px 0 0;padding:0;line-height:1 !important;font-size:220%;opacity:0.4;}
.box-statistik{text-align:center;}
.box-statistik-image{position: relative;overflow: hidden;padding:25px 15px;border:#d0d0d0 1px solid;border-radius:5px;background: #d0d0d0;background: -moz-linear-gradient(0deg, #d0d0d0 0%, #f0f0f0 64%);background: -webkit-linear-gradient(0deg, #d0d0d0 0%, #f0f0f0 64%);background: linear-gradient(0deg, #d0d0d0 0%, #f0f0f0 64%);filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#d0d0d0",endColorstr="#f0f0f0",GradientType=1);}
.box-statistik-image img{display:block;margin:0 auto;width:80%;height:auto;transition: all 0.2s linear 0s;-webkit-transition: all 0.2s linear 0s;-moz-transition: all 0.2s linear 0s;-o-transition: all 0.2s linear 0s;}
.box-statistik:hover .box-statistik-image img{-webkit-transform: scale (1.2);-moz-transform: scale (1.2);-ms-transform: scale (1.2);transform: scale(1.2);}
.box-statistik h2{position:relative;display:block;font-size:100%;margin:0 0 0;padding:15px 0 0;line-height: 1.2;color:#000;font-weight:500;z-index: 2;}
.box-statistik:hover h2{color:#196529;}
.box-statistik h2:after{content:"";position: absolute;top:-1px;border-top:#d0d0d0 10px solid;border-left:transparent 12px solid;border-right:transparent 12px solid;left: 50%;margin:0 auto;-webkit-transform: translate3d(-50%, 0, 0);-moz-transform: translate3d(-50%, 0, 0);-ms-transform: translate3d(-50%, 0, 0);-o-transform: translate3d(-50%, 0, 0);transform: translate3d(-50%, 0, 0);}
/* finish statistik */

/* start anggaran */
.anggaran{margin:0 0 20px;}
.anggaran h2{font-size:100%;margin:0 0 5px;padding:0;line-height:1.1;font-weight:bold;}
.anggaran p{font-size:100%;margin:0 0 0;padding:0;line-height:1.1;font-weight:normal;}
.progress {
	position:relative;
  height: 18px !important;
  margin-bottom: 0;
  background-color: transparent !important;
  border-radius: 0;
  -webkit-box-shadow:none;
          box-shadow: none;
}
.progress:after{content:"";position:absolute;left:0;width:100%;height:10px;top:4px;z-index:1;border-radius:10px;}
.progress-bar {
  font-size:16px;
  line-height: 18px;
  color: #000;z-index:3;
  text-align: center;
  -webkit-box-shadow: none;
          box-shadow: none;
}
.progress-bar span{position:absolute;right:0;top: 50%;-webkit-transform: translate3d(0, -50%, 0);-moz-transform: translate3d(0, -50%, 0);-ms-transform: translate3d(0, -50%, 0);-o-transform: translate3d(0, -50%, 0);transform: translate3d(0, -50%, 0);background:#fff;padding:0 2px;font-size:85% !Important;}

.progress-custom{position: relative;background-repeat: no-repeat;background-size: 80%;animation: animate 5s linear infinite;height:10px;margin-top:4px;z-index:2;border-radius:10px;}
@keyframes animate {
  0% {
    background-position: -500%;
  }
  100% {
    background-position: 500%;
  }
}
/* finish anggaran */

/* start sinergi */
.sinergi img{width:auto;height:80px;display:block;margin:0 auto 0;max-width:100% !important;}
.sinergi p{font-size:100%;margin:5px 0 0;padding:0;line-height:1.2;font-weight:normal;}
/* finish sinergi */

/* start identitas */
.identitas{position:relative;overflow:hidden;margin:0 0 10px;padding:0;border-radius:5px;}
.identitas-title{position:relative;overflow:hidden;font-size:100%;padding:0;margin:0 0;line-height:1;z-index:2;color:#fff;border-radius:5px;text-transform:uppercase;cursor:pointer;height:44px;}
.covidstyle .identitas-title{text-transform:capitalize;}
.identitas-title:after{content:"";position:absolute;left:0;top:0;border-top:44px solid #fff;border-right:44px solid transparent;z-index:1;opacity:0.2;}
.identitas-title img{width:auto;height:44px;margin:0 0 0 0;position:relative;z-index:2;background:rgba(255,255,255,0.2);padding:7px;}
.identitas-title a, .identitas-title a:hover, .identitas-title:focus, .identitas-title.active{color:#fff;}
.panelopen{position:relative;overflow:hidden;margin:-15px 0 10px;padding:25px 10px 10px;font-size:90%;border-radius:5px;}
#accordion {
  margin: auto;
}
.panel-heading a {
  display: block;
  position: relative;
  font-weight: bold;
  width:100%;
}
.panel-heading a::after {
  content: "";
  border: solid #fff;
  border-width: 0 2px 2px 0;
  display: inline-block;
  padding: 5px;
  position: absolute;
  right: 10px !important;
  top: 12px;
  float:right;
  transform: rotate(45deg);
}
.covidstyle .panel-heading a::after {
  right: -20px !important;
  top: 0px;
}
.panel-heading a[aria-expanded=true]::after {
  transform: rotate(-135deg);
  top: 18px;
}
.covidstyle .panel-heading a[aria-expanded=true]::after {
  top: 6px;
}
/* finish identitas */

/* start komentar agenda */
.komentar{width:100%;float:left;margin:0 0 15px;}
.komentar h2, .komentar h3{font-size:100%;margin:0 0 5px;padding:0;line-height:1.1;font-weight:bold;}
.komentar h3{font-weight:normal;margin:0 0 5px 15px;}
.speak{position: relative;overflow:hidden;margin:0 0 0 15px;font-size:100%;line-height:1.1;padding:0;color:#919191;}
.speak-quote{width:20px;float:left;}
.speak-quote img{width:100%;height:auto;}
.speak-title{position:relative;overflow:hidden;margin-left:25px;}
.agenda{margin:0 0 20px;}
.agenda-row{position: relative;overflow: hidden;}
.agenda-row h3{font-size:100%;font-weight:500;margin:0;line-height: 1.2;padding:0;}
.agenda-title{position:relative;font-size:100%;font-weight:bold;margin:0 0 10px;line-height: 1.2;padding:0 0 0 20px;display:block;}
.agenda-title:before{content:"";position:absolute;left:0;top:4px;border-top:#bdbdbd 12px solid;border-left:transparent 10px solid;border-right:transparent 10px solid;}
.agenda h2{font-size:100%;font-weight:bold;margin:0 0 5px 46px;line-height: 1.2;padding:0;color:#000;display:block;}
.agenda p{font-size:100%;font-weight:500;margin:0 0 0 46px;line-height: 1.2;padding:0;display:block;}
.agenda-row img{float:left;width:auto;height:40px;margin:0 5px 0 0;vertical-align:text-top;}
.no-data{margin:0 0 20px;position: relative;overflow: hidden;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-ms-flex-align:center;align-items:center;text-align: center !important; }
.no-data p{font-size:100%;font-weight:normal;margin:0 auto 0 0;line-height: 1.2;padding:0;color:#000;float:left;text-align: left;}
.no-data img{float:left;margin:0 0 0 auto;width:auto;height: 60px;margin:0 5px 0 0;}
.box-height-custom{position:relative;overflow:hidden;height:230px;}
/* finish komentar agenda */

/* start layanan */
.layanan-intro{width:50%;float:left;}
.layanan-intro img{width:100%;}
.layanan-login{width:50%;float:right;}
.dapat-pin{font-size:100%;color:rgba(255,255,255,0.7);margin:0 0 0 0;padding:0;line-height:1.1;text-align:left;}
.dapat-pin img{float:left;width:auto;height:34px;margin:0 5px 0 0;opacity:0.6;}
.masuk{padding:0 10px;height:40px;background:rgba(0,0,0,0.3);color:#fff;border-radius:5px !important;}
.masuk:hover{background:rgba(0,0,0,0.5);color:#fff;}
.layanan-intro-padding{position:relative;overflow:hidden;padding:15px;border-radius:5px;margin:0 20px 0 0;}
.layanan .form-control {
  position:relative;
  height:40px;
  padding: 0 50px 0 10px;
  font-size: 100%;
  line-height:40px;
  background-image: none;
  margin:0 0 10px!important;
  border-radius:5px;
}

/* finish layanan */

/* start side icon */
.side-icon{text-align:center;margin:0 0 6px;position:relative;padding:7px 5px;border-radius:10px;-webkit-box-shadow: inset 0px 0px 5px 0px rgba(255,255,255,0.4);-moz-box-shadow: inset 0px 0px 5px 0px rgba(255,255,255,0.5);box-shadow: inset 0px 0px 5px 0px rgba(255,255,255,0.3);background:#d6d6d6;cursor:pointer;z-index:2;border:#a7a7a7 1px solid;}
.side-icon:after{content:"";position:absolute;top:2px;left:2px;right:2px;bottom:2px;border-radius:7px;-webkit-box-shadow: inset 0px 0px 7px 0px rgba(0,0,0,0.2);-moz-box-shadow: inset 0px 0px 7px 0px rgba(0,0,0,0.2);box-shadow: inset 0px 0px 7px 0px rgba(0,0,0,0.2);}
.side-icon p{font-size:14px !important;padding:0;line-height:1;margin:0;font-weight:normal;color:#000 !important;}
.side-icon img{width:auto;height:30px;margin:2px auto 2px;z-index:2;}
.side-icon:hover img{transform: rotateY(360deg);
	-moz-transform: rotateY(360deg);
	-webkit-transform: rotateY(360deg);
	transform-origin: center;
	-moz-transform-origin: center;
	-webkit-transform-origin: center;
	transition: transform 1.0s }
	
.side-iconhome{text-align:center;margin:3px 0;position:relative;padding:7px 5px;border-radius:10px;-webkit-box-shadow: inset 0px 0px 5px 0px rgba(255,255,255,0.4);-moz-box-shadow: inset 0px 0px 5px 0px rgba(255,255,255,0.5);box-shadow: inset 0px 0px 5px 0px rgba(255,255,255,0.3);background:#fff;cursor:pointer;z-index:2;border:#a7a7a7 1px solid;}
.side-iconhome:after{content:"";position:absolute;top:2px;left:2px;right:2px;bottom:2px;border-radius:7px;-webkit-box-shadow: inset 0px 0px 12px 0px rgba(0,0,0,0.3);-moz-box-shadow: inset 0px 0px 12px 0px rgba(0,0,0,0.3);box-shadow: inset 0px 0px 12px 0px rgba(0,0,0,0.3);}
.side-iconhome p{font-size:14px !important;padding:0;line-height:1;margin:0;font-weight:normal;color:#000 !important;}
.side-iconhome img{width:40px;height:40px;margin:2px auto 2px;z-index:2;}
.side-iconhome:hover img{transform: rotateY(360deg);
	-moz-transform: rotateY(360deg);
	-webkit-transform: rotateY(360deg);
	transform-origin: center;
	-moz-transform-origin: center;
	-webkit-transform-origin: center;
	transition: transform 1.0s }
.column-iconhome{width: 16.66666667%;float:left;}
.iconhome-title{position:relative;overflow:hidden;padding:0 3px;height:40px;}
/* finish side icon */

/* start footer */
.footer-container{position: relative;overflow: hidden;padding:60px 0;border-top:#bdbdbd 1px solid;}
.footer-2{width:33.333333%;float:left;text-align: center;}
.footer-1{width:33.333333%;float:left;}
.footer-3{width:33.333333%;float:right;text-align: right;}
.footer-logo{width:100%;position: relative;overflow: hidden;margin:0 auto 40px;text-align:center;}
.footer-logo h2{float:left;font-size:110%;margin:0 auto 0 0 !important;padding:0;line-height: 1;font-weight:500;text-align:left;}
.footer-logo img{float:left;width:auto;height:40px;margin:0 10px 0 auto;}
.footer-container h3{font-size: 100%;margin:0 0 10px;padding:0;line-height: 1.2;font-weight: 500;}
.visitor-left{width:70%;float:left;}
.visitor-left span{float:right;}
.visitor-right{width:30%;float:right;text-align: right;font-weight:bold;}
.head-footer{position: relative;overflow: hidden;font-size:110%;margin:0 0 10px;padding:0;line-height: 1.2;font-weight:bold;border-bottom: #bdbdbd 1px solid;padding:0 0 5px;}
.social-footer{width:100%;position: relative;overflow: hidden;}
.social-footer p{margin:0 10px 0 0;padding:0;line-height: 24px;display: inline-block;}
.social-footer img{height:24px;width:auto;}
.social-footer svg{height:30px;width:auto;fill:#919191;}
.copyright{position:relative;overflow:hidden;font-size:90%;margin:0;line-height:1.1;color:#fff;font-weight:normal;}
.copyright a, .copyright a:hover{color:#fff;}
/* finish footer */

/* start logo mobile */
.logomobile{display:none;}
.logo-mobile{position:relative;overflow:hidden;padding:15px 0;z-index:100;background-repeat:no-repeat;background-position:center;background-size:cover;}
.logo-mobile-top{position:relative;z-index:1;}
.logo-mobile-top img{float:left;width:auto;height:70px;margin:0 10px 0 0;}
.mobilestyle .logo-mobile-top img{height:50px;margin:0 5px;}
.mobilestyle .logo-desk{display:none;}
.mobilestyle .logo-title h1, .mobilestyle .logo-title-back h3{font-size:100%;}
/* finish logo mobile */

/* start modal */
.modalstyle .modal-dialog {
  position: absolute;
  left:22%;
  top:30px;
  right:0;
height:calc(100vh - 30px) !important;max-height:calc(100vh - 30px) !important;
}
/* finish modal */

/* start content */
.head-content{width:100%;position: relative;overflow: hidden;padding:0 0 10px;border-bottom: #bdbdbd 1px solid;margin:0 0 10px;}
.head-content h1{font-size:160%;margin:0 0 10px;padding:0;line-height:1.1;color:#000;font-weight:bold;}
.head-content h2{font-size:150%;margin:0;padding:0;line-height:1.2;color:#000;font-weight:bold;}
.pageimage{position: relative;z-index:1;}
.image-link{position: absolute;width:50px;height:50px;border-radius:50px;background:rgba(0,0,0,0.6);top: 50%;left: 50%;margin:0 auto;-webkit-transform: translate3d(-50%, -50%, 0);-moz-transform: translate3d(-50%, -50%, 0);-ms-transform: translate3d(-50%, -50%, 0);-o-transform: translate3d(-50%, -50%, 0);transform: translate3d(-50%, -50%, 0);z-index:9;display:none;}
.pageimage:hover .image-link{display:flex;}
.image-link img{width:24px;height:24px;}
.category-content{position: relative;overflow: hidden;height:30px;font-size: 100%;margin:10px 0 0;padding:0;line-height: 1.2;font-weight:bold;}
.category-content img{float:left;width:auto;height:100%;margin:0 5px 0 0;}
.head-category{width:100%;padding:0 0 10px;margin:0 0 15px;position:relative;overflow:hidden;}
.head-category-inner{padding:0;margin:0;}
.head-category-image{float:left;margin:0 10px 0 0;border-radius:5px;}
.head-category-image img{width:auto;height:24px;float:left;margin:10px 12px;}
.head-category-title{float:left;margin:0 auto 0 0;}
.head-category-title h1{font-size:100%;margin:0;padding:0;line-height:1.2;font-weight:bold;text-transform:uppercase;}
.head-category h2{font-size:100%;margin:0 auto;padding:0;line-height:1.2;color:#fff;font-weight:bold;font-family: 'MDGroteskRegular';text-align:center !important;}
/* finish content */

/* start category */
.category-row{position:relative;overflow:hidden;margin:0 0 5px;padding:0;}
.category-image{width:30%;float:left;}
.category-title{width:70%;float:right;}
.category-title h2 {font-size:100%;margin:0 0 10px;padding:0;line-height:1.1;font-weight:bold;color:#000;}
.category-isi{position:relative;overflow:hidden;width:100%;margin:0;padding:0;font-size:100%;line-height:1.1;}
.category-row a{color:#414141;}
.category-row:hover .category-title h2 {color:#009500;}
/* finish category */

/* start share komen */
.share{width:100%;position: relative;overflow: hidden;margin:10px 0 20px;}
.social-icon{float:left;width:34px;height:34px;padding:0 0;margin:0 5px 0 0;position:relative;border-radius:4px;}
.social-icon img{float:left;width:18px;height:18px;display:block;position: absolute;top: 50%;left: 50%;margin:0 auto;object-fit: cover;-webkit-transform: translate3d(-50%, -50%, 0);-moz-transform: translate3d(-50%, -50%, 0);-ms-transform: translate3d(-50%, -50%, 0);-o-transform: translate3d(-50%, -50%, 0);transform: translate3d(-50%, -50%, 0);}
.twitter{background:#00bbf1;}
.facebook{background:#006da5;}
.whatsapp{background:#00ae21;}
.print{background:#eab535;}
.telegram{background:#0085c3;}
.email{background:#a664b7;}
.comment-head{position: relative;overflow: hidden;margin:0 0 10px;}
.comment-head:after{content:"";position: absolute;top:0;left:0;width:100%;height:1px;top:50%;border-top:#bdbdbd 1px solid;z-index: 1;}
.comment-head h2{font-size:100%;position: relative;padding:0 10px 0 0;margin:0 0;float:left;font-weight:bold;background: #fff;z-index: 2;}
.comment-head h1{font-size:110%;padding:0 10px;margin:0 auto;font-weight:bold;background: #fff;z-index: 2;}
.comment-content{margin:20px 0 0;width:100%;float:left;}
.comment-content .speak{padding:0 0 0 30px;border:none;margin:0 0 0 0;}
.comment-content .speak:before{left:0;top:0;width:25px;height:25px;background-size:100% 100%;}
.comment-content .speak:after{display:none;}
.comment-content .speak p{font-size:100%;margin:0;line-height: 1.2;padding:0 0 0 5px;border-left:#bdbdbd 1px solid;}
.box-isian-title{width:20%;float:left;margin:0 0 15px;}
.box-isian-isi{width:80%;float:right;margin:0 0 15px;}
.column-comment-left{width:60%;float:left;}
.column-comment-left img{width:60%;opacity: 1;margin-right:10px;}
.column-comment-right{width:40%;float:right;}
.comment-fb{width:100%;float:left;margin:30px 0 40px;}
.comment-fb-inner{background:#fff;padding:0;position: relative;overflow: hidden;}
/* finish share komen */

/* start covid */

.covid-box{position:relative;overflow:hidden;border-radius:5px;text-align:center;border:#bdbdbd 1px solid;padding:0 0 10px;}
.jadwal-shalat .covid-box{padding:0 0;margin-top:5px;}
.covid-box h2{font-size:100%;margin:0 0 5px;padding:10px 5px;line-height:1.2;font-weight:bold;}
.covid-box h3{font-size:100%;margin:0 0 5px;padding:10px 5px;line-height:1.2;font-weight:bold;}
.covid-box p{font-size:100%;margin:5px 0 0;padding:0;line-height:1.2;font-weight:normal;}
.covid-angka{font-size:100%;font-weight:bold;line-height:1.1;padding:0;margin:0;height:24px;}
.jadwal-shalat .covid-angka{height:70px;position:relative;font-size:120%;}

.covid-box img {width:auto;height:10px;}
.jadwal-shalat .covid-box img{position:absolute;bottom:-5px;left:0;width:100%;height:auto;opacity:0.2;}
.head-covid{position:relative;overflow:hidden;margin:0 0 7px;text-align:center;}
.head-covid h2{position:relative;font-size:110%;margin:10px 0 0;padding:0;line-height:1.2;font-weight:bold;}
.head-covid img{width:auto;height:10px;margin:0 0 0 5px;}
.covid-banner{position:relative;overflow:hidden;}
.covid-banner-item{font-size:100%;margin:0;padding:0;line-height:1.1;font-weight:bold;}
.covid-banner-item img{float:left;width:auto;height:60px;margin:0 5px;}
.covid-backg1{position:absolute;top:10%;left:10%;width:20%;opacity:0.2;}
.covid-backg2{position:absolute;top:10%;right:-2%;width:15%;opacity:0.2;}
.covid-backg1 img, .covid-backg2 img{display:block;width:100%;height:auto;opacity:0.5;}
.covid-desa{position:relative;overflow:hidden;margin:0 0 15px;text-align:center;}
.terdata{font-size:100%;margin:5px auto 0;padding:0;line-height:1.2;font-weight:bold;text-align:center;}
/* finish covid */

/* start lapak */
.column-lapak{position:relative;overflow:hidden;border:#bdbdbd 1px solid;padding:10px;border-radius:5px;margin:0 0 10px;}
.column-lapak-left{width:50%;float:left;}
.lapak-judul{font-size:100%;margin:0 10px 10px;line-height:1.2;padding:0;font-weight:bold;height:auto;border-radius:5px;}
.lapakstyle .lapak-judul{font-size:100%;margin:10px 0 10px;line-height:1.2;padding:0;font-weight:bold;height:auto;border-radius:0;}
.deskripsi-lapak{position:relative;overflow:hidden;margin:0 25%;padding:50px 20px 30px;color:#fff;border-radius:5px;}
.deskripsi-lapak-absolute{position:absolute;top:0;left:0;right:0;height:100vh;}
.lapakstyle .deskripsi-lapak{padding:30px 20px 30px;}
.deskripsi-lapak h1 {font-size:100%;margin:0 0 10px;line-height:1.1;padding:0;font-weight:bold;}
.deskripsi-lapak p {font-size:100%;margin:0;line-height:1.1;padding:0;font-weight:normal;}
.deskripsi-lapak h3 {font-size:100%;margin:10px 0 0;line-height:1.1;padding:0;font-weight:normal;}
.lapak-judul-box{position:relative;overflow:hidden;padding:0 0;margin:5px 0 0;z-index:1;}
.pelapak{font-size:100%;margin:0 0 0;line-height:1.2;padding:0;font-weight:normal;position:relative;overflow:hidden;height:65px;}
.harga-produk p{font-size:100%;margin:5px 5px 10px;padding:0;line-height:1.1;}
.harga-produk h3{display:block;font-size:100%;margin:5px 5px;padding:0;line-height:1.1;}
.lapak-open {display: none;position: fixed;top: 50px;left:0;bottom:0;right:0;background: #ff0000;z-index: 99;transition: all 0.2s linear 2s;-webkit-transition: all 0.2s linear 2s;-moz-transition: all 0.2s linear 0s;-o-transition: all 0.2s linear 2s;}
.forlapak .btn{padding:0 10px;height:34px;}
.forlapak .form-control {
  height:36px !important;
  line-height:36px !important;
}
/* finish lapak */



/* start close */
.close-area{position:absolute;top:0;right:10px;height:44px;cursor:pointer !important;}
.close-area2{position:absolute;top:0;right:0;left:0;height:40px;cursor:pointer !important;}
.close-area p{margin:0 10px 0 0;padding:0;line-height: 1;color:#fff;}
.close-button {width:24px;height:24px;border-radius:24px;position:relative;background:rgba(0,0,0,0.3);cursor:pointer;}
.close-button:before, .close-button:after{content:'';position:absolute;left:50%;margin-left:-1px;width:2px;height:60%;top:20%;background:#fff;}
.close-button:before{-webkit-transform:rotate(-45deg);transform:rotate(-45deg);}
.close-button:after{-webkit-transform:rotate(45deg);transform:rotate(45deg);}
/* finish close */

/* start peta */
.area-peta{position:relative;overflow:hidden;width:100%;}
#map{width:100%;height:calc(100vh - 50px) !important;overflow:hidden;}
.footer-peta{position:absolute;top:100vh;left:0;right:0;z-index:2;}
.petastyle .btn-social.btn-sm {text-align:center;padding: 5px 10px !important;}
.petastyle .box-body{margin:0 !important;}
.petastyle .btn{display:block !important;width:100%;}
.petastyle .modal-body .btn{display:inline-block !important;width:auto;}
.petastyle .modal-header, .modalstyle .modal-header {position:relative;min-height:1.2;padding: 15px;border-bottom: 1px solid #bdbdbd;}
.petastyle .modal-header .close, .modalstyle .modal-header .close {border-radius:4px;margin:0 0 0 auto;margin-top: -5px;width:30px;height:30px;float:right;color:transparent;background:#919191;opacity:1;line-height:30px;}
.petastyle .modal-title, .modalstyle .modal-title{font-size:110%;font-weight:bold;color:#000;padding:0;margin:0 40px 0 0;line-height:1.2;}
.pengaduan .modalstyle .modal-header .close{float:none;left:50%;margin-left:-30px;}
.petastyle .modal-dialog {
  position: fixed;
  left:22%;
  width:78%;
  top:0;
  right:0;
  background:#fff;
  margin-right:0 !important;
height:100vh !important;max-height:100vh !important;
overflow-y: scroll;scrollbar-color:rgba(0,0,0,0.4) #fff;scrollbar-width: thin;
}
.petastyle .modal-dialog::-webkit-scrollbar {width: 5px;}
.petastyle .modal-dialog::-webkit-scrollbar-track {background:#fff;}
.petastyle .modal-dialog::-webkit-scrollbar-thumb {background:rgba(0,0,0,0.4);}
.petastyle .modal-content{margin:0 !important;padding:60px 0 !important;box-shadow:none !important;border:none !important;}
.petastyle .modal-body{padding-bottom:50px !important;margin:0 !important;}
/* finish peta */

/* start visitor */
.visitor{text-align:center;margin-top:50px;}
.visitor h1{font-size:100%;margin:10px 0 30px;padding:0;line-height:1.2;color:#000;font-weight:bold;}
.visitor h3{font-size:100%;margin:10px 0;padding:0;line-height:1.2;font-weight:normal;}
.visitor img{display:block;width:100%;height:auto;margin:0 0 15px;}
/* finish visitor */

/* start lampiran */
.lampiran{width:100%;float:left;margin:20px 0 0;text-align:center;}
.lampiran p {font-size:100%;margin:0 0 0;padding:0;line-height:1.1;}
/* finish lampiran */

.menu-mobile{display:none;position:fixed;top:0;left:0;width:50px;height:50px;background:rgba(0,0,0,0.4);z-index:999999999;}
.menu-mobile img{width:22px;height:22px;}
.close-menu-mobile{position:absolute;right:0;top:0;width:45px;height:50px;background:#000;}

/* start mobile-menu */
.mobile-menu a{color:#fff;margin:0;padding:0;font-weight:bold;text-shadow:-1px -1px 0 rgba(0,0,0,0.2), 1px -1px 0 rgba(0,0,0,0.2), -1px 1px 0 rgba(0,0,0,0.2), 1px 1px 0 rgba(0,0,0,0.2);}
.mobile-menu li a{color:#fff;}
.mobile-menu ul{margin:0 0;padding:0;list-style:none;color:#fff;}
.mobile-menu li ul{margin:0 0;padding:10px 0;color:#fff;}
.mobile-menu li{font-size:100%;margin:0;padding:7px 0;line-height:1.2;list-style:none;color:#fff;}
.mobile-menu li.active, .mobile-menu li:focus{color:#fff;}
.mobile-menu p{font-size:100%;margin:0;padding:7px 0;line-height:1.2;list-style:none;color:#fff;}
.mobile-menu li ul li{font-size:100%;margin:0;padding:0 0;line-height:1.2;color:#fff;}
.mobile-menu li img{width:auto;height:22px;opacity:0.7;margin:-2px 5px 0 0;}
.mobile-menu-inner .navbar-nav{position:relative;overflow:hidden;width:100%;}
.mobile-menu .dropdown-menu{position:relative;float:none;background:transparent !important;padding:15px !important;border-radius:0 !important;border:#616161 1px solid;}
/* finish mobile-menu */

/* start no-found */
.no-found{position:relative;overflow:hidden;padding:10px;border-radius:5px;text-align:center;}
.no-found-latar img{display:block;width:100%;height:auto;}
.no-found h1{font-size:300%;margin:0 0 20px;padding:0;line-height:1.2;font-weight:800;}
.tanda-seru{font-size:170%;-webkit-transform:rotate(20deg);transform:rotate(20deg);margin:0 0 0 10px;}
.no-found h2{font-size:110%;margin:0 0 20px;padding:0;line-height:1.2;font-weight:bold;}
.no-found h3{font-size:110%;margin:0 0 20px;padding:0;line-height:1.2;font-weight:normal;}
/* finish no-found */

.popin{animation: popin 0.7s linear infinite 0.5s;}
@keyframes popin{
    0%{
        opacity: 0.3;
    }
    1%{
        opacity: 1;
    }
    99%{
        opacity: 0;
    }
    100%{
        opacity: 0;
    }
}

.online-dimandiri{padding:15px 20px 0;margin:-10px -25px 0 -20px;position:relative;overflow:hidden;font-weight:normal;color:#414141;}
.online-dimandiri a{color:#414141;}


#loading{
	position: fixed;
	left: 22%;
	top: 50px;
	right:0;
	bottom:0;
	overflow:hidden;
	background:#000;
	z-index:9999999999;
	-o-animation: open 0.4s linear forwards, squeeze 2s linear 0.5s forwards;-ms-animation: open 0.4s linear forwards, squeeze 2s linear 0.5s forwards;-webkit-animation: open 0.4s linear forwards, squeeze 2s linear 0.5s forwards;-moz-animation: open 0.4s linear forwards, squeeze 2s linear 0.5s forwards;-ms-animation: open 0.4s linear forwards, squeeze 2s linear 0.5s forwards;animation: open 0.4s linear forwards, squeeze 2s linear 0.5s forwards;
}
.loading-latar{
	position: absolute;
	left: 0;
	top: 0;
	right:0;
	bottom:0;
	opacity:0.2;
	z-index:1;background-position:center;background-size:cover;background-repeat:no-repeat;
}
.loading-inner{font-size:100%;padding:0;line-height:1;text-transform:uppercase;color:#fff;font-weight:bold;width: 100%;left:0;position: absolute;top: 50%;margin: 0 auto;text-align: center;-webkit-transform: translate3d(0, -50%, 0);-moz-transform: translate3d(0, -50%, 0);-ms-transform: translate3d(0, -50%, 0);-o-transform: translate3d(0, -50%, 0);transform: translate3d(0, -50%, 0);z-index:2;}
.loading-inner img{display:block;width:auto;height:90px;margin:0 auto 10px;}
@-webkit-keyframes squeeze{
0%{opacity:1;}
100%{opacity:0;}
}
@-moz-keyframes squeeze{
0%{opacity:1;}
100%{opacity:0;}
}
@keyframes squeeze{
0%{opacity:1;}
100%{opacity:0;}
}
@-ms-keyframes squeeze{
0%{opacity:1;}
100%{opacity:0;}
}
@-o-keyframes squeeze{
0%{opacity:1;}
100%{opacity:0;}
}

.icon-mobile{display:none;}
.video-box{width:100%;height:25vh;}
.video-title{position:relative;overflow:hidden;margin:5px 0;font-size:100%;padding:0;line-height:1.1;font-weight:bold;}

.absolute-mobile{position:absolute;left:0;top:80px;right:0;bottom:0;}
.footer-menu{position:fixed;bottom:0;left:0;right:0;background:#dbdbdb;z-index:99999999;display:none;}
.footer-icon{text-align:center;width:20%;float:left;height:50px;}
.footer-icon img{width:auto;height:22px;margin:0 auto 3px;}
.footer-icon p{margin:0 auto;padding:0;line-height:1.1;font-size:12px;font-weight:normal;}

.panel-bawah {
  width: 0;
  position: fixed;
  top: 50px;
  right: 0;
  bottom:50px;
  background-color:#414141;
  overflow: hidden;
  transition: 0.5s;
}
.panel-bawah-inner{position:absolute;top:30px;left:10px;right:10px;bottom:10px;}
.bawahtitle h3{position:relative;overflow:hidden;padding:0 0 0 20px;margin:0 0 10px;line-height:1.1;font-size:100%;}
.bawahtitle h3:after{content:"";position:absolute;top:5px;left:0;width:8px;height:8px;border-radius:8px;background:#919191;}
.bawahtitle h2{padding:0;margin:0 0 10px;line-height:1.1;font-size:100%;color:#fff;}
.bawahtitle a{color:#bdbdbd;}
.flip-vertical-right {
	-webkit-animation: flip-vertical-right 3s linear infinite;
	        animation: flip-vertical-right 3s linear infinite;
}


@-webkit-keyframes flip-vertical-right {
  0% {
    -webkit-transform: rotateY(0);
            transform: rotateY(0);
  }
  100% {
    -webkit-transform: rotateY(360deg);
            transform: rotateY(360deg);
  }
}
@keyframes flip-vertical-right {
  0% {
    -webkit-transform: rotateY(0);
            transform: rotateY(0);
  }
  100% {
    -webkit-transform: rotateY(360deg);
            transform: rotateY(360deg);
  }
}

.small-box {height:130px !important;border-radius:5px !important;position:relative;}
.small-box .inner p{position:absolute;top:0;left:0;right:0;height:60px;background:rgba(0,0,0,0.3);border-radius:5px 5px 0 0 !important;padding:0 10px;display: flex;justify-content: center;align-items: center;line-height:1.1;}
.small-box .inner h3{position:absolute;bottom:0;left:0;right:0;height:70px;padding:0 10px;display: flex;justify-content: center;align-items: center;line-height:1.1;margin:0;}
.row .small-box{margin-bottom:15px !important;}

.pengaduan-tombol{float:left;position:relative;}
.pengaduan-content{width:100%;float:left;}
.listrow{position:relative;overflow:hidden;width:100%;border-bottom:#bdbdbd 1px solid;padding:10px 0 10px;margin:0 0;cursor:pointer;}
.alertpengaduan{width:100%;float:left;margin:10px 0;}
.foto-pengaduan{width:40px;height:40px;float:left;position:relative;overflow:hidden;}

.listrow-image{width:25px;float:left;margin:-3px 7px 0 0;}
.listrow-image img{width:25px;height:auto;}
.listrow-title{position:relative;overflow:hidden;margin-right:10px;}
.listrow-title h2, .listrow-title h3{font-size:100%;margin:0 0 5px;line-height:1.1;padding:0;}
.listrow-title p{font-size:100%;margin:0 0;line-height:1.1;padding:0;}
.tanggapan{position:absolute;bottom:10px;right:0;width:120px;float:right;}
.badge{padding-left:10px;padding-right:10px;font-weight:normal !important;}
.biru{background:#00aec8;}
.ungu{background:#bc90d8;}
.hijau{background:#84d04d;}
.pengaduan-absolute{position:absolute;top:50px;left:20%;right:20%;bottom:100px;overflow:hidden;border-radius:7px;padding:20px;}
.pengaduan-absolute2{position:absolute;top:50px;left:0;right:0;bottom:120px;overflow:hidden;border-radius:7px;padding:0 10px;}
.pengaduan-absolute h1{font-size:120%;margin:0 0 10px;line-height:1.1;padding:0;color:#000;font-weight:bold;}
.pengaduan-absolute h2{font-size:100%;margin:0 0;line-height:30px;padding:0;}
.pengaduan-absolute h3{font-size:100%;margin:0 0 10px;line-height:1.1;padding:0;}
.pengaduan-absolute p{font-size:100%;margin:5px 0 0;line-height:1.1;padding:0;}
.symbol-pengaduan{width:25px;float:left;margin:0 10px 0 0;}
.symbol-pengaduan img {width:100%;height:auto;}
.isi-pengaduan{position:relative;overflow:hidden;}
.badge2{padding:0 10px;font-weight:normal !important;line-height:30px;border-radius:30px;color:#fff;margin:0 0;}
.tanggapan-status{width:100%;float:left;}
.withborder{border-bottom:#bdbdbd 1px solid;padding:0 0 5px !important;}
.pengaduan .form-control {
  height:40px;
  line-height:40px;
  border-radius:5px;
  padding: 0 10px;
  font-size: 90%;
  text-align:left;
  border:#bdbdbd 1px solid;
}
.pengaduan-tombol{float:left;width:40px;height:40px;border:#bdbdbd 1px solid;border-radius:5px;}
.no-pengaduan{position:absolute;left:0;top:0;width:40px;height:40px;border-radius:5px;color:#fff;}
.no-pengaduan:hover{color:#fff;}
.column-30{width:30%;float:left;}
.formulir{float:right;height:40px;border:#bdbdbd 1px solid;border-radius:5px;padding:0 10px;margin:0 0 0 auto;color:#fff;}
#waktu{font-size:90%;margin:0 10px 0 0;line-height:1.1;padding:0;color:#fff;font-weight:500;}

.slick_slider, .cycle-slideshow {
	max-height: 350px;
	display: block;
	position: relative;
	overflow: hidden;
	width:25%;
	margin:0 auto !important;
}

.petastyle .progress-bar, .isi-content .progress-bar{background:transparent !important;}

.petastyle .progress, .isi-content .progress{background:transparent !important;}
.petastyle .progress-bar span, .isi-content .progress-bar span{background:#fff !important;color: #000 !important;z-index:99 !important;}
.petastyle .col-md-4, .isi-content .col-md-4{width:100% !important;}

.panel-default > .panel-heading {
  color: #000;
  background-color: #fff;
  border:none !important;
}
.panel-default {
  border:#bdbdbd 1px solid !important;
}
.panel-group .panel-heading + .panel-collapse > .panel-body,
.panel-group .panel-heading + .panel-collapse > .list-group {
  border-top: 1px solid #bdbdbd;
}
.stat-sub{font-size:100%;margin:0;line-height:1.2;padding:3px 0;}
.stat-white {padding:5px 10px;color:#fff;display:block;}

.headerright{position:relative;overflow:hidden;width:100%;height:auto;}
.headerright-default{position:absolute;top:0;left:0;right:0;bottom:0;background-repeat:no-repeat;background-position:center;background-size:100% auto;}
.info-popup{position:relative;z-index:999 !important;}
.ttan{display:inline-flex;cursor:pointer;transition:all 1s;position:absolute;bottom:10px;right:20px;line-height:34px;padding:0;margin:0;color:#fff;background:rgba(0,0,0,0.3);font-weight:normal;border-radius:4px;font-size:90%;z-index:15 !important;opacity:0.6;}
.ttan-close {width:30px;height:30px;float:right;position:relative;z-index:50 !important;cursor:pointer;}
.ttan-close:before{content:'';position:absolute;left:50%;margin-left:-1px;width:2px;height:60%;top:20%;background:#fff;-webkit-transform:rotate(-45deg);transform:rotate(-45deg);}
.ttan-close:after{content:'';position:absolute;left:50%;margin-left:-1px;width:2px;height:60%;top:20%;background:#fff;-webkit-transform:rotate(45deg);transform:rotate(45deg);}
#dtan{display:none}
.hitung{color:#000;font-size:90%;line-height:30px;padding:0;margin:0;font-weight:normal;position:absolute;bottom:10px;right:20px;}
.angka{font-size:130%;margin:0 5px;}
.info-popup .modal-dialog {position: relative;overflow:hidden;}
.info-popup .modal-open {width:100%;height:auto !important;max-height:30vh !important;}
.info-popup .modal {position: relative !important;top: auto;right: auto;bottom:auto;left: auto;height:auto !important;max-height:30vh !important;}
.modal-info-popup{position:relative;overflow:hidden;height:30vh;text-align:center;}
.popup-open{position:absolute;top:0;left:0;right:0;z-index:99999999;text-align:center;}
.popupcover-color{position:absolute;top:0;left:0;right:0;bottom:0;opacity:0.9;}
.popupcover-color2{position:absolute;top:0;left:0;right:0;bottom:0;opacity:0.7;}
.popupcover-pattern{position:absolute;top:0;left:0;right:0;bottom:0;opacity:0.8;background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='12' viewBox='0 0 20 12'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='charlie-brown' fill='%23000000' fill-opacity='0.1'%3E%3Cpath d='M9.8 12L0 2.2V.8l10 10 10-10v1.4L10.2 12h-.4zm-4 0L0 6.2V4.8L7.2 12H5.8zm8.4 0L20 6.2V4.8L12.8 12h1.4zM9.8 0l.2.2.2-.2h-.4zm-4 0L10 4.2 14.2 0h-1.4L10 2.8 7.2 0H5.8z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");}
.popup-center{position:absolute;left:0;top:0;right:0;bottom:0;text-align:center;background-repeat:repeat-x;background-position:top center;background-size:auto 20vh;opacity:0.2;}
.moment{position:relative;width:100%;float:left;text-align:center;z-index:2;margin:10px 0 10px;}
.moment-target{position:relative;width:100%;float:left;text-align:center;z-index:2;margin:10px 0 10px;font-size:100%;line-height:1.2;font-weight:bold;padding:0;color:#dbdbdb;text-shadow:-1px -1px 0 rgba(0,0,0,0.4), 1px -1px 0 rgba(0,0,0,0.4), -1px 1px 0 rgba(0,0,0,0.4), 1px 1px 0 rgba(0,0,0,0.4);}
.moment h2{font-size:100%;margin:0;padding:0;line-height:1.2;font-weight:bold;color:#fff;text-shadow:-1px -1px 0 rgba(0,0,0,0.4), 1px -1px 0 rgba(0,0,0,0.4), -1px 1px 0 rgba(0,0,0,0.4), 1px 1px 0 rgba(0,0,0,0.4);}
.moment h1{font-size:120%;margin:0;padding:0;line-height:1.2;font-weight:bold;color:#ffe032;text-shadow:-1px -1px 0 rgba(0,0,0,0.4), 1px -1px 0 rgba(0,0,0,0.4), -1px 1px 0 rgba(0,0,0,0.4), 1px 1px 0 rgba(0,0,0,0.4);}
.idulfitri .moment h1{font-size:150%;margin:10px 0;}
.moment p{font-size:100%;margin:0;padding:0;line-height:1.2;font-weight:normal;color:#fff;text-shadow:-1px -1px 0 rgba(0,0,0,0.4), 1px -1px 0 rgba(0,0,0,0.4), -1px 1px 0 rgba(0,0,0,0.4), 1px 1px 0 rgba(0,0,0,0.4);}
.moment-target h3{font-size:100%;margin:0;padding:0;line-height:1.2;font-weight:bold;color:#dbdbdb;text-shadow:-1px -1px 0 rgba(0,0,0,0.4), 1px -1px 0 rgba(0,0,0,0.4), -1px 1px 0 rgba(0,0,0,0.4), 1px 1px 0 rgba(0,0,0,0.4);}
.moment-column1{float:left;width:60%;margin:0 0 0 auto;padding:0 10px;}
.moment-column2{float:left;margin:0 auto 0 0;text-align:left;padding:0 10px;}
.moment-image{position:relative;z-index:2;}
.moment-image img{width:auto;height:30vh;}


.hadir{position:fixed;top:0;right:5px;width:40px;height:40px;border-radius:5px;background:rgba(0,0,0,0.6);z-index:9999;top: 50%;text-align: center;-webkit-transform: translate3d(0, -50%, 0);-moz-transform: translate3d(0, -50%, 0);-ms-transform: translate3d(0, -50%, 0);-o-transform: translate3d(0, -50%, 0);transform: translate3d(0, -50%, 0);}
.hadir img{width:25px;height:25px;}
.list-hadir{position:relative;overflow:hidden;margin:10px 0;}
.foto-hadir{position:relative;width:70px;height:80px;overflow:hidden;float:left;}
.title-hadir{position:relative;overflow:hidden;margin:0 0 0 10px;}
.title-hadir h1{font-size:100%;margin:0;padding:0;line-height:1.2;font-weight:bold;}
.title-hadir h3{font-size:100%;margin:0;padding:0;line-height:1.2;font-weight:500;}
.title-hadir p{display:inline-block;font-size:90%;margin:5px 0 0;padding:4px 7px;line-height:1.2;font-weight:500;color:#fff;border-radius:4px;}
.ada{background:#6eaf47;}
.tidakada{background:#c20000;}
.panel-hadir-title{position:relative;overflow:hidden;padding:0 10px;margin:0;line-height:1.2;height:50px;font-size:100%;font-weight:bold;}
.tooltip{z-index:999;font-size: 14px;}
.tooltip-inner {padding: 10px 15px;background-color: #000;border-radius: 4px;}
.tooltip-arrow{margin-left: -5px !important;border-width: 10px 10px 0;border-color:}
.lampu-kiri{position:absolute;left:20px;top:0;width:10%;}
.lampu-kanan{position:absolute;right:20px;top:0;width:10%;}
.idulfitri .lampu-kiri, .idulfitri .lampu-kanan{width:12%;}
.ramadhan .lampu-kanan{transform:scaleX(-1);}
.lampu-kiri img, .lampu-kanan img{width:100%;height:auto;}
#ScrollToTop{position:fixed;bottom:5px;right:5px;border-radius:5px;width:40px;height:40px;background:rgba(0,0,0,0.5);cursor:pointer;z-index:9999;}
#ScrollToTop:hover{background:#000;}
#ScrollToTop svg{width:24px;height:24px;fill:#fff;}

.flex-container {display: flex;flex-flow: row wrap;justify-content: space-between center;margin:0 -10px;}
.flex-item {position:relative;width: calc(50% - 20px);margin:0 10px 20px;-webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.45);-moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.45);box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.45);border-radius:5px;padding-bottom:50px;text-align:center;}
.flex-item-backg{position:absolute;bottom:10px;left:10px;top:10px;right:10px;}
.flex-box{margin:10px 10px 0;}
.flex-item-absolute{position:absolute;bottom:0;left:10px;right:10px;padding:5px 0;}
.lapakstyle .flex-container {margin:0 -5px;}
.flex-item3 {position:relative;width: calc(33.33333333% - 11px);margin:0 5px 20px;-webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.45);-moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.45);box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.45);border-radius:5px;padding-bottom:50px;text-align:center;border:#bdbdbd 1px solid;}