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

.container-wide {
	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);
}

.col {
	position: relative;
	max-width: 100%;
	width: 100%;
	grid-column: span 12;
}

.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-one,
	.row.col-md-one > * {
		grid-column: span 12 !important;
	}
}

@media (max-width: 768px) {

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

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

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

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

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

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

  .guttery-sm-40 {
    grid-gap: 40px 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;
	}

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

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

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

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

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

/* === 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-70 {
	padding: 70px !important;
}

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

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

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

.pl-70,
.px-70 {
	padding-left: 70px !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: 100px !important;
}

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

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

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

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

@media (max-width: 768px) {

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

  .pb-sm-md,
  .py-sm-md {
    padding-bottom: 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-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-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;
}