@media {
 .mmenu ul{
list-style-type: none;
padding-inline-start:0;	
padding-left:0px;	
margin-block-start: 0;
margin-block-end: 0;	
}
.mmenu li{ list-style-position: outside; }


}
@media   all and (max-width: 800px) {

	

.mmenu{

	background-color:#99ccff;
	font-size:16px;font-family:arial; font-weight:bold;
	text-align:center;z-index:1;padding-top:10px;
	padding-bottom:10px;
	border-bottom:2px solid #99ccff;
	font-weight:normal;


	} 
	
.mmenu a {text-decoration:none;color:black;display:flex;align-items:center}
.mmenu a:before {content:"\BB";margin-right:0.5em}
.mmenu a:hover {color:red}
.mmenu label:hover {color:red}
.mmenu input + label:before{content:"\25BA";margin-right:0.5em}
.mmenu input:checked + label:before{content:"\25BC"}
.mmenu div[class='rec-sel']>label{color:red}
.mmenu div[class='rec-sel']>a{color:red}
	   
	   
	  
 .mmenu>*.mmenu__block>.mmenu__rec{display:flex;flex-direction:column;}
 
  .mmenu>*.mmenu__block>*.mmenu__rec>a{
border-bottom:1px solid white;padding-top:1em;padding-bottom:1em;padding-left:0.5em}
 .mmenu>*.mmenu__block>*.mmenu__rec>label{
border-bottom:1px solid white;padding-top:1em;padding-bottom:1em;padding-left:0.5em}

 .mmenu>*.mmenu__block{text-align:left;}

 
.mmenu>*.mmenu__block>.mmenu__rec:last-child>*:first-child{border-right:0px;}


.mmenu>.mmenu__block .mmenu__block>*:first-child {border-top:0px} 
.mmenu>.mmenu__block .mmenu__block{display:none;text-align:left;padding-left:1em;font-size:0.9em}
.mmenu  .mmenu__block  .mmenu__block a{font-family:verdana;text-decoration:none;cursor:pointer;border-bottom:1px solid white;padding-top:0.7em;padding-bottom:0.7em;padding-left:0.5em}
 

.mmenu .mmenu__rec>input:checked +label+div[class="block"]{display:block;}     
.mmenu .mmenu__block .mmenu__block .mmenu__block{display:none;border:0px;}
.mmenu .mmenu__block .mmenu__block .mmenu__block>.mmenu__rec>*:first-child{padding-bottom:0.7em;padding-top:0.7em}



}

@media  all and (min-width: 800px) {

.mmenu{
			
		 --mark: red;
         --back:white;		 
			
		font-weight:normal;
	/*background-color: var(--back);*/
	font-size:14px;font-family:arial;
	text-align:center;z-index:1;
border-bottom:2px solid #e0e0e0;
	
	
	} 
	.mmenu a{font-family:arial;font-weight:bold;text-transform:uppercase;text-decoration:none;color: black;display:flex;align-items:center}
	.mmenu label{font-weight:bold;font-family:arial;text-transform:uppercase;display:block;color: black}
	.mmenu a:hover{color:var(--mark)}
	.mmenu label:hover {color:var(--mark)}
	.mmenu .sel>label{color:var(--mark)}
	.mmenu .sel>a{color:var(--mark)}
	
	
	/*#99ccff*/
 .mmenu .mmenu__rec{cursor:pointer;display:block;}
 .mmenu>.mmenu__block{display:flex;justify-content:start;position:relative}
 .mmenu>.mmenu__block>.mmenu__rec>a{padding:0.6em 0.4em 0.6em 0.4em;}
  .mmenu>.mmenu__block>.mmenu__rec>label{padding:0.6em 0.4em 0.6em 0.4em;}
.mmenu>.mmenu__block>.mmenu__rec:last-child>*:first-child{border-right:0px;}

.mmenu .mmenu__block{background:var(--back);}
 
.mmenu>.mmenu__block>.mmenu__rec .mmenu__rec {position:relative;} 
.mmenu>.mmenu__block>.mmenu__rec .mmenu__rec>a {padding:0.5em 0.5em 0.5em 0.5em} 
.mmenu>.mmenu__block>.mmenu__rec .mmenu__rec>label {padding:0.5em 0.5em 0.5em 0.5em} 
.mmenu>.mmenu__block .mmenu__block>:first-child {border-top:0px} 
.mmenu>.mmenu__block .mmenu__block{
	 display:none;
	 position:absolute;text-align:left;background:white;
	 z-index:1;
border-left:2px solid #e0e0e0;
border-right:2px solid #e0e0e0;border-bottom:2px solid #e0e0e0;
}

.mmenu .mmenu__rec:hover>.mmenu__block{display:grid;grid-template-columns:1fr 1fr} 


.mmenu  .mmenu__block  .mmenu__block>.mmenu__rec{
	
	background:var(lightgrey);
	font-weight:bold;font-size:0.8em;font-family:verdana;
	display:block;cursor:pointer;
	
	}

.mmenu .mmenu__block .mmenu__block .mmenu__block{display:none;position:absolute;left:100%;top:-1px;border:1px solid white}
.mmenu .mmenu__block .mmenu__block .mmenu__rec {position:relative;}     
.mmenu .mmenu__block .mmenu__block .mmenu__block>.mmenu__rec{font-size:11px;position:relative;}
.mmenu .mmenu__block .mmenu__block>.mmenu__rec:hover .mmenu__block{display:block;}
.mmenu .mmenu__block .mmenu__block .mmenu__block .mmenu__rec>*:first-child{font-family:verdana ;font-size:11px;font-weight:normal;}

.mmenu>.mmenu__block>.mmenu__rec:nth-child(1)>.mmenu__block{display:none}  

.mmenu>.mmenu__block>.mmenu__rec:nth-child(1):hover>.mmenu__block{display:grid;grid-template-columns:1fr 1fr;}  
.mmenu>.mmenu__block>.mmenu__rec:nth-child(1):hover>.mmenu__block .mmenu__block{display:flex;flex-direction:row; ;position:static;} 




}