body {
  background: #fff;
}
.icon {
  height: 50px;
  width: 50px;
  background: #222;
  border-radius: 50%;
}
ul {
    list-style: none;
    padding: 0;
}

.one-column-list{font-size:18px !important;line-height:42px !important;margin-bottom:32px;list-style-type:circle;}
nav hr{border:none;border-top:1px solid rgba(255, 255, 255, 0.3);position:relative;bottom:2px;}
.blog-sidebar hr{border-bottom:1px solid #DDDDDD;margin-top:12px;margin-bottom:12px;}
.has-dropdown{bottom:0;}
.has-dropdown:after{font-family:ElegantIcons;speak:none;font-style:normal;font-weight:400;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;content:"\33";color:#777777;}
.mobile-toggle{display:none;}
.has-dropdown:hover .subnav{display:block;}
nav{
  position: fixed;
  top: 0;/* was 60px */
  left: 0 !important;
  padding:0;
  width: 100%;
  height: 100%;
  height: 70px;
  background: #fff;/*3E8DA8;*/
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  border-top: 1px solid #D8D8D8;
  z-index: 99;
}
.utility-menu23 {
    background: #fff;
    line-height:60px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    height: 1px;
    width: 1px;
    margin: -1px;
    display:flex;
    justify-content:center;
    padding:0;
    /*margin:0;*/
    position: fixed;
    width: 100%;
    top: 1px; 
    z-index: 99;
}
.utility-menu23 .utility-inner span {
    justify-content:center;
    text-align: center;
    padding:2px 15px 20px 15px;
    font-weight:600;
    font-size:15px;
    color:#000;
}
.util-menu23img {
    background: #fff;
    line-height:60px;
    display:flex;
    justify-content:center;
    padding:0;
    margin:0;
    position: relative;
    width: 100%;
    top: 2px; 
    z-index: 99;
}
.util-menu23img .util-inner span {
    justify-content:center;
    text-align: center;
    padding:2px 15px 20px 15px;
    font-weight:600;
    font-size:15px;
    color:#000;
}

nav .navbar{
  height: 100%;
  width: 100%; 
  max-width: 1400px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin:0 auto;
  padding: 0 50px;
}
.navbar .logo a{
  font-size: 30px;
  color: #000;
  text-decoration: none;
  font-weight: 500;
  vertical-align: middle;/* if needed */
}
/*  ========  app page ===========*/
nav .navbar2 {
  height: 100%;
  width: 100%; 
  max-width: 1000px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin:0 auto;
  padding: 0 50px;
}
.navbar2 .logo {
  color: #000;
  text-decoration: none;
  font-weight: 500;
  vertical-align: middle;
  /* margin:0 auto; */
  display: flex;
  justify-content: center;
}

nav .navbar .nav-links{
  line-height: 70px;
  height: 100%;
/* === too much left padding at 921px to 1076px == */
}
nav .navbar .links{
  display: flex;
}
nav .navbar .links li{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  list-style: none;
  padding: 0 14px;
}
nav .navbar .links li a{
  height: 100%;
  text-decoration: none;
  white-space: nowrap;
  color: #6D6D6D;
  font-size: 17px;
  font-weight: 500;
}
.links li:hover .htmlcss-arrow, .links li:hover .js-arrow, .links li:hover .php-arrow, .links li:hover .yin-arrow, .links li:hover .zen-arrow {
  transform: none; 
  }

.bxs-chevron-down {
  font-size:21px;
}
nav .navbar ul {
    display: block;
    list-style-type: disc;
   /* margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0;
    margin-inline-end: 0; */
    margin: 6px 0;
    padding-inline-start: 20px;
    unicode-bidi: isolate;
}
nav .navbar .links li .arrow{
  height: 100%;
  width: 24px;
  line-height: 70px;
  text-align: center;
  display: inline-block;
  color: #727272;
  transition: all 0.3s ease;
}
nav .navbar .links li .sub-menu{
  position: absolute;
  top: 60px; /*40px */
  left: 0;
  line-height: 40px;
  background: #efefef;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  border-radius: 0 0 4px 4px;
  display: none;
  z-index: 2;
}
nav .navbar .links li:hover .htmlCss-sub-menu, nav .navbar .links li:hover .php-sub-menu,
nav .navbar .links li:hover .js-sub-menu, nav .navbar .links li:hover .yin-sub-menu, nav .navbar .links li:hover .zen-sub-menu {
  display: block;
}
.navbar .links li .sub-menu li{
  padding: 0 18px 0 6px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.navbar .links li .sub-menu a{
  color: #3D3D3D;
  font-size: 15px;
  font-weight: 500;
}
.navbar .links li .sub-menu a:hover{
  text-decoration: underline;
  color:#346AC3;
}
.navbar .links li .sub-menu .more-arrow{
  line-height: 40px;
}
.navbar .links li .htmlCss-more-sub-menu{
  /* line-height: 40px; */
}
.navbar .links li .sub-menu .more-sub-menu{
  position: absolute;
  top: 0;
  left: 100%;
  border-radius: 0 4px 4px 4px;
  z-index: 1;
  display: none;
}
.links li .sub-menu .more:hover .more-sub-menu{
  display: block;
  background-color:#C8DCEE;
}
.navbar .search-box, .cta-but{
  position: relative;
   height: 40px;
  width: 40px;
}
.navbar .search-box i, .cta-but i{
  position: absolute;
  height: 100%;
  width: 100%;
  line-height: 40px;
  text-align: center;
  font-size: 22px;
  color: #fff;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}
.navbar .nav-links .sidebar-logo{
  display: none;
}
.navbar .bx-menu{
  display: none;
}
.navbar .bx-mobile {
  font-size:23px;
  font-weight:normal;
}
.button {
  font-size: 20px;
  padding: 8px 20px;
  background: transparent;
  border-radius:5px;
  border:none;
  color: #000;
  cursor: pointer;
  position: relative;
  letter-spacing:2px;
}
.Hdrbtn {
  display: inline-block;
  background-color: #2e6697;
  color: #fff;
  padding: 5px 14px;
  border: 2px solid #2e6697;
  cursor: pointer;
  font-size: 16px;
  font-weight:600;
  border-radius: 6px;
  text-decoration:none;
  text-transform:uppercase; 
  vertical-align: middle; 
    text-align:center;
    display:flex;
    justify-content:center;
}
.Hdrbtn:hover {
  background:transparent;
  border:2px solid #2e6697;
  color:#2e6697;
  text-decoration: none;
}
.Hdrbtn::after {
    content: ""; background: url("../images/chev-rt-white-20.png"); background-repeat: no-repeat; width: 20px;
    height: 20px;
    margin-left: 8px;
    margin-top: 2px;
    padding-left: 5px;
    font-size: 1.75rem;
}
.Hdrbtn:hover::after {
    content: ""; background: url("../images/chev-rt-blue-20.png"); background-repeat: no-repeat; 
}
i.bx-mobile {font-size: 20px;}
i.fa-mobile-phone {
   font-size: 32px;
   font-weight:normal;
   padding-right:10px;
}
span a.phonenum{text-decoration:none;vertical-align: middle;}
.smallcontact {background-color:#efeff2; padding:6px; border-radius:4px;}
.cspace350 {height:350px; width:100%;}
.phonenum {text-decoration: none;}
.ft-center {text-align:center;}
.ft-right {text-align:right;}

.spacer {padding:5px; margin: 10px;}
.spacer1 {padding:15px; margin: 15px;}
.border {border: solid 1px #999 !important;}
.jumbotron {color: #fff; height: 50%; text-align: center; border-radius: none !important;}
.blu {background: #5089a3 !important; opacity: 0.85; }
.hdrpg {background-image: url("images/banner-1.jpg"); background-repeat: no repeat; background-size: cover; opacity: 0.85; }
.jumbotron h1, h2{
    font-size: 225%;
    margin-top: 0.025%;
    background: none;
    margin-bottom: 2%!important;
    font-weight: 700;
}
.btn {font-weight: 600; padding-right:18px; padding-left: 18px; border-radius: 0;}
.button {
    border: 1px solid #ffffff;
    color: #ffffff;
    background-color: #5089a3;
    margin-right: 2%;
    margin-top: 22px !important;
    padding: 10px 30px;
    transition: 0.4s ease;
    text-decoration: none;
}
.button a {text-decoration: none !important;}
.button:hover{
    color: #000000;
    text-decoration: none;
    background-color: #ffffff;
}
.btn-container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
    width: 100vw;
    margin: 0 auto;
    max-width: 100%;
  }
  .btn-box {
    flex: 1 1 auto;
    border: 1px solid #ffffff;
    color: #ffffff;
    background-color: #5089a3;
    margin-right: 2%;
    margin-top: 22px !important;
    padding: 10px 30px;
    transition: 0.4s ease;
    text-decoration: none;
   }
 .btn-box:hover{
    color: #5089a3;
    text-decoration: none;
    background-color: #ffffff;
}
h2 {padding: 10px 0 0 0; margin-top: 5px; margin-bottom: 6px;}
h3 {font-size: 160%;}
h3 {padding: 18px 0 0 0; margin-top: 8px; margin-bottom: 0;}
.row h4 {font-size: 18px; font-weight: 600; padding-top: 10px; margin-top: 6px;}
.heading {margin: 55px auto 15px auto; width: 100dvw; margin-left: calc(50% - 50dvw); padding: 20px;}
.heading h1 {margin-top: 50px; margin-left: 40px; padding-top: 30px; font-size: 26px; font-weight: 400;}
.heading span {text-align: left; padding: 20px 0 10px 40px; }
.heading-title {font-size: 28px; font-weight: 600;}
.pg-topic {font-size: 24px; font-weight: 600;}
.header-copy {font-family: "Lato", sans-serif; font-size: 26px; font-weight: 700; line-height: 32px; padding: 6px 0 0 0; margin-top: 2px; margin-bottom: 2px;}
.jumbotron h3 {font-size: 200%; margin-top: 0.0125%; background: none; margin-bottom: 1%!important; font-weight: 600; padding: 4px 0 0 0;}
.display-5 {font-size: calc(1.475rem + 1.5vw); font-weight: 300; line-height: 1.2;}
.matop {margin-top: 20px; padding-top:20px;}
.keydesc {max-width: 1400px; background-color: #fff; padding: 0 20px; margin: 20px 0; font-family: "Roboto", sans-serif; font-size: 16px; box-sizing: border-box; position: relative; border-left: 5px solid #2e6697; padding-left: 15px; margin-block-start: 1em; margin-block-end: 1em; margin-inline-start: 25px; margin-inline-end: 10px;}
.whodesc {max-width: 1400px; background-color: #fff; padding: 0 20px; margin: 20px 0; font-family: "Roboto", sans-serif; font-size: 16px; box-sizing: border-box; position: relative; margin-block-start: 1em; margin-block-end: 1em; margin-inline-start: 25px; margin-inline-end: 10px;}
.keydesc .title, .whodesc .title {font-size: 22px; padding: 10px;}
.keydesc ul, .whodesc ul {padding-left: 12px; }
.keydesc ul li, .whodesc ul li {list-type: none; list-style: none; line-height: 1.75rem; padding: 5px;}
.keydesc p, .whodesc p {font-size: 15px; padding: 10px; }
.expanded {margin: 15px auto; width: 100dvw; margin-left: calc(50% - 50dvw); padding: 20px;}
.text-white {color:#fff;}
.text-whgrey {color:#e9e9e9;}
.text-grey {color: #c6c7c8;}
.text-dark1 {color:#757575;}
.text-black {color: #242424; }
.blugrey {background-color: #e9eff3 !important;}
.blueet {background-color: #f5f8ff !important;}
.greyblue {background-color: #ebeef7 !important;}
.liteblu {background-color: #ecf2ff;}
.darkblu {background-color: #2e6697;}
.whgrey {background: #fafafa;}
p {font-size: 18px; padding-top: 24px;}
p.elempost {font-size: 17px; padding-top: 10px;}
p.elemnt {font-size: 16px; padding-top: 8px;}
p.quote {font-size: 17px; font-style: italic; padding: 16px 0; max-width: 800px; text-align: center; margin: 0 auto;}
p.semibold {font-size: 16px; line-height: 23px; margin-bottom: 24px; padding-top: 5px; font-weight: 400;}
.font13 {font-size: 0.85rem; }
a {color: #4371bd; text-decoration: none; }
.text-sm {padding: 16px 10px;font-size: 0.925rem; font-style: italic; line-height: 1.25rem;}
.expanded p {padding-left: 32px; border-left: 5px solid #f5a841; text-align: left; padding: 20px 0 10px 32px; }
.expanded p a {text-decoration: underline; }
.expanded p a.nocolor {text-decoration: none; }
.u2 {text-decoration-line: underline; text-decoration-style: double;text-underline-offset: 4px; }
.dotline {font-size: 17px; font-weight: 600; border-bottom: 2px dotted #353535 !important; text-decoration: none; display: inline-block;}
.testimonialborder {border-left: 5px solid #DDDDDD; margin-bottom: 40px;}
.padleft15 {padding-left: 15px;}
button.cta-colo  {
    display: inline-block;
    background: #85bb65;/*77a4c3;*/
    color: #fff;
    border: 2px solid #85bb65;
    padding: 0.425rem 1.675rem;
    cursor: pointer;
    font-size: 1.15rem;
    font-weight: 600;
    border-radius: 1px; /*30px;*/
    text-decoration: none;
    text-transform: uppercase;
    vertical-align: middle;
    margin: 8px auto;
    text-align:center;
    display:flex;
    justify-content:center;
    align-items:center; 
}
button.cta-colo:hover  {
    background: #fff; /*#118c50;*/
    color: #85bb65;/*77a4c3;*/
    border: 2px solid #85bb65; /*#118c50;*/
}
button.cta-colo::after {
    content: ""; background: url("../images/icons-arrow-right-white-30.png"); background-repeat: no-repeat; /* background-position: center; position: absolute;*/ width: 30px; height: 30px; margin-left: 8px; margin-top: 2px;
    padding-left: 5px;
    font-size: 1.75rem;
}
button.cta-colo:hover::after {
  content: ""; background: url("../images/icons-arrow-right-verde-30.png"); background-repeat: no-repeat; width: 30px; height: 30px; margin-left: 8px; margin-top: 2px;
   } 
/* === rounded button ===*/
button.cta-colora2  {
    display: inline-block;
    background: #85bb65;
    color: #fff;
    border: 2px solid #85bb65;
    padding: 7px 24px;
    cursor: pointer;
    font-size: 1.15rem;
    font-weight: 500;
    border-radius: 50px; 
    text-decoration: none;
   /* text-transform: uppercase;*/
    vertical-align: middle;
    margin: 8px auto;
    text-align:center;
    display:flex;
    justify-content:center;
    align-items:center; 
}
button.cta-colora2:hover  {
    background: #fff; 
    color: #85bb65;
    border: 2px solid #85bb65; 
}
button.cta-colora2::after {
    content: ""; background: url("../images/icons-arrow-right-white-21.png"); background-repeat: no-repeat; width: 21px; height: 21px; margin-left: 8px; margin-top: 2px;
    padding-left: 5px;
    font-size: 1.625rem;
}
button.cta-colora2:hover::after {
  content: ""; background: url("../images/icons-arrow-right-verde-21.png"); background-repeat: no-repeat; width: 21px; height: 21px; margin-left: 8px; margin-top: 2px;
   } 

section [class^="container"] {
  padding: 2.25rem 2rem;
}
.shadow-bx {
    box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.14), 0 1px 1px 0 rgba(0, 0, 0, 0.12), 0 1px 2px 0 rgba(0, 0, 0, 0.2);
    border-radius: 0.10em;
}
.agent-image {width: 160px; height: auto; margin-bottom: 8px; taxt-align: center; padding: 6px;}

.popular-list.cards { list-style:none; margin:0; padding:0; border:1px solid #ececf4; border-radius:4px; overflow:hidden; background:#fff; }
.popular-list.cards li + li { border-top:1px solid #ececec; }
.popular-list.cards a{
  display:block; padding:.85rem 1rem; text-decoration:none; color: #171817;
}
.popular-list.cards strong{ display:block; font-weight:700 }
.popular-list.cards small{ display:block; opacity:.75; margin-top:.15rem }
.popular-list.cards a:hover, .popular-list.cards a:focus-visible{
  background:#f9fafc;
}
@media (prefers-color-scheme:dark){
  .popular-list.cards{ background:#0f1116; border-color:#262a33; }
  .popular-list.cards li + li{ border-color:#262a33; }
  .popular-list.cards a:hover{ background:#141821; }
}

/*== TESTIMONIALS == */

#testimonials, #expert {background-color: #ecf2ff; }

section.testimonials .carousel-control-prev,
.carousel-control-next {
  width: 5%;
}

section.testimonials .carousel-control-next-icon, section.testimonials .carousel-control-prev-icon {
    display: inline-block;
    width: 3rem !important;
    height: 3rem !important;
}

section.testimonials h2 {text-align: center;}
section.testimonials .carousel-item p {
  max-width: 80%;
  border-left: 5px solid #f5a841;
  padding-left: 1rem;
  text-align: left;
}
section.testimonials .carousel-item h5 {
  text-align: left;
}
section.testimonials .carousel-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
section.testimonials .carousel.carousel-fade .carousel-item {
  transition: opacity 0.5s;
}

.boxhead {background-color: #16204d; color: #83bffa; text-align: center; padding: 0; width: 100%;}
.boxtext p {font-size: 16px; line-height: 24px; padding-top: 13px;}
.boxtext a {text-decoration: none;}  
.boxtext a::after {content: ""; background: url("../images/icons-arrow-right-blue-20.png"); background-repeat: no-repeat;  
background-position: center; position: absolute; width: 18px; height: 18px; margin-left: 5px; margin-top: 5px;
} 
.bxfocal {font-weight: 700;}
.scrn-text {
    clip: rect(1px, 1px, 1px, 1px);
    position: absolute !important;
}
.smallcontact {
    background-color: #efeff2;
    padding: 6px;
    border-radius: 4px;
}
.saibotchee {display: none;}

#flex-item {margin: 5px; padding: 8px 14px;}

/*==  Blog posts grid ==*/
.grid-container {
  display: grid;
  /* grid-template-columns: 1fr 1fr 1fr 1fr; */
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  grid-template-rows: 1fr;
  grid-column-gap: 40px;
  grid-row-gap: 40px;
  justify-items: stretch;
  align-items: stretch;
  margin-top: 50px;
}
.grid-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  overflow: hidden;
}

.pagination {
  text-align: center;
  margin: 60px 0 0 0;
}

.pagination ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.pagination li {
  display: inline-block;
  font-size: 1.1em;
  font-weight: 600;
  margin: 0 7px;
}

.pagination li.current-page {
  color: #777;
}

.pagination li a {
  color: #0079c1;
  text-decoration: none;
}

.pagination li a:hover {
  color: #333;
}
.blog-grid {
  font-size: 2.25em;
  line-height: 1.2;
  letter-spacing: -1px;
  text-align: center;
  margin: 50px 0 20px 0;
}

/* == places we help == */

h3.places {font-size: 125%; margin: 4px 0 8px 0;}
ul.three-column-list {
    -moz-column-count: 3;
    -moz-column-gap: 10px;
    -webkit-column-count: 3;
    -webkit-column-gap: 10px;
    column-count: 3;
    column-gap: 10px;
    text-align: left;
    list-style-type: circle;
    font-size: 17px;
    line-height: 24px;
    margin-bottom: 24px; 
    margin-left: 25px;
    padding-left: 20px;
}
article {
  position: relative;
  text-align: justify;
  background: #fff;
  border-radius: 2px;
  transition: all 0.15s ease-in-out;
  overflow: hidden; 
  box-shadow: 0 0 15px #bbb;
}

article:hover {
  box-shadow: 0 0 15px #bbb;
}
article h2 {
  font-size: 1.1875em;
  line-height: 1.3;
  letter-spacing: -.33px;
  margin: 0;
  padding: 0 20px;
}
article h3 {
  font-size: 1.0875em !important;
  line-height: 1.3;
  letter-spacing: -.203px;
  margin: 0;
  padding: 0 20px;
  font-weight: 600;
}
.post-date {
  display: block;
  font-size: 0.9em;
  font-weight: 600;
  color: #707070;
  margin: 15px 0;
  padding-left: 20px;
}
article p {
  font-size: 0.95em;
  line-height: 1;
  margin: 0 0 25px 0;
}
article p a.more-link {
  font-weight: 700;
  color: #0079c1;
  text-decoration: none;
  padding-left: 20px;
}
article p a.more-link:hover {
 text-decoration: underline;
}
article p a.more-link::after {content: ""; background: url("../images/icons-arrow-right-blue-20.png"); background-repeat: no-repeat;  
background-position: center; position: absolute; width: 16px; height: 16px; margin-left: 5px; margin-top: 2px;
}
article img {
  display: block;
  max-width: 100%;
  height: auto;
  width: auto\9; /* ie8 */
  margin: 0;
}
article figure {
  margin: 0 0 25px 0;
}

/* ========  THREE COLUMN  ============ */
.flex-item {
  margin: 5px;
  padding: 8px 14px;
}
.flex-item .three-columnCL p{
  text-align: left; 
  font-family: arial, helvetica, sans-serif;
  font-size:15px;
  line-height:21px;
  margin: 10px 0;
}
.three-columnCL {
    display: flex;
    align-items: stretch;
    padding:10px;
    margin:20px !important;
}
.three-columnCL div {
	flex: 1;
	border: none;
	display: flex;
	flex-direction: column-reverse;
	justify-content: flex-end;
	text-align: center;
    padding:12px;
}
.three-columnCL img {
  width:100%;
  max-width:267px;
  max-height: 200px;
  margin:10px auto;
}
h2.event {
  font-size: 26px !important;
}
.flex-item .three-columnCL h3.event {
  font-size: 17px !important;
  font-family: Helvetica, sans-serif;
  letter-spacing: 0.75px;
  line-height: 24px;
  font-weight: 600;
}
.Pagebtn {
  display: inline-block;
  background-color: #fff;
  color: #f77a22;
  padding: 12px 24px;
  border: 1px solid #f77a22;
  cursor: pointer;
  font-size: 18px;
  font-weight:700;
  border-radius: 4px;
  text-decoration:none;
}

.Pagebtn:hover {
  background:#f77a22;
  color:#fff;
}
@media only screen and (min-width:620px) {
 .two-columnCL img, .one-columnCL img {
  width:75%;
  max-width:300px;}    
}

/* ================================= */

hr {
  background-color: #fff;
  margin: 0 0 25px 0;
  max-width: 100%;
  border-width: 0;
}
hr.s9 {
  height:6px;
  margin-top: 40px;
  /* border-top:1px solid #646466;*/
  border-bottom:2px solid #646466;
}
.animtedd {
    margin: 0 .2em;
    padding: 0 1em;
    cursor: pointer;
    background: #fff;
    text-decoration: none;
    color: #666;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    -webkit-font-smoothing: antialiased;
}
.footer-container .fa-stack{font-size:60%;}
.footer-container .fa-inverse{color:#282828;}
.footer-container .social-icons li{margin-right:5px;}
.footer-container .col-md-4 h4 {font-size: 14px; font-weight: 400;margin-bottom:10px; line-height: 18px;}
footer.short {font-size: 14px; color: #c6c7c8;}
footer.bg-secondary-1 {background-color: #2c3e50 !important;}
footer {padding-top: 30px; padding-bottom: 20px; display: block;}
footer a {text-decoration: none; }
footer a:hover {text-decoration: underline; color: #e9e9e9;}

/* ==========  Table  ========== */

.table-container {
 background-color: #fff;
 padding: 15px;
 /* border: 1px solid #ccc; */
 box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.5);
}

.responsive-table {
  width: 100%;
  margin-bottom: 1.5em;
  padding: 20px;
  border: 0;
}
.responsive-table thead {
  position: absolute;
  clip: rect(1px 1px 1px 1px);
  /* IE6, IE7 */
  clip: rect(1px, 1px, 1px, 1px);
  padding: 0;
  border: 0;
  height: 1px;
  width: 1px;
  overflow: hidden;
}
.responsive-table thead th {
  background-color: #1d96b2;
  font-weight: normal;
  text-align: center;
  color: white;
}
.responsive-table thead th:first-of-type {
  text-align: left;
}
.responsive-table tbody,
.responsive-table tr,
.responsive-table th,
.responsive-table td {
  display: block;
  padding: 0;
  text-align: left;
  white-space: normal;
}
.responsive-table th,
.responsive-table td {
  padding: .5em;
  vertical-align: middle;
}
.responsive-table caption {
  margin-bottom: 1em;
  font-size: 1em;
  font-weight: bold;
  text-align: center;
}
.responsive-table tfoot {
  font-size: .8em;
  font-style: italic;
}
.responsive-table tbody tr {
  margin-bottom: 1em;
 /* border: 2px solid #1d96b2;*/
}
.responsive-table tbody tr:last-of-type {
  margin-bottom: 0;
}
.responsive-table tbody th[scope="row"] {
  background-color: #1d96b2;
  color: white;
}
.responsive-table tbody td[data-type=currency] {
  text-align: right;
}
.responsive-table tbody td[data-title]:before {
  content: attr(data-title);
  float: left;
  font-size: .8em;
  color: rgba(94, 93, 82, 0.75);
}
.responsive-table tbody td {
  text-align: right;
}

@media (min-width: 52em) {
  .responsive-table {
    font-size: .9em;
  }
  .responsive-table thead {
    position: relative;
    clip: auto;
    height: auto;
    width: auto;
    overflow: auto;
  }
  .responsive-table tr {
    display: table-row;
  }
  .responsive-table th,
  .responsive-table td {
    display: table-cell;
    padding: .5em;
  }

  .responsive-table caption {
    font-size: 1.5em;
    caption-side: top !important;
  }
  .responsive-table tbody {
    display: table-row-group;
  }
  .responsive-table tbody tr {
    display: table-row;
  }
  .responsive-table tbody tr:nth-of-type(even) {
    background-color: rgba(220, 233, 253, 0.7) ; /* (94, 93, 82, 0.1); */
  }
  .responsive-table tbody th[scope="row"] {
    background-color: transparent;
    color: #5e5d52;
    text-align: left;
  }
  .responsive-table tbody td {
    text-align: center;
  }
  .responsive-table tbody td[data-title]:before {
    content: none;
    font-size: .8em !important;
    color: rgba(94, 93, 82, 0.75);
  }
}
@media (min-width: 62em) {
  .responsive-table {
    font-size: 1em;
  }
  .responsive-table th,
  .responsive-table td {
    padding: .75em .5em;
  }
  .responsive-table tfoot {
    font-size: .9em;
  }
}

@media (min-width: 75em) {
  .responsive-table th,
  .responsive-table td {
    padding: .75em;
  }
}
/* ======================== */
.lca-table-container {
    width: 100%;
    overflow-x: auto;
}
.lca-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
   font-family: Arial, Helvetica, sans-serif;
}
.lca-table th,
.lca-table td {
    padding: 12px;
    text-align: center;
    vertical-align: middle;
    border: 1px solid #ddd;
}

.lca-table th {
    background-color: #f2f2f2;
    font-weight: bold;
}
.lca-table tr:nth-child(even) {
    background-color: #f9f9f9;
}

.table-container {
    width: 100%;
    overflow-x: auto;
}
.lca-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
}
.lca-table th,
.lca-table td {
    padding: 12px;
    text-align: center;
    border: 1px solid #ddd;
    vertical-align: middle;
}
.lca-table th {
    background-color: #f2f2f2;
    font-weight: bold;
}
.lca-table tr:nth-child(even) {
    background-color: #f9f9f9;
}
.lca-table tr.blugrey {
  background-color: #e9eff3 !important;
}
.vertical-cell {
    padding: 6px 0;
    border-bottom: 1px solid #ddd;
    display: flex;
    align-items: center;
    justify-content: center;
}
.vertical-cell:last-child {
    border-bottom: none;
}
td:nth-child(2),
td:nth-child(3) {
    padding: 0;
}

/* ==== product borrowers type ================*/

ul.prodbrwrs {
  margin: 20px 2px; font-size: 16px; font-family: 'Lato', sans-serif;
  list-style: none;
  display: flex;
  flex-flow: column wrap;
  height: 16em;
}

ul.prodbrwrs li {
  padding: .0.50rem 1rem;
  margin: 2px;
  background-color: #fff;
  list-style-type: none;
  width: 100%;
  max-width: 350px;
} 
ul.prodbrwrs li:before {
content: '\2713'; display: inline-block; position: relative; top: -2px; width: 18px; height: 18px; margin-right: 12px; padding: 2px; font-size: 14px; font-weight: 900; font-family: Arial, Helvetica, sans; line-height: 12px; color: #fff; background-color: #008000; border: 2px solid #008000; border-radius: 50%; text-align: center;
}


/* ====== table investment property  ============*/
.rate_container{border:1px solid #E3E3E3;}
.myrate{font-size:17px;font-weight:900;}
.rate_header h2{text-align:center;color:#FFFFFF;font-weight:500;font-size:18px;}
.rate_container{border:1px solid #e3e3e3}
.line_even{background-color:#f1f3f6;border:1px solid #e3e3e3;border-top:none;padding:15px;font-size:12pt;}
.line_odd{background-color:#fff;border:1px solid #e3e3e3;border-top:none;padding:15px;font-size:12pt;text-align:center;}
.line_even td, .line_odd td{border:1px solid #e3e3e3;border-top:none;padding:15px;font-size:12pt;text-align:center;}
.ratestable{padding:5px;width:100%;}
/* ==== added 2/25-23 === */
 table, td, th { border: 1px solid #b5b4b4; border-collapse: collapse; padding: 5px; margin-top: 10px; text-align: center; font-family: 'Poppins', sans-serif;} 
.tableTitle {background:#2e6697; font-size:20px;color:#fff;}
.tableTitlecon {background:#ffaa33;color:#fff;font-size:18px;}
.tableTitlenonq {background:#915F6D;color:#fff;font-size:18px;} 
.tableTitleflip {background:#46898d;color:#fff;font-size:18px;}
.tableTitlepriv {background:#4f7942;color:#fff;font-size:18px;}
.tableItal {font-size:11px;font-style:italic; padding:3px;}
/* =========  table for loan products  bridge ============*/
table.proddesc {
 width: 100%;
 font-family: Helvetica, arial, sans-serif;
 border-collapse: collapse;
}
table.proddesc thead tr {
  background: #002868;
}
table.proddesc thead tr.Vertical {
}
table.proddesc thead tr h1,
table.proddesc thead tr h2,
table.proddesc thead tr .h1,
table.proddesc thead tr .h2,
table.proddesc thead tr h3,
table.proddesc thead tr .h3,
table.proddesc thead tr h4,
table.proddesc thead tr .h4 {
  color: #151515;
}
table.proddesc thead tr th {color: #f3ebeb;
 font-size: 14px;}
table.proddesc thead tr a {
  color: #0075b0;
}
table.proddesc thead tr a:hover,
table.proddesc thead tr a:focus {
  color: white;
}
table.proddesc tbody tr:nth-of-type(even) {
  background: #e2e2e2;
}
table.proddesc td,
table.proddesc th {
  padding: 7px 12px;
  text-align: center;
  font-size: 14px !important;
}
table.proddesc td a,
table.proddesc th a {
  font-weight: bold;
  color: #00918a !important;
}
table.proddesc td a:hover,
table.proddesc th a:hover,
table.proddesc td a:focus,
table.proddesc th a:focus {
  color: white !important;
}
table.proddesc th {
  font-weight: 700;
  font-size: 0.8rem;
  line-height: 1.4;
  font-family: Arial, Helvetica, sans-serif;
  margin: 0;
  max-width: 800px;
  line-height: inherit;
  color: #151515;
}
table.proddesc th.PrimaryFont {
  text-transform: none;
}
.chart-caption {font-size: .90625rem; font-style: italic; padding: 10px; margin: 0 auto; }



/* =================== FAQs ====================== */

.transition, ul.faqs-products li i:before, ul.faqs-products li i:after, ul.faqs-products p {
  transition: all 0.25s ease-in-out;
}

.flipIn, ul.faqs-products li, h1 {
  animation: flipdown 0.5s ease both;
}

.no-select, ul.faqs-products h2 {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.faqs-products h2 {
  color: #0137a1;
}

.faqs-products h2 {
  font-size: 24px;
  line-height: 30px;
  font-weight: 300;
  letter-spacing: 1px;
  padding: 18px 0 2px 0;
  display: block;
  background-color: #fff;
  margin: 0;
  cursor: pointer;
}
ul.faqs-products h3 {
  font-size: 17px !important;
  line-height: 22px;
  font-weight: 600;
  letter-spacing: 1px;
  display: block;
  background-color: #fff;
  margin: 0;
  padding: 8px 0 2px 0;
  cursor: pointer;
}

ul.faqs-products p {
  color: rgba(48, 69, 92, 0.8);
  font-size: 17px;
  line-height: 26px;
  letter-spacing: 1px;
  position: relative;
  overflow: hidden;
  max-height: 800px;
  opacity: 1;
  transform: translate(0, 0);
  margin: 10px 0 5px 0;
  z-index: 2;
}

ul.faqs-products {
  list-style: none;
  perspective: 900;
  padding: 0;
  margin: 0;
}
ul.faqs-products li {
  position: relative;
  padding: 0;
  margin: 0;
 /* padding-bottom: 4px;*/
  padding-top: 6px;
  border-top: 1px dotted #dedede;
}
ul.faqs-products li:nth-of-type(1) {
  animation-delay: 0.5s;
}
ul.faqs-products li:nth-of-type(2) {
  animation-delay: 0.75s;
}
ul.faqs-products li:nth-of-type(3) {
  animation-delay: 1s;
}
ul.faqs-products li:last-of-type {
  padding-bottom: 0;
}
ul.faqs-products li i {
  position: absolute;
  transform: translate(-6px, 0);
  margin-top: 16px;
  right: 0;
}
ul.faqs-products li i:before, ul.faqs-products li i:after {
  content: "";
  position: absolute;
  background-color: #0137a1;
  width: 2px;
  height: 9px;
}
ul.faqs-products li i:before {
  transform: translate(-2px, 0) rotate(45deg);
}
ul.faqs-products li i:after {
  transform: translate(2px, 0) rotate(-45deg);
}
ul.faqs-products li input[type=checkbox] {
  position: absolute;
  cursor: pointer;
  width: 100%;
  height: 100%;
  z-index: 1;
  opacity: 0;
}
ul.faqs-products li input[type=checkbox]:checked ~ p {
  margin-top: 0;
  max-height: 0;
  opacity: 0;
  transform: translate(0, 50%);
}
ul.faqs-products li input[type=checkbox]:checked ~ i:before {
  transform: translate(2px, 0) rotate(45deg);
}
ul.faqs-products li input[type=checkbox]:checked ~ i:after {
  transform: translate(-2px, 0) rotate(-45deg);
}



@media only screen and (max-width: 1076px) and (min-width: 921px) {
 .Hdrbtn {
  display: none;
  width: 1px;
  height: 1px;
  background-color: transparent;
  color: #fff;
    }
}
@media screen and (min-width: 1024px) {
  section [class^="container"] {padding: 3rem;}
  .grid-container {grid-template-columns: 1fr 1fr; } 
}

@media (max-width: 920px) {
  nav .navbar{
    max-width: 100%;
    padding: 0 20px;
  }
  nav .navbar .logo a{
    font-size: 27px;
  }
  nav .navbar .nav-links{
    position: fixed;
    top: 0;
    left: -100%;
    display: block;
    max-width: 220px;
    width: 100%;
    background:  #efefef;
    line-height: 40px;
    padding: 8px;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    transition: all 0.5s ease;
    z-index: 1000;
  }
  nav .navbar .links li{
    padding: 0 10px;
    white-space: nowrap;
  }
  nav .navbar .links li a{
    font-size: 15px;
  }
}
@media (max-width: 800px){
  nav{
  top: 0;
  border-top: none;
  }
  .navbar .bx-menu{
    display: block;
  }
  nav .navbar .nav-links{
    position: fixed;
    top: 0;
    left: -100%;
    display: block;
    max-width: 260px;
    width: 100%;
    background-color:  #f4f3f3;/* efefef;*/
    line-height: 40px;
    padding: 20px;
    padding-left: 15px;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    transition: all 0.5s ease;
    z-index: 1000;
  }
  .navbar .nav-links .sidebar-logo{
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .sidebar-logo .logo-name{
    font-size: 25px;
    color: #000;
  }
    .sidebar-logo  i,
    .navbar .bx-menu{
      font-size: 35px;
      color: #000;
      cursor: pointer;
    }
  nav .navbar .links{
    display: block;
    margin-top: 20px;
  }
  nav .navbar .links li .arrow{
    line-height: 40px;
  }
nav .navbar .links li{
    display: block;
  }
nav .navbar .links li .sub-menu{
  position: relative;
  top: 0;
  box-shadow: none;
  display: none;
}
nav .navbar .links li .sub-menu li{
  border-bottom: none;
}
.navbar .links li .sub-menu .more-sub-menu{
  display: none;
  position: relative;
  left: 0;
}
.navbar .links li .sub-menu .more-sub-menu li{
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.links li:hover .htmlcss-arrow, .links li:hover .js-arrow, 
    .links li:hover .php-arrow, .links li:hover .yin-arrow, .links li:hover .zen-arrow {
  transform: rotate(0deg);
  }
  .navbar .links li .sub-menu .more-sub-menu{
    display: none;
  }
  .navbar .links li .sub-menu .more span{
    /* background: red; */
    display: flex;
    align-items: center;
  }
  .links li .sub-menu .more:hover .more-sub-menu{
    display: none;
  }
   nav .navbar .links li:hover .htmlCss-sub-menu, nav .navbar .links li:hover .js-sub-menu, nav .navbar .links li:hover .php-sub-menu, nav .navbar .links li:hover .yin-sub-menu, nav .navbar .links li:hover .zen-sub-menu {
    display: none;
  }
  .navbar .nav-links.show1 .links .htmlCss-sub-menu,
  .navbar .nav-links.show2 .links .js-sub-menu,
  .navbar .nav-links.show3 .links .php-sub-menu,  
  .navbar .nav-links.show4 .links .yin-sub-menu, 
  .navbar .nav-links.show5 .links .zen-sub-menu {
      display: block;
    }
    .navbar .nav-links.show1 .links .htmlcss-arrow, 
    .navbar .nav-links.show2 .links .js-arrow,  
    .navbar .nav-links.show3 .links .php-arrow, 
    .navbar .nav-links.show4 .links .yin-arrow,  
    .navbar .nav-links.show5 .links .zen-arrow  {
        transform: rotate(180deg);
}
    .navbar .nav-links.show2 .links .more-arrow{
      transform: rotate(90deg);
    }
.utility-menu23 {
  overflow: hidden; 
  clip: rect(0 0 0 0); 
  height: 1px; width: 1px; 
  margin: -1px; padding: 0; border: 0;
    }
}
.ti-mobile, .ti-email {font-size:16px; }
@media (max-width:768px) {
ul.prodbrwrs {display: flex; flex-direction: row; height: auto;}
ul.prodbrwrs li {width: 100%; margin: 4px auto;}
.ft-left {text-align:center;}
.ft-right {text-align:center;}
}
 .grid-container {
    grid-template-columns: 1fr; 
    max-width: 80%;
    margin: 0 auto;
    padding: 5px 30px;
  }
  article img {
  display: block;
  max-width: 95%;
  margin: 0 auto;
  padding: 10px;
}
  .pagination li {
    font-size: 1em;
    margin: 0 5px;
  }
  ul.three-column-list {
    padding-left: 4px;
   }
}

@media only screen and (max-width:679px) {
ul.faqs-products h3 {
  font-size: 16px !important;
  line-height: 20px;
  padding: 4px;
  cursor: pointer;
  max-width: 90%;
}

ul.faqs-products p {
  font-size: 15px;
  line-height: 21px;
   }
}

@keyframes flipdown {
  0% {
    opacity: 0;
    transform-origin: top center;
    transform: rotateX(-90deg);
  }
  5% {
    opacity: 1;
  }
  80% {
    transform: rotateX(8deg);
  }
  83% {
    transform: rotateX(6deg);
  }
  92% {
    transform: rotateX(-3deg);
  }
  100% {
    transform-origin: top center;
    transform: rotateX(0deg);
  }
} 
@media (max-width: 640px) {
  .two-column-pg-list li {
    width: 100%;
  }
}
@media screen and (max-width: 620px) {
  .btn-box {
   width: 98%;
   font-size: 1.1rem;
  }
  button.cta-colo  {
    border: 2px solid #fff;
    font-size: 1.05rem;
    padding: 0.275rem 1.25rem;
   }
   .heading h1 {margin-top: 50px; margin-left: 40px; padding-top: 30px; font-size: 22px;}
   .container h3 {font-size: 145%!important;}
   .container h3.display-5 {font-size: calc(1.375rem + 1.75vw) !important; font-weight: 400;}
   .keydesc .title {font-size: 19px;}
   .keydesc ul, .whodesc ul {padding-left: 3px; }
   .keydesc ul li, .whodesc ul li {padding-left: 2px;}
   .keydesc p, .whodesc p {font-size: 14px; padding-left: 5px; }
}
@media screen and (max-width: 600px) {
    .lca-table {
        font-size: 14px;
    }
    .lca-table th,
    .lca-table td {
        padding: 8px;
    }
    /* .vertical-cell {
        padding: 4px 0;
    } */
   .two-columnCL, .two-columnCL.reverse {
    flex-direction:column;
    border: solid 1px #ccc;
    border-radius: 5px;
    box-shadow: 0 1px 2px 0 rgb(48 48 48 / 30%), 0 1px 3px 1px rgb(48 48 48 / 15%);
      }
 .three-columnCL {
    flex-direction:column;
    border-radius: 5px;
    border: solid 1px #ccc;
    box-shadow: 0 1px 2px 0 rgb(48 48 48 / 30%), 0 1px 3px 1px rgb(48 48 48 / 15%); 
    padding:10px;
    margin:20px;
    }
 .three-columnCL div  {
    flex-direction:column;
    padding:25px 10px;
    }
.two-columnCL h2, #flex-item three-columnCL h2 {
  font-size:18px;}
  }

@media only screen and (max-width: 599px) {
  table.proddesc th {
    display: none;
  }
  table.proddesc td {
    position: relative;
    display: block; 
    padding-left: 110px;
  }
  table.proddesc td:before {
    position: absolute;
    top: 8px;
    left: 10px;
    display: block;
    content: attr(data-label) ": ";
    font-weight: 700;
  }
  table.proddesc tbody tr {
    padding: 20px 0;
    display: block;
  }
  table.proddesc:nth-of-type(odd) {
    background: #9fc7e8;
  }
}
@media (max-width:460px) {
.navbar .search-box i, .cta-but i{
  position: absolute;
  height: 100%;
  width: 100%;
  line-height: 40px;
  text-align: center;
  font-size: 22px;
}
.navbar .logo a {font-size: 24px;}
.navbar .logo img {width: 127px !important; height: 45px;}
.button {font-size: 17px; padding: 6px 15px;}
.Hdrbtn {padding: 4px 8px; font-size: 14px; font-weight:600;} 
i.fa-mobile-phone {font-size:20px;font-weight:normal;padding-right:3px;}
.cspace350 {height:30px; width:100%;}
.btn-primary.btn-filled {margin:0 auto!important; text-align:center;}
}
@media (max-width:420px){
  nav .navbar .nav-links {width: 100%; padding-left: 0;} 
  .nav-links .links, nav ul {padding-left: 0;}
  ul.links { padding-left: 0 !important; text-align:left;}
}
@media screen and (max-width: 400px) {
    .lca-table {font-size: 12px;}
    .lca-table th,.lca-table td {padding: 6px;}
   /* .vertical-cell {padding: 3px 0;}  */
}
@media only screen and (max-width:380px){
 span a.phonenum {font-size:12px !important;}
}

header.title2 {
    height: 75px;
    position: relative;
    overflow: hidden;
    background: #024E68;
}
blockquote.testimonials {
    font-size: 15px;
    font-weight: 300;
    color: #333333;
    font-style: italic;
    line-height: 24px;
    padding: 0;
    border: none;
    margin-bottom: 14px;
}
.toc2
 {
    position: sticky;
    top: 100px;
    align-self: flex-start;
    flex: 1;
    min-width: 275px;
    max-width: 340px;
    background: #99D7C1;
    padding: 20px;
    border-radius: 8px;
    height: fit-content;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
}
.toc2 h3 {
    font-size: 22px;
    margin: 0 0 10px 0;
    padding: 0 3px 5px 3px;
    font-weight: 900;
}
.toc2 ul {
    list-style: none;
    padding: 0;
}
.toc2 ul li {
    margin-bottom: 16px;
}
.toc2 ul li a {
    text-decoration: none;
    color: #363e39;
    font-weight: 400;
    font-family: Ppneuemontreal,Arial,sans-serif;
    font-size: 14px;
    transition: color 0.3s ease;
}
.toc2 ul li a:hover{color:#74C97F;}
.toc2 ul li.active{font-weight:800;border-left:4px solid #50BA4F;padding-left:10px;}
.toc2 ul li.active a{color:#292828!important;font-weight:700;}
.toc-container {border-top:1px solid #eaeaea;border-bottom:1px solid #eaeaea;margin:.1250rem 0;padding:.1250rem 0;}
.toc-header {display:flex;align-items:center;gap:20px;cursor:pointer;padding:.375rem 0;}
.toc-header h2 {font-weight:400;font-size:24px;}
.toc-arrow {transition:transform 0.3s ease;font-size:36px;padding-top:15px;}
.toc-content {max-height:0;overflow:hidden;transition:max-height 0.3s ease-out;}.toc-content.open{max-height:500px;}
.toc-list {list-style:none;padding-left:0;}
.toc-list li{margin:1rem 0;text-align:left;}
.toc-list a{color:#333;text-decoration:none;font-size:1.1rem;font-weight:500;}
.toc-list a:hover{color:#ff5722;}
[id]:target::before {
  content: "";
  display: block;
  height: 60px;      
  margin-top: -40px;
}
.two-column-pg-list {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

.two-column-pg-list li {
  width: calc(50% - 0.5rem); 
  font-size: 1rem;
  line-height: 1.6;
  padding-top: 8px;
}
#expenseFactor {
  -webkit-appearance: none;
  height: 2px;
  background: #ddd;
  border-radius: 5px;
  outline: none;
}

/* Webkit browsers (Chrome, Safari) */
#expenseFactor::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  height: 32px;
  width: 32px;
  border-radius: 50%;
  background: #4CAF50;
  cursor: pointer;
  border: 2px solid #fff;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

/* Firefox */
#expenseFactor::-moz-range-thumb {
  height: 25px;
  width: 25px;
  border-radius: 50%;
  background: #4CAF50;
  cursor: pointer;
  border: 2px solid #fff;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

    .calculator input {
      padding: 8px;
      margin: 5px 0;
      width: 70%;
    }
    .calculator label {
      font-weight: bold;
      display: block;
      margin-top: 10px;
    }
    .calculator-result {
      font-size: 1.2em;
      font-weight: bold;
      color: #155724;
      margin-top: 10px;
    }

 /*  =============  new fixes horizon width media screens ======= */

@media (max-width: 920px) {
  nav .navbar {
    max-width: 100%;
    padding: 0 15px;
    overflow-x: hidden;
    box-sizing: border-box;
  }
}

@media (max-width: 800px) {
  nav .navbar .nav-links {
    max-width: 260px;
    width: 100%;
    padding-left: 10px;
    padding-right: 15px;
    box-sizing: border-box;
    overflow-x: hidden;
  }
}

@media (max-width: 768px) {
  body, html {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }
  body::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
  }
  
  body {
    -ms-overflow-style: none !important;  
    scrollbar-width: none !important;     
    -webkit-overflow-scrolling: touch !important;
  }
  
  html {
    -ms-overflow-style: none !important;
    scrollbar-width: none !important;
  }
  
  html, body {
    max-width: 100vw !important;
    overflow-x: hidden !important;
    position: relative !important;
  }
  
  .btn-container {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    box-sizing: border-box !important;
  }
  
  .heading {
   /* width: 100% !important;
    margin-left: 0 !important;
    padding-left: 15px !important;
    padding-right: 15px !important; */
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }
  
  .expanded {
    width: 100% !important;
    margin-left: 0 !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }
  
  .expanded p {
    padding-left: 15px !important;
    margin-left: 0 !important;
    box-sizing: border-box !important;
  }
  
  .grid-container {
    max-width: 95%;
    padding-left: 15px;
    padding-right: 15px;
    overflow-x: hidden;
    box-sizing: border-box;
  }
  
  .container, [class*="container"] {
    max-width: 100% !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }
  
  table[border], .responsive-table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  
  .table-responsive {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

@media (max-width: 640px) {
  .two-column-pg-list li {
    width: 100%;
    padding-right: 10px;
    box-sizing: border-box;
  }
}

@media (max-width: 620px) {
  .btn-box {
    width: 100%;
    margin-right: 1%;
    box-sizing: border-box;
  }
  
  .heading h1 {
    margin-left: 20px;
  }
  
  .keydesc, .whodesc {
    margin-inline-start: 15px;
    margin-inline-end: 5px;
    padding-left: 15px;
    padding-right: 15px;
    overflow-x: hidden;
    box-sizing: border-box;
  }
}

@media (max-width: 600px) {
  .lca-table {
    overflow-x: auto;
    display: block;
  }
  
  .table-container, .lca-table-container {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  
  .two-columnCL, .two-columnCL.reverse {
    margin-left: 10px;
    margin-right: 10px;
    padding-left: 10px;
    padding-right: 10px;
    overflow-x: hidden;
  }
  
  .three-columnCL {
    margin-left: 10px;
    margin-right: 10px;
    padding-left: 10px;
    padding-right: 10px;
    overflow-x: hidden;
  }
}

@media (max-width: 599px) {
  table.proddesc {
    overflow-x: auto;
    display: block;
  }
  
  table.proddesc td {
    padding-right: 10px;
    box-sizing: border-box;
  }
  
  table.proddesc tbody tr {
    overflow-x: hidden;
  }
}

@media (max-width: 460px) {
  .navbar .logo img {
    width: 120px !important;
  }
}

@media (max-width: 420px) {
  nav .navbar .nav-links {
    width: 100%;
    padding-left: 0;
    padding-right: 5px;
    box-sizing: border-box;
  }
  
  .nav-links .links, nav ul {
    padding-left: 0;
    margin-left: 0;
  }
  
  ul.links {
    padding-left: 0 !important;
  }
}

@media (max-width: 400px) {
  .keydesc, .whodesc {
    padding-left: 8px;
    padding-right: 8px;
  }
  
  .heading h1 {
    margin-left: 10px;
  }
}

@media (max-width: 380px) {
  * {
    max-width: 100vw !important;
    box-sizing: border-box !important;
  }
  
  body, html, nav, header, main, section, article, div {
    max-width: calc(100vw - 1px) !important;
    overflow-x: hidden !important;
  }
}