:root {
  --wildcat-blue: #0033a0;
  --wildcat-white: #ffffff;
  --bluegrass: #1e8aff;
  --sky: #b1c9e8;
  --midnight: #1b365d;
  --goldenrod: #ffdc00;
  --sunset: #ffa360;
  --river-green: #4cbcc0;
}

body {
  height: 100vh;
  background-attachment: fixed;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  background-color: var(--wildcat-blue);
  overflow-x: hidden;
  overflow-y: auto;
}

.hamburger-open body {
  overflow-y: hidden;
}

body.deluxe-page #block-fwrd-pagetitle,
body.deluxe-page .region--sidebar {
  display: none;
}

h1,h2,h3,h4,h5,h6 {
  font-family: "Usual", sans-serif;
  font-weight: bold;

  color: var(--wildcat-blue);
  margin-bottom: 0.8em;
}
h1,h2 {
  text-transform: uppercase;
}

h1 { font-size: 36px; }
h2 { font-size: 32px; }
h3 { font-size: 28px; }
h4 { font-size: 24px; }
h5 { font-size: 22px; }
h6 { font-size: 20px; }

img { height: auto; }

.squiggle:after {
  content: url('../images/icons/fwrd-headline-squiggle.svg');
  display: inline-block;
  width: 2em;
}

main {
  min-width: 17rem;
  background-color: white;
  background-size: auto;
  background-attachment: fixed;
  background-repeat: repeat;
  color: black;
  overflow-y: visible;
}

.color-light {
  color: var(--light);
}

.border-sky {
  border-color: var(--sky);
}

.bg-midnight {
  background-color: var(--midnight);
}

.color-wildcat-blue {
  color: var(--wildcat-blue);
}

.bg-wildcat-blue {
  background-color: var(--wildcat-blue);
}

.bg-white {
  background-color: white;
}

@media (prefers-reduced-motion: no-preference) {
  .fade-in-on-scroll {
    opacity: 0;
  }

  .fade-in {
    animation-name: fade-in;
    animation-duration: 1s;
    animation-iteration-count: 1;
    animation-fill-mode: both;
  }
  @keyframes fade-in {
    0% { opacity: 0; }
    100% { opacity: 1; }
  }

  .fade-in-lift-up {
    animation-name: fade-in-lift-up;
    animation-duration: 1s;
    animation-iteration-count: 1;
    animation-fill-mode: both;
    padding-bottom: 2vw;
    margin-bottom: -2vw;
    opacity: 1;
  }
  @keyframes fade-in-lift-up {
    0% {
      opacity: 0;
      padding-top: 2vw;
      padding-bottom: 0;
    }
    100% {
      opacity: 1;
      padding-top: 0;
      padding-bottom: 2vw;
    }
  }

  .delay0 { animation-delay: 0;}
  .delay1 { animation-delay: 0.25s;}
  .delay2 { animation-delay: 0.5s; }
  

}


ul.pipe-separated {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

ul.pipe-separated li {
  display: flex;
  padding-left: 1em;
  padding-right: 1em;
  padding-top: 0.5ex;
  padding-bottom: 0.5ex;
  border-right: 1px solid white;
}

ul.pipe-separated li:last-of-type {
  border-right: none;
}

.video-background-container {
  position: relative;
  height: 35vw;
  overflow: hidden;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  background-repeat: no-repeat;
  background-size: cover;
  background-color: var(--sky);
}
.video-background-container picture img {
  width: 100%;
}
.video-background-container video {
  position: absolute;
  width: 100%;
  height: auto;
  top: 0;
}

.video-background-content {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 5vw;
  filter: drop-shadow(2px 2px 2px black)
}

.video-background-content img {
  width: 100%;
}

.video-background-content div.subtitle {
  font-size: 2vw;
}
.video-background-content div.title {
  font-size: 4vw;
}
.video-background-content .header-buttons {
  display: flex;
  justify-content: space-around;
  font-size: 2vw;
  position: absolute;
  bottom: 8vw;
  left: 0;
  right: 0;
  padding: 0 14vw;
}

@media (max-width: 600px) {
    .video-background-container video {
      display: none;
    }
    .video-background-container {
      background-repeat: no-repeat;
      background-size: cover;
    }
    .video-background-container div.subtitle {
      font-size: 4vw;
    }
    .video-background-container div.title {
      font-size: 8vw;
    }
    .video-background-container .header-buttons {
      font-size: 4vw;
      bottom: 0;
      padding: 0;
    }
}

body.auto-margins main > div {
  max-width: 94rem;
  margin: 0 auto;
  display: flex;
  gap: 2rem;
  padding: 1.5rem 2rem;
}

body.auto-margins .region--content {
  max-width: 72rem;
  margin: 0 auto;
  width: 100%;
}

body.auto-margins.has-sidebar .region--content {
  margin: 0;
}

.region--sidebar {
  width: 20rem;
  flex-shrink: 0;
}

@media only screen and (max-width: 900px) {
  body.auto-margins main > div {
    flex-direction: column-reverse;
  }

  .region--sidebar {
    width: 100%;
  }
}


main section {
  width: 90vw;
  padding: 2vw 5vw;
  margin-left: auto;
  margin-right: auto;
}

article p,
.region--sidebar p,
.profile p {
  padding-top: 0.5em;
  padding-bottom: 0.5em;
}

p:empty {
  padding-top: 0;
  padding-bottom: 0;
}

ol ol li {
  margin-left: 2rem;
  list-style: lower-alpha;
}
ol ol ol li {
  list-style: lower-roman;
}

article a,
.region--sidebar a,
.profile a,
.block-book-breadcrumb a {
  color: var(--wildcat-blue);
}

article a:hover,
.region--sidebar a:hover,
.profile a:hover,
.block-book-breadcrumb a:hover {
  color: var(--bluegrass);
  text-decoration: underline;
}

article ul,
.region--sidebar ul,
.profile ul {
  padding-left: 1em;
}

article strong,
.region--sidebar strong,
.profile strong {
  font-weight: 700;
}

figure.align-right, img.align-right {
  padding: 1rem;
  padding-right: 0;
}

figure.align-left, img.align-left {
  padding: 1rem;
  padding-left: 0;
}

figcaption {
  inline-size: min-content;
  min-width: 100%;
  font-size: 0.8rem;
}

#block-fwrd-system-main .views-row {
  padding: 1rem;
  background-color: var(--sky);
  margin-bottom: 2rem;
}

body.deluxe-page #block-fwrd-local-tasks {
  position: absolute;
  padding: 1rem;
  z-index: 50;
}



.infographics .infographics-row {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: stretch;
  min-height: 15vw;
  color: var(--wildcat-blue);
}

.infographics .infographics-row > div {
  display: flex;
  padding: 1em;
  width: 100%;
  justify-content: center;
  align-content: center;
  border-right: 1px solid var(--midnight);
}
.infographics .infographics-row > div:last-of-type {
  border-right: none;
}

@media only screen and (max-width: 600px) {
  .infographics .infographics-row {
    flex-direction: column;
  }

  .infographics .infographics-row > div {
    border-right: none;
  }
}

.node--unpublished {
  background-color: rgba(255, 192, 203, 0.7);
  background: url("\
data:image/svg+xml;utf8, \
  <svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='200px' height='200px'> \
    <rect x='0' y='0' width='200' height='200'\
      style='stroke:none; \
             fill:pink;  fill-opacity: 0.7; '/> \
    <text x='0' y='150' \
      style='fill:white; text-anchor: middle' font-size='32' \
      transform='rotate(-45)'> \
      Unpublished \
    </text> \
  </svg>\
");
  border-radius: 1rem;
}