/*menu*/
.header {
  color: #ffffff;
  width: 100%;
  font-size: 150%;
  top: 0;
  background-color: #FF9800;
  z-index: 2;
}
#logo {
  width: 60%;
  min-width: 80px;
  filter: drop-shadow(5px 5px 5px rgb(8, 8, 8));
  -webkit-filter: drop-shadow(5px 5px 5px rgb(8, 8, 8));
}

.navigation ul li a {
  text-decoration: none;
  padding:5%;
}
.navigation li{
  list-style-type: none;
  display:inline;
}
.nav-container {
  display: grid;
  grid-template-columns: 10% 90%;
}
#menu{
  margin: auto;
  text-align:end;
  margin-right: 2%;
  width: 60%;
  
}
a{
  text-decoration: none;
  color: black !important;
}

@media(hover:hover){
  li:hover{
    color: rgb(247, 244, 244)
  }
  a:hover{
    color: rgb(247, 244, 244)
  }
  
}

/*tamaño compu*/
@media screen and (min-width: 1350px) {




}

/*tamaño tablet*/
@media screen and (min-width: 820px) and (max-width: 1350px) {



}

/*para tamaño telefono*/
@media screen and (max-width: 820px) {

  .header {
    margin-bottom: -1.1%;
  }


}

/*para tamaño telefono chico*/
@media screen and (max-width: 460px) {

  .navigation li{
    font-size: 60%;
  }
  .nav-container {
    display: grid;
    grid-template-columns: 5% 95%;
  }


}

@media screen and (max-width: 290px) {
  .navigation li{
    font-size: 50%;
  }
  .nav-container {
    display: grid;
    grid-template-columns: 0% 100%;
  }



}