/*! d0css v1.0.19 https://github.com/vvvkor/d0 */

:root {
	--text: #0D0D0D;
	--text-inverted: #BFBFBF;
	--bg: #F2F2F2;
	--bg-code: rgba(49, 98, 140, 1);
	--bg-pane: rgba(28, 66, 114, 1);
	--bg-button: #1D4273;
	--border: thin solid rgba(191, 191, 191, 1);
	--bg-hilite: rgba(49, 98, 140, 1);
	--bg-table: rgba(191, 191, 191, 1);
	--text-hilite: inherit;
	--link: #0D0D0D;
	--hover: #0D0D0D;
	--visited: #0D0D0D;
	--rad: .3;
	--gap: .6;
	--gap-rate: .5;
	--text-danger: #c11;
	--bg-danger: #f99;
	--bg-warning: #fd6;
	--bg-info: #9ce;
	--bg-success: #9da;
	--text-lite: #999;
	--radius: calc(var(--rad) * 1em);
	--gap-n: calc(var(--gap) * 1em);
	--gap-s: calc(var(--gap-n) * .5);
	--gap-xs: calc(var(--gap-n) * .2);
	--gap-l: calc(var(--gap-n) * 2);
	--gaps-n: calc(var(--gap-n) * var(--gap-rate)) var(--gap-n);
	--gaps-s: calc(var(--gap-s) * var(--gap-rate)) var(--gap-s);
	--gaps-l: calc(var(--gap-l) * var(--gap-rate)) var(--gap-l);
}

button, input, select, textarea {
	margin: 0;
}

html {
	box-sizing: border-box;
}

*, *:before, *:after {
	box-sizing: inherit;
}

img, embed, iframe, object, audio, video {
	max-width: 100%;
}

img, iframe {
	border: 0;
}

html, body, li, dl, dt, dd, legend, iframe {
	margin: 0;
	padding: 0;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

td, th {
	padding: 0;
	text-align: left;
}

button, [type="submit"], [type="search"] {
	-webkit-appearance: none;
}

[type="search"] {
	-webkit-border-radius: var(--radius);
}

button::-moz-focus-inner, [type="submit"]::-moz-focus-inner {
	border: none;
}

input, button, select, textarea {
	font: inherit;
}

body {
	color: var(--text);
	background-color: var(--bg);
	font: 80%/1.5 "Roboto", "Helvetica", "sans-serif";
	margin: 0;
}

main {
	display: block;
}

ul, ol, dl, blockquote, pre, hr, p, figure {
	margin: var(--gap-n) 0;
}

h1, h2, h3, h4, h5, h6 {
	margin: 3rem 0 1.5rem 0;
	line-height: 1.2;
}

h1+h2, h2+h3, h3+h4, h4+h5, h5+h6 {
	margin-top: 2rem;
}

h1 {
	font-size: 200%;
}

h2 {
	font-size: 150%;
}

h3 {
	font-size: 117%;
}

h4 {
	font-size: 100%;
}

h5 {
	font-size: 63%;
}

h6 {
	font-size: 47%;
}

blockquote, pre, fieldset {
	padding: var(--gaps-n);
}

pre, code {
	font-family: monospace;
	white-space: pre-wrap;
}

pre {
	overflow: auto;
	max-height: 80vh;
	padding: var(--gap-n);
}

abbr {
	border-bottom: thin dotted;
}

a {
	color: var(--link);
}

:visited {
	color: var(--visited);
}

a[href^="#"] {
	color: var(--link);
}

a:hover {
	color: var(--hover);
}

a:not([href]) {
	color: inherit;
}

abbr, a {
	text-decoration: none;
}

svg {
	fill: currentColor;
}

svg {
	display: inline-block;
	width: 1em;
	height: 1em;
	transform: translate(0, .15em) scale(1.2);
}

a svg:not(:last-child), button svg:not(:last-child) {
	margin-right: var(--gap-s);
}

ul {
	list-style: disc outside;
}

ul, ol {
	padding: 0 0 0 calc(var(--gap-n)*1.5);
}

li ul, li ol {
	margin: var(--gap-xs) 0;
}

dt {
	font-weight: bold;
}

dd {
	margin-bottom: var(--gap-s);
}

th, td {
	padding: var(--gaps-s);
	vertical-align: top;
	background-clip: padding-box;
}

table tr>*, fieldset, hr {
	border: var(--border);
}

input, select {
	max-width: 100%;
}

textarea {
	width: 100%;
}

hr {
	border-width: thin 0 0 0;
}

figure {
	overflow-x: auto;
}

figure>table {
	border: var(--border);
	border-width: medium;
}

form>p {
	margin: var(--gap-s) 0;
}

form>table tr>* {
	border: none;
}

blockquote, pre, code, thead, tfoot {
	background-color: var(--bg-code);
}

pre code {
	background: none;
}

svg {
	color: var(--text-lite);
}

mark {
	background-color: var(--bg-warning);
}

@media print {
	body {
		font: 8pt/1 serif;
		background: none;
	}
	
	h1, h2, h3, h4, h5, h6 {
		page-break-after: avoid;
	}
	
	pre, blockquote {
		border-left: var(--border);
	}
	
	figure>mark:only-child {
		font-weight: bold;
	}
	
	input, select, textarea {
		border-width: 0 0 thin 0;
	}
	
	button, [type="submit"] {
		border: var(--border);
		padding: var(--gaps-s);
	}
}

section[id]:not(:target), aside[id]:not(:target) {
	display: none;
}

section>table {
	width: 100%;
	table-layout: fixed;
}

section>table td {
	border: none;
	padding: 0 var(--gap-n);
}

section>table td:empty {
	padding: 0;
}

@media screen {
	main {
/*		max-width: 50em; */
		margin: 0 auto;
		padding: 0 1em;
	}
	
	input, button, select, textarea {
		padding: var(--gap-xs);
		line-height: normal;
	}
	
	input, button, select, textarea {
		border: thin solid rgba(0, 0, 0, .3);
	}
	
	button, [type="submit"] {
		padding: var(--gaps-n);
		border-radius: var(--radius);
		margin: var(--gap-xs) 0;
		border-color: transparent;
		cursor: pointer;
	}
	
	form>button, form>[type="submit"], form>a>button {
		padding: var(--gap-xs) var(--gap-s);
		margin: 0;
	}
	
	button:hover:not([disabled]), [type="submit"]:hover:not([disabled]),
	button:focus, input:focus, select:focus, textarea:focus {
		box-shadow: 0 0 0 .15em rgba(0, 0, 0, .1);
		outline: none;
	}
	
	button[disabled], [type="submit"][disabled] {
		opacity: .5;
	}
	
	[name]:invalid {
		border-color: var(--text-danger);
	}
	
	[type="checkbox"]:invalid+span, [type="radio"]:invalid+span {
		color: var(--text-danger);
	}
	
	[name]:invalid:focus {
		box-shadow: 0 0 0 .15em rgba(255, 100, 100, .3);
	}
	
	:valid~mark {
		display: none;
	}
	
	input[type="range"], input[type="color"] {
		vertical-align: middle;
		padding: unset;
	}
	
	input[type="range"] {
		border: initial;
	}
	
	button, [type="submit"] {
		background-color: var(--bg-button);
		color: var(--text-inverted);
	}
	
	button svg {
		color: var(--bg);
	}
	
	figure>b:only-child, figure>em:only-child, figure>i:only-child {
		font-weight: normal;
		font-style: normal;
	}
	
	figure>mark:only-child, figure>b:only-child, figure>em:only-child,
	figure>i:only-child {
		display: block;
		border-radius: var(--radius);
		padding: var(--gaps-n);
		background-color: var(--bg-danger);
	}
	
	figure>b:only-child {
		background-color: var(--bg-warning);
	}
	
	figure>i:only-child {
		background-color: var(--bg-info);
	}
	
	figure>em:only-child {
		background-color: var(--bg-success);
	}
	
	mark>button:only-child, mark>[type="submit"]:only-child {
		background-color: var(--text-danger);
		color: var(--bg);
	}
	
	span>button:only-child, span>[type="submit"]:only-child {
		background-color: var(--text-lite);
		color: var(--bg);
	}
	
	mark>a:only-child, mark>a:only-child>svg {
		color: var(--text-danger);
	}
	
	header>nav>ul {
		background-color: var(--bg-pane);
		position: fixed; /* agregado por Zraxas Set the navbar to fixed position */
		top: 0; /* agregado por Zraxas Position the navbar at the top of the page */
		width: 100%; /* agregado por Zraxas Full width dentro de margen */
	}
	
	nav ul {
		padding: 0;
		margin: 0;
	}
	
	nav>ul li {
		list-style: none;
		position: relative;
	}
	
	nav>ul li:not(:hover)>ul:not(:target) {
		display: none;
	}
	
	nav>ul li>*:first-child {
		display: block;
		padding: var(--gaps-n);
	}
	
	nav>ul li:hover>a {
		color: var(--text-hilite);
		background-color: var(--bg-hilite);
	}

	figure>table tr:hover {
		color: var(--text-hilite);
		background-color: var(--bg-table);
	}

	nav>ul li:not(:hover)>a {
		color: var(--text-inverted);	
	}
	
	figure>table tr:not(:hover) {
		color: var(--text);	
	}

	nav>ul ul {
		position: absolute;
		z-index: 30;
		background-color: var(--bg);
		left: 5em;
		top: 0;
		display: block;
		min-width: 12em;
		box-shadow: 0 .1em .5em rgba(0, 0, 0, 1);
	}
	
	nav>ul li>form:first-child {
		padding: calc(var(--gap-n) * var(--gap-rate) - var(--gap-xs)) var(--gap-n);
	}
	
	nav>ul li>a:nth-last-child(2):after {
		position: static;
		display: inline-block;
		content: '\a0\a0\203a';
		color: var(--text-inverted);
	}
	
	nav>ul ul li>a:nth-last-child(2):after {
		position: absolute;
		right: .5em;
		top: .5em;
	}
	
	nav[id], nav[id]>ul {
		display: inline-block;
	}
	
	nav[id]>ul>li>a {
		padding: 0;
	}
	
	nav[id]>ul>li>a:after {
		display: none;
	}
	
	nav[id]>ul>li>ul {
		left: 0;
		top: 100%;
	}
	
	nav[id]>ul>li:last-child:not(:first-child) ul {
		left: auto;
		right: 0;
	}
	
	nav>ul~section[id]:last-of-type {
		display: block;
	}
	
	nav>ul~section[id]:target~section[id]:last-of-type {
		display: none;
	}
	
	section[id] {
		border: var(--border);
		padding: var(--gap-n);
	}
	
	dialog {
		border: var(--border);
		position: fixed;
	}
	
	dialog::backdrop {
		background: rgba(0, 0, 0, .5);
	}
	
	aside[id] {
		background: var(--bg);
		background-clip: padding-box;
		padding: var(--gap-l);
		overflow: auto;
		border: 200vw solid rgba(0, 0, 0, .85);
		position: fixed;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		box-sizing: content-box;
		width: auto;
		min-width: 10em;
		max-width: 80vw;
		max-height: 80vh;
		z-index: 50;
	}
	
	figure>section {
		min-height: 100vh;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	figure[id] {
		margin: 0;
	}
	
	figure[id]>a, figure[id]>a:after {
		display: none;
		position: fixed;
		left: 0;
		top: 0;
		color: var(--bg);
		padding: 0 var(--gap-s);
	}
	
	figure[id]>a:target {
		background: #000 50% 50% / contain no-repeat;
		background-image: var(--img);
		z-index: 40;
		display: block;
		width: 100%;
		height: 100vh;
		cursor: default;
	}
	
	figure[id]>a:target~a:not([id]), figure[id]>a:target[title]:after {
		display: block;
		z-index: 41;
	}
	
	figure[id]>a[title]:after {
		content: attr(title);
		right: 0;
		height: 5em;
		box-shadow: inset 0 3em 3em -1.5em rgba(0, 0, 0, .3);
	}
	
	figure[id]>a:not([id]) {
		left: auto;
		right: 0;
	}
	
	figure[id]>a:target+a {
		background-image: var(--img);
		background-position: 999em 999em;
	}
	
	figure[id]>a>img {
		object-fit: contain;
		width: 100%;
		height: 100%;
	}
}

@media screen and (max-width: 54.99em) {
	body {
		font-size: medium;
	}
	
	form>table tr, form>table tr>* {
		display: block;
		padding: 0;
	}
	
	form>table tr {
		padding-bottom: var(--gap-s);
	}
}

@media screen and (min-width:25em) {
	nav>ul {
		display: flex;
		flex-wrap: wrap;
	}
	
	nav>ul ul {
		left: 0;
		top: 100%;
	}
	
	nav>ul ul ul {
		left: 100%;
		top: 0;
	}
	
	nav>ul>li:last-child:not(:first-child) ul {
		left: auto;
		right: 0;
	}
	
	nav>ul>li:last-child:not(:first-child) ul ul {
		right: 100%;
	}
	
	form>table td:first-child:not([colspan]) {
		width: 12em;
		text-align: right;
	}
	
	fieldset table td:first-child:not([colspan]) {
		width: calc(12em - var(--gap-n) - var(--gap-s));
	}
	
	aside[id] {
		min-width: 20em;
	}
}