:root {
  --border_radius: 5px;
  --site-font: 'DM Sans', Arial, sans-serif !important;
  --bs-font-sans-serif: 'DM Sans', Arial, sans-serif !important;
  --bs-btn-font-family: 'DM Sans', Arial, sans-serif !important;
  --bs-nav-link-padding-y: .25rem;
  --bs-gutter-x: 1.5rem;
  --bs-navbar-active-color: #000;

  --site-font-titles: 'Gabarito', Arial, sans-serif !important;
  /* --site-font-titles: 'Antonio', 'Montserrat', Arial, sans-serif !important; */
  /* --site-font-titles: 'DM Sans', 'Montserrat', Arial, sans-serif !important;*/
  --site-font-sans-small: 'DM Sans', Arial, sans-serif !important;
  --site-font-color: #222222;

  --black: #000;
  --white: #ffffff;
  --light-dark: #899394;

  --red: #d7021e;
  --red-dark: #b7021e;
  --red-semaforo: #E11E25;

  --blue: #1C60A2;

  --yellow: #F2B705;
  --yellow-dark: #c59400;
  --yellow-semaforo: #F5EE42;

  --grey: #E4E6DF;
  --grey-dark: #3C4648;
  --grey-light: #f6f7f3;

  --grey-separator: #8d8e8f;
  --green-semaforo: #8CC751;
  --green-light: #C4D7D1;

  --leaf-shape: 15px 15px 15px 15px;
  --leaf-shape-active: 0px 5px 0px 5px;

  --bs-btn-color: #fff;
  --bs-btn-bg: var(--green);
  --bs-btn-border-color: var(--green);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #0b5ed7;
  --bs-btn-hover-border-color: #0a58ca;
  --bs-btn-focus-shadow-rgb: 49, 132, 253;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #0a58ca;
  --bs-btn-active-border-color: #0a53be;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #0d6efd;
  --bs-btn-disabled-border-color: #0d6efd;

  --negativeMarginX: -0.75rem;
  --scrollbar-width: 15px;

  --bs-nav-link-padding-x: 0.8rem;
  --bs-nav-link-padding-y: 0.5rem;
}

@media screen and (min-width: 576px) {
  :root {
    --containerValue: 490px;
    --containerPlusPadding: calc(var(--containerValue) - var(--bs-gutter-x));
    --negativeMarginX: calc(((var(--viewportWidth) - var(--containerPlusPadding))/-2));
    --positiveMarginX: calc(-1* var(--negativeMarginX));
  }
}

@media screen and (min-width: 768px) {
  :root {
    --containerValue: 635px;
  }
}

@media screen and (min-width: 992px) {
  :root {
    --containerValue: 843px;
    --bs-nav-link-padding-x: 1rem;
    --bs-nav-link-padding-y: 0.5rem;
  }
}

@media screen and (min-width: 1200px) {
  :root {
    --containerValue: 1160px;
  }
}

@media screen and (min-width: 1400px) {
  :root {
    --containerValue: 1190px;
  }
}

@media screen and (min-width: 1500px) {
  :root {
    --containerValue: 1275px;
  }
}

@media screen and (min-width: 1600px) {
  :root {
    --containerValue: 1360px;
  }
}

@media screen and (min-width: 1700px) {
  :root {
    --containerValue: 1445px;
  }
}

@media screen and (min-width: 1800px) {
  :root {
    --containerValue: 1530px;
  }
}

@media screen and (min-width: 1920px) {
  :root {
    --containerValue: 1632px;
  }
}