:root {
  --site-font: "Lato", sans-serif;
  --title-font: "Pontano Sans", sans-serif;
  --cta-font: "Kanit", sans-serif;
  --white: #fff;
  --black: #000;
  --orange: #F28E1C;
  --brown: #5C4D44;
  --beige: #C3B49D;
  --beige-dark: #988973;
  --gray-light: #cccbcb;
  --negativeMarginX--xxs: calc((100vw - 275px - var(--bs-gutter-x) * -0.25) / -2);
  --negativeMarginX: calc((100vw - 458px - var(--bs-gutter-x) * -0.25) / -2);
  --negativeMarginX-small: calc((100vw - 515px - var(--bs-gutter-x) * -0.25) / -2);
  --negativeMarginX-medium: calc((100vw - 695px - var(--bs-gutter-x) * -0.25) / -2);
  --negativeMarginX-large: calc((100vw - 935px - var(--bs-gutter-x) * -0.25) / -2);
  --negativeMarginX-xlarge: calc((100vw - 1115px - var(--bs-gutter-x) * -0.25) / -2);
  --negativeMarginX-xxlarge: calc((100vw - 1295px - var(--bs-gutter-x) * -0.25) / -2);
  --bs-gutter-x: 1.5rem;
  --bs-gutter-y: 0;
  --negativeMarginX: 1.5rem;
  --negativeMarginXInsideDiv: -1.5rem;
  --containerValue: 100%;
  --containerPlusPadding: calc(var(--containerValue) - var(--bs-gutter-x));
}

.navbar {
  --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23730C3C' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.btn-primary {
  --bs-btn-color: var(--black);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: transparent;
  --bs-btn-hover-border-color: transparent;
  --bs-btn-hover-color: var(--orange);
  --bs-btn-hover-bg: transparent;
  --bs-btn-active-color: var(--orange);
  --bs-btn-active-bg: transparent;
  --bs-btn-active-border-color: transparent;
  --bs-btn-active-shadow: inset 0 3px 5px transparent;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: transparent;
  text-transform: uppercase;
}

.btn {
  --bs-btn-focus-box-shadow: 0 0 0 0.25rem transparent;
}

@media screen and (min-width: 768px) {
  :root {
    --negativeMarginX: 1.5rem;
  }
}

@media screen and (min-width: 1400px) {
  :root {
    --negativeMarginX: 3rem;
  }
}

@media screen and (min-width: 1900px) {
  :root {
    --negativeMarginX: 8rem;
  }
}