@media screen and (max-width: 800px) {

.parallax {
position: relative;
height: 500vh;
}
#nav-kanan{
padding-right: 30px;
height: 70px;
}
#site-logo{
width:100%;
}
#logo-home{
width: 110%;
}
.bar-item{
color: white;
margin-left: 10px;
font-size: 2vw;
}

#id-produk{
font-size: 2vw;
}
.dropdown-content {
  top: 45px;
  right: 10px;
  padding: 5px 10px;
  min-width: 50px;
  }
  .dropdown-content a{
    top: 28px;
    right: 10px;
    padding: 10px 10px;
    min-width: 50px;
    }

}

@media screen and (max-width: 400px) {

.parallax {
position: relative;
height: 600vh;
}
.container{
height: 35px;
}
.background-nav{
height: 35px;
}
#nav-kiri{
padding-left: 10px;
}
#nav-kanan{
    height: 35px;
padding-right: 10px;
}
.bar-item{
margin-left: 8px;
font-size: 2vw;
}
#id-produk{
font-size: 2vw;
position: relative;
}

.dropdown-content {
top: 28px;
right: 10px;
padding: 5px 10px;
min-width: 50px;
}
.dropdown-content a {
    display: block;
top: 28px;
right: 10px;
padding: 5px 10px;
min-width: 50px;
}


/* end basic */

.emptymargin{
    height: 30px;
    visibility: hidden;
}

.div-table{
  margin-top: 20px;
  margin-left: 50px;
  margin-right: 50px;
}
table {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 100%;
    font-size: 1.3vw;
    
  }
  td, th {
    border: 1px solid #dddddd;
    text-align: left;
    padding: 8px;
    
  }
  #id-list{
    font-size: 3.5vw;
    
    margin-bottom: -10px;
  }

.title-tabel{
    margin-top: 15px;
    margin-bottom: 10px;
    color: yellow;
   font-size: 2.5vw;
   text-align: left;
   text-shadow: red 5px 5px 10px;
}
.title-id{
    background-color:rgba(36, 36, 36, 0.7);
    font-size: 1.6vw;
}
.title-produk{
    background-color: rgba(255, 255, 0, 0.9);
    color: black;
    font-weight: bolder;
}

}