/* ---------------------------------------------
FLEX SYSTEM
-----------------------------------------------*/

.container__row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
	-ms-flex-wrap: wrap;
	    flex-wrap: wrap;
}

.container__no-wrap {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.j__center {-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;}
.j__sp-bet {-webkit-box-pack: justify;-ms-flex-pack: justify;justify-content: space-between;}
.j__start {-webkit-box-pack: start;-ms-flex-pack: start;justify-content: flex-start;}
.j__end {-webkit-box-pack: end;-ms-flex-pack: end;justify-content: end;}

.a__center {-webkit-box-align: center;-ms-flex-align: center;align-items: center;}
.a__self-str {-ms-flex-item-align: stretch;-ms-grid-row-align: stretch;align-self: stretch;}
.a__self-end {-ms-flex-item-align: end;-ms-grid-row-align: end;align-self: end;}
.a__self-start {-ms-flex-item-align: start;-ms-grid-row-align: start;align-self: start;}

.flex__col {-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;}

.col-10{width: 10%;}
.col-20{width: 20%;}
.col-25{width: 25%;}
.col-30{width: 30%;}
.col-33{width: 33.3%;}
.col-40{width: 40%;}
.col-48{width: 48%;}
.col-50{width: 50%;}
.col-60{width: 60%;}
.col-70{width: 70%;}
.col-80{width: 80%;}
.col-90{width: 90%;}
.col-100{width: 100%;}

@media (max-width:768px) {
    [class*='col-'] {width: 100%;}
}


.inner {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-flex: 1;
        -ms-flex: 1 1 auto;
            flex: 1 1 auto;
}

.gap__1 {
    gap: 1rem;
}

.gap__2 {
    gap: 2rem;
}