@import url('https://fonts.googleapis.com/css2?family=ZCOOL+XiaoWei&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500&display=swap');
body {text-align:justify;margin:0;padding:0;
	font-family: 'Noto Serif SC', serif;
	line-height: 1.5;font-size: 13px;
	justify-content: center; /* Centrar horizontalmente */
	align-items: center; /* Centrar verticalmente */
	height: 100vh; /* Altura del viewport */
	}
a {text-decoration:none;
	color:black;}
	a:hover {color:#0F6D51;}
ul {list-style: none;}
h1,h2,h3,h4 {text-align:center;}
footer {font-size:14px;padding:20px 0;
	margin:0;font-family: 'Noto Serif SC', serif;
	background-color:#0F6D51;color:#EAF1EF;
	text-align:center;}
button {
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
  margin: 20px;
	background-color: #38839B;
	color:white;
	border-radius: 20px;
	border: none;
}

button:hover {
    background-color: #0F6D51; /* Change the background color on hover */
}



.header-title {padding:20px;margin:0;
	background-color:#4790d4;text-align:center;
	font-family: 'Noto Serif SC', serif;}
.menu {list-style: none;font-weight:bold;
	padding:15px;background-color:lightgray;
	text-align:center;}
.content {padding:10px 60px 20px 00px;text-align: center;
	column-count:1;}

@media only screen and (max-width: 600px) {
		body {font-size: 12px}
		.content {padding:0px 60px 20px 00px;
			column-count:1;}
		.columna2 {padding-top:10px;margin-top:10px;}
	}

.content2 {padding:0 20px 20px 20px;
	column-count:1;}
.anunciohome {padding:20px 0 0 0;text-align:center;font-size:13px;}
	.anunciohome img {max-height:400px;
		max-width: 100%;}
.anuncio {padding:0 0 10px 0;text-align:center;font-size:13px;}
.niveles {padding:20px 0;text-align:center;font-size:13px;column-count: 3;}
.anuncio img {max-height:400px;
	max-width: 100%;}
.anuncio2 {line-height: 1.5;padding:20px 40px;margin:0 20px;text-align: center;}
.anuncio2 ul {text-align: center;}
.anuncio2 img {max-height:500px;
	padding-bottom:20px;
	max-width: 100%;}
.anuncio3 {line-height: 1.5;padding:20px;margin:0 20px;
	text-align:justify;}
.anuncio3 img {max-height:500px;
	padding-bottom:20px;
	max-width: 100%;}
.fa {padding:0px;font-size:21px;
	text-align: center;text-decoration:none;
	color:green;}
.fotos {padding:20px;}
.fotos p {font-size:13px;}

.barra-colores {
		display: flex; /* Para alinear las secciones en una fila */
		width: 70%; /* Ancho completo de la pantalla */
		height: 20px; /* Altura de la barra */
		overflow: hidden; /* Para que los bordes redondeados se apliquen bien */
    margin: auto; /* Centra horizontalmente la barra */
					}
.color {
		flex: 1; /* Cada sección ocupará el mismo ancho */
		height: 100%;
}


.lightbox-gallery {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
}

.lightbox-gallery div > img {
  max-width: 100%;
  display: block;
}

.lightbox-gallery div {
  margin: 10px;
  flex-basis: 180px;
}

@media only screen and (max-width: 480px) {
  .lightbox-gallery {
    flex-direction: column;
    align-items: center;
  }

  .lightbox > div {
    margin-bottom: 10px;
  }
}

/*Lighbox CSS*/

.lightbox {
  display: none;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 20;
  padding-top: 30px;
  box-sizing: border-box;
}

.lightbox img {
  display: block;
  margin: auto;
}

.lightbox .caption {
  margin: 15px auto;
  width: 50%;
  text-align: center;
  font-size: 1em;
  line-height: 1.5;
  font-weight: 700;
  color: #eee;
}

.github-link {
  font-size: 18px;
  color: rgba(255, 255, 255, 0.7);
}

.github-link:hover,
.github-link:active,
.github-link:visited {
  color: #fff;
  text-decoration: none;
}

.row > .column {
			  padding: 0 8px;
			}

			.row:after {
			  content: "";
			  display: table;
			  clear: both;
			}

			/* Create four equal columns that floats next to eachother */
			.column {
			  float: left;
			  width: 25%;
			}

			/* The Modal (background) */
			.modal {
			  display: none;
			  position: fixed;
			  z-index: 1;
			  padding-top: 100px;
			  left: 0;
			  top: 0;
			  width: 100%;
			  height: 100%;
			  overflow: auto;
			  background-color: black;
			}

			/* Modal Content */
			.modal-content {
			  position: relative;
			  background-color: #fefefe;
			  margin: auto;
			  padding: 0;
			  width: 90%;
			  max-width: 1200px;
			}

			/* The Close Button */
			.close {
			  color: white;
			  position: absolute;
			  top: 10px;
			  right: 25px;
			  font-size: 30px;
			  font-weight: bold;
			}

			.close:hover,
			.close:focus {
			  color: #999;
			  text-decoration: none;
			  cursor: pointer;
			}

			/* Hide the slides by default */
			.mySlides {
			  display: none;background-color:black;text-align:center;
			}

			/* Next & previous buttons */
			.prev,
			.next {
			  cursor: pointer;
			  position: absolute;
			  top: -40px;
			  width: auto;
			  padding: 20px;
			  margin-top: -40px;
			  color: white;
			  font-weight: bold;
			  font-size: 20px;
			  transition: 0.6s ease;
			  border-radius: 0 3px 3px 0;
			  user-select: none;
			  -webkit-user-select: none;
			}

			/* Position the "prev button" to the tight */
			.prev {
			  right: 60%;
			  border-radius: 3px 3px 0 0 0;
			}
			/* Position the "next button" to the left */
			.next {
			  left:60%;
			  border-radius: 3px 0 0 3px;
			}


			/* On hover, add a black background color with a little bit see-through */
			.prev:hover,
			.next:hover {
			  background-color: gray;
			}

			/* Number text (1/3 etc) */
			.numbertext {
			  color: #f2f2f2;
			  font-size: 12px;
			  padding: 8px 12px;
			  position: absolute;
			  top: 0;
			}

			/* Caption text */
			.caption-container {
			  text-align: center;
			  background-color: black;
			  padding: 2px 16px;
			  color: white;
			}

			img.demo {
			  opacity: 0.6;
			}

			.active,
			.demo:hover {
			  opacity: 1;
			}

			img.hover-shadow {
			  transition: 0.3s;
			}

			.hover-shadow:hover {
			  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
			}


			@media only screen and (max-width:1000px){/*if it is 1000px change the font to 12 pt and so on for each resolution you need.*/
		  .content{font-size:12pt!important;}
		  }
		  @media only screen and (max-width:800px){/*if it is 800px change the font to 11 pt and so on for each resolution you need.*/
		  .content{font-size:11pt!important;}
		  }
		  @media only screen and (max-width:600px){
		  .content{font-size:10pt!important;}
		  }
		  @media only screen and (max-width:400px){
		  .content{font-size:9pt!important;}
		  }
		  @media only screen and (max-width:200px){
		  .content{font-size:8pt!important;}
		  }


			.niveles {
			  display: flex;
			  flex-wrap: wrap;
			  justify-content: center;
			  gap: 30px;
			  padding: 20px;
			}

			.nivel {
			  width: 250px;
			  text-align: center;
			  padding: 10px;
			  border-radius: 12px;
			  background-color: #f9f9f9; /* opcional */
			  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* opcional */
			}

			.nivel img {
			  max-width: 30%;
			  height: auto;
			}

			@media screen and (max-width: 600px) {
			  .nivel {
			    width: 90%;
			  }
			}
			.cuadro-color {
			  display: inline-block;
			  width: 16px;
			  height: 16px;
			  margin-left: 8px;
			  border-radius: 3px;
			  vertical-align: middle;
			  border: 1px solid #aaa;
			}

			.color1 { background-color: #8df1da; } /* verde menta */
			.color2 { background-color: #529537; } /* verde claro */
			.color3 { background-color: #1b3e90; } /* azul */
			.color4 { background-color: #b6b6b6; } /* girs */
			.color5 { background-color: #ffffff; } /* blanco */
			.color6 { background-color: black; } /* negro */

			/* 16 colores personalizados */
			.colorcin1 { background-color: #c5c3b9; }  /* gris */
			.colorcin2 { background-color: #8df1da; }  /* Verde menta */
			.colorcin3 { background-color: #529537; }  /* Verde claro */
			.colorcin4 { background-color: #1b3e90; }  /* Azul */
			.colorcin5 { background-color: #FFFFFF; }  /* Blanco */
			.colorun1 { background-color: #10300a; }  /* Verde oscuro */
			.colorun2 { background-color: #ff813a; }  /* Naranja */
			.colorun3 { background-color: #4790d4; }  /* Azul claro */
			.colorun4 { background-color: #654d96; }  /* Morado oscuro */
			.colorun5 { background-color: #84592e; }  /* Café */
			.colorun6 { background-color: #1c1c1c; }  /* Gris oscuro */
			.colorun7 { background-color: #FFFFFF; }  /* Gris oscuro */
			.color17 { background-color: #000000; }  /* Negro */