@charset "UTF-8";

/* Menu ******************************/

:root{
    --menu-color-0 : #8FBC8F; 
}

.menu{
    /*display : flex;*/
    flex-direction : column;
}

/*  Other menu  system */

#hiddenmenu{
    display : none;
    text-align: center;
    margin : 0;
    padding : 0;
}

.hm{
    background-color : skyblue;
    color : white;
    font-size : 1.5rem;
    font-family : sans-serif;
    margin : 0;
    user-select : none;
    -webkit-user-select : none;
}

#mainmenu{
    width : calc(100% / 5);
    transition : left 0.5s ease;
    background-color : rgba(143,188,143,0.8);
}
  
#mainmenu.open{
    position : fixed;
    left : 0px;
    width : 50vw;
    max-width : 200px;
}

  @media screen and (max-width : 736px){
      #mainmenu{
	  /*    display : none; */
	  float : left;
	  position : fixed;
	  left : -300px;
      }
      
      #hiddenmenu{
	  display : inline-block;
	  /* 	  position: fixed; */
	  position : sticky;
	  top : 0px;
	  max-width : 100%;
      }
      
  }

/* Nav */

nav{
      text-align : left;
      margin : 0 10px 0 auto;
}

/* menu version */

nav menu{
    margin : 0;
    padding-left : 5px;
}

menu li{
/*    background:url(../img/menu.jpg) left center no-repeat; */
    background-size : contain;
    height:3rem;
    width:100%;
    list-style-type : none;
    transition: background-color 0.5s ease;
    padding-left : 1rem;
    padding-top : 0.5rem;
    }

menu a{
    text-decoration : none;
    font-family : sans-serif;
    font-weight : 400;
    /* color : black; */   
    color: black;
    font-size : 1.1rem;
}

menu  li:hover {
    background-color : tomato;
    transition : 
}

menu  li:hover a{
    color : white
}

/* ul version */

nav ul{
    margin: 0;
    padding-left : 5px;
}

nav ul li{
/*    background:url(../img/menu.jpg) left center no-repeat; */
    height:53px;
    width:235px;
    padding:18px 0px 0px 30px;
    list-style-type : none;
    transition: background-color 0.5s ease; 
    }

nav ul a{
    text-decoration : none;
    /* color : black; */   
    color: white;
    font-size : 1em;
}


nav ul li:hover {
    background-color : skyblue;
    transition : 
}

nav ul li:hover a{
    color : red !important;
}