/* -------------------------------- 

File#: _1_smooth-scrolling
Title: Smooth Scrolling
Descr: Replace the default browser behaviour (jump) with a smooth scrolling transition
-

-------------------------------- */
/* reset */
*, *::after, *::before {
  box-sizing: border-box;
}

* {
  font: inherit;
  margin: 0;
  padding: 0;
  border: 0;
}

body {
  background-color: hsl(0, 0%, 100%);
  font-family: system-ui, sans-serif;
  color: hsl(230, 7%, 23%);
  font-size: 1rem;
}

h1, h2, h3, h4 {
  line-height: 1.2;
  color: hsl(230, 13%, 9%);
  font-weight: 700;
}

h1 {
  font-size: 2.0736rem;
}

h2 {
  font-size: 1.728rem;
}

h3 {
  font-size: 1.25rem;
}

h4 {
  font-size: 1.2rem;
}

ol, ul, menu {
  list-style: none;
}

button, input, textarea, select {
  background-color: transparent;
  border-radius: 0;
  color: inherit;
  line-height: inherit;
  appearance: none;
}

textarea {
  resize: vertical;
  overflow: auto;
  vertical-align: top;
}

a {
  color: hsl(250, 84%, 54%);
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

img, video, svg {
  display: block;
  max-width: 100%;
}

@media (min-width: 64rem) {
  body {
    font-size: 1.25rem;
  }

  h1 {
    font-size: 3.051rem;
  }

    h2 {
    font-size: 2.44rem;
  }

    h3 {
    font-size: 1.75rem;
  }

    h4 {
    font-size: 1.5625rem;
  }
}

/* variables */
:root {
  /* colors */
  --sc5-color-primary-hsl: 250, 84%, 54%;
  --sc5-color-bg-hsl: 0, 0%, 100%;
  --sc5-color-contrast-high-hsl: 230, 7%, 23%;
  --sc5-color-contrast-higher-hsl: 230, 13%, 9%;
}

/* component */
html {
  scroll-behavior: smooth;
}
/* -------------------------------- 

File#: _1_grid-background
Title: Grid Background
Descr: Grid background pattern
-

-------------------------------- */

/* reset */
*, *::after, *::before {
  box-sizing: border-box;
}

* {
  font: inherit;
  margin: 0;
  padding: 0;
  border: 0;
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  background-color: hsl(0, 0%, 100%);
  font-family: system-ui, sans-serif;
  color: hsl(230, 7%, 23%);
  font-size: 1.125rem; /* 18px */
  line-height: 1.4;
}

h1, h2, h3, h4 {
  line-height: 1.2;
  color: hsl(230, 13%, 9%);
  font-weight: 700;
}

h1 {
  font-size: 2.5rem; /* 40px */
}

h2 {
  font-size: 2.125rem; /* 34px */
}

h3 {
  font-size: 1.75rem; /* 28px */
}

h4 {
  font-size: 1.375rem; /* 22px */
}

ol, ul, menu {
  list-style: none;
}

button, input, textarea, select {
  background-color: transparent;
  border-radius: 0;
  color: inherit;
  line-height: inherit;
  -webkit-appearance: none;
          appearance: none;
}

textarea {
  resize: vertical;
  overflow: auto;
  vertical-align: top;
}

a {
  color: hsl(250, 84%, 54%);
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

img, video, svg {
  display: block;
  max-width: 100%;
}

/* -------------------------------- 

Component 

-------------------------------- */

/* demo content - replace in production */
.demo-ga0-grid { 
  display: grid;
  column-gap: 1rem;
  row-gap: 2rem;
  grid-template-columns: repeat(6, 1fr); /* use same grid options of .grid-bg-fx__grid  👇 */
}

.demo-ga0-grid > * {
  min-width: 0;
  grid-column: span 6;
}

.demo-ga0-label {
  color: hsl(250, 84%, 54%);
  font-size: 0.9375rem;
  margin-bottom: 1rem;
}

.demo-ga0-paragraph, .demo-ga0-quote {
  line-height: 1.72;
}

.demo-ga0-quote {
  background-color: hsla(250, 84%, 54%, 0.1);
  border-left: 3px solid hsl(250, 84%, 54%);
  padding: 1.5rem;
  margin-top: 2rem;
}

.demo-ga0-footer {
  text-align: right;
  font-size: 0.9375rem;
}
/* end demo content */

.grid-bg-fx {
  pointer-events: none;
  position: absolute;
  inset: 0;
}

.grid-bg-fx__container {
  height: 100%;
}

.grid-bg-fx__grid {
  position: relative;
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(6, 1fr);
  height: 100%;
}

.grid-bg-fx__grid::after { /* overlay gradient */
  content: '';
  position: absolute;
  bottom: 0;
  left: -1px;
  width: calc(100% + 2px);
  height: 100px;
  background: linear-gradient(hsla(0, 0%, 100%, 0), hsl(0, 0%, 100%));
}

.grid-bg-fx__grid > * {
  position: relative;
  grid-column: span 1;
}

.grid-bg-fx__grid > *::before, .grid-bg-fx__grid *::after {
  content: "";
  position: absolute;
  top: 0;
  height: 100%;
  width: 1px;
  background-color: hsl(240, 4%, 90%);
}

.grid-bg-fx__grid > *:nth-child(6) ~ * {
  display: none; /* hide last six grid items */
}

.grid-bg-fx__grid > *::before {
  left: -1px;
}

.grid-bg-fx__grid > *::after {
  right: 0;
}

@media (min-width: 64rem) {
  .grid-bg-fx__grid, .demo-ga0-grid {
    grid-template-columns: repeat(12, 1fr);
  }

  .demo-ga0-grid > *:nth-child(1) {
    grid-column: span 8;
  }

  .demo-ga0-grid > *:nth-child(2) {
    grid-column: 3 / span 8;
  }

  .demo-ga0-grid > *:nth-child(3) {
    grid-column: span 12;
  }

  .grid-bg-fx__grid > *:nth-child(6) ~ * {
    display: block;
  }
}

/* -------------------------------- 

Utilities 

-------------------------------- */

.cd-container {
  width: calc(100% - 3rem);
  margin-left: auto;
  margin-right: auto;
}

.cd-max-width-lg {
  max-width: 80rem;
}

.cd-position-relative {
  position: relative;
}

.cd-z-index-1 {
  z-index: 1;
}

.cd-z-index-2 {
  z-index: 2;
}

.cd-padding-y-xl {
  padding-top: 4.5rem;
  padding-bottom: 4.5rem;
}
/* -------------------------------- 

File#: _1_adv-gallery
Title: Advanced Gallery
Descr: Advanced image gallery template
-

-------------------------------- */

/* reset */
*, *::after, *::before {
  box-sizing: border-box;
}

* {
  font: inherit;
  margin: 0;
  padding: 0;
  border: 0;
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  background-color: hsl(0, 0%, 100%);
  font-family: system-ui, sans-serif;
  color: hsl(230, 7%, 23%);
  font-size: 1.125rem; /* 18px */
  line-height: 1.4;
}

h1, h2, h3, h4 {
  line-height: 1.2;
  color: hsl(230, 13%, 9%);
  font-weight: 700;
}

h1 {
  font-size: 2.5rem; /* 40px */
}

h2 {
  font-size: 2.125rem; /* 34px */
}

h3 {
  font-size: 1.75rem; /* 28px */
}

h4 {
  font-size: 1.375rem; /* 22px */
}

ol, ul, menu {
  list-style: none;
}

button, input, textarea, select {
  background-color: transparent;
  border-radius: 0;
  color: inherit;
  line-height: inherit;
  -webkit-appearance: none;
          appearance: none;
}

textarea {
  resize: vertical;
  overflow: auto;
  vertical-align: top;
}

a {
  color: hsl(250, 84%, 54%);
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

img, video, svg {
  display: block;
  max-width: 100%;
}

/* -------------------------------- 

Component 

-------------------------------- */

.adv-gallery {
  position: relative;
  z-index: 1;
}

.adv-gallery__grid {
  display: grid;
  gap: 2rem;
  width: calc(100% - 3rem);
  max-width: 90rem;
  margin-left: auto;
  margin-right: auto;
}

.adv-gallery__img {
  width: 100%;
  display: block;
  -o-object-fit: cover;
     object-fit: cover;
}

.adv-gallery__label {
  background-color: hsl(240, 4%, 95%);
  padding:  2rem;
}

.adv-gallery__label-line {
  display: none;
}

.adv-gallery__label-text {
  font-size: 1.375rem;
}

@media (min-width: 64rem) {
  .adv-gallery__grid {
    grid-template-columns: repeat(12, 1fr);
  }

  .adv-gallery__grid > :nth-child(1) {
    grid-column: span 5;
  }

  .adv-gallery__grid > :nth-child(2) {
    grid-column: span 7;
  }

  .adv-gallery__grid > :nth-child(3) {
    grid-column: span 9;
  }

  .adv-gallery__grid > :nth-child(4) {
    grid-column: span 3;
  }
}

@media (min-width: 85.5rem) {
  .adv-gallery__grid {
    gap: 1.5rem;
    grid-template-rows: repeat(12, 50px);
  }

  .adv-gallery__grid > :nth-child(1) {
    grid-column: 1/4;
    grid-row: 1/7;
  }

  .adv-gallery__grid > :nth-child(2) {
    grid-column: 1/4;
    grid-row: 7/-1;
  }

  .adv-gallery__grid > :nth-child(3) {
    grid-column: 4/11;
    grid-row: 1/-1;
  }

  .adv-gallery__grid > :nth-child(4) {
    grid-column: 11/13;
    grid-row: 1/-1;
  }

  .adv-gallery__img {
    height: 100%;
  }

  .adv-gallery__label {
    display: flex;
  }

  .adv-gallery__label-inner {
    margin-top: auto;
  }

  .adv-gallery__label-line {
    display: block;
    border-left: 1px solid hsl(230, 7%, 23%);
    height: 96px;
    margin-bottom: 1.5rem;
  }
}

/* -------------------------------- 

Utilities 

-------------------------------- */

.cd-padding-y-xl {
  padding-top: 4.5rem;
  padding-bottom: 4.5rem;
}
/* -------------------------------- 

File#: _1_swipe-content
Title: Swipe Content
Descr: A Vanilla JavaScript plugin to detect touch interactions
-

-------------------------------- */
/* reset */
*, *::after, *::before {
  box-sizing: border-box;
}

* {
  font: inherit;
  margin: 0;
  padding: 0;
  border: 0;
}

body {
  background-color: hsl(0, 0%, 100%);
  font-family: system-ui, sans-serif;
  color: hsl(230, 7%, 23%);
  font-size: 1rem;
}

h1, h2, h3, h4 {
  line-height: 1.2;
  color: hsl(230, 13%, 9%);
  font-weight: 700;
}

h1 {
  font-size: 2.0736rem;
}

h2 {
  font-size: 1.728rem;
}

h3 {
  font-size: 1.25rem;
}

h4 {
  font-size: 1.2rem;
}

ol, ul, menu {
  list-style: none;
}

button, input, textarea, select {
  background-color: transparent;
  border-radius: 0;
  color: inherit;
  line-height: inherit;
  appearance: none;
}

textarea {
  resize: vertical;
  overflow: auto;
  vertical-align: top;
}

a {
  color: hsl(250, 84%, 54%);
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

img, video, svg {
  display: block;
  max-width: 100%;
}

@media (min-width: 64rem) {
  body {
    font-size: 1.25rem;
  }

  h1 {
    font-size: 3.051rem;
  }

    h2 {
    font-size: 2.44rem;
  }

    h3 {
    font-size: 1.75rem;
  }

    h4 {
    font-size: 1.5625rem;
  }
}

/* variables */
:root {
  /* colors */
  --sr5-color-primary-hsl: 250, 84%, 54%;
  --sr5-color-bg-hsl: 0, 0%, 100%;
  --sr5-color-contrast-high-hsl: 230, 7%, 23%;
  --sr5-color-contrast-higher-hsl: 230, 13%, 9%;
  --sr5-color-contrast-low-hsl: 240, 4%, 65%;
  --sr5-color-contrast-medium-hsl: 225, 4%, 47%;
}

/* component */
.swipe-content {
  height: 280px;
  width: 280px;
  background-color: hsl(var(--sr5-color-contrast-low-hsl));
  border-radius: 0.25em;
  cursor: default;
  transition: background 0.2s;
}
.swipe-content:active {
  background-color: hsl(var(--sr5-color-contrast-medium-hsl));
}
/* -------------------------------- 

File#: _1_looping-tabs
Title: Looping Tabs
Descr: Accessible tabbed content that loops automatically from one item to the next
-

-------------------------------- */
/* reset */
*, *::after, *::before {
  box-sizing: border-box;
}

* {
  font: inherit;
  margin: 0;
  padding: 0;
  border: 0;
}

body {
  background-color: hsl(0, 0%, 100%);
  font-family: system-ui, sans-serif;
  color: hsl(230, 7%, 23%);
  font-size: 1rem;
}

h1, h2, h3, h4 {
  line-height: 1.2;
  color: hsl(230, 13%, 9%);
  font-weight: 700;
}

h1 {
  font-size: 2.0736rem;
}

h2 {
  font-size: 1.728rem;
}

h3 {
  font-size: 1.25rem;
}

h4 {
  font-size: 1.2rem;
}

ol, ul, menu {
  list-style: none;
}

button, input, textarea, select {
  background-color: transparent;
  border-radius: 0;
  color: inherit;
  line-height: inherit;
  appearance: none;
}

textarea {
  resize: vertical;
  overflow: auto;
  vertical-align: top;
}

a {
  color: hsl(250, 84%, 54%);
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

img, video, svg {
  display: block;
  max-width: 100%;
}

@media (min-width: 64rem) {
  body {
    font-size: 1.25rem;
  }

  h1 {
    font-size: 3.051rem;
  }

    h2 {
    font-size: 2.44rem;
  }

    h3 {
    font-size: 1.75rem;
  }

    h4 {
    font-size: 1.5625rem;
  }
}

/* variables */
:root {
  /* colors */
  --ln7-color-primary-hsl: 250, 84%, 54%;
  --ln7-color-bg-hsl: 0, 0%, 100%;
  --ln7-color-contrast-high-hsl: 230, 7%, 23%;
  --ln7-color-contrast-higher-hsl: 230, 13%, 9%;
  --ln7-color-contrast-lower-hsl: 240, 4%, 85%;
  --ln7-color-contrast-low-hsl: 240, 4%, 65%;
  --ln7-color-accent-hsl: 342, 89%, 48%;

  /* spacing */
  --ln7-space-md: 1.25rem;
  --ln7-space-lg: 2rem;
  --ln7-space-xl: 3.25rem;
  --ln7-space-sm: 0.75rem;
  --ln7-space-xs: 0.5rem;

  /* typography */
  --ln7-text-sm: 0.833rem;
  --ln7-text-sm: 0.833rem;
}

@media(min-width: 64rem){
  :root {
    /* spacing */
    --ln7-space-md: 2rem;
    --ln7-space-lg: 3.125rem;
    --ln7-space-xl: 5.125rem;
    --ln7-space-sm: 1.125rem;
    --ln7-space-xs: 0.75rem;

    /* typography */
    --ln7-text-sm: 1rem;
    --ln7-text-sm: 1rem;
  }
}

/* component */
:root {
  --loop-tabs-fill-size: 1px;
  --loop-tabs-animation-duration: 0.5s;
}

.loop-tabs {
  position: relative;
  z-index: 1;
}

.loop-tabs__media {
  display: none;
}

.loop-tabs__assets,
.loop-tabs__panels {
  position: relative;
}

.loop-tabs__asset,
.loop-tabs__panel {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--loop-tabs-animation-duration), visibility var(--loop-tabs-animation-duration), -webkit-transform var(--loop-tabs-animation-duration);
  transition: opacity var(--loop-tabs-animation-duration), visibility var(--loop-tabs-animation-duration), transform var(--loop-tabs-animation-duration);
  transition: opacity var(--loop-tabs-animation-duration), visibility var(--loop-tabs-animation-duration), transform var(--loop-tabs-animation-duration), -webkit-transform var(--loop-tabs-animation-duration);
}

.loop-tabs__asset {
  -webkit-transform: scale(0.9);
          transform: scale(0.9);
}

.loop-tabs__asset--selected,
.loop-tabs__panel--selected {
  position: relative;
  opacity: 1;
  z-index: 2;
  visibility: visible;
}

.loop-tabs__asset--selected {
  -webkit-transform: scale(1);
          transform: scale(1);
}

.loop-tabs__asset--exit {
  -webkit-transform: scale(1.1);
          transform: scale(1.1);
}

.loop-tabs__control {
  display: block;
  position: relative;
  text-decoration: none;
  color: hsl(var(--ln7-color-contrast-low-hsl));
  --loop-tabs-filling: 0;
}
.loop-tabs__control::before, .loop-tabs__control::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  height: var(--loop-tabs-fill-size);
  width: 100%;
}
.loop-tabs__control::before {
  background-color: hsl(var(--ln7-color-contrast-lower-hsl));
}
.loop-tabs__control::after {
  -webkit-transform: scaleX(0);
          transform: scaleX(0);
  -webkit-transform-origin: left top;
          transform-origin: left top;
}
.loop-tabs__control:focus {
  outline: none;
}
.loop-tabs__control:focus::after, .loop-tabs--autoplay-off .loop-tabs__control::after {
  -webkit-transform: scaleX(1);
          transform: scaleX(1);
}

.loop-tabs__control--selected {
  color: hsl(var(--ln7-color-contrast-high-hsl));
}
.loop-tabs__control--selected::after {
  -webkit-transform: scaleX(var(--loop-tabs-filling));
          transform: scaleX(var(--loop-tabs-filling));
  background-color: currentColor;
}

.loop-tabs__media {
  display: flex;
  justify-content: center;
}

@media (min-width: 64rem) {
  .loop-tabs__control::before,
.loop-tabs__control::after {
    width: var(--loop-tabs-fill-size);
    height: 100%;
  }

  .loop-tabs__control::after {
    -webkit-transform: scaleY(0);
            transform: scaleY(0);
  }

  .loop-tabs__control--selected::after {
    -webkit-transform: scaleY(var(--loop-tabs-filling));
            transform: scaleY(var(--loop-tabs-filling));
  }

  .loop-tabs__control:focus::after,
.loop-tabs--autoplay-off .loop-tabs__control::after {
    -webkit-transform: scaleY(1);
            transform: scaleY(1);
  }
}

/* utility classes */
.ln7-radius-md {
  border-radius: 0.25em;
}

.ln7-shadow-md {
  box-shadow:0 0.9px 1.5px rgba(0, 0, 0, 0.03),0 3.1px 5.5px rgba(0, 0, 0, 0.08),0 14px 25px rgba(0, 0, 0, 0.12);
}

.ln7-text-component :where(h1, h2, h3, h4) {
  line-height: var(--ln7-heading-line-height, 1.2);
  margin-top: calc(var(--ln7-space-md) * var(--ln7-space-multiplier, 1));
  margin-bottom: calc(var(--ln7-space-sm) * var(--ln7-space-multiplier, 1));
}

.ln7-text-component :where(p, blockquote, ul li, ol li) {
  line-height: var(--ln7-body-line-height, 1.4);
}

.ln7-text-component :where(ul, ol, p, blockquote, .ln7-text-component__block) {
  margin-bottom: calc(var(--ln7-space-sm) * var(--ln7-space-multiplier, 1));
}

.ln7-text-component :where(ul, ol) {
  padding-left: 1.25em;
}

.ln7-text-component ul :where(ul, ol), .ln7-text-component ol :where(ul, ol) {
  padding-left: 1em;
  margin-bottom: 0;
}

.ln7-text-component ul {
  list-style-type: disc;
}

.ln7-text-component ol {
  list-style-type: decimal;
}

.ln7-text-component img {
  display: block;
  margin: 0 auto;
}

.ln7-text-component figcaption {
  margin-top: calc(var(--ln7-space-xs) * var(--ln7-space-multiplier, 1));
  font-size: var(--ln7-text-sm);
  text-align: center;}

.ln7-text-component em {
  font-style: italic;
}

.ln7-text-component strong {
  font-weight: bold;
}

.ln7-text-component s {
  text-decoration: line-through;
}

.ln7-text-component u {
  text-decoration: underline;
}

.ln7-text-component mark {
  background-color: hsla(var(--ln7-color-accent-hsl), 0.2);
  color: inherit;
}

.ln7-text-component blockquote {
  padding-left: 1em;
  border-left: 4px solid hsl(var(--ln7-color-contrast-lower-hsl));
  font-style: italic;
}

.ln7-text-component hr {
  margin: calc(var(--ln7-space-md) * var(--ln7-space-multiplier, 1)) auto;
  background: hsl(var(--ln7-color-contrast-lower-hsl));
  height: 1px;
}

.ln7-text-component > *:first-child {
  margin-top: 0;
}

.ln7-text-component > *:last-child {
  margin-bottom: 0;
}

.ln7-text-component.ln7-line-height-xs {
  --ln7-heading-line-height: 1;
  --ln7-body-line-height: 1.1;
}

.ln7-text-component.ln7-line-height-sm {
  --ln7-heading-line-height: 1.1;
  --ln7-body-line-height: 1.2;
}

.ln7-text-component.ln7-line-height-md {
  --ln7-heading-line-height: 1.15;
  --ln7-body-line-height: 1.4;
}

.ln7-text-component.ln7-line-height-lg {
  --ln7-heading-line-height: 1.22;
  --ln7-body-line-height: 1.58;
}

.ln7-text-component.ln7-line-height-xl {
  --ln7-heading-line-height: 1.3;
  --ln7-body-line-height: 1.72;
}

.ln7-margin-bottom-md {
  margin-bottom: var(--ln7-space-md);
}

.ln7-padding-md {
  padding: var(--ln7-space-md);
}

.ln7-text-sm {
  font-size: var(--ln7-text-sm);
}

.ln7-flex-wrap {
  flex-wrap: wrap;
}

.ln7-flex-center {
  justify-content: center;
  align-items: center;
}

.ln7-flex {
  display: flex;
}

.ln7-margin-bottom-lg {
  margin-bottom: var(--ln7-space-lg);
}

.ln7-text-center {
  text-align: center;
}

.ln7-flex-column {
  flex-direction: column;
}

.ln7-gap-md {
  gap: var(--ln7-space-md);
}

.ln7-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
}

.ln7-grid > * {
  min-width: 0;
  grid-column-end: span 12;
}

.ln7-max-width-adaptive-lg {
  max-width: 32rem;
}

@media(min-width: 48rem) {
  .ln7-max-width-adaptive-lg {
    max-width: 48rem;
  }
}

@media(min-width: 64rem) {
  .ln7-max-width-adaptive-lg {
    max-width: 64rem;
  }
}

@media(min-width: 80rem) {
  .ln7-max-width-adaptive-lg {
    max-width: 80rem;
  }
}

.ln7-container {
  width: calc(100% - 2*var(--ln7-space-md));
  margin-left: auto;
  margin-right: auto;
}

.ln7-padding-y-xl {
  padding-top: var(--ln7-space-xl);
  padding-bottom: var(--ln7-space-xl);
}

.ln7-max-width-adaptive-md {
  max-width: 32rem;
}

@media(min-width: 48rem) {
  .ln7-max-width-adaptive-md {
    max-width: 48rem;
  }
}

@media(min-width: 64rem) {
  .ln7-max-width-adaptive-md {
    max-width: 64rem;
  }
}

.ln7-padding-y-lg {
  padding-top: var(--ln7-space-lg);
  padding-bottom: var(--ln7-space-lg);
}

.ln7-col-12 {
  grid-column-end: span 12;
}

@media(min-width: 64rem){
  .ln7-items-start\@md {
    align-items: flex-start;
  }

  .ln7-flex-column\@md {
    flex-direction: column;
  }

  .ln7-margin-bottom-0\@md {
    margin-bottom: 0;
  }

  .ln7-text-left\@md {
    text-align: left;
  }

  .ln7-justify-center\@md {
    justify-content: center;
  }

  .ln7-flex-column-reverse\@md {
    flex-direction: column-reverse;
  }

  .ln7-order-2\@md {
    order: 2;
  }

  .ln7-items-center\@md {
    align-items: center;
  }

  .ln7-gap-lg\@md {
    gap: var(--ln7-space-lg);
  }

  .ln7-col-5\@md {
    grid-column-end: span 5;
  }

  .ln7-col-7\@md {
    grid-column-end: span 7;
  }
}

@media(min-width: 80rem){
  .ln7-margin-bottom-0\@lg {
    margin-bottom: 0;
  }
}
/* -------------------------------- 

File#: _1_image-magnifier
Title: Image Magnifier
Descr: Plugin to create a magnifying effect on an image
-

-------------------------------- */
/* reset */
*, *::after, *::before {
  box-sizing: border-box;
}

* {
  font: inherit;
  margin: 0;
  padding: 0;
  border: 0;
}

body {
  background-color: hsl(0, 0%, 100%);
  font-family: system-ui, sans-serif;
  color: hsl(230, 7%, 23%);
  font-size: 1rem;
}

h1, h2, h3, h4 {
  line-height: 1.2;
  color: hsl(230, 13%, 9%);
  font-weight: 700;
}

h1 {
  font-size: 2.0736rem;
}

h2 {
  font-size: 1.728rem;
}

h3 {
  font-size: 1.25rem;
}

h4 {
  font-size: 1.2rem;
}

ol, ul, menu {
  list-style: none;
}

button, input, textarea, select {
  background-color: transparent;
  border-radius: 0;
  color: inherit;
  line-height: inherit;
  appearance: none;
}

textarea {
  resize: vertical;
  overflow: auto;
  vertical-align: top;
}

a {
  color: hsl(250, 84%, 54%);
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

img, video, svg {
  display: block;
  max-width: 100%;
}

@media (min-width: 64rem) {
  body {
    font-size: 1.25rem;
  }

  h1 {
    font-size: 3.051rem;
  }

    h2 {
    font-size: 2.44rem;
  }

    h3 {
    font-size: 1.75rem;
  }

    h4 {
    font-size: 1.5625rem;
  }
}

/* variables */
:root {
  /* colors */
  --it7-color-primary-hsl: 250, 84%, 54%;
  --it7-color-bg-hsl: 0, 0%, 100%;
  --it7-color-contrast-high-hsl: 230, 7%, 23%;
  --it7-color-contrast-higher-hsl: 230, 13%, 9%;
}

/* component */
.img-mag {
  overflow: hidden;
}

.img-mag__asset {
  display: block;
  width: 100%;
  -webkit-transform-origin: left top;
          transform-origin: left top;
}
/* -------------------------------- 

File#: _1_button-effects
Title: Button Effects
Descr: A collection of button effects
-

-------------------------------- */
/* reset */
*, *::after, *::before {
  box-sizing: border-box;
}

* {
  font: inherit;
  margin: 0;
  padding: 0;
  border: 0;
}

body {
  background-color: hsl(0, 0%, 100%);
  font-family: system-ui, sans-serif;
  color: hsl(230, 7%, 23%);
  font-size: 1rem;
}

h1, h2, h3, h4 {
  line-height: 1.2;
  color: hsl(230, 13%, 9%);
  font-weight: 700;
}

h1 {
  font-size: 2.0736rem;
}

h2 {
  font-size: 1.728rem;
}

h3 {
  font-size: 1.25rem;
}

h4 {
  font-size: 1.2rem;
}

ol, ul, menu {
  list-style: none;
}

button, input, textarea, select {
  background-color: transparent;
  border-radius: 0;
  color: inherit;
  line-height: inherit;
  appearance: none;
}

textarea {
  resize: vertical;
  overflow: auto;
  vertical-align: top;
}

a {
  color: hsl(250, 84%, 54%);
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

img, video, svg {
  display: block;
  max-width: 100%;
}

@media (min-width: 64rem) {
  body {
    font-size: 1.25rem;
  }

  h1 {
    font-size: 3.051rem;
  }

    h2 {
    font-size: 2.44rem;
  }

    h3 {
    font-size: 1.75rem;
  }

    h4 {
    font-size: 1.5625rem;
  }
}

/* variables */
:root {
  /* colors */
  --bp3-color-primary-hsl: 250, 84%, 54%;
  --bp3-color-bg-hsl: 0, 0%, 100%;
  --bp3-color-contrast-high-hsl: 230, 7%, 23%;
  --bp3-color-contrast-higher-hsl: 230, 13%, 9%;
  --bp3-color-white-hsl: 0, 0%, 100%;

  /* spacing */
  --bp3-space-2xs: 0.375rem;
  --bp3-space-xs: 0.5rem;
  --bp3-space-sm: 0.75rem;
  --bp3-space-md: 1.25rem;

  /* typography */
  --bp3-text-sm: 0.833rem;
}

@media(min-width: 64rem){
  :root {
    /* spacing */
    --bp3-space-2xs: 0.5625rem;
    --bp3-space-xs: 0.75rem;
    --bp3-space-sm: 1.125rem;
    --bp3-space-md: 2rem;

    /* typography */
    --bp3-text-sm: 1rem;
  }
}

/* icons */
.bp3-icon {
  height: var(--bp3-size, 1em);
  width: var(--bp3-size, 1em);
  display: inline-block;
  color: inherit;
  fill: currentColor;
  line-height: 1;
  flex-shrink: 0;
  max-width: initial;
}

/* component */
.btn-fx-1 {
  --border-radius: 0.25em;
  --transition-duration: .3s;
  position: relative;
  display: inline-block;
  border-radius: var(--border-radius);
  line-height: 1;
  text-decoration: none;
  color: hsl(var(--bp3-color-primary-hsl));
  transition: var(--transition-duration);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  cursor: pointer;
}
.btn-fx-1 span, .btn-fx-1 .btn-fx-1__icon-wrapper {
  position: relative;
  z-index: 2;
}
.btn-fx-1 .bp3-icon {
  display: block;
  will-change: transform;
  transition: var(--transition-duration);
}
.btn-fx-1 .bp3-icon:first-child {
  color: hsl(var(--bp3-color-primary-hsl));
}
.btn-fx-1 .bp3-icon:last-child {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  color: hsl(var(--bp3-color-white-hsl));
  -webkit-transform: translateY(100%);
          transform: translateY(100%);
}
.btn-fx-1:hover {
  color: hsl(var(--bp3-color-white-hsl));
}
.btn-fx-1:hover .bp3-icon:first-child {
  opacity: 0;
  -webkit-transform: translateY(-100%);
          transform: translateY(-100%);
}
.btn-fx-1:hover .bp3-icon:last-child {
  opacity: 1;
  -webkit-transform: translateY(0);
          transform: translateY(0);
}
.btn-fx-1:hover .btn-fx-1__inner::after {
  -webkit-transform: skewY(0deg) scaleY(2);
          transform: skewY(0deg) scaleY(2);
}
.btn-fx-1:focus {
  outline: none;
  box-shadow: 0 0 0 1px hsl(var(--bp3-color-bg-hsl)), 0 0 0 3px hsl(var(--bp3-color-primary-hsl));
}

.btn-fx-1__inner {
  position: relative;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  background-color: hsla(var(--bp3-color-primary-hsl), 0.15);
  overflow: hidden;
  -webkit-clip-path: inset(0% 0% 0% 0% round var(--border-radius));
          clip-path: inset(0% 0% 0% 0% round var(--border-radius));
}
.btn-fx-1__inner::after {
  content: "";
  position: absolute;
  z-index: 1;
  top: 50%;
  left: -5%;
  width: 110%;
  height: 100%;
  background-color: hsl(var(--bp3-color-primary-hsl));
  -webkit-transform-origin: center bottom;
          transform-origin: center bottom;
  -webkit-transform: skewY(10deg) scaleY(0);
          transform: skewY(10deg) scaleY(0);
  transition: -webkit-transform var(--transition-duration);
  transition: transform var(--transition-duration);
  transition: transform var(--transition-duration), -webkit-transform var(--transition-duration);
}

.btn-fx-2 {
  position: relative;
  line-height: 1;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
}
.btn-fx-2 span {
  position: relative;
  display: inline-flex;
  -webkit-clip-path: inset(0%);
          clip-path: inset(0%);
}
.btn-fx-2 em {
  display: inline-flex;
}
.btn-fx-2 em * {
  color: hsl(var(--bp3-color-primary-hsl));
  padding: 0.25em 0;
  will-change: transform;
  transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
  transition: transform 0.3s, -webkit-transform 0.3s;
}
.btn-fx-2 em:last-child {
  position: absolute;
  top: 0;
  left: 0;
}
.btn-fx-2 em:last-child * {
  -webkit-transform: translateY(100%);
          transform: translateY(100%);
}
.btn-fx-2::before, .btn-fx-2::after {
  content: "";
  position: absolute;
  bottom: 0;
  height: 2px;
  left: 0;
  width: 100%;
}
.btn-fx-2::before {
  background-color: hsla(var(--bp3-color-primary-hsl), 0.2);
}
.btn-fx-2::after {
  background-color: hsl(var(--bp3-color-primary-hsl));
  -webkit-transform: scaleX(0);
          transform: scaleX(0);
  transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
  transition: transform 0.3s, -webkit-transform 0.3s;
  -webkit-transform-origin: right center;
          transform-origin: right center;
}
.btn-fx-2:hover em *:nth-child(2) {
  transition-delay: 0.05s;
}
.btn-fx-2:hover em *:nth-child(3) {
  transition-delay: 0.1s;
}
.btn-fx-2:hover em *:nth-child(4) {
  transition-delay: 0.15s;
}
.btn-fx-2:hover em *:nth-child(5) {
  transition-delay: 0.2s;
}
.btn-fx-2:hover em *:nth-child(6) {
  transition-delay: 0.25s;
}
.btn-fx-2:hover em *:nth-child(7) {
  transition-delay: 0.3s;
}
.btn-fx-2:hover em *:nth-child(8) {
  transition-delay: 0.35s;
}
.btn-fx-2:hover em *:nth-child(9) {
  transition-delay: 0.4s;
}
.btn-fx-2:hover em *:nth-child(10) {
  transition-delay: 0.45s;
}
.btn-fx-2:hover em:first-child * {
  -webkit-transform: translateY(-100%);
          transform: translateY(-100%);
}
.btn-fx-2:hover em:last-child * {
  -webkit-transform: translateY(0);
          transform: translateY(0);
}
.btn-fx-2:hover::after {
  -webkit-transform: scaleX(1);
          transform: scaleX(1);
  -webkit-transform-origin: left center;
          transform-origin: left center;
}

.btn-fx-3 {
  --transition-duration: 0.3s;
  position: relative;
  display: inline-block;
  color: hsl(var(--bp3-color-bg-hsl));
  line-height: 1;
  text-decoration: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  cursor: pointer;
  will-change: transform;
  transition: -webkit-transform var(--transition-duration);
  transition: transform var(--transition-duration);
  transition: transform var(--transition-duration), -webkit-transform var(--transition-duration);
}
.btn-fx-3 span {
  will-change: transform;
  transition: opacity var(--transition-duration), -webkit-transform var(--transition-duration) cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: opacity var(--transition-duration), transform var(--transition-duration) cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: opacity var(--transition-duration), transform var(--transition-duration) cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform var(--transition-duration) cubic-bezier(0.215, 0.61, 0.355, 1);
}
.btn-fx-3::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: hsl(var(--bp3-color-contrast-higher-hsl));
  border-radius: inherit;
  will-change: transform;
  transition: box-shadow var(--transition-duration), -webkit-transform var(--transition-duration) cubic-bezier(0.34, 1.56, 0.64, 1);
  transition: transform var(--transition-duration) cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow var(--transition-duration);
  transition: transform var(--transition-duration) cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow var(--transition-duration), -webkit-transform var(--transition-duration) cubic-bezier(0.34, 1.56, 0.64, 1);
}
.btn-fx-3:active {
  -webkit-transform: scale(0.9);
          transform: scale(0.9);
}
.btn-fx-3:hover span {
  opacity: 0;
  -webkit-transform: scale(0.5);
          transform: scale(0.5);
}
.btn-fx-3:hover::before {
  -webkit-transform: scale(1.1);
          transform: scale(1.1);
}
.btn-fx-3:hover .btn-fx-3__icon-wrapper {
  -webkit-transform: translateY(0);
          transform: translateY(0);
}
.btn-fx-3:focus {
  outline: none;
}
.btn-fx-3:focus::before {
  box-shadow: 0 0.3px 0.4px rgba(0, 0, 0, 0.025),0 0.9px 1.5px rgba(0, 0, 0, 0.05), 0 3.5px 6px rgba(0, 0, 0, 0.1), 0 0 0 3px hsla(var(--bp3-color-contrast-higher-hsl), 0.15);
}

.btn-fx-3__inner {
  position: relative;
  z-index: 2;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  -webkit-clip-path: inset(0%);
          clip-path: inset(0%);
}

.btn-fx-3__icon-wrapper {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  will-change: transform;
  -webkit-transform: translateY(100%);
          transform: translateY(100%);
  transition: -webkit-transform var(--transition-duration) cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: transform var(--transition-duration) cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: transform var(--transition-duration) cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform var(--transition-duration) cubic-bezier(0.215, 0.61, 0.355, 1);
}
.btn-fx-3__icon-wrapper .bp3-icon {
  margin: auto;
}

.btn-fx-4 {
  --transition-duration: .3s;
  position: relative;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  background-color: hsl(var(--bp3-color-contrast-higher-hsl));
  box-shadow: 0 0.3px 0.4px rgba(0, 0, 0, 0.025),0 0.9px 1.5px rgba(0, 0, 0, 0.05), 0 3.5px 6px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  line-height: 1;
  text-decoration: none;
  color: hsl(var(--bp3-color-bg-hsl));
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: var(--transition-duration);
}
.btn-fx-4 span {
  position: relative;
  z-index: 2;
}
.btn-fx-4::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: hsla(var(--bp3-color-bg-hsl), 0.25);
  will-change: transform;
  -webkit-transform: skewX(-15deg) translate(calc(-100% - 0.5em));
          transform: skewX(-15deg) translate(calc(-100% - 0.5em));
  pointer-events: none;
}
.btn-fx-4:hover::before {
  -webkit-transform: skewX(-15deg) translate(calc(100% + 0.5em));
          transform: skewX(-15deg) translate(calc(100% + 0.5em));
  transition: -webkit-transform var(--transition-duration);
  transition: transform var(--transition-duration);
  transition: transform var(--transition-duration), -webkit-transform var(--transition-duration);
}
.btn-fx-4:focus {
  outline: none;
  box-shadow: 0 0.3px 0.4px rgba(0, 0, 0, 0.025),0 0.9px 1.5px rgba(0, 0, 0, 0.05), 0 3.5px 6px rgba(0, 0, 0, 0.1), 0 0 0 3px hsla(var(--bp3-color-contrast-higher-hsl), 0.15);
}

/* utility classes */
.bp3-margin-left-2xs {
  margin-left: var(--bp3-space-2xs);
}

.bp3-padding-x-sm {
  padding-left: var(--bp3-space-sm);
  padding-right: var(--bp3-space-sm);
}

.bp3-padding-y-xs {
  padding-top: var(--bp3-space-xs);
  padding-bottom: var(--bp3-space-xs);
}

.bp3-padding-x-md {
  padding-left: var(--bp3-space-md);
  padding-right: var(--bp3-space-md);
}

.bp3-radius-md {
  border-radius: 0.25em;
}

.bp3-text-sm {
  font-size: var(--bp3-text-sm);
}
/* -------------------------------- 

File#: _1_menu
Title: Menu
Descr: Application menu that provides access to a set of functionalities
-

-------------------------------- */
/* reset */
*, *::after, *::before {
  box-sizing: border-box;
}

* {
  font: inherit;
  margin: 0;
  padding: 0;
  border: 0;
}

body {
  background-color: hsl(0, 0%, 100%);
  font-family: system-ui, sans-serif;
  color: hsl(230, 7%, 23%);
  font-size: 1rem;
}

h1, h2, h3, h4 {
  line-height: 1.2;
  color: hsl(230, 13%, 9%);
  font-weight: 700;
}

h1 {
  font-size: 2.0736rem;
}

h2 {
  font-size: 1.728rem;
}

h3 {
  font-size: 1.25rem;
}

h4 {
  font-size: 1.2rem;
}

ol, ul, menu {
  list-style: none;
}

button, input, textarea, select {
  background-color: transparent;
  border-radius: 0;
  color: inherit;
  line-height: inherit;
  appearance: none;
}

textarea {
  resize: vertical;
  overflow: auto;
  vertical-align: top;
}

a {
  color: hsl(250, 84%, 54%);
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

img, video, svg {
  display: block;
  max-width: 100%;
}

@media (min-width: 64rem) {
  body {
    font-size: 1.25rem;
  }

  h1 {
    font-size: 3.051rem;
  }

    h2 {
    font-size: 2.44rem;
  }

    h3 {
    font-size: 1.75rem;
  }

    h4 {
    font-size: 1.5625rem;
  }
}

/* variables */
:root {
  /* colors */
  --mw1-color-primary-hsl: 250, 84%, 54%;
  --mw1-color-bg-hsl: 0, 0%, 100%;
  --mw1-color-contrast-high-hsl: 230, 7%, 23%;
  --mw1-color-contrast-higher-hsl: 230, 13%, 9%;
  --mw1-color-contrast-lower-hsl: 240, 4%, 85%;
  --mw1-color-contrast-medium-hsl: 225, 4%, 47%;
  --mw1-color-bg-light-hsl: 0, 0%, 100%;
  --mw1-color-bg-dark-hsl: 240, 4%, 95%;
  --mw1-color-white-hsl: 0, 0%, 100%;
  --mw1-color-primary-darker-hsl: 250, 84%, 38%;
  --mw1-color-primary-light-hsl: 250, 84%, 60%;

  /* spacing */
  --mw1-space-3xs: 0.25rem;
  --mw1-space-2xs: 0.375rem;
  --mw1-space-xs: 0.5rem;
  --mw1-space-sm: 0.75rem;

  /* typography */
  --mw1-text-sm: 0.833rem;
}

@media(min-width: 64rem){
  :root {
    /* spacing */
    --mw1-space-3xs: 0.375rem;
    --mw1-space-2xs: 0.5625rem;
    --mw1-space-xs: 0.75rem;
    --mw1-space-sm: 1.125rem;

    /* typography */
    --mw1-text-sm: 1rem;
  }
}

/* buttons */
.mw1-btn {
  position: relative;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  font-size: 1em;
  white-space: nowrap;
  text-decoration: none;
  background: hsl(var(--mw1-color-bg-dark-hsl));
  color: hsl(var(--mw1-color-contrast-higher-hsl));
  cursor: pointer;
  text-decoration: none;
  line-height: 1.2;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: all 0.2s ease;
  will-change: transform;
  padding: var(--mw1-space-2xs) var(--mw1-space-sm);
  border-radius: 0.25em;
}

.mw1-btn:focus-visible {
  box-shadow: 0px 0px 0px 2px hsl(var(--mw1-color-bg-hsl)), 0px 0px 0px 4px hsla(var(--mw1-color-contrast-higher-hsl), 0.15);
  outline: none;
}

.mw1-btn:active {
  transform: translateY(2px);
}

.mw1-btn--primary {
  background: hsl(var(--mw1-color-primary-hsl));
  color: hsl(var(--mw1-color-white-hsl));
  box-shadow: inset 0px 1px 0px hsla(var(--mw1-color-white-hsl), 0.15), 0px 1px 3px hsla(var(--mw1-color-primary-darker-hsl), 0.25), 0px 2px 6px hsla(var(--mw1-color-primary-darker-hsl), 0.1), 0px 6px 10px -2px hsla(var(--mw1-color-primary-darker-hsl), 0.25);
}

.mw1-btn--primary:hover {
  background: hsl(var(--mw1-color-primary-light-hsl));
  box-shadow: inset 0px 1px 0px hsla(var(--mw1-color-white-hsl), 0.15), 0px 1px 2px hsla(var(--mw1-color-primary-darker-hsl), 0.25), 0px 1px 4px hsla(var(--mw1-color-primary-darker-hsl), 0.1), 0px 3px 6px -2px hsla(var(--mw1-color-primary-darker-hsl), 0.25);
}

.mw1-btn--primary:focus {
  box-shadow: inset 0px 1px 0px hsla(var(--mw1-color-white-hsl), 0.15), 0px 1px 2px hsla(var(--mw1-color-primary-darker-hsl), 0.25), 0px 1px 4px hsla(var(--mw1-color-primary-darker-hsl), 0.1), 0px 3px 6px -2px hsla(var(--mw1-color-primary-darker-hsl), 0.25), 0px 0px 0px 2px hsl(var(--mw1-color-bg-hsl)), 0px 0px 0px 4px hsl(var(--mw1-color-primary-hsl));
}

/* icons */
.mw1-icon {
  height: var(--mw1-size, 1em);
  width: var(--mw1-size, 1em);
  display: inline-block;
  color: inherit;
  fill: currentColor;
  line-height: 1;
  flex-shrink: 0;
  max-width: initial;
}

/* component */
.menu {
  --menu-vertical-gap: 4px;
  /* vertical gap between the Menu element and its control */
  --menu-item-padding: var(--mw1-space-3xs) var(--mw1-space-xs);
  list-style: none;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  position: fixed;
  /* top/left position set in JS */
  z-index: 5;
  width: 220px;
  background-color: hsl(var(--mw1-color-bg-light-hsl));
  box-shadow: inset 0 0 0.5px 1px hsla(0, 0%, 100%, 0.075), 0 0.9px 1.5px rgba(0, 0, 0, 0.03),0 3.1px 5.5px rgba(0, 0, 0, 0.08),0 14px 25px rgba(0, 0, 0, 0.12);
  padding: var(--mw1-space-2xs) 0;
  border-radius: 0.25em;
  margin-top: var(--menu-vertical-gap);
  margin-bottom: var(--menu-vertical-gap);
  overflow: auto;
  /* use rem units */
  --space-unit: 1rem;
  --text-unit: 1rem;
  font-size: var(--text-unit);
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s 0.2s, opacity 0.2s;
}

.menu--is-visible {
  visibility: visible;
  opacity: 1;
  transition: visibility 0s, opacity 0.2s;
}

.menu--overlay {
  z-index: 15;
}

.menu__content {
  display: flex;
  align-items: center;
  padding: var(--menu-item-padding);
  text-decoration: none;
  /* reset link style */
  color: hsl(var(--mw1-color-contrast-high-hsl));
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: 0.2s;
}
.menu__content:hover {
  background-color: hsla(var(--mw1-color-contrast-higher-hsl), 0.075);
}
.menu__content:focus {
  outline: none;
  background-color: hsla(var(--mw1-color-primary-hsl), 0.15);
}

.menu__label {
  padding: var(--menu-item-padding);
  font-size: var(--mw1-text-sm);
  color: hsl(var(--mw1-color-contrast-medium-hsl));
}

.menu__separator {
  height: 1px;
  background-color: hsl(var(--mw1-color-contrast-lower-hsl));
  margin: var(--menu-item-padding);
}

.menu__icon {
  color: hsla(var(--mw1-color-contrast-higher-hsl), 0.5);
  margin-right: var(--mw1-space-2xs);
}
/* -------------------------------- 

File#: _2_table-of-contents
Title: Table of Contents
Descr: A navigation with a list of links to the main sections of the page 
-

-------------------------------- */
/* reset */
*, *::after, *::before {
  box-sizing: border-box;
}

* {
  font: inherit;
  margin: 0;
  padding: 0;
  border: 0;
}

body {
  background-color: hsl(0, 0%, 100%);
  font-family: system-ui, sans-serif;
  color: hsl(230, 7%, 23%);
  font-size: 1rem;
}

h1, h2, h3, h4 {
  line-height: 1.2;
  color: hsl(230, 13%, 9%);
  font-weight: 700;
}

h1 {
  font-size: 2.0736rem;
}

h2 {
  font-size: 1.728rem;
}

h3 {
  font-size: 1.25rem;
}

h4 {
  font-size: 1.2rem;
}

ol, ul, menu {
  list-style: none;
}

button, input, textarea, select {
  background-color: transparent;
  border-radius: 0;
  color: inherit;
  line-height: inherit;
  appearance: none;
}

textarea {
  resize: vertical;
  overflow: auto;
  vertical-align: top;
}

a {
  color: hsl(250, 84%, 54%);
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

img, video, svg {
  display: block;
  max-width: 100%;
}

@media (min-width: 64rem) {
  body {
    font-size: 1.25rem;
  }

  h1 {
    font-size: 3.051rem;
  }

    h2 {
    font-size: 2.44rem;
  }

    h3 {
    font-size: 1.75rem;
  }

    h4 {
    font-size: 1.5625rem;
  }
}

/* variables */
:root {
  /* colors */
  --tb9-color-primary-hsl: 250, 84%, 54%;
  --tb9-color-bg-hsl: 0, 0%, 100%;
  --tb9-color-contrast-high-hsl: 230, 7%, 23%;
  --tb9-color-contrast-higher-hsl: 230, 13%, 9%;
  --tb9-color-contrast-lower-hsl: 240, 4%, 85%;
  --tb9-color-contrast-medium-hsl: 225, 4%, 47%;
  --tb9-color-bg-light-hsl: 0, 0%, 100%;
  --tb9-color-accent-hsl: 342, 89%, 48%;

  /* spacing */
  --tb9-space-4xs: 0.125rem;
  --tb9-space-3xs: 0.25rem;
  --tb9-space-2xs: 0.375rem;
  --tb9-space-xs: 0.5rem;
  --tb9-space-sm: 0.75rem;
  --tb9-space-md: 1.25rem;

  /* typography */
  --tb9-text-sm: 0.833rem;
  --tb9-text-xs: 0.694rem;
  --tb9-text-sm: 0.833rem;
}

@media(min-width: 64rem){
  :root {
    /* spacing */
    --tb9-space-4xs: 0.1875rem;
    --tb9-space-3xs: 0.375rem;
    --tb9-space-2xs: 0.5625rem;
    --tb9-space-xs: 0.75rem;
    --tb9-space-sm: 1.125rem;
    --tb9-space-md: 2rem;

    /* typography */
    --tb9-text-sm: 1rem;
    --tb9-text-xs: 0.8rem;
    --tb9-text-sm: 1rem;
  }
}

/* icons */
.tb9-icon {
  height: var(--tb9-size, 1em);
  width: var(--tb9-size, 1em);
  display: inline-block;
  color: inherit;
  fill: currentColor;
  line-height: 1;
  flex-shrink: 0;
  max-width: initial;
}

.tb9-icon--xs {
  --tb9-size: 16px;
}

/* component */
:root {
  --toc-border-width: 1px;
  /* static version only */
}

/* #region (style affecting collapsed + static versions) 👇 */
.toc {
  --space-unit: 1rem;
  /* use rem units for spacing */
}

.toc__list {
  position: relative;
}
.toc__list .toc__list .toc__link {
  padding-left: calc(var(--tb9-space-sm) * 2);
  /* offset sub nav */
}

.toc__link,
.toc__label {
  padding: var(--tb9-space-3xs) var(--tb9-space-sm);
}

.toc__link {
  position: relative;
  color: hsl(var(--tb9-color-contrast-medium-hsl));
  text-decoration: none;
}
.toc__link::before {
  /* left mark */
  content: "";
  width: var(--toc-border-width);
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}
.toc__link:hover {
  color: hsl(var(--tb9-color-contrast-high-hsl));
}

.toc__link--selected {
  color: hsl(var(--tb9-color-primary-hsl));
}
.toc__link--selected:hover {
  color: hsl(var(--tb9-color-primary-hsl));
}

.toc__label {
  /* label style */
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: var(--tb9-text-sm);
}

.toc__control {
  /* control button */
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.toc__control-text {
  /* text inside control button */
  position: relative;
}
.toc__control-text > * {
  display: inline-block;
  transition: opacity 0.4s, -webkit-transform 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: opacity 0.4s, transform 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: opacity 0.4s, transform 0.4s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.toc__control-text > *:last-child {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  pointer-events: none;
  -webkit-transform: translateY(-10px);
          transform: translateY(-10px);
}

.toc__icon-arrow {
  /* arrow icon  */
}
.toc__icon-arrow .icon__group {
  will-change: transform;
  -webkit-transform-origin: 8px 8px;
          transform-origin: 8px 8px;
  transition: -webkit-transform 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: transform 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: transform 0.3s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.toc__icon-arrow .icon__group > * {
  -webkit-transform-origin: 8px 8px;
          transform-origin: 8px 8px;
  stroke-dasharray: 17;
  -webkit-transform: translateY(3px);
          transform: translateY(3px);
  transition: stroke-dashoffset 0.3s, -webkit-transform 0.3s;
  transition: transform 0.3s, stroke-dashoffset 0.3s;
  transition: transform 0.3s, stroke-dashoffset 0.3s, -webkit-transform 0.3s;
  transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
.toc__icon-arrow .icon__group > *:first-child {
  stroke-dashoffset: 10;
}
.toc__icon-arrow .icon__group > *:last-child {
  stroke-dashoffset: 10;
}

.toc-content__target {
  scroll-margin-top: var(--tb9-space-4xs);
}

/* #endregion */
/* #region (collapsed version only - mobile 👇) */
.toc:not(.toc--static) {
  border-radius: 0.25em;
  background-color: hsl(var(--tb9-color-bg-light-hsl));
  box-shadow: inset 0 0 0.5px 1px hsla(0, 0%, 100%, 0.075), 0 0.3px 0.4px rgba(0, 0, 0, 0.025),0 0.9px 1.5px rgba(0, 0, 0, 0.05), 0 3.5px 6px rgba(0, 0, 0, 0.1);
  transition: 0.3s;
}
.toc:not(.toc--static):hover {
  box-shadow: inset 0 0 0.5px 1px hsla(0, 0%, 100%, 0.075), 0 0.9px 1.5px rgba(0, 0, 0, 0.03),0 3.1px 5.5px rgba(0, 0, 0, 0.08),0 14px 25px rgba(0, 0, 0, 0.12);
}
.toc:not(.toc--static) .toc__nav {
  /* navigation */
  display: none;
  margin: var(--tb9-space-2xs) 0;
}
.toc:not(.toc--static) .toc__list {
  padding-bottom: var(--tb9-space-xs);
}
.toc:not(.toc--static) .toc__label {
  display: none;
}
.toc:not(.toc--static) .toc__link {
  display: flex;
}
.toc:not(.toc--static).toc--expanded .toc__control-text > *:first-child {
  -webkit-transform: translateY(10px);
          transform: translateY(10px);
  opacity: 0;
  pointer-events: none;
}
.toc:not(.toc--static).toc--expanded .toc__control-text > *:last-child {
  opacity: 1;
  pointer-events: auto;
  -webkit-transform: translateY(0);
          transform: translateY(0);
}
.toc:not(.toc--static).toc--expanded .toc__nav {
  display: block;
  -webkit-animation: toc-entry-animation 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
          animation: toc-entry-animation 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.toc:not(.toc--static).toc--expanded .toc__icon-arrow .icon__group {
  /* animate arrow icon */
  -webkit-transform: rotate(-90deg);
          transform: rotate(-90deg);
}
.toc:not(.toc--static).toc--expanded .toc__icon-arrow .icon__group > *:first-child, .toc:not(.toc--static).toc--expanded .toc__icon-arrow .icon__group *:last-child {
  stroke-dashoffset: 0;
  -webkit-transform: translateY(0px);
          transform: translateY(0px);
}

/* #endregion */
/* #region (static version only - desktop 👇) */
.toc--static {
  box-shadow: inset var(--toc-border-width) 0 0 hsl(var(--tb9-color-contrast-lower-hsl));
  /* left border */
}
.toc--static[class*=position-sticky] {
  top: var(--tb9-space-md);
  /* used if position = sticky */
  max-height: calc(100vh - var(--tb9-space-md) * 2);
  /* set max height */
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
.toc--static .toc__label {
  font-size: var(--tb9-text-xs);
}
.toc--static .toc__link {
  display: inline-flex;
  font-size: var(--tb9-text-sm);
}
.toc--static .toc__link--selected::before {
  background-color: hsl(var(--tb9-color-primary-hsl));
}
.toc--static .toc__control {
  /* control - static version only */
  display: none;
}

.toc-content--toc-static *:target {
  -webkit-animation: toc-target 2s;
          animation: toc-target 2s;
  /* highlight section on target */
}

/* #endregion */
@-webkit-keyframes toc-target {
  0%, 50% {
    outline: 2px solid hsla(var(--tb9-color-primary-hsl), 0.5);
  }
  100% {
    outline: 2px solid hsla(var(--tb9-color-primary-hsl), 0);
  }
}
@keyframes toc-target {
  0%, 50% {
    outline: 2px solid hsla(var(--tb9-color-primary-hsl), 0.5);
  }
  100% {
    outline: 2px solid hsla(var(--tb9-color-primary-hsl), 0);
  }
}
@-webkit-keyframes toc-entry-animation {
  from {
    opacity: 0;
    -webkit-transform: translateY(-10px);
            transform: translateY(-10px);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@keyframes toc-entry-animation {
  from {
    opacity: 0;
    -webkit-transform: translateY(-10px);
            transform: translateY(-10px);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
/* used in JS - detect when the TOC needs to switch from a collapsed to a static version */
[class*=toc--static]::before {
  display: none;
  content: "collapsed";
}

@media (min-width: 32rem) {
  .toc--static\@xs::before {
    content: "static";
  }
}
@media (min-width: 48rem) {
  .toc--static\@sm::before {
    content: "static";
  }
}
@media (min-width: 64rem) {
  .toc--static\@md::before {
    content: "static";
  }
}
@media (min-width: 80rem) {
  .toc--static\@lg::before {
    content: "static";
  }
}
@media (min-width: 90rem) {
  .toc--static\@xl::before {
    content: "static";
  }
}

/* utility classes */
.tb9-article {
  --tb9-heading-line-height: 1.22;
  --tb9-body-line-height: 1.66;
  --tb9-space-multiplier: 1.2;
}

.tb9-text-component :where(h1, h2, h3, h4) {
  line-height: var(--tb9-heading-line-height, 1.2);
  margin-top: calc(var(--tb9-space-md) * var(--tb9-space-multiplier, 1));
  margin-bottom: calc(var(--tb9-space-sm) * var(--tb9-space-multiplier, 1));
}

.tb9-text-component :where(p, blockquote, ul li, ol li) {
  line-height: var(--tb9-body-line-height, 1.4);
}

.tb9-text-component :where(ul, ol, p, blockquote, .tb9-text-component__block) {
  margin-bottom: calc(var(--tb9-space-sm) * var(--tb9-space-multiplier, 1));
}

.tb9-text-component :where(ul, ol) {
  padding-left: 1.25em;
}

.tb9-text-component ul :where(ul, ol), .tb9-text-component ol :where(ul, ol) {
  padding-left: 1em;
  margin-bottom: 0;
}

.tb9-text-component ul {
  list-style-type: disc;
}

.tb9-text-component ol {
  list-style-type: decimal;
}

.tb9-text-component img {
  display: block;
  margin: 0 auto;
}

.tb9-text-component figcaption {
  margin-top: calc(var(--tb9-space-xs) * var(--tb9-space-multiplier, 1));
  font-size: var(--tb9-text-sm);
  text-align: center;}

.tb9-text-component em {
  font-style: italic;
}

.tb9-text-component strong {
  font-weight: bold;
}

.tb9-text-component s {
  text-decoration: line-through;
}

.tb9-text-component u {
  text-decoration: underline;
}

.tb9-text-component mark {
  background-color: hsla(var(--tb9-color-accent-hsl), 0.2);
  color: inherit;
}

.tb9-text-component blockquote {
  padding-left: 1em;
  border-left: 4px solid hsl(var(--tb9-color-contrast-lower-hsl));
  font-style: italic;
}

.tb9-text-component hr {
  margin: calc(var(--tb9-space-md) * var(--tb9-space-multiplier, 1)) auto;
  background: hsl(var(--tb9-color-contrast-lower-hsl));
  height: 1px;
}

.tb9-text-component > *:first-child {
  margin-top: 0;
}

.tb9-text-component > *:last-child {
  margin-bottom: 0;
}

.tb9-text-component.tb9-line-height-xs {
  --tb9-heading-line-height: 1;
  --tb9-body-line-height: 1.1;
}

.tb9-text-component.tb9-line-height-sm {
  --tb9-heading-line-height: 1.1;
  --tb9-body-line-height: 1.2;
}

.tb9-text-component.tb9-line-height-md {
  --tb9-heading-line-height: 1.15;
  --tb9-body-line-height: 1.4;
}

.tb9-text-component.tb9-line-height-lg {
  --tb9-heading-line-height: 1.22;
  --tb9-body-line-height: 1.58;
}

.tb9-text-component.tb9-line-height-xl {
  --tb9-heading-line-height: 1.3;
  --tb9-body-line-height: 1.72;
}

.tb9-margin-left-3xs {
  margin-left: var(--tb9-space-3xs);
}

.tb9-sr-only {
  position: absolute;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  width: 1px;
  height: 1px;
  overflow: hidden;
  padding: 0;
  border: 0;
  white-space: nowrap;
}

.tb9-padding-sm {
  padding: var(--tb9-space-sm);
}

.tb9-gap-md {
  gap: var(--tb9-space-md);
}

.tb9-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
}

.tb9-grid > * {
  min-width: 0;
  grid-column-end: span 12;
}

.tb9-max-width-adaptive-md {
  max-width: 32rem;
}

@media(min-width: 48rem) {
  .tb9-max-width-adaptive-md {
    max-width: 48rem;
  }
}

@media(min-width: 64rem) {
  .tb9-max-width-adaptive-md {
    max-width: 64rem;
  }
}

.tb9-container {
  width: calc(100% - 2*var(--tb9-space-md));
  margin-left: auto;
  margin-right: auto;
}

@media(min-width: 64rem){
  .tb9-position-sticky\@md {
    position: sticky;
  }

  .tb9-order-2\@md {
    order: 2;
  }

  .tb9-flex-row-reverse\@md {
    flex-direction: row-reverse;
  }

  .tb9-col-3\@md {
    grid-column-end: span 3;
  }

  .tb9-col-9\@md {
    grid-column-end: span 9;
  }
}
/* -------------------------------- 

File#: _2_slideshow
Title: Slideshow
Descr: Show a collection of items one at a time
-

-------------------------------- */
/* reset */
*, *::after, *::before {
  box-sizing: border-box;
}

* {
  font: inherit;
  margin: 0;
  padding: 0;
  border: 0;
}

body {
  background-color: hsl(0, 0%, 100%);
  font-family: system-ui, sans-serif;
  color: hsl(230, 7%, 23%);
  font-size: 1rem;
}

h1, h2, h3, h4 {
  line-height: 1.2;
  color: hsl(230, 13%, 9%);
  font-weight: 700;
}

h1 {
  font-size: 2.0736rem;
}

h2 {
  font-size: 1.728rem;
}

h3 {
  font-size: 1.25rem;
}

h4 {
  font-size: 1.2rem;
}

ol, ul, menu {
  list-style: none;
}

button, input, textarea, select {
  background-color: transparent;
  border-radius: 0;
  color: inherit;
  line-height: inherit;
  appearance: none;
}

textarea {
  resize: vertical;
  overflow: auto;
  vertical-align: top;
}

a {
  color: hsl(250, 84%, 54%);
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

img, video, svg {
  display: block;
  max-width: 100%;
}

@media (min-width: 64rem) {
  body {
    font-size: 1.25rem;
  }

  h1 {
    font-size: 3.051rem;
  }

    h2 {
    font-size: 2.44rem;
  }

    h3 {
    font-size: 1.75rem;
  }

    h4 {
    font-size: 1.5625rem;
  }
}

/* variables */
:root {
  /* colors */
  --sq7-color-primary-hsl: 250, 84%, 54%;
  --sq7-color-bg-hsl: 0, 0%, 100%;
  --sq7-color-contrast-high-hsl: 230, 7%, 23%;
  --sq7-color-contrast-higher-hsl: 230, 13%, 9%;
  --sq7-color-bg-light-hsl: 0, 0%, 100%;
  --sq7-color-black-hsl: 230, 13%, 9%;
  --sq7-color-white-hsl: 0, 0%, 100%;
  --sq7-color-bg-dark-hsl: 240, 4%, 95%;
  --sq7-color-primary-darker-hsl: 250, 84%, 38%;
  --sq7-color-primary-light-hsl: 250, 84%, 60%;
  --sq7-color-accent-hsl: 342, 89%, 48%;
  --sq7-color-contrast-lower-hsl: 240, 4%, 85%;

  /* spacing */
  --sq7-space-3xs: 0.25rem;
  --sq7-space-xs: 0.5rem;
  --sq7-space-sm: 0.75rem;
  --sq7-space-md: 1.25rem;
  --sq7-space-2xs: 0.375rem;

  /* typography */
  --sq7-text-sm: 0.833rem;
}

@media(min-width: 64rem){
  :root {
    /* spacing */
    --sq7-space-3xs: 0.375rem;
    --sq7-space-xs: 0.75rem;
    --sq7-space-sm: 1.125rem;
    --sq7-space-md: 2rem;
    --sq7-space-2xs: 0.5625rem;

    /* typography */
    --sq7-text-sm: 1rem;
  }
}

/* buttons */
.sq7-btn {
  position: relative;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  font-size: 1em;
  white-space: nowrap;
  text-decoration: none;
  background: hsl(var(--sq7-color-bg-dark-hsl));
  color: hsl(var(--sq7-color-contrast-higher-hsl));
  cursor: pointer;
  text-decoration: none;
  line-height: 1.2;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: all 0.2s ease;
  will-change: transform;
  padding: var(--sq7-space-2xs) var(--sq7-space-sm);
  border-radius: 0.25em;
}

.sq7-btn:focus-visible {
  box-shadow: 0px 0px 0px 2px hsl(var(--sq7-color-bg-hsl)), 0px 0px 0px 4px hsla(var(--sq7-color-contrast-higher-hsl), 0.15);
  outline: none;
}

.sq7-btn:active {
  transform: translateY(2px);
}

.sq7-btn--primary {
  background: hsl(var(--sq7-color-primary-hsl));
  color: hsl(var(--sq7-color-white-hsl));
  box-shadow: inset 0px 1px 0px hsla(var(--sq7-color-white-hsl), 0.15), 0px 1px 3px hsla(var(--sq7-color-primary-darker-hsl), 0.25), 0px 2px 6px hsla(var(--sq7-color-primary-darker-hsl), 0.1), 0px 6px 10px -2px hsla(var(--sq7-color-primary-darker-hsl), 0.25);
}

.sq7-btn--primary:hover {
  background: hsl(var(--sq7-color-primary-light-hsl));
  box-shadow: inset 0px 1px 0px hsla(var(--sq7-color-white-hsl), 0.15), 0px 1px 2px hsla(var(--sq7-color-primary-darker-hsl), 0.25), 0px 1px 4px hsla(var(--sq7-color-primary-darker-hsl), 0.1), 0px 3px 6px -2px hsla(var(--sq7-color-primary-darker-hsl), 0.25);
}

.sq7-btn--primary:focus {
  box-shadow: inset 0px 1px 0px hsla(var(--sq7-color-white-hsl), 0.15), 0px 1px 2px hsla(var(--sq7-color-primary-darker-hsl), 0.25), 0px 1px 4px hsla(var(--sq7-color-primary-darker-hsl), 0.1), 0px 3px 6px -2px hsla(var(--sq7-color-primary-darker-hsl), 0.25), 0px 0px 0px 2px hsl(var(--sq7-color-bg-hsl)), 0px 0px 0px 4px hsl(var(--sq7-color-primary-hsl));
}

/* icons */
.sq7-icon {
  height: var(--sq7-size, 1em);
  width: var(--sq7-size, 1em);
  display: inline-block;
  color: inherit;
  fill: currentColor;
  line-height: 1;
  flex-shrink: 0;
  max-width: initial;
}

/* component */
:root {
  --slideshow-height: 280px;
  --slideshow-fade-transition-duration: 0.25s;
  --slideshow-slide-transition-duration: 0.35s;
  --slideshow-prx-transition-duration: 0.5s;
  --slideshow-btn-width: 1.6em;
  --slideshow-btn-height: 3.2em;
  --slideshow-btn-icon-size: 1.6em;
  --slideshow-btn-offset: var(--sq7-space-xs);
}
@media (min-width: 48rem) {
  :root {
    --slideshow-height: 380px;
  }
}
@media (min-width: 64rem) {
  :root {
    --slideshow-height: 480px;
  }
}
@media (min-width: 80rem) {
  :root {
    --slideshow-height: 580px;
  }
}

.slideshow__item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--slideshow-height);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}
.slideshow__item:focus {
  outline: none;
}

.slideshow--ratio-16\:9 .slideshow__item {
  height: 0;
  padding-bottom: 56.25%;
}

.slideshow--ratio-4\:3 .slideshow__item {
  height: 0;
  padding-bottom: 75%;
}

.slideshow--ratio-1\:1 .slideshow__item {
  height: 0;
  padding-bottom: 100%;
}

.slideshow {
  position: relative;
  z-index: 1;
  overflow: hidden;
}

.slideshow__content {
  overflow: hidden;
}

.slideshow__item {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  visibility: hidden;
}

.slideshow__item--selected {
  position: relative;
  z-index: 3;
  visibility: visible;
}

.slideshow--transition-fade .slideshow__item {
  opacity: 0;
  transition: opacity 0s var(--slideshow-fade-transition-duration), visibility 0s var(--slideshow-fade-transition-duration);
}

.slideshow--transition-fade .slideshow__item--selected {
  opacity: 1;
  transition: opacity var(--slideshow-fade-transition-duration);
}

.slideshow--transition-slide .slideshow__item {
  -webkit-animation-duration: var(--slideshow-slide-transition-duration);
          animation-duration: var(--slideshow-slide-transition-duration);
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
          animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
.slideshow--transition-slide .slideshow__item > * {
  visibility: hidden;
}

.slideshow--transition-slide .slideshow__item--selected > * {
  visibility: visible;
}

.slideshow--transition-slide .slideshow__item--slide-in-left {
  -webkit-animation-name: slide-in-left;
          animation-name: slide-in-left;
}

.slideshow--transition-slide .slideshow__item--slide-in-right {
  -webkit-animation-name: slide-in-right;
          animation-name: slide-in-right;
}

.slideshow--transition-slide .slideshow__item--slide-out-left {
  -webkit-animation-name: slide-out-left;
          animation-name: slide-out-left;
}

.slideshow--transition-slide .slideshow__item--slide-out-right {
  -webkit-animation-name: slide-out-right;
          animation-name: slide-out-right;
}

.slideshow--transition-slide .slideshow__item--slide-out-left,
.slideshow--transition-slide .slideshow__item--slide-out-right {
  z-index: 2;
}
.slideshow--transition-slide .slideshow__item--slide-out-left.slideshow__item--selected,
.slideshow--transition-slide .slideshow__item--slide-out-right.slideshow__item--selected {
  z-index: 3;
}
.slideshow--transition-slide .slideshow__item--slide-out-left > *,
.slideshow--transition-slide .slideshow__item--slide-out-right > * {
  visibility: visible;
}

@-webkit-keyframes slide-in-left {
  0% {
    visibility: visible;
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}

@keyframes slide-in-left {
  0% {
    visibility: visible;
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}
@-webkit-keyframes slide-in-right {
  0% {
    visibility: visible;
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}
@keyframes slide-in-right {
  0% {
    visibility: visible;
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}
@-webkit-keyframes slide-out-left {
  0% {
    visibility: visible;
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  100% {
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
  }
}
@keyframes slide-out-left {
  0% {
    visibility: visible;
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  100% {
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
  }
}
@-webkit-keyframes slide-out-right {
  0% {
    visibility: visible;
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  100% {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
  }
}
@keyframes slide-out-right {
  0% {
    visibility: visible;
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  100% {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
  }
}
.slideshow--transition-prx .slideshow__item {
  -webkit-animation-duration: var(--slideshow-prx-transition-duration);
          animation-duration: var(--slideshow-prx-transition-duration);
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
          animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
.slideshow--transition-prx .slideshow__item > * {
  visibility: hidden;
}

.slideshow--transition-prx .slideshow__item--selected > * {
  visibility: visible;
}

.slideshow--transition-prx .slideshow__item--prx-in-left {
  -webkit-animation-name: prx-in-left;
          animation-name: prx-in-left;
}

.slideshow--transition-prx .slideshow__item--prx-in-right {
  -webkit-animation-name: prx-in-right;
          animation-name: prx-in-right;
}

.slideshow--transition-prx .slideshow__item--prx-out-left {
  -webkit-animation-name: prx-out-left;
          animation-name: prx-out-left;
}

.slideshow--transition-prx .slideshow__item--prx-out-right {
  -webkit-animation-name: prx-out-right;
          animation-name: prx-out-right;
}

.slideshow--transition-prx .slideshow__item--prx-out-left,
.slideshow--transition-prx .slideshow__item--prx-out-right {
  z-index: 2;
}
.slideshow--transition-prx .slideshow__item--prx-out-left.slideshow__item--selected,
.slideshow--transition-prx .slideshow__item--prx-out-right.slideshow__item--selected {
  z-index: 3;
}
.slideshow--transition-prx .slideshow__item--prx-out-left > *,
.slideshow--transition-prx .slideshow__item--prx-out-right > * {
  visibility: visible;
}

@-webkit-keyframes prx-in-left {
  0% {
    visibility: visible;
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}

@keyframes prx-in-left {
  0% {
    visibility: visible;
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}
@-webkit-keyframes prx-in-right {
  0% {
    visibility: visible;
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}
@keyframes prx-in-right {
  0% {
    visibility: visible;
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}
@-webkit-keyframes prx-out-left {
  0% {
    opacity: 1;
    visibility: visible;
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  100% {
    opacity: 0.3;
    -webkit-transform: translateX(40%);
            transform: translateX(40%);
  }
}
@keyframes prx-out-left {
  0% {
    opacity: 1;
    visibility: visible;
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  100% {
    opacity: 0.3;
    -webkit-transform: translateX(40%);
            transform: translateX(40%);
  }
}
@-webkit-keyframes prx-out-right {
  0% {
    opacity: 1;
    visibility: visible;
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  100% {
    opacity: 0.3;
    -webkit-transform: translateX(-40%);
            transform: translateX(-40%);
  }
}
@keyframes prx-out-right {
  0% {
    opacity: 1;
    visibility: visible;
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  100% {
    opacity: 0.3;
    -webkit-transform: translateX(-40%);
            transform: translateX(-40%);
  }
}
.slideshow[data-swipe=on] .slideshow__content {
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
.slideshow[data-swipe=on] .slideshow__content img {
  pointer-events: none;
}

.slideshow__control {
  display: none;
}

.slideshow[data-controls=hover] .slideshow__control {
  opacity: 0;
  transition: opacity 0.3s;
}

.slideshow[data-controls=hover]:hover .slideshow__control {
  opacity: 1;
}

.slideshow[data-swipe=on] .slideshow__control {
  display: none;
}

.slideshow__control {
  display: block;
  position: absolute;
  z-index: 4;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
.slideshow__control:first-of-type {
  left: var(--slideshow-btn-offset);
}
.slideshow__control:last-of-type {
  right: var(--slideshow-btn-offset);
}

@media (min-width: 64rem) {
  .slideshow[data-swipe=on] .slideshow__control {
    display: block;
  }
}
.slideshow__btn {
  display: block;
  background-color: hsla(var(--sq7-color-black-hsl), 0.75);
  height: var(--slideshow-btn-height);
  width: var(--slideshow-btn-width);
  border-radius: 0.25em;
  cursor: pointer;
  transition: background 0.2s, -webkit-transform 0.2s;
  transition: background 0.2s, transform 0.2s;
  transition: background 0.2s, transform 0.2s, -webkit-transform 0.2s;
}
.slideshow__btn:hover {
  background-color: hsla(var(--sq7-color-contrast-higher-hsl), 0.85);
}
.slideshow__btn:hover svg {
  color: hsl(var(--sq7-color-bg-hsl));
}
.slideshow:not(.slideshow--is-animating) .slideshow__btn:active {
  -webkit-transform: translateY(2px);
          transform: translateY(2px);
}
.slideshow__btn svg {
  display: block;
  width: var(--slideshow-btn-icon-size);
  height: var(--slideshow-btn-icon-size);
  margin: 0 auto;
  transition: color 0.2s;
  color: hsl(var(--sq7-color-white-hsl));
}
@supports (grid-area: auto) {
  .slideshow__btn {
    background-color: transparent;
  }
  .slideshow__btn svg {
    color: hsl(var(--sq7-color-contrast-higher-hsl));
  }
}

.slideshow__navigation {
  position: absolute;
  z-index: 4;
  bottom: 0;
  width: 100%;
  height: 32px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: transparent;
}

.slideshow__nav-item {
  display: inline-block;
  margin: 0 var(--sq7-space-3xs);
}
.slideshow__nav-item button {
  display: block;
  position: relative;
  font-size: 8px;
  color: hsl(var(--sq7-color-contrast-high-hsl));
  height: 1em;
  width: 1em;
  border-radius: 50%;
  background-color: currentColor;
  opacity: 0.4;
  cursor: pointer;
  transition: background 0.3s;
}
.slideshow__nav-item button::before {
  content: "";
  position: absolute;
  top: calc(50% - 0.5em);
  left: calc(50% - 0.5em);
  height: 1em;
  width: 1em;
  font-size: 14px;
  border-radius: inherit;
  border: 1px solid hsl(var(--sq7-color-contrast-high-hsl));
  opacity: 0;
  -webkit-transform: scale(0);
          transform: scale(0);
  transition: 0.3s;
}
.slideshow__nav-item button:focus {
  outline: none;
}
.slideshow__nav-item button:focus::before {
  opacity: 1;
  -webkit-transform: scale(1);
          transform: scale(1);
}

.slideshow__nav-item--selected button {
  opacity: 1;
}

@media (min-width: 64rem) {
  .slideshow__navigation {
    height: 40px;
  }

  .slideshow__nav-item button {
    font-size: 10px;
  }
  .slideshow__nav-item button::before {
    font-size: 16px;
  }
}

/* utility classes */
.sq7-sr-only {
  position: absolute;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  width: 1px;
  height: 1px;
  overflow: hidden;
  padding: 0;
  border: 0;
  white-space: nowrap;
}

.sq7-bg-light {
  --sq7-bg-o: 1;
  background-color: hsla(var(--sq7-color-bg-light-hsl), var(--sq7-bg-o, 1));
}

.sq7-text-center {
  text-align: center;
}

.sq7-text-component :where(h1, h2, h3, h4) {
  line-height: var(--sq7-heading-line-height, 1.2);
  margin-top: calc(var(--sq7-space-md) * var(--sq7-space-multiplier, 1));
  margin-bottom: calc(var(--sq7-space-sm) * var(--sq7-space-multiplier, 1));
}

.sq7-text-component :where(p, blockquote, ul li, ol li) {
  line-height: var(--sq7-body-line-height, 1.4);
}

.sq7-text-component :where(ul, ol, p, blockquote, .sq7-text-component__block) {
  margin-bottom: calc(var(--sq7-space-sm) * var(--sq7-space-multiplier, 1));
}

.sq7-text-component :where(ul, ol) {
  padding-left: 1.25em;
}

.sq7-text-component ul :where(ul, ol), .sq7-text-component ol :where(ul, ol) {
  padding-left: 1em;
  margin-bottom: 0;
}

.sq7-text-component ul {
  list-style-type: disc;
}

.sq7-text-component ol {
  list-style-type: decimal;
}

.sq7-text-component img {
  display: block;
  margin: 0 auto;
}

.sq7-text-component figcaption {
  margin-top: calc(var(--sq7-space-xs) * var(--sq7-space-multiplier, 1));
  font-size: var(--sq7-text-sm);
  text-align: center;}

.sq7-text-component em {
  font-style: italic;
}

.sq7-text-component strong {
  font-weight: bold;
}

.sq7-text-component s {
  text-decoration: line-through;
}

.sq7-text-component u {
  text-decoration: underline;
}

.sq7-text-component mark {
  background-color: hsla(var(--sq7-color-accent-hsl), 0.2);
  color: inherit;
}

.sq7-text-component blockquote {
  padding-left: 1em;
  border-left: 4px solid hsl(var(--sq7-color-contrast-lower-hsl));
  font-style: italic;
}

.sq7-text-component hr {
  margin: calc(var(--sq7-space-md) * var(--sq7-space-multiplier, 1)) auto;
  background: hsl(var(--sq7-color-contrast-lower-hsl));
  height: 1px;
}

.sq7-text-component > *:first-child {
  margin-top: 0;
}

.sq7-text-component > *:last-child {
  margin-bottom: 0;
}

.sq7-text-component.sq7-line-height-xs {
  --sq7-heading-line-height: 1;
  --sq7-body-line-height: 1.1;
}

.sq7-text-component.sq7-line-height-sm {
  --sq7-heading-line-height: 1.1;
  --sq7-body-line-height: 1.2;
}

.sq7-text-component.sq7-line-height-md {
  --sq7-heading-line-height: 1.15;
  --sq7-body-line-height: 1.4;
}

.sq7-text-component.sq7-line-height-lg {
  --sq7-heading-line-height: 1.22;
  --sq7-body-line-height: 1.58;
}

.sq7-text-component.sq7-line-height-xl {
  --sq7-heading-line-height: 1.3;
  --sq7-body-line-height: 1.72;
}

.sq7-max-width-sm {
  max-width: 48rem;
}

.sq7-container {
  width: calc(100% - 2*var(--sq7-space-md));
  margin-left: auto;
  margin-right: auto;
}

.sq7-color-inherit {
  color: inherit;
}

.sq7-gap-sm {
  gap: var(--sq7-space-sm);
}

.sq7-flex-center {
  justify-content: center;
  align-items: center;
}

.sq7-flex-wrap {
  flex-wrap: wrap;
}

.sq7-flex {
  display: flex;
}

.sq7-margin-top-md {
  margin-top: var(--sq7-space-md);
}

.sq7-bg {
  --sq7-bg-o: 1;
  background-color: hsla(var(--sq7-color-bg-hsl), var(--sq7-bg-o, 1));
}

.sq7-hide {
  display: none !important;
}
/* -------------------------------- 

File#: _2_image-zoom
Title: Image Zoom
Descr: A lightbox plugin to zoom on an image on click
-

-------------------------------- */
/* reset */
*, *::after, *::before {
  box-sizing: border-box;
}

* {
  font: inherit;
  margin: 0;
  padding: 0;
  border: 0;
}

body {
  background-color: hsl(0, 0%, 100%);
  font-family: system-ui, sans-serif;
  color: hsl(230, 7%, 23%);
  font-size: 1rem;
}

h1, h2, h3, h4 {
  line-height: 1.2;
  color: hsl(230, 13%, 9%);
  font-weight: 700;
}

h1 {
  font-size: 2.0736rem;
}

h2 {
  font-size: 1.728rem;
}

h3 {
  font-size: 1.25rem;
}

h4 {
  font-size: 1.2rem;
}

ol, ul, menu {
  list-style: none;
}

button, input, textarea, select {
  background-color: transparent;
  border-radius: 0;
  color: inherit;
  line-height: inherit;
  appearance: none;
}

textarea {
  resize: vertical;
  overflow: auto;
  vertical-align: top;
}

a {
  color: hsl(250, 84%, 54%);
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

img, video, svg {
  display: block;
  max-width: 100%;
}

@media (min-width: 64rem) {
  body {
    font-size: 1.25rem;
  }

  h1 {
    font-size: 3.051rem;
  }

    h2 {
    font-size: 2.44rem;
  }

    h3 {
    font-size: 1.75rem;
  }

    h4 {
    font-size: 1.5625rem;
  }
}

/* variables */
:root {
  /* colors */
  --im6-color-primary-hsl: 250, 84%, 54%;
  --im6-color-bg-hsl: 0, 0%, 100%;
  --im6-color-contrast-high-hsl: 230, 7%, 23%;
  --im6-color-contrast-higher-hsl: 230, 13%, 9%;

  /* spacing */
  --im6-space-2xs: 0.375rem;

  /* typography */
  --im6-text-sm: 0.833rem;
}

@media(min-width: 64rem){
  :root {
    /* spacing */
    --im6-space-2xs: 0.5625rem;

    /* typography */
    --im6-text-sm: 1rem;
  }
}

/* component */
.image-zoom__preview {
  display: block;
  width: 100%;
}

.image-zoom {
  position: relative;
}

.image-zoom__preview {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Ctitle%3EArtboard 1icon-1%3C/title%3E%3Cg opacity='0.9'%3E%3Ccircle cx='24' cy='24' r='24'/%3E%3C/g%3E%3Cpolygon points='34 23 25 23 25 14 23 14 23 23 14 23 14 25 23 25 23 34 25 34 25 25 34 25 34 23' fill='%23fff'/%3E%3C/svg%3E") 24 24, zoom-in;
  cursor: -webkit-image-set(url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAACXBIWXMAAAsSAAALEgHS3X78AAACGklEQVRogeWaO27CQBCG/9meCxDqHAEOQHoEfbgBPRI1Unpu4PSg9PgA+AZJTbgAB5horbGDn/jtXfgkROHX/+9jdj1jYmbUhYjGACYA9P8IwDDjlhcAZwAegBMze7WfXdWAiF4AeAMwqPj8K4AjgH1VM6UNiPCVtHaTaAO7skYKGyCiFwAbANOGhcdxAWyZ+beQriIGiEgPk48aQ6UsemitmflY2wAR6VZfdiQ8jsPM27wTcg0QkW71ecsi73Fg5nXWOSrrgCHiNXPRkkqqARk2JogPmIumBAkDMmH7GvN5LEVbhMgckFD51WG0KYuOTrPbEBvvgY3B4iHaIkMpNCArbNuLVBNMRWvUgGwPbGEVMSCOmt7bgJlf9a+FRhkHvRD0wKKFh7TN4tZAIjxZgK9ZSVeYHHmyGGjtSt6kbGWi2pi8HeL3wMhiAyOV8wJuA8PM7bQtEIDvKlqbXqCI6KfKdc/bA0UIeqlq6xbB+h5Qku6zlYuSXKWtnJWk9GzF0wZOFhs4KUmmXg0QU5ar1h5Eobs5SAPxNQcG9hYa8DWHeSEi+rRoa+0x8ztiC9muPz2lCbWGBmQyuxaId2+rOI+VWpQDmbl4A1jHS0+JzZyUdRwDxTtpJafMCo1BBQ7kVWkyt9NywaFVWcWoVmLCv4k+h5OTJx6PUGYt9EYmN5p1tE64EioL7c+e51ODxIW2fuyRepO+PrcB8AcU++0TpkKrvQAAAABJRU5ErkJggg==") 1x, url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAABgCAYAAADimHc4AAAACXBIWXMAABYlAAAWJQFJUiTwAAAEqUlEQVR4nO2dS07cQBCGq0bZkgMA64gcIMM6UfYI9sABEGtAWUcha8QBBvYzYo+SNZMDhGQ9zAHiA1TUQ9nyYzxut9vdbbs+CY2QwI//n+qHu12FRAQhgohjAHgPAG8BYMyXONa81Hnq8wUAFkQ0r/gfLwRjAAu+zyLrCl2XOf88hWKIVwNY9CMA+AwAW45PHwHAIwBMfZrh3ABEVE3KKQu/7fTk5SyVEQAwIaJ/Lk/szABE3AGAcwA4dHJCc2YAcENELy5O1roBHRI+jxMjWjUAEc+5uXHdvtsi4mbppq0TtGIAd67fA2rjm6L6iIs2OmvrBiDiFwA4sXrQcLgjoq82r8aaAYioJk3XALBn5YDh8gwAl0T028YVjmwcBBHVOP5+AOID3+M933NjGhuAiKqTve1wR2uCutdbRDxqeqBGTRAiXndweGmbGRFdmh7TOAJE/IRD1sIIIwNE/ALGJtQ2QMQvxciEWgZwhyvil3NYt2PW7oR52HVr9XL7yxkRPWrpqmMAT7LuBzbUbIJ6hnSsM1nTNeBhIJMsmzwT0UHV8Sr7AH62I+LXZ4+128hGA/ipZl8frLnghDUsZWMThIg/e/RI2RdLIvpYdu7SCODFFBG/Odus5VrWRgAvIz7IqMcaalR0sG55sywCzkV8q2yxpgUKEcDf/h9dvtuA+ZSPgnURUNpeCY0paJuJAN409asLOhPRu/TviPjX39XU4kN681c+Ak7Dve7ekNE4b0DjJTahkozGiQE8Y5Nxf/tsp2fH6QiQb787Eq3TBljZZiFokWi9MoBDQiZe7tiKm6E4AvYHcNOhsdI8NqCtV4KEcjIRIAa459WAqgUDoT2U9iN+FVTww+6I38MV/LAzkvbfK2Mr7wcI5kgE+EUiwDdigGcQAP64vIT8SlZouF5ZkwjwjBjgGTHAM877AFt0eFdEBokAz4gBnhmlEtwJ7plLBHhGIsAvqwhwkhtNWMuLMmAh2nhjMQo1o+wQUNrHnbCY4J6V5mKAPzIGPA1QAN+sNF8ZwP1ANGQ1HBPFfW96IqaV3UOwQqJ12oCpaOuMROvEAA6JZa9vOwyW6aF//lmQREH7ZDTOGzDp0Y2GSkbjN+lf1PuriDjrQl64jq6AzfIFIiRVgVuqUxXwH8z6ef9emdXJlnIjEzOrRKxpgbUGsFPSIdtjUlYKRVKWtY9ZyjLmonO3Gx4bNdxoAM/Y7vqtT6vcVS14SeLW9rCTuJW5lFFRLSLWrBItAzgHsnGViAGiXeRHe2MWZwO/GrqyGlzpZk6HuntDiWgqs+SNzFgjbWpvTeSCNWJCEaNiPkZ7Q8WEAsaVlIw354oJCY3KWDUuZcg1U741Okh3uarb5udpvD2dL+BsYPOEiOvENF7CtfJ+AA+7jrnQZd955vowVrbxWHtBQ008eOrd52dH6tnOga1KqiAFnbXpTkHnzMGlpHklUtS/nO4X9c+cqDtGOBE+xpkByQlfaxSccv7kUPqIJe9Ym+T37bSNcwPScGd9xLmUXfcTEe9Snvp8TcurAWnYjH1OodZWGrU5/zyF8m5cMAbkYUN2VWrHlCG6xsTiqk/Vli+CfBkRAP4DaXHfN1Q11JEAAAAASUVORK5CYII=") 2x) 24 24, zoom-in;
}

.image-zoom__lightbox {
  /* modal element for the zoomed image - created in js */
  visibility: hidden;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  z-index: 15;
  overflow-x: hidden;
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Ctitle%3EArtboard 1icon-2%3C/title%3E%3Cg opacity='0.9'%3E%3Ccircle cx='24' cy='24' r='24'/%3E%3C/g%3E%3Crect x='23' y='14' width='2' height='20' transform='translate(48) rotate(90)' fill='%23fff'/%3E%3C/svg%3E") 24 24, zoom-out;
  cursor: -webkit-image-set(url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAACXBIWXMAAAsSAAALEgHS3X78AAACEklEQVRoge2ay23CQBCG/7FypYGEcyqIoAByR1AAHXBH4oyUOx24AFDuuACsNJCcCQ1QwERrjQl+4ifeIfkuHPDj/727s+MZEzOjLkQ0ADAEYH77AB4zLnkEcADgA9gzs1/73lUNiOgpgFcAvYr3PwHYAdhUNVPagAify9NuEmNgXdZIYQNE9ARgCWDUsPA4HoAVM38X0lXEABGZafJWY6qUxUytBTPvahsgIvPUZzcSHsdl5lXeAbkGiMg89UnLIq+xZeZF1jFO1h+WiDdMREsqqQZk2tggPmQimhIkDMiC7WrO5zETbREia0BC5fsNo01ZTHQaX4bY+AgsLRYP0RaZSmcDssO2vUk1wUi0Rg1IeqCFecSAOGo6t2mTQTgK4QhMFYkPCTSHBhLhSQGBZkeGwubIk0XPaHfkTUorQ0fZ4o0TjEDfLk2l6BOAT0WCE2Sm01p4qKqTmZ+b9EhEX1XOUz8C/2ugaxwp92nl6EitUisHR0p6WvGNgb1iA/vgpZ6IPhRmpCdmfgmj0NUapIUEmkMDG4UGAs2BAanJa1rMfthHuNzI1t3pKc1Z69mAOPIUiPcuuzj3VVqUPzJr8RawiLeeEsmctHVcC8W7aS2nzA6NRQ0O5HVpMtNpOWHbqqxiVGsx4ddEl9PJzROPe2izFnojkwuNb7RPeBIqC+Vnf+dTg8SJWj/2SL1IV5/bAPgBdRHiSVcA3vQAAAAASUVORK5CYII=") 1x, url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAABgCAYAAADimHc4AAAACXBIWXMAABYlAAAWJQFJUiTwAAAEmElEQVR4nO2dvU7cQBDHZ05pyQMAdUL65KgTpUfQAw+AqAGljkJqxAMc9HeiR0nNJX1IargHyD3AROvMWbbvfF6v98v2/KQTBeC1//+b/bDXM0hEECOIOASANwDwEgCGfIpDzVOdZn4+A8ATEU0r/icI0RjAgu+yyLpC12XKn4dYDAlqAIt+AAAfAWDDc/NzALgHgHFIM7wbgIiqSzlm4Te9Nl7OTBkBACMi+uuzYW8GIOIWAJwCwL6XBs2ZAMAVET37aMy5AS0SvogXI5wagIin3N347t9tMedu6cpVA04M4MH1a0R9fFPUGHHmYrC2bgAifgKAI6sHjYcbIvps82ysGYCIatF0CQA7Vg4YL48AcE5Ev2yc4cDGQRBRzeNveyA+8DXe8jU3prEBiKgG2esWD7QmqGu9RsSDpgdq1AUh4mULp5e2mRDRuekxjSNAxE/ZZy2MMDJAxF/C2ITaBoj4pRiZUMsAHnBF/HL26w7M2oMwT7uurZ5udzkhonstXXUM4EXWbc+mmk1Q95AOdRZrugbc9WSRZZNHItqrOl7lGMD3dkT8+uywdmtZawDf1ezqjTUfHLGGpaztghDxe4duKYdiRkTvy9oujQB+mCLiN2eTtVzJygjgx4h3MuuxhpoV7a16vFkWAacivlU2WNMlliKAv/3f2ny1EfOhGAWrIqC0vxIas6RtLgJ409QP0dkp77Kbv4oRcNyd64yWnMZFAxo/YhMqyWmcGsArNpn3u2czuzrORoB8+/2Rap01wMo2C0GLVOvEAA4JWXj5Y2PRDS0iYLcHFx0bieYLA1y9EiSUk2ieLMQQ8bcI5R8iej2oemAguENpP+BXQYUwbA/4PVwhDFsDGYCDMrTyfoBgDgKAzIACIhEQGDEgMC98N09Er2ITIQsi/vHZnkRAYMSAwIgBgZFpaGAkAgIjBgRmkElwJ/hnKhEQGImAsCQR4CU3mrCSZ2XAk2gTjCd5KB+Q5KE8Ny/jgH8SzcWAcOQMeOihAKFJNE/fkEHEn7I/1BtzInoLhVsRWtk9BCukWmcNGIu23ki1Tg3grLCzTl92HMyyGXiL94IkCtyT01heU/VP+Wuq/ItJ9zUIxqRYIEJSFfilOlUB/4FEgX0mdbKlXHGKFcEOc9Z0iZUGsFMjEd8ao7JSKJKyzD1mKcuYs9Zdbnys1XCtAbxiu+m2Pk65qao7I4lb3WEncStzLrOiWsxZs0q0DOAcyMZVInqIdpEf7Y1ZnA38ou/KanChmzkd6u4NJaKxrJLXMmGNtKm9NZEL1ogJyxgV8zHaGyomLGFcScl4c66YkNKojFXjUoZcM+VLo4O0l4u6fX6RxtvT+QROerZOmHOdmMaPcK28H8DTrkMudNl1Hrk+jJVtPNZe0FALD156d/nekbq3s2erkipIQWdt2lPQOXdwKWleiRT1L6f9Rf1zDbXHCC/CL/BmQNrg/81fx5w/OZYxYsY71kbFfTuu8W5AFh6sDziXsu9xYs67lMcuBlddghqQhc3Y5SSCrhIJTvnzEFL0LNEYUIQN2VapHTOG6BqzEFf9VH35UyyC5wCAfxBt4NqKekAOAAAAAElFTkSuQmCC") 2x) 24 24, zoom-out;
}
.image-zoom__lightbox img {
  display: block;
  position: relative;
  z-index: 1;
  width: 100%;
  -webkit-transform-origin: top left;
          transform-origin: top left;
  pointer-events: none;
}
.image-zoom__lightbox::before {
  /* lightbox background */
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: hsl(var(--im6-color-bg-hsl));
  opacity: 0;
}

.image-zoom__lightbox--is-visible {
  visibility: visible;
}
.image-zoom__lightbox--is-visible img {
  transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
  transition: transform 0.3s, -webkit-transform 0.3s;
}
.image-zoom__lightbox--is-visible::before {
  transition: opacity 0.3s;
}

.image-zoom__lightbox--animate-bg::before {
  /* animate lightbox background when lightbox is visible */
  opacity: 1;
}

.image-zoom__lightbox--no-transition {
  /* remove lightbox transitions */
}
.image-zoom__lightbox--no-transition img, .image-zoom__lightbox--no-transition::before {
  transition: none;
}

/* keyboard accessibility - use keyboard to toggle lightbox */
.image-zoom__input {
  /* never visible - created in js */
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  opacity: 0;
}

.image-zoom__input:focus ~ .image-zoom__preview {
  box-shadow: 0 0 0 2px hsl(var(--im6-color-bg-hsl)), 0 0 0 5px hsla(var(--im6-color-primary-hsl), 0.25);
}

/* utility classes */
.im6-text-sm {
  font-size: var(--im6-text-sm);
}

.im6-margin-top-2xs {
  margin-top: var(--im6-space-2xs);
}
/* -------------------------------- 

File#: _2_menu-bar
Title: Menu Bar
Descr: Application menu with a list of common actions that users can perform
-

-------------------------------- */
/* reset */
*, *::after, *::before {
  box-sizing: border-box;
}

* {
  font: inherit;
  margin: 0;
  padding: 0;
  border: 0;
}

body {
  background-color: hsl(0, 0%, 100%);
  font-family: system-ui, sans-serif;
  color: hsl(230, 7%, 23%);
  font-size: 1rem;
}

h1, h2, h3, h4 {
  line-height: 1.2;
  color: hsl(230, 13%, 9%);
  font-weight: 700;
}

h1 {
  font-size: 2.0736rem;
}

h2 {
  font-size: 1.728rem;
}

h3 {
  font-size: 1.25rem;
}

h4 {
  font-size: 1.2rem;
}

ol, ul, menu {
  list-style: none;
}

button, input, textarea, select {
  background-color: transparent;
  border-radius: 0;
  color: inherit;
  line-height: inherit;
  appearance: none;
}

textarea {
  resize: vertical;
  overflow: auto;
  vertical-align: top;
}

a {
  color: hsl(250, 84%, 54%);
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

img, video, svg {
  display: block;
  max-width: 100%;
}

@media (min-width: 64rem) {
  body {
    font-size: 1.25rem;
  }

  h1 {
    font-size: 3.051rem;
  }

    h2 {
    font-size: 2.44rem;
  }

    h3 {
    font-size: 1.75rem;
  }

    h4 {
    font-size: 1.5625rem;
  }
}

/* variables */
:root {
  /* colors */
  --mg0-color-primary-hsl: 250, 84%, 54%;
  --mg0-color-bg-hsl: 0, 0%, 100%;
  --mg0-color-contrast-high-hsl: 230, 7%, 23%;
  --mg0-color-contrast-higher-hsl: 230, 13%, 9%;
  --mg0-color-contrast-low-hsl: 240, 4%, 65%;

  /* spacing */
  --mg0-space-2xs: 0.375rem;
  --mg0-space-xs: 0.5rem;

  /* typography */
  --mg0-text-xs: 0.694rem;
}

@media(min-width: 64rem){
  :root {
    /* spacing */
    --mg0-space-2xs: 0.5625rem;
    --mg0-space-xs: 0.75rem;

    /* typography */
    --mg0-text-xs: 0.8rem;
  }
}

/* icons */
.mg0-icon {
  height: var(--mg0-size, 1em);
  width: var(--mg0-size, 1em);
  display: inline-block;
  color: inherit;
  fill: currentColor;
  line-height: 1;
  flex-shrink: 0;
  max-width: initial;
}

/* component */
:root {
  --menu-bar-button-size: 2.5em;
  --menu-bar-icon-size: 1em;
  --menu-bar-horizontal-gap: var(--mg0-space-2xs);
  --menu-bar-vertical-gap: 4px;
  --menu-bar-label-size: var(--mg0-text-xs);
}

.menu-bar {
  list-style: none;
  display: inline-flex;
  align-items: center;
}

.menu-bar__item {
  position: relative;
  display: inline-block;
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--menu-bar-button-size);
  width: var(--menu-bar-button-size);
  border-radius: 50%;
  cursor: pointer;
  transition: background-color 0.2s;
}
.menu-bar__item:not(:last-child) {
  margin-right: var(--menu-bar-horizontal-gap);
}
.menu-bar__item:hover, .menu-bar__item.menu-control--active {
  background-color: hsla(var(--mg0-color-contrast-higher-hsl), 0.1);
}
.menu-bar__item:hover > .menu-bar__icon, .menu-bar__item.menu-control--active > .menu-bar__icon {
  color: hsl(var(--mg0-color-contrast-higher-hsl));
}
.menu-bar__item:hover > .menu-bar__label, .menu-bar__item.menu-control--active > .menu-bar__label {
  clip: auto;
  -webkit-clip-path: none;
          clip-path: none;
  height: auto;
  width: auto;
}
.menu-bar__item:focus {
  outline: none;
  background-color: hsla(var(--mg0-color-primary-hsl), 0.1);
}
.menu-bar__item:active {
  background-color: hsl(var(--mg0-color-contrast-low-hsl));
}
.menu-bar__item:focus:active {
  background-color: hsla(var(--mg0-color-primary-hsl), 0.2);
}

.menu-bar__item--trigger {
  display: none;
}

.menu-bar__icon {
  display: block;
  color: hsl(var(--mg0-color-contrast-high-hsl));
  font-size: var(--menu-bar-icon-size);
  transition: color 0.2s;
}

.menu-bar__label {
  position: absolute;
  z-index: 5;
  clip: rect(1px, 1px, 1px, 1px);
  -webkit-clip-path: inset(50%);
          clip-path: inset(50%);
  width: 1px;
  height: 1px;
  overflow: hidden;
  white-space: nowrap;
  top: 100%;
  left: 50%;
  -webkit-transform: translateX(-50%) translateY(var(--menu-bar-vertical-gap));
          transform: translateX(-50%) translateY(var(--menu-bar-vertical-gap));
  padding: var(--mg0-space-2xs) var(--mg0-space-xs);
  color: hsl(var(--mg0-color-bg-hsl));
  background-color: hsla(var(--mg0-color-contrast-higher-hsl), 0.95);
  border-radius: 0.25em;
  font-size: var(--menu-bar-label-size);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

.menu-bar--collapsed .menu-bar__item--hide {
  display: none;
}
.menu-bar--collapsed .menu-bar__item--trigger {
  display: inline-block;
  display: flex;
}

.menu-bar {
  opacity: 0;
}
.menu-bar::before {
  display: none;
  content: "collapsed";
}

.menu-bar--loaded {
  opacity: 1;
}

@media (min-width: 32rem) {
  .menu-bar--expanded\@xs::before {
    content: "expanded";
  }
}

@media (min-width: 48rem) {
  .menu-bar--expanded\@sm::before {
    content: "expanded";
  }
}

@media (min-width: 64rem) {
  .menu-bar--expanded\@md::before {
    content: "expanded";
  }
}

@media (min-width: 80rem) {
  .menu-bar--expanded\@lg::before {
    content: "expanded";
  }
}

@media (min-width: 90rem) {
  .menu-bar--expanded\@xl::before {
    content: "expanded";
  }
}
/* -------------------------------- 

File#: _3_how-it-works-v4
Title: How It Works v4
Descr: A list of steps showing how a product works
-

-------------------------------- */
/* reset */
*, *::after, *::before {
  box-sizing: border-box;
}

* {
  font: inherit;
  margin: 0;
  padding: 0;
  border: 0;
}

body {
  background-color: hsl(0, 0%, 100%);
  font-family: system-ui, sans-serif;
  color: hsl(230, 7%, 23%);
  font-size: 1rem;
}

h1, h2, h3, h4 {
  line-height: 1.2;
  color: hsl(230, 13%, 9%);
  font-weight: 700;
}

h1 {
  font-size: 2.0736rem;
}

h2 {
  font-size: 1.728rem;
}

h3 {
  font-size: 1.25rem;
}

h4 {
  font-size: 1.2rem;
}

ol, ul, menu {
  list-style: none;
}

button, input, textarea, select {
  background-color: transparent;
  border-radius: 0;
  color: inherit;
  line-height: inherit;
  appearance: none;
}

textarea {
  resize: vertical;
  overflow: auto;
  vertical-align: top;
}

a {
  color: hsl(250, 84%, 54%);
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

img, video, svg {
  display: block;
  max-width: 100%;
}

@media (min-width: 64rem) {
  body {
    font-size: 1.25rem;
  }

  h1 {
    font-size: 3.051rem;
  }

    h2 {
    font-size: 2.44rem;
  }

    h3 {
    font-size: 1.75rem;
  }

    h4 {
    font-size: 1.5625rem;
  }
}

/* variables */
:root {
  /* colors */
  --hy3-color-primary-hsl: 250, 84%, 54%;
  --hy3-color-contrast-medium-hsl: 225, 4%, 47%;
  --hy3-color-contrast-high-hsl: 230, 7%, 23%;
  --hy3-color-contrast-higher-hsl: 230, 13%, 9%;
  --hy3-color-bg-hsl: 0, 0%, 100%;
  --hy3-color-accent-hsl: 342, 89%, 48%;
  --hy3-color-contrast-lower-hsl: 240, 4%, 85%;

  /* spacing */
  --hy3-space-sm: 0.75rem;
  --hy3-space-md: 1.25rem;
  --hy3-space-lg: 2rem;
  --hy3-space-xl: 3.25rem;
  --hy3-space-xs: 0.5rem;

  /* typography */
  --hy3-text-lg: 1.25rem;
  --hy3-text-sm: 0.833rem;
}

@media(min-width: 64rem){
  :root {
    /* spacing */
    --hy3-space-sm: 1.125rem;
    --hy3-space-md: 2rem;
    --hy3-space-lg: 3.125rem;
    --hy3-space-xl: 5.125rem;
    --hy3-space-xs: 0.75rem;

    /* typography */
    --hy3-text-lg: 1.75rem;
    --hy3-text-sm: 1rem;
  }
}

.hiw-v4 {
  position: relative;
  z-index: 1;
  padding: var(--hy3-space-lg) 0;
}

.hiw-v4__container {
  width: calc(100% - 2*var(--hy3-space-md));
  margin-left: auto;
  margin-right: auto;
  max-width: 32rem;
}

.hiw-v4__grid-1 {
  display: grid;
  gap: var(--hy3-space-lg);
}

.hiw-v4__grid-2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--hy3-space-lg);
}

.hiw-v4__img {
  width: 100%;
  border-radius: 0.375em;
  margin-bottom: var(--hy3-space-sm);
}

@media(min-width: 48rem) {
  .hiw-v4__container {
    max-width: 48rem;
  }
}

@media(min-width: 64rem) {
  .hiw-v4__container {
    max-width: 64rem;
  }
  
  .hiw-v4__grid-1 {
    grid-template-columns: 1fr 1fr;
  }

  .hiw-v4__flex-container-1 {
    display: flex;
    flex-direction: column;
    height: 100%;
  }

  .hiw-v4__title {
    position: sticky;
    top: var(--hy3-space-lg);
  }

  .hiw-v4 .toc {
    position: sticky;
    bottom: var(--hy3-space-lg);
    margin-top: auto;
  }
}

@media not all and (min-width: 64rem) {
  .hiw-v4 .toc {
    display: none !important;
  }
}

@media(min-width: 80rem) {
  .hiw-v4__container {
    max-width: 80rem;
  }
}

@media(min-width: 90rem) {
  .hiw-v4__container {
    max-width: 90rem;
  }

  .hiw-v4__grid-2 {
    gap: var(--hy3-space-xl);
  }
}

/* utility classes */
.hy3-text-component {
  line-height: 1.4;
}

.hy3-text-component > * {
  margin-bottom: var(--hy3-space-sm);
}

.hy3-text-component h1, .hy3-text-component h2, .hy3-text-component h3, .hy3-text-component h4 {
  line-height: 1.2;
  margin-top: var(--hy3-space-md);
}

.hy3-text-component > *:first-child {
  margin-top: 0;
}

.hy3-text-component > *:last-child {
  margin-bottom: 0;
}

.hy3-text-component p {
  --hy3-color-o: 1;
  color: hsla(var(--hy3-color-contrast-medium-hsl), var(--hy3-color-o, 1));
}

.hy3-text-lg {
  font-size: var(--hy3-text-lg);
}
/* -------------------------------- 

File#: _3_thumbnail-slideshow
Title: Thumbnail Slideshow
Descr: Show a collection of items one at a time with additional preview images for easier selection
-

-------------------------------- */
/* reset */
*, *::after, *::before {
  box-sizing: border-box;
}

* {
  font: inherit;
  margin: 0;
  padding: 0;
  border: 0;
}

body {
  background-color: hsl(0, 0%, 100%);
  font-family: system-ui, sans-serif;
  color: hsl(230, 7%, 23%);
  font-size: 1rem;
}

h1, h2, h3, h4 {
  line-height: 1.2;
  color: hsl(230, 13%, 9%);
  font-weight: 700;
}

h1 {
  font-size: 2.0736rem;
}

h2 {
  font-size: 1.728rem;
}

h3 {
  font-size: 1.25rem;
}

h4 {
  font-size: 1.2rem;
}

ol, ul, menu {
  list-style: none;
}

button, input, textarea, select {
  background-color: transparent;
  border-radius: 0;
  color: inherit;
  line-height: inherit;
  appearance: none;
}

textarea {
  resize: vertical;
  overflow: auto;
  vertical-align: top;
}

a {
  color: hsl(250, 84%, 54%);
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

img, video, svg {
  display: block;
  max-width: 100%;
}

@media (min-width: 64rem) {
  body {
    font-size: 1.25rem;
  }

  h1 {
    font-size: 3.051rem;
  }

    h2 {
    font-size: 2.44rem;
  }

    h3 {
    font-size: 1.75rem;
  }

    h4 {
    font-size: 1.5625rem;
  }
}

/* variables */
:root {
  /* colors */
  --te9-color-primary-hsl: 250, 84%, 54%;
  --te9-color-bg-hsl: 0, 0%, 100%;
  --te9-color-contrast-high-hsl: 230, 7%, 23%;
  --te9-color-contrast-higher-hsl: 230, 13%, 9%;
  --te9-color-black-hsl: 230, 13%, 9%;
  --te9-color-accent-hsl: 342, 89%, 48%;
  --te9-color-contrast-lower-hsl: 240, 4%, 85%;

  /* spacing */
  --te9-space-xs: 0.5rem;
  --te9-space-md: 1.25rem;
  --te9-space-sm: 0.75rem;

  /* typography */
  --te9-text-sm: 0.833rem;
}

@media(min-width: 64rem){
  :root {
    /* spacing */
    --te9-space-xs: 0.75rem;
    --te9-space-md: 2rem;
    --te9-space-sm: 1.125rem;

    /* typography */
    --te9-text-sm: 1rem;
  }
}

/* component */
:root {
  --thumbslide-thumbnail-auto-size: 100px;
  --thumbslide-thumbnail-grid-gap: var(--te9-space-xs);
}

.thumbslide .slideshow {
  --slideshow-fade-transition-duration: 0.3s;
  --slideshow-slide-transition-duration: 0.3s;
}

.thumbslide__nav {
  display: flex;
  overflow: hidden;
  padding: var(--thumbslide-thumbnail-grid-gap) 0;
  position: relative;
}
.thumbslide__nav::after, .thumbslide__nav::before {
  content: "";
  position: absolute;
  z-index: 2;
  height: 80%;
  width: 0;
  top: 10%;
  box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.9);
  pointer-events: none;
  transition: opacity 0.2s;
  opacity: 0;
}
.thumbslide__nav::before {
  left: 0;
}
.thumbslide__nav::after {
  right: 0;
}

.thumbslide__nav--scroll-end::after {
  opacity: 1;
}

.thumbslide__nav--scroll-start::before {
  opacity: 1;
}

.thumbslide__nav-list {
  position: relative;
  z-index: 1;
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: center;
  will-change: transform;
  transition: -webkit-transform 0.5s;
  transition: transform 0.5s;
  transition: transform 0.5s, -webkit-transform 0.5s;
}
.thumbslide__nav-list:hover .thumbslide__nav-item {
  opacity: 0.6;
}

.thumbslide__nav-list--dragging {
  cursor: -webkit-grabbing;
  cursor: grabbing;
}

.thumbslide__nav-list--no-transition {
  transition: none;
}

.thumbslide__nav-item {
  float: left;
  flex-shrink: 0;
  width: var(--thumbslide-thumbnail-auto-size);
  margin-right: var(--thumbslide-thumbnail-grid-gap);
  transition: opacity 0.3s, -webkit-transform 0.3s;
  transition: opacity 0.3s, transform 0.3s;
  transition: opacity 0.3s, transform 0.3s, -webkit-transform 0.3s;
  will-change: transform, opacity;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
.thumbslide__nav-item img {
  display: block;
  pointer-events: none;
}
.thumbslide__nav-item:hover {
  opacity: 1 !important;
}

.thumbslide__nav-item--active {
  position: relative;
  opacity: 1 !important;
}
.thumbslide__nav-item--active::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background: hsla(var(--te9-color-black-hsl), 0.7) url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cg stroke-width='1.5' stroke='%23ffffff'%3E%3Cpolyline fill='none' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10' points='1,9 5,13 15,3 ' %3E%3C/polyline%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
  background-size: 1.25em;
  -webkit-backdrop-filter: blur(5px);
          backdrop-filter: blur(5px);
}

.thumbslide__caption {
  background-color: hsla(var(--te9-color-bg-hsl), 0.85);
  padding: var(--te9-space-md);
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
}

.thumbslide--top {
  display: flex;
  flex-direction: column;
}
.thumbslide--top .slideshow {
  order: 1;
}

.thumbslide--vertical {
  display: flex;
}
@media not all and (min-width: 48rem) {
  .thumbslide--vertical {
    --thumbslide-thumbnail-auto-size: 50px;
  }
}

.thumbslide--vertical .slideshow {
  display: inline-block;
  flex-grow: 1;
}

.thumbslide--vertical .thumbslide__nav-wrapper {
  float: right;
  width: var(--thumbslide-thumbnail-auto-size);
  flex-shrink: 0;
}

.thumbslide--vertical .thumbslide__nav {
  padding: 0 var(--thumbslide-thumbnail-grid-gap);
  width: 100%;
  height: 100%;
}
.thumbslide--vertical .thumbslide__nav::after, .thumbslide--vertical .thumbslide__nav::before {
  width: 80%;
  height: 0;
  left: 10%;
}
.thumbslide--vertical .thumbslide__nav::before {
  top: 0;
}
.thumbslide--vertical .thumbslide__nav::after {
  top: auto;
  bottom: 0;
}

.thumbslide--vertical .thumbslide__nav-list {
  flex-direction: column;
  position: absolute;
  top: 0;
}

.thumbslide--vertical .thumbslide__nav-item {
  margin-right: 0;
  margin-bottom: var(--thumbslide-thumbnail-grid-gap);
}
.thumbslide--vertical .thumbslide__nav-item img {
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.thumbslide--left .slideshow {
  order: 1;
}

/* utility classes */
.te9-bg {
  --te9-bg-o: 1;
  background-color: hsla(var(--te9-color-bg-hsl), var(--te9-bg-o, 1));
}

.te9-text-component :where(h1, h2, h3, h4) {
  line-height: var(--te9-heading-line-height, 1.2);
  margin-top: calc(var(--te9-space-md) * var(--te9-space-multiplier, 1));
  margin-bottom: calc(var(--te9-space-sm) * var(--te9-space-multiplier, 1));
}

.te9-text-component :where(p, blockquote, ul li, ol li) {
  line-height: var(--te9-body-line-height, 1.4);
}

.te9-text-component :where(ul, ol, p, blockquote, .te9-text-component__block) {
  margin-bottom: calc(var(--te9-space-sm) * var(--te9-space-multiplier, 1));
}

.te9-text-component :where(ul, ol) {
  padding-left: 1.25em;
}

.te9-text-component ul :where(ul, ol), .te9-text-component ol :where(ul, ol) {
  padding-left: 1em;
  margin-bottom: 0;
}

.te9-text-component ul {
  list-style-type: disc;
}

.te9-text-component ol {
  list-style-type: decimal;
}

.te9-text-component img {
  display: block;
  margin: 0 auto;
}

.te9-text-component figcaption {
  margin-top: calc(var(--te9-space-xs) * var(--te9-space-multiplier, 1));
  font-size: var(--te9-text-sm);
  text-align: center;}

.te9-text-component em {
  font-style: italic;
}

.te9-text-component strong {
  font-weight: bold;
}

.te9-text-component s {
  text-decoration: line-through;
}

.te9-text-component u {
  text-decoration: underline;
}

.te9-text-component mark {
  background-color: hsla(var(--te9-color-accent-hsl), 0.2);
  color: inherit;
}

.te9-text-component blockquote {
  padding-left: 1em;
  border-left: 4px solid hsl(var(--te9-color-contrast-lower-hsl));
  font-style: italic;
}

.te9-text-component hr {
  margin: calc(var(--te9-space-md) * var(--te9-space-multiplier, 1)) auto;
  background: hsl(var(--te9-color-contrast-lower-hsl));
  height: 1px;
}

.te9-text-component > *:first-child {
  margin-top: 0;
}

.te9-text-component > *:last-child {
  margin-bottom: 0;
}

.te9-text-component.te9-line-height-xs {
  --te9-heading-line-height: 1;
  --te9-body-line-height: 1.1;
}

.te9-text-component.te9-line-height-sm {
  --te9-heading-line-height: 1.1;
  --te9-body-line-height: 1.2;
}

.te9-text-component.te9-line-height-md {
  --te9-heading-line-height: 1.15;
  --te9-body-line-height: 1.4;
}

.te9-text-component.te9-line-height-lg {
  --te9-heading-line-height: 1.22;
  --te9-body-line-height: 1.58;
}

.te9-text-component.te9-line-height-xl {
  --te9-heading-line-height: 1.3;
  --te9-body-line-height: 1.72;
}

.te9-sr-only {
  position: absolute;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  width: 1px;
  height: 1px;
  overflow: hidden;
  padding: 0;
  border: 0;
  white-space: nowrap;
}