@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700'); /* Roboto */
@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed:400,700'); /* Roboto Condensed */
/* Calling fonts with <link> is preferred */

/*!
FISHER LANDING PAGE DESIGN SYSTEM (LPDS) BASE LAYER 
This CSS file is the base layer that sits above Bootstrap but below the Design/Theme layer. Separate styles (colors, borders, backgrounds) from layout (margins, heights, padding)
Sitecore template config: Enable Bootstrap 4 + Check 'Disable CSS Site Settings Override File' + Select Blank theme in Theme Details tab) then add modifiers to Pres Details item
Bootstrap: https://getbootstrap.com/docs/4.6/
Use local CSS for specific project styles that aren't a global fit for the Foundation or the Theme layers.
Scaffolding: Use BEM naming conventions --> [global namespace:lpds]-[component type prefix]-[BEM syntax:component__part--modifier] ie .lpds-e-Header__logo--white
Spacing: Keep all vertical spacing (margin, padding, heights) to multiples of 4
Use only colors in the color palette of the Design System https://www.figma.com/file/gJE6GbKIpNOJ9ps4DaxicC/
*/


/*! T Y P O G R A P H Y */
/*! Default/Mobile */
:root {
	--font-pri:         'Roboto', sans-serif;
	--font-sec:         'Roboto Condensed', sans-serif;
    
    --text-base-size:   1rem; /* size set in html/body */
    
    --text-body-xs: 12px;
    --text-body-sm: 14px;
    --text-body-md: 16px; 
    --text-body-lg: 18px;
    --text-body-xl: 24px;
    --text-body-xxl: 28px;
    --text-body: var(--text-body-lg);

    --text-subheading: 20px;
    --text-subheader: var(--text-subheading);

    --text-heading-xs: 14px;
    --text-heading-sm: 16px;
    --text-heading-md: 18px;
    --text-heading-lg: 24px;
    --text-heading-xl: 32px;
    --text-heading-xxl: 36px;

    --text-label-sm: 12px;
    --text-label-md: 14px;
    --text-label-lg: 16px;
}

/*! Tablet/Desktop */
@media (min-width: 576px) {
    :root {
        --text-body: var(--text-body-md);
        --text-body-xs: 14px;
        --text-body-sm: 16px;
        --text-body-md: 18px; 
        --text-body-lg: 20px;
        --text-body-xl: 24px;
        --text-body-xxl: 28px;        
        
        --text-subheading: 24px;
        --text-subheader: var(--text-subheading);

        --text-heading-xs: 18px;
        --text-heading-sm: 24px;
        --text-heading-md: 32px;
        --text-heading-lg: 40px;
        --text-heading-xl: 48px;
        --text-heading-xxl: 60px;

        --text-label-sm: 14px;
        --text-label-md: 16px;
        --text-label-lg: 18px;
    }
}

html {font-size:100%;}
body {font-family: var(--font-pri);font-size: var(--text-body);color:var(--color-text-base);line-height: 1.75;}

.heading--xs, h5, .heading--sm, h4, .heading--md, h3, .heading--lg, h2 {font-weight: 700;font-style: normal;}
.heading--xs, h5 {font-size:var(--text-heading-xs)}
.heading--sm, h4 {font-size:var(--text-heading-sm)}
.heading--md, h3 {font-size:var(--text-heading-md)}
.heading--lg, h2 {font-size:var(--text-heading-lg)}
.heading--xl, h1 {font-size:var(--text-heading-xl);font-weight: 300;}
.heading--xxl    {font-size:var(--text-heading-xxl);font-weight: 300;}
.subheading {font-size:var(--text-subheading);font-weight: 300;}

.heading--light {font-weight: 300;}

.text--xs {font-size:var(--text-body-xs)}
.text--sm {font-size:var(--text-body-sm)}
.text--md {font-size:var(--text-body-md)}
.text--lg {font-size:var(--text-body-lg)}
.text--xl {font-size:var(--text-body-xl)}

.eyebrow, .label {text-transform: uppercase;letter-spacing: 0.1em;font-weight: bold;}
.eyebrow--sm, .label--sm  {font-size:var(--text-label-sm)}
.eyebrow--md, .label--md {font-size:var(--text-label-md)}
.eyebrow--lg, .label--lg {font-size:var(--text-label-lg)}

.disclaimer {font-size:var(--text-body-sm);font-style: italic;}

b, strong {font-weight: 600;}


/*! C O L O R S */
:root {
    --color-black:      #000000;
    --color-white:      #FFFFFF;

    /*! Primary */
    --color-green: #034638; --color-green-80:#356B60; --color-green-60:#689088; --color-green-40:#9AB5AF; --color-green-20:#CDDAD7; --color-green-10:#E6EDEB;
    --color-blue: #0C2340; --color-blue-80: #3D4F66; --color-blue-60: #6D7B8C; --color-blue-40: #9EA7B3; --color-blue-20: #CED3D9; --color-blue-10: #E7E9EC;
    --color-canopy: #007952; --color-canopy-80: #339475; --color-canopy-60: #66AF97; --color-canopy-40: #99C9BA; --color-canopy-20: #CCE4DC; --color-canopy-10: #E6F2EE;
    --color-evergreen: #61BD9A; --color-evergreen-80: #81CAAE; --color-evergreen-60: #A0D7C2; --color-evergreen-40: #C0E5D7; --color-evergreen-20: #DFF2EB; --color-evergreen-10: #EFF8F5;
    --color-peppermint: #B3F0DD; --color-peppermint-80: #C2F3E4; --color-peppermint-60: #D1F6EB; --color-peppermint-40: #E1F9F1; --color-peppermint-20: #F0FCF8; --color-peppermint-10: #F7FEFC;
    --color-ridge: #165C7D; --color-ridge-80: #457D97; --color-ridge-60: #739DB1; --color-ridge-40: #A2BECB; --color-ridge-20: #D0DEE5; --color-ridge-10: #E8EFF2;
    --color-pond:#45A5D1; --color-pond-80: #6AB7DA; --color-pond-60: #8FC9E3; --color-pond-40: #B5DBED; --color-pond-20: #DAEDF6; --color-pond-10: #ECF6FA;
    --color-coastline: #C7E4F1; --color-coastline-80: #D2E9F4; --color-coastline-60: #DDEFF7; --color-coastline-40: #E9F4F9; --color-coastline-20: #F4FAFC; --color-coastline-10: #F9FCFE;
    --color-gfi: #006935; --color-gfi-80: #018543; --color-gfi-60: #01A453; --color-gfi-40: #2CBE76; --color-gfi-20: #BBFFDD; --color-gfi-10: #E7FFF3;

    /*! Secondary */
    --color-plum: #8F467B; --color-plum-dark: #73185B; --color-plum-light: #D5B9CD; --color-plum-lightest: #F1E7EE;
    --color-blue-sec: #4B6887; --color-blue-sec-dark: #1E4269; --color-blue-sec-light: #A5B3C3; --color-blue-sec-lightest: #D2D9E1;
    --color-teal: #24A89D; --color-teal-dark: #00786f; --color-teal-light: #63DACE; --color-teal-lightest: #D0F4F0;
    --color-yellow: #FFB129; --color-yellow-dark: #C78200; --color-yellow-light: #FFE35E; --color-yellow-lightest: #FFF7CF;
    --color-red: #FE6150; --color-red-dark: #C52C26; --color-red-light: #FF947D; --color-red-lightest: #FFDFD8;

    /*! Natural */
    --color-neutral-1: #F2F2F2; --color-neutral-2: #E5E5E5; --color-neutral-3: #999999; --color-neutral-4: #666666; --color-neutral-5: #333333;
    --color-neutral-warm-1: #F9F7F5; --color-neutral-warm-2: #EEEAE4; --color-neutral-warm-3: #D5CBBC; --color-neutral-warm-4: #A79887; --color-neutral-warm-5: #695E53; 

    /*! Base Theme */
    --color-brand: var(--color-green);
    --color-ui-primary: var(--color-canopy);
    --color-ui-secondary: var(--color-yellow);
}


/*! S P A C I N G - Multiples of 4 only */
:root {
    --base-scale: 1.25;
    --base-size: 4px;
    --s1: var(--base-size);
    --s2: calc(var(--s1) * 2); /* 8px */
    --s3: calc(var(--s1) * 4); /* 16px */
    --s4: calc(var(--s1) * 6); /* 24px */
    --s5: calc(var(--s1) * 9); /* 36px */
    --s6: calc(var(--s1) * 12); /* 48px */
    --s7: calc(var(--s1) * 16); /* 64px */
    --s8: calc(var(--s1) * 24); /* 96px */
    --s9: calc(var(--s1) * 40); /* 160px */
    --s10: calc(var(--s1) * 60); /* 240px */
}



/*! IMAGES */

/*!  L A Y O U T - Structure only, no styles (colors, borders, backgrounds) */

/*! COMPONENTS */
.button {border-radius: 6px;padding:22px;cursor: pointer;width: fit-content;min-width: 248px;max-width:460px;display: block;}
.button--small, .button--sm {padding:11px 12px;}
.button--icon-only {min-width: auto;}


/*! PANELS/BOXES */
.panel {margin:24px;}
.panel-body {padding:36px 24px;}
.panel .icon {text-align: center;}
.panel-1 {border-top: #034638 solid 12px;box-shadow: 0px 0px 16px;}
.panel-2 {border-top: #507f70 solid 12px;box-shadow: 0px 0px 16px;}
.panel-3 {border-top: #789f90 solid 12px;box-shadow: 0px 0px 16px;}
.panel-4 {border-top: #9ab9ad solid 12px;box-shadow: 0px 0px 16px;}


/*! SECTIONS */
section {margin: 0;}

/*! Header */
header { padding: 1.25rem .75rem; }
header .container {display:flex;align-items: center;justify-content: center;column-gap: 1rem;}
header .logo {fill:var(--color-brand);max-width:250px;max-height:24px;min-height:20px;display: block;}
header .link--icon {font-size: 28px;}
header nav a {margin-right:.4em;}

/*! Footer*/
.footer {font-size: 1rem;padding: 3rem 1.75rem;}
.footer__logo {margin-bottom: var(--s5, 2rem);}


/*!  B A S E  T H E M E - Use only styles, no layout attributes (height/width, margin, padding)  */
a.link--primary, a.link--primary:visited {color:var(--color-ui-primary)}
a.link--primary:hover {color:var(--color-green)}


/*! COMPONENTS */

/*! Buttons */
.button {
        background-color: var(--color-white);border:1px solid var(--color-neutral-5);
        color:var(--color-black);font-size:var(--text-base-size);font-weight:bold;letter-spacing:.02em;text-align:center;text-decoration: none;
}
.button:hover {text-decoration: none;color:var(--color-white);background-color: var(--color-black);}
.button:disabled {background-color: var(--color-neutral-3);color: var(--color-neutral-4);}

.button--sm {padding: 8px 12px;}

.button--link {border:0;background:none;}

/*! Forms */
.form-control {padding: 1rem 1.5rem;}
label {font-weight: bold; font-size: var(--text-body-xs); line-height: 1;}
.form-group {margin-bottom: 2rem;}
select {
    -moz-padding-start: calc(0.75rem - 3px);
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2212%22%20height%3D%2212%22%20viewBox%3D%220%200%2012%2012%22%3E%3Ctitle%3Edown-arrow%3C%2Ftitle%3E%3Cg%20fill%3D%22%23000000%22%3E%3Cpath%20d%3D%22M10.293%2C3.293%2C6%2C7.586%2C1.707%2C3.293A1%2C1%2C0%2C0%2C0%2C.293%2C4.707l5%2C5a1%2C1%2C0%2C0%2C0%2C1.414%2C0l5-5a1%2C1%2C0%2C1%2C0-1.414-1.414Z%22%20fill%3D%22%23000000%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fsvg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 16px 12px;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}


/*! U T I L I T I E S */
/*! Use bootstrap utilities https://getbootstrap.com/docs/4.6/utilities/ */
.text-enlarge {font-size: 1.125em;}
.text-shrink {font-size: .875em;}
.text-lighter {font-weight:lighter;}


/* Bootstrap/Sitecore breakpoints */	

	/* Down to */
    @media (min-width: 1200px) { }
    @media (min-width: 992px) { }
    @media (min-width: 769px) { }
    @media (min-width: 577px) { }
    @media (min-width: 376px) { 
        header {padding:1.5rem 0;}
        header .logo {height: 1.5rem;}
    }
    
    /* Up to */ 
    @media (max-width: 1199px) { }
    @media (max-width: 991px) { }
    @media (max-width: 768px) { }
    @media (max-width: 576px) { }
    @media (max-width: 375px) { }
    
/*************************************/