header {
  height: 8em;
   /*position:static;*/
  position        : sticky;top: -48px;
  background-color: #fcfce8 ;
  display         : flex;
  flex-wrap       : wrap;
  align-content   : space-between;
  z-index: 4;
    /* justify-content: center;
    justify-content: space-between; */
}

#logo {
  flex:4;
   padding-top: 0.5em;
   padding-bottom: 0.3em;
}

#logo img{
   position:absolute ;
left: 50%;
transform: translate(-50%);
    height: 6em;
}

.sidenav {
  position: block;
  height                    : 35em;
  border-bottom-right-radius: 100% ;
  position                  : absolute;
    width   : 16em; 
    z-index : 1;
    top     : 8em;
    left    : -17em;
    background-color:beige;
    padding-top: 4em;
    box-shadow: 0.1em 0.1em 0.2em rgb(48, 48, 48);
    transition: left 0.5s ease;padding-left: 2em;

  }

  
  .sidenav ul {
list-style-type: none;
padding        : 0;
margin         : 0;
  
  }
  .sidenav li{
margin: 1em 0em;

  }
  /* Sidenav menu links */
  .sidenav li a {
    padding        : 8px 8px 8px 2px;
    text-decoration: none;
    font-size      : 1.6em;
    color          : rgb(33, 32, 32);
    transition: 0.3s;
 
  }

  /* Active class */
  .sidenav.active {
    left: 0;
  }

  /* Close btn */
  .sidenav .close {
    color     : rgb(33, 32, 32);
    transition: 0.3s;
    padding   : 8px 8px 8px 2px;
    position  : absolute;
    top       : 0;
    right     : 25px;
    font-size : 36px;
    text-decoration: none;
  }
    
  .sidenav .close:hover {
    color: rgb(162, 80, 80);
  }
  
  
  .openBtn{
    position :relative;
   top : 3.3em;
 flex:1;
 cursor : pointer;
  }
  .openBtn2{ 
   flex    : 1;
   position: relative;
   top     : 3.3em;
   cursor: pointer;
  }
  /* .openBtn:hover{
   opacity:0.8;
  } 
  .openBtn2:hover{
    opacity: 0.8;

  }
*/
  .burger-icon{
    display       : flex;
    flex-direction: column;
    align-items   : center;
  }
  .burger-icon span:nth-child(1) {
 border-radius: 2px;
    width: 1.5em;
    height: 0.7em;
    background-color:brown;
    margin: 0px 13px;
  }
  .burger-icon span:nth-child(2) {
    display: block;
 border-radius: 10px 10px 5px 5px;
    width: 1.2em;
    height: 0.5em;
    background-color:brown;
    margin: 4px 13px;
  } 
  .burger-icon span:nth-child(3){
 display         : block;
 border-radius   : 10px 10px 5px 5px;
 width           : 2em;
 height          : 0.5em;
 background-color: brown;
 margin          : 1px 13px;
  }
  .burger-icon span:nth-child(4) {
    display: block;
 border-radius: 5px 5px 10px 10px;
    width: 4.6em;
    height: 0.5em;
    background-color:brown;
    margin: 5px 13px;
  }
  .bandeau{
     z-index: 0;
    height:1.1em;
    width: 100%;
  border-top :solid 0.15em;
  border-bottom :solid 0.15em;
  border-color: rgb(255, 255, 255);
    background-color: rgb(215, 215, 121);
    background-image: url("../images/bandeau.png");
    background-size: auto;

}