/*! tailwindcss v4.1.14 | MIT License | https://tailwindcss.com */
@layer properties;
@layer theme, base, components, utilities;
@layer theme {
  :root, :host {
    --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
      "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
      "Courier New", monospace;
    --color-purple-500: oklch(62.7% 0.265 303.9);
    --color-gray-50: oklch(98.5% 0.002 247.839);
    --color-gray-100: oklch(96.7% 0.003 264.542);
    --color-gray-200: oklch(92.8% 0.006 264.531);
    --color-gray-300: oklch(87.2% 0.01 258.338);
    --color-gray-500: oklch(55.1% 0.027 264.364);
    --color-gray-600: oklch(44.6% 0.03 256.802);
    --color-gray-700: oklch(37.3% 0.034 259.733);
    --color-gray-800: oklch(27.8% 0.033 256.848);
    --color-stone-200: oklch(92.3% 0.003 48.717);
    --color-black: #000;
    --color-white: #fff;
    --spacing: 0.25rem;
    --container-sm: 24rem;
    --container-md: 28rem;
    --container-xl: 36rem;
    --container-2xl: 42rem;
    --container-4xl: 56rem;
    --text-xs: 0.75rem;
    --text-xs--line-height: calc(1 / 0.75);
    --text-sm: 0.875rem;
    --text-sm--line-height: calc(1.25 / 0.875);
    --text-base: 1rem;
    --text-base--line-height: calc(1.5 / 1);
    --text-lg: 1.125rem;
    --text-lg--line-height: calc(1.75 / 1.125);
    --text-xl: 1.25rem;
    --text-xl--line-height: calc(1.75 / 1.25);
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --tracking-wide: 0.025em;
    --leading-tight: 1.25;
    --leading-normal: 1.5;
    --leading-loose: 2;
    --radius-md: 0.375rem;
    --default-font-family: var(--font-sans);
    --default-mono-font-family: var(--font-mono);
  }
}
@layer base {
  *, ::after, ::before, ::backdrop, ::file-selector-button {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0 solid;
  }
  html, :host {
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
    font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
    font-feature-settings: var(--default-font-feature-settings, normal);
    font-variation-settings: var(--default-font-variation-settings, normal);
    -webkit-tap-highlight-color: transparent;
  }
  hr {
    height: 0;
    color: inherit;
    border-top-width: 1px;
  }
  abbr:where([title]) {
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted;
  }
  h1, h2, h3, h4, h5, h6 {
    font-size: inherit;
    font-weight: inherit;
  }
  a {
    color: inherit;
    -webkit-text-decoration: inherit;
    text-decoration: inherit;
  }
  b, strong {
    font-weight: bolder;
  }
  code, kbd, samp, pre {
    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
    font-feature-settings: var(--default-mono-font-feature-settings, normal);
    font-variation-settings: var(--default-mono-font-variation-settings, normal);
    font-size: 1em;
  }
  small {
    font-size: 80%;
  }
  sub, sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
  }
  sub {
    bottom: -0.25em;
  }
  sup {
    top: -0.5em;
  }
  table {
    text-indent: 0;
    border-color: inherit;
    border-collapse: collapse;
  }
  :-moz-focusring {
    outline: auto;
  }
  progress {
    vertical-align: baseline;
  }
  summary {
    display: list-item;
  }
  ol, ul, menu {
    list-style: none;
  }
  img, svg, video, canvas, audio, iframe, embed, object {
    display: block;
    vertical-align: middle;
  }
  img, video {
    max-width: 100%;
    height: auto;
  }
  button, input, select, optgroup, textarea, ::file-selector-button {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    border-radius: 0;
    background-color: transparent;
    opacity: 1;
  }
  :where(select:is([multiple], [size])) optgroup {
    font-weight: bolder;
  }
  :where(select:is([multiple], [size])) optgroup option {
    padding-inline-start: 20px;
  }
  ::file-selector-button {
    margin-inline-end: 4px;
  }
  ::placeholder {
    opacity: 1;
  }
  @supports (not (-webkit-appearance: -apple-pay-button))  or (contain-intrinsic-size: 1px) {
    ::placeholder {
      color: currentcolor;
      @supports (color: color-mix(in lab, red, red)) {
        color: color-mix(in oklab, currentcolor 50%, transparent);
      }
    }
  }
  textarea {
    resize: vertical;
  }
  ::-webkit-search-decoration {
    -webkit-appearance: none;
  }
  ::-webkit-date-and-time-value {
    min-height: 1lh;
    text-align: inherit;
  }
  ::-webkit-datetime-edit {
    display: inline-flex;
  }
  ::-webkit-datetime-edit-fields-wrapper {
    padding: 0;
  }
  ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {
    padding-block: 0;
  }
  ::-webkit-calendar-picker-indicator {
    line-height: 1;
  }
  :-moz-ui-invalid {
    box-shadow: none;
  }
  button, input:where([type="button"], [type="reset"], [type="submit"]), ::file-selector-button {
    appearance: button;
  }
  ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
    height: auto;
  }
  [hidden]:where(:not([hidden="until-found"])) {
    display: none !important;
  }
}
@layer utilities {
  .invisible {
    visibility: hidden;
  }
  .absolute {
    position: absolute;
  }
  .fixed {
    position: fixed;
  }
  .relative {
    position: relative;
  }
  .static {
    position: static;
  }
  .-top-0\.5 {
    top: calc(var(--spacing) * -0.5);
  }
  .-top-2\.5 {
    top: calc(var(--spacing) * -2.5);
  }
  .top-0 {
    top: calc(var(--spacing) * 0);
  }
  .top-0\.5 {
    top: calc(var(--spacing) * 0.5);
  }
  .top-1 {
    top: calc(var(--spacing) * 1);
  }
  .top-6 {
    top: calc(var(--spacing) * 6);
  }
  .top-8 {
    top: calc(var(--spacing) * 8);
  }
  .top-20 {
    top: calc(var(--spacing) * 20);
  }
  .right-3 {
    right: calc(var(--spacing) * 3);
  }
  .right-5 {
    right: calc(var(--spacing) * 5);
  }
  .bottom-0 {
    bottom: calc(var(--spacing) * 0);
  }
  .left-0 {
    left: calc(var(--spacing) * 0);
  }
  .left-4 {
    left: calc(var(--spacing) * 4);
  }
  .z-0 {
    z-index: 0;
  }
  .z-10 {
    z-index: 10;
  }
  .z-20 {
    z-index: 20;
  }
  .z-50 {
    z-index: 50;
  }
  .container {
    width: 100%;
    @media (width >= 40rem) {
      max-width: 40rem;
    }
    @media (width >= 48rem) {
      max-width: 48rem;
    }
    @media (width >= 64rem) {
      max-width: 64rem;
    }
    @media (width >= 80rem) {
      max-width: 80rem;
    }
    @media (width >= 96rem) {
      max-width: 96rem;
    }
  }
  .m-1 {
    margin: calc(var(--spacing) * 1);
  }
  .mx-2 {
    margin-inline: calc(var(--spacing) * 2);
  }
  .mx-4 {
    margin-inline: calc(var(--spacing) * 4);
  }
  .mx-8 {
    margin-inline: calc(var(--spacing) * 8);
  }
  .mx-auto {
    margin-inline: auto;
  }
  .my-4 {
    margin-block: calc(var(--spacing) * 4);
  }
  .my-10 {
    margin-block: calc(var(--spacing) * 10);
  }
  .mt-0 {
    margin-top: calc(var(--spacing) * 0);
  }
  .mt-2 {
    margin-top: calc(var(--spacing) * 2);
  }
  .mt-3 {
    margin-top: calc(var(--spacing) * 3);
  }
  .mt-4 {
    margin-top: calc(var(--spacing) * 4);
  }
  .mt-6 {
    margin-top: calc(var(--spacing) * 6);
  }
  .mt-7 {
    margin-top: calc(var(--spacing) * 7);
  }
  .mt-10 {
    margin-top: calc(var(--spacing) * 10);
  }
  .mt-auto {
    margin-top: auto;
  }
  .mr-1 {
    margin-right: calc(var(--spacing) * 1);
  }
  .mr-2 {
    margin-right: calc(var(--spacing) * 2);
  }
  .mr-4 {
    margin-right: calc(var(--spacing) * 4);
  }
  .mr-16 {
    margin-right: calc(var(--spacing) * 16);
  }
  .mr-auto {
    margin-right: auto;
  }
  .mb-2 {
    margin-bottom: calc(var(--spacing) * 2);
  }
  .mb-4 {
    margin-bottom: calc(var(--spacing) * 4);
  }
  .mb-6 {
    margin-bottom: calc(var(--spacing) * 6);
  }
  .mb-7 {
    margin-bottom: calc(var(--spacing) * 7);
  }
  .mb-10 {
    margin-bottom: calc(var(--spacing) * 10);
  }
  .ml-0 {
    margin-left: calc(var(--spacing) * 0);
  }
  .ml-1 {
    margin-left: calc(var(--spacing) * 1);
  }
  .ml-2 {
    margin-left: calc(var(--spacing) * 2);
  }
  .ml-2\.5 {
    margin-left: calc(var(--spacing) * 2.5);
  }
  .ml-3 {
    margin-left: calc(var(--spacing) * 3);
  }
  .ml-4 {
    margin-left: calc(var(--spacing) * 4);
  }
  .ml-6 {
    margin-left: calc(var(--spacing) * 6);
  }
  .ml-auto {
    margin-left: auto;
  }
  .block {
    display: block;
  }
  .flex {
    display: flex;
  }
  .grid {
    display: grid;
  }
  .hidden {
    display: none;
  }
  .inline {
    display: inline;
  }
  .inline-block {
    display: inline-block;
  }
  .inline-flex {
    display: inline-flex;
  }
  .h-0 {
    height: calc(var(--spacing) * 0);
  }
  .h-3\/6 {
    height: calc(3/6 * 100%);
  }
  .h-4 {
    height: calc(var(--spacing) * 4);
  }
  .h-auto {
    height: auto;
  }
  .h-full {
    height: 100%;
  }
  .w-4 {
    width: calc(var(--spacing) * 4);
  }
  .w-5\/6 {
    width: calc(5/6 * 100%);
  }
  .w-6 {
    width: calc(var(--spacing) * 6);
  }
  .w-44 {
    width: calc(var(--spacing) * 44);
  }
  .w-fit {
    width: fit-content;
  }
  .w-full {
    width: 100%;
  }
  .max-w-2xl {
    max-width: var(--container-2xl);
  }
  .max-w-4xl {
    max-width: var(--container-4xl);
  }
  .max-w-sm {
    max-width: var(--container-sm);
  }
  .max-w-xl {
    max-width: var(--container-xl);
  }
  .grow {
    flex-grow: 1;
  }
  .-translate-y-full {
    --tw-translate-y: -100%;
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .transform {
    transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
  }
  .cursor-pointer {
    cursor: pointer;
  }
  .resize {
    resize: both;
  }
  .appearance-none {
    appearance: none;
  }
  .grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .flex-col {
    flex-direction: column;
  }
  .flex-row {
    flex-direction: row;
  }
  .flex-row-reverse {
    flex-direction: row-reverse;
  }
  .flex-wrap {
    flex-wrap: wrap;
  }
  .content-end {
    align-content: flex-end;
  }
  .items-center {
    align-items: center;
  }
  .items-start {
    align-items: flex-start;
  }
  .justify-between {
    justify-content: space-between;
  }
  .justify-center {
    justify-content: center;
  }
  .justify-end {
    justify-content: flex-end;
  }
  .gap-0 {
    gap: calc(var(--spacing) * 0);
  }
  .gap-4 {
    gap: calc(var(--spacing) * 4);
  }
  .gap-6 {
    gap: calc(var(--spacing) * 6);
  }
  .gap-8 {
    gap: calc(var(--spacing) * 8);
  }
  .gap-10 {
    gap: calc(var(--spacing) * 10);
  }
  .-space-x-px {
    :where(& > :not(:last-child)) {
      --tw-space-x-reverse: 0;
      margin-inline-start: calc(-1px * var(--tw-space-x-reverse));
      margin-inline-end: calc(-1px * calc(1 - var(--tw-space-x-reverse)));
    }
  }
  .divide-y {
    :where(& > :not(:last-child)) {
      --tw-divide-y-reverse: 0;
      border-bottom-style: var(--tw-border-style);
      border-top-style: var(--tw-border-style);
      border-top-width: calc(1px * var(--tw-divide-y-reverse));
      border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
    }
  }
  .divide-gray-100 {
    :where(& > :not(:last-child)) {
      border-color: var(--color-gray-100);
    }
  }
  .self-end {
    align-self: flex-end;
  }
  .self-start {
    align-self: flex-start;
  }
  .overflow-auto {
    overflow: auto;
  }
  .overflow-hidden {
    overflow: hidden;
  }
  .overflow-visible {
    overflow: visible;
  }
  .scroll-smooth {
    scroll-behavior: smooth;
  }
  .rounded {
    border-radius: 0.25rem;
  }
  .rounded-md {
    border-radius: var(--radius-md);
  }
  .rounded-none {
    border-radius: 0;
  }
  .border {
    border-style: var(--tw-border-style);
    border-width: 1px;
  }
  .border-2 {
    border-style: var(--tw-border-style);
    border-width: 2px;
  }
  .border-solid {
    --tw-border-style: solid;
    border-style: solid;
  }
  .border-gray-50 {
    border-color: var(--color-gray-50);
  }
  .border-gray-100 {
    border-color: var(--color-gray-100);
  }
  .border-gray-200 {
    border-color: var(--color-gray-200);
  }
  .border-gray-300 {
    border-color: var(--color-gray-300);
  }
  .border-stone-200 {
    border-color: var(--color-stone-200);
  }
  .bg-black {
    background-color: var(--color-black);
  }
  .bg-gray-100 {
    background-color: var(--color-gray-100);
  }
  .bg-gray-500 {
    background-color: var(--color-gray-500);
  }
  .bg-gray-800 {
    background-color: var(--color-gray-800);
  }
  .p-2 {
    padding: calc(var(--spacing) * 2);
  }
  .p-4 {
    padding: calc(var(--spacing) * 4);
  }
  .px-2 {
    padding-inline: calc(var(--spacing) * 2);
  }
  .px-3 {
    padding-inline: calc(var(--spacing) * 3);
  }
  .px-4 {
    padding-inline: calc(var(--spacing) * 4);
  }
  .px-8 {
    padding-inline: calc(var(--spacing) * 8);
  }
  .py-0 {
    padding-block: calc(var(--spacing) * 0);
  }
  .py-2 {
    padding-block: calc(var(--spacing) * 2);
  }
  .py-3 {
    padding-block: calc(var(--spacing) * 3);
  }
  .py-8 {
    padding-block: calc(var(--spacing) * 8);
  }
  .pt-2 {
    padding-top: calc(var(--spacing) * 2);
  }
  .pt-4 {
    padding-top: calc(var(--spacing) * 4);
  }
  .pt-5 {
    padding-top: calc(var(--spacing) * 5);
  }
  .pt-6 {
    padding-top: calc(var(--spacing) * 6);
  }
  .pt-10 {
    padding-top: calc(var(--spacing) * 10);
  }
  .pt-24 {
    padding-top: calc(var(--spacing) * 24);
  }
  .pr-2 {
    padding-right: calc(var(--spacing) * 2);
  }
  .pr-4 {
    padding-right: calc(var(--spacing) * 4);
  }
  .pr-8 {
    padding-right: calc(var(--spacing) * 8);
  }
  .pb-3 {
    padding-bottom: calc(var(--spacing) * 3);
  }
  .pb-4 {
    padding-bottom: calc(var(--spacing) * 4);
  }
  .pb-6 {
    padding-bottom: calc(var(--spacing) * 6);
  }
  .pl-0\.5 {
    padding-left: calc(var(--spacing) * 0.5);
  }
  .pl-4 {
    padding-left: calc(var(--spacing) * 4);
  }
  .text-center {
    text-align: center;
  }
  .text-base {
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
  }
  .text-lg {
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
  }
  .text-sm {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }
  .text-xl {
    font-size: var(--text-xl);
    line-height: var(--tw-leading, var(--text-xl--line-height));
  }
  .text-xs {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
  }
  .leading-8 {
    --tw-leading: calc(var(--spacing) * 8);
    line-height: calc(var(--spacing) * 8);
  }
  .leading-loose {
    --tw-leading: var(--leading-loose);
    line-height: var(--leading-loose);
  }
  .leading-normal {
    --tw-leading: var(--leading-normal);
    line-height: var(--leading-normal);
  }
  .leading-tight {
    --tw-leading: var(--leading-tight);
    line-height: var(--leading-tight);
  }
  .font-medium {
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
  }
  .font-semibold {
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
  }
  .tracking-wide {
    --tw-tracking: var(--tracking-wide);
    letter-spacing: var(--tracking-wide);
  }
  .text-gray-50 {
    color: var(--color-gray-50);
  }
  .text-gray-200 {
    color: var(--color-gray-200);
  }
  .text-gray-700 {
    color: var(--color-gray-700);
  }
  .text-gray-800 {
    color: var(--color-gray-800);
  }
  .text-white {
    color: var(--color-white);
  }
  .opacity-0 {
    opacity: 0%;
  }
  .opacity-60 {
    opacity: 60%;
  }
  .opacity-70 {
    opacity: 70%;
  }
  .opacity-80 {
    opacity: 80%;
  }
  .shadow {
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .hover\:cursor-pointer {
    &:hover {
      @media (hover: hover) {
        cursor: pointer;
      }
    }
  }
  .hover\:bg-gray-200 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-200);
      }
    }
  }
  .hover\:bg-gray-700 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-700);
      }
    }
  }
  .hover\:fill-gray-800 {
    &:hover {
      @media (hover: hover) {
        fill: var(--color-gray-800);
      }
    }
  }
  .hover\:fill-white {
    &:hover {
      @media (hover: hover) {
        fill: var(--color-white);
      }
    }
  }
  .hover\:text-gray-100 {
    &:hover {
      @media (hover: hover) {
        color: var(--color-gray-100);
      }
    }
  }
  .hover\:text-white {
    &:hover {
      @media (hover: hover) {
        color: var(--color-white);
      }
    }
  }
  .hover\:opacity-60 {
    &:hover {
      @media (hover: hover) {
        opacity: 60%;
      }
    }
  }
  .focus\:border-purple-500 {
    &:focus {
      border-color: var(--color-purple-500);
    }
  }
  .focus\:bg-white {
    &:focus {
      background-color: var(--color-white);
    }
  }
  .focus\:outline-none {
    &:focus {
      --tw-outline-style: none;
      outline-style: none;
    }
  }
  .sm\:hidden {
    @media (width >= 40rem) {
      display: none;
    }
  }
  .sm\:grid-cols-2 {
    @media (width >= 40rem) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  .sm\:px-8 {
    @media (width >= 40rem) {
      padding-inline: calc(var(--spacing) * 8);
    }
  }
  .md\:mt-0 {
    @media (width >= 48rem) {
      margin-top: calc(var(--spacing) * 0);
    }
  }
  .md\:mr-0 {
    @media (width >= 48rem) {
      margin-right: calc(var(--spacing) * 0);
    }
  }
  .md\:grid-cols-2 {
    @media (width >= 48rem) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  .md\:grid-cols-3 {
    @media (width >= 48rem) {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
  .md\:grid-cols-6 {
    @media (width >= 48rem) {
      grid-template-columns: repeat(6, minmax(0, 1fr));
    }
  }
  .md\:flex-row {
    @media (width >= 48rem) {
      flex-direction: row;
    }
  }
  .md\:gap-8 {
    @media (width >= 48rem) {
      gap: calc(var(--spacing) * 8);
    }
  }
  .md\:px-8 {
    @media (width >= 48rem) {
      padding-inline: calc(var(--spacing) * 8);
    }
  }
  .lg\:col-span-4 {
    @media (width >= 64rem) {
      grid-column: span 4 / span 4;
    }
  }
  .lg\:col-span-5 {
    @media (width >= 64rem) {
      grid-column: span 5 / span 5;
    }
  }
  .lg\:mt-4 {
    @media (width >= 64rem) {
      margin-top: calc(var(--spacing) * 4);
    }
  }
  .lg\:hidden {
    @media (width >= 64rem) {
      display: none;
    }
  }
  .lg\:w-3\/6 {
    @media (width >= 64rem) {
      width: calc(3/6 * 100%);
    }
  }
  .lg\:w-full {
    @media (width >= 64rem) {
      width: 100%;
    }
  }
  .lg\:max-w-md {
    @media (width >= 64rem) {
      max-width: var(--container-md);
    }
  }
  .lg\:grid-cols-3 {
    @media (width >= 64rem) {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
  .lg\:grid-cols-4 {
    @media (width >= 64rem) {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }
  .lg\:grid-cols-10 {
    @media (width >= 64rem) {
      grid-template-columns: repeat(10, minmax(0, 1fr));
    }
  }
  .lg\:flex-row {
    @media (width >= 64rem) {
      flex-direction: row;
    }
  }
  .lg\:gap-4 {
    @media (width >= 64rem) {
      gap: calc(var(--spacing) * 4);
    }
  }
  .lg\:px-8 {
    @media (width >= 64rem) {
      padding-inline: calc(var(--spacing) * 8);
    }
  }
  .lg\:px-10 {
    @media (width >= 64rem) {
      padding-inline: calc(var(--spacing) * 10);
    }
  }
  .lg\:pl-0 {
    @media (width >= 64rem) {
      padding-left: calc(var(--spacing) * 0);
    }
  }
  .xl\:absolute {
    @media (width >= 80rem) {
      position: absolute;
    }
  }
  .xl\:static {
    @media (width >= 80rem) {
      position: static;
    }
  }
  .xl\:col-span-4 {
    @media (width >= 80rem) {
      grid-column: span 4 / span 4;
    }
  }
  .xl\:col-span-6 {
    @media (width >= 80rem) {
      grid-column: span 6 / span 6;
    }
  }
  .xl\:mt-0 {
    @media (width >= 80rem) {
      margin-top: calc(var(--spacing) * 0);
    }
  }
  .xl\:mr-0 {
    @media (width >= 80rem) {
      margin-right: calc(var(--spacing) * 0);
    }
  }
  .xl\:mb-0 {
    @media (width >= 80rem) {
      margin-bottom: calc(var(--spacing) * 0);
    }
  }
  .xl\:ml-1 {
    @media (width >= 80rem) {
      margin-left: calc(var(--spacing) * 1);
    }
  }
  .xl\:flex {
    @media (width >= 80rem) {
      display: flex;
    }
  }
  .xl\:hidden {
    @media (width >= 80rem) {
      display: none;
    }
  }
  .xl\:w-1\/4 {
    @media (width >= 80rem) {
      width: calc(1/4 * 100%);
    }
  }
  .xl\:w-3\/4 {
    @media (width >= 80rem) {
      width: calc(3/4 * 100%);
    }
  }
  .xl\:w-auto {
    @media (width >= 80rem) {
      width: auto;
    }
  }
  .xl\:grid-cols-3 {
    @media (width >= 80rem) {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
  .xl\:flex-row {
    @media (width >= 80rem) {
      flex-direction: row;
    }
  }
  .xl\:space-x-4 {
    @media (width >= 80rem) {
      :where(& > :not(:last-child)) {
        --tw-space-x-reverse: 0;
        margin-inline-start: calc(calc(var(--spacing) * 4) * var(--tw-space-x-reverse));
        margin-inline-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-x-reverse)));
      }
    }
  }
  .xl\:bg-inherit {
    @media (width >= 80rem) {
      background-color: inherit;
    }
  }
  .xl\:px-0 {
    @media (width >= 80rem) {
      padding-inline: calc(var(--spacing) * 0);
    }
  }
  .xl\:px-4 {
    @media (width >= 80rem) {
      padding-inline: calc(var(--spacing) * 4);
    }
  }
  .xl\:pt-0 {
    @media (width >= 80rem) {
      padding-top: calc(var(--spacing) * 0);
    }
  }
  .xl\:pr-8 {
    @media (width >= 80rem) {
      padding-right: calc(var(--spacing) * 8);
    }
  }
  .xl\:pl-0 {
    @media (width >= 80rem) {
      padding-left: calc(var(--spacing) * 0);
    }
  }
  .xl\:text-sm {
    @media (width >= 80rem) {
      font-size: var(--text-sm);
      line-height: var(--tw-leading, var(--text-sm--line-height));
    }
  }
  .xl\:font-medium {
    @media (width >= 80rem) {
      --tw-font-weight: var(--font-weight-medium);
      font-weight: var(--font-weight-medium);
    }
  }
  .xl\:text-gray-500 {
    @media (width >= 80rem) {
      color: var(--color-gray-500);
    }
  }
  .xl\:hover\:text-gray-100 {
    @media (width >= 80rem) {
      &:hover {
        @media (hover: hover) {
          color: var(--color-gray-100);
        }
      }
    }
  }
  .\32 xl\:grid-cols-4 {
    @media (width >= 96rem) {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }
  .dark\:divide-gray-600 {
    @media (prefers-color-scheme: dark) {
      :where(& > :not(:last-child)) {
        border-color: var(--color-gray-600);
      }
    }
  }
  .dark\:border-gray-700 {
    @media (prefers-color-scheme: dark) {
      border-color: var(--color-gray-700);
    }
  }
  .dark\:bg-gray-700 {
    @media (prefers-color-scheme: dark) {
      background-color: var(--color-gray-700);
    }
  }
}
@keyframes fadediv {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes showform {
  0% {
    height: 0;
    opacity: 0;
    max-height: 0;
  }
  50% {
    height: 999px;
    opacity: 0.2;
    max-height: 106px;
  }
  100% {
    height: 999px;
    opacity: 1;
    max-height: 106px;
  }
}
@keyframes hideform {
  0% {
    transform: scaleY(1);
  }
  100% {
    transform: scaleY(0);
    height: 0px;
    opacity: 0;
    max-height: 0px;
  }
}
@keyframes fadediv2 {
  from {
    opacity: 0;
  }
  to {
    opacity: 0.3;
  }
}
@keyframes slidediv {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0px);
  }
}
@keyframes slideright {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0%);
  }
}
@keyframes sliderightreverse {
  from {
    transform: translateX(0%);
  }
  to {
    transform: translateX(100%);
  }
}
@keyframes fadeoutdiv {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@keyframes slideoutdiv {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-100%);
  }
}
@keyframes menuup {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  40% {
    opacity: 0.8;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
.menu-item a, h2 a, .cat-item a {
  text-decoration: none;
}
.mobile-menu-button {
  position: relative;
  top: 4px;
}
.mob-nav-container {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1100;
  width: 100%;
  height: 100vh;
  background-color: #151515;
  transition: opacity 0ms ease .45s,background-color .4s ease 50ms,transform .35s cubic-bezier(.215,.61,.355,1) 0s;
  opacity: 0;
  overflow: hidden;
}
.mob-nav-container-show {
  animation-name: fadediv;
  animation-duration: .3s;
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  animation-iteration-count: 1;
  opacity: 1;
}
.mob-nav-container-hide {
  animation-name: fadeoutdiv;
  animation-duration: .3s;
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  animation-iteration-count: 1;
  opacity: 0;
}
.mob-nav-header {
  position: fixed;
  width: 100%;
  height: 5rem;
  z-index: 1100;
}
.mob-nav-header button {
  padding-top: 22px;
}
.mob-nav-inner {
  opacity: .92;
  backdrop-filter: blur(1px);
  padding-top: 6rem;
  height: 100%;
  width: 100%;
  overflow: auto;
  z-index: 1000;
  transform: translateX(-200%);
  transition: transform .35s cubic-bezier(.215,.61,.355,1) 0s;
}
.mob-nav-inner a {
  color: #ffffff99;
}
.mob-nav-inner-show {
  animation-name: slidediv;
  animation-duration: .4s;
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  animation-iteration-count: 1;
  transform: translateX(0);
}
.mob-nav-inner-hide {
  animation-name: slideoutdiv;
  animation-duration: .2s;
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  animation-iteration-count: 1;
  transform: translateX(-200%);
}
#hide-submenu {
  animation-name: fadediv;
  animation-duration: .3s;
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  animation-iteration-count: 1;
  opacity: 1;
}
#hide-submenu span {
  top: 3px;
}
.mobile-item {
  background-color: #ffffff05;
}
.bg-white {
  background-color: white;
}
.menu-item-mob:hover {
  background-color: #ffffff0d;
}
.mob-logo {
  padding: 28px 0px 0px 22px;
  animation-name: fadediv;
  animation-duration: .3s;
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  animation-iteration-count: 1;
  animation-fill-mode: none;
  opacity: 1;
}
.mob-logo img {
  max-height: 34px;
  margin-top: -0.2rem;
}
.nav-wrap {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0 2%;
  width: 100%;
  margin: auto;
  max-width: 1980px;
}
.nav-wrap > div {
  padding: 1px 0;
}
#standard-menu {
  padding-top: 16px;
}
@media only screen and (max-width: 1279px) {
  .nav-wrap {
    flex-direction: row;
    padding: 0 2.5%;
  }
}
.standard-menu-inner {
  color: #fdfff1;
  overflow: visible;
}
@media only screen and (max-width: 1023px) {
  #standard-menu {
    background-color: #000;
    position: absolute;
    height: 100vh;
    padding-top: 40px;
    top: 0;
    right: -200%;
    transition: right 0.5s;
  }
}
.svg-rotate {
  transition: all 0.3s;
  transform: rotate(180deg) !important;
}
.svg-dropdown {
  transition: all 0.3s;
  transform: rotate(0deg);
}
.search-form-container {
  min-width: 28rem;
  max-height: 0;
  opacity: 0;
  padding: 10px;
  position: absolute;
  right: 0;
  top: 60px;
  visibility: visible;
  z-index: 0;
}
#search-form label {
  margin-left: 0.2rem;
}
.search-fields {
  display: flex;
  flex-direction: column;
  padding-bottom: 0.65rem;
  padding-left: 0.125rem;
}
.search-fields input[type=radio] {
  position: relative;
}
.search-buttons {
  top: -.5rem;
  max-height: 48px;
  padding-left: 8px;
  padding-right: 8px;
  z-index: 100;
  padding-bottom: 8px;
  padding-top: 8px;
}
#search-button:hover svg, #search-button-close:hover svg {
  fill: #fff;
}
#search-button:hover, #search-button-close:hover {
  background-color: #00000090;
}
@media only screen and (min-width: 1024px) {
  input[type="search"] {
    min-width: 18rem;
  }
  .search-show {
    background: #e1e1e1b0;
    position: absolute;
    right: 0;
    z-index: 200;
    transition: all .3s ease;
  }
}
.search-show {
  animation-name: showform;
  animation-duration: .3s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: 1;
  opacity: 1;
  top: 80px;
  visibility: visible;
  height: 999px;
  max-height: 106px;
}
.search-hide {
  animation-name: hideform;
  animation-duration: .3s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: 1;
}
.search-input {
  background-color: white;
}
.search-button {
  fill: #666;
  padding: 4px 12px;
  border-radius: 4px;
}
.search-button:hover {
  background-color: #ffffff22;
}
.menu-item-hover:hover {
  background-color: #ffffff22;
}
.menu-item-hover-sm:hover {
  background-color: #00000080;
}
.scroll-down-btn {
  padding: 2px;
  position: absolute;
  right: calc(50% - 20px);
  opacity: 0;
  margin: 1rem auto 0 auto;
  transition: opacity 0.4s;
}
.scroll-down-btn-show {
  opacity: 1;
}
@keyframes toggleY {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(4px);
  }
  100% {
    transform: translateY(0px);
  }
}
.scroll-down-btn:hover svg {
  animation-duration: 0.5s;
  animation-name: toggleY;
}
.scroll-down-btn:hover {
  background-color: #9c9c9c42;
  opacity: 1;
}
.nav-fixed {
  background-color: #2b2b2bd9 !important;
  position: fixed;
  top: 0;
  transform: translateY(0%);
}
.nav-dark {
  background-color: #fff !important;
}
.custom-logo-link {
  position: relative;
}
.custom-logo {
  position: relative;
}
.custom-logo {
  padding: 22px 0;
  width: auto;
  max-height: 110px;
  transition: all .3s ease;
}
.nav-inner-scrolled .custom-logo {
  max-height: 82px;
  padding: 16px 0px;
}
@media only screen and (max-width: 767px) {
  .custom-logo {
    max-height: 96px;
  }
  .nav-inner-scrolled .custom-logo {
    max-height: 72px;
  }
}
@media only screen and (max-width: 1490px) {
  .custom-logo-link {
    left: 0;
  }
}
.menu-item {
  display: inline-block;
  position: relative;
}
.modal-cover {
  position: fixed;
  width: 100vw;
  height: 100vh;
  background-color: #000;
  opacity: 0;
  z-index: 99;
  left: 0;
  top: 0;
  transition: opacity 0.5s;
  visibility: hidden;
}
.modal-cover-show {
  display: block;
  visibility: visible;
  opacity: 0.4;
}
.nav-outer-container {
  background-color: white;
  margin: auto;
  overflow: visible;
  z-index: 1000;
}
@media only screen and (min-width: 1980px) {
  .nav-outer {
    margin: auto;
  }
}
.nav-outer {
  position: fixed;
  top: 0;
  width: 100%;
  margin: auto;
  z-index: 1001;
}
.nav-inner {
  top: 0;
  transition: all 0.5s ease;
}
.nav-inner-scrolled {
  background-color: #0c0c0cc7;
}
@media only screen and (max-width: 1980px) {
  .nav.outer {
    left: 0;
    right: 0;
  }
}
@media only screen and (max-width: 1023px) {
  .nav-inner {
    min-height: 78px;
  }
}
@media only screen and (min-width: 640px) {
  .navbar-dark {
    z-index: 100;
    background-color: #262626bd;
  }
  .less-padding {
    position: fixed;
  }
}
.nav-container {
  margin-bottom: 2rem;
  transition: opacity 0.8s ease;
  overflow: visible;
}
#nav-bar {
  transition: background-color 500ms linear;
}
.menu-show {
  right: 0 !important;
}
@media only screen and (min-width: 1280px) {
  .dropdown-menu .menu-item {
    min-height: 3rem;
    width: 33.33%;
  }
  .dropdown-item {
    min-height: 4.1rem;
  }
  .dropdown-item:hover {
    background-color: #666;
  }
  .dropdown-menu {
    backdrop-filter: blur(1px);
    border-radius: 6px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    opacity: 0;
    pointer-events: none;
    min-width: 680px;
    left: -370px;
    top: 58px;
    background-color: ghostwhite;
    opacity: 1;
    visibility: hidden;
    transform: translateZ(0);
  }
}
@media only screen and (min-width: 1280px) {
  .dropdown-menu {
    min-width: 780px;
  }
}
@media only screen and (min-width: 1024px) {
  .open {
    animation-name: fadediv;
    animation-duration: .3s;
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    animation-iteration-count: 1;
    opacity: 1;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-auto-rows: 1fr;
    grid-column-gap: 3px;
    grid-row-gap: 3px;
    min-width: 800px;
    right: 10%;
  }
  .close {
    animation-name: fadediv;
    animation-duration: .3s;
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    animation-iteration-count: 1;
    animation-direction: reverse;
  }
  .standard-menu-inner > ul > li {
    padding-bottom: 0.25rem;
  }
  .dropdown-item:hover, .nav-link:hover {
    background-color: #00000090;
  }
  .dropdown-menu-show {
    animation-name: menuup;
    animation-duration: .35s;
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    animation-iteration-count: 1;
    background-color: #ededed;
    pointer-events: all;
    opacity: 1;
    visibility: visible;
    z-index: 2000;
  }
}
.dropdown-mobile {
  background-color: #151515;
  border-style: solid;
  border-width: 0 0 0 1px;
  border-color: black;
  margin-left: 0 !important;
  position: fixed;
  top: 0;
  padding-top: 6rem;
  left: 0;
  height: 100%;
  width: 100%;
  transform: translateX(100%);
}
.dropdown-mobile-show {
  animation-name: slideright;
  animation-duration: .6s;
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  animation-iteration-count: 1;
  transform: translateX(0%);
  display: flex;
  flex-direction: column;
}
.dropdown-mobile-hide {
  animation-name: sliderightreverse;
  animation-duration: .6s;
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  animation-iteration-count: 1;
  transform: translateX(100%);
}
@keyframes slideLeft {
  from {
    transform: translateX(-30%);
    opacity: 0;
  }
  to {
    transform: translateX(100%);
    opacity: 1;
  }
}
@keyframes fadedown {
  from {
    opacity: 0;
    transform: translateY(-30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.slide-l-anim {
  animation-delay: 0.1s;
  animation-name: slideLeft;
  animation-timing-function: linear;
  animation-duration: 0.15s;
  animation-iteration-count: 1;
  animation-fill-mode: both;
  -moz-animation-delay: 0.1s;
  -moz-animation-name: slideLeft;
  -moz-animation-timing-function: linear;
  -moz-animation-duration: 0.15s;
  -moz-animation-iteration-count: 1;
  -moz-animation-fill-mode: both;
  -webkit-animation-delay: 0.1s;
  -webkit-animation-name: slideLeft;
  -webkit-animation-timing-function: linear;
  -webkit-animation-duration: 0.15s;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-fill-mode: both;
}
.callout-outer {
  height: 100%;
}
.callout-fs {
  color: #fff;
  font-family: 'Heebo';
  font-weight: 600;
  margin: auto;
  transition: all .6s;
  transition-timing-function: ease-in-out;
  padding: 1.5rem 1.5rem .5rem 1.5rem;
  line-height: 1;
}
.callout-text {
  display: flex;
  flex-direction: row;
}
.callout-text p {
  font-weight: 600;
  text-shadow: 2px 4px 10px #3b3434bd;
  opacity: 0.87;
  line-height: 1;
}
.callout-t-first {
  font-size: 38px;
}
.callout-t-second {
  font-size: 37.5px;
}
@media only screen and (max-width: 1024px) {
  .callout-t-first {
    font-size: 30px;
  }
  .callout-t-second {
    font-size: 29.5px;
  }
}
@media only screen and (max-width: 698px) {
  .callout-t-first {
    font-size: 22px;
  }
  .callout-t-second {
    font-size: 22px;
  }
}
.slide-l-text {
  opacity: 0;
  transform: translateX(-70%);
}
.text-visible {
  opacity: 1;
  transform: translateX(0%);
}
@keyframes fadeinbg {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.bg-img, .bg-img-norm, .normal-bg, .bg-custom {
  box-shadow: 0 4px 4px -3px #0000001a;
  height: 40vh;
  overflow: visible;
}
.bg-custom {
  animation-delay: 0.2s;
  animation-name: fadeinbg;
  animation-timing-function: linear;
  animation-duration: 0.45s;
  animation-iteration-count: 1;
  animation-fill-mode: both;
  background-color: #151515;
  content: "";
  display: block;
  height: 40vh;
}
.bg-custom::before {
  animation-delay: 0.5s;
  animation-name: fadeinbg;
  animation-timing-function: linear;
  animation-duration: 0.45s;
  animation-iteration-count: 1;
  animation-fill-mode: both;
  content: "";
  background-position: center;
  background-size: cover;
  display: block;
  height: 40vh;
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: hidden;
  opacity: 0;
  background-origin: content-box;
}
.bg-img-taxonomy::before, .bg-custom::before {
  content: "";
  display: block;
  height: 40vh;
}
@media screen and (max-height: 550px) {
  .bg-custom, .bg-custom::before {
    height: 100vh;
  }
}
.bg-img-insecta, .bg-img-species, .bg-img-nederland, .bg-img-arachnida, .bg-img-taxonomy {
  animation-delay: 0.2s;
  animation-name: fadeinbg;
  animation-timing-function: linear;
  animation-duration: 0.45s;
  animation-iteration-count: 1;
  animation-fill-mode: both;
  content: "";
  display: block;
  height: 36vh;
  height: calc(var(--vh, 1vh) * 40);
  max-height: 380px;
  min-height: 320px;
}
@media only screen and (max-width: 767px) {
  .bg-img-taxonomy::before {
    height: calc(var(--vh, 1vh)*45);
  }
}
.bg-img-home::before {
  animation-delay: 0.5s;
  animation-name: fadeinbg;
  animation-timing-function: linear;
  animation-duration: 0.45s;
  animation-iteration-count: 1;
  animation-fill-mode: both;
  content: "";
  background-color: #212937;
  background-attachment: fixed;
  background-position-y: center;
  background-position-x: center;
  background-size: cover;
  display: block;
  height: 66vh;
  height: calc(var(--vh, 1vh) * 66);
  min-height: calc(var(--vh, 1vh) * 66);
  max-height: 500px;
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: hidden;
  opacity: 0;
  background-origin: content-box;
}
.bg-img-insecta::before, .bg-cusom::before {
  animation-delay: 0.2s;
  animation-name: fadeinbg;
  animation-timing-function: linear;
  animation-duration: 0.45s;
  animation-iteration-count: 1;
  animation-fill-mode: both;
  content: "";
  background-color: #212937;
  background-position-y: center;
  background-position-x: center;
  background-size: cover;
  display: block;
  height: 40vh;
  height: calc(var(--vh, 1vh) * 48);
  max-height: 380px;
  min-height: 320px;
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: hidden;
  opacity: 0;
  background-origin: content-box;
}
.webp .bg-img-insecta::before {
  background-image: url('../inc/img/intro-insects.webp');
}
.nowebp .bg-img-isecta::before {
  background-image: url('../inc/img/intro-insects.jpg');
}
@media screen and (max-width: 1023px) {
  .bg-img-home::before {
    min-height: calc(var(--vh, 1vh) * 100);
    height: 100%;
  }
}
.larger-bg {
  background-color: #151515;
  height: 100vh;
  overflow: visible;
}
.larger-bg::before {
  content: "";
  display: block;
  height: 100vh;
  min-height: 526px;
}
.scroll-content {
  position: absolute;
  bottom: 0;
  margin: 0 auto 1rem auto;
  width: 100%;
}
div.scroll-content svg {
  border-style: solid;
  border-width: 1px;
  margin: auto;
  animation-delay: .6s;
  animation-name: fadeinbg;
  animation-timing-function: linear;
  animation-duration: .65s;
  animation-iteration-count: 1;
  animation-fill-mode: both;
  opacity: 0;
  border-radius: 18px;
  background-color: #00000010;
  border-color: #ffffff90;
}
div.scroll-content svg:hover {
  transition: all .3s;
  cursor: pointer;
  background-color: #00000040;
}
.header-text {
  background: linear-gradient(180deg,transparent 0,rgba(0,0,0,.03) 8%,rgba(0,0,0,.11) 21%,rgba(0,0,0,.61) 78%,rgba(0,0,0,.7) 95%,rgba(0,0,0,.7));
  position: absolute;
  bottom: 0;
  color: white;
  width: 100%;
  margin: 0 auto;
  left: 0;
  right: 0;
  opacity: 0.94;
  padding-bottom: 4%;
}
.header-text {
  animation-delay: .4s;
  animation-name: fadedown;
  animation-timing-function: ease-in-out;
  animation-duration: .25s;
  animation-iteration-count: 1;
  animation-fill-mode: both;
  display: block;
  margin: auto;
  padding: 20px 0px;
  transform: translateY(-30px);
  opacity: 0;
}
.header-text-inner {
  max-width: 1980px;
  margin: auto;
  padding: 0 3%;
}
.header-order {
  display: inline-block;
  font-size: 36px;
  font-weight: 600;
  margin-right: 1.25rem;
}
.header-desc {
  display: inline-block;
  font-size: 29px;
}
@media only screen and (max-width: 1023px) {
  .header-order {
    display: inline-block;
    font-size: 28px;
  }
  .header-desc {
    display: inline-block;
    font-size: 18px;
  }
}
.bg-img-species::before, .bg-img-taxonomy::before {
  background-attachment: scroll, scroll;
  background-size: auto, auto;
  background-position-x: center;
  background-position-y: center;
  background-attachment: scroll,scroll;
  background-size: auto,auto;
  background-size: cover;
}
.no-webp .bg-img-woods {
  background-image: url(../inc/img/bg-img-woods.jpg);
}
.webp .bg-img-woods {
  background-image: url(../inc/img/bg-img-woods.webp);
}
.no-webp .bg-img-home::before {
  background-image: url(../inc/img/bg-home-2.jpg);
}
.webp .bg-img-home::before {
  background-image: url(../inc/img/bg-home-2.webp);
}
.bg-img-arachnida {
  background-attachment: scroll, scroll;
  background-size: auto, auto;
  background-position-x: center;
  background-position-y: center;
  background-attachment: scroll,scroll;
  background-size: auto,auto;
  background-size: cover;
}
.no-webp .bg-img-arachnida {
  background-image: url('../inc/img/intro-arachnids.jpg');
}
.webp .bg-img-arachnida {
  background-image: url('../inc/img/intro-arachnids.webp');
}
.no-webp .bg-img-nederland, .webp .bg-img-nederland {
  background-image: url('../inc/img/blog.jpg');
  background-attachment: scroll, scroll;
  background-size: auto, auto;
  background-position-x: center;
  background-position-y: center;
  background-attachment: scroll,scroll;
  background-size: auto,auto;
  background-size: cover;
}
#wpadminbar {
  direction: ltr;
  color: #c3c4c7;
  font-size: 13px;
  font-weight: 400;
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
  line-height: 2.46153846;
  height: 32px;
  position: static;
  top: 0;
  left: 0;
  width: 100%;
  min-width: 600px;
  z-index: 99999;
  background: #1d2327;
  opacity: .6;
}
/*!
Theme Name: WordPress + Tailwind
*/
.site {
  background-color: #fff;
  margin: auto;
}
@media screen and (max-width: 1023px) {
  .site {
    padding: 0;
  }
}
.modal-open {
  overflow: hidden;
}
.modal-close-btn {
  color: #ffffffed;
  font-size: 24px;
  position: fixed;
  top: 24px;
  right: 40px;
}
.modal-close-btn:hover {
  cursor: pointer;
}
header {
  margin-top: 0 !important;
  padding-top: 2.5rem;
}
.line-height-1 {
  line-height: 1;
}
body {
  background-color: #f1f1f1;
  font-family: "Poppins", "Verdana", "sans-serif";
  color: #595959;
}
main p:not(:first-child) {
  margin-top: 1rem;
}
a {
  text-decoration: none !important;
}
h1, h2, h3 {
  font-family: "Poppins", "Verdana", "sans-serif";
  color: #555;
  scroll-margin-top: 100px;
}
h1 {
  font-size: 42px;
  font-weight: 700;
}
h1.entry-title {
  margin-bottom: 0;
}
@media screen and (max-width: 767px) {
  h1 {
    font-size: 32px;
  }
}
h2 {
  font-size: calc(23px + (23 - 19) * ((100vw - 768px) / (1600 - 768)));
  font-weight: 700;
}
h3 {
  font-size: calc(20px + (20 - 18) * ((100vw - 768px) / (1600 - 768)));
  font-weight: 600;
}
small {
  font-size: 0.9rem;
  margin-left: 0.4rem;
}
.normal-list {
  list-style: inherit;
}
ul.normal-list li {
  margin-top: 1rem;
  margin-left: 1rem;
  padding-left: 0.25rem;
}
#page-inner {
  position: relative;
}
.footer-container {
  background-color: #e7e7e7;
  margin-top: 2.5rem;
  min-height: 16vh;
  padding-bottom: 2rem;
}
.footer-content {
  padding: 26px 16px;
}
.page-content, .footer-content, .content-area {
  margin: auto;
  padding: 0 3%;
  max-width: 1980px;
}
.scroll-btn-container {
  max-width: calc(1472px + 9rem);
}
@media only screen and (min-width: 1560px) {
  .scroll-btn-container {
    padding-left: 4.5rem;
    padding-right: 4.5rem;
  }
}
.breadcrumbs {
  position: absolute;
  bottom: 0;
  z-index: 1000;
  color: #fff;
  background-color: #00000061;
  width: 100%;
  left: 0;
  padding: 12px 0;
}
.breadcrumbs-scrolled {
  bottom: auto;
  top: 136px;
}
.breadcrumbs > span:first-child {
  display: block;
  max-width: 1980px;
  margin: auto;
  padding: 0 3%;
}
span.br-span::after {
  border-top: 1px solid;
  border-left: 1px solid;
  color: #fff;
  content: "";
  width: 6px;
  height: 6px;
  display: inline-block;
  -webkit-transform: rotate(135deg);
  -ms-transform: rotate(135deg);
  transform: rotate(135deg);
  left: auto;
  position: relative;
  margin: 0 10px 0 10px;
  top: -1px;
}
.breadcrumb_last {
  position: relative;
  top: 1px;
}
a {
  transition: background-color 0.55s;
}
p.decorated-link a, .decorated-link a {
  color: #555;
  font-weight: 600;
}
.header-meta a, .breadcrumbs a {
  color: #c3c3c3;
}
a.decorated-link, p.decorated-link a, .link-w-arrow a {
  font-weight: 500;
  text-decoration: none;
  display: inline-block;
  vertical-align: middle;
  transform: translateZ(0);
  box-shadow: 0 0 1px transparent;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  position: relative;
  top: -1px;
  overflow: hidden;
}
.decorated-link-light a {
  color: #fff;
  font-weight: 600;
}
a.decorated-link-light {
  color: #fff;
  font-weight: 500;
  text-decoration: none;
  display: inline-block;
  vertical-align: middle;
  transform: translateZ(0);
  box-shadow: 0 0 1px transparent;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  position: relative;
  top: -1px;
  overflow: hidden;
}
p a {
  font-weight: 500;
  position: relative;
}
p a:before, .header-meta a:before, .breadcrumbs a:before, a.decorated-link:before, .link-w-arrow a:before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  right: 50%;
  bottom: 0;
  background: #555;
  height: 2px;
  transition-property: all;
  transition-duration: .2s;
  transition-timing-function: ease-in-out;
  opacity: 0;
}
.link-w-arrow a:before {
  margin-right: 36px;
}
p.decorated-link-light a:before, a.decorated-link-light:before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  right: 50%;
  bottom: 0;
  background: #fff;
  height: 1px;
  transition-property: all;
  transition-duration: .2s;
  transition-timing-function: ease-in-out;
  opacity: 0;
}
p a:hover::before, .header-meta a:hover::before, .breadcrumbs a:hover::before, p.decorated-link > a:hover::before, a.decorated-link:hover::before, .link-w-arrow a:hover::before {
  left: 0;
  right: 0;
  opacity: 1;
}
p.decorated-link-light a:hover::before, a.decorated-link-light:hover::before {
  left: 0;
  right: 0;
  opacity: 1;
}
a {
  scroll-margin-top: 100px;
}
a:hover {
  text-decoration: none !important;
}
a.decorated-link {
  line-height: 2;
}
h2 a.decorated-link {
  line-height: 1.5;
  font-weight: 700;
}
h3 a.decorated-link {
  line-height: 1.5;
  font-weight: 700;
}
.breadcrumbs a {
  line-height: 2;
}
.link-w-arrow a:after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' viewBox='0 96 960 960' width='24' fill='%23666'%3E%3Cpath d='m690 746.191-39.537-39.73L752.54 604.384H136.462v-55.96H752.54L650.578 446.346l39.538-39.73 169.575 169.692L690 746.191Z'/%3E%3C/svg%3E");
  content: "";
  position: relative;
  top: 2px;
  display: inline-block;
  width: 26px;
  height: 18px;
  margin-left: 0.5rem;
}
.search-input {
  color: #5e5e5e;
}
.search-buttons {
  border-radius: .375rem;
}
button:hover {
  cursor: pointer;
}
.columns-gap-2 {
  gap: 2rem;
}
@media screen and (max-width: 768px) {
  .columns-gap-2 {
    gap: 0rem;
  }
}
picture.size-full img {
  width: 100%;
  height: auto;
}
.wp-block-search__input {
  border-color: #ccc;
}
.wp-block-latest-posts__featured-image img {
  border-radius: 4px;
  max-width: 100px;
}
.wp-block-categories__post-count {
  color: rgb(145, 145, 145);
  padding-left: 5px;
  display: block;
  margin-left: auto;
}
ul.wp-block-categories-list li {
  display: flex;
  margin: 1rem 0;
}
@media only screen and (max-width: 600px) {
  .wp-block-media-text .wp-block-media-text__content {
    padding: 0;
    margin-top: 1rem;
  }
}
figure.img-full-width img {
  width: 100%;
  height: auto;
}
.is-layout-flex {
  margin: 0;
}
.is-layout-flex > div {
  margin: 0;
}
.excerpt_part {
  display: block;
  margin-bottom: 0.75rem;
}
.blog-excerpt {
  background-color: #00000040;
  background-repeat: no-repeat;
  background-size: auto 400px;
  background-position: center;
  height: 400px;
  transition: all .4s;
}
.blog-excerpt-show {
  background-color: orange;
  background-blend-mode: darken, multiply;
}
.blog-excerpt-title {
  transition: height 0.25s;
  transition-delay: .1s;
  background-color: #00000040;
  height: 100%;
}
@media only screen and (min-width: 1023px) {
  .blog-excerpt-title {
    height: 145px;
  }
}
.blog-excerpt-title-show {
  height: 100%;
}
.blog-excerpt h2 {
  color: #fff;
  margin: 0;
  padding: .25rem 1rem;
}
.post-featured-img {
  height: 400px;
}
.posted-on-svg {
  display: inline-block;
  fill: #000;
  opacity: 0.7;
  position: relative;
  top: 4px;
  padding-right: 7px;
}
.posted-by-svg {
  display: inline-block;
  margin-left: 0.8rem;
  opacity: 0.7;
  position: relative;
  top: 2px;
}
.category-svg {
  display: inline-block;
  fill: #000;
  opacity: 0.7;
  position: relative;
  top: 4px;
  margin-left: 1.5rem;
}
.posted-on {
  display: inline-block;
  font-size: 0.9rem;
}
.toc {
  position: sticky;
  top: 120px;
}
.tut-toc li {
  margin-top: 1rem;
  padding: 0;
}
.tut-toc li {
  border-left: 2px solid rgb(222,222,222);
}
.tut-toc li a {
  margin-left: 0.8rem;
}
.toc-side-menu-modal {
  background-color: #303030;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  outline: 0;
  z-index: 200;
}
.icon-toc {
  position: fixed;
  opacity: 0.5;
  top: 50%;
  right: 10px;
  font-size: 12px;
  border: none;
  outline: 0;
  background-color: #31a5f9;
  color: #fff;
  cursor: pointer;
  padding: 3px;
  border-radius: 4px;
  animation: fadeIn linear .7s;
  -webkit-animation: fadeIn linear .7s;
  -moz-animation: fadeIn linear .7s;
  -o-animation: fadeIn linear .7s;
  -ms-animation: fadeIn linear .7s;
}
.icon-toc:hover {
  opacity: 1;
}
.toc-side-menu ul li {
  border-left: 2px solid #555656;
  color: rgb(194, 194, 194);
}
.toc-side-menu h3 {
  color: rgb(194, 194, 194);
  margin-top: 1rem;
}
.toc-side-menu hr {
  border-top-width: 0px;
}
p.comment-form-cookies-consent {
  display: flex;
}
input#wp-comment-cookies-consent {
  width: 1rem;
  margin-right: 1rem;
}
.comment .comment {
  padding-left: 5%;
}
.comment-form-form textarea {
  border-color: rgb(229, 231, 235);
  border-style: solid;
  border-width: 1px;
  width: 100%;
}
.comment-form-form input {
  display: block;
  border-style: solid;
  border-width: 1px;
  width: 100%;
  padding: 5px;
}
span.comment-reply svg {
  display: inline-block;
}
.percentages-header {
  margin-left: 44px;
  margin-top: 1rem;
  position: relative;
  min-height: 26px;
  font-size: 0.85rem;
  font-weight: 600;
}
.percentage-nums-25 {
  position: absolute;
  margin-left: calc(25% - 14px);
}
.percentage-nums-50 {
  position: absolute;
  margin-left: calc(50% - 14px);
}
.percentage-nums-75 {
  position: absolute;
  margin-left: calc(75% - 14px);
}
.percentage-nums-100 {
  position: absolute;
  margin-left: calc(100% - 30px);
}
@media only screen and (max-width: 767px) {
  .percentage-nums-25, .percentage-nums-75 {
    display: none;
  }
}
.graph-output {
  border-style: solid;
  border-width: 1px;
  padding: 8px;
}
.graph-output dt {
  margin: 3px 0;
}
.month-text {
  display: inline-block;
  width: 36px;
  font-size: 0.85rem;
  font-weight: 600;
}
.graph-output-single {
  background-color: #3d9970;
  content: "";
  display: inline-block;
  height: 15px;
  max-width: calc(100% - 36px);
  padding: 3px 0;
  position: relative;
  top: 1px;
}
.img-center img {
  object-fit: cover;
  object-position: center;
}
.material-symbols-outlined {
  font-weight: 300;
}
.flexgap .intro-block-insects, .flexgap .intro-block-arachnids, .intro-block-general {
  column-gap: .5rem;
  row-gap: .5rem;
}
.noflexgap .intro-block-insects > div:nth-child(2), .noflexgap .intro-block-arachnids > div:nth-child(2), .noflexgap .intro-block-general > div:nth-child(2) {
  padding-left: .5rem;
}
@media only screen and (max-width: 781px) {
  .noflexgap .wp-block-column > .wp-block-column {
    padding-left: 0;
  }
}
.intro-block-insects, .intro-block-arachnids {
  animation-name: fade;
  animation-timing-function: linear;
  animation-duration: 0.25s;
  animation-iteration-count: 1;
  animation-fill-mode: both;
  opacity: 0;
  color: white;
}
.intro-block-general {
  animation-name: fade;
  animation-timing-function: linear;
  animation-duration: 0.25s;
  animation-iteration-count: 1;
  animation-fill-mode: both;
  opacity: 0;
  color: rgb(89,89,89);
  column-gap: .5rem;
}
@media only screen and (max-width: 1023px) {
  .intro-block-insects > div:nth-child(1), .intro-block-insects > div:nth-child(2), .intro-block-general > div:nth-child(1), .intro-block-general > div:nth-child(2) {
    flex-basis: 50% !important;
  }
  .intro-block-arachnids > div:nth-child(1), .intro-block-arachnids > div:nth-child(2) {
    flex-basis: 50% !important;
  }
}
.intro-block-insects .link-w-arrow, .intro-block-arachnids .link-w-arrow, .intro-block-general .link-w-arrow {
  text-align: right;
}
.intro-block-insects .link-w-arrow a:after, .intro-block-arachnids .link-w-arrow a:after, .intro-block-general .link-w-arrow a:after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' viewBox='0 96 960 960' width='24' fill='%23fff'%3E%3Cpath d='m690 746.191-39.537-39.73L752.54 604.384H136.462v-55.96H752.54L650.578 446.346l39.538-39.73 169.575 169.692L690 746.191Z'/%3E%3C/svg%3E");
}
.intro-block-insects .link-w-arrow, .intro-block-arachnids .link-w-arrow, .intro-block-general .link-w-arrow {
  margin-top: 2.5rem;
}
.intro-block-insects .link-w-arrow a:before, .intro-block-arachnids .link-w-arrow a:before {
  background: white;
  font-weight: 600;
}
.intro-block-gneral {
  background: white;
  font-weight: 600;
}
.intro-block-insects .link-w-arrow svg {
  fill: white;
}
.intro-block-insects a, .intro-block-arachnids a {
  color: white;
  font-weight: 600;
}
.intro-block-insects h2, .intro-block-arachnids h2 {
  color: white;
}
.intro-block-insects > div:nth-child(2) {
  background-color: #2f8c5c;
  padding: 32px;
}
.intro-block-general > div:nth-child(2) {
  background-color: white;
  padding: 0 0 0 32px;
}
@media only screen and (max-width: 781px) {
  .intro-block-general > div:nth-child(2) {
    padding: 0;
  }
}
.intro-block-arachnids > div:nth-child(2) {
  background-color: #ce4141;
  padding: 32px;
}
.intro-block-insects img {
  height: 100% !important;
  min-height: 460px;
  width: 100%;
  object-fit: cover;
  object-position: center;
}
.intro-block-arachnids img {
  height: 100% !important;
  min-height: 460px;
  width: 100%;
  object-fit: cover;
  object-position: center center;
}
.insect-order-desc p:not(:first-child) {
  margin-top: 1rem;
}
:where(.wp-block-columns.is-layout-flex) {
  gap: .5rem;
}
.blog-content {
  max-width: 1280px;
  width: 100%;
}
.woocommerce-products-header {
  margin-top: 1.75rem;
}
.woocommerce-breadcrumb a:after {
  border-top: 1px solid;
  border-left: 1px solid;
  color: #555656;
  content: "";
  width: 6px;
  height: 6px;
  display: inline-block;
  -webkit-transform: rotate(135deg);
  -ms-transform: rotate(135deg);
  transform: rotate(135deg);
  left: auto;
  position: relative;
  margin: 0 10px 0 10px;
  top: -1px;
}
.woocommerce-breadcrumb a:before {
  margin-right: 26px;
}
.product {
  margin-top: 2.5rem;
}
.home-splurge {
  margin: auto;
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
}
.splurge-inner {
  transition: opacity 03s ease;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.home-slide-contain {
  width: 100%;
  padding: 0;
  height: 100%;
  position: relative;
  margin: auto;
  overflow: hidden;
}
.splurge-inner {
  width: 100%;
  transition: all .45s ease;
}
.slide-arrows {
  max-width: 2010px;
  margin: auto;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 64px;
  width: 100%;
}
div.splurge-img-text img {
  transition: opacity .4s ease;
}
.slide-dots {
  position: absolute;
  bottom: 16px;
  left: calc(50vw - 114px);
  margin: auto;
  z-index: 999;
}
.dot {
  background-color: #fff;
  cursor: pointer;
  height: 10px;
  width: 10px;
  margin: 0 12px;
  border-radius: 50%;
  display: inline-block;
  opacity: 0.4;
  transition: background-color .6s ease;
}
.dot-active {
  background-color: #fff;
  opacity: 1;
}
.slide-img-contain {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: opacity 1s ease;
}
.slide-img-contain img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.splurge-img-text {
  margin: auto;
  display: grid;
  grid-template-columns: repeat(5,49.5%);
  column-gap: 1%;
  grid-template-rows: repeat(1, 66%);
  height: 100%;
  margin: 0;
}
.left-slide {
  padding: 16px 2px 16px 2px;
  display: block;
}
.right-slide {
  padding: 16px 2px 16px 2px;
  display: block;
}
.left-slide, .right-slide {
  border-radius: 8px;
  background-color: #000000a8;
}
.slide-excerpt-txt {
  background-color: #030a0aba;
  color: white;
  min-height: 20px;
  display: block;
  position: relative;
  bottom: 40px;
  opacity: 0;
  text-align: center;
  transition: all 0.3s ease;
  padding: 8px;
  font-style: italic;
}
@media screen and (min-width: 2000px) {
  .left-slide {
    right: 2000px;
  }
}
.left-slide:hover, .right-slide:hover {
  cursor: pointer;
  fill: #fff;
}
.img-hidden {
  opacity: 0;
  pointer-events: none;
}
.arrow-inactive {
  opacity: 0.2;
  pointer-events: none;
}
.arrow-inactive:hover {
  cursor: default;
}
.buttons-outer {
  position: absolute;
  width: 100%;
  bottom: 64px;
  z-index: 999;
}
.to-content {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 36px;
}
.to-content svg {
  display: block;
  height: 36px;
  width: 36px;
}
.to-content svg {
  padding: 8px;
  height: 36px;
  width: 36px;
}
.to-content svg:hover {
  cursor: pointer;
}
@keyframes fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes expandheight {
  from {
    transform: scaleY(0);
    opacity: 1;
    height: 0;
    max-height: 0;
  }
  to {
    opacity: 1;
    transform: scaleY(1);
    height: fit-content;
    max-height: fit-content;
  }
}
@keyframes shrinkheight {
  0% {
    transform: scaleY(1);
    opacity: 1;
    height: fit-content;
    max-height: fit-content;
  }
  100% {
    transform: scaleY(0);
    opacity: 0;
    height: 0;
    max-height: 0;
  }
}
@keyframes heightGrow {
  from {
    transform: scaleY(0%);
  }
  to {
    transform: scaleY(100%);
  }
}
@keyframes jiggle {
  0% {
    top: 0;
  }
  50% {
    top: 6px;
  }
  100% {
    top: 0;
  }
}
@keyframes spinner {
  to {
    transform: rotate(360deg);
  }
}
@keyframes slide-out-left {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-150%);
  }
}
@keyframes slide-out-right {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(150%);
  }
}
@keyframes slide-in-right {
  0% {
    transform: translateX(150%);
  }
  100% {
    transform: translateX(0%);
  }
}
@keyframes slide-in-left {
  0% {
    transform: translateX(-150%);
  }
  100% {
    transform: translateX(0%);
  }
}
@keyframes height-width {
  from {
    transform: scale(0);
  }
  to {
    transform: scale(1);
  }
}
.tax-buttons {
  float: right;
  position: sticky;
  left: 100%;
  display: flex;
  flex-direction: column;
  max-width: 40px;
  z-index: 999;
  opacity: 1;
  margin-top: 7.5rem;
  margin-right: 16px;
  top: 100px;
}
.tax-thumb-container {
  height: 100%;
}
.tax-thumb-container .tax-thumb-text {
  opacity: 0;
  visibility: hidden;
}
.tax-thumb-container:hover .tax-thumb-text {
  background-color: #00000030;
  display: block;
  opacity: 1;
  transition: opacity .3s ease;
  visibility: visible;
  z-index: 200;
}
.main-w-sidebar {
  padding-right: 16px;
}
.main-single {
  padding-right: 46px;
}
@media screen and (max-width: 639px) {
  .main-w-sidebar, .main-single {
    padding-right: 0px;
  }
  .tax-buttons {
    display: none;
  }
  .single-main {
    margin-right: 0 !important;
  }
  .family-dropdown-outer {
    display: none;
  }
}
.details-section-title {
  font-size: 1.25rem;
  font-weight: 700;
}
span.bolder {
  font-weight: 600;
}
.sm-slide-inner-container img {
  width: 500px;
  height: 300px;
  object-fit: cover;
  object-position: center;
  overflow: hidden;
}
.single-main {
  grid-template-columns: 1000px auto;
  margin-right: 52px;
  max-width: fit-content;
}
.species-grid-outer-show {
  grid-template-columns: calc(1000px - 170px) auto;
  width: calc(100% - 330px) !important;
}
.single-main-narrow {
  grid-template-columns: 700px auto;
}
@media screen and (max-width: 1597px) {
  .single-main {
    grid-template-columns: 66% 30% auto;
  }
  .single-main-narrow {
    grid-template-columns: 40% 60% auto;
  }
}
@media screen and (max-width: 1279px) {
  .single-main {
    grid-template-columns: 60% 36% auto;
  }
  .single-main-narrow {
    grid-template-columns: 40% 60% auto;
  }
}
@media screen and (max-width: 1023px) {
  .single-main {
    grid-template-columns: 100%;
  }
}
.single-image {
  padding: 0 0 2px 0;
  margin: auto;
}
.single-image img {
  max-height: 1000px;
  width: auto;
}
.single-details {
  flex-grow: 1;
}
@media screen and (max-width: 1559px) {
  .single-image {
    flex-basis: 66.66%;
    flex-shrink: 0;
    flex-grow: 0;
  }
  .single-details {
    flex-shrink: 1;
    flex-grow: 1;
  }
}
@media screen and (max-width: 1399px) {
  .single-image {
    flex-basis: 60%;
    flex-shrink: 1;
    flex-grow: 1;
  }
  .single-details {
    flex-basis: 40%;
    flex-shrink: 1;
    flex-grow: 1;
  }
}
@media screen and (max-width: 1023px) {
  .single-main {
    flex-direction: column;
  }
  .single-image {
    flex-basis: 100%;
  }
  .single-details {
    flex-basis: 100%;
  }
}
.magnify {
  position: relative;
  top: 5px;
  font-size: 0.95rem;
}
.img-magnified {
  transform-origin: left top;
}
.additional-img-item .single-thumb {
  max-height: 160px;
  overflow: hidden;
}
.additional-img-item .single-thumb img {
  object-fit: cover;
  object-position: 50% 50%;
}
.single-thumb:hover img, .single-image:hover img {
  cursor: pointer;
  transition: all .3s ease;
  opacity: 1;
}
.single-header {
  height: 100%;
}
.arth-details-1 {
  background-color: #fff;
}
.arth-intro-title {
  display: inline-block;
  font-size: 18px;
  font-weight: 500;
  padding: 4px 8px;
  position: absolute;
  top: 0;
  min-width: 120px;
  transition: all 0.3s ease;
}
.arth-intro-title-first {
  left: 0;
}
.arth-intro-title-second {
  left: 126px;
}
.arth-intro-title-third {
  left: 252px;
}
@media screen and (max-width: 600px) {
  .arth-intro-title {
    min-width: auto;
  }
}
.arth-intro-title:hover {
  background-color: #ededed;
  cursor: pointer;
  color: #000;
}
.arth-intro-title {
  background-color: #fff;
}
.species-current {
  background-color: #ededed;
  color: #000;
}
.species-current:hover {
  cursor: inherit;
}
.details-content {
  overflow: auto;
  height: 0;
  position: relative;
  top: 35px;
  opacity: 0;
  visibility: hidden;
}
.details-content-current {
  background-color: #efefef;
  padding: 25px 8px 10px 8px;
  height: calc(100% - 35px);
  opacity: 1;
  visibility: visible;
}
.desc-header {
  display: block;
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 0.5rem;
}
.desc-contain {
  border-style: solid;
  border-width: 0 0 1px 0;
  border-color: #d1d1d1;
  padding: 12px 0;
}
.desc-contain-first {
  padding-top: 0px;
}
.desc-contain-last {
  border-bottom-width: 0px;
}
.single-details {
  min-height: 470px;
  overflow: hidden;
}
.details-header {
  margin-top: 1rem;
}
.details-additional {
  margin-top: 0.5rem;
  color: #666;
}
.details-additional svg {
  display: inline;
  position: relative;
  top: -1px;
}
.details-additional span {
  margin-right: 0.5rem;
}
.details-additional span {
  font-size: 0.85rem;
}
.single-content h3 {
  font-weight: 600;
}
.terraine {
  position: relative;
  top: -1px;
}
.single-loc {
  height: calc(100% - 75px);
  flex: 2;
}
.map-container {
  flex: 2;
  max-height: calc(100% - 36px);
}
.map-outer {
  height: 100%;
  max-height: calc(100% - 36px);
}
.species-header {
  line-height: 1.2;
}
.lookup-header {
  margin-top: -0.5rem;
}
.species-title {
  color: #fff;
  font-weight: 600;
  line-height: 1.75;
}
.species-list .species-title, .species-list .species-element {
  color: black;
}
.species-element {
  color: #fff;
  font-weight: 500;
}
.attachment-caption {
  margin: auto;
  text-align: center;
  display: inline-block;
  width: 100%;
  padding: .5rem 0;
  font-style: italic;
}
.psecies-popup {
  min-width: 320px;
}
@media screen and (max-width: 639px) {
  .species-img {
    margin-right: 0;
    width: 100%;
  }
}
.abc-title {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  font-size: calc(20px + (20 - 18) * ((100vw - 768px) / (1600 - 768)));
  font-weight: 600;
  padding: 0.25rem 1rem;
  margin-bottom: 1.5rem;
  background-color: #00000005;
  border: solid 1px;
  border-color: #00000015;
  line-height: 1.8;
  transition: background-color .35s ease;
}
.abc-title button {
  margin-left: auto;
}
.abc-title:hover {
  cursor: pointer;
  background-color: #ececec;
}
.species-button svg {
  position: relative;
  top: 0;
}
button.species-button:hover > svg {
  animation-name: jiggle;
  animation-timing-function: ease-in-out;
  animation-duration: 0.45s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}
.button-disabled svg {
  animation: none;
  fill: #999;
}
.header-empty:hover {
  cursor: not-allowed;
}
.spinner {
  position: fixed;
  top: 44%;
  left: 50%;
  z-index: 200;
}
.spinner:before {
  content: '';
  box-sizing: border-box;
  position: absolute;
  top: calc(50% - 30px);
  left: calc(50% - 15px);
  width: 30px;
  height: 30px;
  margin-top: -10px;
  margin-left: -10px;
  border-radius: 50%;
  border: 2px solid #ccc;
  border-top-color: #000;
  animation: spinner .6s linear infinite;
}
.fade {
  animation-name: fade;
  animation-duration: 1.6s;
}
.height-anim {
  animation-name: expandheight;
  animation-timing-function: ease-in-out;
  animation-duration: 0.55s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  transform-origin: top left;
}
.height-anim-2 {
  animation-delay: 0.1s;
  animation-name: heightGrow;
  animation-timing-function: linear;
  animation-duration: 0.15s;
  animation-iteration-count: 1;
  animation-fill-mode: both;
}
ul.species-list {
  list-style-type: none;
  margin-left: 0;
}
h3.insecta-aside {
  color: #fff;
  font-size: 1.125rem;
  font-weight: 500;
}
.dropdown-title-insecta {
  background-color: #125533;
  color: #fff;
  font-weight: 600;
  font-size: 18px;
  padding: 1rem;
  margin-bottom: 4px;
}
.dropdown-title-arachnida {
  background-color: #b33939;
  color: #fff;
  font-weight: 600;
  font-size: 18px;
  padding: 0.5rem 1rem;
  margin-bottom: 4px;
}
.dropdown-title-angiospermae {
  background-color: blueviolet;
  color: #fff;
  font-weight: 600;
  font-size: 18px;
  padding: 0.5rem 1rem;
  margin-bottom: 4px;
}
.order-text p {
  color: #fff;
  margin-top: 0.125rem !important;
}
.thumb-double-height {
  grid-row: span 2;
}
.toggle-order-tooltip {
  background-color: #f2f2f2;
  border-style: solid;
  border-width: 1px;
  border-color: rgb(202, 202, 202);
  border-radius: 4px;
  font-size: 0.875rem;
  margin-left: auto;
  margin-top: 2.5rem;
  display: block;
  padding: 10px 8px 6px 8px;
  text-align: right;
}
.toggle-order-tooltip:hover {
  background-color: #e6e6e6;
}
.insecta-intro {
  transition: all .4s ease-in-out;
}
.content-reduce-margin {
  margin-right: calc(280px + 1.5rem);
}
.order-list {
  background-color: #fff;
  height: 100%;
  padding-top: 1px;
  width: 0;
  overflow: hidden;
  max-width: 280px;
  position: absolute;
  right: 5%;
  top: 122px;
  transition: all 0.4s ease-in-out;
  z-index: 99;
}
.order-intro {
  transition: all 0.4s ease-in-out;
}
.order-list-show {
  height: 100%;
  margin-left: 1rem;
  width: 100%;
  overflow: visible;
}
.intro-content {
  width: 100%;
}
@media screen and (max-width: 1027px) {
  .intro-content-show .is-layout-flex {
    flex-direction: column;
  }
}
.w-background-img {
  background-repeat: no-repeat;
  background-position: 95% 22px;
  background-size: auto 80px;
}
.order-container {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  min-height: 105px;
}
.order-container:not(:first-child) {
  margin-top: .125rem;
}
.order-container-main {
  transition: background-color .55s;
}
.order-container h4 {
  color: #555;
  font-size: 1.125rem;
  font-weight: 500;
}
.order-img {
  position: absolute;
  right: 10px;
  top: 15px;
  max-width: 60px;
  height: auto;
  opacity: 0.45;
}
.order-img img {
  height: auto;
  max-height: 80px;
  width: auto;
}
.order-text {
  grid-column: span 7 / span 7;
}
.container-animalia, .container-insecta, .container-arachnida {
  background-color: #179662;
}
.container-animalia:hover, .container-insecta:hover, .container-arachnida:hover {
  background-color: #179662;
}
.dropdown-family-insecta-orders a:hover {
  background-color: #1d512b;
}
.container-angiospermae {
  background-color: blueviolet;
}
.container-angiospermae:hover {
  background-color: rgb(113, 35, 186);
}
.species-lookup {
  transition: all .65s;
  margin-bottom: 0.125rem;
}
.animation-none {
  animation: none !important;
}
.show-family-insecta {
  background-color: #157b46;
}
.show-family-insecta:hover {
  background-color: rgb(23, 70, 35);
}
.show-family-arachnida {
  background-color: #be4343;
}
.show-family-angiospermae {
  background-color: #7123ba;
}
.family-list {
  opacity: 0;
  height: 0;
  overflow: hidden;
  margin: 0;
  max-height: 0;
  transition: max-height .35s ease-out;
}
.content-invisible {
  display: none;
}
.dropdown-family-insecta-orders a {
  background-color: #157b46;
  transition: background-color 0.5s;
}
.dropdown-family-arachnida-orders a {
  background-color: #be4343;
  transition: background-color 0.5s;
}
.dropdown-family-angiospermae-orders a {
  background-color: #7123ba;
  transition: background-color 0.5s;
}
.family-show {
  height: auto;
  max-height: fit-content;
  opacity: 1;
}
.family-svg {
  transition: all 0.3s;
  transform: rotate(0deg);
  transform-origin: center;
}
.svg-open {
  transition: all 0.3s;
  transform: rotate(180deg) !important;
  transform-origin: center;
}
.camera-settings {
  border-style: solid;
  border-width: 1px;
  border-radius: 4px;
  border-color: #bcfcfc;
  padding: 6px 8px;
  margin-top: 1rem;
}
.camera-details svg {
  position: relative;
  top: -1px;
  left: -3px;
}
#camera-expand {
  align-items: center;
}
#camera-expand svg {
  position: relative;
}
#camera-expand span {
  flex-grow: 3;
}
.iso-text {
  color: #999;
}
.max-w-insect-icon {
  max-width: 48px;
}
.next-fam {
  position: relative;
  top: 1px;
  text-decoration: none;
}
.next-fam div, .prev-fam div {
  position: absolute;
  right: 0;
  padding: 8px;
  background-color: #2da071;
  top: 0px;
  opacity: 0;
  max-height: 40px;
  max-width: 0;
  height: 40px;
  width: 0;
  border-style: solid;
  border-radius: 1px;
  border-color: #999;
  display: block;
  color: #fff;
  transition: all .4s ease-in-out;
  margin-right: -3px;
  overflow: hidden;
}
.next-fam-disabled {
  background-color: #d6f2e9;
  width: 40px;
  height: 40px;
  justify-content: center;
  display: flex;
  align-items: center;
  opacity: .75;
  z-index: 500;
}
.prev-fam-disabled {
  background-color: #d6f2e9;
  width: 40px;
  height: 40px;
  justify-content: center;
  display: flex;
  align-items: center;
  opacity: .75;
  z-index: 500;
}
.next-fam:hover svg, .prev-fam:hover svg {
  fill: #c7e1fe;
}
.toggle-tooltip {
  transition: all .3s ease;
}
.toggle-tooltip:hover, .order-container:hover {
  background-color: #007445;
}
.toggle-tooltip:hover div.next-fam-title, .toggle-tooltip:hover div.prev-fam-title {
  background-color: #007445;
  position: absolute;
  right: 28px;
  padding: 8px;
  top: 0px;
  opacity: 1;
  max-height: 40px;
  max-width: 300px;
  height: 40px;
  width: max-content;
  display: block;
  color: #fff;
}
.prev-fam {
  display: inline;
  position: relative;
  top: 1px;
  text-decoration: none;
}
.prev-fam svg {
  top: -1px;
  left: 2px;
}
.prev-fam svg, .next-fam svg {
  display: inline;
  position: relative;
}
.prev-thumb, .next-thumb {
  color: #555;
  display: inline;
  font-size: 0.8rem;
}
.prev-thumb:hover, .next-thumb:hover {
  color: #000;
}
.next-thumb {
  padding-right: 0.3rem;
}
picture.img-max {
  max-width: 100% !important;
  transition: all .35s ease;
}
.additional-img-container {
  background-color: #00000080;
  display: flex;
  position: fixed;
  width: 100%;
  left: 0;
  bottom: 0;
  overflow-x: auto;
  overflow-y: hidden;
}
.additional-images {
  align-items: center;
  justify-content: center;
  height: 50px;
  display: grid;
  gap: 4px;
  margin: auto;
  transition: all .35s ease;
}
.additional-images img {
  max-height: 50px;
}
.additional-images:hover img {
  cursor: pointer;
  opacity: 1 !important;
}
.additional-images:hover {
  height: 80px;
  max-height: fit-content;
  max-width: fit-content;
}
.additional-images:hover img {
  max-height: 80px;
}
.modal-details-show {
  visibility: visible;
  opacity: 1;
  height: fit-content;
  max-width: 340px;
  width: fit-content;
  overflow: auto;
  transition: all 0.35s;
  padding-bottom: 1rem;
}
.modal-details {
  margin-top: 0 !important;
  padding: 16px;
}
span.next-fam > a > svg:hover, span.prev-fam > a > svg:hover, span#closeBtn > svg:hover, span#expand-icon svg:hover, span#reduce-icon svg:hover {
  fill: #000;
}
.slide-show {
  display: flex;
  flex-direction: row;
  align-self: flex-end;
  justify-self: end;
  position: relative;
  top: 4px;
  width: 110px;
  height: 40px;
  border-color: #e4e4e4;
  border-radius: 6px;
  border-width: 0px;
  transition: all .3s;
  padding: 0 2px 0 10px;
}
.slide-show:hover {
  background: rgb(243 244 246);
}
.slide-show svg {
  top: 12px;
  right: 5px;
}
.slide-show:hover svg {
  fill: #000;
}
.slide-show span {
  margin-right: 6px;
  position: relative;
  top: 13px;
}
.modal {
  display: none;
  position: fixed;
  z-index: 3000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100vh;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: rgb(31, 31, 31);
  padding-top: 1.5rem;
}
.single-modal {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  z-index: 3000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100vh;
  background-color: #000000de;
  transition: all .3s ease;
}
.single-modal img {
  margin: auto;
  padding: 2rem;
}
.img-clickable:hover {
  cursor: pointer;
}
.slider-show {
  display: block;
  opacity: 1;
}
.section-header {
  font-size: 1.2rem;
  font-weight: 700;
}
.tax-table {
  margin: 12px 26px 24px 0;
}
td.first-el {
  font-weight: 600;
  min-width: 106px;
}
.exp-text {
  padding-left: .5rem;
  padding-top: .35rem;
  padding-right: 0.25rem;
}
#expand-details svg {
  position: relative;
  top: -2px;
  margin-left: 1rem;
}
.exp-text-show {
  position: absolute;
  padding-left: 0.5rem;
}
.exp-text-show svg {
  margin-left: 0 !important;
}
.exp-svg {
  margin-top: 2px;
}
.slide-img-container {
  max-height: 90%;
  max-height: calc(var(--vh, 1vh) * 90);
}
@media all and ( max-width: 767px ) {
  .slide-img-container {
    flex-direction: column;
  }
  .slide-excerpt {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
  .svg-reduce {
    padding-top: 6px;
    padding-left: 10px;
  }
}
.slide-excerpt {
  margin-bottom: .25rem;
  margin-top: .5rem;
  max-width: 1280px;
  padding-left: 8px;
}
.slide-excerpt-show {
  margin-right: 4rem;
  margin-top: 4rem;
}
.offset-right {
  opacity: 0;
  transform: translateX(+150%);
}
.slide-center {
  opacity: 1;
  transform: translateX(0);
}
.modal-right {
  transform: translateX(150%);
}
.modal-center {
  transform: translateX(0);
}
.modal-invisible {
  opacity: 0;
}
.modal-content {
  position: relative;
  display: block;
  max-height: calc(100vh - 95px);
  width: auto;
  height: auto;
  user-select: none;
}
img.modal-content {
  transition: .2s width, .2s height;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}
.arrow-blurred {
  cursor: arrow;
  opacity: 0.1;
}
.thumb-title {
  display: block;
  padding: 8px 0px;
  text-align: center;
  font-size: 0.85rem;
}
.footer-widget, .aside-widget {
  border-style: solid;
  border-width: 1px;
  padding: 15px 12px;
  background-color: #00000005;
  margin-bottom: 2.5rem;
}
.footer-widget h3, .aside-widget h3 {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 1.2rem;
}
.footer-widget button, .aside-widget button {
  border-radius: 4px;
  font-weight: 600;
  margin-top: .75rem;
  margin-bottom: .75rem;
}
.footer-widget button:hover, .aside-widget button:hover {
  background-color: rgba(0,0,0,0.95);
}
.order-title {
  margin-top: 1.5rem;
  min-height: 73px;
}
.list-hidden {
  display: none;
}
.order-icon-right {
  right: 0rem;
}
#slider-image:hover {
  cursor: zoom-in;
}
.image-full {
  object-fit: none;
  overflow: clip;
  cursor: zoom-out;
  width: 100%;
  max-width: 1800px;
}
.modal-invisible {
  opacity: 0;
}
.offset-right {
  transform: translateX(150%);
}
.offset-left {
  transform: translateX(-150%);
}
.slide-to-left {
  opacity: 1;
  animation: slide-out-left 0.35s forwards;
  -webkit-animation: slide-out-left 0.35s forwards;
  transform: translateX(-150%);
}
.slide-from-left {
  opacity: 1;
  animation: slide-in-left 0.35s forwards;
  -webkit-animation: slide-in-left 0.35s forwards;
  transform: translateX(0%);
}
.slide-to-right {
  opacity: 1;
  animation: slide-out-right 0.35s forwards;
  -webkit-animation: slide-out-right 0.35s forwards;
  transform: translateX(150%);
}
.slide-from-right {
  opacity: 1;
  animation: slide-in-right 0.35s forwards;
  -webkit-animation: slide-in-right 0.35s forwards;
  transform: translateX(0%);
}
.slider-controls {
  z-index: 1000;
}
.slider-next {
  background-color: #ffffff90;
  border-radius: 8px;
  border-width: 0px;
  top: 10px;
  right: 60px;
  border-style: solid;
  border-width: 1px;
  padding: 4px;
}
.slider-next svg {
  position: relative;
  right: -2px;
}
.slider-next:hover {
  background: #a9a9a917;
}
.slider-prev {
  background-color: #ffffff90;
  border-radius: 8px;
  border-width: 0px;
  top: 10px;
  right: 60px;
  border-style: solid;
  border-width: 1px;
  padding: 4px;
}
.slider-prev svg {
  position: relative;
  left: 5px;
}
.slider-prev:hover {
  background: #a9a9a917;
}
.slider-close {
  background-color: #ffffff90;
  position: fixed;
  right: 10px;
  top: 10px;
  border-style: solid;
  border-width: 1px;
  padding: 4px;
}
.slide-counter {
  right: 90px;
  font-size: .85rem;
  top: 4px;
}
span.arth-disclaimer {
  color: #666;
  display: block;
  font-size: 0.8rem;
  margin-top: 0.75rem;
}
.insect-order-desc img {
  width: 100%;
  height: auto;
  max-width: 400px;
}
.insect-order-desc img.alignleft {
  float: left;
  margin: 0 1.5rem 3rem 0;
}
.insect-order-desc img.alignright {
  float: right;
  margin: 0 0 2rem 1.5rem;
}
@media screen and (max-width: 800px) {
  .insect-order-desc img.alignleft, .insect-order-desc img.alignright {
    float: none;
    max-width: 100%;
    margin: 0 0 1.5rem 0;
  }
}
div.species-list-grid {
  box-sizing: border-box;
  margin-left: -1rem;
  margin-right: -1rem;
  overflow: hidden;
}
@media screen and (max-width: 639px) {
  .thumb-double-height {
    grid-row: auto;
  }
  div.species-list-grid {
    grid-template-columns: repeat(1,minmax(0,1fr));
  }
}
div.species-list-grid > div {
  margin: 0 0.5rem 1rem 0.5rem;
}
@supports (gap: 1rem) {
  .species-list-grid {
    gap: 1rem;
  }
  div.species-list-grid {
    margin: 0;
  }
  div.species-list-grid div {
    margin: 0;
  }
}
#expand-order h1:hover {
  color: #000;
  cursor: pointer;
}
#expand-order:hover span svg {
  transition: all 0.4s ease-out;
}
.expand-order {
  margin-left: 1rem;
  position: relative;
  height: 25px;
  width: 25px;
  margin-top: auto;
  transform: rotate(0deg);
  transition: all 0.4s;
}
.expand-order:hover {
  cursor: pointer;
}
.svg-rotate {
  transform: rotate(180deg);
}
.order-details {
  background-color: #ececec;
  max-height: 0;
  opacity: 0;
  transition: all 0.4s;
}
.order-details-show {
  border-radius: 4px;
  height: fit-content;
  max-height: 400px;
  padding: 20px 25px;
  opacity: 1;
  margin-bottom: 0.75rem;
  position: sticky;
  position: -webkit-sticky;
  top: 78px;
  z-index: 99;
}
.sp-taxonomy-title {
  min-width: 5rem;
  display: inline-block;
  font-weight: 600;
}
.species-thumb:hover {
  cursor: pointer;
}
.species-modal {
  animation-name: fade;
  animation-timing-function: linear;
  animation-duration: 0.25s;
  animation-iteration-count: 1;
  animation-fill-mode: both;
  background-color: #000;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 999;
  margin: auto;
  overflow: auto;
}
.species-modal-show {
  animation-name: fade;
  animation-timing-function: linear;
  animation-duration: 0.25s;
  animation-iteration-count: 1;
  animation-fill-mode: both;
  display: flex;
  align-items: center;
  align-content: center;
  width: 100%;
  height: 100%;
  position: relative;
  overflow: auto;
}
.species-modal-show img {
  margin: auto;
  animation-name: height-width;
  animation-timing-function: linear;
  animation-duration: 0.25s;
  animation-delay: 0.15s;
  animation-iteration-count: 1;
  animation-fill-mode: both;
  padding: 30px;
  max-height: calc(100vh - 60px);
  width: auto;
}
.modal-icons {
  font-size: 0.85rem;
  position: fixed;
  top: 0;
  right: 0;
  padding: 10px;
  color: #fff;
}
.species-modal-close {
  margin-left: 10px;
}
.species-modal-close span, .species-modal-close svg, .species-modal-fs span, .species-modal-fs svg {
  display: inline-block;
}
.species-modal-close:hover, .species-modal-fs:hover {
  cursor: pointer;
}
.single-family-dropdown-outer {
  visibility: hidden;
  max-width: 40px;
  max-height: 0;
  opacity: 0;
  float: right;
  position: absolute;
  right: 46px;
  top: 0px;
  overflow: hidden;
  z-index: 100;
}
.single-family-dropdown {
  background-color: #fff;
  transform-origin: top right;
  transform: scaleX(0);
  transition: all .3s ease;
}
.single-family-dropdown-outer-show {
  opacity: 0;
  visibility: visible;
  max-height: 100%;
  height: 100%;
  max-width: 0px;
  width: 100%;
  overflow: visible;
}
.single-family-dropdown-outer-expand {
  opacity: 1;
  max-width: 270px;
}
.single-family-dropdown-outer-expand > .single-family-dropdown {
  transition: all .3s ease;
  transform: scaleX(1);
}
.family-dropdown-outer {
  background-color: #ffffff90;
  position: absolute;
  right: 6px;
  top: 0px;
  opacity: 0;
  width: 0;
  height: 1px;
  visibility: hidden;
  overflow: hidden;
  z-index: 99;
  border-style: solid;
  border-width: 1px;
  border-color: rgba(255, 255, 255, 0.9);
}
@media screen and (min-width: 640px) {
  .family-dropdown-outer-show {
    opacity: 1;
    width: calc(280px - 1rem);
    height: 100%;
    visibility: visible;
    margin-left: 0rem;
    margin-right: 0;
  }
}
.family-dropdown-outer-show {
  transition: all .2s ease;
}
@media screen and (max-width: 639px) {
  .family-dropdown-outer {
    position: absolute;
    right: 0;
  }
  .family-dropdown-outer-show {
    background-color: #000000ad;
    opacity: 1;
    height: fit-content;
    width: 226px;
    visibility: visible;
    margin-right: 0.5rem;
  }
  .family-dropdown-show {
    z-index: 100;
  }
}
.show-species > div:nth-child(1) {
  grid-column: span 6/span 6;
}
.show-species > div:nth-child(2) {
  grid-column: span 2/span 2;
}
@media screen and (max-width: 638px) {
  .show-species > div:nth-child(1) {
    grid-column: span 4/span 4;
  }
  .show-species > div:nth-child(2) {
    grid-column: span 4/span 4;
  }
}
.buttons-fixed {
  position: fixed;
  top: 50px;
}
.tooltip {
  background-color: #fff;
  border-style: solid;
  border-width: 1px;
  border-radius: 4px;
  font-size: 0.8rem;
  padding: 6px;
  min-width: 120px;
  opacity: 0;
  visibility: hidden;
  position: absolute;
  z-index: 100;
  top: 30px;
  right: 0;
}
.button-text {
  color: #787878;
  top: 0;
}
.toggle-tooltip {
  background-color: #179662;
  width: 40px;
  height: 40px;
  justify-content: center;
  display: flex;
  align-items: center;
  opacity: .75;
  z-index: 500;
}
.toggle-arachnids {
  background-color: #b33939;
}
.toggle-angiospermae {
  background-color: #741aa7;
}
.toggle-tooltip:hover .button-text {
  color: #fff;
}
.toggle-tooltip .tooltip {
  transition: opacity 0.3s ease;
  transition-delay: 300ms;
}
.toggle-tooltip svg {
  transition: all .3s ease;
}
.toggle-tooltip:hover svg {
  fill: #fff;
}
.families-svg, .slide-svg {
  position: relative;
  top: 3px;
  transition: all .4s ease;
}
.families-svg svg {
  transition: all 0.3s;
}
.slide-svg {
  position: relative;
  top: 3px;
}
.svg-expand {
  margin-top: auto;
  position: relative;
  transition: all .3s;
  top: 3px;
}
.svg-expand:hover {
  cursor: pointer;
}
.rotate-families-svg {
  transform: rotate(180deg);
}
.species-grid-outer {
  transition: all 0.3s ease;
  width: calc(100%);
}
.species-grid-reduce {
  width: calc(100% - 270px);
}
.single-main {
  margin-right: 0;
}
@media screen and (max-width: 639px) {
  .species-grid-outer {
    width: 100%;
  }
}
@media screen and (min-width: 640px) {
  .intro-text-reduce {
    width: calc(100% - 270px);
  }
}
.species-grid-inner {
  transition: all .3s ease;
  width: 100%;
}
ul.species-list li {
  margin-top: 2rem;
}
.species {
  display: grid;
  grid-template-columns: 2fr 3fr;
  gap: 5%;
  grid-auto-rows: minmax(100px, auto);
}
@media screen and (max-width: 798px) {
  .species {
    grid-template-columns: repeat(1, 1fr);
  }
}
.size-full {
  width: 100%;
  height: auto;
}
.single-arthropod {
  animation-delay: 0.25s;
  animation-name: fade;
  animation-timing-function: ease;
  animation-duration: 0.25s;
  animation-iteration-count: 1;
  animation-fill-mode: both;
  opacity: 0;
}
.single-arthropod-thumb {
  height: 100%;
  width: 100%;
  object-fit: cover;
  overflow: hidden;
}
.species-row div:nth-child(1) {
  font-weight: 600;
}
.species-row div:nth-child(2) {
  margin-left: 1rem;
}
.species-details {
  display: grid;
  grid-template-columns: 210px auto;
}
@media screen and (max-width: 798px) {
  .species-details {
    grid-template-columns: auto;
  }
}
.species-img {
  width: 100%;
  height: auto;
}
.species-img:hover {
  cursor: pointer;
}
.species-modal-img {
  display: block;
  padding: 30px 60px 50px 60px;
  max-height: 100vh;
  width: auto;
  margin: auto;
}
.modal-icons:hover {
  cursor: pointer;
}
.modal-species-thumbs {
  align-items: center;
  justify-content: center;
  display: grid;
  gap: 4px;
  padding: 8px 0;
  margin: auto;
  transition: all .25s ease;
  position: fixed;
  bottom: 4px;
  left: 0;
  right: 0;
}
.modal-species-thumbs img:hover {
  cursor: pointer;
}
.column-1 {
  order: 1;
}
.column-2 {
  order: 2;
}
@media screen and (max-width: 767px) {
  .column-1 {
    order: 2;
  }
  .column-2 {
    order: 1;
  }
}
.single-additional-container {
  position: relative;
}
.single-additional-images {
  padding: 2px 0;
  margin-top: 0.25rem;
  position: relative;
  display: flex;
  width: 100%;
  gap: 6px;
  transition: all .25s ease;
}
.additional-img-item {
  flex: 0 0 20%;
  max-width: calc(20% - 4.8px);
}
@media screen and (max-width: 1279px) {
  .additional-img-item {
    flex: 0 0 25%;
    max-width: calc(25% - 4.5px);
  }
}
@media screen and (max-width: 1023px) {
  .additional-img-item {
    flex: 0 0 20%;
    max-width: calc(20% - 4.8px);
  }
}
@media screen and (max-width: 599px) {
  .additional-img-item {
    flex: 0 0 33.333%;
    max-width: calc(33% - 4px);
  }
}
.single-additional-prev {
  position: absolute;
  z-index: 200;
  left: 5px;
  top: calc(50% - 22px);
}
.single-additional-next {
  position: absolute;
  z-index: 200;
  right: 5px;
  top: calc(50% - 22px);
}
.single-additional-prev button, .single-additional-next button {
  background-color: #00000060;
  border-radius: 4px;
  padding: 6px;
}
.single-additional-prev svg {
  position: relative;
  left: 3px;
}
.single-additional-inactive {
  visibility: hidden;
}
.modal-buttons {
  border-style: solid;
  border-width: 0px;
  padding: 7px;
  border-radius: 4px;
  z-index: 99;
}
.modal-buttons-no-fill {
  background-color: transparent;
}
.modal-buttons:hover {
  background-color: #00000020;
}
.modal-show {
  display: block;
  overflow: hidden;
}
.modal-slide-container {
  position: relative;
  left: 0;
  top: 0;
  z-index: 999;
}
.modal-container {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 9999;
}
.img-modal {
  height: 100%;
  margin-bottom: 60px;
}
.img-modal picture {
  display: block;
  max-height: calc(100vh - 106px);
  overflow: clip;
  transition: all 0.3s ease;
  margin-top: 36px;
  margin-bottom: auto;
  width: 100%;
  height: 100%;
}
.img-modal img {
  display: block;
  cursor: zoom-in;
  margin-left: auto;
  margin-right: auto;
  transition: all .3s ease;
}
@media screen and (max-width: 639px) {
  .modal-title {
    display: none;
  }
}
.modal-text {
  color: #d2d2d2;
  width: fit-content;
  min-height: 38px;
  max-width: calc(100% - 104px);
  min-width: 260px;
  overflow: hidden;
}
.modal-text-w-bg {
  background-color: #00000080;
}
@media screen and (max-width: 639px) {
  .modal-text {
    max-width: calc(100% - 110px);
  }
}
.modal-text-show {
  background-color: #2111117d;
  backdrop-filter: blur(6px);
}
.slide-inner {
  transition: all .4s ease-in-out;
}
.rel-top-min-2 {
  position: relative;
  top: -2px;
}
.font-600 {
  font-weight: 600;
}
.camera-txt {
  font-size: 0.85rem;
}
.camera-txt svg {
  position: relative;
  top: -2px;
}
.camera-make {
  margin: 1rem 0;
}
.camera-make span {
  font-weight: 600;
}
#insecta-full {
  user-select: none;
  transform-origin: top left;
  position: absolute;
  left: 50%;
  top: 50%;
}
.modal-text-container {
  z-index: 99;
}
.modal-img-container {
  display: flex;
  margin-top: 60px;
  padding: 0 20px 20px 20px;
  gap: 2rem;
  transition: all .3s ease;
  opacity: 0;
}
.modal-img-container-visible {
  opacity: 1;
}
.modal-img-container div:first-child {
  flex-basis: fit-content;
}
.modal-img-container div:nth-child(2) {
  flex-basis: 500px;
}
@media screen and (max-width: 1023px) {
  .modal-img-container {
    display: flex;
    flex-direction: column;
    margin-top: 60px;
    padding: 20px;
    gap: 2rem;
  }
  .modal-img-container div:first-child {
    flex-basis: 100%;
  }
  .modal-img-container div:nth-child(2) {
    flex-basis: 100%;
  }
}
.highlighted-div {
  background-color: #191919;
  position: fixed;
  top: 0;
  left: 0;
  display: none;
  width: 100vw;
  height: 100vh;
  opacity: 0;
  overflow: scroll;
  z-index: 1001;
}
.highlighted-div h2 {
  color: #a3a3a3;
}
.highlighted-div p {
  color: #a3a3a3;
}
.modal-img-container p {
  margin-top: 1.5rem;
}
.highlighted-img {
  max-height: calc(100vh - 90px);
  transition: all 0.3s ease;
}
.highlighted-visible {
  display: block;
  opacity: 1;
}
.highlighted-image img:hover, .highlighted-img:hover {
  cursor: pointer;
}
.highlight-left {
  padding-left: 3px;
}
.highlight-right {
  padding-right: 3px;
}
.img-cont {
  overflow: clip;
}
.img-cont-max {
  background-color: #fff;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2000;
}
.img-cont-max img {
  transition: all 0.3s ease;
  max-height: 100%;
  margin: auto;
  height: auto;
  width: 100%;
}
button.show-more {
  margin: 2rem auto 2rem auto;
  display: block;
  padding: 8px 18px;
  background-color: #1dacdc;
  color: white;
  border-radius: 4px;
  font-weight: 600;
}
button.show-more:hover {
  background-color: #127da1;
}
.highlighted-grid {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 10px;
  margin-top: 2.5rem;
}
@media screen and (max-width: 1279px) {
  .highlighted-grid {
    grid-template-columns: repeat(3,minmax(0,1fr));
  }
}
@media screen and (max-width: 1023px) {
  .highlighted-grid {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }
}
@media screen and (max-width: 600px) {
  .highlighted-grid {
    grid-template-columns: repeat(1,minmax(0,1fr));
  }
}
@keyframes highlighted {
  from {
    opacity: 0;
    transform: scale(0);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
.single-highlight, .full-highlighted {
  animation-delay: .4s;
  animation-name: highlighted;
  animation-timing-function: ease-in-out;
  animation-duration: .25s;
  animation-iteration-count: 1;
  animation-fill-mode: both;
}
.single-highlight:hover {
  cursor: pointer;
}
@property --tw-translate-x {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-translate-y {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-translate-z {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-rotate-x {
  syntax: "*";
  inherits: false;
}
@property --tw-rotate-y {
  syntax: "*";
  inherits: false;
}
@property --tw-rotate-z {
  syntax: "*";
  inherits: false;
}
@property --tw-skew-x {
  syntax: "*";
  inherits: false;
}
@property --tw-skew-y {
  syntax: "*";
  inherits: false;
}
@property --tw-space-x-reverse {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-divide-y-reverse {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}
@property --tw-leading {
  syntax: "*";
  inherits: false;
}
@property --tw-font-weight {
  syntax: "*";
  inherits: false;
}
@property --tw-tracking {
  syntax: "*";
  inherits: false;
}
@property --tw-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-inset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-inset-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-inset-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-ring-color {
  syntax: "*";
  inherits: false;
}
@property --tw-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-inset-ring-color {
  syntax: "*";
  inherits: false;
}
@property --tw-inset-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-ring-inset {
  syntax: "*";
  inherits: false;
}
@property --tw-ring-offset-width {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}
@property --tw-ring-offset-color {
  syntax: "*";
  inherits: false;
  initial-value: #fff;
}
@property --tw-ring-offset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@layer properties {
  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
    *, ::before, ::after, ::backdrop {
      --tw-translate-x: 0;
      --tw-translate-y: 0;
      --tw-translate-z: 0;
      --tw-rotate-x: initial;
      --tw-rotate-y: initial;
      --tw-rotate-z: initial;
      --tw-skew-x: initial;
      --tw-skew-y: initial;
      --tw-space-x-reverse: 0;
      --tw-divide-y-reverse: 0;
      --tw-border-style: solid;
      --tw-leading: initial;
      --tw-font-weight: initial;
      --tw-tracking: initial;
      --tw-shadow: 0 0 #0000;
      --tw-shadow-color: initial;
      --tw-shadow-alpha: 100%;
      --tw-inset-shadow: 0 0 #0000;
      --tw-inset-shadow-color: initial;
      --tw-inset-shadow-alpha: 100%;
      --tw-ring-color: initial;
      --tw-ring-shadow: 0 0 #0000;
      --tw-inset-ring-color: initial;
      --tw-inset-ring-shadow: 0 0 #0000;
      --tw-ring-inset: initial;
      --tw-ring-offset-width: 0px;
      --tw-ring-offset-color: #fff;
      --tw-ring-offset-shadow: 0 0 #0000;
    }
  }
}