/*******************************
flexbox 2 column
*******************************/

.flex2 {
    display: flex;
    justify-content: space-between;
    flex-wrap:wrap;
}

.flex2::after {
    display: block;
    content:"";
    width: calc(50% - 10px);
}

.flex2-items {
    width: calc(50% - 10px);
    margin-bottom: 20px;
}



/*******************************
flexbox 2 Responsive
*******************************/

@media only screen and (max-width: 991px) {
    .flex2 {
        margin-bottom: 15px;
    }
    .flex2-items {
        width: 100%;
        margin-bottom: 10px;
        text-align: left;
    }
    .flex2-items > p {
        margin-bottom: 5px;
    }
}

/*******************************
flexbox 3 column
*******************************/

.flex3 {
    display: flex;
    justify-content: space-between;
    flex-wrap:wrap;
}

.flex3::after {
    display: block;
    content:"";
    width: calc(33.333333% - 10px);
}

.flex3-items {
    width: calc(33.333333% - 10px);
    margin-bottom: 20px;
    text-align:justify;
}


/*******************************
flexbox 3 Responsive
*******************************/

@media only screen and (max-width: 991px) {
    .flex3 {
        margin-bottom: 15px;
    }
    .flex3-items {
        width: 100%;
        margin-bottom: 10px;
    }
    .flex3-items > p {
        margin-bottom: 5px;
    }
}

/*******************************
flexbox 4 column
*******************************/

.flex4 {
    display: flex;
    justify-content: space-between;
    flex-wrap:wrap;
}

.flex4::after {
    display: block;
    content:"";
    width: calc(25% - 10px);
}

.flex4-items {
    width: calc(25% - 10px);
    margin-bottom: 20px;
    text-align:justify;
}

.flex4 img {
    width: 100%;
}

/*******************************
flexbox 4 Responsive
*******************************/

@media only screen and (max-width: 991px) {
    .flex4 {
        margin-bottom: 15px;
    }
    .flex4-items {
        width: 100%;
        margin-bottom: 10px;
    }
    .flex4-items > p {
        margin-bottom: 20px;
    }
}


/*******************************
flexbox 5 column
*******************************/

.flex5 {
    display: flex;
    justify-content: space-between;
    flex-wrap:wrap;
}

.flex5::after {
    display: block;
    content:"";
    width: calc(18% - 10px);
}

.flex5-items {
    width: calc(18% - 10px);
    margin-bottom: 20px;
}

.flex5 img {
    width: 100%;
}

/*******************************
flexbox 5 Responsive
*******************************/

@media only screen and (max-width: 991px) {
    .flex5 {
        margin-bottom: 15px;
    }
    .flex5-items {
        width: 100%;
        margin-bottom: 10px;
    }
    .flex5-items > p {
        margin-bottom: 5px;
    }
}