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

:root {
  /* ---------- Colours ---------- */
  --mg-color-4c4d4d: rgb(76, 77, 77);
  --mg-color-ffffff: rgb(255, 255, 255);
  --mg-color-7e858b: rgb(126, 133, 139);
  --mg-color-bdbdbd: rgb(189, 189, 189);
  --mg-color-212121: rgb(33, 33, 33);
  --mg-color-1c4263: rgb(28, 66, 99);
  --mg-color-2f363b: rgb(47, 54, 59);
  --mg-color-303030: rgb(48, 48, 48);
  --mg-color-00030d: rgb(0, 3, 13);
  --mg-color-707070: rgb(112, 112, 112);
  --mg-color-8e9091: rgb(142, 144, 145);
  --mg-color-142954: rgb(20, 41, 84);
  --mg-color-ffffff-a0: rgba(255, 255, 255, 0);
  --mg-color-3d3d3d: rgb(61, 61, 61);
  --mg-color-ffffff-a0p75: rgba(255, 255, 255, 0.75);
  --mg-color-000001-a0p3: rgba(0, 0, 1, 0.3);
  --mg-color-26547b: rgb(38, 84, 123);
  --mg-color-000000-a0p05: rgba(0, 0, 0, 0.05);
  --mg-color-ffffff-a0p2: rgba(255, 255, 255, 0.2);
  --mg-color-000000: rgb(0, 0, 0);
  --mg-color-000000-a0p4: rgba(0, 0, 0, 0.4);
  --mg-color-77a3ec: rgb(119, 163, 236);
  --mg-color-303f9f: rgb(48, 63, 159);
  --mg-color-5ea9dd: rgb(94, 169, 221);
  --mg-color-12283b: rgb(18, 40, 59);
  --mg-color-a4a6a8: rgb(164, 166, 168);
  --mg-color-b94a48: rgb(185, 74, 72);
  --mg-color-dfdfdf: rgb(223, 223, 223);
  --mg-color-000000-a0p2: rgba(0, 0, 0, 0.2);
  --mg-color-000000-a0p15: rgba(0, 0, 0, 0.15);
  --mg-color-1b364b: rgb(27, 54, 75);
  --mg-color-000000-a0p09: rgba(0, 0, 0, 0.09);
  --mg-color-e5e5e5: rgb(229, 229, 229);
  --mg-color-d9e8eb-a0p4: rgba(217, 232, 235, 0.4);
  --mg-color-text: rgb(76, 77, 77);
  --mg-color-white: rgb(255, 255, 255);
  --mg-color-text-muted: rgb(126, 133, 139);
  --mg-color-border: rgb(189, 189, 189);
  --mg-color-text-dark: rgb(33, 33, 33);
  --mg-color-primary: rgb(28, 66, 99);
  --mg-color-text-strong: rgb(47, 54, 59);
  --mg-color-heading: rgb(48, 48, 48);
  --mg-color-black: rgb(0, 3, 13);
  --mg-color-title-rule: rgb(112, 112, 112);
  --mg-color-text-light: rgb(142, 144, 145);
  --mg-color-input-border: rgb(20, 41, 84);
  --mg-color-text-alt: rgb(61, 61, 61);
  --mg-color-white-75: rgba(255, 255, 255, 0.75);
  --mg-color-primary-light: rgb(38, 84, 123);
  --mg-color-pure-black: rgb(0, 0, 0);
  --mg-color-overlay-tile: rgba(0, 0, 0, 0.4);
  --mg-color-link-light: rgb(119, 163, 236);
  --mg-color-pagination-border: rgb(48, 63, 159);
  --mg-color-submit-hover: rgb(94, 169, 221);
  --mg-color-mobile-menu-link: rgb(18, 40, 59);
  --mg-color-text-faint: rgb(164, 166, 168);
  --mg-color-error: rgb(185, 74, 72);
  --mg-color-divider: rgb(223, 223, 223);
  --mg-color-primary-dark: rgb(27, 54, 75);
  --mg-color-lightbox-text: rgb(229, 229, 229);

  /* ---------- Font families ---------- */
  --mg-font-base: GothamGreek, sans-serif;
  --mg-font-proxima: "Proxima Nova", sans-serif;
  --mg-font-roboto: Roboto, Helvetica, Arial, sans-serif;

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

  /* ---------- Font sizes ---------- */
  --mg-fs-0: 0px;
  --mg-fs-10p9375: 10.9375px;
  --mg-fs-12: 12px;
  --mg-fs-12p5: 12.5px;
  --mg-fs-13: 13px;
  --mg-fs-14: 14px;
  --mg-fs-15p625: 15.625px;
  --mg-fs-16: 16px;
  --mg-fs-17: 17px;
  --mg-fs-18: 18px;
  --mg-fs-20: 20px;
  --mg-fs-24: 24px;
  --mg-fs-25: 25px;
  --mg-fs-35: 35px;
  --mg-fs-35p5729: 35.5729px;
  --mg-fs-40: 40px;
  --mg-fs-50: 50px;
  --mg-fs-54: 54px;
  --mg-fs-65: 65px;
  --mg-fs-100: 100px;

  /* ---------- Line heights ---------- */
  --mg-lh-10: 10px;
  --mg-lh-14: 14px;
  --mg-lh-15p6: 15.6px;
  --mg-lh-16: 16px;
  --mg-lh-18: 18px;
  --mg-lh-21: 21px;
  --mg-lh-24: 24px;
  --mg-lh-25: 25px;
  --mg-lh-26: 26px;
  --mg-lh-30: 30px;
  --mg-lh-36: 36px;
  --mg-lh-40: 40px;
  --mg-lh-42: 42px;
  --mg-lh-48: 48px;
  --mg-lh-61: 61px;
  --mg-lh-95: 95px;
  --mg-lh-normal: normal;

  /* ---------- Letter spacing ---------- */
  --mg-ls-normal: normal;

  /* ---------- Spacing ---------- */
  --mg-space-n120: -120px;
  --mg-space-n35: -35px;
  --mg-space-n30: -30px;
  --mg-space-n25: -25px;
  --mg-space-n15: -15px;
  --mg-space-3: 3px;
  --mg-space-4: 4px;
  --mg-space-5: 5px;
  --mg-space-9: 9px;
  --mg-space-10: 10px;
  --mg-space-15: 15px;
  --mg-space-20: 20px;
  --mg-space-25: 25px;
  --mg-space-30: 30px;
  --mg-space-35: 35px;
  --mg-space-40: 40px;
  --mg-space-50: 50px;
  --mg-space-60: 60px;
  --mg-space-95: 95px;
  --mg-space-100: 100px;
  --mg-space-150: 150px;

  /* ---------- Radius ---------- */
  --mg-radius-1: 1px;
  --mg-radius-10: 10px;
  --mg-radius-25: 25px;

  /* ---------- Shadows ---------- */
  --mg-shadow-1: rgba(0, 0, 1, 0.3) 0px 0px 2px 2px;
  --mg-shadow-2: rgba(255, 255, 255, 0.2) 0px 1px 0px 0px inset, rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
  --mg-shadow-3: rgba(0, 0, 0, 0.15) 0px 2px 4px 0px inset, rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
  --mg-shadow-4: rgba(0, 0, 0, 0.2) 0px 0px 3px 1px, rgba(0, 0, 0, 0.2) 0px 0px 1px 0px;
  --mg-shadow-5: rgba(0, 0, 0, 0.09) 0px 1px 2px;

  /* ---------- Layout ---------- */
  --mg-grid-columns: 60;
  --mg-html-font-size: 16px;
  --mg-body-font-size: 16px;
  --mg-navbar-height: 80px;
  --mg-navbar-padding-top: 0px;
  --mg-navbar-inner-max-width: 1170px;
  --mg-nav-link-font-size: 16px;
  --mg-nav-link-padding-x: 25px;
  --mg-content-padding-top: 0px;
  --mg-content-padding-x: 15px;
  --mg-item-title-font-size: 25px;
  --mg-card-title-font-size: 25px;
  --mg-ds-container-max-width: 1300px;
  --mg-ds-container-padding-x: 15px;
  --mg-section-title-font-size: 54px;
  --mg-section-text-font-size: 14px;
  --mg-section1-padding-top: 0px;
  --mg-section2-padding-top: 25px;
  --mg-projects-title-font-size: 35px;
  --mg-footer-padding-top: 0px;
  --mg-footer-padding-x: 0px;
  --mg-prefooter-height: 300px;
  --mg-contact-title-font-size: 40px;
  --mg-logo-max-width: 141px;
  --mg-logo-width-mid: 90px;
  --mg-slider-ratio-desktop: 2 / 1;
  --mg-slider-ratio-mobile: 3 / 5;
  --mg-card-col-width-xs: 39%;
  --mg-card-col-width-sm: 41%;
  --mg-card-col-width-md: calc(100% - 60px);
  --mg-card-col-width-lg: 25%;

  /* ---------- Breakpoints ---------- */
  --mg-bp-max-0: 0px;
  --mg-bp-max-320: 320px;
  --mg-bp-max-360: 360px;
  --mg-bp-max-414: 414px;
  --mg-bp-max-460: 460px;
  --mg-bp-max-480: 480px;
  --mg-bp-min-480: 480px;
  --mg-bp-min-500: 500px;
  --mg-bp-max-556: 556px;
  --mg-bp-max-600: 600px;
  --mg-bp-min-601: 601px;
  --mg-bp-max-650: 650px;
  --mg-bp-max-767: 767px;
  --mg-bp-max-768: 768px;
  --mg-bp-min-768: 768px;
  --mg-bp-max-800: 800px;
  --mg-bp-max-823: 823px;
  --mg-bp-max-959: 959px;
  --mg-bp-max-960: 960px;
  --mg-bp-min-960: 960px;
  --mg-bp-max-979: 979px;
  --mg-bp-max-991: 991px;
  --mg-bp-min-992: 992px;
  --mg-bp-max-1023: 1023px;
  --mg-bp-min-1023: 1023px;
  --mg-bp-max-1024: 1024px;
  --mg-bp-min-1025: 1025px;
  --mg-bp-min-1040: 1040px;
  --mg-bp-min-1090: 1090px;
  --mg-bp-max-1100: 1100px;
  --mg-bp-max-1150: 1150px;
  --mg-bp-min-1185: 1185px;
  --mg-bp-min-1200: 1200px;
  --mg-bp-min-1220: 1220px;
  --mg-bp-max-1259: 1259px;
  --mg-bp-max-1280: 1280px;
  --mg-bp-min-1380: 1380px;
  --mg-bp-max-1600: 1600px;
  --mg-bp-min-1650: 1650px;

  /* ---------- Motion durations ---------- */
  --mg-duration-100ms: 0.1s;
  --mg-duration-150ms: 0.15s;
  --mg-duration-200ms: 0.2s;
  --mg-duration-300ms: 0.3s;
  --mg-duration-350ms: 350ms;
  --mg-duration-400ms: 400ms;
  --mg-duration-500ms: 0.5s;
  --mg-duration-800ms: 0.8s;
  --mg-duration-1000ms: 1000ms;
  --mg-duration-8000ms: 8000ms;

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

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

@media (min-width: 601px) {
  :root {
    --mg-item-title-font-size: 40px;
    --mg-section-title-font-size: 50px;
    --mg-section-text-font-size: 16px;
    --mg-contact-title-font-size: 65px;
  }
}

@media (min-width: 768px) {
  :root {
    --mg-content-padding-x: 30px;
  }
}

@media (min-width: 801px) {
  :root {
    --mg-navbar-height: 130px;
    --mg-item-title-font-size: 65px;
    --mg-section-title-font-size: 65px;
  }
}

@media (min-width: 960px) {
  :root {
    --mg-item-title-font-size: 45px;
    --mg-section-title-font-size: 55px;
  }
}

@media (min-width: 1024px) {
  :root {
    --mg-nav-link-padding-x: 0px;
  }
}

@media (min-width: 1025px) {
  :root {
    --mg-section-title-font-size: 65px;
  }
}

@media (min-width: 1281px) {
  :root {
    --mg-item-title-font-size: 65px;
  }
}

@media (min-width: 1601px) {
  :root {
    --mg-projects-title-font-size: 40px;
  }
}