@charset "UTF-8";
/* Global Settings
-------------------------------------------------------------------------------
*/
/* Global Variables
===========================================================
*/
/* Color Settings
-----------------------------------------------------------
*/
/* Font Settings
-----------------------------------------------------------
*/
/* Cursor Effects
-----------------------------------------------------------
*/
/* Layout Styles
===============================================================================
*/
/* Layout Variables
-------------------------------------------------------------------------------
*/
/* Layout Functions
-------------------------------------------------------------------------------
*/
/* Layout Mixins
-------------------------------------------------------------------------------
*/
/* Base
-------------------------------------------------------------------------------
*/
/*! normalize.css v4.0.0 | MIT License | github.com/necolas/normalize.css */
/**
 * 1. Change the default font family in all browsers (opinionated).
 * 2. Prevent adjustments of font size after orientation changes in IE and iOS.
 */
html {
  font-family: sans-serif; /* 1 */
  -ms-text-size-adjust: 100%; /* 2 */
  -webkit-text-size-adjust: 100%; /* 2 */
  -webkit-font-smoothing: antialiased;
}

/**
 * Remove the margin in all browsers (opinionated).
 */
body {
  margin: 0;
}

/* HTML5 display definitions
   ========================================================================== */
/**
 * Add the correct display in IE 9-.
 * 1. Add the correct display in Edge, IE, and Firefox.
 * 2. Add the correct display in IE.
 */
article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
menu,
nav,
section,
summary { /* 1 */
  display: block;
}

/**
 * Add the correct display in IE 9-.
 */
audio,
canvas,
progress,
video {
  display: inline-block;
}

/**
 * Add the correct display in iOS 4-7.
 */
audio:not([controls]) {
  display: none;
  height: 0;
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
  vertical-align: baseline;
}

/**
 * Add the correct display in IE 10-.
 * 1. Add the correct display in IE.
 */
template,
[hidden] {
  display: none;
}

/* Links
   ========================================================================== */
/**
 * Remove the gray background on active links in IE 10.
 */
a {
  background-color: transparent;
}

/**
 * Remove the outline on focused links when they are also active or hovered
 * in all browsers (opinionated).
 */
a:active,
a:hover {
  outline-width: 0;
}

/* Text-level semantics
   ========================================================================== */
/**
 * 1. Remove the bottom border in Firefox 39-.
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  text-decoration: underline dotted; /* 2 */
}

/**
 * Prevent the duplicate application of `bolder` by the next rule in Safari 6.
 */
b,
strong {
  font-weight: inherit;
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
  font-weight: bolder;
}

/**
 * Add the correct font style in Android 4.3-.
 */
dfn {
  font-style: italic;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/**
 * Add the correct background and color in IE 9-.
 */
mark {
  background-color: #ff0;
  color: #000;
}

/**
 * Add the correct font size in all browsers.
 */
small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content
   ========================================================================== */
/**
 * Remove the border on images inside links in IE 10-.
 */
img {
  border-style: none;
  max-width: 100%;
  height: auto;
}

/**
 * Hide the overflow in IE.
 */
svg:not(:root) {
  overflow: hidden;
}

/* Grouping content
   ========================================================================== */
/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
pre,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
 * Add the correct margin in IE 8.
 */
figure {
  margin: 1em 40px;
}

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
}

/* Forms
   ========================================================================== */
/**
 * Change font properties to `inherit` in all browsers (opinionated).
 */
button,
input,
select,
textarea {
  font: inherit;
}

/**
 * Restore the font weight unset by the previous rule.
 */
optgroup {
  font-weight: bold;
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 * 2. Show the overflow in Edge, Firefox, and IE.
 */
button,
input,
select { /* 2 */
  overflow: visible;
}

/**
 * Remove the margin in Safari.
 * 1. Remove the margin in Firefox and Safari.
 */
button,
input,
select,
textarea { /* 1 */
  margin: 0;
}

/**
 * Remove the inheritence of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritence of text transform in Firefox.
 */
button,
select { /* 1 */
  text-transform: none;
}

/**
 * Change the cursor in all browsers (opinionated).
 */
button,
[type=button],
[type=reset],
[type=submit] {
  cursor: pointer;
}

/**
 * Restore the default cursor to disabled elements unset by the previous rule.
 */
[disabled] {
  cursor: default;
}

/**
 * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
 *    controls in Android 4.
 * 2. Correct the inability to style clickable types in iOS.
 */
button,
html [type=button],
[type=reset],
[type=submit] {
  -webkit-appearance: button; /* 2 */
}

/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
input:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Change the border, margin, and padding in all browsers (opinionated).
 */
fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */
legend {
  box-sizing: border-box; /* 1 */
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  padding: 0; /* 3 */
  white-space: normal; /* 1 */
}

/**
 * Remove the default vertical scrollbar in IE.
 */
textarea {
  overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10-.
 * 2. Remove the padding in IE 10-.
 */
[type=checkbox],
[type=radio] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * Correct the odd appearance of search inputs in Chrome and Safari.
 */
[type=search] {
  -webkit-appearance: textfield;
}

/**
 * Remove the inner padding and cancel buttons in Chrome on OS X and
 * Safari on OS X.
 */
[type=search]::-webkit-search-cancel-button,
[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/* Noselect
===========================================================
*/
.noselect {
  user-select: none;
}

/* CSS Triangle
===========================================================
*/
/* Color function
===========================================================
*/
/* Color Classes
===========================================================
*/
*.white {
  color: rgb(255, 255, 255) !important;
}

*.black, .black-dot {
  color: rgb(0, 0, 0) !important;
}

*.dark-gray {
  color: rgb(119, 120, 123) !important;
}

*.medium-gray {
  color: rgb(177, 179, 182) !important;
}

*.light-gray {
  color: rgb(239, 240, 240) !important;
}

*.green {
  color: rgb(0, 166, 104) !important;
}

*.blue {
  color: rgb(0, 179, 227) !important;
}

*.red {
  color: rgb(255, 89, 89) !important;
}

/* Background Color Classes
===========================================================
*/
.inverse-background {
  color: rgb(255, 255, 255);
  background-color: rgb(0, 0, 0);
}

.gray-background {
  background-color: rgb(239, 240, 240);
}

.green-background {
  color: rgb(255, 255, 255);
  background-color: rgb(0, 166, 104);
}

.blue-background {
  color: rgb(255, 255, 255);
  background-color: rgb(0, 179, 227);
}

.red-background {
  color: rgb(255, 255, 255);
  background-color: rgb(255, 89, 89);
}

/* Breakpoint function
===========================================================
*/
/* Breakpoint hider classes
===========================================================
Add one of these classes to hide something under a certain breakpoint
eg: <div class="grid__item hide-under-bp-large"></div>
*/
@media (max-width: 30rem) {
  .hide-under-bp-small {
    display: none;
  }
}
@media (max-width: 40rem) {
  .hide-under-bp-medium {
    display: none;
  }
}
@media (max-width: 64rem) {
  .hide-under-bp-large {
    display: none;
  }
}
@media (max-width: 1500px) {
  .hide-under-bp-postit-large {
    display: none;
  }
}
@media (max-width: 75rem) {
  .hide-under-bp-xlarge {
    display: none;
  }
}
@media (max-width: 90rem) {
  .hide-under-bp-xxlarge {
    display: none;
  }
}
/* Alignment classes
-----------------------------------------------------------
*/
.right {
  text-align: right;
}

.left {
  text-align: left;
}

.center {
  text-align: center;
}

.bottom {
  margin-top: auto;
}

.hide-text {
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}

/* Split Section
-----------------------------------------------------------
*/
.split-section {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding-bottom: 1.5rem;
}
.split-section > * {
  margin: 0;
}

/* Block Padding
-----------------------------------------------------------
*/
.top-padding {
  margin-top: 4rem;
}
@media (min-width: 40rem) {
  .top-padding {
    margin-top: 5.8rem;
  }
}

.bottom-padding {
  margin-bottom: 4rem;
}
@media (min-width: 40rem) {
  .bottom-padding {
    margin-bottom: 5.8rem;
  }
}

/* Flush top
/ No top spacing for first item
===========================================================
*/
/* Paragraph spacer classes
-----------------------------------------------------------
These classes replace margins from class above on the element following the spacer

Used in spacer paragraph.

    <div class="paragraph-spacer-5">
    ... gets a height of 5rem
    </div>
    <div class="image-block">
    ... looses its default top margin
    </div>

*/
@media (min-width: 800px) {
  .paragraph-spacer-0 {
    height: 0rem;
    margin-top: -1px !important;
  }
  .paragraph-spacer-0 + * {
    margin-top: -1px !important;
  }
}

@media (min-width: 800px) {
  .paragraph-spacer-1 {
    height: 1rem;
    margin-top: -1px !important;
  }
  .paragraph-spacer-1 + * {
    margin-top: -1px !important;
  }
}

@media (min-width: 800px) {
  .paragraph-spacer-2 {
    height: 2rem;
    margin-top: -1px !important;
  }
  .paragraph-spacer-2 + * {
    margin-top: -1px !important;
  }
}

@media (min-width: 800px) {
  .paragraph-spacer-3 {
    height: 3rem;
    margin-top: -1px !important;
  }
  .paragraph-spacer-3 + * {
    margin-top: -1px !important;
  }
}

@media (min-width: 800px) {
  .paragraph-spacer-4 {
    height: 4rem;
    margin-top: -1px !important;
  }
  .paragraph-spacer-4 + * {
    margin-top: -1px !important;
  }
}

@media (min-width: 800px) {
  .paragraph-spacer-5 {
    height: 5rem;
    margin-top: -1px !important;
  }
  .paragraph-spacer-5 + * {
    margin-top: -1px !important;
  }
}

@media (min-width: 800px) {
  .paragraph-spacer-10 {
    height: 10rem;
    margin-top: -1px !important;
  }
  .paragraph-spacer-10 + * {
    margin-top: -1px !important;
  }
}

@media (min-width: 800px) {
  .paragraph-spacer-6 {
    height: 6rem;
    margin-top: -1px !important;
  }
  .paragraph-spacer-6 + * {
    margin-top: -1px !important;
  }
}

@media (min-width: 800px) {
  .paragraph-spacer-7 {
    height: 7rem;
    margin-top: -1px !important;
  }
  .paragraph-spacer-7 + * {
    margin-top: -1px !important;
  }
}

@media (min-width: 800px) {
  .paragraph-spacer-8 {
    height: 8rem;
    margin-top: -1px !important;
  }
  .paragraph-spacer-8 + * {
    margin-top: -1px !important;
  }
}

@media (min-width: 800px) {
  .paragraph-spacer-9 {
    height: 9rem;
    margin-top: -1px !important;
  }
  .paragraph-spacer-9 + * {
    margin-top: -1px !important;
  }
}

@media (min-width: 800px) {
  .paragraph-spacer-10 {
    height: 10rem;
    margin-top: -1px !important;
  }
  .paragraph-spacer-10 + * {
    margin-top: -1px !important;
  }
}

@media (min-width: 800px) {
  .paragraph-spacer-11 {
    height: 11rem;
    margin-top: -1px !important;
  }
  .paragraph-spacer-11 + * {
    margin-top: -1px !important;
  }
}

@media (min-width: 800px) {
  .paragraph-spacer-12 {
    height: 12rem;
    margin-top: -1px !important;
  }
  .paragraph-spacer-12 + * {
    margin-top: -1px !important;
  }
}

@media (min-width: 800px) {
  .paragraph-spacer-13 {
    height: 13rem;
    margin-top: -1px !important;
  }
  .paragraph-spacer-13 + * {
    margin-top: -1px !important;
  }
}

@media (min-width: 800px) {
  .paragraph-spacer-14 {
    height: 14rem;
    margin-top: -1px !important;
  }
  .paragraph-spacer-14 + * {
    margin-top: -1px !important;
  }
}

@media (min-width: 800px) {
  .paragraph-spacer-15 {
    height: 15rem;
    margin-top: -1px !important;
  }
  .paragraph-spacer-15 + * {
    margin-top: -1px !important;
  }
}

.separator_light {
  border-top: 1px solid rgb(177, 179, 182);
}
.separator_dark {
  border-top: 1px solid rgb(0, 0, 0);
}

/* Link Style
  -----------------------------------------------------------
  */
.field-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.field-link a {
  transition: color 0.2s ease-out;
  text-decoration: underline;
  text-underline-offset: 1px;
}
.field-link:hover a {
  color: rgb(177, 179, 182);
  text-decoration: none;
}
.field-link:hover .icon-arrow path {
  fill: rgb(119, 120, 123);
}
.field-link__narrarative .link {
  margin-bottom: 1rem;
}

/* Arrow icons
  -----------------------------------------------------------
  */
.icon-arrow {
  height: 20px;
  width: 20px;
}
.icon-arrow path {
  fill: rgb(0, 209, 121);
}

.arrow-130 .icon-arrow {
  transform: rotate(-45deg);
}
.arrow-430 .icon-arrow {
  transform: rotate(45deg);
}
.arrow-6 .icon-arrow {
  transform: rotate(90deg);
}
.arrow-730 .icon-arrow {
  transform: rotate(135deg);
}
.arrow-9 .icon-arrow {
  transform: rotate(180deg);
}
.arrow-1030 .icon-arrow {
  transform: rotate(225deg);
}
.arrow-12 .icon-arrow {
  transform: rotate(-90deg);
}
.arrow-plain {
  display: flex;
  align-items: center;
}
.arrow-plain svg path.icon-arrow_circle {
  fill: transparent;
}
.arrow-plain svg path.icon-arrow_arrow {
  fill: rgb(0, 0, 0);
}

.slider-arrow {
  fill: rgb(0, 0, 0);
}

.leading-arrow {
  background-image: url(/themes/butaro/images/facet-arrow.svg);
  background-repeat: no-repeat;
  background-position: 0 0.2lh;
  background-size: 19px;
  padding-left: 30px;
}
.leading-arrow.h3 {
  background-position-y: 0.3lh;
}
.leading-arrow.green {
  background-image: url(/themes/butaro/images/arrow.svg);
}

/* Big Dots
-----------------------------------------------------------
*/
.black-dot::after {
  content: "●";
  font-size: 0.8rem;
  vertical-align: middle;
  padding: 0 0 5px 5px;
}

/* Dotted label
-----------------------------------------------------------
*/
/* Full Width
-----------------------------------------------------------
*/
.full-width {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw !important;
  margin-right: -50vw !important;
  max-height: inherit;
  overflow: hidden;
}

/* Flexbox clear row
===========================================================
This forces the next flexbox item to a new row
    <div class="flexbox-container">
    <div class="flexbox-item"></div>
    <div class="flexbox-item"></div>
    <div class="break-column"></div>
    <div class="flexbox-item"></div> <!-- hey this one is on a new row -->
</div>
*/
.break-column {
  flex-basis: 100%;
  width: 0;
}

/* Brighten (formerly: Darken)
===========================================================
This creates a full width screen white-out for an overlay
container

Use class .is-active on container  itself.
Use .active if overlay is inside container
*/
.overlay-background_light {
  max-width: 100vw;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 0;
  display: block;
  z-index: 99;
  overflow: scroll;
}
.overlay-background_light.is-active, .active .overlay-background_light {
  height: 100vh;
  background-color: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  transition: height 0ms 0ms, background-color 400ms 1ms ease-in, backdrop-filter 400ms 1ms ease-in;
}
@media (min-width: 64rem) {
  .overlay-background_light.is-active, .active .overlay-background_light {
    overflow: hidden;
  }
}
.overlay-background_dark {
  max-width: 100vw;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 0;
  display: block;
  z-index: 99;
  overflow: scroll;
  color: rgb(239, 240, 240) !important;
}
.overlay-background_dark.is-active, .active .overlay-background_dark {
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  transition: height 0ms 0ms, background-color 400ms 1ms ease-in, backdrop-filter 400ms 1ms ease-in;
}
@media (min-width: 64rem) {
  .overlay-background_dark.is-active, .active .overlay-background_dark {
    overflow: hidden;
  }
}

body:has(.overlay-background, .overlay-background_dark, .overlay-background_light) {
  height: 100vh;
  overflow: hidden;
}

.modal-open {
  height: 100vh;
  overflow: hidden;
}

/* Width fixer
===========================================================
*/
/* MASSive Dot
===========================================================
*/
.MASSive-dot {
  text-decoration: none !important;
  break-inside: avoid;
  white-space: nowrap;
}
.MASSive-dot::before {
  content: "";
  height: 0.75em;
  aspect-ratio: 1;
  border-radius: 50%;
  background-color: black;
  display: inline-block;
  margin-right: 0.2em;
}

/* Inline Fields

used in Project details
===========================================================
*/
.inline-fields {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}
.inline-fields div {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.inline-fields div:not(:last-child) ::after {
  content: ", ";
  margin-right: 0.5ch;
}

/* Centered large play button

Apply to a container in which the svg is located
The parent container must be position:relative
===========================================================
*/
/* Focus tricker

Steals the focus without highlighting anything.

Used to stop unwanted highlighting first link in htmx modals.

<a class="focustricker" autofocus="true"  tabindex="-1"/>focusme!</a>
===========================================================
*/
.focustricker {
  font-size: 0.001px;
  color: transparent;
}
.focustricker:focus {
  outline: 0;
}

/* Typography
===========================================================
Text styles for headings, paragraphs, quotes, etc.
*/
/* Document
-----------------------------------------------------------
*/
html {
  font-size: 16px;
  font-family: "Graphik", Inter, Roboto, "Helvetica Neue", "Arial Nova", "Nimbus Sans", Arial, sans-serif;
}

body {
  font-weight: 400;
  line-height: 1.25;
}

/* Text Selection Defaults
-----------------------------------------------------------
*/
::selection,
::-moz-selection {
  background: rgb(250, 214, 50);
}

/* Custom Fonts
-----------------------------------------------------------
Sans-serif:

<p class="sans">...</p>

Slab (no longer used):

<p class="slab">...</p>
*/
.fonts-loaded *.sans,
.fonts-loaded [class*=h].sans {
  font-family: "Graphik";
}

/* Headings
-----------------------------------------------------------
Format as mixins in case the styles need to be applied to
other elements.

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>

*/
h1,
h2,
h3,
h4,
h5,
*.h1,
*.h2,
.search-page.facets-top .views-exposed-form .form-item-search input,
*.h3,
*.h4,
.caption-title,
.caption,
figure figcaption,
*.h5 {
  font-weight: 500;
}
h1.title,
h2.title,
h3.title,
h4.title,
h5.title,
*.h1.title,
*.h2.title,
.search-page.facets-top .views-exposed-form .form-item-search input.title,
*.h3.title,
*.h4.title,
*.title.caption-title,
*.title.caption,
figure figcaption.title,
*.h5.title {
  font-weight: 600;
}
.teaser h1,
.teaser h2,
.teaser h3,
.teaser h4,
.teaser h5,
.teaser *.h1,
.teaser *.h2,
.teaser .search-page.facets-top .views-exposed-form .form-item-search input,
.search-page.facets-top .views-exposed-form .form-item-search .teaser input,
.teaser *.h3,
.teaser *.h4,
.teaser .caption-title,
.teaser .caption,
.teaser figure figcaption,
figure .teaser figcaption,
.teaser *.h5 {
  font-weight: 600;
}

.fonts-loaded h1,
.fonts-loaded h2,
.fonts-loaded h3,
.fonts-loaded h4,
.fonts-loaded h5,
.fonts-loaded *.h1,
.fonts-loaded *.h2,
.fonts-loaded .search-page.facets-top .views-exposed-form .form-item-search input,
.search-page.facets-top .views-exposed-form .form-item-search .fonts-loaded input,
.fonts-loaded *.h3,
.fonts-loaded *.h4,
.fonts-loaded .caption-title,
.fonts-loaded .caption,
.fonts-loaded figure figcaption,
figure .fonts-loaded figcaption,
.fonts-loaded *.h5 {
  font-family: "Graphik";
}

.h1,
h1 {
  font-size: 1.75rem;
  line-height: 1.15;
}
@media (min-width: 51rem) {
  .h1,
  h1 {
    font-size: 2.875rem;
  }
}
@media (min-width: 125rem) {
  .h1,
  h1 {
    font-size: 3.8rem;
  }
}
.h1.light,
h1.light {
  font-size: 1.6875rem;
}
@media (min-width: 51rem) {
  .h1.light,
  h1.light {
    font-size: 2.6875rem;
  }
}
@media (min-width: 125rem) {
  .h1.light,
  h1.light {
    font-size: 3.75rem;
  }
}

.h2, .search-page.facets-top .views-exposed-form .form-item-search input,
h2 {
  font-size: 1.375rem;
}
@media (min-width: 51rem) {
  .h2, .search-page.facets-top .views-exposed-form .form-item-search input,
  h2 {
    font-size: 1.875rem;
  }
}
@media (min-width: 125rem) {
  .h2, .search-page.facets-top .views-exposed-form .form-item-search input,
  h2 {
    font-size: 2.25rem;
  }
}

.paragraphs h1 {
  font-weight: 600;
}

.h3,
h3 {
  font-size: 15px;
  line-height: 1.2;
}
@media (min-width: 51rem) {
  .h3,
  h3 {
    font-size: 1.375rem;
  }
}
@media (min-width: 125rem) {
  .h3,
  h3 {
    font-size: 1.75rem;
  }
}

.h4, .caption-title, .caption, figure figcaption,
h4 {
  font-size: 0.5625rem;
}
@media (min-width: 51rem) {
  .h4, .caption-title, .caption, figure figcaption,
  h4 {
    font-size: 0.875rem;
  }
}
@media (min-width: 125rem) {
  .h4, .caption-title, .caption, figure figcaption,
  h4 {
    font-size: 1rem;
  }
}

.h5,
h5 {
  font-size: 0.5rem;
}
@media (min-width: 51rem) {
  .h5,
  h5 {
    font-size: 0.5625rem;
  }
}
@media (min-width: 125rem) {
  .h5,
  h5 {
    font-size: 0.65rem;
  }
}

.h7 {
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1rem;
}
@media (min-width: 51rem) {
  .h7 {
    font-size: 1rem;
    line-height: 1.5rem;
  }
}

/* No Margin
-----------------------------------------------------------
<h4 class="no-margin">
...
</h4>
*/
.no-margin {
  margin: 0;
}

/* Size Classes
-----------------------------------------------------------
Small text

<div class="small">
...
</div>
*/
small,
.small {
  font-size: 0.5625rem;
}
@media (min-width: 51rem) {
  small,
  .small {
    font-size: 0.875rem;
  }
}
@media (min-width: 125rem) {
  small,
  .small {
    font-size: 1rem;
  }
}

.normal, .team-view .grid-quarters .grid__item .person-name,
.team-view .grid-quarters .grid__item .person-title,
.team-view.grid-quarters .grid__item .person-name,
.team-view.grid-quarters .grid__item .person-title,
.board-view.grid-quarters .grid__item .person-name,
.board-view.grid-quarters .grid__item .person-title,
.person-grid.grid-quarters .grid__item .person-name,
.person-grid.grid-quarters .grid__item .person-title, .teaser .title, .inline-fields {
  font-size: 1rem;
}

.medium {
  font-size: 15px;
  line-height: 1.2;
}
@media (min-width: 51rem) {
  .medium {
    font-size: 1.375rem;
  }
}
@media (min-width: 125rem) {
  .medium {
    font-size: 1.75rem;
  }
}

.large {
  font-size: 1.375rem;
}
@media (min-width: 51rem) {
  .large {
    font-size: 1.875rem;
  }
}
@media (min-width: 125rem) {
  .large {
    font-size: 2.25rem;
  }
}

.extra-large {
  font-size: 1.75rem;
  line-height: 1.15;
}
@media (min-width: 51rem) {
  .extra-large {
    font-size: 2.875rem;
  }
}
@media (min-width: 125rem) {
  .extra-large {
    font-size: 3.8rem;
  }
}
.extra-large.light {
  font-size: 1.6875rem;
}
@media (min-width: 51rem) {
  .extra-large.light {
    font-size: 2.6875rem;
  }
}
@media (min-width: 125rem) {
  .extra-large.light {
    font-size: 3.75rem;
  }
}

/* Weight Classes
-----------------------------------------------------------
Light text

<h2 class="light">
...
</h2>
*/
.extra-light {
  font-weight: 200;
}

.light {
  font-weight: 300;
}

.heavy, .nav a,
.nav li > span, .page a.postit-text,
.postit-text,
strong {
  font-weight: 600;
}

.extra-heavy {
  font-weight: 900;
}

/* Paragraph
-----------------------------------------------------------

<p>A paragraph (from the Greek paragraphos, “to write
beside” or “written beside”) is a self-contained unit
of a discourse in writing dealing with a particular
point or idea. A paragraph consists of one or more
sentences. Though not required by the syntax of any
language, paragraphs are usually an expected part of
formal writing, used to organize longer prose.</p>
*/
:not(.caption):not(.postit-text) > p {
  font-size: 15px;
  line-height: 1.2;
  margin-bottom: 0.75em;
  padding-top: 0.45em;
  padding-bottom: 0.3em;
  overflow-wrap: break-word;
  font-weight: 500;
}
@media (min-width: 51rem) {
  :not(.caption):not(.postit-text) > p {
    font-size: 1.375rem;
  }
}
@media (min-width: 125rem) {
  :not(.caption):not(.postit-text) > p {
    font-size: 1.75rem;
  }
}

.paragraphs :not(.caption):not(.postit-text):not(.bef-links) > ul,
.paragraphs :not(.caption):not(.postit-text):not(.bef-links) > ol {
  font-size: 15px;
  line-height: 1.2;
}
@media (min-width: 51rem) {
  .paragraphs :not(.caption):not(.postit-text):not(.bef-links) > ul,
  .paragraphs :not(.caption):not(.postit-text):not(.bef-links) > ol {
    font-size: 1.375rem;
  }
}
@media (min-width: 125rem) {
  .paragraphs :not(.caption):not(.postit-text):not(.bef-links) > ul,
  .paragraphs :not(.caption):not(.postit-text):not(.bef-links) > ol {
    font-size: 1.75rem;
  }
}

/* Links
-----------------------------------------------------------

<a href="http://mass-group.org">MASS</a>
*/
a {
  text-decoration: none;
  color: currentColor;
}

.page a {
  position: relative;
  color: currentColor;
  text-decoration: underline;
}
.page a.btn {
  display: block;
  text-decoration: none;
}
.page p a {
  text-decoration: underline;
}

.grid__item > a,
[class*=column_] > a,
[class*=flow_] > a,
.media > a {
  text-decoration: none;
}
.grid__item > a:hover,
[class*=column_] > a:hover,
[class*=flow_] > a:hover,
.media > a:hover {
  background-color: transparent;
}

/* Lists
-----------------------------------------------------------

<ul>
  <li> List item </li>
  <li> List item </li>
  <li> List item </li>
  <li> List item </li>
</ul>
*/
.paragraphs :not(.bef-links) ul li {
  padding-block: 0.5rem;
}
.paragraphs :not(.bef-links) ul li > p {
  margin-block: 0 !important;
  padding-block: 0 !important;
}

/* Citation, Variable, Address, Definiton
-----------------------------------------------------------
Citation:

<cite>...</cite>

Variable:

<var>...</var>

Address:

<address>...</address>

Definiton:

<dfn>...</dfn>
*/
cite,
var,
address,
dfn {
  font-style: normal;
}

/* Citation, Variable, Address, Definiton
-----------------------------------------------------------

<blockquote>
...
</blockquote>
*/
blockquote {
  margin-top: 0;
  margin-bottom: 0.75em;
  margin-left: 1.5em;
  margin-right: 1.5em;
  padding-top: 0;
  padding-bottom: 0;
  font-weight: 700;
}
blockquote cite {
  display: block;
  margin-top: 0;
  margin-bottom: 0.75em;
  padding-top: 0.45em;
  padding-bottom: 0.3em;
  font-size: 1em;
  line-height: 1.5;
  font-weight: 400;
}

/* Quote
-----------------------------------------------------------

<q>
...
</q>
*/
q::before {
  content: "“";
  float: left;
}
q::after {
  content: "”";
}

/* Hanging Quotes
-----------------------------------------------------------

<q class="hang">
...
</q>
*/
q.hang::before {
  margin-left: -0.5em;
}

/* Unstyled List
-----------------------------------------------------------

<ul class="list-unstyled">
...
</ul>
*/
.list-unstyled {
  list-style: none;
}

/* Compact List
-----------------------------------------------------------

<ul class="list-compact">
...
</ul>
*/
.list-compact {
  padding-left: 0;
  list-style: none;
}

/* Inline List
-----------------------------------------------------------

<ul class="list-inline">
...
</ul>
*/
.list-inline {
  padding-left: 0;
  list-style: none;
}
.list-inline li {
  display: inline;
}

/* List Grid
-----------------------------------------------------------


<ul class="list-grid">
...
</ul>
*/
.list-grid {
  padding-left: 0;
  list-style: none;
}
.list-grid li {
  display: block;
  margin-bottom: 1.25rem;
}
@media (min-width: 51rem) {
  .list-grid li {
    margin-bottom: 1.5rem;
  }
}
.list-grid a:hover {
  background: transparent;
}
.list-grid a::after {
  border-bottom: 0;
}

.list-grid-more {
  margin-top: -1em;
  margin-bottom: 1em;
}

/* Horizontal Rule
-----------------------------------------------------------

<hr>
*/
hr {
  margin-top: 0.7em;
  margin-bottom: 0.75em;
  border: 0;
  height: 0;
  border-bottom: 1px solid rgb(177, 179, 182);
}

hr.dark {
  border-color: rgb(0, 0, 0);
}

hr.heading {
  margin-bottom: 1.5em;
}

.heading--block {
  margin-top: 0.5em;
}

/* Views Headers
-----------------------------------------------------------
*/
.view-header, .grid-team-page-header p {
  font-size: 1.375rem;
}
@media (min-width: 51rem) {
  .view-header, .grid-team-page-header p {
    font-size: 1.875rem;
  }
}
@media (min-width: 125rem) {
  .view-header, .grid-team-page-header p {
    font-size: 2.25rem;
  }
}
@media (max-width: 51rem) {
  .view-header, .grid-team-page-header p {
    font-size: 1.5rem;
  }
}

.gray-label {
  font-size: 0.5rem;
  margin-bottom: 0;
  color: rgb(119, 120, 123);
  text-transform: uppercase;
}
@media (min-width: 51rem) {
  .gray-label {
    font-size: 0.5625rem;
  }
}
@media (min-width: 125rem) {
  .gray-label {
    font-size: 0.65rem;
  }
}

/* Base Fonts
===========================================================
You may want to use Google Fontloader or another method 
to improve performance and mitigate FOUT. 
*/
@font-face {
  font-family: "Graphik";
  src: url("../fonts/Graphik-Extralight-Web.eot");
  src: url("../fonts/Graphik-Extralight-Web.eot") format("embedded-opentype"), url("../fonts/Graphik-Extralight-Web.woff") format("woff"), url("../fonts/Graphik-Extralight-Web.ttf") format("truetype"), url("../fonts/Graphik-Extralight-Web.svg") format("svg");
  font-weight: 200;
  font-style: normal;
}
@font-face {
  font-family: "Graphik";
  src: url("../fonts/Graphik-Regular-Web.eot");
  src: url("../fonts/Graphik-Regular-Web.eot") format("embedded-opentype"), url("../fonts/Graphik-Regular-Web.woff") format("woff"), url("../fonts/Graphik-Regular-Web.ttf") format("truetype"), url("../fonts/Graphik-Regular-Web.svg") format("svg");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "Graphik";
  src: url("../fonts/Graphik-RegularItalic-Web.eot");
  src: url("../fonts/Graphik-RegularItalic-Web.eot") format("embedded-opentype"), url("../fonts/Graphik-RegularItalic-Web.woff") format("woff"), url("../fonts/Graphik-RegularItalic-Web.ttf") format("truetype"), url("../fonts/Graphik-RegularItalic-Web.svg") format("svg");
  font-weight: 400;
  font-style: italic;
}
@font-face {
  font-family: "Graphik";
  src: url("../fonts/Graphik-Medium-Web.eot");
  src: url("../fonts/Graphik-Medium-Web.eot") format("embedded-opentype"), url("../fonts/Graphik-Medium-Web.woff") format("woff"), url("../fonts/Graphik-Medium-Web.ttf") format("truetype"), url("../fonts/Graphik-Medium-Web.svg") format("svg");
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: "Graphik";
  src: url("../fonts/Graphik-MediumItalic-Web.eot");
  src: url("../fonts/Graphik-MediumItalic-Web.eot") format("embedded-opentype"), url("../fonts/Graphik-MediumItalic-Web.woff") format("woff"), url("../fonts/Graphik-MediumItalic-Web.ttf") format("truetype"), url("../fonts/Graphik-MediumItalic-Web.svg") format("svg");
  font-weight: 700;
  font-style: italic;
}
/* Layout
-------------------------------------------------------------------------------
*/
/* Full-Bleed Wrapper
-------------------------------------------------------------------------------
Use to create a full-bleed background behind a layout:

    <div class="wrapper">
        <div class="layout">
            ...
        </div>
    </div>
*/
.layout, .secondary-nav {
  margin-inline: auto;
  margin-bottom: 0.625rem;
  box-sizing: border-box;
  padding: 1rem;
  padding-top: 0;
  max-width: 135rem;
  overflow-wrap: anywhere;
}
@media (min-width: 40rem) {
  .layout, .secondary-nav {
    margin-bottom: 2%;
    padding: 0 3.5rem;
  }
}

main.page > .layout, main.page > .secondary-nav {
  margin-bottom: 0;
  padding-bottom: 0;
}

.page-footer {
  padding-top: 2rem;
}
@media (min-width: 40rem) {
  .page-footer {
    padding-top: 5rem;
  }
}

[class*=wrapper] > .layout:last-child, [class*=wrapper] > .secondary-nav:last-child {
  margin-bottom: 0;
}

.wrapper-inverse {
  color: rgb(255, 255, 255);
  background-color: rgb(0, 0, 0);
}
.wrapper-inverse * {
  color: inherit;
}

.wrapper-green {
  color: rgb(255, 255, 255);
  background-color: rgb(0, 166, 104);
}
.wrapper-green * {
  color: inherit;
}

.wrapper-gray {
  background-color: rgb(239, 240, 240);
}

.wrapper-red {
  color: rgb(255, 255, 255);
  background-color: rgb(255, 89, 89);
}
.wrapper-red * {
  color: inherit;
}

.wrapper-blue {
  color: rgb(255, 255, 255);
  background-color: rgb(0, 179, 227);
}
.wrapper-blue * {
  color: inherit;
}

.unpublished {
  background: linear-gradient(mistyrose 0 105px, transparent 130px), linear-gradient(to top, mistyrose 0 90px, transparent 115px);
}

/* Rows and Columns
-------------------------------------------------------------------------------
*/
.row:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

.row::after {
  margin-bottom: 1.25rem;
}
@media (min-width: 40rem) {
  .row::after {
    margin-bottom: 1.5rem;
  }
}

* {
  box-sizing: border-box;
}

/* Paragraph spacing
-------------------------------------------------------------------------------
*/
#block-butaro-content > .flow > div:not(:first-child):not(.colorized-background):not(.paragraph--type--view),
.paragraphs > div:not(:first-child):not(.colorized-background):not(.paragraph--type--view) {
  margin-top: 2rem;
}
@media (min-width: 40rem) {
  #block-butaro-content > .flow > div:not(:first-child):not(.colorized-background):not(.paragraph--type--view),
  .paragraphs > div:not(:first-child):not(.colorized-background):not(.paragraph--type--view) {
    margin-top: 5.8rem;
  }
}

main *,
footer * {
  max-width: min(100%, 100vw - 2rem);
}

/* Grid
-------------------------------------------------------------------------------
Use to create a 12 column grid layout:

    <div class="grid-*">
        <div class="grid__item">
            ...
        </div>
    </div>
*/
[class^=grid-]:not([class*=__]),
[class*=" grid-"]:not([class*=__]) {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 3vw;
  width: 100%;
}

[class^=grid__item],
[class*=" grid__item"] {
  grid-column: span 12;
}

@media (min-width: 40rem) {
  .grid-sixths > .grid__item {
    grid-column: span 6;
  }
}
@media (min-width: 64rem) {
  .grid-sixths > .grid__item {
    grid-column: span 2;
  }
}
@media (min-width: 40rem) {
  .grid-quarters > .grid__item {
    grid-column: span 6;
  }
}
@media (min-width: 64rem) {
  .grid-quarters > .grid__item {
    grid-column: span 3;
  }
}
@media (min-width: 40rem) {
  .grid-thirds > .grid__item {
    grid-column: span 6;
  }
}
@media (min-width: 64rem) {
  .grid-thirds > .grid__item {
    grid-column: span 4;
  }
}
@media (min-width: 40rem) {
  .grid-halves > .grid__item {
    grid-column: span 6;
  }
}
@media (min-width: 64rem) {
  .grid__item-span-1 {
    grid-column: span 1 !important;
  }
}
@media (min-width: 64rem) {
  .grid__item-span-2 {
    grid-column: span 2 !important;
  }
}
@media (min-width: 64rem) {
  .grid__item-span-3 {
    grid-column: span 3 !important;
  }
}
@media (min-width: 64rem) {
  .grid__item-span-4 {
    grid-column: span 4 !important;
  }
}
@media (min-width: 64rem) {
  .grid__item-span-5 {
    grid-column: span 5 !important;
  }
}
@media (min-width: 64rem) {
  .grid__item-span-6 {
    grid-column: span 6 !important;
  }
}
@media (min-width: 64rem) {
  .grid__item-span-7 {
    grid-column: span 7 !important;
  }
}
@media (min-width: 64rem) {
  .grid__item-span-8 {
    grid-column: span 8 !important;
  }
}
@media (min-width: 64rem) {
  .grid__item-span-9 {
    grid-column: span 9 !important;
  }
}
@media (min-width: 64rem) {
  .grid__item-span-10 {
    grid-column: span 10 !important;
  }
}
@media (min-width: 64rem) {
  .grid__item-span-11 {
    grid-column: span 11 !important;
  }
}
@media (min-width: 64rem) {
  .grid__item-span-12 {
    grid-column: span 12 !important;
  }
}
@media (min-width: 64rem) {
  .grid__item-flow_full {
    grid-column: span 12;
  }
  .grid__item-flow_middle {
    grid-column: 4/span 6;
  }
  .grid__item-flow_left {
    grid-column: 1/span 7;
    grid-row: 1;
  }
  .grid__item-flow_right {
    grid-column: 6/span 7;
    grid-row: 1;
  }
}

/* Doublewide images
  -----------------------------------------------------------
  Used to span 2 columns on a 4x grid. Doublewide columns
  alternate left and right with a spacer row in between.

  labelling happens in js/script.js

  <div class="grid-quarters">
      <div class="grid__item doublewide double_wide__right">
          <p>This spans 2 regular grid item slots and floats
          to the right</p>
      </div>
      <div class="grid__item">
          ...
      </div>
  </div>

*/
.grid__item.doublewide {
  justify-self: center;
  align-self: center;
}
@media (min-width: 64rem) {
  .grid__item.doublewide__right {
    grid-column: 7/13;
  }
  .grid__item.doublewide__left {
    grid-column: 1/7;
  }
}
@media (max-width: 64rem) {
  .grid__item.doublewide {
    grid-column: 1/13;
  }
}
@media (min-width: 64rem) {
  .grid-thirds .grid__item.doublewide__right {
    grid-column: 5/13;
  }
  .grid-thirds .grid__item.doublewide__left {
    grid-column: 1/9;
  }
}

/* Mobile Zig Zag
  -----------------------------------------------------------
  Add it to the grid container to get the zig zag effect
  <div class="grid-thirds mobile-zig-zag">
      <div class="grid__item">
        Zigs to right
      </div>
      <div class="grid__item">
        Zags to left
      </div>
  </div>

  */
@media (max-width: 40rem) {
  .mobile-zig-zag > .grid__item:has(figure) {
    grid-column: 1/-1;
    display: grid;
    grid-template-columns: subgrid;
  }
  .mobile-zig-zag > .grid__item:has(figure):nth-child(odd) > * {
    grid-column: 1/9;
  }
  .mobile-zig-zag > .grid__item:has(figure):nth-child(even) > * {
    grid-column: 5/-1;
  }
}
/* Subgrid
  -----------------------------------------------------------
  Add it to a container inside a grid container to inherit the parent grid lines
  <div class="grid-thirds">
      <div class="grid__item subgrid">
         <div class="grid__item">I have</div>
         <div class="grid__item">my</div>
         <div class="grid__item">parents'</div>
         <div class="grid__item">grid lines!</div>
      </div>
      <div class="grid__item">
        This item is not a subgrid
      </div>
  </div>

  */
.subgrid {
  display: grid;
  grid-template-columns: subgrid;
}

.contextual-region.grid__item .contextual-region .contextual {
  top: 2rem;
}

/* Modules
-------------------------------------------------------------------------------
*/
/* Post-it
-----------------------------------------------------------
*/
.page a.postit,
.postit {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: 1px rgb(0, 166, 104) solid;
  padding: 1rem !important;
  background: white;
  color: rgb(0, 166, 104);
  max-width: 100%;
  aspect-ratio: 1;
  text-decoration: none;
}
.page a.postit .arrow-link, .page a.postit-text, .page a.postit-modal-container-text,
.page a.postit .teaser__news_content,
.postit .arrow-link,
.postit-text,
.postit-modal-container-text,
.postit .teaser__news_content {
  color: rgb(0, 166, 104);
}
@media (min-width: 40rem) {
  .page a.postit-text *,
  .postit-text * {
    font-size: 0.5625rem;
  }
}
@media (min-width: 40rem) and (min-width: 51rem) {
  .page a.postit-text *,
  .postit-text * {
    font-size: 0.875rem;
  }
}
@media (min-width: 40rem) and (min-width: 125rem) {
  .page a.postit-text *,
  .postit-text * {
    font-size: 1rem;
  }
}
.page a.postit-text p:first-child,
.postit-text p:first-child {
  margin-top: 0;
}
.page a.postit .arrow-link,
.postit .arrow-link {
  margin-left: auto;
}
.page a.postit .arrow-link .svg-arrow,
.postit .arrow-link .svg-arrow {
  width: 20px;
}
.page a.postit .arrow-link .svg-arrow path,
.postit .arrow-link .svg-arrow path {
  fill: rgb(0, 166, 104);
}
@media (max-width: 40rem) {
  .page a.postit,
  .postit {
    grid-column: 1/-1;
    aspect-ratio: unset;
  }
  .page a.postit p,
  .postit p {
    font-size: 1rem;
  }
  .page a.postit .svg-arrow,
  .postit .svg-arrow {
    width: 1rem;
  }
}
@media (min-width: 40rem) and (max-width: 817px) {
  .page a.postit,
  .postit {
    width: 170px;
  }
}
@media (min-width: 817px) and (max-width: 1920px) {
  .page a.postit,
  .postit {
    width: 240px;
  }
}
@media (min-width: 1921px) {
  .page a.postit,
  .postit {
    width: 270px;
  }
}

/* Footer
===========================================================
*/
.page-footer__title {
  margin-bottom: 2rem;
}
@media (max-width: 64rem) {
  .page-footer .layout.grid-sixths .grid__item, .page-footer .grid-sixths.secondary-nav .grid__item {
    grid-column: span 6;
  }
  .page-footer .layout.grid-sixths .grid__item:first-child img, .page-footer .grid-sixths.secondary-nav .grid__item:first-child img {
    margin-block: 1rem;
  }
}
.page-footer .layout > nav ul, .page-footer .secondary-nav > nav ul {
  padding-left: 0;
}
.page-footer .layout > nav ul li, .page-footer .secondary-nav > nav ul li {
  list-style: none;
  margin-bottom: 0.5rem;
}
.page-footer a[href^="/search"] {
  background-image: url(/themes/butaro/images/search.svg);
  background-repeat: no-repeat;
  background-position: left 50%;
  background-size: 0.9em;
  padding-left: 2ch;
}

/* Sticky Footer
===========================================================
Uses flexbox to push footer to the bottom of the viewport.

    <body>
        <div class="dialog-off-canvas-main-canvas">
          ...
          <div class="page--footer">...</div>
        </div>
    </body>
*/
html,
body {
  height: 100%;
}

.dialog-off-canvas-main-canvas {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.page-footer {
  margin-top: auto;
}

/* Feature
===========================================================
*/
.feature {
  margin-bottom: 2%;
  margin-bottom: 1.25rem;
}
.feature:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
@media (min-width: 64rem) {
  .feature {
    margin-bottom: 1.5rem;
    position: relative;
    padding-bottom: 50%;
    width: 100%;
  }
}
.feature a::after {
  display: none;
}

.feature_inner {
  position: relative;
}
@media (min-width: 64rem) {
  .feature_inner {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
  }
}
.feature_inner .icons {
  position: absolute;
  bottom: 1em;
}
.feature_inner .icons div {
  display: inline-block;
}

/* Feature Title
-----------------------------------------------------------
*/
.feature_title {
  position: absolute;
  top: 0;
  left: 0;
  box-sizing: border-box;
  padding: 0.625rem;
  width: 65%;
  z-index: 1;
  cursor: pointer;
}
.feature_title > h1, .feature_title > h2, .feature_title > h3, .feature_title > h4 {
  color: rgb(255, 255, 255);
}
@media (min-width: 40rem) {
  .feature_title {
    padding: 1.25rem;
    width: 50%;
  }
  .feature_title > h1 {
    font-size: 2.5em;
  }
}

/* Feature Image
-----------------------------------------------------------
*/
.feature_image {
  position: relative;
  padding-bottom: 50%;
  width: 100%;
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: cover;
  cursor: pointer;
}
@media (min-width: 64rem) {
  .feature_image {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    padding-bottom: 50%;
    transition: 200ms all ease-in-out;
  }
}

.feature_image::before {
  display: block;
  position: absolute;
  content: "";
  color: rgb(255, 255, 255);
  border-top: 1.72em solid currentColor;
  border-right: 1em solid transparent;
  border-bottom: 0;
  border-left: 1em solid transparent;
  z-index: 1;
}
@media (max-width: 63.9375rem) {
  .feature_image::before {
    font-size: 0.5em;
    right: 0.625rem;
    bottom: 0.625rem;
  }
}
@media (min-width: 64rem) {
  .feature_image::before {
    margin-top: 1.25rem;
    margin-right: 1.25rem;
    right: 0;
    top: 0;
    border-top: 1em solid transparent;
    border-right: 0;
    border-bottom: 1em solid transparent;
    border-left: 1.72em solid currentColor;
  }
}

.feature_image::after {
  display: block;
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

/* Feature Teaser
-----------------------------------------------------------
*/
.feature_teaser {
  box-sizing: border-box;
  padding: 0.625rem;
  background-color: rgb(239, 240, 240);
}
@media (max-width: 63.9375rem) {
  .feature_teaser {
    display: none;
  }
}
@media (min-width: 64rem) {
  .feature_teaser {
    position: absolute;
    padding-top: 4.375em;
    padding-right: 1.25rem;
    padding-bottom: 1.25rem;
    padding-left: 1.25rem;
    top: 0;
    bottom: 0;
    left: 100%;
    width: 50%;
    transition: 200ms all ease-in-out;
  }
}

/* Feature State
-----------------------------------------------------------
*/
.feature.is_active .feature_image::before {
  border-top: 0;
  border-right: 1em solid transparent;
  border-bottom: 1.72em solid currentColor;
  border-left: 1em solid transparent;
}
@media (max-width: 63.9375rem) {
  .feature.is_active .feature_teaser {
    display: block;
  }
}
@media (min-width: 64rem) {
  .feature.is_active .feature_image {
    left: -50%;
  }
  .feature.is_active .feature_teaser {
    left: 50%;
  }
  .feature.is_active .feature_image::before {
    border-top: 1em solid transparent;
    border-right: 1.72em solid currentColor;
    border-bottom: 1em solid transparent;
    border-left: 0;
  }
}

/* Nav
===========================================================
*/
.nav {
  margin: 0;
  padding: 0 0 0.75rem 0;
  list-style: none;
  line-height: 1.5rem;
  position: relative;
}
@media (pointer: fine) and (min-width: 64rem) {
  .nav {
    display: flex;
  }
}
.nav > li,
.nav div.form-item,
.nav div.form-actions {
  display: block;
  line-height: 1;
  font-weight: 500;
}
@media (pointer: fine) and (min-width: 64rem) {
  .nav > li,
  .nav div.form-item,
  .nav div.form-actions {
    display: inline-block;
  }
  .nav > li.has_child svg,
  .nav div.form-item.has_child svg,
  .nav div.form-actions.has_child svg {
    margin-bottom: 2px;
    margin-right: 0.9rem;
    margin-top: 1rem;
  }
  .nav > li.has_child:hover .secondary-nav,
  .nav div.form-item.has_child:hover .secondary-nav,
  .nav div.form-actions.has_child:hover .secondary-nav {
    display: block;
    position: absolute;
  }
  .nav > li:last-child a,
  .nav div.form-item:last-child a,
  .nav div.form-actions:last-child a {
    margin-left: auto;
  }
  .nav > li a::before,
  .nav div.form-item a::before,
  .nav div.form-actions a::before {
    position: absolute;
    width: 9px;
    height: 9px;
    opacity: 0;
    content: "";
    border-radius: 50%;
    border: 1px solid rgb(0, 0, 0);
    transform: translate(-18px, 2px);
  }
  .windows .nav > li a::before,
  .windows .nav div.form-item a::before,
  .windows .nav div.form-actions a::before {
    transform: translate(-18px, 4px);
  }
  .nav > li a:hover::before,
  .nav > li a:focus::before,
  .nav div.form-item a:hover::before,
  .nav div.form-item a:focus::before,
  .nav div.form-actions a:hover::before,
  .nav div.form-actions a:focus::before {
    opacity: 1;
  }
}
.nav a,
.nav li > span {
  position: relative;
  display: inline-block;
  box-sizing: border-box;
  padding: 0.7rem 0.1rem 0.7rem 0;
  color: rgb(0, 0, 0);
  cursor: pointer;
}
.nav .form-actions {
  position: absolute;
}
.nav .is-active:not([href="/search"])::before,
.nav .is_active > a:not([href="/search"])::before {
  opacity: 1;
  background-color: rgb(0, 0, 0);
}

/* Navbar
===========================================================
*/
.navbar {
  padding: 0;
  line-height: 1.8rem;
  color: rgb(0, 0, 0);
  z-index: 9;
}
.navbar a:hover {
  border-color: transparent;
}
.navbar > .layout, .navbar > .secondary-nav {
  display: flex;
  justify-content: space-between;
}
@media (min-width: 64rem) and (pointer: fine) {
  .navbar > .layout, .navbar > .secondary-nav {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 3vw !important;
  }
  .navbar > .layout #block-butaro-branding, .navbar > .secondary-nav #block-butaro-branding {
    display: grid;
    grid-template-columns: subgrid;
    grid-row: 1;
    grid-column: 1/2;
  }
  .navbar > .layout #menu, .navbar > .secondary-nav #menu {
    display: grid;
    grid-template-columns: subgrid;
    grid-column: 2/13;
    grid-template-rows: subgrid;
    grid-row: 1;
  }
  .navbar > .layout .primary-nav, .navbar > .secondary-nav .primary-nav {
    grid-template-columns: subgrid;
    display: grid;
    grid-column: 1/13;
    grid-template-rows: subgrid;
  }
  .navbar > .layout .primary-nav .nav, .navbar > .secondary-nav .primary-nav .nav {
    display: grid;
    grid-template-columns: subgrid;
    grid-column: 7/13;
  }
  .navbar > .layout .primary-nav .nav li, .navbar > .secondary-nav .primary-nav .nav li {
    overflow: visible;
    white-space: nowrap;
  }
}

/* Logo
-----------------------------------------------------------
*/
#logo {
  padding-top: 1.4rem;
  display: block;
  font-weight: bold;
  text-decoration: none;
  z-index: 9;
  width: 70px !important;
}
#logo svg {
  width: 81px;
  height: 60px;
}
#logo svg path {
  fill: rgb(0, 0, 0);
}
#logo:hover svg path {
  fill: rgb(0, 166, 104);
}
@media (max-width: 64rem) {
  .has-cover.gin--horizontal-toolbar:not(.menu_is_active) #logo {
    padding-top: calc(1.4rem + var(--gin-toolbar-height));
  }
}

/* Menu
-----------------------------------------------------------
*/
#menu {
  box-sizing: border-box;
  display: block;
}
@media (pointer: coarse) or ((pointer: fine) and (max-width: 64rem)) {
  #menu {
    display: none;
  }
}

@media (max-width: 63.9375rem) or (pointer: coarse) {
  .menu_is_active .page,
  .menu_is_active .page-footer,
  .menu_is_active #team-modal-container {
    display: none;
  }
  .menu_is_active #menu {
    position: fixed;
    overflow-y: scroll;
    top: 90px;
    margin-top: var(--gin-toolbar-height);
    left: 0;
    z-index: 10;
    width: 100%;
    height: 100vh;
    background-color: white;
    display: block;
  }
  .menu_is_active #menu li {
    padding-left: 0;
  }
  .menu_is_active #menu .primary-nav > .nav > li {
    font-size: 1.5rem;
    display: block;
  }
  .menu_is_active #menu .primary-nav > .nav > li > a {
    width: 8ch;
    display: inline-block;
  }
  .menu_is_active #menu .primary-nav > .nav > li svg {
    width: 20px;
    height: 20px;
    cursor: pointer;
  }
  .menu_is_active #menu .primary-nav > .nav > li.has_child ul {
    display: none;
  }
  .menu_is_active #menu .primary-nav > .nav > li.has_child.is_expanded ul {
    display: block;
  }
  .menu_is_active #menu .primary-nav > .nav > li.has_child.is_expanded svg {
    transform: rotate(180deg);
  }
  .menu_is_active #menu .primary-nav > .nav > li.has_child.is_expanded::before {
    border-top: 1.72em solid currentColor;
    border-right: 1em solid transparent;
    border-bottom: 0;
    border-left: 1em solid transparent;
  }
  .menu_is_active #menu .secondary-nav {
    box-sizing: border-box;
    padding: 0;
    margin-bottom: 0;
  }
  .menu_is_active #menu .secondary-nav ul.nav {
    padding-bottom: 1rem;
  }
  .menu_is_active #menu .secondary-nav ul.nav > li > a {
    font-size: 18px;
    font-weight: 400;
  }
  .menu_is_active #menu a {
    display: block;
  }
  .menu_is_active #menu-toggle {
    color: transparent;
    font-size: 0.0001px;
  }
  .menu_is_active #menu-toggle svg {
    margin-top: 8px;
    margin-right: 12px;
    width: 15px;
    height: auto;
  }
  .menu_is_active #menu-toggle span {
    display: inline-block;
    color: rgb(119, 120, 123);
  }
  .menu_is_active .select {
    display: none;
  }
  .toolbar-horizontal .menu_is_active #menu-toggle::after {
    top: 0 !important;
  }
}
/* Menu Toggle
-----------------------------------------------------------
*/
#menu-toggle {
  display: block;
  position: relative;
  top: 0;
  right: 0;
  padding: 0 0.875em;
  padding-top: 1rem;
  font-weight: 500;
  line-height: 2em;
  color: rgb(119, 120, 123);
  cursor: pointer;
  z-index: 99;
}
@media (min-width: 64rem) and (pointer: fine) {
  #menu-toggle {
    display: none !important;
  }
}
body:not(.menu_is_active) #menu-toggle span,
body:not(.menu_is_active) #menu-toggle svg {
  display: none;
}
body:not(.menu_is_active) #menu-toggle::before {
  transition: all 0.2s ease-in-out;
  top: 36px;
  right: 16px;
  width: 13px;
  height: 1px;
  box-sizing: border-box;
}
body:not(.menu_is_active) #menu-toggle::after {
  transition: all 0.2s ease-in-out;
  width: 13px;
  height: 1px;
  position: relative;
  top: -3px;
  background: rgb(119, 120, 123);
  box-shadow: 0 4px 0 rgb(119, 120, 123);
  display: inline-block;
  margin-left: 7px;
  vertical-align: middle;
  content: "";
}
.has-cover:not(.menu_is_active) #menu-toggle {
  margin-top: var(--gin-toolbar-y-offset);
  color: rgb(255, 255, 255);
}
.has-cover:not(.menu_is_active) #menu-toggle::after {
  background: rgb(255, 255, 255);
  box-shadow: 0 4px 0 rgb(255, 255, 255);
}
@media (min-width: 64rem) and (pointer: coarse) {
  .has-cover:not(.menu_is_active) #menu-toggle {
    margin-top: 0;
  }
}
@media (min-width: calc(64rem + 1px)) and (pointer: fine) {
  #menu-toggle {
    display: none;
  }
}

/* Primary Nav
===========================================================
*/
.primary-nav {
  margin-bottom: 0;
}
@media (max-width: 63.9375rem), (pointer: coarse) {
  .primary-nav {
    display: block;
    clear: both;
    padding-inline: 0.5rem;
  }
}
@media (min-width: 64rem) and (pointer: fine) {
  .primary-nav {
    padding-top: 1.075rem;
    background: transparent;
    display: flex;
    justify-content: flex-end;
  }
}
.primary-nav a[href="/search"] {
  font-size: 0.001px;
  visibility: hidden;
  position: inherit;
  height: 20px;
  aspect-ratio: 1;
  display: block;
}
.primary-nav a[href="/search"]::after {
  font-family: initial;
  visibility: visible;
  position: inherit;
  display: block;
  background-image: url(../images/search.svg);
  background-size: 1.1rem;
  background-repeat: no-repeat;
  background-position: right center;
  position: relative;
  top: -0.7rem;
  height: 2rem;
  width: 2rem;
  opacity: 1;
  border-radius: unset;
  border: none !important;
  content: "";
}
@media (max-width: 64rem) {
  .primary-nav a[href="/search"]::after {
    width: 1.5rem;
    height: 1.5rem;
  }
}

/* Secondary Nav
===========================================================
*/
.secondary-nav {
  z-index: 99;
}
@media (pointer: fine) and (min-width: 64rem) {
  .secondary-nav {
    display: none;
    background: transparent;
    padding: 0;
  }
  .secondary-nav .nav {
    display: flex;
    flex-direction: column;
  }
  .secondary-nav .nav li {
    padding: 0;
    width: unset;
  }
  .secondary-nav .nav li a {
    display: block;
    padding-block: 3px;
  }
  .secondary-nav .nav li a::before {
    bottom: 8px;
  }
}

@media (pointer: fine) and (min-width: 64rem) {
  .is_active .secondary-nav {
    position: absolute;
    z-index: 99;
  }
}

@media (pointer: fine) {
  body:not(.has-cover)::before {
    transition: all 0.3s ease-in-out;
    background: transparent;
    opacity: 0;
  }
  body:not(.has-cover):has(.primary-nav .has_child:hover):has(.grid-project-header) {
    position: relative;
    overflow-x: hidden;
  }
  body:not(.has-cover):has(.primary-nav .has_child:hover):has(.grid-project-header)::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    background: linear-gradient(0deg, rgba(255, 255, 255, 0) 0%, rgb(255, 255, 255) 58%, rgb(255, 255, 255) 93%);
    background-repeat: no-repeat;
    z-index: 3;
    display: block;
    height: 14rlh;
    opacity: 1;
  }
  body:not(.has-cover):has(.primary-nav .has_child:hover):has(.grid-project-header) .primary-nav,
  body:not(.has-cover):has(.primary-nav .has_child:hover):has(.grid-project-header) .secondary-nav {
    background-color: transparent !important;
  }
}
/* Filter Nav
===========================================================
*/
@media (max-width: 63.9375rem) {
  .filter-nav li,
  .filter-nav div.form-item,
  .filter-nav div.form-actions {
    display: block;
    padding-right: 0.875em;
  }
  .filter-nav .nav > div.form-item {
    display: none;
  }
}
@media (min-width: 64rem) {
  .filter-nav {
    margin-left: 25.5%;
    margin-top: -0.8em;
    margin-bottom: 1.3rem;
  }
  .filter-nav > .filter-nav_heading {
    margin-top: -0.15em;
    margin-right: 2%;
    padding-top: 0;
    float: left;
    min-width: 23.5%;
    line-height: 2rem;
  }
  .filter-nav li,
  .filter-nav div.form-item,
  .filter-nav div.form-actions {
    padding: 0;
    display: inline-block;
  }
  .filter-nav li + li,
  .filter-nav form > div {
    margin-left: 0.875rem;
  }
}
.filter-nav form {
  display: inline;
}

.views-exposed-form.filter-nav {
  z-index: 999;
}

/* Cover
===========================================================
*/
:root {
  --navbar-height: 4.25rem;
  --carousel-padding-bottom:1rem;
  --coverheight: 125vw;
  --offset: calc(var(--gin-toolbar-height, 0) + var(--navbar-height) );
  --cover-offset: var(--offset, 0) ;
}
@media (min-width: 40rem) {
  :root {
    --coverheight: 90vh;
    --carousel-padding-bottom:3.5rem;
  }
}

.header-carousel-wrapper {
  background-color: rgb(119, 120, 123);
}

.has-cover:not(.menu_is_active) .primary-nav {
  background-color: transparent;
}
.has-cover:not(.menu_is_active) #logo img {
  filter: invert(100%);
}
.has-cover:not(.menu_is_active) header.navbar {
  min-height: var(--navbar-height);
}
.has-cover:not(.menu_is_active) header.navbar .primary-nav li a {
  filter: invert(100%);
}
.has-cover:not(.menu_is_active) header.navbar .primary-nav svg {
  stroke: rgb(255, 255, 255);
}
.has-cover:not(.menu_is_active) header.navbar .primary-nav svg path {
  fill: rgb(255, 255, 255);
}
.has-cover:not(.menu_is_active) header.navbar .secondary-nav {
  background: none;
}
@media (min-width: 64rem) {
  .has-cover:not(.menu_is_active) header.navbar {
    margin-top: var(--gin-toolbar-height);
  }
  .has-cover:not(.menu_is_active) header.navbar .layout, .has-cover:not(.menu_is_active) header.navbar .secondary-nav {
    border-image: none;
  }
}
.has-cover:not(.menu_is_active) .dialog-off-canvas-main-canvas,
.has-cover:not(.menu_is_active) #main-content {
  top: 0;
  position: absolute;
  left: 0;
  right: 0;
}
@media (min-width: 64rem) {
  .has-cover:not(.menu_is_active).gin--horizontal-toolbar .cover {
    margin-bottom: 1rem;
  }
}
.has-cover:not(.menu_is_active) .cover {
  max-width: 100vw;
  height: calc(var(--coverheight) - var(--navbar-height));
}
.has-cover:not(.menu_is_active) .cover .layout, .has-cover:not(.menu_is_active) .cover .secondary-nav {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: end;
  padding: var(--carousel-padding-bottom);
}
.has-cover:not(.menu_is_active) .cover .layout > :last-child, .has-cover:not(.menu_is_active) .cover .secondary-nav > :last-child {
  margin-bottom: 0;
}
.has-cover:not(.menu_is_active) .cover_subtitle, .has-cover:not(.menu_is_active) .cover_svg {
  color: white;
  z-index: 9;
  max-width: 90vw;
}
@media (min-width: 40rem) {
  .has-cover:not(.menu_is_active) .cover_subtitle, .has-cover:not(.menu_is_active) .cover_svg {
    max-width: min(100%, 900px);
  }
}
@media (max-width: 30rem) {
  .has-cover:not(.menu_is_active) .cover_subtitle, .has-cover:not(.menu_is_active) .cover_svg {
    margin: 0;
  }
}
.has-cover:not(.menu_is_active) .cover_subtitle :last-child, .has-cover:not(.menu_is_active) .cover_svg :last-child {
  margin-bottom: 0;
}
.has-cover:not(.menu_is_active) .cover_svg {
  display: block;
}
@media (max-width: 30rem) {
  .has-cover:not(.menu_is_active) .cover_title {
    font-size: 2rem;
  }
}
@media (max-width: 40rem) {
  .has-cover:not(.menu_is_active) .cover_subtitle {
    font-size: 1.5rem;
  }
}
.has-cover:not(.menu_is_active).header-carousel__light #logo img {
  filter: none;
}
.has-cover:not(.menu_is_active).header-carousel__light .primary-nav li a {
  filter: none;
}
.has-cover:not(.menu_is_active).header-carousel__light .primary-nav li svg {
  stroke: none;
}
.has-cover:not(.menu_is_active).header-carousel__light .primary-nav li svg path {
  fill: rgb(0, 0, 0);
}
.has-cover:not(.menu_is_active).header-carousel__light .cover_title, .has-cover:not(.menu_is_active).header-carousel__light .cover_subtitle {
  color: black;
}
.has-cover:not(.menu_is_active).header-carousel__light .cover_svg path {
  fill: black;
}

/* Flow Data
===========================================================
Dependent on `_layout-flow.scss`.

    <div class="flow_data">
        <div class="flow_data_header">...</div>
        <div class="flow_data_column">...</div>
        <div class="flow_data_column">...</div>
        <div class="flow_data_column">...</div>
        <div class="flow_data_column">...</div>
    </div>
*/
.flow_data {
  padding-top: 1.25rem;
  clear: both;
}
@media (min-width: 64rem) {
  .flow_data {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
    max-height: inherit;
    overflow: hidden;
  }
}

@media (min-width: 40rem) {
  .flow_data_header {
    margin-left: 25.5%;
    padding-bottom: 1.25rem;
  }
}

@media (min-width: 40rem) {
  .flow_data_column {
    float: left;
    width: 23.5%;
  }
}

@media (min-width: 40rem) {
  .flow_data_column + .flow_data_column {
    margin-left: 2%;
  }
}

/* Map
===========================================================
Use Google Maps API v3 for performance and flexibility.
*/
.map {
  position: relative;
  display: block;
  padding-bottom: 75%;
}

.map_inner,
.geolocation-google-map {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  filter: gray;
  filter: grayscale(1);
  -webkit-filter: grayscale(1);
}

/*
Forms
===========================================================
*/
/* Form
-----------------------------------------------------------

    <form>...</form>
*/
form {
  box-sizing: border-box;
}

/* Form wrapper for a form element
-----------------------------------------------------------

    <div class="form-wrapper">
      <input>
    </div>
*/
.form_section:not(:first-of-type) {
  padding-top: 0.5rem;
  border-top: 1px rgb(239, 240, 240) solid;
  margin-top: 5rem;
}

/* Fieldset
-----------------------------------------------------------

    <fieldset>...</fieldset>
*/
fieldset {
  box-sizing: border-box;
  margin-bottom: 1.25rem;
  border: none;
}
@media (min-width: 40rem) {
  fieldset {
    margin-bottom: 1.5rem;
  }
}
fieldset:has([type=checkbox]), fieldset:has([type=radio]) {
  position: relative;
}
fieldset:has([type=checkbox]) legend, fieldset:has([type=radio]) legend {
  float: left;
  margin-right: 1.5rem;
  padding-block: 0.7rem;
}
fieldset:has([type=checkbox]) .fieldset-wrapper, fieldset:has([type=radio]) .fieldset-wrapper {
  display: table;
}
fieldset:has([type=checkbox]) .fieldset-wrapper input[type=radio],
fieldset:has([type=checkbox]) .fieldset-wrapper input[type=checkbox], fieldset:has([type=radio]) .fieldset-wrapper input[type=radio],
fieldset:has([type=radio]) .fieldset-wrapper input[type=checkbox] {
  opacity: 0.01;
  z-index: 100;
  position: absolute;
}
fieldset:has([type=checkbox]) .fieldset-wrapper .checkbox,
fieldset:has([type=checkbox]) .fieldset-wrapper .radio, fieldset:has([type=radio]) .fieldset-wrapper .checkbox,
fieldset:has([type=radio]) .fieldset-wrapper .radio {
  position: relative;
}
fieldset:has([type=checkbox]) .fieldset-wrapper .checkbox label,
fieldset:has([type=checkbox]) .fieldset-wrapper .radio label, fieldset:has([type=radio]) .fieldset-wrapper .checkbox label,
fieldset:has([type=radio]) .fieldset-wrapper .radio label {
  padding: 10px 13px !important;
  margin: 0 !important;
}
fieldset:has([type=checkbox]) .fieldset-wrapper input[type=radio]:checked + label,
fieldset:has([type=checkbox]) .fieldset-wrapper input[type=checkbox]:checked + label, fieldset:has([type=radio]) .fieldset-wrapper input[type=radio]:checked + label,
fieldset:has([type=radio]) .fieldset-wrapper input[type=checkbox]:checked + label {
  border-color: rgb(0, 166, 104);
  color: rgb(0, 166, 104);
  background-color: rgb(216, 255, 240);
}
fieldset:has([type=checkbox]) .fieldset-wrapper input[type=radio]:checked + label:hover,
fieldset:has([type=checkbox]) .fieldset-wrapper input[type=checkbox]:checked + label:hover, fieldset:has([type=radio]) .fieldset-wrapper input[type=radio]:checked + label:hover,
fieldset:has([type=radio]) .fieldset-wrapper input[type=checkbox]:checked + label:hover {
  background-color: rgb(0, 209, 121);
  border-color: rgb(0, 209, 121);
}
fieldset.compact {
  border: 0;
  padding: 0;
}

.form-item {
  margin-bottom: 1rem;
}

/* Legend
-----------------------------------------------------------

    <legend>...</legend>
*/
legend {
  box-sizing: border-box;
}

/* Label
-----------------------------------------------------------

    <label>...</label>
*/
label,
fieldset legend {
  display: block;
  line-height: 1em;
  color: rgb(0, 0, 0);
  font-weight: 600;
}
label span.form-required:after, label.form-required:after,
fieldset legend span.form-required:after,
fieldset legend.form-required:after {
  content: " *";
  color: red;
}

/* Inputs
-----------------------------------------------------------
*/
input[type=text],
input[type=password],
input[type=url],
input[type=email],
input[type=search],
input[type=number],
input[type=range],
input[type=date],
input[type=month],
input[type=week],
input[type^=datetime],
input[type=file],
input[type=tel],
textarea,
.give-card-element {
  display: block;
  outline: 0;
  border: 1px solid rgb(0, 0, 0);
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  box-sizing: border-box;
  padding: 0.5em;
  width: 100%;
  font-size: 1rem;
  line-height: 1;
  margin-top: 0.25rem;
}

button,
html input[type=button],
input[type=reset],
input[type=submit] {
  display: block;
}

/* Placeholder
-----------------------------------------------------------

    <input type="text" name="lorem" placeholder="Lorem ipsum ...">
*/
::-webkit-input-placeholder {
  color: rgb(177, 179, 182);
}

.fonts-loaded ::-webkit-input-placeholder {
  font-family: "Graphik";
}

:-moz-placeholder {
  color: rgb(177, 179, 182);
}

.fonts-loaded :-moz-placeholder {
  font-family: "Graphik";
}

::-moz-placeholder {
  color: rgb(177, 179, 182);
}

.fonts-loaded ::-moz-placeholder {
  font-family: "Graphik";
}

:-ms-input-placeholder {
  color: rgb(177, 179, 182);
}

.fonts-loaded :-ms-input-placeholder {
  font-family: "Graphik";
}

input-placeholder {
  color: rgb(177, 179, 182);
}

.fonts-loaded input-placeholder {
  font-family: "Graphik";
}

/* Not actually a Placeholder
-----------------------------------------------------------

    <div class="placeholder">

    This happens when the placeholder is actually displayed above the input
*/
.placeholder {
  margin-block: 0.5rem;
}

/* Text Field
-----------------------------------------------------------

    <input type="text" value="Lorem ipsum ...">
*/
/* Password
-----------------------------------------------------------

    <input type="password" value="Loremipsum">
*/
/* Web Address
-----------------------------------------------------------

    <input type="url" value="www.loremipsum.com">
*/
/* Email Address
-----------------------------------------------------------

    <input type="email" value="lorem@ipsum.com">
*/
/* Search
-----------------------------------------------------------

    <input type="search" value="lorem">
*/
/* Number
-----------------------------------------------------------

    <input type="number" value="123">
*/
/* Textarea
-----------------------------------------------------------

    <textarea>Lorem ipsum ...</textarea>
*/
/*  Form Message
-----------------------------------------------------------
Validation message should be added to `.form-msg` via Javascript

    <input type="text" class="is-error">
    <div class="form-msg">There is an error...</div>
*/
.form-msg {
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 0.5em;
  padding-bottom: 0.3em;
  font-size: 0.875em;
  line-height: 1.75em;
}

/* Form Error
-----------------------------------------------------------
Error message should be added to `.form-msg` via Javascript

    <input type="text" class="is-error">
    <div class="form-msg">There is an error...</div>
*/
input.is-error {
  border: 1px solid rgb(255, 89, 89);
}

.is-error + .form-msg,
.is-error > .form-msg {
  color: rgb(255, 89, 89);
}

/* Inline Form Elements
-----------------------------------------------------------

    <input type="text" class="inline" value="Foo">
    <input type="text" class="inline" value="Bar">

    <button class="btn inline">Foo</button>
    <button class="btn btn-primary inline">Bar</button>
*/
.form-item-keywords,
.form-item-keywords + .form-actions,
input.inline,
button.inline,
.btn.inline,
fieldset:has([type=checkbox]) .fieldset-wrapper .checkbox label.inline,
fieldset:has([type=checkbox]) .fieldset-wrapper .radio label.inline,
fieldset:has([type=radio]) .fieldset-wrapper .checkbox label.inline,
fieldset:has([type=radio]) .fieldset-wrapper .radio label.inline,
.switch.inline {
  display: inline-block;
  margin-right: 0.5em;
  width: auto;
  margin-top: 0;
  margin-bottom: 0;
}

/* Small Button
-----------------------------------------------------------

    <div class="btn btn-small">Foo</div>
    <div class="btn btn-primary btn-small">Foo</div>
*/
.btn.btn-small, fieldset:has([type=checkbox]) .fieldset-wrapper .checkbox label.btn-small,
fieldset:has([type=checkbox]) .fieldset-wrapper .radio label.btn-small, fieldset:has([type=radio]) .fieldset-wrapper .checkbox label.btn-small,
fieldset:has([type=radio]) .fieldset-wrapper .radio label.btn-small {
  padding: 0.6em 1em;
}
.btn.btn-small.inline, fieldset:has([type=checkbox]) .fieldset-wrapper .checkbox label.btn-small.inline,
fieldset:has([type=checkbox]) .fieldset-wrapper .radio label.btn-small.inline, fieldset:has([type=radio]) .fieldset-wrapper .checkbox label.btn-small.inline,
fieldset:has([type=radio]) .fieldset-wrapper .radio label.btn-small.inline {
  margin: -0.5em 0 0 0;
}

/* Button
-----------------------------------------------------------

    <div class="btn">Foo</div>
*/
.btn, fieldset:has([type=checkbox]) .fieldset-wrapper .checkbox label,
fieldset:has([type=checkbox]) .fieldset-wrapper .radio label, fieldset:has([type=radio]) .fieldset-wrapper .checkbox label,
fieldset:has([type=radio]) .fieldset-wrapper .radio label {
  margin: 1em 0;
  box-sizing: border-box;
  outline: 0;
  padding: 0.5875em 1em;
  text-align: center;
  font-size: 1em;
  line-height: 1em;
  min-width: 2.125rem;
  cursor: pointer;
}

a.btn {
  color: rgb(255, 255, 255);
}

/* Primary Button
-----------------------------------------------------------

    <div class="btn btn-primary">Foo</div>
*/
.btn-primary {
  background: rgb(0, 166, 104);
}
.btn-primary.btn-outline {
  border-color: rgb(0, 166, 104);
  color: rgb(0, 166, 104);
  background: none;
}

/* Outline Button
-----------------------------------------------------------

    <div class="btn btn-outline">Foo</div>
    <div class="btn btn-primary btn-outline">Foo</div>
*/
.btn-outline {
  border: 1px solid rgb(177, 179, 182);
  color: gray;
  background: none;
}

.btn-outline {
  color: rgb(177, 179, 182);
}

.btn-primary.btn-outline {
  color: rgb(0, 166, 104);
}

.btn-strong,
.button,
.btn,
fieldset:has([type=checkbox]) .fieldset-wrapper .checkbox label,
fieldset:has([type=checkbox]) .fieldset-wrapper .radio label,
fieldset:has([type=radio]) .fieldset-wrapper .checkbox label,
fieldset:has([type=radio]) .fieldset-wrapper .radio label {
  line-height: 1;
  padding: 20px 42px;
  text-align: center;
  align-items: center;
  border-radius: 100px;
  display: inline-flex;
  background-color: rgb(255, 255, 255);
  color: rgb(0, 0, 0);
  text-transform: capitalize;
  border: 1px solid rgb(0, 0, 0);
  transition: background-color 0.2s ease-out, color 0.2s ease-out;
  height: fit-content;
  margin-top: 0.5rem;
  font-weight: 600;
}
.btn-strong:hover,
.button:hover,
.btn:hover,
fieldset:has([type=checkbox]) .fieldset-wrapper .checkbox label:hover,
fieldset:has([type=checkbox]) .fieldset-wrapper .radio label:hover,
fieldset:has([type=radio]) .fieldset-wrapper .checkbox label:hover,
fieldset:has([type=radio]) .fieldset-wrapper .radio label:hover {
  color: rgb(255, 255, 255);
  background-color: rgb(0, 209, 121);
  border-color: rgb(0, 209, 121);
}
.btn-strong:focus,
.button:focus,
.btn:focus,
fieldset:has([type=checkbox]) .fieldset-wrapper .checkbox label:focus,
fieldset:has([type=checkbox]) .fieldset-wrapper .radio label:focus,
fieldset:has([type=radio]) .fieldset-wrapper .checkbox label:focus,
fieldset:has([type=radio]) .fieldset-wrapper .radio label:focus {
  color: rgb(119, 120, 123);
  background-color: transparent;
}
.btn-strong.form-submit,
.button.form-submit,
.btn.form-submit,
fieldset:has([type=checkbox]) .fieldset-wrapper .checkbox label.form-submit,
fieldset:has([type=checkbox]) .fieldset-wrapper .radio label.form-submit,
fieldset:has([type=radio]) .fieldset-wrapper .checkbox label.form-submit,
fieldset:has([type=radio]) .fieldset-wrapper .radio label.form-submit {
  margin-left: auto;
}

/* Search Form
-----------------------------------------------------------
*/
@media (min-width: 51rem) {
  #search-form {
    margin-top: 1.6em;
  }
}
/* Donation Form
-----------------------------------------------------------
*/
.field-prefix {
  color: rgb(119, 120, 123);
}

#edit-amount {
  width: 50%;
  display: inline-block;
}

/* ITI Flag Dropdown
-----------------------------------------------------------
*/
.iti {
  margin-top: 0.25rem;
}
.iti__flag-container {
  max-width: initial;
  width: 100%;
}
.iti__country-name, .iti__dial-code {
  font-size: 1rem;
}
.iti input {
  height: 35px;
}

.give-form-payment {
  max-width: 40rem;
  margin-left: auto;
  margin-right: auto;
}
.give-form-payment .description {
  margin-block: 5px;
}

/* Media Module
===========================================================
From: /* URL: http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code/

    <div class="media">
        <a href="..." class="media_img">
            <img src="..." alt="...">
        </a>
        <div class="media_body">
            ...
        </div>
    </div>
*/
.media {
  display: table;
  margin-bottom: 1.25rem;
  width: 100%;
}
@media (min-width: 40rem) {
  .media {
    margin-bottom: 1.5rem;
  }
}

@media (min-width: 40rem) {
  .media a:hover *, .media.lightbox:hover * {
    color: rgb(0, 166, 104);
  }
}
li .media {
  margin-bottom: 0;
}

.media_image {
  display: table-cell;
  vertical-align: top;
  padding-right: 1.25rem;
  width: 6.125rem;
}
@media (min-width: 40rem) {
  .media_image {
    width: 11rem;
  }
}
.media_image > img {
  width: 100%;
  height: auto;
  display: block;
}

a:hover .media_image img {
  outline: 1px solid rgb(0, 166, 104);
}

.media_body {
  display: table-cell;
  vertical-align: top;
}

/* Project
-----------------------------------------------------------
*/
.media-project .media_image {
  padding-right: 1rem;
  width: 5.25rem;
}

.media-project .media_image svg {
  max-width: 5.25rem;
}

a:hover .media-project .media_image svg {
  outline: 0;
}

@media (min-width: 40rem) {
  a:hover .media-project .media_image svg {
    fill: rgb(0, 166, 104);
  }
}
img + .media-project {
  margin-top: 1em;
}

@media (min-width: 40rem) {
  .media.media-project {
    margin-bottom: 0.5rem;
  }
}

/* Story (video)
-----------------------------------------------------------
*/
/* Iframe (used for livestream embed so far)
-----------------------------------------------------------
*/
iframe {
  margin-left: auto;
  margin-right: auto;
  display: block;
  max-width: 100%;
}

/* Figure
===========================================================

    <figure>
        <img src="..." alt="..">
        <figcaption>
            ...
        </figcaption>
    </figure>
*/
.caption, figure figcaption {
  font-weight: 400;
  margin: 7px auto 10px 0;
  padding: 5px 0;
  max-width: min(100%, 600px) !important;
}
.caption p, figure figcaption p {
  margin-block: 0;
}
.caption p:last-child, figure figcaption p:last-child {
  margin-bottom: 0;
}

.caption-title {
  margin-block: 0;
  line-height: 1.25;
  font-weight: bold;
}

.caption-p {
  margin-top: 0;
}

.caption-credit {
  color: rgb(177, 179, 182);
  font-weight: bold;
}

figure {
  position: relative;
  margin: 0;
  width: 100%;
  max-width: calc(100vw - 2rem);
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  row-gap: 0;
}
figure > img, figure > div > img {
  display: block;
  width: 100%;
  height: auto;
}
figure picture,
figure .media-item {
  grid-column: 1/-1;
  display: flex;
  flex-direction: column;
}
figure figcaption {
  grid-row: 2;
  grid-column: span 12;
  margin-bottom: auto;
}
.caption-right figure figcaption {
  right: 0;
}
figure figcaption h3,
figure figcaption h4 {
  margin: 0;
}
.content-element-grid figure figcaption {
  display: none;
}
figure h4:not(.figcaption),
figure :not(.figcaption) h4 {
  grid-row: 2;
  grid-column: 1/-1;
  margin: 0 0 0 auto;
}
figure img {
  width: 100%;
}

@media (min-width: 40rem) {
  a:hover figure > *,
  a:hover figure > * * {
    color: rgb(0, 166, 104);
  }
}
.flow_full + figure {
  margin-top: 1.5em;
}

/* Video Column Paragraphs
===========================================================
These styles apply to 2 column video / text paragraphs using the plyr video player 
and the align-image field to control grid positioning.
*/
.video-column-paragraph .enlargable {
  cursor: pointer;
}
.video-column-paragraph__text > *:first-child {
  padding-top: 0 !important;
  margin-top: 0 !important;
}
.video-column-paragraph__video {
  position: relative;
}
.video-column-paragraph__play {
  position: absolute;
  z-index: 9;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  height: min(10rem, 80%);
  aspect-ratio: 1;
  padding: min(2rem, 10%);
  border-radius: var(--plyr-control-radius, 17%);
}
.video-column-paragraph__play svg {
  width: 100%;
  height: 100%;
}
.video-column-paragraph__play:hover {
  background: var(--colorized-background, rgb(0, 166, 104));
}
.video-column-paragraph picture:has(.video-column-paragraph__play) {
  position: relative;
}
@media (min-width: 40rem) {
  .video-column-paragraph .grid__item {
    grid-row: 1;
  }
  .video-column-paragraph__video img {
    width: 100%;
  }
  .align-image-right .video-column-paragraph__video {
    grid-column: 7/13;
  }
  .align-image-middle .video-column-paragraph__video {
    grid-column: 3/11;
  }
  .align-image-left .video-column-paragraph__video {
    grid-column: 1/7;
  }
  .align-image-full .video-column-paragraph__video {
    grid-column: 1/13;
  }
  .align-image-right .video-column-paragraph__text {
    grid-column: 1/7;
  }
  .align-image-middle .video-column-paragraph__text {
    grid-column: 3/11;
    grid-row: 2;
  }
  .align-image-left .video-column-paragraph__text {
    grid-column: 7/13;
  }
  .align-image-full .video-column-paragraph__text {
    grid-column: 1/13;
    grid-row: 2;
  }
  .video-column-paragraph.tall_image .video-column-paragraph__text {
    grid-column: span 7;
  }
  .video-column-paragraph.tall_image .video-column-paragraph__video {
    grid-column: span 5;
  }
  .video-column-paragraph.tall_image.align-image-right .video-column-paragraph__video {
    grid-column-end: -1;
  }
  .video-column-paragraph.large_image:not(.align-image-full) .video-column-paragraph__text {
    grid-column: span 5;
  }
  .video-column-paragraph.large_image:not(.align-image-full) .video-column-paragraph__video {
    grid-column: span 7;
  }
  .video-column-paragraph.large_image.align-image-right .video-column-paragraph__video {
    grid-column-end: -1;
  }
  .video-column-paragraph.large_image.align-image-middle .video-column-paragraph__video,
  .video-column-paragraph.large_image.align-image-middle .video-column-paragraph__text {
    grid-column: 2/12;
  }
}

#htmx-full.node-type-story .plyr--video {
  flex: 1;
}

.media-item-htmx {
  width: 45vw;
  cursor: pointer;
}
.media-item-htmx iframe {
  width: 100%;
  min-height: 25.2808988764vw;
  border: none;
}
.media-item .plyr__control:hover, .media-item .plyr__control:focus-visible, .media-item .plyr__control[aria-expanded=true] {
  background: var(--colorized-background, rgb(0, 166, 104));
  padding: 1rem;
  border-radius: 7px;
}
.media-item .plyr__volume {
  margin-right: auto;
}
.media-item .plyr__poster {
  background-size: cover;
}

/* Narrative video paragraph

Embedded narrative videos that are stopped have a large centered play button
This returns to normal size once video is playing
===========================================================
*/
.paragraph--type--embedded-video .plyr.plyr--video.plyr--stopped .plyr__controls {
  top: 0;
}
.paragraph--type--embedded-video .plyr.plyr--video.plyr--stopped .plyr__controls [data-plyr=play] {
  position: absolute;
  z-index: 9;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  height: min(10rem, 80%);
  aspect-ratio: 1;
}
.paragraph--type--embedded-video .plyr.plyr--video.plyr--stopped .plyr__controls [data-plyr=play] svg {
  width: 100%;
  height: 100%;
}
.paragraph--type--embedded-video .plyr.plyr--video.plyr--stopped .plyr__controls .plyr__progress__container,
.paragraph--type--embedded-video .plyr.plyr--video.plyr--stopped .plyr__controls .plyr__volume,
.paragraph--type--embedded-video .plyr.plyr--video.plyr--stopped .plyr__controls [data-plyr=fullscreen] {
  display: none;
}

#video-dialog #htmx-full .grid-story-htmx {
  cursor: default;
}
#video-dialog #htmx-full .grid-story-htmx__right {
  max-height: 90vh;
  overflow-y: scroll;
  scrollbar-color: black rgba(0, 0, 0, 0.406);
  scrollbar-width: thin;
}
#video-dialog #htmx-full .grid-story-htmx__right * {
  max-width: 100%;
}
#video-dialog #htmx-full .grid-story-htmx__right .grid-flow {
  display: block;
}
#video-dialog #htmx-full .grid-story-htmx__right .grid-paragraph-related {
  container-type: inline-size;
  gap: 1rem;
}
#video-dialog #htmx-full .grid-story-htmx__right .grid-paragraph-related .paragraph-related_links {
  grid-column: 1/-1;
}
#video-dialog #htmx-full .grid-story-htmx__right .grid-paragraph-related .paragraph-related_links > div:last-child {
  margin-bottom: 0.5rem;
}
#video-dialog #htmx-full .grid-story-htmx__right .grid-paragraph-related h4,
#video-dialog #htmx-full .grid-story-htmx__right .grid-paragraph-related .leading-arrow a {
  font-size: 1rem !important;
}
#video-dialog #htmx-full .grid-story-htmx__right .grid-paragraph-related .teaser-span-2 {
  grid-column: span 4;
}
#video-dialog #htmx-full .grid-story-htmx__right .grid-paragraph-related .grid__item-span-1.column-skipper {
  display: none;
}
#video-dialog #htmx-full .grid-story-htmx__right .grid-paragraph-related picture {
  width: 100%;
}
#video-dialog #htmx-full .grid-story-htmx__right .grid-paragraph-related .teaser {
  margin-bottom: 0;
}
@container (width < 500px) {
  #video-dialog #htmx-full .grid-story-htmx__right .grid-paragraph-related .teaser-span-2 {
    grid-column: span 6;
  }
}
@container (width < 300px) {
  #video-dialog #htmx-full .grid-story-htmx__right .grid-paragraph-related .teaser-span-2 {
    grid-column: 1/-1;
  }
}
#video-dialog #htmx-full .grid-story-htmx__right h2.title p,
#video-dialog #htmx-full .grid-story-htmx__right .caption-credit p {
  margin-block: 0;
  padding-top: 0;
}
#video-dialog #htmx-full .grid-story-htmx__right .title {
  margin-block: 0;
}
#video-dialog #htmx-full .grid-story-htmx__right .caption-credit {
  margin-top: 0.5rem;
}
#video-dialog #htmx-full .grid-story-htmx__right .leading-arrow {
  filter: invert(100%);
}
#video-dialog #htmx-full .grid-story-htmx__right .leading-arrow a {
  color: rgb(0, 0, 0);
}
#video-dialog #htmx-full .grid-story-htmx__left {
  cursor: zoom-out;
}
#video-dialog #htmx-full .grid-story-htmx__left .media-item {
  cursor: auto;
}
#video-dialog #htmx-full .grid-story-htmx__left figcaption.caption, #video-dialog #htmx-full .grid-story-htmx__left figure figcaption, figure #video-dialog #htmx-full .grid-story-htmx__left figcaption {
  display: none;
}

/* Social Icon
===========================================================
*/
.social {
  display: inline-block;
  margin-right: 0.5em;
  vertical-align: middle;
  border: 0;
  text-decoration: none;
}
.social svg {
  width: 21px;
  height: 21px;
}
.social svg path {
  fill: rgb(177, 179, 182);
}
.social:hover svg path {
  fill: rgb(0, 166, 104);
}

/* Lightbox
===========================================================
Uses Featherlight.js https://github.com/noelboss/featherlight/

Establish link:

    <figure class="lightbox" data-img="...">
        ....
    </figure>
*/
.lightbox:hover img {
  outline: 1px solid rgb(0, 166, 104);
}

.lightbox {
  cursor: pointer;
}

/* Lightbox Overlay
-----------------------------------------------------------
Generated overaly:

    <div class="lightbox-overlay">
        <div class="lightbox-overlay-content">
            <span class="lightbox-overlay-close-icon lightbox-overlay-close">✕</span>
            ...
        </div>
    </div>
*/
.lightbox-overlay {
  display: table;
  height: 100%;
  width: 100%;
  position: fixed;
  overflow: scroll;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.8);
  z-index: 99;
}

.lightbox-overlay-content {
  position: relative;
  text-align: center;
  display: table-cell;
  vertical-align: middle;
  padding: 0.625rem;
  max-width: 134.375rem;
}
.lightbox-overlay-content img {
  max-width: 100%;
  max-height: calc(100vh - (0.625rem * 2));
}

.lightbox-overlay-close {
  position: absolute;
  top: 0;
  right: 0;
  line-height: 3rem;
  width: 3rem;
  text-align: center;
  color: rgb(0, 166, 104);
  cursor: pointer;
  z-index: 999;
}

.featherlight .featherlight-close-icon {
  color: rgb(0, 166, 104);
}

/* Hide vertical translucent band from the carousel. */
.featherlight-next:hover,
.featherlight-previous:hover {
  background: none;
}

/* Hide vertical scrollbars from the carousel. */
@media all {
  .featherlight .featherlight-content {
    padding: 0;
    border: none;
    min-width: inherit;
  }
  .featherlight .featherlight-image {
    max-width: 100%;
    border: 10px solid #fff;
  }
}
@media only screen and (max-width: 1024px) {
  .featherlight .featherlight-content {
    padding: 0;
    border: none;
  }
}
/* Ajax Lightbox Overlay
-----------------------------------------------------------
 */
.ui-widget-overlay {
  opacity: 0.8;
  background: #000;
}

.ui-dialog-title {
  display: none;
}

.ui-dialog-titlebar {
  background: transparent;
  border: 0;
}

.ui-dialog {
  max-width: 500px;
  width: 100% !important;
}

body.featherlight-overlay-on .admin_tabs ul::after {
  border-bottom: 0;
}

/* Flickity
===========================================================
*/
.flickity-enabled {
  position: relative;
}
.flickity-enabled:focus {
  outline: none;
}

.flickity-viewport {
  overflow: hidden;
  position: relative;
  height: 100%;
}

.flickity-slider {
  position: absolute;
  width: 100%;
  height: 100%;
}

/* Flickity Draggable
-----------------------------------------------------------
*/
.flickity-enabled.is-draggable {
  user-select: none;
}

.flickity-enabled.is-draggable .flickity-viewport {
  cursor: grab;
}

.flickity-enabled.is-draggable .flickity-viewport.is-pointer-down {
  cursor: grabbing;
}

/* Carousel
===========================================================
*/
.carousel {
  margin-bottom: 3.625rem;
}
.carousel figure {
  padding: 1px 0;
  display: block;
  margin-right: 0.625rem;
  width: 99%;
}
@media (min-width: 40rem) {
  .carousel figure {
    margin-right: 1em;
    width: 32%;
  }
}
.carousel [data-img]:hover img {
  outline: 1px solid rgb(0, 166, 104);
}

/* Cover Carousel
===========================================================
*/
.header-carousel :not(figcaption) {
  font-size: 0.0000001px;
  color: transparent;
}
.header-carousel_wrapper {
  position: absolute;
  top: 0;
  right: 0;
  width: 100vw;
  max-width: unset;
}
@media (min-width: 40rem) {
  .header-carousel_wrapper {
    max-height: var(--coverheight);
  }
}
.toolbar-horizontal .header-carousel_wrapper {
  top: var(--gin-toolbar-height);
}
.header-carousel_wrapper * {
  max-width: unset;
}
.header-carousel_arrow {
  position: absolute;
  bottom: max(2rem, var(--carousel-padding-bottom));
  right: 5.5rem;
  cursor: pointer;
}
.header-carousel_arrow svg {
  fill: rgb(255, 255, 255);
}
@media (min-width: 40rem) and (max-width: 64rem) {
  .header-carousel_arrow {
    right: 4.5rem;
  }
}
@media (max-width: 40rem) {
  .header-carousel_arrow {
    right: 1.7rem;
  }
}
.header-carousel figure {
  position: relative;
  display: inline-block;
  max-width: 100%;
}
.header-carousel figure::before, .header-carousel figure::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.header-carousel figure::after {
  content: "after";
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0) 17%, rgba(0, 0, 0, 0) 46%, rgba(0, 0, 0, 0.5) 100%);
}
:has(.primary-nav .has_child:hover) .header-carousel figure::after {
  opacity: 0;
  z-index: -1;
}
.header-carousel__light .header-carousel figure::after {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0) 17%, rgba(255, 255, 255, 0) 46%, rgba(255, 255, 255, 0.7) 100%);
}
.header-carousel figure::before {
  content: "before";
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 44%, rgba(0, 0, 0, 0) 46%, rgba(0, 0, 0, 0.7) 100%);
  opacity: 0;
  z-index: -1;
}
:has(.primary-nav .has_child:hover) .header-carousel figure::before {
  z-index: 1;
  opacity: 1;
}
.header-carousel:not(.flickity-enabled) figure {
  max-width: 100vw;
}
.header-carousel .figcaption-wrapper {
  position: absolute;
  left: 0;
  right: 0;
  bottom: var(--carousel-padding-bottom);
  padding-inline: 2.5rem;
  z-index: 9;
}
.header-carousel figcaption {
  color: white;
  display: none;
}
.header-carousel picture,
.header-carousel img {
  width: 100%;
  object-fit: cover;
}
@media (min-width: 40rem) {
  .header-carousel picture,
  .header-carousel img {
    height: var(--coverheight);
  }
}

/* Project
===========================================================
*/
/* Project Icon
-----------------------------------------------------------
*/
@media (min-width: 40rem) {
  [class*=flow] .media-project .media_image {
    width: 25.5%;
  }
  [class*=flow] .media-project .media_image img {
    margin-top: 0.5em;
    display: inline-block;
  }
  [class*=flow] .media-project .media_body {
    vertical-align: middle;
  }
  [class*=flow] .media-project .media_body h3 {
    width: 66%;
  }
}

.grid-related .more {
  height: 3rem;
  margin-bottom: 1rem;
}
.grid-related .more svg {
  position: relative;
  top: 1rem;
  left: -2rem;
}
.grid-related .related-links {
  margin-left: 20%;
}

.teaser-span-2 {
  max-width: calc(100vw - 2rem);
}
.teaser-span-2 picture,
.teaser-span-2 figcaption {
  margin-left: auto;
}
.teaser-span-2 figcaption {
  max-width: 70%;
  margin-left: auto;
}

@media (min-width: 40rem) {
  .project-details + .paragraphs > .grid-halves:first-child > .grid__item-flow_right + .grid__item-flow_left.image-block__text {
    margin-top: 1rem;
  }
}
/*
special situation for high res/retina screens
*/
@media (max-width: 40rem) and (-webkit-device-pixel-ratio: 3), (max-width: 40rem) and (-webkit-device-pixel-ratio: 2) {
  .grid__item.doublewide {
    width: 100%;
  }
}
/* Teaser
===========================================================
A block for styling title and link groupings consistently.

    <div class="teaser">
    ...
    </div>
*/
/* The "M" image is outside of the teaser class but for the moment we only
 * want to affect ones on teasers, so putting this hack here.
 *
 * @TODO Decide whether to remove the "M" images entirely, keep them on
 * project pages but not on teasers, etc. but anyhow stop printing the
 * image and then hackily hiding it like this.  See issue #101
 */
.grid__item .media-project .media_image {
  display: none;
}

.teaser {
  font-size: 1rem;
}
.teaser * {
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 0;
  padding-bottom: 0;
}

a:hover .teaser .eyebrow,
a:hover .teaser .descriptor {
  color: rgb(0, 166, 104);
}

@media (min-width: 40rem) {
  a:hover .teaser .title {
    color: rgb(0, 166, 104);
  }
}
/* Eyebrow
===========================================================
A line above the title, ofent used for a provocative
question to tease the subject.

    <h3 class="eyebrow">...</h3>
*/
.teaser .eyebrow {
  color: rgb(119, 120, 123);
  font-weight: normal;
  margin-top: 0.5rem;
}

.fonts-loaded .teaser .eyebrow {
  font-family: "Graphik";
}

/* Title
===========================================================

    <h3 class="title">...</h3>
*/
.teaser .title {
  color: rgb(0, 0, 0);
  position: relative;
  margin-block: 12px 0;
}

/* Descriptor
===========================================================

    <h3 class="descriptor">...</h3>
*/
.teaser .descriptor {
  color: rgb(119, 120, 123);
  margin-top: 0.5rem;
  font-size: 0.625rem;
}
@media (min-width: 40rem) {
  .teaser .descriptor {
    font-size: 0.875rem;
  }
}

/* Grid Descrition
===========================================================

    <p class="grid-description">...</p>
 */
.grid-description {
  padding: 0;
}

.teaser-plain {
  border-top: 1px solid rgb(0, 166, 104);
  padding-top: 1.1rem;
  padding-bottom: 1.2rem;
}
.teaser-plain a {
  text-decoration: none;
}
.teaser-plain .h4, .teaser-plain .caption, .teaser-plain .caption-title, .teaser-plain figure figcaption, figure .teaser-plain figcaption {
  margin: 0;
}

.search-page.facets-top .views-exposed-form {
  margin-top: 9rem;
  display: flex;
}
.search-page.facets-top .views-exposed-form .form-item-search input {
  padding: 0.5rem;
  border: 0;
  border-bottom: 0.1rem solid rgb(119, 120, 123);
}
.search-page.facets-top .views-exposed-form .form-item-search input::placeholder {
  font-weight: 200;
  color: rgb(119, 120, 123);
}
.search-page.facets-top .views-exposed-form .form-actions {
  margin: 0;
  height: unset;
}
.search-page.facets-top .views-exposed-form .form-actions input.button.form-submit {
  display: block;
  background-image: url(../images/search.svg);
  background-size: 1.8rem;
  background-repeat: no-repeat;
  background-position: center;
  height: 3rem;
  width: 3rem;
  border: none;
  padding: 0;
  color: transparent;
  font-size: 0.0001rem;
}
.search-page article {
  margin-bottom: 1rem;
}
.search-page .h3.title {
  margin-bottom: 0.4rem;
}

/* Facets which show up horizontally at top of page
/* To use add .facets-top to a facet view's css classes
-------------------------------------------------------
*/
.facets-top::before {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  z-index: -1;
  content: url(/themes/butaro/images/facet-x.svg);
}
.facets-top__open-all {
  cursor: pointer;
  padding-block: 0.5rem;
  margin-top: 1.5rem;
}
.facets-top .views-exposed-form {
  row-gap: 1rem;
  padding-bottom: 2rem;
}
.facets-top .views-exposed-form .form-item {
  display: flex;
  flex-direction: column;
  padding-bottom: 1rem;
  row-gap: 0;
  margin-bottom: 0;
  position: relative;
}
.facets-top .views-exposed-form .form-item label {
  margin-bottom: 0.5rem;
  cursor: pointer;
}
.facets-top .views-exposed-form .form-item label::before {
  content: "";
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 1px solid rgb(0, 0, 0);
  background-color: rgb(0, 0, 0);
  margin-right: 0.5rem;
}
.facets-top .views-exposed-form .form-item.closed label::before {
  background-color: transparent;
}
.facets-top .views-exposed-form .form-item.closed .bef-links .bef-link:not(.bef-link--selected)::before {
  overflow: hidden;
  font-size: 0;
  color: transparent;
}
.facets-top .views-exposed-form .form-item.closed .bef-links a.bef-link:not(.bef-link--selected) {
  max-height: 0;
  overflow: hidden;
  flex: 0;
  color: transparent;
}
.facets-top .views-exposed-form .form-item.form-item-sort .bef-links ul li:first-child {
  display: none;
}
@media (max-width: 64rem) {
  .facets-top .views-exposed-form .form-item {
    flex-direction: column;
    padding-block: 0;
  }
  .facets-top .views-exposed-form .form-item:last-child {
    padding-bottom: 3rem;
  }
}
.facets-top .views-exposed-form .form-item .block-facet--links:not(.hidden),
.facets-top .views-exposed-form .form-item .bef-links {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 450px;
  font-size: 0.9rem;
}
.facets-top .views-exposed-form .form-item .block-facet--links:not(.hidden) ul,
.facets-top .views-exposed-form .form-item .bef-links ul {
  padding-left: 0;
}
.facets-top .views-exposed-form .form-item .block-facet--links:not(.hidden) ul li,
.facets-top .views-exposed-form .form-item .bef-links ul li {
  list-style: none;
  display: flex;
  flex-direction: column;
  padding-block: 0;
}
.facets-top .views-exposed-form .form-item .block-facet--links:not(.hidden) ul li a.bef-link,
.facets-top .views-exposed-form .form-item .bef-links ul li a.bef-link {
  text-decoration: none;
  color: rgb(177, 179, 182);
  font-weight: 900;
  transition: all ease-in-out 0.3s;
  max-height: 1lh;
}
.facets-top .views-exposed-form .form-item .block-facet--links:not(.hidden) ul li a.bef-link::before,
.facets-top .views-exposed-form .form-item .bef-links ul li a.bef-link::before {
  content: "";
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 1px solid rgb(0, 0, 0);
  background-color: rgb(0, 0, 0);
  margin-right: 0.5rem;
}
.facets-top .views-exposed-form .form-item .block-facet--links:not(.hidden) ul li a.bef-link::before,
.facets-top .views-exposed-form .form-item .bef-links ul li a.bef-link::before {
  border-color: transparent;
  background-color: transparent;
}
.facets-top .views-exposed-form .form-item .block-facet--links:not(.hidden) ul li a.bef-link:hover,
.facets-top .views-exposed-form .form-item .bef-links ul li a.bef-link:hover {
  color: rgb(0, 0, 0);
}
.facets-top .views-exposed-form .form-item .block-facet--links:not(.hidden) ul li a.bef-link:hover::before,
.facets-top .views-exposed-form .form-item .bef-links ul li a.bef-link:hover::before {
  background-color: rgb(255, 255, 255);
  border-color: rgb(0, 0, 0);
}
.facets-top .views-exposed-form .form-item .block-facet--links:not(.hidden) ul li a.bef-link--selected,
.facets-top .views-exposed-form .form-item .bef-links ul li a.bef-link--selected {
  color: rgb(0, 0, 0);
}
.facets-top .views-exposed-form .form-item .block-facet--links:not(.hidden) ul li a.bef-link--selected::before,
.facets-top .views-exposed-form .form-item .bef-links ul li a.bef-link--selected::before {
  background-color: black;
}
.facets-top .views-exposed-form .form-item .block-facet--links:not(.hidden) ul li a.bef-link--selected:hover::before,
.facets-top .views-exposed-form .form-item .bef-links ul li a.bef-link--selected:hover::before {
  border-color: transparent;
  background-image: url(/themes/butaro/images/facet-x.svg);
  background-size: cover;
}
.facets-top .views-exposed-form .form-actions {
  grid-column: 1/-1;
  height: 0;
  margin-top: -1.5rem;
}
.facets-top .views-exposed-form .form-actions input.button {
  border: none;
  padding: 0;
  margin: 0 0 0 auto;
  border-radius: 0;
  background-color: transparent;
}
.facets-top .views-exposed-form .form-actions input.button:hover {
  background-color: transparent;
  color: rgb(0, 0, 0);
  border: rgb(0, 0, 0) dotted 1px;
  padding: 1px;
}
.facets-top .views-exposed-form input.form-submit[id^=edit-submit] {
  display: none;
}
.facets-top nav.pager {
  grid-column: 1/-1;
  justify-self: center;
}

/* Support
===========================================================

    <div class="support">
        <div class="support_header">...</div>
        <div class="support_pitch">...</div>
        <div class="support_action">...</div>
    </div>
*/
.support {
  box-sizing: border-box;
  padding: 0.625rem;
  color: rgb(255, 255, 255);
  background-color: rgb(0, 166, 104);
}
.support * {
  color: rgb(255, 255, 255);
}
.support:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
.support .btn, .support fieldset:has([type=checkbox]) .fieldset-wrapper .checkbox label, fieldset:has([type=checkbox]) .fieldset-wrapper .checkbox .support label,
.support fieldset:has([type=checkbox]) .fieldset-wrapper .radio label,
fieldset:has([type=checkbox]) .fieldset-wrapper .radio .support label, .support fieldset:has([type=radio]) .fieldset-wrapper .checkbox label, fieldset:has([type=radio]) .fieldset-wrapper .checkbox .support label,
.support fieldset:has([type=radio]) .fieldset-wrapper .radio label,
fieldset:has([type=radio]) .fieldset-wrapper .radio .support label {
  margin: 0;
}
.support .btn-outline {
  border-color: rgb(255, 255, 255);
}

@media (min-width: 40rem) {
  .support_pitch {
    width: 49%;
    margin-right: 2%;
    float: left;
  }
  .support_action {
    width: 49%;
    float: left;
  }
}
/* Donate Button
===========================================================
*/
a.donate-btn {
  display: block;
  border-radius: 50%;
  width: 5.25rem;
  height: 5.25rem;
  text-align: center;
  line-height: 5.25rem;
  color: rgb(255, 255, 255);
  background-color: rgb(0, 166, 104);
}
a.donate-btn::after {
  border-bottom: none;
}

a.donate-btn:hover {
  color: rgb(0, 166, 104);
  background-color: rgb(255, 255, 255);
  text-decoration: none;
  border: 0;
}

/* Related content
===========================================================
*/
.paragraph-related_links > div:not(:first-child),
.related-content_links > div:not(:first-child) {
  margin-block: 1.5rem;
}
.paragraph-related_links > div:last-child,
.related-content_links > div:last-child {
  margin-bottom: 1.5rem;
}
.paragraph-related .grid-related-content,
.related-content .grid-related-content {
  row-gap: 0;
}
.paragraph-related .teaser,
.related-content .teaser {
  margin-bottom: 1rem;
}
.paragraph-related .teaser figure + h4,
.related-content .teaser figure + h4 {
  margin-top: 5px;
}
@media (min-width: 64rem) {
  .paragraph-related_links, .paragraph-related_spacer,
  .related-content_links,
  .related-content_spacer {
    grid-row: 1/5;
  }
  .paragraph-related_links,
  .related-content_links {
    grid-column: 1/span 3;
  }
  .paragraph-related .teaser,
  .related-content .teaser {
    grid-column: span 2;
    margin-bottom: 3rem;
  }
}
@media (min-width: 40rem) and (max-width: 64rem) {
  .paragraph-related .teaser,
  .related-content .teaser {
    grid-column: span 3;
  }
  .paragraph-related .column-skipper,
  .related-content .column-skipper {
    grid-column: span 1;
  }
}
.paragraph-related .grid-paragraph-related,
.related-content .grid-paragraph-related {
  gap: 0;
}

/* Messages
===========================================================
Drupal system messages

    <div class="messages messages--error">
        <div role="alert">
            <h2 class="visually-hidden">Error message</h2>
            ...
        </div>
    </div>

    <div class="messages messages--status">
        <h2 class="visually-hidden">Status message</h2>
        ...
    </div>
*/
.messages {
  border-radius: 1.5em;
  padding: 0.5em 1em;
  margin-block: 0.75em;
  margin-top: 0.75 !important;
  background-color: rgb(239, 240, 240);
}
.messages a:hover {
  background-color: transparent;
}

.messages--status {
  color: rgb(255, 255, 255);
  background-color: rgb(0, 179, 227);
}

.messages--error {
  color: rgb(255, 255, 255);
  background-color: rgb(255, 89, 89);
}

.messages--warning {
  background-color: rgb(250, 214, 50);
}

/*
_module-aspectratio.scss
===========================================================
*/
[class^=aspect-] {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: rgb(239, 240, 240);
}
[class^=aspect-] > img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
}

/* polyvision (4:1) */
.aspect-polyvision {
  padding-bottom: 25%;
}

.aspect-polyvision > .inner {
  background-color: cyan;
}

/* panavision (2.75:1, ultra panavision 70) */
.aspect-panavision {
  padding-bottom: 36.36%;
}

.aspect-panavision > .inner {
  background-color: purple;
}

/* anamorphic (2.39:1, wide-screen) */
.aspect-panavision {
  padding-bottom: 36.36%;
}

.aspect-panavision > .inner {
  background-color: purple;
}

/* anamorphic (2.39:1, wide-screen) */
.aspect-anamorphic {
  padding-bottom: 41.84%;
}

.aspect-anamorphic > .inner {
  background-color: orange;
}

/* half (2:1) */
.aspect-half {
  padding-bottom: 50%;
}

.aspect-half > .inner {
  background-color: magenta;
}

/* usa (1.85:1) */
.aspect-usa {
  padding-bottom: 54.05%;
}

.aspect-usa > .inner {
  background-color: green;
}

/* hd (1.78:1 or 16:9) */
.aspect-hd {
  padding-bottom: 56.25%;
}

.aspect-hd > .inner {
  background-color: yellow;
}

/* euro (1.66:1) */
.aspect-euro {
  padding-bottom: 60.24%;
}

.aspect-euro > .inner {
  background-color: blue;
}

/* golden ratio (1.61803398875:1) */
.aspect-golden-ratio {
  padding-bottom: 61.8%;
}

.aspect-golden-ratio > .inner {
  background-color: lime;
}

/* sd (3:4) */
.aspect-sd {
  padding-bottom: 75%;
}

.aspect-sd > .inner {
  background-color: red;
}

/* aspect-square */
.aspect-square {
  padding-bottom: 100%;
}

.aspect-square > .inner {
  background-color: gold;
}

/* portrait (4:3) */
.aspect-portrait {
  padding-bottom: 133.33%;
}

.aspect-portrait > .inner {
  background-color: brown;
}

/* Pager
===========================================================
Drupal pager
*/
.pager {
  font-weight: 700;
  margin-top: 5rem;
  grid-column: 1/-1;
}
.pager__items {
  display: flex;
  flex-flow: wrap;
  justify-content: center;
  gap: 2rem;
  margin-inline: auto;
  list-style: none;
  width: fit-content;
  padding-left: 0;
}
.pager__item .i {
  border: rgb(0, 166, 104) 1px solid;
  width: 48px;
  aspect-ratio: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  color: rgb(0, 166, 104);
}
.pager__item--previous [aria-hidden=true], .pager__item--next [aria-hidden=true], .pager__item--first [aria-hidden=true], .pager__item--last [aria-hidden=true] {
  display: none;
}
.pager__item--previous a, .pager__item--next a, .pager__item--first a, .pager__item--last a {
  width: 100%;
  height: 100%;
  content: "";
  background-repeat: no-repeat;
  background-position: center;
}
.pager__item--previous a, .pager__item--next a {
  background-image: url(../images/side-caret.svg);
}
.pager__item--first a, .pager__item--last a {
  background-image: url(../images/double-side-caret.svg);
}
.pager__item--ellipsis i {
  font-size: 0px;
  color: transparent;
}
.pager__item--ellipsis i::after {
  width: 100%;
  height: 100%;
  content: "";
  background-repeat: no-repeat;
  background-position: center;
  background-size: 19px;
  background-image: url(../images/pager-ellipsis.svg);
}
.pager__item--previous a, .pager__item--first a {
  transform: scaleX(-1);
}
.pager__item:hover {
  background-color: #e2fff3;
}
.pager__item.is-active {
  background-color: rgb(0, 166, 104);
}
.pager__item.is-active a {
  color: rgb(255, 255, 255);
}
.pager a {
  text-decoration: none;
  color: rgb(0, 166, 104);
}

/* Team layout
-------------------------------------------------------------------------------
*/
.team-view .grid-quarters .grid__item figure,
.team-view.grid-quarters .grid__item figure,
.board-view.grid-quarters .grid__item figure,
.person-grid.grid-quarters .grid__item figure {
  display: flex;
  flex-direction: column;
}
.team-view .grid-quarters .grid__item .person-name,
.team-view .grid-quarters .grid__item .person-title,
.team-view.grid-quarters .grid__item .person-name,
.team-view.grid-quarters .grid__item .person-title,
.board-view.grid-quarters .grid__item .person-name,
.board-view.grid-quarters .grid__item .person-title,
.person-grid.grid-quarters .grid__item .person-name,
.person-grid.grid-quarters .grid__item .person-title {
  margin-block: 12px 0;
}
.team-view .grid-quarters .grid__item .person-name,
.team-view.grid-quarters .grid__item .person-name,
.board-view.grid-quarters .grid__item .person-name,
.person-grid.grid-quarters .grid__item .person-name {
  font-weight: 600;
}
@media (max-width: 40rem) {
  .team-view .grid-quarters .grid__item,
  .team-view.grid-quarters .grid__item,
  .board-view.grid-quarters .grid__item,
  .person-grid.grid-quarters .grid__item {
    grid-column: span 6;
  }
}
.team-view .grid-quarters .grid__item.doublewide,
.team-view.grid-quarters .grid__item.doublewide,
.board-view.grid-quarters .grid__item.doublewide,
.person-grid.grid-quarters .grid__item.doublewide {
  margin: auto;
  --dw-title-offset: 5px;
}
.team-view .grid-quarters .grid__item.doublewide.dw-lightbox:not(.is-active),
.team-view.grid-quarters .grid__item.doublewide.dw-lightbox:not(.is-active),
.board-view.grid-quarters .grid__item.doublewide.dw-lightbox:not(.is-active),
.person-grid.grid-quarters .grid__item.doublewide.dw-lightbox:not(.is-active) {
  cursor: pointer;
}
.team-view .grid-quarters .grid__item.doublewide .title,
.team-view.grid-quarters .grid__item.doublewide .title,
.board-view.grid-quarters .grid__item.doublewide .title,
.person-grid.grid-quarters .grid__item.doublewide .title {
  margin-top: var(--dw-title-offset);
}
@media (min-width: 64rem) {
  .team-view .grid-quarters .grid__item.doublewide:nth-of-type(odd), .team-view .grid-quarters .grid__item.doublewide:first-child,
  .team-view.grid-quarters .grid__item.doublewide:nth-of-type(odd),
  .team-view.grid-quarters .grid__item.doublewide:first-child,
  .board-view.grid-quarters .grid__item.doublewide:nth-of-type(odd),
  .board-view.grid-quarters .grid__item.doublewide:first-child,
  .person-grid.grid-quarters .grid__item.doublewide:nth-of-type(odd),
  .person-grid.grid-quarters .grid__item.doublewide:first-child {
    grid-column: 7/13 !important;
  }
  .team-view .grid-quarters .grid__item.doublewide:nth-of-type(odd) .postit, .team-view .grid-quarters .grid__item.doublewide:first-child .postit,
  .team-view.grid-quarters .grid__item.doublewide:nth-of-type(odd) .postit,
  .team-view.grid-quarters .grid__item.doublewide:first-child .postit,
  .board-view.grid-quarters .grid__item.doublewide:nth-of-type(odd) .postit,
  .board-view.grid-quarters .grid__item.doublewide:first-child .postit,
  .person-grid.grid-quarters .grid__item.doublewide:nth-of-type(odd) .postit,
  .person-grid.grid-quarters .grid__item.doublewide:first-child .postit {
    left: -320px;
  }
}
@media (max-width: 64rem) {
  .team-view .grid-quarters .grid__item.doublewide,
  .team-view.grid-quarters .grid__item.doublewide,
  .board-view.grid-quarters .grid__item.doublewide,
  .person-grid.grid-quarters .grid__item.doublewide {
    grid-column: 1/13;
  }
}
.team-view .grid-quarters .grid__item.doublewide:nth-of-type(1),
.team-view.grid-quarters .grid__item.doublewide:nth-of-type(1),
.board-view.grid-quarters .grid__item.doublewide:nth-of-type(1),
.person-grid.grid-quarters .grid__item.doublewide:nth-of-type(1) {
  grid-row: calc(1 * 4 - 1)/span 2 !important;
}
.team-view .grid-quarters .grid__item.doublewide:nth-of-type(2),
.team-view.grid-quarters .grid__item.doublewide:nth-of-type(2),
.board-view.grid-quarters .grid__item.doublewide:nth-of-type(2),
.person-grid.grid-quarters .grid__item.doublewide:nth-of-type(2) {
  grid-row: calc(2 * 4 - 1)/span 2 !important;
}
.team-view .grid-quarters .grid__item.doublewide:nth-of-type(3),
.team-view.grid-quarters .grid__item.doublewide:nth-of-type(3),
.board-view.grid-quarters .grid__item.doublewide:nth-of-type(3),
.person-grid.grid-quarters .grid__item.doublewide:nth-of-type(3) {
  grid-row: calc(3 * 4 - 1)/span 2 !important;
}
.team-view .grid-quarters .grid__item.doublewide:nth-of-type(4),
.team-view.grid-quarters .grid__item.doublewide:nth-of-type(4),
.board-view.grid-quarters .grid__item.doublewide:nth-of-type(4),
.person-grid.grid-quarters .grid__item.doublewide:nth-of-type(4) {
  grid-row: calc(4 * 4 - 1)/span 2 !important;
}
.team-view .grid-quarters .grid__item.doublewide:nth-of-type(5),
.team-view.grid-quarters .grid__item.doublewide:nth-of-type(5),
.board-view.grid-quarters .grid__item.doublewide:nth-of-type(5),
.person-grid.grid-quarters .grid__item.doublewide:nth-of-type(5) {
  grid-row: calc(5 * 4 - 1)/span 2 !important;
}
.team-view .grid-quarters .grid__item.doublewide:nth-of-type(6),
.team-view.grid-quarters .grid__item.doublewide:nth-of-type(6),
.board-view.grid-quarters .grid__item.doublewide:nth-of-type(6),
.person-grid.grid-quarters .grid__item.doublewide:nth-of-type(6) {
  grid-row: calc(6 * 4 - 1)/span 2 !important;
}
.team-view .grid-quarters .grid__item.doublewide:nth-of-type(7),
.team-view.grid-quarters .grid__item.doublewide:nth-of-type(7),
.board-view.grid-quarters .grid__item.doublewide:nth-of-type(7),
.person-grid.grid-quarters .grid__item.doublewide:nth-of-type(7) {
  grid-row: calc(7 * 4 - 1)/span 2 !important;
}
.team-view .grid-quarters .grid__item.doublewide:nth-of-type(8),
.team-view.grid-quarters .grid__item.doublewide:nth-of-type(8),
.board-view.grid-quarters .grid__item.doublewide:nth-of-type(8),
.person-grid.grid-quarters .grid__item.doublewide:nth-of-type(8) {
  grid-row: calc(8 * 4 - 1)/span 2 !important;
}
.team-view .grid-quarters .grid__item.doublewide:nth-of-type(9),
.team-view.grid-quarters .grid__item.doublewide:nth-of-type(9),
.board-view.grid-quarters .grid__item.doublewide:nth-of-type(9),
.person-grid.grid-quarters .grid__item.doublewide:nth-of-type(9) {
  grid-row: calc(9 * 4 - 1)/span 2 !important;
}
.team-view .grid-quarters .grid__item.doublewide:nth-of-type(10),
.team-view.grid-quarters .grid__item.doublewide:nth-of-type(10),
.board-view.grid-quarters .grid__item.doublewide:nth-of-type(10),
.person-grid.grid-quarters .grid__item.doublewide:nth-of-type(10) {
  grid-row: calc(10 * 4 - 1)/span 2 !important;
}
.team-view .grid-quarters .grid__item.doublewide:nth-of-type(11),
.team-view.grid-quarters .grid__item.doublewide:nth-of-type(11),
.board-view.grid-quarters .grid__item.doublewide:nth-of-type(11),
.person-grid.grid-quarters .grid__item.doublewide:nth-of-type(11) {
  grid-row: calc(11 * 4 - 1)/span 2 !important;
}
.team-view .grid-quarters .grid__item.doublewide:nth-of-type(12),
.team-view.grid-quarters .grid__item.doublewide:nth-of-type(12),
.board-view.grid-quarters .grid__item.doublewide:nth-of-type(12),
.person-grid.grid-quarters .grid__item.doublewide:nth-of-type(12) {
  grid-row: calc(12 * 4 - 1)/span 2 !important;
}
.team-view .grid-quarters .grid__item.doublewide .replacement-image,
.team-view .grid-quarters .grid__item.doublewide .postit,
.team-view.grid-quarters .grid__item.doublewide .replacement-image,
.team-view.grid-quarters .grid__item.doublewide .postit,
.board-view.grid-quarters .grid__item.doublewide .replacement-image,
.board-view.grid-quarters .grid__item.doublewide .postit,
.person-grid.grid-quarters .grid__item.doublewide .replacement-image,
.person-grid.grid-quarters .grid__item.doublewide .postit {
  display: none;
}
.team-view .grid-quarters .grid__item.doublewide .postit,
.team-view.grid-quarters .grid__item.doublewide .postit,
.board-view.grid-quarters .grid__item.doublewide .postit,
.person-grid.grid-quarters .grid__item.doublewide .postit {
  background-color: rgb(255, 255, 255);
  font-size: 1rem;
}
.team-view .grid-quarters .grid__item.doublewide .postit .field-link a,
.team-view.grid-quarters .grid__item.doublewide .postit .field-link a,
.board-view.grid-quarters .grid__item.doublewide .postit .field-link a,
.person-grid.grid-quarters .grid__item.doublewide .postit .field-link a {
  text-decoration: none;
}
.team-view .grid-quarters .grid__item.doublewide .postit .svg-arrow,
.team-view.grid-quarters .grid__item.doublewide .postit .svg-arrow,
.board-view.grid-quarters .grid__item.doublewide .postit .svg-arrow,
.person-grid.grid-quarters .grid__item.doublewide .postit .svg-arrow {
  width: 21px;
  vertical-align: middle;
}
.team-view .grid-quarters .grid__item.doublewide.is-active,
.team-view.grid-quarters .grid__item.doublewide.is-active,
.board-view.grid-quarters .grid__item.doublewide.is-active,
.person-grid.grid-quarters .grid__item.doublewide.is-active {
  position: relative;
  z-index: 101;
  display: flex;
}
.team-view .grid-quarters .grid__item.doublewide.is-active .postit,
.team-view.grid-quarters .grid__item.doublewide.is-active .postit,
.board-view.grid-quarters .grid__item.doublewide.is-active .postit,
.person-grid.grid-quarters .grid__item.doublewide.is-active .postit {
  height: 320px;
  width: 320px;
  display: block;
  position: absolute;
}
@media (min-width: 64rem) {
  .team-view .grid-quarters .grid__item.doublewide.is-active .postit,
  .team-view.grid-quarters .grid__item.doublewide.is-active .postit,
  .board-view.grid-quarters .grid__item.doublewide.is-active .postit,
  .person-grid.grid-quarters .grid__item.doublewide.is-active .postit {
    right: -320px;
  }
}
@media (max-width: 64rem) {
  .team-view .grid-quarters .grid__item.doublewide.is-active .postit,
  .team-view.grid-quarters .grid__item.doublewide.is-active .postit,
  .board-view.grid-quarters .grid__item.doublewide.is-active .postit,
  .person-grid.grid-quarters .grid__item.doublewide.is-active .postit {
    bottom: -320px;
  }
}
.team-view .grid-quarters .grid__item.doublewide.is-active .replacement-image,
.team-view.grid-quarters .grid__item.doublewide.is-active .replacement-image,
.board-view.grid-quarters .grid__item.doublewide.is-active .replacement-image,
.person-grid.grid-quarters .grid__item.doublewide.is-active .replacement-image {
  display: block;
}
.team-view .grid-quarters .grid__item.doublewide.is-active .original,
.team-view.grid-quarters .grid__item.doublewide.is-active .original,
.board-view.grid-quarters .grid__item.doublewide.is-active .original,
.person-grid.grid-quarters .grid__item.doublewide.is-active .original {
  display: none;
}
.team-view .grid-quarters .grid__item.doublewide.is-active .large-popup,
.team-view.grid-quarters .grid__item.doublewide.is-active .large-popup,
.board-view.grid-quarters .grid__item.doublewide.is-active .large-popup,
.person-grid.grid-quarters .grid__item.doublewide.is-active .large-popup {
  display: block;
  margin: auto;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 5vw;
}
.team-view .grid-quarters .grid__item.doublewide.is-active figure,
.team-view.grid-quarters .grid__item.doublewide.is-active figure,
.board-view.grid-quarters .grid__item.doublewide.is-active figure,
.person-grid.grid-quarters .grid__item.doublewide.is-active figure {
  width: auto;
}

.grid-team-page-header p {
  margin-bottom: 8rem;
}

.team-modal {
  margin-top: var(--gin-toolbar-height);
}
.team-modal_close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  cursor: pointer;
}
:not(#htmx_full) .team-modal_close {
  display: none;
}
.team-modal_left {
  display: flex;
  justify-content: center;
  padding: 2rem 1rem;
}
.team-modal_left figure {
  cursor: default;
}
.team-modal_left figure [data-contextual-id] {
  position: absolute;
}
.team-modal_left__faces {
  aspect-ratio: 1;
  display: flex;
  max-width: 100%;
  column-gap: 5rem;
}
.team-modal_left__faces.collage figure:first-of-type {
  margin-top: 0;
  width: 90%;
}
@media (min-width: 75rem) {
  .team-modal_left__faces.collage figure:first-of-type {
    width: 59%;
  }
}
.team-modal_left__faces.collage figure:nth-of-type(2) {
  width: 41%;
}
@media (min-width: 75rem) {
  .team-modal_left__faces.collage figure:nth-of-type(2) {
    margin-top: 45%;
  }
}
@media (max-width: 75rem) {
  .team-modal_left__faces.collage {
    flex-direction: column-reverse;
    padding: 2rem 0;
    justify-content: center;
  }
  .team-modal_left__faces.collage figure:nth-of-type(2) {
    align-self: flex-end;
  }
}
.team-modal_left__faces:not(.collage) {
  align-items: center;
  justify-content: center;
  max-height: 90vh;
}
@media (min-width: 75rem) {
  .team-modal_left {
    padding: 4rem;
  }
}
.team-modal figure {
  width: fit-content;
  height: fit-content;
}
.team-modal figure picture {
  display: flex;
}
.team-modal_affiliations, .team-modal_links {
  margin-left: auto;
  height: fit-content;
  padding: 1rem;
  border: 1px black solid;
  border-inline: 0;
  margin-block: 0.75rem;
}
.team-modal_affiliations + .team-modal_links, .team-modal_links + .team-modal_links {
  border-top: 0;
  padding-top: 0;
}
.team-modal_affiliations_header, .team-modal_links_header {
  text-transform: uppercase;
  color: rgb(119, 120, 123);
  margin-top: 0;
}
.team-modal_affiliations ul, .team-modal_links ul {
  list-style: none;
  padding-left: 0;
  margin-block: 0;
}
.team-modal_affiliations ul li, .team-modal_links ul li {
  margin-block: 0.5rem;
}
.team-modal_affiliations ul li:last-child, .team-modal_links ul li:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
}
.team-modal_right {
  background: white;
  height: auto;
  padding: 1rem;
}
.team-modal_paragraphs .video-column-paragraph {
  gap: 0;
}
.team-modal_paragraphs .video-column-paragraph .media-item > figure {
  width: 100%;
}
.team-modal_paragraphs .grid-halves,
.team-modal_paragraphs .grid-thirds {
  container-type: size;
}
@container (max-width: 540px) {
  .team-modal_paragraphs .grid-halves > .grid__item,
  .team-modal_paragraphs .grid-thirds > .grid__item {
    grid-column: span 12;
    grid-row: unset;
  }
}
@media (min-width: 820px) {
  .team-modal {
    display: flex;
    justify-content: space-between;
  }
  #team-modal-container .team-modal_left, #team-modal-container .team-modal_right {
    max-height: 100vh;
  }
  #team-modal-container .team-modal_left::-webkit-scrollbar, #team-modal-container .team-modal_right::-webkit-scrollbar {
    width: 0;
    background: transparent;
    opacity: 0;
  }
  .team-modal_left {
    flex-grow: 1;
  }
  #team-modal-container .team-modal_right {
    padding: 3rem;
    height: 100vh;
    overflow-y: scroll;
  }
  .team-modal_quotation {
    width: 25vw;
    margin-inline: auto;
  }
}
@media (min-width: 820px) and (max-width: 1920px) {
  .team-modal_left {
    max-width: calc(100vw - 600px);
    width: 100%;
  }
  .team-modal_right {
    width: 600px;
  }
}
@media (min-width: 1920px) {
  .team-modal_left {
    max-width: calc(100% - 850px);
  }
  .team-modal_right {
    width: 850px;
  }
}

#team-modal-container[open] {
  max-width: 100vw;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 0;
  display: block;
  z-index: 99;
  overflow: scroll;
  display: revert;
  border: 0;
}
#team-modal-container[open].is-active, .active #team-modal-container[open] {
  height: 100vh;
  background-color: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  transition: height 0ms 0ms, background-color 400ms 1ms ease-in, backdrop-filter 400ms 1ms ease-in;
}
@media (min-width: 64rem) {
  #team-modal-container[open].is-active, .active #team-modal-container[open] {
    overflow: hidden;
  }
}

/* News and Awards page
===========================================================
*/
:root {
  --sliderheight: 540px;
}

.promoted.grid-news {
  margin-top: 3rem;
  margin-bottom: 4rem;
}
@media (min-width: 40rem) {
  .promoted.grid-news > .grid__item {
    grid-column: span 6;
  }
}
@media (min-width: 90rem) {
  .promoted.grid-news > .grid__item {
    grid-column: span 3;
  }
}

.teaser__news {
  border: 1px rgb(0, 166, 104) solid;
}
.teaser__news_content {
  position: relative;
}
.teaser__news_content .title.h4, .teaser__news_content .title.caption, .teaser__news_content .title.caption-title, .teaser__news_content figure figcaption.title, figure .teaser__news_content figcaption.title {
  font-size: 1.1rem;
  font-weight: 600;
  margin-top: 0;
}
.teaser__news a {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.teaser__news_bottom {
  display: flex;
  flex-direction: column;
  padding: 1rem;
}
.teaser__news .title {
  margin-top: auto;
  margin-bottom: 0.25rem;
}
picture + .teaser__news_bottom {
  margin-top: auto;
}
.teaser__news:not(.teaser__news_carousel) .teaser__news_bottom:first-child {
  margin-top: auto;
}
.teaser__news_arrow {
  display: flex;
  padding-top: 1rem;
}
.teaser__news_arrow svg {
  margin-left: auto;
}
.teaser__news_arrow svg path {
  fill: rgb(0, 166, 104);
}

.news-featured .grid__item {
  display: flex;
}
.news-featured .grid__item a {
  display: flex;
  width: fit-content;
  height: fit-content;
}
.news-featured .grid__item .postit {
  width: 300px;
  aspect-ratio: auto;
}
@media (max-width: 64rem) {
  .news-featured .grid__item {
    flex-direction: column;
  }
}
@media (min-width: 64rem) {
  .news-featured {
    margin-bottom: 5rem;
    margin-top: 3rem;
  }
  .news-featured[class*=" grid-"]:not([class*=__]) {
    row-gap: 3.5vw;
  }
  .news-featured .grid__item {
    grid-column: span 6;
  }
  .news-featured .grid__item .postit {
    display: flex;
    flex-direction: column;
    aspect-ratio: 1;
  }
  .news-featured .grid__item .postit div:first-child {
    margin-top: auto;
  }
  .news-featured .grid__item picture {
    aspect-ratio: 3/2;
    display: flex;
  }
  .news-featured .grid__item:first-child {
    grid-column: 1/9;
    grid-row: 1;
  }
  .news-featured .grid__item:first-child a {
    flex-direction: row;
    align-items: flex-start;
    align-content: stretch;
  }
  .news-featured .grid__item:first-child a:has(picture) {
    margin-top: 6.5rem;
    aspect-ratio: 3/2;
    width: fit-content;
  }
  .news-featured .grid__item:nth-child(2) {
    grid-column: 10/13;
    grid-row: 1;
    flex-direction: column-reverse;
    margin-bottom: auto;
  }
  .news-featured .grid__item:nth-child(3) {
    grid-column: 1/6;
    grid-row: 2;
    padding-top: 3rem;
    flex-direction: column-reverse;
    margin-bottom: auto;
  }
  .news-featured .grid__item:nth-child(4) {
    grid-column: 7/13;
    grid-row: 2;
    flex-direction: column;
  }
  .news-featured .grid__item:nth-child(4) a {
    align-items: flex-end;
  }
  .news-featured .grid__item:nth-child(4) a:has(.postit) {
    margin-left: auto;
  }
  .news-featured .grid__item:nth-child(5) {
    grid-column: 1/9;
    grid-row: 3;
  }
  .news-featured .grid__item:nth-child(5) a {
    flex-direction: row;
    align-items: flex-start;
    align-content: stretch;
  }
  .news-featured .grid__item:nth-child(5) a:has(picture) {
    margin-top: 6.5rem;
    aspect-ratio: 3/2;
    width: fit-content;
  }
  .news-featured .grid__item:nth-child(6) {
    grid-column: 10/13;
    grid-row: 3;
    flex-direction: column-reverse;
    margin-bottom: auto;
  }
  .news-featured .grid__item:nth-child(7) {
    grid-column: 1/5;
    grid-row: 4;
    flex-direction: column-reverse;
    margin-bottom: auto;
  }
  .news-featured .grid__item:nth-child(8) {
    grid-column: 6/13;
    grid-row: 4;
    flex-direction: column;
  }
  .news-featured .grid__item:nth-child(8) a {
    align-items: flex-end;
  }
  .news-featured .grid__item:nth-child(8) a:has(.postit) {
    margin-left: auto;
  }
}

.banner-label {
  margin-bottom: 12px;
}

.taxonomy-back-arrow {
  display: flex;
  justify-content: space-between;
}
.taxonomy-back-arrow a {
  max-width: 10vw;
}
.taxonomy-back-arrow a svg {
  width: 100%;
  aspect-ratio: 64/28;
}

.tabs {
  display: flex;
  flex-direction: column;
  margin-top: 1.15rem;
}
.tabs input {
  height: 0;
  width: 0;
  overflow: hidden;
  outline: none;
  visibility: hidden;
}
.tabs label {
  cursor: pointer;
}
.tabs ul {
  list-style: none;
  padding-left: 0;
  margin-top: 0;
}
.tabs.small-data :not(.tabs__expander) label {
  cursor: default;
  pointer-events: none;
}
.tabs-panel > div > div {
  margin-bottom: 1rem;
}
.tabs .field-label {
  line-height: 18px;
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}
.tabs-menu {
  padding-left: 0;
}
.tabs-menu-title {
  padding: 0 1.5rem;
  position: relative;
  font-weight: 600;
  list-style: none;
  grid-column: span 3;
  /* for high res/retina screens */
}
.small-data .tabs-menu-title {
  grid-column: span 6;
}
.small-data .tabs-menu-title::before {
  background-color: rgb(0, 0, 0);
}
@media (max-width: 40rem) {
  .tabs-menu-title label {
    cursor: none;
  }
  .small-data .tabs-menu-title {
    grid-column: 1/-1;
  }
}
@media (max-width: 40rem) and (-webkit-device-pixel-ratio: 3), (max-width: 40rem) and (-webkit-device-pixel-ratio: 2) {
  .tabs-menu-title {
    grid-column: 1/-1;
  }
}
.small-data .tabs-menu-title__full-team {
  display: none;
}
@media (max-width: 64rem) {
  .tabs-menu-title__full-team {
    display: none;
  }
  .tabs-menu-title__full-team__mobile {
    display: block;
    padding-bottom: 2.5rem;
  }
}
.tabs-menu-title label {
  padding-left: 3rem;
  margin-left: -3rem;
  padding-top: 1rem;
}
.tabs-menu-title::before {
  position: absolute;
  z-index: -99;
  top: 1.5rem;
  left: 1rem;
  width: 0.875rem;
  aspect-ratio: 1;
  content: "";
  border: 1px solid rgb(0, 0, 0);
  border-radius: 50%;
  background-color: rgb(0, 0, 0);
  transform: translateY(-50%) translateX(-1rem);
}
@media (min-width: 64rem) {
  .tabs-menu-title::before {
    background-color: rgb(255, 255, 255);
  }
  .tabs-menu-title:has(:checked)::before {
    background-color: rgb(0, 0, 0);
  }
}
@media (min-width: 64rem) {
  .tabs .project-data,
  .tabs .full-team {
    height: 0px;
    overflow: hidden;
    padding: 0;
  }
  .tabs .full-team {
    column-count: 4;
    gap: 3vw;
  }
  .tabs .tabs-menu-title__full-team__mobile {
    display: none;
  }
}
.tabs:has(.tabs-menu-title__project-data input:checked) .project-data {
  height: auto;
  overflow: visible;
}
.tabs:has(.tabs-menu-title__full-team input:checked) .full-team {
  height: auto;
  overflow: visible;
}
.tabs-content {
  padding-bottom: 1rem;
  row-gap: 0 !important;
}
.tabs-content .full-team {
  margin-bottom: 1rem;
  row-gap: 1rem;
}
.tabs-content .full-team-section {
  break-inside: avoid-column;
}
.tabs__expander {
  display: none;
}
@media (max-width: 64rem) {
  .tabs:has([id=tabs_view_more]:not(:checked)) .tabs-content {
    max-height: 12lh;
    overflow: hidden;
    mask-image: linear-gradient(to bottom, black 50%, transparent 100%);
  }
  .tabs .tabs__expander {
    display: block;
    margin-bottom: 1rem;
  }
  .tabs .tabs__expander label {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    line-height: 1.3rem svg;
    line-height-margin-inline: 1rem;
    line-height-transition: transform 0.3s ease-in-out;
  }
  .tabs .tabs__expander label[for=tabs_view_less] svg {
    transform: rotate(180deg);
  }
  .tabs .tabs__expander input {
    position: absolute;
  }
  .tabs .tabs__expander input:checked + label {
    display: none;
  }
  .tabs .full-team-section {
    display: none;
  }
  .tabs .mobile-show .full-team-section {
    display: block;
  }
}

/* Accordion
===========================================================
From: https://stackoverflow.com/a/1777282/1943924

    <div class="accordion closed">
        <div class="title">Title <svg></svg></div>
        <div class="description subheader">Description that will show if panel is closed</div>
        <div class="panel">
            <p>Inititially hidden content</p>
        </div>
    </div>
*/
.accordion .title {
  display: flex;
  justify-content: space-between;
  cursor: pointer;
}
.accordion .title svg {
  width: 10px;
  height: 6px;
  transition: transform 0.3s ease;
}
.accordion .panel {
  padding-top: 1.5rem;
  transition: height 3s ease-in-out;
  height: fit-content;
}
.accordion.closed .title svg {
  transform: rotate(180deg);
}
.accordion.closed .panel {
  height: 0px;
  overflow: hidden;
}
.accordion-careers .title {
  font-size: 1.5rem;
  padding-right: 2rem;
}
.accordion-careers .title span {
  width: calc(100% - 35px);
}
.accordion-careers .title svg {
  position: absolute;
  top: 6px;
  right: 0;
  fill: rgb(0, 0, 0);
  transform: scale(1.75) rotate(180deg);
}
.accordion-careers .field-link {
  width: 100%;
  position: relative;
}
.accordion-careers .field-link a {
  margin-left: auto;
  margin-right: 3rem;
  text-decoration: none;
  color: rgb(0, 166, 104);
}
.accordion-careers .field-link svg {
  position: absolute;
  bottom: -0.7rem;
  right: 5px;
}
.accordion-careers .panel {
  padding-bottom: 3rem;
}
.accordion-careers .panel li {
  display: list-item;
  list-style: disc;
}
.accordion-careers .panel p {
  padding-bottom: 0.75rem;
}
.accordion-careers.closed .title svg {
  transform: scale(1.75) rotate(0deg);
}
.accordion-careers.closed .panel {
  padding: 0;
}
.accordion-careers--jobs-wrapper .list-grid > li {
  padding-block: 1rem;
  margin-bottom: 0;
  border-bottom: 1px solid black;
}
.accordion-careers--jobs-wrapper .list-grid > li:first-child {
  border-top: 1px solid black;
}

@media (min-width: 40rem) {
  .clickthrough-lightbox .grid__item:not(.clickthrough-lightbox_slides) {
    grid-column: 8/13;
  }
  .clickthrough-lightbox .clickthrough-lightbox_slides {
    grid-column: span 7;
  }
  .clickthrough-lightbox.align-image-right .grid__item:not(.clickthrough-lightbox_slides) {
    grid-column: 1/6;
    grid-row: 1;
  }
  .clickthrough-lightbox.align-image-right .clickthrough-lightbox_slides {
    grid-column: 6/span 7;
  }
  .clickthrough-lightbox.large-image-mode .clickthrough-lightbox_slides.active {
    grid-column: span 10;
    grid-row: 1;
  }
  .clickthrough-lightbox.large-image-mode.align-image-right .clickthrough-lightbox_slides.active {
    grid-column-end: -1;
  }
}
.clickthrough-lightbox_text :first-child:not(.postit):not(.postit *):not(.teaser__news_bottom):not(.list-grid li):not(.button):not(textarea):not(.tabs-menu-title):not(.related-content_links) :not(button):not(.leading-arrow) {
  padding-top: 0 !important;
  margin-top: 0 !important;
}
.clickthrough-lightbox figure {
  margin-bottom: 2.7rem;
}
.clickthrough-lightbox_invitation-arrow {
  position: absolute;
  top: 0;
  right: 0;
  height: 80px;
  width: 80px;
  background: rgb(255, 255, 255);
  z-index: 5;
  display: flex;
  justify-content: center;
  align-items: center;
}
.active .clickthrough-lightbox_invitation-arrow {
  z-index: 35;
}
.align-image-right .clickthrough-lightbox_invitation-arrow {
  left: 0;
  right: unset;
}
@media (max-width: 64rem) {
  .clickthrough-lightbox_invitation-arrow {
    height: 40px;
    width: 40px;
  }
  .clickthrough-lightbox_invitation-arrow svg {
    width: 70%;
  }
}
.clickthrough-lightbox_slides {
  position: relative;
  cursor: pointer;
}
.clickthrough-lightbox_slide, .clickthrough-lightbox_slide figure {
  height: 100%;
  width: 100%;
}
.clickthrough-lightbox_slide {
  position: absolute;
  z-index: 1;
  display: none;
}
.clickthrough-lightbox_slide_initial {
  display: block;
}
.clickthrough-lightbox_slide_initial :not(.active) picture {
  width: 100%;
}
.clickthrough-lightbox_slide_initial .clickthrough-lightbox_side-text {
  display: none;
}
.active .clickthrough-lightbox_slide_initial:not(.clickthrough-lightbox_slide__active) {
  display: none;
}
.clickthrough-lightbox_slide figure,
.clickthrough-lightbox_slide figure * {
  user-select: none;
}
.clickthrough-lightbox_slide picture {
  height: fit-content;
  margin: 0 auto auto;
  display: flex;
}
:not(.clickthrough-lightbox_slide_active) .clickthrough-lightbox_side-text {
  display: none;
}
.active .clickthrough-lightbox_slide__active {
  display: block;
  z-index: 20;
}
.active .clickthrough-lightbox_slide__active .clickthrough-lightbox_side-text {
  display: flex;
}
.clickthrough-lightbox_overlay {
  max-width: 100vw;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 0;
  display: block;
  z-index: 99;
  overflow: scroll;
  z-index: 9;
}
.clickthrough-lightbox_overlay.is-active, .active .clickthrough-lightbox_overlay {
  height: 100vh;
  background-color: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  transition: height 0ms 0ms, background-color 400ms 1ms ease-in, backdrop-filter 400ms 1ms ease-in;
}
@media (min-width: 64rem) {
  .clickthrough-lightbox_overlay.is-active, .active .clickthrough-lightbox_overlay {
    overflow: hidden;
  }
}
.clickthrough-lightbox_side-text {
  display: none;
  right: -25.5rem;
  z-index: 99;
  width: 23.5rem;
  min-height: 8rem;
  padding: 0 1rem;
  flex-direction: column;
  justify-content: space-between;
  gap: 1rem;
}
.clickthrough-lightbox_side-text :first-child:not(.postit):not(.postit *):not(.teaser__news_bottom):not(.list-grid li):not(.button):not(textarea):not(.tabs-menu-title):not(.related-content_links) :not(button):not(.leading-arrow) {
  padding-top: 0 !important;
  margin-top: 0 !important;
}
.clickthrough-lightbox_side-text .caption, .clickthrough-lightbox_side-text figure figcaption, figure .clickthrough-lightbox_side-text figcaption {
  border: 0;
}
.active .clickthrough-lightbox_side-text {
  top: 0;
}
@media (min-width: 40rem) {
  .active .clickthrough-lightbox_side-text {
    position: absolute;
  }
}
@media (min-width: 40rem) {
  .clickthrough-lightbox_side-text {
    grid-column: 8/13;
  }
  .align-image-right .clickthrough-lightbox_side-text {
    left: -25.5rem;
  }
}

/* File paragraphs
-------------------------------------------------------------------------------
*/
a.file-paragraph {
  display: block;
  color: var(--colorized-background, rgb(0, 166, 104));
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
a.file-paragraph svg path {
  fill: var(--colorized-background, rgb(0, 166, 104));
}
a.file-paragraph.has-border {
  border: 1px var(--colorized-background, rgb(0, 166, 104)) solid;
}
a.file-paragraph figcaption.caption, a.file-paragraph figure figcaption, figure a.file-paragraph figcaption {
  margin-left: 5px;
}

.file-descriptor {
  padding: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-decoration: none;
}

/* Standalone file paragraphs
-------------------------------------------------------------------------------
*/
@media (min-width: 64rem) {
  .file-paragraph-standalone.flow_right .file-paragraph-standalone__file {
    grid-column: 7/13;
  }
  .file-paragraph-standalone.flow_right .grid__item {
    grid-row: 1;
  }
  .file-paragraph-standalone.flow_middle {
    row-gap: 1rem;
  }
  .file-paragraph-standalone.flow_middle .grid__item {
    grid-column: 4/span 6;
  }
  .file-paragraph-standalone.flow_full {
    row-gap: 1rem;
  }
  .file-paragraph-standalone.flow_full .grid__item {
    grid-column: 1/-1;
  }
}
@media (max-width: 64rem) {
  .file-paragraph-standalone .grid__item {
    grid-column: span 12;
  }
  .file-paragraph-standalone .file-paragraph-standalone__text {
    grid-row: 2;
  }
}

@media (max-width: 64rem) {
  .node-narrative .grid__item.statement {
    grid-column: span 12;
  }
}
.node-narrative .grid__item.narrarative-leaders {
  row-gap: 1rem;
}
@media (max-width: 64rem) {
  .node-narrative .grid__item.narrarative-leaders {
    grid-column: span 12;
  }
}
.node-narrative .grid__item.narrarative-leaders .grid-thirds {
  max-width: 100%;
}
@media (min-width: 30rem) {
  .node-narrative .grid__item.narrarative-leaders .grid__item {
    grid-column: span 6;
  }
}
@media (min-width: 40rem) and (max-width: 64rem) {
  .node-narrative .grid__item.narrarative-leaders .grid__item {
    grid-column: span 4;
  }
}
@media (min-width: 64rem) {
  .node-narrative .grid__item.narrarative-leaders .grid__item {
    grid-column: span 2;
  }
}

.htmx-full {
  cursor: zoom-out;
}

.enlargable {
  cursor: zoom-in;
}

.htmx-full.overlay-background_dark.is-active {
  overflow: auto !important;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100vw;
}
.htmx-full.overlay-background_dark.is-active picture,
.htmx-full.overlay-background_dark.is-active img {
  max-width: 100vw;
  max-height: 100vh;
}
.htmx-full.overlay-background_dark.is-active.node-type-story {
  flex-direction: column;
  width: 100%;
}

body:not(.menu_is_active) main .colorized-background:not([class*=paragraph-spacer]):not(.content-top) {
  padding-block: 5.8rem;
}
@media (max-width: 40rem) {
  body:not(.menu_is_active) main .colorized-background:not([class*=paragraph-spacer]):not(.content-top) {
    padding-block: 2rem;
  }
}
body:not(.menu_is_active) main .colorized-background:not([class*=paragraph-spacer]):not(.content-top):last-child {
  padding-bottom: 2rem;
}
body:not(.menu_is_active) .colorized-background {
  border-image: conic-gradient(var(--colorized-background) 0 0) fill 0//0 100vw;
  margin-block: -1px;
}
body:not(.menu_is_active) .colorized-background p {
  margin-bottom: 0;
  padding-bottom: 1.05em;
}
body:not(.menu_is_active) .colorized-background h1 {
  margin-block: 0;
  padding-block: 0.67em;
}
body:not(.menu_is_active) .colorized-background #menu-toggle {
  color: rgb(0, 0, 0);
}
body:not(.menu_is_active) .colorized-background #menu-toggle::before {
  background: rgb(0, 0, 0);
}
body:not(.menu_is_active) .colorized-background #menu-toggle::after {
  background: rgb(0, 0, 0);
  box-shadow: 0 4px 0 rgb(0, 0, 0);
}
.menu_is_active body:not(.menu_is_active) .colorized-background #menu-toggle::after {
  box-shadow: none;
}
body:not(.menu_is_active) .colorized-background .messages,
body:not(.menu_is_active) .colorized-background :not(.caption):not(.postit-text) > p.messages {
  margin-block: 0;
  padding-block: 0.5rem;
  position: relative;
}
body:not(.menu_is_active) .colorized-background + #block-butaro-content > p {
  padding: 1rem;
}
body:not(.menu_is_active) .colorized-background + #block-butaro-content > p.messages::before {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 100%;
  z-index: -1;
  border-image: conic-gradient(var(--colorized-background) 0 0) fill 0//0 100vw;
  content: "";
}
body:not(.menu_is_active) .colorized-background:not(.content-top) + .colorized-background {
  padding-top: 0;
}
body:not(.menu_is_active) .colorized-background.page-footer .layout, body:not(.menu_is_active) .colorized-background.page-footer .secondary-nav {
  border-block: unset;
}
body:not(.menu_is_active):has(.colorized-background) .postit,
body:not(.menu_is_active):has(.colorized-background) .grid-multi-media,
body:not(.menu_is_active):has(.colorized-background) .teaser__news_content {
  color: rgb(0, 0, 0);
}
body:not(.menu_is_active):has(.colorized-background) .postit a,
body:not(.menu_is_active):has(.colorized-background) .postit .green a,
body:not(.menu_is_active):has(.colorized-background) .grid-multi-media a,
body:not(.menu_is_active):has(.colorized-background) .grid-multi-media .green a,
body:not(.menu_is_active):has(.colorized-background) .teaser__news_content a,
body:not(.menu_is_active):has(.colorized-background) .teaser__news_content .green a {
  color: rgb(0, 0, 0);
}
body:not(.menu_is_active):has(.colorized-background) .postit {
  background: var(--colorized-background);
  border-color: var(--colorized-background);
}
body:not(.menu_is_active):has(.colorized-background) .postit-text {
  color: rgb(0, 0, 0);
}
body:not(.menu_is_active):has(.colorized-background) .postit svg {
  filter: grayscale(100) brightness(0);
}
body:not(.menu_is_active):has(.colorized-background) .grid-multi-media a.green .file-descriptor {
  background: var(--colorized-background);
  color: rgb(0, 0, 0);
}
body:not(.menu_is_active):has(.colorized-background) .colorized-background .postit {
  background: var(--colorized-background-secondary) !important;
  border-color: var(--colorized-background-secondary) !important;
}
body:not(.menu_is_active):has(.colorized-background) .colorized-background.grid-multi-media .file-paragraph .file-descriptor {
  background-color: var(--colorized-background-secondary) !important;
}
body:not(.menu_is_active).has-cover .layout.colorized-background, body:not(.menu_is_active).has-cover .colorized-background.secondary-nav {
  border-image: none;
}
body:not(.menu_is_active) #block-butaro-content > .flow > div:not(.colorized-background) + .colorized-background,
body:not(.menu_is_active) .paragraphs > div:not(.colorized-background) + .colorized-background {
  margin-top: 5.8rem;
}

.grid-stats__link {
  margin-top: 1.5rem;
}
.grid-stats__statistic {
  line-height: 1;
  font-weight: 200;
  font-size: min(13vw, 13rem);
}
@media (max-width: 64rem) {
  .grid-stats__statistic {
    font-size: 24vw;
  }
}
.grid-halves .grid-stats__statistic {
  font-size: clamp(5vw, 12.5rem, 8vw);
  line-height: clamp(5.5vw, 14rem, 8.5vw);
}
.grid-stats__description {
  margin-top: 1.375rem;
}
.grid-stats.grid-halves {
  text-align: center;
}
@media (min-width: 64rem) {
  .grid-stats.grid-halves {
    text-align: left;
  }
  .grid-stats.grid-halves .grid__item:first-child {
    border-right: 1px solid #616866;
  }
  .grid-stats.grid-halves .grid__item:nth-child(2) > * {
    float: right;
  }
}
@media (max-width: 64rem) {
  .grid-stats.grid-halves .grid__item {
    grid-column: span 12;
  }
  .grid-stats.grid-halves .grid__item:nth-child(2) {
    border-top: 1px solid #616866;
    margin-top: 2rem;
    padding-top: 2rem;
  }
  .grid-stats.grid-halves .grid__item .grid-stats__statistic {
    font-size: clamp(5vw, 8rem, 24vw);
    line-height: 1;
  }
  .grid-stats.grid-halves .grid__item .grid-stats__description {
    max-width: 480px;
    margin: 13px auto 0;
  }
}

/* Image paragraphs
-------------------------------------------------------------------------------
*/
:root {
  --image-para-row-gap: 12px;
}

.image-block {
  row-gap: var(--image-para-row-gap) !important;
}
.image-block [class^=grid__item] p:first-child {
  padding-top: 0;
  margin-top: 0;
}
.image-block [class^=grid__item] p:last-child {
  padding-bottom: 0;
  margin-bottom: 0;
}
.image-block__image figure {
  margin-top: 0;
}
@media (min-width: 1500px) {
  .image-block__text h1:first-child {
    position: relative;
    top: -8px;
  }
}
@media (min-width: 64rem) {
  .image-block.grid-halves.regular_image:not(.has-post-it).align-image-left .image-block__text {
    grid-column: 7/13;
    grid-row: 1;
  }
  .image-block.grid-halves.regular_image:not(.has-post-it).align-image-left .image-block__image {
    grid-column: 1/7;
  }
  .image-block.grid-halves.regular_image:not(.has-post-it).align-image-right .image-block__text {
    grid-column: 1/7;
  }
  .image-block.grid-halves.regular_image:not(.has-post-it).align-image-right .image-block__image {
    grid-column: 7/13;
  }
}
@media (min-width: 64rem) {
  .image-block.grid-halves.tall_image .image-block__image {
    grid-column: span 5;
    width: 100%;
  }
  .image-block.grid-halves.tall_image .image-block__text {
    grid-column: span 7;
  }
  .image-block.grid-halves.tall_image.align-image-left .image-block__text {
    grid-column-end: -1;
  }
  .image-block.grid-halves.tall_image.align-image-right .image-block__image {
    grid-column-end: -1;
  }
  .image-block.grid-halves.tall_image.align-image-middle .image-block__image,
  .image-block.grid-halves.tall_image.align-image-middle .image-block__text {
    grid-column: 5/10;
  }
  .image-block.grid-halves.tall_image.align-image-full .image-block__image {
    grid-column: 1/-1;
  }
}
@media (min-width: 64rem) {
  .image-block.grid-halves.large_image .image-block__image {
    grid-column: span 7;
    width: 100%;
  }
  .image-block.grid-halves.large_image .image-block__text {
    grid-column: span 4;
  }
  .image-block.grid-halves.large_image.align-image-left .image-block__text {
    grid-column-end: -1;
  }
  .image-block.grid-halves.large_image.align-image-left .image-block__image {
    grid-column: 1/9;
  }
  .image-block.grid-halves.large_image.align-image-right .image-block__image {
    grid-column: 5/13;
  }
  .image-block.grid-halves.large_image.align-image-middle .image-block__image {
    grid-column: 2/12;
  }
  .image-block.grid-halves.large_image.align-image-middle .image-block__text {
    grid-column: 2/7;
  }
}
@media (max-width: 64rem) {
  .image-block.grid-halves .image-block__text {
    grid-row: 1;
  }
  .image-block.grid-halves .image-block__text :last-child {
    margin-bottom: 0;
    padding-bottom: 0;
  }
}
@media (min-width: 64rem) {
  .image-block.align-image-left {
    justify-items: end;
  }
  .image-block.align-image-right {
    justify-items: start;
  }
}
@media (min-width: 64rem) {
  .image-block.align-image-left .image-block__text {
    grid-column: 9/13;
  }
  .image-block.align-image-right .image-block__text {
    grid-column: 1/6;
  }
}
@media (max-width: 30rem) {
  .image-block {
    display: block;
  }
  .image-block .postit {
    max-width: min(300px, 100%);
  }
}

.has-post-it .image-block__image,
.has-post-it img {
  width: 100%;
}
.has-post-it.align-image-left .image-block__image,
.has-post-it.align-image-left .postit {
  grid-column: 2/10;
}
.has-post-it.align-image-right .image-block__image,
.has-post-it.align-image-right .postit {
  grid-column: 4/12;
}
.has-post-it .image-block__text {
  grid-column: span 12;
  grid-row: 3;
}
@media (min-width: 40rem) {
  .has-post-it:has(.image-block__text) .image-block__image.grid__item-flow_right {
    grid-column: 2/10;
  }
  .has-post-it:has(.image-block__text) .image-block__image.grid__item-flow_left {
    grid-column: -2/-10;
  }
}
@media (min-width: 40rem) and (max-width: 64rem) {
  .has-post-it:has(.image-block__text) .image-block__image.grid__item-flow_right {
    grid-column: 1/9;
  }
  .has-post-it:has(.image-block__text) .image-block__image.grid__item-flow_left {
    grid-column: -1/-9;
  }
  .has-post-it .image-block__image.grid__item-flow_right {
    grid-column: -1/-9;
  }
  .has-post-it .image-block__image.grid__item-flow_left {
    grid-column: 1/9;
  }
}
@media (min-width: 64rem) {
  .has-post-it .image-block__image.grid__item-flow_right {
    grid-column: -2/-10;
  }
  .has-post-it .image-block__image.grid__item-flow_left {
    grid-column: 2/10;
  }
}
@media (min-width: 1500px) {
  .has-post-it .image-block__text.grid__item-flow_right, .has-post-it .image-block__text.grid__item-flow_left {
    grid-row: 1;
  }
  .has-post-it .image-block__text.grid__item-flow_right {
    grid-column: 5/11;
  }
  .has-post-it .image-block__text.grid__item-flow_left {
    grid-column: 3/9;
  }
  .has-post-it .image-block__image.grid__item-flow_right {
    grid-column: -2/-10;
  }
  .has-post-it .image-block__image.grid__item-flow_left {
    grid-column: 2/10;
  }
  .has-post-it:has(.image-block__text) .image-block__text.grid__item-flow_right {
    grid-column: 9/13;
  }
  .has-post-it:has(.image-block__text) .image-block__text.grid__item-flow_left {
    grid-column: -9/-13;
  }
  .has-post-it:has(.image-block__text) .image-block__image.grid__item-flow_right {
    grid-column: -3/-9;
  }
  .has-post-it:has(.image-block__text) .image-block__image.grid__item-flow_left {
    grid-column: 3/9;
  }
}

@media (min-width: 40rem) {
  .grid-large-small {
    grid-template-rows: 1fr auto;
    row-gap: 3vw !important;
  }
  .grid-large-small .grid-large-small__large-image,
  .grid-large-small .grid-large-small__small-image,
  .grid-large-small figure {
    grid-row: 1/-1;
  }
  .grid-large-small .grid-large-small__large-image,
  .grid-large-small .grid-large-small__small-image {
    display: grid;
    grid-template-rows: subgrid;
  }
  .grid-large-small .grid-large-small__large-image figure,
  .grid-large-small .grid-large-small__small-image figure {
    grid-template-rows: subgrid;
  }
  .grid-large-small .grid-large-small__large-image figure picture,
  .grid-large-small .grid-large-small__small-image figure picture {
    grid-row: 1/2;
    align-self: flex-end;
  }
  .grid-large-small .grid-large-small__large-image figure figcaption,
  .grid-large-small .grid-large-small__small-image figure figcaption {
    grid-row: 2/3;
  }
  .grid-large-small__large-image {
    grid-column: 1/10;
  }
  .grid-large-small__small-image {
    grid-column: 10/13;
  }
  .grid-large-small.large-right .grid-large-small__large-image {
    grid-column: 4/13;
  }
  .grid-large-small.large-right .grid-large-small__small-image {
    grid-column: 1/4;
  }
  .grid-large-small.touching {
    column-gap: 0;
  }
  .grid-large-small .grid__item-flow_right {
    grid-column: 6/span 7;
    grid-row: 3;
  }
  .grid-large-small .grid__item-flow_left {
    grid-column: 1/span 7;
    grid-row: 3;
  }
}
@media (max-width: 40rem) {
  .grid-large-small__large-image {
    grid-column: span 12;
  }
  .grid-large-small__large-image picture {
    grid-row: 2;
  }
  .grid-large-small__large-image figcaption {
    grid-row: 1;
    width: fit-content;
    text-align: end;
  }
  .grid-large-small__small-image {
    grid-column: span 8;
  }
  .grid-large-small__small-image picture {
    grid-row: 1;
  }
  .grid-large-small__small-image figcaption {
    grid-row: 2;
  }
  .grid-large-small.touching {
    row-gap: 0;
  }
  .grid-large-small__associated {
    margin-top: 1rem;
  }
}

@media (min-width: 64rem) {
  .image-block-4x-2.direction-right .grid__item__text {
    grid-column: span 6;
    padding-right: 50%;
  }
  .image-block-4x-2.direction-right.no-text::before {
    content: "";
    grid-column: 1/7;
  }
  .image-block-4x-2.direction-left grid__item {
    grid-row: 1;
  }
  .image-block-4x-2.direction-left .grid__item__text {
    grid-column: 7/13;
    padding-left: 50%;
  }
  .image-block-4x-3.direction-right.no-text::before {
    content: "";
    grid-column: 1/4;
  }
}
@media (max-width: 30rem) {
  .image-block-uniform img {
    width: 100%;
  }
}
.image-block-uniform figure figcaption.caption, .image-block-uniform figure figcaption {
  max-width: 100% !important;
  width: 100%;
}
.image-block-uniform figure figcaption.caption caption, .image-block-uniform figure figcaption caption {
  max-width: 100%;
}
.image-block-uniform.align-bottom .grid__item {
  margin-top: auto;
}
@media (min-width: 40rem) {
  .image-block-uniform > .grid__item:nth-child(1) {
    grid-column: 1/4;
  }
  .image-block-uniform > .grid__item:nth-child(2) {
    grid-column: 5/9;
  }
  .image-block-uniform > .grid__item:nth-child(3) {
    grid-column: 10/13;
  }
  .image-block-uniform.direction-left .grid__item__text {
    grid-column: 1/5;
    grid-row: 2;
  }
  .image-block-uniform.direction-right .grid__item__text {
    grid-column: 9/13;
    grid-row: 2;
  }
}

.grid-image img {
  width: 100%;
}
.grid-image .flow_left {
  grid-column: 1/span 9;
}
.grid-image .flow_right {
  grid-column: 4/span 9;
}
.grid-image .flow_full {
  grid-column: 1/-1;
}
.grid-image .flow_middle {
  grid-column: 2/span 10;
}
@media (min-width: 64rem) {
  .grid-image.tall_image .grid__item {
    grid-column: span 5;
  }
  .grid-image.tall_image .flow_left {
    grid-column: 1/span 5;
  }
  .grid-image.tall_image .flow_right {
    grid-column-end: -1;
  }
  .grid-image.tall_image .flow_full {
    grid-column: 3/-3;
  }
  .grid-image.tall_image .flow_middle {
    grid-column: 5/span 4;
  }
}

.related-entry::before {
  bottom: 0;
  top: -12px;
  width: 2px;
  content: "";
  position: absolute;
  pointer-events: none;
  background: #616866;
  left: 100%;
}

/* Media Grid
-------------------------------------------------------------------------------
*/
.grid-multi-media > .grid__item img {
  aspect-ratio: 16/9;
  overflow: hidden;
}

.grid-text-title {
  padding-top: 1.5rem;
  border-top: 1px solid #616866;
}
.grid-text-title.colorized-background {
  margin-top: -2px;
}
.grid-text-title__section-label {
  font-size: 2rem;
  margin: 0 0 24px;
}
@media (min-width: 64rem) {
  .grid-text-title__section-right {
    grid-column: 9/13;
  }
}

.edge-to-edge-banner {
  position: relative;
}
.edge-to-edge-banner__large-image {
  max-height: 100vh;
  min-height: 60vh;
  background-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0, #000);
}
.edge-to-edge-banner__logo {
  top: 50%;
  left: 3.75rem;
  width: 125px;
  position: absolute;
}
.edge-to-edge-banner__logo path {
  fill: white;
}
@media (max-width: 64rem) {
  .edge-to-edge-banner__logo {
    display: none;
  }
}
.edge-to-edge-banner__referenced-content {
  position: absolute;
  left: 3.75rem;
  bottom: 2rem;
  color: white;
}
@media (max-width: 64rem) {
  .edge-to-edge-banner__referenced-content {
    left: 0.5rem;
  }
}

.embellished-reference a > * {
  margin-bottom: 5px;
}
.embellished-reference:hover .embellished-reference__title {
  text-decoration: underline;
}
.embellished-reference__type, .embellished-reference__location {
  font-size: 0.875rem;
}
.embellished-reference__type {
  text-transform: uppercase;
}

/* For logged-in content editors and site administrators */
/* Tabs
===========================================================
Drupal admin tabs

    <nav class="admin_tabs">
        <ul>
            <li>
                <a href="..." class="is-active">
                    View<span class="visually-hidden">(active tab)</span>
                </a>
            </li>
            <li><a href="...">Edit</a></li>
        </ul>
    </div>
*/
.admin_tabs {
  border-bottom: 1px solid rgb(0, 166, 104);
}
.admin_tabs ul {
  margin-block: 0;
  padding-left: 0;
}
.admin_tabs ul li {
  display: inline-flex;
  align-items: stretch;
}
.admin_tabs ul li a {
  padding: 0.5em 1em;
}
.admin_tabs ul li a:hover {
  color: rgb(255, 255, 255);
  background: rgb(0, 0, 0);
}
.admin_tabs ul li a.is-active {
  color: rgb(0, 166, 104);
  background: rgb(255, 255, 255);
  z-index: 1;
}

/* Development/Debug
-------------------------------------------------------------------------------

@import 'dev-styleguide';
@import 'dev-debug';

*/

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