@charset "utf-8";
:root {
    --hpwgreen:rgba(104,117,78,1.00);
    --hpwtan:rgba(205,186,156,1.00);
    --hpwtanlite:rgba(225,213,195,1.00);
    --pending:rgba(255,0,0,1.00);
    --hpwgreenlite:rgba(191,196,178,1.00);
    --hpwnavybluedark:#002a3e;
    --hpwnavyblue:#0076a9;
    --hpwnayyellow:#e8b00f;
    --hpwnavywhite:#fff3f9;
    --hpwnavygray:#fff3f9;
}
.pending {color:var(--pending);}

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;600;800&display=swap');

/* WW NAV STYLES */
#hpw-full-dropin {background-color: rgba(249, 247, 244, 1.0); font-weight: 400; font-size: 16px; color: rgba(33,37,41,1.00);} 
@media (min-width: 768px){
    #hpw-full-dropin{font-size: 1.125rem;}
}
#hpw-full-dropin a {color:var(--hpwgreen); font-weight: 800; word-break: break-word;}
/* #hpw-full-dropin a:visited {color: rgba(104,117,78,.80);}*/
:focus:not(:focus-visible) {outline: 0;}
nav.hpw-menu-style {font-size: 16px; line-height: 1; max-width: 100%; background-color: rgba(219,211,199,1.00);}
#navbar-Supported-Content a {display: block;}	
#navbar-Supported-Content a.social {display: inline-block; padding: 0; margin:0 0 1rem .78125rem;}
.social {}

.opensans, div h1, div h2, div h3, div h4, div h5, div h6 {font-family: 'open sans';}
.extrabold {font-weight: 800;}
.thick {font-weight: 600;}
.menutrigger, .wellnessmenu {cursor: pointer; }
button.menutrigger {border: 0; background: transparent;}
[aria-current] {font-weight: 800 !important; color: rgba(89,89,89,1.00)!important; background-color:rgba(205, 186, 156, .25)!important;}

#navbar-Supported-Content	ul {list-style-type: none; padding: 0; padding-inline-start: 0;}		
#navbar-Supported-Content a {padding: calc(75px/6); text-decoration: none; font-size: 1.25rem; color: var(--hpwgreen); font-weight: 600;}
.list-group-item {background-color: transparent;}

.resources > h6, .resources > p  {margin-left: 1rem;}
h5.nested-subhead {padding: 1rem 0; border-top: .25rem solid var(--hpwgreen); border-bottom: .25rem solid var(--hpwgreen); font-weight: 600; text-align: center; margin: 2rem 0;color: var(--hpwgreen); text-transform: uppercase;}


/* WW MENU BURGER */		
  .menuburger {padding: 10px 10px; display: inline-block; cursor: pointer; transition-property: opacity, filter; transition-duration: 0.15s; transition-timing-function: linear; color: inherit; text-transform: none; background-color: transparent; border: 0; margin: 0; overflow: visible; }
  .menuburger-box {width: 30px; height: 16px; display: inline-block; position: relative; }
  .menuburger-inner {display: block; top: 50%; margin-top: -2px; }
  .menuburger-inner, .menuburger-inner::before, .menuburger-inner::after {width: 30px; height: 4px; background-color: var(--hpwgreen); border-radius: 0px; position: absolute; transition-property: transform; transition-duration: 0.15s; transition-timing-function: ease; }
  .menuburger-inner::before, .menuburger-inner::after {content: ""; display: block; }
  .menuburger-inner::before {top: -10px; }
  .menuburger-inner::after {bottom: -10px; }

/* BURGER SPIN */
  .menuburger--spin .menuburger-inner {transition-duration: 0.22s; transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
  .menuburger--spin .menuburger-inner::before {transition: top 0.1s 0.25s ease-in, opacity 0.1s ease-in; }
  .menuburger--spin .menuburger-inner::after {transition: bottom 0.1s 0.25s ease-in, transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19); }
  .menuburger--spin.is-active .menuburger-inner {transform: rotate(225deg); transition-delay: 0.12s; transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
  .menuburger--spin.is-active .menuburger-inner::before {top: 0;opacity: 0; transition: top 0.1s ease-out, opacity 0.1s 0.12s ease-out; }
  .menuburger--spin.is-active .menuburger-inner::after {bottom: 0; transform: rotate(-90deg); transition: bottom 0.1s ease-out, transform 0.22s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1); }

  @media (min-width: 768px){
    a:hover {text-decoration: underline; color:rgba(70,79,52,1.00);}
    #navbar-Supported-Content {width: 30rem; position: absolute; z-index: 2; background-color: rgba(219,211,199,1.00);}	
    .menu-bar{font-size: 1.7rem;}
    #navbar-Supported-Content a:hover {background-color:var(--hpwtan); border-left: .25rem solid var(--hpwgreen); }      
    #navbar-Supported-Content a.social:hover {color: #ff0000; border: 0; background-color: transparent; filter: invert(42%) sepia(42%) saturate(304%) hue-rotate(38deg) brightness(92%) contrast(86%); } 
    .social:hover {color: #ff0000;}
    }

  @media (max-width: 767px){
    #navbar-Supported-Content {width: 100vw;}
    }

/***** WW SPLASH BOXES ****/
  .splash-container {border-top: .875rem solid var(--hpwgreen); border-bottom: .875em solid var(--hpwgreen); background-color: var(--hpwgreen);}
  #splash-container > div > div:nth-child(even) {background-color: rgb(225, 213, 195);}
  .splash-container.active--main {border-top: .875rem solid var(--hpwgreen); border-bottom: .875em solid var(--hpwgreen); }
  .splashbox-a {will-change: transform, filter; filter: sepia(1.0) brightness(92%) hue-rotate(38deg) contrast(85%); transition: filter .5s .0s;}
  .splashbox-b {will-change: transform, filter; filter: hue-rotate(-2deg) saturate(184%) brightness(90%) grayscale(100%) sepia(42%) contrast(83%);  transition: filter .5s .0s;}
  .splashbox-b:hover, .splashbox-a:hover {transition: filter .5s .0s; filter: none;}
  /*.testclose {will-change: transform; animation-name: test; animation-duration: .5s; animation-fill-mode:forwards;}*/
  .closed, .closedcol {display: none;}
  .col-sm-2, .splash__block {overflow:hidden;}
  .cat-head{font-size: 1.75rem; font-family: 'open sans'; font-weight: 800; color: #ffffff;line-height: 1;position: absolute; text-transform: uppercase;}
  .cat-subhead {padding: .25rem 0 .25em 0.5rem;}
@media (min-width: 768px){
    .cat-head{font-size: 2.5rem;}
}
  .cat-head p {position: relative; margin: 0 0 0 1rem;}
  .cat-head p:nth-child(2) a {font-size: 1.25rem; font-weight: 300; text-transform: lowercase; margin-left: 1rem;}
  .cat-body {position: relative; padding-bottom: 1rem; /*top: -1.25rem;*/}
  .cat-body a{font-weight:800; color:var(--hpwgreen); display: block;}
  .cat-body a:hover { text-decoration: underline;}
  .cat-body p{width: 90%;}
  .cat-box{display: inline-block; position: relative; overflow-x:hidden; padding: 0;}  
  .close-btn{position: absolute; top: .75rem; right: 1.25rem; transform: scale(2.0); font-weight: 800; color: rgba(255,255,255,1.00); text-shadow: -1px 1px 3px rgba(0,0,0,.5); z-index:1;}
  .splashbox-a, .splashbox-b {}
  #splash-container picture img {transition: .5s; will-change: transform; transition-delay: .2s;}

  .splashbox-a + span, .splashbox-b + span {will-change: transform; position: absolute; left: .5rem; display: block;  width: calc(100% - 1.5rem); font-size: 1.25rem; color: rgba(255,255,255,1.0); text-transform: uppercase; transform: translateY(-10rem);text-shadow: 2px 2px 5px rgba(0,0,0,.75); transition: .5s; transition-delay: .2s; }
@media (min-width: 1440px){
    .splashbox-a + span, .splashbox-b + span {font-size:1.65rem;}    
}
  .active--block {position: absolute; z-index:1; animation-name:slowopen;will-change:transform; animation-duration: .75s; animation-fill-mode: both; left:0;}  
  .active--block, .closed {animation-name:open-close-mobile; will-change:transform; animation-duration: .75s; animation-fill-mode: both;}
  .splash__block.tempclosed{animation-name:slowclose;will-change:transform; animation-duration: .75s; animation-fill-mode: both;} 

  @keyframes slowopen{
      0% {opacity: 0;}
      100% {opacity: 1.0}
    }	  

  @keyframes slowclose{
      0% {opacity: 1.0;}
      100% {opacity: 0}
    }

  @keyframes open-close-mobile {
      0% {transform: translateY(-100%);}
      100% {transform: translateY(0%);}
  }
  @keyframes open-closeRL {
      0% {transform: translateX(100%);}
      100% {transform: translateX(0%);}
  }
  @keyframes open-closeLR {
      0% {transform: translateX(-100%);}
      100% {transform: translateX(0%);}
  }	  
  @keyframes close-open {
        0% {transform: scaleY(0) translateX(100%);}
        100% {transform: scaleY(1) translateX(0%);}
  }

  @keyframes test {
      0% {transform: translateX(0%) scaleX(1); opacity: 1;}
      99% {transform: translateX(-100%) scaleX(0);}
      100% {opacity: 0;}
  }
  @keyframes testmobile {
      0% {transform: translateY(0%) scaleY(1); opacity: 1;}
      99% {transform: translateY(-100%) scaleY(0);}
      100% {opacity: 0;}
  }	  

  @media (max-width: 991px){ /* 767px */
      .splash-container {border-top: .4375em solid var(--hpwgreen); border-bottom: .4375em solid var(--hpwgreen);background-color: #E1D5C3;}
      .splashbox-a, .splashbox-b {filter: none;}
      div.splash-container > div > div> div > span {font-size: 1.5rem; height: 5rem; transform: translateY(-5.5rem); padding-top: .75rem; background-color: rgba(0,0,0,0.40); line-height: 1em; color: rgba(255,255,255,1);width: calc(100% - 1rem);}
      div.splash-container > div > div> div > span::after{content:"\A for more click here"; white-space: pre; font-size: .7rem; font-weight: 300; text-transform: none; line-height: 0; position: relative; top: -.75rem;}
      .splashbox-a + span{text-align: right; padding-right: calc(100vw / 15);}
      .splashbox-b + span{text-align: left; padding-left: calc(100vw / 15);}  
      div.splash-container picture img, .m-border {border: .5rem solid var(--hpwgreen);}
      .testclose {will-change: transform; animation-name: testmobile; animation-duration: .5s; animation-fill-mode:forwards;}
      .closedcol {display: inline;}
    }
  @media (min-width: 992px){
      .splashbox-a + span, .splashbox-b + span {text-align:center;}
    }
  @media (min-width: 768px){
      .cat-box *:not(:first-child) {z-index:1;}
      div.cat-head{/* position: absolute; top:0; left: 0;font-size: 8rem; */ font-family: 'open sans'; font-weight: 800; overflow: hidden;line-height: 1; bottom:0;}
      .cat-head p:nth-child(1) {font-size: 2.5rem;}
      .cat-head p:nth-child(2) a {font-size: 1rem; color: rgba(255,255,255,1.00) !important; font-weight: 300; text-transform: lowercase; position:relative; top: -1rem; left: 1rem; }
      .cat-body {position:relative; background-color:var(--hpwtanlite); top: .5rem; left: 1rem;}
      .cat-body p{position: relative; left:1rem; width: calc(90% - 2rem); margin-right: 1rem;}
      .bg-text{position: relative; background-color:var(--hpwgreen); top: 0; color: rgba(205, 186, 156, .15); width: 100%; font-size: 8rem; height: 9.0rem;}
      #hidden-activity.active--block, #hidden-sexhealth.active--block, #hidden-sleep.active--block {animation-name:open-closeRL;}
      #hidden-nutrition.active--block, #hidden-tobacco.active--block, #hidden-chronic.active--block {animation-name:open-closeLR;}
      .active--block {will-change:transform; animation-duration: .75s; animation-fill-mode: both;}
      #splash-container picture img:hover  {transform: scale(1.15);transition-delay: 0ms;}
      .splashbox-a:hover + span, .splashbox-b:hover + span {will-change: translateY; transform: /* scale(1.1)*/ translateY(-11.5rem); transition-delay: 0ms; transition: .5s;}
    }
  @media (max-width: 767px){
      .cat-head {color:rgba(81,81,81,1.00); position:relative;}
      .cat-head p:nth-child(1) {margin-bottom: 0rem;}
      .cat-head p:nth-child(2) {margin-bottom: .5rem; /*top: -1.25rem;*/}
      .cat-head p a {color:var(--hpwgreen);}
      .cat-head p a:hover {text-decoration: underline;}
      .cat-body p {position: relative; left: 1rem;}
    }

/***** CATEGORY PAGES *****/
.sec-cats p {margin-top: .5rem; padding: 0 .5rem;}
.sec-cats div div {}
.sec-cats div {padding: 0;}
.sec-cats img, .pri-cats img {border: .5rem solid var(--hpwtan);}
 
/* img {object-fit: cover;} */
.cat-descrip {font-size: 1.15rem;}
.pri-cats a, .sec-cats a {display: block;}

@media (min-width: 1025px){
    .pri-cats {margin-bottom: 1rem;}
    .pri-cats > div {border: .5rem solid var(--hpwtan);}
    .pri-cats p {padding: 1.25rem;}
    .sec-cats img {border: .5rem solid var(--hpwtan);}
    .pri-cats img {border: 0;}
    div.sec-cats > div:nth-child(1){margin: 0 .5rem 0 0;}
    div.sec-cats > div:nth-child(2){margin: 0 .5rem 0 .5rem;}
    div.sec-cats > div:nth-child(3){margin: 0 0 0 .5rem;}			  
}

@media (min-width: 1440px){

}


/***** BLUE-H *****/

  #blue-h.borders {border-top: 45px solid var(--hpwgreen); border-bottom: 45px solid var(--hpwtan); background-color: rgba(255,255,255, 1); max-width: 1350px;}
  #health-challenge-header {background-color: #EAE3D7; text-align:center; color: var(--hpwgreen);}
  #health-challenge-footer p{color: var(--hpwgreen); font-size: 1.9rem;}
  #blue-h div img {transform: scale(.8); margin: 0 auto; text-align:center;}
  .greentype {color: var(--hpwgreen);}
  #blue-h div div:nth-child(2) p {font-size: 1.5rem;}
  .sideborders {border-left: 1px solid rgba(0,0,0,.15); border-right: 1px solid rgba(0,0,0,.15);}

  p.health-b {transition: .5s; will-change: transform; font-size: 3rem;}
  .lh-0 {line-height:0;}
  .lh-1 {line-height:1;}
  @media (max-width: 767px){
    p.health-a {font-size: 1.9rem;}
    p.health-b {transition: .5s; will-change: transform;transform: translateY(0); font-size: 3rem;}
    #blue-h div div p {margin: 1rem auto; padding: 0 calc(5vw); font-size: 1.5rem;}
  }
  @media (min-width: 768px){
    p.health-a {height: 6.25rem;}
    p.health-a {transition: .5s; will-change: transform;transform: translateX(12.5rem) translateY(1rem);font-size: 1.9rem; }
    #blue-h {width: 66.6vw;}
  /*  #blue-h div div div, #blue-h div div p {display: inline-block;} */
    p.health-b {transform: translateY(-2.5rem);}
  #blue-h div div:nth-child(2) p {font-size: 2rem;}
  }
  @media (min-width: 1140px){
     p.health-b {transform: translateY(3.25rem);}
      .adj {position: relative; top: 2rem; right: 3rem;}
  }

  .tantype {color:var(--hpwtan);}
  #blue-h div div:nth-child(1) p {font-size: 1.25rem;}
  #blue-h-info li{padding: 1rem 1rem 1rem 0; line-height: 1.25rem;}
  ul#blue-h-info {}
  ul#blue-info li:nth-child(even){background-color:rgba(104,117,78,0);} /* border-bottom: .1rem solid rgba(104,117,78,.25); border-top: .1rem solid rgba(104,117,78,.25); */
  ul#blue-info li:nth-child(odd){background-color:rgba(151,151,151,.2);} /* rgba(205,186,156,.2);  */
  .noteborder {}
  .notebordertop{background-color: var(--hpwgreenlite);width: 100%; padding: .75rem .75rem .25rem; color: var(--hpwgreen);}
  .notebordertop h6 {color: var(--hpwgreen); font-weight: 800;}
  .list-group-item.active {background-color: var(--hpwgreenlite); border-color: var(--hpwgreenlite);}
  .list-group-item {border: 0;}
   ul.triangle {list-style-type: none; padding-inline-start: 0rem; margin: 0;}
ul.triangle li ul {padding-inline-start: 0; padding:0;}
   ul.triangle li {background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMy4yIiBoZWlnaHQ9IjE1LjIiIHZpZXdCb3g9IjAgMCAxMy4yIDE1LjIiPg0KICA8cGF0aCBpZD0iUG9seWdvbl80IiBkYXRhLW5hbWU9IlBvbHlnb24gNCIgZD0iTTcuNiwwbDcuNiwxMy4ySDBaIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxMy4yKSByb3RhdGUoOTApIiBmaWxsPSJyZ2JhKDEwNCwxMTcsNzgsMC40KSIvPg0KPC9zdmc+DQo=); display: block; background-repeat: no-repeat; background-position: 0rem .6rem; padding-left: 2.5rem; padding-top: .25rem; padding-bottom: .25rem; margin: .375rem 0;}  

    .bor-full{background-color: var(--hpwtanlite);border-radius: 1rem;}

     .lbg {border-left: .25rem solid var(--hpwgreen); padding-left: 2.5rem;}
     .rbg {border-right: .25rem solid var(--hpwgreen); padding-right: 2.5rem;}
     
     @media (max-width: 768px){
         .lbg {border-left: 0; padding-left: 0; padding-bottom: .75rem;}
         .rbg {border-right: 0; padding-right: 0;  padding-bottom: .75rem;}
     }




/***** COORDINATOR PAGE *****/
  .header-hpw {background-color: var(--hpwgreen); border-bottom: 1rem solid var(--hpwtan); font-size: 1.15rem; color: #ffffff; position: relative; line-height: 1.2em;}
  .header-hpw div:nth-child(1) {position: relative; left: .5rem; text-transform: uppercase;}

ul.instructions li {margin-bottom: 1.25rem;}
ul.sharepoint--buttons {padding: 0; font-size: 1.25rem;}
  ul.sharepoint--buttons li {width: 80%; border: .125em solid var(--hpwgreen); list-style-type: none; margin: .5em auto; padding: .5em 0; text-align: center; border-radius: .5rem;}
  ul.sharepoint--buttons li:hover {background-color: var(--hpwgreen); color: rgba(255,255,255,1.00);} 
  ul.sharepoint--buttons a:hover {color: rgba(255,255,255,1.00); text-decoration: none;}

    @media (min-width: 768px){
      .header-hpw {font-size: 2rem; }
      .header-hpw div:nth-child(1) {padding: .5rem 0;}			  
  }

/***** MODULES *****/
.tanbox {background-color:var(--hpwtanlite); border: .125rem solid rgba(0,0,0, .25);}
.pullquote {margin: 1rem auto; font-size: 1.5rem; line-height: 1.2em; text-align: center;}
.btn {background-color: rgb(255,255,255); border: .125em solid var(--hpwgreen); list-style-type: none; margin: .5em auto; padding: .5em; text-align: center; border-radius: .5rem;}
.btn:hover {background-color: var(--hpwgreen); color: rgba(255,255,255,1.00) !important;}
.card {background-color: transparent;border:0}

.resources {background-color: var(--hpwtanlite); border-radius: 1rem; border: .25rem solid var(--hpwgreen); margin-bottom: 1rem;}
.resources p, .resources a, .resources h6 {font-size:1rem;}
.resources p {margin-bottom: .8rem; line-height: 1.2rem;}
.resources p ~ h6 {margin-top: 1.5rem;} 
.my-45 {margin: 2.5rem 0;}
.f24 {font-size: 1.5rem; font-weight: 800;}
.f48 {font-size: 3rem; font-weight: 800;}
div.graphic--header ~ * {max-width: 1440px;}


@media (min-width: 1024px){
    .my-lg-45 {margin: 2.5rem 0;}
    .b-125-gl {border: 1.25rem solid var(--hpwgreenlite);}
}

/* @media (max-width: 425px){
    .f24 {font-size: 1rem;}
    .f48 {font-size: 2rem;}
}*/