.menu{list-style-type: none; display: flex; }
.menu li{display: inline-block; position:relative; text-transform: uppercase;padding: 10px;transition: .3s;}
.menu li:hover{background-color: #fff;}
.menu li a {display: block;color: #333;text-decoration: none;transition: 0.3s;border-top: 5px solid var(--rosso-menu);padding: 10px 10px 0;}
.menu li a:hover {color: #000; }
  
.navbar{cursor:pointer; display: none;}

.icon-bar {width: 42px;height: 2px;background-color: #222;margin-bottom: 10px;display: block;transition: 0.3s;}
   
.sub-menu{
  width: 230px;
  background-color: #fff;
  list-style: none;
  position: absolute;
  top: 47px;
  left: 0;
  z-index: 99999;
  display: none;
  transition: 0.3s;
  box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.1);
  -webkit-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.1);
  -moz-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.1);
}

.sub-menu li{width: 100%;border-bottom: 1px solid #efefef;border-right: 0;text-align: left;}
.sub-menu li:last-child{border-bottom: none;}
.sub-menu li a{color: #333;font-size: 14px;padding: 10px;border: 0;}
.sub-menu li.covid a{color: #c00;}

.menu li.have-sub-menu>a::after {content: " \f107";font-family: fontAwesome;}

.show{display: block;transition: 0.3s;}
.close {display: none;}
  
@media screen and (max-width: 1024px) {

  .wide .close {
    position: fixed;
    font-size: 36px;
    color: #333;
    z-index: 99999999999;
    display: none;
    bottom: 20px;
    right: 40px;
    color: #fff;
  }
  .wide .close {display: block;} 
  .menu{width:70%; margin: 0 auto;}   
  .menu li{border-bottom: 1px solid #555;border-right: 0; text-align: center;}
  .menu li:last-child {border-bottom: 0; }
  .menu li:hover{background-color:transparent;}
  .menu li a { color: #fff; padding: 20px 10px; font-size: 30px; border: 0;}
  .menu li a:hover { color: #000; background-color: #fff;}

  .navbar{display: initial; transform: translateX(50%);}
  .logo {width: 150px; }
  nav{
    width: 100%;
    height: 100%;
    padding-top: 10%;
    overflow:scroll;
    position: fixed;
    top: 0;
    left: -100%;
    z-index: 99999;
    transition:  all ease .4s;
    background: rgb(0,0,0);
    background: linear-gradient(130deg, rgba(0,0,0,1) 10%, rgba(50,50,50,1) 90%);
}

  .wide{left: 0;opacity: 100%;}

  .menu{flex-direction: column;}

  .sub-menu{width: 100%;position: relative;top: 0;background-color: transparent;}
  .sub-menu li{border-bottom: none;}
  .sub-menu li a{color: #fff;font-size: 24px;padding: 10px;text-transform: capitalize;}        
}

@media screen and (max-width: 479px) {
  .menu li {padding: 10px 0px;}
}