.sft-firm-container-xl {
	width: 1140px;
	margin-right: auto;
	margin-left: auto;
}

.sft-firm-container-lg {
	width: 960px;
	margin-right: auto;
	margin-left: auto;
}

.sft-firm-container-md {
	width: 720px;
	margin-right: auto;
	margin-left: auto;
}

.sft-firm-container-sm {
	width: 540px;
	margin-right: auto;
	margin-left: auto;
}

.sft-firm-container-xs {
	/* width: 100%; */

	width: 539px;
	padding-right: 0 !important;
	padding-left: 0 !important;
	margin-right: auto;
	margin-left: auto;
}

/* */

/* 576 - 540 = 36 */
@media (min-width: 576px) {
	.sft-firm-container-xs.sft-firm-container-sm {
		width: 540px;
		margin-right: auto;
		margin-left: auto;
	}
}

/* 768 - 720 = 48 */
@media (min-width: 768px) {
	.sft-firm-container-xs.sft-firm-container-sm.sft-firm-container-md,
	.sft-firm-container-sm.sft-firm-container-md {
		width: 720px;
		margin-right: auto;
		margin-left: auto;
	}
}

/* 992 - 960 = 32 */
@media (min-width: 992px) {
	.sft-firm-container-xs.sft-firm-container-sm.sft-firm-container-md.sft-firm-container-lg,
	.sft-firm-container-sm.sft-firm-container-md.sft-firm-container-lg,
	.sft-firm-container-md.sft-firm-container-lg {
		width: 960px;
		margin-right: auto;
		margin-left: auto;
	}
}

/* 1200 - 1140 = 60 */
@media (min-width: 1200px) {
	.sft-firm-container-xs.sft-firm-container-sm.sft-firm-container-md.sft-firm-container-lg.sft-firm-container-xl,
	.sft-firm-container-sm.sft-firm-container-md.sft-firm-container-lg.sft-firm-container-xl,
	.sft-firm-container-md.sft-firm-container-lg.sft-firm-container-xl,
	.sft-firm-container-lg.sft-firm-container-xl {
		width: 1140px;
		margin-right: auto;
		margin-left: auto;
	}
}



/*
	@media only screen and (max-width: 600px) and (min-width: 400px)  {...}

	The query above will trigger only for screens that are 600-400px wide.
	This can be used to target specific devices with known widths.

	@media (max-width: 768px) and (min-width: 0px) {

	}


*/