/* Colors */

:root {
  --ado-purple: #635bff;
  --ado-purple-10-opacity: rbga(99, 91, 255, .40);
  --white: #ffffff;
  --green: #5abf9c;
  --grey: #e9edf0;
  --grey-100: #f5f8fa;
  --black-900: #212529;
  --grey-100: #c4ccd4;
  --grey-200: #bbb;
  --grey-150: #f7fafc;
  --grey-300: #ccd5dc;
  --grey-400: #e3e8ee;
  --grey-401: #93999e;
  --grey-402: #b7bdc4;
  --grey-500: #dce1e7;
  --grey-600: #6e7071;
  --grey-800: #4f566b;
  --blue-200: #e4eeff;
  --blue-600: #4872c2;
  --blue-800: #192c49;
  --yellow: #f6ce16;
  --subway-circle-size: 30px;
}

/* SIZING */

/* Sizing - Width */
.w-0	{width: 0px;}
.w-px	{width: 1px;}
.w-0-5	{width: 0.125rem;} /* 2px */
.w-1	{width: 0.25rem;} /* 4px */
.w-1-5	{width: 0.375rem;} /* 6px */
.w-2	{width: 0.5rem;} /* 8px */
.w-2-5	{width: 0.625rem;} /* 10px */
.w-3	{width: 0.75rem;} /* 12px */
.w-3-5	{width: 0.875rem;} /* 14px */
.w-4	{width: 1rem;} /* 16px */
.w-5	{width: 1.25rem;} /* 20px */
.w-6	{width: 1.5rem;} /* 24px */
.w-7	{width: 1.75rem;} /* 28px */
.w-8	{width: 2rem;} /* 32px */
.w-9	{width: 2.25rem;} /* 36px */
.w-10	{width: 2.5rem;} /* 40px */
.w-11	{width: 2.75rem;} /* 44px */
.w-12	{width: 3rem;} /* 48px */
.w-14	{width: 3.5rem;} /* 56px */
.w-16	{width: 4rem;} /* 64px */
.w-20	{width: 5rem;} /* 80px */
.w-24	{width: 6rem;} /* 96px */
.w-28	{width: 7rem;} /* 112px */
.w-32	{width: 8rem;} /* 128px */
.w-36	{width: 9rem;} /* 144px */
.w-40	{width: 10rem;} /* 160px */
.w-44	{width: 11rem;} /* 176px */
.w-48	{width: 12rem;} /* 192px */
.w-52	{width: 13rem;} /* 208px */
.w-56	{width: 14rem;} /* 224px */
.w-60	{width: 15rem;} /* 240px */
.w-64	{width: 16rem;} /* 256px */
.w-72	{width: 18rem;} /* 288px */
.w-80	{width: 20rem;} /* 320px */
.w-96	{width: 24rem;} /* 384px */
.w-auto	{width: auto;}
.w-1-and-2	{width: 50%;}
.w-1-and-3	{width: 33.333333%;}
.w-2-and-3	{width: 66.666667%;}
.w-1-and-4	{width: 25%;}
.w-2-and-4	{width: 50%;}
.w-3-and-4	{width: 75%;}
.w-1-and-5	{width: 20%;}
.w-2-and-5	{width: 40%;}
.w-3-and-5	{width: 60%;}
.w-4-and-5	{width: 80%;}
.w-1-and-6	{width: 16.666667%;}
.w-2-and-6	{width: 33.333333%;}
.w-3-and-6	{width: 50%;}
.w-4-and-6	{width: 66.666667%;}
.w-5-and-6	{width: 83.333333%;}
.w-1-and-12	{width: 8.333333%;}
.w-2-and-12	{width: 16.666667%;}
.w-3-and-12	{width: 25%;}
.w-4-and-12	{width: 33.333333%;}
.w-5-and-12	{width: 41.666667%;}
.w-6-and-12	{width: 50%;}
.w-7-and-12	{width: 58.333333%;}
.w-8-and-12	{width: 66.666667%;}
.w-9-and-12	{width: 75%;}
.w-10-and-12	{width: 83.333333%;}
.w-11-and-12	{width: 91.666667%;}
.w-full	{width: 100%;}
.w-screen	{width: 100vw;}
.w-min	{width: min-content;}
.w-max	{width: max-content;}
.w-fit	{width: fit-content;}
.w-auto	{width: auto;}

/* Sizing - Height */
.h-0	{height: 0px;}
.h-px	{height: 1px;}
.h-0-5	{height: 0.125rem;} /* 2px */
.h-1	{height: 0.25rem;} /* 4px */
.h-1-5	{height: 0.375rem;} /* 6px */
.h-2	{height: 0.5rem;} /* 8px */
.h-2-5	{height: 0.625rem;} /* 10px */
.h-3	{height: 0.75rem;} /* 12px */
.h-3-5	{height: 0.875rem;} /* 14px */
.h-4	{height: 1rem;} /* 16px */
.h-5	{height: 1.25rem;} /* 20px */
.h-6	{height: 1.5rem;} /* 24px */
.h-7	{height: 1.75rem;} /* 28px */
.h-8	{height: 2rem;} /* 32px */
.h-9	{height: 2.25rem;} /* 36px */
.h-10	{height: 2.5rem;} /* 40px */
.h-11	{height: 2.75rem;} /* 44px */
.h-12	{height: 3rem;} /* 48px */
.h-14	{height: 3.5rem;} /* 56px */
.h-16	{height: 4rem;} /* 64px */
.h-20	{height: 5rem;} /* 80px */
.h-24	{height: 6rem;} /* 96px */
.h-28	{height: 7rem;} /* 112px */
.h-32	{height: 8rem;} /* 128px */
.h-36	{height: 9rem;} /* 144px */
.h-40	{height: 10rem;} /* 160px */
.h-44	{height: 11rem;} /* 176px */
.h-48	{height: 12rem;} /* 192px */
.h-52	{height: 13rem;} /* 208px */
.h-56	{height: 14rem;} /* 224px */
.h-60	{height: 15rem;} /* 240px */
.h-64	{height: 16rem;} /* 256px */
.h-72	{height: 18rem;} /* 288px */
.h-80	{height: 20rem;} /* 320px */
.h-96	{height: 24rem;} /* 384px */
.h-auto	{height: auto;}
.h-1-and-2	{height: 50%;}
.h-1-and-3	{height: 33.333333%;}
.h-2-and-3	{height: 66.666667%;}
.h-1-and-4	{height: 25%;}
.h-2-and-4	{height: 50%;}
.h-3-and-4	{height: 75%;}
.h-1-and-5	{height: 20%;}
.h-2-and-5	{height: 40%;}
.h-3-and-5	{height: 60%;}
.h-4-and-5	{height: 80%;}
.h-1-and-6	{height: 16.666667%;}
.h-2-and-6	{height: 33.333333%;}
.h-3-and-6	{height: 50%;}
.h-4-and-6	{height: 66.666667%;}
.h-5-and-6	{height: 83.333333%;}
.h-full	{height: 100%;}
.h-screen	{height: 100vh;}
.h-min	{height: min-content;}
.h-max	{height: max-content;}
.h-fit	{height: fit-content;}


/* TYPOGRAPHY */

/* Typography - Font Size */
.text-xs	{font-size: 0.75rem; line-height: 1rem;} /* 16px */
.text-sm	{font-size: 0.875rem; line-height: 1.25rem;} /* 20px */
.text-14 { font-size: 14px; }
.text-sbase { font-size: 0.925rem; line-height: 1.6rem; }
.text-base	{font-size: 1rem; line-height: 1.5rem;} /* 24px */
.text-lg	{font-size: 1.125rem; line-height: 1.75rem;} /* 28px */
.text-xl-no-lh { font-size: 1.25rem; }
.text-xl	{font-size: 1.25rem; line-height: 1.75rem;} /* 28px */
.text-2xl	{font-size: 1.5rem; line-height: 2rem;} /* 32px */
.text-2x-no-lh { font-size: 1.5rem; }
.text-3xl	{font-size: 1.875rem; line-height: 2.25rem;} /* 36px */
.text-4xl	{font-size: 2.25rem; line-height: 2.5rem;} /* 40px */
.text-5xl	{font-size: 3rem; line-height: 1;}
.text-6xl	{font-size: 3.75rem; line-height: 1;}
.text-7xl	{font-size: 4.5rem; line-height: 1;}
.text-8xl	{font-size: 6rem; line-height: 1;}
.text-9xl	{font-size: 8rem; line-height: 1;}


.line-height-xl { line-height: 1.3rem !important; }
.line-height-lg { line-height: 26px !important; }

/* Typography - Font Weight */
.font-thin	{font-weight: 100;}
.font-extralight	{font-weight: 200;}
.font-light	{font-weight: 300;}
.font-normal	{font-weight: 400;}
.font-medium	{font-weight: 500;}
.font-semibold	{font-weight: 600;}
.font-bold	{font-weight: 700;}
.font-extrabold	{font-weight: 800;}
.font-black	{font-weight: 900;}

/* Typography - text color */
.text-green { color: var(--green); }
.text-yellow { color: var(--yellow); }
.text-purple { color: var(--ado-purple) !important; }

.text-grey-100 { color: var(--grey-100); }
.text-grey-200 { color: var(--grey-200); }
.text-grey-300 { color: var(--grey-300); }
.text-grey-400 { color: var(--grey-400); }
.text-grey-401 { color: var(--grey-401); }
.text-grey-402 { color: var(--grey-402); }
.text-grey-600 { color: var(--grey-600); }
.text-grey-800 { color: var(--grey-800); }

.text-blue-200 { color: var(--blue-200); }
.text-blue-600 { color: var(--blue-600); }
.text-blue-800 { color: var(--blue-800); }

/* Background */

.bg-grey { background-color: var(--grey); }
.bg-grey-100 { background-color: var(--grey-100); }
.bg-grey-150 { background-color: var(--grey-150); }
.bg-grey-400 { background-color: var(--grey-400); }
.bg-grey-800 { background-color: var(--grey-800); }
.bg-blue-200 { background-color: var(--blue-200); }
.bg-blue-600 { background-color: var(--blue-600); }



/* Borders */

.rounded-none	{border-radius: 0px;}
.rounded-sm	{border-radius: 0.125rem;} /* 2px */
.rounded	{border-radius: 0.25rem;} /* 4px */
.rounded-md	{border-radius: 0.375rem;} /* 6px */
.rounded-lg	{border-radius: 0.5rem;} /* 8px */
.rounded-xl	{border-radius: 0.75rem;} /* 12px */
.rounded-2xl	{border-radius: 1rem;} /* 16px */
.rounded-3xl	{border-radius: 1.5rem;} /* 24px */
.rounded-full	{border-radius: 9999px;}

.rounded-t { border-radius: 4px 4px 0 0; }
.rounded-b { border-radius: 0 0 4px 4px; }

.border-none {border: none !important;}
.border-b-none { border-bottom: none !important; }
.border-t-none { border-top: none !important; }

.border-grey-500 { border-color: var(--grey-500); }

.border-thin { border-width: thin; }

/* .border-y {  }

.border-x {  }

.border-b {  } */

.border-solid { border-style: solid; }

/* Box Shadow */

.shadow-m, .shadow-m:hover {
  box-shadow: rgb(0 0 0 / 0%) 0px 0px 0px 0px, rgb(0 0 0 / 0%) 0px 0px 0px 0px, rgb(0 0 0 / 12%) 0px 1px 1px 0px, rgb(60 66 87 / 16%) 0px 0px 0px 1px, rgb(0 0 0 / 0%) 0px 0px 0px 0px, rgb(0 0 0 / 0%) 0px 0px 0px 0px, rgb(60 66 87 / 8%) 0px 2px 5px 0px !important
}


/* FONT & TEXT */

/* Font & Text - Alignment */
.text-left	{text-align: left;}
.text-center	{text-align: center;}
.text-right	{text-align: right;}
.text-justify	{text-align: justify;}
.text-start	{text-align: start;}
.text-end	{text-align: end;}

.font-thin	{font-weight: 100;}
.font-extralight	{font-weight: 200;}
.font-light	{font-weight: 300;}
.font-normal	{font-weight: 400;}
.font-medium	{font-weight: 500;}
.font-semibold	{font-weight: 600;}
.font-bold	{font-weight: 700;}
.font-extrabold	{font-weight: 800;}
.font-black	{font-weight: 900;}

.text-xs	{font-size: 0.75rem; /* 12px */ line-height: 1rem; /* 16px */}
.text-sm	{font-size: 0.875rem; /* 14px */ line-height: 1.25rem; /* 20px */}
.text-base	{font-size: 1rem; /* 16px */ line-height: 1.5rem; /* 24px */}
.text-lg	{font-size: 1.125rem; /* 18px */ line-height: 1.75rem; /* 28px */}
.text-xl	{font-size: 1.25rem; /* 20px */ line-height: 1.75rem; /* 28px */}
.text-2xl	{font-size: 1.5rem; /* 24px */ line-height: 2rem; /* 32px */}
.text-3xl	{font-size: 1.875rem; /* 30px */ line-height: 2.25rem; /* 36px */}
.text-4xl	{font-size: 2.25rem; /* 36px */ line-height: 2.5rem; /* 40px */}
.text-5xl	{font-size: 3rem; /* 48px */ line-height: 1;}
.text-6xl	{font-size: 3.75rem; /* 60px */ line-height: 1;}
.text-7xl	{font-size: 4.5rem; /* 72px */ line-height: 1;}
.text-8xl	{font-size: 6rem; /* 96px */ line-height: 1;}
.text-9xl	{font-size: 8rem; /* 128px */ line-height: 1;}

.text-truncate-container p {
    -webkit-line-clamp: 3;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Font & Text - Text Decoration */
.underline	{text-decoration-line: underline;}
.overline	{text-decoration-line: overline;}
.line-through	{text-decoration-line: line-through;}
.no-underline	{text-decoration-line: none;}

/* Margin */
.m-0 { margin: 0; }
.m-5 { margin: 5px; }
.m-10 { margin: 10px; }
.m-15 { margin: 15px; }
.m-20 { margin: 20px; }
.m-25 { margin: 25px; }
.m-30 { margin: 30px; }
.m-35 { margin: 35px; }
.m-40 { margin: 40px; }
.m-45 { margin: 45px; }
.m-50 { margin: 50px; }

.mb-0 { margin-bottom: 0; }
.mb-5 { margin-bottom: 5px !important }
.mb-10 { margin-bottom: 10px; }
.mb-15 { margin-bottom: 15px; }
.mb-20 { margin-bottom: 20px; }
.mb-25 { margin-bottom: 25px; }
.mb-30 { margin-bottom: 30px; }
.mb-35 { margin-bottom: 35px; }
.mb-40 { margin-bottom: 40px; }
.mb-45 { margin-bottom: 45px; }
.mb-50 { margin-bottom: 50px; }
.mb-auto { margin-bottom: auto; }

.mt-2px { margin-top: 2px; }
.mt-0 { margin-top: 0; }
.mt-0-5 { margin-top: 2px; }
.mt-0-75 { margin-top: 3px; }
.mt-5 { margin-top: 5px !important; }
.mt-10 { margin-top: 10px; }
.mt-15 { margin-top: 15px; }
.mt-20 { margin-top: 20px; }
.mt-25 { margin-top: 25px; }
.mt-30 { margin-top: 30px; }
.mt-35 { margin-top: 35px; }
.mt-40 { margin-top: 40px; }
.mt-45 { margin-top: 45px; }
.mt-50 { margin-top: 50px; }
.mt-auto { margin-top: auto; }

.my-0 { margin-bottom: 0; margin-top: 0; }
.my-5 { margin-bottom: 5px; margin-top: 5px; }
.my-10 { margin-bottom: 10px; margin-top: 10px; }
.my-15 { margin-bottom: 15px; margin-top: 15px; }
.my-20 { margin-bottom: 20px; margin-top: 20px; }
.my-25 { margin-bottom: 25px; margin-top: 25px; }
.my-30 { margin-bottom: 30px; margin-top: 30px; }
.my-35 { margin-bottom: 35px; margin-top: 35px; }
.my-40 { margin-bottom: 40px; margin-top: 40px; }
.my-45 { margin-bottom: 45px; margin-top: 45px; }
.my-50 { margin-bottom: 50px; margin-top: 50px; }
.my-auto { margin-bottom: auto; margin-top: auto; }

.ml-0 { margin-left: 0; }
.ml-5 { margin-left: 5px; }
.ml-8 { margin-left: 8px; }
.ml-10 { margin-left: 10px; }
.ml-15 { margin-left: 15px !important; }
.ml-20 { margin-left: 20px; }
.ml-25 { margin-left: 25px; }
.ml-30 { margin-left: 30px; }
.ml-35 { margin-left: 35px; }
.ml-40 { margin-left: 40px; }
.ml-45 { margin-left: 45px; }
.ml-50 { margin-left: 50px; }
.ml-auto { margin-left: auto; }

.mr-0 { margin-right: 0; }
.mr-5 { margin-right: 5px; }
.mr-8 { margin-right: 8px; }
.mr-10 { margin-right: 10px; }
.mr-15 { margin-right: 15px; }
.mr-20 { margin-right: 20px; }
.mr-25 { margin-right: 25px; }
.mr-30 { margin-right: 30px; }
.mr-35 { margin-right: 35px; }
.mr-40 { margin-right: 40px; }
.mr-45 { margin-right: 45px; }
.mr-50 { margin-right: 50px; }
.mr-auto { margin-right: auto; }

.mx-0 { margin-left: 0; margin-right: 0; }
.mx-5 { margin-left: 5px; margin-right: 5px; }
.mx-8 { margin-left: 8px; margin-right: 8px; }
.mx-10 { margin-left: 10px; margin-right: 10px; }
.mx-15 { margin-left: 15px; margin-right: 15px; }
.mx-20 { margin-left: 20px; margin-right: 20px; }
.mx-25 { margin-left: 25px; margin-right: 25px; }
.mx-30 { margin-left: 30px; margin-right: 30px; }
.mx-35 { margin-left: 35px; margin-right: 35px; }
.mx-40 { margin-left: 40px; margin-right: 40px; }
.mx-45 { margin-left: 45px; margin-right: 45px; }
.mx-50 { margin-left: 50px; margin-right: 50px; }
.mx-auto { margin-left: auto; margin-right: auto; }

.ml-n15 { margin-left: -15px; }
.ml-n20 { margin-left: -20px; }
.ml-n23 { margin-left: -23px; }

/* Padding */
.p-none { padding: 0 !important; }
.p-5 { padding: 5px; }
.p-10 { padding: 10px; }
.p-15 { padding: 15px; }
.p-20 { padding: 20px; }
.p-25 { padding: 25px; }
.p-30 { padding: 30px; }
.p-35 { padding: 35px; }
.p-40 { padding: 40px; }
.p-45 { padding: 45px; }
.p-50 { padding: 50px; }

.pb-5 { padding-bottom: 5px; }
.pb-10 { padding-bottom: 10px; }
.pb-15 { padding-bottom: 15px; }
.pb-20 { padding-bottom: 20px; }
.pb-25 { padding-bottom: 25px; }
.pb-30 { padding-bottom: 30px; }
.pb-35 { padding-bottom: 35px; }
.pb-40 { padding-bottom: 40px; }
.pb-45 { padding-bottom: 45px; }
.pb-50 { padding-bottom: 50px; }
.pb-auto { padding-bottom: auto; }

.pt-5 { padding-top: 5px; }
.pt-10 { padding-top: 10px; }
.pt-15 { padding-top: 15px; }
.pt-20 { padding-top: 20px; }
.pt-25 { padding-top: 25px; }
.pt-30 { padding-top: 30px; }
.pt-35 { padding-top: 35px; }
.pt-40 { padding-top: 40px; }
.pt-45 { padding-top: 45px; }
.pt-50 { padding-top: 50px; }
.pt-auto { padding-top: auto; }

.py-5 { padding-bottom: 5px; padding-top: 5px; }
.py-10 { padding-bottom: 10px; padding-top: 10px; }
.py-15 { padding-bottom: 15px; padding-top: 15px; }
.py-20 { padding-bottom: 20px; padding-top: 20px; }
.py-25 { padding-bottom: 25px; padding-top: 25px; }
.py-30 { padding-bottom: 30px; padding-top: 30px; }
.py-35 { padding-bottom: 35px; padding-top: 35px; }
.py-40 { padding-bottom: 40px; padding-top: 40px; }
.py-45 { padding-bottom: 45px; padding-top: 45px; }
.py-50 { padding-bottom: 50px; padding-top: 50px; }
.py-auto { padding-bottom: auto; padding-top: auto; }

.pl-5 { padding-left: 5px; }
.pl-10 { padding-left: 10px; }
.pl-15 { padding-left: 15px; }
.pl-20 { padding-left: 20px; }
.pl-25 { padding-left: 25px; }
.pl-30 { padding-left: 30px; }
.pl-35 { padding-left: 35px; }
.pl-40 { padding-left: 40px; }
.pl-45 { padding-left: 45px; }
.pl-50 { padding-left: 50px; }
.pl-auto { padding-left: auto; }

.pr-5 { padding-right: 5px; }
.pr-10 { padding-right: 10px; }
.pr-15 { padding-right: 15px; }
.pr-20 { padding-right: 20px; }
.pr-25 { padding-right: 25px; }
.pr-30 { padding-right: 30px; }
.pr-35 { padding-right: 35px; }
.pr-40 { padding-right: 40px; }
.pr-45 { padding-right: 45px; }
.pr-50 { padding-right: 50px; }
.pr-auto { padding-right: auto; }

.px-5 { padding-left: 5px; padding-right: 5px; }
.px-10 { padding-left: 10px; padding-right: 10px; }
.px-15 { padding-left: 15px; padding-right: 15px; }
.px-20 { padding-left: 20px; padding-right: 20px; }
.px-25 { padding-left: 25px; padding-right: 25px; }
.px-30 { padding-left: 30px; padding-right: 30px; }
.px-35 { padding-left: 35px; padding-right: 35px; }
.px-40 { padding-left: 40px; padding-right: 40px; }
.px-45 { padding-left: 45px; padding-right: 45px; }
.px-50 { padding-left: 50px; padding-right: 50px; }
.px-auto { padding-left: auto; padding-right: auto; }

/* Flexbox & Grid */

.flex { display: flex; }
.inline-flex { display: inline-flex !important; }
.flex-row { flex-direction: row; }
.flex-row-reverse { flex-direction: row-reverse; }
.flex-column { flex-direction: column; }
.flex-column-reverse { flex-direction: column-reverse; }
.flex-1 { flex: 1 !important; }
.flex-2 { flex: 2 !important; }
.flex-3 { flex: 3 !important; }
.flex-4 { flex: 4; }
.flex-5 { flex: 5; }
.flex-6 { flex: 6; }
.flex-7 { flex: 7; }
.flex-8 { flex: 8; }
.flex-9 { flex: 9; }
.flex-10 { flex: 10; }
.flex-11 { flex: 11; }
.flex-12 { flex: 12; }

.flex-gap-10 { gap: 10px; }

.basis-0 {flex-basis: 0px;}
.basis-1 {flex-basis: 0.25rem;} /* 4px */
.basis-2 {flex-basis: 0.5rem;} /* 8px */
.basis-3 {flex-basis: 0.75rem;} /* 12px */
.basis-4 {flex-basis: 1rem;} /* 16px */
.basis-5 {flex-basis: 1.25rem;} /* 20px */
.basis-6 {flex-basis: 1.5rem;} /* 24px */
.basis-7 {flex-basis: 1.75rem;} /* 28px */
.basis-8 {flex-basis: 2rem;} /* 32px */
.basis-9 {flex-basis: 2.25rem;} /* 36px */
.basis-10 {flex-basis: 2.5rem;} /* 40px */
.basis-11 {flex-basis: 2.75rem;} /* 44px */
.basis-12 {flex-basis: 3rem;} /* 48px */
.basis-14 {flex-basis: 3.5rem;} /* 56px */
.basis-16 {flex-basis: 4rem;} /* 64px */
.basis-20 {flex-basis: 5rem;} /* 80px */
.basis-24 {flex-basis: 6rem;} /* 96px */
.basis-28 {flex-basis: 7rem;} /* 112px */
.basis-32 {flex-basis: 8rem;} /* 128px */
.basis-36 {flex-basis: 9rem;} /* 144px */
.basis-40 {flex-basis: 10rem;} /* 160px */
.basis-44 {flex-basis: 11rem;} /* 176px */
.basis-48 {flex-basis: 12rem;} /* 192px */
.basis-52 {flex-basis: 13rem;} /* 208px */
.basis-56 {flex-basis: 14rem;} /* 224px */
.basis-60 {flex-basis: 15rem;} /* 240px */
.basis-64 {flex-basis: 16rem;} /* 256px */
.basis-72 {flex-basis: 18rem;} /* 288px */
.basis-80 {flex-basis: 20rem;} /* 320px */
.basis-96 {flex-basis: 24rem;} /* 384px */
.basis-auto {flex-basis: auto;}
.basis-px {flex-basis: 1px;}
.basis-0-5 {flex-basis: 0.125rem;} /* 2px */
.basis-1-5 {flex-basis: 0.375rem;} /* 6px */
.basis-2-5 {flex-basis: 0.625rem;} /* 10px */
.basis-3-5 {flex-basis: 0.875rem;} /* 14px */
.basis-1-and-2 {flex-basis: 50%;}
.basis-1-and-3 {flex-basis: 33.333333%;}
.basis-2-and-3 {flex-basis: 66.666667%;}
.basis-1-and-4 {flex-basis: 25%;}
.basis-2-and-4 {flex-basis: 50%;}
.basis-3-and-4 {flex-basis: 75%;}
.basis-1-and-5 {flex-basis: 20%;}
.basis-2-and-5 {flex-basis: 40%;}
.basis-3-and-5 {flex-basis: 60%;}
.basis-4-and-5 {flex-basis: 80%;}
.basis-1-and-6 {flex-basis: 16.666667%;}
.basis-2-and-6 {flex-basis: 33.333333%;}
.basis-3-and-6 {flex-basis: 50%;}
.basis-4-and-6 {flex-basis: 66.666667%;}
.basis-5-and-6 {flex-basis: 83.333333%;}
.basis-1-and-12 {flex-basis: 8.333333%;}
.basis-2-and-12 {flex-basis: 16.666667%;}
.basis-3-and-12 {flex-basis: 25%;}
.basis-4-and-12 {flex-basis: 33.333333%;}
.basis-5-and-12 {flex-basis: 41.666667%;}
.basis-6-and-12 {flex-basis: 50%;}
.basis-7-and-12 {flex-basis: 58.333333%;}
.basis-8-and-12 {flex-basis: 66.666667%;}
.basis-9-and-12 {flex-basis: 75%;}
.basis-10-and-12 {flex-basis: 83.333333%;}
.basis-11-and-12 {flex-basis: 91.666667%;}
.basis-full {flex-basis: 100%;}

.items-start	{align-items: flex-start;}
.items-flexend	{align-items: flex-end;}
.items-end	{align-items: end;}
.items-center	{align-items: center;}
.items-baseline	{align-items: baseline;}
.items-stretch	{align-items: stretch;}

.justify-start	{justify-content: flex-start;}
.justify-end	{justify-content: flex-end;}
.justify-center	{justify-content: center;}
.justify-between	{justify-content: space-between;}
.justify-around	{justify-content: space-around;}
.justify-evenly	{justify-content: space-evenly;}

.flex-row	{flex-direction: row;}
.flex-row-reverse	{flex-direction: row-reverse;}
.flex-col	{flex-direction: column;}
.flex-col-reverse	{flex-direction: column-reverse;}


/* LAYOUT */

/* Display */

.block	{display: block;}
.inline-block	{display: inline-block;}
.inline	{display: inline;}
.flex	{display: flex;}
.inline-flex	{display: inline-flex;}
.table	{display: table;}
.inline-table	{display: inline-table;}
.table-caption	{display: table-caption;}
.table-cell	{display: table-cell;}
.table-column	{display: table-column;}
.table-column-group	{display: table-column-group;}
.table-footer-group	{display: table-footer-group;}
.table-header-group	{display: table-header-group;}
.table-row-group	{display: table-row-group;}
.table-row	{display: table-row;}
.flow-root	{display: flow-root;}
.grid	{display: grid;}
.inline-grid	{display: inline-grid;}
.contents	{display: contents;}
.list-item	{display: list-item;}
.hidden	{display: none;}

/* Position */

.static	{ position: static; }
.fixed	{ position: fixed; }
.absolute	{ position: absolute; }
.relative	{ position: relative; }
.sticky	{ position: sticky; }
.float-right { float:right; }
.float-left { float:left; }

/* Top / Right / Bottom / Left */

.top-28 { top: 7rem; /* 112px */}