/* 19&20 - artigos. Valores conforme o site (Elementor). */
@import url("http://www.dezenovevinte.net/19_20/wp-content/uploads/elementor/google-fonts/css/opensans.css");
@import url("http://www.dezenovevinte.net/19_20/wp-content/uploads/elementor/google-fonts/css/roboto.css");

:root{ --vermelho:#9F1203; --amarelo:#FFC800; --texto:#131313; --fonte:"Open Sans","Segoe UI",Arial,sans-serif;
        --recuo-citacao:56.7px }   /* 42,55pt, como no modelo; aumente aqui se quiser mais recuo */
*{ box-sizing:border-box }
body{ margin:0; font-family:var(--fonte); color:var(--texto) }
a{ color:var(--vermelho); text-decoration:none }

/* cabecalho */
header{ background:var(--vermelho); display:flex; align-items:flex-end; min-height:15vh;
        padding:0 max(20px, calc((100% - 1140px) / 2)) }   /* faixa inteira, conteudo em 1140px */
header > a{ width:34%; padding:40px 0 }
header img{ width:100%; max-width:260px; display:block }
header ul{ width:66%; list-style:none; margin:0; padding:45px 0 20px; display:flex }
header li{ flex:1 }
header ul a{ display:block; text-align:center; color:#fff; font-size:15px; font-weight:500; padding:20px 10px }
header ul a:hover, header ul a:focus{ color:var(--amarelo) }
header input, header label{ display:none }

/* artigo */
main{ max-width:1140px; margin:40px auto 80px }
main > *{ padding:0 15px }
h1{ padding:0; margin:0 0 10px; font-size:30px; font-weight:600; line-height:1.3em;
    color:var(--vermelho); text-align:justify }
main p, main blockquote, main h2{ font-size:16px; line-height:150%; text-align:justify; margin:0 0 16px }
h2{ font-size:16px; font-weight:700 }
main blockquote{ margin-left:var(--recuo-citacao) }
p.autor{ font-size:24px; color:#202020; margin-bottom:10px }
h1 a[href^="#_edn"], p.autor a[href^="#_edn"]{ font-size:16px; font-weight:400 }
p.figura{ text-align:center; margin-bottom:6px }      /* imagem no corpo, tamanho original */
p.legenda{ text-align:center; font-size:14px }        /* legenda centrada, sem numeracao */
main img{ max-width:100%; height:auto }               /* so encolhe se a tela for estreita */
p.citar, p.bolinhas{ font-size:14px }
hr{ border:0; border-top:1px solid #999; width:33%; margin:0 0 16px }

/* rodape */
footer{ background:var(--vermelho); color:#fff; font-family:"Roboto",Arial,sans-serif;
        min-height:20vh; display:flex; flex-direction:column; justify-content:center;
        text-align:center; padding:20px }
footer img{ max-width:28px; vertical-align:middle; margin:0 12px }

/* imagem ampliada */
#lightbox{ display:none; position:fixed; inset:0; z-index:99; background:rgba(0,0,0,.70);
           align-items:center; justify-content:center; padding:40px 60px }
#lightbox.aberto{ display:flex }
#lightbox figure{ margin:0; text-align:center }
#lightbox img{ max-width:100%; max-height:82vh; display:block; margin:0 auto }
#lightbox figcaption{ color:#fff; font-size:14px; font-weight:600; margin-top:14px }
#lightbox button{ position:absolute; background:none; border:0; color:#fff; cursor:pointer; opacity:.75 }
#lightbox button:hover{ opacity:1; color:var(--amarelo) }
#fechar{ top:10px; right:20px; font-size:40px }
#ant, #prox{ top:50%; transform:translateY(-50%); font-size:34px }
#ant{ left:12px } #prox{ right:12px }
body.travado{ overflow:hidden }

/* tablet e celular */
@media(max-width:1024px){
  header{ padding:15px; min-height:0 }
  header > a{ width:25% } header ul{ width:75%; padding:0 }
  header ul a{ font-size:12px; padding:10px 5px }
}
@media(max-width:767px){
  header{ flex-wrap:wrap; align-items:center; padding:0; position:relative }
  header > a{ width:auto; padding:15px } header img{ max-width:220px }
  header label{ display:block; margin-left:auto; margin-right:15px; color:#fff; font-size:30px; cursor:pointer }
  header ul{ display:none; width:100%; padding:0; flex-direction:column; background:#f2f2f2 }
  header input:checked ~ ul{ display:flex }
  header ul a{ color:#000; text-align:left; padding:12px 20px }
  h1{ font-size:22px; text-align:left }
  main > *{ padding:0 20px }
  main blockquote{ margin-left:calc(var(--recuo-citacao) / 2) }
  #lightbox{ padding:50px 12px }
}