/*
 * The Schools Challenge: Events / History page restyle.
 * Load after screenNEW.css and home.css.
 * Scoped to body#aboutus; the header, menu and footer are untouched.
 */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:wght@500;600&display=swap');

body#aboutus > #container {
  --tsc-navy:#192b6d;
  --tsc-blue:#2f5caa;
  --tsc-sky:#91c5ed;
  --tsc-pale:#edf6fc;
  --tsc-ink:#172243;
  --tsc-muted:#5e6981;
  --tsc-line:rgba(25,43,109,.16);
  --tsc-serif:'Playfair Display',Georgia,serif;
  --tsc-sans:'DM Sans',Arial,sans-serif;
  box-sizing:border-box;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) 270px;
  grid-template-areas:'title title' 'content sidebar';
  align-items:start;
  gap:24px;
  width:min(1000px,calc(100% - 2*clamp(18px,4vw,56px)))!important;
  max-width:1000px!important;
  min-height:0!important;
  margin:0 auto!important;
  padding:clamp(38px,6vw,66px) 0 clamp(52px,7vw,78px)!important;
  background:transparent!important;
  color:var(--tsc-ink);
  font:400 16px/1.7 var(--tsc-sans);
  -webkit-font-smoothing:antialiased;
}

body#aboutus > #container::before {
  content:'';
  position:fixed;
  z-index:-2;
  inset:0;
  background:linear-gradient(180deg,var(--tsc-pale) 0,#fff 680px);
}

body#aboutus > #container *,
body#aboutus > #container *::before,
body#aboutus > #container *::after { box-sizing:border-box; }

body#aboutus > #container > br,
body#aboutus > #container > .clearallclass { display:none!important; }

body#aboutus > #container > h1.indent20 {
  grid-area:title;
  position:relative;
  width:100%!important;
  margin:0!important;
  padding:0 0 20px!important;
  color:var(--tsc-navy)!important;
  font:500 clamp(2rem,4vw,3rem)/1.12 var(--tsc-serif)!important;
  letter-spacing:-.025em;
  text-align:left!important;
}

body#aboutus > #container > h1.indent20::after {
  content:'';
  position:absolute;
  left:0;
  bottom:0;
  width:78px;
  height:5px;
  background:var(--tsc-blue);
}

body#aboutus > #container > h1.indent20 br { display:none!important; }

/* History content */
body#aboutus > #container > div#aboutus.floatleft {
  grid-area:content;
  float:none!important;
  width:100%!important;
  min-width:0!important;
  margin:0!important;
  padding:0!important;
}

body#aboutus > #container > div#aboutus .aboutusp {
  width:100%!important;
  margin:0 0 14px!important;
  padding:clamp(20px,3vw,28px)!important;
  border:1px solid var(--tsc-line)!important;
  border-left:5px solid var(--tsc-blue)!important;
  background:#fff!important;
  color:var(--tsc-ink)!important;
  font:400 1rem/1.72 var(--tsc-sans)!important;
  box-shadow:0 8px 25px rgba(25,43,109,.055);
}

body#aboutus > #container > div#aboutus .aboutusp:nth-of-type(even) {
  border-left-color:var(--tsc-sky)!important;
  background:var(--tsc-pale)!important;
}

body#aboutus > #container > div#aboutus .aboutusp:first-of-type {
  padding:clamp(24px,3.5vw,34px)!important;
  border-top:5px solid var(--tsc-navy)!important;
  border-left:1px solid var(--tsc-line)!important;
  color:var(--tsc-navy)!important;
  font-size:1.08rem!important;
  font-weight:500!important;
}

body#aboutus > #container > div#aboutus strong { color:var(--tsc-navy);font-weight:700; }

body#aboutus > #container > div#aboutus .subtitle {
  display:block!important;
  width:100%!important;
  margin:0 0 12px!important;
  padding:0 0 10px!important;
  border-bottom:2px solid var(--tsc-sky)!important;
  color:var(--tsc-navy)!important;
  font:600 clamp(1.3rem,2.2vw,1.55rem)/1.25 var(--tsc-serif)!important;
  letter-spacing:-.015em!important;
  text-align:left!important;
}

/* Variable sponsor sidebar */
body#aboutus > #container > #advertssidebar {
  grid-area:sidebar;
  display:flex!important;
  flex-direction:column;
  float:none!important;
  width:100%!important;
  min-width:0!important;
  margin:0!important;
  padding:14px!important;
  background:#fff!important;
  border:1px solid var(--tsc-line)!important;
  border-top:5px solid var(--tsc-navy)!important;
  box-shadow:0 10px 28px rgba(25,43,109,.075);
}

body#aboutus > #container > #advertssidebar > br,
body#aboutus > #container > #advertssidebar > .thicklineadvertdivider { display:none!important; }

body#aboutus > #container > #advertssidebar > a {
  display:flex!important;
  align-items:center;
  justify-content:center;
  width:100%!important;
  min-height:112px;
  margin:0 0 12px!important;
  padding:10px!important;
  border:1px solid var(--tsc-line);
  background:#fff;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}

body#aboutus > #container > #advertssidebar > a:last-of-type { margin-bottom:0!important; }
body#aboutus > #container > #advertssidebar > a:hover { transform:translateY(-2px);border-color:var(--tsc-sky);box-shadow:0 8px 18px rgba(25,43,109,.12); }
body#aboutus > #container > #advertssidebar > a img { display:block!important;width:auto!important;max-width:100%!important;height:auto!important;max-height:145px!important;margin:auto!important;object-fit:contain!important; }

body#aboutus > #container #SocialMediaShareButtons {
  width:100%!important;
  margin:0 0 14px!important;
  padding:16px 10px!important;
  background:var(--tsc-pale)!important;
  border:0!important;
  text-align:center!important;
}

body#aboutus > #container #SocialMediaShareButtons h1,
body#aboutus > #container #SocialMediaShareButtons h2 {
  margin:0 0 10px!important;
  padding:0!important;
  color:var(--tsc-navy)!important;
  font:600 1rem/1.3 var(--tsc-sans)!important;
  text-align:center!important;
}

body#aboutus > #container #SocialMediaShareButtons table { width:auto!important;margin:0 auto 8px!important;border:0!important; }
body#aboutus > #container #SocialMediaShareButtons td { width:auto!important;padding:4px 7px!important;border:0!important;background:transparent!important; }
body#aboutus > #container #SocialMediaShareButtons img { max-width:42px!important;height:auto!important;margin:0!important; }
body#aboutus > #container #SocialMediaShareButtons .thicklineadvertdivider { display:none!important; }

@media (max-width:760px) {
  body#aboutus > #container {
    grid-template-columns:1fr;
    grid-template-areas:'title' 'content' 'sidebar';
    gap:20px;
  }

  body#aboutus > #container > #advertssidebar {
    display:grid!important;
    grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
    gap:12px;
  }

  body#aboutus > #container > #advertssidebar > #SocialMediaShareButtons { grid-column:1/-1;margin:0!important; }
  body#aboutus > #container > #advertssidebar > a { min-height:125px;margin:0!important; }
}

@media (max-width:480px) {
  body#aboutus > #container { width:calc(100% - 30px)!important;padding:32px 0 52px!important; }
  body#aboutus > #container > h1.indent20 { font-size:2rem!important; }
  body#aboutus > #container > div#aboutus .aboutusp { padding:20px!important;font-size:.98rem!important; }
  body#aboutus > #container > #advertssidebar { grid-template-columns:1fr 1fr;padding:10px!important;gap:9px; }
  body#aboutus > #container > #advertssidebar > a { min-height:105px;padding:7px!important; }
}

@media (max-width:340px) {
  body#aboutus > #container > #advertssidebar { grid-template-columns:1fr; }
}

@media (prefers-reduced-motion:reduce) {
  body#aboutus > #container *,body#aboutus > #container *::before,body#aboutus > #container *::after { transition:none!important; }
}
