.flickerplate{position: relative;width:100%;height:100%;overflow:hidden; top:0%;}
.flickerplate ul.flicks:before { position: fixed;width: 100%;height: 100%;top: 0px;left: 0px;z-index: 0; }
.flickerplate ul.flicks:before {  }
.flickerplate ul.flicks{width:10000%;height:100%;padding:0px;margin:0px;list-style:none;}
.flickerplate ul.flicks>li{display:table;float:left;width:1%;height:100%;background-position:center;background-repeat:no-repeat;background-size:cover;}
.flickerplate ul.flicks>li .flick-inner{display:table-cell;height:100%;padding:10px;color:#fff;vertical-align:middle; }
.flickerplate ul.flicks>li .flick-inner .flick-content{max-width:68.75em;margin-left:auto;margin-right:auto;}
.flickerplate ul.flicks>li .flick-title{line-height:45px;font-size:35px;position:relative; width:100%; text-align: center; font-family:Oswald;}
.flickerplate ul.flicks>li .flick-sub-text{position: relative; width:100%; text-align:center; color:#FFF; font-size:17px;line-height:25px; font-family:Poppins; padding-bottom:0px; }
.flickerplate ul.flicks>li .flick-title span.flick-block-text,.flickerplate ul.flicks>li .flick-sub-text span.flick-block-text{padding-left:18px;padding-right:18px;padding-top:12px;padding-bottom:12px;background-color:rgba(0,0,0,0.6);}
.flickerplate .arrow-navigation{display:block;position:absolute;top:10%;width:10%;height:90%;z-index:100;overflow:hidden;vertical-align:middle;}

.flickerplate .arrow-navigation:before{position:absolute;top:50%;left:50%;margin-left:-25px;margin-top:-25px;height:50px;width:50px;opacity:0;filter:alpha(opacity=0);text-align:center;color:#fff;font-size:48px;font-size:3rem;-webkit-transition:opacity 0.2s ease-out 0s;-moz-transition:opacity 0.2s ease-out 0s;-o-transition:opacity 0.2s ease-out 0s;-ms-transition:opacity 0.2s ease-out 0s;transition:opacity 0.2s ease-out 0s;}
.flickerplate-no-touch .flickerplate .arrow-navigation:hover{cursor:pointer}
.flickerplate-no-touch .flickerplate .arrow-navigation:hover.left:before,.flickerplate-no-touch .flickerplate .arrow-navigation:hover.right:before{opacity:1;filter:alpha(opacity=100)}
.flickerplate-no-touch .flickerplate .arrow-navigation:active.left:before,.flickerplate-no-touch .flickerplate .arrow-navigation:active.right:before{}
.flickerplate .arrow-navigation.left{left:0%}.flickerplate .arrow-navigation.left:before{content:url(../kiri_edit.png);}.flickerplate .arrow-navigation.right{right:0%}.flickerplate .arrow-navigation.right:before{content:url(../kanan_edit.png);}
.flickerplate .dot-navigation{position:absolute;bottom:15px;width:100%;text-align:center;z-index:100;}
.flickerplate .dot-navigation ul{text-align:center;list-style:none;padding-left:15px;padding-right:15px;padding-top:0px;padding-bottom:0px}
.flickerplate .dot-navigation ul li{display:inline-block;float:none}
.flickerplate .dot-navigation .dot{width:14px;height:14px;line-height:14px;text-align:center;margin-left:6px;margin-right:6px;background-color:rgba(255,255,255,0.3);border-radius:50%;-o-border-radius:50%;-ms-border-radius:50%;-moz-border-radius:50%;-webkit-border-radius:50%;background-clip:padding-box;-webkit-transition:background-color 0.2s ease-out 0s;-moz-transition:background-color 0.2s ease-out 0s;-o-transition:background-color 0.2s ease-out 0s;-ms-transition:background-color 0.2s ease-out 0s;transition:background-color 0.2s ease-out 0s}
.flickerplate .dot-navigation .dot:hover{cursor:pointer;background-color:rgba(255,255,255,0.6)}
.flickerplate .dot-navigation .dot.active{background-color:#fff}
.flickerplate .dot-navigation.left,.flickerplate .dot-navigation.left ul{text-align:left}
.flickerplate .dot-navigation.right,.flickerplate .dot-navigation.right ul{text-align:right}.flickerplate.theme-dark .dot-navigation .dot{background-color:rgba(0,0,0,0.12)}.flickerplate.theme-dark .dot-navigation .dot:hover{background-color:rgba(0,0,0,0.6)}.flickerplate.theme-dark .dot-navigation .dot.active{background-color:#000}.flickerplate.theme-dark ul.flicks li .flick-inner{color:rgba(0,0,0,0.9)}.flickerplate.theme-dark ul.flicks li .flick-inner .flick-content .flick-sub-text{color:rgba(0,0,0,0.9)}.flickerplate.theme-dark ul.flicks li .flick-inner .flick-content .flick-title span.flick-block-text,.flickerplate.theme-dark ul.flicks li .flick-inner .flick-content .flick-sub-text span.flick-block-text{background-color:rgba(255,255,255,0.5)}.flickerplate.theme-dark .arrow-navigation:before{color:rgba(0,0,0,0.9)}.flickerplate ul.flicks li.flick-theme-dark .flick-inner{color:rgba(0,0,0,0.9)}.flickerplate ul.flicks li.flick-theme-dark .flick-inner .flick-content .flick-sub-text{color:rgba(0,0,0,0.9)}.flickerplate ul.flicks li.flick-theme-dark .flick-inner .flick-content .flick-title span.flick-block-text,.flickerplate ul.flicks li.flick-theme-dark .flick-inner .flick-content .flick-sub-text span.flick-block-text{background-color:rgba(255,255,255,0.5)}.flickerplate.animate-transform-slide ul.flicks{-webkit-perspective:1000;-webkit-backface-visibility:hidden;transform:translate3d(0%, 0px, 0px);-webkit-transform:translate3d(0%, 0px, 0px);-webkit-transition:-webkit-transform 0.2s ease-out;-o-transition:-o-transform 0.2s ease-out;-moz-transition:-moz-transform 0.2s ease-out;transition:transform 0.2s ease-out;}
.animasi_kotak_text {padding:40px; border:8px double #FFF; margin-top:50px;}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
.flickerplate ul.flicks>li .flick-title{line-height:60px;font-size:40px;}
.flickerplate ul.flicks>li .flick-sub-text{font-size:16px; line-height:25px; }
}
@media only screen and (max-width: 767px) {
.flickerplate{height:200px!important;}
.flickerplate ul.flicks>li .flick-title{line-height:50px;font-size:30px;}
.flickerplate ul.flicks>li .flick-sub-text{font-size:14px; line-height:20px; }
}
@media only screen and (min-wdth: 480px) and (max-width: 767px) {
.flickerplate{height:200px!important;}
.flickerplate ul.flicks>li .flick-title{line-height:30px;font-size:20px;}
.flickerplate ul.flicks>li .flick-sub-text{font-size:12px; line-height:18px; }
.flickerplate .arrow-navigation:before{opacity:0.4;}

}
@media only screen and (max-width: 479px) {
.flickerplate{height:200px!important;}
.flickerplate ul.flicks>li .flick-title{line-height:30px;font-size:20px;}
.flickerplate ul.flicks>li .flick-sub-text{font-size:12px; line-height:18px; }
.flickerplate .arrow-navigation:before{opacity:0.4;}
}
