/*
CSS variables for traqline
*/
:root {
  --base-font-size: 1.1111vw;
  font-size: var(--base-font-size);
  --top-nav-height: 60px; /* Set this to current height of the nav menu on top */
  /* brand colors: source - Figma */
  --trq-black: #040202;
  --trq-navy: #011F3A;
  --trq-medium-blue: #0990D5;
  --trq-light-blue: #69C7FE;
  --trq-green: #99CC00;
  --trq-dark-gray: #4F4F4F;
  --trq-light-gray: #C2C2C2;
  --trq-dark-grey: var(--trq-dark-gray);
  --trq-light-grey: var(--trq-light-gray);
  --trq-white: #FFFFFF;
  --skumetrix-orange: #FF7112;
  --hpos-gold: #F5BF04;
  --hpos-yellow: #FFD80B;
  --primary: var(--trq-medium-blue);
  --secondarytext: #0A0A09;
  --icon-color-1: #DB9E42;
  --icon-color-2: #1BC2D4;
  --default-banner-bg: #ccc;
  --solutions-banner-bg: #001f3b;
  --industries-banner-bg: #fbe5e7;
  /* banner specific */
  --pagebanner-wrapper-width: clamp(30rem, 36vw, 43rem);
  --pagebanner-image-height: 27.5vw;
  --pagebanner-image-max-height-mobile: 230px;
  --banner-padding: 11.25%;
  --logo-train-travel-left: -100%;
  /* widths  */
  --page-width: clamp(760px, 82.23vw, 2000px);
  --blog-post-gaps: var(--f-30);
  /* letter spacings as per figma */
  --ls1: 1px;
  --ls2: 0.7px;
  --ls3: 0.02em;
  --ls4: 0.03em;
  --ls5: 0.5px;
  --ls6: 0.3px;
  /* --- */
  /* font-weights as per figma design spec */
  --weight1: 100;
  --weight2: 200;
  --weight3: 300;
  --weight4: 450;
  --weight5: 500;
  --weight6: 600;
  --weight7: 700;
  --weight8: 800;
  --font: "neue-haas-grotesk-display", Arial, sans-serif;
  --h-font: "neue-haas-grotesk-display", Arial, sans-serif;
  /* TYPOGRAPHY - font definitions */
  /* font sizes */
  --f-9: 0.625vw;
  --f-12: 0.8333333333vw;
  --f-13: 0.9027777778vw;
  --f-14: 0.9722222222vw;
  --f-15: 1.0416666667vw;
  --f-16: 1.1111111111vw;
  --f-17: 1.1805555556vw;
  --f-18: 1.25vw;
  --f-19: 1.3194444444vw;
  --f-20: 1.3888888889vw;
  --f-22: 1.5277777778vw;
  --f-23: 1.5972222222vw;
  --f-24: 1.6666666667vw;
  --f-25: 1.7361111111vw;
  --f-27: 1.875vw;
  --f-30: 2.0833333333vw;
  --f-31: 2.1527777778vw;
  --f-33: 2.2916666667vw;
  --f-34: 2.3611111111vw;
  --f-35: 2.4305555556vw;
  --f-36: 2.5vw;
  --f-40: 2.7777777778vw;
  --f-45: 3.125vw;
  --f-50: 3.4722222222vw;
  --f-55: 3.8194444444vw;
  --f-64: 4.4444444444vw;
  --f-65: 4.5138888889vw;
  --f-96: 6.6666666667vw;
  --f-100: 6.9444444444vw;
  --f-130: 9.0277777778vw;
  --f-150: 10.4166666667vw;
  /* line-heights */
  --lh-15: 1.0416666667vw;
  --lh-18: 1.25vw;
  --lh-20: 1.3888888889vw;
  --lh-22: 1.5277777778vw;
  --lh-23: 1.5972222222vw;
  --lh-24: 1.6666666667vw;
  --lh-25: 1.7361111111vw;
  --lh-26: 1.8055555556vw;
  --lh-27: 1.875vw;
  --lh-28: 1.9444444444vw;
  --lh-29: 2.0138888889vw;
  --lh-30: 2.0833333333vw;
  --lh-32_5: 2.2569444444vw;
  --lh-35: 2.4305555556vw;
  --lh-36: 2.5vw;
  --lh-37: 2.5694444444vw;
  --lh-38: 2.6388888889vw;
  --lh-39: 2.7083333333vw;
  --lh-40: 2.7777777778vw;
  --lh-42: 2.9166666667vw;
  --lh-44: 3.0555555556vw;
  --lh-46: 3.1944444444vw;
  --lh-47: 3.2638888889vw;
  --lh-60: 4.1666666667vw;
  --lh-84_5: 5.8680555556vw;
  --f1: var(--f-34);
  --lh1: var(--lh-39);
  --f2: var(--f-31);
  --lh2: var(--lh-39);
  --f3: var(--f-40);
  --lh3: var(--lh-46);
  --f4: var(--f-16);
  --lh4: var(--lh-28);
  --fe: var(--f-16);
  --lhe: var(--lh-40);
  --f7: var(--f-20);
  --lh7: var(--lh-26);
  --f8: var(--f-17);
  --lh8: var(--lh-24);
  --f9: var(--f-23);
  --lh9: var(--lh-30);
  --f10: var(--f-12);
  --lh10: var(--lh-15);
  --subtext-font-size: var(--f10);
  --subtext-line-height: var(--lh10);
  --home-banner-p-large-size: var(--f-22);
  /* common font-size/line-height combinations */
  --fh1: 34px/39px; /* for page titles */
  --fh2: 31px/39px; /* h2 */
  --fh3: 40px/46px; /* h3 */
  --fh4: 16px/28px; /* h4 */
  --fh5: 25px/47px; /* h5 */
  --fh6: 16px/40px; /* eyebrow */
  --fh7: 20px/26px; /* large copy */
  --fh8: 17px/24px; /* normal body copy, light copy, other copy */
  --fh9: 23px/30px; /* h6 */
  --fh10: 12px/15px; /* this is for sub-text like on the subscribe input */
  /* ---- */
  /* use below generic one after defining weight, size-height, and font for any ruleset */
  --weight: 450;
  --size-height: var(--fh4);
  --generic-font-def: normal normal var(--weight) var(--size-height) var(--font);
  /* backward compat */
  --title-eyebrow-font-size: 16px;
  --title-eyebrow-line-h: 40px;
  --title-eyebrow-letter-spacing: 1px;
  /* section padding */
  --section-padding1: var(--f-35);
  --section-title-pad-bottom: 2.7777777778vw;
  /* tabs */
  --tab-font-size: clamp(16px, var(--f-20), 28px);
  --tab-line-h: var(--lh-28);
  --discover-wrapper-tab-width: 18rem;
  --lightgrey1: #c2c2c2;
  --lightgrey2: #ebebeb;
  --lightgrey3: #8e8e8e;
  --trq-tab-accent: var(--trq-green);
  --tab-border-color: #C2C2C2;
  --active-tab-border-color: var(--trq-green,#99CC00);
  --tab-text-transform: "capitalize";
  /* heading font weight across h1 through h3 */
  --hw: 600;
  /* heading properties */
  --h1-font: var(--font);
  --h1-color: black;
  --h1-weight: var(--weight5);
  --h1-size: var(--f-34);
  --h1-line-h: var(--lh-39);
  --h1-letter-spacing: 0.7px;
  --h2-size: var(--f-32);
  --h2-line-h: var(--lh-39);
  --h3-size: var(--f-40);
  --h3-line-h: var(--lh-46);
  --h6-size: var(--f-22);
  --h6-line-h: var(--lh-30);
  /* page description styles */
  --subhead-size: var(--f-20);
  --subhead-line-h: var(--lh-26);
  --subhead-weight: 450;
  /* buttons */
  --line-button-color: transparent;
  --line-button-text-color: black;
  --line-button-shadow-color: #00000099;
  --solid-button-color: var(--primary);
  --solid-button-hover-color: #00699A;
  --solid-button-color-hover: var(--solid-button-hover-color); /* just for ease of use. prefer to use the previous */
  --solid-button-shadow-color: var(--solid-button-hover-color);
  --solid-button-text-color: white;
  --button-line-h: var(--lh-20);
  --button-border-radius: var(--button-line-h);
  --button-font-size: var(--f-16);
  --button-font-weight: var(--weight5);
  --button-padding: 10px 25px;
  --button-letter-spacing: var(--ls2);
  /* for dark backgrounds */
  --outline-button-color: transparent;
  --outline-button-text-color: var(--solid-button-color);
  --line-button-text-color-ondark: white;
  --line-button-shadow-color-ondark: var(--line-button-text-color-ondark);
  /* stats */
  --stats-size: clamp(32px, 16vh, 60px);
  --stats-weight: 350;
  --stats-line-h: 130%;
  --stats-letter-spacing: 0.02em;
  --stats-color: var(--primary);
  --quote-pagination-active-color: var(--primary);
  /* tokens */
  --token-size: var(--f-16);
  --token-line-h: var(--lh-28);
  --token-color: #F5F5F5;
  /* challenges */
  --challenge-size: 20px;
  --challenge-line-h: 26px;
  /* qna */
  --qna-color: #040202;
  --qna-size: var(--f-17);
  --qna-line-h: var(--lh-24);
  /* blog blocks */
  --blog-block-content-gap: var(--f-16);
  /* alt section - dark blue */
  --section-alt-bgcolor: var(--trq-navy);
  --section-alt-color: white;
  /* alt section - green */
  --section-alt-g-bgcolor: #65b23499;
  --section-alt-g-color: var(--h1-color);
  /* alt section.cta - bluish */
  --section-cta-bgcolor: var(--primary);
  --section-cta-color: white;
  /* toggles */
  --toggle-button-green: #65B234;
  --toggle-button-accent: var(--toggle-button-green);
  /* FIXME: SOME LEGACY VARIABLE NAMES  */
  --ftrbtn: #46b6f7;
  --ftrbtnhov: rgba(9, 144, 213, 0.8);
}

@media screen and (max-width: 640px) {
  :root {
    --base-font-size: 4vw;
    font-size: var(--base-font-size);
    --top-nav-height: 58px;
    --page-width: 100%;
    --page-padding-x: 1rem;
    --f2: var(--f-27);
    --lh2: var(--lh-35);
    /* BUTTONS */
    --button-line-h: var(--lh-24);
    --button-border-radius: var(--button-line-h);
    --button-padding: 6px 15px;
    --button-letter-spacing: var(--ls2);
    --discover-wrapper-tab-width: 70vw;
    /* FONT SIZES FOR MOBILE */
    --f-9: 2.25vw;
    --f-12: 3vw;
    --f-13: 3.25vw;
    --f-14: 3.5vw;
    --f-15: 3.75vw;
    --f-16: 4vw;
    --f-17: 4.25vw;
    --f-18: 4.5vw;
    --f-19: 4.75vw;
    --f-20: 5vw;
    --f-22: 5.5vw;
    --f-23: 5.75vw;
    --f-24: 6vw;
    --f-25: 6.25vw;
    --f-27: 6.75vw;
    --f-30: 7.5vw;
    --f-31: 7.75vw;
    --f-33: 8.25vw;
    --f-34: 8.5vw;
    --f-35: 8.75vw;
    --f-36: 9vw;
    --f-40: 10vw;
    --f-45: 11.25vw;
    --f-50: 12.5vw;
    --f-55: 13.75vw;
    --f-64: 16vw;
    --f-65: 16.25vw;
    --f-96: 24vw;
    --f-100: 25vw;
    --f-130: 32.5vw;
    --f-150: 37.5vw;
    /* LINE-HEIGHTS FOR MOBILE */
    --lh-15: 3.75vw;
    --lh-18: 4.5vw;
    --lh-20: 5vw;
    --lh-22: 5.5vw;
    --lh-23: 5.75vw;
    --lh-24: 6vw;
    --lh-25: 6.25vw;
    --lh-26: 6.5vw;
    --lh-27: 6.75vw;
    --lh-28: 7vw;
    --lh-29: 7.25vw;
    --lh-30: 7.5vw;
    --lh-32_5: 8.125vw;
    --lh-35: 8.75vw;
    --lh-36: 9vw;
    --lh-37: 9.25vw;
    --lh-38: 9.5vw;
    --lh-39: 9.75vw;
    --lh-40: 10vw;
    --lh-42: 10.5vw;
    --lh-44: 11vw;
    --lh-46: 11.5vw;
    --lh-47: 11.75vw;
    --lh-60: 15vw;
    --lh-84_5: 21.125vw;
  }
  .featured-posts-section-title {
    padding-left: var(--blog-post-gaps);
  }
}
@media screen and (min-width: 641px) and (max-width: 1440px) {
  :root {
    --base-font-size: 16px;
    font-size: var(--base-font-size);
    --top-nav-height: 60px;
    --page-width: 82.23%;
    --page-padding-x: 2rem;
    /* FONT SIZES FOR TABLETS */
    --f-9: 9px;
    --f-12: 12px;
    --f-13: 13px;
    --f-14: 14px;
    --f-15: 15px;
    --f-16: 16px;
    --f-17: 17px;
    --f-18: 18px;
    --f-19: 19px;
    --f-20: 20px;
    --f-22: 22px;
    --f-23: 23px;
    --f-24: 24px;
    --f-25: 25px;
    --f-27: 27px;
    --f-30: 30px;
    --f-31: 31px;
    --f-33: 33px;
    --f-34: 34px;
    --f-35: 35px;
    --f-36: 36px;
    --f-40: 40px;
    --f-45: 45px;
    --f-50: 50px;
    --f-55: 55px;
    --f-64: 64px;
    --f-65: 65px;
    --f-96: 96px;
    --f-100: 100px;
    --f-130: 130px;
    --f-150: 150px;
    /* LINE-HEIGHTS FOR TABLETS */
    --lh-15: 15px;
    --lh-18: 18px;
    --lh-20: 20px;
    --lh-22: 22px;
    --lh-23: 23px;
    --lh-24: 24px;
    --lh-25: 25px;
    --lh-26: 26px;
    --lh-27: 27px;
    --lh-28: 28px;
    --lh-29: 29px;
    --lh-30: 30px;
    --lh-32_5: 32.5px;
    --lh-35: 35px;
    --lh-36: 36px;
    --lh-37: 37px;
    --lh-38: 38px;
    --lh-39: 39px;
    --lh-40: 40px;
    --lh-42: 42px;
    --lh-44: 44px;
    --lh-46: 46px;
    --lh-47: 47px;
    --lh-60: 60px;
    --lh-84_5: 84.5px;
  }
}/*# sourceMappingURL=traqline-variables.css.map */