view {
	display: block;
	width: 100%;
	height: auto;
}

view.gutter-padding {
	padding: 0 var(--gutter-margin);
}

view base-section {
	display: block;
	width: 100%;
	height: auto;
}

view base-section base-header {
	display: flex;
	width: 100%;
	min-height: 460px;
	align-items: center;
	background-color: var(--ml-background-highlight-color);
}

/* reducing height with 80px (topbar height) since the header won't have offset when topbar is solid */
view base-section base-header.solid-topbar {
	min-height: 380px;
}

view base-section base-header.no-background {
	background-color: unset;
}

view base-section base-content {
	display: flex;
	flex-flow: wrap;
	justify-content: space-between;
	max-width: 1640px;
	width: 84%;
	margin: 0 auto;
}

view base-section base-content base-container {
	display: flex;
	flex-direction: column;
	width: 100%;
	height: auto;
}


view base-section .horizontal-margins {
	margin-left: 8%;
	margin-right: 8%;
}

view .full-width {
	width: 100%;
	max-width: 100%;
	margin: 0 auto;
}

/* Typography */

view base-section base-header h1.welcome-heading,
view base-section base-header h5.welcome-heading {
	font-size: 33px;
	text-align: left;
	margin-bottom: 0;
}

/* Offset classes */

.offset-top-lg {
	margin-top: -80px;
}

.offset-top-md {
	margin-top: -40px;
}

.offset-top-sm {
	margin-top: -20px;
}

.offset-top-tbs {
	margin-top: 80px;
}

@media all and (max-width: 904px) {
	view.gutter-padding {
		padding: 0 var(--gutter-margin-s);
	}
}


@media all and (max-width: 599px) {

	view.gutter-padding {
		padding: 0;
	}

	view base-section base-header {
		min-height: 380px;
	}

	view base-section base-header.solid-topbar {
		min-height: 300px;
	}

	view base-section .horizontal-margins {
		margin-left: 16px;
		margin-right: 16px;
	}

	view base-section base-header h1.welcome-heading,
	view base-section base-header h5.welcome-heading {
		font-size: 22px;
	}

	view base-section base-content {
		width: auto;
		margin: 0 8px;
	}
}