/* ==========================================================================
   tokens.css
   ========================================================================== */

:root {
  /* ---------- Colours ---------- */
  --el-color-ffffff: rgb(255, 255, 255);
  --el-color-8e9091: rgb(142, 144, 145);
  --el-color-7e858b: rgb(126, 133, 139);
  --el-color-2f363b: rgb(47, 54, 59);
  --el-color-000000: rgb(0, 0, 0);
  --el-color-0081bd: rgb(0, 129, 189);
  --el-color-cccccc: rgb(204, 204, 204);
  --el-color-676c70: rgb(103, 108, 112);
  --el-color-4189ab: rgb(65, 137, 171);
  --el-color-212121: rgb(33, 33, 33);
  --el-color-000000-a0p075: rgba(0, 0, 0, 0.075);
  --el-color-f0f0f0: rgb(240, 240, 240);
  --el-color-000000-a0p05: rgba(0, 0, 0, 0.05);
  --el-color-ffffff-a0p2: rgba(255, 255, 255, 0.2);
  --el-color-c6c6c6: rgb(198, 198, 198);
  --el-color-52a8ec-a0p8: rgba(82, 168, 236, 0.8);
  --el-color-00b0f0: rgb(0, 176, 240);
  --el-color-0f0a50: rgb(15, 10, 80);
  --el-color-76923c: rgb(118, 146, 60);
  --el-color-b90909: rgb(185, 9, 9);
  --el-color-e91845: rgb(233, 24, 69);
  --el-color-f3f3f3: rgb(243, 243, 243);
  --el-color-333333: rgb(51, 51, 51);
  --el-color-5f5f5f: rgb(95, 95, 95);
  --el-color-f5f5f5: rgb(245, 245, 245);
  --el-color-000000-a0p2: rgba(0, 0, 0, 0.2);
  --el-color-52a8ec-a0p6: rgba(82, 168, 236, 0.6);
  --el-color-696969: rgb(105, 105, 105);
  --el-color-5ea9dd: rgb(94, 169, 221);
  --el-color-828282: rgb(130, 130, 130);
  --el-color-a4a6a8: rgb(164, 166, 168);
  --el-color-b94a48: rgb(185, 74, 72);
  --el-color-555555: rgb(85, 85, 85);
  --el-color-000000-a0p09: rgba(0, 0, 0, 0.09);
  --el-color-ffffff-a0: rgba(255, 255, 255, 0);
  --el-color-000000-a0p15: rgba(0, 0, 0, 0.15);
  --el-color-white: rgb(255, 255, 255);
  --el-color-text: rgb(142, 144, 145);
  --el-color-footer-text: rgb(126, 133, 139);
  --el-color-text-strong: rgb(47, 54, 59);
  --el-color-black: rgb(0, 0, 0);
  --el-color-primary: rgb(0, 129, 189);
  --el-color-border: rgb(204, 204, 204);
  --el-color-footer-bottom-text: rgb(103, 108, 112);
  --el-color-primary-border: rgb(65, 137, 171);
  --el-color-text-dark: rgb(33, 33, 33);
  --el-color-input-shadow: rgba(0, 0, 0, 0.075);
  --el-color-page-bg: rgb(240, 240, 240);
  --el-color-card-border: rgb(198, 198, 198);
  --el-color-focus-border: rgba(82, 168, 236, 0.8);
  --el-color-book-title: rgb(0, 176, 240);
  --el-color-nav-link: rgb(15, 10, 80);
  --el-color-heading-green: rgb(118, 146, 60);
  --el-color-button-red: rgb(185, 9, 9);
  --el-color-accent: rgb(233, 24, 69);
  --el-color-heading-bg: rgb(243, 243, 243);
  --el-color-popup-text: rgb(51, 51, 51);
  --el-color-isbn: rgb(95, 95, 95);
  --el-color-card-bg: rgb(245, 245, 245);
  --el-color-focus-shadow: rgba(82, 168, 236, 0.6);
  --el-color-navbar-shadow: rgb(105, 105, 105);
  --el-color-submit: rgb(94, 169, 221);
  --el-color-checkbox-label: rgb(130, 130, 130);
  --el-color-text-faint: rgb(164, 166, 168);
  --el-color-error: rgb(185, 74, 72);
  --el-color-select-text: rgb(85, 85, 85);

  /* ---------- Font families ---------- */
  --el-font-roboto: Roboto, sans-serif;
  --el-font-roboto-2: Roboto, Helvetica, Arial, sans-serif;
  --el-font-helvetica-neue: "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* ---------- Font weights ---------- */
  --el-fw-300: 300;
  --el-fw-400: 400;
  --el-fw-600: 600;
  --el-fw-700: 700;
  --el-fw-900: 900;

  /* ---------- Font sizes ---------- */
  --el-fs-13: 13px;
  --el-fs-14: 14px;
  --el-fs-14p4: 14.4px;
  --el-fs-16: 16px;
  --el-fs-17: 17px;
  --el-fs-18: 18px;
  --el-fs-19: 19px;
  --el-fs-20: 20px;
  --el-fs-21: 21px;
  --el-fs-21p3438: 21.3438px;
  --el-fs-22: 22px;
  --el-fs-24: 24px;
  --el-fs-25: 25px;
  --el-fs-28: 28px;
  --el-fs-30: 30px;
  --el-fs-35: 35px;
  --el-fs-38p5: 38.5px;
  --el-fs-40: 40px;
  --el-fs-50: 50px;
  --el-fs-60: 60px;
  --el-fs-100: 100px;

  /* ---------- Line heights ---------- */
  --el-lh-13: 13px;
  --el-lh-16: 16px;
  --el-lh-17: 17px;
  --el-lh-18: 18px;
  --el-lh-20: 20px;
  --el-lh-22: 22px;
  --el-lh-25: 25px;
  --el-lh-25p6125: 25.6125px;
  --el-lh-26: 26px;
  --el-lh-30: 30px;
  --el-lh-35: 35px;
  --el-lh-36: 36px;
  --el-lh-40: 40px;
  --el-lh-50: 50px;
  --el-lh-55: 55px;
  --el-lh-60: 60px;
  --el-lh-95: 95px;
  --el-lh-normal: normal;

  /* ---------- Letter spacing ---------- */
  --el-ls-n0p9: -0.9px;
  --el-ls-n0p640312: -0.640312px;
  --el-ls-normal: normal;

  /* ---------- Spacing ---------- */
  --el-space-n35: -35px;
  --el-space-n30: -30px;
  --el-space-n25: -25px;
  --el-space-3: 3px;
  --el-space-4: 4px;
  --el-space-5: 5px;
  --el-space-6: 6px;
  --el-space-7: 7px;
  --el-space-8: 8px;
  --el-space-10: 10px;
  --el-space-12: 12px;
  --el-space-14: 14px;
  --el-space-15: 15px;
  --el-space-16: 16px;
  --el-space-18: 18px;
  --el-space-20: 20px;
  --el-space-25: 25px;
  --el-space-27: 27px;
  --el-space-30: 30px;
  --el-space-35: 35px;
  --el-space-40: 40px;
  --el-space-45: 45px;
  --el-space-50: 50px;
  --el-space-60: 60px;

  /* ---------- Radius ---------- */
  --el-radius-3: 3px;
  --el-radius-4: 4px;
  --el-radius-8: 8px;
  --el-radius-10: 10px;
  --el-radius-50: 50px;

  /* ---------- Shadows ---------- */
  --el-shadow-1: rgba(0, 0, 0, 0.075) 0px 1px 1px 0px inset;
  --el-shadow-2: rgba(255, 255, 255, 0.2) 0px 1px 0px 0px inset, rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
  --el-shadow-3: rgba(0, 0, 0, 0.075) 0px 1px 1px 0px inset, rgba(82, 168, 236, 0.6) 0px 0px 8px 0px;
  --el-shadow-4: rgb(105, 105, 105) 0px 0px 21px 0px;
  --el-shadow-5: rgba(0, 0, 0, 0.2) 0px 0px 3px 1px, rgba(0, 0, 0, 0.2) 0px 0px 1px 0px;
  --el-shadow-6: rgba(0, 0, 0, 0.09) 0px 1px 2px;
  --el-shadow-7: rgba(0, 0, 0, 0.15) 0px 2px 4px 0px inset, rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;

  /* ---------- Layout ---------- */
  --el-grid-columns: 60;
  --el-html-font-size: 16px;
  --el-body-font-size: 16px;
  --el-navbar-height: 155px;
  --el-nav-link-font-size: 16px;
  --el-nav-link-padding-x: 25px;
  --el-logo-width: 179px;
  --el-content-padding-top: 0px;
  --el-content-padding-x: 30px;
  --el-item-title-font-size: 30px;
  --el-home-level-font-size: 30px;
  --el-home-title-font-size: 30px;
  --el-home-text-font-size: 16px;
  --el-series-title-font-size: 30px;
  --el-order-line-font-size: 30px;
  --el-footer-title-font-size: 18px;
  --el-footer-padding-top: 30px;

  /* ---------- Breakpoints ---------- */
  --el-bp-max-280: 280px;
  --el-bp-max-319: 319px;
  --el-bp-max-320: 320px;
  --el-bp-max-340: 340px;
  --el-bp-max-414: 414px;
  --el-bp-max-433: 433px;
  --el-bp-max-460: 460px;
  --el-bp-max-478: 478px;
  --el-bp-max-480: 480px;
  --el-bp-min-480: 480px;
  --el-bp-min-500: 500px;
  --el-bp-max-520: 520px;
  --el-bp-max-540: 540px;
  --el-bp-max-556: 556px;
  --el-bp-max-650: 650px;
  --el-bp-max-736: 736px;
  --el-bp-max-766: 766px;
  --el-bp-max-767: 767px;
  --el-bp-min-767: 767px;
  --el-bp-max-768: 768px;
  --el-bp-min-768: 768px;
  --el-bp-max-874: 874px;
  --el-bp-max-960: 960px;
  --el-bp-min-960: 960px;
  --el-bp-max-979: 979px;
  --el-bp-max-985: 985px;
  --el-bp-min-986: 986px;
  --el-bp-min-992: 992px;
  --el-bp-max-996: 996px;
  --el-bp-max-1024: 1024px;
  --el-bp-min-1040: 1040px;
  --el-bp-min-1090: 1090px;
  --el-bp-max-1124: 1124px;
  --el-bp-max-1140: 1140px;
  --el-bp-max-1150: 1150px;
  --el-bp-min-1185: 1185px;
  --el-bp-min-1200: 1200px;
  --el-bp-max-1204: 1204px;
  --el-bp-min-1220: 1220px;
  --el-bp-max-1228: 1228px;
  --el-bp-max-1259: 1259px;
  --el-bp-min-1320: 1320px;
  --el-bp-min-1370: 1370px;
  --el-bp-min-1380: 1380px;
  --el-bp-max-1500: 1500px;
  --el-bp-min-1650: 1650px;
  --el-bp-min-1660: 1660px;
  --el-bp-max-1669: 1669px;

  /* ---------- Motion durations ---------- */
  --el-duration-100ms: 0.1s;
  --el-duration-150ms: 0.15s;
  --el-duration-200ms: 0.2s;
  --el-duration-250ms: 0.25s;
  --el-duration-300ms: 0.3s;
  --el-duration-500ms: 0.5s;
  --el-duration-1000ms: 1s;

  /* ---------- Motion easings ---------- */
  --el-ease-ease: ease;
  --el-ease-ease-in-out: ease-in-out;
  --el-ease-linear: linear;
}

/* ---------- Responsive overrides ---------- */

@media (min-width: 479px) {
  :root {
    --el-navbar-height: 190px;
  }
}

@media (min-width: 480px) {
  :root {
    --el-navbar-height: 95px;
    --el-logo-width: 167.484px;
  }
}

@media (min-width: 481px) {
  :root {
    --el-logo-width: 167.984px;
  }
}

@media (min-width: 499px) {
  :root {
    --el-logo-width: 176.969px;
  }
}

@media (min-width: 500px) {
  :root {
    --el-logo-width: 177.484px;
  }
}

@media (min-width: 501px) {
  :root {
    --el-logo-width: 177.984px;
  }
}

@media (min-width: 519px) {
  :root {
    --el-logo-width: 179px;
  }
}

@media (min-width: 768px) {
  :root {
    --el-logo-width: 113.234px;
    --el-content-padding-top: 115px;
    --el-home-level-font-size: 50px;
    --el-home-title-font-size: 35px;
  }
}

@media (min-width: 769px) {
  :root {
    --el-logo-width: 113.469px;
  }
}

@media (min-width: 873px) {
  :root {
    --el-logo-width: 139.484px;
  }
}

@media (min-width: 874px) {
  :root {
    --el-logo-width: 139.734px;
  }
}

@media (min-width: 875px) {
  :root {
    --el-logo-width: 139.969px;
  }
}

@media (min-width: 959px) {
  :root {
    --el-logo-width: 160.984px;
  }
}

@media (min-width: 960px) {
  :root {
    --el-logo-width: 161.234px;
  }
}

@media (min-width: 961px) {
  :root {
    --el-logo-width: 161.484px;
  }
}

@media (min-width: 978px) {
  :root {
    --el-logo-width: 165.734px;
  }
}

@media (min-width: 979px) {
  :root {
    --el-logo-width: 165.984px;
  }
}

@media (min-width: 980px) {
  :root {
    --el-logo-width: 166.234px;
  }
}

@media (min-width: 984px) {
  :root {
    --el-logo-width: 167.203px;
  }
}

@media (min-width: 985px) {
  :root {
    --el-logo-width: 167.484px;
  }
}

@media (min-width: 986px) {
  :root {
    --el-logo-width: 167.734px;
  }
}

@media (min-width: 987px) {
  :root {
    --el-logo-width: 167.984px;
  }
}

@media (min-width: 991px) {
  :root {
    --el-logo-width: 168.953px;
  }
}

@media (min-width: 992px) {
  :root {
    --el-logo-width: 169.234px;
  }
}

@media (min-width: 993px) {
  :root {
    --el-logo-width: 169.484px;
  }
}

@media (min-width: 995px) {
  :root {
    --el-logo-width: 169.969px;
  }
}

@media (min-width: 996px) {
  :root {
    --el-logo-width: 170.219px;
  }
}

@media (min-width: 997px) {
  :root {
    --el-logo-width: 170.469px;
  }
}

@media (min-width: 1023px) {
  :root {
    --el-logo-width: 176.969px;
  }
}

@media (min-width: 1024px) {
  :root {
    --el-logo-width: 177.203px;
  }
}

@media (min-width: 1025px) {
  :root {
    --el-nav-link-padding-x: 0px;
    --el-logo-width: 177.484px;
  }
}

@media (min-width: 1039px) {
  :root {
    --el-logo-width: 179px;
  }
}

@media (min-width: 1125px) {
  :root {
    --el-home-level-font-size: 60px;
    --el-home-title-font-size: 40px;
    --el-home-text-font-size: 18px;
  }
}

@media (min-width: 1229px) {
  :root {
    --el-nav-link-font-size: 19px;
  }
}