/* === Grid & Layout === */
.container {
	margin-right: auto;
	margin-left: auto;
	max-width: 1190px;
}

.container-lg {
	margin-right: auto;
	margin-left: auto;
	max-width: 1295px
}

.container-fluid {
	width: 100%;
}

.container-fluid-right {
	margin-right: 0;
	/* 1/2 of container width */
	margin-left: calc(50% - 595px);
	max-width: 100%;
}

.container-fluid-left {
	/* 1/2 of container width */
	margin-right: calc(50% - 595px);
	margin-left: 0;
	max-width: 100%;
}

.row {
	display: grid;
	width: 100%;
	grid-template-columns: repeat(12, 1fr);
}

.row-vertical {
	display: grid;
	width: 100%;
	grid-template-rows: repeat(12, 1fr);
}

.row .col,
.row-vertical .col {
	grid-column: span 12;
}

.col-6,
.row.col-6 > * {
	grid-column: span 6;
}

.col-4,
.row.col-4 > * {
	grid-column: span 4;
}

.col-3,
.row.col-3 > * {
	grid-column: span 3;
}

.col-2,
.row.col-2 > * {
	grid-column: span 2;
}

@media (max-width: 1440px) and (min-width: 769px) {

	.col-md-1,
	.row.col-md-1 > * {
		grid-column: span 12 !important;
	}

	.col-md-6,
	.row.col-md-6 > * {
		grid-column: span 6 !important;
	}
}

@media (max-width: 768px) {

	.col-sm-1,
	.row.col-sm-1 > * {
		grid-column: span 12 !important;
	}

	.col-sm-6,
	.row.col-sm-6 > * {
		grid-column: span 6 !important;
	}
}

.gutter-15 {
	grid-gap: 15px;
}

.gutter-20 {
	grid-gap: 20px;
}

.gutterx-20 {
	grid-gap: 0 20px;
}

.gutter-30 {
	grid-gap: 20px;
}

.gutter-40 {
	grid-gap: 40px;
}

.gutterx-40 {
	grid-gap: 0 40px;
}

.gutterx-50 {
	grid-gap: 0 50px;
}

.gutter-60 {
	grid-gap: 60px;
}

.gutter-xl {
	grid-gap: 60px;
}

@media (max-width: 768px) {
	.guttery-sm-10 {
		grid-gap: 10px 0 !important
	}

	.guttery-sm-20 {
		grid-gap: 20px 0 !important
	}

	.guttery-sm-40 {
		grid-gap: 40px 0 !important
	}
	
		.guttery-sm-50 {
		grid-gap: 50px 0 !important
	}
}

/* === Order === */
.order-sm-1,
.order-sm-2,
.order-sm-3,
.order-sm-4,
.order-sm-5,
.order-sm-6 {
	order: inherit;
}

@media (max-width: 768px) {
	.order-sm-1 {
		order: 1 !important;
	}

	.order-sm-2 {
		order: 2 !important;
	}

	.order-sm-3 {
		order: 3 !important;
	}

	.order-sm-4 {
		order: 4 !important;
	}

	.order-sm-5 {
		order: 5 !important;
	}

	.order-sm-6 {
		order: 6 !important;
	}
}

/* === Justify & Align === */
.justify-content-start {
	justify-content: start !important;
}

.justify-content-end {
	justify-content: end !important;
}

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

.justify-content-stretch {
	justify-content: stretch !important;
}

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

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

.justify-content-evenly {
	justify-content: space-evenly !important;
}

.justify-items-start {
	justify-items: start !important;
}

.justify-items-end {
	justify-items: end !important;
}

.justify-items-center {
	justify-items: center !important;
}

.justify-items-stretch {
	justify-items: stretch !important;
}

.justify-self-start {
	justify-self: start !important;
}

.justify-self-end {
	justify-self: end !important;
}

.justify-self-center {
	justify-self: center !important;
}

.justify-self-stretch {
	justify-self: stretch !important;
}

/** Grid Align **/
.align-content-start {
	align-content: start !important;
}

.align-content-end {
	align-content: end !important;
}

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

.align-content-stretch {
	align-content: stretch !important;
}

.align-content-between {
	align-content: space-between !important;
}

.align-content-around {
	align-content: space-around !important;
}

.align-content-evenly {
	align-content: space-evenly !important;
}

.align-items-start {
	align-items: start !important;
}

.align-items-end {
	align-items: end !important;
}

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

.align-items-stretch {
	align-items: stretch !important;
}

.align-self-start {
	align-self: start !important;
}

.align-self-end {
	align-self: end !important;
}

.align-self-center {
	align-self: center !important;
}

.align-self-stretch {
	align-self: stretch !important;
}

@media (max-width: 768px) {

	.row.gutter-sm,
	.row.gutter-md,
	.row.gutter-lg,
	.row.gutter-xl {
		grid-gap: 20px;
	}
}

/* === Margin & Padding === */
/* -- Padding -- */
.p-0 {
	padding: 0 !important;
}

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

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

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

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

.p-20 {
	padding: 20px !important;
}

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

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

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

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

.p-30 {
	padding: 30px !important;
}

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

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

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

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

.p-40 {
	padding: 40px !important;
}

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

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

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

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

.p-md {
	padding: 50px !important;
}

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

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

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

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

.p-lg {
	padding: 90px !important;
}

.pt-lg,
.py-lg {
	padding-top: 90px !important;
}

.pr-lg,
.px-lg {
	padding-right: 90px !important;
}

.pb-lg,
.py-lg {
	padding-bottom: 90px !important;
}

.pl-lg,
.px-lg {
	padding-left: 90px !important;
}

@media (max-width: 768px) {
	.p-sm-0 {
		padding: 0px !important;
	}

	.pt-sm-0,
	.py-sm-0 {
		padding-top: 0px !important;
	}

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

	.pb-sm-0,
	.py-sm-0 {
		padding-bottom: 0px !important;
	}

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

	.p-sm-40 {
		padding: 40px !important;
	}

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

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

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

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

	.p-sm-md {
		padding: 50px !important;
	}

	.pt-sm-md,
	.py-sm-md {
		padding-top: 50px !important;
	}

	.pr-sm-md,
	.px-sm-md {
		padding-right: 50px !important;
	}

	.pb-sm-md,
	.py-sm-md {
		padding-bottom: 50px !important;
	}

	.pl-sm-md,
	.px-sm-md {
		padding-left: 50px !important;
	}
}

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

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

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

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

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

.m-10 {
	margin: 10px !important;
}

.mt-10,
.my-10 {
	margin-top: 10px !important;
}

.mr-10,
.mx-10 {
	margin-right: 10px !important;
}

.mb-10,
.my-10 {
	margin-bottom: 10px !important;
}

.ml-10,
.mx-10 {
	margin-left: 10px !important;
}


.m-20 {
	margin: 20px !important;
}

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

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

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

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


.m-30 {
	margin: 30px !important;
}

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

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

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

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

.m-40 {
	margin: 40px !important;
}

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

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

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

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

.m-50 {
	margin: 50px !important;
}

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

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

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

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

.m-lg {
	margin: 90px !important;
}

.mt-lg,
.my-lg {
	margin-top: 90px !important;
}

.mr-lg,
.mx-lg {
	margin-right: 90px !important;
}

.mb-lg,
.my-lg {
	margin-bottom: 90px !important;
}

.ml-lg,
.mx-lg {
	margin-left: 90px !important;
}

.m-auto {
	margin: auto !important;
}

.mt-auto,
.my-auto {
	margin-top: auto !important;
}

.mr-auto,
.mx-auto {
	margin-right: auto !important;
}

.mb-auto,
.my-auto {
	margin-bottom: auto !important;
}

.ml-auto,
.mx-auto {
	margin-left: auto !important;
}

@media (max-width: 768px) {
	.m-sm-20 {
		margin: 20px !important;
	}

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

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

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

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

	.m-sm-30 {
		margin: 30px !important;
	}

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

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

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

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

	.m-sm-40 {
		margin: 40px !important;
	}

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

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

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

	.ml-sm-40,
	.mx-sm-40 {
		margin-left: 40px !important;
	}
	.m-sm-50 {
		margin: 50px !important;
	}

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

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

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

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