/* -----------------------------------------------------------------------------

    Please see /standards/architecture.md for standards on how to write CSS for
    this project.

----------------------------------------------------------------------------- */
/*** 1 - Settings ***/
/* 
*  Global colour variables
*   
*  1 - Greyscale colours
*  2 - System colours
*  3 - Accent colours
*    3.1 - Main
*    3.2 - Light
*    3.3 - Dark
*/
/*** 1 - Greyscale colours ***/
/*** 2 - System colours ***/
/*** 3 - Accent colours ***/
/* Main */
/* Light */
/* Dark */
/* 
*  Global variables
*  Used across multiple components 
*/
/* 
*  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 ***/
/*** 4 - Grid HTML classes ***/
/* 
*  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 ***/
/* -------------------------------
    Global spacing variables
--------------------------------- */
/* -------------------------------
    Global typography variables
--------------------------------- */
/*** 2 - Tools ***/
/* 
*  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 ***/
/*** 4 - Grid HTML classes ***/
/* 
*  Grid functions
*   
*  1 - Lower-bound
*  2 - Upper-bound
*  3 - Grid calc
*   
*/
/*** 1 - Lower-bound ***/
/*** 2 - Upper-bound ***/
/*** 3 - Grid calc ***/
/* Asset URL builder */
/* Image asset helper */
/* Font asset helper */
/* Icon asset helper */
/* 
*  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 ***/
/*** 4 - Grid HTML classes ***/
/* -------------------------------
    Focus placeholder variables
--------------------------------- */
/* -------------------------------
    Focus placeholder
--------------------------------- */
.ontario-button:focus, .ontario-button:active, .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;
}

h1,
.ontario-h1, h2,
.ontario-h2, h3,
.ontario-h3, h4,
.ontario-h4, h5,
.ontario-h5, h6,
.ontario-h6 {
  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;
}

h1,
.ontario-h1 {
  font-size: 2rem;
  letter-spacing: 0.04rem;
  line-height: 1.2;
  margin: 0 0 1rem 0;
}

#block-ds-theme-page-title h1 {
  margin-bottom: 0;
  /* the page title already has a bottom margin
  b/c of ontario-row / ontario-columns wrapping content
  so a margin here is unnecessary */
}

@media screen and (min-width: 40em) {
  h1,
  .ontario-h1 {
    font-size: 2.5rem;
    letter-spacing: 0.04rem;
    line-height: 1.29;
  }
}

h2,
.ontario-h2 {
  font-size: 1.6875rem;
  letter-spacing: 0.03rem;
  line-height: 1.33;
  margin: 0 0 1rem 0;
}

@media screen and (min-width: 40em) {
  h2,
  .ontario-h2 {
    font-size: 2.0625rem;
    letter-spacing: 0.02rem;
    line-height: 1.37;
  }
}

h3,
.ontario-h3 {
  font-size: 1.4375rem;
  letter-spacing: 0.02rem;
  line-height: 1.43;
  margin: 0 0 1rem 0;
}

@media screen and (min-width: 40em) {
  h3,
  .ontario-h3 {
    font-size: 1.75rem;
    letter-spacing: 0.02rem;
    line-height: 1.5;
  }
}

h4,
.ontario-h4 {
  font-size: 1.25rem;
  letter-spacing: 0.03rem;
  line-height: 1.5;
  margin: 0 0 1rem 0;
}

@media screen and (min-width: 40em) {
  h4,
  .ontario-h4 {
    font-size: 1.5rem;
    letter-spacing: 0.0313rem;
    line-height: 1.5;
  }
}

h5,
.ontario-h5 {
  font-size: 1.125rem;
  letter-spacing: 0.03rem;
  line-height: 1.5;
  margin: 0 0 1rem 0;
}

@media screen and (min-width: 40em) {
  h5,
  .ontario-h5 {
    font-size: 1.1875rem;
    letter-spacing: 0.025rem;
    line-height: 1.56;
  }
}

h6,
.ontario-h6 {
  font-size: 1rem;
  letter-spacing: 0.03rem;
  line-height: 1.5;
  margin: 0 0 1rem 0;
}

@media screen and (min-width: 40em) {
  h6,
  .ontario-h6 {
    font-size: 1rem;
    letter-spacing: 0.025rem;
    line-height: 1.56;
  }
}

.ontario-lead-statement {
  font-size: 1.375rem;
  line-height: 1.4;
}

/*** 3 - Generics ***/
/* 
*  Colour classes
*   
*  1 - Background colours
*    1.1 - Greyscale background colours
*    1.2 - Main accent background colours
*    1.3 - Light accent background colours
*    1.4 - Dark accent background colours
*/
/*** 1 - Greyscale background colours ***/
.ontario-bg-white {
  background-color: #FFFFFF;
}

.ontario-bg-greyscale-5 {
  background-color: #f2f2f2;
}

.ontario-bg-greyscale-20 {
  background-color: #cccccc;
}

.ontario-bg-greyscale-40 {
  background-color: #999999;
}

.ontario-bg-greyscale-60 {
  background-color: #666666;
}

.ontario-bg-greyscale-70 {
  background-color: #4d4d4d;
}

.ontario-bg-black {
  background-color: #1a1a1a;
}

/*** 2 - Main accent background colours ***/
.ontario-bg-gold {
  background-color: #CBA52E;
}

.ontario-bg-yellow {
  background-color: #FCAF17;
}

.ontario-bg-taupe {
  background-color: #C1B28F;
}

.ontario-bg-green {
  background-color: #39B54A;
}

.ontario-bg-lime {
  background-color: #8DC63F;
}

.ontario-bg-teal {
  background-color: #49A7A2;
}

.ontario-bg-sky {
  background-color: #00B2E3;
}

.ontario-bg-blue {
  background-color: #3193CC;
}

.ontario-bg-purple {
  background-color: #B975B7;
}

.ontario-bg-orange {
  background-color: #F15A22;
}

.ontario-bg-red {
  background-color: #F0454B;
}

.ontario-bg-magenta {
  background-color: #F03093;
}

/*** 1 - Light accent background colours ***/
.ontario-bg-light-gold {
  background-color: #F0E7CC;
}

.ontario-bg-light-yellow {
  background-color: #F8E5C3;
}

.ontario-bg-light-taupe {
  background-color: #EBE7DB;
}

.ontario-bg-light-green {
  background-color: #D1EFD4;
}

.ontario-bg-light-lime {
  background-color: #DDEDC7;
}

.ontario-bg-light-teal {
  background-color: #CFEDED;
}

.ontario-bg-light-sky {
  background-color: #C5EEFA;
}

.ontario-bg-light-blue {
  background-color: #DBE9F5;
}

.ontario-bg-light-purple {
  background-color: #F1E3F2;
}

.ontario-bg-light-orange {
  background-color: #FEE1D9;
}

.ontario-bg-light-red {
  background-color: #FFE0E2;
}

.ontario-bg-light-magenta {
  background-color: #FEDFF0;
}

/*** 1 - Dark accent background colours ***/
.ontario-bg-dark-gold {
  background-color: #86743D;
}

.ontario-bg-dark-yellow {
  background-color: #8A600D;
}

.ontario-bg-dark-taupe {
  background-color: #7B725C;
}

.ontario-bg-dark-green {
  background-color: #2B8737;
}

.ontario-bg-dark-lime {
  background-color: #5F8129;
}

.ontario-bg-dark-teal {
  background-color: #367A76;
}

.ontario-bg-dark-sky {
  background-color: #1080A6;
}

.ontario-bg-dark-blue {
  background-color: #0369ac;
}

.ontario-bg-dark-purple {
  background-color: #92278F;
}

.ontario-bg-dark-orange {
  background-color: #C64A1C;
}

.ontario-bg-dark-red {
  background-color: #D81A21;
}

.ontario-bg-dark-magenta {
  background-color: #C00264;
}

@font-face {
  font-family: 'Open Sans';
  font-weight: 400;
  font-style: normal;
  src: local("Open Sans"), local("Open-Sans-regular"), url("../fonts/open-sans-400/open-sans-400.woff2") format("woff2"), url("../fonts/open-sans-400/open-sans-400.woff") format("woff"), url("../fonts/open-sans-400/open-sans-400.svg#OpenSans") format("svg");
}

@font-face {
  font-family: 'Open Sans';
  font-weight: 600;
  font-style: normal;
  src: local("Open Sans Semibold"), local("Open-Sans-600"), url("../fonts/open-sans-600/open-sans-600.woff2") format("woff2"), url("../fonts/open-sans-600/open-sans-600.woff") format("woff"), url("../fonts/open-sans-600/open-sans-600.svg#OpenSans") format("svg");
}

@font-face {
  font-family: 'Open Sans';
  font-weight: 400;
  font-style: italic;
  src: local("Open Sans Italic"), local("Open-Sans-italic"), url("../fonts/open-sans-400--italic/open-sans-400--italic.woff2") format("woff2"), url("../fonts/open-sans-400--italic/open-sans-400--italic.woff") format("woff"), url("../fonts/open-sans-400--italic/open-sans-400--italic.svg#OpenSans") format("svg");
}

@font-face {
  font-family: 'Raleway';
  font-weight: 400;
  font-style: normal;
  src: url("../fonts/raleway-modified-400/raleway-modified-400.woff2") format("woff2"), url("../fonts/raleway-modified-400/raleway-modified-400.woff") format("woff"), url("../fonts/raleway-modified-400/raleway-modified-400.svg") format("svg"), local("Raleway"), local("Raleway-400");
}

@font-face {
  font-family: 'Raleway';
  font-weight: 600;
  font-style: normal;
  src: url("../fonts/raleway-modified-600/raleway-modified-600.woff2") format("woff2"), url("../fonts/raleway-modified-600/raleway-modified-600.woff") format("woff"), url("../fonts/raleway-modified-600/raleway-modified-600.svg") format("svg"), local("Raleway SemiBold"), local("Raleway-600");
}

@font-face {
  font-family: 'Raleway';
  font-weight: 700;
  font-style: normal;
  src: url("../fonts/raleway-modified-700/raleway-modified-700.woff2") format("woff2"), url("../fonts/raleway-modified-700/raleway-modified-700.woff") format("woff"), url("../fonts/raleway-modified-700/raleway-modified-700.svg") format("svg"), local("Raleway Bold"), local("Raleway-700");
}

/*** 4 - Elements ***/
/* 
*  Global elements
*   
*  1 - Unclassed elements
*    1.1 - Base
*    1.2 - Typography
*    1.3 - Forms
*   
*/
/*** 1 - Unclassed Elements ***/
/* Base */
html {
  font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 1rem;
}

body {
  line-height: 1.6;
  background-color: #FFFFFF;
  color: #1a1a1a;
  margin: 0;
}

/* Typography */
p {
  font-size: inherit;
  margin-bottom: 1.25rem;
  text-rendering: optimizeLegibility;
  max-width: 48rem;
}

cite {
  font-style: italic;
  line-height: inherit;
}

strong {
  font-weight: bold;
  line-height: inherit;
}

/* Forms */
input[type="text"],
input[type="number"],
input[type="email"],
input[type="date"],
input[type="color"],
input[type="search"],
input[type="tel"],
textarea {
  background-origin: initial;
  height: auto;
  -webkit-appearance: none;
  -moz-appearance: none;
}

input[type="checkbox"] + label,
input[type="radio"] + label {
  font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 1rem;
  font-weight: 400;
  margin-left: 0;
  margin-right: 0;
}

fieldset {
  border: 0;
  margin: 0;
  padding: 0;
  page-break-inside: avoid;
}

legend,
label {
  display: block;
  margin: 0;
}

select {
  background-origin: initial;
  height: auto;
  -webkit-appearance: none;
  -moz-appearance: none;
}

/*** 5 - Objects ***/
.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 calc(-2rem/2);
  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: calc(2rem / 2);
  padding-right: calc(2rem / 2);
  box-sizing: border-box;
  width: 100%;
  float: left;
}

.ontario-column + .ontario-column:last-child,
.ontario-columns + .ontario-column:last-child, .ontario-column +
.ontario-columns:last-child,
.ontario-columns +
.ontario-columns:last-child {
  float: right;
}

.ontario-column + .ontario-column.ontario-end,
.ontario-columns + .ontario-column.ontario-end, .ontario-column +
.ontario-columns.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.33333%;
    right: auto;
  }
  .ontario-small-pull-1 {
    position: relative;
    right: 8.33333%;
    left: auto;
  }
  .ontario-small-push-2 {
    position: relative;
    left: 16.66667%;
    right: auto;
  }
  .ontario-small-pull-2 {
    position: relative;
    right: 16.66667%;
    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.33333%;
    right: auto;
  }
  .ontario-small-pull-4 {
    position: relative;
    right: 33.33333%;
    left: auto;
  }
  .ontario-small-push-5 {
    position: relative;
    left: 41.66667%;
    right: auto;
  }
  .ontario-small-pull-5 {
    position: relative;
    right: 41.66667%;
    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.33333%;
    right: auto;
  }
  .ontario-small-pull-7 {
    position: relative;
    right: 58.33333%;
    left: auto;
  }
  .ontario-small-push-8 {
    position: relative;
    left: 66.66667%;
    right: auto;
  }
  .ontario-small-pull-8 {
    position: relative;
    right: 66.66667%;
    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.33333%;
    right: auto;
  }
  .ontario-small-pull-10 {
    position: relative;
    right: 83.33333%;
    left: auto;
  }
  .ontario-small-push-11 {
    position: relative;
    left: 91.66667%;
    right: auto;
  }
  .ontario-small-pull-11 {
    position: relative;
    right: 91.66667%;
    left: auto;
  }
  .ontario-column,
  .ontario-columns {
    position: relative;
    padding-left: calc(2rem / 2);
    padding-right: calc(2rem / 2);
    box-sizing: border-box;
    float: left;
  }
  .ontario-small-1 {
    width: 8.33333%;
  }
  .ontario-small-2 {
    width: 16.66667%;
  }
  .ontario-small-3 {
    width: 25%;
  }
  .ontario-small-4 {
    width: 33.33333%;
  }
  .ontario-small-5 {
    width: 41.66667%;
  }
  .ontario-small-6 {
    width: 50%;
  }
  .ontario-small-7 {
    width: 58.33333%;
  }
  .ontario-small-8 {
    width: 66.66667%;
  }
  .ontario-small-9 {
    width: 75%;
  }
  .ontario-small-10 {
    width: 83.33333%;
  }
  .ontario-small-11 {
    width: 91.66667%;
  }
  .ontario-small-12 {
    width: 100%;
  }
  .ontario-small-offset-0 {
    margin-left: 0 !important;
  }
  .ontario-small-offset-1 {
    margin-left: 8.33333% !important;
  }
  .ontario-small-offset-2 {
    margin-left: 16.66667% !important;
  }
  .ontario-small-offset-3 {
    margin-left: 25% !important;
  }
  .ontario-small-offset-4 {
    margin-left: 33.33333% !important;
  }
  .ontario-small-offset-5 {
    margin-left: 41.66667% !important;
  }
  .ontario-small-offset-6 {
    margin-left: 50% !important;
  }
  .ontario-small-offset-7 {
    margin-left: 58.33333% !important;
  }
  .ontario-small-offset-8 {
    margin-left: 66.66667% !important;
  }
  .ontario-small-offset-9 {
    margin-left: 75% !important;
  }
  .ontario-small-offset-10 {
    margin-left: 83.33333% !important;
  }
  .ontario-small-offset-11 {
    margin-left: 91.66667% !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: calc(2rem / 2);
    padding-right: calc(2rem / 2);
    box-sizing: border-box;
    float: left;
  }
}

@media only screen and (min-width: 40.0625em) {
  .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.33333%;
    right: auto;
  }
  .ontario-medium-pull-1 {
    position: relative;
    right: 8.33333%;
    left: auto;
  }
  .ontario-medium-push-2 {
    position: relative;
    left: 16.66667%;
    right: auto;
  }
  .ontario-medium-pull-2 {
    position: relative;
    right: 16.66667%;
    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.33333%;
    right: auto;
  }
  .ontario-medium-pull-4 {
    position: relative;
    right: 33.33333%;
    left: auto;
  }
  .ontario-medium-push-5 {
    position: relative;
    left: 41.66667%;
    right: auto;
  }
  .ontario-medium-pull-5 {
    position: relative;
    right: 41.66667%;
    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.33333%;
    right: auto;
  }
  .ontario-medium-pull-7 {
    position: relative;
    right: 58.33333%;
    left: auto;
  }
  .ontario-medium-push-8 {
    position: relative;
    left: 66.66667%;
    right: auto;
  }
  .ontario-medium-pull-8 {
    position: relative;
    right: 66.66667%;
    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.33333%;
    right: auto;
  }
  .ontario-medium-pull-10 {
    position: relative;
    right: 83.33333%;
    left: auto;
  }
  .ontario-medium-push-11 {
    position: relative;
    left: 91.66667%;
    right: auto;
  }
  .ontario-medium-pull-11 {
    position: relative;
    right: 91.66667%;
    left: auto;
  }
  .ontario-column,
  .ontario-columns {
    position: relative;
    padding-left: calc(2rem / 2);
    padding-right: calc(2rem / 2);
    box-sizing: border-box;
    float: left;
  }
  .ontario-medium-1 {
    width: 8.33333%;
  }
  .ontario-medium-2 {
    width: 16.66667%;
  }
  .ontario-medium-3 {
    width: 25%;
  }
  .ontario-medium-4 {
    width: 33.33333%;
  }
  .ontario-medium-5 {
    width: 41.66667%;
  }
  .ontario-medium-6 {
    width: 50%;
  }
  .ontario-medium-7 {
    width: 58.33333%;
  }
  .ontario-medium-8 {
    width: 66.66667%;
  }
  .ontario-medium-9 {
    width: 75%;
  }
  .ontario-medium-10 {
    width: 83.33333%;
  }
  .ontario-medium-11 {
    width: 91.66667%;
  }
  .ontario-medium-12 {
    width: 100%;
  }
  .ontario-medium-offset-0 {
    margin-left: 0 !important;
  }
  .ontario-medium-offset-1 {
    margin-left: 8.33333% !important;
  }
  .ontario-medium-offset-2 {
    margin-left: 16.66667% !important;
  }
  .ontario-medium-offset-3 {
    margin-left: 25% !important;
  }
  .ontario-medium-offset-4 {
    margin-left: 33.33333% !important;
  }
  .ontario-medium-offset-5 {
    margin-left: 41.66667% !important;
  }
  .ontario-medium-offset-6 {
    margin-left: 50% !important;
  }
  .ontario-medium-offset-7 {
    margin-left: 58.33333% !important;
  }
  .ontario-medium-offset-8 {
    margin-left: 66.66667% !important;
  }
  .ontario-medium-offset-9 {
    margin-left: 75% !important;
  }
  .ontario-medium-offset-10 {
    margin-left: 83.33333% !important;
  }
  .ontario-medium-offset-11 {
    margin-left: 91.66667% !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: calc(2rem / 2);
    padding-right: calc(2rem / 2);
    box-sizing: border-box;
    float: left;
  }
}

@media only screen and (min-width: 73.0625em) {
  .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.33333%;
    right: auto;
  }
  .ontario-large-pull-1 {
    position: relative;
    right: 8.33333%;
    left: auto;
  }
  .ontario-large-push-2 {
    position: relative;
    left: 16.66667%;
    right: auto;
  }
  .ontario-large-pull-2 {
    position: relative;
    right: 16.66667%;
    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.33333%;
    right: auto;
  }
  .ontario-large-pull-4 {
    position: relative;
    right: 33.33333%;
    left: auto;
  }
  .ontario-large-push-5 {
    position: relative;
    left: 41.66667%;
    right: auto;
  }
  .ontario-large-pull-5 {
    position: relative;
    right: 41.66667%;
    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.33333%;
    right: auto;
  }
  .ontario-large-pull-7 {
    position: relative;
    right: 58.33333%;
    left: auto;
  }
  .ontario-large-push-8 {
    position: relative;
    left: 66.66667%;
    right: auto;
  }
  .ontario-large-pull-8 {
    position: relative;
    right: 66.66667%;
    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.33333%;
    right: auto;
  }
  .ontario-large-pull-10 {
    position: relative;
    right: 83.33333%;
    left: auto;
  }
  .ontario-large-push-11 {
    position: relative;
    left: 91.66667%;
    right: auto;
  }
  .ontario-large-pull-11 {
    position: relative;
    right: 91.66667%;
    left: auto;
  }
  .ontario-column,
  .ontario-columns {
    position: relative;
    padding-left: calc(2rem / 2);
    padding-right: calc(2rem / 2);
    box-sizing: border-box;
    float: left;
  }
  .ontario-large-1 {
    width: 8.33333%;
  }
  .ontario-large-2 {
    width: 16.66667%;
  }
  .ontario-large-3 {
    width: 25%;
  }
  .ontario-large-4 {
    width: 33.33333%;
  }
  .ontario-large-5 {
    width: 41.66667%;
  }
  .ontario-large-6 {
    width: 50%;
  }
  .ontario-large-7 {
    width: 58.33333%;
  }
  .ontario-large-8 {
    width: 66.66667%;
  }
  .ontario-large-9 {
    width: 75%;
  }
  .ontario-large-10 {
    width: 83.33333%;
  }
  .ontario-large-11 {
    width: 91.66667%;
  }
  .ontario-large-12 {
    width: 100%;
  }
  .ontario-large-offset-0 {
    margin-left: 0 !important;
  }
  .ontario-large-offset-1 {
    margin-left: 8.33333% !important;
  }
  .ontario-large-offset-2 {
    margin-left: 16.66667% !important;
  }
  .ontario-large-offset-3 {
    margin-left: 25% !important;
  }
  .ontario-large-offset-4 {
    margin-left: 33.33333% !important;
  }
  .ontario-large-offset-5 {
    margin-left: 41.66667% !important;
  }
  .ontario-large-offset-6 {
    margin-left: 50% !important;
  }
  .ontario-large-offset-7 {
    margin-left: 58.33333% !important;
  }
  .ontario-large-offset-8 {
    margin-left: 66.66667% !important;
  }
  .ontario-large-offset-9 {
    margin-left: 75% !important;
  }
  .ontario-large-offset-10 {
    margin-left: 83.33333% !important;
  }
  .ontario-large-offset-11 {
    margin-left: 91.66667% !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: calc(2rem / 2);
    padding-right: calc(2rem / 2);
    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.33333%;
    right: auto;
  }
  .ontario-pull-1 {
    position: relative;
    right: 8.33333%;
    left: auto;
  }
  .ontario-push-2 {
    position: relative;
    left: 16.66667%;
    right: auto;
  }
  .ontario-pull-2 {
    position: relative;
    right: 16.66667%;
    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.33333%;
    right: auto;
  }
  .ontario-pull-4 {
    position: relative;
    right: 33.33333%;
    left: auto;
  }
  .ontario-push-5 {
    position: relative;
    left: 41.66667%;
    right: auto;
  }
  .ontario-pull-5 {
    position: relative;
    right: 41.66667%;
    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.33333%;
    right: auto;
  }
  .ontario-pull-7 {
    position: relative;
    right: 58.33333%;
    left: auto;
  }
  .ontario-push-8 {
    position: relative;
    left: 66.66667%;
    right: auto;
  }
  .ontario-pull-8 {
    position: relative;
    right: 66.66667%;
    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.33333%;
    right: auto;
  }
  .ontario-pull-10 {
    position: relative;
    right: 83.33333%;
    left: auto;
  }
  .ontario-push-11 {
    position: relative;
    left: 91.66667%;
    right: auto;
  }
  .ontario-pull-11 {
    position: relative;
    right: 91.66667%;
    left: auto;
  }
}

@media only screen and (min-width: 96.0625em) {
  .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.33333%;
    right: auto;
  }
  .ontario-xlarge-pull-1 {
    position: relative;
    right: 8.33333%;
    left: auto;
  }
  .ontario-xlarge-push-2 {
    position: relative;
    left: 16.66667%;
    right: auto;
  }
  .ontario-xlarge-pull-2 {
    position: relative;
    right: 16.66667%;
    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.33333%;
    right: auto;
  }
  .ontario-xlarge-pull-4 {
    position: relative;
    right: 33.33333%;
    left: auto;
  }
  .ontario-xlarge-push-5 {
    position: relative;
    left: 41.66667%;
    right: auto;
  }
  .ontario-xlarge-pull-5 {
    position: relative;
    right: 41.66667%;
    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.33333%;
    right: auto;
  }
  .ontario-xlarge-pull-7 {
    position: relative;
    right: 58.33333%;
    left: auto;
  }
  .ontario-xlarge-push-8 {
    position: relative;
    left: 66.66667%;
    right: auto;
  }
  .ontario-xlarge-pull-8 {
    position: relative;
    right: 66.66667%;
    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.33333%;
    right: auto;
  }
  .ontario-xlarge-pull-10 {
    position: relative;
    right: 83.33333%;
    left: auto;
  }
  .ontario-xlarge-push-11 {
    position: relative;
    left: 91.66667%;
    right: auto;
  }
  .ontario-xlarge-pull-11 {
    position: relative;
    right: 91.66667%;
    left: auto;
  }
  .ontario-column,
  .ontario-columns {
    position: relative;
    padding-left: calc(2rem / 2);
    padding-right: calc(2rem / 2);
    box-sizing: border-box;
    float: left;
  }
  .ontario-xlarge-1 {
    width: 8.33333%;
  }
  .ontario-xlarge-2 {
    width: 16.66667%;
  }
  .ontario-xlarge-3 {
    width: 25%;
  }
  .ontario-xlarge-4 {
    width: 33.33333%;
  }
  .ontario-xlarge-5 {
    width: 41.66667%;
  }
  .ontario-xlarge-6 {
    width: 50%;
  }
  .ontario-xlarge-7 {
    width: 58.33333%;
  }
  .ontario-xlarge-8 {
    width: 66.66667%;
  }
  .ontario-xlarge-9 {
    width: 75%;
  }
  .ontario-xlarge-10 {
    width: 83.33333%;
  }
  .ontario-xlarge-11 {
    width: 91.66667%;
  }
  .ontario-xlarge-12 {
    width: 100%;
  }
  .ontario-xlarge-offset-0 {
    margin-left: 0 !important;
  }
  .ontario-xlarge-offset-1 {
    margin-left: 8.33333% !important;
  }
  .ontario-xlarge-offset-2 {
    margin-left: 16.66667% !important;
  }
  .ontario-xlarge-offset-3 {
    margin-left: 25% !important;
  }
  .ontario-xlarge-offset-4 {
    margin-left: 33.33333% !important;
  }
  .ontario-xlarge-offset-5 {
    margin-left: 41.66667% !important;
  }
  .ontario-xlarge-offset-6 {
    margin-left: 50% !important;
  }
  .ontario-xlarge-offset-7 {
    margin-left: 58.33333% !important;
  }
  .ontario-xlarge-offset-8 {
    margin-left: 66.66667% !important;
  }
  .ontario-xlarge-offset-9 {
    margin-left: 75% !important;
  }
  .ontario-xlarge-offset-10 {
    margin-left: 83.33333% !important;
  }
  .ontario-xlarge-offset-11 {
    margin-left: 91.66667% !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: calc(2rem / 2);
    padding-right: calc(2rem / 2);
    box-sizing: border-box;
    float: left;
  }
}

@media only screen and (min-width: 120.0625em) {
  .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.33333%;
    right: auto;
  }
  .ontario-xxlarge-pull-1 {
    position: relative;
    right: 8.33333%;
    left: auto;
  }
  .ontario-xxlarge-push-2 {
    position: relative;
    left: 16.66667%;
    right: auto;
  }
  .ontario-xxlarge-pull-2 {
    position: relative;
    right: 16.66667%;
    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.33333%;
    right: auto;
  }
  .ontario-xxlarge-pull-4 {
    position: relative;
    right: 33.33333%;
    left: auto;
  }
  .ontario-xxlarge-push-5 {
    position: relative;
    left: 41.66667%;
    right: auto;
  }
  .ontario-xxlarge-pull-5 {
    position: relative;
    right: 41.66667%;
    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.33333%;
    right: auto;
  }
  .ontario-xxlarge-pull-7 {
    position: relative;
    right: 58.33333%;
    left: auto;
  }
  .ontario-xxlarge-push-8 {
    position: relative;
    left: 66.66667%;
    right: auto;
  }
  .ontario-xxlarge-pull-8 {
    position: relative;
    right: 66.66667%;
    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.33333%;
    right: auto;
  }
  .ontario-xxlarge-pull-10 {
    position: relative;
    right: 83.33333%;
    left: auto;
  }
  .ontario-xxlarge-push-11 {
    position: relative;
    left: 91.66667%;
    right: auto;
  }
  .ontario-xxlarge-pull-11 {
    position: relative;
    right: 91.66667%;
    left: auto;
  }
  .ontario-column,
  .ontario-columns {
    position: relative;
    padding-left: calc(2rem / 2);
    padding-right: calc(2rem / 2);
    box-sizing: border-box;
    float: left;
  }
  .ontario-xxlarge-1 {
    width: 8.33333%;
  }
  .ontario-xxlarge-2 {
    width: 16.66667%;
  }
  .ontario-xxlarge-3 {
    width: 25%;
  }
  .ontario-xxlarge-4 {
    width: 33.33333%;
  }
  .ontario-xxlarge-5 {
    width: 41.66667%;
  }
  .ontario-xxlarge-6 {
    width: 50%;
  }
  .ontario-xxlarge-7 {
    width: 58.33333%;
  }
  .ontario-xxlarge-8 {
    width: 66.66667%;
  }
  .ontario-xxlarge-9 {
    width: 75%;
  }
  .ontario-xxlarge-10 {
    width: 83.33333%;
  }
  .ontario-xxlarge-11 {
    width: 91.66667%;
  }
  .ontario-xxlarge-12 {
    width: 100%;
  }
  .ontario-xxlarge-offset-0 {
    margin-left: 0 !important;
  }
  .ontario-xxlarge-offset-1 {
    margin-left: 8.33333% !important;
  }
  .ontario-xxlarge-offset-2 {
    margin-left: 16.66667% !important;
  }
  .ontario-xxlarge-offset-3 {
    margin-left: 25% !important;
  }
  .ontario-xxlarge-offset-4 {
    margin-left: 33.33333% !important;
  }
  .ontario-xxlarge-offset-5 {
    margin-left: 41.66667% !important;
  }
  .ontario-xxlarge-offset-6 {
    margin-left: 50% !important;
  }
  .ontario-xxlarge-offset-7 {
    margin-left: 58.33333% !important;
  }
  .ontario-xxlarge-offset-8 {
    margin-left: 66.66667% !important;
  }
  .ontario-xxlarge-offset-9 {
    margin-left: 75% !important;
  }
  .ontario-xxlarge-offset-10 {
    margin-left: 83.33333% !important;
  }
  .ontario-xxlarge-offset-11 {
    margin-left: 91.66667% !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: calc(2rem / 2);
    padding-right: calc(2rem / 2);
    box-sizing: border-box;
    float: left;
  }
}

/*** 6 - Components ***/
/* -------------------------------
    Button variables
--------------------------------- */
/* -------------------------------
    Button classes
--------------------------------- */
.ontario-button {
  border: none;
  border-radius: 4px;
  box-sizing: border-box;
  box-shadow: none;
  display: inline-block;
  font-size: 1.125rem;
  font-weight: 600;
  font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  line-height: calc(14/9);
  margin: 0 calc(1rem + 0.75rem) 1.5rem 0;
  min-width: 10rem;
  padding: calc((1rem + 0.25rem) / 2) 1.5rem;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

@media screen and (max-width: 40em) {
  .ontario-button {
    margin-right: 0;
    display: block;
    width: 100%;
  }
}

.ontario-button--primary {
  background-color: #0066CC;
  color: #FFFFFF;
}

.ontario-button--primary:hover {
  background-color: #00478F;
}

.ontario-button--primary:focus {
  background-color: #00478F;
  transition: background-color 0.2s ease-out, box-shadow 0.1s ease-in-out;
}

.ontario-button--primary:active {
  background-color: #002142;
  transition: background-color 0s, box-shadow 0.1s ease-in-out;
}

.ontario-button--secondary {
  background-color: #FFFFFF;
  border: 2px solid #0066CC;
  color: #0066CC;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.ontario-button--secondary:hover {
  background-color: #e0f0ff;
  border-color: #00478F;
  color: #00478F;
}

.ontario-button--secondary:focus {
  background-color: #e0f0ff;
  border-color: #00478F;
  color: #00478F;
  transition: background-color 0.2s ease-out, box-shadow 0.1s ease-in-out;
}

.ontario-button--secondary:active {
  background-color: #c2e0ff;
  border-color: #002142;
  color: #002142;
  transition: background-color 0s, box-shadow 0.1s ease-in-out;
}

.ontario-button--tertiary {
  background-color: transparent;
  color: #0066CC;
  text-decoration: underline;
}

.ontario-button--tertiary:hover {
  background-color: #e8e8e8;
  color: #00478F;
  text-decoration: underline;
}

.ontario-button--tertiary:focus {
  background-color: #e8e8e8;
  color: #00478F;
  text-decoration: underline;
  transition: background-color 0.2s ease-out, box-shadow 0.1s ease-in-out;
}

.ontario-button--tertiary:active {
  background-color: #d1d1d1;
  color: #002142;
  text-decoration: underline;
  transition: background-color 0s, box-shadow 0.1s ease-in-out;
}

.ontario-hint {
  color: #666666;
  display: inline-block;
  margin: 0 0 1rem 0;
  width: 100%;
}

/* -------------------------------
    Checkbox variables
--------------------------------- */
/* -------------------------------
    Checkbox classes
--------------------------------- */
.ontario-checkboxes {
  margin-bottom: 2rem;
  margin-bottom: 2.5rem;
}

.ontario-checkboxes__item {
  position: relative;
  margin: 0 0 1rem;
  padding: 0 2rem 0;
  min-height: 28px;
}

.ontario-checkboxes__item:last-of-type {
  margin: 0;
}

@media screen and (max-width: 40em) {
  .ontario-checkboxes__item {
    padding: 0 2.5rem 0;
    min-height: 32px;
  }
}

.ontario-checkboxes__input {
  cursor: pointer;
  margin: 0;
  position: absolute;
  top: -2px;
  left: -2px;
  opacity: 0;
  width: 36px;
  height: 36px;
  z-index: 1;
  -webkit-tap-highlight-color: transparent;
}

@media screen and (max-width: 40em) {
  .ontario-checkboxes__input {
    width: 40px;
    height: 40px;
  }
}

.ontario-checkboxes__label {
  display: inline-block;
  cursor: pointer;
  line-height: 1.5;
  margin: 0.25rem 0;
  padding: 0 1rem;
  /*
        These styles specifically target IE11. There is a difference in the way the checkbox
        size is rendering, and this targets it to be the correct size
    */
}

@media screen and (max-width: 40em) {
  .ontario-checkboxes__label {
    margin: .33rem 0;
  }
}

.ontario-checkboxes__label:before {
  content: "";
  border: 2px solid #1a1a1a;
  border-radius: 4px;
  position: absolute;
  top: 0;
  left: 0;
  width: 28px;
  height: 28px;
  transition: border 0.1s ease-in-out;
}

@media screen and (max-width: 40em) {
  .ontario-checkboxes__label:before {
    width: 32px;
    height: 32px;
  }
}

.ontario-checkboxes__label:after {
  content: "";
  background-image: url("../icons/ontario-icon-checkbox-checked.svg");
  background-repeat: no-repeat;
  height: 30px;
  width: 30px;
  position: absolute;
  top: 1px;
  left: 1px;
  right: 0;
  bottom: 0;
  opacity: 0;
}

@media screen and (max-width: 40em) {
  .ontario-checkboxes__label:after {
    height: 34px;
    width: 34px;
  }
}

@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
  .ontario-checkboxes__label:before {
    height: 32px;
    width: 32px;
  }
}

@media screen and (-ms-high-contrast: active) and (max-width: 40em), screen and (-ms-high-contrast: none) and (max-width: 40em) {
  .ontario-checkboxes__label:before {
    height: 36px;
    width: 36px;
  }
}

.ontario-checkboxes__input:focus + .ontario-checkboxes__label:before {
  -moz-box-shadow: 0 0 0 4px #009ADB;
  -webkit-box-shadow: 0 0 0 4px #009ADB;
  box-shadow: 0 0 0 4px #009ADB;
  outline: 4px solid transparent;
  transition: all 0.1s ease-in-out;
}

.ontario-checkboxes__input:checked + .ontario-checkboxes__label:after {
  opacity: 1;
}

.ontario-checkboxes__input:checked + .ontario-checkboxes__label:before {
  background-color: #1a1a1a;
}

.ontario-dropdown {
  background-color: #FFFFFF;
  background-image: url("../icons/ontario-icon-dropdown-arrow.svg");
  background-position: right 0.5rem center;
  background-repeat: no-repeat;
  background-size: 2rem;
  padding-right: calc(1rem*2.25);
}

/* These styles are to fix differences in default styling for dropdowns in IE */
.ontario-dropdown::-ms-expand {
  display: none;
}

.ontario-dropdown option {
  font-weight: normal;
}

.ontario-fieldset__legend {
  color: #1a1a1a;
  font-family: "Raleway", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 1.1875rem;
  font-weight: 700;
  margin: 0 0 1rem 0;
  line-height: 1.5;
}

@media screen and (max-width: 40em) {
  .ontario-fieldset__legend {
    font-size: 1.125rem;
    line-height: 1.56;
  }
}

.ontario-fieldset__legend--large {
  font-size: 1.75rem;
  letter-spacing: 0.02rem;
  line-height: 1.2;
}

.ontario-fieldset__legend--large h1 {
  display: inline-block;
  font-size: inherit;
  margin: 0;
}

@media screen and (max-width: 40em) {
  .ontario-fieldset__legend--large {
    font-size: 1.4375rem;
    line-height: 1.39;
  }
}

.ontario-fieldset__legend-flag {
  font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 1rem;
  font-weight: 400;
}

.ontario-form-group:last-of-type {
  margin-bottom: 3rem;
}

.ontario-label {
  cursor: pointer;
  color: #1a1a1a;
  font-family: "Raleway", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 1.1875rem;
  font-weight: 700;
  line-height: 1.5;
  margin: 0 0 1rem 0;
  max-width: 38.75em;
  width: 100%;
}

@media screen and (max-width: 40em) {
  .ontario-label {
    font-size: 1.125rem;
    line-height: 1.56;
  }
}

.ontario-label--large {
  font-size: 1.75rem;
  letter-spacing: 0.02rem;
  line-height: 1.2;
  max-width: 26.25em;
}

.ontario-label--large h1 {
  display: inline-block;
  font-size: inherit;
  margin: 0;
}

@media screen and (max-width: 40em) {
  .ontario-label--large {
    font-size: 1.4375rem;
    line-height: 1.39;
  }
}

.ontario-label__flag {
  font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 1rem;
  font-weight: 400;
}

.ontario-label__flag:before {
  content: '\a0';
}

/* -------------------------------
    Radio button variables
--------------------------------- */
/* -------------------------------
    Radio button classes
--------------------------------- */
.ontario-radios {
  padding: 0 0 0 0.125rem;
  margin-bottom: 2.5rem;
}

.ontario-radios__item {
  position: relative;
  display: block;
  margin: 0 0 1rem;
  padding: 0 2rem 0;
}

.ontario-radios__input {
  cursor: pointer;
  margin: 0;
  position: absolute;
  opacity: 0;
  top: -2px;
  left: -2px;
  width: 36px;
  height: 36px;
  z-index: 1;
}

@media screen and (max-width: 40em) {
  .ontario-radios__input {
    width: 40px;
    height: 40px;
    top: -1.5px;
    left: -1.5px;
  }
}

.ontario-radios__label {
  display: inline-block;
  font-size: 1rem;
  margin: 0.2rem 0;
  padding: 0 0.75rem;
  touch-action: manipulation;
}

@media screen and (max-width: 40em) {
  .ontario-radios__label {
    margin: 0.3rem 0;
    padding: 0 1rem;
  }
}

.ontario-radios__label:before {
  content: "";
  border: 2px solid #1a1a1a;
  border-radius: 50%;
  box-sizing: border-box;
  position: absolute;
  top: 0;
  left: 0;
  width: 32px;
  height: 32px;
  transition: border 0.1s ease-in-out;
}

@media screen and (max-width: 40em) {
  .ontario-radios__label:before {
    width: 36px;
    height: 36px;
  }
}

.ontario-radios__label:after {
  content: "";
  border-radius: 50%;
  border: 10px solid #1a1a1a;
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(6px, 6px);
  opacity: 0;
}

@media screen and (max-width: 40em) {
  .ontario-radios__label:after {
    border: 12px solid #1a1a1a;
  }
}

.ontario-radios__input:focus + .ontario-radios__label:before {
  -moz-box-shadow: 0 0 0 4px #009ADB;
  -webkit-box-shadow: #009ADB;
  box-shadow: 0 0 0 4px #009ADB;
  outline: 4px solid transparent;
  transition: box-shadow 0.1s ease-in-out;
}

.ontario-radios__input:checked + .ontario-radios__label:after {
  opacity: 1;
}

.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: 46em;
  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-textarea {
  display: block;
  width: 100%;
  min-height: 144px;
  margin: 0 0 1.5rem;
  white-space: pre-wrap;
}

/*** 7 - Overrides ***/
/*
* Spacing overrides 
* 
* This .scss loop will create margin & padding helpers classes
*/
.ontario-margin-top-0-\! {
  margin-top: 0;
}

.ontario-padding-top-0-\! {
  padding-top: 0;
}

.ontario-margin-bottom-0-\! {
  margin-bottom: 0;
}

.ontario-padding-bottom-0-\! {
  padding-bottom: 0;
}

.ontario-margin-left-0-\! {
  margin-left: 0;
}

.ontario-padding-left-0-\! {
  padding-left: 0;
}

.ontario-margin-right-0-\! {
  margin-right: 0;
}

.ontario-padding-right-0-\! {
  padding-right: 0;
}

.ontario-margin-top-4-\! {
  margin-top: 0.25rem;
}

.ontario-padding-top-4-\! {
  padding-top: 0.25rem;
}

.ontario-margin-bottom-4-\! {
  margin-bottom: 0.25rem;
}

.ontario-padding-bottom-4-\! {
  padding-bottom: 0.25rem;
}

.ontario-margin-left-4-\! {
  margin-left: 0.25rem;
}

.ontario-padding-left-4-\! {
  padding-left: 0.25rem;
}

.ontario-margin-right-4-\! {
  margin-right: 0.25rem;
}

.ontario-padding-right-4-\! {
  padding-right: 0.25rem;
}

.ontario-margin-top-8-\! {
  margin-top: 0.5rem;
}

.ontario-padding-top-8-\! {
  padding-top: 0.5rem;
}

.ontario-margin-bottom-8-\! {
  margin-bottom: 0.5rem;
}

.ontario-padding-bottom-8-\! {
  padding-bottom: 0.5rem;
}

.ontario-margin-left-8-\! {
  margin-left: 0.5rem;
}

.ontario-padding-left-8-\! {
  padding-left: 0.5rem;
}

.ontario-margin-right-8-\! {
  margin-right: 0.5rem;
}

.ontario-padding-right-8-\! {
  padding-right: 0.5rem;
}

.ontario-margin-top-12-\! {
  margin-top: 0.75rem;
}

.ontario-padding-top-12-\! {
  padding-top: 0.75rem;
}

.ontario-margin-bottom-12-\! {
  margin-bottom: 0.75rem;
}

.ontario-padding-bottom-12-\! {
  padding-bottom: 0.75rem;
}

.ontario-margin-left-12-\! {
  margin-left: 0.75rem;
}

.ontario-padding-left-12-\! {
  padding-left: 0.75rem;
}

.ontario-margin-right-12-\! {
  margin-right: 0.75rem;
}

.ontario-padding-right-12-\! {
  padding-right: 0.75rem;
}

.ontario-margin-top-16-\! {
  margin-top: 1rem;
}

.ontario-padding-top-16-\! {
  padding-top: 1rem;
}

.ontario-margin-bottom-16-\! {
  margin-bottom: 1rem;
}

.ontario-padding-bottom-16-\! {
  padding-bottom: 1rem;
}

.ontario-margin-left-16-\! {
  margin-left: 1rem;
}

.ontario-padding-left-16-\! {
  padding-left: 1rem;
}

.ontario-margin-right-16-\! {
  margin-right: 1rem;
}

.ontario-padding-right-16-\! {
  padding-right: 1rem;
}

.ontario-margin-top-24-\! {
  margin-top: 1.5rem;
}

.ontario-padding-top-24-\! {
  padding-top: 1.5rem;
}

.ontario-margin-bottom-24-\! {
  margin-bottom: 1.5rem;
}

.ontario-padding-bottom-24-\! {
  padding-bottom: 1.5rem;
}

.ontario-margin-left-24-\! {
  margin-left: 1.5rem;
}

.ontario-padding-left-24-\! {
  padding-left: 1.5rem;
}

.ontario-margin-right-24-\! {
  margin-right: 1.5rem;
}

.ontario-padding-right-24-\! {
  padding-right: 1.5rem;
}

.ontario-margin-top-32-\! {
  margin-top: 2rem;
}

.ontario-padding-top-32-\! {
  padding-top: 2rem;
}

.ontario-margin-bottom-32-\! {
  margin-bottom: 2rem;
}

.ontario-padding-bottom-32-\! {
  padding-bottom: 2rem;
}

.ontario-margin-left-32-\! {
  margin-left: 2rem;
}

.ontario-padding-left-32-\! {
  padding-left: 2rem;
}

.ontario-margin-right-32-\! {
  margin-right: 2rem;
}

.ontario-padding-right-32-\! {
  padding-right: 2rem;
}

.ontario-margin-top-40-\! {
  margin-top: 2.5rem;
}

.ontario-padding-top-40-\! {
  padding-top: 2.5rem;
}

.ontario-margin-bottom-40-\! {
  margin-bottom: 2.5rem;
}

.ontario-padding-bottom-40-\! {
  padding-bottom: 2.5rem;
}

.ontario-margin-left-40-\! {
  margin-left: 2.5rem;
}

.ontario-padding-left-40-\! {
  padding-left: 2.5rem;
}

.ontario-margin-right-40-\! {
  margin-right: 2.5rem;
}

.ontario-padding-right-40-\! {
  padding-right: 2.5rem;
}

.ontario-margin-top-48-\! {
  margin-top: 3rem;
}

.ontario-padding-top-48-\! {
  padding-top: 3rem;
}

.ontario-margin-bottom-48-\! {
  margin-bottom: 3rem;
}

.ontario-padding-bottom-48-\! {
  padding-bottom: 3rem;
}

.ontario-margin-left-48-\! {
  margin-left: 3rem;
}

.ontario-padding-left-48-\! {
  padding-left: 3rem;
}

.ontario-margin-right-48-\! {
  margin-right: 3rem;
}

.ontario-padding-right-48-\! {
  padding-right: 3rem;
}

.ontario-margin-top-64-\! {
  margin-top: 4rem;
}

.ontario-padding-top-64-\! {
  padding-top: 4rem;
}

.ontario-margin-bottom-64-\! {
  margin-bottom: 4rem;
}

.ontario-padding-bottom-64-\! {
  padding-bottom: 4rem;
}

.ontario-margin-left-64-\! {
  margin-left: 4rem;
}

.ontario-padding-left-64-\! {
  padding-left: 4rem;
}

.ontario-margin-right-64-\! {
  margin-right: 4rem;
}

.ontario-padding-right-64-\! {
  padding-right: 4rem;
}