/**
 * Global responsive rules when minimizing the viewport.
 * Makes .main and header fluid below 1170px so the site adapts.
 * styles/responsive-minimize.css
 */

@media only screen and (max-width: 1170px) {
	.main {
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box !important;
		padding-left: 15px !important;
		padding-right: 15px !important;
	}

	.header-container {
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box !important;
		left: 0 !important;
		right: 0 !important;
	}

	.header {
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box !important;
	}

	/* Homepage highlight / hero - allow to scale */
	.highlight,
	.highlight .stretch-width {
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box !important;
	}

	.report-container-grey {
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box !important;
		padding-left: 15px !important;
		padding-right: 15px !important;
	}
}

/* Prevent horizontal scroll on body when viewport is narrow */
@media only screen and (max-width: 1170px) {
	body {
		overflow-x: hidden;
		width: 100%;
	}

	html {
		overflow-x: hidden;
		width: 100%;
	}
}

/* 768px up to 830px: apply same fluid layout and padding as tablet range */
@media only screen and (min-width: 768px) and (max-width: 830px) {
	.main {
		padding-left: 18px !important;
		padding-right: 18px !important;
	}

	.header {
		padding-left: 18px !important;
		padding-right: 18px !important;
	}
}