/*------------------------------------*\
  #SCROLLBAR-PROPERTIES-&-KEYFRAMES
\*------------------------------------*/
/**
 * Custom transition when hovering over the content
 */
@property --scrollbar-transition {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}
/**
 * Scroll shadows keyframes
 */
@keyframes mcl-scroll-shadows {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
/*------------------------------------*\
  #SCROLLBAR
\*------------------------------------*/
/**
 * Custom scrollbar
 */
::-webkit-scrollbar {
  -webkit-appearance: none;
  width: 8px;
  height: 8px;
  border-radius: 0;
  background: transparent;
  /* Fallback for non-webkit browsers */
  scrollbar-width: thin;
  scrollbar-color: var(--color-neutral-30, #B3B3B3) transparent;
}

::-webkit-scrollbar-thumb {
  border-radius: 0;
  background: var(--color-neutral-30, #B3B3B3);
  cursor: pointer;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--color-neutral-50, #808080);
}

/**
 * Scrollbar container and content
 */
.mcl-scroll__container {
  position: relative;
  overflow: hidden;
  height: 100%;
  width: 100%;
}
.mcl-scroll__container .mcl-scroll__content {
  height: 100%;
  overflow-y: scroll;
  transition: --scrollbar-transition 350ms ease 100ms;
  scroll-timeline: --scroll-timeline block;
  /**
   * Scroll shadows using ::before and ::after pseudo-elements
   */
}
.mcl-scroll__container .mcl-scroll__content:hover {
  --scrollbar-transition: var(--color-neutral-30, #B3B3B3);
}
.mcl-scroll__container .mcl-scroll__content::-webkit-scrollbar-thumb {
  background: var(--scrollbar-transition);
}
.mcl-scroll__container .mcl-scroll__content::-webkit-scrollbar-thumb:hover {
  background: var(--color-neutral-50, #808080);
}
.mcl-scroll__container .mcl-scroll__content::before, .mcl-scroll__container .mcl-scroll__content::after {
  content: "";
  position: absolute;
  left: 0;
  right: 8px;
  height: 40px;
  z-index: 10;
  pointer-events: none;
  opacity: 0;
  animation-timeline: --scroll-timeline;
  animation-duration: 1ms;
  animation-timing-function: linear;
  animation-fill-mode: both;
}
.mcl-scroll__container .mcl-scroll__content::before {
  top: 0;
  background: linear-gradient(to bottom, var(--color-neutral-00, #fff) 0%, rgba(255, 255, 255, 0) 100%);
  animation-range: 1em 4em;
  animation-name: mcl-scroll-shadows;
}
.mcl-scroll__container .mcl-scroll__content::after {
  bottom: 0;
  background: linear-gradient(to top, var(--color-neutral-00, #fff) 0%, rgba(255, 255, 255, 0) 100%);
  animation-direction: reverse;
  animation-range: calc(100% - 4em) calc(100% - 1em);
  animation-name: mcl-scroll-shadows;
}

/*------------------------------------*\
  #LAPTOP-MEDIA-QUERY
\*------------------------------------*/
/**
 * 1280px
 */
@media (max-width: 80em) {
  /**
  * [Laptop] Custom scrollbar
  */
  ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }
  /**
  * [Laptop] Scroll shadows
  */
  .mcl-scroll__content::before,
  .mcl-scroll__content::after {
    right: 6px;
  }
}
/*------------------------------------*\
  #MENU-AT-RULES
\*------------------------------------*/
/**
 * Custom transition when hovering over the content
 */
@property --scrollbar-transition-menu {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}
@keyframes mcl-menu__scroll--shadow {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@position-try --try-flip-block {
  top: auto;
  bottom: anchor(top);
}
@position-try --try-flip-inline {
  left: auto;
  right: anchor(end);
}
@position-try --try-flip-both {
  top: auto;
  bottom: anchor(top);
  left: auto;
  right: anchor(end);
}
/*------------------------------------*\
  #MENU-POPOVER-COMPONENT
\*------------------------------------*/
/**
 * Menu
 */
.mcl-menu {
  /* Config */
  /* Layout and spacing */
  --menu-height: 40px;
  --menu-padding-base: 0.75em;
  --menu-padding-base-lg: 1em;
  --menu-margin: 0.25em;
  --menu-gap: 0.75em;
  --menu-icon-size-base: 18px;
  --menu-icon-size-base-lg: 24px;
  --menu-max-height: 300px;
  --menu-max-width: 264px;
  --menu-min-width: 200px;
  /* Stroke and radius */
  --menu-border-radius: 1em;
  --menu-border-width: 2px;
  --menu-border-style: solid;
  --menu-outline: var(--menu-border-width) var(--menu-border-style) var(--menu-border-color);
  --menu-outline-offset: calc(var(--menu-border-width) * -1);
  --menu-border-length: 0 0 0 1px;
  --menu-shadow-length: 0 2px 8px;
  /* Colors */
  --menu-bg: var(--color-neutral-00, #FFFFFF);
  --menu-bg-hover: var(--color-neutral-05, #F2F2F2);
  --menu-bg-active: var(--color-neutral-10, #E6E6E6);
  --menu-border-color: var(--color-neutral-30, #B3B3B3);
  --menu-color-disabled: var(--color-neutral-40, #999999);
  --menu-color: var(--color-neutral-90, #191919);
  --menu-color-active: var(--color-neutral-100, #000000);
  --menu-color-warning: var(--color-functional-70, #D3281F);
  /* Typography */
  --menu-font-size: var(--font-size-md, 1rem);
  --menu-font-weight: var(--font-weight-medium, 500);
  --menu-font-weight-selected: var(--font-weight-semibold, 600);
  --menu-line-height: 1.5rem;
  /* Interactive */
  --menu-timing: 250ms;
  --menu-cubic-bezier: cubic-bezier(0.34, 1.56, 0.64, 1);
  --menu-bounce-down: translateY(-1em);
  --menu-bounce-up: translateY(1em);
  inset: auto;
  opacity: 0;
  border: none;
  background: var(--menu-bg);
  border-radius: var(--menu-border-radius);
  box-shadow: var(--menu-border-length) var(--menu-border-color), var(--menu-shadow-length) var(--menu-border-color);
  margin: 0;
  padding: 0;
  position: absolute;
  top: anchor(bottom);
  left: anchor(start);
  position-try-fallbacks: --try-flip-block, --try-flip-inline, --try-flip-both;
  margin-block: var(--menu-margin);
  min-width: var(--menu-min-width);
  max-width: var(--menu-max-width);
  font-size: var(--menu-font-size);
  line-height: var(--menu-line-height);
  overflow: clip;
  transform: translateY(0);
  transition: none;
  /* Closing transition */
  /* Default downward animation if opening below */
  /* Upward animation if opening above */
  /* Disables animation on popover opening */
}
.mcl-menu:popover-open, .mcl-menu.mcl-menu--bottom:popover-open {
  opacity: 1;
  transform: translateY(0);
  transition: transform var(--menu-timing) var(--menu-cubic-bezier), opacity var(--menu-timing);
}
@starting-style {
  .mcl-menu:popover-open, .mcl-menu.mcl-menu--bottom:popover-open {
    opacity: 0;
    transform: var(--menu-bounce-down);
  }
}
.mcl-menu.mcl-menu--top:popover-open {
  opacity: 1;
  transform: translateY(0);
  transition: transform var(--menu-timing) var(--menu-cubic-bezier), opacity var(--menu-timing);
}
@starting-style {
  .mcl-menu.mcl-menu--top:popover-open {
    opacity: 0;
    transform: var(--menu-bounce-up);
  }
}
.mcl-menu .mcl-menu__list {
  display: flex;
  flex-direction: column;
  list-style: none;
  padding: calc(var(--menu-padding-base-lg) / 2); /* 8px */
  padding-right: 0;
  margin: 0;
  gap: calc(var(--menu-gap) / 6); /* 2px */
  user-select: none;
  font-size: var(--menu-font-size);
  max-height: var(--menu-max-height);
  overflow-y: scroll;
  transition: --scrollbar-transition-menu 350ms ease 100ms;
  scroll-timeline: --menu-scroll y;
  /* Custom scrollbar when hovering */
  /* Menu scroll shadows */
  /**
  * Menu Button
  */
  /**
  * Menu divider
  */
  /**
   * Menu Submenu
   */
}
.mcl-menu .mcl-menu__list:hover {
  --scrollbar-transition-menu: var(--color-neutral-30, #B3B3B3);
}
.mcl-menu .mcl-menu__list::-webkit-scrollbar-thumb {
  background: var(--scrollbar-transition-menu);
}
.mcl-menu .mcl-menu__list::-webkit-scrollbar-thumb:hover {
  background: var(--color-neutral-50, #808080);
}
.mcl-menu .mcl-menu__list:before, .mcl-menu .mcl-menu__list:after {
  content: "";
  position: absolute;
  left: 0;
  right: calc(var(--menu-padding-base-lg) / 2); /* 8px */
  height: var(--menu-height); /* 40px */
  z-index: 10;
  pointer-events: none;
  opacity: 0;
  animation-timeline: --menu-scroll;
  animation-duration: 1ms;
  animation-timing-function: linear;
  animation-fill-mode: both;
  animation-name: mcl-menu__scroll--shadow;
}
.mcl-menu .mcl-menu__list:before {
  top: 0;
  background: linear-gradient(to bottom, var(--color-neutral-00, #fff) 0%, rgba(255, 255, 255, 0) 100%);
  animation-range: 1px var(--menu-height);
}
.mcl-menu .mcl-menu__list:after {
  bottom: 0;
  background: linear-gradient(to top, var(--color-neutral-00, #fff) 0%, rgba(255, 255, 255, 0) 100%);
  animation-direction: reverse;
  animation-range: calc(100% - var(--menu-height)) calc(100% - 1px);
}
.mcl-menu .mcl-menu__list .mcl-menu__btn {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--menu-gap);
  width: 100%;
  padding: calc(var(--menu-padding-base-lg) / 2) var(--menu-padding-base);
  /* 8px 12px */
  border: none;
  border-radius: calc(var(--menu-border-radius) / 2); /* 8px */
  background: transparent;
  color: var(--menu-color);
  font-size: var(--menu-font-size);
  font-weight: var(--menu-font-weight);
  line-height: var(--menu-line-height);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  /**
  * Menu Button pseudo-classes
  */
  /**
  * Menu Button Icon
  */
  /**
  * Menu Button Warning State
  */
  /**
  * Menu Button Submenu
  */
  /**
  * Menu Button Toggle
  */
  /**
  * Menu Button Checkbox
  */
}
.mcl-menu .mcl-menu__list .mcl-menu__btn:hover {
  background-color: var(--menu-bg-hover);
  color: var(--menu-color-active);
  outline: none;
}
.mcl-menu .mcl-menu__list .mcl-menu__btn:focus-visible {
  outline: var(--menu-outline);
  outline-offset: var(--menu-outline-offset);
}
.mcl-menu .mcl-menu__list .mcl-menu__btn:disabled {
  background-color: var(--menu-bg);
  color: var(--menu-color-disabled);
  cursor: not-allowed;
}
.mcl-menu .mcl-menu__list .mcl-menu__btn.active, .mcl-menu .mcl-menu__list .mcl-menu__btn[aria-checked=true] {
  background-color: var(--menu-bg-active);
  font-weight: var(--menu-font-weight-selected);
  color: var(--menu-color-active);
}
.mcl-menu .mcl-menu__list .mcl-menu__btn.active:hover, .mcl-menu .mcl-menu__list .mcl-menu__btn[aria-checked=true]:hover {
  background-color: var(--menu-bg-active);
}
.mcl-menu .mcl-menu__list .mcl-menu__btn span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  user-select: none;
}
.mcl-menu .mcl-menu__list .mcl-menu__btn.mcl-menu__btn__icon--left, .mcl-menu .mcl-menu__list .mcl-menu__btn.mcl-menu__btn__icon--right {
  padding: calc(var(--menu-padding-base-lg) / 2); /* 8px */
}
.mcl-menu .mcl-menu__list .mcl-menu__btn.mcl-menu__btn__icon--left i, .mcl-menu .mcl-menu__list .mcl-menu__btn.mcl-menu__btn__icon--left svg, .mcl-menu .mcl-menu__list .mcl-menu__btn.mcl-menu__btn__icon--right i, .mcl-menu .mcl-menu__list .mcl-menu__btn.mcl-menu__btn__icon--right svg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--menu-icon-size-base-lg);
  min-height: var(--menu-icon-size-base-lg);
  width: var(--menu-icon-size-base-lg);
}
.mcl-menu .mcl-menu__list .mcl-menu__btn.mcl-menu__btn__icon--left svg, .mcl-menu .mcl-menu__list .mcl-menu__btn.mcl-menu__btn__icon--right svg {
  font-size: inherit;
  min-width: var(--menu-icon-size-base);
  min-height: var(--menu-icon-size-base);
  width: var(--menu-icon-size-base);
  height: var(--menu-icon-size-base);
  padding: calc(var(--menu-padding-base) / 4); /* 3px */
}
.mcl-menu .mcl-menu__list .mcl-menu__btn.mcl-menu__btn--warning {
  color: var(--menu-color-warning);
}
.mcl-menu .mcl-menu__list .mcl-menu__btn.mcl-menu__btn--warning:hover {
  background-color: var(--menu-color-warning);
  color: var(--menu-bg);
}
.mcl-menu .mcl-menu__list .mcl-menu__btn.mcl-menu__btn--warning:focus-visible {
  outline-color: var(--menu-color-warning);
}
.mcl-menu .mcl-menu__list .mcl-menu__btn.mcl-menu__btn--warning:disabled {
  background-color: var(--menu-bg);
  color: var(--menu-color-disabled);
  cursor: not-allowed;
}
.mcl-menu .mcl-menu__list .mcl-menu__btn.mcl-menu__btn__icon--right:not(.mcl-menu__btn__icon--left) {
  padding: calc(var(--menu-padding-base-lg) / 2) var(--menu-padding-base);
  /* 8px 12px */
}
.mcl-menu .mcl-menu__list .mcl-menu__btn.mcl-menu__btn__icon--right > :is(i, svg):last-child {
  margin-left: auto; /* Push icon to the right */
}
.mcl-menu .mcl-menu__list .mcl-menu__btn.mcl-toggle__wrapper--btn {
  max-width: revert;
}
.mcl-menu .mcl-menu__list .mcl-menu__btn.mcl-toggle__wrapper--btn .mcl-toggle {
  margin-left: auto; /* Push toggle to the right */
}
.mcl-menu .mcl-menu__list .mcl-menu__btn.mcl-checkbox__wrapper--btn {
  padding: calc(var(--menu-padding-base-lg) / 2); /* 8px */
  max-width: revert;
}
.mcl-menu .mcl-menu__list .mcl-menu__divider {
  height: 1px;
  background-color: var(--menu-border-color);
  margin: calc(var(--menu-margin) * 2) 0; /* 8px 0 */
}
.mcl-menu .mcl-menu__list .mcl-menu__list-item--submenu {
  anchor-name: var(--submenu-anchor-name);
}
.mcl-menu .mcl-menu__list .mcl-menu__submenu {
  position-anchor: var(--submenu-anchor-name);
  top: calc(anchor(top) - var(--menu-padding-base-lg) / 2); /* 8px */
  left: anchor(end);
  margin-block: 0;
  margin-inline: var(--menu-margin);
  position-try-fallbacks: flip-inline;
}
.mcl-menu .mcl-menu__list .mcl-menu__submenu .mcl-menu__btn--back {
  display: none;
}
.mcl-menu.is-opening .mcl-checkbox__wrapper--btn .mcl-checkbox__wrapper .mcl-checkbox:checked + svg {
  animation-duration: 0s;
}

/*------------------------------------*\
  #LAPTOP-MEDIA-QUERY
\*------------------------------------*/
/**
 * 1280px
 */
@media (max-width: 80em) {
  /**
   * [Laptop] Menu
   */
  .mcl-menu {
    /* Config */
    /* Layout and spacing */
    --menu-height: 32px;
    --menu-padding-base: 0.6666667em; /* 8px */
    --menu-icon-size-base: 16px;
    --menu-icon-size-base-lg: 20px;
    --menu-max-height: 240px;
    --menu-max-width: 200px;
    --menu-min-width: 160px;
    /* Stroke and radius */
    --menu-border-width: 1.5px;
    /* Typography */
    --menu-font-size: var(--font-size-xs, 0.75rem);
    --menu-font-weight: var(--font-weight-regular, 400);
    --menu-line-height: 1.25rem;
  }
}
/*------------------------------------*\
  #TABLET-LANDSCAPE-MEDIA-QUERY
\*------------------------------------*/
/**
 * 960px
 */
@media (max-width: 60em) {
  /**
  * [Menu] Removes hover and active states on touch devices
  */
}
@media (max-width: 60em) and (hover: none) and (pointer: coarse) {
  .mcl-menu .mcl-menu__list .mcl-menu__btn:hover {
    background-color: transparent;
    color: inherit;
  }
  .mcl-menu .mcl-menu__list .mcl-menu__btn.mcl-menu__btn--warning:hover {
    background-color: transparent;
    color: var(--menu-color-warning);
  }
}
/*------------------------------------*\
  #TABLET-PORTRAIT-MEDIA-QUERY
\*------------------------------------*/
/**
 * 768px
 */
@media (max-width: 48em) {
  /**
  * [Tablet Portrait] Menu
  */
  .mcl-menu {
    /* Config */
    --menu-padding-base: 0.75em;
    --menu-padding-base-lg: 1em;
    --menu-icon-size-base: 18px;
    --menu-icon-size-base-lg: 24px;
    --menu-max-height: 75vh;
    --menu-font-size: var(--font-size-md, 1rem);
    --menu-font-weight: var(--font-weight-medium, 500);
    --menu-line-height: 1.5rem;
    inset: auto;
    width: -webkit-fill-available;
    margin: 1rem;
    bottom: 0;
    max-width: none;
    position-try-fallbacks: none;
    box-shadow: var(--menu-border-length) var(--menu-border-color);
    transition: transform 250ms cubic-bezier(0.65, 0.05, 0.36, 1), display var(--menu-timing) allow-discrete, opacity var(--menu-timing) ease-out, overlay var(--menu-timing) ease-out;
    transition-behavior: allow-discrete;
    transform: translateY(100vh);
  }
  .mcl-menu:popover-open, .mcl-menu.mcl-menu--top:popover-open, .mcl-menu.mcl-menu--bottom:popover-open {
    transform: translateY(0);
    opacity: 1;
    transition: transform 250ms cubic-bezier(0.65, 0.05, 0.36, 1), display var(--menu-timing) allow-discrete, opacity var(--menu-timing) ease-out, overlay var(--menu-timing) ease-out;
    transition-behavior: allow-discrete;
  }
  @starting-style {
    .mcl-menu:popover-open, .mcl-menu.mcl-menu--top:popover-open, .mcl-menu.mcl-menu--bottom:popover-open {
      transform: translateY(100vh);
      opacity: 0;
    }
  }
  .mcl-menu::backdrop {
    background-color: rgba(0, 0, 0, 0.6);
    transition: opacity var(--menu-timing) ease-out;
  }
  .mcl-menu.is-hidden {
    transform: translateY(100vh);
    pointer-events: none;
    opacity: 0;
  }
  .mcl-menu .mcl-menu__list .mcl-menu__btn {
    /**
    * Menu Button Toggle Resets
    */
    /**
    * Menu Button Checkbox Resets
    */
  }
  .mcl-menu .mcl-menu__list .mcl-menu__btn.mcl-toggle__wrapper--btn .mcl-toggle {
    --t-width: 40px;
    --t-height: 24px;
    --t-icon-size: 18px;
    --t-icon-position: 3px;
  }
  .mcl-menu .mcl-menu__list .mcl-menu__btn.mcl-toggle__wrapper--btn .mcl-toggle input:checked + .mcl-toggle__slider:before {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16px" height="16px" viewBox="0 0 21 21"><path d="M5 10.75 8.5 14.25 16 6" fill="none" stroke="green" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"></path></svg>');
    transform: translateX(16px);
  }
  .mcl-menu .mcl-menu__list .mcl-menu__btn.mcl-toggle__wrapper--btn .mcl-toggle input:checked:disabled + .mcl-toggle__slider:before {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16px" height="16px" viewBox="0 0 21 21"><path d="M5 10.75 8.5 14.25 16 6" fill="none" stroke="grey" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"></path></svg>');
  }
  .mcl-menu .mcl-menu__list .mcl-menu__btn.mcl-toggle__wrapper--btn .mcl-toggle input:disabled + .mcl-toggle__slider:before {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16px" height="16px" viewBox="0 0 21 21"><path d="M6 6L15 15M6 15L15 6" fill="none" stroke="grey" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"></path></svg>');
  }
  .mcl-menu .mcl-menu__list .mcl-menu__btn.mcl-toggle__wrapper--btn .mcl-toggle .mcl-toggle__slider:before {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16px" height="16px" viewBox="0 0 21 21"><path d="M6 6L15 15M6 15L15 6" fill="none" stroke="black" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"></path></svg>');
  }
  .mcl-menu .mcl-menu__list .mcl-menu__btn.mcl-checkbox__wrapper--btn .mcl-checkbox__wrapper {
    --cb-width: 24px;
    --cb-height: 24px;
  }
  .mcl-menu .mcl-menu__list .mcl-menu__divider {
    list-style-type: disc;
  }
  .mcl-menu .mcl-menu__list .mcl-menu__list-item--submenu {
    anchor-name: unset;
  }
  .mcl-menu .mcl-menu__list .mcl-menu__list-item--submenu .mcl-menu__submenu {
    position-anchor: unset;
    pointer-events: auto;
    top: unset;
    left: unset;
    margin: 1rem;
    position-try-fallbacks: none;
  }
  .mcl-menu .mcl-menu__list .mcl-menu__list-item--submenu .mcl-menu__submenu::backdrop {
    background-color: transparent;
    transition: none;
  }
  .mcl-menu .mcl-menu__list .mcl-menu__list-item--submenu .mcl-menu__submenu .mcl-menu__btn--back {
    --menu-height: 32px;
    --menu-padding-base: 0.6666667em;
    --menu-icon-size-base: 16px;
    --menu-icon-size-base-lg: 20px;
    --menu-font-size: var(--font-size-xs, 0.75rem);
    --menu-line-height: 1.25rem;
    --menu-gap: 0.5em;
    display: flex;
  }
  .mcl-menu .mcl-menu__list .mcl-menu__list-item--submenu .mcl-menu__submenu .mcl-menu__btn--back span {
    font-size: var(--font-size-sm, 0.875rem);
  }
}
/*------------------------------------*\
  #FONT-FACES
\*------------------------------------*/
/* montserrat-300 - latin */
@font-face {
  font-display: swap;
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 300;
  src: url("../assets/fonts/montserrat-v30-latin-300.woff2") format("woff2");
}
/* montserrat-300italic - latin */
@font-face {
  font-display: swap;
  font-family: "Montserrat";
  font-style: italic;
  font-weight: 300;
  src: url("../assets/fonts/montserrat-v30-latin-300italic.woff2") format("woff2");
}
/* montserrat-regular - latin */
@font-face {
  font-display: swap;
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 400;
  src: url("../assets/fonts/montserrat-v30-latin-regular.woff2") format("woff2");
}
/* montserrat-italic - latin */
@font-face {
  font-display: swap;
  font-family: "Montserrat";
  font-style: italic;
  font-weight: 400;
  src: url("../assets/fonts/montserrat-v30-latin-italic.woff2") format("woff2");
}
/* montserrat-500 - latin */
@font-face {
  font-display: swap;
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 500;
  src: url("../assets/fonts/montserrat-v30-latin-500.woff2") format("woff2");
}
/* montserrat-500italic - latin */
@font-face {
  font-display: swap;
  font-family: "Montserrat";
  font-style: italic;
  font-weight: 500;
  src: url("../assets/fonts/montserrat-v30-latin-500italic.woff2") format("woff2");
}
/* montserrat-600 - latin */
@font-face {
  font-display: swap;
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 600;
  src: url("../assets/fonts/montserrat-v30-latin-600.woff2") format("woff2");
}
/* montserrat-600italic - latin */
@font-face {
  font-display: swap;
  font-family: "Montserrat";
  font-style: italic;
  font-weight: 600;
  src: url("../assets/fonts/montserrat-v30-latin-600italic.woff2") format("woff2");
}
/* montserrat-700 - latin */
@font-face {
  font-display: swap;
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 700;
  src: url("../assets/fonts/montserrat-v30-latin-700.woff2") format("woff2");
}
/* montserrat-700italic - latin */
@font-face {
  font-display: swap;
  font-family: "Montserrat";
  font-style: italic;
  font-weight: 700;
  src: url("../assets/fonts/montserrat-v30-latin-700italic.woff2") format("woff2");
}
/*------------------------------------*\
  #VARIABLES
\*------------------------------------*/
:root {
  /*------------------------------------*\
   	#COLORS
  \*------------------------------------*/
  /**
  * Neutral Colors
  */
  --color-neutral-00: #FFFFFF;
  --color-neutral-05: #F2F2F2;
  --color-neutral-10: #E6E6E6;
  --color-neutral-20: #CCCCCC;
  --color-neutral-30: #B3B3B3;
  --color-neutral-40: #999999;
  --color-neutral-50: #808080;
  --color-neutral-60: #666666;
  --color-neutral-70: #4D4D4D;
  --color-neutral-80: #333333;
  --color-neutral-90: #191919;
  --color-neutral-100: #000000;
  /**
  * Primary Colors
  */
  --color-primary-20: #49BC89;
  --color-primary-40: #1F9E73;
  --color-primary-60: #008066; /* Mainscape green */
  --color-primary-80: #006A61;
  --color-primary-100: #005055;
  /**
  * Secondary Colors
  */
  --color-secondary-20: #FFE256;
  --color-secondary-40: #FFD92A;
  --color-secondary-60: #FFD200; /* Mainscape yellow */
  --color-secondary-80: #DEB400;
  --color-secondary-100: #BD9700;
  /**
  * Functional Colors
  */
  --color-functional-10: #20A042;
  --color-functional-20: #1a8035;
  --color-functional-30: #2660F2;
  --color-functional-40: #1e4dc2;
  --color-functional-50: #F9AE00;
  --color-functional-60: #c78b00;
  --color-functional-70: #D3281F;
  --color-functional-75: rgba(211, 40, 31, 0.2);
  --color-functional-80: #a92019;
  --color-functional-85: rgba(211, 40, 31, 0.3);
  --color-functional-90: #9747FF;
  --color-functional-100: #7939cc;
  /*------------------------------------*\
   	#TYPOGRAPHY
  \*------------------------------------*/
  /**
  * Font family
  */
  --font-family: "Montserrat", system-ui, sans-serif;
  /**
  * Font sizes
  */
  --font-size-xxs: 0.625rem; /* 10px */
  --font-size-xs: 0.75rem; /* 12px */
  --font-size-sm: 0.875rem; /* 14px */
  --font-size-md: 1rem; /* 16px */
  --font-size-lg: 1.125rem; /* 18px */
  --font-size-xl: 1.25rem; /* 20px */
  --font-size-xxl: 1.5rem; /* 24px */
  --font-size-xxxl: 2rem; /* 32px */
  /**
  * Font Weight
  */
  --font-weight-thin: 100;
  --font-weight-extralight: 200;
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;
  --font-weight-black: 900;
}

/*------------------------------------*\
  #CSS-RESETS
\*------------------------------------*/
/** 
 * Border Box
 */
/**
 * Reset: Smooth scrolling experieince
 */
/**
 * Reset: Full height body to avoid 100vh issues on mobile
 * Prevents scrollbars from appearing on the body
 */
html:has(.css-v3),
body:has(.css-v3) {
  height: 100vh;
  margin: 0;
  overflow: clip;
  font-size: initial;
}

/**
 * Reset: Smooth scrolling experieince,
 * Allows transition to height auto
 */
html {
  scroll-behavior: smooth;
  interpolate-size: allow-keywords;
}

html:has(.css-v3) *,
html:has(.css-v3) *::before,
html:has(.css-v3) *::after {
  box-sizing: border-box;
}
html:has(.css-v3) * {
  margin: 0;
  padding: 0;
  line-height: calc(1em + 0.5rem);
}
html:has(.css-v3) body {
  font-family: var(--font-family), "Montserrat", system-ui, sans-serif;
}
html:has(.css-v3) img,
html:has(.css-v3) picture,
html:has(.css-v3) video,
html:has(.css-v3) canvas,
html:has(.css-v3) svg {
  display: block;
  max-width: 100%;
}
html:has(.css-v3) input,
html:has(.css-v3) button,
html:has(.css-v3) textarea,
html:has(.css-v3) select {
  font: inherit;
}
html:has(.css-v3) button {
  border: none;
  background: none;
  color: inherit;
  cursor: pointer;
}

/**
 * Reset: Linking typeface
 */
/**
 * Reset: Images won't be uploaded weird
 */
/**
 * Forms inhearant default font highlighted within the body element
 */
/**
 * Default browser button resets
 */
/*------------------------------------*\
  #END-RESETS
\*------------------------------------*/
/**
 * TEMPORARY FIX TO MAIN.LAYOUT
 */
body:has(.css-v3) main.layout {
  --layout-padding: 1em;
  --layout-padding-lg: 2.5em;
  --layout-padding-sm: 8px;
  overflow: hidden;
  background: var(--color-neutral-10);
  padding: 0 var(--layout-padding-lg) var(--layout-padding-lg) calc(var(--layout-padding-lg) - var(--layout-padding-sm));
}

@media (max-width: 80em) {
  body:has(.css-v3) main.layout {
    --layout-padding-lg: 2em;
    --layout-padding: 0.6666667em;
    --layout-padding-sm: 6px;
  }
}