/* Banner. */
header, .main header {background-image: none; padding: 0}
header hgroup {font-size: 4vw; line-height: 1.1; text-align: center}
.main header hgroup {font-size: 6vw} /* Larger on the main page */
header hgroup h1 {font-size: 100%; margin: 0; padding: 0}
header hgroup h1 img {display: block; padding: 0.5em 0;
  height: 3em; width: 100%; object-fit: contain}
.main header hgroup h1 img {height: 2.5em} /* Not as much larger as the font */
header h2, header h3 {font-size: 50%;
  width: 48%; margin: 0; padding: 0}
header h2 {float: left; color: hsl(0,80%,45%); text-align: right;
  padding-right: 1em;
  background: radial-gradient(circle at 100% 50%, currentcolor,
    currentcolor 0.5em, transparent 0.5em)}
header h3 {float: left; color: hsl(205,80%,30%); text-align: left;
  padding-left: 1em;
  background: radial-gradient(circle at 0% 50%, currentcolor,
    currentcolor 0.5em, transparent 0.5em)}
header h2, header h3 {width: 50%; box-sizing: border-box}
.main header h2 {color: hsl(205,80%,30%)} /* Reverse colors on the main page */
.main header h3 {color: hsl(0,80%,45%)}

footer h2 {color: hsl(205,80%,30%)}

/* Different sizes for different categories of sponsors. * /
.platinum.sponsors {font-size: 2.75em}
.media.sponsors {font-size: 2.5em}
.exhibitor.sponsors {font-size: 2.25em}
/**/
#sponsors h3 {font-style: normal; font-weight: inherit; font-size: smaller;
  padding-top: 0}

/* Descriptions of a breakout sessions on breakouts.html. */
.description[open] {border: thin solid; padding: 1em;
  background: no-repeat bottom right / 2em 2em linear-gradient(135deg,
    transparent, transparent 50%, currentColor 50%, currentColor)}
.description blockquote {margin-left: 2em}
.description blockquote::before {content: "\e019"; float: left;
  font-family: iconmonstr-iconic-font; font-size-adjust: 1.0;
  font-style: normal; width: 2em; margin-left: -2em}
blockquote > :last-child {margin-bottom: 0}

@media all {

  /* Trying with less space between the sections. The following rules
   override the rules in tpac2.css that increase the border between
   sections to 7.2rem on big screens. The border is instead kept at
   3.6rem, the same as on small screens. */
@media (min-width: 46em) and (min-height: 46em), (min-width: 56em) {
  section, section:not(.wide), footer {border-top-width: 3.6rem;
    border-bottom-width: 3.6rem}
  .skip {top: -3.6rem}
  footer {min-height: calc(100vh - 7.2rem)}
}
@media (min-width: 46em) and (min-height: 46em) {
  section > .decoration img {margin: -3.6rem 0 1.3rem}
}
@media (min-width: 56em) {
  section > .decoration img {margin: 0}
}
@media (min-width: 56em) {
  @supports (right: calc(100% - 10rem)) {
    /* If the block is a <section>, the image height includes the borders: */
    section > .decoration {height: calc(100% + 7.2rem);
      top: -3.6rem}
    .decoration img {display: block; height: 100%; max-width: none}
    /* If the decorated block is the first thing in a section after the
       skip link, align the image with the top of the section: */
    section > .skip + .decorated > .decoration {top: -3.6rem;
      height: calc(100% + 3.6rem)}
    section > .skip + details.decorated > .decoration {
      height: calc(100% + 7.2rem)}
  }
}

}