html {
  font-size: 14px;
}
.bgr-menu {
  background-color:rgb(192, 139, 5);
}
.bgr-main {
  background-color: aqua;
}

.bgr-secondary {
  width: 100%;
  border-radius: 5px;
  background-color: #ffffff;
  color: black;  
}

.bgr-height {
  width: 100%;
  min-height: 500px;
}
.bgr-footer {  
background-color:rgb(192, 139, 5);
}

@media (min-width: 1200px) {
  html {
    font-size: 15px;
  }
}

html {
  position: relative;
  min-height: 100%;
}

body {
  padding-top: 4.5rem;
  margin-bottom: 60px;
}
.hlm {
  width: auto;
  margin-left: auto;
  margin-right: auto;   
}

.label-wrap {
  width: 100%;
  overflow: hidden;
  white-space: pre-line;
  font-weight:400;
  text-align:left;  
  inline-size: 100%; 
  overflow-wrap: break-word;
 } 

 .logo-img {  
  display: block;
  max-height: 30px;
  width: auto;
 }
 .l-100 {
  width: 100%;
 }
/* ==menu ============*/
.dropdown-menu li {
  position: relative;
  }
  .dropdown-menu .dropdown-submenu {
  display: none;
  position: absolute;
  left: 100%;
  top: -7px;
  }
  .dropdown-menu .dropdown-submenu-left {
  right: 100%;
  left: auto;
  }
  .dropdown-menu > li:hover > .dropdown-submenu {
  display: block;
  }
  @media (max-width: 500px) {
    .dropdown-menu .dropdown-submenu {
      display: none;
      position: relative;
      right: 100px;
      top: -7px;
      }
      .container {
        width: 100%;
        padding-left: 5px;
        padding-right: 5px;
        margin-left: auto;
        margin-right: auto;
       }
       h1,h2,h3,h4,h5 {
        font-size: 14px;
        font-weight: 600;
       }
  }
  /*=============photo slider =========*/
  .photo-sld {
    display: block;
    width: 100px;
  }
  .photo-sld:hover {
    width: 100%;
    height: 100%;
  }
  .imgbefore {
    width: 200px;
    height: auto;
    display: block;    
    margin-left: 10px;             
  }
  /*------------------register ---------------------*/
  .form-register {
    width: 100%;
    max-width: 330px;
    margin: auto;  
  }
  .form-register .form-control
  {
    position: relative;
    box-sizing: border-box;
    height: 40px;
    padding: 10px;
    font-size: 14px;
  }
  .form-register .pass
  {
    position: relative;
    box-sizing: border-box;
    height: 40px;
    padding: 10px;
    font-size: 14px;
    border-right:#ffffff;
  
  }
  .form-register .ck1 
  {
    position: relative;
    box-sizing: border-box;
    height: 40px;
    padding: 10px;
    background-color:#ffffff;
    border-left: #ffffff;
  }
  .form-register .form-control:focus
  {
    z-index: 2;
  }
  .form-register label {
    font-size: 14px;
  }
  
  
   /*------------------login ---------------------*/
  .form-signin {
    width: 100%;
    max-width: 330px;
    margin: auto;  
  }
  .form-signin .checkbox {
    font-weight: 400;
  }
  .form-signin .form-control {
    position: relative;
    box-sizing: border-box;
    height: 40px;
    padding: 10px;
    font-size: 14px;
  }
  .form-signin .paslg
  {   
    position: relative;
    box-sizing: border-box;
    height: 40px;
    padding: 10px;
    font-size: 14px;
    border-right:#ffffff;
  }
  .form-signin .ck2 
  {
    position: relative;
    box-sizing: border-box;
    height: 40px;
    padding: 10px;
    background-color:#ffffff;
    border-left: #ffffff; 
  }
  .form-signin .form-control:focus {
    z-index: 2;
  }
  .form-signin label {
    font-size: 14px;
  }

  
/*===========sub menu ==== */
.dropdown-submenu {
  position: relative;
}

.dropdown-submenu .dropdown-menu {
  top: 0;
  left: 100%;
  margin-top: -1px;
}

.navbar-nav li:hover > ul.dropdown-menu {
    display: block;
}

/*==============carausel=======*/
@media (max-width: 767px) {
  .carousel-inner .carousel-item-end.active,
  .carousel-inner .carousel-item-next {
    transform: translateX(25%);
  }
  
  .carousel-inner .carousel-item-start.active, 
  .carousel-inner .carousel-item-prev {
    transform: translateX(-25%);
  }
}

.carousel-inner .carousel-item.active,
.carousel-inner .carousel-item-next,
.carousel-inner .carousel-item-prev {
  display: flex;
}

/* medium and up screens */
@media (min-width: 768px) {
  
  .carousel-inner .carousel-item-end.active,
  .carousel-inner .carousel-item-next {
    transform: translateX(25%);
  }
  
  .carousel-inner .carousel-item-start.active, 
  .carousel-inner .carousel-item-prev {
    transform: translateX(-25%);
  }
}

.carousel-inner .carousel-item-end,
.carousel-inner .carousel-item-start { 
transform: translateX(0);
}
.bgr-img {
  background-color: aqua;
}
.elp {
  width: 100%;
  border-radius: 10px;
}
/*==============header perpage=========*/
.judul {
  width: 100%;
}
.judul img {
  width: 100%;
  display:block;
}
.judul-misi {  
  width: 75%;
  background-color: chocolate;
  float: right;
}
.bgr-box {
  width: 75%;
  background-color: chocolate;
}

.font-judul {
  font-size: 1.5rem;
}
.tbl-img {
  width: 100%;
  display: block;
}
@media (max-width: 500px) { 
  
  .tb-detail {
    font-size: 11px;
  }
  .font-judul {
    font-size: 14px;
  }

}
/*==============index=========*/
.gb-spr {
  display: block;
  width: 100%;
  object-fit: contain;
  overflow: hidden;
  object-position: center;
}
.pdx {
  padding-left: 1rem;
  padding-right: 1rem;
}
.photo-jr {
  display: block;
  width: 100%;
  
}
.tb-detail {
  font-size: 14px;
}
.bgr-ttg {
  display: block;
  width: 100%;
  height: auto;
  background-color:#ccc;
  color:black;
}
.vd {
  width: 100%;
  max-width: 400px;
  display: block;  
}
/*-----visi misi---*/

.lb-visi {
  width: 100%;
  padding: 10px 10px 10px 10px;  
}
.lb-visi-mt {
  margin-top: -20px;
}
/*-----------struktur organisasi------*/
.str-img {
  width: 100%;
  display: block;
}
/*===susunanorganisasi ===*/
.photo-diri {
  width: 100%;
  height: auto;
  display: block;   
}
.bgr-no {
  display: block;
  max-width: 20px;
}
.br-10 {
  margin-top: -20px;
}
.bgr-jd {
  width: 100%;
  background-color: chocolate;
}
.text-h {
  text-align: justify;
}
@media (max-width: 768px) {
  .br-10 {
    margin-top: 0;
  }
 
  .lb-visi {
    width: 100%;
    padding: 10px 10px 10px 50px;  
  }
  .pdx {
    padding-left: 5px;
    padding-right: 5px;
  }
}
/*===========legalitas =====*/
.gb-legal {
  width: 100%;
  max-height: 841px;
  display: block;
  object-fit: cover;
  object-position: center;
  overflow: hidden;  
}
.bg-pdf {
  width: 100%;
  min-height: 600px;
  display: block;
}
/*===ttd----*/

#colors_sketch
{
    border: 1px solid #ccc;
}
.tools a
{
    text-decoration: none;
}
.ttd {  
  display: block;
  width: 100%;
  max-width: 300px;
  height: 200px;
  padding: 0.375rem 0.75rem;
  color: #212529;
  background-color: #fff;
  background-clip: padding-box;
  border: 2px solid #ced4da;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border-radius: 0.25rem;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; 
}
.btn-hapus {
  width: 100%;
  padding: 5px 5px 5px 5px;   
  max-width: 300px;  
  border-radius: 15px;
  border: 2px solid red;
  font-size: 12px;
}
.btn-cari{
  height: 30px;
  vertical-align: middle;
  padding-left: 20px;
  padding-right: 20px;
  text-align: center;
  border: 1px solid blue;
  border-radius: 5px;
}
/*=============daftar==========*/
.bdr {
  border: 1px solid white;
}
/*==============kontak============*/
.kontak {
  width: 100%;
  height: auto;
  display: block;
}
/*==============produk============*/
.bgr-produk
{
  width: 100%;
  background-color:limegreen;
  color: white;
}
.logo-produk {
  width: 100%;
  max-width: 150px;
  margin-left: auto;
  margin-right: auto;
  display: block;
}
.produk-elp 
{
  border-radius: 15px;
}
.txt-cl
{
  color: chocolate;
}
.btn-poss {  
  margin-left: auto;
  margin-right: auto;
}
.logo-lr {
  width: 100%;
  max-width: 100px;
  display: block;
  float: right;
}
.logo-lf {
  width: 100%;
  max-width: 100px;
  display: block;
  float: left;
}
.poster-frame
{
  width: 100%;
}
.poster-pmg
{
  display: block;
  width: 100%;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;  
  border: none;
}
.btn-df
{
  width: 100%;
  display: block;
}
.bgr-pmg {
  display: block;
  background-color: chocolate;
  color: white;
}