@font-face {
  font-family: "Dunant";
  src: url("../Fonts/dunant/dunant-regular/Dunant-Regular.eot");
  src: url("../Fonts/dunant/dunant-regular/Dunant-Regular.eot?#iefix") format("embedded-opentype"), url("../Fonts/dunant/dunant-regular/Dunant-Regular.woff") format("woff"), url("../Fonts/dunant/dunant-regular/Dunant-Regular.ttf") format("truetype"), url("../Fonts/dunant/dunant-regular/Dunant-Regular.svg") format("svg");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Dunant";
  src: url("../Fonts/dunant/dunant-bold/Dunant-Bold.eot");
  src: url("../Fonts/dunant/dunant-bold/Dunant-Bold.eot?#iefix") format("embedded-opentype"), url("../Fonts/dunant/dunant-bold/Dunant-Bold.woff") format("woff"), url("../Fonts/dunant/dunant-bold/Dunant-Bold.ttf") format("truetype"), url("../Fonts/dunant/dunant-bold/Dunant-Bold.svg") format("svg");
  font-weight: bold;
  font-style: normal;
}
@font-face {
  font-family: "Dunant";
  src: url("../Fonts/dunant/dunant-medium/Dunant-Medium.eot");
  src: url("../Fonts/dunant/dunant-medium/Dunant-Medium.eot?#iefix") format("embedded-opentype"), url("../Fonts/dunant/dunant-medium/Dunant-Medium.woff") format("woff"), url("../Fonts/dunant/dunant-medium/Dunant-Medium.ttf") format("truetype"), url("../Fonts/dunant/dunant-medium/Dunant-Medium.svg") format("svg");
  font-weight: medium;
  font-style: normal;
}
@font-face {
  font-family: "Dunant";
  src: url("../Fonts/dunant/dunant-light/Dunant-Light.eot");
  src: url("../Fonts/dunant/dunant-light/Dunant-Light.eot?#iefix") format("embedded-opentype"), url("../Fonts/dunant/dunant-light/Dunant-Light.woff") format("woff"), url("../Fonts/dunant/dunant-light/Dunant-Light.ttf") format("truetype"), url("../Fonts/dunant/dunant-light/Dunant-Light.svg") format("svg");
  font-weight: light;
  font-style: normal;
}
main {
  padding-top: 1.5rem;
  padding-bottom: 1rem;
}
main.container {
  max-width: 800px;
  padding-left: 20px;
  padding-right: 20px;
}

body {
  font-family: "Dunant", sans-serif;
  font-size: 1.5rem;
  font-weight: normal;
  color: rgba(0, 0, 0, 0.7019607843);
}

@media (min-width: 768px) {
  body {
    font-size: 1.4rem;
  }
}
h1 {
  font-family: "Dunant", sans-serif;
  font-weight: bold;
  text-align: center;
}

h2 {
  color: #000000;
  font-size: 1.75rem;
  font-weight: bold;
  text-align: left;
}

h3 {
  font-family: "Dunant", sans-serif;
  font-weight: bold;
  font-size: 1.5rem;
}
@media (min-width: 768px) {
  h3 {
    font-size: 1.4rem;
  }
}

a {
  color: #ff0000;
}

.pinboard h3, .listen-look h3, .educational-games h3, .english h3, .worksheets h3 {
  font-size: 1.75rem;
  font-weight: bold;
  text-align: left;
}
.pinboard .link-item, .listen-look .link-item, .educational-games .link-item, .english .link-item, .worksheets .link-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: 1.5rem;
  font-weight: bold;
  color: #000000;
  background-color: transparent;
  border: none;
  text-align: left;
  text-decoration: none;
  margin: 0 0 27px 0;
  padding: 0.5rem 1rem;
  cursor: pointer;
  transition: background-color 0.3s ease;
}
.pinboard .link-item .linktext, .listen-look .link-item .linktext, .educational-games .link-item .linktext, .english .link-item .linktext, .worksheets .link-item .linktext {
  padding-left: 10px;
}
.pinboard .link-item img, .listen-look .link-item img, .educational-games .link-item img, .english .link-item img, .worksheets .link-item img {
  margin: 6px 0px 6px 4px;
  height: 52px;
  width: auto;
}
.pinboard .link-item:hover, .pinboard .link-item:focus, .listen-look .link-item:hover, .listen-look .link-item:focus, .educational-games .link-item:hover, .educational-games .link-item:focus, .english .link-item:hover, .english .link-item:focus, .worksheets .link-item:hover, .worksheets .link-item:focus {
  background-color: #f0f0f0;
}

.pinboard h3 {
  color: #079ab7;
}
.pinboard .link-item {
  background-color: #b5e1e9;
}
.pinboard .link-item:hover, .pinboard .link-item:focus {
  background-color: #39aec5;
}

.listen-look h3 {
  color: #e32185;
}
.listen-look .link-item {
  background-color: #f8c7e0;
}
.listen-look .link-item:hover, .listen-look .link-item:focus {
  background-color: #ee7ab6;
}

.educational-games h3 {
  color: #fdc75f;
}
.educational-games .link-item {
  background-color: #fee3af;
}
.educational-games .link-item:hover, .educational-games .link-item:focus {
  background-color: #fdcd6f;
}

.english h3 {
  color: #81c185;
}
.english .link-item {
  background-color: #cde6ce;
}
.english .link-item:hover, .english .link-item:focus {
  background-color: #9acd9d;
}

.worksheets h3 {
  color: #76549e;
}
.worksheets .link-item {
  background-color: #d6cce2;
}
.worksheets .link-item:hover, .worksheets .link-item:focus {
  background-color: #9f87bb;
}

.pinboard h2, .pinboard h3 {
  color: #079ab7;
}
.listen-watch h2, .listen-watch h3 {
  color: #e32185;
}
.learning-games h2, .learning-games h3 {
  color: #fdc75f;
}
.englisch h2, .englisch h3 {
  color: #81c185;
}
.flipbook h2, .flipbook h3 {
  color: #c368a6;
}
.worksheets h2, .worksheets h3 {
  color: #76549e;
}

.article .content {
  font-size: 1.25rem;
}

h2.article-header {
  font-size: 1.5rem;
  font-weight: bold;
  color: #000000;
}
h2.article-header .linkicon {
  display: inline-block;
  width: 50px;
  height: 50px;
  background-size: contain;
  background-repeat: no-repeat;
}

h2.article-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.5rem 1rem;
  margin-bottom: 27px;
}
h2.article-header.pin .linkicon {
  background-image: url("../Images/icons/articleoverview_navigation/pin.svg");
}
h2.article-header.listen .linkicon {
  background-image: url("../Images/icons/articleoverview_navigation/listen.svg");
}
h2.article-header.watch .linkicon {
  background-image: url("../Images/icons/articleoverview_navigation/watch.svg");
}
h2.article-header.flipbook .linkicon {
  background-image: url("../Images/icons/articleoverview_navigation/flipbook.svg");
}
h2.article-header.interactive .linkicon {
  background-image: url("../Images/icons/articleoverview_navigation/interactive.svg");
}
h2.article-header.worksheet .linkicon {
  background-image: url("../Images/icons/articleoverview_navigation/worksheet.svg");
}
h2.article-header.video .linkicon {
  background-image: url("../Images/icons/articleoverview_navigation/video.svg");
}
h2.article-header.write .linkicon {
  background-image: url("../Images/icons/articleoverview_navigation/write.svg");
}
h2.article-header.readingsheet .linkicon {
  background-image: url("../Images/icons/articleoverview_navigation/readingsheet.svg");
}
h2.article-header.dab .linkicon {
  background-image: url("../Images/icons/articleoverview_navigation/dab.svg");
}

.pinboard h2.article-header {
  background-color: #b5e1e9;
}

.listen-watch h2.article-header {
  background-color: #f8c7e0;
}

.flipbook h2.article-header {
  background-color: hsl(319.12, 99.21%, 87.88%);
}

.learning-games h2.article-header {
  background-color: #fee3af;
}

.english h2.article-header {
  background-color: #cde6ce;
}

.worksheets h2.article-header {
  background-color: #d6cce2;
}

:root {
  /* Define layout building blocks */
  --header-height: 80px;
  --nav-padding-y: 40px;
  --grid-gap-y: 20px;
  /* Dynamic row and col definition */
  --grid-rows: 3;
  --grid-cols: 2;
  /* The formula now dynamically calculates the total gap space based on the rows */
  --total-blocked-space: calc(
      var(--header-height) +
      var(--nav-padding-y) +
      (var(--grid-gap-y) * (var(--grid-rows) - 1))
  );
}

@media (min-width: 768px) {
  :root {
    /* Flip the grid layout dimensions */
    --grid-rows: 2;
    --grid-cols: 3;
    /* The --total-blocked-space formula automatically updates its math here! */
  }
}
/* 1. Container setup to center the grid on the screen */
.issue-start-nav {
  display: grid;
  grid-template-columns: repeat(var(--grid-cols), minmax(0, 1fr)); /* 2 equal columns */
  grid-template-rows: repeat(var(--grid-rows), minmax(0, 1fr));
  /* Define the uniform gap for both X and Y */
  gap: var(--grid-gap-y) 20px;
  padding: calc(var(--nav-padding-y) / 2) 20px;
  /* Reset default list styles */
  list-style: none;
  padding: 0;
  margin: 0 auto; /* Centers horizontally if there's max-width */
  /* Force the entire grid container to center perfectly on the page */
  width: -moz-max-content;
  width: max-content;
  height: -moz-min-content;
  height: min-content;
}

/* 2. Grid Item styling for responsive squares */
.issue-start-nav-item {
  height: calc((100dvh - var(--total-blocked-space)) / var(--grid-rows));
}
@supports not (height: 100dvh) {
  .issue-start-nav-item {
    height: calc((100vh - var(--total-blocked-space)) / var(--grid-rows));
  }
}
.issue-start-nav-item {
  /* Ensures the square aspect ratio is strictly maintained */
  aspect-ratio: 1/1;
  /* Minimum size safety net for small screens */
  min-height: 100px;
  /* Cap the size so they don't get awkwardly massive on huge screens */
  max-height: 180px;
  border-radius: 30px;
  border-radius: 7%;
  background-repeat: no-repeat;
  background-position: center 90%;
  background-size: 50% auto;
}
.issue-start-nav-item.pinboard {
  background-color: #079ab7;
  background-image: url("../Images/icons/issue_navigation/icon_pinboard.svg");
  background-size: 40% auto;
  background-position: center 90%;
}
.issue-start-nav-item.listen_look {
  background-color: #e32185;
  background-image: url("../Images/icons/issue_navigation/icon_listen_look.svg");
}
.issue-start-nav-item.educational_games {
  background-color: #fdc75f;
  background-image: url("../Images/icons/issue_navigation/icon_educational_games.svg");
  background-size: 45% auto;
  background-position-x: 55%;
  background-position-y: 80%;
}
.issue-start-nav-item.english {
  background-color: #81c185;
  background-image: url("../Images/icons/issue_navigation/icon_english.svg");
  background-size: 45% auto;
  background-position-y: 80%;
}
.issue-start-nav-item.flipbook {
  background-color: #c368a6;
  background-image: url("../Images/icons/issue_navigation/icon_flipbook.svg");
  background-size: 50% auto;
  background-position-y: 75%;
}
.issue-start-nav-item.worksheets {
  background-color: #76549e;
  background-image: url("../Images/icons/issue_navigation/icon_worksheets.svg");
  background-position-x: 60%;
  background-position-y: 85%;
}

/* 3. Ensure the anchor tags fill the square completely */
.issue-start-nav-item > a {
  display: flex;
  width: 100%;
  height: 100%;
  text-decoration: none;
  /* Example styling: center the content inside the button */
  align-items: center;
  justify-content: center;
  /* Optional visual styling so you can see the squares */
  transition: transform 0.2s ease;
}
.issue-start-nav-item > a .linktext {
  padding: 0 15px 0 15px;
  height: 55%;
  display: flex;
}

/* 4. Ensure images fit nicely inside the squares */
.linktext img {
  max-width: 100%;
  height: auto;
  display: block;
}

.tile-nav-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  margin-bottom: 20px;
}

.tile-nav {
  display: grid;
  gap: 8px;
  /* 1. This centers the grid itself inside the 760px container */
  justify-content: center;
  /* 2. Desktop: 6 columns, each exactly 120px (not stretching) */
  grid-template-columns: repeat(6, 120px);
  padding: 0;
  margin: 0;
  list-style: none;
}

.tile-nav li {
  /* Width is now strictly dictated by the grid columns above */
  width: 100%;
  aspect-ratio: 1/1;
  /* Content Centering inside tiles */
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #3498db;
  color: white;
  font-weight: bold;
  border-radius: 10px;
  background-repeat: no-repeat;
  background-position: center 90%;
  background-size: 40% auto;
  padding-bottom: 1.5rem;
}
.tile-nav li a {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: inherit;
}
.tile-nav li .linktext {
  padding: 0 5px 0 5px;
  height: 65%;
  display: flex;
}
.tile-nav li .linktext img {
  width: 100%;
  height: auto;
  filter: drop-shadow(2px 2px 5px 1px rgba(0, 0, 0, 0.8));
}
.tile-nav li.pinboard {
  background-color: #079ab7;
  background-image: url("../Images/icons/tile_navigation/icon_pinboard.svg");
  background-size: 30% auto;
}
.tile-nav li.listen-look {
  background-color: #e32185;
  background-image: url("../Images/icons/tile_navigation/icon_listen_look.svg");
}
.tile-nav li.educational-games {
  background-color: #fdc75f;
  background-image: url("../Images/icons/tile_navigation/icon_educational_games.svg");
  background-size: 35% auto;
  background-position-x: 52%;
  background-position-y: 90%;
}
.tile-nav li.english {
  background-color: #81c185;
  background-image: url("../Images/icons/tile_navigation/icon_english.svg");
  background-size: 35% auto;
  background-position-y: 88%;
}
.tile-nav li.flipbook {
  background-color: #c368a6;
  background-image: url("../Images/icons/tile_navigation/icon_flipbook.svg");
  background-size: 40% auto;
  background-position-y: 85%;
}
.tile-nav li.worksheets {
  background-color: #76549e;
  background-image: url("../Images/icons/tile_navigation/icon_worksheets.svg");
  background-size: 38% auto;
  background-position-x: 57%;
  background-position-y: 85%;
}

@media (max-width: 767.98px) {
  .tile-nav {
    /* Snaps to 3 columns, each remaining exactly 120px */
    grid-template-columns: repeat(3, 120px);
  }
}
/*************************************/
/* The Square Tiles */
/* 3. The Snap Point */
.magazine-tilenavigation-container-large {
  /* Define layout building blocks */
  --grid-gap-y: 20px;
  --grid-gap-x: 20px;
  /* Dynamic row and col definition */
  --grid-rows: 3;
  --grid-cols: 2;
  --tile-min-width: 100px;
  --tile-max-width: 180px;
}

@media (min-width: 768px) {
  .magazine-tilenavigation-container-large {
    /* Flip the grid layout dimensions */
    --grid-rows: 2;
    --grid-cols: 3;
  }
}
.magazine-tilenavigation-container-small {
  --tile-min-width: 116px;
  --tile-max-width: 116px;
  --tile-min-height: 116px;
  --tile-max-height: 116px;
  --grid-gap-y: 8px;
  --grid-gap-x: 8px;
  --grid-rows: 2;
  --grid-cols: 3;
}

@media (min-width: 768px) {
  .magazine-tilenavigation-container-small {
    /* Flip the grid layout dimensions */
    --grid-rows: 1;
    --grid-cols: 6;
  }
}
.magazine-tilenavigation-container-large {
  display: flex;
  justify-content: center; /* Center the entire content */
  overflow-x: auto; /* allow horizontal scrolling */
  padding-top: 12px;
  padding-bottom: 15px;
  margin-bottom: 15px;
}

.magazine-tilenavigation {
  display: grid;
  grid-template-columns: repeat(var(--grid-cols), minmax(var(--tile-min-width), var(--tile-max-width))); /* 2 equal columns */
  grid-template-rows: repeat(var(--grid-rows), minmax(0, 1fr));
  /* Define the uniform gap for both X and Y */
  gap: var(--grid-gap-y) var(--grid-gap-x);
  padding: 20px;
  /* Reset default list styles */
  list-style: none;
  padding: 0;
  margin: 0 auto; /* Centers horizontally if there's max-width */
  /* Force the entire grid container to center perfectly on the page */
  width: -moz-max-content;
  width: max-content;
  height: -moz-min-content;
  height: min-content;
}

.magazine-tilenavigation-item {
  width: 100%;
  /* Ensures the square aspect ratio is strictly maintained */
  aspect-ratio: 1/1;
  border-radius: 7%;
  background-repeat: no-repeat;
  background-position: center 90%;
  background-size: 40% auto;
}
.magazine-tilenavigation-item.pinboard {
  background-color: #079ab7;
  background-image: url("../Images/icons/tile_navigation/icon_pinboard.svg");
  background-size: 30% auto;
  background-position: center 90%;
}
.magazine-tilenavigation-item.pinboard:hover, .magazine-tilenavigation-item.pinboard:focus {
  background-color: #0b7a90;
}
.magazine-tilenavigation-item.listen_look {
  background-color: #e32185;
  background-image: url("../Images/icons/tile_navigation/icon_listen_look.svg");
}
.magazine-tilenavigation-item.listen_look:hover, .magazine-tilenavigation-item.listen_look:focus {
  background-color: #b01b67;
}
.magazine-tilenavigation-item.educational_games {
  background-color: #fdc75f;
  background-image: url("../Images/icons/tile_navigation/icon_educational_games.svg");
  background-size: 37% auto;
  background-position-x: 55%;
  background-position-y: 89%;
}
.magazine-tilenavigation-item.educational_games:hover, .magazine-tilenavigation-item.educational_games:focus {
  background-color: #c19b4c;
}
.magazine-tilenavigation-item.english {
  background-color: #81c185;
  background-image: url("../Images/icons/tile_navigation/icon_english.svg");
  background-size: 37% auto;
  background-position-y: 85%;
}
.magazine-tilenavigation-item.english:hover, .magazine-tilenavigation-item.english:focus {
  background-color: #659668;
}
.magazine-tilenavigation-item.flipbook {
  background-color: #c368a6;
  background-image: url("../Images/icons/tile_navigation/icon_flipbook.svg");
  background-size: 42% auto;
  background-position-y: 84%;
}
.magazine-tilenavigation-item.flipbook:hover, .magazine-tilenavigation-item.flipbook:focus {
  background-color: #985182;
}
.magazine-tilenavigation-item.worksheets {
  background-color: #76549e;
  background-image: url("../Images/icons/tile_navigation/icon_worksheets.svg");
  background-position-x: 60%;
  background-position-y: 84%;
}
.magazine-tilenavigation-item.worksheets:hover, .magazine-tilenavigation-item.worksheets:focus {
  background-color: #5e427c;
}

.magazine-tilenavigation-container-small {
  display: none !important;
}
@media (min-width: 768px) {
  .magazine-tilenavigation-container-small {
    display: block !important;
  }
}
.magazine-tilenavigation-container-small .magazine-tilenavigation-item.pinboard {
  background-size: 30% auto;
}
.magazine-tilenavigation-container-small .magazine-tilenavigation-item.listen_look {
  background-size: 40% auto;
}
.magazine-tilenavigation-container-small .magazine-tilenavigation-item.educational_games {
  background-size: 35% auto;
  background-position-x: 52%;
  background-position-y: 90%;
}
.magazine-tilenavigation-container-small .magazine-tilenavigation-item.english {
  background-size: 35% auto;
  background-position-y: 88%;
}
.magazine-tilenavigation-container-small .magazine-tilenavigation-item.flipbook {
  background-size: 40% auto;
  background-position-y: 85%;
}
.magazine-tilenavigation-container-small .magazine-tilenavigation-item.worksheets {
  background-size: 38% auto;
  background-position-x: 57%;
  background-position-y: 85%;
}

/* 3. Ensure the anchor tags fill the square completely */
.magazine-tilenavigation-item > a {
  display: flex;
  width: 100%;
  height: 100%;
  text-decoration: none;
  /* Example styling: center the content inside the button */
  align-items: center;
  justify-content: center;
  /* Optional visual styling so you can see the squares */
  transition: transform 0.2s ease;
}
.magazine-tilenavigation-item > a .linktext {
  padding: 0 5px 0 5px;
  height: 55%;
  display: flex;
  align-items: center;
}

/* 4. Ensure images fit nicely inside the squares */
.magazine-tilenavigation-item .linktext img {
  max-width: 100%;
  height: auto;
  display: block;
}

.articleoverview-navigation {
  list-style: none;
  padding-left: 0;
}
.articleoverview-navigation .articleoverview-navigation-item {
  font-size: 1.5rem;
  font-weight: bold;
}
.articleoverview-navigation .articleoverview-navigation-item a {
  display: flex;
  align-items: center;
  gap: 1rem;
  color: #000000;
  text-decoration: none;
  padding: 0.5rem 1rem;
  margin-bottom: 27px;
}
.articleoverview-navigation .articleoverview-navigation-item .linktext {
  display: inline-block;
}
.articleoverview-navigation .articleoverview-navigation-item .linktext span {
  font-weight: normal;
}
@media (max-width: 767.98px) {
  .articleoverview-navigation .articleoverview-navigation-item .linktext span {
    display: none !important;
  }
}
.articleoverview-navigation .articleoverview-navigation-item .linkicon {
  display: inline-block;
  width: 50px;
  height: 50px;
  flex-shrink: 0;
  background-size: contain;
  background-repeat: no-repeat;
}

.articleoverview-navigation-item.pin .linkicon {
  background-image: url("../Images/icons/articleoverview_navigation/pin.svg");
}
.articleoverview-navigation-item.pin a {
  display: flex;
  justify-content: start;
}
.articleoverview-navigation-item.listen .linkicon {
  background-image: url("../Images/icons/articleoverview_navigation/listen.svg");
}
.articleoverview-navigation-item.watch .linkicon {
  background-image: url("../Images/icons/articleoverview_navigation/watch.svg");
}
.articleoverview-navigation-item.interactive .linkicon {
  background-image: url("../Images/icons/articleoverview_navigation/interactive.svg");
}
.articleoverview-navigation-item.worksheet .linkicon {
  background-image: url("../Images/icons/articleoverview_navigation/worksheet.svg");
}
.articleoverview-navigation-item.video .linkicon {
  background-image: url("../Images/icons/articleoverview_navigation/video.svg");
}
.articleoverview-navigation-item.write .linkicon {
  background-image: url("../Images/icons/articleoverview_navigation/write.svg");
}
.articleoverview-navigation-item.readingsheet .linkicon {
  background-image: url("../Images/icons/articleoverview_navigation/readingsheet.svg");
}
.articleoverview-navigation-item.dab .linkicon {
  background-image: url("../Images/icons/articleoverview_navigation/dab.svg");
}

.articleoverview-navigation-container {
  padding-top: 1.5rem;
}
.articleoverview-navigation-container h2, .articleoverview-navigation-container h3 {
  color: #000000;
  font-size: 1.75rem;
  font-weight: bold;
  text-align: left;
}

.pinboard .articleoverview-navigation-container h2, .pinboard .articleoverview-navigation-container h3 {
  color: #079ab7;
}
.pinboard .articleoverview-navigation-container .articleoverview-navigation-item a {
  background-color: #b5e1e9;
}
.pinboard .articleoverview-navigation-container .articleoverview-navigation-item a:hover, .pinboard .articleoverview-navigation-container .articleoverview-navigation-item a:focus {
  background-color: #39aec5;
}

.listen-watch .articleoverview-navigation-container h2, .listen-watch .articleoverview-navigation-container h3 {
  color: #e32185;
}
.listen-watch .articleoverview-navigation-container .articleoverview-navigation-item a {
  background-color: #f8c7e0;
}
.listen-watch .articleoverview-navigation-container .articleoverview-navigation-item a:hover, .listen-watch .articleoverview-navigation-container .articleoverview-navigation-item a:focus {
  background-color: #ee7ab6;
}

.learning-games .articleoverview-navigation-container h2, .learning-games .articleoverview-navigation-container h3 {
  color: #fdc75f;
}
.learning-games .articleoverview-navigation-container .articleoverview-navigation-item a {
  background-color: #fee3af;
}
.learning-games .articleoverview-navigation-container .articleoverview-navigation-item a:hover, .learning-games .articleoverview-navigation-container .articleoverview-navigation-item a:focus {
  background-color: #fdcd6f;
}

.english .articleoverview-navigation-container h2, .english .articleoverview-navigation-container h3 {
  color: #81c185;
}
.english .articleoverview-navigation-container .articleoverview-navigation-item a {
  background-color: #cde6ce;
}
.english .articleoverview-navigation-container .articleoverview-navigation-item a:hover, .english .articleoverview-navigation-container .articleoverview-navigation-item a:focus {
  background-color: #9acd9d;
}

.worksheets .articleoverview-navigation-container h2, .worksheets .articleoverview-navigation-container h3 {
  color: #76549e;
}
.worksheets .articleoverview-navigation-container .articleoverview-navigation-item a {
  background-color: #d6cce2;
}
.worksheets .articleoverview-navigation-container .articleoverview-navigation-item a:hover, .worksheets .articleoverview-navigation-container .articleoverview-navigation-item a:focus {
  background-color: #9f87bb;
}

.breadcrumbs {
  padding-left: 0;
  list-style: none;
}
.breadcrumbs a {
  display: inline-block;
  font-size: 1rem;
  font-weight: bold;
  color: #808080;
  padding: 0 10px 0 10px;
  text-decoration: none;
}
.breadcrumbs li:first-of-type a {
  padding-left: 0;
}
.breadcrumbs li {
  display: inline-block;
  font-size: 1rem;
  font-weight: bold;
  color: #808080;
  margin-top: 0.75rem;
  margin-bottom: 0.75rem;
  margin-left: auto;
  margin-right: auto;
}
.breadcrumbs li.current {
  padding-left: 10px;
}

header.mainheader {
  height: 80px;
  width: 100%;
  background-color: #0089a4;
}
header.mainheader .container {
  height: 100%;
  max-width: 800px;
  padding: 0 20px;
}
header.mainheader .row {
  height: 100%;
}
header.mainheader .col-6 {
  height: 100%;
}
header.mainheader h1.pageheader, header.mainheader h2.pageheader {
  color: #ffffff;
  font-size: 2rem;
  font-weight: bold;
  margin: 0;
}

@media (min-width: 768px) {
  header.mainheader h1.pageheader, header.mainheader h2.pageheader {
    font-size: 2.5rem;
  }
}
.breadcrumb-container {
  max-width: 800px;
  padding: 0 20px;
  background-color: #fff;
}

.breadcrumb {
  font-size: 1.5rem;
  font-weight: bold;
  color: #808080;
  margin-top: 0.75rem;
  margin-bottom: 0rem;
  max-width: 800px;
  padding: 0 20px;
  margin-left: auto;
  margin-right: auto;
}

.pinboard header.mainheader {
  background-color: #079ab7;
}
.pinboard header.mainheader .container {
  background-color: #079ab7;
}

.listen-watch header.mainheader {
  background-color: #e32185;
}
.listen-watch header.mainheader .container {
  background-color: #e32185;
}

.learning-games header.mainheader {
  background-color: rgba(253, 199, 95, 0.5);
  background-color: hsl(34.79, 100%, 93.64%);
  background-color: #fdc75f;
}
.learning-games header.mainheader .container {
  background-color: #fdc75f;
}

.english header.mainheader {
  background-color: rgba(129, 193, 133, 0.5);
  background-color: #81c185;
}
.english header.mainheader .container {
  background-color: #81c185;
}

.flipbook header.mainheader {
  background-color: #c368a6;
}
.flipbook header.mainheader .container {
  background-color: #c368a6;
}

.worksheets header.mainheader {
  background-color: rgba(118, 84, 158, 0.5);
  background-color: #76549e;
}
.worksheets header.mainheader .container {
  background-color: #76549e;
}

body {
  background-color: #b5e1e9;
}
body header.mainheader {
  background-color: transparent;
}
body header.mainheader .container {
  background-color: #0089a4;
}
body main {
  background-color: #fff;
}
body.pinboard {
  background-color: #b5e1e9;
}
body.pinboard header.mainheader {
  background-color: #b5e1e9;
}
body.listen-watch {
  background-color: #f8c7e0;
}
body.listen-watch header.mainheader {
  background-color: #f8c7e0;
}
body.learning-games {
  background-color: hsl(34.79, 100%, 93.64%);
}
body.learning-games header.mainheader {
  background-color: hsl(34.79, 100%, 93.64%);
}
body.english {
  background-color: #cde6ce;
}
body.english header.mainheader {
  background-color: #cde6ce;
}
body.flipbook {
  background-color: hsl(319.12, 99.21%, 87.88%);
}
body.flipbook header.mainheader {
  background-color: hsl(319.12, 99.21%, 87.88%);
}
body.worksheets {
  background-color: hsl(267.57, 100%, 97.44%);
}
body.worksheets header.mainheader {
  background-color: hsl(267.57, 100%, 97.44%);
}

footer {
  background-color: transparent;
  color: #ffffff;
  font-size: 1.2rem;
}
footer p {
  margin-bottom: 0.5rem;
}
footer .container {
  background: #0089a4;
  padding: 1rem 20px 0.5rem 20px;
  max-width: 800px;
}
footer a {
  color: #ffffff;
  text-decoration: none;
}

.carousel-caption {
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.5);
  bottom: 0.5rem;
  padding-bottom: 0.75rem;
}
.carousel-caption .slider-text {
  display: block !important;
}
.carousel-caption p {
  margin-bottom: 0.5rem;
}

.carousel-indicators {
  bottom: -8px;
}

.carousel-control-next-icon, .carousel-control-prev-icon {
  background-color: #474747;
  border-radius: 5px;
}

.form-label {
  margin-bottom: 0;
  margin-top: 0.8rem;
  font-weight: bold;
}

.form-control {
  --bs-border-color: #079ab7;
  background-color: #b5e1e9;
}
.form-control:focus {
  box-shadow: 0 0 0 0.25rem rgba(181, 225, 233, 0.25);
}

.form-navigation {
  margin-top: 1rem;
}

input[type=text], input[type=email], textarea.form-control {
  font-size: 1.5rem;
}
@media (min-width: 768px) {
  input[type=text], input[type=email], textarea.form-control {
    font-size: 1.4rem;
  }
}
input[type=text]::-moz-placeholder, input[type=email]::-moz-placeholder, textarea.form-control::-moz-placeholder {
  font-size: 1.5rem;
}
input[type=text]::placeholder, input[type=email]::placeholder, textarea.form-control::placeholder {
  font-size: 1.5rem;
}
@media (min-width: 768px) {
  input[type=text]::-moz-placeholder, input[type=email]::-moz-placeholder, textarea.form-control::-moz-placeholder {
    font-size: 1.4rem;
  }
  input[type=text]::placeholder, input[type=email]::placeholder, textarea.form-control::placeholder {
    font-size: 1.4rem;
  }
}

textarea.form-control {
  min-height: 9rem;
}

.btn {
  --bs-btn-font-size: 1.5rem;
  font-weight: bold;
}
@media (min-width: 768px) {
  .btn {
    --bs-btn-font-size: 1.4rem;
  }
}
.btn:focus-visible {
  box-shadow: 0 0 0 0.25rem rgba(255, 0, 0, 0.5);
}
.btn:first-child:active {
  background-color: #d40000;
  border-color: #d40000;
}
.btn:first-child:active:focus-visible {
  box-shadow: 0 0 0 0.25rem rgba(255, 0, 0, 0.5);
}

.btn-primary {
  --bs-btn-bg: #ff0000;
  --bs-btn-border-color: #ff0000;
  --bs-btn-hover-bg: #d40000;
  --bs-btn-hover-border-color: #d40000;
}

.issue-overview-container .link-item {
  display: flex;
  align-items: center;
  gap: 0rem;
  font-size: 1.875rem;
  font-weight: bold;
  color: #0089a4;
  background-color: transparent;
  border: none;
  text-align: left;
  text-decoration: none;
  padding: 0.5rem 1rem;
  cursor: pointer;
  transition: background-color 0.3s ease;
}
.issue-overview-container .link-item .linktext {
  padding-left: 30px;
}
.issue-overview-container .link-item img {
  width: 117px;
  height: auto;
  margin: 12px 0px 12px 4px;
}
.issue-overview-container .link-item:hover, .issue-overview-container .link-item:focus {
  background-color: #cae7ea;
}

.magazine-cover-overview-container {
  text-align: center;
}
.magazine-cover-overview-container ul {
  padding-left: 0;
}
.magazine-cover-overview-container li {
  list-style: none;
  display: inline-block;
  min-width: 218px;
  min-height: 281px;
  padding: 0.5rem 1rem;
  transition: background-color 0.3s ease;
}
.magazine-cover-overview-container li:hover, .magazine-cover-overview-container li:focus {
  background-color: #cae7ea;
}
.magazine-cover-overview-container li a {
  text-decoration: none;
  color: #0089a4;
}
.magazine-cover-overview-container li .linktext {
  display: block;
  text-align: center;
  font-weight: bold;
}
.magazine-cover-overview-container li img {
  width: 100%;
  height: auto;
  display: block;
}

@media (min-width: 768px) {
  .magazine-cover-overview-container li {
    width: 218px;
  }
  .issue-overview-container {
    margin-top: 50px;
  }
  .issue-overview-container .link-item {
    width: 218px;
    display: block;
  }
  .issue-overview-container .link-item .linktext {
    padding-left: 0;
    font-size: 1.5rem;
    display: inline-block;
    width: 100%;
    text-align: center;
  }
  .issue-overview-container .link-item img {
    margin: 0;
    width: 100%;
    height: auto;
    display: block;
  }
}
.issue-container {
  /*max-height: calc(100vh - 80px); /* Full height minus header */
  min-height: calc(100dvh - 80px); /* Full height minus header, using dynamic viewport units */
  display: flex;
  justify-content: center; /* Center the entire content */
  overflow: hidden; /* Hide any overflow */
  padding-top: 12px;
  padding-bottom: 15px;
  margin-bottom: 15px;
}

.issue .issue_item {
  height: calc((100vh - 80px - 12px) / 3 - 15px); /* Set height based on total available height */
  width: calc((100vh - 80px - 12px) / 3 - 15px); /* Set width to match height for square buttons */
  height: calc((100dvh - 80px - 12px) / 3);
  width: calc((100dvh - 80px - 12px) / 3);
  max-height: calc((100vw - 30px) / 2); /* Ensure it doesn't exceed viewport width */
  max-width: calc((100vw - 30px) / 2); /* Ensure it doesn't exceed viewport width */
  min-height: 120px; /* Set a minimum height for very small screens */
  min-width: 120px; /* Set a minimum width for very small screens */
  aspect-ratio: 1/1;
  border-radius: 30px;
  background-repeat: no-repeat;
  background-position: center 90%;
  background-size: 50% auto;
  padding-bottom: 1.5rem;
}
.issue .issue_content.pinboard {
  background-color: #079ab7;
  background-image: url("../Images/icons/icon_pinboard.svg");
  background-size: 40% auto;
}
.issue .issue_content.listen_look {
  background-color: #e32185;
  background-image: url("../Images/icons/icon_listen_look.svg");
}
.issue .issue_content.educational_games {
  background-color: #fdc75f;
  background-image: url("../Images/icons/icon_educational_games.svg");
  background-size: 45% auto;
  background-position-x: 65%;
  background-position-y: 80%;
}
.issue .issue_content.english {
  background-color: #81c185;
  background-image: url("../Images/icons/icon_english.svg");
  background-size: 45% auto;
  background-position-y: 80%;
}
.issue .issue_content.flipbook {
  background-color: #c368a6;
  background-image: url("../Images/icons/icon_flipbook_navigation.svg");
  background-size: 50% auto;
  background-position-y: 75%;
}
.issue .issue_content.worksheets {
  background-color: #76549e;
  background-image: url("../Images/icons/icon_worksheets.svg");
  background-position-x: 55%;
  background-position-y: 85%;
}
.issue .issue_content .linktext {
  padding: 0 15px 0 15px;
  height: 65%;
  display: flex;
}
.issue .issue_content .linktext img {
  width: 100%;
  height: auto;
  filter: drop-shadow(2px 2px 5px 1px rgba(0, 0, 0, 0.8));
}

.overview-container, .tile-navigation-container {
  /*max-height: calc(100vh - 80px); /* Full height minus header */
  min-height: calc(100dvh - 80px); /* Full height minus header, using dynamic viewport units */
  display: flex;
  justify-content: center; /* Center the entire content */
  overflow: hidden; /* Hide any overflow */
  padding-top: 12px;
  padding-bottom: 15px;
  margin-bottom: 15px;
}

.overview .overview_item, .overview .tile_item, .tile-navigation .overview_item, .tile-navigation .tile_item {
  height: calc((100vh - 80px - 12px) / 3 - 15px); /* Set height based on total available height */
  width: calc((100vh - 80px - 12px) / 3 - 15px); /* Set width to match height for square buttons */
  height: calc((100dvh - 80px - 12px) / 3);
  width: calc((100dvh - 80px - 12px) / 3);
  max-height: calc((100vw - 30px) / 2); /* Ensure it doesn't exceed viewport width */
  max-width: calc((100vw - 30px) / 2); /* Ensure it doesn't exceed viewport width */
  min-width: 120px; /* Ensure a minimum width for very small screens */
  min-height: 120px; /* Ensure a minimum height for very small screens */
  aspect-ratio: 1/1;
  border-radius: 30px;
  background-repeat: no-repeat;
  background-position: center 90%;
  background-size: 50% auto;
  padding-bottom: 1.5rem;
  margin-bottom: 15px;
}
.overview .overview_content.pinboard, .overview .tile_content.pinboard, .tile-navigation .overview_content.pinboard, .tile-navigation .tile_content.pinboard {
  background-color: #079ab7;
  background-image: url("../Images/icons/icon_pinboard.svg");
  background-size: 40% auto;
}
.overview .overview_content.listen_look, .overview .tile_content.listen_look, .tile-navigation .overview_content.listen_look, .tile-navigation .tile_content.listen_look {
  background-color: #e32185;
  background-image: url("../Images/icons/icon_listen_look.svg");
}
.overview .overview_content.educational_games, .overview .tile_content.educational_games, .tile-navigation .overview_content.educational_games, .tile-navigation .tile_content.educational_games {
  background-color: #fdc75f;
  background-image: url("../Images/icons/icon_educational_games.svg");
  background-size: 45% auto;
  background-position-x: 65%;
  background-position-y: 80%;
}
.overview .overview_content.english, .overview .tile_content.english, .tile-navigation .overview_content.english, .tile-navigation .tile_content.english {
  background-color: #81c185;
  background-image: url("../Images/icons/icon_english.svg");
  background-size: 45% auto;
  background-position-y: 80%;
}
.overview .overview_content.flipbook, .overview .tile_content.flipbook, .tile-navigation .overview_content.flipbook, .tile-navigation .tile_content.flipbook {
  background-color: #c368a6;
  background-image: url("../Images/icons/icon_flipbook_navigation.svg");
  background-size: 50% auto;
  background-position-y: 75%;
}
.overview .overview_content.worksheets, .overview .tile_content.worksheets, .tile-navigation .overview_content.worksheets, .tile-navigation .tile_content.worksheets {
  background-color: #76549e;
  background-image: url("../Images/icons/icon_worksheets.svg");
  background-position-x: 55%;
  background-position-y: 85%;
}
.overview .overview_content .linktext, .overview .tile_content .linktext, .tile-navigation .overview_content .linktext, .tile-navigation .tile_content .linktext {
  padding: 0 15px 0 15px;
  height: 65%;
  display: flex;
}
.overview .overview_content .linktext img, .overview .tile_content .linktext img, .tile-navigation .overview_content .linktext img, .tile-navigation .tile_content .linktext img {
  width: 100%;
  height: auto;
  filter: drop-shadow(2px 2px 5px 1px rgba(0, 0, 0, 0.8));
}

@media (min-width: 768px) {
  .issue-container .issue {
    align-content: center !important;
  }
  .issue-container .issue .tile-1, .issue-container .issue .tile-2, .issue-container .issue .tile-3, .issue-container .issue .tile-4, .issue-container .issue .tile-5, .issue-container .issue .tile-6 {
    justify-content: center !important;
  }
  .tile-navigation-container {
    height: auto;
    min-height: auto;
    margin-bottom: 50px;
    padding-top: 0;
    padding-bottom: 0;
  }
  .tile-navigation-container .tile_item {
    width: 115px;
    height: 115px;
    min-height: 115px;
    min-width: 115px;
    max-width: 115px;
    max-height: 115px;
    margin-right: 10px;
  }
}
.jp-audio {
  max-width: 480px;
  padding: 0 20px;
  margin: 0 auto;
}

.jp-controls {
  text-align: center;
}

.jp-play {
  border-radius: 50%;
  border: 1px solid transparent;
  background: #000000;
  margin-bottom: 1rem;
  width: 80px;
  aspect-ratio: 1;
  position: relative;
}
.jp-play span {
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.jp-play span:not(caption) {
  position: absolute !important;
}
.jp-play span * {
  overflow: hidden !important;
}
.jp-play::after {
  content: "";
  height: 50%;
  aspect-ratio: 0.83/1;
  background: url(../Images/icons/icon_play.svg) transparent no-repeat;
  background-size: contain;
  position: absolute;
  top: 52%;
  left: 55%;
  transform: translate(-50%, -50%);
}
.jp-play:hover, .jp-play:focus {
  background: #b2b2b2;
  color: #b2b2b2;
  border: 1px solid #888888;
}
.jp-play:hover::after, .jp-play:focus::after {
  height: 50%;
  aspect-ratio: 0.83/1;
  background: url(../Images/icons/icon_play_hover.svg) transparent no-repeat;
  background-size: contain;
  position: absolute;
  top: 52%;
  left: 55%;
  transform: translate(-50%, -50%);
}

.jp-state-playing .jp-play::after {
  background: url(../Images/icons/icon_pause.svg) transparent no-repeat;
  background-size: contain;
  left: 50%;
}
.jp-state-playing .jp-play:hover::after, .jp-state-playing .jp-play:focus::after {
  background: url(../Images/icons/icon_pause_hover.svg) transparent no-repeat;
  background-size: contain;
}

.jp-seek-bar {
  border: 1px solid #b2b2b2;
  border-radius: 8px;
  height: 16px;
  background: #b2b2b2;
  overflow: hidden;
}

.jp-play-bar {
  height: 100%;
  background: #000000;
}/*# sourceMappingURL=frontend.css.map */