. 		{font-family: Tahoma, sans-serif;
		}

*, *::before, *::after {
	box-sizing: border-box;
	}

img {
	max-width: 100%;
	height: auto;
	}

header	{background-image:
			linear-gradient(rgba(117, 231, 255, 0.2), rgba(34, 45, 255, 0.3)),
			url("pics/kid.jpg");
		background-size: 100%;
		background-position: 0px 25%;		
		font-size: 45px;
		color: white;
		text-shadow: 1px 1px 20px black;
		text-align: center;
		padding: 100px;
		font-weight: bold;
		margin-bottom: 5px;
		}

footer 	{background-color: #cce6ff;
		text-align: center;
		padding: 15px;
		
		}

nav 	{position: sticky;
		top: 0;
		z-index: 1000;
		}

#menu  {
		list-style-type: none;
		margin: 0px;
		padding-top: 25px;
		padding-bottom: 25px;
		padding-left: 15%;
		padding-right: 15%;
		display: flex;
		justify-content: space-between;
		font-size: 20px;
		background-color: aliceblue;
		border-top: 3px indigo double;
		border-bottom: 3px indigo double;
		}

nav a	{text-decoration: none;
		color: indigo;
		}

nav a:visited {color: indigo;}

nav a:hover {text-shadow: 1px 1px 20px skyblue;
			font-weight: bold;
			color: indigo;
			}

nav a:active {text-shadow: 1px 1px 20px skyblue;
			 font-weight: bold;
			 color: lightskyblue;
			 }

#menu li:hover ul 	{display: block;
					padding: 20px;
					}

#menu ul 	{list-style-type: none;
			display: none;
			position: absolute;
			border-left: 3px lightblue double;
			background-color: aliceblue;
			}

/*effects of the images/buttons in the route page*/

figure a {
    position: relative;
    display: inline-block;
}

figure a img {
    display: block;
    transition: opacity 0.3s ease;
}

figure a:hover img {
    opacity: 0.3;
}

.explore {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: aliceblue;
    color: indigo;
    border: 2px indigo double;
    padding: 8px 16px;
    font-size: 20px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

figure a:hover .explore {
    opacity: 1;
}

/*effects of the images/buttons in the route page: END*/

h1		{text-align: center;
		margin-top: 10px;
		margin-bottom: 10px;
		padding: 15px;
		border-top: 3px indigo double;
		border-bottom: 3px indigo double;
		margin-left: 10%;
		margin-right: 10%;
		}

h2		{text-align: center;
		border-top: 3px #c7e3ff double;
		border-bottom: 3px #c7e3ff double;
		padding-top: 5px;
		padding-bottom: 5px;
		}

article	{text-align: justify;
		padding-left: 20px;
		padding-right: 20px;
		margin-top: 10px;
		margin-bottom: 10px;		
		background-color: #fafdff;
		}

.img_and_text 	{display: flex;
				gap: 10px;
				margin-top: 20px;
				margin-bottom: 20px;
				padding-left: 10%;
				padding-right: 10%;
				}

#text_manuscripts	{text-align: justify;
		padding-left: 20px;
		padding-right: 20px;
		margin-top: 10px;
		margin-bottom: 10px;		
		background-color: #fafdff;
		max-width: 70%;
		}

.side_img 	{max-width: 50%;
			margin: 0px;
			align-self: center;
			}

.text 	{display: flex;
		gap: 10px;
		width: 100%;
		margin-bottom: 10px;
		/*border: 1px solid blue;*/
		padding-left: 10%;
		padding-right: 10%;
		}

.text2 	{display: flex;
		gap: 10px;
		width: 100%;
		margin-bottom: 10px;
		/*border: 1px solid green;*/
		padding-left: 20%;
		padding-right: 20%;
		}

.text article 	{flex: 1;
				box-sizing: border-box;
				/*border: 1px solid red;*/
				}

/*You can set the margin property to auto to horizontally center the element within its container.*/

.text article figure 		{display: block;
									/*border: 1px solid red;*/
									text-align: center;
									}

.text article figure img {margin-bottom: 10px;}

ol {list-style-position: outside;
	padding-left: 15px;
	}
ol li {padding-left: 15px;}

#code-actas li {
	margin: 8px;
	padding: 5px;
	border-radius: 5px;
}

#adults	{padding-top: 0px;
		background-color: #fafdff;
		margin-left: 10%;
		margin-right: 10%;
		}

.members	{
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			align-items: center;
			justify-content: space-evenly;
			margin: 0px;
			}

.members div	{border: 1px #c7e3ff solid;
				margin: 10px;
				width: 350px;
				height: 275px;
				background-color: white;
				}

.members div h3	{text-align: center;}

.members div p	{text-align: justify;
				padding-left: 20px;
				padding-right: 20px;
				}

.notion {display: flex;
			padding-left: 10%;
			padding-right: 10%;
		}

.notion article {width: 40%;}

button	{font-family: Giorgia, serif;
			background-color: aliceblue;
			padding: 3%;
			font-size: 16px;
			border: 3px #c7e3ff groove;
			text-align: center;
			color: indigo;
			cursor: pointer;
			width: 90%;
			display: block;
			margin: 0 auto;
			}

.goback	{background-color: aliceblue;
			margin-left: 10%;
			margin-right: 10%;
			padding: 3%;
			font-size: 16px;
			border: 2px indigo dotted;
			text-align: center;
			color: indigo;
			}

.button {text-decoration: none;
			color: indigo;}

iframe	{width: 70%;
		height: 490px;
		padding: 20px; 
		display: block;
		border: 0;
		}

#iframe5 {
	width: 85%;
	border: 0;
	padding-top: 0px;
		}

.interactive_map 	{display: block;
					margin: 0 auto;
					height: 90vh;
					padding: 20px;
					overflow-x: visible;
					}


/* ============================
   RESPONSIVE: TABLET (<= 900px)
   ============================ */
@media screen and (max-width: 900px) {

	header {
		font-size: 32px;
		padding: 60px 20px;
		}

	#menu {
		padding-left: 20px;
		padding-right: 20px;
		font-size: 16px;
		}

	.notion {
		flex-direction: column;
		}

	.notion article {
		width: 100%;
		}

	iframe {
		width: 100%;
		}

	.members div {
		width: 100%;
		max-width: 400px;
		height: auto;
		min-height: 200px;
		}

	h1 {
		margin-left: 0;
		margin-right: 0;
		}

	.img_and_text,
	.text,
	.text2,
	.notion {
		padding-left: 20px;
		padding-right: 20px;
		}

	.goback {
		margin-left: 0;
		margin-right: 0;
		}
	}


/* ============================
   RESPONSIVE: MOBILE (<= 600px)
   ============================ */
@media screen and (max-width: 600px) {

	header {
		font-size: 24px;
		padding: 40px 15px;
		background-size: cover;
		}

	/* El menú horizontal no funciona bien en pantallas estrechas:
	   lo convertimos en una lista vertical */
	nav 	{position: static;
		}

	#menu {
		flex-direction: column;
		align-items: center;
		text-align: center;
		gap: 10px;
		padding: 15px;
		font-size: 16px;
		}

	/* Los submenús con :hover no son usables al tacto:
	   los mostramos siempre, ya insertados debajo de su padre */
	#menu ul {
		display: block;
		position: static;		
		border-left: none;
		padding: 10px 0 0 0;
		background-color: transparent;
		text-align: center;
		}

	#menu li:hover ul {
		padding: 0;
		}

	h1 {
		font-size: 22px;
		padding: 10px;
		}

	.text {
		flex-direction: column;
		}

	.img_and_text {
		flex-direction: column;
		margin-left: 0;
		margin-right: 0;
		}

	.side_img {
		max-width: 100%;
		}

	.members {
		flex-direction: column;
		}

	.members div {
		width: 100%;
		}

	article {
		padding-left: 12px;
		padding-right: 12px;
		}

	#text_manuscripts {
		max-width: 100%;
	}

	h1 {
		margin-left: 0;
		margin-right: 0;
		}

	.img_and_text,
	.text,
	.text2,
	.notion {
		padding-left: 10px;
		padding-right: 10px;
		}

	.goback {
		margin-left: 0;
		margin-right: 0;
		padding: 15px;
		}
	}