/* ordinarily the flex container only activates above 600px */
.container.flex { display: flex; justify-content: center;  margin: 0 -0.25em;}
.container.flex.wrap { flex-wrap: wrap; }


.remember-thumb.has-img { 
   display: flex; 
   flex-wrap: wrap;
   flex-direction: column;
   align-items: flex-start;
   margin: 0 0.25em 0.5em 0.25em;
   width: 112px;
   min-height: 150px;
   font-size: 0.875em;
   background: #e8e8e8;
   color: #689;
   justify-content: flex-start;
}
.remember-thumb.has-img img { display: flex; flex: 0 1 auto; width: 112px; height: 80px; }

.remember-thumb.has-img.festival { background: #fff4d4;  }

.remember-thumb.has-img.folkarts { background: #ffedb3; }

.remember-thumb.has-img.festival.fox {
background: url(../remember/2020-2021/FEST-2021/festival_fox2_detail_for_remember_when.png), url(../remember/2021-FEST/festival_sun2_for_remember_when.png)  bottom left no-repeat #fff4d4; background-size: cover, contain;
}

.remember-thumb.covid-canceled img {opacity: 0.2; } 
.remember-thumb.has-img span { 
   flex: 0 1 auto; 
   margin: 0.5em 0.25em;
   padding: 0; 
   text-align:center;
   align-self: center;
   text-indent: 0;
}


.remember-thumb.has-img.divider { 
   background: #0178a3; 
   color: white; 
}
.remember-thumb.has-img.divider h2 { 
   text-align: center; 
   font-size: 3em; 
   line-height: 0.8125em;
   padding: 0.75rem 0.5rem 0.5rem 0.5rem;
}  


.remember-thumb img { display: none; }

section > .remember-thumb > h2 { 
   font-family: 'Roboto Slab', Roboto, Arial, Helvetica, sans-serif; 
   font-weight: bold;
   background: #0178a3;
   color: white;
   padding: 0.5rem;
   margin-top: 2rem !important;
}
.remember-thumb span { display: block; margin: 0.125em 0.5em 0.5em; text-indent: -1em; padding-left: 1em;}

.remember-thumb .a2a     { color: #0178a3; font-weight:bold; }
.remember-thumb .a2a-res { color: #e9703e; font-size: 0.75em; font-weight:bold; }

.remember-thumb.has-img .a2a { margin-top: 0; }



.coffee.box { 
   margin-top: 9em !important; 
   background: wheat; 
   margin-left: -1rem;
   padding-left: 1rem;
   color: #5c2c28; 
   font-size: 0.875em;
}
.coffee.box .intro { padding-top: 0.5em; } 
.coffee.box .outro { padding-top: 2rem; padding-bottom: 2rem; }

.coffee.box h3 { background: #5c2c28; }
.coffee.box h4 { color: #5c2c28; margin: 2em 0 0.5em 0; font-size: 1.125em; 
   font-family: 'Roboto Slab', Roboto, Arial, Helvetica, sans-serif;}
.coffee.box  a,
.coffee.box em.mocklink { color: #5c2c28; text-decoration: none; }
.coffee.box  a:hover { text-decoration: underline; }

.coffee.box h4.year { border-bottom: solid 2px #5c2c28; margin-right: 2rem; }

.sidemenu .coffee.box ul { padding: 0; }
.sidemenu .coffee.box li { margin: 0; padding: 0.25em 1em 0 1em; border-bottom: none;}
.sidemenu .coffee.box li:before { display: none; }
.sidemenu .coffee.box a  { display: inline; }

.coffee.box p { margin-right: 0.75rem; }


/* page for events 1985 to 2015 */
.remember-thumb.initial.divider.see-more { background-color: crimson; border-radius: 1em; }
.remember-thumb.initial.divider.see-more a { text-decoration: none; color: #f8f8f8; }
.remember-thumb.initial.divider h2 { font-size: 1.25rem; line-height: 1.2; border-bottom: none; }


@media print {
    .remember-thumb.has-img { border: solid 1px silver; width: 114px !important;}
    .remember-thumb.has-img.divider { border: solid 3px #0178a3; }
    .for-page-content .divider h2 { border-bottom: none; color: #0178a3 !important;}
}