/*FLEXBOX*/
.flex {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: -moz-flex;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: center;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}
/**************************************************************************************************/

/*TEXT ALIGN*/
.al-center {
    text-align: center !important;
}

.al-left {
    text-align: left !important;
}

.al-right {
    text-align: right !important;
}

.al-justify {
    text-align: justify !important;
}

/**************************************************************************************************/

/*GAP*/
.gap {
    gap: var(--gap-cards) !important;
}

.gap-5 {
    gap: 5px !important;
}

.gap-10 {
    gap: 10px !important;
}

.gap-15 {
    gap: 15px !important;
}

.gap-20 {
    gap: 20px !important;
}

.gap-25 {
    gap: 25px !important;
}

.gap-30 {
    gap: 30px !important;
}

/**************************************************************************************************/

/*VIEW FLEXBOX*/
.view-flexbox20 {
    width: 20%;
    max-width: 20%;
    flex-grow: 1;
}

.view-flexbox25 {
    width: 25%;
    max-width: 25%;
    flex-grow: 1;
}

.view-flexbox30 {
    width: 30%;
    max-width: 30%;
    flex-grow: 1;
}

.view-flexbox32 {
    width: 32%;
    max-width: 32%;
    flex-grow: 1;
}

.view-flexbox40 {
    width: 40%;
    max-width: 40%;
    flex-grow: 1;
}

.view-flexbox45 {
    width: 45%;
    max-width: 45%;
    flex-grow: 1;
}

.view-flexbox50 {
    width: 50%;
    max-width: 50%;
    flex-grow: 1;
}

.view-flexbox60 {
    width: 60%;
    max-width: 60%;
    flex-grow: 1;
}

.view-flexbox70 {
    width: 70%;
    max-width: 70%;
    flex-grow: 1;
}

.view-flexbox75 {
    width: 75%;
    max-width: 75%;
    flex-grow: 1;
}

.view-flexbox100 {
    width: 100%;
    max-width: 100%;
    flex-grow: 1;
}

/**************************************************************************************************/

/*FLEX BASIS*/
.flex20 {
    flex-basis: 18.4%;
}

.flex25 {
    flex-basis: 23.5%;
}

.flex30 {
    flex-basis: 29%;
}

.flex32 {
    flex-basis: 32%;
}

.flex40 {
    flex-basis: 39%;
}

.flex45 {
    flex-basis: 45%;
}

.flex50 {
    flex-basis: 49%;
    align-items: center;
    padding: 0;
}

.flex60 {
    flex-basis: 59%;
}

.flex70 {
    flex-basis: 69%;
}

.flex75 {
    flex-basis: 74%;
}

.flex100 {
    flex-basis: 100%;
}
/**************************************************************************************************/

/*FLEX DIRECTION*/
.flex-row {
    flex-direction: row !important;
}

.flex-row-reverse {
    flex-direction: row-reverse !important;
}

.flex-column {
    flex-direction: column !important;
}

.flex-column-reverse {
    flex-direction: column-reverse !important;
}
/**************************************************************************************************/

/*FLEX WRAP*/
.flex-wrap {
    flex-wrap: wrap !important;
}

.flex-nowrap {
    flex-wrap: nowrap !important;
}
/**************************************************************************************************/

/*ALIGN CONTENT*/
.align-center {
    align-content: center !important;
}

.align-stretch {
    align-content: stretch !important;
}

.align-start {
    align-content: flex-start !important;
}

.align-end {
    align-content: flex-end !important;
}

.align-space-between {
    align-content: space-between !important;
}
/**************************************************************************************************/

/*JUSTIFY CONTENT*/
.justify-center {
    -webkit-justify-content: center !important;
    justify-content: center !important;
}

.justify-stretch {
    justify-content: stretch !important;
}

.justify-start {
    -webkit-justify-content: flex-start !important;
    justify-content: flex-start !important;
}

.justify-end {
    -webkit-justify-content: flex-end !important;
    justify-content: flex-end !important;
}

.justify-space-between {
    -webkit-justify-content: space-between !important;
    justify-content: space-between !important;
}

.justify-space-evenly {
    -webkit-justify-content: space-evenly !important;
    justify-content: space-evenly !important;
}
/**************************************************************************************************/

/*ALIGN ITEMS*/
.align-items-center {
    align-items: center !important;
}

.align-items-stretch {
    align-items: stretch !important;
}

.align-items-start {
    align-items: flex-start !important;
}

.align-items-end {
    align-items: flex-end !important;
}
/**************************************************************************************************/

@media screen and (max-width: 768px) {
    /*FLEX BASIS*/
    .flex20, .flex25, .flex30, .flex32, .flex40, .flex45,
    .flex50, .flex60, .flex70, .flex75, .flex100 {
        flex-basis: 100%;
    }
}