@charset "UTF-8";
/******************************************************************
Site Name:
Author:

Stylesheet: Variables

Here is where we declare all our variables like colors, fonts,
base values, and defaults. We want to make sure this file ONLY
contains variables that way our files don't get all messy.
No one likes a mess.

******************************************************************/
/*********************
COLORS
Need help w/ choosing your colors? Try this site out:
http://0to255.com/
*********************/
/*
Here's a great tutorial on how to
use color variables properly:
http://sachagreif.com/sass-color-variables/
*/
/******************************************************************
Site Name: 
Author: 

Stylesheet: Typography

******************************************************************/
@font-face {
  font-family: 'Bw Gradual';
  src: url("../fonts/BwGradual-Bold.woff2") format("woff2"), url("../fonts/BwGradual-Bold.woff") format("woff");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Bw Gradual';
  src: url("../fonts/BwGradual-Light.woff2") format("woff2"), url("../fonts/BwGradual-Light.woff") format("woff");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Bw Gradual';
  src: url("../fonts/BwGradual-Regular.woff2") format("woff2"), url("../fonts/BwGradual-Regular.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/*********************
FONT STACKS
*********************/
/*
 Commented out since WP uses system fonts now but if you can't let go I won't be upset. 
*/
/*
some nice typographical defaults
more here: http://www.newnet-soft.com/blog/csstypography
*/
p {
  -ms-word-wrap: break-word;
  word-wrap: break-word;
  word-break: break-word;
  -webkit-hyphens: none;
  -moz-hyphens: none;
  hyphens: none;
  -webkit-hyphenate-before: 2;
  -webkit-hyphenate-after: 3;
  hyphenate-lines: 3;
  -webkit-font-feature-settings: "liga", "dlig";
  -moz-font-feature-settings: "liga=1, dlig=1";
  -ms-font-feature-settings: "liga", "dlig";
  -o-font-feature-settings: "liga", "dlig";
  font-feature-settings: "liga", "dlig";
}

.block-client-logos {
  width: 100%;
  margin-top: 2rem;
}

.block-client-logos img {
  max-width: 100%;
  max-height: 70px;
}

.editor-styles-wrapper .block-client-logos {
  padding: 0 3rem;
}

@media only screen and (min-width: 1030px) {
  /* Marquee styles */
  .marquee {
    --gap: 1rem;
    position: relative;
    display: flex;
    overflow: hidden;
    user-select: none;
    gap: var(--gap);
  }
  .marquee__content {
    flex-shrink: 0;
    display: flex;
    justify-content: space-around;
    gap: var(--gap);
    min-width: 100%;
    list-style: none;
    padding: 0;
  }
  @keyframes scroll {
    from {
      transform: translateX(0);
    }
    to {
      transform: translateX(calc(-100% - var(--gap)));
    }
  }
  /* Enable animation */
  .enable-animation .marquee__content {
    animation: scroll 45s linear infinite;
  }
  /* Reverse animation */
  .marquee--reverse .marquee__content {
    animation-direction: reverse;
  }
  /* Pause on hover */
  .marquee--hover-pause:hover .marquee__content {
    animation-play-state: paused;
  }
  /* Attempt to size parent based on content. Keep in mind that the parent width is equal to both content containers that stretch to fill the parent. */
  .marquee--fit-content {
    max-width: fit-content;
  }
  /* A fit-content sizing fix: Absolute position the duplicate container. This will set the size of the parent wrapper to a single child container. Shout out to Olavi's article that had this solution 👏 @link: https://olavihaapala.fi/2021/02/23/modern-marquee.html  */
  .marquee--pos-absolute .marquee__content:last-child {
    position: absolute;
    top: 0;
    left: 0;
  }
  /* Enable position absolute animation on the duplicate content (last-child) */
  .enable-animation .marquee--pos-absolute .marquee__content:last-child {
    animation-name: scroll-abs;
  }
  .marquee__content > * {
    flex: 0 0 auto;
    color: white;
    margin: 2px;
    padding: 1rem 2rem;
    border-radius: 0.25rem;
    text-align: center;
    width: 20vw;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

/* Pause animation when reduced-motion is set */
@media (prefers-reduced-motion: reduce) {
  .marquee__content {
    animation-play-state: paused !important;
  }
}

@keyframes scroll-abs {
  from {
    transform: translateX(calc(100% + var(--gap)));
  }
  to {
    transform: translateX(0);
  }
}

@media only screen and (min-width: 768px) {
  .block-client-logos {
    margin-top: 2rem;
  }
  .block-client-logos img {
    max-width: 250px;
    max-height: 100px;
  }
}

@media only screen and (max-width: 767px) {
  .block-client-logos {
    margin-top: 2rem;
  }
  .block-client-logos .marquee__content {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 1.5rem;
    align-items: center;
    justify-content: center;
    list-style: none;
    padding: 0;
  }
  .block-client-logos .marquee__content li {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .block-client-logos .marquee__content:nth-of-type(2) {
    display: none;
  }
}