From b158a6d7226fb50ecedcc07da8ef30e5e5690e46 Mon Sep 17 00:00:00 2001
From: August Skare <post@augustskare.no>
Date: Thu, 18 Oct 2018 13:28:44 +0200
Subject: initial commit

---
 packages/dev-tools-pages/ts/components/Button.tsx  |  26 +++++
 packages/dev-tools-pages/ts/components/Code.tsx    | 114 +++++++++++++++++++++
 .../dev-tools-pages/ts/components/Container.tsx    |   9 ++
 .../dev-tools-pages/ts/components/ContentBlock.tsx |  47 +++++++++
 packages/dev-tools-pages/ts/components/Footer.tsx  |  91 ++++++++++++++++
 packages/dev-tools-pages/ts/components/Header.tsx  |  59 +++++++++++
 packages/dev-tools-pages/ts/components/Hero.tsx    |  37 +++++++
 .../dev-tools-pages/ts/components/InlineCode.tsx   |   8 ++
 packages/dev-tools-pages/ts/components/List.tsx    |  33 ++++++
 packages/dev-tools-pages/ts/components/Main.tsx    |  33 ++++++
 .../dev-tools-pages/ts/components/MetaTags.tsx     |  28 +++++
 packages/dev-tools-pages/ts/components/Tabs.tsx    |  79 ++++++++++++++
 .../dev-tools-pages/ts/components/Typography.tsx   |  17 +++
 .../dev-tools-pages/ts/components/meta_tags.tsx    |  25 -----
 .../dev-tools-pages/ts/components/ui/button.tsx    |  59 -----------
 .../dev-tools-pages/ts/components/ui/container.tsx |  55 ----------
 packages/dev-tools-pages/ts/components/ui/text.tsx |  74 -------------
 .../dev-tools-pages/ts/components/withContext.tsx  |  23 +++++
 packages/dev-tools-pages/ts/context/compiler.tsx   |  14 +++
 packages/dev-tools-pages/ts/context/cov.tsx        |  14 +++
 packages/dev-tools-pages/ts/context/index.tsx      |   5 +
 packages/dev-tools-pages/ts/context/profiler.tsx   |  14 +++
 packages/dev-tools-pages/ts/context/trace.tsx      |  14 +++
 packages/dev-tools-pages/ts/globalStyles.tsx       |  76 ++++++++++++++
 packages/dev-tools-pages/ts/globals.d.ts           |  10 ++
 packages/dev-tools-pages/ts/icons/logos/0x.svg     |   1 +
 .../dev-tools-pages/ts/icons/logos/compiler.svg    |   3 +
 packages/dev-tools-pages/ts/icons/logos/cov.svg    |   3 +
 .../dev-tools-pages/ts/icons/logos/profiler.svg    |   3 +
 packages/dev-tools-pages/ts/icons/logos/trace.svg  |   1 +
 packages/dev-tools-pages/ts/index.tsx              |  42 ++++++--
 packages/dev-tools-pages/ts/pages/Base.tsx         |  28 +++++
 packages/dev-tools-pages/ts/pages/Compiler.tsx     |  53 ++++++++++
 packages/dev-tools-pages/ts/pages/Cov.tsx          |  53 ++++++++++
 packages/dev-tools-pages/ts/pages/Profiler.tsx     |  53 ++++++++++
 packages/dev-tools-pages/ts/pages/Trace.tsx        |  53 ++++++++++
 packages/dev-tools-pages/ts/pages/landing.tsx      |  27 -----
 packages/dev-tools-pages/ts/utils/utils.ts         |  32 ------
 38 files changed, 1033 insertions(+), 283 deletions(-)
 create mode 100644 packages/dev-tools-pages/ts/components/Button.tsx
 create mode 100644 packages/dev-tools-pages/ts/components/Code.tsx
 create mode 100644 packages/dev-tools-pages/ts/components/Container.tsx
 create mode 100644 packages/dev-tools-pages/ts/components/ContentBlock.tsx
 create mode 100644 packages/dev-tools-pages/ts/components/Footer.tsx
 create mode 100644 packages/dev-tools-pages/ts/components/Header.tsx
 create mode 100644 packages/dev-tools-pages/ts/components/Hero.tsx
 create mode 100644 packages/dev-tools-pages/ts/components/InlineCode.tsx
 create mode 100644 packages/dev-tools-pages/ts/components/List.tsx
 create mode 100644 packages/dev-tools-pages/ts/components/Main.tsx
 create mode 100644 packages/dev-tools-pages/ts/components/MetaTags.tsx
 create mode 100644 packages/dev-tools-pages/ts/components/Tabs.tsx
 create mode 100644 packages/dev-tools-pages/ts/components/Typography.tsx
 delete mode 100644 packages/dev-tools-pages/ts/components/meta_tags.tsx
 delete mode 100644 packages/dev-tools-pages/ts/components/ui/button.tsx
 delete mode 100644 packages/dev-tools-pages/ts/components/ui/container.tsx
 delete mode 100644 packages/dev-tools-pages/ts/components/ui/text.tsx
 create mode 100644 packages/dev-tools-pages/ts/components/withContext.tsx
 create mode 100644 packages/dev-tools-pages/ts/context/compiler.tsx
 create mode 100644 packages/dev-tools-pages/ts/context/cov.tsx
 create mode 100644 packages/dev-tools-pages/ts/context/index.tsx
 create mode 100644 packages/dev-tools-pages/ts/context/profiler.tsx
 create mode 100644 packages/dev-tools-pages/ts/context/trace.tsx
 create mode 100644 packages/dev-tools-pages/ts/globalStyles.tsx
 create mode 100644 packages/dev-tools-pages/ts/icons/logos/0x.svg
 create mode 100644 packages/dev-tools-pages/ts/icons/logos/compiler.svg
 create mode 100644 packages/dev-tools-pages/ts/icons/logos/cov.svg
 create mode 100644 packages/dev-tools-pages/ts/icons/logos/profiler.svg
 create mode 100644 packages/dev-tools-pages/ts/icons/logos/trace.svg
 create mode 100644 packages/dev-tools-pages/ts/pages/Base.tsx
 create mode 100644 packages/dev-tools-pages/ts/pages/Compiler.tsx
 create mode 100644 packages/dev-tools-pages/ts/pages/Cov.tsx
 create mode 100644 packages/dev-tools-pages/ts/pages/Profiler.tsx
 create mode 100644 packages/dev-tools-pages/ts/pages/Trace.tsx
 delete mode 100644 packages/dev-tools-pages/ts/pages/landing.tsx
 delete mode 100644 packages/dev-tools-pages/ts/utils/utils.ts

(limited to 'packages/dev-tools-pages/ts')

diff --git a/packages/dev-tools-pages/ts/components/Button.tsx b/packages/dev-tools-pages/ts/components/Button.tsx
new file mode 100644
index 000000000..e676961c8
--- /dev/null
+++ b/packages/dev-tools-pages/ts/components/Button.tsx
@@ -0,0 +1,26 @@
+import styled from 'styled-components';
+
+import { withContext, Props } from './withContext';
+
+interface ButtonProps extends Props {
+    large?: boolean;
+}
+
+const Button =
+    styled.button <
+    ButtonProps >
+    `
+  font-family: inherit;
+  font-size: ${props => (props.large ? '1.125rem' : '.875rem')};
+  font-weight: 500;
+  white-space: nowrap;
+  vertical-align: middle;
+  background-color: ${props => props.colors.secondary};
+  color: #000;
+  border: 0;
+  border-radius: 5rem;
+  padding: ${props => (props.large ? '1.125rem 2.375rem' : '.5625rem 1.25rem')};
+  display: inline-block;
+`;
+
+export default withContext(Button);
diff --git a/packages/dev-tools-pages/ts/components/Code.tsx b/packages/dev-tools-pages/ts/components/Code.tsx
new file mode 100644
index 000000000..42d4234f1
--- /dev/null
+++ b/packages/dev-tools-pages/ts/components/Code.tsx
@@ -0,0 +1,114 @@
+import * as React from 'react';
+import styled from 'styled-components';
+
+import BaseButton from './Button';
+
+interface CodeProps {
+    children: React.ReactNode;
+    language?: string;
+}
+
+interface CodeState {
+    hlCode?: string;
+    copied?: boolean;
+}
+
+const Button = styled(BaseButton)`
+    opacity: 0;
+    position: absolute;
+    top: 1rem;
+    right: 1rem;
+    transition: opacity 0.2s;
+`;
+
+const Base =
+    styled.div <
+    CodeProps >
+    `
+  color: ${props => (props.language === undefined ? '#FFF' : 'inherit')};
+  background-color: ${props => (props.language === undefined ? '#000' : '#F1F4F5')};
+  white-space: ${props => (props.language === undefined ? 'nowrap' : '')};
+  position: relative;
+  &:hover ${Button} {
+    opacity: 1;
+  }
+`;
+
+const StyledCode = styled.code`
+    padding: 1.5rem;
+    display: block;
+    overflow-y: scroll;
+    -webkit-overflow-scrolling: touch;
+`;
+
+const StyledPre = styled.pre`
+    margin: 0;
+`;
+
+const StyledCopyInput = styled.textarea`
+    height: 0;
+    position: absolute;
+    top: 0;
+    right: 0;
+    z-index: -1;
+`;
+
+const CopyInput = StyledCopyInput as any;
+
+class Code extends React.Component<CodeProps, CodeState> {
+    code = React.createRef<HTMLTextAreaElement>();
+
+    state: CodeState = {};
+
+    constructor(props: CodeProps) {
+        super(props);
+    }
+
+    async componentDidMount() {
+        const { language, children } = this.props;
+
+        if (language !== undefined) {
+            const { highlight } = await import(/* webpackChunkName: 'highlight.js' */ 'highlight.js');
+            const { value: hlCode } = highlight(language, children as string);
+            this.setState({ hlCode });
+        }
+    }
+
+    handleCopy = async () => {
+        try {
+            if ('clipboard' in navigator) {
+                await (navigator as any).clipboard.writeText(this.props.children);
+                this.setState({ copied: true });
+            } else {
+                this.code.current.focus();
+                this.code.current.select();
+                document.execCommand('copy');
+                this.setState({ copied: true });
+            }
+        } catch (error) {
+            this.setState({ copied: false });
+        }
+    };
+
+    render() {
+        const { language, children } = this.props;
+
+        return (
+            <Base language={language}>
+                <StyledPre>
+                    {this.state.hlCode !== undefined ? (
+                        <StyledCode dangerouslySetInnerHTML={{ __html: this.state.hlCode }} />
+                    ) : (
+                        <StyledCode>{this.props.children}</StyledCode>
+                    )}
+                </StyledPre>
+                <Button onClick={this.handleCopy}>Copy</Button>
+                {!('clipboard' in navigator) ? (
+                    <CopyInput readOnly aria-hidden="true" ref={this.code} value={children} />
+                ) : null}
+            </Base>
+        );
+    }
+}
+
+export default Code;
diff --git a/packages/dev-tools-pages/ts/components/Container.tsx b/packages/dev-tools-pages/ts/components/Container.tsx
new file mode 100644
index 000000000..d6df7a0b4
--- /dev/null
+++ b/packages/dev-tools-pages/ts/components/Container.tsx
@@ -0,0 +1,9 @@
+import styled from 'styled-components';
+
+const Container = styled.div`
+    max-width: 77.5rem;
+    width: calc(100% - 3.75rem);
+    margin: 0 auto;
+`;
+
+export default Container;
diff --git a/packages/dev-tools-pages/ts/components/ContentBlock.tsx b/packages/dev-tools-pages/ts/components/ContentBlock.tsx
new file mode 100644
index 000000000..56d52a150
--- /dev/null
+++ b/packages/dev-tools-pages/ts/components/ContentBlock.tsx
@@ -0,0 +1,47 @@
+import * as React from 'react';
+import styled from 'styled-components';
+
+import { Beta } from './Typography';
+
+const Base = styled.div`
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    &:not(:last-of-type) {
+        margin-bottom: 6.25rem;
+    }
+`;
+
+const Content = styled.div`
+    width: 66.693548387%;
+`;
+
+const Item = styled.div`
+    p {
+        max-width: 31.25rem;
+    }
+
+    &:not(:last-of-type) {
+        margin-bottom: 2.5rem;
+    }
+`;
+
+interface ContentBlockProps {
+    title: string;
+    children: React.ReactNode;
+}
+
+function ContentBlock(props: ContentBlockProps) {
+    const children = React.Children.map(props.children, child => {
+        return <Item>{child}</Item>;
+    });
+
+    return (
+        <Base>
+            <Beta>{props.title}</Beta>
+            <Content>{children}</Content>
+        </Base>
+    );
+}
+
+export default ContentBlock;
diff --git a/packages/dev-tools-pages/ts/components/Footer.tsx b/packages/dev-tools-pages/ts/components/Footer.tsx
new file mode 100644
index 000000000..82b2de1a3
--- /dev/null
+++ b/packages/dev-tools-pages/ts/components/Footer.tsx
@@ -0,0 +1,91 @@
+import * as React from 'react';
+import styled from 'styled-components';
+
+import { Alpha, Beta } from './Typography';
+import { withContext, Props } from './withContext';
+import Container from './Container';
+
+import MainIcon from 'ts/icons/logos/0x.svg';
+import compiler from 'ts/context/compiler';
+import cov from 'ts/context/cov';
+import profiler from 'ts/context/profiler';
+import trace from 'ts/context/trace';
+
+const tools = [trace, cov, compiler, profiler];
+
+function Footer(props: Props) {
+    const { colors } = props;
+
+    return (
+        <StyledFooter background={colors.secondary}>
+            <Container>
+                <Top>
+                    <Alpha>Other tools by 0x</Alpha>
+                    <List>
+                        {tools.map(({ title, subtitle, icon }) => (
+                            <ListItem as="li" key={title}>
+                                <Icon as={icon} />
+                                <div>
+                                    <Beta>{title}</Beta>
+                                    <p>{subtitle}</p>
+                                </div>
+                            </ListItem>
+                        ))}
+                    </List>
+                </Top>
+                <Media as="aside">
+                    <Icon as={MainIcon} />
+                    <Small>
+                        Built by 0x. 0x is an open, permissionless protocol allowing for ERC20 tokens to be traded on
+                        the Ethereum blockchain.
+                    </Small>
+                </Media>
+            </Container>
+        </StyledFooter>
+    );
+}
+
+const StyledFooter = styled.footer`
+    background-color: ${(props: { background: string }) => props.background};
+    padding-top: 6.25rem;
+    padding-bottom: 5.4375rem;
+`;
+
+const Top = styled.div`
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 9.375rem;
+`;
+
+const Media = styled.div`
+    display: flex;
+    align-items: center;
+`;
+
+const Icon = styled.div`
+    margin-right: 1.3125rem;
+`;
+
+const List = styled.ul`
+    display: flex;
+    width: 66.693548387%;
+    flex-wrap: wrap;
+    flex-direction: row;
+    margin: 0;
+    padding: 0;
+`;
+
+const ListItem = styled(Media)`
+    flex-basis: 50%;
+    margin-bottom: 3.3125rem;
+    :nth-last-of-type(-n + 2) {
+        margin-bottom: 0;
+    }
+`;
+
+const Small = styled.small`
+    font-size: 1em;
+    max-width: 37.5rem;
+`;
+
+export default withContext(Footer);
diff --git a/packages/dev-tools-pages/ts/components/Header.tsx b/packages/dev-tools-pages/ts/components/Header.tsx
new file mode 100644
index 000000000..46dce01eb
--- /dev/null
+++ b/packages/dev-tools-pages/ts/components/Header.tsx
@@ -0,0 +1,59 @@
+import * as React from 'react';
+import styled from 'styled-components';
+
+import { withContext, Props } from './withContext';
+import Container from './Container';
+import { Small } from './Typography';
+
+function Header(props: Props) {
+    const { icon, title, colors } = props;
+
+    return (
+        <Container>
+            <StyledHeader>
+                <LogoMark>
+                    <Logo as={icon} color={colors.main} />
+                    <Title>{title}</Title>
+                </LogoMark>
+
+                <Link as="a" href="#">
+                    Built by 0x
+                </Link>
+            </StyledHeader>
+        </Container>
+    );
+}
+
+const StyledHeader = styled.header`
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding-top: 3.75rem;
+    padding-bottom: 0.875rem;
+`;
+
+const LogoMark = styled.div`
+    display: flex;
+    align-items: center;
+`;
+
+const StyledLogo = styled.div`
+    color: ${props => props.color}
+    width: 1.75rem;
+    height: 1.75rem;
+`;
+
+const Title = styled.h1`
+    font-size: 1.5rem;
+    margin: 0;
+    margin-left: 0.8125rem;
+`;
+
+const StyledLink = styled(Small)`
+    color: inherit;
+`;
+
+const Link = StyledLink as any;
+const Logo = StyledLogo as any;
+
+export default withContext(Header);
diff --git a/packages/dev-tools-pages/ts/components/Hero.tsx b/packages/dev-tools-pages/ts/components/Hero.tsx
new file mode 100644
index 000000000..60f859a55
--- /dev/null
+++ b/packages/dev-tools-pages/ts/components/Hero.tsx
@@ -0,0 +1,37 @@
+import * as React from 'react';
+import styled from 'styled-components';
+
+import { withContext, Props } from './withContext';
+import Button from './Button';
+import { Beta } from './Typography';
+
+function Hero(props: Props) {
+    const { subtitle, tagline } = props;
+    return (
+        <StyledHero>
+            <Subtitle>{subtitle}</Subtitle>
+            <Tagline as="p">{tagline}</Tagline>
+            <Button as="a" href="#" large>
+                Read the Docs
+            </Button>
+        </StyledHero>
+    );
+}
+
+const StyledHero = styled.section`
+    margin: 0 auto;
+    text-align: center;
+    max-width: 590px;
+`;
+
+const Subtitle = styled.h2`
+    font-size: 3.75rem;
+    line-height: 1.16;
+    margin-bottom: 1.5rem;
+`;
+
+const Tagline = styled(Beta)`
+    margin-bottom: 2rem;
+`;
+
+export default withContext(Hero);
diff --git a/packages/dev-tools-pages/ts/components/InlineCode.tsx b/packages/dev-tools-pages/ts/components/InlineCode.tsx
new file mode 100644
index 000000000..037cfa675
--- /dev/null
+++ b/packages/dev-tools-pages/ts/components/InlineCode.tsx
@@ -0,0 +1,8 @@
+import styled from 'styled-components';
+
+const InlineCode = styled.code`
+    background-color: #eceff9;
+    padding: 0.1875rem;
+`;
+
+export default InlineCode;
diff --git a/packages/dev-tools-pages/ts/components/List.tsx b/packages/dev-tools-pages/ts/components/List.tsx
new file mode 100644
index 000000000..df1fdc53b
--- /dev/null
+++ b/packages/dev-tools-pages/ts/components/List.tsx
@@ -0,0 +1,33 @@
+import * as React from 'react';
+import styled from 'styled-components';
+
+const StyledList = styled.ul`
+    list-style-type: none;
+    margin: 0;
+    padding-inline-start: 0.2rem;
+`;
+
+const StyledItem = styled.li`
+    :before {
+        content: '';
+        border: 1px solid black;
+        width: 0.6875rem;
+        height: 0.6875rem;
+        display: inline-block;
+        transform: rotate(45deg);
+        margin-right: 1.09375rem;
+    }
+`;
+
+interface ListProps {
+    items: Array<string>;
+}
+
+function List(props: ListProps) {
+    const items = props.items;
+    const listItems = items.map((bullet, index) => <StyledItem key={index}>{bullet}</StyledItem>);
+
+    return <StyledList>{listItems}</StyledList>;
+}
+
+export default List;
diff --git a/packages/dev-tools-pages/ts/components/Main.tsx b/packages/dev-tools-pages/ts/components/Main.tsx
new file mode 100644
index 000000000..8046abc91
--- /dev/null
+++ b/packages/dev-tools-pages/ts/components/Main.tsx
@@ -0,0 +1,33 @@
+import * as React from 'react';
+import styled from 'styled-components';
+
+import { withContext, Props } from './withContext';
+
+import { Alpha } from './Typography';
+
+const StyledMain = styled.div`
+    padding-top: 6.25rem;
+    padding-bottom: 6.25rem;
+`;
+
+const Title = styled(Alpha)`
+    color: ${props => props.color};
+    margin-bottom: 6.25rem;
+`;
+
+interface MainProps extends Props {
+    children: React.ReactNode;
+}
+
+function Main(props: MainProps) {
+    return (
+        <StyledMain>
+            <Title as="h2" color={props.colors.main}>
+                Get started
+            </Title>
+            {props.children}
+        </StyledMain>
+    );
+}
+
+export default withContext(Main);
diff --git a/packages/dev-tools-pages/ts/components/MetaTags.tsx b/packages/dev-tools-pages/ts/components/MetaTags.tsx
new file mode 100644
index 000000000..9bb33f7ab
--- /dev/null
+++ b/packages/dev-tools-pages/ts/components/MetaTags.tsx
@@ -0,0 +1,28 @@
+import * as React from 'react';
+import { Helmet } from 'react-helmet';
+
+import { withContext, Props } from './withContext';
+
+interface MetaTagsProps extends Props {
+    imgSrc?: string;
+}
+
+function MetaTags(props: MetaTagsProps) {
+    const { title, imgSrc = '/images/og_image.png' } = props;
+    const description = props.tagline;
+    return (
+        <Helmet>
+            <title>{props.title}</title>
+            <meta name="description" content={description} />
+            <link rel="shortcut icon" href={`/favicons/${props.name}.ico`} />
+            <meta property="og:title" content={title} />
+            <meta property="og:description" content={description} />
+            <meta property="og:type" content="website" />
+            <meta property="og:image" content={imgSrc} />
+            <meta name="twitter:site" content="@0xproject" />
+            <meta name="twitter:image" content={imgSrc} />
+        </Helmet>
+    );
+}
+
+export default withContext(MetaTags);
diff --git a/packages/dev-tools-pages/ts/components/Tabs.tsx b/packages/dev-tools-pages/ts/components/Tabs.tsx
new file mode 100644
index 000000000..1efbe1f61
--- /dev/null
+++ b/packages/dev-tools-pages/ts/components/Tabs.tsx
@@ -0,0 +1,79 @@
+import * as React from 'react';
+import styled from 'styled-components';
+import { Tabs as ReactTabs, Tab, TabList, TabPanel } from 'react-tabs'
+
+import {withContext, Props} from './withContext';
+
+const StyledTabList = styled(TabList)`
+  text-transform: uppercase;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  overflow: hidden;  
+`;
+
+const StyledTab = styled(Tab)`
+  height: 2.5rem;
+  padding-left: 1rem;
+  padding-right: 1rem;
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  float: left;
+  &:not(:first-of-type) {
+    margin-left: .25rem;
+  }
+  &:focus, &:hover {
+    color: red;
+    outline: 0;
+  }
+`;
+
+const Root = styled.div<{primaryColor: string;}>`
+  ${StyledTab} {
+    background-color: ${props => props.primaryColor};
+  }
+  ${StyledTab}[aria-selected="true"] {
+    background-color: #F1F2F7;
+  } 
+`;
+
+interface TabsProps extends Props {
+  children: React.ReactNode;
+}
+
+function Tabs(props: TabsProps) {
+  return (
+    <Root primaryColor={props.colors.secondary}>
+      <ReactTabs>
+        <StyledTabList>
+          { React.Children.map(props.children, child => {
+            const {props} = React.cloneElement(child as React.ReactElement<any>);
+            return <StyledTab>{props.title}</StyledTab>
+          }) }
+        </StyledTabList>
+
+        { React.Children.map(props.children, child => (
+          <TabPanel>{child}</TabPanel>
+        )) }
+      </ReactTabs>
+    </Root>
+  )
+}
+
+interface TabBlockProps {
+  title: string;
+  children: React.ReactNode;
+}
+
+function TabBlock(props: TabBlockProps) {
+  return (
+    <React.Fragment>
+      {props.children}
+    </React.Fragment>
+  )
+}
+
+const ContextTabs = withContext(Tabs);
+
+export {ContextTabs as Tabs, TabBlock};
\ No newline at end of file
diff --git a/packages/dev-tools-pages/ts/components/Typography.tsx b/packages/dev-tools-pages/ts/components/Typography.tsx
new file mode 100644
index 000000000..3ce18df3b
--- /dev/null
+++ b/packages/dev-tools-pages/ts/components/Typography.tsx
@@ -0,0 +1,17 @@
+import styled from 'styled-components';
+
+const Alpha = styled.h2`
+    font-size: 1.75rem;
+    line-height: 1;
+`;
+
+const Beta = styled.h3`
+    font-size: 1.25rem;
+    line-height: 1.65;
+`;
+
+const Small = styled.p`
+    font-size: 0.875rem;
+`;
+
+export { Alpha, Beta, Small };
diff --git a/packages/dev-tools-pages/ts/components/meta_tags.tsx b/packages/dev-tools-pages/ts/components/meta_tags.tsx
deleted file mode 100644
index f6c43d23f..000000000
--- a/packages/dev-tools-pages/ts/components/meta_tags.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import * as React from 'react';
-import { Helmet } from 'react-helmet';
-
-export interface MetaTagsProps {
-    title: string;
-    description: string;
-    imgSrc?: string;
-}
-
-export const MetaTags: React.StatelessComponent<MetaTagsProps> = ({ title, description, imgSrc }) => (
-    <Helmet>
-        <title>{title}</title>
-        <meta name="description" content={description} />
-        <meta property="og:title" content={title} />
-        <meta property="og:description" content={description} />
-        <meta property="og:type" content="website" />
-        <meta property="og:image" content={imgSrc} />
-        <meta name="twitter:site" content="@0xproject" />
-        <meta name="twitter:image" content={imgSrc} />
-    </Helmet>
-);
-
-MetaTags.defaultProps = {
-    imgSrc: '/images/og_image.png',
-};
diff --git a/packages/dev-tools-pages/ts/components/ui/button.tsx b/packages/dev-tools-pages/ts/components/ui/button.tsx
deleted file mode 100644
index 754eca40e..000000000
--- a/packages/dev-tools-pages/ts/components/ui/button.tsx
+++ /dev/null
@@ -1,59 +0,0 @@
-import { darken, saturate } from 'polished';
-import * as React from 'react';
-import styled from 'styled-components';
-
-/**
- * AN EXAMPLE OF HOW TO CREATE A STYLED COMPONENT USING STYLED-COMPONENTS
- * SEE: https://www.styled-components.com/docs/basics#coming-from-css
- */
-export interface ButtonProps {
-    backgroundColor?: string;
-    borderColor?: string;
-    width?: string;
-    padding?: string;
-    type?: string;
-    isDisabled?: boolean;
-    onClick?: (event: React.MouseEvent<HTMLElement>) => void;
-    className?: string;
-}
-
-const PlainButton: React.StatelessComponent<ButtonProps> = ({ children, isDisabled, onClick, type, className }) => (
-    <button type={type} className={className} onClick={isDisabled ? undefined : onClick} disabled={isDisabled}>
-        {children}
-    </button>
-);
-
-const darkenOnHoverAmount = 0.1;
-const darkenOnActiveAmount = 0.2;
-const saturateOnFocusAmount = 0.2;
-export const Button = styled(PlainButton)`
-    cursor: ${props => (props.isDisabled ? 'default' : 'pointer')};
-    transition: background-color, opacity 0.5s ease;
-    padding: ${props => props.padding};
-    border-radius: 3px;
-    outline: none;
-    width: ${props => props.width};
-    background-color: ${props => (props.backgroundColor ? props.backgroundColor : 'none')};
-    border: ${props => (props.borderColor ? `1px solid ${props.backgroundColor}` : 'none')};
-    &:hover {
-        background-color: ${props =>
-            !props.isDisabled ? darken(darkenOnHoverAmount, props.backgroundColor) : ''} !important;
-    }
-    &:active {
-        background-color: ${props => (!props.isDisabled ? darken(darkenOnActiveAmount, props.backgroundColor) : '')};
-    }
-    &:disabled {
-        opacity: 0.5;
-    }
-    &:focus {
-        background-color: ${props => saturate(saturateOnFocusAmount, props.backgroundColor)};
-    }
-`;
-
-Button.defaultProps = {
-    backgroundColor: 'red',
-    width: 'auto',
-    isDisabled: false,
-    padding: '1em 2.2em',
-};
-Button.displayName = 'Button';
diff --git a/packages/dev-tools-pages/ts/components/ui/container.tsx b/packages/dev-tools-pages/ts/components/ui/container.tsx
deleted file mode 100644
index f2ae68b70..000000000
--- a/packages/dev-tools-pages/ts/components/ui/container.tsx
+++ /dev/null
@@ -1,55 +0,0 @@
-import * as React from 'react';
-
-type StringOrNum = string | number;
-
-export type ContainerTag = 'div' | 'span';
-
-export interface ContainerProps {
-    marginTop?: StringOrNum;
-    marginBottom?: StringOrNum;
-    marginRight?: StringOrNum;
-    marginLeft?: StringOrNum;
-    padding?: StringOrNum;
-    paddingTop?: StringOrNum;
-    paddingBottom?: StringOrNum;
-    paddingRight?: StringOrNum;
-    paddingLeft?: StringOrNum;
-    backgroundColor?: string;
-    borderRadius?: StringOrNum;
-    maxWidth?: StringOrNum;
-    maxHeight?: StringOrNum;
-    width?: StringOrNum;
-    height?: StringOrNum;
-    minWidth?: StringOrNum;
-    minHeight?: StringOrNum;
-    isHidden?: boolean;
-    className?: string;
-    position?: 'absolute' | 'fixed' | 'relative' | 'unset';
-    display?: 'inline-block' | 'block' | 'inline-flex' | 'inline';
-    top?: string;
-    left?: string;
-    right?: string;
-    bottom?: string;
-    zIndex?: number;
-    Tag?: ContainerTag;
-    cursor?: string;
-    id?: string;
-    onClick?: (event: React.MouseEvent<HTMLElement>) => void;
-    overflowX?: 'scroll' | 'hidden' | 'auto' | 'visible';
-}
-
-export const Container: React.StatelessComponent<ContainerProps> = props => {
-    const { children, className, Tag, isHidden, id, onClick, ...style } = props;
-    const visibility = isHidden ? 'hidden' : undefined;
-    return (
-        <Tag id={id} style={{ ...style, visibility }} className={className} onClick={onClick}>
-            {children}
-        </Tag>
-    );
-};
-
-Container.defaultProps = {
-    Tag: 'div',
-};
-
-Container.displayName = 'Container';
diff --git a/packages/dev-tools-pages/ts/components/ui/text.tsx b/packages/dev-tools-pages/ts/components/ui/text.tsx
deleted file mode 100644
index 8e314beae..000000000
--- a/packages/dev-tools-pages/ts/components/ui/text.tsx
+++ /dev/null
@@ -1,74 +0,0 @@
-import { colors } from '@0xproject/react-shared';
-import { darken } from 'polished';
-import * as React from 'react';
-import styled from 'styled-components';
-
-export type TextTag = 'p' | 'div' | 'span' | 'label' | 'h1' | 'h2' | 'h3' | 'h4' | 'i';
-
-export interface TextProps {
-    className?: string;
-    Tag?: TextTag;
-    fontSize?: string;
-    fontFamily?: string;
-    fontStyle?: string;
-    fontColor?: string;
-    lineHeight?: string;
-    minHeight?: string;
-    center?: boolean;
-    fontWeight?: number | string;
-    textDecorationLine?: string;
-    onClick?: (event: React.MouseEvent<HTMLElement>) => void;
-    hoverColor?: string;
-    noWrap?: boolean;
-    display?: string;
-}
-
-const PlainText: React.StatelessComponent<TextProps> = ({ children, className, onClick, Tag }) => (
-    <Tag className={className} onClick={onClick}>
-        {children}
-    </Tag>
-);
-
-export const Text = styled(PlainText)`
-    font-family: ${props => props.fontFamily};
-    font-style: ${props => props.fontStyle};
-    font-weight: ${props => props.fontWeight};
-    font-size: ${props => props.fontSize};
-    text-decoration-line: ${props => props.textDecorationLine};
-    ${props => (props.lineHeight ? `line-height: ${props.lineHeight}` : '')};
-    ${props => (props.center ? 'text-align: center' : '')};
-    color: ${props => props.fontColor};
-    ${props => (props.minHeight ? `min-height: ${props.minHeight}` : '')};
-    ${props => (props.onClick ? 'cursor: pointer' : '')};
-    transition: color 0.5s ease;
-    ${props => (props.noWrap ? 'white-space: nowrap' : '')};
-    ${props => (props.display ? `display: ${props.display}` : '')};
-    &:hover {
-        ${props => (props.onClick ? `color: ${props.hoverColor || darken(0.3, props.fontColor || 'black')}` : '')};
-    }
-`;
-
-Text.defaultProps = {
-    fontFamily: 'Roboto',
-    fontStyle: 'normal',
-    fontWeight: 400,
-    fontColor: colors.black,
-    fontSize: '15px',
-    lineHeight: '1.5em',
-    textDecorationLine: 'none',
-    Tag: 'div',
-    noWrap: false,
-};
-
-Text.displayName = 'Text';
-
-export const Title: React.StatelessComponent<TextProps> = props => <Text {...props} />;
-
-Title.defaultProps = {
-    Tag: 'h2',
-    fontSize: '20px',
-    fontWeight: 600,
-    fontColor: colors.black,
-};
-
-Title.displayName = 'Title';
diff --git a/packages/dev-tools-pages/ts/components/withContext.tsx b/packages/dev-tools-pages/ts/components/withContext.tsx
new file mode 100644
index 000000000..d38c0afe4
--- /dev/null
+++ b/packages/dev-tools-pages/ts/components/withContext.tsx
@@ -0,0 +1,23 @@
+import * as React from 'react';
+
+import ThemeContext from '../context';
+
+interface Props {
+    title?: string;
+    name?: string;
+    subtitle?: string;
+    tagline?: string;
+    icon?: React.ReactNode;
+    colors?: any;
+}
+
+function withContext(WrappedComponent: any) {
+    function ComponentWithContext(props: any) {
+        return <ThemeContext.Consumer>{data => <WrappedComponent {...data} {...props} />}</ThemeContext.Consumer>;
+    }
+
+    return ComponentWithContext;
+}
+
+export default withContext;
+export { withContext, Props };
diff --git a/packages/dev-tools-pages/ts/context/compiler.tsx b/packages/dev-tools-pages/ts/context/compiler.tsx
new file mode 100644
index 000000000..63a051481
--- /dev/null
+++ b/packages/dev-tools-pages/ts/context/compiler.tsx
@@ -0,0 +1,14 @@
+import Icon from 'ts/icons/logos/compiler.svg';
+
+export default {
+    title: 'sol-compiler',
+    name: 'compiler',
+    subtitle: 'Solidity compilation that just works',
+    tagline: 'Seamlessly compile an entire solidity project and generate customisable artifacts',
+    icon: Icon,
+    colors: {
+        main: '#1EADCD',
+        secondary: '#D1F4FC',
+        link: '#D1F4FC',
+    },
+};
diff --git a/packages/dev-tools-pages/ts/context/cov.tsx b/packages/dev-tools-pages/ts/context/cov.tsx
new file mode 100644
index 000000000..4bf2b6ba7
--- /dev/null
+++ b/packages/dev-tools-pages/ts/context/cov.tsx
@@ -0,0 +1,14 @@
+import Icon from 'ts/icons/logos/cov.svg';
+
+export default {
+    title: 'sol-cov',
+    name: 'cov',
+    subtitle: 'Solidity code coverage',
+    tagline: "Don't get caught with your pants down",
+    icon: Icon,
+    colors: {
+        main: '#BB9200',
+        secondary: '#F1DB8D',
+        link: '#D7AE1B',
+    },
+};
diff --git a/packages/dev-tools-pages/ts/context/index.tsx b/packages/dev-tools-pages/ts/context/index.tsx
new file mode 100644
index 000000000..54556a3fd
--- /dev/null
+++ b/packages/dev-tools-pages/ts/context/index.tsx
@@ -0,0 +1,5 @@
+import { createContext } from 'react';
+
+const ThemeContext = createContext({});
+
+export default ThemeContext;
diff --git a/packages/dev-tools-pages/ts/context/profiler.tsx b/packages/dev-tools-pages/ts/context/profiler.tsx
new file mode 100644
index 000000000..d8982c56f
--- /dev/null
+++ b/packages/dev-tools-pages/ts/context/profiler.tsx
@@ -0,0 +1,14 @@
+import Icon from 'ts/icons/logos/profiler.svg';
+
+export default {
+    title: 'sol-profiler',
+    name: 'profiler',
+    subtitle: 'Gas profiling for Solidity',
+    tagline: "Implement data-guided optimizations by profiling your contrat's gas usage",
+    icon: Icon,
+    colors: {
+        main: '#FF7144',
+        secondary: '#FED7CB',
+        link: '#EB8666',
+    },
+};
diff --git a/packages/dev-tools-pages/ts/context/trace.tsx b/packages/dev-tools-pages/ts/context/trace.tsx
new file mode 100644
index 000000000..22289091d
--- /dev/null
+++ b/packages/dev-tools-pages/ts/context/trace.tsx
@@ -0,0 +1,14 @@
+import Icon from 'ts/icons/logos/trace.svg';
+
+export default {
+    title: 'sol-trace',
+    name: 'trace',
+    subtitle: 'Human-readable stack traces',
+    tagline: 'Immediately locate Solidity errors and rapidly debug failed transactions',
+    icon: Icon,
+    colors: {
+        main: '#5C80FF',
+        secondary: '#CDD8FF',
+        link: '#557AFF',
+    },
+};
diff --git a/packages/dev-tools-pages/ts/globalStyles.tsx b/packages/dev-tools-pages/ts/globalStyles.tsx
new file mode 100644
index 000000000..1a2a1769a
--- /dev/null
+++ b/packages/dev-tools-pages/ts/globalStyles.tsx
@@ -0,0 +1,76 @@
+import { createGlobalStyle } from 'styled-components';
+import styledNormalize from 'styled-normalize';
+import hljsStyles from 'highlight.js/styles/github-gist.css';
+
+import { withContext } from 'ts/components/withContext';
+
+const BaseStyles = createGlobalStyle`
+  ${styledNormalize}
+  ${hljsStyles}
+
+  @font-face {
+    font-family: "Maison Neue";
+    src: url("/fonts/MaisonNeue-Book-subset.woff") format("woff");
+    font-weight: 300;
+    font-display: swap;
+    unicode-range: U+20-7E;
+  }
+  @font-face {
+    font-family: "Maison Neue";
+    src: url("/fonts/MaisonNeue-Bold-subset.woff") format("woff");
+    font-weight: 500;
+    font-display: swap;
+    unicode-range: U+20-7E;
+  }
+  @font-face {
+    font-family: "Maison Neue Mono";
+    src: url("/fonts/MaisonNeue-Mono-subset.woff") format("woff");
+    font-weight: 300;
+    font-display: optional;
+    unicode-range: U+20-7E;
+  }
+
+  html {
+    font-size: 100%;
+    box-sizing: border-box;
+  }
+  
+  *, *::before, *::after {
+    box-sizing: inherit;
+  }
+  
+  body {
+    font-family: "Maison Neue", system-ui, sans-serif;
+    font-weight: 300;
+    font-size: 1rem;
+    line-height: 1.8;
+  }
+
+  a {
+  color: ${(props: any) => props.colors.link};
+    text-decoration: none; 
+
+    &:hover {
+      color: red; //what should this be?
+    }
+  }
+  
+  h1, h2, h3, h4 {
+    font-weight: 500;
+    margin: 0;
+  }
+
+  p {
+    margin-top: 0;
+    margin-bottom: 1em;
+    &:not([class]):last-of-type {
+      margin-bottom: 0;
+    }
+  }
+
+  code {
+    font-family: "Maison Neue Mono", monospace;
+  }
+`;
+
+export default withContext(BaseStyles);
diff --git a/packages/dev-tools-pages/ts/globals.d.ts b/packages/dev-tools-pages/ts/globals.d.ts
index d0890161c..da026a198 100644
--- a/packages/dev-tools-pages/ts/globals.d.ts
+++ b/packages/dev-tools-pages/ts/globals.d.ts
@@ -7,3 +7,13 @@ declare module '*.json' {
     export default json;
     /* tslint:enable */
 }
+
+declare module '*.css' {
+    const css: any;
+    export default css;
+}
+
+declare module '*.svg' {
+    const svg: any;
+    export default svg;
+}
diff --git a/packages/dev-tools-pages/ts/icons/logos/0x.svg b/packages/dev-tools-pages/ts/icons/logos/0x.svg
new file mode 100644
index 000000000..1856389db
--- /dev/null
+++ b/packages/dev-tools-pages/ts/icons/logos/0x.svg
@@ -0,0 +1 @@
+<svg width="37" height="37" viewBox="0 0 37 37" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M9.20465 34.4904c2.38415 1.3926 5.13725 2.2736 8.08905 2.4725 4.0871.2558 7.9188-.8242 11.1261-2.8704 1.5894-1.0232 3.0085-2.2737 4.229-3.7231-.9934-1.3926-2.0719-2.842-3.2072-4.3199-.3123-.3979-.6245-.7958-.9367-1.1937-1.1921 1.9042-2.9518 3.4389-4.9953 4.4052l-3.1789-3.0978-11.12605 8.3272zM2.44955 9.30988C1.08718 11.6972.235696 14.3971.0370167 17.3244-.218428 21.417.860116 25.2821 2.90368 28.4652c1.02177 1.5916 2.27062 3.0126 3.71814 4.2347 1.39075-.9947 2.83827-2.0747 4.31418-3.2115.3974-.3127.7947-.6253 1.1921-.9379-1.9017-1.2221-3.43434-2.9841-4.39936-5.0304l3.12206-3.1831L2.44955 9.30988zM27.7954 2.51741C25.4112 1.12481 22.6581.243776 19.7063.0448336 15.6192-.23937 11.7591.840605 8.55184 2.91529 6.96241 3.93843 5.54327 5.18893 4.32281 6.63837c.9934 1.3926 2.07194 2.84204 3.20725 4.31993.31221.3979.62442.7957.93663 1.1936 1.22046-1.9041 2.95181-3.43884 5.02371-4.40514l2.9802 2.87044 11.3248-8.09979zM34.5788 27.6126c1.334-2.3589 2.1855-5.0304 2.3842-7.9293.2554-4.0925-.8231-7.9293-2.8667-11.14077-1.0218-1.59154-2.2706-3.01256-3.7181-4.23464-1.3908.99472-2.8383 2.07469-4.3142 3.21151-.3974.31262-.7947.62525-1.1921.93787 1.9301 1.22208 3.4627 2.98413 4.4277 5.03043l.0284.0568-3.0085 3.1263 8.2593 10.9418z"/></svg>
\ No newline at end of file
diff --git a/packages/dev-tools-pages/ts/icons/logos/compiler.svg b/packages/dev-tools-pages/ts/icons/logos/compiler.svg
new file mode 100644
index 000000000..43c338f29
--- /dev/null
+++ b/packages/dev-tools-pages/ts/icons/logos/compiler.svg
@@ -0,0 +1,3 @@
+<svg width="28" height="28" viewBox="0 0 28 28" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0 28V15V0H15H28V15V28H15H0ZM26 13V2H15V13H26ZM15 15H26V26H15V15ZM13 13V2H2V13H13ZM2 15H13V26H2V15Z" />
+</svg>
diff --git a/packages/dev-tools-pages/ts/icons/logos/cov.svg b/packages/dev-tools-pages/ts/icons/logos/cov.svg
new file mode 100644
index 000000000..2c4dffb83
--- /dev/null
+++ b/packages/dev-tools-pages/ts/icons/logos/cov.svg
@@ -0,0 +1,3 @@
+<svg width="28" height="28" viewBox="0 0 28 28" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0 0H28V28H0V0ZM2 2V26H26V16H12V2H2ZM14 2V14H26V2H14Z"/>
+</svg>
diff --git a/packages/dev-tools-pages/ts/icons/logos/profiler.svg b/packages/dev-tools-pages/ts/icons/logos/profiler.svg
new file mode 100644
index 000000000..c3ea61294
--- /dev/null
+++ b/packages/dev-tools-pages/ts/icons/logos/profiler.svg
@@ -0,0 +1,3 @@
+<svg width="28" height="28" viewBox="0 0 28 28" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2 2H26V9H2V2ZM2 11V26H26V11H2ZM0 0H2H26H28V2V26V28H26H2H0V26V2V0Z" />
+</svg>
diff --git a/packages/dev-tools-pages/ts/icons/logos/trace.svg b/packages/dev-tools-pages/ts/icons/logos/trace.svg
new file mode 100644
index 000000000..c207b24cb
--- /dev/null
+++ b/packages/dev-tools-pages/ts/icons/logos/trace.svg
@@ -0,0 +1 @@
+<svg width="28" height="28" viewBox="0 0 28 28" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M10 15H2V2h24v13H10zm0 2H2v9h8v-9zm2 9h14v-9H12v9zm-2 2H0V0h28v28H10z"/></svg>
\ No newline at end of file
diff --git a/packages/dev-tools-pages/ts/index.tsx b/packages/dev-tools-pages/ts/index.tsx
index 4591c6d76..b185e270a 100644
--- a/packages/dev-tools-pages/ts/index.tsx
+++ b/packages/dev-tools-pages/ts/index.tsx
@@ -1,17 +1,37 @@
 import * as React from 'react';
 import { render } from 'react-dom';
-import { MetaTags } from 'ts/components/meta_tags';
-import { Landing } from 'ts/pages/landing';
+import { Router, Link } from '@reach/router';
 
-import 'basscss/css/basscss.css';
+import Trace from 'ts/pages/Trace';
+import Compiler from 'ts/pages/Compiler';
+import Cov from 'ts/pages/Cov';
+import Profiler from 'ts/pages/Profiler';
 
-const DOCUMENT_TITLE = '';
-const DOCUMENT_DESCRIPTION = '';
+const Index = (props: any) => (
+    <ul>
+        <li>
+            <Link to="/trace">sol-trace</Link>
+        </li>
+        <li>
+            <Link to="/compiler">sol-compiler</Link>
+        </li>
+        <li>
+            <Link to="/cov">sol-cov</Link>
+        </li>
+        <li>
+            <Link to="/profiler">sol-profiler</Link>
+        </li>
+    </ul>
+);
 
-render(
-    <div>
-        <MetaTags title={DOCUMENT_TITLE} description={DOCUMENT_DESCRIPTION} />
-        <Landing />
-    </div>,
-    document.getElementById('app'),
+const App = () => (
+    <Router>
+        <Trace path="/trace" />
+        <Compiler path="/compiler" />
+        <Cov path="/cov" />
+        <Profiler path="/profiler" />
+        <Index default />
+    </Router>
 );
+
+render(<App />, document.getElementById('app'));
diff --git a/packages/dev-tools-pages/ts/pages/Base.tsx b/packages/dev-tools-pages/ts/pages/Base.tsx
new file mode 100644
index 000000000..7bb578611
--- /dev/null
+++ b/packages/dev-tools-pages/ts/pages/Base.tsx
@@ -0,0 +1,28 @@
+import * as React from 'react';
+
+import ThemeContext from 'ts/context';
+import GlobalStyles from 'ts/globalStyles';
+import MetaTags from 'ts/components/MetaTags';
+import Header from 'ts/components/Header';
+import Hero from 'ts/components/Hero';
+import Footer from 'ts/components/Footer';
+
+interface BaseProps {
+    context: any;
+    children: React.ReactNode;
+}
+
+function Base(props: BaseProps) {
+    return (
+        <ThemeContext.Provider value={props.context}>
+            <MetaTags />
+            <GlobalStyles />
+            <Header />
+            <Hero />
+            {props.children}
+            <Footer />
+        </ThemeContext.Provider>
+    );
+}
+
+export default Base;
diff --git a/packages/dev-tools-pages/ts/pages/Compiler.tsx b/packages/dev-tools-pages/ts/pages/Compiler.tsx
new file mode 100644
index 000000000..2a91c465f
--- /dev/null
+++ b/packages/dev-tools-pages/ts/pages/Compiler.tsx
@@ -0,0 +1,53 @@
+import * as React from 'react';
+
+import context from 'ts/context/compiler';
+import Base from './Base';
+import Container from 'ts/components/Container';
+import Main from 'ts/components/Main';
+import ContentBlock from 'ts/components/ContentBlock';
+import { Tabs, TabBlock } from 'ts/components/Tabs';
+import Code from 'ts/components/Code';
+import InlineCode from 'ts/components/InlineCode';
+import List from 'ts/components/List';
+
+function Compiler(props: any) {
+    return (
+        <Base context={context}>
+            <Container>
+                <Main>
+                    <ContentBlock title="Required steps">
+                        <List items={['Step 1', 'Step 2']} />
+                    </ContentBlock>
+                    <ContentBlock title="Prerequisites">
+                        <Code>npm install @0x/sol-trace --save</Code>
+                        <p>
+                            Sol-trace is a subprovider that needs to be prepended to your{' '}
+                            <a href="#">provider engine</a>. Depending on your project setup, you will need to use a
+                            specific ArtifactAdapter. Sol-trace ships with the{' '}
+                            <InlineCode>SolCompilerArtifactAdapter</InlineCode> for use with Sol-compiler and{' '}
+                            <InlineCode>TruffleArtifactAdapter</InlineCode> for use with the Truffle framework. You can
+                            also write your own and support any artifact format.
+                        </p>
+                    </ContentBlock>
+
+                    <ContentBlock title="Installation">
+                        <Tabs>
+                            <TabBlock title="Sol-compiler">
+                                <Code language="js">
+                                    {`import { SolCompilerArtifactAdapter } from '@0x/sol-trace';
+
+// Both artifactsDir and contractsDir are optional and will be fetched from compiler.json if not passed in
+const artifactAdapter = new SolCompilerArtifactAdapter(artifactsDir, contractsDir);`}
+                                </Code>
+                            </TabBlock>
+                            <TabBlock title="Truffle">Truffle</TabBlock>
+                            <TabBlock title="Custom">Custom</TabBlock>
+                        </Tabs>
+                    </ContentBlock>
+                </Main>
+            </Container>
+        </Base>
+    );
+}
+
+export default Compiler;
diff --git a/packages/dev-tools-pages/ts/pages/Cov.tsx b/packages/dev-tools-pages/ts/pages/Cov.tsx
new file mode 100644
index 000000000..a0acfb869
--- /dev/null
+++ b/packages/dev-tools-pages/ts/pages/Cov.tsx
@@ -0,0 +1,53 @@
+import * as React from 'react';
+
+import context from 'ts/context/cov';
+import Base from './Base';
+import Container from 'ts/components/Container';
+import Main from 'ts/components/Main';
+import ContentBlock from 'ts/components/ContentBlock';
+import { Tabs, TabBlock } from 'ts/components/Tabs';
+import Code from 'ts/components/Code';
+import InlineCode from 'ts/components/InlineCode';
+import List from 'ts/components/List';
+
+function Cov(props: any) {
+    return (
+        <Base context={context}>
+            <Container>
+                <Main>
+                    <ContentBlock title="Required steps">
+                        <List items={['Step 1', 'Step 2']} />
+                    </ContentBlock>
+                    <ContentBlock title="Prerequisites">
+                        <Code>npm install @0x/sol-trace --save</Code>
+                        <p>
+                            Sol-trace is a subprovider that needs to be prepended to your{' '}
+                            <a href="#">provider engine</a>. Depending on your project setup, you will need to use a
+                            specific ArtifactAdapter. Sol-trace ships with the{' '}
+                            <InlineCode>SolCompilerArtifactAdapter</InlineCode> for use with Sol-compiler and{' '}
+                            <InlineCode>TruffleArtifactAdapter</InlineCode> for use with the Truffle framework. You can
+                            also write your own and support any artifact format.
+                        </p>
+                    </ContentBlock>
+
+                    <ContentBlock title="Installation">
+                        <Tabs>
+                            <TabBlock title="Sol-compiler">
+                                <Code language="js">
+                                    {`import { SolCompilerArtifactAdapter } from '@0x/sol-trace';
+
+// Both artifactsDir and contractsDir are optional and will be fetched from compiler.json if not passed in
+const artifactAdapter = new SolCompilerArtifactAdapter(artifactsDir, contractsDir);`}
+                                </Code>
+                            </TabBlock>
+                            <TabBlock title="Truffle">Truffle</TabBlock>
+                            <TabBlock title="Custom">Custom</TabBlock>
+                        </Tabs>
+                    </ContentBlock>
+                </Main>
+            </Container>
+        </Base>
+    );
+}
+
+export default Cov;
diff --git a/packages/dev-tools-pages/ts/pages/Profiler.tsx b/packages/dev-tools-pages/ts/pages/Profiler.tsx
new file mode 100644
index 000000000..ad2219c5e
--- /dev/null
+++ b/packages/dev-tools-pages/ts/pages/Profiler.tsx
@@ -0,0 +1,53 @@
+import * as React from 'react';
+
+import context from 'ts/context/profiler';
+import Base from './Base';
+import Container from 'ts/components/Container';
+import Main from 'ts/components/Main';
+import ContentBlock from 'ts/components/ContentBlock';
+import { Tabs, TabBlock } from 'ts/components/Tabs';
+import Code from 'ts/components/Code';
+import InlineCode from 'ts/components/InlineCode';
+import List from 'ts/components/List';
+
+function Profiler(props: any) {
+    return (
+        <Base context={context}>
+            <Container>
+                <Main>
+                    <ContentBlock title="Required steps">
+                        <List items={['Step 1', 'Step 2']} />
+                    </ContentBlock>
+                    <ContentBlock title="Prerequisites">
+                        <Code>npm install @0x/sol-trace --save</Code>
+                        <p>
+                            Sol-trace is a subprovider that needs to be prepended to your{' '}
+                            <a href="#">provider engine</a>. Depending on your project setup, you will need to use a
+                            specific ArtifactAdapter. Sol-trace ships with the{' '}
+                            <InlineCode>SolCompilerArtifactAdapter</InlineCode> for use with Sol-compiler and{' '}
+                            <InlineCode>TruffleArtifactAdapter</InlineCode> for use with the Truffle framework. You can
+                            also write your own and support any artifact format.
+                        </p>
+                    </ContentBlock>
+
+                    <ContentBlock title="Installation">
+                        <Tabs>
+                            <TabBlock title="Sol-compiler">
+                                <Code language="js">
+                                    {`import { SolCompilerArtifactAdapter } from '@0x/sol-trace';
+
+// Both artifactsDir and contractsDir are optional and will be fetched from compiler.json if not passed in
+const artifactAdapter = new SolCompilerArtifactAdapter(artifactsDir, contractsDir);`}
+                                </Code>
+                            </TabBlock>
+                            <TabBlock title="Truffle">Truffle</TabBlock>
+                            <TabBlock title="Custom">Custom</TabBlock>
+                        </Tabs>
+                    </ContentBlock>
+                </Main>
+            </Container>
+        </Base>
+    );
+}
+
+export default Profiler;
diff --git a/packages/dev-tools-pages/ts/pages/Trace.tsx b/packages/dev-tools-pages/ts/pages/Trace.tsx
new file mode 100644
index 000000000..797ec6f49
--- /dev/null
+++ b/packages/dev-tools-pages/ts/pages/Trace.tsx
@@ -0,0 +1,53 @@
+import * as React from 'react';
+
+import context from 'ts/context/trace';
+import Base from './Base';
+import Container from 'ts/components/Container';
+import Main from 'ts/components/Main';
+import ContentBlock from 'ts/components/ContentBlock';
+import { Tabs, TabBlock } from 'ts/components/Tabs';
+import Code from 'ts/components/Code';
+import InlineCode from 'ts/components/InlineCode';
+import List from 'ts/components/List';
+
+function Trace(props: any) {
+    return (
+        <Base context={context}>
+            <Container>
+                <Main>
+                    <ContentBlock title="Required steps">
+                        <List items={['Step 1', 'Step 2']} />
+                    </ContentBlock>
+                    <ContentBlock title="Prerequisites">
+                        <Code>npm install @0x/sol-trace --save</Code>
+                        <p>
+                            Sol-trace is a subprovider that needs to be prepended to your{' '}
+                            <a href="#">provider engine</a>. Depending on your project setup, you will need to use a
+                            specific ArtifactAdapter. Sol-trace ships with the{' '}
+                            <InlineCode>SolCompilerArtifactAdapter</InlineCode> for use with Sol-compiler and{' '}
+                            <InlineCode>TruffleArtifactAdapter</InlineCode> for use with the Truffle framework. You can
+                            also write your own and support any artifact format.
+                        </p>
+                    </ContentBlock>
+
+                    <ContentBlock title="Installation">
+                        <Tabs>
+                            <TabBlock title="Sol-compiler">
+                                <Code language="js">
+                                    {`import { SolCompilerArtifactAdapter } from '@0x/sol-trace';
+
+// Both artifactsDir and contractsDir are optional and will be fetched from compiler.json if not passed in
+const artifactAdapter = new SolCompilerArtifactAdapter(artifactsDir, contractsDir);`}
+                                </Code>
+                            </TabBlock>
+                            <TabBlock title="Truffle">Truffle</TabBlock>
+                            <TabBlock title="Custom">Custom</TabBlock>
+                        </Tabs>
+                    </ContentBlock>
+                </Main>
+            </Container>
+        </Base>
+    );
+}
+
+export default Trace;
diff --git a/packages/dev-tools-pages/ts/pages/landing.tsx b/packages/dev-tools-pages/ts/pages/landing.tsx
deleted file mode 100644
index a70a9de46..000000000
--- a/packages/dev-tools-pages/ts/pages/landing.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import * as _ from 'lodash';
-import * as React from 'react';
-
-import { Button } from '../components/ui/button';
-import { Container } from '../components/ui/container';
-import { Text } from '../components/ui/text';
-
-interface LandingProps {}
-
-interface LandingState {}
-
-export class Landing extends React.Component<LandingProps, LandingState> {
-    constructor(props: LandingProps) {
-        super(props);
-    }
-    public render(): React.ReactNode {
-        return (
-            <Container id="landing" className="clearfix">
-                <Container className="mx-auto p4" width="200px">
-                    <Button>
-                        <Text fontColor="white">Click me!</Text>
-                    </Button>
-                </Container>
-            </Container>
-        );
-    }
-}
diff --git a/packages/dev-tools-pages/ts/utils/utils.ts b/packages/dev-tools-pages/ts/utils/utils.ts
deleted file mode 100644
index b274706a2..000000000
--- a/packages/dev-tools-pages/ts/utils/utils.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-import * as bowser from 'bowser';
-import * as _ from 'lodash';
-
-export const utils = {
-    getColSize(items: number): number {
-        const bassCssGridSize = 12; // Source: http://basscss.com/#basscss-grid
-        const colSize = bassCssGridSize / items;
-        if (!_.isInteger(colSize)) {
-            throw new Error(`Number of cols must be divisible by ${bassCssGridSize}`);
-        }
-        return colSize;
-    },
-    getCurrentBaseUrl(): string {
-        const port = window.location.port;
-        const hasPort = !_.isUndefined(port);
-        const baseUrl = `https://${window.location.hostname}${hasPort ? `:${port}` : ''}`;
-        return baseUrl;
-    },
-    onPageLoadPromise: new Promise<void>((resolve, _reject) => {
-        if (document.readyState === 'complete') {
-            resolve();
-            return;
-        }
-        window.onload = () => resolve();
-    }),
-    openUrl(url: string): void {
-        window.open(url, '_blank');
-    },
-    isMobileOperatingSystem(): boolean {
-        return bowser.mobile;
-    },
-};
-- 
cgit v1.2.3


From c57c9752a248a2abb3a73e474ee63b1039f9a9c7 Mon Sep 17 00:00:00 2001
From: August Skare <post@augustskare.no>
Date: Thu, 18 Oct 2018 13:58:07 +0200
Subject: intro component in profiler view

---
 packages/dev-tools-pages/ts/components/Intro.tsx | 47 ++++++++++++++++++++++++
 packages/dev-tools-pages/ts/pages/Profiler.tsx   |  8 ++++
 2 files changed, 55 insertions(+)
 create mode 100644 packages/dev-tools-pages/ts/components/Intro.tsx

(limited to 'packages/dev-tools-pages/ts')

diff --git a/packages/dev-tools-pages/ts/components/Intro.tsx b/packages/dev-tools-pages/ts/components/Intro.tsx
new file mode 100644
index 000000000..c16c888b7
--- /dev/null
+++ b/packages/dev-tools-pages/ts/components/Intro.tsx
@@ -0,0 +1,47 @@
+import * as React from 'react';
+import styled from 'styled-components';
+
+import { Alpha, Beta } from './Typography';
+
+const Main = styled.div`
+    background-color: #f1f4f5;
+    padding: 6.25rem;
+    display: flex;
+    justify-content: space-between;
+`;
+
+const Title = styled(Alpha)`
+    margin-bottom: 2.5rem;
+`;
+
+const Content = styled.div`
+    max-width: 25.9375rem;
+
+    display: flex;
+    flex-direction: column;
+`;
+
+const Code = styled.div`
+    background-color: #e9eced;
+    width: 520px;
+    height: 350px;
+`;
+
+interface IntroProps {
+    title: string;
+    children: React.ReactNode;
+}
+
+function Intro(props: IntroProps) {
+    return (
+        <Main>
+            <Content>
+                <Title>{props.title}</Title>
+                <Beta as="div">{props.children}</Beta>
+            </Content>
+            <Code />
+        </Main>
+    );
+}
+
+export default Intro;
diff --git a/packages/dev-tools-pages/ts/pages/Profiler.tsx b/packages/dev-tools-pages/ts/pages/Profiler.tsx
index ad2219c5e..d129d6427 100644
--- a/packages/dev-tools-pages/ts/pages/Profiler.tsx
+++ b/packages/dev-tools-pages/ts/pages/Profiler.tsx
@@ -9,11 +9,19 @@ import { Tabs, TabBlock } from 'ts/components/Tabs';
 import Code from 'ts/components/Code';
 import InlineCode from 'ts/components/InlineCode';
 import List from 'ts/components/List';
+import Intro from 'ts/components/Intro';
 
 function Profiler(props: any) {
     return (
         <Base context={context}>
             <Container>
+                <Intro title="ra">
+                    <p>
+                        Sol-profiler gathers line-by-line gas usage for any transaction submitted through your provider.
+                        This will help you find unexpected inefficiencies in parts of your smart contract, and take a
+                        data-driven approach to optimizing it.
+                    </p>
+                </Intro>
                 <Main>
                     <ContentBlock title="Required steps">
                         <List items={['Step 1', 'Step 2']} />
-- 
cgit v1.2.3


From afa52e280c7e36b625e95b949f1f12933a5ab9dc Mon Sep 17 00:00:00 2001
From: August Skare <post@augustskare.no>
Date: Thu, 18 Oct 2018 13:59:16 +0200
Subject: intro component on cov view

---
 packages/dev-tools-pages/ts/pages/Cov.tsx | 8 ++++++++
 1 file changed, 8 insertions(+)

(limited to 'packages/dev-tools-pages/ts')

diff --git a/packages/dev-tools-pages/ts/pages/Cov.tsx b/packages/dev-tools-pages/ts/pages/Cov.tsx
index a0acfb869..b7405f8f9 100644
--- a/packages/dev-tools-pages/ts/pages/Cov.tsx
+++ b/packages/dev-tools-pages/ts/pages/Cov.tsx
@@ -9,11 +9,19 @@ import { Tabs, TabBlock } from 'ts/components/Tabs';
 import Code from 'ts/components/Code';
 import InlineCode from 'ts/components/InlineCode';
 import List from 'ts/components/List';
+import Intro from 'ts/components/Intro';
 
 function Cov(props: any) {
     return (
         <Base context={context}>
             <Container>
+                <Intro title="Measure your tests">
+                    <p>
+                        When it comes to writing smart contracts, testing is one of the most important steps of the
+                        process. In order to quantify the robustness of your Solidity testing suite, you need to measure
+                        its code coverage.
+                    </p>
+                </Intro>
                 <Main>
                     <ContentBlock title="Required steps">
                         <List items={['Step 1', 'Step 2']} />
-- 
cgit v1.2.3


From ac60d459696b8a68caf65a345626f47c632fb2d0 Mon Sep 17 00:00:00 2001
From: August Skare <post@augustskare.no>
Date: Thu, 18 Oct 2018 14:08:46 +0200
Subject: compiler component in compiler view

---
 .../dev-tools-pages/ts/components/Compiler.tsx     | 76 ++++++++++++++++++++++
 packages/dev-tools-pages/ts/pages/Compiler.tsx     |  2 +
 2 files changed, 78 insertions(+)
 create mode 100644 packages/dev-tools-pages/ts/components/Compiler.tsx

(limited to 'packages/dev-tools-pages/ts')

diff --git a/packages/dev-tools-pages/ts/components/Compiler.tsx b/packages/dev-tools-pages/ts/components/Compiler.tsx
new file mode 100644
index 000000000..6dcfda70c
--- /dev/null
+++ b/packages/dev-tools-pages/ts/components/Compiler.tsx
@@ -0,0 +1,76 @@
+import * as React from 'react';
+import styled from 'styled-components';
+
+import InlineCode from './InlineCode';
+
+const Cards = styled.dl`
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(25rem, 1fr));
+    align-items: start;
+    grid-gap: 1.25rem;
+    margin-top: 0;
+    margin-bottom: 0;
+`;
+
+const Card = styled.div`
+    background-color: #f1f4f5;
+    padding: 3.125rem;
+    padding-bottom: 2.5rem;
+`;
+
+const Dt = styled.dt`
+    font-weight: 500;
+    display: inline;
+    ::after {
+        content: '. ';
+    }
+`;
+
+const Dd = styled.dd`
+    display: inline;
+    margin-left: 0;
+`;
+
+const cards = [
+    {
+        title: 'Project-centric',
+        body: (
+            <React.Fragment>
+                It can compile an entire project instead of only individual <InlineCode>.sol</InlineCode> files
+            </React.Fragment>
+        ),
+    },
+    {
+        title: 'Incremental builds',
+        body: 'It only recompiles your smart contracts after they have changed.',
+    },
+    {
+        title: 'Customizable artifacts',
+        body:
+            'It allows you to store only the required compiler output in your artifacts and have complete control over your bundle size.',
+    },
+    {
+        title: 'Seamless',
+        body: 'It auto-fetches and caches the required compiler binaries.',
+    },
+    {
+        title: 'Versioning',
+        body:
+            'It compiles each contract with the version specified at the top of its file (it even supports version ranges!).',
+    },
+];
+
+function Compiler() {
+    return (
+        <Cards>
+            {cards.map(card => (
+                <Card key={card.title.split(' ').join('-')}>
+                    <Dt>{card.title}</Dt>
+                    <Dd>{card.body}</Dd>
+                </Card>
+            ))}
+        </Cards>
+    );
+}
+
+export default Compiler;
diff --git a/packages/dev-tools-pages/ts/pages/Compiler.tsx b/packages/dev-tools-pages/ts/pages/Compiler.tsx
index 2a91c465f..79c9f52e4 100644
--- a/packages/dev-tools-pages/ts/pages/Compiler.tsx
+++ b/packages/dev-tools-pages/ts/pages/Compiler.tsx
@@ -9,11 +9,13 @@ import { Tabs, TabBlock } from 'ts/components/Tabs';
 import Code from 'ts/components/Code';
 import InlineCode from 'ts/components/InlineCode';
 import List from 'ts/components/List';
+import CompilerComponent from 'ts/components/Compiler';
 
 function Compiler(props: any) {
     return (
         <Base context={context}>
             <Container>
+                <CompilerComponent />
                 <Main>
                     <ContentBlock title="Required steps">
                         <List items={['Step 1', 'Step 2']} />
-- 
cgit v1.2.3


From 97646571a1bf4514edb52a7bc14bb157dfa3025c Mon Sep 17 00:00:00 2001
From: August Skare <post@augustskare.no>
Date: Thu, 18 Oct 2018 14:09:02 +0200
Subject: tweaking header and hero position and sizing

---
 packages/dev-tools-pages/ts/components/Header.tsx | 20 +++++++++++++-------
 packages/dev-tools-pages/ts/components/Hero.tsx   |  7 ++++++-
 2 files changed, 19 insertions(+), 8 deletions(-)

(limited to 'packages/dev-tools-pages/ts')

diff --git a/packages/dev-tools-pages/ts/components/Header.tsx b/packages/dev-tools-pages/ts/components/Header.tsx
index 46dce01eb..dca562421 100644
--- a/packages/dev-tools-pages/ts/components/Header.tsx
+++ b/packages/dev-tools-pages/ts/components/Header.tsx
@@ -9,8 +9,8 @@ function Header(props: Props) {
     const { icon, title, colors } = props;
 
     return (
-        <Container>
-            <StyledHeader>
+        <StyledHeader>
+            <Container>
                 <LogoMark>
                     <Logo as={icon} color={colors.main} />
                     <Title>{title}</Title>
@@ -19,17 +19,23 @@ function Header(props: Props) {
                 <Link as="a" href="#">
                     Built by 0x
                 </Link>
-            </StyledHeader>
-        </Container>
+            </Container>
+        </StyledHeader>
     );
 }
 
 const StyledHeader = styled.header`
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
     padding-top: 3.75rem;
     padding-bottom: 0.875rem;
+    width: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+    ${Container} {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+    }
 `;
 
 const LogoMark = styled.div`
diff --git a/packages/dev-tools-pages/ts/components/Hero.tsx b/packages/dev-tools-pages/ts/components/Hero.tsx
index 60f859a55..5ba469fca 100644
--- a/packages/dev-tools-pages/ts/components/Hero.tsx
+++ b/packages/dev-tools-pages/ts/components/Hero.tsx
@@ -19,9 +19,14 @@ function Hero(props: Props) {
 }
 
 const StyledHero = styled.section`
-    margin: 0 auto;
     text-align: center;
+    margin: 0 auto;
+    padding-top: 9.375rem;
+    padding-bottom: 2rem;
     max-width: 590px;
+    min-height: min-content;
+    max-height: 37.5rem;
+    height: 80vh;
 `;
 
 const Subtitle = styled.h2`
-- 
cgit v1.2.3


From 30f7f83573c9254de336c3c2fc7297188d47af15 Mon Sep 17 00:00:00 2001
From: August Skare <post@augustskare.no>
Date: Thu, 18 Oct 2018 15:25:08 +0200
Subject: added trace component to trace view

---
 packages/dev-tools-pages/ts/components/Trace.tsx   | 150 +++++++++++++++++++++
 .../dev-tools-pages/ts/components/Typography.tsx   |   6 +-
 .../dev-tools-pages/ts/icons/exact-location.svg    |   1 +
 packages/dev-tools-pages/ts/icons/no-location.svg  |   1 +
 .../dev-tools-pages/ts/icons/time-consuming.svg    |   1 +
 packages/dev-tools-pages/ts/icons/time-saving.svg  |   1 +
 packages/dev-tools-pages/ts/pages/Trace.tsx        |   2 +
 7 files changed, 161 insertions(+), 1 deletion(-)
 create mode 100644 packages/dev-tools-pages/ts/components/Trace.tsx
 create mode 100644 packages/dev-tools-pages/ts/icons/exact-location.svg
 create mode 100644 packages/dev-tools-pages/ts/icons/no-location.svg
 create mode 100644 packages/dev-tools-pages/ts/icons/time-consuming.svg
 create mode 100644 packages/dev-tools-pages/ts/icons/time-saving.svg

(limited to 'packages/dev-tools-pages/ts')

diff --git a/packages/dev-tools-pages/ts/components/Trace.tsx b/packages/dev-tools-pages/ts/components/Trace.tsx
new file mode 100644
index 000000000..50bbd449a
--- /dev/null
+++ b/packages/dev-tools-pages/ts/components/Trace.tsx
@@ -0,0 +1,150 @@
+import * as React from 'react';
+import styled from 'styled-components';
+
+import { withContext, Props } from './withContext';
+import { Alpha, Beta, Gamma } from './Typography';
+import Container from './Container';
+import Code from './Code';
+
+import ExactLocation from 'ts/icons/exact-location.svg';
+import NoLocation from 'ts/icons/no-location.svg';
+import TimeConsuming from 'ts/icons/time-consuming.svg';
+import TimeSaving from 'ts/icons/time-saving.svg';
+
+interface TraceProps {
+    background?: string;
+}
+
+function Trace(props: Props) {
+    const { colors } = props;
+
+    return (
+        <StyledSection background={colors.secondary}>
+            <Wrapper>
+                <Block>
+                    <Alpha>The Issue</Alpha>
+                    <MainCopy as="p">
+                        Every time an Ethereum transaction fails, it's extremely hard to trace down the troublemaking
+                        line of code. The only hint you'll get is a generic error.
+                    </MainCopy>
+                    <Code>Error: VM Exception while processing transaction: rever</Code>
+
+                    <List>
+                        <Item>
+                            <Copy>
+                                <Gamma as="h3">No location</Gamma>
+                                <p>
+                                    The error basically says "anything could have gone wrong here", which keeps you
+                                    completely in the dark about its exact location.
+                                </p>
+                            </Copy>
+                            <NoLocation />
+                        </Item>
+
+                        <Item>
+                            <Copy>
+                                <Gamma as="h3">Time-consuming</Gamma>
+                                <p>
+                                    Working with a large code-base that contains hundreds of smart contracts, finding
+                                    the failing line of code quickly becomes a daunting task.
+                                </p>
+                            </Copy>
+                            <TimeConsuming />
+                        </Item>
+                    </List>
+                </Block>
+
+                <Block background={colors.secondary}>
+                    <Alpha>The Fix</Alpha>
+                    <MainCopy as="p">
+                        Sol-trace will give you full stack traces, including contract names, line numbers and code
+                        snippets, every time you encounter an error.
+                    </MainCopy>
+                    <Code>Error: VM Exception while processing transaction: rever</Code>
+
+                    <List>
+                        <Item>
+                            <Copy>
+                                <Gamma as="h3">Exact location</Gamma>
+                                <p>
+                                    It shows you the exact location of the specific code linen and where it was called
+                                    from.
+                                </p>
+                            </Copy>
+                            <ExactLocation />
+                        </Item>
+
+                        <Item>
+                            <Copy>
+                                <Gamma as="h3">Time-saving</Gamma>
+                                <p>
+                                    Turning "Your code failed somewhere, good luck debugging it" into "Your code failed
+                                    on linen X of contract Y", it drastically improves the developer experience.
+                                </p>
+                            </Copy>
+                            <TimeSaving />
+                        </Item>
+                    </List>
+                </Block>
+            </Wrapper>
+        </StyledSection>
+    );
+}
+
+const StyledSection =
+    styled.section <
+    TraceProps >
+    `
+    max-width: 90rem;
+    margin: 0 auto;
+    background: linear-gradient(to right, #000 50%, ${props => props.background} 50%);
+    padding-top: 6.25rem;
+    padding-bottom: 5.25rem;
+`;
+
+const Wrapper = styled(Container)`
+    display: flex;
+
+    ${Alpha} {
+        padding-bottom: 2.5rem;
+    }
+`;
+
+const Block =
+    styled.div <
+    TraceProps >
+    `
+    width: 50%;
+    background: ${props => (props.background ? props.background : '#000')};
+    color: ${props => (props.background ? 'inherit' : '#fff')};
+
+    :first-of-type {
+        padding-right: 6.25rem;
+    }
+    :last-of-type {
+        padding-left: 6.25rem;
+    }
+`;
+
+const MainCopy = styled(Beta)`
+    margin-bottom: 3.1875rem;
+`;
+
+const List = styled.ul`
+    margin-top: 6.25rem;
+    margin-bottom: 0;
+    padding: 0;
+`;
+
+const Item = styled.li`
+    display: flex;
+    align-items: center;
+    margin-bottom: 4.4375rem;
+`;
+
+const Copy = styled.div`
+    max-width: 20rem;
+    margin-right: 5.875rem;
+`;
+
+export default withContext(Trace);
diff --git a/packages/dev-tools-pages/ts/components/Typography.tsx b/packages/dev-tools-pages/ts/components/Typography.tsx
index 3ce18df3b..9251d31b4 100644
--- a/packages/dev-tools-pages/ts/components/Typography.tsx
+++ b/packages/dev-tools-pages/ts/components/Typography.tsx
@@ -10,8 +10,12 @@ const Beta = styled.h3`
     line-height: 1.65;
 `;
 
+const Gamma = styled.h4`
+    font-size: 1rem;
+`;
+
 const Small = styled.p`
     font-size: 0.875rem;
 `;
 
-export { Alpha, Beta, Small };
+export { Alpha, Beta, Gamma, Small };
diff --git a/packages/dev-tools-pages/ts/icons/exact-location.svg b/packages/dev-tools-pages/ts/icons/exact-location.svg
new file mode 100644
index 000000000..4934cad58
--- /dev/null
+++ b/packages/dev-tools-pages/ts/icons/exact-location.svg
@@ -0,0 +1 @@
+<svg width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M80 33.6772c0 5.1116-1.8855 10.4454-4.7935 15.617-2.9036 5.1637-6.7886 10.0987-10.6962 14.3941-3.9047 4.2922-7.8128 7.9248-10.746 10.4851-1.4659 1.2795-2.6866 2.2897-3.5393 2.9788-.2841.2296-.5273.4235-.725.5798-.1977-.1563-.4409-.3502-.725-.5798-.8527-.6891-2.0734-1.6993-3.5393-2.9788-2.9332-2.5603-6.8413-6.1929-10.746-10.4851-3.9076-4.2954-7.7926-9.2304-10.6962-14.3941C20.8855 44.1226 19 38.7888 19 33.6772 19 16.7294 32.6606 3 49.5 3 66.3394 3 80 16.7294 80 33.6772z" stroke="#fff" stroke-width="2"/><path d="M50 98V55M27.5 77H73" stroke="#000" stroke-width="2"/><circle cx="50" cy="34" r="10" stroke="#fff" stroke-width="2"/></svg>
\ No newline at end of file
diff --git a/packages/dev-tools-pages/ts/icons/no-location.svg b/packages/dev-tools-pages/ts/icons/no-location.svg
new file mode 100644
index 000000000..7df008ee1
--- /dev/null
+++ b/packages/dev-tools-pages/ts/icons/no-location.svg
@@ -0,0 +1 @@
+<svg width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg"><path opacity=".5" d="M88.2609 41.4937c0 6.4322-2.3631 13.1253-5.9866 19.5928-3.6191 6.4597-8.4581 12.6276-13.3196 17.9909-4.8586 5.3602-9.7205 9.8958-13.3691 13.0921-1.8236 1.5975-3.3423 2.8589-4.4037 3.7198-.4285.3475-.7823.6297-1.0515.8423-.2692-.2126-.623-.4948-1.0514-.8423-1.0614-.8609-2.5802-2.1223-4.4038-3.7198-3.6486-3.1963-8.5105-7.7319-13.3691-13.0921-4.8614-5.3633-9.7004-11.5312-13.3196-17.9909C14.363 54.619 12 47.9259 12 41.4937 12 20.2255 29.0803 3 50.1304 3c21.0502 0 38.1305 17.2255 38.1305 38.4937z" stroke="#CDD8FF" stroke-width="2"/><circle opacity=".5" cx="50" cy="42" r="18" stroke="#CDD8FF" stroke-width="2"/><path d="M22.5 69.5L78 14" stroke="#fff" stroke-width="2"/></svg>
\ No newline at end of file
diff --git a/packages/dev-tools-pages/ts/icons/time-consuming.svg b/packages/dev-tools-pages/ts/icons/time-consuming.svg
new file mode 100644
index 000000000..330723394
--- /dev/null
+++ b/packages/dev-tools-pages/ts/icons/time-consuming.svg
@@ -0,0 +1 @@
+<svg width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg"><circle opacity=".5" cx="50" cy="50" r="42" stroke="#CDD8FF" stroke-width="2"/><path opacity=".5" d="M34.6621 79.4343c6.9918 3.5363 15.2613 4.61 23.4252 2.4225 8.1639-2.1875 14.7886-7.2521 19.0755-13.8105M33.8711 58c2.9454 5.9269 9.0615 10 16.129 10 1.5538 0 3.0617-.1969 4.5-.5671M30 25.0185C35.4784 20.6269 42.4324 18 50 18c13.4295 0 24.9268 8.2727 29.6739 20" stroke="#CDD8FF" stroke-width="2"/><path d="M35 64l17.5-12.5L37.5 9" stroke="#fff" stroke-width="2"/></svg>
\ No newline at end of file
diff --git a/packages/dev-tools-pages/ts/icons/time-saving.svg b/packages/dev-tools-pages/ts/icons/time-saving.svg
new file mode 100644
index 000000000..935b1204e
--- /dev/null
+++ b/packages/dev-tools-pages/ts/icons/time-saving.svg
@@ -0,0 +1 @@
+<svg width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="49.9092" cy="49.7499" r="40.4824" transform="rotate(45 49.9092 49.7499)" stroke="#fff" stroke-width="2"/><path d="M21.5991 79.4236l8.5269-8.5269M71.3965 29.6267l8.5268-8.5268M69.6914 70.8967l8.5269 8.5269M20.5761 21.7819l9.2091 9.2091M9.01002 50.4736H21.0688M79.4334 50.4736h12.0588M49.0449 78.45v12.0588M49.0449 8.99112V22.0146" stroke="#fff" stroke-width="2"/><path d="M35.584 36.789l14.3252 14.3252 30.0146-30.0146" stroke="#000" stroke-width="2"/></svg>
\ No newline at end of file
diff --git a/packages/dev-tools-pages/ts/pages/Trace.tsx b/packages/dev-tools-pages/ts/pages/Trace.tsx
index 797ec6f49..5dddf027e 100644
--- a/packages/dev-tools-pages/ts/pages/Trace.tsx
+++ b/packages/dev-tools-pages/ts/pages/Trace.tsx
@@ -9,10 +9,12 @@ import { Tabs, TabBlock } from 'ts/components/Tabs';
 import Code from 'ts/components/Code';
 import InlineCode from 'ts/components/InlineCode';
 import List from 'ts/components/List';
+import TraceComponent from 'ts/components/Trace';
 
 function Trace(props: any) {
     return (
         <Base context={context}>
+            <TraceComponent />
             <Container>
                 <Main>
                     <ContentBlock title="Required steps">
-- 
cgit v1.2.3


From 561f441a5bfc4822b0974169605d089b4f687bf5 Mon Sep 17 00:00:00 2001
From: Megan Pearson <megan.e.pearson@gmail.com>
Date: Fri, 19 Oct 2018 09:37:14 +0200
Subject: Implements color variables and updates components

---
 packages/dev-tools-pages/ts/components/Button.tsx     |  3 ++-
 packages/dev-tools-pages/ts/components/Code.tsx       |  5 +++--
 packages/dev-tools-pages/ts/components/Compiler.tsx   |  3 ++-
 packages/dev-tools-pages/ts/components/InlineCode.tsx |  3 ++-
 packages/dev-tools-pages/ts/components/Intro.tsx      |  6 +++---
 packages/dev-tools-pages/ts/components/Tabs.tsx       |  4 +++-
 packages/dev-tools-pages/ts/components/Trace.tsx      |  3 ++-
 packages/dev-tools-pages/ts/variables.tsx             | 12 ++++++++++++
 8 files changed, 29 insertions(+), 10 deletions(-)
 create mode 100644 packages/dev-tools-pages/ts/variables.tsx

(limited to 'packages/dev-tools-pages/ts')

diff --git a/packages/dev-tools-pages/ts/components/Button.tsx b/packages/dev-tools-pages/ts/components/Button.tsx
index e676961c8..fb36f7669 100644
--- a/packages/dev-tools-pages/ts/components/Button.tsx
+++ b/packages/dev-tools-pages/ts/components/Button.tsx
@@ -1,4 +1,5 @@
 import styled from 'styled-components';
+import variables from '../variables';
 
 import { withContext, Props } from './withContext';
 
@@ -16,7 +17,7 @@ const Button =
   white-space: nowrap;
   vertical-align: middle;
   background-color: ${props => props.colors.secondary};
-  color: #000;
+  color: ${variables.colors.black};
   border: 0;
   border-radius: 5rem;
   padding: ${props => (props.large ? '1.125rem 2.375rem' : '.5625rem 1.25rem')};
diff --git a/packages/dev-tools-pages/ts/components/Code.tsx b/packages/dev-tools-pages/ts/components/Code.tsx
index 42d4234f1..42893a70a 100644
--- a/packages/dev-tools-pages/ts/components/Code.tsx
+++ b/packages/dev-tools-pages/ts/components/Code.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import styled from 'styled-components';
+import variables from '../variables';
 
 import BaseButton from './Button';
 
@@ -25,8 +26,8 @@ const Base =
     styled.div <
     CodeProps >
     `
-  color: ${props => (props.language === undefined ? '#FFF' : 'inherit')};
-  background-color: ${props => (props.language === undefined ? '#000' : '#F1F4F5')};
+  color: ${props => (props.language === undefined ? variables.colors.white : 'inherit')};
+  background-color: ${props => (props.language === undefined ? variables.colors.black : variables.colors.lightGray)};
   white-space: ${props => (props.language === undefined ? 'nowrap' : '')};
   position: relative;
   &:hover ${Button} {
diff --git a/packages/dev-tools-pages/ts/components/Compiler.tsx b/packages/dev-tools-pages/ts/components/Compiler.tsx
index 6dcfda70c..fcdbb6bfe 100644
--- a/packages/dev-tools-pages/ts/components/Compiler.tsx
+++ b/packages/dev-tools-pages/ts/components/Compiler.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import styled from 'styled-components';
+import variables from '../variables';
 
 import InlineCode from './InlineCode';
 
@@ -13,7 +14,7 @@ const Cards = styled.dl`
 `;
 
 const Card = styled.div`
-    background-color: #f1f4f5;
+    background-color: ${variables.colors.lightGray};
     padding: 3.125rem;
     padding-bottom: 2.5rem;
 `;
diff --git a/packages/dev-tools-pages/ts/components/InlineCode.tsx b/packages/dev-tools-pages/ts/components/InlineCode.tsx
index 037cfa675..f8aad8795 100644
--- a/packages/dev-tools-pages/ts/components/InlineCode.tsx
+++ b/packages/dev-tools-pages/ts/components/InlineCode.tsx
@@ -1,7 +1,8 @@
 import styled from 'styled-components';
+import variables from '../variables';
 
 const InlineCode = styled.code`
-    background-color: #eceff9;
+    background-color: ${variables.colors.blueGray}
     padding: 0.1875rem;
 `;
 
diff --git a/packages/dev-tools-pages/ts/components/Intro.tsx b/packages/dev-tools-pages/ts/components/Intro.tsx
index c16c888b7..2d4a30f9f 100644
--- a/packages/dev-tools-pages/ts/components/Intro.tsx
+++ b/packages/dev-tools-pages/ts/components/Intro.tsx
@@ -1,10 +1,11 @@
 import * as React from 'react';
 import styled from 'styled-components';
+import variables from '../variables';
 
 import { Alpha, Beta } from './Typography';
 
 const Main = styled.div`
-    background-color: #f1f4f5;
+    background-color: ${variables.colors.lightGray};
     padding: 6.25rem;
     display: flex;
     justify-content: space-between;
@@ -16,13 +17,12 @@ const Title = styled(Alpha)`
 
 const Content = styled.div`
     max-width: 25.9375rem;
-
     display: flex;
     flex-direction: column;
 `;
 
 const Code = styled.div`
-    background-color: #e9eced;
+    background-color: ${variables.colors.darkGray};
     width: 520px;
     height: 350px;
 `;
diff --git a/packages/dev-tools-pages/ts/components/Tabs.tsx b/packages/dev-tools-pages/ts/components/Tabs.tsx
index 1efbe1f61..b36b354f3 100644
--- a/packages/dev-tools-pages/ts/components/Tabs.tsx
+++ b/packages/dev-tools-pages/ts/components/Tabs.tsx
@@ -1,5 +1,7 @@
 import * as React from 'react';
 import styled from 'styled-components';
+import variables from '../variables';
+
 import { Tabs as ReactTabs, Tab, TabList, TabPanel } from 'react-tabs'
 
 import {withContext, Props} from './withContext';
@@ -34,7 +36,7 @@ const Root = styled.div<{primaryColor: string;}>`
     background-color: ${props => props.primaryColor};
   }
   ${StyledTab}[aria-selected="true"] {
-    background-color: #F1F2F7;
+    background-color: ${variables.colors.gray};
   } 
 `;
 
diff --git a/packages/dev-tools-pages/ts/components/Trace.tsx b/packages/dev-tools-pages/ts/components/Trace.tsx
index 50bbd449a..98695177d 100644
--- a/packages/dev-tools-pages/ts/components/Trace.tsx
+++ b/packages/dev-tools-pages/ts/components/Trace.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import styled from 'styled-components';
+import variables from '../variables';
 
 import { withContext, Props } from './withContext';
 import { Alpha, Beta, Gamma } from './Typography';
@@ -97,7 +98,7 @@ const StyledSection =
     `
     max-width: 90rem;
     margin: 0 auto;
-    background: linear-gradient(to right, #000 50%, ${props => props.background} 50%);
+    background: linear-gradient(to right, ${variables.colors.black} 50%, ${props => props.background} 50%);
     padding-top: 6.25rem;
     padding-bottom: 5.25rem;
 `;
diff --git a/packages/dev-tools-pages/ts/variables.tsx b/packages/dev-tools-pages/ts/variables.tsx
new file mode 100644
index 000000000..8590547df
--- /dev/null
+++ b/packages/dev-tools-pages/ts/variables.tsx
@@ -0,0 +1,12 @@
+const variables = {
+    colors: {
+        black: '#000000',
+        white: '#FFFFFF',
+        lightGray: '#F1F4F5',
+        gray: '#F1F2F7',
+        darkGray: '#E9ECED',
+        blueGray: '#ECEFF9',
+    },
+};
+
+export default variables;
-- 
cgit v1.2.3


From 585ca203b02e902b3dd5141bcacd0ffc5740e0c1 Mon Sep 17 00:00:00 2001
From: Megan Pearson <megan.e.pearson@gmail.com>
Date: Fri, 19 Oct 2018 11:32:59 +0200
Subject: Changed name of export to colors and updates components

---
 packages/dev-tools-pages/ts/components/Button.tsx     | 4 ++--
 packages/dev-tools-pages/ts/components/Code.tsx       | 6 +++---
 packages/dev-tools-pages/ts/components/Compiler.tsx   | 4 ++--
 packages/dev-tools-pages/ts/components/InlineCode.tsx | 4 ++--
 packages/dev-tools-pages/ts/components/Intro.tsx      | 6 +++---
 packages/dev-tools-pages/ts/components/Tabs.tsx       | 4 ++--
 packages/dev-tools-pages/ts/components/Trace.tsx      | 8 ++++----
 packages/dev-tools-pages/ts/variables.tsx             | 6 ++++--
 8 files changed, 22 insertions(+), 20 deletions(-)

(limited to 'packages/dev-tools-pages/ts')

diff --git a/packages/dev-tools-pages/ts/components/Button.tsx b/packages/dev-tools-pages/ts/components/Button.tsx
index fb36f7669..2d0fbc353 100644
--- a/packages/dev-tools-pages/ts/components/Button.tsx
+++ b/packages/dev-tools-pages/ts/components/Button.tsx
@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import variables from '../variables';
+import { colors } from '../variables';
 
 import { withContext, Props } from './withContext';
 
@@ -17,7 +17,7 @@ const Button =
   white-space: nowrap;
   vertical-align: middle;
   background-color: ${props => props.colors.secondary};
-  color: ${variables.colors.black};
+  color: ${colors.black};
   border: 0;
   border-radius: 5rem;
   padding: ${props => (props.large ? '1.125rem 2.375rem' : '.5625rem 1.25rem')};
diff --git a/packages/dev-tools-pages/ts/components/Code.tsx b/packages/dev-tools-pages/ts/components/Code.tsx
index 42893a70a..44d1cb99c 100644
--- a/packages/dev-tools-pages/ts/components/Code.tsx
+++ b/packages/dev-tools-pages/ts/components/Code.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import styled from 'styled-components';
-import variables from '../variables';
+import { colors } from '../variables';
 
 import BaseButton from './Button';
 
@@ -26,8 +26,8 @@ const Base =
     styled.div <
     CodeProps >
     `
-  color: ${props => (props.language === undefined ? variables.colors.white : 'inherit')};
-  background-color: ${props => (props.language === undefined ? variables.colors.black : variables.colors.lightGray)};
+  color: ${props => (props.language === undefined ? colors.white : 'inherit')};
+  background-color: ${props => (props.language === undefined ? colors.black : colors.lightGray)};
   white-space: ${props => (props.language === undefined ? 'nowrap' : '')};
   position: relative;
   &:hover ${Button} {
diff --git a/packages/dev-tools-pages/ts/components/Compiler.tsx b/packages/dev-tools-pages/ts/components/Compiler.tsx
index fcdbb6bfe..bda29dc1f 100644
--- a/packages/dev-tools-pages/ts/components/Compiler.tsx
+++ b/packages/dev-tools-pages/ts/components/Compiler.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import styled from 'styled-components';
-import variables from '../variables';
+import { colors } from '../variables';
 
 import InlineCode from './InlineCode';
 
@@ -14,7 +14,7 @@ const Cards = styled.dl`
 `;
 
 const Card = styled.div`
-    background-color: ${variables.colors.lightGray};
+    background-color: ${colors.lightGray};
     padding: 3.125rem;
     padding-bottom: 2.5rem;
 `;
diff --git a/packages/dev-tools-pages/ts/components/InlineCode.tsx b/packages/dev-tools-pages/ts/components/InlineCode.tsx
index f8aad8795..bfbaeb395 100644
--- a/packages/dev-tools-pages/ts/components/InlineCode.tsx
+++ b/packages/dev-tools-pages/ts/components/InlineCode.tsx
@@ -1,8 +1,8 @@
 import styled from 'styled-components';
-import variables from '../variables';
+import { colors } from '../variables';
 
 const InlineCode = styled.code`
-    background-color: ${variables.colors.blueGray}
+    background-color: ${colors.blueGray}
     padding: 0.1875rem;
 `;
 
diff --git a/packages/dev-tools-pages/ts/components/Intro.tsx b/packages/dev-tools-pages/ts/components/Intro.tsx
index 2d4a30f9f..cddee5b6f 100644
--- a/packages/dev-tools-pages/ts/components/Intro.tsx
+++ b/packages/dev-tools-pages/ts/components/Intro.tsx
@@ -1,11 +1,11 @@
 import * as React from 'react';
 import styled from 'styled-components';
-import variables from '../variables';
+import { colors } from '../variables';
 
 import { Alpha, Beta } from './Typography';
 
 const Main = styled.div`
-    background-color: ${variables.colors.lightGray};
+    background-color: ${colors.lightGray};
     padding: 6.25rem;
     display: flex;
     justify-content: space-between;
@@ -22,7 +22,7 @@ const Content = styled.div`
 `;
 
 const Code = styled.div`
-    background-color: ${variables.colors.darkGray};
+    background-color: ${colors.darkGray};
     width: 520px;
     height: 350px;
 `;
diff --git a/packages/dev-tools-pages/ts/components/Tabs.tsx b/packages/dev-tools-pages/ts/components/Tabs.tsx
index b36b354f3..64f87bea3 100644
--- a/packages/dev-tools-pages/ts/components/Tabs.tsx
+++ b/packages/dev-tools-pages/ts/components/Tabs.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import styled from 'styled-components';
-import variables from '../variables';
+import { colors } from '../variables';
 
 import { Tabs as ReactTabs, Tab, TabList, TabPanel } from 'react-tabs'
 
@@ -36,7 +36,7 @@ const Root = styled.div<{primaryColor: string;}>`
     background-color: ${props => props.primaryColor};
   }
   ${StyledTab}[aria-selected="true"] {
-    background-color: ${variables.colors.gray};
+    background-color: ${colors.gray};
   } 
 `;
 
diff --git a/packages/dev-tools-pages/ts/components/Trace.tsx b/packages/dev-tools-pages/ts/components/Trace.tsx
index 98695177d..f4b4e76a3 100644
--- a/packages/dev-tools-pages/ts/components/Trace.tsx
+++ b/packages/dev-tools-pages/ts/components/Trace.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import styled from 'styled-components';
-import variables from '../variables';
+import { colors } from '../variables';
 
 import { withContext, Props } from './withContext';
 import { Alpha, Beta, Gamma } from './Typography';
@@ -98,7 +98,7 @@ const StyledSection =
     `
     max-width: 90rem;
     margin: 0 auto;
-    background: linear-gradient(to right, ${variables.colors.black} 50%, ${props => props.background} 50%);
+    background: linear-gradient(to right, ${colors.black} 50%, ${props => props.background} 50%);
     padding-top: 6.25rem;
     padding-bottom: 5.25rem;
 `;
@@ -116,8 +116,8 @@ const Block =
     TraceProps >
     `
     width: 50%;
-    background: ${props => (props.background ? props.background : '#000')};
-    color: ${props => (props.background ? 'inherit' : '#fff')};
+    background: ${props => (props.background ? props.background : colors.black)};
+    color: ${props => (props.background ? 'inherit' : colors.white)};
 
     :first-of-type {
         padding-right: 6.25rem;
diff --git a/packages/dev-tools-pages/ts/variables.tsx b/packages/dev-tools-pages/ts/variables.tsx
index 8590547df..b1e0271d1 100644
--- a/packages/dev-tools-pages/ts/variables.tsx
+++ b/packages/dev-tools-pages/ts/variables.tsx
@@ -1,5 +1,6 @@
-const variables = {
-    colors: {
+import { css } from 'styled-components';
+
+const colors = {
         black: '#000000',
         white: '#FFFFFF',
         lightGray: '#F1F4F5',
@@ -10,3 +11,4 @@ const variables = {
 };
 
 export default variables;
+export { colors, media };
-- 
cgit v1.2.3


From 45a24738b585d568c765b641a94e9bbf941a8fd7 Mon Sep 17 00:00:00 2001
From: Megan Pearson <megan.e.pearson@gmail.com>
Date: Fri, 19 Oct 2018 11:33:41 +0200
Subject: Exports media breakpoints

---
 packages/dev-tools-pages/ts/variables.tsx | 35 ++++++++++++++++++++++++-------
 1 file changed, 27 insertions(+), 8 deletions(-)

(limited to 'packages/dev-tools-pages/ts')

diff --git a/packages/dev-tools-pages/ts/variables.tsx b/packages/dev-tools-pages/ts/variables.tsx
index b1e0271d1..b23bb3e52 100644
--- a/packages/dev-tools-pages/ts/variables.tsx
+++ b/packages/dev-tools-pages/ts/variables.tsx
@@ -1,14 +1,33 @@
 import { css } from 'styled-components';
 
 const colors = {
-        black: '#000000',
-        white: '#FFFFFF',
-        lightGray: '#F1F4F5',
-        gray: '#F1F2F7',
-        darkGray: '#E9ECED',
-        blueGray: '#ECEFF9',
-    },
+    black: '#000000',
+    white: '#FFFFFF',
+    lightGray: '#F1F4F5',
+    gray: '#F1F2F7',
+    darkGray: '#E9ECED',
+    blueGray: '#ECEFF9',
 };
 
-export default variables;
+interface SizesInterface {
+    [key: string]: number;
+}
+
+const sizes: SizesInterface = {
+    large: 992,
+    medium: 768,
+    small: 376,
+};
+
+const media = Object.keys(sizes).reduce((acc: any, label: string) => {
+    acc[label] = (args: any) => css`
+        @media (max-width: ${sizes[label] / 16}em) {
+            ${css(args)};
+        }
+    `;
+
+    return acc;
+}, {});
+
+export default media;
 export { colors, media };
-- 
cgit v1.2.3


From ba0b9b259fdd84c34254cb9d9cab4a2dc4c91f94 Mon Sep 17 00:00:00 2001
From: Megan Pearson <megan.e.pearson@gmail.com>
Date: Fri, 19 Oct 2018 11:59:03 +0200
Subject: Responsive header

---
 packages/dev-tools-pages/ts/components/Header.tsx | 6 ++++++
 1 file changed, 6 insertions(+)

(limited to 'packages/dev-tools-pages/ts')

diff --git a/packages/dev-tools-pages/ts/components/Header.tsx b/packages/dev-tools-pages/ts/components/Header.tsx
index dca562421..aeefae3cc 100644
--- a/packages/dev-tools-pages/ts/components/Header.tsx
+++ b/packages/dev-tools-pages/ts/components/Header.tsx
@@ -5,6 +5,8 @@ import { withContext, Props } from './withContext';
 import Container from './Container';
 import { Small } from './Typography';
 
+import { media } from '../variables';
+
 function Header(props: Props) {
     const { icon, title, colors } = props;
 
@@ -36,6 +38,8 @@ const StyledHeader = styled.header`
         justify-content: space-between;
         align-items: center;
     }
+
+    ${media.small`padding-top: 2.125rem;`};
 `;
 
 const LogoMark = styled.div`
@@ -53,6 +57,8 @@ const Title = styled.h1`
     font-size: 1.5rem;
     margin: 0;
     margin-left: 0.8125rem;
+
+    ${media.small`font-size: 1.25rem;`};
 `;
 
 const StyledLink = styled(Small)`
-- 
cgit v1.2.3


From 135a623b1f783a24ff4885a3dd0209fcaeb85678 Mon Sep 17 00:00:00 2001
From: Megan Pearson <megan.e.pearson@gmail.com>
Date: Fri, 19 Oct 2018 14:29:59 +0200
Subject: Responsive trace

---
 packages/dev-tools-pages/ts/components/Trace.tsx | 38 ++++++++++++++++++++++--
 1 file changed, 36 insertions(+), 2 deletions(-)

(limited to 'packages/dev-tools-pages/ts')

diff --git a/packages/dev-tools-pages/ts/components/Trace.tsx b/packages/dev-tools-pages/ts/components/Trace.tsx
index f4b4e76a3..fe1f357c7 100644
--- a/packages/dev-tools-pages/ts/components/Trace.tsx
+++ b/packages/dev-tools-pages/ts/components/Trace.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import styled from 'styled-components';
-import { colors } from '../variables';
+import { colors, media } from '../variables';
 
 import { withContext, Props } from './withContext';
 import { Alpha, Beta, Gamma } from './Typography';
@@ -101,6 +101,8 @@ const StyledSection =
     background: linear-gradient(to right, ${colors.black} 50%, ${props => props.background} 50%);
     padding-top: 6.25rem;
     padding-bottom: 5.25rem;
+    
+    ${media.small`background: none`};
 `;
 
 const Wrapper = styled(Container)`
@@ -108,7 +110,14 @@ const Wrapper = styled(Container)`
 
     ${Alpha} {
         padding-bottom: 2.5rem;
+
+        ${media.small`padding-bottom: 1.875rem;`};
     }
+
+    ${media.small`
+        display: block;
+        width: 100%;
+    `};
 `;
 
 const Block =
@@ -125,27 +134,52 @@ const Block =
     :last-of-type {
         padding-left: 6.25rem;
     }
+
+    ${media.small`
+        width: 100%;
+        padding-top: 2.5rem;
+        padding-bottom: 3.4375rem;
+
+        :first-of-type {
+            padding-left: 1.875rem;
+            padding-right: 1.875rem;
+        }
+        :last-of-type {
+            padding-left: 1.875rem;
+            padding-right: 1.875rem;
+        }
+    `};
 `;
 
 const MainCopy = styled(Beta)`
     margin-bottom: 3.1875rem;
+    ${media.small`margin-bottom: 1.125rem;`};
 `;
 
 const List = styled.ul`
     margin-top: 6.25rem;
     margin-bottom: 0;
     padding: 0;
+
+    ${media.small`margin-top: 3.4375rem;`};
 `;
 
 const Item = styled.li`
     display: flex;
     align-items: center;
-    margin-bottom: 4.4375rem;
+
+    :not(:last-child) {
+        margin-bottom: 4.4375rem;
+
+        ${media.small`margin-bottom: 3.4375rem;`};
+    }
 `;
 
 const Copy = styled.div`
     max-width: 20rem;
     margin-right: 5.875rem;
+
+    ${media.small`margin-right: 2.0625rem;`};
 `;
 
 export default withContext(Trace);
-- 
cgit v1.2.3


From 9a024fdacf885cbeb1d070064b0ab2314a092f13 Mon Sep 17 00:00:00 2001
From: Megan Pearson <megan.e.pearson@gmail.com>
Date: Fri, 19 Oct 2018 14:30:38 +0200
Subject: Responsive font sizes in typography and globalstyles

---
 packages/dev-tools-pages/ts/components/Typography.tsx | 7 +++++++
 packages/dev-tools-pages/ts/globalStyles.tsx          | 4 ++++
 2 files changed, 11 insertions(+)

(limited to 'packages/dev-tools-pages/ts')

diff --git a/packages/dev-tools-pages/ts/components/Typography.tsx b/packages/dev-tools-pages/ts/components/Typography.tsx
index 9251d31b4..5f9587335 100644
--- a/packages/dev-tools-pages/ts/components/Typography.tsx
+++ b/packages/dev-tools-pages/ts/components/Typography.tsx
@@ -1,17 +1,24 @@
 import styled from 'styled-components';
+import { media } from '../variables';
 
 const Alpha = styled.h2`
     font-size: 1.75rem;
     line-height: 1;
+
+    ${media.small`font-size: 1.5rem;`};
 `;
 
 const Beta = styled.h3`
     font-size: 1.25rem;
     line-height: 1.65;
+
+    ${media.small`font-size: 1rem;`};
 `;
 
 const Gamma = styled.h4`
     font-size: 1rem;
+
+    ${media.small`font-size: 0.875rem;`};
 `;
 
 const Small = styled.p`
diff --git a/packages/dev-tools-pages/ts/globalStyles.tsx b/packages/dev-tools-pages/ts/globalStyles.tsx
index 1a2a1769a..e8ef630da 100644
--- a/packages/dev-tools-pages/ts/globalStyles.tsx
+++ b/packages/dev-tools-pages/ts/globalStyles.tsx
@@ -1,4 +1,5 @@
 import { createGlobalStyle } from 'styled-components';
+import { media } from './variables';
 import styledNormalize from 'styled-normalize';
 import hljsStyles from 'highlight.js/styles/github-gist.css';
 
@@ -44,6 +45,9 @@ const BaseStyles = createGlobalStyle`
     font-weight: 300;
     font-size: 1rem;
     line-height: 1.8;
+
+    ${media.small`font-size: 0.875rem;`};
+
   }
 
   a {
-- 
cgit v1.2.3


From 8a7c61c6f46dc283d9387fb29860295f58e683e7 Mon Sep 17 00:00:00 2001
From: Megan Pearson <megan.e.pearson@gmail.com>
Date: Fri, 19 Oct 2018 15:31:26 +0200
Subject: Responsive footer

---
 packages/dev-tools-pages/ts/components/Footer.tsx | 40 ++++++++++++++++++++---
 1 file changed, 35 insertions(+), 5 deletions(-)

(limited to 'packages/dev-tools-pages/ts')

diff --git a/packages/dev-tools-pages/ts/components/Footer.tsx b/packages/dev-tools-pages/ts/components/Footer.tsx
index 82b2de1a3..15e6a5b86 100644
--- a/packages/dev-tools-pages/ts/components/Footer.tsx
+++ b/packages/dev-tools-pages/ts/components/Footer.tsx
@@ -4,6 +4,7 @@ import styled from 'styled-components';
 import { Alpha, Beta } from './Typography';
 import { withContext, Props } from './withContext';
 import Container from './Container';
+import { media } from '../variables';
 
 import MainIcon from 'ts/icons/logos/0x.svg';
 import compiler from 'ts/context/compiler';
@@ -23,7 +24,7 @@ function Footer(props: Props) {
                     <Alpha>Other tools by 0x</Alpha>
                     <List>
                         {tools.map(({ title, subtitle, icon }) => (
-                            <ListItem as="li" key={title}>
+                            <ListItem key={title}>
                                 <Icon as={icon} />
                                 <div>
                                     <Beta>{title}</Beta>
@@ -49,21 +50,38 @@ const StyledFooter = styled.footer`
     background-color: ${(props: { background: string }) => props.background};
     padding-top: 6.25rem;
     padding-bottom: 5.4375rem;
+
+    ${media.small`padding-top: 2.5rem;`};
 `;
 
 const Top = styled.div`
     display: flex;
     justify-content: space-between;
     margin-bottom: 9.375rem;
+
+    ${media.small`
+        display: block;
+        margin-bottom: 5.3125rem;
+    `};
+
+    ${Alpha} {
+        ${media.small`margin-bottom: 3.8125rem;`};
+    }
+`;
+
+const Icon = styled.div`
+    margin-right: 1.3125rem;
+
+    ${media.small`margin-right: 0.9375rem`};
 `;
 
 const Media = styled.div`
     display: flex;
     align-items: center;
-`;
 
-const Icon = styled.div`
-    margin-right: 1.3125rem;
+    ${Icon} {
+        align-self: flex-start;
+    }
 `;
 
 const List = styled.ul`
@@ -73,14 +91,26 @@ const List = styled.ul`
     flex-direction: row;
     margin: 0;
     padding: 0;
+
+    ${media.small`
+        display: block;
+        width: 100%; 
+    `};
 `;
 
-const ListItem = styled(Media)`
+const ListItem = styled.li`
+    display: flex;
+    align-items: center;
     flex-basis: 50%;
     margin-bottom: 3.3125rem;
+
     :nth-last-of-type(-n + 2) {
         margin-bottom: 0;
+
+        ${media.small`margin-bottom: 1.875rem`};
     }
+
+    ${media.small`margin-bottom: 1.875rem`};
 `;
 
 const Small = styled.small`
-- 
cgit v1.2.3


From d6ac1a4f782c55407760d4502325b6aa2cf3730c Mon Sep 17 00:00:00 2001
From: Megan Pearson <megan.e.pearson@gmail.com>
Date: Fri, 19 Oct 2018 15:32:02 +0200
Subject: Remove font size adjustment for small screens from Beta

---
 packages/dev-tools-pages/ts/components/Trace.tsx      | 5 ++++-
 packages/dev-tools-pages/ts/components/Typography.tsx | 2 --
 2 files changed, 4 insertions(+), 3 deletions(-)

(limited to 'packages/dev-tools-pages/ts')

diff --git a/packages/dev-tools-pages/ts/components/Trace.tsx b/packages/dev-tools-pages/ts/components/Trace.tsx
index fe1f357c7..545e87d53 100644
--- a/packages/dev-tools-pages/ts/components/Trace.tsx
+++ b/packages/dev-tools-pages/ts/components/Trace.tsx
@@ -153,7 +153,10 @@ const Block =
 
 const MainCopy = styled(Beta)`
     margin-bottom: 3.1875rem;
-    ${media.small`margin-bottom: 1.125rem;`};
+    ${media.small`
+        margin-bottom: 1.125rem;
+        font-size: 1rem;
+    `};
 `;
 
 const List = styled.ul`
diff --git a/packages/dev-tools-pages/ts/components/Typography.tsx b/packages/dev-tools-pages/ts/components/Typography.tsx
index 5f9587335..deac8a976 100644
--- a/packages/dev-tools-pages/ts/components/Typography.tsx
+++ b/packages/dev-tools-pages/ts/components/Typography.tsx
@@ -11,8 +11,6 @@ const Alpha = styled.h2`
 const Beta = styled.h3`
     font-size: 1.25rem;
     line-height: 1.65;
-
-    ${media.small`font-size: 1rem;`};
 `;
 
 const Gamma = styled.h4`
-- 
cgit v1.2.3


From 580e574c841fb9b0ba9d37a50bd5a0f787799ff2 Mon Sep 17 00:00:00 2001
From: August Skare <post@augustskare.no>
Date: Fri, 19 Oct 2018 15:02:15 +0100
Subject: Feature/build step (#2)

* BundleAnalyzerPlugin

* lazy load highlight.js

* seperate bundles for each page

* prerender apps to html on build

* preload important font files

* dont prerender code copy button

* fix woff2 variant of font

* added missing doctype

* remove metatags component
---
 packages/dev-tools-pages/ts/components/Base.tsx    | 26 +++++++++++++++
 packages/dev-tools-pages/ts/components/Code.tsx    |  6 ++--
 .../dev-tools-pages/ts/components/MetaTags.tsx     | 28 ----------------
 packages/dev-tools-pages/ts/globalStyles.tsx       |  6 ++--
 packages/dev-tools-pages/ts/globals.d.ts           |  2 ++
 packages/dev-tools-pages/ts/highlight.tsx          |  6 ++++
 packages/dev-tools-pages/ts/index.tsx              | 37 ----------------------
 packages/dev-tools-pages/ts/pages/Base.tsx         | 28 ----------------
 packages/dev-tools-pages/ts/pages/Compiler.tsx     | 13 ++++++--
 packages/dev-tools-pages/ts/pages/Cov.tsx          | 13 ++++++--
 packages/dev-tools-pages/ts/pages/Profiler.tsx     | 13 ++++++--
 packages/dev-tools-pages/ts/pages/Trace.tsx        | 13 ++++++--
 12 files changed, 80 insertions(+), 111 deletions(-)
 create mode 100644 packages/dev-tools-pages/ts/components/Base.tsx
 delete mode 100644 packages/dev-tools-pages/ts/components/MetaTags.tsx
 create mode 100644 packages/dev-tools-pages/ts/highlight.tsx
 delete mode 100644 packages/dev-tools-pages/ts/index.tsx
 delete mode 100644 packages/dev-tools-pages/ts/pages/Base.tsx

(limited to 'packages/dev-tools-pages/ts')

diff --git a/packages/dev-tools-pages/ts/components/Base.tsx b/packages/dev-tools-pages/ts/components/Base.tsx
new file mode 100644
index 000000000..16e9560f0
--- /dev/null
+++ b/packages/dev-tools-pages/ts/components/Base.tsx
@@ -0,0 +1,26 @@
+import * as React from 'react';
+
+import ThemeContext from 'ts/context';
+import GlobalStyles from 'ts/globalStyles';
+import Header from 'ts/components/Header';
+import Hero from 'ts/components/Hero';
+import Footer from 'ts/components/Footer';
+
+interface BaseProps {
+    context: any;
+    children: React.ReactNode;
+}
+
+function Base(props: BaseProps) {
+    return (
+        <ThemeContext.Provider value={props.context}>
+            <GlobalStyles />
+            <Header />
+            <Hero />
+            {props.children}
+            <Footer />
+        </ThemeContext.Provider>
+    );
+}
+
+export default Base;
diff --git a/packages/dev-tools-pages/ts/components/Code.tsx b/packages/dev-tools-pages/ts/components/Code.tsx
index 42d4234f1..074914c2a 100644
--- a/packages/dev-tools-pages/ts/components/Code.tsx
+++ b/packages/dev-tools-pages/ts/components/Code.tsx
@@ -68,8 +68,8 @@ class Code extends React.Component<CodeProps, CodeState> {
         const { language, children } = this.props;
 
         if (language !== undefined) {
-            const { highlight } = await import(/* webpackChunkName: 'highlight.js' */ 'highlight.js');
-            const { value: hlCode } = highlight(language, children as string);
+            const { default: hljs } = await System.import(/* webpackChunkName: 'highlightjs' */ 'ts/highlight');
+            const { value: hlCode } = hljs.highlight(language, children as string);
             this.setState({ hlCode });
         }
     }
@@ -102,7 +102,7 @@ class Code extends React.Component<CodeProps, CodeState> {
                         <StyledCode>{this.props.children}</StyledCode>
                     )}
                 </StyledPre>
-                <Button onClick={this.handleCopy}>Copy</Button>
+                {navigator.userAgent !== 'ReactSnap' ? <Button onClick={this.handleCopy}>Copy</Button> : null}
                 {!('clipboard' in navigator) ? (
                     <CopyInput readOnly aria-hidden="true" ref={this.code} value={children} />
                 ) : null}
diff --git a/packages/dev-tools-pages/ts/components/MetaTags.tsx b/packages/dev-tools-pages/ts/components/MetaTags.tsx
deleted file mode 100644
index 9bb33f7ab..000000000
--- a/packages/dev-tools-pages/ts/components/MetaTags.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import * as React from 'react';
-import { Helmet } from 'react-helmet';
-
-import { withContext, Props } from './withContext';
-
-interface MetaTagsProps extends Props {
-    imgSrc?: string;
-}
-
-function MetaTags(props: MetaTagsProps) {
-    const { title, imgSrc = '/images/og_image.png' } = props;
-    const description = props.tagline;
-    return (
-        <Helmet>
-            <title>{props.title}</title>
-            <meta name="description" content={description} />
-            <link rel="shortcut icon" href={`/favicons/${props.name}.ico`} />
-            <meta property="og:title" content={title} />
-            <meta property="og:description" content={description} />
-            <meta property="og:type" content="website" />
-            <meta property="og:image" content={imgSrc} />
-            <meta name="twitter:site" content="@0xproject" />
-            <meta name="twitter:image" content={imgSrc} />
-        </Helmet>
-    );
-}
-
-export default withContext(MetaTags);
diff --git a/packages/dev-tools-pages/ts/globalStyles.tsx b/packages/dev-tools-pages/ts/globalStyles.tsx
index 1a2a1769a..c0cf46673 100644
--- a/packages/dev-tools-pages/ts/globalStyles.tsx
+++ b/packages/dev-tools-pages/ts/globalStyles.tsx
@@ -10,21 +10,21 @@ const BaseStyles = createGlobalStyle`
 
   @font-face {
     font-family: "Maison Neue";
-    src: url("/fonts/MaisonNeue-Book-subset.woff") format("woff");
+    src: url("/fonts/MaisonNeue-Book-subset.woff2") format("woff2"), url("/fonts/MaisonNeue-Book-subset.woff") format("woff");
     font-weight: 300;
     font-display: swap;
     unicode-range: U+20-7E;
   }
   @font-face {
     font-family: "Maison Neue";
-    src: url("/fonts/MaisonNeue-Bold-subset.woff") format("woff");
+    src: url("/fonts/MaisonNeue-Bold-subset.woff2") format("woff2"), url("/fonts/MaisonNeue-Bold-subset.woff") format("woff");
     font-weight: 500;
     font-display: swap;
     unicode-range: U+20-7E;
   }
   @font-face {
     font-family: "Maison Neue Mono";
-    src: url("/fonts/MaisonNeue-Mono-subset.woff") format("woff");
+    src: url("/fonts/MaisonNeue-Mono-subset.woff2") format("woff2"), url("/fonts/MaisonNeue-Mono-subset.woff") format("woff");
     font-weight: 300;
     font-display: optional;
     unicode-range: U+20-7E;
diff --git a/packages/dev-tools-pages/ts/globals.d.ts b/packages/dev-tools-pages/ts/globals.d.ts
index da026a198..07871a74b 100644
--- a/packages/dev-tools-pages/ts/globals.d.ts
+++ b/packages/dev-tools-pages/ts/globals.d.ts
@@ -1,6 +1,8 @@
 declare module 'whatwg-fetch';
 declare module 'react-document-title';
 
+declare var System: any;
+
 declare module '*.json' {
     const json: any;
     /* tslint:disable */
diff --git a/packages/dev-tools-pages/ts/highlight.tsx b/packages/dev-tools-pages/ts/highlight.tsx
new file mode 100644
index 000000000..0c4602d51
--- /dev/null
+++ b/packages/dev-tools-pages/ts/highlight.tsx
@@ -0,0 +1,6 @@
+const highlight = require('highlight.js/lib/highlight');
+const javascript = require('highlight.js/lib/languages/javascript');
+
+highlight.registerLanguage('javascript', javascript);
+
+export default highlight;
diff --git a/packages/dev-tools-pages/ts/index.tsx b/packages/dev-tools-pages/ts/index.tsx
deleted file mode 100644
index b185e270a..000000000
--- a/packages/dev-tools-pages/ts/index.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import * as React from 'react';
-import { render } from 'react-dom';
-import { Router, Link } from '@reach/router';
-
-import Trace from 'ts/pages/Trace';
-import Compiler from 'ts/pages/Compiler';
-import Cov from 'ts/pages/Cov';
-import Profiler from 'ts/pages/Profiler';
-
-const Index = (props: any) => (
-    <ul>
-        <li>
-            <Link to="/trace">sol-trace</Link>
-        </li>
-        <li>
-            <Link to="/compiler">sol-compiler</Link>
-        </li>
-        <li>
-            <Link to="/cov">sol-cov</Link>
-        </li>
-        <li>
-            <Link to="/profiler">sol-profiler</Link>
-        </li>
-    </ul>
-);
-
-const App = () => (
-    <Router>
-        <Trace path="/trace" />
-        <Compiler path="/compiler" />
-        <Cov path="/cov" />
-        <Profiler path="/profiler" />
-        <Index default />
-    </Router>
-);
-
-render(<App />, document.getElementById('app'));
diff --git a/packages/dev-tools-pages/ts/pages/Base.tsx b/packages/dev-tools-pages/ts/pages/Base.tsx
deleted file mode 100644
index 7bb578611..000000000
--- a/packages/dev-tools-pages/ts/pages/Base.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import * as React from 'react';
-
-import ThemeContext from 'ts/context';
-import GlobalStyles from 'ts/globalStyles';
-import MetaTags from 'ts/components/MetaTags';
-import Header from 'ts/components/Header';
-import Hero from 'ts/components/Hero';
-import Footer from 'ts/components/Footer';
-
-interface BaseProps {
-    context: any;
-    children: React.ReactNode;
-}
-
-function Base(props: BaseProps) {
-    return (
-        <ThemeContext.Provider value={props.context}>
-            <MetaTags />
-            <GlobalStyles />
-            <Header />
-            <Hero />
-            {props.children}
-            <Footer />
-        </ThemeContext.Provider>
-    );
-}
-
-export default Base;
diff --git a/packages/dev-tools-pages/ts/pages/Compiler.tsx b/packages/dev-tools-pages/ts/pages/Compiler.tsx
index 79c9f52e4..35c810cb3 100644
--- a/packages/dev-tools-pages/ts/pages/Compiler.tsx
+++ b/packages/dev-tools-pages/ts/pages/Compiler.tsx
@@ -1,7 +1,8 @@
 import * as React from 'react';
+import { render, hydrate } from 'react-dom';
 
 import context from 'ts/context/compiler';
-import Base from './Base';
+import Base from 'ts/components/Base';
 import Container from 'ts/components/Container';
 import Main from 'ts/components/Main';
 import ContentBlock from 'ts/components/ContentBlock';
@@ -11,7 +12,7 @@ import InlineCode from 'ts/components/InlineCode';
 import List from 'ts/components/List';
 import CompilerComponent from 'ts/components/Compiler';
 
-function Compiler(props: any) {
+function Compiler() {
     return (
         <Base context={context}>
             <Container>
@@ -52,4 +53,10 @@ const artifactAdapter = new SolCompilerArtifactAdapter(artifactsDir, contractsDi
     );
 }
 
-export default Compiler;
+const root = document.getElementById('app');
+
+if (root.hasChildNodes()) {
+    hydrate(<Compiler />, root);
+} else {
+    render(<Compiler />, root);
+}
diff --git a/packages/dev-tools-pages/ts/pages/Cov.tsx b/packages/dev-tools-pages/ts/pages/Cov.tsx
index b7405f8f9..e835e5c82 100644
--- a/packages/dev-tools-pages/ts/pages/Cov.tsx
+++ b/packages/dev-tools-pages/ts/pages/Cov.tsx
@@ -1,7 +1,8 @@
 import * as React from 'react';
+import { render, hydrate } from 'react-dom';
 
 import context from 'ts/context/cov';
-import Base from './Base';
+import Base from 'ts/components/Base';
 import Container from 'ts/components/Container';
 import Main from 'ts/components/Main';
 import ContentBlock from 'ts/components/ContentBlock';
@@ -11,7 +12,7 @@ import InlineCode from 'ts/components/InlineCode';
 import List from 'ts/components/List';
 import Intro from 'ts/components/Intro';
 
-function Cov(props: any) {
+function Cov() {
     return (
         <Base context={context}>
             <Container>
@@ -58,4 +59,10 @@ const artifactAdapter = new SolCompilerArtifactAdapter(artifactsDir, contractsDi
     );
 }
 
-export default Cov;
+const root = document.getElementById('app');
+
+if (root.hasChildNodes()) {
+    hydrate(<Cov />, root);
+} else {
+    render(<Cov />, root);
+}
diff --git a/packages/dev-tools-pages/ts/pages/Profiler.tsx b/packages/dev-tools-pages/ts/pages/Profiler.tsx
index d129d6427..9f8b46b9c 100644
--- a/packages/dev-tools-pages/ts/pages/Profiler.tsx
+++ b/packages/dev-tools-pages/ts/pages/Profiler.tsx
@@ -1,7 +1,8 @@
 import * as React from 'react';
+import { render, hydrate } from 'react-dom';
 
 import context from 'ts/context/profiler';
-import Base from './Base';
+import Base from 'ts/components/Base';
 import Container from 'ts/components/Container';
 import Main from 'ts/components/Main';
 import ContentBlock from 'ts/components/ContentBlock';
@@ -11,7 +12,7 @@ import InlineCode from 'ts/components/InlineCode';
 import List from 'ts/components/List';
 import Intro from 'ts/components/Intro';
 
-function Profiler(props: any) {
+function Profiler() {
     return (
         <Base context={context}>
             <Container>
@@ -58,4 +59,10 @@ const artifactAdapter = new SolCompilerArtifactAdapter(artifactsDir, contractsDi
     );
 }
 
-export default Profiler;
+const root = document.getElementById('app');
+
+if (root.hasChildNodes()) {
+    hydrate(<Profiler />, root);
+} else {
+    render(<Profiler />, root);
+}
diff --git a/packages/dev-tools-pages/ts/pages/Trace.tsx b/packages/dev-tools-pages/ts/pages/Trace.tsx
index 5dddf027e..be5acdac4 100644
--- a/packages/dev-tools-pages/ts/pages/Trace.tsx
+++ b/packages/dev-tools-pages/ts/pages/Trace.tsx
@@ -1,7 +1,8 @@
 import * as React from 'react';
+import { render, hydrate } from 'react-dom';
 
 import context from 'ts/context/trace';
-import Base from './Base';
+import Base from 'ts/components/Base';
 import Container from 'ts/components/Container';
 import Main from 'ts/components/Main';
 import ContentBlock from 'ts/components/ContentBlock';
@@ -11,7 +12,7 @@ import InlineCode from 'ts/components/InlineCode';
 import List from 'ts/components/List';
 import TraceComponent from 'ts/components/Trace';
 
-function Trace(props: any) {
+function Trace() {
     return (
         <Base context={context}>
             <TraceComponent />
@@ -52,4 +53,10 @@ const artifactAdapter = new SolCompilerArtifactAdapter(artifactsDir, contractsDi
     );
 }
 
-export default Trace;
+const root = document.getElementById('app');
+
+if (root.hasChildNodes()) {
+    hydrate(<Trace />, root);
+} else {
+    render(<Trace />, root);
+}
-- 
cgit v1.2.3


From 7d7f54c751a2a5b8fca6791fb6685f4b5f969fff Mon Sep 17 00:00:00 2001
From: August Skare <post@augustskare.no>
Date: Fri, 19 Oct 2018 15:02:15 +0100
Subject: Feature/build step (#2)

* BundleAnalyzerPlugin

* lazy load highlight.js

* seperate bundles for each page

* prerender apps to html on build

* preload important font files

* dont prerender code copy button

* fix woff2 variant of font

* added missing doctype

* remove metatags component
---
 packages/dev-tools-pages/ts/components/Base.tsx    | 26 +++++++++++++++
 packages/dev-tools-pages/ts/components/Code.tsx    |  6 ++--
 .../dev-tools-pages/ts/components/MetaTags.tsx     | 28 ----------------
 packages/dev-tools-pages/ts/globalStyles.tsx       |  6 ++--
 packages/dev-tools-pages/ts/globals.d.ts           |  2 ++
 packages/dev-tools-pages/ts/highlight.tsx          |  6 ++++
 packages/dev-tools-pages/ts/index.tsx              | 37 ----------------------
 packages/dev-tools-pages/ts/pages/Base.tsx         | 28 ----------------
 packages/dev-tools-pages/ts/pages/Compiler.tsx     | 13 ++++++--
 packages/dev-tools-pages/ts/pages/Cov.tsx          | 13 ++++++--
 packages/dev-tools-pages/ts/pages/Profiler.tsx     | 13 ++++++--
 packages/dev-tools-pages/ts/pages/Trace.tsx        | 13 ++++++--
 12 files changed, 80 insertions(+), 111 deletions(-)
 create mode 100644 packages/dev-tools-pages/ts/components/Base.tsx
 delete mode 100644 packages/dev-tools-pages/ts/components/MetaTags.tsx
 create mode 100644 packages/dev-tools-pages/ts/highlight.tsx
 delete mode 100644 packages/dev-tools-pages/ts/index.tsx
 delete mode 100644 packages/dev-tools-pages/ts/pages/Base.tsx

(limited to 'packages/dev-tools-pages/ts')

diff --git a/packages/dev-tools-pages/ts/components/Base.tsx b/packages/dev-tools-pages/ts/components/Base.tsx
new file mode 100644
index 000000000..16e9560f0
--- /dev/null
+++ b/packages/dev-tools-pages/ts/components/Base.tsx
@@ -0,0 +1,26 @@
+import * as React from 'react';
+
+import ThemeContext from 'ts/context';
+import GlobalStyles from 'ts/globalStyles';
+import Header from 'ts/components/Header';
+import Hero from 'ts/components/Hero';
+import Footer from 'ts/components/Footer';
+
+interface BaseProps {
+    context: any;
+    children: React.ReactNode;
+}
+
+function Base(props: BaseProps) {
+    return (
+        <ThemeContext.Provider value={props.context}>
+            <GlobalStyles />
+            <Header />
+            <Hero />
+            {props.children}
+            <Footer />
+        </ThemeContext.Provider>
+    );
+}
+
+export default Base;
diff --git a/packages/dev-tools-pages/ts/components/Code.tsx b/packages/dev-tools-pages/ts/components/Code.tsx
index 44d1cb99c..72b3e1af7 100644
--- a/packages/dev-tools-pages/ts/components/Code.tsx
+++ b/packages/dev-tools-pages/ts/components/Code.tsx
@@ -69,8 +69,8 @@ class Code extends React.Component<CodeProps, CodeState> {
         const { language, children } = this.props;
 
         if (language !== undefined) {
-            const { highlight } = await import(/* webpackChunkName: 'highlight.js' */ 'highlight.js');
-            const { value: hlCode } = highlight(language, children as string);
+            const { default: hljs } = await System.import(/* webpackChunkName: 'highlightjs' */ 'ts/highlight');
+            const { value: hlCode } = hljs.highlight(language, children as string);
             this.setState({ hlCode });
         }
     }
@@ -103,7 +103,7 @@ class Code extends React.Component<CodeProps, CodeState> {
                         <StyledCode>{this.props.children}</StyledCode>
                     )}
                 </StyledPre>
-                <Button onClick={this.handleCopy}>Copy</Button>
+                {navigator.userAgent !== 'ReactSnap' ? <Button onClick={this.handleCopy}>Copy</Button> : null}
                 {!('clipboard' in navigator) ? (
                     <CopyInput readOnly aria-hidden="true" ref={this.code} value={children} />
                 ) : null}
diff --git a/packages/dev-tools-pages/ts/components/MetaTags.tsx b/packages/dev-tools-pages/ts/components/MetaTags.tsx
deleted file mode 100644
index 9bb33f7ab..000000000
--- a/packages/dev-tools-pages/ts/components/MetaTags.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import * as React from 'react';
-import { Helmet } from 'react-helmet';
-
-import { withContext, Props } from './withContext';
-
-interface MetaTagsProps extends Props {
-    imgSrc?: string;
-}
-
-function MetaTags(props: MetaTagsProps) {
-    const { title, imgSrc = '/images/og_image.png' } = props;
-    const description = props.tagline;
-    return (
-        <Helmet>
-            <title>{props.title}</title>
-            <meta name="description" content={description} />
-            <link rel="shortcut icon" href={`/favicons/${props.name}.ico`} />
-            <meta property="og:title" content={title} />
-            <meta property="og:description" content={description} />
-            <meta property="og:type" content="website" />
-            <meta property="og:image" content={imgSrc} />
-            <meta name="twitter:site" content="@0xproject" />
-            <meta name="twitter:image" content={imgSrc} />
-        </Helmet>
-    );
-}
-
-export default withContext(MetaTags);
diff --git a/packages/dev-tools-pages/ts/globalStyles.tsx b/packages/dev-tools-pages/ts/globalStyles.tsx
index e8ef630da..13ecde7aa 100644
--- a/packages/dev-tools-pages/ts/globalStyles.tsx
+++ b/packages/dev-tools-pages/ts/globalStyles.tsx
@@ -11,21 +11,21 @@ const BaseStyles = createGlobalStyle`
 
   @font-face {
     font-family: "Maison Neue";
-    src: url("/fonts/MaisonNeue-Book-subset.woff") format("woff");
+    src: url("/fonts/MaisonNeue-Book-subset.woff2") format("woff2"), url("/fonts/MaisonNeue-Book-subset.woff") format("woff");
     font-weight: 300;
     font-display: swap;
     unicode-range: U+20-7E;
   }
   @font-face {
     font-family: "Maison Neue";
-    src: url("/fonts/MaisonNeue-Bold-subset.woff") format("woff");
+    src: url("/fonts/MaisonNeue-Bold-subset.woff2") format("woff2"), url("/fonts/MaisonNeue-Bold-subset.woff") format("woff");
     font-weight: 500;
     font-display: swap;
     unicode-range: U+20-7E;
   }
   @font-face {
     font-family: "Maison Neue Mono";
-    src: url("/fonts/MaisonNeue-Mono-subset.woff") format("woff");
+    src: url("/fonts/MaisonNeue-Mono-subset.woff2") format("woff2"), url("/fonts/MaisonNeue-Mono-subset.woff") format("woff");
     font-weight: 300;
     font-display: optional;
     unicode-range: U+20-7E;
diff --git a/packages/dev-tools-pages/ts/globals.d.ts b/packages/dev-tools-pages/ts/globals.d.ts
index da026a198..07871a74b 100644
--- a/packages/dev-tools-pages/ts/globals.d.ts
+++ b/packages/dev-tools-pages/ts/globals.d.ts
@@ -1,6 +1,8 @@
 declare module 'whatwg-fetch';
 declare module 'react-document-title';
 
+declare var System: any;
+
 declare module '*.json' {
     const json: any;
     /* tslint:disable */
diff --git a/packages/dev-tools-pages/ts/highlight.tsx b/packages/dev-tools-pages/ts/highlight.tsx
new file mode 100644
index 000000000..0c4602d51
--- /dev/null
+++ b/packages/dev-tools-pages/ts/highlight.tsx
@@ -0,0 +1,6 @@
+const highlight = require('highlight.js/lib/highlight');
+const javascript = require('highlight.js/lib/languages/javascript');
+
+highlight.registerLanguage('javascript', javascript);
+
+export default highlight;
diff --git a/packages/dev-tools-pages/ts/index.tsx b/packages/dev-tools-pages/ts/index.tsx
deleted file mode 100644
index b185e270a..000000000
--- a/packages/dev-tools-pages/ts/index.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import * as React from 'react';
-import { render } from 'react-dom';
-import { Router, Link } from '@reach/router';
-
-import Trace from 'ts/pages/Trace';
-import Compiler from 'ts/pages/Compiler';
-import Cov from 'ts/pages/Cov';
-import Profiler from 'ts/pages/Profiler';
-
-const Index = (props: any) => (
-    <ul>
-        <li>
-            <Link to="/trace">sol-trace</Link>
-        </li>
-        <li>
-            <Link to="/compiler">sol-compiler</Link>
-        </li>
-        <li>
-            <Link to="/cov">sol-cov</Link>
-        </li>
-        <li>
-            <Link to="/profiler">sol-profiler</Link>
-        </li>
-    </ul>
-);
-
-const App = () => (
-    <Router>
-        <Trace path="/trace" />
-        <Compiler path="/compiler" />
-        <Cov path="/cov" />
-        <Profiler path="/profiler" />
-        <Index default />
-    </Router>
-);
-
-render(<App />, document.getElementById('app'));
diff --git a/packages/dev-tools-pages/ts/pages/Base.tsx b/packages/dev-tools-pages/ts/pages/Base.tsx
deleted file mode 100644
index 7bb578611..000000000
--- a/packages/dev-tools-pages/ts/pages/Base.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import * as React from 'react';
-
-import ThemeContext from 'ts/context';
-import GlobalStyles from 'ts/globalStyles';
-import MetaTags from 'ts/components/MetaTags';
-import Header from 'ts/components/Header';
-import Hero from 'ts/components/Hero';
-import Footer from 'ts/components/Footer';
-
-interface BaseProps {
-    context: any;
-    children: React.ReactNode;
-}
-
-function Base(props: BaseProps) {
-    return (
-        <ThemeContext.Provider value={props.context}>
-            <MetaTags />
-            <GlobalStyles />
-            <Header />
-            <Hero />
-            {props.children}
-            <Footer />
-        </ThemeContext.Provider>
-    );
-}
-
-export default Base;
diff --git a/packages/dev-tools-pages/ts/pages/Compiler.tsx b/packages/dev-tools-pages/ts/pages/Compiler.tsx
index 79c9f52e4..35c810cb3 100644
--- a/packages/dev-tools-pages/ts/pages/Compiler.tsx
+++ b/packages/dev-tools-pages/ts/pages/Compiler.tsx
@@ -1,7 +1,8 @@
 import * as React from 'react';
+import { render, hydrate } from 'react-dom';
 
 import context from 'ts/context/compiler';
-import Base from './Base';
+import Base from 'ts/components/Base';
 import Container from 'ts/components/Container';
 import Main from 'ts/components/Main';
 import ContentBlock from 'ts/components/ContentBlock';
@@ -11,7 +12,7 @@ import InlineCode from 'ts/components/InlineCode';
 import List from 'ts/components/List';
 import CompilerComponent from 'ts/components/Compiler';
 
-function Compiler(props: any) {
+function Compiler() {
     return (
         <Base context={context}>
             <Container>
@@ -52,4 +53,10 @@ const artifactAdapter = new SolCompilerArtifactAdapter(artifactsDir, contractsDi
     );
 }
 
-export default Compiler;
+const root = document.getElementById('app');
+
+if (root.hasChildNodes()) {
+    hydrate(<Compiler />, root);
+} else {
+    render(<Compiler />, root);
+}
diff --git a/packages/dev-tools-pages/ts/pages/Cov.tsx b/packages/dev-tools-pages/ts/pages/Cov.tsx
index b7405f8f9..e835e5c82 100644
--- a/packages/dev-tools-pages/ts/pages/Cov.tsx
+++ b/packages/dev-tools-pages/ts/pages/Cov.tsx
@@ -1,7 +1,8 @@
 import * as React from 'react';
+import { render, hydrate } from 'react-dom';
 
 import context from 'ts/context/cov';
-import Base from './Base';
+import Base from 'ts/components/Base';
 import Container from 'ts/components/Container';
 import Main from 'ts/components/Main';
 import ContentBlock from 'ts/components/ContentBlock';
@@ -11,7 +12,7 @@ import InlineCode from 'ts/components/InlineCode';
 import List from 'ts/components/List';
 import Intro from 'ts/components/Intro';
 
-function Cov(props: any) {
+function Cov() {
     return (
         <Base context={context}>
             <Container>
@@ -58,4 +59,10 @@ const artifactAdapter = new SolCompilerArtifactAdapter(artifactsDir, contractsDi
     );
 }
 
-export default Cov;
+const root = document.getElementById('app');
+
+if (root.hasChildNodes()) {
+    hydrate(<Cov />, root);
+} else {
+    render(<Cov />, root);
+}
diff --git a/packages/dev-tools-pages/ts/pages/Profiler.tsx b/packages/dev-tools-pages/ts/pages/Profiler.tsx
index d129d6427..9f8b46b9c 100644
--- a/packages/dev-tools-pages/ts/pages/Profiler.tsx
+++ b/packages/dev-tools-pages/ts/pages/Profiler.tsx
@@ -1,7 +1,8 @@
 import * as React from 'react';
+import { render, hydrate } from 'react-dom';
 
 import context from 'ts/context/profiler';
-import Base from './Base';
+import Base from 'ts/components/Base';
 import Container from 'ts/components/Container';
 import Main from 'ts/components/Main';
 import ContentBlock from 'ts/components/ContentBlock';
@@ -11,7 +12,7 @@ import InlineCode from 'ts/components/InlineCode';
 import List from 'ts/components/List';
 import Intro from 'ts/components/Intro';
 
-function Profiler(props: any) {
+function Profiler() {
     return (
         <Base context={context}>
             <Container>
@@ -58,4 +59,10 @@ const artifactAdapter = new SolCompilerArtifactAdapter(artifactsDir, contractsDi
     );
 }
 
-export default Profiler;
+const root = document.getElementById('app');
+
+if (root.hasChildNodes()) {
+    hydrate(<Profiler />, root);
+} else {
+    render(<Profiler />, root);
+}
diff --git a/packages/dev-tools-pages/ts/pages/Trace.tsx b/packages/dev-tools-pages/ts/pages/Trace.tsx
index 5dddf027e..be5acdac4 100644
--- a/packages/dev-tools-pages/ts/pages/Trace.tsx
+++ b/packages/dev-tools-pages/ts/pages/Trace.tsx
@@ -1,7 +1,8 @@
 import * as React from 'react';
+import { render, hydrate } from 'react-dom';
 
 import context from 'ts/context/trace';
-import Base from './Base';
+import Base from 'ts/components/Base';
 import Container from 'ts/components/Container';
 import Main from 'ts/components/Main';
 import ContentBlock from 'ts/components/ContentBlock';
@@ -11,7 +12,7 @@ import InlineCode from 'ts/components/InlineCode';
 import List from 'ts/components/List';
 import TraceComponent from 'ts/components/Trace';
 
-function Trace(props: any) {
+function Trace() {
     return (
         <Base context={context}>
             <TraceComponent />
@@ -52,4 +53,10 @@ const artifactAdapter = new SolCompilerArtifactAdapter(artifactsDir, contractsDi
     );
 }
 
-export default Trace;
+const root = document.getElementById('app');
+
+if (root.hasChildNodes()) {
+    hydrate(<Trace />, root);
+} else {
+    render(<Trace />, root);
+}
-- 
cgit v1.2.3


From 7ed95d3954086a6be97f9c3cc044d91068dcf6d2 Mon Sep 17 00:00:00 2001
From: August Skare <post@augustskare.no>
Date: Mon, 22 Oct 2018 08:27:41 +0200
Subject: don't shrink icons in footer

---
 packages/dev-tools-pages/ts/components/Footer.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'packages/dev-tools-pages/ts')

diff --git a/packages/dev-tools-pages/ts/components/Footer.tsx b/packages/dev-tools-pages/ts/components/Footer.tsx
index 15e6a5b86..873b65071 100644
--- a/packages/dev-tools-pages/ts/components/Footer.tsx
+++ b/packages/dev-tools-pages/ts/components/Footer.tsx
@@ -71,7 +71,7 @@ const Top = styled.div`
 
 const Icon = styled.div`
     margin-right: 1.3125rem;
-
+    flex-shrink: 0;
     ${media.small`margin-right: 0.9375rem`};
 `;
 
-- 
cgit v1.2.3


From 39fd3fd866b22580914ceef98e5488e970b833ee Mon Sep 17 00:00:00 2001
From: August Skare <post@augustskare.no>
Date: Mon, 22 Oct 2018 08:29:41 +0200
Subject: spacing adjustment in footer

---
 packages/dev-tools-pages/ts/components/Footer.tsx | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

(limited to 'packages/dev-tools-pages/ts')

diff --git a/packages/dev-tools-pages/ts/components/Footer.tsx b/packages/dev-tools-pages/ts/components/Footer.tsx
index 873b65071..df2d920ac 100644
--- a/packages/dev-tools-pages/ts/components/Footer.tsx
+++ b/packages/dev-tools-pages/ts/components/Footer.tsx
@@ -110,7 +110,12 @@ const ListItem = styled.li`
         ${media.small`margin-bottom: 1.875rem`};
     }
 
-    ${media.small`margin-bottom: 1.875rem`};
+    ${media.small`
+        margin-bottom: 1.875rem
+        :last-of-type {
+            margin-bottom: 0;
+        }
+    `};
 `;
 
 const Small = styled.small`
-- 
cgit v1.2.3


From d3c5c682968421de6a942e966b84d98d1b177338 Mon Sep 17 00:00:00 2001
From: August Skare <post@augustskare.no>
Date: Mon, 22 Oct 2018 08:40:07 +0200
Subject: remove padding on Trace component on small breakpoint

---
 packages/dev-tools-pages/ts/components/Trace.tsx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

(limited to 'packages/dev-tools-pages/ts')

diff --git a/packages/dev-tools-pages/ts/components/Trace.tsx b/packages/dev-tools-pages/ts/components/Trace.tsx
index 545e87d53..0fbf27c5d 100644
--- a/packages/dev-tools-pages/ts/components/Trace.tsx
+++ b/packages/dev-tools-pages/ts/components/Trace.tsx
@@ -102,7 +102,11 @@ const StyledSection =
     padding-top: 6.25rem;
     padding-bottom: 5.25rem;
     
-    ${media.small`background: none`};
+    ${media.small`
+        background: none
+        padding-top: 0;
+        padding-bottom: 0;
+    `};
 `;
 
 const Wrapper = styled(Container)`
-- 
cgit v1.2.3


From c1082b9b08e1a17b8385120e30726025ea676a39 Mon Sep 17 00:00:00 2001
From: August Skare <post@augustskare.no>
Date: Mon, 22 Oct 2018 08:40:38 +0200
Subject: spacing adjustments on contentblock and main components

---
 .../dev-tools-pages/ts/components/ContentBlock.tsx     | 18 +++++++++++++++++-
 packages/dev-tools-pages/ts/components/Main.tsx        |  8 ++++++++
 2 files changed, 25 insertions(+), 1 deletion(-)

(limited to 'packages/dev-tools-pages/ts')

diff --git a/packages/dev-tools-pages/ts/components/ContentBlock.tsx b/packages/dev-tools-pages/ts/components/ContentBlock.tsx
index 56d52a150..b80fd4550 100644
--- a/packages/dev-tools-pages/ts/components/ContentBlock.tsx
+++ b/packages/dev-tools-pages/ts/components/ContentBlock.tsx
@@ -1,19 +1,32 @@
 import * as React from 'react';
 import styled from 'styled-components';
 
+import { media } from 'ts/variables';
 import { Beta } from './Typography';
 
 const Base = styled.div`
     display: flex;
     align-items: flex-start;
     justify-content: space-between;
-    &:not(:last-of-type) {
+    :not(:last-of-type) {
         margin-bottom: 6.25rem;
     }
+    ${Beta} {
+        margin-bottom: 2.5rem;
+    }
+    ${media.small`
+        display: block;
+        :not(:last-of-type) {
+            margin-bottom: 3.125rem;
+        }
+    `};
 `;
 
 const Content = styled.div`
     width: 66.693548387%;
+    ${media.small`
+        width: 100%;
+    `};
 `;
 
 const Item = styled.div`
@@ -23,6 +36,9 @@ const Item = styled.div`
 
     &:not(:last-of-type) {
         margin-bottom: 2.5rem;
+        ${media.small`
+            margin-bottom: 1.875rem;
+        `};
     }
 `;
 
diff --git a/packages/dev-tools-pages/ts/components/Main.tsx b/packages/dev-tools-pages/ts/components/Main.tsx
index 8046abc91..97eb407b9 100644
--- a/packages/dev-tools-pages/ts/components/Main.tsx
+++ b/packages/dev-tools-pages/ts/components/Main.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import styled from 'styled-components';
 
+import { media } from 'ts/variables';
 import { withContext, Props } from './withContext';
 
 import { Alpha } from './Typography';
@@ -8,11 +9,18 @@ import { Alpha } from './Typography';
 const StyledMain = styled.div`
     padding-top: 6.25rem;
     padding-bottom: 6.25rem;
+    ${media.small`
+        padding-top: 2.5rem;
+        padding-bottom: 2.5rem;
+    `};
 `;
 
 const Title = styled(Alpha)`
     color: ${props => props.color};
     margin-bottom: 6.25rem;
+    ${media.small`
+        margin-bottom: 3.125rem;
+    `};
 `;
 
 interface MainProps extends Props {
-- 
cgit v1.2.3


From cacb8acf763ea0dc33af6925d8aeaa51f1006963 Mon Sep 17 00:00:00 2001
From: August Skare <post@augustskare.no>
Date: Mon, 22 Oct 2018 08:46:46 +0200
Subject: hero spacing adjustment on small screen

---
 packages/dev-tools-pages/ts/components/Hero.tsx | 12 ++++++++++++
 1 file changed, 12 insertions(+)

(limited to 'packages/dev-tools-pages/ts')

diff --git a/packages/dev-tools-pages/ts/components/Hero.tsx b/packages/dev-tools-pages/ts/components/Hero.tsx
index 5ba469fca..f52ce5bc9 100644
--- a/packages/dev-tools-pages/ts/components/Hero.tsx
+++ b/packages/dev-tools-pages/ts/components/Hero.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import styled from 'styled-components';
 
+import { media } from 'ts/variables';
 import { withContext, Props } from './withContext';
 import Button from './Button';
 import { Beta } from './Typography';
@@ -23,6 +24,8 @@ const StyledHero = styled.section`
     margin: 0 auto;
     padding-top: 9.375rem;
     padding-bottom: 2rem;
+    padding-left: 2.5rem;
+    padding-right: 2.5rem;
     max-width: 590px;
     min-height: min-content;
     max-height: 37.5rem;
@@ -33,10 +36,19 @@ const Subtitle = styled.h2`
     font-size: 3.75rem;
     line-height: 1.16;
     margin-bottom: 1.5rem;
+
+    ${media.small`
+        font-size: 2.25rem;
+        line-height: 1.1;
+        margin-bottom: 1.375rem;
+    `};
 `;
 
 const Tagline = styled(Beta)`
     margin-bottom: 2rem;
+    ${media.small`
+        margin-bottom: 1.25rem;
+    `};
 `;
 
 export default withContext(Hero);
-- 
cgit v1.2.3


From 6c39d498c2ec10377c84a6c7a830460ef2266c46 Mon Sep 17 00:00:00 2001
From: August Skare <post@augustskare.no>
Date: Mon, 22 Oct 2018 08:52:21 +0200
Subject: code fontsize on small screens

---
 packages/dev-tools-pages/ts/components/Code.tsx |  16 ++--
 packages/dev-tools-pages/ts/globalStyles.tsx    | 122 ++++++++++++------------
 2 files changed, 70 insertions(+), 68 deletions(-)

(limited to 'packages/dev-tools-pages/ts')

diff --git a/packages/dev-tools-pages/ts/components/Code.tsx b/packages/dev-tools-pages/ts/components/Code.tsx
index 72b3e1af7..63c9d369b 100644
--- a/packages/dev-tools-pages/ts/components/Code.tsx
+++ b/packages/dev-tools-pages/ts/components/Code.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import styled from 'styled-components';
-import { colors } from '../variables';
 
+import { colors } from '../variables';
 import BaseButton from './Button';
 
 interface CodeProps {
@@ -26,13 +26,13 @@ const Base =
     styled.div <
     CodeProps >
     `
-  color: ${props => (props.language === undefined ? colors.white : 'inherit')};
-  background-color: ${props => (props.language === undefined ? colors.black : colors.lightGray)};
-  white-space: ${props => (props.language === undefined ? 'nowrap' : '')};
-  position: relative;
-  &:hover ${Button} {
-    opacity: 1;
-  }
+    color: ${props => (props.language === undefined ? colors.white : 'inherit')};
+    background-color: ${props => (props.language === undefined ? colors.black : colors.lightGray)};
+    white-space: ${props => (props.language === undefined ? 'nowrap' : '')};
+    position: relative;
+    &:hover ${Button} {
+        opacity: 1;
+    }
 `;
 
 const StyledCode = styled.code`
diff --git a/packages/dev-tools-pages/ts/globalStyles.tsx b/packages/dev-tools-pages/ts/globalStyles.tsx
index 13ecde7aa..f51ea4b1d 100644
--- a/packages/dev-tools-pages/ts/globalStyles.tsx
+++ b/packages/dev-tools-pages/ts/globalStyles.tsx
@@ -6,75 +6,77 @@ import hljsStyles from 'highlight.js/styles/github-gist.css';
 import { withContext } from 'ts/components/withContext';
 
 const BaseStyles = createGlobalStyle`
-  ${styledNormalize}
-  ${hljsStyles}
+    ${styledNormalize}
+    ${hljsStyles}
 
-  @font-face {
-    font-family: "Maison Neue";
-    src: url("/fonts/MaisonNeue-Book-subset.woff2") format("woff2"), url("/fonts/MaisonNeue-Book-subset.woff") format("woff");
-    font-weight: 300;
-    font-display: swap;
-    unicode-range: U+20-7E;
-  }
-  @font-face {
-    font-family: "Maison Neue";
-    src: url("/fonts/MaisonNeue-Bold-subset.woff2") format("woff2"), url("/fonts/MaisonNeue-Bold-subset.woff") format("woff");
-    font-weight: 500;
-    font-display: swap;
-    unicode-range: U+20-7E;
-  }
-  @font-face {
-    font-family: "Maison Neue Mono";
-    src: url("/fonts/MaisonNeue-Mono-subset.woff2") format("woff2"), url("/fonts/MaisonNeue-Mono-subset.woff") format("woff");
-    font-weight: 300;
-    font-display: optional;
-    unicode-range: U+20-7E;
-  }
-
-  html {
-    font-size: 100%;
-    box-sizing: border-box;
-  }
-  
-  *, *::before, *::after {
-    box-sizing: inherit;
-  }
-  
-  body {
-    font-family: "Maison Neue", system-ui, sans-serif;
-    font-weight: 300;
-    font-size: 1rem;
-    line-height: 1.8;
+    @font-face {
+        font-family: "Maison Neue";
+        src: url("/fonts/MaisonNeue-Book-subset.woff2") format("woff2"), url("/fonts/MaisonNeue-Book-subset.woff") format("woff");
+        font-weight: 300;
+        font-display: swap;
+        unicode-range: U+20-7E;
+    }
+    @font-face {
+        font-family: "Maison Neue";
+        src: url("/fonts/MaisonNeue-Bold-subset.woff2") format("woff2"), url("/fonts/MaisonNeue-Bold-subset.woff") format("woff");
+        font-weight: 500;
+        font-display: swap;
+        unicode-range: U+20-7E;
+    }
+    @font-face {
+        font-family: "Maison Neue Mono";
+        src: url("/fonts/MaisonNeue-Mono-subset.woff2") format("woff2"), url("/fonts/MaisonNeue-Mono-subset.woff") format("woff");
+        font-weight: 300;
+        font-display: optional;
+        unicode-range: U+20-7E;
+    }
 
-    ${media.small`font-size: 0.875rem;`};
+    html {
+        font-size: 100%;
+        box-sizing: border-box;
+    }
+    
+    *, *::before, *::after {
+        box-sizing: inherit;
+    }
+    
+    body {
+        font-family: "Maison Neue", system-ui, sans-serif;
+        font-weight: 300;
+        font-size: 1rem;
+        line-height: 1.8;
 
-  }
+        ${media.small`font-size: 0.875rem;`};
+    }
 
-  a {
-  color: ${(props: any) => props.colors.link};
-    text-decoration: none; 
+    a {
+        color: ${(props: any) => props.colors.link};
+        text-decoration: none; 
 
-    &:hover {
-      color: red; //what should this be?
+        &:hover {
+            color: red; //what should this be?
+        }
+    }
+    
+    h1, h2, h3, h4 {
+        font-weight: 500;
+        margin: 0;
     }
-  }
-  
-  h1, h2, h3, h4 {
-    font-weight: 500;
-    margin: 0;
-  }
 
-  p {
-    margin-top: 0;
-    margin-bottom: 1em;
-    &:not([class]):last-of-type {
-      margin-bottom: 0;
+    p {
+        margin-top: 0;
+        margin-bottom: 1em;
+        &:not([class]):last-of-type {
+            margin-bottom: 0;
+        }
     }
-  }
 
-  code {
-    font-family: "Maison Neue Mono", monospace;
-  }
+    code {
+        font-family: "Maison Neue Mono", monospace;
+        ${media.small`
+            font-size: .75rem;
+        `}
+    }
 `;
 
 export default withContext(BaseStyles);
-- 
cgit v1.2.3


From bf7443c985f2b26458586ece6661dd3e13215b79 Mon Sep 17 00:00:00 2001
From: August Skare <post@augustskare.no>
Date: Mon, 22 Oct 2018 09:02:59 +0200
Subject: button styling on small screens

---
 packages/dev-tools-pages/ts/components/Button.tsx | 7 +++++++
 1 file changed, 7 insertions(+)

(limited to 'packages/dev-tools-pages/ts')

diff --git a/packages/dev-tools-pages/ts/components/Button.tsx b/packages/dev-tools-pages/ts/components/Button.tsx
index 2d0fbc353..eae6aaf54 100644
--- a/packages/dev-tools-pages/ts/components/Button.tsx
+++ b/packages/dev-tools-pages/ts/components/Button.tsx
@@ -1,6 +1,7 @@
 import styled from 'styled-components';
 import { colors } from '../variables';
 
+import { media } from 'ts/variables';
 import { withContext, Props } from './withContext';
 
 interface ButtonProps extends Props {
@@ -22,6 +23,12 @@ const Button =
   border-radius: 5rem;
   padding: ${props => (props.large ? '1.125rem 2.375rem' : '.5625rem 1.25rem')};
   display: inline-block;
+  ${props =>
+      props.large &&
+      media.small`
+    font-size: 1rem;
+    padding: .875rem 1.5rem;
+  `}
 `;
 
 export default withContext(Button);
-- 
cgit v1.2.3


From 15a3c234c552c3e32e76411acaefa49f312c0aed Mon Sep 17 00:00:00 2001
From: August Skare <post@augustskare.no>
Date: Mon, 22 Oct 2018 09:05:07 +0200
Subject: dont shrink icons in trace component

---
 packages/dev-tools-pages/ts/components/Trace.tsx | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

(limited to 'packages/dev-tools-pages/ts')

diff --git a/packages/dev-tools-pages/ts/components/Trace.tsx b/packages/dev-tools-pages/ts/components/Trace.tsx
index 0fbf27c5d..30fdb7066 100644
--- a/packages/dev-tools-pages/ts/components/Trace.tsx
+++ b/packages/dev-tools-pages/ts/components/Trace.tsx
@@ -39,7 +39,7 @@ function Trace(props: Props) {
                                     completely in the dark about its exact location.
                                 </p>
                             </Copy>
-                            <NoLocation />
+                            <Icon as={NoLocation} />
                         </Item>
 
                         <Item>
@@ -50,7 +50,7 @@ function Trace(props: Props) {
                                     the failing line of code quickly becomes a daunting task.
                                 </p>
                             </Copy>
-                            <TimeConsuming />
+                            <Icon as={TimeConsuming} />
                         </Item>
                     </List>
                 </Block>
@@ -72,7 +72,7 @@ function Trace(props: Props) {
                                     from.
                                 </p>
                             </Copy>
-                            <ExactLocation />
+                            <Icon as={ExactLocation} />
                         </Item>
 
                         <Item>
@@ -83,7 +83,7 @@ function Trace(props: Props) {
                                     on linen X of contract Y", it drastically improves the developer experience.
                                 </p>
                             </Copy>
-                            <TimeSaving />
+                            <Icon as={TimeSaving} />
                         </Item>
                     </List>
                 </Block>
@@ -189,4 +189,8 @@ const Copy = styled.div`
     ${media.small`margin-right: 2.0625rem;`};
 `;
 
+const Icon = styled.div`
+    flex-shrink: 0;
+`;
+
 export default withContext(Trace);
-- 
cgit v1.2.3


From 12087b6b70862a7b5d1954119ac5b5a06e6179f0 Mon Sep 17 00:00:00 2001
From: August Skare <post@augustskare.no>
Date: Mon, 22 Oct 2018 09:11:37 +0200
Subject: ligt theme on code

---
 packages/dev-tools-pages/ts/components/Code.tsx  | 8 +++++---
 packages/dev-tools-pages/ts/components/Trace.tsx | 2 +-
 2 files changed, 6 insertions(+), 4 deletions(-)

(limited to 'packages/dev-tools-pages/ts')

diff --git a/packages/dev-tools-pages/ts/components/Code.tsx b/packages/dev-tools-pages/ts/components/Code.tsx
index 63c9d369b..31ab421be 100644
--- a/packages/dev-tools-pages/ts/components/Code.tsx
+++ b/packages/dev-tools-pages/ts/components/Code.tsx
@@ -7,6 +7,7 @@ import BaseButton from './Button';
 interface CodeProps {
     children: React.ReactNode;
     language?: string;
+    light?: boolean;
 }
 
 interface CodeState {
@@ -27,7 +28,8 @@ const Base =
     CodeProps >
     `
     color: ${props => (props.language === undefined ? colors.white : 'inherit')};
-    background-color: ${props => (props.language === undefined ? colors.black : colors.lightGray)};
+    background-color: ${props =>
+        props.light ? 'rgba(255,255,255,.15)' : props.language === undefined ? colors.black : colors.lightGray};
     white-space: ${props => (props.language === undefined ? 'nowrap' : '')};
     position: relative;
     &:hover ${Button} {
@@ -92,10 +94,10 @@ class Code extends React.Component<CodeProps, CodeState> {
     };
 
     render() {
-        const { language, children } = this.props;
+        const { language, light, children } = this.props;
 
         return (
-            <Base language={language}>
+            <Base language={language} light={light}>
                 <StyledPre>
                     {this.state.hlCode !== undefined ? (
                         <StyledCode dangerouslySetInnerHTML={{ __html: this.state.hlCode }} />
diff --git a/packages/dev-tools-pages/ts/components/Trace.tsx b/packages/dev-tools-pages/ts/components/Trace.tsx
index 30fdb7066..4d399daa5 100644
--- a/packages/dev-tools-pages/ts/components/Trace.tsx
+++ b/packages/dev-tools-pages/ts/components/Trace.tsx
@@ -28,7 +28,7 @@ function Trace(props: Props) {
                         Every time an Ethereum transaction fails, it's extremely hard to trace down the troublemaking
                         line of code. The only hint you'll get is a generic error.
                     </MainCopy>
-                    <Code>Error: VM Exception while processing transaction: rever</Code>
+                    <Code light>Error: VM Exception while processing transaction: rever</Code>
 
                     <List>
                         <Item>
-- 
cgit v1.2.3


From 68c18181395986035a5c8e1ff2a83926f34fac60 Mon Sep 17 00:00:00 2001
From: August Skare <post@augustskare.no>
Date: Mon, 22 Oct 2018 09:20:54 +0200
Subject: breakout container for small screens

---
 .../dev-tools-pages/ts/components/Breakout.tsx     | 12 +++
 packages/dev-tools-pages/ts/components/Code.tsx    |  2 +-
 packages/dev-tools-pages/ts/components/Tabs.tsx    | 98 +++++++++++-----------
 3 files changed, 62 insertions(+), 50 deletions(-)
 create mode 100644 packages/dev-tools-pages/ts/components/Breakout.tsx

(limited to 'packages/dev-tools-pages/ts')

diff --git a/packages/dev-tools-pages/ts/components/Breakout.tsx b/packages/dev-tools-pages/ts/components/Breakout.tsx
new file mode 100644
index 000000000..fb76c8c29
--- /dev/null
+++ b/packages/dev-tools-pages/ts/components/Breakout.tsx
@@ -0,0 +1,12 @@
+import styled from 'styled-components';
+
+import { media } from 'ts/variables';
+
+const Breakout = styled.div`
+    ${media.small`
+        margin-left: -30px;
+        width: calc(100% + 60px);
+  `};
+`;
+
+export default Breakout;
diff --git a/packages/dev-tools-pages/ts/components/Code.tsx b/packages/dev-tools-pages/ts/components/Code.tsx
index 31ab421be..02bd0382e 100644
--- a/packages/dev-tools-pages/ts/components/Code.tsx
+++ b/packages/dev-tools-pages/ts/components/Code.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import styled from 'styled-components';
 
-import { colors } from '../variables';
+import { colors } from 'ts/variables';
 import BaseButton from './Button';
 
 interface CodeProps {
diff --git a/packages/dev-tools-pages/ts/components/Tabs.tsx b/packages/dev-tools-pages/ts/components/Tabs.tsx
index 64f87bea3..b51970a7e 100644
--- a/packages/dev-tools-pages/ts/components/Tabs.tsx
+++ b/packages/dev-tools-pages/ts/components/Tabs.tsx
@@ -1,81 +1,81 @@
 import * as React from 'react';
 import styled from 'styled-components';
-import { colors } from '../variables';
 
-import { Tabs as ReactTabs, Tab, TabList, TabPanel } from 'react-tabs'
-
-import {withContext, Props} from './withContext';
+import { colors } from 'ts/variables';
+import { Tabs as ReactTabs, Tab, TabList, TabPanel } from 'react-tabs';
+import Breakout from './Breakout';
+import { withContext, Props } from './withContext';
 
 const StyledTabList = styled(TabList)`
-  text-transform: uppercase;
-  list-style: none;
-  margin: 0;
-  padding: 0;
-  overflow: hidden;  
+    text-transform: uppercase;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
 `;
 
 const StyledTab = styled(Tab)`
-  height: 2.5rem;
-  padding-left: 1rem;
-  padding-right: 1rem;
-  display: flex;
-  justify-content: space-around;
-  align-items: center;
-  float: left;
-  &:not(:first-of-type) {
-    margin-left: .25rem;
-  }
-  &:focus, &:hover {
-    color: red;
-    outline: 0;
-  }
+    height: 2.5rem;
+    padding-left: 1rem;
+    padding-right: 1rem;
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    float: left;
+    &:not(:first-of-type) {
+        margin-left: 0.25rem;
+    }
+    &:focus,
+    &:hover {
+        color: red;
+        outline: 0;
+    }
 `;
 
-const Root = styled.div<{primaryColor: string;}>`
+const Root =
+    styled.div <
+    { primaryColor: string } >
+    `
   ${StyledTab} {
     background-color: ${props => props.primaryColor};
   }
   ${StyledTab}[aria-selected="true"] {
     background-color: ${colors.gray};
-  } 
+  }
 `;
 
 interface TabsProps extends Props {
-  children: React.ReactNode;
+    children: React.ReactNode;
 }
 
 function Tabs(props: TabsProps) {
-  return (
-    <Root primaryColor={props.colors.secondary}>
-      <ReactTabs>
-        <StyledTabList>
-          { React.Children.map(props.children, child => {
-            const {props} = React.cloneElement(child as React.ReactElement<any>);
-            return <StyledTab>{props.title}</StyledTab>
-          }) }
-        </StyledTabList>
+    return (
+        <Breakout>
+            <Root primaryColor={props.colors.secondary}>
+                <ReactTabs>
+                    <StyledTabList>
+                        {React.Children.map(props.children, child => {
+                            const { props } = React.cloneElement(child as React.ReactElement<any>);
+                            return <StyledTab>{props.title}</StyledTab>;
+                        })}
+                    </StyledTabList>
 
-        { React.Children.map(props.children, child => (
-          <TabPanel>{child}</TabPanel>
-        )) }
-      </ReactTabs>
-    </Root>
-  )
+                    {React.Children.map(props.children, child => <TabPanel>{child}</TabPanel>)}
+                </ReactTabs>
+            </Root>
+        </Breakout>
+    );
 }
 
 interface TabBlockProps {
-  title: string;
-  children: React.ReactNode;
+    title: string;
+    children: React.ReactNode;
 }
 
 function TabBlock(props: TabBlockProps) {
-  return (
-    <React.Fragment>
-      {props.children}
-    </React.Fragment>
-  )
+    return <React.Fragment>{props.children}</React.Fragment>;
 }
 
 const ContextTabs = withContext(Tabs);
 
-export {ContextTabs as Tabs, TabBlock};
\ No newline at end of file
+export { ContextTabs as Tabs, TabBlock };
-- 
cgit v1.2.3


From 6066db8f423ea246ecd699a934889c893689df56 Mon Sep 17 00:00:00 2001
From: Megan Pearson <megan.e.pearson@gmail.com>
Date: Mon, 22 Oct 2018 09:53:22 +0200
Subject: Responsive list

---
 packages/dev-tools-pages/ts/components/List.tsx | 6 ++++++
 1 file changed, 6 insertions(+)

(limited to 'packages/dev-tools-pages/ts')

diff --git a/packages/dev-tools-pages/ts/components/List.tsx b/packages/dev-tools-pages/ts/components/List.tsx
index df1fdc53b..3041fc475 100644
--- a/packages/dev-tools-pages/ts/components/List.tsx
+++ b/packages/dev-tools-pages/ts/components/List.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import styled from 'styled-components';
+import { media } from '../variables';
 
 const StyledList = styled.ul`
     list-style-type: none;
@@ -17,6 +18,11 @@ const StyledItem = styled.li`
         transform: rotate(45deg);
         margin-right: 1.09375rem;
     }
+    :not(:last-child) {
+        margin-bottom: 0.5625rem;
+
+        ${media.small`margin-bottom: 0.375rem`};
+    }
 `;
 
 interface ListProps {
-- 
cgit v1.2.3


From 49beb6b7a3f924508a4169d12ab0aedcf1a51f15 Mon Sep 17 00:00:00 2001
From: Megan Pearson <megan.e.pearson@gmail.com>
Date: Mon, 22 Oct 2018 09:53:58 +0200
Subject: Add light prop to code

---
 packages/dev-tools-pages/ts/components/Trace.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'packages/dev-tools-pages/ts')

diff --git a/packages/dev-tools-pages/ts/components/Trace.tsx b/packages/dev-tools-pages/ts/components/Trace.tsx
index 4d399daa5..5e52ee154 100644
--- a/packages/dev-tools-pages/ts/components/Trace.tsx
+++ b/packages/dev-tools-pages/ts/components/Trace.tsx
@@ -61,7 +61,7 @@ function Trace(props: Props) {
                         Sol-trace will give you full stack traces, including contract names, line numbers and code
                         snippets, every time you encounter an error.
                     </MainCopy>
-                    <Code>Error: VM Exception while processing transaction: rever</Code>
+                    <Code light>Error: VM Exception while processing transaction: rever</Code>
 
                     <List>
                         <Item>
-- 
cgit v1.2.3


From dfa03feb43e9398dbfda8aebf96b6fb63dff0989 Mon Sep 17 00:00:00 2001
From: Megan Pearson <megan.e.pearson@gmail.com>
Date: Mon, 22 Oct 2018 11:55:02 +0200
Subject: Responsive Intro

---
 packages/dev-tools-pages/ts/components/Intro.tsx | 35 +++++++++++++++---------
 1 file changed, 22 insertions(+), 13 deletions(-)

(limited to 'packages/dev-tools-pages/ts')

diff --git a/packages/dev-tools-pages/ts/components/Intro.tsx b/packages/dev-tools-pages/ts/components/Intro.tsx
index cddee5b6f..597dddce0 100644
--- a/packages/dev-tools-pages/ts/components/Intro.tsx
+++ b/packages/dev-tools-pages/ts/components/Intro.tsx
@@ -1,30 +1,35 @@
 import * as React from 'react';
 import styled from 'styled-components';
-import { colors } from '../variables';
+import { media, colors } from '../variables';
 
 import { Alpha, Beta } from './Typography';
+import Breakout from './Breakout';
+import Code from './Code';
 
 const Main = styled.div`
     background-color: ${colors.lightGray};
     padding: 6.25rem;
     display: flex;
     justify-content: space-between;
+
+    ${media.small`
+        padding: 2.5rem 1.875rem
+        display: block;     
+    `};
 `;
 
 const Title = styled(Alpha)`
     margin-bottom: 2.5rem;
+
+    ${media.small`margin-bottom: 2.25rem;`};
 `;
 
 const Content = styled.div`
     max-width: 25.9375rem;
     display: flex;
     flex-direction: column;
-`;
 
-const Code = styled.div`
-    background-color: ${colors.darkGray};
-    width: 520px;
-    height: 350px;
+    ${media.small`margin-bottom: 2.25rem;`};
 `;
 
 interface IntroProps {
@@ -34,13 +39,17 @@ interface IntroProps {
 
 function Intro(props: IntroProps) {
     return (
-        <Main>
-            <Content>
-                <Title>{props.title}</Title>
-                <Beta as="div">{props.children}</Beta>
-            </Content>
-            <Code />
-        </Main>
+        <Breakout>
+            <Main>
+                <Content>
+                    <Title>{props.title}</Title>
+                    <Beta as="div">{props.children}</Beta>
+                </Content>
+                <Breakout>
+                    <Code>Function execute transaction Function execute transaction Function execute transaction</Code>
+                </Breakout>
+            </Main>
+        </Breakout>
     );
 }
 
-- 
cgit v1.2.3


From 47b281b754a77a2104d39bafa5ea49584f8840cc Mon Sep 17 00:00:00 2001
From: Megan Pearson <megan.e.pearson@gmail.com>
Date: Fri, 19 Oct 2018 09:37:14 +0200
Subject: Implements color variables and updates components

---
 packages/dev-tools-pages/ts/components/Button.tsx     |  3 ++-
 packages/dev-tools-pages/ts/components/Code.tsx       |  5 +++--
 packages/dev-tools-pages/ts/components/Compiler.tsx   |  3 ++-
 packages/dev-tools-pages/ts/components/InlineCode.tsx |  3 ++-
 packages/dev-tools-pages/ts/components/Intro.tsx      |  6 +++---
 packages/dev-tools-pages/ts/components/Tabs.tsx       |  4 +++-
 packages/dev-tools-pages/ts/components/Trace.tsx      |  3 ++-
 packages/dev-tools-pages/ts/variables.tsx             | 12 ++++++++++++
 8 files changed, 29 insertions(+), 10 deletions(-)
 create mode 100644 packages/dev-tools-pages/ts/variables.tsx

(limited to 'packages/dev-tools-pages/ts')

diff --git a/packages/dev-tools-pages/ts/components/Button.tsx b/packages/dev-tools-pages/ts/components/Button.tsx
index e676961c8..fb36f7669 100644
--- a/packages/dev-tools-pages/ts/components/Button.tsx
+++ b/packages/dev-tools-pages/ts/components/Button.tsx
@@ -1,4 +1,5 @@
 import styled from 'styled-components';
+import variables from '../variables';
 
 import { withContext, Props } from './withContext';
 
@@ -16,7 +17,7 @@ const Button =
   white-space: nowrap;
   vertical-align: middle;
   background-color: ${props => props.colors.secondary};
-  color: #000;
+  color: ${variables.colors.black};
   border: 0;
   border-radius: 5rem;
   padding: ${props => (props.large ? '1.125rem 2.375rem' : '.5625rem 1.25rem')};
diff --git a/packages/dev-tools-pages/ts/components/Code.tsx b/packages/dev-tools-pages/ts/components/Code.tsx
index 074914c2a..146187595 100644
--- a/packages/dev-tools-pages/ts/components/Code.tsx
+++ b/packages/dev-tools-pages/ts/components/Code.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import styled from 'styled-components';
+import variables from '../variables';
 
 import BaseButton from './Button';
 
@@ -25,8 +26,8 @@ const Base =
     styled.div <
     CodeProps >
     `
-  color: ${props => (props.language === undefined ? '#FFF' : 'inherit')};
-  background-color: ${props => (props.language === undefined ? '#000' : '#F1F4F5')};
+  color: ${props => (props.language === undefined ? variables.colors.white : 'inherit')};
+  background-color: ${props => (props.language === undefined ? variables.colors.black : variables.colors.lightGray)};
   white-space: ${props => (props.language === undefined ? 'nowrap' : '')};
   position: relative;
   &:hover ${Button} {
diff --git a/packages/dev-tools-pages/ts/components/Compiler.tsx b/packages/dev-tools-pages/ts/components/Compiler.tsx
index 6dcfda70c..fcdbb6bfe 100644
--- a/packages/dev-tools-pages/ts/components/Compiler.tsx
+++ b/packages/dev-tools-pages/ts/components/Compiler.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import styled from 'styled-components';
+import variables from '../variables';
 
 import InlineCode from './InlineCode';
 
@@ -13,7 +14,7 @@ const Cards = styled.dl`
 `;
 
 const Card = styled.div`
-    background-color: #f1f4f5;
+    background-color: ${variables.colors.lightGray};
     padding: 3.125rem;
     padding-bottom: 2.5rem;
 `;
diff --git a/packages/dev-tools-pages/ts/components/InlineCode.tsx b/packages/dev-tools-pages/ts/components/InlineCode.tsx
index 037cfa675..f8aad8795 100644
--- a/packages/dev-tools-pages/ts/components/InlineCode.tsx
+++ b/packages/dev-tools-pages/ts/components/InlineCode.tsx
@@ -1,7 +1,8 @@
 import styled from 'styled-components';
+import variables from '../variables';
 
 const InlineCode = styled.code`
-    background-color: #eceff9;
+    background-color: ${variables.colors.blueGray}
     padding: 0.1875rem;
 `;
 
diff --git a/packages/dev-tools-pages/ts/components/Intro.tsx b/packages/dev-tools-pages/ts/components/Intro.tsx
index c16c888b7..2d4a30f9f 100644
--- a/packages/dev-tools-pages/ts/components/Intro.tsx
+++ b/packages/dev-tools-pages/ts/components/Intro.tsx
@@ -1,10 +1,11 @@
 import * as React from 'react';
 import styled from 'styled-components';
+import variables from '../variables';
 
 import { Alpha, Beta } from './Typography';
 
 const Main = styled.div`
-    background-color: #f1f4f5;
+    background-color: ${variables.colors.lightGray};
     padding: 6.25rem;
     display: flex;
     justify-content: space-between;
@@ -16,13 +17,12 @@ const Title = styled(Alpha)`
 
 const Content = styled.div`
     max-width: 25.9375rem;
-
     display: flex;
     flex-direction: column;
 `;
 
 const Code = styled.div`
-    background-color: #e9eced;
+    background-color: ${variables.colors.darkGray};
     width: 520px;
     height: 350px;
 `;
diff --git a/packages/dev-tools-pages/ts/components/Tabs.tsx b/packages/dev-tools-pages/ts/components/Tabs.tsx
index 1efbe1f61..b36b354f3 100644
--- a/packages/dev-tools-pages/ts/components/Tabs.tsx
+++ b/packages/dev-tools-pages/ts/components/Tabs.tsx
@@ -1,5 +1,7 @@
 import * as React from 'react';
 import styled from 'styled-components';
+import variables from '../variables';
+
 import { Tabs as ReactTabs, Tab, TabList, TabPanel } from 'react-tabs'
 
 import {withContext, Props} from './withContext';
@@ -34,7 +36,7 @@ const Root = styled.div<{primaryColor: string;}>`
     background-color: ${props => props.primaryColor};
   }
   ${StyledTab}[aria-selected="true"] {
-    background-color: #F1F2F7;
+    background-color: ${variables.colors.gray};
   } 
 `;
 
diff --git a/packages/dev-tools-pages/ts/components/Trace.tsx b/packages/dev-tools-pages/ts/components/Trace.tsx
index 50bbd449a..98695177d 100644
--- a/packages/dev-tools-pages/ts/components/Trace.tsx
+++ b/packages/dev-tools-pages/ts/components/Trace.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import styled from 'styled-components';
+import variables from '../variables';
 
 import { withContext, Props } from './withContext';
 import { Alpha, Beta, Gamma } from './Typography';
@@ -97,7 +98,7 @@ const StyledSection =
     `
     max-width: 90rem;
     margin: 0 auto;
-    background: linear-gradient(to right, #000 50%, ${props => props.background} 50%);
+    background: linear-gradient(to right, ${variables.colors.black} 50%, ${props => props.background} 50%);
     padding-top: 6.25rem;
     padding-bottom: 5.25rem;
 `;
diff --git a/packages/dev-tools-pages/ts/variables.tsx b/packages/dev-tools-pages/ts/variables.tsx
new file mode 100644
index 000000000..8590547df
--- /dev/null
+++ b/packages/dev-tools-pages/ts/variables.tsx
@@ -0,0 +1,12 @@
+const variables = {
+    colors: {
+        black: '#000000',
+        white: '#FFFFFF',
+        lightGray: '#F1F4F5',
+        gray: '#F1F2F7',
+        darkGray: '#E9ECED',
+        blueGray: '#ECEFF9',
+    },
+};
+
+export default variables;
-- 
cgit v1.2.3


From ee3538262d2d736168324a3f60a49cd87d65abb1 Mon Sep 17 00:00:00 2001
From: Megan Pearson <megan.e.pearson@gmail.com>
Date: Fri, 19 Oct 2018 11:32:59 +0200
Subject: Changed name of export to colors and updates components

---
 packages/dev-tools-pages/ts/components/Button.tsx     | 4 ++--
 packages/dev-tools-pages/ts/components/Code.tsx       | 6 +++---
 packages/dev-tools-pages/ts/components/Compiler.tsx   | 4 ++--
 packages/dev-tools-pages/ts/components/InlineCode.tsx | 4 ++--
 packages/dev-tools-pages/ts/components/Intro.tsx      | 6 +++---
 packages/dev-tools-pages/ts/components/Tabs.tsx       | 4 ++--
 packages/dev-tools-pages/ts/components/Trace.tsx      | 8 ++++----
 packages/dev-tools-pages/ts/variables.tsx             | 6 ++++--
 8 files changed, 22 insertions(+), 20 deletions(-)

(limited to 'packages/dev-tools-pages/ts')

diff --git a/packages/dev-tools-pages/ts/components/Button.tsx b/packages/dev-tools-pages/ts/components/Button.tsx
index fb36f7669..2d0fbc353 100644
--- a/packages/dev-tools-pages/ts/components/Button.tsx
+++ b/packages/dev-tools-pages/ts/components/Button.tsx
@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import variables from '../variables';
+import { colors } from '../variables';
 
 import { withContext, Props } from './withContext';
 
@@ -17,7 +17,7 @@ const Button =
   white-space: nowrap;
   vertical-align: middle;
   background-color: ${props => props.colors.secondary};
-  color: ${variables.colors.black};
+  color: ${colors.black};
   border: 0;
   border-radius: 5rem;
   padding: ${props => (props.large ? '1.125rem 2.375rem' : '.5625rem 1.25rem')};
diff --git a/packages/dev-tools-pages/ts/components/Code.tsx b/packages/dev-tools-pages/ts/components/Code.tsx
index 146187595..72b3e1af7 100644
--- a/packages/dev-tools-pages/ts/components/Code.tsx
+++ b/packages/dev-tools-pages/ts/components/Code.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import styled from 'styled-components';
-import variables from '../variables';
+import { colors } from '../variables';
 
 import BaseButton from './Button';
 
@@ -26,8 +26,8 @@ const Base =
     styled.div <
     CodeProps >
     `
-  color: ${props => (props.language === undefined ? variables.colors.white : 'inherit')};
-  background-color: ${props => (props.language === undefined ? variables.colors.black : variables.colors.lightGray)};
+  color: ${props => (props.language === undefined ? colors.white : 'inherit')};
+  background-color: ${props => (props.language === undefined ? colors.black : colors.lightGray)};
   white-space: ${props => (props.language === undefined ? 'nowrap' : '')};
   position: relative;
   &:hover ${Button} {
diff --git a/packages/dev-tools-pages/ts/components/Compiler.tsx b/packages/dev-tools-pages/ts/components/Compiler.tsx
index fcdbb6bfe..bda29dc1f 100644
--- a/packages/dev-tools-pages/ts/components/Compiler.tsx
+++ b/packages/dev-tools-pages/ts/components/Compiler.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import styled from 'styled-components';
-import variables from '../variables';
+import { colors } from '../variables';
 
 import InlineCode from './InlineCode';
 
@@ -14,7 +14,7 @@ const Cards = styled.dl`
 `;
 
 const Card = styled.div`
-    background-color: ${variables.colors.lightGray};
+    background-color: ${colors.lightGray};
     padding: 3.125rem;
     padding-bottom: 2.5rem;
 `;
diff --git a/packages/dev-tools-pages/ts/components/InlineCode.tsx b/packages/dev-tools-pages/ts/components/InlineCode.tsx
index f8aad8795..bfbaeb395 100644
--- a/packages/dev-tools-pages/ts/components/InlineCode.tsx
+++ b/packages/dev-tools-pages/ts/components/InlineCode.tsx
@@ -1,8 +1,8 @@
 import styled from 'styled-components';
-import variables from '../variables';
+import { colors } from '../variables';
 
 const InlineCode = styled.code`
-    background-color: ${variables.colors.blueGray}
+    background-color: ${colors.blueGray}
     padding: 0.1875rem;
 `;
 
diff --git a/packages/dev-tools-pages/ts/components/Intro.tsx b/packages/dev-tools-pages/ts/components/Intro.tsx
index 2d4a30f9f..cddee5b6f 100644
--- a/packages/dev-tools-pages/ts/components/Intro.tsx
+++ b/packages/dev-tools-pages/ts/components/Intro.tsx
@@ -1,11 +1,11 @@
 import * as React from 'react';
 import styled from 'styled-components';
-import variables from '../variables';
+import { colors } from '../variables';
 
 import { Alpha, Beta } from './Typography';
 
 const Main = styled.div`
-    background-color: ${variables.colors.lightGray};
+    background-color: ${colors.lightGray};
     padding: 6.25rem;
     display: flex;
     justify-content: space-between;
@@ -22,7 +22,7 @@ const Content = styled.div`
 `;
 
 const Code = styled.div`
-    background-color: ${variables.colors.darkGray};
+    background-color: ${colors.darkGray};
     width: 520px;
     height: 350px;
 `;
diff --git a/packages/dev-tools-pages/ts/components/Tabs.tsx b/packages/dev-tools-pages/ts/components/Tabs.tsx
index b36b354f3..64f87bea3 100644
--- a/packages/dev-tools-pages/ts/components/Tabs.tsx
+++ b/packages/dev-tools-pages/ts/components/Tabs.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import styled from 'styled-components';
-import variables from '../variables';
+import { colors } from '../variables';
 
 import { Tabs as ReactTabs, Tab, TabList, TabPanel } from 'react-tabs'
 
@@ -36,7 +36,7 @@ const Root = styled.div<{primaryColor: string;}>`
     background-color: ${props => props.primaryColor};
   }
   ${StyledTab}[aria-selected="true"] {
-    background-color: ${variables.colors.gray};
+    background-color: ${colors.gray};
   } 
 `;
 
diff --git a/packages/dev-tools-pages/ts/components/Trace.tsx b/packages/dev-tools-pages/ts/components/Trace.tsx
index 98695177d..f4b4e76a3 100644
--- a/packages/dev-tools-pages/ts/components/Trace.tsx
+++ b/packages/dev-tools-pages/ts/components/Trace.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import styled from 'styled-components';
-import variables from '../variables';
+import { colors } from '../variables';
 
 import { withContext, Props } from './withContext';
 import { Alpha, Beta, Gamma } from './Typography';
@@ -98,7 +98,7 @@ const StyledSection =
     `
     max-width: 90rem;
     margin: 0 auto;
-    background: linear-gradient(to right, ${variables.colors.black} 50%, ${props => props.background} 50%);
+    background: linear-gradient(to right, ${colors.black} 50%, ${props => props.background} 50%);
     padding-top: 6.25rem;
     padding-bottom: 5.25rem;
 `;
@@ -116,8 +116,8 @@ const Block =
     TraceProps >
     `
     width: 50%;
-    background: ${props => (props.background ? props.background : '#000')};
-    color: ${props => (props.background ? 'inherit' : '#fff')};
+    background: ${props => (props.background ? props.background : colors.black)};
+    color: ${props => (props.background ? 'inherit' : colors.white)};
 
     :first-of-type {
         padding-right: 6.25rem;
diff --git a/packages/dev-tools-pages/ts/variables.tsx b/packages/dev-tools-pages/ts/variables.tsx
index 8590547df..b1e0271d1 100644
--- a/packages/dev-tools-pages/ts/variables.tsx
+++ b/packages/dev-tools-pages/ts/variables.tsx
@@ -1,5 +1,6 @@
-const variables = {
-    colors: {
+import { css } from 'styled-components';
+
+const colors = {
         black: '#000000',
         white: '#FFFFFF',
         lightGray: '#F1F4F5',
@@ -10,3 +11,4 @@ const variables = {
 };
 
 export default variables;
+export { colors, media };
-- 
cgit v1.2.3


From e9232bf0707fb120d2c8d9cbd842702ffc8cb19e Mon Sep 17 00:00:00 2001
From: Megan Pearson <megan.e.pearson@gmail.com>
Date: Fri, 19 Oct 2018 11:33:41 +0200
Subject: Exports media breakpoints

---
 packages/dev-tools-pages/ts/variables.tsx | 35 ++++++++++++++++++++++++-------
 1 file changed, 27 insertions(+), 8 deletions(-)

(limited to 'packages/dev-tools-pages/ts')

diff --git a/packages/dev-tools-pages/ts/variables.tsx b/packages/dev-tools-pages/ts/variables.tsx
index b1e0271d1..b23bb3e52 100644
--- a/packages/dev-tools-pages/ts/variables.tsx
+++ b/packages/dev-tools-pages/ts/variables.tsx
@@ -1,14 +1,33 @@
 import { css } from 'styled-components';
 
 const colors = {
-        black: '#000000',
-        white: '#FFFFFF',
-        lightGray: '#F1F4F5',
-        gray: '#F1F2F7',
-        darkGray: '#E9ECED',
-        blueGray: '#ECEFF9',
-    },
+    black: '#000000',
+    white: '#FFFFFF',
+    lightGray: '#F1F4F5',
+    gray: '#F1F2F7',
+    darkGray: '#E9ECED',
+    blueGray: '#ECEFF9',
 };
 
-export default variables;
+interface SizesInterface {
+    [key: string]: number;
+}
+
+const sizes: SizesInterface = {
+    large: 992,
+    medium: 768,
+    small: 376,
+};
+
+const media = Object.keys(sizes).reduce((acc: any, label: string) => {
+    acc[label] = (args: any) => css`
+        @media (max-width: ${sizes[label] / 16}em) {
+            ${css(args)};
+        }
+    `;
+
+    return acc;
+}, {});
+
+export default media;
 export { colors, media };
-- 
cgit v1.2.3


From 73ea2dac6d18af5375bf4d9026f70f55b200297c Mon Sep 17 00:00:00 2001
From: Megan Pearson <megan.e.pearson@gmail.com>
Date: Fri, 19 Oct 2018 11:59:03 +0200
Subject: Responsive header

---
 packages/dev-tools-pages/ts/components/Header.tsx | 6 ++++++
 1 file changed, 6 insertions(+)

(limited to 'packages/dev-tools-pages/ts')

diff --git a/packages/dev-tools-pages/ts/components/Header.tsx b/packages/dev-tools-pages/ts/components/Header.tsx
index dca562421..aeefae3cc 100644
--- a/packages/dev-tools-pages/ts/components/Header.tsx
+++ b/packages/dev-tools-pages/ts/components/Header.tsx
@@ -5,6 +5,8 @@ import { withContext, Props } from './withContext';
 import Container from './Container';
 import { Small } from './Typography';
 
+import { media } from '../variables';
+
 function Header(props: Props) {
     const { icon, title, colors } = props;
 
@@ -36,6 +38,8 @@ const StyledHeader = styled.header`
         justify-content: space-between;
         align-items: center;
     }
+
+    ${media.small`padding-top: 2.125rem;`};
 `;
 
 const LogoMark = styled.div`
@@ -53,6 +57,8 @@ const Title = styled.h1`
     font-size: 1.5rem;
     margin: 0;
     margin-left: 0.8125rem;
+
+    ${media.small`font-size: 1.25rem;`};
 `;
 
 const StyledLink = styled(Small)`
-- 
cgit v1.2.3


From 5187017f213dfbcc0231c723c537060a1898f021 Mon Sep 17 00:00:00 2001
From: Megan Pearson <megan.e.pearson@gmail.com>
Date: Fri, 19 Oct 2018 14:29:59 +0200
Subject: Responsive trace

---
 packages/dev-tools-pages/ts/components/Trace.tsx | 38 ++++++++++++++++++++++--
 1 file changed, 36 insertions(+), 2 deletions(-)

(limited to 'packages/dev-tools-pages/ts')

diff --git a/packages/dev-tools-pages/ts/components/Trace.tsx b/packages/dev-tools-pages/ts/components/Trace.tsx
index f4b4e76a3..fe1f357c7 100644
--- a/packages/dev-tools-pages/ts/components/Trace.tsx
+++ b/packages/dev-tools-pages/ts/components/Trace.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import styled from 'styled-components';
-import { colors } from '../variables';
+import { colors, media } from '../variables';
 
 import { withContext, Props } from './withContext';
 import { Alpha, Beta, Gamma } from './Typography';
@@ -101,6 +101,8 @@ const StyledSection =
     background: linear-gradient(to right, ${colors.black} 50%, ${props => props.background} 50%);
     padding-top: 6.25rem;
     padding-bottom: 5.25rem;
+    
+    ${media.small`background: none`};
 `;
 
 const Wrapper = styled(Container)`
@@ -108,7 +110,14 @@ const Wrapper = styled(Container)`
 
     ${Alpha} {
         padding-bottom: 2.5rem;
+
+        ${media.small`padding-bottom: 1.875rem;`};
     }
+
+    ${media.small`
+        display: block;
+        width: 100%;
+    `};
 `;
 
 const Block =
@@ -125,27 +134,52 @@ const Block =
     :last-of-type {
         padding-left: 6.25rem;
     }
+
+    ${media.small`
+        width: 100%;
+        padding-top: 2.5rem;
+        padding-bottom: 3.4375rem;
+
+        :first-of-type {
+            padding-left: 1.875rem;
+            padding-right: 1.875rem;
+        }
+        :last-of-type {
+            padding-left: 1.875rem;
+            padding-right: 1.875rem;
+        }
+    `};
 `;
 
 const MainCopy = styled(Beta)`
     margin-bottom: 3.1875rem;
+    ${media.small`margin-bottom: 1.125rem;`};
 `;
 
 const List = styled.ul`
     margin-top: 6.25rem;
     margin-bottom: 0;
     padding: 0;
+
+    ${media.small`margin-top: 3.4375rem;`};
 `;
 
 const Item = styled.li`
     display: flex;
     align-items: center;
-    margin-bottom: 4.4375rem;
+
+    :not(:last-child) {
+        margin-bottom: 4.4375rem;
+
+        ${media.small`margin-bottom: 3.4375rem;`};
+    }
 `;
 
 const Copy = styled.div`
     max-width: 20rem;
     margin-right: 5.875rem;
+
+    ${media.small`margin-right: 2.0625rem;`};
 `;
 
 export default withContext(Trace);
-- 
cgit v1.2.3


From a9b4c1cba87168531752c48b8fe8e58f267eb98c Mon Sep 17 00:00:00 2001
From: Megan Pearson <megan.e.pearson@gmail.com>
Date: Fri, 19 Oct 2018 14:30:38 +0200
Subject: Responsive font sizes in typography and globalstyles

---
 packages/dev-tools-pages/ts/components/Typography.tsx | 7 +++++++
 packages/dev-tools-pages/ts/globalStyles.tsx          | 4 ++++
 2 files changed, 11 insertions(+)

(limited to 'packages/dev-tools-pages/ts')

diff --git a/packages/dev-tools-pages/ts/components/Typography.tsx b/packages/dev-tools-pages/ts/components/Typography.tsx
index 9251d31b4..5f9587335 100644
--- a/packages/dev-tools-pages/ts/components/Typography.tsx
+++ b/packages/dev-tools-pages/ts/components/Typography.tsx
@@ -1,17 +1,24 @@
 import styled from 'styled-components';
+import { media } from '../variables';
 
 const Alpha = styled.h2`
     font-size: 1.75rem;
     line-height: 1;
+
+    ${media.small`font-size: 1.5rem;`};
 `;
 
 const Beta = styled.h3`
     font-size: 1.25rem;
     line-height: 1.65;
+
+    ${media.small`font-size: 1rem;`};
 `;
 
 const Gamma = styled.h4`
     font-size: 1rem;
+
+    ${media.small`font-size: 0.875rem;`};
 `;
 
 const Small = styled.p`
diff --git a/packages/dev-tools-pages/ts/globalStyles.tsx b/packages/dev-tools-pages/ts/globalStyles.tsx
index c0cf46673..13ecde7aa 100644
--- a/packages/dev-tools-pages/ts/globalStyles.tsx
+++ b/packages/dev-tools-pages/ts/globalStyles.tsx
@@ -1,4 +1,5 @@
 import { createGlobalStyle } from 'styled-components';
+import { media } from './variables';
 import styledNormalize from 'styled-normalize';
 import hljsStyles from 'highlight.js/styles/github-gist.css';
 
@@ -44,6 +45,9 @@ const BaseStyles = createGlobalStyle`
     font-weight: 300;
     font-size: 1rem;
     line-height: 1.8;
+
+    ${media.small`font-size: 0.875rem;`};
+
   }
 
   a {
-- 
cgit v1.2.3


From 61cd36cc961b0f393bffd609dedf8ff61e072e59 Mon Sep 17 00:00:00 2001
From: Megan Pearson <megan.e.pearson@gmail.com>
Date: Fri, 19 Oct 2018 15:31:26 +0200
Subject: Responsive footer

---
 packages/dev-tools-pages/ts/components/Footer.tsx | 40 ++++++++++++++++++++---
 1 file changed, 35 insertions(+), 5 deletions(-)

(limited to 'packages/dev-tools-pages/ts')

diff --git a/packages/dev-tools-pages/ts/components/Footer.tsx b/packages/dev-tools-pages/ts/components/Footer.tsx
index 82b2de1a3..15e6a5b86 100644
--- a/packages/dev-tools-pages/ts/components/Footer.tsx
+++ b/packages/dev-tools-pages/ts/components/Footer.tsx
@@ -4,6 +4,7 @@ import styled from 'styled-components';
 import { Alpha, Beta } from './Typography';
 import { withContext, Props } from './withContext';
 import Container from './Container';
+import { media } from '../variables';
 
 import MainIcon from 'ts/icons/logos/0x.svg';
 import compiler from 'ts/context/compiler';
@@ -23,7 +24,7 @@ function Footer(props: Props) {
                     <Alpha>Other tools by 0x</Alpha>
                     <List>
                         {tools.map(({ title, subtitle, icon }) => (
-                            <ListItem as="li" key={title}>
+                            <ListItem key={title}>
                                 <Icon as={icon} />
                                 <div>
                                     <Beta>{title}</Beta>
@@ -49,21 +50,38 @@ const StyledFooter = styled.footer`
     background-color: ${(props: { background: string }) => props.background};
     padding-top: 6.25rem;
     padding-bottom: 5.4375rem;
+
+    ${media.small`padding-top: 2.5rem;`};
 `;
 
 const Top = styled.div`
     display: flex;
     justify-content: space-between;
     margin-bottom: 9.375rem;
+
+    ${media.small`
+        display: block;
+        margin-bottom: 5.3125rem;
+    `};
+
+    ${Alpha} {
+        ${media.small`margin-bottom: 3.8125rem;`};
+    }
+`;
+
+const Icon = styled.div`
+    margin-right: 1.3125rem;
+
+    ${media.small`margin-right: 0.9375rem`};
 `;
 
 const Media = styled.div`
     display: flex;
     align-items: center;
-`;
 
-const Icon = styled.div`
-    margin-right: 1.3125rem;
+    ${Icon} {
+        align-self: flex-start;
+    }
 `;
 
 const List = styled.ul`
@@ -73,14 +91,26 @@ const List = styled.ul`
     flex-direction: row;
     margin: 0;
     padding: 0;
+
+    ${media.small`
+        display: block;
+        width: 100%; 
+    `};
 `;
 
-const ListItem = styled(Media)`
+const ListItem = styled.li`
+    display: flex;
+    align-items: center;
     flex-basis: 50%;
     margin-bottom: 3.3125rem;
+
     :nth-last-of-type(-n + 2) {
         margin-bottom: 0;
+
+        ${media.small`margin-bottom: 1.875rem`};
     }
+
+    ${media.small`margin-bottom: 1.875rem`};
 `;
 
 const Small = styled.small`
-- 
cgit v1.2.3


From 1e29f2875d2428e9f4df630850391d27be874360 Mon Sep 17 00:00:00 2001
From: Megan Pearson <megan.e.pearson@gmail.com>
Date: Fri, 19 Oct 2018 15:32:02 +0200
Subject: Remove font size adjustment for small screens from Beta

---
 packages/dev-tools-pages/ts/components/Trace.tsx      | 5 ++++-
 packages/dev-tools-pages/ts/components/Typography.tsx | 2 --
 2 files changed, 4 insertions(+), 3 deletions(-)

(limited to 'packages/dev-tools-pages/ts')

diff --git a/packages/dev-tools-pages/ts/components/Trace.tsx b/packages/dev-tools-pages/ts/components/Trace.tsx
index fe1f357c7..545e87d53 100644
--- a/packages/dev-tools-pages/ts/components/Trace.tsx
+++ b/packages/dev-tools-pages/ts/components/Trace.tsx
@@ -153,7 +153,10 @@ const Block =
 
 const MainCopy = styled(Beta)`
     margin-bottom: 3.1875rem;
-    ${media.small`margin-bottom: 1.125rem;`};
+    ${media.small`
+        margin-bottom: 1.125rem;
+        font-size: 1rem;
+    `};
 `;
 
 const List = styled.ul`
diff --git a/packages/dev-tools-pages/ts/components/Typography.tsx b/packages/dev-tools-pages/ts/components/Typography.tsx
index 5f9587335..deac8a976 100644
--- a/packages/dev-tools-pages/ts/components/Typography.tsx
+++ b/packages/dev-tools-pages/ts/components/Typography.tsx
@@ -11,8 +11,6 @@ const Alpha = styled.h2`
 const Beta = styled.h3`
     font-size: 1.25rem;
     line-height: 1.65;
-
-    ${media.small`font-size: 1rem;`};
 `;
 
 const Gamma = styled.h4`
-- 
cgit v1.2.3


From e485a9814333a3178e6a156230ed15b047f11005 Mon Sep 17 00:00:00 2001
From: August Skare <post@augustskare.no>
Date: Mon, 22 Oct 2018 13:14:48 +0200
Subject: support dark alternative of Main component

---
 .../dev-tools-pages/ts/components/ContentBlock.tsx | 17 ++++--
 packages/dev-tools-pages/ts/components/Main.tsx    | 43 +++++++++-----
 packages/dev-tools-pages/ts/pages/Compiler.tsx     | 69 ++++++++++++----------
 3 files changed, 79 insertions(+), 50 deletions(-)

(limited to 'packages/dev-tools-pages/ts')

diff --git a/packages/dev-tools-pages/ts/components/ContentBlock.tsx b/packages/dev-tools-pages/ts/components/ContentBlock.tsx
index 56d52a150..fcd85830e 100644
--- a/packages/dev-tools-pages/ts/components/ContentBlock.tsx
+++ b/packages/dev-tools-pages/ts/components/ContentBlock.tsx
@@ -1,7 +1,8 @@
 import * as React from 'react';
 import styled from 'styled-components';
 
-import { Beta } from './Typography';
+import { withContext, Props } from './withContext';
+import { Beta, Alpha } from './Typography';
 
 const Base = styled.div`
     display: flex;
@@ -26,8 +27,14 @@ const Item = styled.div`
     }
 `;
 
-interface ContentBlockProps {
+const StyledTitle = styled(Alpha)`
+    color: ${props => props.color};
+    margin-bottom: 6.25rem;
+`;
+
+interface ContentBlockProps extends Props {
     title: string;
+    main?: boolean;
     children: React.ReactNode;
 }
 
@@ -36,12 +43,14 @@ function ContentBlock(props: ContentBlockProps) {
         return <Item>{child}</Item>;
     });
 
+    const Title = props.main ? StyledTitle : Beta;
+
     return (
         <Base>
-            <Beta>{props.title}</Beta>
+            <Title color={props.colors.main}>{props.title}</Title>
             <Content>{children}</Content>
         </Base>
     );
 }
 
-export default ContentBlock;
+export default withContext(ContentBlock);
diff --git a/packages/dev-tools-pages/ts/components/Main.tsx b/packages/dev-tools-pages/ts/components/Main.tsx
index 8046abc91..6c0270dbc 100644
--- a/packages/dev-tools-pages/ts/components/Main.tsx
+++ b/packages/dev-tools-pages/ts/components/Main.tsx
@@ -1,33 +1,44 @@
 import * as React from 'react';
 import styled from 'styled-components';
 
-import { withContext, Props } from './withContext';
+import { Beta } from './Typography';
+import Container from './Container';
+import ContentBlock from './ContentBlock';
 
-import { Alpha } from './Typography';
-
-const StyledMain = styled.div`
+const StyledMain =
+    styled.div <
+    MainProps >
+    `
     padding-top: 6.25rem;
     padding-bottom: 6.25rem;
+    ${props =>
+        props.dark
+            ? `
+        background-color: #000;
+        color: #fff;
+    `
+            : ''};
 `;
 
-const Title = styled(Alpha)`
-    color: ${props => props.color};
-    margin-bottom: 6.25rem;
-`;
-
-interface MainProps extends Props {
+interface MainProps {
+    title?: string;
+    subtitle?: string;
+    dark?: boolean;
     children: React.ReactNode;
 }
 
 function Main(props: MainProps) {
     return (
-        <StyledMain>
-            <Title as="h2" color={props.colors.main}>
-                Get started
-            </Title>
-            {props.children}
+        <StyledMain dark={props.dark}>
+            <Container>
+                <ContentBlock main title={props.title || 'Get started'}>
+                    {props.subtitle ? <Beta as="p">{props.subtitle}</Beta> : null}
+                </ContentBlock>
+
+                {props.children}
+            </Container>
         </StyledMain>
     );
 }
 
-export default withContext(Main);
+export default Main;
diff --git a/packages/dev-tools-pages/ts/pages/Compiler.tsx b/packages/dev-tools-pages/ts/pages/Compiler.tsx
index 35c810cb3..e7336f1b1 100644
--- a/packages/dev-tools-pages/ts/pages/Compiler.tsx
+++ b/packages/dev-tools-pages/ts/pages/Compiler.tsx
@@ -15,40 +15,49 @@ import CompilerComponent from 'ts/components/Compiler';
 function Compiler() {
     return (
         <Base context={context}>
-            <Container>
-                <CompilerComponent />
-                <Main>
-                    <ContentBlock title="Required steps">
-                        <List items={['Step 1', 'Step 2']} />
-                    </ContentBlock>
-                    <ContentBlock title="Prerequisites">
-                        <Code>npm install @0x/sol-trace --save</Code>
-                        <p>
-                            Sol-trace is a subprovider that needs to be prepended to your{' '}
-                            <a href="#">provider engine</a>. Depending on your project setup, you will need to use a
-                            specific ArtifactAdapter. Sol-trace ships with the{' '}
-                            <InlineCode>SolCompilerArtifactAdapter</InlineCode> for use with Sol-compiler and{' '}
-                            <InlineCode>TruffleArtifactAdapter</InlineCode> for use with the Truffle framework. You can
-                            also write your own and support any artifact format.
-                        </p>
-                    </ContentBlock>
+            <CompilerComponent />
+            <Main>
+                <ContentBlock title="Required steps">
+                    <List items={['Step 1', 'Step 2']} />
+                </ContentBlock>
+                <ContentBlock title="Prerequisites">
+                    <Code>npm install @0x/sol-trace --save</Code>
+                    <p>
+                        Sol-trace is a subprovider that needs to be prepended to your <a href="#">provider engine</a>.
+                        Depending on your project setup, you will need to use a specific ArtifactAdapter. Sol-trace
+                        ships with the <InlineCode>SolCompilerArtifactAdapter</InlineCode> for use with Sol-compiler and{' '}
+                        <InlineCode>TruffleArtifactAdapter</InlineCode> for use with the Truffle framework. You can also
+                        write your own and support any artifact format.
+                    </p>
+                </ContentBlock>
 
-                    <ContentBlock title="Installation">
-                        <Tabs>
-                            <TabBlock title="Sol-compiler">
-                                <Code language="js">
-                                    {`import { SolCompilerArtifactAdapter } from '@0x/sol-trace';
+                <ContentBlock title="Installation">
+                    <Tabs>
+                        <TabBlock title="Sol-compiler">
+                            <Code language="js">
+                                {`import { SolCompilerArtifactAdapter } from '@0x/sol-trace';
 
 // Both artifactsDir and contractsDir are optional and will be fetched from compiler.json if not passed in
 const artifactAdapter = new SolCompilerArtifactAdapter(artifactsDir, contractsDir);`}
-                                </Code>
-                            </TabBlock>
-                            <TabBlock title="Truffle">Truffle</TabBlock>
-                            <TabBlock title="Custom">Custom</TabBlock>
-                        </Tabs>
-                    </ContentBlock>
-                </Main>
-            </Container>
+                            </Code>
+                        </TabBlock>
+                        <TabBlock title="Truffle">Truffle</TabBlock>
+                        <TabBlock title="Custom">Custom</TabBlock>
+                    </Tabs>
+                </ContentBlock>
+            </Main>
+            <Main
+                title="Artifacts"
+                subtitle="Sol compiler uses solidity standard JSON output format for the artifacts. This way, you can define which parts of the artifact you need."
+                dark
+            >
+                <ContentBlock title="Production">
+                    <p>
+                        Sol compiler uses solidity standard JSON output format for the artifacts. This way, you can
+                        define which parts of the artifact you need.
+                    </p>
+                </ContentBlock>
+            </Main>
         </Base>
     );
 }
-- 
cgit v1.2.3


From 97c54f84f0b0f3daf41773690cc79296c983b346 Mon Sep 17 00:00:00 2001
From: August Skare <post@augustskare.no>
Date: Mon, 22 Oct 2018 13:15:54 +0200
Subject: remove container from all pages

---
 packages/dev-tools-pages/ts/pages/Compiler.tsx |  1 -
 packages/dev-tools-pages/ts/pages/Cov.tsx      | 66 ++++++++++++--------------
 packages/dev-tools-pages/ts/pages/Profiler.tsx | 66 ++++++++++++--------------
 packages/dev-tools-pages/ts/pages/Trace.tsx    | 56 ++++++++++------------
 4 files changed, 88 insertions(+), 101 deletions(-)

(limited to 'packages/dev-tools-pages/ts')

diff --git a/packages/dev-tools-pages/ts/pages/Compiler.tsx b/packages/dev-tools-pages/ts/pages/Compiler.tsx
index e7336f1b1..c6e67021e 100644
--- a/packages/dev-tools-pages/ts/pages/Compiler.tsx
+++ b/packages/dev-tools-pages/ts/pages/Compiler.tsx
@@ -3,7 +3,6 @@ import { render, hydrate } from 'react-dom';
 
 import context from 'ts/context/compiler';
 import Base from 'ts/components/Base';
-import Container from 'ts/components/Container';
 import Main from 'ts/components/Main';
 import ContentBlock from 'ts/components/ContentBlock';
 import { Tabs, TabBlock } from 'ts/components/Tabs';
diff --git a/packages/dev-tools-pages/ts/pages/Cov.tsx b/packages/dev-tools-pages/ts/pages/Cov.tsx
index e835e5c82..d5b607334 100644
--- a/packages/dev-tools-pages/ts/pages/Cov.tsx
+++ b/packages/dev-tools-pages/ts/pages/Cov.tsx
@@ -3,7 +3,6 @@ import { render, hydrate } from 'react-dom';
 
 import context from 'ts/context/cov';
 import Base from 'ts/components/Base';
-import Container from 'ts/components/Container';
 import Main from 'ts/components/Main';
 import ContentBlock from 'ts/components/ContentBlock';
 import { Tabs, TabBlock } from 'ts/components/Tabs';
@@ -15,46 +14,43 @@ import Intro from 'ts/components/Intro';
 function Cov() {
     return (
         <Base context={context}>
-            <Container>
-                <Intro title="Measure your tests">
+            <Intro title="Measure your tests">
+                <p>
+                    When it comes to writing smart contracts, testing is one of the most important steps of the process.
+                    In order to quantify the robustness of your Solidity testing suite, you need to measure its code
+                    coverage.
+                </p>
+            </Intro>
+            <Main>
+                <ContentBlock title="Required steps">
+                    <List items={['Step 1', 'Step 2']} />
+                </ContentBlock>
+                <ContentBlock title="Prerequisites">
+                    <Code>npm install @0x/sol-trace --save</Code>
                     <p>
-                        When it comes to writing smart contracts, testing is one of the most important steps of the
-                        process. In order to quantify the robustness of your Solidity testing suite, you need to measure
-                        its code coverage.
+                        Sol-trace is a subprovider that needs to be prepended to your <a href="#">provider engine</a>.
+                        Depending on your project setup, you will need to use a specific ArtifactAdapter. Sol-trace
+                        ships with the <InlineCode>SolCompilerArtifactAdapter</InlineCode> for use with Sol-compiler and{' '}
+                        <InlineCode>TruffleArtifactAdapter</InlineCode> for use with the Truffle framework. You can also
+                        write your own and support any artifact format.
                     </p>
-                </Intro>
-                <Main>
-                    <ContentBlock title="Required steps">
-                        <List items={['Step 1', 'Step 2']} />
-                    </ContentBlock>
-                    <ContentBlock title="Prerequisites">
-                        <Code>npm install @0x/sol-trace --save</Code>
-                        <p>
-                            Sol-trace is a subprovider that needs to be prepended to your{' '}
-                            <a href="#">provider engine</a>. Depending on your project setup, you will need to use a
-                            specific ArtifactAdapter. Sol-trace ships with the{' '}
-                            <InlineCode>SolCompilerArtifactAdapter</InlineCode> for use with Sol-compiler and{' '}
-                            <InlineCode>TruffleArtifactAdapter</InlineCode> for use with the Truffle framework. You can
-                            also write your own and support any artifact format.
-                        </p>
-                    </ContentBlock>
+                </ContentBlock>
 
-                    <ContentBlock title="Installation">
-                        <Tabs>
-                            <TabBlock title="Sol-compiler">
-                                <Code language="js">
-                                    {`import { SolCompilerArtifactAdapter } from '@0x/sol-trace';
+                <ContentBlock title="Installation">
+                    <Tabs>
+                        <TabBlock title="Sol-compiler">
+                            <Code language="js">
+                                {`import { SolCompilerArtifactAdapter } from '@0x/sol-trace';
 
 // Both artifactsDir and contractsDir are optional and will be fetched from compiler.json if not passed in
 const artifactAdapter = new SolCompilerArtifactAdapter(artifactsDir, contractsDir);`}
-                                </Code>
-                            </TabBlock>
-                            <TabBlock title="Truffle">Truffle</TabBlock>
-                            <TabBlock title="Custom">Custom</TabBlock>
-                        </Tabs>
-                    </ContentBlock>
-                </Main>
-            </Container>
+                            </Code>
+                        </TabBlock>
+                        <TabBlock title="Truffle">Truffle</TabBlock>
+                        <TabBlock title="Custom">Custom</TabBlock>
+                    </Tabs>
+                </ContentBlock>
+            </Main>
         </Base>
     );
 }
diff --git a/packages/dev-tools-pages/ts/pages/Profiler.tsx b/packages/dev-tools-pages/ts/pages/Profiler.tsx
index 9f8b46b9c..ae847ad41 100644
--- a/packages/dev-tools-pages/ts/pages/Profiler.tsx
+++ b/packages/dev-tools-pages/ts/pages/Profiler.tsx
@@ -3,7 +3,6 @@ import { render, hydrate } from 'react-dom';
 
 import context from 'ts/context/profiler';
 import Base from 'ts/components/Base';
-import Container from 'ts/components/Container';
 import Main from 'ts/components/Main';
 import ContentBlock from 'ts/components/ContentBlock';
 import { Tabs, TabBlock } from 'ts/components/Tabs';
@@ -15,46 +14,43 @@ import Intro from 'ts/components/Intro';
 function Profiler() {
     return (
         <Base context={context}>
-            <Container>
-                <Intro title="ra">
+            <Intro title="ra">
+                <p>
+                    Sol-profiler gathers line-by-line gas usage for any transaction submitted through your provider.
+                    This will help you find unexpected inefficiencies in parts of your smart contract, and take a
+                    data-driven approach to optimizing it.
+                </p>
+            </Intro>
+            <Main>
+                <ContentBlock title="Required steps">
+                    <List items={['Step 1', 'Step 2']} />
+                </ContentBlock>
+                <ContentBlock title="Prerequisites">
+                    <Code>npm install @0x/sol-trace --save</Code>
                     <p>
-                        Sol-profiler gathers line-by-line gas usage for any transaction submitted through your provider.
-                        This will help you find unexpected inefficiencies in parts of your smart contract, and take a
-                        data-driven approach to optimizing it.
+                        Sol-trace is a subprovider that needs to be prepended to your <a href="#">provider engine</a>.
+                        Depending on your project setup, you will need to use a specific ArtifactAdapter. Sol-trace
+                        ships with the <InlineCode>SolCompilerArtifactAdapter</InlineCode> for use with Sol-compiler and{' '}
+                        <InlineCode>TruffleArtifactAdapter</InlineCode> for use with the Truffle framework. You can also
+                        write your own and support any artifact format.
                     </p>
-                </Intro>
-                <Main>
-                    <ContentBlock title="Required steps">
-                        <List items={['Step 1', 'Step 2']} />
-                    </ContentBlock>
-                    <ContentBlock title="Prerequisites">
-                        <Code>npm install @0x/sol-trace --save</Code>
-                        <p>
-                            Sol-trace is a subprovider that needs to be prepended to your{' '}
-                            <a href="#">provider engine</a>. Depending on your project setup, you will need to use a
-                            specific ArtifactAdapter. Sol-trace ships with the{' '}
-                            <InlineCode>SolCompilerArtifactAdapter</InlineCode> for use with Sol-compiler and{' '}
-                            <InlineCode>TruffleArtifactAdapter</InlineCode> for use with the Truffle framework. You can
-                            also write your own and support any artifact format.
-                        </p>
-                    </ContentBlock>
+                </ContentBlock>
 
-                    <ContentBlock title="Installation">
-                        <Tabs>
-                            <TabBlock title="Sol-compiler">
-                                <Code language="js">
-                                    {`import { SolCompilerArtifactAdapter } from '@0x/sol-trace';
+                <ContentBlock title="Installation">
+                    <Tabs>
+                        <TabBlock title="Sol-compiler">
+                            <Code language="js">
+                                {`import { SolCompilerArtifactAdapter } from '@0x/sol-trace';
 
 // Both artifactsDir and contractsDir are optional and will be fetched from compiler.json if not passed in
 const artifactAdapter = new SolCompilerArtifactAdapter(artifactsDir, contractsDir);`}
-                                </Code>
-                            </TabBlock>
-                            <TabBlock title="Truffle">Truffle</TabBlock>
-                            <TabBlock title="Custom">Custom</TabBlock>
-                        </Tabs>
-                    </ContentBlock>
-                </Main>
-            </Container>
+                            </Code>
+                        </TabBlock>
+                        <TabBlock title="Truffle">Truffle</TabBlock>
+                        <TabBlock title="Custom">Custom</TabBlock>
+                    </Tabs>
+                </ContentBlock>
+            </Main>
         </Base>
     );
 }
diff --git a/packages/dev-tools-pages/ts/pages/Trace.tsx b/packages/dev-tools-pages/ts/pages/Trace.tsx
index be5acdac4..b55c03005 100644
--- a/packages/dev-tools-pages/ts/pages/Trace.tsx
+++ b/packages/dev-tools-pages/ts/pages/Trace.tsx
@@ -3,7 +3,6 @@ import { render, hydrate } from 'react-dom';
 
 import context from 'ts/context/trace';
 import Base from 'ts/components/Base';
-import Container from 'ts/components/Container';
 import Main from 'ts/components/Main';
 import ContentBlock from 'ts/components/ContentBlock';
 import { Tabs, TabBlock } from 'ts/components/Tabs';
@@ -16,39 +15,36 @@ function Trace() {
     return (
         <Base context={context}>
             <TraceComponent />
-            <Container>
-                <Main>
-                    <ContentBlock title="Required steps">
-                        <List items={['Step 1', 'Step 2']} />
-                    </ContentBlock>
-                    <ContentBlock title="Prerequisites">
-                        <Code>npm install @0x/sol-trace --save</Code>
-                        <p>
-                            Sol-trace is a subprovider that needs to be prepended to your{' '}
-                            <a href="#">provider engine</a>. Depending on your project setup, you will need to use a
-                            specific ArtifactAdapter. Sol-trace ships with the{' '}
-                            <InlineCode>SolCompilerArtifactAdapter</InlineCode> for use with Sol-compiler and{' '}
-                            <InlineCode>TruffleArtifactAdapter</InlineCode> for use with the Truffle framework. You can
-                            also write your own and support any artifact format.
-                        </p>
-                    </ContentBlock>
+            <Main>
+                <ContentBlock title="Required steps">
+                    <List items={['Step 1', 'Step 2']} />
+                </ContentBlock>
+                <ContentBlock title="Prerequisites">
+                    <Code>npm install @0x/sol-trace --save</Code>
+                    <p>
+                        Sol-trace is a subprovider that needs to be prepended to your <a href="#">provider engine</a>.
+                        Depending on your project setup, you will need to use a specific ArtifactAdapter. Sol-trace
+                        ships with the <InlineCode>SolCompilerArtifactAdapter</InlineCode> for use with Sol-compiler and{' '}
+                        <InlineCode>TruffleArtifactAdapter</InlineCode> for use with the Truffle framework. You can also
+                        write your own and support any artifact format.
+                    </p>
+                </ContentBlock>
 
-                    <ContentBlock title="Installation">
-                        <Tabs>
-                            <TabBlock title="Sol-compiler">
-                                <Code language="js">
-                                    {`import { SolCompilerArtifactAdapter } from '@0x/sol-trace';
+                <ContentBlock title="Installation">
+                    <Tabs>
+                        <TabBlock title="Sol-compiler">
+                            <Code language="js">
+                                {`import { SolCompilerArtifactAdapter } from '@0x/sol-trace';
 
 // Both artifactsDir and contractsDir are optional and will be fetched from compiler.json if not passed in
 const artifactAdapter = new SolCompilerArtifactAdapter(artifactsDir, contractsDir);`}
-                                </Code>
-                            </TabBlock>
-                            <TabBlock title="Truffle">Truffle</TabBlock>
-                            <TabBlock title="Custom">Custom</TabBlock>
-                        </Tabs>
-                    </ContentBlock>
-                </Main>
-            </Container>
+                            </Code>
+                        </TabBlock>
+                        <TabBlock title="Truffle">Truffle</TabBlock>
+                        <TabBlock title="Custom">Custom</TabBlock>
+                    </Tabs>
+                </ContentBlock>
+            </Main>
         </Base>
     );
 }
-- 
cgit v1.2.3


From 8cf720986eb464a39e634ca59c4c3b20b3cd368d Mon Sep 17 00:00:00 2001
From: August Skare <post@augustskare.no>
Date: Mon, 22 Oct 2018 13:18:51 +0200
Subject: rename Main to Content

---
 packages/dev-tools-pages/ts/components/Content.tsx | 44 ++++++++++++++++++++++
 packages/dev-tools-pages/ts/components/Main.tsx    | 44 ----------------------
 packages/dev-tools-pages/ts/pages/Compiler.tsx     | 10 ++---
 packages/dev-tools-pages/ts/pages/Cov.tsx          |  6 +--
 packages/dev-tools-pages/ts/pages/Profiler.tsx     |  6 +--
 packages/dev-tools-pages/ts/pages/Trace.tsx        |  6 +--
 6 files changed, 58 insertions(+), 58 deletions(-)
 create mode 100644 packages/dev-tools-pages/ts/components/Content.tsx
 delete mode 100644 packages/dev-tools-pages/ts/components/Main.tsx

(limited to 'packages/dev-tools-pages/ts')

diff --git a/packages/dev-tools-pages/ts/components/Content.tsx b/packages/dev-tools-pages/ts/components/Content.tsx
new file mode 100644
index 000000000..6c0270dbc
--- /dev/null
+++ b/packages/dev-tools-pages/ts/components/Content.tsx
@@ -0,0 +1,44 @@
+import * as React from 'react';
+import styled from 'styled-components';
+
+import { Beta } from './Typography';
+import Container from './Container';
+import ContentBlock from './ContentBlock';
+
+const StyledMain =
+    styled.div <
+    MainProps >
+    `
+    padding-top: 6.25rem;
+    padding-bottom: 6.25rem;
+    ${props =>
+        props.dark
+            ? `
+        background-color: #000;
+        color: #fff;
+    `
+            : ''};
+`;
+
+interface MainProps {
+    title?: string;
+    subtitle?: string;
+    dark?: boolean;
+    children: React.ReactNode;
+}
+
+function Main(props: MainProps) {
+    return (
+        <StyledMain dark={props.dark}>
+            <Container>
+                <ContentBlock main title={props.title || 'Get started'}>
+                    {props.subtitle ? <Beta as="p">{props.subtitle}</Beta> : null}
+                </ContentBlock>
+
+                {props.children}
+            </Container>
+        </StyledMain>
+    );
+}
+
+export default Main;
diff --git a/packages/dev-tools-pages/ts/components/Main.tsx b/packages/dev-tools-pages/ts/components/Main.tsx
deleted file mode 100644
index 6c0270dbc..000000000
--- a/packages/dev-tools-pages/ts/components/Main.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-import * as React from 'react';
-import styled from 'styled-components';
-
-import { Beta } from './Typography';
-import Container from './Container';
-import ContentBlock from './ContentBlock';
-
-const StyledMain =
-    styled.div <
-    MainProps >
-    `
-    padding-top: 6.25rem;
-    padding-bottom: 6.25rem;
-    ${props =>
-        props.dark
-            ? `
-        background-color: #000;
-        color: #fff;
-    `
-            : ''};
-`;
-
-interface MainProps {
-    title?: string;
-    subtitle?: string;
-    dark?: boolean;
-    children: React.ReactNode;
-}
-
-function Main(props: MainProps) {
-    return (
-        <StyledMain dark={props.dark}>
-            <Container>
-                <ContentBlock main title={props.title || 'Get started'}>
-                    {props.subtitle ? <Beta as="p">{props.subtitle}</Beta> : null}
-                </ContentBlock>
-
-                {props.children}
-            </Container>
-        </StyledMain>
-    );
-}
-
-export default Main;
diff --git a/packages/dev-tools-pages/ts/pages/Compiler.tsx b/packages/dev-tools-pages/ts/pages/Compiler.tsx
index c6e67021e..8e2c7f058 100644
--- a/packages/dev-tools-pages/ts/pages/Compiler.tsx
+++ b/packages/dev-tools-pages/ts/pages/Compiler.tsx
@@ -3,7 +3,7 @@ import { render, hydrate } from 'react-dom';
 
 import context from 'ts/context/compiler';
 import Base from 'ts/components/Base';
-import Main from 'ts/components/Main';
+import Content from 'ts/components/Content';
 import ContentBlock from 'ts/components/ContentBlock';
 import { Tabs, TabBlock } from 'ts/components/Tabs';
 import Code from 'ts/components/Code';
@@ -15,7 +15,7 @@ function Compiler() {
     return (
         <Base context={context}>
             <CompilerComponent />
-            <Main>
+            <Content>
                 <ContentBlock title="Required steps">
                     <List items={['Step 1', 'Step 2']} />
                 </ContentBlock>
@@ -44,8 +44,8 @@ const artifactAdapter = new SolCompilerArtifactAdapter(artifactsDir, contractsDi
                         <TabBlock title="Custom">Custom</TabBlock>
                     </Tabs>
                 </ContentBlock>
-            </Main>
-            <Main
+            </Content>
+            <Content
                 title="Artifacts"
                 subtitle="Sol compiler uses solidity standard JSON output format for the artifacts. This way, you can define which parts of the artifact you need."
                 dark
@@ -56,7 +56,7 @@ const artifactAdapter = new SolCompilerArtifactAdapter(artifactsDir, contractsDi
                         define which parts of the artifact you need.
                     </p>
                 </ContentBlock>
-            </Main>
+            </Content>
         </Base>
     );
 }
diff --git a/packages/dev-tools-pages/ts/pages/Cov.tsx b/packages/dev-tools-pages/ts/pages/Cov.tsx
index d5b607334..1d8bbf512 100644
--- a/packages/dev-tools-pages/ts/pages/Cov.tsx
+++ b/packages/dev-tools-pages/ts/pages/Cov.tsx
@@ -3,7 +3,7 @@ import { render, hydrate } from 'react-dom';
 
 import context from 'ts/context/cov';
 import Base from 'ts/components/Base';
-import Main from 'ts/components/Main';
+import Content from 'ts/components/Content';
 import ContentBlock from 'ts/components/ContentBlock';
 import { Tabs, TabBlock } from 'ts/components/Tabs';
 import Code from 'ts/components/Code';
@@ -21,7 +21,7 @@ function Cov() {
                     coverage.
                 </p>
             </Intro>
-            <Main>
+            <Content>
                 <ContentBlock title="Required steps">
                     <List items={['Step 1', 'Step 2']} />
                 </ContentBlock>
@@ -50,7 +50,7 @@ const artifactAdapter = new SolCompilerArtifactAdapter(artifactsDir, contractsDi
                         <TabBlock title="Custom">Custom</TabBlock>
                     </Tabs>
                 </ContentBlock>
-            </Main>
+            </Content>
         </Base>
     );
 }
diff --git a/packages/dev-tools-pages/ts/pages/Profiler.tsx b/packages/dev-tools-pages/ts/pages/Profiler.tsx
index ae847ad41..49028c46a 100644
--- a/packages/dev-tools-pages/ts/pages/Profiler.tsx
+++ b/packages/dev-tools-pages/ts/pages/Profiler.tsx
@@ -3,7 +3,7 @@ import { render, hydrate } from 'react-dom';
 
 import context from 'ts/context/profiler';
 import Base from 'ts/components/Base';
-import Main from 'ts/components/Main';
+import Content from 'ts/components/Content';
 import ContentBlock from 'ts/components/ContentBlock';
 import { Tabs, TabBlock } from 'ts/components/Tabs';
 import Code from 'ts/components/Code';
@@ -21,7 +21,7 @@ function Profiler() {
                     data-driven approach to optimizing it.
                 </p>
             </Intro>
-            <Main>
+            <Content>
                 <ContentBlock title="Required steps">
                     <List items={['Step 1', 'Step 2']} />
                 </ContentBlock>
@@ -50,7 +50,7 @@ const artifactAdapter = new SolCompilerArtifactAdapter(artifactsDir, contractsDi
                         <TabBlock title="Custom">Custom</TabBlock>
                     </Tabs>
                 </ContentBlock>
-            </Main>
+            </Content>
         </Base>
     );
 }
diff --git a/packages/dev-tools-pages/ts/pages/Trace.tsx b/packages/dev-tools-pages/ts/pages/Trace.tsx
index b55c03005..4bdc68e95 100644
--- a/packages/dev-tools-pages/ts/pages/Trace.tsx
+++ b/packages/dev-tools-pages/ts/pages/Trace.tsx
@@ -3,7 +3,7 @@ import { render, hydrate } from 'react-dom';
 
 import context from 'ts/context/trace';
 import Base from 'ts/components/Base';
-import Main from 'ts/components/Main';
+import Content from 'ts/components/Content';
 import ContentBlock from 'ts/components/ContentBlock';
 import { Tabs, TabBlock } from 'ts/components/Tabs';
 import Code from 'ts/components/Code';
@@ -15,7 +15,7 @@ function Trace() {
     return (
         <Base context={context}>
             <TraceComponent />
-            <Main>
+            <Content>
                 <ContentBlock title="Required steps">
                     <List items={['Step 1', 'Step 2']} />
                 </ContentBlock>
@@ -44,7 +44,7 @@ const artifactAdapter = new SolCompilerArtifactAdapter(artifactsDir, contractsDi
                         <TabBlock title="Custom">Custom</TabBlock>
                     </Tabs>
                 </ContentBlock>
-            </Main>
+            </Content>
         </Base>
     );
 }
-- 
cgit v1.2.3


From 00afb2440dfe41f19c40030de60ffd274a782a04 Mon Sep 17 00:00:00 2001
From: August Skare <post@augustskare.no>
Date: Mon, 22 Oct 2018 13:24:43 +0200
Subject: remove contentBlock from content component

---
 packages/dev-tools-pages/ts/components/Content.tsx      | 10 +---------
 packages/dev-tools-pages/ts/components/ContentBlock.tsx |  5 ++---
 packages/dev-tools-pages/ts/pages/Compiler.tsx          | 14 +++++++++-----
 packages/dev-tools-pages/ts/pages/Cov.tsx               |  1 +
 packages/dev-tools-pages/ts/pages/Profiler.tsx          |  1 +
 packages/dev-tools-pages/ts/pages/Trace.tsx             |  1 +
 6 files changed, 15 insertions(+), 17 deletions(-)

(limited to 'packages/dev-tools-pages/ts')

diff --git a/packages/dev-tools-pages/ts/components/Content.tsx b/packages/dev-tools-pages/ts/components/Content.tsx
index 6c0270dbc..506f94fab 100644
--- a/packages/dev-tools-pages/ts/components/Content.tsx
+++ b/packages/dev-tools-pages/ts/components/Content.tsx
@@ -21,8 +21,6 @@ const StyledMain =
 `;
 
 interface MainProps {
-    title?: string;
-    subtitle?: string;
     dark?: boolean;
     children: React.ReactNode;
 }
@@ -30,13 +28,7 @@ interface MainProps {
 function Main(props: MainProps) {
     return (
         <StyledMain dark={props.dark}>
-            <Container>
-                <ContentBlock main title={props.title || 'Get started'}>
-                    {props.subtitle ? <Beta as="p">{props.subtitle}</Beta> : null}
-                </ContentBlock>
-
-                {props.children}
-            </Container>
+            <Container>{props.children}</Container>
         </StyledMain>
     );
 }
diff --git a/packages/dev-tools-pages/ts/components/ContentBlock.tsx b/packages/dev-tools-pages/ts/components/ContentBlock.tsx
index fcd85830e..fa558e9ab 100644
--- a/packages/dev-tools-pages/ts/components/ContentBlock.tsx
+++ b/packages/dev-tools-pages/ts/components/ContentBlock.tsx
@@ -29,13 +29,12 @@ const Item = styled.div`
 
 const StyledTitle = styled(Alpha)`
     color: ${props => props.color};
-    margin-bottom: 6.25rem;
 `;
 
 interface ContentBlockProps extends Props {
     title: string;
     main?: boolean;
-    children: React.ReactNode;
+    children?: React.ReactNode;
 }
 
 function ContentBlock(props: ContentBlockProps) {
@@ -48,7 +47,7 @@ function ContentBlock(props: ContentBlockProps) {
     return (
         <Base>
             <Title color={props.colors.main}>{props.title}</Title>
-            <Content>{children}</Content>
+            {children ? <Content>{children}</Content> : null}
         </Base>
     );
 }
diff --git a/packages/dev-tools-pages/ts/pages/Compiler.tsx b/packages/dev-tools-pages/ts/pages/Compiler.tsx
index 8e2c7f058..96f26a978 100644
--- a/packages/dev-tools-pages/ts/pages/Compiler.tsx
+++ b/packages/dev-tools-pages/ts/pages/Compiler.tsx
@@ -16,6 +16,7 @@ function Compiler() {
         <Base context={context}>
             <CompilerComponent />
             <Content>
+                <ContentBlock main title="Get started" />
                 <ContentBlock title="Required steps">
                     <List items={['Step 1', 'Step 2']} />
                 </ContentBlock>
@@ -45,11 +46,14 @@ const artifactAdapter = new SolCompilerArtifactAdapter(artifactsDir, contractsDi
                     </Tabs>
                 </ContentBlock>
             </Content>
-            <Content
-                title="Artifacts"
-                subtitle="Sol compiler uses solidity standard JSON output format for the artifacts. This way, you can define which parts of the artifact you need."
-                dark
-            >
+            <Content dark>
+                <ContentBlock main title="Artifacts">
+                    <p>
+                        Sol compiler uses solidity standard JSON output format for the artifacts. This way, you can
+                        define which parts of the artifact you need.
+                    </p>
+                </ContentBlock>
+
                 <ContentBlock title="Production">
                     <p>
                         Sol compiler uses solidity standard JSON output format for the artifacts. This way, you can
diff --git a/packages/dev-tools-pages/ts/pages/Cov.tsx b/packages/dev-tools-pages/ts/pages/Cov.tsx
index 1d8bbf512..c3dfb33c5 100644
--- a/packages/dev-tools-pages/ts/pages/Cov.tsx
+++ b/packages/dev-tools-pages/ts/pages/Cov.tsx
@@ -22,6 +22,7 @@ function Cov() {
                 </p>
             </Intro>
             <Content>
+                <ContentBlock main title="Get started" />
                 <ContentBlock title="Required steps">
                     <List items={['Step 1', 'Step 2']} />
                 </ContentBlock>
diff --git a/packages/dev-tools-pages/ts/pages/Profiler.tsx b/packages/dev-tools-pages/ts/pages/Profiler.tsx
index 49028c46a..48c4c122b 100644
--- a/packages/dev-tools-pages/ts/pages/Profiler.tsx
+++ b/packages/dev-tools-pages/ts/pages/Profiler.tsx
@@ -22,6 +22,7 @@ function Profiler() {
                 </p>
             </Intro>
             <Content>
+                <ContentBlock main title="Get started" />
                 <ContentBlock title="Required steps">
                     <List items={['Step 1', 'Step 2']} />
                 </ContentBlock>
diff --git a/packages/dev-tools-pages/ts/pages/Trace.tsx b/packages/dev-tools-pages/ts/pages/Trace.tsx
index 4bdc68e95..961f4534f 100644
--- a/packages/dev-tools-pages/ts/pages/Trace.tsx
+++ b/packages/dev-tools-pages/ts/pages/Trace.tsx
@@ -16,6 +16,7 @@ function Trace() {
         <Base context={context}>
             <TraceComponent />
             <Content>
+                <ContentBlock main title="Get started" />
                 <ContentBlock title="Required steps">
                     <List items={['Step 1', 'Step 2']} />
                 </ContentBlock>
-- 
cgit v1.2.3


From 917952bc2aac353a2375e1fd7906ed14b81a6830 Mon Sep 17 00:00:00 2001
From: Megan Pearson <megan.e.pearson@gmail.com>
Date: Mon, 22 Oct 2018 14:04:23 +0200
Subject: Remove unused imports

---
 packages/dev-tools-pages/ts/components/Content.tsx | 2 --
 1 file changed, 2 deletions(-)

(limited to 'packages/dev-tools-pages/ts')

diff --git a/packages/dev-tools-pages/ts/components/Content.tsx b/packages/dev-tools-pages/ts/components/Content.tsx
index 506f94fab..6f46274f7 100644
--- a/packages/dev-tools-pages/ts/components/Content.tsx
+++ b/packages/dev-tools-pages/ts/components/Content.tsx
@@ -1,9 +1,7 @@
 import * as React from 'react';
 import styled from 'styled-components';
 
-import { Beta } from './Typography';
 import Container from './Container';
-import ContentBlock from './ContentBlock';
 
 const StyledMain =
     styled.div <
-- 
cgit v1.2.3


From f31f9eb24e5376f57d0b4b53a00fd44cf65e9448 Mon Sep 17 00:00:00 2001
From: Megan Pearson <megan.e.pearson@gmail.com>
Date: Mon, 22 Oct 2018 14:48:07 +0200
Subject: Implements Lead typography

---
 packages/dev-tools-pages/ts/components/Intro.tsx      | 5 ++---
 packages/dev-tools-pages/ts/components/Trace.tsx      | 9 ++++-----
 packages/dev-tools-pages/ts/components/Typography.tsx | 8 +++++++-
 3 files changed, 13 insertions(+), 9 deletions(-)

(limited to 'packages/dev-tools-pages/ts')

diff --git a/packages/dev-tools-pages/ts/components/Intro.tsx b/packages/dev-tools-pages/ts/components/Intro.tsx
index 597dddce0..50fa24c13 100644
--- a/packages/dev-tools-pages/ts/components/Intro.tsx
+++ b/packages/dev-tools-pages/ts/components/Intro.tsx
@@ -2,8 +2,7 @@ import * as React from 'react';
 import styled from 'styled-components';
 import { media, colors } from '../variables';
 
-import { Alpha, Beta } from './Typography';
-import Breakout from './Breakout';
+import { Alpha, Lead } from './Typography';
 import Code from './Code';
 
 const Main = styled.div`
@@ -43,7 +42,7 @@ function Intro(props: IntroProps) {
             <Main>
                 <Content>
                     <Title>{props.title}</Title>
-                    <Beta as="div">{props.children}</Beta>
+                    <Lead as="div">{props.children}</Lead>
                 </Content>
                 <Breakout>
                     <Code>Function execute transaction Function execute transaction Function execute transaction</Code>
diff --git a/packages/dev-tools-pages/ts/components/Trace.tsx b/packages/dev-tools-pages/ts/components/Trace.tsx
index 5e52ee154..62994a810 100644
--- a/packages/dev-tools-pages/ts/components/Trace.tsx
+++ b/packages/dev-tools-pages/ts/components/Trace.tsx
@@ -3,7 +3,7 @@ import styled from 'styled-components';
 import { colors, media } from '../variables';
 
 import { withContext, Props } from './withContext';
-import { Alpha, Beta, Gamma } from './Typography';
+import { Alpha, Lead, Gamma } from './Typography';
 import Container from './Container';
 import Code from './Code';
 
@@ -24,7 +24,7 @@ function Trace(props: Props) {
             <Wrapper>
                 <Block>
                     <Alpha>The Issue</Alpha>
-                    <MainCopy as="p">
+                    <MainCopy>
                         Every time an Ethereum transaction fails, it's extremely hard to trace down the troublemaking
                         line of code. The only hint you'll get is a generic error.
                     </MainCopy>
@@ -57,7 +57,7 @@ function Trace(props: Props) {
 
                 <Block background={colors.secondary}>
                     <Alpha>The Fix</Alpha>
-                    <MainCopy as="p">
+                    <MainCopy>
                         Sol-trace will give you full stack traces, including contract names, line numbers and code
                         snippets, every time you encounter an error.
                     </MainCopy>
@@ -155,11 +155,10 @@ const Block =
     `};
 `;
 
-const MainCopy = styled(Beta)`
+const MainCopy = styled(Lead)`
     margin-bottom: 3.1875rem;
     ${media.small`
         margin-bottom: 1.125rem;
-        font-size: 1rem;
     `};
 `;
 
diff --git a/packages/dev-tools-pages/ts/components/Typography.tsx b/packages/dev-tools-pages/ts/components/Typography.tsx
index deac8a976..de4b64457 100644
--- a/packages/dev-tools-pages/ts/components/Typography.tsx
+++ b/packages/dev-tools-pages/ts/components/Typography.tsx
@@ -19,8 +19,14 @@ const Gamma = styled.h4`
     ${media.small`font-size: 0.875rem;`};
 `;
 
+const Lead = styled.p`
+    font-size: 1.25rem;
+
+    ${media.small`font-size: 1rem;`};
+`;
+
 const Small = styled.p`
     font-size: 0.875rem;
 `;
 
-export { Alpha, Beta, Gamma, Small };
+export { Alpha, Beta, Gamma, Lead, Small };
-- 
cgit v1.2.3


From 614ca51cb130003f523209412ad7f8a70604ebf3 Mon Sep 17 00:00:00 2001
From: Megan Pearson <megan.e.pearson@gmail.com>
Date: Mon, 22 Oct 2018 15:20:25 +0200
Subject: Adds wide prop for full width sections

---
 packages/dev-tools-pages/ts/components/Container.tsx | 11 +++++++++--
 packages/dev-tools-pages/ts/components/Intro.tsx     |  5 +++--
 2 files changed, 12 insertions(+), 4 deletions(-)

(limited to 'packages/dev-tools-pages/ts')

diff --git a/packages/dev-tools-pages/ts/components/Container.tsx b/packages/dev-tools-pages/ts/components/Container.tsx
index d6df7a0b4..53fb8427f 100644
--- a/packages/dev-tools-pages/ts/components/Container.tsx
+++ b/packages/dev-tools-pages/ts/components/Container.tsx
@@ -1,9 +1,16 @@
 import styled from 'styled-components';
 
-const Container = styled.div`
+interface ContainerProps {
+    wide?: boolean;
+}
+
+const Container =
+    styled.div <
+    ContainerProps >
+    `
     max-width: 77.5rem;
-    width: calc(100% - 3.75rem);
     margin: 0 auto;
+    width: ${props => (props.wide ? '100%' : 'calc(100% - 3.75rem)')};
 `;
 
 export default Container;
diff --git a/packages/dev-tools-pages/ts/components/Intro.tsx b/packages/dev-tools-pages/ts/components/Intro.tsx
index 50fa24c13..8bba2dbe5 100644
--- a/packages/dev-tools-pages/ts/components/Intro.tsx
+++ b/packages/dev-tools-pages/ts/components/Intro.tsx
@@ -3,6 +3,7 @@ import styled from 'styled-components';
 import { media, colors } from '../variables';
 
 import { Alpha, Lead } from './Typography';
+import Container from './Container';
 import Code from './Code';
 
 const Main = styled.div`
@@ -38,7 +39,7 @@ interface IntroProps {
 
 function Intro(props: IntroProps) {
     return (
-        <Breakout>
+        <Container wide>
             <Main>
                 <Content>
                     <Title>{props.title}</Title>
@@ -48,7 +49,7 @@ function Intro(props: IntroProps) {
                     <Code>Function execute transaction Function execute transaction Function execute transaction</Code>
                 </Breakout>
             </Main>
-        </Breakout>
+        </Container>
     );
 }
 
-- 
cgit v1.2.3


From f0b9365ca9c3df6ab2a6ab8bd3c43713d1bbd0d3 Mon Sep 17 00:00:00 2001
From: Megan Pearson <megan.e.pearson@gmail.com>
Date: Mon, 22 Oct 2018 15:27:31 +0200
Subject: Responsive intro, again

---
 packages/dev-tools-pages/ts/components/Intro.tsx | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

(limited to 'packages/dev-tools-pages/ts')

diff --git a/packages/dev-tools-pages/ts/components/Intro.tsx b/packages/dev-tools-pages/ts/components/Intro.tsx
index 8bba2dbe5..29d1d36fe 100644
--- a/packages/dev-tools-pages/ts/components/Intro.tsx
+++ b/packages/dev-tools-pages/ts/components/Intro.tsx
@@ -29,6 +29,15 @@ const Content = styled.div`
     display: flex;
     flex-direction: column;
 
+    ${Lead} {
+        ${media.small`margin-bottom: 2.25rem;`};
+    }
+`;
+
+const StyledCode = styled(Code)`
+    width: 520px;
+    height: 350px;
+
     ${media.small`margin-bottom: 2.25rem;`};
 `;
 
@@ -45,9 +54,7 @@ function Intro(props: IntroProps) {
                     <Title>{props.title}</Title>
                     <Lead as="div">{props.children}</Lead>
                 </Content>
-                <Breakout>
-                    <Code>Function execute transaction Function execute transaction Function execute transaction</Code>
-                </Breakout>
+                <StyledCode> Function execute transaction</StyledCode>
             </Main>
         </Container>
     );
-- 
cgit v1.2.3


From 66848ef80ffc7d8d7566d8c9623198fd705ec0eb Mon Sep 17 00:00:00 2001
From: Megan Pearson <megan.e.pearson@gmail.com>
Date: Mon, 22 Oct 2018 16:50:18 +0200
Subject: Responsive Compiler

---
 .../dev-tools-pages/ts/components/Compiler.tsx     | 40 ++++++++++++++--------
 1 file changed, 25 insertions(+), 15 deletions(-)

(limited to 'packages/dev-tools-pages/ts')

diff --git a/packages/dev-tools-pages/ts/components/Compiler.tsx b/packages/dev-tools-pages/ts/components/Compiler.tsx
index bda29dc1f..1c975e30d 100644
--- a/packages/dev-tools-pages/ts/components/Compiler.tsx
+++ b/packages/dev-tools-pages/ts/components/Compiler.tsx
@@ -1,22 +1,30 @@
 import * as React from 'react';
 import styled from 'styled-components';
-import { colors } from '../variables';
+import { media, colors } from '../variables';
 
+import Container from './Container';
 import InlineCode from './InlineCode';
 
 const Cards = styled.dl`
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(25rem, 1fr));
-    align-items: start;
-    grid-gap: 1.25rem;
-    margin-top: 0;
-    margin-bottom: 0;
+    column-count: 3;
+    column-gap: 1.25rem;
+
+    ${media.small`
+        column-count: 1;
+    `}: ;
 `;
 
 const Card = styled.div`
     background-color: ${colors.lightGray};
     padding: 3.125rem;
     padding-bottom: 2.5rem;
+    display: inline-block;
+    margin: 0 0 1.25rem;
+    width: 100%;
+
+    ${media.small`
+        padding: 1.875rem;
+    `};
 `;
 
 const Dt = styled.dt`
@@ -63,14 +71,16 @@ const cards = [
 
 function Compiler() {
     return (
-        <Cards>
-            {cards.map(card => (
-                <Card key={card.title.split(' ').join('-')}>
-                    <Dt>{card.title}</Dt>
-                    <Dd>{card.body}</Dd>
-                </Card>
-            ))}
-        </Cards>
+        <Container wide>
+            <Cards>
+                {cards.map(card => (
+                    <Card key={card.title.split(' ').join('-')}>
+                        <Dt>{card.title}</Dt>
+                        <Dd>{card.body}</Dd>
+                    </Card>
+                ))}
+            </Cards>
+        </Container>
     );
 }
 
-- 
cgit v1.2.3


From 0836ab370e179f197f654034e8e813c8617f73cb Mon Sep 17 00:00:00 2001
From: August Skare <post@augustskare.no>
Date: Tue, 23 Oct 2018 10:17:48 +0200
Subject: Update margin-bottom

Co-Authored-By: mepearso <megan.e.pearson@gmail.com>
---
 packages/dev-tools-pages/ts/components/Compiler.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'packages/dev-tools-pages/ts')

diff --git a/packages/dev-tools-pages/ts/components/Compiler.tsx b/packages/dev-tools-pages/ts/components/Compiler.tsx
index 1c975e30d..a5b92da13 100644
--- a/packages/dev-tools-pages/ts/components/Compiler.tsx
+++ b/packages/dev-tools-pages/ts/components/Compiler.tsx
@@ -19,7 +19,7 @@ const Card = styled.div`
     padding: 3.125rem;
     padding-bottom: 2.5rem;
     display: inline-block;
-    margin: 0 0 1.25rem;
+    margin-bottom: 1.25rem;
     width: 100%;
 
     ${media.small`
-- 
cgit v1.2.3


From a4de585feb0f8e5ec99f0eb4a7b9aca8a24144f5 Mon Sep 17 00:00:00 2001
From: August Skare <post@augustskare.no>
Date: Tue, 23 Oct 2018 12:34:35 +0100
Subject: Feature/colors (#5)

* fix color variables

* rename link var to type
---
 packages/dev-tools-pages/ts/components/ContentBlock.tsx | 2 +-
 packages/dev-tools-pages/ts/context/compiler.tsx        | 2 +-
 packages/dev-tools-pages/ts/context/cov.tsx             | 2 +-
 packages/dev-tools-pages/ts/context/profiler.tsx        | 2 +-
 packages/dev-tools-pages/ts/context/trace.tsx           | 4 ++--
 packages/dev-tools-pages/ts/globalStyles.tsx            | 2 +-
 6 files changed, 7 insertions(+), 7 deletions(-)

(limited to 'packages/dev-tools-pages/ts')

diff --git a/packages/dev-tools-pages/ts/components/ContentBlock.tsx b/packages/dev-tools-pages/ts/components/ContentBlock.tsx
index 39c99f6d9..6db4c3994 100644
--- a/packages/dev-tools-pages/ts/components/ContentBlock.tsx
+++ b/packages/dev-tools-pages/ts/components/ContentBlock.tsx
@@ -62,7 +62,7 @@ function ContentBlock(props: ContentBlockProps) {
 
     return (
         <Base>
-            <Title color={props.colors.main}>{props.title}</Title>
+            <Title color={props.colors.type}>{props.title}</Title>
             {children ? <Content>{children}</Content> : null}
         </Base>
     );
diff --git a/packages/dev-tools-pages/ts/context/compiler.tsx b/packages/dev-tools-pages/ts/context/compiler.tsx
index 63a051481..1c174ca2b 100644
--- a/packages/dev-tools-pages/ts/context/compiler.tsx
+++ b/packages/dev-tools-pages/ts/context/compiler.tsx
@@ -9,6 +9,6 @@ export default {
     colors: {
         main: '#1EADCD',
         secondary: '#D1F4FC',
-        link: '#D1F4FC',
+        type: '#30C3E3',
     },
 };
diff --git a/packages/dev-tools-pages/ts/context/cov.tsx b/packages/dev-tools-pages/ts/context/cov.tsx
index 4bf2b6ba7..c39c85eba 100644
--- a/packages/dev-tools-pages/ts/context/cov.tsx
+++ b/packages/dev-tools-pages/ts/context/cov.tsx
@@ -9,6 +9,6 @@ export default {
     colors: {
         main: '#BB9200',
         secondary: '#F1DB8D',
-        link: '#D7AE1B',
+        type: '#D7AE1B',
     },
 };
diff --git a/packages/dev-tools-pages/ts/context/profiler.tsx b/packages/dev-tools-pages/ts/context/profiler.tsx
index d8982c56f..891c2f0bb 100644
--- a/packages/dev-tools-pages/ts/context/profiler.tsx
+++ b/packages/dev-tools-pages/ts/context/profiler.tsx
@@ -9,6 +9,6 @@ export default {
     colors: {
         main: '#FF7144',
         secondary: '#FED7CB',
-        link: '#EB8666',
+        type: '#EB8666',
     },
 };
diff --git a/packages/dev-tools-pages/ts/context/trace.tsx b/packages/dev-tools-pages/ts/context/trace.tsx
index 22289091d..5a239f684 100644
--- a/packages/dev-tools-pages/ts/context/trace.tsx
+++ b/packages/dev-tools-pages/ts/context/trace.tsx
@@ -7,8 +7,8 @@ export default {
     tagline: 'Immediately locate Solidity errors and rapidly debug failed transactions',
     icon: Icon,
     colors: {
-        main: '#5C80FF',
+        main: '#4F76FF',
         secondary: '#CDD8FF',
-        link: '#557AFF',
+        type: '#7090FF',
     },
 };
diff --git a/packages/dev-tools-pages/ts/globalStyles.tsx b/packages/dev-tools-pages/ts/globalStyles.tsx
index f51ea4b1d..16adc61a7 100644
--- a/packages/dev-tools-pages/ts/globalStyles.tsx
+++ b/packages/dev-tools-pages/ts/globalStyles.tsx
@@ -50,7 +50,7 @@ const BaseStyles = createGlobalStyle`
     }
 
     a {
-        color: ${(props: any) => props.colors.link};
+        color: ${(props: any) => props.colors.type};
         text-decoration: none; 
 
         &:hover {
-- 
cgit v1.2.3


From 1c8ea1336e9e0c018ceb38cba90943f1b50eb23a Mon Sep 17 00:00:00 2001
From: August Skare <post@augustskare.no>
Date: Thu, 25 Oct 2018 10:50:09 +0100
Subject: Feature/animations (#6)

* test animation

* test two part video

* new video test

* replace videos with gifs

* rename videos folder to images

* sol-cov gifs

* renames variables

* compiler gif

* change in hero srcset

* better positioning of hero image
---
 packages/dev-tools-pages/ts/components/Hero.tsx | 44 ++++++++++++++++++++-----
 1 file changed, 36 insertions(+), 8 deletions(-)

(limited to 'packages/dev-tools-pages/ts')

diff --git a/packages/dev-tools-pages/ts/components/Hero.tsx b/packages/dev-tools-pages/ts/components/Hero.tsx
index f52ce5bc9..e045a7ad4 100644
--- a/packages/dev-tools-pages/ts/components/Hero.tsx
+++ b/packages/dev-tools-pages/ts/components/Hero.tsx
@@ -6,16 +6,26 @@ import { withContext, Props } from './withContext';
 import Button from './Button';
 import { Beta } from './Typography';
 
+const IMAGE_WIDTH = 2560;
+const IMAGE_HEIGHT = 800;
+
 function Hero(props: Props) {
-    const { subtitle, tagline } = props;
+    const { subtitle, tagline, title } = props;
+
     return (
-        <StyledHero>
-            <Subtitle>{subtitle}</Subtitle>
-            <Tagline as="p">{tagline}</Tagline>
-            <Button as="a" href="#" large>
-                Read the Docs
-            </Button>
-        </StyledHero>
+        <React.Fragment>
+            <StyledHero>
+                <Subtitle>{subtitle}</Subtitle>
+                <Tagline as="p">{tagline}</Tagline>
+                <Button as="a" href="#" large>
+                    Read the Docs
+                </Button>
+            </StyledHero>
+
+            <ImageContainer>
+                <Image src={`/images/${title}@1x.gif`} srcSet={`/images/${title}@1x.gif, /images/${title}@2x.gif 2x`} />
+            </ImageContainer>
+        </React.Fragment>
     );
 }
 
@@ -51,4 +61,22 @@ const Tagline = styled(Beta)`
     `};
 `;
 
+const ImageContainer = styled.div`
+    width: 100%;
+    height: ${IMAGE_HEIGHT}px;
+    position: absolute;
+    top: 6.875rem;
+    left: 0;
+    overflow: hidden;
+    z-index: -1;
+`;
+
+const Image = styled.img`
+    width: ${IMAGE_WIDTH}px;
+    position: absolute;
+    top: 0;
+    left: 50%;
+    transform: translate(-50%);
+`;
+
 export default withContext(Hero);
-- 
cgit v1.2.3


From e5d3e3b33a88e2b08ed02cb39910fab28e130594 Mon Sep 17 00:00:00 2001
From: August Skare <post@augustskare.no>
Date: Thu, 25 Oct 2018 10:54:53 +0100
Subject: Feature/tweaks (#8)

* show copy button on focs

* change base link styling

* text-decoration underline on basic links

* basic hover and focus styles on button and tabs

* add links in footer

* change breakpoints vars

* medium breakpoint on footer
---
 packages/dev-tools-pages/ts/components/Button.tsx |  3 +++
 packages/dev-tools-pages/ts/components/Code.tsx   |  3 +++
 packages/dev-tools-pages/ts/components/Footer.tsx | 25 ++++++++++++++++----
 packages/dev-tools-pages/ts/components/Header.tsx |  4 +++-
 packages/dev-tools-pages/ts/components/Tabs.tsx   | 28 ++++++++++++-----------
 packages/dev-tools-pages/ts/globalStyles.tsx      |  7 +++++-
 packages/dev-tools-pages/ts/variables.tsx         |  5 ++--
 7 files changed, 53 insertions(+), 22 deletions(-)

(limited to 'packages/dev-tools-pages/ts')

diff --git a/packages/dev-tools-pages/ts/components/Button.tsx b/packages/dev-tools-pages/ts/components/Button.tsx
index eae6aaf54..90d991496 100644
--- a/packages/dev-tools-pages/ts/components/Button.tsx
+++ b/packages/dev-tools-pages/ts/components/Button.tsx
@@ -23,6 +23,9 @@ const Button =
   border-radius: 5rem;
   padding: ${props => (props.large ? '1.125rem 2.375rem' : '.5625rem 1.25rem')};
   display: inline-block;
+  :hover, :focus {
+    color: ${props => props.colors.main};
+  } 
   ${props =>
       props.large &&
       media.small`
diff --git a/packages/dev-tools-pages/ts/components/Code.tsx b/packages/dev-tools-pages/ts/components/Code.tsx
index 02bd0382e..88cfba7f8 100644
--- a/packages/dev-tools-pages/ts/components/Code.tsx
+++ b/packages/dev-tools-pages/ts/components/Code.tsx
@@ -21,6 +21,9 @@ const Button = styled(BaseButton)`
     top: 1rem;
     right: 1rem;
     transition: opacity 0.2s;
+    :focus {
+        opacity: 1;
+    }
 `;
 
 const Base =
diff --git a/packages/dev-tools-pages/ts/components/Footer.tsx b/packages/dev-tools-pages/ts/components/Footer.tsx
index df2d920ac..de479a81e 100644
--- a/packages/dev-tools-pages/ts/components/Footer.tsx
+++ b/packages/dev-tools-pages/ts/components/Footer.tsx
@@ -27,7 +27,11 @@ function Footer(props: Props) {
                             <ListItem key={title}>
                                 <Icon as={icon} />
                                 <div>
-                                    <Beta>{title}</Beta>
+                                    <Beta>
+                                        <StyledLink colors={colors} href="#">
+                                            {title}
+                                        </StyledLink>
+                                    </Beta>
                                     <p>{subtitle}</p>
                                 </div>
                             </ListItem>
@@ -59,13 +63,13 @@ const Top = styled.div`
     justify-content: space-between;
     margin-bottom: 9.375rem;
 
-    ${media.small`
+    ${media.medium`
         display: block;
         margin-bottom: 5.3125rem;
     `};
 
     ${Alpha} {
-        ${media.small`margin-bottom: 3.8125rem;`};
+        ${media.medium`margin-bottom: 3.8125rem;`};
     }
 `;
 
@@ -92,9 +96,13 @@ const List = styled.ul`
     margin: 0;
     padding: 0;
 
+    ${media.medium`
+    
+        width: 100%; 
+    `};
+
     ${media.small`
         display: block;
-        width: 100%; 
     `};
 `;
 
@@ -123,4 +131,13 @@ const Small = styled.small`
     max-width: 37.5rem;
 `;
 
+const StyledLink =
+    styled.a <
+    { colors: any } >
+    `
+    :hover {
+        color: ${props => props.colors.main};
+    }
+`;
+
 export default withContext(Footer);
diff --git a/packages/dev-tools-pages/ts/components/Header.tsx b/packages/dev-tools-pages/ts/components/Header.tsx
index aeefae3cc..44074cca3 100644
--- a/packages/dev-tools-pages/ts/components/Header.tsx
+++ b/packages/dev-tools-pages/ts/components/Header.tsx
@@ -62,7 +62,9 @@ const Title = styled.h1`
 `;
 
 const StyledLink = styled(Small)`
-    color: inherit;
+    :hover {
+        text-decoration: underline;
+    }
 `;
 
 const Link = StyledLink as any;
diff --git a/packages/dev-tools-pages/ts/components/Tabs.tsx b/packages/dev-tools-pages/ts/components/Tabs.tsx
index 5307483e8..4d436f519 100644
--- a/packages/dev-tools-pages/ts/components/Tabs.tsx
+++ b/packages/dev-tools-pages/ts/components/Tabs.tsx
@@ -24,23 +24,25 @@ const StyledTab = styled(Tab)`
     &:not(:first-of-type) {
         margin-left: 0.25rem;
     }
-    &:focus,
-    &:hover {
-        color: red;
-        outline: 0;
-    }
 `;
 
 const Root =
     styled.div <
-    { primaryColor: string } >
+    { colors: any } >
     `
-  ${StyledTab} {
-    background-color: ${props => props.primaryColor};
-  }
-  ${StyledTab}[aria-selected="true"] {
-    background-color: ${colors.gray};
-  } 
+    ${StyledTab} {
+        background-color: ${props => props.colors.secondary};
+        &[aria-selected="true"] {
+            background-color: ${colors.gray};
+
+        }
+
+        &[aria-selected="false"]:focus,
+        &[aria-selected="false"]:hover {
+            color: ${props => props.colors.main};
+            cursor: pointer;
+        }
+    }
 `;
 
 interface TabsProps extends Props {
@@ -50,7 +52,7 @@ interface TabsProps extends Props {
 function Tabs(props: TabsProps) {
     return (
         <Breakout>
-            <Root primaryColor={props.colors.secondary}>
+            <Root colors={props.colors}>
                 <ReactTabs>
                     <StyledTabList>
                         {React.Children.map(props.children, child => {
diff --git a/packages/dev-tools-pages/ts/globalStyles.tsx b/packages/dev-tools-pages/ts/globalStyles.tsx
index 16adc61a7..270929123 100644
--- a/packages/dev-tools-pages/ts/globalStyles.tsx
+++ b/packages/dev-tools-pages/ts/globalStyles.tsx
@@ -50,11 +50,16 @@ const BaseStyles = createGlobalStyle`
     }
 
     a {
+        color: inherit;
+        text-decoration: none;
+    }
+
+    a:not([class]) {
         color: ${(props: any) => props.colors.type};
         text-decoration: none; 
 
         &:hover {
-            color: red; //what should this be?
+            text-decoration: underline;
         }
     }
     
diff --git a/packages/dev-tools-pages/ts/variables.tsx b/packages/dev-tools-pages/ts/variables.tsx
index b23bb3e52..8f08d13eb 100644
--- a/packages/dev-tools-pages/ts/variables.tsx
+++ b/packages/dev-tools-pages/ts/variables.tsx
@@ -14,9 +14,8 @@ interface SizesInterface {
 }
 
 const sizes: SizesInterface = {
-    large: 992,
-    medium: 768,
-    small: 376,
+    medium: 900,
+    small: 650,
 };
 
 const media = Object.keys(sizes).reduce((acc: any, label: string) => {
-- 
cgit v1.2.3


From 1ae9f68db8c9768e68d1eab1f411b346e9512c1c Mon Sep 17 00:00:00 2001
From: August Skare <post@augustskare.no>
Date: Thu, 25 Oct 2018 12:10:35 +0100
Subject: Content (#7)

* optional children in List component

* added real content to trace page

* added real content to cov page

* add support for json highlighting

* real content on compiler page

* real content on profiler page

* remove unused import

* remove list from compiler page

* wrap code components in pages with breakout component

* fix font size on text

* fix typo
---
 packages/dev-tools-pages/ts/components/List.tsx |  15 ++-
 packages/dev-tools-pages/ts/highlight.tsx       |   2 +
 packages/dev-tools-pages/ts/pages/Compiler.tsx  | 128 ++++++++++++++++++------
 packages/dev-tools-pages/ts/pages/Cov.tsx       |  53 +++++++---
 packages/dev-tools-pages/ts/pages/Profiler.tsx  |  49 +++++++--
 packages/dev-tools-pages/ts/pages/Trace.tsx     |  49 +++++++--
 6 files changed, 231 insertions(+), 65 deletions(-)

(limited to 'packages/dev-tools-pages/ts')

diff --git a/packages/dev-tools-pages/ts/components/List.tsx b/packages/dev-tools-pages/ts/components/List.tsx
index 3041fc475..ceb3bc108 100644
--- a/packages/dev-tools-pages/ts/components/List.tsx
+++ b/packages/dev-tools-pages/ts/components/List.tsx
@@ -26,14 +26,19 @@ const StyledItem = styled.li`
 `;
 
 interface ListProps {
-    items: Array<string>;
+    items?: Array<string>;
+    children?: React.ReactNode;
 }
 
 function List(props: ListProps) {
-    const items = props.items;
-    const listItems = items.map((bullet, index) => <StyledItem key={index}>{bullet}</StyledItem>);
-
-    return <StyledList>{listItems}</StyledList>;
+    return (
+        <StyledList>
+            {props.children !== undefined
+                ? props.children
+                : props.items.map((bullet, index) => <StyledItem key={index}>{bullet}</StyledItem>)}
+        </StyledList>
+    );
 }
 
 export default List;
+export { List, StyledItem as ListItem };
diff --git a/packages/dev-tools-pages/ts/highlight.tsx b/packages/dev-tools-pages/ts/highlight.tsx
index 0c4602d51..9d7844c89 100644
--- a/packages/dev-tools-pages/ts/highlight.tsx
+++ b/packages/dev-tools-pages/ts/highlight.tsx
@@ -1,6 +1,8 @@
 const highlight = require('highlight.js/lib/highlight');
 const javascript = require('highlight.js/lib/languages/javascript');
+const json = require('highlight.js/lib/languages/json');
 
 highlight.registerLanguage('javascript', javascript);
+highlight.registerLanguage('json', json);
 
 export default highlight;
diff --git a/packages/dev-tools-pages/ts/pages/Compiler.tsx b/packages/dev-tools-pages/ts/pages/Compiler.tsx
index 96f26a978..92390e20b 100644
--- a/packages/dev-tools-pages/ts/pages/Compiler.tsx
+++ b/packages/dev-tools-pages/ts/pages/Compiler.tsx
@@ -1,15 +1,15 @@
 import * as React from 'react';
 import { render, hydrate } from 'react-dom';
 
+import { Lead } from 'ts/components/Typography';
 import context from 'ts/context/compiler';
 import Base from 'ts/components/Base';
 import Content from 'ts/components/Content';
 import ContentBlock from 'ts/components/ContentBlock';
-import { Tabs, TabBlock } from 'ts/components/Tabs';
 import Code from 'ts/components/Code';
 import InlineCode from 'ts/components/InlineCode';
-import List from 'ts/components/List';
 import CompilerComponent from 'ts/components/Compiler';
+import Breakout from 'ts/components/Breakout';
 
 function Compiler() {
     return (
@@ -17,41 +17,51 @@ function Compiler() {
             <CompilerComponent />
             <Content>
                 <ContentBlock main title="Get started" />
-                <ContentBlock title="Required steps">
-                    <List items={['Step 1', 'Step 2']} />
-                </ContentBlock>
-                <ContentBlock title="Prerequisites">
-                    <Code>npm install @0x/sol-trace --save</Code>
-                    <p>
-                        Sol-trace is a subprovider that needs to be prepended to your <a href="#">provider engine</a>.
-                        Depending on your project setup, you will need to use a specific ArtifactAdapter. Sol-trace
-                        ships with the <InlineCode>SolCompilerArtifactAdapter</InlineCode> for use with Sol-compiler and{' '}
-                        <InlineCode>TruffleArtifactAdapter</InlineCode> for use with the Truffle framework. You can also
-                        write your own and support any artifact format.
-                    </p>
+                <ContentBlock title="Install">
+                    <Breakout>
+                        <Code>npm install @0x/sol-compiler --g</Code>
+                    </Breakout>
                 </ContentBlock>
 
-                <ContentBlock title="Installation">
-                    <Tabs>
-                        <TabBlock title="Sol-compiler">
-                            <Code language="js">
-                                {`import { SolCompilerArtifactAdapter } from '@0x/sol-trace';
+                <ContentBlock title="Run">
+                    <Breakout>
+                        <Code>cd /your_project_dir && sol-compiler</Code>
+                    </Breakout>
+                </ContentBlock>
 
-// Both artifactsDir and contractsDir are optional and will be fetched from compiler.json if not passed in
-const artifactAdapter = new SolCompilerArtifactAdapter(artifactsDir, contractsDir);`}
-                            </Code>
-                        </TabBlock>
-                        <TabBlock title="Truffle">Truffle</TabBlock>
-                        <TabBlock title="Custom">Custom</TabBlock>
-                    </Tabs>
+                <ContentBlock title="Configure">
+                    <p>
+                        Configure via a <InlineCode>compiler.json</InlineCode> file.
+                    </p>
+                    <Breakout>
+                        <Code>mkdir compiler.json</Code>
+                    </Breakout>
+                    <p>Example of settings:</p>
+                    <Breakout>
+                        <Code language="json">
+                            {`{
+    "contractsDir": "contracts",
+    "artifactsDir": "artifacts",
+    "contracts": "*",
+    "compilerSettings": {
+        "optimizer": { "enabled": false },
+        "outputSelection": {
+            "*": {
+                "*": ["abi", "evm.bytecode.object"]
+            }
+        }
+    }
+}`}
+                        </Code>
+                    </Breakout>
                 </ContentBlock>
             </Content>
             <Content dark>
                 <ContentBlock main title="Artifacts">
-                    <p>
+                    <Lead>
                         Sol compiler uses solidity standard JSON output format for the artifacts. This way, you can
                         define which parts of the artifact you need.
-                    </p>
+                    </Lead>
                 </ContentBlock>
 
                 <ContentBlock title="Production">
@@ -59,6 +69,68 @@ const artifactAdapter = new SolCompilerArtifactAdapter(artifactsDir, contractsDi
                         Sol compiler uses solidity standard JSON output format for the artifacts. This way, you can
                         define which parts of the artifact you need.
                     </p>
+                    <Breakout>
+                        <Code light language="json">
+                            {`{
+    ...
+    "compilerSettings": {
+        "outputSelection": {
+            "*": {
+                "*": ["abi"]
+            }
+        }
+    }
+    ...
+}`}
+                        </Code>
+                    </Breakout>
+                    <Breakout>
+                        <Code light language="json">
+                            {`{
+    ...
+    "compilerSettings": {
+        "outputSelection": {
+            "*": {
+                "*": [
+                    "abi",
+                    "evm.bytecode.object",
+                    "evm.bytecode.sourceMap",
+                    "evm.deployedBytecode.object",
+                    "evm.deployedBytecode.sourceMap"
+                ]
+            }
+        }
+    }
+    ...
+}`}
+                        </Code>
+                    </Breakout>
+                    <Breakout>
+                        <Code light language="json">
+                            {`{
+    ...
+    "compilerOutput": {
+        "abi": [...],
+        "evm": {
+            "bytecode": {
+                "object": "0xdeadbeef",
+                "sourceMap": "26:480:..."
+            },
+            "deployedBytecode": {
+                "object": "0xdeadbeef",
+                "sourceMap": "26:480:0..."
+            }
+        }
+    }
+    "sources": {
+        "Migrations.sol": {
+            "id": 0
+        }
+    },
+    ...
+}`}
+                        </Code>
+                    </Breakout>
                 </ContentBlock>
             </Content>
         </Base>
diff --git a/packages/dev-tools-pages/ts/pages/Cov.tsx b/packages/dev-tools-pages/ts/pages/Cov.tsx
index c3dfb33c5..ccaa60d5a 100644
--- a/packages/dev-tools-pages/ts/pages/Cov.tsx
+++ b/packages/dev-tools-pages/ts/pages/Cov.tsx
@@ -8,8 +8,9 @@ import ContentBlock from 'ts/components/ContentBlock';
 import { Tabs, TabBlock } from 'ts/components/Tabs';
 import Code from 'ts/components/Code';
 import InlineCode from 'ts/components/InlineCode';
-import List from 'ts/components/List';
+import { List, ListItem } from 'ts/components/List';
 import Intro from 'ts/components/Intro';
+import Breakout from 'ts/components/Breakout';
 
 function Cov() {
     return (
@@ -23,21 +24,30 @@ function Cov() {
             </Intro>
             <Content>
                 <ContentBlock main title="Get started" />
-                <ContentBlock title="Required steps">
-                    <List items={['Step 1', 'Step 2']} />
-                </ContentBlock>
                 <ContentBlock title="Prerequisites">
-                    <Code>npm install @0x/sol-trace --save</Code>
+                    <List>
+                        <ListItem>
+                            Use <a href="#">ganache-cli</a> as a backing node.
+                        </ListItem>
+                        <ListItem>
+                            Understand and use <a href="#">web3-provider-engine</a>.
+                        </ListItem>
+                    </List>
+                </ContentBlock>
+                <ContentBlock title="Installation">
+                    <Breakout>
+                        <Code>npm install @0x/sol-cov --save</Code>
+                    </Breakout>
+
                     <p>
-                        Sol-trace is a subprovider that needs to be prepended to your <a href="#">provider engine</a>.
-                        Depending on your project setup, you will need to use a specific ArtifactAdapter. Sol-trace
-                        ships with the <InlineCode>SolCompilerArtifactAdapter</InlineCode> for use with Sol-compiler and{' '}
-                        <InlineCode>TruffleArtifactAdapter</InlineCode> for use with the Truffle framework. You can also
-                        write your own and support any artifact format.
+                        Sol-cov is a subprovider that needs to be prepended to your <a href="#">provider engine</a>.
+                        Depending on your project setup, you will need to use a specific ArtifactAdapter. Sol-cov ships
+                        with the <InlineCode>SolCompilerArtifactAdapter</InlineCode> for use with{' '}
+                        <a href="#">Sol-compiler</a> and <InlineCode>TruffleArtifactAdapter</InlineCode> for use with
+                        the <a href="#">Truffle framework</a>. You can also write your own and support any artifact
+                        format.
                     </p>
-                </ContentBlock>
 
-                <ContentBlock title="Installation">
                     <Tabs>
                         <TabBlock title="Sol-compiler">
                             <Code language="js">
@@ -50,6 +60,25 @@ const artifactAdapter = new SolCompilerArtifactAdapter(artifactsDir, contractsDi
                         <TabBlock title="Truffle">Truffle</TabBlock>
                         <TabBlock title="Custom">Custom</TabBlock>
                     </Tabs>
+                    <p>
+                        Now that we have an <InlineCode>artifactAdapter</InlineCode>, we can create a{' '}
+                        <InlineCode>RevertTraceSubprovider</InlineCode> and append it to our provider engine.
+                    </p>
+
+                    <Breakout>
+                        <Code language="js">
+                            {`import { ProviderEngine, RpcSubprovider } from 'web3-provider-engine';
+import { RevertTraceSubprovider } from '@0x/sol-cov';
+
+const defaultFromAddress = "..."; // Some ethereum address with test funds
+const revertTraceSubprovider = new RevertTraceSubprovider(artifactAdapter, defaultFromAddress);
+
+const providerEngine = new ProviderEngine();
+providerEngine.addProvider(revertTraceSubprovider);
+providerEngine.addProvider(new RpcSubprovider({rpcUrl: 'http://localhost:8545'}));
+providerEngine.start();`}
+                        </Code>
+                    </Breakout>
                 </ContentBlock>
             </Content>
         </Base>
diff --git a/packages/dev-tools-pages/ts/pages/Profiler.tsx b/packages/dev-tools-pages/ts/pages/Profiler.tsx
index 48c4c122b..ac88bd933 100644
--- a/packages/dev-tools-pages/ts/pages/Profiler.tsx
+++ b/packages/dev-tools-pages/ts/pages/Profiler.tsx
@@ -8,8 +8,9 @@ import ContentBlock from 'ts/components/ContentBlock';
 import { Tabs, TabBlock } from 'ts/components/Tabs';
 import Code from 'ts/components/Code';
 import InlineCode from 'ts/components/InlineCode';
-import List from 'ts/components/List';
+import { List, ListItem } from 'ts/components/List';
 import Intro from 'ts/components/Intro';
+import Breakout from 'ts/components/Breakout';
 
 function Profiler() {
     return (
@@ -23,21 +24,30 @@ function Profiler() {
             </Intro>
             <Content>
                 <ContentBlock main title="Get started" />
-                <ContentBlock title="Required steps">
-                    <List items={['Step 1', 'Step 2']} />
-                </ContentBlock>
                 <ContentBlock title="Prerequisites">
-                    <Code>npm install @0x/sol-trace --save</Code>
+                    <List>
+                        <ListItem>
+                            Use <a href="#">ganache-cli</a> as a backing node.
+                        </ListItem>
+                        <ListItem>
+                            Understand and use <a href="#">web3-provider-engine</a>.
+                        </ListItem>
+                    </List>
+                </ContentBlock>
+                <ContentBlock title="Installation">
+                    <Breakout>
+                        <Code>npm install @0x/sol-trace --save</Code>
+                    </Breakout>
+
                     <p>
                         Sol-trace is a subprovider that needs to be prepended to your <a href="#">provider engine</a>.
                         Depending on your project setup, you will need to use a specific ArtifactAdapter. Sol-trace
-                        ships with the <InlineCode>SolCompilerArtifactAdapter</InlineCode> for use with Sol-compiler and{' '}
-                        <InlineCode>TruffleArtifactAdapter</InlineCode> for use with the Truffle framework. You can also
-                        write your own and support any artifact format.
+                        ships with the <InlineCode>SolCompilerArtifactAdapter</InlineCode> for use with{' '}
+                        <a href="#">Sol-compiler</a> and <InlineCode>TruffleArtifactAdapter</InlineCode> for use with
+                        the <a href="#">Truffle framework</a>. You can also write your own and support any artifact
+                        format.
                     </p>
-                </ContentBlock>
 
-                <ContentBlock title="Installation">
                     <Tabs>
                         <TabBlock title="Sol-compiler">
                             <Code language="js">
@@ -50,6 +60,25 @@ const artifactAdapter = new SolCompilerArtifactAdapter(artifactsDir, contractsDi
                         <TabBlock title="Truffle">Truffle</TabBlock>
                         <TabBlock title="Custom">Custom</TabBlock>
                     </Tabs>
+                    <p>
+                        Now that we have an <InlineCode>artifactAdapter</InlineCode>, we can create a{' '}
+                        <InlineCode>RevertTraceSubprovider</InlineCode> and append it to our provider engine.
+                    </p>
+
+                    <Breakout>
+                        <Code language="js">
+                            {`import { ProviderEngine, RpcSubprovider } from 'web3-provider-engine';
+import { RevertTraceSubprovider } from '@0x/sol-cov';
+
+const defaultFromAddress = "..."; // Some ethereum address with test funds
+const revertTraceSubprovider = new RevertTraceSubprovider(artifactAdapter, defaultFromAddress);
+
+const providerEngine = new ProviderEngine();
+providerEngine.addProvider(revertTraceSubprovider);
+providerEngine.addProvider(new RpcSubprovider({rpcUrl: 'http://localhost:8545'}));
+providerEngine.start();`}
+                        </Code>
+                    </Breakout>
                 </ContentBlock>
             </Content>
         </Base>
diff --git a/packages/dev-tools-pages/ts/pages/Trace.tsx b/packages/dev-tools-pages/ts/pages/Trace.tsx
index 961f4534f..870402df6 100644
--- a/packages/dev-tools-pages/ts/pages/Trace.tsx
+++ b/packages/dev-tools-pages/ts/pages/Trace.tsx
@@ -8,8 +8,9 @@ import ContentBlock from 'ts/components/ContentBlock';
 import { Tabs, TabBlock } from 'ts/components/Tabs';
 import Code from 'ts/components/Code';
 import InlineCode from 'ts/components/InlineCode';
-import List from 'ts/components/List';
+import { List, ListItem } from 'ts/components/List';
 import TraceComponent from 'ts/components/Trace';
+import Breakout from 'ts/components/Breakout';
 
 function Trace() {
     return (
@@ -17,21 +18,30 @@ function Trace() {
             <TraceComponent />
             <Content>
                 <ContentBlock main title="Get started" />
-                <ContentBlock title="Required steps">
-                    <List items={['Step 1', 'Step 2']} />
-                </ContentBlock>
                 <ContentBlock title="Prerequisites">
-                    <Code>npm install @0x/sol-trace --save</Code>
+                    <List>
+                        <ListItem>
+                            Use <a href="#">ganache-cli</a> as a backing node.
+                        </ListItem>
+                        <ListItem>
+                            Understand and use <a href="#">web3-provider-engine</a>.
+                        </ListItem>
+                    </List>
+                </ContentBlock>
+                <ContentBlock title="Installation">
+                    <Breakout>
+                        <Code>npm install @0x/sol-trace --save</Code>
+                    </Breakout>
+
                     <p>
                         Sol-trace is a subprovider that needs to be prepended to your <a href="#">provider engine</a>.
                         Depending on your project setup, you will need to use a specific ArtifactAdapter. Sol-trace
-                        ships with the <InlineCode>SolCompilerArtifactAdapter</InlineCode> for use with Sol-compiler and{' '}
-                        <InlineCode>TruffleArtifactAdapter</InlineCode> for use with the Truffle framework. You can also
-                        write your own and support any artifact format.
+                        ships with the <InlineCode>SolCompilerArtifactAdapter</InlineCode> for use with{' '}
+                        <a href="#">Sol-compiler</a> and <InlineCode>TruffleArtifactAdapter</InlineCode> for use with
+                        the <a href="#">Truffle framework</a>. You can also write your own and support any artifact
+                        format.
                     </p>
-                </ContentBlock>
 
-                <ContentBlock title="Installation">
                     <Tabs>
                         <TabBlock title="Sol-compiler">
                             <Code language="js">
@@ -44,6 +54,25 @@ const artifactAdapter = new SolCompilerArtifactAdapter(artifactsDir, contractsDi
                         <TabBlock title="Truffle">Truffle</TabBlock>
                         <TabBlock title="Custom">Custom</TabBlock>
                     </Tabs>
+                    <p>
+                        Now that we have an <InlineCode>artifactAdapter</InlineCode>, we can create a{' '}
+                        <InlineCode>RevertTraceSubprovider</InlineCode> and append it to our provider engine.
+                    </p>
+
+                    <Breakout>
+                        <Code language="js">
+                            {`import { ProviderEngine, RpcSubprovider } from 'web3-provider-engine';
+import { RevertTraceSubprovider } from '@0x/sol-cov';
+
+const defaultFromAddress = "..."; // Some ethereum address with test funds
+const revertTraceSubprovider = new RevertTraceSubprovider(artifactAdapter, defaultFromAddress);
+
+const providerEngine = new ProviderEngine();
+providerEngine.addProvider(revertTraceSubprovider);
+providerEngine.addProvider(new RpcSubprovider({rpcUrl: 'http://localhost:8545'}));
+providerEngine.start();`}
+                        </Code>
+                    </Breakout>
                 </ContentBlock>
             </Content>
         </Base>
-- 
cgit v1.2.3


From 16b515707823f7f60f641665a3a96b3092d881ee Mon Sep 17 00:00:00 2001
From: Megan Pearson <megan.e.pearson@gmail.com>
Date: Tue, 23 Oct 2018 16:05:28 +0200
Subject: Updates Intro Component to use IntroBody and IntroAside

---
 packages/dev-tools-pages/ts/components/Intro.tsx | 41 +++++++++++++++---------
 packages/dev-tools-pages/ts/pages/Cov.tsx        | 15 +++++++--
 2 files changed, 37 insertions(+), 19 deletions(-)

(limited to 'packages/dev-tools-pages/ts')

diff --git a/packages/dev-tools-pages/ts/components/Intro.tsx b/packages/dev-tools-pages/ts/components/Intro.tsx
index 29d1d36fe..4fc1289fb 100644
--- a/packages/dev-tools-pages/ts/components/Intro.tsx
+++ b/packages/dev-tools-pages/ts/components/Intro.tsx
@@ -4,7 +4,6 @@ import { media, colors } from '../variables';
 
 import { Alpha, Lead } from './Typography';
 import Container from './Container';
-import Code from './Code';
 
 const Main = styled.div`
     background-color: ${colors.lightGray};
@@ -18,46 +17,56 @@ const Main = styled.div`
     `};
 `;
 
+const Inner = styled.div`
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+`;
+
 const Title = styled(Alpha)`
     margin-bottom: 2.5rem;
 
     ${media.small`margin-bottom: 2.25rem;`};
 `;
 
-const Content = styled.div`
-    max-width: 25.9375rem;
+const Blocks = styled.div`
     display: flex;
-    flex-direction: column;
+    justify-content: space-between;
 
-    ${Lead} {
-        ${media.small`margin-bottom: 2.25rem;`};
-    }
+    ${media.small`display: block;`};
 `;
 
-const StyledCode = styled(Code)`
-    width: 520px;
-    height: 350px;
+const IntroLead = styled(Lead)`
+    max-width: 25.9375rem;
 
-    ${media.small`margin-bottom: 2.25rem;`};
+    ${media.small`margin-bottom: 1.5625rem;`};
+`;
+const IntroAside = styled.div`
+    max-width: 32.5rem;
+
+    ${media.small`
+        margin-left: -30px;
+        width: calc(100% + 60px);
+    `};
 `;
 
 interface IntroProps {
     title: string;
-    children: React.ReactNode;
+    children?: React.ReactNode;
 }
 
 function Intro(props: IntroProps) {
     return (
         <Container wide>
             <Main>
-                <Content>
+                <Inner>
                     <Title>{props.title}</Title>
-                    <Lead as="div">{props.children}</Lead>
-                </Content>
-                <StyledCode> Function execute transaction</StyledCode>
+                    <Blocks>{props.children}</Blocks>
+                </Inner>
             </Main>
         </Container>
     );
 }
 
 export default Intro;
+export { IntroLead, IntroAside, Intro };
diff --git a/packages/dev-tools-pages/ts/pages/Cov.tsx b/packages/dev-tools-pages/ts/pages/Cov.tsx
index ccaa60d5a..8fd1ace43 100644
--- a/packages/dev-tools-pages/ts/pages/Cov.tsx
+++ b/packages/dev-tools-pages/ts/pages/Cov.tsx
@@ -9,19 +9,28 @@ import { Tabs, TabBlock } from 'ts/components/Tabs';
 import Code from 'ts/components/Code';
 import InlineCode from 'ts/components/InlineCode';
 import { List, ListItem } from 'ts/components/List';
-import Intro from 'ts/components/Intro';
 import Breakout from 'ts/components/Breakout';
+import { Intro, IntroLead, IntroAside } from 'ts/components/Intro';
 
 function Cov() {
     return (
         <Base context={context}>
             <Intro title="Measure your tests">
-                <p>
+                <IntroLead>
                     When it comes to writing smart contracts, testing is one of the most important steps of the process.
                     In order to quantify the robustness of your Solidity testing suite, you need to measure its code
                     coverage.
-                </p>
+                </IntroLead>
+                <IntroAside>
+                    <Code language="js">
+                        {`import { SolCompilerArtifactAdapter } from '@0x/sol-trace';
+
+// Both artifactsDir and contractsDir are optional and will be fetched from compiler.json if not passed in
+const artifactAdapter = new SolCompilerArtifactAdapter(artifactsDir, contractsDir);`}
+                    </Code>
+                </IntroAside>
             </Intro>
+
             <Content>
                 <ContentBlock main title="Get started" />
                 <ContentBlock title="Prerequisites">
-- 
cgit v1.2.3


From 9cf055c1596d8abce854fea8f4e209573d6df7c8 Mon Sep 17 00:00:00 2001
From: Megan Pearson <megan.e.pearson@gmail.com>
Date: Wed, 24 Oct 2018 14:31:07 +0200
Subject: Add highlighter.js; basic styling for .diff classes; Start of code
 block in cov

---
 packages/dev-tools-pages/ts/components/Code.tsx | 32 +++++++++++++++++++------
 packages/dev-tools-pages/ts/globals.d.ts        |  1 +
 packages/dev-tools-pages/ts/pages/Cov.tsx       | 18 ++++++++++----
 3 files changed, 40 insertions(+), 11 deletions(-)

(limited to 'packages/dev-tools-pages/ts')

diff --git a/packages/dev-tools-pages/ts/components/Code.tsx b/packages/dev-tools-pages/ts/components/Code.tsx
index 88cfba7f8..5a03e79ac 100644
--- a/packages/dev-tools-pages/ts/components/Code.tsx
+++ b/packages/dev-tools-pages/ts/components/Code.tsx
@@ -4,6 +4,8 @@ import styled from 'styled-components';
 import { colors } from 'ts/variables';
 import BaseButton from './Button';
 
+var highlight = require('highlighter')();
+
 interface CodeProps {
     children: React.ReactNode;
     language?: string;
@@ -28,11 +30,11 @@ const Button = styled(BaseButton)`
 
 const Base =
     styled.div <
-    CodeProps >
-    `
+        CodeProps >
+        `
     color: ${props => (props.language === undefined ? colors.white : 'inherit')};
     background-color: ${props =>
-        props.light ? 'rgba(255,255,255,.15)' : props.language === undefined ? colors.black : colors.lightGray};
+            props.light ? 'rgba(255,255,255,.15)' : props.language === undefined ? colors.black : colors.lightGray};
     white-space: ${props => (props.language === undefined ? 'nowrap' : '')};
     position: relative;
     &:hover ${Button} {
@@ -41,10 +43,25 @@ const Base =
 `;
 
 const StyledCode = styled.code`
-    padding: 1.5rem;
+    padding-top: 1.5rem;
+    padding-bottom: 1.5rem;
     display: block;
     overflow-y: scroll;
     -webkit-overflow-scrolling: touch;
+
+    
+    .diff-addition {
+        background-color: #d2e9e0;
+        padding: 0.3125rem;
+        display: inline-block;
+        width: 100%;
+    }
+    .diff-deletion {
+        background-color: #ebdcdc;
+        padding: 0.3125rem;
+        display: inline-block;
+        width: 100%;
+    }
 `;
 
 const StyledPre = styled.pre`
@@ -75,7 +92,8 @@ class Code extends React.Component<CodeProps, CodeState> {
 
         if (language !== undefined) {
             const { default: hljs } = await System.import(/* webpackChunkName: 'highlightjs' */ 'ts/highlight');
-            const { value: hlCode } = hljs.highlight(language, children as string);
+
+            const hlCode = hljs(children as string, language);
             this.setState({ hlCode });
         }
     }
@@ -105,8 +123,8 @@ class Code extends React.Component<CodeProps, CodeState> {
                     {this.state.hlCode !== undefined ? (
                         <StyledCode dangerouslySetInnerHTML={{ __html: this.state.hlCode }} />
                     ) : (
-                        <StyledCode>{this.props.children}</StyledCode>
-                    )}
+                            <StyledCode>{this.props.children}</StyledCode>
+                        )}
                 </StyledPre>
                 {navigator.userAgent !== 'ReactSnap' ? <Button onClick={this.handleCopy}>Copy</Button> : null}
                 {!('clipboard' in navigator) ? (
diff --git a/packages/dev-tools-pages/ts/globals.d.ts b/packages/dev-tools-pages/ts/globals.d.ts
index 07871a74b..5c7cbe54c 100644
--- a/packages/dev-tools-pages/ts/globals.d.ts
+++ b/packages/dev-tools-pages/ts/globals.d.ts
@@ -1,5 +1,6 @@
 declare module 'whatwg-fetch';
 declare module 'react-document-title';
+declare module 'highlighter';
 
 declare var System: any;
 
diff --git a/packages/dev-tools-pages/ts/pages/Cov.tsx b/packages/dev-tools-pages/ts/pages/Cov.tsx
index 8fd1ace43..01966537c 100644
--- a/packages/dev-tools-pages/ts/pages/Cov.tsx
+++ b/packages/dev-tools-pages/ts/pages/Cov.tsx
@@ -22,11 +22,21 @@ function Cov() {
                     coverage.
                 </IntroLead>
                 <IntroAside>
-                    <Code language="js">
-                        {`import { SolCompilerArtifactAdapter } from '@0x/sol-trace';
+                    <Code language="js.diff">
+                        {`+function executeTransaction(uint transactionId)
+    public
++notExecuted(transactionId)
++pastTimeLock(transactionId)
+{ 
++Transaction storage tx = transactions[transactionId]
++tx.executed = true
++if (tx.destination.call.value(tx.value)(tx.data))
++Execution(transactionId)
+else {
+-ExecutionFailure(transactionId)
 
-// Both artifactsDir and contractsDir are optional and will be fetched from compiler.json if not passed in
-const artifactAdapter = new SolCompilerArtifactAdapter(artifactsDir, contractsDir);`}
+    }
+}`}
                     </Code>
                 </IntroAside>
             </Intro>
-- 
cgit v1.2.3


From 43e55a963bef2a2e4740ce27d456927b020b71f2 Mon Sep 17 00:00:00 2001
From: August Skare <post@augustskare.no>
Date: Thu, 25 Oct 2018 12:19:56 +0100
Subject: Feature/syntaxhighlighting (#9)

* wip code highlighting of lines

* Implements gutter component

* WIP: Profiler with gutter

* cleaned up highlight code

* Removes before content for gutter styling

* Styles gutter

* Add correct Profiler code content

* Adds color variable for gutter gray

* refactor code component width gutter and diffing
---
 packages/dev-tools-pages/ts/components/Code.tsx  | 106 ++++++++++++++++-------
 packages/dev-tools-pages/ts/components/Intro.tsx |   1 +
 packages/dev-tools-pages/ts/highlight.tsx        |  47 +++++++++-
 packages/dev-tools-pages/ts/pages/Cov.tsx        |  30 ++++---
 packages/dev-tools-pages/ts/pages/Profiler.tsx   |  25 +++++-
 packages/dev-tools-pages/ts/variables.tsx        |   1 +
 6 files changed, 159 insertions(+), 51 deletions(-)

(limited to 'packages/dev-tools-pages/ts')

diff --git a/packages/dev-tools-pages/ts/components/Code.tsx b/packages/dev-tools-pages/ts/components/Code.tsx
index 5a03e79ac..ce4443357 100644
--- a/packages/dev-tools-pages/ts/components/Code.tsx
+++ b/packages/dev-tools-pages/ts/components/Code.tsx
@@ -4,12 +4,13 @@ import styled from 'styled-components';
 import { colors } from 'ts/variables';
 import BaseButton from './Button';
 
-var highlight = require('highlighter')();
-
 interface CodeProps {
     children: React.ReactNode;
     language?: string;
     light?: boolean;
+    diff?: boolean;
+    gutter?: Array<number>;
+    gutterLength?: number;
 }
 
 interface CodeState {
@@ -30,37 +31,73 @@ const Button = styled(BaseButton)`
 
 const Base =
     styled.div <
-        CodeProps >
-        `
+    CodeProps >
+    `
     color: ${props => (props.language === undefined ? colors.white : 'inherit')};
     background-color: ${props =>
-            props.light ? 'rgba(255,255,255,.15)' : props.language === undefined ? colors.black : colors.lightGray};
+        props.light ? 'rgba(255,255,255,.15)' : props.language === undefined ? colors.black : '#F1F4F5'};
     white-space: ${props => (props.language === undefined ? 'nowrap' : '')};
     position: relative;
+
+    ${props =>
+        props.diff
+            ? `
+        background-color: #E9ECED;
+        display: flex;
+        padding-top: 1.5rem;
+        padding-bottom: 1.5rem;
+    `
+            : `
+        padding: 1.5rem;
+    `}
+
+    overflow-y: scroll;
+    -webkit-overflow-scrolling: touch;
+
     &:hover ${Button} {
         opacity: 1;
     }
 `;
 
-const StyledCode = styled.code`
-    padding-top: 1.5rem;
-    padding-bottom: 1.5rem;
-    display: block;
-    overflow-y: scroll;
-    -webkit-overflow-scrolling: touch;
+const StyledCodeDiff =
+    styled.code <
+    any >
+    `
+    ::before {
+        content: '';
+        width: calc(.75rem + ${props => props.gutterLength}ch);
+        background-color: #e2e5e6;
+        position: absolute;
+        top: 0;
+        left: 0;
+        bottom: 0;
+    }
 
-    
-    .diff-addition {
-        background-color: #d2e9e0;
-        padding: 0.3125rem;
+    [class^='line-'] {
         display: inline-block;
         width: 100%;
+        position: relative;
+        padding-right: 1.5rem;
+        padding-left: calc(2.25rem + ${props => props.gutterLength}ch);
+        ::before {
+            content: attr(data-test);
+            font-size: 0.875rem;
+            width: ${props => props.gutterLength};
+            padding-left: .375rem;
+            padding-right: .375rem;
+            position: absolute;
+            top: 50%;
+            left: 0;
+            transform: translateY(-50%);
+            z-index: 1;
+        }
     }
-    .diff-deletion {
-        background-color: #ebdcdc;
-        padding: 0.3125rem;
-        display: inline-block;
-        width: 100%;
+
+    .line-addition {
+        background-color: rgba(0, 202, 105, 0.1);
+    }
+    .line-deletion {
+        background-color: rgba(255, 0, 0, 0.07);
     }
 `;
 
@@ -88,13 +125,16 @@ class Code extends React.Component<CodeProps, CodeState> {
     }
 
     async componentDidMount() {
-        const { language, children } = this.props;
+        const { language, children, diff, gutter } = this.props;
+
+        const code = children as string;
 
         if (language !== undefined) {
-            const { default: hljs } = await System.import(/* webpackChunkName: 'highlightjs' */ 'ts/highlight');
+            const { default: highlight } = await System.import(/* webpackChunkName: 'highlightjs' */ 'ts/highlight');
 
-            const hlCode = hljs(children as string, language);
-            this.setState({ hlCode });
+            this.setState({
+                hlCode: highlight(language, code, diff, gutter),
+            });
         }
     }
 
@@ -115,16 +155,20 @@ class Code extends React.Component<CodeProps, CodeState> {
     };
 
     render() {
-        const { language, light, children } = this.props;
+        const { language, light, diff, children, gutterLength } = this.props;
+        const { hlCode } = this.state;
+
+        const Code = diff ? StyledCodeDiff : 'code';
 
         return (
-            <Base language={language} light={light}>
+            <Base language={language} diff={diff} light={light}>
                 <StyledPre>
-                    {this.state.hlCode !== undefined ? (
-                        <StyledCode dangerouslySetInnerHTML={{ __html: this.state.hlCode }} />
-                    ) : (
-                            <StyledCode>{this.props.children}</StyledCode>
-                        )}
+                    <Code
+                        gutterLength={gutterLength}
+                        dangerouslySetInnerHTML={hlCode ? { __html: this.state.hlCode } : null}
+                    >
+                        {hlCode === undefined ? children : null}
+                    </Code>
                 </StyledPre>
                 {navigator.userAgent !== 'ReactSnap' ? <Button onClick={this.handleCopy}>Copy</Button> : null}
                 {!('clipboard' in navigator) ? (
diff --git a/packages/dev-tools-pages/ts/components/Intro.tsx b/packages/dev-tools-pages/ts/components/Intro.tsx
index 4fc1289fb..e5c95d4c2 100644
--- a/packages/dev-tools-pages/ts/components/Intro.tsx
+++ b/packages/dev-tools-pages/ts/components/Intro.tsx
@@ -43,6 +43,7 @@ const IntroLead = styled(Lead)`
 `;
 const IntroAside = styled.div`
     max-width: 32.5rem;
+    position: relative; 
 
     ${media.small`
         margin-left: -30px;
diff --git a/packages/dev-tools-pages/ts/highlight.tsx b/packages/dev-tools-pages/ts/highlight.tsx
index 9d7844c89..7187118d0 100644
--- a/packages/dev-tools-pages/ts/highlight.tsx
+++ b/packages/dev-tools-pages/ts/highlight.tsx
@@ -1,8 +1,47 @@
-const highlight = require('highlight.js/lib/highlight');
+const hljs = require('highlight.js/lib/highlight');
 const javascript = require('highlight.js/lib/languages/javascript');
-const json = require('highlight.js/lib/languages/json');
 
-highlight.registerLanguage('javascript', javascript);
-highlight.registerLanguage('json', json);
+hljs.registerLanguage('javascript', javascript);
+
+interface PatchInterface {
+    [key: string]: string;
+}
+
+var PATCH_TYPES: PatchInterface = {
+    '+': 'addition',
+    '-': 'deletion',
+    '!': 'change',
+};
+
+function diffHighlight(language: string, code: any, gutter: any) {
+    return code
+        .split(/\r?\n/g)
+        .map((line: string, index: number) => {
+            var type;
+            if (/^-{3} [^-]+ -{4}$|^\*{3} [^*]+ \*{4}$|^@@ [^@]+ @@$/.test(line)) {
+                type = 'chunk';
+            } else if (/^Index: |^[+\-*]{3}|^[*=]{5,}$/.test(line)) {
+                type = 'header';
+            } else {
+                type = PATCH_TYPES[line[0] as string] || 'null';
+                line = line.replace(/^[+\-! ]/, '');
+            }
+
+            const g = gutter[index];
+
+            return `<span data-test="${g !== undefined ? g + 'x' : ''}" class="line-${type}">${
+                hljs.highlight(language, line).value
+            }</span>`;
+        })
+        .join('\n');
+}
+
+function highlight(language: string, code: string, diff: boolean, gutter: any) {
+    if (diff) {
+        return diffHighlight(language, code, gutter);
+    }
+
+    return hljs.highlight(language, code).value;
+}
 
 export default highlight;
diff --git a/packages/dev-tools-pages/ts/pages/Cov.tsx b/packages/dev-tools-pages/ts/pages/Cov.tsx
index 01966537c..197ff174d 100644
--- a/packages/dev-tools-pages/ts/pages/Cov.tsx
+++ b/packages/dev-tools-pages/ts/pages/Cov.tsx
@@ -22,19 +22,25 @@ function Cov() {
                     coverage.
                 </IntroLead>
                 <IntroAside>
-                    <Code language="js.diff">
+                    <Code
+                        language="javascript"
+                        diff
+                        gutterLength={2}
+                        gutter={[4, undefined, 4, 4, 4, undefined, 4, 2, 2, 2]}
+                    >
                         {`+function executeTransaction(uint transactionId)
-    public
-+notExecuted(transactionId)
-+pastTimeLock(transactionId)
+     public
++    notExecuted(transactionId)
++    fullyConfirmed(transactionId)
++    pastTimeLock(transactionId)
 { 
-+Transaction storage tx = transactions[transactionId]
-+tx.executed = true
-+if (tx.destination.call.value(tx.value)(tx.data))
-+Execution(transactionId)
-else {
--ExecutionFailure(transactionId)
-
++    Transaction storage tx = transactions[transactionId]
++    tx.executed = true
++    if (tx.destination.call.value(tx.value)(tx.data))
++        Execution(transactionId)
+     else {
+-        ExecutionFailure(transactionId)
+-        tx.executed = false
     }
 }`}
                     </Code>
@@ -69,7 +75,7 @@ else {
 
                     <Tabs>
                         <TabBlock title="Sol-compiler">
-                            <Code language="js">
+                            <Code language="javascript">
                                 {`import { SolCompilerArtifactAdapter } from '@0x/sol-trace';
 
 // Both artifactsDir and contractsDir are optional and will be fetched from compiler.json if not passed in
diff --git a/packages/dev-tools-pages/ts/pages/Profiler.tsx b/packages/dev-tools-pages/ts/pages/Profiler.tsx
index ac88bd933..462789a16 100644
--- a/packages/dev-tools-pages/ts/pages/Profiler.tsx
+++ b/packages/dev-tools-pages/ts/pages/Profiler.tsx
@@ -9,18 +9,35 @@ import { Tabs, TabBlock } from 'ts/components/Tabs';
 import Code from 'ts/components/Code';
 import InlineCode from 'ts/components/InlineCode';
 import { List, ListItem } from 'ts/components/List';
-import Intro from 'ts/components/Intro';
 import Breakout from 'ts/components/Breakout';
+import { Intro, IntroLead, IntroAside } from 'ts/components/Intro';
 
 function Profiler() {
     return (
         <Base context={context}>
-            <Intro title="ra">
-                <p>
+            <Intro title="Headline">
+                <IntroLead>
                     Sol-profiler gathers line-by-line gas usage for any transaction submitted through your provider.
                     This will help you find unexpected inefficiencies in parts of your smart contract, and take a
                     data-driven approach to optimizing it.
-                </p>
+                </IntroLead>
+                <IntroAside>
+                    <Code language="javascript" diff gutterLength={6} gutter={[15, 15, undefined, 21747, 20303, 1435]}>
+                        {`+function() public payable {
++    deposit();
+}
++function deposit() public payabble {
++    balanceOf[msg.sender] += msg.value; 
++    Deposit(msg.sender, msg.value);
+}
+-function withdraw(uint wad) public {
+-    require(balanceOf[msg.sender] >= wad);
+-    balanceOf[msg.sender] -= wad;
+-    msg.sender.transfer(wad);
+-    Withdrawal(msg.sender, wad);
+}`}
+                    </Code>
+                </IntroAside>
             </Intro>
             <Content>
                 <ContentBlock main title="Get started" />
diff --git a/packages/dev-tools-pages/ts/variables.tsx b/packages/dev-tools-pages/ts/variables.tsx
index 8f08d13eb..76a675546 100644
--- a/packages/dev-tools-pages/ts/variables.tsx
+++ b/packages/dev-tools-pages/ts/variables.tsx
@@ -6,6 +6,7 @@ const colors = {
     lightGray: '#F1F4F5',
     gray: '#F1F2F7',
     darkGray: '#E9ECED',
+    darkestGray: '#E2E5E6',
     blueGray: '#ECEFF9',
 };
 
-- 
cgit v1.2.3


From b8441265167b719db3db940b76fb4b3b0e0edecd Mon Sep 17 00:00:00 2001
From: Megan Pearson <megan.e.pearson@gmail.com>
Date: Thu, 25 Oct 2018 14:04:50 +0200
Subject: Updates intro component (#10)

* Updates intro component

* Remove unused Inner

* Use Breakout component in Intro
---
 packages/dev-tools-pages/ts/components/Intro.tsx | 47 +++++++++++++++---------
 packages/dev-tools-pages/ts/pages/Cov.tsx        |  4 +-
 packages/dev-tools-pages/ts/pages/Profiler.tsx   |  6 +--
 3 files changed, 35 insertions(+), 22 deletions(-)

(limited to 'packages/dev-tools-pages/ts')

diff --git a/packages/dev-tools-pages/ts/components/Intro.tsx b/packages/dev-tools-pages/ts/components/Intro.tsx
index e5c95d4c2..a5a7e9dc4 100644
--- a/packages/dev-tools-pages/ts/components/Intro.tsx
+++ b/packages/dev-tools-pages/ts/components/Intro.tsx
@@ -4,6 +4,7 @@ import { media, colors } from '../variables';
 
 import { Alpha, Lead } from './Typography';
 import Container from './Container';
+import Breakout from './Breakout';
 
 const Main = styled.div`
     background-color: ${colors.lightGray};
@@ -17,12 +18,6 @@ const Main = styled.div`
     `};
 `;
 
-const Inner = styled.div`
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-`;
-
 const Title = styled(Alpha)`
     margin-bottom: 2.5rem;
 
@@ -32,38 +27,56 @@ const Title = styled(Alpha)`
 const Blocks = styled.div`
     display: flex;
     justify-content: space-between;
+    width: 100%;
 
     ${media.small`display: block;`};
 `;
 
-const IntroLead = styled(Lead)`
+
+const StyledIntroLead = styled(Lead)`
     max-width: 25.9375rem;
 
     ${media.small`margin-bottom: 1.5625rem;`};
 `;
-const IntroAside = styled.div`
+
+const StyledIntroAside = styled.div`
     max-width: 32.5rem;
     position: relative; 
-
-    ${media.small`
-        margin-left: -30px;
-        width: calc(100% + 60px);
-    `};
 `;
 
 interface IntroProps {
+    children?: React.ReactNode;
+}
+
+interface IntroLeadProps {
     title: string;
     children?: React.ReactNode;
 }
 
+function IntroLead(props: IntroLeadProps) {
+    return (
+        <StyledIntroLead>
+            <Title>{props.title}</Title>
+            {props.children}
+        </StyledIntroLead>
+    )
+}
+
+function IntroAside(props: IntroProps) {
+    return (
+        <Breakout>
+            <StyledIntroAside>
+                {props.children}
+            </StyledIntroAside>
+        </Breakout>
+    )
+}
+
 function Intro(props: IntroProps) {
     return (
         <Container wide>
             <Main>
-                <Inner>
-                    <Title>{props.title}</Title>
-                    <Blocks>{props.children}</Blocks>
-                </Inner>
+                <Blocks>{props.children}</Blocks>
             </Main>
         </Container>
     );
diff --git a/packages/dev-tools-pages/ts/pages/Cov.tsx b/packages/dev-tools-pages/ts/pages/Cov.tsx
index 197ff174d..679cf6f62 100644
--- a/packages/dev-tools-pages/ts/pages/Cov.tsx
+++ b/packages/dev-tools-pages/ts/pages/Cov.tsx
@@ -15,8 +15,8 @@ import { Intro, IntroLead, IntroAside } from 'ts/components/Intro';
 function Cov() {
     return (
         <Base context={context}>
-            <Intro title="Measure your tests">
-                <IntroLead>
+            <Intro>
+                <IntroLead title="Measure your tests">
                     When it comes to writing smart contracts, testing is one of the most important steps of the process.
                     In order to quantify the robustness of your Solidity testing suite, you need to measure its code
                     coverage.
diff --git a/packages/dev-tools-pages/ts/pages/Profiler.tsx b/packages/dev-tools-pages/ts/pages/Profiler.tsx
index 462789a16..f147d9d5a 100644
--- a/packages/dev-tools-pages/ts/pages/Profiler.tsx
+++ b/packages/dev-tools-pages/ts/pages/Profiler.tsx
@@ -5,18 +5,18 @@ import context from 'ts/context/profiler';
 import Base from 'ts/components/Base';
 import Content from 'ts/components/Content';
 import ContentBlock from 'ts/components/ContentBlock';
+import Breakout from 'ts/components/Breakout';
 import { Tabs, TabBlock } from 'ts/components/Tabs';
 import Code from 'ts/components/Code';
 import InlineCode from 'ts/components/InlineCode';
 import { List, ListItem } from 'ts/components/List';
-import Breakout from 'ts/components/Breakout';
 import { Intro, IntroLead, IntroAside } from 'ts/components/Intro';
 
 function Profiler() {
     return (
         <Base context={context}>
-            <Intro title="Headline">
-                <IntroLead>
+            <Intro>
+                <IntroLead title="Headline">
                     Sol-profiler gathers line-by-line gas usage for any transaction submitted through your provider.
                     This will help you find unexpected inefficiencies in parts of your smart contract, and take a
                     data-driven approach to optimizing it.
-- 
cgit v1.2.3


From 43b792f307118e09a683f3f76f0e0f22ee2d898d Mon Sep 17 00:00:00 2001
From: Megan Pearson <megan.e.pearson@gmail.com>
Date: Thu, 25 Oct 2018 14:12:01 +0200
Subject: Fixed typos

---
 packages/dev-tools-pages/ts/components/Trace.tsx | 10 +++++-----
 packages/dev-tools-pages/ts/context/profiler.tsx |  2 +-
 2 files changed, 6 insertions(+), 6 deletions(-)

(limited to 'packages/dev-tools-pages/ts')

diff --git a/packages/dev-tools-pages/ts/components/Trace.tsx b/packages/dev-tools-pages/ts/components/Trace.tsx
index 62994a810..4b34ff145 100644
--- a/packages/dev-tools-pages/ts/components/Trace.tsx
+++ b/packages/dev-tools-pages/ts/components/Trace.tsx
@@ -80,7 +80,7 @@ function Trace(props: Props) {
                                 <Gamma as="h3">Time-saving</Gamma>
                                 <p>
                                     Turning "Your code failed somewhere, good luck debugging it" into "Your code failed
-                                    on linen X of contract Y", it drastically improves the developer experience.
+                                    on line X of contract Y", it drastically improves the developer experience.
                                 </p>
                             </Copy>
                             <Icon as={TimeSaving} />
@@ -94,8 +94,8 @@ function Trace(props: Props) {
 
 const StyledSection =
     styled.section <
-    TraceProps >
-    `
+        TraceProps >
+        `
     max-width: 90rem;
     margin: 0 auto;
     background: linear-gradient(to right, ${colors.black} 50%, ${props => props.background} 50%);
@@ -126,8 +126,8 @@ const Wrapper = styled(Container)`
 
 const Block =
     styled.div <
-    TraceProps >
-    `
+        TraceProps >
+        `
     width: 50%;
     background: ${props => (props.background ? props.background : colors.black)};
     color: ${props => (props.background ? 'inherit' : colors.white)};
diff --git a/packages/dev-tools-pages/ts/context/profiler.tsx b/packages/dev-tools-pages/ts/context/profiler.tsx
index 891c2f0bb..59f2f413a 100644
--- a/packages/dev-tools-pages/ts/context/profiler.tsx
+++ b/packages/dev-tools-pages/ts/context/profiler.tsx
@@ -4,7 +4,7 @@ export default {
     title: 'sol-profiler',
     name: 'profiler',
     subtitle: 'Gas profiling for Solidity',
-    tagline: "Implement data-guided optimizations by profiling your contrat's gas usage",
+    tagline: "Implement data-guided optimizations by profiling your contract's gas usage",
     icon: Icon,
     colors: {
         main: '#FF7144',
-- 
cgit v1.2.3


From 5e8f53c7b787fa99e721fe9949ecd762715bb891 Mon Sep 17 00:00:00 2001
From: Megan Pearson <megan.e.pearson@gmail.com>
Date: Thu, 25 Oct 2018 11:40:19 +0200
Subject: Updates intro component

---
 packages/dev-tools-pages/ts/components/Intro.tsx | 11 ++++-------
 1 file changed, 4 insertions(+), 7 deletions(-)

(limited to 'packages/dev-tools-pages/ts')

diff --git a/packages/dev-tools-pages/ts/components/Intro.tsx b/packages/dev-tools-pages/ts/components/Intro.tsx
index a5a7e9dc4..b475bd34b 100644
--- a/packages/dev-tools-pages/ts/components/Intro.tsx
+++ b/packages/dev-tools-pages/ts/components/Intro.tsx
@@ -32,7 +32,6 @@ const Blocks = styled.div`
     ${media.small`display: block;`};
 `;
 
-
 const StyledIntroLead = styled(Lead)`
     max-width: 25.9375rem;
 
@@ -41,7 +40,7 @@ const StyledIntroLead = styled(Lead)`
 
 const StyledIntroAside = styled.div`
     max-width: 32.5rem;
-    position: relative; 
+    position: relative;
 `;
 
 interface IntroProps {
@@ -59,17 +58,15 @@ function IntroLead(props: IntroLeadProps) {
             <Title>{props.title}</Title>
             {props.children}
         </StyledIntroLead>
-    )
+    );
 }
 
 function IntroAside(props: IntroProps) {
     return (
         <Breakout>
-            <StyledIntroAside>
-                {props.children}
-            </StyledIntroAside>
+            <StyledIntroAside>{props.children}</StyledIntroAside>
         </Breakout>
-    )
+    );
 }
 
 function Intro(props: IntroProps) {
-- 
cgit v1.2.3


From 1581ced6ec828d5b404dbcd1d7a09c0d8778a442 Mon Sep 17 00:00:00 2001
From: August Skare <post@augustskare.no>
Date: Thu, 25 Oct 2018 14:08:55 +0200
Subject: add json support to highlight

---
 packages/dev-tools-pages/ts/highlight.tsx | 2 ++
 1 file changed, 2 insertions(+)

(limited to 'packages/dev-tools-pages/ts')

diff --git a/packages/dev-tools-pages/ts/highlight.tsx b/packages/dev-tools-pages/ts/highlight.tsx
index 7187118d0..8dff4c9e9 100644
--- a/packages/dev-tools-pages/ts/highlight.tsx
+++ b/packages/dev-tools-pages/ts/highlight.tsx
@@ -1,7 +1,9 @@
 const hljs = require('highlight.js/lib/highlight');
 const javascript = require('highlight.js/lib/languages/javascript');
+const json = require('highlight.js/lib/languages/json');
 
 hljs.registerLanguage('javascript', javascript);
+hljs.registerLanguage('json', json);
 
 interface PatchInterface {
     [key: string]: string;
-- 
cgit v1.2.3


From 1899493ca89d9d357d7a7641eabe2b49e9e31c32 Mon Sep 17 00:00:00 2001
From: August Skare <post@augustskare.no>
Date: Thu, 25 Oct 2018 14:11:30 +0200
Subject: breakpoint on medium in intro component

---
 packages/dev-tools-pages/ts/components/Intro.tsx | 15 ++-------------
 1 file changed, 2 insertions(+), 13 deletions(-)

(limited to 'packages/dev-tools-pages/ts')

diff --git a/packages/dev-tools-pages/ts/components/Intro.tsx b/packages/dev-tools-pages/ts/components/Intro.tsx
index b475bd34b..9ab04cbf7 100644
--- a/packages/dev-tools-pages/ts/components/Intro.tsx
+++ b/packages/dev-tools-pages/ts/components/Intro.tsx
@@ -12,7 +12,7 @@ const Main = styled.div`
     display: flex;
     justify-content: space-between;
 
-    ${media.small`
+    ${media.medium`
         padding: 2.5rem 1.875rem
         display: block;     
     `};
@@ -24,17 +24,8 @@ const Title = styled(Alpha)`
     ${media.small`margin-bottom: 2.25rem;`};
 `;
 
-const Blocks = styled.div`
-    display: flex;
-    justify-content: space-between;
-    width: 100%;
-
-    ${media.small`display: block;`};
-`;
-
 const StyledIntroLead = styled(Lead)`
     max-width: 25.9375rem;
-
     ${media.small`margin-bottom: 1.5625rem;`};
 `;
 
@@ -72,9 +63,7 @@ function IntroAside(props: IntroProps) {
 function Intro(props: IntroProps) {
     return (
         <Container wide>
-            <Main>
-                <Blocks>{props.children}</Blocks>
-            </Main>
+            <Main>{props.children}</Main>
         </Container>
     );
 }
-- 
cgit v1.2.3


From fb24a18f3faa99736562e363e68fe077f56d760a Mon Sep 17 00:00:00 2001
From: August Skare <post@augustskare.no>
Date: Thu, 25 Oct 2018 14:14:47 +0200
Subject: fix dom elements type in intro

---
 packages/dev-tools-pages/ts/components/Intro.tsx | 2 +-
 packages/dev-tools-pages/ts/pages/Cov.tsx        | 8 +++++---
 packages/dev-tools-pages/ts/pages/Profiler.tsx   | 8 +++++---
 3 files changed, 11 insertions(+), 7 deletions(-)

(limited to 'packages/dev-tools-pages/ts')

diff --git a/packages/dev-tools-pages/ts/components/Intro.tsx b/packages/dev-tools-pages/ts/components/Intro.tsx
index 9ab04cbf7..86d29e36d 100644
--- a/packages/dev-tools-pages/ts/components/Intro.tsx
+++ b/packages/dev-tools-pages/ts/components/Intro.tsx
@@ -45,7 +45,7 @@ interface IntroLeadProps {
 
 function IntroLead(props: IntroLeadProps) {
     return (
-        <StyledIntroLead>
+        <StyledIntroLead as="div">
             <Title>{props.title}</Title>
             {props.children}
         </StyledIntroLead>
diff --git a/packages/dev-tools-pages/ts/pages/Cov.tsx b/packages/dev-tools-pages/ts/pages/Cov.tsx
index 679cf6f62..743b990df 100644
--- a/packages/dev-tools-pages/ts/pages/Cov.tsx
+++ b/packages/dev-tools-pages/ts/pages/Cov.tsx
@@ -17,9 +17,11 @@ function Cov() {
         <Base context={context}>
             <Intro>
                 <IntroLead title="Measure your tests">
-                    When it comes to writing smart contracts, testing is one of the most important steps of the process.
-                    In order to quantify the robustness of your Solidity testing suite, you need to measure its code
-                    coverage.
+                    <p>
+                        When it comes to writing smart contracts, testing is one of the most important steps of the
+                        process. In order to quantify the robustness of your Solidity testing suite, you need to measure
+                        its code coverage.
+                    </p>
                 </IntroLead>
                 <IntroAside>
                     <Code
diff --git a/packages/dev-tools-pages/ts/pages/Profiler.tsx b/packages/dev-tools-pages/ts/pages/Profiler.tsx
index f147d9d5a..b8e78264e 100644
--- a/packages/dev-tools-pages/ts/pages/Profiler.tsx
+++ b/packages/dev-tools-pages/ts/pages/Profiler.tsx
@@ -17,9 +17,11 @@ function Profiler() {
         <Base context={context}>
             <Intro>
                 <IntroLead title="Headline">
-                    Sol-profiler gathers line-by-line gas usage for any transaction submitted through your provider.
-                    This will help you find unexpected inefficiencies in parts of your smart contract, and take a
-                    data-driven approach to optimizing it.
+                    <p>
+                        Sol-profiler gathers line-by-line gas usage for any transaction submitted through your provider.
+                        This will help you find unexpected inefficiencies in parts of your smart contract, and take a
+                        data-driven approach to optimizing it.
+                    </p>
                 </IntroLead>
                 <IntroAside>
                     <Code language="javascript" diff gutterLength={6} gutter={[15, 15, undefined, 21747, 20303, 1435]}>
-- 
cgit v1.2.3


From 3901380ffb05f1691ec92c33742013c97530399c Mon Sep 17 00:00:00 2001
From: August Skare <post@augustskare.no>
Date: Fri, 26 Oct 2018 08:08:40 +0200
Subject: update content on copiler page

---
 packages/dev-tools-pages/ts/pages/Compiler.tsx | 18 ++++++++++++++++--
 1 file changed, 16 insertions(+), 2 deletions(-)

(limited to 'packages/dev-tools-pages/ts')

diff --git a/packages/dev-tools-pages/ts/pages/Compiler.tsx b/packages/dev-tools-pages/ts/pages/Compiler.tsx
index 92390e20b..0d9be16bf 100644
--- a/packages/dev-tools-pages/ts/pages/Compiler.tsx
+++ b/packages/dev-tools-pages/ts/pages/Compiler.tsx
@@ -66,8 +66,7 @@ function Compiler() {
 
                 <ContentBlock title="Production">
                     <p>
-                        Sol compiler uses solidity standard JSON output format for the artifacts. This way, you can
-                        define which parts of the artifact you need.
+                    Sol compiler uses solidity standard JSON output format for the artifacts. This way, you can define which parts of the artifact you need.
                     </p>
                     <Breakout>
                         <Code light language="json">
@@ -88,6 +87,20 @@ function Compiler() {
                         <Code light language="json">
                             {`{
     ...
+    "compilerOutput": {
+        "abi": [...],
+    },
+    ...
+}`}
+                        </Code>
+                    </Breakout>
+                    </ContentBlock>
+                    <ContentBlock title="Development">
+                    <p>Sometimes you need to use some debuggers or other dev tools and you’ll need more info in the artifact.</p>
+                    <Breakout>
+                        <Code light language="json">
+                            {`{
+    ...
     "compilerSettings": {
         "outputSelection": {
             "*": {
@@ -105,6 +118,7 @@ function Compiler() {
 }`}
                         </Code>
                     </Breakout>
+
                     <Breakout>
                         <Code light language="json">
                             {`{
-- 
cgit v1.2.3


From 72b4ee76fbee75dc624f15a616281cf32977b54b Mon Sep 17 00:00:00 2001
From: August Skare <post@augustskare.no>
Date: Fri, 26 Oct 2018 08:10:31 +0200
Subject: update text color on dark background

---
 packages/dev-tools-pages/ts/components/Content.tsx | 3 +++
 1 file changed, 3 insertions(+)

(limited to 'packages/dev-tools-pages/ts')

diff --git a/packages/dev-tools-pages/ts/components/Content.tsx b/packages/dev-tools-pages/ts/components/Content.tsx
index 6f46274f7..3dcf50660 100644
--- a/packages/dev-tools-pages/ts/components/Content.tsx
+++ b/packages/dev-tools-pages/ts/components/Content.tsx
@@ -14,6 +14,9 @@ const StyledMain =
             ? `
         background-color: #000;
         color: #fff;
+        p:not([class]) {
+            color: #CCC;
+        }
     `
             : ''};
 `;
-- 
cgit v1.2.3


From 2ef8204ab489d8abe012a4b19bf9553bfd9ae9b6 Mon Sep 17 00:00:00 2001
From: August Skare <post@augustskare.no>
Date: Fri, 26 Oct 2018 08:13:04 +0200
Subject: 14px fontsize on code

---
 packages/dev-tools-pages/ts/components/Code.tsx | 1 +
 1 file changed, 1 insertion(+)

(limited to 'packages/dev-tools-pages/ts')

diff --git a/packages/dev-tools-pages/ts/components/Code.tsx b/packages/dev-tools-pages/ts/components/Code.tsx
index ce4443357..4b8f0b555 100644
--- a/packages/dev-tools-pages/ts/components/Code.tsx
+++ b/packages/dev-tools-pages/ts/components/Code.tsx
@@ -33,6 +33,7 @@ const Base =
     styled.div <
     CodeProps >
     `
+    font-size: .875rem;
     color: ${props => (props.language === undefined ? colors.white : 'inherit')};
     background-color: ${props =>
         props.light ? 'rgba(255,255,255,.15)' : props.language === undefined ? colors.black : '#F1F4F5'};
-- 
cgit v1.2.3


From 3fdc6e5e477c496aed8bf31866d1aefc0a6816a0 Mon Sep 17 00:00:00 2001
From: August Skare <post@augustskare.no>
Date: Fri, 26 Oct 2018 08:15:43 +0200
Subject: text color in trace component

---
 packages/dev-tools-pages/ts/components/Trace.tsx | 19 ++++++++++++-------
 1 file changed, 12 insertions(+), 7 deletions(-)

(limited to 'packages/dev-tools-pages/ts')

diff --git a/packages/dev-tools-pages/ts/components/Trace.tsx b/packages/dev-tools-pages/ts/components/Trace.tsx
index 4b34ff145..db3846256 100644
--- a/packages/dev-tools-pages/ts/components/Trace.tsx
+++ b/packages/dev-tools-pages/ts/components/Trace.tsx
@@ -32,7 +32,7 @@ function Trace(props: Props) {
 
                     <List>
                         <Item>
-                            <Copy>
+                            <Copy dark>
                                 <Gamma as="h3">No location</Gamma>
                                 <p>
                                     The error basically says "anything could have gone wrong here", which keeps you
@@ -43,7 +43,7 @@ function Trace(props: Props) {
                         </Item>
 
                         <Item>
-                            <Copy>
+                            <Copy dark>
                                 <Gamma as="h3">Time-consuming</Gamma>
                                 <p>
                                     Working with a large code-base that contains hundreds of smart contracts, finding
@@ -94,8 +94,8 @@ function Trace(props: Props) {
 
 const StyledSection =
     styled.section <
-        TraceProps >
-        `
+    TraceProps >
+    `
     max-width: 90rem;
     margin: 0 auto;
     background: linear-gradient(to right, ${colors.black} 50%, ${props => props.background} 50%);
@@ -126,8 +126,8 @@ const Wrapper = styled(Container)`
 
 const Block =
     styled.div <
-        TraceProps >
-        `
+    TraceProps >
+    `
     width: 50%;
     background: ${props => (props.background ? props.background : colors.black)};
     color: ${props => (props.background ? 'inherit' : colors.white)};
@@ -181,9 +181,14 @@ const Item = styled.li`
     }
 `;
 
-const Copy = styled.div`
+const Copy = styled.div<{dark?: boolean;}>`
     max-width: 20rem;
     margin-right: 5.875rem;
+    ${props => props.dark && `
+        p {
+            color: #ccc;
+        }
+    `}
 
     ${media.small`margin-right: 2.0625rem;`};
 `;
-- 
cgit v1.2.3


From e3c0363db1fe07d8933f9ed219282c2b6e581cd6 Mon Sep 17 00:00:00 2001
From: August Skare <post@augustskare.no>
Date: Fri, 26 Oct 2018 08:18:04 +0200
Subject: update codeblock in trace component

---
 packages/dev-tools-pages/ts/components/Trace.tsx | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

(limited to 'packages/dev-tools-pages/ts')

diff --git a/packages/dev-tools-pages/ts/components/Trace.tsx b/packages/dev-tools-pages/ts/components/Trace.tsx
index db3846256..3b272ce98 100644
--- a/packages/dev-tools-pages/ts/components/Trace.tsx
+++ b/packages/dev-tools-pages/ts/components/Trace.tsx
@@ -61,7 +61,17 @@ function Trace(props: Props) {
                         Sol-trace will give you full stack traces, including contract names, line numbers and code
                         snippets, every time you encounter an error.
                     </MainCopy>
-                    <Code light>Error: VM Exception while processing transaction: rever</Code>
+                    <Code light language="javascript">
+                    {`contracts/src/2.0.0/protocol/Exchange/MixinSignatureValidator.sol:51:8
+    require(
+        isValidSignature(
+            hash,
+            signerAddress,
+            signature
+        ),
+        "INVALID_SIGNATURE"
+    )`}
+        </Code>
 
                     <List>
                         <Item>
-- 
cgit v1.2.3


From a4825d87483d28f34a37d9323713be96798ec214 Mon Sep 17 00:00:00 2001
From: August Skare <post@augustskare.no>
Date: Fri, 26 Oct 2018 08:22:29 +0200
Subject: center logo text

---
 packages/dev-tools-pages/ts/components/Header.tsx | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

(limited to 'packages/dev-tools-pages/ts')

diff --git a/packages/dev-tools-pages/ts/components/Header.tsx b/packages/dev-tools-pages/ts/components/Header.tsx
index 44074cca3..943786778 100644
--- a/packages/dev-tools-pages/ts/components/Header.tsx
+++ b/packages/dev-tools-pages/ts/components/Header.tsx
@@ -43,6 +43,8 @@ const StyledHeader = styled.header`
 `;
 
 const LogoMark = styled.div`
+    position: relative;
+    height: 1.75rem;
     display: flex;
     align-items: center;
 `;
@@ -50,12 +52,15 @@ const LogoMark = styled.div`
 const StyledLogo = styled.div`
     color: ${props => props.color}
     width: 1.75rem;
-    height: 1.75rem;
+    height: 100%;
 `;
 
 const Title = styled.h1`
     font-size: 1.5rem;
-    margin: 0;
+    line-height: 1;
+    white-space: nowrap;
+    margin-top: 2px;
+    margin-bottom: 0;
     margin-left: 0.8125rem;
 
     ${media.small`font-size: 1.25rem;`};
-- 
cgit v1.2.3


From a11348ce6bb22f2d51463b11e9cae3ddca96d08f Mon Sep 17 00:00:00 2001
From: August Skare <post@augustskare.no>
Date: Fri, 26 Oct 2018 08:24:44 +0200
Subject: fix line-height in lead component

---
 packages/dev-tools-pages/ts/components/Typography.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'packages/dev-tools-pages/ts')

diff --git a/packages/dev-tools-pages/ts/components/Typography.tsx b/packages/dev-tools-pages/ts/components/Typography.tsx
index de4b64457..b3ed1b95c 100644
--- a/packages/dev-tools-pages/ts/components/Typography.tsx
+++ b/packages/dev-tools-pages/ts/components/Typography.tsx
@@ -21,7 +21,7 @@ const Gamma = styled.h4`
 
 const Lead = styled.p`
     font-size: 1.25rem;
-
+    line-height: 1.6;
     ${media.small`font-size: 1rem;`};
 `;
 
-- 
cgit v1.2.3


From 7577d96671f23d1add83cbac1fc98480ee2a6529 Mon Sep 17 00:00:00 2001
From: August Skare <post@augustskare.no>
Date: Fri, 26 Oct 2018 08:38:10 +0200
Subject: new hover styling

---
 packages/dev-tools-pages/ts/components/Button.tsx | 2 +-
 packages/dev-tools-pages/ts/components/Tabs.tsx   | 2 +-
 packages/dev-tools-pages/ts/context/compiler.tsx  | 2 ++
 packages/dev-tools-pages/ts/context/cov.tsx       | 2 ++
 packages/dev-tools-pages/ts/context/profiler.tsx  | 2 ++
 packages/dev-tools-pages/ts/context/trace.tsx     | 2 ++
 packages/dev-tools-pages/ts/globalStyles.tsx      | 2 +-
 7 files changed, 11 insertions(+), 3 deletions(-)

(limited to 'packages/dev-tools-pages/ts')

diff --git a/packages/dev-tools-pages/ts/components/Button.tsx b/packages/dev-tools-pages/ts/components/Button.tsx
index 90d991496..65f1fce74 100644
--- a/packages/dev-tools-pages/ts/components/Button.tsx
+++ b/packages/dev-tools-pages/ts/components/Button.tsx
@@ -24,7 +24,7 @@ const Button =
   padding: ${props => (props.large ? '1.125rem 2.375rem' : '.5625rem 1.25rem')};
   display: inline-block;
   :hover, :focus {
-    color: ${props => props.colors.main};
+    background-color: ${props => props.colors.secondary_alt};
   } 
   ${props =>
       props.large &&
diff --git a/packages/dev-tools-pages/ts/components/Tabs.tsx b/packages/dev-tools-pages/ts/components/Tabs.tsx
index 4d436f519..36c707b06 100644
--- a/packages/dev-tools-pages/ts/components/Tabs.tsx
+++ b/packages/dev-tools-pages/ts/components/Tabs.tsx
@@ -39,7 +39,7 @@ const Root =
 
         &[aria-selected="false"]:focus,
         &[aria-selected="false"]:hover {
-            color: ${props => props.colors.main};
+            background-color: ${props => props.colors.secondary_alt};
             cursor: pointer;
         }
     }
diff --git a/packages/dev-tools-pages/ts/context/compiler.tsx b/packages/dev-tools-pages/ts/context/compiler.tsx
index 1c174ca2b..3c26ffa4a 100644
--- a/packages/dev-tools-pages/ts/context/compiler.tsx
+++ b/packages/dev-tools-pages/ts/context/compiler.tsx
@@ -9,6 +9,8 @@ export default {
     colors: {
         main: '#1EADCD',
         secondary: '#D1F4FC',
+        secondary_alt: '#C4F2FC',
         type: '#30C3E3',
+        type_alt: '#16A9C9',
     },
 };
diff --git a/packages/dev-tools-pages/ts/context/cov.tsx b/packages/dev-tools-pages/ts/context/cov.tsx
index c39c85eba..0874513e9 100644
--- a/packages/dev-tools-pages/ts/context/cov.tsx
+++ b/packages/dev-tools-pages/ts/context/cov.tsx
@@ -9,6 +9,8 @@ export default {
     colors: {
         main: '#BB9200',
         secondary: '#F1DB8D',
+        secondary_alt: '#F1D882',
         type: '#D7AE1B',
+        type_alt: '#BD9406',
     },
 };
diff --git a/packages/dev-tools-pages/ts/context/profiler.tsx b/packages/dev-tools-pages/ts/context/profiler.tsx
index 59f2f413a..2b0820add 100644
--- a/packages/dev-tools-pages/ts/context/profiler.tsx
+++ b/packages/dev-tools-pages/ts/context/profiler.tsx
@@ -9,6 +9,8 @@ export default {
     colors: {
         main: '#FF7144',
         secondary: '#FED7CB',
+        secondary_alt: '#FECEBE',
         type: '#EB8666',
+        type_alt: '#D16745',
     },
 };
diff --git a/packages/dev-tools-pages/ts/context/trace.tsx b/packages/dev-tools-pages/ts/context/trace.tsx
index 5a239f684..66112f90f 100644
--- a/packages/dev-tools-pages/ts/context/trace.tsx
+++ b/packages/dev-tools-pages/ts/context/trace.tsx
@@ -9,6 +9,8 @@ export default {
     colors: {
         main: '#4F76FF',
         secondary: '#CDD8FF',
+        secondary_alt: '#BFCDFF',
         type: '#7090FF',
+        type_alt: '#355CE5',
     },
 };
diff --git a/packages/dev-tools-pages/ts/globalStyles.tsx b/packages/dev-tools-pages/ts/globalStyles.tsx
index 270929123..c5db93f6a 100644
--- a/packages/dev-tools-pages/ts/globalStyles.tsx
+++ b/packages/dev-tools-pages/ts/globalStyles.tsx
@@ -59,7 +59,7 @@ const BaseStyles = createGlobalStyle`
         text-decoration: none; 
 
         &:hover {
-            text-decoration: underline;
+            color: ${(props: any) => props.colors.type_alt};
         }
     }
     
-- 
cgit v1.2.3


From f75cfd8aa425e6a1b1e22731ed888c399d453112 Mon Sep 17 00:00:00 2001
From: August Skare <post@augustskare.no>
Date: Fri, 26 Oct 2018 08:44:27 +0200
Subject: fixed links in footer

---
 packages/dev-tools-pages/ts/components/Footer.tsx | 47 ++++++++++-------------
 packages/dev-tools-pages/ts/context/compiler.tsx  |  1 +
 packages/dev-tools-pages/ts/context/cov.tsx       |  1 +
 packages/dev-tools-pages/ts/context/profiler.tsx  |  1 +
 packages/dev-tools-pages/ts/context/trace.tsx     |  1 +
 5 files changed, 24 insertions(+), 27 deletions(-)

(limited to 'packages/dev-tools-pages/ts')

diff --git a/packages/dev-tools-pages/ts/components/Footer.tsx b/packages/dev-tools-pages/ts/components/Footer.tsx
index de479a81e..2b7f4f305 100644
--- a/packages/dev-tools-pages/ts/components/Footer.tsx
+++ b/packages/dev-tools-pages/ts/components/Footer.tsx
@@ -25,15 +25,13 @@ function Footer(props: Props) {
                     <List>
                         {tools.map(({ title, subtitle, icon }) => (
                             <ListItem key={title}>
-                                <Icon as={icon} />
-                                <div>
-                                    <Beta>
-                                        <StyledLink colors={colors} href="#">
-                                            {title}
-                                        </StyledLink>
-                                    </Beta>
-                                    <p>{subtitle}</p>
-                                </div>
+                                <ListLink hoverColor={colors.dark} href="#">
+                                    <Icon as={icon} />
+                                    <div>
+                                        <Beta>{title}</Beta>
+                                        <p>{subtitle}</p>
+                                    </div>
+                                </ListLink>
                             </ListItem>
                         ))}
                     </List>
@@ -89,15 +87,14 @@ const Media = styled.div`
 `;
 
 const List = styled.ul`
-    display: flex;
-    width: 66.693548387%;
-    flex-wrap: wrap;
-    flex-direction: row;
+    list-style: none;
     margin: 0;
     padding: 0;
+    width: 66.693548387%;
+    display: flex;
+    flex-wrap: wrap;
 
     ${media.medium`
-    
         width: 100%; 
     `};
 
@@ -107,11 +104,8 @@ const List = styled.ul`
 `;
 
 const ListItem = styled.li`
-    display: flex;
-    align-items: center;
-    flex-basis: 50%;
     margin-bottom: 3.3125rem;
-
+    flex-basis: 50%;
     :nth-last-of-type(-n + 2) {
         margin-bottom: 0;
 
@@ -126,18 +120,17 @@ const ListItem = styled.li`
     `};
 `;
 
+const ListLink = styled.a<{hoverColor: string;}>`
+    display: flex;
+    align-items: center;
+    :hover {
+        color: ${props => props.hoverColor};
+    }
+`;
+
 const Small = styled.small`
     font-size: 1em;
     max-width: 37.5rem;
 `;
 
-const StyledLink =
-    styled.a <
-    { colors: any } >
-    `
-    :hover {
-        color: ${props => props.colors.main};
-    }
-`;
-
 export default withContext(Footer);
diff --git a/packages/dev-tools-pages/ts/context/compiler.tsx b/packages/dev-tools-pages/ts/context/compiler.tsx
index 3c26ffa4a..06860b1e9 100644
--- a/packages/dev-tools-pages/ts/context/compiler.tsx
+++ b/packages/dev-tools-pages/ts/context/compiler.tsx
@@ -12,5 +12,6 @@ export default {
         secondary_alt: '#C4F2FC',
         type: '#30C3E3',
         type_alt: '#16A9C9',
+        dark: '#00404E',
     },
 };
diff --git a/packages/dev-tools-pages/ts/context/cov.tsx b/packages/dev-tools-pages/ts/context/cov.tsx
index 0874513e9..bf3883920 100644
--- a/packages/dev-tools-pages/ts/context/cov.tsx
+++ b/packages/dev-tools-pages/ts/context/cov.tsx
@@ -12,5 +12,6 @@ export default {
         secondary_alt: '#F1D882',
         type: '#D7AE1B',
         type_alt: '#BD9406',
+        dark: '#423300',
     },
 };
diff --git a/packages/dev-tools-pages/ts/context/profiler.tsx b/packages/dev-tools-pages/ts/context/profiler.tsx
index 2b0820add..d5dd2a394 100644
--- a/packages/dev-tools-pages/ts/context/profiler.tsx
+++ b/packages/dev-tools-pages/ts/context/profiler.tsx
@@ -12,5 +12,6 @@ export default {
         secondary_alt: '#FECEBE',
         type: '#EB8666',
         type_alt: '#D16745',
+        dark: '#5F1700',
     },
 };
diff --git a/packages/dev-tools-pages/ts/context/trace.tsx b/packages/dev-tools-pages/ts/context/trace.tsx
index 66112f90f..f001e570c 100644
--- a/packages/dev-tools-pages/ts/context/trace.tsx
+++ b/packages/dev-tools-pages/ts/context/trace.tsx
@@ -12,5 +12,6 @@ export default {
         secondary_alt: '#BFCDFF',
         type: '#7090FF',
         type_alt: '#355CE5',
+        dark: '#0127AB',
     },
 };
-- 
cgit v1.2.3


From 5fe98c816db02e44bf8f6744ca934f862f435898 Mon Sep 17 00:00:00 2001
From: August Skare <post@augustskare.no>
Date: Fri, 26 Oct 2018 08:48:17 +0200
Subject: fix scrollbars in code components

---
 packages/dev-tools-pages/ts/components/Code.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'packages/dev-tools-pages/ts')

diff --git a/packages/dev-tools-pages/ts/components/Code.tsx b/packages/dev-tools-pages/ts/components/Code.tsx
index 4b8f0b555..ffa4441d4 100644
--- a/packages/dev-tools-pages/ts/components/Code.tsx
+++ b/packages/dev-tools-pages/ts/components/Code.tsx
@@ -52,7 +52,7 @@ const Base =
         padding: 1.5rem;
     `}
 
-    overflow-y: scroll;
+    overflow-x: auto;
     -webkit-overflow-scrolling: touch;
 
     &:hover ${Button} {
-- 
cgit v1.2.3


From f17c7e4a22c4a11056251598a11b0ffb31804b73 Mon Sep 17 00:00:00 2001
From: August Skare <post@augustskare.no>
Date: Fri, 26 Oct 2018 08:50:20 +0200
Subject: fix button position in code component

---
 packages/dev-tools-pages/ts/components/Code.tsx | 39 ++++++++++++++-----------
 1 file changed, 22 insertions(+), 17 deletions(-)

(limited to 'packages/dev-tools-pages/ts')

diff --git a/packages/dev-tools-pages/ts/components/Code.tsx b/packages/dev-tools-pages/ts/components/Code.tsx
index ffa4441d4..753965568 100644
--- a/packages/dev-tools-pages/ts/components/Code.tsx
+++ b/packages/dev-tools-pages/ts/components/Code.tsx
@@ -29,6 +29,13 @@ const Button = styled(BaseButton)`
     }
 `;
 
+const Container = styled.div`
+    position: relative;
+    &:hover ${Button} {
+        opacity: 1;
+    }
+`;
+
 const Base =
     styled.div <
     CodeProps >
@@ -54,10 +61,6 @@ const Base =
 
     overflow-x: auto;
     -webkit-overflow-scrolling: touch;
-
-    &:hover ${Button} {
-        opacity: 1;
-    }
 `;
 
 const StyledCodeDiff =
@@ -162,20 +165,22 @@ class Code extends React.Component<CodeProps, CodeState> {
         const Code = diff ? StyledCodeDiff : 'code';
 
         return (
-            <Base language={language} diff={diff} light={light}>
-                <StyledPre>
-                    <Code
-                        gutterLength={gutterLength}
-                        dangerouslySetInnerHTML={hlCode ? { __html: this.state.hlCode } : null}
-                    >
-                        {hlCode === undefined ? children : null}
-                    </Code>
-                </StyledPre>
+            <Container>
+                <Base language={language} diff={diff} light={light}>
+                    <StyledPre>
+                        <Code
+                            gutterLength={gutterLength}
+                            dangerouslySetInnerHTML={hlCode ? { __html: this.state.hlCode } : null}
+                        >
+                            {hlCode === undefined ? children : null}
+                        </Code>
+                    </StyledPre>
+                    {!('clipboard' in navigator) ? (
+                        <CopyInput readOnly aria-hidden="true" ref={this.code} value={children} />
+                    ) : null}
+                </Base>
                 {navigator.userAgent !== 'ReactSnap' ? <Button onClick={this.handleCopy}>Copy</Button> : null}
-                {!('clipboard' in navigator) ? (
-                    <CopyInput readOnly aria-hidden="true" ref={this.code} value={children} />
-                ) : null}
-            </Base>
+            </Container>
         );
     }
 }
-- 
cgit v1.2.3


From 74f05153704d4a9cff355fd8b322b98a1805638c Mon Sep 17 00:00:00 2001
From: August Skare <post@augustskare.no>
Date: Fri, 26 Oct 2018 09:23:09 +0200
Subject: alernate prop on inlinecode component

---
 packages/dev-tools-pages/ts/components/Compiler.tsx   |  2 +-
 packages/dev-tools-pages/ts/components/InlineCode.tsx | 10 ++++++++--
 2 files changed, 9 insertions(+), 3 deletions(-)

(limited to 'packages/dev-tools-pages/ts')

diff --git a/packages/dev-tools-pages/ts/components/Compiler.tsx b/packages/dev-tools-pages/ts/components/Compiler.tsx
index a5b92da13..995a53e89 100644
--- a/packages/dev-tools-pages/ts/components/Compiler.tsx
+++ b/packages/dev-tools-pages/ts/components/Compiler.tsx
@@ -45,7 +45,7 @@ const cards = [
         title: 'Project-centric',
         body: (
             <React.Fragment>
-                It can compile an entire project instead of only individual <InlineCode>.sol</InlineCode> files
+                It can compile an entire project instead of only individual <InlineCode alt>.sol</InlineCode> files
             </React.Fragment>
         ),
     },
diff --git a/packages/dev-tools-pages/ts/components/InlineCode.tsx b/packages/dev-tools-pages/ts/components/InlineCode.tsx
index bfbaeb395..4b5afa95c 100644
--- a/packages/dev-tools-pages/ts/components/InlineCode.tsx
+++ b/packages/dev-tools-pages/ts/components/InlineCode.tsx
@@ -1,8 +1,14 @@
+import * as React from 'react';
 import styled from 'styled-components';
 import { colors } from '../variables';
 
-const InlineCode = styled.code`
-    background-color: ${colors.blueGray}
+interface InlineCodeProps {
+    alt?: boolean;
+    children: React.ReactNode;
+}
+
+const InlineCode = styled(({ alt, children, ...props }: InlineCodeProps) => <code {...props}>{children}</code>)`
+    background-color: ${props => (props.alt ? '#E5E8E9' : colors.blueGray)};
     padding: 0.1875rem;
 `;
 
-- 
cgit v1.2.3


From 0f97771d5ae728b10afd532bcb75a93ab66775e8 Mon Sep 17 00:00:00 2001
From: August Skare <post@augustskare.no>
Date: Fri, 26 Oct 2018 09:33:30 +0200
Subject: fix props drilling to far down

---
 packages/dev-tools-pages/ts/components/Code.tsx | 23 +++++++++++------------
 1 file changed, 11 insertions(+), 12 deletions(-)

(limited to 'packages/dev-tools-pages/ts')

diff --git a/packages/dev-tools-pages/ts/components/Code.tsx b/packages/dev-tools-pages/ts/components/Code.tsx
index 753965568..e9a503f0b 100644
--- a/packages/dev-tools-pages/ts/components/Code.tsx
+++ b/packages/dev-tools-pages/ts/components/Code.tsx
@@ -63,13 +63,10 @@ const Base =
     -webkit-overflow-scrolling: touch;
 `;
 
-const StyledCodeDiff =
-    styled.code <
-    any >
-    `
+const StyledCodeDiff = styled(({ gutterLength, children, ...props }: any) => <code {...props}>{children}</code>)`
     ::before {
         content: '';
-        width: calc(.75rem + ${props => props.gutterLength}ch);
+        width: calc(0.75rem + ${props => props.gutterLength}ch);
         background-color: #e2e5e6;
         position: absolute;
         top: 0;
@@ -87,8 +84,8 @@ const StyledCodeDiff =
             content: attr(data-test);
             font-size: 0.875rem;
             width: ${props => props.gutterLength};
-            padding-left: .375rem;
-            padding-right: .375rem;
+            padding-left: 0.375rem;
+            padding-right: 0.375rem;
             position: absolute;
             top: 50%;
             left: 0;
@@ -162,16 +159,18 @@ class Code extends React.Component<CodeProps, CodeState> {
         const { language, light, diff, children, gutterLength } = this.props;
         const { hlCode } = this.state;
 
-        const Code = diff ? StyledCodeDiff : 'code';
+        let Code = 'code';
+        let codeProps = {};
+        if (diff) {
+            codeProps = { gutterLength };
+            Code = StyledCodeDiff as any;
+        }
 
         return (
             <Container>
                 <Base language={language} diff={diff} light={light}>
                     <StyledPre>
-                        <Code
-                            gutterLength={gutterLength}
-                            dangerouslySetInnerHTML={hlCode ? { __html: this.state.hlCode } : null}
-                        >
+                        <Code {...codeProps} dangerouslySetInnerHTML={hlCode ? { __html: this.state.hlCode } : null}>
                             {hlCode === undefined ? children : null}
                         </Code>
                     </StyledPre>
-- 
cgit v1.2.3


From 89e439c521aed35be72bee1094d8a431e5fc1d68 Mon Sep 17 00:00:00 2001
From: August Skare <post@augustskare.no>
Date: Fri, 26 Oct 2018 09:59:10 +0200
Subject: update content in tabs

---
 packages/dev-tools-pages/ts/pages/Compiler.tsx | 12 ++++++++----
 packages/dev-tools-pages/ts/pages/Cov.tsx      | 21 ++++++++++++++++++---
 packages/dev-tools-pages/ts/pages/Profiler.tsx | 23 +++++++++++++++++++----
 packages/dev-tools-pages/ts/pages/Trace.tsx    | 23 +++++++++++++++++++----
 4 files changed, 64 insertions(+), 15 deletions(-)

(limited to 'packages/dev-tools-pages/ts')

diff --git a/packages/dev-tools-pages/ts/pages/Compiler.tsx b/packages/dev-tools-pages/ts/pages/Compiler.tsx
index 0d9be16bf..d2c14c90c 100644
--- a/packages/dev-tools-pages/ts/pages/Compiler.tsx
+++ b/packages/dev-tools-pages/ts/pages/Compiler.tsx
@@ -66,7 +66,8 @@ function Compiler() {
 
                 <ContentBlock title="Production">
                     <p>
-                    Sol compiler uses solidity standard JSON output format for the artifacts. This way, you can define which parts of the artifact you need.
+                        Sol compiler uses solidity standard JSON output format for the artifacts. This way, you can
+                        define which parts of the artifact you need.
                     </p>
                     <Breakout>
                         <Code light language="json">
@@ -94,9 +95,12 @@ function Compiler() {
 }`}
                         </Code>
                     </Breakout>
-                    </ContentBlock>
-                    <ContentBlock title="Development">
-                    <p>Sometimes you need to use some debuggers or other dev tools and you’ll need more info in the artifact.</p>
+                </ContentBlock>
+                <ContentBlock title="Development">
+                    <p>
+                        Sometimes you need to use some debuggers or other dev tools and you’ll need more info in the
+                        artifact.
+                    </p>
                     <Breakout>
                         <Code light language="json">
                             {`{
diff --git a/packages/dev-tools-pages/ts/pages/Cov.tsx b/packages/dev-tools-pages/ts/pages/Cov.tsx
index 743b990df..4d8288219 100644
--- a/packages/dev-tools-pages/ts/pages/Cov.tsx
+++ b/packages/dev-tools-pages/ts/pages/Cov.tsx
@@ -84,8 +84,23 @@ function Cov() {
 const artifactAdapter = new SolCompilerArtifactAdapter(artifactsDir, contractsDir);`}
                             </Code>
                         </TabBlock>
-                        <TabBlock title="Truffle">Truffle</TabBlock>
-                        <TabBlock title="Custom">Custom</TabBlock>
+                        <TabBlock title="Truffle">
+                            <Code language="javascript">
+                                {`import { TruffleArtifactAdapter } from '@0x/sol-trace';
+
+const projectRoot = '.';
+const solcVersion = '0.4.24';
+const artifactAdapter = new TruffleArtifactAdapter(projectRoot, solcVersion);`}
+                            </Code>
+                        </TabBlock>
+                        <TabBlock title="Custom">
+                            <Code language="javascript">
+                                {`import { AbstractArtifactAdapter } from '@0x/sol-trace';
+
+class YourCustomArtifactsAdapter extends AbstractArtifactAdapter {...};
+const artifactAdapter = new YourCustomArtifactsAdapter(...);`}
+                            </Code>
+                        </TabBlock>
                     </Tabs>
                     <p>
                         Now that we have an <InlineCode>artifactAdapter</InlineCode>, we can create a{' '}
@@ -93,7 +108,7 @@ const artifactAdapter = new SolCompilerArtifactAdapter(artifactsDir, contractsDi
                     </p>
 
                     <Breakout>
-                        <Code language="js">
+                        <Code language="javascript">
                             {`import { ProviderEngine, RpcSubprovider } from 'web3-provider-engine';
 import { RevertTraceSubprovider } from '@0x/sol-cov';
 
diff --git a/packages/dev-tools-pages/ts/pages/Profiler.tsx b/packages/dev-tools-pages/ts/pages/Profiler.tsx
index b8e78264e..d45721937 100644
--- a/packages/dev-tools-pages/ts/pages/Profiler.tsx
+++ b/packages/dev-tools-pages/ts/pages/Profiler.tsx
@@ -69,15 +69,30 @@ function Profiler() {
 
                     <Tabs>
                         <TabBlock title="Sol-compiler">
-                            <Code language="js">
+                            <Code language="javascript">
                                 {`import { SolCompilerArtifactAdapter } from '@0x/sol-trace';
 
 // Both artifactsDir and contractsDir are optional and will be fetched from compiler.json if not passed in
 const artifactAdapter = new SolCompilerArtifactAdapter(artifactsDir, contractsDir);`}
                             </Code>
                         </TabBlock>
-                        <TabBlock title="Truffle">Truffle</TabBlock>
-                        <TabBlock title="Custom">Custom</TabBlock>
+                        <TabBlock title="Truffle">
+                            <Code language="javascript">
+                                {`import { TruffleArtifactAdapter } from '@0x/sol-trace';
+
+const projectRoot = '.';
+const solcVersion = '0.4.24';
+const artifactAdapter = new TruffleArtifactAdapter(projectRoot, solcVersion);`}
+                            </Code>
+                        </TabBlock>
+                        <TabBlock title="Custom">
+                            <Code language="javascript">
+                                {`import { AbstractArtifactAdapter } from '@0x/sol-trace';
+
+class YourCustomArtifactsAdapter extends AbstractArtifactAdapter {...};
+const artifactAdapter = new YourCustomArtifactsAdapter(...);`}
+                            </Code>
+                        </TabBlock>
                     </Tabs>
                     <p>
                         Now that we have an <InlineCode>artifactAdapter</InlineCode>, we can create a{' '}
@@ -85,7 +100,7 @@ const artifactAdapter = new SolCompilerArtifactAdapter(artifactsDir, contractsDi
                     </p>
 
                     <Breakout>
-                        <Code language="js">
+                        <Code language="javascript">
                             {`import { ProviderEngine, RpcSubprovider } from 'web3-provider-engine';
 import { RevertTraceSubprovider } from '@0x/sol-cov';
 
diff --git a/packages/dev-tools-pages/ts/pages/Trace.tsx b/packages/dev-tools-pages/ts/pages/Trace.tsx
index 870402df6..609ec8625 100644
--- a/packages/dev-tools-pages/ts/pages/Trace.tsx
+++ b/packages/dev-tools-pages/ts/pages/Trace.tsx
@@ -44,15 +44,30 @@ function Trace() {
 
                     <Tabs>
                         <TabBlock title="Sol-compiler">
-                            <Code language="js">
+                            <Code language="javascript">
                                 {`import { SolCompilerArtifactAdapter } from '@0x/sol-trace';
 
 // Both artifactsDir and contractsDir are optional and will be fetched from compiler.json if not passed in
 const artifactAdapter = new SolCompilerArtifactAdapter(artifactsDir, contractsDir);`}
                             </Code>
                         </TabBlock>
-                        <TabBlock title="Truffle">Truffle</TabBlock>
-                        <TabBlock title="Custom">Custom</TabBlock>
+                        <TabBlock title="Truffle">
+                            <Code language="javascript">
+                                {`import { TruffleArtifactAdapter } from '@0x/sol-trace';
+
+const projectRoot = '.';
+const solcVersion = '0.4.24';
+const artifactAdapter = new TruffleArtifactAdapter(projectRoot, solcVersion);`}
+                            </Code>
+                        </TabBlock>
+                        <TabBlock title="Custom">
+                            <Code language="javascript">
+                                {`import { AbstractArtifactAdapter } from '@0x/sol-trace';
+
+class YourCustomArtifactsAdapter extends AbstractArtifactAdapter {...};
+const artifactAdapter = new YourCustomArtifactsAdapter(...);`}
+                            </Code>
+                        </TabBlock>
                     </Tabs>
                     <p>
                         Now that we have an <InlineCode>artifactAdapter</InlineCode>, we can create a{' '}
@@ -60,7 +75,7 @@ const artifactAdapter = new SolCompilerArtifactAdapter(artifactsDir, contractsDi
                     </p>
 
                     <Breakout>
-                        <Code language="js">
+                        <Code language="javascript">
                             {`import { ProviderEngine, RpcSubprovider } from 'web3-provider-engine';
 import { RevertTraceSubprovider } from '@0x/sol-cov';
 
-- 
cgit v1.2.3


From 3d4041ecd3d9384853514ea0cebc445e630b106e Mon Sep 17 00:00:00 2001
From: August Skare <post@augustskare.no>
Date: Mon, 29 Oct 2018 08:13:03 +0000
Subject: Feature/feedbacktweaks (#11)

* Fix typo

* Fix 1px line showing in middle of divs

* Increase inline code padding by 2px

* Make masonry block not full width on screens larger than mobile

* Align list items

* Change button text to copied if it's been copied
---
 packages/dev-tools-pages/ts/components/Code.tsx     |  2 +-
 packages/dev-tools-pages/ts/components/Compiler.tsx | 21 ++++++++++++---------
 .../dev-tools-pages/ts/components/InlineCode.tsx    |  2 +-
 packages/dev-tools-pages/ts/components/List.tsx     | 12 +++++++++---
 packages/dev-tools-pages/ts/components/Trace.tsx    | 20 ++++++++++----------
 5 files changed, 33 insertions(+), 24 deletions(-)

(limited to 'packages/dev-tools-pages/ts')

diff --git a/packages/dev-tools-pages/ts/components/Code.tsx b/packages/dev-tools-pages/ts/components/Code.tsx
index e9a503f0b..b883dcbf8 100644
--- a/packages/dev-tools-pages/ts/components/Code.tsx
+++ b/packages/dev-tools-pages/ts/components/Code.tsx
@@ -178,7 +178,7 @@ class Code extends React.Component<CodeProps, CodeState> {
                         <CopyInput readOnly aria-hidden="true" ref={this.code} value={children} />
                     ) : null}
                 </Base>
-                {navigator.userAgent !== 'ReactSnap' ? <Button onClick={this.handleCopy}>Copy</Button> : null}
+                {navigator.userAgent !== 'ReactSnap' ? <Button onClick={this.handleCopy}>{this.state.copied ? 'Copied' : 'Copy'}</Button> : null}
             </Container>
         );
     }
diff --git a/packages/dev-tools-pages/ts/components/Compiler.tsx b/packages/dev-tools-pages/ts/components/Compiler.tsx
index 995a53e89..2ca340146 100644
--- a/packages/dev-tools-pages/ts/components/Compiler.tsx
+++ b/packages/dev-tools-pages/ts/components/Compiler.tsx
@@ -4,6 +4,7 @@ import { media, colors } from '../variables';
 
 import Container from './Container';
 import InlineCode from './InlineCode';
+import Breakout from './Breakout';
 
 const Cards = styled.dl`
     column-count: 3;
@@ -71,15 +72,17 @@ const cards = [
 
 function Compiler() {
     return (
-        <Container wide>
-            <Cards>
-                {cards.map(card => (
-                    <Card key={card.title.split(' ').join('-')}>
-                        <Dt>{card.title}</Dt>
-                        <Dd>{card.body}</Dd>
-                    </Card>
-                ))}
-            </Cards>
+        <Container>
+            <Breakout>
+                <Cards>
+                    {cards.map(card => (
+                        <Card key={card.title.split(' ').join('-')}>
+                            <Dt>{card.title}</Dt>
+                            <Dd>{card.body}</Dd>
+                        </Card>
+                    ))}
+                </Cards>
+            </Breakout>
         </Container>
     );
 }
diff --git a/packages/dev-tools-pages/ts/components/InlineCode.tsx b/packages/dev-tools-pages/ts/components/InlineCode.tsx
index 4b5afa95c..9f25927cd 100644
--- a/packages/dev-tools-pages/ts/components/InlineCode.tsx
+++ b/packages/dev-tools-pages/ts/components/InlineCode.tsx
@@ -9,7 +9,7 @@ interface InlineCodeProps {
 
 const InlineCode = styled(({ alt, children, ...props }: InlineCodeProps) => <code {...props}>{children}</code>)`
     background-color: ${props => (props.alt ? '#E5E8E9' : colors.blueGray)};
-    padding: 0.1875rem;
+    padding: 0.3125rem;
 `;
 
 export default InlineCode;
diff --git a/packages/dev-tools-pages/ts/components/List.tsx b/packages/dev-tools-pages/ts/components/List.tsx
index ceb3bc108..b9bc4ab24 100644
--- a/packages/dev-tools-pages/ts/components/List.tsx
+++ b/packages/dev-tools-pages/ts/components/List.tsx
@@ -5,18 +5,24 @@ import { media } from '../variables';
 const StyledList = styled.ul`
     list-style-type: none;
     margin: 0;
-    padding-inline-start: 0.2rem;
+    padding-inline-start: 0rem;
+    position: relative;
 `;
 
 const StyledItem = styled.li`
+    position: relative;
+    padding-left: 26px;  
+
     :before {
         content: '';
+        position: absolute;
+        left: 0;
         border: 1px solid black;
         width: 0.6875rem;
         height: 0.6875rem;
         display: inline-block;
-        transform: rotate(45deg);
-        margin-right: 1.09375rem;
+        transform: rotate(45deg) translateY(-50%);
+        top: 12px;
     }
     :not(:last-child) {
         margin-bottom: 0.5625rem;
diff --git a/packages/dev-tools-pages/ts/components/Trace.tsx b/packages/dev-tools-pages/ts/components/Trace.tsx
index 3b272ce98..d5f323775 100644
--- a/packages/dev-tools-pages/ts/components/Trace.tsx
+++ b/packages/dev-tools-pages/ts/components/Trace.tsx
@@ -28,7 +28,7 @@ function Trace(props: Props) {
                         Every time an Ethereum transaction fails, it's extremely hard to trace down the troublemaking
                         line of code. The only hint you'll get is a generic error.
                     </MainCopy>
-                    <Code light>Error: VM Exception while processing transaction: rever</Code>
+                    <Code light>Error: VM Exception while processing transaction: revert</Code>
 
                     <List>
                         <Item>
@@ -62,7 +62,7 @@ function Trace(props: Props) {
                         snippets, every time you encounter an error.
                     </MainCopy>
                     <Code light language="javascript">
-                    {`contracts/src/2.0.0/protocol/Exchange/MixinSignatureValidator.sol:51:8
+                        {`contracts/src/2.0.0/protocol/Exchange/MixinSignatureValidator.sol:51:8
     require(
         isValidSignature(
             hash,
@@ -71,7 +71,7 @@ function Trace(props: Props) {
         ),
         "INVALID_SIGNATURE"
     )`}
-        </Code>
+                    </Code>
 
                     <List>
                         <Item>
@@ -104,13 +104,11 @@ function Trace(props: Props) {
 
 const StyledSection =
     styled.section <
-    TraceProps >
-    `
+        TraceProps >
+        `
     max-width: 90rem;
     margin: 0 auto;
     background: linear-gradient(to right, ${colors.black} 50%, ${props => props.background} 50%);
-    padding-top: 6.25rem;
-    padding-bottom: 5.25rem;
     
     ${media.small`
         background: none
@@ -136,11 +134,13 @@ const Wrapper = styled(Container)`
 
 const Block =
     styled.div <
-    TraceProps >
-    `
+        TraceProps >
+        `
     width: 50%;
     background: ${props => (props.background ? props.background : colors.black)};
     color: ${props => (props.background ? 'inherit' : colors.white)};
+    padding-top: 6.25rem;
+    padding-bottom: 5.25rem;
 
     :first-of-type {
         padding-right: 6.25rem;
@@ -191,7 +191,7 @@ const Item = styled.li`
     }
 `;
 
-const Copy = styled.div<{dark?: boolean;}>`
+const Copy = styled.div<{ dark?: boolean; }>`
     max-width: 20rem;
     margin-right: 5.875rem;
     ${props => props.dark && `
-- 
cgit v1.2.3


From 0e3cd82348570ed4c524d3b4f216001089f49125 Mon Sep 17 00:00:00 2001
From: August Skare <post@augustskare.no>
Date: Mon, 29 Oct 2018 08:15:20 +0000
Subject: Fixes/august (#12)

* fix button dimensions

* fix footer hover color

* breakout in trace component

* fix padding on button on small screens

* fix title with content on small screens

* sizing adjustment in intro component

* intro component adjustments

* container size adjustments

* meta og images

* fixed gutter size

* trace component fix + breakout fix

* show copy button if touch device

* responsive hero animation
---
 .../dev-tools-pages/ts/components/Breakout.tsx     |  4 +-
 packages/dev-tools-pages/ts/components/Button.tsx  | 15 ++++--
 packages/dev-tools-pages/ts/components/Code.tsx    | 13 +++--
 .../dev-tools-pages/ts/components/Container.tsx    |  4 +-
 .../dev-tools-pages/ts/components/ContentBlock.tsx |  5 ++
 packages/dev-tools-pages/ts/components/Hero.tsx    | 59 +++++++++++++++-------
 packages/dev-tools-pages/ts/components/Intro.tsx   | 15 ++++--
 packages/dev-tools-pages/ts/components/Trace.tsx   | 36 ++++++++-----
 packages/dev-tools-pages/ts/context/compiler.tsx   |  2 +-
 packages/dev-tools-pages/ts/context/cov.tsx        |  2 +-
 packages/dev-tools-pages/ts/context/profiler.tsx   |  2 +-
 packages/dev-tools-pages/ts/context/trace.tsx      |  2 +-
 packages/dev-tools-pages/ts/variables.tsx          |  2 +
 13 files changed, 111 insertions(+), 50 deletions(-)

(limited to 'packages/dev-tools-pages/ts')

diff --git a/packages/dev-tools-pages/ts/components/Breakout.tsx b/packages/dev-tools-pages/ts/components/Breakout.tsx
index fb76c8c29..39998e9c7 100644
--- a/packages/dev-tools-pages/ts/components/Breakout.tsx
+++ b/packages/dev-tools-pages/ts/components/Breakout.tsx
@@ -4,8 +4,8 @@ import { media } from 'ts/variables';
 
 const Breakout = styled.div`
     ${media.small`
-        margin-left: -30px;
-        width: calc(100% + 60px);
+        margin-left: -2.5rem;
+        width: calc(100% + 5rem);
   `};
 `;
 
diff --git a/packages/dev-tools-pages/ts/components/Button.tsx b/packages/dev-tools-pages/ts/components/Button.tsx
index 65f1fce74..97c08ad21 100644
--- a/packages/dev-tools-pages/ts/components/Button.tsx
+++ b/packages/dev-tools-pages/ts/components/Button.tsx
@@ -13,7 +13,8 @@ const Button =
     ButtonProps >
     `
   font-family: inherit;
-  font-size: ${props => (props.large ? '1.125rem' : '.875rem')};
+  font-size: ${props => (props.large ? '1rem' : '.875rem')};
+  line-height: 1;
   font-weight: 500;
   white-space: nowrap;
   vertical-align: middle;
@@ -21,16 +22,20 @@ const Button =
   color: ${colors.black};
   border: 0;
   border-radius: 5rem;
-  padding: ${props => (props.large ? '1.125rem 2.375rem' : '.5625rem 1.25rem')};
-  display: inline-block;
+  height: ${props => (props.large ? '3.25rem' : '2rem')};
+  padding: ${props => (props.large ? '0 2.375rem' : '0 1.25rem')};
+  display: inline-flex;
+  justify-content: space-between;
+  align-items: center;
   :hover, :focus {
     background-color: ${props => props.colors.secondary_alt};
   } 
   ${props =>
       props.large &&
       media.small`
-    font-size: 1rem;
-    padding: .875rem 1.5rem;
+    font-size: .875rem;
+    height: 2rem;
+    padding: 0 1.25rem;
   `}
 `;
 
diff --git a/packages/dev-tools-pages/ts/components/Code.tsx b/packages/dev-tools-pages/ts/components/Code.tsx
index b883dcbf8..d1aeaeeb0 100644
--- a/packages/dev-tools-pages/ts/components/Code.tsx
+++ b/packages/dev-tools-pages/ts/components/Code.tsx
@@ -1,9 +1,15 @@
 import * as React from 'react';
 import styled from 'styled-components';
 
-import { colors } from 'ts/variables';
+import { colors, media } from 'ts/variables';
 import BaseButton from './Button';
 
+const touch = Boolean(
+    'ontouchstart' in window ||
+        (window as any).navigator.maxTouchPoints > 0 ||
+        (window as any).navigator.msMaxTouchPoints > 0,
+);
+
 interface CodeProps {
     children: React.ReactNode;
     language?: string;
@@ -19,7 +25,7 @@ interface CodeState {
 }
 
 const Button = styled(BaseButton)`
-    opacity: 0;
+    opacity: ${touch ? '1' : '0'};
     position: absolute;
     top: 1rem;
     right: 1rem;
@@ -80,9 +86,10 @@ const StyledCodeDiff = styled(({ gutterLength, children, ...props }: any) => <co
         position: relative;
         padding-right: 1.5rem;
         padding-left: calc(2.25rem + ${props => props.gutterLength}ch);
+
         ::before {
             content: attr(data-test);
-            font-size: 0.875rem;
+
             width: ${props => props.gutterLength};
             padding-left: 0.375rem;
             padding-right: 0.375rem;
diff --git a/packages/dev-tools-pages/ts/components/Container.tsx b/packages/dev-tools-pages/ts/components/Container.tsx
index 53fb8427f..de2de383b 100644
--- a/packages/dev-tools-pages/ts/components/Container.tsx
+++ b/packages/dev-tools-pages/ts/components/Container.tsx
@@ -1,5 +1,7 @@
 import styled from 'styled-components';
 
+import { media } from 'ts/variables';
+
 interface ContainerProps {
     wide?: boolean;
 }
@@ -10,7 +12,7 @@ const Container =
     `
     max-width: 77.5rem;
     margin: 0 auto;
-    width: ${props => (props.wide ? '100%' : 'calc(100% - 3.75rem)')};
+    width: ${props => (props.wide ? '100%' : 'calc(100% - 5rem)')};
 `;
 
 export default Container;
diff --git a/packages/dev-tools-pages/ts/components/ContentBlock.tsx b/packages/dev-tools-pages/ts/components/ContentBlock.tsx
index 6db4c3994..c54930902 100644
--- a/packages/dev-tools-pages/ts/components/ContentBlock.tsx
+++ b/packages/dev-tools-pages/ts/components/ContentBlock.tsx
@@ -45,6 +45,11 @@ const Item = styled.div`
 
 const StyledTitle = styled(Alpha)`
     color: ${props => props.color};
+    ${media.small`
+        & + div {
+            margin-top: 1.5rem;
+        }
+    `};
 `;
 
 interface ContentBlockProps extends Props {
diff --git a/packages/dev-tools-pages/ts/components/Hero.tsx b/packages/dev-tools-pages/ts/components/Hero.tsx
index e045a7ad4..e92ab6e9d 100644
--- a/packages/dev-tools-pages/ts/components/Hero.tsx
+++ b/packages/dev-tools-pages/ts/components/Hero.tsx
@@ -6,40 +6,46 @@ import { withContext, Props } from './withContext';
 import Button from './Button';
 import { Beta } from './Typography';
 
-const IMAGE_WIDTH = 2560;
-const IMAGE_HEIGHT = 800;
-
 function Hero(props: Props) {
     const { subtitle, tagline, title } = props;
 
     return (
         <React.Fragment>
             <StyledHero>
-                <Subtitle>{subtitle}</Subtitle>
-                <Tagline as="p">{tagline}</Tagline>
-                <Button as="a" href="#" large>
-                    Read the Docs
-                </Button>
-            </StyledHero>
+                <HeroContainer>
+                    <Subtitle>{subtitle}</Subtitle>
+                    <Tagline as="p">{tagline}</Tagline>
+                    <Button as="a" href="#" large>
+                        Read the Docs
+                    </Button>
+                </HeroContainer>
 
-            <ImageContainer>
-                <Image src={`/images/${title}@1x.gif`} srcSet={`/images/${title}@1x.gif, /images/${title}@2x.gif 2x`} />
-            </ImageContainer>
+                <ImageContainer>
+                    <Image
+                        src={`/images/${title}@1x.gif`}
+                        srcSet={`/images/${title}@1x.gif, /images/${title}@2x.gif 2x`}
+                    />
+                </ImageContainer>
+            </StyledHero>
         </React.Fragment>
     );
 }
 
 const StyledHero = styled.section`
     text-align: center;
-    margin: 0 auto;
     padding-top: 9.375rem;
     padding-bottom: 2rem;
     padding-left: 2.5rem;
     padding-right: 2.5rem;
-    max-width: 590px;
     min-height: min-content;
     max-height: 37.5rem;
     height: 80vh;
+    position: relative;
+`;
+
+const HeroContainer = styled.div`
+    margin: 0 auto;
+    max-width: 590px;
 `;
 
 const Subtitle = styled.h2`
@@ -63,20 +69,37 @@ const Tagline = styled(Beta)`
 
 const ImageContainer = styled.div`
     width: 100%;
-    height: ${IMAGE_HEIGHT}px;
+    height: 800px;
     position: absolute;
-    top: 6.875rem;
+    top: 100%;
     left: 0;
     overflow: hidden;
+    transform: translateY(-50%);
     z-index: -1;
+    ${media.xlarge`
+        height: 533.333333334px;
+        transform: translateY(-60%);
+    `};
+    ${media.small`
+        height: 400px;
+        transform: translateY(-70%);
+    `};
 `;
 
 const Image = styled.img`
-    width: ${IMAGE_WIDTH}px;
+    width: min-content;
+    height: 100%;
     position: absolute;
     top: 0;
     left: 50%;
-    transform: translate(-50%);
+    transform: translateX(-50%);
+    object-fit: contain;
+    ${media.small`
+        height: 100%;
+        width: auto;
+        left: 0;
+        transform: translateX(-15%);
+    `};
 `;
 
 export default withContext(Hero);
diff --git a/packages/dev-tools-pages/ts/components/Intro.tsx b/packages/dev-tools-pages/ts/components/Intro.tsx
index 86d29e36d..7a30d05c7 100644
--- a/packages/dev-tools-pages/ts/components/Intro.tsx
+++ b/packages/dev-tools-pages/ts/components/Intro.tsx
@@ -12,8 +12,10 @@ const Main = styled.div`
     display: flex;
     justify-content: space-between;
 
-    ${media.medium`
+    ${media.large`
         padding: 2.5rem 1.875rem
+    `};
+    ${media.medium`
         display: block;     
     `};
 `;
@@ -21,17 +23,24 @@ const Main = styled.div`
 const Title = styled(Alpha)`
     margin-bottom: 2.5rem;
 
-    ${media.small`margin-bottom: 2.25rem;`};
+    ${media.medium`margin-bottom: 2.25rem;`};
 `;
 
 const StyledIntroLead = styled(Lead)`
     max-width: 25.9375rem;
-    ${media.small`margin-bottom: 1.5625rem;`};
+    margin-right: 2rem;
+    ${media.medium`
+        max-width: 100%;
+        margin-bottom: 1.5625rem;
+    `};
 `;
 
 const StyledIntroAside = styled.div`
     max-width: 32.5rem;
     position: relative;
+    ${media.medium`
+        max-width: 100%;
+    `};
 `;
 
 interface IntroProps {
diff --git a/packages/dev-tools-pages/ts/components/Trace.tsx b/packages/dev-tools-pages/ts/components/Trace.tsx
index d5f323775..74aef69b5 100644
--- a/packages/dev-tools-pages/ts/components/Trace.tsx
+++ b/packages/dev-tools-pages/ts/components/Trace.tsx
@@ -6,6 +6,7 @@ import { withContext, Props } from './withContext';
 import { Alpha, Lead, Gamma } from './Typography';
 import Container from './Container';
 import Code from './Code';
+import Breakout from './Breakout';
 
 import ExactLocation from 'ts/icons/exact-location.svg';
 import NoLocation from 'ts/icons/no-location.svg';
@@ -28,7 +29,9 @@ function Trace(props: Props) {
                         Every time an Ethereum transaction fails, it's extremely hard to trace down the troublemaking
                         line of code. The only hint you'll get is a generic error.
                     </MainCopy>
-                    <Code light>Error: VM Exception while processing transaction: revert</Code>
+                    <Breakout>
+                        <Code light>Error: VM Exception while processing transaction: rever</Code>
+                    </Breakout>
 
                     <List>
                         <Item>
@@ -61,7 +64,8 @@ function Trace(props: Props) {
                         Sol-trace will give you full stack traces, including contract names, line numbers and code
                         snippets, every time you encounter an error.
                     </MainCopy>
-                    <Code light language="javascript">
+                    <Breakout>
+                        <Code light language="javascript">
                         {`contracts/src/2.0.0/protocol/Exchange/MixinSignatureValidator.sol:51:8
     require(
         isValidSignature(
@@ -71,7 +75,8 @@ function Trace(props: Props) {
         ),
         "INVALID_SIGNATURE"
     )`}
-                    </Code>
+                        </Code>
+                    </Breakout>
 
                     <List>
                         <Item>
@@ -110,7 +115,7 @@ const StyledSection =
     margin: 0 auto;
     background: linear-gradient(to right, ${colors.black} 50%, ${props => props.background} 50%);
     
-    ${media.small`
+    ${media.large`
         background: none
         padding-top: 0;
         padding-bottom: 0;
@@ -126,7 +131,7 @@ const Wrapper = styled(Container)`
         ${media.small`padding-bottom: 1.875rem;`};
     }
 
-    ${media.small`
+    ${media.large`
         display: block;
         width: 100%;
     `};
@@ -149,19 +154,22 @@ const Block =
         padding-left: 6.25rem;
     }
 
-    ${media.small`
-        width: 100%;
-        padding-top: 2.5rem;
-        padding-bottom: 3.4375rem;
-
+    ${media.xlarge`
         :first-of-type {
-            padding-left: 1.875rem;
-            padding-right: 1.875rem;
+            padding-right: 2.5rem;
         }
         :last-of-type {
-            padding-left: 1.875rem;
-            padding-right: 1.875rem;
+            padding-left: 2.5rem;
         }
+    `}
+    ${media.large`
+        width: 100%;
+        padding: 2.5rem;
+    `}
+
+    ${media.small`
+        padding-left: 1.875rem;
+        padding-right: 1.875rem;
     `};
 `;
 
diff --git a/packages/dev-tools-pages/ts/context/compiler.tsx b/packages/dev-tools-pages/ts/context/compiler.tsx
index 06860b1e9..e14c1936e 100644
--- a/packages/dev-tools-pages/ts/context/compiler.tsx
+++ b/packages/dev-tools-pages/ts/context/compiler.tsx
@@ -12,6 +12,6 @@ export default {
         secondary_alt: '#C4F2FC',
         type: '#30C3E3',
         type_alt: '#16A9C9',
-        dark: '#00404E',
+        dark: '#4B818D',
     },
 };
diff --git a/packages/dev-tools-pages/ts/context/cov.tsx b/packages/dev-tools-pages/ts/context/cov.tsx
index bf3883920..47f115582 100644
--- a/packages/dev-tools-pages/ts/context/cov.tsx
+++ b/packages/dev-tools-pages/ts/context/cov.tsx
@@ -12,6 +12,6 @@ export default {
         secondary_alt: '#F1D882',
         type: '#D7AE1B',
         type_alt: '#BD9406',
-        dark: '#423300',
+        dark: '#817033',
     },
 };
diff --git a/packages/dev-tools-pages/ts/context/profiler.tsx b/packages/dev-tools-pages/ts/context/profiler.tsx
index d5dd2a394..9593c08ec 100644
--- a/packages/dev-tools-pages/ts/context/profiler.tsx
+++ b/packages/dev-tools-pages/ts/context/profiler.tsx
@@ -12,6 +12,6 @@ export default {
         secondary_alt: '#FECEBE',
         type: '#EB8666',
         type_alt: '#D16745',
-        dark: '#5F1700',
+        dark: '#985C49',
     },
 };
diff --git a/packages/dev-tools-pages/ts/context/trace.tsx b/packages/dev-tools-pages/ts/context/trace.tsx
index f001e570c..697a4263a 100644
--- a/packages/dev-tools-pages/ts/context/trace.tsx
+++ b/packages/dev-tools-pages/ts/context/trace.tsx
@@ -12,6 +12,6 @@ export default {
         secondary_alt: '#BFCDFF',
         type: '#7090FF',
         type_alt: '#355CE5',
-        dark: '#0127AB',
+        dark: '#2A4ABC',
     },
 };
diff --git a/packages/dev-tools-pages/ts/variables.tsx b/packages/dev-tools-pages/ts/variables.tsx
index 76a675546..258e5d225 100644
--- a/packages/dev-tools-pages/ts/variables.tsx
+++ b/packages/dev-tools-pages/ts/variables.tsx
@@ -15,6 +15,8 @@ interface SizesInterface {
 }
 
 const sizes: SizesInterface = {
+    xlarge: 1420,
+    large: 1000,
     medium: 900,
     small: 650,
 };
-- 
cgit v1.2.3


From dd8b9bf98722e2532624403dca1524682600bfa4 Mon Sep 17 00:00:00 2001
From: August Skare <post@augustskare.no>
Date: Tue, 30 Oct 2018 08:21:39 +0100
Subject: fix link to 0x in header

---
 packages/dev-tools-pages/ts/components/Header.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'packages/dev-tools-pages/ts')

diff --git a/packages/dev-tools-pages/ts/components/Header.tsx b/packages/dev-tools-pages/ts/components/Header.tsx
index 943786778..01ef944f4 100644
--- a/packages/dev-tools-pages/ts/components/Header.tsx
+++ b/packages/dev-tools-pages/ts/components/Header.tsx
@@ -18,7 +18,7 @@ function Header(props: Props) {
                     <Title>{title}</Title>
                 </LogoMark>
 
-                <Link as="a" href="#">
+                <Link as="a" href="https://0xproject.com/">
                     Built by 0x
                 </Link>
             </Container>
-- 
cgit v1.2.3


From 50c4909f2249c3c73675ba8d13122bd520394363 Mon Sep 17 00:00:00 2001
From: August Skare <post@augustskare.no>
Date: Tue, 30 Oct 2018 08:24:14 +0100
Subject: change footer copy

---
 packages/dev-tools-pages/ts/components/Footer.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

(limited to 'packages/dev-tools-pages/ts')

diff --git a/packages/dev-tools-pages/ts/components/Footer.tsx b/packages/dev-tools-pages/ts/components/Footer.tsx
index 2b7f4f305..aa2a6eed9 100644
--- a/packages/dev-tools-pages/ts/components/Footer.tsx
+++ b/packages/dev-tools-pages/ts/components/Footer.tsx
@@ -39,8 +39,7 @@ function Footer(props: Props) {
                 <Media as="aside">
                     <Icon as={MainIcon} />
                     <Small>
-                        Built by 0x. 0x is an open, permissionless protocol allowing for ERC20 tokens to be traded on
-                        the Ethereum blockchain.
+                    0x is an open, permissionless protocol allowing for tokens to be traded on the Ethereum blockchain.
                     </Small>
                 </Media>
             </Container>
-- 
cgit v1.2.3


From 5cb944fe1b92c1d9f886faa247297115abbfd463 Mon Sep 17 00:00:00 2001
From: August Skare <post@augustskare.no>
Date: Tue, 30 Oct 2018 08:27:31 +0100
Subject: optional copy button in code component

---
 packages/dev-tools-pages/ts/components/Code.tsx | 7 +++++--
 packages/dev-tools-pages/ts/pages/Compiler.tsx  | 2 +-
 2 files changed, 6 insertions(+), 3 deletions(-)

(limited to 'packages/dev-tools-pages/ts')

diff --git a/packages/dev-tools-pages/ts/components/Code.tsx b/packages/dev-tools-pages/ts/components/Code.tsx
index d1aeaeeb0..a6971fc84 100644
--- a/packages/dev-tools-pages/ts/components/Code.tsx
+++ b/packages/dev-tools-pages/ts/components/Code.tsx
@@ -17,6 +17,7 @@ interface CodeProps {
     diff?: boolean;
     gutter?: Array<number>;
     gutterLength?: number;
+    copy?: boolean;
 }
 
 interface CodeState {
@@ -163,7 +164,7 @@ class Code extends React.Component<CodeProps, CodeState> {
     };
 
     render() {
-        const { language, light, diff, children, gutterLength } = this.props;
+        const { language, light, diff, children, gutterLength, copy } = this.props;
         const { hlCode } = this.state;
 
         let Code = 'code';
@@ -185,7 +186,9 @@ class Code extends React.Component<CodeProps, CodeState> {
                         <CopyInput readOnly aria-hidden="true" ref={this.code} value={children} />
                     ) : null}
                 </Base>
-                {navigator.userAgent !== 'ReactSnap' ? <Button onClick={this.handleCopy}>{this.state.copied ? 'Copied' : 'Copy'}</Button> : null}
+                {navigator.userAgent !== 'ReactSnap' && copy ? (
+                    <Button onClick={this.handleCopy}>{this.state.copied ? 'Copied' : 'Copy'}</Button>
+                ) : null}
             </Container>
         );
     }
diff --git a/packages/dev-tools-pages/ts/pages/Compiler.tsx b/packages/dev-tools-pages/ts/pages/Compiler.tsx
index d2c14c90c..2cb232c8c 100644
--- a/packages/dev-tools-pages/ts/pages/Compiler.tsx
+++ b/packages/dev-tools-pages/ts/pages/Compiler.tsx
@@ -19,7 +19,7 @@ function Compiler() {
                 <ContentBlock main title="Get started" />
                 <ContentBlock title="Install">
                     <Breakout>
-                        <Code>npm install @0x/sol-compiler --g</Code>
+                        <Code copy>npm install @0x/sol-compiler --g</Code>
                     </Breakout>
                 </ContentBlock>
 
-- 
cgit v1.2.3


From 4616d6f59d19c108b9f50c6fd07401475992dfa2 Mon Sep 17 00:00:00 2001
From: August Skare <post@augustskare.no>
Date: Tue, 30 Oct 2018 08:39:24 +0100
Subject: button tweaks

---
 packages/dev-tools-pages/ts/components/Button.tsx | 23 +++++++++++++++--------
 1 file changed, 15 insertions(+), 8 deletions(-)

(limited to 'packages/dev-tools-pages/ts')

diff --git a/packages/dev-tools-pages/ts/components/Button.tsx b/packages/dev-tools-pages/ts/components/Button.tsx
index 97c08ad21..94466d75d 100644
--- a/packages/dev-tools-pages/ts/components/Button.tsx
+++ b/packages/dev-tools-pages/ts/components/Button.tsx
@@ -13,7 +13,6 @@ const Button =
     ButtonProps >
     `
   font-family: inherit;
-  font-size: ${props => (props.large ? '1rem' : '.875rem')};
   line-height: 1;
   font-weight: 500;
   white-space: nowrap;
@@ -22,20 +21,28 @@ const Button =
   color: ${colors.black};
   border: 0;
   border-radius: 5rem;
-  height: ${props => (props.large ? '3.25rem' : '2rem')};
-  padding: ${props => (props.large ? '0 2.375rem' : '0 1.25rem')};
   display: inline-flex;
   justify-content: space-between;
   align-items: center;
+
+  ${props =>
+      props.large
+          ? `
+      font-size: 1rem;
+      padding: 1.1875rem 2.375rem 1.0625rem;
+  `
+          : `
+      font-size: .875rem;
+      padding: .5625rem 1.25rem;
+  `}
+
   :hover, :focus {
     background-color: ${props => props.colors.secondary_alt};
   } 
-  ${props =>
-      props.large &&
-      media.small`
+
+  ${media.small`
     font-size: .875rem;
-    height: 2rem;
-    padding: 0 1.25rem;
+    padding: .5625rem 1.25rem;
   `}
 `;
 
-- 
cgit v1.2.3


From 4c8178fc3025fae3f4fec8d89dbb35584c292c6b Mon Sep 17 00:00:00 2001
From: August Skare <post@augustskare.no>
Date: Tue, 30 Oct 2018 08:42:32 +0100
Subject: remove outline on buttons

---
 packages/dev-tools-pages/ts/components/Button.tsx | 1 +
 1 file changed, 1 insertion(+)

(limited to 'packages/dev-tools-pages/ts')

diff --git a/packages/dev-tools-pages/ts/components/Button.tsx b/packages/dev-tools-pages/ts/components/Button.tsx
index 94466d75d..95f2c6d75 100644
--- a/packages/dev-tools-pages/ts/components/Button.tsx
+++ b/packages/dev-tools-pages/ts/components/Button.tsx
@@ -38,6 +38,7 @@ const Button =
 
   :hover, :focus {
     background-color: ${props => props.colors.secondary_alt};
+    outline: 0;
   } 
 
   ${media.small`
-- 
cgit v1.2.3


From 6b11ca6c1dc2a81abb17e85204f708f1ad68dec9 Mon Sep 17 00:00:00 2001
From: August Skare <post@augustskare.no>
Date: Tue, 30 Oct 2018 09:05:52 +0100
Subject: fix code highlighting with ...

---
 packages/dev-tools-pages/ts/components/Code.tsx   |  8 ++++++--
 packages/dev-tools-pages/ts/components/Header.tsx |  1 +
 packages/dev-tools-pages/ts/highlight.tsx         | 22 ++++++++++++++++++++--
 packages/dev-tools-pages/ts/pages/Compiler.tsx    | 16 ++++------------
 4 files changed, 31 insertions(+), 16 deletions(-)

(limited to 'packages/dev-tools-pages/ts')

diff --git a/packages/dev-tools-pages/ts/components/Code.tsx b/packages/dev-tools-pages/ts/components/Code.tsx
index a6971fc84..6675422ef 100644
--- a/packages/dev-tools-pages/ts/components/Code.tsx
+++ b/packages/dev-tools-pages/ts/components/Code.tsx
@@ -18,6 +18,7 @@ interface CodeProps {
     gutter?: Array<number>;
     gutterLength?: number;
     copy?: boolean;
+    etc?: boolean;
 }
 
 interface CodeState {
@@ -134,15 +135,16 @@ class Code extends React.Component<CodeProps, CodeState> {
     }
 
     async componentDidMount() {
-        const { language, children, diff, gutter } = this.props;
+        const { language, children, diff, gutter, etc } = this.props;
 
         const code = children as string;
 
         if (language !== undefined) {
+            /* console.log(code); */
             const { default: highlight } = await System.import(/* webpackChunkName: 'highlightjs' */ 'ts/highlight');
 
             this.setState({
-                hlCode: highlight(language, code, diff, gutter),
+                hlCode: highlight({ language, code, diff, gutter, etc }),
             });
         }
     }
@@ -174,6 +176,8 @@ class Code extends React.Component<CodeProps, CodeState> {
             Code = StyledCodeDiff as any;
         }
 
+        /* console.log(hlCode); */
+
         return (
             <Container>
                 <Base language={language} diff={diff} light={light}>
diff --git a/packages/dev-tools-pages/ts/components/Header.tsx b/packages/dev-tools-pages/ts/components/Header.tsx
index 01ef944f4..b561a5d91 100644
--- a/packages/dev-tools-pages/ts/components/Header.tsx
+++ b/packages/dev-tools-pages/ts/components/Header.tsx
@@ -33,6 +33,7 @@ const StyledHeader = styled.header`
     position: absolute;
     top: 0;
     left: 0;
+    z-index: 2;
     ${Container} {
         display: flex;
         justify-content: space-between;
diff --git a/packages/dev-tools-pages/ts/highlight.tsx b/packages/dev-tools-pages/ts/highlight.tsx
index 8dff4c9e9..64c5f9a17 100644
--- a/packages/dev-tools-pages/ts/highlight.tsx
+++ b/packages/dev-tools-pages/ts/highlight.tsx
@@ -38,12 +38,30 @@ function diffHighlight(language: string, code: any, gutter: any) {
         .join('\n');
 }
 
-function highlight(language: string, code: string, diff: boolean, gutter: any) {
+interface highlightProps {
+    language: string;
+    code: string;
+    diff?: boolean;
+    gutter?: boolean;
+    etc?: boolean;
+}
+
+function highlight({ language, code, diff, gutter, etc }: highlightProps) {
     if (diff) {
         return diffHighlight(language, code, gutter);
     }
 
-    return hljs.highlight(language, code).value;
+    let hlCode = hljs.highlight(language, code).value;
+
+    if (!etc) {
+        return hlCode;
+    }
+
+    var hc = hlCode.split(/\r?\n/g);
+    hc.splice(1, 0, '    ...');
+    hc.splice(hc.length - 1, 0, '    ...');
+
+    return hc.join('\n');
 }
 
 export default highlight;
diff --git a/packages/dev-tools-pages/ts/pages/Compiler.tsx b/packages/dev-tools-pages/ts/pages/Compiler.tsx
index 2cb232c8c..11c8c4a17 100644
--- a/packages/dev-tools-pages/ts/pages/Compiler.tsx
+++ b/packages/dev-tools-pages/ts/pages/Compiler.tsx
@@ -70,9 +70,8 @@ function Compiler() {
                         define which parts of the artifact you need.
                     </p>
                     <Breakout>
-                        <Code light language="json">
+                        <Code light language="json" etc>
                             {`{
-    ...
     "compilerSettings": {
         "outputSelection": {
             "*": {
@@ -80,18 +79,15 @@ function Compiler() {
             }
         }
     }
-    ...
 }`}
                         </Code>
                     </Breakout>
                     <Breakout>
-                        <Code light language="json">
+                        <Code light language="json" etc>
                             {`{
-    ...
     "compilerOutput": {
         "abi": [...],
     },
-    ...
 }`}
                         </Code>
                     </Breakout>
@@ -102,9 +98,8 @@ function Compiler() {
                         artifact.
                     </p>
                     <Breakout>
-                        <Code light language="json">
+                        <Code light language="json" etc>
                             {`{
-    ...
     "compilerSettings": {
         "outputSelection": {
             "*": {
@@ -118,15 +113,13 @@ function Compiler() {
             }
         }
     }
-    ...
 }`}
                         </Code>
                     </Breakout>
 
                     <Breakout>
-                        <Code light language="json">
+                        <Code light language="json" etc>
                             {`{
-    ...
     "compilerOutput": {
         "abi": [...],
         "evm": {
@@ -145,7 +138,6 @@ function Compiler() {
             "id": 0
         }
     },
-    ...
 }`}
                         </Code>
                     </Breakout>
-- 
cgit v1.2.3


From eb9d80214693f7fb7c95ab6da546b6d89d33bee6 Mon Sep 17 00:00:00 2001
From: August Skare <post@augustskare.no>
Date: Tue, 30 Oct 2018 09:07:25 +0100
Subject: rename pesudo element in code gutter

---
 packages/dev-tools-pages/ts/components/Code.tsx | 2 +-
 packages/dev-tools-pages/ts/highlight.tsx       | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

(limited to 'packages/dev-tools-pages/ts')

diff --git a/packages/dev-tools-pages/ts/components/Code.tsx b/packages/dev-tools-pages/ts/components/Code.tsx
index 6675422ef..f83d16dfa 100644
--- a/packages/dev-tools-pages/ts/components/Code.tsx
+++ b/packages/dev-tools-pages/ts/components/Code.tsx
@@ -90,7 +90,7 @@ const StyledCodeDiff = styled(({ gutterLength, children, ...props }: any) => <co
         padding-left: calc(2.25rem + ${props => props.gutterLength}ch);
 
         ::before {
-            content: attr(data-test);
+            content: attr(data-gutter);
 
             width: ${props => props.gutterLength};
             padding-left: 0.375rem;
diff --git a/packages/dev-tools-pages/ts/highlight.tsx b/packages/dev-tools-pages/ts/highlight.tsx
index 64c5f9a17..6efba02f8 100644
--- a/packages/dev-tools-pages/ts/highlight.tsx
+++ b/packages/dev-tools-pages/ts/highlight.tsx
@@ -31,7 +31,7 @@ function diffHighlight(language: string, code: any, gutter: any) {
 
             const g = gutter[index];
 
-            return `<span data-test="${g !== undefined ? g + 'x' : ''}" class="line-${type}">${
+            return `<span data-gutter="${g !== undefined ? g + 'x' : ''}" class="line-${type}">${
                 hljs.highlight(language, line).value
             }</span>`;
         })
-- 
cgit v1.2.3


From 6b8f8580d841ec8525def8951ceb94d1147e74aa Mon Sep 17 00:00:00 2001
From: August Skare <post@augustskare.no>
Date: Tue, 6 Nov 2018 14:33:31 +0100
Subject: fix large button on small screens

---
 packages/dev-tools-pages/ts/components/Button.tsx | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

(limited to 'packages/dev-tools-pages/ts')

diff --git a/packages/dev-tools-pages/ts/components/Button.tsx b/packages/dev-tools-pages/ts/components/Button.tsx
index 95f2c6d75..2a968af28 100644
--- a/packages/dev-tools-pages/ts/components/Button.tsx
+++ b/packages/dev-tools-pages/ts/components/Button.tsx
@@ -40,11 +40,18 @@ const Button =
     background-color: ${props => props.colors.secondary_alt};
     outline: 0;
   } 
-
+  
   ${media.small`
-    font-size: .875rem;
-    padding: .5625rem 1.25rem;
+  font-size: .875rem;
+  padding: .5625rem 1.25rem;
   `}
+
+    ${props =>
+        props.large &&
+        media.small`
+        font-size: 1rem;
+        padding: 1rem 1.5rem .75rem;
+    `}
 `;
 
 export default withContext(Button);
-- 
cgit v1.2.3


From 9006e8fced685c9a6077d68691223005de2a1cbd Mon Sep 17 00:00:00 2001
From: August Skare <post@augustskare.no>
Date: Tue, 6 Nov 2018 14:39:48 +0100
Subject: fix issues in code element

---
 packages/dev-tools-pages/ts/components/Code.tsx | 3 +++
 1 file changed, 3 insertions(+)

(limited to 'packages/dev-tools-pages/ts')

diff --git a/packages/dev-tools-pages/ts/components/Code.tsx b/packages/dev-tools-pages/ts/components/Code.tsx
index f83d16dfa..862e04ebf 100644
--- a/packages/dev-tools-pages/ts/components/Code.tsx
+++ b/packages/dev-tools-pages/ts/components/Code.tsx
@@ -116,6 +116,7 @@ const StyledPre = styled.pre`
 `;
 
 const StyledCopyInput = styled.textarea`
+    opacity: 0;
     height: 0;
     position: absolute;
     top: 0;
@@ -155,9 +156,11 @@ class Code extends React.Component<CodeProps, CodeState> {
                 await (navigator as any).clipboard.writeText(this.props.children);
                 this.setState({ copied: true });
             } else {
+                const lastActive = document.activeElement as HTMLElement;
                 this.code.current.focus();
                 this.code.current.select();
                 document.execCommand('copy');
+                lastActive.focus();
                 this.setState({ copied: true });
             }
         } catch (error) {
-- 
cgit v1.2.3


From 2dfca078fdf3cddb551fb33f913aade1a2e902e1 Mon Sep 17 00:00:00 2001
From: August Skare <post@augustskare.no>
Date: Wed, 7 Nov 2018 09:10:25 +0100
Subject: copy changes

---
 packages/dev-tools-pages/ts/components/Code.tsx     |  2 --
 packages/dev-tools-pages/ts/components/Compiler.tsx | 12 ++++++------
 packages/dev-tools-pages/ts/context/cov.tsx         |  2 +-
 packages/dev-tools-pages/ts/pages/Profiler.tsx      |  2 +-
 4 files changed, 8 insertions(+), 10 deletions(-)

(limited to 'packages/dev-tools-pages/ts')

diff --git a/packages/dev-tools-pages/ts/components/Code.tsx b/packages/dev-tools-pages/ts/components/Code.tsx
index 862e04ebf..84ce43f84 100644
--- a/packages/dev-tools-pages/ts/components/Code.tsx
+++ b/packages/dev-tools-pages/ts/components/Code.tsx
@@ -179,8 +179,6 @@ class Code extends React.Component<CodeProps, CodeState> {
             Code = StyledCodeDiff as any;
         }
 
-        /* console.log(hlCode); */
-
         return (
             <Container>
                 <Base language={language} diff={diff} light={light}>
diff --git a/packages/dev-tools-pages/ts/components/Compiler.tsx b/packages/dev-tools-pages/ts/components/Compiler.tsx
index 2ca340146..94d97511c 100644
--- a/packages/dev-tools-pages/ts/components/Compiler.tsx
+++ b/packages/dev-tools-pages/ts/components/Compiler.tsx
@@ -43,30 +43,30 @@ const Dd = styled.dd`
 
 const cards = [
     {
-        title: 'Project-centric',
+        title: 'A Project-centric',
         body: (
             <React.Fragment>
-                It can compile an entire project instead of only individual <InlineCode alt>.sol</InlineCode> files
+                Compiles an entire project instead of only individual <InlineCode alt>.sol</InlineCode> files.
             </React.Fragment>
         ),
     },
     {
         title: 'Incremental builds',
-        body: 'It only recompiles your smart contracts after they have changed.',
+        body: 'Recompiles your smart contracts after they have changed',
     },
     {
         title: 'Customizable artifacts',
         body:
-            'It allows you to store only the required compiler output in your artifacts and have complete control over your bundle size.',
+            'Stores only the required compiler output in your artifacts, so you can have complete control over your bundle size.',
     },
     {
         title: 'Seamless',
-        body: 'It auto-fetches and caches the required compiler binaries.',
+        body: 'Fetches and caches the required compiler binaries.',
     },
     {
         title: 'Versioning',
         body:
-            'It compiles each contract with the version specified at the top of its file (it even supports version ranges!).',
+            'Compiles each contract with the version specified at the top of its file (sol-compiler even supports version ranges!).',
     },
 ];
 
diff --git a/packages/dev-tools-pages/ts/context/cov.tsx b/packages/dev-tools-pages/ts/context/cov.tsx
index 47f115582..f2f4d5dad 100644
--- a/packages/dev-tools-pages/ts/context/cov.tsx
+++ b/packages/dev-tools-pages/ts/context/cov.tsx
@@ -4,7 +4,7 @@ export default {
     title: 'sol-cov',
     name: 'cov',
     subtitle: 'Solidity code coverage',
-    tagline: "Don't get caught with your pants down",
+    tagline: 'Measure Solidity code coverage',
     icon: Icon,
     colors: {
         main: '#BB9200',
diff --git a/packages/dev-tools-pages/ts/pages/Profiler.tsx b/packages/dev-tools-pages/ts/pages/Profiler.tsx
index d45721937..1021e43a3 100644
--- a/packages/dev-tools-pages/ts/pages/Profiler.tsx
+++ b/packages/dev-tools-pages/ts/pages/Profiler.tsx
@@ -16,7 +16,7 @@ function Profiler() {
     return (
         <Base context={context}>
             <Intro>
-                <IntroLead title="Headline">
+                <IntroLead title="Outline gas usage">
                     <p>
                         Sol-profiler gathers line-by-line gas usage for any transaction submitted through your provider.
                         This will help you find unexpected inefficiencies in parts of your smart contract, and take a
-- 
cgit v1.2.3


From 3a23e795acfe00401283e991af52d1f11a51ffbb Mon Sep 17 00:00:00 2001
From: August Skare <post@augustskare.no>
Date: Wed, 7 Nov 2018 09:48:10 +0100
Subject: new hero animation using bodymovin and lottie

---
 .../ts/components/Animations/Compiler/data.json    |   1 +
 .../ts/components/Animations/Compiler/index.tsx    |  10 ++
 .../ts/components/Animations/Cov/data.json         |   1 +
 .../ts/components/Animations/Cov/index.tsx         |  10 ++
 .../ts/components/Animations/Profiler/data.json    |   1 +
 .../ts/components/Animations/Profiler/index.tsx    |  10 ++
 .../ts/components/Animations/Trace/data.json       |   1 +
 .../ts/components/Animations/Trace/index.tsx       |  10 ++
 .../ts/components/Animations/index.tsx             | 105 +++++++++++++++++++++
 packages/dev-tools-pages/ts/components/Base.tsx    |   2 -
 packages/dev-tools-pages/ts/components/Hero.tsx    |  51 ++--------
 packages/dev-tools-pages/ts/pages/Compiler.tsx     |  11 +++
 packages/dev-tools-pages/ts/pages/Cov.tsx          |  11 +++
 packages/dev-tools-pages/ts/pages/Profiler.tsx     |  11 +++
 packages/dev-tools-pages/ts/pages/Trace.tsx        |  11 +++
 15 files changed, 200 insertions(+), 46 deletions(-)
 create mode 100644 packages/dev-tools-pages/ts/components/Animations/Compiler/data.json
 create mode 100644 packages/dev-tools-pages/ts/components/Animations/Compiler/index.tsx
 create mode 100644 packages/dev-tools-pages/ts/components/Animations/Cov/data.json
 create mode 100644 packages/dev-tools-pages/ts/components/Animations/Cov/index.tsx
 create mode 100644 packages/dev-tools-pages/ts/components/Animations/Profiler/data.json
 create mode 100644 packages/dev-tools-pages/ts/components/Animations/Profiler/index.tsx
 create mode 100644 packages/dev-tools-pages/ts/components/Animations/Trace/data.json
 create mode 100644 packages/dev-tools-pages/ts/components/Animations/Trace/index.tsx
 create mode 100644 packages/dev-tools-pages/ts/components/Animations/index.tsx

(limited to 'packages/dev-tools-pages/ts')

diff --git a/packages/dev-tools-pages/ts/components/Animations/Compiler/data.json b/packages/dev-tools-pages/ts/components/Animations/Compiler/data.json
new file mode 100644
index 000000000..6b10e537b
--- /dev/null
+++ b/packages/dev-tools-pages/ts/components/Animations/Compiler/data.json
@@ -0,0 +1 @@
+{"v":"5.4.1","fr":30,"ip":0,"op":420,"w":4300,"h":1400,"nm":"header-compiler","ddd":0,"assets":[],"layers":[{"ddd":0,"ind":2,"ty":4,"nm":"Path Copy 3","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[328.5,911.5,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-61.75,-99.75],[99.75,61.75],[61.75,99.75],[-99.75,-61.75]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.117646999657,0.678430974483,0.803921997547,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path Copy 3","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":3,"ty":4,"nm":"Path","parent":16,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[-280,-180,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-39.25,87.75],[87.75,-39.25],[39.25,-87.75],[-87.75,39.25]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.117646999657,0.678430974483,0.803921997547,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"fl","c":{"a":0,"k":[1,1,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":4,"ty":4,"nm":"Path","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[1261.5,738.5,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[15.75,82.75],[82.75,15.75],[-15.75,-82.75],[-82.75,-15.75]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.117646999657,0.678430974483,0.803921997547,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"fl","c":{"a":0,"k":[1,1,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":5,"ty":4,"nm":"Path","parent":12,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[370,-209,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[23.25,-23.25],[-23.25,23.25]],"c":false},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.117646999657,0.678430974483,0.803921997547,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":6,"ty":4,"nm":"Path","parent":12,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[347,-269,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-60.25,-60.25],[60.25,60.25]],"c":false},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.117646999657,0.678430974483,0.803921997547,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":7,"ty":4,"nm":"Path","parent":12,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[330,-250,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-37.25,-84.25],[84.25,37.25],[37.25,84.25],[-84.25,-37.25]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.117646999657,0.678430974483,0.803921997547,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":8,"ty":4,"nm":"Path Copy","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":180,"s":[449.5,348.5,0],"e":[223.5,574.5,0],"to":[-37.6666679382324,37.6666679382324,0],"ti":[37.6666679382324,-37.6666679382324,0]},{"i":{"x":0.667,"y":0.667},"o":{"x":0.333,"y":0.333},"n":"0p667_0p667_0p333_0p333","t":210,"s":[223.5,574.5,0],"e":[223.5,574.5,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":390.5,"s":[223.5,574.5,0],"e":[449.5,348.5,0],"to":[37.6666679382324,-37.6666679382324,0],"ti":[-37.6666679382324,37.6666679382324,0]},{"t":420}],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[9.42,-69.25],[-69.25,9.42],[-9.42,69.25],[69.25,-9.42]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.117646999657,0.678430974483,0.803921997547,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path Copy","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"fl","c":{"a":0,"k":[1,1,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":9,"ty":4,"nm":"Shape Layer 2","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[2150,700,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":180,"s":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-1935,-90],[-1765,-260]],"c":false}],"e":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-2020,87],[-1946,13]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":210,"s":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-2020,87],[-1946,13]],"c":false}],"e":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-2020,87],[-1946,13]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":390,"s":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-2020,87],[-1946,13]],"c":false}],"e":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-1935,-90],[-1765,-260]],"c":false}]},{"t":420}],"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.117647066303,0.678431372549,0.803921628466,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":4,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"fl","c":{"a":0,"k":[1,0,0,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":true},{"ty":"tr","p":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":180,"s":[1,-1],"e":[0,0],"to":[-0.16666667163372,0.16666667163372],"ti":[0.16666667163372,-0.16666667163372]},{"i":{"x":0.667,"y":0.667},"o":{"x":0.333,"y":0.333},"n":"0p667_0p667_0p333_0p333","t":210,"s":[0,0],"e":[0,0],"to":[0,0],"ti":[0,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":390,"s":[0,0],"e":[1,-1],"to":[0.16666667163372,-0.16666667163372],"ti":[-0.16666667163372,0.16666667163372]},{"t":420}],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Shape 1","np":3,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":527,"st":0,"bm":0},{"ddd":0,"ind":10,"ty":4,"nm":"Shape Layer 1","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":180,"s":[2150,700,0],"e":[1920,930,0],"to":[-38.3333320617676,38.3333320617676,0],"ti":[38.3333320617676,-38.3333320617676,0]},{"i":{"x":0.667,"y":0.667},"o":{"x":0.333,"y":0.333},"n":"0p667_0p667_0p333_0p333","t":210,"s":[1920,930,0],"e":[1920,930,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":390,"s":[1920,930,0],"e":[2150,700,0],"to":[38.3333320617676,-38.3333320617676,0],"ti":[-38.3333320617676,38.3333320617676,0]},{"t":420}],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":180,"s":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-1806,-241],[-1748,-183]],"c":false}],"e":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-1750,-185],[-1748,-183]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":210,"s":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-1750,-185],[-1748,-183]],"c":true}],"e":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-1750,-185],[-1748,-183]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":390,"s":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-1750,-185],[-1748,-183]],"c":true}],"e":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-1806,-241],[-1748,-183]],"c":false}]},{"t":420}],"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.117647066303,0.678431372549,0.803921628466,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":4,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"fl","c":{"a":0,"k":[1,1,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":true},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Shape 1","np":3,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":527,"st":0,"bm":0},{"ddd":0,"ind":11,"ty":4,"nm":"Path Copy 2","parent":8,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[-134,194,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":180,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[28.03,-56.75],[-56.75,28.03],[-28.03,56.75],[56.75,-28.03]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[56.53,-28.25],[20.5,9.03],[20.72,9.25],[56.75,-28.03]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":210,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[56.53,-28.25],[20.5,9.03],[20.72,9.25],[56.75,-28.03]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[56.53,-28.25],[20.5,9.03],[20.72,9.25],[56.75,-28.03]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":391,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[56.53,-28.25],[20.5,9.03],[20.72,9.25],[56.75,-28.03]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[28.03,-56.75],[-56.75,28.03],[-28.03,56.75],[56.75,-28.03]],"c":true}]},{"t":421}],"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.117646999657,0.678430974483,0.803921997547,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path Copy 2","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":12,"ty":4,"nm":"Big block","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":90,"s":[571.5,588.5,0],"e":[697.5,462.5,0],"to":[21,-21,0],"ti":[-21,21,0]},{"i":{"x":0.667,"y":0.667},"o":{"x":0.167,"y":0.167},"n":"0p667_0p667_0p167_0p167","t":120,"s":[697.5,462.5,0],"e":[697.5,462.5,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.833,"y":1},"o":{"x":0.333,"y":0},"n":"0p833_1_0p333_0","t":300,"s":[697.5,462.5,0],"e":[571.5,588.5,0],"to":[-21,21,0],"ti":[21,-21,0]},{"t":330}],"ix":2},"a":{"a":0,"k":[2,-2,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"st","c":{"a":0,"k":[0.117646998985,0.67843095368,0.803921987496,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"fl","c":{"a":0,"k":[1,1,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Shape 1","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[60.75,-182.25],[-182.25,60.75],[-60.75,182.25],[182.25,-60.75]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.117646999657,0.678430974483,0.803921997547,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":2,"cix":2,"ix":2,"mn":"ADBE Vector Group","hd":false},{"ty":"fl","c":{"a":0,"k":[1,1,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":13,"ty":4,"nm":"Path Copy 4","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[389.5,770.5,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":90,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-92.25,-29.25],[-92.25,-29.25],[29.25,92.25],[29.25,92.25]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-29.25,-92.25],[-92.25,-29.25],[29.25,92.25],[92.25,29.25]],"c":true}]},{"t":120}],"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.117646999657,0.678430974483,0.803921997547,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path Copy 4","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":14,"ty":4,"nm":"Path Copy 9","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":90,"s":[273,647,0],"e":[317,695,0],"to":[7.33333349227905,8,0],"ti":[-7.33333349227905,-8,0]},{"i":{"x":0.667,"y":0.667},"o":{"x":0.333,"y":0.333},"n":"0p667_0p667_0p333_0p333","t":120,"s":[317,695,0],"e":[317,695,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.833,"y":1},"o":{"x":0.333,"y":0},"n":"0p833_1_0p333_0","t":300,"s":[317,695,0],"e":[273,647,0],"to":[-7.33333349227905,-8,0],"ti":[7.33333349227905,8,0]},{"t":330}],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[30.75,-31.25],[-31.5,31]],"c":false},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.117646999657,0.678430974483,0.803921997547,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path Copy 9","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":15,"ty":4,"nm":"Path Copy 8","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":90,"s":[329,832,0],"e":[349,812,0],"to":[3.33333325386047,-3.33333325386047,0],"ti":[-3.33333325386047,3.33333325386047,0]},{"i":{"x":0.667,"y":0.667},"o":{"x":0.333,"y":0.333},"n":"0p667_0p667_0p333_0p333","t":120,"s":[349,812,0],"e":[349,812,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.833,"y":1},"o":{"x":0.333,"y":0},"n":"0p833_1_0p333_0","t":300,"s":[349,812,0],"e":[329,832,0],"to":[-3.33333325386047,3.33333325386047,0],"ti":[3.33333325386047,-3.33333325386047,0]},{"t":330}],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-61,-61],[61,61]],"c":false},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.117646999657,0.678430974483,0.803921997547,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path Copy 8","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":16,"ty":4,"nm":"wide box","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":90,"s":[971.5,988.5,0],"e":[1096.5,864.5,0],"to":[10.0566339492798,-9.97618103027344,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":0.667},"o":{"x":0.333,"y":0.333},"n":"0p667_0p667_0p333_0p333","t":120,"s":[1096.5,864.5,0],"e":[1096.5,864.5,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.833,"y":1},"o":{"x":0.333,"y":0},"n":"0p833_1_0p333_0","t":300,"s":[1096.5,864.5,0],"e":[971.5,988.5,0],"to":[0,0,0],"ti":[-20.8333339691162,20.6666660308838,0]},{"t":330}],"ix":2},"a":{"a":0,"k":[-1,1,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-129.25,-52.25],[-52.25,-129.25],[129.25,52.25],[52.25,129.25]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.117646999657,0.678430974483,0.803921997547,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"fl","c":{"a":0,"k":[1,1,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":17,"ty":4,"nm":"Path","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":90,"s":[993,766,0],"e":[1071,688,0],"to":[13,-13,0],"ti":[-13,13,0]},{"i":{"x":0.667,"y":0.667},"o":{"x":0.333,"y":0.333},"n":"0p667_0p667_0p333_0p333","t":120,"s":[1071,688,0],"e":[1071,688,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.833,"y":1},"o":{"x":0.333,"y":0},"n":"0p833_1_0p333_0","t":300,"s":[1071,688,0],"e":[993,766,0],"to":[-13,13,0],"ti":[13,-13,0]},{"t":330}],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-89.5,-89.5],[89.5,89.5]],"c":false},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.117646999657,0.678430974483,0.803921997547,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":18,"ty":4,"nm":"Path","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":90,"s":[1115,850,0],"e":[1311.5,799.5,0],"to":[18.5410747528076,-4.90381097793579,0],"ti":[-5.73690891265869,1.51731848716736,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":120,"s":[1311.5,799.5,0],"e":[1311.5,799.5,0],"to":[33.0833320617676,-8.75,0],"ti":[5.73690891265869,-1.51731848716736,0]},{"i":{"x":0.833,"y":1},"o":{"x":0.333,"y":0},"n":"0p833_1_0p333_0","t":300,"s":[1311.5,799.5,0],"e":[1115,850,0],"to":[-5.73690891265869,1.51731848716736,0],"ti":[-33.0833320617676,8.75,0]},{"t":330}],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[103.689,103.689,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[30.5,-30.5],[-30.5,30.5]],"c":false},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.117646999657,0.678430974483,0.803921997547,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":19,"ty":4,"nm":"Path","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[1011.5,748.5,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.833,"y":0.833},"o":{"x":0.333,"y":0},"n":"0p833_0p833_0p333_0","t":90,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[120.75,57.75],[58.25,120.25],[-120.25,-58.25],[-57.75,-120.75]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[120.514,57.986],[119.427,59.073],[-59.073,-119.427],[-57.986,-120.514]],"c":true}]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"n":"0p833_0p833_0p167_0p167","t":120,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[120.514,57.986],[119.427,59.073],[-59.073,-119.427],[-57.986,-120.514]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[120.514,57.986],[119.427,59.073],[-59.073,-119.427],[-57.986,-120.514]],"c":true}]},{"i":{"x":0.833,"y":1},"o":{"x":0.167,"y":0.167},"n":"0p833_1_0p167_0p167","t":300,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[120.514,57.986],[119.427,59.073],[-59.073,-119.427],[-57.986,-120.514]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[120.75,57.75],[58.25,120.25],[-120.25,-58.25],[-57.75,-120.75]],"c":true}]},{"t":330}],"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.117646999657,0.678430974483,0.803921997547,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 1","np":0,"cix":2,"ix":2,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":20,"ty":4,"nm":"Path","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[3620,905,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[33,163],[-163,-33],[-33,-163],[163,33]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.117646999657,0.678430974483,0.803921997547,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":21,"ty":4,"nm":"Path","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[3274,751,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[86,-140],[140,-86],[-86,140],[-140,86]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.117646999657,0.678430974483,0.803921997547,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":22,"ty":4,"nm":"Path","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[3770,475,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-2,-162],[162,2],[2,162],[-162,-2]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.117646999657,0.678430974483,0.803921997547,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":23,"ty":4,"nm":"Path","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[3465,340,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[80,-24],[24,-80],[-82,26],[-26,82]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.117646999657,0.678430974483,0.803921997547,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":24,"ty":4,"nm":"Path","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":90,"s":[3420.5,966.5,0],"e":[3389.5,996.5,0],"to":[-5.16666650772095,5,0],"ti":[5.16666650772095,-5,0]},{"i":{"x":0.667,"y":0.667},"o":{"x":0.167,"y":0.167},"n":"0p667_0p667_0p167_0p167","t":120,"s":[3389.5,996.5,0],"e":[3389.5,996.5,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":300,"s":[3389.5,996.5,0],"e":[3420.5,966.5,0],"to":[5.16666650772095,-5,0],"ti":[-5.16666650772095,5,0]},{"t":330}],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":90,"s":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-62.75,-62.75],[-62.25,-62.25]],"c":false}],"e":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-62.75,-62.75],[62.75,62.75]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.167,"y":0},"n":"0p667_1_0p167_0","t":120,"s":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-62.75,-62.75],[62.75,62.75]],"c":false}],"e":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-62.75,-62.75],[62.75,62.75]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":300,"s":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-62.75,-62.75],[62.75,62.75]],"c":false}],"e":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-62.75,-62.75],[-62.25,-62.25]],"c":false}]},{"t":330}],"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.117646999657,0.678430974483,0.803921997547,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":25,"ty":4,"nm":"Path","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":90,"s":[3219.5,915.5,0],"e":[3339.5,1035.5,0],"to":[20,20,0],"ti":[-20,-20,0]},{"i":{"x":0.667,"y":0.667},"o":{"x":0.167,"y":0.167},"n":"0p667_0p667_0p167_0p167","t":120,"s":[3339.5,1035.5,0],"e":[3339.5,1035.5,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":300,"s":[3339.5,1035.5,0],"e":[3219.5,915.5,0],"to":[-20,-20,0],"ti":[20,20,0]},{"t":330}],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":90,"s":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[38.25,-38.25],[38.25,-38.25]],"c":false}],"e":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[38.25,-38.25],[-38.25,38.25]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.167,"y":0},"n":"0p667_1_0p167_0","t":120,"s":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[38.25,-38.25],[-38.25,38.25]],"c":false}],"e":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[38.25,-38.25],[-38.25,38.25]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":300,"s":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[38.25,-38.25],[-38.25,38.25]],"c":false}],"e":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[38.25,-38.25],[38.25,-38.25]],"c":false}]},{"t":330}],"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.117646999657,0.678430974483,0.803921997547,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":26,"ty":4,"nm":"Path","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[3344,1041,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":90,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[42,42],[0,0],[0,0],[0,0]],"v":[[-25,-101],[-24,-100],[-24.5,-99.5],[-25.5,-100.5]],"c":false}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-25,-101],[101,25],[25,101],[-101,-25]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.167,"y":0},"n":"0p667_1_0p167_0","t":120,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-25,-101],[101,25],[25,101],[-101,-25]],"c":false}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-25,-101],[101,25],[25,101],[-101,-25]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":300,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-25,-101],[101,25],[25,101],[-101,-25]],"c":false}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[42,42],[0,0],[0,0],[0,0]],"v":[[-25,-101],[-24,-100],[-24.5,-99.5],[-25.5,-100.5]],"c":false}]},{"t":330}],"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.117646999657,0.678430974483,0.803921997547,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":27,"ty":4,"nm":"Path","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":90,"s":[3142.5,483.5,0],"e":[3266.5,359.5,0],"to":[20.6666660308838,-20.6666660308838,0],"ti":[-20.6666660308838,20.6666660308838,0]},{"i":{"x":0.667,"y":0.667},"o":{"x":0.333,"y":0.333},"n":"0p667_0p667_0p333_0p333","t":120,"s":[3266.5,359.5,0],"e":[3266.5,359.5,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":300,"s":[3266.5,359.5,0],"e":[3142.5,483.5,0],"to":[-20.6666660308838,20.6666660308838,0],"ti":[20.6666660308838,-20.6666660308838,0]},{"t":330}],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":90,"s":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-73.25,-73.25],[73.25,73.25]],"c":false}],"e":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-33.25,-33.25],[73.25,73.25]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":120,"s":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-33.25,-33.25],[73.25,73.25]],"c":false}],"e":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-33.25,-33.25],[73.25,73.25]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":300,"s":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-33.25,-33.25],[73.25,73.25]],"c":false}],"e":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-73.25,-73.25],[73.25,73.25]],"c":false}]},{"t":329.5}],"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.117646999657,0.678430974483,0.803921997547,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":28,"ty":4,"nm":"Path","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":90,"s":[3163,420,0],"e":[3327,588,0],"to":[27.3333339691162,28,0],"ti":[-27.3333339691162,-28,0]},{"i":{"x":0.667,"y":0.667},"o":{"x":0.333,"y":0.333},"n":"0p667_0p667_0p333_0p333","t":120,"s":[3327,588,0],"e":[3327,588,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":300,"s":[3327,588,0],"e":[3163,420,0],"to":[-27.3333339691162,-28,0],"ti":[27.3333339691162,28,0]},{"t":330}],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":90,"s":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[42,-42],[-42,42]],"c":false}],"e":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[42,-42],[42.312,-42.125]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":120,"s":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[42,-42],[42.312,-42.125]],"c":false}],"e":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[42,-42],[42.312,-42.125]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":300,"s":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[42,-42],[42.312,-42.125]],"c":false}],"e":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[42,-42],[-42,42]],"c":false}]},{"t":330}],"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.117646999657,0.678430974483,0.803921997547,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":29,"ty":4,"nm":"Path","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[3184,441,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":90,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[31,115],[-115,-31],[-31,-115],[115,31]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[113.5,31.5],[8,-74],[8,-74],[113.5,31.5]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":120,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[113.5,31.5],[8,-74],[8,-74],[113.5,31.5]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[113.5,31.5],[8,-74],[8,-74],[113.5,31.5]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":300,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[113.5,31.5],[8,-74],[8,-74],[113.5,31.5]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[31,115],[-115,-31],[-31,-115],[115,31]],"c":true}]},{"t":330}],"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.117646999657,0.678430974483,0.803921997547,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":30,"ty":4,"nm":"Path","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":90,"s":[2954,751,0],"e":[3120,585,0],"to":[27.6666660308838,-27.6666660308838,0],"ti":[-27.6666660308838,27.6666660308838,0]},{"i":{"x":0.667,"y":0.667},"o":{"x":0.333,"y":0.333},"n":"0p667_0p667_0p333_0p333","t":120,"s":[3120,585,0],"e":[3120,585,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":300,"s":[3120,585,0],"e":[2954,751,0],"to":[-27.6666660308838,27.6666660308838,0],"ti":[27.6666660308838,-27.6666660308838,0]},{"t":330}],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[146,-40],[40,-146],[-146,40],[-40,146]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.117646999657,0.678430974483,0.803921997547,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":31,"ty":4,"nm":"Shape Layer 5","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":188,"s":[2046,804,0],"e":[2150,700,0],"to":[17.3333339691162,-17.3333339691162,0],"ti":[-17.3333339691162,17.3333339691162,0]},{"i":{"x":0.667,"y":0.667},"o":{"x":0.333,"y":0.333},"n":"0p667_0p667_0p333_0p333","t":210,"s":[2150,700,0],"e":[2150,700,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":390,"s":[2150,700,0],"e":[2046,804,0],"to":[-17.3333339691162,17.3333339691162,0],"ti":[17.3333339691162,-17.3333339691162,0]},{"t":410}],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":180,"s":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[1727,-6],[1858,125]],"c":true}],"e":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[1727,-6],[1968,235]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":210,"s":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[1727,-6],[1968,235]],"c":false}],"e":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[1727,-6],[1968,235]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":390,"s":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[1727,-6],[1968,235]],"c":false}],"e":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[1727,-6],[1858,125]],"c":true}]},{"t":420}],"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.117647066303,0.678431372549,0.803921628466,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":4,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"fl","c":{"a":0,"k":[1,1,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Shape 1","np":3,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":527,"st":0,"bm":0},{"ddd":0,"ind":32,"ty":4,"nm":"Shape Layer 4","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[2120,670,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":180,"s":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[1684,158],[1685,157]],"c":false}],"e":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[1746,220],[1963,3]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":210,"s":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[1746,220],[1963,3]],"c":false}],"e":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[1746,220],[1963,3]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":390,"s":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[1746,220],[1963,3]],"c":false}],"e":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[1684,158],[1685,157]],"c":false}]},{"t":420}],"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.117647066303,0.678431372549,0.803921628466,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":4,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"fl","c":{"a":0,"k":[1,1,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Shape 1","np":3,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":527,"st":0,"bm":0},{"ddd":0,"ind":33,"ty":4,"nm":"Shape Layer 3","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[3138,417,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0]],"o":[[0,0]],"v":[[-2516,745]],"c":false},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.117647066303,0.678431372549,0.803921628466,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":4,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"fl","c":{"a":0,"k":[1,1,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[1,-1],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Shape 2","np":3,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":180,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[636,382],[636,382],[766,512],[766,512]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[854,164],[636,382],[876,622],[1094,404]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":210,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[854,164],[636,382],[876,622],[1094,404]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[854,164],[636,382],[876,622],[1094,404]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":390,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[854,164],[636,382],[876,622],[1094,404]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[636,382],[636,382],[766,512],[766,512]],"c":true}]},{"t":420}],"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.117647066303,0.678431372549,0.803921628466,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":4,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"fl","c":{"a":0,"k":[1,1,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Shape 1","np":3,"cix":2,"ix":2,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":527,"st":0,"bm":0}],"markers":[{"tm":90,"cm":"1","dr":0},{"tm":120,"cm":"2","dr":0},{"tm":180,"cm":"3","dr":0},{"tm":210,"cm":"4","dr":0},{"tm":300,"cm":"5","dr":0},{"tm":330,"cm":"6","dr":0},{"tm":390,"cm":"7","dr":0},{"tm":420,"cm":"8","dr":0}]}
\ No newline at end of file
diff --git a/packages/dev-tools-pages/ts/components/Animations/Compiler/index.tsx b/packages/dev-tools-pages/ts/components/Animations/Compiler/index.tsx
new file mode 100644
index 000000000..dbd8a3799
--- /dev/null
+++ b/packages/dev-tools-pages/ts/components/Animations/Compiler/index.tsx
@@ -0,0 +1,10 @@
+import * as React from 'react';
+
+import Animation from '../index';
+import * as animationData from './data.json';
+
+function AnimationCompiler() {
+    return <Animation animationData={animationData} width={2150} height={700} />;
+}
+
+export default AnimationCompiler;
diff --git a/packages/dev-tools-pages/ts/components/Animations/Cov/data.json b/packages/dev-tools-pages/ts/components/Animations/Cov/data.json
new file mode 100644
index 000000000..a259c2787
--- /dev/null
+++ b/packages/dev-tools-pages/ts/components/Animations/Cov/data.json
@@ -0,0 +1 @@
+{"v":"5.4.1","fr":30,"ip":0,"op":420,"w":3962,"h":1320,"nm":"header-cov","ddd":0,"assets":[],"layers":[{"ddd":0,"ind":2,"ty":4,"nm":"Path","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[3418.5,924.5,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.696,"y":1},"o":{"x":0.304,"y":0},"n":"0p696_1_0p304_0","t":180,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[31.25,66.25],[66.25,31.25],[-31.25,-66.25],[-66.25,-31.25]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[21.25,86.25],[71.25,36.25],[-31.25,-66.25],[-81.25,-16.25]],"c":true}]},{"i":{"x":0.696,"y":1},"o":{"x":0.333,"y":0},"n":"0p696_1_0p333_0","t":210,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[21.25,86.25],[71.25,36.25],[-31.25,-66.25],[-81.25,-16.25]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[21.25,86.25],[71.25,36.25],[-31.25,-66.25],[-81.25,-16.25]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":390,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[21.25,86.25],[71.25,36.25],[-31.25,-66.25],[-81.25,-16.25]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[31.25,66.25],[66.25,31.25],[-31.25,-66.25],[-66.25,-31.25]],"c":true}]},{"t":420}],"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.7333329916,0.572548985481,0,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":524.5,"st":0,"bm":0},{"ddd":0,"ind":3,"ty":4,"nm":"Path","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[3392.5,970.5,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[18.25,89.25],[89.25,18.25],[-18.25,-89.25],[-89.25,-18.25]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.7333329916,0.572548985481,0,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":524.5,"st":0,"bm":0},{"ddd":0,"ind":4,"ty":4,"nm":"Path","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[2958,886,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":90,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[64,-94],[94,-64],[-64,94],[-94,64]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[80,-126],[118,-88],[-64,94],[-102,56]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":120,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[80,-126],[118,-88],[-64,94],[-102,56]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[80,-126],[118,-88],[-64,94],[-102,56]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":300,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[80,-126],[118,-88],[-64,94],[-102,56]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[64,-94],[94,-64],[-64,94],[-94,64]],"c":true}]},{"t":330}],"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.7333329916,0.572548985481,0,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":524.5,"st":0,"bm":0},{"ddd":0,"ind":5,"ty":4,"nm":"Path","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[2988,816,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[79,-129],[129,-79],[-79,129],[-129,79]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.7333329916,0.572548985481,0,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":524.5,"st":0,"bm":0},{"ddd":0,"ind":6,"ty":4,"nm":"Path","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[3588,678,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0]],"o":[[0,0]],"v":[[-3784,-472]],"c":false},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.733332974303,0.572548959769,0,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"fl","c":{"a":0,"k":[1,0,0,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":true},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Shape 1","np":3,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.833,"y":1},"o":{"x":0.167,"y":0},"n":"0p833_1_0p167_0","t":90,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-18.5,-75],[75,18.5],[18.5,75],[-75,-18.5]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-26.5,-27],[47,46.5],[18.5,75],[-55,1.5]],"c":true}]},{"i":{"x":0.833,"y":1},"o":{"x":0.333,"y":0},"n":"0p833_1_0p333_0","t":120,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-26.5,-27],[47,46.5],[18.5,75],[-55,1.5]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-26.5,-27],[47,46.5],[18.5,75],[-55,1.5]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":300,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-26.5,-27],[47,46.5],[18.5,75],[-55,1.5]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-18.5,-75],[75,18.5],[18.5,75],[-75,-18.5]],"c":true}]},{"t":330}],"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.7333329916,0.572548985481,0,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":2,"cix":2,"ix":2,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":524.5,"st":0,"bm":0},{"ddd":0,"ind":7,"ty":4,"nm":"Path","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[3678,548,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[26.5,-140],[140,-26.5],[-26.5,140],[-140,26.5]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.7333329916,0.572548985481,0,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":524.5,"st":0,"bm":0},{"ddd":0,"ind":8,"ty":4,"nm":"Path","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[3650.5,150.5,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-11.75,59.25],[59.25,-11.75],[11.75,-59.25],[-59.25,11.75]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.7333329916,0.572548985481,0,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":524.5,"st":0,"bm":0},{"ddd":0,"ind":9,"ty":4,"nm":"Path","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[3272.5,260.5,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":180,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[31.25,66.25],[66.25,31.25],[-31.25,-66.25],[-66.25,-31.25]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[27.25,34.25],[48.25,13.25],[-31.25,-66.25],[-52.25,-45.25]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":211,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[27.25,34.25],[48.25,13.25],[-31.25,-66.25],[-52.25,-45.25]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[27.25,34.25],[48.25,13.25],[-31.25,-66.25],[-52.25,-45.25]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":390,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[27.25,34.25],[48.25,13.25],[-31.25,-66.25],[-52.25,-45.25]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[31.25,66.25],[66.25,31.25],[-31.25,-66.25],[-66.25,-31.25]],"c":true}]},{"t":420}],"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.7333329916,0.572548985481,0,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":524.5,"st":0,"bm":0},{"ddd":0,"ind":10,"ty":4,"nm":"Path","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[3246.5,306.5,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[18.25,89.25],[89.25,18.25],[-18.25,-89.25],[-89.25,-18.25]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.7333329916,0.572548985481,0,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":524.5,"st":0,"bm":0},{"ddd":0,"ind":11,"ty":4,"nm":"Path","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[2758.5,720.5,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-33.25,11.75],[-11.75,33.25],[33.25,-11.75],[11.75,-33.25]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.7333329916,0.572548985481,0,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":524.5,"st":0,"bm":0},{"ddd":0,"ind":12,"ty":4,"nm":"Path","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[2729.5,707.5,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-47.75,5.25],[-5.25,47.75],[47.75,-5.25],[5.25,-47.75]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.7333329916,0.572548985481,0,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":524.5,"st":0,"bm":0},{"ddd":0,"ind":13,"ty":4,"nm":"Path","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[1285.5,815.5,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":180,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[36.75,-8.25],[-8.25,36.75],[-36.75,8.25],[8.25,-36.75]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[94.75,37.75],[43.75,88.75],[-36.75,8.25],[14.25,-42.75]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":211,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[94.75,37.75],[43.75,88.75],[-36.75,8.25],[14.25,-42.75]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[94.75,37.75],[43.75,88.75],[-36.75,8.25],[14.25,-42.75]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":390,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[94.75,37.75],[43.75,88.75],[-36.75,8.25],[14.25,-42.75]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[36.75,-8.25],[-8.25,36.75],[-36.75,8.25],[8.25,-36.75]],"c":true}]},{"t":420}],"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.7333329916,0.572548985481,0,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":524.5,"st":0,"bm":0},{"ddd":0,"ind":14,"ty":4,"nm":"Path","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[1415.5,905.5,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[101.75,36.75],[36.75,101.75],[-101.75,-36.75],[-36.75,-101.75]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.7333329916,0.572548985481,0,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":524.5,"st":0,"bm":0},{"ddd":0,"ind":15,"ty":4,"nm":"Path","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[611,329,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":90,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[62.5,-95.5],[95.5,-62.5],[-62.5,95.5],[-95.5,62.5]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[43,-47],[61.5,-28.5],[-62.5,95.5],[-81,77]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":120,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[43,-47],[61.5,-28.5],[-62.5,95.5],[-81,77]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[43,-47],[61.5,-28.5],[-62.5,95.5],[-81,77]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":300,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[43,-47],[61.5,-28.5],[-62.5,95.5],[-81,77]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[62.5,-95.5],[95.5,-62.5],[-62.5,95.5],[-95.5,62.5]],"c":true}]},{"t":329}],"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.7333329916,0.572548985481,0,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":524.5,"st":0,"bm":0},{"ddd":0,"ind":16,"ty":4,"nm":"Path","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[644,262,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[79,-129],[129,-79],[-79,129],[-129,79]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.7333329916,0.572548985481,0,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":524.5,"st":0,"bm":0},{"ddd":0,"ind":17,"ty":4,"nm":"Path","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[1126.5,374.5,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[39.25,16.25],[16.25,39.25],[-39.25,-16.25],[-16.25,-39.25]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.7333329916,0.572548985481,0,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":524.5,"st":0,"bm":0},{"ddd":0,"ind":18,"ty":4,"nm":"Path","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[1186.5,414.5,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[69.25,36.25],[36.25,69.25],[-69.25,-36.25],[-36.25,-69.25]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.7333329916,0.572548985481,0,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":524.5,"st":0,"bm":0},{"ddd":0,"ind":19,"ty":4,"nm":"Path","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[375,944,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":180,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-36,19.5],[-0.5,-16],[166,150.5],[130.5,186]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-10,45.5],[13.5,22],[154,162.5],[130.5,186]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":210,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-10,45.5],[13.5,22],[154,162.5],[130.5,186]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-10,45.5],[13.5,22],[154,162.5],[130.5,186]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":390,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-10,45.5],[13.5,22],[154,162.5],[130.5,186]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-36,19.5],[-0.5,-16],[166,150.5],[130.5,186]],"c":true}]},{"t":420}],"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.7333329916,0.572548985481,0,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":524.5,"st":0,"bm":0},{"ddd":0,"ind":20,"ty":4,"nm":"Path","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[375,944,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-186,-130.5],[-130.5,-186],[186,130.5],[130.5,186]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.7333329916,0.572548985481,0,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":524.5,"st":0,"bm":0},{"ddd":0,"ind":21,"ty":4,"nm":"Path","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[815.5,863.5,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":90,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[39.75,-93.75],[93.75,-39.75],[-39.75,93.75],[-93.75,39.75]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[33.25,-145.25],[116.25,-62.25],[-39.75,93.75],[-122.75,10.75]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":120,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[33.25,-145.25],[116.25,-62.25],[-39.75,93.75],[-122.75,10.75]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[33.25,-145.25],[116.25,-62.25],[-39.75,93.75],[-122.75,10.75]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":300,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[33.25,-145.25],[116.25,-62.25],[-39.75,93.75],[-122.75,10.75]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[39.75,-93.75],[93.75,-39.75],[-39.75,93.75],[-93.75,39.75]],"c":true}]},{"t":329}],"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.7333329916,0.572548985481,0,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":524.5,"st":0,"bm":0},{"ddd":0,"ind":22,"ty":4,"nm":"Path","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[777.5,721.5,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[20.75,-164.75],[164.75,-20.75],[-20.75,164.75],[-164.75,20.75]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.7333329916,0.572548985481,0,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":524.5,"st":0,"bm":0}],"markers":[{"tm":90,"cm":"1","dr":0},{"tm":120,"cm":"2","dr":0},{"tm":180,"cm":"3","dr":0},{"tm":210,"cm":"4","dr":0},{"tm":300,"cm":"5","dr":0},{"tm":330,"cm":"6","dr":0},{"tm":390,"cm":"7","dr":0},{"tm":420,"cm":"8","dr":0}]}
\ No newline at end of file
diff --git a/packages/dev-tools-pages/ts/components/Animations/Cov/index.tsx b/packages/dev-tools-pages/ts/components/Animations/Cov/index.tsx
new file mode 100644
index 000000000..c14c64ab9
--- /dev/null
+++ b/packages/dev-tools-pages/ts/components/Animations/Cov/index.tsx
@@ -0,0 +1,10 @@
+import * as React from 'react';
+
+import Animation from '../index';
+import * as animationData from './data.json';
+
+function AnimationCov() {
+    return <Animation animationData={animationData} width={1981} height={660} />;
+}
+
+export default AnimationCov;
diff --git a/packages/dev-tools-pages/ts/components/Animations/Profiler/data.json b/packages/dev-tools-pages/ts/components/Animations/Profiler/data.json
new file mode 100644
index 000000000..2d769bc50
--- /dev/null
+++ b/packages/dev-tools-pages/ts/components/Animations/Profiler/data.json
@@ -0,0 +1 @@
+{"v":"5.4.1","fr":30,"ip":0,"op":420,"w":3970,"h":1314,"nm":"header-profiler","ddd":0,"assets":[],"layers":[{"ddd":0,"ind":2,"ty":4,"nm":"Path Copy","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":1,"k":[{"i":{"x":0.833,"y":1},"o":{"x":0.333,"y":0},"n":"0p833_1_0p333_0","t":90,"s":[376,448,0],"e":[376,392,0],"to":[0,-9.33333301544189,0],"ti":[0,9.33333301544189,0]},{"i":{"x":0.667,"y":0.667},"o":{"x":0.333,"y":0.333},"n":"0p667_0p667_0p333_0p333","t":120,"s":[376,392,0],"e":[376,392,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":300,"s":[376,392,0],"e":[376,448,0],"to":[0,9.33333301544189,0],"ti":[0,-9.33333301544189,0]},{"t":330}],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.833,"y":1},"o":{"x":0.333,"y":0},"n":"0p833_1_0p333_0","t":90,"s":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-169.69,0],[134.5,0]],"c":false}],"e":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-142.19,0],[106.5,0]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":120,"s":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-142.19,0],[106.5,0]],"c":false}],"e":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-142.19,0],[106.5,0]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":300,"s":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-142.19,0],[106.5,0]],"c":false}],"e":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-169.69,0],[134.5,0]],"c":false}]},{"t":330}],"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[1,0.44313699007,0.2666670084,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path Copy","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":3,"ty":4,"nm":"Path","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[3466.5,998.5,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[45.75,155.75],[-155.75,-45.75],[-45.75,-155.75],[155.75,45.75]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[1,0.44313699007,0.2666670084,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":4,"ty":4,"nm":"Path","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":90,"s":[1090.5,537,0],"e":[1170.5,617,0],"to":[12.0437898635864,12.0437898635864,0],"ti":[-1.2895439863205,-1.2895439863205,0]},{"i":{"x":0.667,"y":0.667},"o":{"x":0.333,"y":0.333},"n":"0p667_0p667_0p333_0p333","t":120,"s":[1170.5,617,0],"e":[1170.5,617,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":300,"s":[1170.5,617,0],"e":[1090.5,537,0],"to":[-13.3333330154419,-13.3333330154419,0],"ti":[13.3333330154419,13.3333330154419,0]},{"t":330}],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-41.25,-0.5],[41.25,-0.5]],"c":false},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[1,0.44313699007,0.2666670084,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":5,"ty":4,"nm":"Path","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":1,"k":[{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"n":"0p833_0p833_0p167_0p167","t":180,"s":[834,765,0],"e":[834,813,0],"to":[0,8,0],"ti":[0,-8,0]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.333,"y":0.333},"n":"0p833_0p833_0p333_0p333","t":210,"s":[834,813,0],"e":[834,813,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":390,"s":[834,813,0],"e":[834,765,0],"to":[0,-8,0],"ti":[0,8,0]},{"t":419}],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.833,"y":0.999},"o":{"x":0.167,"y":0.001},"n":"0p833_0p999_0p167_0p001","t":180,"s":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-100,-0.5],[100,-0.5]],"c":false}],"e":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-122,-0.5],[125,-0.5]],"c":true}]},{"i":{"x":0.833,"y":0.999},"o":{"x":0.333,"y":0},"n":"0p833_0p999_0p333_0","t":210,"s":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-122,-0.5],[125,-0.5]],"c":true}],"e":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-122,-0.5],[125,-0.5]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":390,"s":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-122,-0.5],[125,-0.5]],"c":true}],"e":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-100,-0.5],[100,-0.5]],"c":false}]},{"t":419}],"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[1,0.44313699007,0.2666670084,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":6,"ty":4,"nm":"Path","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":1,"k":[{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"n":"0p833_0p833_0p167_0p167","t":180,"s":[748.5,387,0],"e":[748.5,347,0],"to":[0,-6.66666650772095,0],"ti":[0,6.66666650772095,0]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.333,"y":0.333},"n":"0p833_0p833_0p333_0p333","t":210,"s":[748.5,347,0],"e":[748.5,347,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":390,"s":[748.5,347,0],"e":[748.5,387,0],"to":[0,6.66666650772095,0],"ti":[0,-6.66666650772095,0]},{"t":419}],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.833,"y":0.999},"o":{"x":0.167,"y":0.001},"n":"0p833_0p999_0p167_0p001","t":180,"s":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-36.25,-0.5],[36.25,-0.5]],"c":false}],"e":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-57.75,-3],[58.75,-3]],"c":true}]},{"i":{"x":0.833,"y":0.999},"o":{"x":0.333,"y":0},"n":"0p833_0p999_0p333_0","t":210,"s":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-57.75,-3],[58.75,-3]],"c":true}],"e":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-57.75,-3],[58.75,-3]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":390,"s":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-57.75,-3],[58.75,-3]],"c":true}],"e":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-36.25,-0.5],[36.25,-0.5]],"c":false}]},{"t":419}],"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[1,0.44313699007,0.2666670084,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":7,"ty":4,"nm":"Path","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":1,"k":[{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"n":"0p833_0p833_0p167_0p167","t":180,"s":[3006.5,763,0],"e":[3006.5,823,0],"to":[0,10,0],"ti":[0,-10,0]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.333,"y":0.333},"n":"0p833_0p833_0p333_0p333","t":210,"s":[3006.5,823,0],"e":[3006.5,823,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":390,"s":[3006.5,823,0],"e":[3006.5,763,0],"to":[0,-10,0],"ti":[0,10,0]},{"t":419}],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.833,"y":0.999},"o":{"x":0.167,"y":0},"n":"0p833_0p999_0p167_0","t":180,"s":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-66.25,-0.5],[66.25,-0.5]],"c":false}],"e":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-36.25,-0.5],[36.25,-0.5]],"c":true}]},{"i":{"x":0.833,"y":0.999},"o":{"x":0.333,"y":0},"n":"0p833_0p999_0p333_0","t":210,"s":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-36.25,-0.5],[36.25,-0.5]],"c":true}],"e":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-36.25,-0.5],[36.25,-0.5]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":390,"s":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-36.25,-0.5],[36.25,-0.5]],"c":true}],"e":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-66.25,-0.5],[66.25,-0.5]],"c":false}]},{"t":419}],"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[1,0.44313699007,0.2666670084,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":8,"ty":4,"nm":"Path","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":1,"k":[{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"n":"0p833_0p833_0p167_0p167","t":180,"s":[3375.5,857,0],"e":[3375.5,817,0],"to":[0,-6.66666650772095,0],"ti":[0,6.66666650772095,0]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.333,"y":0.333},"n":"0p833_0p833_0p333_0p333","t":210,"s":[3375.5,817,0],"e":[3375.5,817,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":390,"s":[3375.5,817,0],"e":[3375.5,857,0],"to":[0,6.66666650772095,0],"ti":[0,-6.66666650772095,0]},{"t":419}],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.833,"y":0.999},"o":{"x":0.167,"y":0.001},"n":"0p833_0p999_0p167_0p001","t":180,"s":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-84.25,-0.5],[84.25,-0.5]],"c":false}],"e":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-63.75,-0.5],[64.25,-0.5]],"c":true}]},{"i":{"x":0.833,"y":0.999},"o":{"x":0.333,"y":0},"n":"0p833_0p999_0p333_0","t":210,"s":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-63.75,-0.5],[64.25,-0.5]],"c":true}],"e":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-63.75,-0.5],[64.25,-0.5]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":390,"s":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-63.75,-0.5],[64.25,-0.5]],"c":true}],"e":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-84.25,-0.5],[84.25,-0.5]],"c":false}]},{"t":419}],"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[1,0.44313699007,0.2666670084,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-63.75,-0.5],[64.25,-0.5]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 1","np":1,"cix":2,"ix":2,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":9,"ty":4,"nm":"Path","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":1,"k":[{"i":{"x":0.833,"y":1},"o":{"x":0.333,"y":0},"n":"0p833_1_0p333_0","t":90,"s":[3511,409,0],"e":[3491,289,0],"to":[-3.33333325386047,-20,0],"ti":[3.33333325386047,20,0]},{"i":{"x":0.667,"y":0.667},"o":{"x":0.333,"y":0.333},"n":"0p667_0p667_0p333_0p333","t":120,"s":[3491,289,0],"e":[3491,289,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":300,"s":[3491,289,0],"e":[3511,409,0],"to":[3.33333325386047,20,0],"ti":[-3.33333325386047,-20,0]},{"t":330}],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.833,"y":1},"o":{"x":0.333,"y":0},"n":"0p833_1_0p333_0","t":90,"s":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-51.5,-0.5],[50.5,-0.5]],"c":false}],"e":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-101.5,-0.5],[120.5,-0.5]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":120,"s":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-101.5,-0.5],[120.5,-0.5]],"c":false}],"e":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-101.5,-0.5],[120.5,-0.5]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":300,"s":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-101.5,-0.5],[120.5,-0.5]],"c":false}],"e":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-51.5,-0.5],[50.5,-0.5]],"c":false}]},{"t":330}],"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[1,0.44313699007,0.2666670084,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":10,"ty":4,"nm":"Path Copy 2","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":90,"s":[3718.5,576,0],"e":[3598.5,696,0],"to":[-20,20,0],"ti":[20,-20,0]},{"i":{"x":0.667,"y":0.667},"o":{"x":0.333,"y":0.333},"n":"0p667_0p667_0p333_0p333","t":120,"s":[3598.5,696,0],"e":[3598.5,696,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":300,"s":[3598.5,696,0],"e":[3718.5,576,0],"to":[20,-20,0],"ti":[-20,20,0]},{"t":332}],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-39.25,0],[39.25,0]],"c":false},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[1,0.44313699007,0.2666670084,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path Copy 2","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":11,"ty":4,"nm":"Path","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[3738,557,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[114.5,-75],[75,-114.5],[-114.5,75],[-75,114.5]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[1,0.44313699007,0.2666670084,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":12,"ty":4,"nm":"Path","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[3502,257,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[127,4.5],[4.5,127],[-127,-4.5],[-4.5,-127]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[1,0.44313699007,0.2666670084,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":13,"ty":4,"nm":"Path","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[2653.5,703.5,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-92.25,55.75],[-55.75,92.25],[92.25,-55.75],[55.75,-92.25]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[1,0.44313699007,0.2666670084,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":14,"ty":4,"nm":"Path","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[3087.5,645.5,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[40.25,-124.75],[124.75,-40.25],[-40.25,124.75],[-124.75,40.25]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[1,0.44313699007,0.2666670084,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":15,"ty":4,"nm":"Path","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[1728,878,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[66,15],[15,66],[-66,-15],[-15,-66]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[1,0.44313699007,0.2666670084,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":16,"ty":4,"nm":"Path","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[1200,646,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-95.5,-137],[-137,-95.5],[95.5,137],[137,95.5]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[1,0.44313699007,0.2666670084,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":17,"ty":4,"nm":"Path","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[356.5,496.5,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-7.75,-176.75],[-176.75,-7.75],[7.75,176.75],[176.75,7.75]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[1,0.44313699007,0.2666670084,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":18,"ty":4,"nm":"Path","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[821.5,268.5,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[36.25,-95.25],[95.25,-36.25],[-36.25,95.25],[-95.25,36.25]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[1,0.44313699007,0.2666670084,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":19,"ty":4,"nm":"Path","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[634.5,1150.5,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-8.75,68.25],[68.25,-8.75],[8.75,-68.25],[-68.25,8.75]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[1,0.44313699007,0.2666670084,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":20,"ty":4,"nm":"Path","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[858,834,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[11,135],[-135,-11],[-11,-135],[135,11]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[1,0.44313699007,0.2666670084,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":420,"st":0,"bm":0}],"markers":[{"tm":90,"cm":"1","dr":0},{"tm":120,"cm":"2","dr":0},{"tm":180,"cm":"3","dr":0},{"tm":210,"cm":"4","dr":0},{"tm":300,"cm":"5","dr":0},{"tm":330,"cm":"6","dr":0},{"tm":390,"cm":"7","dr":0},{"tm":419,"cm":"8","dr":0}]}
\ No newline at end of file
diff --git a/packages/dev-tools-pages/ts/components/Animations/Profiler/index.tsx b/packages/dev-tools-pages/ts/components/Animations/Profiler/index.tsx
new file mode 100644
index 000000000..e767a587f
--- /dev/null
+++ b/packages/dev-tools-pages/ts/components/Animations/Profiler/index.tsx
@@ -0,0 +1,10 @@
+import * as React from 'react';
+
+import Animation from '../index';
+import * as animationData from './data.json';
+
+function AnimationProfiler() {
+    return <Animation animationData={animationData} width={1985} height={657} />;
+}
+
+export default AnimationProfiler;
diff --git a/packages/dev-tools-pages/ts/components/Animations/Trace/data.json b/packages/dev-tools-pages/ts/components/Animations/Trace/data.json
new file mode 100644
index 000000000..7b2936fff
--- /dev/null
+++ b/packages/dev-tools-pages/ts/components/Animations/Trace/data.json
@@ -0,0 +1 @@
+{"v":"5.4.1","fr":30,"ip":0,"op":420,"w":4482,"h":1220,"nm":"header-trace","ddd":0,"assets":[],"layers":[{"ddd":0,"ind":1,"ty":4,"nm":"Shape Layer 1","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[2241,610,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[],"ip":0,"op":529,"st":0,"bm":0},{"ddd":0,"ind":3,"ty":3,"nm":"▽ header-trace","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[2242,609,0],"ix":2},"a":{"a":0,"k":[2238,607,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":4,"ty":4,"nm":"Path","parent":3,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[3391.5,737.5,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[101.75,-11.75],[-11.75,101.75],[-101.75,11.75],[11.75,-101.75]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.30980399251,0.462745010853,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":5,"ty":4,"nm":"Path 7","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[4035.5,479.5,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":180,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[221.75,158.25],[158.25,221.75],[-221.75,-158.25],[-158.25,-221.75]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[201.75,178.25],[158.25,221.75],[-221.75,-158.25],[-178.25,-201.75]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":210,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[201.75,178.25],[158.25,221.75],[-221.75,-158.25],[-178.25,-201.75]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[201.75,178.25],[158.25,221.75],[-221.75,-158.25],[-178.25,-201.75]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":390,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[201.75,178.25],[158.25,221.75],[-221.75,-158.25],[-178.25,-201.75]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[221.75,158.25],[158.25,221.75],[-221.75,-158.25],[-158.25,-221.75]],"c":true}]},{"t":420}],"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.30980399251,0.462745010853,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"fl","c":{"a":0,"k":[1,1,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":6,"ty":4,"nm":"Path 6","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[4035.5,479.5,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":180,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[221.75,158.25],[158.25,221.75],[-221.75,-158.25],[-158.25,-221.75]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[211.75,168.25],[158.25,221.75],[-211.75,-148.25],[-158.25,-201.75]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":210,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[211.75,168.25],[158.25,221.75],[-211.75,-148.25],[-158.25,-201.75]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[211.75,168.25],[158.25,221.75],[-211.75,-148.25],[-158.25,-201.75]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.167,"y":0},"n":"0p667_1_0p167_0","t":390,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[211.75,168.25],[158.25,221.75],[-211.75,-148.25],[-158.25,-201.75]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[221.75,158.25],[158.25,221.75],[-221.75,-158.25],[-158.25,-221.75]],"c":true}]},{"t":420}],"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.30980399251,0.462745010853,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"fl","c":{"a":0,"k":[1,1,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":7,"ty":4,"nm":"Path 5","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[4035.5,479.5,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":180,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[221.75,158.25],[158.25,221.75],[-221.75,-158.25],[-158.25,-221.75]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[221.75,158.25],[158.25,221.75],[-201.75,-138.25],[-138.25,-201.75]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":210,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[221.75,158.25],[158.25,221.75],[-201.75,-138.25],[-138.25,-201.75]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[221.75,158.25],[158.25,221.75],[-201.75,-138.25],[-138.25,-201.75]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":390,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[221.75,158.25],[158.25,221.75],[-201.75,-138.25],[-138.25,-201.75]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[221.75,158.25],[158.25,221.75],[-221.75,-158.25],[-158.25,-221.75]],"c":true}]},{"t":420}],"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.30980399251,0.462745010853,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"fl","c":{"a":0,"k":[1,1,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":8,"ty":4,"nm":"Path","parent":3,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[4031.5,477.5,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[221.75,158.25],[158.25,221.75],[-221.75,-158.25],[-158.25,-221.75]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.30980399251,0.462745010853,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"fl","c":{"a":0,"k":[1,1,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":9,"ty":4,"nm":"Path","parent":3,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[3671.5,517.5,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[21.75,158.25],[158.25,21.75],[-21.75,-158.25],[-158.25,-21.75]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.30980399251,0.462745010853,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":10,"ty":4,"nm":"Path Copy 12","parent":3,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[3803.5,646.5,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":90,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[93.75,-43.75],[-43.75,93.75],[-73.75,63.75],[63.75,-73.75]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[73.75,-63.75],[-63.75,73.75],[-73.75,63.75],[63.75,-73.75]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":121,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[73.75,-63.75],[-63.75,73.75],[-73.75,63.75],[63.75,-73.75]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[73.75,-63.75],[-63.75,73.75],[-73.75,63.75],[63.75,-73.75]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":300,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[73.75,-63.75],[-63.75,73.75],[-73.75,63.75],[63.75,-73.75]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[93.75,-43.75],[-43.75,93.75],[-73.75,63.75],[63.75,-73.75]],"c":true}]},{"t":331}],"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.30980399251,0.462745010853,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"fl","c":{"a":0,"k":[1,1,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path Copy 12","np":3,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":11,"ty":4,"nm":"Path Copy 11","parent":3,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[3803.5,666.5,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":90,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[93.75,-53.75],[-43.75,83.75],[-73.75,53.75],[63.75,-83.75]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[73.75,-53.75],[-53.75,73.75],[-73.75,53.75],[53.75,-73.75]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":121,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[73.75,-53.75],[-53.75,73.75],[-73.75,53.75],[53.75,-73.75]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[73.75,-53.75],[-53.75,73.75],[-73.75,53.75],[53.75,-73.75]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":300,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[73.75,-53.75],[-53.75,73.75],[-73.75,53.75],[53.75,-73.75]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[93.75,-53.75],[-43.75,83.75],[-73.75,53.75],[63.75,-83.75]],"c":true}]},{"t":331}],"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.30980399251,0.462745010853,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"fl","c":{"a":0,"k":[1,1,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path Copy 11","np":3,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":12,"ty":4,"nm":"Path Copy 10","parent":3,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[3803.5,686.5,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":90,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[93.75,-63.75],[-43.75,73.75],[-73.75,43.75],[63.75,-93.75]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[73.75,-43.75],[-43.75,73.75],[-73.75,43.75],[43.75,-73.75]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":121,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[73.75,-43.75],[-43.75,73.75],[-73.75,43.75],[43.75,-73.75]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[73.75,-43.75],[-43.75,73.75],[-73.75,43.75],[43.75,-73.75]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":300,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[73.75,-43.75],[-43.75,73.75],[-73.75,43.75],[43.75,-73.75]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[93.75,-63.75],[-43.75,73.75],[-73.75,43.75],[63.75,-93.75]],"c":true}]},{"t":331}],"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.30980399251,0.462745010853,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"fl","c":{"a":0,"k":[1,1,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path Copy 10","np":3,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":13,"ty":4,"nm":"Path","parent":3,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[3101.5,747.5,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":90,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[136.75,-126.75],[-126.75,136.75],[-136.75,126.75],[126.75,-136.75]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[156.75,-106.75],[-106.75,156.75],[-136.75,126.75],[126.75,-136.75]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":121,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[156.75,-106.75],[-106.75,156.75],[-136.75,126.75],[126.75,-136.75]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[156.75,-106.75],[-106.75,156.75],[-136.75,126.75],[126.75,-136.75]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":300,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[156.75,-106.75],[-106.75,156.75],[-136.75,126.75],[126.75,-136.75]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[136.75,-126.75],[-126.75,136.75],[-136.75,126.75],[126.75,-136.75]],"c":true}]},{"t":331}],"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.30980399251,0.462745010853,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"fl","c":{"a":0,"k":[1,1,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":3,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":14,"ty":4,"nm":"Path","parent":3,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[3101.5,767.5,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":90,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[136.75,-116.75],[-116.75,136.75],[-136.75,116.75],[116.75,-136.75]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[146.75,-106.75],[-106.75,146.75],[-136.75,116.75],[116.75,-136.75]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":121,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[146.75,-106.75],[-106.75,146.75],[-136.75,116.75],[116.75,-136.75]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[146.75,-106.75],[-106.75,146.75],[-136.75,116.75],[116.75,-136.75]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":300,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[146.75,-106.75],[-106.75,146.75],[-136.75,116.75],[116.75,-136.75]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[136.75,-116.75],[-116.75,136.75],[-136.75,116.75],[116.75,-136.75]],"c":true}]},{"t":331}],"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.30980399251,0.462745010853,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"fl","c":{"a":0,"k":[1,1,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":3,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":15,"ty":4,"nm":"Path","parent":3,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[3101.5,787.5,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":90,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[136.75,-106.75],[-106.75,136.75],[-136.75,106.75],[106.75,-136.75]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[156.75,-126.75],[-106.75,136.75],[-136.75,106.75],[126.75,-156.75]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":121,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[156.75,-126.75],[-106.75,136.75],[-136.75,106.75],[126.75,-156.75]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[156.75,-126.75],[-106.75,136.75],[-136.75,106.75],[126.75,-156.75]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":300,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[156.75,-126.75],[-106.75,136.75],[-136.75,106.75],[126.75,-156.75]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[136.75,-106.75],[-106.75,136.75],[-136.75,106.75],[106.75,-136.75]],"c":true}]},{"t":331}],"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.30980399251,0.462745010853,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"fl","c":{"a":0,"k":[1,1,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":3,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":16,"ty":4,"nm":"Path","parent":3,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[3121.5,767.5,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[146.75,-116.75],[-116.75,146.75],[-146.75,116.75],[116.75,-146.75]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.30980399251,0.462745010853,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"fl","c":{"a":0,"k":[1,1,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":3,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":17,"ty":4,"nm":"Path","parent":3,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[2881.5,567.5,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.833,"y":0.998},"o":{"x":0.167,"y":0.001},"n":"0p833_0p998_0p167_0p001","t":180,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[66.75,-16.75],[-16.75,66.75],[-66.75,16.75],[16.75,-66.75]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[86.75,3.25],[3.25,86.75],[-66.75,16.75],[16.75,-66.75]],"c":true}]},{"i":{"x":0.833,"y":0.998},"o":{"x":0.333,"y":0},"n":"0p833_0p998_0p333_0","t":210,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[86.75,3.25],[3.25,86.75],[-66.75,16.75],[16.75,-66.75]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[86.75,3.25],[3.25,86.75],[-66.75,16.75],[16.75,-66.75]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":390,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[86.75,3.25],[3.25,86.75],[-66.75,16.75],[16.75,-66.75]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[66.75,-16.75],[-16.75,66.75],[-66.75,16.75],[16.75,-66.75]],"c":true}]},{"t":420}],"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.30980399251,0.462745010853,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"fl","c":{"a":0,"k":[1,1,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":3,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":18,"ty":4,"nm":"Path","parent":3,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[2911.5,577.5,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.833,"y":0.999},"o":{"x":0.167,"y":0.002},"n":"0p833_0p999_0p167_0p002","t":180,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[61.75,-11.75],[-11.75,61.75],[-61.75,11.75],[11.75,-61.75]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[71.75,-1.75],[-11.75,81.75],[-71.75,21.75],[11.75,-61.75]],"c":true}]},{"i":{"x":0.833,"y":0.999},"o":{"x":0.333,"y":0},"n":"0p833_0p999_0p333_0","t":210,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[71.75,-1.75],[-11.75,81.75],[-71.75,21.75],[11.75,-61.75]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[71.75,-1.75],[-11.75,81.75],[-71.75,21.75],[11.75,-61.75]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":390,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[71.75,-1.75],[-11.75,81.75],[-71.75,21.75],[11.75,-61.75]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[61.75,-11.75],[-11.75,61.75],[-61.75,11.75],[11.75,-61.75]],"c":true}]},{"t":420}],"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.30980399251,0.462745010853,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"fl","c":{"a":0,"k":[1,1,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":3,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":19,"ty":4,"nm":"Path","parent":3,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[2941.5,587.5,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.833,"y":0.998},"o":{"x":0.167,"y":0.002},"n":"0p833_0p998_0p167_0p002","t":180,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[56.75,-6.75],[-6.75,56.75],[-56.75,6.75],[6.75,-56.75]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[56.75,-6.75],[-26.75,76.75],[-76.75,26.75],[6.75,-56.75]],"c":true}]},{"i":{"x":0.833,"y":0.998},"o":{"x":0.333,"y":0},"n":"0p833_0p998_0p333_0","t":210,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[56.75,-6.75],[-26.75,76.75],[-76.75,26.75],[6.75,-56.75]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[56.75,-6.75],[-26.75,76.75],[-76.75,26.75],[6.75,-56.75]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":390,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[56.75,-6.75],[-26.75,76.75],[-76.75,26.75],[6.75,-56.75]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[56.75,-6.75],[-6.75,56.75],[-56.75,6.75],[6.75,-56.75]],"c":true}]},{"t":420}],"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.30980399251,0.462745010853,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"fl","c":{"a":0,"k":[1,1,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":3,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":20,"ty":4,"nm":"Path","parent":3,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[2901.5,587.5,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[76.75,-6.75],[-6.75,76.75],[-76.75,6.75],[6.75,-76.75]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.30980399251,0.462745010853,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"fl","c":{"a":0,"k":[1,1,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":3,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":21,"ty":4,"nm":"Path","parent":3,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[3411.5,177.5,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-88.25,-31.75],[-31.75,-88.25],[88.25,31.75],[31.75,88.25]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.30980399251,0.462745010853,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":22,"ty":4,"nm":"Path","parent":3,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[3431.5,157.5,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-78.25,-41.75],[-41.75,-78.25],[78.25,41.75],[41.75,78.25]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.30980399251,0.462745010853,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"fl","c":{"a":0,"k":[1,1,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":3,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":23,"ty":4,"nm":"Path","parent":3,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[3411.5,157.5,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-78.25,-31.75],[-31.75,-78.25],[78.25,31.75],[31.75,78.25]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.30980399251,0.462745010853,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"fl","c":{"a":0,"k":[1,1,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":3,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":24,"ty":4,"nm":"Path","parent":3,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[3391.5,157.5,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-78.25,-21.75],[-21.75,-78.25],[78.25,21.75],[21.75,78.25]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.30980399251,0.462745010853,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":25,"ty":4,"nm":"Path","parent":3,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[3101.5,627.5,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[136.75,-186.75],[-186.75,136.75],[-136.75,186.75],[186.75,-136.75]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.30980399251,0.462745010853,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":26,"ty":4,"nm":"Path","parent":3,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[1444.5,626.5,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[36.75,63.25],[63.25,36.75],[-36.75,-63.25],[-63.25,-36.75]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.30980399251,0.462745010853,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":27,"ty":4,"nm":"Path 4","parent":3,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[704.5,527.5,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-183.25,-16.75],[-16.75,-183.25],[183.25,16.75],[16.75,183.25]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.30980399251,0.462745010853,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":28,"ty":4,"nm":"Path","parent":3,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[1064.5,887.5,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-3.25,163.25],[163.25,-3.25],[3.25,-163.25],[-163.25,3.25]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.30980399251,0.462745010853,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":29,"ty":4,"nm":"Path Copy 4","parent":3,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[1594.5,776.5,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.833,"y":1},"o":{"x":0.333,"y":0},"n":"0p833_1_0p333_0","t":180,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[101.75,-51.75],[-51.75,101.75],[-101.75,51.75],[51.75,-101.75]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[121.75,-31.75],[-31.75,121.75],[-101.75,51.75],[51.75,-101.75]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":210,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[121.75,-31.75],[-31.75,121.75],[-101.75,51.75],[51.75,-101.75]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[121.75,-31.75],[-31.75,121.75],[-101.75,51.75],[51.75,-101.75]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.167,"y":0},"n":"0p667_1_0p167_0","t":390,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[121.75,-31.75],[-31.75,121.75],[-101.75,51.75],[51.75,-101.75]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[101.75,-51.75],[-51.75,101.75],[-101.75,51.75],[51.75,-101.75]],"c":true}]},{"t":420}],"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.30980399251,0.462745010853,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"fl","c":{"a":0,"k":[1,1,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path Copy 4","np":3,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":30,"ty":4,"nm":"Path Copy 3","parent":3,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[1624.5,787.5,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.833,"y":1},"o":{"x":0.333,"y":0},"n":"0p833_1_0p333_0","t":180,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[96.75,-46.75],[-46.75,96.75],[-96.75,46.75],[46.75,-96.75]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[106.75,-36.75],[-46.75,116.75],[-116.75,46.75],[36.75,-106.75]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":210,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[106.75,-36.75],[-46.75,116.75],[-116.75,46.75],[36.75,-106.75]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[106.75,-36.75],[-46.75,116.75],[-116.75,46.75],[36.75,-106.75]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.167,"y":0},"n":"0p667_1_0p167_0","t":390,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[106.75,-36.75],[-46.75,116.75],[-116.75,46.75],[36.75,-106.75]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[96.75,-46.75],[-46.75,96.75],[-96.75,46.75],[46.75,-96.75]],"c":true}]},{"t":420}],"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.30980399251,0.462745010853,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"fl","c":{"a":0,"k":[1,1,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path Copy 3","np":3,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":31,"ty":4,"nm":"Path Copy 2","parent":3,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[1654.5,797.5,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.833,"y":1},"o":{"x":0.333,"y":0},"n":"0p833_1_0p333_0","t":180,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[91.75,-41.75],[-41.75,91.75],[-91.75,41.75],[41.75,-91.75]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[91.75,-41.75],[-61.75,111.75],[-131.75,41.75],[21.75,-111.75]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":210,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[91.75,-41.75],[-61.75,111.75],[-131.75,41.75],[21.75,-111.75]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[91.75,-41.75],[-61.75,111.75],[-131.75,41.75],[21.75,-111.75]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.167,"y":0},"n":"0p667_1_0p167_0","t":390,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[91.75,-41.75],[-61.75,111.75],[-131.75,41.75],[21.75,-111.75]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[91.75,-41.75],[-41.75,91.75],[-91.75,41.75],[41.75,-91.75]],"c":true}]},{"t":420}],"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.30980399251,0.462745010853,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"fl","c":{"a":0,"k":[1,1,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path Copy 2","np":3,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":32,"ty":4,"nm":"Path","parent":3,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[1615.5,796.5,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[41.75,-111.75],[-111.75,41.75],[-41.75,111.75],[111.75,-41.75]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.30980399251,0.462745010853,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":33,"ty":4,"nm":"Path 3","parent":3,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[704.5,527.5,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.833,"y":0.998},"o":{"x":0.167,"y":0.002},"n":"0p833_0p998_0p167_0p002","t":180,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-183.25,-16.75],[-16.75,-183.25],[183.25,16.75],[16.75,183.25]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-159.25,7.25],[7.25,-159.25],[183.25,16.75],[16.75,183.25]],"c":true}]},{"i":{"x":0.713,"y":0.984},"o":{"x":0.333,"y":0},"n":"0p713_0p984_0p333_0","t":210,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-159.25,7.25],[7.25,-159.25],[183.25,16.75],[16.75,183.25]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-159.25,7.25],[7.25,-159.25],[183.25,16.75],[16.75,183.25]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":390,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-159.25,7.25],[7.25,-159.25],[183.25,16.75],[16.75,183.25]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-183.25,-16.75],[-16.75,-183.25],[183.25,16.75],[16.75,183.25]],"c":true}]},{"t":420}],"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.30980399251,0.462745010853,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"fl","c":{"a":0,"k":[1,1,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":34,"ty":4,"nm":"Path 2","parent":3,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[702.5,527.5,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.833,"y":0.996},"o":{"x":0.167,"y":0.002},"n":"0p833_0p996_0p167_0p002","t":180,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-183.25,-16.75],[-16.75,-183.25],[183.25,16.75],[16.75,183.25]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-169.25,-4.75],[-14.75,-159.25],[171.25,26.75],[16.75,183.25]],"c":true}]},{"i":{"x":0.689,"y":0.993},"o":{"x":0.333,"y":0},"n":"0p689_0p993_0p333_0","t":211,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-169.25,-4.75],[-14.75,-159.25],[171.25,26.75],[16.75,183.25]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-169.25,-4.75],[-14.75,-159.25],[171.25,26.75],[16.75,183.25]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":390,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-169.25,-4.75],[-14.75,-159.25],[171.25,26.75],[16.75,183.25]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-183.25,-16.75],[-16.75,-183.25],[183.25,16.75],[16.75,183.25]],"c":true}]},{"t":420}],"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.30980399251,0.462745010853,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"fl","c":{"a":0,"k":[1,1,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":35,"ty":4,"nm":"Path","parent":3,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[704.5,527.5,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.833,"y":0.994},"o":{"x":0.167,"y":0.003},"n":"0p833_0p994_0p167_0p003","t":180,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-183.25,-16.75],[-16.75,-183.25],[183.25,16.75],[16.75,183.25]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-183.25,-16.75],[-40.75,-159.25],[159.25,40.75],[16.75,183.25]],"c":true}]},{"i":{"x":0.682,"y":0.993},"o":{"x":0.333,"y":0},"n":"0p682_0p993_0p333_0","t":210,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-183.25,-16.75],[-40.75,-159.25],[159.25,40.75],[16.75,183.25]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-183.25,-16.75],[-40.75,-159.25],[159.25,40.75],[16.75,183.25]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":390,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-183.25,-16.75],[-40.75,-159.25],[159.25,40.75],[16.75,183.25]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-183.25,-16.75],[-16.75,-183.25],[183.25,16.75],[16.75,183.25]],"c":true}]},{"t":420}],"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.30980399251,0.462745010853,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":36,"ty":4,"nm":"Path","parent":3,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[1205.5,527.5,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":90,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[156.75,113.25],[113.25,156.75],[-156.75,-113.25],[-113.25,-156.75]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[156.75,113.25],[93.25,176.75],[-176.75,-93.25],[-113.25,-156.75]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":121,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[156.75,113.25],[93.25,176.75],[-176.75,-93.25],[-113.25,-156.75]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[156.75,113.25],[93.25,176.75],[-176.75,-93.25],[-113.25,-156.75]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":300,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[156.75,113.25],[93.25,176.75],[-176.75,-93.25],[-113.25,-156.75]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[156.75,113.25],[113.25,156.75],[-156.75,-113.25],[-113.25,-156.75]],"c":true}]},{"t":331}],"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.30980399251,0.462745010853,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"fl","c":{"a":0,"k":[1,1,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":3,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":37,"ty":4,"nm":"Path","parent":3,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[1205.5,547.5,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":90,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[156.75,103.25],[103.25,156.75],[-156.75,-103.25],[-103.25,-156.75]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[156.75,103.25],[93.25,166.75],[-176.75,-103.25],[-113.25,-166.75]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":121,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[156.75,103.25],[93.25,166.75],[-176.75,-103.25],[-113.25,-166.75]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[156.75,103.25],[93.25,166.75],[-176.75,-103.25],[-113.25,-166.75]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":300,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[156.75,103.25],[93.25,166.75],[-176.75,-103.25],[-113.25,-166.75]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[156.75,103.25],[103.25,156.75],[-156.75,-103.25],[-103.25,-156.75]],"c":true}]},{"t":331}],"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.30980399251,0.462745010853,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"fl","c":{"a":0,"k":[1,1,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":3,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":38,"ty":4,"nm":"Path","parent":3,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[1205.5,567.5,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":90,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[156.75,93.25],[93.25,156.75],[-156.75,-93.25],[-93.25,-156.75]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[156.75,93.25],[93.25,156.75],[-176.75,-113.25],[-113.25,-176.75]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":121,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[156.75,93.25],[93.25,156.75],[-176.75,-113.25],[-113.25,-176.75]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[156.75,93.25],[93.25,156.75],[-176.75,-113.25],[-113.25,-176.75]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":300,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[156.75,93.25],[93.25,156.75],[-176.75,-113.25],[-113.25,-176.75]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[156.75,93.25],[93.25,156.75],[-156.75,-93.25],[-93.25,-156.75]],"c":true}]},{"t":331}],"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.30980399251,0.462745010853,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"fl","c":{"a":0,"k":[1,1,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":3,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":39,"ty":4,"nm":"Path Copy 16","parent":3,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[549.878,808.122,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,-100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.833,"y":1},"o":{"x":0.333,"y":0},"n":"0p833_1_0p333_0","t":90,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[116.059,65.119],[41.119,140.059],[-140.061,-41.121],[-65.121,-116.061]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[116.059,65.119],[65.119,116.059],[-116.061,-65.121],[-65.121,-116.061]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":122,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[116.059,65.119],[65.119,116.059],[-116.061,-65.121],[-65.121,-116.061]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[116.059,65.119],[65.119,116.059],[-116.061,-65.121],[-65.121,-116.061]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":300,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[116.059,65.119],[65.119,116.059],[-116.061,-65.121],[-65.121,-116.061]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[116.059,65.119],[41.119,140.059],[-140.061,-41.121],[-65.121,-116.061]],"c":true}]},{"t":331}],"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.30980399251,0.462745010853,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"fl","c":{"a":0,"k":[1,1,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":-270,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path Copy 16","np":3,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":40,"ty":4,"nm":"Path Copy 15","parent":3,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[526,808.122,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,-100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.833,"y":1},"o":{"x":0.333,"y":0},"n":"0p833_1_0p333_0","t":90,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[116.059,53.409],[41.409,128.059],[-140.061,-53.411],[-65.411,-128.061]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[116.059,53.409],[53.409,116.059],[-116.061,-53.411],[-53.411,-116.061]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":122,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[116.059,53.409],[53.409,116.059],[-116.061,-53.411],[-53.411,-116.061]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[116.059,53.409],[53.409,116.059],[-116.061,-53.411],[-53.411,-116.061]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":300,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[116.059,53.409],[53.409,116.059],[-116.061,-53.411],[-53.411,-116.061]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[116.059,53.409],[41.409,128.059],[-140.061,-53.411],[-65.411,-128.061]],"c":true}]},{"t":331}],"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.30980399251,0.462745010853,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"fl","c":{"a":0,"k":[1,1,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":-270,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path Copy 15","np":3,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":41,"ty":4,"nm":"Path Copy 14","parent":3,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[503.425,808.122,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,-100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.833,"y":1},"o":{"x":0.333,"y":0},"n":"0p833_1_0p333_0","t":90,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[116.059,42.045],[41.699,116.405],[-138.061,-64.045],[-63.701,-138.405]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[116.059,42.045],[41.699,116.405],[-116.061,-42.045],[-41.701,-116.405]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":122,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[116.059,42.045],[41.699,116.405],[-116.061,-42.045],[-41.701,-116.405]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[116.059,42.045],[41.699,116.405],[-116.061,-42.045],[-41.701,-116.405]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":300,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[116.059,42.045],[41.699,116.405],[-116.061,-42.045],[-41.701,-116.405]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[116.059,42.045],[41.699,116.405],[-138.061,-64.045],[-63.701,-138.405]],"c":true}]},{"t":331}],"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.30980399251,0.462745010853,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"fl","c":{"a":0,"k":[1,1,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":-270,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path Copy 14","np":3,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":42,"ty":4,"nm":"Path Copy 13","parent":3,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[391,697,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,-100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[195.5,121.05],[121.05,195.5],[-195.5,-121.05],[-121.05,-195.5]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.30980399251,0.462745010853,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":-270,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path Copy 13","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":43,"ty":4,"nm":"Path","parent":3,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[1185.5,548.5,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[166.75,103.25],[103.25,166.75],[-166.75,-103.25],[-103.25,-166.75]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.30980399251,0.462745010853,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":420,"st":0,"bm":0}],"markers":[{"tm":90,"cm":"1","dr":0},{"tm":121,"cm":"2","dr":0},{"tm":180,"cm":"3","dr":0},{"tm":210,"cm":"4","dr":0},{"tm":300,"cm":"5","dr":0},{"tm":331,"cm":"6","dr":0},{"tm":390,"cm":"7","dr":0},{"tm":420,"cm":"8","dr":0}]}
\ No newline at end of file
diff --git a/packages/dev-tools-pages/ts/components/Animations/Trace/index.tsx b/packages/dev-tools-pages/ts/components/Animations/Trace/index.tsx
new file mode 100644
index 000000000..fa421a3bf
--- /dev/null
+++ b/packages/dev-tools-pages/ts/components/Animations/Trace/index.tsx
@@ -0,0 +1,10 @@
+import * as React from 'react';
+
+import Animation from '../index';
+import * as animationData from './data.json';
+
+function AnimationTrace() {
+    return <Animation animationData={animationData} width={2241} height={610} />;
+}
+
+export default AnimationTrace;
diff --git a/packages/dev-tools-pages/ts/components/Animations/index.tsx b/packages/dev-tools-pages/ts/components/Animations/index.tsx
new file mode 100644
index 000000000..bf35c0784
--- /dev/null
+++ b/packages/dev-tools-pages/ts/components/Animations/index.tsx
@@ -0,0 +1,105 @@
+import * as React from 'react';
+import Lottie from 'react-lottie';
+import styled from 'styled-components';
+
+import { media } from 'ts/variables';
+
+interface AnimationProps {
+    animationData: object;
+    width: number;
+    height: number;
+}
+
+interface AnimationState {
+    width?: number;
+    height?: number;
+}
+
+class Animation extends React.PureComponent<AnimationProps, AnimationState> {
+    timeout = null as any;
+    constructor(props: AnimationProps) {
+        super(props);
+
+        this.state = {
+            height: undefined,
+            width: undefined,
+        };
+
+        this.handleResize = this.handleResize.bind(this);
+        this.updateAnimationSize = this.updateAnimationSize.bind(this);
+    }
+
+    componentDidMount() {
+        this.updateAnimationSize();
+        window.addEventListener('resize', this.handleResize);
+    }
+
+    componentWillUnmount() {
+        window.removeEventListener('resize', this.handleResize);
+    }
+
+    handleResize() {
+        clearTimeout(this.timeout);
+        this.timeout = setTimeout(this.updateAnimationSize, 200);
+    }
+
+    updateAnimationSize() {
+        const windowWidth = window.innerWidth;
+        let width = undefined;
+        let height = undefined;
+        if (windowWidth < 1200) {
+            const maxWidth = windowWidth + 250;
+            const ratio = maxWidth / this.props.width;
+
+            height = Math.round(this.props.height * ratio);
+            width = Math.round(this.props.width * ratio);
+        }
+
+        this.setState({ width, height });
+    }
+
+    render() {
+        let { animationData } = this.props;
+        const height = this.state.height || this.props.height;
+        const width = this.state.width || this.props.width;
+
+        return (
+            <Container height={height}>
+                <InnerContainer>
+                    <Lottie
+                        width={width}
+                        height={height}
+                        options={{
+                            loop: true,
+                            autoplay: true,
+                            animationData: animationData,
+                        }}
+                    />
+                </InnerContainer>
+            </Container>
+        );
+    }
+}
+
+const Container = styled.div`
+    width: 100%;
+    height: ${(props: { height: number }) => props.height}px;
+    position: absolute;
+    top: 40%;
+    left: 0;
+    z-index: -1;
+    overflow: hidden;
+    ${media.medium`
+        top: auto;
+        bottom: -3rem;
+    `};
+`;
+
+const InnerContainer = styled.div`
+    position: absolute;
+    top: 0;
+    left: 50%;
+    transform: translateX(-50%);
+`;
+
+export default Animation;
diff --git a/packages/dev-tools-pages/ts/components/Base.tsx b/packages/dev-tools-pages/ts/components/Base.tsx
index 16e9560f0..54340c9de 100644
--- a/packages/dev-tools-pages/ts/components/Base.tsx
+++ b/packages/dev-tools-pages/ts/components/Base.tsx
@@ -3,7 +3,6 @@ import * as React from 'react';
 import ThemeContext from 'ts/context';
 import GlobalStyles from 'ts/globalStyles';
 import Header from 'ts/components/Header';
-import Hero from 'ts/components/Hero';
 import Footer from 'ts/components/Footer';
 
 interface BaseProps {
@@ -16,7 +15,6 @@ function Base(props: BaseProps) {
         <ThemeContext.Provider value={props.context}>
             <GlobalStyles />
             <Header />
-            <Hero />
             {props.children}
             <Footer />
         </ThemeContext.Provider>
diff --git a/packages/dev-tools-pages/ts/components/Hero.tsx b/packages/dev-tools-pages/ts/components/Hero.tsx
index e92ab6e9d..8b866c5aa 100644
--- a/packages/dev-tools-pages/ts/components/Hero.tsx
+++ b/packages/dev-tools-pages/ts/components/Hero.tsx
@@ -6,8 +6,12 @@ import { withContext, Props } from './withContext';
 import Button from './Button';
 import { Beta } from './Typography';
 
-function Hero(props: Props) {
-    const { subtitle, tagline, title } = props;
+interface HeroProps extends Props {
+    children: React.ReactNode;
+}
+
+function Hero(props: HeroProps) {
+    const { subtitle, tagline } = props;
 
     return (
         <React.Fragment>
@@ -19,13 +23,7 @@ function Hero(props: Props) {
                         Read the Docs
                     </Button>
                 </HeroContainer>
-
-                <ImageContainer>
-                    <Image
-                        src={`/images/${title}@1x.gif`}
-                        srcSet={`/images/${title}@1x.gif, /images/${title}@2x.gif 2x`}
-                    />
-                </ImageContainer>
+                {navigator.userAgent !== 'ReactSnap' ? props.children : null}
             </StyledHero>
         </React.Fragment>
     );
@@ -67,39 +65,4 @@ const Tagline = styled(Beta)`
     `};
 `;
 
-const ImageContainer = styled.div`
-    width: 100%;
-    height: 800px;
-    position: absolute;
-    top: 100%;
-    left: 0;
-    overflow: hidden;
-    transform: translateY(-50%);
-    z-index: -1;
-    ${media.xlarge`
-        height: 533.333333334px;
-        transform: translateY(-60%);
-    `};
-    ${media.small`
-        height: 400px;
-        transform: translateY(-70%);
-    `};
-`;
-
-const Image = styled.img`
-    width: min-content;
-    height: 100%;
-    position: absolute;
-    top: 0;
-    left: 50%;
-    transform: translateX(-50%);
-    object-fit: contain;
-    ${media.small`
-        height: 100%;
-        width: auto;
-        left: 0;
-        transform: translateX(-15%);
-    `};
-`;
-
 export default withContext(Hero);
diff --git a/packages/dev-tools-pages/ts/pages/Compiler.tsx b/packages/dev-tools-pages/ts/pages/Compiler.tsx
index 11c8c4a17..0db7c6204 100644
--- a/packages/dev-tools-pages/ts/pages/Compiler.tsx
+++ b/packages/dev-tools-pages/ts/pages/Compiler.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { render, hydrate } from 'react-dom';
+import * as Loadable from 'react-loadable';
 
 import { Lead } from 'ts/components/Typography';
 import context from 'ts/context/compiler';
@@ -10,10 +11,20 @@ import Code from 'ts/components/Code';
 import InlineCode from 'ts/components/InlineCode';
 import CompilerComponent from 'ts/components/Compiler';
 import Breakout from 'ts/components/Breakout';
+import Hero from 'ts/components/Hero';
+
+const Animation = Loadable({
+    loader: () => System.import(/* webpackChunkName: 'compiler-animation' */ 'ts/components/Animations/Compiler'),
+    loading: () => <div />,
+    delay: 1000,
+});
 
 function Compiler() {
     return (
         <Base context={context}>
+            <Hero>
+                <Animation />
+            </Hero>
             <CompilerComponent />
             <Content>
                 <ContentBlock main title="Get started" />
diff --git a/packages/dev-tools-pages/ts/pages/Cov.tsx b/packages/dev-tools-pages/ts/pages/Cov.tsx
index 4d8288219..1a7abbbb1 100644
--- a/packages/dev-tools-pages/ts/pages/Cov.tsx
+++ b/packages/dev-tools-pages/ts/pages/Cov.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { render, hydrate } from 'react-dom';
+import * as Loadable from 'react-loadable';
 
 import context from 'ts/context/cov';
 import Base from 'ts/components/Base';
@@ -11,10 +12,20 @@ import InlineCode from 'ts/components/InlineCode';
 import { List, ListItem } from 'ts/components/List';
 import Breakout from 'ts/components/Breakout';
 import { Intro, IntroLead, IntroAside } from 'ts/components/Intro';
+import Hero from 'ts/components/Hero';
+
+const Animation = Loadable({
+    loader: () => System.import(/* webpackChunkName: 'cov-animation' */ 'ts/components/Animations/Cov'),
+    loading: () => <div />,
+    delay: 1000,
+});
 
 function Cov() {
     return (
         <Base context={context}>
+            <Hero>
+                <Animation />
+            </Hero>
             <Intro>
                 <IntroLead title="Measure your tests">
                     <p>
diff --git a/packages/dev-tools-pages/ts/pages/Profiler.tsx b/packages/dev-tools-pages/ts/pages/Profiler.tsx
index 1021e43a3..87cc90b23 100644
--- a/packages/dev-tools-pages/ts/pages/Profiler.tsx
+++ b/packages/dev-tools-pages/ts/pages/Profiler.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { render, hydrate } from 'react-dom';
+import * as Loadable from 'react-loadable';
 
 import context from 'ts/context/profiler';
 import Base from 'ts/components/Base';
@@ -11,10 +12,20 @@ import Code from 'ts/components/Code';
 import InlineCode from 'ts/components/InlineCode';
 import { List, ListItem } from 'ts/components/List';
 import { Intro, IntroLead, IntroAside } from 'ts/components/Intro';
+import Hero from 'ts/components/Hero';
+
+const Animation = Loadable({
+    loader: () => System.import(/* webpackChunkName: 'profiler-animation' */ 'ts/components/Animations/Profiler'),
+    loading: () => <div />,
+    delay: 1000,
+});
 
 function Profiler() {
     return (
         <Base context={context}>
+            <Hero>
+                <Animation />
+            </Hero>
             <Intro>
                 <IntroLead title="Outline gas usage">
                     <p>
diff --git a/packages/dev-tools-pages/ts/pages/Trace.tsx b/packages/dev-tools-pages/ts/pages/Trace.tsx
index 609ec8625..1a09d7c3a 100644
--- a/packages/dev-tools-pages/ts/pages/Trace.tsx
+++ b/packages/dev-tools-pages/ts/pages/Trace.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { render, hydrate } from 'react-dom';
+import * as Loadable from 'react-loadable';
 
 import context from 'ts/context/trace';
 import Base from 'ts/components/Base';
@@ -11,10 +12,20 @@ import InlineCode from 'ts/components/InlineCode';
 import { List, ListItem } from 'ts/components/List';
 import TraceComponent from 'ts/components/Trace';
 import Breakout from 'ts/components/Breakout';
+import Hero from 'ts/components/Hero';
+
+const Animation = Loadable({
+    loader: () => System.import(/* webpackChunkName: 'trace-animation' */ 'ts/components/Animations/Trace'),
+    loading: () => <div />,
+    delay: 1000,
+});
 
 function Trace() {
     return (
         <Base context={context}>
+            <Hero>
+                <Animation />
+            </Hero>
             <TraceComponent />
             <Content>
                 <ContentBlock main title="Get started" />
-- 
cgit v1.2.3


From 5d3d2736f5344dadf3948d6a776de2192736c6eb Mon Sep 17 00:00:00 2001
From: August Skare <post@augustskare.no>
Date: Wed, 7 Nov 2018 09:51:42 +0100
Subject: break compiler cards on an earlier breakpoint

---
 packages/dev-tools-pages/ts/components/Compiler.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

(limited to 'packages/dev-tools-pages/ts')

diff --git a/packages/dev-tools-pages/ts/components/Compiler.tsx b/packages/dev-tools-pages/ts/components/Compiler.tsx
index 94d97511c..37796e6cc 100644
--- a/packages/dev-tools-pages/ts/components/Compiler.tsx
+++ b/packages/dev-tools-pages/ts/components/Compiler.tsx
@@ -10,7 +10,7 @@ const Cards = styled.dl`
     column-count: 3;
     column-gap: 1.25rem;
 
-    ${media.small`
+    ${media.medium`
         column-count: 1;
     `}: ;
 `;
@@ -23,7 +23,7 @@ const Card = styled.div`
     margin-bottom: 1.25rem;
     width: 100%;
 
-    ${media.small`
+    ${media.medium`
         padding: 1.875rem;
     `};
 `;
-- 
cgit v1.2.3


From eb2fa8e4afd00abfbb4b52ce5cba3166fe88fc32 Mon Sep 17 00:00:00 2001
From: August Skare <post@augustskare.no>
Date: Wed, 7 Nov 2018 10:13:49 +0100
Subject: more spacing on footer items

---
 packages/dev-tools-pages/ts/components/Footer.tsx | 1 +
 1 file changed, 1 insertion(+)

(limited to 'packages/dev-tools-pages/ts')

diff --git a/packages/dev-tools-pages/ts/components/Footer.tsx b/packages/dev-tools-pages/ts/components/Footer.tsx
index aa2a6eed9..c53816354 100644
--- a/packages/dev-tools-pages/ts/components/Footer.tsx
+++ b/packages/dev-tools-pages/ts/components/Footer.tsx
@@ -104,6 +104,7 @@ const List = styled.ul`
 
 const ListItem = styled.li`
     margin-bottom: 3.3125rem;
+    padding-right: 1rem;
     flex-basis: 50%;
     :nth-last-of-type(-n + 2) {
         margin-bottom: 0;
-- 
cgit v1.2.3


From 7536648f7aa4a36e45814428aef2658ceed2213c Mon Sep 17 00:00:00 2001
From: August Skare <post@augustskare.no>
Date: Wed, 7 Nov 2018 10:16:13 +0100
Subject: right align icons in trace component

---
 packages/dev-tools-pages/ts/components/Trace.tsx | 1 -
 1 file changed, 1 deletion(-)

(limited to 'packages/dev-tools-pages/ts')

diff --git a/packages/dev-tools-pages/ts/components/Trace.tsx b/packages/dev-tools-pages/ts/components/Trace.tsx
index 74aef69b5..355d9b463 100644
--- a/packages/dev-tools-pages/ts/components/Trace.tsx
+++ b/packages/dev-tools-pages/ts/components/Trace.tsx
@@ -200,7 +200,6 @@ const Item = styled.li`
 `;
 
 const Copy = styled.div<{ dark?: boolean; }>`
-    max-width: 20rem;
     margin-right: 5.875rem;
     ${props => props.dark && `
         p {
-- 
cgit v1.2.3


From d32bf15b6945bca5c0ef639769b780f4fd03f9f8 Mon Sep 17 00:00:00 2001
From: August Skare <post@augustskare.no>
Date: Wed, 7 Nov 2018 10:19:33 +0100
Subject: align 0x logo in footer

---
 packages/dev-tools-pages/ts/components/Footer.tsx | 1 +
 1 file changed, 1 insertion(+)

(limited to 'packages/dev-tools-pages/ts')

diff --git a/packages/dev-tools-pages/ts/components/Footer.tsx b/packages/dev-tools-pages/ts/components/Footer.tsx
index c53816354..1a948fe08 100644
--- a/packages/dev-tools-pages/ts/components/Footer.tsx
+++ b/packages/dev-tools-pages/ts/components/Footer.tsx
@@ -81,6 +81,7 @@ const Media = styled.div`
     align-items: center;
 
     ${Icon} {
+        margin-top: .5rem;
         align-self: flex-start;
     }
 `;
-- 
cgit v1.2.3


From fdaffb67e8fc3763c2ba7e30eedd73c8584f50fe Mon Sep 17 00:00:00 2001
From: August Skare <post@augustskare.no>
Date: Wed, 7 Nov 2018 12:39:33 +0100
Subject: styling adjustment in uniq components

---
 packages/dev-tools-pages/ts/components/Intro.tsx | 2 +-
 packages/dev-tools-pages/ts/components/Trace.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

(limited to 'packages/dev-tools-pages/ts')

diff --git a/packages/dev-tools-pages/ts/components/Intro.tsx b/packages/dev-tools-pages/ts/components/Intro.tsx
index 7a30d05c7..838493998 100644
--- a/packages/dev-tools-pages/ts/components/Intro.tsx
+++ b/packages/dev-tools-pages/ts/components/Intro.tsx
@@ -13,7 +13,7 @@ const Main = styled.div`
     justify-content: space-between;
 
     ${media.large`
-        padding: 2.5rem 1.875rem
+        padding: 2.5rem;
     `};
     ${media.medium`
         display: block;     
diff --git a/packages/dev-tools-pages/ts/components/Trace.tsx b/packages/dev-tools-pages/ts/components/Trace.tsx
index 355d9b463..2e00ab9e9 100644
--- a/packages/dev-tools-pages/ts/components/Trace.tsx
+++ b/packages/dev-tools-pages/ts/components/Trace.tsx
@@ -114,7 +114,7 @@ const StyledSection =
     max-width: 90rem;
     margin: 0 auto;
     background: linear-gradient(to right, ${colors.black} 50%, ${props => props.background} 50%);
-    
+    overflow: hidden;
     ${media.large`
         background: none
         padding-top: 0;
-- 
cgit v1.2.3


From c27a2b64efbc264262980d5ca2e7a096341ac89c Mon Sep 17 00:00:00 2001
From: August Skare <post@augustskare.no>
Date: Wed, 7 Nov 2018 12:39:47 +0100
Subject: visual tweaks in code component

---
 packages/dev-tools-pages/ts/components/Code.tsx | 20 +++++++++++++-------
 1 file changed, 13 insertions(+), 7 deletions(-)

(limited to 'packages/dev-tools-pages/ts')

diff --git a/packages/dev-tools-pages/ts/components/Code.tsx b/packages/dev-tools-pages/ts/components/Code.tsx
index 84ce43f84..f04d5aab8 100644
--- a/packages/dev-tools-pages/ts/components/Code.tsx
+++ b/packages/dev-tools-pages/ts/components/Code.tsx
@@ -62,13 +62,12 @@ const Base =
         display: flex;
         padding-top: 1.5rem;
         padding-bottom: 1.5rem;
+        overflow-x: auto;
+        -webkit-overflow-scrolling: touch;
     `
-            : `
-        padding: 1.5rem;
-    `}
+            : ``}
 
-    overflow-x: auto;
-    -webkit-overflow-scrolling: touch;
+    
 `;
 
 const StyledCodeDiff = styled(({ gutterLength, children, ...props }: any) => <code {...props}>{children}</code>)`
@@ -113,6 +112,14 @@ const StyledCodeDiff = styled(({ gutterLength, children, ...props }: any) => <co
 
 const StyledPre = styled.pre`
     margin: 0;
+    ${(props: { diff: boolean }) =>
+        !props.diff
+            ? `
+        padding: 1.5rem;
+        overflow-x: auto;
+        -webkit-overflow-scrolling: touch;
+    `
+            : ``};
 `;
 
 const StyledCopyInput = styled.textarea`
@@ -141,7 +148,6 @@ class Code extends React.Component<CodeProps, CodeState> {
         const code = children as string;
 
         if (language !== undefined) {
-            /* console.log(code); */
             const { default: highlight } = await System.import(/* webpackChunkName: 'highlightjs' */ 'ts/highlight');
 
             this.setState({
@@ -182,7 +188,7 @@ class Code extends React.Component<CodeProps, CodeState> {
         return (
             <Container>
                 <Base language={language} diff={diff} light={light}>
-                    <StyledPre>
+                    <StyledPre diff={diff}>
                         <Code {...codeProps} dangerouslySetInnerHTML={hlCode ? { __html: this.state.hlCode } : null}>
                             {hlCode === undefined ? children : null}
                         </Code>
-- 
cgit v1.2.3


From d91c41b29c5918752306544ec1875d4e68a975fa Mon Sep 17 00:00:00 2001
From: August Skare <post@augustskare.no>
Date: Wed, 7 Nov 2018 12:45:25 +0100
Subject: fix alignment on list bullest

---
 packages/dev-tools-pages/ts/components/List.tsx | 17 +++++++++--------
 1 file changed, 9 insertions(+), 8 deletions(-)

(limited to 'packages/dev-tools-pages/ts')

diff --git a/packages/dev-tools-pages/ts/components/List.tsx b/packages/dev-tools-pages/ts/components/List.tsx
index b9bc4ab24..5bf6a9a6b 100644
--- a/packages/dev-tools-pages/ts/components/List.tsx
+++ b/packages/dev-tools-pages/ts/components/List.tsx
@@ -5,24 +5,25 @@ import { media } from '../variables';
 const StyledList = styled.ul`
     list-style-type: none;
     margin: 0;
-    padding-inline-start: 0rem;
+    padding: 0;
     position: relative;
 `;
 
 const StyledItem = styled.li`
     position: relative;
-    padding-left: 26px;  
+    padding-left: 1.625rem;
 
     :before {
         content: '';
-        position: absolute;
-        left: 0;
         border: 1px solid black;
-        width: 0.6875rem;
-        height: 0.6875rem;
+        width: 0.625rem;
+        height: 0.625rem;
         display: inline-block;
-        transform: rotate(45deg) translateY(-50%);
-        top: 12px;
+        position: absolute;
+        margin-top: 2px;
+        top: 0.3125rem;
+        left: 0;
+        transform: rotate(45deg);
     }
     :not(:last-child) {
         margin-bottom: 0.5625rem;
-- 
cgit v1.2.3


From 31f096248ddb61599fbabbfc905ea7717de1283a Mon Sep 17 00:00:00 2001
From: August Skare <post@augustskare.no>
Date: Wed, 7 Nov 2018 13:01:53 +0100
Subject: lower deboune on animation resize

---
 packages/dev-tools-pages/ts/components/Animations/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'packages/dev-tools-pages/ts')

diff --git a/packages/dev-tools-pages/ts/components/Animations/index.tsx b/packages/dev-tools-pages/ts/components/Animations/index.tsx
index bf35c0784..f750d4d94 100644
--- a/packages/dev-tools-pages/ts/components/Animations/index.tsx
+++ b/packages/dev-tools-pages/ts/components/Animations/index.tsx
@@ -40,7 +40,7 @@ class Animation extends React.PureComponent<AnimationProps, AnimationState> {
 
     handleResize() {
         clearTimeout(this.timeout);
-        this.timeout = setTimeout(this.updateAnimationSize, 200);
+        this.timeout = setTimeout(this.updateAnimationSize, 50);
     }
 
     updateAnimationSize() {
-- 
cgit v1.2.3


From 52b49fee242dac5f5780838c4b5b14b5c873df92 Mon Sep 17 00:00:00 2001
From: August Skare <post@augustskare.no>
Date: Wed, 7 Nov 2018 13:08:08 +0100
Subject: better positioning of hero animation

---
 packages/dev-tools-pages/ts/components/Animations/index.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

(limited to 'packages/dev-tools-pages/ts')

diff --git a/packages/dev-tools-pages/ts/components/Animations/index.tsx b/packages/dev-tools-pages/ts/components/Animations/index.tsx
index f750d4d94..3db501dc1 100644
--- a/packages/dev-tools-pages/ts/components/Animations/index.tsx
+++ b/packages/dev-tools-pages/ts/components/Animations/index.tsx
@@ -47,7 +47,7 @@ class Animation extends React.PureComponent<AnimationProps, AnimationState> {
         const windowWidth = window.innerWidth;
         let width = undefined;
         let height = undefined;
-        if (windowWidth < 1200) {
+        if (windowWidth <= 1000) {
             const maxWidth = windowWidth + 250;
             const ratio = maxWidth / this.props.width;
 
@@ -89,9 +89,9 @@ const Container = styled.div`
     left: 0;
     z-index: -1;
     overflow: hidden;
-    ${media.medium`
-        top: auto;
-        bottom: -3rem;
+    ${media.large`
+        top: 100%;
+        transform: translateY(-50%);
     `};
 `;
 
-- 
cgit v1.2.3


From 54bd7df900316504e4403bc94cffd92930a6c763 Mon Sep 17 00:00:00 2001
From: August Skare <post@augustskare.no>
Date: Fri, 16 Nov 2018 11:05:30 +0100
Subject: fix linting + code syntax for statless components

---
 .../ts/components/Animations/Compiler/index.tsx    |  11 +-
 .../ts/components/Animations/Cov/index.tsx         |  11 +-
 .../ts/components/Animations/Profiler/index.tsx    |  11 +-
 .../ts/components/Animations/Trace/index.tsx       |  11 +-
 .../ts/components/Animations/index.tsx             |  81 ++++----
 packages/dev-tools-pages/ts/components/Base.tsx    |  33 ++--
 .../dev-tools-pages/ts/components/Breakout.tsx     |   2 +-
 packages/dev-tools-pages/ts/components/Button.tsx  |  16 +-
 packages/dev-tools-pages/ts/components/Code.tsx    | 122 ++++++------
 .../dev-tools-pages/ts/components/Compiler.tsx     |  45 +++--
 .../dev-tools-pages/ts/components/Container.tsx    |   4 +-
 packages/dev-tools-pages/ts/components/Content.tsx |  16 +-
 .../dev-tools-pages/ts/components/ContentBlock.tsx |  15 +-
 packages/dev-tools-pages/ts/components/Footer.tsx  |  90 +++++----
 packages/dev-tools-pages/ts/components/Header.tsx  |  46 ++---
 packages/dev-tools-pages/ts/components/Hero.tsx    |  27 ++-
 .../dev-tools-pages/ts/components/InlineCode.tsx   |   9 +-
 packages/dev-tools-pages/ts/components/Intro.tsx   |  48 +++--
 packages/dev-tools-pages/ts/components/List.tsx    |  27 ++-
 packages/dev-tools-pages/ts/components/Tabs.tsx    |  51 +++---
 packages/dev-tools-pages/ts/components/Trace.tsx   | 204 +++++++++++----------
 .../dev-tools-pages/ts/components/Typography.tsx   |   1 +
 .../dev-tools-pages/ts/components/withContext.tsx  |  23 ---
 packages/dev-tools-pages/ts/context/compiler.tsx   |   2 +-
 packages/dev-tools-pages/ts/context/cov.tsx        |   2 +-
 packages/dev-tools-pages/ts/context/index.tsx      |  11 +-
 packages/dev-tools-pages/ts/context/profiler.tsx   |   2 +-
 packages/dev-tools-pages/ts/context/trace.tsx      |   2 +-
 packages/dev-tools-pages/ts/globalStyles.tsx       |  21 +--
 packages/dev-tools-pages/ts/globals.d.ts           |   4 +-
 packages/dev-tools-pages/ts/highlight.tsx          |  46 ++---
 packages/dev-tools-pages/ts/pages/Compiler.tsx     | 177 +++++++++---------
 packages/dev-tools-pages/ts/pages/Cov.tsx          | 186 +++++++++----------
 packages/dev-tools-pages/ts/pages/Profiler.tsx     | 181 +++++++++---------
 packages/dev-tools-pages/ts/pages/Trace.tsx        | 148 +++++++--------
 packages/dev-tools-pages/ts/variables.tsx          |   1 -
 36 files changed, 844 insertions(+), 843 deletions(-)
 delete mode 100644 packages/dev-tools-pages/ts/components/withContext.tsx

(limited to 'packages/dev-tools-pages/ts')

diff --git a/packages/dev-tools-pages/ts/components/Animations/Compiler/index.tsx b/packages/dev-tools-pages/ts/components/Animations/Compiler/index.tsx
index dbd8a3799..db93ff8a4 100644
--- a/packages/dev-tools-pages/ts/components/Animations/Compiler/index.tsx
+++ b/packages/dev-tools-pages/ts/components/Animations/Compiler/index.tsx
@@ -1,10 +1,11 @@
 import * as React from 'react';
 
-import Animation from '../index';
+import { BaseAnimation } from '../index';
+
 import * as animationData from './data.json';
 
-function AnimationCompiler() {
-    return <Animation animationData={animationData} width={2150} height={700} />;
-}
+const CompilerAnimation: React.StatelessComponent<{}> = () => (
+    <BaseAnimation animationData={animationData} width={2150} height={700} />
+);
 
-export default AnimationCompiler;
+export { CompilerAnimation as Animation };
diff --git a/packages/dev-tools-pages/ts/components/Animations/Cov/index.tsx b/packages/dev-tools-pages/ts/components/Animations/Cov/index.tsx
index c14c64ab9..445824717 100644
--- a/packages/dev-tools-pages/ts/components/Animations/Cov/index.tsx
+++ b/packages/dev-tools-pages/ts/components/Animations/Cov/index.tsx
@@ -1,10 +1,11 @@
 import * as React from 'react';
 
-import Animation from '../index';
+import { BaseAnimation } from '../index';
+
 import * as animationData from './data.json';
 
-function AnimationCov() {
-    return <Animation animationData={animationData} width={1981} height={660} />;
-}
+const AnimationCov: React.StatelessComponent<{}> = () => (
+    <BaseAnimation animationData={animationData} width={1981} height={660} />
+);
 
-export default AnimationCov;
+export { AnimationCov as Animation };
diff --git a/packages/dev-tools-pages/ts/components/Animations/Profiler/index.tsx b/packages/dev-tools-pages/ts/components/Animations/Profiler/index.tsx
index e767a587f..73a4e9ad6 100644
--- a/packages/dev-tools-pages/ts/components/Animations/Profiler/index.tsx
+++ b/packages/dev-tools-pages/ts/components/Animations/Profiler/index.tsx
@@ -1,10 +1,11 @@
 import * as React from 'react';
 
-import Animation from '../index';
+import { BaseAnimation } from '../index';
+
 import * as animationData from './data.json';
 
-function AnimationProfiler() {
-    return <Animation animationData={animationData} width={1985} height={657} />;
-}
+const AnimationProfiler: React.StatelessComponent<{}> = () => (
+    <BaseAnimation animationData={animationData} width={1985} height={657} />
+);
 
-export default AnimationProfiler;
+export { AnimationProfiler as Animation };
diff --git a/packages/dev-tools-pages/ts/components/Animations/Trace/index.tsx b/packages/dev-tools-pages/ts/components/Animations/Trace/index.tsx
index fa421a3bf..10a78ccb7 100644
--- a/packages/dev-tools-pages/ts/components/Animations/Trace/index.tsx
+++ b/packages/dev-tools-pages/ts/components/Animations/Trace/index.tsx
@@ -1,10 +1,11 @@
 import * as React from 'react';
 
-import Animation from '../index';
+import { BaseAnimation } from '../index';
+
 import * as animationData from './data.json';
 
-function AnimationTrace() {
-    return <Animation animationData={animationData} width={2241} height={610} />;
-}
+const AnimationTrace: React.StatelessComponent<{}> = () => (
+    <BaseAnimation animationData={animationData} width={2241} height={610} />
+);
 
-export default AnimationTrace;
+export { AnimationTrace as Animation };
diff --git a/packages/dev-tools-pages/ts/components/Animations/index.tsx b/packages/dev-tools-pages/ts/components/Animations/index.tsx
index 3db501dc1..95af4448c 100644
--- a/packages/dev-tools-pages/ts/components/Animations/index.tsx
+++ b/packages/dev-tools-pages/ts/components/Animations/index.tsx
@@ -11,55 +11,28 @@ interface AnimationProps {
 }
 
 interface AnimationState {
-    width?: number;
-    height?: number;
+    width?: number | undefined;
+    height?: number | undefined;
 }
 
-class Animation extends React.PureComponent<AnimationProps, AnimationState> {
-    timeout = null as any;
-    constructor(props: AnimationProps) {
-        super(props);
+class BaseAnimation extends React.PureComponent<AnimationProps, AnimationState> {
+    public state: AnimationState = {
+        height: undefined,
+        width: undefined,
+    };
+    private _timeout = null as any;
 
-        this.state = {
-            height: undefined,
-            width: undefined,
-        };
-
-        this.handleResize = this.handleResize.bind(this);
-        this.updateAnimationSize = this.updateAnimationSize.bind(this);
-    }
-
-    componentDidMount() {
-        this.updateAnimationSize();
-        window.addEventListener('resize', this.handleResize);
-    }
-
-    componentWillUnmount() {
-        window.removeEventListener('resize', this.handleResize);
+    public componentDidMount(): void {
+        this._updateAnimationSize();
+        window.addEventListener('resize', this._handleResize);
     }
 
-    handleResize() {
-        clearTimeout(this.timeout);
-        this.timeout = setTimeout(this.updateAnimationSize, 50);
+    public componentWillUnmount(): void {
+        window.removeEventListener('resize', this._handleResize);
     }
 
-    updateAnimationSize() {
-        const windowWidth = window.innerWidth;
-        let width = undefined;
-        let height = undefined;
-        if (windowWidth <= 1000) {
-            const maxWidth = windowWidth + 250;
-            const ratio = maxWidth / this.props.width;
-
-            height = Math.round(this.props.height * ratio);
-            width = Math.round(this.props.width * ratio);
-        }
-
-        this.setState({ width, height });
-    }
-
-    render() {
-        let { animationData } = this.props;
+    public render(): React.ReactNode {
+        const { animationData } = this.props;
         const height = this.state.height || this.props.height;
         const width = this.state.width || this.props.width;
 
@@ -72,13 +45,33 @@ class Animation extends React.PureComponent<AnimationProps, AnimationState> {
                         options={{
                             loop: true,
                             autoplay: true,
-                            animationData: animationData,
+                            animationData,
                         }}
                     />
                 </InnerContainer>
             </Container>
         );
     }
+
+    private readonly _handleResize = () => {
+        clearTimeout(this._timeout);
+        this._timeout = setTimeout(this._updateAnimationSize, 50);
+    };
+
+    private readonly _updateAnimationSize = () => {
+        const windowWidth = window.innerWidth;
+        let width;
+        let height;
+        if (windowWidth <= 1000) {
+            const maxWidth = windowWidth + 250;
+            const ratio = maxWidth / this.props.width;
+
+            height = Math.round(this.props.height * ratio);
+            width = Math.round(this.props.width * ratio);
+        }
+
+        this.setState({ width, height });
+    };
 }
 
 const Container = styled.div`
@@ -102,4 +95,4 @@ const InnerContainer = styled.div`
     transform: translateX(-50%);
 `;
 
-export default Animation;
+export { BaseAnimation };
diff --git a/packages/dev-tools-pages/ts/components/Base.tsx b/packages/dev-tools-pages/ts/components/Base.tsx
index 54340c9de..a1b066d85 100644
--- a/packages/dev-tools-pages/ts/components/Base.tsx
+++ b/packages/dev-tools-pages/ts/components/Base.tsx
@@ -1,24 +1,27 @@
 import * as React from 'react';
+import { ThemeProvider } from 'styled-components';
 
-import ThemeContext from 'ts/context';
-import GlobalStyles from 'ts/globalStyles';
-import Header from 'ts/components/Header';
-import Footer from 'ts/components/Footer';
+import { Footer } from 'ts/components/Footer';
+import { Header } from 'ts/components/Header';
+import { ThemeContext } from 'ts/context';
+import { GlobalStyles } from 'ts/globalStyles';
 
 interface BaseProps {
     context: any;
     children: React.ReactNode;
 }
 
-function Base(props: BaseProps) {
-    return (
-        <ThemeContext.Provider value={props.context}>
-            <GlobalStyles />
-            <Header />
-            {props.children}
-            <Footer />
-        </ThemeContext.Provider>
-    );
-}
+const Base: React.StatelessComponent<BaseProps> = props => (
+    <ThemeContext.Provider value={props.context}>
+        <ThemeProvider theme={props.context}>
+            <React.Fragment>
+                <GlobalStyles />
+                <Header />
+                {props.children}
+                <Footer />
+            </React.Fragment>
+        </ThemeProvider>
+    </ThemeContext.Provider>
+);
 
-export default Base;
+export { Base };
diff --git a/packages/dev-tools-pages/ts/components/Breakout.tsx b/packages/dev-tools-pages/ts/components/Breakout.tsx
index 39998e9c7..505d8de41 100644
--- a/packages/dev-tools-pages/ts/components/Breakout.tsx
+++ b/packages/dev-tools-pages/ts/components/Breakout.tsx
@@ -9,4 +9,4 @@ const Breakout = styled.div`
   `};
 `;
 
-export default Breakout;
+export { Breakout };
diff --git a/packages/dev-tools-pages/ts/components/Button.tsx b/packages/dev-tools-pages/ts/components/Button.tsx
index 2a968af28..d3b36ebfd 100644
--- a/packages/dev-tools-pages/ts/components/Button.tsx
+++ b/packages/dev-tools-pages/ts/components/Button.tsx
@@ -1,10 +1,8 @@
 import styled from 'styled-components';
-import { colors } from '../variables';
 
-import { media } from 'ts/variables';
-import { withContext, Props } from './withContext';
+import { colors, media } from 'ts/variables';
 
-interface ButtonProps extends Props {
+interface ButtonProps {
     large?: boolean;
 }
 
@@ -17,7 +15,7 @@ const Button =
   font-weight: 500;
   white-space: nowrap;
   vertical-align: middle;
-  background-color: ${props => props.colors.secondary};
+  background-color: ${props => props.theme.colors.secondary};
   color: ${colors.black};
   border: 0;
   border-radius: 5rem;
@@ -37,10 +35,10 @@ const Button =
   `}
 
   :hover, :focus {
-    background-color: ${props => props.colors.secondary_alt};
+    background-color: ${props => props.theme.colors.secondary_alt};
     outline: 0;
-  } 
-  
+  }
+
   ${media.small`
   font-size: .875rem;
   padding: .5625rem 1.25rem;
@@ -54,4 +52,4 @@ const Button =
     `}
 `;
 
-export default withContext(Button);
+export { Button };
diff --git a/packages/dev-tools-pages/ts/components/Code.tsx b/packages/dev-tools-pages/ts/components/Code.tsx
index f04d5aab8..da2bb83e6 100644
--- a/packages/dev-tools-pages/ts/components/Code.tsx
+++ b/packages/dev-tools-pages/ts/components/Code.tsx
@@ -1,10 +1,11 @@
 import * as React from 'react';
 import styled from 'styled-components';
 
-import { colors, media } from 'ts/variables';
-import BaseButton from './Button';
+import { colors } from 'ts/variables';
 
-const touch = Boolean(
+import { Button as BaseButton } from './Button';
+
+const isTouch = Boolean(
     'ontouchstart' in window ||
         (window as any).navigator.maxTouchPoints > 0 ||
         (window as any).navigator.msMaxTouchPoints > 0,
@@ -13,12 +14,12 @@ const touch = Boolean(
 interface CodeProps {
     children: React.ReactNode;
     language?: string;
-    light?: boolean;
-    diff?: boolean;
-    gutter?: Array<number>;
+    isLight?: boolean;
+    isDiff?: boolean;
+    gutter?: Array<number | undefined>;
     gutterLength?: number;
-    copy?: boolean;
-    etc?: boolean;
+    canCopy?: boolean;
+    isEtc?: boolean;
 }
 
 interface CodeState {
@@ -27,7 +28,7 @@ interface CodeState {
 }
 
 const Button = styled(BaseButton)`
-    opacity: ${touch ? '1' : '0'};
+    opacity: ${isTouch ? '1' : '0'};
     position: absolute;
     top: 1rem;
     right: 1rem;
@@ -51,12 +52,12 @@ const Base =
     font-size: .875rem;
     color: ${props => (props.language === undefined ? colors.white : 'inherit')};
     background-color: ${props =>
-        props.light ? 'rgba(255,255,255,.15)' : props.language === undefined ? colors.black : '#F1F4F5'};
+        props.isLight ? 'rgba(255,255,255,.15)' : props.language === undefined ? colors.black : '#F1F4F5'};
     white-space: ${props => (props.language === undefined ? 'nowrap' : '')};
     position: relative;
 
     ${props =>
-        props.diff
+        props.isDiff
             ? `
         background-color: #E9ECED;
         display: flex;
@@ -66,8 +67,6 @@ const Base =
         -webkit-overflow-scrolling: touch;
     `
             : ``}
-
-    
 `;
 
 const StyledCodeDiff = styled(({ gutterLength, children, ...props }: any) => <code {...props}>{children}</code>)`
@@ -112,8 +111,8 @@ const StyledCodeDiff = styled(({ gutterLength, children, ...props }: any) => <co
 
 const StyledPre = styled.pre`
     margin: 0;
-    ${(props: { diff: boolean }) =>
-        !props.diff
+    ${(props: { isDiff: boolean }) =>
+        !props.isDiff
             ? `
         padding: 1.5rem;
         overflow-x: auto;
@@ -134,37 +133,78 @@ const StyledCopyInput = styled.textarea`
 const CopyInput = StyledCopyInput as any;
 
 class Code extends React.Component<CodeProps, CodeState> {
-    code = React.createRef<HTMLTextAreaElement>();
-
-    state: CodeState = {};
+    public state: CodeState = {};
+    private readonly _code = React.createRef<HTMLTextAreaElement>();
 
     constructor(props: CodeProps) {
         super(props);
     }
 
-    async componentDidMount() {
-        const { language, children, diff, gutter, etc } = this.props;
+    public componentDidMount(): void {
+        /*
+        * _onMountAsync is only setting state, so no point in handling the promise
+        */
+        /* tslint:disable:no-floating-promises */
+        this._onMountAsync();
+        /* tslint:enable:no-floating-promises */
+    }
+
+    public render(): React.ReactNode {
+        const { language, isLight, isDiff, children, gutterLength, canCopy } = this.props;
+        const { hlCode } = this.state;
+
+        let CodeComponent = 'code';
+        let codeProps = {};
+        if (isDiff) {
+            codeProps = { gutterLength };
+            CodeComponent = StyledCodeDiff as any;
+        }
+
+        return (
+            <Container>
+                <Base language={language} isDiff={isDiff} isLight={isLight}>
+                    <StyledPre isDiff={isDiff}>
+                        <CodeComponent
+                            {...codeProps}
+                            dangerouslySetInnerHTML={hlCode ? { __html: this.state.hlCode } : null}
+                        >
+                            {hlCode === undefined ? children : null}
+                        </CodeComponent>
+                    </StyledPre>
+                    {!('clipboard' in navigator) ? (
+                        <CopyInput readOnly={true} aria-hidden="true" ref={this._code} value={children} />
+                    ) : null}
+                </Base>
+                {navigator.userAgent !== 'ReactSnap' && canCopy ? (
+                    <Button onClick={this._handleCopyAsync}>{this.state.copied ? 'Copied' : 'Copy'}</Button>
+                ) : null}
+            </Container>
+        );
+    }
+
+    private async _onMountAsync(): Promise<void> {
+        const { language, children, isDiff, gutter, isEtc } = this.props;
 
         const code = children as string;
 
         if (language !== undefined) {
-            const { default: highlight } = await System.import(/* webpackChunkName: 'highlightjs' */ 'ts/highlight');
+            const { highlight } = await System.import(/* webpackChunkName: 'highlightjs' */ 'ts/highlight');
 
             this.setState({
-                hlCode: highlight({ language, code, diff, gutter, etc }),
+                hlCode: highlight({ language, code, isDiff, gutter, isEtc }),
             });
         }
     }
 
-    handleCopy = async () => {
+    private readonly _handleCopyAsync = async () => {
         try {
             if ('clipboard' in navigator) {
                 await (navigator as any).clipboard.writeText(this.props.children);
                 this.setState({ copied: true });
             } else {
                 const lastActive = document.activeElement as HTMLElement;
-                this.code.current.focus();
-                this.code.current.select();
+                this._code.current.focus();
+                this._code.current.select();
                 document.execCommand('copy');
                 lastActive.focus();
                 this.setState({ copied: true });
@@ -173,36 +213,6 @@ class Code extends React.Component<CodeProps, CodeState> {
             this.setState({ copied: false });
         }
     };
-
-    render() {
-        const { language, light, diff, children, gutterLength, copy } = this.props;
-        const { hlCode } = this.state;
-
-        let Code = 'code';
-        let codeProps = {};
-        if (diff) {
-            codeProps = { gutterLength };
-            Code = StyledCodeDiff as any;
-        }
-
-        return (
-            <Container>
-                <Base language={language} diff={diff} light={light}>
-                    <StyledPre diff={diff}>
-                        <Code {...codeProps} dangerouslySetInnerHTML={hlCode ? { __html: this.state.hlCode } : null}>
-                            {hlCode === undefined ? children : null}
-                        </Code>
-                    </StyledPre>
-                    {!('clipboard' in navigator) ? (
-                        <CopyInput readOnly aria-hidden="true" ref={this.code} value={children} />
-                    ) : null}
-                </Base>
-                {navigator.userAgent !== 'ReactSnap' && copy ? (
-                    <Button onClick={this.handleCopy}>{this.state.copied ? 'Copied' : 'Copy'}</Button>
-                ) : null}
-            </Container>
-        );
-    }
 }
 
-export default Code;
+export { Code };
diff --git a/packages/dev-tools-pages/ts/components/Compiler.tsx b/packages/dev-tools-pages/ts/components/Compiler.tsx
index 37796e6cc..f16365fd0 100644
--- a/packages/dev-tools-pages/ts/components/Compiler.tsx
+++ b/packages/dev-tools-pages/ts/components/Compiler.tsx
@@ -1,10 +1,11 @@
 import * as React from 'react';
 import styled from 'styled-components';
-import { media, colors } from '../variables';
 
-import Container from './Container';
-import InlineCode from './InlineCode';
-import Breakout from './Breakout';
+import { colors, media } from 'ts/variables';
+
+import { Breakout } from './Breakout';
+import { Container } from './Container';
+import { InlineCode } from './InlineCode';
 
 const Cards = styled.dl`
     column-count: 3;
@@ -12,7 +13,7 @@ const Cards = styled.dl`
 
     ${media.medium`
         column-count: 1;
-    `}: ;
+    `};
 `;
 
 const Card = styled.div`
@@ -46,7 +47,7 @@ const cards = [
         title: 'A Project-centric',
         body: (
             <React.Fragment>
-                Compiles an entire project instead of only individual <InlineCode alt>.sol</InlineCode> files.
+                Compiles an entire project instead of only individual <InlineCode isAlt={true}>.sol</InlineCode> files.
             </React.Fragment>
         ),
     },
@@ -70,21 +71,19 @@ const cards = [
     },
 ];
 
-function Compiler() {
-    return (
-        <Container>
-            <Breakout>
-                <Cards>
-                    {cards.map(card => (
-                        <Card key={card.title.split(' ').join('-')}>
-                            <Dt>{card.title}</Dt>
-                            <Dd>{card.body}</Dd>
-                        </Card>
-                    ))}
-                </Cards>
-            </Breakout>
-        </Container>
-    );
-}
+const Compiler: React.StatelessComponent<{}> = () => (
+    <Container>
+        <Breakout>
+            <Cards>
+                {cards.map(card => (
+                    <Card key={card.title.split(' ').join('-')}>
+                        <Dt>{card.title}</Dt>
+                        <Dd>{card.body}</Dd>
+                    </Card>
+                ))}
+            </Cards>
+        </Breakout>
+    </Container>
+);
 
-export default Compiler;
+export { Compiler };
diff --git a/packages/dev-tools-pages/ts/components/Container.tsx b/packages/dev-tools-pages/ts/components/Container.tsx
index de2de383b..1b9212ed2 100644
--- a/packages/dev-tools-pages/ts/components/Container.tsx
+++ b/packages/dev-tools-pages/ts/components/Container.tsx
@@ -1,7 +1,5 @@
 import styled from 'styled-components';
 
-import { media } from 'ts/variables';
-
 interface ContainerProps {
     wide?: boolean;
 }
@@ -15,4 +13,4 @@ const Container =
     width: ${props => (props.wide ? '100%' : 'calc(100% - 5rem)')};
 `;
 
-export default Container;
+export { Container };
diff --git a/packages/dev-tools-pages/ts/components/Content.tsx b/packages/dev-tools-pages/ts/components/Content.tsx
index 3dcf50660..328ef0778 100644
--- a/packages/dev-tools-pages/ts/components/Content.tsx
+++ b/packages/dev-tools-pages/ts/components/Content.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import styled from 'styled-components';
 
-import Container from './Container';
+import { Container } from './Container';
 
 const StyledMain =
     styled.div <
@@ -26,12 +26,10 @@ interface MainProps {
     children: React.ReactNode;
 }
 
-function Main(props: MainProps) {
-    return (
-        <StyledMain dark={props.dark}>
-            <Container>{props.children}</Container>
-        </StyledMain>
-    );
-}
+const Content: React.StatelessComponent<MainProps> = props => (
+    <StyledMain dark={props.dark}>
+        <Container>{props.children}</Container>
+    </StyledMain>
+);
 
-export default Main;
+export { Content };
diff --git a/packages/dev-tools-pages/ts/components/ContentBlock.tsx b/packages/dev-tools-pages/ts/components/ContentBlock.tsx
index c54930902..66e0331ab 100644
--- a/packages/dev-tools-pages/ts/components/ContentBlock.tsx
+++ b/packages/dev-tools-pages/ts/components/ContentBlock.tsx
@@ -1,10 +1,11 @@
 import * as React from 'react';
 import styled from 'styled-components';
 
-import { withContext, Props } from './withContext';
-import { Beta, Alpha } from './Typography';
+import { ContextInterface } from 'ts/context';
 import { media } from 'ts/variables';
 
+import { Alpha, Beta } from './Typography';
+
 const Base = styled.div`
     display: flex;
     align-items: flex-start;
@@ -52,13 +53,13 @@ const StyledTitle = styled(Alpha)`
     `};
 `;
 
-interface ContentBlockProps extends Props {
+interface ContentBlockProps extends ContextInterface {
     title: string;
     main?: boolean;
     children?: React.ReactNode;
 }
 
-function ContentBlock(props: ContentBlockProps) {
+const ContentBlock: React.StatelessComponent<ContentBlockProps> = props => {
     const children = React.Children.map(props.children, child => {
         return <Item>{child}</Item>;
     });
@@ -67,10 +68,10 @@ function ContentBlock(props: ContentBlockProps) {
 
     return (
         <Base>
-            <Title color={props.colors.type}>{props.title}</Title>
+            <Title color={props.colors}>{props.title}</Title>
             {children ? <Content>{children}</Content> : null}
         </Base>
     );
-}
+};
 
-export default withContext(ContentBlock);
+export { ContentBlock };
diff --git a/packages/dev-tools-pages/ts/components/Footer.tsx b/packages/dev-tools-pages/ts/components/Footer.tsx
index 1a948fe08..d7ed6309a 100644
--- a/packages/dev-tools-pages/ts/components/Footer.tsx
+++ b/packages/dev-tools-pages/ts/components/Footer.tsx
@@ -1,54 +1,49 @@
 import * as React from 'react';
 import styled from 'styled-components';
 
-import { Alpha, Beta } from './Typography';
-import { withContext, Props } from './withContext';
-import Container from './Container';
-import { media } from '../variables';
-
+import { context as compiler } from 'ts/context/compiler';
+import { context as cov } from 'ts/context/cov';
+import { context as profiler } from 'ts/context/profiler';
+import { context as trace } from 'ts/context/trace';
 import MainIcon from 'ts/icons/logos/0x.svg';
-import compiler from 'ts/context/compiler';
-import cov from 'ts/context/cov';
-import profiler from 'ts/context/profiler';
-import trace from 'ts/context/trace';
+import { media } from 'ts/variables';
+
+import { Container } from './Container';
+import { Alpha, Beta } from './Typography';
 
 const tools = [trace, cov, compiler, profiler];
 
-function Footer(props: Props) {
-    const { colors } = props;
-
-    return (
-        <StyledFooter background={colors.secondary}>
-            <Container>
-                <Top>
-                    <Alpha>Other tools by 0x</Alpha>
-                    <List>
-                        {tools.map(({ title, subtitle, icon }) => (
-                            <ListItem key={title}>
-                                <ListLink hoverColor={colors.dark} href="#">
-                                    <Icon as={icon} />
-                                    <div>
-                                        <Beta>{title}</Beta>
-                                        <p>{subtitle}</p>
-                                    </div>
-                                </ListLink>
-                            </ListItem>
-                        ))}
-                    </List>
-                </Top>
-                <Media as="aside">
-                    <Icon as={MainIcon} />
-                    <Small>
+const Footer: React.StatelessComponent<{}> = () => (
+    <StyledFooter>
+        <Container>
+            <Top>
+                <Alpha>Other tools by 0x</Alpha>
+                <List>
+                    {tools.map(({ title, subtitle, icon }) => (
+                        <ListItem key={title}>
+                            <ListLink href="#">
+                                <Icon as={icon} />
+                                <div>
+                                    <Beta>{title}</Beta>
+                                    <p>{subtitle}</p>
+                                </div>
+                            </ListLink>
+                        </ListItem>
+                    ))}
+                </List>
+            </Top>
+            <Media as="aside">
+                <Icon as={MainIcon} />
+                <Small>
                     0x is an open, permissionless protocol allowing for tokens to be traded on the Ethereum blockchain.
-                    </Small>
-                </Media>
-            </Container>
-        </StyledFooter>
-    );
-}
+                </Small>
+            </Media>
+        </Container>
+    </StyledFooter>
+);
 
 const StyledFooter = styled.footer`
-    background-color: ${(props: { background: string }) => props.background};
+    background-color: ${props => props.theme.colors.secondary};
     padding-top: 6.25rem;
     padding-bottom: 5.4375rem;
 
@@ -81,7 +76,7 @@ const Media = styled.div`
     align-items: center;
 
     ${Icon} {
-        margin-top: .5rem;
+        margin-top: 0.5rem;
         align-self: flex-start;
     }
 `;
@@ -95,7 +90,7 @@ const List = styled.ul`
     flex-wrap: wrap;
 
     ${media.medium`
-        width: 100%; 
+        width: 100%;
     `};
 
     ${media.small`
@@ -121,11 +116,14 @@ const ListItem = styled.li`
     `};
 `;
 
-const ListLink = styled.a<{hoverColor: string;}>`
+const ListLink =
+    styled.a <
+    { hoverColor: string } >
+    `
     display: flex;
     align-items: center;
     :hover {
-        color: ${props => props.hoverColor};
+        color: ${props => props.theme.colors.dark};
     }
 `;
 
@@ -134,4 +132,4 @@ const Small = styled.small`
     max-width: 37.5rem;
 `;
 
-export default withContext(Footer);
+export { Footer };
diff --git a/packages/dev-tools-pages/ts/components/Header.tsx b/packages/dev-tools-pages/ts/components/Header.tsx
index b561a5d91..8c7154623 100644
--- a/packages/dev-tools-pages/ts/components/Header.tsx
+++ b/packages/dev-tools-pages/ts/components/Header.tsx
@@ -1,30 +1,30 @@
 import * as React from 'react';
 import styled from 'styled-components';
 
-import { withContext, Props } from './withContext';
-import Container from './Container';
-import { Small } from './Typography';
-
-import { media } from '../variables';
+import { ContextInterface, ThemeContext } from 'ts/context';
+import { media } from 'ts/variables';
 
-function Header(props: Props) {
-    const { icon, title, colors } = props;
+import { Container } from './Container';
+import { Small } from './Typography';
 
-    return (
-        <StyledHeader>
-            <Container>
-                <LogoMark>
-                    <Logo as={icon} color={colors.main} />
-                    <Title>{title}</Title>
-                </LogoMark>
+const Header: React.StatelessComponent<{}> = () => (
+    <ThemeContext.Consumer>
+        {({ icon, title, colors }: ContextInterface) => (
+            <StyledHeader>
+                <Container>
+                    <LogoMark>
+                        <Logo as={icon} color={colors.main} />
+                        <Title>{title}</Title>
+                    </LogoMark>
 
-                <Link as="a" href="https://0xproject.com/">
-                    Built by 0x
-                </Link>
-            </Container>
-        </StyledHeader>
-    );
-}
+                    <Link as="a" href="https://0xproject.com/">
+                        Built by 0x
+                    </Link>
+                </Container>
+            </StyledHeader>
+        )}
+    </ThemeContext.Consumer>
+);
 
 const StyledHeader = styled.header`
     padding-top: 3.75rem;
@@ -51,7 +51,7 @@ const LogoMark = styled.div`
 `;
 
 const StyledLogo = styled.div`
-    color: ${props => props.color}
+    color: ${props => props.color};
     width: 1.75rem;
     height: 100%;
 `;
@@ -76,4 +76,4 @@ const StyledLink = styled(Small)`
 const Link = StyledLink as any;
 const Logo = StyledLogo as any;
 
-export default withContext(Header);
+export { Header };
diff --git a/packages/dev-tools-pages/ts/components/Hero.tsx b/packages/dev-tools-pages/ts/components/Hero.tsx
index 8b866c5aa..9db15cb36 100644
--- a/packages/dev-tools-pages/ts/components/Hero.tsx
+++ b/packages/dev-tools-pages/ts/components/Hero.tsx
@@ -1,33 +1,32 @@
 import * as React from 'react';
 import styled from 'styled-components';
 
+import { ContextInterface, ThemeContext } from 'ts/context';
 import { media } from 'ts/variables';
-import { withContext, Props } from './withContext';
-import Button from './Button';
+
+import { Button } from './Button';
 import { Beta } from './Typography';
 
-interface HeroProps extends Props {
+interface HeroProps extends ContextInterface {
     children: React.ReactNode;
 }
 
-function Hero(props: HeroProps) {
-    const { subtitle, tagline } = props;
-
-    return (
-        <React.Fragment>
+const Hero: React.StatelessComponent<HeroProps> = ({ children }) => (
+    <ThemeContext.Consumer>
+        {({ subtitle, tagline }: ContextInterface) => (
             <StyledHero>
                 <HeroContainer>
                     <Subtitle>{subtitle}</Subtitle>
                     <Tagline as="p">{tagline}</Tagline>
-                    <Button as="a" href="#" large>
+                    <Button as="a" href="#" large={true}>
                         Read the Docs
                     </Button>
                 </HeroContainer>
-                {navigator.userAgent !== 'ReactSnap' ? props.children : null}
+                {navigator.userAgent !== 'ReactSnap' ? children : null}
             </StyledHero>
-        </React.Fragment>
-    );
-}
+        )}
+    </ThemeContext.Consumer>
+);
 
 const StyledHero = styled.section`
     text-align: center;
@@ -65,4 +64,4 @@ const Tagline = styled(Beta)`
     `};
 `;
 
-export default withContext(Hero);
+export { Hero };
diff --git a/packages/dev-tools-pages/ts/components/InlineCode.tsx b/packages/dev-tools-pages/ts/components/InlineCode.tsx
index 9f25927cd..00e625d66 100644
--- a/packages/dev-tools-pages/ts/components/InlineCode.tsx
+++ b/packages/dev-tools-pages/ts/components/InlineCode.tsx
@@ -1,15 +1,16 @@
 import * as React from 'react';
 import styled from 'styled-components';
+
 import { colors } from '../variables';
 
 interface InlineCodeProps {
-    alt?: boolean;
+    isAlt?: boolean;
     children: React.ReactNode;
 }
 
-const InlineCode = styled(({ alt, children, ...props }: InlineCodeProps) => <code {...props}>{children}</code>)`
-    background-color: ${props => (props.alt ? '#E5E8E9' : colors.blueGray)};
+const InlineCode = styled(({ isAlt, children, ...props }: InlineCodeProps) => <code {...props}>{children}</code>)`
+    background-color: ${props => (props.isAlt ? '#E5E8E9' : colors.blueGray)};
     padding: 0.3125rem;
 `;
 
-export default InlineCode;
+export { InlineCode };
diff --git a/packages/dev-tools-pages/ts/components/Intro.tsx b/packages/dev-tools-pages/ts/components/Intro.tsx
index 838493998..ecc926e3c 100644
--- a/packages/dev-tools-pages/ts/components/Intro.tsx
+++ b/packages/dev-tools-pages/ts/components/Intro.tsx
@@ -1,10 +1,11 @@
 import * as React from 'react';
 import styled from 'styled-components';
-import { media, colors } from '../variables';
 
+import { colors, media } from 'ts/variables';
+
+import { Breakout } from './Breakout';
+import { Container } from './Container';
 import { Alpha, Lead } from './Typography';
-import Container from './Container';
-import Breakout from './Breakout';
 
 const Main = styled.div`
     background-color: ${colors.lightGray};
@@ -16,7 +17,7 @@ const Main = styled.div`
         padding: 2.5rem;
     `};
     ${media.medium`
-        display: block;     
+        display: block;
     `};
 `;
 
@@ -52,30 +53,23 @@ interface IntroLeadProps {
     children?: React.ReactNode;
 }
 
-function IntroLead(props: IntroLeadProps) {
-    return (
-        <StyledIntroLead as="div">
-            <Title>{props.title}</Title>
-            {props.children}
-        </StyledIntroLead>
-    );
-}
+const IntroLead: React.StatelessComponent<IntroLeadProps> = props => (
+    <StyledIntroLead as="div">
+        <Title>{props.title}</Title>
+        {props.children}
+    </StyledIntroLead>
+);
 
-function IntroAside(props: IntroProps) {
-    return (
-        <Breakout>
-            <StyledIntroAside>{props.children}</StyledIntroAside>
-        </Breakout>
-    );
-}
+const IntroAside: React.StatelessComponent<IntroProps> = props => (
+    <Breakout>
+        <StyledIntroAside>{props.children}</StyledIntroAside>
+    </Breakout>
+);
 
-function Intro(props: IntroProps) {
-    return (
-        <Container wide>
-            <Main>{props.children}</Main>
-        </Container>
-    );
-}
+const Intro: React.StatelessComponent<IntroProps> = props => (
+    <Container wide={true}>
+        <Main>{props.children}</Main>
+    </Container>
+);
 
-export default Intro;
 export { IntroLead, IntroAside, Intro };
diff --git a/packages/dev-tools-pages/ts/components/List.tsx b/packages/dev-tools-pages/ts/components/List.tsx
index 5bf6a9a6b..39e80de13 100644
--- a/packages/dev-tools-pages/ts/components/List.tsx
+++ b/packages/dev-tools-pages/ts/components/List.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import styled from 'styled-components';
-import { media } from '../variables';
+
+import { media } from 'ts/variables';
 
 const StyledList = styled.ul`
     list-style-type: none;
@@ -27,25 +28,23 @@ const StyledItem = styled.li`
     }
     :not(:last-child) {
         margin-bottom: 0.5625rem;
-
-        ${media.small`margin-bottom: 0.375rem`};
+        ${media.small`
+            margin-bottom: 0.375rem
+        `};
     }
 `;
 
 interface ListProps {
-    items?: Array<string>;
+    items?: [];
     children?: React.ReactNode;
 }
 
-function List(props: ListProps) {
-    return (
-        <StyledList>
-            {props.children !== undefined
-                ? props.children
-                : props.items.map((bullet, index) => <StyledItem key={index}>{bullet}</StyledItem>)}
-        </StyledList>
-    );
-}
+const List: React.StatelessComponent<ListProps> = props => (
+    <StyledList>
+        {props.children !== undefined
+            ? props.children
+            : props.items.map((bullet, index) => <StyledItem key={index}>{bullet}</StyledItem>)}
+    </StyledList>
+);
 
-export default List;
 export { List, StyledItem as ListItem };
diff --git a/packages/dev-tools-pages/ts/components/Tabs.tsx b/packages/dev-tools-pages/ts/components/Tabs.tsx
index 36c707b06..c1d5f6b7f 100644
--- a/packages/dev-tools-pages/ts/components/Tabs.tsx
+++ b/packages/dev-tools-pages/ts/components/Tabs.tsx
@@ -1,9 +1,10 @@
 import * as React from 'react';
+import { Tab, TabList, TabPanel, Tabs as ReactTabs } from 'react-tabs';
 import styled from 'styled-components';
+
 import { colors } from 'ts/variables';
-import { Tabs as ReactTabs, Tab, TabList, TabPanel } from 'react-tabs';
-import Breakout from './Breakout';
-import { withContext, Props } from './withContext';
+
+import { Breakout } from './Breakout';
 
 const StyledTabList = styled(TabList)`
     text-transform: uppercase;
@@ -31,7 +32,7 @@ const Root =
     { colors: any } >
     `
     ${StyledTab} {
-        background-color: ${props => props.colors.secondary};
+        background-color: ${props => props.theme.colors.secondary};
         &[aria-selected="true"] {
             background-color: ${colors.gray};
 
@@ -39,44 +40,40 @@ const Root =
 
         &[aria-selected="false"]:focus,
         &[aria-selected="false"]:hover {
-            background-color: ${props => props.colors.secondary_alt};
+            background-color: ${props => props.theme.colors.secondary_alt};
             cursor: pointer;
         }
     }
 `;
 
-interface TabsProps extends Props {
+interface TabsProps {
     children: React.ReactNode;
 }
 
-function Tabs(props: TabsProps) {
-    return (
-        <Breakout>
-            <Root colors={props.colors}>
-                <ReactTabs>
-                    <StyledTabList>
-                        {React.Children.map(props.children, child => {
-                            const { props } = React.cloneElement(child as React.ReactElement<any>);
-                            return <StyledTab>{props.title}</StyledTab>;
-                        })}
-                    </StyledTabList>
+const Tabs: React.StatelessComponent<TabsProps> = props => (
+    <Breakout>
+        <Root>
+            <ReactTabs>
+                <StyledTabList>
+                    {React.Children.map(props.children, child => {
+                        const { title } = React.cloneElement(child as React.ReactElement<any>).props;
+                        return <StyledTab>{title}</StyledTab>;
+                    })}
+                </StyledTabList>
 
-                    {React.Children.map(props.children, child => <TabPanel>{child}</TabPanel>)}
-                </ReactTabs>
-            </Root>
-        </Breakout>
-    );
-}
+                {React.Children.map(props.children, child => <TabPanel>{child}</TabPanel>)}
+            </ReactTabs>
+        </Root>
+    </Breakout>
+);
 
 interface TabBlockProps {
     title: string;
     children: React.ReactNode;
 }
 
-function TabBlock(props: TabBlockProps) {
-    return <React.Fragment>{props.children}</React.Fragment>;
-}
+const TabBlock: React.StatelessComponent<TabBlockProps> = props => <React.Fragment>{props.children}</React.Fragment>;
 
-const ContextTabs = withContext(Tabs);
+const ContextTabs = Tabs;
 
 export { ContextTabs as Tabs, TabBlock };
diff --git a/packages/dev-tools-pages/ts/components/Trace.tsx b/packages/dev-tools-pages/ts/components/Trace.tsx
index 2e00ab9e9..0cee4c1a2 100644
--- a/packages/dev-tools-pages/ts/components/Trace.tsx
+++ b/packages/dev-tools-pages/ts/components/Trace.tsx
@@ -1,72 +1,67 @@
 import * as React from 'react';
 import styled from 'styled-components';
-import { colors, media } from '../variables';
-
-import { withContext, Props } from './withContext';
-import { Alpha, Lead, Gamma } from './Typography';
-import Container from './Container';
-import Code from './Code';
-import Breakout from './Breakout';
 
+import { ContextInterface, ThemeContext } from 'ts/context';
 import ExactLocation from 'ts/icons/exact-location.svg';
 import NoLocation from 'ts/icons/no-location.svg';
 import TimeConsuming from 'ts/icons/time-consuming.svg';
 import TimeSaving from 'ts/icons/time-saving.svg';
-
-interface TraceProps {
-    background?: string;
-}
-
-function Trace(props: Props) {
-    const { colors } = props;
-
-    return (
-        <StyledSection background={colors.secondary}>
-            <Wrapper>
-                <Block>
-                    <Alpha>The Issue</Alpha>
-                    <MainCopy>
-                        Every time an Ethereum transaction fails, it's extremely hard to trace down the troublemaking
-                        line of code. The only hint you'll get is a generic error.
-                    </MainCopy>
-                    <Breakout>
-                        <Code light>Error: VM Exception while processing transaction: rever</Code>
-                    </Breakout>
-
-                    <List>
-                        <Item>
-                            <Copy dark>
-                                <Gamma as="h3">No location</Gamma>
-                                <p>
-                                    The error basically says "anything could have gone wrong here", which keeps you
-                                    completely in the dark about its exact location.
-                                </p>
-                            </Copy>
-                            <Icon as={NoLocation} />
-                        </Item>
-
-                        <Item>
-                            <Copy dark>
-                                <Gamma as="h3">Time-consuming</Gamma>
-                                <p>
-                                    Working with a large code-base that contains hundreds of smart contracts, finding
-                                    the failing line of code quickly becomes a daunting task.
-                                </p>
-                            </Copy>
-                            <Icon as={TimeConsuming} />
-                        </Item>
-                    </List>
-                </Block>
-
-                <Block background={colors.secondary}>
-                    <Alpha>The Fix</Alpha>
-                    <MainCopy>
-                        Sol-trace will give you full stack traces, including contract names, line numbers and code
-                        snippets, every time you encounter an error.
-                    </MainCopy>
-                    <Breakout>
-                        <Code light language="javascript">
-                        {`contracts/src/2.0.0/protocol/Exchange/MixinSignatureValidator.sol:51:8
+import { colors, media } from 'ts/variables';
+
+import { Breakout } from './Breakout';
+import { Code } from './Code';
+import { Container } from './Container';
+import { Alpha, Gamma, Lead } from './Typography';
+
+const Trace: React.StatelessComponent<{}> = () => (
+    <ThemeContext.Consumer>
+        {(props: ContextInterface) => (
+            <StyledSection background={props.colors.secondary}>
+                <Wrapper>
+                    <Block>
+                        <Alpha>The Issue</Alpha>
+                        <MainCopy>
+                            Every time an Ethereum transaction fails, it's extremely hard to trace down the
+                            troublemaking line of code. The only hint you'll get is a generic error.
+                        </MainCopy>
+                        <Breakout>
+                            <Code isLight={true}>Error: VM Exception while processing transaction: rever</Code>
+                        </Breakout>
+
+                        <List>
+                            <Item>
+                                <Copy dark={true}>
+                                    <Gamma as="h3">No location</Gamma>
+                                    <p>
+                                        The error basically says "anything could have gone wrong here", which keeps you
+                                        completely in the dark about its exact location.
+                                    </p>
+                                </Copy>
+                                <Icon as={NoLocation} />
+                            </Item>
+
+                            <Item>
+                                <Copy dark={true}>
+                                    <Gamma as="h3">Time-consuming</Gamma>
+                                    <p>
+                                        Working with a large code-base that contains hundreds of smart contracts,
+                                        finding the failing line of code quickly becomes a daunting task.
+                                    </p>
+                                </Copy>
+                                <Icon as={TimeConsuming} />
+                            </Item>
+                        </List>
+                    </Block>
+
+                    <Block background={props.colors.secondary}>
+                        <Alpha>The Fix</Alpha>
+                        <MainCopy>
+                            Sol-trace will give you full stack traces, including contract names, line numbers and code
+                            snippets, every time you encounter an error.
+                        </MainCopy>
+                        <Breakout>
+                            <Code isLight={true} language="javascript">
+                                {`contracts/src/2.0.0/protocol/Exchange/MixinSignatureValidator.sol:51:8
     require(
         isValidSignature(
             hash,
@@ -75,42 +70,48 @@ function Trace(props: Props) {
         ),
         "INVALID_SIGNATURE"
     )`}
-                        </Code>
-                    </Breakout>
-
-                    <List>
-                        <Item>
-                            <Copy>
-                                <Gamma as="h3">Exact location</Gamma>
-                                <p>
-                                    It shows you the exact location of the specific code linen and where it was called
-                                    from.
-                                </p>
-                            </Copy>
-                            <Icon as={ExactLocation} />
-                        </Item>
-
-                        <Item>
-                            <Copy>
-                                <Gamma as="h3">Time-saving</Gamma>
-                                <p>
-                                    Turning "Your code failed somewhere, good luck debugging it" into "Your code failed
-                                    on line X of contract Y", it drastically improves the developer experience.
-                                </p>
-                            </Copy>
-                            <Icon as={TimeSaving} />
-                        </Item>
-                    </List>
-                </Block>
-            </Wrapper>
-        </StyledSection>
-    );
+                            </Code>
+                        </Breakout>
+
+                        <List>
+                            <Item>
+                                <Copy>
+                                    <Gamma as="h3">Exact location</Gamma>
+                                    <p>
+                                        It shows you the exact location of the specific code linen and where it was
+                                        called from.
+                                    </p>
+                                </Copy>
+                                <Icon as={ExactLocation} />
+                            </Item>
+
+                            <Item>
+                                <Copy>
+                                    <Gamma as="h3">Time-saving</Gamma>
+                                    <p>
+                                        Turning "Your code failed somewhere, good luck debugging it" into "Your code
+                                        failed on line X of contract Y", it drastically improves the developer
+                                        experience.
+                                    </p>
+                                </Copy>
+                                <Icon as={TimeSaving} />
+                            </Item>
+                        </List>
+                    </Block>
+                </Wrapper>
+            </StyledSection>
+        )}
+    </ThemeContext.Consumer>
+);
+
+interface TraceProps {
+    background?: string;
 }
 
 const StyledSection =
     styled.section <
-        TraceProps >
-        `
+    TraceProps >
+    `
     max-width: 90rem;
     margin: 0 auto;
     background: linear-gradient(to right, ${colors.black} 50%, ${props => props.background} 50%);
@@ -139,8 +140,8 @@ const Wrapper = styled(Container)`
 
 const Block =
     styled.div <
-        TraceProps >
-        `
+    TraceProps >
+    `
     width: 50%;
     background: ${props => (props.background ? props.background : colors.black)};
     color: ${props => (props.background ? 'inherit' : colors.white)};
@@ -199,9 +200,14 @@ const Item = styled.li`
     }
 `;
 
-const Copy = styled.div<{ dark?: boolean; }>`
+const Copy =
+    styled.div <
+    { dark: boolean } >
+    `
     margin-right: 5.875rem;
-    ${props => props.dark && `
+    ${props =>
+        props.dark &&
+        `
         p {
             color: #ccc;
         }
@@ -214,4 +220,4 @@ const Icon = styled.div`
     flex-shrink: 0;
 `;
 
-export default withContext(Trace);
+export { Trace };
diff --git a/packages/dev-tools-pages/ts/components/Typography.tsx b/packages/dev-tools-pages/ts/components/Typography.tsx
index b3ed1b95c..e4b13163a 100644
--- a/packages/dev-tools-pages/ts/components/Typography.tsx
+++ b/packages/dev-tools-pages/ts/components/Typography.tsx
@@ -1,4 +1,5 @@
 import styled from 'styled-components';
+
 import { media } from '../variables';
 
 const Alpha = styled.h2`
diff --git a/packages/dev-tools-pages/ts/components/withContext.tsx b/packages/dev-tools-pages/ts/components/withContext.tsx
deleted file mode 100644
index d38c0afe4..000000000
--- a/packages/dev-tools-pages/ts/components/withContext.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import * as React from 'react';
-
-import ThemeContext from '../context';
-
-interface Props {
-    title?: string;
-    name?: string;
-    subtitle?: string;
-    tagline?: string;
-    icon?: React.ReactNode;
-    colors?: any;
-}
-
-function withContext(WrappedComponent: any) {
-    function ComponentWithContext(props: any) {
-        return <ThemeContext.Consumer>{data => <WrappedComponent {...data} {...props} />}</ThemeContext.Consumer>;
-    }
-
-    return ComponentWithContext;
-}
-
-export default withContext;
-export { withContext, Props };
diff --git a/packages/dev-tools-pages/ts/context/compiler.tsx b/packages/dev-tools-pages/ts/context/compiler.tsx
index e14c1936e..88402e4f6 100644
--- a/packages/dev-tools-pages/ts/context/compiler.tsx
+++ b/packages/dev-tools-pages/ts/context/compiler.tsx
@@ -1,6 +1,6 @@
 import Icon from 'ts/icons/logos/compiler.svg';
 
-export default {
+export const context = {
     title: 'sol-compiler',
     name: 'compiler',
     subtitle: 'Solidity compilation that just works',
diff --git a/packages/dev-tools-pages/ts/context/cov.tsx b/packages/dev-tools-pages/ts/context/cov.tsx
index f2f4d5dad..eea3ccca6 100644
--- a/packages/dev-tools-pages/ts/context/cov.tsx
+++ b/packages/dev-tools-pages/ts/context/cov.tsx
@@ -1,6 +1,6 @@
 import Icon from 'ts/icons/logos/cov.svg';
 
-export default {
+export const context = {
     title: 'sol-cov',
     name: 'cov',
     subtitle: 'Solidity code coverage',
diff --git a/packages/dev-tools-pages/ts/context/index.tsx b/packages/dev-tools-pages/ts/context/index.tsx
index 54556a3fd..3aba2f34c 100644
--- a/packages/dev-tools-pages/ts/context/index.tsx
+++ b/packages/dev-tools-pages/ts/context/index.tsx
@@ -1,5 +1,14 @@
 import { createContext } from 'react';
 
+interface ContextInterface {
+    title?: string;
+    name?: string;
+    subtitle?: string;
+    tagline?: string;
+    icon?: React.ReactNode;
+    colors?: any;
+}
+
 const ThemeContext = createContext({});
 
-export default ThemeContext;
+export { ThemeContext, ContextInterface };
diff --git a/packages/dev-tools-pages/ts/context/profiler.tsx b/packages/dev-tools-pages/ts/context/profiler.tsx
index 9593c08ec..507fa663d 100644
--- a/packages/dev-tools-pages/ts/context/profiler.tsx
+++ b/packages/dev-tools-pages/ts/context/profiler.tsx
@@ -1,6 +1,6 @@
 import Icon from 'ts/icons/logos/profiler.svg';
 
-export default {
+export const context = {
     title: 'sol-profiler',
     name: 'profiler',
     subtitle: 'Gas profiling for Solidity',
diff --git a/packages/dev-tools-pages/ts/context/trace.tsx b/packages/dev-tools-pages/ts/context/trace.tsx
index 697a4263a..fea72d4c2 100644
--- a/packages/dev-tools-pages/ts/context/trace.tsx
+++ b/packages/dev-tools-pages/ts/context/trace.tsx
@@ -1,6 +1,6 @@
 import Icon from 'ts/icons/logos/trace.svg';
 
-export default {
+export const context = {
     title: 'sol-trace',
     name: 'trace',
     subtitle: 'Human-readable stack traces',
diff --git a/packages/dev-tools-pages/ts/globalStyles.tsx b/packages/dev-tools-pages/ts/globalStyles.tsx
index c5db93f6a..1a571c0cb 100644
--- a/packages/dev-tools-pages/ts/globalStyles.tsx
+++ b/packages/dev-tools-pages/ts/globalStyles.tsx
@@ -1,11 +1,10 @@
+import hljsStyles from 'highlight.js/styles/github-gist.css';
 import { createGlobalStyle } from 'styled-components';
-import { media } from './variables';
 import styledNormalize from 'styled-normalize';
-import hljsStyles from 'highlight.js/styles/github-gist.css';
 
-import { withContext } from 'ts/components/withContext';
+import { media } from 'ts/variables';
 
-const BaseStyles = createGlobalStyle`
+const GlobalStyles = createGlobalStyle`
     ${styledNormalize}
     ${hljsStyles}
 
@@ -35,11 +34,11 @@ const BaseStyles = createGlobalStyle`
         font-size: 100%;
         box-sizing: border-box;
     }
-    
+
     *, *::before, *::after {
         box-sizing: inherit;
     }
-    
+
     body {
         font-family: "Maison Neue", system-ui, sans-serif;
         font-weight: 300;
@@ -55,14 +54,14 @@ const BaseStyles = createGlobalStyle`
     }
 
     a:not([class]) {
-        color: ${(props: any) => props.colors.type};
-        text-decoration: none; 
+        color: black;
+        text-decoration: none;
 
         &:hover {
-            color: ${(props: any) => props.colors.type_alt};
+            color: black;
         }
     }
-    
+
     h1, h2, h3, h4 {
         font-weight: 500;
         margin: 0;
@@ -84,4 +83,4 @@ const BaseStyles = createGlobalStyle`
     }
 `;
 
-export default withContext(BaseStyles);
+export { GlobalStyles };
diff --git a/packages/dev-tools-pages/ts/globals.d.ts b/packages/dev-tools-pages/ts/globals.d.ts
index 5c7cbe54c..bfe13ee71 100644
--- a/packages/dev-tools-pages/ts/globals.d.ts
+++ b/packages/dev-tools-pages/ts/globals.d.ts
@@ -1,6 +1,8 @@
 declare module 'whatwg-fetch';
 declare module 'react-document-title';
-declare module 'highlighter';
+declare module 'highlight.js/lib/highlight';
+declare module 'highlight.js/lib/languages/javascript';
+declare module 'highlight.js/lib/languages/json';
 
 declare var System: any;
 
diff --git a/packages/dev-tools-pages/ts/highlight.tsx b/packages/dev-tools-pages/ts/highlight.tsx
index 6efba02f8..cef03904a 100644
--- a/packages/dev-tools-pages/ts/highlight.tsx
+++ b/packages/dev-tools-pages/ts/highlight.tsx
@@ -1,6 +1,6 @@
-const hljs = require('highlight.js/lib/highlight');
-const javascript = require('highlight.js/lib/languages/javascript');
-const json = require('highlight.js/lib/languages/json');
+import * as hljs from 'highlight.js/lib/highlight';
+import * as javascript from 'highlight.js/lib/languages/javascript';
+import * as json from 'highlight.js/lib/languages/json';
 
 hljs.registerLanguage('javascript', javascript);
 hljs.registerLanguage('json', json);
@@ -9,59 +9,61 @@ interface PatchInterface {
     [key: string]: string;
 }
 
-var PATCH_TYPES: PatchInterface = {
+const PATCH_TYPES: PatchInterface = {
     '+': 'addition',
     '-': 'deletion',
     '!': 'change',
 };
 
-function diffHighlight(language: string, code: any, gutter: any) {
+function diffHighlight(language: string, code: any, gutter: any): string {
     return code
         .split(/\r?\n/g)
         .map((line: string, index: number) => {
-            var type;
-            if (/^-{3} [^-]+ -{4}$|^\*{3} [^*]+ \*{4}$|^@@ [^@]+ @@$/.test(line)) {
+            let type;
+            let currentLine = line;
+
+            if (/^-{3} [^-]+ -{4}$|^\*{3} [^*]+ \*{4}$|^@@ [^@]+ @@$/.test(currentLine)) {
                 type = 'chunk';
-            } else if (/^Index: |^[+\-*]{3}|^[*=]{5,}$/.test(line)) {
+            } else if (/^Index: |^[+\-*]{3}|^[*=]{5,}$/.test(currentLine)) {
                 type = 'header';
             } else {
-                type = PATCH_TYPES[line[0] as string] || 'null';
-                line = line.replace(/^[+\-! ]/, '');
+                type = PATCH_TYPES[currentLine[0]] || 'null';
+                currentLine = currentLine.replace(/^[+\-! ]/, '');
             }
 
             const g = gutter[index];
 
-            return `<span data-gutter="${g !== undefined ? g + 'x' : ''}" class="line-${type}">${
-                hljs.highlight(language, line).value
+            return `<span data-gutter="${g !== undefined ? `${g}x` : ''}" class="line-${type}">${
+                hljs.highlight(language, currentLine).value
             }</span>`;
         })
         .join('\n');
 }
 
-interface highlightProps {
+interface HighlightProps {
     language: string;
     code: string;
-    diff?: boolean;
-    gutter?: boolean;
-    etc?: boolean;
+    isDiff?: boolean;
+    gutter?: [];
+    isEtc?: boolean;
 }
 
-function highlight({ language, code, diff, gutter, etc }: highlightProps) {
-    if (diff) {
+function highlight({ language, code, isDiff, gutter, isEtc }: HighlightProps): string {
+    if (isDiff) {
         return diffHighlight(language, code, gutter);
     }
 
-    let hlCode = hljs.highlight(language, code).value;
+    const hlCode = hljs.highlight(language, code).value;
 
-    if (!etc) {
+    if (!isEtc) {
         return hlCode;
     }
 
-    var hc = hlCode.split(/\r?\n/g);
+    const hc = hlCode.split(/\r?\n/g);
     hc.splice(1, 0, '    ...');
     hc.splice(hc.length - 1, 0, '    ...');
 
     return hc.join('\n');
 }
 
-export default highlight;
+export { highlight };
diff --git a/packages/dev-tools-pages/ts/pages/Compiler.tsx b/packages/dev-tools-pages/ts/pages/Compiler.tsx
index 0db7c6204..ee533d566 100644
--- a/packages/dev-tools-pages/ts/pages/Compiler.tsx
+++ b/packages/dev-tools-pages/ts/pages/Compiler.tsx
@@ -1,56 +1,60 @@
 import * as React from 'react';
-import { render, hydrate } from 'react-dom';
+import { hydrate, render } from 'react-dom';
 import * as Loadable from 'react-loadable';
 
+import { context } from 'ts/context/compiler';
+
+import { Base } from 'ts/components/Base';
+import { Breakout } from 'ts/components/Breakout';
+import { Code } from 'ts/components/Code';
+import { Compiler as CompilerComponent } from 'ts/components/Compiler';
+import { Content } from 'ts/components/Content';
+import { ContentBlock } from 'ts/components/ContentBlock';
+import { Hero } from 'ts/components/Hero';
+import { InlineCode } from 'ts/components/InlineCode';
 import { Lead } from 'ts/components/Typography';
-import context from 'ts/context/compiler';
-import Base from 'ts/components/Base';
-import Content from 'ts/components/Content';
-import ContentBlock from 'ts/components/ContentBlock';
-import Code from 'ts/components/Code';
-import InlineCode from 'ts/components/InlineCode';
-import CompilerComponent from 'ts/components/Compiler';
-import Breakout from 'ts/components/Breakout';
-import Hero from 'ts/components/Hero';
 
 const Animation = Loadable({
     loader: () => System.import(/* webpackChunkName: 'compiler-animation' */ 'ts/components/Animations/Compiler'),
     loading: () => <div />,
     delay: 1000,
+    render(loadable: { Animation: any }): React.ReactNode {
+        const Component = loadable.Animation;
+        return <Component />;
+    },
 });
 
-function Compiler() {
-    return (
-        <Base context={context}>
-            <Hero>
-                <Animation />
-            </Hero>
-            <CompilerComponent />
-            <Content>
-                <ContentBlock main title="Get started" />
-                <ContentBlock title="Install">
-                    <Breakout>
-                        <Code copy>npm install @0x/sol-compiler --g</Code>
-                    </Breakout>
-                </ContentBlock>
+const Compiler: React.StatelessComponent<{}> = () => (
+    <Base context={context}>
+        <Hero>
+            <Animation />
+        </Hero>
+        <CompilerComponent />
+        <Content>
+            <ContentBlock main={true} title="Get started" />
+            <ContentBlock title="Install">
+                <Breakout>
+                    <Code canCopy={true}>npm install @0x/sol-compiler --g</Code>
+                </Breakout>
+            </ContentBlock>
 
-                <ContentBlock title="Run">
-                    <Breakout>
-                        <Code>cd /your_project_dir && sol-compiler</Code>
-                    </Breakout>
-                </ContentBlock>
+            <ContentBlock title="Run">
+                <Breakout>
+                    <Code>cd /your_project_dir && sol-compiler</Code>
+                </Breakout>
+            </ContentBlock>
 
-                <ContentBlock title="Configure">
-                    <p>
-                        Configure via a <InlineCode>compiler.json</InlineCode> file.
-                    </p>
-                    <Breakout>
-                        <Code>mkdir compiler.json</Code>
-                    </Breakout>
-                    <p>Example of settings:</p>
-                    <Breakout>
-                        <Code language="json">
-                            {`{
+            <ContentBlock title="Configure">
+                <p>
+                    Configure via a <InlineCode>compiler.json</InlineCode> file.
+                </p>
+                <Breakout>
+                    <Code>mkdir compiler.json</Code>
+                </Breakout>
+                <p>Example of settings:</p>
+                <Breakout>
+                    <Code language="json">
+                        {`{
     "contractsDir": "contracts",
     "artifactsDir": "artifacts",
     "contracts": "*",
@@ -63,26 +67,26 @@ function Compiler() {
         }
     }
 }`}
-                        </Code>
-                    </Breakout>
-                </ContentBlock>
-            </Content>
-            <Content dark>
-                <ContentBlock main title="Artifacts">
-                    <Lead>
-                        Sol compiler uses solidity standard JSON output format for the artifacts. This way, you can
-                        define which parts of the artifact you need.
-                    </Lead>
-                </ContentBlock>
+                    </Code>
+                </Breakout>
+            </ContentBlock>
+        </Content>
+        <Content dark={true}>
+            <ContentBlock main={true} title="Artifacts">
+                <Lead>
+                    Sol compiler uses solidity standard JSON output format for the artifacts. This way, you can define
+                    which parts of the artifact you need.
+                </Lead>
+            </ContentBlock>
 
-                <ContentBlock title="Production">
-                    <p>
-                        Sol compiler uses solidity standard JSON output format for the artifacts. This way, you can
-                        define which parts of the artifact you need.
-                    </p>
-                    <Breakout>
-                        <Code light language="json" etc>
-                            {`{
+            <ContentBlock title="Production">
+                <p>
+                    Sol compiler uses solidity standard JSON output format for the artifacts. This way, you can define
+                    which parts of the artifact you need.
+                </p>
+                <Breakout>
+                    <Code isLight={true} language="json" isEtc={true}>
+                        {`{
     "compilerSettings": {
         "outputSelection": {
             "*": {
@@ -91,26 +95,26 @@ function Compiler() {
         }
     }
 }`}
-                        </Code>
-                    </Breakout>
-                    <Breakout>
-                        <Code light language="json" etc>
-                            {`{
+                    </Code>
+                </Breakout>
+                <Breakout>
+                    <Code isLight={true} language="json" isEtc={true}>
+                        {`{
     "compilerOutput": {
         "abi": [...],
     },
 }`}
-                        </Code>
-                    </Breakout>
-                </ContentBlock>
-                <ContentBlock title="Development">
-                    <p>
-                        Sometimes you need to use some debuggers or other dev tools and you’ll need more info in the
-                        artifact.
-                    </p>
-                    <Breakout>
-                        <Code light language="json" etc>
-                            {`{
+                    </Code>
+                </Breakout>
+            </ContentBlock>
+            <ContentBlock title="Development">
+                <p>
+                    Sometimes you need to use some debuggers or other dev tools and you’ll need more info in the
+                    artifact.
+                </p>
+                <Breakout>
+                    <Code isLight={true} language="json" isEtc={true}>
+                        {`{
     "compilerSettings": {
         "outputSelection": {
             "*": {
@@ -125,12 +129,12 @@ function Compiler() {
         }
     }
 }`}
-                        </Code>
-                    </Breakout>
+                    </Code>
+                </Breakout>
 
-                    <Breakout>
-                        <Code light language="json" etc>
-                            {`{
+                <Breakout>
+                    <Code isLight={true} language="json" isEtc={true}>
+                        {`{
     "compilerOutput": {
         "abi": [...],
         "evm": {
@@ -150,13 +154,12 @@ function Compiler() {
         }
     },
 }`}
-                        </Code>
-                    </Breakout>
-                </ContentBlock>
-            </Content>
-        </Base>
-    );
-}
+                    </Code>
+                </Breakout>
+            </ContentBlock>
+        </Content>
+    </Base>
+);
 
 const root = document.getElementById('app');
 
diff --git a/packages/dev-tools-pages/ts/pages/Cov.tsx b/packages/dev-tools-pages/ts/pages/Cov.tsx
index 1a7abbbb1..3ffa6077d 100644
--- a/packages/dev-tools-pages/ts/pages/Cov.tsx
+++ b/packages/dev-tools-pages/ts/pages/Cov.tsx
@@ -1,52 +1,56 @@
 import * as React from 'react';
-import { render, hydrate } from 'react-dom';
+import { hydrate, render } from 'react-dom';
 import * as Loadable from 'react-loadable';
 
-import context from 'ts/context/cov';
-import Base from 'ts/components/Base';
-import Content from 'ts/components/Content';
-import ContentBlock from 'ts/components/ContentBlock';
-import { Tabs, TabBlock } from 'ts/components/Tabs';
-import Code from 'ts/components/Code';
-import InlineCode from 'ts/components/InlineCode';
+import { context } from 'ts/context/cov';
+
+import { Base } from 'ts/components/Base';
+import { Breakout } from 'ts/components/Breakout';
+import { Code } from 'ts/components/Code';
+import { Content } from 'ts/components/Content';
+import { ContentBlock } from 'ts/components/ContentBlock';
+import { Hero } from 'ts/components/Hero';
+import { InlineCode } from 'ts/components/InlineCode';
+import { Intro, IntroAside, IntroLead } from 'ts/components/Intro';
 import { List, ListItem } from 'ts/components/List';
-import Breakout from 'ts/components/Breakout';
-import { Intro, IntroLead, IntroAside } from 'ts/components/Intro';
-import Hero from 'ts/components/Hero';
+import { TabBlock, Tabs } from 'ts/components/Tabs';
 
 const Animation = Loadable({
     loader: () => System.import(/* webpackChunkName: 'cov-animation' */ 'ts/components/Animations/Cov'),
     loading: () => <div />,
     delay: 1000,
+    render(loadable: { Animation: any }): React.ReactNode {
+        const Component = loadable.Animation;
+        return <Component />;
+    },
 });
 
-function Cov() {
-    return (
-        <Base context={context}>
-            <Hero>
-                <Animation />
-            </Hero>
-            <Intro>
-                <IntroLead title="Measure your tests">
-                    <p>
-                        When it comes to writing smart contracts, testing is one of the most important steps of the
-                        process. In order to quantify the robustness of your Solidity testing suite, you need to measure
-                        its code coverage.
-                    </p>
-                </IntroLead>
-                <IntroAside>
-                    <Code
-                        language="javascript"
-                        diff
-                        gutterLength={2}
-                        gutter={[4, undefined, 4, 4, 4, undefined, 4, 2, 2, 2]}
-                    >
-                        {`+function executeTransaction(uint transactionId)
+const Cov: React.StatelessComponent<{}> = () => (
+    <Base context={context}>
+        <Hero>
+            <Animation />
+        </Hero>
+        <Intro>
+            <IntroLead title="Measure your tests">
+                <p>
+                    When it comes to writing smart contracts, testing is one of the most important steps of the process.
+                    In order to quantify the robustness of your Solidity testing suite, you need to measure its code
+                    coverage.
+                </p>
+            </IntroLead>
+            <IntroAside>
+                <Code
+                    language="javascript"
+                    isDiff={true}
+                    gutterLength={2}
+                    gutter={[4, undefined, 4, 4, 4, undefined, 4, 2, 2, 2]}
+                >
+                    {`+function executeTransaction(uint transactionId)
      public
 +    notExecuted(transactionId)
 +    fullyConfirmed(transactionId)
 +    pastTimeLock(transactionId)
-{ 
+{
 +    Transaction storage tx = transactions[transactionId]
 +    tx.executed = true
 +    if (tx.destination.call.value(tx.value)(tx.data))
@@ -56,71 +60,70 @@ function Cov() {
 -        tx.executed = false
     }
 }`}
-                    </Code>
-                </IntroAside>
-            </Intro>
+                </Code>
+            </IntroAside>
+        </Intro>
 
-            <Content>
-                <ContentBlock main title="Get started" />
-                <ContentBlock title="Prerequisites">
-                    <List>
-                        <ListItem>
-                            Use <a href="#">ganache-cli</a> as a backing node.
-                        </ListItem>
-                        <ListItem>
-                            Understand and use <a href="#">web3-provider-engine</a>.
-                        </ListItem>
-                    </List>
-                </ContentBlock>
-                <ContentBlock title="Installation">
-                    <Breakout>
-                        <Code>npm install @0x/sol-cov --save</Code>
-                    </Breakout>
+        <Content>
+            <ContentBlock main={true} title="Get started" />
+            <ContentBlock title="Prerequisites">
+                <List>
+                    <ListItem>
+                        Use <a href="#">ganache-cli</a> as a backing node.
+                    </ListItem>
+                    <ListItem>
+                        Understand and use <a href="#">web3-provider-engine</a>.
+                    </ListItem>
+                </List>
+            </ContentBlock>
+            <ContentBlock title="Installation">
+                <Breakout>
+                    <Code>npm install @0x/sol-cov --save</Code>
+                </Breakout>
 
-                    <p>
-                        Sol-cov is a subprovider that needs to be prepended to your <a href="#">provider engine</a>.
-                        Depending on your project setup, you will need to use a specific ArtifactAdapter. Sol-cov ships
-                        with the <InlineCode>SolCompilerArtifactAdapter</InlineCode> for use with{' '}
-                        <a href="#">Sol-compiler</a> and <InlineCode>TruffleArtifactAdapter</InlineCode> for use with
-                        the <a href="#">Truffle framework</a>. You can also write your own and support any artifact
-                        format.
-                    </p>
+                <p>
+                    Sol-cov is a subprovider that needs to be prepended to your <a href="#">provider engine</a>.
+                    Depending on your project setup, you will need to use a specific ArtifactAdapter. Sol-cov ships with
+                    the <InlineCode>SolCompilerArtifactAdapter</InlineCode> for use with <a href="#">Sol-compiler</a>{' '}
+                    and <InlineCode>TruffleArtifactAdapter</InlineCode> for use with the{' '}
+                    <a href="#">Truffle framework</a>. You can also write your own and support any artifact format.
+                </p>
 
-                    <Tabs>
-                        <TabBlock title="Sol-compiler">
-                            <Code language="javascript">
-                                {`import { SolCompilerArtifactAdapter } from '@0x/sol-trace';
+                <Tabs>
+                    <TabBlock title="Sol-compiler">
+                        <Code language="javascript">
+                            {`import { SolCompilerArtifactAdapter } from '@0x/sol-trace';
 
 // Both artifactsDir and contractsDir are optional and will be fetched from compiler.json if not passed in
 const artifactAdapter = new SolCompilerArtifactAdapter(artifactsDir, contractsDir);`}
-                            </Code>
-                        </TabBlock>
-                        <TabBlock title="Truffle">
-                            <Code language="javascript">
-                                {`import { TruffleArtifactAdapter } from '@0x/sol-trace';
+                        </Code>
+                    </TabBlock>
+                    <TabBlock title="Truffle">
+                        <Code language="javascript">
+                            {`import { TruffleArtifactAdapter } from '@0x/sol-trace';
 
 const projectRoot = '.';
 const solcVersion = '0.4.24';
 const artifactAdapter = new TruffleArtifactAdapter(projectRoot, solcVersion);`}
-                            </Code>
-                        </TabBlock>
-                        <TabBlock title="Custom">
-                            <Code language="javascript">
-                                {`import { AbstractArtifactAdapter } from '@0x/sol-trace';
+                        </Code>
+                    </TabBlock>
+                    <TabBlock title="Custom">
+                        <Code language="javascript">
+                            {`import { AbstractArtifactAdapter } from '@0x/sol-trace';
 
 class YourCustomArtifactsAdapter extends AbstractArtifactAdapter {...};
 const artifactAdapter = new YourCustomArtifactsAdapter(...);`}
-                            </Code>
-                        </TabBlock>
-                    </Tabs>
-                    <p>
-                        Now that we have an <InlineCode>artifactAdapter</InlineCode>, we can create a{' '}
-                        <InlineCode>RevertTraceSubprovider</InlineCode> and append it to our provider engine.
-                    </p>
+                        </Code>
+                    </TabBlock>
+                </Tabs>
+                <p>
+                    Now that we have an <InlineCode>artifactAdapter</InlineCode>, we can create a{' '}
+                    <InlineCode>RevertTraceSubprovider</InlineCode> and append it to our provider engine.
+                </p>
 
-                    <Breakout>
-                        <Code language="javascript">
-                            {`import { ProviderEngine, RpcSubprovider } from 'web3-provider-engine';
+                <Breakout>
+                    <Code language="javascript">
+                        {`import { ProviderEngine, RpcSubprovider } from 'web3-provider-engine';
 import { RevertTraceSubprovider } from '@0x/sol-cov';
 
 const defaultFromAddress = "..."; // Some ethereum address with test funds
@@ -130,13 +133,12 @@ const providerEngine = new ProviderEngine();
 providerEngine.addProvider(revertTraceSubprovider);
 providerEngine.addProvider(new RpcSubprovider({rpcUrl: 'http://localhost:8545'}));
 providerEngine.start();`}
-                        </Code>
-                    </Breakout>
-                </ContentBlock>
-            </Content>
-        </Base>
-    );
-}
+                    </Code>
+                </Breakout>
+            </ContentBlock>
+        </Content>
+    </Base>
+);
 
 const root = document.getElementById('app');
 
diff --git a/packages/dev-tools-pages/ts/pages/Profiler.tsx b/packages/dev-tools-pages/ts/pages/Profiler.tsx
index 87cc90b23..4e833e0d0 100644
--- a/packages/dev-tools-pages/ts/pages/Profiler.tsx
+++ b/packages/dev-tools-pages/ts/pages/Profiler.tsx
@@ -1,46 +1,55 @@
 import * as React from 'react';
-import { render, hydrate } from 'react-dom';
+import { hydrate, render } from 'react-dom';
 import * as Loadable from 'react-loadable';
 
-import context from 'ts/context/profiler';
-import Base from 'ts/components/Base';
-import Content from 'ts/components/Content';
-import ContentBlock from 'ts/components/ContentBlock';
-import Breakout from 'ts/components/Breakout';
-import { Tabs, TabBlock } from 'ts/components/Tabs';
-import Code from 'ts/components/Code';
-import InlineCode from 'ts/components/InlineCode';
+import { context } from 'ts/context/profiler';
+
+import { Base } from 'ts/components/Base';
+import { Breakout } from 'ts/components/Breakout';
+import { Code } from 'ts/components/Code';
+import { Content } from 'ts/components/Content';
+import { ContentBlock } from 'ts/components/ContentBlock';
+import { Hero } from 'ts/components/Hero';
+import { InlineCode } from 'ts/components/InlineCode';
+import { Intro, IntroAside, IntroLead } from 'ts/components/Intro';
 import { List, ListItem } from 'ts/components/List';
-import { Intro, IntroLead, IntroAside } from 'ts/components/Intro';
-import Hero from 'ts/components/Hero';
+import { TabBlock, Tabs } from 'ts/components/Tabs';
 
 const Animation = Loadable({
     loader: () => System.import(/* webpackChunkName: 'profiler-animation' */ 'ts/components/Animations/Profiler'),
     loading: () => <div />,
     delay: 1000,
+    render(loadable: { Animation: any }): React.ReactNode {
+        const Component = loadable.Animation;
+        return <Component />;
+    },
 });
 
-function Profiler() {
-    return (
-        <Base context={context}>
-            <Hero>
-                <Animation />
-            </Hero>
-            <Intro>
-                <IntroLead title="Outline gas usage">
-                    <p>
-                        Sol-profiler gathers line-by-line gas usage for any transaction submitted through your provider.
-                        This will help you find unexpected inefficiencies in parts of your smart contract, and take a
-                        data-driven approach to optimizing it.
-                    </p>
-                </IntroLead>
-                <IntroAside>
-                    <Code language="javascript" diff gutterLength={6} gutter={[15, 15, undefined, 21747, 20303, 1435]}>
-                        {`+function() public payable {
+const Profiler: React.StatelessComponent<{}> = () => (
+    <Base context={context}>
+        <Hero>
+            <Animation />
+        </Hero>
+        <Intro>
+            <IntroLead title="Outline gas usage">
+                <p>
+                    Sol-profiler gathers line-by-line gas usage for any transaction submitted through your provider.
+                    This will help you find unexpected inefficiencies in parts of your smart contract, and take a
+                    data-driven approach to optimizing it.
+                </p>
+            </IntroLead>
+            <IntroAside>
+                <Code
+                    language="javascript"
+                    isDiff={true}
+                    gutterLength={6}
+                    gutter={[15, 15, undefined, 21747, 20303, 1435]}
+                >
+                    {`+function() public payable {
 +    deposit();
 }
 +function deposit() public payabble {
-+    balanceOf[msg.sender] += msg.value; 
++    balanceOf[msg.sender] += msg.value;
 +    Deposit(msg.sender, msg.value);
 }
 -function withdraw(uint wad) public {
@@ -49,70 +58,69 @@ function Profiler() {
 -    msg.sender.transfer(wad);
 -    Withdrawal(msg.sender, wad);
 }`}
-                    </Code>
-                </IntroAside>
-            </Intro>
-            <Content>
-                <ContentBlock main title="Get started" />
-                <ContentBlock title="Prerequisites">
-                    <List>
-                        <ListItem>
-                            Use <a href="#">ganache-cli</a> as a backing node.
-                        </ListItem>
-                        <ListItem>
-                            Understand and use <a href="#">web3-provider-engine</a>.
-                        </ListItem>
-                    </List>
-                </ContentBlock>
-                <ContentBlock title="Installation">
-                    <Breakout>
-                        <Code>npm install @0x/sol-trace --save</Code>
-                    </Breakout>
+                </Code>
+            </IntroAside>
+        </Intro>
+        <Content>
+            <ContentBlock main={true} title="Get started" />
+            <ContentBlock title="Prerequisites">
+                <List>
+                    <ListItem>
+                        Use <a href="#">ganache-cli</a> as a backing node.
+                    </ListItem>
+                    <ListItem>
+                        Understand and use <a href="#">web3-provider-engine</a>.
+                    </ListItem>
+                </List>
+            </ContentBlock>
+            <ContentBlock title="Installation">
+                <Breakout>
+                    <Code>npm install @0x/sol-trace --save</Code>
+                </Breakout>
 
-                    <p>
-                        Sol-trace is a subprovider that needs to be prepended to your <a href="#">provider engine</a>.
-                        Depending on your project setup, you will need to use a specific ArtifactAdapter. Sol-trace
-                        ships with the <InlineCode>SolCompilerArtifactAdapter</InlineCode> for use with{' '}
-                        <a href="#">Sol-compiler</a> and <InlineCode>TruffleArtifactAdapter</InlineCode> for use with
-                        the <a href="#">Truffle framework</a>. You can also write your own and support any artifact
-                        format.
-                    </p>
+                <p>
+                    Sol-trace is a subprovider that needs to be prepended to your <a href="#">provider engine</a>.
+                    Depending on your project setup, you will need to use a specific ArtifactAdapter. Sol-trace ships
+                    with the <InlineCode>SolCompilerArtifactAdapter</InlineCode> for use with{' '}
+                    <a href="#">Sol-compiler</a> and <InlineCode>TruffleArtifactAdapter</InlineCode> for use with the{' '}
+                    <a href="#">Truffle framework</a>. You can also write your own and support any artifact format.
+                </p>
 
-                    <Tabs>
-                        <TabBlock title="Sol-compiler">
-                            <Code language="javascript">
-                                {`import { SolCompilerArtifactAdapter } from '@0x/sol-trace';
+                <Tabs>
+                    <TabBlock title="Sol-compiler">
+                        <Code language="javascript">
+                            {`import { SolCompilerArtifactAdapter } from '@0x/sol-trace';
 
 // Both artifactsDir and contractsDir are optional and will be fetched from compiler.json if not passed in
 const artifactAdapter = new SolCompilerArtifactAdapter(artifactsDir, contractsDir);`}
-                            </Code>
-                        </TabBlock>
-                        <TabBlock title="Truffle">
-                            <Code language="javascript">
-                                {`import { TruffleArtifactAdapter } from '@0x/sol-trace';
+                        </Code>
+                    </TabBlock>
+                    <TabBlock title="Truffle">
+                        <Code language="javascript">
+                            {`import { TruffleArtifactAdapter } from '@0x/sol-trace';
 
 const projectRoot = '.';
 const solcVersion = '0.4.24';
 const artifactAdapter = new TruffleArtifactAdapter(projectRoot, solcVersion);`}
-                            </Code>
-                        </TabBlock>
-                        <TabBlock title="Custom">
-                            <Code language="javascript">
-                                {`import { AbstractArtifactAdapter } from '@0x/sol-trace';
+                        </Code>
+                    </TabBlock>
+                    <TabBlock title="Custom">
+                        <Code language="javascript">
+                            {`import { AbstractArtifactAdapter } from '@0x/sol-trace';
 
 class YourCustomArtifactsAdapter extends AbstractArtifactAdapter {...};
 const artifactAdapter = new YourCustomArtifactsAdapter(...);`}
-                            </Code>
-                        </TabBlock>
-                    </Tabs>
-                    <p>
-                        Now that we have an <InlineCode>artifactAdapter</InlineCode>, we can create a{' '}
-                        <InlineCode>RevertTraceSubprovider</InlineCode> and append it to our provider engine.
-                    </p>
+                        </Code>
+                    </TabBlock>
+                </Tabs>
+                <p>
+                    Now that we have an <InlineCode>artifactAdapter</InlineCode>, we can create a{' '}
+                    <InlineCode>RevertTraceSubprovider</InlineCode> and append it to our provider engine.
+                </p>
 
-                    <Breakout>
-                        <Code language="javascript">
-                            {`import { ProviderEngine, RpcSubprovider } from 'web3-provider-engine';
+                <Breakout>
+                    <Code language="javascript">
+                        {`import { ProviderEngine, RpcSubprovider } from 'web3-provider-engine';
 import { RevertTraceSubprovider } from '@0x/sol-cov';
 
 const defaultFromAddress = "..."; // Some ethereum address with test funds
@@ -122,13 +130,12 @@ const providerEngine = new ProviderEngine();
 providerEngine.addProvider(revertTraceSubprovider);
 providerEngine.addProvider(new RpcSubprovider({rpcUrl: 'http://localhost:8545'}));
 providerEngine.start();`}
-                        </Code>
-                    </Breakout>
-                </ContentBlock>
-            </Content>
-        </Base>
-    );
-}
+                    </Code>
+                </Breakout>
+            </ContentBlock>
+        </Content>
+    </Base>
+);
 
 const root = document.getElementById('app');
 
diff --git a/packages/dev-tools-pages/ts/pages/Trace.tsx b/packages/dev-tools-pages/ts/pages/Trace.tsx
index 1a09d7c3a..23cbe98be 100644
--- a/packages/dev-tools-pages/ts/pages/Trace.tsx
+++ b/packages/dev-tools-pages/ts/pages/Trace.tsx
@@ -1,93 +1,96 @@
 import * as React from 'react';
-import { render, hydrate } from 'react-dom';
+import { hydrate, render } from 'react-dom';
 import * as Loadable from 'react-loadable';
 
-import context from 'ts/context/trace';
-import Base from 'ts/components/Base';
-import Content from 'ts/components/Content';
-import ContentBlock from 'ts/components/ContentBlock';
-import { Tabs, TabBlock } from 'ts/components/Tabs';
-import Code from 'ts/components/Code';
-import InlineCode from 'ts/components/InlineCode';
+import { context } from 'ts/context/trace';
+
+import { Base } from 'ts/components/Base';
+import { Breakout } from 'ts/components/Breakout';
+import { Code } from 'ts/components/Code';
+import { Content } from 'ts/components/Content';
+import { ContentBlock } from 'ts/components/ContentBlock';
+import { Hero } from 'ts/components/Hero';
+import { InlineCode } from 'ts/components/InlineCode';
 import { List, ListItem } from 'ts/components/List';
-import TraceComponent from 'ts/components/Trace';
-import Breakout from 'ts/components/Breakout';
-import Hero from 'ts/components/Hero';
+import { TabBlock, Tabs } from 'ts/components/Tabs';
+import { Trace as TraceComponent } from 'ts/components/Trace';
 
 const Animation = Loadable({
     loader: () => System.import(/* webpackChunkName: 'trace-animation' */ 'ts/components/Animations/Trace'),
     loading: () => <div />,
     delay: 1000,
+    render(loadable: { Animation: any }): React.ReactNode {
+        const Component = loadable.Animation;
+        return <Component />;
+    },
 });
 
-function Trace() {
-    return (
-        <Base context={context}>
-            <Hero>
-                <Animation />
-            </Hero>
-            <TraceComponent />
-            <Content>
-                <ContentBlock main title="Get started" />
-                <ContentBlock title="Prerequisites">
-                    <List>
-                        <ListItem>
-                            Use <a href="#">ganache-cli</a> as a backing node.
-                        </ListItem>
-                        <ListItem>
-                            Understand and use <a href="#">web3-provider-engine</a>.
-                        </ListItem>
-                    </List>
-                </ContentBlock>
-                <ContentBlock title="Installation">
-                    <Breakout>
-                        <Code>npm install @0x/sol-trace --save</Code>
-                    </Breakout>
+const Trace: React.StatelessComponent<{}> = () => (
+    <Base context={context}>
+        <Hero>
+            <Animation />
+        </Hero>
+        <TraceComponent />
+        <Content>
+            <ContentBlock main={true} title="Get started" />
+            <ContentBlock title="Prerequisites">
+                <List>
+                    <ListItem>
+                        Use <a href="#">ganache-cli</a> as a backing node.
+                    </ListItem>
+                    <ListItem>
+                        Understand and use <a href="#">web3-provider-engine</a>.
+                    </ListItem>
+                </List>
+            </ContentBlock>
+            <ContentBlock title="Installation">
+                <Breakout>
+                    <Code>npm install @0x/sol-trace --save</Code>
+                </Breakout>
 
-                    <p>
-                        Sol-trace is a subprovider that needs to be prepended to your <a href="#">provider engine</a>.
-                        Depending on your project setup, you will need to use a specific ArtifactAdapter. Sol-trace
-                        ships with the <InlineCode>SolCompilerArtifactAdapter</InlineCode> for use with{' '}
-                        <a href="#">Sol-compiler</a> and <InlineCode>TruffleArtifactAdapter</InlineCode> for use with
-                        the <a href="#">Truffle framework</a>. You can also write your own and support any artifact
-                        format.
-                    </p>
+                <p>
+                    Sol-trace is a subprovider that needs to be prepended to your <a href="#">provider engine</a>.
+                    Depending on your project setup, you will need to use a specific ArtifactAdapter. Sol-trace ships
+                    with the <InlineCode>SolCompilerArtifactAdapter</InlineCode> for use with{' '}
+                    <a href="#">Sol-compiler</a> and <InlineCode>TruffleArtifactAdapter</InlineCode> for use with the{' '}
+                    <a href="#">Truffle framework</a>. You can also write your own and support any artifact format.
+                </p>
 
-                    <Tabs>
-                        <TabBlock title="Sol-compiler">
-                            <Code language="javascript">
-                                {`import { SolCompilerArtifactAdapter } from '@0x/sol-trace';
+                <Tabs>
+                    <TabBlock title="Sol-compiler">
+                        <Code language="javascript">
+                            {`import { SolCompilerArtifactAdapter } from '@0x/sol-trace';
 
 // Both artifactsDir and contractsDir are optional and will be fetched from compiler.json if not passed in
 const artifactAdapter = new SolCompilerArtifactAdapter(artifactsDir, contractsDir);`}
-                            </Code>
-                        </TabBlock>
-                        <TabBlock title="Truffle">
-                            <Code language="javascript">
-                                {`import { TruffleArtifactAdapter } from '@0x/sol-trace';
+                        </Code>
+                    </TabBlock>
+                    <TabBlock title="Truffle">
+                        <Code language="javascript">
+                            {`import { TruffleArtifactAdapter } from '@0x/sol-trace';
 
 const projectRoot = '.';
 const solcVersion = '0.4.24';
 const artifactAdapter = new TruffleArtifactAdapter(projectRoot, solcVersion);`}
-                            </Code>
-                        </TabBlock>
-                        <TabBlock title="Custom">
-                            <Code language="javascript">
-                                {`import { AbstractArtifactAdapter } from '@0x/sol-trace';
+                        </Code>
+                    </TabBlock>
+                    <TabBlock title="Custom">
+                        <Code language="javascript">
+                            {`import { AbstractArtifactAdapter } from '@0x/sol-trace';
 
 class YourCustomArtifactsAdapter extends AbstractArtifactAdapter {...};
 const artifactAdapter = new YourCustomArtifactsAdapter(...);`}
-                            </Code>
-                        </TabBlock>
-                    </Tabs>
-                    <p>
-                        Now that we have an <InlineCode>artifactAdapter</InlineCode>, we can create a{' '}
-                        <InlineCode>RevertTraceSubprovider</InlineCode> and append it to our provider engine.
-                    </p>
+                        </Code>
+                    </TabBlock>
+                </Tabs>
+                <p>
+                    Now that we have an <InlineCode>artifactAdapter</InlineCode>, we can create a{' '}
+                    <InlineCode>RevertTraceSubprovider</InlineCode> and append it to our provider engine.
+                </p>
 
-                    <Breakout>
-                        <Code language="javascript">
-                            {`import { ProviderEngine, RpcSubprovider } from 'web3-provider-engine';
+                <Breakout>
+                    <Code language="javascript">
+                        {`import { ProviderEngine, RpcSubprovider } from 'web3-provider-engine';
 import { RevertTraceSubprovider } from '@0x/sol-cov';
 
 const defaultFromAddress = "..."; // Some ethereum address with test funds
@@ -97,13 +100,12 @@ const providerEngine = new ProviderEngine();
 providerEngine.addProvider(revertTraceSubprovider);
 providerEngine.addProvider(new RpcSubprovider({rpcUrl: 'http://localhost:8545'}));
 providerEngine.start();`}
-                        </Code>
-                    </Breakout>
-                </ContentBlock>
-            </Content>
-        </Base>
-    );
-}
+                    </Code>
+                </Breakout>
+            </ContentBlock>
+        </Content>
+    </Base>
+);
 
 const root = document.getElementById('app');
 
diff --git a/packages/dev-tools-pages/ts/variables.tsx b/packages/dev-tools-pages/ts/variables.tsx
index 258e5d225..5ea495036 100644
--- a/packages/dev-tools-pages/ts/variables.tsx
+++ b/packages/dev-tools-pages/ts/variables.tsx
@@ -31,5 +31,4 @@ const media = Object.keys(sizes).reduce((acc: any, label: string) => {
     return acc;
 }, {});
 
-export default media;
 export { colors, media };
-- 
cgit v1.2.3


From 7fec2f630c45347b1f066cbf24a46add83516529 Mon Sep 17 00:00:00 2001
From: August Skare <post@augustskare.no>
Date: Fri, 16 Nov 2018 16:18:03 +0100
Subject: fixed base link styling color

---
 packages/dev-tools-pages/ts/components/Base.tsx |  2 +-
 packages/dev-tools-pages/ts/globalStyles.tsx    | 10 +++++++---
 2 files changed, 8 insertions(+), 4 deletions(-)

(limited to 'packages/dev-tools-pages/ts')

diff --git a/packages/dev-tools-pages/ts/components/Base.tsx b/packages/dev-tools-pages/ts/components/Base.tsx
index a1b066d85..369a2525d 100644
--- a/packages/dev-tools-pages/ts/components/Base.tsx
+++ b/packages/dev-tools-pages/ts/components/Base.tsx
@@ -15,7 +15,7 @@ const Base: React.StatelessComponent<BaseProps> = props => (
     <ThemeContext.Provider value={props.context}>
         <ThemeProvider theme={props.context}>
             <React.Fragment>
-                <GlobalStyles />
+                <GlobalStyles colors={props.context.colors} />
                 <Header />
                 {props.children}
                 <Footer />
diff --git a/packages/dev-tools-pages/ts/globalStyles.tsx b/packages/dev-tools-pages/ts/globalStyles.tsx
index 1a571c0cb..a77fb4eef 100644
--- a/packages/dev-tools-pages/ts/globalStyles.tsx
+++ b/packages/dev-tools-pages/ts/globalStyles.tsx
@@ -2,9 +2,13 @@ import hljsStyles from 'highlight.js/styles/github-gist.css';
 import { createGlobalStyle } from 'styled-components';
 import styledNormalize from 'styled-normalize';
 
+import { ContextInterface } from 'ts/context';
 import { media } from 'ts/variables';
 
-const GlobalStyles = createGlobalStyle`
+const GlobalStyles =
+    createGlobalStyle <
+    ContextInterface >
+    `
     ${styledNormalize}
     ${hljsStyles}
 
@@ -54,11 +58,11 @@ const GlobalStyles = createGlobalStyle`
     }
 
     a:not([class]) {
-        color: black;
+        color: ${props => props.colors.type_alt};
         text-decoration: none;
 
         &:hover {
-            color: black;
+            color: ${props => props.colors.type_alt};
         }
     }
 
-- 
cgit v1.2.3


From 3ad857be6c845e3ed09eccff951efdf604e4ca64 Mon Sep 17 00:00:00 2001
From: August Skare <post@augustskare.no>
Date: Mon, 19 Nov 2018 08:53:25 +0100
Subject: fix timeout type in animation component

---
 packages/dev-tools-pages/ts/components/Animations/index.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

(limited to 'packages/dev-tools-pages/ts')

diff --git a/packages/dev-tools-pages/ts/components/Animations/index.tsx b/packages/dev-tools-pages/ts/components/Animations/index.tsx
index 95af4448c..da1b31917 100644
--- a/packages/dev-tools-pages/ts/components/Animations/index.tsx
+++ b/packages/dev-tools-pages/ts/components/Animations/index.tsx
@@ -20,7 +20,7 @@ class BaseAnimation extends React.PureComponent<AnimationProps, AnimationState>
         height: undefined,
         width: undefined,
     };
-    private _timeout = null as any;
+    private _timeout = undefined as number;
 
     public componentDidMount(): void {
         this._updateAnimationSize();
@@ -55,7 +55,7 @@ class BaseAnimation extends React.PureComponent<AnimationProps, AnimationState>
 
     private readonly _handleResize = () => {
         clearTimeout(this._timeout);
-        this._timeout = setTimeout(this._updateAnimationSize, 50);
+        this._timeout = window.setTimeout(this._updateAnimationSize, 50);
     };
 
     private readonly _updateAnimationSize = () => {
-- 
cgit v1.2.3


From 284252e7a49da4816c1fe4a9b4e58694b5a23c10 Mon Sep 17 00:00:00 2001
From: August Skare <post@augustskare.no>
Date: Mon, 19 Nov 2018 08:56:59 +0100
Subject: less verbose tslint disable rule

---
 packages/dev-tools-pages/ts/components/Code.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

(limited to 'packages/dev-tools-pages/ts')

diff --git a/packages/dev-tools-pages/ts/components/Code.tsx b/packages/dev-tools-pages/ts/components/Code.tsx
index da2bb83e6..3bf5506d6 100644
--- a/packages/dev-tools-pages/ts/components/Code.tsx
+++ b/packages/dev-tools-pages/ts/components/Code.tsx
@@ -144,9 +144,8 @@ class Code extends React.Component<CodeProps, CodeState> {
         /*
         * _onMountAsync is only setting state, so no point in handling the promise
         */
-        /* tslint:disable:no-floating-promises */
+        // tslint:disable-next-line:no-floating-promises
         this._onMountAsync();
-        /* tslint:enable:no-floating-promises */
     }
 
     public render(): React.ReactNode {
-- 
cgit v1.2.3


From 62706d83c404efc55b076900be8e2b0150f9b470 Mon Sep 17 00:00:00 2001
From: August Skare <post@augustskare.no>
Date: Mon, 19 Nov 2018 09:04:00 +0100
Subject: remove constructor from Code component

---
 packages/dev-tools-pages/ts/components/Code.tsx | 5 -----
 1 file changed, 5 deletions(-)

(limited to 'packages/dev-tools-pages/ts')

diff --git a/packages/dev-tools-pages/ts/components/Code.tsx b/packages/dev-tools-pages/ts/components/Code.tsx
index 3bf5506d6..1ddedb112 100644
--- a/packages/dev-tools-pages/ts/components/Code.tsx
+++ b/packages/dev-tools-pages/ts/components/Code.tsx
@@ -135,11 +135,6 @@ const CopyInput = StyledCopyInput as any;
 class Code extends React.Component<CodeProps, CodeState> {
     public state: CodeState = {};
     private readonly _code = React.createRef<HTMLTextAreaElement>();
-
-    constructor(props: CodeProps) {
-        super(props);
-    }
-
     public componentDidMount(): void {
         /*
         * _onMountAsync is only setting state, so no point in handling the promise
-- 
cgit v1.2.3


From cd333e097714693f81f72693cbd351f09939052b Mon Sep 17 00:00:00 2001
From: August Skare <post@augustskare.no>
Date: Mon, 19 Nov 2018 09:05:22 +0100
Subject: rename copied to didCopy in Code state

---
 packages/dev-tools-pages/ts/components/Code.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

(limited to 'packages/dev-tools-pages/ts')

diff --git a/packages/dev-tools-pages/ts/components/Code.tsx b/packages/dev-tools-pages/ts/components/Code.tsx
index 1ddedb112..71555b84d 100644
--- a/packages/dev-tools-pages/ts/components/Code.tsx
+++ b/packages/dev-tools-pages/ts/components/Code.tsx
@@ -24,7 +24,7 @@ interface CodeProps {
 
 interface CodeState {
     hlCode?: string;
-    copied?: boolean;
+    didCopy?: boolean;
 }
 
 const Button = styled(BaseButton)`
@@ -170,7 +170,7 @@ class Code extends React.Component<CodeProps, CodeState> {
                     ) : null}
                 </Base>
                 {navigator.userAgent !== 'ReactSnap' && canCopy ? (
-                    <Button onClick={this._handleCopyAsync}>{this.state.copied ? 'Copied' : 'Copy'}</Button>
+                    <Button onClick={this._handleCopyAsync}>{this.state.didCopy ? 'Copied' : 'Copy'}</Button>
                 ) : null}
             </Container>
         );
@@ -194,17 +194,17 @@ class Code extends React.Component<CodeProps, CodeState> {
         try {
             if ('clipboard' in navigator) {
                 await (navigator as any).clipboard.writeText(this.props.children);
-                this.setState({ copied: true });
+                this.setState({ didCopy: true });
             } else {
                 const lastActive = document.activeElement as HTMLElement;
                 this._code.current.focus();
                 this._code.current.select();
                 document.execCommand('copy');
                 lastActive.focus();
-                this.setState({ copied: true });
+                this.setState({ didCopy: true });
             }
         } catch (error) {
-            this.setState({ copied: false });
+            this.setState({ didCopy: false });
         }
     };
 }
-- 
cgit v1.2.3


From b88e2c54837c4b9113bfe9e78f30d5bc9e80a86e Mon Sep 17 00:00:00 2001
From: August Skare <post@augustskare.no>
Date: Mon, 19 Nov 2018 09:07:05 +0100
Subject: removed unused prop def from footer component

---
 packages/dev-tools-pages/ts/components/Footer.tsx | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

(limited to 'packages/dev-tools-pages/ts')

diff --git a/packages/dev-tools-pages/ts/components/Footer.tsx b/packages/dev-tools-pages/ts/components/Footer.tsx
index d7ed6309a..a278fdfee 100644
--- a/packages/dev-tools-pages/ts/components/Footer.tsx
+++ b/packages/dev-tools-pages/ts/components/Footer.tsx
@@ -116,10 +116,7 @@ const ListItem = styled.li`
     `};
 `;
 
-const ListLink =
-    styled.a <
-    { hoverColor: string } >
-    `
+const ListLink = styled.a`
     display: flex;
     align-items: center;
     :hover {
-- 
cgit v1.2.3


From b811b51af934111f69e30b7ac19b36eda9d29e93 Mon Sep 17 00:00:00 2001
From: August Skare <post@augustskare.no>
Date: Mon, 19 Nov 2018 09:15:50 +0100
Subject: use styled-components theme in logo insted of color prop

---
 packages/dev-tools-pages/ts/components/Header.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

(limited to 'packages/dev-tools-pages/ts')

diff --git a/packages/dev-tools-pages/ts/components/Header.tsx b/packages/dev-tools-pages/ts/components/Header.tsx
index 8c7154623..153746aef 100644
--- a/packages/dev-tools-pages/ts/components/Header.tsx
+++ b/packages/dev-tools-pages/ts/components/Header.tsx
@@ -9,11 +9,11 @@ import { Small } from './Typography';
 
 const Header: React.StatelessComponent<{}> = () => (
     <ThemeContext.Consumer>
-        {({ icon, title, colors }: ContextInterface) => (
+        {({ icon, title }: ContextInterface) => (
             <StyledHeader>
                 <Container>
                     <LogoMark>
-                        <Logo as={icon} color={colors.main} />
+                        <Logo as={icon} />
                         <Title>{title}</Title>
                     </LogoMark>
 
@@ -51,7 +51,7 @@ const LogoMark = styled.div`
 `;
 
 const StyledLogo = styled.div`
-    color: ${props => props.color};
+    color: ${props => props.theme.colors.main};
     width: 1.75rem;
     height: 100%;
 `;
-- 
cgit v1.2.3


From 0b46f44ad37afb17341b394b16e3317e3bbbd285 Mon Sep 17 00:00:00 2001
From: August Skare <post@augustskare.no>
Date: Mon, 19 Nov 2018 09:32:53 +0100
Subject: fix typings for components in header

---
 packages/dev-tools-pages/ts/components/Header.tsx | 9 +++------
 1 file changed, 3 insertions(+), 6 deletions(-)

(limited to 'packages/dev-tools-pages/ts')

diff --git a/packages/dev-tools-pages/ts/components/Header.tsx b/packages/dev-tools-pages/ts/components/Header.tsx
index 153746aef..94714c0af 100644
--- a/packages/dev-tools-pages/ts/components/Header.tsx
+++ b/packages/dev-tools-pages/ts/components/Header.tsx
@@ -13,7 +13,7 @@ const Header: React.StatelessComponent<{}> = () => (
             <StyledHeader>
                 <Container>
                     <LogoMark>
-                        <Logo as={icon} />
+                        <Logo as={icon as 'svg'} />
                         <Title>{title}</Title>
                     </LogoMark>
 
@@ -50,7 +50,7 @@ const LogoMark = styled.div`
     align-items: center;
 `;
 
-const StyledLogo = styled.div`
+const Logo = styled.div`
     color: ${props => props.theme.colors.main};
     width: 1.75rem;
     height: 100%;
@@ -67,13 +67,10 @@ const Title = styled.h1`
     ${media.small`font-size: 1.25rem;`};
 `;
 
-const StyledLink = styled(Small)`
+const Link = styled(Small)`
     :hover {
         text-decoration: underline;
     }
 `;
 
-const Link = StyledLink as any;
-const Logo = StyledLogo as any;
-
 export { Header };
-- 
cgit v1.2.3


From 6e1014a64755757777ddc0a58b2d409590efe42e Mon Sep 17 00:00:00 2001
From: August Skare <post@augustskare.no>
Date: Mon, 19 Nov 2018 09:47:34 +0100
Subject: remove unnecessary children in Interface

---
 packages/dev-tools-pages/ts/components/Base.tsx    | 1 -
 packages/dev-tools-pages/ts/components/Code.tsx    | 1 -
 packages/dev-tools-pages/ts/components/Content.tsx | 1 -
 packages/dev-tools-pages/ts/components/Hero.tsx    | 6 +-----
 packages/dev-tools-pages/ts/components/Intro.tsx   | 9 ++-------
 packages/dev-tools-pages/ts/components/List.tsx    | 1 -
 packages/dev-tools-pages/ts/components/Tabs.tsx    | 7 +------
 7 files changed, 4 insertions(+), 22 deletions(-)

(limited to 'packages/dev-tools-pages/ts')

diff --git a/packages/dev-tools-pages/ts/components/Base.tsx b/packages/dev-tools-pages/ts/components/Base.tsx
index 369a2525d..8e608ecdd 100644
--- a/packages/dev-tools-pages/ts/components/Base.tsx
+++ b/packages/dev-tools-pages/ts/components/Base.tsx
@@ -8,7 +8,6 @@ import { GlobalStyles } from 'ts/globalStyles';
 
 interface BaseProps {
     context: any;
-    children: React.ReactNode;
 }
 
 const Base: React.StatelessComponent<BaseProps> = props => (
diff --git a/packages/dev-tools-pages/ts/components/Code.tsx b/packages/dev-tools-pages/ts/components/Code.tsx
index 71555b84d..e29414d2d 100644
--- a/packages/dev-tools-pages/ts/components/Code.tsx
+++ b/packages/dev-tools-pages/ts/components/Code.tsx
@@ -12,7 +12,6 @@ const isTouch = Boolean(
 );
 
 interface CodeProps {
-    children: React.ReactNode;
     language?: string;
     isLight?: boolean;
     isDiff?: boolean;
diff --git a/packages/dev-tools-pages/ts/components/Content.tsx b/packages/dev-tools-pages/ts/components/Content.tsx
index 328ef0778..55550441c 100644
--- a/packages/dev-tools-pages/ts/components/Content.tsx
+++ b/packages/dev-tools-pages/ts/components/Content.tsx
@@ -23,7 +23,6 @@ const StyledMain =
 
 interface MainProps {
     dark?: boolean;
-    children: React.ReactNode;
 }
 
 const Content: React.StatelessComponent<MainProps> = props => (
diff --git a/packages/dev-tools-pages/ts/components/Hero.tsx b/packages/dev-tools-pages/ts/components/Hero.tsx
index 9db15cb36..8b6d6ade3 100644
--- a/packages/dev-tools-pages/ts/components/Hero.tsx
+++ b/packages/dev-tools-pages/ts/components/Hero.tsx
@@ -7,11 +7,7 @@ import { media } from 'ts/variables';
 import { Button } from './Button';
 import { Beta } from './Typography';
 
-interface HeroProps extends ContextInterface {
-    children: React.ReactNode;
-}
-
-const Hero: React.StatelessComponent<HeroProps> = ({ children }) => (
+const Hero: React.StatelessComponent<ContextInterface> = ({ children }) => (
     <ThemeContext.Consumer>
         {({ subtitle, tagline }: ContextInterface) => (
             <StyledHero>
diff --git a/packages/dev-tools-pages/ts/components/Intro.tsx b/packages/dev-tools-pages/ts/components/Intro.tsx
index ecc926e3c..54b14f237 100644
--- a/packages/dev-tools-pages/ts/components/Intro.tsx
+++ b/packages/dev-tools-pages/ts/components/Intro.tsx
@@ -44,13 +44,8 @@ const StyledIntroAside = styled.div`
     `};
 `;
 
-interface IntroProps {
-    children?: React.ReactNode;
-}
-
 interface IntroLeadProps {
     title: string;
-    children?: React.ReactNode;
 }
 
 const IntroLead: React.StatelessComponent<IntroLeadProps> = props => (
@@ -60,13 +55,13 @@ const IntroLead: React.StatelessComponent<IntroLeadProps> = props => (
     </StyledIntroLead>
 );
 
-const IntroAside: React.StatelessComponent<IntroProps> = props => (
+const IntroAside: React.StatelessComponent<{}> = props => (
     <Breakout>
         <StyledIntroAside>{props.children}</StyledIntroAside>
     </Breakout>
 );
 
-const Intro: React.StatelessComponent<IntroProps> = props => (
+const Intro: React.StatelessComponent<{}> = props => (
     <Container wide={true}>
         <Main>{props.children}</Main>
     </Container>
diff --git a/packages/dev-tools-pages/ts/components/List.tsx b/packages/dev-tools-pages/ts/components/List.tsx
index 39e80de13..5d5f03d2f 100644
--- a/packages/dev-tools-pages/ts/components/List.tsx
+++ b/packages/dev-tools-pages/ts/components/List.tsx
@@ -36,7 +36,6 @@ const StyledItem = styled.li`
 
 interface ListProps {
     items?: [];
-    children?: React.ReactNode;
 }
 
 const List: React.StatelessComponent<ListProps> = props => (
diff --git a/packages/dev-tools-pages/ts/components/Tabs.tsx b/packages/dev-tools-pages/ts/components/Tabs.tsx
index c1d5f6b7f..ece0db866 100644
--- a/packages/dev-tools-pages/ts/components/Tabs.tsx
+++ b/packages/dev-tools-pages/ts/components/Tabs.tsx
@@ -46,11 +46,7 @@ const Root =
     }
 `;
 
-interface TabsProps {
-    children: React.ReactNode;
-}
-
-const Tabs: React.StatelessComponent<TabsProps> = props => (
+const Tabs: React.StatelessComponent<{}> = props => (
     <Breakout>
         <Root>
             <ReactTabs>
@@ -69,7 +65,6 @@ const Tabs: React.StatelessComponent<TabsProps> = props => (
 
 interface TabBlockProps {
     title: string;
-    children: React.ReactNode;
 }
 
 const TabBlock: React.StatelessComponent<TabBlockProps> = props => <React.Fragment>{props.children}</React.Fragment>;
-- 
cgit v1.2.3


From fa24ec1a04577590c791f344d5a2bed27abc2663 Mon Sep 17 00:00:00 2001
From: August Skare <post@augustskare.no>
Date: Mon, 19 Nov 2018 09:50:19 +0100
Subject: clean up tabs component

---
 packages/dev-tools-pages/ts/components/Tabs.tsx | 44 ++++++++++---------------
 1 file changed, 17 insertions(+), 27 deletions(-)

(limited to 'packages/dev-tools-pages/ts')

diff --git a/packages/dev-tools-pages/ts/components/Tabs.tsx b/packages/dev-tools-pages/ts/components/Tabs.tsx
index ece0db866..0a62fa334 100644
--- a/packages/dev-tools-pages/ts/components/Tabs.tsx
+++ b/packages/dev-tools-pages/ts/components/Tabs.tsx
@@ -15,6 +15,7 @@ const StyledTabList = styled(TabList)`
 `;
 
 const StyledTab = styled(Tab)`
+    background-color: ${props => props.theme.colors.secondary};
     height: 2.5rem;
     padding-left: 1rem;
     padding-right: 1rem;
@@ -25,41 +26,30 @@ const StyledTab = styled(Tab)`
     &:not(:first-of-type) {
         margin-left: 0.25rem;
     }
-`;
-
-const Root =
-    styled.div <
-    { colors: any } >
-    `
-    ${StyledTab} {
-        background-color: ${props => props.theme.colors.secondary};
-        &[aria-selected="true"] {
-            background-color: ${colors.gray};
 
-        }
+    &[aria-selected='true'] {
+        background-color: ${colors.gray};
+    }
 
-        &[aria-selected="false"]:focus,
-        &[aria-selected="false"]:hover {
-            background-color: ${props => props.theme.colors.secondary_alt};
-            cursor: pointer;
-        }
+    &[aria-selected='false']:focus,
+    &[aria-selected='false']:hover {
+        background-color: ${props => props.theme.colors.secondary_alt};
+        cursor: pointer;
     }
 `;
 
 const Tabs: React.StatelessComponent<{}> = props => (
     <Breakout>
-        <Root>
-            <ReactTabs>
-                <StyledTabList>
-                    {React.Children.map(props.children, child => {
-                        const { title } = React.cloneElement(child as React.ReactElement<any>).props;
-                        return <StyledTab>{title}</StyledTab>;
-                    })}
-                </StyledTabList>
+        <ReactTabs>
+            <StyledTabList>
+                {React.Children.map(props.children, child => {
+                    const { title } = React.cloneElement(child as React.ReactElement<any>).props;
+                    return <StyledTab>{title}</StyledTab>;
+                })}
+            </StyledTabList>
 
-                {React.Children.map(props.children, child => <TabPanel>{child}</TabPanel>)}
-            </ReactTabs>
-        </Root>
+            {React.Children.map(props.children, child => <TabPanel>{child}</TabPanel>)}
+        </ReactTabs>
     </Breakout>
 );
 
-- 
cgit v1.2.3


From f519f5744e1742e13afe0cd915d6e314fcb579e8 Mon Sep 17 00:00:00 2001
From: August Skare <post@augustskare.no>
Date: Mon, 19 Nov 2018 09:55:03 +0100
Subject: remove new-lines between methods in classes

---
 packages/dev-tools-pages/ts/components/Animations/index.tsx | 5 -----
 packages/dev-tools-pages/ts/components/Code.tsx             | 3 ---
 2 files changed, 8 deletions(-)

(limited to 'packages/dev-tools-pages/ts')

diff --git a/packages/dev-tools-pages/ts/components/Animations/index.tsx b/packages/dev-tools-pages/ts/components/Animations/index.tsx
index da1b31917..da3e78193 100644
--- a/packages/dev-tools-pages/ts/components/Animations/index.tsx
+++ b/packages/dev-tools-pages/ts/components/Animations/index.tsx
@@ -21,16 +21,13 @@ class BaseAnimation extends React.PureComponent<AnimationProps, AnimationState>
         width: undefined,
     };
     private _timeout = undefined as number;
-
     public componentDidMount(): void {
         this._updateAnimationSize();
         window.addEventListener('resize', this._handleResize);
     }
-
     public componentWillUnmount(): void {
         window.removeEventListener('resize', this._handleResize);
     }
-
     public render(): React.ReactNode {
         const { animationData } = this.props;
         const height = this.state.height || this.props.height;
@@ -52,12 +49,10 @@ class BaseAnimation extends React.PureComponent<AnimationProps, AnimationState>
             </Container>
         );
     }
-
     private readonly _handleResize = () => {
         clearTimeout(this._timeout);
         this._timeout = window.setTimeout(this._updateAnimationSize, 50);
     };
-
     private readonly _updateAnimationSize = () => {
         const windowWidth = window.innerWidth;
         let width;
diff --git a/packages/dev-tools-pages/ts/components/Code.tsx b/packages/dev-tools-pages/ts/components/Code.tsx
index e29414d2d..72acc3865 100644
--- a/packages/dev-tools-pages/ts/components/Code.tsx
+++ b/packages/dev-tools-pages/ts/components/Code.tsx
@@ -141,7 +141,6 @@ class Code extends React.Component<CodeProps, CodeState> {
         // tslint:disable-next-line:no-floating-promises
         this._onMountAsync();
     }
-
     public render(): React.ReactNode {
         const { language, isLight, isDiff, children, gutterLength, canCopy } = this.props;
         const { hlCode } = this.state;
@@ -174,7 +173,6 @@ class Code extends React.Component<CodeProps, CodeState> {
             </Container>
         );
     }
-
     private async _onMountAsync(): Promise<void> {
         const { language, children, isDiff, gutter, isEtc } = this.props;
 
@@ -188,7 +186,6 @@ class Code extends React.Component<CodeProps, CodeState> {
             });
         }
     }
-
     private readonly _handleCopyAsync = async () => {
         try {
             if ('clipboard' in navigator) {
-- 
cgit v1.2.3


From e2607980eb2714cfacf75283db272706dcbc0c8c Mon Sep 17 00:00:00 2001
From: August Skare <post@augustskare.no>
Date: Mon, 19 Nov 2018 09:57:18 +0100
Subject: type function call for Container in Animation class

---
 packages/dev-tools-pages/ts/components/Animations/index.tsx | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

(limited to 'packages/dev-tools-pages/ts')

diff --git a/packages/dev-tools-pages/ts/components/Animations/index.tsx b/packages/dev-tools-pages/ts/components/Animations/index.tsx
index da3e78193..7f7b36c21 100644
--- a/packages/dev-tools-pages/ts/components/Animations/index.tsx
+++ b/packages/dev-tools-pages/ts/components/Animations/index.tsx
@@ -69,9 +69,12 @@ class BaseAnimation extends React.PureComponent<AnimationProps, AnimationState>
     };
 }
 
-const Container = styled.div`
+const Container =
+    styled.div <
+    AnimationProps >
+    `
     width: 100%;
-    height: ${(props: { height: number }) => props.height}px;
+    height: ${props => props.height}px;
     position: absolute;
     top: 40%;
     left: 0;
-- 
cgit v1.2.3


From 5865d1f62c8af89bee14c50ec2fea9587a25fc25 Mon Sep 17 00:00:00 2001
From: August Skare <post@augustskare.no>
Date: Mon, 19 Nov 2018 14:56:40 +0100
Subject: strict check for children in contentblock

---
 packages/dev-tools-pages/ts/components/ContentBlock.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'packages/dev-tools-pages/ts')

diff --git a/packages/dev-tools-pages/ts/components/ContentBlock.tsx b/packages/dev-tools-pages/ts/components/ContentBlock.tsx
index 66e0331ab..2818858dc 100644
--- a/packages/dev-tools-pages/ts/components/ContentBlock.tsx
+++ b/packages/dev-tools-pages/ts/components/ContentBlock.tsx
@@ -69,7 +69,7 @@ const ContentBlock: React.StatelessComponent<ContentBlockProps> = props => {
     return (
         <Base>
             <Title color={props.colors}>{props.title}</Title>
-            {children ? <Content>{children}</Content> : null}
+            {children === undefined ? null : <Content>{children}</Content>}
         </Base>
     );
 };
-- 
cgit v1.2.3


From 8d3e6f77b751b02bbca72e17ce9c86f54b3fbaac Mon Sep 17 00:00:00 2001
From: August Skare <post@augustskare.no>
Date: Mon, 19 Nov 2018 15:13:52 +0100
Subject: cleand up code component

---
 packages/dev-tools-pages/ts/components/Code.tsx | 39 +++++++++++--------------
 1 file changed, 17 insertions(+), 22 deletions(-)

(limited to 'packages/dev-tools-pages/ts')

diff --git a/packages/dev-tools-pages/ts/components/Code.tsx b/packages/dev-tools-pages/ts/components/Code.tsx
index 72acc3865..8415f1179 100644
--- a/packages/dev-tools-pages/ts/components/Code.tsx
+++ b/packages/dev-tools-pages/ts/components/Code.tsx
@@ -68,7 +68,8 @@ const Base =
             : ``}
 `;
 
-const StyledCodeDiff = styled(({ gutterLength, children, ...props }: any) => <code {...props}>{children}</code>)`
+const CodeDiff: React.StatelessComponent<any> = ({ gutterLength, ...props }) => <code {...props} />;
+const StyledCodeDiff = styled(CodeDiff)`
     ::before {
         content: '';
         width: calc(0.75rem + ${props => props.gutterLength}ch);
@@ -108,9 +109,12 @@ const StyledCodeDiff = styled(({ gutterLength, children, ...props }: any) => <co
     }
 `;
 
-const StyledPre = styled.pre`
+const StyledPre =
+    styled.pre <
+    CodeProps >
+    `
     margin: 0;
-    ${(props: { isDiff: boolean }) =>
+    ${props =>
         !props.isDiff
             ? `
         padding: 1.5rem;
@@ -129,15 +133,11 @@ const StyledCopyInput = styled.textarea`
     z-index: -1;
 `;
 
-const CopyInput = StyledCopyInput as any;
-
 class Code extends React.Component<CodeProps, CodeState> {
     public state: CodeState = {};
     private readonly _code = React.createRef<HTMLTextAreaElement>();
     public componentDidMount(): void {
-        /*
-        * _onMountAsync is only setting state, so no point in handling the promise
-        */
+        // _onMountAsync is only setting state, so no point in handling the promise
         // tslint:disable-next-line:no-floating-promises
         this._onMountAsync();
     }
@@ -145,26 +145,21 @@ class Code extends React.Component<CodeProps, CodeState> {
         const { language, isLight, isDiff, children, gutterLength, canCopy } = this.props;
         const { hlCode } = this.state;
 
-        let CodeComponent = 'code';
-        let codeProps = {};
-        if (isDiff) {
-            codeProps = { gutterLength };
-            CodeComponent = StyledCodeDiff as any;
-        }
-
         return (
             <Container>
                 <Base language={language} isDiff={isDiff} isLight={isLight}>
                     <StyledPre isDiff={isDiff}>
-                        <CodeComponent
-                            {...codeProps}
-                            dangerouslySetInnerHTML={hlCode ? { __html: this.state.hlCode } : null}
-                        >
-                            {hlCode === undefined ? children : null}
-                        </CodeComponent>
+                        {hlCode === undefined ? (
+                            <code>{children}</code>
+                        ) : (
+                            <StyledCodeDiff
+                                gutterLength={gutterLength}
+                                dangerouslySetInnerHTML={hlCode ? { __html: this.state.hlCode } : null}
+                            />
+                        )}
                     </StyledPre>
                     {!('clipboard' in navigator) ? (
-                        <CopyInput readOnly={true} aria-hidden="true" ref={this._code} value={children} />
+                        <StyledCopyInput readOnly={true} aria-hidden="true" ref={this._code} value={children} />
                     ) : null}
                 </Base>
                 {navigator.userAgent !== 'ReactSnap' && canCopy ? (
-- 
cgit v1.2.3


From 38949f7ea4f69c58f7b8646cb360981ea5b6d6ee Mon Sep 17 00:00:00 2001
From: August Skare <post@augustskare.no>
Date: Mon, 19 Nov 2018 15:14:01 +0100
Subject: added missing ;

---
 packages/dev-tools-pages/ts/components/List.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'packages/dev-tools-pages/ts')

diff --git a/packages/dev-tools-pages/ts/components/List.tsx b/packages/dev-tools-pages/ts/components/List.tsx
index 5d5f03d2f..12d5d67a9 100644
--- a/packages/dev-tools-pages/ts/components/List.tsx
+++ b/packages/dev-tools-pages/ts/components/List.tsx
@@ -29,7 +29,7 @@ const StyledItem = styled.li`
     :not(:last-child) {
         margin-bottom: 0.5625rem;
         ${media.small`
-            margin-bottom: 0.375rem
+            margin-bottom: 0.375rem;
         `};
     }
 `;
-- 
cgit v1.2.3


From 881655bb57e93fa1cf344585cda1653c995f1411 Mon Sep 17 00:00:00 2001
From: August Skare <post@augustskare.no>
Date: Mon, 19 Nov 2018 15:18:07 +0100
Subject: separate component for inlinecode component

---
 packages/dev-tools-pages/ts/components/InlineCode.tsx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

(limited to 'packages/dev-tools-pages/ts')

diff --git a/packages/dev-tools-pages/ts/components/InlineCode.tsx b/packages/dev-tools-pages/ts/components/InlineCode.tsx
index 00e625d66..561666b0f 100644
--- a/packages/dev-tools-pages/ts/components/InlineCode.tsx
+++ b/packages/dev-tools-pages/ts/components/InlineCode.tsx
@@ -8,7 +8,11 @@ interface InlineCodeProps {
     children: React.ReactNode;
 }
 
-const InlineCode = styled(({ isAlt, children, ...props }: InlineCodeProps) => <code {...props}>{children}</code>)`
+const Code: React.StatelessComponent<InlineCodeProps> = ({ isAlt, children, ...props }) => (
+    <code {...props}>{children}</code>
+);
+
+const InlineCode = styled(Code)`
     background-color: ${props => (props.isAlt ? '#E5E8E9' : colors.blueGray)};
     padding: 0.3125rem;
 `;
-- 
cgit v1.2.3


From 31d07fdac80a2a546646b1eb232fa7dd6319ce83 Mon Sep 17 00:00:00 2001
From: August Skare <post@augustskare.no>
Date: Mon, 19 Nov 2018 17:27:00 +0100
Subject: rename all files and directories to lowercase

---
 .../ts/components/Animations/Compiler/data.json    |   1 -
 .../ts/components/Animations/Compiler/index.tsx    |  11 -
 .../ts/components/Animations/Cov/data.json         |   1 -
 .../ts/components/Animations/Cov/index.tsx         |  11 -
 .../ts/components/Animations/Profiler/data.json    |   1 -
 .../ts/components/Animations/Profiler/index.tsx    |  11 -
 .../ts/components/Animations/Trace/data.json       |   1 -
 .../ts/components/Animations/Trace/index.tsx       |  11 -
 .../ts/components/Animations/index.tsx             |  96 ---------
 packages/dev-tools-pages/ts/components/Base.tsx    |  26 ---
 .../dev-tools-pages/ts/components/Breakout.tsx     |  12 --
 packages/dev-tools-pages/ts/components/Button.tsx  |  55 -----
 packages/dev-tools-pages/ts/components/Code.tsx    | 203 -------------------
 .../dev-tools-pages/ts/components/Compiler.tsx     |  89 --------
 .../dev-tools-pages/ts/components/Container.tsx    |  16 --
 packages/dev-tools-pages/ts/components/Content.tsx |  34 ----
 .../dev-tools-pages/ts/components/ContentBlock.tsx |  77 -------
 packages/dev-tools-pages/ts/components/Footer.tsx  | 132 ------------
 packages/dev-tools-pages/ts/components/Header.tsx  |  76 -------
 packages/dev-tools-pages/ts/components/Hero.tsx    |  63 ------
 .../dev-tools-pages/ts/components/InlineCode.tsx   |  20 --
 packages/dev-tools-pages/ts/components/Intro.tsx   |  70 -------
 packages/dev-tools-pages/ts/components/List.tsx    |  49 -----
 packages/dev-tools-pages/ts/components/Tabs.tsx    |  64 ------
 packages/dev-tools-pages/ts/components/Trace.tsx   | 223 ---------------------
 .../dev-tools-pages/ts/components/Typography.tsx   |  33 ---
 .../ts/components/animations/compiler/data.json    |   1 +
 .../ts/components/animations/compiler/index.tsx    |  11 +
 .../ts/components/animations/cov/data.json         |   1 +
 .../ts/components/animations/cov/index.tsx         |  11 +
 .../ts/components/animations/index.tsx             |  96 +++++++++
 .../ts/components/animations/profiler/data.json    |   1 +
 .../ts/components/animations/profiler/index.tsx    |  11 +
 .../ts/components/animations/trace/data.json       |   1 +
 .../ts/components/animations/trace/index.tsx       |  11 +
 packages/dev-tools-pages/ts/components/base.tsx    |  26 +++
 .../dev-tools-pages/ts/components/breakout.tsx     |  12 ++
 packages/dev-tools-pages/ts/components/button.tsx  |  55 +++++
 packages/dev-tools-pages/ts/components/code.tsx    | 203 +++++++++++++++++++
 .../dev-tools-pages/ts/components/compiler.tsx     |  89 ++++++++
 .../dev-tools-pages/ts/components/container.tsx    |  16 ++
 .../ts/components/content-block.tsx                |  77 +++++++
 packages/dev-tools-pages/ts/components/content.tsx |  34 ++++
 packages/dev-tools-pages/ts/components/footer.tsx  | 132 ++++++++++++
 packages/dev-tools-pages/ts/components/header.tsx  |  76 +++++++
 packages/dev-tools-pages/ts/components/hero.tsx    |  63 ++++++
 .../dev-tools-pages/ts/components/inline-code.tsx  |  20 ++
 packages/dev-tools-pages/ts/components/intro.tsx   |  70 +++++++
 packages/dev-tools-pages/ts/components/list.tsx    |  49 +++++
 packages/dev-tools-pages/ts/components/tabs.tsx    |  64 ++++++
 packages/dev-tools-pages/ts/components/trace.tsx   | 223 +++++++++++++++++++++
 .../dev-tools-pages/ts/components/typography.tsx   |  33 +++
 packages/dev-tools-pages/ts/pages/Compiler.tsx     | 170 ----------------
 packages/dev-tools-pages/ts/pages/Cov.tsx          | 149 --------------
 packages/dev-tools-pages/ts/pages/Profiler.tsx     | 146 --------------
 packages/dev-tools-pages/ts/pages/Trace.tsx        | 116 -----------
 packages/dev-tools-pages/ts/pages/compiler.tsx     | 170 ++++++++++++++++
 packages/dev-tools-pages/ts/pages/cov.tsx          | 149 ++++++++++++++
 packages/dev-tools-pages/ts/pages/profiler.tsx     | 146 ++++++++++++++
 packages/dev-tools-pages/ts/pages/trace.tsx        | 116 +++++++++++
 60 files changed, 1967 insertions(+), 1967 deletions(-)
 delete mode 100644 packages/dev-tools-pages/ts/components/Animations/Compiler/data.json
 delete mode 100644 packages/dev-tools-pages/ts/components/Animations/Compiler/index.tsx
 delete mode 100644 packages/dev-tools-pages/ts/components/Animations/Cov/data.json
 delete mode 100644 packages/dev-tools-pages/ts/components/Animations/Cov/index.tsx
 delete mode 100644 packages/dev-tools-pages/ts/components/Animations/Profiler/data.json
 delete mode 100644 packages/dev-tools-pages/ts/components/Animations/Profiler/index.tsx
 delete mode 100644 packages/dev-tools-pages/ts/components/Animations/Trace/data.json
 delete mode 100644 packages/dev-tools-pages/ts/components/Animations/Trace/index.tsx
 delete mode 100644 packages/dev-tools-pages/ts/components/Animations/index.tsx
 delete mode 100644 packages/dev-tools-pages/ts/components/Base.tsx
 delete mode 100644 packages/dev-tools-pages/ts/components/Breakout.tsx
 delete mode 100644 packages/dev-tools-pages/ts/components/Button.tsx
 delete mode 100644 packages/dev-tools-pages/ts/components/Code.tsx
 delete mode 100644 packages/dev-tools-pages/ts/components/Compiler.tsx
 delete mode 100644 packages/dev-tools-pages/ts/components/Container.tsx
 delete mode 100644 packages/dev-tools-pages/ts/components/Content.tsx
 delete mode 100644 packages/dev-tools-pages/ts/components/ContentBlock.tsx
 delete mode 100644 packages/dev-tools-pages/ts/components/Footer.tsx
 delete mode 100644 packages/dev-tools-pages/ts/components/Header.tsx
 delete mode 100644 packages/dev-tools-pages/ts/components/Hero.tsx
 delete mode 100644 packages/dev-tools-pages/ts/components/InlineCode.tsx
 delete mode 100644 packages/dev-tools-pages/ts/components/Intro.tsx
 delete mode 100644 packages/dev-tools-pages/ts/components/List.tsx
 delete mode 100644 packages/dev-tools-pages/ts/components/Tabs.tsx
 delete mode 100644 packages/dev-tools-pages/ts/components/Trace.tsx
 delete mode 100644 packages/dev-tools-pages/ts/components/Typography.tsx
 create mode 100644 packages/dev-tools-pages/ts/components/animations/compiler/data.json
 create mode 100644 packages/dev-tools-pages/ts/components/animations/compiler/index.tsx
 create mode 100644 packages/dev-tools-pages/ts/components/animations/cov/data.json
 create mode 100644 packages/dev-tools-pages/ts/components/animations/cov/index.tsx
 create mode 100644 packages/dev-tools-pages/ts/components/animations/index.tsx
 create mode 100644 packages/dev-tools-pages/ts/components/animations/profiler/data.json
 create mode 100644 packages/dev-tools-pages/ts/components/animations/profiler/index.tsx
 create mode 100644 packages/dev-tools-pages/ts/components/animations/trace/data.json
 create mode 100644 packages/dev-tools-pages/ts/components/animations/trace/index.tsx
 create mode 100644 packages/dev-tools-pages/ts/components/base.tsx
 create mode 100644 packages/dev-tools-pages/ts/components/breakout.tsx
 create mode 100644 packages/dev-tools-pages/ts/components/button.tsx
 create mode 100644 packages/dev-tools-pages/ts/components/code.tsx
 create mode 100644 packages/dev-tools-pages/ts/components/compiler.tsx
 create mode 100644 packages/dev-tools-pages/ts/components/container.tsx
 create mode 100644 packages/dev-tools-pages/ts/components/content-block.tsx
 create mode 100644 packages/dev-tools-pages/ts/components/content.tsx
 create mode 100644 packages/dev-tools-pages/ts/components/footer.tsx
 create mode 100644 packages/dev-tools-pages/ts/components/header.tsx
 create mode 100644 packages/dev-tools-pages/ts/components/hero.tsx
 create mode 100644 packages/dev-tools-pages/ts/components/inline-code.tsx
 create mode 100644 packages/dev-tools-pages/ts/components/intro.tsx
 create mode 100644 packages/dev-tools-pages/ts/components/list.tsx
 create mode 100644 packages/dev-tools-pages/ts/components/tabs.tsx
 create mode 100644 packages/dev-tools-pages/ts/components/trace.tsx
 create mode 100644 packages/dev-tools-pages/ts/components/typography.tsx
 delete mode 100644 packages/dev-tools-pages/ts/pages/Compiler.tsx
 delete mode 100644 packages/dev-tools-pages/ts/pages/Cov.tsx
 delete mode 100644 packages/dev-tools-pages/ts/pages/Profiler.tsx
 delete mode 100644 packages/dev-tools-pages/ts/pages/Trace.tsx
 create mode 100644 packages/dev-tools-pages/ts/pages/compiler.tsx
 create mode 100644 packages/dev-tools-pages/ts/pages/cov.tsx
 create mode 100644 packages/dev-tools-pages/ts/pages/profiler.tsx
 create mode 100644 packages/dev-tools-pages/ts/pages/trace.tsx

(limited to 'packages/dev-tools-pages/ts')

diff --git a/packages/dev-tools-pages/ts/components/Animations/Compiler/data.json b/packages/dev-tools-pages/ts/components/Animations/Compiler/data.json
deleted file mode 100644
index 6b10e537b..000000000
--- a/packages/dev-tools-pages/ts/components/Animations/Compiler/data.json
+++ /dev/null
@@ -1 +0,0 @@
-{"v":"5.4.1","fr":30,"ip":0,"op":420,"w":4300,"h":1400,"nm":"header-compiler","ddd":0,"assets":[],"layers":[{"ddd":0,"ind":2,"ty":4,"nm":"Path Copy 3","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[328.5,911.5,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-61.75,-99.75],[99.75,61.75],[61.75,99.75],[-99.75,-61.75]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.117646999657,0.678430974483,0.803921997547,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path Copy 3","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":3,"ty":4,"nm":"Path","parent":16,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[-280,-180,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-39.25,87.75],[87.75,-39.25],[39.25,-87.75],[-87.75,39.25]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.117646999657,0.678430974483,0.803921997547,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"fl","c":{"a":0,"k":[1,1,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":4,"ty":4,"nm":"Path","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[1261.5,738.5,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[15.75,82.75],[82.75,15.75],[-15.75,-82.75],[-82.75,-15.75]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.117646999657,0.678430974483,0.803921997547,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"fl","c":{"a":0,"k":[1,1,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":5,"ty":4,"nm":"Path","parent":12,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[370,-209,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[23.25,-23.25],[-23.25,23.25]],"c":false},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.117646999657,0.678430974483,0.803921997547,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":6,"ty":4,"nm":"Path","parent":12,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[347,-269,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-60.25,-60.25],[60.25,60.25]],"c":false},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.117646999657,0.678430974483,0.803921997547,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":7,"ty":4,"nm":"Path","parent":12,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[330,-250,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-37.25,-84.25],[84.25,37.25],[37.25,84.25],[-84.25,-37.25]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.117646999657,0.678430974483,0.803921997547,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":8,"ty":4,"nm":"Path Copy","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":180,"s":[449.5,348.5,0],"e":[223.5,574.5,0],"to":[-37.6666679382324,37.6666679382324,0],"ti":[37.6666679382324,-37.6666679382324,0]},{"i":{"x":0.667,"y":0.667},"o":{"x":0.333,"y":0.333},"n":"0p667_0p667_0p333_0p333","t":210,"s":[223.5,574.5,0],"e":[223.5,574.5,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":390.5,"s":[223.5,574.5,0],"e":[449.5,348.5,0],"to":[37.6666679382324,-37.6666679382324,0],"ti":[-37.6666679382324,37.6666679382324,0]},{"t":420}],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[9.42,-69.25],[-69.25,9.42],[-9.42,69.25],[69.25,-9.42]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.117646999657,0.678430974483,0.803921997547,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path Copy","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"fl","c":{"a":0,"k":[1,1,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":9,"ty":4,"nm":"Shape Layer 2","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[2150,700,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":180,"s":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-1935,-90],[-1765,-260]],"c":false}],"e":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-2020,87],[-1946,13]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":210,"s":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-2020,87],[-1946,13]],"c":false}],"e":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-2020,87],[-1946,13]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":390,"s":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-2020,87],[-1946,13]],"c":false}],"e":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-1935,-90],[-1765,-260]],"c":false}]},{"t":420}],"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.117647066303,0.678431372549,0.803921628466,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":4,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"fl","c":{"a":0,"k":[1,0,0,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":true},{"ty":"tr","p":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":180,"s":[1,-1],"e":[0,0],"to":[-0.16666667163372,0.16666667163372],"ti":[0.16666667163372,-0.16666667163372]},{"i":{"x":0.667,"y":0.667},"o":{"x":0.333,"y":0.333},"n":"0p667_0p667_0p333_0p333","t":210,"s":[0,0],"e":[0,0],"to":[0,0],"ti":[0,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":390,"s":[0,0],"e":[1,-1],"to":[0.16666667163372,-0.16666667163372],"ti":[-0.16666667163372,0.16666667163372]},{"t":420}],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Shape 1","np":3,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":527,"st":0,"bm":0},{"ddd":0,"ind":10,"ty":4,"nm":"Shape Layer 1","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":180,"s":[2150,700,0],"e":[1920,930,0],"to":[-38.3333320617676,38.3333320617676,0],"ti":[38.3333320617676,-38.3333320617676,0]},{"i":{"x":0.667,"y":0.667},"o":{"x":0.333,"y":0.333},"n":"0p667_0p667_0p333_0p333","t":210,"s":[1920,930,0],"e":[1920,930,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":390,"s":[1920,930,0],"e":[2150,700,0],"to":[38.3333320617676,-38.3333320617676,0],"ti":[-38.3333320617676,38.3333320617676,0]},{"t":420}],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":180,"s":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-1806,-241],[-1748,-183]],"c":false}],"e":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-1750,-185],[-1748,-183]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":210,"s":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-1750,-185],[-1748,-183]],"c":true}],"e":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-1750,-185],[-1748,-183]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":390,"s":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-1750,-185],[-1748,-183]],"c":true}],"e":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-1806,-241],[-1748,-183]],"c":false}]},{"t":420}],"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.117647066303,0.678431372549,0.803921628466,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":4,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"fl","c":{"a":0,"k":[1,1,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":true},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Shape 1","np":3,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":527,"st":0,"bm":0},{"ddd":0,"ind":11,"ty":4,"nm":"Path Copy 2","parent":8,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[-134,194,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":180,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[28.03,-56.75],[-56.75,28.03],[-28.03,56.75],[56.75,-28.03]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[56.53,-28.25],[20.5,9.03],[20.72,9.25],[56.75,-28.03]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":210,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[56.53,-28.25],[20.5,9.03],[20.72,9.25],[56.75,-28.03]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[56.53,-28.25],[20.5,9.03],[20.72,9.25],[56.75,-28.03]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":391,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[56.53,-28.25],[20.5,9.03],[20.72,9.25],[56.75,-28.03]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[28.03,-56.75],[-56.75,28.03],[-28.03,56.75],[56.75,-28.03]],"c":true}]},{"t":421}],"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.117646999657,0.678430974483,0.803921997547,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path Copy 2","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":12,"ty":4,"nm":"Big block","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":90,"s":[571.5,588.5,0],"e":[697.5,462.5,0],"to":[21,-21,0],"ti":[-21,21,0]},{"i":{"x":0.667,"y":0.667},"o":{"x":0.167,"y":0.167},"n":"0p667_0p667_0p167_0p167","t":120,"s":[697.5,462.5,0],"e":[697.5,462.5,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.833,"y":1},"o":{"x":0.333,"y":0},"n":"0p833_1_0p333_0","t":300,"s":[697.5,462.5,0],"e":[571.5,588.5,0],"to":[-21,21,0],"ti":[21,-21,0]},{"t":330}],"ix":2},"a":{"a":0,"k":[2,-2,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"st","c":{"a":0,"k":[0.117646998985,0.67843095368,0.803921987496,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"fl","c":{"a":0,"k":[1,1,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Shape 1","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[60.75,-182.25],[-182.25,60.75],[-60.75,182.25],[182.25,-60.75]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.117646999657,0.678430974483,0.803921997547,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":2,"cix":2,"ix":2,"mn":"ADBE Vector Group","hd":false},{"ty":"fl","c":{"a":0,"k":[1,1,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":13,"ty":4,"nm":"Path Copy 4","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[389.5,770.5,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":90,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-92.25,-29.25],[-92.25,-29.25],[29.25,92.25],[29.25,92.25]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-29.25,-92.25],[-92.25,-29.25],[29.25,92.25],[92.25,29.25]],"c":true}]},{"t":120}],"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.117646999657,0.678430974483,0.803921997547,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path Copy 4","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":14,"ty":4,"nm":"Path Copy 9","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":90,"s":[273,647,0],"e":[317,695,0],"to":[7.33333349227905,8,0],"ti":[-7.33333349227905,-8,0]},{"i":{"x":0.667,"y":0.667},"o":{"x":0.333,"y":0.333},"n":"0p667_0p667_0p333_0p333","t":120,"s":[317,695,0],"e":[317,695,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.833,"y":1},"o":{"x":0.333,"y":0},"n":"0p833_1_0p333_0","t":300,"s":[317,695,0],"e":[273,647,0],"to":[-7.33333349227905,-8,0],"ti":[7.33333349227905,8,0]},{"t":330}],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[30.75,-31.25],[-31.5,31]],"c":false},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.117646999657,0.678430974483,0.803921997547,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path Copy 9","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":15,"ty":4,"nm":"Path Copy 8","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":90,"s":[329,832,0],"e":[349,812,0],"to":[3.33333325386047,-3.33333325386047,0],"ti":[-3.33333325386047,3.33333325386047,0]},{"i":{"x":0.667,"y":0.667},"o":{"x":0.333,"y":0.333},"n":"0p667_0p667_0p333_0p333","t":120,"s":[349,812,0],"e":[349,812,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.833,"y":1},"o":{"x":0.333,"y":0},"n":"0p833_1_0p333_0","t":300,"s":[349,812,0],"e":[329,832,0],"to":[-3.33333325386047,3.33333325386047,0],"ti":[3.33333325386047,-3.33333325386047,0]},{"t":330}],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-61,-61],[61,61]],"c":false},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.117646999657,0.678430974483,0.803921997547,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path Copy 8","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":16,"ty":4,"nm":"wide box","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":90,"s":[971.5,988.5,0],"e":[1096.5,864.5,0],"to":[10.0566339492798,-9.97618103027344,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":0.667},"o":{"x":0.333,"y":0.333},"n":"0p667_0p667_0p333_0p333","t":120,"s":[1096.5,864.5,0],"e":[1096.5,864.5,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.833,"y":1},"o":{"x":0.333,"y":0},"n":"0p833_1_0p333_0","t":300,"s":[1096.5,864.5,0],"e":[971.5,988.5,0],"to":[0,0,0],"ti":[-20.8333339691162,20.6666660308838,0]},{"t":330}],"ix":2},"a":{"a":0,"k":[-1,1,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-129.25,-52.25],[-52.25,-129.25],[129.25,52.25],[52.25,129.25]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.117646999657,0.678430974483,0.803921997547,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"fl","c":{"a":0,"k":[1,1,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":17,"ty":4,"nm":"Path","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":90,"s":[993,766,0],"e":[1071,688,0],"to":[13,-13,0],"ti":[-13,13,0]},{"i":{"x":0.667,"y":0.667},"o":{"x":0.333,"y":0.333},"n":"0p667_0p667_0p333_0p333","t":120,"s":[1071,688,0],"e":[1071,688,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.833,"y":1},"o":{"x":0.333,"y":0},"n":"0p833_1_0p333_0","t":300,"s":[1071,688,0],"e":[993,766,0],"to":[-13,13,0],"ti":[13,-13,0]},{"t":330}],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-89.5,-89.5],[89.5,89.5]],"c":false},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.117646999657,0.678430974483,0.803921997547,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":18,"ty":4,"nm":"Path","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":90,"s":[1115,850,0],"e":[1311.5,799.5,0],"to":[18.5410747528076,-4.90381097793579,0],"ti":[-5.73690891265869,1.51731848716736,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":120,"s":[1311.5,799.5,0],"e":[1311.5,799.5,0],"to":[33.0833320617676,-8.75,0],"ti":[5.73690891265869,-1.51731848716736,0]},{"i":{"x":0.833,"y":1},"o":{"x":0.333,"y":0},"n":"0p833_1_0p333_0","t":300,"s":[1311.5,799.5,0],"e":[1115,850,0],"to":[-5.73690891265869,1.51731848716736,0],"ti":[-33.0833320617676,8.75,0]},{"t":330}],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[103.689,103.689,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[30.5,-30.5],[-30.5,30.5]],"c":false},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.117646999657,0.678430974483,0.803921997547,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":19,"ty":4,"nm":"Path","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[1011.5,748.5,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.833,"y":0.833},"o":{"x":0.333,"y":0},"n":"0p833_0p833_0p333_0","t":90,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[120.75,57.75],[58.25,120.25],[-120.25,-58.25],[-57.75,-120.75]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[120.514,57.986],[119.427,59.073],[-59.073,-119.427],[-57.986,-120.514]],"c":true}]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"n":"0p833_0p833_0p167_0p167","t":120,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[120.514,57.986],[119.427,59.073],[-59.073,-119.427],[-57.986,-120.514]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[120.514,57.986],[119.427,59.073],[-59.073,-119.427],[-57.986,-120.514]],"c":true}]},{"i":{"x":0.833,"y":1},"o":{"x":0.167,"y":0.167},"n":"0p833_1_0p167_0p167","t":300,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[120.514,57.986],[119.427,59.073],[-59.073,-119.427],[-57.986,-120.514]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[120.75,57.75],[58.25,120.25],[-120.25,-58.25],[-57.75,-120.75]],"c":true}]},{"t":330}],"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.117646999657,0.678430974483,0.803921997547,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 1","np":0,"cix":2,"ix":2,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":20,"ty":4,"nm":"Path","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[3620,905,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[33,163],[-163,-33],[-33,-163],[163,33]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.117646999657,0.678430974483,0.803921997547,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":21,"ty":4,"nm":"Path","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[3274,751,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[86,-140],[140,-86],[-86,140],[-140,86]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.117646999657,0.678430974483,0.803921997547,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":22,"ty":4,"nm":"Path","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[3770,475,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-2,-162],[162,2],[2,162],[-162,-2]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.117646999657,0.678430974483,0.803921997547,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":23,"ty":4,"nm":"Path","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[3465,340,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[80,-24],[24,-80],[-82,26],[-26,82]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.117646999657,0.678430974483,0.803921997547,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":24,"ty":4,"nm":"Path","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":90,"s":[3420.5,966.5,0],"e":[3389.5,996.5,0],"to":[-5.16666650772095,5,0],"ti":[5.16666650772095,-5,0]},{"i":{"x":0.667,"y":0.667},"o":{"x":0.167,"y":0.167},"n":"0p667_0p667_0p167_0p167","t":120,"s":[3389.5,996.5,0],"e":[3389.5,996.5,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":300,"s":[3389.5,996.5,0],"e":[3420.5,966.5,0],"to":[5.16666650772095,-5,0],"ti":[-5.16666650772095,5,0]},{"t":330}],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":90,"s":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-62.75,-62.75],[-62.25,-62.25]],"c":false}],"e":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-62.75,-62.75],[62.75,62.75]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.167,"y":0},"n":"0p667_1_0p167_0","t":120,"s":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-62.75,-62.75],[62.75,62.75]],"c":false}],"e":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-62.75,-62.75],[62.75,62.75]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":300,"s":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-62.75,-62.75],[62.75,62.75]],"c":false}],"e":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-62.75,-62.75],[-62.25,-62.25]],"c":false}]},{"t":330}],"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.117646999657,0.678430974483,0.803921997547,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":25,"ty":4,"nm":"Path","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":90,"s":[3219.5,915.5,0],"e":[3339.5,1035.5,0],"to":[20,20,0],"ti":[-20,-20,0]},{"i":{"x":0.667,"y":0.667},"o":{"x":0.167,"y":0.167},"n":"0p667_0p667_0p167_0p167","t":120,"s":[3339.5,1035.5,0],"e":[3339.5,1035.5,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":300,"s":[3339.5,1035.5,0],"e":[3219.5,915.5,0],"to":[-20,-20,0],"ti":[20,20,0]},{"t":330}],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":90,"s":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[38.25,-38.25],[38.25,-38.25]],"c":false}],"e":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[38.25,-38.25],[-38.25,38.25]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.167,"y":0},"n":"0p667_1_0p167_0","t":120,"s":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[38.25,-38.25],[-38.25,38.25]],"c":false}],"e":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[38.25,-38.25],[-38.25,38.25]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":300,"s":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[38.25,-38.25],[-38.25,38.25]],"c":false}],"e":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[38.25,-38.25],[38.25,-38.25]],"c":false}]},{"t":330}],"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.117646999657,0.678430974483,0.803921997547,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":26,"ty":4,"nm":"Path","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[3344,1041,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":90,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[42,42],[0,0],[0,0],[0,0]],"v":[[-25,-101],[-24,-100],[-24.5,-99.5],[-25.5,-100.5]],"c":false}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-25,-101],[101,25],[25,101],[-101,-25]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.167,"y":0},"n":"0p667_1_0p167_0","t":120,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-25,-101],[101,25],[25,101],[-101,-25]],"c":false}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-25,-101],[101,25],[25,101],[-101,-25]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":300,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-25,-101],[101,25],[25,101],[-101,-25]],"c":false}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[42,42],[0,0],[0,0],[0,0]],"v":[[-25,-101],[-24,-100],[-24.5,-99.5],[-25.5,-100.5]],"c":false}]},{"t":330}],"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.117646999657,0.678430974483,0.803921997547,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":27,"ty":4,"nm":"Path","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":90,"s":[3142.5,483.5,0],"e":[3266.5,359.5,0],"to":[20.6666660308838,-20.6666660308838,0],"ti":[-20.6666660308838,20.6666660308838,0]},{"i":{"x":0.667,"y":0.667},"o":{"x":0.333,"y":0.333},"n":"0p667_0p667_0p333_0p333","t":120,"s":[3266.5,359.5,0],"e":[3266.5,359.5,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":300,"s":[3266.5,359.5,0],"e":[3142.5,483.5,0],"to":[-20.6666660308838,20.6666660308838,0],"ti":[20.6666660308838,-20.6666660308838,0]},{"t":330}],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":90,"s":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-73.25,-73.25],[73.25,73.25]],"c":false}],"e":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-33.25,-33.25],[73.25,73.25]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":120,"s":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-33.25,-33.25],[73.25,73.25]],"c":false}],"e":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-33.25,-33.25],[73.25,73.25]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":300,"s":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-33.25,-33.25],[73.25,73.25]],"c":false}],"e":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-73.25,-73.25],[73.25,73.25]],"c":false}]},{"t":329.5}],"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.117646999657,0.678430974483,0.803921997547,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":28,"ty":4,"nm":"Path","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":90,"s":[3163,420,0],"e":[3327,588,0],"to":[27.3333339691162,28,0],"ti":[-27.3333339691162,-28,0]},{"i":{"x":0.667,"y":0.667},"o":{"x":0.333,"y":0.333},"n":"0p667_0p667_0p333_0p333","t":120,"s":[3327,588,0],"e":[3327,588,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":300,"s":[3327,588,0],"e":[3163,420,0],"to":[-27.3333339691162,-28,0],"ti":[27.3333339691162,28,0]},{"t":330}],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":90,"s":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[42,-42],[-42,42]],"c":false}],"e":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[42,-42],[42.312,-42.125]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":120,"s":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[42,-42],[42.312,-42.125]],"c":false}],"e":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[42,-42],[42.312,-42.125]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":300,"s":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[42,-42],[42.312,-42.125]],"c":false}],"e":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[42,-42],[-42,42]],"c":false}]},{"t":330}],"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.117646999657,0.678430974483,0.803921997547,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":29,"ty":4,"nm":"Path","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[3184,441,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":90,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[31,115],[-115,-31],[-31,-115],[115,31]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[113.5,31.5],[8,-74],[8,-74],[113.5,31.5]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":120,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[113.5,31.5],[8,-74],[8,-74],[113.5,31.5]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[113.5,31.5],[8,-74],[8,-74],[113.5,31.5]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":300,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[113.5,31.5],[8,-74],[8,-74],[113.5,31.5]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[31,115],[-115,-31],[-31,-115],[115,31]],"c":true}]},{"t":330}],"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.117646999657,0.678430974483,0.803921997547,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":30,"ty":4,"nm":"Path","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":90,"s":[2954,751,0],"e":[3120,585,0],"to":[27.6666660308838,-27.6666660308838,0],"ti":[-27.6666660308838,27.6666660308838,0]},{"i":{"x":0.667,"y":0.667},"o":{"x":0.333,"y":0.333},"n":"0p667_0p667_0p333_0p333","t":120,"s":[3120,585,0],"e":[3120,585,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":300,"s":[3120,585,0],"e":[2954,751,0],"to":[-27.6666660308838,27.6666660308838,0],"ti":[27.6666660308838,-27.6666660308838,0]},{"t":330}],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[146,-40],[40,-146],[-146,40],[-40,146]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.117646999657,0.678430974483,0.803921997547,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":31,"ty":4,"nm":"Shape Layer 5","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":188,"s":[2046,804,0],"e":[2150,700,0],"to":[17.3333339691162,-17.3333339691162,0],"ti":[-17.3333339691162,17.3333339691162,0]},{"i":{"x":0.667,"y":0.667},"o":{"x":0.333,"y":0.333},"n":"0p667_0p667_0p333_0p333","t":210,"s":[2150,700,0],"e":[2150,700,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":390,"s":[2150,700,0],"e":[2046,804,0],"to":[-17.3333339691162,17.3333339691162,0],"ti":[17.3333339691162,-17.3333339691162,0]},{"t":410}],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":180,"s":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[1727,-6],[1858,125]],"c":true}],"e":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[1727,-6],[1968,235]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":210,"s":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[1727,-6],[1968,235]],"c":false}],"e":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[1727,-6],[1968,235]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":390,"s":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[1727,-6],[1968,235]],"c":false}],"e":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[1727,-6],[1858,125]],"c":true}]},{"t":420}],"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.117647066303,0.678431372549,0.803921628466,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":4,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"fl","c":{"a":0,"k":[1,1,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Shape 1","np":3,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":527,"st":0,"bm":0},{"ddd":0,"ind":32,"ty":4,"nm":"Shape Layer 4","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[2120,670,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":180,"s":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[1684,158],[1685,157]],"c":false}],"e":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[1746,220],[1963,3]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":210,"s":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[1746,220],[1963,3]],"c":false}],"e":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[1746,220],[1963,3]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":390,"s":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[1746,220],[1963,3]],"c":false}],"e":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[1684,158],[1685,157]],"c":false}]},{"t":420}],"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.117647066303,0.678431372549,0.803921628466,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":4,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"fl","c":{"a":0,"k":[1,1,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Shape 1","np":3,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":527,"st":0,"bm":0},{"ddd":0,"ind":33,"ty":4,"nm":"Shape Layer 3","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[3138,417,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0]],"o":[[0,0]],"v":[[-2516,745]],"c":false},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.117647066303,0.678431372549,0.803921628466,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":4,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"fl","c":{"a":0,"k":[1,1,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[1,-1],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Shape 2","np":3,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":180,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[636,382],[636,382],[766,512],[766,512]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[854,164],[636,382],[876,622],[1094,404]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":210,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[854,164],[636,382],[876,622],[1094,404]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[854,164],[636,382],[876,622],[1094,404]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":390,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[854,164],[636,382],[876,622],[1094,404]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[636,382],[636,382],[766,512],[766,512]],"c":true}]},{"t":420}],"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.117647066303,0.678431372549,0.803921628466,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":4,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"fl","c":{"a":0,"k":[1,1,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Shape 1","np":3,"cix":2,"ix":2,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":527,"st":0,"bm":0}],"markers":[{"tm":90,"cm":"1","dr":0},{"tm":120,"cm":"2","dr":0},{"tm":180,"cm":"3","dr":0},{"tm":210,"cm":"4","dr":0},{"tm":300,"cm":"5","dr":0},{"tm":330,"cm":"6","dr":0},{"tm":390,"cm":"7","dr":0},{"tm":420,"cm":"8","dr":0}]}
\ No newline at end of file
diff --git a/packages/dev-tools-pages/ts/components/Animations/Compiler/index.tsx b/packages/dev-tools-pages/ts/components/Animations/Compiler/index.tsx
deleted file mode 100644
index db93ff8a4..000000000
--- a/packages/dev-tools-pages/ts/components/Animations/Compiler/index.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import * as React from 'react';
-
-import { BaseAnimation } from '../index';
-
-import * as animationData from './data.json';
-
-const CompilerAnimation: React.StatelessComponent<{}> = () => (
-    <BaseAnimation animationData={animationData} width={2150} height={700} />
-);
-
-export { CompilerAnimation as Animation };
diff --git a/packages/dev-tools-pages/ts/components/Animations/Cov/data.json b/packages/dev-tools-pages/ts/components/Animations/Cov/data.json
deleted file mode 100644
index a259c2787..000000000
--- a/packages/dev-tools-pages/ts/components/Animations/Cov/data.json
+++ /dev/null
@@ -1 +0,0 @@
-{"v":"5.4.1","fr":30,"ip":0,"op":420,"w":3962,"h":1320,"nm":"header-cov","ddd":0,"assets":[],"layers":[{"ddd":0,"ind":2,"ty":4,"nm":"Path","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[3418.5,924.5,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.696,"y":1},"o":{"x":0.304,"y":0},"n":"0p696_1_0p304_0","t":180,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[31.25,66.25],[66.25,31.25],[-31.25,-66.25],[-66.25,-31.25]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[21.25,86.25],[71.25,36.25],[-31.25,-66.25],[-81.25,-16.25]],"c":true}]},{"i":{"x":0.696,"y":1},"o":{"x":0.333,"y":0},"n":"0p696_1_0p333_0","t":210,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[21.25,86.25],[71.25,36.25],[-31.25,-66.25],[-81.25,-16.25]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[21.25,86.25],[71.25,36.25],[-31.25,-66.25],[-81.25,-16.25]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":390,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[21.25,86.25],[71.25,36.25],[-31.25,-66.25],[-81.25,-16.25]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[31.25,66.25],[66.25,31.25],[-31.25,-66.25],[-66.25,-31.25]],"c":true}]},{"t":420}],"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.7333329916,0.572548985481,0,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":524.5,"st":0,"bm":0},{"ddd":0,"ind":3,"ty":4,"nm":"Path","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[3392.5,970.5,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[18.25,89.25],[89.25,18.25],[-18.25,-89.25],[-89.25,-18.25]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.7333329916,0.572548985481,0,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":524.5,"st":0,"bm":0},{"ddd":0,"ind":4,"ty":4,"nm":"Path","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[2958,886,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":90,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[64,-94],[94,-64],[-64,94],[-94,64]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[80,-126],[118,-88],[-64,94],[-102,56]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":120,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[80,-126],[118,-88],[-64,94],[-102,56]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[80,-126],[118,-88],[-64,94],[-102,56]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":300,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[80,-126],[118,-88],[-64,94],[-102,56]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[64,-94],[94,-64],[-64,94],[-94,64]],"c":true}]},{"t":330}],"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.7333329916,0.572548985481,0,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":524.5,"st":0,"bm":0},{"ddd":0,"ind":5,"ty":4,"nm":"Path","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[2988,816,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[79,-129],[129,-79],[-79,129],[-129,79]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.7333329916,0.572548985481,0,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":524.5,"st":0,"bm":0},{"ddd":0,"ind":6,"ty":4,"nm":"Path","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[3588,678,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0]],"o":[[0,0]],"v":[[-3784,-472]],"c":false},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.733332974303,0.572548959769,0,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"fl","c":{"a":0,"k":[1,0,0,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":true},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Shape 1","np":3,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.833,"y":1},"o":{"x":0.167,"y":0},"n":"0p833_1_0p167_0","t":90,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-18.5,-75],[75,18.5],[18.5,75],[-75,-18.5]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-26.5,-27],[47,46.5],[18.5,75],[-55,1.5]],"c":true}]},{"i":{"x":0.833,"y":1},"o":{"x":0.333,"y":0},"n":"0p833_1_0p333_0","t":120,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-26.5,-27],[47,46.5],[18.5,75],[-55,1.5]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-26.5,-27],[47,46.5],[18.5,75],[-55,1.5]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":300,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-26.5,-27],[47,46.5],[18.5,75],[-55,1.5]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-18.5,-75],[75,18.5],[18.5,75],[-75,-18.5]],"c":true}]},{"t":330}],"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.7333329916,0.572548985481,0,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":2,"cix":2,"ix":2,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":524.5,"st":0,"bm":0},{"ddd":0,"ind":7,"ty":4,"nm":"Path","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[3678,548,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[26.5,-140],[140,-26.5],[-26.5,140],[-140,26.5]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.7333329916,0.572548985481,0,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":524.5,"st":0,"bm":0},{"ddd":0,"ind":8,"ty":4,"nm":"Path","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[3650.5,150.5,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-11.75,59.25],[59.25,-11.75],[11.75,-59.25],[-59.25,11.75]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.7333329916,0.572548985481,0,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":524.5,"st":0,"bm":0},{"ddd":0,"ind":9,"ty":4,"nm":"Path","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[3272.5,260.5,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":180,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[31.25,66.25],[66.25,31.25],[-31.25,-66.25],[-66.25,-31.25]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[27.25,34.25],[48.25,13.25],[-31.25,-66.25],[-52.25,-45.25]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":211,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[27.25,34.25],[48.25,13.25],[-31.25,-66.25],[-52.25,-45.25]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[27.25,34.25],[48.25,13.25],[-31.25,-66.25],[-52.25,-45.25]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":390,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[27.25,34.25],[48.25,13.25],[-31.25,-66.25],[-52.25,-45.25]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[31.25,66.25],[66.25,31.25],[-31.25,-66.25],[-66.25,-31.25]],"c":true}]},{"t":420}],"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.7333329916,0.572548985481,0,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":524.5,"st":0,"bm":0},{"ddd":0,"ind":10,"ty":4,"nm":"Path","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[3246.5,306.5,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[18.25,89.25],[89.25,18.25],[-18.25,-89.25],[-89.25,-18.25]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.7333329916,0.572548985481,0,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":524.5,"st":0,"bm":0},{"ddd":0,"ind":11,"ty":4,"nm":"Path","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[2758.5,720.5,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-33.25,11.75],[-11.75,33.25],[33.25,-11.75],[11.75,-33.25]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.7333329916,0.572548985481,0,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":524.5,"st":0,"bm":0},{"ddd":0,"ind":12,"ty":4,"nm":"Path","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[2729.5,707.5,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-47.75,5.25],[-5.25,47.75],[47.75,-5.25],[5.25,-47.75]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.7333329916,0.572548985481,0,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":524.5,"st":0,"bm":0},{"ddd":0,"ind":13,"ty":4,"nm":"Path","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[1285.5,815.5,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":180,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[36.75,-8.25],[-8.25,36.75],[-36.75,8.25],[8.25,-36.75]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[94.75,37.75],[43.75,88.75],[-36.75,8.25],[14.25,-42.75]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":211,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[94.75,37.75],[43.75,88.75],[-36.75,8.25],[14.25,-42.75]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[94.75,37.75],[43.75,88.75],[-36.75,8.25],[14.25,-42.75]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":390,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[94.75,37.75],[43.75,88.75],[-36.75,8.25],[14.25,-42.75]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[36.75,-8.25],[-8.25,36.75],[-36.75,8.25],[8.25,-36.75]],"c":true}]},{"t":420}],"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.7333329916,0.572548985481,0,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":524.5,"st":0,"bm":0},{"ddd":0,"ind":14,"ty":4,"nm":"Path","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[1415.5,905.5,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[101.75,36.75],[36.75,101.75],[-101.75,-36.75],[-36.75,-101.75]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.7333329916,0.572548985481,0,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":524.5,"st":0,"bm":0},{"ddd":0,"ind":15,"ty":4,"nm":"Path","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[611,329,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":90,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[62.5,-95.5],[95.5,-62.5],[-62.5,95.5],[-95.5,62.5]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[43,-47],[61.5,-28.5],[-62.5,95.5],[-81,77]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":120,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[43,-47],[61.5,-28.5],[-62.5,95.5],[-81,77]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[43,-47],[61.5,-28.5],[-62.5,95.5],[-81,77]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":300,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[43,-47],[61.5,-28.5],[-62.5,95.5],[-81,77]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[62.5,-95.5],[95.5,-62.5],[-62.5,95.5],[-95.5,62.5]],"c":true}]},{"t":329}],"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.7333329916,0.572548985481,0,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":524.5,"st":0,"bm":0},{"ddd":0,"ind":16,"ty":4,"nm":"Path","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[644,262,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[79,-129],[129,-79],[-79,129],[-129,79]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.7333329916,0.572548985481,0,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":524.5,"st":0,"bm":0},{"ddd":0,"ind":17,"ty":4,"nm":"Path","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[1126.5,374.5,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[39.25,16.25],[16.25,39.25],[-39.25,-16.25],[-16.25,-39.25]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.7333329916,0.572548985481,0,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":524.5,"st":0,"bm":0},{"ddd":0,"ind":18,"ty":4,"nm":"Path","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[1186.5,414.5,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[69.25,36.25],[36.25,69.25],[-69.25,-36.25],[-36.25,-69.25]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.7333329916,0.572548985481,0,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":524.5,"st":0,"bm":0},{"ddd":0,"ind":19,"ty":4,"nm":"Path","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[375,944,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":180,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-36,19.5],[-0.5,-16],[166,150.5],[130.5,186]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-10,45.5],[13.5,22],[154,162.5],[130.5,186]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":210,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-10,45.5],[13.5,22],[154,162.5],[130.5,186]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-10,45.5],[13.5,22],[154,162.5],[130.5,186]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":390,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-10,45.5],[13.5,22],[154,162.5],[130.5,186]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-36,19.5],[-0.5,-16],[166,150.5],[130.5,186]],"c":true}]},{"t":420}],"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.7333329916,0.572548985481,0,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":524.5,"st":0,"bm":0},{"ddd":0,"ind":20,"ty":4,"nm":"Path","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[375,944,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-186,-130.5],[-130.5,-186],[186,130.5],[130.5,186]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.7333329916,0.572548985481,0,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":524.5,"st":0,"bm":0},{"ddd":0,"ind":21,"ty":4,"nm":"Path","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[815.5,863.5,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":90,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[39.75,-93.75],[93.75,-39.75],[-39.75,93.75],[-93.75,39.75]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[33.25,-145.25],[116.25,-62.25],[-39.75,93.75],[-122.75,10.75]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":120,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[33.25,-145.25],[116.25,-62.25],[-39.75,93.75],[-122.75,10.75]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[33.25,-145.25],[116.25,-62.25],[-39.75,93.75],[-122.75,10.75]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":300,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[33.25,-145.25],[116.25,-62.25],[-39.75,93.75],[-122.75,10.75]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[39.75,-93.75],[93.75,-39.75],[-39.75,93.75],[-93.75,39.75]],"c":true}]},{"t":329}],"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.7333329916,0.572548985481,0,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":524.5,"st":0,"bm":0},{"ddd":0,"ind":22,"ty":4,"nm":"Path","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[777.5,721.5,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[20.75,-164.75],[164.75,-20.75],[-20.75,164.75],[-164.75,20.75]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.7333329916,0.572548985481,0,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":524.5,"st":0,"bm":0}],"markers":[{"tm":90,"cm":"1","dr":0},{"tm":120,"cm":"2","dr":0},{"tm":180,"cm":"3","dr":0},{"tm":210,"cm":"4","dr":0},{"tm":300,"cm":"5","dr":0},{"tm":330,"cm":"6","dr":0},{"tm":390,"cm":"7","dr":0},{"tm":420,"cm":"8","dr":0}]}
\ No newline at end of file
diff --git a/packages/dev-tools-pages/ts/components/Animations/Cov/index.tsx b/packages/dev-tools-pages/ts/components/Animations/Cov/index.tsx
deleted file mode 100644
index 445824717..000000000
--- a/packages/dev-tools-pages/ts/components/Animations/Cov/index.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import * as React from 'react';
-
-import { BaseAnimation } from '../index';
-
-import * as animationData from './data.json';
-
-const AnimationCov: React.StatelessComponent<{}> = () => (
-    <BaseAnimation animationData={animationData} width={1981} height={660} />
-);
-
-export { AnimationCov as Animation };
diff --git a/packages/dev-tools-pages/ts/components/Animations/Profiler/data.json b/packages/dev-tools-pages/ts/components/Animations/Profiler/data.json
deleted file mode 100644
index 2d769bc50..000000000
--- a/packages/dev-tools-pages/ts/components/Animations/Profiler/data.json
+++ /dev/null
@@ -1 +0,0 @@
-{"v":"5.4.1","fr":30,"ip":0,"op":420,"w":3970,"h":1314,"nm":"header-profiler","ddd":0,"assets":[],"layers":[{"ddd":0,"ind":2,"ty":4,"nm":"Path Copy","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":1,"k":[{"i":{"x":0.833,"y":1},"o":{"x":0.333,"y":0},"n":"0p833_1_0p333_0","t":90,"s":[376,448,0],"e":[376,392,0],"to":[0,-9.33333301544189,0],"ti":[0,9.33333301544189,0]},{"i":{"x":0.667,"y":0.667},"o":{"x":0.333,"y":0.333},"n":"0p667_0p667_0p333_0p333","t":120,"s":[376,392,0],"e":[376,392,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":300,"s":[376,392,0],"e":[376,448,0],"to":[0,9.33333301544189,0],"ti":[0,-9.33333301544189,0]},{"t":330}],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.833,"y":1},"o":{"x":0.333,"y":0},"n":"0p833_1_0p333_0","t":90,"s":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-169.69,0],[134.5,0]],"c":false}],"e":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-142.19,0],[106.5,0]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":120,"s":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-142.19,0],[106.5,0]],"c":false}],"e":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-142.19,0],[106.5,0]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":300,"s":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-142.19,0],[106.5,0]],"c":false}],"e":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-169.69,0],[134.5,0]],"c":false}]},{"t":330}],"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[1,0.44313699007,0.2666670084,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path Copy","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":3,"ty":4,"nm":"Path","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[3466.5,998.5,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[45.75,155.75],[-155.75,-45.75],[-45.75,-155.75],[155.75,45.75]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[1,0.44313699007,0.2666670084,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":4,"ty":4,"nm":"Path","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":90,"s":[1090.5,537,0],"e":[1170.5,617,0],"to":[12.0437898635864,12.0437898635864,0],"ti":[-1.2895439863205,-1.2895439863205,0]},{"i":{"x":0.667,"y":0.667},"o":{"x":0.333,"y":0.333},"n":"0p667_0p667_0p333_0p333","t":120,"s":[1170.5,617,0],"e":[1170.5,617,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":300,"s":[1170.5,617,0],"e":[1090.5,537,0],"to":[-13.3333330154419,-13.3333330154419,0],"ti":[13.3333330154419,13.3333330154419,0]},{"t":330}],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-41.25,-0.5],[41.25,-0.5]],"c":false},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[1,0.44313699007,0.2666670084,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":5,"ty":4,"nm":"Path","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":1,"k":[{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"n":"0p833_0p833_0p167_0p167","t":180,"s":[834,765,0],"e":[834,813,0],"to":[0,8,0],"ti":[0,-8,0]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.333,"y":0.333},"n":"0p833_0p833_0p333_0p333","t":210,"s":[834,813,0],"e":[834,813,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":390,"s":[834,813,0],"e":[834,765,0],"to":[0,-8,0],"ti":[0,8,0]},{"t":419}],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.833,"y":0.999},"o":{"x":0.167,"y":0.001},"n":"0p833_0p999_0p167_0p001","t":180,"s":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-100,-0.5],[100,-0.5]],"c":false}],"e":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-122,-0.5],[125,-0.5]],"c":true}]},{"i":{"x":0.833,"y":0.999},"o":{"x":0.333,"y":0},"n":"0p833_0p999_0p333_0","t":210,"s":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-122,-0.5],[125,-0.5]],"c":true}],"e":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-122,-0.5],[125,-0.5]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":390,"s":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-122,-0.5],[125,-0.5]],"c":true}],"e":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-100,-0.5],[100,-0.5]],"c":false}]},{"t":419}],"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[1,0.44313699007,0.2666670084,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":6,"ty":4,"nm":"Path","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":1,"k":[{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"n":"0p833_0p833_0p167_0p167","t":180,"s":[748.5,387,0],"e":[748.5,347,0],"to":[0,-6.66666650772095,0],"ti":[0,6.66666650772095,0]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.333,"y":0.333},"n":"0p833_0p833_0p333_0p333","t":210,"s":[748.5,347,0],"e":[748.5,347,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":390,"s":[748.5,347,0],"e":[748.5,387,0],"to":[0,6.66666650772095,0],"ti":[0,-6.66666650772095,0]},{"t":419}],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.833,"y":0.999},"o":{"x":0.167,"y":0.001},"n":"0p833_0p999_0p167_0p001","t":180,"s":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-36.25,-0.5],[36.25,-0.5]],"c":false}],"e":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-57.75,-3],[58.75,-3]],"c":true}]},{"i":{"x":0.833,"y":0.999},"o":{"x":0.333,"y":0},"n":"0p833_0p999_0p333_0","t":210,"s":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-57.75,-3],[58.75,-3]],"c":true}],"e":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-57.75,-3],[58.75,-3]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":390,"s":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-57.75,-3],[58.75,-3]],"c":true}],"e":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-36.25,-0.5],[36.25,-0.5]],"c":false}]},{"t":419}],"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[1,0.44313699007,0.2666670084,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":7,"ty":4,"nm":"Path","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":1,"k":[{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"n":"0p833_0p833_0p167_0p167","t":180,"s":[3006.5,763,0],"e":[3006.5,823,0],"to":[0,10,0],"ti":[0,-10,0]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.333,"y":0.333},"n":"0p833_0p833_0p333_0p333","t":210,"s":[3006.5,823,0],"e":[3006.5,823,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":390,"s":[3006.5,823,0],"e":[3006.5,763,0],"to":[0,-10,0],"ti":[0,10,0]},{"t":419}],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.833,"y":0.999},"o":{"x":0.167,"y":0},"n":"0p833_0p999_0p167_0","t":180,"s":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-66.25,-0.5],[66.25,-0.5]],"c":false}],"e":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-36.25,-0.5],[36.25,-0.5]],"c":true}]},{"i":{"x":0.833,"y":0.999},"o":{"x":0.333,"y":0},"n":"0p833_0p999_0p333_0","t":210,"s":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-36.25,-0.5],[36.25,-0.5]],"c":true}],"e":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-36.25,-0.5],[36.25,-0.5]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":390,"s":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-36.25,-0.5],[36.25,-0.5]],"c":true}],"e":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-66.25,-0.5],[66.25,-0.5]],"c":false}]},{"t":419}],"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[1,0.44313699007,0.2666670084,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":8,"ty":4,"nm":"Path","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":1,"k":[{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"n":"0p833_0p833_0p167_0p167","t":180,"s":[3375.5,857,0],"e":[3375.5,817,0],"to":[0,-6.66666650772095,0],"ti":[0,6.66666650772095,0]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.333,"y":0.333},"n":"0p833_0p833_0p333_0p333","t":210,"s":[3375.5,817,0],"e":[3375.5,817,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":390,"s":[3375.5,817,0],"e":[3375.5,857,0],"to":[0,6.66666650772095,0],"ti":[0,-6.66666650772095,0]},{"t":419}],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.833,"y":0.999},"o":{"x":0.167,"y":0.001},"n":"0p833_0p999_0p167_0p001","t":180,"s":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-84.25,-0.5],[84.25,-0.5]],"c":false}],"e":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-63.75,-0.5],[64.25,-0.5]],"c":true}]},{"i":{"x":0.833,"y":0.999},"o":{"x":0.333,"y":0},"n":"0p833_0p999_0p333_0","t":210,"s":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-63.75,-0.5],[64.25,-0.5]],"c":true}],"e":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-63.75,-0.5],[64.25,-0.5]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":390,"s":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-63.75,-0.5],[64.25,-0.5]],"c":true}],"e":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-84.25,-0.5],[84.25,-0.5]],"c":false}]},{"t":419}],"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[1,0.44313699007,0.2666670084,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-63.75,-0.5],[64.25,-0.5]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 1","np":1,"cix":2,"ix":2,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":9,"ty":4,"nm":"Path","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":1,"k":[{"i":{"x":0.833,"y":1},"o":{"x":0.333,"y":0},"n":"0p833_1_0p333_0","t":90,"s":[3511,409,0],"e":[3491,289,0],"to":[-3.33333325386047,-20,0],"ti":[3.33333325386047,20,0]},{"i":{"x":0.667,"y":0.667},"o":{"x":0.333,"y":0.333},"n":"0p667_0p667_0p333_0p333","t":120,"s":[3491,289,0],"e":[3491,289,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":300,"s":[3491,289,0],"e":[3511,409,0],"to":[3.33333325386047,20,0],"ti":[-3.33333325386047,-20,0]},{"t":330}],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.833,"y":1},"o":{"x":0.333,"y":0},"n":"0p833_1_0p333_0","t":90,"s":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-51.5,-0.5],[50.5,-0.5]],"c":false}],"e":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-101.5,-0.5],[120.5,-0.5]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":120,"s":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-101.5,-0.5],[120.5,-0.5]],"c":false}],"e":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-101.5,-0.5],[120.5,-0.5]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":300,"s":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-101.5,-0.5],[120.5,-0.5]],"c":false}],"e":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-51.5,-0.5],[50.5,-0.5]],"c":false}]},{"t":330}],"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[1,0.44313699007,0.2666670084,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":10,"ty":4,"nm":"Path Copy 2","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":90,"s":[3718.5,576,0],"e":[3598.5,696,0],"to":[-20,20,0],"ti":[20,-20,0]},{"i":{"x":0.667,"y":0.667},"o":{"x":0.333,"y":0.333},"n":"0p667_0p667_0p333_0p333","t":120,"s":[3598.5,696,0],"e":[3598.5,696,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":300,"s":[3598.5,696,0],"e":[3718.5,576,0],"to":[20,-20,0],"ti":[-20,20,0]},{"t":332}],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-39.25,0],[39.25,0]],"c":false},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[1,0.44313699007,0.2666670084,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path Copy 2","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":11,"ty":4,"nm":"Path","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[3738,557,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[114.5,-75],[75,-114.5],[-114.5,75],[-75,114.5]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[1,0.44313699007,0.2666670084,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":12,"ty":4,"nm":"Path","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[3502,257,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[127,4.5],[4.5,127],[-127,-4.5],[-4.5,-127]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[1,0.44313699007,0.2666670084,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":13,"ty":4,"nm":"Path","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[2653.5,703.5,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-92.25,55.75],[-55.75,92.25],[92.25,-55.75],[55.75,-92.25]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[1,0.44313699007,0.2666670084,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":14,"ty":4,"nm":"Path","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[3087.5,645.5,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[40.25,-124.75],[124.75,-40.25],[-40.25,124.75],[-124.75,40.25]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[1,0.44313699007,0.2666670084,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":15,"ty":4,"nm":"Path","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[1728,878,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[66,15],[15,66],[-66,-15],[-15,-66]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[1,0.44313699007,0.2666670084,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":16,"ty":4,"nm":"Path","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[1200,646,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-95.5,-137],[-137,-95.5],[95.5,137],[137,95.5]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[1,0.44313699007,0.2666670084,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":17,"ty":4,"nm":"Path","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[356.5,496.5,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-7.75,-176.75],[-176.75,-7.75],[7.75,176.75],[176.75,7.75]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[1,0.44313699007,0.2666670084,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":18,"ty":4,"nm":"Path","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[821.5,268.5,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[36.25,-95.25],[95.25,-36.25],[-36.25,95.25],[-95.25,36.25]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[1,0.44313699007,0.2666670084,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":19,"ty":4,"nm":"Path","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[634.5,1150.5,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-8.75,68.25],[68.25,-8.75],[8.75,-68.25],[-68.25,8.75]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[1,0.44313699007,0.2666670084,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":20,"ty":4,"nm":"Path","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[858,834,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[11,135],[-135,-11],[-11,-135],[135,11]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[1,0.44313699007,0.2666670084,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":420,"st":0,"bm":0}],"markers":[{"tm":90,"cm":"1","dr":0},{"tm":120,"cm":"2","dr":0},{"tm":180,"cm":"3","dr":0},{"tm":210,"cm":"4","dr":0},{"tm":300,"cm":"5","dr":0},{"tm":330,"cm":"6","dr":0},{"tm":390,"cm":"7","dr":0},{"tm":419,"cm":"8","dr":0}]}
\ No newline at end of file
diff --git a/packages/dev-tools-pages/ts/components/Animations/Profiler/index.tsx b/packages/dev-tools-pages/ts/components/Animations/Profiler/index.tsx
deleted file mode 100644
index 73a4e9ad6..000000000
--- a/packages/dev-tools-pages/ts/components/Animations/Profiler/index.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import * as React from 'react';
-
-import { BaseAnimation } from '../index';
-
-import * as animationData from './data.json';
-
-const AnimationProfiler: React.StatelessComponent<{}> = () => (
-    <BaseAnimation animationData={animationData} width={1985} height={657} />
-);
-
-export { AnimationProfiler as Animation };
diff --git a/packages/dev-tools-pages/ts/components/Animations/Trace/data.json b/packages/dev-tools-pages/ts/components/Animations/Trace/data.json
deleted file mode 100644
index 7b2936fff..000000000
--- a/packages/dev-tools-pages/ts/components/Animations/Trace/data.json
+++ /dev/null
@@ -1 +0,0 @@
-{"v":"5.4.1","fr":30,"ip":0,"op":420,"w":4482,"h":1220,"nm":"header-trace","ddd":0,"assets":[],"layers":[{"ddd":0,"ind":1,"ty":4,"nm":"Shape Layer 1","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[2241,610,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[],"ip":0,"op":529,"st":0,"bm":0},{"ddd":0,"ind":3,"ty":3,"nm":"▽ header-trace","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[2242,609,0],"ix":2},"a":{"a":0,"k":[2238,607,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":4,"ty":4,"nm":"Path","parent":3,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[3391.5,737.5,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[101.75,-11.75],[-11.75,101.75],[-101.75,11.75],[11.75,-101.75]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.30980399251,0.462745010853,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":5,"ty":4,"nm":"Path 7","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[4035.5,479.5,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":180,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[221.75,158.25],[158.25,221.75],[-221.75,-158.25],[-158.25,-221.75]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[201.75,178.25],[158.25,221.75],[-221.75,-158.25],[-178.25,-201.75]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":210,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[201.75,178.25],[158.25,221.75],[-221.75,-158.25],[-178.25,-201.75]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[201.75,178.25],[158.25,221.75],[-221.75,-158.25],[-178.25,-201.75]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":390,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[201.75,178.25],[158.25,221.75],[-221.75,-158.25],[-178.25,-201.75]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[221.75,158.25],[158.25,221.75],[-221.75,-158.25],[-158.25,-221.75]],"c":true}]},{"t":420}],"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.30980399251,0.462745010853,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"fl","c":{"a":0,"k":[1,1,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":6,"ty":4,"nm":"Path 6","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[4035.5,479.5,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":180,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[221.75,158.25],[158.25,221.75],[-221.75,-158.25],[-158.25,-221.75]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[211.75,168.25],[158.25,221.75],[-211.75,-148.25],[-158.25,-201.75]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":210,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[211.75,168.25],[158.25,221.75],[-211.75,-148.25],[-158.25,-201.75]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[211.75,168.25],[158.25,221.75],[-211.75,-148.25],[-158.25,-201.75]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.167,"y":0},"n":"0p667_1_0p167_0","t":390,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[211.75,168.25],[158.25,221.75],[-211.75,-148.25],[-158.25,-201.75]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[221.75,158.25],[158.25,221.75],[-221.75,-158.25],[-158.25,-221.75]],"c":true}]},{"t":420}],"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.30980399251,0.462745010853,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"fl","c":{"a":0,"k":[1,1,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":7,"ty":4,"nm":"Path 5","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[4035.5,479.5,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":180,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[221.75,158.25],[158.25,221.75],[-221.75,-158.25],[-158.25,-221.75]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[221.75,158.25],[158.25,221.75],[-201.75,-138.25],[-138.25,-201.75]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":210,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[221.75,158.25],[158.25,221.75],[-201.75,-138.25],[-138.25,-201.75]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[221.75,158.25],[158.25,221.75],[-201.75,-138.25],[-138.25,-201.75]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":390,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[221.75,158.25],[158.25,221.75],[-201.75,-138.25],[-138.25,-201.75]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[221.75,158.25],[158.25,221.75],[-221.75,-158.25],[-158.25,-221.75]],"c":true}]},{"t":420}],"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.30980399251,0.462745010853,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"fl","c":{"a":0,"k":[1,1,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":8,"ty":4,"nm":"Path","parent":3,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[4031.5,477.5,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[221.75,158.25],[158.25,221.75],[-221.75,-158.25],[-158.25,-221.75]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.30980399251,0.462745010853,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"fl","c":{"a":0,"k":[1,1,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":9,"ty":4,"nm":"Path","parent":3,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[3671.5,517.5,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[21.75,158.25],[158.25,21.75],[-21.75,-158.25],[-158.25,-21.75]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.30980399251,0.462745010853,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":10,"ty":4,"nm":"Path Copy 12","parent":3,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[3803.5,646.5,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":90,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[93.75,-43.75],[-43.75,93.75],[-73.75,63.75],[63.75,-73.75]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[73.75,-63.75],[-63.75,73.75],[-73.75,63.75],[63.75,-73.75]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":121,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[73.75,-63.75],[-63.75,73.75],[-73.75,63.75],[63.75,-73.75]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[73.75,-63.75],[-63.75,73.75],[-73.75,63.75],[63.75,-73.75]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":300,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[73.75,-63.75],[-63.75,73.75],[-73.75,63.75],[63.75,-73.75]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[93.75,-43.75],[-43.75,93.75],[-73.75,63.75],[63.75,-73.75]],"c":true}]},{"t":331}],"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.30980399251,0.462745010853,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"fl","c":{"a":0,"k":[1,1,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path Copy 12","np":3,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":11,"ty":4,"nm":"Path Copy 11","parent":3,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[3803.5,666.5,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":90,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[93.75,-53.75],[-43.75,83.75],[-73.75,53.75],[63.75,-83.75]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[73.75,-53.75],[-53.75,73.75],[-73.75,53.75],[53.75,-73.75]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":121,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[73.75,-53.75],[-53.75,73.75],[-73.75,53.75],[53.75,-73.75]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[73.75,-53.75],[-53.75,73.75],[-73.75,53.75],[53.75,-73.75]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":300,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[73.75,-53.75],[-53.75,73.75],[-73.75,53.75],[53.75,-73.75]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[93.75,-53.75],[-43.75,83.75],[-73.75,53.75],[63.75,-83.75]],"c":true}]},{"t":331}],"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.30980399251,0.462745010853,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"fl","c":{"a":0,"k":[1,1,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path Copy 11","np":3,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":12,"ty":4,"nm":"Path Copy 10","parent":3,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[3803.5,686.5,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":90,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[93.75,-63.75],[-43.75,73.75],[-73.75,43.75],[63.75,-93.75]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[73.75,-43.75],[-43.75,73.75],[-73.75,43.75],[43.75,-73.75]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":121,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[73.75,-43.75],[-43.75,73.75],[-73.75,43.75],[43.75,-73.75]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[73.75,-43.75],[-43.75,73.75],[-73.75,43.75],[43.75,-73.75]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":300,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[73.75,-43.75],[-43.75,73.75],[-73.75,43.75],[43.75,-73.75]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[93.75,-63.75],[-43.75,73.75],[-73.75,43.75],[63.75,-93.75]],"c":true}]},{"t":331}],"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.30980399251,0.462745010853,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"fl","c":{"a":0,"k":[1,1,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path Copy 10","np":3,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":13,"ty":4,"nm":"Path","parent":3,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[3101.5,747.5,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":90,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[136.75,-126.75],[-126.75,136.75],[-136.75,126.75],[126.75,-136.75]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[156.75,-106.75],[-106.75,156.75],[-136.75,126.75],[126.75,-136.75]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":121,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[156.75,-106.75],[-106.75,156.75],[-136.75,126.75],[126.75,-136.75]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[156.75,-106.75],[-106.75,156.75],[-136.75,126.75],[126.75,-136.75]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":300,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[156.75,-106.75],[-106.75,156.75],[-136.75,126.75],[126.75,-136.75]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[136.75,-126.75],[-126.75,136.75],[-136.75,126.75],[126.75,-136.75]],"c":true}]},{"t":331}],"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.30980399251,0.462745010853,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"fl","c":{"a":0,"k":[1,1,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":3,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":14,"ty":4,"nm":"Path","parent":3,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[3101.5,767.5,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":90,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[136.75,-116.75],[-116.75,136.75],[-136.75,116.75],[116.75,-136.75]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[146.75,-106.75],[-106.75,146.75],[-136.75,116.75],[116.75,-136.75]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":121,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[146.75,-106.75],[-106.75,146.75],[-136.75,116.75],[116.75,-136.75]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[146.75,-106.75],[-106.75,146.75],[-136.75,116.75],[116.75,-136.75]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":300,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[146.75,-106.75],[-106.75,146.75],[-136.75,116.75],[116.75,-136.75]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[136.75,-116.75],[-116.75,136.75],[-136.75,116.75],[116.75,-136.75]],"c":true}]},{"t":331}],"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.30980399251,0.462745010853,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"fl","c":{"a":0,"k":[1,1,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":3,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":15,"ty":4,"nm":"Path","parent":3,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[3101.5,787.5,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":90,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[136.75,-106.75],[-106.75,136.75],[-136.75,106.75],[106.75,-136.75]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[156.75,-126.75],[-106.75,136.75],[-136.75,106.75],[126.75,-156.75]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":121,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[156.75,-126.75],[-106.75,136.75],[-136.75,106.75],[126.75,-156.75]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[156.75,-126.75],[-106.75,136.75],[-136.75,106.75],[126.75,-156.75]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":300,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[156.75,-126.75],[-106.75,136.75],[-136.75,106.75],[126.75,-156.75]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[136.75,-106.75],[-106.75,136.75],[-136.75,106.75],[106.75,-136.75]],"c":true}]},{"t":331}],"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.30980399251,0.462745010853,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"fl","c":{"a":0,"k":[1,1,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":3,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":16,"ty":4,"nm":"Path","parent":3,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[3121.5,767.5,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[146.75,-116.75],[-116.75,146.75],[-146.75,116.75],[116.75,-146.75]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.30980399251,0.462745010853,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"fl","c":{"a":0,"k":[1,1,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":3,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":17,"ty":4,"nm":"Path","parent":3,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[2881.5,567.5,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.833,"y":0.998},"o":{"x":0.167,"y":0.001},"n":"0p833_0p998_0p167_0p001","t":180,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[66.75,-16.75],[-16.75,66.75],[-66.75,16.75],[16.75,-66.75]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[86.75,3.25],[3.25,86.75],[-66.75,16.75],[16.75,-66.75]],"c":true}]},{"i":{"x":0.833,"y":0.998},"o":{"x":0.333,"y":0},"n":"0p833_0p998_0p333_0","t":210,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[86.75,3.25],[3.25,86.75],[-66.75,16.75],[16.75,-66.75]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[86.75,3.25],[3.25,86.75],[-66.75,16.75],[16.75,-66.75]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":390,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[86.75,3.25],[3.25,86.75],[-66.75,16.75],[16.75,-66.75]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[66.75,-16.75],[-16.75,66.75],[-66.75,16.75],[16.75,-66.75]],"c":true}]},{"t":420}],"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.30980399251,0.462745010853,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"fl","c":{"a":0,"k":[1,1,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":3,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":18,"ty":4,"nm":"Path","parent":3,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[2911.5,577.5,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.833,"y":0.999},"o":{"x":0.167,"y":0.002},"n":"0p833_0p999_0p167_0p002","t":180,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[61.75,-11.75],[-11.75,61.75],[-61.75,11.75],[11.75,-61.75]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[71.75,-1.75],[-11.75,81.75],[-71.75,21.75],[11.75,-61.75]],"c":true}]},{"i":{"x":0.833,"y":0.999},"o":{"x":0.333,"y":0},"n":"0p833_0p999_0p333_0","t":210,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[71.75,-1.75],[-11.75,81.75],[-71.75,21.75],[11.75,-61.75]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[71.75,-1.75],[-11.75,81.75],[-71.75,21.75],[11.75,-61.75]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":390,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[71.75,-1.75],[-11.75,81.75],[-71.75,21.75],[11.75,-61.75]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[61.75,-11.75],[-11.75,61.75],[-61.75,11.75],[11.75,-61.75]],"c":true}]},{"t":420}],"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.30980399251,0.462745010853,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"fl","c":{"a":0,"k":[1,1,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":3,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":19,"ty":4,"nm":"Path","parent":3,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[2941.5,587.5,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.833,"y":0.998},"o":{"x":0.167,"y":0.002},"n":"0p833_0p998_0p167_0p002","t":180,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[56.75,-6.75],[-6.75,56.75],[-56.75,6.75],[6.75,-56.75]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[56.75,-6.75],[-26.75,76.75],[-76.75,26.75],[6.75,-56.75]],"c":true}]},{"i":{"x":0.833,"y":0.998},"o":{"x":0.333,"y":0},"n":"0p833_0p998_0p333_0","t":210,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[56.75,-6.75],[-26.75,76.75],[-76.75,26.75],[6.75,-56.75]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[56.75,-6.75],[-26.75,76.75],[-76.75,26.75],[6.75,-56.75]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":390,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[56.75,-6.75],[-26.75,76.75],[-76.75,26.75],[6.75,-56.75]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[56.75,-6.75],[-6.75,56.75],[-56.75,6.75],[6.75,-56.75]],"c":true}]},{"t":420}],"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.30980399251,0.462745010853,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"fl","c":{"a":0,"k":[1,1,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":3,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":20,"ty":4,"nm":"Path","parent":3,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[2901.5,587.5,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[76.75,-6.75],[-6.75,76.75],[-76.75,6.75],[6.75,-76.75]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.30980399251,0.462745010853,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"fl","c":{"a":0,"k":[1,1,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":3,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":21,"ty":4,"nm":"Path","parent":3,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[3411.5,177.5,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-88.25,-31.75],[-31.75,-88.25],[88.25,31.75],[31.75,88.25]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.30980399251,0.462745010853,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":22,"ty":4,"nm":"Path","parent":3,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[3431.5,157.5,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-78.25,-41.75],[-41.75,-78.25],[78.25,41.75],[41.75,78.25]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.30980399251,0.462745010853,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"fl","c":{"a":0,"k":[1,1,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":3,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":23,"ty":4,"nm":"Path","parent":3,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[3411.5,157.5,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-78.25,-31.75],[-31.75,-78.25],[78.25,31.75],[31.75,78.25]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.30980399251,0.462745010853,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"fl","c":{"a":0,"k":[1,1,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":3,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":24,"ty":4,"nm":"Path","parent":3,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[3391.5,157.5,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-78.25,-21.75],[-21.75,-78.25],[78.25,21.75],[21.75,78.25]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.30980399251,0.462745010853,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":25,"ty":4,"nm":"Path","parent":3,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[3101.5,627.5,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[136.75,-186.75],[-186.75,136.75],[-136.75,186.75],[186.75,-136.75]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.30980399251,0.462745010853,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":26,"ty":4,"nm":"Path","parent":3,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[1444.5,626.5,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[36.75,63.25],[63.25,36.75],[-36.75,-63.25],[-63.25,-36.75]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.30980399251,0.462745010853,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":27,"ty":4,"nm":"Path 4","parent":3,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[704.5,527.5,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-183.25,-16.75],[-16.75,-183.25],[183.25,16.75],[16.75,183.25]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.30980399251,0.462745010853,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":28,"ty":4,"nm":"Path","parent":3,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[1064.5,887.5,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-3.25,163.25],[163.25,-3.25],[3.25,-163.25],[-163.25,3.25]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.30980399251,0.462745010853,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":29,"ty":4,"nm":"Path Copy 4","parent":3,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[1594.5,776.5,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.833,"y":1},"o":{"x":0.333,"y":0},"n":"0p833_1_0p333_0","t":180,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[101.75,-51.75],[-51.75,101.75],[-101.75,51.75],[51.75,-101.75]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[121.75,-31.75],[-31.75,121.75],[-101.75,51.75],[51.75,-101.75]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":210,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[121.75,-31.75],[-31.75,121.75],[-101.75,51.75],[51.75,-101.75]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[121.75,-31.75],[-31.75,121.75],[-101.75,51.75],[51.75,-101.75]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.167,"y":0},"n":"0p667_1_0p167_0","t":390,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[121.75,-31.75],[-31.75,121.75],[-101.75,51.75],[51.75,-101.75]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[101.75,-51.75],[-51.75,101.75],[-101.75,51.75],[51.75,-101.75]],"c":true}]},{"t":420}],"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.30980399251,0.462745010853,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"fl","c":{"a":0,"k":[1,1,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path Copy 4","np":3,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":30,"ty":4,"nm":"Path Copy 3","parent":3,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[1624.5,787.5,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.833,"y":1},"o":{"x":0.333,"y":0},"n":"0p833_1_0p333_0","t":180,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[96.75,-46.75],[-46.75,96.75],[-96.75,46.75],[46.75,-96.75]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[106.75,-36.75],[-46.75,116.75],[-116.75,46.75],[36.75,-106.75]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":210,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[106.75,-36.75],[-46.75,116.75],[-116.75,46.75],[36.75,-106.75]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[106.75,-36.75],[-46.75,116.75],[-116.75,46.75],[36.75,-106.75]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.167,"y":0},"n":"0p667_1_0p167_0","t":390,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[106.75,-36.75],[-46.75,116.75],[-116.75,46.75],[36.75,-106.75]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[96.75,-46.75],[-46.75,96.75],[-96.75,46.75],[46.75,-96.75]],"c":true}]},{"t":420}],"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.30980399251,0.462745010853,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"fl","c":{"a":0,"k":[1,1,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path Copy 3","np":3,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":31,"ty":4,"nm":"Path Copy 2","parent":3,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[1654.5,797.5,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.833,"y":1},"o":{"x":0.333,"y":0},"n":"0p833_1_0p333_0","t":180,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[91.75,-41.75],[-41.75,91.75],[-91.75,41.75],[41.75,-91.75]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[91.75,-41.75],[-61.75,111.75],[-131.75,41.75],[21.75,-111.75]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":210,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[91.75,-41.75],[-61.75,111.75],[-131.75,41.75],[21.75,-111.75]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[91.75,-41.75],[-61.75,111.75],[-131.75,41.75],[21.75,-111.75]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.167,"y":0},"n":"0p667_1_0p167_0","t":390,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[91.75,-41.75],[-61.75,111.75],[-131.75,41.75],[21.75,-111.75]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[91.75,-41.75],[-41.75,91.75],[-91.75,41.75],[41.75,-91.75]],"c":true}]},{"t":420}],"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.30980399251,0.462745010853,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"fl","c":{"a":0,"k":[1,1,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path Copy 2","np":3,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":32,"ty":4,"nm":"Path","parent":3,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[1615.5,796.5,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[41.75,-111.75],[-111.75,41.75],[-41.75,111.75],[111.75,-41.75]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.30980399251,0.462745010853,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":33,"ty":4,"nm":"Path 3","parent":3,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[704.5,527.5,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.833,"y":0.998},"o":{"x":0.167,"y":0.002},"n":"0p833_0p998_0p167_0p002","t":180,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-183.25,-16.75],[-16.75,-183.25],[183.25,16.75],[16.75,183.25]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-159.25,7.25],[7.25,-159.25],[183.25,16.75],[16.75,183.25]],"c":true}]},{"i":{"x":0.713,"y":0.984},"o":{"x":0.333,"y":0},"n":"0p713_0p984_0p333_0","t":210,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-159.25,7.25],[7.25,-159.25],[183.25,16.75],[16.75,183.25]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-159.25,7.25],[7.25,-159.25],[183.25,16.75],[16.75,183.25]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":390,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-159.25,7.25],[7.25,-159.25],[183.25,16.75],[16.75,183.25]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-183.25,-16.75],[-16.75,-183.25],[183.25,16.75],[16.75,183.25]],"c":true}]},{"t":420}],"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.30980399251,0.462745010853,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"fl","c":{"a":0,"k":[1,1,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":34,"ty":4,"nm":"Path 2","parent":3,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[702.5,527.5,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.833,"y":0.996},"o":{"x":0.167,"y":0.002},"n":"0p833_0p996_0p167_0p002","t":180,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-183.25,-16.75],[-16.75,-183.25],[183.25,16.75],[16.75,183.25]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-169.25,-4.75],[-14.75,-159.25],[171.25,26.75],[16.75,183.25]],"c":true}]},{"i":{"x":0.689,"y":0.993},"o":{"x":0.333,"y":0},"n":"0p689_0p993_0p333_0","t":211,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-169.25,-4.75],[-14.75,-159.25],[171.25,26.75],[16.75,183.25]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-169.25,-4.75],[-14.75,-159.25],[171.25,26.75],[16.75,183.25]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":390,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-169.25,-4.75],[-14.75,-159.25],[171.25,26.75],[16.75,183.25]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-183.25,-16.75],[-16.75,-183.25],[183.25,16.75],[16.75,183.25]],"c":true}]},{"t":420}],"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.30980399251,0.462745010853,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"fl","c":{"a":0,"k":[1,1,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":35,"ty":4,"nm":"Path","parent":3,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[704.5,527.5,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.833,"y":0.994},"o":{"x":0.167,"y":0.003},"n":"0p833_0p994_0p167_0p003","t":180,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-183.25,-16.75],[-16.75,-183.25],[183.25,16.75],[16.75,183.25]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-183.25,-16.75],[-40.75,-159.25],[159.25,40.75],[16.75,183.25]],"c":true}]},{"i":{"x":0.682,"y":0.993},"o":{"x":0.333,"y":0},"n":"0p682_0p993_0p333_0","t":210,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-183.25,-16.75],[-40.75,-159.25],[159.25,40.75],[16.75,183.25]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-183.25,-16.75],[-40.75,-159.25],[159.25,40.75],[16.75,183.25]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":390,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-183.25,-16.75],[-40.75,-159.25],[159.25,40.75],[16.75,183.25]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-183.25,-16.75],[-16.75,-183.25],[183.25,16.75],[16.75,183.25]],"c":true}]},{"t":420}],"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.30980399251,0.462745010853,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":36,"ty":4,"nm":"Path","parent":3,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[1205.5,527.5,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":90,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[156.75,113.25],[113.25,156.75],[-156.75,-113.25],[-113.25,-156.75]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[156.75,113.25],[93.25,176.75],[-176.75,-93.25],[-113.25,-156.75]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":121,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[156.75,113.25],[93.25,176.75],[-176.75,-93.25],[-113.25,-156.75]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[156.75,113.25],[93.25,176.75],[-176.75,-93.25],[-113.25,-156.75]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":300,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[156.75,113.25],[93.25,176.75],[-176.75,-93.25],[-113.25,-156.75]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[156.75,113.25],[113.25,156.75],[-156.75,-113.25],[-113.25,-156.75]],"c":true}]},{"t":331}],"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.30980399251,0.462745010853,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"fl","c":{"a":0,"k":[1,1,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":3,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":37,"ty":4,"nm":"Path","parent":3,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[1205.5,547.5,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":90,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[156.75,103.25],[103.25,156.75],[-156.75,-103.25],[-103.25,-156.75]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[156.75,103.25],[93.25,166.75],[-176.75,-103.25],[-113.25,-166.75]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":121,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[156.75,103.25],[93.25,166.75],[-176.75,-103.25],[-113.25,-166.75]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[156.75,103.25],[93.25,166.75],[-176.75,-103.25],[-113.25,-166.75]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":300,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[156.75,103.25],[93.25,166.75],[-176.75,-103.25],[-113.25,-166.75]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[156.75,103.25],[103.25,156.75],[-156.75,-103.25],[-103.25,-156.75]],"c":true}]},{"t":331}],"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.30980399251,0.462745010853,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"fl","c":{"a":0,"k":[1,1,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":3,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":38,"ty":4,"nm":"Path","parent":3,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[1205.5,567.5,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":90,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[156.75,93.25],[93.25,156.75],[-156.75,-93.25],[-93.25,-156.75]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[156.75,93.25],[93.25,156.75],[-176.75,-113.25],[-113.25,-176.75]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":121,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[156.75,93.25],[93.25,156.75],[-176.75,-113.25],[-113.25,-176.75]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[156.75,93.25],[93.25,156.75],[-176.75,-113.25],[-113.25,-176.75]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":300,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[156.75,93.25],[93.25,156.75],[-176.75,-113.25],[-113.25,-176.75]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[156.75,93.25],[93.25,156.75],[-156.75,-93.25],[-93.25,-156.75]],"c":true}]},{"t":331}],"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.30980399251,0.462745010853,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"fl","c":{"a":0,"k":[1,1,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":3,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":39,"ty":4,"nm":"Path Copy 16","parent":3,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[549.878,808.122,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,-100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.833,"y":1},"o":{"x":0.333,"y":0},"n":"0p833_1_0p333_0","t":90,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[116.059,65.119],[41.119,140.059],[-140.061,-41.121],[-65.121,-116.061]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[116.059,65.119],[65.119,116.059],[-116.061,-65.121],[-65.121,-116.061]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":122,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[116.059,65.119],[65.119,116.059],[-116.061,-65.121],[-65.121,-116.061]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[116.059,65.119],[65.119,116.059],[-116.061,-65.121],[-65.121,-116.061]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":300,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[116.059,65.119],[65.119,116.059],[-116.061,-65.121],[-65.121,-116.061]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[116.059,65.119],[41.119,140.059],[-140.061,-41.121],[-65.121,-116.061]],"c":true}]},{"t":331}],"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.30980399251,0.462745010853,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"fl","c":{"a":0,"k":[1,1,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":-270,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path Copy 16","np":3,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":40,"ty":4,"nm":"Path Copy 15","parent":3,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[526,808.122,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,-100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.833,"y":1},"o":{"x":0.333,"y":0},"n":"0p833_1_0p333_0","t":90,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[116.059,53.409],[41.409,128.059],[-140.061,-53.411],[-65.411,-128.061]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[116.059,53.409],[53.409,116.059],[-116.061,-53.411],[-53.411,-116.061]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":122,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[116.059,53.409],[53.409,116.059],[-116.061,-53.411],[-53.411,-116.061]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[116.059,53.409],[53.409,116.059],[-116.061,-53.411],[-53.411,-116.061]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":300,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[116.059,53.409],[53.409,116.059],[-116.061,-53.411],[-53.411,-116.061]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[116.059,53.409],[41.409,128.059],[-140.061,-53.411],[-65.411,-128.061]],"c":true}]},{"t":331}],"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.30980399251,0.462745010853,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"fl","c":{"a":0,"k":[1,1,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":-270,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path Copy 15","np":3,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":41,"ty":4,"nm":"Path Copy 14","parent":3,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[503.425,808.122,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,-100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.833,"y":1},"o":{"x":0.333,"y":0},"n":"0p833_1_0p333_0","t":90,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[116.059,42.045],[41.699,116.405],[-138.061,-64.045],[-63.701,-138.405]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[116.059,42.045],[41.699,116.405],[-116.061,-42.045],[-41.701,-116.405]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":122,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[116.059,42.045],[41.699,116.405],[-116.061,-42.045],[-41.701,-116.405]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[116.059,42.045],[41.699,116.405],[-116.061,-42.045],[-41.701,-116.405]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":300,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[116.059,42.045],[41.699,116.405],[-116.061,-42.045],[-41.701,-116.405]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[116.059,42.045],[41.699,116.405],[-138.061,-64.045],[-63.701,-138.405]],"c":true}]},{"t":331}],"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.30980399251,0.462745010853,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"fl","c":{"a":0,"k":[1,1,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":-270,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path Copy 14","np":3,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":42,"ty":4,"nm":"Path Copy 13","parent":3,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[391,697,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,-100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[195.5,121.05],[121.05,195.5],[-195.5,-121.05],[-121.05,-195.5]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.30980399251,0.462745010853,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":-270,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path Copy 13","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":43,"ty":4,"nm":"Path","parent":3,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[1185.5,548.5,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[166.75,103.25],[103.25,166.75],[-166.75,-103.25],[-103.25,-166.75]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.30980399251,0.462745010853,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":420,"st":0,"bm":0}],"markers":[{"tm":90,"cm":"1","dr":0},{"tm":121,"cm":"2","dr":0},{"tm":180,"cm":"3","dr":0},{"tm":210,"cm":"4","dr":0},{"tm":300,"cm":"5","dr":0},{"tm":331,"cm":"6","dr":0},{"tm":390,"cm":"7","dr":0},{"tm":420,"cm":"8","dr":0}]}
\ No newline at end of file
diff --git a/packages/dev-tools-pages/ts/components/Animations/Trace/index.tsx b/packages/dev-tools-pages/ts/components/Animations/Trace/index.tsx
deleted file mode 100644
index 10a78ccb7..000000000
--- a/packages/dev-tools-pages/ts/components/Animations/Trace/index.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import * as React from 'react';
-
-import { BaseAnimation } from '../index';
-
-import * as animationData from './data.json';
-
-const AnimationTrace: React.StatelessComponent<{}> = () => (
-    <BaseAnimation animationData={animationData} width={2241} height={610} />
-);
-
-export { AnimationTrace as Animation };
diff --git a/packages/dev-tools-pages/ts/components/Animations/index.tsx b/packages/dev-tools-pages/ts/components/Animations/index.tsx
deleted file mode 100644
index 7f7b36c21..000000000
--- a/packages/dev-tools-pages/ts/components/Animations/index.tsx
+++ /dev/null
@@ -1,96 +0,0 @@
-import * as React from 'react';
-import Lottie from 'react-lottie';
-import styled from 'styled-components';
-
-import { media } from 'ts/variables';
-
-interface AnimationProps {
-    animationData: object;
-    width: number;
-    height: number;
-}
-
-interface AnimationState {
-    width?: number | undefined;
-    height?: number | undefined;
-}
-
-class BaseAnimation extends React.PureComponent<AnimationProps, AnimationState> {
-    public state: AnimationState = {
-        height: undefined,
-        width: undefined,
-    };
-    private _timeout = undefined as number;
-    public componentDidMount(): void {
-        this._updateAnimationSize();
-        window.addEventListener('resize', this._handleResize);
-    }
-    public componentWillUnmount(): void {
-        window.removeEventListener('resize', this._handleResize);
-    }
-    public render(): React.ReactNode {
-        const { animationData } = this.props;
-        const height = this.state.height || this.props.height;
-        const width = this.state.width || this.props.width;
-
-        return (
-            <Container height={height}>
-                <InnerContainer>
-                    <Lottie
-                        width={width}
-                        height={height}
-                        options={{
-                            loop: true,
-                            autoplay: true,
-                            animationData,
-                        }}
-                    />
-                </InnerContainer>
-            </Container>
-        );
-    }
-    private readonly _handleResize = () => {
-        clearTimeout(this._timeout);
-        this._timeout = window.setTimeout(this._updateAnimationSize, 50);
-    };
-    private readonly _updateAnimationSize = () => {
-        const windowWidth = window.innerWidth;
-        let width;
-        let height;
-        if (windowWidth <= 1000) {
-            const maxWidth = windowWidth + 250;
-            const ratio = maxWidth / this.props.width;
-
-            height = Math.round(this.props.height * ratio);
-            width = Math.round(this.props.width * ratio);
-        }
-
-        this.setState({ width, height });
-    };
-}
-
-const Container =
-    styled.div <
-    AnimationProps >
-    `
-    width: 100%;
-    height: ${props => props.height}px;
-    position: absolute;
-    top: 40%;
-    left: 0;
-    z-index: -1;
-    overflow: hidden;
-    ${media.large`
-        top: 100%;
-        transform: translateY(-50%);
-    `};
-`;
-
-const InnerContainer = styled.div`
-    position: absolute;
-    top: 0;
-    left: 50%;
-    transform: translateX(-50%);
-`;
-
-export { BaseAnimation };
diff --git a/packages/dev-tools-pages/ts/components/Base.tsx b/packages/dev-tools-pages/ts/components/Base.tsx
deleted file mode 100644
index 8e608ecdd..000000000
--- a/packages/dev-tools-pages/ts/components/Base.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import * as React from 'react';
-import { ThemeProvider } from 'styled-components';
-
-import { Footer } from 'ts/components/Footer';
-import { Header } from 'ts/components/Header';
-import { ThemeContext } from 'ts/context';
-import { GlobalStyles } from 'ts/globalStyles';
-
-interface BaseProps {
-    context: any;
-}
-
-const Base: React.StatelessComponent<BaseProps> = props => (
-    <ThemeContext.Provider value={props.context}>
-        <ThemeProvider theme={props.context}>
-            <React.Fragment>
-                <GlobalStyles colors={props.context.colors} />
-                <Header />
-                {props.children}
-                <Footer />
-            </React.Fragment>
-        </ThemeProvider>
-    </ThemeContext.Provider>
-);
-
-export { Base };
diff --git a/packages/dev-tools-pages/ts/components/Breakout.tsx b/packages/dev-tools-pages/ts/components/Breakout.tsx
deleted file mode 100644
index 505d8de41..000000000
--- a/packages/dev-tools-pages/ts/components/Breakout.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import styled from 'styled-components';
-
-import { media } from 'ts/variables';
-
-const Breakout = styled.div`
-    ${media.small`
-        margin-left: -2.5rem;
-        width: calc(100% + 5rem);
-  `};
-`;
-
-export { Breakout };
diff --git a/packages/dev-tools-pages/ts/components/Button.tsx b/packages/dev-tools-pages/ts/components/Button.tsx
deleted file mode 100644
index d3b36ebfd..000000000
--- a/packages/dev-tools-pages/ts/components/Button.tsx
+++ /dev/null
@@ -1,55 +0,0 @@
-import styled from 'styled-components';
-
-import { colors, media } from 'ts/variables';
-
-interface ButtonProps {
-    large?: boolean;
-}
-
-const Button =
-    styled.button <
-    ButtonProps >
-    `
-  font-family: inherit;
-  line-height: 1;
-  font-weight: 500;
-  white-space: nowrap;
-  vertical-align: middle;
-  background-color: ${props => props.theme.colors.secondary};
-  color: ${colors.black};
-  border: 0;
-  border-radius: 5rem;
-  display: inline-flex;
-  justify-content: space-between;
-  align-items: center;
-
-  ${props =>
-      props.large
-          ? `
-      font-size: 1rem;
-      padding: 1.1875rem 2.375rem 1.0625rem;
-  `
-          : `
-      font-size: .875rem;
-      padding: .5625rem 1.25rem;
-  `}
-
-  :hover, :focus {
-    background-color: ${props => props.theme.colors.secondary_alt};
-    outline: 0;
-  }
-
-  ${media.small`
-  font-size: .875rem;
-  padding: .5625rem 1.25rem;
-  `}
-
-    ${props =>
-        props.large &&
-        media.small`
-        font-size: 1rem;
-        padding: 1rem 1.5rem .75rem;
-    `}
-`;
-
-export { Button };
diff --git a/packages/dev-tools-pages/ts/components/Code.tsx b/packages/dev-tools-pages/ts/components/Code.tsx
deleted file mode 100644
index 8415f1179..000000000
--- a/packages/dev-tools-pages/ts/components/Code.tsx
+++ /dev/null
@@ -1,203 +0,0 @@
-import * as React from 'react';
-import styled from 'styled-components';
-
-import { colors } from 'ts/variables';
-
-import { Button as BaseButton } from './Button';
-
-const isTouch = Boolean(
-    'ontouchstart' in window ||
-        (window as any).navigator.maxTouchPoints > 0 ||
-        (window as any).navigator.msMaxTouchPoints > 0,
-);
-
-interface CodeProps {
-    language?: string;
-    isLight?: boolean;
-    isDiff?: boolean;
-    gutter?: Array<number | undefined>;
-    gutterLength?: number;
-    canCopy?: boolean;
-    isEtc?: boolean;
-}
-
-interface CodeState {
-    hlCode?: string;
-    didCopy?: boolean;
-}
-
-const Button = styled(BaseButton)`
-    opacity: ${isTouch ? '1' : '0'};
-    position: absolute;
-    top: 1rem;
-    right: 1rem;
-    transition: opacity 0.2s;
-    :focus {
-        opacity: 1;
-    }
-`;
-
-const Container = styled.div`
-    position: relative;
-    &:hover ${Button} {
-        opacity: 1;
-    }
-`;
-
-const Base =
-    styled.div <
-    CodeProps >
-    `
-    font-size: .875rem;
-    color: ${props => (props.language === undefined ? colors.white : 'inherit')};
-    background-color: ${props =>
-        props.isLight ? 'rgba(255,255,255,.15)' : props.language === undefined ? colors.black : '#F1F4F5'};
-    white-space: ${props => (props.language === undefined ? 'nowrap' : '')};
-    position: relative;
-
-    ${props =>
-        props.isDiff
-            ? `
-        background-color: #E9ECED;
-        display: flex;
-        padding-top: 1.5rem;
-        padding-bottom: 1.5rem;
-        overflow-x: auto;
-        -webkit-overflow-scrolling: touch;
-    `
-            : ``}
-`;
-
-const CodeDiff: React.StatelessComponent<any> = ({ gutterLength, ...props }) => <code {...props} />;
-const StyledCodeDiff = styled(CodeDiff)`
-    ::before {
-        content: '';
-        width: calc(0.75rem + ${props => props.gutterLength}ch);
-        background-color: #e2e5e6;
-        position: absolute;
-        top: 0;
-        left: 0;
-        bottom: 0;
-    }
-
-    [class^='line-'] {
-        display: inline-block;
-        width: 100%;
-        position: relative;
-        padding-right: 1.5rem;
-        padding-left: calc(2.25rem + ${props => props.gutterLength}ch);
-
-        ::before {
-            content: attr(data-gutter);
-
-            width: ${props => props.gutterLength};
-            padding-left: 0.375rem;
-            padding-right: 0.375rem;
-            position: absolute;
-            top: 50%;
-            left: 0;
-            transform: translateY(-50%);
-            z-index: 1;
-        }
-    }
-
-    .line-addition {
-        background-color: rgba(0, 202, 105, 0.1);
-    }
-    .line-deletion {
-        background-color: rgba(255, 0, 0, 0.07);
-    }
-`;
-
-const StyledPre =
-    styled.pre <
-    CodeProps >
-    `
-    margin: 0;
-    ${props =>
-        !props.isDiff
-            ? `
-        padding: 1.5rem;
-        overflow-x: auto;
-        -webkit-overflow-scrolling: touch;
-    `
-            : ``};
-`;
-
-const StyledCopyInput = styled.textarea`
-    opacity: 0;
-    height: 0;
-    position: absolute;
-    top: 0;
-    right: 0;
-    z-index: -1;
-`;
-
-class Code extends React.Component<CodeProps, CodeState> {
-    public state: CodeState = {};
-    private readonly _code = React.createRef<HTMLTextAreaElement>();
-    public componentDidMount(): void {
-        // _onMountAsync is only setting state, so no point in handling the promise
-        // tslint:disable-next-line:no-floating-promises
-        this._onMountAsync();
-    }
-    public render(): React.ReactNode {
-        const { language, isLight, isDiff, children, gutterLength, canCopy } = this.props;
-        const { hlCode } = this.state;
-
-        return (
-            <Container>
-                <Base language={language} isDiff={isDiff} isLight={isLight}>
-                    <StyledPre isDiff={isDiff}>
-                        {hlCode === undefined ? (
-                            <code>{children}</code>
-                        ) : (
-                            <StyledCodeDiff
-                                gutterLength={gutterLength}
-                                dangerouslySetInnerHTML={hlCode ? { __html: this.state.hlCode } : null}
-                            />
-                        )}
-                    </StyledPre>
-                    {!('clipboard' in navigator) ? (
-                        <StyledCopyInput readOnly={true} aria-hidden="true" ref={this._code} value={children} />
-                    ) : null}
-                </Base>
-                {navigator.userAgent !== 'ReactSnap' && canCopy ? (
-                    <Button onClick={this._handleCopyAsync}>{this.state.didCopy ? 'Copied' : 'Copy'}</Button>
-                ) : null}
-            </Container>
-        );
-    }
-    private async _onMountAsync(): Promise<void> {
-        const { language, children, isDiff, gutter, isEtc } = this.props;
-
-        const code = children as string;
-
-        if (language !== undefined) {
-            const { highlight } = await System.import(/* webpackChunkName: 'highlightjs' */ 'ts/highlight');
-
-            this.setState({
-                hlCode: highlight({ language, code, isDiff, gutter, isEtc }),
-            });
-        }
-    }
-    private readonly _handleCopyAsync = async () => {
-        try {
-            if ('clipboard' in navigator) {
-                await (navigator as any).clipboard.writeText(this.props.children);
-                this.setState({ didCopy: true });
-            } else {
-                const lastActive = document.activeElement as HTMLElement;
-                this._code.current.focus();
-                this._code.current.select();
-                document.execCommand('copy');
-                lastActive.focus();
-                this.setState({ didCopy: true });
-            }
-        } catch (error) {
-            this.setState({ didCopy: false });
-        }
-    };
-}
-
-export { Code };
diff --git a/packages/dev-tools-pages/ts/components/Compiler.tsx b/packages/dev-tools-pages/ts/components/Compiler.tsx
deleted file mode 100644
index f16365fd0..000000000
--- a/packages/dev-tools-pages/ts/components/Compiler.tsx
+++ /dev/null
@@ -1,89 +0,0 @@
-import * as React from 'react';
-import styled from 'styled-components';
-
-import { colors, media } from 'ts/variables';
-
-import { Breakout } from './Breakout';
-import { Container } from './Container';
-import { InlineCode } from './InlineCode';
-
-const Cards = styled.dl`
-    column-count: 3;
-    column-gap: 1.25rem;
-
-    ${media.medium`
-        column-count: 1;
-    `};
-`;
-
-const Card = styled.div`
-    background-color: ${colors.lightGray};
-    padding: 3.125rem;
-    padding-bottom: 2.5rem;
-    display: inline-block;
-    margin-bottom: 1.25rem;
-    width: 100%;
-
-    ${media.medium`
-        padding: 1.875rem;
-    `};
-`;
-
-const Dt = styled.dt`
-    font-weight: 500;
-    display: inline;
-    ::after {
-        content: '. ';
-    }
-`;
-
-const Dd = styled.dd`
-    display: inline;
-    margin-left: 0;
-`;
-
-const cards = [
-    {
-        title: 'A Project-centric',
-        body: (
-            <React.Fragment>
-                Compiles an entire project instead of only individual <InlineCode isAlt={true}>.sol</InlineCode> files.
-            </React.Fragment>
-        ),
-    },
-    {
-        title: 'Incremental builds',
-        body: 'Recompiles your smart contracts after they have changed',
-    },
-    {
-        title: 'Customizable artifacts',
-        body:
-            'Stores only the required compiler output in your artifacts, so you can have complete control over your bundle size.',
-    },
-    {
-        title: 'Seamless',
-        body: 'Fetches and caches the required compiler binaries.',
-    },
-    {
-        title: 'Versioning',
-        body:
-            'Compiles each contract with the version specified at the top of its file (sol-compiler even supports version ranges!).',
-    },
-];
-
-const Compiler: React.StatelessComponent<{}> = () => (
-    <Container>
-        <Breakout>
-            <Cards>
-                {cards.map(card => (
-                    <Card key={card.title.split(' ').join('-')}>
-                        <Dt>{card.title}</Dt>
-                        <Dd>{card.body}</Dd>
-                    </Card>
-                ))}
-            </Cards>
-        </Breakout>
-    </Container>
-);
-
-export { Compiler };
diff --git a/packages/dev-tools-pages/ts/components/Container.tsx b/packages/dev-tools-pages/ts/components/Container.tsx
deleted file mode 100644
index 1b9212ed2..000000000
--- a/packages/dev-tools-pages/ts/components/Container.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import styled from 'styled-components';
-
-interface ContainerProps {
-    wide?: boolean;
-}
-
-const Container =
-    styled.div <
-    ContainerProps >
-    `
-    max-width: 77.5rem;
-    margin: 0 auto;
-    width: ${props => (props.wide ? '100%' : 'calc(100% - 5rem)')};
-`;
-
-export { Container };
diff --git a/packages/dev-tools-pages/ts/components/Content.tsx b/packages/dev-tools-pages/ts/components/Content.tsx
deleted file mode 100644
index 55550441c..000000000
--- a/packages/dev-tools-pages/ts/components/Content.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import * as React from 'react';
-import styled from 'styled-components';
-
-import { Container } from './Container';
-
-const StyledMain =
-    styled.div <
-    MainProps >
-    `
-    padding-top: 6.25rem;
-    padding-bottom: 6.25rem;
-    ${props =>
-        props.dark
-            ? `
-        background-color: #000;
-        color: #fff;
-        p:not([class]) {
-            color: #CCC;
-        }
-    `
-            : ''};
-`;
-
-interface MainProps {
-    dark?: boolean;
-}
-
-const Content: React.StatelessComponent<MainProps> = props => (
-    <StyledMain dark={props.dark}>
-        <Container>{props.children}</Container>
-    </StyledMain>
-);
-
-export { Content };
diff --git a/packages/dev-tools-pages/ts/components/ContentBlock.tsx b/packages/dev-tools-pages/ts/components/ContentBlock.tsx
deleted file mode 100644
index 2818858dc..000000000
--- a/packages/dev-tools-pages/ts/components/ContentBlock.tsx
+++ /dev/null
@@ -1,77 +0,0 @@
-import * as React from 'react';
-import styled from 'styled-components';
-
-import { ContextInterface } from 'ts/context';
-import { media } from 'ts/variables';
-
-import { Alpha, Beta } from './Typography';
-
-const Base = styled.div`
-    display: flex;
-    align-items: flex-start;
-    justify-content: space-between;
-    :not(:last-of-type) {
-        margin-bottom: 6.25rem;
-    }
-    ${Beta} {
-        margin-bottom: 2.5rem;
-    }
-    ${media.small`
-        display: block;
-        :not(:last-of-type) {
-            margin-bottom: 3.125rem;
-        }
-    `};
-`;
-
-const Content = styled.div`
-    width: 66.693548387%;
-    ${media.small`
-        width: 100%;
-    `};
-`;
-
-const Item = styled.div`
-    p {
-        max-width: 31.25rem;
-    }
-
-    &:not(:last-of-type) {
-        margin-bottom: 2.5rem;
-        ${media.small`
-            margin-bottom: 1.875rem;
-        `};
-    }
-`;
-
-const StyledTitle = styled(Alpha)`
-    color: ${props => props.color};
-    ${media.small`
-        & + div {
-            margin-top: 1.5rem;
-        }
-    `};
-`;
-
-interface ContentBlockProps extends ContextInterface {
-    title: string;
-    main?: boolean;
-    children?: React.ReactNode;
-}
-
-const ContentBlock: React.StatelessComponent<ContentBlockProps> = props => {
-    const children = React.Children.map(props.children, child => {
-        return <Item>{child}</Item>;
-    });
-
-    const Title = props.main ? StyledTitle : Beta;
-
-    return (
-        <Base>
-            <Title color={props.colors}>{props.title}</Title>
-            {children === undefined ? null : <Content>{children}</Content>}
-        </Base>
-    );
-};
-
-export { ContentBlock };
diff --git a/packages/dev-tools-pages/ts/components/Footer.tsx b/packages/dev-tools-pages/ts/components/Footer.tsx
deleted file mode 100644
index a278fdfee..000000000
--- a/packages/dev-tools-pages/ts/components/Footer.tsx
+++ /dev/null
@@ -1,132 +0,0 @@
-import * as React from 'react';
-import styled from 'styled-components';
-
-import { context as compiler } from 'ts/context/compiler';
-import { context as cov } from 'ts/context/cov';
-import { context as profiler } from 'ts/context/profiler';
-import { context as trace } from 'ts/context/trace';
-import MainIcon from 'ts/icons/logos/0x.svg';
-import { media } from 'ts/variables';
-
-import { Container } from './Container';
-import { Alpha, Beta } from './Typography';
-
-const tools = [trace, cov, compiler, profiler];
-
-const Footer: React.StatelessComponent<{}> = () => (
-    <StyledFooter>
-        <Container>
-            <Top>
-                <Alpha>Other tools by 0x</Alpha>
-                <List>
-                    {tools.map(({ title, subtitle, icon }) => (
-                        <ListItem key={title}>
-                            <ListLink href="#">
-                                <Icon as={icon} />
-                                <div>
-                                    <Beta>{title}</Beta>
-                                    <p>{subtitle}</p>
-                                </div>
-                            </ListLink>
-                        </ListItem>
-                    ))}
-                </List>
-            </Top>
-            <Media as="aside">
-                <Icon as={MainIcon} />
-                <Small>
-                    0x is an open, permissionless protocol allowing for tokens to be traded on the Ethereum blockchain.
-                </Small>
-            </Media>
-        </Container>
-    </StyledFooter>
-);
-
-const StyledFooter = styled.footer`
-    background-color: ${props => props.theme.colors.secondary};
-    padding-top: 6.25rem;
-    padding-bottom: 5.4375rem;
-
-    ${media.small`padding-top: 2.5rem;`};
-`;
-
-const Top = styled.div`
-    display: flex;
-    justify-content: space-between;
-    margin-bottom: 9.375rem;
-
-    ${media.medium`
-        display: block;
-        margin-bottom: 5.3125rem;
-    `};
-
-    ${Alpha} {
-        ${media.medium`margin-bottom: 3.8125rem;`};
-    }
-`;
-
-const Icon = styled.div`
-    margin-right: 1.3125rem;
-    flex-shrink: 0;
-    ${media.small`margin-right: 0.9375rem`};
-`;
-
-const Media = styled.div`
-    display: flex;
-    align-items: center;
-
-    ${Icon} {
-        margin-top: 0.5rem;
-        align-self: flex-start;
-    }
-`;
-
-const List = styled.ul`
-    list-style: none;
-    margin: 0;
-    padding: 0;
-    width: 66.693548387%;
-    display: flex;
-    flex-wrap: wrap;
-
-    ${media.medium`
-        width: 100%;
-    `};
-
-    ${media.small`
-        display: block;
-    `};
-`;
-
-const ListItem = styled.li`
-    margin-bottom: 3.3125rem;
-    padding-right: 1rem;
-    flex-basis: 50%;
-    :nth-last-of-type(-n + 2) {
-        margin-bottom: 0;
-
-        ${media.small`margin-bottom: 1.875rem`};
-    }
-
-    ${media.small`
-        margin-bottom: 1.875rem
-        :last-of-type {
-            margin-bottom: 0;
-        }
-    `};
-`;
-
-const ListLink = styled.a`
-    display: flex;
-    align-items: center;
-    :hover {
-        color: ${props => props.theme.colors.dark};
-    }
-`;
-
-const Small = styled.small`
-    font-size: 1em;
-    max-width: 37.5rem;
-`;
-
-export { Footer };
diff --git a/packages/dev-tools-pages/ts/components/Header.tsx b/packages/dev-tools-pages/ts/components/Header.tsx
deleted file mode 100644
index 94714c0af..000000000
--- a/packages/dev-tools-pages/ts/components/Header.tsx
+++ /dev/null
@@ -1,76 +0,0 @@
-import * as React from 'react';
-import styled from 'styled-components';
-
-import { ContextInterface, ThemeContext } from 'ts/context';
-import { media } from 'ts/variables';
-
-import { Container } from './Container';
-import { Small } from './Typography';
-
-const Header: React.StatelessComponent<{}> = () => (
-    <ThemeContext.Consumer>
-        {({ icon, title }: ContextInterface) => (
-            <StyledHeader>
-                <Container>
-                    <LogoMark>
-                        <Logo as={icon as 'svg'} />
-                        <Title>{title}</Title>
-                    </LogoMark>
-
-                    <Link as="a" href="https://0xproject.com/">
-                        Built by 0x
-                    </Link>
-                </Container>
-            </StyledHeader>
-        )}
-    </ThemeContext.Consumer>
-);
-
-const StyledHeader = styled.header`
-    padding-top: 3.75rem;
-    padding-bottom: 0.875rem;
-    width: 100%;
-    position: absolute;
-    top: 0;
-    left: 0;
-    z-index: 2;
-    ${Container} {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-    }
-
-    ${media.small`padding-top: 2.125rem;`};
-`;
-
-const LogoMark = styled.div`
-    position: relative;
-    height: 1.75rem;
-    display: flex;
-    align-items: center;
-`;
-
-const Logo = styled.div`
-    color: ${props => props.theme.colors.main};
-    width: 1.75rem;
-    height: 100%;
-`;
-
-const Title = styled.h1`
-    font-size: 1.5rem;
-    line-height: 1;
-    white-space: nowrap;
-    margin-top: 2px;
-    margin-bottom: 0;
-    margin-left: 0.8125rem;
-
-    ${media.small`font-size: 1.25rem;`};
-`;
-
-const Link = styled(Small)`
-    :hover {
-        text-decoration: underline;
-    }
-`;
-
-export { Header };
diff --git a/packages/dev-tools-pages/ts/components/Hero.tsx b/packages/dev-tools-pages/ts/components/Hero.tsx
deleted file mode 100644
index 8b6d6ade3..000000000
--- a/packages/dev-tools-pages/ts/components/Hero.tsx
+++ /dev/null
@@ -1,63 +0,0 @@
-import * as React from 'react';
-import styled from 'styled-components';
-
-import { ContextInterface, ThemeContext } from 'ts/context';
-import { media } from 'ts/variables';
-
-import { Button } from './Button';
-import { Beta } from './Typography';
-
-const Hero: React.StatelessComponent<ContextInterface> = ({ children }) => (
-    <ThemeContext.Consumer>
-        {({ subtitle, tagline }: ContextInterface) => (
-            <StyledHero>
-                <HeroContainer>
-                    <Subtitle>{subtitle}</Subtitle>
-                    <Tagline as="p">{tagline}</Tagline>
-                    <Button as="a" href="#" large={true}>
-                        Read the Docs
-                    </Button>
-                </HeroContainer>
-                {navigator.userAgent !== 'ReactSnap' ? children : null}
-            </StyledHero>
-        )}
-    </ThemeContext.Consumer>
-);
-
-const StyledHero = styled.section`
-    text-align: center;
-    padding-top: 9.375rem;
-    padding-bottom: 2rem;
-    padding-left: 2.5rem;
-    padding-right: 2.5rem;
-    min-height: min-content;
-    max-height: 37.5rem;
-    height: 80vh;
-    position: relative;
-`;
-
-const HeroContainer = styled.div`
-    margin: 0 auto;
-    max-width: 590px;
-`;
-
-const Subtitle = styled.h2`
-    font-size: 3.75rem;
-    line-height: 1.16;
-    margin-bottom: 1.5rem;
-
-    ${media.small`
-        font-size: 2.25rem;
-        line-height: 1.1;
-        margin-bottom: 1.375rem;
-    `};
-`;
-
-const Tagline = styled(Beta)`
-    margin-bottom: 2rem;
-    ${media.small`
-        margin-bottom: 1.25rem;
-    `};
-`;
-
-export { Hero };
diff --git a/packages/dev-tools-pages/ts/components/InlineCode.tsx b/packages/dev-tools-pages/ts/components/InlineCode.tsx
deleted file mode 100644
index 561666b0f..000000000
--- a/packages/dev-tools-pages/ts/components/InlineCode.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import * as React from 'react';
-import styled from 'styled-components';
-
-import { colors } from '../variables';
-
-interface InlineCodeProps {
-    isAlt?: boolean;
-    children: React.ReactNode;
-}
-
-const Code: React.StatelessComponent<InlineCodeProps> = ({ isAlt, children, ...props }) => (
-    <code {...props}>{children}</code>
-);
-
-const InlineCode = styled(Code)`
-    background-color: ${props => (props.isAlt ? '#E5E8E9' : colors.blueGray)};
-    padding: 0.3125rem;
-`;
-
-export { InlineCode };
diff --git a/packages/dev-tools-pages/ts/components/Intro.tsx b/packages/dev-tools-pages/ts/components/Intro.tsx
deleted file mode 100644
index 54b14f237..000000000
--- a/packages/dev-tools-pages/ts/components/Intro.tsx
+++ /dev/null
@@ -1,70 +0,0 @@
-import * as React from 'react';
-import styled from 'styled-components';
-
-import { colors, media } from 'ts/variables';
-
-import { Breakout } from './Breakout';
-import { Container } from './Container';
-import { Alpha, Lead } from './Typography';
-
-const Main = styled.div`
-    background-color: ${colors.lightGray};
-    padding: 6.25rem;
-    display: flex;
-    justify-content: space-between;
-
-    ${media.large`
-        padding: 2.5rem;
-    `};
-    ${media.medium`
-        display: block;
-    `};
-`;
-
-const Title = styled(Alpha)`
-    margin-bottom: 2.5rem;
-
-    ${media.medium`margin-bottom: 2.25rem;`};
-`;
-
-const StyledIntroLead = styled(Lead)`
-    max-width: 25.9375rem;
-    margin-right: 2rem;
-    ${media.medium`
-        max-width: 100%;
-        margin-bottom: 1.5625rem;
-    `};
-`;
-
-const StyledIntroAside = styled.div`
-    max-width: 32.5rem;
-    position: relative;
-    ${media.medium`
-        max-width: 100%;
-    `};
-`;
-
-interface IntroLeadProps {
-    title: string;
-}
-
-const IntroLead: React.StatelessComponent<IntroLeadProps> = props => (
-    <StyledIntroLead as="div">
-        <Title>{props.title}</Title>
-        {props.children}
-    </StyledIntroLead>
-);
-
-const IntroAside: React.StatelessComponent<{}> = props => (
-    <Breakout>
-        <StyledIntroAside>{props.children}</StyledIntroAside>
-    </Breakout>
-);
-
-const Intro: React.StatelessComponent<{}> = props => (
-    <Container wide={true}>
-        <Main>{props.children}</Main>
-    </Container>
-);
-
-export { IntroLead, IntroAside, Intro };
diff --git a/packages/dev-tools-pages/ts/components/List.tsx b/packages/dev-tools-pages/ts/components/List.tsx
deleted file mode 100644
index 12d5d67a9..000000000
--- a/packages/dev-tools-pages/ts/components/List.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-import * as React from 'react';
-import styled from 'styled-components';
-
-import { media } from 'ts/variables';
-
-const StyledList = styled.ul`
-    list-style-type: none;
-    margin: 0;
-    padding: 0;
-    position: relative;
-`;
-
-const StyledItem = styled.li`
-    position: relative;
-    padding-left: 1.625rem;
-
-    :before {
-        content: '';
-        border: 1px solid black;
-        width: 0.625rem;
-        height: 0.625rem;
-        display: inline-block;
-        position: absolute;
-        margin-top: 2px;
-        top: 0.3125rem;
-        left: 0;
-        transform: rotate(45deg);
-    }
-    :not(:last-child) {
-        margin-bottom: 0.5625rem;
-        ${media.small`
-            margin-bottom: 0.375rem;
-        `};
-    }
-`;
-
-interface ListProps {
-    items?: [];
-}
-
-const List: React.StatelessComponent<ListProps> = props => (
-    <StyledList>
-        {props.children !== undefined
-            ? props.children
-            : props.items.map((bullet, index) => <StyledItem key={index}>{bullet}</StyledItem>)}
-    </StyledList>
-);
-
-export { List, StyledItem as ListItem };
diff --git a/packages/dev-tools-pages/ts/components/Tabs.tsx b/packages/dev-tools-pages/ts/components/Tabs.tsx
deleted file mode 100644
index 0a62fa334..000000000
--- a/packages/dev-tools-pages/ts/components/Tabs.tsx
+++ /dev/null
@@ -1,64 +0,0 @@
-import * as React from 'react';
-import { Tab, TabList, TabPanel, Tabs as ReactTabs } from 'react-tabs';
-import styled from 'styled-components';
-
-import { colors } from 'ts/variables';
-
-import { Breakout } from './Breakout';
-
-const StyledTabList = styled(TabList)`
-    text-transform: uppercase;
-    list-style: none;
-    margin: 0;
-    padding: 0;
-    overflow: hidden;
-`;
-
-const StyledTab = styled(Tab)`
-    background-color: ${props => props.theme.colors.secondary};
-    height: 2.5rem;
-    padding-left: 1rem;
-    padding-right: 1rem;
-    display: flex;
-    justify-content: space-around;
-    align-items: center;
-    float: left;
-    &:not(:first-of-type) {
-        margin-left: 0.25rem;
-    }
-
-    &[aria-selected='true'] {
-        background-color: ${colors.gray};
-    }
-
-    &[aria-selected='false']:focus,
-    &[aria-selected='false']:hover {
-        background-color: ${props => props.theme.colors.secondary_alt};
-        cursor: pointer;
-    }
-`;
-
-const Tabs: React.StatelessComponent<{}> = props => (
-    <Breakout>
-        <ReactTabs>
-            <StyledTabList>
-                {React.Children.map(props.children, child => {
-                    const { title } = React.cloneElement(child as React.ReactElement<any>).props;
-                    return <StyledTab>{title}</StyledTab>;
-                })}
-            </StyledTabList>
-
-            {React.Children.map(props.children, child => <TabPanel>{child}</TabPanel>)}
-        </ReactTabs>
-    </Breakout>
-);
-
-interface TabBlockProps {
-    title: string;
-}
-
-const TabBlock: React.StatelessComponent<TabBlockProps> = props => <React.Fragment>{props.children}</React.Fragment>;
-
-const ContextTabs = Tabs;
-
-export { ContextTabs as Tabs, TabBlock };
diff --git a/packages/dev-tools-pages/ts/components/Trace.tsx b/packages/dev-tools-pages/ts/components/Trace.tsx
deleted file mode 100644
index 0cee4c1a2..000000000
--- a/packages/dev-tools-pages/ts/components/Trace.tsx
+++ /dev/null
@@ -1,223 +0,0 @@
-import * as React from 'react';
-import styled from 'styled-components';
-
-import { ContextInterface, ThemeContext } from 'ts/context';
-import ExactLocation from 'ts/icons/exact-location.svg';
-import NoLocation from 'ts/icons/no-location.svg';
-import TimeConsuming from 'ts/icons/time-consuming.svg';
-import TimeSaving from 'ts/icons/time-saving.svg';
-import { colors, media } from 'ts/variables';
-
-import { Breakout } from './Breakout';
-import { Code } from './Code';
-import { Container } from './Container';
-import { Alpha, Gamma, Lead } from './Typography';
-
-const Trace: React.StatelessComponent<{}> = () => (
-    <ThemeContext.Consumer>
-        {(props: ContextInterface) => (
-            <StyledSection background={props.colors.secondary}>
-                <Wrapper>
-                    <Block>
-                        <Alpha>The Issue</Alpha>
-                        <MainCopy>
-                            Every time an Ethereum transaction fails, it's extremely hard to trace down the
-                            troublemaking line of code. The only hint you'll get is a generic error.
-                        </MainCopy>
-                        <Breakout>
-                            <Code isLight={true}>Error: VM Exception while processing transaction: rever</Code>
-                        </Breakout>
-
-                        <List>
-                            <Item>
-                                <Copy dark={true}>
-                                    <Gamma as="h3">No location</Gamma>
-                                    <p>
-                                        The error basically says "anything could have gone wrong here", which keeps you
-                                        completely in the dark about its exact location.
-                                    </p>
-                                </Copy>
-                                <Icon as={NoLocation} />
-                            </Item>
-
-                            <Item>
-                                <Copy dark={true}>
-                                    <Gamma as="h3">Time-consuming</Gamma>
-                                    <p>
-                                        Working with a large code-base that contains hundreds of smart contracts,
-                                        finding the failing line of code quickly becomes a daunting task.
-                                    </p>
-                                </Copy>
-                                <Icon as={TimeConsuming} />
-                            </Item>
-                        </List>
-                    </Block>
-
-                    <Block background={props.colors.secondary}>
-                        <Alpha>The Fix</Alpha>
-                        <MainCopy>
-                            Sol-trace will give you full stack traces, including contract names, line numbers and code
-                            snippets, every time you encounter an error.
-                        </MainCopy>
-                        <Breakout>
-                            <Code isLight={true} language="javascript">
-                                {`contracts/src/2.0.0/protocol/Exchange/MixinSignatureValidator.sol:51:8
-    require(
-        isValidSignature(
-            hash,
-            signerAddress,
-            signature
-        ),
-        "INVALID_SIGNATURE"
-    )`}
-                            </Code>
-                        </Breakout>
-
-                        <List>
-                            <Item>
-                                <Copy>
-                                    <Gamma as="h3">Exact location</Gamma>
-                                    <p>
-                                        It shows you the exact location of the specific code linen and where it was
-                                        called from.
-                                    </p>
-                                </Copy>
-                                <Icon as={ExactLocation} />
-                            </Item>
-
-                            <Item>
-                                <Copy>
-                                    <Gamma as="h3">Time-saving</Gamma>
-                                    <p>
-                                        Turning "Your code failed somewhere, good luck debugging it" into "Your code
-                                        failed on line X of contract Y", it drastically improves the developer
-                                        experience.
-                                    </p>
-                                </Copy>
-                                <Icon as={TimeSaving} />
-                            </Item>
-                        </List>
-                    </Block>
-                </Wrapper>
-            </StyledSection>
-        )}
-    </ThemeContext.Consumer>
-);
-
-interface TraceProps {
-    background?: string;
-}
-
-const StyledSection =
-    styled.section <
-    TraceProps >
-    `
-    max-width: 90rem;
-    margin: 0 auto;
-    background: linear-gradient(to right, ${colors.black} 50%, ${props => props.background} 50%);
-    overflow: hidden;
-    ${media.large`
-        background: none
-        padding-top: 0;
-        padding-bottom: 0;
-    `};
-`;
-
-const Wrapper = styled(Container)`
-    display: flex;
-
-    ${Alpha} {
-        padding-bottom: 2.5rem;
-
-        ${media.small`padding-bottom: 1.875rem;`};
-    }
-
-    ${media.large`
-        display: block;
-        width: 100%;
-    `};
-`;
-
-const Block =
-    styled.div <
-    TraceProps >
-    `
-    width: 50%;
-    background: ${props => (props.background ? props.background : colors.black)};
-    color: ${props => (props.background ? 'inherit' : colors.white)};
-    padding-top: 6.25rem;
-    padding-bottom: 5.25rem;
-
-    :first-of-type {
-        padding-right: 6.25rem;
-    }
-    :last-of-type {
-        padding-left: 6.25rem;
-    }
-
-    ${media.xlarge`
-        :first-of-type {
-            padding-right: 2.5rem;
-        }
-        :last-of-type {
-            padding-left: 2.5rem;
-        }
-    `}
-    ${media.large`
-        width: 100%;
-        padding: 2.5rem;
-    `}
-
-    ${media.small`
-        padding-left: 1.875rem;
-        padding-right: 1.875rem;
-    `};
-`;
-
-const MainCopy = styled(Lead)`
-    margin-bottom: 3.1875rem;
-    ${media.small`
-        margin-bottom: 1.125rem;
-    `};
-`;
-
-const List = styled.ul`
-    margin-top: 6.25rem;
-    margin-bottom: 0;
-    padding: 0;
-
-    ${media.small`margin-top: 3.4375rem;`};
-`;
-
-const Item = styled.li`
-    display: flex;
-    align-items: center;
-
-    :not(:last-child) {
-        margin-bottom: 4.4375rem;
-
-        ${media.small`margin-bottom: 3.4375rem;`};
-    }
-`;
-
-const Copy =
-    styled.div <
-    { dark: boolean } >
-    `
-    margin-right: 5.875rem;
-    ${props =>
-        props.dark &&
-        `
-        p {
-            color: #ccc;
-        }
-    `}
-
-    ${media.small`margin-right: 2.0625rem;`};
-`;
-
-const Icon = styled.div`
-    flex-shrink: 0;
-`;
-
-export { Trace };
diff --git a/packages/dev-tools-pages/ts/components/Typography.tsx b/packages/dev-tools-pages/ts/components/Typography.tsx
deleted file mode 100644
index e4b13163a..000000000
--- a/packages/dev-tools-pages/ts/components/Typography.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import styled from 'styled-components';
-
-import { media } from '../variables';
-
-const Alpha = styled.h2`
-    font-size: 1.75rem;
-    line-height: 1;
-
-    ${media.small`font-size: 1.5rem;`};
-`;
-
-const Beta = styled.h3`
-    font-size: 1.25rem;
-    line-height: 1.65;
-`;
-
-const Gamma = styled.h4`
-    font-size: 1rem;
-
-    ${media.small`font-size: 0.875rem;`};
-`;
-
-const Lead = styled.p`
-    font-size: 1.25rem;
-    line-height: 1.6;
-    ${media.small`font-size: 1rem;`};
-`;
-
-const Small = styled.p`
-    font-size: 0.875rem;
-`;
-
-export { Alpha, Beta, Gamma, Lead, Small };
diff --git a/packages/dev-tools-pages/ts/components/animations/compiler/data.json b/packages/dev-tools-pages/ts/components/animations/compiler/data.json
new file mode 100644
index 000000000..6b10e537b
--- /dev/null
+++ b/packages/dev-tools-pages/ts/components/animations/compiler/data.json
@@ -0,0 +1 @@
+{"v":"5.4.1","fr":30,"ip":0,"op":420,"w":4300,"h":1400,"nm":"header-compiler","ddd":0,"assets":[],"layers":[{"ddd":0,"ind":2,"ty":4,"nm":"Path Copy 3","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[328.5,911.5,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-61.75,-99.75],[99.75,61.75],[61.75,99.75],[-99.75,-61.75]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.117646999657,0.678430974483,0.803921997547,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path Copy 3","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":3,"ty":4,"nm":"Path","parent":16,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[-280,-180,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-39.25,87.75],[87.75,-39.25],[39.25,-87.75],[-87.75,39.25]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.117646999657,0.678430974483,0.803921997547,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"fl","c":{"a":0,"k":[1,1,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":4,"ty":4,"nm":"Path","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[1261.5,738.5,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[15.75,82.75],[82.75,15.75],[-15.75,-82.75],[-82.75,-15.75]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.117646999657,0.678430974483,0.803921997547,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"fl","c":{"a":0,"k":[1,1,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":5,"ty":4,"nm":"Path","parent":12,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[370,-209,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[23.25,-23.25],[-23.25,23.25]],"c":false},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.117646999657,0.678430974483,0.803921997547,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":6,"ty":4,"nm":"Path","parent":12,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[347,-269,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-60.25,-60.25],[60.25,60.25]],"c":false},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.117646999657,0.678430974483,0.803921997547,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":7,"ty":4,"nm":"Path","parent":12,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[330,-250,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-37.25,-84.25],[84.25,37.25],[37.25,84.25],[-84.25,-37.25]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.117646999657,0.678430974483,0.803921997547,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":8,"ty":4,"nm":"Path Copy","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":180,"s":[449.5,348.5,0],"e":[223.5,574.5,0],"to":[-37.6666679382324,37.6666679382324,0],"ti":[37.6666679382324,-37.6666679382324,0]},{"i":{"x":0.667,"y":0.667},"o":{"x":0.333,"y":0.333},"n":"0p667_0p667_0p333_0p333","t":210,"s":[223.5,574.5,0],"e":[223.5,574.5,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":390.5,"s":[223.5,574.5,0],"e":[449.5,348.5,0],"to":[37.6666679382324,-37.6666679382324,0],"ti":[-37.6666679382324,37.6666679382324,0]},{"t":420}],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[9.42,-69.25],[-69.25,9.42],[-9.42,69.25],[69.25,-9.42]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.117646999657,0.678430974483,0.803921997547,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path Copy","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"fl","c":{"a":0,"k":[1,1,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":9,"ty":4,"nm":"Shape Layer 2","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[2150,700,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":180,"s":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-1935,-90],[-1765,-260]],"c":false}],"e":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-2020,87],[-1946,13]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":210,"s":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-2020,87],[-1946,13]],"c":false}],"e":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-2020,87],[-1946,13]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":390,"s":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-2020,87],[-1946,13]],"c":false}],"e":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-1935,-90],[-1765,-260]],"c":false}]},{"t":420}],"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.117647066303,0.678431372549,0.803921628466,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":4,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"fl","c":{"a":0,"k":[1,0,0,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":true},{"ty":"tr","p":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":180,"s":[1,-1],"e":[0,0],"to":[-0.16666667163372,0.16666667163372],"ti":[0.16666667163372,-0.16666667163372]},{"i":{"x":0.667,"y":0.667},"o":{"x":0.333,"y":0.333},"n":"0p667_0p667_0p333_0p333","t":210,"s":[0,0],"e":[0,0],"to":[0,0],"ti":[0,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":390,"s":[0,0],"e":[1,-1],"to":[0.16666667163372,-0.16666667163372],"ti":[-0.16666667163372,0.16666667163372]},{"t":420}],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Shape 1","np":3,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":527,"st":0,"bm":0},{"ddd":0,"ind":10,"ty":4,"nm":"Shape Layer 1","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":180,"s":[2150,700,0],"e":[1920,930,0],"to":[-38.3333320617676,38.3333320617676,0],"ti":[38.3333320617676,-38.3333320617676,0]},{"i":{"x":0.667,"y":0.667},"o":{"x":0.333,"y":0.333},"n":"0p667_0p667_0p333_0p333","t":210,"s":[1920,930,0],"e":[1920,930,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":390,"s":[1920,930,0],"e":[2150,700,0],"to":[38.3333320617676,-38.3333320617676,0],"ti":[-38.3333320617676,38.3333320617676,0]},{"t":420}],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":180,"s":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-1806,-241],[-1748,-183]],"c":false}],"e":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-1750,-185],[-1748,-183]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":210,"s":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-1750,-185],[-1748,-183]],"c":true}],"e":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-1750,-185],[-1748,-183]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":390,"s":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-1750,-185],[-1748,-183]],"c":true}],"e":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-1806,-241],[-1748,-183]],"c":false}]},{"t":420}],"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.117647066303,0.678431372549,0.803921628466,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":4,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"fl","c":{"a":0,"k":[1,1,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":true},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Shape 1","np":3,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":527,"st":0,"bm":0},{"ddd":0,"ind":11,"ty":4,"nm":"Path Copy 2","parent":8,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[-134,194,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":180,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[28.03,-56.75],[-56.75,28.03],[-28.03,56.75],[56.75,-28.03]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[56.53,-28.25],[20.5,9.03],[20.72,9.25],[56.75,-28.03]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":210,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[56.53,-28.25],[20.5,9.03],[20.72,9.25],[56.75,-28.03]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[56.53,-28.25],[20.5,9.03],[20.72,9.25],[56.75,-28.03]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":391,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[56.53,-28.25],[20.5,9.03],[20.72,9.25],[56.75,-28.03]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[28.03,-56.75],[-56.75,28.03],[-28.03,56.75],[56.75,-28.03]],"c":true}]},{"t":421}],"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.117646999657,0.678430974483,0.803921997547,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path Copy 2","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":12,"ty":4,"nm":"Big block","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":90,"s":[571.5,588.5,0],"e":[697.5,462.5,0],"to":[21,-21,0],"ti":[-21,21,0]},{"i":{"x":0.667,"y":0.667},"o":{"x":0.167,"y":0.167},"n":"0p667_0p667_0p167_0p167","t":120,"s":[697.5,462.5,0],"e":[697.5,462.5,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.833,"y":1},"o":{"x":0.333,"y":0},"n":"0p833_1_0p333_0","t":300,"s":[697.5,462.5,0],"e":[571.5,588.5,0],"to":[-21,21,0],"ti":[21,-21,0]},{"t":330}],"ix":2},"a":{"a":0,"k":[2,-2,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"st","c":{"a":0,"k":[0.117646998985,0.67843095368,0.803921987496,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"fl","c":{"a":0,"k":[1,1,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Shape 1","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[60.75,-182.25],[-182.25,60.75],[-60.75,182.25],[182.25,-60.75]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.117646999657,0.678430974483,0.803921997547,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":2,"cix":2,"ix":2,"mn":"ADBE Vector Group","hd":false},{"ty":"fl","c":{"a":0,"k":[1,1,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":13,"ty":4,"nm":"Path Copy 4","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[389.5,770.5,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":90,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-92.25,-29.25],[-92.25,-29.25],[29.25,92.25],[29.25,92.25]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-29.25,-92.25],[-92.25,-29.25],[29.25,92.25],[92.25,29.25]],"c":true}]},{"t":120}],"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.117646999657,0.678430974483,0.803921997547,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path Copy 4","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":14,"ty":4,"nm":"Path Copy 9","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":90,"s":[273,647,0],"e":[317,695,0],"to":[7.33333349227905,8,0],"ti":[-7.33333349227905,-8,0]},{"i":{"x":0.667,"y":0.667},"o":{"x":0.333,"y":0.333},"n":"0p667_0p667_0p333_0p333","t":120,"s":[317,695,0],"e":[317,695,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.833,"y":1},"o":{"x":0.333,"y":0},"n":"0p833_1_0p333_0","t":300,"s":[317,695,0],"e":[273,647,0],"to":[-7.33333349227905,-8,0],"ti":[7.33333349227905,8,0]},{"t":330}],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[30.75,-31.25],[-31.5,31]],"c":false},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.117646999657,0.678430974483,0.803921997547,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path Copy 9","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":15,"ty":4,"nm":"Path Copy 8","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":90,"s":[329,832,0],"e":[349,812,0],"to":[3.33333325386047,-3.33333325386047,0],"ti":[-3.33333325386047,3.33333325386047,0]},{"i":{"x":0.667,"y":0.667},"o":{"x":0.333,"y":0.333},"n":"0p667_0p667_0p333_0p333","t":120,"s":[349,812,0],"e":[349,812,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.833,"y":1},"o":{"x":0.333,"y":0},"n":"0p833_1_0p333_0","t":300,"s":[349,812,0],"e":[329,832,0],"to":[-3.33333325386047,3.33333325386047,0],"ti":[3.33333325386047,-3.33333325386047,0]},{"t":330}],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-61,-61],[61,61]],"c":false},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.117646999657,0.678430974483,0.803921997547,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path Copy 8","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":16,"ty":4,"nm":"wide box","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":90,"s":[971.5,988.5,0],"e":[1096.5,864.5,0],"to":[10.0566339492798,-9.97618103027344,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":0.667},"o":{"x":0.333,"y":0.333},"n":"0p667_0p667_0p333_0p333","t":120,"s":[1096.5,864.5,0],"e":[1096.5,864.5,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.833,"y":1},"o":{"x":0.333,"y":0},"n":"0p833_1_0p333_0","t":300,"s":[1096.5,864.5,0],"e":[971.5,988.5,0],"to":[0,0,0],"ti":[-20.8333339691162,20.6666660308838,0]},{"t":330}],"ix":2},"a":{"a":0,"k":[-1,1,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-129.25,-52.25],[-52.25,-129.25],[129.25,52.25],[52.25,129.25]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.117646999657,0.678430974483,0.803921997547,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"fl","c":{"a":0,"k":[1,1,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":17,"ty":4,"nm":"Path","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":90,"s":[993,766,0],"e":[1071,688,0],"to":[13,-13,0],"ti":[-13,13,0]},{"i":{"x":0.667,"y":0.667},"o":{"x":0.333,"y":0.333},"n":"0p667_0p667_0p333_0p333","t":120,"s":[1071,688,0],"e":[1071,688,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.833,"y":1},"o":{"x":0.333,"y":0},"n":"0p833_1_0p333_0","t":300,"s":[1071,688,0],"e":[993,766,0],"to":[-13,13,0],"ti":[13,-13,0]},{"t":330}],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-89.5,-89.5],[89.5,89.5]],"c":false},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.117646999657,0.678430974483,0.803921997547,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":18,"ty":4,"nm":"Path","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":90,"s":[1115,850,0],"e":[1311.5,799.5,0],"to":[18.5410747528076,-4.90381097793579,0],"ti":[-5.73690891265869,1.51731848716736,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":120,"s":[1311.5,799.5,0],"e":[1311.5,799.5,0],"to":[33.0833320617676,-8.75,0],"ti":[5.73690891265869,-1.51731848716736,0]},{"i":{"x":0.833,"y":1},"o":{"x":0.333,"y":0},"n":"0p833_1_0p333_0","t":300,"s":[1311.5,799.5,0],"e":[1115,850,0],"to":[-5.73690891265869,1.51731848716736,0],"ti":[-33.0833320617676,8.75,0]},{"t":330}],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[103.689,103.689,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[30.5,-30.5],[-30.5,30.5]],"c":false},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.117646999657,0.678430974483,0.803921997547,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":19,"ty":4,"nm":"Path","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[1011.5,748.5,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.833,"y":0.833},"o":{"x":0.333,"y":0},"n":"0p833_0p833_0p333_0","t":90,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[120.75,57.75],[58.25,120.25],[-120.25,-58.25],[-57.75,-120.75]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[120.514,57.986],[119.427,59.073],[-59.073,-119.427],[-57.986,-120.514]],"c":true}]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"n":"0p833_0p833_0p167_0p167","t":120,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[120.514,57.986],[119.427,59.073],[-59.073,-119.427],[-57.986,-120.514]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[120.514,57.986],[119.427,59.073],[-59.073,-119.427],[-57.986,-120.514]],"c":true}]},{"i":{"x":0.833,"y":1},"o":{"x":0.167,"y":0.167},"n":"0p833_1_0p167_0p167","t":300,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[120.514,57.986],[119.427,59.073],[-59.073,-119.427],[-57.986,-120.514]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[120.75,57.75],[58.25,120.25],[-120.25,-58.25],[-57.75,-120.75]],"c":true}]},{"t":330}],"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.117646999657,0.678430974483,0.803921997547,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 1","np":0,"cix":2,"ix":2,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":20,"ty":4,"nm":"Path","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[3620,905,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[33,163],[-163,-33],[-33,-163],[163,33]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.117646999657,0.678430974483,0.803921997547,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":21,"ty":4,"nm":"Path","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[3274,751,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[86,-140],[140,-86],[-86,140],[-140,86]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.117646999657,0.678430974483,0.803921997547,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":22,"ty":4,"nm":"Path","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[3770,475,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-2,-162],[162,2],[2,162],[-162,-2]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.117646999657,0.678430974483,0.803921997547,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":23,"ty":4,"nm":"Path","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[3465,340,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[80,-24],[24,-80],[-82,26],[-26,82]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.117646999657,0.678430974483,0.803921997547,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":24,"ty":4,"nm":"Path","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":90,"s":[3420.5,966.5,0],"e":[3389.5,996.5,0],"to":[-5.16666650772095,5,0],"ti":[5.16666650772095,-5,0]},{"i":{"x":0.667,"y":0.667},"o":{"x":0.167,"y":0.167},"n":"0p667_0p667_0p167_0p167","t":120,"s":[3389.5,996.5,0],"e":[3389.5,996.5,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":300,"s":[3389.5,996.5,0],"e":[3420.5,966.5,0],"to":[5.16666650772095,-5,0],"ti":[-5.16666650772095,5,0]},{"t":330}],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":90,"s":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-62.75,-62.75],[-62.25,-62.25]],"c":false}],"e":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-62.75,-62.75],[62.75,62.75]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.167,"y":0},"n":"0p667_1_0p167_0","t":120,"s":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-62.75,-62.75],[62.75,62.75]],"c":false}],"e":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-62.75,-62.75],[62.75,62.75]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":300,"s":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-62.75,-62.75],[62.75,62.75]],"c":false}],"e":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-62.75,-62.75],[-62.25,-62.25]],"c":false}]},{"t":330}],"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.117646999657,0.678430974483,0.803921997547,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":25,"ty":4,"nm":"Path","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":90,"s":[3219.5,915.5,0],"e":[3339.5,1035.5,0],"to":[20,20,0],"ti":[-20,-20,0]},{"i":{"x":0.667,"y":0.667},"o":{"x":0.167,"y":0.167},"n":"0p667_0p667_0p167_0p167","t":120,"s":[3339.5,1035.5,0],"e":[3339.5,1035.5,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":300,"s":[3339.5,1035.5,0],"e":[3219.5,915.5,0],"to":[-20,-20,0],"ti":[20,20,0]},{"t":330}],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":90,"s":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[38.25,-38.25],[38.25,-38.25]],"c":false}],"e":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[38.25,-38.25],[-38.25,38.25]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.167,"y":0},"n":"0p667_1_0p167_0","t":120,"s":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[38.25,-38.25],[-38.25,38.25]],"c":false}],"e":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[38.25,-38.25],[-38.25,38.25]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":300,"s":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[38.25,-38.25],[-38.25,38.25]],"c":false}],"e":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[38.25,-38.25],[38.25,-38.25]],"c":false}]},{"t":330}],"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.117646999657,0.678430974483,0.803921997547,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":26,"ty":4,"nm":"Path","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[3344,1041,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":90,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[42,42],[0,0],[0,0],[0,0]],"v":[[-25,-101],[-24,-100],[-24.5,-99.5],[-25.5,-100.5]],"c":false}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-25,-101],[101,25],[25,101],[-101,-25]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.167,"y":0},"n":"0p667_1_0p167_0","t":120,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-25,-101],[101,25],[25,101],[-101,-25]],"c":false}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-25,-101],[101,25],[25,101],[-101,-25]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":300,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-25,-101],[101,25],[25,101],[-101,-25]],"c":false}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[42,42],[0,0],[0,0],[0,0]],"v":[[-25,-101],[-24,-100],[-24.5,-99.5],[-25.5,-100.5]],"c":false}]},{"t":330}],"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.117646999657,0.678430974483,0.803921997547,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":27,"ty":4,"nm":"Path","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":90,"s":[3142.5,483.5,0],"e":[3266.5,359.5,0],"to":[20.6666660308838,-20.6666660308838,0],"ti":[-20.6666660308838,20.6666660308838,0]},{"i":{"x":0.667,"y":0.667},"o":{"x":0.333,"y":0.333},"n":"0p667_0p667_0p333_0p333","t":120,"s":[3266.5,359.5,0],"e":[3266.5,359.5,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":300,"s":[3266.5,359.5,0],"e":[3142.5,483.5,0],"to":[-20.6666660308838,20.6666660308838,0],"ti":[20.6666660308838,-20.6666660308838,0]},{"t":330}],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":90,"s":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-73.25,-73.25],[73.25,73.25]],"c":false}],"e":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-33.25,-33.25],[73.25,73.25]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":120,"s":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-33.25,-33.25],[73.25,73.25]],"c":false}],"e":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-33.25,-33.25],[73.25,73.25]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":300,"s":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-33.25,-33.25],[73.25,73.25]],"c":false}],"e":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-73.25,-73.25],[73.25,73.25]],"c":false}]},{"t":329.5}],"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.117646999657,0.678430974483,0.803921997547,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":28,"ty":4,"nm":"Path","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":90,"s":[3163,420,0],"e":[3327,588,0],"to":[27.3333339691162,28,0],"ti":[-27.3333339691162,-28,0]},{"i":{"x":0.667,"y":0.667},"o":{"x":0.333,"y":0.333},"n":"0p667_0p667_0p333_0p333","t":120,"s":[3327,588,0],"e":[3327,588,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":300,"s":[3327,588,0],"e":[3163,420,0],"to":[-27.3333339691162,-28,0],"ti":[27.3333339691162,28,0]},{"t":330}],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":90,"s":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[42,-42],[-42,42]],"c":false}],"e":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[42,-42],[42.312,-42.125]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":120,"s":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[42,-42],[42.312,-42.125]],"c":false}],"e":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[42,-42],[42.312,-42.125]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":300,"s":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[42,-42],[42.312,-42.125]],"c":false}],"e":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[42,-42],[-42,42]],"c":false}]},{"t":330}],"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.117646999657,0.678430974483,0.803921997547,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":29,"ty":4,"nm":"Path","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[3184,441,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":90,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[31,115],[-115,-31],[-31,-115],[115,31]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[113.5,31.5],[8,-74],[8,-74],[113.5,31.5]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":120,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[113.5,31.5],[8,-74],[8,-74],[113.5,31.5]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[113.5,31.5],[8,-74],[8,-74],[113.5,31.5]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":300,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[113.5,31.5],[8,-74],[8,-74],[113.5,31.5]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[31,115],[-115,-31],[-31,-115],[115,31]],"c":true}]},{"t":330}],"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.117646999657,0.678430974483,0.803921997547,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":30,"ty":4,"nm":"Path","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":90,"s":[2954,751,0],"e":[3120,585,0],"to":[27.6666660308838,-27.6666660308838,0],"ti":[-27.6666660308838,27.6666660308838,0]},{"i":{"x":0.667,"y":0.667},"o":{"x":0.333,"y":0.333},"n":"0p667_0p667_0p333_0p333","t":120,"s":[3120,585,0],"e":[3120,585,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":300,"s":[3120,585,0],"e":[2954,751,0],"to":[-27.6666660308838,27.6666660308838,0],"ti":[27.6666660308838,-27.6666660308838,0]},{"t":330}],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[146,-40],[40,-146],[-146,40],[-40,146]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.117646999657,0.678430974483,0.803921997547,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":31,"ty":4,"nm":"Shape Layer 5","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":188,"s":[2046,804,0],"e":[2150,700,0],"to":[17.3333339691162,-17.3333339691162,0],"ti":[-17.3333339691162,17.3333339691162,0]},{"i":{"x":0.667,"y":0.667},"o":{"x":0.333,"y":0.333},"n":"0p667_0p667_0p333_0p333","t":210,"s":[2150,700,0],"e":[2150,700,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":390,"s":[2150,700,0],"e":[2046,804,0],"to":[-17.3333339691162,17.3333339691162,0],"ti":[17.3333339691162,-17.3333339691162,0]},{"t":410}],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":180,"s":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[1727,-6],[1858,125]],"c":true}],"e":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[1727,-6],[1968,235]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":210,"s":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[1727,-6],[1968,235]],"c":false}],"e":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[1727,-6],[1968,235]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":390,"s":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[1727,-6],[1968,235]],"c":false}],"e":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[1727,-6],[1858,125]],"c":true}]},{"t":420}],"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.117647066303,0.678431372549,0.803921628466,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":4,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"fl","c":{"a":0,"k":[1,1,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Shape 1","np":3,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":527,"st":0,"bm":0},{"ddd":0,"ind":32,"ty":4,"nm":"Shape Layer 4","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[2120,670,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":180,"s":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[1684,158],[1685,157]],"c":false}],"e":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[1746,220],[1963,3]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":210,"s":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[1746,220],[1963,3]],"c":false}],"e":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[1746,220],[1963,3]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":390,"s":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[1746,220],[1963,3]],"c":false}],"e":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[1684,158],[1685,157]],"c":false}]},{"t":420}],"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.117647066303,0.678431372549,0.803921628466,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":4,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"fl","c":{"a":0,"k":[1,1,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Shape 1","np":3,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":527,"st":0,"bm":0},{"ddd":0,"ind":33,"ty":4,"nm":"Shape Layer 3","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[3138,417,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0]],"o":[[0,0]],"v":[[-2516,745]],"c":false},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.117647066303,0.678431372549,0.803921628466,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":4,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"fl","c":{"a":0,"k":[1,1,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[1,-1],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Shape 2","np":3,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":180,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[636,382],[636,382],[766,512],[766,512]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[854,164],[636,382],[876,622],[1094,404]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":210,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[854,164],[636,382],[876,622],[1094,404]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[854,164],[636,382],[876,622],[1094,404]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":390,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[854,164],[636,382],[876,622],[1094,404]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[636,382],[636,382],[766,512],[766,512]],"c":true}]},{"t":420}],"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.117647066303,0.678431372549,0.803921628466,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":4,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"fl","c":{"a":0,"k":[1,1,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Shape 1","np":3,"cix":2,"ix":2,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":527,"st":0,"bm":0}],"markers":[{"tm":90,"cm":"1","dr":0},{"tm":120,"cm":"2","dr":0},{"tm":180,"cm":"3","dr":0},{"tm":210,"cm":"4","dr":0},{"tm":300,"cm":"5","dr":0},{"tm":330,"cm":"6","dr":0},{"tm":390,"cm":"7","dr":0},{"tm":420,"cm":"8","dr":0}]}
\ No newline at end of file
diff --git a/packages/dev-tools-pages/ts/components/animations/compiler/index.tsx b/packages/dev-tools-pages/ts/components/animations/compiler/index.tsx
new file mode 100644
index 000000000..db93ff8a4
--- /dev/null
+++ b/packages/dev-tools-pages/ts/components/animations/compiler/index.tsx
@@ -0,0 +1,11 @@
+import * as React from 'react';
+
+import { BaseAnimation } from '../index';
+
+import * as animationData from './data.json';
+
+const CompilerAnimation: React.StatelessComponent<{}> = () => (
+    <BaseAnimation animationData={animationData} width={2150} height={700} />
+);
+
+export { CompilerAnimation as Animation };
diff --git a/packages/dev-tools-pages/ts/components/animations/cov/data.json b/packages/dev-tools-pages/ts/components/animations/cov/data.json
new file mode 100644
index 000000000..a259c2787
--- /dev/null
+++ b/packages/dev-tools-pages/ts/components/animations/cov/data.json
@@ -0,0 +1 @@
+{"v":"5.4.1","fr":30,"ip":0,"op":420,"w":3962,"h":1320,"nm":"header-cov","ddd":0,"assets":[],"layers":[{"ddd":0,"ind":2,"ty":4,"nm":"Path","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[3418.5,924.5,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.696,"y":1},"o":{"x":0.304,"y":0},"n":"0p696_1_0p304_0","t":180,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[31.25,66.25],[66.25,31.25],[-31.25,-66.25],[-66.25,-31.25]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[21.25,86.25],[71.25,36.25],[-31.25,-66.25],[-81.25,-16.25]],"c":true}]},{"i":{"x":0.696,"y":1},"o":{"x":0.333,"y":0},"n":"0p696_1_0p333_0","t":210,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[21.25,86.25],[71.25,36.25],[-31.25,-66.25],[-81.25,-16.25]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[21.25,86.25],[71.25,36.25],[-31.25,-66.25],[-81.25,-16.25]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":390,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[21.25,86.25],[71.25,36.25],[-31.25,-66.25],[-81.25,-16.25]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[31.25,66.25],[66.25,31.25],[-31.25,-66.25],[-66.25,-31.25]],"c":true}]},{"t":420}],"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.7333329916,0.572548985481,0,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":524.5,"st":0,"bm":0},{"ddd":0,"ind":3,"ty":4,"nm":"Path","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[3392.5,970.5,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[18.25,89.25],[89.25,18.25],[-18.25,-89.25],[-89.25,-18.25]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.7333329916,0.572548985481,0,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":524.5,"st":0,"bm":0},{"ddd":0,"ind":4,"ty":4,"nm":"Path","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[2958,886,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":90,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[64,-94],[94,-64],[-64,94],[-94,64]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[80,-126],[118,-88],[-64,94],[-102,56]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":120,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[80,-126],[118,-88],[-64,94],[-102,56]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[80,-126],[118,-88],[-64,94],[-102,56]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":300,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[80,-126],[118,-88],[-64,94],[-102,56]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[64,-94],[94,-64],[-64,94],[-94,64]],"c":true}]},{"t":330}],"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.7333329916,0.572548985481,0,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":524.5,"st":0,"bm":0},{"ddd":0,"ind":5,"ty":4,"nm":"Path","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[2988,816,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[79,-129],[129,-79],[-79,129],[-129,79]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.7333329916,0.572548985481,0,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":524.5,"st":0,"bm":0},{"ddd":0,"ind":6,"ty":4,"nm":"Path","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[3588,678,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0]],"o":[[0,0]],"v":[[-3784,-472]],"c":false},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.733332974303,0.572548959769,0,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"fl","c":{"a":0,"k":[1,0,0,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":true},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Shape 1","np":3,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.833,"y":1},"o":{"x":0.167,"y":0},"n":"0p833_1_0p167_0","t":90,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-18.5,-75],[75,18.5],[18.5,75],[-75,-18.5]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-26.5,-27],[47,46.5],[18.5,75],[-55,1.5]],"c":true}]},{"i":{"x":0.833,"y":1},"o":{"x":0.333,"y":0},"n":"0p833_1_0p333_0","t":120,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-26.5,-27],[47,46.5],[18.5,75],[-55,1.5]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-26.5,-27],[47,46.5],[18.5,75],[-55,1.5]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":300,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-26.5,-27],[47,46.5],[18.5,75],[-55,1.5]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-18.5,-75],[75,18.5],[18.5,75],[-75,-18.5]],"c":true}]},{"t":330}],"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.7333329916,0.572548985481,0,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":2,"cix":2,"ix":2,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":524.5,"st":0,"bm":0},{"ddd":0,"ind":7,"ty":4,"nm":"Path","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[3678,548,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[26.5,-140],[140,-26.5],[-26.5,140],[-140,26.5]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.7333329916,0.572548985481,0,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":524.5,"st":0,"bm":0},{"ddd":0,"ind":8,"ty":4,"nm":"Path","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[3650.5,150.5,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-11.75,59.25],[59.25,-11.75],[11.75,-59.25],[-59.25,11.75]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.7333329916,0.572548985481,0,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":524.5,"st":0,"bm":0},{"ddd":0,"ind":9,"ty":4,"nm":"Path","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[3272.5,260.5,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":180,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[31.25,66.25],[66.25,31.25],[-31.25,-66.25],[-66.25,-31.25]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[27.25,34.25],[48.25,13.25],[-31.25,-66.25],[-52.25,-45.25]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":211,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[27.25,34.25],[48.25,13.25],[-31.25,-66.25],[-52.25,-45.25]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[27.25,34.25],[48.25,13.25],[-31.25,-66.25],[-52.25,-45.25]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":390,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[27.25,34.25],[48.25,13.25],[-31.25,-66.25],[-52.25,-45.25]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[31.25,66.25],[66.25,31.25],[-31.25,-66.25],[-66.25,-31.25]],"c":true}]},{"t":420}],"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.7333329916,0.572548985481,0,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":524.5,"st":0,"bm":0},{"ddd":0,"ind":10,"ty":4,"nm":"Path","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[3246.5,306.5,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[18.25,89.25],[89.25,18.25],[-18.25,-89.25],[-89.25,-18.25]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.7333329916,0.572548985481,0,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":524.5,"st":0,"bm":0},{"ddd":0,"ind":11,"ty":4,"nm":"Path","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[2758.5,720.5,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-33.25,11.75],[-11.75,33.25],[33.25,-11.75],[11.75,-33.25]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.7333329916,0.572548985481,0,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":524.5,"st":0,"bm":0},{"ddd":0,"ind":12,"ty":4,"nm":"Path","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[2729.5,707.5,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-47.75,5.25],[-5.25,47.75],[47.75,-5.25],[5.25,-47.75]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.7333329916,0.572548985481,0,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":524.5,"st":0,"bm":0},{"ddd":0,"ind":13,"ty":4,"nm":"Path","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[1285.5,815.5,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":180,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[36.75,-8.25],[-8.25,36.75],[-36.75,8.25],[8.25,-36.75]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[94.75,37.75],[43.75,88.75],[-36.75,8.25],[14.25,-42.75]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":211,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[94.75,37.75],[43.75,88.75],[-36.75,8.25],[14.25,-42.75]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[94.75,37.75],[43.75,88.75],[-36.75,8.25],[14.25,-42.75]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":390,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[94.75,37.75],[43.75,88.75],[-36.75,8.25],[14.25,-42.75]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[36.75,-8.25],[-8.25,36.75],[-36.75,8.25],[8.25,-36.75]],"c":true}]},{"t":420}],"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.7333329916,0.572548985481,0,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":524.5,"st":0,"bm":0},{"ddd":0,"ind":14,"ty":4,"nm":"Path","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[1415.5,905.5,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[101.75,36.75],[36.75,101.75],[-101.75,-36.75],[-36.75,-101.75]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.7333329916,0.572548985481,0,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":524.5,"st":0,"bm":0},{"ddd":0,"ind":15,"ty":4,"nm":"Path","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[611,329,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":90,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[62.5,-95.5],[95.5,-62.5],[-62.5,95.5],[-95.5,62.5]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[43,-47],[61.5,-28.5],[-62.5,95.5],[-81,77]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":120,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[43,-47],[61.5,-28.5],[-62.5,95.5],[-81,77]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[43,-47],[61.5,-28.5],[-62.5,95.5],[-81,77]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":300,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[43,-47],[61.5,-28.5],[-62.5,95.5],[-81,77]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[62.5,-95.5],[95.5,-62.5],[-62.5,95.5],[-95.5,62.5]],"c":true}]},{"t":329}],"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.7333329916,0.572548985481,0,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":524.5,"st":0,"bm":0},{"ddd":0,"ind":16,"ty":4,"nm":"Path","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[644,262,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[79,-129],[129,-79],[-79,129],[-129,79]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.7333329916,0.572548985481,0,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":524.5,"st":0,"bm":0},{"ddd":0,"ind":17,"ty":4,"nm":"Path","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[1126.5,374.5,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[39.25,16.25],[16.25,39.25],[-39.25,-16.25],[-16.25,-39.25]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.7333329916,0.572548985481,0,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":524.5,"st":0,"bm":0},{"ddd":0,"ind":18,"ty":4,"nm":"Path","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[1186.5,414.5,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[69.25,36.25],[36.25,69.25],[-69.25,-36.25],[-36.25,-69.25]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.7333329916,0.572548985481,0,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":524.5,"st":0,"bm":0},{"ddd":0,"ind":19,"ty":4,"nm":"Path","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[375,944,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":180,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-36,19.5],[-0.5,-16],[166,150.5],[130.5,186]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-10,45.5],[13.5,22],[154,162.5],[130.5,186]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":210,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-10,45.5],[13.5,22],[154,162.5],[130.5,186]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-10,45.5],[13.5,22],[154,162.5],[130.5,186]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":390,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-10,45.5],[13.5,22],[154,162.5],[130.5,186]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-36,19.5],[-0.5,-16],[166,150.5],[130.5,186]],"c":true}]},{"t":420}],"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.7333329916,0.572548985481,0,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":524.5,"st":0,"bm":0},{"ddd":0,"ind":20,"ty":4,"nm":"Path","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[375,944,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-186,-130.5],[-130.5,-186],[186,130.5],[130.5,186]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.7333329916,0.572548985481,0,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":524.5,"st":0,"bm":0},{"ddd":0,"ind":21,"ty":4,"nm":"Path","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[815.5,863.5,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":90,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[39.75,-93.75],[93.75,-39.75],[-39.75,93.75],[-93.75,39.75]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[33.25,-145.25],[116.25,-62.25],[-39.75,93.75],[-122.75,10.75]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":120,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[33.25,-145.25],[116.25,-62.25],[-39.75,93.75],[-122.75,10.75]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[33.25,-145.25],[116.25,-62.25],[-39.75,93.75],[-122.75,10.75]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":300,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[33.25,-145.25],[116.25,-62.25],[-39.75,93.75],[-122.75,10.75]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[39.75,-93.75],[93.75,-39.75],[-39.75,93.75],[-93.75,39.75]],"c":true}]},{"t":329}],"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.7333329916,0.572548985481,0,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":524.5,"st":0,"bm":0},{"ddd":0,"ind":22,"ty":4,"nm":"Path","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[777.5,721.5,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[20.75,-164.75],[164.75,-20.75],[-20.75,164.75],[-164.75,20.75]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.7333329916,0.572548985481,0,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":524.5,"st":0,"bm":0}],"markers":[{"tm":90,"cm":"1","dr":0},{"tm":120,"cm":"2","dr":0},{"tm":180,"cm":"3","dr":0},{"tm":210,"cm":"4","dr":0},{"tm":300,"cm":"5","dr":0},{"tm":330,"cm":"6","dr":0},{"tm":390,"cm":"7","dr":0},{"tm":420,"cm":"8","dr":0}]}
\ No newline at end of file
diff --git a/packages/dev-tools-pages/ts/components/animations/cov/index.tsx b/packages/dev-tools-pages/ts/components/animations/cov/index.tsx
new file mode 100644
index 000000000..445824717
--- /dev/null
+++ b/packages/dev-tools-pages/ts/components/animations/cov/index.tsx
@@ -0,0 +1,11 @@
+import * as React from 'react';
+
+import { BaseAnimation } from '../index';
+
+import * as animationData from './data.json';
+
+const AnimationCov: React.StatelessComponent<{}> = () => (
+    <BaseAnimation animationData={animationData} width={1981} height={660} />
+);
+
+export { AnimationCov as Animation };
diff --git a/packages/dev-tools-pages/ts/components/animations/index.tsx b/packages/dev-tools-pages/ts/components/animations/index.tsx
new file mode 100644
index 000000000..7f7b36c21
--- /dev/null
+++ b/packages/dev-tools-pages/ts/components/animations/index.tsx
@@ -0,0 +1,96 @@
+import * as React from 'react';
+import Lottie from 'react-lottie';
+import styled from 'styled-components';
+
+import { media } from 'ts/variables';
+
+interface AnimationProps {
+    animationData: object;
+    width: number;
+    height: number;
+}
+
+interface AnimationState {
+    width?: number | undefined;
+    height?: number | undefined;
+}
+
+class BaseAnimation extends React.PureComponent<AnimationProps, AnimationState> {
+    public state: AnimationState = {
+        height: undefined,
+        width: undefined,
+    };
+    private _timeout = undefined as number;
+    public componentDidMount(): void {
+        this._updateAnimationSize();
+        window.addEventListener('resize', this._handleResize);
+    }
+    public componentWillUnmount(): void {
+        window.removeEventListener('resize', this._handleResize);
+    }
+    public render(): React.ReactNode {
+        const { animationData } = this.props;
+        const height = this.state.height || this.props.height;
+        const width = this.state.width || this.props.width;
+
+        return (
+            <Container height={height}>
+                <InnerContainer>
+                    <Lottie
+                        width={width}
+                        height={height}
+                        options={{
+                            loop: true,
+                            autoplay: true,
+                            animationData,
+                        }}
+                    />
+                </InnerContainer>
+            </Container>
+        );
+    }
+    private readonly _handleResize = () => {
+        clearTimeout(this._timeout);
+        this._timeout = window.setTimeout(this._updateAnimationSize, 50);
+    };
+    private readonly _updateAnimationSize = () => {
+        const windowWidth = window.innerWidth;
+        let width;
+        let height;
+        if (windowWidth <= 1000) {
+            const maxWidth = windowWidth + 250;
+            const ratio = maxWidth / this.props.width;
+
+            height = Math.round(this.props.height * ratio);
+            width = Math.round(this.props.width * ratio);
+        }
+
+        this.setState({ width, height });
+    };
+}
+
+const Container =
+    styled.div <
+    AnimationProps >
+    `
+    width: 100%;
+    height: ${props => props.height}px;
+    position: absolute;
+    top: 40%;
+    left: 0;
+    z-index: -1;
+    overflow: hidden;
+    ${media.large`
+        top: 100%;
+        transform: translateY(-50%);
+    `};
+`;
+
+const InnerContainer = styled.div`
+    position: absolute;
+    top: 0;
+    left: 50%;
+    transform: translateX(-50%);
+`;
+
+export { BaseAnimation };
diff --git a/packages/dev-tools-pages/ts/components/animations/profiler/data.json b/packages/dev-tools-pages/ts/components/animations/profiler/data.json
new file mode 100644
index 000000000..2d769bc50
--- /dev/null
+++ b/packages/dev-tools-pages/ts/components/animations/profiler/data.json
@@ -0,0 +1 @@
+{"v":"5.4.1","fr":30,"ip":0,"op":420,"w":3970,"h":1314,"nm":"header-profiler","ddd":0,"assets":[],"layers":[{"ddd":0,"ind":2,"ty":4,"nm":"Path Copy","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":1,"k":[{"i":{"x":0.833,"y":1},"o":{"x":0.333,"y":0},"n":"0p833_1_0p333_0","t":90,"s":[376,448,0],"e":[376,392,0],"to":[0,-9.33333301544189,0],"ti":[0,9.33333301544189,0]},{"i":{"x":0.667,"y":0.667},"o":{"x":0.333,"y":0.333},"n":"0p667_0p667_0p333_0p333","t":120,"s":[376,392,0],"e":[376,392,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":300,"s":[376,392,0],"e":[376,448,0],"to":[0,9.33333301544189,0],"ti":[0,-9.33333301544189,0]},{"t":330}],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.833,"y":1},"o":{"x":0.333,"y":0},"n":"0p833_1_0p333_0","t":90,"s":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-169.69,0],[134.5,0]],"c":false}],"e":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-142.19,0],[106.5,0]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":120,"s":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-142.19,0],[106.5,0]],"c":false}],"e":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-142.19,0],[106.5,0]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":300,"s":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-142.19,0],[106.5,0]],"c":false}],"e":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-169.69,0],[134.5,0]],"c":false}]},{"t":330}],"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[1,0.44313699007,0.2666670084,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path Copy","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":3,"ty":4,"nm":"Path","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[3466.5,998.5,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[45.75,155.75],[-155.75,-45.75],[-45.75,-155.75],[155.75,45.75]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[1,0.44313699007,0.2666670084,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":4,"ty":4,"nm":"Path","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":90,"s":[1090.5,537,0],"e":[1170.5,617,0],"to":[12.0437898635864,12.0437898635864,0],"ti":[-1.2895439863205,-1.2895439863205,0]},{"i":{"x":0.667,"y":0.667},"o":{"x":0.333,"y":0.333},"n":"0p667_0p667_0p333_0p333","t":120,"s":[1170.5,617,0],"e":[1170.5,617,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":300,"s":[1170.5,617,0],"e":[1090.5,537,0],"to":[-13.3333330154419,-13.3333330154419,0],"ti":[13.3333330154419,13.3333330154419,0]},{"t":330}],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-41.25,-0.5],[41.25,-0.5]],"c":false},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[1,0.44313699007,0.2666670084,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":5,"ty":4,"nm":"Path","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":1,"k":[{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"n":"0p833_0p833_0p167_0p167","t":180,"s":[834,765,0],"e":[834,813,0],"to":[0,8,0],"ti":[0,-8,0]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.333,"y":0.333},"n":"0p833_0p833_0p333_0p333","t":210,"s":[834,813,0],"e":[834,813,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":390,"s":[834,813,0],"e":[834,765,0],"to":[0,-8,0],"ti":[0,8,0]},{"t":419}],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.833,"y":0.999},"o":{"x":0.167,"y":0.001},"n":"0p833_0p999_0p167_0p001","t":180,"s":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-100,-0.5],[100,-0.5]],"c":false}],"e":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-122,-0.5],[125,-0.5]],"c":true}]},{"i":{"x":0.833,"y":0.999},"o":{"x":0.333,"y":0},"n":"0p833_0p999_0p333_0","t":210,"s":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-122,-0.5],[125,-0.5]],"c":true}],"e":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-122,-0.5],[125,-0.5]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":390,"s":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-122,-0.5],[125,-0.5]],"c":true}],"e":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-100,-0.5],[100,-0.5]],"c":false}]},{"t":419}],"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[1,0.44313699007,0.2666670084,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":6,"ty":4,"nm":"Path","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":1,"k":[{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"n":"0p833_0p833_0p167_0p167","t":180,"s":[748.5,387,0],"e":[748.5,347,0],"to":[0,-6.66666650772095,0],"ti":[0,6.66666650772095,0]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.333,"y":0.333},"n":"0p833_0p833_0p333_0p333","t":210,"s":[748.5,347,0],"e":[748.5,347,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":390,"s":[748.5,347,0],"e":[748.5,387,0],"to":[0,6.66666650772095,0],"ti":[0,-6.66666650772095,0]},{"t":419}],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.833,"y":0.999},"o":{"x":0.167,"y":0.001},"n":"0p833_0p999_0p167_0p001","t":180,"s":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-36.25,-0.5],[36.25,-0.5]],"c":false}],"e":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-57.75,-3],[58.75,-3]],"c":true}]},{"i":{"x":0.833,"y":0.999},"o":{"x":0.333,"y":0},"n":"0p833_0p999_0p333_0","t":210,"s":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-57.75,-3],[58.75,-3]],"c":true}],"e":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-57.75,-3],[58.75,-3]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":390,"s":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-57.75,-3],[58.75,-3]],"c":true}],"e":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-36.25,-0.5],[36.25,-0.5]],"c":false}]},{"t":419}],"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[1,0.44313699007,0.2666670084,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":7,"ty":4,"nm":"Path","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":1,"k":[{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"n":"0p833_0p833_0p167_0p167","t":180,"s":[3006.5,763,0],"e":[3006.5,823,0],"to":[0,10,0],"ti":[0,-10,0]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.333,"y":0.333},"n":"0p833_0p833_0p333_0p333","t":210,"s":[3006.5,823,0],"e":[3006.5,823,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":390,"s":[3006.5,823,0],"e":[3006.5,763,0],"to":[0,-10,0],"ti":[0,10,0]},{"t":419}],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.833,"y":0.999},"o":{"x":0.167,"y":0},"n":"0p833_0p999_0p167_0","t":180,"s":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-66.25,-0.5],[66.25,-0.5]],"c":false}],"e":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-36.25,-0.5],[36.25,-0.5]],"c":true}]},{"i":{"x":0.833,"y":0.999},"o":{"x":0.333,"y":0},"n":"0p833_0p999_0p333_0","t":210,"s":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-36.25,-0.5],[36.25,-0.5]],"c":true}],"e":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-36.25,-0.5],[36.25,-0.5]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":390,"s":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-36.25,-0.5],[36.25,-0.5]],"c":true}],"e":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-66.25,-0.5],[66.25,-0.5]],"c":false}]},{"t":419}],"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[1,0.44313699007,0.2666670084,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":8,"ty":4,"nm":"Path","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":1,"k":[{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"n":"0p833_0p833_0p167_0p167","t":180,"s":[3375.5,857,0],"e":[3375.5,817,0],"to":[0,-6.66666650772095,0],"ti":[0,6.66666650772095,0]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.333,"y":0.333},"n":"0p833_0p833_0p333_0p333","t":210,"s":[3375.5,817,0],"e":[3375.5,817,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":390,"s":[3375.5,817,0],"e":[3375.5,857,0],"to":[0,6.66666650772095,0],"ti":[0,-6.66666650772095,0]},{"t":419}],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.833,"y":0.999},"o":{"x":0.167,"y":0.001},"n":"0p833_0p999_0p167_0p001","t":180,"s":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-84.25,-0.5],[84.25,-0.5]],"c":false}],"e":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-63.75,-0.5],[64.25,-0.5]],"c":true}]},{"i":{"x":0.833,"y":0.999},"o":{"x":0.333,"y":0},"n":"0p833_0p999_0p333_0","t":210,"s":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-63.75,-0.5],[64.25,-0.5]],"c":true}],"e":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-63.75,-0.5],[64.25,-0.5]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":390,"s":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-63.75,-0.5],[64.25,-0.5]],"c":true}],"e":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-84.25,-0.5],[84.25,-0.5]],"c":false}]},{"t":419}],"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[1,0.44313699007,0.2666670084,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-63.75,-0.5],[64.25,-0.5]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 1","np":1,"cix":2,"ix":2,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":9,"ty":4,"nm":"Path","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":1,"k":[{"i":{"x":0.833,"y":1},"o":{"x":0.333,"y":0},"n":"0p833_1_0p333_0","t":90,"s":[3511,409,0],"e":[3491,289,0],"to":[-3.33333325386047,-20,0],"ti":[3.33333325386047,20,0]},{"i":{"x":0.667,"y":0.667},"o":{"x":0.333,"y":0.333},"n":"0p667_0p667_0p333_0p333","t":120,"s":[3491,289,0],"e":[3491,289,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":300,"s":[3491,289,0],"e":[3511,409,0],"to":[3.33333325386047,20,0],"ti":[-3.33333325386047,-20,0]},{"t":330}],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.833,"y":1},"o":{"x":0.333,"y":0},"n":"0p833_1_0p333_0","t":90,"s":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-51.5,-0.5],[50.5,-0.5]],"c":false}],"e":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-101.5,-0.5],[120.5,-0.5]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":120,"s":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-101.5,-0.5],[120.5,-0.5]],"c":false}],"e":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-101.5,-0.5],[120.5,-0.5]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":300,"s":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-101.5,-0.5],[120.5,-0.5]],"c":false}],"e":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-51.5,-0.5],[50.5,-0.5]],"c":false}]},{"t":330}],"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[1,0.44313699007,0.2666670084,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":10,"ty":4,"nm":"Path Copy 2","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":90,"s":[3718.5,576,0],"e":[3598.5,696,0],"to":[-20,20,0],"ti":[20,-20,0]},{"i":{"x":0.667,"y":0.667},"o":{"x":0.333,"y":0.333},"n":"0p667_0p667_0p333_0p333","t":120,"s":[3598.5,696,0],"e":[3598.5,696,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":300,"s":[3598.5,696,0],"e":[3718.5,576,0],"to":[20,-20,0],"ti":[-20,20,0]},{"t":332}],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-39.25,0],[39.25,0]],"c":false},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[1,0.44313699007,0.2666670084,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path Copy 2","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":11,"ty":4,"nm":"Path","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[3738,557,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[114.5,-75],[75,-114.5],[-114.5,75],[-75,114.5]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[1,0.44313699007,0.2666670084,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":12,"ty":4,"nm":"Path","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[3502,257,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[127,4.5],[4.5,127],[-127,-4.5],[-4.5,-127]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[1,0.44313699007,0.2666670084,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":13,"ty":4,"nm":"Path","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[2653.5,703.5,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-92.25,55.75],[-55.75,92.25],[92.25,-55.75],[55.75,-92.25]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[1,0.44313699007,0.2666670084,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":14,"ty":4,"nm":"Path","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[3087.5,645.5,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[40.25,-124.75],[124.75,-40.25],[-40.25,124.75],[-124.75,40.25]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[1,0.44313699007,0.2666670084,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":15,"ty":4,"nm":"Path","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[1728,878,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[66,15],[15,66],[-66,-15],[-15,-66]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[1,0.44313699007,0.2666670084,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":16,"ty":4,"nm":"Path","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[1200,646,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-95.5,-137],[-137,-95.5],[95.5,137],[137,95.5]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[1,0.44313699007,0.2666670084,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":17,"ty":4,"nm":"Path","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[356.5,496.5,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-7.75,-176.75],[-176.75,-7.75],[7.75,176.75],[176.75,7.75]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[1,0.44313699007,0.2666670084,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":18,"ty":4,"nm":"Path","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[821.5,268.5,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[36.25,-95.25],[95.25,-36.25],[-36.25,95.25],[-95.25,36.25]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[1,0.44313699007,0.2666670084,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":19,"ty":4,"nm":"Path","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[634.5,1150.5,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-8.75,68.25],[68.25,-8.75],[8.75,-68.25],[-68.25,8.75]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[1,0.44313699007,0.2666670084,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":20,"ty":4,"nm":"Path","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[858,834,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[11,135],[-135,-11],[-11,-135],[135,11]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[1,0.44313699007,0.2666670084,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":420,"st":0,"bm":0}],"markers":[{"tm":90,"cm":"1","dr":0},{"tm":120,"cm":"2","dr":0},{"tm":180,"cm":"3","dr":0},{"tm":210,"cm":"4","dr":0},{"tm":300,"cm":"5","dr":0},{"tm":330,"cm":"6","dr":0},{"tm":390,"cm":"7","dr":0},{"tm":419,"cm":"8","dr":0}]}
\ No newline at end of file
diff --git a/packages/dev-tools-pages/ts/components/animations/profiler/index.tsx b/packages/dev-tools-pages/ts/components/animations/profiler/index.tsx
new file mode 100644
index 000000000..73a4e9ad6
--- /dev/null
+++ b/packages/dev-tools-pages/ts/components/animations/profiler/index.tsx
@@ -0,0 +1,11 @@
+import * as React from 'react';
+
+import { BaseAnimation } from '../index';
+
+import * as animationData from './data.json';
+
+const AnimationProfiler: React.StatelessComponent<{}> = () => (
+    <BaseAnimation animationData={animationData} width={1985} height={657} />
+);
+
+export { AnimationProfiler as Animation };
diff --git a/packages/dev-tools-pages/ts/components/animations/trace/data.json b/packages/dev-tools-pages/ts/components/animations/trace/data.json
new file mode 100644
index 000000000..7b2936fff
--- /dev/null
+++ b/packages/dev-tools-pages/ts/components/animations/trace/data.json
@@ -0,0 +1 @@
+{"v":"5.4.1","fr":30,"ip":0,"op":420,"w":4482,"h":1220,"nm":"header-trace","ddd":0,"assets":[],"layers":[{"ddd":0,"ind":1,"ty":4,"nm":"Shape Layer 1","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[2241,610,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[],"ip":0,"op":529,"st":0,"bm":0},{"ddd":0,"ind":3,"ty":3,"nm":"▽ header-trace","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[2242,609,0],"ix":2},"a":{"a":0,"k":[2238,607,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":4,"ty":4,"nm":"Path","parent":3,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[3391.5,737.5,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[101.75,-11.75],[-11.75,101.75],[-101.75,11.75],[11.75,-101.75]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.30980399251,0.462745010853,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":5,"ty":4,"nm":"Path 7","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[4035.5,479.5,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":180,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[221.75,158.25],[158.25,221.75],[-221.75,-158.25],[-158.25,-221.75]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[201.75,178.25],[158.25,221.75],[-221.75,-158.25],[-178.25,-201.75]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":210,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[201.75,178.25],[158.25,221.75],[-221.75,-158.25],[-178.25,-201.75]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[201.75,178.25],[158.25,221.75],[-221.75,-158.25],[-178.25,-201.75]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":390,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[201.75,178.25],[158.25,221.75],[-221.75,-158.25],[-178.25,-201.75]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[221.75,158.25],[158.25,221.75],[-221.75,-158.25],[-158.25,-221.75]],"c":true}]},{"t":420}],"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.30980399251,0.462745010853,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"fl","c":{"a":0,"k":[1,1,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":6,"ty":4,"nm":"Path 6","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[4035.5,479.5,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":180,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[221.75,158.25],[158.25,221.75],[-221.75,-158.25],[-158.25,-221.75]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[211.75,168.25],[158.25,221.75],[-211.75,-148.25],[-158.25,-201.75]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":210,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[211.75,168.25],[158.25,221.75],[-211.75,-148.25],[-158.25,-201.75]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[211.75,168.25],[158.25,221.75],[-211.75,-148.25],[-158.25,-201.75]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.167,"y":0},"n":"0p667_1_0p167_0","t":390,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[211.75,168.25],[158.25,221.75],[-211.75,-148.25],[-158.25,-201.75]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[221.75,158.25],[158.25,221.75],[-221.75,-158.25],[-158.25,-221.75]],"c":true}]},{"t":420}],"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.30980399251,0.462745010853,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"fl","c":{"a":0,"k":[1,1,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":7,"ty":4,"nm":"Path 5","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[4035.5,479.5,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":180,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[221.75,158.25],[158.25,221.75],[-221.75,-158.25],[-158.25,-221.75]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[221.75,158.25],[158.25,221.75],[-201.75,-138.25],[-138.25,-201.75]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":210,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[221.75,158.25],[158.25,221.75],[-201.75,-138.25],[-138.25,-201.75]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[221.75,158.25],[158.25,221.75],[-201.75,-138.25],[-138.25,-201.75]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":390,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[221.75,158.25],[158.25,221.75],[-201.75,-138.25],[-138.25,-201.75]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[221.75,158.25],[158.25,221.75],[-221.75,-158.25],[-158.25,-221.75]],"c":true}]},{"t":420}],"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.30980399251,0.462745010853,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"fl","c":{"a":0,"k":[1,1,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":8,"ty":4,"nm":"Path","parent":3,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[4031.5,477.5,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[221.75,158.25],[158.25,221.75],[-221.75,-158.25],[-158.25,-221.75]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.30980399251,0.462745010853,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"fl","c":{"a":0,"k":[1,1,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":9,"ty":4,"nm":"Path","parent":3,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[3671.5,517.5,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[21.75,158.25],[158.25,21.75],[-21.75,-158.25],[-158.25,-21.75]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.30980399251,0.462745010853,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":10,"ty":4,"nm":"Path Copy 12","parent":3,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[3803.5,646.5,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":90,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[93.75,-43.75],[-43.75,93.75],[-73.75,63.75],[63.75,-73.75]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[73.75,-63.75],[-63.75,73.75],[-73.75,63.75],[63.75,-73.75]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":121,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[73.75,-63.75],[-63.75,73.75],[-73.75,63.75],[63.75,-73.75]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[73.75,-63.75],[-63.75,73.75],[-73.75,63.75],[63.75,-73.75]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":300,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[73.75,-63.75],[-63.75,73.75],[-73.75,63.75],[63.75,-73.75]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[93.75,-43.75],[-43.75,93.75],[-73.75,63.75],[63.75,-73.75]],"c":true}]},{"t":331}],"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.30980399251,0.462745010853,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"fl","c":{"a":0,"k":[1,1,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path Copy 12","np":3,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":11,"ty":4,"nm":"Path Copy 11","parent":3,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[3803.5,666.5,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":90,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[93.75,-53.75],[-43.75,83.75],[-73.75,53.75],[63.75,-83.75]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[73.75,-53.75],[-53.75,73.75],[-73.75,53.75],[53.75,-73.75]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":121,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[73.75,-53.75],[-53.75,73.75],[-73.75,53.75],[53.75,-73.75]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[73.75,-53.75],[-53.75,73.75],[-73.75,53.75],[53.75,-73.75]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":300,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[73.75,-53.75],[-53.75,73.75],[-73.75,53.75],[53.75,-73.75]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[93.75,-53.75],[-43.75,83.75],[-73.75,53.75],[63.75,-83.75]],"c":true}]},{"t":331}],"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.30980399251,0.462745010853,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"fl","c":{"a":0,"k":[1,1,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path Copy 11","np":3,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":12,"ty":4,"nm":"Path Copy 10","parent":3,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[3803.5,686.5,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":90,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[93.75,-63.75],[-43.75,73.75],[-73.75,43.75],[63.75,-93.75]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[73.75,-43.75],[-43.75,73.75],[-73.75,43.75],[43.75,-73.75]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":121,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[73.75,-43.75],[-43.75,73.75],[-73.75,43.75],[43.75,-73.75]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[73.75,-43.75],[-43.75,73.75],[-73.75,43.75],[43.75,-73.75]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":300,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[73.75,-43.75],[-43.75,73.75],[-73.75,43.75],[43.75,-73.75]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[93.75,-63.75],[-43.75,73.75],[-73.75,43.75],[63.75,-93.75]],"c":true}]},{"t":331}],"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.30980399251,0.462745010853,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"fl","c":{"a":0,"k":[1,1,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path Copy 10","np":3,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":13,"ty":4,"nm":"Path","parent":3,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[3101.5,747.5,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":90,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[136.75,-126.75],[-126.75,136.75],[-136.75,126.75],[126.75,-136.75]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[156.75,-106.75],[-106.75,156.75],[-136.75,126.75],[126.75,-136.75]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":121,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[156.75,-106.75],[-106.75,156.75],[-136.75,126.75],[126.75,-136.75]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[156.75,-106.75],[-106.75,156.75],[-136.75,126.75],[126.75,-136.75]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":300,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[156.75,-106.75],[-106.75,156.75],[-136.75,126.75],[126.75,-136.75]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[136.75,-126.75],[-126.75,136.75],[-136.75,126.75],[126.75,-136.75]],"c":true}]},{"t":331}],"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.30980399251,0.462745010853,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"fl","c":{"a":0,"k":[1,1,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":3,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":14,"ty":4,"nm":"Path","parent":3,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[3101.5,767.5,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":90,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[136.75,-116.75],[-116.75,136.75],[-136.75,116.75],[116.75,-136.75]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[146.75,-106.75],[-106.75,146.75],[-136.75,116.75],[116.75,-136.75]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":121,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[146.75,-106.75],[-106.75,146.75],[-136.75,116.75],[116.75,-136.75]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[146.75,-106.75],[-106.75,146.75],[-136.75,116.75],[116.75,-136.75]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":300,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[146.75,-106.75],[-106.75,146.75],[-136.75,116.75],[116.75,-136.75]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[136.75,-116.75],[-116.75,136.75],[-136.75,116.75],[116.75,-136.75]],"c":true}]},{"t":331}],"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.30980399251,0.462745010853,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"fl","c":{"a":0,"k":[1,1,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":3,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":15,"ty":4,"nm":"Path","parent":3,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[3101.5,787.5,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":90,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[136.75,-106.75],[-106.75,136.75],[-136.75,106.75],[106.75,-136.75]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[156.75,-126.75],[-106.75,136.75],[-136.75,106.75],[126.75,-156.75]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":121,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[156.75,-126.75],[-106.75,136.75],[-136.75,106.75],[126.75,-156.75]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[156.75,-126.75],[-106.75,136.75],[-136.75,106.75],[126.75,-156.75]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":300,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[156.75,-126.75],[-106.75,136.75],[-136.75,106.75],[126.75,-156.75]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[136.75,-106.75],[-106.75,136.75],[-136.75,106.75],[106.75,-136.75]],"c":true}]},{"t":331}],"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.30980399251,0.462745010853,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"fl","c":{"a":0,"k":[1,1,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":3,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":16,"ty":4,"nm":"Path","parent":3,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[3121.5,767.5,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[146.75,-116.75],[-116.75,146.75],[-146.75,116.75],[116.75,-146.75]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.30980399251,0.462745010853,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"fl","c":{"a":0,"k":[1,1,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":3,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":17,"ty":4,"nm":"Path","parent":3,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[2881.5,567.5,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.833,"y":0.998},"o":{"x":0.167,"y":0.001},"n":"0p833_0p998_0p167_0p001","t":180,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[66.75,-16.75],[-16.75,66.75],[-66.75,16.75],[16.75,-66.75]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[86.75,3.25],[3.25,86.75],[-66.75,16.75],[16.75,-66.75]],"c":true}]},{"i":{"x":0.833,"y":0.998},"o":{"x":0.333,"y":0},"n":"0p833_0p998_0p333_0","t":210,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[86.75,3.25],[3.25,86.75],[-66.75,16.75],[16.75,-66.75]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[86.75,3.25],[3.25,86.75],[-66.75,16.75],[16.75,-66.75]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":390,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[86.75,3.25],[3.25,86.75],[-66.75,16.75],[16.75,-66.75]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[66.75,-16.75],[-16.75,66.75],[-66.75,16.75],[16.75,-66.75]],"c":true}]},{"t":420}],"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.30980399251,0.462745010853,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"fl","c":{"a":0,"k":[1,1,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":3,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":18,"ty":4,"nm":"Path","parent":3,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[2911.5,577.5,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.833,"y":0.999},"o":{"x":0.167,"y":0.002},"n":"0p833_0p999_0p167_0p002","t":180,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[61.75,-11.75],[-11.75,61.75],[-61.75,11.75],[11.75,-61.75]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[71.75,-1.75],[-11.75,81.75],[-71.75,21.75],[11.75,-61.75]],"c":true}]},{"i":{"x":0.833,"y":0.999},"o":{"x":0.333,"y":0},"n":"0p833_0p999_0p333_0","t":210,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[71.75,-1.75],[-11.75,81.75],[-71.75,21.75],[11.75,-61.75]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[71.75,-1.75],[-11.75,81.75],[-71.75,21.75],[11.75,-61.75]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":390,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[71.75,-1.75],[-11.75,81.75],[-71.75,21.75],[11.75,-61.75]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[61.75,-11.75],[-11.75,61.75],[-61.75,11.75],[11.75,-61.75]],"c":true}]},{"t":420}],"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.30980399251,0.462745010853,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"fl","c":{"a":0,"k":[1,1,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":3,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":19,"ty":4,"nm":"Path","parent":3,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[2941.5,587.5,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.833,"y":0.998},"o":{"x":0.167,"y":0.002},"n":"0p833_0p998_0p167_0p002","t":180,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[56.75,-6.75],[-6.75,56.75],[-56.75,6.75],[6.75,-56.75]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[56.75,-6.75],[-26.75,76.75],[-76.75,26.75],[6.75,-56.75]],"c":true}]},{"i":{"x":0.833,"y":0.998},"o":{"x":0.333,"y":0},"n":"0p833_0p998_0p333_0","t":210,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[56.75,-6.75],[-26.75,76.75],[-76.75,26.75],[6.75,-56.75]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[56.75,-6.75],[-26.75,76.75],[-76.75,26.75],[6.75,-56.75]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":390,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[56.75,-6.75],[-26.75,76.75],[-76.75,26.75],[6.75,-56.75]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[56.75,-6.75],[-6.75,56.75],[-56.75,6.75],[6.75,-56.75]],"c":true}]},{"t":420}],"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.30980399251,0.462745010853,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"fl","c":{"a":0,"k":[1,1,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":3,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":20,"ty":4,"nm":"Path","parent":3,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[2901.5,587.5,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[76.75,-6.75],[-6.75,76.75],[-76.75,6.75],[6.75,-76.75]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.30980399251,0.462745010853,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"fl","c":{"a":0,"k":[1,1,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":3,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":21,"ty":4,"nm":"Path","parent":3,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[3411.5,177.5,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-88.25,-31.75],[-31.75,-88.25],[88.25,31.75],[31.75,88.25]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.30980399251,0.462745010853,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":22,"ty":4,"nm":"Path","parent":3,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[3431.5,157.5,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-78.25,-41.75],[-41.75,-78.25],[78.25,41.75],[41.75,78.25]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.30980399251,0.462745010853,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"fl","c":{"a":0,"k":[1,1,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":3,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":23,"ty":4,"nm":"Path","parent":3,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[3411.5,157.5,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-78.25,-31.75],[-31.75,-78.25],[78.25,31.75],[31.75,78.25]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.30980399251,0.462745010853,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"fl","c":{"a":0,"k":[1,1,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":3,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":24,"ty":4,"nm":"Path","parent":3,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[3391.5,157.5,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-78.25,-21.75],[-21.75,-78.25],[78.25,21.75],[21.75,78.25]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.30980399251,0.462745010853,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":25,"ty":4,"nm":"Path","parent":3,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[3101.5,627.5,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[136.75,-186.75],[-186.75,136.75],[-136.75,186.75],[186.75,-136.75]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.30980399251,0.462745010853,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":26,"ty":4,"nm":"Path","parent":3,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[1444.5,626.5,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[36.75,63.25],[63.25,36.75],[-36.75,-63.25],[-63.25,-36.75]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.30980399251,0.462745010853,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":27,"ty":4,"nm":"Path 4","parent":3,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[704.5,527.5,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-183.25,-16.75],[-16.75,-183.25],[183.25,16.75],[16.75,183.25]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.30980399251,0.462745010853,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":28,"ty":4,"nm":"Path","parent":3,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[1064.5,887.5,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-3.25,163.25],[163.25,-3.25],[3.25,-163.25],[-163.25,3.25]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.30980399251,0.462745010853,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":29,"ty":4,"nm":"Path Copy 4","parent":3,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[1594.5,776.5,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.833,"y":1},"o":{"x":0.333,"y":0},"n":"0p833_1_0p333_0","t":180,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[101.75,-51.75],[-51.75,101.75],[-101.75,51.75],[51.75,-101.75]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[121.75,-31.75],[-31.75,121.75],[-101.75,51.75],[51.75,-101.75]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":210,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[121.75,-31.75],[-31.75,121.75],[-101.75,51.75],[51.75,-101.75]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[121.75,-31.75],[-31.75,121.75],[-101.75,51.75],[51.75,-101.75]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.167,"y":0},"n":"0p667_1_0p167_0","t":390,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[121.75,-31.75],[-31.75,121.75],[-101.75,51.75],[51.75,-101.75]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[101.75,-51.75],[-51.75,101.75],[-101.75,51.75],[51.75,-101.75]],"c":true}]},{"t":420}],"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.30980399251,0.462745010853,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"fl","c":{"a":0,"k":[1,1,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path Copy 4","np":3,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":30,"ty":4,"nm":"Path Copy 3","parent":3,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[1624.5,787.5,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.833,"y":1},"o":{"x":0.333,"y":0},"n":"0p833_1_0p333_0","t":180,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[96.75,-46.75],[-46.75,96.75],[-96.75,46.75],[46.75,-96.75]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[106.75,-36.75],[-46.75,116.75],[-116.75,46.75],[36.75,-106.75]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":210,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[106.75,-36.75],[-46.75,116.75],[-116.75,46.75],[36.75,-106.75]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[106.75,-36.75],[-46.75,116.75],[-116.75,46.75],[36.75,-106.75]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.167,"y":0},"n":"0p667_1_0p167_0","t":390,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[106.75,-36.75],[-46.75,116.75],[-116.75,46.75],[36.75,-106.75]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[96.75,-46.75],[-46.75,96.75],[-96.75,46.75],[46.75,-96.75]],"c":true}]},{"t":420}],"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.30980399251,0.462745010853,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"fl","c":{"a":0,"k":[1,1,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path Copy 3","np":3,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":31,"ty":4,"nm":"Path Copy 2","parent":3,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[1654.5,797.5,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.833,"y":1},"o":{"x":0.333,"y":0},"n":"0p833_1_0p333_0","t":180,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[91.75,-41.75],[-41.75,91.75],[-91.75,41.75],[41.75,-91.75]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[91.75,-41.75],[-61.75,111.75],[-131.75,41.75],[21.75,-111.75]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":210,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[91.75,-41.75],[-61.75,111.75],[-131.75,41.75],[21.75,-111.75]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[91.75,-41.75],[-61.75,111.75],[-131.75,41.75],[21.75,-111.75]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.167,"y":0},"n":"0p667_1_0p167_0","t":390,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[91.75,-41.75],[-61.75,111.75],[-131.75,41.75],[21.75,-111.75]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[91.75,-41.75],[-41.75,91.75],[-91.75,41.75],[41.75,-91.75]],"c":true}]},{"t":420}],"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.30980399251,0.462745010853,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"fl","c":{"a":0,"k":[1,1,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path Copy 2","np":3,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":32,"ty":4,"nm":"Path","parent":3,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[1615.5,796.5,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[41.75,-111.75],[-111.75,41.75],[-41.75,111.75],[111.75,-41.75]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.30980399251,0.462745010853,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":33,"ty":4,"nm":"Path 3","parent":3,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[704.5,527.5,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.833,"y":0.998},"o":{"x":0.167,"y":0.002},"n":"0p833_0p998_0p167_0p002","t":180,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-183.25,-16.75],[-16.75,-183.25],[183.25,16.75],[16.75,183.25]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-159.25,7.25],[7.25,-159.25],[183.25,16.75],[16.75,183.25]],"c":true}]},{"i":{"x":0.713,"y":0.984},"o":{"x":0.333,"y":0},"n":"0p713_0p984_0p333_0","t":210,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-159.25,7.25],[7.25,-159.25],[183.25,16.75],[16.75,183.25]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-159.25,7.25],[7.25,-159.25],[183.25,16.75],[16.75,183.25]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":390,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-159.25,7.25],[7.25,-159.25],[183.25,16.75],[16.75,183.25]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-183.25,-16.75],[-16.75,-183.25],[183.25,16.75],[16.75,183.25]],"c":true}]},{"t":420}],"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.30980399251,0.462745010853,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"fl","c":{"a":0,"k":[1,1,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":34,"ty":4,"nm":"Path 2","parent":3,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[702.5,527.5,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.833,"y":0.996},"o":{"x":0.167,"y":0.002},"n":"0p833_0p996_0p167_0p002","t":180,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-183.25,-16.75],[-16.75,-183.25],[183.25,16.75],[16.75,183.25]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-169.25,-4.75],[-14.75,-159.25],[171.25,26.75],[16.75,183.25]],"c":true}]},{"i":{"x":0.689,"y":0.993},"o":{"x":0.333,"y":0},"n":"0p689_0p993_0p333_0","t":211,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-169.25,-4.75],[-14.75,-159.25],[171.25,26.75],[16.75,183.25]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-169.25,-4.75],[-14.75,-159.25],[171.25,26.75],[16.75,183.25]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":390,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-169.25,-4.75],[-14.75,-159.25],[171.25,26.75],[16.75,183.25]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-183.25,-16.75],[-16.75,-183.25],[183.25,16.75],[16.75,183.25]],"c":true}]},{"t":420}],"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.30980399251,0.462745010853,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"fl","c":{"a":0,"k":[1,1,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":35,"ty":4,"nm":"Path","parent":3,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[704.5,527.5,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.833,"y":0.994},"o":{"x":0.167,"y":0.003},"n":"0p833_0p994_0p167_0p003","t":180,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-183.25,-16.75],[-16.75,-183.25],[183.25,16.75],[16.75,183.25]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-183.25,-16.75],[-40.75,-159.25],[159.25,40.75],[16.75,183.25]],"c":true}]},{"i":{"x":0.682,"y":0.993},"o":{"x":0.333,"y":0},"n":"0p682_0p993_0p333_0","t":210,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-183.25,-16.75],[-40.75,-159.25],[159.25,40.75],[16.75,183.25]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-183.25,-16.75],[-40.75,-159.25],[159.25,40.75],[16.75,183.25]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":390,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-183.25,-16.75],[-40.75,-159.25],[159.25,40.75],[16.75,183.25]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-183.25,-16.75],[-16.75,-183.25],[183.25,16.75],[16.75,183.25]],"c":true}]},{"t":420}],"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.30980399251,0.462745010853,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":36,"ty":4,"nm":"Path","parent":3,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[1205.5,527.5,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":90,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[156.75,113.25],[113.25,156.75],[-156.75,-113.25],[-113.25,-156.75]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[156.75,113.25],[93.25,176.75],[-176.75,-93.25],[-113.25,-156.75]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":121,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[156.75,113.25],[93.25,176.75],[-176.75,-93.25],[-113.25,-156.75]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[156.75,113.25],[93.25,176.75],[-176.75,-93.25],[-113.25,-156.75]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":300,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[156.75,113.25],[93.25,176.75],[-176.75,-93.25],[-113.25,-156.75]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[156.75,113.25],[113.25,156.75],[-156.75,-113.25],[-113.25,-156.75]],"c":true}]},{"t":331}],"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.30980399251,0.462745010853,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"fl","c":{"a":0,"k":[1,1,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":3,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":37,"ty":4,"nm":"Path","parent":3,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[1205.5,547.5,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":90,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[156.75,103.25],[103.25,156.75],[-156.75,-103.25],[-103.25,-156.75]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[156.75,103.25],[93.25,166.75],[-176.75,-103.25],[-113.25,-166.75]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":121,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[156.75,103.25],[93.25,166.75],[-176.75,-103.25],[-113.25,-166.75]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[156.75,103.25],[93.25,166.75],[-176.75,-103.25],[-113.25,-166.75]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":300,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[156.75,103.25],[93.25,166.75],[-176.75,-103.25],[-113.25,-166.75]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[156.75,103.25],[103.25,156.75],[-156.75,-103.25],[-103.25,-156.75]],"c":true}]},{"t":331}],"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.30980399251,0.462745010853,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"fl","c":{"a":0,"k":[1,1,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":3,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":38,"ty":4,"nm":"Path","parent":3,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[1205.5,567.5,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":90,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[156.75,93.25],[93.25,156.75],[-156.75,-93.25],[-93.25,-156.75]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[156.75,93.25],[93.25,156.75],[-176.75,-113.25],[-113.25,-176.75]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":121,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[156.75,93.25],[93.25,156.75],[-176.75,-113.25],[-113.25,-176.75]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[156.75,93.25],[93.25,156.75],[-176.75,-113.25],[-113.25,-176.75]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":300,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[156.75,93.25],[93.25,156.75],[-176.75,-113.25],[-113.25,-176.75]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[156.75,93.25],[93.25,156.75],[-156.75,-93.25],[-93.25,-156.75]],"c":true}]},{"t":331}],"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.30980399251,0.462745010853,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"fl","c":{"a":0,"k":[1,1,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":3,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":39,"ty":4,"nm":"Path Copy 16","parent":3,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[549.878,808.122,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,-100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.833,"y":1},"o":{"x":0.333,"y":0},"n":"0p833_1_0p333_0","t":90,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[116.059,65.119],[41.119,140.059],[-140.061,-41.121],[-65.121,-116.061]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[116.059,65.119],[65.119,116.059],[-116.061,-65.121],[-65.121,-116.061]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":122,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[116.059,65.119],[65.119,116.059],[-116.061,-65.121],[-65.121,-116.061]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[116.059,65.119],[65.119,116.059],[-116.061,-65.121],[-65.121,-116.061]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":300,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[116.059,65.119],[65.119,116.059],[-116.061,-65.121],[-65.121,-116.061]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[116.059,65.119],[41.119,140.059],[-140.061,-41.121],[-65.121,-116.061]],"c":true}]},{"t":331}],"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.30980399251,0.462745010853,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"fl","c":{"a":0,"k":[1,1,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":-270,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path Copy 16","np":3,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":40,"ty":4,"nm":"Path Copy 15","parent":3,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[526,808.122,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,-100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.833,"y":1},"o":{"x":0.333,"y":0},"n":"0p833_1_0p333_0","t":90,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[116.059,53.409],[41.409,128.059],[-140.061,-53.411],[-65.411,-128.061]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[116.059,53.409],[53.409,116.059],[-116.061,-53.411],[-53.411,-116.061]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":122,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[116.059,53.409],[53.409,116.059],[-116.061,-53.411],[-53.411,-116.061]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[116.059,53.409],[53.409,116.059],[-116.061,-53.411],[-53.411,-116.061]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":300,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[116.059,53.409],[53.409,116.059],[-116.061,-53.411],[-53.411,-116.061]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[116.059,53.409],[41.409,128.059],[-140.061,-53.411],[-65.411,-128.061]],"c":true}]},{"t":331}],"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.30980399251,0.462745010853,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"fl","c":{"a":0,"k":[1,1,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":-270,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path Copy 15","np":3,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":41,"ty":4,"nm":"Path Copy 14","parent":3,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[503.425,808.122,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,-100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.833,"y":1},"o":{"x":0.333,"y":0},"n":"0p833_1_0p333_0","t":90,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[116.059,42.045],[41.699,116.405],[-138.061,-64.045],[-63.701,-138.405]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[116.059,42.045],[41.699,116.405],[-116.061,-42.045],[-41.701,-116.405]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":122,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[116.059,42.045],[41.699,116.405],[-116.061,-42.045],[-41.701,-116.405]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[116.059,42.045],[41.699,116.405],[-116.061,-42.045],[-41.701,-116.405]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":300,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[116.059,42.045],[41.699,116.405],[-116.061,-42.045],[-41.701,-116.405]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[116.059,42.045],[41.699,116.405],[-138.061,-64.045],[-63.701,-138.405]],"c":true}]},{"t":331}],"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.30980399251,0.462745010853,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"fl","c":{"a":0,"k":[1,1,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":-270,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path Copy 14","np":3,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":42,"ty":4,"nm":"Path Copy 13","parent":3,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[391,697,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,-100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[195.5,121.05],[121.05,195.5],[-195.5,-121.05],[-121.05,-195.5]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.30980399251,0.462745010853,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":-270,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path Copy 13","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":43,"ty":4,"nm":"Path","parent":3,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[1185.5,548.5,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[166.75,103.25],[103.25,166.75],[-166.75,-103.25],[-103.25,-166.75]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.30980399251,0.462745010853,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[200,200],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Path","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":420,"st":0,"bm":0}],"markers":[{"tm":90,"cm":"1","dr":0},{"tm":121,"cm":"2","dr":0},{"tm":180,"cm":"3","dr":0},{"tm":210,"cm":"4","dr":0},{"tm":300,"cm":"5","dr":0},{"tm":331,"cm":"6","dr":0},{"tm":390,"cm":"7","dr":0},{"tm":420,"cm":"8","dr":0}]}
\ No newline at end of file
diff --git a/packages/dev-tools-pages/ts/components/animations/trace/index.tsx b/packages/dev-tools-pages/ts/components/animations/trace/index.tsx
new file mode 100644
index 000000000..10a78ccb7
--- /dev/null
+++ b/packages/dev-tools-pages/ts/components/animations/trace/index.tsx
@@ -0,0 +1,11 @@
+import * as React from 'react';
+
+import { BaseAnimation } from '../index';
+
+import * as animationData from './data.json';
+
+const AnimationTrace: React.StatelessComponent<{}> = () => (
+    <BaseAnimation animationData={animationData} width={2241} height={610} />
+);
+
+export { AnimationTrace as Animation };
diff --git a/packages/dev-tools-pages/ts/components/base.tsx b/packages/dev-tools-pages/ts/components/base.tsx
new file mode 100644
index 000000000..8e608ecdd
--- /dev/null
+++ b/packages/dev-tools-pages/ts/components/base.tsx
@@ -0,0 +1,26 @@
+import * as React from 'react';
+import { ThemeProvider } from 'styled-components';
+
+import { Footer } from 'ts/components/Footer';
+import { Header } from 'ts/components/Header';
+import { ThemeContext } from 'ts/context';
+import { GlobalStyles } from 'ts/globalStyles';
+
+interface BaseProps {
+    context: any;
+}
+
+const Base: React.StatelessComponent<BaseProps> = props => (
+    <ThemeContext.Provider value={props.context}>
+        <ThemeProvider theme={props.context}>
+            <React.Fragment>
+                <GlobalStyles colors={props.context.colors} />
+                <Header />
+                {props.children}
+                <Footer />
+            </React.Fragment>
+        </ThemeProvider>
+    </ThemeContext.Provider>
+);
+
+export { Base };
diff --git a/packages/dev-tools-pages/ts/components/breakout.tsx b/packages/dev-tools-pages/ts/components/breakout.tsx
new file mode 100644
index 000000000..505d8de41
--- /dev/null
+++ b/packages/dev-tools-pages/ts/components/breakout.tsx
@@ -0,0 +1,12 @@
+import styled from 'styled-components';
+
+import { media } from 'ts/variables';
+
+const Breakout = styled.div`
+    ${media.small`
+        margin-left: -2.5rem;
+        width: calc(100% + 5rem);
+  `};
+`;
+
+export { Breakout };
diff --git a/packages/dev-tools-pages/ts/components/button.tsx b/packages/dev-tools-pages/ts/components/button.tsx
new file mode 100644
index 000000000..d3b36ebfd
--- /dev/null
+++ b/packages/dev-tools-pages/ts/components/button.tsx
@@ -0,0 +1,55 @@
+import styled from 'styled-components';
+
+import { colors, media } from 'ts/variables';
+
+interface ButtonProps {
+    large?: boolean;
+}
+
+const Button =
+    styled.button <
+    ButtonProps >
+    `
+  font-family: inherit;
+  line-height: 1;
+  font-weight: 500;
+  white-space: nowrap;
+  vertical-align: middle;
+  background-color: ${props => props.theme.colors.secondary};
+  color: ${colors.black};
+  border: 0;
+  border-radius: 5rem;
+  display: inline-flex;
+  justify-content: space-between;
+  align-items: center;
+
+  ${props =>
+      props.large
+          ? `
+      font-size: 1rem;
+      padding: 1.1875rem 2.375rem 1.0625rem;
+  `
+          : `
+      font-size: .875rem;
+      padding: .5625rem 1.25rem;
+  `}
+
+  :hover, :focus {
+    background-color: ${props => props.theme.colors.secondary_alt};
+    outline: 0;
+  }
+
+  ${media.small`
+  font-size: .875rem;
+  padding: .5625rem 1.25rem;
+  `}
+
+    ${props =>
+        props.large &&
+        media.small`
+        font-size: 1rem;
+        padding: 1rem 1.5rem .75rem;
+    `}
+`;
+
+export { Button };
diff --git a/packages/dev-tools-pages/ts/components/code.tsx b/packages/dev-tools-pages/ts/components/code.tsx
new file mode 100644
index 000000000..8415f1179
--- /dev/null
+++ b/packages/dev-tools-pages/ts/components/code.tsx
@@ -0,0 +1,203 @@
+import * as React from 'react';
+import styled from 'styled-components';
+
+import { colors } from 'ts/variables';
+
+import { Button as BaseButton } from './Button';
+
+const isTouch = Boolean(
+    'ontouchstart' in window ||
+        (window as any).navigator.maxTouchPoints > 0 ||
+        (window as any).navigator.msMaxTouchPoints > 0,
+);
+
+interface CodeProps {
+    language?: string;
+    isLight?: boolean;
+    isDiff?: boolean;
+    gutter?: Array<number | undefined>;
+    gutterLength?: number;
+    canCopy?: boolean;
+    isEtc?: boolean;
+}
+
+interface CodeState {
+    hlCode?: string;
+    didCopy?: boolean;
+}
+
+const Button = styled(BaseButton)`
+    opacity: ${isTouch ? '1' : '0'};
+    position: absolute;
+    top: 1rem;
+    right: 1rem;
+    transition: opacity 0.2s;
+    :focus {
+        opacity: 1;
+    }
+`;
+
+const Container = styled.div`
+    position: relative;
+    &:hover ${Button} {
+        opacity: 1;
+    }
+`;
+
+const Base =
+    styled.div <
+    CodeProps >
+    `
+    font-size: .875rem;
+    color: ${props => (props.language === undefined ? colors.white : 'inherit')};
+    background-color: ${props =>
+        props.isLight ? 'rgba(255,255,255,.15)' : props.language === undefined ? colors.black : '#F1F4F5'};
+    white-space: ${props => (props.language === undefined ? 'nowrap' : '')};
+    position: relative;
+
+    ${props =>
+        props.isDiff
+            ? `
+        background-color: #E9ECED;
+        display: flex;
+        padding-top: 1.5rem;
+        padding-bottom: 1.5rem;
+        overflow-x: auto;
+        -webkit-overflow-scrolling: touch;
+    `
+            : ``}
+`;
+
+const CodeDiff: React.StatelessComponent<any> = ({ gutterLength, ...props }) => <code {...props} />;
+const StyledCodeDiff = styled(CodeDiff)`
+    ::before {
+        content: '';
+        width: calc(0.75rem + ${props => props.gutterLength}ch);
+        background-color: #e2e5e6;
+        position: absolute;
+        top: 0;
+        left: 0;
+        bottom: 0;
+    }
+
+    [class^='line-'] {
+        display: inline-block;
+        width: 100%;
+        position: relative;
+        padding-right: 1.5rem;
+        padding-left: calc(2.25rem + ${props => props.gutterLength}ch);
+
+        ::before {
+            content: attr(data-gutter);
+
+            width: ${props => props.gutterLength};
+            padding-left: 0.375rem;
+            padding-right: 0.375rem;
+            position: absolute;
+            top: 50%;
+            left: 0;
+            transform: translateY(-50%);
+            z-index: 1;
+        }
+    }
+
+    .line-addition {
+        background-color: rgba(0, 202, 105, 0.1);
+    }
+    .line-deletion {
+        background-color: rgba(255, 0, 0, 0.07);
+    }
+`;
+
+const StyledPre =
+    styled.pre <
+    CodeProps >
+    `
+    margin: 0;
+    ${props =>
+        !props.isDiff
+            ? `
+        padding: 1.5rem;
+        overflow-x: auto;
+        -webkit-overflow-scrolling: touch;
+    `
+            : ``};
+`;
+
+const StyledCopyInput = styled.textarea`
+    opacity: 0;
+    height: 0;
+    position: absolute;
+    top: 0;
+    right: 0;
+    z-index: -1;
+`;
+
+class Code extends React.Component<CodeProps, CodeState> {
+    public state: CodeState = {};
+    private readonly _code = React.createRef<HTMLTextAreaElement>();
+    public componentDidMount(): void {
+        // _onMountAsync is only setting state, so no point in handling the promise
+        // tslint:disable-next-line:no-floating-promises
+        this._onMountAsync();
+    }
+    public render(): React.ReactNode {
+        const { language, isLight, isDiff, children, gutterLength, canCopy } = this.props;
+        const { hlCode } = this.state;
+
+        return (
+            <Container>
+                <Base language={language} isDiff={isDiff} isLight={isLight}>
+                    <StyledPre isDiff={isDiff}>
+                        {hlCode === undefined ? (
+                            <code>{children}</code>
+                        ) : (
+                            <StyledCodeDiff
+                                gutterLength={gutterLength}
+                                dangerouslySetInnerHTML={hlCode ? { __html: this.state.hlCode } : null}
+                            />
+                        )}
+                    </StyledPre>
+                    {!('clipboard' in navigator) ? (
+                        <StyledCopyInput readOnly={true} aria-hidden="true" ref={this._code} value={children} />
+                    ) : null}
+                </Base>
+                {navigator.userAgent !== 'ReactSnap' && canCopy ? (
+                    <Button onClick={this._handleCopyAsync}>{this.state.didCopy ? 'Copied' : 'Copy'}</Button>
+                ) : null}
+            </Container>
+        );
+    }
+    private async _onMountAsync(): Promise<void> {
+        const { language, children, isDiff, gutter, isEtc } = this.props;
+
+        const code = children as string;
+
+        if (language !== undefined) {
+            const { highlight } = await System.import(/* webpackChunkName: 'highlightjs' */ 'ts/highlight');
+
+            this.setState({
+                hlCode: highlight({ language, code, isDiff, gutter, isEtc }),
+            });
+        }
+    }
+    private readonly _handleCopyAsync = async () => {
+        try {
+            if ('clipboard' in navigator) {
+                await (navigator as any).clipboard.writeText(this.props.children);
+                this.setState({ didCopy: true });
+            } else {
+                const lastActive = document.activeElement as HTMLElement;
+                this._code.current.focus();
+                this._code.current.select();
+                document.execCommand('copy');
+                lastActive.focus();
+                this.setState({ didCopy: true });
+            }
+        } catch (error) {
+            this.setState({ didCopy: false });
+        }
+    };
+}
+
+export { Code };
diff --git a/packages/dev-tools-pages/ts/components/compiler.tsx b/packages/dev-tools-pages/ts/components/compiler.tsx
new file mode 100644
index 000000000..f16365fd0
--- /dev/null
+++ b/packages/dev-tools-pages/ts/components/compiler.tsx
@@ -0,0 +1,89 @@
+import * as React from 'react';
+import styled from 'styled-components';
+
+import { colors, media } from 'ts/variables';
+
+import { Breakout } from './Breakout';
+import { Container } from './Container';
+import { InlineCode } from './InlineCode';
+
+const Cards = styled.dl`
+    column-count: 3;
+    column-gap: 1.25rem;
+
+    ${media.medium`
+        column-count: 1;
+    `};
+`;
+
+const Card = styled.div`
+    background-color: ${colors.lightGray};
+    padding: 3.125rem;
+    padding-bottom: 2.5rem;
+    display: inline-block;
+    margin-bottom: 1.25rem;
+    width: 100%;
+
+    ${media.medium`
+        padding: 1.875rem;
+    `};
+`;
+
+const Dt = styled.dt`
+    font-weight: 500;
+    display: inline;
+    ::after {
+        content: '. ';
+    }
+`;
+
+const Dd = styled.dd`
+    display: inline;
+    margin-left: 0;
+`;
+
+const cards = [
+    {
+        title: 'A Project-centric',
+        body: (
+            <React.Fragment>
+                Compiles an entire project instead of only individual <InlineCode isAlt={true}>.sol</InlineCode> files.
+            </React.Fragment>
+        ),
+    },
+    {
+        title: 'Incremental builds',
+        body: 'Recompiles your smart contracts after they have changed',
+    },
+    {
+        title: 'Customizable artifacts',
+        body:
+            'Stores only the required compiler output in your artifacts, so you can have complete control over your bundle size.',
+    },
+    {
+        title: 'Seamless',
+        body: 'Fetches and caches the required compiler binaries.',
+    },
+    {
+        title: 'Versioning',
+        body:
+            'Compiles each contract with the version specified at the top of its file (sol-compiler even supports version ranges!).',
+    },
+];
+
+const Compiler: React.StatelessComponent<{}> = () => (
+    <Container>
+        <Breakout>
+            <Cards>
+                {cards.map(card => (
+                    <Card key={card.title.split(' ').join('-')}>
+                        <Dt>{card.title}</Dt>
+                        <Dd>{card.body}</Dd>
+                    </Card>
+                ))}
+            </Cards>
+        </Breakout>
+    </Container>
+);
+
+export { Compiler };
diff --git a/packages/dev-tools-pages/ts/components/container.tsx b/packages/dev-tools-pages/ts/components/container.tsx
new file mode 100644
index 000000000..1b9212ed2
--- /dev/null
+++ b/packages/dev-tools-pages/ts/components/container.tsx
@@ -0,0 +1,16 @@
+import styled from 'styled-components';
+
+interface ContainerProps {
+    wide?: boolean;
+}
+
+const Container =
+    styled.div <
+    ContainerProps >
+    `
+    max-width: 77.5rem;
+    margin: 0 auto;
+    width: ${props => (props.wide ? '100%' : 'calc(100% - 5rem)')};
+`;
+
+export { Container };
diff --git a/packages/dev-tools-pages/ts/components/content-block.tsx b/packages/dev-tools-pages/ts/components/content-block.tsx
new file mode 100644
index 000000000..2818858dc
--- /dev/null
+++ b/packages/dev-tools-pages/ts/components/content-block.tsx
@@ -0,0 +1,77 @@
+import * as React from 'react';
+import styled from 'styled-components';
+
+import { ContextInterface } from 'ts/context';
+import { media } from 'ts/variables';
+
+import { Alpha, Beta } from './Typography';
+
+const Base = styled.div`
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    :not(:last-of-type) {
+        margin-bottom: 6.25rem;
+    }
+    ${Beta} {
+        margin-bottom: 2.5rem;
+    }
+    ${media.small`
+        display: block;
+        :not(:last-of-type) {
+            margin-bottom: 3.125rem;
+        }
+    `};
+`;
+
+const Content = styled.div`
+    width: 66.693548387%;
+    ${media.small`
+        width: 100%;
+    `};
+`;
+
+const Item = styled.div`
+    p {
+        max-width: 31.25rem;
+    }
+
+    &:not(:last-of-type) {
+        margin-bottom: 2.5rem;
+        ${media.small`
+            margin-bottom: 1.875rem;
+        `};
+    }
+`;
+
+const StyledTitle = styled(Alpha)`
+    color: ${props => props.color};
+    ${media.small`
+        & + div {
+            margin-top: 1.5rem;
+        }
+    `};
+`;
+
+interface ContentBlockProps extends ContextInterface {
+    title: string;
+    main?: boolean;
+    children?: React.ReactNode;
+}
+
+const ContentBlock: React.StatelessComponent<ContentBlockProps> = props => {
+    const children = React.Children.map(props.children, child => {
+        return <Item>{child}</Item>;
+    });
+
+    const Title = props.main ? StyledTitle : Beta;
+
+    return (
+        <Base>
+            <Title color={props.colors}>{props.title}</Title>
+            {children === undefined ? null : <Content>{children}</Content>}
+        </Base>
+    );
+};
+
+export { ContentBlock };
diff --git a/packages/dev-tools-pages/ts/components/content.tsx b/packages/dev-tools-pages/ts/components/content.tsx
new file mode 100644
index 000000000..55550441c
--- /dev/null
+++ b/packages/dev-tools-pages/ts/components/content.tsx
@@ -0,0 +1,34 @@
+import * as React from 'react';
+import styled from 'styled-components';
+
+import { Container } from './Container';
+
+const StyledMain =
+    styled.div <
+    MainProps >
+    `
+    padding-top: 6.25rem;
+    padding-bottom: 6.25rem;
+    ${props =>
+        props.dark
+            ? `
+        background-color: #000;
+        color: #fff;
+        p:not([class]) {
+            color: #CCC;
+        }
+    `
+            : ''};
+`;
+
+interface MainProps {
+    dark?: boolean;
+}
+
+const Content: React.StatelessComponent<MainProps> = props => (
+    <StyledMain dark={props.dark}>
+        <Container>{props.children}</Container>
+    </StyledMain>
+);
+
+export { Content };
diff --git a/packages/dev-tools-pages/ts/components/footer.tsx b/packages/dev-tools-pages/ts/components/footer.tsx
new file mode 100644
index 000000000..a278fdfee
--- /dev/null
+++ b/packages/dev-tools-pages/ts/components/footer.tsx
@@ -0,0 +1,132 @@
+import * as React from 'react';
+import styled from 'styled-components';
+
+import { context as compiler } from 'ts/context/compiler';
+import { context as cov } from 'ts/context/cov';
+import { context as profiler } from 'ts/context/profiler';
+import { context as trace } from 'ts/context/trace';
+import MainIcon from 'ts/icons/logos/0x.svg';
+import { media } from 'ts/variables';
+
+import { Container } from './Container';
+import { Alpha, Beta } from './Typography';
+
+const tools = [trace, cov, compiler, profiler];
+
+const Footer: React.StatelessComponent<{}> = () => (
+    <StyledFooter>
+        <Container>
+            <Top>
+                <Alpha>Other tools by 0x</Alpha>
+                <List>
+                    {tools.map(({ title, subtitle, icon }) => (
+                        <ListItem key={title}>
+                            <ListLink href="#">
+                                <Icon as={icon} />
+                                <div>
+                                    <Beta>{title}</Beta>
+                                    <p>{subtitle}</p>
+                                </div>
+                            </ListLink>
+                        </ListItem>
+                    ))}
+                </List>
+            </Top>
+            <Media as="aside">
+                <Icon as={MainIcon} />
+                <Small>
+                    0x is an open, permissionless protocol allowing for tokens to be traded on the Ethereum blockchain.
+                </Small>
+            </Media>
+        </Container>
+    </StyledFooter>
+);
+
+const StyledFooter = styled.footer`
+    background-color: ${props => props.theme.colors.secondary};
+    padding-top: 6.25rem;
+    padding-bottom: 5.4375rem;
+
+    ${media.small`padding-top: 2.5rem;`};
+`;
+
+const Top = styled.div`
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 9.375rem;
+
+    ${media.medium`
+        display: block;
+        margin-bottom: 5.3125rem;
+    `};
+
+    ${Alpha} {
+        ${media.medium`margin-bottom: 3.8125rem;`};
+    }
+`;
+
+const Icon = styled.div`
+    margin-right: 1.3125rem;
+    flex-shrink: 0;
+    ${media.small`margin-right: 0.9375rem`};
+`;
+
+const Media = styled.div`
+    display: flex;
+    align-items: center;
+
+    ${Icon} {
+        margin-top: 0.5rem;
+        align-self: flex-start;
+    }
+`;
+
+const List = styled.ul`
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    width: 66.693548387%;
+    display: flex;
+    flex-wrap: wrap;
+
+    ${media.medium`
+        width: 100%;
+    `};
+
+    ${media.small`
+        display: block;
+    `};
+`;
+
+const ListItem = styled.li`
+    margin-bottom: 3.3125rem;
+    padding-right: 1rem;
+    flex-basis: 50%;
+    :nth-last-of-type(-n + 2) {
+        margin-bottom: 0;
+
+        ${media.small`margin-bottom: 1.875rem`};
+    }
+
+    ${media.small`
+        margin-bottom: 1.875rem
+        :last-of-type {
+            margin-bottom: 0;
+        }
+    `};
+`;
+
+const ListLink = styled.a`
+    display: flex;
+    align-items: center;
+    :hover {
+        color: ${props => props.theme.colors.dark};
+    }
+`;
+
+const Small = styled.small`
+    font-size: 1em;
+    max-width: 37.5rem;
+`;
+
+export { Footer };
diff --git a/packages/dev-tools-pages/ts/components/header.tsx b/packages/dev-tools-pages/ts/components/header.tsx
new file mode 100644
index 000000000..94714c0af
--- /dev/null
+++ b/packages/dev-tools-pages/ts/components/header.tsx
@@ -0,0 +1,76 @@
+import * as React from 'react';
+import styled from 'styled-components';
+
+import { ContextInterface, ThemeContext } from 'ts/context';
+import { media } from 'ts/variables';
+
+import { Container } from './Container';
+import { Small } from './Typography';
+
+const Header: React.StatelessComponent<{}> = () => (
+    <ThemeContext.Consumer>
+        {({ icon, title }: ContextInterface) => (
+            <StyledHeader>
+                <Container>
+                    <LogoMark>
+                        <Logo as={icon as 'svg'} />
+                        <Title>{title}</Title>
+                    </LogoMark>
+
+                    <Link as="a" href="https://0xproject.com/">
+                        Built by 0x
+                    </Link>
+                </Container>
+            </StyledHeader>
+        )}
+    </ThemeContext.Consumer>
+);
+
+const StyledHeader = styled.header`
+    padding-top: 3.75rem;
+    padding-bottom: 0.875rem;
+    width: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 2;
+    ${Container} {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+    }
+
+    ${media.small`padding-top: 2.125rem;`};
+`;
+
+const LogoMark = styled.div`
+    position: relative;
+    height: 1.75rem;
+    display: flex;
+    align-items: center;
+`;
+
+const Logo = styled.div`
+    color: ${props => props.theme.colors.main};
+    width: 1.75rem;
+    height: 100%;
+`;
+
+const Title = styled.h1`
+    font-size: 1.5rem;
+    line-height: 1;
+    white-space: nowrap;
+    margin-top: 2px;
+    margin-bottom: 0;
+    margin-left: 0.8125rem;
+
+    ${media.small`font-size: 1.25rem;`};
+`;
+
+const Link = styled(Small)`
+    :hover {
+        text-decoration: underline;
+    }
+`;
+
+export { Header };
diff --git a/packages/dev-tools-pages/ts/components/hero.tsx b/packages/dev-tools-pages/ts/components/hero.tsx
new file mode 100644
index 000000000..8b6d6ade3
--- /dev/null
+++ b/packages/dev-tools-pages/ts/components/hero.tsx
@@ -0,0 +1,63 @@
+import * as React from 'react';
+import styled from 'styled-components';
+
+import { ContextInterface, ThemeContext } from 'ts/context';
+import { media } from 'ts/variables';
+
+import { Button } from './Button';
+import { Beta } from './Typography';
+
+const Hero: React.StatelessComponent<ContextInterface> = ({ children }) => (
+    <ThemeContext.Consumer>
+        {({ subtitle, tagline }: ContextInterface) => (
+            <StyledHero>
+                <HeroContainer>
+                    <Subtitle>{subtitle}</Subtitle>
+                    <Tagline as="p">{tagline}</Tagline>
+                    <Button as="a" href="#" large={true}>
+                        Read the Docs
+                    </Button>
+                </HeroContainer>
+                {navigator.userAgent !== 'ReactSnap' ? children : null}
+            </StyledHero>
+        )}
+    </ThemeContext.Consumer>
+);
+
+const StyledHero = styled.section`
+    text-align: center;
+    padding-top: 9.375rem;
+    padding-bottom: 2rem;
+    padding-left: 2.5rem;
+    padding-right: 2.5rem;
+    min-height: min-content;
+    max-height: 37.5rem;
+    height: 80vh;
+    position: relative;
+`;
+
+const HeroContainer = styled.div`
+    margin: 0 auto;
+    max-width: 590px;
+`;
+
+const Subtitle = styled.h2`
+    font-size: 3.75rem;
+    line-height: 1.16;
+    margin-bottom: 1.5rem;
+
+    ${media.small`
+        font-size: 2.25rem;
+        line-height: 1.1;
+        margin-bottom: 1.375rem;
+    `};
+`;
+
+const Tagline = styled(Beta)`
+    margin-bottom: 2rem;
+    ${media.small`
+        margin-bottom: 1.25rem;
+    `};
+`;
+
+export { Hero };
diff --git a/packages/dev-tools-pages/ts/components/inline-code.tsx b/packages/dev-tools-pages/ts/components/inline-code.tsx
new file mode 100644
index 000000000..561666b0f
--- /dev/null
+++ b/packages/dev-tools-pages/ts/components/inline-code.tsx
@@ -0,0 +1,20 @@
+import * as React from 'react';
+import styled from 'styled-components';
+
+import { colors } from '../variables';
+
+interface InlineCodeProps {
+    isAlt?: boolean;
+    children: React.ReactNode;
+}
+
+const Code: React.StatelessComponent<InlineCodeProps> = ({ isAlt, children, ...props }) => (
+    <code {...props}>{children}</code>
+);
+
+const InlineCode = styled(Code)`
+    background-color: ${props => (props.isAlt ? '#E5E8E9' : colors.blueGray)};
+    padding: 0.3125rem;
+`;
+
+export { InlineCode };
diff --git a/packages/dev-tools-pages/ts/components/intro.tsx b/packages/dev-tools-pages/ts/components/intro.tsx
new file mode 100644
index 000000000..54b14f237
--- /dev/null
+++ b/packages/dev-tools-pages/ts/components/intro.tsx
@@ -0,0 +1,70 @@
+import * as React from 'react';
+import styled from 'styled-components';
+
+import { colors, media } from 'ts/variables';
+
+import { Breakout } from './Breakout';
+import { Container } from './Container';
+import { Alpha, Lead } from './Typography';
+
+const Main = styled.div`
+    background-color: ${colors.lightGray};
+    padding: 6.25rem;
+    display: flex;
+    justify-content: space-between;
+
+    ${media.large`
+        padding: 2.5rem;
+    `};
+    ${media.medium`
+        display: block;
+    `};
+`;
+
+const Title = styled(Alpha)`
+    margin-bottom: 2.5rem;
+
+    ${media.medium`margin-bottom: 2.25rem;`};
+`;
+
+const StyledIntroLead = styled(Lead)`
+    max-width: 25.9375rem;
+    margin-right: 2rem;
+    ${media.medium`
+        max-width: 100%;
+        margin-bottom: 1.5625rem;
+    `};
+`;
+
+const StyledIntroAside = styled.div`
+    max-width: 32.5rem;
+    position: relative;
+    ${media.medium`
+        max-width: 100%;
+    `};
+`;
+
+interface IntroLeadProps {
+    title: string;
+}
+
+const IntroLead: React.StatelessComponent<IntroLeadProps> = props => (
+    <StyledIntroLead as="div">
+        <Title>{props.title}</Title>
+        {props.children}
+    </StyledIntroLead>
+);
+
+const IntroAside: React.StatelessComponent<{}> = props => (
+    <Breakout>
+        <StyledIntroAside>{props.children}</StyledIntroAside>
+    </Breakout>
+);
+
+const Intro: React.StatelessComponent<{}> = props => (
+    <Container wide={true}>
+        <Main>{props.children}</Main>
+    </Container>
+);
+
+export { IntroLead, IntroAside, Intro };
diff --git a/packages/dev-tools-pages/ts/components/list.tsx b/packages/dev-tools-pages/ts/components/list.tsx
new file mode 100644
index 000000000..12d5d67a9
--- /dev/null
+++ b/packages/dev-tools-pages/ts/components/list.tsx
@@ -0,0 +1,49 @@
+import * as React from 'react';
+import styled from 'styled-components';
+
+import { media } from 'ts/variables';
+
+const StyledList = styled.ul`
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+    position: relative;
+`;
+
+const StyledItem = styled.li`
+    position: relative;
+    padding-left: 1.625rem;
+
+    :before {
+        content: '';
+        border: 1px solid black;
+        width: 0.625rem;
+        height: 0.625rem;
+        display: inline-block;
+        position: absolute;
+        margin-top: 2px;
+        top: 0.3125rem;
+        left: 0;
+        transform: rotate(45deg);
+    }
+    :not(:last-child) {
+        margin-bottom: 0.5625rem;
+        ${media.small`
+            margin-bottom: 0.375rem;
+        `};
+    }
+`;
+
+interface ListProps {
+    items?: [];
+}
+
+const List: React.StatelessComponent<ListProps> = props => (
+    <StyledList>
+        {props.children !== undefined
+            ? props.children
+            : props.items.map((bullet, index) => <StyledItem key={index}>{bullet}</StyledItem>)}
+    </StyledList>
+);
+
+export { List, StyledItem as ListItem };
diff --git a/packages/dev-tools-pages/ts/components/tabs.tsx b/packages/dev-tools-pages/ts/components/tabs.tsx
new file mode 100644
index 000000000..0a62fa334
--- /dev/null
+++ b/packages/dev-tools-pages/ts/components/tabs.tsx
@@ -0,0 +1,64 @@
+import * as React from 'react';
+import { Tab, TabList, TabPanel, Tabs as ReactTabs } from 'react-tabs';
+import styled from 'styled-components';
+
+import { colors } from 'ts/variables';
+
+import { Breakout } from './Breakout';
+
+const StyledTabList = styled(TabList)`
+    text-transform: uppercase;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+`;
+
+const StyledTab = styled(Tab)`
+    background-color: ${props => props.theme.colors.secondary};
+    height: 2.5rem;
+    padding-left: 1rem;
+    padding-right: 1rem;
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    float: left;
+    &:not(:first-of-type) {
+        margin-left: 0.25rem;
+    }
+
+    &[aria-selected='true'] {
+        background-color: ${colors.gray};
+    }
+
+    &[aria-selected='false']:focus,
+    &[aria-selected='false']:hover {
+        background-color: ${props => props.theme.colors.secondary_alt};
+        cursor: pointer;
+    }
+`;
+
+const Tabs: React.StatelessComponent<{}> = props => (
+    <Breakout>
+        <ReactTabs>
+            <StyledTabList>
+                {React.Children.map(props.children, child => {
+                    const { title } = React.cloneElement(child as React.ReactElement<any>).props;
+                    return <StyledTab>{title}</StyledTab>;
+                })}
+            </StyledTabList>
+
+            {React.Children.map(props.children, child => <TabPanel>{child}</TabPanel>)}
+        </ReactTabs>
+    </Breakout>
+);
+
+interface TabBlockProps {
+    title: string;
+}
+
+const TabBlock: React.StatelessComponent<TabBlockProps> = props => <React.Fragment>{props.children}</React.Fragment>;
+
+const ContextTabs = Tabs;
+
+export { ContextTabs as Tabs, TabBlock };
diff --git a/packages/dev-tools-pages/ts/components/trace.tsx b/packages/dev-tools-pages/ts/components/trace.tsx
new file mode 100644
index 000000000..0cee4c1a2
--- /dev/null
+++ b/packages/dev-tools-pages/ts/components/trace.tsx
@@ -0,0 +1,223 @@
+import * as React from 'react';
+import styled from 'styled-components';
+
+import { ContextInterface, ThemeContext } from 'ts/context';
+import ExactLocation from 'ts/icons/exact-location.svg';
+import NoLocation from 'ts/icons/no-location.svg';
+import TimeConsuming from 'ts/icons/time-consuming.svg';
+import TimeSaving from 'ts/icons/time-saving.svg';
+import { colors, media } from 'ts/variables';
+
+import { Breakout } from './Breakout';
+import { Code } from './Code';
+import { Container } from './Container';
+import { Alpha, Gamma, Lead } from './Typography';
+
+const Trace: React.StatelessComponent<{}> = () => (
+    <ThemeContext.Consumer>
+        {(props: ContextInterface) => (
+            <StyledSection background={props.colors.secondary}>
+                <Wrapper>
+                    <Block>
+                        <Alpha>The Issue</Alpha>
+                        <MainCopy>
+                            Every time an Ethereum transaction fails, it's extremely hard to trace down the
+                            troublemaking line of code. The only hint you'll get is a generic error.
+                        </MainCopy>
+                        <Breakout>
+                            <Code isLight={true}>Error: VM Exception while processing transaction: rever</Code>
+                        </Breakout>
+
+                        <List>
+                            <Item>
+                                <Copy dark={true}>
+                                    <Gamma as="h3">No location</Gamma>
+                                    <p>
+                                        The error basically says "anything could have gone wrong here", which keeps you
+                                        completely in the dark about its exact location.
+                                    </p>
+                                </Copy>
+                                <Icon as={NoLocation} />
+                            </Item>
+
+                            <Item>
+                                <Copy dark={true}>
+                                    <Gamma as="h3">Time-consuming</Gamma>
+                                    <p>
+                                        Working with a large code-base that contains hundreds of smart contracts,
+                                        finding the failing line of code quickly becomes a daunting task.
+                                    </p>
+                                </Copy>
+                                <Icon as={TimeConsuming} />
+                            </Item>
+                        </List>
+                    </Block>
+
+                    <Block background={props.colors.secondary}>
+                        <Alpha>The Fix</Alpha>
+                        <MainCopy>
+                            Sol-trace will give you full stack traces, including contract names, line numbers and code
+                            snippets, every time you encounter an error.
+                        </MainCopy>
+                        <Breakout>
+                            <Code isLight={true} language="javascript">
+                                {`contracts/src/2.0.0/protocol/Exchange/MixinSignatureValidator.sol:51:8
+    require(
+        isValidSignature(
+            hash,
+            signerAddress,
+            signature
+        ),
+        "INVALID_SIGNATURE"
+    )`}
+                            </Code>
+                        </Breakout>
+
+                        <List>
+                            <Item>
+                                <Copy>
+                                    <Gamma as="h3">Exact location</Gamma>
+                                    <p>
+                                        It shows you the exact location of the specific code linen and where it was
+                                        called from.
+                                    </p>
+                                </Copy>
+                                <Icon as={ExactLocation} />
+                            </Item>
+
+                            <Item>
+                                <Copy>
+                                    <Gamma as="h3">Time-saving</Gamma>
+                                    <p>
+                                        Turning "Your code failed somewhere, good luck debugging it" into "Your code
+                                        failed on line X of contract Y", it drastically improves the developer
+                                        experience.
+                                    </p>
+                                </Copy>
+                                <Icon as={TimeSaving} />
+                            </Item>
+                        </List>
+                    </Block>
+                </Wrapper>
+            </StyledSection>
+        )}
+    </ThemeContext.Consumer>
+);
+
+interface TraceProps {
+    background?: string;
+}
+
+const StyledSection =
+    styled.section <
+    TraceProps >
+    `
+    max-width: 90rem;
+    margin: 0 auto;
+    background: linear-gradient(to right, ${colors.black} 50%, ${props => props.background} 50%);
+    overflow: hidden;
+    ${media.large`
+        background: none
+        padding-top: 0;
+        padding-bottom: 0;
+    `};
+`;
+
+const Wrapper = styled(Container)`
+    display: flex;
+
+    ${Alpha} {
+        padding-bottom: 2.5rem;
+
+        ${media.small`padding-bottom: 1.875rem;`};
+    }
+
+    ${media.large`
+        display: block;
+        width: 100%;
+    `};
+`;
+
+const Block =
+    styled.div <
+    TraceProps >
+    `
+    width: 50%;
+    background: ${props => (props.background ? props.background : colors.black)};
+    color: ${props => (props.background ? 'inherit' : colors.white)};
+    padding-top: 6.25rem;
+    padding-bottom: 5.25rem;
+
+    :first-of-type {
+        padding-right: 6.25rem;
+    }
+    :last-of-type {
+        padding-left: 6.25rem;
+    }
+
+    ${media.xlarge`
+        :first-of-type {
+            padding-right: 2.5rem;
+        }
+        :last-of-type {
+            padding-left: 2.5rem;
+        }
+    `}
+    ${media.large`
+        width: 100%;
+        padding: 2.5rem;
+    `}
+
+    ${media.small`
+        padding-left: 1.875rem;
+        padding-right: 1.875rem;
+    `};
+`;
+
+const MainCopy = styled(Lead)`
+    margin-bottom: 3.1875rem;
+    ${media.small`
+        margin-bottom: 1.125rem;
+    `};
+`;
+
+const List = styled.ul`
+    margin-top: 6.25rem;
+    margin-bottom: 0;
+    padding: 0;
+
+    ${media.small`margin-top: 3.4375rem;`};
+`;
+
+const Item = styled.li`
+    display: flex;
+    align-items: center;
+
+    :not(:last-child) {
+        margin-bottom: 4.4375rem;
+
+        ${media.small`margin-bottom: 3.4375rem;`};
+    }
+`;
+
+const Copy =
+    styled.div <
+    { dark: boolean } >
+    `
+    margin-right: 5.875rem;
+    ${props =>
+        props.dark &&
+        `
+        p {
+            color: #ccc;
+        }
+    `}
+
+    ${media.small`margin-right: 2.0625rem;`};
+`;
+
+const Icon = styled.div`
+    flex-shrink: 0;
+`;
+
+export { Trace };
diff --git a/packages/dev-tools-pages/ts/components/typography.tsx b/packages/dev-tools-pages/ts/components/typography.tsx
new file mode 100644
index 000000000..e4b13163a
--- /dev/null
+++ b/packages/dev-tools-pages/ts/components/typography.tsx
@@ -0,0 +1,33 @@
+import styled from 'styled-components';
+
+import { media } from '../variables';
+
+const Alpha = styled.h2`
+    font-size: 1.75rem;
+    line-height: 1;
+
+    ${media.small`font-size: 1.5rem;`};
+`;
+
+const Beta = styled.h3`
+    font-size: 1.25rem;
+    line-height: 1.65;
+`;
+
+const Gamma = styled.h4`
+    font-size: 1rem;
+
+    ${media.small`font-size: 0.875rem;`};
+`;
+
+const Lead = styled.p`
+    font-size: 1.25rem;
+    line-height: 1.6;
+    ${media.small`font-size: 1rem;`};
+`;
+
+const Small = styled.p`
+    font-size: 0.875rem;
+`;
+
+export { Alpha, Beta, Gamma, Lead, Small };
diff --git a/packages/dev-tools-pages/ts/pages/Compiler.tsx b/packages/dev-tools-pages/ts/pages/Compiler.tsx
deleted file mode 100644
index ee533d566..000000000
--- a/packages/dev-tools-pages/ts/pages/Compiler.tsx
+++ /dev/null
@@ -1,170 +0,0 @@
-import * as React from 'react';
-import { hydrate, render } from 'react-dom';
-import * as Loadable from 'react-loadable';
-
-import { context } from 'ts/context/compiler';
-
-import { Base } from 'ts/components/Base';
-import { Breakout } from 'ts/components/Breakout';
-import { Code } from 'ts/components/Code';
-import { Compiler as CompilerComponent } from 'ts/components/Compiler';
-import { Content } from 'ts/components/Content';
-import { ContentBlock } from 'ts/components/ContentBlock';
-import { Hero } from 'ts/components/Hero';
-import { InlineCode } from 'ts/components/InlineCode';
-import { Lead } from 'ts/components/Typography';
-
-const Animation = Loadable({
-    loader: () => System.import(/* webpackChunkName: 'compiler-animation' */ 'ts/components/Animations/Compiler'),
-    loading: () => <div />,
-    delay: 1000,
-    render(loadable: { Animation: any }): React.ReactNode {
-        const Component = loadable.Animation;
-        return <Component />;
-    },
-});
-
-const Compiler: React.StatelessComponent<{}> = () => (
-    <Base context={context}>
-        <Hero>
-            <Animation />
-        </Hero>
-        <CompilerComponent />
-        <Content>
-            <ContentBlock main={true} title="Get started" />
-            <ContentBlock title="Install">
-                <Breakout>
-                    <Code canCopy={true}>npm install @0x/sol-compiler --g</Code>
-                </Breakout>
-            </ContentBlock>
-
-            <ContentBlock title="Run">
-                <Breakout>
-                    <Code>cd /your_project_dir && sol-compiler</Code>
-                </Breakout>
-            </ContentBlock>
-
-            <ContentBlock title="Configure">
-                <p>
-                    Configure via a <InlineCode>compiler.json</InlineCode> file.
-                </p>
-                <Breakout>
-                    <Code>mkdir compiler.json</Code>
-                </Breakout>
-                <p>Example of settings:</p>
-                <Breakout>
-                    <Code language="json">
-                        {`{
-    "contractsDir": "contracts",
-    "artifactsDir": "artifacts",
-    "contracts": "*",
-    "compilerSettings": {
-        "optimizer": { "enabled": false },
-        "outputSelection": {
-            "*": {
-                "*": ["abi", "evm.bytecode.object"]
-            }
-        }
-    }
-}`}
-                    </Code>
-                </Breakout>
-            </ContentBlock>
-        </Content>
-        <Content dark={true}>
-            <ContentBlock main={true} title="Artifacts">
-                <Lead>
-                    Sol compiler uses solidity standard JSON output format for the artifacts. This way, you can define
-                    which parts of the artifact you need.
-                </Lead>
-            </ContentBlock>
-
-            <ContentBlock title="Production">
-                <p>
-                    Sol compiler uses solidity standard JSON output format for the artifacts. This way, you can define
-                    which parts of the artifact you need.
-                </p>
-                <Breakout>
-                    <Code isLight={true} language="json" isEtc={true}>
-                        {`{
-    "compilerSettings": {
-        "outputSelection": {
-            "*": {
-                "*": ["abi"]
-            }
-        }
-    }
-}`}
-                    </Code>
-                </Breakout>
-                <Breakout>
-                    <Code isLight={true} language="json" isEtc={true}>
-                        {`{
-    "compilerOutput": {
-        "abi": [...],
-    },
-}`}
-                    </Code>
-                </Breakout>
-            </ContentBlock>
-            <ContentBlock title="Development">
-                <p>
-                    Sometimes you need to use some debuggers or other dev tools and you’ll need more info in the
-                    artifact.
-                </p>
-                <Breakout>
-                    <Code isLight={true} language="json" isEtc={true}>
-                        {`{
-    "compilerSettings": {
-        "outputSelection": {
-            "*": {
-                "*": [
-                    "abi",
-                    "evm.bytecode.object",
-                    "evm.bytecode.sourceMap",
-                    "evm.deployedBytecode.object",
-                    "evm.deployedBytecode.sourceMap"
-                ]
-            }
-        }
-    }
-}`}
-                    </Code>
-                </Breakout>
-
-                <Breakout>
-                    <Code isLight={true} language="json" isEtc={true}>
-                        {`{
-    "compilerOutput": {
-        "abi": [...],
-        "evm": {
-            "bytecode": {
-                "object": "0xdeadbeef",
-                "sourceMap": "26:480:..."
-            },
-            "deployedBytecode": {
-                "object": "0xdeadbeef",
-                "sourceMap": "26:480:0..."
-            }
-        }
-    }
-    "sources": {
-        "Migrations.sol": {
-            "id": 0
-        }
-    },
-}`}
-                    </Code>
-                </Breakout>
-            </ContentBlock>
-        </Content>
-    </Base>
-);
-
-const root = document.getElementById('app');
-
-if (root.hasChildNodes()) {
-    hydrate(<Compiler />, root);
-} else {
-    render(<Compiler />, root);
-}
diff --git a/packages/dev-tools-pages/ts/pages/Cov.tsx b/packages/dev-tools-pages/ts/pages/Cov.tsx
deleted file mode 100644
index 3ffa6077d..000000000
--- a/packages/dev-tools-pages/ts/pages/Cov.tsx
+++ /dev/null
@@ -1,149 +0,0 @@
-import * as React from 'react';
-import { hydrate, render } from 'react-dom';
-import * as Loadable from 'react-loadable';
-
-import { context } from 'ts/context/cov';
-
-import { Base } from 'ts/components/Base';
-import { Breakout } from 'ts/components/Breakout';
-import { Code } from 'ts/components/Code';
-import { Content } from 'ts/components/Content';
-import { ContentBlock } from 'ts/components/ContentBlock';
-import { Hero } from 'ts/components/Hero';
-import { InlineCode } from 'ts/components/InlineCode';
-import { Intro, IntroAside, IntroLead } from 'ts/components/Intro';
-import { List, ListItem } from 'ts/components/List';
-import { TabBlock, Tabs } from 'ts/components/Tabs';
-
-const Animation = Loadable({
-    loader: () => System.import(/* webpackChunkName: 'cov-animation' */ 'ts/components/Animations/Cov'),
-    loading: () => <div />,
-    delay: 1000,
-    render(loadable: { Animation: any }): React.ReactNode {
-        const Component = loadable.Animation;
-        return <Component />;
-    },
-});
-
-const Cov: React.StatelessComponent<{}> = () => (
-    <Base context={context}>
-        <Hero>
-            <Animation />
-        </Hero>
-        <Intro>
-            <IntroLead title="Measure your tests">
-                <p>
-                    When it comes to writing smart contracts, testing is one of the most important steps of the process.
-                    In order to quantify the robustness of your Solidity testing suite, you need to measure its code
-                    coverage.
-                </p>
-            </IntroLead>
-            <IntroAside>
-                <Code
-                    language="javascript"
-                    isDiff={true}
-                    gutterLength={2}
-                    gutter={[4, undefined, 4, 4, 4, undefined, 4, 2, 2, 2]}
-                >
-                    {`+function executeTransaction(uint transactionId)
-     public
-+    notExecuted(transactionId)
-+    fullyConfirmed(transactionId)
-+    pastTimeLock(transactionId)
-{
-+    Transaction storage tx = transactions[transactionId]
-+    tx.executed = true
-+    if (tx.destination.call.value(tx.value)(tx.data))
-+        Execution(transactionId)
-     else {
--        ExecutionFailure(transactionId)
--        tx.executed = false
-    }
-}`}
-                </Code>
-            </IntroAside>
-        </Intro>
-
-        <Content>
-            <ContentBlock main={true} title="Get started" />
-            <ContentBlock title="Prerequisites">
-                <List>
-                    <ListItem>
-                        Use <a href="#">ganache-cli</a> as a backing node.
-                    </ListItem>
-                    <ListItem>
-                        Understand and use <a href="#">web3-provider-engine</a>.
-                    </ListItem>
-                </List>
-            </ContentBlock>
-            <ContentBlock title="Installation">
-                <Breakout>
-                    <Code>npm install @0x/sol-cov --save</Code>
-                </Breakout>
-
-                <p>
-                    Sol-cov is a subprovider that needs to be prepended to your <a href="#">provider engine</a>.
-                    Depending on your project setup, you will need to use a specific ArtifactAdapter. Sol-cov ships with
-                    the <InlineCode>SolCompilerArtifactAdapter</InlineCode> for use with <a href="#">Sol-compiler</a>{' '}
-                    and <InlineCode>TruffleArtifactAdapter</InlineCode> for use with the{' '}
-                    <a href="#">Truffle framework</a>. You can also write your own and support any artifact format.
-                </p>
-
-                <Tabs>
-                    <TabBlock title="Sol-compiler">
-                        <Code language="javascript">
-                            {`import { SolCompilerArtifactAdapter } from '@0x/sol-trace';
-
-// Both artifactsDir and contractsDir are optional and will be fetched from compiler.json if not passed in
-const artifactAdapter = new SolCompilerArtifactAdapter(artifactsDir, contractsDir);`}
-                        </Code>
-                    </TabBlock>
-                    <TabBlock title="Truffle">
-                        <Code language="javascript">
-                            {`import { TruffleArtifactAdapter } from '@0x/sol-trace';
-
-const projectRoot = '.';
-const solcVersion = '0.4.24';
-const artifactAdapter = new TruffleArtifactAdapter(projectRoot, solcVersion);`}
-                        </Code>
-                    </TabBlock>
-                    <TabBlock title="Custom">
-                        <Code language="javascript">
-                            {`import { AbstractArtifactAdapter } from '@0x/sol-trace';
-
-class YourCustomArtifactsAdapter extends AbstractArtifactAdapter {...};
-const artifactAdapter = new YourCustomArtifactsAdapter(...);`}
-                        </Code>
-                    </TabBlock>
-                </Tabs>
-                <p>
-                    Now that we have an <InlineCode>artifactAdapter</InlineCode>, we can create a{' '}
-                    <InlineCode>RevertTraceSubprovider</InlineCode> and append it to our provider engine.
-                </p>
-
-                <Breakout>
-                    <Code language="javascript">
-                        {`import { ProviderEngine, RpcSubprovider } from 'web3-provider-engine';
-import { RevertTraceSubprovider } from '@0x/sol-cov';
-
-const defaultFromAddress = "..."; // Some ethereum address with test funds
-const revertTraceSubprovider = new RevertTraceSubprovider(artifactAdapter, defaultFromAddress);
-
-const providerEngine = new ProviderEngine();
-providerEngine.addProvider(revertTraceSubprovider);
-providerEngine.addProvider(new RpcSubprovider({rpcUrl: 'http://localhost:8545'}));
-providerEngine.start();`}
-                    </Code>
-                </Breakout>
-            </ContentBlock>
-        </Content>
-    </Base>
-);
-
-const root = document.getElementById('app');
-
-if (root.hasChildNodes()) {
-    hydrate(<Cov />, root);
-} else {
-    render(<Cov />, root);
-}
diff --git a/packages/dev-tools-pages/ts/pages/Profiler.tsx b/packages/dev-tools-pages/ts/pages/Profiler.tsx
deleted file mode 100644
index 4e833e0d0..000000000
--- a/packages/dev-tools-pages/ts/pages/Profiler.tsx
+++ /dev/null
@@ -1,146 +0,0 @@
-import * as React from 'react';
-import { hydrate, render } from 'react-dom';
-import * as Loadable from 'react-loadable';
-
-import { context } from 'ts/context/profiler';
-
-import { Base } from 'ts/components/Base';
-import { Breakout } from 'ts/components/Breakout';
-import { Code } from 'ts/components/Code';
-import { Content } from 'ts/components/Content';
-import { ContentBlock } from 'ts/components/ContentBlock';
-import { Hero } from 'ts/components/Hero';
-import { InlineCode } from 'ts/components/InlineCode';
-import { Intro, IntroAside, IntroLead } from 'ts/components/Intro';
-import { List, ListItem } from 'ts/components/List';
-import { TabBlock, Tabs } from 'ts/components/Tabs';
-
-const Animation = Loadable({
-    loader: () => System.import(/* webpackChunkName: 'profiler-animation' */ 'ts/components/Animations/Profiler'),
-    loading: () => <div />,
-    delay: 1000,
-    render(loadable: { Animation: any }): React.ReactNode {
-        const Component = loadable.Animation;
-        return <Component />;
-    },
-});
-
-const Profiler: React.StatelessComponent<{}> = () => (
-    <Base context={context}>
-        <Hero>
-            <Animation />
-        </Hero>
-        <Intro>
-            <IntroLead title="Outline gas usage">
-                <p>
-                    Sol-profiler gathers line-by-line gas usage for any transaction submitted through your provider.
-                    This will help you find unexpected inefficiencies in parts of your smart contract, and take a
-                    data-driven approach to optimizing it.
-                </p>
-            </IntroLead>
-            <IntroAside>
-                <Code
-                    language="javascript"
-                    isDiff={true}
-                    gutterLength={6}
-                    gutter={[15, 15, undefined, 21747, 20303, 1435]}
-                >
-                    {`+function() public payable {
-+    deposit();
-}
-+function deposit() public payabble {
-+    balanceOf[msg.sender] += msg.value;
-+    Deposit(msg.sender, msg.value);
-}
--function withdraw(uint wad) public {
--    require(balanceOf[msg.sender] >= wad);
--    balanceOf[msg.sender] -= wad;
--    msg.sender.transfer(wad);
--    Withdrawal(msg.sender, wad);
-}`}
-                </Code>
-            </IntroAside>
-        </Intro>
-        <Content>
-            <ContentBlock main={true} title="Get started" />
-            <ContentBlock title="Prerequisites">
-                <List>
-                    <ListItem>
-                        Use <a href="#">ganache-cli</a> as a backing node.
-                    </ListItem>
-                    <ListItem>
-                        Understand and use <a href="#">web3-provider-engine</a>.
-                    </ListItem>
-                </List>
-            </ContentBlock>
-            <ContentBlock title="Installation">
-                <Breakout>
-                    <Code>npm install @0x/sol-trace --save</Code>
-                </Breakout>
-
-                <p>
-                    Sol-trace is a subprovider that needs to be prepended to your <a href="#">provider engine</a>.
-                    Depending on your project setup, you will need to use a specific ArtifactAdapter. Sol-trace ships
-                    with the <InlineCode>SolCompilerArtifactAdapter</InlineCode> for use with{' '}
-                    <a href="#">Sol-compiler</a> and <InlineCode>TruffleArtifactAdapter</InlineCode> for use with the{' '}
-                    <a href="#">Truffle framework</a>. You can also write your own and support any artifact format.
-                </p>
-
-                <Tabs>
-                    <TabBlock title="Sol-compiler">
-                        <Code language="javascript">
-                            {`import { SolCompilerArtifactAdapter } from '@0x/sol-trace';
-
-// Both artifactsDir and contractsDir are optional and will be fetched from compiler.json if not passed in
-const artifactAdapter = new SolCompilerArtifactAdapter(artifactsDir, contractsDir);`}
-                        </Code>
-                    </TabBlock>
-                    <TabBlock title="Truffle">
-                        <Code language="javascript">
-                            {`import { TruffleArtifactAdapter } from '@0x/sol-trace';
-
-const projectRoot = '.';
-const solcVersion = '0.4.24';
-const artifactAdapter = new TruffleArtifactAdapter(projectRoot, solcVersion);`}
-                        </Code>
-                    </TabBlock>
-                    <TabBlock title="Custom">
-                        <Code language="javascript">
-                            {`import { AbstractArtifactAdapter } from '@0x/sol-trace';
-
-class YourCustomArtifactsAdapter extends AbstractArtifactAdapter {...};
-const artifactAdapter = new YourCustomArtifactsAdapter(...);`}
-                        </Code>
-                    </TabBlock>
-                </Tabs>
-                <p>
-                    Now that we have an <InlineCode>artifactAdapter</InlineCode>, we can create a{' '}
-                    <InlineCode>RevertTraceSubprovider</InlineCode> and append it to our provider engine.
-                </p>
-
-                <Breakout>
-                    <Code language="javascript">
-                        {`import { ProviderEngine, RpcSubprovider } from 'web3-provider-engine';
-import { RevertTraceSubprovider } from '@0x/sol-cov';
-
-const defaultFromAddress = "..."; // Some ethereum address with test funds
-const revertTraceSubprovider = new RevertTraceSubprovider(artifactAdapter, defaultFromAddress);
-
-const providerEngine = new ProviderEngine();
-providerEngine.addProvider(revertTraceSubprovider);
-providerEngine.addProvider(new RpcSubprovider({rpcUrl: 'http://localhost:8545'}));
-providerEngine.start();`}
-                    </Code>
-                </Breakout>
-            </ContentBlock>
-        </Content>
-    </Base>
-);
-
-const root = document.getElementById('app');
-
-if (root.hasChildNodes()) {
-    hydrate(<Profiler />, root);
-} else {
-    render(<Profiler />, root);
-}
diff --git a/packages/dev-tools-pages/ts/pages/Trace.tsx b/packages/dev-tools-pages/ts/pages/Trace.tsx
deleted file mode 100644
index 23cbe98be..000000000
--- a/packages/dev-tools-pages/ts/pages/Trace.tsx
+++ /dev/null
@@ -1,116 +0,0 @@
-import * as React from 'react';
-import { hydrate, render } from 'react-dom';
-import * as Loadable from 'react-loadable';
-
-import { context } from 'ts/context/trace';
-
-import { Base } from 'ts/components/Base';
-import { Breakout } from 'ts/components/Breakout';
-import { Code } from 'ts/components/Code';
-import { Content } from 'ts/components/Content';
-import { ContentBlock } from 'ts/components/ContentBlock';
-import { Hero } from 'ts/components/Hero';
-import { InlineCode } from 'ts/components/InlineCode';
-import { List, ListItem } from 'ts/components/List';
-import { TabBlock, Tabs } from 'ts/components/Tabs';
-import { Trace as TraceComponent } from 'ts/components/Trace';
-
-const Animation = Loadable({
-    loader: () => System.import(/* webpackChunkName: 'trace-animation' */ 'ts/components/Animations/Trace'),
-    loading: () => <div />,
-    delay: 1000,
-    render(loadable: { Animation: any }): React.ReactNode {
-        const Component = loadable.Animation;
-        return <Component />;
-    },
-});
-
-const Trace: React.StatelessComponent<{}> = () => (
-    <Base context={context}>
-        <Hero>
-            <Animation />
-        </Hero>
-        <TraceComponent />
-        <Content>
-            <ContentBlock main={true} title="Get started" />
-            <ContentBlock title="Prerequisites">
-                <List>
-                    <ListItem>
-                        Use <a href="#">ganache-cli</a> as a backing node.
-                    </ListItem>
-                    <ListItem>
-                        Understand and use <a href="#">web3-provider-engine</a>.
-                    </ListItem>
-                </List>
-            </ContentBlock>
-            <ContentBlock title="Installation">
-                <Breakout>
-                    <Code>npm install @0x/sol-trace --save</Code>
-                </Breakout>
-
-                <p>
-                    Sol-trace is a subprovider that needs to be prepended to your <a href="#">provider engine</a>.
-                    Depending on your project setup, you will need to use a specific ArtifactAdapter. Sol-trace ships
-                    with the <InlineCode>SolCompilerArtifactAdapter</InlineCode> for use with{' '}
-                    <a href="#">Sol-compiler</a> and <InlineCode>TruffleArtifactAdapter</InlineCode> for use with the{' '}
-                    <a href="#">Truffle framework</a>. You can also write your own and support any artifact format.
-                </p>
-
-                <Tabs>
-                    <TabBlock title="Sol-compiler">
-                        <Code language="javascript">
-                            {`import { SolCompilerArtifactAdapter } from '@0x/sol-trace';
-
-// Both artifactsDir and contractsDir are optional and will be fetched from compiler.json if not passed in
-const artifactAdapter = new SolCompilerArtifactAdapter(artifactsDir, contractsDir);`}
-                        </Code>
-                    </TabBlock>
-                    <TabBlock title="Truffle">
-                        <Code language="javascript">
-                            {`import { TruffleArtifactAdapter } from '@0x/sol-trace';
-
-const projectRoot = '.';
-const solcVersion = '0.4.24';
-const artifactAdapter = new TruffleArtifactAdapter(projectRoot, solcVersion);`}
-                        </Code>
-                    </TabBlock>
-                    <TabBlock title="Custom">
-                        <Code language="javascript">
-                            {`import { AbstractArtifactAdapter } from '@0x/sol-trace';
-
-class YourCustomArtifactsAdapter extends AbstractArtifactAdapter {...};
-const artifactAdapter = new YourCustomArtifactsAdapter(...);`}
-                        </Code>
-                    </TabBlock>
-                </Tabs>
-                <p>
-                    Now that we have an <InlineCode>artifactAdapter</InlineCode>, we can create a{' '}
-                    <InlineCode>RevertTraceSubprovider</InlineCode> and append it to our provider engine.
-                </p>
-
-                <Breakout>
-                    <Code language="javascript">
-                        {`import { ProviderEngine, RpcSubprovider } from 'web3-provider-engine';
-import { RevertTraceSubprovider } from '@0x/sol-cov';
-
-const defaultFromAddress = "..."; // Some ethereum address with test funds
-const revertTraceSubprovider = new RevertTraceSubprovider(artifactAdapter, defaultFromAddress);
-
-const providerEngine = new ProviderEngine();
-providerEngine.addProvider(revertTraceSubprovider);
-providerEngine.addProvider(new RpcSubprovider({rpcUrl: 'http://localhost:8545'}));
-providerEngine.start();`}
-                    </Code>
-                </Breakout>
-            </ContentBlock>
-        </Content>
-    </Base>
-);
-
-const root = document.getElementById('app');
-
-if (root.hasChildNodes()) {
-    hydrate(<Trace />, root);
-} else {
-    render(<Trace />, root);
-}
diff --git a/packages/dev-tools-pages/ts/pages/compiler.tsx b/packages/dev-tools-pages/ts/pages/compiler.tsx
new file mode 100644
index 000000000..ee533d566
--- /dev/null
+++ b/packages/dev-tools-pages/ts/pages/compiler.tsx
@@ -0,0 +1,170 @@
+import * as React from 'react';
+import { hydrate, render } from 'react-dom';
+import * as Loadable from 'react-loadable';
+
+import { context } from 'ts/context/compiler';
+
+import { Base } from 'ts/components/Base';
+import { Breakout } from 'ts/components/Breakout';
+import { Code } from 'ts/components/Code';
+import { Compiler as CompilerComponent } from 'ts/components/Compiler';
+import { Content } from 'ts/components/Content';
+import { ContentBlock } from 'ts/components/ContentBlock';
+import { Hero } from 'ts/components/Hero';
+import { InlineCode } from 'ts/components/InlineCode';
+import { Lead } from 'ts/components/Typography';
+
+const Animation = Loadable({
+    loader: () => System.import(/* webpackChunkName: 'compiler-animation' */ 'ts/components/Animations/Compiler'),
+    loading: () => <div />,
+    delay: 1000,
+    render(loadable: { Animation: any }): React.ReactNode {
+        const Component = loadable.Animation;
+        return <Component />;
+    },
+});
+
+const Compiler: React.StatelessComponent<{}> = () => (
+    <Base context={context}>
+        <Hero>
+            <Animation />
+        </Hero>
+        <CompilerComponent />
+        <Content>
+            <ContentBlock main={true} title="Get started" />
+            <ContentBlock title="Install">
+                <Breakout>
+                    <Code canCopy={true}>npm install @0x/sol-compiler --g</Code>
+                </Breakout>
+            </ContentBlock>
+
+            <ContentBlock title="Run">
+                <Breakout>
+                    <Code>cd /your_project_dir && sol-compiler</Code>
+                </Breakout>
+            </ContentBlock>
+
+            <ContentBlock title="Configure">
+                <p>
+                    Configure via a <InlineCode>compiler.json</InlineCode> file.
+                </p>
+                <Breakout>
+                    <Code>mkdir compiler.json</Code>
+                </Breakout>
+                <p>Example of settings:</p>
+                <Breakout>
+                    <Code language="json">
+                        {`{
+    "contractsDir": "contracts",
+    "artifactsDir": "artifacts",
+    "contracts": "*",
+    "compilerSettings": {
+        "optimizer": { "enabled": false },
+        "outputSelection": {
+            "*": {
+                "*": ["abi", "evm.bytecode.object"]
+            }
+        }
+    }
+}`}
+                    </Code>
+                </Breakout>
+            </ContentBlock>
+        </Content>
+        <Content dark={true}>
+            <ContentBlock main={true} title="Artifacts">
+                <Lead>
+                    Sol compiler uses solidity standard JSON output format for the artifacts. This way, you can define
+                    which parts of the artifact you need.
+                </Lead>
+            </ContentBlock>
+
+            <ContentBlock title="Production">
+                <p>
+                    Sol compiler uses solidity standard JSON output format for the artifacts. This way, you can define
+                    which parts of the artifact you need.
+                </p>
+                <Breakout>
+                    <Code isLight={true} language="json" isEtc={true}>
+                        {`{
+    "compilerSettings": {
+        "outputSelection": {
+            "*": {
+                "*": ["abi"]
+            }
+        }
+    }
+}`}
+                    </Code>
+                </Breakout>
+                <Breakout>
+                    <Code isLight={true} language="json" isEtc={true}>
+                        {`{
+    "compilerOutput": {
+        "abi": [...],
+    },
+}`}
+                    </Code>
+                </Breakout>
+            </ContentBlock>
+            <ContentBlock title="Development">
+                <p>
+                    Sometimes you need to use some debuggers or other dev tools and you’ll need more info in the
+                    artifact.
+                </p>
+                <Breakout>
+                    <Code isLight={true} language="json" isEtc={true}>
+                        {`{
+    "compilerSettings": {
+        "outputSelection": {
+            "*": {
+                "*": [
+                    "abi",
+                    "evm.bytecode.object",
+                    "evm.bytecode.sourceMap",
+                    "evm.deployedBytecode.object",
+                    "evm.deployedBytecode.sourceMap"
+                ]
+            }
+        }
+    }
+}`}
+                    </Code>
+                </Breakout>
+
+                <Breakout>
+                    <Code isLight={true} language="json" isEtc={true}>
+                        {`{
+    "compilerOutput": {
+        "abi": [...],
+        "evm": {
+            "bytecode": {
+                "object": "0xdeadbeef",
+                "sourceMap": "26:480:..."
+            },
+            "deployedBytecode": {
+                "object": "0xdeadbeef",
+                "sourceMap": "26:480:0..."
+            }
+        }
+    }
+    "sources": {
+        "Migrations.sol": {
+            "id": 0
+        }
+    },
+}`}
+                    </Code>
+                </Breakout>
+            </ContentBlock>
+        </Content>
+    </Base>
+);
+
+const root = document.getElementById('app');
+
+if (root.hasChildNodes()) {
+    hydrate(<Compiler />, root);
+} else {
+    render(<Compiler />, root);
+}
diff --git a/packages/dev-tools-pages/ts/pages/cov.tsx b/packages/dev-tools-pages/ts/pages/cov.tsx
new file mode 100644
index 000000000..3ffa6077d
--- /dev/null
+++ b/packages/dev-tools-pages/ts/pages/cov.tsx
@@ -0,0 +1,149 @@
+import * as React from 'react';
+import { hydrate, render } from 'react-dom';
+import * as Loadable from 'react-loadable';
+
+import { context } from 'ts/context/cov';
+
+import { Base } from 'ts/components/Base';
+import { Breakout } from 'ts/components/Breakout';
+import { Code } from 'ts/components/Code';
+import { Content } from 'ts/components/Content';
+import { ContentBlock } from 'ts/components/ContentBlock';
+import { Hero } from 'ts/components/Hero';
+import { InlineCode } from 'ts/components/InlineCode';
+import { Intro, IntroAside, IntroLead } from 'ts/components/Intro';
+import { List, ListItem } from 'ts/components/List';
+import { TabBlock, Tabs } from 'ts/components/Tabs';
+
+const Animation = Loadable({
+    loader: () => System.import(/* webpackChunkName: 'cov-animation' */ 'ts/components/Animations/Cov'),
+    loading: () => <div />,
+    delay: 1000,
+    render(loadable: { Animation: any }): React.ReactNode {
+        const Component = loadable.Animation;
+        return <Component />;
+    },
+});
+
+const Cov: React.StatelessComponent<{}> = () => (
+    <Base context={context}>
+        <Hero>
+            <Animation />
+        </Hero>
+        <Intro>
+            <IntroLead title="Measure your tests">
+                <p>
+                    When it comes to writing smart contracts, testing is one of the most important steps of the process.
+                    In order to quantify the robustness of your Solidity testing suite, you need to measure its code
+                    coverage.
+                </p>
+            </IntroLead>
+            <IntroAside>
+                <Code
+                    language="javascript"
+                    isDiff={true}
+                    gutterLength={2}
+                    gutter={[4, undefined, 4, 4, 4, undefined, 4, 2, 2, 2]}
+                >
+                    {`+function executeTransaction(uint transactionId)
+     public
++    notExecuted(transactionId)
++    fullyConfirmed(transactionId)
++    pastTimeLock(transactionId)
+{
++    Transaction storage tx = transactions[transactionId]
++    tx.executed = true
++    if (tx.destination.call.value(tx.value)(tx.data))
++        Execution(transactionId)
+     else {
+-        ExecutionFailure(transactionId)
+-        tx.executed = false
+    }
+}`}
+                </Code>
+            </IntroAside>
+        </Intro>
+
+        <Content>
+            <ContentBlock main={true} title="Get started" />
+            <ContentBlock title="Prerequisites">
+                <List>
+                    <ListItem>
+                        Use <a href="#">ganache-cli</a> as a backing node.
+                    </ListItem>
+                    <ListItem>
+                        Understand and use <a href="#">web3-provider-engine</a>.
+                    </ListItem>
+                </List>
+            </ContentBlock>
+            <ContentBlock title="Installation">
+                <Breakout>
+                    <Code>npm install @0x/sol-cov --save</Code>
+                </Breakout>
+
+                <p>
+                    Sol-cov is a subprovider that needs to be prepended to your <a href="#">provider engine</a>.
+                    Depending on your project setup, you will need to use a specific ArtifactAdapter. Sol-cov ships with
+                    the <InlineCode>SolCompilerArtifactAdapter</InlineCode> for use with <a href="#">Sol-compiler</a>{' '}
+                    and <InlineCode>TruffleArtifactAdapter</InlineCode> for use with the{' '}
+                    <a href="#">Truffle framework</a>. You can also write your own and support any artifact format.
+                </p>
+
+                <Tabs>
+                    <TabBlock title="Sol-compiler">
+                        <Code language="javascript">
+                            {`import { SolCompilerArtifactAdapter } from '@0x/sol-trace';
+
+// Both artifactsDir and contractsDir are optional and will be fetched from compiler.json if not passed in
+const artifactAdapter = new SolCompilerArtifactAdapter(artifactsDir, contractsDir);`}
+                        </Code>
+                    </TabBlock>
+                    <TabBlock title="Truffle">
+                        <Code language="javascript">
+                            {`import { TruffleArtifactAdapter } from '@0x/sol-trace';
+
+const projectRoot = '.';
+const solcVersion = '0.4.24';
+const artifactAdapter = new TruffleArtifactAdapter(projectRoot, solcVersion);`}
+                        </Code>
+                    </TabBlock>
+                    <TabBlock title="Custom">
+                        <Code language="javascript">
+                            {`import { AbstractArtifactAdapter } from '@0x/sol-trace';
+
+class YourCustomArtifactsAdapter extends AbstractArtifactAdapter {...};
+const artifactAdapter = new YourCustomArtifactsAdapter(...);`}
+                        </Code>
+                    </TabBlock>
+                </Tabs>
+                <p>
+                    Now that we have an <InlineCode>artifactAdapter</InlineCode>, we can create a{' '}
+                    <InlineCode>RevertTraceSubprovider</InlineCode> and append it to our provider engine.
+                </p>
+
+                <Breakout>
+                    <Code language="javascript">
+                        {`import { ProviderEngine, RpcSubprovider } from 'web3-provider-engine';
+import { RevertTraceSubprovider } from '@0x/sol-cov';
+
+const defaultFromAddress = "..."; // Some ethereum address with test funds
+const revertTraceSubprovider = new RevertTraceSubprovider(artifactAdapter, defaultFromAddress);
+
+const providerEngine = new ProviderEngine();
+providerEngine.addProvider(revertTraceSubprovider);
+providerEngine.addProvider(new RpcSubprovider({rpcUrl: 'http://localhost:8545'}));
+providerEngine.start();`}
+                    </Code>
+                </Breakout>
+            </ContentBlock>
+        </Content>
+    </Base>
+);
+
+const root = document.getElementById('app');
+
+if (root.hasChildNodes()) {
+    hydrate(<Cov />, root);
+} else {
+    render(<Cov />, root);
+}
diff --git a/packages/dev-tools-pages/ts/pages/profiler.tsx b/packages/dev-tools-pages/ts/pages/profiler.tsx
new file mode 100644
index 000000000..4e833e0d0
--- /dev/null
+++ b/packages/dev-tools-pages/ts/pages/profiler.tsx
@@ -0,0 +1,146 @@
+import * as React from 'react';
+import { hydrate, render } from 'react-dom';
+import * as Loadable from 'react-loadable';
+
+import { context } from 'ts/context/profiler';
+
+import { Base } from 'ts/components/Base';
+import { Breakout } from 'ts/components/Breakout';
+import { Code } from 'ts/components/Code';
+import { Content } from 'ts/components/Content';
+import { ContentBlock } from 'ts/components/ContentBlock';
+import { Hero } from 'ts/components/Hero';
+import { InlineCode } from 'ts/components/InlineCode';
+import { Intro, IntroAside, IntroLead } from 'ts/components/Intro';
+import { List, ListItem } from 'ts/components/List';
+import { TabBlock, Tabs } from 'ts/components/Tabs';
+
+const Animation = Loadable({
+    loader: () => System.import(/* webpackChunkName: 'profiler-animation' */ 'ts/components/Animations/Profiler'),
+    loading: () => <div />,
+    delay: 1000,
+    render(loadable: { Animation: any }): React.ReactNode {
+        const Component = loadable.Animation;
+        return <Component />;
+    },
+});
+
+const Profiler: React.StatelessComponent<{}> = () => (
+    <Base context={context}>
+        <Hero>
+            <Animation />
+        </Hero>
+        <Intro>
+            <IntroLead title="Outline gas usage">
+                <p>
+                    Sol-profiler gathers line-by-line gas usage for any transaction submitted through your provider.
+                    This will help you find unexpected inefficiencies in parts of your smart contract, and take a
+                    data-driven approach to optimizing it.
+                </p>
+            </IntroLead>
+            <IntroAside>
+                <Code
+                    language="javascript"
+                    isDiff={true}
+                    gutterLength={6}
+                    gutter={[15, 15, undefined, 21747, 20303, 1435]}
+                >
+                    {`+function() public payable {
++    deposit();
+}
++function deposit() public payabble {
++    balanceOf[msg.sender] += msg.value;
++    Deposit(msg.sender, msg.value);
+}
+-function withdraw(uint wad) public {
+-    require(balanceOf[msg.sender] >= wad);
+-    balanceOf[msg.sender] -= wad;
+-    msg.sender.transfer(wad);
+-    Withdrawal(msg.sender, wad);
+}`}
+                </Code>
+            </IntroAside>
+        </Intro>
+        <Content>
+            <ContentBlock main={true} title="Get started" />
+            <ContentBlock title="Prerequisites">
+                <List>
+                    <ListItem>
+                        Use <a href="#">ganache-cli</a> as a backing node.
+                    </ListItem>
+                    <ListItem>
+                        Understand and use <a href="#">web3-provider-engine</a>.
+                    </ListItem>
+                </List>
+            </ContentBlock>
+            <ContentBlock title="Installation">
+                <Breakout>
+                    <Code>npm install @0x/sol-trace --save</Code>
+                </Breakout>
+
+                <p>
+                    Sol-trace is a subprovider that needs to be prepended to your <a href="#">provider engine</a>.
+                    Depending on your project setup, you will need to use a specific ArtifactAdapter. Sol-trace ships
+                    with the <InlineCode>SolCompilerArtifactAdapter</InlineCode> for use with{' '}
+                    <a href="#">Sol-compiler</a> and <InlineCode>TruffleArtifactAdapter</InlineCode> for use with the{' '}
+                    <a href="#">Truffle framework</a>. You can also write your own and support any artifact format.
+                </p>
+
+                <Tabs>
+                    <TabBlock title="Sol-compiler">
+                        <Code language="javascript">
+                            {`import { SolCompilerArtifactAdapter } from '@0x/sol-trace';
+
+// Both artifactsDir and contractsDir are optional and will be fetched from compiler.json if not passed in
+const artifactAdapter = new SolCompilerArtifactAdapter(artifactsDir, contractsDir);`}
+                        </Code>
+                    </TabBlock>
+                    <TabBlock title="Truffle">
+                        <Code language="javascript">
+                            {`import { TruffleArtifactAdapter } from '@0x/sol-trace';
+
+const projectRoot = '.';
+const solcVersion = '0.4.24';
+const artifactAdapter = new TruffleArtifactAdapter(projectRoot, solcVersion);`}
+                        </Code>
+                    </TabBlock>
+                    <TabBlock title="Custom">
+                        <Code language="javascript">
+                            {`import { AbstractArtifactAdapter } from '@0x/sol-trace';
+
+class YourCustomArtifactsAdapter extends AbstractArtifactAdapter {...};
+const artifactAdapter = new YourCustomArtifactsAdapter(...);`}
+                        </Code>
+                    </TabBlock>
+                </Tabs>
+                <p>
+                    Now that we have an <InlineCode>artifactAdapter</InlineCode>, we can create a{' '}
+                    <InlineCode>RevertTraceSubprovider</InlineCode> and append it to our provider engine.
+                </p>
+
+                <Breakout>
+                    <Code language="javascript">
+                        {`import { ProviderEngine, RpcSubprovider } from 'web3-provider-engine';
+import { RevertTraceSubprovider } from '@0x/sol-cov';
+
+const defaultFromAddress = "..."; // Some ethereum address with test funds
+const revertTraceSubprovider = new RevertTraceSubprovider(artifactAdapter, defaultFromAddress);
+
+const providerEngine = new ProviderEngine();
+providerEngine.addProvider(revertTraceSubprovider);
+providerEngine.addProvider(new RpcSubprovider({rpcUrl: 'http://localhost:8545'}));
+providerEngine.start();`}
+                    </Code>
+                </Breakout>
+            </ContentBlock>
+        </Content>
+    </Base>
+);
+
+const root = document.getElementById('app');
+
+if (root.hasChildNodes()) {
+    hydrate(<Profiler />, root);
+} else {
+    render(<Profiler />, root);
+}
diff --git a/packages/dev-tools-pages/ts/pages/trace.tsx b/packages/dev-tools-pages/ts/pages/trace.tsx
new file mode 100644
index 000000000..23cbe98be
--- /dev/null
+++ b/packages/dev-tools-pages/ts/pages/trace.tsx
@@ -0,0 +1,116 @@
+import * as React from 'react';
+import { hydrate, render } from 'react-dom';
+import * as Loadable from 'react-loadable';
+
+import { context } from 'ts/context/trace';
+
+import { Base } from 'ts/components/Base';
+import { Breakout } from 'ts/components/Breakout';
+import { Code } from 'ts/components/Code';
+import { Content } from 'ts/components/Content';
+import { ContentBlock } from 'ts/components/ContentBlock';
+import { Hero } from 'ts/components/Hero';
+import { InlineCode } from 'ts/components/InlineCode';
+import { List, ListItem } from 'ts/components/List';
+import { TabBlock, Tabs } from 'ts/components/Tabs';
+import { Trace as TraceComponent } from 'ts/components/Trace';
+
+const Animation = Loadable({
+    loader: () => System.import(/* webpackChunkName: 'trace-animation' */ 'ts/components/Animations/Trace'),
+    loading: () => <div />,
+    delay: 1000,
+    render(loadable: { Animation: any }): React.ReactNode {
+        const Component = loadable.Animation;
+        return <Component />;
+    },
+});
+
+const Trace: React.StatelessComponent<{}> = () => (
+    <Base context={context}>
+        <Hero>
+            <Animation />
+        </Hero>
+        <TraceComponent />
+        <Content>
+            <ContentBlock main={true} title="Get started" />
+            <ContentBlock title="Prerequisites">
+                <List>
+                    <ListItem>
+                        Use <a href="#">ganache-cli</a> as a backing node.
+                    </ListItem>
+                    <ListItem>
+                        Understand and use <a href="#">web3-provider-engine</a>.
+                    </ListItem>
+                </List>
+            </ContentBlock>
+            <ContentBlock title="Installation">
+                <Breakout>
+                    <Code>npm install @0x/sol-trace --save</Code>
+                </Breakout>
+
+                <p>
+                    Sol-trace is a subprovider that needs to be prepended to your <a href="#">provider engine</a>.
+                    Depending on your project setup, you will need to use a specific ArtifactAdapter. Sol-trace ships
+                    with the <InlineCode>SolCompilerArtifactAdapter</InlineCode> for use with{' '}
+                    <a href="#">Sol-compiler</a> and <InlineCode>TruffleArtifactAdapter</InlineCode> for use with the{' '}
+                    <a href="#">Truffle framework</a>. You can also write your own and support any artifact format.
+                </p>
+
+                <Tabs>
+                    <TabBlock title="Sol-compiler">
+                        <Code language="javascript">
+                            {`import { SolCompilerArtifactAdapter } from '@0x/sol-trace';
+
+// Both artifactsDir and contractsDir are optional and will be fetched from compiler.json if not passed in
+const artifactAdapter = new SolCompilerArtifactAdapter(artifactsDir, contractsDir);`}
+                        </Code>
+                    </TabBlock>
+                    <TabBlock title="Truffle">
+                        <Code language="javascript">
+                            {`import { TruffleArtifactAdapter } from '@0x/sol-trace';
+
+const projectRoot = '.';
+const solcVersion = '0.4.24';
+const artifactAdapter = new TruffleArtifactAdapter(projectRoot, solcVersion);`}
+                        </Code>
+                    </TabBlock>
+                    <TabBlock title="Custom">
+                        <Code language="javascript">
+                            {`import { AbstractArtifactAdapter } from '@0x/sol-trace';
+
+class YourCustomArtifactsAdapter extends AbstractArtifactAdapter {...};
+const artifactAdapter = new YourCustomArtifactsAdapter(...);`}
+                        </Code>
+                    </TabBlock>
+                </Tabs>
+                <p>
+                    Now that we have an <InlineCode>artifactAdapter</InlineCode>, we can create a{' '}
+                    <InlineCode>RevertTraceSubprovider</InlineCode> and append it to our provider engine.
+                </p>
+
+                <Breakout>
+                    <Code language="javascript">
+                        {`import { ProviderEngine, RpcSubprovider } from 'web3-provider-engine';
+import { RevertTraceSubprovider } from '@0x/sol-cov';
+
+const defaultFromAddress = "..."; // Some ethereum address with test funds
+const revertTraceSubprovider = new RevertTraceSubprovider(artifactAdapter, defaultFromAddress);
+
+const providerEngine = new ProviderEngine();
+providerEngine.addProvider(revertTraceSubprovider);
+providerEngine.addProvider(new RpcSubprovider({rpcUrl: 'http://localhost:8545'}));
+providerEngine.start();`}
+                    </Code>
+                </Breakout>
+            </ContentBlock>
+        </Content>
+    </Base>
+);
+
+const root = document.getElementById('app');
+
+if (root.hasChildNodes()) {
+    hydrate(<Trace />, root);
+} else {
+    render(<Trace />, root);
+}
-- 
cgit v1.2.3


From 117726c6d80dd20e8b9409cec23b0c062690b0df Mon Sep 17 00:00:00 2001
From: August Skare <post@augustskare.no>
Date: Mon, 19 Nov 2018 17:35:22 +0100
Subject: fix imports after renaming

---
 packages/dev-tools-pages/ts/components/base.tsx    |  4 ++--
 packages/dev-tools-pages/ts/components/code.tsx    |  2 +-
 .../dev-tools-pages/ts/components/compiler.tsx     |  6 +++---
 .../ts/components/content-block.tsx                |  2 +-
 packages/dev-tools-pages/ts/components/content.tsx |  2 +-
 packages/dev-tools-pages/ts/components/footer.tsx  |  4 ++--
 packages/dev-tools-pages/ts/components/header.tsx  |  4 ++--
 packages/dev-tools-pages/ts/components/hero.tsx    |  4 ++--
 packages/dev-tools-pages/ts/components/intro.tsx   |  6 +++---
 packages/dev-tools-pages/ts/components/tabs.tsx    |  2 +-
 packages/dev-tools-pages/ts/components/trace.tsx   |  8 ++++----
 packages/dev-tools-pages/ts/pages/compiler.tsx     | 20 ++++++++++----------
 packages/dev-tools-pages/ts/pages/cov.tsx          | 22 +++++++++++-----------
 packages/dev-tools-pages/ts/pages/profiler.tsx     | 22 +++++++++++-----------
 packages/dev-tools-pages/ts/pages/trace.tsx        | 22 +++++++++++-----------
 15 files changed, 65 insertions(+), 65 deletions(-)

(limited to 'packages/dev-tools-pages/ts')

diff --git a/packages/dev-tools-pages/ts/components/base.tsx b/packages/dev-tools-pages/ts/components/base.tsx
index 8e608ecdd..4eb4e3ae3 100644
--- a/packages/dev-tools-pages/ts/components/base.tsx
+++ b/packages/dev-tools-pages/ts/components/base.tsx
@@ -1,8 +1,8 @@
 import * as React from 'react';
 import { ThemeProvider } from 'styled-components';
 
-import { Footer } from 'ts/components/Footer';
-import { Header } from 'ts/components/Header';
+import { Footer } from 'ts/components/footer';
+import { Header } from 'ts/components/header';
 import { ThemeContext } from 'ts/context';
 import { GlobalStyles } from 'ts/globalStyles';
 
diff --git a/packages/dev-tools-pages/ts/components/code.tsx b/packages/dev-tools-pages/ts/components/code.tsx
index 8415f1179..9123192d9 100644
--- a/packages/dev-tools-pages/ts/components/code.tsx
+++ b/packages/dev-tools-pages/ts/components/code.tsx
@@ -3,7 +3,7 @@ import styled from 'styled-components';
 
 import { colors } from 'ts/variables';
 
-import { Button as BaseButton } from './Button';
+import { Button as BaseButton } from './button';
 
 const isTouch = Boolean(
     'ontouchstart' in window ||
diff --git a/packages/dev-tools-pages/ts/components/compiler.tsx b/packages/dev-tools-pages/ts/components/compiler.tsx
index f16365fd0..c535795aa 100644
--- a/packages/dev-tools-pages/ts/components/compiler.tsx
+++ b/packages/dev-tools-pages/ts/components/compiler.tsx
@@ -3,9 +3,9 @@ import styled from 'styled-components';
 
 import { colors, media } from 'ts/variables';
 
-import { Breakout } from './Breakout';
-import { Container } from './Container';
-import { InlineCode } from './InlineCode';
+import { Breakout } from './breakout';
+import { Container } from './container';
+import { InlineCode } from './inline-code';
 
 const Cards = styled.dl`
     column-count: 3;
diff --git a/packages/dev-tools-pages/ts/components/content-block.tsx b/packages/dev-tools-pages/ts/components/content-block.tsx
index 2818858dc..a8c208163 100644
--- a/packages/dev-tools-pages/ts/components/content-block.tsx
+++ b/packages/dev-tools-pages/ts/components/content-block.tsx
@@ -4,7 +4,7 @@ import styled from 'styled-components';
 import { ContextInterface } from 'ts/context';
 import { media } from 'ts/variables';
 
-import { Alpha, Beta } from './Typography';
+import { Alpha, Beta } from './typography';
 
 const Base = styled.div`
     display: flex;
diff --git a/packages/dev-tools-pages/ts/components/content.tsx b/packages/dev-tools-pages/ts/components/content.tsx
index 55550441c..f74e09af7 100644
--- a/packages/dev-tools-pages/ts/components/content.tsx
+++ b/packages/dev-tools-pages/ts/components/content.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import styled from 'styled-components';
 
-import { Container } from './Container';
+import { Container } from './container';
 
 const StyledMain =
     styled.div <
diff --git a/packages/dev-tools-pages/ts/components/footer.tsx b/packages/dev-tools-pages/ts/components/footer.tsx
index a278fdfee..110d21443 100644
--- a/packages/dev-tools-pages/ts/components/footer.tsx
+++ b/packages/dev-tools-pages/ts/components/footer.tsx
@@ -8,8 +8,8 @@ import { context as trace } from 'ts/context/trace';
 import MainIcon from 'ts/icons/logos/0x.svg';
 import { media } from 'ts/variables';
 
-import { Container } from './Container';
-import { Alpha, Beta } from './Typography';
+import { Container } from './container';
+import { Alpha, Beta } from './typography';
 
 const tools = [trace, cov, compiler, profiler];
 
diff --git a/packages/dev-tools-pages/ts/components/header.tsx b/packages/dev-tools-pages/ts/components/header.tsx
index 94714c0af..2787692c1 100644
--- a/packages/dev-tools-pages/ts/components/header.tsx
+++ b/packages/dev-tools-pages/ts/components/header.tsx
@@ -4,8 +4,8 @@ import styled from 'styled-components';
 import { ContextInterface, ThemeContext } from 'ts/context';
 import { media } from 'ts/variables';
 
-import { Container } from './Container';
-import { Small } from './Typography';
+import { Container } from './container';
+import { Small } from './typography';
 
 const Header: React.StatelessComponent<{}> = () => (
     <ThemeContext.Consumer>
diff --git a/packages/dev-tools-pages/ts/components/hero.tsx b/packages/dev-tools-pages/ts/components/hero.tsx
index 8b6d6ade3..cdcad6982 100644
--- a/packages/dev-tools-pages/ts/components/hero.tsx
+++ b/packages/dev-tools-pages/ts/components/hero.tsx
@@ -4,8 +4,8 @@ import styled from 'styled-components';
 import { ContextInterface, ThemeContext } from 'ts/context';
 import { media } from 'ts/variables';
 
-import { Button } from './Button';
-import { Beta } from './Typography';
+import { Button } from './button';
+import { Beta } from './typography';
 
 const Hero: React.StatelessComponent<ContextInterface> = ({ children }) => (
     <ThemeContext.Consumer>
diff --git a/packages/dev-tools-pages/ts/components/intro.tsx b/packages/dev-tools-pages/ts/components/intro.tsx
index 54b14f237..a0e76ab17 100644
--- a/packages/dev-tools-pages/ts/components/intro.tsx
+++ b/packages/dev-tools-pages/ts/components/intro.tsx
@@ -3,9 +3,9 @@ import styled from 'styled-components';
 
 import { colors, media } from 'ts/variables';
 
-import { Breakout } from './Breakout';
-import { Container } from './Container';
-import { Alpha, Lead } from './Typography';
+import { Breakout } from './breakout';
+import { Container } from './container';
+import { Alpha, Lead } from './typography';
 
 const Main = styled.div`
     background-color: ${colors.lightGray};
diff --git a/packages/dev-tools-pages/ts/components/tabs.tsx b/packages/dev-tools-pages/ts/components/tabs.tsx
index 0a62fa334..1d26f2777 100644
--- a/packages/dev-tools-pages/ts/components/tabs.tsx
+++ b/packages/dev-tools-pages/ts/components/tabs.tsx
@@ -4,7 +4,7 @@ import styled from 'styled-components';
 
 import { colors } from 'ts/variables';
 
-import { Breakout } from './Breakout';
+import { Breakout } from './breakout';
 
 const StyledTabList = styled(TabList)`
     text-transform: uppercase;
diff --git a/packages/dev-tools-pages/ts/components/trace.tsx b/packages/dev-tools-pages/ts/components/trace.tsx
index 0cee4c1a2..108154648 100644
--- a/packages/dev-tools-pages/ts/components/trace.tsx
+++ b/packages/dev-tools-pages/ts/components/trace.tsx
@@ -8,10 +8,10 @@ import TimeConsuming from 'ts/icons/time-consuming.svg';
 import TimeSaving from 'ts/icons/time-saving.svg';
 import { colors, media } from 'ts/variables';
 
-import { Breakout } from './Breakout';
-import { Code } from './Code';
-import { Container } from './Container';
-import { Alpha, Gamma, Lead } from './Typography';
+import { Breakout } from './breakout';
+import { Code } from './code';
+import { Container } from './container';
+import { Alpha, Gamma, Lead } from './typography';
 
 const Trace: React.StatelessComponent<{}> = () => (
     <ThemeContext.Consumer>
diff --git a/packages/dev-tools-pages/ts/pages/compiler.tsx b/packages/dev-tools-pages/ts/pages/compiler.tsx
index ee533d566..912589b51 100644
--- a/packages/dev-tools-pages/ts/pages/compiler.tsx
+++ b/packages/dev-tools-pages/ts/pages/compiler.tsx
@@ -4,18 +4,18 @@ import * as Loadable from 'react-loadable';
 
 import { context } from 'ts/context/compiler';
 
-import { Base } from 'ts/components/Base';
-import { Breakout } from 'ts/components/Breakout';
-import { Code } from 'ts/components/Code';
-import { Compiler as CompilerComponent } from 'ts/components/Compiler';
-import { Content } from 'ts/components/Content';
-import { ContentBlock } from 'ts/components/ContentBlock';
-import { Hero } from 'ts/components/Hero';
-import { InlineCode } from 'ts/components/InlineCode';
-import { Lead } from 'ts/components/Typography';
+import { Base } from 'ts/components/base';
+import { Breakout } from 'ts/components/breakout';
+import { Code } from 'ts/components/code';
+import { Compiler as CompilerComponent } from 'ts/components/compiler';
+import { Content } from 'ts/components/content';
+import { ContentBlock } from 'ts/components/content-block';
+import { Hero } from 'ts/components/hero';
+import { InlineCode } from 'ts/components/inline-code';
+import { Lead } from 'ts/components/typography';
 
 const Animation = Loadable({
-    loader: () => System.import(/* webpackChunkName: 'compiler-animation' */ 'ts/components/Animations/Compiler'),
+    loader: () => System.import(/* webpackChunkName: 'compiler-animation' */ 'ts/components/animations/compiler'),
     loading: () => <div />,
     delay: 1000,
     render(loadable: { Animation: any }): React.ReactNode {
diff --git a/packages/dev-tools-pages/ts/pages/cov.tsx b/packages/dev-tools-pages/ts/pages/cov.tsx
index 3ffa6077d..ebaf5bfb2 100644
--- a/packages/dev-tools-pages/ts/pages/cov.tsx
+++ b/packages/dev-tools-pages/ts/pages/cov.tsx
@@ -4,19 +4,19 @@ import * as Loadable from 'react-loadable';
 
 import { context } from 'ts/context/cov';
 
-import { Base } from 'ts/components/Base';
-import { Breakout } from 'ts/components/Breakout';
-import { Code } from 'ts/components/Code';
-import { Content } from 'ts/components/Content';
-import { ContentBlock } from 'ts/components/ContentBlock';
-import { Hero } from 'ts/components/Hero';
-import { InlineCode } from 'ts/components/InlineCode';
-import { Intro, IntroAside, IntroLead } from 'ts/components/Intro';
-import { List, ListItem } from 'ts/components/List';
-import { TabBlock, Tabs } from 'ts/components/Tabs';
+import { Base } from 'ts/components/base';
+import { Breakout } from 'ts/components/breakout';
+import { Code } from 'ts/components/code';
+import { Content } from 'ts/components/content';
+import { ContentBlock } from 'ts/components/content-block';
+import { Hero } from 'ts/components/hero';
+import { InlineCode } from 'ts/components/inline-code';
+import { Intro, IntroAside, IntroLead } from 'ts/components/intro';
+import { List, ListItem } from 'ts/components/list';
+import { TabBlock, Tabs } from 'ts/components/tabs';
 
 const Animation = Loadable({
-    loader: () => System.import(/* webpackChunkName: 'cov-animation' */ 'ts/components/Animations/Cov'),
+    loader: () => System.import(/* webpackChunkName: 'cov-animation' */ 'ts/components/animations/cov'),
     loading: () => <div />,
     delay: 1000,
     render(loadable: { Animation: any }): React.ReactNode {
diff --git a/packages/dev-tools-pages/ts/pages/profiler.tsx b/packages/dev-tools-pages/ts/pages/profiler.tsx
index 4e833e0d0..040b439e8 100644
--- a/packages/dev-tools-pages/ts/pages/profiler.tsx
+++ b/packages/dev-tools-pages/ts/pages/profiler.tsx
@@ -4,19 +4,19 @@ import * as Loadable from 'react-loadable';
 
 import { context } from 'ts/context/profiler';
 
-import { Base } from 'ts/components/Base';
-import { Breakout } from 'ts/components/Breakout';
-import { Code } from 'ts/components/Code';
-import { Content } from 'ts/components/Content';
-import { ContentBlock } from 'ts/components/ContentBlock';
-import { Hero } from 'ts/components/Hero';
-import { InlineCode } from 'ts/components/InlineCode';
-import { Intro, IntroAside, IntroLead } from 'ts/components/Intro';
-import { List, ListItem } from 'ts/components/List';
-import { TabBlock, Tabs } from 'ts/components/Tabs';
+import { Base } from 'ts/components/base';
+import { Breakout } from 'ts/components/breakout';
+import { Code } from 'ts/components/code';
+import { Content } from 'ts/components/content';
+import { ContentBlock } from 'ts/components/content-block';
+import { Hero } from 'ts/components/hero';
+import { InlineCode } from 'ts/components/inline-code';
+import { Intro, IntroAside, IntroLead } from 'ts/components/intro';
+import { List, ListItem } from 'ts/components/list';
+import { TabBlock, Tabs } from 'ts/components/tabs';
 
 const Animation = Loadable({
-    loader: () => System.import(/* webpackChunkName: 'profiler-animation' */ 'ts/components/Animations/Profiler'),
+    loader: () => System.import(/* webpackChunkName: 'profiler-animation' */ 'ts/components/animations/profiler'),
     loading: () => <div />,
     delay: 1000,
     render(loadable: { Animation: any }): React.ReactNode {
diff --git a/packages/dev-tools-pages/ts/pages/trace.tsx b/packages/dev-tools-pages/ts/pages/trace.tsx
index 23cbe98be..acb8fb841 100644
--- a/packages/dev-tools-pages/ts/pages/trace.tsx
+++ b/packages/dev-tools-pages/ts/pages/trace.tsx
@@ -4,19 +4,19 @@ import * as Loadable from 'react-loadable';
 
 import { context } from 'ts/context/trace';
 
-import { Base } from 'ts/components/Base';
-import { Breakout } from 'ts/components/Breakout';
-import { Code } from 'ts/components/Code';
-import { Content } from 'ts/components/Content';
-import { ContentBlock } from 'ts/components/ContentBlock';
-import { Hero } from 'ts/components/Hero';
-import { InlineCode } from 'ts/components/InlineCode';
-import { List, ListItem } from 'ts/components/List';
-import { TabBlock, Tabs } from 'ts/components/Tabs';
-import { Trace as TraceComponent } from 'ts/components/Trace';
+import { Base } from 'ts/components/base';
+import { Breakout } from 'ts/components/breakout';
+import { Code } from 'ts/components/code';
+import { Content } from 'ts/components/content';
+import { ContentBlock } from 'ts/components/content-block';
+import { Hero } from 'ts/components/hero';
+import { InlineCode } from 'ts/components/inline-code';
+import { List, ListItem } from 'ts/components/list';
+import { TabBlock, Tabs } from 'ts/components/tabs';
+import { Trace as TraceComponent } from 'ts/components/trace';
 
 const Animation = Loadable({
-    loader: () => System.import(/* webpackChunkName: 'trace-animation' */ 'ts/components/Animations/Trace'),
+    loader: () => System.import(/* webpackChunkName: 'trace-animation' */ 'ts/components/animations/trace'),
     loading: () => <div />,
     delay: 1000,
     render(loadable: { Animation: any }): React.ReactNode {
-- 
cgit v1.2.3


From ea1805058924e12a18bcc4f9de712bfade64c595 Mon Sep 17 00:00:00 2001
From: August Skare <post@augustskare.no>
Date: Tue, 20 Nov 2018 15:10:59 +0100
Subject: use lodash isUndefined function

---
 packages/dev-tools-pages/ts/components/code.tsx          | 9 +++++----
 packages/dev-tools-pages/ts/components/content-block.tsx | 3 ++-
 2 files changed, 7 insertions(+), 5 deletions(-)

(limited to 'packages/dev-tools-pages/ts')

diff --git a/packages/dev-tools-pages/ts/components/code.tsx b/packages/dev-tools-pages/ts/components/code.tsx
index 9123192d9..f02ff1331 100644
--- a/packages/dev-tools-pages/ts/components/code.tsx
+++ b/packages/dev-tools-pages/ts/components/code.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import styled from 'styled-components';
+import * as _ from 'lodash';
 
 import { colors } from 'ts/variables';
 
@@ -49,10 +50,10 @@ const Base =
     CodeProps >
     `
     font-size: .875rem;
-    color: ${props => (props.language === undefined ? colors.white : 'inherit')};
+    color: ${props => (_.isUndefined(props.language) ? colors.white : 'inherit')};
     background-color: ${props =>
-        props.isLight ? 'rgba(255,255,255,.15)' : props.language === undefined ? colors.black : '#F1F4F5'};
-    white-space: ${props => (props.language === undefined ? 'nowrap' : '')};
+        props.isLight ? 'rgba(255,255,255,.15)' : _.isUndefined(props.language) ? colors.black : '#F1F4F5'};
+    white-space: ${props => (_.isUndefined(props.language) ? 'nowrap' : '')};
     position: relative;
 
     ${props =>
@@ -149,7 +150,7 @@ class Code extends React.Component<CodeProps, CodeState> {
             <Container>
                 <Base language={language} isDiff={isDiff} isLight={isLight}>
                     <StyledPre isDiff={isDiff}>
-                        {hlCode === undefined ? (
+                        {_.isUndefined(hlCode) ? (
                             <code>{children}</code>
                         ) : (
                             <StyledCodeDiff
diff --git a/packages/dev-tools-pages/ts/components/content-block.tsx b/packages/dev-tools-pages/ts/components/content-block.tsx
index a8c208163..3f6b024e6 100644
--- a/packages/dev-tools-pages/ts/components/content-block.tsx
+++ b/packages/dev-tools-pages/ts/components/content-block.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import styled from 'styled-components';
+import * as _ from 'lodash';
 
 import { ContextInterface } from 'ts/context';
 import { media } from 'ts/variables';
@@ -69,7 +70,7 @@ const ContentBlock: React.StatelessComponent<ContentBlockProps> = props => {
     return (
         <Base>
             <Title color={props.colors}>{props.title}</Title>
-            {children === undefined ? null : <Content>{children}</Content>}
+            {_.isUndefined(children) ? null : <Content>{children}</Content>}
         </Base>
     );
 };
-- 
cgit v1.2.3


From b0c22a222e09ef8008a1ef7cf79e28b73961560a Mon Sep 17 00:00:00 2001
From: August Skare <post@augustskare.no>
Date: Tue, 20 Nov 2018 15:15:17 +0100
Subject: use lodash.map insted of array.map

---
 .../dev-tools-pages/ts/components/compiler.tsx     |  3 +-
 packages/dev-tools-pages/ts/components/footer.tsx  |  3 +-
 packages/dev-tools-pages/ts/components/list.tsx    |  3 +-
 packages/dev-tools-pages/ts/highlight.tsx          | 36 ++++++++++------------
 4 files changed, 23 insertions(+), 22 deletions(-)

(limited to 'packages/dev-tools-pages/ts')

diff --git a/packages/dev-tools-pages/ts/components/compiler.tsx b/packages/dev-tools-pages/ts/components/compiler.tsx
index c535795aa..d576e3b72 100644
--- a/packages/dev-tools-pages/ts/components/compiler.tsx
+++ b/packages/dev-tools-pages/ts/components/compiler.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import styled from 'styled-components';
+import * as _ from 'lodash';
 
 import { colors, media } from 'ts/variables';
 
@@ -75,7 +76,7 @@ const Compiler: React.StatelessComponent<{}> = () => (
     <Container>
         <Breakout>
             <Cards>
-                {cards.map(card => (
+                {_.map(cards, card => (
                     <Card key={card.title.split(' ').join('-')}>
                         <Dt>{card.title}</Dt>
                         <Dd>{card.body}</Dd>
diff --git a/packages/dev-tools-pages/ts/components/footer.tsx b/packages/dev-tools-pages/ts/components/footer.tsx
index 110d21443..4b911ce35 100644
--- a/packages/dev-tools-pages/ts/components/footer.tsx
+++ b/packages/dev-tools-pages/ts/components/footer.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import styled from 'styled-components';
+import * as _ from 'lodash';
 
 import { context as compiler } from 'ts/context/compiler';
 import { context as cov } from 'ts/context/cov';
@@ -19,7 +20,7 @@ const Footer: React.StatelessComponent<{}> = () => (
             <Top>
                 <Alpha>Other tools by 0x</Alpha>
                 <List>
-                    {tools.map(({ title, subtitle, icon }) => (
+                    {_.map(tools, ({ title, subtitle, icon }) => (
                         <ListItem key={title}>
                             <ListLink href="#">
                                 <Icon as={icon} />
diff --git a/packages/dev-tools-pages/ts/components/list.tsx b/packages/dev-tools-pages/ts/components/list.tsx
index 12d5d67a9..6d4839e88 100644
--- a/packages/dev-tools-pages/ts/components/list.tsx
+++ b/packages/dev-tools-pages/ts/components/list.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import styled from 'styled-components';
+import * as _ from 'lodash';
 
 import { media } from 'ts/variables';
 
@@ -42,7 +43,7 @@ const List: React.StatelessComponent<ListProps> = props => (
     <StyledList>
         {props.children !== undefined
             ? props.children
-            : props.items.map((bullet, index) => <StyledItem key={index}>{bullet}</StyledItem>)}
+            : _.map(props.items, (bullet, index) => <StyledItem key={index}>{bullet}</StyledItem>)}
     </StyledList>
 );
 
diff --git a/packages/dev-tools-pages/ts/highlight.tsx b/packages/dev-tools-pages/ts/highlight.tsx
index cef03904a..02f4a753e 100644
--- a/packages/dev-tools-pages/ts/highlight.tsx
+++ b/packages/dev-tools-pages/ts/highlight.tsx
@@ -1,6 +1,7 @@
 import * as hljs from 'highlight.js/lib/highlight';
 import * as javascript from 'highlight.js/lib/languages/javascript';
 import * as json from 'highlight.js/lib/languages/json';
+import * as _ from 'lodash';
 
 hljs.registerLanguage('javascript', javascript);
 hljs.registerLanguage('json', json);
@@ -16,28 +17,25 @@ const PATCH_TYPES: PatchInterface = {
 };
 
 function diffHighlight(language: string, code: any, gutter: any): string {
-    return code
-        .split(/\r?\n/g)
-        .map((line: string, index: number) => {
-            let type;
-            let currentLine = line;
+    return _.map(code.split(/\r?\n/g), (line: string, index: number) => {
+        let type;
+        let currentLine = line;
 
-            if (/^-{3} [^-]+ -{4}$|^\*{3} [^*]+ \*{4}$|^@@ [^@]+ @@$/.test(currentLine)) {
-                type = 'chunk';
-            } else if (/^Index: |^[+\-*]{3}|^[*=]{5,}$/.test(currentLine)) {
-                type = 'header';
-            } else {
-                type = PATCH_TYPES[currentLine[0]] || 'null';
-                currentLine = currentLine.replace(/^[+\-! ]/, '');
-            }
+        if (/^-{3} [^-]+ -{4}$|^\*{3} [^*]+ \*{4}$|^@@ [^@]+ @@$/.test(currentLine)) {
+            type = 'chunk';
+        } else if (/^Index: |^[+\-*]{3}|^[*=]{5,}$/.test(currentLine)) {
+            type = 'header';
+        } else {
+            type = PATCH_TYPES[currentLine[0]] || 'null';
+            currentLine = currentLine.replace(/^[+\-! ]/, '');
+        }
 
-            const g = gutter[index];
+        const g = gutter[index];
 
-            return `<span data-gutter="${g !== undefined ? `${g}x` : ''}" class="line-${type}">${
-                hljs.highlight(language, currentLine).value
-            }</span>`;
-        })
-        .join('\n');
+        return `<span data-gutter="${g !== undefined ? `${g}x` : ''}" class="line-${type}">${
+            hljs.highlight(language, currentLine).value
+        }</span>`;
+    }).join('\n');
 }
 
 interface HighlightProps {
-- 
cgit v1.2.3


From 339ec3e8ebac25fe7ee6eb26b89bfc9b9e00db26 Mon Sep 17 00:00:00 2001
From: August Skare <post@augustskare.no>
Date: Tue, 20 Nov 2018 15:18:09 +0100
Subject: uniq export names for animations

---
 packages/dev-tools-pages/ts/components/animations/compiler/index.tsx | 2 +-
 packages/dev-tools-pages/ts/components/animations/cov/index.tsx      | 4 ++--
 packages/dev-tools-pages/ts/components/animations/profiler/index.tsx | 4 ++--
 packages/dev-tools-pages/ts/components/animations/trace/index.tsx    | 4 ++--
 packages/dev-tools-pages/ts/pages/compiler.tsx                       | 4 ++--
 packages/dev-tools-pages/ts/pages/cov.tsx                            | 4 ++--
 packages/dev-tools-pages/ts/pages/profiler.tsx                       | 4 ++--
 packages/dev-tools-pages/ts/pages/trace.tsx                          | 4 ++--
 8 files changed, 15 insertions(+), 15 deletions(-)

(limited to 'packages/dev-tools-pages/ts')

diff --git a/packages/dev-tools-pages/ts/components/animations/compiler/index.tsx b/packages/dev-tools-pages/ts/components/animations/compiler/index.tsx
index db93ff8a4..ba98f8da3 100644
--- a/packages/dev-tools-pages/ts/components/animations/compiler/index.tsx
+++ b/packages/dev-tools-pages/ts/components/animations/compiler/index.tsx
@@ -8,4 +8,4 @@ const CompilerAnimation: React.StatelessComponent<{}> = () => (
     <BaseAnimation animationData={animationData} width={2150} height={700} />
 );
 
-export { CompilerAnimation as Animation };
+export { CompilerAnimation };
diff --git a/packages/dev-tools-pages/ts/components/animations/cov/index.tsx b/packages/dev-tools-pages/ts/components/animations/cov/index.tsx
index 445824717..bd872cc85 100644
--- a/packages/dev-tools-pages/ts/components/animations/cov/index.tsx
+++ b/packages/dev-tools-pages/ts/components/animations/cov/index.tsx
@@ -4,8 +4,8 @@ import { BaseAnimation } from '../index';
 
 import * as animationData from './data.json';
 
-const AnimationCov: React.StatelessComponent<{}> = () => (
+const CovAnimation: React.StatelessComponent<{}> = () => (
     <BaseAnimation animationData={animationData} width={1981} height={660} />
 );
 
-export { AnimationCov as Animation };
+export { CovAnimation };
diff --git a/packages/dev-tools-pages/ts/components/animations/profiler/index.tsx b/packages/dev-tools-pages/ts/components/animations/profiler/index.tsx
index 73a4e9ad6..a2848b762 100644
--- a/packages/dev-tools-pages/ts/components/animations/profiler/index.tsx
+++ b/packages/dev-tools-pages/ts/components/animations/profiler/index.tsx
@@ -4,8 +4,8 @@ import { BaseAnimation } from '../index';
 
 import * as animationData from './data.json';
 
-const AnimationProfiler: React.StatelessComponent<{}> = () => (
+const ProfilerAnimation: React.StatelessComponent<{}> = () => (
     <BaseAnimation animationData={animationData} width={1985} height={657} />
 );
 
-export { AnimationProfiler as Animation };
+export { ProfilerAnimation };
diff --git a/packages/dev-tools-pages/ts/components/animations/trace/index.tsx b/packages/dev-tools-pages/ts/components/animations/trace/index.tsx
index 10a78ccb7..2009c3cec 100644
--- a/packages/dev-tools-pages/ts/components/animations/trace/index.tsx
+++ b/packages/dev-tools-pages/ts/components/animations/trace/index.tsx
@@ -4,8 +4,8 @@ import { BaseAnimation } from '../index';
 
 import * as animationData from './data.json';
 
-const AnimationTrace: React.StatelessComponent<{}> = () => (
+const TraceAnimation: React.StatelessComponent<{}> = () => (
     <BaseAnimation animationData={animationData} width={2241} height={610} />
 );
 
-export { AnimationTrace as Animation };
+export { TraceAnimation };
diff --git a/packages/dev-tools-pages/ts/pages/compiler.tsx b/packages/dev-tools-pages/ts/pages/compiler.tsx
index 912589b51..93a667562 100644
--- a/packages/dev-tools-pages/ts/pages/compiler.tsx
+++ b/packages/dev-tools-pages/ts/pages/compiler.tsx
@@ -18,8 +18,8 @@ const Animation = Loadable({
     loader: () => System.import(/* webpackChunkName: 'compiler-animation' */ 'ts/components/animations/compiler'),
     loading: () => <div />,
     delay: 1000,
-    render(loadable: { Animation: any }): React.ReactNode {
-        const Component = loadable.Animation;
+    render(loadable: { CompilerAnimation: any }): React.ReactNode {
+        const Component = loadable.CompilerAnimation;
         return <Component />;
     },
 });
diff --git a/packages/dev-tools-pages/ts/pages/cov.tsx b/packages/dev-tools-pages/ts/pages/cov.tsx
index ebaf5bfb2..ff1ced27d 100644
--- a/packages/dev-tools-pages/ts/pages/cov.tsx
+++ b/packages/dev-tools-pages/ts/pages/cov.tsx
@@ -19,8 +19,8 @@ const Animation = Loadable({
     loader: () => System.import(/* webpackChunkName: 'cov-animation' */ 'ts/components/animations/cov'),
     loading: () => <div />,
     delay: 1000,
-    render(loadable: { Animation: any }): React.ReactNode {
-        const Component = loadable.Animation;
+    render(loadable: { CovAnimation: any }): React.ReactNode {
+        const Component = loadable.CovAnimation;
         return <Component />;
     },
 });
diff --git a/packages/dev-tools-pages/ts/pages/profiler.tsx b/packages/dev-tools-pages/ts/pages/profiler.tsx
index 040b439e8..860e2c25e 100644
--- a/packages/dev-tools-pages/ts/pages/profiler.tsx
+++ b/packages/dev-tools-pages/ts/pages/profiler.tsx
@@ -19,8 +19,8 @@ const Animation = Loadable({
     loader: () => System.import(/* webpackChunkName: 'profiler-animation' */ 'ts/components/animations/profiler'),
     loading: () => <div />,
     delay: 1000,
-    render(loadable: { Animation: any }): React.ReactNode {
-        const Component = loadable.Animation;
+    render(loadable: { ProfilerAnimation: any }): React.ReactNode {
+        const Component = loadable.ProfilerAnimation;
         return <Component />;
     },
 });
diff --git a/packages/dev-tools-pages/ts/pages/trace.tsx b/packages/dev-tools-pages/ts/pages/trace.tsx
index acb8fb841..a25d2eff8 100644
--- a/packages/dev-tools-pages/ts/pages/trace.tsx
+++ b/packages/dev-tools-pages/ts/pages/trace.tsx
@@ -19,8 +19,8 @@ const Animation = Loadable({
     loader: () => System.import(/* webpackChunkName: 'trace-animation' */ 'ts/components/animations/trace'),
     loading: () => <div />,
     delay: 1000,
-    render(loadable: { Animation: any }): React.ReactNode {
-        const Component = loadable.Animation;
+    render(loadable: { TraceAnimation: any }): React.ReactNode {
+        const Component = loadable.TraceAnimation;
         return <Component />;
     },
 });
-- 
cgit v1.2.3


From f360b2edd671f7f666b3d218c1400b2fb7c75610 Mon Sep 17 00:00:00 2001
From: August Skare <post@augustskare.no>
Date: Tue, 20 Nov 2018 15:27:56 +0100
Subject: fix import order

---
 packages/dev-tools-pages/ts/components/code.tsx          | 2 +-
 packages/dev-tools-pages/ts/components/compiler.tsx      | 2 +-
 packages/dev-tools-pages/ts/components/content-block.tsx | 2 +-
 packages/dev-tools-pages/ts/components/footer.tsx        | 2 +-
 packages/dev-tools-pages/ts/components/list.tsx          | 2 +-
 5 files changed, 5 insertions(+), 5 deletions(-)

(limited to 'packages/dev-tools-pages/ts')

diff --git a/packages/dev-tools-pages/ts/components/code.tsx b/packages/dev-tools-pages/ts/components/code.tsx
index f02ff1331..974f08055 100644
--- a/packages/dev-tools-pages/ts/components/code.tsx
+++ b/packages/dev-tools-pages/ts/components/code.tsx
@@ -1,6 +1,6 @@
+import * as _ from 'lodash';
 import * as React from 'react';
 import styled from 'styled-components';
-import * as _ from 'lodash';
 
 import { colors } from 'ts/variables';
 
diff --git a/packages/dev-tools-pages/ts/components/compiler.tsx b/packages/dev-tools-pages/ts/components/compiler.tsx
index d576e3b72..694a535dd 100644
--- a/packages/dev-tools-pages/ts/components/compiler.tsx
+++ b/packages/dev-tools-pages/ts/components/compiler.tsx
@@ -1,6 +1,6 @@
+import * as _ from 'lodash';
 import * as React from 'react';
 import styled from 'styled-components';
-import * as _ from 'lodash';
 
 import { colors, media } from 'ts/variables';
 
diff --git a/packages/dev-tools-pages/ts/components/content-block.tsx b/packages/dev-tools-pages/ts/components/content-block.tsx
index 3f6b024e6..b800c5d44 100644
--- a/packages/dev-tools-pages/ts/components/content-block.tsx
+++ b/packages/dev-tools-pages/ts/components/content-block.tsx
@@ -1,6 +1,6 @@
+import * as _ from 'lodash';
 import * as React from 'react';
 import styled from 'styled-components';
-import * as _ from 'lodash';
 
 import { ContextInterface } from 'ts/context';
 import { media } from 'ts/variables';
diff --git a/packages/dev-tools-pages/ts/components/footer.tsx b/packages/dev-tools-pages/ts/components/footer.tsx
index 4b911ce35..e18a255e4 100644
--- a/packages/dev-tools-pages/ts/components/footer.tsx
+++ b/packages/dev-tools-pages/ts/components/footer.tsx
@@ -1,6 +1,6 @@
+import * as _ from 'lodash';
 import * as React from 'react';
 import styled from 'styled-components';
-import * as _ from 'lodash';
 
 import { context as compiler } from 'ts/context/compiler';
 import { context as cov } from 'ts/context/cov';
diff --git a/packages/dev-tools-pages/ts/components/list.tsx b/packages/dev-tools-pages/ts/components/list.tsx
index 6d4839e88..ffa7c1cf3 100644
--- a/packages/dev-tools-pages/ts/components/list.tsx
+++ b/packages/dev-tools-pages/ts/components/list.tsx
@@ -1,6 +1,6 @@
+import * as _ from 'lodash';
 import * as React from 'react';
 import styled from 'styled-components';
-import * as _ from 'lodash';
 
 import { media } from 'ts/variables';
 
-- 
cgit v1.2.3


From 6919409c2b642937686ef8a77e21ad9f321a2be8 Mon Sep 17 00:00:00 2001
From: August Skare <post@augustskare.no>
Date: Tue, 20 Nov 2018 15:28:18 +0100
Subject: typedef for context data

---
 packages/dev-tools-pages/ts/context/compiler.tsx | 4 +++-
 packages/dev-tools-pages/ts/context/cov.tsx      | 4 +++-
 packages/dev-tools-pages/ts/context/index.tsx    | 9 ++++++++-
 packages/dev-tools-pages/ts/context/profiler.tsx | 4 +++-
 packages/dev-tools-pages/ts/context/trace.tsx    | 4 +++-
 5 files changed, 20 insertions(+), 5 deletions(-)

(limited to 'packages/dev-tools-pages/ts')

diff --git a/packages/dev-tools-pages/ts/context/compiler.tsx b/packages/dev-tools-pages/ts/context/compiler.tsx
index 88402e4f6..177e265e5 100644
--- a/packages/dev-tools-pages/ts/context/compiler.tsx
+++ b/packages/dev-tools-pages/ts/context/compiler.tsx
@@ -1,6 +1,8 @@
 import Icon from 'ts/icons/logos/compiler.svg';
 
-export const context = {
+import { ContextInterface } from './index';
+
+export const context: ContextInterface = {
     title: 'sol-compiler',
     name: 'compiler',
     subtitle: 'Solidity compilation that just works',
diff --git a/packages/dev-tools-pages/ts/context/cov.tsx b/packages/dev-tools-pages/ts/context/cov.tsx
index eea3ccca6..1ade45e9d 100644
--- a/packages/dev-tools-pages/ts/context/cov.tsx
+++ b/packages/dev-tools-pages/ts/context/cov.tsx
@@ -1,6 +1,8 @@
 import Icon from 'ts/icons/logos/cov.svg';
 
-export const context = {
+import { ContextInterface } from './index';
+
+export const context: ContextInterface = {
     title: 'sol-cov',
     name: 'cov',
     subtitle: 'Solidity code coverage',
diff --git a/packages/dev-tools-pages/ts/context/index.tsx b/packages/dev-tools-pages/ts/context/index.tsx
index 3aba2f34c..35c647ad6 100644
--- a/packages/dev-tools-pages/ts/context/index.tsx
+++ b/packages/dev-tools-pages/ts/context/index.tsx
@@ -6,7 +6,14 @@ interface ContextInterface {
     subtitle?: string;
     tagline?: string;
     icon?: React.ReactNode;
-    colors?: any;
+    colors?: {
+        main: string;
+        secondary: string;
+        secondary_alt: string;
+        type: string;
+        type_alt: string;
+        dark: string;
+    };
 }
 
 const ThemeContext = createContext({});
diff --git a/packages/dev-tools-pages/ts/context/profiler.tsx b/packages/dev-tools-pages/ts/context/profiler.tsx
index 507fa663d..5ccfa5b4c 100644
--- a/packages/dev-tools-pages/ts/context/profiler.tsx
+++ b/packages/dev-tools-pages/ts/context/profiler.tsx
@@ -1,6 +1,8 @@
 import Icon from 'ts/icons/logos/profiler.svg';
 
-export const context = {
+import { ContextInterface } from './index';
+
+export const context: ContextInterface = {
     title: 'sol-profiler',
     name: 'profiler',
     subtitle: 'Gas profiling for Solidity',
diff --git a/packages/dev-tools-pages/ts/context/trace.tsx b/packages/dev-tools-pages/ts/context/trace.tsx
index fea72d4c2..9627cc0a4 100644
--- a/packages/dev-tools-pages/ts/context/trace.tsx
+++ b/packages/dev-tools-pages/ts/context/trace.tsx
@@ -1,6 +1,8 @@
 import Icon from 'ts/icons/logos/trace.svg';
 
-export const context = {
+import { ContextInterface } from './index';
+
+export const context: ContextInterface = {
     title: 'sol-trace',
     name: 'trace',
     subtitle: 'Human-readable stack traces',
-- 
cgit v1.2.3


From ad0083dfa050d664fe298de5c5e18fae021ef597 Mon Sep 17 00:00:00 2001
From: August Skare <post@augustskare.no>
Date: Tue, 20 Nov 2018 15:30:49 +0100
Subject: fix type for svg icon in footer

---
 packages/dev-tools-pages/ts/components/footer.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'packages/dev-tools-pages/ts')

diff --git a/packages/dev-tools-pages/ts/components/footer.tsx b/packages/dev-tools-pages/ts/components/footer.tsx
index e18a255e4..04fd9b88e 100644
--- a/packages/dev-tools-pages/ts/components/footer.tsx
+++ b/packages/dev-tools-pages/ts/components/footer.tsx
@@ -23,7 +23,7 @@ const Footer: React.StatelessComponent<{}> = () => (
                     {_.map(tools, ({ title, subtitle, icon }) => (
                         <ListItem key={title}>
                             <ListLink href="#">
-                                <Icon as={icon} />
+                                <Icon as={icon as 'svg'} />
                                 <div>
                                     <Beta>{title}</Beta>
                                     <p>{subtitle}</p>
-- 
cgit v1.2.3


From fd034cc1e4475fa18cfa6a6afb79d09931189ecd Mon Sep 17 00:00:00 2001
From: Leonid Logvinov <logvinov.leon@gmail.com>
Date: Wed, 9 Jan 2019 10:21:58 +0100
Subject: Remove redundant semicolons

---
 packages/dev-tools-pages/ts/components/animations/index.tsx | 4 ++--
 packages/dev-tools-pages/ts/components/code.tsx             | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

(limited to 'packages/dev-tools-pages/ts')

diff --git a/packages/dev-tools-pages/ts/components/animations/index.tsx b/packages/dev-tools-pages/ts/components/animations/index.tsx
index 7f7b36c21..c9672db05 100644
--- a/packages/dev-tools-pages/ts/components/animations/index.tsx
+++ b/packages/dev-tools-pages/ts/components/animations/index.tsx
@@ -52,7 +52,7 @@ class BaseAnimation extends React.PureComponent<AnimationProps, AnimationState>
     private readonly _handleResize = () => {
         clearTimeout(this._timeout);
         this._timeout = window.setTimeout(this._updateAnimationSize, 50);
-    };
+    }
     private readonly _updateAnimationSize = () => {
         const windowWidth = window.innerWidth;
         let width;
@@ -66,7 +66,7 @@ class BaseAnimation extends React.PureComponent<AnimationProps, AnimationState>
         }
 
         this.setState({ width, height });
-    };
+    }
 }
 
 const Container =
diff --git a/packages/dev-tools-pages/ts/components/code.tsx b/packages/dev-tools-pages/ts/components/code.tsx
index 974f08055..dbd1a7e3c 100644
--- a/packages/dev-tools-pages/ts/components/code.tsx
+++ b/packages/dev-tools-pages/ts/components/code.tsx
@@ -198,7 +198,7 @@ class Code extends React.Component<CodeProps, CodeState> {
         } catch (error) {
             this.setState({ didCopy: false });
         }
-    };
+    }
 }
 
 export { Code };
-- 
cgit v1.2.3


From 5868c91cfb54cfa9177572b201d88d1168bf5b06 Mon Sep 17 00:00:00 2001
From: Leonid Logvinov <logvinov.leon@gmail.com>
Date: Wed, 9 Jan 2019 10:54:32 +0100
Subject: Fix static tests

---
 packages/dev-tools-pages/ts/components/animations/index.tsx | 10 +++++-----
 packages/dev-tools-pages/ts/components/code.tsx             |  4 ++--
 2 files changed, 7 insertions(+), 7 deletions(-)

(limited to 'packages/dev-tools-pages/ts')

diff --git a/packages/dev-tools-pages/ts/components/animations/index.tsx b/packages/dev-tools-pages/ts/components/animations/index.tsx
index c9672db05..8e5421f5c 100644
--- a/packages/dev-tools-pages/ts/components/animations/index.tsx
+++ b/packages/dev-tools-pages/ts/components/animations/index.tsx
@@ -23,10 +23,10 @@ class BaseAnimation extends React.PureComponent<AnimationProps, AnimationState>
     private _timeout = undefined as number;
     public componentDidMount(): void {
         this._updateAnimationSize();
-        window.addEventListener('resize', this._handleResize);
+        window.addEventListener('resize', this._handleResize.bind(this));
     }
     public componentWillUnmount(): void {
-        window.removeEventListener('resize', this._handleResize);
+        window.removeEventListener('resize', this._handleResize.bind(this));
     }
     public render(): React.ReactNode {
         const { animationData } = this.props;
@@ -49,11 +49,11 @@ class BaseAnimation extends React.PureComponent<AnimationProps, AnimationState>
             </Container>
         );
     }
-    private readonly _handleResize = () => {
+    private _handleResize(): void {
         clearTimeout(this._timeout);
-        this._timeout = window.setTimeout(this._updateAnimationSize, 50);
+        this._timeout = window.setTimeout(this._updateAnimationSize.bind(this), 50);
     }
-    private readonly _updateAnimationSize = () => {
+    private _updateAnimationSize(): void {
         const windowWidth = window.innerWidth;
         let width;
         let height;
diff --git a/packages/dev-tools-pages/ts/components/code.tsx b/packages/dev-tools-pages/ts/components/code.tsx
index dbd1a7e3c..71d7a7752 100644
--- a/packages/dev-tools-pages/ts/components/code.tsx
+++ b/packages/dev-tools-pages/ts/components/code.tsx
@@ -164,7 +164,7 @@ class Code extends React.Component<CodeProps, CodeState> {
                     ) : null}
                 </Base>
                 {navigator.userAgent !== 'ReactSnap' && canCopy ? (
-                    <Button onClick={this._handleCopyAsync}>{this.state.didCopy ? 'Copied' : 'Copy'}</Button>
+                    <Button onClick={this._handleCopyAsync.bind(this)}>{this.state.didCopy ? 'Copied' : 'Copy'}</Button>
                 ) : null}
             </Container>
         );
@@ -182,7 +182,7 @@ class Code extends React.Component<CodeProps, CodeState> {
             });
         }
     }
-    private readonly _handleCopyAsync = async () => {
+    private async _handleCopyAsync(): Promise<void> {
         try {
             if ('clipboard' in navigator) {
                 await (navigator as any).clipboard.writeText(this.props.children);
-- 
cgit v1.2.3