@font-face {
  font-family: 'Halyard-Light';
  src: url('fonts/Halyard-Light.woff2') format('woff2'),
    url('fonts/Halyard-Light.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Halyard-Book';
  src: url('fonts/Halyard-Book.woff2') format('woff2'),
    url('fonts/Halyard-Book.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Halyard-Medium';
  src: url('fonts/Halyard-Medium.woff2') format('woff2'),
    url('fonts/Halyard-Medium.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Halyard-SemiBold';
  src: url('fonts/Halyard-SemiBold.woff2') format('woff2'),
    url('fonts/Halyard-SemiBold.woff') format('woff');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'FZYouHJW';
  src: url('fonts/FZYouHJW.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

strong {
  font-family: 'Halyard-Medium', 'SF Pro Display', '-apple-system',
    'BlinkMacSystemFont', 'San Francisco', 'Helvetica Neue', 'Helvetica',
    'Ubuntu', 'Roboto', 'Noto', 'Segoe UI', 'Arial', sans-serif;
}

body {
  font-family: 'Halyard-Book', 'SF Pro Display', '-apple-system',
    'BlinkMacSystemFont', 'San Francisco', 'Helvetica Neue', 'Helvetica',
    'Ubuntu', 'Roboto', 'Noto', 'Segoe UI', 'Arial', sans-serif;
}

h3,
h5,
h6 {
  font-family: 'Halyard-Light', 'SF Pro Display', '-apple-system',
    'BlinkMacSystemFont', 'San Francisco', 'Helvetica Neue', 'Helvetica',
    'Ubuntu', 'Roboto', 'Noto', 'Segoe UI', 'Arial', sans-serif;
}

h1,
h2,
h4 {
  font-family: 'Halyard-SemiBold', 'SF Pro Display', '-apple-system',
    'BlinkMacSystemFont', 'San Francisco', 'Helvetica Neue', 'Helvetica',
    'Ubuntu', 'Roboto', 'Noto', 'Segoe UI', 'Arial', sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin-top: 0;
  margin-bottom: 32px;
}

h1:last-child,
h2:last-child,
h3:last-child,
h4:last-child,
h5:last-child,
h6:last-child {
  margin-top: 0;
  margin-bottom: 0px;
}

/* GLOBAL TYPOGRAPHY STYLES */

/* HALYARD-LIGHT HEADLINES */
.headline-light-small {
  font-family: 'Halyard-Light';
  font-size: 30px;
  line-height: 40px;
}

.headline-light-medium {
  font-family: 'Halyard-Light';
  font-size: 58px;
  line-height: 58px;
}

.headline-light-large {
  font-family: 'Halyard-Light';
  font-size: 60px;
  line-height: 65px;
}

.headline-light-extra-large {
  font-family: 'Halyard-Light';
  font-size: 100px;
  line-height: 108px;
}

/* HALYARD-MEDIUM HEADLINES */
.headline-medium-small {
  font-family: 'Halyard-Medium';
  font-size: 24px;
  line-height: 32px;
}

.headline-medium-large {
  font-family: 'Halyard-Medium';
  font-size: 38px;
  line-height: 38px;
}

.headline-medium-extra-large {
  font-family: 'Halyard-Medium';
  font-size: 48px;
  line-height: 48px;
}

/* HALYARD-SEMIBOLD HEADLINES */
.headline-semibold-large {
  font-family: 'Halyard-SemiBold';
  font-size: 48px;
  line-height: 48px;
}

.headline-semibold-extra-large {
  font-family: 'Halyard-SemiBold';
  font-size: 58px;
  line-height: 72px;
}

/* HALYARD-BOOK BODY COPY */
.body-small {
  font-family: 'Halyard-Book';
  font-size: 18px;
  line-height: 28px;
}

.body-medium {
  font-family: 'Halyard-Book';
  font-size: 21px;
  line-height: 30px;
}

.body-large {
  font-family: 'Halyard-Book';
  font-size: 26px;
  line-height: 36px;
}

/* BIO TYPOGRAPHY */
.bio-semibold-small {
  font-family: 'Halyard-SemiBold';
  font-size: 24px;
  line-height: 26px;
}

.bio-semibold-medium {
  font-family: 'Halyard-SemiBold';
  font-size: 24px;
  line-height: 26px;
}

.bio-book-small {
  font-family: 'Halyard-Book';
  font-size: 16px;
  line-height: 21.5px;
}

/* TABS TYPOGRAPHY */
.tabs-book-small {
  font-family: 'Halyard-Book';
  font-size: 21px;
  line-height: 30px;
}

.tabs-medium-medium {
  font-family: 'Halyard-Medium';
  font-size: 26px;
  line-height: 36px;
}

/* QUOTE TYPOGRAPHY */
.quote-book-medium {
  font-family: 'Halyard-Book';
  font-size: 25px;
  line-height: 38px;
}

.quote-semibold-small {
  font-family: 'Halyard-SemiBold';
  font-size: 17px;
  line-height: 23.5px;
}

/* FAST FACTS TYPOGRAPHY */
.fast-facts-book-small {
  font-family: 'Halyard-Book';
  font-size: 20px;
  line-height: 28px;
}

.fast-facts-book-large {
  font-family: 'Halyard-Book';
  font-size: 36px;
  line-height: 38px;
}

.fast-facts-light-large {
  font-family: 'Halyard-Light';
  font-size: 50px;
  line-height: 48.5px;
}

.fast-facts-semibold-Large {
  font-family: 'Halyard-SemiBold';
  font-size: 48px;
  line-height: 48px;
}

/* CAPTION TYPOGRAPHY */
.caption {
  font-family: 'Halyard-Book';
  font-size: 16px;
  line-height: 26px;
  font-style: italic;
}

@media (max-width: 834px) {
  /* HALYARD-LIGHT HEADLINES */
  .headline-light-medium {
    font-family: 'Halyard-Light';
    font-size: 38px;
    line-height: 1.2;
  }

  .headline-light-large {
    font-family: 'Halyard-Light';
    font-size: 48px;
    line-height: 1.2;
  }

  .headline-light-extra-large {
    font-family: 'Halyard-Light';
    font-size: 58px;
    line-height: 1.2;
  }

  /* HALYARD-MEDIUM HEADLINES */
  .headline-medium-large {
    font-family: 'Halyard-Medium';
    font-size: 28px;
    line-height: 28px;
  }

  .headline-medium-extra-large {
    font-family: 'Halyard-Medium';
    font-size: 38px;
    line-height: 37px;
  }

  /* HALYARD-SEMIBOLD HEADLINES */
  .headline-semibold-large {
    font-family: 'Halyard-SemiBold';
    font-size: 32px;
    line-height: 48px;
  }

  .headline-semibold-extra-large {
    font-family: 'Halyard-SemiBold';
    font-size: 38px;
    line-height: 40px;
  }

  /* HALYARD-BOOK BODY COPY */
  .body-medium {
    font-family: 'Halyard-Book';
    font-size: 16px;
    line-height: 22px;
  }

  .body-large {
    font-family: 'Halyard-Book';
    font-size: 21px;
    line-height: 28px;
  }

  /* BIO TYPOGRAPHY */
  .bio-semibold-small {
    font-family: 'Halyard-SemiBold';
    font-size: 16px;
    line-height: 26px;
  }

  .bio-semibold-medium {
    font-family: 'Halyard-SemiBold';
    font-size: 24px;
    line-height: 37px;
  }

  .bio-book-small {
    font-family: 'Halyard-Book';
    font-size: 12px;
    line-height: 18px;
  }

  /* TABS TYPOGRAPHY */
  .tabs-book-small {
    font-family: 'Halyard-Book';
    font-size: 21px;
    line-height: 30px;
  }

  .tabs-medium-medium {
    font-family: 'Halyard-Medium';
    font-size: 26px;
    line-height: 36px;
  }

  /* QUOTE TYPOGRAPHY */
  .quote-book-medium {
    font-family: 'Halyard-Book';
    font-size: 18px;
    line-height: 28px;
  }

  .quote-semibold-small {
    font-family: 'Halyard-SemiBold';
    font-size: 16px;
    line-height: 26px;
  }

  /* FAST FACTS TYPOGRAPHY */
  .fast-facts-book-small {
    font-family: 'Halyard-Book';
    font-size: 20px;
    line-height: 28px;
  }

  .fast-facts-book-large {
    font-family: 'Halyard-Book';
    font-size: 28px;
    line-height: 33px;
  }

  .fast-facts-light-large {
    font-family: 'Halyard-Light';
    font-size: 40px;
    line-height: 40px;
  }

  .fast-facts-semibold-Large {
    font-family: 'Halyard-SemiBold';
    font-size: 48px;
    line-height: 35px;
  }

  .caption {
    font-family: 'Halyard-Book';
    font-size: 14px;
    line-height: 18px;
    font-style: italic;
  }
}

/* GLOBAL COMPONENT MARGINS */

#main > :nth-child(3) {
  margin-top: 250px;
}

#main > #wechat + :nth-child(4) {
  margin-top: 250px;
}

#main > #wechat + :nth-child(4).margin-none {
  margin-top: 0;
}

#main > :nth-child(3).margin-none {
  margin-top: 0;
}

.margin-standard + .margin-standard {
  margin-top: 120px;
}

.margin-standard + .margin-large {
  margin-top: 175px;
}

.margin-standard + .margin-small {
  margin-top: 120px;
}

.margin-large + .margin-standard {
  margin-top: 175px;
}

.margin-large + .margin-large {
  margin-top: 175px;
}

.margin-large + .margin-small {
  margin-top: 175px;
}

.margin-small + .margin-standard {
  margin-top: 50px;
}

.margin-small + .margin-large {
  margin-top: 50px;
}

.margin-small + .margin-small {
  margin-top: 30px;
}

.margin-small + .margin-small {
  margin-top: 30px;
}

.margin-slider {
  margin-top: 120px;
}

.margin-slider-small {
  margin-top: 50px !important;
}

.margin-end + footer {
  margin-top: 175px;
}

@media (max-width: 834px) {
  #main > :nth-child(3) {
    margin-top: 125px;
  }

  #main > :nth-child(3).margin-none {
    margin-top: 0;
  }

  .margin-standard + .margin-standard {
    margin-top: 75px;
  }

  .margin-standard + .margin-large {
    margin-top: 85px;
  }

  .margin-standard + .margin-small {
    margin-top: 75px;
  }

  .margin-large + .margin-standard {
    margin-top: 85px;
  }

  .margin-large + .margin-large {
    margin-top: 85px;
  }

  .margin-large + .margin-small {
    margin-top: 85px;
  }

  .margin-small + .margin-standard {
    margin-top: 50px;
  }

  .margin-small + .margin-large {
    margin-top: 85px;
  }

  .margin-small + .margin-small {
    margin-top: 30px;
  }

  .margin-slider + .margin-large {
    margin-top: 30px;
  }

  .margin-slider-small + .margin-large {
    margin-top: 20px;
}

  .margin-end + footer {
    margin-top: 120px;
  }
  
}

/* Chinese font reference */

html[lang='zh'] h1,
html[lang='zh'] h2,
html[lang='zh'] h3,
html[lang='zh'] h4 {
  font-family: 'FZYouHJW', -apple-system, BlinkMacSystemFont, 'Segoe UI',
    'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans',
    'Helvetica Neue', sans-serif;
  line-height: 1.2 !important;
}

html[lang='zh'] body,
html[lang='zh'] h5,
html[lang='zh'] h6 {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
    line-height: 1.2 !important;
}

html[lang='zh'] h5 {
  font-size: min(max(1rem, 8vw), 36px);
}

html[lang='zh'] p {
  font-size: 1.5em;
  font-weight: 400;
  line-height: 1.5 !important;
}

#wechat {
  position: fixed;
  display: flex;
  bottom: 10%;
  left: -100px;
  z-index: 1000;
  transition: all 200ms;
}

#wechat:hover {
  left: 0;
}

#wechat .logo {
  width: 50px;
  height: 50px;
  background-color: rgba(255, 255, 255, 0.5);
  padding: 5px;
}

#wechat .qr {
  width: 100px;
  height: 100px;
  background-color: #fff;
}