/**
 */
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
 */
/**
 * LAYOUTS
 *
 * 1A-2B: Project thumbnails in the bottom area
 *  1A) smartphone layout: project thumbnailstrip height + spacingbetween
 *  1B) smartphone layout (DOCK ON): PLUS spacingA
 *  2A) smartphone layout extended: project thumbnailstrip height
 *  2B) smartphone layout extended (DOCK ON): PLUS spacingA
 *
 * 3A-4B: project thumbnails go vertical to the right. media thumbnails are now added to the screen and take the bottom area
   3A) media thumbnails start from the left bottom and fade out to the right with a clipping mask. around 100px before the vertical project thumbnail list crosses it is already faded out
   3B) same with DOCK ON - DOCK in this layout does NOT layers over the media thumbnails but pushes them up by its own size

   4A) As soon as we have enugh screen width and height the media thumbnails are centered horizontally (relative to the whole viewport width). Also the clipping mask is applied to the left part also..
   4B) Same with DOCK ON => See 3B

 *
 */
body[class*="path-portfolio-projects-"],
body[class*="path-portfolio-search-"],
body[class*="sh-visuals-projects-"] {
  --fu-gallery-spacing-between: 5px;
  --fu-gallery-spacing-around: 5px;
  --project-thumbnailstrip-width: 220px;
  --project-thumbnailstrip-img-size: 60px;
  --project-media-thumbnails-size: 100px;
  --project-media-thumbnails-start-left: 170px;
  --project-media-thumbnails-gap: 50px;
  --project-media-thumbnails-fade-distance: calc(3*var(--project-media-thumbnails-size));
  /**
 * 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
 */
  /**
 * 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
 */
  /**
 * 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 (min-width: 431px) and (min-height: 931px) {
  body[class*="path-portfolio-projects-"],
body[class*="path-portfolio-search-"],
body[class*="sh-visuals-projects-"] {
    --fu-gallery-spacing-between: 10px;
    --fu-gallery-spacing-around: 10px;
  }
}

body[class*="path-portfolio-projects-"] #block-pagetitle,
body[class*="path-portfolio-search-"] #block-pagetitle,
body[class*="sh-visuals-projects-"] #block-pagetitle {
  display: none;
}

body[class*="path-portfolio-projects-"] #block-fla-content,
body[class*="path-portfolio-search-"] #block-fla-content,
body[class*="sh-visuals-projects-"] #block-fla-content {
  background-color: #323232;
  height: calc(100% - 0px) !important;
  padding: 0 !important;
}

body[class*="path-portfolio-projects-"] html,
body[class*="path-portfolio-search-"] html,
body[class*="sh-visuals-projects-"] 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[class*="path-portfolio-projects-"] body,
body[class*="path-portfolio-search-"] body,
body[class*="sh-visuals-projects-"] body {
  --fla-dock-height: 0px;
}

body[class*="path-portfolio-projects-"] body[data-fla-state*="do:1"],
body[class*="path-portfolio-search-"] body[data-fla-state*="do:1"],
body[class*="sh-visuals-projects-"] body[data-fla-state*="do:1"] {
  --fla-dock-height: var(--fla-footer-height);
}

body[class*="path-portfolio-projects-"] .thumbnail-strip,
body[class*="path-portfolio-search-"] .thumbnail-strip,
body[class*="sh-visuals-projects-"] .thumbnail-strip {
  width: 100%;
  height: 20%;
  max-height: calc( var(--fla-footer-height) - 1px);
  overflow: auto;
  overflow-y: hidden;
  position: absolute;
  left: var(--fu-gallery-spacing-around);
  right: var(--fu-gallery-spacing-around);
  bottom: calc(0px + var(--fla-dock-height));
  padding: var(--fu-gallery-spacing-around) 0;
}

body[class*="path-portfolio-projects-"] .thumbnail-strip article.media,
body[class*="path-portfolio-search-"] .thumbnail-strip article.media,
body[class*="sh-visuals-projects-"] .thumbnail-strip article.media {
  height: 100%;
  aspect-ratio: 1;
}

body[class*="path-portfolio-projects-"] .thumbnail-strip article.media img,
body[class*="path-portfolio-search-"] .thumbnail-strip article.media img,
body[class*="sh-visuals-projects-"] .thumbnail-strip article.media img {
  border-radius: 5px;
}

@media (min-width: 1024px) {
  body[class*="path-portfolio-projects-"] .thumbnail-strip article.media,
body[class*="path-portfolio-search-"] .thumbnail-strip article.media,
body[class*="sh-visuals-projects-"] .thumbnail-strip article.media {
    display: contents;
  }
}

body[class*="path-portfolio-projects-"] .thumbnail-strip ul, body[class*="path-portfolio-projects-"] .thumbnail-strip li,
body[class*="path-portfolio-search-"] .thumbnail-strip ul,
body[class*="path-portfolio-search-"] .thumbnail-strip li,
body[class*="sh-visuals-projects-"] .thumbnail-strip ul,
body[class*="sh-visuals-projects-"] .thumbnail-strip li {
  height: 100%;
  vertical-align: top;
  list-style-type: none !important;
  list-style-image: none !important;
  margin: 0 !important;
  padding: 0 !important;
  white-space: nowrap;
  font-size: 0;
  line-height: 0;
}

body[class*="path-portfolio-projects-"] .thumbnail-strip ul,
body[class*="path-portfolio-search-"] .thumbnail-strip ul,
body[class*="sh-visuals-projects-"] .thumbnail-strip ul {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: var(--fu-gallery-spacing-between);
}

body[class*="path-portfolio-projects-"] .thumbnail-strip li,
body[class*="path-portfolio-search-"] .thumbnail-strip li,
body[class*="sh-visuals-projects-"] .thumbnail-strip li {
  display: inline-block;
  position: relative;
}

body[class*="path-portfolio-projects-"] .thumbnail-strip li a,
body[class*="path-portfolio-search-"] .thumbnail-strip li a,
body[class*="sh-visuals-projects-"] .thumbnail-strip li a {
  cursor: ew-resize;
}

body[class*="path-portfolio-projects-"] .thumbnail-strip [class*="orientation"],
body[class*="path-portfolio-search-"] .thumbnail-strip [class*="orientation"],
body[class*="sh-visuals-projects-"] .thumbnail-strip [class*="orientation"] {
  vertical-align: top;
}

body[class*="path-portfolio-projects-"] .thumbnail-strip [class*="orientation"], body[class*="path-portfolio-projects-"] .thumbnail-strip [class*="orientation"] img,
body[class*="path-portfolio-search-"] .thumbnail-strip [class*="orientation"],
body[class*="path-portfolio-search-"] .thumbnail-strip [class*="orientation"] img,
body[class*="sh-visuals-projects-"] .thumbnail-strip [class*="orientation"],
body[class*="sh-visuals-projects-"] .thumbnail-strip [class*="orientation"] img {
  height: 100%;
  width: auto;
}

body[class*="path-portfolio-projects-"] .thumbnail-strip .field--name-field-fla-id,
body[class*="path-portfolio-search-"] .thumbnail-strip .field--name-field-fla-id,
body[class*="sh-visuals-projects-"] .thumbnail-strip .field--name-field-fla-id {
  font-family: "Helvetica Neue", "Arial", Sans-Serif;
  font-weight: bold;
  color: rgba(255, 255, 255, 0.75);
  text-shadow: 0px 0px 10px black;
  font-size: 1.25rem;
  position: absolute;
  z-index: 10;
  padding: 0.3ch 0.3ch 0.3ch 0.5ch;
  line-height: 1;
  padding: 0.3ch 0.3ch 0.5ch 0.7ch;
  bottom: 0;
  left: 0;
  vertical-align: sub;
}

body[class*="path-portfolio-projects-"] .thumbnail-strip .field--name-field-fla-id .field-content,
body[class*="path-portfolio-search-"] .thumbnail-strip .field--name-field-fla-id .field-content,
body[class*="sh-visuals-projects-"] .thumbnail-strip .field--name-field-fla-id .field-content {
  vertical-align: sub;
}

body[class*="path-portfolio-projects-"] .thumbnail-strip li.active .field--name-field-fla-id,
body[class*="path-portfolio-search-"] .thumbnail-strip li.active .field--name-field-fla-id,
body[class*="sh-visuals-projects-"] .thumbnail-strip li.active .field--name-field-fla-id {
  animation: glow 3.5s infinite alternate;
  animation-iteration-count: infinite;
}

@media (min-width: 1024px) {
  body[class*="path-portfolio-projects-"] .thumbnail-strip,
body[class*="path-portfolio-search-"] .thumbnail-strip,
body[class*="sh-visuals-projects-"] .thumbnail-strip {
    border-top-width: 0;
    position: absolute;
    top: calc(var(--fla-header-height) + 1em);
    bottom: calc(1em + var(--fla-dock-height));
    right: 0;
    left: auto;
    padding: 10px;
    height: auto !important;
    width: 15em !important;
    min-width: 30ch;
    max-height: unset !important;
    overflow-x: hidden;
    overflow-y: auto;
    transition-property: right, background-color;
    transition-duration: 0.5s;
    transition-timing-function: ease-in-out;
    /*
    --tmp8978979: 100px;
    mask-image: linear-gradient(
        to bottom,
        black 0%, black calc( var(--tmp8978979) / 2),
        black var(--tmp8978979),
        black calc(100% - 2 * var(--tmp8978979)),
        transparent calc(100% - var(--tmp8978979)),
        transparent 100%
    );
    //*/
  }
  html[data-fla-state*="le:1"] body[class*="path-portfolio-projects-"] .thumbnail-strip, html[data-fla-state*="le:1"] body[class*="path-portfolio-search-"] .thumbnail-strip, html[data-fla-state*="le:1"] body[class*="sh-visuals-projects-"] .thumbnail-strip {
    position: fixed;
  }
  body[class*="path-portfolio-projects-"] .thumbnail-strip ul,
body[class*="path-portfolio-search-"] .thumbnail-strip ul,
body[class*="sh-visuals-projects-"] .thumbnail-strip ul {
    height: auto;
    flex-direction: column !important;
  }
  body[class*="path-portfolio-projects-"] .thumbnail-strip ul li.item,
body[class*="path-portfolio-search-"] .thumbnail-strip ul li.item,
body[class*="sh-visuals-projects-"] .thumbnail-strip ul li.item {
    position: relative;
    background-color: rgba(0, 0, 0, 0.3);
    border-radius: 5px;
    display: block;
    height: auto;
    width: 100%;
    border-right-width: 0;
    padding: 10px !important;
    padding-left: 80px !important;
    height: calc(80px + 2px);
    border: 0.5px solid rgba(255, 255, 255, 0.15);
  }
  body[class*="path-portfolio-projects-"] .thumbnail-strip ul li.item:first-of-type,
body[class*="path-portfolio-search-"] .thumbnail-strip ul li.item:first-of-type,
body[class*="sh-visuals-projects-"] .thumbnail-strip ul li.item:first-of-type {
    padding-top: 0;
  }
  body[class*="path-portfolio-projects-"] .thumbnail-strip ul li.item:last-of-type,
body[class*="path-portfolio-search-"] .thumbnail-strip ul li.item:last-of-type,
body[class*="sh-visuals-projects-"] .thumbnail-strip ul li.item:last-of-type {
    padding-bottom: 0;
  }
  body[class*="path-portfolio-projects-"] .thumbnail-strip ul li.item.active,
body[class*="path-portfolio-search-"] .thumbnail-strip ul li.item.active,
body[class*="sh-visuals-projects-"] .thumbnail-strip ul li.item.active {
    border-color: rgba(255, 255, 255, 0.5);
    border-width: 1px;
  }
  body[class*="path-portfolio-projects-"] .thumbnail-strip ul li.item a,
body[class*="path-portfolio-search-"] .thumbnail-strip ul li.item a,
body[class*="sh-visuals-projects-"] .thumbnail-strip ul li.item a {
    cursor: pointer;
  }
  body[class*="path-portfolio-projects-"] .thumbnail-strip ul li.item .field,
body[class*="path-portfolio-search-"] .thumbnail-strip ul li.item .field,
body[class*="sh-visuals-projects-"] .thumbnail-strip ul li.item .field {
    font-size: 1.25rem !important;
    line-height: normal;
    display: inline-block;
  }
  body[class*="path-portfolio-projects-"] .thumbnail-strip article,
body[class*="path-portfolio-search-"] .thumbnail-strip article,
body[class*="sh-visuals-projects-"] .thumbnail-strip article {
    height: auto;
    aspect-ratio: unset;
  }
  body[class*="path-portfolio-projects-"] .thumbnail-strip .field--name-field-fla-id,
body[class*="path-portfolio-search-"] .thumbnail-strip .field--name-field-fla-id,
body[class*="sh-visuals-projects-"] .thumbnail-strip .field--name-field-fla-id {
    position: unset !important;
    font-size: 1.25rem;
    display: inline-block;
    text-shadow: unset;
    padding: 0;
    font-weight: 400;
    font-family: revert;
    margin-right: 0.25ch;
  }
  body[class*="path-portfolio-projects-"] .thumbnail-strip .field--name-field-fla2-title,
body[class*="path-portfolio-search-"] .thumbnail-strip .field--name-field-fla2-title,
body[class*="sh-visuals-projects-"] .thumbnail-strip .field--name-field-fla2-title {
    max-width: 11ch;
    text-overflow: ellipsis;
    overflow-x: clip;
  }
  body[class*="path-portfolio-projects-"] .thumbnail-strip .field--name-title,
body[class*="path-portfolio-search-"] .thumbnail-strip .field--name-title,
body[class*="sh-visuals-projects-"] .thumbnail-strip .field--name-title {
    padding: 0 0.3ch;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow-x: clip;
    width: calc( 100% - 3ch);
  }
  body[class*="path-portfolio-projects-"] .thumbnail-strip .field--name-title + br,
body[class*="path-portfolio-search-"] .thumbnail-strip .field--name-title + br,
body[class*="sh-visuals-projects-"] .thumbnail-strip .field--name-title + br {
    display: unset !important;
  }
  body[class*="path-portfolio-projects-"] .thumbnail-strip .field--name-field-project-city,
body[class*="path-portfolio-search-"] .thumbnail-strip .field--name-field-project-city,
body[class*="sh-visuals-projects-"] .thumbnail-strip .field--name-field-project-city {
    display: inline-block;
  }
  body[class*="path-portfolio-projects-"] .thumbnail-strip .field--name-field-project-city:after,
body[class*="path-portfolio-search-"] .thumbnail-strip .field--name-field-project-city:after,
body[class*="sh-visuals-projects-"] .thumbnail-strip .field--name-field-project-city:after {
    content: ", ";
  }
  body[class*="path-portfolio-projects-"] .thumbnail-strip .field--name-field-state:before,
body[class*="path-portfolio-search-"] .thumbnail-strip .field--name-field-state:before,
body[class*="sh-visuals-projects-"] .thumbnail-strip .field--name-field-state:before {
    content: "  ";
  }
  body[class*="path-portfolio-projects-"] .thumbnail-strip article .field--name-field-media-image,
body[class*="path-portfolio-search-"] .thumbnail-strip article .field--name-field-media-image,
body[class*="sh-visuals-projects-"] .thumbnail-strip article .field--name-field-media-image {
    position: absolute;
    left: 10px;
    top: 10px;
    bottom: 10px;
  }
  body[class*="path-portfolio-projects-"] .thumbnail-strip article .field--name-field-media-image img,
body[class*="path-portfolio-search-"] .thumbnail-strip article .field--name-field-media-image img,
body[class*="sh-visuals-projects-"] .thumbnail-strip article .field--name-field-media-image img {
    max-height: var(--project-thumbnailstrip-img-size);
    height: 100%;
    aspect-ratio: 1;
    border-radius: 5px;
    border: 0.5px solid rgba(255, 255, 255, 0.3);
  }
  body[class*="path-portfolio-projects-"] .thumbnail-strip li.item.active img,
body[class*="path-portfolio-search-"] .thumbnail-strip li.item.active img,
body[class*="sh-visuals-projects-"] .thumbnail-strip li.item.active img {
    border-color: rgba(255, 255, 255, 0.5);
  }
}

@media (min-width: 1024px) {
  html.project-slides-last-item body[class*="path-portfolio-projects-"] .thumbnail-strip ul li, html.project-slide-orientation-landscape body[class*="path-portfolio-projects-"] .thumbnail-strip ul li, html.project-slides-last-item body[class*="path-portfolio-search-"] .thumbnail-strip ul li, html.project-slide-orientation-landscape body[class*="path-portfolio-search-"] .thumbnail-strip ul li, html.project-slides-last-item body[class*="sh-visuals-projects-"] .thumbnail-strip ul li, html.project-slide-orientation-landscape body[class*="sh-visuals-projects-"] .thumbnail-strip ul li {
    background-color: rgba(0, 0, 0, 0.618);
  }
  html.project-slides-last-item body[class*="path-portfolio-projects-"] .thumbnail-strip:not(:hover), html.project-slide-orientation-landscape body[class*="path-portfolio-projects-"] .thumbnail-strip:not(:hover), html.project-slides-last-item body[class*="path-portfolio-search-"] .thumbnail-strip:not(:hover), html.project-slide-orientation-landscape body[class*="path-portfolio-search-"] .thumbnail-strip:not(:hover), html.project-slides-last-item body[class*="sh-visuals-projects-"] .thumbnail-strip:not(:hover), html.project-slide-orientation-landscape body[class*="sh-visuals-projects-"] .thumbnail-strip:not(:hover) {
    right: calc(-15em + 60px - 20px);
  }
}

@keyframes glow {
  0% {
    color: rgba(255, 255, 255, 0.75);
    text-shadow: none;
  }
  50% {
    color: white;
    text-shadow: 0 0 1px white;
  }
  70% {
    color: white;
    text-shadow: none;
  }
  to {
    color: rgba(255, 255, 255, 0.75);
  }
}

body[class*="path-portfolio-projects-"] html,
body[class*="path-portfolio-search-"] html,
body[class*="sh-visuals-projects-"] 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[class*="path-portfolio-projects-"] body,
body[class*="path-portfolio-search-"] body,
body[class*="sh-visuals-projects-"] body {
  --fla-dock-height: 0px;
}

body[class*="path-portfolio-projects-"] body[data-fla-state*="do:1"],
body[class*="path-portfolio-search-"] body[data-fla-state*="do:1"],
body[class*="sh-visuals-projects-"] body[data-fla-state*="do:1"] {
  --fla-dock-height: var(--fla-footer-height);
}

body[class*="path-portfolio-projects-"] .detail-view,
body[class*="path-portfolio-search-"] .detail-view,
body[class*="sh-visuals-projects-"] .detail-view {
  height: 100%;
  min-height: calc(100% - var(--fla-footer-height) + 1px);
}

body[class*="path-portfolio-projects-"] .detail-view.show-project-labels .project-title,
body[class*="path-portfolio-search-"] .detail-view.show-project-labels .project-title,
body[class*="sh-visuals-projects-"] .detail-view.show-project-labels .project-title {
  display: block !important;
}

body[class*="path-portfolio-projects-"] .detail-view article.node--view-mode-full,
body[class*="path-portfolio-search-"] .detail-view article.node--view-mode-full,
body[class*="sh-visuals-projects-"] .detail-view article.node--view-mode-full {
  position: relative;
  overflow: hidden;
  height: 100%;
  /*// DISABLED FOR NOW
    .field--name-field-fla-id{
      @include number-overlay($green-1);
      font-family: "CenturyGothicStd", "Arial", "Helvetica", "sans-serif";
      font-size: 2em;
      top: 0;
      right: 0;
      text-shadow: 0px 0px 6px rgba(0, 0, 0, 0);
    }
    //*/
  /**
 * 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
 */
  /**
 * 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[class*="path-portfolio-projects-"] .detail-view article.node--view-mode-full > h2,
body[class*="path-portfolio-search-"] .detail-view article.node--view-mode-full > h2,
body[class*="sh-visuals-projects-"] .detail-view article.node--view-mode-full > h2 {
  display: none;
}

body[class*="path-portfolio-projects-"] .detail-view article.node--view-mode-full .node__content,
body[class*="path-portfolio-search-"] .detail-view article.node--view-mode-full .node__content,
body[class*="sh-visuals-projects-"] .detail-view article.node--view-mode-full .node__content {
  height: 100%;
}

body[class*="path-portfolio-projects-"] .detail-view article.node--view-mode-full .node__content > .field:not(.field--name-field-media),
body[class*="path-portfolio-search-"] .detail-view article.node--view-mode-full .node__content > .field:not(.field--name-field-media),
body[class*="sh-visuals-projects-"] .detail-view article.node--view-mode-full .node__content > .field:not(.field--name-field-media) {
  display: none;
}

body[class*="path-portfolio-projects-"] .detail-view article.node--view-mode-full .field--name-field-wood-species,
body[class*="path-portfolio-search-"] .detail-view article.node--view-mode-full .field--name-field-wood-species,
body[class*="sh-visuals-projects-"] .detail-view article.node--view-mode-full .field--name-field-wood-species {
  position: absolute;
}

body[class*="path-portfolio-projects-"] .detail-view article.node--view-mode-full .field--name-field-project-city,
body[class*="path-portfolio-projects-"] .detail-view article.node--view-mode-full .field--name-field-title-copy,
body[class*="path-portfolio-search-"] .detail-view article.node--view-mode-full .field--name-field-project-city,
body[class*="path-portfolio-search-"] .detail-view article.node--view-mode-full .field--name-field-title-copy,
body[class*="sh-visuals-projects-"] .detail-view article.node--view-mode-full .field--name-field-project-city,
body[class*="sh-visuals-projects-"] .detail-view article.node--view-mode-full .field--name-field-title-copy {
  display: none;
}

body[class*="path-portfolio-projects-"] .detail-view article.node--view-mode-full .project-title,
body[class*="path-portfolio-search-"] .detail-view article.node--view-mode-full .project-title,
body[class*="sh-visuals-projects-"] .detail-view article.node--view-mode-full .project-title {
  display: none;
  position: absolute;
  z-index: 100;
  width: auto;
  padding: 0.5em;
  left: var(--fu-gallery-spacing-around);
  bottom: calc(var(--fla-footer-height));
}

body[class*="path-portfolio-projects-"] .detail-view article.node--view-mode-full .project-title:before,
body[class*="path-portfolio-search-"] .detail-view article.node--view-mode-full .project-title:before,
body[class*="sh-visuals-projects-"] .detail-view article.node--view-mode-full .project-title:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  pointer-events: none;
}

body[class*="path-portfolio-projects-"] .detail-view article.node--view-mode-full .project-title:before,
body[class*="path-portfolio-search-"] .detail-view article.node--view-mode-full .project-title:before,
body[class*="sh-visuals-projects-"] .detail-view article.node--view-mode-full .project-title:before {
  z-index: -1;
  background-color: rgba(0, 0, 0, 0.35);
  border-radius: 0;
  backdrop-filter: grayscale(20%) blur(3px) brightness(60%);
}

body[class*="path-portfolio-projects-"] .detail-view article.node--view-mode-full .project-title:before,
body[class*="path-portfolio-search-"] .detail-view article.node--view-mode-full .project-title:before,
body[class*="sh-visuals-projects-"] .detail-view article.node--view-mode-full .project-title:before {
  border-radius: 5px;
}

html[data-fla-state*="do:1"] body[class*="path-portfolio-projects-"] .detail-view article.node--view-mode-full .project-title, html[data-fla-state*="do:1"] body[class*="path-portfolio-search-"] .detail-view article.node--view-mode-full .project-title, html[data-fla-state*="do:1"] body[class*="sh-visuals-projects-"] .detail-view article.node--view-mode-full .project-title {
  bottom: calc(var(--fla-footer-height) + var(--fu-gallery-spacing-between));
}

@media (min-width: 1024px) {
  body[class*="path-portfolio-projects-"] .detail-view article.node--view-mode-full .project-title,
body[class*="path-portfolio-search-"] .detail-view article.node--view-mode-full .project-title,
body[class*="sh-visuals-projects-"] .detail-view article.node--view-mode-full .project-title {
    bottom: calc(var(--project-media-thumbnails-size) + 2*var(--fu-gallery-spacing-around));
  }
  html[data-fla-state*="do:1"] body[class*="path-portfolio-projects-"] .detail-view article.node--view-mode-full .project-title, html[data-fla-state*="do:1"] body[class*="path-portfolio-search-"] .detail-view article.node--view-mode-full .project-title, html[data-fla-state*="do:1"] body[class*="sh-visuals-projects-"] .detail-view article.node--view-mode-full .project-title {
    bottom: calc(var(--fla-footer-height) + 2*var(--fu-gallery-spacing-around));
  }
}

@media (min-width: 1600px) {
  body[class*="path-portfolio-projects-"] .detail-view article.node--view-mode-full .project-title,
body[class*="path-portfolio-search-"] .detail-view article.node--view-mode-full .project-title,
body[class*="sh-visuals-projects-"] .detail-view article.node--view-mode-full .project-title {
    bottom: calc(var(--fla-dock-height) + var(--fu-gallery-spacing-around));
  }
}

body[class*="path-portfolio-projects-"] .detail-view article.node--view-mode-full .project-title.field__item, body[class*="path-portfolio-projects-"] .detail-view article.node--view-mode-full .project-title .field__item, body[class*="path-portfolio-projects-"] .detail-view article.node--view-mode-full .project-title > span,
body[class*="path-portfolio-search-"] .detail-view article.node--view-mode-full .project-title.field__item,
body[class*="path-portfolio-search-"] .detail-view article.node--view-mode-full .project-title .field__item,
body[class*="path-portfolio-search-"] .detail-view article.node--view-mode-full .project-title > span,
body[class*="sh-visuals-projects-"] .detail-view article.node--view-mode-full .project-title.field__item,
body[class*="sh-visuals-projects-"] .detail-view article.node--view-mode-full .project-title .field__item,
body[class*="sh-visuals-projects-"] .detail-view article.node--view-mode-full .project-title > span {
  letter-spacing: -0.5px;
  vertical-align: text-top;
  line-height: 1.5;
  color: #efefef;
  filter: opacity(0.818);
}

body[class*="path-portfolio-projects-"] .detail-view article.node--view-mode-full .project-title.field__item.separator, body[class*="path-portfolio-projects-"] .detail-view article.node--view-mode-full .project-title .field__item.separator, body[class*="path-portfolio-projects-"] .detail-view article.node--view-mode-full .project-title > span.separator,
body[class*="path-portfolio-search-"] .detail-view article.node--view-mode-full .project-title.field__item.separator,
body[class*="path-portfolio-search-"] .detail-view article.node--view-mode-full .project-title .field__item.separator,
body[class*="path-portfolio-search-"] .detail-view article.node--view-mode-full .project-title > span.separator,
body[class*="sh-visuals-projects-"] .detail-view article.node--view-mode-full .project-title.field__item.separator,
body[class*="sh-visuals-projects-"] .detail-view article.node--view-mode-full .project-title .field__item.separator,
body[class*="sh-visuals-projects-"] .detail-view article.node--view-mode-full .project-title > span.separator {
  display: none;
  padding: 0 0.25em;
  font-size: 90%;
  vertical-align: sub;
  font-weight: 300;
  opacity: 0.7;
}

body[class*="path-portfolio-projects-"] .detail-view article.node--view-mode-full .project-title .fla-id,
body[class*="path-portfolio-search-"] .detail-view article.node--view-mode-full .project-title .fla-id,
body[class*="sh-visuals-projects-"] .detail-view article.node--view-mode-full .project-title .fla-id {
  display: none;
}

@media (min-width: 576px) {
  body[class*="path-portfolio-projects-"] .detail-view article.node--view-mode-full .project-title .fla-id,
body[class*="path-portfolio-search-"] .detail-view article.node--view-mode-full .project-title .fla-id,
body[class*="sh-visuals-projects-"] .detail-view article.node--view-mode-full .project-title .fla-id {
    display: block;
    font-size: 56px;
    line-height: 1;
  }
}

@media (min-width: 1024px) {
  body[class*="path-portfolio-projects-"] .detail-view article.node--view-mode-full .project-title .fla-id,
body[class*="path-portfolio-search-"] .detail-view article.node--view-mode-full .project-title .fla-id,
body[class*="sh-visuals-projects-"] .detail-view article.node--view-mode-full .project-title .fla-id {
    cursor: ew-resize !important;
  }
}

body[class*="path-portfolio-projects-"] .detail-view article.node--view-mode-full .project-title .title,
body[class*="path-portfolio-search-"] .detail-view article.node--view-mode-full .project-title .title,
body[class*="sh-visuals-projects-"] .detail-view article.node--view-mode-full .project-title .title {
  font-size: 1.25em;
  font-weight: 300;
  display: block;
}

body[class*="path-portfolio-projects-"] .detail-view article.node--view-mode-full .project-title .city, body[class*="path-portfolio-projects-"] .detail-view article.node--view-mode-full .project-title .comma, body[class*="path-portfolio-projects-"] .detail-view article.node--view-mode-full .project-title .state,
body[class*="path-portfolio-search-"] .detail-view article.node--view-mode-full .project-title .city,
body[class*="path-portfolio-search-"] .detail-view article.node--view-mode-full .project-title .comma,
body[class*="path-portfolio-search-"] .detail-view article.node--view-mode-full .project-title .state,
body[class*="sh-visuals-projects-"] .detail-view article.node--view-mode-full .project-title .city,
body[class*="sh-visuals-projects-"] .detail-view article.node--view-mode-full .project-title .comma,
body[class*="sh-visuals-projects-"] .detail-view article.node--view-mode-full .project-title .state {
  font-size: 1em;
  font-weight: 200;
}

body[class*="path-portfolio-projects-"] .detail-view article.node--view-mode-full div.content,
body[class*="path-portfolio-search-"] .detail-view article.node--view-mode-full div.content,
body[class*="sh-visuals-projects-"] .detail-view article.node--view-mode-full div.content {
  height: 100%;
  width: auto;
  margin: auto;
  position: relative;
  display: inline-block;
  padding: 0.5em;
}

body[class*="path-portfolio-projects-"] .detail-view article.node--view-mode-full html,
body[class*="path-portfolio-search-"] .detail-view article.node--view-mode-full html,
body[class*="sh-visuals-projects-"] .detail-view article.node--view-mode-full 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[class*="path-portfolio-projects-"] .detail-view article.node--view-mode-full body,
body[class*="path-portfolio-search-"] .detail-view article.node--view-mode-full body,
body[class*="sh-visuals-projects-"] .detail-view article.node--view-mode-full body {
  --fla-dock-height: 0px;
}

body[class*="path-portfolio-projects-"] .detail-view article.node--view-mode-full body[data-fla-state*="do:1"],
body[class*="path-portfolio-search-"] .detail-view article.node--view-mode-full body[data-fla-state*="do:1"],
body[class*="sh-visuals-projects-"] .detail-view article.node--view-mode-full body[data-fla-state*="do:1"] {
  --fla-dock-height: var(--fla-footer-height);
}

body[class*="path-portfolio-projects-"] .detail-view article.node--view-mode-full .field--name-field-media, body[class*="path-portfolio-projects-"] .detail-view article.node--view-mode-full .field--name-field-media .field__item, body[class*="path-portfolio-projects-"] .detail-view article.node--view-mode-full .field--name-field-media .field__item article, body[class*="path-portfolio-projects-"] .detail-view article.node--view-mode-full .field--name-field-media .field__item article .field--name-field-media-image,
body[class*="path-portfolio-search-"] .detail-view article.node--view-mode-full .field--name-field-media,
body[class*="path-portfolio-search-"] .detail-view article.node--view-mode-full .field--name-field-media .field__item,
body[class*="path-portfolio-search-"] .detail-view article.node--view-mode-full .field--name-field-media .field__item article,
body[class*="path-portfolio-search-"] .detail-view article.node--view-mode-full .field--name-field-media .field__item article .field--name-field-media-image,
body[class*="sh-visuals-projects-"] .detail-view article.node--view-mode-full .field--name-field-media,
body[class*="sh-visuals-projects-"] .detail-view article.node--view-mode-full .field--name-field-media .field__item,
body[class*="sh-visuals-projects-"] .detail-view article.node--view-mode-full .field--name-field-media .field__item article,
body[class*="sh-visuals-projects-"] .detail-view article.node--view-mode-full .field--name-field-media .field__item article .field--name-field-media-image {
  height: 100%;
  width: 100%;
}

@media (min-width: 1024px) {
  body[class*="path-portfolio-projects-"] .detail-view article.node--view-mode-full .field--name-field-media, body[class*="path-portfolio-projects-"] .detail-view article.node--view-mode-full .field--name-field-media .field__item, body[class*="path-portfolio-projects-"] .detail-view article.node--view-mode-full .field--name-field-media .field__item article, body[class*="path-portfolio-projects-"] .detail-view article.node--view-mode-full .field--name-field-media .field__item article .field--name-field-media-image,
body[class*="path-portfolio-search-"] .detail-view article.node--view-mode-full .field--name-field-media,
body[class*="path-portfolio-search-"] .detail-view article.node--view-mode-full .field--name-field-media .field__item,
body[class*="path-portfolio-search-"] .detail-view article.node--view-mode-full .field--name-field-media .field__item article,
body[class*="path-portfolio-search-"] .detail-view article.node--view-mode-full .field--name-field-media .field__item article .field--name-field-media-image,
body[class*="sh-visuals-projects-"] .detail-view article.node--view-mode-full .field--name-field-media,
body[class*="sh-visuals-projects-"] .detail-view article.node--view-mode-full .field--name-field-media .field__item,
body[class*="sh-visuals-projects-"] .detail-view article.node--view-mode-full .field--name-field-media .field__item article,
body[class*="sh-visuals-projects-"] .detail-view article.node--view-mode-full .field--name-field-media .field__item article .field--name-field-media-image {
    width: auto;
  }
}

body[class*="path-portfolio-projects-"] .detail-view article.node--view-mode-full .field--name-field-media.field__items,
body[class*="path-portfolio-search-"] .detail-view article.node--view-mode-full .field--name-field-media.field__items,
body[class*="sh-visuals-projects-"] .detail-view article.node--view-mode-full .field--name-field-media.field__items {
  white-space: nowrap;
  overflow-y: hidden;
  line-height: 0;
  font-size: 0;
  scroll-snap-type: x mandatory;
  overflow-x: scroll;
  position: relative;
}

html.no-touchevents body[class*="path-portfolio-projects-"] .detail-view article.node--view-mode-full .field--name-field-media.field__items, html.no-touchevents body[class*="path-portfolio-search-"] .detail-view article.node--view-mode-full .field--name-field-media.field__items, html.no-touchevents body[class*="sh-visuals-projects-"] .detail-view article.node--view-mode-full .field--name-field-media.field__items {
  overflow-x: hidden;
}

html.no-touchevents body[class*="path-portfolio-projects-"] .detail-view article.node--view-mode-full .field--name-field-media.field__items .field__item, html.no-touchevents body[class*="path-portfolio-search-"] .detail-view article.node--view-mode-full .field--name-field-media.field__items .field__item, html.no-touchevents body[class*="sh-visuals-projects-"] .detail-view article.node--view-mode-full .field--name-field-media.field__items .field__item {
  cursor: pointer;
}

html.no-touchevents body[class*="path-portfolio-projects-"] .detail-view article.node--view-mode-full .field--name-field-media.field__items .snapped .field__item, html.no-touchevents body[class*="path-portfolio-search-"] .detail-view article.node--view-mode-full .field--name-field-media.field__items .snapped .field__item, html.no-touchevents body[class*="sh-visuals-projects-"] .detail-view article.node--view-mode-full .field--name-field-media.field__items .snapped .field__item {
  cursor: ew-resize;
}

body[class*="path-portfolio-projects-"] .detail-view article.node--view-mode-full .field--name-field-media .field__item,
body[class*="path-portfolio-search-"] .detail-view article.node--view-mode-full .field--name-field-media .field__item,
body[class*="sh-visuals-projects-"] .detail-view article.node--view-mode-full .field--name-field-media .field__item {
  display: inline-block;
  vertical-align: top;
  scroll-snap-align: center;
}

body[class*="path-portfolio-projects-"] .detail-view article.node--view-mode-full .field--name-field-media .field__item:first-of-type,
body[class*="path-portfolio-search-"] .detail-view article.node--view-mode-full .field--name-field-media .field__item:first-of-type,
body[class*="sh-visuals-projects-"] .detail-view article.node--view-mode-full .field--name-field-media .field__item:first-of-type {
  scroll-snap-align: start;
}

body[class*="path-portfolio-projects-"] .detail-view article.node--view-mode-full .field--name-field-media .field__item:last-of-type,
body[class*="path-portfolio-search-"] .detail-view article.node--view-mode-full .field--name-field-media .field__item:last-of-type,
body[class*="sh-visuals-projects-"] .detail-view article.node--view-mode-full .field--name-field-media .field__item:last-of-type {
  scroll-snap-align: end;
}

body[class*="path-portfolio-projects-"] .detail-view article.node--view-mode-full .field--name-field-media .field__item.snapped,
body[class*="path-portfolio-search-"] .detail-view article.node--view-mode-full .field--name-field-media .field__item.snapped,
body[class*="sh-visuals-projects-"] .detail-view article.node--view-mode-full .field--name-field-media .field__item.snapped {
  border-left: 1px solid rgba(255, 255, 255, 0.382);
  border-right: 1px solid rgba(255, 255, 255, 0.382);
}

@media (min-width: 1600px) {
  body[class*="path-portfolio-projects-"] .detail-view article.node--view-mode-full .field--name-field-media .field__item:has(+ .snapped):before, body[class*="path-portfolio-projects-"] .detail-view article.node--view-mode-full .field--name-field-media .field__item.snapped + .field__item:before,
body[class*="path-portfolio-search-"] .detail-view article.node--view-mode-full .field--name-field-media .field__item:has(+ .snapped):before,
body[class*="path-portfolio-search-"] .detail-view article.node--view-mode-full .field--name-field-media .field__item.snapped + .field__item:before,
body[class*="sh-visuals-projects-"] .detail-view article.node--view-mode-full .field--name-field-media .field__item:has(+ .snapped):before,
body[class*="sh-visuals-projects-"] .detail-view article.node--view-mode-full .field--name-field-media .field__item.snapped + .field__item:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    pointer-events: none;
  }
  body[class*="path-portfolio-projects-"] .detail-view article.node--view-mode-full .field--name-field-media .field__item:has(+ .snapped):before, body[class*="path-portfolio-projects-"] .detail-view article.node--view-mode-full .field--name-field-media .field__item.snapped + .field__item:before,
body[class*="path-portfolio-search-"] .detail-view article.node--view-mode-full .field--name-field-media .field__item:has(+ .snapped):before,
body[class*="path-portfolio-search-"] .detail-view article.node--view-mode-full .field--name-field-media .field__item.snapped + .field__item:before,
body[class*="sh-visuals-projects-"] .detail-view article.node--view-mode-full .field--name-field-media .field__item:has(+ .snapped):before,
body[class*="sh-visuals-projects-"] .detail-view article.node--view-mode-full .field--name-field-media .field__item.snapped + .field__item:before {
    pointer-events: none !important;
    transition: opacity, filter, mix-blend-mode 0.3s ease-in-out;
    background: transparent url("/themes/custom/fla/icons/bootstrap/arrow-right-short-border.svg") left center no-repeat;
    filter: invert(0.4);
    background-size: 10rem;
    mix-blend-mode: hard-light;
    cursor: pointer;
  }
  body[class*="path-portfolio-projects-"] .detail-view article.node--view-mode-full .field--name-field-media .field__item:has(+ .snapped):hover:before, body[class*="path-portfolio-projects-"] .detail-view article.node--view-mode-full .field--name-field-media .field__item.snapped + .field__item:hover:before,
body[class*="path-portfolio-search-"] .detail-view article.node--view-mode-full .field--name-field-media .field__item:has(+ .snapped):hover:before,
body[class*="path-portfolio-search-"] .detail-view article.node--view-mode-full .field--name-field-media .field__item.snapped + .field__item:hover:before,
body[class*="sh-visuals-projects-"] .detail-view article.node--view-mode-full .field--name-field-media .field__item:has(+ .snapped):hover:before,
body[class*="sh-visuals-projects-"] .detail-view article.node--view-mode-full .field--name-field-media .field__item.snapped + .field__item:hover:before {
    mix-blend-mode: plus-lighter;
  }
  body[class*="path-portfolio-projects-"] .detail-view article.node--view-mode-full .field--name-field-media .field__item:has(+ .snapped):before,
body[class*="path-portfolio-search-"] .detail-view article.node--view-mode-full .field--name-field-media .field__item:has(+ .snapped):before,
body[class*="sh-visuals-projects-"] .detail-view article.node--view-mode-full .field--name-field-media .field__item:has(+ .snapped):before {
    background-position: right center;
    background-image: url("/themes/custom/fla/icons/bootstrap/arrow-left-short-border.svg");
  }
}

body[class*="path-portfolio-projects-"] .detail-view article.node--view-mode-full .field--name-field-media div[class*="orientation"],
body[class*="path-portfolio-search-"] .detail-view article.node--view-mode-full .field--name-field-media div[class*="orientation"],
body[class*="sh-visuals-projects-"] .detail-view article.node--view-mode-full .field--name-field-media div[class*="orientation"] {
  height: 100%;
  width: auto;
}

body[class*="path-portfolio-projects-"] .detail-view article.node--view-mode-full .field--name-field-media div[class*="orientation"] img,
body[class*="path-portfolio-search-"] .detail-view article.node--view-mode-full .field--name-field-media div[class*="orientation"] img,
body[class*="sh-visuals-projects-"] .detail-view article.node--view-mode-full .field--name-field-media div[class*="orientation"] img {
  scroll-snap-align: start;
  height: 100%;
  width: 100%;
  max-width: unset;
  transition-property: object-position;
  transition-delay: 0.5s;
  transition-duration: 5s;
  transition-timing-function: unset;
}

body[class*="path-portfolio-projects-"] .detail-view article.node--view-mode-full .field--name-field-media .orientation-landscape img,
body[class*="path-portfolio-search-"] .detail-view article.node--view-mode-full .field--name-field-media .orientation-landscape img,
body[class*="sh-visuals-projects-"] .detail-view article.node--view-mode-full .field--name-field-media .orientation-landscape img {
  object-fit: cover;
}

body[class*="path-portfolio-projects-"] .detail-view article.node--view-mode-full .field--name-field-media .orientation-portrait img,
body[class*="path-portfolio-search-"] .detail-view article.node--view-mode-full .field--name-field-media .orientation-portrait img,
body[class*="sh-visuals-projects-"] .detail-view article.node--view-mode-full .field--name-field-media .orientation-portrait img {
  object-fit: cover;
}

body[class*="path-portfolio-projects-"] .detail-view article.node--view-mode-full .field--name-field-media > .field__item.inside-viewport .field__item article.media picture img,
body[class*="path-portfolio-search-"] .detail-view article.node--view-mode-full .field--name-field-media > .field__item.inside-viewport .field__item article.media picture img,
body[class*="sh-visuals-projects-"] .detail-view article.node--view-mode-full .field--name-field-media > .field__item.inside-viewport .field__item article.media picture img {
  object-position: bottom right !important;
}

body[class*="path-portfolio-projects-"] .detail-view article.node--view-mode-full article.media.media--view-mode-project-detail, body[class*="path-portfolio-projects-"] .detail-view article.node--view-mode-full article.media.media--view-mode-project-detail .field__item, body[class*="path-portfolio-projects-"] .detail-view article.node--view-mode-full article.media.media--view-mode-project-detail .field__items > div,
body[class*="path-portfolio-search-"] .detail-view article.node--view-mode-full article.media.media--view-mode-project-detail,
body[class*="path-portfolio-search-"] .detail-view article.node--view-mode-full article.media.media--view-mode-project-detail .field__item,
body[class*="path-portfolio-search-"] .detail-view article.node--view-mode-full article.media.media--view-mode-project-detail .field__items > div,
body[class*="sh-visuals-projects-"] .detail-view article.node--view-mode-full article.media.media--view-mode-project-detail,
body[class*="sh-visuals-projects-"] .detail-view article.node--view-mode-full article.media.media--view-mode-project-detail .field__item,
body[class*="sh-visuals-projects-"] .detail-view article.node--view-mode-full article.media.media--view-mode-project-detail .field__items > div {
  width: 100%;
  height: 100%;
}

body[class*="path-portfolio-projects-"] .detail-view article.node--view-mode-full article.media.media--view-mode-project-detail picture img,
body[class*="path-portfolio-search-"] .detail-view article.node--view-mode-full article.media.media--view-mode-project-detail picture img,
body[class*="sh-visuals-projects-"] .detail-view article.node--view-mode-full article.media.media--view-mode-project-detail picture img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition-property: object-position;
  transition-delay: 0.25s;
  transition-duration: 5s;
  transition-timing-function: unset;
}

body[class*="path-portfolio-projects-"] .detail-view article.node--view-mode-full article.media.media--view-mode-project-detail picture img.orientation-landscape,
body[class*="path-portfolio-search-"] .detail-view article.node--view-mode-full article.media.media--view-mode-project-detail picture img.orientation-landscape,
body[class*="sh-visuals-projects-"] .detail-view article.node--view-mode-full article.media.media--view-mode-project-detail picture img.orientation-landscape {
  object-position: bottom left;
}

body[class*="path-portfolio-projects-"] .detail-view article.node--view-mode-full article.media.media--view-mode-project-detail picture img.orientation-portrait,
body[class*="path-portfolio-search-"] .detail-view article.node--view-mode-full article.media.media--view-mode-project-detail picture img.orientation-portrait,
body[class*="sh-visuals-projects-"] .detail-view article.node--view-mode-full article.media.media--view-mode-project-detail picture img.orientation-portrait {
  object-position: bottom left;
}

@media (min-width: 1024px) {
  body[class*="path-portfolio-projects-"] .detail-view article.node--view-mode-full .field--name-field-media > .field__item,
body[class*="path-portfolio-search-"] .detail-view article.node--view-mode-full .field--name-field-media > .field__item,
body[class*="sh-visuals-projects-"] .detail-view article.node--view-mode-full .field--name-field-media > .field__item {
    transition-property: filter;
    transition-duration: 0.5s;
    transition-timing-function: ease-out;
    filter: brightness(0.4) saturate(0);
  }
  body[class*="path-portfolio-projects-"] .detail-view article.node--view-mode-full .field--name-field-media > .field__item.inside-viewport.snapped,
body[class*="path-portfolio-search-"] .detail-view article.node--view-mode-full .field--name-field-media > .field__item.inside-viewport.snapped,
body[class*="sh-visuals-projects-"] .detail-view article.node--view-mode-full .field--name-field-media > .field__item.inside-viewport.snapped {
    filter: brightness(1) saturate(1);
  }
  body[class*="path-portfolio-projects-"] .detail-view article.node--view-mode-full article.media.media--view-mode-project-detail, body[class*="path-portfolio-projects-"] .detail-view article.node--view-mode-full article.media.media--view-mode-project-detail .field__item, body[class*="path-portfolio-projects-"] .detail-view article.node--view-mode-full article.media.media--view-mode-project-detail .field__items > div,
body[class*="path-portfolio-search-"] .detail-view article.node--view-mode-full article.media.media--view-mode-project-detail,
body[class*="path-portfolio-search-"] .detail-view article.node--view-mode-full article.media.media--view-mode-project-detail .field__item,
body[class*="path-portfolio-search-"] .detail-view article.node--view-mode-full article.media.media--view-mode-project-detail .field__items > div,
body[class*="sh-visuals-projects-"] .detail-view article.node--view-mode-full article.media.media--view-mode-project-detail,
body[class*="sh-visuals-projects-"] .detail-view article.node--view-mode-full article.media.media--view-mode-project-detail .field__item,
body[class*="sh-visuals-projects-"] .detail-view article.node--view-mode-full article.media.media--view-mode-project-detail .field__items > div {
    width: 100%;
    height: 100%;
  }
  body[class*="path-portfolio-projects-"] .detail-view article.node--view-mode-full article.media.media--view-mode-project-detail picture img,
body[class*="path-portfolio-search-"] .detail-view article.node--view-mode-full article.media.media--view-mode-project-detail picture img,
body[class*="sh-visuals-projects-"] .detail-view article.node--view-mode-full article.media.media--view-mode-project-detail picture img {
    width: auto !important;
    object-fit: unset;
    transition-property: unset;
    object-position: unset;
  }
}

body[class*="path-portfolio-projects-"] .detail-view article.node--view-mode-full html,
body[class*="path-portfolio-search-"] .detail-view article.node--view-mode-full html,
body[class*="sh-visuals-projects-"] .detail-view article.node--view-mode-full 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[class*="path-portfolio-projects-"] .detail-view article.node--view-mode-full body,
body[class*="path-portfolio-search-"] .detail-view article.node--view-mode-full body,
body[class*="sh-visuals-projects-"] .detail-view article.node--view-mode-full body {
  --fla-dock-height: 0px;
}

body[class*="path-portfolio-projects-"] .detail-view article.node--view-mode-full body[data-fla-state*="do:1"],
body[class*="path-portfolio-search-"] .detail-view article.node--view-mode-full body[data-fla-state*="do:1"],
body[class*="sh-visuals-projects-"] .detail-view article.node--view-mode-full body[data-fla-state*="do:1"] {
  --fla-dock-height: var(--fla-footer-height);
}

body[class*="path-portfolio-projects-"] .detail-view article.node--view-mode-full .project-media-thumbnails,
body[class*="path-portfolio-search-"] .detail-view article.node--view-mode-full .project-media-thumbnails,
body[class*="sh-visuals-projects-"] .detail-view article.node--view-mode-full .project-media-thumbnails {
  --project-thumbnailstrip-width: 220px;
  --project-media-thumbnails-size: 100px;
  --project-media-thumbnails-start-left: 170px;
  --project-media-thumbnails-gap: 50px;
  --project-media-thumbnails-fade-distance: calc(3*var(--project-media-thumbnails-size));
  display: none;
  position: absolute;
  z-index: 1;
  width: 100%;
  text-align: left;
  left: 0;
  bottom: calc(var(--fla-dock-height) + var(--fu-gallery-spacing-around));
  right: 0;
  height: var(--project-media-thumbnails-size);
  box-sizing: content-box;
  white-space: nowrap;
  overflow: auto;
  -ms-overflow-style: none;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  mask-image: linear-gradient(to right, black 0%, black var(--project-media-thumbnails-start-left), black calc(var(--project-media-thumbnails-start-left) + var(--project-media-thumbnails-fade-distance)), black calc(100% - var(--project-thumbnailstrip-width) - var(--project-media-thumbnails-fade-distance) - 2*var(--project-media-thumbnails-gap)), transparent calc(100% - var(--project-thumbnailstrip-width) - 2*var(--project-media-thumbnails-gap)), transparent 100%);
  max-width: calc(100vw - var(--project-thumbnailstrip-width) - 2 * var(--project-media-thumbnails-gap) - var(--project-media-thumbnails-start-left));
  max-width: 100%;
}

body[class*="path-portfolio-projects-"] .detail-view article.node--view-mode-full .project-media-thumbnails::-webkit-scrollbar,
body[class*="path-portfolio-search-"] .detail-view article.node--view-mode-full .project-media-thumbnails::-webkit-scrollbar,
body[class*="sh-visuals-projects-"] .detail-view article.node--view-mode-full .project-media-thumbnails::-webkit-scrollbar {
  width: 0;
  height: 0;
  background: transparent;
}

body[class*="path-portfolio-projects-"] .detail-view article.node--view-mode-full .project-media-thumbnails .content:before, body[class*="path-portfolio-projects-"] .detail-view article.node--view-mode-full .project-media-thumbnails .content:after,
body[class*="path-portfolio-search-"] .detail-view article.node--view-mode-full .project-media-thumbnails .content:before,
body[class*="path-portfolio-search-"] .detail-view article.node--view-mode-full .project-media-thumbnails .content:after,
body[class*="sh-visuals-projects-"] .detail-view article.node--view-mode-full .project-media-thumbnails .content:before,
body[class*="sh-visuals-projects-"] .detail-view article.node--view-mode-full .project-media-thumbnails .content:after {
  content: "";
  display: inline-block;
  height: 10px;
}

body[class*="path-portfolio-projects-"] .detail-view article.node--view-mode-full .project-media-thumbnails .content:after,
body[class*="path-portfolio-search-"] .detail-view article.node--view-mode-full .project-media-thumbnails .content:after,
body[class*="sh-visuals-projects-"] .detail-view article.node--view-mode-full .project-media-thumbnails .content:after {
  width: calc(var(--project-thumbnailstrip-width) + var(--project-media-thumbnails-fade-distance) + var(--project-media-thumbnails-gap));
}

@media (min-width: 1024px) {
  body[class*="path-portfolio-projects-"] .detail-view article.node--view-mode-full .project-media-thumbnails,
body[class*="path-portfolio-search-"] .detail-view article.node--view-mode-full .project-media-thumbnails,
body[class*="sh-visuals-projects-"] .detail-view article.node--view-mode-full .project-media-thumbnails {
    display: block;
    opacity: 0;
    transition-property: opacity;
    transition-duration: 0.3s;
    transition-delay: 0.2s;
    transition-timing-function: ease-out;
  }
  html[data-fla-state*="do:0"] body[class*="path-portfolio-projects-"] .detail-view article.node--view-mode-full .project-media-thumbnails, html[data-fla-state*="do:0"] body[class*="path-portfolio-search-"] .detail-view article.node--view-mode-full .project-media-thumbnails, html[data-fla-state*="do:0"] body[class*="sh-visuals-projects-"] .detail-view article.node--view-mode-full .project-media-thumbnails {
    opacity: 1;
  }
}

@media (min-width: 1600px) {
  body[class*="path-portfolio-projects-"] .detail-view article.node--view-mode-full .project-media-thumbnails,
body[class*="path-portfolio-search-"] .detail-view article.node--view-mode-full .project-media-thumbnails,
body[class*="sh-visuals-projects-"] .detail-view article.node--view-mode-full .project-media-thumbnails {
    text-align: center;
    mask-image: linear-gradient(to right, transparent 0%, transparent var(--project-media-thumbnails-start-left), black calc(var(--project-media-thumbnails-start-left) + var(--project-media-thumbnails-fade-distance)), black calc(100% - var(--project-thumbnailstrip-width) - var(--project-media-thumbnails-fade-distance) - 2*var(--project-media-thumbnails-gap)), transparent calc(100% - var(--project-thumbnailstrip-width) - 2*var(--project-media-thumbnails-gap)), transparent 100%);
    max-width: calc(100vw - var(--project-thumbnailstrip-width) - 2 * var(--project-media-thumbnails-gap) - var(--project-media-thumbnails-start-left));
    max-width: 100%;
    animation-name: hide-project-media-thumbnails;
    animation-duration: 0.3s;
    animation-timing-function: ease-out;
    animation-delay: 1.25s;
    animation-fill-mode: forwards;
  }
  body[class*="path-portfolio-projects-"] .detail-view article.node--view-mode-full .project-media-thumbnails .content:before,
body[class*="path-portfolio-search-"] .detail-view article.node--view-mode-full .project-media-thumbnails .content:before,
body[class*="sh-visuals-projects-"] .detail-view article.node--view-mode-full .project-media-thumbnails .content:before {
    width: calc(var(--project-media-thumbnails-start-left) + var(--project-media-thumbnails-fade-distance) + var(--project-media-thumbnails-gap));
  }
  body[class*="path-portfolio-projects-"] .detail-view article.node--view-mode-full .project-media-thumbnails:hover, body[class*="path-portfolio-projects-"] .detail-view article.node--view-mode-full .project-media-thumbnails:focus-within,
body[class*="path-portfolio-search-"] .detail-view article.node--view-mode-full .project-media-thumbnails:hover,
body[class*="path-portfolio-search-"] .detail-view article.node--view-mode-full .project-media-thumbnails:focus-within,
body[class*="sh-visuals-projects-"] .detail-view article.node--view-mode-full .project-media-thumbnails:hover,
body[class*="sh-visuals-projects-"] .detail-view article.node--view-mode-full .project-media-thumbnails:focus-within {
    animation: none;
    opacity: 1;
  }
}

body[class*="path-portfolio-projects-"] .detail-view article.node--view-mode-full .project-media-thumbnails a,
body[class*="path-portfolio-search-"] .detail-view article.node--view-mode-full .project-media-thumbnails a,
body[class*="sh-visuals-projects-"] .detail-view article.node--view-mode-full .project-media-thumbnails a {
  height: 100%;
  position: relative;
  display: inline-block;
}

body[class*="path-portfolio-projects-"] .detail-view article.node--view-mode-full .project-media-thumbnails a.active:before,
body[class*="path-portfolio-search-"] .detail-view article.node--view-mode-full .project-media-thumbnails a.active:before,
body[class*="sh-visuals-projects-"] .detail-view article.node--view-mode-full .project-media-thumbnails a.active:before {
  content: "";
  position: absolute;
  top: -10px;
  left: 5px;
  right: 5px;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0.8);
  z-index: 1;
  height: 3px;
}

body[class*="path-portfolio-projects-"] .detail-view article.node--view-mode-full .project-media-thumbnails a.active img,
body[class*="path-portfolio-search-"] .detail-view article.node--view-mode-full .project-media-thumbnails a.active img,
body[class*="sh-visuals-projects-"] .detail-view article.node--view-mode-full .project-media-thumbnails a.active img {
  filter: saturate(1.5);
}

body[class*="path-portfolio-projects-"] .detail-view article.node--view-mode-full .project-media-thumbnails span.index,
body[class*="path-portfolio-search-"] .detail-view article.node--view-mode-full .project-media-thumbnails span.index,
body[class*="sh-visuals-projects-"] .detail-view article.node--view-mode-full .project-media-thumbnails span.index {
  font-size: 1.25rem;
  display: inline-block;
  padding: 5px;
  text-align: center;
  aspect-ratio: 1;
  width: 3ch;
  font-weight: 300;
}

@media (min-width: 1024px) {
  body[class*="path-portfolio-projects-"] .detail-view article.node--view-mode-full .project-media-thumbnails span.index,
body[class*="path-portfolio-search-"] .detail-view article.node--view-mode-full .project-media-thumbnails span.index,
body[class*="sh-visuals-projects-"] .detail-view article.node--view-mode-full .project-media-thumbnails span.index {
    display: none;
  }
}

body[class*="path-portfolio-projects-"] .detail-view article.node--view-mode-full .project-media-thumbnails a.active span.index,
body[class*="path-portfolio-search-"] .detail-view article.node--view-mode-full .project-media-thumbnails a.active span.index,
body[class*="sh-visuals-projects-"] .detail-view article.node--view-mode-full .project-media-thumbnails a.active span.index {
  font-weight: 600;
}

body[class*="path-portfolio-projects-"] .detail-view article.node--view-mode-full .project-media-thumbnails img,
body[class*="path-portfolio-search-"] .detail-view article.node--view-mode-full .project-media-thumbnails img,
body[class*="sh-visuals-projects-"] .detail-view article.node--view-mode-full .project-media-thumbnails img {
  height: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  object-position: center center;
  z-index: -1;
  margin: 0 2.5px;
  border-radius: 5px;
  border: 1px solid rgba(255, 255, 255, 0.6);
}

@media (min-width: 1024px) {
  body[class*="path-portfolio-projects-"] .detail-view article.node--view-mode-full .project-media-thumbnails img,
body[class*="path-portfolio-search-"] .detail-view article.node--view-mode-full .project-media-thumbnails img,
body[class*="sh-visuals-projects-"] .detail-view article.node--view-mode-full .project-media-thumbnails img {
    display: inline-block !important;
  }
}

body[class*="path-portfolio-projects-"] .detail-view article.node--view-mode-full .project-media-thumbnails img:hover,
body[class*="path-portfolio-search-"] .detail-view article.node--view-mode-full .project-media-thumbnails img:hover,
body[class*="sh-visuals-projects-"] .detail-view article.node--view-mode-full .project-media-thumbnails img:hover {
  z-index: 1;
  transform: scale(1.1);
  transform-origin: 50% 50%;
}

@keyframes hide-project-media-thumbnails {
  to {
    opacity: 0;
  }
}

@media (min-width: 1024px) {
  body[class*="path-portfolio-projects-"] .detail-view,
body[class*="path-portfolio-search-"] .detail-view,
body[class*="sh-visuals-projects-"] .detail-view {
    height: 100%;
  }
}

body[class*="path-portfolio-projects-"] html,
body[class*="path-portfolio-search-"] html,
body[class*="sh-visuals-projects-"] 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[class*="path-portfolio-projects-"] body,
body[class*="path-portfolio-search-"] body,
body[class*="sh-visuals-projects-"] body {
  --fla-dock-height: 0px;
}

body[class*="path-portfolio-projects-"] body[data-fla-state*="do:1"],
body[class*="path-portfolio-search-"] body[data-fla-state*="do:1"],
body[class*="sh-visuals-projects-"] body[data-fla-state*="do:1"] {
  --fla-dock-height: var(--fla-footer-height);
}

body[class*="path-portfolio-projects-"] .project-prev-next,
body[class*="path-portfolio-search-"] .project-prev-next,
body[class*="sh-visuals-projects-"] .project-prev-next {
  --height: 30px;
  --width: 120px;
  position: fixed;
  left: 50%;
  top: calc(0.5 * var(--fla-header-height));
  margin-top: calc(var(--height)/-2);
  margin-left: calc(var(--width)/-2);
  width: var(--width);
  z-index: 1000;
  font-size: 44px;
  display: none;
  opacity: 0.618;
}

@media (min-width: 1600px) {
  body[class*="path-portfolio-projects-"] .project-prev-next,
body[class*="path-portfolio-search-"] .project-prev-next,
body[class*="sh-visuals-projects-"] .project-prev-next {
    display: flex;
    display: none;
  }
}

body[class*="path-portfolio-projects-"] .project-prev-next:hover,
body[class*="path-portfolio-search-"] .project-prev-next:hover,
body[class*="sh-visuals-projects-"] .project-prev-next:hover {
  opacity: 1;
}

body[class*="path-portfolio-projects-"] .project-prev-next i,
body[class*="path-portfolio-search-"] .project-prev-next i,
body[class*="sh-visuals-projects-"] .project-prev-next i {
  filter: invert(0);
  cursor: pointer;
}

/*# sourceMappingURL=fla-portfolio-projects.css.map */