/*--display--*/
.none-box {
    display: none;
}

.noneflex-box {
    display: none;
}

.noneblock-box {
    display: none;
}

.block-box {
    display: block;
}

.blocknone-box {
    display: block;
}

.flex-box {
    display: flex;
}

.flexnone-box {
    display: flex;
}

/*--wrap--*/
.wrap-content-yes {
    flex-wrap: wrap;
}

.wrap-content-no {
    flex-wrap: nowrap
}


/*--gap--*/
.gap-025 {
    gap: .25rem;
}

.gap-05 {
    gap: .5rem;
}

.gap-75 {
    gap: .75rem;
}

.gap-100 {
    gap: 1rem;
}

.gap-115 {
    gap: 1.15rem;
}

@media screen and (max-width:576px) {
    .flexnone-box {
        display: none;
    }
    .blocknone-box {
        display: none;
    }
    .noneflex-box {
        display: flex;
    }
    .noneblock-box {
        display: block;
    }
}

@media screen and (min-width:576px) {
    .flexnone-box {
        display: none;
    }
    .blocknone-box {
        display: none;
    }
    .noneflex-box {
        display: flex;
    }
    .noneblock-box {
        display: block;
    }
}

@media screen and (min-width:577px) {
    .flexnone-box {
        display: flex;
    }
    .blocknone-box {
        display: block;
    }
    .noneflex-box {
        display: none;
    }
    .noneblock-box {
        display: none;
    }
}


/*--flex-direction--*/
.flexrow {
    flex-direction: row;
}

.flexrow-col {
    flex-direction: row;
}

.flexcol {
    flex-direction: column;
}

.flexcol-row {
    flex-direction: column;
}

@media screen and (max-width:576px) {
    .flexrow-col {
        flex-direction: column;
    }
    .flexcol-row {
        flex-direction: row;
    }
}

@media screen and (min-width:576px) {
    .flexrow-col {
        flex-direction: column;
    }
    .flexcol-row {
        flex-direction: row;
    }
}

@media screen and (min-width:577px) {
    .flexrow-col {
        flex-direction: row;
    }
    .flexcol-row {
        flex-direction: column;
    }
}


/*--justify-content--*/
.jc-start {
    justify-content: flex-start;
}

.jc-end {
    justify-content: flex-end;
}

.jc-center {
    justify-content: center;
}

.jc-around {
    justify-content: space-around;
}

.jc-between {
    justify-content: space-between;
}

.jc-evenly {
    justify-content: space-evenly;
}

.jc-stretch {
    justify-content: stretch;
}


/*--justify-items--*/
.ji-start {
    justify-items: flex-start;
}

.ji-end {
    justify-items: flex-end;
}

.ji-center {
    justify-items: center;
}


/*--align-items--*/
.ai-start {
    align-items: flex-start;
}

.ai-end {
    align-items: flex-end;
}

.ai-center {
    align-items: center;
}


/*--align-content--*/
.ac-start {
    align-content: flex-start;
}

.ac-end {
    align-content: flex-end;
}

.ac-center {
    align-content: center;
}

.ac-around {
    align-content: space-around;
}

.ac-between {
    align-content: space-between;
}

.ac-stretch {
    align-content: stretch;
}

/*--grow--*/
.grow-custom-0 {
    flex-grow: 0;
}

.grow-custom-1 {
    flex-grow: 1;
}

.grow-custom-2 {
    flex-grow: 2;
}

.grow-custom-3 {
    flex-grow: 3;
}

.grow-custom-4 {
    flex-grow: 4;
}

.grow-custom-5 {
    flex-grow: 5;
}


/*--justify-content--*/
.jc-center-left {
    justify-content: center;
}

@media screen and (max-width:576px) {
    .jc-center-left {
        justify-content: start;
    }
}

@media screen and (min-width:576px) {
    .jc-center-left {
        justify-content: start;
    }
}

@media screen and (min-width:577px) {
    .jc-center-left {
        justify-content: center;
    }
}

/*--flex-shrink--*/
.shrink-0 {
    flex-shrink: 0;
}

.shrink-1 {
    flex-shrink: 1;
}

.shrink-2 {
    flex-shrink: 2;
}

.shrink-3 {
    flex-shrink: 3;
}

.shrink-4 {
    flex-shrink: 4;
}

.shrink-5 {
    flex-shrink: 5;
}
