body{
	margin: 0 auto;
	width: 90%;
	
}

div#principal{
	margin: 0 auto;
	width: 90%;
	margin-top: 10px;
	
	 background: #000 no-repeat center fixed;  /* For browsers that do not support gradients */
  background: -webkit-linear-gradient(left top, black,#C0C0C0); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(bottom right, black, #C0C0C0); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(bottom right, black, #C0C0C0); /* For Firefox 3.6 to 15 */
  background: linear-gradient(to bottom right, black, #C0C0C0); /* Standard syntax */
  background-size: cover;
  padding-top: 15px; 
}

div#principal h1{
	text-align: center;
	border: 2px solid #fff;
	color: #fff;
	width: 40%;
margin-left: 30%;
margin-top: 40px;
background-color: #000;
}

iframe{
	margin:auto;
	width: 70%;
	height: 450px;
	margin-left:15%;
	margin-top: 10px;
	margin-bottom: 20px;
		border: 3px solid #fff;
		box-shadow: 10px 10px 10px 5px #000;

}

#menu{
   margin-left:15%;
   
   padding-bottom: 20px;
	}

.menu{
		
		}
		.menu li{
		list-style:none;
		float:left;
		font:18px Arial;
		}
		.menu li a:link, .menu li a:visited{
		display:block;
		text-decoration:none;
		background-color:#000;
		padding:0.5em 2em;
		border:1px solid #fff;
		color:#fff;
		}
		.menu li a:hover{
		background-color:#2580A2;
		transition:all .8s ease;
		}
		
		.menu li ul{
		position:absolute;
		visibility:hidden;
		border-top:1px solid #fff;
		margin:0;
		padding:0;
		}
		.menu li ul li{
		display:inline;
		float:none;
		}
		.menu li ul li a:link, .menu li ul li a:visited{
		background-color:#363636;
		width:auto;
		}
		.menu li ul li a:hover{
		background-color:#2580A2;
		transition:all .8s ease;
		}
		
@media only screen and (max-width: 1400px) {		
.menu li{
		font:17px Arial;
		}

}

@media only screen and (max-width: 1300px) {		
#menu{
   margin-left:13%;
	}

}

@media only screen and (max-width: 1200px) {		
#menu{
   margin-left:12%;
	}
	
	.menu li{
		font:16px Arial;
		}

}

@media only screen and (max-width: 1100px) {		
     .menu li{
		font:15px Arial;
		}

}

@media only screen and (max-width: 1050px) {		
#menu{
   margin-left:10%;
	}

}

@media only screen and (max-width: 1000px) {		
	
	.menu li{
		font:14px Arial;
		}
		
		iframe{
			width:80%;
			margin-left:10%;
		}

}

@media only screen and (max-width: 950px) {		
#menu{
   margin-left:7%;
	}

}

@media only screen and (max-width: 900px) {		
#menu{
   margin-left:4%;
	}

}

@media only screen and (max-width: 850px) {		
#menu{
   margin-left:1%;
	}

}

@media only screen and (max-width: 800px) {		
.menu li{
		font:13px Arial;
		}
		
		#menu{
   margin-left:3%;
	}
}

@media only screen and (max-width: 750px) {		
.menu li{
		font:12px Arial;
		}
		
		#menu{
   margin-left:2%;
	}
}

@media only screen and (max-width: 700px) {		
.menu li{
		font:11px Arial;
		}
		
		#menu{
   margin-left:4%;
	}
	
	div#principal h1{
	width: 50%;
margin-left: 25%;
}

}

@media only screen and (max-width: 670px) {		
.menu li{
		font:11px Arial;
		}
		
		#menu{
   margin-left:2%;
	}

}

@media only screen and (max-width: 640px) {		
.menu li{
		font:10px Arial;
		}
		
		#menu{
   margin-left:2%;
	}

}