@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-stretch: normal;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/roboto/v49/KFOMCnqEu92Fr1ME7kSn66aGLdTylUAMQXC89YmC2DPNWubEbWmT.ttf) format('truetype');
}
@font-face {
  font-family: "FontAwesome";
  font-display: block;
  src: url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/webfonts/fa-solid-900.woff2) format("woff2"), url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/webfonts/fa-solid-900.ttf) format("truetype");
}
@font-face {
  font-family: "FontAwesome";
  font-display: block;
  src: url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/webfonts/fa-brands-400.woff2) format("woff2"), url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/webfonts/fa-brands-400.ttf) format("truetype");
}
@font-face {
  font-family: "FontAwesome";
  font-display: block;
  src: url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/webfonts/fa-regular-400.woff2) format("woff2"), url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/webfonts/fa-regular-400.ttf) format("truetype");
  unicode-range: u+f003,u+f006,u+f014,u+f016-f017,u+f01a-f01b,u+f01d,u+f022,u+f03e,u+f044,u+f046,u+f05c-f05d,u+f06e,u+f070,u+f087-f088,u+f08a,u+f094,u+f096-f097,u+f09d,u+f0a0,u+f0a2,u+f0a4-f0a7,u+f0c5,u+f0c7,u+f0e5-f0e6,u+f0eb,u+f0f6-f0f8,u+f10c,u+f114-f115,u+f118-f11a,u+f11c-f11d,u+f133,u+f147,u+f14e,u+f150-f152,u+f185-f186,u+f18e,u+f190-f192,u+f196,u+f1c1-f1c9,u+f1d9,u+f1db,u+f1e3,u+f1ea,u+f1f7,u+f1f9,u+f20a,u+f247-f248,u+f24a,u+f24d,u+f255-f25b,u+f25d,u+f271-f274,u+f278,u+f27b,u+f28c,u+f28e,u+f29c,u+f2b5,u+f2b7,u+f2ba,u+f2bc,u+f2be,u+f2c0-f2c1,u+f2c3,u+f2d0,u+f2d2,u+f2d4,u+f2dc;
}
@font-face {
  font-family: "FontAwesome";
  font-display: block;
  src: url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/webfonts/fa-v4compatibility.woff2) format("woff2"), url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/webfonts/fa-v4compatibility.ttf) format("truetype");
  unicode-range: u+f041,u+f047,u+f065-f066,u+f07d-f07e,u+f080,u+f08b,u+f08e,u+f090,u+f09a,u+f0ac,u+f0ae,u+f0b2,u+f0d0,u+f0d6,u+f0e4,u+f0ec,u+f10a-f10b,u+f123,u+f13e,u+f148-f149,u+f14c,u+f156,u+f15e,u+f160-f161,u+f163,u+f175-f178,u+f195,u+f1f8,u+f219,u+f27a;
}
html {
  --hatters-primary: #f78f20;
  --hatters-primary-hover: #d87d1c;
}
@font-face {
  font-family: 'Bebas Neue';
  src: url('/fonts/BebasNeue-Regular.ttf');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
  size-adjust: 120%;
}
@font-face {
  font-family: 'Dancing Script';
  src: url('/fonts/DancingScript-Regular.ttf');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Kaushan Script';
  src: url('/fonts/KaushanScript-Regular.ttf');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
@media (max-width: 480px) {
  .hide-mobile {
    display: none;
  }
}
@media (min-width: 481px) and (max-width: 640px) {
  .hide-tablet {
    display: none;
  }
}
@media (min-width: 641px) and (max-width: 1280px) {
  .hide-small-desktop {
    display: none;
  }
}
@media (min-width: 1281px) {
  .hide-desktop {
    display: none;
  }
}
body {
  background: var(--scheme-background);
  color: var(--scheme-foreground);
  --scheme-foreground: black;
  --scheme-background: white;
  --scheme-accent: var(--hatters-primary);
  --font-size-smaller: 12px;
  --font-size-body: 16px;
  --font-size-larger: 24px;
  --font-size-subheader: 32px;
  --font-size-header: 48px;
  --font-size-giant: 80px;
  --font-size-ludicrous: 120px;
  font-family: Roboto, sans-serif;
  font-size: var(--font-size-body);
  --hatters-font-primary: 'Bebas Neue', sans-serif;
  --button-padding-vertical: 0.5em;
  --button-padding-horizontal: 1em;
  --polaroid-rotate-default: 6deg;
  --polaroid-rotate-hover: -3deg;
  --gallery-item-size: 20em;
  --gallery-item-gap: 1em;
  --page-width: 90vw;
}
@media (max-width: 1280px) {
  body {
    --font-size-larger: 18px;
    --font-size-subheader: 24px;
    --font-size-header: 36px;
    --font-size-giant: 60px;
    --font-size-ludicrous: 90px;
  }
}
@media (max-width: 640px) {
  body {
    --font-size-larger: 15px;
    --font-size-subheader: 20px;
    --font-size-header: 30px;
    --font-size-giant: 50px;
    --font-size-ludicrous: 75px;
  }
}
@media (max-width: 480px) {
  body {
    --font-size-larger: 15px;
    --font-size-subheader: 20px;
    --font-size-header: 30px;
    --font-size-giant: 50px;
    --font-size-ludicrous: 75px;
  }
}
body > svg {
  display: block;
  height: 0;
}
@media (min-width: 1281px) {
  body {
    --page-width: 1280px;
  }
}
.hatters-scheme-a {
  background: var(--scheme-background);
  color: var(--scheme-foreground);
  --scheme-foreground: black;
  --scheme-background: white;
  --scheme-accent: var(--hatters-primary);
}
.hatters-scheme-b {
  background: var(--scheme-background);
  color: var(--scheme-foreground);
  --scheme-foreground: white;
  --scheme-background: var(--hatters-primary);
  --scheme-accent: white;
}
.hatters-scheme-c {
  background: var(--scheme-background);
  color: var(--scheme-foreground);
  --scheme-foreground: white;
  --scheme-background: black;
  --scheme-accent: var(--hatters-primary);
}
.scheme-orange {
  background: var(--scheme-background);
  color: var(--scheme-foreground);
  --scheme-foreground: white;
  --scheme-background: var(--hatters-primary);
  --scheme-accent: white;
}
section.bordered {
  display: flex;
}
section.bordered > * {
  flex: 1 1 auto;
}
section.bordered > aside {
  display: flex;
  gap: 1em;
  flex-direction: column;
  flex: 0 0 20%;
  min-width: 0;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2em;
  overflow: hidden;
}
section.bordered > aside:is(ul, ol) {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
section.bordered > aside > .share {
  align-self: flex-start;
}
section.bordered > aside > a {
  max-width: 100%;
  gap: 1em;
  transition: all 0.5s;
}
section.bordered > aside > a > img {
  aspect-ratio: 1 / 1;
  object-fit: contain;
  width: 4em;
  transition: all 0s 0.5s, color 0s 0s;
  overflow: hidden;
  filter: drop-shadow(0 1000px 0 currentColor);
}
section.bordered > aside > a > div {
  font-size: var(--font-size-subheader);
  max-width: 100%;
  hyphens: auto;
  word-wrap: break-word;
  overflow-wrap: break-word;
}
section.bordered > aside > a:hover {
  text-decoration: none;
  color: var(--scheme-accent);
}
section.bordered > aside > a:hover > img {
  transition: all 0s 0s;
  translate: 0 -1000px;
}
section.bordered > aside > * {
  display: flex;
  gap: 1em;
  flex-direction: column;
  align-items: center;
}
section.bordered > aside > *:is(ul, ol) {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
section.bordered > aside > * > .share {
  align-self: flex-start;
}
section.bordered > section {
  min-width: 0;
}
@media (max-width: 1280px) {
  section.bordered {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 1em;
  }
  section.bordered > section {
    grid-row: 1;
    grid-column: 1 / -1;
    padding: 1em;
  }
  section.bordered > aside {
    padding: 0 2em;
  }
}
section.card-section {
  display: flex;
  justify-content: center;
  gap: 2em;
  flex-wrap: wrap;
}
section.card-section > * {
  flex: 1 1 200px;
  text-align: center;
  background: white;
  padding: 1em;
  border-radius: 0.5em;
  box-shadow: 0 2px 10px 0px rgba(0, 0, 0, 0.5);
}
section.card-section > .card {
  transition: all 0.5s;
}
section.card-section > .card:hover {
  transform: scale(1.1);
  color: var(--hatters-primary);
}
section.card-section > .card > img {
  aspect-ratio: 2 / 3;
  max-height: 400px;
  width: 100%;
  object-fit: cover;
}
section.card-section > .card > div {
  font-size: var(--font-size-header);
}
section.split {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
}
section.split > * {
  flex: 1 1 0;
}
section.floating {
  max-width: min(80vw, 1200px);
  margin: 0 auto;
  background: white;
  margin-bottom: -4em;
  position: relative;
  z-index: 10;
  box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.25);
}
@media (max-width: 640px) {
  #ifdq7j {
    grid-template-columns: 1fr;
  }
}
h1,
h2,
h3,
h4,
h5,
button,
.button,
.main-menu,
.bordered aside {
  font-family: var(--hatters-font-primary);
  font-weight: normal;
}
h1,
h2 {
  text-align: center;
}
img {
  max-width: 100%;
}
img:not(.loaded) {
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/Pgo8IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPgo8c3ZnIHdpZHRoPSI0MHB4IiBoZWlnaHQ9IjQwcHgiIHZpZXdCb3g9IjAgMCA0MCA0MCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4bWw6c3BhY2U9InByZXNlcnZlIiBzdHlsZT0iZmlsbC1ydWxlOmV2ZW5vZGQ7Y2xpcC1ydWxlOmV2ZW5vZGQ7c3Ryb2tlLWxpbmVqb2luOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjEuNDE0MjE7IiB4PSIwcHgiIHk9IjBweCI+CiAgICA8ZGVmcz4KICAgICAgICA8c3R5bGUgdHlwZT0idGV4dC9jc3MiPjwhW0NEQVRBWwogICAgICAgICAgICBALXdlYmtpdC1rZXlmcmFtZXMgc3BpbiB7CiAgICAgICAgICAgICAgZnJvbSB7CiAgICAgICAgICAgICAgICAtd2Via2l0LXRyYW5zZm9ybTogcm90YXRlKDBkZWcpCiAgICAgICAgICAgICAgfQogICAgICAgICAgICAgIHRvIHsKICAgICAgICAgICAgICAgIC13ZWJraXQtdHJhbnNmb3JtOiByb3RhdGUoLTM1OWRlZykKICAgICAgICAgICAgICB9CiAgICAgICAgICAgIH0KICAgICAgICAgICAgQGtleWZyYW1lcyBzcGluIHsKICAgICAgICAgICAgICBmcm9tIHsKICAgICAgICAgICAgICAgIHRyYW5zZm9ybTogcm90YXRlKDBkZWcpCiAgICAgICAgICAgICAgfQogICAgICAgICAgICAgIHRvIHsKICAgICAgICAgICAgICAgIHRyYW5zZm9ybTogcm90YXRlKC0zNTlkZWcpCiAgICAgICAgICAgICAgfQogICAgICAgICAgICB9CiAgICAgICAgICAgIHN2ZyB7CiAgICAgICAgICAgICAgICAtd2Via2l0LXRyYW5zZm9ybS1vcmlnaW46IDUwJSA1MCU7CiAgICAgICAgICAgICAgICAtd2Via2l0LWFuaW1hdGlvbjogc3BpbiAxLjVzIGxpbmVhciBpbmZpbml0ZTsKICAgICAgICAgICAgICAgIC13ZWJraXQtYmFja2ZhY2UtdmlzaWJpbGl0eTogaGlkZGVuOwogICAgICAgICAgICAgICAgYW5pbWF0aW9uOiBzcGluIDEuNXMgbGluZWFyIGluZmluaXRlOwogICAgICAgICAgICB9CiAgICAgICAgXV0+PC9zdHlsZT4KICAgIDwvZGVmcz4KICAgIDxnIGlkPSJvdXRlciI+CiAgICAgICAgPGc+CiAgICAgICAgICAgIDxwYXRoIGQ9Ik0yMCwwQzIyLjIwNTgsMCAyMy45OTM5LDEuNzg4MTMgMjMuOTkzOSwzLjk5MzlDMjMuOTkzOSw2LjE5OTY4IDIyLjIwNTgsNy45ODc4MSAyMCw3Ljk4NzgxQzE3Ljc5NDIsNy45ODc4MSAxNi4wMDYxLDYuMTk5NjggMTYuMDA2MSwzLjk5MzlDMTYuMDA2MSwxLjc4ODEzIDE3Ljc5NDIsMCAyMCwwWiIgc3R5bGU9ImZpbGw6YmxhY2s7Ii8+CiAgICAgICAgPC9nPgogICAgICAgIDxnPgogICAgICAgICAgICA8cGF0aCBkPSJNNS44NTc4Niw1Ljg1Nzg2QzcuNDE3NTgsNC4yOTgxNSA5Ljk0NjM4LDQuMjk4MTUgMTEuNTA2MSw1Ljg1Nzg2QzEzLjA2NTgsNy40MTc1OCAxMy4wNjU4LDkuOTQ2MzggMTEuNTA2MSwxMS41MDYxQzkuOTQ2MzgsMTMuMDY1OCA3LjQxNzU4LDEzLjA2NTggNS44NTc4NiwxMS41MDYxQzQuMjk4MTUsOS45NDYzOCA0LjI5ODE1LDcuNDE3NTggNS44NTc4Niw1Ljg1Nzg2WiIgc3R5bGU9ImZpbGw6cmdiKDIxMCwyMTAsMjEwKTsiLz4KICAgICAgICA8L2c+CiAgICAgICAgPGc+CiAgICAgICAgICAgIDxwYXRoIGQ9Ik0yMCwzMi4wMTIyQzIyLjIwNTgsMzIuMDEyMiAyMy45OTM5LDMzLjgwMDMgMjMuOTkzOSwzNi4wMDYxQzIzLjk5MzksMzguMjExOSAyMi4yMDU4LDQwIDIwLDQwQzE3Ljc5NDIsNDAgMTYuMDA2MSwzOC4yMTE5IDE2LjAwNjEsMzYuMDA2MUMxNi4wMDYxLDMzLjgwMDMgMTcuNzk0MiwzMi4wMTIyIDIwLDMyLjAxMjJaIiBzdHlsZT0iZmlsbDpyZ2IoMTMwLDEzMCwxMzApOyIvPgogICAgICAgIDwvZz4KICAgICAgICA8Zz4KICAgICAgICAgICAgPHBhdGggZD0iTTI4LjQ5MzksMjguNDkzOUMzMC4wNTM2LDI2LjkzNDIgMzIuNTgyNCwyNi45MzQyIDM0LjE0MjEsMjguNDkzOUMzNS43MDE5LDMwLjA1MzYgMzUuNzAxOSwzMi41ODI0IDM0LjE0MjEsMzQuMTQyMUMzMi41ODI0LDM1LjcwMTkgMzAuMDUzNiwzNS43MDE5IDI4LjQ5MzksMzQuMTQyMUMyNi45MzQyLDMyLjU4MjQgMjYuOTM0MiwzMC4wNTM2IDI4LjQ5MzksMjguNDkzOVoiIHN0eWxlPSJmaWxsOnJnYigxMDEsMTAxLDEwMSk7Ii8+CiAgICAgICAgPC9nPgogICAgICAgIDxnPgogICAgICAgICAgICA8cGF0aCBkPSJNMy45OTM5LDE2LjAwNjFDNi4xOTk2OCwxNi4wMDYxIDcuOTg3ODEsMTcuNzk0MiA3Ljk4NzgxLDIwQzcuOTg3ODEsMjIuMjA1OCA2LjE5OTY4LDIzLjk5MzkgMy45OTM5LDIzLjk5MzlDMS43ODgxMywyMy45OTM5IDAsMjIuMjA1OCAwLDIwQzAsMTcuNzk0MiAxLjc4ODEzLDE2LjAwNjEgMy45OTM5LDE2LjAwNjFaIiBzdHlsZT0iZmlsbDpyZ2IoMTg3LDE4NywxODcpOyIvPgogICAgICAgIDwvZz4KICAgICAgICA8Zz4KICAgICAgICAgICAgPHBhdGggZD0iTTUuODU3ODYsMjguNDkzOUM3LjQxNzU4LDI2LjkzNDIgOS45NDYzOCwyNi45MzQyIDExLjUwNjEsMjguNDkzOUMxMy4wNjU4LDMwLjA1MzYgMTMuMDY1OCwzMi41ODI0IDExLjUwNjEsMzQuMTQyMUM5Ljk0NjM4LDM1LjcwMTkgNy40MTc1OCwzNS43MDE5IDUuODU3ODYsMzQuMTQyMUM0LjI5ODE1LDMyLjU4MjQgNC4yOTgxNSwzMC4wNTM2IDUuODU3ODYsMjguNDkzOVoiIHN0eWxlPSJmaWxsOnJnYigxNjQsMTY0LDE2NCk7Ii8+CiAgICAgICAgPC9nPgogICAgICAgIDxnPgogICAgICAgICAgICA8cGF0aCBkPSJNMzYuMDA2MSwxNi4wMDYxQzM4LjIxMTksMTYuMDA2MSA0MCwxNy43OTQyIDQwLDIwQzQwLDIyLjIwNTggMzguMjExOSwyMy45OTM5IDM2LjAwNjEsMjMuOTkzOUMzMy44MDAzLDIzLjk5MzkgMzIuMDEyMiwyMi4yMDU4IDMyLjAxMjIsMjBDMzIuMDEyMiwxNy43OTQyIDMzLjgwMDMsMTYuMDA2MSAzNi4wMDYxLDE2LjAwNjFaIiBzdHlsZT0iZmlsbDpyZ2IoNzQsNzQsNzQpOyIvPgogICAgICAgIDwvZz4KICAgICAgICA8Zz4KICAgICAgICAgICAgPHBhdGggZD0iTTI4LjQ5MzksNS44NTc4NkMzMC4wNTM2LDQuMjk4MTUgMzIuNTgyNCw0LjI5ODE1IDM0LjE0MjEsNS44NTc4NkMzNS43MDE5LDcuNDE3NTggMzUuNzAxOSw5Ljk0NjM4IDM0LjE0MjEsMTEuNTA2MUMzMi41ODI0LDEzLjA2NTggMzAuMDUzNiwxMy4wNjU4IDI4LjQ5MzksMTEuNTA2MUMyNi45MzQyLDkuOTQ2MzggMjYuOTM0Miw3LjQxNzU4IDI4LjQ5MzksNS44NTc4NloiIHN0eWxlPSJmaWxsOnJnYig1MCw1MCw1MCk7Ii8+CiAgICAgICAgPC9nPgogICAgPC9nPgo8L3N2Zz4K') !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  min-width: min(2em, 40px);
  min-height: min(2em, 40px);
  background-size: min(2em, 40px) !important;
}
body > header {
  align-items: center;
}
body > header:not(.top-banner) {
  position: relative;
  height: 0;
}
body > header:not(.top-banner) + main > *:first-child {
  padding-top: min(2.5 * min(var(--font-size-giant), 10vw) + 60px, 32vw) !important;
}
body > header.top-banner {
  background: black;
  display: flex;
  justify-content: space-between;
  color: white;
}
body > header.top-banner nav:not(.social-icons) ul {
  display: none;
  list-style: none;
  padding: 1em;
  margin: 0;
  gap: 1em;
  text-transform: none;
}
body > header.top-banner nav:not(.social-icons) ul li {
  font-family: sans-serif;
  font-size: var(--font-size-smaller);
}
@media (min-width: 481px) {
  body > header.top-banner nav:not(.social-icons) ul {
    display: flex;
  }
}
body > header > a {
  font-family: var(--hatters-font-primary);
  font-weight: normal;
  max-width: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  font-size: min(var(--font-size-giant), 10vw);
  gap: 0.25em;
  translate: 0 -15px;
}
body > header > a:hover {
  text-decoration: none;
}
body > header > a img {
  height: 2em;
}
body > header > a span {
  flex: 1 0 0;
}
body > header > a span:first-child {
  text-align: right;
}
body > header > a span:last-child {
  text-align: left;
}
body > header .social-icons {
  margin: 1em;
  height: 2em;
}
a {
  color: inherit;
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
.filter-list .page-width,
.filter-list section {
  display: flex;
  gap: 2em;
  flex-direction: row;
}
.filter-list .page-width:is(ul, ol),
.filter-list section:is(ul, ol) {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
.filter-list .page-width > aside,
.filter-list section > aside {
  flex: 0 1 20%;
}
.filter-list .page-width > article,
.filter-list section > article,
.filter-list .page-width > ul,
.filter-list section > ul {
  flex: 1 1 0;
  max-width: 100%;
}
@media (max-width: 640px) {
  .filter-list .page-width,
  .filter-list section {
    display: flex;
    gap: 1em;
    flex-direction: column;
  }
  .filter-list .page-width:is(ul, ol),
  .filter-list section:is(ul, ol) {
    list-style-type: none;
    padding: 0;
    margin: 0;
  }
  .filter-list .page-width > .share,
  .filter-list section > .share {
    align-self: flex-start;
  }
  .filter-list .page-width > aside form,
  .filter-list section > aside form {
    display: flex;
    gap: 1em;
    flex-direction: row;
    flex-wrap: wrap;
  }
  .filter-list .page-width > aside form:is(ul, ol),
  .filter-list section > aside form:is(ul, ol) {
    list-style-type: none;
    padding: 0;
    margin: 0;
  }
  .filter-list .page-width > aside form > *,
  .filter-list section > aside form > * {
    flex: 1 0 0;
  }
  .filter-list .page-width > aside form ul,
  .filter-list section > aside form ul {
    flex: 0 0 100%;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, auto));
  }
  .filter-list .page-width > aside form ul > *,
  .filter-list section > aside form ul > * {
    flex: 1 0 200px;
  }
  .filter-list .page-width > aside form ul > button:first-of-type,
  .filter-list section > aside form ul > button:first-of-type {
    grid-column: 1;
  }
  .filter-list .page-width > aside form > label > label,
  .filter-list section > aside form > label > label,
  .filter-list .page-width > aside form > ul > li > label,
  .filter-list section > aside form > ul > li > label {
    justify-content: space-between;
    flex: 1 0 auto;
    font-size: var(--font-size-larger);
  }
}
main {
  overflow: clip;
}
main > section.filter-list {
  margin: 0 auto 0 auto;
}
aside.sidebar {
  background: var(--scheme-background);
  color: var(--scheme-foreground);
  --scheme-foreground: black;
  --scheme-background: white;
  --scheme-accent: var(--hatters-primary);
  display: flex;
  gap: 0;
  flex-direction: column;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  width: 20em;
  transform: translateX(calc(-100% - 10px));
  transition: all 0.5s;
  z-index: 1000;
  box-shadow: 0 0 15px 0 black;
  overflow: auto;
}
aside.sidebar:is(ul, ol) {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
aside.sidebar > .share {
  align-self: flex-start;
}
aside.sidebar > img {
  padding: 2em;
  width: 100%;
  aspect-ratio: 1 / 1;
}
aside.sidebar nav ul {
  display: flex;
  gap: 0;
  flex-direction: column;
  text-transform: uppercase;
}
aside.sidebar nav ul:is(ul, ol) {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
aside.sidebar nav ul > .share {
  align-self: flex-start;
}
aside.sidebar nav ul li {
  font-size: var(--font-size-subheader);
  font-family: var(--hatters-font-primary);
  padding: 0.25em 1em;
}
aside.sidebar nav ul.submenu h3 {
  font-size: inherit;
}
aside.sidebar nav ul.submenu > li > a {
  padding: 0.25em 1em;
  color: var(--scheme-accent);
  display: block;
}
aside.sidebar nav > ul > li:nth-child(2n+1) {
  background: var(--scheme-background);
  color: var(--scheme-foreground);
  --scheme-foreground: white;
  --scheme-background: var(--hatters-primary);
  --scheme-accent: white;
}
body::after {
  content: '';
  pointer-events: none;
  position: fixed;
  inset: 0;
  transition: all 0.5s;
  z-index: 990;
}
body.sidebar-open::after {
  background: rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(2px);
  pointer-events: all;
}
body.sidebar-open aside.sidebar {
  transform: none;
}
form.filter {
  display: flex;
  gap: 1em;
  flex-direction: column;
  margin-bottom: 1em;
}
form.filter:is(ul, ol) {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
form.filter > .share {
  align-self: flex-start;
}
form.filter > ul {
  display: flex;
  gap: 0.5em;
  flex-direction: column;
}
form.filter > ul:is(ul, ol) {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
form.filter > ul > .share {
  align-self: flex-start;
}
form.filter > label,
form.filter > ul > li {
  display: flex;
  gap: 0.5em;
  flex-direction: column;
}
form.filter > label:is(ul, ol),
form.filter > ul > li:is(ul, ol) {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
form.filter > label > .share,
form.filter > ul > li > .share {
  align-self: flex-start;
}
form.filter > label > label,
form.filter > ul > li > label {
  display: flex;
  gap: 0.5em;
  flex-direction: column;
}
form.filter > label > label:is(ul, ol),
form.filter > ul > li > label:is(ul, ol) {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
form.filter > label > label > .share,
form.filter > ul > li > label > .share {
  align-self: flex-start;
}
form.filter > label.checkbox-filter > label,
form.filter > ul > li.checkbox-filter > label {
  flex-direction: row;
  align-items: center;
}
form.filter > label.checkbox-filter > label input,
form.filter > ul > li.checkbox-filter > label input {
  width: 2em;
  flex: 0 0 auto;
}
form.filter > label > span,
form.filter > ul > li > span,
form.filter > label > label > span,
form.filter > ul > li > label > span {
  text-align: center;
  font-family: var(--hatters-font-primary);
  font-size: var(--font-size-larger);
  text-transform: uppercase;
}
form.filter > label > span > strong,
form.filter > ul > li > span > strong,
form.filter > label > label > span > strong,
form.filter > ul > li > label > span > strong {
  font-size: var(--font-size-subheader);
  font-weight: inherit;
}
form.filter > label button,
form.filter > ul > li button {
  font-size: var(--font-size-subheader);
}
form.filter > label enhanced-select,
form.filter > ul > li enhanced-select,
form.filter > label tag-select,
form.filter > ul > li tag-select,
form.filter > label tag-select-alt,
form.filter > ul > li tag-select-alt {
  font-size: var(--font-size-body);
}
form.filter > label select,
form.filter > ul > li select {
  font-size: var(--font-size-body);
  border: 2px solid black;
  border-radius: 0.25em;
  padding: 0.5em 0.25em;
}
@media (min-width: 641px) {
  form.filter > label > span,
  form.filter > ul > li > span,
  form.filter > label > label > span,
  form.filter > ul > li > label > span {
    font-size: var(--font-size-body);
  }
  form.filter > label > span > strong,
  form.filter > ul > li > span > strong,
  form.filter > label > label > span > strong,
  form.filter > ul > li > label > span > strong {
    font-size: var(--font-size-larger);
  }
  form.filter > label button,
  form.filter > ul > li button {
    font-size: var(--font-size-body);
  }
  form.filter > label enhanced-select,
  form.filter > ul > li enhanced-select,
  form.filter > label tag-select,
  form.filter > ul > li tag-select,
  form.filter > label tag-select-alt,
  form.filter > ul > li tag-select-alt,
  form.filter > label select,
  form.filter > ul > li select {
    font-size: var(--font-size-smaller);
  }
}
form.filter input {
  font-size: var(--font-size-smaller);
}
form.filter.changed button:not([data-action]) {
  background: var(--scheme-accent);
  animation: pulse 2s infinite;
}
form.filter.changed button:not([data-action]):hover {
  background: var(--scheme-background);
}
form.filter button {
  font-size: var(--font-size-larger);
}
@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(247, 143, 32, 0.8);
  }
  70% {
    box-shadow: 0 0 0.5em 1em rgba(247, 143, 32, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(247, 143, 32, 0);
  }
}
.main-menu {
  padding: 0 2em;
}
.main-menu ul {
  padding: 0;
  margin: 0;
  list-style: none;
}
.main-menu > ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: min(1em, calc(10vw - 2em));
}
.main-menu > ul > li {
  font-size: var(--font-size-subheader);
  text-align: center;
  width: 5em;
  background: white;
  position: relative;
}
.main-menu > ul > li.alternate {
  background: var(--hatters-primary);
  color: white;
}
.main-menu > ul > li.hidden {
  display: none;
}
.main-menu > ul > li > .submenu {
  background: var(--scheme-background);
  color: var(--scheme-foreground);
  --scheme-foreground: black;
  --scheme-background: white;
  --scheme-accent: var(--hatters-primary);
  position: absolute;
  top: 100%;
  left: 0;
  padding: 0;
  margin: 0;
  z-index: 100;
  display: flex;
  opacity: 0;
  pointer-events: none;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  font-size: var(--font-size-subheader);
  max-width: 50vw;
  width: max-content;
  box-shadow: 0 0 5px 5px #00000020;
}
.main-menu > ul > li > .submenu > li {
  width: 10em;
  padding: 1em;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  font-size: var(--font-size-larger);
}
.main-menu > ul > li > .submenu > li > h2 {
  font-size: var(--font-size-subheader);
  margin-bottom: 0.5em;
}
.main-menu > ul > li > .submenu > li > ul {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
}
.main-menu > ul > li > .submenu > li > ul > li {
  width: 100%;
  text-align: left;
  font-size: var(--font-size-larger);
  font-family: 'Roboto', sans-serif;
}
.main-menu > ul > li > .submenu > li > a {
  margin-top: 1em;
  color: var(--scheme-accent);
  font-size: var(--font-size-larger);
  text-align: left;
}
@media (hover: hover) and (pointer: fine) {
  .main-menu > ul > li:hover > .submenu,
  .main-menu > ul > li:focus-within > .submenu {
    opacity: 1;
    pointer-events: initial;
  }
}
form {
  display: flex;
  gap: 1em;
  flex-direction: column;
  font-size: var(--font-size-larger);
  width: 100%;
}
form:is(ul, ol) {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
form > .share {
  align-self: flex-start;
}
input,
textarea {
  border-radius: 6px;
  border: 2px solid black;
  font-size: var(--font-size-larger);
  padding: 0.5em 1em;
  width: 100%;
}
input::placeholder,
textarea::placeholder {
  color: #9e9e9e;
}
button,
.button {
  background: var(--scheme-foreground);
  color: var(--scheme-background);
  border-radius: 6px;
  position: relative;
  padding: var(--button-padding-vertical) var(--button-padding-horizontal);
  border: none;
  transition: all 0.5s;
}
button:hover,
.button:hover {
  text-decoration: none;
  background: var(--scheme-background);
  color: var(--scheme-accent);
}
button:not(.unstyled)::before,
.button:not(.unstyled)::before {
  content: '';
  display: block;
  inset: 2px;
  border-radius: 4px;
  position: absolute;
  border: 2px solid currentColor;
  pointer-events: none;
}
button.clear-filter,
.button.clear-filter {
  background: none;
  color: var(--scheme-primary);
  align-self: flex-end;
  padding: 0;
  font-size: var(--font-size-smaller);
}
button.clear-filter::before,
.button.clear-filter::before {
  content: '\f00d';
  font-family: 'FontAwesome';
  position: static;
  display: inline;
  border: none;
  margin-right: 0.5em;
}
button.clear-filter:hover,
.button.clear-filter:hover {
  color: var(--scheme-accent);
}
a.button {
  display: inline-block;
}
a.button:hover {
  text-decoration: none;
}
button.unstyled {
  border: none;
  background: none;
  padding: 0;
  outline: none;
  color: var(--scheme-foreground);
}
button.unstyled:hover {
  background: none;
  color: var(--scheme-accent);
}
.social-icons ul {
  display: flex;
  gap: 1em;
  flex-direction: row;
  height: 100%;
}
.social-icons ul:is(ul, ol) {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
.social-icons ul .social-fb {
  color: #316FF6;
}
.social-icons ul .social-yt {
  color: #FF0000;
}
.social-icons ul li {
  aspect-ratio: 1 / 1;
}
.social-icons ul a {
  transition: color 0.5s;
  display: inline-block;
  height: 100%;
}
.social-icons ul a:hover {
  color: var(--scheme-accent);
}
.social-icons ul svg {
  height: 100%;
  aspect-ratio: 1 / 1;
}
footer {
  background: var(--scheme-background);
  color: var(--scheme-foreground);
  --scheme-foreground: white;
  --scheme-background: black;
  --scheme-accent: var(--hatters-primary);
  padding: 3em;
}
footer > .page-width {
  display: flex;
  gap: 2em;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
}
footer > .page-width:is(ul, ol) {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
footer > .page-width > div {
  flex: 1 0 90px;
  min-width: 240px;
}
footer > .page-width > div.info {
  display: flex;
  gap: 2em;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
}
footer > .page-width > div.info:is(ul, ol) {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
footer > .page-width > div.menus {
  display: flex;
  gap: 1em;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  flex: 2 1 180px;
  min-width: 180px;
}
footer > .page-width > div.menus:is(ul, ol) {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
footer > .page-width > div.menus > div {
  flex: 1 0 120px;
}
footer > .page-width > div.credits {
  display: flex;
  gap: 1em;
  flex-direction: column;
  max-width: 300px;
  text-align: center;
}
footer > .page-width > div.credits:is(ul, ol) {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
footer > .page-width > div.credits > .share {
  align-self: flex-start;
}
footer ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 1em;
  flex-direction: column;
}
footer ul:is(ul, ol) {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
footer ul > .share {
  align-self: flex-start;
}
footer a {
  color: var(--scheme-accent);
  text-decoration: none;
}
footer .social-icons {
  margin: 1em 0;
  height: 2em;
  color: var(--scheme-foreground);
}
footer .social-icons a {
  color: inherit;
}
footer .social-icons ul {
  display: flex;
  gap: 1em;
  flex-direction: row;
}
footer .social-icons ul:is(ul, ol) {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
footer .lottery {
  margin-bottom: 2em;
}
footer .logo {
  height: 8em;
}
footer .info {
  display: flex;
  gap: 2em;
  flex-direction: row;
  flex-wrap: wrap;
}
footer .info:is(ul, ol) {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
.news-items {
  display: flex;
  gap: 1em;
  flex-direction: column;
  --button-padding-horizontal: 4em;
  --gallery-item-size: calc(100%);
}
.news-items:is(ul, ol) {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
.news-items > .share {
  align-self: flex-start;
}
.news-items > .gallery > .gallery-main > .gallery-items {
  height: auto;
}
@media (min-width: 641px) {
  .news-items > .gallery > .gallery-main {
    align-self: stretch;
    flex-direction: column;
    align-items: stretch;
  }
  .news-items > .gallery > .gallery-main > i {
    display: none;
  }
  .news-items > .gallery > .gallery-main > .gallery-items {
    display: flex;
    gap: 1em;
    flex-direction: column;
    max-height: unset;
    max-width: unset;
  }
  .news-items > .gallery > .gallery-main > .gallery-items:is(ul, ol) {
    list-style-type: none;
    padding: 0;
    margin: 0;
  }
  .news-items > .gallery > .gallery-main > .gallery-items > .share {
    align-self: flex-start;
  }
  .news-items > .gallery > .gallery-toolbar {
    display: none;
  }
}
.news-items .news-item,
.news-items > .gallery > .gallery-main > .gallery-items > li {
  display: flex;
  gap: 1em;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
}
.news-items .news-item:is(ul, ol),
.news-items > .gallery > .gallery-main > .gallery-items > li:is(ul, ol) {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
.news-items .news-item > figure,
.news-items > .gallery > .gallery-main > .gallery-items > li > figure {
  flex: 1 0 200px;
  align-self: flex-start;
}
.news-items .news-item > figure > img,
.news-items > .gallery > .gallery-main > .gallery-items > li > figure > img {
  margin: 0 auto;
  width: 100%;
  object-fit: contain;
}
.news-items .news-item > .details,
.news-items > .gallery > .gallery-main > .gallery-items > li > .details {
  display: flex;
  gap: 0.5em;
  flex-direction: column;
  flex: 9 1 20em;
}
.news-items .news-item > .details:is(ul, ol),
.news-items > .gallery > .gallery-main > .gallery-items > li > .details:is(ul, ol) {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
.news-items .news-item > .details > .share,
.news-items > .gallery > .gallery-main > .gallery-items > li > .details > .share {
  align-self: flex-start;
}
.news-items .news-item > .details > .pinned,
.news-items > .gallery > .gallery-main > .gallery-items > li > .details > .pinned {
  display: flex;
  gap: 0.5em;
  font-family: var(--hatters-font-primary);
  color: #ccc;
}
.news-items .news-item > .details > .pinned::before,
.news-items > .gallery > .gallery-main > .gallery-items > li > .details > .pinned::before {
  content: '\f08d';
  font-family: 'FontAwesome';
}
.news-items .news-item > .details > .date,
.news-items > .gallery > .gallery-main > .gallery-items > li > .details > .date {
  color: #eee;
  margin: 0;
}
.news-items .news-item > .details > div,
.news-items > .gallery > .gallery-main > .gallery-items > li > .details > div {
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  flex: 1 0 auto;
  font-size: var(--font-size-larger);
}
.news-items .news-item > div:last-child,
.news-items > .gallery > .gallery-main > .gallery-items > li > div:last-child {
  flex: 1 0 auto;
  display: flex;
  gap: 1em;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  align-self: center;
}
.news-items .news-item > div:last-child:is(ul, ol),
.news-items > .gallery > .gallery-main > .gallery-items > li > div:last-child:is(ul, ol) {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
.news-items .news-item > div:last-child > .share,
.news-items > .gallery > .gallery-main > .gallery-items > li > div:last-child > .share {
  align-self: flex-start;
}
.news-items > li:not(.news-item, .gallery) {
  align-self: center;
}
.news-items h3 {
  font-size: var(--font-size-subheader);
}
article.feature {
  margin-bottom: 2em;
}
article.feature .main-image {
  margin: 5% 0;
}
article.season {
  --max-width: var(--page-width);
  padding: 2em 0;
  position: relative;
}
article.season::before,
article.season::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: calc((100vw - var(--max-width) - 100px) / 2);
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEIAAABCAQMAAADZmpKrAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAGUExURfePIP///z7KPgEAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAwSURBVCjPYwCBBgEmBgcasv4DAa3tGEjbQOAAA4MCC0MDUBwoS1PWcLUNGpD/DwAAem5YIdCHGbkAAAAASUVORK5CYII=);
  opacity: 0.2;
  background-size: 132px;
}
article.season::before {
  left: 0;
  background-position: top right;
}
article.season::after {
  right: 0;
  background-position: top left;
}
article.season .table-container {
  overflow-y: scroll;
  overflow-x: auto;
  max-height: 80vh;
  max-width: var(--max-width);
  margin: 0 auto;
}
article.season .scroll-hint {
  text-align: center;
}
@media (min-width: 800px) {
  article.season .scroll-hint {
    display: none;
  }
}
article.season table.season-results {
  width: 100%;
  margin: 0 auto;
  display: block;
  table-layout: fixed;
  min-width: 700px;
}
article.season table.season-results th,
article.season table.season-results td {
  padding: 0.5em;
  text-align: center;
  width: 10em;
}
article.season table.season-results th:first-child,
article.season table.season-results td:first-child {
  position: sticky;
  left: 0;
  z-index: 10;
  background: inherit;
}
article.season table.season-results th {
  font-family: var(--hatters-font-primary);
  position: sticky;
  background: white;
  top: 0;
  z-index: 10;
}
article.season table.season-results th:first-child {
  z-index: 20;
  background: white;
}
article.season table.season-results td {
  font-size: var(--font-size-smaller);
}
article.season table.season-results td.no-data {
  position: relative;
}
article.season table.season-results td.no-data::after {
  content: '';
  width: 4em;
  height: 1px;
  position: absolute;
  top: 50%;
  left: calc(50% - 2em);
  background: black;
}
article.season table.season-results > tbody > tr {
  background: var(--scheme-background);
  color: var(--scheme-foreground);
  --scheme-foreground: white;
  --scheme-background: var(--hatters-primary);
  --scheme-accent: white;
}
article.season table.season-results > tbody > tr:nth-child(2n) {
  background: var(--scheme-background);
  color: var(--scheme-foreground);
  --scheme-foreground: black;
  --scheme-background: white;
  --scheme-accent: var(--hatters-primary);
}
article.season table.season-results a {
  text-decoration: underline;
}
html {
  --link-state: 0;
  --hatters-link-colour: inherit;
  --hatters-link-height: 2px;
}
a:hover {
  --link-state: 1;
  --hatters-link-colour: var(--scheme-background);
  --hatters-link-height: 100%;
}
.hatters-link {
  display: inline-flex;
  align-items: center;
  font-family: var(--hatters-font-primary);
  font-style: normal;
  position: relative;
  transition: all 0.2s;
  z-index: 1;
  color: var(--hatters-link-colour);
  /*
    &:hover {        
        
        color: var(--scheme-background);
    
        &::before {
            height: 100%;   
        }
    }
    */
}
.hatters-link::before {
  content: '';
  left: 0;
  right: 0;
  bottom: 0;
  position: absolute;
  /* height: 2px; */
  height: var(--hatters-link-height);
  background: var(--scheme-accent);
  display: block;
  transition: all 0.2s;
  z-index: -1;
}
.hatters-link.alternate::before {
  background: var(--scheme-foreground);
}
.hatters-link:hover {
  text-decoration: none;
}
.meta {
  display: flex;
  justify-content: center;
  margin-top: 2em;
  font-style: italic;
}
.meta > * {
  display: inline-flex;
  align-items: center;
  font-family: var(--hatters-font-primary);
  font-style: normal;
  position: relative;
  transition: all 0.2s;
  z-index: 1;
  color: var(--hatters-link-colour);
  /*
    &:hover {        
        
        color: var(--scheme-background);
    
        &::before {
            height: 100%;   
        }
    }
    */
}
.meta > *::before {
  content: '';
  left: 0;
  right: 0;
  bottom: 0;
  position: absolute;
  /* height: 2px; */
  height: var(--hatters-link-height);
  background: var(--scheme-accent);
  display: block;
  transition: all 0.2s;
  z-index: -1;
}
.meta > *.alternate::before {
  background: var(--scheme-foreground);
}
.meta > *:hover {
  text-decoration: none;
}
.meta > *:not(:last-child)::before {
  right: calc(2em + 2px);
}
.meta > *:not(:last-child)::after {
  content: '';
  display: inline-block;
  margin: 0 1em;
  height: 100%;
  width: 2px;
  background: var(--scheme-accent);
}
.photo-bg {
  background: url('/assets/Uploads/photo-bg.jpg') center center / cover no-repeat, var(--scheme-background);
  background-blend-mode: multiply;
}
.match {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 3em;
}
.match .attendance {
  font-family: var(--hatters-font-primary);
  display: flex;
  gap: 1em;
  align-items: baseline;
}
.match .attendance dd {
  font-size: var(--font-size-subheader);
}
.match .result {
  display: flex;
  justify-content: center;
  gap: 0.5em;
  font-size: var(--font-size-subheader);
  flex: 1 1 auto;
  font-family: var(--hatters-font-primary);
}
.match .result > * {
  display: inline-flex;
  align-items: center;
}
.match .result > .score {
  background: var(--scheme-foreground);
  color: var(--scheme-background);
  padding: 0.5em 0.75em;
}
.match.venue-a .result {
  flex-direction: row-reverse;
}
.match .players {
  background: var(--scheme-background);
  color: var(--scheme-foreground);
  --scheme-foreground: white;
  --scheme-background: var(--hatters-primary);
  --scheme-accent: white;
  background: url('/assets/Uploads/photo-bg.jpg') center center / cover no-repeat, var(--scheme-background);
  background-blend-mode: multiply;
  display: flex;
  gap: 2em;
  flex-direction: column;
  align-items: center;
  padding: 2em;
}
.match .players:is(ul, ol) {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
.match .players > .share {
  align-self: flex-start;
}
.match .players > * {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.match .players > * ol {
  display: flex;
  gap: 1em;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
}
.match .players > * ol:is(ul, ol) {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
.match .players > * ol li,
.match .players > * ol a,
.match .players > * ol figure {
  display: flex;
  gap: 0;
  flex-direction: column;
  justify-content: space-between;
}
.match .players > * ol li:is(ul, ol),
.match .players > * ol a:is(ul, ol),
.match .players > * ol figure:is(ul, ol) {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
.match .players > * ol li > .share,
.match .players > * ol a > .share,
.match .players > * ol figure > .share {
  align-self: flex-start;
}
.match .players > * ol li {
  flex: 0 0 8em;
  text-align: center;
}
.match .players > * ol a,
.match .players > * ol figure {
  flex: 1 1 auto;
}
.match .players > *.substitutes h4 {
  margin-bottom: 1em;
}
.match .players > *.substitutes ol {
  font-size: var(--font-size-smaller);
}
.match .prev-next {
  display: flex;
  gap: 2em;
  flex-direction: row;
  margin: 3em;
  flex-wrap: wrap;
  justify-content: center;
}
.match .prev-next:is(ul, ol) {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
@media (max-width: 640px) {
  .match .prev-next {
    margin: 1em 0 0 0;
  }
}
.match .prev-next > * {
  flex: 1 0 30em;
}
.match .prev-next > * > div {
  background: var(--scheme-background);
  color: var(--scheme-foreground);
  --scheme-foreground: white;
  --scheme-background: var(--hatters-primary);
  --scheme-accent: white;
  transition: all 0.5s;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.match .prev-next > * > div:hover {
  background: var(--scheme-background);
  color: var(--scheme-foreground);
  --scheme-foreground: white;
  --scheme-background: black;
  --scheme-accent: var(--hatters-primary);
}
.match .prev-next > * > div h4 {
  margin-top: 0.75em;
  margin-bottom: 1em;
}
.match .prev-next .match {
  padding: 0 2em 2em 2em;
}
.match .prev-next .match .result {
  margin-top: 1em;
}
h4 {
  margin-bottom: 2em;
  position: relative;
  font-size: var(--font-size-header);
}
h4::after {
  content: '';
  position: absolute;
  bottom: -0.2em;
  left: 0;
  right: 0;
  height: 0.2em;
  background: currentColor;
}
.no-image {
  display: flex;
  justify-content: center;
  align-items: center;
  visibility: hidden;
}
article.match {
  align-items: stretch;
  padding: 0;
}
article.match .overview .page-width {
  display: flex;
  gap: 1em;
  flex-direction: row;
}
article.match .overview .page-width:is(ul, ol) {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
article.match .overview .page-width > * {
  flex: 1 1 300px;
}
article.match .overview .page-width .featured-image {
  display: flex;
  gap: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2em;
}
article.match .overview .page-width .featured-image:is(ul, ol) {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
article.match .overview .page-width .featured-image > .share {
  align-self: flex-start;
}
article.match .overview .page-width .featured-image > img,
article.match .overview .page-width .featured-image > .content {
  transform: rotate(var(--polaroid-rotate-default));
  border: 0.5em solid white;
  border-bottom-width: 2em;
  box-shadow: 0 0.2em 0.2em 0.2em rgba(0, 0, 0, 0.125);
  transition: transform 0.5s;
  max-height: 100%;
  min-height: 0;
}
article.match .overview .page-width .featured-image > img:hover,
article.match .overview .page-width .featured-image > .content:hover {
  transform: rotate(var(--polaroid-rotate-hover));
}
article.match .overview .page-width .featured-image figcaption {
  padding-top: 10%;
  display: inline-flex;
  align-items: center;
  font-family: var(--hatters-font-primary);
  font-style: normal;
  position: relative;
  transition: all 0.2s;
  z-index: 1;
  color: var(--hatters-link-colour);
  /*
    &:hover {        
        
        color: var(--scheme-background);
    
        &::before {
            height: 100%;   
        }
    }
    */
}
article.match .overview .page-width .featured-image figcaption::before {
  content: '';
  left: 0;
  right: 0;
  bottom: 0;
  position: absolute;
  /* height: 2px; */
  height: var(--hatters-link-height);
  background: var(--scheme-accent);
  display: block;
  transition: all 0.2s;
  z-index: -1;
}
article.match .overview .page-width .featured-image figcaption.alternate::before {
  background: var(--scheme-foreground);
}
article.match .overview .page-width .featured-image figcaption:hover {
  text-decoration: none;
}
article.match .overview .page-width .description {
  padding: 3em 0;
}
article.match .overview .page-width .no-image {
  display: none;
}
article.match .overview .page-width .no-image + * {
  text-align: center;
  max-width: 50%;
  margin: 0 auto;
}
article.match header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1em;
}
@media (max-width: 640px) {
  article.match header .meta {
    padding: 0 1em;
    flex-direction: column;
    align-items: center;
  }
  article.match header .meta > *::after {
    display: none;
  }
  article.match header .meta > *::before {
    right: 0;
  }
  article.match header .result {
    padding: 0 1em;
    grid-template-columns: 2em 1fr !important;
  }
  article.match header .result .score {
    grid-column: 1;
  }
  article.match header .result .name {
    grid-column: 2;
    align-items: flex-start !important;
    text-align: left !important;
  }
  article.match header .result .home {
    grid-row: 1;
  }
  article.match header .result .away {
    grid-row: 2;
  }
}
article.match header .meta {
  margin-top: 0;
}
article.match header .meta a {
  font-size: var(--font-size-subheader);
}
article.match header .result {
  font-size: var(--font-size-header);
  display: grid;
  grid-template-columns: 1fr 2em 2em 1fr;
}
article.match header .result .home {
  align-items: flex-start;
}
article.match header .result .home.name {
  align-items: flex-end;
  text-align: right;
}
article.match header .result .score {
  justify-content: center;
  align-items: center;
}
article.match header .result .name {
  display: flex;
  gap: 0;
  flex-direction: column;
  align-items: flex-start;
  padding-top: 0.5em;
}
article.match header .result .name:is(ul, ol) {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
article.match header .result .name > .share {
  align-self: flex-start;
}
article.match header .result .name .goals {
  display: flex;
  gap: 0.25em;
  flex-direction: row;
  font-size: var(--font-size-body);
}
article.match header .result .name .goals:is(ul, ol) {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
article.match header .result .name .goals li {
  display: flex;
  gap: 0;
  flex-direction: row;
}
article.match header .result .name .goals li:is(ul, ol) {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
article.match header .result .name .goals li:not(:last-child)::after {
  content: ',';
}
article.match header .attendance {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  row-gap: 0.25em;
}
article.match header .attendance dt {
  text-align: right;
}
article.collection-item .item-info {
  background: var(--scheme-background);
  color: var(--scheme-foreground);
  --scheme-foreground: white;
  --scheme-background: var(--hatters-primary);
  --scheme-accent: white;
  background: url('/assets/Uploads/photo-bg.jpg') center center / cover no-repeat, var(--scheme-background);
  background-blend-mode: multiply;
}
article.collection-item .item-info .page-width {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
}
article.collection-item .item-info .page-width > aside {
  display: flex;
  gap: 2em;
  flex-direction: column;
  align-items: center;
  min-width: 200px;
}
article.collection-item .item-info .page-width > aside:is(ul, ol) {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
article.collection-item .item-info .page-width > aside > .share {
  align-self: flex-start;
}
article.collection-item .item-info .page-width > section {
  display: flex;
  gap: 1em;
  flex-direction: column;
  min-width: 200px;
  padding: 1em;
  flex: 1 0 0;
}
article.collection-item .item-info .page-width > section:is(ul, ol) {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
article.collection-item .item-info .page-width > section > .share {
  align-self: flex-start;
}
article.collection-item .item-info .page-width > section > header {
  display: flex;
  gap: 1em;
  flex-direction: column;
}
article.collection-item .item-info .page-width > section > header:is(ul, ol) {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
article.collection-item .item-info .page-width > section > header > .share {
  align-self: flex-start;
}
article.collection-item .item-info .page-width > section > header > h3 {
  font-size: var(--font-size-header);
}
article.collection-item > * {
  padding-bottom: 2em;
}
.collection-item p {
  margin-top: 1em;
}
.collection-item-image {
  display: flex;
  gap: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2em;
  flex: 0 1 40%;
}
.collection-item-image:is(ul, ol) {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
.collection-item-image > .share {
  align-self: flex-start;
}
.collection-item-image > img,
.collection-item-image > .content {
  transform: rotate(var(--polaroid-rotate-default));
  border: 0.5em solid white;
  border-bottom-width: 2em;
  box-shadow: 0 0.2em 0.2em 0.2em rgba(0, 0, 0, 0.125);
  transition: transform 0.5s;
  max-height: 100%;
  min-height: 0;
}
.collection-item-image > img:hover,
.collection-item-image > .content:hover {
  transform: rotate(var(--polaroid-rotate-hover));
}
.page-width {
  width: 100%;
  max-width: var(--page-width);
  margin: 0 auto;
}
.block-underline {
  margin-bottom: 2em;
  position: relative;
}
.block-underline::after {
  content: '';
  position: absolute;
  bottom: -0.2em;
  left: 0;
  right: 0;
  height: 0.2em;
  background: currentColor;
}
.polaroid-container {
  display: flex;
  gap: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2em;
}
.polaroid-container:is(ul, ol) {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
.polaroid-container > .share {
  align-self: flex-start;
}
.polaroid-container > img,
.polaroid-container > .content {
  transform: rotate(var(--polaroid-rotate-default));
  border: 0.5em solid white;
  border-bottom-width: 2em;
  box-shadow: 0 0.2em 0.2em 0.2em rgba(0, 0, 0, 0.125);
  transition: transform 0.5s;
  max-height: 100%;
  min-height: 0;
}
.polaroid-container > img:hover,
.polaroid-container > .content:hover {
  transform: rotate(var(--polaroid-rotate-hover));
}
article.player > .bio {
  background: var(--scheme-background);
  color: var(--scheme-foreground);
  --scheme-foreground: white;
  --scheme-background: var(--hatters-primary);
  --scheme-accent: white;
  background: url('/assets/Uploads/photo-bg.jpg') center center / cover no-repeat, var(--scheme-background);
  background-blend-mode: multiply;
}
article.player > .bio > div {
  display: flex;
  gap: 0;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
}
article.player > .bio > div:is(ul, ol) {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
article.player > .bio > div > aside {
  display: flex;
  gap: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2em;
  flex: 1 1 300px;
}
article.player > .bio > div > aside:is(ul, ol) {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
article.player > .bio > div > aside > .share {
  align-self: flex-start;
}
article.player > .bio > div > aside > img,
article.player > .bio > div > aside > .content {
  transform: rotate(var(--polaroid-rotate-default));
  border: 0.5em solid white;
  border-bottom-width: 2em;
  box-shadow: 0 0.2em 0.2em 0.2em rgba(0, 0, 0, 0.125);
  transition: transform 0.5s;
  max-height: 100%;
  min-height: 0;
}
article.player > .bio > div > aside > img:hover,
article.player > .bio > div > aside > .content:hover {
  transform: rotate(var(--polaroid-rotate-hover));
}
article.player > .bio > div > section {
  flex: 7 1 300px;
  padding: 1em;
  display: flex;
  flex-direction: column;
  gap: 1em;
  align-items: flex-start;
}
article.player > .bio > div > section > h3 {
  font-size: var(--font-size-header);
  margin-top: 0.25em;
}
article.player > .bio > div > section > span {
  font-style: italic;
}
article.player > .bio .birth-location ol {
  display: inline-flex;
  gap: 0.5em;
  list-style-type: none;
}
article.player > .bio .birth-location ol > li:not(:last-child)::after {
  content: ',';
}
article.player > .stats {
  gap: 1em;
  flex-direction: column;
  font-family: var(--hatters-font-primary);
  text-align: center;
  display: flex;
}
article.player > .stats:is(ul, ol) {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
article.player > .stats > .share {
  align-self: flex-start;
}
article.player > .stats > section {
  padding-top: 2em;
  display: flex;
  gap: 0;
  flex-direction: column;
  width: 100%;
  align-items: center;
}
article.player > .stats > section:is(ul, ol) {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
article.player > .stats > section > .share {
  align-self: flex-start;
}
article.player > .stats dl {
  display: flex;
  gap: 0;
  flex-direction: row;
  width: 100%;
  font-size: var(--font-size-header);
  flex-wrap: wrap;
  justify-content: center;
  row-gap: 0.5em;
}
article.player > .stats dl:is(ul, ol) {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
article.player > .stats dl > div {
  flex: 1 0 auto;
  max-width: 10em;
  margin-right: -1px;
}
article.player > .stats dl > div > dt {
  background: var(--scheme-background);
  color: var(--scheme-foreground);
  --scheme-foreground: white;
  --scheme-background: var(--hatters-primary);
  --scheme-accent: white;
  border: 1px solid black;
  padding: 0 1em;
}
article.player > .stats dl > div > dd {
  border: 1px solid black;
  border-top: none;
  padding: 0 1em;
}
article.player .related-items {
  padding-bottom: 2em;
}
article.player .related-matches {
  display: flex;
  gap: 0;
  flex-direction: column;
}
article.player .related-matches:is(ul, ol) {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
article.player .related-matches > .share {
  align-self: flex-start;
}
article.player .related-matches .filter-list {
  display: flex;
  gap: 0;
  flex-direction: column;
  width: 100%;
  align-items: center;
}
article.player .related-matches .filter-list:is(ul, ol) {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
article.player .related-matches .filter-list > .share {
  align-self: flex-start;
}
article.player .related-matches .filter-list section {
  width: 100%;
}
article.player .related-matches h3 {
  font-size: var(--font-size-header);
  margin-bottom: 2em;
  position: relative;
}
article.player .related-matches h3::after {
  content: '';
  position: absolute;
  bottom: -0.2em;
  left: 0;
  right: 0;
  height: 0.2em;
  background: currentColor;
}
article.contact > section,
article.basic-page > section {
  background: var(--scheme-background);
  color: var(--scheme-foreground);
  --scheme-foreground: white;
  --scheme-background: var(--hatters-primary);
  --scheme-accent: white;
  background: url('/assets/Uploads/photo-bg.jpg') center center / cover no-repeat, var(--scheme-background);
  background-blend-mode: multiply;
}
article.contact > section aside,
article.basic-page > section aside {
  display: flex;
  gap: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2em;
}
article.contact > section aside:is(ul, ol),
article.basic-page > section aside:is(ul, ol) {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
article.contact > section aside > .share,
article.basic-page > section aside > .share {
  align-self: flex-start;
}
article.contact > section aside > img,
article.basic-page > section aside > img,
article.contact > section aside > .content,
article.basic-page > section aside > .content {
  transform: rotate(var(--polaroid-rotate-default));
  border: 0.5em solid white;
  border-bottom-width: 2em;
  box-shadow: 0 0.2em 0.2em 0.2em rgba(0, 0, 0, 0.125);
  transition: transform 0.5s;
  max-height: 100%;
  min-height: 0;
}
article.contact > section aside > img:hover,
article.basic-page > section aside > img:hover,
article.contact > section aside > .content:hover,
article.basic-page > section aside > .content:hover {
  transform: rotate(var(--polaroid-rotate-hover));
}
article.contact > section .page-width,
article.basic-page > section .page-width {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
}
article.contact > section .page-width > *,
article.basic-page > section .page-width > * {
  flex: 1 1 0;
  min-width: min(480px, 80vw);
}
article.contact > section .page-width > section,
article.basic-page > section .page-width > section {
  padding: 2em;
}
article.contact form,
article.basic-page form {
  background: var(--scheme-background);
  color: var(--scheme-foreground);
  --scheme-foreground: black;
  --scheme-background: white;
  --scheme-accent: var(--hatters-primary);
  display: flex;
  gap: 1em;
  flex-direction: column;
  padding: 2em;
  font-size: var(--font-size-body);
}
article.contact form:is(ul, ol),
article.basic-page form:is(ul, ol) {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
article.contact form > .share,
article.basic-page form > .share {
  align-self: flex-start;
}
article.contact form label,
article.basic-page form label {
  display: flex;
  gap: 0.5em;
  flex-direction: column;
}
article.contact form label:is(ul, ol),
article.basic-page form label:is(ul, ol) {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
article.contact form label > .share,
article.basic-page form label > .share {
  align-self: flex-start;
}
article.contact .submission-status,
article.basic-page .submission-status {
  background: var(--scheme-background);
  color: var(--scheme-foreground);
  --scheme-foreground: white;
  --scheme-background: var(--hatters-primary);
  --scheme-accent: white;
  padding: 1em;
}
article.basic-page h1 {
  font-size: var(--font-size-header);
  text-align: left;
}
article.basic-page p {
  padding: 1em;
}
[data-href] {
  cursor: pointer;
}
.match.match-block .result {
  display: grid;
  grid-template-columns: 1fr auto;
}
.match.match-block.venue-a .result .luton {
  grid-row: 2;
}
.match.match-block.venue-a .result .opponent {
  grid-row: 1;
}
.player-list {
  list-style-type: none;
  width: 100%;
}
.player-list li {
  display: grid;
  grid-template-columns: 6em 1fr;
  gap: 1em;
  padding: 1em;
}
.player-list li > .name {
  grid-column: 2;
}
.player-list li > .basic-info {
  grid-column: 2;
  font-style: italic;
}
.player-list li > .bio-snippet {
  grid-column: 2;
  grid-row: span 2;
}
.player-list li .player-icon {
  grid-row: 1 / span 3;
  color: var(--scheme-accent);
  width: 100%;
}
.player-list li .details {
  grid-column: 2;
  grid-row: 1 / span 2;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  flex: 1 1 0;
}
.player-list li .view-more {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
}
.match-list,
.collection-item-list,
.feature-list {
  list-style-type: none;
  width: 100%;
  margin-bottom: 2em;
}
.match-list > li,
.collection-item-list > li,
.feature-list > li {
  align-items: stretch;
  padding: 1em;
}
.collection-item-list > li,
.feature-list > li {
  display: flex;
}
.collection-item-list > li > .details,
.feature-list > li > .details {
  display: flex;
  gap: 1em;
  flex-direction: column;
  flex-grow: 1;
}
.collection-item-list > li > .details:is(ul, ol),
.feature-list > li > .details:is(ul, ol) {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
.collection-item-list > li > .details > .share,
.feature-list > li > .details > .share {
  align-self: flex-start;
}
.collection-item-list > li > .details > .details,
.feature-list > li > .details > .details {
  flex-grow: 1;
  display: flex;
  align-items: flex-end;
}
.collection-item-list > li > .details > .details > .meta,
.feature-list > li > .details > .details > .meta {
  flex-grow: 1;
  text-align: center;
}
.collection-item-list > li > .details > .details > .meta .item-type::before,
.feature-list > li > .details > .details > .meta .item-type::before {
  display: none;
}
.match-list,
.player-list,
.collection-item-list,
.feature-list {
  list-style-type: none;
}
.match-list > li,
.player-list > li,
.collection-item-list > li,
.feature-list > li {
  border: 1px solid var(--hatters-primary);
  margin-bottom: 1em;
}
.match-list > li .collection-item-image,
.player-list > li .collection-item-image,
.collection-item-list > li .collection-item-image,
.feature-list > li .collection-item-image {
  flex: 0 0 40%;
}
@media (max-width: 640px) {
  .match-list > li,
  .player-list > li,
  .collection-item-list > li,
  .feature-list > li {
    flex-direction: column;
  }
}
.match-list > li:nth-child(2n),
.player-list > li:nth-child(2n),
.collection-item-list > li:nth-child(2n),
.feature-list > li:nth-child(2n) {
  background: var(--scheme-background);
  color: var(--scheme-foreground);
  --scheme-foreground: white;
  --scheme-background: var(--hatters-primary);
  --scheme-accent: white;
}
.feature-list > li {
  gap: 1em;
}
.feature-list > li > .preview {
  width: 20em;
}
.feature-list > li > .details {
  display: flex;
  gap: 1em;
  flex-direction: column;
  justify-content: space-between;
}
.feature-list > li > .details:is(ul, ol) {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
.feature-list > li > .details > .share {
  align-self: flex-start;
}
.feature-list > li > .details > a {
  align-self: flex-end;
}
.player-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1em;
  margin-bottom: 1em;
}
@media (max-width: 1280px) {
  .player-list {
    grid-template-columns: 1fr;
  }
}
.player-list > li {
  margin-bottom: 0;
}
@media (max-width: 640px) {
  .player-list > li {
    display: flex;
    gap: 1em;
    flex-direction: column;
  }
  .player-list > li:is(ul, ol) {
    list-style-type: none;
    padding: 0;
    margin: 0;
  }
  .player-list > li > .share {
    align-self: flex-start;
  }
}
@media (max-width: 1280px) {
  .player-list > li:nth-child(2n) {
    background: var(--scheme-background);
    color: var(--scheme-foreground);
    --scheme-foreground: white;
    --scheme-background: var(--hatters-primary);
    --scheme-accent: white;
  }
  .player-list > li:nth-child(2n+1) {
    background: var(--scheme-background);
    color: var(--scheme-foreground);
    --scheme-foreground: black;
    --scheme-background: white;
    --scheme-accent: var(--hatters-primary);
  }
}
@media (min-width: 1281px) {
  .player-list > li:nth-child(4n),
  .player-list > li:nth-child(4n+1) {
    background: var(--scheme-background);
    color: var(--scheme-foreground);
    --scheme-foreground: white;
    --scheme-background: var(--hatters-primary);
    --scheme-accent: white;
  }
  .player-list > li:nth-child(4n+2),
  .player-list > li:nth-child(4n+3) {
    background: var(--scheme-background);
    color: var(--scheme-foreground);
    --scheme-foreground: black;
    --scheme-background: white;
    --scheme-accent: var(--hatters-primary);
  }
}
.player-list > .lazyload {
  grid-column: 1 / -1;
}
.match-list > li {
  --button-padding-horizontal: 1.5em;
}
.match-list > li > div {
  display: flex;
}
.match-list > li > div > .date {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 0 1 10em;
}
.match-list > li > div .result {
  display: grid;
  grid-template-columns: 1fr auto;
}
.match-list > li > div > .details {
  flex: 0 1 auto;
  font-size: var(--font-size-larger);
  margin-left: 1em;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.match-list > li.venue-a .result .luton {
  grid-row: 2;
}
.match-list > li.venue-a .result .opponent {
  grid-row: 1;
}
.loader {
  position: relative;
  left: calc(50% - 0.5em - 100vw);
}
.loader,
.loader::before,
.loader::after {
  background: transparent;
  border-radius: 50%;
  width: 1em;
  height: 1em;
  animation-fill-mode: both;
  animation: loader-bob 2s -0.2s infinite ease-in-out;
}
.loader::before,
.loader::after {
  content: '';
  position: absolute;
  top: 0;
}
.loader::before {
  left: -2em;
  animation-delay: -0.4s;
}
.loader::after {
  left: 2em;
  animation-delay: 0s;
}
[data-lazy-load] .loader {
  opacity: 0;
}
[data-lazy-load].loading .loader {
  opacity: 1;
}
[data-lazy-load].loading .lazyload button {
  display: none;
}
[data-lazy-load].load-complete .lazyload {
  display: none;
}
@keyframes loader-bob {
  0%,
  40%,
  100% {
    box-shadow: 100vw 0 0 0 currentColor;
  }
  20% {
    box-shadow: 100vw -1em 0 0 currentColor;
  }
}
enhanced-select,
tag-select,
tag-select-alt {
  font-size: var(--font-size-smaller);
}
enhanced-select::part(selected),
tag-select::part(selected),
tag-select-alt::part(selected) {
  padding: 0.5em;
  border: 2px solid black;
  border-radius: 0.25em;
}
enhanced-select::part(dropdown),
tag-select::part(dropdown),
tag-select-alt::part(dropdown) {
  border: 1px solid black;
}
enhanced-select::part(option),
tag-select::part(option),
tag-select-alt::part(option) {
  font-size: inherit;
}
enhanced-select::part(selected-option),
tag-select::part(selected-option),
tag-select-alt::part(selected-option) {
  background: var(--scheme-background);
  color: var(--scheme-foreground);
  --scheme-foreground: white;
  --scheme-background: var(--hatters-primary);
  --scheme-accent: white;
}
enhanced-select::part(selected-option)::before,
tag-select::part(selected-option)::before,
tag-select-alt::part(selected-option)::before {
  content: '\f00c';
  font-family: 'FontAwesome';
  margin-right: 0.5em;
}
enhanced-select::part(search),
tag-select::part(search),
tag-select-alt::part(search) {
  position: relative;
  padding: 0.5em;
  display: flex;
  gap: 0.5em;
}
enhanced-select::part(search)::before,
tag-select::part(search)::before,
tag-select-alt::part(search)::before {
  content: '\f002';
  font-family: 'FontAwesome';
}
tag-select-alt::part(options) {
  display: flex;
  flex-direction: column;
}
tag-select-alt::part(selected-option) {
  order: -1;
}
select {
  padding: 5.4px 3.2px;
}
.players ol:has(.milestone) > li {
  padding-bottom: 2em;
}
.players ol:has(.milestone) > li:has(.milestone) {
  --scheme-foreground: black;
  --scheme-background: white;
  --scheme-accent: black;
  color: var(--scheme-foreground);
}
.players ol:has(.milestone) > li:has(.milestone) figcaption {
  position: relative;
}
.players ol:has(.milestone) > li:has(.milestone) .milestone {
  position: absolute;
  width: max-content;
  top: 100%;
  left: 50%;
  translate: -50% 0;
  font-size: 0.65em;
  font-family: var(--hatters-font-primary);
}
.player-icon {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
}
.player-icon > *:first-child {
  position: relative;
  display: flex;
  gap: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2em;
  padding: 0.25em;
}
.player-icon > *:first-child:is(ul, ol) {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
.player-icon > *:first-child > .share {
  align-self: flex-start;
}
.player-icon > *:first-child > img,
.player-icon > *:first-child > .content {
  transform: rotate(var(--polaroid-rotate-default));
  border: 0.5em solid white;
  border-bottom-width: 2em;
  box-shadow: 0 0.2em 0.2em 0.2em rgba(0, 0, 0, 0.125);
  transition: transform 0.5s;
  max-height: 100%;
  min-height: 0;
}
.player-icon > *:first-child > img:hover,
.player-icon > *:first-child > .content:hover {
  transform: rotate(var(--polaroid-rotate-hover));
}
.player-icon > *:first-child > img {
  width: 100%;
  height: 100%;
}
.player-icon > figcaption {
  display: flex;
  flex-direction: column;
  font-size: var(--font-size-larger);
  margin-top: 0.5em;
  text-align: center;
}
.player-icon > figcaption > div:first-child {
  display: inline-flex;
  align-items: center;
  font-family: var(--hatters-font-primary);
  font-style: normal;
  position: relative;
  transition: all 0.2s;
  z-index: 1;
  color: var(--hatters-link-colour);
  /*
    &:hover {        
        
        color: var(--scheme-background);
    
        &::before {
            height: 100%;   
        }
    }
    */
  align-self: center;
}
.player-icon > figcaption > div:first-child::before {
  content: '';
  left: 0;
  right: 0;
  bottom: 0;
  position: absolute;
  /* height: 2px; */
  height: var(--hatters-link-height);
  background: var(--scheme-accent);
  display: block;
  transition: all 0.2s;
  z-index: -1;
}
.player-icon > figcaption > div:first-child.alternate::before {
  background: var(--scheme-foreground);
}
.player-icon > figcaption > div:first-child:hover {
  text-decoration: none;
}
.gallery {
  display: flex;
  gap: 1em;
  flex-direction: column;
  align-items: center;
  max-width: 100%;
  --max-height: unset;
}
.gallery:is(ul, ol) {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
.gallery > .share {
  align-self: flex-start;
}
.gallery .gallery-types {
  display: flex;
  gap: 1em;
  flex-direction: row;
  font-size: var(--font-size-header);
  align-items: center;
}
.gallery .gallery-types:is(ul, ol) {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
.gallery .gallery-types a {
  display: inline-flex;
  align-items: center;
  font-family: var(--hatters-font-primary);
  font-style: normal;
  position: relative;
  transition: all 0.2s;
  z-index: 1;
  color: var(--hatters-link-colour);
  /*
    &:hover {        
        
        color: var(--scheme-background);
    
        &::before {
            height: 100%;   
        }
    }
    */
}
.gallery .gallery-types a::before {
  content: '';
  left: 0;
  right: 0;
  bottom: 0;
  position: absolute;
  /* height: 2px; */
  height: var(--hatters-link-height);
  background: var(--scheme-accent);
  display: block;
  transition: all 0.2s;
  z-index: -1;
}
.gallery .gallery-types a.alternate::before {
  background: var(--scheme-foreground);
}
.gallery .gallery-types a:hover {
  text-decoration: none;
}
.gallery .gallery-types a.active {
  --link-state: 1;
  --hatters-link-colour: var(--scheme-background);
  --hatters-link-height: 100%;
}
.gallery .gallery-types a.active::before {
  background: var(--scheme-foreground);
}
.gallery .gallery-types a.active::before {
  background: var(--scheme-foreground);
}
.gallery .gallery-main {
  display: flex;
  gap: 1em;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  max-width: 100%;
}
.gallery .gallery-main:is(ul, ol) {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
.gallery .gallery-main > i {
  font-size: var(--font-size-header);
  font-style: normal;
}
.gallery .gallery-main > i[data-action="gallery-prev"]::before {
  content: '\f0a8';
  font-family: 'FontAwesome';
}
.gallery .gallery-main > i[data-action="gallery-next"]::before {
  content: '\f0a9';
  font-family: 'FontAwesome';
}
.gallery .gallery-main > .gallery-items {
  display: flex;
  gap: var(--gallery-item-gap);
  flex-direction: row;
  align-items: center;
  transition: max-height 0.5s;
  max-width: var(--page-width);
  /** max-height: var(--max-height); */
  height: 300px;
  overflow-x: scroll;
  overflow-y: hidden;
  scrollbar-width: none;
  scroll-behavior: smooth;
  position: relative;
}
.gallery .gallery-main > .gallery-items:is(ul, ol) {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
.gallery .gallery-main > .gallery-items::-webkit-scrollbar {
  display: none;
}
.gallery .gallery-main > .gallery-items > li {
  display: flex;
  gap: 0;
  flex-direction: column;
  max-height: 100%;
  flex: 0 0 var(--gallery-item-size);
  position: relative;
}
.gallery .gallery-main > .gallery-items > li:is(ul, ol) {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
.gallery .gallery-main > .gallery-items > li > .share {
  align-self: flex-start;
}
.gallery .gallery-main > .gallery-items > li > a {
  text-decoration: none;
}
.gallery .gallery-main > .gallery-items > li > a,
.gallery .gallery-main > .gallery-items > li > a > figure {
  display: flex;
  gap: 0;
  flex-direction: column;
  min-height: 0;
  flex: 0 1 auto;
}
.gallery .gallery-main > .gallery-items > li > a:is(ul, ol),
.gallery .gallery-main > .gallery-items > li > a > figure:is(ul, ol) {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
.gallery .gallery-main > .gallery-items > li > a > .share,
.gallery .gallery-main > .gallery-items > li > a > figure > .share {
  align-self: flex-start;
}
.gallery .gallery-main > .gallery-items > li img {
  padding: 0;
  background: transparent;
  scale: 1;
  box-shadow: none;
  transition: all 0.5s;
  overflow: hidden;
  min-height: 0;
  flex: 0 1 auto;
}
.gallery .gallery-toolbar {
  display: flex;
  gap: 1em;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  max-width: 100%;
}
.gallery .gallery-toolbar:is(ul, ol) {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
.gallery .gallery-toolbar > span {
  font-size: var(--font-size-smaller);
  font-family: var(--hatters-font-primary);
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.5s;
}
.gallery .gallery-toolbar > span.active {
  opacity: 0.25;
}
.gallery .gallery-toolbar > .gallery-controls {
  display: flex;
  gap: 1em;
  flex-direction: row;
  max-width: 100%;
  overflow-x: scroll;
  overflow-y: hidden;
  scrollbar-width: none;
  scroll-behavior: smooth;
  position: relative;
}
.gallery .gallery-toolbar > .gallery-controls:is(ul, ol) {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
.gallery .gallery-toolbar > .gallery-controls::-webkit-scrollbar {
  display: none;
}
.gallery .gallery-toolbar > .gallery-controls li a::before {
  content: '';
  display: block;
  width: 1em;
  transition: width 0.5s;
  height: 1em;
  background: var(--scheme-accent);
  border-radius: 0.5em;
}
.gallery .gallery-toolbar > .gallery-controls li a.active::before {
  width: 2em;
}
.gallery .gallery-toolbar > .gallery-controls li.item-type-even a::before {
  background: var(--scheme-foreground);
}
.collection-item-gallery .gallery-items li.active img {
  background: white;
  scale: 1.1;
  z-index: 10;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.5);
}
.collection-item-gallery .gallery-items li.active .youtube-preview {
  scale: 1.1;
}
.collection-item-gallery .gallery-items li.active .youtube-preview img {
  scale: 1;
}
.collection-item-preview figure {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}
.collection-item-preview figure figcaption {
  margin-top: 1em;
  text-align: center;
  display: inline-flex;
  align-items: center;
  font-family: var(--hatters-font-primary);
  font-style: normal;
  position: relative;
  transition: all 0.2s;
  z-index: 1;
  color: var(--hatters-link-colour);
  /*
    &:hover {        
        
        color: var(--scheme-background);
    
        &::before {
            height: 100%;   
        }
    }
    */
}
.collection-item-preview figure figcaption::before {
  content: '';
  left: 0;
  right: 0;
  bottom: 0;
  position: absolute;
  /* height: 2px; */
  height: var(--hatters-link-height);
  background: var(--scheme-accent);
  display: block;
  transition: all 0.2s;
  z-index: -1;
}
.collection-item-preview figure figcaption.alternate::before {
  background: var(--scheme-foreground);
}
.collection-item-preview figure figcaption:hover {
  text-decoration: none;
}
.related-items {
  padding-top: 2em;
}
.related-items h4 {
  margin-bottom: 1em;
}
.related-items .page-width {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.related-items .collection-item-preview {
  width: 20em;
  display: block;
}
.under {
  position: relative;
  z-index: -1;
  padding-bottom: 1em;
  background: url('/spectators.jpg') bottom center / cover no-repeat, var(--scheme-background);
  background-blend-mode: multiply;
  border-bottom: 0.5em solid black;
}
.twitter-timeline iframe,
.fb_iframe_widget iframe {
  width: 100% !important;
}
suggest-list {
  font-size: var(--font-size-smaller);
}
suggest-list::part(selected) {
  border: none;
  padding: 0;
  font-size: inherit;
  height: 2.5em;
}
suggest-list::part(search) {
  padding: 0.5em;
  border: 2px solid black;
  border-radius: 0.25em;
  font-size: inherit;
}
suggest-list::part(dropdown) {
  border: 2px solid black;
  border-radius: 0.25em;
}
suggest-list::part(option) {
  font-size: var(--font-size-smaller);
  display: flex;
  flex-direction: column;
}
suggest-list::part(hidden) {
  display: none;
}
suggest-list::part(option):hover {
  background: var(--hatters-primary);
  color: white;
}
suggest-list::part(player-known-as) {
  font-size: var(--font-size-body);
}
suggest-list::part(player-full-name),
suggest-list::part(player-active) {
  margin-left: 0.5em;
}
suggest-list::part(player-active-years) {
  font-weight: bold;
}
.featured-match {
  --button-padding-horizontal: 4em;
}
.featured-match .date {
  padding: 1em;
  font-family: var(--hatters-font-primary);
  font-size: var(--font-size-subheader);
}
.featured-match .content {
  display: flex;
  gap: 0;
  flex-direction: column;
}
.featured-match .content:is(ul, ol) {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
.featured-match .content > .share {
  align-self: flex-start;
}
.featured-match .content > * {
  max-width: 100em;
}
.featured-match button,
.featured-match .button {
  font-size: var(--font-size-larger);
}
ul.breadcrumb {
  display: flex;
  gap: 0.5em;
  flex-direction: row;
  width: 100%;
  max-width: calc(1350px + 2em);
  margin: 0 auto;
  font-family: var(--hatters-font-primary);
  font-size: var(--font-size-body);
  /** MT FIXME: This is a hack to get the breadcrumb to center */
}
ul.breadcrumb:is(ul, ol) {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
ul.breadcrumb:is(ul) {
  margin: 0 auto;
  padding: 1em;
}
ul.breadcrumb > li {
  display: flex;
  gap: 0.5em;
  flex-direction: row;
  align-items: baseline;
}
ul.breadcrumb > li:is(ul, ol) {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
ul.breadcrumb > li:not(:first-child)::before {
  content: '\f105';
  font-family: 'FontAwesome';
  translate: 0 1px;
}
ul.breadcrumb > li > a {
  display: inline-flex;
  align-items: center;
  font-family: var(--hatters-font-primary);
  font-style: normal;
  position: relative;
  transition: all 0.2s;
  z-index: 1;
  color: var(--hatters-link-colour);
  /*
    &:hover {        
        
        color: var(--scheme-background);
    
        &::before {
            height: 100%;   
        }
    }
    */
}
ul.breadcrumb > li > a::before {
  content: '';
  left: 0;
  right: 0;
  bottom: 0;
  position: absolute;
  /* height: 2px; */
  height: var(--hatters-link-height);
  background: var(--scheme-accent);
  display: block;
  transition: all 0.2s;
  z-index: -1;
}
ul.breadcrumb > li > a.alternate::before {
  background: var(--scheme-foreground);
}
ul.breadcrumb > li > a:hover {
  text-decoration: none;
}
ul.breadcrumb > li.breadcrumb-home > a {
  font-family: 'FontAwesome';
  display: inline-block;
  padding-bottom: 5px;
}
ul.breadcrumb h1 {
  font-size: inherit;
}
[data-action] {
  cursor: pointer;
}
i[data-action],
[data-action] i {
  transition: all 0.5s;
}
i[data-action]:hover,
[data-action]:hover i {
  color: var(--scheme-accent);
}
.embed-container {
  width: 300px;
  height: 476px;
  position: relative;
}
.embed-container::before {
  content: '';
  position: absolute;
  inset: 1em;
  border-radius: 2em;
  background: linear-gradient(138deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.1));
  backdrop-filter: blur(5px);
  background-size: 200% 100%;
  animation: glint 5s ease infinite;
}
.embed-container iframe {
  position: relative;
  z-index: 1;
}
@keyframes glint {
  0%,
  100% {
    background-position: 0 0;
  }
  50% {
    background-position: 100% 0;
  }
}
.patron-list {
  list-style: none;
  text-align: center;
  padding: 0;
  margin: 0;
  font-family: 'Bebas Neue';
  color: var(--scheme-accent);
}
.patron-list strong {
  text-transform: uppercase;
  color: var(--scheme-foreground);
  font-size: var(--font-size-larger);
}
.page-5 .polaroid-container {
  height: auto;
  max-height: 50vh;
}
.close-sidebar {
  position: absolute;
  top: 1em;
  right: 1em;
}
.close-sidebar::before {
  content: '\f00d';
  font-family: 'FontAwesome';
  font-size: var(--font-size-header);
}
button.back-to-top {
  position: fixed;
  z-index: 1000;
  bottom: 1em;
  right: 1em;
  background: var(--scheme-foreground);
  color: var(--scheme-background);
  width: 2em;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 3px solid currentColor;
  font-size: var(--font-size-subheader);
  opacity: 0;
  pointer-events: none;
  transition: all 0.5s;
}
button.back-to-top::before {
  content: '\f062';
  font-family: 'FontAwesome';
}
button.back-to-top:hover {
  color: var(--scheme-background);
  background: var(--scheme-accent);
}
body.show-back-to-top .back-to-top {
  opacity: 1;
  pointer-events: all;
}
section.news-item {
  display: flex;
  gap: 2em;
  flex-direction: column;
  padding: 2em 0;
  align-items: stretch;
}
section.news-item:is(ul, ol) {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
section.news-item > .share {
  align-self: flex-start;
}
section.news-item > section {
  display: flex;
  gap: 0;
  flex-direction: column;
}
section.news-item > section:is(ul, ol) {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
section.news-item > section > .share {
  align-self: flex-start;
}
section.news-item > section > h2 {
  text-align: left;
}
section.news-item > section > .date {
  margin-bottom: 1em;
}
@media (min-width: 641px) {
  section.news-item {
    flex-direction: row;
    align-items: flex-start;
  }
  section.news-item > img {
    width: 20em;
  }
}
.news-item .date {
  font-family: var(--hatters-font-primary);
}
.fb-page > span {
  max-width: 100%;
}
@media (max-width: 640px) {
  #i226k > .split > *:not(:first-child) {
    display: none;
  }
}
dialog.lightbox {
  background: var(--scheme-background);
  color: var(--scheme-foreground);
  --scheme-foreground: black;
  --scheme-background: white;
  --scheme-accent: var(--hatters-primary);
  display: flex;
  gap: 1em;
  flex-direction: column;
  position: fixed;
  inset: 0;
  margin: auto;
  padding: 5vmin;
  border: none;
  translate: 0 50px;
  opacity: 0;
  pointer-events: none;
  transition: all 0.5s;
  max-width: calc(100vw - 3em);
  max-height: calc(100vh - 3em);
  --zoom-level: 1;
}
dialog.lightbox:is(ul, ol) {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
dialog.lightbox > .share {
  align-self: flex-start;
}
dialog.lightbox .toolbar {
  display: flex;
  gap: 1em;
  flex-direction: row;
  justify-content: space-between;
}
dialog.lightbox .toolbar:is(ul, ol) {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
dialog.lightbox button {
  font-size: var(--font-size-body);
  display: flex;
  gap: 0.5em;
  flex-direction: row;
  align-items: center;
  align-self: flex-end;
}
dialog.lightbox button:is(ul, ol) {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
dialog.lightbox button[data-close]::before {
  content: '\f00d';
  font-family: 'FontAwesome';
}
dialog.lightbox button.toggle-zoom .zoom-level {
  display: none;
  font-size: var(--font-size-smaller);
  align-items: baseline;
}
dialog.lightbox button.toggle-zoom::before {
  content: '\f002';
  font-family: 'FontAwesome';
}
dialog.lightbox button.toggle-zoom::after {
  content: '';
  top: 0;
  right: 0;
  bottom: 0;
  position: absolute;
  width: 0;
  background: var(--scheme-accent);
  display: block;
  transition: all 0.2s;
  z-index: -1;
}
dialog.lightbox > figure {
  display: flex;
  gap: 1em;
  flex-direction: column;
  text-align: center;
  flex-shrink: 1;
}
dialog.lightbox > figure:is(ul, ol) {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
dialog.lightbox > figure > .share {
  align-self: flex-start;
}
dialog.lightbox > figure > .zoom-container {
  position: relative;
  overflow: hidden;
}
dialog.lightbox > figure > .zoom-container > img.zoom {
  opacity: 0;
  transition: opacity 0.5s;
  position: absolute;
  top: calc(100% * var(--y));
  left: calc(100% * var(--x));
  max-width: unset;
  max-height: unset;
  min-width: 80vw;
  min-height: 80vh;
  scale: var(--zoom-level);
  transform-origin: 0 0;
  translate: calc(-100% * var(--zoom-level) * var(--x)) calc(-100% * var(--zoom-level) * var(--y));
}
dialog.lightbox > figure > .caption {
  display: flex;
  gap: 1em;
  flex-direction: row;
  align-items: center;
}
dialog.lightbox > figure > .caption:is(ul, ol) {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
dialog.lightbox > figure > .caption > i {
  font-size: var(--font-size-larger);
  font-style: normal;
}
dialog.lightbox > figure > .caption > i.hidden {
  display: none;
}
dialog.lightbox > figure > .caption > i[data-action="lightbox-prev"]::before {
  content: '\f0a8';
  font-family: 'FontAwesome';
}
dialog.lightbox > figure > .caption > i[data-action="lightbox-next"]::before {
  content: '\f0a9';
  font-family: 'FontAwesome';
}
dialog.lightbox > figure > .caption > figcaption {
  font-family: var(--hatters-font-primary);
  text-align: center;
  flex: 1 0 auto;
}
dialog.lightbox > figure > .markdown-preview {
  max-width: min(90vw, 50em);
  rotate: 0deg;
  box-shadow: 5px 5px 10px 0 rgba(0, 0, 0, 0.2);
}
dialog.lightbox > figure iframe {
  width: 60em;
  max-width: 100%;
  aspect-ratio: 16 / 9;
}
dialog.lightbox[open] {
  pointer-events: initial;
  opacity: 1;
  translate: 0 0;
}
dialog.lightbox[data-zoom] button.toggle-zoom {
  color: var(--scheme-background);
}
dialog.lightbox[data-zoom] button.toggle-zoom::after {
  width: 100%;
}
dialog.lightbox[data-zoom] button.toggle-zoom .zoom-level {
  display: flex;
}
dialog.lightbox[data-zoom] button.toggle-zoom .zoom-level .value {
  font-size: var(--font-size-body);
}
dialog.lightbox[data-zoom] > figure > .zoom-container {
  cursor: zoom-in;
}
dialog.lightbox[data-zoom] > figure > .zoom-container > img.zoom {
  opacity: 1;
}
dialog.lightbox .related-objects {
  display: flex;
  gap: 0;
  flex-direction: row;
  row-gap: 0.5em;
  max-width: 40vw;
  flex-wrap: wrap;
  justify-content: center;
}
dialog.lightbox .related-objects:is(ul, ol) {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
dialog.lightbox .related-objects li {
  padding: 0 1em;
  position: relative;
}
dialog.lightbox .related-objects li:not(:last-child) {
  border-right: 2px solid var(--scheme-accent);
}
dialog::backdrop {
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(5px);
}
.markdown-preview {
  background: url('/paper-background-2.webp') center center / cover no-repeat;
  font-family: serif;
  padding: 1em;
  font-weight: bold;
  min-height: 0;
  overflow-wrap: break-word;
  display: flex;
  gap: 0;
  flex-direction: column;
}
.markdown-preview:is(ul, ol) {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
.markdown-preview > .share {
  align-self: flex-start;
}
.markdown-preview .inner {
  flex-shrink: 1;
  min-height: 0;
  color: #333;
  text-align: left;
}
.markdown-preview .inner p {
  margin-bottom: 1em;
}
.markdown-preview .markdown-link {
  color: var(--hatters-primary);
  text-decoration: underline;
}
.markdown-preview strong {
  font-size: 1.5rem;
}
.collection-item-preview .markdown-preview {
  flex-shrink: 1;
  overflow: hidden;
  max-width: 100%;
}
.collection-item-preview .markdown-preview .inner {
  mask: linear-gradient(to top, transparent, black 4em, black);
}
.collection-item-preview .youtube-preview {
  position: relative;
  flex: 0 1 auto;
  overflow: hidden;
  display: flex;
  transition: all 0.5s;
}
.collection-item-preview .youtube-preview::after {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  content: '\f167';
  font-family: 'FontAwesome';
  font-size: 4em;
  color: white;
  transition: color 0.2s;
  z-index: 10;
}
.collection-item-preview:hover .youtube-preview::after {
  color: var(--hatters-primary);
}
.collection-item-preview .related-objects {
  display: none;
}
@property --wobble {
  syntax: "<angle>";
  inherits: true;
  initial-value: 0deg;
}
@keyframes wobble {
  3% {
    --wobble: 0deg;
  }
  5% {
    --wobble: -10deg;
  }
  10% {
    --wobble: 9deg;
  }
  15% {
    --wobble: -8deg;
  }
  20% {
    --wobble: 7deg;
  }
  25% {
    --wobble: -6deg;
  }
  30% {
    --wobble: 5deg;
  }
  35% {
    --wobble: -4deg;
  }
  40% {
    --wobble: 3deg;
  }
  45% {
    --wobble: -2deg;
  }
  50% {
    --wobble: 1deg;
  }
  55% {
    --wobble: 0deg;
  }
}
.collection-item-preview,
.collection-item .preview {
  position: relative;
}
.collection-item-preview .pdf-preview:not(:is(li.item-type-programme *)) > div,
.collection-item .preview .pdf-preview:not(:is(li.item-type-programme *)) > div {
  display: none;
}
.collection-item-preview .pdf-preview:is(li.item-type-programme *) > div,
.collection-item .preview .pdf-preview:is(li.item-type-programme *) > div {
  position: absolute;
  top: 50%;
  left: 50%;
  background: var(--hatters-primary);
  padding: 1em;
  translate: -50% -50%;
  color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  overflow: hidden;
}
.collection-item-preview .pdf-preview:is(li.item-type-programme *) > div::before,
.collection-item .preview .pdf-preview:is(li.item-type-programme *) > div::before {
  content: '';
  position: absolute;
  inset: 0;
  background: black;
  translate: 0 100%;
  transition: translate 0.5s;
}
.collection-item-preview .pdf-preview:is(li.item-type-programme *) > div > span,
.collection-item .preview .pdf-preview:is(li.item-type-programme *) > div > span {
  z-index: 10;
}
.collection-item-preview .pdf-preview:is(li.item-type-programme *) > div > .icon,
.collection-item .preview .pdf-preview:is(li.item-type-programme *) > div > .icon {
  display: block;
  width: 1em;
  height: 1.5em;
  perspective: 8em;
  perspective-origin: 50% 8em;
  position: relative;
  translate: 0 0;
  transition: translate 0.5s;
}
.collection-item-preview .pdf-preview:is(li.item-type-programme *) > div > .icon::before,
.collection-item .preview .pdf-preview:is(li.item-type-programme *) > div > .icon::before,
.collection-item-preview .pdf-preview:is(li.item-type-programme *) > div > .icon::after,
.collection-item .preview .pdf-preview:is(li.item-type-programme *) > div > .icon::after {
  content: '';
  display: block;
  position: absolute;
  inset: 0;
  background: white;
  border: 1px solid var(--hatters-primary);
  transform: rotateY(0deg);
  transform-origin: 0 0;
}
.collection-item-preview .pdf-preview:is(li.item-type-programme *) > div > .icon::after,
.collection-item .preview .pdf-preview:is(li.item-type-programme *) > div > .icon::after {
  transform: rotateY(calc(-20deg + var(--wobble)));
  animation: wobble 5s ease-in-out infinite;
  transition: transform 0.5s;
}
.collection-item-preview .pdf-preview:is(li.item-type-programme *) > div > .label,
.collection-item .preview .pdf-preview:is(li.item-type-programme *) > div > .label {
  display: block;
  height: 1.5em;
  padding-top: 1em;
  opacity: 1;
  text-align: center;
  font-family: var(--hatters-font-primary);
}
.collection-item-preview:hover .pdf-preview:is(li.item-type-programme *) > div > .icon,
.collection-item .preview:hover .pdf-preview:is(li.item-type-programme *) > div > .icon {
  translate: 0.5em 0;
}
.collection-item-preview:hover .pdf-preview:is(li.item-type-programme *) > div > .icon::before,
.collection-item .preview:hover .pdf-preview:is(li.item-type-programme *) > div > .icon::before,
.collection-item-preview:hover .pdf-preview:is(li.item-type-programme *) > div > .icon::after,
.collection-item .preview:hover .pdf-preview:is(li.item-type-programme *) > div > .icon::after {
  border-color: black;
}
.collection-item-preview:hover .pdf-preview:is(li.item-type-programme *) > div > .icon::after,
.collection-item .preview:hover .pdf-preview:is(li.item-type-programme *) > div > .icon::after {
  transform: rotateY(-140deg);
}
.collection-item-preview:hover .pdf-preview:is(li.item-type-programme *) > div::before,
.collection-item .preview:hover .pdf-preview:is(li.item-type-programme *) > div::before {
  translate: 0 0;
}
.featured-image .markdown-preview {
  max-height: 50em !important;
  overflow: hidden;
}
.featured-image .markdown-preview .inner {
  mask: linear-gradient(to top, transparent, black 4em, black);
}
img.simple-embed {
  margin: 0 auto;
}
.news-index section > section > h2 {
  width: 100%;
  max-width: var(--page-width);
  margin: 0 auto;
  margin-bottom: 2em;
  position: relative;
  font-size: var(--font-size-subheader);
  text-align: left;
}
.news-index section > section > h2::after {
  content: '';
  position: absolute;
  bottom: -0.2em;
  left: 0;
  right: 0;
  height: 0.2em;
  background: currentColor;
}
.news-index li.news-item {
  border-bottom: 3px solid black;
  padding-bottom: 1em;
  align-items: flex-start;
}
.news-index li.news-item > figure {
  display: flex;
}
.news-index li.news-item p:last-child {
  margin-bottom: 0;
}
.news-index ol.news-items {
  margin-bottom: 2em;
}
.admin-bar {
  background: var(--scheme-background);
  color: var(--scheme-foreground);
  --scheme-foreground: white;
  --scheme-background: var(--hatters-primary);
  --scheme-accent: white;
  display: flex;
  gap: 1em;
  flex-direction: row;
  font-size: smaller;
  font-family: var(--hatters-font-primary);
  padding: 0.5em;
}
.admin-bar:is(ul, ol) {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
.admin-bar a::before {
  margin-right: 0.5em;
}
.admin-bar a.admin-home::before {
  content: '\f085';
  font-family: 'FontAwesome';
}
.admin-bar a.admin-edit::before {
  content: '\f040';
  font-family: 'FontAwesome';
}
article.security .content {
  display: flex;
  flex-direction: column;
  max-width: 30em;
  text-align: center;
  margin: 5em auto;
}
article.security .form {
  display: flex;
  flex-direction: column;
  max-width: 30em;
  margin: 5em auto;
  overflow: hidden;
  border: 1px solid var(--hatters-primary);
}
article.security .form ul {
  background: var(--hatters-primary);
  list-style-type: none;
  color: white;
  display: flex;
  font-size: var(--font-size-subheader);
  font-family: var(--hatters-font-primary);
}
article.security .form ul li {
  padding: 0.25em 0.5em;
}
article.security .form .form-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1em;
}
article.security .form .form-tab:not(#MemberLoginForm_LoginForm_Tab):not(:target),
article.security .form .form-tab:target + .form-tab {
  display: none;
}
article.security .form .form-tab form {
  font-size: var(--font-size-body);
}
article.security .form .form-tab form fieldset {
  display: flex;
  flex-direction: column;
  gap: 1em;
  padding: 1em;
}
article.security .form .form-tab form fieldset .field.checkbox {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
}
article.security .form .form-tab form fieldset .field.checkbox > input {
  flex: 0 0 min-content;
}
article.security .form .form-tab form input {
  font-size: inherit;
}
article.security #ForgotPassword {
  margin-top: 1em;
  text-align: center;
}
article.security input[type="submit"] {
  font-family: var(--hatters-font-primary);
  font-weight: normal;
  background: var(--scheme-foreground);
  color: var(--scheme-background);
  border-radius: 6px;
  position: relative;
  padding: var(--button-padding-vertical) var(--button-padding-horizontal);
  border: none;
  transition: all 0.5s;
}
article.security input[type="submit"]:hover {
  text-decoration: none;
  background: var(--scheme-background);
  color: var(--scheme-accent);
}
article.security input[type="submit"]:not(.unstyled)::before {
  content: '';
  display: block;
  inset: 2px;
  border-radius: 4px;
  position: absolute;
  border: 2px solid currentColor;
  pointer-events: none;
}
article.security input[type="submit"].clear-filter {
  background: none;
  color: var(--scheme-primary);
  align-self: flex-end;
  padding: 0;
  font-size: var(--font-size-smaller);
}
article.security input[type="submit"].clear-filter::before {
  content: '\f00d';
  font-family: 'FontAwesome';
  position: static;
  display: inline;
  border: none;
  margin-right: 0.5em;
}
article.security input[type="submit"].clear-filter:hover {
  color: var(--scheme-accent);
}
section.cookie-consent {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: white;
  padding: 1em;
  border-top: 3px solid var(--hatters-primary);
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.5);
  max-height: 80vh;
  overflow: auto;
  transition: all 0.5s;
}
section.cookie-consent .inner {
  width: 80%;
  max-width: 40em;
  margin: 0 auto;
}
section.cookie-consent .inner ul {
  list-style-type: none;
  padding-left: 2em;
}
section.cookie-consent .inner ul li {
  margin: 1em 0;
  position: relative;
}
section.cookie-consent .inner ul li::before {
  content: '-';
  position: absolute;
  top: 0;
  left: -1em;
}
section.cookie-consent .inner .choices {
  display: flex;
  gap: 1em;
  flex-direction: row;
  margin-top: 1em;
  justify-content: space-between;
}
section.cookie-consent .inner .choices:is(ul, ol) {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
section.cookie-consent .inner .choices button {
  font-size: var(--font-size-body);
}
html.hide-cookie-banner .cookie-consent {
  transform: translateY(100%);
  opacity: 0;
  pointer-events: none;
}
.filter-list article > h2 {
  text-align: left;
  margin-bottom: 1em;
  font-size: var(--font-size-larger);
  /*
        > span {
            font-size: var(--font-size-larger);
        }
        */
}
.filter-list article > hr {
  margin: 1em;
  border: 2px solid var(--hatters-primary);
}
.stats-table > div {
  display: grid;
  grid-template-columns: 15% 1fr repeat(5, max-content);
  column-gap: 2em;
  row-gap: 1em;
}
.stats-table > div > .header {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;
}
.stats-table > div > .header > span {
  text-align: center;
  font-weight: bold;
}
.stats-table > div > ol {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;
  row-gap: 1em;
}
.stats-table > div > ol > li {
  padding: 1em;
  align-items: center;
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;
  border: 1px solid var(--hatters-primary);
}
.stats-table > div > ol > li > figure {
  margin-right: 25%;
}
.stats-table > div > ol > li > .info {
  align-self: start;
}
.stats-table > div > ol > li > .info > .name {
  font-family: var(--hatters-font-primary);
  font-size: var(--font-size-larger);
}
.stats-table > div > ol > li > .info > .basic-info {
  display: block;
  margin-top: 1em;
}
.stats-table > div > ol > li > .info > .button {
  display: none;
}
.stats-table > div > ol > li > span {
  text-align: center;
  font-weight: bold;
}
.stats-table > div > ol > li:nth-child(2n+1) {
  background: var(--scheme-background);
  color: var(--scheme-foreground);
  --scheme-foreground: white;
  --scheme-background: var(--hatters-primary);
  --scheme-accent: white;
}
@media (max-width: 1280px) {
  .stats-table > div {
    grid-template-columns: 1fr repeat(4, max-content);
  }
  .stats-table > div > .header > *:first-child,
  .stats-table > div > ol > li > *:first-child,
  .stats-table > div > .header > *:last-child,
  .stats-table > div > ol > li > *:last-child {
    display: none;
  }
  .stats-table > div > ol > li > .info {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
  }
  .stats-table > div > ol > li > .info > .basic-info {
    display: none;
  }
  .stats-table > div > ol > li > .info > .button {
    display: block;
  }
}
@media (max-width: 480px) {
  .stats-table > div {
    grid-template-columns: repeat(4, 1fr);
  }
  .stats-table > div > .header > span:nth-child(2) {
    display: none;
  }
  .stats-table > div > ol > li {
    row-gap: 1em;
  }
  .stats-table > div > ol > li > figure {
    grid-column: 1 / -1;
    margin-right: 0;
  }
  .stats-table > div > ol > li > .info {
    grid-column: 1 / -1;
  }
  .stats-table > div > ol > li > .info > .name {
    font-size: var(--font-size-subheader);
  }
  .stats-table > div > ol > li > .view-more {
    grid-column: 1 / -1;
    text-align: center;
  }
}