:root {
  /* Green */
  --color-green-900: #007300;
  --color-green-800: #00930a;
  --color-green-700: #00a41d;
  --color-green-600: #00b72b;
  --color-green-500: #00c735;
  --color-green-400: #00d745;
  --color-green-300: #65da79;
  --color-green-200: #98e4a2;
  --color-green-100: #c2efc6;
  --color-green-50: #e5f9e8;

  /* Orange */
  --color-orange-900: #ff7100;
  --color-orange-800: #ff8200;
  --color-orange-700: #ffa101;
  --color-orange-600: #ffb402;
  --color-orange-500: #ffc20a;
  --color-orange-400: #ffcb29;
  --color-orange-300: #ffd650;
  --color-orange-200: #ffe183;
  --color-orange-100: #ffecb3;
  --color-orange-50: #fff8e1;

  --primary-color: var(--color-green-400);
  --secondary-color: var(--color-orange-800);
}

.bg-orange-50 {
  background-color: var(--color-orange-50) !important;
}

.text-primary {
  color: var(--primary-color) !important;
}

.brand-logo {
  height: 76px;
  width: auto;
}

.brand-logo-footer {
  height: 80px;
}

.brand-mascot {
  height: 48px;
  width: auto;
}

.brand-mascot-footer {
  height: 56px;
  width: auto;
}

.brand-lockup {
  display: inline-block;
}

.footer-nav-offset {
  margin-top: 0;
}

@media (min-width: 768px) {
  .footer-nav-offset {
    margin-top: 114px;
  }
}

.contacts-image {
  display: block;
  height: 380px;
  width: auto;
  max-width: 100%;
  margin: 0 auto;
}

@media (min-width: 992px) {
  .hero-image { top: 50%; left: 0; transform: translateY(-50%); width: 54%; }
}

@media (min-width: 1200px) {
  .hero-image { width: 55%; }
}

@media (min-width: 1400px) {
  .hero-image { width: 47%; }
}