/* @import url('http://example.com/example_style.css'); */

/***********************************************/
/* CSS @imports must be at the top of the file */
/* Add them above this section                 */
/***********************************************/

/****************************************/
/* HubSpot Style Boilerplate            */
/****************************************/

/* These includes are optional, but helpful. */
/*

*/

/* old green #26af71, new green #008441 OR rgb(38, 175, 113) */

/*****************************************/
/* Start your style declarations here    */
/*****************************************/
/* HUBSPOT SPROCKET OVERLAY position - move it to the left. */
body .hs-tools-menu { left:10px !important; right:initial !important; }

p,
p span,
.maincontent ol li,
.maincontent ul li { font-size:20px; }

/* GH Added simply .maincontent to catch divs and spans etc. testing to ensure nothing untoward scales in size. */
.maincontent { font-size:20px; }

article, aside, dialog, figcaption, figure, footer, header, hgroup, main, nav, section {
  display: block;
}

abbr
{
  text-decoration:none;
  border-bottom: 1px dotted;
  cursor: help;
}

abbr:hover { border-bottom-color: #008441; border-bottom-style:solid; }

sup, sub {
  vertical-align: baseline;
  position: relative;
  top: -0.4em;
}
sub { 
  top: 0.4em; 
}


kbd {
  border-radius: 0.25rem;
  padding: 0.1rem 0.25rem;
  border: 1px solid currentColor;
  background-color:#EEE;
  font-size:0.9rem;
}

::placeholder { color: #444444; }
::selection { color:white; background-color:#008441; }

.codeblock code, .codeblock .code { background: #f4f4f4;
    border: 1px solid #ddd;
    border-left: 3px solid #f36d33;
    color: #666;
    page-break-inside: avoid;
    font-family: monospace;
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 1.6em;
    max-width: 100%;
    overflow: auto;
    padding: 1em 1.5em;
    display: block;
    word-wrap: break-word;
}

code { background: #f4f4f4;
    border: 1px dashed gray;
    border-radius:0.2em;
    padding: 0.1em 0.25em;
    color: #666;
    page-break-inside: avoid;
    font-family: monospace;
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 1.6em;
    max-width: 100%;
    word-wrap: break-word; }

[tabindex="-1"]:focus { outline: 0 !important; }

.offscreen, .hideme, .sr-only {
  position:absolute;
  left:-10000px;
  top:auto;
  width:1px;
  height:1px;
  overflow:hidden; }

.inblock { display:inline-block; }
.inline  { display:inline; }
.block   { display:block; }
.fleft   {  float:left; }
.fright  {  float:right; }

.header-logo { padding:8px; width:150px; } /* gh added */
.header-logo a { display:inline-block; }


.left   { text-align:left;   }
.center { text-align:center; }
.right  { text-align:right;  }


/* Sidebar Search input. */
/*.sidebar .hs-search-field { outline:2px dotted green; }*/

 
.siteSearch input[type='text'] { 
  color: #028445; /* dark green #028445 */
  padding: 7px 15px;
  font-size: 24px;
  line-height: 1.5;
  font-weight: 400;
  border: 1px solid #666;
  padding-right: 60px;
  margin-bottom:0;
}


/* CTA general styles: to make links inline-block and to receive a visible keyboard-focus. */
a.cta_button { display:inline-block; }


a.skip-link2 {
  background-color:black; color:white !important;
  text-decoration:none !important;
  font-size:0px; 
  text-align:center;
  padding:0px;
  display:inline-block; 
  position:absolute;
  /*position:absolute; left:0; right:0;
  width:99%; */
  line-height:0;
  transition:all 0.15s;
}
a.skip-link2:focus{ position:static; 
  padding:5px;
  border-radius:0.25em;
  line-height:1.0; font-size:1em;
  margin:5px 5px 10px 5px; 
}




/* BREADCRUMB: Oct 04, 2021 
 * ----------------------------- */
.breadcrumb { background-color:white; padding:0; margin:0; padding-top:1rem; } /* wraps all breadcrumb code. */
.hs-breadcrumb-menu-wrapper {  }
ul.hs-breadcrumb-menu       {  }
.hs-breadcrumb-menu .hs-breadcrumb-menu-item    { padding-top:1px; padding-bottom:3px; }
.hs-breadcrumb-menu .hs-breadcrumb-menu-item.first-crumb { padding-left:0; }
.hs-breadcrumb-menu .hs-breadcrumb-menu-item.last-crumb  {  }

.hs-breadcrumb-menu .hs-breadcrumb-menu-item a.hs-breadcrumb-label,
.hs-breadcrumb-menu .hs-breadcrumb-menu-item a.hs-breadcrumb-label:link,
.hs-breadcrumb-menu .hs-breadcrumb-menu-item a.hs-breadcrumb-label:visited { color:blue; text-decoration:none; border-bottom:1px solid blue; }

.hs-breadcrumb-menu .hs-breadcrumb-menu-item a.hs-breadcrumb-label:active,
.hs-breadcrumb-menu .hs-breadcrumb-menu-item a.hs-breadcrumb-label:hover,
.hs-breadcrumb-menu .hs-breadcrumb-menu-item a.hs-breadcrumb-label:focus { color:blue; text-decoration:underline; border-bottom-color:transparent; }

/* ------------------------------
 * BREADCRUMB: Oct 04, 2021 */




/* ADVERTISEMENTS (AdServe) 
 * ------------------------------ */
/* Sidebar Ads Section */
.sidebar-advert { margin-bottom:1rem; margin-top:1rem; text-align:center; }
.sidebar-advert .adimg { display:inline-block; }
.sidebar-advert a { display:inline-block; overflow:visible; }


.sidebar-advert .adimg a:link { border:1px solid grey; }
.sidebar-advert .adimg a:hover, .sidebar-advert .adimg a:focus { /*border:none;*/ border-color:#003da5; box-shadow: 0 0 1px 1px #003da5; }


/* MAIN Banner ads section */
.main-advert { text-align:center; margin:auto auto;  }
.main-advert .adimg { display:inline-block; }
.main-advert a { display:inline-block; overflow:visible; margin-left:-3px; }
.main-advert .adimg a:link { border:1px solid grey; }
.main-advert .adimg a:hover, .main-advert .adimg a:focus { border-color:#003da5; box-shadow: 0 0 1px 1px #003da5; }


/* Top of pages */
.main-advert-1 { margin-bottom:1rem; padding-bottom:1rem; border-bottom:1px solid #DDD; } 

/* Bottom of pages */
.main-advert-2 { margin-top:1rem; padding-top:1rem; /*border-top:1px solid #DDD;*/ } 

.advert.main-advert .adimg a img { width:auto !important; height:auto !important; } /* try forcing width and height of banner ad images to 'auto' with an !important directive. so that it scales when shrunk by browser width. */
/* ------------------------------
 * end: ADVERTISEMENTS (AdServe) */




/* SPECIAL STYLES for FORM-INPUT display changes. Apr 2021. */
.hs_would_you_like_a_subject_matter_expert_to_review_results_with_you_ div.input { display:inline-block; }
.hs_would_you_like_a_subject_matter_expert_to_review_results_with_you_ div.input ul { display:inline-block; padding-left:0; margin-left:0; }
.hs_would_you_like_a_subject_matter_expert_to_review_results_with_you_ div.input ul li { display:inline-block; margin-left:1rem; }


/* end: SPECIAL STYLES for FORM-INPUT display changes. Apr 2021. */


/* .siteSearch form:after { background-image: url(https://24461487.fs1.hubspotusercontent-na1.net/hubfs/24461487/SearchIcon-1.png); background-size: cover; background-position: center center; background-repeat: no-repeat; width: 20px;
  content: ""; height: 20px; display: inline-block; background-color: transparent; position: absolute; top: 50%; right: 10px; transform: translateY(-50%); } */
.siteSearch form { position: relative; max-width:30em; }
/*.siteSearch form label{ display:none; }*/
.mostRecentPostListing, .popularPostListing{ display:none; }
.mostRecentPostListing.active, .popularPostListing.active{ display:block; }
.siteSearch button{ position:absolute; top:0; right:0; width: 50px; height:52px; display:inline-block; bottom: 0; padding: 12px; border: 1px solid #666; background-color: #e5e5e5; }
.siteSearch .hs-search-field__bar button svg{ height:100%; width:100%; }
.siteSearch .hs-search-field__bar button svg *{ fill:#444; }

/* SEARCH RESULTS and PAGINATION 
 * container is classed '.hs-search-results__pagination'
 * PREVious button is classed '.hs-search-results__prev-page'
 * NEXT button is classed '.hs-search-results__next-page'
 * */
#hsresults { list-style-type:none; padding-left:0; }
.hs-search-highlight.hs-highlight-title  { font-weight:bold; border:0px solid blue;*/ }
.hs-search-highlight { font-weight:bold; padding-left:0.2em; padding-right:0.2em; border-radius:0.2em; border:1px solid orange; } /*background-color:#FFFF80; */

.hs-search-results__pagination {
  display: block;
  text-align: center;
  padding-top:50px;
  padding-bottom: 50px;
}

.hs-search-results__pagination .hs-search-results__next-page,
.hs-search-results__pagination .hs-search-results__prev-page {

}

.hs-search-results__pagination a:link, .hs-search-results__pagination a:visited
{
  font-weight:bold;
  display:inline-block;
  padding:0.2em 1em;
  text-align: center;
  background-color: #008441;
  color: #fff;
  width:auto;
  line-height:40px;
  border:2px solid #008441;
}

.hs-search-results__pagination a:hover,
.hs-search-results__pagination a:focus {
  background-color: #FFF;
  color: #23854e;
  text-decoration: none;
}



 /* Numbered Pagination */
/*


.blog-pagination a {
  display: inline-block;
  text-align: center;
  border-radius: 0;
  padding: 5px 10px;
  width:50px;
  height:50px;
  vertical-align: top;
  line-height:40px;
  font-size:16px;
  font-family:"Roboto", sans-sarif;
  text-decoration:none;
  border: 2px solid #23854e;
  transition:all ease 0.3s;
  -moz-transition:all ease 0.3s;
  -webkit-transition:all ease 0.3s;
}
.blog-pagination a:hover{
}
.blog-pagination a:hover,
.blog-pagination a:focus {
  background-color: #23854e;
  text-decoration: none;
  color:#fff;
}
.blog-pagination a.elipses {
  border: 0;
}
.blog-pagination a.active {
  background-color: black; 
  color: white;
  pointer-events: none;
  border-color:black;
  cursor: default;
}
.blog-pagination a.next-link,
.blog-pagination a.prev-link {
  background-color: #23854e;
  color: #fff;
  width:auto;
  line-height:40px;

}
.blog-pagination a.next-link:hover,
.blog-pagination a.prev-link:hover {
  background-color: #fff;
  color: #23854e;
}
 * /
 * 
/* end: SEARCH RESULTS and PAGINATION */



/* ALL-Star-Logos module CSS. 
 * ----------------------- */
.allstar-module-box { margin: 2em 0; border:1px solid gray; border-width:1px 0px;}
.allstar-title-box { text-align:center; margin-top:1em; }
.allstar-logo-container { padding:0.25em 0; margin:auto auto; overflow:auto; /*border:1px solid gray; border-width:1px 0px;*/ }
.allstar-logo-container .allstar-logo-row { display:inline; width:100%; overflow:auto; 
  /*outline:2px solid blue;*/
}

/*.client-logo-container .client-logo-row .min-four-logos { display:inline; outline:1px solid purple; }*/
.allstar-logo-container .allstar-logo-row .client-logo { display:inline-block; margin:5px; width:calc(16.6% - 10px); float:left; }
@media screen and (max-width: 1023px) {
  /* client logos */
  /*.clients-holder { padding:0; }*/
  .allstar-logo-container .allstar-logo-row .client-logo { width:calc(24.2% - 10px); }
}
/* ---------------------------------
 * end: ALL-Star-Logos module CSS. */


/* Case-Study related styles 
 * ------------------------------ */
.quote-box { color:#008441; font-style:italic; font-weight:normal;
  /*margin-bottom:2em;*/
  margin: 0 0 2em 0;
  padding:0.5em 1em;
  /*box-shadow:6px 9px 6px rgba(0,0,0,0.2);*/
  box-shadow:-4px 0px 6px rgb(0 0 0 / 10%); border-radius:1rem;
}
.quote-box .quote-source { color:black; text-align:right; font-style:normal; font-weight:normal; font-size:18px; text-shadow:0 0 1px grey; }

.note-centered { border: 1px solid #008441; border-width:1px 0px 1px 0px; padding:1em 0; margin:2em 5em;
  font-style:italic;} 

.sidebar-casestudy-wrapper                { padding:20px 0 20px 0; position:relative; color:black; background-color:white; text-align:center; vertical-align:top; overflow:auto;
                                            margin-top:1em; margin-bottom:1em; /*outline:1px solid orange;*/ }
.sidebar-casestudy                        { border: 1px solid silver; padding:1em 0 0 0; overflow:auto; } /* Containing element for all other sidebar-case-study elements. */
.sidebar-casestudy .casestudy-logo        { border-bottom:1px solid #444; padding:20px 10px; } /* Case-study logo image. */
.sidebar-casestudy .casestudy-preamble    { border-bottom:1px solid #444; background-color:#EEE; color:black; padding: 20px 10px; } /* Case-studyPreamble Rich text. */
.sidebar-casestudy .casestudy-preamble p  { margin:0; }
.sidebar-casestudy .casestudy-quote       { font-style:italic; font-weight:bold; padding: 20px 10px;} /* Case-study quote Rich text. */
.sidebar-casestudy .casestudy-quote p     { margin:0; }
.sidebar-casestudy .casestudy-quote-owner { font-size:16px;  padding: 20px 10px;} /* Case-study quote-owner Rich text. */
.sidebar-casestudy .casestudy-quote-owner p  {font-size:16px;  margin:0; }

.sidebar-casestudy .casestudy-readmore-box { margin:30px 10px; text-align:left; }

.sidebar-casestudy .casestudy-readmore-box a,
.sidebar-casestudy .casestudy-readmore-box a:link,
.sidebar-casestudy .casestudy-readmore-box a:visited {
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  line-height: normal;
  padding: 13px 13px;
  border: 2px solid #008441; /* old green #26af71. New darket green #008441. */
  border-radius: 0.25em;
  box-shadow: none; /*!important*/
  background-color: #008441; /* old green #26af71. New darket green #008441. */
  text-transform: uppercase;
  text-decoration:none;
}
.sidebar-casestudy .casestudy-readmore-box a:hover,
.sidebar-casestudy .casestudy-readmore-box a:active,
.sidebar-casestudy .casestudy-readmore-box a:focus {
  color: #008441; /* old green #26af71. New darker green #008441. */
  background-color: #fff;
}


/* Add large, overlapping quote-flares at the very TOP-left and bottom-right. */
.sidebar-casestudy-wrapper:before {
  content: "\f10d";
  font-size:48px;
  padding:0.25em 0.25em 0.25em 0;
  font-family: FontAwesome;
  color:#666;
  background-color:white;
  position:absolute;
  top:0;
  left:0;
}

.sidebar-casestudy-wrapper:after {
  content: "\f10e";
  font-size:48px;
  padding:0.25em 0 0.25em 0.25em;
  font-family: FontAwesome;
  color:#666;
  background-color:white;
  position:absolute;
  bottom:0;
  right:0;
}

/*  ------------------------------- 
 * end: Case-Study related styles */




#hs_cos_wrapper_blog_comments .actions input[type="submit"] { font-size:20px; padding:10px 15px; }

input[type="submit"],
#hs_cos_wrapper_blog_comments input[type="submit"] {
  margin-top:0.5em;
  background-color: #008441; /* old green #26af71. New darker green #008441. */
  padding: 0.15em 1em;
  border-radius: 0.25em;
  /*font-size: 24px;*/
  font-weight: 700;
  color: #fff;
  border: 2px solid #008441; /* old green #26af71. New darket green #008441. */
  /*box-shadow: none !important;*/
  text-transform: uppercase;
  -webkit-appearance: none; /* GH This should get rid of weird webkit submit button appearance on iphones etc. */
}
button:hover,
input[type="submit"]:hover,
#hs_cos_wrapper_blog_comments input[type="submit"]:hover {
  background-color: #fff;
  color:#008441; /* old green #26af71. New darket green #008441. */
}

/* These are bigger buttons - more padding. */
.hs-button.primary.large { font-size: 16px; padding:16px 34px; text-transform:uppercase; }



.greenbox { border:2px solid #008441;
            padding:0.2em 0.5em; }

.sidebar.greenbox h2,
.sidebar .greenbox h3 { 
    text-align:center;
    background-color:#008441; 
    color:white; 
    position:relative;
    top:-0.2em;
    margin-left:-0.3em;
    margin-right:-0.3em;
}

.sidebar .greenbox ul li {
  border-bottom:1px solid silver; 
  padding-bottom:0.25em;
  margin-bottom:0.25em;
  /*outline:1px solid orange;*/ }

.sidebar .greenbox ul li:last-child { border-bottom:none; }

.sidebar li a, .sidebar li a:link, .sidebar li a:visited { color:#333; text-decoration:none; }
.sidebar li a:hover,
.sidebar li a:active,
.sidebar li a:focus{ color:#000; text-decoration:underline; }



/* NAV RELATED. */
.header-menu {
  width: 100% !important;
  text-align: right;
}
.header-menu .hs-menu-wrapper.hs-menu-flow-horizontal>ul li a {
  padding: 30px 20px;
  white-space: normal;
  max-width: none;
  color: black; /* #003da5 */
  font-size: 16px;
  line-height: 1.2;
  font-weight: bold;
} 
.header-menu .hs-menu-wrapper.hs-menu-flow-horizontal>ul li, .header-menu .hs-menu-wrapper.hs-menu-flow-horizontal {
  line-height: 0;
}
/* Nav child menu UL (container). */
.header-menu .hs-menu-wrapper.hs-menu-flow-horizontal>ul li.hs-item-has-children ul.hs-menu-children-wrapper {
  top: 99.5%; /* 100% */
  /*   background-color: #fff; */
  text-align: left;
  width: 230px; /*220px*/
  /*outline:3px solid red;*/
  -webkit-box-shadow: 0px 3px 15px -6px rgba(0,0,0,0.35);
  -moz-box-shadow: 0px 3px 15px -6px rgba(0,0,0,0.35);
  box-shadow: 0px 9px 15px 0px rgba(0,0,0,0.15); /* 0px 3px 15px -6px rgba(0,0,0,0.35); */
  
  padding: 20px 0 0; /* Child menu UL: was 10px 0 0 */
}
/* gh add top border to FIRST link element...*/
.header-topwrap .header-menu .hs-menu-wrapper.hs-menu-flow-horizontal>ul li.hs-item-has-children ul.hs-menu-children-wrapper li:first-child { border-top:1px solid black; }

.header-topwrap .hs-menu-item.hs-menu-depth-1 { border-bottom:1px solid transparent; }
.header-topwrap .hs-menu-item.hs-menu-depth-1.hs-item-has-children.focused { border-bottom-color:gray; } /* GH affect top nav links WHEN focused on. */
/*  Add a downward facing arrow to indicate menu expandability. */
.header-topwrap .hs-menu-item.hs-menu-depth-1.hs-item-has-children.focused::after  /* temp removed ending ".focused" */
{
    content: '';
    width: 0px;
    height: 0px;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 0px solid transparent;
    border-top: 10px solid #333; /* UPWARD arrow color. 10px solid #fff */
    position: absolute;
    bottom: -10px;
    left: 24px;  
}


/* Now, for MOUSE focus (*:focus:not(.focus-visible) remove the downward arrow indicator.
 * (Remove downward indicator for non-keyboard :focus) */
/*
.header-topwrap .hs-menu-item.hs-menu-depth-1.hs-item-has-children.focused:focus:not(.focus-visible)::after
{
  border:none !important;
}
*/

/* GH: menu testing.... DEV */
.header-menu .hs-menu-wrapper.hs-menu-flow-horizontal>ul li.hs-item-has-children ul.hs-menu-children-wrapper li {
  background-color: #FFF; /*#FFF*/
}
.header-menu .hs-menu-wrapper.hs-menu-flow-horizontal>ul li.hs-item-has-children ul.hs-menu-children-wrapper li a {
  display: block;
  white-space: normal;
  width: 100%;
  padding: 10px 10px; /*10px 20px*/

}


/* new testing only! */
.header-menu .hs-menu-wrapper.hs-menu-flow-horizontal>ul li.hs-item-has-children ul.hs-menu-children-wrapper li a:hover,
.header-menu .hs-menu-wrapper.hs-menu-flow-horizontal>ul li.hs-item-has-children ul.hs-menu-children-wrapper li a:hover,
.header-menu .hs-menu-wrapper.hs-menu-flow-horizontal>ul li.hs-item-has-children ul.hs-menu-children-wrapper li a:focus
{ background-color:#62707D; color:white; } /* #62707D is a dark vs of slategray */


/*Upward pointing arrow for TOP-Nav links */
/* Feb 11, 2020: changed to make it a child of the 'li:first-child' instead of 'li:first-child a'*/
/* NEW: TODO style. */
.header-menu .hs-menu-wrapper.hs-menu-flow-horizontal>ul li.hs-item-has-children ul.hs-menu-children-wrapper li:first-child::before {
  content: '';
  width: 0px;
  height: 0px;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 0px solid transparent;
  border-bottom: 10px solid #333; /* UPWARD arrow color. 10px solid #fff */
  position: absolute;
  top: 10px;
  left: 24px;
  /*outline:1px solid red;*/
  /*
  -webkit-transition: all 0.5s;    
  -moz-transition: all 0.5s;    
  -ms-transition: all 0.5s;    
  -o-transition: all 0.5s;    
  transition: all 0.5s;
  */
}


/* WAS THIS: @media(min-width:881px) */
@media(min-width:1200px) {
  .header-section .hs-menu-wrapper.hs-menu-flow-horizontal > ul li.hs-item-has-children:hover > ul.hs-menu-children-wrapper, 
  .header-section .hs-menu-wrapper.hs-menu-flow-horizontal > ul li.hs-item-has-children > ul.hs-menu-children-wrapper.show-menu:not(.hide-menu)
  {
    top:100%; /* GH made this 89px instead of 100%.*/
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
    overflow: visible !important;
  }
  
  /* GH added this line to force nav section to show (display block) even if toggled off by mobile trigger menu collapser. */
  .header-menu .hs-menu-wrapper.hs-menu-flow-horizontal { display: block !important;  margin-top:2px; }
  
  /* Mobile top menu triggers. */
  a.mobile-trigger-new, a.child-trigger-new {
    display: none !important; /* Hide button on Desktop */
  }
}



/* Google Sign In button stuff */
.goolesignin_box .g_id_signin iframe {
  margin: 0 auto !important;
}



/* HP3 EXODUS: 
 *  COMMON STYLES moved out of HP3.css so we can stop including it everywhere. 
 * ------------------------------------------*/

h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  margin-bottom: 0.5rem;
}
 
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  margin-bottom: 0.5rem;
  font-family: inherit;
  font-weight: 500;
  line-height: 1.2;
  color: inherit;
}

h1, .h1 { font-size: 2.5rem; }
h2, .h2 { font-size: 2rem; margin-top:2rem; }
h3, .h3 {  font-size: 1.75rem; color:#444; }

hr {
  margin-top: 1rem;
  margin-bottom: 1rem;
  border: 0;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.img-fluid {
  max-width: 100%;
  height: auto;
}

.container {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
  max-width: 1140px; /* GH added here instead of within media size queries. */
}

.row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-right: -15px;
  margin-left: -15px;
}



.flex, .flexboxrow { display: flex; flex-direction:row; flex-wrap: wrap; align-items:center; justify-content:space-around; flex-grow:0; background-color:white;  }
.flex1 { flex:1; }


.d-none {
  display: none !important;
}

.d-inline {
  display: inline !important;
}

.d-inline-block {
  display: inline-block !important;
}

.d-block {
  display: block !important;
}

.d-table {
  display: table !important;
}

.d-table-row {
  display: table-row !important;
}

.d-table-cell {
  display: table-cell !important;
}

.d-flex {
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
}

.d-inline-flex {
  display: -webkit-inline-box !important;
  display: -ms-inline-flexbox !important;
  display: inline-flex !important;
}

.list-unstyled {
  padding-left: 0;
  list-style: none;
}





.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  -webkit-clip-path: inset(50%);
  clip-path: inset(50%);
  border: 0;
}

.sr-only-focusable:active, .sr-only-focusable:focus {
  position: static;
  width: auto; 
  height: auto;
  overflow: visible;
  clip: auto;
  white-space: normal;
  -webkit-clip-path: none;
  clip-path: none;
}

.text-justify {
  text-align: justify !important;
}

.text-nowrap {
  white-space: nowrap !important;
}

.text-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.text-left {
  text-align: left !important;
}

.text-right {
  text-align: right !important;
}

.text-center {
  text-align: center !important;
}


ul.two-column, ol.two-column,
.two-column-list ul, .two-column-list ol {
-webkit-column-count: 2;
-moz-column-count: 2;
-ms-column-count: 2;
-o-column-count: 2;
column-count: 2;
-webkit-column-gap: 2em;
-moz-column-gap: 2em;
-ms-column-gap: 2em;
-o-column-gap: 2em;
column-gap: 1em;
}

ul.three-column, ol.three-column,
.three-column-list ul, .three-column-list ol {
-webkit-column-count: 3;
-moz-column-count: 3;
-ms-column-count: 3;
-o-column-count: 3;
column-count: 3;
-webkit-column-gap: 3em;
-moz-column-gap: 3em;
-ms-column-gap: 3em;
-o-column-gap: 3em;
column-gap: 1em;
}

ul.two-column li,   ol.two-column li,
ul.three-column li, ol.three-column li,
.two-column-list ul li, .two-column-list ol li,
.three-column-list ul li, .three-column-list ol li { word-wrap: break-word; }

/* ----------------------
 * end: HP3 EXODUS... */


/* COMMON STYLES used for Page Footesque content */
/* start: MOVED FROM HP3_modules.css 
 * ------------------------------------ */

.cmn-btn {
  font-size: 19px;
  font-weight: 700;
  color: #fff;
  line-height: normal;
  padding: 12px 30px;
  border: 2px solid #008441; /* old green #26af71. New darket green #008441. */
  border-radius: 3px;
  /* box-shadow: none !important; */
  background-color: #008441; /* old green #26af71. New darket green #008441. */
  text-transform: uppercase;
  text-decoration:none;
}
.cmn-btn:hover,
.cmn-btn:focus{
  color: #008441; /* old green #26af71. New darket green #008441. */
  background-color: #fff;
}

/* CHATBOT: Here we can initially hide the ChatBot Iframe container until activated by a script */
/*
#hubspot-messages-iframe-container { height:0 !important;
  outline:0px solid #EEE; }
#hubspot-messages-iframe-container.show {  height:auto !important;
  outline:2px solid #EEE; }
*/

/* H1 style */

h1.header_titlebar { margin-bottom:0.6em; padding-bottom:0.25em; word-break: break-word; }

h1 { position:relative; padding-bottom:0.2em; margin-bottom:0.2em; padding-top:1rem; /*margin-top:3em;*/ }
h1::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0px;
  height: 5px;
  width: 75px;
  background-color: #008441; /* old green #26af71. New darker green #008441. */
}

.headunderline { position:relative; }

.headunderline::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  height: 5px;
  width: 75px;
  background-color: #008441; /* old green #26af71. New darket green #008441. */ /* GH Added green bg color */
}

/* optional reputation logos and links that may appear at the bottom of the MAIN content. */
.reputationlinks a, .reputationlinks a:link { text-decoration:none; border-bottom:none; }
.reputationlinks a:hover, .reputationlinks a:focus { outline:1px solid mediumblue; }

.reputationlinks {
  display:table;
  border-spacing:1em;
  border-radius:0.2em;
  margin:2em auto;
  /*outline:1px solid silver;*/
}
.reputationlinks .reputationbox {
  display:table-cell; /* note this changes to block and add margin when width too small */
  vertical-align:middle;  
  border:1px solid silver;
  border-radius:0.5em;
  box-shadow: 3px 3px 3px silver;
  padding: 0.2em;
  text-align:center;
  min-width:4em;
}
.reputationlinks .boxinner {  }
.reputationlinks a { display:inline-block; }




/* Drag N Drop area classes 
 * -------------------------------- */
.dnd_area_1 { padding: 5px 0;  }
.dnd_area_2 { padding: 5px 0; }
.dnd_area_3 { padding: 5px 0; }
.dnd_area_4 { padding: 5px 0; }


/* -------------------------------- 
 * END: Drag N Drop area classes   */


/* SERVICES: from HP3_modules */
.services-holder a { display:inline-block; 
  text-decoration: none; }

.services-holder a:hover div.services-contents,
.services-holder a:focus div.services-contents{
  box-shadow: 0px 0px 36px rgba(0,0,0,0.8);
}
.services-holder a:hover {
  text-decoration: none;
}
/* end: SERVICES: from HP3_modules */


/*hide EMAIL label not error message labels. */
.newsletter-holder label[id^="label-email-"] {  display:none; }

.newsletter-holder {
  position: relative;
  background-color: #eef8f4;
}
.newsletter-holder .newsletter-strip1 img {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  width: 100%;
}
.newsletter-holder .newsletter-strip2 img {
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  width: 100%;
}
.newsletter-holder .newsletter-contents {
  padding: 70px 0px;
  max-width: 50em;
  text-align: center;
  margin: 0 auto;
}
.newsletter-holder .newsletter-contents h3 {
  font-size: 29px;
  font-weight: 400;
  color: #241c1c;
  line-height: 1.4;
  margin-bottom: 40px;
}
.newsletter-holder .newsletter-contents input[type="email"] {
  height: 65px;
  padding: 5px 20px 5px 55px;
  border-radius: 0px;
  font-size: 18px;
  color: #484747;
  border: 4px solid #b4c3bc;
  background-color: #fff;
  /*box-shadow: none !important;*/
  background-image: url(https://www.boia.org/hubfs/Icons/mail.png); /*https://cdn2.hubspot.net/hubfs/24461487/BOIA%202020/others/fin-ic.webp*/
  background-repeat: no-repeat;
  background-position: 4% center;
  margin-bottom: 0.25em; /*35px*/
}
.newsletter-holder .newsletter-contents input[type="submit"] {
  margin-top:0.5em;
  background-color: #008441; /* old green #26af71. New darket green #008441. */
  padding: 13px 30px;
  border-radius: 0px;
  font-size: 24px;
  font-weight: 700;
  color: #fff;
  border: 2px solid #008441; /* old green #26af71. New darket green #008441. */
  border-radius: 3px; /*35px*/
  /*box-shadow: none !important;*/
  text-transform: uppercase;
}
.newsletter-holder .newsletter-contents input[type="submit"]:hover,
.newsletter-holder .newsletter-contents input[type="submit"]:active,
.newsletter-holder .newsletter-contents input[type="submit"]:focus {
  background-color: #fff;
  color:#008441; /* old green #26af71. New darket green #008441. */
}

/* 'Get Started' STYLES */
.start-holder {
  padding: 100px 0px;
}
.start-holder .start-contents h3 {
  color: #252525;
  padding-bottom: 0px;
  margin-bottom: 30px;
  text-transform: uppercase;
}
.start-holder .start-contents h3::after {
  display: none;
}
.start-holder .start-contents p {
  font-size: 30px;
  color: #2e2e2e;
  line-height: 1.6;
  margin-bottom: 35px;
}
.start-holder .start-contents .cmn-btn {
  font-size: 24px;
  font-weight: 700;
  color: #fff;
  line-height: normal;
  padding: 13px 30px;
  border: 2px solid #008441; /* old green #26af71. New darket green #008441. */
  border-radius: 35px;
  box-shadow: none; /*!important*/
  background-color: #008441; /* old green #26af71. New darket green #008441. */
  text-transform: uppercase;
  text-decoration:none;
}
.start-holder .start-contents .cmn-btn:hover,
.start-holder .start-contents .cmn-btn:active,
.start-holder .start-contents .cmn-btn:focus {
  color: #008441; /* old green #26af71. New darket green #008441. */
  background-color: #fff;
}

/* CONTACT styles */


.contact-holder {
  padding: 100px 0px;
  background-color: #eeeeee;
}
.contact-holder h3, .contact-holder h2 {
  font-size: 40px;
  font-weight: 900;
  color: #414141;
  margin-bottom: 35px;
  padding-bottom: 0.4em; /* 25px */
  position: relative;
  text-transform: uppercase;
}
.contact-holder h3::after, .contact-holder h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0px;
  height: 5px;
  width: 75px;
  background-color: #008441; /* old green #26af71. New darket green #008441. */ /* GH Added green bg color */
}
.contact-holder .contact-info ul {
  margin-bottom: 0px;
}
.contact-holder .contact-info ul li {
  padding-left: 70px;
  background-repeat: no-repeat;
  background-position: 0px 5px;
}

/* CONTACT US moved from HP3_modules.css */
.contact-holder .contact-form form fieldset {
  max-width: none;
  /* GH added margin bottom now labels are visible. */
  margin-bottom:0.5em;
}
.contact-holder .contact-form form .input textarea {
  width: 100%;
}
@media (max-width: 480px) {
  
  .contact-holder .contact-form form .input textarea {
    width: 95%;
  } 

}
.contact-holder input[type=submit] {
  background-color: #008441; /* old green #26af71. New darket green #008441. */
  padding: 12px 30px;
  border-radius: 3px; /*30px*/
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  border: 2px solid #008441; /* old green #26af71. New darket green #008441. */
  /*box-shadow: none !important;*/ 
  text-transform: uppercase;
  text-decoration:none;
}
.contact-holder input[type=submit]:hover,
.contact-holder input[type=submit]:focus {
  background-color: #fff;
  color: #008441; /* old green #26af71. New darket green #008441. */
}
.contact-holder span h3.form-title {
  display: none;
}

/* GH: not hiding this as we now are adding labels and may offscreen them. */
.contact-holder form .hs-form-field label span.hs-form-required {
  /*display: none;*/
}

.contact-holder form .hs-submit {
  padding-top: 10px;
}
/* end:CONTACT US moved from HP3_modules.css */

.contact-holder .contact-info ul li.address {
  padding-bottom: 15px;
}
.contact-holder .contact-info ul li.call-us {
  padding-bottom: 30px;
  padding-top: 20px;
}
.contact-holder .contact-info ul li.mail-us {
  padding-bottom: 20px;
  padding-top: 20px;
}
.contact-holder .contact-info ul li a {
  display:inline-block;
  font-size: 20px;
  color: #484848;
  text-decoration: none;
}
.contact-holder .noright-padding {
  padding-right: 5px;
}
.contact-holder .noleft-padding {
  padding-left: 5px;
}
.contact-holder .form-fields {
  margin-bottom: 10px;
}
.contact-holder .form-fields:last-child {
  margin-bottom: 0px;
}
.contact-holder .form-group {
  margin-bottom: 0px;
}
.contact-holder .hs-form-field input {
  height: 50px;
  background-color: #fff;
  padding: 5px 15px;
  border-radius: 0px;
  font-size: 14px;
  color: #1e1e1e;
  border: 1px solid #c3c3c3;
  /*box-shadow: none !important;*/
}
.contact-holder .hs-form-field textarea {
  background-color: #fff;
  padding: 10px 15px;
  border-radius: 0px;
  font-size: 14px;
  color: #1e1e1e;
  border: 1px solid #c3c3c3;
  /* box-shadow: none !important; */
  resize: none;
}
.contact-holder .form-btn button {
  background-color: #008441; /* old green #26af71. New darket green #008441. */
  padding: 12px 30px;
  border-radius: 30px;
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  border: 2px solid #008441; /* old green #26af71. New darket green #008441. */
  /* box-shadow: none !important; */
  text-transform: uppercase;
}
.contact-holder .form-btn {
  padding-top: 5px;
}
.contact-holder .form-btn button:hover {
  background-color: #fff;
  color: #008441; /* old green #26af71. New darket green #008441. */
}



label {
  display: inline-block;
  /*margin-bottom: .5rem;*/
}

/* ------------------------------------ 
 * end: MOVED FROM HP3_modules.css  */


/* HS error messages */

/* NOTE: this DISPLAY NOINE style is brought over from previous design but I do not believe this is the correct or most accessible thing to do.
 * However, on mobile, starting to type and email shows the blur error message and also refuses to submit.  */
.hs-error-msgs.inputs-list { display:none !important; } /* hides all error message */

.hs_error_rollup .hs-error-msgs.inputs-list { display:block !important; } /* show roll-up error message */


.hs-error-msgs { padding:0.25em 0.25em 0.25em 0; width:95%; margin-left:0.1em; margin-bottom:auto; margin-top:0; }

.hs-input.invalid.error { border:2px solid red !important; }

.no-list li { list-style-type:none; border:1px solid gray; border-radius:0.5em; }
.hs-error-msgs li { background-color:lightyellow; color:black; font-weight:normal; padding:0.25em; display:inline-block; }
.hs-error-msgs li label { margin-bottom:auto;  font-size:0.8em; }
.hs-error-msgs li label:before {  
  content: "\f071"; /* exclamation triangle */
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    padding-right: 0.5em;
    color:brown;
}

.sidebar .hs-error-msg { font-size:0.8em; } /*smaller font size on sidebar eror messages. */
/* end: HS error messages */


/*.blog-content { padding-top:2em; }*/

/* SubPage-1 (Content with SideBar)
 * ------------------------------------ */
.subpagecontent { display:table; margin-bottom:3em; } /* padding-top:2em; */
.subpagecontent .maincontent { display:table-cell; vertical-align:top; min-width:40vw; } /* min-width:50vw; */
.subpagecontent .sidebar     { display:table-cell; vertical-align:top; min-width:260px; max-width:25vw; padding-left:20px;}
/* ------------------------------------ 
 * end: SubPage-1 (Content with SideBar) */
 
/* SubPage-3 (two-column)
 * ------------------------------------ */
.subpagecontent .maincontent .leftcolumn  { display:table-cell; vertical-align:top; width:49vw; padding-right:1vw; } /* was width:49%; padding-right:1%; */
.subpagecontent .maincontent .rightcolumn { display:table-cell; vertical-align:top; width:49vw; padding-left:1vw; } /* was width:49%; padding-right:1%; */
/* ------------------------------------ 
 * end: SubPage-3 ((two-column)) */


/* Don't create a top margin for first paragraph in maincontent - so it lines up with right sidebar. */
.maincontent p:first-child { margin-top:0; }
.maincontent p { margin-top:0.5em; }

/* SubPages: Tighten up vertical padding of newsletter module on Sub Pages. */
.subpagebody .newsletter-holder .newsletter-contents { padding:30px 0px; }

/* SubPages: make the Get Started H3 heading smaller and don't upper case the text. */
.subpagebody .start-holder { max-width:50em; margin: auto auto; padding:40px 0; }
.subpagebody .start-holder .start-contents h3,
.subpagebody .start-holder .start-contents h2{ 
  color: #252525;
  padding-bottom: 0px;
  padding-bottom: 0.4em; /* 25px */
  text-transform: none;
  font-size: 36px;
}

.subpagebody .contact-holder { padding:40px 0px; }
.subpagebody footer { padding:50px 0px; border-top:1px solid gray; }

/* When used as a SYSTEM page (has class "systempagefooter") we want to add a top green border to help separate plain content form the basic footer. */
footer.systempagefooter { border-top: 2px solid #1a573b; margin-top:10em; padding:1em 0em 1em 0em; }
footer.systempagefooter .footer-menus ul { margin:0; }
footer.systempagefooter .footer-menus p { margin:0; }


/* FOOTER: moved from HP3_modules.css */
.footer-menus .hs-menu-wrapper.hs-menu-flow-horizontal>ul li a {
  padding: 0;
  max-width: none;
}
/* end: FOOTER: moved from HP3_modules.css */


/* Sidebar Form Styles */
.sidebarform { outline:1px solid silver; padding:5px; }
.sidebarform h3 { color:#008441; text-align:center; text-transform:uppercase; }
.sidebarform_image_box {
    margin:auto auto; text-align:center; margin-bottom:0.5em;
    /*
    background: white url("https://24461487.fs1.hubspotusercontent-na1.net/hubfs/24461487/BOIA%202020/others/ask.expert.free.consultation.png") no-repeat center bottom;       
    background-size: contain; 
    height: 240px;
    */
    /*outline:1px solid red;*/ 
    max-width:300px; }
.sidebarform_image_box img { width:100% }
.sidebarform_box {  }
.sidebarform_box .actions { text-align:left; }
.sidebarform_box .actions input[type=submit] { font-size:20px; }

.sidebarform_box .field.hs-form-field { margin-bottom:0.5em; }

/* ------------------------------------ 
 *  end: SubPage-1 (Content with SideBar )  */

.sidebar ul {  }
.sidebar ul li { list-style-type:none; }
.sidebar li a  { display:inline-block; text-decoration:none; }




/* Main / general in page form styles. */
.input { margin-bottom:0.5em; }
.actions { margin-top:0.5em; margin-bottom:0.5em; }


/*RESPONSIVE*/
/*
@media screen and (max-width: 1920px) {
}

@media screen and (max-width: 1600px) {
}

@media screen and (max-width: 1440px) {
}

@media screen and (max-width: 1366px) {
}

@media screen and (min-width: 1200px) and (max-width: 1280px) {
}

@media screen and (max-width: 1279px) { 
}
*/

@media screen and (max-width: 1023px) {  
  .reputationlinks .reputationbox { display:block; margin-bottom:1em; }
  
  .note-centered { margin:2em 2em; }
}






@media screen and (max-width: 767px) {
  .flex, .flexboxrow { flex-direction:column; }
  
  /* Make all multi column lists turn into single column lists when browser gets narrow. */
  ul.two-column, ol.two-column,
  .two-column-list ul, .two-column-list ol,
  ul.three-column, ol.three-column,
  .three-column-list ul, .three-column-list ol { -webkit-column-count: 1;
    -moz-column-count: 1;
    -ms-column-count: 1;
    -o-column-count: 1;
    column-count: 1; }
  
  /* SubPage-1 (Content with SideBar )
   * MAKE BLOCK and full width.
   * ------------------------------------ */
  .subpagecontent { display:block; }
  .subpagecontent .maincontent { display:block; min-width:50vw; }
  .subpagecontent .sidebar     { display:block; max-width:100vw; width:100%; }
  
  /* Sidebar Form Styles */
  .sidebarform { outline:1px solid silver; padding:15px; }
  
  .sidebarform_image_box {
    max-width:100%; } 
  .sidebarform_image_box img { margin:0 0; width:auto; }
  /* ------------------------------------ 
   *  end: SubPage-1 (Content with SideBar )  */

  /* SubPage-3 (two-column)
   * MAKE BLOCK and full width.
   * ------------------------------------ */
  .subpagecontent .maincontent .leftcolumn  { display:block; vertical-align:top; width:100%; padding-right:auto;}
  .subpagecontent .maincontent .rightcolumn { display:block; vertical-align:top; width:100%; }
  /* ------------------------------------ 
   * end: SubPage-3 (two-column)) */
  
}


/* WAS THIS: @media (max-width: 880px) */
@media (max-width: 1199px){   /* used to be 960 - need to change back?  */

  /* Variables
  ========================================================================== */

     /* Set Mobile Menu Background Color */
        /* Set Link Color */
   /* Set Link Hover Color */
  /* Toggle Button
  ========================================================================== */

  /* GH Added removal of upward pointing MENU arrow (only useful for top-nav horizontal placements.) */
  .header-menu .hs-menu-wrapper.hs-menu-flow-horizontal>ul li.hs-item-has-children ul.hs-menu-children-wrapper li:first-child::before
  {
     display:none;
  }
  
  /* GH: This is the hamburger menu */
  a.mobile-trigger-new {
    display: inline-block !important; /* Hide button on Desktop */
    cursor: pointer; /* Mouse pointer type on hover */
    position: fixed; /*******************************************/
    top: 10px;    /* -52px */      /* Position Button at top right of screen  */
    right: 10px;        /*******************************************/
    width: 45px; /* Button width was 34px */
    height: 45px; /* Button height was auto */      
    padding: 10px 4px; /* was 7px 4px */
    background: white; /* Background color 'transparent'*/
    z-index: 99999999999; /* Z-index to keep button on top of other layers */
    -webkit-transition: background-color 0.2s linear; /* Button color transition effect */
    font-size: 16px;
    font-weight: normal;
    text-align: left;
    text-transform: uppercase;
    -webkit-transition:color .2s ease-in; 
    -moz-transition:color .2s ease-in;
    transition:color .2s ease-in;
    border: 1px solid #333;
  }
  a.mobile-trigger-new span{
    display: inline;
  }
  a.mobile-trigger-new span:before{
    position: absolute;
    content: 'Menu'; /* Change the text on the closed toggle button */
    display: none;
  }
  a.mobile-trigger-new span:after{
    position: relative;
    right: 2px;
    content: 'Close'; /* Change the text on the open toggle button */
    background-color: #000;
    opacity: 0;
    transition: opacity .4s ease-in-out;
    -moz-transition: opacity .4s ease-in-out;
    -webkit-transition: opacity .4s ease-in-out; 
    display: none
  }
  /* Change button when menu is open */
  .mobile-open a.mobile-trigger-new{
    -webkit-transition:background-color 0.2s linear; /* Button color transition effect */
    -moz-transition:background-color 0.2s linear; /* Button color transition effect */
    transition:background-color 0.2s linear; /* Button color transition effect */
    background: transparent; /* Changes button background to be slightly darker than open menu color */  
  }
  .mobile-open a.mobile-trigger-new span:after{
    opacity: 1; 
  }
  /* Toggle Button Icon & Animations
  ========================================================================== */
  a.mobile-trigger-new i {
    display: inline;
    position: relative;
    top: -5px;
    margin-left: 5px;
    -webkit-transition-duration: 0s;
    -webkit-transition-delay: .2s;
    -moz-transition-duration: 0s;
    -moz-transition-delay: .2s;
    transition-duration: 0s;
    transition-delay: .2s;
  }
  a.mobile-trigger-new  i:before, a.mobile-trigger-new i:after {
    position: absolute;
    content: '';
  }
  a.mobile-trigger-new  i, a.mobile-trigger-new  i:before, a.mobile-trigger-new  i:after {
    width: 25px; /* Icon line width */
    height: 3px; /* Icon line height */
    background-color: #333; /* Icon color */
    display: inline-block;
  }
  a.mobile-trigger-new  i:before {
    margin-top: -6px; /* Position top line */
    -webkit-transition-property: margin, -webkit-transform;
    -webkit-transition-duration: .2s;
    -webkit-transition-delay: .2s, 0;
  }
  a.mobile-trigger-new  i:after {
    margin-top: 6px; /* Position bottom line */
    -webkit-transition-property: margin, -webkit-transform;
    -webkit-transition-duration: .2s;
    -webkit-transition-delay: .2s, 0;
  }
  .mobile-open a.mobile-trigger-new i {
    background-color: rgba(0,0,0,0.0);
    -webkit-transition-delay: .2s;
    -webkit-box-shadow: 0px 1px 1px rgba(0, 0, 0, 0);
    -moz-box-shadow:    0px 1px 1px rgba(0, 0, 0, 0);
    box-shadow:         0px 1px 1px rgba(0, 0, 0, 0);
  }
  .mobile-open a.mobile-trigger-new i:before {
    background-color:red; /* Left stroke of X symbol */
    margin-top: 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    -webkit-transition-delay: 0, .2s;
    -webkit-box-shadow: 0px 1px 1px rgba(0, 0, 0, 0);
    -moz-box-shadow:    0px 1px 1px rgba(0, 0, 0, 0);
    box-shadow:         0px 1px 1px rgba(0, 0, 0, 0);
  }
  .mobile-open a.mobile-trigger-new i:after {
    background-color:red; /* Right stroke of X symbol */
    margin-top: 0;
    -webkit-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
    -webkit-transition-delay: 0, .2s;
    -webkit-box-shadow: 0px 1px 1px rgba(0, 0, 0, 0);
    -moz-box-shadow:    0px 1px 1px rgba(0, 0, 0, 0);
    box-shadow:         0px 1px 1px rgba(0, 0, 0, 0);
  }
  /* Child Toggle Button
  ========================================================================== */
  a.child-trigger-new {
    display: block !important; /* Hide button on Desktop */
    cursor: pointer; /* Mouse pointer type on hover */
    position: absolute;
    top: 2px;
    right: 5px;
    width: 55px !important; /* Button width */
    min-width: 55px !important;
    height: 55px !important; /* Button height */  
    padding: 0 !important;
    border: 1px solid #777;
    background-color:#EEE;
   /* border-left: 1px dotted rgba(255, 255, 255, .20);*/
  }
  a.child-trigger-new:hover {
    text-decoration: none;
  }
  /* Child Toggle Button Icon & Animations
  ========================================================================== */
  a.child-trigger-new span {
    position: relative;
    top: 50%; /* Centers icon inside button */
    margin: 0 auto !important;
    -webkit-transition-duration: .2s;
    -moz-transition-duration: .2s;
    transition-duration: .2s;
  }
  a.child-trigger-new span:after {
    position: absolute;
    content: '';
  }
  a.child-trigger-new span, a.child-trigger-new span:after {
    width: 10px; /* Icon line width */
    height: 1px; /* Icon line height */
    background-color: #333; /* Icon color */
    display: block;
  }
  a.child-trigger-new span:after {
    -webkit-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
    -webkit-transition-duration: .2s;
    -moz-transition-duration: .2s;
    transition-duration: .2s;
  }
  a.child-trigger-new.child-open span:after {
    -webkit-transform: rotate(-180deg);
    -ms-transform: rotate(-180deg);
    transform: rotate(-180deg);
    -webkit-transition-duration: .2s;
    -moz-transition-duration: .2s;
    transition-duration: .2s;
  }
  a.child-trigger-new.child-open span {
    -webkit-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg);
    -webkit-transition-duration: .2s;
    -moz-transition-duration: .2s;
    transition-duration: .2s;
  }
  
  /*.header-menu .hs-menu-wrapper.hs-menu-flow-horizontal,*/
  .header-menu .hs-menu-wrapper {
    display: none;
    /*outline:5px solid red;*/
  }
  
  /* GH DEV TEST - added to try and allow mobile phone menu (abs positioned) to scroll when it gets too tall with sub nav links. */
  .header-menu .hs-menu-wrapper {  
    /*outline:3px double purple;*/
    max-height:85vh;
   /* height:85vh;*/
    overflow:auto;
  }
  
  
  .header-menu {
    width: 100% !important;
    text-align: left;
    min-height: 0 !important;
  }
  
  .header-menu .hs-menu-wrapper.hs-menu-flow-horizontal>ul {
    display: block;
  }
  .header-menu .hs-menu-wrapper.hs-menu-flow-horizontal>ul li.hs-menu-depth-1 {
    float: none;
    border-bottom: 1px solid #e7e7e7;
  } 
  
  /* GH Mobile sub menu slightly different bg color for sub nav items POSSIBLE TODO 
   * - NOTE: below is not correct just an example */
  /*  .hs-menu-item.hs-item-has-children.active-branch ul.hs-menu-children-wrapper li a { background-color:#EEE !important; } */
  
  .header-menu .hs-menu-wrapper.hs-menu-flow-horizontal>ul li.hs-item-has-children ul.hs-menu-children-wrapper {
    visibility: visible;
    opacity: 1;
    position: relative;
    width: 100%;
    box-shadow: none;
    padding: 0;
    display:none;
    transition:none;
  }
  .header-menu .hs-menu-wrapper.hs-menu-flow-horizontal>ul li.hs-item-has-children ul.hs-menu-children-wrapper li {
    background-color: #f7f7f7;
    border-bottom: 1px solid #e7e7e7;
  }
  .header-menu .hs-menu-wrapper.hs-menu-flow-horizontal>ul li.hs-item-has-children ul.hs-menu-children-wrapper li:last-child {
    border-bottom: none;
  }
  .header-menu .hs-menu-wrapper.hs-menu-flow-horizontal>ul li a {
    padding: 20px 15px;
  }
  .header-menu .hs-menu-wrapper.hs-menu-flow-horizontal>ul li.hs-item-has-children ul.hs-menu-children-wrapper li a {
    padding: 14px 30px;
  }
  .header-menu .hs-menu-wrapper.hs-menu-flow-horizontal>ul li a {
    width: 100%;
  }
  .header-menu .hs-menu-wrapper.hs-menu-flow-horizontal>ul li:hover>a,
  .header-menu .hs-menu-wrapper.hs-menu-flow-horizontal>ul li>a:focus {
    background-color: black; /* #003da5 */
    color: #fff;
  }
  .header-menu .hs-menu-wrapper.hs-menu-flow-horizontal>ul li:hover>a.child-trigger-new span,
  .header-menu .hs-menu-wrapper.hs-menu-flow-horizontal>ul li:hover>a.child-trigger-new span:after,
  .header-menu .hs-menu-wrapper.hs-menu-flow-horizontal>ul li>a:focus.child-trigger-new span,
  .header-menu .hs-menu-wrapper.hs-menu-flow-horizontal>ul li>a:focus.child-trigger-new span:after
  {
    background-color: #fff;
  }
  .header-menu .hs-menu-wrapper.hs-menu-flow-horizontal>ul li.hs-item-has-children ul.hs-menu-children-wrapper li:first-child a::before {
    display: none;
  }
  .header-menu .hs-menu-wrapper.hs-menu-flow-horizontal>ul li.hs-item-has-children ul.hs-menu-children-wrapper li a:hover {
    background-color: #62707D; /* #62707D is a dark vs of slategray */ /* this is a sub menu link BG color.   #003da5 */
  }
  
}