@font-face{
	font-family: Fuente;
	src:url("fuentes/UrbanJungle.OTF");
}
@font-face{
	font-family: Texto;
	src:url("fuentes/Lost.OTF");
}
@font-face{
	font-family: Context;
	src:url("fuentes/Christmas.OTF");
}
#cabecera h1{
	color:rgb(244,244,244);
	font-family: Fuente;
	padding-left: 2%;
}

#cabecera,
#menu,
#contenido,
#pie{
	background-color: rgba(5,162,206,20);
	float: left;
}
#cabecera,
#pie{
	height: 10%;
	left: 10%;
	width: 99%;
}
#contenido{
	height: 80%;
	left: 29%;
	top: 15%;
	width: 70%;
}
#menu{
	height: 80%;
	left: 10%;
	top: 15%;
	width: 29%;
}
#cabecera{
	top:  5%;
}
#pie{
	top: 85%;
}
#contenido p{
	color:rgb(244,244,244);
	font-family: Context;
	font-size: 15px;
}
#pie p{
	color: rgb(247,245,0);
	font-family: Texto; 
	font-size: 11px;
}

#recuadro{
	background-size: 600px 320px;
	background-image: url("img/ciudad1.jpg");
	opacity: 1.0;
	position:absolute; /*posicion absoluta, totalmente independiente*/
	top:20%; /*separacion borde superior*/
	width:15%; /*ancho*/
	height: 50%;
	left: 29%;
	top: 25%;
	width: 40%;

	transition: background-image,opacity,border-radius,left 2s,2s,2s,2s,2s ease,linear,ease-in,linear;
}
#recuadro:hover{
	background-image:url("img/ciudad1.jpg");
	border-radius: 25px;
	opacity: 0.6;
}