nav {padding: 0 20px; height: 70px; background-color: var(--menu-background); display: table; width: calc(100% - 40px);}
.logo_holder {float: left;}
.hamburguer {float: right; margin: 20px 0 0 0;}

.header_logo {}
.header_logo img {width: auto; height: auto; margin: 10px 0 0 0;}

.nav_menu {float: left;}
.nav_menu ul {margin: 0 0 0 20px;}
.nav_menu ul li {display: inline-block; margin: 0; padding: 20px 10px 20px 0;}
.nav_menu ul li a {color: var(--menu-text); padding: 5px 10px; text-align: center; border-radius: 8px; background-color: var(--menu-button-background);}
 .nav_menu ul li.nav_down a::after 
    {font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f078"; color: white; padding-left: 5px; font-size: 10px;}
.nav_menu ul li.nav_down ul li a::after {content: "";}

.nav_menu ul li a:hover {background-color: var(--menu-button-background-hover); color: var(--menu-text-hover);}

.nav_menu ul li ul {position: absolute; z-index: 100; padding: 0 0 10px 0; border-radius: 8px; background-color: var(--menu-background); margin: 15px 0 0 0; display: none;}


.nav_menu ul li ul.show_nav_down {
  display: block; 
}



.nav_menu ul li ul li {display: block; padding: 5px 10px;}
.nav_menu ul li ul li a {padding: 5px 10px; color: var(--menu-text);}

.nav_menu ul li a.important_header_button {background-color: var(--button-primary-background); color: var(--button-primary-text);}
.nav_menu ul li a.important_header_button:hover {background-color: var(--button-primary-background-hover); color: var(--button-primary-text-hover);}

.bar1, .bar2, .bar3 {
  width: 15px;
  height: 2px;
  background-color: #EEE;
  margin: 4px 0;
  transition: 0.4s;
    display: none;
}


.icon_holder {float: right; color: wheat;}

.icon_holder a {display: block;}


.icon_holder .header_cart {position: relative;}

.icon_holder .header_cart {margin: 19px 20px 0 0; display: block; float: right; font-size: 14px; color: var(--menu-text); cursor: pointer; width: auto; height: 32px; line-height: 32px; text-align: center;}

.icon_holder .header_user {margin: 19px 0 0 0; padding: 0; display: block; float: right; font-size: 14px; color: var(--menu-text); cursor: pointer; background-color: var(--button-primary-background); border-radius: 50%; width: 32px; height: 32px; line-height: 32px; text-align: center; font-weight: bold;}


.shopping_cart_badge {background-color: red; color: white; border-radius: 50px; position: relative; top: -10px; left: -5px; width: 10px; height: 10px; display: inline-block;}





@media all and (max-width: 1000px) and (min-width: 0px) {
  .hamburguer {
    margin-left: 10px;
    margin-top: 12px;
  }
  .bar1,
  .bar2,
  .bar3 {
    display: block;
  }
  nav {
    padding: 0 10px;
    height: 50px;
    width: calc(100% - 20px);
  }
  .header_logo img {
    width: auto;
    height: 30px;
    margin: 5px 0 0 0;
  }
  .nav_menu {
    height: 100vh;
    background-color: #333;
    width: 100vw;
    position: fixed;
    top: 50px;
    left: 100vw;
    z-index: 100;
    transition: 0.5s;
  }
  .nav_menu_mobile {
    left: 0;
    top: 50px;
  }
  .nav_menu ul li {
    width: calc(100% - 20px);
    text-align: center;
    padding: 10px 0;
  }
  .nav_menu ul li a {
    display: block;
  }
  .nav_menu ul li ul {
    position: relative;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-in-out;
    display: block;
    background-color: #444;
    padding: 0;
  }
  .nav_menu ul li ul.show_nav_down {
    max-height: 300px;
  }
  
 
  
  .nav_menu ul li ul li {
    width: calc(100% - 20px);
  }
  .nav_menu ul li ul li a {
    display: block;
  }

  .icon_holder .header_cart,
  .icon_holder .header_user {
    margin-top: 8px;
  }
  .icon_holder .header_user {
  }
  .icon_holder .header_cart {
    margin-right: 10px;
  }
}