body {
   font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
   margin-bottom:10rem;
}
div#contenido, .header {
   max-width:1024px;
   margin:0 auto;
}
.header {
   font-size:1rem;
   margin-bottom:.5rem;
}
figure { margin:0; padding:0; }
@media (min-width:1024px) {
   .row {
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      grid-gap: 2rem;
   }
   .col-12 { grid-column: span 12; }
   .col-6 { grid-column: span 6; }
   .col-7 { grid-column: span 7; }
   .col-5 { grid-column: span 5; }
   .col-4 { grid-column: span 4; }
   div.ocho figure {
      height:25rem;
      overflow: hidden;
   }
   div.ocho figure img {
      max-width:130%;
      margin-left:-15%;
   }
}
h1 {
   font-size: 2.5rem;
   line-height: 2.8rem;
}

h1 { margin:0; margin-bottom:.5rem; }
a { color: #000; text-decoration: none;}
.ocho {
   border-bottom: 1rem solid #f5f5f5;
   padding-bottom: 1rem;
}
.ocho p {
   font-size:1.2rem; 
   color:#444; 
}
.ocho p.em {
   font-style: italic;
   color:#222;
   font-family: Georgia, 'Times New Roman', Times, serif;
   font-size:1.5rem;
}
.image { max-width:100%; height:auto; }
div.pub {
   min-height:100px; margin-top:2rem; margin-bottom:2rem;
   min-width:300px;
   text-align: center;
   align-content: center;
}
div.pub300 { width:300px; height:250px; text-align: center; }
div.pub600 { width:300px; height:600px; text-align: center; }
@media (min-width:1024px) {
   div.pub300 { width:900px; height:200px; }
}
figure.imagesmall {
   float:left;
   margin-right:1rem;
   width:30%;
   margin-bottom:1rem;
   height: 6rem;
   overflow: hidden;
   border-radius: 0.5rem;
}
figure.imagesmall img { max-width:120%;width: 100%;height: auto; }

h2,h3,h4, div#masnotas article strong {
   font-size:1.5rem;
   margin:0;
   font-family: Georgia, 'Times New Roman', Times, serif;
   font-weight: 400;
   margin-bottom:.2rem;
}
.bigone {
   font-size:2.5rem;
}
div#masnotas article strong {
   display:block;
}
@media (max-width: 768px) {
   figure.imagesmall {
      margin-right: 1rem;
      height: 8rem;
      width: 40%;
   }
   h2,h3,h4 {
      font-size:1.3rem;
   }
}
.articles article {
   border-bottom:1px solid #ddd;
   margin-top:1.4rem;
   min-height:11rem;
}
.articles article small {
   font-size:.7rem;
   text-transform: uppercase;
}
.articles article p {
   line-height: 1.3rem;
   color: #333;
}
header {
   justify-content: center;
   text-align: center;
}
.tomato { color:tomato; font-style: normal; font-size: .8rem; }
.ocho em { font-style: normal; font-size: .75rem; text-transform: uppercase; color:#900; }
.logo { max-width:90%; height:auto; text-align: center; }
header .menu {
   display: flex;
   flex-wrap: nowrap;
   overflow-x: auto;
   white-space: nowrap;
   text-transform: uppercase;
   font-size:.85rem;
   border-bottom:1px solid #000000;
   margin-bottom:1rem;
   margin-top:.5rem;
}
header .menu a {
   padding: 0.5rem;
   border-top:1px solid white;
}
header .menu a:hover {
   border-top:1px solid tomato;
}
header .menu a:first-child {
   border-top:1px dotted tomato;
}
.toptomato {
   border-top:1px solid tomato !important;
}
.sticky { position: -webkit-sticky; position: -moz-sticky; position: -ms-sticky; position: -o-sticky; position: sticky; top: .5rem; }

/*
blockquote {
   margin:0;
   font-size:1.1rem;
   padding:1rem .5rem;
   background:#fff9f9;
}*/

footer {
   padding-top:1rem;
   margin:0 auto;
   text-align: center;
   background:#f7f7f7;
   padding-bottom:1rem;
}
div.otros {
   margin:2rem 1.5rem;
   font-size:1.2rem;
   font-weight: 300;
}
div.otros a { line-height: 1.9rem; }
div.otros a:hover {
   background: rgb(255, 255, 237);
}
div.ultimas small {
   display:block;
   color:#900;
}
div.ultimas ol li { margin-bottom:.5rem; }
div.ultimas ol li a {
   padding: 0.5rem 0;
   display: block;
   border-bottom: 1px solid #ececec;
}
button {
   font-size: 1.35rem;
   padding: 0.5rem 1rem;
   background: #ecf7ff;
   border: 1px solid rgb(173, 205, 255);
   border-radius: 0.5rem;
   cursor:pointer;
}
img#loading {
   width: 30px;
   height: 30px;
   margin-lefT: 1rem;
   display: none;
}
.eltema {
   font-size: 4rem;
   font-weight: normal;
   margin: 2rem 0;
   padding: 1rem;
   text-align: center;
   border-bottom: 1px solid #000;
   border-top: 1px solid #000;
   text-transform: uppercase;
}
@media (max-width:768px) {
   .eltema { font-size:2rem; }
}
p.lead { font-size:1.4rem; font-weight: normal;}
form#busca {
   margin:0 auto;
   width:720px;
   max-width:90%;
   text-align: center;
   background: #f2f2f2;
   border-radius:.5rem;
   padding:1rem;
}
input {
   font-size:1.4rem;
   padding:.5rem 1rem;
}
input#query {
   width:350px;
}
@media (max-width:768px) {
   input#query { margin-bottom:1rem; max-width:80%; }
}
article.dummy { position:relative;  }
article.dummy figure { height:9rem; }
article.dummy .imagesmall {
   background: linear-gradient(94deg, #e5e5e5, transparent);
   background-size: 100% 100px;
}
article.dummy h3 {
   background: linear-gradient(45deg,#ddd,transparent);
   left: 45%;
   position:absolute;
   padding:1rem;
}
article.dummy h3 span {
   background: linear-gradient(#fff,#fff) left no-repeat
   rgba(0, 0, 0, .3);
   background-size:0% 100%;
   -webkit-background-clip: text;
   background-clip: text;
   -webkit-text-fill-color: transparent;
   color: transparent;
   animation:loading 5s forwards linear;
}
@keyframes loading {
   to { background-size:100% 100%; }
 }
.botone {
   width: 211px;
   height: 45px;
   text-align: center;
}
.botone:after {
   content: "";
   width: 30px;
   height: 30px;
   display: inline-block;
   float: right;
   background: url(https://www.elsiglodetorreon.com.mx/media/loading.svg);
}
/*
article.dummy h3:before, article.dummy span:before {
   content: "";background: #f1f1f1; width: 90%; height: 2.5rem; display: inline-block;
   left: 45%;
   position:absolute;
   width:45%;
 }
*/
div#mas { margin:2rem auto; text-align: center; display:none; }
time:before {
   content:"—";
   padding-left:.3rem;
   padding-right:.3rem;
   color:#999;
}
div#pics {
   display: grid;
   grid-template-columns: repeat(12, 1fr);
   grid-gap: .5rem;
}
div#pics figure {
   overflow:hidden;
   height:8rem;
}
div#pics figure img { max-width:100%; height:auto; }
.my-3 { margin-top:2rem; margin-bottom:2rem; }

ol li {
   padding:.5rem 0;
   font-size:1.1rem;
}
.small { font-size:small; }
div#error {
   display:none;
   font-size:2rem;
   margin:3rem auto;
   width:50%;
   padding:1rem;
   text-align: center;
   background: #fff5f5;
   border-radius: 1rem;
}
div#error span,.red { color: red; display:block; font-size:5rem; }
div#error.show {
   display:block !important;
}
#busca p {
   margin:1rem 0 0 0;
}
@media (min-width:1024px) {
   #titulo { font-size:4.5rem; line-height: 4.5rem;}
}
.hr {
   height: 1.5rem;
   color: beige;
   background: beige;
   border: 0;
   border-bottom: 1px solid #e8e8d6;
}
div#buscabusca {
   text-transform: lowercase;
   margin-bottom:1rem;
   line-height:1.5rem;
}
div#buscabusca a:before, p#fechas a:before {
   content:"» "
}
p#fechas {
   text-align:center;
}
p#fechas a {
   background: #fff9cf;
   padding: 0.5rem;
   border-radius: 0.5rem;
}
.mb-2 {
   margin-bottom:1rem;
}
#vids p {
   border-bottom:1px solid #ddd;
   padding-bottom:1rem;
   border-top: 1px solid #ddd;
   padding-top: 1rem;
}
#vids small { color:#900; }

blockquote.bq-2 {
   text-align: center!important;
}

blockquote.bq-2 > p {
   line-height: 1.6!important;
   font-size: 1.5rem!important;
   border: none!important;
   font-family: "Merriweather"!important;
   font-weight: 100!important;
}