/* -~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~ */
/* -~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~ */

    /* background-color: #FBFCF8;  --> Pearl (off-white) */
    /* background-color: #FEF9F3;  --> Alabaster (light-tan) */
    /* background-color: #F8EEEC;  --> Salt (slightly-darker,light-tan) */
    /* background-color: #F8F2ED;  --> Lace (similar to above) */
    /* background-color: #FCFBFC;  --> Frost (light-blue) */
    :root {
      --lghtBrdr: rgb(241, 227, 164); /* rgb(241,227,164)  --> Light Tan */
      --darkBrdr: #E7CD78;            /* #E7CD78;  --> Mid Gold */
  
      --bttnTextClr: rgb(16,48,62);   /* DarkBlue matching Inner Header & Knowledge Web/Tree Background */
      --bttnBkGrnd: #FCFBFC;          /* #FCFBFC  --> Frost (light-blue) */
      /*--bttnBkGrnd: antiquewhite;*/     /* Self */
      --ScrlBttnBkGrnd: antiquewhite;     /* Self */
      --bttnTriangleClr: #404040;     /* #404040;  --> Dark Grey */
      --hoverClr: #DAA520;            /* #DAA520;  --> Deep/Dark Gold */
  
      /*--ftPanesBkGrnd: mintcream;*/     /* #FCFBFC  --> Frost (light-blue) */
      --ftPanesBkGrnd: antiquewhite;        
      --usrPanesBkGrnd: #FCFBFC;          /* #FCFBFC  --> Frost (light-blue) */
      /*--usrPanesBkGrnd: mintcream;*/    /*  */
      --hScrlPanesBkGrnd: #FCFBFC;        /* #FCFBFC  --> Frost (light-blue) */
  
      --accent1: rgb(14,64,66);           /* Main Outer Background - Slightly lighter/greener than Nav Backgrounds */
      --accent2: rgb(50,103,101);         /* Scrollbar BackGround - Lighter  than main background */
      --accent3: rgb(16,48,62); }         /* Dark Blue in Pop-Out Pane Buttons, KW queryNav, and featureNav (presentation Mode button area) */
  
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "poppins", sans-serif; }
body {
  background-color: var(--accent1); }
.container {
  overflow-x: hidden; 
  overflow-y: hidden;
  width: 100%; }
/* -~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~ */
/* NAVIGATION BAR ~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~ */

.siteNav{
  width: 98%;
  height: 11.2vh;
  padding: 0vh .2vw;
  margin: 1vh 1vw;
  border: .4vh solid var(--darkBrdr);
  border-radius: .8vh;
  background: linear-gradient(0.25turn, #10303e, #4b8b7b, #10303e);
  display: flex; }
  .spLogo_whiteBGwLetters {
    margin-right: 1vw; }
  .spColumn {}
    .SPnameDiv {
      height: 3.8vh;
      width: 100% }
    .spNavPane {
      display: flex;
      width: 100%; }
      .spNavCol_left {
        width: auto;
        text-align: end; }
      .spNavCol_right {
        margin-left: 1vw; }


/* -~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~ */
/* FEATURE SECTION - Also contains contact footer at this pitch stage ~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~ */

.mainArea {
  width: 98%;
  margin: 1vh 1vw;
  border: .4vh solid var(--darkBrdr);
  border-radius: 1vh;
  display: flex;
  flex-direction: column; }
  .featuredNav {
    width: 100%;
    height: 4vh;
    background: var(--accent3);
    border-bottom: .4vh solid var(--darkBrdr);
    align-items: center;
    display: flex; }
    .drpDwnPane {
      position: relative;
      margin: 0 1vw; }
  .featuredContent {
    width: 100%;
    height: 81vh;
    background: linear-gradient(0.5turn, #10303e, #4b8b7b, #10303e);
    overflow-x: hidden;
    overflow-y: scroll; }
    /* ============================================ */
    .logoPane {
      display: flex;
      justify-content: center;
      height: auto;
      width: auto;
      margin: 2% auto; }
      .logoImg {
        position: relative;
        background-size: cover;
        background-repeat: no-repeat;
        left: -2.4vh;
        height: 35vh;
        width: 40vh; }
    /* ============================================ */
    .postMain {
      width: 98%;
      margin: 5vh 1vw;
      border: .4vh solid var(--darkBrdr);
      border-radius: 1vh; }
      /* ============================================ */
      .postTop {
        justify-content: center;
        background-color: var(--ftPanesBkGrnd);
        width: 96%;
        margin: 2% 2%;
        height: auto;
        border: .4vh solid var(--darkBrdr);
        border-radius: 1vh; }
        .contentLinkPane {
          border: .4vh solid black;
          border-radius: .8vh;
          background-color: black; }
          .contentBanner {
            width: 100%;
            height:12vh;
            background-size: cover;
            background-repeat: no-repeat;
            background-position: center;
            border-bottom: .3vh solid black; }
          .contentVid {
            width: 100%;
            height: 25vh;
            background-size: cover;
            background-repeat: no-repeat; }


      .postDivider {
        width: 98%;
        margin: .4vh 1vw;
        border: .4vh solid var(--darkBrdr);
        border-radius: 1vh; }
      .postBottom {
        text-align:center;
        padding: 2%;
        background-color: var(--ftPanesBkGrnd);
        width: 98%;
        height: auto;
        margin: 0vh 1vw 1vh 1vw;
        border: .4vh solid var(--darkBrdr);
        border-radius: 1vh; }
    /* ============================================ */
    .contactFooter { /* Inside of the scrolling featured pane*/

    }


/* !-~-!-~-!-~-!-~-!-~-!-~-!-~-!-~-!-~-!-~-!-~-!-~-!-~-!-~-!-~-! */
/* @@ GOTO-SECTION  --->  ALTERNATE PANE STYLES = {.userNavPane_Collpased && .userNavPane_FULL}  ---------->>  FROM LINE {[~???]} */
/* !-~-!-~-!-~-!-~-!-~-!-~-!-~-!-~-!-~-!-~-!-~-!-~-!-~-!-~-!-~-! */


/* -~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~- */
/* -~-~-~-~-~-~-~-~-~-(UX CUSTOMIZATION)~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-(UX CUSTOMIZATION)~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-(UX CUSTOMIZATION)~-~-~-~-~-~-~-~-~-~- */
/* -~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~- */
/*    CORE UX CUSTOMIZATION SECTION     -->     ALL SCROLL-BAR, DROPDOWN, AND BUTTON SETTINGS  */
/* -~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~- */
::-webkit-scrollbar {
  width: 2.4vh;
  height: 2.4vh;}
  ::-webkit-scrollbar-track {
      background: var(--accent2);
      border-radius: .7vh;}
  ::-webkit-scrollbar-thumb {
      background: var(--lghtBrdr);
      border-radius: .7vh;}
      ::-webkit-scrollbar-thumb:hover {
          background: var(--hoverClr); }
/* Buttons */
::-webkit-scrollbar-button {
  border-style: solid;
  height: 2.1vh;
  width: 2.1vh;}
  /* Up */
  ::-webkit-scrollbar-button:vertical:decrement {
      border-width: 0 1.1vh 2.2vh 1.1vh;
      border-color: var(--ScrlBttnBkGrnd) var(--ScrlBttnBkGrnd) var(--bttnTriangleClr) var(--ScrlBttnBkGrnd); }
      ::-webkit-scrollbar-button:vertical:decrement:hover {
          border-color: transparent transparent var(--hoverClr);
          animation: zoom-in-zoom-out .6s ease infinite; }
  /* Down */
  ::-webkit-scrollbar-button:vertical:increment {
    border-width: 2.2vh 1.1vh 0 1.1vh;
    border-color: var(--bttnTriangleClr) var(--ScrlBttnBkGrnd) var(--ScrlBttnBkGrnd) var(--ScrlBttnBkGrnd); }
        ::-webkit-scrollbar-button:vertical:increment:hover {
            border-color: var(--hoverClr) transparent transparent transparent;
            animation: zoom-in-zoom-out .6s ease infinite; }
  /* Left */
  ::-webkit-scrollbar-button:horizontal:decrement {
    border-width: 1.1vh 2.2vh 1.1vh 0;
    scroll-margin: 100px;
    border-color: var(--ScrlBttnBkGrnd) var(--bttnTriangleClr) var(--ScrlBttnBkGrnd) var(--ScrlBttnBkGrnd); }
        ::-webkit-scrollbar-button:horizontal:decrement:hover {
            border-color: transparent var(--hoverClr) transparent transparent;
            animation: zoom-in-zoom-out .6s ease infinite; }
    /* Right */
  ::-webkit-scrollbar-button:horizontal:increment {
    border-width: 1.1vh 0 1.1vh 2.2vh;
    border-color: var(--ScrlBttnBkGrnd) var(--ScrlBttnBkGrnd) var(--ScrlBttnBkGrnd) var(--bttnTriangleClr); }
        ::-webkit-scrollbar-button:horizontal:increment:hover {
            border-color: transparent transparent transparent var(--hoverClr);
            animation: zoom-in-zoom-out .6s ease infinite; }

/*  ALL DROP-DOWN MENU AND BUTTON SETTINGS  */
/* -~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~- */
.DrpdwnDiv {
  background-color: var(--bttnBkGrnd);
  pointer-events: inherit;
  text-align: center;
  z-index: 699;
  display: block;
  border-radius: .6vh;
  border: .3vh solid var(--darkBrdr); }
  .KWDrpdwnLnk {
    padding: 0 .6vw;
    border-radius: .4vh;
    border: none;
    font-family: Helvetica;
    color: var(--bttnTextClr);
    font-size: 1.4vh;
    font-weight: bold;
    cursor: pointer; }
    /* This code chunk determines color of selected menu */
    /*.dropdown > .link:focus,*/ /*-->  This version is for non-JS implementations & testing situations  */
    .DrpdwnDiv.active > .KWDrpdwnLnk,
    .KWDrpdwnLnk:hover {
      color: var(--hoverClr); }
    .DrpdwnDiv.active > .link,
    .link:hover {
      color: var(--hoverClr); }

    .dropdown {
      position: relative;
      margin: 0;
      padding: 0;
      gap: 0; }
      .dropDownLink {
          background: none;
          border: none;
          text-decoration: none;
          color: mintcream;
          font-family: Helvetica;
          font-size: 1.8vh;
          font-weight: bold;
          cursor: pointer;
          margin: 0;
          padding: 0; }
          /* This code chunk determines color of selected menu */
          /*.dropdown > .link:focus,*/ /*-->  This version is for non-JS implementations & testing situations  */
          .dropdown.active > .dropDownLink,
          .dropDownLink:hover {
              color: var(--hoverClr); }

      /* Set DropDown properties --> Animation Set 1of2 --> This is the active state, when the drop-Down is visible. */
      .dropdown-menu {
          position: absolute;
          z-index: 999;
          left: 0;
          top: calc(100% + .1vh);
          background-color: white;
          padding: 1.2vh 1vw;
          border-radius: 1.4vh;
          box-shadow: 0 1vh 1vw 0 rgba(0,0,0,.1);
          opacity: 0;
          pointer-events: none;
          transform: translateY(-8vh);
          transition: opacity 150ms ease-in-out, transform 150ms ease-in-out; }
          .information-grid {
              display: grid;
              grid-template-columns: repeat(2, max-content);
              gap: 1.8vh; }
              .dropdown-heading {
                  font-size: 2vh;
                  font-family: Helvetica;
                  gap: .8vh;
                  text-decoration: underline;
                  text-decoration-color: var(--darkBrdr);
                  text-decoration-thickness: .2vh; }
              .dropdown-links {
                  display: flex;
                  flex-direction: column;
                  font-size: 1.8vh;
                  gap: .1vh; }
                  .link {
                      background: none;
                      border: none;
                      text-decoration: none;
                      color: #777;
                      font-family: inherit;
                      font-size: inherit;
                      cursor: pointer;
                      padding: 0; }
              /* This code chunk determines color of selected menu */
              /*.dropdown > .link:focus,*/ /*-->  This version is for non-JS implementations & testing situations  */
              .dropdown.active > .link,
              .link:hover {
                  color: var(--hoverClr); }

    /* This drives the animation from it's prior state... which should be set to invisible, with no pointer-events. */
    /*.dropdown > .link:focus + .dropdown-menu {*/ /*-->  This version is for non-JS implementations & testing situations */
    .dropdown.active > .dropDownLink + .dropdown-menu {
      opacity: 1;
      transform: translateY(0);
      pointer-events: auto; }
      .dropdown.active > .link + .dropdown-menu {
          opacity: 1;
          transform: translateY(0);
          pointer-events: auto; }
    .DrpdwnDiv.active > .KWDrpdwnLnk + .dropdown-menu {
      opacity: 1;
      transform: translateY(0);
      pointer-events: auto; }
      .DrpdwnDiv.active > .link + .dropdown-menu {
          opacity: 1;
          transform: translateY(0);
          pointer-events: auto; }

/* -~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~- */
/* -~-~-~-~-~-~-~-~-(CORE TEXT DEFINITIONS)-~-~-~-~-~-~-~-~-~-~-~-~-~-~(CORE TEXT DEFINITIONS)-~-~-~-~-~-~-~-~-~-~-~-~-~-~-(CORE TEXT DEFINITIONS)~-~-~-~-~-~-~-~-~- */
/* -~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~- */
h1 {
  font-size: 3.2vh;
  color: mintcream;
  text-decoration: underline;
  text-decoration-color: #E7CD78;
  position: relative;
  font-family: Helvetica; }
h2 {
  font-size: 1.8vh;
  color: mintcream;
  text-decoration: underline;
  text-decoration-color: #E7CD78;
  position: relative;
  font-family: Helvetica; }

.postHeader {
  margin-top: 1vh;
  font-size: 2.4vh;
  text-align: center;
  color: mintcream;
  font-weight: bold;
  font-family: Helvetica; }

/* -~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~- */
/* -~-~-~-~-~-~-~-~-( RESPONSIVE LAYOUT )-~-~-~-~-~-~-~-~-~-~-~-~-~-~( RESPONSIVE LAYOUT )-~-~-~-~-~-~-~-~-~-~-~-~-~-~-( RESPONSIVE LAYOUT )~-~-~-~-~-~-~-~-~- */
/* -~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~- */
@media only screen and (min-width: 400px) {
  .contentBanner {
    height: 10vh; }
  .contentVid {
    height: 22vh; }
}

@media only screen and (min-width: 460px) {
  h1 {
    font-size: 3.2vh; }
  h2 {
    font-size: 1.8vh; }
  .KWDrpdwnLnk {
    font-size: 1.8vh; }
  .contentBanner {
    height: 12vh; }
  .contentVid {
    height: 35vh; }
}

@media only screen and (min-width: 600px) {
  h1 {
    font-size: 3.2vh; }
  h2 {
    font-size: 1.8vh; }
  .KWDrpdwnLnk {
    font-size: 1.8vh; }
  .contentBanner {
    height: 16vh; }
  .contentVid {
    height: 33vh; }
}

@media only screen and (min-width: 760px) {
  h1 {
    font-size: 3.2vh; }
  h2 {
    font-size: 1.8vh; }
  .KWDrpdwnLnk {
    font-size: 1.8vh; }
  .contentBanner {
    height: 18vh; }
  .contentVid {
    height: 40vh; }
}

@media only screen and (min-width: 1000px) {
  h1 {
    font-size: 3.2vh; }
  h2 {
    font-size: 1.8vh; }
  .KWDrpdwnLnk {
    font-size: 1.8vh; }
  .contentBanner {
    height: 15vh; }
  .contentVid {
    height: 35vh; }
  .logoImg {
    left: -5vh;
    height: 70vh;
    width: 80vh; }
  .postTop {
    width: 42%;
    margin: 2% 29%; }
  .postHeader {
    margin-top: 3vh;
    font-size: 3vh; }
}

@media only screen and (min-width: 1200px) {
  h1 {
    font-size: 3.2vh; }
  h2 {
    font-size: 1.8vh; }
  .KWDrpdwnLnk {
    font-size: 1.8vh; }
  .contentBanner {
    height: 15vh; }
  .contentVid {
    height: 35vh; }
  .logoImg {
    left: -5vh;
    height: 70vh;
    width: 80vh; }
  .postTop {
    width: 42%;
    margin: 2% 29%; }
  .postHeader {
    margin-top: 3vh;
    font-size: 3vh; }
}

@media only screen and (min-width: 1400px) {
  h1 {
    font-size: 3.2vh; }
  h2 {
    font-size: 1.8vh; }
  .KWDrpdwnLnk {
    font-size: 1.8vh; }
  .contentBanner {
    height: 20vh; }
  .contentVid {
    height: 45vh; }
  .logoImg {
    left: -5vh;
    height: 70vh;
    width: 80vh; }
  .postTop {
    width: 42%;
    margin: .5% 29%; }
  .postHeader {
    margin-top: 1.5vh;
    font-size: 3vh; }
}