:root {
  --gutt-fw-bold: bold;
}

.t-white {
  --color-background: var(--gutt-color-white);
  --color-background-hover: var(--gutt-color-gray-light);
  --color-text: var(--gutt-color-black);
  --color-text-muted: var(--gutt-color-gray-dark);
  --color-text-accent: var(--gutt-color-black);
  --color-text-heading: var(--gutt-color-black);
  --color-text-link: var(--gutt-color-navy);
  --color-text-link-hover: var(--gutt-color-violet);
  --color-text-link-active: var(--gutt-color-violet);
  --color-border: var(--gutt-color-gray);
  --color-border-accent: var(--gutt-color-violet);
  --button-bg-color: var(--gutt-color-navy);
  --button-text-color: var(--gutt-color-white);
  --button-bg-color-hover: var(--gutt-color-violet);
  --button-text-color-hover: var(--gutt-color-white);
  --button-bg-color-secondary: var(--gutt-color-violet);
  --button-text-color-secondary: var(--gutt-color-white);
  --button-bg-color-secondary-hover: var(--gutt-color-navy);
  --button-text-color-secondary-hover: var(--gutt-color-white);
  --button-bg-color-accent: var(--gutt-color-lime-green);
  --button-text-color-accent: var(--gutt-color-navy);
  --button-bg-color-accent-hover: var(--gutt-color-lime-green);
  --button-text-color-accent-hover: var(--gutt-color-navy);
  --button-bg-color-muted: var(--gutt-color-gray-light);
  --button-text-color-muted: var(--gutt-color-navy);
  --button-bg-color-muted-hover: var(--gutt-color-gray-light);
  --button-text-color-muted-hover: var(--gutt-color-navy);
  --button-bg-color-outline: var(--color-background);
  --button-text-color-outline: var(--color-text-link);
  --button-border-outline: var(--gutt-color-violet);
  --button-bg-color-outline-hover: var(--color-background);
  --button-text-color-outline-hover: var(--color-text-link-hover);
}

.t-gray-light {
  --color-background: var(--gutt-color-gray-light);
  --color-background-hover: var(--gutt-color-gray-lightest);
}

.t-gray-lightest {
  --color-background: var(--gutt-color-gray-lightest);
  --color-background-hover: var(--gutt-color-gray-light);
}

.t-navy {
  --color-accent: var(--gutt-color-lime-green);
  --color-background: var(--gutt-color-navy);
  --color-background-hover: var(--gutt-color-violet);
  --color-border: var(--gutt-color-gray);
  --color-border-accent: var(--gutt-color-violet);
  --color-text: var(--gutt-color-white);
  --color-text-heading: var(--gutt-color-white);
  --color-text-link: var(--gutt-color-white);
  --color-text-link-hover: var(--gutt-color-white);
  --color-text-link-active: var(--gutt-color-white);
  --title-color-text-link: var(--gutt-color-white);
  --title-color-text-link-hover: var(--gutt-color-white);
  --button-bg-color: var(--gutt-color-violet);
  --button-text-color: var(--gutt-color-white);
  --button-bg-color-hover: var(--gutt-color-black);
  --button-text-color-hover: var(--gutt-color-white);
  --button-bg-color-secondary: var(--gutt-color-white);
  --button-text-color-secondary: var(--gutt-color-navy);
  --button-bg-color-secondary-hover: var(--gutt-color-periwinkle);
  --button-text-color-secondary-hover: var(--gutt-color-navy);
}

.t-violet {
  --color-accent: var(--gutt-color-lime-green);
  --color-background: var(--gutt-color-violet);
  --color-background-hover: var(--gutt-color-navy);
  --color-border: var(--gutt-color-gray);
  --color-text: var(--gutt-color-white);
  --color-text-bold: var(--gutt-color-white);
  --color-text-heading: var(--gutt-color-white);
  --color-text-link: var(--gutt-color-white);
  --color-text-link-hover: var(--gutt-color-white);
  --color-text-link-active: var(--gutt-color-white);
  --title-color-text-link: var(--gutt-color-white);
  --title-color-text-link-hover: var(--gutt-color-white);
  --button-bg-color: var(--gutt-color-navy);
  --button-text-color: var(--gutt-color-white);
  --button-bg-color-hover: var(--gutt-color-black);
  --button-text-color-hover: var(--gutt-color-white);
  --button-bg-color-secondary: var(--gutt-color-white);
  --button-text-color-secondary: var(--gutt-color-navy);
  --button-bg-color-secondary-hover: var(--gutt-color-periwinkle);
  --button-text-color-secondary-hover: var(--gutt-color-navy);
}

.t-lime {
  --color-accent: var(--gutt-color-navy);
  --color-background: var(--gutt-color-lime-green);
  --color-background-hover: var(--gutt-color-sea-green);
  --color-border: var(--gutt-color-gray);
  --button-bg-color-accent: var(--gutt-color-white);
  --button-text-color-accent: var(--gutt-color-navy);
  --button-bg-color-accent-hover: var(--gutt-color-periwinkle);
  --button-text-color-accent-hover: var(--gutt-color-navy);
}

.t-pane {
  background-color: var(--color-background);
}

.t-header-waves {
  background-image: -webkit-gradient(linear, left top, right top, from(#F7F8FC), to(rgba(247, 248, 252, 0))), url("/themes/custom/gutt/images/backgrounds-2024/header-waves.svg");
  background-image: linear-gradient(90deg, #F7F8FC 0%, rgba(247, 248, 252, 0) 100%), url("/themes/custom/gutt/images/backgrounds-2024/header-waves.svg");
  background-repeat: no-repeat;
  background-size: cover;
}

.t-feature-waves {
  background-image: url("/themes/custom/gutt/images/backgrounds-2024/feature-waves.svg");
  background-repeat: no-repeat;
  background-size: cover;
  background-color: var(--color-background);
  padding-top: var(--gutt-space-60);
  padding-bottom: var(--gutt-space-60);
}

.t-pane-rounded {
  border-radius: 8px;
}

.t-bg-isometric-grid {
  background-color: transparent;
  position: relative;
  z-index: 0;
}

.t-bg-isometric-grid:before {
  content: "";
  display: block;
  width: 100%;
  height: 300px;
  background-position: center;
  background-image: url("data:image/svg+xml;charset=utf-8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%20%3C%21--%20Generator%3A%20Adobe%20Illustrator%2019.1.0%2C%20SVG%20Export%20Plug-In%20.%20SVG%20Version%3A%206.00%20Build%200%29%20%20--%3E%20%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20width%3D%2267px%22%20height%3D%22101px%22%20viewBox%3D%220%200%2067%20101%22%20enable-background%3D%22new%200%200%2067%20101%22%20xml%3Aspace%3D%22preserve%22%3E%20%3Cpath%20d%3D%22M67%2C12.4v-1.1L35.5%2C0h-3l-32%2C11.5L0%2C11.3v1.1v37.4v1.4v37.4v1.1l0.5-0.2l32%2C11.5h3L67%2C89.7v-1.1l-32.5%2C11.6V62.9L67%2C51.2%20%20v-1.4L34.5%2C38.1V0.7L67%2C12.4z%20M1%2C12.4L33.5%2C0.7v37.4L1%2C49.8V12.4z%20M33.5%2C100.3L1%2C88.6V51.2l32.5%2C11.6V100.3z%20M66%2C50.5L34%2C62L2%2C50.5%20%20L34%2C39L66%2C50.5z%22%2F%3E%20%3C%2Fsvg%3E%20");
  background-position: 50% -25px;
  background-repeat: repeat !important;
  bottom: 0;
  margin: auto;
  opacity: 0.5;
  position: absolute;
  z-index: -2;
}

.t-bg-isometric-grid:after {
  content: "";
  display: block;
  width: 100%;
  height: 300px;
  background-position: center;
  background-image: -webkit-gradient(linear, left bottom, left top, from(rgba(244, 244, 244, 0.8)), to(#fff));
  background-image: linear-gradient(to top, rgba(244, 244, 244, 0.8), #fff);
  background-repeat: repeat !important;
  bottom: 0;
  margin: auto;
  position: absolute;
  z-index: -2;
}

.t-prism {
  background-image: url("/themes/custom/gutt/images/guttmacher-explorettopics.png");
  background-repeat: no-repeat;
  background-size: cover;
}

.t-skewed {
  position: relative;
  padding-top: 72px;
  padding-bottom: 72px;
  z-index: 1;
}

.t-skewed:after {
  content: "";
  display: block;
  height: 100%;
  width: 100%;
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background-position: center;
  background-color: var(--color-background);
  position: absolute;
  top: 0;
  -webkit-transform: skewY(1.5deg);
      -ms-transform: skewY(1.5deg);
          transform: skewY(1.5deg);
  z-index: -1;
}

.section--green {
  background-color: var(--color-green-90);
}

.section--teal {
  background-color: var(--color-teal-90);
}

.section--padding {
  padding: 4rem 0;
}