.header {
    padding: 10px 0 !important;
    background-color: #ffffff;
}
.header ul {
    margin: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
}
.header ul a {
    color: #333;
    font: bold 18px / 18px arial;
    text-decoration: none;
}
.header ul li::before {
    color: #b5252e;
    margin-right: 10px;
}

.content {
	padding: 16px;
}

.menu-logo
{
	max-height: 50px;
}

nav
{
	display: flex;
	justify-content: space-between;
}

nav ul {
	/* Make the markers disappear */
	list-style-type: none;
}
nav ul li {
	/* Puts the elements in a single line */
	display: inline-flex;
	margin: 0.3em 1em;
}
@media (min-width: 577px)
{
	.burger-menu
	{
		display: none;
	}
}

@media only screen and (max-width: 600px)
{
	nav
	{
		flex-direction: row;
		flex-wrap: wrap;
		margin-left: 0;
		margin-right: 0;
	}
	/* Because we are in mobile mode, we want to display it as a
	   vertical list */
	nav ul
	{
		display: block;
	}
	/* We have two lists: the first one are the always visibile items
	   in the menu bar. The second one is the one that will be hidden */
	nav ul:last-child
	{
		width: 100%;
		flex-basis: 100%;
		display: flex;
		flex-direction: column;
		position: absolute;
		top: 90px;
		background: #eee;
		z-index: 99999;
		right: 0;
	}
	nav ul:last-child li
	{
		text-align:left;
	}
	nav ul li
	{
		margin-bottom: 0;
		width: 100%;
		text-align: right;
		padding: 0.5em;
	}

	input[type='checkbox']:not(:checked)+ul {
		display: none;
	}

	nav input[type='checkbox'], nav label {
		display: none;
	}

	nav label {
		text-align: right;
		display: block;
		padding: 0.5em;
		line-height: 1.6em;
		align-self: center;
		color: #333;
	}
	nav.header ul:last-child {background: #eee;padding: 0;}
	nav.header li.fa-solid {padding: 1.5em 3em;border-bottom: 1px solid #c1c1c1;}

	.sticky
	{
		position: fixed;
		top: 0;
		width: 100%;
		z-index: 999;
	}

	.sticky + .content {
		padding-top: 102px;
	}

	.rutas, .categorias, .distancias, .inscripcion, .estado, .inscrito, .terminos
	{
		margin-top: 23%;
	}
}

.row
{
	height: auto;position: relative;
}

h1.modulo-titulo
{
	text-align: center;
	font: bold 48px / 58px ClashDisplay-SemiBold;
	position: relative;
	padding: 0;
	margin: 0;
	width: 100%;
	text-decoration: underline;
}
img.modulo-header
{
	position: absolute;
	z-index: -1;
	padding: 0;
	width: 100%;
	margin: 0;
}
h1.modulo-titulo::before
{
	content: "\f84a";
	font-family: "Font Awesome 6 Free";
	color: #d22129;
	padding: 15px;
}
.header li.fa-solid:hover {border-bottom: 3px solid #b5252e;}