/* Flexbox & Layout Utilities (Responsive) */

/* Base Flex */
.u-flex, .flex { display: flex; }

/* Breakpoint S (Default) */
.u-flex-s-horizontal, .flex-s-horizontal { flex-direction: row; }
.u-flex-s-horizontal-reverse, .flex-s-horizontal-reverse { flex-direction: row-reverse; }
.u-flex-s-vertical, .flex-s-vertical { flex-direction: column; }
.u-flex-s-vertical-reverse, .flex-s-vertical-reverse { flex-direction: column-reverse; }

.u-flex-s-nowrap, .flex-s-nowrap { flex-wrap: nowrap; }
.u-flex-s-wrap, .flex-s-wrap { flex-wrap: wrap; }
.u-flex-s-wrap-reverse, .flex-s-wrap-reverse { flex-wrap: wrap-reverse; }

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

.u-align-items-s-stretch, .align-items-s-stretch { align-items: stretch; }
.u-align-items-s-flex-start, .align-items-s-flex-start { align-items: flex-start; }
.u-align-items-s-flex-end, .align-items-s-flex-end { align-items: flex-end; }
.u-align-items-s-center, .align-items-s-center { align-items: center; }
.u-align-items-s-baseline, .align-items-s-baseline { align-items: baseline; }

.u-align-content-s-stretch, .align-content-s-stretch { align-content: stretch; }
.u-align-content-s-flex-start, .align-content-s-flex-start { align-content: flex-start; }
.u-align-content-s-flex-end, .align-content-s-flex-end { align-content: flex-end; }
.u-align-content-s-center, .align-content-s-center { align-content: center; }
.u-align-content-s-space-between, .align-content-s-space-between { align-content: space-between; }
.u-align-content-s-space-around, .align-content-s-space-around { align-content: space-around; }

/* Width S */
.u-w-s-0, .w-s-0 { width: 0%; display: none; }
.u-w-s-5, .w-s-5 { width: 5%; }
.u-w-s-10, .w-s-10 { width: 10%; }
.u-w-s-11, .w-s-11 { width: 11.11%; }
.u-w-s-12, .w-s-12 { width: 12.5%; }
.u-w-s-14, .w-s-14 { width: 14.28%; }
.u-w-s-16, .w-s-16 { width: 16.66%; }
.u-w-s-15, .w-s-15 { width: 15%; }
.u-w-s-20, .w-s-20 { width: 20%; }
.u-w-s-25, .w-s-25 { width: 25%; }
.u-w-s-30, .w-s-30 { width: 30%; }
.u-w-s-33, .w-s-33 { width: 33.333%; }
.u-w-s-35, .w-s-35 { width: 35%; }
.u-w-s-40, .w-s-40 { width: 40%; }
.u-w-s-45, .w-s-45 { width: 45%; }
.u-w-s-50, .w-s-50 { width: 50%; }
.u-w-s-55, .w-s-55 { width: 55%; }
.u-w-s-60, .w-s-60 { width: 60%; }
.u-w-s-65, .w-s-65 { width: 65%; }
.u-w-s-70, .w-s-70 { width: 70%; }
.u-w-s-75, .w-s-75 { width: 75%; }
.u-w-s-80, .w-s-80 { width: 80%; }
.u-w-s-85, .w-s-85 { width: 85%; }
.u-w-s-90, .w-s-90 { width: 90%; }
.u-w-s-95, .w-s-95 { width: 95%; }
.u-w-s-100, .w-s-100 { width: 100%; }

/* Order S */
.u-o-s-1, .o-s-1 { order: 1; }
.u-o-s-2, .o-s-2 { order: 2; }
.u-o-s-3, .o-s-3 { order: 3; }
.u-o-s-4, .o-s-4 { order: 4; }
.u-o-s-5, .o-s-5 { order: 5; }
.u-o-s-6, .o-s-6 { order: 6; }
.u-o-s-7, .o-s-7 { order: 7; }
.u-o-s-8, .o-s-8 { order: 8; }
.u-o-s-9, .o-s-9 { order: 9; }
.u-o-s-10, .o-s-10 { order: 10; }

/* Visibility S */
.u-v-s-true, .v-s-true { display: flex; }
.u-v-s-false, .v-s-false { display: none; }

/* Text Align S */
.u-text-s-left { text-align: left; }
.u-text-s-center { text-align: center; }
.u-text-s-right { text-align: right; }

/* Padding S */
.u-p-s-2, .p-s-2 { padding: 2px; }
.u-p-s-4, .p-s-4 { padding: 4px; }
.u-p-s-6, .p-s-6 { padding: 6px; }
.u-p-s-8, .p-s-8 { padding: 8px; }
.u-p-s-10, .p-s-10 { padding: 10px; }
.u-p-s-12, .p-s-12 { padding: 12px; }
.u-p-s-14, .p-s-14 { padding: 14px; }
.u-p-s-16, .p-s-16 { padding: 16px; }
.u-p-s-18, .p-s-18 { padding: 18px; }
.u-p-s-20, .p-s-20 { padding: 20px; }

/* Margin S */
.u-m-s-2, .m-s-2 { margin: 2px; }
.u-m-s-4, .m-s-4 { margin: 4px; }
.u-m-s-6, .m-s-6 { margin: 6px; }
.u-m-s-8, .m-s-8 { margin: 8px; }
.u-m-s-10, .m-s-10 { margin: 10px; }
.u-m-s-12, .m-s-12 { margin: 12px; }
.u-m-s-14, .m-s-14 { margin: 14px; }
.u-m-s-16, .m-s-16 { margin: 16px; }
.u-m-s-18, .m-s-18 { margin: 18px; }
.u-m-s-20, .m-s-20 { margin: 20px; }

/* Tablet (M) - 600px+ */
@media (min-width: 600px) {
    .u-flex-m-horizontal, .flex-m-horizontal { flex-direction: row; }
    .u-flex-m-horizontal-reverse, .flex-m-horizontal-reverse { flex-direction: row-reverse; }
    .u-flex-m-vertical, .flex-m-vertical { flex-direction: column; }
    .u-flex-m-vertical-reverse, .flex-m-vertical-reverse { flex-direction: column-reverse; }

    .u-flex-m-nowrap, .flex-m-nowrap { flex-wrap: nowrap; }
    .u-flex-m-wrap, .flex-m-wrap { flex-wrap: wrap; }
    .u-flex-m-wrap-reverse, .flex-m-wrap-reverse { flex-wrap: wrap-reverse; }

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

    .u-align-items-m-stretch, .align-items-m-stretch { align-items: stretch; }
    .u-align-items-m-flex-start, .align-items-m-flex-start { align-items: flex-start; }
    .u-align-items-m-flex-end, .align-items-m-flex-end { align-items: flex-end; }
    .u-align-items-m-center, .align-items-m-center { align-items: center; }
    .u-align-items-m-baseline, .align-items-m-baseline { align-items: baseline; }

    .u-align-content-m-stretch, .align-content-m-stretch { align-content: stretch; }
    .u-align-content-m-flex-start, .align-content-m-flex-start { align-content: flex-start; }
    .u-align-content-m-flex-end, .align-content-m-flex-end { align-content: flex-end; }
    .u-align-content-m-center, .align-content-m-center { align-content: center; }
    .u-align-content-m-space-between, .align-content-m-space-between { align-content: space-between; }
    .u-align-content-m-space-around, .align-content-m-space-around { align-content: space-around; }

    .u-w-m-0, .w-m-0 { width: 0%; display: none; }
    .u-w-m-5, .w-m-5 { width: 5%; }
    .u-w-m-10, .w-m-10 { width: 10%; }
    .u-w-m-11, .w-m-11 { width: 11.11%; }
    .u-w-m-12, .w-m-12 { width: 12.5%; }
    .u-w-m-14, .w-m-14 { width: 14.28%; }
    .u-w-m-16, .w-m-16 { width: 16.66%; }
    .u-w-m-15, .w-m-15 { width: 15%; }
    .u-w-m-20, .w-m-20 { width: 20%; }
    .u-w-m-25, .w-m-25 { width: 25%; }
    .u-w-m-30, .w-m-30 { width: 30%; }
    .u-w-m-33, .w-m-33 { width: 33.333%; }
    .u-w-m-35, .w-m-35 { width: 35%; }
    .u-w-m-40, .w-m-40 { width: 40%; }
    .u-w-m-45, .w-m-45 { width: 45%; }
    .u-w-m-50, .w-m-50 { width: 50%; }
    .u-w-m-55, .w-m-55 { width: 55%; }
    .u-w-m-60, .w-m-60 { width: 60%; }
    .u-w-m-65, .w-m-65 { width: 65%; }
    .u-w-m-70, .w-m-70 { width: 70%; }
    .u-w-m-75, .w-m-75 { width: 75%; }
    .u-w-m-80, .w-m-80 { width: 80%; }
    .u-w-m-85, .w-m-85 { width: 85%; }
    .u-w-m-90, .w-m-90 { width: 90%; }
    .u-w-m-95, .w-m-95 { width: 95%; }
    .u-w-m-100, .w-m-100 { width: 100%; }

    .u-o-m-1, .o-m-1 { order: 1; }
    .u-o-m-2, .o-m-2 { order: 2; }
    .u-o-m-3, .o-m-3 { order: 3; }
    .u-o-m-4, .o-m-4 { order: 4; }
    .u-o-m-5, .o-m-5 { order: 5; }
    .u-o-m-6, .o-m-6 { order: 6; }
    .u-o-m-7, .o-m-7 { order: 7; }
    .u-o-m-8, .o-m-8 { order: 8; }
    .u-o-m-9, .o-m-9 { order: 9; }
    .u-o-m-10, .o-m-10 { order: 10; }

    .u-v-m-true, .v-m-true { display: flex; }
    .u-v-m-false, .v-m-false { display: none; }

    /* Text Align M */
    .u-text-m-left { text-align: left; }
    .u-text-m-center { text-align: center; }
    .u-text-m-right { text-align: right; }

    .u-p-m-2, .p-m-2 { padding: 2px; }
    .u-p-m-4, .p-m-4 { padding: 4px; }
    .u-p-m-6, .p-m-6 { padding: 6px; }
    .u-p-m-8, .p-m-8 { padding: 8px; }
    .u-p-m-10, .p-m-10 { padding: 10px; }
    .u-p-m-12, .p-m-12 { padding: 12px; }
    .u-p-m-14, .p-m-14 { padding: 14px; }
    .u-p-m-16, .p-m-16 { padding: 16px; }
    .u-p-m-18, .p-m-18 { padding: 18px; }
    .u-p-m-20, .p-m-20 { padding: 20px; }

    /* Margin M */
    .u-m-m-2, .m-m-2 { margin: 2px; }
    .u-m-m-4, .m-m-4 { margin: 4px; }
    .u-m-m-6, .m-m-6 { margin: 6px; }
    .u-m-m-8, .m-m-8 { margin: 8px; }
    .u-m-m-10, .m-m-10 { margin: 10px; }
    .u-m-m-12, .m-m-12 { margin: 12px; }
    .u-m-m-14, .m-m-14 { margin: 14px; }
    .u-m-m-16, .m-m-16 { margin: 16px; }
    .u-m-m-18, .m-m-18 { margin: 18px; }
    .u-m-m-20, .m-m-20 { margin: 20px; }
}

/* Laptop (L) - 1024px+ */
@media (min-width: 1024px) {
    .u-flex-l-horizontal, .flex-l-horizontal { flex-direction: row; }
    .u-flex-l-horizontal-reverse, .flex-l-horizontal-reverse { flex-direction: row-reverse; }
    .u-flex-l-vertical, .flex-l-vertical { flex-direction: column; }
    .u-flex-l-vertical-reverse, .flex-l-vertical-reverse { flex-direction: column-reverse; }

    .u-flex-l-nowrap, .flex-l-nowrap { flex-wrap: nowrap; }
    .u-flex-l-wrap, .flex-l-wrap { flex-wrap: wrap; }
    .u-flex-l-wrap-reverse, .flex-l-wrap-reverse { flex-wrap: wrap-reverse; }

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

    .u-align-items-l-stretch, .align-items-l-stretch { align-items: stretch; }
    .u-align-items-l-flex-start, .align-items-l-flex-start { align-items: flex-start; }
    .u-align-items-l-flex-end, .align-items-l-flex-end { align-items: flex-end; }
    .u-align-items-l-center, .align-items-l-center { align-items: center; }
    .u-align-items-l-baseline, .align-items-l-baseline { align-items: baseline; }

    .u-align-content-l-stretch, .align-content-l-stretch { align-content: stretch; }
    .u-align-content-l-flex-start, .align-content-l-flex-start { align-content: flex-start; }
    .u-align-content-l-flex-end, .align-content-l-flex-end { align-content: flex-end; }
    .u-align-content-l-center, .align-content-l-center { align-content: center; }
    .u-align-content-l-space-between, .align-content-l-space-between { align-content: space-between; }
    .u-align-content-l-space-around, .align-content-l-space-around { align-content: space-around; }

    .u-w-l-0, .w-l-0 { width: 0%; display: none; }
    .u-w-l-5, .w-l-5 { width: 5%; }
    .u-w-l-10, .w-l-10 { width: 10%; }
    .u-w-l-11, .w-l-11 { width: 11.11%; }
    .u-w-l-12, .w-l-12 { width: 12.5%; }
    .u-w-l-14, .w-l-14 { width: 14.28%; }
    .u-w-l-16, .w-l-16 { width: 16.66%; }
    .u-w-l-15, .w-l-15 { width: 15%; }
    .u-w-l-20, .w-l-20 { width: 20%; }
    .u-w-l-25, .w-l-25 { width: 25%; }
    .u-w-l-30, .w-l-30 { width: 30%; }
    .u-w-l-33, .w-l-33 { width: 33.333%; }
    .u-w-l-35, .w-l-35 { width: 35%; }
    .u-w-l-40, .w-l-40 { width: 40%; }
    .u-w-l-45, .w-l-45 { width: 45%; }
    .u-w-l-50, .w-l-50 { width: 50%; }
    .u-w-l-55, .w-l-55 { width: 55%; }
    .u-w-l-60, .w-l-60 { width: 60%; }
    .u-w-l-65, .w-l-65 { width: 65%; }
    .u-w-l-70, .w-l-70 { width: 70%; }
    .u-w-l-75, .w-l-75 { width: 75%; }
    .u-w-l-80, .w-l-80 { width: 80%; }
    .u-w-l-85, .w-l-85 { width: 85%; }
    .u-w-l-90, .w-l-90 { width: 90%; }
    .u-w-l-95, .w-l-95 { width: 95%; }
    .u-w-l-100, .w-l-100 { width: 100%; }

    .u-o-l-1, .o-l-1 { order: 1; }
    .u-o-l-2, .o-l-2 { order: 2; }
    .u-o-l-3, .o-l-3 { order: 3; }
    .u-o-l-4, .o-l-4 { order: 4; }
    .u-o-l-5, .o-l-5 { order: 5; }
    .u-o-l-6, .o-l-6 { order: 6; }
    .u-o-l-7, .o-l-7 { order: 7; }
    .u-o-l-8, .o-l-8 { order: 8; }
    .u-o-l-9, .o-l-9 { order: 9; }
    .u-o-l-10, .o-l-10 { order: 10; }

    .u-v-l-true, .v-l-true { display: flex; }
    .u-v-l-false, .v-l-false { display: none; }

    /* Text Align L */
    .u-text-l-left { text-align: left; }
    .u-text-l-center { text-align: center; }
    .u-text-l-right { text-align: right; }

    .u-p-l-2, .p-l-2 { padding: 2px; }
    .u-p-l-4, .p-l-4 { padding: 4px; }
    .u-p-l-6, .p-l-6 { padding: 6px; }
    .u-p-l-8, .p-l-8 { padding: 8px; }
    .u-p-l-10, .p-l-10 { padding: 10px; }
    .u-p-l-12, .p-l-12 { padding: 12px; }
    .u-p-l-14, .p-l-14 { padding: 14px; }
    .u-p-l-16, .p-l-16 { padding: 16px; }
    .u-p-l-18, .p-l-18 { padding: 18px; }
    .u-p-l-20, .p-l-20 { padding: 20px; }

    /* Margin L */
    .u-m-l-2, .m-l-2 { margin: 2px; }
    .u-m-l-4, .m-l-4 { margin: 4px; }
    .u-m-l-6, .m-l-6 { margin: 6px; }
    .u-m-l-8, .m-l-8 { margin: 8px; }
    .u-m-l-10, .m-l-10 { margin: 10px; }
    .u-m-l-12, .m-l-12 { margin: 12px; }
    .u-m-l-14, .m-l-14 { margin: 14px; }
    .u-m-l-16, .m-l-16 { margin: 16px; }
    .u-m-l-18, .m-l-18 { margin: 18px; }
    .u-m-l-20, .m-l-20 { margin: 20px; }
}

/* Desktop (XL) - 1440px+ */
@media (min-width: 1440px) {
    .u-flex-xl-horizontal, .flex-xl-horizontal { flex-direction: row; }
    .u-flex-xl-horizontal-reverse, .flex-xl-horizontal-reverse { flex-direction: row-reverse; }
    .u-flex-xl-vertical, .flex-xl-vertical { flex-direction: column; }
    .u-flex-xl-vertical-reverse, .flex-xl-vertical-reverse { flex-direction: column-reverse; }

    .u-flex-xl-nowrap, .flex-xl-nowrap { flex-wrap: nowrap; }
    .u-flex-xl-wrap, .flex-xl-wrap { flex-wrap: wrap; }
    .u-flex-xl-wrap-reverse, .flex-xl-wrap-reverse { flex-wrap: wrap-reverse; }

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

    .u-align-items-xl-stretch, .align-items-xl-stretch { align-items: stretch; }
    .u-align-items-xl-flex-start, .align-items-xl-flex-start { align-items: flex-start; }
    .u-align-items-xl-flex-end, .align-items-xl-flex-end { align-items: flex-end; }
    .u-align-items-xl-center, .align-items-xl-center { align-items: center; }
    .u-align-items-xl-baseline, .align-items-xl-baseline { align-items: baseline; }

    .u-align-content-xl-stretch, .align-content-xl-stretch { align-content: stretch; }
    .u-align-content-xl-flex-start, .align-content-xl-flex-start { align-content: flex-start; }
    .u-align-content-xl-flex-end, .align-content-xl-flex-end { align-content: flex-end; }
    .u-align-content-xl-center, .align-content-xl-center { align-content: center; }
    .u-align-content-xl-space-between, .align-content-xl-space-between { align-content: space-between; }
    .u-align-content-xl-space-around, .align-content-xl-space-around { align-content: space-around; }

    .u-w-xl-0, .w-xl-0 { width: 0%; display: none; }
    .u-w-xl-5, .w-xl-5 { width: 5%; }
    .u-w-xl-10, .w-xl-10 { width: 10%; }
    .u-w-xl-11, .w-xl-11 { width: 11.11%; }
    .u-w-xl-12, .w-xl-12 { width: 12.5%; }
    .u-w-xl-14, .w-xl-14 { width: 14.28%; }
    .u-w-xl-16, .w-xl-16 { width: 16.66%; }
    .u-w-xl-15, .w-xl-15 { width: 15%; }
    .u-w-xl-20, .w-xl-20 { width: 20%; }
    .u-w-xl-25, .w-xl-25 { width: 25%; }
    .u-w-xl-30, .w-xl-30 { width: 30%; }
    .u-w-xl-33, .w-xl-33 { width: 33.333%; }
    .u-w-xl-35, .w-xl-35 { width: 35%; }
    .u-w-xl-40, .w-xl-40 { width: 40%; }
    .u-w-xl-45, .w-xl-45 { width: 45%; }
    .u-w-xl-50, .w-xl-50 { width: 50%; }
    .u-w-xl-55, .w-xl-55 { width: 55%; }
    .u-w-xl-60, .w-xl-60 { width: 60%; }
    .u-w-xl-65, .w-xl-65 { width: 65%; }
    .u-w-xl-70, .w-xl-70 { width: 70%; }
    .u-w-xl-75, .w-xl-75 { width: 75%; }
    .u-w-xl-80, .w-xl-80 { width: 80%; }
    .u-w-xl-85, .w-xl-85 { width: 85%; }
    .u-w-xl-90, .w-xl-90 { width: 90%; }
    .u-w-xl-95, .w-xl-95 { width: 95%; }
    .u-w-xl-100, .w-xl-100 { width: 100%; }

    .u-o-xl-1, .o-xl-1 { order: 1; }
    .u-o-xl-2, .o-xl-2 { order: 2; }
    .u-o-xl-3, .o-xl-3 { order: 3; }
    .u-o-xl-4, .o-xl-4 { order: 4; }
    .u-o-xl-5, .o-xl-5 { order: 5; }
    .u-o-xl-6, .o-xl-6 { order: 6; }
    .u-o-xl-7, .o-xl-7 { order: 7; }
    .u-o-xl-8, .o-xl-8 { order: 8; }
    .u-o-xl-9, .o-xl-9 { order: 9; }
    .u-o-xl-10, .o-xl-10 { order: 10; }

    .u-v-xl-true, .v-xl-true { display: flex; }
    .u-v-xl-false, .v-xl-false { display: none; }

    /* Text Align XL */
    .u-text-xl-left { text-align: left; }
    .u-text-xl-center { text-align: center; }
    .u-text-xl-right { text-align: right; }

    .u-p-xl-2, .p-xl-2 { padding: 2px; }
    .u-p-xl-4, .p-xl-4 { padding: 4px; }
    .u-p-xl-6, .p-xl-6 { padding: 6px; }
    .u-p-xl-8, .p-xl-8 { padding: 8px; }
    .u-p-xl-10, .p-xl-10 { padding: 10px; }
    .u-p-xl-12, .p-xl-12 { padding: 12px; }
    .u-p-xl-14, .p-xl-14 { padding: 14px; }
    .u-p-xl-16, .p-xl-16 { padding: 16px; }
    .u-p-xl-18, .p-xl-18 { padding: 18px; }
    .u-p-xl-20, .p-xl-20 { padding: 20px; }

    /* Margin XL */
    .u-m-xl-2, .m-xl-2 { margin: 2px; }
    .u-m-xl-4, .m-xl-4 { margin: 4px; }
    .u-m-xl-6, .m-xl-6 { margin: 6px; }
    .u-m-xl-8, .m-xl-8 { margin: 8px; }
    .u-m-xl-10, .m-xl-10 { margin: 10px; }
    .u-m-xl-12, .m-xl-12 { margin: 12px; }
    .u-m-xl-14, .m-xl-14 { margin: 14px; }
    .u-m-xl-16, .m-xl-16 { margin: 16px; }
    .u-m-xl-18, .m-xl-18 { margin: 18px; }
    .u-m-xl-20, .m-xl-20 { margin: 20px; }
}