/* 
    These CSS styles are being imported into head to give access to some common color and sizing variables around the website for future page creation.
    Use if you want.
*/


:root {
    /* Official Branding Colors */
    --solid-white: #ffffff;    
    --solid-black: #000000;
    --lfcu-dark-blue: #1f497e;
    --lfcu-teal: #0d98c7;
    --lfcu-light-blue: #75c8f0;
    --lfcu-brown: #b84f2d;
    --lfcu-sky-blue: #9ed5e8;
    --lfcu-red: #b72e51;
    --lfcu-dark-gray: #434343;
    --lfcu-green: #86d0d0;
    --lfcu-light-green: #dff5ef;
    --lfcu-gray: #eaeaea;
    --lfcu-dark-gray: #434343;
    /* Commonly Used in Website */
    --dark-green: #35B15B;
    --forest-green: rgb(30, 109, 54);
    --light-gray: #f1f1f1;
    --warning-red: #a30314;
    --callout-orange: #b55132;
    --body-navy: #11466B;
    --alt-blue: #337AB7;
    --border-gray: #bbbbbb;
    --text-header-blue: #0368b0;
    --text-disclaimer: #555555;
    --warning-yellow: #EAC75D;
    --disclosure-bg: #f9f9f9;
    /* Typefaces */
    --font-main: "Open Sans";
    --font-fallback: "Arial";
    --font-communications: "Isidora Sans";
    --font-title: "Aurora";
    --font-misc: "Gotham";
    /* Common Sizes */
    --padding-xs: 4px;
    --padding-sm: 8px;
    --padding-md: 12px;
    --padding-lg: 24px;
    --padding-xl: 32px;
    --padding-2x: 48px;
    --padding-3x: 58px;
    --padding-section: 13%;

    --border-radius-xs: 4px;
    --border-radius-sm: 8px;
    --border-radius-md: 12px;
    --border-radius-lg: 24px;
    --border-radius-xl: 32px;
    --border-radius-2x: 48px;
    --border-radius-3x: 58px;

    --font-xs: 14px;
    --font-sm: 16px;
    --font-mobile: 16px;
    --font-md: 18px;
    --font-lg: 21px;
    --font-xl: 28px;
    --font-2x: 36px;
    --font-3x: 48px;
    --font-4x: 58px;

    --gap-xs: 4px;
    --gap-sm: 8px;
    --gap-md: 12px;
    --gap-lg: 24px;
    --gap-xl: 32px;
    --gap-2x: 48px;
    --gap-2x: 58px;


}