/*** DEFINIÇÕES BÁSICAS: blocos, fontes, links ***/

*, *:before, *:after {
 margin: 0;
 padding: 0;
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
}

@font-face {
    font-family: 'LatoWeb';
    src: url('/hades/fnt/Lato-Regular.eot'); /* IE9 Compat Modes */
    src: url('/hades/fnt/Lato-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('/hades/fnt/Lato-Regular.woff2') format('woff2'), /* Modern Browsers */
         url('/hades/fnt/Lato-Regular.woff') format('woff'), /* Modern Browsers */
         url('/hades/fnt/Lato-Regular.ttf') format('truetype');
    font-style: normal;
    font-weight: normal;
    font-display: swap;
    text-rendering: optimizeLegibility;
}

@font-face {
    font-family: 'LatoWeb italic';
    src: url('/hades/fnt/Lato-Italic.eot'); /* IE9 Compat Modes */
    src: url('/hades/fnt/Lato-Italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('/hades/fnt/Lato-Italic.woff2') format('woff2'), /* Modern Browsers */
         url('/hades/fnt/Lato-Italic.woff') format('woff'), /* Modern Browsers */
         url('/hades/fnt/Lato-Italic.ttf') format('truetype');
    font-style: normal;
    font-weight: normal;
    font-display: swap;
    text-rendering: optimizeLegibility;
}

@font-face {
    font-family: 'LatoWeb bold';
    src: url('/hades/fnt/Lato-Bold.eot'); /* IE9 Compat Modes */
    src: url('/hades/fnt/Lato-Bold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('/hades/fnt/Lato-Bold.woff2') format('woff2'), /* Modern Browsers */
         url('/hades/fnt/Lato-Bold.woff') format('woff'), /* Modern Browsers */
         url('/hades/fnt/Lato-Bold.ttf') format('truetype');
    font-style: normal;
    font-weight: normal;
    font-display: swap;
    text-rendering: optimizeLegibility;
}

@font-face {
    font-family: 'LatoWeb semibold';
    src: url('/hades/fnt/Lato-Semibold.eot'); /* IE9 Compat Modes */
    src: url('/hades/fnt/Lato-Semibold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('/hades/fnt/Lato-Semibold.woff2') format('woff2'), /* Modern Browsers */
         url('/hades/fnt/Lato-Semibold.woff') format('woff'), /* Modern Browsers */
         url('/hades/fnt/Lato-Semibold.ttf') format('truetype');
    font-style: normal;
    font-weight: normal;
    font-display: swap;
    text-rendering: optimizeLegibility;
}

b, sb, i {
 display: inline;
 font-weight: normal;
 font-style: normal;
}

b {
 font-family: LatoWeb bold;
}

sb {
 font-family: LatoWeb semibold;
}

i {
 font-family: LatoWeb italic;
}

n {
 white-space: nowrap;
}

a {
 color: rgb(0,0,120);
 text-decoration: none;
 outline: 0;
}

a:visited {
 color: rgb(120,0,0);
}


/*** ESTRUTURA BASICA ***/

html {
 font-size: calc(1.0625em + (1.6470 - 1.0625) * ((100vw - 12.0em) / (1600 - 300)));
 line-height: 1.5em;
 background: rgb(248,248,248);
}

body, pagewrap, header, article, section, aside, div, texticulo, h1, h2, p, e, linha, figure, colunatxt, figcaption, ul, ol, v, vv {
  display: block;
}

logo, bloq {
 display: inline-block;
}

flex {
 display: flex;
}

pagewrap {
 width: 1024px;
 min-height: 90vh;
 margin: 0 auto;
}

body {
 font-family: LatoWeb;
 font-variant-ligatures: historical-ligatures;
 font-variant-numeric: oldstyle-nums;
 font-feature-settings: 'onum';
 -webkit-font-feature-settings: 'onum';
 -moz-font-feature-settings: 'onum=1';
 -ms-font-feature-settings: 'onum';
 color: rgb(50,50,50);
}

header {
 width: 100%;
 position: relative;
}

header logo {
 width: calc(8.5em + 2vw);
 padding: 0.75em 0 0.5em 0.0588em;            /* padding left = 2px ou 0.1176em */
 border-bottom: 2px solid rgb(0,0,0);
 font-family: LatoWeb bold;
 font-size: calc(1.425em + 2vh)
}

a#logo, a#logo:visited {
 color: rgb(0,0,0);
}

article {
 position: relative;
 width: 100%;
 min-height: 65vh;
 letter-spacing: 0.0117em;       /* 0.20px */
}

img {				/* sempre colocar a imagem dentro de um bloco para contê-la: div, etc. */
 width: 100%;
 max-width: 100%;
 height: auto;
}

h1, h2 {
 font-weight: normal;
 font-family: LatoWeb bold;
 line-height: 1.35;
}

h1 {
 font-size: 1.7em;
 padding-right: 2.0em;
 padding-bottom: 1.25em;
 text-align: right;
}

h2 {                                   /* baseado no parágrafo: padding levemente maior em cima e pouca coisa maior em baixo */
 font-size: 1.25em;
 padding: 0.75em 0 1.0em 0;
}

p {
 max-width: 32.0em;
 padding: 0 0 0.875em 0;
}

p > a, figcaption > a {
 border-bottom: 1px dotted;
 padding-bottom: 0.075em;
 line-height: 0;
}

texticulo > p:first-child {
/* max-width: 32.0em; */
 font-family: LatoWeb semibold;
 padding-bottom: 1.25em;
}

#c {
 text-align: center;
}

flex {
 flex-wrap: wrap;
 flex-direction: row;
 align-items: center;
 padding-top: 0.5em;
}

flex > bloq {
 vertical-align: bottom;
}

e {
 clear: both;
 width: 1px;
 height: 1px;
}

f92 {
 font-size: 0.925em;
 line-height: 0;
}

f85 {
font-size: 0.85em;
 line-height: 0;
}

linha {
 width: 33%;
 border-top: 1px solid black;
 margin: 2.5em 0 2.0em 0;
}

figure#d {
 float: right;
 margin: 2.0em 3.0em 2.0em 4.0em;
}

figure#e {
 float: left;
 margin: 2.0em 4.0em 2.0em 3.0em;
}

figcaption {
 padding: 1.0em 0 0 1.0em;
 font-size: 0.80em;
 line-height: 1.35;
}

colunatxt {
 max-width: 32.0em;
}

ul, ol {
 margin: 1.0em 0 2.0em 2.0em;
}

ul li, ol li {
 font-size: 0.95em;
 padding-bottom: 0.75em;
}

ul li:last-child, ol li:last-child {
 padding-bottom: 0;
}

/*** COISAS ESPECIFICAS DE ALGUMAS PAGINAS ***/

bloq#cred {
 width: 2.0em;
 margin: 0 1.0em;
}

.destaque {                              /* para parágrafos, precisa ser um <p></p> */
 background: rgb(238,238,238);
 margin: 1.0em 0 1.75em 0;
 padding: 1.5em 0;
}

bloq#email {
 width: 5.0em;
 margin: 0 4.0em 2.0em 2.5em;
}

versa, label#trad {
 font-variant-caps: all-small-caps;
 font-style: normal;
 letter-spacing: 0.01em;
}

iconograf99 {
 display: grid;
 grid-template-columns: repeat(auto-fill, minmax(10.0em, 1fr));
 grid-column-gap: 3.0em;
 grid-row-gap: 3.5em;
 width: 100%;
 margin-top: 1.25em;
}

#imgShow {
 width: 100%;
 min-width: 100%;
}

#imgShowI {
 width: 100%;
 height: 11.6em;
 background-size: cover;
 background-repeat: no-repeat;
 background-position: 33% 33%;
}

#imgShowT {
 vertical-align: top;
 padding: 1.25em 0 0 0;
 font-size: 0.875em;
 line-height: 1.45;
 color: black;
}

a#ws, a#ws:visited {
 color: black;
}

v {
 text-indent: -2em;
 padding: 0 0 0 2em;
}

vv {
 float: right;
 width: 2.5em;
 font-size: 0.90em;
 text-align: right;
}

section#ref p {
 padding: 0 0 1.0em 1.5em;
 font-size: 0.90em;
 line-height: 1.425;
 text-indent: -1.5em;
}

colunatxt p#apres {
 margin: 1.0em 0;
 font-size: 0.975em;
}

colunatxt p#dispo {
 margin: 1.5em 0 2.5em 0;
 padding: 1.25em;
 background: rgb(230,230,230);
 font-size: 0.90em;
}

/*** COISAS ESPECIFICAS DA PAGINA INICIAL estão na página inicial mesmo ***/



/*** COISAS ESPECIFICAS DO MENU ***/

nav#geral {
 width: auto;
 padding: 1.0em 0 2.0em 0;
 line-height: 1.8;
}

bloq#nav {
 font-family: LatoWeb bold;
 font-size: 0.875em;
 margin-right: 2.25em;
 padding: 0.225em 0.50em;           /* 4px 7px */
}

bloq#nav:last-child {
 margin-right: 0.75em;
}

bloq#nav a {
 color: rgb(0,0,0);
}

bloq#nav a:visited {
 color: rgb(120,0,0);
}

.bloqInv {
 background: rgb(120,0,0);
 color: rgb(248,248,248);
}

nav#pub {
 margin-bottom: 1.75em;
 font-size: 0.825em;
 line-height: 1.35;
 padding: 0.25em;
 background: rgb(240,240,240);
}

bloq#pub {
 font-family: LatoWeb semibold;
}

bloq#pub::after {
 content: "»";
 padding-left: 0.625em;
 padding-right: 0.625em;
}

bloq#pub:last-child::after {
 content: "»";
 padding-left: 0.625em;
 padding-right: 0;
}


/*** COISAS ESPECIFICAS DO FOOTER ***/

footer {
 padding: 2.0em 0 1.0em 0;
 display: flex;
 flex-wrap: wrap;
 flex-direction: row;
 justify-content: space-between;
 margin-top: 1.25em;
 width: 99%;
}

bloq#midia, bloq#midia bloq, bloq#exp, bloq#atual {
 vertical-align: bottom;
}

bloq#midia {
 min-width: 16.0em;		/* dá mais ou menos igual traço de 300px no article */
 padding-top: 1.0em
}

bloq#midia bloq {
 width: 1.5em;
 height: 1.5em;
 margin-right: 1.5em;
}

bloq#midia bloq:last-child {
 margin-right: 0;
}

bloq#exp, bloq#atual {
 padding-top: 1.0em;
 font-family: LatoWeb bold;
 font-size: 0.875em;
 text-align: left;
 color: rgb(0,0,0);
}

bloq#exp {
 min-width: 6.75em;
}

bloq#atual {
 min-width: 7.0em;
}

bloq#exp a, bloq#exp a:visited {
 color: rgb(0,0,0);
}

/*** TOGGLE BOX
Creating a toggle box to collapse or expand content using only CSS3
Authors: Sergey Fedus

1. checkbox = <input class="toggle-box" id="identifier-1" type="checkbox" >
2. title    = <label for="identifier-1">Click here to read more about HTML!</label>
3. content block = <div>HTML - is a language for web page markup.</div>

Vou tentar acertar um estilo para a lista de publicações (label sem nada)
outro estilo para o texto original das traduções (label#trad, por exemplo)

***/

ul#pub {					/* aqui coisas da lista das publicações */
 margin-left: 1.0em;
 list-style-type: none;
}

div#pub {
 margin: 0.75em 0 1.0em 2.0em;
}

div#pub p {
 padding: 0 0 0.75em 0;
 font-family: LatoWeb italic;
 font-size: 0.875em;
 line-height: 1.3;
}

div#pub ul {
 list-style-type: none;
 margin: 0 0 0 0.15em;
}

div#pub ul li {
 padding-bottom: 0.25em;
}

div#pub ul li::before {
 content: "\2022";
 padding-right: 0.5em;
 display: inline-block;
}

li#pag::before {
 content: "\2022";
 padding-left: 0.40em;
 padding-right: 1.1em;
}

div#trad {						/* aqui coisas das traduções */
 font-size: 0.95em;
 line-height: 1.487;
 padding: 1.0em 0 1.0em 0.75em;
}

label#trad {
 margin: 1.0em 0 1.0em 2.0em;
 font-size: 1.1em;
}

p#ref {
 margin-top: 1.0em;
 padding: 1.5em 0 1.5em 4.0em;
 font-size: 1.15em;
}


body { -webkit-animation: bugfix infinite 2s; }					/* acertos para o Safari  */
@-webkit-keyframes bugfix { from { padding: 0; } to { padding: 0; } }

.toggle-box {
  display: none;
}

.toggle-box + label {
  cursor: pointer;
  display: block;
}

.toggle-box + label + div#pub, .toggle-box + label + div#trad {
  display: none;
}

.toggle-box:checked + label + div#pub, .toggle-box:checked + label + div#trad {
  display: block;
}

.toggle-box + label:before {
  background-color: rgb(0,0,0);
/*  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px; */
  color: rgb(248,248,248);
  content: "+";
  display: block;
  float: left;
  margin: 0.15em 0.75em 0 0;
  font-weight: bold;
  line-height: 1.2;
  width: 1.325em;
  height: 1.25em;
  text-align: center;
}

.toggle-box + label:before {
  background-color: rgb(0,0,0);
}

.toggle-box:checked + label:before {
  content: "\2212";
}


/*** MEDIA QUERIES ***/

        /* mais de 1200px or less */
	@media screen and (min-width: 1201px) {

nav#geral {
 width: 29.0em;
 height: 2.5em;
 position: absolute;
 top: -4.0em;
 right: 0;
 text-align: right;
}

h1 {
 padding-top: 1.75em;
 padding-bottom: 1.25em;
 text-align: center;
}

.foto {
 width: 50%;
}

.livro {
 width: 20vw;
 max-width: 20vw;
}

					       }

	/* for 1200px or less */
	@media screen and (max-width: 1200px) {

pagewrap {
  width: 88%;
}


.livro {
 max-width: 28vw;
 width: 28vw;
}
					      }

	/* for 770px or less */
	@media screen and (max-width: 770px) {

.foto {
 margin-left: auto;
 margin-right: auto;
}

.livro {
 max-width: 36vw;
 width: 36vw;
 margin-left: auto;
 margin-right: auto;
}

bloq#midia, bloq#exp, bloq#atual {
 min-width: 100%;
}

bloq#exp {
 padding-top: 1.5em;
}

h1 {
 padding-left: 0em;
 padding-right: 0em;
 text-align: center;
}

figure#d, figure#e {
 min-width: 60%;
 max-width: 90%;
}
					     }

	/* for 480px or less */
	@media screen and (max-width: 480px) {

header logo {
 font-size: 1.75em;
}

h1 {
 padding-left: 0;
 text-align: left;
}

figure#d, figure#e {
 min-width: 100%;
 padding: 0;
 margin-right: 0;
 margin-left: 0;
}

.livro {
 min-width: 100%;
}

					     }