.font1{font-family: 'Allura', cursive;}
.font2{font-family: 'Mrs Saint Delafield', cursive;}
.font3{font-family: 'Qwigley', cursive;}
.font4{font-family: 'Cookie', cursive;}
.font5{font-family: 'Merriweather', serif;}
.font6{font-family: 'Ubuntu', serif;}
.font7{font-family: 'Economica', serif;}
.font8{font-family: 'Shrikhand', cursive;}
.font9{font-family: 'Andika', serif;}
::-webkit-scrollbar {width: 9px; height:9px;}
::-webkit-scrollbar {width: 9px; height:9px;}
::-webkit-scrollbar-track {    background-color: rgba(255,255,255,0.11);    border-left: 0px solid rgba(255,255,22255,0.11);}
::-webkit-scrollbar-thumb {    background-color: rgba(4,18,92,0.99); border-radius:0; cursor: pointer;}
::-webkit-scrollbar-thumb:hover {background-color:rgba(4,18,92,0.89);	}
body{font-family: 'Ubuntu', sans-serif; font-size: 14px; background-color:#F5F5F5; line-height: 21px; padding:0; margin: 0;
    }
    
body > .container,body > .container-fluid{position: relative; z-index: 3;}
a,a:hover{text-decoration: none; color: #555;}

body #prossessing { display:none; padding:0;	z-index:99999;    position:fixed;	top:2px; left:0; right:0;    border-radius:0;    margin:0;    text-align: right;}
body #prossessing .progress-bar{ position:relative; height: 1px; border-radius: 0; background-color: rgba(255,255,255,.71); box-shadow:0 0 3px 1px rgba(4,18,92,.41);    width:21%; transition:width .191s;}
body #prossessing .progress-bar div{position:absolute; top:-2px; right:-2px; height:5px; width:5px; border-radius:5px; background-color:#fff; content:'';}
body #prossessing .progress-bar div:before{position:absolute; top:50%; left:50%; margin-top:-55px; margin-left:-55px; width:111px; height:111px; border-radius:50%; background-color:rgba(255,255,255,.41); content:''; z-index:1;
animation-name: LORJUa;
animation-duration: 1.1s;
animation-iteration-count: infinite;
}
body #prossessing .progress-bar div:after{position:absolute; top:50%; left:50%; margin-top:-49px; margin-left:-49px; width:99px; height:99px; border-radius:50%; background-color:rgba(255,255,255,.21); content:''; z-index:2;
animation-name: LORJUb;
animation-duration: 1.1s;
animation-iteration-count: infinite;}
body #prossessing .status{display: none !important;}
@keyframes LORJUa {
    0%   {margin-top:-0px; margin-left:-0px; width:0px; height:0px; background-color:rgba(255,255,255,.91); }
    21%  {margin-top:-55px; margin-left:-55px; width:111px; height:111px; background-color:rgba(255,255,255,.0);}
    71%   {margin-top:-0px; margin-left:-0px; width:0px; height:0px; background-color:rgba(255,255,255,.91); }
    100%  {margin-top:-0px; margin-left:-0px; width:0px; height:0px; background-color:rgba(255,255,255,.91);}
}
@keyframes LORJUb {
    0%   {margin-top:-0px; margin-left:-0px; width:0px; height:0px; background-color:rgba(255,255,255,.71); }
    71%  {margin-top:-49px; margin-left:-49px; width:99px; height:99px; background-color:rgba(255,255,255,.0);}
    72%  {margin-top:-0px; margin-left:-0px; width:0px; height:0px; background-color:rgba(255,255,255,.71);}
    99%  {margin-top:-49px; margin-left:-49px; width:99px; height:99px; background-color:rgba(255,255,255,.41);}
	100%   {margin-top:-0px; margin-left:-0px; width:0px; height:0px; background-color:rgba(255,255,255,.71); }
}


.text-green{color:#5a9413;}
.text-blue{color:#313545;}
.border-green{border-color:#5a9413;}
.border-blue{border-color:#313545;}
.bg-green{background-color:#5a9413; color: #fff;}
.bg-blue{background-color:#313545; color: #fff;}


@keyframes pa_pulse{
    0%{     transform:translate(-50%, -50%) scale(0.2); border-width:5px;opacity:1}
    60%{    transform:translate(-50%, -50%) scale(1);   border-width:1px;opacity:0}
    100%{   transform:translate(-50%, -50%) scale(1);   border-width:1px;opacity:0}
}
.brand{display: inline-block; min-width: 11px; margin: 0 11px 0 0; position: relative; float: left; padding: 1px 0;}
.brand img{ z-index: 3; height: 51px; padding: 0; cursor: pointer; position: relative;}
.animasi{position: absolute; top: -9px; left: -9px; right: -9px; bottom: -9px; z-index: 0; }
.animasi__circle{border:2px solid;background:none;position:absolute;border-radius:50%;top:50%;left:50%;width:100%;height:100%;transform:translate(-50%, -50%) scale(0.2);border-width:5px;opacity:1;animation-name:pa_pulse;animation-duration:4s;animation-direction:normal;animation-timing-function:cubic-bezier(0, 0, 0.55, 1);animation-iteration-count:infinite; z-index: 0;}
.animasi__circle:nth-of-type(1){animation-delay:-.2857142857s}
.animasi__circle:nth-of-type(2){animation-delay:-.5714285714s}
.animasi__circle:nth-of-type(3){animation-delay:-.8571428571s}
.animasi .animasi__circle{border-color:#f00;}
.animasi--white .animasi__circle{border-color:#f00}

#poster .fr-box .fr-wrapper> div{opacity: 0;height: 0px; overflow: hidden;}
#poster .fr-box .fr-wrapper> div+div{opacity:1; height: auto; overflow:visible;}
footer{margin: 0;}



body{width: 100%; height: 100%; padding-top: 71px; overflow: hidden; background: url('../images/bgwrap.jpg') fixed;}
body.loaded{width:auto; height:auto; overflow-y:scroll; overflow-x:hidden; min-width: 360px;}
body > .container{padding:0 9px;}
@media screen and (max-width: 786px){
    body{padding-top: 131px;}
}

body header{ transition:all .71s; opacity: 1; position: fixed; z-index: 111; overflow: hidden; text-shadow: 1px 1px 3px #000; padding:111px 0 0 0; text-align: center; color: #fff; bottom:191px; left: 0; right: 0; top: 0; background-image: url('../images/bgloop.png'); background-position: bottom center; background-color: #003F39; margin-top: -141px;}
body header *{z-index: 3; position: relative;}
body header::after{content: ''; position: absolute; z-index: 1; text-shadow: 1px 1px 3px #000; text-align: center; color: #fff; bottom:-191px; left: 0; right: 0; top: 0; box-shadow: inset 0px 11px 99px 71px rgba(0,0,0,.71);}
body header b{color: #ECCD00; font-weight: normal;}
body header .logo{width: 141px; margin-top: 171px;}
body header.loaded{top: -99%; bottom:111%; opacity: 0;}

body footer{transition:all .71s; opacity: 1; position:fixed; box-shadow: 0 -1px 3px rgba(0,0,0,.41); z-index: 101; text-shadow: 1px 1px 3px #000; font-size: 11px; padding:0 9px; text-align: center; color: #fff; overflow: hidden; bottom:0; left: 0; right: 0; height: 191px; background-image: url('../images/bgloop.png'); background-position: top center; background-color: #003F39; }
body footer *{z-index: 3; position: relative;}
body footer > span{display: block; text-align: center; padding: 9px; margin-top: 41px;}
body footer b{color: #fc0; font-weight: normal;}
body footer::after{content: ''; position: absolute; z-index: 1; text-shadow: 1px 1px 3px #000; text-align: center; color: #fff; bottom:0; left: 0; right: 0; top: -191px; box-shadow: inset 0px 0px 99px 71px rgba(0,0,0,.71);}
.waveWrapper {overflow: hidden;position: absolute;left: -313px;right: -313px;bottom: 0;top: 0;margin: auto;opacity: .41;z-index: 0;}
.waveWrapperInner {position: absolute;width: 100%;overflow: hidden;height: 100%;bottom: -1px;}
.bgTop {z-index: 15;opacity: 0.33;}
.bgMiddle {z-index: 10;opacity: 0.41;}
.bgBottom {z-index: 5; opacity: 0.71;}
.wave {position: absolute;left: 0;width: 200%;height: 100%;background-repeat: repeat no-repeat;background-position: 0 bottom;transform-origin: center bottom;}
.waveTop {background-size: 50% 191px;}
.waveAnimation .waveTop {animation: move_wave 9s linear infinite;}
.waveMiddle {background-size: 50% 171px;}
.waveAnimation .waveMiddle {animation: move_wave 11s linear infinite;}
.waveBottom {background-size: 50% 191px;}
.waveAnimation .waveBottom {animation: move_wave 13s linear infinite;}
@keyframes move_wave {
    0% {transform: translateX(0) translateZ(0) scaleY(1)}
    50% {transform: translateX(-25%) translateZ(0) scaleY(0.55)}
    100% {transform: translateX(-50%) translateZ(0) scaleY(1) }
}
body footer.loaded{position:fixed; bottom: -191px;}

.listedmini{position: relative; font-size: 15px; line-height: 21px; display: block; background-color: #fff; border: solid 1px #ddd; margin: 0 0 41px 0; padding: 11px 11px 0 11px; overflow: hidden;}
.listedmini h4{display: block; font-size: 21px; position: relative;}
.listedmini h4::after{content: ''; z-index: 0; position: absolute; left: -11px; top: -11px; width: 41px; height: 41px; background-color: #003F39; border-radius:0 0 9px 0;}
.listedmini h4 i{position: relative; z-index: 1; min-width: 33px; color: #fff; text-align: center; padding-right: 15px; display: inline-block;}
.listedmini .playVar{position: relative; border-top: solid 1px #eee; padding-top: 9px; height: 249px; overflow: hidden;}
.listedmini .playVar > a{display: block; cursor: pointer;}
.listedmini .playVar.mauidoh,.listedmini .playVar.qosidah{height: 234px;}
.listedmini .img{display: block; width:100%; height:99px; background-size:111% auto;  background-position: center center; margin:0 0 11px 0;background-color: rgba(0,0,0,.41);}
.listedmini center{position:relative; z-index: 3; margin: -49px 0 0 0; }
.listedmini center i{display: block; margin-top:0; font-size: 71px; height: 61px; text-shadow: 0 0 9px #c90000; color: #c90000;}
.listedmini center span{display: block; font-size: 17px; color: #c90000; text-shadow: 0 0 21px #c90000; }

.listedmini .pinMap{overflow:hidden; display: block; width:100%; border-radius: 3px; height:99px; text-align: center; position:relative; margin: 0; z-index: 0;}
.listedmini .pinMap a{display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 9; cursor:zoom-in;}
.listedmini .pinMap iframe{margin: -89px 0 0 -171px; position: relative; z-index: 0; left: 50%; display: inline-block; width:313px; height:313px; }

.listedmini .menu{display: block; text-align: center; background-color: #fff; position: absolute; padding: 9px 0 11px 0; bottom:0; right:0; left:0;}
.listedmini .menu a{font-size: 12px; position: relative; vertical-align: bottom; display:inline-block; width: 31%; transition: all .41s; padding: 9px; border: solid 1px #eee; margin:0; text-align: center; cursor: pointer;}
.listedmini .menu a small{position: absolute; bottom: 0px; left: 0; right: 0;}
.listedmini .menu a i{font-size: 19px; display: block;}
.listedmini .menu a i.ion-android-volume-up{margin: -5px 0 5px 0;}
.listedmini .menu a i.ion-social-whatsapp{color: #06D755;}
.listedmini .menu a i.ion-social-facebook{color: #4267B2;}
.listedmini .menu a i.ion-radio-waves.live{color: #c90000; font-size: 33px; margin: -7px 0; text-shadow: 0 0 9px #c90000;}
.listedmini .menu a:hover{background-color: #eee;}
    
@media screen and (max-width: 786px){
    .listedmini{margin: 41px;}
}

.posting{position: relative; overflow: hidden; font-size: 17px; line-height: 33px; display: block; background-color: #fff; border: solid 1px #ddd; margin: 0 0 9px 0; padding: 21px;}
.posting a{cursor: pointer;}
.posting h4{}
.posting h6{position: relative; margin: 0; padding: 0 0 0 21px; line-height: 15px; font-size: 13px; line-height: 15px;}
.posting h6 i{position: absolute; top: 0; left: 0px;}
.posting .pager {border-bottom: dotted 1px #ddd; font-size: 12px; line-height: 21px; margin: -9px 0 9px 0; color: #ddd; text-transform: uppercase;}
.posting .pager i.ion-arrow-return-left{display: inline-block; font-size: 21px; line-height: 21px; margin-right: 9px; color: #222278; cursor: pointer;}

.posting p{color: #999; font-size: 13px; line-height: 21px;}
.posting .img{display:block; text-align: center; overflow: hidden; padding-top: 50%; position: relative; width:100%; height: 333px; background-size:cover;  background-position: center center; margin:9px 0 21px 0; background-color: rgba(0,0,0,.41); cursor: pointer;}
.posting .img i{position: absolute;box-shadow: 0 0 21px 3px rgba(0,0,0,.41); transition: all .41s; opacity: 1; top: 50%; left: 50%; margin: -37px 0 0 -49px; font-size: 41px; text-shadow: 0 0 9px rgba(255,255,255,.71); width: 99px; height: 71px; background-color: rgba(255,255,255,.71); padding:15px 0 0 0; display: block; border-radius: 5px;}
.posting .img i:hover{opacity: .41;}
.posting .img small{position: absolute; bottom: 9px; right: 9px; background-color: #fff; border-radius: 3px; padding: 0 9px;}
.posting .img iframe{width: 100%; height: 454px; margin: -419px 0 0 0;}
.posting .pinMap{overflow:hidden; position: relative; display: block; width:100%; border-radius: 3px; height:313px; text-align: center; margin:9px 0 21px 0;}
.posting .pinMap a{display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 9; cursor:zoom-in;}
.posting .pinMap iframe{margin:0; position: relative; z-index: 0; display: inline-block; width:100%; height:313px; }



.posting .menu{position: absolute; top: 0px; bottom: 0px; right:0px; padding: 9px 0 0 0; width: 99px; border-left: solid 1px #aaa; text-align: center; background-color: rgba(255,255,255,.71);}
.posting .menu a{font-size: 12px; display: block; transition: all .41s; padding: 9px 9px 0 9px; border: solid 1px #aaa; margin:0 9px 9px 9px; text-align: center; cursor: pointer;}
.posting .menu a i{font-size: 25px; display: block;}
.posting .menu a i.ion-social-whatsapp{color: #06D755;}
.posting .menu a i.ion-social-facebook{color: #4267B2;}
.posting .menu a:hover{background-color: #aaa;}
.postNav a{ display: block; cursor: pointer; padding: 21px; background-color: #fff; border: solid 1px #ddd; }

@media screen and (max-width: 786px){
    .posting .img {height: 191px;}
    .posting .img iframe{width: 100%; height: 252px; margin: -212px 0 0 0;}
}


.listed{position: relative; font-size: 15px; line-height: 21px; min-height: 241px; display: block; background-color: #fff; border: solid 1px #ddd; margin: 0 0 9px 0; padding: 21px 111px 21px 21px;}
.listed > a{cursor: pointer; display: block; position: relative; z-index: 0;}
.listed .head{border-bottom: solid 1px #ddd; margin-bottom: 11px; padding: 0 0 11px 0;}
.listed .head h4{margin: 0; padding: 0; font-size: 21px; max-height: 49px; overflow: hidden;}
.listed .img{display: inline-block; width: 191px; height: 121px; background-size: 111% auto;  background-position: center center; margin:0 21px 21px 0; float: left; background-color: rgba(0,0,0,.41);}
.listed .pinMap{overflow:hidden; display: block; width:191px; border-radius: 3px; height:121px; text-align: center; position:relative; margin: 0 21px 21px 0; z-index: 0; float: left;}
.listed .pinMap iframe{margin: -111px 0 0 -141px; position: relative; z-index: 0; left: 50%; display: inline-block; width:313px; height:313px; }
.listed > a > div{max-height: 121px; overflow: hidden;}

.listed .menu{position: absolute; top: 11px; bottom: 11px; right: 0; width: 99px; border-left: solid 1px #ddd; text-align: center; z-index: 1;}
.listed .menu a{font-size: 12px; color: #999; text-decoration: none; display: block; transition: all .41s; padding: 9px; border: solid 1px #eee; margin:0 9px 9px 9px; text-align: center; cursor: pointer;}
.listed .menu a i{font-size: 25px; display: block;}
.listed .menu a i.ion-social-whatsapp{color: #06D755;}
.listed .menu a i.ion-social-facebook{color: #4267B2;}
.listed .menu a i.ion-radio-waves.live{color: #c90000;}
.listed .menu a:hover{background-color: #eee;}
.pagerBtn{font-size: 0; color:#999; margin: 9px;}
.pagerBtn .btn.btn-lg{background-color: #003F39 !important;}
@media screen and (max-width: 786px){
    .listed > a > small{display: none;}
    .listed .head h4{font-size: 15px; height: 49px; overflow: hidden; line-height: 17px;}
}

.header{background: url('../images/header.jpg') no-repeat bottom center #222278; background-size: auto 100%; height: 171px; box-shadow: 0 0 21px 9px rgba(0,0,0,.21); position: relative; margin-bottom: 21px;}
.header.postView{background-size:contain; height: 0px; background-color: #000; background-position: center center;}
.header.live,.header.live.postView{background: #000; color: #fff; height:auto; }
.header .stream{ height: 393px; width: 100%; overflow: hidden; display: inline-block; text-align: center; background-color: #000; }
.header .stream iframe{ margin-top: -99px; padding-bottom:0; height: 494px; width: 100%;; display: inline-block; }

.header .pinMap{overflow:hidden; display: block; width:99px; border-radius: 3px; height:71px; text-align: center; position: absolute; bottom: 9px; left:9px; }
.header .pinMap a{display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 9; cursor:zoom-in;}
.header .pinMap iframe{margin: -111px 0 0 -141px; position: relative; z-index: 0; display: inline-block; width:313px; height:313px; }

.header .agendaOn{display: block; text-align: left; color: #fff; padding: 0 11px 11px 9px; font-size: 15px; line-height: 21px;}
.header .agendaOn img{float: left; margin-right: 11px; width: 99px; border: solid 1px rgba(255,255,255,.41); padding:5px 9px; border-radius: 3px;}
.header .agendaOn h4{margin: 0; padding: 0; font-size: 21px; height: 25px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.header .agendaOn span{display: block; color:#fc0; height: 21px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.header .agendaOn span+span{color:#fff;}
.header .agendaOn span i{display: inline-block; min-width: 19px; text-align: center;}
.header .agendaOn small{display: block; height: 71px; margin-top: 3px; overflow: hidden; text-overflow: ellipsis; line-height: 14px;}
#gmap_canvas img{max-width:none !important; background:none !important;}

@media screen and (max-width: 786px){
    .header{background: url('../images/header.jpg') no-repeat bottom center #222278; background-size: auto 100%; height: 99px;}
    .header.live {padding:33px 0 5px 0;}
    .header .stream{ height: 272px; background-color: transparent;}
    .header .stream iframe{ height: 313px; margin-top: -55px; width: 100%;}
    .header .agendaOn{padding: 0 9px; font-size: 12px; line-height: 15px;}
    .header .agendaOn img{}
    .header .agendaOn h4{font-size: 15px;}
    .header .agendaOn span{display: block;}
    .header .agendaOn small{display: none;}
}

.BarokaAllah{position: fixed; box-shadow: 0 1px 3px rgba(0,0,0,.41); transition: background-color 1.91s;  top:0; left: 0; right: 0; z-index: 99; max-height: 131px; background-color: #fff; display: block; z-index: 99;}
    .BarokaAllah img{position: absolute; left: 7px; top: 0px; width: 71px; z-index: 9;}
    .BarokaAllah .pencarian{position: relative; padding:11px 121px 11px 9px; z-index: 1; background-image: url('../images/bgloop.png'); background-position: bottom center; background-color: #003F39; }
    .BarokaAllah .pencarian span{position: absolute; top: 11px; right:13px; font-size: 0px; color: #fff;}
    .BarokaAllah .pencarian span i{display: inline-block; cursor: pointer; font-size: 25px; font-weight: bold; border-radius: 50%; width: 49px; height: 49px; line-height: 49px; text-align: center; padding:0; margin-left: 5px;}
    .BarokaAllah .pencarian span i:hover{background-color: rgba(0,0,0,.11); }
    .BarokaAllah .pencarian input{font-size: 17px; background-color: rgba(255,255,255,.71); box-shadow: inset 0 0 9px rgba(0,0,0,.21); outline: none; width: 100%; padding: 13px 9px 7px 71px; height: 49px; line-height: 49px; border:solid 1px #003F39; color: #003F39; border-radius: 3px 3px 3px 3px; margin:0;}
    .BarokaAllah .pencarian input::placeholder{color: #ddd; font-size: 21px; transition: all .41s; content: 'BHENNING.id';}
    .BarokaAllah .pencarian input:focus::placeholder{font-size: 11px; content: 'pencarian...';}
    .BarokaAllah .pencarian .clearText{position: absolute; top: 11px; line-height: 41px; width: 37px; height: 37px; text-align: center; border-radius: 3px; cursor: pointer; right: 101px; font-size: 21px; color: #00999E;}
    .BarokaAllah .topMenu{ position: absolute; text-align: center; z-index: 9; top: 7px; right: 121px; padding: 0; color: #fff; overflow: hidden; height:63px; overflow: hidden; font-size: 0; white-space: nowrap; margin: 0; transition: margin-top ease-out .41s;}
    .BarokaAllah.top .topMenu{margin-top: -63px;}
    .BarokaAllah .topMenu a{display: inline-block; opacity:1; padding: 4px 12px; font-size: 12px; cursor: pointer; border-left: solid 1px rgba(255,255,255,.11); line-height: 49px; vertical-align: middle; position: relative; text-shadow: 1px 1px 3px rgba(0,0,0,.41); z-index: 0;}
    .BarokaAllah .topMenu a > b{position: absolute; display: none; top: 7px; right: 3px; background-color: #f00; box-shadow:inset 0 -9px 1px rgba(0,0,0,.41), 0 0 3px rgba(0,0,0,.41); border-radius: 3px; width: 21px; height: 15px; padding: 0; line-height: 17px; font-size: 9px; color: #fff; text-align: center; z-index: 3;}
    .BarokaAllah .topMenu a > .animasi{display: none; z-index: 0;}
    .BarokaAllah .topMenu a > i{font-size: 25px; transition: all .41s; display: inline-block; vertical-align: middle; line-height: 33px; width: 33px; height: 33px; text-align: center; position: relative; z-index: 1;}
    .BarokaAllah .topMenu a.active,.BarokaAllah .topMenu a:hover{opacity:.71;}
    .BarokaAllah .topMenu a.toggleList{ padding:0 5px;}
    .BarokaAllah .topMenu a.toggleList i{ font-size: 15px; width: 21px;}
    .BarokaAllah .topMenu a.on{z-index: 1;}
    .BarokaAllah .topMenu a.on > i{background-color: #1E40E4; box-shadow:inset 9px -9px 1px rgba(0,0,0,.21), 0 0 3px 2px #003F39; font-size: 21px; color: #fff; border-radius: 50%;}
    .BarokaAllah .topMenu a.on > b,.BarokaAllah .topMenu a.on > .animasi{display:block;}
    .BarokaAllah .topMenu a.on > b .ion-pause,.BarokaAllah .topMenu a.on.pause > b .ion-play{display:none;}
    .BarokaAllah .topMenu a.on.pause > b .ion-pause{display:block;}
    .BarokaAllah .topMenu a.on > b .ion-radio-waves{font-size: 14px;}

@media screen and (max-width: 786px){
    .BarokaAllah{position: fixed; box-shadow: 0 1px 1px rgba(0,0,0,.09); transition: background-color 1.91s;  top:0; left: 0; right: 0; z-index: 99; max-height: 131px; background-color: #fff; display: block; z-index: 99;}
    .BarokaAllah img{position: absolute; left: 7px; top: 0px; width: 71px; z-index: 9;}
    .BarokaAllah .pencarian{position: relative; padding:11px 121px 11px 9px; z-index: 1; background-image: url('../images/bgloop.png'); background-position: bottom center; background-color: #003F39; }
    .BarokaAllah .pencarian span{position: absolute; top: 11px; right:13px; font-size: 0px; color: #fff;}
    .BarokaAllah .pencarian span i{display: inline-block; cursor: pointer; font-size: 25px; font-weight: bold; border-radius: 50%; width: 49px; height: 49px; line-height: 49px; text-align: center; padding:0; margin-left: 5px;}
    .BarokaAllah .pencarian span i:hover{background-color: rgba(0,0,0,.11); }
    .BarokaAllah .pencarian input{font-size: 17px; background: #fff; max-width: 313px; outline: none; width: 100%; padding: 13px 9px 7px 71px; height: 49px; line-height: 49px; border:solid 1px #003F39; color: #003F39; border-radius: 3px 3px 3px 3px; margin:0;}
    .BarokaAllah .pencarian input::placeholder{color: #ddd; font-size: 21px; transition: all .41s; content: 'BHENNING.id';}
    .BarokaAllah .pencarian input:focus::placeholder{font-size: 11px; content: 'pencarian...';}
    .BarokaAllah .pencarian .clearText{position: absolute; top: 11px; line-height: 41px; width: 37px; height: 37px; text-align: center; border-radius: 3px; cursor: pointer; right: 101px; font-size: 21px; color: #00999E;}
    .BarokaAllah .topMenu{padding: 0; position: relative; top: auto; right: auto; color: #003F39; overflow: hidden; height:63px; overflow: hidden; font-size: 0; white-space: nowrap; margin: 0; transition: margin-top ease-out .41s;}
    .BarokaAllah.top .topMenu{margin-top: -63px;}
    .BarokaAllah .topMenu a{display: inline-block; opacity:1; padding: 4px 12px; font-size: 12px; cursor: pointer; line-height: 49px; vertical-align: middle; }
    .BarokaAllah .topMenu a+a{border-left: solid 1px #eee; }
    .BarokaAllah .topMenu a > i{font-size: 25px; display: inline-block; vertical-align: middle; line-height: 33px;  width: 33px; height: 33px; text-align: center;}
    .BarokaAllah .topMenu a.active,.BarokaAllah .topMenu a:hover{opacity:.71;}
}


.Bismillah{ transition: margin .41s; bottom: 9px; right:50%; z-index: 111; border-radius:3px 3px 3px 3px; display: inline-block; text-align:left; position: fixed; padding: 3px 3px 0 3px; background-color:rgb(255,205,0); margin:0 -159px -313px 0; 
                        box-shadow: 0px 0px 11px 9px rgba(0,0,0,.21); 
                        background: rgb(255,205,0);
                        background: linear-gradient(-41deg, rgba(255,205,0,1) 0%, rgba(154,78,7,1) 10%, rgba(255,205,0,1) 13%, rgba(154,78,7,1) 33%, rgba(255,205,0,1) 36%, rgba(154,78,7,1) 54%, rgba(255,205,0,1) 56%, rgba(154,78,7,1) 77%, rgba(255,205,0,1) 78%, rgba(255,205,0,1) 98%, rgba(154,78,7,1) 100%);
                    }
.Bismillah.show{margin:0 -159px 0 0;}
.Bismillah *::-webkit-scrollbar {width: 3px; height:3px;}
.Bismillah *::-webkit-scrollbar {width: 3px; height:3px;}
.Bismillah *::-webkit-scrollbar-track {    background-color: rgba(255,255,255,0.41);    border-left: 0px solid rgba(255,255,255,0.11);}
.Bismillah *::-webkit-scrollbar-thumb {    background-color: rgba(154,78,7,1); border-radius:3px; cursor: pointer;}
.Bismillah *::-webkit-scrollbar-thumb:hover {background-color:rgba(154,78,7,1);	}
.Bismillah .Bhenning{z-index: 1; position: relative; width: 313px; height: 212px; overflow: hidden; background-image: url('../images/bgloop.png'); background-color: #003F39; box-shadow: inset 0 0 9px rgba(0,0,0,.21), 0 0 9px 3px rgba(0,0,0,.11); border-radius: 5px;}
.Bismillah .Bhenning::before{content: ''; position: absolute; bottom:41px; left: 0; z-index:1; right: 0; top: 0; box-shadow: inset 0px 0px 41px 33px rgba(0,0,0,.99); background-size: 99px 99px; background-repeat: no-repeat; background-position: center center; background-image:  url('../images/bhenningbg.png');}
.Bismillah .Bhenning::after{content: ''; position: absolute; bottom: 41px; left: 0; z-index: 3; right: 0; height:1px; background: #000; box-shadow: 0 0 11px 9px #000;}
.Bismillah .Bhenning .vUp{position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: #000; display: block; z-index: 7;}
.Bismillah .Bhenning .vID{width: 313px; height: 313px; position: absolute; top:-71px; left: 0; z-index: 1; opacity: 0;}
.Bismillah .Bhenning .seeker{bottom:21px; left: 49px; right: 9px; padding:0; position: absolute; height: 21px;  border-radius:0; z-index:9; margin: 0;}
.Bismillah .Bhenning .seeker::after{content: ''; position: absolute; top: 9px; left:0; right:0; height: 1px; background-color: #fc0;}
.Bismillah .Bhenning .judul{ position: relative; vertical-align: bottom; padding: 21px 71px 0 49px; bottom: 0; left: 0; right: 0; font-weight:normal; max-width: 100%; font-size: 11px; overflow-y: visible; overflow-x: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 11px; position: absolute; height: 41px; background-color:#000; z-index:7; color: #F9E400; }
.Bismillah .Bhenning .judul .text{ font-weight: normal;}
.Bismillah .Bhenning .judul .durasi{  position: absolute; bottom: 9px; right:9px; opacity: 0;}
.Bismillah .Bhenning .logo{position: absolute; bottom: 1px; left: 1px; display: inline-block; width: 41px; z-index: 9; padding:0; }
.Bismillah .Bhenning .seeker input[type=range] {position: absolute; top: -2px; left: 0; right: 0;height: 21px;-webkit-appearance: none;margin: 0;width: 100%; background-color:transparent;z-index: 1;}
.Bismillah  h6{color: #F9E400; margin: 9px 0; font-size: 17px; text-shadow:1px 1px 2px #000;}
.Bismillah  h6 i{font-size: 21px; line-height: 19px; vertical-align:bottom; margin: 0 3px 0 14px;}
.Bismillah  input[type=range]:focus {outline: none;}
.Bismillah  input[type=range]::-webkit-slider-runnable-track {width: 100%;height: 15px;cursor: pointer;animate: 0.2s;box-shadow: 0px 0px 0px #000000;background: rgba(255,204,0,0);border-radius: 3px;border: 0px solid #000000;}
.Bismillah  input[type=range]::-webkit-slider-thumb {box-shadow: 0px 0px 0px #000000;border: 1px solid #fc0;height: 11px;width: 11px;border-radius: 25px;background: #fff;cursor: pointer;-webkit-appearance: none;margin-top: 3px;}
.Bismillah  input[type=range]:focus::-webkit-slider-runnable-track {background: rgba(255,204,0,0);}
.Bismillah  input[type=range]::-moz-range-track {width: 100%;height: 15px;cursor: pointer;animate: 0.2s;box-shadow: 0px 0px 0px #000000;background: #E3E1E1;border-radius: 21px;border: 0px solid #000000;}
.Bismillah  input[type=range]::-moz-range-thumb {box-shadow: 0px 0px 0px #000000;border: 1px solid #000000;height: 18px;width: 18px;border-radius: 25px;background: #FFFFFF;cursor: pointer;}
.Bismillah  input[type=range]::-ms-track {width: 100%;height: 15px;cursor: pointer;animate: 0.2s;background: transparent;border-color: transparent;color: transparent;}
.Bismillah  input[type=range]::-ms-fill-lower {background: #E3E1E1;border: 0px solid #000000;border-radius: 42px;box-shadow: 0px 0px 0px #000000;}
.Bismillah  input[type=range]::-ms-fill-upper {background: #E3E1E1;border: 0px solid #000000;border-radius: 42px;box-shadow: 0px 0px 0px #000000;}
.Bismillah  input[type=range]::-ms-thumb {margin-top: 1px;box-shadow: 0px 0px 0px #000000;border: 1px solid #000000;height: 18px;width: 18px;border-radius: 25px;background: #FFFFFF;cursor: pointer;}
.Bismillah  input[type=range]:focus::-ms-fill-lower {background: #E3E1E1;}
.Bismillah  input[type=range]:focus::-ms-fill-upper {background: #E3E1E1;}          
.Bismillah  input[type=range]+input[type=range]{opacity: 0; z-index: 3;}


.Bismillah .playlistBtn{display: block; margin: 0 3px 0px 3px; padding: 0 0 3px 0; text-align: center; cursor: pointer;  line-height: 21px;}
.Bismillah .playlistBtn > i{background-color: rgba(0,0,0,.41);  box-shadow: inset 0px 3px 7px rgba(0,0,0,.71); transition: box-shadow .41s;  color: #fc0; font-size: 21px; line-height:33px; border-radius: 0 0 5px 5px; min-width: 99px;}
.Bismillah .playlistBtn:hover > i{ color: #fff;                 box-shadow: inset 0px -3px 7px rgba(0,0,0,.71);}
.Bismillah .playlistBtn > i.ion-navicon,.Bismillah.show .playlistBtn.open > i.ion-minus-round{display: inline-block;}
.Bismillah .playlistBtn > i.ion-minus-round,.Bismillah.show .playlistBtn.open > i.ion-navicon{display: none;}
.Bismillah .playlist{ transition: all .41s ease-in; overflow: hidden; max-height: 0px; margin: 0; width: 313px; border-radius: 3px; display: block; background-color: #003F39; box-shadow: inset 0px 0px 21px 11px rgba(0,0,0,.71); background-image: url('../images/bgloop.png'); }
.Bismillah.show .playlist.open{max-height: 171px; margin:3px 0 0px 0;}
.Bismillah .playlist div {max-height: 121px; overflow-y: scroll; overflow-x: hidden; }
.Bismillah .playlist div a{background-color: rgba(0,0,0,.41); text-decoration: none; position: relative; color: #fc0; padding: 9px 71px 9px 9px; display: block; font-size: 11px; overflow:hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 11px; }
.Bismillah .playlist div a+a{border-top: solid 1px rgba(0,0,0,.41);}
.Bismillah .playlist div a > img{display: inline-block; width: 21px; float: left; margin: 0 9px 0 0;}
.Bismillah .playlist div a > small{position: absolute; top: 0; left:0; right:0; padding: 21px 0 9px 41px; display: block; z-index:0; cursor: pointer;}
.Bismillah .playlist div a > strong{ background-color: rgba(0,0,0,0.21); position: absolute; top: 2px; border-radius: 3px; cursor: pointer; right: 5px; width: 33px; font-size: 15px; line-height: 33px; display: block; z-index: 1; text-align:center;}
.Bismillah .playlist div a:hover{background-color: rgba(0,0,0,.51); color: #F9E400;}
.Bismillah .playlist div a.play,.Bismillah .playlist a.play:hover{background-color: rgba(0,0,0,.71);}
.Bismillah .playlist div a.play > strong{display: none;}

.Bismillah .playlist > strong{background-color: rgba(0,0,0,.99); border-radius: 5px 5px 0 0; overflow: hidden; text-decoration: none; position: relative; color: #fc0; padding: 0 0 0 9px; display: block; font-size: 13px; line-height: 41px; }
.Bismillah .playlist > strong span{float: right; margin: 7px 7px 0 0; display:inline-block;}
.Bismillah .playlist > strong span label{cursor: pointer; float: left; display: inline-block; vertical-align: bottom; padding: 3px; margin:0; border-radius: 3px 0 0 3px; border: solid 1px rgba(255,205,0,0.41); color: rgba(255,205,0,0.41); border-right: none; background-color: rgba(0,0,0,0); font-size: 17px; min-width: 33px; text-align: center; line-height: 21px;}
.Bismillah .playlist > strong span label+label{border-radius: 0 3px 3px 0; border-right: solid 1px rgba(255,205,0,0.41);}
.Bismillah .playlist > strong span label+label+label{margin: 0 0 0 3px; border-radius: 3px; border: solid 1px rgba(255,205,0,0.41);}
.Bismillah .playlist > strong span label.active,.Bismillah .playlist > strong label:hover{color: #fc0;}
.Bismillah .playlist > strong span label input{width: 0px; height: 0px; position: absolute; opacity: 0;}
.Bismillah .playlistHide{background-color: rgba(0,0,0,.41);  box-shadow: inset 0px 3px 7px rgba(0,0,0,.71); transition: box-shadow .41s;  color: #fc0; position: absolute; cursor: pointer; bottom: 5px; padding: 3px 15px; border-radius:9px 9px 41px 41px; right: 9px; font-size: 17px; line-height: 21px;}
.Bismillah .playlistHide:hover{box-shadow: inset 0px -3px 7px rgba(0,0,0,.71); }


.Bismillah{margin-right: -159px !important; right: 171px; margin-bottom: -313px !important;}
.Bismillah.show{margin-bottom: 0 !important;}
.Bismillah .Bhenning{width: 313px; height: 212px;}
.Bismillah .playlist{width: 313px;}
.Bismillah .Bhenning .vID{width: 313px; height: 313px; top:-71px;}

.Bismillah.besar{margin-right: -393px !important; right: 50%; margin-bottom: -786px !important;}
.Bismillah.besar.show{margin-bottom: 0 !important;}
.Bismillah.besar .Bhenning{width: 786px; height: 479px; }
.Bismillah.besar .playlist{width: 786px;}
.Bismillah.besar .Bhenning .vID{width: 786px; height: 786px; top:-171px; }
.Bismillah.besar .Bhenning .judul{font-size: 12px; }





















    .gridBoxs{position: relative; opacity:.41; border: solid 1px rgba(0, 0, 0, .21); min-height: 52px; overflow: hidden; vertical-align: middle;}
    .gridBoxs.active{opacity:1;}
    .gridBoxs h6{margin: 0; z-index: 1; position: absolute; top:1px; transition: right .41s; right:-125px; cursor: pointer;}
    .gridBoxs h6 .btn-group{ vertical-align: middle; }
    .gridBoxs h6 label{font-size: 12px; padding: 3px 0 0 0; display: inline-block; vertical-align: middle; white-space: nowrap; max-width: 0px; overflow: hidden; transition: max-width .41s;}
    .gridBoxs h6 i{vertical-align: middle; font-size: 11px; min-width: 33px; display: inline-block; border-radius: 21px; height: 25px; padding: 1px 9px; margin: 0 5px; text-align: center;}
    .gridBoxs h6:hover{right: 1px;}
    .gridBoxs h6:hover label{max-width: 191px; margin-left: 5px;}
    .gridBoxs .row{position: relative; z-index: 0;}
    .gridBoxs .row .col{border: solid 1px #fff;}
    .gridBoxs .row .col aside > select{border-radius: 5px 5px 0 0; margin-bottom: 0 !important;}
    .gridBoxs .row .col aside > .row{border-radius: 0 0 5px 5px; padding: 0 2px 0 3px !important; margin-bottom: 3px !important; background-color: #fff;}
    .gridBoxs .row .col aside .row .btn,.gridBoxs .row .col aside .row input{height: 28px; font-size: 12px; padding: 5px; border:none; color:#fff;}
    .gridBoxs .row .col aside .row .input-group-addon{border: none; padding: 0 5px; border-left: solid 1px rgba(0, 0, 0, .71);}
    .gridBoxs .row .col aside .row .input-group-addon i{border: solid 3px rgba(255,255,255,.41); border-radius: 3px;}
    .gridBoxs .row .col aside .row .btn-group input.btn{width:41px;}
    .gridBoxs .row .col aside .row textarea.btn{min-height: 141px; white-space: pre-wrap;}
    .gridBoxs .row .col aside .row > div{padding: 0 1px 0 0;}
    .gridBoxs .row .col .btnGabung{position: absolute; border: solid 1px #fff; bottom: 3px; left: -21px; width: 41px; display: none;}
    .gridBoxs .row .col+.col .btnGabung{display: block;}
    .gridBoxs .row .col,
    .gridBoxs .row .col aside .row input,
    .gridBoxs .row .col aside .row .btn,
    .gridBoxs .row .col aside .row .input-group-addon{background-color:rgba(0, 0, 0, .71);}
    .gridBoxs .row .col aside > select,
    .gridBoxs .row .col aside > .row{background-color: rgba(0, 0, 0, .71) !important; color: #fff;}



.boxWidget{margin:3px; display: block; overflow: hidden;}
.boxWidget .card{overflow: hidden;}
.boxWidget .card-header{padding: 9px 0 21px 11px; text-align: left; border: none; position: absolute; top: 0; left: 0; right: 0; z-index: 1;}
.boxWidget .card-footer{background-color: rgba(0,0,0,.03);  cursor:pointer; text-align: center; height: 17px; padding:1px !important;}
.boxWidget h6{z-index: 1; font-weight: bold;}
.boxWidget .card-body{position: relative; z-index: 0; padding: 21px 0 0 0 !important;}
.boxWidget .postingList{position: relative;}
.boxWidget .postingList .daftar{display: block; height: 131px; overflow: hidden;.daftarst-style: none; transition: all .41s; margin: 0; padding:0; position: relative;}
.boxWidget .postingList .daftar:hover{}
.boxWidget .postingList .daftar a{text-decoration:none;}
.boxWidget .postingList .daftar .img{width: 100%; height: 131px; overflow: hidden; background-size: cover; background-repeat: no-repeat; background-position: center center; position: relative; z-index: 0;}
.boxWidget .postingList .daftar .img .ion-social-youtube{position: absolute; top: 50%; left: 50%; font-size: 41px; margin: -33px 0 0 -27px; color: #fff; text-shadow: 0px 0px 5px rgba(0,0,0,.21); opacity: .71; z-index: 9; transition: all .41s;}
.boxWidget .postingList .daftar .img .ion-social-youtube:hover{text-shadow: 0px 0px 21px rgba(0,0,0,.71); opacity: .99;}
.boxWidget .postingList .daftar .img::after{content: ''; transition: all ease-in-out .41s; opacity:.99; position: absolute;top: 0;left: 0;right: 0;bottom: 0;z-index: 0;}
.boxWidget .postingList .daftar:hover .img::after{opacity: .71;}
.boxWidget .postingList .daftar a > small{ opacity: .91; font-size: 11px; max-height: 15px; text-align: right; line-height: 11px; padding:0; font-weight: normal; position: absolute; bottom: 3px; right: 0px; display: block; margin: 0 0 3px 0;  overflow: hidden; z-index: 1; }
.boxWidget .postingList .daftar a > small > span{ display:inline-block; white-space: nowrap; padding-right: 9px;}
.boxWidget .postingList .daftar a > small span i{font-size: 13px; display: inline-block; padding: 0 1px 0 1px; text-align: center;}
.boxWidget .postingList .daftar a > strong{ font-size: 13px; font-weight:normal; line-height: 17px; max-height: 33px; position: absolute; bottom: 21px; text-align: right; left: 9px; right: 9px; display: block; margin: 0; padding:0; overflow: hidden; }
.boxWidget .postingList .daftar a > strong i{font-size: 21px; vertical-align:bottom; display: inline-block; margin-right: 3px;}
.boxWidget .postingList .daftar a > strong > small{opacity: .81; font-size: 11px; line-height: 11px; display: block; margin: 0; white-space: nowrap;}
.boxWidget .postingList .daftar a > span{ position: absolute; top: 33px; right: -99px; transition: right ease-in .41s; text-align:right;}
.boxWidget .postingList .daftar+.daftar a{ color: #333 !important;}
.boxWidget .postingList .daftar+.daftar{border-top: solid 1px; height: 71px; padding: 5px 0 0 9px; }
.boxWidget .postingList .daftar+.daftar .img{width: 41px; height: 41px; display:block; margin: 0px 9px 0px 0; float: left; border:solid 1px #dedede; border-radius: 5px; }
.boxWidget .postingList .daftar+.daftar .img .ion-social-youtube{font-size: 21px; margin: -11px 0 0 -11px;}
.boxWidget .postingList .daftar+.daftar:hover .img::after{opacity: .11;}
.boxWidget .postingList .daftar+.daftar a > strong{position: relative; text-align: left; font-weight: normal; padding: 7px 9px 0 0; max-height: 41px; height: 41px; display:block; margin-bottom: 5px; bottom: auto; left: auto; right: auto;}
.boxWidget .postingList .daftar+.daftar a > small{ opacity: .71; position: relative; top: auto; bottom: auto; left: auto; right: auto; text-align: left;}
.boxWidget .postingList .daftar+.daftar a > span{top: 1px;}
.boxWidget .postingList .daftar:hover a >span{z-index: 99; right: -7px; }
.boxWidget .postingList .daftar a >span button{cursor: pointer; display: block; margin-bottom: 1px; padding: 2px 15px 2px 3px; width: 33px;}

.boxWidget .postingList::-webkit-scrollbar-track {
    background-color: rgba(0,0,0,.03);    border-left: 0px solid rgba(0,0,0,.11);}

.boxWidget .postingList .daftar+.daftar,
.boxWidget .card,
.boxWidget .card-header,
.boxWidget .card-body,
.boxWidget .card-footer{
    border-color: rgba(0,0,0,.11);
    }

.widBoxer{ position: relative; margin:3px; display: block; overflow:hidden;}
.widBoxer > div{position: relative; padding:3px; min-height:33px;border-radius: 5px; overflow: hidden;}
.widBoxer > div > div{ position: relative; z-index: 0; }
.widBoxer > div > h5{position:absolute; line-height: 41px; top:0; right:0; left: 0; height: 0px; padding: 0px 21px 21px 21px; margin: 0; overflow: hidden; text-align: right; opacity:0; transition: all .41s; z-index: 1;}
.widBoxer > div:hover > h5{height:53px; opacity: 1;}


.widBoxer.quote .carousel-item{padding: 9px;}
.widBoxer.quote .carousel-item p img,.boxQuote .carousel-item p a{display:none !important;}

.widBoxer.galeri > div > div .carousel-indicators{bottom: 0; padding: 11px 0; margin: 0 auto;}
.widBoxer.galeri > div > div .carousel-indicators li{cursor: pointer; transition: all ease-in-out .41s;}
.widBoxer.galeri > div > div .carousel-item .ion-social-youtube{position: absolute; top: 50%; left: 50%; font-size: 41px; margin: -25px 0 0 -27px; color: #fff; text-shadow: 0px 0px 5px rgba(0,0,0,.21); opacity: .71; z-index: 9; transition: all .41s;}
.widBoxer.galeri > div > div .carousel-item .ion-social-youtube:hover{text-shadow: 0px 0px 21px rgba(0,0,0,.71); opacity: .99;}


.widBoxer.widget > div > div,
.widBoxer.quote > div > div .carousel-item,
.boxWidget .postingList{ position: relative; z-index: 0;  overflow-x: hidden;}

.widBoxer.widget > div > h5,
.widBoxer.quote > div > h5{top:auto; bottom: 0; padding: 11px 21px 15px 21px; }

.widBoxer.headline > div > div .carousel-item small{padding: 0 9px 0 29px; margin-right: 3px; display: inline-block; border-radius: 3px;}
.widBoxer.headline > div > div .carousel-item{white-space: nowrap; overflow: hidden; text-overflow:ellipsis; padding: 3px; text-align: left;}
.widBoxer.headline > div > div .carousel-item span{white-space: nowrap; overflow: hidden; text-overflow:ellipsis; }
.widBoxer.headline > div > h5{top:0; text-align: left; bottom: 0; left: -9px; line-height: 100%; right: auto; opacity: 1; padding:7px 21px 0 13px; height: auto; font-size: 17px; white-space: nowrap; width: 25px; }
.widBoxer.headline > div:hover > h5{width:141px;}

.widBoxer.widget > div > div::-webkit-scrollbar,
.boxWidget .postingList::-webkit-scrollbar,
.widBoxer.quote > div > div .carousel-item::-webkit-scrollbar{width:7px; height:0; transition:width .41s;}

.widBoxer.widget > div > div:hover::-webkit-scrollbar,
.boxWidget .postingList:hover::-webkit-scrollbar,
.widBoxer.quote > div > div .carousel-item:hover::-webkit-scrollbar{width: 7px; height:0;}




.indexBox{margin:3px 3px 11px 3px; padding:3px 9px; height:<?php echo $boxHeight;?>px;}
.pagerBtn{margin: 0; display: inline-block;}
.pagerBtn .btn-group{vertical-align: middle !important; margin: 21px 0;}
.pagerBtn .btn{ vertical-align: middle !important; cursor: pointer;}
.pagerBtn .btn-group .btn{font-size: 12px; padding: 7px 0 0 0; min-width: 33px; height: 33px; position: relative; z-index: 0;}
.pagerBtn .btn-group .btn i{margin-top: 3px;}
.pagerBtn .btn-group .btn .badge{padding: 5px}
.pagerBtn .btn-group .btn.active,
.pagerBtn .btn-group .btn.prev,
.pagerBtn .btn-group .btn.next{position: relative; z-index: 1;}
.pagerBtn .btn-group .btn.active{font-size: 19px; z-index: 3; padding:5px 0; height: 41px; margin-top: -8px; border-radius:3px !important; }
.indexBox aside{position: relative; }
.indexBox aside article{height: 171px; padding:0 9px 0 0; position: relative; border: solid 1px rgba(0,0,0,.11); margin:0 0 21px 0; overflow: hidden; text-align: left; box-shadow: 0 0 0 rgba(0,0,0,.21); transition: all .41s; border-radius:3px;}
.indexBox aside article:hover{box-shadow: 0 0 3px rgba(0,0,0,.21);}
.indexBox aside article a{text-decoration:none; }
.indexBox aside article a .judul{display: block; padding:0; margin-bottom: 9px; font-size: 17px; max-height: 41px; overflow: hidden;}
.indexBox aside article a .img{width:191px; height: 171px; overflow: hidden; background-size: cover; background-repeat: no-repeat; background-position: center center; position: relative; z-index: 0; display: block; float: left; margin: 0 15px 9px 0;}
.indexBox aside article a .img .ion-social-youtube{position: absolute; top: 50%; left: 50%; font-size: 41px; margin: -21px 0 0 -27px; color: #fff; text-shadow: 0px 0px 5px rgba(0,0,0,.21); opacity: .71; z-index: 9; transition: all .41s;}
.indexBox aside article a .img .ion-social-youtube:hover{text-shadow: 0px 0px 21px rgba(0,0,0,.71); opacity: .99;}
.indexBox aside article a .img::after{content: ''; transition: all ease-in-out .41s; opacity:.99; position: absolute;top: 0;left: 0;right: 0;bottom: 0;z-index: 0;}
.indexBox aside article a:hover .img::after{opacity: .71;}

.indexBox aside article .entry-meta{display: block; padding: 9px 0;}
.indexBox aside article .photoPenulis{width: 41px; height: 41px; border-radius: 50%; margin: 0 9px 0 0; float: left;}
.indexBox aside article .author{font-size: 13px; font-weight: bold; display: block;}
.indexBox aside article .posted-on,
.indexBox aside article .posted-on a,
.indexBox aside article .lead{font-size:11px; opacity: .79;}
.indexBox aside article .lead{font-size:13px; line-height: 17px; height: 49px; overflow: hidden; display: block;}


@media (max-width: 767px) {
    .indexBox{height: auto;}
    .indexBox aside article{height: 99px; }
    .indexBox aside article a .img{width:99px; height: 99px;}
    .indexBox aside article .lead{display:none;}
    .indexBox aside article .photoPenulis{width: 21px; height: 21px;}
    .indexBox aside article a .judul{margin:0;}
    .indexBox aside article .entry-meta{padding: 9px 0 0 0;}
}



.footer{min-height: 313px; z-index: 0; font-size: 12px; line-height: 15px; position: relative; color: #fff; padding: 21px 0; margin-top: 21px; overflow: hidden; background-image: url('../images/bgloop.png'); background-position: top center; background-color: #003F39; }
body .footer .container .row > span{display: block; text-align: center; padding: 21px 0 0 0; display: inline-block; z-index: 9;}
body .footer .container .row > span img{height: 21px; vertical-align: bottom;}
body .footer b{color: #fc0; font-weight: normal;}
body .footer::after{content: ''; opacity: .41; position: absolute; z-index: 1; text-shadow: 1px 1px 3px #000; text-align: center; color: #fff; bottom:0; left: 0; right: 0; top: -191px; box-shadow: inset 0px 0px 99px 71px rgba(0,0,0,.71);}
body .footer h6{display: block; margin: 9px 0 0 0; padding: 0 0 9px 0; border-bottom: dotted 1px #999;}

body .footer .identitas,body .footer .alamat,body .footer .link,,body .footer .develope{position: relative; z-index: 9;}
body .footer .identitas h5{display: block; position: relative; margin: 0 0 9px 0; padding: 3px 0 0 49px; font-size: 19px; line-height: 21px;}
body .footer .identitas h5 img{width: 41px; position: absolute; left: 0; top: 0;}
body .footer .identitas h5 small{display: block; color: #fc0; font-size: 12px; line-height: 15px;}
body .footer .identitas p{margin: 0 0 9px 0;}
body .footer a{position: relative; display: block; padding: 9px 0 0 21px; cursor: pointer;}
body .footer a i{position: absolute; left: 0; top: 11px; width: 21px; text-align: center;}
body .footer a span{opacity: .41;}