@charset 'UTF-8';
/*
Theme Name: Mulegé 2025
Version: 1.0
Author: Manuel Antonio Sandoval Valenzuela.
Description: Plantilla responsiva HTML 5, CSS3 y Javascript.
Tags: one-column, footer-widgets, threaded-comments, floating-sidebar.
*/


/**
* Hoja de estilo para el proyecto de plantilla 2025 para la página web del
* Ayuntamiento de Mulegé.
*/

/* IMPORTACIÓN DE TIPOGRAFÍAS. */
@font-face {
	font-family: 'Poppins';
	font-weight: normal;
	font-style: normal;
	font-display: swap;
	src: url('/wp-content/themes/mulege_2024/fonts/Poppins-Regular.ttf') format('truetype');
}

@font-face {
	font-family: 'Poppins';
	font-weight: 900;
	font-style: Bold;
	font-display: swap;
	src: url('/wp-content/themes/mulege_2024/fonts/Poppins-Bold.ttf') format('truetype');
}

/* ESTILOS GENERALES */

* {
	box-sizing: border-box;
}

html,
body {
	background: url('/wp-content/themes/mulege_2024/img/fondo.jpg') no-repeat fixed center / cover;
	font-family: 'Poppins', sans-serif;
	margin: 0;
	padding: 0;
	width: 100%;
}

body {
	z-index: 0;
}
	
a {
	text-decoration: none;
	color: #226ab3;
	transition: .3s;
}
	
a:hover {
	color: #f37f65;
	text-decoration: none;
}

/* ESTILOS PARA FORMULARIOS */

/* Estilos para los formularios de la página. */

form {
	padding: .5em;
}

label {
	color: #226ab3;
}

input[type='text'],
textarea {
	border: 1px solid #226ab3;
	outline: none;
	width: 100%;
}

input[type='submit'],
input[type='reset'],
button {
	border: 1px solid #226ab3;
	background-color: #226ab3;
	color: #ffffff;
	padding: .5em;
	transition: .2s;
}

input[type='submit']:hover,
input[type='reset']:hover,
button:hover {
	border: 1px solid #f37f65;
	background-color: #f37f65;
}

.enlace-boton {
	min-width: 50px;
	height: 50px;
	padding: .5em;
	color: #fff;
	background-color: #226ab3;
	text-decoration: none;
	transition: .3s;
	border-radius: 5px;
	box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
}

.enlace-boton:hover {
	background-color: #557abc;
	text-decoration: none;
	color: #fff;
}

/* ESTILOS PARA ENCABEZADO PRINCIPAL DE LA PÁGINA. */
.encabezado-principal {
	position: relative;
	z-index: 1;
	overflow: hidden;
	width: 100%;
	margin: 0;
	padding: 0;
}

.encabezado-principal::before {
	position: absolute;
	z-index: -1;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	content: '';
	opacity: .5;
	/* background: #fff; */
}

/* Estilos para el texto del encabezado. */
.encabezado-principal-texto {
	color: #1e2556;
}

.encabezado-principal-texto h1 {
	font-weight: bold;
	text-align: left;
}

.encabezado-principal-menu {
	width: 100%;
	padding: .5em;
}

.encabezado-principal-menu ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.encabezado-principal-menu ul li {
	display: inline-block;
	margin: .25em;
}

.encabezado-principal-menu ul li a {
	line-height: 2em;
	display: block;
	min-width: 2em;
	height: 2.2em;
	padding: 0 .5em;
	transition: .3s;
	text-decoration: none;
	color: #202556;
	border: 2px solid #202556;
	border-radius: 5px;
}

.encabezado-principal-menu ul li a:hover {
	color: #d7e7ed;
	background-color: #202556;
	box-shadow: 0 0 10px rgba(0, 0, 0, .5);
}

@media only screen and (min-width: 992px) {
	.encabezado-principal {
		height: 30vh;
		display: flex;
		align-items: center;
		justify-content: left;
	}

	.encabezado-principal-imagen {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 200px;
		height: 200px;
		margin-left: 2%;
	}

	.encabezado-principal-texto {
		width: 25%;
		height: 200px;
		padding-left: .5em;
		display: flex;
		align-items: center;
		justify-content: flex-start;
	}
	
	.encabezado-principal-texto h1 {
		font-size: 2.5rem;
	}	

	.encabezado-principal-menu ul {
		text-align: right;
	}
}
	
@media only screen and (min-width: 0) and (max-width: 991px) {
	.encabezado-principal {
		height: 80vh;
	}

	.encabezado-principal-imagen {
		width: 100%;
		text-align: center;
		margin-top: 4em;
	}

	.encabezado-principal-texto {
		display: block;
		width: 100%;
		text-align: center;
	}

	.encabezado-principal-texto h1 {
		font-size: 2rem;
		text-align: center;
	}

	.encabezado-principal-menu ul {
		text-align: center;
	}
}

/* ESTILOS PARA MENÚ PRINCIPAL */

#main-menu {
	visibility: hidden;
}

.menu-principal {
	position: fixed;
	z-index: 100;
	top: 0;
	background-color: #fff;
	box-shadow: 0 0 20px rgba(0, 0, 0, .5);	
}

.menu-principal ul {
	/* overflow: hidden; */
	list-style: none;
	text-align: center;
	margin: 0;
	padding: 0;
	background-color: #fff;
}

.menu-principal ul li {
	transition: .3s;
	text-transform: uppercase;
	background-color: white;
}

.menu-principal ul li:hover {
	color: #fff;
	background-color: #1e2556;
}

.menu-principal ul li a {
	display: block;
	padding: 0 .5em;
	text-decoration: none;
	color: #226ab3;
}

.menu-principal ul li a:hover {
	color: white;
}

/* Color de tipografía del enlace dentro del elemento del menú cuando un submenú ha sido desplegado. */
.menu-principal ul li:hover a,
.menu-principal ul li:focus a {
	color: #fff;
}

/* Estilos para sub menús */

/* Contenedor del submenú; en este punto, el submenú se encuentra oculto. */
.menu-principal ul li > ul {
	border-radius: 5px;
	float: left;
	height: auto;
	opacity: 0;
	overflow: hidden;
	position: absolute;
	top: 5em;
	left: auto;
	transition: .3s;
	visibility: hidden;
	z-index: 101;
}

/* Cuando el cursor del ratón pasa sobre el elemento del menú principal, el submenú se despliega. */
.menu-principal ul li:hover > ul {
  box-shadow: 0 0 20px rgba(0, 0, 0, .75);
  min-height: 10vh;
	top: 3em;
  opacity: 1;
  visibility: visible;
}

/* Elemento del submenú */
.menu-principal ul li > ul li {
	background-color: #fff;
	display: block;
	text-align: left;
}

.menu-principal ul li:hover > ul li a {
	color: #226ab3;
}

.menu-principal ul li:hover > ul li a:hover {
	color: #fff !important;
}

@media only screen and (min-width: 0) and (max-width: 991px) {
	/* .menu-logo, .menu-logo img {
		display: none;
	} */

	.menu-principal ul li > ul {
		visibility: hidden;
		display: none;
	}

	.menu-principal ul li > ul li {
		visibility: hidden;
		display: none;
	}
}

@media only screen and (min-width: 992px) {
	.menu-principal {
		width: 100%;
		min-height: 50px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.menu-principal ul {
		min-height: 50px;
		margin: 0;
		padding: 0;
	}
	
	.menu-principal ul li {
		font-size: 1rem;
		line-height: 50px;
		display: inline-block;
		height: 50px;
		margin-right: -4px;
	}

	.menu-logo {
		width: auto;
		height: 50px;
		text-align: center;
		margin: 0;
		padding: 0;
		display: inline-block;
	}
	
	.menu-logo img {
		width: auto;
		height: 50px;
	}

	.menu-button {
		display: none;
	}
}
	
@media only screen and (min-width: 768px) and (max-width: 991px) {
	.menu-principal {
		width: 50px;
		height: 50px;
		overflow: hidden;
		transition: .5s;
	}
	
	.menu-principal:hover {
		width: 90%;
		height: 90vh;
	}
	
	.menu-principal ul li {
		font-size: 1rem;
		line-height: 50px;
		height: 50px;
		margin-right: -4px;
		text-align: left;
	}
	
	.menu-button {
		float: left;
	}
	
	.menu-button button {
		width: 50px;
		height: 50px;
		border: 1px solid white;
		background-color: white;
		color: #226AB3;
	}
}
	
	@media only screen and (min-width: 576px) and (max-width: 767px) {
	.menu-principal {
		width: 50px;
		height: 50px;
		overflow: hidden;
		transition: .5s;
	}

	.menu-principal:hover {
		width: 90%;
		height: 90vh;
	}

	.menu-principal ul li {
		font-size: 1rem;
		line-height: 50px;
		height: 50px;
		text-align: left;
	}

	.menu-button {
		float: left;
	}
	
	.menu-button button {
		width: 50px;
		height: 50px;
		border: 1px solid white;
		background-color: white;
		color: #226AB3;
	}
}
	
@media only screen and (min-width: 240px) and (max-width: 575px) {
	.menu-principal {
		width: 50px;
		height: 50px;
		overflow: hidden;
		transition: .5s;
	}

	.menu-principal:hover {
		width: 90%;
		height: 90vh;
	}

	.menu-principal ul li {
		font-size: 1rem;
		line-height: 50px;
		height: 50px;
		text-align: left;
	}

	.menu-button {
		float: left;
	}

	.menu-button button {
		width: 50px;
		height: 50px;
		border: 1px solid white;
		background-color: white;
		color: #226AB3;
	}
}

/* ESTILOS PARA PÁGINA DE INICIO */

/* SECCIONES PRINCIPALES */
.home-contenido-principal {
	min-height: 100vh;
	padding: 0;
}

/* home */
.home-contenido-principal-slider,
.home-contenido-principal-botones,
.home-contenido-principal-galeria,
.home-contenido-principal-circulares,
.home-contenido-principal-boletines {
	width: 100%;
	margin: 0;
	padding: 0;
}

.home-contenido-principal-slider {
	margin-top: -50px !important;
}

.home-contenido-principal-boletines h2,
.home-contenido-principal-galeria h2,
.home-contenido-principal-circulares h2 {
	font-size: 2rem;
	font-weight: bold;
	text-align: center;
}

.home-contenido-principal-slider .slider {
	width: 100%;
	height: 100vh !important;
	color: #000;
	background-color: white;
}
	
/* SECCIÓN BOTONES */
.home-contenido-principal-botones {
	padding-bottom: 50px;
	/* background: url("/wp-content/themes/mulege_2022/img/img3.jpg") no-repeat center / cover; */
}

.home-contenido-principal-botones ul {
	position: relative;
	margin: 0;
	padding: 0;
	list-style: none;
	text-align: center;
}
	
/* Contenedor de los botones, que a la vez permite la animación de los mismos. */
.home-botones-wrapper {
	display: inline-block;
	color: #000;
	border-radius: 8px;
	/* Estilo de transformación de objeto. */
	transform-style: flat;
	/* Profundidad de la perspectiva del objeto. */
	perspective: 500px;
	/* Origen de la perspectiva del objeto. */
	perspective-origin: top left;
}

.home-botones {
	position: relative;
	padding: .5em;
	color: #202556;
	border-radius: 8px;
	background-color: #fff;
	box-shadow: 0 0 20px rgba(0, 0, 0, .5);
	justify-content: center;
	align-items: center;
}

.home-botones h3,
.home-botones-hover h3 {
	font-weight: bold;
}

.home-botones p,
.home-botones-hover p {
	line-height: 1em;
}

.home-botones-hover a {
	text-decoration: none;
}

.home-botones-hover a:hover {
	text-decoration: underline;
	text-decoration-style: dotted;
}

.home-botones-wrapper .home-botones-hover {
	position: relative;
	z-index: 4;
	display: flex;
	transition: .5s;
	transform: rotate3d(0, -90, 0, 90deg);
	opacity: 0;
	color: #fff;
	border-radius: 8px;
	background-color: #202556;
	box-shadow: 0 0 20px rgba(215, 231, 237, .75);
	justify-content: center;
	align-items: center;
}

.home-botones-wrapper:hover .home-botones-hover {
	/* Ángulo del objeto después de la animación. */
	transform: none;
	opacity: 1;
}

/* Enlaces dentro de los botones que giran. */

.home-botones-hover a {
	color: #fff;
}

.flecha-circulo {
	line-height: 60px;
	display: flex;
	width: 60px;
	height: 60px;
	margin: 0 auto;
	transition: .5s;
	text-align: center;
	border: 2px solid #fff;
	border-radius: 60px;
	justify-content: center;
	align-items: center;
}

.flecha-circulo:hover {
	transform: rotate(360deg);
	color: #202556;
	background-color: #fff;
}

.flecha-circulo a {
	display: flex;
	width: 60px;
	height: 60px;
	text-align: center;
	text-decoration: none;
	color: #fff;
	border-radius: 60px;
	align-items: center;
	justify-content: center;
}

.flecha-circulo a:hover {
	text-decoration: none;
	color: #202556;
}

@media screen and (min-width: 992px) {
	.home-contenido-principal-botones {
		min-height: 50vh;
	}

	.home-contenido-principal-botones ul {
		position: relative;
		z-index: 1;
		top: -4em;
		width: 100%;
		height: 30vh;
	}
		
	.home-botones-wrapper {
		z-index: 2;
		display: inline-block;
		width: 300px;
		height: 350px;
		margin: 0 .25em;
		color: #000;
	}
	
	.home-botones {
		z-index: 3;
		top: 0;
		display: flex;
		width: 280px;
		height: 280px;
		justify-content: center;
		align-items: center;
	}

	.home-botones h3,
	.home-botones-hover h3 {
		font-size: 1.5rem;
		line-height: 1.5em;
	}

	.home-botones-wrapper .home-botones-hover {
		top: -300px;
		width: 280px;
		height: 350px;
		padding: .5em;
	}
}

@media only screen and (min-width: 0) and (max-width: 991px) {
	.home-contenido-principal-botones {
		min-height: 100vh;
	}

	.home-contenido-principal-botones ul {
		position: relative;
		z-index: 1;
		top: 2em;
		width: 100%;
		min-height: 100vh;
	}
		
	.home-botones-wrapper {
		z-index: 2;
		display: inline-block;
		width: 230px;
		height: 200px;
		margin: 0 1em;
		padding: 0;
		color: #000;
	}
	
	.home-botones {
		z-index: 3;
		top: 0;
		display: flex;
		width: 230px;
		height: 180px;
		justify-content: center;
		align-items: center;
	}

	.home-botones h3,
	.home-botones-hover h3 {
		font-size: 1.1rem;
		line-height: 1.1em;
	}
	
	.home-botones-wrapper .home-botones-hover {
		top: -200px;
		width: 230px;
		height: 250px;
		padding: .5em;
	}
}

/* SECCIÓN DE GALERÍA */
.home-contenido-principal-galeria {
	min-height: 50vh;
	text-align: center;
	/* background: url('/wp-content/themes/mulege_2024/img/fondo_encabezado.jpg') no-repeat center / cover; */
	overflow: hidden;
}

.galeria {
	z-index: 0;
	margin: 0;
	padding: 0;
	list-style: none;
	text-align: center;
}

.galeria-elemento {
	z-index: 1;
	display: inline-block;
	border-radius: 10px;
	box-shadow: 0 0 20px rgba(0, 0, 0, .5);
}

.galeria-fondo {
	z-index: 2;
	border-radius: 10px;
}

.galeria-texto {
	position: relative;
	z-index: 3;
	display: flex;
	color: #FFFFFF;
	border-radius: 10px;
	align-items: center;
	justify-content: center;
}

.galeria-texto h3 {
	font-weight: bold;
}

@media screen and (min-width: 992px) {
	.home-contenido-principal-galeria {
		padding: 1em 0;
	}

	.galeria-elemento {
		width: 400px;
		height: 225px;
		margin: 0 .5em;
	}
	
	.galeria-elemento img {
		max-width: 400px;
		max-height: 225px;
	}
	
	.galeria-fondo {
		width: 400px;
		height: 225px;
	}
	
	.galeria-texto {
		top: -225px;
		width: 400px;
		height: 225px;
	}
	
	.galeria-texto h3 {
		font-size: 1.25rem;
		font-weight: bold;
	}
}

@media screen and (min-width: 0) and (max-width: 991px) {
	.home-contenido-principal-galeria {
		padding: 1em 0;
		margin: 0;
	}

	.galeria-elemento {
		width: 300px;
		height: 225px;
		margin: 0 .5em;
	}
	
	.galeria-elemento img {
		max-width: 300px;
		max-height: 225px;
	}
	
	.galeria-fondo {
		z-index: 2;
		width: 300px;
		height: 225px;
		border-radius: 10px;
	}
	
	.galeria-texto {
		top: -225px;
		width: 300px;
		height: 225px;
	}
	
	.galeria-texto h3 {
		font-size: 1.1rem;
		font-weight: bold;
	}
}

/* Animación de fondos */

.area {
	position: relative;
	z-index: 2;
	top: 0;
	width: 100%;
	height: 100%;
	border-radius: 10px;
	background: linear-gradient(to bottom, #aaaeff, #557abc);
	background: -webkit-linear-gradient(to bottom, #aaaeff, #557abc);
	overflow: hidden;
}

.circles {
	position: absolute;
	top: 0;
	left: 0;
	overflow: hidden;
	width: 100%;
	height: 120%;
}

.circles li {
	position: absolute;
	z-index: 3;
	bottom: 0;
	display: block;
	width: 20px;
	height: 20px;
	list-style: none;
	animation: animate 20s linear infinite;
}

.circles li:nth-child(1) {
	left: 25%;
	width: 20px;
	height: 20px;
	padding: 5px;
	animation-duration: 20s;
	animation-delay: 0s;
}

.circles li:nth-child(2) {
	left: 10%;
	width: 20px;
	height: 20px;
	animation-duration: 20s;
	animation-delay: 2s;
}

.circles li:nth-child(3) {
	left: 70%;
	width: 20px;
	height: 20px;
	animation-duration: 20s;
	animation-delay: 4s;
}

.circles li:nth-child(4) {
	left: 40%;
	width: 20px;
	height: 20px;
	animation-duration: 20s;
	animation-delay: 6s;
}

.circles li:nth-child(5) {
	left: 65%;
	width: 20px;
	height: 20px;
	animation-duration: 20s;
	animation-delay: 8s;
}

.circles li:nth-child(6) {
	left: 75%;
	width: 20px;
	height: 20px;
	animation-duration: 20s;
	animation-delay: 10s;
}

.circles li:nth-child(7) {
	left: 35%;
	width: 20px;
	height: 20px;
	animation-duration: 20s;
	animation-delay: 12s;
}

.circles li:nth-child(8) {
	left: 50%;
	width: 20px;
	height: 20px;
	animation-duration: 20s;
	animation-delay: 14s;
}

.circles li:nth-child(9) {
	left: 20%;
	width: 20px;
	height: 20px;
	animation-duration: 20s;
	animation-delay: 16s;
}

.circles li:nth-child(10) {
	left: 85%;
	width: 20px;
	height: 20px;
	animation-duration: 20s;
	animation-delay: 18s;
}

@keyframes animate {
	0% {
		transform: translateY(0) rotate(0deg);
		opacity: 1;
		border-radius: 60px;
	}

	100% {
		transform: translateY(-1000px) rotate(720deg);
		opacity: 0;
		border-radius: 60px;
	}
}

/* Sección de circulares */
.home-contenido-principal-circulares {
	padding: 2em 0;
	/* background: url("/wp-content/themes/mulege_2024/img/img2.jpg") no-repeat center / cover; */
}

.home-contenido-principal-circulares p {
	text-align: center;
}

.home-contenido-principal-circulares ul {
	margin: 0;
	padding: 0;
	list-style: none;
	text-align: center;
}

.home-contenido-principal-circulares ul li {
	display: inline-block;
	margin: 0 .5em;
}

.circular {
	overflow: hidden;
	margin: 0;
	padding: 0;
	color: #000;
	background-color: rgba(255, 255, 255, 0);
	box-shadow: 0 0 20px rgba(0, 0, 0, .5);
}

.circular h3 {
	font-weight: bold;
	text-align: center;
}

.circular iframe {
	width: 100%;
	margin: 0;
	padding: 0;
	border: none;
}

.circular a {
	display: block;
	text-decoration: none;
	color: #fff;
	background-color: #202556;
}

.circular a:hover {
	background-color: #557abc;
}

@media screen and (min-width: 992px) {
	.circular {
		width: 390px;
		height: 390px;
	}
	
	.circular h3 {
		font-size: 1.5rem;
	}
	
	.circular iframe {
		height: 340px;
	}
	
	.circular a {
		width: 100%;
		height: 50px;
		margin: -6px 0 0 0;
		padding: .5em;
	}
}

@media screen and (min-width: 0) and (max-width: 991px) {
	.circular {
		width: 90%;
		height: 320px;
	}
	
	.circular h3 {
		font-size: 1.5rem;
	}
	
	.circular iframe {
		height: 280px;
	}
	
	.circular a {
		width: 100%;
		height: 50px;
		margin: -6px 0 0 0;
		padding: .5em;
	}
}

/* ************************************************************************** */
/* SECCIÓN DE BOLETINES */
.home-contenido-principal-boletines {
	padding: 1em;
	/* background: url("/wp-content/themes/mulege_2024/img/img1.jpg") no-repeat center / cover; */
}

.home-contenido-principal-boletines h2 {
	padding-top: 1em;
	color: #226AB3;
}

.home-contenido-principal-boletines p {
	text-align: center;
	color: #226AB3;
}

.home-contenido-principal-boletines ul {
	margin: 0 auto;
	padding: 0;
	list-style: none;
	text-align: center;
}

.home-contenido-principal-boletines-articulo-texto h3 {
	font-weight: bold;
}

.home-contenido-principal-boletines-articulo-texto p {
	color: #000;
	text-align: justify;
}

@media screen and (min-width: 992px) {
	.home-contenido-principal-boletines ul {
		width: 1200px;
	}
	
	.home-contenido-principal-boletines-articulo {
		min-height: 2em;
		margin: 2em 0;
		display: inline-block;
		display: flex;
		overflow: hidden;
		color: #000;
		border-radius: 10px;
		background-color: #fff;
		box-shadow: 0 0 20px rgba(0, 0, 0, .5);
		justify-content: center;
		align-items: center;
	}
	
	/* Imagen de artículo de boletín. */
	.home-contenido-principal-boletines-articulo-imagen {
		width: 300px;
		height: 300px;
		display: flex;
		background-color: #226ab3;
		align-items: center;
		justify-content: center;
		overflow: hidden;
	}
	
	.home-contenido-principal-boletines-articulo-imagen img {
		max-width: 600px;
		max-height: 600px;
		padding: .5em;
	}
	
	/* Texto de artículo de boletín. */
	.home-contenido-principal-boletines-articulo-texto {
		width: 900px;
		min-height: 50px;
		padding: .5em;
	}
	
	.home-contenido-principal-boletines-articulo-texto h3 {
		font-size: 1.5rem;
		font-weight: bold;
	}
}

@media screen and (min-width: 0) and (max-width: 991px) {
	.home-contenido-principal-boletines ul {
		width: 90%;
		max-width: 400px;
	}
	
	.home-contenido-principal-boletines-articulo {
		min-height: 2em;
		margin: 2em 0;
		display: inline-block;
		overflow: hidden;
		color: #000;
		border-radius: 10px;
		background-color: #fff;
		box-shadow: 0 0 20px rgba(0, 0, 0, .5);
	}
	
	/* Imagen de artículo de boletín. */
	.home-contenido-principal-boletines-articulo-imagen {
		width: 100%;
		height: 100%;
		max-width: 400px;
		background-color: #226ab3;
		align-items: center;
	}
	
	.home-contenido-principal-boletines-articulo-imagen img {
		max-width: 100%;
		max-height: 100%;
		padding: 0;
	}
	
	/* Texto de artículo de boletín. */
	.home-contenido-principal-boletines-articulo-texto {
		width: 100%;
		min-height: 50px;
		padding: .5em;
	}
	
	.home-contenido-principal-boletines-articulo-texto h3 {
		font-size: 1.5rem;
		font-weight: bold;
	}
}

/* ESTILOS PARA PÁGINA DE BOLETINES */

/* Estilos para los boletines. */

.boletines-seccion-articulos ul {
	list-style: none;
	text-align: center;
}

.boletines-seccion-articulos h1 {
	text-align: center;
	font-weight: bold;
}

.boletines-seccion-articulos-extracto h3 {
	text-align: center;
	font-weight: bold;
}

.boletines-seccion-articulos-extracto p {
	text-align: justify;
}

@media screen and (min-width: 992px) {
	boletines {
		width: 100%;
		min-height: 100vh;
		margin-top: -50px;
		padding: 2em 0;
	}
	
	.boletines-seccion {
		width: 100%;
		max-width: 1200px;
		margin: 0 auto;
	}
	
	.boletines-seccion-articulos {
		width: 100%;
		margin: 0 auto;
		padding: 0;
	}
	
	.boletines-seccion-articulos ul li {
		border-radius: 10px;
		overflow: hidden;
		display: flex;
		min-height: 2em;
		margin: 2em 0;
		color: #000;
		background-color: #FFFFFF;
		box-shadow: 0 0 20px rgba(0, 0, 0, .5);
		justify-content: center;
		align-items: center;
	}
	
	.boletines-seccion-articulos h1 {
		font-size: 3rem;
		margin-top: 1em;
	}
		
	.boletines-seccion-articulos-imagen {
		display: flex;
		width: 300px;
		height: 300px;
		align-items: center;
		justify-content: center;
		background-color: #226AB3;
		overflow: hidden;
	}
	
	.boletines-seccion-articulos-imagen img {
		max-width: 600px;
		max-height: 600px;
	}
	
	.boletines-seccion-articulos-extracto {
		width: 900px;
		min-height: 50px;
		padding: .5em;
	}
	
	.boletines-seccion-articulos-extracto h3 {
		font-size: 1.5rem;
	}
}

@media screen and (min-width: 0) and (max-width: 991px) {
	boletines {
		width: 100%;
		min-height: 100vh;
		margin-top: 0;
		padding: 2em 0;
	}
	
	.boletines-seccion {
		width: 90%;
		max-width: 400px;
		margin: 0 auto;
	}
	
	.boletines-seccion-articulos {
		width: 100%;
		margin: 0 auto;
		padding: 0;
	}
	
	.boletines-seccion-articulos ul li {
		border-radius: 10px;
		overflow: hidden;
		min-height: 2em;
		margin: 2em 0;
		color: #000;
		background-color: #FFFFFF;
		box-shadow: 0 0 20px rgba(0, 0, 0, .5);
	}
	
	.boletines-seccion-articulos h1 {
		font-size: 3rem;
		margin-top: 1em;
	}
		
	.boletines-seccion-articulos-imagen {
		display: flex;
		width: 100%;
		max-width: 400px;
		height: 100%;
		max-height: 400px;
		align-items: center;
		justify-content: center;
		background-color: #226AB3;
		overflow: hidden;
	}
	
	.boletines-seccion-articulos-imagen img {
		max-width: 400px;
		max-height: 400px;
	}
	
	.boletines-seccion-articulos-extracto {
		width: 100%;
		max-width: 400px;
		min-height: 50px;
		padding: .5em;
	}
	
	.boletines-seccion-articulos-extracto h3 {
		font-size: 1.5rem;
	}
}

/* ESTILOS PARA PÁGINAS GENÉRICAS */
.pagina {
	width: 100%;
	min-height: 100vh;
	padding: 2em 0;
	margin-top: 0;
	background-color: #FFFFFF;
}

.pagina-seccion {
	width: 100%;
	max-width: 720px;
	margin: 0 auto;
	padding: 0.5em;
}

.pagina-seccion-ancha {
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0.5em;
}

.pagina-seccion-articulo h1 {
	font-weight: bold;
	text-align: center;
}

.pagina-seccion-articulo h2,
.pagina-seccion-articulo h3,
.pagina-seccion-articulo h4,
.pagina-seccion-articulo h5,
.pagina-seccion-articulo h6 {
	font-weight: bold;
	margin-bottom: 1em;
}



@media screen and (min-width: 992px) {
	.pagina-seccion-articulo h1 { font-size: 3rem; }

	.pagina-seccion-articulo h2 { font-size: 2rem; }

	.pagina-seccion-articulo h3 { font-size: 1.8rem; }

	.pagina-seccion-articulo h4 { font-size: 1.6rem; }

	.pagina-seccion-articulo h5 { font-size: 1.4rem; }

	.pagina-seccion-articulo h6 { font-size: 1.2rem; }
}

@media screen and (min-width: 0) and (max-width: 991px) {
	.pagina-seccion-articulo h1 { font-size: 2rem; }

	.pagina-seccion-articulo h2 { font-size: 1.6rem; }

	.pagina-seccion-articulo h3 { font-size: 1.5rem; }

	.pagina-seccion-articulo h4 { font-size: 1.4rem; }

	.pagina-seccion-articulo h5 { font-size: 1.3rem; }

	.pagina-seccion-articulo h6 { font-size: 1.1rem; }
}

.pagina-seccion p {
	font-size: 1rem;
	text-align: justify;
}

.pagina-seccion-articulo a {
	text-decoration: none;
	color: #226ab3;
}

.pagina-seccion-articulo blockquote {
	width: 80%;
	margin: 0 auto 1em auto;
	padding: .5em;
	text-align: justify;
	font-style: italic;
	color: #808080;
}

.pagina-seccion-articulo figure {
	width: 100%;
}

.pagina-seccion-articulo figure img {
	max-width: 100%;
	max-height: 100%;
}

.pagina-seccion-articulo figure figcaption {
	font-style: italic;
	margin-top: .5em;
	text-align: center;
	color: #808080;
}

.pagina-seccion-articulo table {
	margin: 0 auto 2em auto;
	border-collapse: collapse;
	border: 1px solid #808080;
}

.pagina-seccion-articulo table tr {
	background-color: #e0e0e0;
}

.pagina-seccion-articulo table tr:nth-of-type(2n+2) {
	background-color: #fff;
}

.pagina-seccion-articulo table tr th,
.pagina-seccion-articulo table tr td {
	padding: .5em;
	border: 1px solid #808080;
}

.pagina-seccion-articulo table tr th {
	background-color: #c0c0c0;
}

/* ESTILOS PARA PIE DE PÁGINA */

.pie-pagina {
	width: 100%;
	min-height: 20vh;
	margin: 0;
	padding: .5em;
	background-color: #404040;
}

.pie-pagina-seccion {
	min-height: 20vh;
	border-right: 1px #FFFFFF solid;
}

.pie-pagina-seccion:nth-last-of-type(1) {
	border: none;
}

.pie-pagina-seccion h2,
.pie-pagina-seccion h3 {
	font-size: 1.5rem;
	font-weight: bold;
	text-align: center;
	color: #FFFFFF;
}

.pie-pagina-seccion p {
	color: #FFFFFF;
}

.pie-pagina ul {
	list-style: none;
}

/* ESTILOS PARA PAGINADORES */

/* Estilos para el paginador en boletines. */

.paginador {
	background-color: none;
	text-align: center;
}

.paginador a {
	display: inline-block;
	text-decoration: none;
	color: #557abc;
	border: 2px solid #226ab3;
	border-radius: 40px;
	background-color: #ffffff;
	box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
}

.paginador a:hover {
	color: #ffffff;
	background-color: #f37f65;
	border: 2px solid #f37f65;
}

.paginador span {
	display: inline-block;
	text-decoration: none;
	color: #557abc;
	border-radius: 40px;
	color: #fff;
	cursor: default;
	box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
	border-radius: 40px;
	transition: .3s;
	background-color: #557abc;
}

@media screen and (min-width: 992px) {
	.paginador {
		width: 100%;
		height: 60px;
	}
	
	.paginador a {
		min-width: 40px;
		height: 40px;
		line-height: 40px;
		padding: 0 .5em;
	}
	
	.paginador a:hover {
		color: #ffffff;
		background-color: #f37f65;
		border: 2px solid #f37f65;
	}
	
	.paginador span {
		min-width: 40px;
		height: 40px;
		line-height: 40px;
		padding: 0 .5em;
		margin: 0 .5em;
	}
}

@media screen and (min-width: 0) and (max-width: 991px) {
	.paginador {
		width: 100%;
		min-height: 100px;
		padding: 1em 0;
	}
	
	.paginador a {
		min-width: 40px;
		height: 40px;
		line-height: 40px;
		margin: 0 .5em;
		padding: 0 .5em;
	}
	
	.paginador a:hover {
		color: #ffffff;
		background-color: #f37f65;
		border: 2px solid #f37f65;
	}
	
	.paginador span {
		min-width: 40px;
		height: 40px;
		line-height: 40px;
		padding: 0 .5em;
		margin: 0 .5em;
	}
}

/* ESTILOS PARA SLIDER */

.home-contenido-principal-slider {
	overflow: hidden;
	width: 100%;
}

.slider-contenedor {
	display: flex;
	width: 100%;
}

.contenido-slider {
	display: flex;
	width: 100%;
	background: #fff;
	justify-content: space-around;
	align-items: center;
	flex-shrink: 0;
}

.contenido-slider:nth-child(2) {
	color: #fff;
	background: #332863;
}

.contenido-slider:nth-child(3) {
	background: #611a68;
}

.contenido-slider>img {
	width: 100%;
}

.contenido-slider>div {
	width: 40%;
}

.contenido-slider h2 {
	font-weight: 300;
	line-height: 30px;
	text-align: justify;
}

.contenido-slider a {
	display: block;
	width: 100px;
	margin-top: 20px;
	padding: 15px 0;
	text-align: center;
	text-decoration: none;
	color: #fff;
	border-radius: 3px;
	background: #332863;
}

.contenido-slider:nth-child(2) a {
	color: #332863;
	background: #fff;
}

/* ESTILOS PARA COMENTARIOS */

/* Estilos para los comentarios publicados en los boletines. */
.comentarios {
	border-top: 1px solid #c0c0c0;
	padding: 1em 0;
}

.comentarios ol {
	margin: 0 .5em;
	padding: 0 .5em;
}

.comentarios li {
	background-color: #ffffff;
	padding: .5em;
}

.comentarios li:nth-of-type(2n+2) {
	background-color: #f0f0f0;
}

/* ARTÍCULO DE BOLETÍN. */

.boletin {
	width: 100%;
	background-color: #FFFFFF;
	padding: 2em 0;
}

.boletin-seccion {
	width: 100%;
	max-width: 720px;
	margin: 0 auto;
	padding: 0.5em;
}

.boletin-seccion-articulo {
	width: 100%;
	padding: 0;
	margin: 0;
}

@media screen and (min-width: 992px) {
	.boletin-seccion-articulo h1 {
		font-size: 3rem;
		text-align: center;
	}
	
	.boletin-seccion-articulo h2 {
		font-size: 2rem;
	}
	
	.boletin-seccion-articulo h3 {
		font-size: 1.8rem;
	}
	
	.boletin-seccion-articulo h4 {
		font-size: 1.6rem;
	}
	
	.boletin-seccion-articulo h5 {
		font-size: 1.4rem;
	}
	
	.boletin-seccion-articulo h6 {
		font-size: 1.2rem;
	}
}

@media screen and (min-width: 0) and (max-width: 991px) {
	.boletin-seccion-articulo h1 {
		font-size: 2rem;
		text-align: center;
	}
	
	.boletin-seccion-articulo h2 {
		font-size: 1.5rem;
	}
	
	.boletin-seccion-articulo h3 {
		font-size: 1.4rem;
	}
	
	.boletin-seccion-articulo h4 {
		font-size: 1.3rem;
	}
	
	.boletin-seccion-articulo h5 {
		font-size: 1.2rem;
	}
	
	.boletin-seccion-articulo h6 {
		font-size: 1.1rem;
	}
}

.boletin-seccion-articulo h1,
.boletin-seccion-articulo h2,
.boletin-seccion-articulo h3,
.boletin-seccion-articulo h4,
.boletin-seccion-articulo h5,
.boletin-seccion-articulo h6 {
	font-weight: bold;
}

.boletin-seccion-articulo p {
	text-align: justify;
	text-indent: 1em;
	margin-bottom: 1em;
}

.boletin-seccion-articulo blockquote {
	margin: 1em;
}

.boletin-seccion-articulo figure {
	width: 80%;
	margin: 0 auto;
}

.boletin-seccion-articulo figure img {
	width: 100%;
	margin: 0 auto;
}

.boletin-seccion-articulo figcaption {
	color: #808080;
	text-align: center;
	font-style: italic;
}

.boletin-articulos-relacionados,
.boletin-comentarios {
	border-top: 1px solid #206eb6;
	width: 100%;
	max-width: 720px;
	margin: 0 auto;
	padding: 0.5em;
}

.boletin-articulos-relacionados h3,
.boletin-comentarios h3 {
	text-align: center;
	font-weight: bold;
	margin-bottom: 1em;
}

/* ICONO IR ARRIBA */

.to-start {
	line-height: 50px;
	position: fixed;
	z-index: 10;
	right: 0;
	bottom: 0;
	display: none;
	margin-right: 1.5em;
	margin-bottom: 1.5em;
	text-align: center;
	text-decoration: none;
	color: white;
	border: 2px solid white;
	border-radius: 50%;
	background-color: #226ab3;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

.to-start:hover {
	text-decoration: none;
	color: white;
	background-color: #f37f65;
}

.to-start:focus {
	color: white;
}

@media only screen and (min-width: 992px) {
	.to-start {
	font-size: 1.5rem;
	line-height: 2em;
	width: 50px;
	height: 50px;
	}
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
	.to-start {
	font-size: 2.3rem;
	line-height: 2.50px;
	width: 80px;
	height: 80px;
	}
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
	.to-start {
	font-size: 2.1rem;
	line-height: 2.1em;
	width: 70px;
	height: 70px;
	}
}

@media only screen and (min-width: 240px) and (max-width: 575px) {
	.to-start {
	font-size: 1.7rem;
	line-height: 1.7em;
	width: 50px;
	height: 50px;
	}
}

/* BARRA LATERAL */

.aside {
	display: flex;
	box-sizing: border-box;
	align-items: center;
}
	
.sidebar {
	background-color: white;
}
	
.floating-sidebar-button {
	line-height: 30px;
	position: absolute;
	z-index: -1;
	top: 50%;
	bottom: 50%;
	padding: .5em;
	text-align: center;
	background-color: white;
	box-shadow: 0 0 5px rgba(0, 0, 0, .75);
}

.widget {
	padding: .25em 1em;
	border-bottom: 1px solid #c0c0c0;
}

.widget:nth-last-of-type(1) {
	border: none;
}

.widget ul {
	margin: 0;
	padding: 0;
	/* list-style: none; */
	
}

.widget ul li {
	margin: 0 0 1em 0;
	padding: 0;
}

@media only screen and (min-width: 992px) {
	.aside {
		position: fixed;
		z-index: 9999;
		top: 0;
		right: -406px;
		bottom: 0;
		width: 400px;
		max-height: 100vh;
		transition: .5s;
	}

	.aside:hover {
		right: 0;
	}

	.sidebar {
		z-index: 1;
		overflow: auto;
		width: 100%;
		max-height: 100vh;
		box-shadow: 0 0 5px rgba(0, 0, 0, .75);
		border-radius: 10px 0 0 10px;
	}

	.floating-sidebar-button {
		left: -49px;
		width: 50px;
		height: 50px;
		border-radius: 10px 0 0 10px;
	}

	.widget h3 {
		font-size: 1.3rem;
		font-weight: bold;
		margin-bottom: 1em;
	}

	.widget p {
		font-size: .8rem;
	}
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
	.aside {
		top: 0;
		bottom: 0;
		width: 100%;
	}

	.aside:hover {
		right: 30px;
	}

	.sidebar {
		width: 100%;
	}

	.floating-sidebar-button {
		opacity: 0;
	}

	.widget h3 {
		font-size: 1.1rem;
	}

	.widget p {
		font-size: .8rem;
	}
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
	.aside {
		top: 0;
		bottom: 0;
		width: 100%;
	}

	.aside:hover {
		right: 30px;
	}

	.sidebar {
		width: 100%;
	}

	.floating-sidebar-button {
		opacity: 0;
	}

	.widget h3 {
		font-size: 1.1rem;
	}

	.widget p {
		font-size: .8rem;
	}
}

@media only screen and (min-width: 240px) and (max-width: 575px) {
	.aside {
		top: 0;
		bottom: 0;
		width: 100%;
	}

	.aside:hover {
		right: 5%;
	}

	.sidebar {
		width: 100%;
	}

	.floating-sidebar-button {
		opacity: 0;
	}

	.widget h3 {
		font-size: 1.1rem;
	}

	.widget p {
		font-size: .8rem;
	}
}