#sitelogo{
width: 20vw;
}

.chevron{
font-size: 9px;
height: 10px;
width: 10px;
}
.icon-login{
width: 16px;
height: auto;
}

#headerrightbox a{
text-decoration: none;
font-size: 14px;
}

#headerrightbox svg{
width: 10px;
padding-right: 3px;
}

header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100px;
    padding: 0 20px;
}

#appmenu{
z-index: 99

}

#appmenu a:link{
text-decoration: none;
}

@media screen and (min-width: 814px) {


#headerrightbox{
 margin-left: auto;
}

#headerrightbox svg{
width: 11px;
padding-right: 3px;
}
#headerrightbox a{
text-decoration: none;
}

#menuwrapper {
margin-right: 300px;
flex: 1;
text-align: center;
    display: block;
}

#hamburger{
display: none;
}


#appmenu {

    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    flex-wrap: wrap;
    align-content: flex-start; 
    justify-content: center; /* Center items horizontally */
    align-items: center; /* Center items vertically */

}

#appmenu li {
 
	align-self: center;
	white-space: nowrap;
	display:block;
	padding: .25em .75em;
	margin: 0;
}


#appmenu li a{
   color: black;
}

#appmenu > li {
align-self: center;
 
	float: left;
	text-align: center;
	position:relative;
	cursor: pointer;
}

#appmenu li:hover,
#appmenu a:focus{
                text-decoration-line: underline;
}

#appmenu > li > ul {
                background-color: rgb(240,240,240);
	background-color: white;
                border: 1px solid rgb(220,220,220);
	display: none;
	position:absolute;
	left:0;
	right:0;
	top:100%;
	padding:0;
	margin:0;
	width: 200%;
	text-align: left;
	z-index: 999;
}




#appmenu > li[aria-expanded="true"] > ul {
	display:block;
                background-color: rgb(240,240,240);
	background-color: white;
	z-index: 999;
}




















#appmenu li:hover,
#appmenu a:focus{
      xtext-decoration-line: none;
      display: block;
}

#appmenu ul > li:hover,
#appmenu ul > li:focus-within{
	background-color: black;
}
#appmenu ul > li:hover a,
#appmenu ul > li:focus-within a{
      text-decoration-line: none;
      color: white;
      background-color: black;

   display: block; /* Ensure the <a> covers the <li> */
  transition: color 0.2s; /* Smooth transition */
}















.chevron{
font-size: 9px;
height: 10px;
width: 10px;
}
.icon-login{
width: 16px;
height: auto;
}


}



/* ====================================== */



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







#appmenu li:hover,
#appmenu a:focus{
      text-decoration-line: none;
      display: block;
}

#appmenu ul > li:hover,
#appmenu ul > li:focus-within{
	background-color: black;
}
#appmenu ul > li:hover a,
#appmenu ul > li:focus-within a{
      text-decoration-line: none;
      color: white;
      background-color: black;

   display: block; /* Ensure the <a> covers the <li> */
  transition: color 0.2s; /* Smooth transition */
}





header {
    height: 80px;
}

#shopcart {
line-height: 0;
flex: 1;
}


/* LEFT SIDE MENU */

#sitelogo{
width: 45vw;
}

#hamburger{
width: 33px;
flex: 1 0;
font-size: 30px;
padding-left: 20px;
margin-left: auto;
}

#menuwrapper {
    position: fixed;
    left: 0;
    top: 0px;
    bottom: 0;    
    display: none;
}

#appmenu {
    position: fixed;
    left: 0px;
    top: 80px;
    background-color: lightgray;
    background-color: white;
    width: 285px;
    display: flex;
    flex-direction: column;
    list-style: none;
    padding: 10px 0 20px 5px;   
    text-align: left;
    margin: 10px;
    margin-left: 10px;
    margin-right: 0;
    margin: 0;
}


#appmenu > li{
   list-style-type: none;
   xborder-bottom: 1px solid gray;
   width: 100%;
   padding: .5em 0 .5em 0;
   clear: both;
   text-align: left;
   cursor: pointer;
}


#appmenu li ul li a{
   color: black;
}

#appmenu li ul{
list-style: none;
padding-left: 0;
}

#appmenu li ul A{
margin-left: 15px;
}


#appmenu li ul li{
   border-bottom: 0;
   list-style-type: none;
   line-height: 2.5em;
}


#appmenu li:hover,
#appmenu a:focus{
      text-decoration-line: none;
      display: block;
}




/* Hide submenus by default */
#appmenu li ul {
    display: none;

}

/* Show submenus on hover */
#cmenuwrapper > ul li:hover ul {
    display: block;
}

#appmenu > li[aria-expanded="true"] > ul {
	display:block;
                background-color: white;
}



#headerrightbox{
 margin-left: auto;
 display: flex;
 align-items: center;
}

#exit{
display: none;
}

}