<!DOCTYPE html><!-- This site was created in Webflow. https://www.webflow.com -->
<!-- Last Published: Tue Mar 19 2024 16:41:42 GMT+0000 (Coordinated Universal Time) -->
<html data-wf-page="65bb82845dc88ab51fc8c157" data-wf-site="65bb82845dc88ab51fc8c159">
<head>
<meta charset="utf-8">
<title>Style Guide</title>
<meta content="Style Guide" property="og:title">
<meta content="Style Guide" property="twitter:title">
<meta content="width=device-width, initial-scale=1" name="viewport">
<meta content="Webflow" name="generator">
<link href="css/normalize.css" rel="stylesheet" type="text/css">
<link href="css/webflow.css" rel="stylesheet" type="text/css">
<link href="css/xp-website-a38688-cc969d4-6024a63c03984.webflow.css" rel="stylesheet" type="text/css">
<script type="text/javascript">!function(o,c){var n=c.documentElement,t=" w-mod-";n.className+=t+"js",("ontouchstart"in o||o.DocumentTouch&&c instanceof DocumentTouch)&&(n.className+=t+"touch")}(window,document);</script>
<link href="images/favicon.png" rel="shortcut icon" type="image/x-icon">
<link href="images/webclip.png" rel="apple-touch-icon">
</head>
<body>
<div class="page-wrapper">
<div class="fs-styleguide_component">
<header class="fs-styleguide_header">
<div class="padding-section-large">
<div class="padding-global">
<div class="container-large">
<div class="fs-styleguide_header-block">
<h1 class="fs-styleguide_heading-large">Style Guide</h1>
<div class="max-width-medium"></div>
</div>
</div>
</div>
</div>
</header>
<section class="fs-styleguide_classes">
<section class="fs-styleguide_structure">
<div class="padding-section-large">
<div class="padding-global">
<div class="container-large">
<div class="fs-styleguide_section is-vertical">
<div class="fs-styleguide_section-header">
<h2 class="fs-styleguide_heading-medium">Structure Classes</h2>
<p class="text-size-16">Defined and flexible core structure we can use on all or most pages.<br></p>
</div>
<div class="fs-styleguide_item-wrapper">
<div class="fs-styleguide_1-col">
<div class="fs-styleguide_item">
<div class="fs-styleguide_label">page-wrapper</div>
<div class="page-wrapper">
<div class="fs-styleguide_empty-box"></div>
</div>
</div>
<div class="fs-styleguide_item">
<div class="fs-styleguide_label">main-wrapper</div>
<main class="main-wrapper">
<div class="fs-styleguide_empty-box"></div>
</main>
</div>
<div class="fs-styleguide_item is-stretch">
<div id="w-node-c59a0661-2771-10a5-6ecc-5609e160e593-1fc8c157" class="fs-styleguide_label">container-small</div>
<div class="container-small">
<div class="fs-styleguide_empty-box"></div>
</div>
</div>
<div class="fs-styleguide_item is-stretch">
<div id="w-node-c59a0661-2771-10a5-6ecc-5609e160e59d-1fc8c157" class="fs-styleguide_label">container-large</div>
<div class="container-large">
<div class="fs-styleguide_empty-box"></div>
</div>
</div>
<div class="fs-styleguide_item is-stretch">
<div id="w-node-c59a0661-2771-10a5-6ecc-5609e160e5a2-1fc8c157" class="fs-styleguide_label">padding-global</div>
<div class="padding-global">
<div class="fs-styleguide_empty-box"></div>
</div>
</div>
<div id="w-node-c59a0661-2771-10a5-6ecc-5609e160e5b2-1fc8c157" class="fs-styleguide_item is-stretch">
<div class="fs-styleguide_spacing">
<div id="w-node-c59a0661-2771-10a5-6ecc-5609e160e5b4-1fc8c157" class="fs-styleguide_label">padding-section-none</div>
<div class="padding-section-none">
<div class="fs-styleguide_empty-box"></div>
</div>
</div>
</div>
<div class="fs-styleguide_item is-stretch">
<div class="fs-styleguide_spacing">
<div id="w-node-a619fece-0796-b5b0-e78b-6badb40d64bc-1fc8c157" class="fs-styleguide_label">padding-section-large</div>
<div class="padding-section-large">
<div class="fs-styleguide_empty-box"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="fs-styleguide_heading-tags">
<div class="padding-section-large">
<div class="padding-global">
<div class="container-large">
<div class="fs-styleguide_section">
<div class="fs-styleguide_section-header">
<h2 class="fs-styleguide_heading-medium">HTML Heading Tags</h2>
<p class="text-size-16">HTML tags define default Heading styles.<br></p>
</div>
<div class="fs-styleguide_item-wrapper">
<div class="fs-styleguide_1-col">
<div class="fs-styleguide_item">
<div class="fs-styleguide_label is-tag">H1</div>
<h1>Sample text helps you understand how real text may look. Sample text is being used as a placeholder.</h1>
</div>
<div class="fs-styleguide_item">
<div class="fs-styleguide_label is-tag">H2</div>
<h2>Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text that is normally present.</h2>
</div>
<div class="fs-styleguide_item">
<div class="fs-styleguide_label is-tag">H3</div>
<h3>Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text that is normally present.</h3>
</div>
<div class="fs-styleguide_item">
<div class="fs-styleguide_label is-tag">H4</div>
<h4>Sample text is being used as a placeholder. Sample text helps you understand how real text may look. Sample text is being used as a placeholder for real text that is normally present.</h4>
</div>
<div class="fs-styleguide_item">
<div class="fs-styleguide_label is-tag">H5</div>
<h5>Sample text is being used as a placeholder. Sample text helps you understand how real text may look. Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look.</h5>
</div>
<div class="fs-styleguide_item">
<div class="fs-styleguide_label is-tag">H6</div>
<h6>Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look. Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look.</h6>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="fs-styleguide_other-tags">
<div class="padding-section-large">
<div class="padding-global">
<div class="container-large">
<div class="fs-styleguide_section">
<div class="fs-styleguide_section-header">
<h2 class="fs-styleguide_heading-medium">Other HTML Tags</h2>
<p class="text-size-16">HTML tags define default text styles.<br></p>
</div>
<div class="fs-styleguide_item-wrapper">
<div class="fs-styleguide_2-col">
<div class="fs-styleguide_item">
<div class="fs-styleguide_label is-tag">All paragraphs</div>
<p>Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.<br></p>
</div>
<div class="fs-styleguide_item">
<div class="fs-styleguide_label is-tag">All links</div>
<a href="#">All Links</a>
</div>
<div class="fs-styleguide_item">
<div class="fs-styleguide_label is-tag">All Ordered Lists</div>
<ol role="list">
<li>Sample text is being used as a placeholder for real text that is normally present.</li>
<li>Sample text is being used as a placeholder for real text that is normally present.</li>
<li>Sample text is being used as a placeholder for real text that is normally present.</li>
</ol>
</div>
<div class="fs-styleguide_item">
<div class="fs-styleguide_label is-tag">All Unordered Lists</div>
<ul role="list">
<li>Sample text is being used as a placeholder for real text that is normally present.</li>
<li>Sample text is being used as a placeholder for real text that is normally present.</li>
<li>Sample text is being used as a placeholder for real text that is normally present.</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="fs-styleguide_heading-styles">
<div class="padding-section-large">
<div class="padding-global">
<div class="container-large">
<div class="fs-styleguide_section">
<div class="fs-styleguide_section-header">
<h2 class="fs-styleguide_heading-medium">Heading Styles</h2>
<p class="text-size-16">Heading classes when typography style doesn't match the default HTML tag.<br></p>
</div>
<div class="fs-styleguide_item-wrapper">
<div class="fs-styleguide_1-col">
<div class="fs-styleguide_item">
<div class="fs-styleguide_label">heading-style-h1</div>
<h2 class="heading-style-h1">Sample text helps you understand how real text may look.</h2>
</div>
<div class="fs-styleguide_item">
<div class="fs-styleguide_label">heading-style-h2</div>
<h2 class="heading-style-h2">Sample text is being used as a placeholder. Sample text helps you understand how real text may look.</h2>
</div>
<div class="fs-styleguide_item">
<div class="fs-styleguide_label">heading-style-h3</div>
<h2 class="heading-style-h3">Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text that is normally present.</h2>
</div>
<div class="fs-styleguide_item">
<div class="fs-styleguide_label">heading-style-h4</div>
<h2 class="heading-style-h4">Sample text is being used as a placeholder. Sample text helps you understand how real text may look. Sample text is being used as a placeholder for real text that is normally present.</h2>
</div>
<div class="fs-styleguide_item">
<div class="fs-styleguide_label">heading-style-h5</div>
<h2 class="heading-style-h5">Sample text is being used as a placeholder. Sample text helps you understand how real text may look. Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look.</h2>
</div>
<div class="fs-styleguide_item">
<div class="fs-styleguide_label">heading-style-h6</div>
<h2 class="heading-style-h6">Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look. Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look.</h2>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="fs-styleguide_text-classes">
<div class="padding-section-large">
<div class="padding-global">
<div class="container-large">
<div class="fs-styleguide_section">
<div class="fs-styleguide_section-header">
<h2 class="fs-styleguide_heading-medium">Text Classes</h2>
<p class="text-size-16">Text classes when typography style doesn't match the default HTML tag.<br></p>
</div>
<div class="fs-styleguide_item-wrapper">
<div class="fs-styleguide_item-header">
<h3 class="text-weight-semibold">Text Sizes</h3>
</div>
<div class="fs-styleguide_3-col">
<div class="fs-styleguide_item">
<div class="fs-styleguide_label">text-size-17</div>
<p class="text-size-17">Sample text is being used as a placeholder for real text that is normally present.<br></p>
</div>
<div class="fs-styleguide_item">
<div class="fs-styleguide_label">text-size-16</div>
<p class="text-size-16">Sample text is being used as a placeholder for real text that is normally present on your website.<br></p>
</div>
<div class="fs-styleguide_item">
<div class="fs-styleguide_label">text-size-15</div>
<p class="text-size-15">Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. <br></p>
</div>
<div class="fs-styleguide_item">
<div class="fs-styleguide_label">text-size-14</div>
<p class="text-size-14">Sample text is being used as a placeholder for real text that is normally present on your website. Sample text helps you understand how real text may look on your website. <br></p>
</div>
<div class="fs-styleguide_item">
<div class="fs-styleguide_label">text-size-13</div>
<p class="text-size-13">Sample text is being used as a placeholder for real text that is normally present on your website. Sample text helps you understand how real text may look on your website. <br></p>
</div>
</div>
</div>
<div class="fs-styleguide_item-wrapper">
<div class="fs-styleguide_item-header">
<h3 class="text-weight-semibold">Text Styles</h3>
</div>
<div class="fs-styleguide_3-col">
<div class="fs-styleguide_item">
<div class="fs-styleguide_label">text-style-strikethrough</div>
<p class="text-style-strikethrough">text-style-strikethrough<br></p>
</div>
<div class="fs-styleguide_item">
<div class="fs-styleguide_label">text-style-italic</div>
<p class="text-style-italic">text-style-italic<br></p>
</div>
<div class="fs-styleguide_item">
<div class="fs-styleguide_label">text-style-muted</div>
<p class="text-style-muted">text-style-muted<br></p>
</div>
<div class="fs-styleguide_item">
<div class="fs-styleguide_label">text-style-allcaps</div>
<p class="text-style-allcaps">text-style-allcaps<br></p>
</div>
</div>
</div>
<div class="fs-styleguide_item-wrapper">
<div class="fs-styleguide_item-header">
<h3 class="text-weight-semibold">Text Weights</h3>
</div>
<div class="fs-styleguide_3-col">
<div class="fs-styleguide_item">
<div class="fs-styleguide_label">text-weight-bold</div>
<div class="text-weight-bold">text-weight-bold</div>
</div>
<div class="fs-styleguide_item">
<div class="fs-styleguide_label">text-weight-semibold</div>
<div id="w-node-c59a0661-2771-10a5-6ecc-5609e160e6c1-1fc8c157" class="text-weight-semibold">text-weight-semibold</div>
</div>
<div class="fs-styleguide_item">
<div class="fs-styleguide_label">text-weight-medium</div>
<div class="text-weight-medium">text-weight-medium</div>
</div>
<div class="fs-styleguide_item">
<div class="fs-styleguide_label">text-weight-normal</div>
<div class="text-weight-normal">text-weight-normal</div>
</div>
</div>
</div>
<div class="fs-styleguide_item-wrapper">
<div class="fs-styleguide_item-header">
<h3 class="text-weight-semibold">Text Alignments</h3>
</div>
<div class="fs-styleguide_3-col">
<div class="fs-styleguide_item">
<div class="fs-styleguide_label">text-align-left</div>
<div id="w-node-c59a0661-2771-10a5-6ecc-5609e160e6da-1fc8c157" class="text-align-left">text-align-left</div>
</div>
<div class="fs-styleguide_item is-stretch">
<div id="w-node-c59a0661-2771-10a5-6ecc-5609e160e6dd-1fc8c157" class="fs-styleguide_label">text-align-center</div>
<div id="w-node-c59a0661-2771-10a5-6ecc-5609e160e6df-1fc8c157" class="text-align-center">text-align-center</div>
</div>
<div class="fs-styleguide_item is-stretch">
<div id="w-node-c59a0661-2771-10a5-6ecc-5609e160e6e2-1fc8c157" class="fs-styleguide_label">text-align-right</div>
<div class="text-align-right">text-align-right</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="fs-styleguide_buttons">
<div class="padding-section-large">
<div class="padding-global">
<div class="container-large">
<div class="fs-styleguide_section">
<div class="fs-styleguide_section-header">
<h2 class="fs-styleguide_heading-medium">Buttons</h2>
<p class="text-size-16">Button combo class system.<br></p>
</div>
<div class="fs-styleguide_3-col">
<div class="fs-styleguide_item">
<div class="fs-styleguide_label">button</div>
<a href="#" class="button w-button">Button Text</a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="fs-styleguide_icons">
<div class="padding-section-large">
<div class="padding-global">
<div class="container-large">
<div class="fs-styleguide_section">
<div class="fs-styleguide_section-header">
<h2 class="fs-styleguide_heading-medium">Icons</h2>
<p class="text-size-16">Unify icons sizes. <strong>icon-height</strong> sets height of icons. <strong>icon-1x1</strong> sets both height and width of icons.<br></p>
</div>
<div class="fs-styleguide_item-wrapper">
<div class="fs-styleguide_2-col">
<div class="fs-styleguide_item">
<div class="fs-styleguide_label">icon-height-small</div><img src="https://d3e54v103j8qbb.cloudfront.net/plugins/Basic/assets/placeholder.60f9b1840c.svg" loading="lazy" alt="" class="icon-height-small">
</div>
<div class="fs-styleguide_item">
<div class="fs-styleguide_label">icon-height-medium</div><img src="https://d3e54v103j8qbb.cloudfront.net/plugins/Basic/assets/placeholder.60f9b1840c.svg" loading="lazy" alt="" class="icon-height-medium">
</div>
<div class="fs-styleguide_item">
<div class="fs-styleguide_label">icon-height-large</div><img src="https://d3e54v103j8qbb.cloudfront.net/plugins/Basic/assets/placeholder.60f9b1840c.svg" loading="lazy" alt="" class="icon-height-large">
</div>
<div class="fs-styleguide_item">
<div class="fs-styleguide_label">icon-1x1-small</div>
<div class="fs-styleguide_row">
<div class="icon-1x1-small w-embed"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 16 17">
<path stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.333" d="M4 7.834h2.667M5.334 6.501v2.666M10 8.501h.007M12 7.167h.007m-5.04-3.333h2.067c1.75 0 2.625 0 3.312.332a3.33 3.33 0 0 1 1.441 1.342c.38.661.442 1.534.567 3.28l.164 2.296a1.945 1.945 0 0 1-3.434 1.383l-.25-.3c-.229-.274-.343-.412-.474-.522a2 2 0 0 0-.957-.449c-.168-.029-.347-.029-.704-.029H7.302c-.357 0-.536 0-.704.03a2 2 0 0 0-.958.448c-.13.11-.244.248-.473.522l-.25.3a1.945 1.945 0 0 1-3.434-1.383l.164-2.297c.124-1.745.187-2.618.566-3.28a3.333 3.333 0 0 1 1.442-1.341c.687-.332 1.561-.332 3.311-.332Z"></path>
</svg></div>
<div class="icon-1x1-small w-embed"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none">
<path stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.336" d="M8 10.5a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5Z"></path>
<path stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.336" d="M11.319 13A6 6 0 1 1 14 8c0 1.382-.5 2.5-1.75 2.5S10.5 9.383 10.5 8V5.5"></path>
</svg></div>
<div class="icon-1x1-small w-embed"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 16 16">
<g clip-path="url(#a)">
<path stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.336" d="M8 10a4 4 0 0 1-4-4V2.298c0-.276 0-.414.04-.524a.667.667 0 0 1 .398-.399c.11-.04.249-.04.525-.04h6.074c.276 0 .414 0 .524.04a.667.667 0 0 1 .399.399c.04.11.04.248.04.524V6a4 4 0 0 1-4 4Zm0 0v2m4-9.333h1.666c.311 0 .466 0 .589.051a.667.667 0 0 1 .36.36c.051.123.051.279.051.59V4c0 .62 0 .93-.068 1.184a2 2 0 0 1-1.414 1.414c-.254.068-.564.068-1.184.068m-8-4H2.333c-.31 0-.466 0-.588.051a.667.667 0 0 0-.361.36c-.051.123-.051.279-.051.59V4c0 .62 0 .93.068 1.184a2 2 0 0 0 1.414 1.414c.255.068.565.068 1.185.068m.963 8h6.074a.296.296 0 0 0 .296-.296A2.37 2.37 0 0 0 8.963 12H7.037a2.37 2.37 0 0 0-2.37 2.37c0 .164.132.296.296.296Z"></path>
</g>
<defs>
<clippath id="a">
<path fill="#fff" d="M0 0h16v16H0z"></path>
</clippath>
</defs>
</svg></div>
</div>
</div>
<div class="fs-styleguide_item">
<div class="fs-styleguide_label">icon-1x1-medium</div>
<div class="fs-styleguide_row">
<div class="icon-1x1-medium w-embed"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 16 17">
<path stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.333" d="M4 7.834h2.667M5.334 6.501v2.666M10 8.501h.007M12 7.167h.007m-5.04-3.333h2.067c1.75 0 2.625 0 3.312.332a3.33 3.33 0 0 1 1.441 1.342c.38.661.442 1.534.567 3.28l.164 2.296a1.945 1.945 0 0 1-3.434 1.383l-.25-.3c-.229-.274-.343-.412-.474-.522a2 2 0 0 0-.957-.449c-.168-.029-.347-.029-.704-.029H7.302c-.357 0-.536 0-.704.03a2 2 0 0 0-.958.448c-.13.11-.244.248-.473.522l-.25.3a1.945 1.945 0 0 1-3.434-1.383l.164-2.297c.124-1.745.187-2.618.566-3.28a3.333 3.333 0 0 1 1.442-1.341c.687-.332 1.561-.332 3.311-.332Z"></path>
</svg></div>
<div class="icon-1x1-medium w-embed"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24">
<path stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15.75a3.75 3.75 0 1 0 0-7.5 3.75 3.75 0 0 0 0 7.5Z"></path>
<path stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16.978 19.5A9 9 0 1 1 21 12c0 2.072-.75 3.75-2.625 3.75S15.75 14.072 15.75 12V8.25"></path>
</svg></div>
<div class="icon-1x1-medium w-embed"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 16 16">
<g clip-path="url(#a)">
<path stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.336" d="M8 10a4 4 0 0 1-4-4V2.298c0-.276 0-.414.04-.524a.667.667 0 0 1 .398-.399c.11-.04.249-.04.525-.04h6.074c.276 0 .414 0 .524.04a.667.667 0 0 1 .399.399c.04.11.04.248.04.524V6a4 4 0 0 1-4 4Zm0 0v2m4-9.333h1.666c.311 0 .466 0 .589.051a.667.667 0 0 1 .36.36c.051.123.051.279.051.59V4c0 .62 0 .93-.068 1.184a2 2 0 0 1-1.414 1.414c-.254.068-.564.068-1.184.068m-8-4H2.333c-.31 0-.466 0-.588.051a.667.667 0 0 0-.361.36c-.051.123-.051.279-.051.59V4c0 .62 0 .93.068 1.184a2 2 0 0 0 1.414 1.414c.255.068.565.068 1.185.068m.963 8h6.074a.296.296 0 0 0 .296-.296A2.37 2.37 0 0 0 8.963 12H7.037a2.37 2.37 0 0 0-2.37 2.37c0 .164.132.296.296.296Z"></path>
</g>
<defs>
<clippath id="a">
<path fill="#fff" d="M0 0h16v16H0z"></path>
</clippath>
</defs>
</svg></div>
</div>
</div>
<div class="fs-styleguide_item">
<div class="fs-styleguide_label">icon-1x1-large</div>
<div class="fs-styleguide_row">
<div class="icon-1x1-large w-embed"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 16 17">
<path stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.333" d="M4 7.834h2.667M5.334 6.501v2.666M10 8.501h.007M12 7.167h.007m-5.04-3.333h2.067c1.75 0 2.625 0 3.312.332a3.33 3.33 0 0 1 1.441 1.342c.38.661.442 1.534.567 3.28l.164 2.296a1.945 1.945 0 0 1-3.434 1.383l-.25-.3c-.229-.274-.343-.412-.474-.522a2 2 0 0 0-.957-.449c-.168-.029-.347-.029-.704-.029H7.302c-.357 0-.536 0-.704.03a2 2 0 0 0-.958.448c-.13.11-.244.248-.473.522l-.25.3a1.945 1.945 0 0 1-3.434-1.383l.164-2.297c.124-1.745.187-2.618.566-3.28a3.333 3.333 0 0 1 1.442-1.341c.687-.332 1.561-.332 3.311-.332Z"></path>
</svg></div>
<div class="icon-1x1-large w-embed"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24">
<path stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15.75a3.75 3.75 0 1 0 0-7.5 3.75 3.75 0 0 0 0 7.5Z"></path>
<path stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16.978 19.5A9 9 0 1 1 21 12c0 2.072-.75 3.75-2.625 3.75S15.75 14.072 15.75 12V8.25"></path>
</svg></div>
<div class="icon-1x1-large w-embed"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 16 16">
<g clip-path="url(#a)">
<path stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.336" d="M8 10a4 4 0 0 1-4-4V2.298c0-.276 0-.414.04-.524a.667.667 0 0 1 .398-.399c.11-.04.249-.04.525-.04h6.074c.276 0 .414 0 .524.04a.667.667 0 0 1 .399.399c.04.11.04.248.04.524V6a4 4 0 0 1-4 4Zm0 0v2m4-9.333h1.666c.311 0 .466 0 .589.051a.667.667 0 0 1 .36.36c.051.123.051.279.051.59V4c0 .62 0 .93-.068 1.184a2 2 0 0 1-1.414 1.414c-.254.068-.564.068-1.184.068m-8-4H2.333c-.31 0-.466 0-.588.051a.667.667 0 0 0-.361.36c-.051.123-.051.279-.051.59V4c0 .62 0 .93.068 1.184a2 2 0 0 0 1.414 1.414c.255.068.565.068 1.185.068m.963 8h6.074a.296.296 0 0 0 .296-.296A2.37 2.37 0 0 0 8.963 12H7.037a2.37 2.37 0 0 0-2.37 2.37c0 .164.132.296.296.296Z"></path>
</g>
<defs>
<clippath id="a">
<path fill="#fff" d="M0 0h16v16H0z"></path>
</clippath>
</defs>
</svg></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="fs-styleguide_webflow-elements">
<div class="padding-section-large">
<div class="padding-global">
<div class="container-large">
<div class="fs-styleguide_section">
<div class="fs-styleguide_section-header">
<h2 class="fs-styleguide_heading-medium">Webflow elements</h2>
<p class="text-size-16">Native Webflow elements with Client-First classes applied.<br></p>
</div>
<div class="fs-styleguide_item-wrapper">
<div class="fs-styleguide_1-col">
<div class="fs-styleguide_item is-stretch">
<div id="w-node-c59a0661-2771-10a5-6ecc-5609e160e976-1fc8c157" class="fs-styleguide_label">form_component</div>
<p class="text-size-16">Example of a form component using Folders<br></p>
<div class="form_component w-form">
<form id="wf-form-Form" name="wf-form-Form" data-name="Form" method="get" class="form_form" data-wf-page-id="65bb82845dc88ab51fc8c157" data-wf-element-id="c59a0661-2771-10a5-6ecc-5609e160e97c">
<div class="form_field-wrapper"><label for="First-Name" class="form_label">Text Input</label><input class="text-field w-input" maxlength="256" name="First-Name-2" data-name="First Name 2" placeholder="First Name" type="text" id="First-Name-2"></div><input type="submit" data-wait="Please wait..." class="button w-button" value="Submit">
</form>
<div class="form_message-success w-form-done">
<div>Thank you! Your submission has been received!</div>
</div>
<div class="form_message-error w-form-fail">
<div>Oops! Something went wrong while submitting the form.</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</section>
</div>
</div>
<script src="https://d3e54v103j8qbb.cloudfront.net/js/jquery-3.5.1.min.dc5e7f18c8.js?site=65bb82845dc88ab51fc8c159" type="text/javascript" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="js/webflow.js" type="text/javascript"></script>
</body>
</html>