.banner-slide-up {
  font-size: 0.7em;
  max-height: 67%;
  overflow-y: scroll;
  opacity: 98%
}
.banner-slide-up .button.extra-wide {
  padding: 10px;
  width: 100%;
}

@media screen and (max-width: 576px) {
  /* xs-container */
  html {
    --responsive-mode: "xs";
    --container-width: 95vw;
    --container-gutter: 5vw;
    --max-columns: 1;
  }
  .hidden-xs-down,
  .hidden-sm-down,
  .hidden-md-down {
    display: none !important;
  }
  .xs-full-width,
  .sm-full-width,
  .md-full-width {
    display: block !important;
    width: auto;
    text-align: center;
    margin-right: unset !important;
  }
  .content-row.flip-flop,
  .content-row.thirty-seventy,
  .content-row.forty-sixty,
  .content-row.fifty-fifty,
  .content-row.fiftyfive-fortyfive,
  .content-row.sixty-forty,
  .content-row.seventy-thirty {
    grid-template-columns: minmax(250px,1fr) !important;
    grid-template-areas: unset !important;
    grid-row-gap: unset;
    row-gap: unset;
  }
  .content-row.flip-flop .content,
  .content-row.flip-flop .illustration,
  .content-row.flop-flip .content,
  .content-row.flop-flip .illustration {
    grid-area: unset !important;
  }
  .description-list-entry,
  .description-list-entry .dl-title,
  .description-list-entry .dl-description {
    grid-template-columns: unset;
  }
  .dl-title {
    padding-top: var(--gutter-width);
    padding-bottom: var(--gutter-width);
  }
  a.dl-link {
    font-size: 0.8em;
    max-width: calc(var(--container-width) - var(--container-gutter));
  }
  .content-link {
    max-width: calc(var(--container-width) - var(--container-gutter));
  }
  .window {
    max-width: calc(var(--container-width) - var(--container-gutter));
  }
  a.button.center {
    width: unset !important;
  }
  .image-grid-icon.responsive {
    font-size: 1.2em !important;
  }
  .image-grid.double-wide {
    --grid-gutter: var(--gutter-width) !important;
  }
  .image-grid.triple-wide {
    --grid-gutter: var(--gutter-width) !important;
  }
  .flip-flop .image-grid-image,
  .flop-flip .image-grid-image {
    display: none;
  }
  .responsive-grid.two-columns,
  .responsive-grid.three-columns,
  .responsive-grid.four-columns,
  .responsive-grid.five-columns {
    grid-template-columns: 1fr;
  }
  .figure,
  .figure-full-width {
    width: 100%;
  }
  .footer-nav {
    grid-template-areas: unset !important;
  }
  .footer-nav-link-group {
    grid-area: unset !important;
  }

  .blog-post .post-body .window-body,
  .blog-post .post-body .code-block {
    width: 85vw !important;
  }
  .toc#toc {
    position: unset;
  }

  .logo-ribbon .image-grid {
    column-gap: 0px;
  }

  .illustration-container.hero {
    height: 250px;
  }
  .illustration-container.hero .hero-foreground img {
    width: var(--container-width);
    height: auto;
  }
  .illustration-container.hero .hero-background img {
    width: calc(var(--container-width) * 0.5);
    z-index: 900;
  }
  .illustration-getting-started {
    height: 150px;
  }

  #curriculum-a ol {
    margin-bottom: 0;
  }
  #curriculum-b ol {
    margin-top: 0;
  }

  .popup-content {
    width: 85vw;
  }
}

@media screen and (min-width: 577px) and (max-width: 767px) {
  /* sm-container */
  html {
    --responsive-mode: "sm";
    --container-width: 520px;
    --container-gutter: calc(calc(100% - 520px) / 2);
    --max-columns: 2;
  }
  .hidden-sm-down,
  .hidden-md-down {
    display: none !important;
  }
  .hidden-sm-up {
    display: none !important;
  }
  .sm-full-width,
  .md-full-width {
    display: block !important;
    width: auto;
    text-align: center;
    margin-right: unset !important;
  }
  .content-row.flip-flop,
  .content-row.thirty-seventy,
  .content-row.forty-sixty,
  .content-row.fifty-fifty,
  .content-row.fiftyfive-fortyfive,
  .content-row.sixty-forty,
  .content-row.seventy-thirty {
    grid-template-columns: minmax(250px,1fr) !important;
    grid-template-areas: unset !important;
    grid-row-gap: unset;
    row-gap: unset;
  }
  .content-row.flip-flop .content,
  .content-row.flip-flop .illustration,
  .content-row.flop-flip .content,
  .content-row.flop-flip .illustration {
    grid-area: unset !important;
  }
  .description-list-entry,
  .description-list-entry .dl-title,
  .description-list-entry .dl-description {
    grid-template-columns: unset;
  }
  .dl-title {
    padding-top: var(--gutter-width);
    padding-bottom: var(--gutter-width);
  }
  a.dl-link {
    font-size: 0.9em;
    max-width: calc(var(--container-width) - var(--container-gutter));
  }
  .content-link {
    max-width: calc(var(--container-width) - var(--container-gutter));
  }
  .window {
    max-width: calc(var(--container-width) - var(--container-gutter));
  }
  a.button.center {
    width: unset !important;
  }
  .image-grid-icon.responsive {
    font-size: 1.5em !important;
  }
  .image-grid.double-wide {
    --grid-gutter: var(--gutter-width) !important;
  }
  .image-grid.triple-wide {
    --grid-gutter: var(--gutter-width) !important;
  }
  .flip-flop .image-grid-image,
  .flop-flip .image-grid-image {
    display: none;
  }
  .responsive-grid.two-columns,
  .responsive-grid.three-columns,
  .responsive-grid.four-columns,
  .responsive-grid.five-columns {
    grid-template-columns: 1fr;
  }
  .figure,
  .figure-full-width {
    width: 100%;
  }
  .footer-nav {
    grid-template-areas: unset !important;
  }
  .footer-nav-link-group {
    grid-area: unset !important;
  }

  .blog-post .post-body .window-body,
  .blog-post .post-body .code-block {
    width: calc(var(--container-width) - var(--gutter-width) - var(--gutter-width)) !important;
  }
  .toc#toc {
    position: unset;
  }

  .logo-ribbon .image-grid {
    column-gap: 0px;
  }

  .illustration-container.hero {
    height: 200px;
  }
  .illustration-container.hero .hero-background img {
    z-index: 900;
  }
  .illustration-getting-started {
    height: 150px;
  }

  #curriculum-a ol {
    margin-bottom: 0;
  }
  #curriculum-b ol {
    margin-top: 0;
  }

  .popup-content {
    width: calc(var(--container-width) * 0.95);
  }
}

@media screen and (max-width: 767px) {
  .table td {
    font-size: 0.9em !important;
    line-height: 1.3;
  }
}

@media screen and (min-width: 768px) {
  .banner-close{
    font-size: 2em;
  }
  .form-compact{
    display: flex;
    flex-wrap: wrap;
  }

  .form-compact .form-group{
    width: 50%;
    padding-bottom: 10px;
  }

  .form-compact .form-group:nth-child(odd){
    padding-right: 20px;
  }
}

@media screen and (min-width: 768px) and (max-width: 991px) {
  /* md-container */
  html {
    --responsive-mode: "md";
    --container-width: 740px;
    --container-gutter: calc(calc(100% - 740px) / 2);
    --max-columns: 2;
  }
  .hidden-md-down {
    display: none !important;
  }
  .hidden-sm-up,
  .hidden-md-up {
    display: none !important;
  }
  .md-full-width {
    display: block !important;
    width: auto;
    text-align: center;
    margin-right: unset !important;
  }
  .content-row.thirty-seventy,
  .content-row.fiftyfive-fortyfive,
  .content-row.sixty-forty,
  .content-row.seventy-thirty {
    grid-template-columns: minmax(250px,1fr) !important;
    grid-template-areas: unset !important;
  }
  .content-row.forty-sixty {
    grid-template-columns: 1fr 1fr !important;
    grid-row-gap: unset;
    row-gap: unset;
  }
  .description-list-entry,
  .description-list-entry .dl-title,
  .description-list-entry .dl-description {
    grid-template-columns: unset;
  }
  .image-grid-icon.medium.responsive {
    font-size: 1.5em !important;
  }
  .image-grid.double-wide {
    --grid-gutter: var(--gutter-width) !important;
  }
  .image-grid.triple-wide {
    --grid-gutter: var(--gutter-width) !important;
  }
  .responsive-grid.three-columns,
  .responsive-grid.four-columns,
  .responsive-grid.five-columns {
    grid-template-columns: 1fr 1fr;
  }
  .highlight-panel.responsive-grid.three-columns {
    grid-template-columns: 1fr;
  }
  .highlight-panel.responsive-grid.three-columns > .panel.highlight .content-text {
    min-height: 150px;
  }
  .highlight-panel > .panel.highlight.active {
    /* padding-top: calc(var(--gutter-width) * 2); */
    padding: unset;
    height: calc(100% + calc(var(--gutter-width) * 2));
    margin-bottom: calc(var(--gutter-width) * -1);
  }
  .highlight-panel.responsive-grid.three-columns > .panel.highlight.active:not(:first-child):not(:last-child) {
    margin-top: calc(var(--gutter-width) * -2);
    height: calc(100% + calc(var(--gutter-width) * 2));
  }
  .highlight-panel.responsive-grid.three-columns > .panel.highlight:first-child:not(.active) + .panel.highlight:not(.active) {
    margin-top: calc(var(--gutter-width) * -2);
    padding-top: calc(var(--gutter-width) * 2);
  }

  .highlight-panel.responsive-grid.three-columns > .panel.highlight:first-child:not(.active) {
    margin-left: unset;
    padding-left: var(--gutter-width);
    margin-top: calc(var(--gutter-width) * -1);
    padding-top: calc(var(--gutter-width) * 2);
    height: calc(100% + var(--gutter-width));
    padding-bottom: calc(var(--gutter-width) * 1);
    border-top-left-radius: calc(var(--gutter-width) / 2);
    border-top-right-radius: calc(var(--gutter-width) / 2);
    border-bottom-left-radius: unset;
  }
  .highlight-panel.responsive-grid.three-columns > .panel.highlight:not(:first-child):not(:last-child):not(.active) {
    margin-left: unset;
    margin-top: calc(var(--gutter-width) * -1);
    padding-left: var(--gutter-width);
    height: calc(100% + calc(var(--gutter-width) * 2));
    width: 100%;
    padding-right: var(--gutter-width);
    padding-bottom: calc(var(--gutter-width) * 1);
  }
  .highlight-panel.responsive-grid.three-columns > .panel.highlight:last-child:not(.active) {
    margin-top: calc(var(--gutter-width) * -1);
    padding-left: var(--gutter-width);
    height: calc(100% + var(--gutter-width));
    padding-bottom: calc(var(--gutter-width) * 2);
    margin-bottom: calc(var(--gutter-width) * 1);
    border-bottom-left-radius: calc(var(--gutter-width) / 2);
    border-bottom-right-radius: calc(var(--gutter-width) / 2);
    border-top-right-radius: unset;
  }

  .footer-nav {
    grid-template-areas: unset !important;
  }
  .footer-nav-link-group {
    grid-area: unset !important;
  }

  .blog-post .post-body .window-body,
  .blog-post .post-body .code-block {
    width: calc(var(--container-width) - var(--gutter-width) - var(--gutter-width)) !important;
  }
  .toc#toc {
    position: unset;
  }

  .illustration-container.hero {
    height: 200px;
  }
  .illustration-container.hero .hero-background img {
    z-index: 900;
  }
  .illustration-getting-started {
    height: 150px;
  }

  .popup-content {
    width: calc(var(--container-width) * 0.45);
  }
}

@media screen and (min-width: 992px) and (max-width: 1199px) {
  /* lg-container */
  html {
    --responsive-mode: "lg";
    --container-width: 960px;
    --container-gutter: calc(calc(100% - 960px) / 2);
    --max-columns: 4;
  }
  .hidden-sm-up,
  .hidden-md-up,
  .hidden-lg-up {
    display: none !important;
  }
  .image-grid-icon.medium.responsive {
    font-size: 1.5em !important;
  }
}

@media screen and (min-width: 1200px) {
  /* xl-container */
  html {
    --responsive-mode: "xl";
    --container-width: 1150px;
    --container-gutter: calc(calc(100% - 1150px) / 2);
  }
  .hidden-sm-up,
  .hidden-md-up,
  .hidden-lg-up,
  .hidden-xl-up {
    display: none !important;
  }
}