/*@font-face {
     font-family: "Hydro-Quebec";
     src: url("../fontes/Hydro-Quebec-Maigre-300.woff2") format("woff2"),
          url("../fontes/Hydro-Quebec-Maigre-300.otf#iefix") format("opentype");
     font-weight: 300;
     font-style: normal;
}

  @font-face {
    font-family: "Hydro-Quebec";
    src: url("../fontes/Hydro-Quebec-MaigreItalique-300.woff2") format("woff2"),
         url("../fontes/Hydro-Quebec-MaigreItalique-300.otf#iefix") format("opentype");
    font-weight: 300;
    font-style: italic;
  }*/

@font-face {
  font-family: "Hydro-Quebec";
  src: url("../fontes/Hydro-Quebec-Normal-400.woff2") format("woff2"), url("../fontes/Hydro-Quebec-Normal-400.otf#iefix") format("opentype");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "Hydro-Quebec";
  src: url("../fontes/Hydro-Quebec-Italique-400.woff2") format("woff2"), url("../fontes/Hydro-Quebec-Italique-400.otf#iefix") format("opentype");
  font-weight: 400;
  font-style: italic;
}
@font-face {
  font-family: "Hydro-Quebec";
  src: url("../fontes/Hydro-Quebec-Demi-500.woff2") format("woff2"), url("../fontes/Hydro-Quebec-Demi-500.otf#iefix") format("opentype");
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: "Hydro-Quebec";
  src: url("../fontes/Hydro-Quebec-DemiItalique-500.woff2") format("woff2"), url("../fontes/Hydro-Quebec-DemiItalique-500.otf#iefix") format("opentype");
  font-weight: 500;
  font-style: italic;
}
@font-face {
  font-family: "Hydro-Quebec";
  src: url("../fontes/Hydro-Quebec-Gras-700.woff2") format("woff2"), url("../fontes/Hydro-Quebec-Gras-700.otf#iefix") format("opentype");
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: "Hydro-Quebec";
  src: url("../fontes/Hydro-Quebec-GrasItalique-700.woff2") format("woff2"), url("../fontes/Hydro-Quebec-GrasItalique-700.otf#iefix") format("opentype");
  font-weight: 700;
  font-style: italic;
}
body {
  font-family: "Open Sans", sans-serif;
}

h1,.h1, h2,.h2,h3,.h3,h4,.h4{
  font-family: "Hydro-Quebec", sans-serif;
  font-weight: 500;
  color: #161616;
}

h4, .h4 {
  font-size: 20px;
  line-height: 24px;
}

p {
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0.16px;
  color: #161616;
}

.semi-bold {
  font-weight: 600;
}

strong,
.bold {
  font-weight: 700;
}

li strong {
    color: #161616;
}

small {
  font-size: 14px;
  line-height: 24px;
  letter-spacing: 0.16px;
}

.legende,
figcaption {
  font-size: 13px;
  line-height: 16px;
  letter-spacing: 0.16px;
}

h1, .h1 {
  font-size: 31px;
  line-height: 40px;
}

h2, .h2 {
  font-size: 25px;
  line-height: 32px;
}

h3, .h3 {
  font-size: 20px;
  line-height: 24px;
}

.hq-large {
    font-size: 20px;
    line-height: 24px;
  }

@media (min-width: 768px) {
  h1, .h1 {
    font-size: 39px;
    line-height: 56px;
  }

  h2, .h2 {
    font-size: 31px;
    line-height: 40px;
  }

  h3, .h3 {
    font-size: 25px;
    line-height: 32px;
  }
}
@media (min-width: 1024px) {
  h1, .h1 {
    font-size: 49px;
    line-height: 64px;
  }

  h2, .h2 {
    font-size: 39px;
    line-height: 45px;
  }

  h3, .h3 {
    font-size: 31px;
    line-height: 40px;
  }

  .hq-large {
    font-size: 25px;
    line-height: 32px;
  }
}