/*Para ancho de pantalla pequeño, móvil en vertical, hasta 480px que es la media-querie siguiente*/
	body { font-size: 16px; }
	h1 { font-size: 20px; padding: 1px; }
	h2 { font-size: 19px; padding: 1px; }
	h3 { font-size: 18px; padding: 1px; }

#fondo-pagina { background-color: #ddd; }
/*#fondo-pagina { background-color: #FFA07A; }*/

/*  .de-480pixel { display: inherit !Important; }  */
ul.menu1 li a {font-size: 0.6em;}

.ancho-mapas {width: 86%;
		margin: 5px 6% 5px 8%;}
.cuadro-mapas {  background-color: #ddd;
		list-style: none;}

/*Si pongo esto de debajo, sin nada, las cosas salen bien, pero si no lo pongo, lo de 480px no sale ¿?*/

@media screen (max-width: 380px){}

@media screen and (max-width: 501px){
#fondo-pagina {
 background-image: url("../fondos/Azulejos-ceramica-2-v_opacidad70Rellen070.png");
 background-repeat: repeat;
  }
.cabecera {width: 100%; height: 115px; /*border: solid 2px #f00;*/  margin: 0px auto;
	background-image: url("../fondos/Tira_380x120pixel_opacidad80.png");
	background-repeat: no-repeat;
	background-position: 50% 50%;
	}
/* La cabecera será para mis páginas web, para las páginas de la cofradía la cabecera es distinta y la hago con la clase "para-cabecera" */

footer {
/*background-color: #03FB35;*/
background-image: url("../fondos/rojo_5x5px_opacidad-20.png");
padding: 10px;
}
	.de-320pixel { display: inherit !Important; }
	.texto-al-pie {font-size: 0.65em; }
	.cuadro-mapas { margin: 10px auto;
				width: 85%;}
}
/*Para ancho de pantalla de móvil en horizontal o tablet  en vertical, hasta 768px que es la media-querie siguiente*/
@media screen and (min-width: 502px) and (max-width: 790px){
		body { font-size: 17px; }
		h1 { font-size: 21px; padding: 1px; }
		h2 { font-size: 20px; padding: 1px; }
		h3 { font-size: 19px; padding: 1px; }	

#fondo-pagina {
 width: 100%;
 background-image: url("../fondos/Azulejos-ceramica-2-v_opacidad70Rellen070_azul10opac70.png");
 background-repeat: repeat;
  }
/*	#fondo-pagina { background-color: #FFA07A; }*/
		/* Aquí pongo la imagen de cabecera mediana*/
.cabecera {width: 100%; height: 115px; /*border: solid 2px #f00;*/  margin: 0px auto;
		background-image: url("../fondos/Tira_480x120pixel_opacidad80.png");
		background-repeat: no-repeat;
		background-position: 50% 50%;
		}
footer {
/*background-color: #0377FF;*/
background-image: url("../fondos/dorado_5x5px_opacidad-50.png");
padding: 10px;
}
	.de-480pixel { display: inherit !Important; }
	ul.menu1 li a {font-size: 0.65em;}
	.texto-al-pie {font-size: 0.85em; }
	.cuadro-mapas { margin: 10px auto;
				width: 85%;}
}

/*Para ancho de pantalla de tablet en horizontal o escritorios normales, hasta 1024px que es la media-querie siguiente*/
@media screen and (min-width:791px) and (max-width:1048px) {
		body { font-size: 18px; }
		h1 { font-size: 22px; padding: 1px; }
		h2 { font-size: 21px; padding: 1px; }
		h3 { font-size: 20px; padding: 1px; }	

#fondo-pagina {
 width: 100%;
 background-image: url("../fondos/Azulejos-ceramica-2-v_opacidad70Rellen070_naranja10opac70.png");
 background-repeat: repeat;
  }
	/* Aquí pongo la imagen de cabecera mediana*/
	.cabecera {width: 98%; height: 115px; /*border: solid 2px #f00;*/  margin: 0px auto;
		background-image: url("../fondos/Tira_480x120pixel_opacidad80.png");
		background-repeat: no-repeat;
		background-position: 50% 50%;
		}
footer {
/*background-color: #0377FF;*/
background-image: url("../fondos/dorado_5x5px_opacidad-50.png");
padding: 10px;
}
	.de-768pixel { display: inherit !Important; }
	ul.menu1 li a {font-size: 0.75em;}
	.cuadro-mapas { margin: 10px auto;
				width: 780px;}
}

/*Para ancho de pantalla de escritorios grandes, hasta 1226px que es la media-querie siguiente*/
@media screen and (min-width:1049px) and (max-width:1226px){
		body { font-size: 18px; }
		h1 { font-size: 26px; padding: 1px; }
		h2 { font-size: 24px; padding: 1px; }
		h3 { font-size: 22px; padding: 1px; }	

#fondo-pagina {
  width: 100%;
 background-image: url("../fondos/Azulejos-ceramica-2-v_opacidad70Rellen070_rojo20.png");
 background-repeat: repeat;
  }
footer {
/*background-color: #FB7735;*/
background-image: url("../fondos/naranja_5x5px_opacidad-50.png");
padding: 0px;
}
	/* Aquí pongo la imagen de cabecera más grande*/
	.cabecera {width: 98%; height: 115px; /*border: solid 2px #f00;*/  margin: 0px auto;
		background-image: url("../fondos/Tira_900x120pixel_opacidad80.png");
		background-repeat: no-repeat;
		background-position: 50% 50%;
		}
	.de-1024pixel { display: inherit !Important; }
	ul.menu1 li a {font-size: 1em;}
	.cuadro-mapas { margin: 10px auto;
				width: 780px;}
}/*Esta llave cierra Para ancho de pantalla de tablet en horizontal o escritorios normales, hasta 1024px*/

/*Para ancho de pantalla de escritorios muy anchos, mínimo 1200px*/
@media screen and (min-width: 1227px) {
		body { font-size: 18px; }
		h1 { font-size: 28px; padding: 1px; }
		h2 { font-size: 26px; padding: 1px; }
		h3 { font-size: 24px; padding: 1px; }	

#fondo-pagina {
  width: 100%;
	background-image: url("../fondos/Azulejos-ceramica-2-v_opacidad70Rellen070_verde10opac50.png");
	/* background-image: url("../fondos/fondo-grande.JPG");*/
 background-repeat: repeat;
  }
	/* Aquí pongo la imagen de cabecera más grande*/
	.cabecera {width: 98%; height: 115px; /*border: solid 2px #f00;*/  margin: 0px auto;
		background-image: url("../fondos/Tira_900x120pixel_opacidad80.png");
		background-repeat: no-repeat;
		background-position: 50% 50%;
		}
 footer {
/*background-color: #FB7735;*/
background-image: url("../fondos/naranja_5x5px_opacidad-50.png");
padding: 0px;
}
	.de-1200pixel { display: inherit !Important; }
	ul.menu1 li a {font-size: 1.15em;}
	.cuadro-mapas { margin: 10px auto;
				width: 780px;}
}

.de-1200pixel {width: 1200px; border: solid 5px #aa0000; font-size: 0.85em; color: #707070; padding:2px; margin: 0 auto;text-align:center; /*height: 20px;*/ /*float: left;*/  /*background-color: #FF00ff;*/}
.de-1024pixel {width: 1024px; border: solid 4px #00ff00; font-size: 1.0em; color: #707070; padding:2px; margin: 0 auto;text-align:center; /*height: 20px;*/ /*float: left;*/ /* background-color: #FFff00;*/}
.de-768pixel {width: 768px; border: solid 3px #6495ED; font-size: 0.90em; color: #404040; padding:2px; margin: 0 auto;text-align:center; /*height: 20px;*/ /*float: left;*/ /*background-color: #22aadd;*/}
.de-480pixel {width: 480px; border: solid 2px #FFA07A; font-size: 0.7em; color: #303030; padding:2px; margin: 0 auto;text-align:center; /*height: 20px;*/ /*float: left;*/ /* background-color: #00ff00;*/}
.de-320pixel {width: 320px; border: solid 2px #00FFFF; font-size: 0.55em; color: #101010; padding:2px; margin: 0 auto;text-align:center; /*height: 20px;*/ /*float: left;*/ /* background-color: #FF6655;*/}
/*los div que indican con cuadros el tamaño en ancho que uso, los he centrado mediante margin y quitando el float */
.de-1200pixel {display:none;}
.de-1024pixel {display:none;}
.de-768pixel {display:none;}
.de-480pixel {display:none;}
.de-320pixel {display:none;}

.anterior-siguiente {display:none;}

.de-800pixel {width: 796px; border: solid 2px #DE95ED; font-size: 0.90em; color: #404040; padding:1px; margin: 0 auto;text-align:center; display: block; /*height: 20px;*/ /*float: left;*/ /*background-color: #22aadd;*/ }
.de-800pixel {display:none;}

/* Para el menú vertical u horizontal */
/*Sacado del fichero css contenido en:  /home/jorge/Documentos/Pagina-web_Jorge/Pagina-Web_Pruebas-Menus/Menu-h (y v)/menu v y h/estilo-0.css*/

/* Para un acho de pantalla mayor de 769px*/
@media screen and (min-width: 769px) {
	.junto-al-menu {
		width: 75%;
		float: left;
		background-color: #bcd;
		margin: 10px 0.35% 10px 0.6%;
	}

	.menu {
		width: 23%;
		float: right;
		background-color: #444;
		margin: 10px 0.4% 10px 0.4%;
	}

	ul.menu1 {width: 98%; list-style: none;
	 text-align: center; /*text-shadow: 2px 2px 4px red;*/ padding:0;}  /*text-shadow hace que se vea el texto con sombra, lo quito*/

	ul.menu1 li {padding: 10px 0px; border: groove blue;
	border-width: 6px 6px 6px 6px; background-color: #F7FE2E;}

	ul.menu1 li a:link, ul.menu1 li a:visited { text-decoration: none; color:black;}
	ul.menu1 li:hover {background-color: #FFD700; }
	ul.menu1 li a {font-size: 1.1em;}
	.email {  width: 250px;} /* Para el ancho de la imagen que da el email*/
	.icono { width: 6%;} /* Para el ancho de una imagen quesea como un icono pequeño (por ejemplo el gesto de me gusta*/
}

/* Para un acho de pantalla menor de 650px*/
@media screen and (max-width: 768px) {
	.menu {
		width: 98%;
		background-color: #444;
		margin: 0 auto;
	}

	ul.menu1 { list-style: none;  text-align: center; /*text-shadow: 2px 2px 4px red;*/ padding:0; }

	ul.menu1 li {width: 15%; padding: 10px 0px; border: groove blue;
	border-width: 4px 2px 4px 1px; background-color: #F7FE77; float:left;}

	ul.menu1 li a:link, ul.menu1 li a:visited { text-decoration: none; color:: #FC44FC;}
	ul.menu1 li:hover {background-color: #FCF43C;}
	/*ul.menu1 li a {font-size: 0.75em};*/
	   /* En los casos de pantalla de menosde 650px, les pongo un tamaño de letra diferente en cada caso y no uno igual para todos*/
	.siguiente-menos-de-678 {padding:0; border-style:none; clear:both; height: 1px;}
	.email { width: 170px;} /* Para el ancho de la imagen que da el email*/
.icono { width: 10%;} /* Para el ancho de una imagen quesea como un icono pequeño (por ejemplo el gesto de me gusta*/
}

/* Para la imágenes - fotos */
/* Las fotos tienen 1440px en su lado mayor, por lo que he cambiado los datos para un ancho de pantalla menor o mayor de 1446px */

/* Aunque por ahora lo dejo en ancho de pantalla menor o mayor de 1250px*/
/* Para un acho de pantalla menor de 1446px*/

@media screen and (max-width: 1250px) {
	.foto_h li {
		width: 96%;} /* Ancho del marco que contiene a la foto horizontal*/
	img.ancho {width: 98%;}   /* Ancho de la foto (para las horizontales)*/
	img.ancho-1 {width: 90%;}   /* Ancho de la foto  (para las horizontales que son algo más altas que las de mi cámara)*/
	img.ancho-2 {width: 84%;}   /* Ancho de la foto (para las horizontales de la tablet de Abelardo, su tamaño es 1440x1080 px, frente a 1440x954 px de las de mi cámara)*/

	.foto_v li {
		width: 80%;}
	img.alto {width: 96%;}    /* Alto de la foto (para las verticales)*/
	img.alto-victoria {width: 94%;}   /* Alto de la foto (para las verticales de la cámara Sony)*/
	img.alto-1 {width: 65%;}   /* Alto de la foto (para una vertical de 655x1440, que es un 31% menor que 954)*/
	img.alto-2 {width: 75%;}   /* Alto de la foto (para una vertical de 810x1440, que es un 15% menor que 954)*/


	.foto_v2 li {
		width: 88%;}	/* Alto del marco (para las verticales que tienen bastante texto en el pie de foto, pongo el marco más ancho y el texto cabe mejor)*/
	img.alto {width: 96%;}    /* Alto de la foto*/
	img.alto-victoria {width: 94%;}   /* Alto de la foto (para las verticales de la cámara Sony)*/
	img.alto-1 {width: 65%;}   /* Alto de la foto (para una vertical de 655x1440, que es un 31% menor que 954)*/
	img.alto-2 {width: 75%;}   /* Alto de la foto (para una vertical de 810x1440, que es un 15% menor que 954)*/
	
	}

/* Para un acho de pantalla mayor de 1446px*/
/* Un acho de foto de 1440px, para mi ordenador y pantalla parece demasiado, lo voy a rebajar a 1200px*/
/* Para lo que pongo el acho de pantalla en menor o mayor de 1250px*/

@media screen and (min-width: 1251px) {
	.foto_h li {
		width: 1250px;} /* Ancho del marco que contiene a la foto horizontal*/
	img.ancho {width: 96%;}   /* Ancho de la foto (para las horizontales)*/
	img.ancho-1 {width: 90%;}   /* Ancho de la foto (para las horizontales que son algo más altas que las de mi cámara)*/	
	img.ancho-2 {width: 84%;}   /* Ancho de la foto (para las horizontales de la tablet de Abelardo, su tamaño es 1440x1080 px, frente a 1440x954 px de las de mi cámara)*/
	
	.foto_v li {
		width: 795px;}
	img.alto {width: 90%;}    /* Alto de la foto (para las verticales)*/
	img.alto-victoria {width: 92%;}   /* Alto de la foto (para las verticales de la cámara Sony)*/
	img.alto-1 {width: 65%;}   /* Alto de la foto (para una vertical de 655x1440, que es un 31% menor que 954)*/
	img.alto-2 {width: 75%;}   /* Alto de la foto (para una vertical de 810x1440, que es un 15% menor que 954)*/

	.foto_v2 li {
		width: 1000px;}	/* Alto del marco (para las verticales que tienen bastante texto en el pie de foto, pongo el marco más ancho y el texto cabe mejor)*/
	img.alto {width: 90%;}    /* Alto de la foto (para las verticales)*/
	img.alto-victoria {width: 92%;}   /* Alto de la foto (para las verticales de la cámara Sony)*/
	img.alto-1 {width: 65%;}   /* Alto de la foto (para una vertical de 655x1440, que es un 31% menor que 954)*/
	img.alto-2 {width: 75%;}   /* Alto de la foto (para una vertical de 810x1440, que es un 15% menor que 954)*/

	}

/* Para que los enlaces a la foto siguiente o anterior solo aparezcan en pantallas grandes (de más de 800px de ancho) y no en pequeñas (de menos de 800px de ancho) */
/* Para un acho de pantalla menor de 800px, en este caso, no hago nada */

@media screen and (max-width: 800px) {

	}

/* Para un acho de pantalla mayor de 801px hago que se habilite la clase anterior-siguiente */

@media screen and (min-width: 801px) {
	.anterior-siguiente { display: inherit !Important; }
	.de-800pixel { display: inherit !Important; }
	}