@media screen and (max-width: 600px) {
   .humburger {
      display: block;
   }
   .navbars .logo {
      flex-shrink: 1;
   }
   .navbar-search {
      /* display: none; */
      flex-shrink: 1;
   }

   .navbar-menu {
      flex-grow: 1;
      flex-direction: column;
      justify-content: start;
      align-items: flex-start;
      position: absolute;
      background-color: #FFF;
      top:var(--topbar-height);
      right: 0;
      width: min(300px,100%);
      color:var(--primary-color);
      padding:10px;
      gap:10px;
      opacity: 0;
      transition-property: height, top, opacity;
      transition-duration: 0.5s;
      height:0;
      overflow: auto;
      pointer-events:none;
      box-shadow:-2px 2px 12px rgba(0,0,0,0.5);
   }

   .navbar-menu.on {
      opacity: 1;
      pointer-events:all;
      height:calc(98vh - calc(var(--topbar-height) * 2));
   }   

   .navbar-menu li {
         flex-direction: row-reverse;
         justify-content: space-between;
         width: 100%;
         font-size:1.2em;
   }

   .navbar-menu li.login-button {
      background-color: var(--primary-color) !important;
      padding:5px 15px 5px 15px;
      border-radius: 99999px;
      color:#FFF;
   }

   .navbar-menu li span {
      flex-grow: 1;
      width: 100%;
   }

   .navbar-menu li.logout { margin-top:auto; }

   .navbar-menu .profile {
      margin-bottom: 25px;
   }

   /* Main */
   main.containers {
      display: block;
   }

   #show-kategori {
      display: block;
   }

   /* End Main */

   .sm-show {
      display: inherit;
   } 
   .sm-hidden {
      display:none;
   }

   footer > div:first-child {
      flex-grow:1 !important;
   }

}