/* global */
/*

Small	sm	≥576px
Medium	md	≥768px
Large	lg	≥992px
Extra large	xl	≥1200px
Extra extra large	xxl	≥1400px

*/
/* colors */
:root {
  --color-primary: #fcce01;
  --color-primary--hover: #fcda2a;
  --color-primary: hsl(49, 99%, 50%);
  --color-primary--hover: hsl(50, 97%, 58%);
  --color-primary-400: hsl(49, 99%, 40%);
  --color-primary-500: hsl(49, 99%, 50%);
  --color-primary-600: hsl(49, 99%, 60%);
  --color-black: hsl(0, 0%, 0%);
  --color-neutral-100: hsl(0, 0%, 10%);
  --color-neutral-200: hsl(0, 0%, 20%);
  --color-neutral-300: hsl(0, 0%, 30%);
  --color-neutral-400: hsl(0, 0%, 40%);
  --color-neutral-500: hsl(0, 0%, 50%);
  --color-neutral-600: hsl(0, 0%, 60%);
  --color-neutral-700: hsl(0, 0%, 70%);
  --color-neutral-800: hsl(0, 0%, 80%);
  --color-neutral-900: hsl(0, 0%, 90%);
  --color-white: hsl(0, 0%, 100%);
  --color-warning: hsl(39, 100%, 50%);
  --color-danger: hsl(0, 100%, 50%);
  --color-success: hsl(120, 100%, 36%);
  --text-default: var(--color-neutral-200);
  --bg-default: var(--color-white);
  --bg-primary: var(--color-primary);
  --border-default: var(--color-neutral-900);
}
/* fonts */
@font-face {
  font-family: 'Inter var';
  font-weight: 100 900;
  font-style: normal;
  font-named-instance: 'Regular';
  src: url("fonts/Inter-upright.var.woff2") format("woff2 supports variations(gvar)"), url("fonts/Inter-upright.var.woff2") format("woff2-variations"), url("fonts/Inter-upright.var.woff2") format("woff2");
}
@font-face {
  font-family: 'Inter var';
  font-weight: 100 900;
  font-style: italic;
  font-named-instance: 'Italic';
  src: url("fonts/Inter-italic.var.woff2") format("woff2 supports variations(gvar)"), url("fonts/Inter-italic.var.woff2") format("woff2-variations"), url("fonts/Inter-italic.var.woff2") format("woff2");
}
.oswald-400 {
  font-family: "Oswald", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}
:root {
  --font-family--sans: 'Inter var', sans-serif;
  --font-size--base: 1rem;
  --font-size--ratio: 1.1;
  --font-size--xs: calc((var(--font-size--base) / var(--font-size--ratio)) / var(--font-size--ratio) / var(--font-size--ratio));
  --font-size--sm: calc(var(--font-size--base) / var(--font-size--ratio));
  --font-size--md: var(--font-size--base);
  --font-size--lg: calc(var(--font-size--md) * var(--font-size--ratio));
  --font-size--xl: calc(var(--font-size--lg) * var(--font-size--ratio));
  --font-size--xxl: calc(var(--font-size--xl) * var(--font-size--ratio));
  --font-size--xxxl: calc(var(--font-size--xxl) * var(--font-size--ratio));
}
.font-size--xs {
  font-size: var(--font-size--xs);
}
.font-size--sm {
  font-size: var(--font-size--sm);
}
.font-size--md {
  font-size: var(--font-size--md);
}
.font-size--lg {
  font-size: var(--font-size--lg);
}
.font-size--xl {
  font-size: var(--font-size--xl);
}
.font-size--xxl {
  font-size: var(--font-size--xxl);
}
.font-size--xxxl {
  font-size: var(--font-size--xxxl);
}
/* sizes */
:root {
  --size--none: 0;
  --size--xxs: 0.125rem;
  --size--xs: 0.25rem;
  --size--sm: 0.5rem;
  --size--md: 1rem;
  --size--lg: 1.5rem;
  --size--xl: 3rem;
  --size--xxl: 5rem;
}
.demo-size-gallery {
  display: flex;
  gap: 1rem;
}
.demo-size {
  --size: var(--size--none);
  width: var(--size);
  height: var(--size);
  background-color: #d0d4fe;
  border: 1px solid #bbbee4;
}
.demo-size--xxs {
  --size: var(--size--xxs);
}
.demo-size--xs {
  --size: var(--size--xs);
}
.demo-size--sm {
  --size: var(--size--sm);
}
.demo-size--md {
  --size: var(--size--md);
}
.demo-size--lg {
  --size: var(--size--lg);
}
.demo-size--xl {
  --size: var(--size--xl);
}
.demo-size--xxl {
  --size: var(--size--xxl);
}
/* shadows */
/* reset */
/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}
/* Make images easier to work with */
img,
picture {
  max-width: 100%;
  display: block;
}
/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
  font-family: inherit;
  font-size: inherit;
}
/* shadows */
.shadow-light {
  box-shadow: rgba(14, 63, 126, 0.04) 0px 0px 0px 1px, rgba(42, 51, 69, 0.04) 0px 1px 1px -0.5px, rgba(42, 51, 70, 0.04) 0px 3px 3px -1.5px, rgba(42, 51, 70, 0.04) 0px 6px 6px -3px, rgba(14, 63, 126, 0.04) 0px 12px 12px -6px, rgba(14, 63, 126, 0.04) 0px 24px 24px -12px;
}
/* type */
body {
  font-family: var(--font-family--sans);
  font-size: 1rem;
}
.in-font-heading-xxl {
  font-size: clamp(1.75rem, 8vw, 6.875rem);
  font-weight: 500;
  line-height: 90%;
  margin-top: 0;
  margin-bottom: 0.25rem;
}
.in-font-heading-xl {
  font-size: clamp(1.5rem, 7vw, 6.25rem);
  font-weight: 500;
  line-height: 95%;
  margin-top: 0;
  margin-bottom: 0.25rem;
}
.in-font-heading-l {
  font-size: 5.34rem;
  font-size: clamp(1.375rem, 6vw, 5.34rem);
  font-weight: 500;
  line-height: 95%;
  margin-top: 0;
  margin-bottom: 0.25rem;
}
.in-font-heading-m-l {
  font-size: 3.75rem;
  font-size: clamp(1.5rem, 4vw, 3.75rem);
  font-weight: 500;
  line-height: 90%;
  margin-top: 0;
  margin-bottom: 0.25rem;
}
.in-font-heading-m {
  font-size: 3.5rem;
  font-size: clamp(1.5rem, 3vw, 3.5rem);
  font-weight: 500;
  line-height: 90%;
  margin-top: 0;
  margin-bottom: 0.25rem;
}
.in-font-heading-sm {
  font-size: clamp(1.125rem, 3vw, 2.625rem);
  font-weight: 500;
  line-height: 0.9;
  margin-bottom: 0;
}
.in-font-text-xxl {
  font-size: 2.625rem;
  font-weight: 500;
  line-height: 0.9;
  margin-bottom: 0;
}
.in-font-text-xl {
  font-size: clamp(1.25rem, 1.5vw, 1.5rem);
  font-weight: 500;
  line-height: 1.3;
}
.in-font-text-l {
  font-size: 1.125rem;
  font-size: clamp(1rem, 2vw, 1.25rem);
  font-weight: 500;
  line-height: 1.2;
}
.in-font-text-m {
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.6;
}
.in-font-text-sm-con {
  font-size: 1rem;
  font-family: "Oswald", sans-serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;
  text-transform: uppercase;
}
.hero h1 {
  text-transform: uppercase;
  text-shadow: 0px 0px 5px hsla(0, 0%, 20%, 0.42);
}
.hero.veiligheidsbladen h1 {
  text-shadow: none;
}
.in-text-over-image {
  text-shadow: 1px 1px 3px hsla(0, 0%, 20%, 0.2);
}
p,
ul,
ol {
  font-weight: 400;
  font-size: 1.25rem;
  font-size: clamp(1rem, 1.25vw, 1.3rem);
  line-height: 1.5em;
  padding: 0;
  margin-bottom: 1.25em;
}
/* 

font-family: Neue Montreal;
font-weight: 500;
font-size: 110px;
line-height: 90%;
letter-spacing: 0%;


font-family: Neue Montreal;
font-weight: 500;
font-size: 100px;
line-height: 90%;
letter-spacing: 0%;

font-family: Neue Montreal;
font-weight: 500;
font-size: 60px;
line-height: 100%;
letter-spacing: 0%;



*/
/* layout */
.hero--sustainability {
  background-image: url('../img/headers/header_sustainability07.jpg');
  background-position: top;
  background-color: forestgreen;
}
.hero.Mobility {
  background-image: url('/img/backgrounds/mobiliteit-03.jpg');
}
.hero.Construction {
  background-image: url('/img/headers/hero_construction.jpg');
}
.i-content--sustainability {
  display: grid;
  grid-template-columns: auto;
  gap: 2rem;
}
.i-content--sustainability .i-content__section {
  display: grid;
  grid-template-columns: auto;
  grid-template-rows: auto;
  gap: 1rem;
  grid-template-areas: "title" "content" "image";
}
.i-content--sustainability .i-content__section h2 {
  margin-bottom: 0;
  grid-area: title;
  padding: 0.5rem 1rem;
}
.i-content--sustainability .i-content__section .content {
  grid-area: content;
  padding: 0.75rem 1rem 1.5rem 1rem;
}
.i-content--sustainability .i-content__section .image {
  grid-area: image;
  align-content: flex-start;
}
.i-content--sustainability .i-content__section .image--eco {
  display: grid;
  grid-template-columns: 1fr 2fr;
  grid-template-rows: auto auto;
  grid-template-areas: "img01 img01" "img02 img03";
  gap: 1.5rem;
}
.i-content--sustainability .i-content__section .image--eco .img01 {
  grid-area: img01;
}
.i-content--sustainability .i-content__section .image--eco .img02 {
  grid-area: img02;
}
.i-content--sustainability .i-content__section .image--eco .img03 {
  grid-area: img03;
}
@media screen and (min-width: 40.063em) {
  .i-content--sustainability .i-content__section {
    grid-template-columns: 2fr 3fr 3fr 2fr;
    grid-template-rows: auto auto;
    grid-template-areas: ". title title title" ". title title title" "image image content content";
    gap: 0;
  }
  .i-content--sustainability .i-content__section .content {
    padding: 1rem 2.5rem 1rem 2.5rem;
  }
  .i-content--sustainability .i-content__section .image {
    padding-top: 1rem;
  }
  .i-content--sustainability .i-content__section h2 {
    padding: 1rem 2.5rem;
  }
}
@media screen and (min-width: 40.063em) {
  .i-content--sustainability .i-content__section--alt-no-image {
    grid-template-columns: 2fr 3fr 3fr 2fr;
    grid-template-areas: ". title title ." ". content content .";
  }
}
.i-content--sustainability .i-content__section--variant-01 {
  gap: 0;
}
.i-content--sustainability .i-content__section--variant-01 .i-content__color-block {
  background-color: var(--color-primary);
  grid-column-start: 1;
  grid-column-end: -1;
  grid-row-start: 1;
  grid-row-end: 4;
}
@media screen and (min-width: 40.063em) {
  .i-content--sustainability .i-content__section--variant-01 {
    grid-template-columns: 2fr 3fr 3fr 2fr;
    grid-template-rows: auto auto auto;
    grid-template-areas: ". title title title" "image image content content" "image image . .";
    background-color: transparent;
  }
  .i-content--sustainability .i-content__section--variant-01 .i-content__color-block {
    grid-column-start: 2;
    grid-column-end: 5;
    grid-row-start: 1;
    grid-row-end: 3;
  }
}
@media screen and (min-width: 40.063em) {
  .i-content--sustainability .i-content__section--variant-02 {
    grid-template-columns: 2fr 3fr 3fr 2fr;
    grid-template-rows: auto auto auto;
    grid-template-areas: ". title title title" ". content content image" ". . . image";
  }
}
.i-content--sustainability .i-content__section--variant-02 .image--tribitec {
  display: grid;
  grid-template-columns: auto;
  grid-template-rows: auto auto;
}
@media screen and (min-width: 40.063em) {
  .i-content--sustainability .i-content__section--variant-03 {
    grid-template-columns: 2fr 2fr 2fr 4fr;
    grid-template-rows: auto auto auto;
    grid-template-areas: ". title title title" ". content content image" ". . . image";
  }
}
.brancheHeader {
  margin-top: 2.5em;
  text-transform: uppercase;
}
body {
  margin: 0;
  padding: 0;
  background-color: #fff;
}
.wrapper {
  max-width: 1440px;
  background-color: white;
  margin-left: auto;
  margin-right: auto;
}
.wrapper-wide {
  max-width: auto;
  background-color: white;
}
.i-header,
.i-container,
.footer-wrapper {
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
}
.i-header-wrapper {
  padding-top: 1rem;
  padding-bottom: 1rem;
  padding-left: 1.5vw;
  padding-right: 1.5vw;
}
@media screen and (min-width: 640px) {
  .i-header-wrapper {
    padding-top: 1.625rem;
    padding-bottom: 1.625rem;
    padding-left: 1.625rem;
    padding-right: 1.625rem;
  }
}
.i-header-wrapper .i-header {
  background-color: #fff;
}
@media screen and (min-width: 800px) {
  .i-header-wrapper .i-header {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: auto;
    grid-template-areas: "logo nav nav nav nav secondarynev";
  }
}
@media screen and (min-width: 960px) {
  .i-header-wrapper .i-header {
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: auto;
    grid-template-areas: "logo logo nav nav nav secondarynev";
  }
}
.i-header-wrapper .i-header .i-header__logo {
  grid-area: logo;
  padding-right: 1rem;
}
.i-header-wrapper .i-header .i-header__logo .i-header__logo-link {
  max-width: 217px;
  display: block;
}
.i-header-wrapper .i-header .i-header__logo img {
  display: block;
  max-width: 217px;
}
.i-header-wrapper .i-header .i-header__nav {
  grid-area: nav;
}
.i-header-wrapper .i-header .i-header__nav ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto auto;
}
.i-header-wrapper .i-header .i-header__nav ul li:first-child {
  background-color: bisque;
  display: none;
}
.i-header-wrapper .i-header .i-header__nav a {
  display: flex;
  justify-content: space-between;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  padding-right: 0.5rem;
  margin-right: 0.5em;
  font-size: 0.875rem;
  line-height: 1;
  text-transform: uppercase;
  text-decoration: none;
  color: #292929;
  font-family: "Oswald", sans-serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;
  transition: all 0.2s ease-in-out;
  position: relative;
}
.i-header-wrapper .i-header .i-header__nav a::after {
  content: "+";
  font-family: "Inter var";
  font-weight: 400;
  line-height: 1;
  padding-left: 0.125rem;
  padding-right: 0.125rem;
}
.i-header-wrapper .i-header .i-header__nav a:hover:before,
.i-header-wrapper .i-header .i-header__nav a:active:before {
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
  background-color: var(--color-primary);
  width: 100%;
  animation-duration: 0.5s;
  animation-name: nav-active;
  animation-iteration-count: 1;
}
@keyframes nav-active {
  from {
    width: 1px;
    background-color: #dadada;
  }
  to {
    width: 100%;
    background-color: var(--color-primary);
  }
}
.i-header-wrapper .i-header .i-header__secondary-nav {
  grid-area: secondarynev;
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.i-header-wrapper .i-header .i-header__option {
  display: inline-flex;
}
.i-header-wrapper .i-header .i-header__option a {
  display: block;
  width: 1.25rem;
  height: 1.25rem;
  padding: 0.125rem;
  color: #000;
  border-radius: 3px;
}
.i-header-wrapper .i-header .i-header__option a svg {
  display: block;
  width: 100%;
  height: 100%;
  stroke-width: 3px;
}
.i-header-wrapper .i-header .i-header__option a span {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}
.i-header-wrapper .i-header .i-header__option a:hover {
  background-color: var(--color-primary);
}
.i-header-wrapper .i-header .i-header__country-language a {
  display: flex;
  align-items: center;
  padding: 0.125rem;
  font-size: 0.875rem;
  line-height: 1;
  font-family: "Oswald", sans-serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;
  text-transform: uppercase;
  text-decoration: none;
  color: #292929;
  gap: 0.125rem;
  border-radius: 3px;
}
.i-header-wrapper .i-header .i-header__country-language a > svg {
  width: 1rem;
  height: 1rem;
  margin-right: 0.125rem;
}
.i-header-wrapper .i-header .i-header__country-language a:hover {
  background-color: var(--color-primary);
}
.i-section-homepage {
  margin-bottom: 1.25rem;
  padding-left: 1.5vw;
  padding-right: 1.5vw;
}
@media screen and (min-width: 640px) {
  .i-section-homepage {
    padding-left: 1.625rem;
    padding-right: 1.625rem;
  }
}
.i-section-homepage--wide {
  padding-left: 0;
  padding-right: 0;
}
.i-section-homepage--blackbg {
  background-color: #292929;
}
.i-pim {
  background-color: aqua;
}
.i-container {
  --grid-gap: 0;
  border-radius: 5px;
}
.i-section-homepage--wide .i-container {
  border-radius: 0;
}
.i-container img {
  width: 100%;
  border-radius: 5px;
}
.i-container--grid-test {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 0.5fr 1fr auto;
  grid-template-areas: ". ." "content-a content-a" "content-b content-b";
}
@media screen and (min-width: 640px) {
  .i-container--grid-test {
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr;
    grid-template-areas: "content-a content-a content-b";
  }
}
.i-container--grid-test .content-a {
  grid-area: content-a;
  padding: 2vw;
  padding-right: 0.5vw;
  align-self: end;
  color: #fff;
  z-index: 2;
}
.i-container--grid-test .content-b {
  grid-area: content-b;
  padding: 2vw;
  padding-left: 0.5vw;
  align-self: end;
  justify-self: end;
  z-index: 2;
}
.i-container--grid-test .content-background {
  grid-column-start: 1;
  grid-column-end: -1;
  grid-row-start: 1;
  grid-row-end: -1;
}
.i-container--grid-test .content-background img,
.i-container--grid-test .content-background video {
  object-fit: cover;
  width: 100%;
  height: 100%;
  border-radius: 5px;
  max-width: none;
  margin-bottom: 0;
}
.i-container--globalpartner {
  display: grid;
  grid-template-columns: 1fr 2fr 1rem;
  grid-template-rows: 1fr;
  grid-template-areas: "image-partner content-partner .";
  background-color: hsl(0, 0%, 96%);
  background: linear-gradient(to right, hsl(0, 0%, 96%), hsl(0, 0%, 96%) 75%, hsl(0, 0%, 91%));
}
@media screen and (min-width: 640px) {
  .i-container--globalpartner {
    grid-template-columns: 6fr 5fr 1fr;
    grid-template-rows: 1fr;
    grid-template-areas: "image-partner content-partner .";
  }
}
@media screen and (min-width: 1120px) {
  .i-container--globalpartner {
    grid-template-columns: 3fr 2fr 1fr;
    grid-template-rows: 1fr;
    grid-template-areas: "image-partner content-partner .";
  }
}
.i-container--globalpartner .globalpartner__image {
  grid-area: image-partner;
  align-self: flex-start;
}
@media screen and (min-width: 1120px) {
  .i-container--globalpartner .globalpartner__image {
    align-self: center;
  }
}
.i-container--globalpartner .globalpartner__content {
  grid-area: content-partner;
  padding-top: 4vw;
  padding-bottom: 4vw;
  padding-left: 0;
  padding-right: 0;
}
.i-container--globalpartner .globalpartner__usplist {
  margin-top: 2rem;
  margin-bottom: 1.5rem;
  border-top: 1px solid hsl(0, 0%, 90%);
}
.i-container--globalpartner .globalpartner__usp {
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid hsl(0, 0%, 90%);
}
.i-container--globalpartner .globalpartner__usp > p {
  margin: 0;
}
.i-container--globalpartner .globalpartner__usp > h3 {
  margin-top: 0;
  margin-bottom: 0.75rem;
}
.i-container--solutions {
  display: grid;
  grid-template-columns: 2fr 1fr 2fr 2fr 2fr 2fr;
  grid-template-rows: auto auto;
  grid-template-areas: ". . heading heading heading ." "menu menu menu menu menu menu";
  padding: 1rem;
  background-color: #292929;
  color: #fff;
}
@media screen and (min-width: 640px) {
  .i-container--solutions {
    grid-template-columns: repeat(6, 1fr);
    grid-template-areas: ". . heading heading heading ." "menu menu menu menu menu menu";
  }
}
.i-container--solutions .solution-heading {
  padding-top: 3vw;
  padding-bottom: 3vw;
  grid-area: heading;
}
.i-container--solutions .solution-menu {
  grid-area: menu;
  padding-bottom: 4vw;
  border-top: 1px solid #4a4a4a;
}
.i-container--solutions .solution {
  display: grid;
  grid-template-columns: 2fr 1fr 2fr 2fr 2fr 2fr;
  grid-template-areas: "image . title title title icon";
  align-items: center;
  border-bottom: 1px solid #4a4a4a;
  text-decoration: none;
  color: inherit;
}
@media screen and (min-width: 640px) {
  .i-container--solutions .solution {
    grid-template-columns: repeat(6, 1fr);
    grid-template-areas: "image . title title title icon";
  }
}
.i-container--solutions .solution .solution__image {
  grid-area: image;
  padding: 1vw;
}
.i-container--solutions .solution .solution__title {
  grid-area: title;
  font-size: clamp(1.125rem, 3vw, 2.625rem);
}
.i-container--solutions .solution .solution__icon {
  grid-area: icon;
  text-align: right;
}
.i-container--solutions .solution .solution__icon svg {
  margin-right: 3vw;
  width: 3vw;
  height: 3vw;
}
.i-container--solutions .solution:hover,
.i-container--solutions .solution:active {
  color: #000;
  background-color: var(--color-primary);
  border-bottom-color: transparent;
  border-radius: 0.25rem;
}
.i-container--products {
  display: grid;
  grid-template-columns: 4vw 1fr 4vw;
  grid-template-rows: auto auto;
  grid-template-areas: ". heading ." "image image image";
  background-color: #fff;
}
@media screen and (min-width: 640px) {
  .i-container--products {
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: auto auto;
    grid-template-areas: ". . heading heading heading heading" "image image image image image image";
  }
}
.i-container--products .products-heading {
  grid-area: heading;
  padding-top: 6vw;
  padding-right: 3vw;
  padding-bottom: 3vw;
}
.i-container--products .products-heading__link {
  margin-top: 1.25rem;
}
.i-container--products .products-image {
  grid-area: image;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: 1fr auto;
}
@media screen and (min-width: 640px) {
  .i-container--products .products-image {
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: 1fr auto;
  }
}
.i-container--products .products-image .products-image__background {
  grid-column-start: 1;
  grid-column-end: -1;
  grid-row: 1/-1;
}
.i-container--products .products-image .products-image__background img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.i-container--products .products-image .i-action-bar {
  grid-column-start: ;
  grid-column: 2/-1;
  grid-row: 2/-1;
  display: flex;
  justify-content: flex-end;
  padding-right: 3vw;
  padding-bottom: 3vw;
}
@media screen and (min-width: 640px) {
  .i-container--products .products-image .i-action-bar {
    grid-column: span 4 / -1;
  }
}
.i-container--products .products-image .i-action-bar .action-info-snippet {
  width: 300px;
}
.i-container--productoverview {
  display: grid;
  grid-template-columns: 4vw 1fr 4vw;
  grid-template-rows: auto auto;
  grid-template-areas: ". heading ." "overview overview overview";
  background-color: #fff;
}
@media screen and (min-width: 640px) {
  .i-container--productoverview {
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: auto auto;
    grid-template-areas: ". . heading heading heading ." "overview overview overview overview overview overview";
  }
}
.i-container--productoverview .products-heading {
  grid-area: heading;
  padding-top: 6vw;
  padding-right: 3vw;
  padding-bottom: 3vw;
}
.i-container--productoverview .products-heading__link {
  margin-top: 1.25rem;
}
.i-container--productoverview .product-categories {
  grid-area: overview;
  position: relative;
  margin-bottom: 4rem;
  padding-left: 1.625rem;
}
.i-container--productoverview .slider-controls {
  display: inline-flex;
  gap: 0.25rem;
  position: absolute;
  left: auto;
  right: 1.625rem;
  top: -4.25rem;
}
.i-container--productoverview .slider-controls .slider-control {
  width: 3.125rem;
  height: 3.125rem;
  background-color: var(--color-primary);
  border: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  color: #000;
}
.i-container--productoverview .slider-controls .slider-control > svg {
  width: 1.5rem;
  height: 1.5rem;
}
.i-container--productoverview .slider-controls .slider-control:hover,
.i-container--productoverview .slider-controls .slider-control:active {
  background-color: var(--color-primary--hover);
  cursor: pointer;
  box-shadow: rgba(14, 63, 126, 0.04) 0px 0px 0px 1px, rgba(42, 51, 69, 0.04) 0px 1px 1px -0.5px, rgba(42, 51, 70, 0.04) 0px 3px 3px -1.5px, rgba(42, 51, 70, 0.04) 0px 6px 6px -3px, rgba(14, 63, 126, 0.04) 0px 12px 12px -6px, rgba(14, 63, 126, 0.04) 0px 24px 24px -12px;
}
.i-container--productoverview .solutions-container {
  display: flex;
  gap: 1rem;
  padding: 5px;
}
.i-container--productoverview .solutions-container .solution {
  flex: 0 0 21%;
  flex: 0 0 290px;
}
.i-container--productoverview .solutions-container .solution .solution__image {
  padding: 10px;
  border: 1px solid #EBEBEB;
  border-radius: 5px;
  margin-bottom: 1rem;
}
.i-container--productoverview .solutions-container .solution .solution__name {
  font-size: 1.45rem;
  color: #292929;
  text-align: center;
}
.i-container--productoverview .solutions-container .solution:hover,
.i-container--productoverview .solutions-container .solution:active {
  cursor: pointer;
}
.i-container--productoverview .solutions-container .solution:hover .solution__image,
.i-container--productoverview .solutions-container .solution:active .solution__image {
  box-shadow: rgba(14, 63, 126, 0.04) 0px 0px 0px 1px, rgba(42, 51, 69, 0.04) 0px 1px 1px -0.5px, rgba(42, 51, 70, 0.04) 0px 3px 3px -1.5px, rgba(42, 51, 70, 0.04) 0px 6px 6px -3px, rgba(14, 63, 126, 0.04) 0px 12px 12px -6px, rgba(14, 63, 126, 0.04) 0px 24px 24px -12px;
}
.i-container--values {
  background-color: #292929;
  color: #fff;
  padding: 2vw;
  margin-bottom: 3em;
}
.i-container--values .values-heading {
  margin-top: 3.5rem;
  margin-bottom: 2.5rem;
}
.i-container--values .values-content {
  display: grid;
  grid-template-rows: repeat(3, auto);
  grid-template-columns: 1fr;
  gap: 0.75rem;
  margin-bottom: 3.5rem;
}
@media screen and (min-width: 960px) {
  .i-container--values .values-content {
    grid-template-rows: auto;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
    min-height: 400px;
  }
}
.i-section-homepage .i-container--values {
  margin-bottom: 0;
}
.i-container--values .i-value {
  background-color: #4a4a4a;
  padding: 1.5rem;
  border-radius: 0.25rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: background-color 0.25s ease-in-out;
}
.i-container--values .i-value .i-value__nr {
  transition: all 2s ease-in-out;
}
.i-container--values .i-value .i-value__title {
  padding-right: 3vw;
  transition: margin 2s ease-in-out;
}
.i-container--values .i-value .i-value__content {
  display: none;
  opacity: 0;
  position: relative;
  transition: opactiy 2s ease-in-out;
}
.i-container--values .i-value:hover,
.i-container--values .i-value:active,
.i-container--values .i-value--active {
  background-color: var(--color-primary);
  color: #000;
}
.i-container--values .i-value:hover .i-value__nr,
.i-container--values .i-value:active .i-value__nr,
.i-container--values .i-value--active .i-value__nr {
  display: none;
  background-color: tomato;
}
.i-container--values .i-value:hover .i-value__title,
.i-container--values .i-value:active .i-value__title,
.i-container--values .i-value--active .i-value__title {
  margin-top: 0;
}
.i-container--values .i-value:hover .i-value__content,
.i-container--values .i-value:active .i-value__content,
.i-container--values .i-value--active .i-value__content {
  display: block;
  opacity: 1;
  top: 0;
  margin-top: 1em;
}
@media (pointer: coarse) {
  .i-container--values .i-value {
    background-color: var(--color-primary);
    color: #000;
  }
  .i-container--values .i-value .i-value__nr {
    display: none;
  }
  .i-container--values .i-value .i-value__title {
    margin-top: 0;
  }
  .i-container--values .i-value .i-value__content {
    display: block;
    opacity: 1;
    top: 0;
    margin-top: auto;
  }
}
.i-container--testimonials {
  background-color: #fff;
}
.i-container--testimonials .testimonials-heading {
  margin-top: 7rem;
  margin-bottom: 1.5rem;
  max-width: 600px;
}
.i-container--testimonials .testimonials-content {
  display: grid;
  grid-template-columns: 1fr;
  margin-bottom: 6rem;
}
@media screen and (min-width: 800px) {
  .i-container--testimonials .testimonials-content {
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
  }
}
.i-container--testimonials .testimonial {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  border-top: 1px solid #b8b8b8;
  padding-top: 1.5rem;
  padding-bottom: 2rem;
}
.i-container--testimonials .testimonial .testimonial__content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.i-container--testimonials .testimonial .testimonial__quote {
  font-size: clamp(1.25rem, 1.75vw, 1.5rem);
  font-weight: 500;
  line-height: 1.3;
  padding: 0;
  margin-top: 0;
  margin-bottom: 0.75rem;
  margin-left: 0;
  margin-right: 0;
  border: none;
  color: #222;
}
.i-container--testimonials .testimonial .testimonial__cite {
  font-style: normal;
}
.i-container--testimonials .testimonial .testimonial__cite > span:first-child {
  font-weight: 600;
  display: block;
}
.i-container--bookademo {
  display: grid;
  grid-template-columns: 2vw 1fr 6vw;
  grid-template-rows: 1fr 2fr;
  grid-template-areas: ". . . " ". bookademo .";
}
@media screen and (min-width: 800px) {
  .i-container--bookademo {
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: 1fr 1fr;
    grid-template-areas: ". . . . . ." ". . bookademo bookademo bookademo .";
  }
}
.i-container--bookademo .bookademo__image {
  grid-row: 1/-1;
  grid-column: 1/-1;
}
.i-container--bookademo .bookademo__image img,
.i-container--bookademo .bookademo__image video {
  object-fit: cover;
  width: 100%;
  height: 100%;
  border-radius: 5px;
  max-width: none;
  margin-bottom: 0;
  z-index: 1;
}
.i-container--bookademo .bookademo {
  grid-area: bookademo;
  padding-top: 3vw;
  padding-bottom: 3vw;
  z-index: 2;
}
.i-container--bookademo .bookademo h2 {
  color: #fff;
}
.i-container--bookademo .bookademo__link {
  margin-top: 1.5rem;
}
.container {
  --grid-gap: 1rem;
}
.container--layout-home-a {
  background-color: bisque;
  display: grid;
  gap: var(--grid-gap);
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  grid-template-areas: "marker" "content" "producthl" "opimage";
}
@media screen and (min-width: 640px) {
  .container--layout-home-a {
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-areas: "marker content content" "producthl opimage opimage";
  }
}
.container--layout-home-a .marker {
  grid-area: marker;
}
.container--layout-home-a .content {
  grid-area: content;
}
.container--layout-home-a .product-hightlight {
  grid-area: producthl;
}
.container--layout-home-a .opening-image {
  grid-area: opimage;
}
.container--layout-home-a img {
  max-width: 100%;
}
.container--segments {
  display: grid;
  gap: var(--grid-gap);
  grid-template-columns: 1fr;
  grid-template-rows: auto;
}
@media screen and (min-width: 640px) {
  .container--segments {
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-areas: "marker content content" "segmentov segmentov segmentov";
  }
}
.container--segments .marker {
  grid-area: marker;
}
.container--segments .content {
  grid-area: content;
}
.container--segments .segment-overview {
  grid-area: segmentov;
}
.container--values {
  display: grid;
  gap: var(--grid-gap);
  grid-template-columns: 1fr;
  grid-template-rows: auto;
}
@media screen and (min-width: 640px) {
  .container--values {
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto;
  }
}
.container--values .statement {
  grid-column: 1 / -1;
  grid-row: 1 / 2;
}
.container--values .statement h2.temp-large {
  font-size: 8rem;
  line-height: 1;
  margin: 0;
}
.container--values .content {
  grid-column: 2 / -1;
  grid-row: 2 / 3;
}
.container--values .banner {
  grid-column: 1 / -1;
  grid-row: 3 / 4;
  background-color: salmon;
  color: #fff;
  min-height: 30vh;
  display: grid;
}
@media screen and (min-width: 640px) {
  .container--values .banner {
    grid-template-columns: 1fr 2fr;
    grid-template-rows: 1;
    gap: 1rem;
    grid-template-areas: "marker content";
  }
}
.container--values .banner .marker {
  grid-area: marker;
  padding-left: 1rem;
}
.container--values .banner .content {
  grid-area: content;
  padding-right: 1rem;
  padding-bottom: 2rem;
}
.product-highlight {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  background-color: salmon;
}
.product-highlight .product-highlight__image {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
}
.product-highlight .product-highlight__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.product-highlight .product-highlight__product {
  display: flex;
  grid-column: 1 / 2;
  grid-row: 1 / 2;
  align-self: flex-end;
  justify-content: flex-end;
  padding: 1rem;
}
.product-info-snippet,
.action-info-snippet {
  background-color: #fff;
  border-radius: 5px;
  text-decoration: none;
  min-width: 220px;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  display: grid;
  grid-gap: 1rem;
  grid-template-columns: 50px 1fr 25px;
  align-items: center;
  color: #292929;
}
.product-info-snippet .snippet__img,
.action-info-snippet .snippet__img {
  width: 50px;
  height: 50px;
  border: 1px solid #dadada;
  border-radius: 3px;
}
.product-info-snippet .snippet__text,
.action-info-snippet .snippet__text {
  color: #B8B8B8;
}
.product-info-snippet .snippet__text > div:first-child,
.action-info-snippet .snippet__text > div:first-child {
  font-weight: 600;
  color: #292929;
}
.product-info-snippet:hover,
.action-info-snippet:hover,
.product-info-snippet:active,
.action-info-snippet:active {
  box-shadow: inset 0 0 0 3px var(--color-primary--hover);
}
.action-info-snippet {
  background-color: #fff;
  border-radius: 5px;
  text-decoration: none;
  min-width: 220px;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  display: grid;
  grid-gap: 1rem;
  grid-template-columns: 1fr 25px;
  align-items: center;
  color: #292929;
}
.action-info-snippet .snippet__img {
  width: 50px;
  height: 50px;
  border: 1px solid #dadada;
  border-radius: 3px;
}
.action-info-snippet .snippet__text {
  color: #B8B8B8;
}
.action-info-snippet .snippet__text > div:first-child {
  font-weight: 600;
  color: #292929;
}
.action-info-snippet:hover,
.action-info-snippet:active {
  box-shadow: inset 0 0 0 3px var(--color-primary--hover);
}
.opening-image img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}
.i-section--footer {
  margin-bottom: 0;
}
.footer-wrapper {
  color: #fff;
  background-color: #292929;
  padding-top: 3rem;
  padding-bottom: 1.5rem;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
.footer-wrapper hr {
  color: #434343;
  border-color: #434343;
  margin-top: 2.5rem;
  margin-bottom: 2rem;
}
.footer-wrapper a:not(.i-button) {
  color: #fff;
}
.footer-wrapper ul {
  list-style-type: none;
  padding: 0;
  margin-top: 1.4rem;
  margin-bottom: 1.4rem;
  margin-left: 0;
}
.footer-wrapper ul li {
  margin-bottom: 0.6rem;
}
.footer-wrapper ul a {
  text-decoration: none;
}
.footer-wrapper .footer-rowa {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto auto;
  grid-template-areas: "main" "address" "addresses";
  gap: 1em;
}
@media screen and (min-width: 1120px) {
  .footer-wrapper .footer-rowa {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    grid-template-areas: "main address" "addresses addresses";
  }
}
.footer-wrapper .footer-rowb {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto auto auto;
  grid-template-areas: "linka" "linkb" "linkc" "linkd";
  gap: 1em;
}
@media screen and (min-width: 640px) {
  .footer-wrapper .footer-rowb {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    grid-template-areas: "linka linkb" "linkc linkd";
  }
}
@media screen and (min-width: 1120px) {
  .footer-wrapper .footer-rowb {
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: auto;
    grid-template-areas: "linka linkb linkc linkd";
  }
}
.footer-wrapper .footer__main {
  grid-area: main;
  padding-right: 3rem;
}
.footer-wrapper .footer__main .button-container {
  margin-top: 1.25rem;
  margin-bottom: 2.5rem;
}
.footer-wrapper .footer__address {
  grid-area: address;
}
.footer-wrapper .footer__address p {
  line-height: 1.6;
}
.footer-wrapper .footer__addresses-wrapper {
  grid-area: addresses;
}
.footer-wrapper .footer__addresses {
  display: grid;
  grid-template-columns: auto;
  grid-template-rows: auto auto auto;
  gap: 2.5rem;
}
@media screen and (min-width: 640px) {
  .footer-wrapper .footer__addresses {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
  }
}
@media screen and (min-width: 1120px) {
  .footer-wrapper .footer__addresses {
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto;
  }
}
.footer-wrapper .footer__addresses .address-panel h3 {
  font-size: clamp(1.25rem, 1.5vw, 1.5rem);
  font-weight: 500;
  line-height: 1.3;
}
.footer-wrapper .footer__addresses .address-panel h3 span {
  font-size: 1rem;
  font-weight: 500;
  display: block;
}
.footer-wrapper .footer__addresses .address-panel .contact-info div {
  margin-bottom: 0.25rem;
}
.footer-wrapper .footer-block > div {
  font-weight: 600;
}
.footer-wrapper .footer__linka {
  grid-area: linka;
}
.footer-wrapper .footer__linkb {
  grid-area: linkb;
}
.footer-wrapper .footer__linkc {
  grid-area: linkc;
}
.footer-wrapper .footer__linkd {
  grid-area: linkd;
}
.footer-wrapper .footer__colofon {
  grid-area: colofon;
  font-family: "Oswald", sans-serif;
  text-transform: uppercase;
  display: flex;
  flex-direction: row;
  gap: 1rem;
}
.footer-wrapper .footer__colofon .search {
  display: inline-block;
}
.footer-wrapper .footer__colofon .search > svg {
  display: blockl;
  width: 1rem;
  height: 1rem;
}
/*
.segment-overview {

  margin-top: 2rem;
  margin-bottom: 2rem;

  grid-column: 1 / 3;
  grid-row: 2 / 3;


  @media screen and (min-width: 900px) {

    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: var(--grid-gap);
  }

}


.segment {

  border: 1px solid #ddd;
  border-radius: 5px;
  padding: 0.75rem;

  //display: grid;
  //grid-template-columns: 2fr 3fr;
  //gap: 1rem;


  @media screen and (min-width: 900px) {
  
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--grid-gap);

  }


  img {
    max-width: 100%;
  }

  .segment__title {
    position: relative;
    //temp
    background-color: bisque;

    align-self: center;
    text-align: right;

    padding-right: 2rem;

    .segment__number {
    
      background-color: salmon;
      position: absolute;
      top: -1.25rem;
      right: 2rem;
    
    }

    .segment__title-text {
      font-size: 1.5rem;
    }

  }


}

*/
/* buttons */
/*

  = style hierarchy: Primary, Secondary, Tertiary
  = states: normal, hover, active, disabled, focused, progress
  = types: filled, outlined, link
  = sizes: small, normal, large

*/
.i-button {
  text-decoration: none;
  border: none;
  display: inline-flex;
  justify-content: space-between;
  font-size: 0.75rem;
  line-height: 1;
  text-transform: uppercase;
  color: var(--text-default);
  background-color: var(--bg-default);
  border: 1px solid var(--border-default);
  border-radius: 4px;
  padding-block-start: 1.125rem;
  padding-block-end: 1.125rem;
  padding-inline-start: 1rem;
  padding-inline-end: 1rem;
}
.i-button svg {
  width: 0.75rem;
  height: 0.75rem;
}
.i-button:hover,
.i-button:active {
  transition: 0.2s all;
  background-color: var(--color-primary--hover);
  border-color: var(--color-primary--hover);
  color: #000;
  box-shadow: rgba(14, 63, 126, 0.04) 0px 0px 0px 1px, rgba(42, 51, 69, 0.04) 0px 1px 1px -0.5px, rgba(42, 51, 70, 0.04) 0px 3px 3px -1.5px, rgba(42, 51, 70, 0.04) 0px 6px 6px -3px, rgba(14, 63, 126, 0.04) 0px 12px 12px -6px, rgba(14, 63, 126, 0.04) 0px 24px 24px -12px;
}
.i-button--primary {
  color: var(--text-default);
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}
.i-button--icon-first {
  justify-content: flex-start;
}
.i-button--icon-first > svg {
  margin-right: 0.5rem;
}
.i-button-link {
  font-size: 1rem;
  font-weight: 600;
  text-transform: uppercase;
  color: #292929;
  text-decoration: underline;
  display: inline-flex;
  vertical-align: middle;
  line-height: 1;
  font-family: "Oswald", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
}
.i-button-link > span {
  display: inline-flex;
  width: 1.125rem;
  height: 1.125rem;
  margin-left: 0.5rem;
  margin-top: 0;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  background-color: var(--color-primary);
}
.i-button-link > span > svg {
  width: 80%;
  height: 80%;
  color: #000;
}
.discontinued-button {
  --button-border-width: 2px;
  --button-border-color: var(--interactive-color, black);
  --button-border-style: solid;
  --button-border-radius: 0.375rem;
  --button-color: #fff;
  --button-text-color: var(--interactive-color, black);
  --button-padding-block: 0.75rem;
  --button-padding-inline: 1rem;
  --button-font-size: 1.125rem;
  --button-hover-color: var(--interactive-color--hover);
  --button-active-color: var(--interactive-color--active);
  --button-inactive-color: var(--interactive-color--inactive);
  text-decoration: none;
  border: none;
  display: inline-flex;
  align-items: flex-start;
  font-size: var(--button-font-size);
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--button-text-color);
  background-color: var(--button-color);
  padding-block-start: var(--button-padding-block);
  padding-block-end: var(--button-padding-block);
  padding-inline-start: var(--button-padding-inline);
  padding-inline-end: var(--button-padding-inline);
  border-radius: var(--button-border-radius);
  border-width: var(--button-border-width);
  border-style: var(--button-border-style);
  border-color: var(--button-border-color);
}
.discontinued-button:hover {
  --interactive-color: var(--button-hover-color);
  cursor: pointer;
}
.discontinued-button:active {
  --interactive-color: var(--button-active-color);
}
.button--inactive {
  --interactive-color: var(--button-inactive-color);
  cursor: default;
}
.button--inactive:hover {
  cursor: default;
  --interactive-color: var(--button-inactive-color);
}
.button--primary {
  --button-color: var(--interactive-color, black);
  --button-text-color: white;
  --button-border-color: var(--interactive-color, black);
}
.button--secondary {
  --button-color: transparent;
  --button-text-color: var(--interactive-color, black);
  --button-border-color: var(--interactive-color, black);
}
.button--tertiary {
  --button-color: transparent;
  --button-text-color: var(--interactive-color, black);
  --button-border-color: transparent;
}
.button--small {
  --button-padding-block: 0.5rem;
  --button-padding-inline: 0.75rem;
  --button-font-size: 0.875rem;
}
.button--large {
  --button-padding-block: 1rem;
  --button-padding-inline: 1.5rem;
  --button-font-size: 1.125rem;
}
.button svg {
  display: inline-block;
  width: calc(1.5 * var(--button-font-size));
  height: calc(1.5 * var(--button-font-size));
  margin: 0;
}
.button svg:first-child {
  margin-inline-end: 0.5rem;
}
.button svg:last-child {
  margin-inline-start: 0.5rem;
}
.button--icon-only {
  padding-inline-start: var(--button-padding-block);
  padding-inline-end: var(--button-padding-block);
}
.button--icon-only svg:first-child,
.button--icon-only svg:last-child {
  margin-inline-start: 0;
  margin-inline-end: 0;
}
.button--icon-only span {
  display: none;
}
.button--full-width {
  width: 100%;
  text-align: center;
  justify-content: center;
}
.button-group {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.action-group {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.action-group .button {
  justify-content: center;
}
@media screen and (min-width: 576px) {
  .action-group {
    flex-direction: row;
    justify-content: flex-end;
  }
}
button[class*="-primary"] {
  background-color: red;
}