@font-face {
	font-family: "simple";
	src: url("../red_hat_text/RedHatText-VariableFont_wght.ttf")
		format("truetype");
	font-weight: 100 900;
}

@font-face {
	font-family: "firasans";
	font-style: normal;
	font-weight: normal;
	src: url("../fira_sans_condensed/FiraSansCondensed-Regular.ttf")
		format("truetype");
}

body {
	background-color: white;
	padding: 0px;
	color: #434445;
	font-family: "simple", "Franklin Gothic Medium", "Arial Narrow", Arial,
		sans-serif;
	font-size: 10px;
}

#topcover {
	width: 100%;
}

#topcover img {
	width: 100%;
	height: auto;
	object-fit: cover;
}

.yellowfield {
	background-color: gold;
	/*background-image: url(../img/oblicuas.png);*/
	background-position: left;
	background-repeat: no-repeat;
	/*padding-bottom: 50%;*/
	padding: 1em 3em 1em 3em;
	border-radius: 1em;
}

.h1recta {
	font-family: "firasans";
	font-size: 6em;
	text-align: left;
	font-weight: 200;
	color: #434445;
}

.h2recta {
	font-family: "firasans";
	font-size: 4em;
	text-align: left;
	font-weight: 400;
	color: #434445;
}

.gray-field {
	box-sizing: border-box;
	margin-left: 100%;
	width: 100%;
	background-color: gainsboro;
	padding: 1em 3em 1em 3em;
	border-radius: 1em;
	transition: all 0.7s ease-in-out;
}

.gray-field.violet-field {
	margin-left: 0;
	background-color: #131813;
	
}

.gray-field.violet-field .h1recta,
.gray-field.violet-field .h2recta {
	color: white;
}

h1 {
	font-family: "simple";
	font-size: 4em;
	text-align: center;
	font-weight: 100;
	color: #444746;
}

.h1bold {
	font-family: "simple";
	font-size: 3em;
	text-align: center;
	font-weight: 400;
	color: Black;
}

.imagen-animada {
	width: 100%;
	text-align: left; /* Alinea la imagen a la derecha por defecto */
}

.imagen-animada img {
	max-height: 20vh;
	width: auto;
	opacity: 0;
	transition: all 0.7s ease-in-out;
}

.imagen-animada.move-right img {
	transform: translateX(
		calc(100vw - 100%)
	); /* Mueve el elemento hacia la derecha */
	opacity: 1;
}

.imgleftanimada.move-right {
	transform: translateX(
		calc(100vw - 100%)
	); /* Mueve el elemento hacia la derecha */
}

.imgright {
	max-height: 20vh;
	width: auto;
	float: right;
}

.home_nav_button {
	font-family: Arial, Helvetica, sans-serif;
	font-weight: normal;
	background-color: Black;
	color: White;
	font-size: calc(0.6em + 0.9vw);
	padding: 0.5em;
	border-right: 2px solid white;
	border-bottom: 2px solid white;
	border-left: 2px solid white;
	display: inline-block;
}

/* FONT-SIZE DE BOTON DE MENU */
/* RESOLUCION MAS 800 PX DE ANCHO*/
@media (min-width: 800px) {
	.home_nav_button {
		font-size: calc(0.6em + 0.9vw);
	}
}

/* FONT-SIZE DE BOTON DE MENU */
/* RESOLUCION MENOSD 800 PX DE ANCHO*/
@media (max-width: 799px) {
	.home_nav_button {
		font-size: calc(1em + 0.9vw);
	}
}

.home_nav_button:hover {
	background-color: #0065ad;
	color: White;
}

.home_mainimage {
	position: relative;
}

.home_mainimage_mobile {
	position: relative;
}

.home_iconimage {
	width: 3em;
	height: auto;
	margin-right: 2vw;
	vertical-align: middle;
}

a {
	color: inherit;
	font-weight: normal;
	text-decoration: none;
}

.destacado {
	color: steelblue;
	font-weight: bold;
	text-decoration: underline;
}

.destacado_dark {
	color: steelblue;
	font-weight: bold;
	text-decoration: underline;
}

.black_text {
	color: #303030;
}

.white_background {
	background-color: #eeeeee;
}

/* ESTILO DE IMAGENES PRINCIPALES PARA HOME */
/* RESOLUCION MAS 800 PX DE ANCHO*/
@media (min-width: 800px) {
	.home_mainimage {
		width: 100%;
		/*aspect-ratio: 16/6;*/
		object-fit: cover;
		object-position: 0 0;
		display: block;
	}

	.home_mainimage_mobile {
		display: none;
	}
}

/* ESTILO DE IMAGENES PRINCIPALES PARA HOME */
/* RESOLUCION MAS 1900 PX DE ANCHO*/
@media (min-width: 1900px) {
	.home_mainimage {
		width: 100%;
		/*aspect-ratio: 16/4;*/
	}
}

/* ESTILO DE IMAGENES PRINCIPALES PARA HOME */
/* RESOLUCION MENOS 800 PX DE ANCHO*/

@media (max-width: 799px) {
	.home_mainimage {
		display: none;
	}

	.home_mainimage_mobile {
		width: 100%;
		height: auto;
		display: block;
	}
}

/* ESTILO DE DIVS PARA TEXTOS */
/* RESOLUCION MAS 800 PX DE ANCHO*/

@media (min-width: 800px) {
	.home_text {
		margin: 5vh 0 5vh 0;
		width: 50%;
		margin-left: 45%;
		margin-right: 5%;
		font-size: calc(1em + 0.9vw);
	}
}

/* ESTILO DE DIVS PARA TEXTOS */
/* RESOLUCION MENOS 800 PX DE ANCHO*/

@media (max-width: 799px) {
	.home_text {
		margin: 7vh 0 10vh 0;
		width: 85%;
		margin-left: 13%;
		margin-right: 2%;
		font-size: calc(1em + 0.9vw);
	}
}

/* DIV PARA OTRAS PÁGINAS QUE NO SEA EL HOME */
/* O PUEDE SER EN EL HOME PERO EL ANCHO ES 90% */
/* EN TODAS LAS RESOLUCIONES */

.other_text {
	width: 90%;
	margin-left: 5%;
	margin-right: 5%;
	font-size: calc(1em + 0.9vw);
}

/* ESTILO DE SALTO DE LINEA Y OTROS ELEMENTOS */
/* QUE SE OCULTAN EN */
/* RESOLUCION MAS 800 PX DE ANCHO*/

@media (min-width: 800px) {
	.solo_celu {
		display: none;
	}
}

/* ESTILO DE SALTO DE LINEA Y OTROS ELEMENTOS */
/* QUE SE MUESTRAN EN */
/* RESOLUCION MENOS 800 PX DE ANCHO*/

@media (max-width: 799px) {
	.solo_celu {
		display: inline;
	}
}

/* ESTILO DE DIVS PARA FORMS */
/* RESOLUCION MÁS 800 PX DE ANCHO*/
@media (min-width: 800px) {
	.home_form {
		margin: 5vh 0 5vh 0;
	}
}

/* ESTILO DE DIVS PARA FORMS */
/* RESOLUCION MENOS 800 PX DE ANCHO*/
@media (max-width: 799px) {
	.home_form {
		margin: 5vh 0 5vh 0;
	}
}

input {
	font-family: "Exo", "Franklin Gothic Medium", "Arial Narrow", Arial,
		sans-serif;
	font-size: calc(0.6em + 0.9vw);
	background-color: powderblue;
	color: black;
	border: 1px solid White;
	border-radius: 0.3em;
	margin: 0.2em 0.2em 0 0;
	padding: 0.2em;
}

textarea {
	font-family: "Exo", "Franklin Gothic Medium", "Arial Narrow", Arial,
		sans-serif;
	font-size: calc(0.6em + 0.9vw);
	background-color: powderblue;
	color: black;
	border: 1px solid White;
	border-radius: 0.3em;
	margin: 0.2em 0.2em 0 0;
	width: 100%;
	height: 7em;
	padding: 0.2em;
}

@media (max-width: 799px) {
	input {
		font-size: calc(0.8em + 0.9vw);
	}

	textarea {
		font-size: calc(0.8em + 0.9vw);
	}
}

.button {
	text-decoration: none;
	border: 1px solid white;
	border-radius: 0.3em;
	cursor: pointer;
	padding: 0.2em;
	background-color: #0065ad;
	color: white;
}

.button:hover {
	border: 2px solid #0065ad;
	background-color: transparent;
	color: black;
}

/*
Esta clase podría haber tenido otro nombre pero la dejamos
así para facilitar la reutilización.
En definitiva se aplica al botón "Ir arriba" que se ubica abajo
a la derecha.
*/
.fixed-bottom-right {
	position: fixed;
	width: 6em;
	right: 1em;
	bottom: 3em;
	opacity: 0.8;
	z-index: 90;
	cursor: pointer;
}

/*
Esta clase podría haber tenido otro nombre pero la dejamos
así para facilitar la reutilización.
En definitiva se aplica a imagenes en enlaces
*/
.button {
	width: 2em;
	z-index: 90;
	cursor: pointer;
	vertical-align: middle;
}

.middle {
	vertical-align: middle;
}

.little {
	width: 1.5em;
	height: auto;
}

.home_instagram {
	padding-top: 1em;
	min-height: 200px;
	background-color: #eeeeee;
	margin: 0px 0px 0px 0px;
}

.home_footer {
	padding: 1em;
	min-height: 200px;
	background-color: powderblue;
	color: #101010;
	font-size: calc(0.7em + 0.9vw);
	margin: 0px 0px 0px 0px;
}

.home_music {
	padding: 1em;
	background-color: #022f2c;
	background-image: linear-gradient(#022f2c, #101010);
	text-align: left;
	border-radius: 1em;
}

.musiccontrolspad {
	text-align: left;
	display: flex;
}

.audiobtn {
	width: 4em;
	height: auto;
	cursor: pointer;
}

#eq {
	/*position: absolute;*/
	display: none;
	background-image: url("../img/animaflower.gif");
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	height: 4em;
	width: auto;
	margin-left: 1em;
	border-radius: 50%;
	color: red;
	text-shadow: 0 0 0.25em white;
	/*margin-top: -30px;*/
	/*margin-bottom: 5px;*/
}

.home_c {
	text-align: center;
	font-size: calc(0.7em + 0.9vw);
}

/*
ESTILOS PARA TARJETAS CON POSTS
*/

.poststitulo {
	font-size: 4em;
	font-weight: bold;
	color: #303030;
	margin-bottom: 0em;
	margin-top: 0.3em;
}

.postspace {
	padding: 0em;
}

.postcard {
	margin-bottom: 1em;
	margin-right: 1em;
	background-color: gainsboro;
	padding: 0 0.5em 0;
	border-radius: 0.4em;
	box-shadow: 0 0 0.5em gainsboro, 0 0 0.5em gray;
}

@media (max-width: 799px) {
	.postcard {
		margin-bottom: 0.5em;
		margin-right: 0.5em;
	}
}

.post_link {
	color: #202020;
	background-color: #eeeeee;
	padding: 0.2em 0.4em 0.2em 0.4em;
	margin-right: 0.5em;
	font-size: 0.7em;
	font-weight: normal;
	border-radius: 0.3em;
	box-shadow: 0 0 0.3em gray;
}

.post_tag {
	color: white;
	background-color: #202020;
	padding: 0.1em 0.3em 0.1em 0.3em;
	font-size: 0.6em;
	border-radius: 0.2em;
	line-height: 1.5em;
	cursor: pointer;
}

.post_tag a:link {
	color: white;
	font-weight: normal;
}

.post_tag a:visited {
	color: white;
	font-weight: normal;
}

.post_division {
	color: white;
	background-color: #002200;
	padding: 0.1em 0.3em 0.1em 0.3em;
	font-size: 0.6em;
	border-radius: 0.2em;
	line-height: 1.5em;
	cursor: pointer;
}

.post_division a:link {
	color: white;
	font-weight: normal;
}

.post_division a:visited {
	color: white;
	font-weight: normal;
}

.post_tag_nopublic {
	color: white;
	background-color: orangered;
	padding: 0.1em 0.3em 0.1em 0.3em;
	font-size: 0.6em;
	border-radius: 0.2em;
	line-height: 1.5em;
	cursor: pointer;
}

.post_jerarquia_division {
	color: #404040;
	background-color: silver;
	padding: 0.1em 0.3em 0.1em 0.3em;
	font-size: 0.6em;
	border-radius: 0.2em;
	line-height: 1.5em;
}

/*
ESTILO PARA LAS IMAGENES CUANDO SE MUESTRAN VARIAS
PUBLICACIONES EN FORMA DE TARJETA
*/
.postimage {
	height: fit-content;
	width: 8em;
	margin: 0 1em 0 0;
	float: left;
	border: 2px solid steelblue;
	border-radius: 0.5em;
}

/*
ESTILO PARA LAS IMAGENES CUANDO SE MUESTRA UNA
SOLA PUBLICACIÓN A PANTALLA COMPLETA
*/

/*
.onepostimage {
  padding: 0 2em 0.5em 0;
  float: left;
  border-radius: 0.5em;
}
*/

@media (min-width: 800px) {
	.onepostimage {
		max-width: 40%;
	}
}

@media (max-width: 799px) {
	.onepostimage {
		width: 100%;
	}
}

/*
.postcard p {
  text-align: justify;
  font-weight: normal;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  color: #202020;
  font-size: 0.8em;
}
*/

.postcard p a {
	color: #0065ad;
}

/*
.post_date {
  color: #606060;
  font-size: 0.8em;
}
*/

.allpubcontainer {
	display: flex;
	justify-content: left;
	flex-wrap: wrap;
	gap: 16px;
}

@media (min-width: 800px) {
	.allpub {
		width: 28%;
		flex-direction: column;
		justify-content: space-between;
	}
}

@media (max-width: 799px) {
	.allpub {
		width: 100%;
		flex-direction: column;
		justify-content: space-between;
	}
}

/* FUENTE DE POSTS EN PANTALLAS PORTATILES */
@media (max-width: 799px) {
	.post_link {
		font-size: 1em;
	}

	.post_tag {
		font-size: 1em;
	}

	.post_tag_nopublic {
		font-size: 1em;
	}

	.post_jerarquia_division {
		font-size: 1em;
	}

	.post_image {
		width: 10em;
	}

	.postcard p {
		font-family: Arial, Helvetica, sans-serif;
		font-size: 1.2 em;
		line-height: 0;
	}

	.post_date {
		font-size: 1em;
	}
}

/* ESTILOS PAGINA DE TODAS LAS PUBLICACIONES */

/*
Recuadro conteniendo enlaces a cada entrada
*/
.allpub_card {
	display: flex;
	align-items: center;
	background-color: powderblue;
	border-radius: 0.5em;
	padding: 0 0.5em 0 0.5em;
	margin: 0.5em;
	color: black;
	font-family: Arial, Helvetica, sans-serif;
}

/*
ESTILOS PARA EL PANEL QUE MUESTRA ARCHIVOS ADJUNTOS
*/
.filesector {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 0.8em;
}

.filesector_resource_name {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 0.8em;
	line-height: 0;
}

.filesector_notes {
	color: black;
	margin-left: 3em;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 0.5em;
	padding-left: 0.5em;
}

@media (max-width: 799px) {
	.filesector {
		font-size: 1.2em;
	}

	.filesector_resource_name {
		font-size: 1.2em;
	}

	.filesector_notes {
		font-size: 1.2em;
	}
}