.section {
  width: 100%;
}
/*banner items*/
.section--blue {
  background-color: #1b295e;
}
.col {
  padding: 1.5rem 0;
}
 .cols-2-md > .col, .cols-3-md > .col {
    padding: 0;
  }

  .cols-2-md > .col {
    float: left;
    clear: none;
    text-align: inherit;
    width: 47.75%;
    margin-left: 0%;
    margin-right: 4.5%;
  }
  .cols-2-md > .col::after {
    content: "";
    display: table;
    clear: both;
  }
  .cols-2-md > .col:last-child {
    margin-right: 0%;
  }
  .cols-2-md--extra-gutter > .col {
    float: left;
    clear: none;
    text-align: inherit;
    width: 46.25%;
    margin-left: 0%;
    margin-right: 7.5%;
  }
  .cols-2-md--extra-gutter > .col::after {
    content: "";
    display: table;
    clear: both;
  }
  .cols-2-md--extra-gutter > .col:last-child {
    margin-right: 0%;
  }
.cols-3-md > .col {
    float: left;
    clear: none;
    text-align: inherit;
    width: 30.3333333333%;
    margin-left: 0%;
    margin-right: 4.5%;
  }
  .cols-3-md > .col::after {
    content: "";
    display: table;
    clear: both;
  }
  .cols-3-md > .col:last-child {
    margin-right: 0%;
  }
  .cols-3-md--extra-gutter > .col {
    float: left;
    clear: none;
    text-align: inherit;
    width: 28.3333333333%;
    margin-left: 0%;
    margin-right: 7.5%;
  }
  .cols-3-md--extra-gutter > .col::after {
    content: "";
    display: table;
    clear: both;
  }
  .cols-3-md--extra-gutter > .col:last-child {
    margin-right: 0%;
  }

.wrapper {
  padding-top: 2rem;
  padding-bottom: 2rem;
  width: auto;
  max-width: 1200px;
  float: none;
  display: block;
  margin-right: auto;
  margin-left: auto;
  padding-left: 24px;
  padding-right: 24px;
}
.wrapper::after {
  content: "";
  display: table;
  clear: both;
}
.wrapper--extra-padding {
  width: auto;
  max-width: 1180px;
  float: none;
  display: block;
  margin-right: auto;
  margin-left: auto;
  padding-left: 48px;
  padding-right: 48px;
}
.wrapper--extra-padding::after {
  content: "";
  display: table;
  clear: both;
}
.wrapper--fluid {
  max-width: none;
  margin-right: 0;
  margin-left: 0;
  padding-left: 0;
  padding-right: 0;
  width: 100%;
}
.wrapper--less-padding-top {
  padding-top: 1rem;
}
.wrapper--no-padding-top {
  padding-top: 0;
}
.wrapper--no-padding-bottom {
  padding-bottom: 0;
}
.wrapper--breadcrumb {
  padding-top: 2rem;
  padding-bottom: 2.5rem;
}
.image-size-80 {
  width:80%;
}
.image-size-70 {
  width:70%;
}
.image-size-60 {
  width:60%;
}
.image-size-50 {
  width:50%;
}
.image-size-40 {
  width:40%;
}
.image-size-30 {
  width:30%;
}
.image-size-20 {
  width:20%;
}
.hero {
  width: auto;
  max-width: 1440px;
  float: none;
  display: block;
  margin-right: auto;
  margin-left: auto;
  padding-left: 0;
  padding-right: 0;
  box-sizing: border-box;
  margin-bottom: 1.5rem;
  position: relative;
}
.hero__blue_background {
position: relative;
    background-color: rgba(21,51,65,1);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    box-shadow: -1px 3px 8px #5c5c5c;

}
.hero::after {
  content: "";
  display: table;
  clear: both;
}
.hero__background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;  background: #FFFFFF url("../img/png/hero.png") center center/cover no-repeat;
}
.hero--left {
  height: 700px;
}
/*HERO BACKGROUNDS*/
.hero .hero__background.homepage-top-image {
  background-image: url('../img/rchip-top-image-homepage.png');
  background-position: center center;
}
.hero .hero__background.achip-top-image {
  background-image: url('../img/tractor-aroostook.png');
  background-position: center center;
}
.hero .hero__background.dhc-top-image {
  background-image: url('../img/dhc-top-image.png');
  background-position: center center;
}
.hero .hero__background.skccp-top-image {
  background-image: url('../img/skccp-top-image.png');
  background-position: center center;
}
.hero .hero__background.mcd-ta-top-image {
  background-image: url('../img/mcd-ta-hub-top-photo.png');
  background-position: center center;
}
@media screen and (max-width: 1023px) { 
    .cols-3-md--extra-gutter > .col {
        float: none;
        width: 100%;
        margin-left: 0;
        margin-right: 0;
    }
    .cols-3-md--extra-gutter > .col .image-size-40 {
      width: auto;
    }
}

@media (min-width: 576px) {
  .hero--mini .hero__content {
    width: auto;
    text-align: left;
  }
}
@media (min-width: 768px) {
  .hero__content {
    margin-top: 22.5rem;
  }
  .hero__background {
    height: 450px;
  }
  .hero--mini .hero__content {
    margin-top: 13.75rem;
  }
  .hero--mini .hero__background {
    height: 300px;
  }
}
@media (min-width: 992px) {
  .hero__content {
    margin-top: 26.875rem;
  }
  .hero__background {
    height: 520px;
  }
  .hero--mini .hero__content {
    margin-top: 13.75rem;
  }
  .hero--mini .hero__background {
    height: 300px;
  }
}
@media (min-width: 1200px) {
  .hero--left, .hero--right {
    height: 700px;
  }
  .hero--left .hero__background, .hero--right .hero__background {
    height: 100%;
  }
  .hero--left .hero__content, .hero--right .hero__content {
    margin-top: 7.25rem;
    max-width: 480px;
  }
  .hero--left .hero__content {
    transform: none;
  }
  .hero--right .hero__content {
    transform: scaleX(-1);
  }
  .hero--mini {
    height: auto;
  }
  .hero--mini .hero__content {
    margin-top: 13.75rem;
  }
  .hero--mini .hero__background {
    height: 300px;
  }
}
/* Headings */
h1 {
  font-family: 'Poppins', sans-serif;
  color: #104f63;
  font-size: 2rem;
  margin-bottom: 1rem;
}
.white-header {
  font-family: 'Poppins', sans-serif;
  color: #ffffff;
  font-size: 3rem;
  margin-bottom: 1rem;
  
}
.white-non-h1 {
  font-family: 'Poppins', sans-serif;
  color: #104f63;
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
}
.white-background-transparency {
    background-color: #ffffff;
    padding: 5px;
    border-radius: 10px;
}

p {
    font-family: 'Public Sans', sans-serif;
  font-size: 1.3rem;
  line-height: 1.5555555556em;
  /*margin-bottom: 1.3333333333em;*/
}
ul, ol, li {
    font-family: 'Public Sans', sans-serif;
  font-size: 1.3rem;
  line-height: 1.5555555556em;
  /*margin-bottom: 1.3333333333em;*/
}
p .resource-title {
  font-size: 1.4rem;
}
.small {
    font-family: 'Public Sans', sans-serif;
  font-size: 10pt;
  /*margin-bottom: 1.3333333333em;*/
}
p.small a {
  font-size: inherit;
}
.right-align-image {
  float: right;
}
.center-align-text {
  text-align: center;
}

label:hover, input[type='checkbox'], input[type='submit'], button {
  cursor: pointer;
}

img {
  padding: 1rem;
}
.breadcrumb__item__current {
   font-family: 'Public Sans', sans-serif;
  font-size: 1.3rem;
  line-height: 1.5555555556em;
}

/* Links */
a, select {
  color: #104f63;
  text-decoration: underline;
  font-size: 1.3rem;
  line-height: 1.5555555556em;
  /*margin-bottom: 1.3333333333em;*/
}
select.sort {
  width: auto;
}
.select--grey.multi a.open-options {
  padding-right: 1.8em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.footer a {
  color: #fff;
}
.tab-group--secondary-nav {
    background-color: #fff;
}
.no-underline {
  text-decoration: none;
}
.white-link {
  color: #e49036;
  text-decoration: underline;
}

a:focus,
a:hover {
  outline: 3px solid #ffffff;
}
.tab-group--secondary-nav a {
  line-height: normal;
  margin-bottom: 0;
  padding: 0.6666666667em 0.8888888889em;
}



/* Cards */
/* Base card style */
.headline {
  width: auto;
  max-width: 900px;
  float: none;
  display: block;
  margin-right: auto;
  margin-left: auto;
  padding-left: 0;
  padding-right: 0;
  text-align: center;
  margin-bottom: 1.5rem;
  font-size: 3rem;
}
.headline::after {
  content: "";
  display: table;
  clear: both;
}
.headline__title, .headline__description.lg {
  margin-bottom: 0;
}
.headline--extra-margin {
  margin-bottom: 3rem;
}
.headline--white, .headline--white .headline__description {
  color: #FFFFFF;
}
.headline__title {
  color: #d19050;
}
.headline__description__white {
  color: white;
}
.card--grey {
  background-color: rgba(223, 223, 223, 0.5); /* âœ… only the background is transparent */
  border-left: 5px solid #d19050;
  border-radius: 6px;  
}
.card--xl__pop-out-story-right {
text-align: left;
width: 100%;
margin-top: 2%;
  }
  .card--xl__pop-out-story-right h2 {
    font-size: 2rem;
    font-weight: bold;
  }
.card--sidebar .card__link {
  display: block;
  margin-bottom: 1rem;
}
.card--sidebar .card__link:last-of-type {
  margin-bottom: 0;
}
.card--stat__dark-blue__headline {
  color: #9ac1cd;
  font-size: 2rem;
  font-weight: 500;
  line-height: 1.44em;
  text-transform: uppercase;
}
.card__title__white {
  color: white
}
.card__description {
  margin-bottom: 1.25rem;
}
.card__description--no-margin {
  margin: 0;
}
.card__image {
  margin-bottom: 1.5rem;
  max-width: 100%;
  height: auto;
}
.card__image--w-100 {
  width: 100%;
}
.card__image--fluid {
  object-fit: cover;
  width: 100%;
  height: 160px;
}
.card--stat .card__stat {
  color: #35363D;
  margin-bottom: 1.5rem;
  line-height: 1em;
  margin: 0;
}
.card--stat .card__title {
  font-size: 1.5rem;
  line-height: 1.25em;
  color: #8D8D99;
  margin: 0;
}
.card--result .card__stat, .card--result .card__title, .card--result .card__link {
  color: #74D9AD;
}
.card--result .card__title, .card--result .card__description {
  margin-bottom: 1.25rem;
}
.card--result .card__stat {
  line-height: 1em;
  margin-bottom: 0;
}
.card--result .card__description {
  color: white;
  font-weight:bold;
}
.card--centered {
  text-align: center;
}
.card--black-boundary {
  padding: 2rem;
  border: 8px solid #35363D;
}
.card--no-boundary {
  padding: 0;
  border: none;
}
.card--note .card__description {
  color: #000000;
  margin: 0;
}
.card--note-strong {
  padding: 2rem;
  border-color: #D2D2D9;
}
.card--note-strong .card__title, .card--note-strong .card__description {
  color: #000000;
}
.card--featured {
  text-align: center;
}

.card--featured img {
  display: inline-block;
  margin: 0 auto;
  max-width: 100%;
  height: auto;
}
.card--xl {
  text-align: left;
  padding: 25px;
}
.objects-display-grid {
  display: grid;
  grid-template-columns: repeat( auto-fit, minmax(300px, 1fr) );
  grid-template-rows: auto;
  gap: 3rem;
}
.objects-display-grid button a {
  color: #8ac5d4;
}
.image-text-block img {
  float: center;
  padding-right: 50px; /* Adjust this value as needed */
  max-width: 150px;    /* Optional: control image size */
}
.card-object {
  width: 100%;
  box-sizing: border-box;
  padding: 1.75rem 1.25rem;
  border: 4px solid #E4E4EB;
  text-align: center;
}
.card-object__image--full img {
  max-width: 100%;
}
.col-grid {
  display: grid;
  grid-template-columns: repeat( auto-fill, minmax(300px, 1fr) );
  grid-template-rows: auto;
  gap: 3rem;
}
.image-text-block p,
.image-text-block div {
  overflow: hidden; /* Helps align text nicely */
}
.content__image {
  display: flex;
  flex-direction: column;
  align-items: center; /* centers both image and button */
  gap: 0.5rem;
  margin-bottom: 1rem; /* optional spacing below */
}
.content__image img {
  border: 1px solid #ccc; /* subtle gray border */
  border-radius: 6px;      /* slightly rounded corners */
  max-width: 100%;
  height: auto;
}

/* tables */
.simple-table {
  width: 100%;
  border-collapse: collapse;
     font-family: 'Public Sans', sans-serif;
  font-size: 1.3rem;
  line-height: 1.5555555556em;
  margin: 1rem 0;
  border: 2px solid #ccc;
}

.simple-table th,
.simple-table td {
  border: 1px solid #ccc;
  padding: 0.75rem;
  text-align: left;
}
.simple-table th {
  font-size: 1.5rem;
}

.simple-table thead {
  background-color: #b5778c;
}

/* Modifier: right-side border instead of left */
.card--right {
  border-left: none !important;
  border-right: 5px solid #104f63 !important;
}.card h3 {
  margin-top: 0;
}
.card--right ul {
  text-align: right;
  list-style-position: inside;
  padding-left: 0;
}
.card--xl__content {
    width: 100%;
    margin-top: 2%;
  }
  .card--xl__content__right {
text-align: right;
width: 100%;
    margin-top: 2%;
  }
.card--xl__content {
  display: inline-block;
}
/* Purple card variant */
.card--purple {
  background-color: rgba(181, 119, 140, 0.5); /* âœ… only the background is transparent */
  border-left: 5px solid #b5778c;
  color: #000;
    border-radius: 6px;
}

/* Orange card variant */
.card--orange {
    display: inline-block; /* Shrink-wrap width */
  background-color: rgba(228, 144, 54, 0.2);
  color: #000;
  padding: 15px; /* tighten bottom padding */
  border-left: 5px solid #e49036;
  border-radius: 0.25rem;  
  width: auto !important;     /* override any forced widths */
  height: auto !important;    /* override any forced heights */
  max-width: 100%;            /* keep it responsive */
  margin: 1rem;
}
.card--orange p {
  margin-bottom: 0;
}
/* Ensure text inside these cards stays black */
.card--purple h1,
.card--purple h2,
.card--purple h3,
.card--purple p,
.card--orange h1,
.card--orange h2,
.card--orange h3,
.card--orange p {
  color: #000;
}
.icon-grid {
  display: grid;
  grid-template-columns: repeat( auto-fit, minmax(200px, 1fr) );
  /*display: flex;
  flex-wrap: wrap;*/
  gap: 1rem;
  justify-content: space-between;
  margin-top: 1rem;
}

.icon-tile {
  /*flex: 1 1 0;
  max-width: 22%;  â¬…ï¸ Ensures 4 across with spacing */
  background-color: #f0f0f0;
  color: #000;
  text-align: center;
  padding: 1.23rem;
  border-radius: 0.5rem;
  text-decoration: none;
  font-family: 'Poppins', sans-serif;
  font-size: 0.9rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: background-color 0.2s ease;
}
.icon-tile ul {
  list-style-position: inside;
  padding-left: 0;
  text-align: center;
}

.icon-tile h3 {
  padding-left: 0;
  text-align: center;
  font-size: 1.3rem;
}
.icon-tile li {
  display: list-item;
}
.icon-tile img {
  width: 2.5rem;
  height: 2.5rem;
  margin-bottom: 0.5rem;
}

.icon-tile:hover,
.icon-tile:focus {
  background-color: #e0e0e0;
  outline: 3px solid #e49036;
}

/* Banners */
.banner-center {
  position: relative; 
  text-align: center;
    font-size: 2.5rem;  /* Larger text */
  font-weight: 700;   /* Bold for readability */
  margin-bottom: 1rem;
  line-height: 1.3;
  letter-spacing: 0.5px;
  width: auto;
}
.blue__background {
  position: relative;
  display: inline-block;
  width: 30%;
  box-sizing: border-box;
  padding: 1.5rem;
  margin-top: 15rem;
  font-size: 5rem;
}
.banner__title {
  position: absolute;
  top: -20%; /* Decrease this value to move the text higher */
  left: 18%;
  transform: translateX(-50%);
  color: #104f63;
  font-size: 2rem;
  z-index: 2;
}
.section--banner {
  background-color: #104f63;
}

.banner--headers {
  color: #e49036;
}


/* Images */
img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 1rem auto;
}

/* Accessibility helpers */
[tabindex]:focus,
button:focus,
input:focus,
textarea:focus,
select:focus {
  outline: 3px solid #e49036;
  outline-offset: 2px;
}

.image-caption {
  display: inline-block;
  text-align: center;
  margin: 0;
}

.image-caption img {
  display: block;
  max-width: 100%;
  height: auto;
}

.image-caption figcaption {
  font-size: 0.875rem;
  color: #555;
  margin-top: 0.5rem;
  line-height: 1.4;
  width: 100%;
}

.image-caption a {
  font-size: 0.875rem;
  color: #555;
  margin-top: 0.5rem;
  line-height: 1.4;
}

.image-caption {
  float: right;
  margin-left: 1rem;
  margin-bottom: 1rem;
}
.image-caption.centered {
  float: right;
  margin: 1rem auto;
  display: table;
}
.content-block--margin-sm {
  margin-bottom: 1.5rem;
}
.sidebar-left-md > .sidebar, .sidebar-right-md > .sidebar {
    margin-top: 0; margin-bottom: 0;
  }
  .sidebar-left-md > .sidebar--sticky, .sidebar-right-md > .sidebar--sticky {
    position: sticky;
    top: 0;
  }
  .sidebar-left-md > .sidebar--top, .sidebar-right-md > .sidebar--top {
    margin-bottom: 0;
  }
  .sidebar-left-md > .sidebar--note, .sidebar-right-md > .sidebar--note {
    margin-top: 10%;
  }
  .sidebar-left-md > .content, .sidebar-right-md > .content {
    display: inline-block;
  }

  .sidebar-left-md > .sidebar, .sidebar-right-md > .sidebar {
    width: 24.333%;
  }
  .sidebar-left-md > .content, .sidebar-right-md > .content {
    width: 69%;
  }

  .sidebar-left-md > .sidebar {
    float: left;
    margin-right: 6.666%;
  }

  .sidebar-right-md > .sidebar {
    float: right;
  }
  .sidebar-right-md > .content {
    margin-right: 6.666%;
  }
.sidebar-left-md > .sidebar, .sidebar-right-md > .sidebar, .sidebar-left-lg > .sidebar, .sidebar-right-lg > .sidebar, .wider-sidebar-left > .sidebar, .wider-sidebar-right > .sidebar {
  margin-top: 2rem;
}
.sidebar-left-md > .sidebar--top, .sidebar-right-md > .sidebar--top, .sidebar-left-lg > .sidebar--top, .sidebar-right-lg > .sidebar--top, .wider-sidebar-left > .sidebar--top, .wider-sidebar-right > .sidebar--top {
  margin-top: 0;
  margin-bottom: 2rem;
}
.sidebar-parent {
  position: relative;
}
.sidebar {
  position: relative;
  top: 0;
  right: 0;
  width: 280px;     /* adjust however you need */
    border: 2px solid #ccc;
  padding: 15px;
  background: #fafafa; /* optional but looks clean */
  border-radius: 4px;  /* optional */
    overflow-wrap: break-word;
  word-wrap: break-word;
  box-sizing: border-box;
}
.content {
  overflow: hidden;
   margin-right: 320px;  /* clearfix or other clearing technique */
}

/* Forms */
/*form {
  max-width: 600px;
  margin: 2rem 0;
}

label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.25rem;
}

input,
textarea,
select {
  width: 100%;
  padding: 0.5rem;
  border: 1px solid #aaa;
  border-radius: 4px;
  font-size: 1rem;
}*/

input:focus,
textarea:focus,
select:focus {
  border-color: #2aa486;
}

/* Resource library */
.search {
    display: grid;
    grid-template-columns: 1fr 150px auto;
    gap: 8px;
    padding-bottom: 16px;
}
.resultbox .resource-grid {
    display: grid;
    grid-template-columns: 150px auto;
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: solid 1px #B6B6BE;
    border-radius: 0;
}
.resultbox .resource-grid.no-border {
    border-bottom: none;
}
.select--grey.multi:after {
  top: 50%;
}
.resultbox img {
  box-sizing: border-box;
  padding: 8px 16px 16px 0;
  margin: 0;
}
.object-control__content__order {
  top: 55px;
}
.resultbox .filters select, .search input {
    width: 100%;
  font-size: 1.3rem;
}
.resultbox .results a {
    position: relative;
    font-size: 125%;
}
.resultbox .results a.button {
    font-size: 75%;
}
.resultbox .results a:hover {
    text-decoration: none;
    color: #0A504C;
}
.resultbox .results a span.title {
    font-size: 110%;
    font-weight: 700;
}
.resultbox .results a span.path {
    font-size: 90%;
    color: #aaa;
    display: block;
    padding: 0 64px 0 0;
}
.resultbox .results a i.fa-2x {
    position: absolute;
    top: 10%;
    right: 8px;
    color: #DDECEF;
    font-size: 250%;
}
.resultbox .results .fullreference {
    display: none;
}
.input-container__top-label {
  color: #35363D;
  font-size: 1.3rem;
}
.chip {
  font-size: 1.3rem;
  cursor: auto;
  border-radius: 8px;
}
.chip.blue {
  background-color: #4ba5bd;
}
.chip.red {
  background-color: #b5778c;
}
.chip.orange {
  color: #fff;
  background-color: #e49036;
}
.chip.green {
  background-color: #2aa486;
}
.chip:hover {
  background-color: transparent;
    border-color: #D2D2D9;
    color: #35363D;
}


/*Logo Scrolling*/
.shell {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding: 2.5rem;
  border: 16px solid #E4E4EB;
}
.shell--black-boundary {
  padding: 3rem;
  border: none;
  overflow-x: hidden;
  background: white;
  max-height: 450px;
}
.image-gallery {
  display: inline-block;
  width: auto;
  max-width: 1440px;
  float: none;
  display: block;
  margin-right: auto;
  margin-left: auto;
  padding-left: 0;
  padding-right: 0;
}
.image-gallery::after {
  content: "";
  display: table;
  clear: both;
}
.image-gallery__item {
  float: left;
  clear: none;
  text-align: inherit;
  width: 23.125%;
  margin-left: 0%;
  margin-right: 2.5%;
  margin-bottom: 3%;
}
.image-gallery__item::after {
  content: "";
  display: table;
  clear: both;
}
.image-gallery__item:nth-child(n) {
  margin-right: 2.5%;
  float: left;
  clear: none;
}
.image-gallery__item:nth-child(4n) {
  margin-right: 0%;
  float: right;
}
.image-gallery__item:nth-child(4n+1) {
  clear: both;
}
.image-gallery__item:last-child, .image-gallery__item:nth-last-child(2), .image-gallery__item:nth-last-child(3), .image-gallery__item:nth-last-child(4) {
  margin-bottom: 0;
}

.image-gallery-grid {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 236px;
  width: max-content;
  gap: 3rem;
}

/* IMAGE GALLERY HOVER ANIMATIONS */
div.image-gallery__item {
  position: relative;
  width: 100%;
  padding-bottom: 32px;
}
div.image-gallery__item img {
  width: 100%;
  transition: all 1s;
}
div.image-gallery__item:hover img, div.image-gallery__item:focus img {
  opacity: .5;
}
div.image-gallery__item p {
  position: absolute;
  background: rgba(255,255,255,1);
  text-align: center;
  top: auto;
  left: 0;
  right: 0;
  bottom: 0;
  font-size: 1.25rem;
  margin-bottom: 0;
  padding: 8px;
  transition: all .5s;
}
div.image-gallery__item p.overlay button {
  opacity: 0;
  transition: all .5s;
}
div.image-gallery__item:hover p.overlay, div.image-gallery__item:focus p.overlay {
  background: rgba(255,255,255,.8);
  transform: translateY(-100%);
}
div.image-gallery__item:hover p.overlay button, div.image-gallery__item:focus p.overlay button {
  opacity: 1;
}
div.image-gallery__item:nth-child(n) {
  margin-right: 0;
  float: none;
}
div.image-gallery__item:nth-child(4n) {
  margin-right: 0%;
  float: none;
}


/* Responsive adjustments */
@media (max-width: 1023px) {
  .banner__title {
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    border-radius: 0;
    transform: translateX(0);
  }  
  .resultbox .resource-grid {
      grid-template-columns: 75px auto;
  }
}
@media (max-width: 768px) {
  .banner__title {
    /*top: 5%;*/
    font-size: 1.75rem;
  }
  .card-orange,
  .card-purple {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    float: none;
  }
  .sidebar {
    position: static;
    width: 100%;
    margin: 20px 0;
  }
  .sidebar-right-md > .sidebar {
    float: none;
    width: 100%;
  }

  .content, .sidebar-right-md > .content {
    width: 100%;
    margin-right: 0;
  }
}

/* Responsive Styles */
@media (max-width: 600px) {
  .responsive-table thead {
    display: none;
  }

  .responsive-table,
  .responsive-table tbody,
  .responsive-table tr,
  .responsive-table td {
    display: block;
    width: 100%;
    font-size: 1.125rem; /* Match on mobile too */
  }

  .responsive-table tr {
    margin-bottom: 1rem;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 0.5rem;
    background-color: #fafafa;
  }

  .responsive-table td {
    text-align: left;
    padding-left: 50%;
    position: relative;
    border: none;
    border-bottom: 1px solid #ddd;
  }

  .responsive-table td::before {
    content: attr(data-label);
    position: absolute;
    left: 1rem;
    width: 45%;
    white-space: nowrap;
    font-weight: bold;
    color: #444;
  }
}

@media (max-width: 480px) {
  .banner__title {
    top: 3%;
    font-size: 1.5rem;
  }
}

@media (max-width: 400px) {  
  .objects-display-grid {
    display: block;
  }
  .objects-display-grid .card-object {
    margin-bottom: 3rem;
  }
  section {
    padding: 8px;
  }
  .wrapper--extra-padding {
    padding: 2rem 16px;
  }
  .card--stat__dark-blue__headline {
    font-size: 1.5rem;
  }
  .card--xl {
    padding: 8px;
  }
  .card--xl__pop-out-story-right p {
    font-size: 1rem;
  }
  .content-block ul {
    padding-left: 2em;
  }
}

@media (max-width: 300px) {  
  .col-grid {
    display: block;
  }
}