ul.nav{    
    list-style-type:none;       
    z-index: 2;   
    justify-content: center;
    display: flex;

}
li.nav {
    display:inline-block;
    float: left;
    margin-right: 1px;    
}
li.nav a {
    font-size: 15px;
    color: #fff;
    font-weight: 700;
    display: block;    
    padding: 30px 20px;
    letter-spacing: 3px;
    text-decoration: none;
    text-transform: uppercase;    
    font-family: 'Roboto', sans-serif;
}
li.nav a:hover {
  background: #6f2106;
   color: #fff;
  transition: 0.2s ease-in-out;
}
li.nav:hover ul.nav a {      
    line-height: 40px;    
}
li.nav ul.nav {
    display: none;
    position: absolute;
    background: #802000;
    color: #fff;   
}
li.nav ul.nav li.nav {
    display: block;
    float: none;    
}
li.nav ul.nav li.nav a {        
    margin: 0;
    color: #fff;    
    padding: 4px 25px;
    width: 100%;
    text-align: left;
    font-size: 15px;
    font-weight: 600;    
    transition: 0.3s ease-in-out;
    text-shadow: none;
    font-family: Roboto, sans-serif;
}
li.nav ul.nav li.nav a:hover {        
    color: #fff;        
    padding: 4px 25px;
    width: 100%;
    text-align: left;
    font-size: 15px;
    font-weight: 600;    
}
ul.hidden.nav{
  padding: 0px;  

}
ul.nav li.nav a:hover + .nav.hidden, .nav.hidden:hover {
    display: block;
}
.show-menu {    
    text-decoration: none;        
    text-align: left;
    display: none;
}
#show-menu{
    display: none;
}
#show-menu:checked ~ .navigasi>#menu{
    display: block;
    transition: 0.3s ease-in-out;
}

@media screen and (max-width : 760px){    
    .navigasi{
        max-height: 100%;
        overflow-x: hidden;
        bottom: 3px;    
        z-index: 2;
        padding: 0;
        margin: 0;

    }
    li.nav ul.nav {
        display: none;
        position: inherit;
        border:1.5px solid #efefef;    
    }
    .navigasi ul.nav {
        position: static;
        display: none;
    }    
    .navigasi li.nav {
        margin-bottom: 1px;
    }    
    .navigasi ul.nav li.nav, li.nav a {
        width: 100%;      
    }
    .navigasi li.nav ul.nav li.nav a {    
      text-align: center;
    }
    .show-menu {
        display:block;
    }

}

#search:focus {
    outline-style: none;
}
.half {
  float: left;
  width: 50%;
  padding: 0 1em;
}
.tab {
  position: relative;
  margin-bottom: 1px;
  width: 100%;  
  overflow: hidden;
}
.acordion {
  position: absolute;
  opacity: 0;
  z-index: -1;
}
label {
  position: relative;
  display: block;
  padding: 0 0 0 1em;  
  font-weight: bold;
  line-height: 3;
  cursor: pointer;
}
.tab-content {
  max-height: 0;
  overflow: hidden;
  -webkit-transition: max-height .35s;
  -o-transition: max-height .35s;
  transition: max-height .35s;
}
.tab-content p {
  margin: 1em;
}
/* :checked */
.acordion:checked ~ .tab-content {
  max-height: 10em;
}
/* Icon */
label::after {
  position: absolute;
  right: 0;
  top: 0;
  display: block;
  width: 3em;
  height: 3em;
  line-height: 3;
  text-align: center;
  -webkit-transition: all .35s;
  -o-transition: all .35s;
  transition: all .35s;
}
.acordion + label::after {
  content: "\25BC";
}

.acordion:checked + label::after {
  transform: rotateX(180deg);
}

/*popup*/