/* =========================================
   === TYPOGRAPHY MLK STACK SYSTEM DEMO ====
   ========================================= */

/*
 -----notes-------
Do NOT add .h2 / .text-small or !important here. This makes them priority and clash with UX system
*/

/* MLK TYPOGRAPHY SYSTEM */
/* Base */
html { font-size: 16px; } /* 1rem = 16px*/ 
body { font-size: 1rem; }  /* 16px */
body.mlk-type .box-text p { font-size: 1rem; }  /* ~16px changes p text in team members and service cards*/


/* Typography defaults that can still be modified with UX Builder - still need to figure out*/ 
body.mlk-type h1	{ font-size: 2.5rem; line-height: 1.4;} /* ~42px */
body.mlk-type h2	{ font-size: 1.8rem; line-height: 1.4; }  /* ~30px */
body.mlk-type h3    { font-size: 1.5rem; line-height: 1.3; } /* ~24px */
body.mlk-type h4	{ font-size: 1.25rem; line-height: 1.3; } /* ~20px */
body.mlk-type h5	{ font-size: 1.125rem; line-height: 1.3; } /* ~18px */
body.mlk-type small { font-size: 0.9rem; }  /* ~14px */


/*************** MOBILE CSS ***************/
@media only screen and (max-width: 48em) { /* 48em = 768px */
/* Typography Mobile Sizes */
body.mlk-type h1	{ font-size: 2rem; line-height: 1.4;} /* ~32px */
body.mlk-type h2	{ font-size: 1.5rem; line-height: 1.4; }  /* ~24px */
body.mlk-type h3    { font-size: 1.25rem; line-height: 1.3; } /* ~20px */
body.mlk-type h4	{ font-size: 1.125rem; line-height: 1.3; } /* ~18px */
body.mlk-type h5	{ font-size: 1rem; line-height: 1.3; } /* ~16px */
body.mlk-type small { font-size: 0.9rem; }  /* ~14px */
}