.header {
	padding: 10px 0 !important;
	background-color: #292929;
}
.header ul {
	margin: 0;
	display: flex;
	flex-direction: row;
	align-items: center;
}
.header ul a {
	color: white;
	font: bold 18px / 18px Roboto;
	text-decoration: none;
}
.header ul li::before {
	color: #3432ff;
	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: #292929;
		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: white;
	}
	nav.header ul:last-child {background: #292929;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%;*/
	}
}