/* El atributo class va precedido por un punto. (.) */
/* Un selector id va precedido por un caracter numeral (#)*/

.fondo {
		background-image: url("/imagenes/Ligure.png");
    	background-repeat: no-repeat;
  		background-position: center center;
  		background-attachment: fixed;
		background-size: cover;

		}

.container {
		margin:0px auto;
		font-size:1em;

	}

	section,aside {
		padding: 10px;
		background:#91A7F7;
		background-image: url("/imagenes/fondologo.png");
		background-repeat: no-repeat;
		background-size: cover;		
		border-radius:14px;
	}

	section {
		width: 50%;
    	position: absolute;
    	left: 50%;
    	top: 50%;
    	transform: translate(-50%, -50%);
	}

	aside {
		float: right;
		width: 25%;
	}

	nav {
		overflow: hidden;
	}

	nav ul {
		list-style-type:none;
		float:left;
		padding:0px;
	}

	nav ul li {
		float:left;
		padding:3px 10px;
		margin:2px;
		background:#ccccff;
	}

/* para 980px o menos */
	@media screen and (max-width:980px) {
		.container {
			width:98%;
		}

		section {
			width:68%;
		}
	}

 

	/* para 700px o menos */
	@media screen and (max-width:700px) {
		aside,section {
			float:none;
			width:96%;
		}

		nav, section {
			font-size:1.2em;
		}

		aside {
			margin-top:5px;
		}

		nav ul {
			float:none;
			clear:both;
		}
	}

 

	/* para 480px o menos */
	@media screen and (max-width:480px) {
		aside {
			display:none;
		}

		nav, section {
			font-size:1.5em;
		}

		section {
			width:94%;
		}

		nav ul {
			float:left;
			clear:none;
			width:50%;
		}

		nav ul li {
			float:none;
		}
	}


	footer {
		height: 20px;
		width:100%;
		margin:10px;
		text-align:center;
		clear:both;
		#position: relative;
  		#margin-top: -20px; /* ponga en negativo el alto de su pie de página para nuestro
					          ejemplo usamos 63, usted debe remplazarlo según su diseño */
  		#height: 20px;
  		#clear:both;
  		#width:100%;
	}

 

	/* para 980px o menos */
	@media screen and (max-width:980px) {
		.container {
			width:98%;
		}

		section {
			width:68%;
		}
	}

 

	/* para 700px o menos */
	@media screen and (max-width:700px) {
		aside,section {
			float:none;
			width:96%;
		}

		nav, section {
			font-size:1.2em;
		}

		aside {
			margin-top:5px;
		}

		nav ul {
			float:none;
			clear:both;
		}
	}

 

	/* para 480px o menos */
	@media screen and (max-width:480px) {
		aside {
			display:none;
		}

		nav, section {
			font-size:1.5em;
		}

		section {
			width:94%;
		}

		nav ul {
			float:left;
			clear:none;
			width:50%;
		}

		nav ul li {
			float:none;
		}