What DevLink Exports | Webflow Developer Documentation

Export your files from Webflow with DevLink and import them into your React project

$ npx webflow devlink sync

DevLink will generate a set of files designed for seamless integration into your React application. These exports typically reside in a devlink folder within your project, providing a clear structure for your design system assets.

Exported files

Here’s a breakdown of what DevLink creates and exports:

React components

For each Webflow component you export, DevLink generates a ready-to-use React component. These exports include:

A JavaScript implementation: the React component itself, complete with built-in Webflow utilities and styles.
TypeScript definitions: to provide type safety and autocompletion in modern editors.
Scoped CSS modules: ensuring styles are isolated and easy to maintain.

This means you can drop the exported component straight into your React project and use it like any other React component; all while keeping the structure, styles, and functionality defined in Webflow.

1 "use client";
2 import React from "react";
3 import * as _Builtin from "./_Builtin";   // Webflow built-in primitives (Block, Link, Image, etc.)
4 import * as _utils from "./utils";        // Utility functions, including className helpers
5 import _styles from "./Footer.module.css"; // Scoped CSS module for styles
6 
7 // React component with props
8 export function Footer({ as: _Component = _Builtin.Block }) {
9   return (
10     // `as` prop lets you override the top-level wrapper element
11     <_Component className={_utils.cx(_styles, "footer-wrap")} tag="div">
12       
13       {/* Nested element: Block */}
14       <_Builtin.Block tag="div">
15         
16         {/* Link element with attributes preserved from Webflow */}
17         <_Builtin.Link
18           className={_utils.cx(_styles, "webflow-link")} // Scoped CSS class applied
19           button={false}
20           block="inline"
21           options={{
22             href: "https://webflow.com/",   // Preserved link attribute
23             target: "_blank",
24           }}
25         >
26           {/* Image element with src, width, height, alt carried over */}
27           <_Builtin.Image
28             className={_utils.cx(_styles, "webflow-logo-tiny")}
29             width="15"
30             height="auto"
31             loading="auto"
32             alt=""
33             src="https://cdn.prod.website-files.com/686431ad597a0e8140e9a6b2/686431ad597a0e8140e9a70e_webflow-w-small%402x.png"
34           />
35           {/* Static text content preserved */}
36           <_Builtin.Block
37             className={_utils.cx(_styles, "paragraph-tiny")}
38             tag="div"
39           >
40             {"Powered by Webflow"}
41           </_Builtin.Block>
42         </_Builtin.Link>
43       </_Builtin.Block>
44 
45       {/* Another nested Block containing multiple Link children */}
46       <_Builtin.Block className={_utils.cx(_styles, "footer-links")} tag="div">
47         <_Builtin.Link
48           className={_utils.cx(_styles, "footer-item")}
49           button={false}
50           block=""
51           options={{
52             href: "https://www.facebook.com/webflow/",
53             target: "_blank",
54           }}
55         >
56           {"Facebook"}  {/* Static text content */}
57         </_Builtin.Link>
58         <_Builtin.Link
59           className={_utils.cx(_styles, "footer-item")}
60           button={false}
61           block=""
62           options={{
63             href: "https://twitter.com/webflow",
64             target: "_blank",
65           }}
66         >
67           {"Twitter"}
68         </_Builtin.Link>
69         <_Builtin.Link
70           className={_utils.cx(_styles, "footer-item")}
71           button={false}
72           block=""
73           options={{
74             href: "https://www.instagram.com/webflowapp/",
75             target: "_blank",
76           }}
77         >
78           {"Instagram"}
79         </_Builtin.Link>
80       </_Builtin.Block>
81     </_Component>
82   );
83 }

Inside the generated React component, you’ll find:

Props: including an as prop for overriding the top-level wrapper element.
Scoped classes: Webflow classes mapped to CSS modules with a utility function (_utils.cx).
Nested elements: a JSX hierarchy that mirrors your Webflow design, built with Webflow’s primitives ( Block, Link, Image, etc.).
Assets and media: images, dimensions, alt text, and link attributes are carried over automatically.
Text content: any static text from your Webflow design is included in the output.

This means what you design in Webflow is translated into React code, with flexibility for developers to integrate, extend, and style as needed.

Global Styles

When you export with DevLink, you also get a global stylesheet that makes your React app render Webflow components consistently with what you designed.

The global stylesheet normalizes browser defaults, provides Webflow’s core utility classes, and sets responsive breakpoints—so exported components look right the moment you import them.

global.css

1 /*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
2 /**
3  * 1. Set default font family to sans-serif.
4  * 2. Prevent iOS and IE text size adjust after device orientation change,
5  *    without disabling user zoom.
6  */
7 html {
8   font-family: sans-serif;
9   /* 1 */
10   -ms-text-size-adjust: 100%;
11   /* 2 */
12   -webkit-text-size-adjust: 100%;
13   /* 2 */
14 }
15 /**
16  * Remove default margin.
17  */
18 body {
19   margin: 0;
20 }
21 /* HTML5 display definitions
22    ========================================================================== */
23 /**
24  * Correct `block` display not defined for any HTML5 element in IE 8/9.
25  * Correct `block` display not defined for `details` or `summary` in IE 10/11
26  * and Firefox.
27  * Correct `block` display not defined for `main` in IE 11.
28  */
29 article,
30 aside,
31 details,
32 figcaption,
33 figure,
34 footer,
35 header,
36 hgroup,
37 main,
38 menu,
39 nav,
40 section,
41 summary {
42   display: block;
43 }
44 /**
45  * 1. Correct `inline-block` display not defined in IE 8/9.
46  * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
47  */
48 audio,
49 canvas,
50 progress,
51 video {
52   display: inline-block;
53   /* 1 */
54   vertical-align: baseline;
55   /* 2 */
56 }
57 /**
58  * Prevent modern browsers from displaying `audio` without controls.
59  * Remove excess height in iOS 5 devices.
60  */
61 audio:not([controls]) {
62   display: none;
63   height: 0;
64 }
65 /**
66  * Address `[hidden]` styling not present in IE 8/9/10.
67  * Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22.
68  */
69 [hidden],
70 template {
71   display: none;
72 }
73 /* Links
74    ========================================================================== */
75 /**
76  * Remove the gray background color from active links in IE 10.
77  */
78 a {
79   background-color: transparent;
80 }
81 /**
82  * Improve readability of focused elements when they are also in an
83  * active/hover state.
84  */
85 a:active,
86 a:hover {
87   outline: 0;
88 }
89 /* Text-level semantics
90    ========================================================================== */
91 /**
92  * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
93  */
94 abbr[title] {
95   border-bottom: 1px dotted;
96 }
97 /**
98  * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
99  */
100 b,
101 strong {
102   font-weight: bold;
103 }
104 /**
105  * Address styling not present in Safari and Chrome.
106  */
107 dfn {
108   font-style: italic;
109 }
110 /**
111  * Address variable `h1` font-size and margin within `section` and `article`
112  * contexts in Firefox 4+, Safari, and Chrome.
113  */
114 h1 {
115   font-size: 2em;
116   margin: 0.67em 0;
117 }
118 /**
119  * Address styling not present in IE 8/9.
120  */
121 mark {
122   background: #ff0;
123   color: #000;
124 }
125 /**
126  * Address inconsistent and variable font size in all browsers.
127  */
128 small {
129   font-size: 80%;
130 }
131 /**
132  * Prevent `sub` and `sup` affecting `line-height` in all browsers.
133  */
134 sub,
135 sup {
136   font-size: 75%;
137   line-height: 0;
138   position: relative;
139   vertical-align: baseline;
140 }
141 sup {
142   top: -0.5em;
143 }
144 sub {
145   bottom: -0.25em;
146 }
147 /* Embedded content
148    ========================================================================== */
149 /**
150  * Remove border when inside `a` element in IE 8/9/10.
151  */
152 img {
153   border: 0;
154 }
155 /**
156  * Correct overflow not hidden in IE 9/10/11.
157  */
158 svg:not(:root) {
159   overflow: hidden;
160 }
161 /* Grouping content
162    ========================================================================== */
163 /**
164  * Address margin not present in IE 8/9 and Safari.
165  */
166 figure {
167   margin: 1em 40px;
168 }
169 /**
170  * Address differences between Firefox and other browsers.
171  */
172 hr {
173   box-sizing: content-box;
174   height: 0;
175 }
176 /**
177  * Contain overflow in all browsers.
178  */
179 pre {
180   overflow: auto;
181 }
182 /**
183  * Address odd `em`-unit font size rendering in all browsers.
184  */
185 code,
186 kbd,
187 pre,
188 samp {
189   font-family: monospace, monospace;
190   font-size: 1em;
191 }
192 /* Forms
193    ========================================================================== */
194 /**
195  * Known limitation: by default, Chrome and Safari on OS X allow very limited
196  * styling of `select`, unless a `border` property is set.
197  */
198 /**
199  * 1. Correct color not being inherited.
200  *    Known issue: affects color of disabled elements.
201  * 2. Correct font properties not being inherited.
202  * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
203  */
204 button,
205 input,
206 optgroup,
207 select,
208 textarea {
209   color: inherit;
210   /* 1 */
211   font: inherit;
212   /* 2 */
213   margin: 0;
214   /* 3 */
215 }
216 /**
217  * Address `overflow` set to `hidden` in IE 8/9/10/11.
218  */
219 button {
220   overflow: visible;
221 }
222 /**
223  * Address inconsistent `text-transform` inheritance for `button` and `select`.
224  * All other form control elements do not inherit `text-transform` values.
225  * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
226  * Correct `select` style inheritance in Firefox.
227  */
228 button,
229 select {
230   text-transform: none;
231 }
232 /**
233  * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
234  *    and `video` controls.
235  * 2. Correct inability to style clickable `input` types in iOS.
236  * 3. Improve usability and consistency of cursor style between image-type
237  *    `input` and others.
238  * 4. CUSTOM FOR WEBFLOW: Removed the input[type="submit"] selector to reduce
239  *    specificity and defer to the .w-button selector
240  */
241 button,
242 html input[type="button"],
243 input[type="reset"] {
244   -webkit-appearance: button;
245   /* 2 */
246   cursor: pointer;
247   /* 3 */
248 }
249 /**
250  * Re-set default cursor for disabled elements.
251  */
252 button[disabled],
253 html input[disabled] {
254   cursor: default;
255 }
256 /**
257  * Remove inner padding and border in Firefox 4+.
258  */
259 button::-moz-focus-inner,
260 input::-moz-focus-inner {
261   border: 0;
262   padding: 0;
263 }
264 /**
265  * Address Firefox 4+ setting `line-height` on `input` using `!important` in
266  * the UA stylesheet.
267  */
268 input {
269   line-height: normal;
270 }
271 /**
272  * It's recommended that you don't attempt to style these elements.
273  * Firefox's implementation doesn't respect box-sizing, padding, or width.
274  *
275  * 1. Address box sizing set to `content-box` in IE 8/9/10.
276  * 2. Remove excess padding in IE 8/9/10.
277  */
278 input[type='checkbox'],
279 input[type='radio'] {
280   box-sizing: border-box;
281   /* 1 */
282   padding: 0;
283   /* 2 */
284 }
285 /**
286  * Fix the cursor style for Chrome's increment/decrement buttons. For certain
287  * `font-size` values of the `input`, it causes the cursor style of the
288  * decrement button to change from `default` to `text`.
289  */
290 input[type='number']::-webkit-inner-spin-button,
291 input[type='number']::-webkit-outer-spin-button {
292   height: auto;
293 }
294 /**
295  * 1. CUSTOM FOR WEBFLOW: changed from `textfield` to `none` to normalize iOS rounded input
296  * 2. CUSTOM FOR WEBFLOW: box-sizing: content-box rule removed
297  *    (similar to normalize.css >=4.0.0)
298  */
299 input[type='search'] {
300   -webkit-appearance: none;
301   /* 1 */
302 }
303 /**
304  * Remove inner padding and search cancel button in Safari and Chrome on OS X.
305  * Safari (but not Chrome) clips the cancel button when the search input has
306  * padding (and `textfield` appearance).
307  */
308 input[type='search']::-webkit-search-cancel-button,
309 input[type='search']::-webkit-search-decoration {
310   -webkit-appearance: none;
311 }
312 /**
313  * Define consistent border, margin, and padding.
314  */
315 fieldset {
316   border: 1px solid #c0c0c0;
317   margin: 0 2px;
318   padding: 0.35em 0.625em 0.75em;
319 }
320 /**
321  * 1. Correct `color` not being inherited in IE 8/9/10/11.
322  * 2. Remove padding so people aren't caught out if they zero out fieldsets.
323  */
324 legend {
325   border: 0;
326   /* 1 */
327   padding: 0;
328   /* 2 */
329 }
330 /**
331  * Remove default vertical scrollbar in IE 8/9/10/11.
332  */
333 textarea {
334   overflow: auto;
335 }
336 /**
337  * Don't inherit the `font-weight` (applied by a rule above).
338  * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
339  */
340 optgroup {
341   font-weight: bold;
342 }
343 /* Tables
344    ========================================================================== */
345 /**
346  * Remove most spacing between table cells.
347  */
348 table {
349   border-collapse: collapse;
350   border-spacing: 0;
351 }
352 td,
353 th {
354   padding: 0;
355 }
356 
357 
358 
359 
360 /* ==========================================================================
361    Start of base Webflow CSS - If you're looking for some ultra-clean CSS, skip the boilerplate and see the unminified code below.
362    ========================================================================== */
363 
364 
365 @font-face {
366   font-family: 'webflow-icons';
367   src: url("data:application/x-font-ttf;charset=utf-8;base64,AAEAAAALAIAAAwAwT1MvMg8SBiUAAAC8AAAAYGNtYXDpP+a4AAABHAAAAFxnYXNwAAAAEAAAAXgAAAAIZ2x5ZmhS2XEAAAGAAAADHGhlYWQTFw3HAAAEnAAAADZoaGVhCXYFgQAABNQAAAAkaG10eCe4A1oAAAT4AAAAMGxvY2EDtALGAAAFKAAAABptYXhwABAAPgAABUQAAAAgbmFtZSoCsMsAAAVkAAABznBvc3QAAwAAAAAHNAAAACAAAwP4AZAABQAAApkCzAAAAI8CmQLMAAAB6wAzAQkAAAAAAAAAAAAAAAAAAAABEAAAAAAAAAAAAAAAAAAAAABAAADpAwPA/8AAQAPAAEAAAAABAAAAAAAAAAAAAAAgAAAAAAADAAAAAwAAABwAAQADAAAAHAADAAEAAAAcAAQAQAAAAAwACAACAAQAAQAg5gPpA//9//8AAAAAACDmAOkA//3//wAB/+MaBBcIAAMAAQAAAAAAAAAAAAAAAAABAAH//wAPAAEAAAAAAAAAAAACAAA3OQEAAAAAAQAAAAAAAAAAAAIAADc5AQAAAAABAAAAAAAAAAAAAgAANzkBAAAAAAEBIAAAAyADgAAFAAAJAQcJARcDIP5AQAGA/oBAAcABwED+gP6AQAABAOAAAALgA4AABQAAEwEXCQEH4AHAQP6AAYBAAcABwED+gP6AQAAAAwDAAOADQALAAA8AHwAvAAABISIGHQEUFjMhMjY9ATQmByEiBh0BFBYzITI2PQE0JgchIgYdARQWMyEyNj0BNCYDIP3ADRMTDQJADRMTDf3ADRMTDQJADRMTDf3ADRMTDQJADRMTAsATDSANExMNIA0TwBMNIA0TEw0gDRPAEw0gDRMTDSANEwAAAAABAJ0AtAOBApUABQAACQIHCQEDJP7r/upcAXEBcgKU/usBFVz+fAGEAAAAAAL//f+9BAMDwwAEAAkAABcBJwEXAwE3AQdpA5ps/GZsbAOabPxmbEMDmmz8ZmwDmvxmbAOabAAAAgAA/8AEAAPAAB0AOwAABSInLgEnJjU0Nz4BNzYzMTIXHgEXFhUUBw4BBwYjNTI3PgE3NjU0Jy4BJyYjMSIHDgEHBhUUFx4BFxYzAgBqXV6LKCgoKIteXWpqXV6LKCgoKIteXWpVSktvICEhIG9LSlVVSktvICEhIG9LSlVAKCiLXl1qal1eiygoKCiLXl1qal1eiygoZiEgb0tKVVVKS28gISEgb0tKVVVKS28gIQABAAABwAIAA8AAEgAAEzQ3PgE3NjMxFSIHDgEHBhUxIwAoKIteXWpVSktvICFmAcBqXV6LKChmISBvS0pVAAAAAgAA/8AFtgPAADIAOgAAARYXHgEXFhUUBw4BBwYHIxUhIicuAScmNTQ3PgE3NjMxOAExNDc+ATc2MzIXHgEXFhcVATMJATMVMzUEjD83NlAXFxYXTjU1PQL8kz01Nk8XFxcXTzY1PSIjd1BQWlJJSXInJw3+mdv+2/7c25MCUQYcHFg5OUA/ODlXHBwIAhcXTzY1PTw1Nk8XF1tQUHcjIhwcYUNDTgL+3QFt/pOTkwABAAAAAQAAmM7nP18PPPUACwQAAAAAANciZKUAAAAA1yJkpf/9/70FtgPDAAAACAACAAAAAAAAAAEAAAPA/8AAAAW3//3//QW2AAEAAAAAAAAAAAAAAAAAAAAMBAAAAAAAAAAAAAAAAgAAAAQAASAEAADgBAAAwAQAAJ0EAP/9BAAAAAQAAAAFtwAAAAAAAAAKABQAHgAyAEYAjACiAL4BFgE2AY4AAAABAAAADAA8AAMAAAAAAAIAAAAAAAAAAAAAAAAAAAAAAAAADgCuAAEAAAAAAAEADQAAAAEAAAAAAAIABwCWAAEAAAAAAAMADQBIAAEAAAAAAAQADQCrAAEAAAAAAAUACwAnAAEAAAAAAAYADQBvAAEAAAAAAAoAGgDSAAMAAQQJAAEAGgANAAMAAQQJAAIADgCdAAMAAQQJAAMAGgBVAAMAAQQJAAQAGgC4AAMAAQQJAAUAFgAyAAMAAQQJAAYAGgB8AAMAAQQJAAoANADsd2ViZmxvdy1pY29ucwB3AGUAYgBmAGwAbwB3AC0AaQBjAG8AbgBzVmVyc2lvbiAxLjAAVgBlAHIAcwBpAG8AbgAgADEALgAwd2ViZmxvdy1pY29ucwB3AGUAYgBmAGwAbwB3AC0AaQBjAG8AbgBzd2ViZmxvdy1pY29ucwB3AGUAYgBmAGwAbwB3AC0AaQBjAG8AbgBzUmVndWxhcgBSAGUAZwB1AGwAYQByd2ViZmxvdy1pY29ucwB3AGUAYgBmAGwAbwB3AC0AaQBjAG8AbgBzRm9udCBnZW5lcmF0ZWQgYnkgSWNvTW9vbi4ARgBvAG4AdAAgAGcAZQBuAGUAcgBhAHQAZQBkACAAYgB5ACAASQBjAG8ATQBvAG8AbgAuAAAAAwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA==") format('truetype');
368   font-weight: normal;
369   font-style: normal;
370 }
371 [class^="w-icon-"],
372 [class*=" w-icon-"] {
373   /* use !important to prevent issues with browser extensions that change fonts */
374   font-family: 'webflow-icons' !important;
375   speak: none;
376   font-style: normal;
377   font-weight: normal;
378   font-variant: normal;
379   text-transform: none;
380   line-height: 1;
381   /* Better Font Rendering =========== */
382   -webkit-font-smoothing: antialiased;
383   -moz-osx-font-smoothing: grayscale;
384 }
385 .w-icon-slider-right:before {
386   content: "\e600";
387 }
388 .w-icon-slider-left:before {
389   content: "\e601";
390 }
391 .w-icon-nav-menu:before {
392   content: "\e602";
393 }
394 .w-icon-arrow-down:before,
395 .w-icon-dropdown-toggle:before {
396   content: "\e603";
397 }
398 .w-icon-file-upload-remove:before {
399   content: "\e900";
400 }
401 .w-icon-file-upload-icon:before {
402   content: "\e903";
403 }
404 * {
405   -webkit-box-sizing: border-box;
406   -moz-box-sizing: border-box;
407   box-sizing: border-box;
408 }
409 html {
410   height: 100%;
411 }
412 body {
413   margin: 0;
414   min-height: 100%;
415   background-color: #fff;
416   font-family: Arial, sans-serif;
417   font-size: 14px;
418   line-height: 20px;
419   color: #333;
420 }
421 img {
422   max-width: 100%;
423   vertical-align: middle;
424   display: inline-block;
425 }
426 html.w-mod-touch * {
427   background-attachment: scroll !important;
428 }
429 .w-block {
430   display: block;
431 }
432 .w-inline-block {
433   max-width: 100%;
434   display: inline-block;
435 }
436 .w-clearfix:before,
437 .w-clearfix:after {
438   content: " ";
439   display: table;
440   grid-column-start: 1;
441   grid-row-start: 1;
442   grid-column-end: 2;
443   grid-row-end: 2;
444 }
445 .w-clearfix:after {
446   clear: both;
447 }
448 .w-hidden {
449   display: none;
450 }
451 .w-button {
452   display: inline-block;
453   padding: 9px 15px;
454   background-color: #3898EC;
455   color: white;
456   border: 0;
457   line-height: inherit;
458   text-decoration: none;
459   cursor: pointer;
460   border-radius: 0;
461 }
462 input.w-button {
463   -webkit-appearance: button;
464 }
465 html[data-w-dynpage] [data-w-cloak] {
466   color: transparent !important;
467 }
468 .w-code-block {
469   margin: unset;
470 }
471 pre.w-code-block code {
472   all: inherit;
473 }
474 .w-optimization {
475   display: contents;
476 }
477 .w-webflow-badge,
478 .w-webflow-badge > img {
479   box-sizing: unset;
480   width: unset;
481   height: unset;
482   max-height: unset;
483   max-width: unset;
484   min-height: unset;
485   min-width: unset;
486   margin: unset;
487   padding: unset;
488   float: unset;
489   clear: unset;
490   border: unset;
491   border-radius: unset;
492   background: unset;
493   background-image: unset;
494   background-position: unset;
495   background-size: unset;
496   background-repeat: unset;
497   background-origin: unset;
498   background-clip: unset;
499   background-attachment: unset;
500   background-color: unset;
501   box-shadow: unset;
502   transform: unset;
503   transition: unset;
504   direction: unset;
505   font-family: unset;
506   font-weight: unset;
507   color: unset;
508   font-size: unset;
509   line-height: unset;
510   font-style: unset;
511   font-variant: unset;
512   text-align: unset;
513   letter-spacing: unset;
514   text-decoration: unset;
515   text-indent: unset;
516   text-transform: unset;
517   list-style-type: unset;
518   text-shadow: unset;
519   vertical-align: unset;
520   cursor: unset;
521   white-space: unset;
522   word-break: unset;
523   word-spacing: unset;
524   word-wrap: unset;
525 }
526 .w-webflow-badge {
527   position: fixed !important;
528   display: inline-block !important;
529   visibility: visible !important;
530   opacity: 1 !important;
531   z-index: 2147483647 !important;
532   top: auto !important;
533   right: 12px !important;
534   bottom: 12px !important;
535   left: auto !important;
536   color: #aaadb0 !important;
537   background-color: #fff !important;
538   border-radius: 3px !important;
539   padding: 6px !important;
540   font-size: 12px !important;
541   line-height: 14px !important;
542   text-decoration: none !important;
543   transform: none !important;
544   margin: 0 !important;
545   width: auto !important;
546   height: auto !important;
547   overflow: unset !important;
548   white-space: nowrap;
549   box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 0px 1px 3px rgba(0, 0, 0, 0.1);
550   cursor: pointer;
551 }
552 .w-webflow-badge > img {
553   position: unset;
554   display: inline-block !important;
555   visibility: unset !important;
556   opacity: 1 !important;
557   vertical-align: middle !important;
558 }
559 h1,
560 h2,
561 h3,
562 h4,
563 h5,
564 h6 {
565   font-weight: bold;
566   margin-bottom: 10px;
567 }
568 h1 {
569   font-size: 38px;
570   line-height: 44px;
571   margin-top: 20px;
572 }
573 h2 {
574   font-size: 32px;
575   line-height: 36px;
576   margin-top: 20px;
577 }
578 h3 {
579   font-size: 24px;
580   line-height: 30px;
581   margin-top: 20px;
582 }
583 h4 {
584   font-size: 18px;
585   line-height: 24px;
586   margin-top: 10px;
587 }
588 h5 {
589   font-size: 14px;
590   line-height: 20px;
591   margin-top: 10px;
592 }
593 h6 {
594   font-size: 12px;
595   line-height: 18px;
596   margin-top: 10px;
597 }
598 p {
599   margin-top: 0;
600   margin-bottom: 10px;
601 }
602 blockquote {
603   margin: 0 0 10px 0;
604   padding: 10px 20px;
605   border-left: 5px solid #E2E2E2;
606   font-size: 18px;
607   line-height: 22px;
608 }
609 figure {
610   margin: 0;
611   margin-bottom: 10px;
612 }
613 figcaption {
614   margin-top: 5px;
615   text-align: center;
616 }
617 ul,
618 ol {
619   margin-top: 0px;
620   margin-bottom: 10px;
621   padding-left: 40px;
622 }
623 .w-list-unstyled {
624   padding-left: 0;
625   list-style: none;
626 }
627 .w-embed:before,
628 .w-embed:after {
629   content: " ";
630   display: table;
631   grid-column-start: 1;
632   grid-row-start: 1;
633   grid-column-end: 2;
634   grid-row-end: 2;
635 }
636 .w-embed:after {
637   clear: both;
638 }
639 .w-video {
640   width: 100%;
641   position: relative;
642   padding: 0;
643 }
644 .w-video iframe,
645 .w-video object,
646 .w-video embed {
647   position: absolute;
648   top: 0;
649   left: 0;
650   width: 100%;
651   height: 100%;
652   border: none;
653 }
654 fieldset {
655   padding: 0;
656   margin: 0;
657   border: 0;
658 }
659 button,
660 [type='button'],
661 [type='reset'] {
662   border: 0;
663   cursor: pointer;
664   -webkit-appearance: button;
665 }
666 .w-form {
667   margin: 0 0 15px;
668 }
669 .w-form-done {
670   display: none;
671   padding: 20px;
672   text-align: center;
673   background-color: #dddddd;
674 }
675 .w-form-fail {
676   display: none;
677   margin-top: 10px;
678   padding: 10px;
679   background-color: #ffdede;
680 }
681 label {
682   display: block;
683   margin-bottom: 5px;
684   font-weight: bold;
685 }
686 .w-input,
687 .w-select {
688   display: block;
689   width: 100%;
690   height: 38px;
691   padding: 8px 12px;
692   margin-bottom: 10px;
693   font-size: 14px;
694   line-height: 1.42857143;
695   color: #333333;
696   vertical-align: middle;
697   background-color: #ffffff;
698   border: 1px solid #cccccc;
699 }
700 .w-input::placeholder,
701 .w-select::placeholder {
702   color: #999;
703 }
704 .w-input:focus,
705 .w-select:focus {
706   border-color: #3898EC;
707   outline: 0;
708 }
709 .w-input[disabled],
710 .w-select[disabled],
711 .w-input[readonly],
712 .w-select[readonly],
713 fieldset[disabled] .w-input,
714 fieldset[disabled] .w-select {
715   cursor: not-allowed;
716 }
717 .w-input[disabled]:not(.w-input-disabled),
718 .w-select[disabled]:not(.w-input-disabled),
719 .w-input[readonly],
720 .w-select[readonly],
721 fieldset[disabled]:not(.w-input-disabled) .w-input,
722 fieldset[disabled]:not(.w-input-disabled) .w-select {
723   background-color: #eeeeee;
724 }
725 textarea.w-input,
726 textarea.w-select {
727   height: auto;
728 }
729 .w-select {
730   background-color: #f3f3f3;
731 }
732 .w-select[multiple] {
733   height: auto;
734 }
735 .w-form-label {
736   display: inline-block;
737   cursor: pointer;
738   font-weight: normal;
739   margin-bottom: 0px;
740 }
741 .w-radio {
742   display: block;
743   margin-bottom: 5px;
744   padding-left: 20px;
745 }
746 .w-radio:before,
747 .w-radio:after {
748   content: " ";
749   display: table;
750   grid-column-start: 1;
751   grid-row-start: 1;
752   grid-column-end: 2;
753   grid-row-end: 2;
754 }
755 .w-radio:after {
756   clear: both;
757 }
758 .w-radio-input {
759   margin: 4px 0 0;
760   line-height: normal;
761   float: left;
762   margin-left: -20px;
763 }
764 .w-radio-input {
765   margin-top: 3px;
766 }
767 .w-file-upload {
768   display: block;
769   margin-bottom: 10px;
770 }
771 .w-file-upload-input {
772   width: 0.1px;
773   height: 0.1px;
774   opacity: 0;
775   overflow: hidden;
776   position: absolute;
777   z-index: -100;
778 }
779 .w-file-upload-default,
780 .w-file-upload-uploading,
781 .w-file-upload-success {
782   display: inline-block;
783   color: #333333;
784 }
785 .w-file-upload-error {
786   display: block;
787   margin-top: 10px;
788 }
789 .w-file-upload-default.w-hidden,
790 .w-file-upload-uploading.w-hidden,
791 .w-file-upload-error.w-hidden,
792 .w-file-upload-success.w-hidden {
793   display: none;
794 }
795 .w-file-upload-uploading-btn {
796   display: flex;
797   font-size: 14px;
798   font-weight: normal;
799   cursor: pointer;
800   margin: 0;
801   padding: 8px 12px;
802   border: 1px solid #cccccc;
803   background-color: #fafafa;
804 }
805 .w-file-upload-file {
806   display: flex;
807   flex-grow: 1;
808   justify-content: space-between;
809   margin: 0;
810   padding: 8px 9px 8px 11px;
811   border: 1px solid #cccccc;
812   background-color: #fafafa;
813 }
814 .w-file-upload-file-name {
815   font-size: 14px;
816   font-weight: normal;
817   display: block;
818 }
819 .w-file-remove-link {
820   margin-top: 3px;
821   margin-left: 10px;
822   width: auto;
823   height: auto;
824   padding: 3px;
825   display: block;
826   cursor: pointer;
827 }
828 .w-icon-file-upload-remove {
829   margin: auto;
830   font-size: 10px;
831 }
832 .w-file-upload-error-msg {
833   display: inline-block;
834   color: #ea384c;
835   padding: 2px 0;
836 }
837 .w-file-upload-info {
838   display: inline-block;
839   line-height: 38px;
840   padding: 0 12px;
841 }
842 .w-file-upload-label {
843   display: inline-block;
844   font-size: 14px;
845   font-weight: normal;
846   cursor: pointer;
847   margin: 0;
848   padding: 8px 12px;
849   border: 1px solid #cccccc;
850   background-color: #fafafa;
851 }
852 .w-icon-file-upload-icon,
853 .w-icon-file-upload-uploading {
854   display: inline-block;
855   margin-right: 8px;
856   width: 20px;
857 }
858 .w-icon-file-upload-uploading {
859   height: 20px;
860 }
861 .w-container {
862   margin-left: auto;
863   margin-right: auto;
864   max-width: 940px;
865 }
866 .w-container:before,
867 .w-container:after {
868   content: " ";
869   display: table;
870   grid-column-start: 1;
871   grid-row-start: 1;
872   grid-column-end: 2;
873   grid-row-end: 2;
874 }
875 .w-container:after {
876   clear: both;
877 }
878 .w-container .w-row {
879   margin-left: -10px;
880   margin-right: -10px;
881 }
882 .w-row:before,
883 .w-row:after {
884   content: " ";
885   display: table;
886   grid-column-start: 1;
887   grid-row-start: 1;
888   grid-column-end: 2;
889   grid-row-end: 2;
890 }
891 .w-row:after {
892   clear: both;
893 }
894 .w-row .w-row {
895   margin-left: 0;
896   margin-right: 0;
897 }
898 .w-col {
899   position: relative;
900   float: left;
901   width: 100%;
902   min-height: 1px;
903   padding-left: 10px;
904   padding-right: 10px;
905 }
906 .w-col .w-col {
907   padding-left: 0;
908   padding-right: 0;
909 }
910 .w-col-1 {
911   width: 8.33333333%;
912 }
913 .w-col-2 {
914   width: 16.66666667%;
915 }
916 .w-col-3 {
917   width: 25%;
918 }
919 .w-col-4 {
920   width: 33.33333333%;
921 }
922 .w-col-5 {
923   width: 41.66666667%;
924 }
925 .w-col-6 {
926   width: 50%;
927 }
928 .w-col-7 {
929   width: 58.33333333%;
930 }
931 .w-col-8 {
932   width: 66.66666667%;
933 }
934 .w-col-9 {
935   width: 75%;
936 }
937 .w-col-10 {
938   width: 83.33333333%;
939 }
940 .w-col-11 {
941   width: 91.66666667%;
942 }
943 .w-col-12 {
944   width: 100%;
945 }
946 .w-hidden-main {
947   display: none !important;
948 }
949 @media screen and (max-width: 991px) {
950   .w-container {
951     max-width: 728px;
952   }
953   .w-hidden-main {
954     display: inherit !important;
955   }
956   .w-hidden-medium {
957     display: none !important;
958   }
959   .w-col-medium-1 {
960     width: 8.33333333%;
961   }
962   .w-col-medium-2 {
963     width: 16.66666667%;
964   }
965   .w-col-medium-3 {
966     width: 25%;
967   }
968   .w-col-medium-4 {
969     width: 33.33333333%;
970   }
971   .w-col-medium-5 {
972     width: 41.66666667%;
973   }
974   .w-col-medium-6 {
975     width: 50%;
976   }
977   .w-col-medium-7 {
978     width: 58.33333333%;
979   }
980   .w-col-medium-8 {
981     width: 66.66666667%;
982   }
983   .w-col-medium-9 {
984     width: 75%;
985   }
986   .w-col-medium-10 {
987     width: 83.33333333%;
988   }
989   .w-col-medium-11 {
990     width: 91.66666667%;
991   }
992   .w-col-medium-12 {
993     width: 100%;
994   }
995   .w-col-stack {
996     width: 100%;
997     left: auto;
998     right: auto;
999   }
1000 }
1001 @media screen and (max-width: 767px) {
1002   .w-hidden-main {
1003     display: inherit !important;
1004   }
1005   .w-hidden-medium {
1006     display: inherit !important;
1007   }
1008   .w-hidden-small {
1009     display: none !important;
1010   }
1011   .w-row,
1012   .w-container .w-row {
1013     margin-left: 0;
1014     margin-right: 0;
1015   }
1016   .w-col {
1017     width: 100%;
1018     left: auto;
1019     right: auto;
1020   }
1021   .w-col-small-1 {
1022     width: 8.33333333%;
1023   }
1024   .w-col-small-2 {
1025     width: 16.66666667%;
1026   }
1027   .w-col-small-3 {
1028     width: 25%;
1029   }
1030   .w-col-small-4 {
1031     width: 33.33333333%;
1032   }
1033   .w-col-small-5 {
1034     width: 41.66666667%;
1035   }
1036   .w-col-small-6 {
1037     width: 50%;
1038   }
1039   .w-col-small-7 {
1040     width: 58.33333333%;
1041   }
1042   .w-col-small-8 {
1043     width: 66.66666667%;
1044   }
1045   .w-col-small-9 {
1046     width: 75%;
1047   }
1048   .w-col-small-10 {
1049     width: 83.33333333%;
1050   }
1051   .w-col-small-11 {
1052     width: 91.66666667%;
1053   }
1054   .w-col-small-12 {
1055     width: 100%;
1056   }
1057 }
1058 @media screen and (max-width: 479px) {
1059   .w-container {
1060     max-width: none;
1061   }
1062   .w-hidden-main {
1063     display: inherit !important;
1064   }
1065   .w-hidden-medium {
1066     display: inherit !important;
1067   }
1068   .w-hidden-small {
1069     display: inherit !important;
1070   }
1071   .w-hidden-tiny {
1072     display: none !important;
1073   }
1074   .w-col {
1075     width: 100%;
1076   }
1077   .w-col-tiny-1 {
1078     width: 8.33333333%;
1079   }
1080   .w-col-tiny-2 {
1081     width: 16.66666667%;
1082   }
1083   .w-col-tiny-3 {
1084     width: 25%;
1085   }
1086   .w-col-tiny-4 {
1087     width: 33.33333333%;
1088   }
1089   .w-col-tiny-5 {
1090     width: 41.66666667%;
1091   }
1092   .w-col-tiny-6 {
1093     width: 50%;
1094   }
1095   .w-col-tiny-7 {
1096     width: 58.33333333%;
1097   }
1098   .w-col-tiny-8 {
1099     width: 66.66666667%;
1100   }
1101   .w-col-tiny-9 {
1102     width: 75%;
1103   }
1104   .w-col-tiny-10 {
1105     width: 83.33333333%;
1106   }
1107   .w-col-tiny-11 {
1108     width: 91.66666667%;
1109   }
1110   .w-col-tiny-12 {
1111     width: 100%;
1112   }
1113 }
1114 .w-widget {
1115   position: relative;
1116 }
1117 .w-widget-map {
1118   width: 100%;
1119   height: 400px;
1120 }
1121 .w-widget-map label {
1122   width: auto;
1123   display: inline;
1124 }
1125 .w-widget-map img {
1126   max-width: inherit;
1127 }
1128 .w-widget-map .gm-style-iw {
1129   text-align: center;
1130 }
1131 .w-widget-map .gm-style-iw > button {
1132   display: none !important;
1133 }
1134 .w-widget-twitter {
1135   overflow: hidden;
1136 }
1137 .w-widget-twitter-count-shim {
1138   display: inline-block;
1139   vertical-align: top;
1140   position: relative;
1141   width: 28px;
1142   height: 20px;
1143   text-align: center;
1144   background: white;
1145   border: #758696 solid 1px;
1146   border-radius: 3px;
1147 }
1148 .w-widget-twitter-count-shim * {
1149   pointer-events: none;
1150   user-select: none;
1151 }
1152 .w-widget-twitter-count-shim .w-widget-twitter-count-inner {
1153   position: relative;
1154   font-size: 15px;
1155   line-height: 12px;
1156   text-align: center;
1157   color: #999;
1158   font-family: serif;
1159 }
1160 .w-widget-twitter-count-shim .w-widget-twitter-count-clear {
1161   position: relative;
1162   display: block;
1163 }
1164 .w-widget-twitter-count-shim.w--large {
1165   width: 36px;
1166   height: 28px;
1167 }
1168 .w-widget-twitter-count-shim.w--large .w-widget-twitter-count-inner {
1169   font-size: 18px;
1170   line-height: 18px;
1171 }
1172 .w-widget-twitter-count-shim:not(.w--vertical) {
1173   margin-left: 5px;
1174   margin-right: 8px;
1175 }
1176 .w-widget-twitter-count-shim:not(.w--vertical).w--large {
1177   margin-left: 6px;
1178 }
1179 .w-widget-twitter-count-shim:not(.w--vertical):before,
1180 .w-widget-twitter-count-shim:not(.w--vertical):after {
1181   top: 50%;
1182   left: 0;
1183   border: solid transparent;
1184   content: ' ';
1185   height: 0;
1186   width: 0;
1187   position: absolute;
1188   pointer-events: none;
1189 }
1190 .w-widget-twitter-count-shim:not(.w--vertical):before {
1191   border-color: rgba(117, 134, 150, 0);
1192   border-right-color: #5d6c7b;
1193   border-width: 4px;
1194   margin-left: -9px;
1195   margin-top: -4px;
1196 }
1197 .w-widget-twitter-count-shim:not(.w--vertical).w--large:before {
1198   border-width: 5px;
1199   margin-left: -10px;
1200   margin-top: -5px;
1201 }
1202 .w-widget-twitter-count-shim:not(.w--vertical):after {
1203   border-color: rgba(255, 255, 255, 0);
1204   border-right-color: white;
1205   border-width: 4px;
1206   margin-left: -8px;
1207   margin-top: -4px;
1208 }
1209 .w-widget-twitter-count-shim:not(.w--vertical).w--large:after {
1210   border-width: 5px;
1211   margin-left: -9px;
1212   margin-top: -5px;
1213 }
1214 .w-widget-twitter-count-shim.w--vertical {
1215   width: 61px;
1216   height: 33px;
1217   margin-bottom: 8px;
1218 }
1219 .w-widget-twitter-count-shim.w--vertical:before,
1220 .w-widget-twitter-count-shim.w--vertical:after {
1221   top: 100%;
1222   left: 50%;
1223   border: solid transparent;
1224   content: ' ';
1225   height: 0;
1226   width: 0;
1227   position: absolute;
1228   pointer-events: none;
1229 }
1230 .w-widget-twitter-count-shim.w--vertical:before {
1231   border-color: rgba(117, 134, 150, 0);
1232   border-top-color: #5d6c7b;
1233   border-width: 5px;
1234   margin-left: -5px;
1235 }
1236 .w-widget-twitter-count-shim.w--vertical:after {
1237   border-color: rgba(255, 255, 255, 0);
1238   border-top-color: white;
1239   border-width: 4px;
1240   margin-left: -4px;
1241 }
1242 .w-widget-twitter-count-shim.w--vertical .w-widget-twitter-count-inner {
1243   font-size: 18px;
1244   line-height: 22px;
1245 }
1246 .w-widget-twitter-count-shim.w--vertical.w--large {
1247   width: 76px;
1248 }
1249 .w-background-video {
1250   position: relative;
1251   overflow: hidden;
1252   height: 500px;
1253   color: white;
1254 }
1255 .w-background-video > video {
1256   background-size: cover;
1257   background-position: 50% 50%;
1258   position: absolute;
1259   margin: auto;
1260   width: 100%;
1261   height: 100%;
1262   right: -100%;
1263   bottom: -100%;
1264   top: -100%;
1265   left: -100%;
1266   object-fit: cover;
1267   z-index: -100;
1268 }
1269 .w-background-video > video::-webkit-media-controls-start-playback-button {
1270   display: none !important;
1271   -webkit-appearance: none;
1272 }
1273 .w-background-video--control {
1274   position: absolute;
1275   bottom: 1em;
1276   right: 1em;
1277   background-color: transparent;
1278   padding: 0;
1279 }
1280 .w-background-video--control > [hidden] {
1281   display: none !important;
1282 }
1283 .w-slider {
1284   position: relative;
1285   height: 300px;
1286   text-align: center;
1287   background: #dddddd;
1288   clear: both;
1289   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
1290   tap-highlight-color: rgba(0, 0, 0, 0);
1291 }
1292 .w-slider-mask {
1293   position: relative;
1294   display: block;
1295   overflow: hidden;
1296   z-index: 1;
1297   left: 0;
1298   right: 0;
1299   height: 100%;
1300   white-space: nowrap;
1301 }
1302 .w-slide {
1303   position: relative;
1304   display: inline-block;
1305   vertical-align: top;
1306   width: 100%;
1307   height: 100%;
1308   white-space: normal;
1309   text-align: left;
1310 }
1311 .w-slider-nav {
1312   position: absolute;
1313   z-index: 2;
1314   top: auto;
1315   right: 0;
1316   bottom: 0;
1317   left: 0;
1318   margin: auto;
1319   padding-top: 10px;
1320   height: 40px;
1321   text-align: center;
1322   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
1323   tap-highlight-color: rgba(0, 0, 0, 0);
1324 }
1325 .w-slider-nav.w-round > div {
1326   border-radius: 100%;
1327 }
1328 .w-slider-nav.w-num > div {
1329   width: auto;
1330   height: auto;
1331   padding: 0.2em 0.5em;
1332   font-size: inherit;
1333   line-height: inherit;
1334 }
1335 .w-slider-nav.w-shadow > div {
1336   box-shadow: 0 0 3px rgba(51, 51, 51, 0.4);
1337 }
1338 .w-slider-nav-invert {
1339   color: #fff;
1340 }
1341 .w-slider-nav-invert > div {
1342   background-color: rgba(34, 34, 34, 0.4);
1343 }
1344 .w-slider-nav-invert > div.w-active {
1345   background-color: #222;
1346 }
1347 .w-slider-dot {
1348   position: relative;
1349   display: inline-block;
1350   width: 1em;
1351   height: 1em;
1352   background-color: rgba(255, 255, 255, 0.4);
1353   cursor: pointer;
1354   margin: 0 3px 0.5em;
1355   transition: background-color 100ms, color 100ms;
1356 }
1357 .w-slider-dot.w-active {
1358   background-color: #fff;
1359 }
1360 .w-slider-dot:focus {
1361   outline: none;
1362   box-shadow: 0px 0px 0px 2px #fff;
1363 }
1364 .w-slider-dot:focus.w-active {
1365   box-shadow: none;
1366 }
1367 .w-slider-arrow-left,
1368 .w-slider-arrow-right {
1369   position: absolute;
1370   width: 80px;
1371   top: 0;
1372   right: 0;
1373   bottom: 0;
1374   left: 0;
1375   margin: auto;
1376   cursor: pointer;
1377   overflow: hidden;
1378   color: white;
1379   font-size: 40px;
1380   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
1381   tap-highlight-color: rgba(0, 0, 0, 0);
1382   user-select: none;
1383 }
1384 .w-slider-arrow-left [class^='w-icon-'],
1385 .w-slider-arrow-right [class^='w-icon-'],
1386 .w-slider-arrow-left [class*=' w-icon-'],
1387 .w-slider-arrow-right [class*=' w-icon-'] {
1388   position: absolute;
1389 }
1390 .w-slider-arrow-left:focus,
1391 .w-slider-arrow-right:focus {
1392   outline: 0;
1393 }
1394 .w-slider-arrow-left {
1395   z-index: 3;
1396   right: auto;
1397 }
1398 .w-slider-arrow-right {
1399   z-index: 4;
1400   left: auto;
1401 }
1402 .w-icon-slider-left,
1403 .w-icon-slider-right {
1404   top: 0;
1405   right: 0;
1406   bottom: 0;
1407   left: 0;
1408   margin: auto;
1409   width: 1em;
1410   height: 1em;
1411 }
1412 .w-slider-aria-label {
1413   border: 0;
1414   clip: rect(0 0 0 0);
1415   height: 1px;
1416   margin: -1px;
1417   overflow: hidden;
1418   padding: 0;
1419   position: absolute;
1420   width: 1px;
1421 }
1422 .w-slider-force-show {
1423   display: block !important;
1424 }
1425 .w-dropdown {
1426   display: inline-block;
1427   position: relative;
1428   text-align: left;
1429   margin-left: auto;
1430   margin-right: auto;
1431   z-index: 900;
1432 }
1433 .w-dropdown-btn,
1434 .w-dropdown-toggle,
1435 .w-dropdown-link {
1436   position: relative;
1437   vertical-align: top;
1438   text-decoration: none;
1439   color: #222222;
1440   padding: 20px;
1441   text-align: left;
1442   margin-left: auto;
1443   margin-right: auto;
1444   white-space: nowrap;
1445 }
1446 .w-dropdown-toggle {
1447   user-select: none;
1448   display: inline-block;
1449   cursor: pointer;
1450   padding-right: 40px;
1451 }
1452 .w-dropdown-toggle:focus {
1453   outline: 0;
1454 }
1455 .w-icon-dropdown-toggle {
1456   position: absolute;
1457   top: 0;
1458   right: 0;
1459   bottom: 0;
1460   margin: auto;
1461   margin-right: 20px;
1462   width: 1em;
1463   height: 1em;
1464 }
1465 .w-dropdown-list {
1466   position: absolute;
1467   background: #dddddd;
1468   display: none;
1469   min-width: 100%;
1470 }
1471 .w-dropdown-list.w--open {
1472   display: block;
1473 }
1474 .w-dropdown-link {
1475   padding: 10px 20px;
1476   display: block;
1477   color: #222222;
1478 }
1479 .w-dropdown-link.w--current {
1480   color: #0082f3;
1481 }
1482 .w-dropdown-link:focus {
1483   outline: 0;
1484 }
1485 @media screen and (max-width: 767px) {
1486   .w-nav-brand {
1487     padding-left: 10px;
1488   }
1489 }
1490 /**
1491  * ## Note
1492  * Safari (on both iOS and OS X) does not handle viewport units (vh, vw) well.
1493  * For example percentage units do not work on descendants of elements that
1494  * have any dimensions expressed in viewport units. It also doesn't handle them at
1495  * all in `calc()`.
1496  */
1497 /**
1498  * Wrapper around all lightbox elements
1499  *
1500  * 1. Since the lightbox can receive focus, IE also gives it an outline.
1501  * 2. Fixes flickering on Chrome when a transition is in progress
1502  *    underneath the lightbox.
1503  */
1504 .w-lightbox-backdrop {
1505   cursor: auto;
1506   font-style: normal;
1507   letter-spacing: normal;
1508   list-style: disc;
1509   text-indent: 0;
1510   text-shadow: none;
1511   text-transform: none;
1512   visibility: visible;
1513   white-space: normal;
1514   word-break: normal;
1515   word-spacing: normal;
1516   word-wrap: normal;
1517   position: fixed;
1518   top: 0;
1519   right: 0;
1520   bottom: 0;
1521   left: 0;
1522   color: #fff;
1523   font-family: "Helvetica Neue", Helvetica, Ubuntu, "Segoe UI", Verdana, sans-serif;
1524   font-size: 17px;
1525   line-height: 1.2;
1526   font-weight: 300;
1527   text-align: center;
1528   background: rgba(0, 0, 0, 0.9);
1529   z-index: 2000;
1530   outline: 0;
1531   /* 1 */
1532   opacity: 0;
1533   -webkit-user-select: none;
1534   -moz-user-select: none;
1535   -webkit-tap-highlight-color: transparent;
1536   -webkit-transform: translate(0, 0);
1537   /* 2 */
1538 }
1539 /**
1540  * Neat trick to bind the rubberband effect to our canvas instead of the whole
1541  * document on iOS. It also prevents a bug that causes the document underneath to scroll.
1542  */
1543 .w-lightbox-backdrop,
1544 .w-lightbox-container {
1545   height: 100%;
1546   overflow: auto;
1547   -webkit-overflow-scrolling: touch;
1548 }
1549 .w-lightbox-content {
1550   position: relative;
1551   height: 100vh;
1552   overflow: hidden;
1553 }
1554 .w-lightbox-view {
1555   position: absolute;
1556   width: 100vw;
1557   height: 100vh;
1558   opacity: 0;
1559 }
1560 .w-lightbox-view:before {
1561   content: "";
1562   height: 100vh;
1563 }
1564 /* .w-lightbox-content */
1565 .w-lightbox-group,
1566 .w-lightbox-group .w-lightbox-view,
1567 .w-lightbox-group .w-lightbox-view:before {
1568   height: 86vh;
1569 }
1570 .w-lightbox-frame,
1571 .w-lightbox-view:before {
1572   display: inline-block;
1573   vertical-align: middle;
1574 }
1575 /*
1576  * 1. Remove default margin set by user-agent on the <figure> element.
1577  */
1578 .w-lightbox-figure {
1579   position: relative;
1580   margin: 0;
1581   /* 1 */
1582 }
1583 .w-lightbox-group .w-lightbox-figure {
1584   cursor: pointer;
1585 }
1586 /**
1587  * IE adds image dimensions as width and height attributes on the IMG tag,
1588  * but we need both width and height to be set to auto to enable scaling.
1589  */
1590 .w-lightbox-img {
1591   width: auto;
1592   height: auto;
1593   max-width: none;
1594 }
1595 /**
1596  * 1. Reset if style is set by user on "All Images"
1597  */
1598 .w-lightbox-image {
1599   display: block;
1600   float: none;
1601   /* 1 */
1602   max-width: 100vw;
1603   max-height: 100vh;
1604 }
1605 .w-lightbox-group .w-lightbox-image {
1606   max-height: 86vh;
1607 }
1608 .w-lightbox-caption {
1609   position: absolute;
1610   right: 0;
1611   bottom: 0;
1612   left: 0;
1613   padding: 0.5em 1em;
1614   background: rgba(0, 0, 0, 0.4);
1615   text-align: left;
1616   text-overflow: ellipsis;
1617   white-space: nowrap;
1618   overflow: hidden;
1619 }
1620 .w-lightbox-embed {
1621   position: absolute;
1622   top: 0;
1623   right: 0;
1624   bottom: 0;
1625   left: 0;
1626   width: 100%;
1627   height: 100%;
1628 }
1629 .w-lightbox-control {
1630   position: absolute;
1631   top: 0;
1632   width: 4em;
1633   background-size: 24px;
1634   background-repeat: no-repeat;
1635   background-position: center;
1636   cursor: pointer;
1637   -webkit-transition: all 0.3s;
1638   transition: all 0.3s;
1639 }
1640 .w-lightbox-left {
1641   display: none;
1642   bottom: 0;
1643   left: 0;
1644   /* <svg xmlns="http://www.w3.org/2000/svg" viewBox="-20 0 24 40" width="24" height="40"><g transform="rotate(45)"><path d="m0 0h5v23h23v5h-28z" opacity=".4"/><path d="m1 1h3v23h23v3h-26z" fill="#fff"/></g></svg> */
1645   background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9Ii0yMCAwIDI0IDQwIiB3aWR0aD0iMjQiIGhlaWdodD0iNDAiPjxnIHRyYW5zZm9ybT0icm90YXRlKDQ1KSI+PHBhdGggZD0ibTAgMGg1djIzaDIzdjVoLTI4eiIgb3BhY2l0eT0iLjQiLz48cGF0aCBkPSJtMSAxaDN2MjNoMjN2M2gtMjZ6IiBmaWxsPSIjZmZmIi8+PC9nPjwvc3ZnPg==");
1646 }
1647 .w-lightbox-right {
1648   display: none;
1649   right: 0;
1650   bottom: 0;
1651   /* <svg xmlns="http://www.w3.org/2000/svg" viewBox="-4 0 24 40" width="24" height="40"><g transform="rotate(45)"><path d="m0-0h28v28h-5v-23h-23z" opacity=".4"/><path d="m1 1h26v26h-3v-23h-23z" fill="#fff"/></g></svg> */
1652   background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9Ii00IDAgMjQgNDAiIHdpZHRoPSIyNCIgaGVpZ2h0PSI0MCI+PGcgdHJhbnNmb3JtPSJyb3RhdGUoNDUpIj48cGF0aCBkPSJtMC0waDI4djI4aC01di0yM2gtMjN6IiBvcGFjaXR5PSIuNCIvPjxwYXRoIGQ9Im0xIDFoMjZ2MjZoLTN2LTIzaC0yM3oiIGZpbGw9IiNmZmYiLz48L2c+PC9zdmc+");
1653 }
1654 /*
1655  * Without specifying the with and height inside the SVG, all versions of IE render the icon too small.
1656  * The bug does not seem to manifest itself if the elements are tall enough such as the above arrows.
1657  * (http://stackoverflow.com/questions/16092114/background-size-differs-in-internet-explorer)
1658  */
1659 .w-lightbox-close {
1660   right: 0;
1661   height: 2.6em;
1662   /* <svg xmlns="http://www.w3.org/2000/svg" viewBox="-4 0 18 17" width="18" height="17"><g transform="rotate(45)"><path d="m0 0h7v-7h5v7h7v5h-7v7h-5v-7h-7z" opacity=".4"/><path d="m1 1h7v-7h3v7h7v3h-7v7h-3v-7h-7z" fill="#fff"/></g></svg> */
1663   background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9Ii00IDAgMTggMTciIHdpZHRoPSIxOCIgaGVpZ2h0PSIxNyI+PGcgdHJhbnNmb3JtPSJyb3RhdGUoNDUpIj48cGF0aCBkPSJtMCAwaDd2LTdoNXY3aDd2NWgtN3Y3aC01di03aC03eiIgb3BhY2l0eT0iLjQiLz48cGF0aCBkPSJtMSAxaDd2LTdoM3Y3aDd2M2gtN3Y3aC0zdi03aC03eiIgZmlsbD0iI2ZmZiIvPjwvZz48L3N2Zz4=");
1664   background-size: 18px;
1665 }
1666 /**
1667  * 1. All IE versions add extra space at the bottom without this.
1668  */
1669 .w-lightbox-strip {
1670   position: absolute;
1671   bottom: 0;
1672   left: 0;
1673   right: 0;
1674   padding: 0 1vh;
1675   line-height: 0;
1676   /* 1 */
1677   white-space: nowrap;
1678   overflow-x: auto;
1679   overflow-y: hidden;
1680 }
1681 /*
1682  * 1. We use content-box to avoid having to do `width: calc(10vh + 2vw)`
1683  *    which doesn't work in Safari anyway.
1684  * 2. Chrome renders images pixelated when switching to GPU. Making sure
1685  *    the parent is also rendered on the GPU (by setting translate3d for
1686  *    example) fixes this behavior.
1687  */
1688 .w-lightbox-item {
1689   display: inline-block;
1690   width: 10vh;
1691   padding: 2vh 1vh;
1692   box-sizing: content-box;
1693   /* 1 */
1694   cursor: pointer;
1695   -webkit-transform: translate3d(0, 0, 0);
1696   /* 2 */
1697 }
1698 .w-lightbox-active {
1699   opacity: 0.3;
1700 }
1701 .w-lightbox-thumbnail {
1702   position: relative;
1703   height: 10vh;
1704   background: #222;
1705   overflow: hidden;
1706 }
1707 .w-lightbox-thumbnail-image {
1708   position: absolute;
1709   top: 0;
1710   left: 0;
1711 }
1712 .w-lightbox-thumbnail .w-lightbox-tall {
1713   top: 50%;
1714   width: 100%;
1715   -webkit-transform: translate(0, -50%);
1716   transform: translate(0, -50%);
1717 }
1718 .w-lightbox-thumbnail .w-lightbox-wide {
1719   left: 50%;
1720   height: 100%;
1721   -webkit-transform: translate(-50%, 0);
1722   transform: translate(-50%, 0);
1723 }
1724 /*
1725  * Spinner
1726  *
1727  * Absolute pixel values are used to avoid rounding errors that would cause
1728  * the white spinning element to be misaligned with the track.
1729  */
1730 .w-lightbox-spinner {
1731   position: absolute;
1732   top: 50%;
1733   left: 50%;
1734   box-sizing: border-box;
1735   width: 40px;
1736   height: 40px;
1737   margin-top: -20px;
1738   margin-left: -20px;
1739   border: 5px solid rgba(0, 0, 0, 0.4);
1740   border-radius: 50%;
1741   -webkit-animation: spin 0.8s infinite linear;
1742   animation: spin 0.8s infinite linear;
1743 }
1744 .w-lightbox-spinner:after {
1745   content: "";
1746   position: absolute;
1747   top: -4px;
1748   right: -4px;
1749   bottom: -4px;
1750   left: -4px;
1751   border: 3px solid transparent;
1752   border-bottom-color: #fff;
1753   border-radius: 50%;
1754 }
1755 /*
1756  * Utility classes
1757  */
1758 .w-lightbox-hide {
1759   display: none;
1760 }
1761 .w-lightbox-noscroll {
1762   overflow: hidden;
1763 }
1764 @media (min-width: 768px) {
1765   .w-lightbox-content {
1766     height: 96vh;
1767     margin-top: 2vh;
1768   }
1769   .w-lightbox-view,
1770   .w-lightbox-view:before {
1771     height: 96vh;
1772   }
1773   /* .w-lightbox-content */
1774   .w-lightbox-group,
1775   .w-lightbox-group .w-lightbox-view,
1776   .w-lightbox-group .w-lightbox-view:before {
1777     height: 84vh;
1778   }
1779   .w-lightbox-image {
1780     max-width: 96vw;
1781     max-height: 96vh;
1782   }
1783   .w-lightbox-group .w-lightbox-image {
1784     max-width: 82.3vw;
1785     max-height: 84vh;
1786   }
1787   .w-lightbox-left,
1788   .w-lightbox-right {
1789     display: block;
1790     opacity: 0.5;
1791   }
1792   .w-lightbox-close {
1793     opacity: 0.8;
1794   }
1795   .w-lightbox-control:hover {
1796     opacity: 1;
1797   }
1798 }
1799 .w-lightbox-inactive,
1800 .w-lightbox-inactive:hover {
1801   opacity: 0;
1802 }
1803 .w-richtext:before,
1804 .w-richtext:after {
1805   content: " ";
1806   display: table;
1807   grid-column-start: 1;
1808   grid-row-start: 1;
1809   grid-column-end: 2;
1810   grid-row-end: 2;
1811 }
1812 .w-richtext:after {
1813   clear: both;
1814 }
1815 .w-richtext[contenteditable="true"]:before,
1816 .w-richtext[contenteditable="true"]:after {
1817   white-space: initial;
1818 }
1819 .w-richtext ol,
1820 .w-richtext ul {
1821   overflow: hidden;
1822 }
1823 .w-richtext .w-richtext-figure-selected.w-richtext-figure-type-video div:after,
1824 .w-richtext .w-richtext-figure-selected[data-rt-type="video"] div:after {
1825   outline: 2px solid #2895f7;
1826 }
1827 .w-richtext .w-richtext-figure-selected.w-richtext-figure-type-image div,
1828 .w-richtext .w-richtext-figure-selected[data-rt-type="image"] div {
1829   outline: 2px solid #2895f7;
1830 }
1831 .w-richtext figure.w-richtext-figure-type-video > div:after,
1832 .w-richtext figure[data-rt-type="video"] > div:after {
1833   content: '';
1834   position: absolute;
1835   display: none;
1836   left: 0;
1837   top: 0;
1838   right: 0;
1839   bottom: 0;
1840 }
1841 .w-richtext figure {
1842   position: relative;
1843   max-width: 60%;
1844 }
1845 .w-richtext figure > div:before {
1846   cursor: default!important;
1847 }
1848 .w-richtext figure img {
1849   width: 100%;
1850 }
1851 .w-richtext figure figcaption.w-richtext-figcaption-placeholder {
1852   opacity: 0.6;
1853 }
1854 .w-richtext figure div {
1855   /* fix incorrectly sized selection border in the data manager */
1856   font-size: 0px;
1857   color: transparent;
1858 }
1859 .w-richtext figure.w-richtext-figure-type-image,
1860 .w-richtext figure[data-rt-type="image"] {
1861   display: table;
1862 }
1863 .w-richtext figure.w-richtext-figure-type-image > div,
1864 .w-richtext figure[data-rt-type="image"] > div {
1865   display: inline-block;
1866 }
1867 .w-richtext figure.w-richtext-figure-type-image > figcaption,
1868 .w-richtext figure[data-rt-type="image"] > figcaption {
1869   display: table-caption;
1870   caption-side: bottom;
1871 }
1872 .w-richtext figure.w-richtext-figure-type-video,
1873 .w-richtext figure[data-rt-type="video"] {
1874   width: 60%;
1875   height: 0;
1876 }
1877 .w-richtext figure.w-richtext-figure-type-video iframe,
1878 .w-richtext figure[data-rt-type="video"] iframe {
1879   position: absolute;
1880   top: 0;
1881   left: 0;
1882   width: 100%;
1883   height: 100%;
1884 }
1885 .w-richtext figure.w-richtext-figure-type-video > div,
1886 .w-richtext figure[data-rt-type="video"] > div {
1887   width: 100%;
1888 }
1889 .w-richtext figure.w-richtext-align-center {
1890   margin-right: auto;
1891   margin-left: auto;
1892   clear: both;
1893 }
1894 .w-richtext figure.w-richtext-align-center.w-richtext-figure-type-image > div,
1895 .w-richtext figure.w-richtext-align-center[data-rt-type="image"] > div {
1896   max-width: 100%;
1897 }
1898 .w-richtext figure.w-richtext-align-normal {
1899   clear: both;
1900 }
1901 .w-richtext figure.w-richtext-align-fullwidth {
1902   width: 100%;
1903   max-width: 100%;
1904   text-align: center;
1905   clear: both;
1906   display: block;
1907   margin-right: auto;
1908   margin-left: auto;
1909 }
1910 .w-richtext figure.w-richtext-align-fullwidth > div {
1911   display: inline-block;
1912   /* padding-bottom is used for aspect ratios in video figures
1913       we want the div to inherit that so hover/selection borders in the designer-canvas
1914       fit right*/
1915   padding-bottom: inherit;
1916 }
1917 .w-richtext figure.w-richtext-align-fullwidth > figcaption {
1918   display: block;
1919 }
1920 .w-richtext figure.w-richtext-align-floatleft {
1921   float: left;
1922   margin-right: 15px;
1923   clear: none;
1924 }
1925 .w-richtext figure.w-richtext-align-floatright {
1926   float: right;
1927   margin-left: 15px;
1928   clear: none;
1929 }
1930 .w-nav {
1931   position: relative;
1932   background: #dddddd;
1933   z-index: 1000;
1934 }
1935 .w-nav:before,
1936 .w-nav:after {
1937   content: " ";
1938   display: table;
1939   grid-column-start: 1;
1940   grid-row-start: 1;
1941   grid-column-end: 2;
1942   grid-row-end: 2;
1943 }
1944 .w-nav:after {
1945   clear: both;
1946 }
1947 .w-nav-brand {
1948   position: relative;
1949   float: left;
1950   text-decoration: none;
1951   color: #333333;
1952 }
1953 .w-nav-link {
1954   position: relative;
1955   display: inline-block;
1956   vertical-align: top;
1957   text-decoration: none;
1958   color: #222222;
1959   padding: 20px;
1960   text-align: left;
1961   margin-left: auto;
1962   margin-right: auto;
1963 }
1964 .w-nav-link.w--current {
1965   color: #0082f3;
1966 }
1967 .w-nav-menu {
1968   position: relative;
1969   float: right;
1970 }
1971 [data-nav-menu-open] {
1972   display: block !important;
1973   position: absolute;
1974   top: 100%;
1975   left: 0;
1976   right: 0;
1977   background: #C8C8C8;
1978   text-align: center;
1979   overflow: visible;
1980   min-width: 200px;
1981 }
1982 .w--nav-link-open {
1983   display: block;
1984   position: relative;
1985 }
1986 .w-nav-overlay {
1987   position: absolute;
1988   overflow: hidden;
1989   display: none;
1990   top: 100%;
1991   left: 0;
1992   right: 0;
1993   width: 100%;
1994 }
1995 .w-nav-overlay [data-nav-menu-open] {
1996   top: 0;
1997 }
1998 .w-nav[data-animation='over-left'] .w-nav-overlay {
1999   width: auto;
2000 }
2001 .w-nav[data-animation='over-left'] .w-nav-overlay,
2002 .w-nav[data-animation='over-left'] [data-nav-menu-open] {
2003   right: auto;
2004   z-index: 1;
2005   top: 0;
2006 }
2007 .w-nav[data-animation='over-right'] .w-nav-overlay {
2008   width: auto;
2009 }
2010 .w-nav[data-animation='over-right'] .w-nav-overlay,
2011 .w-nav[data-animation='over-right'] [data-nav-menu-open] {
2012   left: auto;
2013   z-index: 1;
2014   top: 0;
2015 }
2016 .w-nav-button {
2017   position: relative;
2018   float: right;
2019   padding: 18px;
2020   font-size: 24px;
2021   display: none;
2022   cursor: pointer;
2023   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
2024   tap-highlight-color: rgba(0, 0, 0, 0);
2025   user-select: none;
2026 }
2027 .w-nav-button:focus {
2028   outline: 0;
2029 }
2030 .w-nav-button.w--open {
2031   background-color: #C8C8C8;
2032   color: white;
2033 }
2034 .w-nav[data-collapse='all'] .w-nav-menu {
2035   display: none;
2036 }
2037 .w-nav[data-collapse='all'] .w-nav-button {
2038   display: block;
2039 }
2040 .w--nav-dropdown-open {
2041   display: block;
2042 }
2043 .w--nav-dropdown-toggle-open {
2044   display: block;
2045 }
2046 .w--nav-dropdown-list-open {
2047   position: static;
2048 }
2049 @media screen and (max-width: 991px) {
2050   .w-nav[data-collapse='medium'] .w-nav-menu {
2051     display: none;
2052   }
2053   .w-nav[data-collapse='medium'] .w-nav-button {
2054     display: block;
2055   }
2056 }
2057 @media screen and (max-width: 767px) {
2058   .w-nav[data-collapse='small'] .w-nav-menu {
2059     display: none;
2060   }
2061   .w-nav[data-collapse='small'] .w-nav-button {
2062     display: block;
2063   }
2064   .w-nav-brand {
2065     padding-left: 10px;
2066   }
2067 }
2068 @media screen and (max-width: 479px) {
2069   .w-nav[data-collapse='tiny'] .w-nav-menu {
2070     display: none;
2071   }
2072   .w-nav[data-collapse='tiny'] .w-nav-button {
2073     display: block;
2074   }
2075 }
2076 .w-tabs {
2077   position: relative;
2078 }
2079 .w-tabs:before,
2080 .w-tabs:after {
2081   content: " ";
2082   display: table;
2083   grid-column-start: 1;
2084   grid-row-start: 1;
2085   grid-column-end: 2;
2086   grid-row-end: 2;
2087 }
2088 .w-tabs:after {
2089   clear: both;
2090 }
2091 .w-tab-menu {
2092   position: relative;
2093 }
2094 .w-tab-link {
2095   position: relative;
2096   display: inline-block;
2097   vertical-align: top;
2098   text-decoration: none;
2099   padding: 9px 30px;
2100   text-align: left;
2101   cursor: pointer;
2102   color: #222222;
2103   background-color: #dddddd;
2104 }
2105 .w-tab-link.w--current {
2106   background-color: #C8C8C8;
2107 }
2108 .w-tab-link:focus {
2109   outline: 0;
2110 }
2111 .w-tab-content {
2112   position: relative;
2113   display: block;
2114   overflow: hidden;
2115 }
2116 .w-tab-pane {
2117   position: relative;
2118   display: none;
2119 }
2120 .w--tab-active {
2121   display: block;
2122 }
2123 @media screen and (max-width: 479px) {
2124   .w-tab-link {
2125     display: block;
2126   }
2127 }
2128 .w-ix-emptyfix:after {
2129   content: "";
2130 }
2131 @keyframes spin {
2132   0% {
2133     transform: rotate(0deg);
2134   }
2135   100% {
2136     transform: rotate(360deg);
2137   }
2138 }
2139 .w-dyn-empty {
2140   padding: 10px;
2141   background-color: #dddddd;
2142 }
2143 .w-dyn-hide {
2144   display: none !important;
2145 }
2146 .w-dyn-bind-empty {
2147   display: none !important;
2148 }
2149 .w-condition-invisible {
2150   display: none !important;
2151 }
2152 .wf-layout-layout {
2153   display: grid;
2154 }
2155 
2156 :root {
2157   --white-6574afb3: white;
2158   --black-d17e8458: black;
2159   --white: white;
2160   --black: black;
2161 }
2162 
2163 body {
2164   font-family: Montserrat, sans-serif;
2165   color: #1a1b1f;
2166   font-size: 16px;
2167   line-height: 28px;
2168   font-weight: 400;
2169 }
2170 
2171 h1 {
2172   margin-top: 20px;
2173   margin-bottom: 15px;
2174   font-size: 44px;
2175   line-height: 62px;
2176   font-weight: 400;
2177 }
2178 
2179 h2 {
2180   margin-top: 10px;
2181   margin-bottom: 10px;
2182   font-size: 36px;
2183   line-height: 50px;
2184   font-weight: 400;
2185 }
2186 
2187 h3 {
2188   margin-top: 10px;
2189   margin-bottom: 10px;
2190   font-size: 30px;
2191   line-height: 46px;
2192   font-weight: 400;
2193 }
2194 
2195 h4 {
2196   margin-top: 10px;
2197   margin-bottom: 10px;
2198   font-size: 24px;
2199   line-height: 38px;
2200   font-weight: 400;
2201 }
2202 
2203 h5 {
2204   margin-top: 10px;
2205   margin-bottom: 10px;
2206   font-size: 20px;
2207   line-height: 34px;
2208   font-weight: 500;
2209 }
2210 
2211 h6 {
2212   margin-top: 10px;
2213   margin-bottom: 10px;
2214   font-size: 16px;
2215   line-height: 28px;
2216   font-weight: 500;
2217 }
2218 
2219 p {
2220   margin-bottom: 10px;
2221 }
2222 
2223 a {
2224   display: block;
2225   transition: opacity 200ms ease;
2226   color: #1a1b1f;
2227   text-decoration: underline;
2228 }
2229 
2230 a:hover {
2231   color: #32343a;
2232 }
2233 
2234 a:active {
2235   color: #43464d;
2236 }
2237 
2238 ul {
2239   margin-top: 20px;
2240   margin-bottom: 20px;
2241   padding-left: 40px;
2242   list-style-type: disc;
2243 }
2244 
2245 li {
2246   margin-bottom: 10px;
2247 }
2248 
2249 img {
2250   display: block;
2251 }
2252 
2253 label {
2254   margin-bottom: 10px;
2255 
2256   font-size: 12px;
2257   line-height: 20px;
2258   font-weight: 500;
2259   letter-spacing: 1px;
2260   text-transform: uppercase;
2261 }
2262 
2263 blockquote {
2264   margin-top: 25px;
2265   margin-bottom: 25px;
2266   padding: 15px 30px;
2267 
2268   border-left: 5px solid #E2E2E2;
2269 
2270   font-size: 20px;
2271   line-height: 34px;
2272 }
2273 
2274 figure {
2275   margin-top: 25px;
2276   padding-bottom: 20px;
2277 }
2278 
2279 figcaption {
2280   margin-top: 5px;
2281   opacity: 0.6;
2282   font-size: 14px;
2283   line-height: 26px;
2284   text-align: center;
2285 }
2286 
2287 .w-layout-grid {
2288   display: grid;
2289   grid-auto-columns: 1fr;
2290   grid-template-columns: 1fr 1fr;
2291   grid-template-rows: auto auto;
2292   grid-row-gap: 16px;
2293   grid-column-gap: 16px;
2294 }

What’s included

Normalize / reset
Based on normalize.css to align default styles across browsers.
Base element styles
Opinionated defaults for html, body, headings, paragraphs, lists, images, blockquotes, figures, etc.
Webflow core utility classes
Single-purpose helpers you can apply anywhere in your React project. Each class is named with a w- prefix.
Component frameworks
Predefined class systems for interactive Webflow elements like sliders, tabs, nav, dropdowns, lightbox, background video, and more.
Icon font & glyphs
@font-face for webflow-icons and [class^="w-icon-"] selectors.
Responsive breakpoints
Defaults around 991px, 767px, and 479px for container widths and column classes.
CSS variables & theme defaults
Variables from your Webflow site, plus base typography and link styles.

The global stylesheet is imported once, while per-component custom classes are exported as CSS Modules to keep styles from leaking.

Runtime Utilities

In addition to React components and global styles, DevLink also exports a small set of runtime helpers. These are the building blocks that your exported components rely on to render consistently inside your React app.

`_Builtin`

A collection of low-level primitives (like Block, Link, Image) that exported components use instead of raw HTML tags.

Ensures consistent behavior and attributes across your project.
Lets Webflow Links and Image components delegate rendering through the context provider.

`_utils`

Helper functions that simplify class management and other common patterns in the generated code.

Most notably, cx() is used to combine your scoped CSS module classes with Webflow class names safely.
Keeps class names predictable and collision-free.

DevLinkProvider

A React context provider that wires exported components into your app’s runtime. Wrap your root layout with DevLinkProvider so that all exported components get the correct rendering context.

layout.tsx

1 import { DevLinkProvider } from '@/devlink/DevLinkProvider';
2 import '@/devlink/global.css';
3 
4 export default function RootLayout({
5   children,
6 }: {
7   children: React.ReactNode;
8 }) {
9   return (
10     <html lang="en">
11       <body>
12         <DevLinkProvider>
13           {children}
14         </DevLinkProvider>
15       </body>
16     </html>
17   );
18 }

Do not manually edit exported components

DevLink auto-generates exported components. Any manual edits will be overwritten during the next sync and your changes will be lost.

Next steps

Styling Components

Learn how to style components for reliable export

Using Components

Learn how to use the components you’ve exported.

FAQs

Can I adjust the exported components?

Yes, you can adjust the exported components by modifying the Webflow component in the Designer and re-exporting them. Any manual changes to the exported components will be overwritten when you re-export them.

Can I export React components as JSX?

Yes. By default, DevLink exports React components as .js files. You can change the file extensions of the exported components and styles by modifying the fileExtensions setting in your DevLink configuration file.

Does DevLink export Custom Code?

DevLink exports any Code Embed elements inside a component. However, it doesn’t export custom code from the page or site.

To include custom code with a DevLink component, add it using a Code Embed element placed inside the component.