@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wdth,wght@0,62.5..100,100..900;1,62.5..100,100..900&display=swap');

.my-page-lang-fr .my-hide-in-fr,
.my-page-lang-en .my-hide-in-en {
  display: none;
}

.my-color {
  padding: 12px 16px;
  border-radius: 4px;
  margin-bottom: 12px;
  font-weight: bold;
  border: 3px solid black;
}

.my-yellow {
  background-color: #FFC107;
  color: black;
}

.my-black {
  background-color: black;
  color: white;
}

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

.my-light-grey {
  background-color: #D8E9F3;
  color: black;
}

.my-very-light-grey {
  background-color: #EFF6FC;
  color: black;
}

.my-green {
  background-color: #4a825b;
  color: white;
}

.my-white {
  background-color: white;
  color: black;
}

.my-font,
body,
p,
.paragraph,
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6,
.btn {
  font-family: "Noto Sans", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-weight: 400;
}

.navbar-brand {
  font-variation-settings:
    "wdth" 62.5;
  font-weight: 900;
  text-transform: uppercase;
  background: #FFC107;
  border: 3px black dotted;
  padding: 8px 12px;
  border-radius: 10px;
}

.my-logo-static {
  color: #444;
}

.my-font-weight-100 {
  font-weight: 100;
}

.my-font-weight-200 {
  font-weight: 200;
}

.my-font-weight-300 {
  font-weight: 300;
}

.my-font-weight-400 {
  font-weight: 400;
}

.my-font-weight-500 {
  font-weight: 500;
}

.my-font-weight-600 {
  font-weight: 600;
}

.my-font-weight-700 {
  font-weight: 700;
}

.my-font-weight-800 {
  font-weight: 800;
}

.my-font-weight-900 {
  font-weight: 900;
}

.my-font-width-625  {
  font-variation-settings:
    "wdth" 62.5;
}

.my-font-width-70  {
  font-variation-settings:
    "wdth" 70;
}

.my-font-width-80  {
  font-variation-settings:
    "wdth" 80;
}

.my-font-width-90  {
  font-variation-settings:
    "wdth" 90;
}

.my-font-width-100  {
  font-variation-settings:
    "wdth" 100;
}

.btn-primary,
.btn-secondary {
  background: #4a825b;
  color: white;
  border: #4a825b 2px solid;
}

.btn-primary:hover,
.btn-secondary:hover {
  background: white;
  color: #4a825b !important;
  border: #4a825b 2px solid;
}

.btn {
  font-weight: bold;
}

.navbar-collapse {
  background: white;
}

@media (min-width: 992px) {
  .navbar-collapse {
    background: transparent;
  }
}

/** Make Mailchimp form full width **/
#mc_embed_signup {
  width: 100% !important;
}