/* =========================================================
   MODERN CSS RESET
   Taken from
   - https://andy-bell.co.uk/a-more-modern-css-reset/
   - https://www.joshwcomeau.com/css/custom-css-reset/
========================================================= */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

body, h1, h2, h3, h4, h5, h6, p,
figure, blockquote, dl, dd {
  margin: 0;
}

ul[role=list],
ol[role=list] {
  list-style: none;
  margin-inline: 0;
  padding: 0;
}

body {
  min-height: 100vh;
}

/* Balance text wrapping on headings */
h1, h2, h3,
h4, h5, h6 {
  text-wrap: balance;
}

a:not([class]) {
  -webkit-text-decoration-skip: ink;
          text-decoration-skip-ink: auto;
}

input, button,
textarea, select {
  font: inherit;
}

textarea:not([rows]) {
  min-height: 10rem;
}

img, picture, video, canvas, svg {
  display: block;
  height: auto;
  max-width: 100%;
}

audio {
  width: 100%;
}

p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

pre {
  white-space: pre-wrap;
}

@media (prefers-reduced-motion: reduce) {
  *,
*::before,
*::after {
    -webkit-animation-duration: 0.01ms !important;
            animation-duration: 0.01ms !important;
    -webkit-animation-iteration-count: 1 !important;
            animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
/*****************************************************************
   CUSTOM PROPERTIES

	1.0 Fonts
	2.0 Font sizes
   3.0 Colors
   4.0 z-index
	5.0 Transitions
   10.0 Misc helpers
*****************************************************************/
:root {
  /* 1.0 Fonts ---------------- */
  --font-body: "Open Sans", "Roboto", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
  --font-slab: "Roboto Slab", "Open Sans", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
  /* 2.0 Font sizes ---------------- */
  --fs--2: 0.75rem;
  --fs--1: 0.875rem;
  --fs-0: 1rem;
  --fs-1: 1.125rem;
  --fs-2: 1.375rem;
  --fs-3: 1.625rem;
  --fs-4: 1.75rem;
  --fs-5: 2rem;
  /* 3.0 Colors ---------------- */
  --teal: #00a0af;
  --teal-50: #ebfffd;
  --teal-100: #cdfffd;
  --teal-200: #a1fffe;
  --teal-300: #60feff;
  --teal-400: #18f2f8;
  --teal-500: #00d5de;
  --teal-600: var(--teal);
  --teal-700: #088696;
  --teal-800: #106b7a;
  --teal-900: #125967;
  --teal-950: #053647;
  --orange: #f8971d;
  --orange-50: #fff8eb;
  --orange-100: #fdeac8;
  --orange-200: #fcd28b;
  --orange-300: #fab64f;
  --orange-400: var(--orange);
  --orange-500: #f2780e;
  --orange-600: #d65509;
  --orange-700: #b2380b;
  --orange-800: #902b10;
  --orange-900: #772410;
  --orange-950: #441004;
  --black: #000000;
  --white: #ffffff;
  --gray: #f1f1f1;
  --gray-50: #f8f8f8;
  --gray-100: var(--gray);
  --gray-200: #dcdcdc;
  --gray-300: #bdbdbd;
  --gray-400: #989898;
  --gray-500: #7c7c7c;
  --gray-600: #656565;
  --gray-700: #525252;
  --gray-800: #464646;
  --gray-900: #3d3d3d;
  --gray-950: var(--black);
  --blue: #489dfb;
  --blue-50: #eff8ff;
  --blue-100: #daeeff;
  --blue-200: #bde1ff;
  --blue-300: #90d0ff;
  --blue-400: #5cb4fe;
  --blue-500: var(--blue);
  --blue-600: #2075f0;
  --blue-700: #185fdd;
  --blue-800: #1a4db3;
  --blue-900: #1b448d;
  --blue-950: #152a56;
  --red: #ff6552;
  --red-50: #fff3f1;
  --red-100: #ffe4e1;
  --red-200: #ffcdc7;
  --red-300: #ffaaa0;
  --red-400: var(--red);
  --red-500: #f8503b;
  --red-600: #e5331d;
  --red-700: #c12714;
  --red-800: #a02314;
  --red-900: #842418;
  --red-950: #480e07;
  --purple: #9188eb;
  --purple-50: #f4f4fe;
  --purple-100: #ebebfc;
  --purple-200: #dbdafa;
  --purple-300: #c0bdf5;
  --purple-400: var(--purple);
  --purple-500: #7f6de5;
  --purple-600: #6b4ed9;
  --purple-700: #5b3cc5;
  --purple-800: #4c32a5;
  --purple-900: #402a88;
  --purple-950: #271a5b;
  --green: #addfb3;
  --green-50: #f3faf3;
  --green-100: #e3f5e5;
  --green-200: #c8eacc;
  --green-300: var(--green);
  --green-400: #6abe75;
  --green-500: #45a251;
  --green-600: #34853e;
  --green-700: #2c6934;
  --green-800: #27542d;
  --green-900: #214627;
  --green-950: #103215;
  --wwbc-black: #272727;
  --wwbc-orange: #f8971d;
  --wwbc-teal: #00a0af;
  --wwbc-green: var(--wwbc-teal);
  --wwbc-gray: #a2a69d;
  --wwbc-teal-a11y: #00838F;
  --black: var(--wwbc-black);
  --blackish: var(--wwbc-black);
  --blue: #477DCA;
  --darkest-gray: #101010;
  --light-gray: #DDD;
  --medium-gray: #999;
  --dark-gray: #555;
  --light-red: #FBE3E4;
  --light-yellow: #FFF6BF;
  --light-green: #E6EFC2;
  --light-orange: #feead2;
  --campus-yellow: var(--wwbc-orange);
  --tan: #DCD9CB;
  --tan-dark: #C8C3AD;
  --whitish: #fbfaf7;
  --orange-dark: #CE872D;
  /* 4.0 z-index ---------------- */
  --below: -1;
  --base: 0;
  --above: 1;
  --z-nav: calc(var(--above) + var(--base));
  --z-modal: calc(var(--above) + var(--z-navigation));
  /* 5.0 Transitions ---------------- */
  --transition-timing: 0.3s ease-in-out;
  /* 10.0 Misc helpers ---------------- */
  --border-radius: 4px;
  --box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.15);
}

/* =========================================================
	MIXINS
   - Breakpoints
   - Transition
	- Full width
	- Fit image into parent
========================================================= */
/* Breakpoints ---------------- */
/* Breakpoint mixin ----------------
	Usage: @include bp($sm-up); OR @include bp(400px);
*/
/* Transition ----------------
	Usage: @include transition([property],[duration],[easing]);
*/
/* Full width ----------------
	This will break an image or a div out of its
	parent container
*/
/* Fit image into parent ---------------- */
/* =========================================================
   DEFAULT STYLES FOR HTML ELEMENTS

	- Body
	- Main
	- Headings
	- Links
	- Lists
	- Form bits
	- Aside
	- <hr>
	- Blockquotes
========================================================= */
/* Body ---------------- */
body {
  background-color: var(--gray-50);
  font-family: var(--font-body);
  font-size: var(--fs-0);
  line-height: 1.5;
  display: flex;
  flex-direction: column;
}

/* Main ---------------- */
body > main.main-container {
  background-color: var(--gray-50);
  flex: 1 0 auto;
}
@media (width < 860px) {
  body > main.main-container {
    width: 100vw;
  }
}

/* Headings ---------------- */
h1, h2, h3, h4, h5, h6 {
  color: var(--gray-950);
  font-family: var(--font-slab);
  font-weight: 300;
}

h1 {
  font-size: var(--fs-5);
  color: var(--blue-700);
}

h2 {
  font-size: 2rem;
}

h3 {
  font-size: var(--fs-3);
}

h4 {
  font-size: var(--fs-2);
}

h5 {
  font-size: var(--fs-1);
}

h6 {
  font-weight: 700;
}

/* Links ---------------- */
:is(p, ul, ol, figcaption) a,
:not(:is(h1, h2, h3, h4)) a {
  color: var(--blue-700);
  border-bottom: 1px solid var(--blue-600);
  text-decoration: none;
  transition: all var(--transition-timing);
}
:is(p, ul, ol, figcaption) a:focus, :is(p, ul, ol, figcaption) a:focus-visible,
:not(:is(h1, h2, h3, h4)) a:focus,
:not(:is(h1, h2, h3, h4)) a:focus-visible {
  color: var(--blue-700);
  outline: auto;
}
:is(p, ul, ol, figcaption) a:hover,
:not(:is(h1, h2, h3, h4)) a:hover {
  color: var(--red-700);
  border-color: var(--red-700);
}

:is(h1, h2, h3, h4) a {
  border: 0;
}

.skip-content {
  color: black;
  border: 1px solid black;
  font-weight: 700;
}
.skip-content:focus, .skip-content:focus-visible {
  color: black;
}

.t-register .content a {
  border-bottom: 1px solid var(--blue-700);
  color: var(--blue-700);
  text-decoration: none;
  transition: all 0.25s ease-in-out;
}
.t-register .content a:hover {
  border-bottom-color: transparent;
}

/* Lists ---------------- */
dl dt {
  font-weight: 700;
}
dl dd + dt {
  -webkit-margin-before: 0.75rem;
          margin-block-start: 0.75rem;
}

/* Form bits ---------------- */
@media only screen and (min-width: 900px) {
  form.half {
    max-width: 50%;
  }
}
form > * + * {
  -webkit-margin-before: 1.25rem;
          margin-block-start: 1.25rem;
}

label {
  color: var(--dark-gray);
  display: block;
  width: 100%;
  max-width: 100%;
}
label > span:first-child {
  display: block;
  font-weight: 700;
  -webkit-margin-after: 0.25rem;
          margin-block-end: 0.25rem;
}
label > span:first-child em {
  font-size: var(--fs--1);
  font-style: normal;
  font-weight: 400;
}

input:not([type=radio], [type=checkbox]),
textarea,
select {
  background-color: white;
  border: 1px solid var(--tan);
  border-radius: var(--border-radius);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.06);
  width: 100%;
  padding: 0.5rem;
  transition: border-color 0.25s ease-in-out;
}
input:not([type=radio], [type=checkbox]):hover,
textarea:hover,
select:hover {
  border-color: var(--tan-dark);
}

.checkbox-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  row-gap: 1rem;
}

.checkbox-field > label {
  display: flex;
  gap: 0.25rem;
  align-items: baseline;
}

/* Aside ---------------- */
aside {
  --aside-padding: 1rem;
  background-color: white;
  border-radius: var(--border-radius);
  border-top: 4px solid var(--blue-500);
  margin-block: 0;
  padding: var(--aside-padding);
}

/* <hr> ---------------- */
hr {
  border: none;
  -webkit-border-before: 1px solid var(--gray-200);
          border-block-start: 1px solid var(--gray-200);
}

/* Blockquotes ---------------- */
blockquote {
  color: var(--gray-600);
  -webkit-padding-start: 1.5rem;
          padding-inline-start: 1.5rem;
  -webkit-padding-end: 2rem;
          padding-inline-end: 2rem;
  padding-block: 1.25rem;
  font-weight: 300;
}

/* =========================================================
	CONTAINER UTILITY
========================================================= */
.main-container {
  width: clamp(20rem, 100vw - 2rem, 80.5rem);
  margin-inline: auto;
}

.container {
  width: clamp(20rem, 100% - 6rem, 80.5rem);
  margin-inline: auto;
}
.container#start-of-content {
  padding-block: 3rem;
  width: 100%;
}
@media (width < 860px) {
  .container#start-of-content {
    padding-inline: 1rem;
  }
}
.container.narrow {
  width: clamp(20rem, 100% - 6rem, 70rem);
}
.container.narrower {
  width: clamp(20rem, 100% - 6rem, 64rem);
}
.container.narrowest {
  width: clamp(20rem, 100% - 6rem, 58rem);
}

/* =========================================================
	HELPER UTILITY CLASSES

	- Video embed
	- Screen reader only (visually hidden)
	- Fonts & font weights
	- Font colors
	- Font sizes
	- Text alignment
	- Prose
	- Print only
========================================================= */
/* Video embed ---------------- */
.video-embed > iframe {
  aspect-ratio: 16/9;
  height: 100%;
  width: 100%;
}

/* Screen reader only (visually hidden) ---------------- */
.sr-only {
  border: 0;
  clip: rect(0, 0, 0, 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}
.sr-only:focus-visible {
  position: static;
  width: auto;
  height: auto;
  padding: 0;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
}

/* Fonts & font weights ---------------- */
.slab {
  font-family: var(--font-slab);
}

.light {
  font-weight: 300;
}

.normal {
  font-weight: 400;
}

.bold {
  font-weight: 700;
}

/* Font colors ---------------- */
.color-blue-700 {
  color: var(--blue-700);
}

.color-white {
  color: white;
}

/* Font sizes ---------------- */
.fs-1 {
  font-size: var(--fs-1);
}

.fs-2 {
  font-size: var(--fs-2);
}

.fs-3 {
  font-size: var(--fs-3);
}

p.small {
  font-size: var(--fs--2);
}

/* Text alignment ---------------- */
.text-center {
  text-align: center;
}

/* Prose ---------------- */
.prose > * + *,
.prose ul > * + *,
.prose ol > * + * {
  -webkit-margin-before: var(--flow-space, 1rem);
          margin-block-start: var(--flow-space, 1rem);
}

/* Print only ---------------- */
.print-only {
  display: none;
}

/* =========================================================
	FLOW UTILITY
	The flow utility provides flow and rhythm between
	direct sibling elements.
	Reference:
	- https://piccalil.li/quick-tip/flow-utility/
	- https://andy-bell.co.uk/my-favourite-3-lines-of-css/
========================================================= */
.flow > * + * {
  -webkit-margin-before: var(--flow-space, 1rem);
          margin-block-start: var(--flow-space, 1rem);
}

/* =========================================================
	GRID
	https://every-layout.dev/layouts/grid/

	1.0 Base grid - use whenever possible
	2.0 Home page theme grid
	10.0 Literature grid
========================================================= */
/* 1.0 Base grid - use whenever possible ---------------- */
.grid {
  display: grid;
  gap: var(--grid-gap, 1rem);
  grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
}

/* 2.0 Home page theme grid ---------------- */
@media (width < 600px) {
  .t-homepage .grid {
    grid-template-columns: 1fr;
  }
}
@media (width >= 600px) {
  .t-homepage .grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* 10.0 Literature grid ---------------- */
.literature-grid {
  display: grid;
  grid-gap: var(--grid-gap, 1rem);
}
@media (min-width: 640px) {
  .literature-grid {
    grid-template-columns: repeat(auto-fit, 280px);
  }
}

/* =========================================================
	SIDEBAR
	Breakpoint for sidebar layout: >= 780px

	- Default sidebar layout (sidebar on left)
	- Reversed (sidebar on right)
	- Reversed 60-40
========================================================= */
/* Default sidebar layout (sidebar on left) ---------------- */
.sidebar-layout {
  --sidebar-width: 275px;
  --gutter: 2rem;
  container: sidebarLayout/inline-size;
  display: grid;
  gap: var(--gutter);
}
@media (width >= 780px) {
  .sidebar-layout {
    grid-template-columns: var(--sidebar-width) auto;
  }
}

/* Reversed (sidebar on right) ---------------- */
.sidebar-layout[data-layout=reversed] > aside {
  order: 2;
}
.sidebar-layout[data-layout=reversed] > :last-child {
  order: 1;
}
@media (width >= 780px) {
  .sidebar-layout[data-layout=reversed] {
    grid-template-columns: auto var(--sidebar-width);
  }
}

/* Reversed 60-40 ---------------- */
.sidebar-layout[data-layout=reversed-60-40] > aside {
  order: 2;
}
.sidebar-layout[data-layout=reversed-60-40] > :last-child {
  order: 1;
}
@media (width >= 780px) {
  .sidebar-layout[data-layout=reversed-60-40] {
    --sidebar-width: 300px;
    grid-template-columns: auto var(--sidebar-width);
  }
  .sidebar-layout[data-layout=reversed-60-40] > aside {
    order: 2;
  }
  .sidebar-layout[data-layout=reversed-60-40] > :last-child {
    order: 1;
  }
}
@media (width >= 960px) {
  .sidebar-layout[data-layout=reversed-60-40] {
    --sidebar-width: 375px;
  }
}
@media (width >= 1140px) {
  .sidebar-layout[data-layout=reversed-60-40] {
    --sidebar-width: 515px;
  }
}

/* =========================================================
	ASIDE
	Styles here override the default decor.
	See _defaults.scss for default styles.

	1.0 Sidebar aside no decor
========================================================= */
/* 1.0 Sidebar aside no decor ---------------- */
.sidebar-layout > aside.no-decor {
  background-color: unset;
  border-radius: unset;
  border: unset;
  margin-block: 0;
  padding: unset;
}

.t-units .sidebar-layout > aside.no-decor {
  container: asideColumn/inline-size;
}
.t-units .sidebar-layout > aside.no-decor > h2 {
  font-weight: 700;
  text-align: right;
}
.t-units .sidebar-layout > aside.no-decor .themes {
  background-color: white;
  border-radius: var(--border-radius);
  border-top: 4px solid var(--blue-500);
  padding: var(--aside-padding);
}
.t-units .sidebar-layout > aside.no-decor .theme-article {
  padding: 0;
}
.t-units .sidebar-layout > aside.no-decor .theme-article + .theme-article {
  -webkit-margin-before: 3rem;
          margin-block-start: 3rem;
}
.t-units .sidebar-layout > aside.no-decor .theme-article h3 {
  font-weight: 700;
}
.t-units .sidebar-layout > aside.no-decor .theme-article > div {
  display: grid;
  gap: 1.25rem;
}
@container asideColumn (width >= 420px) {
  .t-units .sidebar-layout > aside.no-decor .theme-article > div {
    grid-template-columns: 40% auto;
  }
}
.t-units .sidebar-layout > aside.no-decor .theme-article figure {
  width: 100%;
  height: 250px;
}
.t-units .sidebar-layout > aside.no-decor .theme-article figure img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: var(--border-radius);
}
.t-units .sidebar-layout > aside.no-decor .theme-article ul {
  display: grid;
  gap: 0.5rem;
}
.t-units .sidebar-layout > aside.no-decor .theme-article ul li {
  list-style-type: unset;
  margin-left: 0;
  margin-bottom: 0;
  line-height: unset;
}
.t-units .sidebar-layout > aside.no-decor .theme-article ul li a {
  border: 0;
  font-weight: 700;
}

/* =========================================================
	BLOG POSTS
========================================================= */
.blog-post h2 a {
  color: var(--blue-700);
}
.blog-post h2 a:hover {
  color: var(--red-700);
}

/* =========================================================
	BUTTONS

	1.0 Primary button
	10.0 Button group/set
========================================================= */
/* 1.0 Primary button ---------------- */
button,
.button,
#mc-embedded-subscribe.button {
  --btn-border: 1px solid var(--blue-700);
  --btn-radius: var(--border-radius);
  --btn-font-size: var(--fs-0);
  --btn-padding: 0.75rem 1rem;
  background-color: var(--blue-50);
  border: var(--btn-border);
  border-radius: var(--btn-radius);
  color: var(--blue-700);
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--btn-font-size);
  margin: 0;
  padding: var(--btn-padding);
  transition: all var(--transition-timing);
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}
button:hover,
.button:hover,
#mc-embedded-subscribe.button:hover {
  background-color: var(--blue-700);
  border-color: var(--blue-700);
  color: white;
  cursor: pointer;
}

button.small,
.button.small {
  --btn-padding: 0.5rem 0.75rem;
  --btn-font-size: var(--fs--1);
}

button.smaller,
.button.smaller {
  --btn-padding: 0.25rem 0.5rem;
  --btn-font-size: var(--fs--2);
}

/* 10.0 Button group/set ---------------- */
.button-set {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* =========================================================
	BREADCRUMB
========================================================= */
.breadcrumb {
  background-color: var(--red);
  padding-block: 1rem;
}
.breadcrumb .container {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: flex-end;
}
@media (width >= 900px) {
  .breadcrumb .container {
    flex-wrap: nowrap;
  }
}
.breadcrumb .container ul {
  display: flex;
  gap: 0.5rem;
}
.breadcrumb .container ul li img {
  max-height: 40px;
}

/* =========================================================
	CALLOUTS

	1.0 Author callout
	2.0 Instructions callout
========================================================= */
/* 1.0 Author callout ---------------- */
.author-callout {
  container: authorCallout/inline-size;
}
.author-callout > div {
  display: grid;
  gap: 1rem;
}
@container authorCallout (width >= 450px) {
  .author-callout > div {
    grid-template-columns: 175px auto;
  }
}

/* 2.0 Instructions callout ---------------- */
.instructions-callout {
  background-color: var(--blue-100);
  border-radius: var(--border-radius);
  color: var(--gray-950);
  font-size: var(--fs--1);
  padding: var(--aside-padding);
}

/* =========================================================
	CARDS

	1.0 Literature card
	2.0 Feature card
========================================================= */
/* 1.0 Literature card ---------------- */
.literature-card {
  --card-padding: 1rem;
  background-color: white;
  padding: 0 0 1rem;
  border: 1px solid var(--gray-200);
}
.literature-card a {
  border: 0;
  display: block;
}
.literature-card__theme-kicker, .literature-card__content,
.literature-card h2, .literature-card__byline,
.literature-card footer {
  padding-inline: var(--card-padding);
}
.literature-card header {
  color: var(--wwbc-black);
}
.literature-card__genre-kicker {
  text-align: center;
  font-weight: 400;
  font-size: 1rem;
  background-color: #555;
  color: white;
  padding: 0.375rem 0.25rem;
}
.literature-card__theme-kicker {
  color: var(--blue-900);
  font-size: 0.8125rem;
  line-height: 1;
  font-weight: 400;
}
.literature-card h2 {
  color: var(--blue-700);
  font-family: var(--font-slab);
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.2;
}
.literature-card__byline {
  font-size: 0.8125rem;
  color: var(--wwbc-black);
  line-height: 1.5;
}
.literature-card__content {
  color: var(--gray-600);
  font-family: var(--font-slab);
  font-size: 1rem;
  line-height: 1.375;
}
.literature-card footer {
  font-size: 0.75rem;
  color: var(--wwbc-black);
}
.literature-card a:hover h2 {
  color: var(--blue-700);
}

/* 2.0 Feature card ---------------- */
.feature-card > * + * {
  --flow-space: 1.25rem;
}
.feature-card h2 {
  font-size: var(--fs-2);
}
.feature-card h2 a > em {
  -webkit-padding-start: 0.25rem;
          padding-inline-start: 0.25rem;
}
.feature-card h3 {
  font-size: var(--fs-2);
}

/* =========================================================
	CONTENT/PAGE LAYOUTS
========================================================= */
/* MARK: Home page
----------------------------------------------- */
.t-homepage .content-layout {
  display: grid;
  row-gap: 3rem;
}
@media (width >= 900px) {
  .t-homepage .content-layout {
    grid-template-columns: 66% auto;
    -moz-column-gap: 2rem;
         column-gap: 2rem;
  }
}
@media (width >= 1200px) {
  .t-homepage .content-layout {
    -moz-column-gap: 3rem;
         column-gap: 3rem;
  }
}
@media (width >= 900px) {
  .t-homepage .content-layout > div:last-child {
    --flow-space: 3.5rem;
  }
}

/* MARK: About, Educators, Blog, Contact pages
----------------------------------------------- */
.t-about #start-of-content .sidebar-layout,
.t-forEducators #start-of-content .sidebar-layout,
.t-blogIndex #start-of-content .sidebar-layout,
.t-blog-post #start-of-content .sidebar-layout,
.t-blog-search-results #start-of-content .sidebar-layout,
.t-contact #start-of-content .sidebar-layout,
.t-subscribe #start-of-content .t-extras #start-of-content .sidebar-layout {
  align-items: flex-start;
}
.t-about #start-of-content .sidebar-layout > aside a,
.t-forEducators #start-of-content .sidebar-layout > aside a,
.t-blogIndex #start-of-content .sidebar-layout > aside a,
.t-blog-post #start-of-content .sidebar-layout > aside a,
.t-blog-search-results #start-of-content .sidebar-layout > aside a,
.t-contact #start-of-content .sidebar-layout > aside a,
.t-subscribe #start-of-content .t-extras #start-of-content .sidebar-layout > aside a {
  border: 0;
}
.t-about #start-of-content .sidebar-layout > .main-column,
.t-about #start-of-content .sidebar-layout > :last-child,
.t-forEducators #start-of-content .sidebar-layout > .main-column,
.t-forEducators #start-of-content .sidebar-layout > :last-child,
.t-blogIndex #start-of-content .sidebar-layout > .main-column,
.t-blogIndex #start-of-content .sidebar-layout > :last-child,
.t-blog-post #start-of-content .sidebar-layout > .main-column,
.t-blog-post #start-of-content .sidebar-layout > :last-child,
.t-blog-search-results #start-of-content .sidebar-layout > .main-column,
.t-blog-search-results #start-of-content .sidebar-layout > :last-child,
.t-contact #start-of-content .sidebar-layout > .main-column,
.t-contact #start-of-content .sidebar-layout > :last-child,
.t-subscribe #start-of-content .t-extras #start-of-content .sidebar-layout > .main-column,
.t-subscribe #start-of-content .t-extras #start-of-content .sidebar-layout > :last-child {
  --flow-space: 2rem;
}
.t-about #start-of-content .sidebar-layout > .main-column article,
.t-about #start-of-content .sidebar-layout > :last-child article,
.t-forEducators #start-of-content .sidebar-layout > .main-column article,
.t-forEducators #start-of-content .sidebar-layout > :last-child article,
.t-blogIndex #start-of-content .sidebar-layout > .main-column article,
.t-blogIndex #start-of-content .sidebar-layout > :last-child article,
.t-blog-post #start-of-content .sidebar-layout > .main-column article,
.t-blog-post #start-of-content .sidebar-layout > :last-child article,
.t-blog-search-results #start-of-content .sidebar-layout > .main-column article,
.t-blog-search-results #start-of-content .sidebar-layout > :last-child article,
.t-contact #start-of-content .sidebar-layout > .main-column article,
.t-contact #start-of-content .sidebar-layout > :last-child article,
.t-subscribe #start-of-content .t-extras #start-of-content .sidebar-layout > .main-column article,
.t-subscribe #start-of-content .t-extras #start-of-content .sidebar-layout > :last-child article {
  box-shadow: var(--box-shadow);
  border-radius: var(--border-radius);
  background-color: white;
  padding: 2rem;
}
.t-about #start-of-content .sidebar-layout > .main-column article > * + *,
.t-about #start-of-content .sidebar-layout > :last-child article > * + *,
.t-forEducators #start-of-content .sidebar-layout > .main-column article > * + *,
.t-forEducators #start-of-content .sidebar-layout > :last-child article > * + *,
.t-blogIndex #start-of-content .sidebar-layout > .main-column article > * + *,
.t-blogIndex #start-of-content .sidebar-layout > :last-child article > * + *,
.t-blog-post #start-of-content .sidebar-layout > .main-column article > * + *,
.t-blog-post #start-of-content .sidebar-layout > :last-child article > * + *,
.t-blog-search-results #start-of-content .sidebar-layout > .main-column article > * + *,
.t-blog-search-results #start-of-content .sidebar-layout > :last-child article > * + *,
.t-contact #start-of-content .sidebar-layout > .main-column article > * + *,
.t-contact #start-of-content .sidebar-layout > :last-child article > * + *,
.t-subscribe #start-of-content .t-extras #start-of-content .sidebar-layout > .main-column article > * + *,
.t-subscribe #start-of-content .t-extras #start-of-content .sidebar-layout > :last-child article > * + * {
  --flow-space: 1rem;
}

.t-blogIndex #start-of-content .sidebar-layout > :last-child article > *,
.t-blog-post #start-of-content .sidebar-layout > :last-child article > * {
  max-width: 640px;
}

.t-blogIndex #start-of-content .sidebar-layout > :last-child article > hr,
.t-blog-post #start-of-content .sidebar-layout > :last-child article > hr {
  -webkit-margin-start: 0;
          margin-inline-start: 0;
}

.t-about article > h2,
.t-forEducators article > h2 {
  color: var(--blue-700);
}

.t-blog-search-results article > h2 {
  font-size: var(--fs-3);
}

/* MARK: Find page
----------------------------------------------- */
.t-find .sidebar-layout[data-layout=reversed] > .sidebar {
  background-color: white;
}
.t-find .sidebar-layout[data-layout=reversed] > .sidebar .results-box {
  margin-bottom: 2rem;
}
.t-find .sidebar-layout[data-layout=reversed] > .sidebar .results-box p {
  font-size: 0.875rem;
}
.t-find .sidebar-layout[data-layout=reversed] > .sidebar .keyword-search {
  display: inline-block;
  padding: 0.4em 0.5em;
  width: 42%;
  font-size: 1.1em;
}
.t-find .sidebar-layout[data-layout=reversed] > .sidebar ul[role=list] {
  margin-left: 2rem;
  line-height: 1.2;
  list-style-type: disc;
}
.t-find .sidebar-layout[data-layout=reversed] > .sidebar ul[role=list] li {
  margin-bottom: 0.5rem;
}
.t-find .sidebar-layout[data-layout=reversed] > :last-child {
  margin-bottom: 4em;
  border-top: 4px solid var(--red-600);
  border-radius: 4px;
  padding: 1.5rem;
  padding-inline: 0;
  font-size: 0.875rem;
}
@media (width >= 1024px) {
  .t-find .sidebar-layout[data-layout=reversed] > :last-child {
    padding-inline: 1.5rem;
  }
}
.t-find .sidebar-layout[data-layout=reversed] > :last-child input[type=submit],
.t-find .sidebar-layout[data-layout=reversed] > :last-child input[type=search] {
  font-size: 0.875rem;
}
.t-find .filter-group > * + * {
  -webkit-margin-before: 0.5rem;
          margin-block-start: 0.5rem;
}

/* MARK: Contact, Subscribe pages
----------------------------------------------- */
.t-contact .sidebar-layout > :last-child,
.t-subscribe .sidebar-layout > :last-child {
  padding-block: 0;
}

/* MARK: Search pages
----------------------------------------------- */
.t-search .search-results-info {
  -webkit-margin-before: 2rem;
          margin-block-start: 2rem;
}
@media (width >= 640px) {
  .t-search .search-results-info {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 2rem;
  }
}
@media (width >= 768px) {
  .t-search .search-results-info form#search {
    flex-basis: 65%;
  }
  .t-search .search-results-info form#search input {
    width: 100%;
  }
}
.t-search .search-results-info > * + * {
  -webkit-margin-before: 1rem;
          margin-block-start: 1rem;
}
.t-search ul.search-results {
  -webkit-margin-before: 3rem;
          margin-block-start: 3rem;
  border-top: 1px solid var(--gray-300);
  -webkit-padding-before: 3rem;
          padding-block-start: 3rem;
}

/* MARK: Literature entry page
----------------------------------------------- */
.t-literature .sidebar-layout > article {
  padding: 0;
}
@media (width >= 780px) {
  .t-literature .sidebar-layout > article header p {
    display: none;
  }
}
.t-literature .sidebar-layout > aside {
  border: 0;
  background-color: transparent;
  padding: 0;
}
.t-literature .sidebar-layout > aside ul.literature-tabs {
  display: flex;
  position: relative;
  flex-wrap: wrap;
  gap: 0.25rem;
  z-index: var(--z-above);
  margin: 0;
  padding: 0;
  font-size: calc(var(--fs--1) - 0.4px);
  list-style: none;
}
.t-literature .sidebar-layout > aside ul.literature-tabs li {
  border: 1px solid var(--gray-100);
  border-bottom-color: var(--gray-200);
  border-radius: 3px 3px 0 0;
  background-color: white;
  font-weight: 700;
}
.t-literature .sidebar-layout > aside ul.literature-tabs li a {
  color: var(--gray-950);
}
.t-literature .sidebar-layout > aside ul.literature-tabs li.uk-active {
  border-color: var(--gray-200);
  border-bottom-color: white;
}
.t-literature .sidebar-layout > aside ul.literature-tabs li.uk-active a {
  color: var(--blue-700);
}
.t-literature .sidebar-layout > aside ul.literature-tabs a {
  display: block;
  outline: none;
  border: 0;
  padding: 5px 6.8px;
}
.t-literature .sidebar-layout > aside ul.literature-tabs a:focus, .t-literature .sidebar-layout > aside ul.literature-tabs a:hover {
  color: var(--blue-700);
}
.t-literature .sidebar-layout > aside .literature-tabs-content {
  -webkit-margin-before: -1px;
          margin-block-start: -1px;
  border: 1px solid var(--gray-100);
  background-color: white;
  padding: 1.5rem;
}
.t-literature .sidebar-layout > aside .literature-tabs-content:has(div.uk-active) {
  border-color: var(--gray-200);
}
.t-literature .sidebar-layout > aside .literature-tabs-content :is(p, ul, li, dt, blockquote, table) {
  font-size: 13.6px;
}
.t-literature .sidebar-layout > aside .literature-tabs-content h2 {
  font-size: 30.6px;
}
.t-literature .sidebar-layout > aside .literature-tabs-content h5 {
  font-weight: 700;
  font-size: 17px;
}
.t-literature .sidebar-layout > aside .literature-tabs-content ul:not(.content-preview), .t-literature .sidebar-layout > aside .literature-tabs-content ol {
  -webkit-margin-start: 20.4px;
          margin-inline-start: 20.4px;
  -webkit-margin-after: 13.6px;
          margin-block-end: 13.6px;
  padding-left: 0;
}
.t-literature .sidebar-layout > aside .literature-tabs-content ul:not(.content-preview) li, .t-literature .sidebar-layout > aside .literature-tabs-content ol li {
  -webkit-margin-start: 13.6px;
          margin-inline-start: 13.6px;
  line-height: 1.7;
}
.t-literature .sidebar-layout > aside .literature-tabs-content ul:not(.content-preview) {
  list-style-type: circle;
}
.t-literature .sidebar-layout > aside .literature-tabs-content ol {
  list-style-type: decimal;
}
.t-literature .sidebar-layout > aside .literature-tabs-content ul.content-preview li:first-child {
  font-weight: 700;
}
.t-literature .sidebar-layout > aside .literature-tabs-content ul.content-preview li:not(:first-child) {
  -webkit-padding-start: 1.25rem;
          padding-inline-start: 1.25rem;
}
.t-literature .sidebar-layout > aside .literature-tabs-content img.author-image,
.t-literature .sidebar-layout > aside .literature-tabs-content img.translator-image {
  float: inline-start;
  -webkit-margin-end: 12px;
          margin-inline-end: 12px;
  max-width: 100%;
}
.t-literature .sidebar-layout > aside .literature-tabs-content .section-title {
  font-weight: 700;
  font-size: 20.4px;
}
.t-literature .sidebar-layout > aside .button-set {
  justify-content: flex-end;
  -webkit-margin-before: 0.5rem;
          margin-block-start: 0.5rem;
}
.t-literature .sidebar-layout > aside .literature-tabs-content #custom-pager {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.cycle-slideshow {
  max-height: 1400px;
}

/* MARK: Unit pages
----------------------------------------------- */
.t-units .sidebar-layout {
  --sidebar-width: 420px;
}

/* =========================================================
	IMAGES

	- Image box component
	- Figcaptions
========================================================= */
/* Image box component ---------------- */
.image-box {
  background-color: #000;
  position: relative;
  margin: 0 2em 1em 0;
  height: 250px;
  width: 100%;
  background-size: cover;
  border-radius: 4px;
  background-position: center top;
  background-size: cover;
  background-repeat: no-repeat;
  border: 0;
}
.image-box-heading {
  border-radius: 0 0 4px 4px;
  width: 100%;
  position: absolute;
  bottom: 0;
  inset-inline: 0;
  padding: 0.5em;
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  text-align: center;
  font-size: var(--fs-2);
  line-height: 1.3;
}
.image-box-heading small {
  display: block;
  font-size: var(--fs-0);
}

/* Figcaptions ---------------- */
figure > figcaption {
  font-size: var(--fs--2);
  font-style: italic;
  -webkit-margin-before: 0.25rem;
          margin-block-start: 0.25rem;
}

/* =========================================================
	SITE FOOTER
========================================================= */
.site-footer {
  background-color: var(--red);
  color: var(--red-950);
  padding: 2rem 1rem;
  display: grid;
  row-gap: 2rem;
}
@media (width >= 860px) {
  .site-footer {
    display: flex;
    -moz-column-gap: 6rem;
         column-gap: 6rem;
    justify-content: space-between;
    padding-block: 1.5rem;
  }
}
.site-footer a {
  border: 0;
  color: inherit;
  border-bottom: 1px solid transparent;
}
.site-footer a:hover {
  color: black;
  border-bottom: 1px solid black;
}
.site-footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  row-gap: 1rem;
}
.site-footer ul li {
  line-height: 1;
}
.site-footer ul:first-child {
  font-weight: 700;
  font-size: var(--fs-0);
}
@media (width >= 550px) {
  .site-footer ul:first-child {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
    justify-content: center;
  }
}
@media (width >= 860px) {
  .site-footer ul:first-child {
    justify-content: flex-start;
  }
}
.site-footer ul:last-child {
  font-size: var(--fs--1);
}
@media (width >= 550px) {
  .site-footer ul:last-child {
    justify-content: center;
    text-align: center;
  }
}
@media (width >= 860px) {
  .site-footer ul:last-child {
    min-width: -webkit-max-content;
    min-width: -moz-max-content;
    min-width: max-content;
    justify-content: flex-end;
    text-align: right;
  }
}
@media (width >= 1140px) {
  .site-footer ul:last-child {
    display: flex;
    gap: 1rem;
  }
}

/* =========================================================
	FORMS
	Specific styles not handled by _defaults.scss

	- Registration form
	- Search forms
	- Find Literature form
	- Normalize overrides
	- Contact form (Formie plugin)
	- Subscribe form (Mailchimp)
========================================================= */
/* Registration form ---------------- */
form#registration {
  --flow-space: 3rem;
}
@media only screen and (min-width: 1200px) {
  form#registration {
    --flow-space: 5rem;
  }
}
form#registration label > span.required em {
  display: none;
}
form#registration label > span.required::before {
  color: red;
  content: "*";
  margin-right: 0.1875rem;
}

/* Search forms ---------------- */
form#search,
form#blog-search {
  display: flex;
  gap: 1rem;
}
@media only screen and (min-width: 900px) {
  form#search,
form#blog-search {
    max-width: 60%;
  }
}
form#search button,
form#blog-search button {
  margin-top: 0;
}

form#search {
  align-items: stretch;
}
form#search input {
  height: 100%;
}

form#blog-search {
  margin-bottom: 2rem;
}
@media only screen and (min-width: 900px) {
  form#blog-search {
    max-width: 100%;
  }
}

/* Find Literature form ---------------- */
label.pseudo-button {
  display: inline-block;
  line-height: 1;
  margin-bottom: 0.5rem;
  font-size: 0.875rem;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}
label.pseudo-button span {
  border: 1px solid #d9d9d9;
  border-radius: 999rem;
  background-color: white;
  background-image: linear-gradient(white, #e9e3e2);
  font-weight: 400;
  color: #747474;
  white-space: nowrap;
  padding: 0.5rem 0.75rem;
  display: block;
}
label.pseudo-button span:hover {
  cursor: pointer;
  background-color: #f4f4f4;
  background-image: linear-gradient(#f4f4f4, #d7d7d7);
}
label.pseudo-button input {
  position: absolute;
  left: -100vw;
}
label.pseudo-button input:checked + span {
  background-color: var(--blue-700);
  border-color: var(--blue-700);
  background-image: none;
  color: white;
}

/* Normalize overrides ---------------- */
input[type=search] {
  box-sizing: border-box;
}

/* Contact form (Formie plugin) ---------------- */
label.fui-label {
  display: flex;
  font-weight: 700;
}

.fui-row + .fui-row,
.fui-btn-wrapper {
  -webkit-margin-before: 1.25rem;
          margin-block-start: 1.25rem;
}

/* Subscribe form (Mailchimp) ---------------- */
#mc_embed_signup {
  background-color: transparent !important;
}

#mc_embed_signup_scroll > * + * {
  -webkit-margin-before: 1.25rem;
          margin-block-start: 1.25rem;
}

.mc-field-group > label {
  display: flex;
  font-weight: 700;
}

.mc-field-group ul {
  display: flex;
  gap: 1.25rem;
  list-style: none;
  margin-inline: 0;
  -webkit-margin-before: 0.25rem;
          margin-block-start: 0.25rem;
}
.mc-field-group ul li {
  list-style: none;
  margin-inline: 0;
  display: flex;
  gap: 0.25rem;
}

/* =========================================================
	HEROES

	- Hero w/slider
	- Hero - static
========================================================= */
/* Hero w/slider ---------------- */
.hero-slider ul {
  aspect-ratio: 4/1;
  max-width: 100%;
}
.hero-slider ul li {
  position: relative;
}
.hero-slider ul li figcaption {
  background-color: rgba(0, 0, 0, 0.7);
  border-radius: var(--border-radius);
  color: white;
  font-size: var(--fs-1);
  font-style: normal;
  padding: 0.5rem 1rem;
  position: absolute;
  right: 1rem;
  top: 1rem;
  z-index: var(--z-above);
  transition: all 0.25s ease-in-out;
}
.hero-slider ul li figcaption:hover {
  color: var(--wwbc-orange);
}

/* Hero - static ---------------- */
.hero-image {
  aspect-ratio: 4/1;
  position: relative;
}
.hero-image img {
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  width: 100%;
}
.hero-image figcaption {
  background-color: rgba(0, 0, 0, 0.6);
  bottom: 0;
  color: white;
  font-size: var(--fs--2);
  padding: 0.5rem 1rem;
  position: absolute;
  right: 0;
  z-index: var(--z-above);
}
.hero-image figcaption a {
  color: white;
  border-color: white;
}

/* =========================================================
	PAGINATION
========================================================= */
ul.pagination {
  display: flex;
  font-size: 1rem;
  gap: 0.5rem;
  justify-content: center;
}
ul.pagination li {
  padding-inline: 0.5rem;
}
ul.pagination li a {
  border: 0;
  margin: 0 !important;
  padding: 0;
}

/* =========================================================
	QUOTES

	1.0 Presentational quote
========================================================= */
/* 1.0 Presentational quote ---------------- */
blockquote.presentational {
  display: block;
  font-family: var(--font-slab);
  font-size: var(--fs-2);
  text-align: center;
  margin-block: 0;
  margin-inline: auto !important;
  max-width: 710px;
  padding-block: 3rem;
}

/* =========================================================
	SITE HEADER / NAVIGATION

	1.0 Base styles
	2.0 Min/mobile nav
	3.0 Max/desktop nav
========================================================= */
/* 1.0 Base styles ---------------- */
.site-header {
  align-items: center;
  background-color: var(--gray-50);
  display: grid;
  gap: 2rem;
  grid-template-columns: 120px auto;
  padding: 2rem 1rem;
}
@media (width < 860px) {
  .site-header {
    position: relative;
  }
}
@media (width >= 860px) {
  .site-header {
    gap: 4rem;
  }
}
.site-header .logo {
  border: 0;
}
.site-header .logo:hover {
  scale: 1.1;
}
.site-header .logo img {
  max-width: 200px;
}
.site-header button {
  background-color: transparent;
  border: 0;
  color: var(--blue-700);
  font-weight: 700;
  justify-self: end;
  margin: 0 1rem 0 0;
  padding: 0;
  text-transform: uppercase;
  transition: color var(--transition-timing);
}
@media (width >= 860px) {
  .site-header button {
    display: none;
  }
}
.site-header button:hover {
  color: var(--red-700);
}
.site-header nav {
  background-color: inherit;
}
.site-header nav ul {
  color: var(--blue-700);
  font-family: var(--font-slab);
  text-transform: uppercase;
}
.site-header nav ul a {
  border: 0;
  color: inherit;
  text-decoration: none;
  transition: color var(--transition-timing);
}
.site-header nav ul a:hover {
  color: var(--red-700);
}

/* 2.0 Mobile nav ---------------- */
.site-header nav.min {
  border-top: 1px solid var(--blue-500);
  inset-inline: 0 !important;
  padding: 1.5rem 1rem 2rem;
  position: absolute;
  top: 100%;
  width: 100vw;
  max-width: 100% !important;
  z-index: var(--z-nav);
}
@media (width >= 860px) {
  .site-header nav.min {
    display: none;
  }
}
.site-header nav.min ul {
  display: grid;
  font-size: var(--fs-1);
  row-gap: 0.75rem;
  text-align: center;
}

/* 3.0 Max/desktop nav ---------------- */
@media (width < 860px) {
  .site-header nav.max {
    display: none;
  }
}
.site-header nav.max ul {
  display: flex;
  row-gap: 0.25rem;
  -moz-column-gap: 2rem;
       column-gap: 2rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.site-header nav.max ul li:first-child {
  display: none;
}

.navigation-find {
  display: flex;
  flex-wrap: wrap;
  -moz-column-gap: 2rem;
       column-gap: 2rem;
  row-gap: 0.5rem;
  align-items: baseline;
  margin-bottom: 3rem;
}

/* =========================================================
	TOOLTIPS
========================================================= */
.tooltip {
  --flow-space: 0.75rem;
  background-color: white;
  border: 1px solid #ddd;
  padding: 0.75rem;
  box-shadow: 0px 4px 12px -1px rgba(0, 0, 0, 0.38);
}
.tooltip > p {
  margin-bottom: 0;
}

button.tooltip-trigger {
  border-radius: 999px;
  font-size: 0.75rem;
  padding: 0 1px 1px;
  width: 18px;
  height: 18px;
  display: flex;
  justify-content: center;
  align-items: center;
  display: inline-block;
}

.grade-level-heading {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

/* =========================================================
   UNIT PAGE LAYOUT STYLES
========================================================= */
:root {
  --radius: 4px;
}

@media (min-width: 900px) {
  .l-unit {
    display: flex;
    justify-content: space-between;
  }
}

.l-unit article {
  padding: 0;
  margin-bottom: 3rem;
}
@media (min-width: 900px) {
  .l-unit article {
    width: 60%;
    padding-right: 2rem;
  }
}
.l-unit article header {
  margin-bottom: 1.5rem;
}

.l-unit aside {
  background-color: transparent;
  border: 0;
}
@media (min-width: 900px) {
  .l-unit aside {
    width: 40%;
  }
}

.l-unit__search-heading {
  text-align: center;
  margin-bottom: 1rem;
}
@media (min-width: 900px) {
  .l-unit__search-heading {
    text-align: right;
    margin-bottom: 2rem;
  }
}

.l-unit__instructions {
  background-color: var(--light-orange);
  padding: 1.5rem 1.5rem 0.25rem;
  margin-bottom: 3rem;
  border-radius: var(--radius);
  font-size: 0.9rem;
}
@media (min-width: 900px) {
  .l-unit__instructions {
    padding: 1.5rem 2rem 0.25rem;
  }
}

.l-unit__themes {
  background-color: #fff;
  border-top: 4px solid var(--wwbc-orange);
  border-radius: var(--radius);
  padding: 1.5rem;
}

/* =========================================================
	VIDEO EMBED
========================================================= */
figure.media:has(iframe) > iframe,
.video-embed > iframe {
  aspect-ratio: 16/9;
  height: 100%;
  width: 100%;
}

/* =========================================================
	MAIN SASS FILE
	Somewhat based on CUBE CSS - https://cube.fyi

	This is, for now, in addition to the screen.scss/css file
	that was built by the original developer.

	- Global CSS
	- Utilties
	- Components
	- Vendor
========================================================= */
/* Global CSS ---------------- */
/* Utilities ---------------- */
/* Components ---------------- */
/* Vendor ---------------- */
/* ========================================================================
   Component: Drop
 ========================================================================== */
/*
 * 1. Hide by default
 * 2. Set position
 * 3. Set a default width
 */
.uk-drop {
  /* 1 */
  display: none;
  /* 2 */
  position: absolute;
  z-index: 1020;
  --uk-position-offset: 20px;
  --uk-position-viewport-offset: 15px;
  /* 3 */
  box-sizing: border-box;
  width: 300px;
}

/* Show */
.uk-drop.uk-open {
  display: block;
}

/* Grid modifiers
 ========================================================================== */
.uk-drop-stack .uk-drop-grid > * {
  width: 100% !important;
}

/* ========================================================================
   Component: Slideshow
 ========================================================================== */
/*
 * 1. Prevent tab highlighting on iOS.
 */
.uk-slideshow {
  /* 1 */
  -webkit-tap-highlight-color: transparent;
}

/* Items
 ========================================================================== */
/*
 * 1. Create position and stacking context
 * 2. Reset list
 * 3. Clip child elements
 * 4. Prevent displaying the callout information on iOS.
 * 5. Disable horizontal panning gestures
 */
.uk-slideshow-items {
  /* 1 */
  position: relative;
  z-index: 0;
  /* 2 */
  margin: 0;
  padding: 0;
  list-style: none;
  /* 3 */
  overflow: hidden;
  /* 4 */
  -webkit-touch-callout: none;
  /* 5 */
  touch-action: pan-y;
}

/* Item
 ========================================================================== */
/*
 * 1. Position items above each other
 * 2. Take the full width
 * 3. Clip child elements, e.g. for `uk-cover`
 * 4. Optimize animation
 */
.uk-slideshow-items > * {
  /* 1 */
  position: absolute;
  top: 0;
  left: 0;
  /* 2 */
  right: 0;
  bottom: 0;
  /* 3 */
  overflow: hidden;
  /* 4 */
  will-change: transform, opacity;
}

/*
 * Hide not active items
 */
.uk-slideshow-items > :not(.uk-active) {
  display: none;
}

/* ========================================================================
   Component: Switcher
 ========================================================================== */
/*
 * Reset list
 */
.uk-switcher {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Items
 ========================================================================== */
/*
 * Hide not active items
 */
.uk-switcher > :not(.uk-active) {
  display: none;
}

/*
 * Remove margin from the last-child
 */
.uk-switcher > * > :last-child {
  margin-bottom: 0;
}

/*# sourceMappingURL=app.css.map*/