/* -------------------------------
    Elements
--------------------------------- */
a,
a svg {
  color: #0066cc;
  fill: #006acc;
  text-decoration: underline;
}

a:hover {
  color: #00478f;
}

a:hover svg {
  fill: #00478f;
}

a:visited,
a:visited svg {
  fill: #551a8b;
  color: #551a8b;
}

a:active {
  color: #002142;
  text-decoration: underline;
}

a:active svg {
  fill: #002142;
}

a > abbr:visited {
  fill: #551a8b;
  color: #551a8b;
}

ul li {
  margin-bottom: 0.85rem;
}

li small {
  display: block;
  margin-top: .5rem;
}

abbr,
abbr[title] {
  text-transform: none;
  font-size: 100%;
  text-decoration: none;
  border-bottom: 2px dotted #999;
}

@media screen and (max-width: 40em) {
  #main-content abbr[title]:after {
    content: " (" attr(title) ")";
    font-size: .85em;
  }
}

img {
  max-width: 100%;
}

main {
  position: relative;
}

/* -------------------------------
    Objects
--------------------------------- */
/* Graphics */
.ontario-graphic {
  max-width: 400px;
  width: 100%;
}

.ontario-graphic--tested {
  position: absolute;
  max-width: 65px;
  left: 20px;
}

@media screen and (max-width: 73em) {
  .ontario-graphic {
    max-width: 300px;
    width: 100%;
  }

  .ontario-graphic--tested {
    max-width: 65px;
    left: 10px;
  }
}

@media screen and (max-width: 40em) {
  .ontario-graphic {
    max-width: 250px;
    width: 100%;
  }
}

/* Typography */
.ontario-text-right {
  text-align: right;
}

.ontario-text-center {
  text-align: center;
}

.ontario-infographic-number {
  font: 1.55rem "Raleway";
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.ontario-infographic-text {
  width: 85%;
  font: 1rem "Open Sans";
  font-weight: bold;
}

/* Lists */
.ontario-list--inline {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

.ontario-list--inline li {
  display: block;
  float: left;
}

.ontario-no-bullet {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

/* -------------------------------
    Components
--------------------------------- */
/* Background colours */
.ontario-background--teal {
  background-color: #49A7A2;
  color: #1A1A1A;
}

.ontario-background--dark-grey {
  background-color: #333;
  color: white;
}

.ontario-background--light-grey {
  background-color: #F2F2F2;
  color: black;
}

.ontario-background--blue {
  background-color: #00B2E3;
  color: black;
}

.ontario-background--light-green {
  background-color: #8DC63F;
  color: black;
}

.ontario-background--light-blue {
  background: #E2F0F4;
}

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

.ontario-background--white {
  background-color: white;
}

.ontario-background--gold {
  background-color: #FCAF17;
}

.ontario-background--yellow {
  background-color: #FFD440;
}

.ontario-background--bright-yellow {
  background-color: #FEFF5B;
}

.ontario-background--orange {
  background-color: #F26A36;
}

.ontario-background--ds-gold {
  background-color: #CBA52E;
}

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

/* Buttons */
.ontario-button--primary:visited,
.ontario-button--primary:hover {
  color: white;
}

.ontario-button--secondary:visited,
.ontario-button--secondary:hover {
  color: #0066CC;
}

/**************************
    General Layout
**************************/
.ontario-content-block {
  padding: 3rem 0;
  background-color: white;
}

@media screen and (max-width: 40em) {
  .ontario-content-block {
    padding: 2rem 0;
  }
}

/* Content blocks */
.ontario-flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
}

.ontario-flex--align-center {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.ontario-flex--justify-content {
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.ontario-flex--align-start {
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
}

/* -------------------------------
        Overrides
--------------------------------- */
/* Elements */
hr.ontario-thick {
  border-top: 4px solid #ededed;
}

.ontario-margin--none {
  margin: 0;
}

.ontario-padding--none {
  padding: 0;
}

.ontario-padding-bottom--none {
  padding-bottom: 0rem;
}

.ontario-nbsp {
  white-space: nowrap;
}


/* Visibility */
.ontario-show-for-sr,
.ontario-show-on-focus {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.ontario-show-on-focus:active,
.ontario-show-on-focus:focus {
  position: static;
  width: auto;
  height: auto;
  overflow: visible;
  clip: auto;
  white-space: normal;
}

@media screen and (max-width: 40em) {
  .ontario-hide-for-small-only {
    display: none;
  }
}

@media screen and (min-width: 40em) {
  .ontario-show-for-small-only {
    display: none;
  }
}

@media screen and (min-width: 73em) {
  .ontario-hide-for-large-only {
    display: none;
  }
}

@media screen and (max-width: 73em) {
  .ontario-show-for-large-only {
    display: none;
  }
}

/*************** Landing Page Styles *******************/
/*********************************
    Intro section
**********************************/
.covid-main-bg {
  background: white;
  margin: 0 auto;
  max-width: 78rem;
  width: 100%;
}

.covid-main__block-one {
  background: #FCAF17
}

.covid-main__block-two {
  margin: 0 auto;
  max-width: 78rem;
  width: 100%;
}

/* section one */
@media screen and (max-width: 40em) {
  .covid-main__block-one img {
    max-width: 280px;
    display: block;
    margin: 0 auto 1.5rem;
  }
}

/* section two */
.covid-main__block-two {
  padding: 1rem 0;
}

.covid-main-block-two__flex-section-container {
  margin: 1rem 0;
}

.covid-main-block-two__flex-section {
  width: 33.3%;
  -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}

.covid-main-block-two__flex-section:nth-of-type(-n+2) {
  border-right: 3px solid #CCCCCC;
}

.covid-main-block-two__flex-section img,
.covid-main-block-two__flex-section a {
  margin: 0 1rem;
}

.covid-main-block-two__flex-section a {
  font-weight: bold;
}

@media screen and (max-width: 40em) {
  .covid-main-block-two__flex-section-container {
    display: block;
  }

  .covid-main-block-two__flex-section {
    padding: 1rem 0;
    width: 100%;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
  }

  .covid-main-block-two__flex-section:nth-of-type(-n+2) {
    border-right: none;
    border-bottom: 3px solid #CCCCCC;
  }

  .covid-main-block-two__flex-section:last-of-type {
    padding-bottom: 0;
  }

  .covid-main-block-two__flex-section img {
    width: 15%;
  }
}

/**************************
    Emergency Banner
**************************/
.covid-banner--emergency a {
  color: #1a1a1a;
  font-weight: bold;
  text-decoration: underline;
}

.covid-banner--emergency a:hover,
.covid-banner--emergency a:focus {
  text-decoration: none;
}

.covid-banner--emergency__icon {
  position: relative;
  top: 5px;
  margin-right: .5rem;
}

/**************************
    Intro Section
**************************/
.ontario-section__covid-intro-block-one {
  background-color: white;
  border-bottom: 4px solid #f2f2f2;
  padding: 3rem 1.75rem 2rem 1rem;
  width: 68.75%;
}

.ontario-section__covid-intro-block-two {
  padding: 3rem 1rem 2rem 2.5rem;
  width: 31.25%;
}

@media screen and (max-width: 73em) {
  .ontario-section__covid-intro-block-one {
    padding-right: 2rem;
    width: 59.5%;
  }

  .ontario-section__covid-intro-block-two {
    padding-left: 2rem;
    width: 40.5%;
  }
}

@media screen and (max-width: 40em) {
  .ontario-section__covid-intro-block-one {
    padding-right: 1rem;
    width: 100%;
  }

  .ontario-section__covid-intro-block-two {
    padding-left: 1rem;
    width: 100%;
  }

  .ontario-section__covid-intro-block-two .ontario-button {
    margin-top: 0;
  }
}

/*************************************
    Information Section (Block 2)
*************************************/
/* Status of cases */
.ontario-section__covid-stats-container {
  padding-top: 2rem;
}

.ontario-section__covid-stats {
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -ms-flex-line-pack: start;
      align-content: start;
}

.ontario-section__covid-stats li {
  width: 16.6%;
}

.ontario-section__covid-stats-links {
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
}

@media screen and (max-width: 73em) {
  .ontario-section__covid-stats-links {
    display: block;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
  }

  .ontario-section__covid-stats-links-span {
    display: none;
  }

  .covid-data-link {
    display: block;
    margin-top: 1rem;
  }

  .ontario-section__covid-stats li {
    width: 33.3%;
  }

  .ontario-section__covid-stats li:nth-child(-n+3) {
    margin-bottom: 3.5rem;
  }
}

/* @media screen and (max-width: 55em) {
  .ontario-section__covid-stats-container > .ontario-flex {
    display: block;
  }

  .ontario-section__covid-stats-links div:last-of-type{
    margin-top: 1.5rem;
  }
} */

@media screen and (max-width: 40em) {
  .ontario-section__covid-stats li {
    width: 50%;
    margin-bottom: 2rem;
  }

  .ontario-section__covid-stats li:nth-child(-n+3) {
    margin-bottom: 2rem;
  }
}


/*********************************
    "Support for" section
*********************************/
.ontario-section__covid-support-container > div {
  width: calc(25% - 1.5rem);
}

.ontario-section__covid-support-container img {
  max-height: 100px;
  height: 100px;
}

.ontario-section__covid-support-container a {
  font-weight: bold;
}

@media screen and (max-width: 62em) {
  .ontario-section__covid-support-container > div {
    width: calc(50% - 1.5rem);
  }
  .ontario-section__covid-support-container > div:nth-child(-n+2) {
    margin-bottom: 1.5rem;
  }
  .ontario-section__covid-support-container {
    flex-wrap: wrap;
  }
}

@media screen and (max-width: 40em) {
  .ontario-section__covid-support-container > div {
    width: 100%;
  }
  .ontario-section__covid-support-container > div:nth-child(3n) {
    margin-bottom: 1.5rem;
  }
}

@media screen and (max-width: 40em) {
  .ontario-section__covid-intro-container {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
  }
}