@charset "UTF-8";
/*!
 * ARTEFA
 *
 * @description artefa.be website
 * @author Xavier Mertens – xav@tix02.be
 * @site https://tix02.be
 * @link https://www.artefa.be
*/
:root {
  --color-theme-accent: #039bcf;
  --color-theme-primary: #0b1b41;
  --color-ui-danger: #d23838;
  --color-ui-valid: #4ac51e;
  --color-ui-warning: #e69a27;
  --color-ui-notice: #aca964;
  --color-grey-100: hsl(240, 13%, 95%);
  --color-grey-200: hsl(252, 8%, 88%);
  --color-grey-300: hsl(250, 5%, 77%);
  --color-grey-400: hsl(249, 5%, 71%);
  --color-grey-500: hsl(248, 4%, 64%);
  --color-grey-600: hsl(249, 3%, 40%);
  --color-grey-700: hsl(249, 5%, 29%);
  --color-grey-800: hsl(252, 5%, 20%);
  --color-grey-900: hsl(240, 3%, 13%);
}
.c-theme-accent {
  color: var(--color-theme-accent) !important;
}
.b-theme-accent {
  background-color: var(--color-theme-accent) !important;
}
.c-theme-primary {
  color: var(--color-theme-primary) !important;
}
.b-theme-primary {
  background-color: var(--color-theme-primary) !important;
}
.c-ui-danger {
  color: var(--color-ui-danger) !important;
}
.b-ui-danger {
  background-color: var(--color-ui-danger) !important;
}
.c-ui-valid {
  color: var(--color-ui-valid) !important;
}
.b-ui-valid {
  background-color: var(--color-ui-valid) !important;
}
.c-ui-warning {
  color: var(--color-ui-warning) !important;
}
.b-ui-warning {
  background-color: var(--color-ui-warning) !important;
}
.c-ui-notice {
  color: var(--color-ui-notice) !important;
}
.b-ui-notice {
  background-color: var(--color-ui-notice) !important;
}
.c-grey-100 {
  color: var(--color-grey-100) !important;
}
.b-grey-100 {
  background-color: var(--color-grey-100) !important;
}
.c-grey-200 {
  color: var(--color-grey-200) !important;
}
.b-grey-200 {
  background-color: var(--color-grey-200) !important;
}
.c-grey-300 {
  color: var(--color-grey-300) !important;
}
.b-grey-300 {
  background-color: var(--color-grey-300) !important;
}
.c-grey-400 {
  color: var(--color-grey-400) !important;
}
.b-grey-400 {
  background-color: var(--color-grey-400) !important;
}
.c-grey-500 {
  color: var(--color-grey-500) !important;
}
.b-grey-500 {
  background-color: var(--color-grey-500) !important;
}
.c-grey-600 {
  color: var(--color-grey-600) !important;
}
.b-grey-600 {
  background-color: var(--color-grey-600) !important;
}
.c-grey-700 {
  color: var(--color-grey-700) !important;
}
.b-grey-700 {
  background-color: var(--color-grey-700) !important;
}
.c-grey-800 {
  color: var(--color-grey-800) !important;
}
.b-grey-800 {
  background-color: var(--color-grey-800) !important;
}
.c-grey-900 {
  color: var(--color-grey-900) !important;
}
.b-grey-900 {
  background-color: var(--color-grey-900) !important;
}
:root {
  --fs-title-1: 1.5rem;
  --fs-text-lg: 1.125rem;
  --fs-text-md: 1rem;
  --fs-text-sm: 0.875rem;
  --fs-text-xs: 0.75rem;
  --fs-fluid-title-1: clamp(1rem, calc(0.857rem + 0.714vw), 1.5rem);
  --fs-fluid-text-lg: clamp(1rem, calc(0.964rem + 0.179vw), 1.125rem);
  --fs-fluid-text-md: clamp(0.875rem, calc(0.839rem + 0.179vw), 1rem);
  --fs-fluid-text-sm: clamp(0.75rem, calc(0.714rem + 0.179vw), 0.875rem);
  --fs-fluid-text-xs: clamp(0.688rem, calc(0.67rem + 0.089vw), 0.75rem);
  --lh-title-1: 1.2;
  --lh-text-lg: 1.5;
  --lh-text-md: 1.5;
  --lh-text-sm: 1.5;
  --lh-text-xs: 1.5;
  --fn-body: Arial, Helvetica, sans-serif;
}
.title-1 {
  font-size: var(--fs-title-1);
  line-height: var(--lh-title-1);
}
.text-lg {
  font-size: var(--fs-text-lg);
  line-height: var(--lh-text-lg);
}
.text-md {
  font-size: var(--fs-text-md);
  line-height: var(--lh-text-md);
}
.text-sm {
  font-size: var(--fs-text-sm);
  line-height: var(--lh-text-sm);
}
.text-xs {
  font-size: var(--fs-text-xs);
  line-height: var(--lh-text-xs);
}
.fluid-title-1 {
  font-size: var(--fs-fluid-title-1);
  line-height: var(--lh-title-1);
}
.fluid-text-lg {
  font-size: var(--fs-fluid-text-lg);
  line-height: var(--lh-text-lg);
}
.fluid-text-md {
  font-size: var(--fs-fluid-text-md);
  line-height: var(--lh-text-md);
}
.fluid-text-sm {
  font-size: var(--fs-fluid-text-sm);
  line-height: var(--lh-text-sm);
}
.fluid-text-xs {
  font-size: var(--fs-fluid-text-xs);
  line-height: var(--lh-text-xs);
}
:root {
  --spacer-2xs: 0.375rem;
  --spacer-xs: 0.75rem;
  --spacer-sm: 1.125rem;
  --spacer-md: 1.5rem;
  --spacer-lg: 2.25rem;
  --spacer-xl: 3rem;
  --spacer-2xl: 4.5rem;
  --grid-gap: var(--spacer-md);
}
.m-2xs {
  margin: var(--spacer-2xs);
}
.mh-2xs {
  margin-inline: var(--spacer-2xs);
}
.mv-2xs {
  margin-block: var(--spacer-2xs);
}
.mt-2xs {
  margin-top: var(--spacer-2xs);
}
.mb-2xs {
  margin-bottom: var(--spacer-2xs);
}
.ml-2xs {
  margin-left: var(--spacer-2xs);
}
.mr-2xs {
  margin-right: var(--spacer-2xs);
}
.p-2xs {
  padding: var(--spacer-2xs);
}
.ph-2xs {
  padding-inline: var(--spacer-2xs);
}
.pv-2xs {
  padding-block: var(--spacer-2xs);
}
.pt-2xs {
  padding-top: var(--spacer-2xs);
}
.pb-2xs {
  padding-bottom: var(--spacer-2xs);
}
.pl-2xs {
  padding-left: var(--spacer-2xs);
}
.pr-2xs {
  padding-right: var(--spacer-2xs);
}
.m-xs {
  margin: var(--spacer-xs);
}
.mh-xs {
  margin-inline: var(--spacer-xs);
}
.mv-xs {
  margin-block: var(--spacer-xs);
}
.mt-xs {
  margin-top: var(--spacer-xs);
}
.mb-xs {
  margin-bottom: var(--spacer-xs);
}
.ml-xs {
  margin-left: var(--spacer-xs);
}
.mr-xs {
  margin-right: var(--spacer-xs);
}
.p-xs {
  padding: var(--spacer-xs);
}
.ph-xs {
  padding-inline: var(--spacer-xs);
}
.pv-xs {
  padding-block: var(--spacer-xs);
}
.pt-xs {
  padding-top: var(--spacer-xs);
}
.pb-xs {
  padding-bottom: var(--spacer-xs);
}
.pl-xs {
  padding-left: var(--spacer-xs);
}
.pr-xs {
  padding-right: var(--spacer-xs);
}
.m-sm {
  margin: var(--spacer-sm);
}
.mh-sm {
  margin-inline: var(--spacer-sm);
}
.mv-sm {
  margin-block: var(--spacer-sm);
}
.mt-sm {
  margin-top: var(--spacer-sm);
}
.mb-sm {
  margin-bottom: var(--spacer-sm);
}
.ml-sm {
  margin-left: var(--spacer-sm);
}
.mr-sm {
  margin-right: var(--spacer-sm);
}
.p-sm {
  padding: var(--spacer-sm);
}
.ph-sm {
  padding-inline: var(--spacer-sm);
}
.pv-sm {
  padding-block: var(--spacer-sm);
}
.pt-sm {
  padding-top: var(--spacer-sm);
}
.pb-sm {
  padding-bottom: var(--spacer-sm);
}
.pl-sm {
  padding-left: var(--spacer-sm);
}
.pr-sm {
  padding-right: var(--spacer-sm);
}
.m-md {
  margin: var(--spacer-md);
}
.mh-md {
  margin-inline: var(--spacer-md);
}
.mv-md {
  margin-block: var(--spacer-md);
}
.mt-md {
  margin-top: var(--spacer-md);
}
.mb-md {
  margin-bottom: var(--spacer-md);
}
.ml-md {
  margin-left: var(--spacer-md);
}
.mr-md {
  margin-right: var(--spacer-md);
}
.p-md {
  padding: var(--spacer-md);
}
.ph-md {
  padding-inline: var(--spacer-md);
}
.pv-md {
  padding-block: var(--spacer-md);
}
.pt-md {
  padding-top: var(--spacer-md);
}
.pb-md {
  padding-bottom: var(--spacer-md);
}
.pl-md {
  padding-left: var(--spacer-md);
}
.pr-md {
  padding-right: var(--spacer-md);
}
.m-lg {
  margin: var(--spacer-lg);
}
.mh-lg {
  margin-inline: var(--spacer-lg);
}
.mv-lg {
  margin-block: var(--spacer-lg);
}
.mt-lg {
  margin-top: var(--spacer-lg);
}
.mb-lg {
  margin-bottom: var(--spacer-lg);
}
.ml-lg {
  margin-left: var(--spacer-lg);
}
.mr-lg {
  margin-right: var(--spacer-lg);
}
.p-lg {
  padding: var(--spacer-lg);
}
.ph-lg {
  padding-inline: var(--spacer-lg);
}
.pv-lg {
  padding-block: var(--spacer-lg);
}
.pt-lg {
  padding-top: var(--spacer-lg);
}
.pb-lg {
  padding-bottom: var(--spacer-lg);
}
.pl-lg {
  padding-left: var(--spacer-lg);
}
.pr-lg {
  padding-right: var(--spacer-lg);
}
.m-xl {
  margin: var(--spacer-xl);
}
.mh-xl {
  margin-inline: var(--spacer-xl);
}
.mv-xl {
  margin-block: var(--spacer-xl);
}
.mt-xl {
  margin-top: var(--spacer-xl);
}
.mb-xl {
  margin-bottom: var(--spacer-xl);
}
.ml-xl {
  margin-left: var(--spacer-xl);
}
.mr-xl {
  margin-right: var(--spacer-xl);
}
.p-xl {
  padding: var(--spacer-xl);
}
.ph-xl {
  padding-inline: var(--spacer-xl);
}
.pv-xl {
  padding-block: var(--spacer-xl);
}
.pt-xl {
  padding-top: var(--spacer-xl);
}
.pb-xl {
  padding-bottom: var(--spacer-xl);
}
.pl-xl {
  padding-left: var(--spacer-xl);
}
.pr-xl {
  padding-right: var(--spacer-xl);
}
.m-2xl {
  margin: var(--spacer-2xl);
}
.mh-2xl {
  margin-inline: var(--spacer-2xl);
}
.mv-2xl {
  margin-block: var(--spacer-2xl);
}
.mt-2xl {
  margin-top: var(--spacer-2xl);
}
.mb-2xl {
  margin-bottom: var(--spacer-2xl);
}
.ml-2xl {
  margin-left: var(--spacer-2xl);
}
.mr-2xl {
  margin-right: var(--spacer-2xl);
}
.p-2xl {
  padding: var(--spacer-2xl);
}
.ph-2xl {
  padding-inline: var(--spacer-2xl);
}
.pv-2xl {
  padding-block: var(--spacer-2xl);
}
.pt-2xl {
  padding-top: var(--spacer-2xl);
}
.pb-2xl {
  padding-bottom: var(--spacer-2xl);
}
.pl-2xl {
  padding-left: var(--spacer-2xl);
}
.pr-2xl {
  padding-right: var(--spacer-2xl);
}
:root {
  --viewport-inset: var(--spacer-md);
  --viewport-xs: 37.5rem;
  --viewport-sm: 48rem;
  --viewport-md: 60.5rem;
  --viewport-lg: 80rem;
  --viewport-xl: 100rem;
  --body-inset: var(--viewport-inset);
  --body-background: #fff;
  --ui-content-max-width: var(--viewport-lg);
}
.viewport-xs {
  padding-inline: var(--viewport-inset);
  max-width: var(--viewport-xs);
  width: 100%;
  margin-inline: auto;
}
.viewport-sm {
  padding-inline: var(--viewport-inset);
  max-width: var(--viewport-sm);
  width: 100%;
  margin-inline: auto;
}
.viewport-md {
  padding-inline: var(--viewport-inset);
  max-width: var(--viewport-md);
  width: 100%;
  margin-inline: auto;
}
.viewport-lg {
  padding-inline: var(--viewport-inset);
  max-width: var(--viewport-lg);
  width: 100%;
  margin-inline: auto;
}
.viewport-xl {
  padding-inline: var(--viewport-inset);
  max-width: var(--viewport-xl);
  width: 100%;
  margin-inline: auto;
}
.row {
  --gap: var(--ui-column-gap, var(--grid-gap));
  display: grid;
  gap: 0;
  grid-template-columns: repeat(12, 1fr);
  align-items: start;
  container-type: inline-size;
  margin-inline: calc(var(--gap) * -.5);
}
.row [class*='col-'] {
  padding-inline: calc(var(--gap) * .5);
  margin-bottom: var(--gap);
}
.row .col-1 {
  grid-column: auto / span 1;
}
.row .col-2 {
  grid-column: auto / span 2;
}
.row .col-3 {
  grid-column: auto / span 3;
}
.row .col-4 {
  grid-column: auto / span 4;
}
.row .col-5 {
  grid-column: auto / span 5;
}
.row .col-6 {
  grid-column: auto / span 6;
}
.row .col-7 {
  grid-column: auto / span 7;
}
.row .col-8 {
  grid-column: auto / span 8;
}
.row .col-9 {
  grid-column: auto / span 9;
}
.row .col-10 {
  grid-column: auto / span 10;
}
.row .col-11 {
  grid-column: auto / span 11;
}
.row .col-12 {
  grid-column: auto / span 12;
}
@container (width < 80rem) {
  .row .col-lg-1 {
    grid-column: auto / span 1 !important;
  }
  .row .col-lg-2 {
    grid-column: auto / span 2 !important;
  }
  .row .col-lg-3 {
    grid-column: auto / span 3 !important;
  }
  .row .col-lg-4 {
    grid-column: auto / span 4 !important;
  }
  .row .col-lg-5 {
    grid-column: auto / span 5 !important;
  }
  .row .col-lg-6 {
    grid-column: auto / span 6 !important;
  }
  .row .col-lg-7 {
    grid-column: auto / span 7 !important;
  }
  .row .col-lg-8 {
    grid-column: auto / span 8 !important;
  }
  .row .col-lg-9 {
    grid-column: auto / span 9 !important;
  }
  .row .col-lg-10 {
    grid-column: auto / span 10 !important;
  }
  .row .col-lg-11 {
    grid-column: auto / span 11 !important;
  }
  .row .col-lg-12 {
    grid-column: auto / span 12 !important;
  }
}
@container (width < 64rem) {
  .row .col-md-1 {
    grid-column: auto / span 1 !important;
  }
  .row .col-md-2 {
    grid-column: auto / span 2 !important;
  }
  .row .col-md-3 {
    grid-column: auto / span 3 !important;
  }
  .row .col-md-4 {
    grid-column: auto / span 4 !important;
  }
  .row .col-md-5 {
    grid-column: auto / span 5 !important;
  }
  .row .col-md-6 {
    grid-column: auto / span 6 !important;
  }
  .row .col-md-7 {
    grid-column: auto / span 7 !important;
  }
  .row .col-md-8 {
    grid-column: auto / span 8 !important;
  }
  .row .col-md-9 {
    grid-column: auto / span 9 !important;
  }
  .row .col-md-10 {
    grid-column: auto / span 10 !important;
  }
  .row .col-md-11 {
    grid-column: auto / span 11 !important;
  }
  .row .col-md-12 {
    grid-column: auto / span 12 !important;
  }
}
@container (width < 48rem) {
  .row .col-sm-1 {
    grid-column: auto / span 1 !important;
  }
  .row .col-sm-2 {
    grid-column: auto / span 2 !important;
  }
  .row .col-sm-3 {
    grid-column: auto / span 3 !important;
  }
  .row .col-sm-4 {
    grid-column: auto / span 4 !important;
  }
  .row .col-sm-5 {
    grid-column: auto / span 5 !important;
  }
  .row .col-sm-6 {
    grid-column: auto / span 6 !important;
  }
  .row .col-sm-7 {
    grid-column: auto / span 7 !important;
  }
  .row .col-sm-8 {
    grid-column: auto / span 8 !important;
  }
  .row .col-sm-9 {
    grid-column: auto / span 9 !important;
  }
  .row .col-sm-10 {
    grid-column: auto / span 10 !important;
  }
  .row .col-sm-11 {
    grid-column: auto / span 11 !important;
  }
  .row .col-sm-12 {
    grid-column: auto / span 12 !important;
  }
}
@container (width < 37.5rem) {
  .row .col-xs-1 {
    grid-column: auto / span 1 !important;
  }
  .row .col-xs-2 {
    grid-column: auto / span 2 !important;
  }
  .row .col-xs-3 {
    grid-column: auto / span 3 !important;
  }
  .row .col-xs-4 {
    grid-column: auto / span 4 !important;
  }
  .row .col-xs-5 {
    grid-column: auto / span 5 !important;
  }
  .row .col-xs-6 {
    grid-column: auto / span 6 !important;
  }
  .row .col-xs-7 {
    grid-column: auto / span 7 !important;
  }
  .row .col-xs-8 {
    grid-column: auto / span 8 !important;
  }
  .row .col-xs-9 {
    grid-column: auto / span 9 !important;
  }
  .row .col-xs-10 {
    grid-column: auto / span 10 !important;
  }
  .row .col-xs-11 {
    grid-column: auto / span 11 !important;
  }
  .row .col-xs-12 {
    grid-column: auto / span 12 !important;
  }
}
@container (width < 25.8125rem) {
  .row .col-xxs-1 {
    grid-column: auto / span 1 !important;
  }
  .row .col-xxs-2 {
    grid-column: auto / span 2 !important;
  }
  .row .col-xxs-3 {
    grid-column: auto / span 3 !important;
  }
  .row .col-xxs-4 {
    grid-column: auto / span 4 !important;
  }
  .row .col-xxs-5 {
    grid-column: auto / span 5 !important;
  }
  .row .col-xxs-6 {
    grid-column: auto / span 6 !important;
  }
  .row .col-xxs-7 {
    grid-column: auto / span 7 !important;
  }
  .row .col-xxs-8 {
    grid-column: auto / span 8 !important;
  }
  .row .col-xxs-9 {
    grid-column: auto / span 9 !important;
  }
  .row .col-xxs-10 {
    grid-column: auto / span 10 !important;
  }
  .row .col-xxs-11 {
    grid-column: auto / span 11 !important;
  }
  .row .col-xxs-12 {
    grid-column: auto / span 12 !important;
  }
}
.grid {
  --grid-num-cols: 3;
  display: grid;
  grid-template-columns: repeat(var(--grid-num-cols), 1fr);
  grid-auto-columns: 1fr;
  grid-auto-flow: row dense;
  gap: var(--x-grid-gap);
  margin-top: var(--x-grid-gap);
  margin-bottom: var(--x-grid-gap);
}
.grid.grid-3 {
  --grid-num-cols: 3;
}
.grid.grid-4 {
  --grid-num-cols: 4;
}
.grid.grid-6 {
  --grid-num-cols: 6;
}
.grid.grid-9 {
  --grid-num-cols: 9;
}
.grid.grid-12 {
  --grid-num-cols: 12;
}
.grid .c1 {
  grid-column: span 1;
}
.grid .r1 {
  grid-row: span 1;
}
.grid .c2 {
  grid-column: span 2;
}
.grid .r2 {
  grid-row: span 2;
}
.grid .c3 {
  grid-column: span 3;
}
.grid .r3 {
  grid-row: span 3;
}
.grid .c4 {
  grid-column: span 4;
}
.grid .r4 {
  grid-row: span 4;
}
.grid .c5 {
  grid-column: span 5;
}
.grid .r5 {
  grid-row: span 5;
}
.grid .c6 {
  grid-column: span 6;
}
.grid .r6 {
  grid-row: span 6;
}
.grid .c7 {
  grid-column: span 7;
}
.grid .r7 {
  grid-row: span 7;
}
.grid .c8 {
  grid-column: span 8;
}
.grid .r8 {
  grid-row: span 8;
}
.grid .c9 {
  grid-column: span 9;
}
.grid .r9 {
  grid-row: span 9;
}
.grid .c10 {
  grid-column: span 10;
}
.grid .r10 {
  grid-row: span 10;
}
.grid .c11 {
  grid-column: span 11;
}
.grid .r11 {
  grid-row: span 11;
}
.grid .c12 {
  grid-column: span 12;
}
.grid .r12 {
  grid-row: span 12;
}
@media screen and (max-width: 89.99rem) {
  .grid .c2,
  .grid .c3 {
    grid-column: span 4;
  }
}
@media screen and (min-width: 37.5rem) and (max-width: 63.99rem) {
  .grid .c1 {
    grid-column: span 2;
  }
}
@media screen and (max-width: 37.49rem) {
  .grid .c1 {
    grid-column: span 4;
  }
}
.svg-icon {
  height: var(--icon-size);
  width: var(--icon-size);
  display: inline-block;
  vertical-align: middle;
  fill: currentColor;
}
a {
  color: var(--color-link);
  transition: var(--link-transition-duration, 250ms);
}
@media not all and (hover: none) {
  a:hover {
    color: var(--color-link-hover, var(--color-link));
  }
}
.stretch-link::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  content: '';
  z-index: 2;
}
.dev--grid {
  position: fixed;
  z-index: 999999;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0.15;
  display: flex;
  justify-content: center;
}
.dev--grid-cols {
  display: grid;
  grid-gap: var(--dev-grid-gap, var(--ui-column-gap));
  grid-template-columns: repeat(12, 1fr);
  align-items: start;
  width: 100%;
  max-width: var(--ui-content-max-width);
  padding-inline: var(--body-inset);
  margin-inline: auto;
}
@media screen and (max-width: 37.49rem) {
  .dev--grid-cols {
    grid-template-columns: repeat(4, 1fr);
  }
}
.dev--grid-col {
  height: 100%;
  position: relative;
}
.dev--grid-col::before {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: #df7d7d;
  content: '';
}
/**
 * Shared components 
**/
/**
 * Flatlist needs swiper.js to work 
 * @see package.json 
 **/
.flatlist.flatlist-x {
  overflow: visible;
}
.flatlist.flatlist-with-pagination {
  padding-bottom: var(--spacer-xl);
}
.flatlist .swiper-slide {
  width: auto;
}
/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
font,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}
body {
  line-height: 1.5;
}
ol,
ul {
  list-style: none;
}
blockquote,
q {
  quotes: none;
}
/* remember to define focus styles! */
:focus {
  outline: 0;
}
/* remember to highlight inserts somehow! */
ins {
  text-decoration: none;
}
del {
  text-decoration: line-through;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
  border-collapse: collapse;
  border-spacing: 0;
}
/* HTML5 Reset */
article,
aside,
dialog,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
  margin: 0;
  padding: 0;
}
address {
  font-style: normal;
}
/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul,
ol,
li {
  list-style-type: none;
}
address {
  font-style: normal;
}
/* Set core root defaults */
html:focus-within {
  scroll-behavior: smooth;
}
/* Set core body defaults */
body {
  min-height: 100vh;
  text-rendering: optimizeSpeed;
  line-height: 1.5;
}
/* A elements that don't have a class get default styles */
a:not([class]) {
  -webkit-text-decoration-skip: ink;
          text-decoration-skip-ink: auto;
}
/* Make images easier to work with */
img,
picture {
  max-width: 100%;
}
/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
  font: inherit;
}
button,
input[type=submit],
input[type=button],
input[type=reset] {
  -webkit-appearance: none;
  border: 0;
  padding: 0;
  margin: 0;
  background-color: transparent;
}
/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
html,
body {
  font-size: 16px;
  height: 100%;
}
body {
  font-family: var(--fn-body);
  line-height: var(--lh-text-md, 1.33);
  color: var(--color-text-dark, #333);
  background: var(--body-bg, #fff);
  text-align: left;
  -webkit-font-smoothing: subpixel-antialiased;
}
.holder {
  max-width: var(--ui-content-max-width, 100%);
  margin-inline: auto;
  padding-inline: var(--body-inset);
}
.o-hidden {
  overflow: hidden;
}
[aria-hidden=true],
.screen-reader-text,
.d-none,
[hidden] {
  display: none;
}
input,
select,
button,
textarea {
  font-family: var(--fn-input, var(--fn-body));
}
input[type=submit] input[type=button] input[type=reset] button {
  font-family: var(--fn-button, var(--fn-body));
}
.title-1,
.title-2,
.title-3,
.title-4,
.title-5,
.title-6 {
  font-family: var(--fn-title, var(--fn-body));
}
a > *,
button > * {
  pointer-events: none;
}
/*
 * Theme specified files 
 */
/*
 * colors are defined to be used into hsl or hsla css functions 
 */
/**
 * @name: @min[, @max]
 */
/**
 * @name: @value
 */
:root {
  --fn-body: 'Poppins', Helvetica Neue, sans-serif;
}
:root {
  --color-page-accent: var(--color-theme-accent);
  --color-text-hv: var(--color-grey-900);
  --color-text-md: var(--color-grey-600);
  --color-text-lg: var(--color-grey-400);
  --color-link: var(--color-page-accent);
  --color-link-hover: var(--color-page-accent);
}
:root {
  --tx-duration-xs: 125ms;
  --tx-duration-sm: 250ms;
  --tx-duration-md: 500ms;
  --tx-duration-lg: 1000ms;
}
:root {
  --icon-size-lg: 2rem;
  --icon-size-md: 1.5rem;
  --icon-size-sm: 1.125rem;
  --icon-size-xs: 1rem;
  --icon-size: var(--icon-size-md);
  --border-radius-lg: 24px;
  --border-radius-md: 12px;
  --border-radius-sm: 8px;
  --border-radius-xs: 4px;
  --border-radius: var(--border-radius-xs);
  /*		
	--ui-hamburger-w: var(--spacer-lg);
	--ui-hamburger-h: var(--spacer-md);
	--ui-hamburger-bar-spacer:9px;
	--ui-hamburger-bar-h: 2px;
	--ui-hamburger-color: currentcolor;
	
	#mq.is(desktop, {
		--ui-hamburger-color: #fff;
		--ui-hamburger-bar-spacer:6px;
	});
	*/
  --ui-content-max-width: 1200px;
  --ui-column-gap: var(--spacer-xl);
}
@media screen and (min-width: 37.5rem) and (max-width: 63.99rem) {
  :root {
    --ui-column-gap: var(--spacer-lg);
  }
}
@media screen and (max-width: 37.49rem) {
  :root {
    --ui-column-gap: var(--spacer-md);
  }
}
.display-1,
.display-2,
.display-3,
.title-1,
.title-2,
.title-3,
.title-4,
.title-5,
.title-6 {
  font-weight: 700;
}
a {
  text-decoration: none;
}
/*
 * The layout elements are those 
 * that are responsively controlled by @media rules 
 * in contrary of ~'/component elements that are 
 * responsively controlled by @container rules
**/
.flash-message {
  position: fixed;
  top: 100%;
  left: 0;
  width: 100%;
  padding: var(--spacer-md) var(--spacer-xl);
  text-align: center;
  z-index: 990;
  transform: translateY(-100%);
  transition: transform 250ms ease;
  color: var(--color-ui-notice);
  background-color: #e1e0c8;
}
.flash-message.hidden {
  transform: translateY(0);
}
.flash-message.success {
  color: #fff;
  background-color: var(--color-ui-valid);
}
.flash-message.error {
  color: #fff;
  background-color: var(--color-ui-danger);
}
body {
  color: var(--color-theme-primary);
  background: var(--body-bg, #fff);
}
.app-wrapper {
  --body-inset: 20px;
  position: relative;
  width: 100%;
  min-height: 99.99vh;
  display: flex;
  transition: opacity 250ms;
  padding: var(--body-inset);
  z-index: 1;
  font-size: var(--fs-fluid-text-md);
  line-height: var(--lh-text-md);
}
@media screen and (min-width: 37.5rem) and (max-width: 63.99rem) {
  .app-wrapper {
    --body-inset: 30px;
  }
}
@media screen and (min-width: 64rem) {
  .app-wrapper {
    --body-inset: 50px;
  }
}
.app-wrapper > .holder {
  display: flex;
  min-height: 100%;
  flex-direction: column;
  justify-content: space-between;
}
.app-logo img {
  width: clamp(8.25rem, calc(7.75rem + 2.5vw), 10rem);
  height: auto;
}
.app-contents {
  --gap: 20px;
  display: flex;
  flex-direction: column;
  flex: 1;
  padding-block: 2em;
}
.member-links {
  margin-inline: -1.5em;
}
.member-links .links {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}
.page {
  color: #fff;
  padding: 10em 0 3em;
  margin-block-start: -7em;
  position: relative;
}
.page::before {
  position: absolute;
  top: 0;
  left: 50%;
  background-color: var(--color-theme-primary);
  width: 99.99vw;
  height: 100%;
  transform: translateX(-50%);
  z-index: -1;
  content: '';
}
.page .page--title {
  font-size: var(--fs-fluid-text-lg);
  line-height: var(--lh-text-lg);
  text-wrap: balance;
}
.page .page--heading {
  margin-block-start: 1em;
  text-wrap: balance;
  text-align: justify;
  -webkit-hyphens: auto;
          hyphens: auto;
}
.page .page--body {
  margin-block-start: 3em;
  font-size: var(--fs-fluid-text-sm);
  line-height: var(--lh-text-sm);
}
.aims > li {
  display: flex;
  gap: 1em;
  justify-content: flex-start;
  align-items: flex-start;
}
.aims > li::before {
  content: '';
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  background: transparent no-repeat url('../../img/smile.svg') center;
  transform: translateY(-0.2em);
}
.aims > li + li {
  padding-block-start: 1em;
}
.card {
  display: flex;
  flex-direction: row-reverse;
  background-color: #fff;
  border-radius: var(--border-radius-md);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  position: relative;
}
.card .cd--inner {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.5em;
  padding: 1.5em;
}
.card .cd--thumbnail {
  flex: 0 0 50%;
  background-color: var(--color-grey-200);
  aspect-ratio: 1;
  overflow: hidden;
}
.card .cd--thumbnail a,
.card .cd--thumbnail .media,
.card .cd--thumbnail img {
  display: block;
  width: 100%;
  height: 100%;
}
.card .cd--thumbnail .media,
.card .cd--thumbnail .media img {
  -o-object-fit: cover;
     object-fit: cover;
}
.card .cd--thumbnail .media {
  transition: 250ms;
}
.card .cd--title {
  font-size: var(--fs-fluid-title-1);
  line-height: var(--lh-title-1);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  text-wrap: balance;
  height: 2.4em;
  transition: 250ms;
}
.card .cd--body {
  font-size: var(--fs-fluid-text-sm);
  line-height: var(--lh-text-sm);
  text-wrap: balance;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  height: 3em;
}
.card .cd--body p {
  display: none;
}
.card .cd--logo img {
  width: 144px;
  height: 48px;
  -o-object-fit: contain;
     object-fit: contain;
  -o-object-position: 0 50%;
     object-position: 0 50%;
}
.card .cd--footer {
  font-size: var(--fs-fluid-text-lg);
  line-height: var(--lh-text-lg);
}
.card .cd--footer a {
  position: relative;
  font-weight: 700;
}
.card .cd--footer a::before {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 0.5em;
  background-color: yellow;
  opacity: 0.5;
  z-index: 0;
  transition: width 250ms cubic-bezier(0.215, 0.61, 0.355, 1);
  content: '';
}
@media not all and (hover: none) {
  .card:hover .cd--title {
    color: var(--color-theme-accent);
  }
  .card:hover .cd--thumbnail .media {
    transform: scale(1.1);
  }
  .card:hover .cd--footer a {
    color: var(--color-theme-primary);
  }
  .card:hover .cd--footer a::before {
    width: 100%;
  }
}
.partners.wbe img {
  max-width: 140px;
  height: auto;
}
@media screen and (min-width: 37.5rem) {
  .member-links .links {
    flex-direction: row;
  }
  .card {
    flex-direction: column-reverse;
    aspect-ratio: 1 / 1.25;
  }
  .card .cd--thumbnail {
    flex: 1;
    aspect-ratio: auto;
  }
}
@media screen and (min-width: 64rem) {
  body {
    --body-bg: #fff;
  }
  body::before {
    position: fixed;
    z-index: 0;
    right: 0;
    width: 50%;
    height: 100%;
    background-color: var(--color-theme-primary);
    content: '';
  }
  .app-contents {
    flex-direction: row-reverse;
    align-items: center;
    margin-inline: calc(var(--gap) * -.5);
  }
  .page,
  .member-links {
    flex: 0 0 var(--w);
    width: var(--w);
    padding-inline: calc(var(--gap) * .5);
  }
  .page {
    --w: 33.33%;
    display: flex;
    align-items: center;
    color: var(--color-theme-primary);
    padding: 0;
    margin-block-start: 0;
  }
  .page::before {
    content: none;
  }
  .page .page--inner {
    max-width: 300px;
  }
  .member-links {
    --w: 66.66%;
    margin-inline: 0;
  }
  .card {
    aspect-ratio: 1 / 1.66;
  }
}
/*# sourceMappingURL=app.css.map */