*{ margin:0; padding :0; box-sizing:border-box;}
#MenuPrincipal , #MenuSecundari{
padding: 5px;
padding-right: 80px;
font-size: 1.1em;
} 
#MenuPrincipal{
  margin-right: 30px;
}
#MenuPrincipal>ul, #MenuSecundari>ul{
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-end;
  list-style: none;
}
#MenuPrincipal>ul>li, #MenuSecundari>ul>li{
   padding: 0px 20px;
}

#MenuPrincipal>ul>li>ul , #MenuSecundari>ul>li>ul{
  background: #f5aa01;
  position: absolute;
  left: 0;
  width: 100%;
  display: none;
  list-style: none;
  z-index: 9;
  min-height: 130px;
}
#MenuSecundari:hover + #MenuPrincipal{
  pointer-events: none;
}

#MenuPrincipal ul li:hover, #MenuSecundari ul li:hover{
  background: #f5aa01;
}

#MenuPrincipal ul li:hover > ul, #MenuSecundari ul li:hover > ul{
  position: absolute;
  display: block;
  width: 100%;
  padding: 20px 0px; 
  padding-left: calc(100% - 700px);
}

#MenuPrincipal ul li ul h1, #MenuSecundari ul li ul h1{
  text-align: right;
  position: absolute;
  margin: 0;
  right: 750px;
  height: 80%;
  border-right: 1px solid black;
  color: white;
  padding-right: 30px;
  text-shadow: none;
}

#MenuPrincipal ul li ul .destacat, #MenuSecundari ul li ul .destacat{
font-size: 1.5em;
display: block;
margin: 20px 0px;
}

#MenuPrincipal a , #MenuSecundari a{
  text-decoration: none;
   color: #222;
}

#MenuPrincipal ul li ul a:hover , #MenuSecundari ul li ul a:hover{
   font-weight: 800;
}

#MenuPrincipal>ul>li>a{
  font-weight: 800;
  font-size: 1.2em;
}

/*   HAM MENU */

.hamb{
    display: none;
    cursor: pointer;
    float: right;
}

#side-menu {
  display: none;
  position : absolute;
  top: 120px; right: 60px;
}
.hamb-line {
    background: #444;
    display: block;
    height: 4px;
    position: absolute;
    top: 124px; right: 40px;
    width: 32px;
    
}

.hamb-line::before,
.hamb-line::after{
    background: #444;
    content: '';
    display: block;
    height: 100%;
    position: absolute;
    transition: all .2s ease-out;
    width: 100%;
}
.hamb-line::before{
    top: 10px;
}

.hamb-line::after{
    top: -10px;
}
#MenuPrincipal ul li:hover > ul, #MenuSecundari ul li:hover > ul{
  display: block;
}


@media screen and (orientation:portrait) , (max-width: 1300px) {

 nav{
    max-height: 0;
    transition: max-height .5s ease-out;
}

  .side-menu:checked ~ nav{
    max-height: 100%;
}

  .hamb{ display: block;}
  #MenuPrincipal, #MenuSecundari{
    display: block;
    position: relative;
    width: 100%;
    overflow-y: hidden;
  }

  #MenuPrincipal>ul, #MenuSecundari>ul{
    display: block;
    position: relative;
    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-end;
    list-style: none;
    
  }
 #MenuPrincipal>ul>li , #MenuSecundari>ul>li{
    position: relative;
    display: block;
    font-weight: 800;
  }

  #MenuPrincipal>ul>li>ul , #MenuSecundari>ul>li>ul{
    position: relative;
    display: block;
    background: none;
    margin-left: 40px;
    font-weight: 400;
  }
  #MenuPrincipal ul li ul h1, #MenuSecundari ul li ul h1{
    display: none;
  }
  #MenuPrincipal ul li:hover > ul, #MenuSecundari ul li:hover > ul{
  position: relative;
  display: block;
  width: 100%;
  padding: inherit; 
  padding-left: auto;
  }
 
}

@media (prefers-color-scheme: dark) {
  #MenuPrincipal a , #MenuSecundari a{
     color: #eee;
  }
}