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

[class*="cell-"] {
	padding-left: 15px;
	padding-right: 15px;
	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: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	    flex-wrap: wrap;
}

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

.align-items-center {
	-webkit-box-align: center;
	   -ms-flex-align: center;
	      align-items: center;
}

.align-content-center {
	-ms-flex-line-pack: center;
	     align-content: center;
}

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

.justify-content-center {
	-webkit-box-pack: center;
	   -ms-flex-pack: center;
	 justify-content: center;
}

.justify-content-end {
	-webkit-box-pack: end;
	 justify-content: flex-end;
	   -ms-flex-pack: end;
}

.justify-content-between {
	-webkit-box-pack: justify;
	 justify-content: space-between;
	   -ms-flex-pack: justify;
}

.justify-content-around {
	justify-content: space-around;
	  -ms-flex-pack: distribute;
}

.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 */
.cell-none {
	display: none;
}

.cell-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 */
	.cell-sm-none {
		display: none;
	}

	.cell-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 */
	.cell-md-none {
		display: none;
	}

	.cell-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 */
	.cell-lg-none {
		display: none;
	}

	.cell-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 */
	.cell-xl-none {
		display: none;
	}

	.cell-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 20px 20px;
}