/*Landscape*/
/*@media (min-width: 1919px)*/
@media (orientation: landscape)
	{
		body { background-image: url( wall1.jpg ); }
		
		.container
			{
				margin: 4.2% 0% 0% 29.4%;
				width: 42.05%;
				/*height: 800px;			
				border: 2px solid white;*/
			}
		
	}
	
/*Protrait*/
/*@media (max-width: 1100px)*/
@media (orientation: portrait)
	{
		body { background-image: url( wall2.png ); }
			
		.container
			{
				margin: 8% 0% 0% 8%;
				width: 79.85%;
				/*height: 800px;			
				border: 2px solid white;*/
			}	
		
	}
	
/*For all the page*/	
body { font-family: "Segoe UI"; }

a
	{
		text-decoration: none;
		color: #f7f7f7;
	}
	
.container
	{
		background-color: rgba( 55, 54, 53, 0.5 );
		box-shadow: 3px 3px 5px rgba( 55, 54, 53, 1);
	}
	
ul { text-align: center; }
	
li
	{
		list-style-type: none;
		transition: height 1s, opacity 1s, padding 1s, background-color 1s;
		height: 0px;
		opacity: 0;
	}	

ul, li
	{
		padding: 0px;
		margin: 0px;
		color: #f7f7f7;
	}

.titulo
	{
		background-color: rgba( 36, 37, 38, 1 );
		transition: all 1s;
		padding: 1.5%;
	}

ul:hover li
	{		
		height: 18px;
		opacity: 1;
		padding: 1% !important;
	}
	
ul:hover .titulo { background-color: rgba( 48, 50, 51, 1 ); }
	
li:hover { background-color: rgba( 235, 234, 234, 0.5 );