@charset "utf-8";
/* CSS Document */

/* @import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Barlow+Semi+Condensed:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&family=Oswald:wght@200;300;400;500;600;700&family=Teko:wght@300;400;500;600;700&display=swap'); */



*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  font: inherit;
  padding: 0;
  margin: 0;
}

img,
picture,
svg,
video {
  display: block;
  max-width: 100%;
}

html {
  height: 100dvh;
  font-size: 0.625em;
  scroll-behavior: smooth;
  scroll-padding-top: 4rem;
}

body {
  background: #3b3b3b url(/images/ORDbkg.png) center top;
  background-repeat: no-repeat;
  background-attachment: fixed;
  width: 100dvw;
  min-height: 100%;
  overflow-x: hidden;
  scroll-padding-top: 4rem;
}


:where(h1, h2, h3, h4) {
  --od-lh: 1;
  --od-ff: var(--od-ff-heading);
  --od-fw: 400;
  color: var(--od-c);
  font-family: var(--od-ff);
  font-weight: var(--od-fw);
  line-height: var(--od-lh);
}

:where(h1, h2) {
  --od-mb: 0.75em;
  margin-bottom: var(--od-mb);
}

:where(h5, h6) {
  --od-ff: var(--od-ff-heading);
  --od-fz: var(--od-fz-sm);
  --od-fw: 400;
  --od-lh: 1.5;
  font-family: var(--od-ff);
  font-size: var(--od-fz);
  font-weight: var(--od-fw);
  line-height: var(--od-lh);
}

h1 {
  --od-fz: var(--od-fz-xl);
  font-size: var(--od-fz);
}

h2 {
  --od-fz: var(--od-fz-l);
  font-size: var(--od-fz);
}

h2.title {
  --od-fz: var(--od-fz-l-title);
}

:where(h1, h2).title:not(.leaderRankName.title) {
  text-align: center;
}

h3 {
  --od-lh: 1.2;
  --od-fz: var(--od-fz-m);
  --od-m: 0.75em 0 0.5em 0;
  font-size: var(--od-fz);
  margin: var(--od-m);
}

h3[class$="Bar"] {
  --od-m: 0 0 0.5em 0;
}

h3.title {
  --od-fz: var(--od-fz-m-title);
}

h3.h3header {
  --od-dis: block;
  --od-bdw: 2px;
  --od-bds: solid;
  --od-bdc: darkgray;
  --od-w: 100%;
  --od-m: 4rem 0 2rem 0;
  --od-txa: inherit;
  display: var(--od-dis);
  width: var(--od-w);
  text-align: var(--od-txa);
  border-bottom: var(--od-bdw) var(--od-bds) var(--od-bdc);
  margin: var(--od-m);
}

h4.title {
  --od-fz: var(--od-fz-m);
}

h4 {
  --od-lh: 1.25;
  --od-fz: var(--od-fz-ms);
  --od-m: 1rem 0 .5rem 0;
  font-size: var(--od-fz);
  margin: var(--od-m);
}

h4.h4header {
  --od-bdw: 2px;
  --od-bds: solid;
  --od-bdc: rgb(163, 151, 98, .35);
  --od-dis: block;
  --od-w: 95%;
  --od-txa: inherit;
  display: var(--od-dis);
  width: var(--od-w);
  border-bottom: var(--od-bdw) var(--od-bds) var(--od-bdc);
  text-align: var(--od-txa);
}

/** CHART-H4 */
:is(#tableODregs, [id$="policies"], [id^="train"]) h4.chart-h4 {
  --od-c: white;
  background: var(--od-c-orgBlack);
  border-top: 1.5px solid var(--od-c-red);
  text-align: center;
  padding: .15em 0;
}

[id^="train"] h4.chart-h4 {
  --od-m: inherit inherit 0 inherit;
  margin: var(--od-m);
}

/** end chart-h4 */


p {
  --od-p: 0 0.5rem 0 0.5rem;
  --od-m: 0 0 1rem 0;
  padding: var(--od-p);
  margin: var(--od-m);
}

a {
  --od-ff: inherit;
  --od-fz: inherit;
  --od-otc: none;
  --od-p: 0.225rem 0.3rem;
  color: var(--od-c);
  font-family: var(--od-ff);
  font-size: var(--od-fz);
  text-decoration: var(--od-txd);
  outline-color: var(--od-otc);
}

:where(*::after, *::before),
:where(*::after, *::before) a {
  --od-txd: underline;
  color: var(--od-c);
  text-decoration: var(--od-txd);
}

:where(p, ul, ol, li, td) {
  --od-fz: var(--od-fz-sm);
  --od-ff: var(--od-ff-body);
  --od-lh: 1.5;
  color: var(--od-c);
  font-size: var(--od-fz);
  font-family: var(--od-ff);
  line-height: var(--od-lh);
}

span {
  --od-c: currentcolor;
  --od-fz: inherit;
  --od-ff: inherit;
  --od-lh: inherit;
  color: var(--od-c);
  font-size: var(--od-fz);
  font-family: var(--od-ff);
  line-height: var(--od-lh);
}

[id$="Menu"] span {
  --od-ff: var(--od-ff-condensed);
}

:where(p, span, blockquote, figcaption) {
  max-width: var(--od-read-maxWidth);
}

a[data-link],
:where(p, span, [role="list"], [class^="chart"], [id$="Info"] td, .linkList) a {
  --od-c: var(--od-c-link);
  text-decoration: var(--od-link-td);
  transition: ease-in-out 350ms;
}

a[data-link] {
  --od-link-td: none;
  --od-c: inherit;
}

a:is([data-link^="email"], [data-link^="tel"]) {
  --od-link-td: underline;
}

a[data-link]:hover {
  --od-link-td: underline;
}

a:is([target="_blank"], [data-link]:has([target="_blank"])):not([class^="cac"], [data-title], [href*="mailto"], [href*="tel"], [href^="https://goord"], [href$=".pdf"])::after {
  --od-c: currentcolor;
  --od-fz: 0.7em;
  content: "\1F855";
  filter: opacity(65%);
  font-size: var(--od-fz);
}

a:is([data-link^="image"], [data-link^="hotspot"])::after {
  display: none;
}

a[data-link^="email"]::before {
  display: inline-block;
  content: "\1F4E7";
  margin-right: 0.5rem;
  text-decoration: none;
}

a[data-link^="tel"]::before {
  display: inline-block;
  content: "\260E";
  margin-right: 0.5rem;
  text-decoration: none;
}

a[data-link]:hover,
:where(p, span, [role="list"], [class^="chart"], [id$="Info"] td, .linkList) a:hover {
  --od-c: black;
  text-decoration-color: var(--od-link-tdc-hover);
  text-decoration-thickness: var(--od-link-tdth-hover);
}

:is(* [id]::before, * [id]::after, * [class]::before, * [class]::after) {
  display: inline-block;
  content: "* ";
  text-decoration: var(--od-txd);
}

abbr {
  cursor: context-menu;
  color: var(--od-c);
  text-decoration-color: var(--od-txdcol);
}

blockquote {
  --od-c: inherit;
  --od-ff: var(--od-ff-heading);
  --od-fz: var(--od-fz-m-title);
  --od-ta: center;
  --od-m: 2rem 0;
  color: var(--od-c);
  font-family: var(--od-ff);
  font-size: var(--od-fz);
  text-align: var(--od-ta);
  margin: var(--od-m);
}


:where(ol, ul) {
  --od-ac: auto;
  list-style: none;
  accent-color: var(--od-ac);
}

[role="list"] {
  display: inline-block;
  padding: 0;
  margin-left: 1rem;
  margin-bottom: min(0.7em, 1rem);
  max-width: var(--od-read-maxWidth);
}

[role="list"]>*::before {
  --od-c: #B80808;
  --od-fz: 1.2em;
  --od-fw: 600;
  --od-pr: 1rem;
  --od-content: '\00BB';
  display: inline-block;
  content: var(--od-content);
  color: var(--od-c);
  font-weight: var(--od-fw);
  padding-right: var(--od-pr);
  font-size: var(--od-fz);
}

[role="list"]>*:not(:last-child) {
  --od-pb: 0.4em;
  padding-bottom: var(--od-pb);
}

[role="list"].headingList :is(h4, a, hr)::before {
  display: none;
}

[role="list"].headingList hr {
  margin: 1rem 0;
  height: 2px;
  padding: 0;
}

[role="list"].headingList h4 {
  margin: 1rem 0 .5rem 0;
  padding: 0;
}

.listHeader {
  --od-bg: var(--od-bg-blackBlue);
  --od-c: whitesmoke;
  display: block;
  width: 100%;
  background: var(--od-bg);
  color: var(--od-c);
}

.listHeader::before {
  --od-c: transparent;
}

article:not(:last-of-type) {
  --od-m: 0 0 2rem 0;
  margin: var(--od-m);
}

ul.subList {
  margin-inline-start: 4rem;
}

ul.subList li::before {
  content: "\2022";
  font-weight: 700;
  display: inline-block;
  width: 1rem;
  margin-left: -1rem;
  color: #B80808;
}


/**  AUDIO  */

audio {
  height: 40px;
  width: 28rem;
}

/**  IMAGE  */

figure {
  position: relative;
  --od-w: fit-content;
  --height: auto;
  width: var(--od-w);
  height: var(--od-h);
}

figure.flexGap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

figcaption {
  --od-bg: rgb(0, 0, 0, .4);
  --od-c: white;
  --od-ff: var(--od-ff-semiCondensed);
  --od-fz: var(--od-fz-xs);
  --od-w: 100%;
  --od-h: auto;
  --od-top: unset;
  --od-right: 0;
  --od-bottom: 0;
  --od-left: 0;
  --od-trf: unset;
  --od-bdrd: 0;
  --od-p: 0.25em 0.5em;
  --od-m: 0;
  --od-pos: absolute;
  --od-ta: center;
  position: var(--od-pos);
  top: var(--od-top);
  right: var(--od-right);
  bottom: var(--od-bottom);
  left: var(--od-left);
  width: var(--od-w);
  background: var(--od-bg);
  color: var(--od-c);
  font-family: var(--od-ff);
  font-size: var(--od-fz);
  font-weight: var(--od-fw);
  padding: var(--od-p);
  margin: var(--od-m);
  border: var(--od-bdw), var(--od-bds), var(--od-bdc);
  outline: var(--od-otw), var(--od-ots), var(--od-otc);
  outline-offset: var(--od-otof);
  border-radius: var(--od-bdr);
  height: var(--od-h);
  transform: var(--od-trf);
  text-align: var(--od-ta);
}

figcaption:is([class^="clickFor"], [class^="label"]) {
  --od-w: max-content;
  --od-left: 50%;
  --od-trf: translateX(-50%);
  --od-bdr: 0.5em;
}

figcaption.clickFor-logo {
  --od-pos: relative;
  display: flex;
  align-items: center;
  min-height: 3rem;
}

figcaption.clickFor-logo:hover {
  background-color: rgb(255 255 255 / 15%);
}

figcaption.clickFor-logo a {
  line-height: 1;
  border-bottom: 2px solid transparent;
  transition: ease-in-out 350ms;
}

figcaption.clickFor-logo a:hover {
  border-bottom: 2px solid var(--od-c-red);
}

figcaption[class^="label"] {
  --od-bottom: -20px;
}

/** TOOLTIP */
/** Bottom 0 dropdown full width info box */
[data-title]::after {
  --od-ff: var(--od-ff-semiCondensed);
  --od-fz: var(--od-fz-sm);
  --od-c: whitesmoke;
  position: absolute;
  display: inline-block;
  color: var(--od-c);
  font-family: var(--od-ff);
  font-size: var(--od-fz);
  content: attr(data-title);
  background: linear-gradient(to bottom, #323232 0%, #3F3F3F 40%, #1C1C1C 150%), linear-gradient(to top, rgba(255, 255, 255, 0.40) 0%, rgba(0, 0, 0, 0.25) 200%);
  background-blend-mode: multiply;
  height: auto;
  border-top: 1.5px solid #343434;
  border-right: 1.5px solid #464646;
  border-bottom: 1.5px solid #464646;
  border-left: 1.5px solid #343434;
  border-radius: 0 0 .5rem .5rem;
  padding: .3em .7em;
  margin: -.8rem 1rem 0 0;
  visibility: hidden;
  z-index: 10;
}

[data-title]:hover::after {
  display: block;
  visibility: visible;
}


/**  WEB ACCESSIBILTY - "Provide a descriptive text in between the tags"  */
.sro

/** SRO  Screen Reader Only */
  {
  position: absolute;
  visibility: hidden;
}

.webAcc {
  filter: opacity(0.5%);
}

/*^  /// =============== HIGHLIGHT DIV =============== ///  */
/*^  /// ================ ADDINFO DIV ================ ///  */


:is(.highlighDiv p, .addInfo) {
  --od-bg: transparent;
  --od-ta: center;
  display: var(--od-dis);
  justify-content: center;
  font-family: var(--od-ff);
  font-size: var(--od-fz);
  color: var(--od-c);
  text-align: var(--od-ta);
  background: var(--od-bg);
  width: var(--od-w);
  padding: var(--od-p);
  margin: var(--od-m);

}

.highlightDiv p {
  --od-dis: flex;
  --od-ff: var(--od-ff-roboto);
  --od-fz: var(--od-fz-ms);
  --od-c: white;
  --od-w: 80%;
  --od-p: 0.5em;
  --od-m: 2rem auto 4rem auto;
  --od-bg: var(--od-c-offBlack);
  background: var(--od-bg);
  border-radius: 1rem;
  box-shadow: inset 2px 0 4px rgb(0, 0, 0, 0.4);
  border: 3px solid var(--od-c-red);
}

.addInfo {
  --od-dis: block;
  --od-p: 0.5em;
  --od-m: 3rem auto 4rem auto;
  --od-w: fit-content;
  border-top: 3px double var(--od-c-offBlack);
  border-bottom: 3px double var(--od-c-offBlack);
}

:is(p.addInfo, .addInfo p) {
  --od-ff: var(--od-ff-roboto);
  --od-fz: var(--od-fz-xs);
  --od-c: currentcolor;
  --od-m: 0 auto;
}


/* MARK: BUTTONS
*/
/*^  /// =============== BUTTONS =============== ///  */

/**  ///  ---  BUTTON  ---  ///  */

button,
.button,
[class^="button-"],
[class^="ghostButton-"] {
  --od-c: currentcolor;
  --od-bg: transparent;
  --od-ff: var(--od-ff-condensed);
  --od-fz: var(--od-fz-sm);
  --od-lh: 1;
  --od-bdw: 1.5px;
  --od-bds: solid;
  --od-bdc: currentcolor;
  --od-bdtw: 1.5px;
  --od-bdts: solid;
  --od-bdtc: currentcolor;
  --od-bdrd: 3px;
  --od-p: 0.3em 0.5em;
  --od-m: .15em 0 0 0;
  --od-outw: unset;
  --od-outs: unset;
  --od-outc: unset;
  --od-outo: unset;
  --od-cur: pointer;
  --od-txa: center;
  color: var(--od-c);
  background: var(--od-bg);
  font-family: var(--od-ff);
  font-size: var(--od-fz);
  line-height: var(--od-lh);
  border: var(--od-bdw) var(--od-bds) var(--od-bdc);
  border-top: var(--od-bdtw) var(--od-bdts) var(--od-bdtc);
  border-radius: var(--od-bdrd);
  box-shadow: var(--od-bxsh);
  padding: var(--od-p);
  margin: var(--od-m);
  cursor: var(--od-cur);
  outline: var(--od-outw) var(--od-outs) var(--od-outc);
  outline-offset: var(--od-outo);
  text-align: var(--od-txa);
}

button:hover,
.button:hover,
[class^="button-"]:hover {
  --od-c: whitesmoke;
  --od-bdtc: var(--od-c-gold);
  --od-bg: #343434;
  transition: ease-in-out 500ms;
}

/**  ///  BTN Colors  ///  */

/** BLACK */
:is(.blackBtn, .button-black) {
  --od-bg: #333;
  --od-c: white;
  --od-bdtc: rgb(255, 255, 255, 0.8);
  --od-bdc: rgb(255, 255, 255, 0.8);
}

:is(.blackBtn, .button-black).active:is(:hover, :focus-visible) {
  --od-bg: black;
}

/** KHAKI */
/** whiteRock/travertine */
.button-khaki {
  --od-bg: var(--od-bg-subDD);
  --od-c: Black;
  --od-bdc: white;
  --od-bdtc: var(--od-c-gurkha);
  --od-bdtw: 1.5px;
  --od-bxsh: 0 0 4px 2px rgb(52, 52, 52, .13);
}

.button-khaki:hover {
  --od-bg: black;
  --od-c: white;
  --od-bdtc: var(--od-c-gold);
}






/**  ///  ---  GHOST BUTTON  ---  ///  */

[class^="ghostButton-"] {
  --od-c: rgb(52, 52, 52);
  --od-bg: transparent;
  --od-ff: var(--od-ff-heading);
  --od-p: 0.5em 0.95em;
  --od-m: 1rem 0 0 0;
  --od-bdw: 2px;
  --od-bdc: rgb(52, 52, 52);
  --od-bdtw: 2px;
  --od-dis: block;
  --od-w: fit-content;
  --od-h: max-content;
  --od-trs: ease-in-out 300ms;
  display: var(--od-dis);
  width: var(--od-w);
  height: var(--od-h);
  transition: var(--od-trs);
}

[class^="ghostButton-"]:link {
  text-decoration: var(--od-txd);
}


/**  GHOST BUTTON COLORS  */

/* + default - DARK GRAY & TRANS (B) - DARK GRAY & 75% BLACK (W)  */
:is(.ghostButton-reg, .ghostButton-slider) {
  --od-c: rgb(52, 52, 52);
  --od-bdc: rgb(52, 52, 52);
  --od-bdtc: rgb(52, 52, 52);
}

:is(.ghostButton-reg, .ghostButton-slider):hover {
  --od-c: ghostwhite;
  --od-bdc: rgb(52, 52, 52);
  --od-bdtc: rgb(52, 52, 52);
  --od-bg: rgb(0, 0, 0, 0.75);
}

/* + default - DARK GRAY & 50%BALCK (W) - DARK GRAY & 75% BLACK (W)  */
.ghostButton-slider {
  --od-c: rgb(52, 52, 52);
  --od-bdc: rgb(52, 52, 52);
  --od-bdtc: rgb(52, 52, 52);
  --od-bg: rgb(0, 0, 0, 0.5);
  --od-c: whitesmoke;
}

.ghostButton-slider:is(:hover, :focus-within, .active) {
  --od-c: ghostwhite;
  --od-bdc: rgb(52, 52, 52);
  --od-bdtc: rgb(52, 52, 52);
  --od-bg: rgb(0, 0, 0, 0.75);
}

/* + default - DARK GRAY & 50%BALCK (W) - DARK GRAY & 75% BLACK (W)  */
.ghostButton-black {
  --od-c: rgb(0, 0, 0, 0.95);
  --od-bdc: rgb(0, 0, 0, 0.95);
  --od-bdtc: rgb(0, 0, 0, 0.95);
}

.ghostButton-black:hover {
  --od-c: white;
  --od-bg: rgb(0, 0, 0, 0.75);
  --od-bdc: rgb(0, 0, 0, 0.4);
  --od-bdtc: rgb(0, 0, 0, 0.3);
}

/* + default - DARK GRAY & 50%BALCK (W) - DARK GRAY & 75% BLACK (W)  */
.ghostButton-blkwht {
  --od-c: rgb(52, 52, 52);
  --od-bdc: rgb(52, 52, 52);
  --od-bdtc: rgb(52, 52, 52);
  --od-bg: transparent;
}

.ghostButton-blkwht:hover {
  --od-bdc: rgb(52, 52, 52);
  --od-bdtc: rgb(52, 52, 52);
  --od-bg: ghostwhite;
  --od-c: rgb(52, 52, 52);
}

/* + default - DARK GRAY & 50%BALCK (W) - DARK GRAY & 75% BLACK (W)  */
.ghostButton-khaki {
  --od-c: var(--od-c-offBlack);
  --od-bdc: var(--od-c-chino);
  --od-bdtc: var(--od-c-chino);
  --od-bg: transparent;
  --od-bxsh: 2px 0 8px 1px rgb(0, 0, 0, .11);
}

.ghostButton-khaki:hover {
  --od-bdc: rgb(100, 100, 100);
  --od-bdtc: rgb(70, 70, 70);
  --od-bg: var(--od-c-travertine);
  --od-c: rgb(70, 70, 70);
}

/* + FACEBOOK & TRANS (FB) - DARKER-FACEBOOK & FACEBOOK (W)  */
.ghostButton-fb {
  --od-c: var(--od-c-fb);
  --od-bdc: var(--od-c-fb);
  --od-bdtc: var(--od-c-fb);
  --od-bg: transparent;
  --od-bxsh: 2px 0 8px 1px rgb(0, 0, 0, .11);
}

.ghostButton-fb:hover {
  --od-bdc: #136bde;
  --od-bdtc: #136bde;
  --od-bg: var(--od-c-fb);
  --od-c: white;
}


/**  /// Button Grid layout  ///  */

/*! ///  ---  BUTTON GRID   ---  /// NOT A FAN OF THIS */

.btnGrid {
  --od-gtc: repeat(autofit, minmax(1fr 29rem));
  display: grid;
  grid-template-columns: var(--od-gtc);
  grid-template-rows: auto;
  grid-gap: 1rem;
  width: 100%;
  padding: 1rem 2rem 3rem 2rem;
}

.btnGrid a {
  font-family: var(--od-ff-condensed);
  position: relative;
  display: grid;
  text-align: center;
  color: var(--od-c);
  background: var(--od-bg);
  border-top: 1.5px solid #B80808;
  border-radius: 0 0 .5rem .5rem;
  padding: 0.6em 0.7em;
  transition: ease-in-out 350ms;
}

.btnGrid a::after {
  position: absolute;
  top: .5rem;
  right: .5rem;
}

.btnGrid a:hover {
  background: var(--od-bg);
}

.btnGrid.light a {
  --od-c: #333;
  --od-bg: whitesmoke;
}

.btnGrid.light a:hover {
  --od-bg: ghostwhite;
  box-shadow: 1px 2px 6px rgb(0, 0, 0, 0.4);
}

.btnGrid.dark a {
  --od-c: white;
  --od-bg: var(--od-bg-blackBlue);
}

.btnGrid.dark a:hover {
  --od-bg: black;
}


/*^  ///  ---  TABS   ---  ///  */
.tab {
  font-family: var(--od-tab-ff);
  font-size: var(--od-tab-fz);
  font-weight: var(--od-tab-fw);
  color: var(--od-tab-c);
  background: var(--od-tab-bg);
  line-height: var(--od-tab-lh);
  outline: var(--od-tab-outw, --od-tab-outs, --od-tab-outc);
  border: var(--od-tab-bdw, --od-tab-bds, --od-tab-bdc);
  border-top: var(--od-tab-bdtw, --od-tab-bdts, --od-tab-bdtc);
  border-radius: var(--od-tab-bdr);
  width: var(--od-tab-w);
  height: var(--od-tab-h);
  cursor: var(--od-tab-cur);
  padding: var(--od-tab-p);
  margin: var(--od-tab-m);
}

.tab:is(:hover, :focus-within, :active) {
  --od-tab-c: white;
  --od-tab-bdtc: var(--od-c-red);
  --od-tab-bg: black;
}


/*^  ///  ==========  CONTENT SWITCH BUTTONS  ==========  ///  */


/**  ---  grid area names  ---  */
.desc {
  grid-area: btns;
}

.desccontent {
  grid-area: info;
}

.info {
  grid-area: info;
}

.infoContent {
  grid-area: infoContent;
}

/** -------  Content Switch Buttons  -------  */

.info button,
.desc button {
  --od-bg: #555;
  --od-bdrd: 0.22rem;
  --od-m: 0;
  width: 100%;
}

.info .tab.active,
.desc .tab.active {
  --od-tab-c: black;
  --od-tab-bg: var(--od-bg-h3Tabs);
  --od-tab-bdtw: 12px;
  --od-tab-bdts: solid;
  --od-tab-bdtc: var(--army-c-gold);
  position: relative;
  left: 3px;
  scale: 125%;
  transition: scale ease-in-out 350ms;
}

@media (max-width: 455px) {
  :is(.info .tab, .desc .tab).active:last-of-type {
    left: unset;
    right: 10px;
  }
}

.info,
.desc {
  display: block;
  margin: 0.1em;
  border-radius: 0.22rem;
  padding: 0.15rem;
}

.info,
.infocontent,
.desc,
.desccontent {
  height: max-content;
}

.infocontent,
.desccontent {
  --od-contentSwitch-pb: 0;
  --od-bg: white;
  background: var(--od-bg);
  padding-bottom: var(--od-contentSwitch-pb);
  border-radius: 0 0 2px 2px;
}

/*.info button:hover,
.desc button:hover {
  --od-bg: #333;
  --od-outw: 1.5px;
  --od-outc: #dbdbdb;
  --od-outo: 0.22rem;
}*/

.info button.active,
.desc button.active {
  --od-bg: black;
  --od-bdtc: var(--od-c-gold);
}

.info .btnCon {
  --od-bg: snow;
  border-radius: 3px;
  width: -moz-fit-content;
  width: fit-content;
  height: auto;
  padding: .2rem;
  margin-bottom: 1rem;
  background: var(--od-bg);
}

/**  end global styling for content switch buttons  */



/* MARK: LIST / CARDS
*/

/*^  /// =============== CONTACT LIST / CARDS =============== ///  */

.contactList {
  display: grid;
  width: 100%;
  height: max-content;
  grid-template-columns: var(--od-contactList-columns);
  grid-gap: 2rem;
}

.contactList h4 {
  margin-top: 0;
}

:is(.contactList li, .contactCard) {
  font-variant: normal;
  padding: .7em;
  border-top: var(--od-card-bdtw) var(--od-card-bdts) var(--od-card-bdtc);
  border-radius: var(--od-card-bdrd);
  box-shadow: 0 2px 8px rgb(0, 0, 0, 0.15);
}

.contactList :is(.contactCard, li, a, span) {
  font-family: var(--od-card-ff);
  font-size: var(--od-card-fz);
  font-weight: var(--od-card-fw);
}

:is(.contactList, .contactCard li) span.cardTitle {
  --od-card-fw: 500;
}

:is(.contactList li, .contactCard)>*:not(a) {
  display: block;
}

:is(.contactList a, .contactCard a) {
  --od-card-fw: 400;
  --od-c: #b80808;
  display: inline-block;
  color: var(--od-c);
  text-decoration: underline;
  transition: ease-out 200ms;
  margin-top: 0.35em;
}

/** phone icon */
:is(.contactList, .contactCard, .phone) [href*="tel:"]::before {
  display: inline-block;
  content: "\260E";
  margin-right: 0.5rem;
  text-decoration: none;
}

:is(.contactList, .contactCard, .phone) [href*="tel:"]::after {
  content: "";
}


/** www icon */
:is(.contactList, .contactCard) [href*="http"]:not([href$="pdf"])::before {
  display: inline-block;
  content: "\1F310";
  margin-right: 0.5rem;
  text-decoration: none;
}

:is(.contactList, .contactCard).light [href*="tel:"]::before {
  --od-c: #333;
}

:is(.contactList, .contactCard) a[href*="tel:"]::before {
  --od-c: white;
}

/** email icon */
:is(.contactList, .contactCard, .email) [href*="mailto:"]::before {
  display: inline-block;
  content: "\1F4E7";
  margin-right: 0.5rem;
  text-decoration: none;
}

:is(.contactList, .contactCard, .email) [href*="mailto:"]::after {
  content: "";
}

:is(.contactList, .contactCard).light>* {
  --od-c: #333;
  color: var(--od-c);
  background: whitesmoke;
}

:is(.contactList, .contactCard).dark>* {
  --od-c: white;
  color: var(--od-c);
  background: var(--od-bg-blackBlue);
}

:is(.contactList, .contactCard).dark a {
  --od-c: whitesmoke;
  color: var(--od-c);
  text-decoration: underline;
  padding: 0 .2rem .2rem .2rem;
}

:is(.contactList, .contactCard) a:hover {
  border-radius: .2em;
  text-decoration: none;
}

:is(.contactList, .contactCard).light a:hover {
  outline: .2rem solid rgb(0, 0, 0, 0.25);
  outline-offset: .2rem;
}

:is(.contactList, .contactCard).dark a:hover {
  background: rgb(255, 255, 255, 0.3);
  outline: .2rem solid rgb(255, 255, 255, 0.3);
}

@media (max-width: 640px) {
  .contactList {
    --od-contactList-columns: max(17.5rem, 22.5rem);
    place-content: center;
  }
}



/*^  ///  =====  UNIT TRAINING TABLES  =====  ///  */

.trainingTable {
  --od-ff: var(--od-ff-roboto);
  --od-fz: var(--od-fz-sm);
  --od-c: black;
  display: flex;
  gap: 2px;
  flex-flow: row nowrap;
  font-family: var(--od-ff);
  font-size: var(--od-fz);
  color: var(--od-c);
  background: var(--od-bg);
  border-top: var(--od-card-bdtw) var(--od-card-bdts) var(--od-card-bdtc);
  max-width: 50rem;
}

.trainingTable-col1 {
  text-align: center;
  width: 20%;
}

.trainingTable-col2 {
  width: 80%;
}

:is(.trainingTable-col1, .trainingTable-col2) {
  display: flex;
  flex-flow: column nowrap;
  height: auto;
  padding: 0 0 .7em 0;
}

:is(.trainingTable-col1, .trainingTable-col2) a {
  --od-c: var(--od-c-link);
  color: var(--od-c);
  text-decoration-line: underline;
}

:is(.trainingTable-col1, .trainingTable-col2) a:hover {
  color: currentColor;
  text-decoration-color: var(--od-c-red);
  text-decoration-thickness: 1.5px;
}


:is(.trainingTable-col1, .trainingTable-col2)>*:not(h3) {
  padding: .2em .5em;
}

:is(.trainingTable-col1, .trainingTable-col2)>*:nth-child(odd):not(h3) {
  --od-bg: var(--od-c-contrastWhite);
  background: var(--od-bg);
}

.tableHeader {
  --od-c: ghostwhite;
  --od-bg: var(--od-c-orgBlack);
  color: var(--od-c);
  background: var(--od-bg);
  text-align: center;
  width: 100%;
  padding: .25em .6em;
  margin: 0 0 .25em 0;
}

/**  end of unit training tables  */



/*^  ///  ---------  BACKGROUND IMAGE  ---------  ///  */
.od-bgi {
  position: relative;
  z-index: 1;
}

.od-bgi::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--od-bgi);
  background-size: cover;
  background-position: 50% 50%;
  z-index: -1;
}

/*^  ///  ---------  OBJECT FIT  ---------  ///  */
.obj {
  width: 100%;
  height: auto;
}

[class^="obj-"] {
  width: 100%;

  @media (max-width: 767px) {
    & {
      height: fit-content;
    }
  }
}

.obj-fit {
  object-fit: cover;
  margin: 0 auto;
}

.obj-scaleDown,
.obj-scaleDown-center {
  object-fit: scale-down;
}

.obj-scaleDown-center {
  display: block;
  margin: 0 auto;
}

.leaderImg .obj-scaleDown {
  height: fit-content;
}

/*^  ///  ---  COPYRIGHT  ---  ///  */
.copy::after {
  content: "\00A9";
  font-size: 0.6em;
  vertical-align: text-top;
}


/*^  ///  ---  COLOR HEADING BARS  ---  ///  */
.grayBar,
.medBar,
.darkBar {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  height: auto;
  padding: 0.2em 0.4em 0.3em;
  margin: 0;
  white-space: pre-line;
}

.darkBar {
  --od-c: whitesmoke;
  background: linear-gradient(90deg, #181818 0%, #2c2c2c 50%, #343434 100%);
  border-top: 1.5px solid var(--od-c-red);
  box-shadow: 2px 2px 10px 4px rgb(0, 0, 0, 0.25);
  color: var(--od-c);
}

.conWhiteBar {
  --od-c: black;
  --od-bg: var(--od-c-contrastWhite);
  background: var(--od-bg);
  border-top: 1.5px solid var(--od-c-gold);
  box-shadow: 2px 2px 6px rgb(0, 0, 0, 0.15);
  padding: 0.25em 0.45em;
  color: var(--od-c);
}

/*?  Might want to try Raccoon Back gradient as alternative  */
.grayBar {
  --od-c: black;
  background-image: linear-gradient(135deg, #fdfcfb 0%, #e2d1c3 100%);
  color: var(--od-c);
}

.grayHeaderDiv {
  --od-bg: rgb(0, 0, 0, .15);
  --od-p: 1rem 2rem;
  --od-m: 0 -1.9rem 1rem -1.9rem;
  --od-fw: 500;
  background: var(--od-bg);
  padding: var(--od-p);
  margin: var(--od-m);
  font-weight: var(--od-fw);
}

@media (max-width: 500px) {
  .grayHeaderDiv {
    --od-m: 0 -0.9rem 1rem -0.9rem;
  }
}

.grayHeaderDiv p {
  --od-m: 0;
  margin: var(--od-m);
}

.khakiBar,
.khakiBar-con {
  --od-c: black;
  background-image: linear-gradient(135deg, var(--od-c-ltKhaki) 0%, var(--od-c-bisonHide) 100%);
  color: var(--od-c);
  padding: 0.25em 0.4em;
}

h3.khakiBar-con {
  margin-bottom: 0;
}

h3.khakiBar-con:not(:first-of-type) {
  margin: 2rem 0 0 0;
}



/*^  ///  ==========  CONTAINERS  ==========  ///  */
.container {
  --od-bg: var(--od-bg-lgk);
  background: var(--od-bg);
  width: var(--od-fullpage);
  /** min(100rem, calc(100% - 40px))*/
  --od-p: 0;
  overflow-x: hidden;
  margin-inline: auto;
  padding: var(--od-p);
}

.mainContainer {
  --od-p: 4rem 2rem;
  display: block;
  padding: var(--od-p);
  width: 100%;
}

.sectionContainer {
  --od-bdr: 0 0 1rem 1rem;
  --od-m: 0 0 4rem 0;
  --od-bg: var(--od-con-bg);
  position: relative;
  display: block;
  background: var(--od-bg);
  border-radius: 0 0 1rem 1rem;
  margin: var(--od-m);
}

.contentContainer,
.contentContainer-white {
  --od-p: 2rem;
  position: relative;
  padding: var(--od-p);
}

.contentContainer-white {
  --od-bg: white;
  background: var(--od-bg);
  margin-bottom: 4rem;
}

/** Only used on the OD index page / Maybe future Sub-index pages */
.indexContainer {
  padding: 2rem 2rem 4rem 2rem;
}

/*< ///  CONTAINER MEDIA QUERY  ///  */
@media (max-width: 500px) {
  :is(.mainContainer, .contentContainer) {
    --od-p: 2rem 1rem;
  }

  /*< --------- end media query ------------ */
}

.noContainer {
  --od-bg: transparent;
  --od-m: 0 0 4rem 0;
  --od-bdrd: 0 0 1rem 1rem;
  background: var(--od-bg);
  border-radius: var(--od-bdrd);
  margin: var(--od-m);
}

.noContainer>h2.darkBar {
  --od-bdrd: 0 0 3px 3px;
  border-radius: var(--od-bdrd);
}


.galleryContainer {
  background-color: var(--od-con-gallery-bgc);
  width: var(--od-con-gallery-w);
  padding: var(--od-con-gallery-p);
  margin: var(--od-con-gallery-m);
}

/*!  DONT LIKE THIS - FIND WHAT IS USING IT AND REMOVE IT*/
.parentContainer {
  --od-bg: rgb(255, 255, 255, 0.01);
  --od-w: min(100%, 960px);
  --od-p: 0;
  --od-m: 0 auto;
  width: var(--od-w);
  background: var(--od-bg);
  padding: var(--od-p);
  margin: var(--od-m);
}

.parentContainer .infocontent,
.parentContainer .desccontent {
  --od-mr: 2rem;
  margin-right: var(--od-mr);
}

/*!  DONT LIKE THIS - FIND WHAT IS USING IT AND REMOVE IT*/
.blockContainer {
  display: grid;
  width: 100%;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto;
  justify-content: center;
  column-gap: 2rem;
  padding: 4rem 0;
}

/*^  ///  Quick containers with built in layout  ///  */
/**  ///  GRID  ///  */
.mediaCon,
.gridCon {
  display: grid;
  width: 100%;
  column-gap: 2rem;
}

/**  ///  FLEX  ///  */
.flex {
  display: flex;
  gap: 1rem;
}

.flexCon {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.flexCol {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  row-gap: 1rem;
}

:is(.flexCon>*, .flexCol>*) {
  margin-inline: auto;
}

.jc-center {
  justify-content: center;
}

.ai-center {
  align-items: center;
}

/**  ///  COLUMNS  ///  */
.cols2 {
  columns: 2;
}

.cols2>* {
  max-width: 100%;
}

[role="list"].cols2 {
  max-width: 100%;
}

/*+  ///  MEDIA QUERY  ///  */
@media (max-width: 600px) {
  .cols2 {
    columns: initial;
  }
}


/**  ///  VIDEO  CONTAINER  ///  */
.videoCon {
  --od-w: min(640px, 100%);
  width: var(--od-w);
  height: fit-content;
  margin: 20px auto;
}

.videoCon iframe {
  object-fit: cover;
  object-position: center;
  width: 100%;
  aspect-ratio: 16 / 9;
}

/**  end of quick containers  */



/*^  ///  ==========  Social Media logo Contacts  ==========  ///  */
.social {
  --od-dis: flex;
  --od-jc: space-evenly;
  --od-w: max(31.5rem, 80%);
  --od-m: 0 auto;
  display: var(--od-dis);
  justify-content: var(--od-jc);
  width: var(--od-w);
  margin: var(--od-m);

}

.social img {
  --od-w: 5rem;
  --od-trs: cubic-bezier(0.91, 0.13, 0.73, 0.54) 500ms;
  width: var(--od-w);
  transition: var(--od-trs);
  margin-bottom: 0.5rem;
}

.social img:is(:hover, :focus-within, :active) {
  --od-filter: invert(80%);
  filter: var(--od-filter);
}

@media (max-width: 540px) {
  .social {
    --od-w: 100%;
  }
}


/*^  ///  ==========  Scrollbar & Thumb  ==========  ///  */



/*^ ///  ==========  SHORT-CUT CLASSES  ==========  ///  */


/**  ///  FLOATS  ///  */
.imgLeft {
  --od-m: 0 1rem 0.5rem 0;
  float: left;
  margin: var(--od-m);
}

.imgRight {
  --od-m: 0 0 0.5rem 1rem;
  float: right;
  margin: var(--od-m);
}

.imgCenter {
  display: block;
  margin-inline: auto;
}

.floatFlexImg {
  --od-dis: inherit;
  --od-fl: left;
  display: var(--od-dis);
  float: var(--od-fl);
  margin: .5rem 1rem;
}


/**  ///  -----  POSITIONS  -----  ///  */
.posA {
  position: absolute;
}

.posAT {
  position: absolute;
  top: 0;
}

.posAR {
  position: absolute;
  right: 0;
}

.posAB {
  position: absolute;
  bottom: 0;
}

.posAL {
  position: absolute;
  left: 0;
}

.posR {
  position: relative;
}

.posF {
  position: fixed;
}

.posT {
  top: 0;
}

.posR {
  right: 0;
}

.posB {
  bottom: 0;
}

.posL {
  left: 0;
}

.inset0 {
  inset: 0;
}


/**  ///  -----  DISPLAYS  -----  ///  */
.disBl {
  display: block;
}

.disInBl {
  display: inline-block;
}

.disIn {
  display: inline;
}


/**  ///  <br> DELAYED BREAKS  ///  */

[class^="brMobile-"] {
  --od-dis: none;
  display: var(--od-dis);
}

@media (max-width: 600px) {
  .brMobile-600 {
    --od-dis: inline-block;
  }
}

@media (max-width: 700px) {
  .brMobile-700 {
    --od-dis: inline-block;
  }
}

@media (max-width: 800px) {
  .brMobile-800 {
    --od-dis: inline-block;
  }
}

@media (max-width: 900px) {
  .brMobile-900 {
    --od-dis: inline-block;
  }
}


/**  ///  -----  MARGINS  -----  ///  */
/** TOP */
.mt0 {
  margin-top: 0;
}

.mt10 {
  margin-top: 1rem;
}

.mt20 {
  margin-top: 2rem;
}

.mt30 {
  margin-top: 3rem;
}

.mt40 {
  margin-top: 4rem;
}

/** BOTTOM */
.mb0 {
  margin-bottom: 0;
}

.mb10 {
  margin-bottom: 1rem;
}

.mb20 {
  margin-bottom: 2rem;
}

.mb30 {
  margin-bottom: 3rem;
}

.mb40 {
  margin-bottom: 4rem;
}

/** CENTER X | Y*/
.mX-auto {
  margin-inline: auto;
}

.my-auto {
  margin-block: auto;
}

.my-20 {
  margin-block: 2rem;
}

.my-30 {
  margin-block: 3rem;
}

/** LEFT */
.ml0 {
  margin-left: 0;
}

.ml10 {
  margin-left: 1rem;
}

.ml20 {
  margin-left: 2rem;
}

.ml30 {
  margin-left: 3rem;
}

.ml40 {
  margin-left: 4rem;
}

/** RIGHT */
.mr0 {
  margin-right: 0;
}

.mr10 {
  margin-right: 1rem;
}

.mr20 {
  margin-right: 2rem;
}

.mr30 {
  margin-right: 3rem;
}

.mr40 {
  margin-right: 4rem;
}


/**  ///  -----  OPACITIES  -----  ///  */
.alpha00 {
  opacity: 0%;
}

.alpha10 {
  opacity: 10%;
}

.alpha15 {
  opacity: 15%;
}

.alpha20 {
  opacity: 20%;
}

.alpha25 {
  opacity: 25%;
}

.alpha30 {
  opacity: 30%;
}

.alpha35 {
  opacity: 35%;
}

.alpha40 {
  opacity: 40%;
}

.alpha45 {
  opacity: 45%;
}

.alpha50 {
  opacity: 50%;
}

.alpha55 {
  opacity: 55%;
}

.alpha60 {
  opacity: 60%;
}

.alpha65 {
  opacity: 65%;
}

.alpha70 {
  opacity: 70%;
}

.alpha75 {
  opacity: 75%;
}

.alpha80 {
  opacity: 80%;
}

.alpha85 {
  opacity: 85%;
}

.alpha90 {
  opacity: 90%;
}

.alpha95 {
  opacity: 95%;
}


/**  ///  -----  WIDTHS  -----  ///  */
.w1 {
  width: 1rem;
}

.w2 {
  width: 2rem;
}

.w3 {
  width: 3rem;
}

.w35 {
  width: 3.5rem;
}

.w4 {
  width: 4rem;
}

.w5 {
  width: 5rem;
}


/**  ///  -----  TEXT ALIGN  -----  ///  */
.txtC {
  text-align: center;
}

.txtL {
  text-align: left;
}

.txtR {
  text-align: right;
}


/**  ///  MISSING PSUEDO ELEMENTS  ///  */

.firstWord {
  --od-ff: var(--od-ff-heading);
  --od-fz: 1.75em;
  --od-fw: inherit;
  font-family: var(--od-ff);
  font-size: var(--od-fz);
  font-weight: var(--od-fw);
}


/**  ///  ==========  MISC  ==========  ///  */
/*!  CACreq needs to be eliminated  */
.CACreq::after,
.cac::after {
  display: inline-block;
  content: " \00A0(CAC)";
  font-size: .6em;
  font-weight: 500;
  color: #660000;
  text-decoration: none;
  vertical-align: top;
  margin-top: 2px;
}

#mainMenu .cac::after {
  color: red;
}

/** BLOCK NOTES */
.blockNotes {
  --od-w: fit-content;
  --od-p: .75em 1.5em;
  --od-m: 2rem auto;
  --od-bg: white;
  background: var(--od-bg);
  width: var(--od-w);
  border-radius: 1rem;
  padding: var(--od-p);
  margin: var(--od-m);
}

.blockNotes p {
  --od-fz: var(--od-fz-sm);
  --od-ff: var(--od-ff-condensed);
  --od-ta: center;
  --od-m: 0;
  --od-w: min(90ch, 100%);
  font-size: var(--od-fz);
  font-family: var(--od-ff);
  text-align: var(--od-ta);
  width: var(--od-w);
}

.blockNotes p:first-of-type {
  border-top: 3px double var(--od-c-offBlack);
}

.blockNotes p:last-of-type {
  border-bottom: 3px double var(--od-c-offBlack);
}

/** end blockNotes */


.note {
  --od-fz: var(--od-fz-note);
  font-size: var(--od-fz);
}

.cap {
  --od-fz: var(--od-fz-cap);
  font-size: var(--od-fz);
}


/*^  ///  CSS CLASS OPTIONS FOR BOLD, ITALIC & UNDERLINE  ///  */

/**  BOLD  */
.b400 {
  font-weight: 400;
}

.b500 {
  font-weight: 500;
}

.b600 {
  font-weight: 600;
}

:where(.bold, .b700) {
  font-weight: 700;
}

.bRed {
  color: red;
  font-weight: bold;
}

/**  ITALIC  */
.italic {
  font-style: italic;
}

.boldItalics {
  font-weight: bold;
  font-style: italic;
}

.noItalic {
  font-style: normal;
}

/**  TEXT TRANSFORMS  */
.uppercase {
  text-transform: uppercase;
}

.smCaps {
  font-variant: small-caps;
}

.caps {
  text-transform: capitalize;
}

/**  UNDERLINE  */
.underline {
  text-decoration: underline;
}

.boldUnderline {
  font-weight: bold;
  text-decoration: underline;
}

.noUnderline {
  text-decoration: none;
}

/**  STRIKETHROUGH  */
.strike {
  text-decoration: line-through;
}

/**  DEACTIVE  */
.deactive {
  --od-c: #646464;
  text-decoration: line-through;
  cursor: not-allowed;
}

/**  TEXT COLORS  */
.whiteRock {
  --od-c: var(--od-c-whiteRock);
  color: var(--od-c);
}



/* ^ ///  CLASS NAMES FOR COMMON CONTENT  ///   */

/**  AD BANNER  */
.adBanner {
  display: flex;
  justify-content: center;
  width: 100%;
  margin: 0 auto 2rem auto;
}


/** ///  ORG CHART  ///  */
/* Put class on picture tag */
.orgChart {
  max-width: 65rem;
  margin-inline: auto;
}


/*^  ///  -----  GRID AREA NAMES  -----  ///  */
/** MISSION */
[id^="mission"] {
  grid-area: mission;
}

/** VISION */
[id^="vision"] {
  grid-area: vision;
}

/** INTRO */
[id^="intro"] {
  grid-area: intro;
}

/** ABOUT */
[id^="about"] {
  grid-area: about;
}

/** HISTORY */
[id^="history"] {
  grid-area: history;
}

/** RESPONSIBILITIES */
[id^="responsibilities"] {
  grid-area: respon;
}

/** TRAIN */
[id^="train"] {
  grid-area: train;
}

/** TRAIN EQUIPMENT */
[id^="trainEquip"] {
  grid-area: equip;
}

/** COURSE DESCRIPTION */
[id^="courseDesc"] {
  grid-area: course;
}

/** CONTACT */
[id^="contact"] {
  grid-area: contact;
}

/** SOCIAL */
[id^="social"] {
  grid-area: social;
}

/** PURPOSE */
[id^="purpose"] {
  grid-area: purpose;
}

/** OBJECTIVE */
[id^="objective"] {
  grid-area: objective;
}

/** RESOURCE */
[id^="resource"] {
  grid-area: resource;
}

/** HERO IMAGE */
[id^="heroImage"] {
  grid-area: image;
}

/** IFORMATION */
[id^="info"] {
  grid-area: info;
}

/** PROCESS */
[id^="process"] {
  grid-area: process;
}

/** TIMELINE */
[id^="timeline"] {
  grid-area: timeline;
}

/** GALLERY */
[id^="gallery"] {
  grid-area: gallery;
}

/** VIDEO */
[id^="video"] {
  grid-area: video;
}

/** CATEGORIES */
[id^="categories"] {
  grid-area: categories;
}

/** TABLE */
[id^="table"] {
  grid-area: table;
}

/** ORG CHART*/
[id^="orgChart"] {
  grid-area: chart;
}

[id^="orgChart"] img {
  --od-mw: 800px;
  max-width: var(--od-mw);
  display: block;
  margin: 0 auto;
}

/** INPAGE MENU */
[id$="MenuCon"].inpage {
  grid-area: menu;
}


/*^  ///  SCROLLBARS  ///  */
html::-webkit-scrollbar {
  width: var(--od-scrollbar-w);
}

html::-webkit-scrollbar-track {
  background: var(--od-scrollbar-bg);
}

html::-webkit-scrollbar-thumb {
  background: var(--od-scrollbar-thumb);
  border-radius: 5px;
  border: 3px solid var(--od-scrollbar-bg);
}


/*^  ///  BACK TO TOP  ///  */
#backToTop {
  position: fixed;
  bottom: 2rem;
  right: 0;
  display: block;
  font-family: var(--od-ff-condensed);
  font-size: var(--od-fz-ms);
  background: var(--od-bg-glassWater);
  border-radius: .5em 0 0 .5rem;
  border-bottom: 2px solid #646464;
  border-left: 2px solid #646464;
  box-shadow: 0 4px 8px rgb(0 0 0 / 40%);
  padding: .5em 1em .5em 1.25em;
  transition: ease-in-out 350ms;
  z-index: 5000;
}

#backToTop a {
  position: relative;
  inset: 0;
}

#backToTop:is(:hover, :focus-visible, :active) {
  background: var(--od-c-orgBlack);
  color: white;
  cursor: pointer;
}


/*^  ///  ============================================== */
/*^  ====================  INDEX PAGE  =============  ///  */
#odIndex.container {
  width: min(100rem, calc(100% - 4rem));
  margin-inline: auto;
}

/* #odIndex.container {
  width: min(100%, calc(100% - 2px));
  margin-inline: auto;
} */

#odMain {
  display: grid;
  grid-template:
    "hero hero"
    "objs coo"
    "hiNews coo"
    "susNews coo"
    "links links"
    "social social"
    /1fr 24rem;
  align-items: start;
  
  width: 100%;
}

/* #odMain {
  display: grid;
  grid-template:
    "hero hero"
    "objs objs"
    "hiNews susNews"
    "coo coo"
    "links links"
    "social social"
    /1fr auto;
  align-items: start;
  width: 100%;
} */

/*^  ///  =====  HERO SECTION | MISSION/VISION & #COOASK   =====  ///  */

#hero-odMain {
  position: relative;
  display: grid;
  grid-template: "goOD odIntro"
    / 1fr minmax(36rem, 45%);
  column-gap: 2rem;
  grid-area: hero;
  width: 100%;
  height: 100%;
  min-height: 40rem;
  padding: 4rem 2rem;
  overflow: hidden;
  z-index: 0;
}

#hero-odMain.od-bgi::before {
  --od-bgi: url(/images/TowingM1074.jpg);
  background-position: bottom center;
  /*filter: grayscale(80%) opacity(40%);*/
}


/**  GO ORDNANCE  */
#goOD {
  position: relative;
  display: block;
  background-color: #000000;
  background-blend-mode: multiply;
  inset: 0;
}

/**  ORDNANCE LEADERSHIP SECTION  */

#COO {
  grid-area: coo;
  width: 100%;
  height: 100%;
}

#COO .ldrCon {
  display: flex;
  flex-direction: column;
  row-gap: 1.5rem;
  align-items: center;
  background-color: #DCD9D4;
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.50) 0%, rgba(0, 0, 0, 0.50) 100%), radial-gradient(at 50% 0%, rgba(255, 255, 255, 0.10) 0%, rgba(0, 0, 0, 0.50) 50%);
  background-blend-mode: soft-light, screen;
  height: 100%;
  padding-block: 2rem;
}

/* #COO .ldrCon {
  display: flex;
  flex-direction: row;
  column-gap: 1.5rem;
  align-items: flex-start;
  justify-content: space-evenly;
  background-color: #370617;
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.50) 0%, rgba(0, 0, 0, 0.50) 100%), radial-gradient(at 50% 0%, rgba(255, 255, 255, 0.10) 0%, rgba(0, 0, 0, 0.50) 50%);
  background-blend-mode: soft-light, screen;
  height: 100%;
  padding-block: 2rem;
} */

#COO .ldrCard {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  width: 20rem;
  height: 31.35rem;
  overflow: hidden;
}

#COO #odCoo img {
  outline: 1px solid var(--od-c-orgBlack);
  outline-offset: -1px;
  align-self: center;
  object-fit: cover;
}

#COO .ldr-linkText {
  position: relative;
  display: grid;
  inset: 0;
  height: 100%;
}

#COO .ldrCard h2 {
  position: absolute;
  --od-c: whitesmoke;
  --od-fz: var(--od-fz-ms);
  --od-lh: 1.3;
  --od-p: .3em;
  font-size: var(--od-fz);
  font-family: var(--od-ff-condensed);
  font-weight: 400;
  text-align: center;
  background-color: rgb(0 0 0 / 65%);
  background: var(--od-bg-preDark-radial);
  width: 100%;
  padding: var(--od-p);
  margin: 0;
  text-shadow: 1px 1px 1px rgb(0, 0, 0, 0.8);
  isolation: isolate;
  z-index: 1;
}

#COO .ldrCard h2:not(.rankName) {
  top: 0;
}

#COO .ldrCard h2.rankName {
  bottom: 0;
}

#COO .ldrCard img {
  display: block;
  width: 20rem;
  box-shadow: 2px 2px 4px rgb(0 0 0 / 1%);
  margin: auto 0;
  transition: ease-in-out 350ms;
}

#COO .ldrCard img:hover {
  box-shadow: 2px 2px 4px rgb(0 0 0 / 65%);
  scale: 1.2;
}


/**  INTRO  */

#odIntro {
  --od-c: whitesmoke;
  width: 100%;
  height: auto;
  grid-area: odIntro;
  padding: 2rem;
  margin: auto 2rem 2rem auto;
  background-color: rgb(220, 217, 212, .20);
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.50) 0%, rgba(0, 0, 0, 0.50) 100%), radial-gradient(at 50% 0%, rgba(255, 255, 255, 0.10) 0%, rgba(0, 0, 0, 0.50) 50%);
  background-blend-mode: soft-light, screen;
  box-shadow: 2px 2px 10px 6px rgb(0, 0, 0, .15);
  z-index: 2;
}

#odIntro p {
  --od-ff: var(--od-ff-semiCondensed);
  --od-fz: var(--od-fz-m);
}


/*^  /// =======  OBJECTIVES - MISSION & VISION  ======= ///  */

#objectives {
  display: grid;
  grid-area: objs;
  grid-template: "mis vis"
    /60% 1fr;
  width: 100%;
  margin: 0 0 1rem 0;  
}

/* #objectives {
  display: grid;
  grid-area: objs;
  grid-template: "mis vis"
    /60% 1fr;
  width: 100%;
  margin: 0;
} */

#odVision {
  grid-area: vis;
}

#odMission {
  grid-area: mis;
}

:is(#odVision, #odMission) p {
  margin: 0.5rem 0.5rem 0.5rem 0.8rem;
  padding: 0.5em 0.5em;
  border-left: 1.5px solid rgba(0, 0, 0, .5);
}


/*^  ///  ===============  GALLERY  ===============  ///  */
/**  Gallery styles are in /assets/a11y-slider-od.css  */
#mainGallery {
  grid-area: gallery;
  height: 100%;
}

#mainGalleryCon {
  position: relative;
  display: grid;
  inset: 0;
  height: calc(100% - 3.7rem);
  place-content: center;
}

#mainGalleryCon.od-bgi::before {
  --od-bgi: url(/images/BG-141414-55_45waves.png);
  object-position: center center;
}

#mainGallery h2.darkBar {
  margin: 0;
}

.galleryContainer {
  --od-bg: transparent;
  position: relative;
  background: var(--od-bg);
  padding: 1rem;
  z-index: inherit;
}


/*^  ///  =====  HIGHLIGHTS/NEWS  =====  ///  */
#highNews {
  grid-area: hiNews;
}

#susNews {
  grid-area: susNews;
}

article:is(.highlights, .news) {
  display: flex;
  flex-flow: column nowrap;
  width: 100%;
  height: auto;
  gap: 20px;
  
}

#highNews .highlightBody p:first-of-type {
  margin-top: 0;
}

#highNews .highlightHeader {
  grid-area: links;
  /** background is set with .od-c-khaki class */
  /** customVars.css after root - line 690 or greater */
  padding: .5rem;
}

#highNews .highlightHeader [class$="khaki"] {
  border-bottom: 1px solid var(--od-c-chino);
}


#highNews h3 {
  --od-m: 0 0 0.5rem 0;
  width: 100%;
}

#highNews :is(.news, .highlights) .highlightHeader h3 {
  margin: .25rem 0 .35rem 0;
}

#highNews .news a:has(img) {
  padding: 0;
}

.artSource {
  text-transform: uppercase;
}

:is(.artSource, .artAuth) {
  --od-ff: var(--od-ff-semiCondensed);
  --od-fz: var(--od-fz-xs);
  --od-fw: 500;
  font-family: var(--od-ff);
  font-size: var(--od-fz);
  font-weight: var(--od-fw);
}

.artAuth datetime {
  display: inline;
}

.highlightCon {
  display: flex;
  /* width: min(65rem, 100%); */
  width: 100%;
  margin-inline: auto;
  height: auto;
  background: ghostwhite;
  border-radius: 10px;
  border: 2px 2px 10px 6px rgb(0, 0, 0, .15box-shadow);
  padding: 5px;
}

/* .videoCon {
  
    display: flex;
    width: 70%;
    height: auto;
    background: ghostwhite;
    border-radius: 10px;
    border: 2px 2px 10px 6px rgb(0, 0, 0, .15box-shadow);
    padding: 5px;
  } */


#highNews p {
  width: 100%;
  max-width: 100%;
}

#highNews .highlights h3 :not(.highlightHeader h3) {
  margin: 0 0 0 1rem;
}

#highNews .highlightBody {
  position: relative;
  padding: 1rem;
}

.highlightCon {
  flex-direction: column;
}

.highlightCon img {
  width: 25rem;
  height: fit-content;
}

#highNews img.imgLeft {
  margin: 0 .75rem .35rem 0;
}

.newsP {
  max-width: 100%;
}


/*^ ///  =====  RESOURCE LINKS  =====  ///  */
#imgLinks {
  grid-area: links;
  /*border: 1px inset #dcdcdc;
  margin-top: 5px;*/
  background-color: #DCD9D4;
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.50) 0%, rgba(0, 0, 0, 0.50) 100%), radial-gradient(at 50% 0%, rgba(255, 255, 255, 0.10) 0%, rgba(0, 0, 0, 0.50) 50%);
  background-blend-mode: soft-light, screen;
}

#imgLinks .imgLinksCon {
  display: grid;
  column-gap: 2rem;
  row-gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(150px, 200px));
  grid-template-rows: auto;
  width: 100%;
  place-content: center;
  padding: 2rem 1rem 4rem 1rem;
}

#imgLinks img {
  display: block;
  width: 200px;
  margin: 1rem auto;
  box-shadow: 3px 0 9px 3px rgb(0, 0, 0, .75);
  max-height: 60px;
  transition: ease-in-out 300ms;
}

#imgLinks img:hover {
  transform: scale(1.1);
}

#imgLinks hr {
  display: none;
  margin: 0;
}

/* //// ASK ORDNANCE DROPDOWN LINKS //// */
#ask-ord {
  position: relative;
}

#ask-ord-links {
  display: none;
  position: absolute;
  padding: 2px 0 0 0;
  margin: -8px 0 0 20px;
  z-index: 1;
}

#ask-ord:hover #ask-ord-links {
  display: block;
}

#ask-ord-links #ask-mil img {
  padding: 0;
  margin: 0;
  border-top: 1px solid gray;
}

#ask-ord-links #ask-teams img {
  padding: 0;
  margin: 0;
}

#ask-ord-links #ask-email img {
  padding: 0;
  margin: 0;
  border-top: 1px solid gray;
}

#ask-ord #ask-img {
  margin-bottom: 10px;
}

@media (max-width: 768px) {
  #ask-ord-links {
    margin-left: 0;
  }
}

/* //// ASK ORDNANCE DROPDOWN LINKS //// */

/*^ ///  =====  STAY CONNECTED  =====  ///  */
#stayConnected {
  width: 100%;
  grid-area: social;
}

#stayConnectedCon {
  display: grid;
  grid-template-columns: 30% 1fr;
  grid-template-rows: auto;
  grid-template-areas: "image posts";
  width: 100%;
  height: 85rem;
  align-items: center;
}

#stayConnectedCon.od-bgi::before {
  --od-bgi: url(../images/followUs-sidePhoto.jpg);
  background-position: left center;
}

#stayConnected .fbPostsBgCon {
  grid-area: posts;
  background: linear-gradient(90deg, rgba(233, 233, 233, 0) 0%, rgba(205, 201, 194, 0.20) 20%, rgba(205, 201, 194, 0.5) 50%, rgba(205, 201, 194, 1) 100%);
}

#fbPosts .ghostButton-fb {
  --od-m: 1rem 2rem 0 auto;
  font-size: var(--od-fz-xs);
  display: block;
}

#connectedImage {
  grid-area: image;
  position: relative;
  display: flex;
}

#connectedImage h2.title {
  --webkit-writing-mode: vertical-rl;
  white-space: nowrap;
  writing-mode: vertical-rl;
  font-size: var(--od-fz-stayConnected);
  font-family: var(--od-ff-title);
  color: rgb(255, 255, 255, 0.3);
  margin: 1rem auto;
  text-transform: uppercase;
  font-weight: 500;
  filter: drop-shadow(2px 4px 6px rgb(0, 0, 0, 0.75));
  line-height: .8;
}

#fbFeed {
  grid-area: feed;
  width: 100%;
}

.fb-sizer {
  max-width: 500px;
  overflow: hidden;
}

#facebook {
  margin: 1em auto;
  width: min(calc(100% - 2rem), 45rem);
  min-height: 55rem;
}

.fbPostsCon {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  grid-template-areas: "mon"
    " tue"
    " wed";
  align-items: center;
  width: auto;
  padding: 5rem 0;
}

#stayConnected .fbPost {
  --od-m: 0;
  display: flex;
  flex-flow: column nowrap;
  width: 90%;
  height: fit-content;
  background-color: ghostwhite;
  box-shadow: 2px 2px 10px 6px rgb(0, 0, 0, .15);
  padding: 2rem;
  margin: var(--od-m);
}

#fbMon {
  grid-area: mon;
}

#fbWed {
  grid-area: wed;
}

#fbTue {
  position: relative;
  grid-area: tue;
  transform: scale(1.03);
  z-index: 1;
}

:is(#fbMon, #fbWed) {
  transition: ease-in-out 300ms;
}

:is(#fbMon, #fbWed):hover {
  scale: 1.05;
  z-index: 2;
}

#fbPosts {
  width: 100%;
}

#fbPosts h3 {
  --od-ff: var(--od-ff-title);
  --od-fz: var(--od-fz-m-title);
  font-style: italic;
  margin: 0;
}

#fbPosts p {
  margin-top: 0;
  max-width: 100%;
}

#fbPosts img {
  margin-top: 0;
}

#fbPosts hr {
  visibility: hidden;
}


/*^  ///  FACEBOOK FEED  ///  */

#fbFeed {
  justify-content: center;
  background-color: rgb(245, 246, 247);
  padding-bottom: 1.5rem;
}

#fb-not-showing {
  background-color: #e9e8e8;
}

/* new facebook feed */
.fb-card {
  box-shadow: 0 4px 10px 2px rgba(0, 0, 0, 0.418);
  border-radius: 8px;
  max-width: 55%;
  margin-left: 18%;
  padding: 10px;
  background-color: #fff;
}

.fb-header {
  display: flex;
  align-items: center;
  margin-bottom: 5px;
}

.fb-header p {
  margin: auto 0;
}

/* new facebook feed */

/*^  ///  ==========  ///  FOOTER  ///  ==========  ///  */

footer {
  margin-inline: auto;
  overflow-y: hidden;
}

#footerMain {
  --od-c: #6B6B6B;
  position: relative;
  display: flex;
  flex-flow: column nowrap;
  font-family: var(--od-ff-body);
  font-weight: 400;
  font-size: var(--od-fz-xs);
  width: 100%;
  height: max-content;
  background: linear-gradient(to bottom, #323232 0%, #3F3F3F 40%, #1C1C1C 150%), linear-gradient(to top, rgba(255, 255, 255, 0.40) 0%, rgba(0, 0, 0, 0.25) 200%);
  background-blend-mode: multiply;
}

#footerMain a {
  text-decoration: none;
}

#footerMain h4,
#footerMain h5 {
  --od-ff-heading: RobotoCondensed;
  font-size: var(--od-fz-xs);
}

#footerMain>* {
  width: 100%;
  height: max-content;
}

#footerMain .offWebFoot {
  border-top: 1.5px solid #434343;
  border-bottom: 1.5px double #434343;
  text-align: center;
  background-color: black;
  padding-inline: 1rem;
}

#footerLinks {
  --od-c: whitesmoke;
  display: flex;
  justify-content: center;
  border-top: 1.5px double #434343;
  border-bottom: 1.5px double #434343;
  padding: 20px 5%;
}

#footerLinks>* {
  flex-basis: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

#footerMain h5 {
  color: whitesmoke;
  font-family: var(--od-ff-heading);
  text-transform: uppercase;
  font-weight: 400;
  margin: 0 0 10px 0;
}

#footerLinks :is(.socialFoot, .legalFoot, .resourceFoot) a,
#footerMain .mainLinks a {
  --od-c: whitesmoke;
  position: relative;
  color: var(--od-c);
  display: flex;
  width: max-content;
  height: auto;
  padding: 0 8px 3px 8px;
  border-bottom: 2px solid transparent;
  border-radius: 0 0 3px 3px;
  transition: ease-in-out 300ms;
}

#footerLinks :is(.socialFoot, .legalFoot, .resourceFoot) a:hover,
#footerMain .mainLinks a:hover {
  background-color: rgb(0, 0, 0, 0.13);
  border-bottom: 2px solid var(--od-c-red);
}

#footerMain .commandLogos {
  display: flex;
  align-items: center;
  justify-items: center;
  padding: 10px 10%;
}

#footerMain .commandLogos figure {
  overflow-y: clip;
}

#footerMain .commandLogos>* {
  flex-basis: 100%;
  display: flex;
  justify-content: center;
}

/** .socialLinks is image links used --  .mainLinks is textLinks used 
----------------------------------------------------------------------*/
#footerMain .mainLinks,
#footerMain .socialLinks {
  display: flex;
  justify-content: space-evenly;
  padding: 20px;
}

#footMain .mainLinks {
  padding: 2rem;
}

#footerMain .socialLinks {
  max-width: 80rem;
  margin-inline: auto;
  padding: 1rem;
}

#footerMain .mainLinks a {
  width: max-content;
  height: auto;
  text-align: center;
  padding: 0 .8rem .3rem .8rem;
}

#footerMain a.fb-link:hover {
  filter: invert(100%) drop-shadow(3px 1px 2px #0197f6);

}

#footerMain a.x-link:hover {
  filter: invert(100%) drop-shadow(3px 1px 2px #27fb6b);

}

#footerMain a.ig-link:hover {
  filter: invert(100%) drop-shadow(3px 1px 1.5px #c051ff);

}

#footerMain a.li-link:hover {
  filter: invert(100%) drop-shadow(3px 1px 2px #34e5ff);

}

#footerMain a.yt-link:hover {
  filter: invert(100%) drop-shadow(3px 1px 2px #ff002b);

}

#footerMain .socialLinks img {
  height: 3rem;
  width: auto;
  transition: ease-in-out 200ms;

}


#footerMain .yearCopy {
  background-color: black;
  text-align: center;
}

#footerMain .offWebFoot h4,
#footerMain h4.copy {
  margin: 0;
  padding: 0.25em 0 0.4em;
}



span.cac-enabled {
  display: flex;
  justify-content: center;
}

.bde59aside {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;

}

section .bde59section {
  margin-top: 50px;
}


/*<  ///  =====  ///  INDEX - MEDIA QUERIES  ///  =====  ///  */

/*< ///  Media Query - MaxWidth 1020px  ///  */
@media (max-width: 1020px) {

  #odIndex.container {
    width: min(100rem, calc(100% - 2rem));
  }

  /**  end of max-width 1020px  */
}

/* < ///  Media Query - MaxWidth 950px   ///  */
@media (max-width: 950px) {

  #fbFeed {
    max-width: 600px;
    margin-left: auto;
  }

  /**  ///  end max-width: 950px  ///  */
}


/*<  ///   Media Query - MaxWidth 768px  ///  */
@media (max-width: 768px) {

  #odMain {
    grid-template: "hero"
      "gallery"
      "objs"
      "coo"
      "hiNews"
      "susNews"
      "links"
      "social"
      / 1fr;
  }

  #hero-odMain {
    grid-template: "odIntro cooAsk"
      /1fr 17.5rem;
    padding: 4rem 2rem 4rem 0;
  }

  #odIntro {
    margin: auto auto auto 0;
  }

  /*#COO .ldrCon {
    flex-direction: row;
    justify-content: space-evenly;
    flex-wrap: wrap;
    width: 100%;
    height: 35rem;
    background-color: unset;
    background-image: unset;
  }*/

  .odCOO {
    grid-area: coo;
  }

  .odCSM {
    grid-area: csm;
  }

  .odCWO {
    grid-area: cwo;
  }

  .odDep {
    grid-area: dep;
  }

  .odEOD {
    grid-area: eod;
  }

  #COO .ldrCon {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "coo coo"
      "csm cwo"
      "dep eod";
    column-gap: 1rem;
    row-gap: 1rem;
    place-items: center;
    padding-block: 2rem 6rem;
  }

  #COO .ldrCard {
    width: 17.5rem;
    height: 27.75rem;
  }

  #COO h2.rankName {
    margin-block-start: -4.5rem;
  }

  #imgLinks .imgLinksCon {
    display: grid;
    grid-gap: 2rem;
    grid-template-columns: repeat(auto-fit, minmax(150px, 200px));
    grid-template-rows: auto;
    width: 100%;
    place-content: center;
    padding: 2rem 1rem 4rem 1rem;
  }

  #imgLinks img {
    margin: 0;
  }

  #imgLinks hr {
    display: none;
  }

  /**  ///  end of max-width 768px  ///  */
}


/*<  ///  Media Query - MaxWidth 700px   ///  */
@media (max-width: 700px) {

  #fbPosts,
  #fbFeed {
    position: relative;
    z-index: 1;
  }

  /**  ///  end max-width: 700px  ///  */
}


/*<  ///  Media Query - MaxWidth 640px   ///  */
@media (max-width: 640px) {

  #hero-odMain {
    grid-template: "cooAsk"
      "odIntro"
      / 1fr;
  }

  #cooAsk {
    position: relative;
    margin: 0 auto 4rem auto;
  }

  #odCoo {
    margin: 0;
  }

  /*#objectives {
    flex-direction: column;
  }*/

  #highNews .highlightCon {
    width: 100%;
  }

  /** end of max-width 640px */
}


/*<  ///  Media Query - MaxWidth 600px   ///  */
@media (max-width: 600px) {}


/*<  ///  Media Query - MaxWidth 540px   ///  */
@media (max-width: 540px) {
  #cooAsk {
    transform: unset;
    flex-direction: column;
    height: fit-content;
    gap: 1rem;
  }

  #fbPosts img.imgLeft {
    float: unset;
  }

  #fbPosts img {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
  }

  #connectedImage h2.title {
    color: rgb(255 255 255 / 13%);
  }

  #objectives {
    grid-template: "mis"
      "vis"
      /1fr;
  }

  #odMission {
    margin-block-end: 2rem;
  }

  /** end of max-width 540px */
}


/*<  ///  Media Query - MaxWidth 460px   ///  */
@media (max-width: 460px) {

  #highNews .imgLeft {
    float: unset;
  }

  #highNews :is(img, div.imgLeft img) {
    margin: 0 auto .35rem auto;
  }

  /** end of max-width 460px */
}


/*<  ///  Media Query - MaxWidth 425px   ///  */
@media (max-width: 425px) {

  #COO .ldrCon {
    display: grid;
    grid-template: "coo"
      "csm"
      "cwo"
      "dep"
      "eod"
      /auto;
  }

  #connectedImage {
    display: none;
  }

  #stayConnectedCon {
    grid-template-columns: 1fr;
    grid-template-areas: "posts";
    padding-left: 2.5rem;
  }

  .fb-card {
    margin-left: 20%;
  }

  /** end of max-width 425px */
}













/*^  ///  ============================================= */
/*^========================  SUBPAGES  ===================== */
/*^=============================================  ///  */


/**  -----  ///  BANNER / MENU ///  -----  */

.banner {
  width: 100%;
  height: 110px;
  background-image: url(/images/ODbanner.png);
  background-position: top center;
  background-repeat: no-repeat;
}

@media (max-width: 1024px) {
  .banner {
    background-position: top right;
  }
}


.bannerCon {
  position: relative;
  display: flex;
  justify-content: center;
  width: var(--od-fullpage);
  height: 130px;
  margin: 0 auto;
}

.titleLogo {
  grid-area: logo;
}

.titleRow1 {
  grid-area: row1;
}

.titleRow2 {
  grid-area: row2;

}

.titleCon {
  position: absolute;
  top: 0;
  left: 10px;
  display: grid;
  align-items: center;
  grid-template-columns: 75px 1fr;
  grid-template-rows: 50% 50%;
  grid-template-areas: "logo row1"
    "logo row2";
  /*   background: linear-gradient(to bottom, #323232 0%, #3F3F3F 40%, #1C1C1C 150%), linear-gradient(to top, rgba(255, 255, 255, 0.40) 0%, rgba(0, 0, 0, 0.25) 200%);
  background-blend-mode: multiply;
   box-shadow: 2px 4px 2px rgb(0, 0, 0, 0.4);*/
  height: 7.5rem;
  padding: 1rem 2rem 1rem 1rem;
  margin: 1.75rem 1.75rem 1.75rem 0;
  z-index: 9950;
  place-content: center;
}

.titleCon>* {
  height: 100%;
}

.titleLogo {
  width: max-content;
  height: auto;
}

:is(#header, #mobile) .titleRow1 h2,
:is(#header, #mobile) .titleRow2 h2 {
  --od-c: white;
  margin: 0 0 0 1rem;
}

.titleRow1 h2 {
  --od-ff-: var(--od-ff-semiCondensed);
  --od-fz: var(--od-fz-l);
  padding-bottom: 0.75rem;
  border-bottom: 1.5px solid var(--od-c-red);
}

:is(#header, #mobile) .titleRow2 h2 {
  --od-ff: var(--od-ff-semiCondensed);
  --od-fz: var(--od-fz-xs);
  --od-fw: 400;
  padding-top: 0.95rem;
  text-align: center;
}

@media (max-width: 400px) {
  .bannerCon {
    justify-content: flex-start;
    height: 110px;
  }

  .titleCon {
    grid-template: "row1"
      "row2"
      / 1fr;
    height: 100%;
    margin: auto 0;
  }

  .titleLogo {
    display: none;
  }

}







/*^  ---------------  ///  HEADER  ///  ---------------  */

header {
  position: relative;
  width: var(--od-fullpage);
  height: max-content;
  margin: 0 auto;
  background-image: var(--od-bg-ltk);
}

.headerCon {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 12.5rem;
  padding: 20px;
}

.headerCon:has(img) {
  min-height: 14rem;
}

.headerCon img {
  margin-right: 1rem;
}

header h1 {
  text-shadow: 1px 2px 4px rgb(0, 0, 0, 0.4);
  margin-bottom: .35em;
}



h1.subHeader,
.subHeader {
  --od-lh: 1;
  line-height: var(--od-lh);
  font-family: var(--od-ff-heading);
  font-size: var(--od-fz-l-title);
  font-weight: 400;
  text-shadow: 1px 2px 4px rgb(0, 0, 0, 0.25);
  margin: 0 0 0 2rem;
}

.headerImg {
  display: block;
  width: max-content;
  margin: 0 .2rem 0 auto;
}

.headerImg img {
  width: 100%;
  height: auto;
  max-height: 145px;
}

.pageHeader,
.pageHeaderCrest {
  position: absolute;
  display: flex;
  align-items: center;
  z-index: 1;
}

@media (max-width: 500px) {
  .pageHeaderCrest img {
    display: none;
  }
}

.pageHeader {
  flex-direction: column;
}

@media (max-width: 1030px) {

  :where(header, .container) {
    width: var(--od-fullpage);
    margin: 0 2rem;
  }
}

@media (max-width: 750px) {
  .headerImg img {
    opacity: 0.35;
  }
}

@media (max-width: 640px) {

  header,
  .container {
    margin: 0 1rem;
  }
}

@media (max-width: 500px) {

  header .pageHeaderCrest br {
    display: none;
  }

}




/*^ ---------------------- Defense Ammunition Center --------------------*/
/*^ ---------------------------------- (DAC) --------------------------- */

#dacBtn {
  position: absolute;
  right: 30px;
  bottom: 10px;
}

#dacMain .mission {
  grid-area: mission;
}

#dacMain .training {
  grid-area: training;
}

#dacMain .orgChart {
  grid-area: chart;
}

#dacMain {
  display: grid;
  grid-template:
    "mission training"
    "chart chart"
    / 1fr 1fr;
  column-gap: 4rem;
}

#dacMain .orgChart {
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  background: white;
}

#dacMain .orgChart img {
  width: min(100%, 550px);
  height: auto;
  margin: 1rem auto;
}

/* < ///  --------------  MEDIA QUIERIES  -------------  ///  */
@media (max-width: 600px) {

  #dacMain {
    grid-template:
      "mission"
      "training"
      "chart"
      / 1fr;
  }

}

/** -----------------  end dac  ---------------- */



/*^ ------------------- Personnel Development Office --------------------- */
/*^ ---------------------------------- (PDO)  ---------------------------- */


#pdoMission {
  grid-area: mission;
}

#pdoContacts {
  grid-area: contacts;
}

#pdoProInfo {
  grid-area: proInfo;
}

#pdoFunctions {
  grid-area: functions;
}

#pdoOrgChart {
  grid-area: orgChart;
}

#pdoMain {
  display: grid;
  width: 100%;
  grid-template: "gallery mission"
    "proInfo proInfo"
    "contacts contacts"
    / 50rem 1fr;
  grid-gap: 2rem;
}

#pdoGallery.noContainer {
  background: #333;
  max-width: 61rem;
  margin-inline: auto;
}

#pdoProInfo .contentContainer>* {
  columns: 2;
  max-width: 100%;
}

#pdoContacts a:link {
  font-weight: 400;
}

#pdoMain .contactList {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(auto-fit, minmax(17.5rem, 1fr));
  grid-template-rows: auto;
  grid-gap: 2rem;
}


#pdoMission.od-bgi::before {
  --od-bgi: url(/pdo/images/ODbranchWeek-WestPoint.png);
  background-size: 95%;
  background-repeat: no-repeat;
  background-position: bottom right;
  border-radius: 0 0 1rem 1rem;
  opacity: 0.25;
}

#pdo .contactCard a {
  margin-top: 0;
}

/* < ///  --------------  MEDIA QUIERIES  -------------  ///  */

@media (max-width: 1000px) {

  #pdoMain {
    grid-template-columns: 40rem 1fr;
  }

  #pdoMission.od-bgi::before {
    background-size: contain;
  }

  #pdoContacts.sectionContainer {
    background: var(--od-bg-secCon);
  }

  /**  end of max-width 1000px  */
}


@media (max-width: 880px) {

  #pdoMain {
    grid-template: "gallery"
      "mission"
      "proInfo"
      "contacts"
      / 1fr;
  }

  /** end max-width 880px */
}


@media (max-width: 750px) {

  #pdoContacts a:link {
    line-height: 28px;
  }

  /**  end of max-width 750px  */
}


@media (max-width: 680px) {

  #pdoProInfo .contentContainer>* {
    columns: 1;
    max-width: 60ch;
  }

  /**  end of max-width 680px  */
}


/**  -----  ///  PDO ABOUT  ///  -----  

#pdoAbout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto;
  column-gap: 4rem;
}

@media (max-width: 800px) {

  #pdoAbout {
    grid-template-columns: 1fr;
  }

  #pdoAbout .sectionContainer {
    width: -moz-fit-content;
    width: fit-content;
    margin-inline: auto;
  }

  #pdoAbout .sectionContainer p {
    padding: 0 2.5rem;
  }

}*/



/**  -----  ///  PDO ENLISTED  ///  -----  */


#eRanks {
  position: relative;
  display: flex;
  flex-flow: column nowrap;
  z-index: 1;
}

#eRanks.sectionContainer {
  margin-bottom: 2rem;
}

#eRanks img {
  position: absolute;
  right: 20px;
  top: 33%;
  width: 450px;
  height: auto;
  z-index: -1;
}

@media (max-width: 950px) {
  #eRanks img {
    opacity: 0.2;
  }
}

#nco .rankCon {
  display: grid;
  width: 100%;
  max-width: 960px;
  grid-template-columns: minmax(22.5rem, 25%) 1fr;
  grid-template-rows: auto;
  grid-template-areas: "info infoContent";
  padding-inline: 4rem;
  grid-gap: 4rem;
  background: unset;
}

#nco .info button {
  margin-top: 2px;
}

#nco .mosCon {
  display: grid;
  width: 100%;
  grid-template-columns: minmax(22.5rem, 25%) 1fr;
  grid-template-rows: auto;
  column-gap: 4rem;
  grid-template-areas: "btns info";
  padding: 2rem 4rem 4rem 4rem;
}

#nco .btnCon {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(64px, 1fr));
  grid-template-rows: auto;
  grid-gap: .2rem;
  padding: .2rem;
  border-radius: .3rem;
  background-color: white;
  width: auto;
  margin-bottom: 2rem;
  place-content: center;
}

#nco .desc {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  grid-gap: 1rem;
  width: 100%;
  height: max-content;
}

#nco .infocontent,
#nco .desccontent {
  --od-contentSwitch-pb: 0;
  width: 100%;
}

/*#nco .ghostButton:hover {
  --od-bg: var(--od-c-chino);
  --od-c: ghostwhite;
}

#nco .ghostButton {
  margin-inline: auto;
}*/

/* < ///  --------------  MEDIA QUIERIES  -------------  ///  */

@media (max-width: 768px) {

  #eRanks img {
    opacity: 0.15;
  }

  #nco .rankCon {
    display: grid;
    width: 100%;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-gap: 2rem;
    grid-template-areas: "info"
      "infoContent";
    place-content: center;
    padding-inline: 0;
  }

  #nco .cpl {
    grid-area: cpl;
  }

  #nco .sgt {
    grid-area: sgt;
  }

  #nco .ssg {
    grid-area: ssg;
  }

  #nco .sfc {
    grid-area: sfc;
  }

  #nco .msg {
    grid-area: msg;
  }

  #nco .csm {
    grid-area: csm;
  }

  #nco .sma {
    grid-area: sma;
  }

  #nco .info {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(8, 1fr);
    grid-template-rows: auto;
    grid-template-areas: "cpl cpl sgt sgt ssg ssg sfc sfc"
      "msg msg csm csm csm sma sma sma";
    grid-gap: .2rem;
  }

  #nco.contentContainer {
    padding-inline: 2rem;
  }

  #nco .mosCon {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    column-gap: 2rem;
    grid-template-areas: "btns"
      "info";
    padding: 2rem 0;
  }

  #nco .desc {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    width: 100%;
    margin-bottom: 2rem;
  }

  #nco .desc>* {
    display: grid;
    grid-template-columns: repeat(auto-fit, 60px);
    grid-gap: .2rem;
    place-content: center;
    background: unset;
  }

  #nco .rankCon.sectionContainer,
  #nco .mosCon.sectionContainer {
    padding-inline: 2rem;
    grid-gap: 2rem;
  }

  #nco .btnCon {
    margin-bottom: 0;
  }

  /**  end of max-width 768px  */
}



@media (max-width: 540px) {
  #eRanks img {
    display: none;
  }

  /**  end of max-width 540px  */
}



@media (max-width: 500px) {

  #nco .info {
    grid-template-columns: repeat(6, 1fr);
    grid-template-areas: "cpl cpl sgt sgt ssg ssg"
      "sfc sfc sfc msg msg msg"
      "csm csm csm sma sma sma";
  }

  /**  end of max-width 500px  */
}









/*^  -----  ///  PDO WARRANT  ///  -----  */

.woMission {
  grid-area: mission;
}

.woAbout {
  grid-area: about;
}

.woMOSs {
  grid-area: moss;
}

.woFunctions {
  grid-area: functions;
}

.woBecome {
  grid-area: become;
}

.woContacts {
  grid-area: contacts;
}

#woMain {
  display: grid;
  width: 1000px;
  grid-template-columns: 1fr 35%;
  grid-template-rows: auto;
  grid-template-areas: "about contacts"
    "mission become"
    "functions moss";
  grid-gap: 4rem;
}

#woMain .btnGrid {
  grid-template-columns: repeat(autofit, minmax(1fr 29rem));
}


/*<  ///  -----  WARRANT MEDIA QUERIES  -----  ///  */

@media (max-width: 1080px) {


  #woMain {
    width: 100%;
    grid-template-areas: "about about"
      "contacts contacts"
      "mission become"
      "functions moss";
  }

  .woAboutText {
    display: grid;
    width: 100%;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    grid-gap: 4rem;
  }

  /**  end of max-width 1080px */
}


@media (max-width: 600px) {

  #woMain {
    grid-template-columns: 1fr;

    grid-template-areas: "about"
      "contacts"
      "mission"
      "moss"
      "functions"
      "become";
  }

  #woMain .btnGrid {
    grid-template-columns: 1fr 1fr;
    column-gap: 2rem;
    row-gap: 2rem;
    padding: 2rem;
  }

  #woMain .woAboutText {
    display: grid;
    width: 100%;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    row-gap: 1rem;
  }

  /**  end of max-width 600px*/
}


/**  -----  ///  PDO OFFICER  ///  -----  */

.odChar {
  display: flex;
  flex-flow: column nowrap;
  margin-bottom: 1px;
}

.charTextCon {
  display: flex;
  gap: 2rem;
}

#odOff .aocCon {
  display: grid;
  grid-template-columns: minmax(12.5rem, 30%) 1fr;
  grid-template-rows: auto auto;
  grid-template-areas: "info "
    "infoContent";
  justify-content: center;
  grid-gap: 2rem;
}

#odOff .info {
  display: flex;
  flex-direction: column;
  width: 100%;
}

#odOff .info button {
  max-width: 12.5rem;
  margin: 2px auto 0 auto;
  padding: .7em;
}


#odOff .infocontent {
  --od-contentSwitch-pb: 0;
  height: auto;
}

#odOff .infocontent h3 {
  text-align: center;
}

#odOff .beOff {
  width: 100%;
}

#odOff .offDev .btnGrid {
  display: grid;
  grid-template-columns: minmax(250px, 35%) minmax(250px, 35%);
  grid-template-rows: auto;
  grid-gap: 1rem;
  width: max-content;
  padding: 0 2rem 3rem 2rem;
  margin-inline: auto;
}


#odOff .twoColFlex {
  display: flex;
  gap: 4rem;
  justify-content: center;
  align-items: stretch;
}

#odOff .projWarrior {
  flex: 1;
}

#odOff .beOff {
  flex: 0 0 250px;
  max-width: 400px;
  margin-inline: auto;
}

:is(#ltDev, #cptDev, #majDev, #ltcDev, #colDev) .edu {
  grid-area: edu;
}

:is(#ltDev, #cptDev, #majDev, #ltcDev, #colDev) .asgn {
  grid-area: key;
}

:is(#ltDev, #cptDev, #majDev, #ltcDev, #colDev) .selfDev {
  grid-area: self;
}

:is(#ltDev, #cptDev, #majDev, #ltcDev, #colDev) .exp {
  grid-area: exp;
}

:is(#cptDev, #majDev, #ltcDev, #colDev) .devAsgn {
  grid-area: asgnDB;
}

:is(#ltDev, #cptDev, #majDev, #ltcDev, #colDev) .blockContainer {
  padding-top: 4rem;
}

#ltDev .blockContainer {
  grid-template-areas: "edu key"
    "exp self";
}

#cptDev .blockContainer {
  grid-template-areas: "edu key"
    "asgnDB exp"
    "self self";
}

#majDev .blockContainer {
  grid-template-areas: "edu key"
    "asgnDB key"
    "exp self";
}

#ltcDev .blockContainer {
  grid-template-areas: "edu asgnDB"
    "key exp"
    "self self";
}

#colDev .blockContainer {
  grid-template-areas: "edu asgnDB"
    "key exp"
    "self exp";
}

#btnBecome {
  margin-top: 20px;
}

#publicationsCon {
  text-wrap: nowrap;
  margin-bottom: 1px;
}

.storyBoard {
  scale: 85%;
  padding: 0;
  margin: 0;
}

.storyboardImg {
  scale: 100%;
  padding: 0;
  margin: 0;
}

.storySection {

  display: grid;
  padding: 0;
  margin: 0;
}

#odOff {
  display: grid;
  padding: 2rem;
}

/* *  RCO OFFICER DEVELOPMENT    */

#rcoOff .genDev {
  grid-area: gen;
}

#rcoOff .beOff {
  grid-area: beOff;
}

#rcoOff .rcoOffRanks {
  grid-area: ranks;
}

#rcoOff .branch {
  grid-area: branch;
}

#rcoOff {
  display: grid;
  grid-template-columns: 1fr 35rem;
  grid-template-rows: auto;
  grid-template-areas: "gen gen"
    "ranks ranks"
    "branch beOff";
  grid-gap: 4rem;
}

#rcoOff [role="list"] {
  display: grid;
  grid-template-columns: autofit(45ch 1fr);
  grid-template-rows: auto;
  grid-gap: 2rem;
}

#rcoOff .rcoCon {
  display: grid;
  grid-template-columns: 25rem 1fr;
  grid-template-rows: auto;
  grid-template-areas: "info infocontent";
  grid-gap: 4rem;
}

#rcoOff .info button {
  margin-top: 2px;
}



/*<  ///  ========== MEDIA QUERIES  ==========  ///  */

@media (max-width: 800px) {
  #odOff .aocCon {
    display: grid;
    width: 100%;
    grid-template-columns: minmax(10rem, 15%) 1fr;
    grid-template-rows: auto;
    grid-template-areas: "info infoContent";
    grid-gap: 2rem;
  }


  #rcoOff {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas: "gen"
      "ranks"
      "branch"
      "beOff";
  }

  #rcoOff .rcoCon {
    width: 100%;
    grid-template-columns: 1fr;
    grid-template-areas: "info"
      "infocontent";
  }

  #rcoOff .charTextCon>* {
    flex-basis: 100%;
  }

  #rcoOff .rcoCon .info {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(auto-fill, minmax(12.5rem, 1fr));
    grid-template-rows: auto;
    grid-gap: 1rem;
  }

  #rcoOff .btnGrid {
    grid-template-columns: 1fr 1fr;
    grid-gap: 6rem;
    padding: 0 6rem 3rem 6rem;
  }

  /**  end of max-width 800px  */
}


@media (max-width: 650px) {
  #odOff .twoColFlex {
    flex-direction: column;
    gap: 0;
  }

  #odOff .beOff {
    max-width: 100%;
  }

  #odOff .beOff .btnGrid {
    width: max-content;
    grid-template-columns: minmax(25rem, 70%);
    margin-inline: auto;
  }

  #odOff .charTextCon {
    flex-direction: column;
  }

  #odOff .aocCon {
    grid-template-columns: 1fr;
    grid-template-areas: "info"
      "infoContent";
  }

  #odOff .info {
    flex-direction: row;
    justify-content: space-evenly;
  }

  #odOff .offDev .btnGrid {
    grid-template-columns: minmax(25rem, 70%);
  }

  .offDev .blockContainer {
    grid-template-columns: 100%;
    grid-template-rows: auto;
    row-gap: 2rem;
    padding: 2rem 4rem 0 4rem;
  }

  #ltDev .blockContainer {
    grid-template-areas: "edu"
      "key"
      "exp"
      "self";
  }

  #cptDev .blockContainer {
    grid-template-areas: "edu"
      "key"
      "asgnDB"
      "exp"
      "self";
  }

  #majDev .blockContainer {
    grid-template-areas: "edu"
      "asgnDB"
      "key"
      "exp"
      "self";
  }

  #ltcDev .blockContainer {
    grid-template-areas: "edu"
      "asgnDB"
      "key"
      "exp"
      "self";
  }

  #colDev .blockContainer {
    grid-template-areas: "edu"
      "asgnDB"
      "key"
      "exp"
      "self";
  }

  #rcoOff .charTextCon {
    flex-direction: column;
  }

  #rcoOff .btnGrid {
    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
    grid-gap: 2rem;
    padding: 0 2rem 0 2rem;
  }

  /**  end of max-width 650px  */
}



/**  ----------  MOS CHART INFORMATION  ----------  */
#mosChart h3 {
  text-align: center;
  margin-bottom: 0.35em;
  padding: 0.25em 0;
  border-bottom: 2px solid var(--od-c-gold);
  box-shadow: 1px 2px 4px 2px rgb(0, 0, 0, .15);
}

#mosChart h4 {
  --od-c: white;
  background-color: #3b3b3b;
  text-align: center;
  margin: 2rem 0 0 0;
  padding: 0.35em 0;
}

#mosChart .mosCon>* {
  --od-ff: var(--od-ff-condensed);
  --od-fz: var(--od-fz-sm);
  font-family: var(--od-ff);
  font-size: var(--od-fz);
  padding: 0.2em;
}

#mosChart :is(.mossOff, .mossWO, .mossNCO) {
  position: relative;
  margin-bottom: 4rem;
  padding: 0 .3rem 3rem .3rem;
}

#mosChart h3 {
  margin: 0 -.3rem;
}

#mosChart .mosHeaderBar {
  margin: 0 0 2rem 0;
}

#mosChart .chartMOS {
  grid-area: mos;
}

#mosChart .titleMOS {
  grid-area: title;
  border-left: 1.5px solid #dcdcdc;
  border-right: 1.5px solid #dcdcdc;
}

#mosChart .trainLoc {
  grid-area: train;
}

#mosChart .mosHeaderBar,
#mosChart .mosCon {
  display: grid;
  grid-template-columns: 5rem 1fr 16rem;
  grid-template-rows: auto;
  grid-template-areas: "mos title train";
  column-gap: .2rem;
  text-align: center;
  padding: 0.2em 0;
}

#mosChart .head {
  --od-c: white;
  --od-bg: var(--od-c-red);
  background: var(--od-bg);
  color: var(--od-c);
  font-family: 'Oswald';
  font-size: var(--od-fz-ms);
}

#mosChart .mosCon:nth-child(odd) {
  --od-bg: #efefef;
  background-color: var(--od-bg);
}


/* < ///  --------------  MEDIA QUIERIES  -------------  ///  */
@media (max-width: 820px) {
  #mossOD .headerImg img {
    opacity: 0.3;
  }

  /**  end of max-width 820px  */
}


@media (max-width: 600px) {

  #mosChart .mosHeaderBar,
  #mosChart .mosCon {
    grid-template-columns: 5rem 1fr;
    grid-template-rows: auto;
    grid-template-areas: "mos title"
      "mos train";
  }

  #mosChart .mosHeaderBar {
    row-gap: .2rem;
  }

  #mosChart .trainLoc {
    padding-top: 0;
    border-left: 1.5px solid #dcdcdc;
    border-top: 1.5px solid #dcdcdc;
  }

  #mosChart :is(.trainLoc, .titleMOS) {
    text-align: left;
    padding: 0.2em 0.5em 0.2em 0.75em;
    border-right: unset;
  }

  #mosChart .chartMOS {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /**  end max-width 600px  */
}


/** -----------------  end pdo  ---------------- */




/*^  ///  =================================================== */
/*^ =================  RESERVE COMPONENT OFFICE  ================ */
/*^ ====================================================  ///  */

#rcoGallery {
  grid-area: gallery;
}

#rcoMission {
  grid-area: mission;
}

#rcoTasks {
  grid-area: tasks;
}

#rcoOrgChart {
  grid-area: chart;
}

#rcoContacts {
  grid-area: contact;
}

#rcoMain {
  display: grid;
  grid-template: "gallery mission"
    "tasks tasks"
    "contact contact"
    / 50rem 1fr;
  column-gap: 2rem;
}

/*grid-template: "gallery tasks"
    "mission mission"
    "contact contact"
    / 50rem 1fr;
  column-gap: 2rem;
}*/
#rcoTasks ul {
  columns: 2;
  max-width: 100%;
}

#rcoGallery {
  position: relative;
  width: 100%;
  height: auto;
  margin: 0 auto 4rem auto;
  z-index: 5;
}

#rcoGallery.noContainer {
  background: #333;
}

#rcoMission {
  height: min-content;
}

/** Removed Resources CSS is in index-BkUp.html */


/*<  ///  ========== MEDIA QUERIES  ==========  ///  */

@media (max-width: 1010px) {
  #rcoMain {
    grid-template: "gallery mission"
      "tasks tasks"
      "contact contact"
      / 45rem 1fr;
  }

  /**  end max-width 1010px  */
}


@media (max-width: 800px) {

  #rcoMain {
    display: grid;
    grid-template: "gallery"
      "mission"
      "tasks"
      "contact"
      / 1fr;
    column-gap: 2rem;
  }

  :is(#rcoMission, #rcoTasks) .contentContainer>* {
    columns: 2;
    max-width: 100%;
  }

  /**  end max-width 800px  */
}


@media (max-width: 640px) {
  :is(#rcoMission, #rcoTasks) .contentContainer>* {
    columns: 1;
  }

  #rcoTasks .contentContainer ul {
    max-width: 60ch;
  }

  #rcoContacts .contactList {
    --od-contactList-columns: repeat(auto-fit, minmax(15rem, 22.5rem));
    justify-content: space-evenly;
  }

  /** end max-width 640px */
}



/*^ -------------------------- 59th Ordnance Brigade -------------------------- */
/*^  ----------------------------------- 59BDE  --------------------------------- */
/**  ///  59BDE INDEX  ///  */
#mission59 {
  grid-area: mission;
}

#about59 {
  grid-area: about;
}

#about59 ul {
  columns: 2;
}

#orgChart59 {
  grid-area: chart;
  height: max-content;
}

#units59 {
  grid-area: units;
}

#main59 {
  display: grid;
  grid-template: "mission about about"
    "chart chart units"
    / 50% 1fr 225px;
  column-gap: 2rem;
}

#orgChart59 img {
  display: block;
  width: min(800px, 100%);
  height: auto;
  margin: 0 auto;
}

#about59 .contactCard {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-columns: auto;
}

#about59 .contactCard a {
  width: fit-content;
  height: fit-content;
}

#about59 .contactCard a:has(img) {
  margin: auto;
}

#units59 h2,
#units59 .contentContainer {
  margin-inline: auto;
}

#units59,
#units59 .contentContainer {
  position: relative;
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  width: 100%;
}

#units59 .contentContainer>* {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: -moz-fit-content;
  width: fit-content;
  min-width: 165px;
  margin-top: 2rem;
}




/**  ///  HISTORY  ///  
#history59 {
  display: flex;
}*/

#history59>* {
  padding: 1rem;
}

#history59 .sectionContainer {
  columns: 2;
}

/**  ///  OPSEC  ///  */
.opsec {
  grid-area: what;
}

.criticalInfo {
  grid-area: ci;
}

.opsecMedia {
  grid-area: media;
}

.opsecImage {
  grid-area: image;
}

#opsec59 .opsecMedia {
  padding-bottom: 4rem;
}

#opsec59 {
  display: grid;
  grid-template: "what ci ci"
    "image ci ci"
    "media media media"
    / 50% 1fr 220px;
  column-gap: 2rem;
}

#opsec59 .vid {
  grid-area: vid;
}

#opsec59 .aud {
  display: flex;
  flex-flow: column nowrap;
  grid-area: aud;
}

#opsec59 .mediaCon {
  grid-template: "vid vid aud"
    / 50% 1fr 27%;
}

#opsec59 .vidCon {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(175px, 1fr));
  grid-template-rows: auto;
  column-gap: 0.5em;
}

#opsec59 .button {
  --od-fz: var(--od-fz-sm);
  border-radius: 3px;
  text-align: center;
}

#opsec59 .button:hover {
  background: black;
  border-top: 2px solid rgb(115, 83, 233);
}

#opsec59 .img {
  display: none;
}

/*<  ///  ---  MEDIA QUERIES  ---  ///  */
@media (max-width: 1000px) {

  #main59 {
    grid-template: "mission mission"
      "about about"
      "chart units"
      / 1fr 225px;
  }

  :is(#mission59 .contentContainer, #about59 .contentContainer) {
    columns: 2;
  }

  #opsec59 {
    grid-template: "what what"
      "ci ci"
      "media media"
      / 1fr 1fr;
  }

  #opsec59 .opsec .contentContainer {
    display: flex;
    flex-direction: row;
  }

  #opsec59 .opsecImage {
    display: none;
  }

  #opsec59 .img {
    display: block;
  }

  #opsec59 .p1 {
    grid-area: p1;
    height: fit-content;
  }

  #opsec59 .p2 {
    grid-area: p2;
    height: fit-content;
  }

  #opsec59 .u1 {
    grid-area: u1;
  }

  #opsec59 .u2 {
    grid-area: u2;
  }

  #opsec59 .img {
    grid-area: img;
    place-items: center;
  }

  #opsec59 .criticalInfo .gridCon {
    grid-template: "p1 img"
      "p2 img"
      "u1 u2"
      / 1fr 1fr;
  }

  #about59 .contentContainer {
    gap: 2rem;
  }
}


@media (max-width: 890px) {
  #about59 ul {
    columns: 1;
  }

  #about59 .contactList {
    width: min(100%, 27.5rem);
    margin-inline: auto;
  }

  /**  end of max-width 890px */
}


@media (max-width: 840px) {
  #main59 {
    grid-template: "mission mission mission"
      "about about about"
      "chart chart units"
      / 50% 1fr 22.5rem;
    column-gap: 2rem;
  }

  #units59 .contentContainer {
    flex-flow: row wrap;
    justify-content: space-evenly;
    width: 100%;
  }

  /**  end of max-width 840px */
}

@media (max-width: 785px) {
  #history59 .off {
    display: none;
  }

  /**  end of max-width 785px */
}

@media (max-width: 768px) {

  #history59 {
    width: fit-content;
    margin: 0 auto;
  }

  #history59 .sectionContainer {
    columns: unset;
  }

  #opsec59 {
    grid-template: "what what what"
      "ci ci ci"
      "image image media"
      / 1fr 1fr 225px;
  }

  #opsec59 .criticalInfo .gridCon {
    grid-template: "p1"
      "p2"
      "u1"
      "u2"
      / 1fr;
  }

  #opsec59 .img {
    display: none;
  }

  #opsec59 .opsecImage {
    display: block;
  }

  #opsec59 .mediaCon {
    grid-template: "vid"
      "aud"
      / 1fr;
    row-gap: 2rem;
  }

  /**  end of max-width 768px */
}

@media (max-width: 700px) {

  #main59 {
    grid-template: "mission"
      "about"
      "chart"
      "units"
      / 1fr;
  }

  #about59 .contactList {
    grid-template-columns: repeat(auto-fit, minmax(17rem, 22.5rem));
    width: 100%;
    place-content: center;
    gap: 2rem;
  }

  #about59 .contentContainer {
    columns: 1;
  }

  #about59 ul {
    columns: 2;
  }

  #history59 .on {
    display: block;
  }

  #opsec59 {
    grid-template: "what"
      "ci"
      "image"
      "media"
      / 1fr;
  }

  /**  end of max-width 700px */
}

@media (max-width: 640px) {
  #mission59 .contentContainer {
    columns: 1;
  }

  #opsec59 .opsec .contentContainer {
    flex-direction: column;
  }

  /**  end of max-width 640px */
}


@media (max-width: 540px) {
  #about59 ul {
    columns: unset;
  }

  /**  end of max-width 540px */
}


@media (max-width: 480px) {
  #about59 aside contactList {
    display: flex;
    flex-direction: column;
    gap: 2rem;
  }

  #about59 aside contactCard {
    width: min(18rem, 100%);
    margin: 0 auto;
  }

  /**  end of max-width 480px */
}

/*^ -------------------------- 16th Ordnance Battalion ----------------------- */
/*^  ----------------------------------- 16BN  --------------------------------- */
/**  ///  16BN INDEX  ///  */

#main16 {
  display: grid;
  grid-template: "mission grad"
    "chart train"
    "chart contact"
    "social social"
    / 1fr 350px;
  column-gap: 2rem;
}

#mission16 {
  grid-area: mission;
}

#grad16 {
  grid-area: grad;
}

#grad16 button {
  --od-bdw: 2px;
  transition: all 350ms;
}

#grad16 button:hover {
  --od-bdw: 2px;
  --od-bdc: black;
  --od-bdtc: black;
  --od-bdrd: 3px;
  --od-bg: var(--od-c-orgBlack);
}

.grad16 .gradInfoBtns {
  display: flex;
  flex-flow: column nowrap;
  padding-top: 2rem;
}

#grad16 .gradInfoBtns>* {
  width: 25rem;
  margin: 0 auto 1rem auto;
}

#orgChart16 {
  grid-area: chart;
}

#train16 .chart-gridCon {
  --od-chart-gtc: 6rem 1fr;
}

#contact16 {
  grid-area: contact;
  height: fit-content;
}

#contact16 .phone {
  margin-right: 1rem;
}


/**  ///  HISTORY  ///  */

#history16 section>* {
  columns: 2;
}


/**  ///  16BN COMPANIES  ///  */

.coMission {
  grid-area: mission;
}

.coVision {
  grid-area: vision;
}

.coOrgChart {
  grid-area: chart;
}

.coContact {
  grid-area: contact;
}

.coGallery {
  grid-area: gallery;
}

.bnCos {
  display: grid;
  width: 100%;
  grid-template: "mission mission"
    "vision vision"
    "chart contact"
    / 1fr 400px;
  column-gap: 2rem;
}

#cCo .bnCos {
  display: grid;
  width: 100%;
  grid-template: "mission mission"
    "chart contact"
    / 1fr 400px;
  column-gap: 2rem;
}

#fCo .bnCos {
  display: grid;
  width: 100%;
  grid-template: "gallery gallery"
    "mission mission"
    "vision vision"
    "chart contact"
    / 1fr 1fr;
  column-gap: 2rem;
}

:where(.coMission, .coVision) .contentContainer {
  display: flex;
  justify-content: space-between;
  gap: 2rem;
}

:where(.coMission, .coVision) .contentContainer img {
  margin-inline: auto;
}

:is(#contact16 .contactList, [id$="Co"] .contactList) {
  --od-contactList-columns: repeat(auto-fit, minmax(13.5rem, 20rem));
  justify-content: center;
}

.coOrgChart img {
  display: block;
  margin: 0 auto;
}

/*<  ///  ---  MEDIA QUERIES  ---  ///  */

@media (max-width: 875px) {

  #main16 {
    display: grid;
    grid-template: "mission mission"
      "grad grad"
      "train contact"
      "chart chart"
      "social social"
      / 1fr 1fr;
    column-gap: 2rem;
  }

  .mission16 {
    columns: 2;
  }

  #grad16 .grad16 {
    display: flex;
    flex-direction: column;
    gap: 2rem;
  }

  #grad16 .gradText {
    columns: 2;
  }

  #grad16 .gradInfoBtns {
    display: flex;
    flex-flow: row wrap;
    padding: 0;
  }

  #grad16 .gradInfoBtns>* {
    width: 17.5rem;
  }

  #main16 .contactList li {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: .25em;
    padding: .7em 1.5em;
    margin: 0 auto;
  }

  #contact16 .phone {
    margin-right: 0;
    width: fit-content;
  }

  /**  end of max-width 875px */
}


@media (max-width: 768px) {
  #history16 {
    width: fit-content;
    margin: 0 auto;
  }

  #history16 section>* {
    columns: unset;
  }

  .bnCos {
    grid-template: "mission mission"
      "vision vision"
      "chart contact"
      / 1fr 1fr;
  }

  #fCo .bnCos {
    grid-template: "gallery gallery"
      "mission mission"
      "vision vision"
      "chart contact"
      / 1fr 20rem;
  }

  :is(.coMission, .coVision) .contentContainer {
    flex-direction: column;
    align-items: center;
    text-align: left;
  }

  .coVision img {
    order: 2;
  }

  .coContact .contactList {
    --od-contactList-columns: repeat(auto-fit, minmax(15rem, 1fr));
    grid-template-columns: var(--od-contactList-columns);
  }

  /**  end of max-width 768px */
}


@media (max-width: 680px) {

  #main16 {
    grid-template: "mission"
      "grad"
      "train"
      "contact"
      "chart"
      "social"
      / 1fr;
  }

  .mission16 {
    columns: 1;
  }

  .grad16 {
    flex-direction: column;
  }

  #grad16 .gradInfoBtns>* {
    width: fit-content;
    min-width: 10.7rem;
  }

  /**  end of max-width 680px */
}


@media (max-width: 600px) {
  #fCo .bnCos {
    grid-template: "gallery"
      "mission"
      "vision"
      "chart"
      "contact"
      / 1fr;
  }

  #cCo .bnCos {
    grid-template: "mission"
      "chart"
      "contact"
      / 1fr;
  }

  /**  end of max-width 600px */
}


@media (max-width: 540px) {
  .bnCos {
    grid-template: "mission"
      "vision"
      "chart"
      "contact"
      / 1fr;
  }

  #grad16 .gradText {
    columns: unset;
  }

  #grad16 .gradInfoBtns {
    flex-direction: column;
  }

  #grad16 .gradInfoBtns>* {
    width: 17.5rem;
  }

  /**  end of max-width 540px */
}



/*^ -------------------------- 73rd Ordnance Battalion ----------------------- */
/*^  ----------------------------------- 73BN  --------------------------------- */
/** ///  73BN INDEX  ///  */
#mission73 {
  grid-area: mission;
}

#crest73 {
  grid-area: crest;
}

#cobra73 {
  grid-area: cobra;
}

#contact73 {
  grid-area: contact;
}

#social73 {
  grid-area: social;
}

#main73 {
  display: grid;
  width: 100%;
  grid-template: "mission chart"
    "crest chart"
    "cobra cobra"
    "contact contact"
    "social social"
    / auto auto;
  column-gap: 2rem;
}

/** unit crest */
#crest73 .contentContainer {
  display: flex;
  gap: 2rem;
  width: 100%;
}

#crest73 img {
  align-self: start;
  object-fit: contain;
}

/** cobra soldier */
.cobraImage {
  grid-area: image;
}

.cobraP1 {
  grid-area: p1;
  height: fit-content;
}

.cobraList {
  grid-area: list;
}

.cobraP2 {
  grid-area: p2;
}

#cobra73 .contentContainer {
  display: grid;
  grid-template: "image p1"
    "image list"
    "image p2"
    / auto auto;
  width: 100%;
  column-gap: 2rem;
}

#cobra73 img {
  object-fit: contain;
  width: 100%;
  margin: 0 1rem 1rem 0;
}

/** contacts */
#contact73 .info {
  display: flex;
  margin: 0 0 -1px 0;
  padding-left: 1rem;
}

#contact73 .infocontent {
  position: relative;
}

#contact73 .tab {
  --od-tab-p: .75em 1.5em;
}

#contact73 .packet {
  position: relative;
  right: 0;
  bottom: 0;
}

/**  /// history  ///  */

#history73 .contentContainer {
  columns: 2;
}


/*<  ///  -----  MEDIA QUERIES  -----  ///  */

@media (max-width: 999px) {

  #orgChart73 {
    height: fit-content;
  }

  /**  end of max-width 999px */
}



@media (max-width: 880px) {

  #main73 {
    grid-template: "mission crest"
      "cobra cobra"
      "chart chart"
      "contact contact"
      "social social"
      / 1fr 1fr;
    gap: 2rem;
    width: 100%;
  }

  #crest73 .contentContainer {
    display: block;
  }

  #crest73 img {
    float: left;
    margin: 0 5px 5px 0;
  }

  /**  end of max-width 880px */
}


@media (max-width: 768px) {


  #cobra73 .contentContainer {
    grid-template: "image p1 p1"
      "list list p2"
      / 1fr 1fr 1fr;
    width: 100%;
  }

  #history73 {
    width: fit-content;
    margin: 0 auto;
  }

  #history73 .contentContainer {
    columns: 1;
  }

  /**  end of max-width 768px */
}


@media (max-width: 640px) {


  #main73 {
    display: grid;
    width: 100%;
    grid-template: "mission"
      "crest"
      "cobra"
      "chart"
      "contact"
      "social"
      / 1fr;
  }

  #crest73 .contentContainer {
    display: flex;
    gap: 2rem;
  }

  #cobra73 .contentContainer {
    grid-template: "image"
      "p1"
      "list"
      "p2"
      / 1fr;
    width: 100%;
  }

  #cobra73 img {
    width: max(250px, 80%);
    margin: 0 auto 1rem auto;
  }

  /**  end of max-width 640px */
}


@media (max-width: 500px) {

  #crest73 .contentContainer {
    flex-direction: column;
  }

  #crest73 img {
    margin: 0 auto;
  }

  /**  end of max-width 500px */
}


@media (max-width: 450px) {

  #history73 .img-left {
    float: unset;
    margin: 1rem auto;
  }

  /**  end of max-width 450px */
}



/*^ ------------  Ordnance Training Detachment-Gordon 73rd BN ------------ */
#missionGordon {
  grid-area: mission;
}

#visionGordon {
  grid-area: vision;
}

#historyGordon {
  grid-area: history;
}

#trainGordon {
  grid-area: train;
}

#contactGordon {
  grid-area: contact;
}

#socialGordon {
  grid-area: social;
}

#mainGordon {
  display: grid;
  width: 100%;
  grid-template: "mission history"
    "vision history"
    "train train"
    "contact contact"
    "social social"
    / 1fr 36%;
  column-gap: 2rem;
}

#historyGordon .contentContainer {
  display: flex;
  flex-flow: column nowrap;
  gap: 2rem;
}

#trainGordon .chart-gridCon {
  --od-chart-gtc: 10rem 1fr 11rem;
}

/**  /// graduation  ///  */

#gradInfoGordon .contentContainer {
  display: flex;
  flex-direction: column;
}

#gradInfoGordon .highlightDiv p {
  --od-ff: var(--od-ff-roboto);
  --od-fz: var(--od-fz-ms);
  --od-c: white;
  display: flex;
  justify-content: center;
  font-family: var(--od-ff);
  font-size: var(--od-fz);
  text-align: center;
  width: 80%;
  margin: 3rem auto 4rem auto;
  border-radius: 1rem;
  box-shadow: inset 2px 0 4px rgb(0, 0, 0, 0.4);
  background: var(--od-c-offBlack);
  border: 3px solid var(--od-c-red);
  padding: 0.5em;
}

#gradInfoGordon :is(.gradText, .solVisInfo) {
  display: flex;
  gap: 2rem;
}

.driveGordon {
  grid-area: drive;
}

.btnsGordon {
  grid-area: btns;
  display: flex;
  flex-flow: column nowrap;
  justify-content: flex-start;
  height: 100%;
  padding: 0.5rem 0;
}

.btnsGordon>* {
  width: min(17.5rem, 100%);
  margin: 0 auto 1.5rem auto;
}

.baseMapGordon {
  grid-area: map;
}

.mapInfoGordon {
  grid-area: info;
}

#driveGordon .contentContainer {
  display: grid;
  width: 100%;
  grid-template-columns: 1fr 17rem 20.5rem;
  grid-template-rows: auto;
  grid-template-areas: "drive  map map"
    "drive btns info";
  gap: 2rem;
}

/* directions */
/* to */
.direcToTextNew {
  grid-area: toText;
}

.direcImageMapNew {
  grid-area: toMap;
  justify-self: center;
  height: fit-content;
}

.direcImageMapNew figcaption {
  --od-bottom: 15px;
}

.direcBtnMapNew {
  --od-m: 0 auto;
  grid-area: toBtn;

}

#direcToNew .contentContainer {
  display: grid;
  width: 100%;
  grid-template: "toText toMap"
    "toText toBtn"
    / 1fr 1fr;
  column-gap: 2rem;
}

/** on */
.direcSigNew {
  grid-area: sig;
}

.direcOnMapNew {
  grid-area: map;
}

#direcOnNew .direcOnMapNew figcaption {
  --od-bottom: 20px;
}

.direcOTDGnew {
  grid-area: otdg;
}

.direcOnBtnNew {
  margin: 0 auto;
}

#direcOnNew .contentContainer {
  display: grid;
  width: 100%;
  grid-template: "sig otdg"
    "map map"
    / 1fr 1fr;
  gap: 2rem;
}

/** reporting */
#reportNewGordon .contentContainer {
  display: grid;
  width: 100%;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto;
  column-gap: 2rem;
}

#reportNewGordon .contentContainer>* {
  display: flex;
  flex-direction: column;
}

#reportNewGordon .contentContainer [class^="report"] {
  margin-bottom: 2rem;
}


/*<  ///  -----  MEDIA QUERIES  -----  ///  */


@media (max-width: 840px) {

  #driveGordon .contentContainer {
    grid-template-columns: 1fr 30rem;
    grid-template-rows: auto;
    grid-template-areas: "drive map"
      "drive info"
      "drive btns"
  }

  #driveGordon .btnsGordon {
    flex-flow: column nowrap;
    height: max-content;
  }

  /**  end of max-width 840px */
}


@media (max-width: 768px) {

  #mainGordon {
    grid-template: "mission"
      "vision"
      "history"
      "train"
      "contact"
      "social"
      / 1fr;
  }

  #historyGordon .contentContainer {
    flex-direction: row;
  }

  #historyGordon .contentContainer img {
    height: 150px;
    width: 153.2px;
    margin: 0 auto 1rem auto;
  }

  #direcToNew .contentContainer {
    grid-template: "toText toText"
      "toBtn toMap";
    gap: 2rem;
  }

  #direcToNew .direcBtnMapNew {
    margin: auto;
  }

  #direcOnNew .contentContainer {
    grid-template: "sig"
      "otdg"
      "map"
      / 1fr;
  }

  #reportNewGordon .contentContainer {
    grid-template-columns: 1fr;
  }

  /**  end of max-width 768px */
}


@media (max-width: 700px) {

  #driveGordon .contentContainer {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas: "drive"
      "btns"
      "info"
      "map";
  }

  #driveGordon .btnsGordon {
    flex-direction: row;
  }

  #gradGordon :is(.gradText, .solVisInfo) {
    flex-direction: column;
  }

  /**  end of max-width 700px */
}


@media (max-width: 600px) {

  #trainGordon .chart-gridCon {
    --od-chart-gtc: 10rem 1fr;
  }

  #direcToNew .contentContainer {
    grid-template: "toText"
      "toMap"
      "toBtn"
      / 1fr;
  }

  /**  end of max-width 600px */
}


@media (max-width: 500px) {

  #historyGordon .contentContainer {
    flex-direction: column;
  }

  #driveGordon .btnsGordon {
    flex-direction: column;
  }

  /**  end of max-width 500px */
}



/*^ ------------  Ordnance Training Detachment-Sill 73rd BN ------------ */

#mainSill {
  display: grid;
  width: 100%;
  grid-template: "mission mission"
    "chart social"
    "contact contact"
    / 1fr 15rem;
  column-gap: 2rem;
}

#missionSill .contentContainer {
  display: flex;
  gap: 2rem;
  align-items: center;
}

#socialSill .contentContainer {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
  gap: 4rem;
  width: 100%;
  height: auto;
}

#contactSill .contactList {
  display: flex;
  justify-content: space-evenly;
}

#contactSill .contactList li {
  width: 25rem;
}

#orgChartSill img {
  display: block;
  width: 75%;
  margin: 0 auto;
}


/*<  ///  -----  MEDIA QUERIES  -----  ///  */


@media (max-width: 768px) {
  #mainSill {
    grid-template: "mission"
      "chart"
      "contact"
      "social"
      / 1fr;
  }

  #socialSill .contentContainer {
    flex-direction: row;
  }

  /**  end of max-width 768px */
}


@media (max-width: 640px) {
  #contactSill .contactList {
    flex-direction: column;
    align-items: center;
  }

  #missionSill .contentContainer {
    flex-direction: column;
  }

  /**  end of max-width 640px */
}






/*^ -------------------------- 832d Ordnance Battalion ------------------------ */
/*^  ----------------------------------- 832BN  --------------------------------- */
/**  ///  832BN INDEX  ///  */
#mission832 {
  grid-area: mission;
}

#vision832 {
  grid-area: vision;
}

#insignia832 {
  grid-area: insignia;
}

#grad832 {
  grid-area: grad;
}

#orgChart832 {
  grid-area: chart;
}

#packList832 {
  grid-area: list;
}

#social832 {
  grid-area: social;
}

#main832 {
  display: grid;
  grid-template: "mission vision"
    "insignia grad"
    "list auto"
    "chart chart"
    "social social"
    / 50% 1fr;
  column-gap: 2rem;
}

/**  insignia832  */
#insignia832 .contentContainer {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

#insignia832 .contentContainer p {
  text-align: left;
  padding-top: 2rem;
}

/**  grad info  */
#grad832 .contentContainer {
  display: flex;
  flex-flow: column wrap;
  width: fit-content;
}

#grad832 .gradInfoBtns {
  display: flex;
  justify-content: space-evenly;
  padding: 2rem 0;
}

/**  org chart  */
#orgChart832 .contentContainer {
  display: flex;
  justify-content: center;
}

#orgChart832 img {
  max-width: 800px;
}

/**  packing list  */
#packList832 .chart-gridCon {
  display: grid;
  grid-template-columns: 1fr 5rem;
  grid-template-areas: "col1 col2";
}

#packList832 .chart-gridCon .chart-col1 {
  --od-chart-bdw: 0;
  --od-chart-bds: none;
  --od-chart-jc: left;
  --od-chart-ta: left;
  --od-chart-pl: 2rem;
  border-right: var(--od-chart-bdw) var(--od-chart-bds) var(--od-chart-bdc);
}

#packList832 .chart-col2 {
  --od-chart-bdw: 1.5px;
  --od-chart-bds: solid;
  --od-chart-ta: center;
  border-left: var(--od-chart-bdw) var(--od-chart-bds) var(--od-chart-bdc);
}

#packList832 .contactList.light {
  --od-contactList-columns: repeat(auto-fit, minmax(15rem, 1fr));
  padding-bottom: 1rem;
  padding-top: 1rem;
  padding-left: 1rem;
  padding-right: 1rem;

}

/**  ///  History  ///  */
#history832 .contentContainer {
  columns: 2;
}

:is(#missionBco, #missionCco, #missionDco, #missionEco) .contentContainer {
  display: flex;
  gap: 2rem;
}

[id^="train"] .chart-gridCon {
  --od-chart-gtc: 7.5rem 1fr;
}

/**  ///  Alpha  ///  */
#alpha832 {
  display: grid;
  grid-template: "mission contact"
    "train contact"
    "social social"
    / 1fr 22.5rem;
  column-gap: 2rem;
}

/**  ///  Bravo  ///  */
#bravo832 {
  display: grid;
  grid-template: "mission mission"
    "train contact"
    "social social"
    / 1fr 22.5rem;
  column-gap: 2rem;
}

/**  ///  Charlie  ///  */
#charlie832 {
  display: grid;
  grid-template: "mission mission"
    "train contact"
    "social contact"
    / 1fr 22.5rem;
  column-gap: 2rem;
}

/**  ///  Delta  ///  */
#delta832 {
  display: grid;
  grid-template: "mission mission"
    "vision vision"
    "train contact"
    "social contact"
    / 1fr 22.5rem;
  column-gap: 2rem;
}

#visionDco .contentContainer {
  columns: 2;
}

/**  ///  Echo  ///  */
#echo832 {
  display: grid;
  grid-template: "mission mission"
    "train contact"
    "social contact"
    / 1fr 22.5rem;
  column-gap: 2rem;
}

/**  ///  Fox  ///  */
#fox832 {
  display: grid;
  grid-template: "mission mission"
    "train contact"
    "train social"
    / 1fr 31.5rem;
  column-gap: 2rem;
}

#missionFco .contentContainer {
  columns: 2;
}

/*<  ///  -----  MEDIA QUERIES  -----  ///  */

@media (max-width: 768px) {
  #main832 {
    grid-template: "mission"
      "vision"
      "insignia"
      "grad"
      "list"
      "chart"
      "social"
      / 1fr;
  }

  :is(#bravo832, #fox832) {
    grid-template: "mission"
      "train"
      "contact"
      "social"
      / 1fr;
  }

  #insignia832 .contentContainer {
    display: flex;
    flex-direction: row;
  }

  #insignia832 .contentContainer p {
    padding: 0 0 0 2rem;
  }

  #grad832 .contentContainer {
    flex-flow: row nowrap;
    width: 100%;
  }

  #grad832 .gradInfoBtns {
    flex-direction: column;
    padding: 0 0 0 2rem;
    width: max(16.5rem, 22rem);
  }

  #grad832 .gradInfoBtns>* {
    justify-content: space-evenly;
    width: 12.5rem;
  }

  #alpha832 {
    grid-template: "mission contact"
      "train train"
      "social social"
      / 1fr 21.5rem;
  }

  /**  end of max-width 768px */
}


@media (max-width: 680px) {
  #history832 {
    width: fit-content;
    margin: 0 auto;
  }

  :is(#history832, #visionDco) .contentContainer {
    columns: 1;
  }

  :is(#missionBco, #missionCco, #missionDco, #missionEco) .contentContainer {
    flex-direction: column;
  }

  /**  end of max-width 680px */
}


@media (max-width: 640px) {
  :is(#alpha832, #charlie832, #echo832) {
    grid-template: "mission"
      "train"
      "contact"
      "social"
      / 1fr;
  }

  #delta832 {
    grid-template: "mission"
      "vision"
      "train"
      "contact"
      "social"
      / 1fr;
  }

  #missionFco .contentContainer {
    columns: 1;
  }

  /**  end of max-width 640px */
}


@media (max-width: 600px) {
  :is(#alpha832, #bravo832, #charlie832, #delta832, #echo832, #fox832) .chart-col2 {
    --od-chart-ta: center;
  }

  /**  end of max-width 600px */
}


@media (max-width: 540px) {

  #insignia832 .contentContainer {
    flex-direction: column;
  }

  #insignia832 .contentContainer p {
    padding: 2rem 0 0 0;
  }

  #grad832 .contentContainer {
    flex-direction: column;
    align-items: center;
  }

  #grad832 .gradInfoBtns {
    width: fit-content;
    margin: 0 auto;
    padding-left: 0;
  }

  #grad832 .gradInfoBtns button:first-of-type {
    margin: 0.5rem 0 1rem 0;
  }

  /**  end of max-width 540px */
}

/*^ -------------------------- Army Award for Maintenance Excellence ------------------------ */
/*^  ----------------------------------- AAME --------------------------------- */
.aameH1 {
  scale: 80%;

}

#aameHeaderCon {
  font-size-adjust: from-font;
}

/*^ -------------------------- Directorate of Training ------------------------ */
/*^  ----------------------------------- DOT  --------------------------------- */
#mainDOT {
  display: grid;
  grid-template: "mission resource"
    "purpose contact"
    "chart chart"
    / 1fr 30rem;
  column-gap: 2rem;
}

/* #purposeDOT .contentContainer {
  columns: 1;
} */

#resourceDOT a {
  display: flex;
  flex-direction: column;
  align-items: center;
}

#resourceDOT img {
  margin: 0 0 0.5rem 0;
  transition: ease-in-out 350ms;
}

#resourceDOT img:hover {
  scale: 1.1;
}

#orgChartDOT .info {
  display: flex;
  width: min(60rem, 100%);
  justify-content: space-evenly;
  margin: 0 auto 1rem auto;
  gap: 1rem;
}

#orgChartDOT .info>* {
  width: 20rem;
  padding: 0.75em;
}

#orgChartDOT .infocontent {
  width: min(60rem, 100%);
  margin: 0 auto;
}



/*<  ///  -----  MEDIA QUERIES  -----  ///  */

@media (max-width: 700px) {

  #mainDOT {
    grid-template: "mission"
      "purpose"
      "resource"
      "contact"
      "chart"
      / 1fr;
  }

  /* #purposeDOT .contentContainer {
    columns: 1;
  } */

  #resourceDOT a {
    flex-direction: row;
  }

  #resourceDOT img {
    margin: 0 0.75rem 0.5em 0;
  }

  /**  end of max-width 700px */
}


@media (max-width: 580px) {
  #orgChartDOT .info {
    flex-direction: column;
    align-items: center;
    padding-bottom: 1rem;
  }

  /**  end of max-width 580px */
}


/*^ -------------------------- Training Management Office ----------------- */
/*^  ----------------------------------- TMO --------------------------------- */
:is(#missionTMO, #functionTMO) [role="list"] {
  max-width: unset;
  columns: 2;
}

#orgChartTMO img {
  display: block;
  width: min(80rem, 100%);
  margin: 0 auto;
}


/**  ///  MTT  //  */
#mttCon {
  display: flex;
  gap: 2rem;
}

#mttCon .info {
  width: 30rem;
}

#mttCon button {
  padding: 0.7em 0;
}

#mttCon .infocontent {
  flex-basis: 100%;
}

#mttCon #acc {
  width: 100%;
}

#requestMTT .contentContainer {
  display: flex;
  justify-content: center;
}

#requestMTT img.obj {
  max-width: 500px;
}

/**  ///  TOD/TMD  ///  */
:is(#todTMO, #tmdTMO) .contentContainer {
  display: flex;
  gap: 2rem;
}

#duoTMO .mission {
  flex: 1;
  min-width: 24.5rem;
}

#duoTMO .function {
  flex: 2;
}




/*<  ///  -----  MEDIA QUERIES  -----  ///  */
@media (max-width: 800px) {
  #mttCon {
    flex-direction: column;
  }

  #mttCon .info {
    width: min(32rem, 70vw);
    margin-inline: auto;
  }

  /**  end of max-width 800px */
}


@media (max-width: 768px) {
  :is(#todTMO, #tmdTMO) .contentContainer {
    flex-direction: column;
  }

  :is(#todTMO, #tmdTMO) .function p {
    max-width: 100%;
    columns: 2;
  }

  /**  end of max-width 768px */
}


@media (max-width: 700px) {
  :is(#missionTMO, #functionTMO) [role="list"] {
    max-width: var(--od-read-maxWidth);
    columns: 1;
  }

  #mttCon button {
    padding: 1.2rem 2rem;
  }

  /**  end of max-width 700px */
}


@media (max-width: 640px) {
  :is(#todTMO, #tmdTMO) .function p {
    max-width: var(--od-read-maxWidth);
    columns: 1;
  }

  /**  end of max-width 640px */
}


/*^ ---------------  Ordnance Training Development Division  --------------- */
/*^  ------------------------------------ OTDD --------------------------------- */
#aboutOTDD .contentContainer .note {
  --od-fz: var(--od-fz-xs);
}

#aboutOTDD [role="list"] {
  columns: 2;
  max-width: 100%;
}

#orgChartOTDD img {
  max-width: 800px;
  margin: 0 auto;
}

#functionOTDD ul {
  columns: 2;
  max-width: 100%;
}

/*<  ///  -----  MEDIA QUERIES  -----  ///  */
@media (max-width: 800px) {

  #functionOTDD ul {
    columns: unset;
    max-width: var(--od-read-maxWidth);
  }

  /**  end of max-width 800px */
}

@media (max-width: 600px) {

  #aboutOTDD .contentContainer ul {
    columns: unset;
    max-width: var(--od-read-maxWidth);
  }

  /**  end of max-width 600px */
}


/*^ ---------------  Armament and Electronics Training Department  ------- */
/*^  ------------------------------------ AETD --------------------------------- */
#mainAETD {
  display: grid;
  grid-template: "mission train"
    "chart contact"
    / 1fr minmax(37.5rem, 1fr);
  column-gap: 2rem;
}

/*<  ///  -----  MEDIA QUERIES  -----  ///  */
@media (max-width: 768px) {
  #mainAETD {
    grid-template: "mission"
      "train"
      "chart"
      "contact"
      /1fr;
  }

  /**  end of max-width 768px */
}


/*^ -----------------------  Munitions & EOD Training Dept.  ----------------- */
/*^  ------------------------------------ MEOD --------------------------------- */
#mainMEOD {
  display: grid;
  grid-template: "mission train"
    "chart info"
    "contact contact"
    / 1fr minmax(37.5rem, 1fr);
  column-gap: 2rem;
}

#orgChartMEOD img {
  --od-mw: 650px;
}

#trainMEOD .contentContainer {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

#trainMEOD .imgCon {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-evenly;
  gap: 2rem;
  box-sizing: border-box;
  width: 100%;
  height: max-content;
}

#trainMEOD .imgCon>* {
  width: calc((100% / 2) - 10px);
  overflow: hidden;
}

#trainMEOD .obj-fit {
  object-position: center;
}

#trainMEOD figcaption {
  --od-bottom: 0;
  --od-m: 0 0 3px 0;
}

#infoMEOD [role="list"]>*::before {
  --od-content: "";
}

/*<  ///  -----  MEDIA QUERIES  -----  ///  */
@media (max-width: 840px) {
  #mainMEOD {
    grid-template: "mission"
      "train"
      "chart"
      "info"
      "contact"
      /1fr;
  }

  #trainMEOD .contentContainer {
    flex-direction: row;
  }

  #trainMEOD .chartCon {
    width: 45%;
  }

  #trainMEOD .imgCon {
    flex-direction: row;
    flex: 1;
  }

  #missionMEOD ul {
    columns: 2;
    max-width: 100%;
  }

  /**  end of max-width 840px */
}

@media (max-width: 740px) {

  #trainMEOD .contentContainer {
    flex-direction: column;
  }

  #trainMEOD :is(.chartCon, .imgCon) {
    width: 100%;
  }

  /**  end of max-width 740px */
}

@media (max-width: 680px) {

  #missionMEOD ul {
    columns: 1;
    max-width: 60ch;
  }

  /**  end of max-width 680px */
}

@media (max-width: 400px) {
  #trainMEOD .imgCon {
    flex-direction: column;
  }

  #trainMEOD figure {
    min-height: 183px;
    min-width: 228px;
  }

  /**  end of max-width 400px */
}


/*^ -----------  Ordnance Electronics Maintenance Training Dept.  --------- */
/*^ ---------------------------------- OEMTD --------------------------------- */
#mainOEMTD {
  display: grid;
  grid-template: "about about"
    "mission train"
    "chart chart"
    / 1fr minmax(37.5rem, 1fr);
  column-gap: 2rem;
}

.aboutContacts {
  display: flex;
}

/*<  ///  -----  MEDIA QUERIES  -----  ///  */
@media (max-width: 800px) {

  #mainOEMTD {
    grid-template: "about"
      "mission"
      "train"
      "chart"
      / 1fr;
  }

  #missionOEMTD ul {
    columns: 2;
    max-width: 100%;
  }

  .aboutContacts {
    flex-wrap: wrap;
    justify-content: center;
  }

}

@media (max-width: 600px) {
  #missionOEMTD ul {
    columns: 1;
    max-width: 60ch;
  }



  /**  end of max-width 800px */
}

@media (min-width: 800px) {
  .aboutContacts p {
    padding-right: 15px;
  }
}


/** -----------  Tactical Support Equipment Training Department  -------------
/**  ---------------------------------- TSED --------------------------------- */

#mainTSED {
  display: grid;
  grid-template: "mission mission"
    "train chart"
    "contact contact"
    / minmax(37.5rem, 1fr) 1fr;
  column-gap: 2rem;
}

#missionTSED .contentContainer {
  columns: 2;
  max-width: 100%;
}

/*<  ///  -----  MEDIA QUERIES  -----  ///  */
@media (max-width: 800px) {

  #mainTSED {
    grid-template: "mission"
      "train"
      "chart"
      "contact"
      / 1fr;
  }
}

@media (max-width: 640px) {
  #missionTSED .contentContainer {
    columns: 1;
  }
}


/*^ -----------  Track Metalworking & Recovery Department  ------------- */
/*^ -------------------------------- TMRD ------------------------------ */
#mainTMRD {
  display: grid;
  grid-template: "mission mission"
    "train chart"
    "contact contact"
    / minmax(37.5rem, 1fr) 1fr;
  column-gap: 2rem;
}

#missionTMRD p {
  grid-area: para;
  width: fit-content;
}

#missionTMRD img {
  grid-area: img;
  width: 225px;
  margin: 0 auto;
}

#missionTMRD ul {
  grid-area: list;
  columns: 2;
  max-width: 100%;
}

#missionTMRD .contentContainer {
  display: grid;
  grid-template: "para img"
    "list list"
    / 1fr minmax(225px, 1fr);
  grid-gap: 1rem;
}

/*<  ///  -----  MEDIA QUERIES  -----  ///  */

@media (max-width: 768px) {
  #mainTMRD {
    grid-template: "mission"
      "train"
      "chart"
      "contact"
      / 1fr;
  }

  /**  end of max-width 768px */
}

@media (max-width: 640px) {
  #missionTMRD .contentContainer {
    grid-template: "para"
      "img"
      "list"
      / 1fr;
  }

  #missionTMRD ul {
    columns: 1;
    max-width: 60ch;
  }

  /**  end of max-width 640px */
}


/*^ -----------  Wheel Maintenance Training Department  ------------- */
/*^ ------------------------------ WMTD ----------------------------- */
#mainWMTD {
  display: grid;
  grid-template: "gallery gallery"
    "mission mission"
    "train contact"
    "chart chart"
    / 1fr 1fr;
  column-gap: 2rem;
}

#missionWMTD ul {
  columns: 2;
  max-width: 100%;
}

/*^ ///  91B Wheeled Vehicle Mechanic  ///  */
/* ^ ///  91S Stryker Systems Maintainer  ///  */
/* ^ ///  Rough Terrain Container Handler Maintainer  ///  */

:is(#main91B, #main91S, #mainRTCHM) {
  display: grid;
  grid-template: "course"
    "equip"
    / 1fr;
  column-gap: 2rem;
}

:is(#courseDesc91B, #courseDesc91S, #courseDescRTCHM) .contentContainer {
  columns: 2;
  max-width: 100%;
}

:is(#trainEquip91B, #trainEquip91S, #trainEquipRTCHM) .contentContainer {
  display: flex;
  flex-direction: row-reverse;
  gap: 2rem;
}

:is(#trainEquip91B, #trainEquip91S, #trainEquipRTCHM) .contentContainer>* {
  flex-basis: 100%;
}

#trainEquip91B figure {
  width: min(432px, 100%);
  height: fit-content;
  aspect-ratio: 193 / 149;
  margin: 0 auto;
}

#trainEquip91S figure {
  width: min(446px, 100%);
  height: fit-content;
  aspect-ratio: 446 / 327;
  margin: 0 auto;
}

#trainEquipRTCHM figure {
  width: min(445px, 100%);
  height: fit-content;
  aspect-ratio: 489 / 271;
  margin: 0 auto;
}

:is(#trainEquip91B, #trainEquip91S, #trainEquipRTCHM) figcaption {
  --od-top: calc(100% - 24px);
  --od-bottom: unset;
}


/*  ///  -----  MEDIA QUERIES  -----  ///  */

@media (max-width: 800px) {
  :is(#trainEquip91B, #trainEquip91S, #trainEquipRTCHM) .contentContainer {
    flex-direction: column;
  }

  :is(#trainEquip91B, #trainEquip91S, #trainEquipRTCHM) ul {
    columns: 2;
    max-width: 100%;
  }
}

@media (max-width: 700px) {
  #mainWMTD {
    grid-template: "gallery"
      "mission"
      "train"
      "chart"
      "contact"
      / 1fr;
  }
}

@media (max-width: 640px) {
  #missionWMTD ul {
    columns: 1;
    max-width: 60ch;
  }

  :is(#courseDesc91B, #courseDesc91S, #courseDescRTCHM) .contentContainer {
    columns: unset;
  }

  :is(#trainEquip91B, #trainEquip91S, #trainEquipRTCHM) ul {
    columns: 1;
    max-width: 60ch;
  }
}


/*^ ------------------  /// Accreditation  ///  ------------------- */
#aceCredit {
  grid-area: ace;
}

#coeCredit {
  grid-area: coe;
}

#mainCredit nt {
  display: grid;
  grid-template: "about"
    "ace"
    "coe"
    / 1fr;
  column-gap: 2rem;
}

:is(#aboutCredit, #aceCredit, #coeCredit) .contentContainer {
  columns: 2;
}

#coeCredit .contactList {
  --od-contactList-columns: max(18.5rem, 27.5rem);
  justify-content: center;
}

/*  ///  -----  MEDIA QUERIES  -----  ///  */
@media (max-width: 700px) {
  :is(#aboutCredit, #aceCredit, #coeCredit) .contentContainer {
    columns: 1;
  }
}


/*^ ------------------  /// Partnerships  ///  ------------------- */
#aboutPartner .contentContainer {
  columns: 2;
}

[id$="Partner"] .flexWrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

[id$="Partner"] .flexWrap a:first-of-type {
  width: 36rem;
}

[id$="Partner"] .flexWrap a:nth-child(2) {
  width: min(100%, 20rem);
  margin: 0 auto;
}

/*  ///  -----  MEDIA QUERIES  -----  ///  */
@media (max-width: 680px) {
  #aboutPartner .contentContainer {
    columns: 1;
  }

  [id$="Partner"] .flexWrap {
    flex-direction: column-reverse;
    gap: 1rem;
  }

  [id$="Partner"] .flexWrap a:first-of-type {
    width: 100%;
  }

  /**  end of max-width: 680px  */
}



/*^ ------------------  /// OD Regulations  ///  ------------------- */
/*^ -------------  /// OD School Policies & SOPs  ///  ------------- */
/*^ ---------------  /// 59th Policies & SOPs  ///  ---------------- */
/*^ ----------------  /// DOT Policies & SOPs  ///  ---------------- */
:is(#tableODregs, [id$="policies"]) .chartCon {
  --od-chart-w: min(80rem, 100%);
  --od-chart-m: 0 auto;
}

#tableDOTpolicies .chart-gridCon {
  --od-chart-gtc: 1fr 10rem;
}

/*<  ///  -----  MEDIA QUERIES  -----  ///  */
@media (max-width: 600px) {
  #tableDOTpolicies .chart-gridCon {
    --od-chart-gtc: 1fr 7rem;
  }
}


/*^ ------------------  /// OD Training Locations  ///  ------------------- */
#stateTrainLoc {
  display: none;
}

:is(#mapTrainLoc, #rcoTrainLoc) {
  position: relative;
}

:is(#mapTrainLoc, #rcoTrainLoc, #historyCOC, #historyOCSM, #historyOCWO) .modal {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  max-width: 750px;
  margin: 0 auto;
}

:is(#mapTrainLoc, #rcoTrainLoc) button.close-button {
  display: flex;
  margin: 0 auto 2rem auto;
}

:is(#mapTrainLoc, #rcoTrainLoc) .modal::backdrop {
  background: rgb(0 0 0 / 0.75);
}


/*<  ///  -----  MEDIA QUERIES  -----  ///  */
@media (max-width: 900px) {
  :is(#mapTrainLoc, #rcoTrainLoc) {
    display: none;
  }

  :is(#mapTrainLoc, #rcoTrainLoc) dialog button {
    position: relative;
    display: flex;
    justify-content: center;
    padding: 2rem 0 4rem 0;
  }

  #stateTrainLoc {
    display: block;
  }

  #stateTrainLoc .desc {
    margin: 2rem auto 0 auto;
    width: 75vw;
  }

  #stateTrainLoc .desccontent {
    width: 85vw;
    margin: 0 auto;
  }

  #stateTrainLoc .stateBtns {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(5rem, 1fr));
    grid-template-rows: auto;
    grid-gap: .25rem;
  }

  #VA2 .mapButtons {
    grid-area: buttons;
  }

  #VA2 {
    grid-template: "head"
      "info"
      "buttons"
      "social"
      "body"
      /1fr;
  }

  #mapLoc .btnGrid {
    grid-template-columns: repeat(auto-fit, minmax(20rem 1fr));
    justify-content: space-evenly;
  }

  #mapLoc .btnGrid.ftLee a {
    border-top-color: var(--army-c-gold);
  }

  .btnGrid.ftLee {
    padding-bottom: 0;
  }

}


@media (max-width: 768px) {
  #stateTrainLoc :is(.desccontent, .desc) {
    width: 100%;
  }
}



/*^ -----------  Army Award for Maintenance Excellence  ------------- */
/*^  ------------------------------ AAME ----------------------------- */

#mainAAME {
  display: grid;
  grid-template: "purpose objective"
    "respon respon"
    "categories categories"
    "history contact"
    / 1fr 1fr;
  column-gap: 2rem;
}

:is(#responsibilitiesAAME, #categoriesAAME) .contentContainer>* {
  columns: 2;
  max-width: 100%;
}

#responsibilitiesAAME h3 {
  margin: 2rem 0 1rem 0;
}

/*  PROCESS  */

.img1 {
  grid-area: img1;
}

.img2 {
  grid-area: img2;
}

.img3 {
  grid-area: img3;
}

.img4 {
  grid-area: img4;
}

.process {
  grid-area: process;
}

#processAAME .contentContainer {
  display: grid;
  grid-template: "img1 process img2"
    "img3 process img2"
    "img3 process img4"
    ". process img4"
    /12.5rem 1fr 12.5rem;
  column-gap: 2rem;
  align-items: center;
  width: min(75rem, 100%);
  margin: 0 auto;
}

#processAAME .process h4 {
  text-align: center;
}


/*  TimeLine  */
#timelineAAME .contentContainer {
  display: grid;
  grid-template-columns: 60ch 22.5rem;
  column-gap: 2rem;
  width: fit-content;
  margin: 0 auto;
}

#timelineAAME .headingList {
  max-width: 60ch;
  margin: auto 0 auto auto;
}

#timelineAAME .highlightDiv p {
  display: block;
  width: inherit;
}

#timelineAAME .highlightDiv {
  width: min(22.5rem, 100%);
  margin: auto;
}

#timelineAAME abbr {
  --od-c: var(--od-c-contrastWhite);
  --od-txdcol: white;
}


/* < ///  -----  MEDIA QUERIES  -----  ///  */

@media (max-width: 768px) {

  #mainAAME {
    grid-template: "purpose"
      "objective"
      "respon"
      "categories"
      "history"
      "contact"
      / 1fr;
  }

  #objectiveAAME .contentContainer>* {
    columns: 2;
    max-width: 100%;
  }

  #contactAAME .contactList {
    --od-contactList-columns: repeat(auto-fit, minmax(15rem, 44rem));
    place-content: center;
  }

  /** end max-width 768px */
}


@media (max-width: 680px) {

  #timelineAAME .contentContainer {
    grid-template: "note"
      "list"
      / 1fr;
    row-gap: 2rem;
  }

  #timlelineAAME .highlightDiv {
    grid-area: note;
  }

  #timelineAAME .headingList {
    grid-area: list;
  }

  #timelineAAME .highlightDiv {
    width: 25rem;
    height: fit-content;
    margin: 0 auto;
    padding: 0;
  }

  /** end of max-width 680px */
}


@media (max-width: 640px) {

  :is(#objectiveAAME, #responsibilitiesAAME, #categoriesAAME) .contentContainer>* {
    columns: 1;
    max-width: 60ch;
  }

  #processAAME .contentContainer {
    grid-template: "process"
      / 1fr;
  }

  #processAAME :is(.img1, .img2, .img3, .img4) {
    display: none;
  }

  #processAAME .ghostButton-black {
    --od-m: 3rem 0 0 0;
  }

  /** end of max-width 640px*/
}



/*^ ---------------------  Training with Industry  ---------------------- */
/*^ -------------------------------- TWI--------------------------------- */
#documentsTWI {
  grid-area: docs;
}

#mainTWI {
  display: grid;
  grid-template: "about docs"
    "contact contact"
    / 55% 1fr;
  column-gap: 2rem;
}

#documentsTWI .chart-gridCon {
  --od-chart-gtc: 10rem 1fr;
  align-items: center;
}

#contactTWI .contentContainer-white {
  border-radius: 0 0 .5rem .5rem;
}

#contactTWI .contactList {
  --od-contactList-columns: repeat(auto-fit, minmax(17.5rem, 19.5rem));
  justify-content: space-evenly;
}

/** APPLICATION */
#appinfoTWI {
  grid-area: info;
}

#requirementsTWI {
  grid-area: req;
}

#packetReqTWI {
  grid-area: packet;
}

#applicationTWI {
  display: grid;
  grid-template: "info packet"
    "req req"
    / 1fr 1fr;
  column-gap: 2rem;
}

#requirementsTWI .info {
  display: flex;
  justify-content: center;
  gap: .5rem;
  margin-block-end: 1rem;
}

#requirementsTWI .info>* {
  width: min(20rem, 100%);
}

:is(#twiOff, #twiWO, #twiNCO) .contentContainer>* {
  columns: 2;
  max-width: 100%;
}


/**  COMPANIES  */

#companiesTWI h3.khakiBar {
  text-align: center;
  margin-bottom: .5rem;
}

#companiesTWI .info {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  margin-block-end: 2rem;
}

#companiesTWI .info>* {
  width: min(20rem, 17.8rem);
  height: fit-content;
  background: whitesmoke;
  border-radius: 0 0 .3rem .3rem;
  padding: .5rem;
}

#companiesTWI .infocontent .contentContainer {
  columns: 2;
}



/*<  ///  -----  MEDIA QUERIES  -----  ///  */

@media (max-width: 970px) {
  #mainTWI {
    grid-template: "about"
      "docs"
      "contact"
      / 1fr;
  }

  #aboutTWI .contentContainer {
    columns: 2;
    max-width: 100%;
  }

  /** end of max-width 970px */
}


@media (max-width: 840px) {
  #applicationTWI {
    grid-template: "info"
      "req"
      "packet"
      / 1fr;
  }

  :is(#appInfoTWI, #packetReqTWI) .contentContainer>* {
    columns: 2;
    max-width: 100%;
  }

  /**  end of max-width 840px */
}


@media (max-width: 680px) {

  #documentsTWI .chart-gridCon {
    --od-chart-gtc: 8rem 1fr;
  }

  :is(#appInfoTWI, #packetReqTWI) .contentContainer>*:not(hr) {
    columns: 1;
    max-width: 60ch;
  }

  :is(#twiOff, #twiWO, #twiNCO) .contentContainer>* {
    columns: 1;
    max-width: 60ch;
  }

  #companiesTWI .infocontent .contentContainer {
    columns: 1;
  }

  /** end of max-width 680px */
}


@media (max-width: 600px) {

  #aboutTWI .contentContainer {
    columns: 1;
    max-width: 75ch;
    margin-inline: auto;
  }

  #requirementsTWI .info {
    flex-direction: column;
    align-items: center;
  }

  /** end of max-width 600px */
}


@media (max-width: 500px) {

  /** end of max-width 500px */
}



/*^ -----------  Ordnance Corps & School Leadership  -------------- */
/*^  -------------------------------------------------------------- */
#leaders h2 {
  --od-m: 0;
  text-align: center;
}

#leaders .contentContainer {
  display: grid;
  grid-template: ". coo ."
    "csm crest cwo"
    "dep cos eod"
    / 1fr auto 1fr;
  column-gap: 2rem;
  row-gap: 4rem;
}

#coo {
  grid-area: coo;
}

#ocsm {
  grid-area: csm;
}

#ocwo {
  grid-area: cwo;
}

#dep {
  grid-area: dep;
}

#cos {
  grid-area: cos;
}

#eodCom {
  grid-area: eod;
}

#leaders .contentContainer>* {
  --od-bg: var(--od-bg-loonCrest);
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--od-bg);
  width: min(19rem, 100%);
  padding: 1rem;
  margin: 0 auto;
  border-radius: 3px;
}

#leaders .contentContainer>* a {
  position: relative;
  inset: 0;
}

#leaders #leadersCenter {
  display: flex;
  flex-direction: column;
  justify-content: center;
  --od-bg: none;
  grid-area: crest;
}

#leadersCenter h2 {
  line-height: 1.6;
  font-weight: 500;

}

h2.leaderH2 {
  color: var(--od-c-red);
}

#leaders .leaderTitleCon {
  display: flex;
  flex-direction: column;
}

#leaders :is(p.leaderRankName, p.leaderTitle) {
  --od-ff: var(--od-ff-heading);
  --od-c: white;
  --od-p: 0.5rem 0;
  --od-m: 0;
  --od-lh: 1.2;
  line-height: var(--od-lh);
  text-shadow: 1px 1px 2px rgb(0, 0, 0, .4);
}

#leaders p.leaderRankName {
  --od-fz: var(--od-fz-ms);
}

#leaders p.leaderTitle {
  --od-c: var(--od-c-gold);
}

/*  BIO PAGES  */
[id$="Bio"] .bioHeader {
  position: relative;
  display: flex;
  justify-content: start;
  align-items: end;
  width: 100%;
  height: fit-content;
  margin: 0 0 2rem 0;
}

/* [id$="Bio"] .bioHeader img {
} */

[id$="Bio"] .leaderTitleCon {
  --od-bioTitle-p: .25em 0 .25em .35em;
  width: 100%;
}

[id$="Bio"] .bioBody {
  columns: 2;
}

[id$="Bio"] h2.leaderRankName {
  --od-lh: 1.2;
  margin: 0;
  padding: var(--od-bioTitle-p);
}

[id$="Bio"] .leaderTitle {
  position: relative;
  width: 100%;
  height: fit-content;
}

[id$="Bio"] .leaderTitle h3 {
  --od-bg: var(--od-c-travertine);
  position: relative;
  bottom: 0;
  background: var(--od-bg);
  padding: var(--od-bioTitle-p);
  margin: 0 0 2px 0;
}


/*<  ///  -----  MEDIA QUERIES  -----  ///  */

@media (max-width: 767px) {
  #leaders .contentContainer {
    display: grid;
    grid-template: "coo coo"
      "csm cwo"
      "dep cos"
      "eod eod"
      / 1fr 1fr;
  }

  #leaders #leadersCenter {
    display: none;
  }

  /** end of max-width 767px */
}


@media (max-width: 600px) {
  [id$="Bio"] .bioBody {
    columns: initial;
  }

  /** end of max-width 580px */
}


@media (max-width: 499px) {
  #leaders .contentContainer {
    display: grid;
    grid-template: "coo"
      "csm"
      "cwo"
      "dep"
      "cos"
      "eod"
      / 1fr;
  }

  [id$="Bio"] .bioBody {
    columns: 1;
  }

  [id$="Bio"] .bioHeader {
    display: flex;
    flex-direction: column;
  }

  [id$="Bio"] .bioHeader img {
    margin: 0 auto;
  }

  /** end of max-width 499px */
}

.cols2
/*^ ---------------------  Hall of Fame  --------------------- */
/*^  ------------------------  HOF  --------------------------- */

[id^="hof-"] .pageHeaderCrest img {
  width: min(13rem, 100%);
}

/** INDUCTEES A-Z  */

#azHOF .btnConHOF {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(auto, 7.5rem));
  grid-template-rows: auto;
  grid-gap: 0.2rem;
  width: 100%;
  place-content: center;
  padding: 2rem 0;
  margin-inline: auto;
}

#azHOF .info button {
  --od-fz: var(--od-fz-ms);
}

#azHOF .contentConHOF {
  width: 65%;
  margin-inline: auto;
}

#azHOF .chart-gridCon {
  --od-chart-gtc: 1fr minmax(11.5rem, 25%);
}

#azHOF .chart-col1 {
  text-align: left;
}

#azHOF :is(h2.darkBar, .chart-col1) br {
  display: none;
}

.fancyPage img {
  display: inline;
  float: left;
}

:is(#azHOF, #yearHOF) span.mobileOff {
  display: inline-block;
  --od-ff: inherit;
  --od-fz: var(--od-fz-ms);
  --od-fw: inherit;
}

:is(#azHOF, #yearHOF) .addInfo {
  background: linear-gradient(90deg, rgb(255, 255, 255, 0.01) 0%, rgb(255, 255, 255, 0.6) 50%, rgb(255, 255, 255, 0.01) 100%);
  border-color: var(--od-c-mohBlue);
}

/**  ///  INDUCTEES YEAR  ///  */

#yearHOF h2.darkBar br {
  display: none;
}

#yearHOF .btnConHOF {
  display: flex;
  flex-flow: column nowrap;
  width: 100%;
  margin-inline: auto;
}

#yearHOF .chart-gridCon {
  --od-chart-gtc: 1fr 1fr;
  column-gap: .2rem;
}

#yearHOF .chart-gridCon-1col {
  --od-chart-gtc: 1fr;
  text-align: center;
}

#yearHOF .chart- {
  margin-block-end: 1rem;
}

#yearHOF .chart-title.chart-gridCon {
  --od-chart-gtc: 1fr;
}

#yearHOF .info {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr));
  grid-template-rows: auto;
  grid-gap: 1rem;
  width: 100%;
}

#yearHOF .btnConHOF>* {
  padding: .5rem 0;
}

#yearHOF .btnConConHOF {
  width: min(87.5rem, 100%);
  margin: 0 auto;

}


/**  ///  NOMINATION INFORMATION  ///  */

#nomInfoHOF .backgroundHOF {
  grid-area: bg;
}

#nomInfoHOF .faqHOF {
  grid-area: faq;
}

#nomInfoHOF .formsHOF {
  grid-area: forms;
}

#nomInfoHOF {
  display: grid;
  grid-template: "bg forms"
    "faq faq"
    / 1fr 25rem;
  column-gap: 2rem;
}

#nomInfoHOF .formsHOF .formBtnsCon {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

/** Buttons */
#nomInfoHOF .info {
  display: grid;
  width: 100%;
}

#nomInfoHOF .btnConHOF {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto;
  column-gap: 1rem;
  width: fit-content;
  margin-inline: auto;
}

#nomInfoHOF button.infolinks {
  width: min(35rem, 100%);
}

/** FAQ Answer Card */
#nomInfoHOF .infocontent {
  background: unset;
}

#nomInfoHOF .faqCard {
  display: flex;
  flex-flow: column nowrap;
  width: min(70rem, 100%);
  background: whitesmoke;
  border-radius: 0.5rem;
  margin-inline: auto;
  box-shadow: 2px 10px 20px rgb(52, 52, 52, 0.2);
}

#nomInfoHOF .faqCard h4.infocontentHeader {
  --od-fz: var(--od-fz-m-title);
  background: var(--od-c-whiteRock);
  border-bottom: 2px solid var(--od-c-gurkha);
  border-radius: .5rem .5rem 0 0;
  padding: .7rem 1rem 1rem 1rem;
  margin: 0;
}

#nomInfoHOF .faqCardBody {
  padding: 2rem;
}

#nomInfoHOF .faqCardBody p:not([class^="addInfo"]) {
  padding: 0;
}

#nomInfoHOF address {
  margin: 1rem;
}

#nomInfoHOF p.addInfo {
  --od-fz: var(--od-fz-sm);
  --od-bg: linear-gradient(90deg, whitesmoke, white, white, white, whitesmoke);
  --od-p: .5rem 0;
}

#nomInfoHOF :is(#q3, #q6) .firstWord {
  --od-fz: 1.2em;
  --od-fw: 600;
}


/** OD HOF Forms  */
#nomInfoHOF .formBtnsCon {
  display: flex;
  justify-content: space-evenly;
  padding: 1rem;
}



/*<  ///  -----  ///  MEDIA QUERIES  ///  -----  ///  */

@media (max-width: 839px) {
  #azHOF .contentConHOF {
    width: min(46rem, 100%);
  }

  /**  end of max-width 839px  */
}


@media (max-width: 768px) {

  #yearHOF .info {
    display: flex;
    flex-flow: column nowrap;
    gap: 1rem;
  }

  #yearHOF .btnConHOF {
    display: grid;
    grid-template-columns: repeat(5, minmax(4rem, 11.5rem));
    width: fit-content;
    margin-inline: auto;
  }



  /**  end of max-width 768px  */
}


@media (max-width: 700px) {

  .introHOF p {
    columns: 1;
    max-width: 60ch;
  }

  /**  end of max-width 700px  */
}


@media(max-width: 679px) {

  #nomInfoHOF {
    grid-template: "bg"
      "forms"
      "faq"
      / 1fr;
  }

  #nomInfoHOF .formsHOF .formBtnsCon {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    gap: 1rem;
  }

  /**  end max-width 679px  */
}


@media(max-width: 600px) {
  :is(#azHOF, #yearHOF) .chart-gridCon {
    grid-template-areas: "col1 col2";
    align-items: center;
  }

  :is(#azHOF, #yearHOF) :is(.chart-col1, .chart-col2) {
    justify-content: start;
  }

  #azHOF .chart-col2 {
    text-align: center;
    place-content: center;
  }

  #yearHOF .chart-header>* {
    text-align: center;
    justify-content: center;
    place-content: center;

  }

  #nomInfoHOF button.infolinks {
    --od-fz: var(--od-fz-ms);
    padding-block: 1rem;
  }

  /**  end of max-width 600px */
}


@media(max-width: 540px) {


  #azHOF .chart-gridCon {
    --od-chart-gtc: 1fr 6rem;
  }

  :is(#azHOF, #yearHOF) span.mobileOff {
    display: none;
  }

  /**  end max-width 540px  */
}


@media(max-width: 480px) {


  #azHOF :is(h2.darkBar, .chart-col1) br {
    display: inline-block;
  }

  #yearHOF h2.darkBar br {
    display: inline-block;
  }

  :is(#azHOF, #yearHOF) h2.darkBar {
    display: flex;
    justify-content: center;
    text-align: center;
  }

  #nomInfoHOF .faqCardBody {
    padding: 1rem;
  }

  #nomInfoHOF .btnConHOF {
    grid-template-columns: 1fr;
  }

  #nomInfoHOF .formsHOF .formBtnsCon {
    flex-direction: column;
    width: fit-content;
    margin-inline: auto;
  }


  /**  end max-width 480px  */
}



/*^ ---------------------  HISTORY  --------------------- */
/*^  ---------------------------------------------------- */

#historyMain .backgroundHistory {
  grid-area: back;
}

#historyMain .backgroundHistory>* {
  columns: 2;
  max-width: 100%;
}

#historyMain #galleryHistory {
  grid-area: gallery;
}

#historyMain .ofHistory {
  grid-area: of;
  margin: 2rem 0 0 0;
}

#historyMain {
  display: grid;
  grid-template: "back"
    "gallery"
    "of"
    / 1fr;
  width: 100%;
}

#historyMain .btnConHistory {
  display: flex;
  flex-flow: column nowrap;
  margin-inline: auto;
}

#historyMain .info {
  grid-area: info;
}

#historyMain .infocontent {
  grid-area: infocontent;
  width: fit-content;
  margin-inline: auto;
  padding-bottom: 2rem;
}

#historyMain .ofHistroy div.contentContainer:first-of-type {
  padding-inline: 0;
}

#historyMain .ofHistory .contentContainer {
  display: grid;
  grid-template: "info infocontent"
    / minmax(17.5rem, 25rem) 1fr;
  column-gap: 2rem;
  justify-content: center;
}

#historyMain [id^="contHis"] .contentContainer {
  display: block;
  padding-bottom: 0;
}

#historyMain .infocontent h3 {
  --od-fz: var(--od-fz-m-title);
  text-align: center;
}

[id^="contHis"] .contentContainer>* :has(img) {
  max-width: 100%;
}

#historyMain .song {
  display: grid;
  justify-content: center;
  text-align: center;
  padding: 2rem 1rem;
}

#historyMain .song h4 {
  --od-fz: var(--od-fz-m);
}

#historyMain .song p {
  font-style: italic;
}

#contHis6 .odSongs {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  width: 100%;
  padding: 2rem 0;
}

#contHis5 .odSongs>div {
  width: 100%;
}


/**  OD HISTORY  */

#historyOD .contentContainer {
  width: min(75rem, 100%);
  margin-inline: auto;
}

#historyOD .odHistory {
  display: block;
  width: 100%;
  margin-block-end: 2rem;
}

#historyOD h2.title {
  margin-block-end: 0;
}

#historyOD address.author {
  font-family: var(--od-ff-body);
  --od-fz: var(--od-fz-sm);
  margin: 1rem 0 2rem 2rem;
}

#historyOD .odHistory img {
  display: block;
  margin: 0;
}

#historyOD .odHistory h3 {
  width: 100%;
}

#historyOD .odHistory p {
  max-width: 90ch;
}

#historyOD figure {
  display: grid;
  background: linear-gradient(90deg, #181818 0%, #2c2c2c 50%, #343434 100%);
  width: fit-content;
  justify-self: center;
  padding: 0;
}

#historyOD figure:not([class^="img"]) {
  margin: 1rem auto 2rem auto;
}

#historyOD .odHistory figcaption {
  --od-c: whitesmoke;
  --od-bg: transparent;
  margin: 0;
  padding-bottom: .35em;
  position: relative;
  top: -1px;
  justify-self: center;
  border-top: 1.5px solid var(--army-c-gold);
}


/**  MEDAL OF HONOR RECIPIENTS */

#historyMOH .chart-section {
  margin-block-end: 2rem;
}

#historyMOH .chart-gridCon {
  --od-chart-gtc: 1fr 1fr 10rem;
}

#historyMOH h3.chart-h3 {
  --od-chart-bg: var(--od-c-whiteRock);
  margin: 0;
}

#historyMOH .chart-intro>* {
  columns: 2;
  max-width: 100%;
}

#historyMOH .chart-col1 {
  display: flex;
  align-items: center;
}


/**  ///  PAST LEADERS OF ORDNANCE  ///  */

/**  CHIEFS  */

:is(#historyCOC, #historyOCSM, #historyOCWO) .chart-gridCon {
  --od-chart-gtc: 10rem 1fr 12.5rem;
  position: relative;
  align-items: center;
}

:is(#historyCOC, #historyOCSM, #historyOCWO) .biolinked {
  cursor: pointer;
}

:is(#historyCOC, #historyOCSM, #historyOCWO) .biolinked:hover {
  outline: 2px solid var(--od-c-red);
  outline-offset: -2px;
  border-radius: 2px;
}

:is(#historyCOC, #historyOCSM, #historyOCWO) .bioNA {
  cursor: default;
}

.bioNA::after {
  --od-c: white;
  --od-ff: var(--od-ff-heading);
  --od-fz: var(--od-fz-sm);
  --od-fw: 400;
  position: absolute;
  inset: 0;
  opacity: 0;
  content: "Bio Unavailable";
  color: var(--od-c);
  font-family: var(--od-ff);
  font-size: var(--od-fz);
  font-weight: var(--od-fw);
  width: fit-content;
  height: fit-content;
  background: rgb(148, 8, 8, .8);
  border: 1px solid rgb(52, 52, 52, .75);
  border-radius: .5em;
  padding: .25em 1em;
  margin: auto;
  cursor: default;
  z-index: 1;
  transition: ease-in-out 500ms;
}

.bioNA:hover::after {
  opacity: 100%;
}

/** Modal CSS */
:is(#historyCOC, #historyOCSM, #historyOCWO) .modal {
  height: fit-content;
  max-height: 650px;
  background: white;
  border: 2px solid rgb(52, 52, 52, .70);
  padding: 0 .75em .75em;
}

:is(#historyCOC, #historyOCSM, #historyOCWO) .dialogCon {
  position: relative;
  inset: 0;
  width: 100%;
}

:is(#historyCOC, #historyOCSM, #historyOCWO) .modal button.close-button {
  --od-bg: rgb(0 0 0 / 25%);
  position: sticky;
  top: 1rem;
  left: calc(100% - 2rem);
  font-weight: 500;
  background: var(--od-bg);
}

:is(#historyCOC, #historyOCSM, #historyOCWO) .modal button.close-button:hover {
  --od-bg: #232323;
}

:is(#historyCOC, #historyOCSM, #historyOCWO) h3.chart-h3 {
  --od-chart-bg: var(--od-c-ltKhaki);
  --od-chart-ta: left;
  --od-chart-p: 1rem;
  --od-chart-m: 0;
}

:is(#historyCOC, #historyOCSM, #historyOCWO) .chart-col2 {
  --od-chart-ff: var(--od-ff-condensed);
  --od-chart-fz: clamp(1.8rem, 2vw, 2.6rem);
  --od-chart-fw: 400;
}

:is(#historyCOC, #historyOCSM, #historyOCWO) .chart-col3 {
  --od-chart-fz: clamp(1.4rem, 1.5vw, 1.8rem);
}


#actingChiefs .gridCon {
  grid-template-columns: repeat(auto-fit, minmax(28rem, 1fr));
  grid-template-rows: auto;
  column-gap: 2rem;
  row-gap: 3rem;
}

#actingChiefs .gridCon>* {
  border-left: 2px solid rgb(52, 52, 52, .25);
  padding: 0 .5rem;
  margin-left: .5rem;
}


/**  STAFF RIDES  */
#staffRides .info {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(28rem, 1fr));
  grid-template-rows: auto;
  grid-gap: .2rem;
  margin-bottom: 2rem;
}

#historyInfo #addInfo .contentContainer {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(28rem, auto));
  grid-template-rows: auto;
  column-gap: 2rem;
}

#historyInfo :is(#pbe, #cpd, #boc) ul {
  columns: 2;
  max-width: 100%;
}



/*<  ///  -----  ///  MEDIA QUERIES  ///  -----  ///  */

@media (max-width: 880px) {

  #historyMain .ofHistory .contentContainer {
    grid-template: "info"
      "infocontent"
      / 1fr;
    row-gap: 2rem;
    place-items: center;
  }

  #historyMain .info .btnConHistory {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    width: 100%;
  }

  #historyMain .info {
    width: min(50rem, 80%);
  }


  /**  end of max-width 880px  */
}


@media (max-width: 767px) {

  #historyMain .backgroundHistory>* {
    columns: 1;
    max-width: initial;
  }

  #historyMain .odSongs audio {
    width: 25rem;
    margin-inline: auto;
  }

  #historyMOH .chart-intro>* {
    columns: 1;
    max-width: 60ch;
  }

  #historyInfo :is(#pbe, #cpd, #boc) ul {
    columns: 1;
    max-width: 60ch;
  }

  /**  end of max-width 767px  */
}


@media (max-width: 600px) {


  #historyMOH .chart-gridCon {
    --od-chart-gtc: 1fr 7.5rem;
    --od-chart-gta: "col1 col3"
      "col2 col3";
  }

  #historyMOH .chart-col1 {
    font-weight: 600;
  }


  #historyMOH .chart-gridCon :is(.chart-col2, .chart-col3) {
    --od-chart-ta: center;
    border-right: 1.5px solid #dcdcdc;
  }

  #historyMOH .chart-gridCon .chart-col2 {
    border-top: 1.5px solid #dcdcdc;
    display: flex;
  }

  #historyMOH .chart-gridCon .chart-col3 {
    --od-chart-ta: center;
    display: grid;
    border-top: unset;
    border-right: unset;
    align-items: center;
    height: 100%;
  }

  :is(#historyCOC, #historyOCSM, #historyOCWO) .chart-gridCon {
    --od-chart-gtc: 8rem 1fr;
    --od-chart-gta: "col1 col2"
      "col1 col3";
  }

  /**  end of max-width 600px  */
}


@media (max-width: 475px) {
  #historyMain .ofHistory .imgLeft {
    float: none;
    display: block;
    margin-inline: auto;
  }

  /**  end of max-width 475px  */
}


@media (max-width: 440px) {

  :is(#galleryHistory, .backgroundHistory, .ofHistory) .contentContainer {
    padding: 2rem 1rem;
  }

  #historyMain .info .btnConHistory {
    grid-template-columns: 1fr;
  }

  #historyMOH .chart-gridCon :is(.chart-col1, .chart-col2) {
    --od-chart-jc: left;
  }

  #actingChiefs .gridCon {
    grid-template-columns: 1fr;
  }

  /**  end of max-width 440px  */
}



/*^ -----------------------  EOD  ------------------------ */
/*^  ---------------------------------------------------- */
[id^="eod"].container {
  --od-c: white;
  background: var(--od-bg-slickCarbon);
  background-blend-mode: multiply;
}

[id^="eod"] .sectionContainer {
  background: black;
}

[id^="eod"] .khakiBar {
  border-top: 1.5px solid var(--od-c-red);
}

[id^="eod"] .subTitle {
  grid-area: title;
  display: grid;
  justify-content: center;
  align-items: center;
  padding: 0 1rem 2rem 1rem;
  text-align: center;
}

[id^="eod"] .subTitle h2 {
  margin: 0;
}

[id^="eod"] .subTitle h2:first-of-type {
  font-size: var(--od-fz-subTitle-xl);
  font-family: var(--od-ff-subTitle);
  font-weight: 700;
}

[id^="eod"] h4.h4Header {
  --od-c: var(--od-c-whiteRock);
  text-transform: uppercase;
}

[id^="eod"].container a[href^="http"] {

  --od-td: underline;
}

[id^="eod"].container a[data-link]:hover {
  color: white;
}

[id^="contactEOD"].sectionContainer {
  --od-bg: transparent;
}

[id^="contactEOD"] .contentContainer {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
  grid-template-rows: auto;
  justify-content: center;
}

[id^="contactEOD"] .social {
  --od-w: auto;
}

[id^="contactEOD"] .social img {
  margin: 2rem auto;
}

[id*="eodMenuCon"].inpage {
  margin-bottom: 4rem;
}

/**  ///  ----------  HOME  ----------  ///  */

#eod-main .mainContainer {
  display: grid;
  grid-template: "title title"
    "video video"
    "intro contact"
    "resource resource"
    / minmax(50rem, 1fr) minmax(12rem, 27.5rem);
  column-gap: 2rem;
}

#galleryEOD {
  display: none;
}

#resourceEOD .contentContainer {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  grid-template-rows: auto;
  row-gap: 2rem;
  justify-content: space-evenly;
}

#resourceEOD .contentContainer>* {
  margin-inline: auto;
}

/**  ///  ----------  ABOUT  ----------  ///  */
#badgeEOD-about.badge {
  grid-area: badge;
}

#badgeEOD-about .shield {
  grid-area: shield;
}

#badgeEOD-about .crab {
  grid-area: crab;
}

#badgeEOD-about .bolts {
  grid-area: bolts;
}

#badgeEOD-about .wreath {
  grid-area: wreath;
}

#badgeEOD-about .bomb {
  grid-area: bomb;
}

#structureEOD-about .structure {
  grid-area: struc;
}

#resourceEOD-about {
  grid-area: partners;
}


#eod-about .mainContainer {
  display: grid;
  grid-template: "title"
    "menu"
    "gallery"
    "mission"
    "badge"
    "struc"
    "contact"
    "partners"
    / 1fr;
  width: 100%;
}

#missionEOD-about .contentContainer {
  display: grid;
  grid-template-columns: 37.5rem 1fr;
  grid-template-rows: auto;
  column-gap: 1rem;
}

#missionEOD-about img {
  aspect-ratio: 3 / 2;
}

#badgeEOD-about h4 {
  text-transform: uppercase;
}

#badgeEOD-about .symbolism {
  display: grid;
  grid-template: "shield crab bolts"
    "wreath crab bomb"
    / 1fr minmax(2rem, 1fr) 1fr;
  grid-gap: 2rem;
  width: 100%;
  margin-bottom: 2rem;
}

#badgeEOD-about .crab img {
  max-width: 300px;
  margin: 0 .5rem 0 0;
}

#badgeEOD-about .progression {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  width: min(77rem, 100%);
  margin-inline: auto;
}

#badgeEOD-about .progression>* {
  display: flex;
  gap: 2rem;
}

#badgeEOD-about .progression img {
  width: 100%;
  max-width: 225px;
  margin: auto 0;
}

#badgeEOD-about :is(.basic, .senior, .master) [class="con"] {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/**  ///  ----  STRUCTURE  ----  ///  */
#eodTm {
  grid-area: tm;
}

#eodPlt {
  grid-area: plt;
}

#eodCo {
  grid-area: co;
}

#eodBn {
  grid-area: bn;
}

#eodGrp {
  grid-area: grp;
}

#structureEOD-about .contentContainer {
  display: grid;
  grid-template: "tm plt"
    "co bn"
    "grp grp"
    / 1fr 1fr;
  grid-gap: 2rem;
  width: 100%;
}

#eodGrp {
  margin: 0 auto;
}

[id^="eod"] .structureCard {
  display: flex;
  flex-direction: column;
  margin-bottom: 1rem;
}

[id^="eod"].unit h3 {
  text-transform: uppercase;
}

[id^="eod"] .structureCard h4.title {
  text-decoration: underline;
  text-align: center;
}

[id^="eod"] .structureCard h4.rank {
  text-align: center;
}

[id^="eod"] .struCardDes {
  border-left: 2px solid #dccdcd;
}


/**  ///  ----  PARTNERS  ----  ///  */
#resourceEOD-about .contentContainer {
  display: flex;
  flex-wrap: wrap;
  flex: 1;
  justify-content: space-evenly;
  gap: 2rem;
}



/**  ///  ----  HISTORY (Subpage)  ----  ///  */
#historyPre50EOD-history img :not([class="notThis"]) {
  max-width: 450px;
}

#historyPre50EOD-history .britSch {
  width: 225px;
  height: auto;
  aspect-ratio: 383 / 271;
  margin-block-end: .5rem;
}

#historyPre50EOD-history .img1 {
  grid-area: img1;
}

#historyPre50EOD-history .img2 {
  grid-area: img2;
}

#historyPre50EOD-history .img3 {
  grid-area: img3;
}

#historyPre50EOD-history .txtC {
  grid-area: txt;
}

#historyPre50EOD-history .history-2 {
  display: grid;
  grid-template: "img1 img1"
    "txt txt"
    "img2 img3"
    / 1fr 1fr;
  grid-gap: 2rem;
  padding-top: 0;
  margin-block: -0.5rem 4rem;
}

.colMas {
  display: column;
  columns: 2;
  gap: 2rem;
  width: 100%;
}

.colMas>* {
  break-inside: avoid;
  margin: 0 0 2rem 0;
}

.colMas img {
  margin-block-end: 1rem;
}

.span2 {
  column-span: 2;
}


/**  ///  ----------  BECOME EOD  ----------  ///  */
#eod-become h3 {
  margin-block-end: 2rem;
}

#eod-become h4 {
  margin-block-start: 0;
}

[class^="qual"] .flexCon {
  position: relative;
}

/** /// ENLIST /// */
.enlistImg {
  grid-area: img;
}

.recruiterEnlist {
  grid-area: recruit;
}

.qualEnlist {
  grid-area: qual;
}

.bgBadge {
  grid-area: badge;
}

#enlistEOD-become .contentContainer {
  display: grid;
  grid-template: "img recruit"
    "qual qual"
    / minmax(60%, 1fr) minmax(40%, 1fr);
  grid-gap: 2rem;
}

.recruiterEnlist {
  padding: 0 1rem;
}

.recruiterEnlist img {
  height: fit-content;
}

.bonusEnlist {
  display: none;
  place-items: center;
}

.bonusEnlist p {
  --od-ff: var(--od-ff-title);
  font-size: 3.6rem;
  text-align: center;
  --od-c: rgb(248, 248, 248, .75);
}

.bonusEnlist.od-bgi::before {
  --od-bgi: url(/EOD/images/EODbadge-master.png);
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0.20;
}


/** /// RE-ENLIST /// */
.reenlistImg {
  grid-area: img;
}

.qualReenlist {
  grid-area: qual;
}

.sendRecruiter {
  grid-area: send;
}

.formsReenlist {
  grid-area: forms;
}

.interviewReenlist {
  grid-area: inter;
}

.packetReenlist {
  grid-area: packet;
}

.contactReenlist {
  grid-area: contact;
}

#reenlistEOD-become .contentContainer {
  display: grid;
  grid-template: "img qual"
    "send qual"
    "send contact"
    / 1fr 35rem;
  column-gap: 2rem;
  row-gap: 2rem;
  place-content: center;
}

#reenlistEOD-become .sendRecruiter .gridCon {
  grid-template: "forms forms"
    "inter packet"
    / 1fr 1fr;
  row-gap: 2rem;
}


/** /// OFFICER /// */
.officerImg {
  grid-area: img;
}

.qualOfficer {
  grid-area: qual;
}

.cadetLogos {
  grid-area: logos;
}

.cadetsOfficer {
  grid-area: cadets;
}

.timelineEODcadet {
  grid-area: timeline;
}

.branchDetail {
  grid-area: detail;
}

#officerEOD-become .contentContainer {
  display: grid;
  grid-template: "img"
    "qual"
    "logos"
    "cadets"
    "timeline"
    "detail"
    / 1fr;
  row-gap: 3rem;
}

#officerEOD-become .waiver.od-bgi::before {
  --od-bgi: url(/EOD/images/EODbadge-master.png);
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0.15;
}

#officerEOD-become .cadetsOfficer.flexCon>* {
  flex: 1;
  min-width: 25.55rem;
}


/**  ///  SCHOOL  ///  */
#schoolEOD-become h4.h4Header {
  --od-fz: var(--od-fz-ml);
}

#schoolEOD-become .introSchool-become.flexCon>* {
  flex: 1;
  min-width: 25.55rem;
  margin-block-end: 4rem;
}

#schoolEOD-become .statementIntro {
  max-width: 35rem;
  align-self: center;
}

.enTrain.pipeTraining {
  position: relative;
}

/*+ CSS for Border between Enlisted and Officer Pipelines */
@media (min-width: 841px) {
  .enTrain.pipeTraining::before {
    content: "\007C";
    position: absolute;
    display: block;
    top: 44%;
    right: -34px;
    color: var(--od-c-red);
    font-size: 11rem;
    transform: translateY(-50%);
  }

  .offTrain1 {
    margin: 0 -10px 0 20px;
  }

  .offTrain3 {
    margin: 0 20px 0 -10px;
  }

  /** end of border code */
}


.enPipe {
  grid-area: enlist;
}

.offPipe {
  grid-area: off;
}

.enTrain {
  grid-area: et;
}

.offTrain1 {
  grid-area: ot1;
}

.offTrain2 {
  grid-area: ot2;
}

.offTrain3 {
  grid-area: ot3;
}

.enOffPipe {
  grid-area: eo;
}

.phaseOne {
  grid-area: p1;
}

.phaseOneImg {
  grid-area: p1img;
}

.modA {
  grid-area: a;
}

.modB {
  grid-area: b;
}

.modC {
  grid-area: c;
}

.modD {
  grid-area: d;
}

.modE {
  grid-area: e;
}

.phaseTwo {
  grid-area: p2;
}

.enlistP2 {
  grid-area: ep2;
}

.offP2 {
  grid-area: op2;
}

.phaseTwoImg {
  grid-area: p2img;
}

.enlistP2After {
  grid-area: epa;
}

.offP2After {
  grid-area: opa;
}

.badgeP2 {
  grid-area: bdg;
}

g.offP2After2 {
  grid-area: opa2;
}

.modsTwoCon {
  grid-area: mods;
}

#schoolEOD-become .pipelinesEODschool {
  display: grid;
  grid-template: "enlist off off off"
    "et ot1 ot2 ot3"
    "eo eo eo eo"
    "p1 p1 p1img p1img"
    / 1fr 1fr 1fr 1fr;
  column-gap: 2rem;
  row-gap: 3rem;
  margin-block-end: 3rem;
}

#schoolEOD-become .modsOneCon {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: auto;
  grid-template-areas: "a a a b b b"
    "c c d d e e";
  column-gap: 2rem;
  row-gap: 3rem;
  border: unset;
  margin-block-end: 3rem;
}

#schoolEOD-become .modsTwoCon {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  grid-template-rows: auto;
  column-gap: 2rem;
  row-gap: 3rem;
  place-content: center;
  border: unset;
  margin-block-end: 3rem;
}

#schoolEOD-become .phaseTwoCon {
  display: grid;
  grid-template: "p2 p2 p2 p2img p2img p2img"
    "mods mods mods mods mods mods"
    "ep2 ep2 . . op2 op2"
    "epa epa bdg bdg opa opa"
    ". . . . opa2 opa2"
    / 1fr 1fr 1fr 1fr 1fr 1fr;
  column-gap: 2rem;
  row-gap: 3rem;
  margin-block-end: 3rem;
}

#schoolEOD-become .phaseTwoCon .badgeP2 {
  align-self: center;
}

h4[class$="Pipe"] {
  text-align: center;
}

:is([class*="Train"], [class^="mod"], [class*="P2After"]) {
  border: 2px solid rgb(255, 255, 255, 0.75);
  border-radius: 1rem;
  padding: 1rem;
}

#schoolEOD-become h4 {
  text-align: center;
}

#schoolEOD-become .pipeTraining h4 {
  text-align: left;
}

/**  /// WHEELED VEHICLE MECHANIC /// */

/**  /// Wheel Maintenance Training Department /// */

/**  /// 91B Wheeled Vehicle Mechanic /// */


#wheelImgs {
  grid-template-columns: repeat(5, 2fr);
  grid-template-rows: repeat(8, 2fr);
  grid-gap: 2px;
  display: block;
  column-gap: normal;
  position: relative;

}

img.gallery__img {
  width: 100%;
  height: 100%;
  object-fit: cover;

}

img.gallery_img:hover {
  transform: scale(1.3);
  transition: 120ms;

}

section#mechImg.sectionContainer {
  display: grid;
  justify-items: center;
  padding: 5px;
  margin: 5px;
  -webkit-column-break-inside: avoid;
  --od-c: whitesmoke;
  background: linear-gradient(90deg, #181818 0%, #2c2c2c 50%, #343434 100%);
  border: 2px solid var(--od-c-red);
  box-shadow: 2px 2px 10px 4px rgb(0, 0, 0, 0.25);
  color: var(--od-c);
  border-radius: 0;

}


section#mechImgTitle.sectionContainer {
  display: grid;
  justify-items: center;
  padding: 50px 50px;
  margin: 20px 5px 5px 5px;
  -webkit-column-break-inside: avoid;
  --od-c: whitesmoke;
  background: linear-gradient(90deg, #181818 0%, #2c2c2c 50%, #343434 100%);
  border: 2px solid var(--od-c-red);
  box-shadow: 2px 2px 10px 4px rgb(0, 0, 0, 0.25);
  color: var(--od-c);
  border-radius: 0;
}

figure.equipmentImg {

  background: linear-gradient(90deg, #181818 0%, #2c2c2c 50%, #343434 100%);
  border: 2px solid var(--od-c-red);
  box-shadow: 2px 2px 10px 2px rgb(0, 0, 0, 0.25);
  color: var(--od-c);
  border-radius: 0;
  padding: 25px;

}

#captionMrap {
  font-weight: 600;
  font-size: medium;
  color: ghostwhite;
}

#captionLand {
  font-weight: 600;
  font-size: medium;
  color: ghostwhite;

}


div#leadershipContainer {
  background: linear-gradient(90deg, #181818 0%, #2c2c2c 50%, #343434 100%);
}

.gallery_item--1 {
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 1;
  grid-row-end: 3;
  margin-block-start: 0;
}

.gallery_item--2 {
  grid-column-start: 4;
  grid-column-end: 6;
  grid-row-start: 1;
  grid-row-end: 3;

}

.gallery_item--3 {
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 4;
  grid-row-end: 6;
}

.gallery_item--4 {
  grid-column-start: 4;
  grid-column-end: 6;
  grid-row-start: 4;
  grid-row-end: 6;
}

.gallery_item--5 {
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 7;
  grid-row-end: 9;
}

.gallery_item--6 {
  grid-column-start: 4;
  grid-column-end: 6;
  grid-row-start: 7;
  grid-row-end: 9;
}

div#wheelImgs.contentContainer {
  --od-bdr: 1rem;
}

span.wheelDesc {
  font-size: x-large;
  padding: 5px;
}

a.wheelDescLink {
  padding: 1px;
}

figure.gallery_item {
  image-rendering: var(--height);
}

/**  ///  ----------  ACTIVE DUTY|NATIONAL GUARD EOD  ----------  ///  */

/**  ///  UNITS  ///  */
[id^="unitsEOD"] .oconusCon {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  grid-template-rows: auto;
  column-gap: 2rem;
  row-gap: 3rem;
  width: 100%;
}

[id^="unitsEOD"] .oconusCon .locCon {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: stretch;
}

[id^="unitsEOD"] .oconusCon .locCon img {
  margin-block: auto;
}

#unitsEOD-ng .oconusCon {
  max-width: 30rem;
  margin-inline: auto;
}

#unitsEOD-ng .oconusCon>* {
  align-items: center;
}


/**  ///  ENLISTED|OFFICER CAREER PROGRESSION  ///  */
#enProEOD-active .proCon,
#offProEOD-active .proCon {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));
  grid-template-rows: auto;
  column-gap: 3rem;
  row-gap: 3rem;
  width: 100%;
  justify-content: center;
  margin-block-end: 3rem;
  height: auto;
}

#enProEOD-active .proCon [class^="pro"],
#offProEOD-active .proCon [class^="pro"] {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  place-content: center;
  border: 2px solid whitesmoke;
  padding: 5px;
}

#enProEOD-active [class^="pro"] h3,
#offProEOD-active [class^="pro"] h3 {
  text-align: center;
}

#enProEOD-active [class^="pro"] ul,
#offProEOD-active [class^="pro"] ul {
  padding-block-end: 1rem;
}

#enProEOD-active [class^="pro"] img,
#offProEOD-active [class^="pro"] img {
  aspect-ratio: 1 / 1;
  margin-top: auto;
}



/**  ///  OFFICER CAREER PROGRESSION  ///  */


/**  ///  SPECIAL PAY  ///  */

#footerMain img.fb-icon:hover {
  filter: invert(100%) drop-shadow(3px 1px 2px #0197f6);

}

#footerMain img.x-icon:hover {
  filter: invert(100%) drop-shadow(3px 1px 2px #27fb6b);

}

#footerMain img.ig-icon:hover {
  filter: invert(100%) drop-shadow(3px 1px 1.5px #c051ff);

}

#footerMain img.link-icon:hover {
  filter: invert(100%) drop-shadow(3px 1px 2px #34e5ff);

}

#footerMain img.yt-icon:hover {
  filter: invert(100%) drop-shadow(3px 1px 2px #ff002b);

}



/*<  ///  -----  ///  MEDIA QUERIES  ///  -----  ///  */
@media (min-width: 1024px) {

  /** /// OFFICER /// */
  #officerEOD-become .waiver {
    min-height: 27.5rem;
  }

  /** end min-width 1024px */
}


@media (max-width: 900px) {

  /** /// RE-ENLIST /// */
  #reenlistEOD-become .sendRecruiter .gridCon {
    grid-template: "forms"
      "inter"
      "packet"
      /auto;
    row-gap: 2rem;
    justify-items: center;
  }

  /** end max-width 900px */
}


@media (max-width: 840px) {

  /**  ///  ABOUT  ///  */
  #missionEOD-about .contentContainer {
    display: block;
  }

  #missionEOD-about .contentContainer>* {
    max-width: 100%;
  }

  #missionEOD-about img {
    float: left;
    margin: .5rem 1rem 0 0;
  }

  /**  ///  SCHOOL  ///  */
  #schoolEOD-become .pipelinesEODschool {
    grid-template: "enlist enlist et et"
      ". off off ."
      "ot1 ot1 ot2 ot2"
      ". ot3 ot3 ."
      "eo eo eo eo"
      "p1 p1 p1 p1"
      "p1img p1img p1img p1img"
      / 1fr 1fr 1fr 1fr;
  }

  #schoolEOD-become .enPipe {
    text-align: right;
    align-self: center;
  }

  #schoolEOD-become .enTrain {
    width: fit-content;
  }

  #schoolEOD-become .phaseOne {
    display: grid;
    place-content: center;
  }

  #schoolEOD-become .modsOneCon {
    grid-template-areas: "a a a b b b"
      "c c c d d d"
      ". e e e e .";
  }

  /** end max-width 840px */
}


@media (max-width: 768px) {
  [id^="contactEOD"] .contentContainer {
    grid-template-columns: repeat(auto-fit, minmax(5rem, 1fr));
    grid-template-rows: auto;
    row-gap: 2rem;
  }

  [id^="contactEOD"] .social img {
    margin: 0 auto;
  }


  /**  ///  HOME  ///  */
  #eod-main .mainContainer {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template: "title"
      "video"
      "intro"
      "contact"
      "resource";
  }

  /**  ///  ABOUT  ///  */
  #eod-about .mainContainer {
    grid-template: "title"
      "menu"
      "gallery"
      "mission"
      "badge"
      "struc"
      "contact"
      "partners"
      / 1fr;
  }

  /**  ///  STRUCTURE  ///  */
  #structureEOD-about .contentContainer {
    grid-template: "tm"
      "plt"
      "co"
      "bn"
      "grp"
      "grp"
      / 1fr;
  }

  #structureEOD-about .contentContainer ul {
    columns: 2;
    max-width: 100%;
  }

  .cols2

  /** /// RE-ENLIST /// */
  #reenlistEOD-become .contentContainer {
    display: grid;
    grid-template: "img"
      "qual"
      "send"
      "contact"
      / 1fr;
    column-gap: 2rem;
    row-gap: 2rem;
    place-items: center;
  }

  #reenlistEOD-become .sendRecruiter .gridCon {
    grid-template: "forms forms"
      "inter packet"
      / 1fr 1fr;
    row-gap: 2rem;
  }

  /**  ///  SCHOOL  ///  */
  #schoolEOD-become .phaseTwoCon {
    grid-template: "p2 p2 p2 p2img p2img p2img"
      "mods mods mods mods mods mods"
      "ep2 ep2 ep2 op2 op2 op2"
      "epa epa epa opa opa opa"
      ". . . opa2 opa2 opa2"
  }

  #schoolEOD-become .badgeP2 {
    display: none;
  }


  /** end max-width 768px */
}


@media (max-width: 700px) {

  /**  ///  BADGE  ///  */
  #badgeEOD-about .symbolism {
    grid-template: "crab crab"
      "shield bolts"
      "wreath bomb"
      / 1fr 1fr;
  }

  #badgeEOD-about .symbolism img {
    margin-inline: auto;
  }

  #badgeEOD-about .progression>* {
    flex-direction: column;
    align-items: center;
  }

  /**  ///  OFFICER  ///  */
  #officerEOD-become .qualOfficer .flexCon.od-bgi::before {
    --od-bgi: url(/EOD/images/EODbadge-master.png);
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.15;
  }

  #officerEOD-become .waiver.od-bgi::before {
    --od-bgi: unset;
  }

  /** end of max-width 700px */
}


@media (max-width: 680px) {

  /**  ///  ABOUT  ///  */
  #missionEOD-about .contentContainer {
    display: flex;
    flex-direction: column;
  }

  #missionEOD-about img {
    margin: 0 1rem 2rem 1rem;
  }

  /**  ///  BECOME EOD  ///  */
  .bonusEnlist {
    display: grid;
  }

  .enlistImg {
    height: fit-content;
  }

  #enlistEOD-become .contentContainer {
    grid-template: "img img"
      "qual qual"
      "badge recruit"
      / 1fr 1fr;
  }

  /** /// RE-ENLIST /// */
  #reenlistEOD-become .contentContainer {
    grid-template: "img"
      "send"
      "qual"
      "contact"
      / 1fr;
  }

  #reenlistEOD-become .sendRecruiter .gridCon {
    grid-template: "forms forms"
      "inter packet"
      /auto;
    row-gap: 2rem;
  }

  .formsReenlist.flexCon {
    flex-direction: column;
  }

  /** end max-width 680px */
}


@media (max-width: 640px) {

  /**  ///  BADGE  ///  */
  #badgeEOD-about .symbolism {
    grid-template: "crab"
      "shield"
      "bolts"
      "wreath"
      "bomb"
      / 1fr;
  }

  /**  ///  STRUCTURE  ///  */
  #structureEOD-about .contentContainer ul {
    columns: 1;
    max-width: 60ch;
  }


  /**  ///  SCHOOL  ///  */
  #schoolEOD-become .pipelinesEODschool {
    grid-template: "enlist"
      "et"
      "off"
      "ot1"
      "ot2"
      "ot3"
      "eo"
      "p1"
      "p1img"
      / 1fr;
  }

  #schoolEOD-become .enPipe {
    text-align: center;
  }

  #schoolEOD-become [class*="Train"] {
    justify-self: center;
    width: 31rem;
  }

  #schoolEOD-become .modsOneCon {
    grid-template-columns: minmax(auto, 40rem);
    grid-template-rows: auto;
    grid-template-areas: "a"
      "b"
      "c"
      "d"
      "e";
    justify-content: center;
  }

  #schoolEOD-become .phaseTwoCon {
    grid-template: "p2"
      "p2img"
      "mods"
      "ep2"
      "epa"
      "op2"
      "opa"
      "opa2"
      / 1fr;
  }

  :is(.enlistP2After, .offP2After2) {
    width: 20rem;
    justify-self: center;
  }


  /** end max-width 640px*/
}


@media (max-width: 550px) {

  /**  ///  BECOME EOD  ///  */
  #enlistEOD-become .contentContainer {
    grid-template: "img"
      "qual"
      "recruit"
      "badge"
      / 1fr;
  }

  /**  REENLIST  */
  #reenlistEOD-become .sendRecruiter .gridCon {
    grid-template: "forms"
      "inter"
      "packet"
      /auto;
    row-gap: 2rem;
  }



  /** end max-width 550px*/
}




/*^ ---------------------  SITE MAP  --------------------- */
/*^  ---------------------------------------------------- */
#siteMap h2.darkBar {
  text-transform: uppercase;
}

#siteMap .contentContainer {
  width: fit-content;
}

#siteMap :is(.headingList, [role="list"]) {
  display: flex;
  flex-direction: column;
}

#siteMap .headingList h2:not(:first-child) {
  margin-top: 2rem;
}

#siteMap .headingList>*:not(h2) {
  --od-fz: var(--od-fz-ms);
}



/*^ ---------------------  WEB POLICIES  --------------------- */
/*^  ------------------------------------------------------------ */

#priSec {
  grid-area: priSec;
}

#links {
  grid-area: link;
}

#cookies {
  grid-area: cookie;
}

#sec508 {
  grid-area: access;
}

#opsec {
  grid-area: opsec;
}

#webPol {
  display: grid;
  grid-template: "priSec priSec"
    "access cookie"
    "link opsec"
    / 1fr 1fr;
  column-gap: 2rem;
}

#opsec .contentContainer {
  display: flex;
  flex-direction: column;
  align-items: center;
}



/*<  ///  -----  ///  MEDIA QUERIES  ///  -----  ///  */

@media (max-width: 839px) {

  #webPol {
    grid-template: "priSec"
      "access"
      "cookie"
      "link"
      "opsec"
      / auto;
    place-content: center;
  }

  #webPol .cols2 {
    columns: 1;
  }

  #webPol ul.cols2 {
    max-width: 60ch;
  }

}





/* end of od-styles.css */