/* row and column */
.row {
	display: flex;
	flex-wrap: wrap;
	margin-right: -20px;
	margin-left: -20px;
}

[class*="cell-"] {
	padding-left: 20px;
	padding-right: 20px;
	position: relative;
	width: 100%;
}

.no-gutters {
	margin-right: 0;
	margin-left: 0;
}

.no-gutters > [class*="cell-"] {
	padding-right: 0;
	padding-left: 0;
}

/* align item */
.d-flex {
	display: flex;
	flex-wrap: wrap;
}

.flex-nowrap {
	flex-wrap: nowrap;
}

.align-items-center {
	align-items: center;
}

.align-content-center {
	align-content: center;
}

.align-items-end {
	align-items: flex-end;
}

.justify-content-center {
	justify-content: center;
}

.justify-content-end {
	justify-content: flex-end;
}

.justify-content-between {
	justify-content: space-between;
}

.justify-content-around {
	justify-content: space-around;
}

.d-flex img {
	align-self: center;
}

/* column structure */

/* ----- Extra small devices ≤640px ----- */.cell-12 {
	width: 100%;
}

.cell-11 {
	width: 91.66666667%;
}

.cell-10 {
	width: 83.33333333%;
}

.cell-9 {
	width: 75%;
}

.cell-8 {
	width: 66.66666667%;
}

.cell-7 {
	width: 58.33333333%;
}

.cell-6 {
	width: 50%;
}

.cell-5 {
	width: 41.66666667%;
}

.cell-4 {
	width: 33.33333333%;
}

.cell-3 {
	width: 25%;
}

.cell-2 {
	width: 16.66666667%;
}

.cell-1 {
	width: 8.33333333%;
}

/* show and hide cell */
.d-none {
	display: none;
}

.d-block {
	display: block;
}

/* ----- Small devices ≥641px ----- */
@media (min-width:641px) {
	.cell-sm-12 {
		width: 100%;
	}

	.cell-sm-11 {
		width: 91.66666667%;
	}

	.cell-sm-10 {
		width: 83.33333333%;
	}

	.cell-sm-9 {
		width: 75%;
	}

	.cell-sm-8 {
		width: 66.66666667%;
	}

	.cell-sm-7 {
		width: 58.33333333%;
	}

	.cell-sm-6 {
		width: 50%;
	}

	.cell-sm-5 {
		width: 41.66666667%;
	}

	.cell-sm-4 {
		width: 33.33333333%;
	}

	.cell-sm-3 {
		width: 25%;
	}

	.cell-sm-2 {
		width: 16.66666667%;
	}

	.cell-sm-1 {
		width: 8.33333333%;
	}

	/* show and hide cell sm */
	.d-sm-none {
		display: none;
	}

	.d-sm-block {
		display: block;
	}

}

/* ----- Medium devices ≥768px ----- */
@media (min-width:768px) {
	.cell-md-12 {
		width: 100%;
	}

	.cell-md-11 {
		width: 91.66666667%;
	}

	.cell-md-10 {
		width: 83.33333333%;
	}

	.cell-md-9 {
		width: 75%;
	}

	.cell-md-8 {
		width: 66.66666667%;
	}

	.cell-md-7 {
		width: 58.33333333%;
	}

	.cell-md-6 {
		width: 50%;
	}

	.cell-md-5 {
		width: 41.66666667%;
	}

	.cell-md-4 {
		width: 33.33333333%;
	}

	.cell-md-3 {
		width: 25%;
	}

	.cell-md-2 {
		width: 16.66666667%;
	}

	.cell-md-1 {
		width: 8.33333333%;
	}

	/* show and hide cell md */
	.d-md-none {
		display: none;
	}

	.d-md-block {
		display: block;
	}

}

/* ----- Large devices ≥1024px ----- */
@media (min-width:1024px) {
	.cell-lg-12 {
		width: 100%;
	}

	.cell-lg-11 {
		width: 91.66666667%;
	}

	.cell-lg-10 {
		width: 83.33333333%;
	}

	.cell-lg-9 {
		width: 75%;
	}

	.cell-lg-8 {
		width: 66.66666667%;
	}

	.cell-lg-7 {
		width: 58.33333333%;
	}

	.cell-lg-6 {
		width: 50%;
	}

	.cell-lg-5 {
		width: 41.66666667%;
	}

	.cell-lg-4 {
		width: 33.33333333%;
	}

	.cell-lg-3 {
		width: 25%;
	}

	.cell-lg-2 {
		width: 16.66666667%;
	}

	.cell-lg-1 {
		width: 8.33333333%;
	}

	/* show and hide cell lg */
	.d-lg-none {
		display: none;
	}

	.d-lg-block {
		display: block;
	}

}

/* ----- Extra Large devices ≥1200px ----- */
@media (min-width:1200px) {
	.cell-xl-12 {
		width: 100%;
	}

	.cell-xl-11 {
		width: 91.66666667%;
	}

	.cell-xl-10 {
		width: 83.33333333%;
	}

	.cell-xl-9 {
		width: 75%;
	}

	.cell-xl-8 {
		width: 66.66666667%;
	}

	.cell-xl-7 {
		width: 58.33333333%;
	}

	.cell-xl-6 {
		width: 50%;
	}

	.cell-xl-5 {
		width: 41.66666667%;
	}

	.cell-xl-4 {
		width: 33.33333333%;
	}

	.cell-xl-3 {
		width: 25%;
	}

	.cell-xl-2 {
		width: 16.66666667%;
	}

	.cell-xl-1 {
		width: 8.33333333%;
	}

	/* show and hide cell xl */
	.d-xl-none {
		display: none;
	}

	.d-xl-block {
		display: block;
	}

}

/* text alignment */
.text-center {
	text-align: center;
}

.text-right {
	text-align: right;
}

.text-left {
	text-align: left;
}

.text-justify {
	text-align: justify;
}

/*--- cell padding ---*/
.p-0 {
	padding: 0 !important;
}

.pt-0,
.py-0 {
	padding-top: 0;
}

.pb-0,
.py-0 {
	padding-bottom: 0;
}

.pl-0,
.px-0 {
	padding-left: 0;
}

.pr-0,
.px-0 {
	padding-right: 0;
}

/* cell padding 20px */
.p-20 {
	padding: 20px;
}

.pt-20,
.py-20 {
	padding-top: 20px;
}

.pb-20,
.py-20 {
	padding-bottom: 20px;
}

.pl-20,
.px-20 {
	padding-left: 20px;
}

.pr-20,
.px-20 {
	padding-right: 20px;
}

/* cell padding 30px */
.p-30 {
	padding: 30px;
}

.pt-30,
.py-30 {
	padding-top: 30px;
}

.pb-30,
.py-30 {
	padding-bottom: 30px;
}

.pl-30,
.px-30 {
	padding-left: 30px;
}

.pr-30,
.px-30 {
	padding-right: 30px;
}

/* cell padding 40px */
.p-40 {
	padding: 40px;
}

.pt-40,
.py-40 {
	padding-top: 40px;
}

.pb-40,
.py-40 {
	padding-bottom: 40px;
}

.pl-40,
.px-40 {
	padding-left: 40px;
}

.pr-40,
.px-40 {
	padding-right: 40px;
}

/* cell padding 50px */
.p-50 {
	padding: 50px;
}

.pt-50,
.py-50 {
	padding-top: 50px;
}

.pb-50,
.py-50 {
	padding-bottom: 50px;
}

.pl-50,
.px-50 {
	padding-left: 50px;
}

.pr-50,
.px-50 {
	padding-right: 50px;
}

/*--- cell margin ---*/
.m-00 {
	margin: 0 !important;
}

.mt-0,
.my-0 {
	margin-top: 0;
}

.mb-0,
.my-0 {
	margin-bottom: 0;
}

.ml-0,
.mx-0 {
	margin-left: 0;
}

.mr-0,
.mx-0 {
	margin-right: 0;
}

/* cell margin 20px */
.m-20 {
	margin: 20px;
}

.mt-20,
.my-20 {
	margin-top: 20px;
}

.mb-20,
.my-20 {
	margin-bottom: 20px;
}

.ml-20,
.mx-20 {
	margin-left: 20px;
}

.mr-20,
.mx-20 {
	margin-right: 20px;
}

/* cell margin 30px */
.m-30 {
	margin: 30px;
}

.mt-30,
.my-30 {
	margin-top: 30px;
}

.mb-30,
.my-30 {
	margin-bottom: 30px;
}

.ml-30,
.mx-30 {
	margin-left: 30px;
}

.mr-30,
.mx-30 {
	margin-right: 30px;
}

/* cell margin 40px */
.m-40 {
	margin: 40px;
}

.mt-40,
.my-40 {
	margin-top: 40px;
}

.mb-40,
.my-40 {
	margin-bottom: 40px;
}

.ml-40,
.mx-40 {
	margin-left: 40px;
}

.mr-40,
.mx-40 {
	margin-right: 40px;
}

/* cell margin 50px */
.m-50 {
	margin: 50px;
}

.mt-50,
.my-50 {
	margin-top: 50px;
}

.mb-50,
.my-50 {
	margin-bottom: 50px;
}

.ml-50,
.mx-50 {
	margin-left: 50px;
}

.mr-50,
.mx-50 {
	margin-right: 50px;
}

/* wordpress align class */
.alignnone {
	float: none;
	margin: 20px 0;
}

.aligncenter {
	display: block;
	clear: both;
	margin: 20px auto;
}

.alignleft {
	float: left;
	margin: 0 20px 20px 0;
}

.alignright {
	float: right;
	margin: 0 0 60px 20px;
}