/*
	Colours:
		- #112948
		- #F39B31
		- #3797CE
*/

@font-face {
	font-family: FuturaStdLight;
	src: url(Futura\ Std\ Light/Futura\ Std\ Light.otf);
}

/*
	This next rule affects the entire webpage
*/
* {
	font-family: FuturaStdLight;
}

p {
	font-size: 18px;
}

html,
body {
	width: 100%;
	height: 100%;
	margin: 0;
}

.logo {
	width: 100%;
	max-width: 500px;
	display: block;
	margin-left: auto;
	margin-right: auto;
}

/***************************** Main content style *******************************/
.main_text {
	float: left;
	background-color: rgba(221, 221, 221, 0.603);
	border-radius: 10px;
	width: 70%;
	position: relative;
	left: 20px;
	padding: 5px;
	margin-bottom: 15px;
	overflow: auto;
	/* margin-right: 10px; */
}

.main_text img {
	width: 90%;
	max-width: 500px;
	display: block;
	margin-left: auto;
	margin-right: auto;
	padding: 10px;
	border-radius: 20px;
}

.main_text video {
	display: block;
	margin-left: auto;
	margin-right: auto;
	padding: 10px;
	border-radius: 20px;
}

.main_text #bold {
	font-weight: bold;
}

.main_text h1 a {
	text-decoration: none;
	color: black;
}

.main_text h2 {
	font-size: 24px;
}

.main_text h3 {
	font-size: 20px;
}

.main_text ul {
	font-size: 18px;
}

.text-link {
	text-decoration: none;
	/* Elimina el subrayado */
	color: inherit;
	/* Usa el color del texto circundante */
	cursor: pointer;
	/* Asegura que el cursor cambie al pasar sobre el texto */
}

.text-link:hover {
	text-decoration: underline;
	/* Opcional: subrayado al pasar el ratón */
}

.faq-title {
	font-size: 1.8em;
	margin-bottom: 20px;
	color: #333;
}

.faq-question {
	cursor: pointer;
	margin: 10px 0;
	font-size: 1.2em;
	display: flex;
	align-items: center;
	/* color: #0056b3; */
}

.faq-question .arrow {
	margin-right: 10px;
	font-size: 0.7em;
}

.faq .faq-title h2 {
	font-size: 24px;
}

.faq .faq-title h3 {
	font-size: 20px;
}

/* .faq-question:hover {
	font-style: ;
} */

.faq-answer {
	max-height: 0;
	/* Oculta las respuestas por defecto */
	overflow: hidden;
	transition: max-height 0.3s ease;
	/* Animación suave */
	margin-left: 20px;
	font-size: 1em;
	color: #333;
}

@media only screen and (max-width: 1112px) {
	.main_text {
		/* float: left; */
		flex-basis: 100%;
		background-color: rgba(221, 221, 221, 0.603);
		border-radius: 10px;
		width: 90%;
		position: relative;
		left: 4.5%;
		padding: 10px;
		margin-bottom: 15px;
		overflow: auto;
	}
}

/***************************** Main content style *******************************/
/***************************** Sidebar style *******************************/

.sidebar {
	float: left;
	background-color: rgba(221, 221, 221, 0.603);
	border-radius: 10px;
	width: 23%;
	position: relative;
	left: 3%;
	padding: 10px;
	margin-bottom: 15px;
	overflow: auto;
}

.sidebar img {
	width: 90%;
	max-width: 500px;
	display: block;
	margin-left: auto;
	margin-right: auto;
	padding: 10px;
}

.sidebar .press h2 a {
	text-decoration: none;
	color: black;
}

.sidebar .press h2:hover a {
	text-decoration: underline;
}

.sidebar .press img {
	width: 100%;
	margin: 0;
	padding: 0;
}

@media only screen and (max-width: 1112px) {
	.sidebar {
		flex-basis: 100%;
		background-color: rgba(221, 221, 221, 0.603);
		border-radius: 10px;
		width: 90%;
		position: relative;
		left: 4.4%;
		padding: 10px;
		margin-bottom: 15px;
		overflow: auto;
		overflow-x: hidden;
	}

	.sidebar iframe {
		display: block;
		margin: 0 auto;
	}

	.sidebar .press h2 a {
		text-decoration: none;
		color: black;
	}

	.sidebar .press h2:hover a {
		text-decoration: underline;
	}

	.sidebar .press img {
		width: 100%;
		margin: 0;
		padding: 0;
		display: block;
		margin-left: auto;
		margin-right: auto;
	}
}

@media only screen and (max-width: 414px) {
	.sidebar iframe {
		position: relative;
		left: 0;
	}
}

/***************************** Sidebar style *******************************/
/***************************** Footer style *******************************/

footer {
	background-color: #111111;
	color: #ffffff;
	margin-bottom: 0;
	padding-bottom: 20px;
	overflow: auto;
	width: 100%;
}

footer .facebook,
footer .contact,
footer .british_full {
	float: left;
	overflow: auto;
	margin-left: 20px;
	margin-right: 20px;
	width: 28%;
	text-align: center;
}

footer .facebook {
	margin-left: 5%;
}

footer .facebook h2,
footer .contact h2,
footer .british_full h2 {
	margin-bottom: 0.5%;
	text-align: left;
}

footer .facebook hr,
footer .contact hr,
footer .british_full hr {
	/* width: 100%; */
	height: 0.5%;
	color: #eeeeee;
}

footer .contact a {
	color: #ffffff;
	text-decoration: none;
}

footer .contact a:hover {
	text-decoration: underline;
}

footer .contact form input {
	width: 70%;
	margin-top: 10px;
	margin-bottom: 10px;
}

footer .contact form button {
	width: 50%;
	height: 30px;
	margin-top: 10px;
	margin-bottom: 10px;
}

footer .british_full a img {
	width: 40%;
}

.creditos {
	background-color: #111111;
	color: #fff;
	padding-bottom: 5px;
	font-size: 15px;
	text-align: center;
}

.creditos a {
	text-decoration: none;
	color: #fff;
}

.creditos a:hover {
	text-decoration: underline;
}

@media only screen and (max-width: 1112px) {
	footer {
		display: none;
	}

	.creditos {
		display: none;
	}
}

/***************************** Footer style *******************************/
/***************************** Navigation bar style *******************************/

.nav_header {
	border: 0;
	border-collapse: collapse;
	background-color: #112948;
	height: 70px;
	margin-bottom: 0;
}

.nav_header .nav_list {
	list-style-type: none;
	padding-left: 0;
	margin-bottom: 0;
	height: 100%;
}

.nav_header .nav_list #nav_container {
	height: 100%;
	width: 90%;
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.nav_header .nav_list #nav_container .nav_page {
	padding: 10px;
	float: left;
	text-align: center;
	height: 71%;
	width: 18%;
	margin: auto;
}

.nav_header .nav_list #nav_container .nav_current {
	padding: 10px;
	float: left;
	text-align: center;
	height: 71%;
	width: 18%;
	margin: auto;
	background-color: #3797CE;
}

.nav_header .nav_list .nav_icon {
	display: none;
}

.nav_header .nav_list #nav_container .nav_page .nav_text {
	color: #F39B31;
	font-size: 23px;
	text-decoration: none;
	position: relative;
	top: 10px;
}

.nav_header .nav_list #nav_container .nav_current .nav_text {
	color: #F39B31;
	font-size: 23px;
	text-decoration: none;
	position: relative;
	top: 10px;
}

.nav_header .nav_list #nav_container .nav_page:hover {
	background-color: #3797CE;
}

@media only screen and (max-width: 1112px) {
	.nav_header .nav_list #nav_container {
		width: 97%;
		position: relative;
		top: 32%;
		right: 1.5%;
		margin-left: auto;
		margin-right: auto;
		display: none;
	}

	.nav_header .nav_list #nav_container .nav_page {
		padding: 10px;
		/* float: left; */
		background-color: #112948;
		text-align: center;
		height: 71%;
		width: 100%;
		margin: auto;
	}

	.nav_header .nav_list #nav_container .nav_current {
		padding: 10px;
		/* float: left; */
		text-align: center;
		height: 71%;
		width: 100%;
		margin: auto;
		background-color: #3797CE;
	}

	.nav_header .nav_list .nav_icon {
		display: block;
		position: relative;
		top: 20%;
		left: 80%;
		width: 50px;
	}

	.nav_header .nav_list .nav_icon img {
		width: 50px;
	}
}

/***************************** Navigation bar style *******************************/
/***************************** Contact style *******************************/

.contacto {
	text-align: center;
}

.contacto a {
	color: black;
	text-decoration: none;
}

.contacto a:hover {
	text-decoration: underline;
}

/***************************** Contact style *******************************/
/***************************** Banner style *******************************/

.banner {
	position: relative;
	overflow: hidden;
	margin-top: 0;
	margin-bottom: 20px;
	width: 100%;
}

.banner .banner_text {
	z-index: 9;
	position: absolute;
	top: 45%;
	left: 5%;
	color: #ffffff;
	font-size: 64px;
}

.banner .banner_image {
	z-index: -1;
}

.banner .banner_image img {
	height: auto;
	width: 100%;
}

@media only screen and (max-width: 1112px) {
	.banner .banner_text {
		font-size: 11vmin;
	}
}

/***************************** Banner style *******************************/
/***************************** Album style *******************************/

blockquote {
	position: relative;
	left: 30%;
}

/***************************** Album style *******************************/
/***************************** Cookies style *******************************/

/* Styles for the Cookie Consent Banner */
#cookieConsentBanner {
	/* Positioning and Layout */
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	display: none;
	/* Initially hidden, JS will change this to 'flex' */
	align-items: center;
	justify-content: center;
	z-index: 50;

	/* Appearance */
	background-color: #112948;
	/* bg-cookie-banner-bg */
	color: #F39B31;
	/* text-cookie-banner-text */
	padding: 1rem;
	/* p-4 */
	box-sizing: border-box;
	/* Include padding in width */
}

/* Style for the text span inside the banner */
#cookieConsentBanner span {
	margin-right: 1rem;
	/* mr-4 */
	text-align: center;
	/* Apply left align on larger screens if needed */
	/* @media (min-width: 768px) { text-align: left; } */
}

/* Styles for the Accept Button */
#acceptCookieButton {
	/* Appearance */
	background-color: #3797CE;
	/* bg-cookie-button-bg */
	color: white;
	/* text-white */
	font-weight: bold;
	/* font-bold */
	padding: 0.5rem 1rem;
	/* py-2 px-4 */
	border: none;
	/* Remove default border */
	border-radius: 0.25rem;
	/* rounded */
	cursor: pointer;
	/* Indicate it's clickable */

	/* Transitions */
	transition: background-color 0.3s ease;
	/* transition duration-300 */
}

/* Hover effect for the button */
#acceptCookieButton:hover {
	background-color: #2a80b9;
	/* Slightly darker shade for hover, similar to hover:bg-blue-600 */
}

/***************************** Cookies style *******************************/
/***************************** Moon phase style *******************************/

.moon-calendar-container {
	max-width: 50rem; /* Equivalent to max-w-2xl */
	margin-left: auto;
	margin-right: auto;
	background-color: #112948; /* Equivalent to bg-gray-800 */
	border-radius: 0.5rem; /* Equivalent to rounded-lg */
	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* Equivalent to shadow-lg */
	padding: 0.5rem; /* Equivalent to p-6 */
	margin-top: 1rem; /* Added margin to separate from heading */
}

.moon-calendar-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 1.5rem; /* Equivalent to mb-6 */
}

.moon-calendar-header h2 {
	font-size: 1.25rem; /* Equivalent to text-xl */
	font-weight: 600; /* Equivalent to font-semibold */
	color: #E5E7EB; /* Ensure header text is visible on dark background */
}

.moon-nav-button {
	padding: 0.5rem 1rem; /* Equivalent to px-4 py-2 */
	background-color: #3797CE; /* Equivalent to bg-gray-700 */
	color: #D1D5DB; /* Equivalent to text-gray-200 */
	border-radius: 0.375rem; /* Equivalent to rounded-md */
	border: none;
	cursor: pointer;
	transition: background-color 0.2s ease-in-out;
}

.moon-nav-button:hover {
	background-color: #2a78a4; /* Equivalent to hover:bg-gray-600 */
}

.moon-nav-button:focus {
	outline: none;
	box-shadow: 0 0 0 2px rgba(107, 114, 128, 0.5); /* Equivalent to focus:ring-2 focus:ring-gray-500 */
}

.moon-weekdays {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 0.5rem; /* Equivalent to gap-2 */
	text-align: center;
	font-size: 0.875rem; /* Equivalent to text-sm */
	font-weight: 500; /* Equivalent to font-medium */
	color: #9CA3AF; /* Equivalent to text-gray-400 */
	margin-bottom: 1rem; /* Equivalent to mb-4 */
}

.moon-calendar-grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 0.5rem; /* Equivalent to gap-2 */
}

.moon-day-cell {
	padding: -2.3rem; /*Reduced padding*/
	border: 1px solid #374151; /* Equivalent to border border-gray-700 */
	border-radius: 0.375rem; /* Equivalent to rounded-md */
	display: flex;
	flex-direction: column;
	align-items: center; /* Centers items horizontally in a column */
	justify-content: center; /* Centers items vertically in a column */
	color: #D1D5DB; /* Equivalent to text-gray-300 */
	min-height: 60px; /* Slightly increased minimum height */
	/* min-width: 40px; */
}

.moon-day-cell .day-number {
	font-size: 0.75rem; /* Slightly reduced font size */
	font-weight: 700; /* Equivalent to font-bold */
	margin-bottom: 0.1rem; /* Reduced margin */
}

/* Custom styles for the moon phase images */
.moon-phase-image {
	width: 100%; /* Make image width relative to container */
	height: auto; /* Maintain aspect ratio */
	max-width: 30px; /* Set a maximum width */
	max-height: 30px; /* Set a maximum height */
	object-fit: contain; /* Ensure image is contained without distortion */
	/* Removed margin: 0 auto; relying on parent flexbox for centering */
	display: block; /* Ensure image is block level */
	padding-right: 50px;
}

/***************************** Moon phase style *******************************/