{"version":3,"file":"component---src-pages-index-js-641fa9f6c53a70f9329a.js","mappings":"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","sources":["webpack://gatsby-starter-default/./src/components/shared/DownloadButton.js","webpack://gatsby-starter-default/./src/components/shared/VideoModal.js","webpack://gatsby-starter-default/./src/components/shared/ViewButton.js","webpack://gatsby-starter-default/./src/images/icons/icon-question.svg","webpack://gatsby-starter-default/./src/pages/index.js","webpack://gatsby-starter-default/./src/images/icons/tooltip-curve_arrow.svg","webpack://gatsby-starter-default/./src/images/icons/icon-download-white.svg"],"sourcesContent":["import styled, { css } from \"styled-components\"\nimport { media } from \"utils/Media\"\n\nconst DownloadButton = styled.a`\n\n    width: 100%;\n    \n    @media ${media.sm} {\n        width: 198px;\n    }\n\n    height: 50px;\n    font-style: normal;\n    font-weight: normal;\n    font-size: 1rem;\n    line-height: 200%;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    text-align: center;\n    border: none;\n    color: ${props => props.theme.colors.white};\n    background-color: ${props => props.theme.colors.red};\n    transition: all 150ms ease-in-out;\n    text-decoration: none;\n    \n    &:hover {\n        color: ${props => props.theme.colors.white};\n        background-color: ${props => props.theme.colors.black};\n    }\n    \n    img {\n        margin-left: 10px;\n    }\n`\n\nexport default DownloadButton","import React, {Component} from 'react';\nimport {Modal, ModalBody} from \"reactstrap\"\nimport styled from \"styled-components\"\nimport ButtonClose from 'components/shared/ButtonClose'\n\nconst VModal = styled(Modal)`\n    max-width: 1400px;\n    padding: 0;\n    border: 0;\n\n    .modal-content {\n        border: 0;\n        position: relative;\n    }\n\n    .modal-body {\n        padding: 0;\n        border: 0;\n    }\n    \n    .video-wrapper {\n        position: relative;\n        padding-bottom: 56.25%; /* 16:9 aspect ratio */\n        padding-top: 0; // height of controls\n        height: 0;\n    \n        iframe {\n          position: absolute;\n          top: 0;\n          left: 0;\n          width: 100%;\n          height: 100%;\n        }\n    }\n`\n\nclass VideoModal extends Component {\n    render() {\n        return (\n            <VModal isOpen={this.props.modalOpen} toggle={this.props.toggleModal} centered={true}>\n                <ButtonClose onClick={this.props.toggleModal}>\n                    <span className=\"sr-only\">Close</span>\n                </ButtonClose>\n                <ModalBody>\n                    <div className=\"video-wrapper\">\n                        <iframe src={`https://player.vimeo.com/video/${this.props.src}`} width=\"640\" height=\"360\" frameBorder=\"0\"\n                                allow=\"autoplay; fullscreen\" allowFullScreen/>\n                    </div>\n                </ModalBody>\n            </VModal>\n        );\n    }\n}\n\nexport default VideoModal;","import styled, { css } from \"styled-components\"\nimport { media } from \"utils/Media\"\n\nconst ViewButton = styled.a`\n    width: 100%;\n\n    @media ${media.sm} {\n        width: 198px;\n    }\n    \n    height: 50px;\n    font-style: normal;\n    font-weight: normal;\n    font-size: 1rem;\n    line-height: 200%;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    text-align: center;\n    border: none;\n    color: ${props => props.theme.colors.black};\n    background-color: ${props => props.theme.colors.yellow};\n    transition: all 150ms ease-in-out;\n    \n    &:hover {\n        color: ${props => props.theme.colors.white};\n        background-color: ${props => props.theme.colors.black};\n    }\n`\n\nexport default ViewButton","export default \"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTMiIGhlaWdodD0iMTMiIHZpZXdCb3g9IjAgMCAxMyAxMyIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0wIDYuNUMwIDEwLjA4OTkgMi45MTAxNSAxMyA2LjUgMTNDMTAuMDg5OSAxMyAxMyAxMC4wODk5IDEzIDYuNUMxMyAyLjkxMDE1IDEwLjA4OTkgMCA2LjUgMEMyLjkxMDE1IDAgMCAyLjkxMDE1IDAgNi41Wk0xMS44MTgyIDYuNUMxMS44MTgyIDkuNDM3MTUgOS40MzcxNSAxMS44MTgyIDYuNSAxMS44MTgyQzMuNTYyODUgMTEuODE4MiAxLjE4MTgyIDkuNDM3MTUgMS4xODE4MiA2LjVDMS4xODE4MiAzLjU2Mjg1IDMuNTYyODUgMS4xODE4MiA2LjUgMS4xODE4MkM5LjQzNzE1IDEuMTgxODIgMTEuODE4MiAzLjU2Mjg1IDExLjgxODIgNi41WiIgZmlsbD0iYmxhY2siLz4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02LjUwMDE5IDkuNDUzNTdDNi44MjY2NSA5LjQ1MzU3IDcuMDkxMyA5LjE4OTAxIDcuMDkxMyA4Ljg2MjY2QzcuMDkxMyA4LjUzNjMxIDYuODI2NjUgOC4yNzE3NSA2LjUwMDE5IDguMjcxNzVDNi4xNzM3NCA4LjI3MTc1IDUuOTA5MDkgOC41MzYzMSA1LjkwOTA5IDguODYyNjZDNS45MDkwOSA5LjE4OTAxIDYuMTczNzQgOS40NTM1NyA2LjUwMDE5IDkuNDUzNTdaIiBmaWxsPSJibGFjayIvPgo8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTcuMDkwOTEgNy42ODE4Mkg1LjkwOTA5QzUuOTA5MDkgNi42NzYzIDYuMjc4MTYgNi4yNDU3MiA3LjEyMjEgNS44MjM3NUM3LjYwNzcxIDUuNTgwOTQgNy42ODE4MiA1LjQ5NDQ4IDcuNjgxODIgNS4wMjI3M0M3LjY4MTgyIDQuNDY1MTUgNy4yNTQ2OSA0LjEzNjM2IDYuNSA0LjEzNjM2QzUuODQ3MyA0LjEzNjM2IDUuMzE4MTggNC42NjU0OCA1LjMxODE4IDUuMzE4MThINC4xMzYzNkM0LjEzNjM2IDQuMDEyNzggNS4xOTQ2IDIuOTU0NTUgNi41IDIuOTU0NTVDNy44NDk4NCAyLjk1NDU1IDguODYzNjQgMy43MzQ5MiA4Ljg2MzY0IDUuMDIyNzNDOC44NjM2NCA2LjAyODI1IDguNDk0NTcgNi40NTg4MyA3LjY1MDYzIDYuODgwOEM3LjE2NTAyIDcuMTIzNiA3LjA5MDkxIDcuMjEwMDYgNy4wOTA5MSA3LjY4MTgyWiIgZmlsbD0iYmxhY2siLz4KPC9zdmc+Cg==\"","import React, {Component} from \"react\"\nimport styled from 'styled-components'\nimport {Container} from 'reactstrap'\nimport {graphql, StaticQuery} from 'gatsby'\n\nimport Layout from \"components/Layout/Layout\"\nimport VideoModal from \"components/shared/VideoModal\"\nimport DownloadButton from \"components/shared/DownloadButton\"\nimport ViewButton from \"components/shared/ViewButton\"\nimport \"animate.css/animate.min.css\"\nimport {media} from \"utils/Media\"\nimport {GatsbyImage} from \"gatsby-plugin-image\"\nimport IconDownload from 'images/icons/icon-download-white.svg'\nimport IconQuestion from 'images/icons/icon-question.svg'\nimport TooltipArrow from 'images/icons/tooltip-curve_arrow.svg'\n\nconst TopImage = styled.h1`\n    margin: 0;\n`\n\nconst BlockSection = styled.div`\n    @media ${media.md} {\n        display: flex;\n        justify-content: center;\n    }\n`\n\nconst Block = styled.div`\n    margin-bottom: 2rem;\n    padding-bottom: 2rem;\n    border-bottom: 2px solid ${props => props.theme.colors.superLightGrey};\n    \n    @media ${media.md} {\n        border-bottom: none;\n        margin-bottom: 0;\n        padding-bottom: 0;\n        width: 50%;\n        \n        &.border {\n            &-br {\n                border-bottom: 1px solid ${props => props.theme.colors.superLightGrey};\n                border-right: 1px solid ${props => props.theme.colors.superLightGrey};\n                padding-bottom: 2rem;\n                padding-right: 2rem;\n                \n                &:hover {\n                    background: linear-gradient(135deg, #FFFFFF 71.34%, #F9F9F9 100%);\n                }\n            }\n            \n            &-bl {\n                border-bottom: 1px solid ${props => props.theme.colors.superLightGrey};\n                border-left: 1px solid ${props => props.theme.colors.superLightGrey};\n                padding-bottom: 2rem;\n                padding-left: 2rem;\n                \n                &:hover {\n                    background: linear-gradient(225deg, #FFFFFF 71.34%, #F9F9F9 100%);\n                }\n            }\n            \n            &-tr {\n                border-top: 1px solid ${props => props.theme.colors.superLightGrey};\n                border-right: 1px solid ${props => props.theme.colors.superLightGrey};\n                padding-top: 2rem;\n                padding-right: 2rem;\n                \n                &:hover {\n                    background: linear-gradient(45deg, #FFFFFF 71.34%, #F9F9F9 100%);\n                }\n            }\n            \n            &-tl {\n                border-top: 1px solid ${props => props.theme.colors.superLightGrey};\n                border-left: 1px solid ${props => props.theme.colors.superLightGrey};\n                padding-top: 2rem;\n                padding-left: 2rem;\n                \n                &:hover {\n                    background: linear-gradient(315deg, #FFFFFF 71.34%, #F9F9F9 100%);\n                }\n            }\n        }\n    }\n    \n    h2 {\n        margin-top: 2rem;\n    }\n    \n    .interactive-mode {\n        // display: none;\n    }\n`\n\nconst Tooltip = styled.div`\n    position: relative;\n    opacity: 1;\n    \n    .tooltip-inner {\n        visibility: hidden;\n        width: 100%;\n        background-color: ${props => props.theme.colors.yellow};\n        color: #fff;\n        padding: 1rem;\n        position: absolute;\n        z-index: 2;\n        bottom: calc(100% + 1rem);\n        left: 50%;\n        margin-left: -50%;\n        opacity: 0;\n        transition: opacity 150ms ease-in-out;\n        color: ${props => props.theme.colors.black};\n        \n         @media ${media.lg} {\n            width: 198px;\n            margin-left: -99px;\n            bottom: 100%;\n         }\n        \n        &::after {\n            content: \"\";\n            position: absolute;\n            top: 100%;\n            left: 50%;\n            width: 49px;\n            height: 10px;\n            transform: translateX(-50%);\n            background: url(${TooltipArrow}) no-repeat center bottom;\n        }    \n    }\n    \n    &.active .tooltip-inner {\n        visibility: visible;\n        opacity: 1;\n    }\n    \n    @media ${media.lg} {\n        &:hover .tooltip-inner {\n            visibility: visible;\n            opacity: 1;\n        }\n    }\n   \n`\n\nconst Query = () => (\n    <StaticQuery\n        query={graphql`\n            query {\n                HomeHeaderXs: file(relativePath: { eq: \"HomePage/home-header-575.jpg\" }) {\n                    childImageSharp {\n                        gatsbyImageData(width: 575, quality: 100)\n                    }\n                }\n                \n                HomeHeaderXl: file(relativePath: { eq: \"HomePage/home-header-1600.jpg\" }) {\n                    childImageSharp {\n                        gatsbyImageData(width: 1600, quality: 100)\n                    }\n                }\n                \n                StoryXs: file(relativePath: { eq: \"HomePage/story-576.jpg\" }) {\n                    childImageSharp {\n                        gatsbyImageData(width: 576, quality: 100)\n                    }\n                }\n                \n                StoryMd: file(relativePath: { eq: \"HomePage/story-991.jpg\" }) {\n                    childImageSharp {\n                        gatsbyImageData(width: 991, quality: 100)\n                    }\n                }\n                \n                CharacterXs: file(relativePath: { eq: \"HomePage/character-576.jpg\" }) {\n                    childImageSharp {\n                        gatsbyImageData(width: 576, quality: 100)\n                    }\n                }\n                \n                CharacterMd: file(relativePath: { eq: \"HomePage/character-991.jpg\" }) {\n                    childImageSharp {\n                        gatsbyImageData(width: 991, quality: 100)\n                    }\n                }\n                \n                ProductionXs: file(relativePath: { eq: \"HomePage/production-576.jpg\" }) {\n                    childImageSharp {\n                        gatsbyImageData(width: 576, quality: 100)\n                    }\n                }\n                \n                ProductionMd: file(relativePath: { eq: \"HomePage/production-991.jpg\" }) {\n                    childImageSharp {\n                        gatsbyImageData(width: 991, quality: 100)\n                    }\n                }\n                \n                FactXs: file(relativePath: { eq: \"HomePage/fact-576.jpg\" }) {\n                    childImageSharp {\n                        gatsbyImageData(width: 576, quality: 100)\n                    }\n                }\n                \n                FactMd: file(relativePath: { eq: \"HomePage/fact-991.jpg\" }) {\n                    childImageSharp {\n                        gatsbyImageData(width: 991, quality: 100)\n                    }\n                }\n            }\n\t\t`}\n        render={data => (\n            <IndexPage data={data}/>\n        )}\n    />\n)\n\nclass IndexPage extends Component {\n    constructor(props) {\n        super(props);\n\n        this.state = {\n            modalOpen: false,\n            tooltip1: false,\n            tooltip2: false,\n            tooltip3: false,\n            tooltip4: false,\n        }\n    }\n\n    componentDidMount() {\n\n    }\n\n    toggleTooltip = (e) => {\n        const collapse = e.currentTarget.id;\n        this.setState({\n            [collapse]: !this.state[collapse]\n        })\n    }\n\n    toggleModal = (e, src) => {\n        e.preventDefault();\n\n        this.setState({\n            src: src,\n            modalOpen: !this.state.modalOpen\n        });\n    }\n\n    render() {\n\n        return (\n            <Layout title=\"Welcome\">\n                <TopImage>\n                    <GatsbyImage image={this.props.data.HomeHeaderXs.childImageSharp.gatsbyImageData}\n                        alt=\"The Lion King Education Programme\"\n                        title=\"The Lion King Education Programme\"\n                        className=\"img-fluid d-block d-sm-none\"\n                    />\n                    <GatsbyImage image={this.props.data.HomeHeaderXl.childImageSharp.gatsbyImageData}\n                        alt=\"The Lion King Education Programme\"\n                        title=\"The Lion King Education Programme\"\n                        className=\"img-fluid d-none d-sm-block\"\n                    />\n                </TopImage>\n\n                <Container fluid={true} className=\"my-4\">\n                    <Container className=\"no-padding-xs\">\n                        <BlockSection>\n                            <Block className=\"border-br\">\n                                <GatsbyImage image={this.props.data.StoryXs.childImageSharp.gatsbyImageData}\n                                    alt=\"\"\n                                    title=\"\"\n                                    className=\"img-fluid d-block d-lg-none\"\n                                />\n                                <GatsbyImage image={this.props.data.StoryMd.childImageSharp.gatsbyImageData}\n                                    alt=\"\"\n                                    title=\"\"\n                                    className=\"img-fluid d-none d-lg-block\"\n                                />\n                                <h2>The Story</h2>\n\n                                <p>Enjoy a summary of the full story of The Lion King from start to finish.</p>\n\n                                <div className=\"d-block d-sm-flex d-md-block d-lg-flex left-aligned\">\n                                    <Tooltip className=\"tooltip interactive-mode mr-lg-3\">\n                                        <ViewButton href=\"/interactive/the-story\">View interactive mode</ViewButton>\n\n                                        <div className=\"d-none d-lg-block tooltip-inner\">\n                                            <p><img src={IconQuestion} alt=\"\"/> <strong className=\"text-uppercase\">Interactive mode</strong></p>\n                                            <p>This experience is designed specifically for your students\n                                                in or outside of the classroom.</p>\n                                        </div>\n                                    </Tooltip>\n\n                                    {/*<DownloadButton><span className=\"d-none d-lg-inline\">Download&nbsp;</span>PDF <img src={IconDownload} alt=\"\" /></DownloadButton>*/}\n                                    <DownloadButton download target=\"_blank\" href=\"/pdfs/Disneys_The_Lion_King_The_Story.pdf\">Download&nbsp;PDF <img src={IconDownload} alt=\"\" /></DownloadButton>\n                                </div>\n                            </Block>\n\n                            <Block className=\"border-bl\">\n                                <GatsbyImage image={this.props.data.CharacterXs.childImageSharp.gatsbyImageData}\n                                    alt=\"\"\n                                    title=\"\"\n                                    className=\"img-fluid d-block d-lg-none\"\n                                />\n                                <GatsbyImage image={this.props.data.CharacterMd.childImageSharp.gatsbyImageData}\n                                    alt=\"\"\n                                    title=\"\"\n                                    className=\"img-fluid d-none d-lg-block\"\n                                />\n                                <h2>Meet the Characters</h2>\n\n                                <p>Get to know the cast of characters who make the story come to life!</p>\n\n                                <div className=\"d-block d-sm-flex d-md-block d-lg-flex left-aligned\">\n                                    <Tooltip className=\"tooltip interactive-mode mr-lg-3\">\n                                        <ViewButton href=\"/interactive/meet-the-characters\">View interactive mode</ViewButton>\n\n                                        <div className=\"d-none d-lg-block tooltip-inner\">\n                                            <p><img src={IconQuestion} alt=\"\"/> <strong className=\"text-uppercase\">Interactive mode</strong></p>\n                                            <p>This experience is designed specifically for your students\n                                                in or outside of the classroom.</p>\n                                        </div>\n                                    </Tooltip>\n\n                                    {/*<DownloadButton><span className=\"d-none d-lg-inline\">Download&nbsp;</span>PDF <img src={IconDownload} alt=\"\" /></DownloadButton>*/}\n                                    <DownloadButton download target=\"_blank\" href=\"/pdfs/Disneys_The_Lion_King_Meet_The_Characters.pdf\">Download&nbsp;PDF <img src={IconDownload} alt=\"\" /></DownloadButton>\n                                </div>\n                            </Block>\n                        </BlockSection>\n\n                        <BlockSection>\n                            <Block className=\"border-tr\">\n                                <GatsbyImage image={this.props.data.ProductionXs.childImageSharp.gatsbyImageData}\n                                    alt=\"\"\n                                    title=\"\"\n                                    className=\"img-fluid d-block d-lg-none\"\n                                />\n                                <GatsbyImage image={this.props.data.ProductionMd.childImageSharp.gatsbyImageData}\n                                    alt=\"\"\n                                    title=\"\"\n                                    className=\"img-fluid d-none d-lg-block\"\n                                />\n                                <h2>About the Production</h2>\n\n                                <p>Explore this in-depth description of how the production was created.</p>\n\n                                <div className=\"d-block d-sm-flex d-md-block d-lg-flex left-aligned\">\n                                    <Tooltip className=\"tooltip interactive-mode mr-lg-3\">\n                                        <ViewButton href=\"/interactive/about-the-production\">View interactive mode</ViewButton>\n\n                                        <div className=\"d-none d-lg-block tooltip-inner\">\n                                            <p><img src={IconQuestion} alt=\"\"/> <strong className=\"text-uppercase\">Interactive mode</strong></p>\n                                            <p>This experience is designed specifically for your students\n                                                in or outside of the classroom.</p>\n                                        </div>\n                                    </Tooltip>\n\n                                    {/*<DownloadButton><span className=\"d-none d-lg-inline\">Download&nbsp;</span>PDF <img src={IconDownload} alt=\"\" /></DownloadButton>*/}\n                                    <DownloadButton download target=\"_blank\" href=\"/pdfs/Disney_The-Lion-King_Production_Notes.pdf\">Download&nbsp;PDF <img src={IconDownload} alt=\"\" /></DownloadButton>\n                                </div>\n                            </Block>\n\n                            <Block className=\"border-tl\">\n                                <GatsbyImage image={this.props.data.FactXs.childImageSharp.gatsbyImageData}\n                                    alt=\"\"\n                                    title=\"\"\n                                    className=\"img-fluid d-block d-lg-none\"\n                                />\n                                <GatsbyImage image={this.props.data.FactMd.childImageSharp.gatsbyImageData}\n                                    alt=\"\"\n                                    title=\"\"\n                                    className=\"img-fluid d-none d-lg-block\"\n                                />\n                                <h2>Fascinating Facts</h2>\n\n                                <p>Test your knowledge and learn something new with these fun facts about the show!</p>\n\n                                <div className=\"d-block d-sm-flex d-md-block d-lg-flex left-aligned\">\n                                    <Tooltip className=\"tooltip interactive-mode mr-lg-3\">\n                                        {/*<ViewButton href=\"/interactive/fascinating-facts\">View interactive mode</ViewButton>*/}\n\n                                        <div className=\"d-none d-lg-block tooltip-inner\">\n                                            <p><img src={IconQuestion} alt=\"\"/> <strong className=\"text-uppercase\">Interactive mode</strong></p>\n                                            <p>This experience is designed specifically for your students\n                                                in or outside of the classroom.</p>\n                                        </div>\n                                    </Tooltip>\n\n                                    {/*<DownloadButton><span className=\"d-none d-lg-inline\">Download&nbsp;</span>PDF <img src={IconDownload} alt=\"\" /></DownloadButton>*/}\n                                    <DownloadButton download target=\"_blank\" href=\"/pdfs/Disneys_The_Lion_King_Fascinating_Facts.pdf\">Download&nbsp;PDF <img src={IconDownload} alt=\"\" /></DownloadButton>\n                                </div>\n                                <Tooltip className={`tooltip interactive-mode d-lg-none mt-4 ${this.state.tooltip4 && 'active'}`}>\n                                    <div className=\"color--red text--underline text-center\" onClick={this.toggleTooltip} id=\"tooltip4\">\n                                        <div className=\"d-lg-none\">\n                                        {this.state.tooltip4 ?\n                                            <span>Tap to close</span>\n                                        :\n                                            <span>What is interactive mode?</span>\n                                        }\n                                        </div>\n                                        <div className=\"d-none d-lg-block\">\n                                            <span>What is interactive mode?</span>\n                                        </div>\n                                    </div>\n\n                                    <div className=\"d-lg-none tooltip-inner\">\n                                        <p><img src={IconQuestion} alt=\"\"/> <strong className=\"text-uppercase\">Interactive mode</strong></p>\n                                        <p>This experience is designed specifically for your students\n                                            in or outside of the classroom.</p>\n                                    </div>\n                                </Tooltip>\n                            </Block>\n                        </BlockSection>\n                    </Container>\n                </Container>\n\n                <VideoModal toggleModal={this.toggleModal} src={this.state.src} modalOpen={this.state.modalOpen}/>\n\n            </Layout>\n        )\n    }\n}\n\nexport default Query","export default \"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDkiIGhlaWdodD0iMTAiIHZpZXdCb3g9IjAgMCA0OSAxMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTAgMEg0OC4yODQzQzM5LjIyOTIgMCAzMC41NDUgMy41OTcxIDI0LjE0MjEgMTBDMTcuNzM5MyAzLjU5NzEgOS4wNTUwNiAwIDAgMFoiIGZpbGw9IiNGM0NFMTIiLz4KPC9zdmc+Cg==\"","export default \"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTciIGhlaWdodD0iMTUiIHZpZXdCb3g9IjAgMCAxNyAxNSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEgMTAuNzY5MlYxMkMxIDEzLjEwNDYgMS44OTU0MyAxNCAzIDE0SDE0QzE1LjEwNDYgMTQgMTYgMTMuMTA0NiAxNiAxMlYxMC43NjkyTTMuMTQyODYgMy4yMzA3N0w4LjUgOC42MTUzOE04LjUgOC42MTUzOEwxMy44NTcxIDMuMjMwNzdNOC41IDguNjE1MzhMOC41IDAiIHN0cm9rZT0id2hpdGUiIHN0cm9rZS13aWR0aD0iMS41Ii8+Cjwvc3ZnPgo=\""],"names":["DownloadButton","styled","displayName","componentId","media","props","theme","colors","white","red","black","VModal","Modal","withConfig","VideoModal","_Component","apply","arguments","_inheritsLoose","prototype","render","React","isOpen","this","modalOpen","toggle","toggleModal","centered","ButtonClose","onClick","className","ModalBody","src","width","height","frameBorder","allow","allowFullScreen","Component","yellow","TopImage","BlockSection","Block","superLightGrey","Tooltip","IndexPage","_this","call","toggleTooltip","e","_this$setState","collapse","currentTarget","id","setState","state","preventDefault","tooltip1","tooltip2","tooltip3","tooltip4","_proto","componentDidMount","Layout","title","GatsbyImage","image","data","HomeHeaderXs","childImageSharp","gatsbyImageData","alt","HomeHeaderXl","Container","fluid","StoryXs","StoryMd","ViewButton","href","IconQuestion","download","target","IconDownload","CharacterXs","CharacterMd","ProductionXs","ProductionMd","FactXs","FactMd","StaticQuery","query"],"sourceRoot":""}