@import url(custom.css);

:root {
    --d-flx: flex;
    --row-display: block;
    --col-basis: 100%;
    --col-offset: 1;
}

* {
    box-sizing: border-box;
}

html {
    font-family: var(--sans-serif);
    font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    font-size: 1.2rem;
    margin-bottom: 250px;
}

body {
    margin: 0;
    padding: 0;
}

.device-width {
    width: var(--device-width);
}

.page-width {
    width: var(--full-width);
}

a {
    color: var(--blue);

}

a:hover {
    color: var(--teal);
    text-decoration: none;
}

/*==================================
    Flexbox module Start
------------------------------------
    justify-content - X (parent)
----------------------------------*/
[class*="jistify-"],
[class*="items-"],
[class*="align-"],
[class*="self-"] {
    display: var(--d-flx);
    flex-wrap: var(--flex-wrap);
}

.justify-start {
    justify-content: var(--start);
}

.justify-end {
    justify-content: var(--end);
}

.justify-center {
    justify-content: var(--center);
}

.justify-between {
    justify-content: var(--between);
}

.justify-around {
    justify-content: var(--around);
}

.justify-evenly {
    justify-content: var(--evenly);
}

/*
    align-items - Y (parent)
---------------------------------*/

.items-start {
    align-items: var(--start);
}

.items-center {
    align-items: var(--center);
}

.items-end {
    align-items: var(--end);
}

.items-expand {
    align-items: var(--expand);
}

.items-base {
    align-items: var(--base);
}

/*
    align-content - Y 
---------------------------------*/

.align-start {
    align-content: var(--start);
}

.align-center {
    align-content: var(--center);
}

.align-end {
    align-content: var(--end);
}

.align-around {
    align-content: var(--around);
}

.align-between {
    align-content: var(--between);
}

.align-expand {
    align-content: var(--expand);
}

/*
    align-self - Y (both)
---------------------------------*/

.self-auto {
    align-self: var(--yep);
}

.self-start {
    align-self: var(--start);
}

.self-center {
    align-self: var(--center);
}

.self-end {
    align-self: var(--end);
}

/*
    Order
---------------------------------*/
.order-1 {
    order: 1;
}
.order-2 {
    order: 2;
}
.order-3 {
    order: 3;
}
.order-4 {
    order: 4;
}
.order-5 {
    order: 5;
}
.order-6 {
    order: 6;
}
.order-7 {
    order: 7;
}
.order-8 {
    order: 8;
}
.order-9 {
    order: 9;
}
.order-10 {
    order: 10;
}
.order-11 {
    order: 11;
}
.order-12 {
    order: 12;
}

/*
    Flexbox module End
=================================*/
.copy a {
    color: var(--txt-primary);
}

.col-1,
.col-2,
.col-3,
.col-4,
.col-5,
.col-6,
.col-7,
.col-8,
.col-9,
.col-10,
.col-11,
.col-12,
.col {
    padding: 15px;
    margin: 5px 0;
}


@media screen and (min-width: 922px) {
    :root {
        --row-display: flex;
    }

    .row {
        flex-flow: var(--row-wrap);
    }
}

@media (max-width: 922px) {
    .wrap {
        height: var(--sizeY, 100%);
    }
}

.col-1 {
    --col-basis: 8.33%;
}

.col-2 {
    --col-basis: 16.66%;
}

.col-3 {
    --col-basis: 25%;
}

.col-4 {
    --col-basis: 33.33%;
}

.col-5 {
    --col-basis: 41.66%;
}

.col-6 {
    --col-basis: 50%;
}

.col-7 {
    --col-basis: 58.33%;
}

.col-8 {
    --col-basis: 66.66%;
}

.col-9 {
    --col-basis: 75%;
}

.col-10 {
    --col-basis: 83.33%;
}

.col-11 {
    --col-basis: 91.66%;
}

.col-12 {
    --col-basis: 100%;
}

.col-1-push {
    --col-offset: 8.33%;
    margin-left: var(--col-offset);
}

.col-2-push {
    --col-offset: 16.66%;
    margin-left: var(--col-offset);
}

.col-3-push {
    --col-offset: 25%;
    margin-left: var(--col-offset);
}

.col-4-push {
    --col-offset: 33.33%;
    margin-left: var(--col-offset);
}

.col-5-push {
    --col-offset: 41.66%;
    margin-left: var(--col-offset);
}

.col-6-push {
    --col-offset: 50%;
    margin-left: var(--col-offset);
}

.col-7-push {
    --col-offset: 58.33%;
    margin-left: var(--col-offset);
}

.col-8-push {
    --col-offset: 66.66%;
    margin-left: var(--col-offset);
}

.col-9-push {
    --col-offset: 75%;
    margin-left: var(--col-offset);
}

.col-10-push {
    --col-offset: 83.33%;
    margin-left: var(--col-offset);
}

.col-11-push {
    --col-offset: 91.66%;
    margin-left: var(--col-offset);
}

.col-12-push {
    --col-offset: 100%;
    margin-left: var(--col-offset);
}

.col-grow-1 {
    flex-grow: 1;
}

.col-grow-2 {
    flex-grow: 2;
}

.col-grow-3 {
    flex-grow: 3;
}

.col-grow-4 {
    flex-grow: 4;
}

.col-grow-5 {
    flex-grow: 5;
}

.col-grow-6 {
    flex-grow: 6;
}

.col-grow-7 {
    flex-grow: 7;
}

.col-grow-8 {
    flex-grow: 8;
}

.col-grow-9 {
    flex-grow: 9;
}

.col-grow-10 {
    flex-grow: 10;
}

.col-grow-11 {
    flex-grow: 11;
}

.flex-shrink-1 {
    flex-shrink: 1;
}

.flex-shrink-2 {
    flex-shrink: 2;
}

.flex-shrink-3 {
    flex-shrink: 3;
}

.flex-shrink-4 {
    flex-shrink: 4;
}

.flex-shrink-5 {
    flex-shrink: 5;
}

.flex-shrink-6 {
    flex-shrink: 6;
}

/* Logic fold */
.row {
    display: var(--row-display);
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    flex-flow: var(--row-nowrap);
}

.w25 {
    width: 25% !important;
}

.w50 {
    width: 50% !important;
}

.w75 {
    width: 75% !important;
}

.w100 {
    width: 100% !important;
}

.mw100 {
    min-width: 100% !important;
}

.col-1,
.col-2,
.col-3,
.col-4,
.col-5,
.col-6,
.col-7,
.col-8,
.col-9,
.col-10,
.col-11,
.col-12 {
    -webkit-box-flex: 0;
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: var(--col-basis);
}

.col {
    flex-basis: var(--col-basis);
    flex: 1;
}