:root {
  --menu-height-portail: 8vh;
}

@media screen and (max-width: 500px) {
  :root {
    --menu-height-portail: 35px;
  }
}

#menu-wrapper { 
  position: fixed; 
  height: calc(8vh);
  line-height: 8vh; 
  right: 10px; 
  z-index: 500; 
  margin: 0;
  padding: 0;
}

#menu-wrapper #menu-general { 
  width:100%;  
  height: 100%;
  text-align: center; 
}

#menu-general ul { 
  padding: 0;
  text-align: left; 
  list-style-type: none;   
  height: calc(100%); 
  display: flex;
  align-items: center;
  justify-content: center;
}

#menu-general li a, #menu-general li div {
  display: inline-block;
  text-align: center;
  text-decoration: none;
  font-size: 20px;
  color: #114F47;
  font-family: "Calibri", sans-serif;
  font-size: 2.8vh;
}

#menu-wrapper #menu-general li {
  margin:0;
  padding:0;
  float:left;	
  text-align: center;
  padding: 0 30px 0 30px;
  color: #114f47;
}

#menu-wrapper #menu-general li i { margin-right: 5px; font-size: 0.9rem; }
#menu-general li a:hover {
	 color: #EE691F; 
}

#menu-general .active {
	 font-weight: bold; 
}

#menu-general li a.user-link { 
  cursor: pointer;
}

#menu-general li a.user-link:hover {
  color: #EE691F;
} 

.sub-nav {
  margin: 0;
  padding: 0;
}

#menu-general ul ul {
  display: none;
}

#menu-wrapper #menu-general li:hover ul.sub-nav {
  
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;

  margin: 0;
  padding: 0;
  margin-top: 3vh;
  list-style: none;
  position: absolute;
  height: auto;  
  padding: 10px;
  border: 1px solid #CCC;
  border-radius: 5px;
}

#menu-wrapper #menu-general .dropdown {
  position: relative;
  display: flex;
  justify-content: flex-end;
}
#menu-wrapper  #menu-general .dropdown li {
  padding: 5px 20px 5px 15px;
  float: initial;
  position: relative;
  height: 3.5vh;
  line-height: 3.5vh;
}

#menu-wrapper #menu-general .dropdown .sub-titre {
  display: block;
  position: relative;
    cursor: pointer;
}

#menu-wrapper #menu-general .dropdown ul.sub-nav {
  list-style: none;
  display: none;
  position: relative;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  background-color: #eceff4;
}
#menu-wrapper #menu-general .dropdown ul.sub-nav a {
  width: intrinsic;
  width: --max-content;
  width: -webkit-max-content;
  text-align: left;
}

#menu-general .dropdown ul.sub-nav li {
  text-align: left;
  margin: 0;
  padding: 0;
}       


#menu-general .dropdown a {
  position: relative;
  align-self: flex-end; 
}

#menu-general .dropdown div .arrow {
  border: solid #135148;
  border-width: 0 2px 2px 0;
  display: inline-block;
  padding: 4px;
  margin-left: 3px;
  margin-bottom: 3px;
}
  #menu-general .dropdown div .arrow.down {
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}

/* USER  */
/* LOGIN */

.user-container { 
  display: none; 
  position:fixed; 
  text-align:left; 
  top: 8vh;  
  z-index: 400; 
  border: 1px solid; 
  background-color: #ECEFF4; 
  width: auto; 
  right: 0px; 
  border-right: 0;
  padding: 10px;
  border-radius: 0 0 5px 5px;
  border: 1px solid #c0c0c0;
  overflow: hidden;
}

.user-container .user {
  background: #ECEFF4;
  font-family: Calibri, Candara, Segoe, 'Segoe UI', Optima, Arial, sans-serif;
  font-size: 12px; 
  color: #000;
  padding: 0;
  z-index: 999;
}

.user-container .user ul { 
  margin: 0; padding: 0; 
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;  
}
.user-container .user li { list-style: none; display: flex; padding: 5px 0 5px 0;}
.user-container .user li { color:#555; width: 100%; cursor: pointer; font-size:16px; }
.user-container .user li:hover { color: #EE691F; }
.user-container .user li a { 
  margin: 0 0 0 10px; 
  padding: 4px 0 4px 0;
  color: #555; 
  width: auto; 
  line-height: 25px; 
  padding-left: 0px; 
  cursor: pointer; 
  text-transform:capitalize; 
  text-decoration:none; font-size: 18px; 
}
.user-container .user li a:hover { color:white; }

.user-container .user .user-arrow {
}


#menu-wrapper-mobile { display: none; }

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

  #menu-wrapper { 
    height: 35px;
    line-height: 35px; 
  }

  #menu-general ul { padding: 0; }
  #menu-wrapper #menu-general li { padding: 0 20px 0 20px; }
  
  #menu-general ul li a {
    font-size: 1rem;
  }

  #menu-general ul li.dropdown div { font-size: 1rem; }

  #menu-wrapper #menu-general li:hover ul.sub-nav { 
    align-items: flex-start;
    justify-content: flex-start;
    margin-top: 25px; 
    padding: 5px 0 5px 0;
    height: auto;
  }
  
  #menu-general ul li.dropdown ul.sub-nav li {  }
  #menu-general .dropdown ul.sub-nav li a { }       
  
}

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

  #menu-wrapper-mobile { 
    display: block;
    position: fixed; 
    height: 30px; 
    width: 100vw;
    top: 0; 
    left: 0;
    padding: 5px; 
    background-color: #ECEFF4;
    z-index: 100; 
  }

  #menu-wrapper { display: none; }

/*  #hamburger { left: 0px; top: 0; border: 1px solid; width: 200px; height: 50px;}  */
}