/* Font Family */
@font-face {
  font-family: 'Glyphicons Halflings';
  src: url('https://ch-api.healthhub.sg/api/public/content/bc9d12d572c2481ea983e67c67aa042e?v=01df6f53') format('woff2'),
    url('https://ch-api.healthhub.sg/api/public/content/5595886cc1674b6cb9f39788c7f94f52?v=a45884c7') format('svg'),
    url('https://ch-api.healthhub.sg/api/public/content/921f191dc61045dab52fba5ee50adebb?v=00708d6d') format('ttf'),
    url('https://ch-api.healthhub.sg/api/public/content/ab43e9ec452c420a84f1a0dbdca336c7?v=4e2820a5') format('woff'),
    url('https://ch-api.healthhub.sg/api/public/content/323aff0eda8c4859ae6b704d6450fe17?v=587bf8dc') format('woff2');
}

@font-face {
  font-family: 'AvenirNextLTPro-Bold';
  src: url('https://ch-api.healthhub.sg/api/public/content/b4dcb268e35b4bec841d4e9a899b706b?v=56509595');
  src: url('https://ch-api.healthhub.sg/api/public/content/b4dcb268e35b4bec841d4e9a899b706b?v=56509595?#iefix') format('embedded-opentype'),
    url('https://ch-api.healthhub.sg/api/public/content/d69a61d1fc5548858dcd1299d883eb21?v=34cd86d1#AvenirNextLTPro-Bold') format('svg'),
    url('https://ch-api.healthhub.sg/api/public/content/74b4469dbdfc4a1b8d9fee5927268df6?v=aba5ec38') format('truetype'),
    url('https://ch-api.healthhub.sg/api/public/content/f48f96a6e28a4fedac9f91fb937d0be9?v=ee457a22') format('woff'),
    url('https://ch-api.healthhub.sg/api/public/content/3d17d2172015464a9b8d2041b892ad2b?v=1169129a') format('woff2');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'AvenirNextCondensed-Medium';
  src: url('https://ch-api.healthhub.sg/api/public/content/7204ef274da14c47a51cf434f30f0c34?v=3dcd53f5');
  src: url('https://ch-api.healthhub.sg/api/public/content/7204ef274da14c47a51cf434f30f0c34?v=3dcd53f5?#iefix') format('embedded-opentype'),
    url('https://ch-api.healthhub.sg/api/public/content/6956d23c848b4544b791d6b050b8c3df?v=00ae4db4') format('woff2'),
    url('https://ch-api.healthhub.sg/api/public/content/b7067405b1044dd6bd978eae954e43cc?v=7b5b1614') format('woff'),
    url('https://ch-api.healthhub.sg/api/public/content/2de9c810350f49e683479e35616b9c6b?v=2923167c') format('truetype'),
    url('https://ch-api.healthhub.sg/api/public/content/2863673323a94aec9f9dae336fab8ba9?v=8d4c8840#AvenirNextCondensed-Medium') format('svg');
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: 'AvenirNextCondensed-Bold';
  src: url('https://ch-api.healthhub.sg/api/public/content/fa146812a4ab409b818c70d3fc79e7ad?v=65d3a31e');
  src: url('https://ch-api.healthhub.sg/api/public/content/fa146812a4ab409b818c70d3fc79e7ad?v=65d3a31e?#iefix') format('embedded-opentype'),
    url('https://ch-api.healthhub.sg/api/public/content/d4c2e0db91de43ef816a5b1b2efac9a2?v=416e8424') format('woff2'),
    url('https://ch-api.healthhub.sg/api/public/content/1bed8cbc28184e758b8a71c1f76cff98?v=12a93480') format('woff'),
    url('https://ch-api.healthhub.sg/api/public/content/8d79b30c91ef4085ae00f65793880b09?v=9e9c7082') format('truetype'),
    url('https://ch-api.healthhub.sg/api/public/content/ced0075dbcaa4045aef75844447dbbe5?v=96f3e5cd#AvenirNextCondensed-Bold') format('svg');
  font-weight: bold;
  font-style: normal;
}

/* Common Classes */
.f-condensed-bold {
  font-family: 'AvenirNextCondensed-Bold', Helvetica, Arial, sans-serif;
  font-weight: 700;
}

.f-condensed-medium {
  font-family: 'AvenirNextCondensed-Medium', Helvetica, Arial, sans-serif;
  font-weight: 500;
}

.f-next-bold {
  font-family: 'AvenirNextLTPro-Bold', Helvetica, Arial, sans-serif;
  font-weight: 700;
}

.f-next-medium {
  font-family: 'AvenirNextLTPro-Bold', Helvetica, Arial, sans-serif;
  font-weight: 500;
}

.f-bold {
  font-family: Helvetica, Arial, sans-serif;
  font-weight: 700;
}

.f-medium {
  font-family: Helvetica, Arial, sans-serif;
  font-weight: 500;
}

.nowrap {
  white-space: nowrap;
}

.temp-template {
  margin: 0 auto;
  padding: 0px 0 0;
  clear: both;
  padding-right: 0px;
  padding-left: 0px;
}

.hpb-container {
  max-width: 100%;
  width: 100%;
  margin: 0 auto;
  background-color: #fbe1d5;
  font-family: Helvetica, Arial, sans-serif;
}

.hpb-container .cta {
  font-size: 32px;
  margin: 1em 0;
  text-align: center;
}

.hpb-container .cta .btn-get-started {
  display: inline-block;
  background: #2842a2;
  color: #ffc107;
  font-family: 'AvenirNextCondensed-Bold', Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: inherit;
  padding: 1em 1.5em;
  border-radius: .25em;
  text-transform: uppercase;
}

.hpb-container .app-bar {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  color: #fff;
  background-color: #99a7d7;
  padding: 0 2.5%;
}

.hpb-container .app-bar .copy {
  font-size: 30px;
  font-weight: 700;
  padding: 1em 1em 1em 0;
  text-align: left;
}

.hpb-container .app-bar .icons {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  padding: 1em 0;
}

.hpb-container .app-bar .icons img {
  margin: 0 10px;
}

.hpb-container .panel-group {
  padding: 30px;
  width: 100%;
  margin-bottom: 0px;
  z-index: 1;
}

.hpb-container .panel-group .panel-default {
  background-color: rgba(117, 122, 138, .15);
  border-radius: 20px;
  -webkit-box-shadow: none;
          box-shadow: none;
}

.hpb-container .panel-group .panel-default:not(:first-child) {
  margin-top: 60px;
}

.hpb-container .panel-group .panel-default > .panel-heading {
  background-color: transparent;
  border-radius: 0;
  padding: 0;
  border: 0;
}

.hpb-container .panel-group .panel-default > .panel-heading .panel-title {
  position: relative;
  text-align: center;
  font-size: 37px;
}

.hpb-container .panel-group .panel-default > .panel-heading .panel-title a {
  display: block;
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
  letter-spacing: inherit;
  word-spacing: inherit;
  text-transform: inherit;
  text-align: center;
  padding: .5em 6em;
  color: #2842a2;
  background-color: #ffc106;
  border-radius: 20px 20px 0 0;
}

.hpb-container .panel-group .panel-default > .panel-heading .panel-title a .panel-icon {
  position: absolute;
  left: 2%;
  bottom: 100%;
  width: 4.5em;
  -webkit-transform: translate(0, 109px);
      -ms-transform: translate(0, 109px);
          transform: translate(0, 109px);
}

.hpb-container .panel-group .panel-default > .panel-heading .panel-title a .panel-arrow {
  position: absolute;
  top: 50%;
  right: 3%;
  width: 1em;
  -webkit-transform: translate(0, -50%) scaleY(-1);
      -ms-transform: translate(0, -50%) scaleY(-1);
          transform: translate(0, -50%) scaleY(-1);
  -webkit-transition: -webkit-transform .2s linear;
  transition: -webkit-transform .2s linear;
  -o-transition: transform .2s linear;
  transition: transform .2s linear;
  transition: transform .2s linear, -webkit-transform .2s linear;
}

.hpb-container .panel-group .panel-default > .panel-heading .panel-title a.collapsed {
  border-radius: 20px;
}

.hpb-container .panel-group .panel-default > .panel-heading .panel-title a.collapsed .panel-arrow {
  -webkit-transform: translate(0, -50%) scaleY(1);
      -ms-transform: translate(0, -50%) scaleY(1);
          transform: translate(0, -50%) scaleY(1);
}

.hpb-container .panel-group .panel-default > .panel-collapse .panel-body {
  font-size: 30px;
  padding: 1em;
  border: 0;
  color: #2842a2;
}

.hpb-container .panel-group .panel-default > .panel-collapse .panel-body .copy {
  text-align: center;
  padding: 0 12%;
  margin-bottom: 30px;
}

.hpb-container .panel-group .panel-default > .panel-collapse .panel-body .screenshots {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin: 0 -1em 60px -1em;
  padding: 0 1em;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.hpb-container .panel-group .panel-default > .panel-collapse .panel-body .screenshots.right-side {
  padding-left: 27%;
}

.hpb-container .panel-group .panel-default > .panel-collapse .panel-body .screenshots.left-side {
  padding-right: 27%;
}

.hpb-container .panel-group .panel-default > .panel-collapse .panel-body .screenshots .screenshot {
  width: 49%;
}

.hpb-container .panel-group .panel-default > .panel-collapse .panel-body .screenshots .side-img {
  position: absolute;
}

.hpb-container .faq-item {
  margin-bottom: 1.5em;
  font-size: 21px;
}

.hpb-container .faq-item .faq-title {
  font-weight: bold;
  margin-bottom: .75em;
}

.hpb-container .faq-item .faq-copy {
  margin-bottom: .75em;
}

.section:before, .section:after {
  content: '';
  display: table;
  clear: both;
}

/* Masthead */
.section-masthead {
  background-color: #7ecbea;
  border-bottom: 24px solid #2842a1;
}

.section-masthead .headline {
  text-transform: uppercase;
  font-size: 136px;
  line-height: 1;
  margin: 50px auto;
  color: #2842a2;
}

.section-masthead .headline small {
  display: block;
  font-size: 47%;
  margin-top: -0.2em;
}

.section-masthead .masthead {
  margin: 30px 0;
}

.section-masthead .masthead img {
  width: 100%;
}

.section-masthead .nav-bar {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 0 5%;
  margin: 30px 0;
}

.section-masthead .nav-bar .nav-bar-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  padding: 0 3%;
  -webkit-box-align: center;
    -ms-flex-align: center;
        align-items: center;
  width: 33.33333%
}

.section-masthead .nav-bar .nav-bar-item .nav-bar-image {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  max-width: 250px;
  height: 200px;
  padding: 0 12%;
}

.section-masthead .nav-bar .nav-bar-item .nav-bar-image img {
  margin: 0 auto;
}

.section-masthead .nav-bar .nav-bar-item .nav-bar-content {
  padding-top: 15px;
  color: #2842a2;
}

.section-masthead .nav-bar .nav-bar-item .nav-bar-content .title {
  font-size: 31px;
  text-transform: uppercase;
}

.section-masthead .nav-bar .nav-bar-item .nav-bar-content .copy {
  font-size: 24px;
}

/* Content */
.section-content {
  background: #fbe1d5 url(https://ch-api.healthhub.sg/api/public/content/5004b4329a604bf4991945a71363bab4?v=96e3069e) top left repeat;
  padding-bottom: 60px;
}

.section-content .intro {
  background-color: #ffc106;
  padding: 2.34375% 16%;
  color: #2842a2;
}

.section-content .intro .title {
  font-size: 42px;
  margin-bottom: 3%;
}

.section-content .intro .copy {
  font-size: 29px;
}

.section-content .panel-group .panel-default.panel-booklet-log {
  margin-top: 40px;
}

.section-content .panel-group .panel-default.panel-booklet-log > .panel-collapse .panel-body .screenshots {
  text-align: right;
}

.section-content .panel-group .panel-default.panel-booklet-log > .panel-collapse .panel-body .screenshots .side-img {
  width: 15.1639344262%;
  left: 5%;
  bottom: 0;
  margin-bottom: -10%;
}

.section-content .panel-group .panel-default.panel-booklet-view > .panel-collapse .panel-body .screenshots .side-img {
  width: 33.6885245902%;
  right: 1%;
  bottom: 0;
  margin-bottom: -10%;
}

.section-content .panel-group .panel-default.panel-booklet-track {
  margin-top: 80px;
}

.section-content .panel-group .panel-default.panel-booklet-track > .panel-collapse .panel-body .screenshots .side-img {
  width: 19.5901639344%;
  left: 4%;
  bottom: 0;
  margin-bottom: -10%;
}

.section-content .panel-group .panel-default.panel-booklet-faqs {
  background-color: transparent;
}

.section-content .panel-group .panel-default.panel-booklet-faqs > .panel-heading .panel-title a {
  border-radius: 20px;
}

.section-content .panel-group .panel-default.panel-booklet-faqs > .panel-heading .panel-title a .panel-icon {
  -webkit-transform: translate(0, 72px);
      -ms-transform: translate(0, 72px);
          transform: translate(0, 72px);
}

.section-content .panel-group .panel-default.panel-booklet-faqs > .panel-collapse > .panel-body {
  padding: 0;
}

.section-content .panel-group#booklet-faqs-item-accordion {
  padding: 0;
}

.section-content .panel-group .panel-default.panel-booklet-faqs-item {
  margin-top: 20px;
  margin-bottom: 0;
}

.section-content .panel-group .panel-default.panel-booklet-faqs-item > .panel-heading .panel-title {
  font-size: 25px;
}

.section-content .panel-group .panel-default.panel-booklet-faqs-item > .panel-heading .panel-title a {
  padding: .75em 3em;
  color: #ffc106;
  background-color: #2842a1;
}

/* Footer */
.section-footer {
  border-bottom: 24px solid #2842a1;
}
@media screen and (max-width: 1280px) {
  .hpb-container .cta {
    font-size: 2.5vw;
  }

  .hpb-container .app-bar .copy {
    font-size: 2.34375vw;
  }

  .hpb-container .app-bar .icons img {
    width: 13.984375vw;
  }

  .hpb-container .app-bar .icons img.app-icon {
    width: 13.203125vw;
  }

  .hpb-container .panel-group {
    padding: 2.34375vw;
  }

  .hpb-container .panel-group .panel-default {
    border-radius: 1.5625vw;
  }

  .hpb-container .panel-group .panel-default > .panel-heading .panel-title a .panel-icon {
    -webkit-transform: translate(0, 8.5vw);
        -ms-transform: translate(0, 8.5vw);
            transform: translate(0, 8.5vw);
  }

  .hpb-container .faq-item {
    font-size: 1.640625vw;
  }

  .section-masthead,
  .section-footer {
    border-bottom-width: 1.875vw;
  }

  .section-masthead .headline {
    font-size: 10.625vw;
  }

  .section-masthead .nav-bar .nav-bar-item .nav-bar-content .title {
    font-size: 2.421875vw;
  }

  .section-masthead .nav-bar .nav-bar-item .nav-bar-content .copy {
    font-size: 1.875vw;
  }

  .section-content {
    padding-bottom: 4.6875vw;
  }

  .section-content .intro .title {
    font-size: 3.28125vw;
  }

  .section-content .intro .copy {
    font-size: 2.265625vw;
  }

  .section-content .panel-group .panel-default:not(:first-child) {
    margin-top: 4.6875vw;
  }

  .section-content .panel-group .panel-default > .panel-heading .panel-title {
    font-size: 2.890625vw;
  }

  .section-content .panel-group .panel-default > .panel-heading .panel-title a {
    border-radius: 1.5625vw 1.5625vw 0 0;
  }

  .section-content .panel-group .panel-default > .panel-collapse .panel-body {
    font-size: 2.34375vw;
  }

  .section-content .panel-group .panel-default > .panel-collapse .panel-body .screenshots .screenshot {
    width: 30.546875vw;
  }

  .section-content .panel-group .panel-default.panel-booklet-log {
    margin-top: 3vw;
  }

  .section-content .panel-group .panel-default.panel-booklet-log > .panel-collapse .panel-body .screenshots .side-img {
    width: 14.453125vw;
  }

  .section-content .panel-group .panel-default.panel-booklet-track {
    margin-top: 6.25vw;
  }

  .section-content .panel-group .panel-default.panel-booklet-faqs > .panel-heading .panel-title a {
    border-radius: 1.5625vw;
  }

  .section-content .panel-group .panel-default.panel-booklet-faqs > .panel-heading .panel-title a .panel-icon {
    -webkit-transform: translate(0, 5.625vw);
        -ms-transform: translate(0, 5.625vw);
            transform: translate(0, 5.625vw);
  }

  .section-content .panel-group .panel-default.panel-booklet-faqs-item {
    margin-top: 1.5625vw;
  }

  .section-content .panel-group .panel-default.panel-booklet-faqs-item > .panel-heading .panel-title {
    font-size: 1.953125vw;
  }

  .section-content .panel-group .panel-default.panel-booklet-faqs-item > .panel-heading .panel-title a {
    border-radius: 1.5625vw;
  }
}

@media screen and (max-width: 1024px) {
  .hpb-container .app-bar .icons img {
    margin: 0 5px;
  }

  .section-masthead .nav-bar .nav-bar-item .nav-bar-image {
    height: 180px;
  }

  .section-masthead .nav-bar .nav-bar-item .nav-bar-content .title {
    font-size: 3.2vw;
  }

  .section-masthead .nav-bar .nav-bar-item .nav-bar-content .copy {
    font-size: 2.1vw;
  }

  .section-content .panel-group .panel-default > .panel-collapse .panel-body .screenshots .screenshot {
    width: 48%;
  }
}

@media screen and (max-width: 767px) {
  .hpb-container .cta {
    font-size: 4vw;
  }

  .hpb-container .app-bar {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }

  .hpb-container .app-bar .copy {
    font-size: 4.5vw;
    text-align: center;
    padding-right: 0;
  }

  .hpb-container .app-bar .icons {
    padding-top: 0;
  }

  .hpb-container .app-bar .icons img {
    width: 20.8vw;
  }

  .hpb-container .faq-item {
    font-size: 4.5vw;
    text-align: left;
  }

  .section-masthead .headline {
    font-size: 13.2vw;
    margin: 30px auto;
    line-height: 0.85;
  }

  .section-masthead .headline small {
    font-size: 37.5%;
    margin-top: 0.3em;
  }

  .section-masthead .nav-bar {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    padding: 0;
  }

  .section-masthead .nav-bar .nav-bar-item {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    text-align: left;
    background: #b2eaff;
    padding: 15px 5%;
    margin: 10px 0 0;
    width: 100%;
  }

  .section-masthead .nav-bar .nav-bar-item:first-child {
    margin-top: 0;
  }

  .section-masthead .nav-bar .nav-bar-item .nav-bar-image {
    width: 33vw;
    height: auto;
    -webkit-box-flex: 0;
        -ms-flex: 0 0 33vw;
            flex: 0 0 33vw;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    padding: 2% 5% 2% 2%;
  }

  .section-masthead .nav-bar .nav-bar-item .nav-bar-content {
    -webkit-box-flex: 1;
        -ms-flex: 1 1 auto;
            flex: 1 1 auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    padding: 0;
  }

  .section-masthead .nav-bar .nav-bar-item .nav-bar-content .title {
    font-size: 7.5vw;
  }

  .section-masthead .nav-bar .nav-bar-item .nav-bar-content .copy {
    font-size: 5vw;
  }

  .section-content .intro {
    padding: 5% 7%;
  }

  .section-content .intro .title {
    font-size: 8vw;
  }

  .section-content .intro .copy {
    font-size: 5.5vw;
  }

  .section-content .panel-group .panel-default {
    margin-top: 10vw;
    border-radius: 5vw;
  }

  .section-content .panel-group .panel-default.panel-booklet-view,
  .section-content .panel-group .panel-default.panel-booklet-faqs {
    margin-top: 5vw;
  }

  .section-content .panel-group .panel-default > .panel-heading .panel-title a {
    border-radius: 5vw 5vw 0 0;
  }

  .section-content .panel-group .panel-default > .panel-heading .panel-title {
    font-size: 5.5vw;
  }

  .section-content .panel-group .panel-default > .panel-heading .panel-title a {
    padding: 2.25em .8em .5em;
  }

  .section-content .panel-group .panel-default > .panel-heading .panel-title a .panel-icon {
    width: 23vw;
    bottom: 100%;
    left: 50%;
    -webkit-transform: translate(-50%, 10vw);
        -ms-transform: translate(-50%, 10vw);
            transform: translate(-50%, 10vw);
    top: auto;
  }

  .section-content .panel-group .panel-default > .panel-heading .panel-title a .panel-arrow {
    top: 0;
    right: 5%;
    width: .75em;
    margin-top: 6.5%;
  }

  .section-content .panel-group .panel-default > .panel-collapse .panel-body {
    font-size: 5vw;
  }

  .section-content .panel-group .panel-default > .panel-collapse .panel-body .copy {
    padding: 0;
  }

  .section-content .panel-group .panel-default > .panel-collapse .panel-body .screenshots {
    margin-bottom: 30px;
  }

  .section-content .panel-group .panel-default > .panel-collapse .panel-body .screenshots.left-side {
    padding-right: 1em;
  }

  .section-content .panel-group .panel-default > .panel-collapse .panel-body .screenshots.right-side {
    padding-left: 1em;
  }

  .section-content .panel-group .panel-default > .panel-collapse .panel-body .screenshots .side-img {
    display: none;
  }

  .section-content .panel-group .panel-default.panel-booklet-log {
    margin-top: 12vw;
  }

  .section-content .panel-group .panel-default.panel-booklet-track {
    margin-top: 15vw;
  }

  .section-content .panel-group .panel-default.panel-booklet-faqs > .panel-heading .panel-title a {
    border-radius: 5vw;
    padding-top: .5em;
    text-align: left;
  }

  .section-content .panel-group .panel-default.panel-booklet-faqs > .panel-heading .panel-title a .panel-icon {
    -webkit-transform: translate(-50%, 9vw);
        -ms-transform: translate(-50%, 9vw);
            transform: translate(-50%, 9vw);
  }

  .section-content .panel-group .panel-default.panel-booklet-faqs-item {
    margin-top: 2.666667vw;
  }

  .section-content .panel-group .panel-default.panel-booklet-faqs-item > .panel-heading .panel-title {
    font-size: 5.5vw;
  }

  .section-content .panel-group .panel-default.panel-booklet-faqs-item > .panel-heading .panel-title a {
    padding-left: 5vw;
    text-align: left;
    border-radius: 5vw;
  }
}