/*!
* Atomic CSS 1.2.5
* https://github.com/viivue/atomic-css
*/
/**
 * Skeleton
 */
.skeleton-bg {
    background-image:url("data:image/svg+xml;utf8,<svg  xmlns='http://www.w3.org/2000/svg' fill='%23ccc' viewBox='0 0 20 18'><path d='M18 0H2a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2Zm-5.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3Zm4.376 10.481A1 1 0 0 1 16 15H4a1 1 0 0 1-.895-1.447l3.5-7A1 1 0 0 1 7.468 6a.965.965 0 0 1 .9.5l2.775 4.757 1.546-1.887a1 1 0 0 1 1.618.1l2.541 4a1 1 0 0 1 .028 1.011Z'></path></svg>");
    background-size:15%;
    background-repeat:no-repeat;
    background-position:center;
    background-color:#e5e7eb;
    border-radius:4px;
    animation:skeleton-animate 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes skeleton-animate {
    0%, 100% {
        background-color:rgb(229, 231, 235);
    }
    50% {
        background-color:rgba(229, 231, 235, 0.5);
    }
}
@keyframes skeleton-txt-animate {
    100% {
        background-position:180% 0;
    }
}
.skeleton-txt {
    position:relative;
}

.skeleton-txt::before {
    content:"";
    position:absolute;
    inset:0;
    background-color:transparent;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 30' preserveAspectRatio='none'><rect x='0' y='0' width='100' height='25' rx='1' ry='8' fill='%23e5e7eb'/></svg>");
    overflow:hidden;
    background-size:100% 1lh;
    background-repeat:no-repeat repeat;
    z-index:1;
}

.skeleton-txt::after {
    content:"";
    position:absolute;
    inset:0;
    z-index:1;
    background-image:linear-gradient(to right, transparent 30%, rgba(255, 255, 255, 0.4) 70%, transparent);
    background-size:60% 1lh;
    background-repeat:no-repeat repeat;
    background-position:-130% 0;
    animation:skeleton-txt-animate 1.3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.skeleton-txt:not(.skeleton-hide),
.skeleton-txt:not(.skeleton-hide) * {
    color:transparent !important;
}

.skeleton-txt.skeleton-hide::before,
.skeleton-txt.skeleton-hide::after {
    content:unset;
}

/**
 * Spacing
 * https://stackoverflow.design/product/base/spacing/
 */
/* Margin auto */
.m-auto {
    margin:auto;
}

.mt-auto {
    margin-top:auto;
}

.mr-auto {
    margin-right:auto;
}

.mb-auto {
    margin-bottom:auto;
}

.ml-auto {
    margin-left:auto;
}

/**
 * Vertical Spacing
 */
:root {
    --spacing-0:0;
}

.pt0 {
    padding-top:var(--spacing-0);
}

.pb0 {
    padding-bottom:var(--spacing-0);
}

.mt0 {
    margin-top:var(--spacing-0);
}

.mb0 {
    margin-bottom:var(--spacing-0);
}

/**
 * Positioning
 * https://stackoverflow.design/product/base/position/
 */
/* Positions */
.ps-absolute {
    position:absolute;
}

.ps-fixed {
    position:fixed;
}

.ps-relative {
    position:relative;
}

.ps-static {
    position:static;
}

.ps-sticky {
    position:sticky;
}

/* Coordinates */
.t0 {
    top:0;
}

.r0 {
    right:0;
}

.b0 {
    bottom:0;
}

.l0 {
    left:0;
}

.t50p {
    top:50%;
}

.r50p {
    right:50%;
}

.b50p {
    bottom:50%;
}

.l50p {
    left:50%;
}

.t100p {
    top:100%;
}

.r100p {
    right:100%;
}

.b100p {
    bottom:100%;
}

.l100p {
    left:100%;
}

/* Coordinates - auto */
.t-auto {
    top:auto;
}

.r-auto {
    right:auto;
}

.b-auto {
    bottom:auto;
}

.l-auto {
    left:auto;
}

/* ab-center */
.ab-center {
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
}

/* ab-center-v */
.ab-center-v {
    position:absolute;
    top:50%;
    transform:translateY(-50%);
}

/* ab-center-h */
.ab-center-h {
    position:absolute;
    left:50%;
    transform:translateX(-50%);
}

/* ab-full */
.ab-full, .ab-full-b:before, .ab-full-a:after, .ab-full-ba:before, .ab-full-ba:after {
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
}

/* ab-full-content */
.ab-full-b:before, .ab-full-a:after, .ab-full-ba:before, .ab-full-ba:after {
    content:"";
}

/* z-hide */
.z-hide {
    z-index:-1;
}

/* z-index */
.z1 {
    z-index:1;
}

.z2 {
    z-index:2;
}

.z3 {
    z-index:3;
}

.z4 {
    z-index:4;
}

.z5 {
    z-index:5;
}

.z10 {
    z-index:10;
}

.z20 {
    z-index:20;
}

.z30 {
    z-index:30;
}

.z40 {
    z-index:40;
}

.z100 {
    z-index:100;
}

.z99999999 {
    z-index:99999999;
}

/**
 * Typography
 * https://stackoverflow.design/product/base/typography/
 */
/* custom font-family */
/* build font-weight from _config.scss */
/* inject font-weight dataset */
/* color */
/* bg-color */
/* Print */
/* font-family */
.ff-sans {
    font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}

.ff-serif {
    font-family:Georgia, Cambria, "Times New Roman", Times, serif;
}

/* color */
.fc-white {
    color:#fff;
}

.fc-black {
    color:#000;
}

/* background-color */
.bg-white {
    background-color:#fff;
}

.bg-black {
    background-color:#000;
}

/* line-height */
.lh-xs {
    line-height:1;
}

.lh-sm {
    line-height:1.15;
}

.lh-md {
    line-height:1.3;
}

.lh-lg {
    line-height:1.6;
}

.lh-xl {
    line-height:1.92;
}

.lh-xxl {
    line-height:2;
}

.lh-unset {
    line-height:unset;
}

/* font-style */
.fs-normal {
    font-style:normal;
}

.fs-italic {
    font-style:italic;
}

/* text-transform */
.tt-capitalize {
    text-transform:capitalize;
}

.tt-lowercase {
    text-transform:lowercase;
}

.tt-uppercase {
    text-transform:uppercase;
}

.tt-none {
    text-transform:none;
}

.tt-unset {
    text-transform:unset;
}

/* text-decoration */
.td-underline {
    text-decoration:underline;
}

.td-none {
    text-decoration:none;
}

/* text-align */
.ta-left {
    text-align:left;
}

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

.ta-right {
    text-align:right;
}

.ta-justify {
    text-align:justify;
}

/* white-space */
.ws-normal {
    white-space:normal;
}

.ws-nowrap {
    white-space:nowrap;
}

.ws-pre {
    white-space:pre;
}

.ws-pre-wrap {
    white-space:pre-wrap;
}

.ws-pre-line {
    white-space:pre-line;
}

/* word-break */
.wb-normal {
    word-break:normal;
}

.wb-break-all {
    word-break:break-all;
}

.wb-keep-all {
    word-break:keep-all;
}

.wb-inherit {
    word-break:inherit;
}

.wb-initial {
    word-break:initial;
}

.wb-unset {
    word-break:unset;
}

/* break-word */
.break-word {
    word-break:break-word;
    word-wrap:break-word;
    overflow-wrap:break-word;
    hyphens:auto;
}

/* font-weight */
:root {
    --font-sans:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    --font-serif:Georgia, Cambria, "Times New Roman", Times, serif;
}

:root {
    --color-white:#fff;
    --color-black:#000;
}

/**
 * Display
 * https://stackoverflow.design/product/base/display/
 */
/* display */
.d-block {
    display:block;
}

.d-inline {
    display:inline;
}

.d-inline-block {
    display:inline-block;
}

.d-flex {
    display:flex;
}

.d-inline-flex {
    display:inline-flex;
}

.d-grid {
    display:grid;
}

.d-inline-grid {
    display:inline-grid;
}

.d-table {
    display:table;
}

.d-table-cell {
    display:table-cell;
}

.d-none {
    display:none;
}

.d-unset {
    display:unset;
}

/**
 * Flex
 * https://stackoverflow.design/product/base/flex/
 */
/* align-content */
.ac-stretch {
    align-content:stretch;
}

.ac-center {
    align-content:center;
}

.ac-start {
    align-content:flex-start;
}

.ac-end {
    align-content:flex-end;
}

.ac-space-between {
    align-content:space-between;
}

.ac-space-around {
    align-content:space-around;
}

/* align-items */
.ai-stretch {
    align-items:stretch;
}

.ai-center {
    align-items:center;
}

.ai-start {
    align-items:flex-start;
}

.ai-end {
    align-items:flex-end;
}

.ai-baseline {
    align-items:baseline;
}

/* align-self */
.as-auto {
    align-self:auto;
}

.as-stretch {
    align-self:stretch;
}

.as-center {
    align-self:center;
}

.as-start {
    align-self:flex-start;
}

.as-end {
    align-self:flex-end;
}

.as-baseline {
    align-self:baseline;
}

/* flex-direction */
.fd-row {
    flex-direction:row;
}

.fd-row-reverse {
    flex-direction:row-reverse;
}

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

.fd-column-reverse {
    flex-direction:column-reverse;
}

/* flex-wrap */
.fw-nowrap {
    flex-wrap:nowrap;
}

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

.fw-wrap-reverse {
    flex-wrap:wrap-reverse;
}

/* justify-content */
.jc-start {
    justify-content:flex-start;
}

.jc-end {
    justify-content:flex-end;
}

.jc-center {
    justify-content:center;
}

.jc-space-between {
    justify-content:space-between;
}

.jc-space-around {
    justify-content:space-around;
}

.jc-space-evenly {
    justify-content:space-evenly;
}

/* fl-center */
.fl-center {
    display:flex;
    align-items:center;
    justify-content:center;
}

/* fl-center-v */
.fl-center-v {
    display:flex;
    align-items:center;
}

/* fl-center-h */
.fl-center-h {
    display:flex;
    justify-content:center;
}

/* fl-grid */
.fl-grid {
    display:flex;
    flex-wrap:wrap;
}

/**
 * Transitions
 * https://stackoverflow.design/product/base/transitions/
 */
/* transition */
.t {
    transition-duration:.25s;
    transition-property:all;
    transition-timing-function:ease;
    transition-delay:0s;
}

/* slow */
.t-slow {
    transition-duration:.6s;
}

/* fast */
.t-fast {
    transition-duration:.1s;
}

/* opacity */
.t-opacity {
    transition-property:opacity;
}

/* opacity-color */
.t-opacity-color {
    transition-property:opacity, color;
}

/* transform */
.t-transform {
    transition-property:transform;
}

/* transform-opacity */
.t-transform-opacity {
    transition-property:transform, opacity;
}

/* transform-opacity-color */
.t-transform-opacity-color {
    transition-property:transform, opacity, color;
}

/* transform-color */
.t-transform-color {
    transition-property:transform, color;
}

/* color */
.t-color {
    transition-property:color;
}

/**
 * Object fit
 * https://stackoverflow.design/product/base/object-fit/
 */
/* object-fit */
.of-fill {
    object-fit:fill;
}

.of-contain {
    object-fit:contain;
}

.of-cover {
    object-fit:cover;
}

.of-scale-down {
    object-fit:scale-down;
}

.of-none {
    object-fit:none;
}

/* object-position */
.op-center {
    object-position:center;
}

/**
 * Interactivity
 * https://stackoverflow.design/product/base/interactivity/
 */
/* pointer-events */
.pe-auto {
    pointer-events:auto;
}

.pe-none {
    pointer-events:none;
}

/* user-select */
.us-auto {
    user-select:auto;
}

.us-none {
    user-select:none;
}

/* user-drag */
.ud-auto {
    user-drag:auto;
}

.ud-none {
    user-drag:none;
}

/**
 * Overflow
 * https://stackoverflow.design/product/base/overflow/
 */
/* overflow */
.overflow-visible {
    overflow:visible;
}

.overflow-hidden {
    overflow:hidden;
}

.overflow-scroll {
    overflow:scroll;
}

.overflow-auto {
    overflow:auto;
}

/* overflow-x */
.overflow-x-hidden {
    overflow-x:hidden;
}

.overflow-x-scroll {
    overflow-x:scroll;
}

.overflow-x-auto {
    overflow-x:auto;
}

/* overflow-y */
.overflow-y-hidden {
    overflow-y:hidden;
}

.overflow-y-scroll {
    overflow-y:scroll;
}

.overflow-y-auto {
    overflow-y:auto;
}

/**
 * Border radius
 * https://stackoverflow.design/product/base/border-radius/
 */
/* bar-pill */
.bar-pill {
    border-radius:1000px;
}

/* bar-circle */
.bar-circle {
    border-radius:100%;
}

/**
 * Width & Height
 */
/* w-auto */
.w-auto {
    width:auto;
}

/* width */
.w0 {
    width:0;
}

.w10 {
    width:10%;
}

.w20 {
    width:20%;
}

.w25 {
    width:25%;
}

.w30 {
    width:30%;
}

.w40 {
    width:40%;
}

.w50 {
    width:50%;
}

.w60 {
    width:60%;
}

.w70 {
    width:70%;
}

.w75 {
    width:75%;
}

.w80 {
    width:80%;
}

.w90 {
    width:90%;
}

.w100 {
    width:100%;
}

/* w33 */
.w33 {
    width:33.33%;
}

/* w66 */
.w66 {
    width:66.67%;
}

/* w-screen */
.w-screen {
    width:100vw;
}

/* h-auto */
.h-auto {
    height:auto;
}

/* height */
.h0 {
    height:0;
}

.h100 {
    height:100%;
}

/* h-screen */
.h-screen {
    height:100vh;
}

/**
 * Cursors
 * https://stackoverflow.design/product/base/cursors/
 */
/* cursor */
.c-auto {
    cursor:auto;
}

.c-default {
    cursor:default;
}

.c-pointer {
    cursor:pointer;
}

.c-text {
    cursor:text;
}

.c-wait {
    cursor:wait;
}

.c-move {
    cursor:move;
}

.c-not-allowed {
    cursor:not-allowed;
}

.c-help {
    cursor:help;
}

/**
 * Aspect Ratio
 */
/* aspect-ratio */
.ar-1 {
    aspect-ratio:1;
}

/**
 * Flex grid
 */
.flex-grid-template {
    --grid-gap-x:30px;
    --grid-gap-y:30px;
    --grid-col:3;
    display:flex;
    flex-wrap:wrap;
    gap:var(--grid-gap-y) var(--grid-gap-x);
}

.flex-grid-template > * {
    /* calculate new width */
    --grid-gap-x-total:calc(var(--grid-gap-x) * (var(--grid-col) - 1));
    --grid-space-each:calc(var(--grid-gap-x-total) / var(--grid-col));
    width:calc(100% / var(--grid-col) - var(--grid-space-each));
}

@media only screen and (max-width:768px) {
    .flex-grid-template {
        --grid-col:2;
    }
}
@media only screen and (max-width:480px) {
    .flex-grid-template {
        --grid-col:1;
    }
}
/**
 * Background object fit
 */
.img-wrapper-cover img {
    object-position:center center;
    height:100%;
    width:100%;
    min-height:100%;
    min-width:100%;
    max-height:100%;
    max-width:100%;
    display:block;
    object-fit:cover;
}

.img-wrapper-contain img {
    object-position:center center;
    height:100%;
    width:100%;
    min-height:100%;
    min-width:100%;
    max-height:100%;
    max-width:100%;
    display:block;
    object-fit:contain;
}

/**
 * Clear list style
 */
ul.list-style-none,
.list-style-none ul {
    margin:0;
    list-style:none;
}

ul.list-style-none > li,
.list-style-none ul > li {
    padding:0;
}

/*
 * Visually hidden
 * https://www.joshwcomeau.com/snippets/react-components/visually-hidden/
 */
.visually-hidden {
    position:absolute;
    overflow:hidden;
    clip:rect(0 0 0 0);
    width:1px;
    height:1px;
    margin:-1px;
    padding:0;
    border:0;
}

/**
 * Font Sizes
 */
/**
 * Loading
 */
