@media (orientation:landscape){

	.landscape{
		color:red;
		font-size: 25px;
	}	

  ul {
	background-color: red; /* color tabla */
	list-style-type:none;
	margin:0;
	padding:0;
	display: flex;
	align-items: stretch;
	flex-wrap: wrap;
}
    li {
	background-color: LightGray; /* color celda tabla */
	margin: 0.2em;
	flex-grow: 1;
} 
  a {
	display:block;
	height:100%;
	box-sizing:border-box;
	padding:1em;	
	text-align:center;
	margin:0.2em;
	text-decoration:none;
	color:#000000; /*color letras */
}
a:hover {
	background-color:LightCoral; 
}
}
@media (orientation:portrait){

	.portrait{
		color:red;
		font-size: 25px;
	}	

  	ul {
	background-color: yellow; /* color tabla */
	list-style-type:none;
	margin:0;
	padding:0;
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	}	
   li {
	background-color: green; /* color celda tabla */
	margin:0.1em;
	flex-grow: 1;
} 
  a {
	display:block;
	height:100%;
	box-sizing:border-box;
	padding:1em;	
	text-align:center;
	margin-right:0.2em;
	text-decoration:none;
	color:blue; /*color letras */
}
a:hover {
	background-color:LightCoral; 
}
}