header {width: 100%; border-bottom: solid 1px #333; height: 70px; position: fixed; z-index: 99; top: 0; left: 0; background-color: var(--menu-background);}

.header_button {position: absolute; top: 10px; left: calc(100% - 120px); width: 100px; height: 80px;}
.header_button a {border: solid 2px var(--menu-button-background); color: var(--menu-text); border-radius: 8px; padding: 5px 10px; text-align: center; display: block; line-height: 30px; margin: 20px 0;}
.header_button a:hover{color: var(--menu-text-hover);}

.logo_holder {float: left; margin: 10px 0 10px 20px;}
.logo_holder a {display: block;}
.logo_holder img {width: auto; height: 50px;}

.icon_holder {float: right;}
.icon_holder a {display: block;}
.icon_holder .header_cart {margin: 19px 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 20px; display: block; float: right; font-size: 14px; color: var(--menu-text); cursor: pointer; background-color: var(--menu-button-background); border-radius: 50%; width: 32px; height: 32px; line-height: 32px; text-align: center; font-weight: bold;}

.icon_holder .header_cart {position: relative;}

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


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

@media all and (max-width: 1000px) and (min-width: 0px){
    .icon_holder .header_user {margin: 19px 20px 19px 0;}
    
    
}




.icon_holder .header_create {border: solid 2px var(--menu-text); color: var(--menu-text); border-radius: 8px; padding: 5px 10px; text-align: center; display: block; line-height: 30px; margin: 20px 0; float: right; margin-right: 10px;}




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


#toggleLeftMenu {float: left; margin: 23px 0 0 20px; font-size: 20px; color: var(--menu-text); cursor: pointer; line-height: 70px;}


.leftNavHolder {width: 250px; height: calc(100vh - 70px); background-color: var(--menu-background); position: fixed; top: 70px; left: -250px; z-index: 200; transition: 0.3s; overflow: hidden;}

.leftNavHolder a {color: white; display: block; padding: 10px;}
.leftNavHolder a:hover {color: white; background-color: orange;}

.leftNavHolder ul {padding: 20px;}
.leftNavHolder ul li {padding: 0;}
.leftNavHolder ul li::before {display: none;}

.leftNavHolder ul li h3 {color: var(--menu-text); font-size: 1.5rem;}



.leftMenuOverlay {position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 98; background-color: rgba(51,51,51,0.3); display: none;}
.leftMenuOverlayShow {display: block;}

.activeLeftMenu {width: 100%; margin: 0; height: calc(100vh - 40px); background-color: var(--menu-background); left: 0;}

.leftNavHolder a.left_big {background-color: var(--button-primary-background); padding: 5px 0; text-align: center; width: 80%; margin: 20px 10% 0 10%; border-radius: 8px; overflow: hidden;}







.menu {
    background-color: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    padding: 0;
    outline: none;
}

.line {
    fill: none;
    stroke: #0f117a;
    stroke-width: 6;
    transition: stroke-dasharray 600ms cubic-bezier(0.4, 0, 0.2, 1),
        stroke-dashoffset 600ms cubic-bezier(0.4, 0, 0.2, 1);
}

.line1 {
    stroke-dasharray: 60 207;
    stroke-width: 6;
}

.line2 {
    stroke-dasharray: 60 60;
    stroke-width: 6;
}

.line3 {
    stroke-dasharray: 60 207;
    stroke-width: 6;
}

.opened .line1 {
    stroke-dasharray: 90 207;
    stroke-dashoffset: -134;
    stroke-width: 6;
}

.opened .line2 {
    stroke-dasharray: 1 60;
    stroke-dashoffset: -30;
    stroke-width: 6;
}

.opened .line3 {
    stroke-dasharray: 90 207;
    stroke-dashoffset: -134;
    stroke-width: 6;
}