@ongov/ontario-design-system-component-library 4.2.0-alpha.1

package/dist/collection/components/ontario-header/service-ontario-header.css

@@ -0,0 +1,2517 @@
+/*
+*  Global variables
+*
+*  Used across multiple components
+*/
+/* -------------------------------
+    Global spacing variables
+--------------------------------- */
+/*
+*  Global colour variables
+*
+*  1 - Greyscale colours
+*  2 - System colours
+*  3 - Accent colours
+*    3.1 - Main
+*    3.2 - Light
+*    3.3 - Dark
+*    3.4 - Callout backgrounds
+*/
+/*** 1 - Greyscale colours ***/
+/*** 2 - System colours ***/
+/*** 3 - Accent colours ***/
+/* Main */
+/* Light */
+/* Dark */
+/* callout backgrounds */
+/* icon colours */
+/* service ontario header colours */
+/*** 1 - Breakpoint sizes for media queries ***/ /* -------------------------------
+    Global font-weight variables
+--------------------------------- */
+/* -------------------------------
+    Global letter-spacing variables
+--------------------------------- */
+/* Rem calc function */
+/* Pixel to REM Conversion */
+/* -------------------------------
+    Global line-height variables
+--------------------------------- */
+/* -------------------------------
+    Global typography variables
+--------------------------------- */
+.ontario-service-subheader__description,
+.ontario-application-subheader__heading,
+.ontario-service-subheader__heading {
+	font-style: normal;
+	font-weight: 700;
+	text-rendering: optimizeLegibility;
+	margin-bottom: 1rem;
+	font-feature-settings: normal;
+	font-family: 'Raleway', 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+}
+
+.ontario-service-subheader__heading {
+	font-size: 1.4375rem;
+	letter-spacing: 0.02rem;
+	line-height: 1.39;
+	margin: 0 0 0.75rem 0;
+	max-width: 48rem;
+}
+@media screen and (min-width: 40em) {
+	.ontario-service-subheader__heading {
+		font-size: 1.75rem;
+		letter-spacing: 0.02rem;
+		line-height: 1.43;
+	}
+}
+
+.ontario-application-subheader__heading {
+	font-size: 1.25rem;
+	letter-spacing: 0.03rem;
+	line-height: 1.5;
+	margin: 0 0 0.75rem 0;
+	max-width: 48rem;
+}
+@media screen and (min-width: 40em) {
+	.ontario-application-subheader__heading {
+		font-size: 1.5rem;
+		letter-spacing: 0.0313rem;
+		line-height: 1.5;
+	}
+}
+
+.ontario-service-subheader__description {
+	font-size: 1.125rem;
+	letter-spacing: 0.03rem;
+	line-height: 1.56;
+	margin: 0 0 0.75rem 0;
+	max-width: 48rem;
+}
+@media screen and (min-width: 40em) {
+	.ontario-service-subheader__description {
+		font-size: 1.1875rem;
+		letter-spacing: 0.025rem;
+		line-height: 1.5;
+	}
+}
+
+/* -------------------------------
+    Focus placeholder variables
+--------------------------------- */
+/* -------------------------------
+    Focus placeholder
+--------------------------------- */
+.ontario-application-navigation a:focus,
+.ontario-application-navigation a:active,
+.ontario-header-button:focus,
+.ontario-input:focus,
+.ontario-input:active {
+	box-shadow: 0 0 0 4px #009adb;
+	outline: 4px solid transparent;
+	transition: box-shadow 0.1s ease-in-out;
+}
+
+/*
+*  Grid functions
+*
+*  1 - Lower-bound
+*  2 - Upper-bound
+*  3 - Grid calc
+*/
+/*** 1 - Lower-bound ***/
+/*** 2 - Upper-bound ***/
+/*** 3 - Grid calc ***/
+/*
+*  Global grid variables
+*
+*  1 - Grid text variables
+*  2 - Grid row/column variables
+*  3 - Grid screen size variables
+*/
+/*** 1 - Grid text variables ***/
+/*** 2 - Grid row/column variables ***/
+/*** 3 - Grid screen size variables ***/
+/*
+*  Grid mixins
+*
+*  1 - Exporting grid code
+*  2 - Clearfix
+*  3 - Grid row
+*  4 - Grid column
+*  5 - Grid HTML classes
+*/
+/*** 1 - Exporting grid code ***/
+/*** 2 - Clearfix ***/
+/*** 3 - Grid row ***/
+/*** 4 - Grid column ***/
+/*** 5 - Grid HTML classes ***/
+.ontario-row {
+	margin: 0 auto;
+	max-width: 72rem;
+	width: 100%;
+}
+.ontario-row:before,
+.ontario-row:after {
+	content: '';
+	display: table;
+}
+.ontario-row:after {
+	clear: both;
+}
+.ontario-row.ontario-row--collapse > .ontario-column,
+.ontario-row.ontario-row--collapse > .ontario-columns {
+	padding-left: 0;
+	padding-right: 0;
+}
+.ontario-row.ontario-row--collapse .ontario-row {
+	margin-left: 0;
+	margin-right: 0;
+}
+.ontario-row .ontario-row {
+	margin: 0 -1rem;
+	max-width: none;
+	width: auto;
+}
+.ontario-row .ontario-row:before,
+.ontario-row .ontario-row:after {
+	content: '';
+	display: table;
+}
+.ontario-row .ontario-row:after {
+	clear: both;
+}
+.ontario-row .ontario-row.ontario-row--collapse {
+	margin: 0;
+	max-width: none;
+	width: auto;
+}
+.ontario-row .ontario-row.ontario-row--collapse:before,
+.ontario-row .ontario-row.ontario-row--collapse:after {
+	content: '';
+	display: table;
+}
+.ontario-row .ontario-row.ontario-row--collapse:after {
+	clear: both;
+}
+
+.ontario-column,
+.ontario-columns {
+	padding-left: 1rem;
+	padding-right: 1rem;
+	box-sizing: border-box;
+	width: 100%;
+	float: left;
+}
+.ontario-column + .ontario-column:last-child,
+.ontario-column + .ontario-columns:last-child,
+.ontario-columns + .ontario-column:last-child,
+.ontario-columns + .ontario-columns:last-child {
+	float: right;
+}
+.ontario-column + .ontario-column.ontario-end,
+.ontario-column + .ontario-columns.ontario-end,
+.ontario-columns + .ontario-column.ontario-end,
+.ontario-columns + .ontario-columns.ontario-end {
+	float: left;
+}
+
+@media only screen {
+	.ontario-small-push-0 {
+		position: relative;
+		left: 0;
+		right: auto;
+	}
+	.ontario-small-pull-0 {
+		position: relative;
+		right: 0;
+		left: auto;
+	}
+	.ontario-small-push-1 {
+		position: relative;
+		left: 8.3333333333%;
+		right: auto;
+	}
+	.ontario-small-pull-1 {
+		position: relative;
+		right: 8.3333333333%;
+		left: auto;
+	}
+	.ontario-small-push-2 {
+		position: relative;
+		left: 16.6666666667%;
+		right: auto;
+	}
+	.ontario-small-pull-2 {
+		position: relative;
+		right: 16.6666666667%;
+		left: auto;
+	}
+	.ontario-small-push-3 {
+		position: relative;
+		left: 25%;
+		right: auto;
+	}
+	.ontario-small-pull-3 {
+		position: relative;
+		right: 25%;
+		left: auto;
+	}
+	.ontario-small-push-4 {
+		position: relative;
+		left: 33.3333333333%;
+		right: auto;
+	}
+	.ontario-small-pull-4 {
+		position: relative;
+		right: 33.3333333333%;
+		left: auto;
+	}
+	.ontario-small-push-5 {
+		position: relative;
+		left: 41.6666666667%;
+		right: auto;
+	}
+	.ontario-small-pull-5 {
+		position: relative;
+		right: 41.6666666667%;
+		left: auto;
+	}
+	.ontario-small-push-6 {
+		position: relative;
+		left: 50%;
+		right: auto;
+	}
+	.ontario-small-pull-6 {
+		position: relative;
+		right: 50%;
+		left: auto;
+	}
+	.ontario-small-push-7 {
+		position: relative;
+		left: 58.3333333333%;
+		right: auto;
+	}
+	.ontario-small-pull-7 {
+		position: relative;
+		right: 58.3333333333%;
+		left: auto;
+	}
+	.ontario-small-push-8 {
+		position: relative;
+		left: 66.6666666667%;
+		right: auto;
+	}
+	.ontario-small-pull-8 {
+		position: relative;
+		right: 66.6666666667%;
+		left: auto;
+	}
+	.ontario-small-push-9 {
+		position: relative;
+		left: 75%;
+		right: auto;
+	}
+	.ontario-small-pull-9 {
+		position: relative;
+		right: 75%;
+		left: auto;
+	}
+	.ontario-small-push-10 {
+		position: relative;
+		left: 83.3333333333%;
+		right: auto;
+	}
+	.ontario-small-pull-10 {
+		position: relative;
+		right: 83.3333333333%;
+		left: auto;
+	}
+	.ontario-small-push-11 {
+		position: relative;
+		left: 91.6666666667%;
+		right: auto;
+	}
+	.ontario-small-pull-11 {
+		position: relative;
+		right: 91.6666666667%;
+		left: auto;
+	}
+	.ontario-column,
+	.ontario-columns {
+		position: relative;
+		padding-left: 1rem;
+		padding-right: 1rem;
+		box-sizing: border-box;
+		float: left;
+	}
+	.ontario-small-1 {
+		width: 8.3333333333%;
+	}
+	.ontario-small-2 {
+		width: 16.6666666667%;
+	}
+	.ontario-small-3 {
+		width: 25%;
+	}
+	.ontario-small-4 {
+		width: 33.3333333333%;
+	}
+	.ontario-small-5 {
+		width: 41.6666666667%;
+	}
+	.ontario-small-6 {
+		width: 50%;
+	}
+	.ontario-small-7 {
+		width: 58.3333333333%;
+	}
+	.ontario-small-8 {
+		width: 66.6666666667%;
+	}
+	.ontario-small-9 {
+		width: 75%;
+	}
+	.ontario-small-10 {
+		width: 83.3333333333%;
+	}
+	.ontario-small-11 {
+		width: 91.6666666667%;
+	}
+	.ontario-small-12 {
+		width: 100%;
+	}
+	.ontario-small-offset-0 {
+		margin-left: 0 !important;
+	}
+	.ontario-small-offset-1 {
+		margin-left: 8.3333333333% !important;
+	}
+	.ontario-small-offset-2 {
+		margin-left: 16.6666666667% !important;
+	}
+	.ontario-small-offset-3 {
+		margin-left: 25% !important;
+	}
+	.ontario-small-offset-4 {
+		margin-left: 33.3333333333% !important;
+	}
+	.ontario-small-offset-5 {
+		margin-left: 41.6666666667% !important;
+	}
+	.ontario-small-offset-6 {
+		margin-left: 50% !important;
+	}
+	.ontario-small-offset-7 {
+		margin-left: 58.3333333333% !important;
+	}
+	.ontario-small-offset-8 {
+		margin-left: 66.6666666667% !important;
+	}
+	.ontario-small-offset-9 {
+		margin-left: 75% !important;
+	}
+	.ontario-small-offset-10 {
+		margin-left: 83.3333333333% !important;
+	}
+	.ontario-small-offset-11 {
+		margin-left: 91.6666666667% !important;
+	}
+	.ontario-small-reset-order {
+		float: left;
+		left: auto;
+		margin-left: 0;
+		margin-right: 0;
+		right: auto;
+	}
+	.ontario-column.ontario-small-centered,
+	.ontario-columns.ontario-small-centered {
+		margin-left: auto;
+		margin-right: auto;
+		float: none;
+	}
+	.ontario-column.ontario-small-uncentered,
+	.ontario-columns.ontario-small-uncentered {
+		float: left;
+		margin-left: 0;
+		margin-right: 0;
+	}
+	.ontario-column.ontario-small-centered:last-child,
+	.ontario-columns.ontario-small-centered:last-child {
+		float: none;
+	}
+	.ontario-column.ontario-small-uncentered:last-child,
+	.ontario-columns.ontario-small-uncentered:last-child {
+		float: left;
+	}
+	.ontario-column.ontario-small-uncentered.ontario-opposite,
+	.ontario-columns.ontario-small-uncentered.ontario-opposite {
+		float: right;
+	}
+	.ontario-row.ontario-small-collapse > .ontario-column,
+	.ontario-row.ontario-small-collapse > .ontario-columns {
+		padding-left: 0;
+		padding-right: 0;
+	}
+	.ontario-row.ontario-small-collapse .ontario-row {
+		margin-left: 0;
+		margin-right: 0;
+	}
+	.ontario-row.ontario-small-uncollapse > .ontario-column,
+	.ontario-row.ontario-small-uncollapse > .ontario-columns {
+		padding-left: 1rem;
+		padding-right: 1rem;
+		box-sizing: border-box;
+		float: left;
+	}
+}
+@media only screen and (min-width: 40.063em) {
+	.ontario-medium-push-0 {
+		position: relative;
+		left: 0;
+		right: auto;
+	}
+	.ontario-medium-pull-0 {
+		position: relative;
+		right: 0;
+		left: auto;
+	}
+	.ontario-medium-push-1 {
+		position: relative;
+		left: 8.3333333333%;
+		right: auto;
+	}
+	.ontario-medium-pull-1 {
+		position: relative;
+		right: 8.3333333333%;
+		left: auto;
+	}
+	.ontario-medium-push-2 {
+		position: relative;
+		left: 16.6666666667%;
+		right: auto;
+	}
+	.ontario-medium-pull-2 {
+		position: relative;
+		right: 16.6666666667%;
+		left: auto;
+	}
+	.ontario-medium-push-3 {
+		position: relative;
+		left: 25%;
+		right: auto;
+	}
+	.ontario-medium-pull-3 {
+		position: relative;
+		right: 25%;
+		left: auto;
+	}
+	.ontario-medium-push-4 {
+		position: relative;
+		left: 33.3333333333%;
+		right: auto;
+	}
+	.ontario-medium-pull-4 {
+		position: relative;
+		right: 33.3333333333%;
+		left: auto;
+	}
+	.ontario-medium-push-5 {
+		position: relative;
+		left: 41.6666666667%;
+		right: auto;
+	}
+	.ontario-medium-pull-5 {
+		position: relative;
+		right: 41.6666666667%;
+		left: auto;
+	}
+	.ontario-medium-push-6 {
+		position: relative;
+		left: 50%;
+		right: auto;
+	}
+	.ontario-medium-pull-6 {
+		position: relative;
+		right: 50%;
+		left: auto;
+	}
+	.ontario-medium-push-7 {
+		position: relative;
+		left: 58.3333333333%;
+		right: auto;
+	}
+	.ontario-medium-pull-7 {
+		position: relative;
+		right: 58.3333333333%;
+		left: auto;
+	}
+	.ontario-medium-push-8 {
+		position: relative;
+		left: 66.6666666667%;
+		right: auto;
+	}
+	.ontario-medium-pull-8 {
+		position: relative;
+		right: 66.6666666667%;
+		left: auto;
+	}
+	.ontario-medium-push-9 {
+		position: relative;
+		left: 75%;
+		right: auto;
+	}
+	.ontario-medium-pull-9 {
+		position: relative;
+		right: 75%;
+		left: auto;
+	}
+	.ontario-medium-push-10 {
+		position: relative;
+		left: 83.3333333333%;
+		right: auto;
+	}
+	.ontario-medium-pull-10 {
+		position: relative;
+		right: 83.3333333333%;
+		left: auto;
+	}
+	.ontario-medium-push-11 {
+		position: relative;
+		left: 91.6666666667%;
+		right: auto;
+	}
+	.ontario-medium-pull-11 {
+		position: relative;
+		right: 91.6666666667%;
+		left: auto;
+	}
+	.ontario-column,
+	.ontario-columns {
+		position: relative;
+		padding-left: 1rem;
+		padding-right: 1rem;
+		box-sizing: border-box;
+		float: left;
+	}
+	.ontario-medium-1 {
+		width: 8.3333333333%;
+	}
+	.ontario-medium-2 {
+		width: 16.6666666667%;
+	}
+	.ontario-medium-3 {
+		width: 25%;
+	}
+	.ontario-medium-4 {
+		width: 33.3333333333%;
+	}
+	.ontario-medium-5 {
+		width: 41.6666666667%;
+	}
+	.ontario-medium-6 {
+		width: 50%;
+	}
+	.ontario-medium-7 {
+		width: 58.3333333333%;
+	}
+	.ontario-medium-8 {
+		width: 66.6666666667%;
+	}
+	.ontario-medium-9 {
+		width: 75%;
+	}
+	.ontario-medium-10 {
+		width: 83.3333333333%;
+	}
+	.ontario-medium-11 {
+		width: 91.6666666667%;
+	}
+	.ontario-medium-12 {
+		width: 100%;
+	}
+	.ontario-medium-offset-0 {
+		margin-left: 0 !important;
+	}
+	.ontario-medium-offset-1 {
+		margin-left: 8.3333333333% !important;
+	}
+	.ontario-medium-offset-2 {
+		margin-left: 16.6666666667% !important;
+	}
+	.ontario-medium-offset-3 {
+		margin-left: 25% !important;
+	}
+	.ontario-medium-offset-4 {
+		margin-left: 33.3333333333% !important;
+	}
+	.ontario-medium-offset-5 {
+		margin-left: 41.6666666667% !important;
+	}
+	.ontario-medium-offset-6 {
+		margin-left: 50% !important;
+	}
+	.ontario-medium-offset-7 {
+		margin-left: 58.3333333333% !important;
+	}
+	.ontario-medium-offset-8 {
+		margin-left: 66.6666666667% !important;
+	}
+	.ontario-medium-offset-9 {
+		margin-left: 75% !important;
+	}
+	.ontario-medium-offset-10 {
+		margin-left: 83.3333333333% !important;
+	}
+	.ontario-medium-offset-11 {
+		margin-left: 91.6666666667% !important;
+	}
+	.ontario-medium-reset-order {
+		float: left;
+		left: auto;
+		margin-left: 0;
+		margin-right: 0;
+		right: auto;
+	}
+	.ontario-column.ontario-medium-centered,
+	.ontario-columns.ontario-medium-centered {
+		margin-left: auto;
+		margin-right: auto;
+		float: none;
+	}
+	.ontario-column.ontario-medium-uncentered,
+	.ontario-columns.ontario-medium-uncentered {
+		float: left;
+		margin-left: 0;
+		margin-right: 0;
+	}
+	.ontario-column.ontario-medium-centered:last-child,
+	.ontario-columns.ontario-medium-centered:last-child {
+		float: none;
+	}
+	.ontario-column.ontario-medium-uncentered:last-child,
+	.ontario-columns.ontario-medium-uncentered:last-child {
+		float: left;
+	}
+	.ontario-column.ontario-medium-uncentered.ontario-opposite,
+	.ontario-columns.ontario-medium-uncentered.ontario-opposite {
+		float: right;
+	}
+	.ontario-row.ontario-medium-collapse > .ontario-column,
+	.ontario-row.ontario-medium-collapse > .ontario-columns {
+		padding-left: 0;
+		padding-right: 0;
+	}
+	.ontario-row.ontario-medium-collapse .ontario-row {
+		margin-left: 0;
+		margin-right: 0;
+	}
+	.ontario-row.ontario-medium-uncollapse > .ontario-column,
+	.ontario-row.ontario-medium-uncollapse > .ontario-columns {
+		padding-left: 1rem;
+		padding-right: 1rem;
+		box-sizing: border-box;
+		float: left;
+	}
+}
+@media only screen and (min-width: 73.063em) {
+	.ontario-large-push-0 {
+		position: relative;
+		left: 0;
+		right: auto;
+	}
+	.ontario-large-pull-0 {
+		position: relative;
+		right: 0;
+		left: auto;
+	}
+	.ontario-large-push-1 {
+		position: relative;
+		left: 8.3333333333%;
+		right: auto;
+	}
+	.ontario-large-pull-1 {
+		position: relative;
+		right: 8.3333333333%;
+		left: auto;
+	}
+	.ontario-large-push-2 {
+		position: relative;
+		left: 16.6666666667%;
+		right: auto;
+	}
+	.ontario-large-pull-2 {
+		position: relative;
+		right: 16.6666666667%;
+		left: auto;
+	}
+	.ontario-large-push-3 {
+		position: relative;
+		left: 25%;
+		right: auto;
+	}
+	.ontario-large-pull-3 {
+		position: relative;
+		right: 25%;
+		left: auto;
+	}
+	.ontario-large-push-4 {
+		position: relative;
+		left: 33.3333333333%;
+		right: auto;
+	}
+	.ontario-large-pull-4 {
+		position: relative;
+		right: 33.3333333333%;
+		left: auto;
+	}
+	.ontario-large-push-5 {
+		position: relative;
+		left: 41.6666666667%;
+		right: auto;
+	}
+	.ontario-large-pull-5 {
+		position: relative;
+		right: 41.6666666667%;
+		left: auto;
+	}
+	.ontario-large-push-6 {
+		position: relative;
+		left: 50%;
+		right: auto;
+	}
+	.ontario-large-pull-6 {
+		position: relative;
+		right: 50%;
+		left: auto;
+	}
+	.ontario-large-push-7 {
+		position: relative;
+		left: 58.3333333333%;
+		right: auto;
+	}
+	.ontario-large-pull-7 {
+		position: relative;
+		right: 58.3333333333%;
+		left: auto;
+	}
+	.ontario-large-push-8 {
+		position: relative;
+		left: 66.6666666667%;
+		right: auto;
+	}
+	.ontario-large-pull-8 {
+		position: relative;
+		right: 66.6666666667%;
+		left: auto;
+	}
+	.ontario-large-push-9 {
+		position: relative;
+		left: 75%;
+		right: auto;
+	}
+	.ontario-large-pull-9 {
+		position: relative;
+		right: 75%;
+		left: auto;
+	}
+	.ontario-large-push-10 {
+		position: relative;
+		left: 83.3333333333%;
+		right: auto;
+	}
+	.ontario-large-pull-10 {
+		position: relative;
+		right: 83.3333333333%;
+		left: auto;
+	}
+	.ontario-large-push-11 {
+		position: relative;
+		left: 91.6666666667%;
+		right: auto;
+	}
+	.ontario-large-pull-11 {
+		position: relative;
+		right: 91.6666666667%;
+		left: auto;
+	}
+	.ontario-column,
+	.ontario-columns {
+		position: relative;
+		padding-left: 1rem;
+		padding-right: 1rem;
+		box-sizing: border-box;
+		float: left;
+	}
+	.ontario-large-1 {
+		width: 8.3333333333%;
+	}
+	.ontario-large-2 {
+		width: 16.6666666667%;
+	}
+	.ontario-large-3 {
+		width: 25%;
+	}
+	.ontario-large-4 {
+		width: 33.3333333333%;
+	}
+	.ontario-large-5 {
+		width: 41.6666666667%;
+	}
+	.ontario-large-6 {
+		width: 50%;
+	}
+	.ontario-large-7 {
+		width: 58.3333333333%;
+	}
+	.ontario-large-8 {
+		width: 66.6666666667%;
+	}
+	.ontario-large-9 {
+		width: 75%;
+	}
+	.ontario-large-10 {
+		width: 83.3333333333%;
+	}
+	.ontario-large-11 {
+		width: 91.6666666667%;
+	}
+	.ontario-large-12 {
+		width: 100%;
+	}
+	.ontario-large-offset-0 {
+		margin-left: 0 !important;
+	}
+	.ontario-large-offset-1 {
+		margin-left: 8.3333333333% !important;
+	}
+	.ontario-large-offset-2 {
+		margin-left: 16.6666666667% !important;
+	}
+	.ontario-large-offset-3 {
+		margin-left: 25% !important;
+	}
+	.ontario-large-offset-4 {
+		margin-left: 33.3333333333% !important;
+	}
+	.ontario-large-offset-5 {
+		margin-left: 41.6666666667% !important;
+	}
+	.ontario-large-offset-6 {
+		margin-left: 50% !important;
+	}
+	.ontario-large-offset-7 {
+		margin-left: 58.3333333333% !important;
+	}
+	.ontario-large-offset-8 {
+		margin-left: 66.6666666667% !important;
+	}
+	.ontario-large-offset-9 {
+		margin-left: 75% !important;
+	}
+	.ontario-large-offset-10 {
+		margin-left: 83.3333333333% !important;
+	}
+	.ontario-large-offset-11 {
+		margin-left: 91.6666666667% !important;
+	}
+	.ontario-large-reset-order {
+		float: left;
+		left: auto;
+		margin-left: 0;
+		margin-right: 0;
+		right: auto;
+	}
+	.ontario-column.ontario-large-centered,
+	.ontario-columns.ontario-large-centered {
+		margin-left: auto;
+		margin-right: auto;
+		float: none;
+	}
+	.ontario-column.ontario-large-uncentered,
+	.ontario-columns.ontario-large-uncentered {
+		float: left;
+		margin-left: 0;
+		margin-right: 0;
+	}
+	.ontario-column.ontario-large-centered:last-child,
+	.ontario-columns.ontario-large-centered:last-child {
+		float: none;
+	}
+	.ontario-column.ontario-large-uncentered:last-child,
+	.ontario-columns.ontario-large-uncentered:last-child {
+		float: left;
+	}
+	.ontario-column.ontario-large-uncentered.ontario-opposite,
+	.ontario-columns.ontario-large-uncentered.ontario-opposite {
+		float: right;
+	}
+	.ontario-row.ontario-large-collapse > .ontario-column,
+	.ontario-row.ontario-large-collapse > .ontario-columns {
+		padding-left: 0;
+		padding-right: 0;
+	}
+	.ontario-row.ontario-large-collapse .ontario-row {
+		margin-left: 0;
+		margin-right: 0;
+	}
+	.ontario-row.ontario-large-uncollapse > .ontario-column,
+	.ontario-row.ontario-large-uncollapse > .ontario-columns {
+		padding-left: 1rem;
+		padding-right: 1rem;
+		box-sizing: border-box;
+		float: left;
+	}
+	.ontario-push-0 {
+		position: relative;
+		left: 0;
+		right: auto;
+	}
+	.ontario-pull-0 {
+		position: relative;
+		right: 0;
+		left: auto;
+	}
+	.ontario-push-1 {
+		position: relative;
+		left: 8.3333333333%;
+		right: auto;
+	}
+	.ontario-pull-1 {
+		position: relative;
+		right: 8.3333333333%;
+		left: auto;
+	}
+	.ontario-push-2 {
+		position: relative;
+		left: 16.6666666667%;
+		right: auto;
+	}
+	.ontario-pull-2 {
+		position: relative;
+		right: 16.6666666667%;
+		left: auto;
+	}
+	.ontario-push-3 {
+		position: relative;
+		left: 25%;
+		right: auto;
+	}
+	.ontario-pull-3 {
+		position: relative;
+		right: 25%;
+		left: auto;
+	}
+	.ontario-push-4 {
+		position: relative;
+		left: 33.3333333333%;
+		right: auto;
+	}
+	.ontario-pull-4 {
+		position: relative;
+		right: 33.3333333333%;
+		left: auto;
+	}
+	.ontario-push-5 {
+		position: relative;
+		left: 41.6666666667%;
+		right: auto;
+	}
+	.ontario-pull-5 {
+		position: relative;
+		right: 41.6666666667%;
+		left: auto;
+	}
+	.ontario-push-6 {
+		position: relative;
+		left: 50%;
+		right: auto;
+	}
+	.ontario-pull-6 {
+		position: relative;
+		right: 50%;
+		left: auto;
+	}
+	.ontario-push-7 {
+		position: relative;
+		left: 58.3333333333%;
+		right: auto;
+	}
+	.ontario-pull-7 {
+		position: relative;
+		right: 58.3333333333%;
+		left: auto;
+	}
+	.ontario-push-8 {
+		position: relative;
+		left: 66.6666666667%;
+		right: auto;
+	}
+	.ontario-pull-8 {
+		position: relative;
+		right: 66.6666666667%;
+		left: auto;
+	}
+	.ontario-push-9 {
+		position: relative;
+		left: 75%;
+		right: auto;
+	}
+	.ontario-pull-9 {
+		position: relative;
+		right: 75%;
+		left: auto;
+	}
+	.ontario-push-10 {
+		position: relative;
+		left: 83.3333333333%;
+		right: auto;
+	}
+	.ontario-pull-10 {
+		position: relative;
+		right: 83.3333333333%;
+		left: auto;
+	}
+	.ontario-push-11 {
+		position: relative;
+		left: 91.6666666667%;
+		right: auto;
+	}
+	.ontario-pull-11 {
+		position: relative;
+		right: 91.6666666667%;
+		left: auto;
+	}
+}
+@media only screen and (min-width: 96.063em) {
+	.ontario-xlarge-push-0 {
+		position: relative;
+		left: 0;
+		right: auto;
+	}
+	.ontario-xlarge-pull-0 {
+		position: relative;
+		right: 0;
+		left: auto;
+	}
+	.ontario-xlarge-push-1 {
+		position: relative;
+		left: 8.3333333333%;
+		right: auto;
+	}
+	.ontario-xlarge-pull-1 {
+		position: relative;
+		right: 8.3333333333%;
+		left: auto;
+	}
+	.ontario-xlarge-push-2 {
+		position: relative;
+		left: 16.6666666667%;
+		right: auto;
+	}
+	.ontario-xlarge-pull-2 {
+		position: relative;
+		right: 16.6666666667%;
+		left: auto;
+	}
+	.ontario-xlarge-push-3 {
+		position: relative;
+		left: 25%;
+		right: auto;
+	}
+	.ontario-xlarge-pull-3 {
+		position: relative;
+		right: 25%;
+		left: auto;
+	}
+	.ontario-xlarge-push-4 {
+		position: relative;
+		left: 33.3333333333%;
+		right: auto;
+	}
+	.ontario-xlarge-pull-4 {
+		position: relative;
+		right: 33.3333333333%;
+		left: auto;
+	}
+	.ontario-xlarge-push-5 {
+		position: relative;
+		left: 41.6666666667%;
+		right: auto;
+	}
+	.ontario-xlarge-pull-5 {
+		position: relative;
+		right: 41.6666666667%;
+		left: auto;
+	}
+	.ontario-xlarge-push-6 {
+		position: relative;
+		left: 50%;
+		right: auto;
+	}
+	.ontario-xlarge-pull-6 {
+		position: relative;
+		right: 50%;
+		left: auto;
+	}
+	.ontario-xlarge-push-7 {
+		position: relative;
+		left: 58.3333333333%;
+		right: auto;
+	}
+	.ontario-xlarge-pull-7 {
+		position: relative;
+		right: 58.3333333333%;
+		left: auto;
+	}
+	.ontario-xlarge-push-8 {
+		position: relative;
+		left: 66.6666666667%;
+		right: auto;
+	}
+	.ontario-xlarge-pull-8 {
+		position: relative;
+		right: 66.6666666667%;
+		left: auto;
+	}
+	.ontario-xlarge-push-9 {
+		position: relative;
+		left: 75%;
+		right: auto;
+	}
+	.ontario-xlarge-pull-9 {
+		position: relative;
+		right: 75%;
+		left: auto;
+	}
+	.ontario-xlarge-push-10 {
+		position: relative;
+		left: 83.3333333333%;
+		right: auto;
+	}
+	.ontario-xlarge-pull-10 {
+		position: relative;
+		right: 83.3333333333%;
+		left: auto;
+	}
+	.ontario-xlarge-push-11 {
+		position: relative;
+		left: 91.6666666667%;
+		right: auto;
+	}
+	.ontario-xlarge-pull-11 {
+		position: relative;
+		right: 91.6666666667%;
+		left: auto;
+	}
+	.ontario-column,
+	.ontario-columns {
+		position: relative;
+		padding-left: 1rem;
+		padding-right: 1rem;
+		box-sizing: border-box;
+		float: left;
+	}
+	.ontario-xlarge-1 {
+		width: 8.3333333333%;
+	}
+	.ontario-xlarge-2 {
+		width: 16.6666666667%;
+	}
+	.ontario-xlarge-3 {
+		width: 25%;
+	}
+	.ontario-xlarge-4 {
+		width: 33.3333333333%;
+	}
+	.ontario-xlarge-5 {
+		width: 41.6666666667%;
+	}
+	.ontario-xlarge-6 {
+		width: 50%;
+	}
+	.ontario-xlarge-7 {
+		width: 58.3333333333%;
+	}
+	.ontario-xlarge-8 {
+		width: 66.6666666667%;
+	}
+	.ontario-xlarge-9 {
+		width: 75%;
+	}
+	.ontario-xlarge-10 {
+		width: 83.3333333333%;
+	}
+	.ontario-xlarge-11 {
+		width: 91.6666666667%;
+	}
+	.ontario-xlarge-12 {
+		width: 100%;
+	}
+	.ontario-xlarge-offset-0 {
+		margin-left: 0 !important;
+	}
+	.ontario-xlarge-offset-1 {
+		margin-left: 8.3333333333% !important;
+	}
+	.ontario-xlarge-offset-2 {
+		margin-left: 16.6666666667% !important;
+	}
+	.ontario-xlarge-offset-3 {
+		margin-left: 25% !important;
+	}
+	.ontario-xlarge-offset-4 {
+		margin-left: 33.3333333333% !important;
+	}
+	.ontario-xlarge-offset-5 {
+		margin-left: 41.6666666667% !important;
+	}
+	.ontario-xlarge-offset-6 {
+		margin-left: 50% !important;
+	}
+	.ontario-xlarge-offset-7 {
+		margin-left: 58.3333333333% !important;
+	}
+	.ontario-xlarge-offset-8 {
+		margin-left: 66.6666666667% !important;
+	}
+	.ontario-xlarge-offset-9 {
+		margin-left: 75% !important;
+	}
+	.ontario-xlarge-offset-10 {
+		margin-left: 83.3333333333% !important;
+	}
+	.ontario-xlarge-offset-11 {
+		margin-left: 91.6666666667% !important;
+	}
+	.ontario-xlarge-reset-order {
+		float: left;
+		left: auto;
+		margin-left: 0;
+		margin-right: 0;
+		right: auto;
+	}
+	.ontario-column.ontario-xlarge-centered,
+	.ontario-columns.ontario-xlarge-centered {
+		margin-left: auto;
+		margin-right: auto;
+		float: none;
+	}
+	.ontario-column.ontario-xlarge-uncentered,
+	.ontario-columns.ontario-xlarge-uncentered {
+		float: left;
+		margin-left: 0;
+		margin-right: 0;
+	}
+	.ontario-column.ontario-xlarge-centered:last-child,
+	.ontario-columns.ontario-xlarge-centered:last-child {
+		float: none;
+	}
+	.ontario-column.ontario-xlarge-uncentered:last-child,
+	.ontario-columns.ontario-xlarge-uncentered:last-child {
+		float: left;
+	}
+	.ontario-column.ontario-xlarge-uncentered.ontario-opposite,
+	.ontario-columns.ontario-xlarge-uncentered.ontario-opposite {
+		float: right;
+	}
+	.ontario-row.ontario-xlarge-collapse > .ontario-column,
+	.ontario-row.ontario-xlarge-collapse > .ontario-columns {
+		padding-left: 0;
+		padding-right: 0;
+	}
+	.ontario-row.ontario-xlarge-collapse .ontario-row {
+		margin-left: 0;
+		margin-right: 0;
+	}
+	.ontario-row.ontario-xlarge-uncollapse > .ontario-column,
+	.ontario-row.ontario-xlarge-uncollapse > .ontario-columns {
+		padding-left: 1rem;
+		padding-right: 1rem;
+		box-sizing: border-box;
+		float: left;
+	}
+}
+@media only screen and (min-width: 120.063em) {
+	.ontario-xxlarge-push-0 {
+		position: relative;
+		left: 0;
+		right: auto;
+	}
+	.ontario-xxlarge-pull-0 {
+		position: relative;
+		right: 0;
+		left: auto;
+	}
+	.ontario-xxlarge-push-1 {
+		position: relative;
+		left: 8.3333333333%;
+		right: auto;
+	}
+	.ontario-xxlarge-pull-1 {
+		position: relative;
+		right: 8.3333333333%;
+		left: auto;
+	}
+	.ontario-xxlarge-push-2 {
+		position: relative;
+		left: 16.6666666667%;
+		right: auto;
+	}
+	.ontario-xxlarge-pull-2 {
+		position: relative;
+		right: 16.6666666667%;
+		left: auto;
+	}
+	.ontario-xxlarge-push-3 {
+		position: relative;
+		left: 25%;
+		right: auto;
+	}
+	.ontario-xxlarge-pull-3 {
+		position: relative;
+		right: 25%;
+		left: auto;
+	}
+	.ontario-xxlarge-push-4 {
+		position: relative;
+		left: 33.3333333333%;
+		right: auto;
+	}
+	.ontario-xxlarge-pull-4 {
+		position: relative;
+		right: 33.3333333333%;
+		left: auto;
+	}
+	.ontario-xxlarge-push-5 {
+		position: relative;
+		left: 41.6666666667%;
+		right: auto;
+	}
+	.ontario-xxlarge-pull-5 {
+		position: relative;
+		right: 41.6666666667%;
+		left: auto;
+	}
+	.ontario-xxlarge-push-6 {
+		position: relative;
+		left: 50%;
+		right: auto;
+	}
+	.ontario-xxlarge-pull-6 {
+		position: relative;
+		right: 50%;
+		left: auto;
+	}
+	.ontario-xxlarge-push-7 {
+		position: relative;
+		left: 58.3333333333%;
+		right: auto;
+	}
+	.ontario-xxlarge-pull-7 {
+		position: relative;
+		right: 58.3333333333%;
+		left: auto;
+	}
+	.ontario-xxlarge-push-8 {
+		position: relative;
+		left: 66.6666666667%;
+		right: auto;
+	}
+	.ontario-xxlarge-pull-8 {
+		position: relative;
+		right: 66.6666666667%;
+		left: auto;
+	}
+	.ontario-xxlarge-push-9 {
+		position: relative;
+		left: 75%;
+		right: auto;
+	}
+	.ontario-xxlarge-pull-9 {
+		position: relative;
+		right: 75%;
+		left: auto;
+	}
+	.ontario-xxlarge-push-10 {
+		position: relative;
+		left: 83.3333333333%;
+		right: auto;
+	}
+	.ontario-xxlarge-pull-10 {
+		position: relative;
+		right: 83.3333333333%;
+		left: auto;
+	}
+	.ontario-xxlarge-push-11 {
+		position: relative;
+		left: 91.6666666667%;
+		right: auto;
+	}
+	.ontario-xxlarge-pull-11 {
+		position: relative;
+		right: 91.6666666667%;
+		left: auto;
+	}
+	.ontario-column,
+	.ontario-columns {
+		position: relative;
+		padding-left: 1rem;
+		padding-right: 1rem;
+		box-sizing: border-box;
+		float: left;
+	}
+	.ontario-xxlarge-1 {
+		width: 8.3333333333%;
+	}
+	.ontario-xxlarge-2 {
+		width: 16.6666666667%;
+	}
+	.ontario-xxlarge-3 {
+		width: 25%;
+	}
+	.ontario-xxlarge-4 {
+		width: 33.3333333333%;
+	}
+	.ontario-xxlarge-5 {
+		width: 41.6666666667%;
+	}
+	.ontario-xxlarge-6 {
+		width: 50%;
+	}
+	.ontario-xxlarge-7 {
+		width: 58.3333333333%;
+	}
+	.ontario-xxlarge-8 {
+		width: 66.6666666667%;
+	}
+	.ontario-xxlarge-9 {
+		width: 75%;
+	}
+	.ontario-xxlarge-10 {
+		width: 83.3333333333%;
+	}
+	.ontario-xxlarge-11 {
+		width: 91.6666666667%;
+	}
+	.ontario-xxlarge-12 {
+		width: 100%;
+	}
+	.ontario-xxlarge-offset-0 {
+		margin-left: 0 !important;
+	}
+	.ontario-xxlarge-offset-1 {
+		margin-left: 8.3333333333% !important;
+	}
+	.ontario-xxlarge-offset-2 {
+		margin-left: 16.6666666667% !important;
+	}
+	.ontario-xxlarge-offset-3 {
+		margin-left: 25% !important;
+	}
+	.ontario-xxlarge-offset-4 {
+		margin-left: 33.3333333333% !important;
+	}
+	.ontario-xxlarge-offset-5 {
+		margin-left: 41.6666666667% !important;
+	}
+	.ontario-xxlarge-offset-6 {
+		margin-left: 50% !important;
+	}
+	.ontario-xxlarge-offset-7 {
+		margin-left: 58.3333333333% !important;
+	}
+	.ontario-xxlarge-offset-8 {
+		margin-left: 66.6666666667% !important;
+	}
+	.ontario-xxlarge-offset-9 {
+		margin-left: 75% !important;
+	}
+	.ontario-xxlarge-offset-10 {
+		margin-left: 83.3333333333% !important;
+	}
+	.ontario-xxlarge-offset-11 {
+		margin-left: 91.6666666667% !important;
+	}
+	.ontario-xxlarge-reset-order {
+		float: left;
+		left: auto;
+		margin-left: 0;
+		margin-right: 0;
+		right: auto;
+	}
+	.ontario-column.ontario-xxlarge-centered,
+	.ontario-columns.ontario-xxlarge-centered {
+		margin-left: auto;
+		margin-right: auto;
+		float: none;
+	}
+	.ontario-column.ontario-xxlarge-uncentered,
+	.ontario-columns.ontario-xxlarge-uncentered {
+		float: left;
+		margin-left: 0;
+		margin-right: 0;
+	}
+	.ontario-column.ontario-xxlarge-centered:last-child,
+	.ontario-columns.ontario-xxlarge-centered:last-child {
+		float: none;
+	}
+	.ontario-column.ontario-xxlarge-uncentered:last-child,
+	.ontario-columns.ontario-xxlarge-uncentered:last-child {
+		float: left;
+	}
+	.ontario-column.ontario-xxlarge-uncentered.ontario-opposite,
+	.ontario-columns.ontario-xxlarge-uncentered.ontario-opposite {
+		float: right;
+	}
+	.ontario-row.ontario-xxlarge-collapse > .ontario-column,
+	.ontario-row.ontario-xxlarge-collapse > .ontario-columns {
+		padding-left: 0;
+		padding-right: 0;
+	}
+	.ontario-row.ontario-xxlarge-collapse .ontario-row {
+		margin-left: 0;
+		margin-right: 0;
+	}
+	.ontario-row.ontario-xxlarge-uncollapse > .ontario-column,
+	.ontario-row.ontario-xxlarge-uncollapse > .ontario-columns {
+		padding-left: 1rem;
+		padding-right: 1rem;
+		box-sizing: border-box;
+		float: left;
+	}
+}
+/*
+*  Text Inputs
+*/
+.ontario-input {
+	border: 2px solid #1a1a1a;
+	border-radius: 4px;
+	box-sizing: border-box;
+	color: #1a1a1a;
+	display: block;
+	font-size: 1rem;
+	font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+	line-height: 1.5;
+	margin: 0 0 2.5rem;
+	max-width: 48rem;
+	width: 100%;
+	padding: 0.625rem 1rem;
+	transition: box-shadow 0.1s ease-in-out;
+}
+.ontario-input--2-char-width {
+	max-width: 8ex;
+}
+
+.ontario-input--3-char-width {
+	max-width: 10ex;
+}
+
+.ontario-input--4-char-width {
+	max-width: 12ex;
+}
+
+.ontario-input--5-char-width {
+	max-width: 14ex;
+}
+
+.ontario-input--7-char-width {
+	max-width: 17ex;
+}
+
+.ontario-input--10-char-width {
+	max-width: 23ex;
+}
+
+.ontario-input--20-char-width {
+	max-width: 41ex;
+}
+
+.ontario-form-group:last-of-type {
+	margin-bottom: 2.5rem;
+}
+
+/*
+* Visibility
+*
+* Helper classes to determine visibility of elements
+*/
+.ontario-hide {
+	display: none !important;
+}
+
+.ontario-invisible {
+	visibility: hidden !important;
+}
+
+@media screen and (max-width: 39.937em) {
+	.ontario-hide-for-small-only {
+		display: none !important;
+	}
+}
+@media screen and (max-width: 0em), screen and (min-width: 40em) {
+	.ontario-show-for-small-only {
+		display: none !important;
+	}
+}
+@media print, screen and (min-width: 40em) {
+	.ontario-hide-for-medium {
+		display: none !important;
+	}
+}
+@media screen and (max-width: 39.937em) {
+	.ontario-show-for-medium {
+		display: none !important;
+	}
+}
+@media screen and (min-width: 40em) and (max-width: 72.937em) {
+	.ontario-hide-for-medium-only {
+		display: none !important;
+	}
+}
+@media screen and (max-width: 39.937em), screen and (min-width: 73em) {
+	.ontario-show-for-medium-only {
+		display: none !important;
+	}
+}
+@media print, screen and (min-width: 73em) {
+	.ontario-hide-for-large {
+		display: none !important;
+	}
+}
+@media screen and (max-width: 72.937em) {
+	.ontario-show-for-large {
+		display: none !important;
+	}
+}
+@media screen and (min-width: 73em) and (max-width: 95.937em) {
+	.ontario-hide-for-large-only {
+		display: none !important;
+	}
+}
+@media screen and (max-width: 72.937em), screen and (min-width: 96em) {
+	.ontario-show-for-large-only {
+		display: none !important;
+	}
+}
+.ontario-show-for-sr,
+.ontario-show-on-focus {
+	position: absolute;
+	width: 1px;
+	height: 1px;
+	overflow: hidden;
+	clip: rect(0, 0, 0, 0);
+}
+
+.ontario-show-on-focus:active,
+.ontario-show-on-focus:focus {
+	position: static;
+	width: auto;
+	height: auto;
+	overflow: visible;
+	clip: auto;
+}
+
+.ontario-show-for-landscape,
+.ontario-hide-for-portrait {
+	display: block !important;
+}
+
+@media screen and (orientation: landscape) {
+	.ontario-show-for-landscape,
+	.ontario-hide-for-portrait {
+		display: block !important;
+	}
+}
+@media screen and (orientation: portrait) {
+	.ontario-show-for-landscape,
+	.ontario-hide-for-portrait {
+		display: none !important;
+	}
+}
+.ontario-hide-for-landscape,
+.ontario-show-for-portrait {
+	display: none !important;
+}
+
+@media screen and (orientation: landscape) {
+	.ontario-hide-for-landscape,
+	.ontario-show-for-portrait {
+		display: none !important;
+	}
+}
+@media screen and (orientation: portrait) {
+	.ontario-hide-for-landscape,
+	.ontario-show-for-portrait {
+		display: block !important;
+	}
+}
+.ontario-application-header {
+	display: flex;
+	align-items: center;
+	background-color: #1a1a1a;
+	color: #ffffff;
+	height: 3.125rem !important;
+	position: relative;
+	z-index: 5;
+}
+.ontario-application-header > .ontario-row {
+	display: flex;
+	align-items: center;
+}
+
+.ontario-application-header-container {
+	position: relative;
+	width: 100%;
+}
+
+.ontario-header-button.ontario-application-navigation--open:hover {
+	background-color: #666666;
+}
+
+.ontario-header-button.ontario-application-navigation--closed:active {
+	background-color: #1a1a1a;
+}
+
+.ontario-header-button--with-outline {
+	border: 2px solid #ffffff;
+	margin: 0 0 0 1rem;
+	padding: 0.375rem 1rem;
+}
+
+.ontario-application-subheader .ontario-header-button,
+.ontario-application-navigation .ontario-header-button {
+	background-color: #4d4d4d;
+}
+
+.ontario-header-button--closed:focus {
+	box-shadow: none;
+	outline: none;
+	transition: none;
+}
+
+.ontario-application-header__logo,
+.ontario-application-header__logo a,
+.ontario-application-header__lang-toggle,
+.ontario-application-subheader__container,
+.ontario-application-subheader__menu-container,
+.ontario-application-subheader__menu {
+	display: flex;
+	align-items: center;
+	outline: none;
+}
+
+.ontario-application-header__logo a:focus {
+	box-shadow: 0 0 0 4px #009adb;
+	transition: all 0.1s ease-in-out;
+}
+
+.ontario-application-header__logo svg,
+.ontario-application-header__logo img {
+	width: 100px;
+	height: 25px;
+}
+
+.ontario-application-header__lang-toggle {
+	justify-content: flex-end;
+}
+.ontario-application-header__lang-toggle a {
+	font-size: 1rem;
+	line-height: 1.375rem;
+	height: auto;
+	outline: none;
+	padding: 0.5rem 0.75rem;
+}
+
+/* Ontario application subheader styles */
+.ontario-application-subheader {
+	padding: 1.25rem 0;
+	background-color: #404040;
+	overflow: visible;
+	position: relative;
+	z-index: 5;
+}
+@media screen and (min-width: 73em) {
+	.ontario-application-subheader {
+		z-index: 0;
+	}
+}
+.ontario-application-subheader > .ontario-row {
+	position: relative;
+}
+
+.ontario-application-header-container {
+	position: relative;
+	z-index: 5;
+}
+
+.ontario-application-header > .ontario-row {
+	display: flex;
+	align-items: center;
+}
+
+.ontario-application-subheader .ontario-header-button {
+	visibility: visible;
+}
+
+.ontario-application-subheader .ontario-header-button,
+.ontario-application-navigation .ontario-header-button {
+	background-color: #4d4d4d;
+}
+.ontario-application-subheader .ontario-header-button:hover,
+.ontario-application-navigation .ontario-header-button:hover {
+	background-color: #666666;
+}
+.ontario-application-subheader .ontario-header-button:active,
+.ontario-application-navigation .ontario-header-button:active {
+	background-color: #1a1a1a;
+}
+
+.ontario-header-button--without-outline:hover {
+	background-color: #4d4d4d;
+}
+.ontario-header-button--without-outline:focus {
+	box-shadow: 0 0 0 4px #009adb;
+	outline: 4px solid transparent;
+	transition: all 0.1s ease-in-out;
+}
+
+.ontario-application-subheader__heading {
+	padding: 0.375rem 0;
+	margin-bottom: 0;
+	max-width: 65%;
+}
+.ontario-application-subheader__heading a {
+	color: #ffffff;
+	font-weight: 600;
+	text-decoration: none;
+}
+.ontario-application-subheader__heading a:focus {
+	box-shadow: 0 0 0 4px #009adb;
+	transition: all 0.1s ease-in-out;
+}
+.ontario-application-subheader__heading a:hover,
+.ontario-application-subheader__heading a:active,
+.ontario-application-subheader__heading a:visited {
+	color: #ffffff;
+	text-decoration: underline;
+}
+
+.ontario-application-subheader .ontario-header-button {
+	visibility: visible;
+	background-color: #4d4d4d;
+}
+.ontario-application-subheader .ontario-header-button:hover {
+	background-color: #666666;
+}
+.ontario-application-subheader .ontario-header-button:active {
+	background-color: #1a1a1a;
+}
+
+.ontario-header__menu-toggler span {
+	display: flex;
+}
+@media screen and (max-width: 20em) {
+	.ontario-header__menu-toggler span:last-of-type {
+		display: none;
+	}
+}
+.ontario-header__menu-toggler svg {
+	margin-right: 6px;
+}
+@media screen and (max-width: 20em) {
+	.ontario-header__menu-toggler svg {
+		margin-right: 0;
+	}
+}
+
+.ontario-application-subheader__container {
+	align-items: center;
+	justify-content: space-between;
+}
+
+.ontario-application-subheader__menu {
+	display: flex;
+	align-items: center;
+	list-style: none;
+	margin: 0;
+	padding-left: 0;
+}
+.ontario-application-subheader__menu li {
+	border-radius: 4px;
+	padding: 0;
+	margin: 0 0 0 0.75rem;
+	text-align: center;
+}
+
+.ontario-application-subheader__menu-container a {
+	box-sizing: border-box;
+	border-radius: 4px;
+	color: #ffffff;
+	display: inline-block;
+	font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+	font-size: 1.125rem;
+	font-weight: 600;
+	height: 48px;
+	line-height: 1.4375rem;
+	outline: none;
+	padding: 0.75rem;
+	text-align: left;
+	text-decoration: none;
+	white-space: nowrap;
+}
+.ontario-application-subheader__menu-container a.ontario-link--active {
+	border-radius: 4px 4px 0 0;
+	border-bottom: 4px solid #ffffff;
+}
+.ontario-application-subheader__menu-container a:hover {
+	background-color: #666666;
+	color: #ffffff;
+}
+.ontario-application-subheader__menu-container a:active {
+	background-color: #1a1a1a;
+}
+.ontario-application-subheader__menu-container a:focus {
+	box-shadow: 0 0 0 4px #009adb;
+	transition: all 0.1s ease-in-out;
+}
+
+.ontario-application-navigation {
+	position: absolute;
+	width: 100%;
+}
+@media screen and (min-width: 73em) {
+	.ontario-application-navigation {
+		position: relative;
+		max-width: 72rem;
+		width: auto;
+		margin: 0 auto;
+	}
+}
+
+.ontario-application-navigation .ontario-header-button {
+	visibility: hidden;
+	position: absolute;
+	top: -4.25rem;
+	right: 1rem;
+	z-index: 6;
+}
+
+.ontario-application-navigation__container {
+	background: #ffffff;
+	position: absolute;
+	top: 0;
+	width: 100%;
+	z-index: 4;
+}
+@media screen and (min-width: 40em) {
+	.ontario-application-navigation__container {
+		background: #ffffff;
+		position: absolute;
+		z-index: 4;
+	}
+}
+@media screen and (min-width: 73em) {
+	.ontario-application-navigation__container {
+		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+		border-radius: 4px;
+		position: absolute;
+		right: 0.75rem;
+		top: -0.6rem;
+		min-width: 290px;
+		max-width: 30%;
+		z-index: 3;
+		transition: none !important;
+	}
+}
+
+.ontario-application-navigation ul {
+	list-style: none;
+	padding: 0.5rem 0;
+	margin: 0;
+	border-bottom: 1px solid #cccccc;
+}
+@media screen and (min-width: 73em) {
+	.ontario-application-navigation ul {
+		border-bottom: none;
+	}
+}
+
+.ontario-application-navigation li {
+	border-top: 1px solid #cccccc;
+	padding: 0;
+	margin-bottom: 0;
+}
+.ontario-application-navigation li:last-of-type {
+	border-bottom: 1px solid #cccccc;
+}
+
+.ontario-application-navigation a {
+	color: #1a1a1a;
+	display: block;
+	font-size: 1.125rem;
+	font-weight: 600;
+	font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+	text-decoration: none;
+	padding: 0.6730769231rem 1.5rem;
+}
+.ontario-application-navigation a:hover {
+	text-decoration: underline;
+	background-color: #e5e5e5;
+}
+.ontario-application-navigation a:active {
+	text-decoration: underline;
+	background-color: #cccccc;
+}
+.ontario-application-navigation a:focus,
+.ontario-application-navigation a:active {
+	box-shadow: 0 0 0 4px #009adb inset;
+}
+.ontario-application-navigation a.ontario-link--active {
+	border-left: 6px solid #1a1a1a;
+	background-color: #f2f2f2;
+}
+
+.ontario-navigation--open {
+	visibility: visible;
+	transform: translateY(0);
+	transition: transform 0.4s ease-in-out;
+}
+@media screen and (min-width: 73em) {
+	.ontario-navigation--open {
+		z-index: 5;
+	}
+}
+
+.ontario-navigation--closed {
+	background: #ffffff;
+	position: absolute;
+	transform: translateY(-100%);
+	transition: transform 0.3s ease-in-out, visibility 0.1s ease;
+	width: 100%;
+	visibility: hidden;
+	z-index: 4;
+}
+
+.ontario-application-navigation.ontario-navigation--open .ontario-application-navigation__container {
+	visibility: visible;
+	transform: translateY(0);
+	transition: transform 0.4s ease-in-out;
+}
+@media screen and (min-width: 73em) {
+	.ontario-application-navigation.ontario-navigation--open .ontario-application-navigation__container {
+		transition: none;
+		display: block;
+	}
+}
+
+.ontario-overlay {
+	position: fixed;
+	top: 0;
+	left: 0;
+	background: rgba(0, 0, 0, 0.6);
+	width: 100%;
+	height: 100%;
+	z-index: 2;
+}
+
+.ontario-header-button.ontario-navigation--open:hover {
+	background-color: #666666;
+}
+.ontario-header-button.ontario-navigation--open:active {
+	background-color: #1a1a1a;
+}
+
+.ontario-header-button.ontario-navigation--closed:active {
+	background-color: #1a1a1a;
+}
+
+/* Header buttons */
+.ontario-header-button {
+	background-color: #1a1a1a;
+	border: none;
+	border-radius: 4px;
+	box-sizing: border-box;
+	box-shadow: none;
+	color: #ffffff;
+	cursor: pointer;
+	display: flex;
+	align-items: center;
+	font-size: 1.125rem;
+	font-weight: 600;
+	font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+	height: 48px;
+	line-height: 1.5555555556;
+	text-align: center;
+	text-decoration: none;
+}
+.ontario-header-button:hover,
+.ontario-header-button:focus,
+.ontario-header-button:visited {
+	color: #ffffff;
+}
+
+.ontario-header-button--with-outline,
+.ontario-header-button--without-outline {
+	background-color: #1a1a1a;
+	color: #ffffff;
+}
+.ontario-header-button--with-outline:hover,
+.ontario-header-button--without-outline:hover {
+	background-color: #4d4d4d;
+}
+.ontario-header-button--with-outline:active,
+.ontario-header-button--without-outline:active {
+	background-color: #666666;
+}
+.ontario-header-button--with-outline:focus,
+.ontario-header-button--without-outline:focus {
+	background-color: #4d4d4d;
+}
+
+.ontario-header-button--with-outline {
+	border: 2px solid #ffffff;
+	margin: 0 0 0 1rem;
+	padding: 0.375rem 1rem;
+}
+.ontario-header-button--with-outline:hover {
+	border: 2px solid #ffffff;
+	color: #ffffff;
+}
+.ontario-header-button--with-outline:focus {
+	background-color: #4d4d4d;
+}
+@media screen and (max-width: 20em) {
+	.ontario-header-button--with-outline {
+		padding: 0.375rem;
+	}
+}
+
+.ontario-header__menu-toggler {
+	padding: 0.375rem 1rem;
+}
+@media screen and (max-width: 20em) {
+	.ontario-header__menu-toggler {
+		padding-left: 0.5rem;
+		padding-right: 0.5rem;
+	}
+}
+.ontario-header__menu-toggler span {
+	display: flex;
+}
+@media screen and (max-width: 20em) {
+	.ontario-header__menu-toggler span {
+		display: none;
+	}
+}
+.ontario-header__menu-toggler svg {
+	margin-right: 6px;
+}
+@media screen and (max-width: 20em) {
+	.ontario-header__menu-toggler svg {
+		margin-right: 0;
+	}
+}
+
+.ontario-application-navigation__container {
+	background: #ffffff;
+	position: absolute;
+	transform: translateY(-100%);
+	transition: transform 0.3s ease-in-out, visibility 0.1s ease;
+	width: 100%;
+	visibility: hidden;
+	z-index: 4;
+}
+@media screen and (min-width: 73em) {
+	.ontario-application-navigation__container {
+		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+		border-radius: 4px;
+		display: none;
+		position: absolute;
+		right: 1rem;
+		top: calc(100% - 0.5rem);
+		min-width: 290px;
+		max-width: 30%;
+		z-index: 5;
+	}
+}
+
+.ontario-application-navigation.ontario-navigation--open .ontario-application-navigation__container {
+	background: #ffffff;
+	visibility: visible;
+	transform: translateY(0);
+	transition: transform 0.4s ease-in-out;
+}
+@media screen and (min-width: 73em) {
+	.ontario-application-navigation.ontario-navigation--open .ontario-application-navigation__container {
+		transition: none;
+		display: block;
+	}
+}
+
+.ontario-application-navigation.ontario-navigation--open {
+	background: #ffffff;
+	z-index: 4;
+}
+
+.ontario-application-navigation ul {
+	list-style: none;
+	padding: 0.5rem 0;
+	margin: 0;
+	border-bottom: 1px solid #cccccc;
+}
+@media screen and (min-width: 73em) {
+	.ontario-application-navigation ul {
+		border-bottom: none;
+	}
+}
+
+.ontario-application-navigation li {
+	border-top: 1px solid #cccccc;
+	padding: 0;
+	margin-bottom: 0;
+}
+.ontario-application-navigation li:last-of-type {
+	border-bottom: 1px solid #cccccc;
+}
+
+.ontario-application-navigation a {
+	color: #1a1a1a;
+	display: block;
+	font-size: 1.125rem;
+	font-weight: 600;
+	font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+	text-decoration: none;
+	padding: 0.6730769231rem 1.5rem;
+}
+.ontario-application-navigation a:hover {
+	text-decoration: underline;
+	background-color: #e5e5e5;
+}
+.ontario-application-navigation a:active {
+	text-decoration: underline;
+	background-color: #cccccc;
+}
+.ontario-application-navigation a:focus,
+.ontario-application-navigation a:active {
+	box-shadow: 0 0 0 4px #009adb inset;
+}
+.ontario-application-navigation a.ontario-link--active {
+	border-left: 6px solid #1a1a1a;
+	background-color: #f2f2f2;
+}
+
+/* Ontario application header overlay styles */
+.ontario-overlay {
+	position: fixed;
+	top: 0;
+	left: 0;
+	background: rgba(0, 0, 0, 0.6);
+	width: 100%;
+	height: 100%;
+	z-index: 2;
+}
+
+/* Ontario header helper styles */
+.ontario-header__icon-container {
+	display: flex;
+	align-items: center;
+}
+
+.ontario-service-header {
+	height: 3.125rem;
+	z-index: 5;
+}
+
+.ontario-service-header__logo,
+.ontario-service-header__logo a,
+.ontario-service-header__lang-toggle,
+.ontario-service-subheader__container,
+.ontario-service-subheader__menu-container,
+.ontario-service-subheader__menu {
+	display: flex;
+}
+
+.ontario-service-header__logo img {
+	width: 100px;
+	height: 25px;
+}
+
+.ontario-service-header__lang-toggle {
+	justify-content: flex-end;
+}
+.ontario-service-header__lang-toggle a {
+	font-size: 1rem;
+	line-height: 1.375rem;
+	height: auto;
+	padding: 0.5rem 0.75rem;
+}
+
+.ontario-service-subheader {
+	padding: 1rem 0;
+	background-color: #03713d;
+	overflow: hidden;
+	position: relative;
+	z-index: 5;
+}
+@media screen and (min-width: 73em) {
+	.ontario-service-subheader {
+		z-index: 0;
+	}
+}
+.ontario-service-subheader > .ontario-row {
+	position: relative;
+}
+
+.ontario-service-subheader .ontario-header-button {
+	display: flex;
+}
+.ontario-service-subheader .ontario-header-button:last-of-type {
+	display: none;
+}
+
+.ontario-service-subheader .ontario-header-button {
+	background-color: #03713d;
+}
+.ontario-service-subheader .ontario-header-button .ontario-icon {
+	width: 2rem;
+	height: 2rem;
+	margin-bottom: 0;
+}
+.ontario-service-subheader .ontario-header-button:hover {
+	background-color: #048b4b;
+}
+.ontario-service-subheader .ontario-header-button:active {
+	background-color: #024122;
+}
+.ontario-service-subheader .ontario-header-button:focus {
+	box-shadow: 0 0 0 4px #42c7ff;
+}
+
+.ontario-service-subheader__link {
+	text-decoration: none;
+}
+
+a .ontario-service-subheader__heading-container {
+	color: #ffffff;
+	font-weight: 600;
+	text-decoration: none;
+}
+a .ontario-service-subheader__heading-container:hover,
+a .ontario-service-subheader__heading-container:active,
+a .ontario-service-subheader__heading-container:visited {
+	color: #ffffff;
+	text-decoration: underline;
+}
+a .ontario-service-subheader__heading-container:focus {
+	box-shadow: 0 0 0 4px #42c7ff;
+}
+
+.ontario-service-subheader__heading {
+	font-weight: 600;
+	padding: 0 0 0.125rem 0;
+	margin-bottom: 0;
+	text-decoration: none;
+}
+
+.ontario-service-subheader__description {
+	padding: 0.125rem 0 0.25rem 0;
+	margin-bottom: 0;
+	color: #ffffff;
+	font-weight: 600;
+	text-decoration: none;
+}
+
+.ontario-service-subheader__container {
+	align-items: center;
+	justify-content: space-between;
+}
+
+.ontario-service-subheader__menu {
+	list-style: none;
+	margin: 0;
+	padding-left: 0;
+	align-items: center;
+}
+
+.ontario-service-subheader__menu li {
+	padding: 0;
+	margin-left: 1rem;
+}
+
+.ontario-service-subheader__menu a {
+	border-radius: 4px;
+	color: #ffffff;
+	display: block;
+	font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+	font-size: 1.125rem;
+	font-weight: 600;
+	height: 48px;
+	line-height: 1.4375rem;
+	padding: 0.75rem;
+	text-decoration: none;
+	white-space: nowrap;
+}
+.ontario-service-subheader__menu a.ontario-link--active {
+	border-radius: 4px 4px 0 0;
+	border-bottom: 0.25rem solid #ffffff;
+}
+.ontario-service-subheader__menu a:hover {
+	color: #ffffff;
+	background-color: #048b4b;
+}
+.ontario-service-subheader__menu a:active {
+	color: #ffffff;
+	background-color: #024122;
+}
+.ontario-service-subheader__menu a:focus {
+	box-shadow: 0 0 0 4px #42c7ff;
+}
+
+.ontario-overlay {
+	display: none;
+	position: fixed;
+	top: 0;
+	left: 0;
+	background: rgba(26, 26, 26, 0.6);
+	width: 100%;
+	height: 100%;
+	z-index: 2;
+}
+
+.ontario-navigation--open .ontario-service-subheader .ontario-header-button:first-of-type {
+	display: none;
+}
+.ontario-navigation--open .ontario-service-subheader .ontario-header-button:last-of-type {
+	display: flex;
+}
+@media screen and (max-width: 73em) {
+	.ontario-navigation--open .ontario-service-subheader-menu__container {
+		position: relative;
+		z-index: 3;
+	}
+}
+.ontario-navigation--open .ontario-overlay {
+	display: block;
+}
+@media screen and (min-width: 73em) {
+	.ontario-navigation--open .ontario-overlay {
+		display: none;
+	}
+}
+
+.ontario-colour-service-ontario-header-brand {
+	background-color: #03713d;
+}
+
+.ontario-colour-service-ontario-header-focus {
+	background-color: #42c7ff;
+}
+
+.ontario-colour-service-ontario-header-hover {
+	background-color: #048b4b;
+}
+
+.ontario-colour-service-ontario-header-active {
+	background-color: #024122;
+}