#sp-header {
  background: #ffffff none repeat scroll 0 0;
  box-shadow: 0 3px 3px rgba(0,0,0,0.05);
  height: auto;
  left: 0;
  position: relative;
  top: 0;
  width: 100%;
  z-index: 99;
}
/*----------------language menu---------------------*/
.top-lang {
    float: left;
    list-style: none;;
    margin: 0px 0px 0px 15px;
    color: #999999;
    padding: 8px 0px 0px 0px;
    line-height: 10px;
    font-size: 13px;
}
/*----------------language menu text
.top-lang {
    float: left;
    list-style: none;;
    margin: 0px 0px 0px 15px;
    color: #999999;
    padding: 7px 0px 0px 0px;
    line-height: 10px;
    font-size: 13px;
}
.sp-module-content .mod-languages ul.lang-inline > li:first-child {
  color: #dadada;
  border-left: none !important;
  display: inline-block !important;
  line-height: 20px;
  height: 20px !important;
}

.sp-module-content .mod-languages ul.lang-inline > li > a {
  color: #dadada;
  border-left: 2px solid #878787 !important;
  display: inline-block !important;
  line-height: 20px;
  height: 20px !important;
}
.sp-module-content .mod-languages ul.lang-inline > li > a {
  display: flex;
  align-items: center;
  position: relative;
  padding: 0 13px;
}
.sp-module-content .mod-languages ul.lang-inline li a {
  padding: 10 !important;
}
.sp-module-content .mod-languages ul.lang-inline li a: hover {
  padding: 0 !important;
  color: #666666;
}

 ---------------------------------------------------*/
.kurang-jarak {
    margin-top: -20px;    
}
h1 {
    font-size: 24px;
}
/*----------------JM Intro Article ----------------------*/
.jmm-title, .mod-articles-category-title {
    font-family: Roboto Slab, sans-serif;
    font-size: 15px;
    font-weight: bold;
    line-height: 25px;
    padding-right: 0px;
}
.jm-category-module.default .jmm-intortext {
    margin: 10px 15px 0px 0px;
    text-align: justify;  
}
.jm-category-module.default .jmm-rows > div > .jmm-item {
    float: left;
    padding: 15px 5px 15px 20px;
    box-sizing: border-box;
}
ul.social-icons {
    list-style: none;
    padding: 0;
    margin: 5px;
    display: inline-block;
    font-size: 20px;
}
.nombor-gerak {
    font-family: Roboto Slab, sans-serif;
    font-weight: 700;
    letter-spacing: 5px;
}
.testimoni {
    font-family: Roboto Slab, sans-serif;
    font-size: 16px;
}
.reviews-block__person-role {
    color: #999;
    font-size: 10pt;
}
element {
}
.reviews-block__person-name {
    font-family: Roboto Slab, sans-serif;
    font-weight: 500;
    font-size: 15px;
    line-height: 1;
    margin-bottom: 2px;
}
.reviews-block__slide {
    background: #fff;
    padding: 20px 50px;
}
.top-social {
    float: left;
    list-style: none;;
    margin: 0px;
    color: #999999;
    padding: 6px 0px 0px 0px;
    line-height: 10px;
    font-size: 13px;
}
.top-social  a {
   color: #dadada;
}
.top-social  a:hover {
   color: #666666;
}
@media screen and (min-width: 320px) and (max-width: 767px){
.top-social {
    display: table;
    float: none;
    margin: 0;
    text-align: center;
    width: 100%;
    }
.top-lang {
    display: table;
    float: none;
    margin: 0;
    text-align: center;
    width: 100%;
    }  
}
.menu-heading {
text-align: center;
text-transform: uppercase;
font-weight: bold;
}
.sp-page-title h3 {
    font-size: 14px;
    font-weight: normal;
    line-height: 1;
    margin-top: 5px;
    color: #adadad;
}
.sp-module ul > li {
    display: block;
    border-bottom: 1px dashed #999;
    -webkit-transition: 300ms;
    transition: 300ms;
}
/*--------- Umum --------------------------------------------------------------------*/

.jarak-bawah-10 {
  padding-bottom: 10px;
}
.jarak-bawah-20 {
  padding-bottom: 20px;
}
.h1, h1 {
    font-size: 24px;
}
.h4, h4 {
    font-size: 17px;
}
.tengah {
  text-align: center;
}
.col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9 {
    position: relative;
    min-height: 1px;
    padding-right: 9px;
    padding-left: 9px;
}
.sppb-col, .sppb-col-auto, .sppb-col-lg, .sppb-col-lg-1, .sppb-col-lg-10, .sppb-col-lg-11, .sppb-col-lg-12, .sppb-col-lg-2, .sppb-col-lg-3, .sppb-col-lg-4, .sppb-col-lg-5, .sppb-col-lg-6, .sppb-col-lg-7, .sppb-col-lg-8, .sppb-col-lg-9, .sppb-col-lg-auto, .sppb-col-md, .sppb-col-md-1, .sppb-col-md-10, .sppb-col-md-11, .sppb-col-md-12, .sppb-col-md-2, .sppb-col-md-3, .sppb-col-md-4, .sppb-col-md-5, .sppb-col-md-6, .sppb-col-md-7, .sppb-col-md-8, .sppb-col-md-9, .sppb-col-md-auto, .sppb-col-sm, .sppb-col-sm-1, .sppb-col-sm-10, .sppb-col-sm-11, .sppb-col-sm-12, .sppb-col-sm-2, .sppb-col-sm-3, .sppb-col-sm-4, .sppb-col-sm-5, .sppb-col-sm-6, .sppb-col-sm-7, .sppb-col-sm-8, .sppb-col-sm-9, .sppb-col-sm-auto, .sppb-col-xl, .sppb-col-xl-1, .sppb-col-xl-10, .sppb-col-xl-11, .sppb-col-xl-12, .sppb-col-xl-2, .sppb-col-xl-3, .sppb-col-xl-4, .sppb-col-xl-5, .sppb-col-xl-6, .sppb-col-xl-7, .sppb-col-xl-8, .sppb-col-xl-9, .sppb-col-xl-auto, .sppb-col-xs-1, .sppb-col-xs-10, .sppb-col-xs-11, .sppb-col-xs-12, .sppb-col-xs-2, .sppb-col-xs-3, .sppb-col-xs-4, .sppb-col-xs-5, .sppb-col-xs-6, .sppb-col-xs-7, .sppb-col-xs-8, .sppb-col-xs-9 {
    position: relative;
    /*width: 100%;*/
    min-height: 1px;
    padding-right: 10px;
    padding-left: 10px;
}
article.item {
  margin-bottom: 20px;
}
/*--------- Header --------------------------------------------------------*/
#sp-header .logo a {
    padding-bottom: 10px;
    padding-top: 10px;
}
#sp-top-bar .sp-module {
    display: inline-block;
    margin: 0 0 0 0px;
}
/*----------------Page Title---------------------------------------------------*/
.sp-page-title {
    background: #ebebeb;
    padding: 20px 0;
}
.page-header {
    padding-bottom: 9px;
    margin: 40px 0 20px;
    border-bottom: 1px solid #eee;
    font-size: 24px;
}
.sp-page-title h2 {
  margin: 0;
  padding: 0;
  color: #152029;
}
.sp-page-title h3 {
  margin: 0;
  padding: 10px 0px 0px 0px;
  color: #152029;
}
/*--------- Front Page ----------------------------------------------------------*/
.bayang {
    text-shadow: 1px 1px 10px #000, 1px 1px 10px #000;
}
.white {
   color: #ffffff;
}
/*--------- Main Menu ------------------------------------------------------------*/
@media (min-width: 1200px)
.container, .container-lg, .container-md, .container-sm, .container-xl {
  max-width: 1180px;
}
.sp-megamenu-parent > li > a, .sp-megamenu-parent > li > span {
  font-weight: 500;
  padding: 0 10px;
  color: #fff;
  line-height: 60px;
}
.sp-megamenu-parent {
    margin: 0 auto;
    font-weight: normal;
    float: none; text-align: center;
}
.sp-megamenu-parent .sp-dropdown .sp-dropdown-inner {
  padding: 10px 0px 10px 0px;
  text-align: left;
  width: 300px;
}
.sp-megamenu-parent .sp-dropdown li.sp-menu-item > a, .sp-megamenu-parent .sp-dropdown li.sp-menu-item span {
  padding: 5px 10px 5px 10px;
}

.sp-megamenu-parent > li.active > a, .sp-megamenu-parent > li:hover > a {
  color: #fc9928;
}
.sp-megamenu-parent .sp-dropdown li.sp-menu-item > a:hover {
  background: #fff;
}
.sp-megamenu-parent .sp-dropdown li.sp-menu-item > a:hover {
  color: #fc9928;
}
.sp-megamenu-parent .sp-dropdown li.sp-menu-item.active > a:hover {
  color: #fc9928;
}

/* -------- Top Bar ------------------------------------------------------------------- */
.top-menu {
    color: #fc9928;
    margin: 0px 0px;
    padding: 10px 0px;
    font-size: 90%;
}
.top-menu > a {
    color:#dadada;
}
.top-menu > a:hover {
    color:#666666;
}
/* -------- Footer & Sidebar Widgets ------------------------------------------------------ */
.footer .sp-module {
    padding-bottom: 30px;
}
.footer#sp-bottom .sp-module-title::after {
    background: #fc9928;
}
.footer .sp-module ul > li,
.footer .sp-module ul > li > a {
    display: block;
    /* padding: 12px 0; */
    line-height: 24px;
    -webkit-transition: 300ms;
    transition: 300ms;
}
.footer .nav > li > a:hover {
    background-color: transparent;
    color: #dadada;
}
.widget {
  margin-bottom: 40px;
}
.widget .widget-title {
  margin-top: 0;
  margin-bottom: 20px;
}
.widget ul li {
  margin-bottom: 5px;
  padding-bottom: 5px;
}
.widget ul.list li,
.widget .post {
  margin-bottom: 10px;
  padding-bottom: 10px;
}
.widget .list-border li {
  margin-bottom: 0;
  padding: 10px 0;
}
.widget.brochures > li {
  margin-bottom: 10px;
  padding: 10px;
}
.widget.brochures i {
  color: #666666;
  font-size: 16px;
  margin-right: 10px;
}
.widget.address > li {
  font-size: 13px;
  margin-bottom: 10px;
  padding: 5px 10px;
}
.widget.address > li i {
  font-size: 16px;
  margin-right: 8px;
  vertical-align: middle;
}
.widget .twitter-feed li,
.widget .twitter-feed-carousel li {
  font-size: 13px;
  margin-bottom: 15px;
  margin-top: 0px;
  padding-left: 30px;
}
.widget .twitter-feed li.item,
.widget .twitter-feed-carousel li.item {
  position: relative;
}
.widget .twitter-feed li::after,
.widget .twitter-feed-carousel li::after {
  content: "\f099";
  font-size: 24px;
  font-family: fontawesome;
  left: 0;
  position: absolute;
  top: 0;
}
.widget .styled-icons li {
  margin-bottom: 0;
  padding-bottom: 0;
}
.widget .styled-icons li a {
  margin-bottom: 0;
}
.widget .tags a {
  border: 1px solid #d3d3d3;
  display: inline-block;
  font-size: 11px;
  margin: 5px 4px 5px -2px;
  padding: 5px 10px;
}
.widget .tags a:hover {
  color: #fff;
}
.widget .search-input {
  background: transparent none repeat scroll 0 0;
  border: 1px solid #c0c0c0;
  border-radius: initial;
  box-shadow: none;
  height: 45px;
  padding: 10px;
}
.widget .search-button {
  background: transparent none repeat scroll 0 0;
  border: 1px solid #c0c0c0;
  border-radius: 0;
  height: 45px;
}
.widget .nav-tabs li {
  border-bottom: 1px solid transparent;
  margin-bottom: -2px;
  padding-bottom: 0;
}
.widget .nav-tabs li:hover {
  border-bottom: 1px solid transparent;
}
.widget .post-title a {
  font-size: 13px;
  letter-spacing: 0;
}
.widget .quick-contact-form .form-control {
  background-color: rgba(241, 241, 241, 0.8);
  border-color: #d3d3d3;
  color: #a9a9a9;
}
.widget .product-list .product-title {
  font-size: 14px;
  font-weight: 400;
}
.widget .testimonial-widget-carousel .item img {
  display: inline;
  width: auto;
  float: right;
}
.widget.dark .widget-title {
  color: #fff;
}
.footer#sp-bottom .blog_recent {
  margin-top: 12px;
  display: inline-block;
}
.footer#sp-bottom .sp-module-title {
  color: #fff;
  font-size: 18px;
  line-height: 24px;
  text-transform: none;
  position: relative;
  padding-bottom: 10px;
  margin-bottom: 20px;
}
.footer#sp-bottom .sp-module-title:after {
  border-radius: 10px;
  bottom: -1px;
  content: "";
  height: 2px;
  left: 0;
  position: absolute;
  width: 50px;
}
.footer .nav > li {
  border-bottom: 1px dashed #333333;
  margin-bottom: 0;
  padding: 10px 0px;
}
.footer .nav > li > a {
  padding: 0;
}
.footer .nav > li > a{
    color: #b3b3b3;
}
.footer .nav > li > a:hover {
    background-color: transparent;
    color: #ebebeb;
}
.widget.dark .tags a {
  border: 1px solid #777777;
}
.widget.dark .widget-image-carousel .title {
  color: #fff;
}
.widget.dark .search-input {
  border: 1px solid #333333;
}
.widget.dark .styled-icons li a:hover i {
  color: #fff;
}
.widget.dark .search-button {
  border: 1px solid #333333;
}
.widget.dark .widget-subscribe .subscribe-title {
  color: #fff;
}
.widget.dark .widget-subscribe .subscribe-sub-title {
  color: #666666;
}
.widget.dark .nav-tabs li {
  border-bottom: 1px solid transparent;
  margin-bottom: -2px;
  padding-bottom: 0;
}
.widget.dark .nav-tabs li:hover {
  border-bottom: 1px solid transparent;
}
.widget.dark .nav-tabs li:hover a {
  border: 1px solid #555555;
}
.widget.dark .nav-tabs li.active a {
  -moz-border-bottom-colors: none;
  -moz-border-left-colors: none;
  -moz-border-right-colors: none;
  -moz-border-top-colors: none;
  background: #333333 none repeat scroll 0 0;
  border-color: #555555 #555555 transparent;
  border-image: none;
  border-style: solid;
  border-width: 1px;
}
.widget.dark .product-title a {
  color: #808080;
}
.footer .widget.dark .post-title a {
  color: #808080;
}
.widget.dark .post-title a {
  color: #333333;
}
.widget.dark .tab-content {
  background: #333333 none repeat scroll 0 0;
  border: 1px solid #555555;
}
.widget.dark .quick-contact-form .form-control {
  background-color: rgba(51, 51, 51, 0.3);
  border-color: #333333;
}
.widget.no-border ul li {
  border: none;
  padding-bottom: 0;
  margin-bottom: 0;
}
.widget ul.list li::before {
  display: none;
}
.widget.dark ul.list li::before {
  display: none;
}
.sidebar .sp-module-title {
  position: relative;
  font-size: 16px;
}
.sidebar .sp-module-title:after {
  height: 2px;
  width: 40px;
  margin-top: 10px;
  background-color: #333333;
  content: "";
  display: block;
}
.footer a {
  color: #808080;
}
.footer a:focus,
.footer a:hover,
.footer a:active {
  color: #666666;
}
.footer .widget .widget-title {
  margin-top: 0px;
}
.footer .widget.dark .quick-contact-form button {
  border-color: #333333;
  color: #909090;
}
.footer .widget.dark .quick-contact-form button:hover {
  background-color: #eeeeee;
  border-color: #eeeeee;
  color: #333333;
}
/* fixed footer */
footer#footer.fixed-footer {
  bottom: 0;
  left: 0;
  position: fixed;
  right: 0;
  z-index: 1;
}
@media screen and (max-width: 992px) {
  footer#footer.fixed-footer {
    position: relative;
  }
}
body.has-fixed-footer .main-content {
  background-color: #fff;
  position: relative;
  z-index: 2;
}
@media screen and (max-width: 992px) {
  body.has-fixed-footer .main-content {
    margin-bottom: 0 !important;
  }
}
/* waktu operasi */
.footer .sp-module ul > li {
    display: block;
    border-bottom: 1px dashed #808080;
    line-height: 24px;
    padding: 10px 0px;
}
.opening-hours ul li .closed {
    border-radius: 4px;
    font-size: 13px;
    padding: 0 25px;
    background-color: #fc9928 !important;
    color: #ffffff;
}
/*---------------- Button --------------------------------------------------------*/
.btn-group-lg > .btn, .btn-lg {
    padding: 10px 20px;
    font-size: 15px;
    line-height: 1.3333333;
    border-radius: 27px;
}
.btn-default{
    color: #fff;
    background-color: transparent;
    border-color: #fff;
    text-shadow: 1px 1px 10px #000, 1px 1px 10px #000;
    margin: 5px;
}
.btn-default:hover {
    color: #fff;
    background-color: #fc9928;
    border-color: #adadad;
    text-shadow: none;
}
/*--------------Banner ---------------------------------------------------------------------*/
.camera_prevThumbs, .camera_nextThumbs, .camera_prev, .camera_next, .camera_commands, .camera_thumbs_cont {
    background: #d8d8d8;
    background: rgba(216, 216, 216, 0.2);
}
.camera_prev > span,
.camera_next > span {
    opacity: 50%;
}
.camera_commands > .camera_stop {
        opacity: 50%;
}
/*--------------------------Image Border ------------------------------------------------------*/
img.foto-border {
    padding: 3px;
    border: 1px solid rgba(0,0,0,0.2);
    background: #fff;
}
img.image-border {
    padding: 5px;
    border: 1px solid rgba(0,0,0,0.2);
    background: #fff;
}
.jm-category-module.default .mod-article-image {
    padding: 5px;
    border: 1px solid rgba(0,0,0,0.2);
    background: #fff;
    margin-bottom: 20px;
}
.jm-category-module.default .mod-article-image.pull-left {
    margin-right: 10px;
}
/*-------------------------Side Module --------------------------------------------------*/
.sp-module ul >li >a:before {
    content: "";
    margin-right: 0px;
}
.sp-module ul > li > a {
    display: block;
    padding: 5px 0;
    line-height: 24px;
    padding: 10px 0;
    -webkit-transition: 300ms;
    transition: 300ms;
    color: #3071a9;
}  
/*---------------------- article ---------------------------------------------------------*/
.article-footer-top {
    display: table;
    clear: both;
    width: 100%;
    padding-top: 15px;
}
/*-------------------------------------------------------------------------------------------*/
@media screen and (min-width: 320px) and (max-width: 374px){
.col-dir-f{
  	width:303px;}
.col-dir-1{
  	width:273px}
.col-dir-2{
  	width:273px; margin-bottom: 0px;}
}
@media screen and (min-width: 375px) and (max-width: 413px){
.col-dir-f{
  	width:333px;}
.col-dir-1{
  	width:243px}  
.col-dir-2{
  	width:243px; margin-bottom: 0px;}  
}
@media screen and (min-width: 414px) and (max-width: 667px){
.col-dir-f{
  	width:303px;}
.col-dir-1{
  	width:280px}
.col-dir-2{
  	width:280px; margin-bottom: 0px;} 
}
@media screen and (min-width: 668px) and (max-width: 768px){
.col-dir-f{
  	width:337px;}
.col-dir-1{
  	width:252px} 
.col-dir-2{
  	width:252px; margin-bottom: 0px;}   
}
@media screen and (min-width: 769px)and (max-width: 1023px){
.col-dir-f{
  	width:333px;}
.col-dir-1{
  	width:273px}  
.col-dir-2{
  	width:273px; margin-bottom: 20px;}  
}
@media screen and (min-width: 1024px) and (max-width: 1199px){
.col-dir-f{
  	width:343px;}
.col-dir-1{
  	width:247px} 
.col-dir-2{
  	width:247px; margin-bottom: 20px;}   
}
@media screen and (min-width: 1200px){
.col-dir-f{
  	width:353px;}
.col-dir-1{
  	width:310px}
.col-dir-2{
  	width:310px; margin-bottom: 0px;}    
}
@media screen and (max-width: 767px){
.tajuk-2 {
    margin: 30px 0px 20px 0px;
    font-size: 15px;
    text-transform: uppercase;
    line-height: 1.3;
    text-align: center;
    font-weight: bold;
    background: #105590;
    padding: 15px;
    color: #fff;
    }
}
@media screen and (min-width: 768px){
.tajuk-2 {
    margin: 30px 0px 20px 0px;
    font-size: 15px;
    text-transform: uppercase;
    line-height: 1.3;
    text-align: center;
    font-weight: bold;
    background: #105590;
    padding: 5px 15px 5px 15px;
    color: #fff;
    }
}
.tajuk-1 {
    margin: 30px 0px 20px 0px;
    font-size: 15px;
    text-transform: uppercase;
    line-height: 1.3;
    text-align: center;
    font-weight: bold;
    background: #105590;
    padding: 15px;
    color: #fff;
    }
.menu-utama {
    margin-left: -30px;
}
.logo-mobile {
    float: left;
    padding-top: 10px;
    padding-bottom: 10px;
}
.borderbottom {
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #FFFFFF;
	border-right-color: #FFFFFF;
	border-bottom-color: #CCCCCC;
	border-left-color: #FFFFFF;
	border-top-width: 1px;
	border-right-width: 1px;
}
.button-42 { 
    background-color: initial;
    background-image: linear-gradient(-180deg, #FF7E31, #E62C03);
    border-radius: 4px;
    box-shadow: rgba(0, 0, 0, 0.1) 0 2px 4px;
    color: #FFFFFF; cursor: pointer;
    display: inline-block; font-family: Inter,-apple-system,system-ui,Roboto,"Helvetica Neue",Arial,sans-serif;
    height: 30px;
    line-height: 30px;
    outline: 0;
    overflow: hidden;
    padding: 0 20px;
    pointer-events: auto;
    position: relative;
    text-align: center;
    touch-action: manipulation;
    user-select: none;
    -webkit-user-select: none;
    vertical-align: top;
    white-space: nowrap;
    width: 100%; z-index: 9;
    border: 0;
    transition: box-shadow .2s;
}
.button-42:hover {
    background-image: linear-gradient(-180deg, #E62C03, #FF7E31);
}