/* Recreates the Weebly "Cento" theme the lab site used. */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: #ffffff;
  color: #3e3e3e;
  font-family: 'Quattrocento Sans', 'Helvetica Neue', Arial, sans-serif;
  font-size: 16px;
  line-height: 25px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img { max-width: 100%; height: auto; }
a { color: #b9b9b9; text-decoration: none; transition: color 300ms ease; }
a:hover, a:focus-visible { color: #333333; }
a:focus-visible, button:focus-visible { outline: 2px solid #4562cf; outline-offset: 2px; }
h2 {
  margin: 0 0 15px;
  color: #000000;
  font-family: 'Quattrocento', Georgia, serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2em;
}
p, div.paragraph { margin: 0 0 10px; line-height: 1.5em; }
ul, ol { margin: 0 0 10px; }
blockquote { font-style: italic; border-left: 4px solid #ddd; margin: 10px 0; padding-left: 20px; line-height: 1.5; color: #888; }

.container { width: 100%; max-width: 960px; margin: 0 auto; }

/* Header */
.site-header { background: #ffffff; padding-top: 40px; }
.site-header .container { position: relative; }
.logo { display: block; width: 200px; max-width: 60vw; margin: 0 auto 20px; }
.logo img { display: block; width: 100%; }
.nav { text-align: center; padding: 10px 0; }
.nav ul { display: inline-block; list-style: none; margin: 0; padding: 0; }
.nav li { display: inline-block; padding: 0 5px; }
.nav a {
  display: block;
  padding: 5px 15px;
  color: #b9b9b9;
  text-transform: uppercase;
  letter-spacing: .07em;
  font-size: 14px;
  line-height: 19px;
}
.nav li.active > a, .nav a:hover { color: #333333; }
.hamburger { display: none; }

/* Banner (page titles on coloured bands) */
.banner-wrap { width: 100%; max-width: 1115px; margin: 20px auto 0; }
.banner { padding: 50px 20px; text-align: center; color: #ffffff; background-size: cover; background-position: center; }
.banner h2 { margin: 0; color: #ffffff; font-size: 50px; line-height: 1.2; }

/* Content */
.content-wrap { background: #ffffff; }
.content-wrap .container { padding: 40px 20px; }
.wsite-section-wrap { width: 100%; }
.wsite-spacer { width: 100%; }
.styled-hr { border: 0; border-top: 1px solid #e3e3e3; margin: 10px 0; }
hr.styled-hr { width: 100%; }

/* Multi-column layouts (Weebly tables) */
.wsite-multicol-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.wsite-multicol-col { vertical-align: top; }

/* Images */
.wsite-image { margin: 0; }
.wsite-image img { max-width: 100%; }
.galleryImageBorder { max-width: 100%; }
.imgPusher { float: left; }
.wsite-caption { display: block; font-size: 90%; }
.imageGallery::after, .wsite-multicol-col::after, .paragraph::after { content: ""; display: table; clear: both; }
.imageGallery img { cursor: zoom-in; }

/* YouTube and PDF embeds */
.wsite-youtube-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; margin: 10px 0; }
.wsite-youtube-container iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.wsite-youtube-wrapper { max-width: 720px; margin: 0 auto; }
.pdf-embed { margin: 10px 0 20px; }
.pdf-embed iframe { display: block; width: 100%; border: 1px solid #e3e3e3; background: #fafafa; }
.pdf-embed p { margin: 6px 0 0; font-size: 14px; }
.pdf-embed a { color: #4562cf; }

/* Footer */
.footer-wrap { border-top: 2px solid #f7f7f7; background: #ffffff; }
.footer { padding: 30px 20px; text-align: right; font-size: 12px; }
.footer p { margin: 0; }

/* Phone and small tablet */
@media (max-width: 767px) {
  body { padding-top: 64px; }
  .site-header {
    position: fixed; top: 0; left: 0; right: 0; z-index: 20;
    padding: 4px 0; height: 64px; border-bottom: 2px solid #f7f7f7;
  }
  .logo { width: auto; height: 56px; margin: 0 auto; text-align: center; }
  .logo img { height: 56px; width: auto; margin: 0 auto; }
  .hamburger {
    display: block; position: absolute; top: 3px; left: 5px;
    width: 50px; height: 50px; padding: 0; border: 0; background: none; cursor: pointer;
  }
  .hamburger span, .hamburger span::before, .hamburger span::after {
    position: absolute; left: 14px; display: block; width: 22px; height: 2px; background: #3e3e3e;
    content: ""; transition: transform 300ms ease, top 300ms ease, opacity 300ms ease;
  }
  .hamburger span { top: 24px; }
  .hamburger span::before { left: 0; top: -7px; }
  .hamburger span::after { left: 0; top: 7px; }
  .nav-open .hamburger span { background: transparent; }
  .nav-open .hamburger span::before { top: 0; transform: rotate(45deg); }
  .nav-open .hamburger span::after { top: 0; transform: rotate(-45deg); }
  .nav {
    position: fixed; top: 64px; left: 0; right: 0; z-index: 19;
    background: #ffffff; max-height: 0; overflow: hidden; padding: 0;
    transition: max-height 400ms ease; border-bottom: 2px solid #f7f7f7;
  }
  .nav-open .nav { max-height: 400px; }
  .nav ul { display: block; padding: 10px 0; }
  .nav li { display: block; padding: 0; }
  .nav a { padding: 10px 0; }
  .banner-wrap { margin-top: 0; }
  .banner h2 { font-size: 2.2em; }
  .content-wrap .container { padding: 20px 16px; }

  /* Stack Weebly columns */
  .wsite-multicol-table, .wsite-multicol-tbody, .wsite-multicol-tr, .wsite-multicol-col { display: block; width: 100% !important; }
  .wsite-multicol-table-wrap { margin: 0 !important; }
  .wsite-multicol-col { padding: 0 !important; }
  .imgPusher { display: none !important; }
  .paragraph > span[style*="display: table"], div > span[style*="display: table"] {
    float: none !important; display: block !important; width: 100% !important; max-width: 280px !important;
    margin: 0 auto 16px !important;
  }
  .paragraph > span[style*="display: table"] img, div > span[style*="display: table"] img { margin: 0 !important; width: 100%; }
  .galleryImageBorder { float: none !important; display: block; margin: 0 auto 16px !important; }
  .footer { text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* Long URLs in publication lists wrap instead of widening the page */
.content-wrap a { overflow-wrap: anywhere; }