@charset "utf-8";
/* --------------------------------------------------------------------------
   METKO - fixes.css
   Loaded LAST, after every original stylesheet. Nothing in the original
   theme files was modified, so this file can be removed to go back to the
   previous rendering.

   It covers three things:
     1. gallery layout that Isotope used to do in JavaScript
     2. <picture> wrappers around responsive images
     3. replacements for the obsolete <font color="..."> tags
   -------------------------------------------------------------------------- */


/* 1. Gallery -------------------------------------------------------------- */
/* Isotope was never loaded on this page, so .masonry .item (a fixed-width
   block element) stacked in a single column. Flexbox gives the intended
   grid with no JavaScript at all. */

.masonry {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 20px;
}

/* .item-detail is position:absolute but .item had no positioning context -
   Isotope used to supply it. */
.masonry .item {
  position: relative;
}

.masonry .item .item-detail {
  width: 100%;
  height: 100%;
  overflow: auto;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
}

/* The open overlay must sit above its neighbours. */
.masonry .item.open {
  z-index: 30;
}


/* 2. Responsive images ---------------------------------------------------- */
/* <picture> is display:inline by default, which breaks the width:100% the
   theme applies to gallery images. */

picture {
  display: block;
}

img {
  max-width: 100%;
  height: auto;
}

/* Keep the slider images behaving as before - superslides sizes them itself. */
#slides .slides-container img {
  max-width: none;
}


/* 3. RAL colour chart ----------------------------------------------------- */
/* Replaces the broken markup that put eight 826px charts inside a
   .span11 .offset2 with unclosed tags. */

.ral-chart {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  margin-bottom: 50px;
}

.ral-chart a {
  display: block;
  flex: 0 1 380px;
  max-width: 380px;
}

.ral-chart img {
  width: 100%;
  border-radius: 3px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}


/* 4. Text colour helpers -------------------------------------------------- */
/* <font color="white"> / <font color="black"> were unclosed and are not
   valid HTML5. Same visual result, valid markup. */

.txt-light {
  color: #FFF;
}

.txt-dark {
  color: #333;
}

address a {
  text-decoration: underline;
}


/* 5. Accessibility -------------------------------------------------------- */
/* Icon-only navigation gets a visible focus ring for keyboard users. */

.switch-section-cont a:focus,
.section-close:focus,
.slides-navigation a:focus {
  outline: 2px solid #FFF;
  outline-offset: 2px;
}

/* Respect the OS "reduce motion" setting. */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}