@charset "UTF-8";
/**
    <meta charset="utf-8"/>
    <meta name="viewport"
          content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">

 */
/**
 @see settings.scss
 */
@import url(font-inter.css);
@import url(font-roboto.css);
@import url(font-montserrat.css);
@import url(font-poppins.css);
@import url(font-questrial.css);
@import url(font-raleway.css);
html {
  --fla-heading-font-family: "CenturyGothicStd", "Inter", sans-serif;
  --fla-subheading-font-family: "Poppins";
  --fla-body-font-family: "Inter", "Helvetica Neue", "Arial", "Helvetica", "sans-serif";
  --fla-text-color-light: rgba(255,255,255,0.618);
}

body {
  --fla-dock-height: 0px;
}

body[data-fla-state*="do:1"] {
  --fla-dock-height: var(--fla-footer-height);
}

/**
 * TO BE INCLUDED WITHIN THE CONTENT CONTAINING ELEMENT
 * (WHERE THE SCOLLING DOES HAPPEN)
 */
/**
 * Must be applied not to the block element but the h1/h2/h3 directly
 * block must be display: contents
 */
/**
  NOTE: THIS IS SPECIFIC TO FONTS
  ARIAL: 0.318/2
 */
/**
 * What this does, is:
 * Given a Text like "First, Last and Always" we have the descender "y"
 * this mixin calculates the space that is taken by descenders and subtracts it
 * from the height of the element via negative margin bottom. By the way:
 * the descender space is also taken if we have text that does NOT have a descender!
 * When to use:
 * - The text block needs to sit bottom align with a specific design line or element
 *
 * When NOT to use:
 * - If another text block is placed below this one. in that case we need to use another mixin "centuryGothicDescendantEqualizer"
 *
 * Get the UnitsPerEM via "ttx -t head CenturyGothicStd.ttf" (fonttools)
 * Get the sTypoDescender via `ttx -t OS/2 CenturyGothicStd.ttf` (fonttools)
 * Calculate the Descener Ratio: Descender Ratio = |sTypoDescender| / unitsPerEm
 * Translate into CSS: margin-bottom: calc(-1*<DescenderRatio>)
 *
 * @see https://stackoverflow.com/questions/27631736/meaning-of-top-ascent-baseline-descent-bottom-and-leading-in-androids-font
 */
/**
 What we do here is:
 Based on this graphic: https://i.sstatic.net/LwZJF.png we cut off the
 distance from the bottom to the Descent
 */
/**
 * @deprecated Moved to a SDC component
 */
/**
 * Meant to glue the menu image before and after the content area so it can be used as glass background..
 */
/**
 * Use the content's image as a background below the content area to prevent boring grey areas
 */
/*
 * Use this for sections where the main content area must start below the header (not overlayed by the glass header)
 * to look fine u need to define a backkground image either for the body element or the layout container
 */
body {
  --fla-layout-container-max-width: 2560px;
  --fla-layout-container-with: 100vw;
}

@media screen and (min-width: 2561px) {
  body {
    --fla-layout-container-with: var(--fla-layout-container-max-width);
  }
  body[data-fla-state*="le:1"] {
    --fla-layout-container-max-width: 100vw;
  }
}

@font-face {
  font-family: CenturyGothicStd;
  src: url("/themes/custom/fla/fonts/CenturyGothicStd.eot");
  /* IE */
  src: url("/themes/custom/fla/fonts/CenturyGothicStd.otf");
  /* other */
}

:root {
  color-scheme: light only;
}

html {
  font-size: 16px;
  overflow: hidden;
  container-name: html-container;
  container-type: size;
}

@media screen and (min-width: 1600px) and (min-height: 1000px) {
  html {
    font-size: 18px;
  }
}

html > * {
  --active-layout: "none";
}

@container html-container (max-width: 320px) {
  html > * {
    --html-container--active-layout: "phone-small";
    --html-container--active-query: "(max-width: 320px)";
    --html-container--phone-small: ;
  }
}

@container html-container (min-width: 321px) {
  html > * {
    --html-container--active-layout: "phone-medium-up";
    --html-container--active-query: "(min-width: 321px)";
    --html-container--phone-medium-up: ;
  }
}

@container html-container (max-width: 424px) {
  html > * {
    --html-container--active-layout: "phone-medium";
    --html-container--active-query: "(max-width: 424px)";
    --html-container--phone-medium: ;
  }
}

@container html-container (min-width: 425px) {
  html > * {
    --html-container--active-layout: "phone-large-up";
    --html-container--active-query: "(min-width: 425px)";
    --html-container--phone-large-up: ;
  }
}

@container html-container (max-width: 730px) and (max-height: 930px) {
  html > * {
    --html-container--active-layout: "tablet-portrait-special";
    --html-container--active-query: "(max-width: 730px) and (max-height: 930px)";
    --html-container--tablet-portrait-special: ;
  }
}

@container html-container (min-width: 731px) and (min-height: 931px) {
  html > * {
    --html-container--active-layout: "tablet-portrait-special-up";
    --html-container--active-query: "(min-width: 731px) and (min-height: 931px)";
    --html-container--tablet-portrait-special-up: ;
  }
}

@container html-container (min-width: 768px) {
  html > * {
    --html-container--active-layout: "tablet-portrait-up";
    --html-container--active-query: "(min-width: 768px)";
    --html-container--tablet-portrait-up: ;
  }
}

@container html-container (min-width: 1024px) and (min-height: 768px) {
  html > * {
    --html-container--active-layout: "laptop-up";
    --html-container--active-query: "(min-width: 1024px) and (min-height: 768px)";
    --html-container--laptop-up: ;
  }
}

@container html-container (min-width: 1200px) and (min-height: 768px) {
  html > * {
    --html-container--active-layout: "desktop-up";
    --html-container--active-query: "(min-width: 1200px) and (min-height: 768px)";
    --html-container--desktop-up: ;
  }
}

@container html-container (max-aspect-ratio: 0.99999999999) {
  html > * {
    --html-container--active-layout: "portrait";
    --html-container--active-query: "(max-aspect-ratio: 0.99999999999)";
    --html-container--portrait: ;
  }
}

@container html-container (min-aspect-ratio: 1.0001) {
  html > * {
    --html-container--active-layout: "landscape";
    --html-container--active-query: "(min-aspect-ratio: 1.0001)";
    --html-container--landscape: ;
  }
}

html, body, .dialog-off-canvas-main-canvas, .layout-container {
  height: calc(100% - 0px);
  height: calc(100dvh - 0px);
  box-sizing: border-box;
}

.dialog-off-canvas-main-canvas {
  margin: 0 auto 0 auto;
  max-width: var(--fla-layout-container-max-width, 960px);
}

@media screen and (min-width: 2561px) {
  .dialog-off-canvas-main-canvas {
    position: relative;
  }
  .dialog-off-canvas-main-canvas:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    pointer-events: none;
  }
  .dialog-off-canvas-main-canvas:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    pointer-events: none;
  }
  .dialog-off-canvas-main-canvas:before, .dialog-off-canvas-main-canvas:after {
    width: 1px;
    background-color: rgba(255, 255, 255, 0.33);
  }
  .dialog-off-canvas-main-canvas:before {
    left: -1px;
    right: auto;
  }
  .dialog-off-canvas-main-canvas:after {
    left: auto;
    right: -1px;
  }
}

body {
  overflow: hidden;
  background: black url("/themes/custom/fla/img/backgrounds/tree+bark_mod-02LB_1024x1024.jpg") left top repeat;
  background: black;
  font-family: var(--fla-body-font-family);
  font-size: 1rem;
  font-weight: 200;
  text-rendering: geometricPrecision;
}

body * {
  outline: none;
}

@media screen and (min-width: 10769px) {
  body {
    font-size: 1.125rem;
    font-weight: 100;
  }
}

body, body p, body a, body a:active, body a:hover, body a:focus {
  color: #EFEFEF;
  text-decoration: none;
}

body h1, body h2, body h3, body h4, body #block-fla-page-title, body .card-title {
  color: inherit;
  font-family: var(--fla-subheading-font-family);
  font-weight: 200;
}

body #user-login-form input {
  color: #323232 !important;
}

body h1 {
  margin: 0.25em 0;
  margin-block-start: 0.25em;
}

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

body figure {
  break-inside: avoid-column;
}

body figure figcaption {
  padding-top: 0.5ch;
  font-style: italic;
  font-size: 90%;
}

body button {
  background-color: inherit;
  border: 0;
}

ul {
  box-sizing: border-box;
}

.mm-page, .mm-wrapper__blocker {
  background-color: #666666;
}

img,
picture,
video,
canvas,
svg {
  forced-color-adjust: none;
}

#block-horizontalmenu {
  display: none;
}

div::-webkit-scrollbar, span::-webkit-scrollbar, article::-webkit-scrollbar {
  width: 0;
  height: 0;
  background: transparent;
}

.layout-container {
  margin: auto;
  container-name: layout-container;
  container-type: size;
  padding-top: var(--fla-header-height);
  padding-bottom: var(--fla-footer-height);
}

.layout-container > * {
  --active-layout: "none";
}

@container layout-container (max-aspect-ratio: 10000) {
  .layout-container > * {
    --layout-container--active-layout: "default";
    --layout-container--active-query: "(max-aspect-ratio: 10000)";
    --layout-container--default: ;
  }
}

@container layout-container (max-width: 500px) and (max-height: 1000px) {
  .layout-container > * {
    --layout-container--active-layout: "phone";
    --layout-container--active-query: "(max-width: 500px) and (max-height: 1000px)";
    --layout-container--phone: ;
  }
}

@container layout-container (min-width: 501px) and (min-height: 501px) {
  .layout-container > * {
    --layout-container--active-layout: "phone-up";
    --layout-container--active-query: "(min-width: 501px) and (min-height: 501px)";
    --layout-container--phone-up: ;
  }
}

@container layout-container (min-width: 731px) and (min-height: 931px) {
  .layout-container > * {
    --layout-container--active-layout: "tablet-portrait-special-up";
    --layout-container--active-query: "(min-width: 731px) and (min-height: 931px)";
    --layout-container--tablet-portrait-special-up: ;
  }
}

@container layout-container (min-width: 768px) and (min-height: 1024px) {
  .layout-container > * {
    --layout-container--active-layout: "tablet-up";
    --layout-container--active-query: "(min-width: 768px) and (min-height: 1024px)";
    --layout-container--tablet-up: ;
  }
}

@container layout-container (min-width: 1024px) and (min-height: 768px) {
  .layout-container > * {
    --layout-container--active-layout: "laptop-up";
    --layout-container--active-query: "(min-width: 1024px) and (min-height: 768px)";
    --layout-container--laptop-up: ;
  }
}

@container layout-container (min-aspect-ratio: 1.01) {
  .layout-container > * {
    --layout-container--active-layout: "landscape";
    --layout-container--active-query: "(min-aspect-ratio: 1.01)";
    --layout-container--landscape: ;
  }
}

html.glass-header .layout-container {
  padding-top: 0;
  position: relative;
}

/*
.block-facets{

  padding: 0 10px;

  ul {
    margin: 0;
    padding: 0;
  }

  ul, li {
    list-style-type: none;
  }

  li {
    margin-left: 0;
    position: relative;
    margin-bottom: 0;
  }

}

.block-facet--checkbox{

}
//*/
#block-fla-horizontalmenu, #block-horizontalmenu, header .block-menu.menu--fla-navigation {
  display: none;
}

@media screen and (min-width: 100768px) {
  #block-fla-horizontalmenu:first-of-type, #block-horizontalmenu:first-of-type, header .block-menu.menu--fla-navigation:first-of-type {
    text-align: right;
    width: auto;
    background-color: #414141;
    margin: auto -10px;
    border-top: 1px solid black;
    display: block;
  }
  #block-fla-horizontalmenu:first-of-type ul.menu, #block-horizontalmenu:first-of-type ul.menu, header .block-menu.menu--fla-navigation:first-of-type ul.menu {
    margin: 0 !important;
    line-height: 0;
    text-align: right;
  }
  #block-fla-horizontalmenu:first-of-type li, #block-horizontalmenu:first-of-type li, header .block-menu.menu--fla-navigation:first-of-type li {
    display: inline-block;
    padding: 0 1ch;
    margin: 0 0.5ch;
    text-transform: uppercase;
    font-family: "Helvetica", "Arial", sans-serif;
    font-weight: 100;
    letter-spacing: 1px;
    font-size: 1rem;
    line-height: 2;
    vertical-align: baseline;
  }
  #block-fla-horizontalmenu:first-of-type li:last-of-type, #block-horizontalmenu:first-of-type li:last-of-type, header .block-menu.menu--fla-navigation:first-of-type li:last-of-type {
    padding-right: 10px;
    margin-right: 0;
  }
  #block-fla-horizontalmenu:first-of-type li.menu-item--active-trail, #block-fla-horizontalmenu:first-of-type li:hover, #block-horizontalmenu:first-of-type li.menu-item--active-trail, #block-horizontalmenu:first-of-type li:hover, header .block-menu.menu--fla-navigation:first-of-type li.menu-item--active-trail, header .block-menu.menu--fla-navigation:first-of-type li:hover {
    background-color: black;
  }
  #block-fla-horizontalmenu:first-of-type li.menu-item--active-trail a, #block-fla-horizontalmenu:first-of-type li:hover a, #block-horizontalmenu:first-of-type li.menu-item--active-trail a, #block-horizontalmenu:first-of-type li:hover a, header .block-menu.menu--fla-navigation:first-of-type li.menu-item--active-trail a, header .block-menu.menu--fla-navigation:first-of-type li:hover a {
    color: #669900 !important;
  }
  #block-fla-horizontalmenu:first-of-type .horizontal-menu > li ul, #block-horizontalmenu:first-of-type .horizontal-menu > li ul, header .block-menu.menu--fla-navigation:first-of-type .horizontal-menu > li ul {
    background-color: #666666;
  }
}

/*
.responsive-menu-toggle-wrapper {
  display: none;
}

.mm-panels {
  .mm-navbar {
    height: 60px;
    font-size: 1.5em;
    font-weight: bold;
    line-height: 2;
    color: #969696;
  }

  & > .mm-panel > .mm-listview:first-child, & > .mm-panel > .mm-navbar + .mm-listview {
    margin-top: -7px;
  }

  .mm-listitem:after {
    left: 0;
  }
}
//*/
subheader {
  display: none;
  height: 0px;
  overflow: hidden;
}

@media screen and (min-width: 10769px) {
  subheader {
    display: none;
  }
}

@media screen and (max-width: 10768px) {
  subheader #block-fla-page-title {
    padding: 5px 10px 3px 10px;
    background-color: #323232;
    text-align: left;
    text-overflow: ellipsis;
    overflow: hidden;
    line-height: 1;
  }
  subheader #block-fla-page-title h1 {
    margin-bottom: 0;
    display: inline;
    white-space: nowrap;
  }
}

@media screen and (min-width: 10769px) {
  subheader #block-fla-page-title {
    display: none;
  }
}

@media screen and (min-width: 10769px) {
  subheader #block-breadcrumbs {
    display: none;
  }
}

subheader #block-breadcrumbs .breadcrumb li:before {
  content: "/";
}

subheader #block-breadcrumbs .breadcrumb li:first-child:before {
  content: none;
}

@media screen and (max-width: 10768px) {
  subheader #block-breadcrumbs {
    text-align: right;
    width: 100%;
    position: relative;
    background-color: #323232;
    overflow: hidden;
    padding: 0 10px;
  }
  subheader #block-breadcrumbs:before {
    pointer-events: none;
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: linear-gradient(to right, rgba(50, 50, 50, 0.8) 0%, rgba(0, 0, 0, 0) 20%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  }
  subheader #block-breadcrumbs nav {
    padding-bottom: 0;
  }
  subheader #block-breadcrumbs nav ol {
    white-space: nowrap;
    direction: rtl;
  }
}

@media screen and (max-width: 10768px) {
  subheader #block-breadcrumbs ol li, subheader #block-breadcrumbs ol li a {
    text-align: right;
    font-size: 1.125rem;
    margin: 0 -10px;
    padding: 0 10px;
    color: #949494;
  }
}

subheader #block-breadcrumbs ol li:last-of-type, subheader #block-breadcrumbs ol li:last-of-type a {
  color: #949494;
}

@media screen and (min-width: 2561px) {
  body[data-fla-state*="le:0"] main {
    border-right: 1px solid black;
    border-left: 1px solid black;
  }
}

@media screen and (max-width: 10768px) {
  main {
    -webkit-overflow-scrolling: touch;
    overflow: hidden;
  }
  body.page-node-type-page main .region-content #block-fla-content, body.page-node-type-fps-page main .region-content #block-fla-content {
    height: 100%;
    overflow: auto;
    overflow-x: hidden;
  }
}

@media screen and (min-width: 10769px) {
  main {
    overflow: auto;
    bottom: 0;
    position: relative;
  }
}

@media screen and (min-width: 813px) and (max-width: 1179px) {
  main {
    top: 91px;
  }
}

@media screen and (min-width: 1180px) {
  main {
    height: inherit;
  }
}

html.glass-header main {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 0;
}

@media screen and (min-width: 10769px) {
  main article.node--type-page > .node__content {
    padding: 1em 1em 1em calc(50% + 1em);
  }
}

.region-content, .layout-content {
  height: 100%;
}

/*
main .field--name-field-image, .node__content > .field--name-field-media-image {

    position: relative;

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

    .field--name-field-caption {
      display: none;
      @media screen and (min-width: $breakpoint-S + 1) {
        display: inline-block;
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 0.25em 0.5em;
        width: 100%;
        height: auto;
        background-color: rgba(0, 0, 0, 0.5);
        line-height: 2;
        span:first-child {
          color: $textColorDark;
          margin-right: 1ch;
        }
        span:last-child {
          color: $textColorDefault
        }
      }
    }

    @media screen and (max-width: $breakpoint-S + 10000) {

      border-bottom: 1px solid black;
      margin: 0 -10px 0 -10px;

      // this one draws a 2nd border (in case contrast isnt good enough)
      //&:before{
      //  content: "";
      //  height: 0;
      //  border-top:1px solid $grey-light-1;
      //  position: absolute;
      //  left:0;
      //  right:0;
      //  top:0;
      //}
    }
    @media screen and (min-width: $breakpoint-S + 1) {
      position: absolute;
      top: 0;
      left: 0;
      width: 50%;
      height: 100%;
      display: inline-block;
      border-right: 1px solid black;
      img {
        object-fit: cover;
        object-position: left bottom;
        //height: calc(100vh);
        width: 50vw;
      }
    }
  }
// */
/*
  .field--name-field-title-copy {
    text-transform: uppercase;
    letter-spacing: -0.5px;
  }
  // */
body.page-node-type-page .field--name-body {
  padding: 0;
}

body.page-node-type-page .field--name-body h3:first-of-type {
  margin-bottom: 0.5em;
}

body.page-node-type-page .field--name-body h3 + p:first-of-type {
  margin-top: 0;
}

body.page-node-type-page .field--name-body p {
  hyphens: auto;
  text-align: justify;
}

@media screen and (min-width: 10769px) {
  body.page-node-type-page .field--name-body {
    display: inline-block;
  }
}

#block-fla-content .menu-image--background {
  display: none;
}

html.glass-header #block-fla-content .menu-image--background {
  left: 0;
  right: 0;
  width: 100%;
  overflow: hidden;
  pointer-events: none;
}

html.glass-header #block-fla-content .menu-image--background img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

html.glass-header #block-fla-content .menu-image--background.top {
  display: var(--fla-menu-image-background-top, none);
  height: var(--fla-header-height);
}

html.glass-header #block-fla-content .menu-image--background.top img {
  object-position: top center;
}

html.glass-header #block-fla-content .menu-image--background.bottom {
  display: var(--fla-menu-image-background-bottom, none);
  height: var(--fla-footer-height);
}

html.glass-header #block-fla-content .menu-image--background.bottom img {
  object-position: bottom center;
}

@media screen and (max-width: 10768px) {
  body:not(.path-schotten-and-hansen):not(.path-fla-expertise):not(.path-portfolio):not(.path-inspiration):not(.path-contact-us):not(.page-node-type-page):not(.page-node-type-music-collection) #block-fla-content {
    font-size: 1rem;
    overflow-x: hidden;
    overflow-y: auto;
    height: calc(100%);
  }
  body:not(.path-schotten-and-hansen):not(.path-fla-expertise):not(.path-portfolio):not(.path-inspiration):not(.path-contact-us):not(.page-node-type-page):not(.page-node-type-music-collection) #block-fla-content p {
    text-align: justify;
  }
  body:not(.path-schotten-and-hansen):not(.path-fla-expertise):not(.path-portfolio):not(.path-inspiration):not(.path-contact-us):not(.page-node-type-page):not(.page-node-type-music-collection) #block-fla-content ul {
    padding-left: 20px;
  }
  body:not(.path-schotten-and-hansen):not(.path-fla-expertise):not(.path-portfolio):not(.path-inspiration):not(.path-contact-us):not(.page-node-type-page):not(.page-node-type-music-collection) #block-fla-content ul li {
    padding-left: 1px;
    list-style: none;
    list-style-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='-1 -1 2 2'><circle r='1' fill='rgb(179,179,179)' /></svg>");
  }
  body:not(.path-schotten-and-hansen):not(.path-fla-expertise):not(.path-portfolio):not(.path-inspiration):not(.path-contact-us):not(.page-node-type-page):not(.page-node-type-music-collection) #block-fla-content ul li:not(:last-of-type) {
    margin-bottom: 20px;
  }
}

@media screen and (max-width: 10768px) {
  body.path-portfolio-projects-and-search-our-finished-projects #fla-ajax-content {
    height: 80%;
    z-index: 20;
  }
}

/*
body.path-schotten-and-hansen-visuals-videos{

  article  .field--name-field-media-image{
    &:before{
      position: absolute;
      content: '';
      background: transparent url("/themes/custom/fla/img/icons/play.png") center center no-repeat;
      left:0; top:0; bottom:0; right: 0;
      cursor: pointer;
    }
  }

  div.thumbnail-strip{

    width: calc(100% + 20px);
    margin: 0 -10px;
    white-space: nowrap;
    font-size: 0;
    line-height: 0;

    > span.wrap{
      display: inline-block;
      box-sizing: border-box;
      width: calc(99.9% / 3);
      position: relative;
      img{ display: inline-block; }
      img:nth-of-type(1){ width:100%; height: auto; }
      img:nth-of-type(2){
        position: absolute;
        width: 100%;
        height: 100%;
        left:0;
        top:0;
        object-fit: cover;
        object-position: center center;
      }
    }
  }
}
//*/
html {
  --fla-heading-font-family: "CenturyGothicStd", "Inter", sans-serif;
  --fla-subheading-font-family: "Poppins";
  --fla-body-font-family: "Inter", "Helvetica Neue", "Arial", "Helvetica", "sans-serif";
  --fla-text-color-light: rgba(255,255,255,0.618);
}

body {
  --fla-dock-height: 0px;
}

body[data-fla-state*="do:1"] {
  --fla-dock-height: var(--fla-footer-height);
}

/**
 * TO BE INCLUDED WITHIN THE CONTENT CONTAINING ELEMENT
 * (WHERE THE SCOLLING DOES HAPPEN)
 */
/**
 * Must be applied not to the block element but the h1/h2/h3 directly
 * block must be display: contents
 */
/**
  NOTE: THIS IS SPECIFIC TO FONTS
  ARIAL: 0.318/2
 */
/**
 * What this does, is:
 * Given a Text like "First, Last and Always" we have the descender "y"
 * this mixin calculates the space that is taken by descenders and subtracts it
 * from the height of the element via negative margin bottom. By the way:
 * the descender space is also taken if we have text that does NOT have a descender!
 * When to use:
 * - The text block needs to sit bottom align with a specific design line or element
 *
 * When NOT to use:
 * - If another text block is placed below this one. in that case we need to use another mixin "centuryGothicDescendantEqualizer"
 *
 * Get the UnitsPerEM via "ttx -t head CenturyGothicStd.ttf" (fonttools)
 * Get the sTypoDescender via `ttx -t OS/2 CenturyGothicStd.ttf` (fonttools)
 * Calculate the Descener Ratio: Descender Ratio = |sTypoDescender| / unitsPerEm
 * Translate into CSS: margin-bottom: calc(-1*<DescenderRatio>)
 *
 * @see https://stackoverflow.com/questions/27631736/meaning-of-top-ascent-baseline-descent-bottom-and-leading-in-androids-font
 */
/**
 What we do here is:
 Based on this graphic: https://i.sstatic.net/LwZJF.png we cut off the
 distance from the bottom to the Descent
 */
/**
 * @deprecated Moved to a SDC component
 */
/**
 * Meant to glue the menu image before and after the content area so it can be used as glass background..
 */
/**
 * Use the content's image as a background below the content area to prevent boring grey areas
 */
/*
 * Use this for sections where the main content area must start below the header (not overlayed by the glass header)
 * to look fine u need to define a backkground image either for the body element or the layout container
 */
body {
  --fla-footer-height-min: 80px;
  --fla-footer-height: 80px;
}

@media screen and (min-width: 431px) and (min-height: 931px) {
  body {
    --fla-footer-height: 140px;
  }
}

@media screen and (min-width: 731px) and (min-height: 931px) {
  body {
    --fla-footer-height: calc(15vh);
  }
}

footer {
  container-name: footer-container;
  container-type: size;
  background-color: #323232;
}

html.glass-dock footer {
  background-color: transparent;
  border-top: 1px solid rgba(255, 255, 255, 0.3);
}

html.glass-dock footer:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  pointer-events: none;
}

html.glass-dock footer:before {
  z-index: -1;
  background-color: rgba(0, 0, 0, 0.35);
  border-radius: 1px;
  backdrop-filter: grayscale(20%) blur(3px) brightness(60%);
}

@media screen and (min-width: 2561px) {
  body[data-fla-state*="le:0"] footer {
    border-right: 1px solid black;
    border-left: 1px solid black;
  }
}

@media screen and (max-width: 10768px) {
  footer {
    box-sizing: border-box;
    height: var(--fla-footer-height, 80px);
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 2000;
    padding: 10px 10px 9px 10px;
  }
}

@media screen and (min-width: 2560px) {
  footer {
    left: calc(50vw - var(--fla-layout-container-max-width)/2);
    width: var(--fla-layout-container-max-width);
  }
}

@media screen and (max-width: 350px) and (max-height: 600px) {
  footer {
    padding: 15px 10px 14px 10px;
  }
}

html {
  --fla-heading-font-family: "CenturyGothicStd", "Inter", sans-serif;
  --fla-subheading-font-family: "Poppins";
  --fla-body-font-family: "Inter", "Helvetica Neue", "Arial", "Helvetica", "sans-serif";
  --fla-text-color-light: rgba(255,255,255,0.618);
}

body {
  --fla-dock-height: 0px;
}

body[data-fla-state*="do:1"] {
  --fla-dock-height: var(--fla-footer-height);
}

/**
 * TO BE INCLUDED WITHIN THE CONTENT CONTAINING ELEMENT
 * (WHERE THE SCOLLING DOES HAPPEN)
 */
/**
 * Must be applied not to the block element but the h1/h2/h3 directly
 * block must be display: contents
 */
/**
  NOTE: THIS IS SPECIFIC TO FONTS
  ARIAL: 0.318/2
 */
/**
 * What this does, is:
 * Given a Text like "First, Last and Always" we have the descender "y"
 * this mixin calculates the space that is taken by descenders and subtracts it
 * from the height of the element via negative margin bottom. By the way:
 * the descender space is also taken if we have text that does NOT have a descender!
 * When to use:
 * - The text block needs to sit bottom align with a specific design line or element
 *
 * When NOT to use:
 * - If another text block is placed below this one. in that case we need to use another mixin "centuryGothicDescendantEqualizer"
 *
 * Get the UnitsPerEM via "ttx -t head CenturyGothicStd.ttf" (fonttools)
 * Get the sTypoDescender via `ttx -t OS/2 CenturyGothicStd.ttf` (fonttools)
 * Calculate the Descener Ratio: Descender Ratio = |sTypoDescender| / unitsPerEm
 * Translate into CSS: margin-bottom: calc(-1*<DescenderRatio>)
 *
 * @see https://stackoverflow.com/questions/27631736/meaning-of-top-ascent-baseline-descent-bottom-and-leading-in-androids-font
 */
/**
 What we do here is:
 Based on this graphic: https://i.sstatic.net/LwZJF.png we cut off the
 distance from the bottom to the Descent
 */
/**
 * @deprecated Moved to a SDC component
 */
/**
 * Meant to glue the menu image before and after the content area so it can be used as glass background..
 */
/**
 * Use the content's image as a background below the content area to prevent boring grey areas
 */
/*
 * Use this for sections where the main content area must start below the header (not overlayed by the glass header)
 * to look fine u need to define a backkground image either for the body element or the layout container
 */
body {
  --fla-header-height-min: 60px;
  --fla-header-height: 60px;
  --fla-header-height-max: 90px;
  --fla-header-padding-y: 10px;
  --fla-header-padding-x: 2px;
  --century-gothic-top-offset: 1px;
  --fla-header-headline-ratio:9.25/12;
  --fla-header-headline-padding-top: 15cqh;
  --fla-header-top-headline-margin-bottom: 10cqh;
  --fla-header-headline-container-height: calc(
    var(--fla-header-height) -
    var(--fla-header-padding-y) -
    var(--fla-header-headline-padding-top)
  );
  --fla-header-top-headline-font-size: calc( round(down,
    (
      (
        var(--fla-header-headline-container-height) -
        var(--fla-header-headline-padding-top) -
        var(--fla-header-top-headline-margin-bottom)
      ) * var(--fla-header-headline-ratio)
    ), 1px)
  ) ;
  --century-gothic-descender: calc( abs(-264/1000)*var(--fla-header-top-headline-font-size) );
  --fla-header-sub-headline-pos-y: calc(
    var(--fla-header-headline-padding-top) +
    var(--fla-header-top-headline-font-size) +
    var(--fla-header-top-headline-margin-bottom) -
    var(--century-gothic-descender)
  );
  --fla-header-sub-headline-font-size: calc(
    var(--fla-header-headline-container-height) -
    var(--fla-header-sub-headline-pos-y) -
    var(--fla-header-top-headline-margin-bottom) +
    var(--century-gothic-descender)
  ) ;
}

@container html-container (min-width: 321px) {
  body {
    --fla-header-headline-padding-top: 12cqh;
    --fla-header-top-headline-margin-bottom: 11cqh;
    --fla-header-padding-x: var(--fla-header-padding-y, 16px);
  }
}

@container html-container (min-width: 731px) and (min-height: 931px) {
  body {
    --fla-header-height: 8.33vh;
    --fla-header-padding-y: calc( 2 * 0.11 * var(--fla-header-height) );
  }
}

header {
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  gap: 0.5rem;
  align-items: flex-start;
  justify-content: space-between;
  padding: calc(var(--fla-header-padding-y)/2) calc(var(--fla-header-padding-x)/2);
  background-color: #4b4b4b;
  background-color: #313131;
  border-bottom: 1px solid rgba(0, 0, 0, 0.6);
  z-index: 2;
  min-height: var(--fla-header-height-min);
  height: calc(var(--fla-header-height));
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  max-width: var(--fla-layout-container-max-width);
  container-name: header-container;
  container-type: size;
  /* glass header */
}

header > * {
  --active-layout: "none";
}

@container header-container (max-width: 300px) {
  header > * {
    --header-container--active-layout: "compact";
    --header-container--active-query: "(max-width: 300px)";
    --header-container--compact: ;
  }
}

@container header-container (min-width: 301px) {
  header > * {
    --header-container--active-layout: "expanded";
    --header-container--active-query: "(min-width: 301px)";
    --header-container--expanded: ;
  }
}

@container header-container (max-width: 320px) {
  header > * {
    --header-container--active-layout: "phone-small";
    --header-container--active-query: "(max-width: 320px)";
    --header-container--phone-small: ;
  }
}

@container header-container (min-width: 321px) and (max-width: 375px) {
  header > * {
    --header-container--active-layout: "phone-medium";
    --header-container--active-query: "(min-width: 321px) and (max-width: 375px)";
    --header-container--phone-medium: ;
  }
}

@media screen and (min-width: 2561px) {
  body[data-fla-state*="le:0"] header {
    border-right: 1px solid black;
    border-left: 1px solid black;
  }
}

@container html-container (min-width: 731px) and (min-height: 931px) {
  header .region-header-left {
    gap: calc(0.1*var(--fla-header-height));
  }
}

@media screen and (min-width: 2561px) {
  header {
    left: calc(50vw - var(--fla-layout-container-max-width)/2);
    right: auto;
    width: var(--fla-layout-container-max-width);
  }
}

header .region {
  height: 100%;
  position: relative;
}

header .region-header {
  flex: 1;
}

header .region-header > .block {
  white-space: nowrap;
}

header .region-header-left {
  position: relative;
  width: 100%;
  flex: 0;
}

body {
  --fla-layout-toggler-width: 24px;
}

header a.fla-toggle-expanded-layout {
  display: none;
  opacity: 0.15;
  transition: opacity 0.2s ease-in-out;
  position: absolute;
  top: calc( 50% - var(--fla-layout-toggler-width) / 2);
  left: calc( 50% - var(--fla-layout-toggler-width) / 2);
  z-index: 100;
}

header a.fla-toggle-expanded-layout:hover {
  opacity: 0.618;
}

body[data-fla-state*="le:0"] header a.fla-toggle-expanded-layout i[class*="collapse"] {
  display: none;
}

body[data-fla-state*="le:1"] header a.fla-toggle-expanded-layout i[class*="expand"] {
  display: none;
}

@media screen and (min-width: 2561px) {
  header a.fla-toggle-expanded-layout {
    display: block;
  }
}

html.glass-header header {
  background-color: transparent;
  z-index: 1;
  background-color: rgba(0, 0, 0, 0.35);
  border-radius: 1px;
  backdrop-filter: grayscale(20%) blur(3px) brightness(60%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

body.header-has-background header {
  background-size: 100% auto;
  background-position: top center;
  background-repeat: no-repeat;
  border-bottom-color: rgba(49, 49, 49, 0.8);
  border-bottom-color: rgba(179, 179, 179, 0.6);
  border-image-slice: 1;
  border-image-source: linear-gradient(to right, rgba(255, 255, 255, 0.618) 0%, transparent 60%, transparent 100%);
  border-bottom-width: 0px;
  border-bottom-color: transparent;
  border-left-width: 0;
  border-top-width: 0;
  border-right-width: 0;
}

body.header-has-background header:after {
  content: " ";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-image: linear-gradient(to right, rgba(255, 255, 255, 0.618) 50%, transparent calc(100% - 60px), transparent 100%);
  height: 1px;
}

body.header-has-background header:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  backdrop-filter: grayscale(40%);
  z-index: -1;
  backdrop-filter: none;
  content: " ";
  background-color: rgba(0, 0, 0, 0.25);
  background: linear-gradient(to right, rgba(0, 0, 0, 0.618), rgba(0, 0, 0, 0.1));
}

header .region-header-right {
  flex-grow: 0;
  display: flex;
  flex-direction: row;
}

html {
  --fla-heading-font-family: "CenturyGothicStd", "Inter", sans-serif;
  --fla-subheading-font-family: "Poppins";
  --fla-body-font-family: "Inter", "Helvetica Neue", "Arial", "Helvetica", "sans-serif";
  --fla-text-color-light: rgba(255,255,255,0.618);
}

body {
  --fla-dock-height: 0px;
}

body[data-fla-state*="do:1"] {
  --fla-dock-height: var(--fla-footer-height);
}

/**
 * TO BE INCLUDED WITHIN THE CONTENT CONTAINING ELEMENT
 * (WHERE THE SCOLLING DOES HAPPEN)
 */
/**
 * Must be applied not to the block element but the h1/h2/h3 directly
 * block must be display: contents
 */
/**
  NOTE: THIS IS SPECIFIC TO FONTS
  ARIAL: 0.318/2
 */
/**
 * What this does, is:
 * Given a Text like "First, Last and Always" we have the descender "y"
 * this mixin calculates the space that is taken by descenders and subtracts it
 * from the height of the element via negative margin bottom. By the way:
 * the descender space is also taken if we have text that does NOT have a descender!
 * When to use:
 * - The text block needs to sit bottom align with a specific design line or element
 *
 * When NOT to use:
 * - If another text block is placed below this one. in that case we need to use another mixin "centuryGothicDescendantEqualizer"
 *
 * Get the UnitsPerEM via "ttx -t head CenturyGothicStd.ttf" (fonttools)
 * Get the sTypoDescender via `ttx -t OS/2 CenturyGothicStd.ttf` (fonttools)
 * Calculate the Descener Ratio: Descender Ratio = |sTypoDescender| / unitsPerEm
 * Translate into CSS: margin-bottom: calc(-1*<DescenderRatio>)
 *
 * @see https://stackoverflow.com/questions/27631736/meaning-of-top-ascent-baseline-descent-bottom-and-leading-in-androids-font
 */
/**
 What we do here is:
 Based on this graphic: https://i.sstatic.net/LwZJF.png we cut off the
 distance from the bottom to the Descent
 */
/**
 * @deprecated Moved to a SDC component
 */
/**
 * Meant to glue the menu image before and after the content area so it can be used as glass background..
 */
/**
 * Use the content's image as a background below the content area to prevent boring grey areas
 */
/*
 * Use this for sections where the main content area must start below the header (not overlayed by the glass header)
 * to look fine u need to define a backkground image either for the body element or the layout container
 */
/*
@media screen and (min-width: $breakpoint-S+1 + 10000){
  header .block-page-title-block{
    display: none;
  }
}
//*/
/**
  * Enable vertical scrolling within triple-menu
  * /portfolio/projects-and-search/species-texture-pattern/species
  * /portfolio/projects-and-search/species-texture-pattern/texture
  * /portfolio/projects-and-search/species-texture-pattern/pattern
  *
 */
body[class*="path-portfolio-search-species-texture-pattern-"] #block-breadcrumbs ol li:nth-of-type(2), body[class*="path-portfolio-search-species-texture-pattern-"] #block-breadcrumbs ol li:nth-of-type(2), body[class*="path-portfolio-search-species-texture-pattern-"] #block-breadcrumbs ol li:nth-of-type(4) {
  display: none;
}

body[class*="path-portfolio-search-species-texture-pattern-"] #block-breadcrumbs ol li:last-of-type {
  display: inline-block;
}

body[class*="path-portfolio-search-species-texture-pattern-"] #block-fla-flanavigation ul.menu-level-4 {
  overflow: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  white-space: normal;
  align-items: start;
}

body[class*="path-portfolio-search-species-texture-pattern-"] #block-fla-flanavigation ul.menu-level-4 li {
  width: 50%;
  flex-basis: 50%;
  flex-grow: 1;
  box-sizing: border-box;
  height: 26%;
  max-height: 33.33%;
}

body[class*="path-portfolio-search-species-texture-pattern-"] #block-fla-flanavigation ul.menu-level-4 li:nth-last-of-type(n+1) {
  border-right: 1px solid black;
}

body[class*="path-portfolio-search-species-texture-pattern-"] #block-fla-flanavigation ul.menu-level-4 li .taxonomy_menu--field-image {
  background-size: cover;
}

#block-fla-flanavigation li.menu-item a[href*="/portfolio/search/species-texture-pattern/texture.html"] + .menu_link_content .field--name-field-menu-image > div, #block-fla-flanavigation li.menu-item a[href*="/portfolio/search/species-texture-pattern/texture.html"] + .menu_link_content .field--name-field-menu-image picture img, #block-fla-flanavigation li.menu-item a[href*="/portfolio/search/species-texture-pattern/texture.html"] + .menu_link_content > .taxonomy_menu--field-image, #block-fla-flanavigation li.menu-item a[href*="/portfolio/search/species-texture-pattern/texture.html"] + .menu_link_content > .taxonomy_menu--field-image picture img {
  background-position: 50% 70%;
  object-position: 50% 70%;
}

/*
#block-fla-flanavigation li.menu-item a[href="/portfolio/search"] {
  & + .menu_link_content .field--name-field-menu-image > div,
  & + .menu_link_content .field--name-field-menu-image picture img,
  & + .menu_link_content > .taxonomy_menu--field-image,
  & + .menu_link_content > .taxonomy_menu--field-image picture img,
  {
    background-position: left top !important;
    object-position: left top !important;
  }
}
//*/
#block-fla-flanavigation li.menu-item a[href*="fla-expertise/installation-and-finishing"] + .menu_link_content .field--name-field-menu-image > div, #block-fla-flanavigation li.menu-item a[href*="fla-expertise/installation-and-finishing"] + .menu_link_content .field--name-field-menu-image picture img, #block-fla-flanavigation li.menu-item a[href*="fla-expertise/installation-and-finishing"] + .menu_link_content > .taxonomy_menu--field-image, #block-fla-flanavigation li.menu-item a[href*="fla-expertise/installation-and-finishing"] + .menu_link_content > .taxonomy_menu--field-image picture img {
  background-position: top center;
  object-position: top center;
}

#block-fla-flanavigation li.menu-item a[href="/fla-expertise/research-and-development/new-processes-testing.html"] + .menu_link_content .field--name-field-menu-image > div, #block-fla-flanavigation li.menu-item a[href="/fla-expertise/research-and-development/new-processes-testing.html"] + .menu_link_content .field--name-field-menu-image picture img, #block-fla-flanavigation li.menu-item a[href="/fla-expertise/research-and-development/new-processes-testing.html"] + .menu_link_content > .taxonomy_menu--field-image, #block-fla-flanavigation li.menu-item a[href="/fla-expertise/research-and-development/new-processes-testing.html"] + .menu_link_content > .taxonomy_menu--field-image picture img {
  background-position: top center;
  object-position: top center;
}

#block-fla-flanavigation li.menu-item a[href*="/restoration-and-touch"] + .menu_link_content .field--name-field-menu-image > div, #block-fla-flanavigation li.menu-item a[href*="/restoration-and-touch"] + .menu_link_content .field--name-field-menu-image picture img, #block-fla-flanavigation li.menu-item a[href*="/restoration-and-touch"] + .menu_link_content > .taxonomy_menu--field-image, #block-fla-flanavigation li.menu-item a[href*="/restoration-and-touch"] + .menu_link_content > .taxonomy_menu--field-image picture img {
  background-position: top center;
  object-position: top center;
}

#block-fla-flanavigation li.menu-item a[href*="/doors.html"] + .menu_link_content .field--name-field-menu-image > div, #block-fla-flanavigation li.menu-item a[href*="/doors.html"] + .menu_link_content .field--name-field-menu-image picture img, #block-fla-flanavigation li.menu-item a[href*="/doors.html"] + .menu_link_content > .taxonomy_menu--field-image, #block-fla-flanavigation li.menu-item a[href*="/doors.html"] + .menu_link_content > .taxonomy_menu--field-image picture img {
  background-position: top center;
  object-position: top center;
}

#block-fla-flanavigation li.menu-item a[href*="/ceilings/index.html"] + .menu_link_content .field--name-field-menu-image > div, #block-fla-flanavigation li.menu-item a[href*="/ceilings/index.html"] + .menu_link_content .field--name-field-menu-image picture img, #block-fla-flanavigation li.menu-item a[href*="/ceilings/index.html"] + .menu_link_content > .taxonomy_menu--field-image, #block-fla-flanavigation li.menu-item a[href*="/ceilings/index.html"] + .menu_link_content > .taxonomy_menu--field-image picture img {
  background-position: top center;
  object-position: top center;
}

#block-fla-flanavigation li.menu-item a[href*="/portfolio/projects/all/index.html"] + .menu_link_content .field--name-field-menu-image > div, #block-fla-flanavigation li.menu-item a[href*="/portfolio/projects/all/index.html"] + .menu_link_content .field--name-field-menu-image picture img, #block-fla-flanavigation li.menu-item a[href*="/portfolio/projects/all/index.html"] + .menu_link_content > .taxonomy_menu--field-image, #block-fla-flanavigation li.menu-item a[href*="/portfolio/projects/all/index.html"] + .menu_link_content > .taxonomy_menu--field-image picture img {
  background-position: bottom center;
  object-position: bottom center;
}

#block-fla-flanavigation li.menu-item a[href*="/schotten-hansen/products-of-sh"] + .menu_link_content .field--name-field-menu-image > div, #block-fla-flanavigation li.menu-item a[href*="/schotten-hansen/products-of-sh"] + .menu_link_content .field--name-field-menu-image picture img, #block-fla-flanavigation li.menu-item a[href*="/schotten-hansen/products-of-sh"] + .menu_link_content > .taxonomy_menu--field-image, #block-fla-flanavigation li.menu-item a[href*="/schotten-hansen/products-of-sh"] + .menu_link_content > .taxonomy_menu--field-image picture img {
  background-position: 20% 50%;
  object-position: 35% 50%;
}

/**
 * Fix triple faces image positioning when layout-container goes landscapish (and triple menu switches to row layout)
 */
@container layout-container (min-aspect-ratio: 1.01) {
  #block-fla-flanavigation a[href$="faces.html"] + .menu_link_content picture img {
    object-fit: cover;
    object-position: center center;
  }
}

/*
@include container-query(layout-container, default) {
  #block-fla-flanavigation a[href$="faces.html"] + .menu_link_content {
    picture img {
      object-position: 50% 30%;
    }
  }
}
//*/
/*
#block-fla-flanavigation a[href*="/inspiration-area/albums/"] + .menu_link_content {
  picture img {
    filter: saturate(0.5);
  }
}
//*/
/*
#block-fla-flanavigation a[href*="/inspiration-area/words/"] {
  position: static;
  //color: transparent;
  &:before, &:after {
    content: "";
    position: absolute;
    width: 100cqw;
    height: 100cqh;
    top:0;
    left:0;
    right: 0;
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    z-index: -1;
  }
}
//*/
/*
 * switch between two versions of WORDS` "the light of inspiration and the Darkness of Doubt" sentence
 * LB APR26, 2026: As we have glass backgrounds now on the "a" elements via :before and :after
 *                 we need to use the menu-link-content's field--name-field-menu-image to apply the additional background images
 *                 @see FLA-3198 3split menu / WORDS - glass background not possible
 *                 @see https://tickets.freeunited.de/issue/FLA-3198/3split-menu-WORDS-glass-background-not-possible
 */
@container flanavigation (max-aspect-ratio: 9/7) {
  #block-fla-flanavigation a[href*="/inspiration-area/words/"] + .menu_link_content picture:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    pointer-events: none;
  }
  #block-fla-flanavigation a[href*="/inspiration-area/words/"] + .menu_link_content picture:before {
    background: transparent url(/themes/custom/fla/img/inspiration/Words-the-light-of-inspiration-2-lines.png) center center no-repeat;
    background-size: 100% auto;
  }
  html[data-fla-state*="do:1"] #block-fla-flanavigation a[href*="/inspiration-area/words/"] + .menu_link_content picture:before {
    height: calc(100% - var(--fla-footer-height));
  }
}

@container flanavigation (min-aspect-ratio: 9.01/7) {
  #block-fla-flanavigation a[href*="/inspiration-area/words/"] + .menu_link_content picture:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    pointer-events: none;
  }
  #block-fla-flanavigation a[href*="/inspiration-area/words/"] + .menu_link_content picture:before {
    background: transparent url(/themes/custom/fla/img/inspiration/Words-the-light-of-inspiration-5-lines-edit-LB.png) center center no-repeat;
    background-size: 60% auto;
  }
}

body.path-inspiration-area #block-fla-flanavigation li.menu-item:before {
  background-image: url(/themes/custom/fla/img/vignettes/Vignette_3split.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  opacity: 0.75;
}

body.path-inspiration-area #block-fla-flanavigation li.menu-item:first-of-type:before {
  opacity: 0.5 !important;
}

/**
 * Prevent vertical 1px scrollbars in HTML container on pages where we don't need a scrollbar anyways
 * navigational pages (3splits, old frontpage, portfolio/projects)
 */
html.root-path-taxonomy, html.root-path-portfolio, html[class^="path-portfolio-projects"] {
  overflow-y: hidden;
}

/**
 * hover:underline for mailtos in contact/info
 */
.path-contact-us-contact-us__html a[href^="mailto:"]:hover {
  text-decoration: underline;
}

/**
 * Reduce image size on "Contact us" page
 */
body.path-contact-us-contact-us__html .field--name-field-image {
  display: none;
}

body.path-contact-us-contact-us__html .actual-content {
  padding-top: var(--fla-header-height);
  padding-bottom: var(--fla-dock-height) !important;
  height: 100dvh;
}

/**
 Hide scrollbars on the "Contact us" pages and use black&white hands image as body background
 */
/*
body.path-contact-us-hawaii__html,
body.path-contact-us-california__html
{

  background: transparent url(/themes/custom/fla/img/hands-black-white.jpg) center bottom no-repeat;
  background-size: cover;

  @media screen and (min-width: $breakpoint-L) {
    background-position: right bottom;
  }

  .actual-content{
   @include vignette-css();
  }

  #block-fla-content{
    overflow: hidden !important;
    @media screen and (min-width: $breakpoint-L) {
      overflow: hidden !important;
    }
  }
}


//*/
/**
 * @fixme this should go into a layout/design that is selectable per node - could also get a sdc comp
*/
body.path-contact-hawaii__html .field--name-field-simple-gmap,
body.path-contact-california__html .field--name-field-simple-gmap {
  order: 2;
}

body.path-contact-hawaii__html .field--name-field-simple-gmap iframe,
body.path-contact-california__html .field--name-field-simple-gmap iframe {
  display: none;
}

body.path-contact-hawaii__html .field--name-field-simple-gmap .simple-gmap-link,
body.path-contact-california__html .field--name-field-simple-gmap .simple-gmap-link {
  margin: 0;
}

body.path-contact-hawaii__html .field--name-field-simple-gmap .simple-gmap-link a:after,
body.path-contact-california__html .field--name-field-simple-gmap .simple-gmap-link a:after {
  content: "\00a0\00a0\00a0\00a0";
  background: transparent url('data:image/svg+xml; utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-globe-americas" viewBox="0 0 16 16"><path d="M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0M2.04 4.326c.325 1.329 2.532 2.54 3.717 3.19.48.263.793.434.743.484q-.121.12-.242.234c-.416.396-.787.749-.758 1.266.035.634.618.824 1.214 1.017.577.188 1.168.38 1.286.983.082.417-.075.988-.22 1.52-.215.782-.406 1.48.22 1.48 1.5-.5 3.798-3.186 4-5 .138-1.243-2-2-3.5-2.5-.478-.16-.755.081-.99.284-.172.15-.322.279-.51.216-.445-.148-2.5-2-1.5-2.5.78-.39.952-.171 1.227.182.078.099.163.208.273.318.609.304.662-.132.723-.633.039-.322.081-.671.277-.867.434-.434 1.265-.791 2.028-1.12.712-.306 1.365-.587 1.579-.88A7 7 0 1 1 2.04 4.327Z"/></svg>') center center no-repeat;
  background-size: contain;
  font-size: 1em;
  cursor: pointer;
  color: transparent;
  filter: invert(1);
  margin-left: 0.25em;
}

body.path-contact-hawaii__html .field--name-body,
body.path-contact-california__html .field--name-body {
  padding: 0 !important;
}

body.path-contact-hawaii__html main .node__content,
body.path-contact-california__html main .node__content {
  height: 100dvh !important;
}

/**
 * Picture credits
 */
html.path-image-credits__html header {
  display: none;
}

html.glass-header html.path-image-credits__html .layout-container {
  padding-top: var(--fla-header-height);
  position: unset;
}

html.glass-header html.path-image-credits__html .layout-container main {
  position: relative;
}

html.path-image-credits__html .view table {
  border-collapse: collapse;
  width: 100%;
}

html.path-image-credits__html .view table td {
  padding: 0.5em;
  border: 1px solid lightgray;
}

html {
  --fla-heading-font-family: "CenturyGothicStd", "Inter", sans-serif;
  --fla-subheading-font-family: "Poppins";
  --fla-body-font-family: "Inter", "Helvetica Neue", "Arial", "Helvetica", "sans-serif";
  --fla-text-color-light: rgba(255,255,255,0.618);
}

body {
  --fla-dock-height: 0px;
}

body[data-fla-state*="do:1"] {
  --fla-dock-height: var(--fla-footer-height);
}

/**
 * TO BE INCLUDED WITHIN THE CONTENT CONTAINING ELEMENT
 * (WHERE THE SCOLLING DOES HAPPEN)
 */
/**
 * Must be applied not to the block element but the h1/h2/h3 directly
 * block must be display: contents
 */
/**
  NOTE: THIS IS SPECIFIC TO FONTS
  ARIAL: 0.318/2
 */
/**
 * What this does, is:
 * Given a Text like "First, Last and Always" we have the descender "y"
 * this mixin calculates the space that is taken by descenders and subtracts it
 * from the height of the element via negative margin bottom. By the way:
 * the descender space is also taken if we have text that does NOT have a descender!
 * When to use:
 * - The text block needs to sit bottom align with a specific design line or element
 *
 * When NOT to use:
 * - If another text block is placed below this one. in that case we need to use another mixin "centuryGothicDescendantEqualizer"
 *
 * Get the UnitsPerEM via "ttx -t head CenturyGothicStd.ttf" (fonttools)
 * Get the sTypoDescender via `ttx -t OS/2 CenturyGothicStd.ttf` (fonttools)
 * Calculate the Descener Ratio: Descender Ratio = |sTypoDescender| / unitsPerEm
 * Translate into CSS: margin-bottom: calc(-1*<DescenderRatio>)
 *
 * @see https://stackoverflow.com/questions/27631736/meaning-of-top-ascent-baseline-descent-bottom-and-leading-in-androids-font
 */
/**
 What we do here is:
 Based on this graphic: https://i.sstatic.net/LwZJF.png we cut off the
 distance from the bottom to the Descent
 */
/**
 * @deprecated Moved to a SDC component
 */
/**
 * Meant to glue the menu image before and after the content area so it can be used as glass background..
 */
/**
 * Use the content's image as a background below the content area to prevent boring grey areas
 */
/*
 * Use this for sections where the main content area must start below the header (not overlayed by the glass header)
 * to look fine u need to define a backkground image either for the body element or the layout container
 */
body {
  --fla--3split-col-layout-max-ratio: 90/70;
}

/**
 * 1st and last item needs top/bottom padding if glass-header is on or glass dock is on
 */
body[data-fla-state*="do:0"] {
  --fla-header-footer-height: calc(var(--fla-header-height) + 0px);
}

body[data-fla-state*="do:1"] {
  --fla-header-footer-height: calc(var(--fla-header-height) + var(--fla-footer-height));
}

div.taxonomy-term.vocabulary-fla-content-hierarchy {
  display: none;
}

/** shared styles between home 3split and fla-navigation 3split */
main nav.menu--home, main nav.menu--fla-navigation, .view.view-fla-taxonomy-menu-view {
  container-name: flanavigation;
  container-type: size;
  height: 100dvh;
}

main nav.menu--home > *, main nav.menu--fla-navigation > *, .view.view-fla-taxonomy-menu-view > * {
  --active-layout: "none";
}

@container flanavigation (max-aspect-ratio: 9/7) {
  main nav.menu--home > *, main nav.menu--fla-navigation > *, .view.view-fla-taxonomy-menu-view > * {
    --flanavigation--active-layout: "column";
    --flanavigation--active-query: "(max-aspect-ratio: 9/7)";
    --flanavigation--column: ;
  }
}

@container flanavigation (min-aspect-ratio: 9.01/7) {
  main nav.menu--home > *, main nav.menu--fla-navigation > *, .view.view-fla-taxonomy-menu-view > * {
    --flanavigation--active-layout: "row";
    --flanavigation--active-query: "(min-aspect-ratio: 9.01/7)";
    --flanavigation--row: ;
  }
}

body.path-node main nav.menu--home, body.path-node main nav.menu--fla-navigation, body.path-node .view.view-fla-taxonomy-menu-view {
  display: none;
}

main nav.menu--home ul, main nav.menu--home .view-content, main nav.menu--fla-navigation ul, main nav.menu--fla-navigation .view-content, .view.view-fla-taxonomy-menu-view ul, .view.view-fla-taxonomy-menu-view .view-content {
  height: 100dvh;
  width: var(--fla-content-width);
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  position: relative;
  margin: 0;
}

body[data-fla-state*="le:1"] main nav.menu--home ul, body[data-fla-state*="le:1"] main nav.menu--home .view-content, body[data-fla-state*="le:1"] main nav.menu--fla-navigation ul, body[data-fla-state*="le:1"] main nav.menu--fla-navigation .view-content, body[data-fla-state*="le:1"] .view.view-fla-taxonomy-menu-view ul, body[data-fla-state*="le:1"] .view.view-fla-taxonomy-menu-view .view-content {
  width: 100vw;
}

@container flanavigation (max-aspect-ratio: 9/7) {
  main nav.menu--home ul, main nav.menu--home .view-content, main nav.menu--fla-navigation ul, main nav.menu--fla-navigation .view-content, .view.view-fla-taxonomy-menu-view ul, .view.view-fla-taxonomy-menu-view .view-content {
    flex-direction: column;
  }
}

main nav.menu--home li.menu-item .menu_link_content, main nav.menu--home .field--name-field-menu-image, main nav.menu--home .taxonomy_menu--field-image,
main nav.menu--home .views-field-field-image .field-content, main nav.menu--home .views-field-field-image .field-content [class^="orientation"], main nav.menu--fla-navigation li.menu-item .menu_link_content, main nav.menu--fla-navigation .field--name-field-menu-image, main nav.menu--fla-navigation .taxonomy_menu--field-image,
main nav.menu--fla-navigation .views-field-field-image .field-content, main nav.menu--fla-navigation .views-field-field-image .field-content [class^="orientation"], .view.view-fla-taxonomy-menu-view li.menu-item .menu_link_content, .view.view-fla-taxonomy-menu-view .field--name-field-menu-image, .view.view-fla-taxonomy-menu-view .taxonomy_menu--field-image,
.view.view-fla-taxonomy-menu-view .views-field-field-image .field-content, .view.view-fla-taxonomy-menu-view .views-field-field-image .field-content [class^="orientation"] {
  display: contents;
}

main nav.menu--home .field--name-field-menu-image picture,
main nav.menu--home .taxonomy_menu--field-image picture,
main nav.menu--home .views-field-field-image, main nav.menu--fla-navigation .field--name-field-menu-image picture,
main nav.menu--fla-navigation .taxonomy_menu--field-image picture,
main nav.menu--fla-navigation .views-field-field-image, .view.view-fla-taxonomy-menu-view .field--name-field-menu-image picture,
.view.view-fla-taxonomy-menu-view .taxonomy_menu--field-image picture,
.view.view-fla-taxonomy-menu-view .views-field-field-image {
  position: absolute;
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
  z-index: -1;
}

main nav.menu--home .field--name-field-menu-image picture img,
main nav.menu--home .taxonomy_menu--field-image picture img,
main nav.menu--home .views-field-field-image img, main nav.menu--fla-navigation .field--name-field-menu-image picture img,
main nav.menu--fla-navigation .taxonomy_menu--field-image picture img,
main nav.menu--fla-navigation .views-field-field-image img, .view.view-fla-taxonomy-menu-view .field--name-field-menu-image picture img,
.view.view-fla-taxonomy-menu-view .taxonomy_menu--field-image picture img,
.view.view-fla-taxonomy-menu-view .views-field-field-image img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  object-position: center center;
  transition: all 0.6s ease-in-out;
}

main nav.menu--home li.menu-item, main nav.menu--home .views-row, main nav.menu--fla-navigation li.menu-item, main nav.menu--fla-navigation .views-row, .view.view-fla-taxonomy-menu-view li.menu-item, .view.view-fla-taxonomy-menu-view .views-row {
  position: relative;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  height: 100%;
  width: 33.3333%;
  /** column layout (menu items align to y-axis) */
}

main nav.menu--home li.menu-item:before, main nav.menu--home .views-row:before, main nav.menu--fla-navigation li.menu-item:before, main nav.menu--fla-navigation .views-row:before, .view.view-fla-taxonomy-menu-view li.menu-item:before, .view.view-fla-taxonomy-menu-view .views-row:before {
  z-index: 1;
  content: " ";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  background-color: rgba(0, 0, 0, 0.2);
  backdrop-filter: saturate(1.1) contrast(1.05);
}

main nav.menu--home li.menu-item:hover img, main nav.menu--home .views-row:hover img, main nav.menu--fla-navigation li.menu-item:hover img, main nav.menu--fla-navigation .views-row:hover img, .view.view-fla-taxonomy-menu-view li.menu-item:hover img, .view.view-fla-taxonomy-menu-view .views-row:hover img {
  transform: scale(1.05);
  transform-origin: center center;
}

main nav.menu--home li.menu-item:hover a, main nav.menu--home li.menu-item:hover .field--name-field-section-slogan, main nav.menu--home .views-row:hover a, main nav.menu--home .views-row:hover .field--name-field-section-slogan, main nav.menu--fla-navigation li.menu-item:hover a, main nav.menu--fla-navigation li.menu-item:hover .field--name-field-section-slogan, main nav.menu--fla-navigation .views-row:hover a, main nav.menu--fla-navigation .views-row:hover .field--name-field-section-slogan, .view.view-fla-taxonomy-menu-view li.menu-item:hover a, .view.view-fla-taxonomy-menu-view li.menu-item:hover .field--name-field-section-slogan, .view.view-fla-taxonomy-menu-view .views-row:hover a, .view.view-fla-taxonomy-menu-view .views-row:hover .field--name-field-section-slogan {
  color: white;
}

main nav.menu--home li.menu-item:hover a:before, main nav.menu--home .views-row:hover a:before, main nav.menu--fla-navigation li.menu-item:hover a:before, main nav.menu--fla-navigation .views-row:hover a:before, .view.view-fla-taxonomy-menu-view li.menu-item:hover a:before, .view.view-fla-taxonomy-menu-view .views-row:hover a:before {
  transform: scale(1.04);
  backdrop-filter: saturate(1) contrast(0.9) blur(1px) brightness(0.95);
  border-color: rgba(255, 255, 255, 0.65);
  filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.65));
}

main nav.menu--home li.menu-item:first-of-type, main nav.menu--home .views-row:first-of-type, main nav.menu--fla-navigation li.menu-item:first-of-type, main nav.menu--fla-navigation .views-row:first-of-type, .view.view-fla-taxonomy-menu-view li.menu-item:first-of-type, .view.view-fla-taxonomy-menu-view .views-row:first-of-type {
  container-name: flanavigation-column-top;
  container-type: size;
}

main nav.menu--home li.menu-item:first-of-type > *, main nav.menu--home .views-row:first-of-type > *, main nav.menu--fla-navigation li.menu-item:first-of-type > *, main nav.menu--fla-navigation .views-row:first-of-type > *, .view.view-fla-taxonomy-menu-view li.menu-item:first-of-type > *, .view.view-fla-taxonomy-menu-view .views-row:first-of-type > * {
  --active-layout: "none";
}

@container flanavigation-column-top (min-width: 0) {
  main nav.menu--home li.menu-item:first-of-type > *, main nav.menu--home .views-row:first-of-type > *, main nav.menu--fla-navigation li.menu-item:first-of-type > *, main nav.menu--fla-navigation .views-row:first-of-type > *, .view.view-fla-taxonomy-menu-view li.menu-item:first-of-type > *, .view.view-fla-taxonomy-menu-view .views-row:first-of-type > * {
    --flanavigation-column-top--active-layout: "default";
    --flanavigation-column-top--active-query: "(min-width: 0)";
    --flanavigation-column-top--default: ;
  }
}

main nav.menu--home li.menu-item:nth-of-type(2), main nav.menu--home .views-row:nth-of-type(2), main nav.menu--fla-navigation li.menu-item:nth-of-type(2), main nav.menu--fla-navigation .views-row:nth-of-type(2), .view.view-fla-taxonomy-menu-view li.menu-item:nth-of-type(2), .view.view-fla-taxonomy-menu-view .views-row:nth-of-type(2) {
  container-name: flanavigation-column-between;
  container-type: size;
}

main nav.menu--home li.menu-item:nth-of-type(2) > *, main nav.menu--home .views-row:nth-of-type(2) > *, main nav.menu--fla-navigation li.menu-item:nth-of-type(2) > *, main nav.menu--fla-navigation .views-row:nth-of-type(2) > *, .view.view-fla-taxonomy-menu-view li.menu-item:nth-of-type(2) > *, .view.view-fla-taxonomy-menu-view .views-row:nth-of-type(2) > * {
  --active-layout: "none";
}

@container flanavigation-column-between (min-width: 0) {
  main nav.menu--home li.menu-item:nth-of-type(2) > *, main nav.menu--home .views-row:nth-of-type(2) > *, main nav.menu--fla-navigation li.menu-item:nth-of-type(2) > *, main nav.menu--fla-navigation .views-row:nth-of-type(2) > *, .view.view-fla-taxonomy-menu-view li.menu-item:nth-of-type(2) > *, .view.view-fla-taxonomy-menu-view .views-row:nth-of-type(2) > * {
    --flanavigation-column-between--active-layout: "default";
    --flanavigation-column-between--active-query: "(min-width: 0)";
    --flanavigation-column-between--default: ;
  }
}

main nav.menu--home li.menu-item:last-of-type, main nav.menu--home .views-row:last-of-type, main nav.menu--fla-navigation li.menu-item:last-of-type, main nav.menu--fla-navigation .views-row:last-of-type, .view.view-fla-taxonomy-menu-view li.menu-item:last-of-type, .view.view-fla-taxonomy-menu-view .views-row:last-of-type {
  container-name: flanavigation-column-bottom;
  container-type: size;
}

main nav.menu--home li.menu-item:last-of-type > *, main nav.menu--home .views-row:last-of-type > *, main nav.menu--fla-navigation li.menu-item:last-of-type > *, main nav.menu--fla-navigation .views-row:last-of-type > *, .view.view-fla-taxonomy-menu-view li.menu-item:last-of-type > *, .view.view-fla-taxonomy-menu-view .views-row:last-of-type > * {
  --active-layout: "none";
}

@container flanavigation-column-bottom (min-width: 0) {
  main nav.menu--home li.menu-item:last-of-type > *, main nav.menu--home .views-row:last-of-type > *, main nav.menu--fla-navigation li.menu-item:last-of-type > *, main nav.menu--fla-navigation .views-row:last-of-type > *, .view.view-fla-taxonomy-menu-view li.menu-item:last-of-type > *, .view.view-fla-taxonomy-menu-view .views-row:last-of-type > * {
    --flanavigation-column-bottom--active-layout: "default";
    --flanavigation-column-bottom--active-query: "(min-width: 0)";
    --flanavigation-column-bottom--default: ;
  }
}

main nav.menu--home li.menu-item:nth-of-type(2):before, main nav.menu--home .views-row:nth-of-type(2):before, main nav.menu--fla-navigation li.menu-item:nth-of-type(2):before, main nav.menu--fla-navigation .views-row:nth-of-type(2):before, .view.view-fla-taxonomy-menu-view li.menu-item:nth-of-type(2):before, .view.view-fla-taxonomy-menu-view .views-row:nth-of-type(2):before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  pointer-events: none;
}

main nav.menu--home li.menu-item:nth-of-type(2):after, main nav.menu--home .views-row:nth-of-type(2):after, main nav.menu--fla-navigation li.menu-item:nth-of-type(2):after, main nav.menu--fla-navigation .views-row:nth-of-type(2):after, .view.view-fla-taxonomy-menu-view li.menu-item:nth-of-type(2):after, .view.view-fla-taxonomy-menu-view .views-row:nth-of-type(2):after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  pointer-events: none;
}

main nav.menu--home li.menu-item:nth-of-type(2):before, main nav.menu--home li.menu-item:nth-of-type(2):after, main nav.menu--home .views-row:nth-of-type(2):before, main nav.menu--home .views-row:nth-of-type(2):after, main nav.menu--fla-navigation li.menu-item:nth-of-type(2):before, main nav.menu--fla-navigation li.menu-item:nth-of-type(2):after, main nav.menu--fla-navigation .views-row:nth-of-type(2):before, main nav.menu--fla-navigation .views-row:nth-of-type(2):after, .view.view-fla-taxonomy-menu-view li.menu-item:nth-of-type(2):before, .view.view-fla-taxonomy-menu-view li.menu-item:nth-of-type(2):after, .view.view-fla-taxonomy-menu-view .views-row:nth-of-type(2):before, .view.view-fla-taxonomy-menu-view .views-row:nth-of-type(2):after {
  width: 1px;
  background-color: rgba(255, 255, 255, 0.5);
  pointer-events: none;
}

main nav.menu--home li.menu-item:nth-of-type(2):before, main nav.menu--home .views-row:nth-of-type(2):before, main nav.menu--fla-navigation li.menu-item:nth-of-type(2):before, main nav.menu--fla-navigation .views-row:nth-of-type(2):before, .view.view-fla-taxonomy-menu-view li.menu-item:nth-of-type(2):before, .view.view-fla-taxonomy-menu-view .views-row:nth-of-type(2):before {
  right: auto;
}

main nav.menu--home li.menu-item:nth-of-type(2):after, main nav.menu--home .views-row:nth-of-type(2):after, main nav.menu--fla-navigation li.menu-item:nth-of-type(2):after, main nav.menu--fla-navigation .views-row:nth-of-type(2):after, .view.view-fla-taxonomy-menu-view li.menu-item:nth-of-type(2):after, .view.view-fla-taxonomy-menu-view .views-row:nth-of-type(2):after {
  left: auto;
}

@container flanavigation (max-aspect-ratio: 9/7) {
  main nav.menu--home li.menu-item, main nav.menu--home .views-row, main nav.menu--fla-navigation li.menu-item, main nav.menu--fla-navigation .views-row, .view.view-fla-taxonomy-menu-view li.menu-item, .view.view-fla-taxonomy-menu-view .views-row {
    width: calc(100% + 2px);
    margin-left: -1px;
  }
  main nav.menu--home li.menu-item:first-of-type, main nav.menu--home .views-row:first-of-type, main nav.menu--fla-navigation li.menu-item:first-of-type, main nav.menu--fla-navigation .views-row:first-of-type, .view.view-fla-taxonomy-menu-view li.menu-item:first-of-type, .view.view-fla-taxonomy-menu-view .views-row:first-of-type {
    height: calc(0.33 * (100% - var(--fla-header-footer-height)) + var(--fla-header-height));
    padding-top: calc(var(--fla-header-height));
  }
  main nav.menu--home li.menu-item:nth-of-type(2), main nav.menu--home .views-row:nth-of-type(2), main nav.menu--fla-navigation li.menu-item:nth-of-type(2), main nav.menu--fla-navigation .views-row:nth-of-type(2), .view.view-fla-taxonomy-menu-view li.menu-item:nth-of-type(2), .view.view-fla-taxonomy-menu-view .views-row:nth-of-type(2) {
    border-left-width: 0 !important;
    border-right-width: 0 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.5);
    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
    height: calc(0.33 * (100% - var(--fla-header-footer-height)));
  }
  body[data-fla-state*="do:1"] main nav.menu--home li.menu-item:nth-of-type(2), body[data-fla-state*="do:1"] main nav.menu--home .views-row:nth-of-type(2), body[data-fla-state*="do:1"] main nav.menu--fla-navigation li.menu-item:nth-of-type(2), body[data-fla-state*="do:1"] main nav.menu--fla-navigation .views-row:nth-of-type(2), body[data-fla-state*="do:1"] .view.view-fla-taxonomy-menu-view li.menu-item:nth-of-type(2), body[data-fla-state*="do:1"] .view.view-fla-taxonomy-menu-view .views-row:nth-of-type(2) {
    height: calc(0.33 * (100% - var(--fla-header-footer-height)));
  }
  main nav.menu--home li.menu-item:last-of-type, main nav.menu--home .views-row:last-of-type, main nav.menu--fla-navigation li.menu-item:last-of-type, main nav.menu--fla-navigation .views-row:last-of-type, .view.view-fla-taxonomy-menu-view li.menu-item:last-of-type, .view.view-fla-taxonomy-menu-view .views-row:last-of-type {
    height: calc(0.33 * (100% - var(--fla-header-footer-height)));
  }
  body[data-fla-state*="do:1"] main nav.menu--home li.menu-item:last-of-type, body[data-fla-state*="do:1"] main nav.menu--home .views-row:last-of-type, body[data-fla-state*="do:1"] main nav.menu--fla-navigation li.menu-item:last-of-type, body[data-fla-state*="do:1"] main nav.menu--fla-navigation .views-row:last-of-type, body[data-fla-state*="do:1"] .view.view-fla-taxonomy-menu-view li.menu-item:last-of-type, body[data-fla-state*="do:1"] .view.view-fla-taxonomy-menu-view .views-row:last-of-type {
    height: calc(0.33 * (100% - var(--fla-header-footer-height)) + var(--fla-footer-height));
    padding-bottom: calc(var(--fla-footer-height));
  }
}

main nav.menu--home li.menu-item .views-field-name, main nav.menu--home .views-row .views-field-name, main nav.menu--fla-navigation li.menu-item .views-field-name, main nav.menu--fla-navigation .views-row .views-field-name, .view.view-fla-taxonomy-menu-view li.menu-item .views-field-name, .view.view-fla-taxonomy-menu-view .views-row .views-field-name {
  z-index: 1;
}

main nav.menu--home li.menu-item > a, main nav.menu--home li.menu-item .views-field-name .field-content, main nav.menu--home .views-row > a, main nav.menu--home .views-row .views-field-name .field-content, main nav.menu--fla-navigation li.menu-item > a, main nav.menu--fla-navigation li.menu-item .views-field-name .field-content, main nav.menu--fla-navigation .views-row > a, main nav.menu--fla-navigation .views-row .views-field-name .field-content, .view.view-fla-taxonomy-menu-view li.menu-item > a, .view.view-fla-taxonomy-menu-view li.menu-item .views-field-name .field-content, .view.view-fla-taxonomy-menu-view .views-row > a, .view.view-fla-taxonomy-menu-view .views-row .views-field-name .field-content {
  z-index: 1;
  display: block;
  font-size: 1.25rem;
  font-family: var(--fla-subheading-font-family);
  font-weight: 300;
  text-shadow: 3px 3px 13px black;
  position: relative;
}

main nav.menu--home li.menu-item > a:before, main nav.menu--home li.menu-item .views-field-name .field-content:before, main nav.menu--home .views-row > a:before, main nav.menu--home .views-row .views-field-name .field-content:before, main nav.menu--fla-navigation li.menu-item > a:before, main nav.menu--fla-navigation li.menu-item .views-field-name .field-content:before, main nav.menu--fla-navigation .views-row > a:before, main nav.menu--fla-navigation .views-row .views-field-name .field-content:before, .view.view-fla-taxonomy-menu-view li.menu-item > a:before, .view.view-fla-taxonomy-menu-view li.menu-item .views-field-name .field-content:before, .view.view-fla-taxonomy-menu-view .views-row > a:before, .view.view-fla-taxonomy-menu-view .views-row .views-field-name .field-content:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  pointer-events: none;
}

main nav.menu--home li.menu-item > a:before, main nav.menu--home li.menu-item .views-field-name .field-content:before, main nav.menu--home .views-row > a:before, main nav.menu--home .views-row .views-field-name .field-content:before, main nav.menu--fla-navigation li.menu-item > a:before, main nav.menu--fla-navigation li.menu-item .views-field-name .field-content:before, main nav.menu--fla-navigation .views-row > a:before, main nav.menu--fla-navigation .views-row .views-field-name .field-content:before, .view.view-fla-taxonomy-menu-view li.menu-item > a:before, .view.view-fla-taxonomy-menu-view li.menu-item .views-field-name .field-content:before, .view.view-fla-taxonomy-menu-view .views-row > a:before, .view.view-fla-taxonomy-menu-view .views-row .views-field-name .field-content:before {
  z-index: -1;
  background-color: rgba(0, 0, 0, 0.35);
  border-radius: 10px;
  backdrop-filter: grayscale(20%) blur(3px) brightness(60%);
}

main nav.menu--home li.menu-item > a:before, main nav.menu--home li.menu-item .views-field-name .field-content:before, main nav.menu--home .views-row > a:before, main nav.menu--home .views-row .views-field-name .field-content:before, main nav.menu--fla-navigation li.menu-item > a:before, main nav.menu--fla-navigation li.menu-item .views-field-name .field-content:before, main nav.menu--fla-navigation .views-row > a:before, main nav.menu--fla-navigation .views-row .views-field-name .field-content:before, .view.view-fla-taxonomy-menu-view li.menu-item > a:before, .view.view-fla-taxonomy-menu-view li.menu-item .views-field-name .field-content:before, .view.view-fla-taxonomy-menu-view .views-row > a:before, .view.view-fla-taxonomy-menu-view .views-row .views-field-name .field-content:before {
  --padding-x: 1rem;
  --padding-y: 0.75rem;
  padding: var(--padding-y) var(--padding-x);
  top: calc(var(--padding-y) * -1);
  left: calc(var(--padding-x) * -1);
  right: calc(var(--padding-x) * -1);
  bottom: calc(var(--padding-y) * -1);
  box-sizing: content-box;
  background-color: rgba(200, 200, 200, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.3);
  background-color: rgba(0, 0, 0, 0.2);
  backdrop-filter: saturate(0.8) contrast(0.8);
  transition: all 0.2s ease-in-out;
}

main nav.menu--home li.menu-item .field--name-field-section-slogan, main nav.menu--home .views-row .field--name-field-section-slogan, main nav.menu--fla-navigation li.menu-item .field--name-field-section-slogan, main nav.menu--fla-navigation .views-row .field--name-field-section-slogan, .view.view-fla-taxonomy-menu-view li.menu-item .field--name-field-section-slogan, .view.view-fla-taxonomy-menu-view .views-row .field--name-field-section-slogan {
  font-size: 1rem;
  z-index: 1;
  text-align: center;
  pointer-events: none;
  user-select: text;
}

/** specific styles for fla-navigation (Main navigation - which is multilevel) */
main nav.menu--fla-navigation {
  /** hide menu when we are on a:
   * - node page
   * - frontpage
   */
}

body.root-path-node main nav.menu--fla-navigation, body[class*='__html'] main nav.menu--fla-navigation, body.path-frontpage main nav.menu--fla-navigation {
  display: none !important;
}

main nav.menu--fla-navigation ul ul {
  display: none;
}

main nav.menu--fla-navigation li.menu-item--active-trail ul {
  display: block;
}

main nav.menu--fla-navigation > ul li:not(.menu-item--active-trail) ul {
  z-index: 0;
  display: none;
}

/** styles specific to home menu */
main nav.menu--home li.menu-item > a {
  font-weight: 300;
}

main nav.menu--home li.menu-item > a {
  position: unset;
  padding-left: calc(var(--overlay-width));
  padding-right: calc(var(--overlay-width));
}

main nav.menu--home li.menu-item > a:before {
  --overlay-add-padding-x: 40cqw;
  --text-area-height: 5.75ch;
  --text-area-width: 270px;
  --display: none;
  display: var(--display);
  padding: 0;
  top: 50%;
  bottom: auto;
  left: 50%;
  right: auto;
  width: var(--text-area-width);
  height: var(--text-area-height);
  margin-top: calc(var(--text-area-height)/2 * -1);
  margin-left: calc(var(--text-area-width)/2 * -1);
}

@container (min-width: 300px) {
  main nav.menu--home li.menu-item > a:before {
    --display: inline-block;
  }
}

@container (min-width: 400px) {
  main nav.menu--home li.menu-item > a:before {
    --text-area-width: 280px;
  }
}

@container (min-width: 500px) {
  main nav.menu--home li.menu-item > a:before {
    --text-area-width: 300px;
  }
}

@container flanavigation (max-aspect-ratio: 9/7) {
  main nav.menu--home li.menu-item:first-of-type > a:before {
    top: calc(50% + var(--fla-header-height) / 2);
  }
  body[data-fla-state*="do:1"] main nav.menu--home li.menu-item:last-of-type > a:before {
    top: calc(50% - var(--fla-footer-height) / 2);
  }
}

/** styles specific for portfolio/search/species-texture-pattern/<vocab>.html */
body.path-portfolio-search-species-texture-pattern-species__html,
body.path-portfolio-search-species-texture-pattern-texture__html,
body.path-portfolio-search-species-texture-pattern-pattern__html,
body.path-fla-expertise-research-and-development-wood-species-specifics__html {
  /**
   * we have more than 3 items here so we always use a row layout no matter what
   */
}

body.path-portfolio-search-species-texture-pattern-species__html .views-element-container,
body.path-portfolio-search-species-texture-pattern-texture__html .views-element-container,
body.path-portfolio-search-species-texture-pattern-pattern__html .views-element-container,
body.path-fla-expertise-research-and-development-wood-species-specifics__html .views-element-container {
  height: 100%;
}

body.path-portfolio-search-species-texture-pattern-species__html .view-content,
body.path-portfolio-search-species-texture-pattern-texture__html .view-content,
body.path-portfolio-search-species-texture-pattern-pattern__html .view-content,
body.path-fla-expertise-research-and-development-wood-species-specifics__html .view-content {
  flex-direction: row !important;
}

body.path-portfolio-search-species-texture-pattern-species__html .view.view-fla-taxonomy-menu-view .views-row,
body.path-portfolio-search-species-texture-pattern-texture__html .view.view-fla-taxonomy-menu-view .views-row,
body.path-portfolio-search-species-texture-pattern-pattern__html .view.view-fla-taxonomy-menu-view .views-row,
body.path-fla-expertise-research-and-development-wood-species-specifics__html .view.view-fla-taxonomy-menu-view .views-row {
  width: 50%;
  height: 33.33%;
}

@container flanavigation (min-width: 1200px) {
  body.path-portfolio-search-species-texture-pattern-species__html .views-row,
body.path-portfolio-search-species-texture-pattern-texture__html .views-row,
body.path-portfolio-search-species-texture-pattern-pattern__html .views-row,
body.path-fla-expertise-research-and-development-wood-species-specifics__html .views-row {
    width: 33.33% !important;
  }
}

body.path-portfolio-search-species-texture-pattern-species__html[data-fla-state*="do:1"] .views-row:nth-of-type(2),
body.path-portfolio-search-species-texture-pattern-texture__html[data-fla-state*="do:1"] .views-row:nth-of-type(2),
body.path-portfolio-search-species-texture-pattern-pattern__html[data-fla-state*="do:1"] .views-row:nth-of-type(2),
body.path-fla-expertise-research-and-development-wood-species-specifics__html[data-fla-state*="do:1"] .views-row:nth-of-type(2) {
  height: 33.33% !important;
}

/*
@media screen and (orientation: landscape) and (max-width: 10000px){
  html.is-phone-sized{
    main .layout-content {
      visibility: hidden;
      max-height: 100%;
    }
    main {
      &:before {
        position: fixed;
        top:0;
        right:0;
        bottom:0;
        left:0;
        z-index:2001;
        padding-top: 120px;
        padding-left: 50px;
        padding-right: 50px;
        background: #313131 url("/themes/custom/fla/logo.png") center 40px no-repeat;
        background-size: auto 60px;
        background-clip: padding-box;
        content: "We are currently working on allowing you to read larger format of text in landscape mode. But we are not there yet, so please keep your phone in portrait mode for now.";
        //width: calc(100% - 60px);
        //height: calc(100% - 20px);
        text-align: center;
        margin:auto;
        vertical-align:middle;
        justify-self: center;
        display: block;
      }
    }
  }
}
// */
.block-system-branding-block .site-name {
  display: none;
}

#block-fla-branding {
  z-index: 1;
  height: 100%;
  aspect-ratio: 1;
}

#block-fla-branding:before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  right: 2px;
  bottom: 2px;
  mix-blend-mode: hard-light;
  background-blend-mode: hard-light;
  backdrop-filter: brightness(1.5);
  border-radius: 200px;
  z-index: -1;
}

#block-fla-branding img {
  forced-color-adjust: none;
  color-scheme: only light;
}

@media screen and (min-width: 731px) and (min-height: 931px) {
  #block-fla-branding {
    width: auto;
    top: 11%;
    bottom: 11%;
  }
}

html {
  --fla-heading-font-family: "CenturyGothicStd", "Inter", sans-serif;
  --fla-subheading-font-family: "Poppins";
  --fla-body-font-family: "Inter", "Helvetica Neue", "Arial", "Helvetica", "sans-serif";
  --fla-text-color-light: rgba(255,255,255,0.618);
}

body {
  --fla-dock-height: 0px;
}

body[data-fla-state*="do:1"] {
  --fla-dock-height: var(--fla-footer-height);
}

/**
 * TO BE INCLUDED WITHIN THE CONTENT CONTAINING ELEMENT
 * (WHERE THE SCOLLING DOES HAPPEN)
 */
/**
 * Must be applied not to the block element but the h1/h2/h3 directly
 * block must be display: contents
 */
/**
  NOTE: THIS IS SPECIFIC TO FONTS
  ARIAL: 0.318/2
 */
/**
 * What this does, is:
 * Given a Text like "First, Last and Always" we have the descender "y"
 * this mixin calculates the space that is taken by descenders and subtracts it
 * from the height of the element via negative margin bottom. By the way:
 * the descender space is also taken if we have text that does NOT have a descender!
 * When to use:
 * - The text block needs to sit bottom align with a specific design line or element
 *
 * When NOT to use:
 * - If another text block is placed below this one. in that case we need to use another mixin "centuryGothicDescendantEqualizer"
 *
 * Get the UnitsPerEM via "ttx -t head CenturyGothicStd.ttf" (fonttools)
 * Get the sTypoDescender via `ttx -t OS/2 CenturyGothicStd.ttf` (fonttools)
 * Calculate the Descener Ratio: Descender Ratio = |sTypoDescender| / unitsPerEm
 * Translate into CSS: margin-bottom: calc(-1*<DescenderRatio>)
 *
 * @see https://stackoverflow.com/questions/27631736/meaning-of-top-ascent-baseline-descent-bottom-and-leading-in-androids-font
 */
/**
 What we do here is:
 Based on this graphic: https://i.sstatic.net/LwZJF.png we cut off the
 distance from the bottom to the Descent
 */
/**
 * @deprecated Moved to a SDC component
 */
/**
 * Meant to glue the menu image before and after the content area so it can be used as glass background..
 */
/**
 * Use the content's image as a background below the content area to prevent boring grey areas
 */
/*
 * Use this for sections where the main content area must start below the header (not overlayed by the glass header)
 * to look fine u need to define a backkground image either for the body element or the layout container
 */
/**
 @see fla-header.scss for font size, line height, positioning variables!!
 */
#block-fla-mainsectiontitle {
  display: contents;
  position: static;
}

#block-fla-mainsectiontitle h1, #block-fla-mainsectiontitle h2, #block-fla-mainsectiontitle h3 {
  font-family: var(--fla-heading-font-family);
  position: absolute;
  left: 0;
  line-height: 1;
  font-weight: bold;
  top: calc( var(--fla-header-headline-padding-top));
  font-size: var(--fla-header-top-headline-font-size);
  margin: 0 !important;
}

#block-fla-mainsectiontitle h1, #block-fla-mainsectiontitle h1 a, #block-fla-mainsectiontitle h2, #block-fla-mainsectiontitle h2 a, #block-fla-mainsectiontitle h3, #block-fla-mainsectiontitle h3 a {
  color: rgba(255, 255, 255, 0.7);
}

@container html-container (min-width: 425px) {
  #block-fla-mainsectiontitle h1, #block-fla-mainsectiontitle h2, #block-fla-mainsectiontitle h3 {
    text-transform: uppercase;
    font-weight: normal;
  }
}

html {
  --fla-heading-font-family: "CenturyGothicStd", "Inter", sans-serif;
  --fla-subheading-font-family: "Poppins";
  --fla-body-font-family: "Inter", "Helvetica Neue", "Arial", "Helvetica", "sans-serif";
  --fla-text-color-light: rgba(255,255,255,0.618);
}

body {
  --fla-dock-height: 0px;
}

body[data-fla-state*="do:1"] {
  --fla-dock-height: var(--fla-footer-height);
}

/**
 * TO BE INCLUDED WITHIN THE CONTENT CONTAINING ELEMENT
 * (WHERE THE SCOLLING DOES HAPPEN)
 */
/**
 * Must be applied not to the block element but the h1/h2/h3 directly
 * block must be display: contents
 */
/**
  NOTE: THIS IS SPECIFIC TO FONTS
  ARIAL: 0.318/2
 */
/**
 * What this does, is:
 * Given a Text like "First, Last and Always" we have the descender "y"
 * this mixin calculates the space that is taken by descenders and subtracts it
 * from the height of the element via negative margin bottom. By the way:
 * the descender space is also taken if we have text that does NOT have a descender!
 * When to use:
 * - The text block needs to sit bottom align with a specific design line or element
 *
 * When NOT to use:
 * - If another text block is placed below this one. in that case we need to use another mixin "centuryGothicDescendantEqualizer"
 *
 * Get the UnitsPerEM via "ttx -t head CenturyGothicStd.ttf" (fonttools)
 * Get the sTypoDescender via `ttx -t OS/2 CenturyGothicStd.ttf` (fonttools)
 * Calculate the Descener Ratio: Descender Ratio = |sTypoDescender| / unitsPerEm
 * Translate into CSS: margin-bottom: calc(-1*<DescenderRatio>)
 *
 * @see https://stackoverflow.com/questions/27631736/meaning-of-top-ascent-baseline-descent-bottom-and-leading-in-androids-font
 */
/**
 What we do here is:
 Based on this graphic: https://i.sstatic.net/LwZJF.png we cut off the
 distance from the bottom to the Descent
 */
/**
 * @deprecated Moved to a SDC component
 */
/**
 * Meant to glue the menu image before and after the content area so it can be used as glass background..
 */
/**
 * Use the content's image as a background below the content area to prevent boring grey areas
 */
/*
 * Use this for sections where the main content area must start below the header (not overlayed by the glass header)
 * to look fine u need to define a backkground image either for the body element or the layout container
 */
.node--type-page.node--view-mode-full .field--name-field-subheading,
h2.generic-page.subheading,
.block.block-fla-subheading-block {
  display: none;
}

body.root-path-taxonomy.path-depth-1 .block.block-fla-subheading-block,
body.path-frontpage .block.block-fla-subheading-block {
  display: contents;
}

.node--type-page.node--view-mode-full .field--name-field-subheading h2,
h2.generic-page.subheading h2,
.block.block-fla-subheading-block h2 {
  line-height: 1;
  position: absolute;
  top: var(--fla-header-sub-headline-pos-y);
  font-size: var(--fla-header-sub-headline-font-size);
  margin: 0 !important;
  color: #c2c2c2;
  font-weight: 300;
  font-family: var(--fla-subheading-font-family), sans-serif;
}

html {
  --fla-heading-font-family: "CenturyGothicStd", "Inter", sans-serif;
  --fla-subheading-font-family: "Poppins";
  --fla-body-font-family: "Inter", "Helvetica Neue", "Arial", "Helvetica", "sans-serif";
  --fla-text-color-light: rgba(255,255,255,0.618);
}

body {
  --fla-dock-height: 0px;
}

body[data-fla-state*="do:1"] {
  --fla-dock-height: var(--fla-footer-height);
}

/**
 * TO BE INCLUDED WITHIN THE CONTENT CONTAINING ELEMENT
 * (WHERE THE SCOLLING DOES HAPPEN)
 */
/**
 * Must be applied not to the block element but the h1/h2/h3 directly
 * block must be display: contents
 */
/**
  NOTE: THIS IS SPECIFIC TO FONTS
  ARIAL: 0.318/2
 */
/**
 * What this does, is:
 * Given a Text like "First, Last and Always" we have the descender "y"
 * this mixin calculates the space that is taken by descenders and subtracts it
 * from the height of the element via negative margin bottom. By the way:
 * the descender space is also taken if we have text that does NOT have a descender!
 * When to use:
 * - The text block needs to sit bottom align with a specific design line or element
 *
 * When NOT to use:
 * - If another text block is placed below this one. in that case we need to use another mixin "centuryGothicDescendantEqualizer"
 *
 * Get the UnitsPerEM via "ttx -t head CenturyGothicStd.ttf" (fonttools)
 * Get the sTypoDescender via `ttx -t OS/2 CenturyGothicStd.ttf` (fonttools)
 * Calculate the Descener Ratio: Descender Ratio = |sTypoDescender| / unitsPerEm
 * Translate into CSS: margin-bottom: calc(-1*<DescenderRatio>)
 *
 * @see https://stackoverflow.com/questions/27631736/meaning-of-top-ascent-baseline-descent-bottom-and-leading-in-androids-font
 */
/**
 What we do here is:
 Based on this graphic: https://i.sstatic.net/LwZJF.png we cut off the
 distance from the bottom to the Descent
 */
/**
 * @deprecated Moved to a SDC component
 */
/**
 * Meant to glue the menu image before and after the content area so it can be used as glass background..
 */
/**
 * Use the content's image as a background below the content area to prevent boring grey areas
 */
/*
 * Use this for sections where the main content area must start below the header (not overlayed by the glass header)
 * to look fine u need to define a backkground image either for the body element or the layout container
 */
.block.block-fla-theme-fla-mini-breadcrumb {
  display: contents;
  /**
 * Supposed to be included at most outer block html, e.g. #block-fla-breadcrumb
 */
}

@container layout-container (min-width: 769px) {
  .block.block-fla-theme-fla-mini-breadcrumb {
    display: none !important;
  }
}

.block.block-fla-theme-fla-mini-breadcrumb .breadcrumb > ol > li:not(:first-of-type):before,
.block.block-fla-theme-fla-mini-breadcrumb .breadcrumb > ul > li:not(:first-of-type):before {
  content: "·" !important;
  font-size: 1.125rem;
  vertical-align: baseline;
}

.block.block-fla-theme-fla-mini-breadcrumb nav {
  padding-bottom: 0;
  line-height: 1;
  position: absolute;
  top: var(--fla-header-sub-headline-pos-y);
  margin: 0 !important;
  color: #c2c2c2;
  font-weight: 300;
}

.block.block-fla-theme-fla-mini-breadcrumb nav, .block.block-fla-theme-fla-mini-breadcrumb nav li, .block.block-fla-theme-fla-mini-breadcrumb nav h1, .block.block-fla-theme-fla-mini-breadcrumb nav h2, .block.block-fla-theme-fla-mini-breadcrumb nav h3, .block.block-fla-theme-fla-mini-breadcrumb nav h4, .block.block-fla-theme-fla-mini-breadcrumb nav h5, .block.block-fla-theme-fla-mini-breadcrumb nav h6 {
  font-size: var(--fla-header-sub-headline-font-size) !important;
}

.block.block-fla-theme-fla-mini-breadcrumb .breadcrumb > ol > li > h3,
.block.block-fla-theme-fla-mini-breadcrumb .breadcrumb > ol > li > h2,
.block.block-fla-theme-fla-mini-breadcrumb .breadcrumb > ol > li > h1,
.block.block-fla-theme-fla-mini-breadcrumb .breadcrumb > ol > li {
  text-align: left;
  padding: 0;
  margin: 0 0 calc(-1 * 0.264 * 1.5 * 1rem - 0.09 * 1rem);
  white-space: nowrap;
}

.block.block-fla-theme-fla-mini-breadcrumb .breadcrumb > ol > li > h3, .block.block-fla-theme-fla-mini-breadcrumb .breadcrumb > ol > li > h3 > a,
.block.block-fla-theme-fla-mini-breadcrumb .breadcrumb > ol > li > h2,
.block.block-fla-theme-fla-mini-breadcrumb .breadcrumb > ol > li > h2 > a,
.block.block-fla-theme-fla-mini-breadcrumb .breadcrumb > ol > li > h1,
.block.block-fla-theme-fla-mini-breadcrumb .breadcrumb > ol > li > h1 > a,
.block.block-fla-theme-fla-mini-breadcrumb .breadcrumb > ol > li,
.block.block-fla-theme-fla-mini-breadcrumb .breadcrumb > ol > li > a {
  color: #696969;
  font-weight: 300;
}

html.glass-header .block.block-fla-theme-fla-mini-breadcrumb .breadcrumb > ol > li > h3, html.glass-header .block.block-fla-theme-fla-mini-breadcrumb .breadcrumb > ol > li > h3 > a, html.glass-header .block.block-fla-theme-fla-mini-breadcrumb .breadcrumb > ol > li > h2, html.glass-header .block.block-fla-theme-fla-mini-breadcrumb .breadcrumb > ol > li > h2 > a, html.glass-header .block.block-fla-theme-fla-mini-breadcrumb .breadcrumb > ol > li > h1, html.glass-header .block.block-fla-theme-fla-mini-breadcrumb .breadcrumb > ol > li > h1 > a, html.glass-header .block.block-fla-theme-fla-mini-breadcrumb .breadcrumb > ol > li, html.glass-header .block.block-fla-theme-fla-mini-breadcrumb .breadcrumb > ol > li > a {
  color: #c2c2c2 !important;
}

.block.block-fla-theme-fla-mini-breadcrumb h1, .block.block-fla-theme-fla-mini-breadcrumb h2, .block.block-fla-theme-fla-mini-breadcrumb h3 {
  line-height: 1;
  position: absolute;
  top: var(--fla-header-sub-headline-pos-y);
  margin: 0 !important;
  color: #c2c2c2;
  font-weight: 300;
}

.block.block-fla-theme-fla-mini-breadcrumb h1, .block.block-fla-theme-fla-mini-breadcrumb h1 li, .block.block-fla-theme-fla-mini-breadcrumb h1 h1, .block.block-fla-theme-fla-mini-breadcrumb h1 h2, .block.block-fla-theme-fla-mini-breadcrumb h1 h3, .block.block-fla-theme-fla-mini-breadcrumb h1 h4, .block.block-fla-theme-fla-mini-breadcrumb h1 h5, .block.block-fla-theme-fla-mini-breadcrumb h1 h6, .block.block-fla-theme-fla-mini-breadcrumb h2, .block.block-fla-theme-fla-mini-breadcrumb h2 li, .block.block-fla-theme-fla-mini-breadcrumb h2 h1, .block.block-fla-theme-fla-mini-breadcrumb h2 h2, .block.block-fla-theme-fla-mini-breadcrumb h2 h3, .block.block-fla-theme-fla-mini-breadcrumb h2 h4, .block.block-fla-theme-fla-mini-breadcrumb h2 h5, .block.block-fla-theme-fla-mini-breadcrumb h2 h6, .block.block-fla-theme-fla-mini-breadcrumb h3, .block.block-fla-theme-fla-mini-breadcrumb h3 li, .block.block-fla-theme-fla-mini-breadcrumb h3 h1, .block.block-fla-theme-fla-mini-breadcrumb h3 h2, .block.block-fla-theme-fla-mini-breadcrumb h3 h3, .block.block-fla-theme-fla-mini-breadcrumb h3 h4, .block.block-fla-theme-fla-mini-breadcrumb h3 h5, .block.block-fla-theme-fla-mini-breadcrumb h3 h6 {
  font-size: var(--fla-header-sub-headline-font-size) !important;
}

html {
  --fla-heading-font-family: "CenturyGothicStd", "Inter", sans-serif;
  --fla-subheading-font-family: "Poppins";
  --fla-body-font-family: "Inter", "Helvetica Neue", "Arial", "Helvetica", "sans-serif";
  --fla-text-color-light: rgba(255,255,255,0.618);
}

body {
  --fla-dock-height: 0px;
}

body[data-fla-state*="do:1"] {
  --fla-dock-height: var(--fla-footer-height);
}

/**
 * TO BE INCLUDED WITHIN THE CONTENT CONTAINING ELEMENT
 * (WHERE THE SCOLLING DOES HAPPEN)
 */
/**
 * Must be applied not to the block element but the h1/h2/h3 directly
 * block must be display: contents
 */
/**
  NOTE: THIS IS SPECIFIC TO FONTS
  ARIAL: 0.318/2
 */
/**
 * What this does, is:
 * Given a Text like "First, Last and Always" we have the descender "y"
 * this mixin calculates the space that is taken by descenders and subtracts it
 * from the height of the element via negative margin bottom. By the way:
 * the descender space is also taken if we have text that does NOT have a descender!
 * When to use:
 * - The text block needs to sit bottom align with a specific design line or element
 *
 * When NOT to use:
 * - If another text block is placed below this one. in that case we need to use another mixin "centuryGothicDescendantEqualizer"
 *
 * Get the UnitsPerEM via "ttx -t head CenturyGothicStd.ttf" (fonttools)
 * Get the sTypoDescender via `ttx -t OS/2 CenturyGothicStd.ttf` (fonttools)
 * Calculate the Descener Ratio: Descender Ratio = |sTypoDescender| / unitsPerEm
 * Translate into CSS: margin-bottom: calc(-1*<DescenderRatio>)
 *
 * @see https://stackoverflow.com/questions/27631736/meaning-of-top-ascent-baseline-descent-bottom-and-leading-in-androids-font
 */
/**
 What we do here is:
 Based on this graphic: https://i.sstatic.net/LwZJF.png we cut off the
 distance from the bottom to the Descent
 */
/**
 * @deprecated Moved to a SDC component
 */
/**
 * Meant to glue the menu image before and after the content area so it can be used as glass background..
 */
/**
 * Use the content's image as a background below the content area to prevent boring grey areas
 */
/*
 * Use this for sections where the main content area must start below the header (not overlayed by the glass header)
 * to look fine u need to define a backkground image either for the body element or the layout container
 */
.block#block-fla-breadcrumb {
  /** hide for phones/tablets, as minibreadcrumb is used for these */
  /** Hide on level1 paths (/portfolio, /fla-expertise etc.) as we have a subheading on those */
  /**
 * Supposed to be included at most outer block html, e.g. #block-fla-breadcrumb
 */
  display: flex;
  flex-direction: row;
  height: 18px;
  /** Highlight active item if path-depth >= 2 */
}

@container layout-container (max-width: 768px) {
  .block#block-fla-breadcrumb {
    display: none !important;
  }
}

body.path-depth-1 .block#block-fla-breadcrumb {
  display: none !important;
}

.block#block-fla-breadcrumb .breadcrumb > ol > li:not(:first-of-type):before,
.block#block-fla-breadcrumb .breadcrumb > ul > li:not(:first-of-type):before {
  content: "·" !important;
  font-size: 1.125rem;
  vertical-align: baseline;
}

.block#block-fla-breadcrumb nav {
  padding-bottom: 0;
  line-height: 1;
  position: absolute;
  top: var(--fla-header-sub-headline-pos-y);
  margin: 0 !important;
  color: #c2c2c2;
  font-weight: 300;
}

.block#block-fla-breadcrumb nav, .block#block-fla-breadcrumb nav li, .block#block-fla-breadcrumb nav h1, .block#block-fla-breadcrumb nav h2, .block#block-fla-breadcrumb nav h3, .block#block-fla-breadcrumb nav h4, .block#block-fla-breadcrumb nav h5, .block#block-fla-breadcrumb nav h6 {
  font-size: var(--fla-header-sub-headline-font-size) !important;
}

.block#block-fla-breadcrumb .breadcrumb > ol > li > h3,
.block#block-fla-breadcrumb .breadcrumb > ol > li > h2,
.block#block-fla-breadcrumb .breadcrumb > ol > li > h1,
.block#block-fla-breadcrumb .breadcrumb > ol > li {
  text-align: left;
  padding: 0;
  margin: 0 0 calc(-1 * 0.264 * 1.5 * 1rem - 0.09 * 1rem);
  white-space: nowrap;
}

.block#block-fla-breadcrumb .breadcrumb > ol > li > h3, .block#block-fla-breadcrumb .breadcrumb > ol > li > h3 > a,
.block#block-fla-breadcrumb .breadcrumb > ol > li > h2,
.block#block-fla-breadcrumb .breadcrumb > ol > li > h2 > a,
.block#block-fla-breadcrumb .breadcrumb > ol > li > h1,
.block#block-fla-breadcrumb .breadcrumb > ol > li > h1 > a,
.block#block-fla-breadcrumb .breadcrumb > ol > li,
.block#block-fla-breadcrumb .breadcrumb > ol > li > a {
  color: #696969;
  font-weight: 300;
}

html.glass-header .block#block-fla-breadcrumb .breadcrumb > ol > li > h3, html.glass-header .block#block-fla-breadcrumb .breadcrumb > ol > li > h3 > a, html.glass-header .block#block-fla-breadcrumb .breadcrumb > ol > li > h2, html.glass-header .block#block-fla-breadcrumb .breadcrumb > ol > li > h2 > a, html.glass-header .block#block-fla-breadcrumb .breadcrumb > ol > li > h1, html.glass-header .block#block-fla-breadcrumb .breadcrumb > ol > li > h1 > a, html.glass-header .block#block-fla-breadcrumb .breadcrumb > ol > li, html.glass-header .block#block-fla-breadcrumb .breadcrumb > ol > li > a {
  color: #c2c2c2 !important;
}

body.path-depth-2 .block#block-fla-breadcrumb li:last-of-type, body.path-depth-3 .block#block-fla-breadcrumb li:last-of-type, body.path-depth-4 .block#block-fla-breadcrumb li:last-of-type, body.path-depth-5 .block#block-fla-breadcrumb li:last-of-type, body.path-depth-6 .block#block-fla-breadcrumb li:last-of-type {
  filter: brightness(1.5);
}

body.path-depth-2 .block#block-fla-breadcrumb li:last-of-type:before, body.path-depth-3 .block#block-fla-breadcrumb li:last-of-type:before, body.path-depth-4 .block#block-fla-breadcrumb li:last-of-type:before, body.path-depth-5 .block#block-fla-breadcrumb li:last-of-type:before, body.path-depth-6 .block#block-fla-breadcrumb li:last-of-type:before {
  filter: brightness(0.667);
}

html {
  --fla-heading-font-family: "CenturyGothicStd", "Inter", sans-serif;
  --fla-subheading-font-family: "Poppins";
  --fla-body-font-family: "Inter", "Helvetica Neue", "Arial", "Helvetica", "sans-serif";
  --fla-text-color-light: rgba(255,255,255,0.618);
}

body {
  --fla-dock-height: 0px;
}

body[data-fla-state*="do:1"] {
  --fla-dock-height: var(--fla-footer-height);
}

/**
 * TO BE INCLUDED WITHIN THE CONTENT CONTAINING ELEMENT
 * (WHERE THE SCOLLING DOES HAPPEN)
 */
/**
 * Must be applied not to the block element but the h1/h2/h3 directly
 * block must be display: contents
 */
/**
  NOTE: THIS IS SPECIFIC TO FONTS
  ARIAL: 0.318/2
 */
/**
 * What this does, is:
 * Given a Text like "First, Last and Always" we have the descender "y"
 * this mixin calculates the space that is taken by descenders and subtracts it
 * from the height of the element via negative margin bottom. By the way:
 * the descender space is also taken if we have text that does NOT have a descender!
 * When to use:
 * - The text block needs to sit bottom align with a specific design line or element
 *
 * When NOT to use:
 * - If another text block is placed below this one. in that case we need to use another mixin "centuryGothicDescendantEqualizer"
 *
 * Get the UnitsPerEM via "ttx -t head CenturyGothicStd.ttf" (fonttools)
 * Get the sTypoDescender via `ttx -t OS/2 CenturyGothicStd.ttf` (fonttools)
 * Calculate the Descener Ratio: Descender Ratio = |sTypoDescender| / unitsPerEm
 * Translate into CSS: margin-bottom: calc(-1*<DescenderRatio>)
 *
 * @see https://stackoverflow.com/questions/27631736/meaning-of-top-ascent-baseline-descent-bottom-and-leading-in-androids-font
 */
/**
 What we do here is:
 Based on this graphic: https://i.sstatic.net/LwZJF.png we cut off the
 distance from the bottom to the Descent
 */
/**
 * @deprecated Moved to a SDC component
 */
/**
 * Meant to glue the menu image before and after the content area so it can be used as glass background..
 */
/**
 * Use the content's image as a background below the content area to prevent boring grey areas
 */
/*
 * Use this for sections where the main content area must start below the header (not overlayed by the glass header)
 * to look fine u need to define a backkground image either for the body element or the layout container
 */
.block-fla-theme-fla-menu-icon {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  font-size: 2.5rem;
  text-align: right;
  z-index: 100;
}

.block-fla-theme-fla-menu-icon i[class*="dots"] {
  margin-right: -0.55ch;
}

.block-fla-theme-fla-menu-icon i {
  display: none !important;
}

.block-fla-theme-fla-menu-icon a {
  aspect-ratio: 10/30;
  width: auto;
  height: 100%;
  background: transparent url("/themes/custom/fla/icons/tree-dots-vertical-outline.svg") center center no-repeat;
  background-size: auto calc( 100% - var(--fla-header-headline-padding-top));
  text-align: right;
  margin: calc( var(--fla-header-headline-padding-top)*2) 0;
  box-sizing: content-box;
  display: inline-block;
}

/**
 * Wanted layout/design:
 * - glassy header AND/OR footer
 * - but header/footer do not overlay the content area
 * - instead content area is between them (like in the original design from 2020
 * - This design is used e.g. on the 3 "samples" sections
 *
 * Needed if the following conditions meet:
 * - glass header AND/or footer enabled
 * -
 */
html.glass-header[data-fla-state*="pbg:2"] .layout-container {
  padding-top: var(--fla-header-height);
  position: unset;
}

html.glass-header[data-fla-state*="pbg:2"] .layout-container main {
  position: relative;
}

html {
  --fla-heading-font-family: "CenturyGothicStd", "Inter", sans-serif;
  --fla-subheading-font-family: "Poppins";
  --fla-body-font-family: "Inter", "Helvetica Neue", "Arial", "Helvetica", "sans-serif";
  --fla-text-color-light: rgba(255,255,255,0.618);
}

body {
  --fla-dock-height: 0px;
}

body[data-fla-state*="do:1"] {
  --fla-dock-height: var(--fla-footer-height);
}

/**
 * TO BE INCLUDED WITHIN THE CONTENT CONTAINING ELEMENT
 * (WHERE THE SCOLLING DOES HAPPEN)
 */
/**
 * Must be applied not to the block element but the h1/h2/h3 directly
 * block must be display: contents
 */
/**
  NOTE: THIS IS SPECIFIC TO FONTS
  ARIAL: 0.318/2
 */
/**
 * What this does, is:
 * Given a Text like "First, Last and Always" we have the descender "y"
 * this mixin calculates the space that is taken by descenders and subtracts it
 * from the height of the element via negative margin bottom. By the way:
 * the descender space is also taken if we have text that does NOT have a descender!
 * When to use:
 * - The text block needs to sit bottom align with a specific design line or element
 *
 * When NOT to use:
 * - If another text block is placed below this one. in that case we need to use another mixin "centuryGothicDescendantEqualizer"
 *
 * Get the UnitsPerEM via "ttx -t head CenturyGothicStd.ttf" (fonttools)
 * Get the sTypoDescender via `ttx -t OS/2 CenturyGothicStd.ttf` (fonttools)
 * Calculate the Descener Ratio: Descender Ratio = |sTypoDescender| / unitsPerEm
 * Translate into CSS: margin-bottom: calc(-1*<DescenderRatio>)
 *
 * @see https://stackoverflow.com/questions/27631736/meaning-of-top-ascent-baseline-descent-bottom-and-leading-in-androids-font
 */
/**
 What we do here is:
 Based on this graphic: https://i.sstatic.net/LwZJF.png we cut off the
 distance from the bottom to the Descent
 */
/**
 * @deprecated Moved to a SDC component
 */
/**
 * Meant to glue the menu image before and after the content area so it can be used as glass background..
 */
/**
 * Use the content's image as a background below the content area to prevent boring grey areas
 */
/*
 * Use this for sections where the main content area must start below the header (not overlayed by the glass header)
 * to look fine u need to define a backkground image either for the body element or the layout container
 */
/**
 * =========================================
 * Frontpage address block
 * =========================================
 * @todo Should go into a component
 */
.block-fla-theme-frontpage-address .address {
  padding: 10rem 2rem 10rem 2rem;
  padding-bottom: calc(var(--fla-footer-height) + 2rem);
  width: 100%;
  background: transparent url(/themes/custom/fla/img/hands-black-white.jpg) no-repeat center center;
  background-size: cover;
  z-index: 10;
  position: relative;
  text-align: center;
  font-size: 1.5rem;
}

.block-fla-theme-frontpage-address .address strong {
  font-weight: 400;
}

.block-fla-theme-frontpage-address .address:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  pointer-events: none;
}

.block-fla-theme-frontpage-address .address:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  pointer-events: none;
}

.block-fla-theme-frontpage-address .address:before, .block-fla-theme-frontpage-address .address:after {
  background-repeat: no-repeat;
  z-index: 1;
  pointer-events: none;
}

.block-fla-theme-frontpage-address .address:before {
  opacity: 0.8;
  background-size: 100% 120%;
  background-image: url(/themes/custom/fla/img/backgrounds/vignette-full-scree_1920x1080.jpg), linear-gradient(45deg, rgba(0, 0, 0, 0.6), transparent), linear-gradient(60deg, rgba(0, 0, 0, 0.1), transparent);
}

.block-fla-theme-frontpage-address .address:after {
  background-size: 100% 100%;
  background-image: linear-gradient(to top, black 0%, transparent 17%, transparent 100%);
  transform: rotate(180deg);
}

.block-fla-theme-frontpage-address .address .content {
  z-index: 100;
  position: relative;
}

/*# sourceMappingURL=fla-main.css.map */