@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300..900&display=swap');
:root {
    /* font */
    --font: 'Montserrat', sans-serif;
    --fw: 400;
    --fw-l: 300;
    --fw-m: 500;
    --fw-b:600;
    --fw-bb:900;
  /* HSLA color modifiers  */
  /* --l: */
  /* colors for classes with -t- -bg- */
  --white: #fff;
  --gray1: #ddd;
  --gray2: #bbb;
  --gray3: #999;
  --gray4: #777;
  --gray5: #555;
  --black: #222;
  --ok: #88c459;
  --err: #f5414f;
  --warn: #eab400;
  --brand: #282D7D;
  /* --brand: #DB5D1E; */
  --clr-base: #333;

  --brand-lite: #F77100;
  --brand-dark: #C94300;
  /* base text colors  */
  --clr-input: var(--gray5);
  --clr-txt-lite: var(--gray4);
  --clr-link: var(--brand);
  --clr-hr: #ddd; /*mob/ menu hr */
  
  --clr-btn: #fff;
  --clr-btn-inv: #333;
  /* --clr-table-brdr: #ddd; */

  --bg-base: #fff;
  /* --opaq-1:100%;
  --opaq-05:50%;
  --opaq-07:70%;
  --opaq: var(--opaq-1);

  /* .-rnd border-radius */
  --block-rnd: 20px; 
  /* 0px 0px 1em  rgb(255 255 255 / 0%) inset, 0px 2px 5px rgb(0 0 0 / 20%) */
  
  /* FORMS */
  --fld-btn-lh: 1.2em;  /* field & button line-height */
  --label-padd: .2em;
  /* BUTTONS */
  /* --btn-sh: 0px 2px 5px rgba(0,0,0, .2); 
  --btn-sh-hover: 0px 1px 3px rgba(0,0,0, .2); */
  --btn-rnd: .5em;
  --btn-hover-filter: brightness(1.05);/* for filled buttons */  
  --btn-active-filter: brightness(.8);
  --btn-hover-bg: ; /* for transparent buttons */
  --btn-fw: 400; /* button font-weight*/
  --btn-brdr: 1px; /* border width */
  --btn-y: .75em; /* Y padding */
  --btn-x: 1em; /* X padding */
  --btn-icon: 1.5em;
  --btn-icon-gap: calc(var(--btn-icon)/4);
  --btn-icon-mg: .4em var(--btn-icon-gap) .4em 0;
  /* BUTTON/FIELDS MODIFICATION */
  --btn-x-wide: 2em; /* X padding */
  --btn-y-fat: 1em; /* Y padding */
  --btn-x-fat: 3.6em; /* X padding */
  /*FIELDS*/
  --fld-rnd: .3em; 
  --fld-y: var(--btn-y); /* field Y padding */
  --fld-x: .6em; /* field X padding */
  --fld-lh: 1.2em;  /* field line-height */
  --fld-brdr: 1px; /* border width */
  --fld-bg: #f7f7f7; /* field bg */
  --fld-brdr-clr: var(--gray1);
  --fld-focus: var(--brand);
  --fld-plchldr: #aaa; /* placeholder color */
  --av-size: 2em; /*avatar size*/
  --av-rnd: 50%;

  /* for maxw- wrappers */
  --xs:22.5rem;
  --s:35.5rem;
  --m:48rem;
  --l:64rem;
  --xl:80rem;
  --xxl:90rem;
  /* Hdr & menu */
  --Hdr-logo-w: 35vw;
  --Hdr-logo-maxw: 125px;
  --Hdr-h: 4em;
  --Hdr-bg: rgba(255,255,255,.8);
  --Hdr-pos: fixed;
  --menu-pos: absolute;
  --menu-active-bg: transparent;
  --menu-sub-bg: var(--Hdr-bg);
  --menu-el-padd: .8em .8em; 
  --menu-sh: 0px 10px 20px rgb(0 0 0 / 20%);
  --menu-backdrop: blur(7px);

  /* transitions */
  --trans-base: ease .3s;
  /* tables */
   /* line-height */
   --lh-hdr: 1.25em;
   --lh: 1.4em;
  /* font-size */
  --f-h7: clamp(0.7rem, -0.04vw + 0.71rem, 0.77rem);
  --f-h6: clamp(0.81rem, 0.02vw + 0.8rem, 0.88rem);
  --f-base: clamp(0.94rem, 0.11vw + 0.91rem, 1rem);
  --f-h5: clamp(1.09rem, 0.23vw + 1.04rem, 1.19rem);
  --f-h4: clamp(1.26rem, 0.39vw + 1.17rem, 1.43rem);
  --f-h3: clamp(1.46rem, 0.61vw + 1.33rem, 1.68rem);
  --f-h2: clamp(1.7rem, 0.9vw + 1.49rem, 2rem);
  /* --f-h1: clamp(1.97rem, 1.28vw + 1.68rem, 2.7rem);   */
  /* --f-h1: clamp(2.1rem, 1.4vw + 1.98rem, 3.2rem);   */
  --f-h1: clamp(2rem, 1.34vw + 1.8rem, 3.2rem);  
  --f-h0: clamp(2.5rem, 1.6vw + 2.1rem, 5.5rem);   
  /* --rmenu-w: 340px; */
  /* grid */
  --col-gap05x: .5rem;
  --col-gap: 1rem;
  /* --col-gap: clamp(1rem, 0.25vw + 1rem, 1.2rem); */
  --col-gap2x: 2rem;
  --col-gap3x: 3rem;
  --col-gap4x: 4rem;
  --col-gap5x: 5rem;

  --box-sh: 0px 4px 45px 0px rgb(194 186 178 / 45%);
}
/* body, div, div > *, p, input, select, textarea, a  */
* {font-family: var(--font); font-weight: 400;}
/* * {font-family: 'Raleway', sans-serif;} */
.-fw-l {--fw:200}
.-fw-m {--fw:400}
.-fw-mb {--fw:600}
.-fw-b, strong {--fw:700}
.-fw-bb {--fw:900}
[class*=-fw-], strong {font-weight: var(--fw);}