:root {
  --drhw-std-blue: #284390;
  --drhw-md-blue: #4458a8;
  --drhw-dk-blue: #002369;
  --drhw-hlt-beige: #ffefca;
  --drhw-hlt-red: #c12027;
  --drhw-hlt-green: #f9f871; /*#39FF14;*/
  --drhw-hlt-gold: #d6ba28;
  --drhw-bg-1: #fafafa;
  --drhw-bg-2: #171717;
  --drhw-white: #ffffff;
  --drhw-black: #000000;
  --drhw-main-menu: rgb(from #ffffff r g b / .7);
  --drhw-main-menu-hover: #ffffff;
}
html {
  font-family: 
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Helvetica,
    Arial,
    sans-serif;
}

/* <---------- Header Settings ----------> */
#sp-header {
  background: var(--drhw-dk-blue);
}
.logo-image {
  height: 80px;
}
.sp-megamenu-parent > li > a,
.sp-megamenu-parent > li > span {
  padding: 0 15px;
  font-size: 1rem;
  margin: 0;
  text-transform: uppercase;
}
.sp-megamenu-parent > li > a {
  color: var(--drhw-main-menu);
  font-weight: 600;
}
.sp-megamenu-parent > li:hover > a,
.sp-megamenu-parent > li.active > a,
.sp-megamenu-parent > li.active:hover > a {
  color: var(--drhw-main-menu-hover);
  font-weight: 600;
}
.burger-icon > span {
  background-color: var(--drhw-main-menu);
}

/* <---------- Fluid Type Calculator by Scott Zilinski of Syntax ----------> */

body, h1, h2, h3, h4, h5, h6, p, a, li, .fluid, textarea, input, select, button, th, td {
	--fl: 0;
	--font-size-min: 14;
	--font-size-max: 22;
	--font-ratio-min: 1.25;
	--font-ratio-max: 1.3333333333333333;
	--font-width-min: 320;
	--font-width-max: 1500;
	--fluid-min: calc(var(--font-size-min) * pow(var(--font-ratio-min), var(--fl, 0)));
	--fluid-max: calc(var(--font-size-max) * pow(var(--font-ratio-max), var(--fl, 0)));
	--fluid-preferred: calc((var(--fluid-max) - var(--fluid-min)) / (var(--font-width-max) - var(--font-width-min)));
	--fluid-type: clamp(
		(var(--fluid-min) / 16) * 1rem,
		((var(--fluid-min) / 16) * 1rem) -
			(((var(--fluid-preferred) * var(--font-width-min)) / 16) * 1rem) +
			(var(--fluid-preferred) * var(--variable-unit, 100vi)),
		(var(--fluid-max) / 16) * 1rem
	);
	font-size: var(--fluid-type);
    margin: 0px;
}

/* This makes containers, with container queries use a cqi unit instead of vi */
.fluid-text-container {
	container-type: inline-size;
  --variable-unit: 100cqi;
}

h1, .h1 {--fl: 5; font-weight: 600; line-height: 1;}
h2, .h2 {--fl: 4;}
h3, .h3 {--fl: 3;}
h4, .h4 {--fl: 2;}
h5, .h5 {--fl: 1;}
h6, .h6 {--fl: 0;}

p, li, body {--fl: 1;}

.fs-xs{--fl: -1;}
.fs-base{--fl: 0;}
.fs-s{--fl: 1;}
.fs-m{--fl: 2;}
.fs-l{--fl: 3;}
.fs-xl{--fl: 4;}
.fs-xxl{--fl: 5;}
.fs-xxxl{--fl: 6;}



/* <---------- Page Settings ----------> */
.drhw-home-image img {
  scale: 120%;
  padding-block: 20px;
}
.white-heading > *,
.white-text {
  color: var(--drhw-white);
}
.green-heading > *,
.green-text {
  color: var(--drhw-hlt-green);
}

.gold-heading > *,
.gold-text {
  color: var(--drhw-hlt-gold);
}

.md-blue-cta-panel {
  background: var(--drhw-black);
}

.gold-hlt-panel {
  background: var(--drhw-hlt-gold);
}

.red-hlt-panel {
  background: var(--drhw-hlt-red);
}

.drhw-cta-btn-grn-black {
  color: var(--drhw-hlt-green);
  border: 2px solid var(--drhw-hlt-green);
  border-radius: 0px;
  background: transparent;
  font-size: var(--fluid-type);
}
.drhw-cta-btn-grn-black:hover,
.drhw-cta-btn-grn-black:focus,
.drhw-cta-btn-grn-black:focus-within,
.drhw-cta-btn-grn-blacke:active {
  color: var(--drhw-black);
  border: 2px solid var(--drhw-hlt-green);
  border-radius: 0px;
  background: var(--drhw-hlt-green);
  font-size: var(--fluid-type);
  box-shadow: 0px 0px 20px 0px rgb(from var(--drhw-hlt-green) r g b / .7) !important;
}

.drhw-cta-btn-grn-blue {
  color: var(--drhw-hlt-green);
  border: 2px solid var(--drhw-hlt-green);
  border-radius: 0px;
  background: transparent;
  font-size: calc(var(--fluid-type) * 1.1);
}
.drhw-cta-btn-grn-blue:hover,
.drhw-cta-btn-grn-blue:focus,
.drhw-cta-btn-grn-blue:focus-within,
.drhw-cta-btn-grn-blue:active {
  color: var(--drhw-dk-blue);
  border: 2px solid var(--drhw-hlt-green);
  border-radius: 0px;
  background: var(--drhw-hlt-green);
  font-size: var(--fluid-type);
  box-shadow: 0px 0px 20px 0px rgb(from var(--drhw-hlt-green) r g b / .7) !important;
}

.drhw-info-hlt p {
  font-size: 2rem;
}

a.yellow-link {
  color: rgb(from var(--drhw-hlt-green) r g b / .75)!important;
}

a.yellow-link:hover,
a.yellow-link:focus,
a.yellow-link:focus-within,
a.yellow-link:active {
  color: var(--drhw-hlt-green)!important;
}

/* <---------- Footer Settings ----------> */
#sp-bottom {
  padding: 0px;
}

/* <---------- Media Queries ----------> */
@media (460px <= width <= 992px) {
  .drhw-home-image img {
    scale: 90%;
    padding-block: 0px;
  }
}

@media (width < 992px) {
  h1, .h1 {
    --fl: 4;
    font-weight: 600;
    line-height: 1;
  }
   #sp-header {
    height: 60px;
  }
  .logo .logo-image {
    height: 50px;
  }
}

@media (width < 768px) {
  h1, .h1 {
    --fl: 3;
    font-weight: 600;
    line-height: 1;
  }
}