@font-face
{font-family: opensans; src: url('opensans.woff') format('woff'); font-weight: normal; font-style: normal}

*
{box-sizing: border-box; font: normal 1em/1.5em opensans}

html
{scroll-behavior: smooth} 

body, #head
{margin: 0 auto; padding: 0; width: 96vw; max-width: 80em}

#head
{display: flex; position: fixed; top: 0; background: #9ddef3}

#head::before, #head::after
{content: ""; position: absolute; top: 0; bottom: 0; width: 9600px; right: 100%; background: #9ddef3}

#head::after
{left: 100%; background: #9ddef3}

header
{margin: .5em 0}

header figure
{margin: 0}

header figure picture *
{height: 75px; vertical-align: middle}

nav, nav ul, nav ul li
{display: flex; flex: 1 0 0%; align-items: center}

nav
{margin: 0 0 0 5em; align-items: center}

nav label, nav input
{display: none}

nav ul
{list-style-type: none; margin: 0; padding: 0}

nav ul li
{justify-content: space-around}

nav ul li a
{font-size: .9em; color: #293c87; text-decoration: none}

nav ul li a:hover, nav ul li a:focus
{text-decoration: underline}

.activa
{border-bottom: medium solid #293c87}

#body
{display: flex; flex-wrap: wrap; margin-top: 7em}

article
{flex: 1 0 0%; flex-direction: column; height: 100%}

article > object
{text-indent: 0; width: 100%; height: 100vh}

aside
{flex: 0 0 300px; margin-left: 21px; padding-top: 5em; font-size: .9em}

aside form
{width: 300px; padding: 1.5em 1.2em; text-align: center; border: thin solid #293c87}

aside textarea
{width: 100%; border: thin solid #293c87; margin-bottom: 1em}

aside input
{height: 21px; border: none; border-bottom: thin solid #293c87}

aside input[type="submit"]
{background-color: #293c87; color: #fff; font-weight: bold}

aside button
{color: #fff; background: #293c87; padding: .1em .4em; margin: .1em 0; border: 0}

#extra
{order: -1}

footer
{flex: 1 0 0%; width: calc(100% - (300px + 21px)); margin: 1em 0 0; padding: .7em 0; font-size: .9em; border-top: thin solid #293c87}

#note
{position: absolute; bottom: .7em; right: .7em; animation: chao 0s ease-in 2s forwards; animation-fill-mode: forwards; background-color: #293c87; color: #fff; border-radius: 7px}

@keyframes chao
{ to { width:0; height:0; overflow:hidden} }

#note p
{margin: .2em .5em}

article
{hyphens: auto; text-indent: 2em}

article > [id]
{padding-top: 7em; margin-top: -7em}

.s, label
{text-indent: 0}

.c
{text-align: center}

.r
{text-align: right}

h1, h2, h3, h4, h5, h6
{text-indent: 0; font-weight: normal; font-size: 1.8em}

h2
{font-size: 1.5em}

h3
{font-size: 1.3em}

h4, h5, h6
{font-size: 1.1em}

h5
{font-weight: bold}

h6
{font-style: italic}

em
{font-style: normal; font-weight: bold}

mark
{font-size: .6em; font-weight: bold; font-style: italic; padding: 0 .6em; background-color: #a00; color: #fff}

sup, sub
{font-size: 60%}

hr
{thin dashed #293c87}

article a
{color: #293c87}

article ul
{list-style-type: square; text-indent: 0}

article picture source, article picture img, article video, article audio
{clear: both; display: block; margin: 0 auto; max-height: 90vh; max-width: 100%; width: auto}

article > picture source, article > picture img
{max-width: 96vw}

article audio
{width: 640px; max-width: 96vw}

article figure.l source, article figure.l img
{max-width: 40%; float: left; margin: .4em .7em .4em 0}

article figure.r source, article figure.r img
{max-width: 40%; float: right; margin: .4em 0 .4em .7em}

article figure
{margin: 0}

article figure figcaption
{font-size: .9em; text-align: center; display: none}

article figure .lb
{display: none}

article figure .lb:checked + label picture
{pointer-events: none}

article figure .lb:checked + label + picture
{display: block}

article figure .lb:checked + label
{background: rgba(0,0,0,0.9); outline: none; position: fixed; z-index: 999; top: 0; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; justify-content: center; align-items: center}

article figure .lb:checked + label > picture, article figure.l .lb:checked + label > picture source, article figure.l .lb:checked + label > picture img, article figure.r .lb:checked + label > picture source, article figure.r .lb:checked + label > picture img, article .pics .lb:checked + label > picture source, article .pics .lb:checked + label > picture img
{width: auto; height: auto; max-width: 90vw; max-height: 90vh; padding: 0; margin: 0}

article figure .lb:checked + label > figcaption
{display: block; color: #fff}

article form
{display: flex; flex: 1 0 0%; flex-flow: row wrap; border: thin dashed #293c87; padding: 1em; margin: 0 0 1.4em}

article input, article textarea
{background: #fff; color: #000; border: thin solid #293c87; margin: .7em}

article textarea
{height: 12em; width: 100%}

article input
{flex: 1 0 0%}

article input[type=submit]
{max-width: 200px; background-color: #293c87; color: #fff}

.tabs
{display: flex; flex-wrap: wrap; border: thin solid #293c87}

.tabs label
{display: block; padding: .4em .7em; margin-right: 0.2em; cursor: pointer; background: #293c87; color: #fff; transition: background ease 0.2s; border-bottom: thin solid #293c87}

.tabs .tab
{order: 99; flex-grow: 1; width: 100%; display: none; padding: .7em; background: #fff}

.tabs input[type="radio"]
{display: none}

.tabs input[type="radio"]:checked + label
{background: #7a99d2; color: #fff; font-weight: bold}

.tabs input[type="radio"]:checked + label + .tab
{display: block}

.tabs section form label
{color: #000; background-color: transparent; padding: 0; font-weight: bold}

.tabs section form input[type="radio"]
{display: initial; vertical-align: top}

.tabs h1,.tabs h2, .tabs h3, .tabs h4, .tabs h5, .tabs h6
{margin-top: .3em}

.tab > figure > label
{background: transparent; border-bottom: 0} 

.opciones
{flex: 1 0 0%; flex-wrap: wrap; clear: both;}

.opciones ul
{display: flex; flex-wrap: wrap; list-style-type: none; margin: 0; padding: 0}

.opciones ul li
{flex: 1 0 210px; margin: .3em; padding: 1em; border: 1px solid #293c87; text-align: center; justify-content: space-evenly}

.opcion source, .opcion img
{margin: .5em auto}

.pics
{display: flex; justify-content: space-evenly; flex-wrap: wrap}

.pics source, .pics img
{max-height: 250px}

.pics figure
{margin: .4em}

#extra
{display: flex; justify-content: center; margin: 0 auto; overflow: hidden}

#extra figure
{padding: 0; margin: 0 auto; position: relative}

#extra figure picture
{display: flex; align-self: flex-start}

#extra source, #extra img
{max-width: 96vw}

#extra figure figcaption, #extra figure figure figcaption
{position: absolute; background: rgba(0,0,0,0.6); font-size: initial; color: #fff; padding: .6em; min-width: 25%; bottom: 0}

#extra figure.slide
{display: flex; flex-direction: row; width: 96vw; max-width: 1280px; animation: 24s slidy infinite}

#extra:hover figure.slide
{animation-play-state: paused}

@keyframes slidy { 
0%  {left: 0%}
22% {left: 0%}
25% {left: -100%}
47% {left: -100%}
50% {left: -200%}
72% {left: -200%}
75% {left: -300%}
97% {left: -300%}
100% {left: -400%}
}

@media (max-width: 45em)
{
.tabs .tab, .tabs label
{order: initial}

.tabs label
{width: 100%; margin-right: 0}
}

@media screen and (max-width: 360px)
{
article input[type=submit]
{max-width: 360px}
}

@media screen and (max-width: 900px)
{
#body
{flex-direction: column}

header img
{height: 4em}

nav ul li a
{font-size: .9em}

#body
{margin-top: 5em}

aside
{flex-direction: column; justify-content: center; margin: 0 auto; padding-top: 1em}

#extra
{max-width: 96vw; margin: 0 auto; order: -1}

#extra figure figcaption, #extra figure figure figcaption
{padding: .2em .4em}

footer
{width: 100%}

nav
{position: absolute; right: 0; top: 32px; align-items: baseline}

nav ul
{display: none; list-style-type: none; margin: 0; padding: 0}

nav li
{padding: .3em .5em; border-bottom: 1px solid #fff}

nav ul li a, nav ul li a:hover, nav ul li a:focus
{text-decoration: none;}

nav label
{display: block}

nav input[type=checkbox]:checked ~ #menu
{display: block; height: 100vh; margin-right: -2vw; z-index: 7; background-color: #9ddef3}

article picture source, article picture img, article video, article audio
{max-width: 100%}
}

@media print
{
@page
{margin: 2cm}

@page:

body
{width: 100%; margin: 2cm; margin: 0; background: #fff; color: #000; font-size: 11pt}

#body, article
{width: auto; display: block; word-wrap: break-word; margin-top: 0}

#head, aside, #extra, footer, article form, #note, video, audio, .opciones, .tabs 
{display: none}

section
{display: block; page-break-inside: auto; margin: auto}

article figure
{page-break-inside: avoid; margin: .5em auto}

article figure source, article figure img
{max-width: 8cm}

th, td
{width: auto}

h1, h2, h3
{font: normal 18pt/1.2em georgia,sans-serif; color: #000}

h2
{font-size: 1.4em}

h3
{font-size: 1.3em}

h4, h5, h6
{font-size: 1.1em}

a
{color: #000; text-decoration: underline}

a:after
{content: " [https://jadisac.com/" attr(href) "] "}

a[href^="http://"]:after, a[href^="https://"]:after, a[href^="ftp://"]:after
{content: " [" attr(href) "] "}

a[href^="#"]:after
{display: none}

em
{font-style: normal; font-weight: bold}

abbr[title]:after
{content: " (" attr(title) ") "; border-bottom: 1px dotted #000}

hr
{border: none; border-bottom: thin dashed #333; clear: both}

sup, sub
{font-size: 60%}

footer
{width: 100%; border-top: thin dashed #333}
}