:root {
    --cta-background: #1F8574;
}

body {
  font-family: "San Francisco" !important;
  background-color: #fff !important;
  overflow-x: hidden;
}

pre {
  color:  black;
}

 hr {
  border-top: 1px #ccc solid;
}

header > div > nav {
  padding-bottom: 0 !important;
  padding-top: 1rem !important;
  margin: 10px 0 0 0;
}

header div nav div div ul {
  margin-block-start: 0 !important;
  margin-block-end: 0 !important;
  margin-right: 0 !important;
}

header div nav div div ul li a {
  color: #406694 !important;
  font-weight: 400;
}

header div nav div div ul li a:hover,
header div nav div div ul li a:active,
header div nav div div ul li a:focus {
  color: #2a4567 !important;
}

header.home > div > div {
  text-align: left !important;
}
header.home > a.logo-header {
  display: block;
  position: absolute;
  width: 175px;
  height: 64px;
  margin: 25px 0 0 45px;
  z-index: 10;
}

header.home > div > div > h1 {
  font-size: 5.5rem !important;
  font-weight: 200 !important;
  color: #252729 !important;
  letter-spacing: -2px;
  margin: 170px 0 0 20%;
  display: inline-block;
}

header.home > div > div > h1 > strong {
  display: block;
}

@media all and (max-width: 800px) {
  header.home > div > div > h1 {
    font-size: 3.0em !important;
  }

  header.home > div > div > h2 {
    font-size: 1.75em !important;
  }
}

@media all and (max-width: 600px) {
  header.home > div > div > h1 {
    font-size: 2.5em !important;
  }

  header.home > div > div > h2 {
    font-size: 1.25em !important;
  }
}

.header-wrapper {
  background: rgb(255,255,255);
  background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(252,252,252,1) 100%);
}

header.home > div {
  padding-bottom: 0;
}

header.home > div {
  background-image: url('/images/logo-healthcare-data-insight-doc.png');
  background-color: transparent;
  background-position: 40px 25px;
  /* background-position: 40px 20px; */
  background-repeat: no-repeat;
  /* background-size: 331px 121px; */
  background-size: 290px 106px;
  /* background-size: 200px 73px; */
}

header.home > div > div {
  background-image: url('/images/hero-laptop-diag.png');
  background-size: 800px 649px;
  /* w: 1972
  h: 649 */
  background-position: right bottom;
  background-repeat: no-repeat;
  /* width: 100%; */
  width: 100%;
  height: 649px;
  display: inline-block;
  text-align: right !important;
  border-bottom: 1px #ccc solid;
}



header.home > div > div > h1 {
  font-weight: 200 !important;
  color: #252729 !important;
  letter-spacing: -2px;
  margin: 170px 0 0 0;
  position: relative;
  /* right: -50%; */
  display: inline-block;
}

@media all and (min-width: 1500px) {
  header.home > div > div > h1 {
    font-size: 5.5rem !important;
    margin: 170px 0 0 0;
    padding: 0 35% 0 0;
  } 
}

@media all and (min-width: 1421px) and (max-width: 1499px) {
  header.home > div > div > h1 {
    font-size: 5.0rem !important;
    margin: 170px 0 0 0;
    padding: 0 40% 0 0;
  } 
}

@media all and (min-width: 1221px) and (max-width: 1420px) {
  header.home > div > div > h1 {
    font-size: 4.5rem !important;
    margin: 170px 0 0 0;
    padding: 0 45% 0 0;
  } 
}

@media all and (min-width: 1101px) and (max-width: 1220px) {
  header.home > div > div > h1 {
    font-size: 4.0rem !important;
    margin: 170px 0 0 0;
    padding: 0 50% 0 0;
  } 
}

@media all and (min-width: 990px) and (max-width: 1100px) {
  header.home > div > div > h1 {
    font-size: 3.5rem !important;
    margin: 170px 0 0 0;
    padding: 0 55% 0 0;
  } 
}

@media all and (min-width: 961px) and (max-width: 989px) {

  header.home > div > div > h1 {
    font-size: 3.25rem !important;
    margin: 170px 0 0 0;
    padding: 0 60% 0 0;
  }

  header.home > div > div {
    background-size: 700px 568px;
    height: 550px;
  }

}

@media all and (min-width: 881px) and (max-width: 960px) {

  header.home > div {
    background-position: 40px 25px;
    background-size: 249px 91px;
  }

  header.home > div > div > h1 {
    font-size: 3.25rem !important;
    margin: 170px 0 0 0;
    padding: 0 60% 0 0;
  }

  header.home > div > div {
    background-size: 700px 568px;
    height: 550px;
  }

}

@media all and (min-width: 768px) and (max-width: 880px) {

  header.home > div {
    background-position: 30px 15px;
    background-size: 175px 64px;
  }

  header.home > div > div > h1 {
    font-size: 2.75rem !important;
    margin: 170px 0 0 0;
    padding: 0 60% 0 0;
  }

  header.home > div > div {
    background-size: 600px 487px;
    height: 500px;
  }

}

@media all and (max-width: 767px) {

  header.home > div {
    background-position: 30px 15px;
    background-size: 175px 64px;
  }

  header.home > div > div > h1 {
    font-size: 2.75rem !important;
    margin: 170px 0 0 0;
    padding: 0 60% 0 0;
  }

  header.home > div > div {
    background-size: 600px 487px;
    height: 500px;
  }

  nav.menu {
    position: absolute;
  }

  nav.menu > button {
    background: transparent;
  }

  nav.menu > button span i {
    color: #2ac8ad;
  }

  nav.menu > button:hover span i,
  nav.menu > button:active span i,
  nav.menu > button:focus span i {
    color: #0caa8e;
  }

  nav.menu > ul.menu__list.collapsed {
    display: none;
  }

  nav.menu > ul.menu__list.expanded {
    display: block;
  }

}

@media all and (min-width: 560px) and (max-width: 725px) {

  header.home > div > div > h1 {
    font-size: 2.00rem !important;
    margin: 140px 0 0 0;
  }

  header.home > div > div {
    background-size: 475px 385px;
    height: 400px;
  }

}

@media all and (min-width: 420px) and (max-width: 559px) {

  header.home > div > div > h1 {
    font-size: 1.50rem !important;
    margin: 120px 0 0 0;
  }

  header.home > div > div {
    background-size: 350px 284px;
    height: 320px;
  }

}

@media all and (min-width: 0px) and (max-width: 419px) {

  header > div > nav {
    height: 100px;
  }

  header.home > div {
    background-position: 49% 15px;
    background-size: 175px 64px;
  }

  header.home > div > div > h1 {
    font-size: 1.25rem !important;
    margin: 155px 0 0 0;
  }

  header.home > div > div {
    background-size: 280px 227px;
    height: 320px;
  }

}

header > div > nav {
  width: 100%;
  text-align: right;
  background-size: 959px 4px;
  background-position: right bottom;
  background-repeat: no-repeat;
  padding-top: 0 !important;
}

header > div > nav > ul {
  float: right;
  margin-block-start: 1.5em;
  margin-block-end: 1.5em;
  margin-inline-start: 0px;
  margin-inline-end: 20px;
  padding-inline-start: 40px;
}

main {
  padding-bottom: 2rem !important;
}

main > article {
  max-width: initial !important;
  text-align: left !important;
  padding-top: 50px !important;
  font-weight: 200;
}

main > article .home-content {
  background-image: url('/images/decentralized.png');
  background-size: 2200px 309px;
  background-position: right 0;
  background-repeat: no-repeat;
}


@media all and (min-width: 1200px) {
  main > article .home-content {
    width: 1140px;
    margin: 0 auto;
  }
}


main > article .home-content .it-pro {
  border-top: 1px #ccc solid;
  background-image: url('/images/healthcare-it-pro.png');
  background-size: 401px 295px;
  background-position: left 60px;
  background-repeat: no-repeat;
  /* top | right | bottom | left */
  padding: 60px 40px 60px 425px;
}




@media all and (max-width: 768px) {
  main > article .home-content .it-pro {
    background-image: url('/images/healthcare-it-pro.png');
    background-size: 401px 295px;
    background-position: center 35px;
    background-repeat: no-repeat;
    padding: 370px 40px 0 0;
  }
}

main > article .home-content > h1 {
  padding: 40px 0 60px 0;
  line-height: 1.1;
}

main > article .home-content > .decentralization {
  padding: 0 40% 40px 0;
}


/* @media all and (min-width: 1601px) {
  main > article .home-content > h1 {
    padding: 40px 0 85px 0;
  }
}

@media all and (min-width: 1401px) and (max-width: 1600px) {
  main > article .home-content > h1 {
    padding: 40px 0 85px 0;
  }

  main > article .home-content {
    background-position: 80% 0;
  }
} */

@media all and (min-width: 1281px) {
  main > article .home-content > h1 {
    padding: 50px 0 60px 0;
  }

  main > article .home-content {
    background-position: 70% 0;
  }
}

@media all and (min-width: 1201px) and (max-width: 1280px) {
  main > article .home-content {
    background-size: 1300px 183px;
    background-position: 30% 30px;
  }

  main > article .home-content > h1 {
    padding: 40px 0 30px 0;
  }
}

@media all and (min-width: 811px) and (max-width: 1200px) {

  main > article .home-content {
    background-size: 1500px 222px;
    background-position: 75% 0px;
  }

  main > article .home-content > h1 {
    padding: 40px 0 30px 0;
    width: 73%;
  }
}

@media all and (min-width: 696px) and (max-width: 810px) {

  main > article .home-content {
    background-size: 1500px 222px;
    background-position: 77% 0px;
  }

  main > article .home-content > h1 {
    padding: 40px 0 30px 0;
    width: 70%;
  }
}

@media all and (min-width: 631px) and (max-width: 695px) {

  main > article .home-content {
    background-size: 1500px 222px;
    background-position: 79% 20px;
  }

  main > article .home-content > h1 {
    padding: 40px 0 30px 0;
    width: 60%;
  }
}

@media all and (max-width: 630px) {

  main > article .home-content {
    background-size: 1300px 183px;
    background-position: 80% 40px;
  }

  main > article .home-content > h1 {
    padding: 40px 0 30px 0;
    width: 90%;
  }
}

@media all and (max-width: 530px) {
  main > article .home-content {
    background-size: 1300px 183px;
    background-position: 80% 0px;
  }
  main > article .home-content > h1 {
    padding: 0;
  }

  main > article .home-content > .decentralization {
    padding: 0;
  }
}

main > div > article {
  max-width: initial !important;
  text-align: left !important;
}

main > article h1,
main > div > article header h1 {
  color: #406694 !important;
  margin: 0 0 0.67em 0;
  font-weight: normal;
}

footer.footer-hdi {
  background-color: #fff;
  padding: 1.2rem 1.5rem 4.0rem 2.25rem;
  border-top: 1px #bbb solid;
}

footer.footer-hdi > div {
  height: 59px;
  line-height: 59px;
  white-space: nowrap;
}

footer.footer-hdi .logo-footer {
  background-image: url('../images/logo-healthcare-data-insight-doc-ltr.png');
  background-size: 248px 89px;
  background-position: 0 0;
  background-repeat: no-repeat;
  width: 248px;
  height: 89px;
  display: inline-block;
}

footer.footer-hdi div > a:nth-child(2) {
  padding: 1.5em 1.00em 0 0;
  font-weight: 100;
  font-size: 1.00em;
  color: #666;
}

/* SUB PAGES */

.header-wrapper header.sub > a.logo-header {
  display: block;
  position: absolute;
  width: 175px;
  height: 64px;
  margin: 20px 0 0 40px;
  z-index: 10;
}

.header-wrapper header > div {
  background-image: url('../images/logo-healthcare-data-insight-doc.png');
  background-color: transparent;
  background-position: 40px 20px;
  background-repeat: no-repeat;
  background-size: 175px 64px;
}

.header-wrapper header.sub > div {
  padding-bottom: 6.25rem;
}

.header-wrapper header.sub > div > div {
  position: absolute;
  overflow: hidden;
  clip: rect(0 0 0 0);
  height: 1px;
  width: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
}

main.sub > div {
  max-width: initial;
}

main.sub > article > section {
  margin: 0;
  max-width: initial;
  text-align: left
}

@media all and (min-width: 1200px) {
  main.sub > article > section {
    width: 1140px;
    margin: 0 auto;
  }
}

main.sub > article > section > .medical-claim-form {
  background-image: url('/images/medical-insurance-claim-form.png');
  background-position: right top;
  background-repeat: no-repeat;
  background-size: 250px 355px;
  width: 250px;
  height: 355px;
  float: right;
  margin: 0 0 10px 30px;
}


main.sub > article > section .car-mechanic-example {
  border-top: 1px #ccc solid;
  border-bottom: 1px #ccc solid;
  margin-bottom: 20px
}

main.sub > article > section .car-mechanic-example strong {
  margin: 20px 0;
  display: block;
}

main.sub > article > section .car-mechanic-example .car-mechanic {
  background-image: url('/images/car-mechanic.png');
  background-position: left top;
  background-repeat: no-repeat;
  background-size: 400px 243px;
  width: 400px;
  height: 243px;
  float: left;
  margin: 10px 60px 10px 0;
}

main.sub > article > section .x-ray {
  background-image: url('/images/x-ray.png');
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 600px 295px;
  width: 600px;
  height: 295px;
  margin: 20px 0 20px 60px;
  float: right;
}

@media all and (min-width: 681px) and (max-width: 1000px) {
  main.sub > article > section .x-ray {
    background-image: url('/images/x-ray.png');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 600px 295px;
    width: 600px;
    height: 295px;
    margin: 30px auto;
    float: none;
  }
}

@media all and (max-width: 680px) {
  main.sub > article > section .x-ray {
    background-image: url('/images/x-ray.png');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 100% auto;
    width: 100%;
    height: 295px;
    margin: 10px auto;
    float: none;
  }
}

main.sub > article > section .car-mechanic-example .car-mechanic-steps p {
  margin-top: 50px;
}

main.sub > article > section .car-mechanic-example .car-mechanic-steps {
  display: block;
  width: 100%;
  float: left;
  margin: 0 0 40px 0;
}

main.sub > article > section .car-mechanic-example .car-mechanic-steps ul {
  display: inline-block;
  margin: 15px 0 0 0px;
}

main.sub > article > section > h1,
main.sub > article > section > h2 {
  margin-block-start: 0;
  margin-block-end: 0;
}

.code {
  font-family: 'Courier New', Courier, monospace;
  white-space: pre;
  -webkit-hyphens: none;
  font-weight: bold;
}