body { background-color:#FFF; }

h1 { margin-top:-8px; }

h2 { margin-top:10px; }

p { font-size:92%; margin-bottom:5px; }

.btn-success { border-color:white; }

.btn-success:hover { border-color:white; }

.topkiri p { margin:0; color:#FFF; text-align:left; }

.topkanan p { margin:0; color:#FFF; text-align:right; }

.top { padding-top:20px; padding-bottom:20px; }

.tengah { text-align:center; }

.admin-login-bg { background-color:#06C; }

.bg { background-color:#06C; }

.bgimg { background-image: url("image/bg.jpeg"); background-position: top center; background-repeat:repeat; }

.bg-0 { background-color:#001333; padding-top:50px; padding-bottom:50px; color:#FFF; }

.bg-1 { background-color:#FFF; padding-top:50px; padding-bottom:50px; }

.bg-2 { background-color:#FFF; padding-bottom:50px; }

.bg-3 { background-color:#f2f2f2; padding-top:50px; padding-bottom:50px; }

.bg-4 { color:#FFF; background-color:#06C; }

.bg-4-tb { padding-top:50px; padding-bottom:50px; }

/* .bg-0 h1, .bg-0 h5, .bg-4 h1, .bg-4 h2 { font-family: 'Francois One', sans-serif; } */

.bg-0 h5 { line-height:1.5em; }

.bg-1 h2, .bg-2 h2 { text-align:center; }

.bg-1 h1, .bg-1 h2, .bg-1 h3, .bg-1 h5, .bg-1 a, .bg-2 h1, .bg-2 h2, .bg-3 h1 { color:#001333; /* font-family: 'Francois One', sans-serif; */ }

.bg-4 a { color:#FFF; }

.titlehead { margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid #ddd; }

.socmed a { color:#001333; }

.socmed a:hover { text-decoration:none; color:#0c306c; }

.navbar-dark .navbar-brand { text-transform:uppercase; font-weight:bold; color:#FFF; }

.navbar-dark .navbar-nav .nav-link { color:#FFF; }

.navbar-bg { background-color:#1339f4; }

.mynav ul { margin:0; }

.mynav .nav { background-color:#09F; }

.mynav .nav-link { color:white; }

.mynav .nav-link:hover { background:#e5e5e5; color:#23374d; border-radius:0; }

.nav-prod .nav { background:none; }

.noborder td { border-top:none; padding:0.5em; }

.listprod { margin-bottom:60px; }

.listprod h2 { text-align:left; }

.blogbox { height:400px; overflow:hidden; }

.catbox { margin-bottom: 20px; }

.prodbox { height:435px; overflow:hidden; }

.blogbox h3, .prodbox h3, .catbox h3 { font-size:large; line-height:1.5em; }

.blogbox h5, .prodbox h5, .catbox h5 { font-size:medium; line-height:1em; margin:0; }

.blogbox a, .prodbox a, .catbox a { color:#001333; text-decoration:none; }

.blogbox a:hover, .prodbox a:hover { text-decoration:underline; }

.imgthumb { width:100%; height:200px; overflow:hidden; margin-bottom:10px; }

.proimgthumb { width:100%; height:300px; overflow:hidden; margin-bottom:10px; }

.catthumb { width:100%; box-shadow:0 0 3px rgba(0,0,0,0.2); margin-bottom:5px; }

.myimg img { height:100px; }

.mytab td { padding:5px; }

.sidebar-item {	position: absolute;	top: 0;	left: 0; width: 100%; height: 100%; }

.make-me-sticky { position: -webkit-sticky;	position: sticky;	top: 20px; }

.list-group-item, .list-group-item:first-child, .list-group-item:last-child { border-radius: 0; padding: 5px 10px; }

@media(max-width:768px) {
   .top img { width:85%; }
   .topkiri p, .topkanan p { text-align:center; margin-top: 10px;}
   .topkanan { margin-top:10px; }
   .bg-0, .bg-1, .bg-3 { padding-top:50px; padding-bottom:50px; }
   .bg-2 { padding-bottom:50px; }
   .listprod { margin-bottom:30px; }
   .blogbox{ height:auto; }
}

/* Style the sidenav links and the dropdown button */
.dropdown-btn {
  padding: 4px 8px;
  text-decoration: none;
  color: #495057;
  border: 1px solid #ddd;
  background: none;
  cursor: pointer;
  outline: none;
  display: inline-table;
  width:100%;
}

.dbtn {
  padding: 4px 8px;
  text-decoration: none;
  color: #495057;
  border: none;
  background: none;
  cursor: pointer;
  outline: none;
  display: inline-table;
}

.sidenav a {
  padding: 4px 8px;
  text-decoration: none;
  color: #495057;
  display: block;
  border: 1px solid #ddd;
  background: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
  outline: none;
}

/* On mouse-over */
.sidenav a:hover, .dropdown-btn:hover {
  color: #495057;
  background-color: none;
}

button:focus { outline: none; }

/* Add an active class to the active dropdown button */
.active {
  background-color: none;
  color: #495057;
}

/* Dropdown container (hidden by default). Optional: add a lighter background color and some left padding to change the design of the dropdown content */
.dropdown-container {
  display: none;
  padding-left: 0;
}

.dropdown-container a { padding-left: 20px; }

/* wa button mobile */
.mywa {
  position: fixed;
  z-index: 100;
  bottom: 10px;
  right: 10px;
}

.mywa img { width:65px; }