@media only screen and (min-width:1080px) {
  #sidebar {
    position: fixed;
    top: 35px;
    left: 30px;
    width: 260px;
    z-index:2;
    background-color: #fcfcfc;
    border: 0px solid black;
    padding-bottom:25px;
    padding-top:25px;
    border-radius: 0px;
  }

  #nom_sidebar {
    text-align: center;
  }

  #topbar {
    display: none;
  }

  UL {
    text-align: center;
    margin-left: 0px;
    padding-left: 0px;
    list-style-type: none;
  }

  UL LI A {
    color:#333;
    text-decoration: none;
    font-size:15px;
    line-height: 30px;
  }

}

 @media only screen and (max-width:1080px) {
   #sidebar {
     display: none;
   }

   #topbar {
     display: flex;
     width:100vw;
     justify-content: space-between;
     box-sizing: border-box;
     position:fixed;
     top:0px;
     padding-top:10px;
     height:78px;
     z-index:19;
     background-color: #efefef;
   }

   #nom_topbar {
     text-align: center;
     margin-left:15px;
   }

   #nav_bars {
     margin-right:15px;
   }

   UL {
     text-align: center;
     margin-left: 0px;
     padding-left: 0px;
     list-style-type: none;
   }

   UL LI A {
     color:#333;
     text-decoration: none;
     font-size:15px;
     line-height: 30px;
   }

 }




 .bar1, .bar2, .bar3 {
   width: 35px;
   height: 5px;
   background-color: #333;
   margin: 6px 0;
   transition: 0.4s;
 }

 .change .bar1 {
   -webkit-transform: rotate(-45deg) translate(-9px, 6px);
   transform: rotate(-45deg) translate(-9px, 6px);
 }

 .change .bar2 {opacity: 0;}

 .change .bar3 {
   -webkit-transform: rotate(45deg) translate(-8px, -8px);
   transform: rotate(45deg) translate(-8px, -8px);
 }







 #menu a {
   position: relative;
   text-decoration: none;
   color:black;
 }

 #menu a::before {
     content: '';
     position: absolute;
     width: 100%;
     height: 1px;
     border-radius: 4px;
     background-color: #18272F;
     bottom: 0;
     left: 0;
     transform-origin: right;
     transform: scaleX(0);
     transition: transform .3s ease-in-out;
   }

 #menu a:hover::before {
   transform-origin: left;
   transform: scaleX(1);
 }