{"version":3,"file":"component---src-pages-interactive-about-the-production-js-05c243b9da25a4f3488d.js","mappings":"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","sources":["webpack://gatsby-starter-default/./src/components/Interactive/ActTitle.js","webpack://gatsby-starter-default/./src/components/shared/Absolute.js","webpack://gatsby-starter-default/./src/images/Interactive/quote-red.svg","webpack://gatsby-starter-default/./src/images/Interactive/quote-orange.svg","webpack://gatsby-starter-default/./src/images/Interactive/quote-green.svg","webpack://gatsby-starter-default/./src/components/shared/CopyBox.js","webpack://gatsby-starter-default/./src/components/shared/CopyBoxWrapper.js","webpack://gatsby-starter-default/./src/components/shared/HoldScene.js","webpack://gatsby-starter-default/./src/components/shared/SwipeScene.js","webpack://gatsby-starter-default/./src/components/Interactive/Production/Director1.js","webpack://gatsby-starter-default/./src/components/shared/InfoBox.js","webpack://gatsby-starter-default/./src/components/Interactive/Production/Director2.js","webpack://gatsby-starter-default/./src/components/Interactive/Production/Director3.js","webpack://gatsby-starter-default/./src/components/Interactive/Production/Director4.js","webpack://gatsby-starter-default/./src/components/Interactive/Production/Costumes1.js","webpack://gatsby-starter-default/./src/components/Interactive/Production/Costumes2.js","webpack://gatsby-starter-default/./src/components/Interactive/Production/Costumes3.js","webpack://gatsby-starter-default/./src/components/Interactive/Production/Costumes4.js","webpack://gatsby-starter-default/./src/components/Interactive/Production/Puppetry1.js","webpack://gatsby-starter-default/./src/components/Interactive/Production/Puppetry2.js","webpack://gatsby-starter-default/./src/components/Interactive/Production/Puppetry3.js","webpack://gatsby-starter-default/./src/components/Interactive/Production/Set1.js","webpack://gatsby-starter-default/./src/components/Interactive/Production/Set2.js","webpack://gatsby-starter-default/./src/components/Interactive/Production/Set3.js","webpack://gatsby-starter-default/./src/components/Interactive/Production/Set4.js","webpack://gatsby-starter-default/./src/pages/interactive/about-the-production.js","webpack://gatsby-starter-default/./node_modules/@babel/runtime/helpers/esm/assertThisInitialized.js"],"sourcesContent":["// @flow\nimport React, {Component} from 'react';\nimport styled from 'styled-components';\nimport {media} from \"utils/Media\"\nimport TitleBar from 'components/shared/TitleBar'\n\nconst Wrapper = styled.div`\n    overflow: hidden;\n    position: relative;\n    display: none;\n    \n    @media ${media.sm} {\n      display: block;\n    }\n  \n  .sticky { \n    position: fixed;\n    margin: auto;\n    top: 0;\n    left: 0;\n    bottom: auto;\n    right: auto;\n    box-sizing: border-box;\n    width: 100%;\n    z-index: 20;\n  }\n`;\n\nclass ActTitle extends Component {\n    render() {\n        return (\n            <Wrapper active={this.props.active}>\n                <div className={this.props.sticky ? 'sticky' : ''}>\n                    <TitleBar color={this.props.color}>\n                        <h2>{this.props.title}</h2>\n                    </TitleBar>\n                </div>\n            </Wrapper>\n        )\n    }\n}\n\n\nexport default ActTitle\n","import styled, { css } from \"styled-components\"\nimport { media } from \"utils/Media\"\n\nconst Absolute = styled.div`\n     position: absolute;\n  width: 100%;\n  height: 100%;\n  left: 0;\n  top: 56px;\n  \n  @media ${media.sm} {\n    top: 48px;\n  }\n`\n\nexport default Absolute","export default \"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjgwIiB2aWV3Qm94PSIwIDAgMTAwIDgwIiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBvcGFjaXR5PSIwLjYiIGQ9Ik0yOC43IDAuODk5OTg2QzEyLjIgMTIuNiAwLjgwMDAwMSAzMS4yIDAuODAwMDAxIDUxLjlDMC44MDAwMDEgNjkuMyAxMS42IDc5LjIgMjMuOSA3OS4yQzM1LjMgNzkuMiA0NC4zIDY5LjkgNDQuMyA1OC44QzQ0LjMgNDcuNyAzNi41IDM5LjkgMjYuNiAzOS45QzI0LjUgMzkuOSAyMi4xIDQwLjIgMjEuNSA0MC41QzIzLjMgMzAuMyAzMy41IDE4IDQzLjEgMTIuM0wyOC43IDAuODk5OTg2Wk04NC4yIDAuODk5OTg2QzY3LjcgMTIuNiA1Ni4zIDMxLjIgNTYuMyA1MS45QzU2LjMgNjkuMyA2Ny4xIDc5LjIgNzkuNCA3OS4yQzkwLjggNzkuMiA5OS44IDY5LjkgOTkuOCA1OC44Qzk5LjggNDcuNyA5MiAzOS45IDgyLjEgMzkuOUM4MCAzOS45IDc3LjYgNDAuMiA3NyA0MC41Qzc4LjggMzAuMyA4OSAxOCA5OC42IDEyLjNMODQuMiAwLjg5OTk4NloiIGZpbGw9IiNDMTI1MTgiLz4KPC9zdmc+Cg==\"","export default \"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjgwIiB2aWV3Qm94PSIwIDAgMTAwIDgwIiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBvcGFjaXR5PSIwLjYiIGQ9Ik0yOC43IDAuODk5OTg2QzEyLjIgMTIuNiAwLjgwMDAwMSAzMS4yIDAuODAwMDAxIDUxLjlDMC44MDAwMDEgNjkuMyAxMS42IDc5LjIgMjMuOSA3OS4yQzM1LjMgNzkuMiA0NC4zIDY5LjkgNDQuMyA1OC44QzQ0LjMgNDcuNyAzNi41IDM5LjkgMjYuNiAzOS45QzI0LjUgMzkuOSAyMi4xIDQwLjIgMjEuNSA0MC41QzIzLjMgMzAuMyAzMy41IDE4IDQzLjEgMTIuM0wyOC43IDAuODk5OTg2Wk04NC4yIDAuODk5OTg2QzY3LjcgMTIuNiA1Ni4zIDMxLjIgNTYuMyA1MS45QzU2LjMgNjkuMyA2Ny4xIDc5LjIgNzkuNCA3OS4yQzkwLjggNzkuMiA5OS44IDY5LjkgOTkuOCA1OC44Qzk5LjggNDcuNyA5MiAzOS45IDgyLjEgMzkuOUM4MCAzOS45IDc3LjYgNDAuMiA3NyA0MC41Qzc4LjggMzAuMyA4OSAxOCA5OC42IDEyLjNMODQuMiAwLjg5OTk4NloiIGZpbGw9IiNFNzgyMzkiLz4KPC9zdmc+Cg==\"","export default \"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjgwIiB2aWV3Qm94PSIwIDAgMTAwIDgwIiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBvcGFjaXR5PSIwLjYiIGQ9Ik0yOC43IDAuODk5OTg2QzEyLjIgMTIuNiAwLjgwMDAwMSAzMS4yIDAuODAwMDAxIDUxLjlDMC44MDAwMDEgNjkuMyAxMS42IDc5LjIgMjMuOSA3OS4yQzM1LjMgNzkuMiA0NC4zIDY5LjkgNDQuMyA1OC44QzQ0LjMgNDcuNyAzNi41IDM5LjkgMjYuNiAzOS45QzI0LjUgMzkuOSAyMi4xIDQwLjIgMjEuNSA0MC41QzIzLjMgMzAuMyAzMy41IDE4IDQzLjEgMTIuM0wyOC43IDAuODk5OTg2Wk04NC4yIDAuODk5OTg2QzY3LjcgMTIuNiA1Ni4zIDMxLjIgNTYuMyA1MS45QzU2LjMgNjkuMyA2Ny4xIDc5LjIgNzkuNCA3OS4yQzkwLjggNzkuMiA5OS44IDY5LjkgOTkuOCA1OC44Qzk5LjggNDcuNyA5MiAzOS45IDgyLjEgMzkuOUM4MCAzOS45IDc3LjYgNDAuMiA3NyA0MC41Qzc4LjggMzAuMyA4OSAxOCA5OC42IDEyLjNMODQuMiAwLjg5OTk4NloiIGZpbGw9IiM4OUM5NzMiLz4KPC9zdmc+Cg==\"","import React from \"react\"\nimport styled, {css} from \"styled-components\"\nimport {media} from \"utils/Media\"\nimport quoteRed from 'images/Interactive/quote-red.svg';\nimport quoteOrange from 'images/Interactive/quote-orange.svg';\nimport quoteGreen from 'images/Interactive/quote-green.svg';\n\nconst CopyBox = styled.div`\n    position: absolute;\n    z-index: 8;\n    width: calc(100% - 20%);\n    left: 20px;\n    top: 70px;\n    pointer-events: none;\n    \n    @media ${media.md} {\n        left: 5%;\n        max-width: calc(100% - 20%);\n        transform: translateY(-50%);\n        top: 50%;\n        width: 320px;\n    }\n    \n    @media ${media.lg} {\n      width: 280px;\n    }\n    \n    @media ${media.xl} {\n        left: 10%;  \n        width: 400px;\n    }\n\n    p {\n        color: ${props => props.theme.colors.white};\n        font-family: ${props => props.theme.font.family.semiBold};\n        font-size: 1.25rem;\n        line-height: 120%;\n        letter-spacing: 0.03em;\n        \n        @media ${media.lg} {\n          font-size: 1.25rem;\n        }\n        \n        @media ${media.xl} {\n            font-size: 1.75rem;\n        }\n    }\n    \n    h3 {\n        color: ${props => props.theme.colors.white};\n        font-family: ${props => props.theme.font.family.semiBold};\n        font-size: 2rem;\n        line-height: 120%;\n        letter-spacing: 0.03em;\n        text-transform: uppercase;\n        \n        @media ${media.xl} {\n            font-size: 2.5rem;\n        }\n    }\n    \n    ${props => props.copyOnMobile === 'hidden' && css`\n      @media (max-width: 575px) {\n        display: none!important;\n      }\n    `}\n\n    ${props => props.step1 && css`\n        background-image: linear-gradient(#fff, #fff);\n        -webkit-background-clip: text;\n    `}\n\n    ${props => props.step2 && css`\n        opacity: 0;\n    `}\n    \n    ${props => props.ontop && css`\n        z-index: 9;\n    `}\n\n    ${props => props.copyVerticalPositionXs === 'toBottom' && css`\n      @media (max-width: 575px) {\n        top: auto;\n        bottom: 130px;\n      }\n    `}\n    \n    ${props => props.copyVerticalPositionXs === 'toTop' && css`\n      @media (max-width: 575px) {\n        top: 70px;\n        bottom: auto;\n      }\n    `}\n     \n    ${props => props.copyVerticalPositionSm === 'toTop' && css`\n      @media (min-width: 768px) and (max-width: 991px) {\n        top: 130px;\n        bottom: auto;\n        transform: none;\n      }\n    `}\n    \n    ${props => props.copyVerticalPosition === 'toBottom' && css`\n        bottom: 80px;\n        top: initial;\n    \n        @media ${media.sm} {\n            bottom: 80px;\n            top: initial;\n        }\n        \n        @media ${media.md} {\n            bottom: -40px;\n            top: initial;\n        }\n    \n        @media ${media.xl} {\n            bottom: 60px;\n            top: initial;\n        }\n    `}\n    \n    ${props => props.copyVerticalPosition === 'toTop' && css`\n        @media ${media.lg} {\n            top: 130px !important;\n            transform: none;\n        }\n    `}\n     \n    ${props => props.copyVerticalPositionMd === 'toBottom' && css`\n        @media (max-width: 991px) {\n            width: 90%;\n            max-width: 450px;\n            bottom: 130px;\n            top: initial;\n            transform: none;\n        }\n    `}\n    \n    ${props => props.copyVerticalPositionMd === 'toBottom' && props.noScroller && css`\n        @media (max-width: 991px) {\n            bottom: 50px;\n        }\n    `}\n       \n    ${props => props.copyVerticalPositionMd === 'toTop' && css`\n        @media (max-width: 991px) {\n            width: 90%;\n            max-width: 450px;\n            top: 50px;\n            //left: 40px !important;\n            //right: initial !important;\n            bottom: initial;\n            transform: none;\n        }\n    `}\n    \n   ${props => props.copyMdWidth === 'fullWidth' && css`\n        @media (max-width: 991px) {\n            max-width: initial !important;\n        }\n    `}\n     \n   ${props => props.copyMdWidth === 'narrow' && css`\n        @media (max-width: 991px) {\n            width: 320px !important;\n        }\n    `}\n    \n    ${props => props.copyHorizontalPosition === 'toRight' && css`\n        left: 20px;\n        \n        @media ${media.md} {\n            right: 5%;\n            left: auto;\n        }\n        \n        @media ${media.lg} {\n            right: 2rem;\n            left: auto;\n        }\n        \n        @media ${media.xl} {\n            left: auto;\n            right: 10%;\n        }\n    `}\n    \n    ${props => props.copyHorizontalPositionMd === 'toLeft' && css`\n        @media (min-width: 576px) and (max-width: 991px) {\n            left: 20px;\n            right: initial;\n        }\n    `}\n    \n    ${props => props.copyHorizontalPositionMd === 'toRight' && css`\n        @media (min-width: 576px) and (max-width: 991px) {\n            right: 20px !important;\n            left: initial !important;\n        }\n    `}\n    \n    ${props => props.quote && css`\n      @media (max-width: 575px) {\n        left: 40px !important;\n        top: 100px !important;\n      }\n    \n        @media ${media.sm} {\n            top: 130px;\n        }\n        \n        @media ${media.md} {\n            top: 50%;\n        }\n        \n        @media ${media.xl} {\n            top: 50%;\n        }\n        \n        ${props => props.copyVerticalPositionMd === 'toTop' && css`\n        @media (max-width: 991px) {\n            width: 90%;\n            max-width: 450px;\n            top: 50px;\n            //left: 40px !important;\n            //right: initial !important;\n            bottom: initial;\n            transform: none;\n        }\n    `}\n        p {\n            color: ${props => props.theme.colors.yellow};\n            font-family: ${props => props.theme.font.family.semiBold};\n            font-size: 1.25rem;\n            line-height: 120%;\n            letter-spacing: 0.03em;\n            \n            \n            @media ${media.md} {\n                font-size: 1.75rem;\n            }\n            \n            @media ${media.xxl} {\n                font-size: 2.5rem;\n            }\n        }\n\n        div {\n            position: relative;\n            z-index: 2;\n        }\n        \n        &:before {\n            content: \"\";\n            position: absolute;\n            top: -40px;\n            left: -20px;\n            width: 70px;\n            height: 70px;\n            \n            ${props => props.color === 'red' && css`\n                background: url(${quoteRed}) no-repeat center center;\n                background-size: contain;\n            `}\n            \n            ${props => props.color === 'green' && css`\n                background: url(${quoteGreen}) no-repeat center center;\n                background-size: contain;\n            `}\n            \n            ${props => props.color === 'orange' && css`\n                background: url(${quoteOrange}) no-repeat center center;\n                background-size: contain;\n            `}\n            \n            @media ${media.xxl} {\n                top: -70px;\n                left: -60px;\n                width: 101px;\n                height: 163px; \n            }\n        }\n        \n        &:after {\n            content: \"\";\n            transform: rotate(180deg);\n            position: absolute;\n            bottom: -30px;\n            right: 0;\n            width: 70px;\n            height: 70px;\n            \n            ${props => props.color === 'red' && css`\n                background: url(${quoteRed}) no-repeat center center;\n                background-size: contain;\n            `}\n            \n            ${props => props.color === 'green' && css`\n                background: url(${quoteGreen}) no-repeat center center;\n                background-size: contain;\n            `}\n            \n            ${props => props.color === 'orange' && css`\n                background: url(${quoteOrange}) no-repeat center center;\n                background-size: contain;\n            `}\n            \n            @media ${media.xxl} {\n                bottom: -60px;\n                width: 101px;\n                height: 163px;\n            }\n        }\n    `}\n`\n\nCopyBox.defaultProps = {\n    quote: false,\n    copyHorizontalPosition: \"toLeft\",\n    copyVerticalPosition: \"toMiddle\",\n    copyVerticalPositionXs: \"toTop\"\n}\n\nexport default CopyBox","import React from \"react\"\nimport styled, {css} from \"styled-components\"\nimport { media } from \"utils/Media\"\n\nconst CopyBoxWrapper = styled.div`\n  position: absolute;\n  top: 0;\n  height: 100%;\n  right: 0;\n  width: 100vw;\n  z-index: 2;\n  \n @media ${media.lg} {\n    background: linear-gradient(0deg, #000 38%, rgba(0, 0, 0, 0) 100%);\n    width: 346px;\n  }\n  \n  @media ${media.xl} {\n    min-width: 580px;\n  }\n  \n  ${props => props.noBackground && css`\n       background: none !important;\n  `} \n    \n`\n\nCopyBoxWrapper.defaultProps = {\n}\n\nexport default CopyBoxWrapper","import React, { Component } from \"react\"\nimport styled from \"styled-components\"\nimport {GatsbyImage} from \"gatsby-plugin-image\"\nimport CopyBox from \"components/shared/CopyBox\"\n\nimport LazyLoad from \"react-lazyload\"\n\nconst HoldWrap = styled.div`\n    width: 100vw;\n    position: absolute;\n    z-index: 8;\n    left: 0;\n    transition: all .8s ease-in-out;\n    visibility: hidden;\n    background-color: black;\n    opacity: 0;\n\n    height: 100vh; \n    top: 0;\n\n    &.active {\n        visibility: visible;\n        opacity: 1;\n    }\n`\n\nconst BgWrapper = styled.div`\n     width: 100vw;\n        height: 100vh;\n        position: absolute;\n        left: 0;\n        z-index: 2;\n        top: 0;\n        \n        &--step2 {\n            opacity: 0;\n        }\n        \n        .image {\n            width: 100vw;\n            height: 100vh;\n        }\n`\n\nconst BgImg = styled(GatsbyImage)`\n    pointer-events: none;\n`\n\nclass HoldScene extends Component {\n    render() {\n        return (\n            <HoldWrap>\n                <BgWrapper>\n                <LazyLoad height={\"100%\"} once>\n                <BgImg image={this.props.bgImageSm}\n                    alt=\"\"\n                    title=\"\"\n                    className=\"image d-block d-sm-none\"\n                />\n                </LazyLoad>\n                <LazyLoad height={\"100%\"} once>\n                <BgImg image={this.props.bgImageMd}\n                    alt=\"\"\n                    title=\"\"\n                    className=\"image d-none d-sm-block d-lg-none\"\n                />\n                </LazyLoad>\n                <LazyLoad height={\"100%\"} once>\n                <BgImg image={this.props.bgImageLg}\n                    alt=\"\"\n                    title=\"\"\n                    className=\"image d-none d-lg-block d-xl-none\"\n                />\n                </LazyLoad>\n                <LazyLoad height={\"100%\"} once>\n                <BgImg image={this.props.bgImageXl}\n                    alt=\"\"\n                    title=\"\"\n                    className=\"image d-none d-xl-block\"\n                />\n                </LazyLoad>\n                </BgWrapper>\n                <CopyBox\n                    copyHorizontalPosition={this.props.copyHorizontalPosition}\n                    copyHorizontalPositionMd={this.props.copyHorizontalPositionMd}\n                    copyVerticalPosition={this.props.copyVerticalPosition}\n                    copyVerticalPositionSm={this.props.copyVerticalPositionSm}\n                    copyVerticalPositionMd={this.props.copyVerticalPositionMd}\n                    copyMdWidth={this.props.copyMdWidth}\n                    copyOnMobile={this.props.copyOnMobile}\n                    quote={this.props.quote}\n                    color=\"orange\">\n                    {this.props.text !== '' &&\n                    <div dangerouslySetInnerHTML={{ __html: this.props.text }} />\n                    }\n                </CopyBox>\n            </HoldWrap>\n        )\n    }\n}\n\nHoldScene.defaultProps = {\n    text: '',\n    quote: false,\n    copyHorizontalPosition: \"toLeft\",\n    copyVerticalPosition: \"toLeft\",\n    copyVerticalPositionSm: \"toMiddle\"\n}\n\nexport default HoldScene","import React, {Component} from \"react\"\nimport styled, { css } from 'styled-components';\nimport { media } from \"utils/Media\"\nimport {GatsbyImage} from \"gatsby-plugin-image\"\nimport CopyBox from \"components/shared/CopyBox\"\nimport LazyLoad from 'react-lazyload';\n\nconst SwipeWrap = styled.div`\n    width: 100vw;\n    position: absolute;\n    z-index: 8;\n    left: 0;\n    transform: translateX(-100%);\n    transition: all .8s ease-in-out;\n    background-color: black;\n    \n    opacity: 0;\n    height: 100vh; \n    top: 0;\n\n    &.active {\n        transform: translateX(0);\n        opacity: 1;\n    }\n    \n    &.notFullWidth {\n       background: linear-gradient(0deg, #000 38%, rgba(0, 0, 0, 0) 100%);\n       //background: none;\n        left: auto;\n        transform: none;\n        right: 100vw;\n        width: 100%;\n        \n        @media ${media.md} {\n          width: 346px;\n        }\n        \n        @media ${media.xl} {\n          min-width: 580px;\n        }\n        \n        &.active {\n          right: 0;\n        }\n    }\n`\n\nconst BgWrapper = styled.div`\n     width: 100vw;\n        height: 100vh;\n        position: absolute;\n        left: 0;\n        z-index: 2;\n        top: 0;\n        \n        &--step2 {\n            opacity: 0;\n        }\n        \n        .image {\n            width: 100vw;\n            height: 100vh;\n        }\n`\nconst BgImg = styled(GatsbyImage)`\n    pointer-events: none;\n`\n\nclass SwipeScene extends Component {\n\n    render() {\n        return (\n            <SwipeWrap className={`${this.props.notFullWidth ? 'notFullWidth' : ''}`}>\n                {this.props.changeBg &&\n                    <BgWrapper>\n                        \n                        <LazyLoad height={\"100%\"} once>\n                        <BgImg image={this.props.bgImageSm}\n                            alt=\"\"\n                            title=\"\"\n                            className=\"image d-block d-sm-none\"\n                        />\n                        </LazyLoad>\n                        <LazyLoad height={\"100%\"} once>\n                        <BgImg image={this.props.bgImageMd}\n                            alt=\"\"\n                            title=\"\"\n                            className=\"image d-none d-sm-block d-lg-none\"\n                        />\n                        </LazyLoad>\n                        <LazyLoad height={\"100%\"} once>\n                        <BgImg image={this.props.bgImageLg}\n                            alt=\"\"\n                            title=\"\"\n                            className=\"image d-none d-lg-block d-xl-none\"\n                        />\n                        </LazyLoad>\n                        <LazyLoad height={\"100%\"} once>\n                        <BgImg image={this.props.bgImageXl}\n                            alt=\"\"\n                            title=\"\"\n                            className=\"image d-none d-xl-block\"\n                        />\n                        </LazyLoad>\n                    </BgWrapper>\n                }\n                <CopyBox\n                    copyVerticalPosition={this.props.copyVerticalPosition}\n                    copyHorizontalPosition={this.props.copyHorizontalPosition}\n                    copyHorizontalPositionMd={this.props.copyHorizontalPositionMd}\n                    copyVerticalPositionMd={this.props.copyVerticalPositionMd}\n                    copyVerticalPositionXs={this.props.copyVerticalPositionXs}\n                    copyMdWidth={this.props.copyMdWidth}\n                    quote={this.props.quote}\n                    color=\"orange\">\n                    <div dangerouslySetInnerHTML={{__html: this.props.text}}/>\n                </CopyBox>\n            </SwipeWrap>\n        )\n    }\n}\n\nSwipeScene.defaultProps = {\n    textPosition: \"left\",\n    quote: false,\n    changeBg: true,\n    notFullWidth: false,\n    transparentBg: false,\n    copyHorizontalPosition: \"toLeft\",\n    copyVerticalPosition: \"toMiddle\",\n    copyVerticalPositionXs: \"toTop\"\n}\n\nexport default SwipeScene","// @flow\r\nimport React, {Component} from 'react';\r\nimport styled, {css} from 'styled-components';\r\nimport {media} from \"utils/Media\"\r\nimport {Controller, Scene} from 'react-scrollmagic';\r\nimport { Tween, Timeline } from \"react-gsap\"\r\nimport {graphql, StaticQuery} from \"gatsby\";\r\nimport CopyBox from \"components/shared/CopyBox\"\r\nimport CopyBoxWrapper from \"components/shared/CopyBoxWrapper\"\r\nimport BgImage from 'components/shared/BgImage'\r\n\r\nimport TitleBar from 'components/shared/TitleBar'\r\nimport Absolute from \"components/shared/Absolute\"\r\n\r\n\r\nconst Relative = styled.div`\r\n    position: relative;\r\n    width: 100%;\r\n    height: 100%;\r\n`;\r\n\r\nconst Wrapper = styled.div`\r\n  overflow: hidden;\r\n  \r\n  \r\n  &.black-bg {\r\n      background-color: ${props => props.theme.colors.black};\r\n  }\r\n  \r\n  .scrollmagic-pin-spacer {\r\n    display: none !important;\r\n    \r\n\r\n    ${props => props.active && css`\r\n        display: block !important;\r\n    `}\r\n\r\n    @media screen and (max-width: ${props => props.theme.sizes.sm}) {\r\n      padding-bottom: 0 !important;\r\n    }\r\n\r\n    @media ${media.sm} {\r\n        display: block !important;\r\n    }\r\n  }\r\n\r\n  h2 {\r\n    font-size: 1.75rem;\r\n    line-height: 120%;\r\n\r\n    @media ${media.lg} {\r\n      font-size: initial;\r\n      line-height: initial;\r\n    }\r\n\r\n  }\r\n  \r\n  .sticky, .sticky2 {\r\n    height: 0;\r\n    overflow: hidden;\r\n    width: 100% !important;\r\n    \r\n    ${props => props.active && css`\r\n        height: 200vh;\r\n    `}\r\n    \r\n    @media ${media.sm} {\r\n        height: 100vh;\r\n    }\r\n  }\r\n  \r\n  .fs {\r\n        height: 100vh;\r\n    }\r\n    \r\n     .slideInUp {\r\n        .no-touch & {\r\n            visibility: hidden;\r\n            opacity: 0;\r\n            transition: all 0.7s ease-out;\r\n            transform: translate3d(0, 50px, 0);\r\n        }\r\n        .no-touch .is-active & {\r\n            visibility: visible;\r\n            opacity: 1;\r\n            transform: translate3d(0, 0, 0);\r\n        }\r\n    }\r\n    \r\n    .pinContainer {\r\n        position: absolute;\r\n        top: 0;\r\n        left: 0;\r\n        height: 100vh;\r\n        width: 100vw;\r\n    }\r\n\r\n    .margin-bottom-80 {\r\n        margin-bottom: 80px;\r\n    }\r\n`;\r\n\r\nconst StyledBgImage = styled(BgImage)`\r\n`;\r\n\r\nconst CopyBoxWrapperStyled = styled(CopyBoxWrapper)`\r\n  @media ${media.sm} {\r\n    height: 92%;\r\n  }\r\n`;\r\n\r\nconst CopyBoxStyled = styled(CopyBox)`\r\n  @media ${media.sm} {\r\n    background: rgba(0, 0, 0, 0.5);\r\n    width: 100%;\r\n    bottom: 0;\r\n    padding: 28px;\r\n    left: 0;\r\n  }\r\n\r\n  @media ${media.lg} {\r\n    background: initial;\r\n    width: initial;\r\n    bottom: initial;\r\n    padding: initial;\r\n    left: initial;\r\n  }\r\n`\r\n\r\nclass Director1 extends Component {\r\n\r\n    displayScene = (progress) => {\r\n\r\n        return (\r\n          <div className={`sticky`}>\r\n            <Absolute>\r\n              <Timeline totalProgress={progress} paused>\r\n                <Tween\r\n                  ease=\"Strong.easeOut\"\r\n                  totalProgress={progress * 2}\r\n                  paused\r\n                >\r\n                  <TitleBar \r\n                    onClick={() => this.props.callback()}\r\n                    absolute \r\n                    color=\"yellow\">\r\n                    <h2>Julie Taymor – Director</h2>\r\n                  </TitleBar>\r\n                </Tween>\r\n\r\n                <StyledBgImage\r\n                  data={this.props.data}\r\n                  play={progress > 0}\r\n                  progress={progress}\r\n                  \r\n                  noTitleBar\r\n                />\r\n\r\n                <CopyBoxWrapperStyled>\r\n                  <Relative>\r\n                    <CopyBoxStyled\r\n                      copyHorizontalPosition=\"toRight\"\r\n                      copyHorizontalPositionMd=\"toLeft\"\r\n                      copyVerticalPositionMd=\"toBottom\"\r\n                      copyVerticalPositionXs=\"toBottom\"\r\n                      copyMdWidth=\"fullWidth\"\r\n                      noScroller\r\n                      step1\r\n                    >\r\n                      <h3>INSPIRATION</h3>\r\n                      <p>\r\n                        Julie Taymor is the visionary director who transformed\r\n                        The Lion King from an animated film into a theatrical\r\n                        production. Julie directed the show, designed all of the\r\n                        costumes, masks and puppets and contributed some\r\n                        additional lyrics. Julie used a wide variety of\r\n                        theatrical styles to create the stage production.\r\n                      </p>\r\n\r\n                      <p className=\"margin-bottom-80 d-block d-sm-none\">\r\n                        Julie was inspired by a wide range of African and Asian\r\n                        art and culture. This is visible in the masks and\r\n                        costumes, take Nala as an example.\r\n                      </p>\r\n                    </CopyBoxStyled>\r\n                  </Relative>\r\n                </CopyBoxWrapperStyled>\r\n              </Timeline>\r\n            </Absolute>\r\n          </div>\r\n        )\r\n    }\r\n\r\n    render() {\r\n\r\n        let mql = window.matchMedia(media.sm).matches;\r\n\r\n        return (\r\n            <>\r\n                <Wrapper active={this.props.active} id=\"director1Wrapper\" className=\"black-bg\">\r\n                    <div id=\"director1Scene\" ref={director1Scene => this.director1Scene = director1Scene}/>\r\n                    <Controller>\r\n                        <Scene\r\n                            triggerElement=\"#director1Scene\"\r\n                            triggerHook=\"onLeave\"\r\n                            duration={500}\r\n                            pin\r\n                            enabled={mql}\r\n                        >\r\n                            {(progress) => this.displayScene(progress)}\r\n                        </Scene>\r\n                    </Controller>\r\n                </Wrapper>\r\n                \r\n            </>\r\n        )\r\n    }\r\n}\r\n\r\nexport default (props) => (\r\n    <StaticQuery\r\n        query={graphql`\r\n            query {\r\n                bgStep1: file(relativePath: { eq: \"Interactive/Production/lke-im-prod-pt1-1920-min.jpg\" }) {\r\n                    childImageSharp {\r\n                        gatsbyImageData(width: 1920, quality: 100)\r\n                    }\r\n                }\r\n                \r\n                bgStep1Lg: file(relativePath: { eq: \"Interactive/Production/lke-im-prod-pt1-1440-min.jpg\" }) {\r\n                    childImageSharp {\r\n                        gatsbyImageData(width: 1440, quality: 100)\r\n                    }\r\n                }\r\n                \r\n                bgStep1Md: file(relativePath: { eq: \"Interactive/Production/lke-im-prod-pt1-991-min.jpg\" }) {\r\n                    childImageSharp {\r\n                        gatsbyImageData(width: 991, quality: 100)\r\n                    }\r\n                }\r\n                \r\n                bgStep1Sm: file(relativePath: { eq: \"Interactive/Production/lke-im-prod-pt1-576-min.jpg\" }) {\r\n                    childImageSharp {\r\n                        gatsbyImageData(width: 575, quality: 100)\r\n                    }\r\n                }\r\n            }\r\n\t\t`}\r\n        render={data => (\r\n            <Director1 data={data} active={props.active} title={props.title} callback={(e) => props.callback(e)}/>\r\n        )}\r\n    />\r\n)\r\n","import React from \"react\"\nimport styled, {css} from \"styled-components\"\nimport {media} from \"utils/Media\"\nimport quoteRed from 'images/Interactive/quote-red.svg';\nimport quoteOrange from 'images/Interactive/quote-orange.svg';\nimport quoteGreen from 'images/Interactive/quote-green.svg';\n\nconst InfoBox = styled.div`\n    position: absolute;\n    z-index: 8;\n    pointer-events: none;\n    background-color: ${props => props.theme.colors.white};\n    width: 98%;\n    height: 90px;\n    right: 0;\n    transform: none;\n    bottom: 100px;\n    \n    @media ${media.sm} {\n        bottom: 200px;\n        width: 300px;\n    }\n    \n    @media ${media.lg} {\n        bottom: initial;\n        top: 50%;\n        transform: translateY(-50%);\n    }\n    \n    ${props => props.big && css`\n        height: 140px;\n    `}\n\n    p {\n        color: ${props => props.theme.colors.black};\n        font-family: ${props => props.theme.font.family.semiBold};\n        font-size: 1.25rem;\n        line-height: 120%;\n        letter-spacing: 0.03em;\n        padding: 0.5rem 1rem;\n    }\n`\n\nInfoBox.defaultProps = {\n}\n\nexport default InfoBox","// @flow\r\nimport React, {Component} from 'react';\r\nimport styled, {css} from 'styled-components';\r\nimport {media} from \"utils/Media\"\r\nimport {Controller, Scene} from 'react-scrollmagic';\r\nimport {Tween, Timeline} from 'react-gsap';\r\nimport {graphql, StaticQuery} from \"gatsby\";\r\nimport {GatsbyImage} from \"gatsby-plugin-image\";\r\nimport CopyBox from \"components/shared/CopyBox\"\r\nimport InfoBox from \"components/shared/InfoBox\"\r\nimport ButtonScroll from \"components/shared/ScrollButton\"\r\nimport LazyLoad from \"react-lazyload\"\r\n\r\nconst Wrapper = styled.div`\r\n  overflow: hidden;\r\n  \r\n  &.black-bg {\r\n      background-color: ${props => props.theme.colors.black};\r\n  }\r\n  \r\n  .scrollmagic-pin-spacer {\r\n    display: none !important;\r\n\r\n    ${props => props.active && css`\r\n        display: block !important;\r\n    `}\r\n\r\n    @media ${media.sm} {\r\n        display: block !important;\r\n    }\r\n  }\r\n  \r\n  .sticky, .sticky2 {\r\n    height: 0;\r\n    overflow: hidden;\r\n    width: 100% !important;\r\n    \r\n    ${props => props.active && css`\r\n        height: 100vh;\r\n    `}\r\n    \r\n    @media ${media.sm} {\r\n        height: 100vh;\r\n    }\r\n  }\r\n  \r\n  .fs {\r\n        height: 100vh;\r\n    }\r\n    \r\n     .slideInUp {\r\n        .no-touch & {\r\n            visibility: hidden;\r\n            opacity: 0;\r\n            transition: all 0.7s ease-out;\r\n            transform: translate3d(0, 50px, 0);\r\n        }\r\n        .no-touch .is-active & {\r\n            visibility: visible;\r\n            opacity: 1;\r\n            transform: translate3d(0, 0, 0);\r\n        }\r\n    }\r\n    \r\n    .pinContainer {\r\n        position: absolute;\r\n        top: 0;\r\n        left: 0;\r\n        height: 100vh;\r\n        width: 100vw;\r\n    }\r\n    \r\n    .animation__background {\r\n        width: 100vw;\r\n        height: 100vh;\r\n        position: absolute;\r\n        left: 0;\r\n        z-index: 2;\r\n        top: 0;\r\n        \r\n        &--step2, &--step3, &--step4 {\r\n            opacity: 0;\r\n        }\r\n        \r\n        &--overlay {\r\n            position: absolute;\r\n            top: 0;\r\n            left: 0;\r\n            width: 100%;\r\n            height: 100%;\r\n            z-index: 3;\r\n            background-image: linear-gradient(#000, transparent);\r\n        }\r\n        \r\n        .image {\r\n            width: 100vw;\r\n            height: 100vh;\r\n        }\r\n    }\r\n`;\r\n\r\nclass Director2 extends Component {\r\n    render() {\r\n        return (\r\n            <Wrapper active={this.props.active} id=\"director2Wrapper\">\r\n                <div id=\"director2Scene\"/>\r\n                <Controller>\r\n                    <Scene\r\n                        triggerElement=\"#director2Scene\"\r\n                        triggerHook=\"onLeave\"\r\n                        duration={3000}\r\n                        pin\r\n                    >\r\n                        {(progress) => (\r\n                            <div className={`sticky2`}>\r\n                                    <Timeline totalProgress={progress} paused>\r\n                                        <Tween\r\n                                            ease=\"Strong.easeOut\"\r\n                                            totalProgress={progress}\r\n                                            paused\r\n                                        >\r\n                                            <div className=\"animation__background\">\r\n                                                <LazyLoad height={\"100%\"} once>\r\n                                                <GatsbyImage image={this.props.data.bgStep1Sm.childImageSharp.gatsbyImageData}\r\n                                                    alt=\"\"\r\n                                                    title=\"\"\r\n                                                    className=\"image d-block d-sm-none\"\r\n                                                />\r\n                                                </LazyLoad>\r\n                                                <LazyLoad height={\"100%\"} once>\r\n                                                <GatsbyImage image={this.props.data.bgStep1Md.childImageSharp.gatsbyImageData}\r\n                                                    alt=\"\"\r\n                                                    title=\"\"\r\n                                                    className=\"image d-none d-sm-block d-lg-none\"\r\n                                                />\r\n                                                </LazyLoad>\r\n                                                <LazyLoad height={\"100%\"} once>\r\n                                                <GatsbyImage image={this.props.data.bgStep1Lg.childImageSharp.gatsbyImageData}\r\n                                                    alt=\"\"\r\n                                                    title=\"\"\r\n                                                    className=\"image d-none d-lg-block d-xl-none\"\r\n                                                />\r\n                                                </LazyLoad>\r\n                                                <LazyLoad height={\"100%\"} once>\r\n                                                <GatsbyImage image={this.props.data.bgStep1.childImageSharp.gatsbyImageData}\r\n                                                    alt=\"\"\r\n                                                    title=\"\"\r\n                                                    className=\"image d-none d-xl-block\"\r\n                                                />\r\n                                                </LazyLoad>\r\n                                                <InfoBox>\r\n                                                <p>The fabric on her arms is inspired by African Kuba cloth</p>\r\n                                                </InfoBox>\r\n                                            </div>\r\n                                        </Tween>\r\n\r\n                                        <Tween\r\n                                            duration={1}\r\n                                        >\r\n                                            <CopyBox\r\n                                                copyVerticalPosition=\"toTop\"\r\n                                                copyVerticalPositionMd=\"toTop\"\r\n                                                copyHorizontalPosition=\"toLeft\"\r\n                                                step1\r\n                                                onTop\r\n                                            >\r\n                                            <p className=\"d-none d-sm-block\">\r\n                                                    Julie was inspired by a wide range of African and Asian art and culture. This is visible in the masks and costumes, take Nala as an example.\r\n                                                </p>\r\n                                            </CopyBox>\r\n                                        </Tween>\r\n\r\n                                        <Tween\r\n                                            to={{opacity: 1}}\r\n                                            duration={3}\r\n                                        >\r\n                                            <div className=\"animation__background animation__background--step2\">\r\n                                                <LazyLoad height={\"100%\"} once>\r\n                                                <GatsbyImage image={this.props.data.bgStep2Sm.childImageSharp.gatsbyImageData}\r\n                                                    alt=\"\"\r\n                                                    title=\"\"\r\n                                                    className=\"image d-block d-sm-none\"\r\n                                                />\r\n                                                </LazyLoad>\r\n                                                <LazyLoad height={\"100%\"} once>\r\n                                                <GatsbyImage image={this.props.data.bgStep2Md.childImageSharp.gatsbyImageData}\r\n                                                    alt=\"\"\r\n                                                    title=\"\"\r\n                                                    className=\"image d-none d-sm-block d-lg-none\"\r\n                                                />\r\n                                                </LazyLoad>\r\n                                                <LazyLoad height={\"100%\"} once>\r\n                                                <GatsbyImage image={this.props.data.bgStep2Lg.childImageSharp.gatsbyImageData}\r\n                                                    alt=\"\"\r\n                                                    title=\"\"\r\n                                                    className=\"image d-none d-lg-block d-xl-none\"\r\n                                                />\r\n                                                </LazyLoad>\r\n                                                <LazyLoad height={\"100%\"} once>\r\n                                                <GatsbyImage image={this.props.data.bgStep2.childImageSharp.gatsbyImageData}\r\n                                                    alt=\"\"\r\n                                                    title=\"\"\r\n                                                    className=\"image d-none d-xl-block\"\r\n                                                />\r\n                                                </LazyLoad>\r\n                                                <InfoBox>\r\n                                                    <p>Her corset inspired by those of the Dinka people in Sudan </p>\r\n                                                </InfoBox>\r\n                                            </div>\r\n                                        </Tween>\r\n\r\n                                        <Tween\r\n                                            to={{opacity: 1}}\r\n                                            duration={3}\r\n                                        >\r\n                                            <div className=\"animation__background animation__background--step3\">\r\n                                                <LazyLoad height={\"100%\"} once>\r\n                                                <GatsbyImage image={this.props.data.bgStep3Sm.childImageSharp.gatsbyImageData}\r\n                                                    alt=\"\"\r\n                                                    title=\"\"\r\n                                                    className=\"image d-block d-sm-none\"\r\n                                                />\r\n                                                </LazyLoad>\r\n                                                <LazyLoad height={\"100%\"} once>\r\n                                                <GatsbyImage image={this.props.data.bgStep3Md.childImageSharp.gatsbyImageData}\r\n                                                    alt=\"\"\r\n                                                    title=\"\"\r\n                                                    className=\"image d-none d-sm-block d-lg-none\"\r\n                                                />\r\n                                                </LazyLoad>\r\n                                                <LazyLoad height={\"100%\"} once>\r\n                                                <GatsbyImage image={this.props.data.bgStep3Lg.childImageSharp.gatsbyImageData}\r\n                                                    alt=\"\"\r\n                                                    title=\"\"\r\n                                                    className=\"image d-none d-lg-block d-xl-none\"\r\n                                                />\r\n                                                </LazyLoad>\r\n                                                <LazyLoad height={\"100%\"} once>\r\n                                                <GatsbyImage image={this.props.data.bgStep3.childImageSharp.gatsbyImageData}\r\n                                                    alt=\"\"\r\n                                                    title=\"\"\r\n                                                    className=\"image d-none d-xl-block\"\r\n                                                />\r\n                                                </LazyLoad>\r\n                                                <InfoBox>\r\n                                                    <p>Her collar is inspired by Balinese culture</p>\r\n                                                </InfoBox>\r\n                                            </div>\r\n                                        </Tween>\r\n\r\n                                        <Tween\r\n                                            to={{opacity: 1}}\r\n                                            duration={3}\r\n                                        >\r\n                                            <div className=\"animation__background animation__background--step4\">\r\n                                                <LazyLoad height={\"100%\"} once>\r\n                                                <GatsbyImage image={this.props.data.bgStep4Sm.childImageSharp.gatsbyImageData}\r\n                                                    alt=\"\"\r\n                                                    title=\"\"\r\n                                                    className=\"image d-block d-sm-none\"\r\n                                                />\r\n                                                </LazyLoad>\r\n                                                <LazyLoad height={\"100%\"} once>\r\n                                                <GatsbyImage image={this.props.data.bgStep4Md.childImageSharp.gatsbyImageData}\r\n                                                    alt=\"\"\r\n                                                    title=\"\"\r\n                                                    className=\"image d-none d-sm-block d-lg-none\"\r\n                                                />\r\n                                                </LazyLoad>\r\n                                                <LazyLoad height={\"100%\"} once>\r\n                                                <GatsbyImage image={this.props.data.bgStep4Lg.childImageSharp.gatsbyImageData}\r\n                                                    alt=\"\"\r\n                                                    title=\"\"\r\n                                                    className=\"image d-none d-lg-block d-xl-none\"\r\n                                                />\r\n                                                </LazyLoad>\r\n                                                <LazyLoad height={\"100%\"} once>\r\n                                                <GatsbyImage image={this.props.data.bgStep4.childImageSharp.gatsbyImageData}\r\n                                                    alt=\"\"\r\n                                                    title=\"\"\r\n                                                    className=\"image d-none d-xl-block\"\r\n                                                />\r\n                                                </LazyLoad>\r\n                                                <InfoBox>\r\n                                                    <p>Nala’s makeup is inspired by the African Wodaabe tribe.</p>\r\n                                                </InfoBox>\r\n                                            </div>\r\n                                        </Tween>\r\n\r\n                                    </Timeline>\r\n                                    <ButtonScroll\r\n                                        progress={progress}\r\n                                        story\r\n                                    />\r\n                            </div>\r\n                        )}\r\n                    </Scene>\r\n                </Controller>\r\n            </Wrapper>\r\n        )\r\n    }\r\n}\r\n\r\nexport default (props) => (\r\n    <StaticQuery\r\n        query={graphql`\r\n            query {\r\n                bgStep1: file(relativePath: { eq: \"Interactive/Production/lke-im-prod-pt2-1-1920-min.jpg\" }) {\r\n                    childImageSharp {\r\n                        gatsbyImageData(width: 1920, quality: 100)\r\n                    }\r\n                }\r\n                \r\n                bgStep1Lg: file(relativePath: { eq: \"Interactive/Production/lke-im-prod-pt2-1-1440-min.jpg\" }) {\r\n                    childImageSharp {\r\n                        gatsbyImageData(width: 1440, quality: 100)\r\n                    }\r\n                }\r\n                \r\n                bgStep1Md: file(relativePath: { eq: \"Interactive/Production/lke-im-prod-pt2-1-991-min.jpg\" }) {\r\n                    childImageSharp {\r\n                        gatsbyImageData(width: 991, quality: 100)\r\n                    }\r\n                }\r\n                \r\n                bgStep1Sm: file(relativePath: { eq: \"Interactive/Production/lke-im-prod-pt2-1-576-min.jpg\" }) {\r\n                    childImageSharp {\r\n                        gatsbyImageData(width: 575, quality: 100)\r\n                    }\r\n                }\r\n                \r\n                bgStep2: file(relativePath: { eq: \"Interactive/Production/lke-im-prod-pt2-2-1920-min.jpg\" }) {\r\n                    childImageSharp {\r\n                        gatsbyImageData(width: 1920, quality: 100)\r\n                    }\r\n                }\r\n                \r\n                bgStep2Lg: file(relativePath: { eq: \"Interactive/Production/lke-im-prod-pt2-2-1440-min.jpg\" }) {\r\n                    childImageSharp {\r\n                        gatsbyImageData(width: 1440, quality: 100)\r\n                    }\r\n                }\r\n                \r\n                bgStep2Md: file(relativePath: { eq: \"Interactive/Production/lke-im-prod-pt2-2-991-min.jpg\" }) {\r\n                    childImageSharp {\r\n                        gatsbyImageData(width: 991, quality: 100)\r\n                    }\r\n                }\r\n                \r\n                bgStep2Sm: file(relativePath: { eq: \"Interactive/Production/lke-im-prod-pt2-2-576-min.jpg\" }) {\r\n                    childImageSharp {\r\n                        gatsbyImageData(width: 575, quality: 100)\r\n                    }\r\n                }\r\n                \r\n                bgStep3: file(relativePath: { eq: \"Interactive/Production/lke-im-prod-pt2-3-1920-min.jpg\" }) {\r\n                    childImageSharp {\r\n                        gatsbyImageData(width: 1920, quality: 100)\r\n                    }\r\n                }\r\n                \r\n                bgStep3Lg: file(relativePath: { eq: \"Interactive/Production/lke-im-prod-pt2-3-1440-min.jpg\" }) {\r\n                    childImageSharp {\r\n                        gatsbyImageData(width: 1440, quality: 100)\r\n                    }\r\n                }\r\n                \r\n                bgStep3Md: file(relativePath: { eq: \"Interactive/Production/lke-im-prod-pt2-3-991-min.jpg\" }) {\r\n                    childImageSharp {\r\n                        gatsbyImageData(width: 991, quality: 100)\r\n                    }\r\n                }\r\n                \r\n                bgStep3Sm: file(relativePath: { eq: \"Interactive/Production/lke-im-prod-pt2-3-576-min.jpg\" }) {\r\n                    childImageSharp {\r\n                        gatsbyImageData(width: 575, quality: 100)\r\n                    }\r\n                }\r\n                \r\n                bgStep4: file(relativePath: { eq: \"Interactive/Production/lke-im-prod-pt2-4-1920-min.jpg\" }) {\r\n                    childImageSharp {\r\n                        gatsbyImageData(width: 1920, quality: 100)\r\n                    }\r\n                }\r\n                \r\n                bgStep4Lg: file(relativePath: { eq: \"Interactive/Production/lke-im-prod-pt2-4-1440-min.jpg\" }) {\r\n                    childImageSharp {\r\n                        gatsbyImageData(width: 1440, quality: 100)\r\n                    }\r\n                }\r\n                \r\n                bgStep4Md: file(relativePath: { eq: \"Interactive/Production/lke-im-prod-pt2-4-991-min.jpg\" }) {\r\n                    childImageSharp {\r\n                        gatsbyImageData(width: 991, quality: 100)\r\n                    }\r\n                }\r\n                \r\n                bgStep4Sm: file(relativePath: { eq: \"Interactive/Production/lke-im-prod-pt2-4-576-min.jpg\" }) {\r\n                    childImageSharp {\r\n                        gatsbyImageData(width: 575, quality: 100)\r\n                    }\r\n                }\r\n            }\r\n\t\t`}\r\n        render={data => (\r\n            <Director2 data={data} active={props.active} title={props.title}/>\r\n        )}\r\n    />\r\n)\r\n","// @flow\nimport React, {Component} from 'react';\nimport styled, {css} from 'styled-components';\nimport {media} from \"utils/Media\"\nimport {Controller, Scene} from 'react-scrollmagic';\nimport {graphql, StaticQuery} from \"gatsby\";\nimport CopyBox from \"components/shared/CopyBox\"\nimport BgImage from 'components/shared/BgImage'\n\nconst Wrapper = styled.div`\n    overflow: hidden;\n    \n  .scrollmagic-pin-spacer {\n    display: none !important;\n\n    ${props => props.active && css`\n        display: block !important;\n    `}\n\n    @media ${media.sm} {\n        display: block !important;\n    }\n  }\n  \n  .sticky, .sticky2 { \n    height: 0;\n    overflow: hidden;\n    width: 100% !important;\n    \n    ${props => props.active && css`\n        height: 100vh;\n    `}\n    \n    @media ${media.sm} {\n        height: 100vh;\n    }\n  }\n  \n  .fs {\n        height: 100vh;\n    }\n    \n  .slideInUp {\n        .no-touch & {\n            visibility: hidden;\n            opacity: 0;\n            transition: all 0.7s ease-out;\n            transform: translate3d(0, 50px, 0);\n        }\n        .no-touch .is-active & {\n            visibility: visible;\n            opacity: 1;\n            transform: translate3d(0, 0, 0);\n        }\n    }\n    \n    .pinContainer {\n        position: absolute;\n        top: 0;\n        left: 0;\n        height: 100vh;\n        width: 100vw;\n    }\n`;\n\nclass Director3 extends Component {\n    render() {\n        return (\n            <Wrapper active={this.props.active} id=\"director3Wrapper\">\n                <div id=\"director3Scene\" ref={director3Scene => this.director3Scene = director3Scene}/>\n                <Controller>\n                    <Scene\n                        triggerElement=\"#director3Scene\"\n                        triggerHook=\"onLeave\"\n                        duration={500}\n                        pin\n                    >\n                        {(progress) => (\n                            <div className={`sticky2`}>\n                                <BgImage\n                                    data={this.props.data}\n                                    play={progress > 0}\n                                    progress={progress}\n                                    noTitleBar\n                                />\n\n                                <CopyBox\n                                    copyHorizontalPosition=\"toLeft\"\n                                    step1\n                                    copyHorizontalPositionMd=\"toLeft\"\n                                    copyVerticalPositionMd=\"toBottom\"\n                                    copyVerticalPositionXs=\"toBottom\"\n                                    copyMdWidth=\"fullWidth\"\n                                    noScroller\n                                >\n                                    <h3>Double Event</h3>\n                                    <p>\n                                        Julie introduced the ‘double event’ technique for the stage production.  This means you can always see the performer’s face as well as the mask or animal puppet. This allows the audience to see the animal and experience the humanity of the story at the same time.\n                                    </p>\n                                </CopyBox>\n                            </div>\n                        )}\n                    </Scene>\n                </Controller>\n            </Wrapper>\n        )\n    }\n}\n\n\nexport default (props) => (\n    <StaticQuery\n        query={graphql`\n            query {\n                 bgStep1: file(relativePath: { eq: \"Interactive/Production/lke-im-prod-pt3-1920-min.jpg\" }) {\n                    childImageSharp {\n                        gatsbyImageData(width: 1920, quality: 100)\n                    }\n                }\n                \n                bgStep1Lg: file(relativePath: { eq: \"Interactive/Production/lke-im-prod-pt3-1440-min.jpg\" }) {\n                    childImageSharp {\n                        gatsbyImageData(width: 1440, quality: 100)\n                    }\n                }\n                \n                bgStep1Md: file(relativePath: { eq: \"Interactive/Production/lke-im-prod-pt3-991-min.jpg\" }) {\n                    childImageSharp {\n                        gatsbyImageData(width: 991, quality: 100)\n                    }\n                }\n                \n                bgStep1Sm: file(relativePath: { eq: \"Interactive/Production/lke-im-prod-pt3-576-min.jpg\" }) {\n                    childImageSharp {\n                        gatsbyImageData(width: 575, quality: 100)\n                    }\n                }\n            }\n\t\t`}\n        render={data => (\n            <Director3 data={data} active={props.active} title={props.title}/>\n        )}\n    />\n)\n","// @flow\nimport React, {Component} from 'react';\nimport styled, {css} from 'styled-components';\nimport {media} from \"utils/Media\"\nimport {Controller, Scene} from 'react-scrollmagic';\nimport {graphql, StaticQuery} from \"gatsby\";\nimport CopyBox from \"components/shared/CopyBox\"\nimport HoldScene from \"components/shared/HoldScene\"\nimport ButtonHold from \"components/shared/ButtonHold\"\nimport BgImage from 'components/shared/BgImage'\n\nconst Wrapper = styled.div`\n    overflow: hidden;\n    \n .scrollmagic-pin-spacer {\n    display: none !important;\n\n    ${props => props.active && css`\n        display: block !important;\n    `}\n\n    @media ${media.sm} {\n        display: block !important;\n    }\n  }\n  \n  .sticky, .sticky2 { \n    height: 0;\n    overflow: hidden;\n    width: 100% !important;\n    \n    ${props => props.active && css`\n        height: 100vh;\n    `}\n    \n    @media ${media.sm} {\n        height: 100vh;\n    }\n  }\n  \n  .fs {\n        height: 100vh;\n    }\n    \n  .slideInUp {\n        .no-touch & {\n            visibility: hidden;\n            opacity: 0;\n            transition: all 0.7s ease-out;\n            transform: translate3d(0, 50px, 0);\n        }\n        .no-touch .is-active & {\n            visibility: visible;\n            opacity: 1;\n            transform: translate3d(0, 0, 0);\n        }\n    }\n    \n    .pinContainer {\n        position: absolute;\n        top: 0;\n        left: 0;\n        height: 100vh;\n        width: 100vw;\n    }\n`;\n\nclass Director4 extends Component {\n    render() {\n        return (\n            <Wrapper active={this.props.active} id=\"director4Wrapper\">\n                <div id=\"director4Scene\"/>\n                <Controller>\n                    <Scene\n                        triggerElement=\"#director4Scene\"\n                        triggerHook=\"onLeave\"\n                        duration={500}\n                        pin\n                    >\n                        {(progress) => (\n                            <div className={`sticky2`}>\n                                <BgImage\n                                    data={this.props.data}\n                                    play={progress > 0}\n                                    progress={progress}\n                                    noTitleBar\n                                />\n\n                                <CopyBox\n                                    copyHorizontalPosition=\"toLeft\"\n                                    copyVerticalPosition=\"toTop\"\n                                    copyVerticalPositionMd=\"toTop\"\n                                    copyMdWidth=\"fullWidth\"\n                                    step1\n                                >\n                                    <h3>The circle metaphor</h3>\n                                    <p>\n                                        The circle is a central motif that inspired much of Taymor’s design. The opening song, ‘Circle of Life’ introduces the metaphor. Visually, Taymor uses circles to depict key elements of the environment including the sun, the waterhole and Pride Rock which spirals up from the stage...\n                                    </p>\n                                </CopyBox>\n\n                                <ButtonHold\n                                    play={progress > 0}\n                                    target={this.director4HoldScene}\n                                />\n\n                                <HoldScene\n                                    ref={director4HoldScene => this.director4HoldScene = director4HoldScene}\n                                    bgImageSm={this.props.data.bgStep2Sm.childImageSharp.gatsbyImageData}\n                    bgImageMd={this.props.data.bgStep2Md.childImageSharp.gatsbyImageData}\n                    bgImageLg={this.props.data.bgStep2Lg.childImageSharp.gatsbyImageData}\n                    bgImageXl={this.props.data.bgStep2.childImageSharp.gatsbyImageData}\n                                    copyHorizontalPosition=\"toLeft\"\n                                    copyVerticalPosition=\"toTop\"\n                                    copyVerticalPositionMd=\"toTop\"\n                                    copyMdWidth=\"fullWidth\"\n                                    copyOnMobile=\"hidden\"\n                                    ontop\n                                    text=\"<h3>The circle metaphor</h3><p>The circle is a central motif that inspired much of Taymor’s design. The opening song, ‘Circle of Life’ introduces the metaphor. Visually, Taymor uses circles to depict key elements of the environment including the sun, the waterhole, Pride Rock which spirals up from the stage...</p>\"\n                                />\n\n                            </div>\n                        )}\n                    </Scene>\n                </Controller>\n            </Wrapper>\n        )\n    }\n}\n\n\nexport default (props) => (\n    <StaticQuery\n        query={graphql`\n            query {\n                 bgStep1: file(relativePath: { eq: \"Interactive/Production/lke-im-prod-pt4-1-1920-min.jpg\" }) {\n                    childImageSharp {\n                        gatsbyImageData(width: 1920, quality: 100)\n                    }\n                }\n                \n                bgStep1Lg: file(relativePath: { eq: \"Interactive/Production/lke-im-prod-pt4-1-1440-min.jpg\" }) {\n                    childImageSharp {\n                        gatsbyImageData(width: 1440, quality: 100)\n                    }\n                }\n                \n                bgStep1Md: file(relativePath: { eq: \"Interactive/Production/lke-im-prod-pt4-1-991-min.jpg\" }) {\n                    childImageSharp {\n                        gatsbyImageData(width: 991, quality: 100)\n                    }\n                }\n                \n                bgStep1Sm: file(relativePath: { eq: \"Interactive/Production/lke-im-prod-pt4-1-576-min.jpg\" }) {\n                    childImageSharp {\n                        gatsbyImageData(width: 575, quality: 100)\n                    }\n                }\n                \n               bgStep2: file(relativePath: { eq: \"Interactive/Production/lke-im-prod-pt4-2-1920-min.jpg\" }) {\n                    childImageSharp {\n                        gatsbyImageData(width: 1920, quality: 100)\n                    }\n                }\n                \n                bgStep2Lg: file(relativePath: { eq: \"Interactive/Production/lke-im-prod-pt4-2-1440-min.jpg\" }) {\n                    childImageSharp {\n                        gatsbyImageData(width: 1440, quality: 100)\n                    }\n                }\n                \n                bgStep2Md: file(relativePath: { eq: \"Interactive/Production/lke-im-prod-pt4-2-991-min.jpg\" }) {\n                    childImageSharp {\n                        gatsbyImageData(width: 991, quality: 100)\n                    }\n                }\n                \n                bgStep2Sm: file(relativePath: { eq: \"Interactive/Production/lke-im-prod-pt4-2-576-min.jpg\" }) {\n                    childImageSharp {\n                        gatsbyImageData(width: 575, quality: 100)\n                    }\n                }\n            }\n\t\t`}\n        render={data => (\n            <Director4 data={data} active={props.active} title={props.title}/>\n        )}\n    />\n)\n","// @flow\r\nimport React, {Component} from 'react';\r\nimport styled, {css} from 'styled-components';\r\nimport {media} from \"utils/Media\"\r\nimport {Controller, Scene} from 'react-scrollmagic';\r\nimport {Tween, Timeline} from 'react-gsap';\r\nimport {graphql, StaticQuery} from \"gatsby\";\r\nimport {GatsbyImage} from \"gatsby-plugin-image\";\r\nimport CopyBox from \"components/shared/CopyBox\"\r\nimport InfoBox from \"components/shared/InfoBox\"\r\nimport ButtonScroll from \"components/shared/ScrollButton\"\r\nimport LazyLoad from \"react-lazyload\"\r\nimport TitleBar from 'components/shared/TitleBar'\r\nimport Absolute from \"components/shared/Absolute\"\r\n\r\n\r\n\r\nconst Wrapper = styled.div`\r\n  overflow: hidden;\r\n  \r\n  &.black-bg {\r\n      background-color: ${props => props.theme.colors.black};\r\n  }\r\n\r\n  &#costumes1Wrapper1 {\r\n    .scrollmagic-pin-spacer {\r\n        @media screen and (max-width: ${props => props.theme.sizes.sm}) {\r\n            padding-bottom: 0 !important;\r\n        }\r\n    }\r\n  }\r\n  \r\n  .scrollmagic-pin-spacer {\r\n    display: none !important;\r\n\r\n    ${props => props.active && css`\r\n        display: block !important;\r\n    `}\r\n\r\n    @media ${media.sm} {\r\n        display: block !important;\r\n    }\r\n  }\r\n\r\n    h2 {\r\n    font-size: 1.75rem;\r\n    line-height: 120%;\r\n\r\n    @media ${media.lg} {\r\n      font-size: initial;\r\n      line-height: initial;\r\n    }\r\n\r\n  }\r\n  \r\n  .sticky, .sticky2 {\r\n    height: 0;\r\n    overflow: hidden;\r\n    width: 100% !important;\r\n\r\n    background-color: ${props => props.theme.colors.darkBlue};\r\n    \r\n    ${props => props.active && css`\r\n        height: 100vh;\r\n    `}\r\n    \r\n    @media ${media.sm} {\r\n        height: 100vh;\r\n    }\r\n  }\r\n  \r\n  .fs {\r\n        height: 100vh;\r\n    }\r\n    \r\n     .slideInUp {\r\n        .no-touch & {\r\n            visibility: hidden;\r\n            opacity: 0;\r\n            transition: all 0.7s ease-out;\r\n            transform: translate3d(0, 50px, 0);\r\n        }\r\n        .no-touch .is-active & {\r\n            visibility: visible;\r\n            opacity: 1;\r\n            transform: translate3d(0, 0, 0);\r\n        }\r\n    }\r\n    \r\n    .pinContainer {\r\n        position: absolute;\r\n        top: 0;\r\n        left: 0;\r\n        height: 100vh;\r\n        width: 100vw;\r\n    }\r\n    \r\n    .animation__background {\r\n        width: 100vw;\r\n        height: 100vh;\r\n        position: absolute;\r\n        left: 0;\r\n        z-index: 2;\r\n        top: 0;\r\n        \r\n        &--step2, &--step3, &--step4 {\r\n            opacity: 0;\r\n        }\r\n        \r\n        &--overlay {\r\n            position: absolute;\r\n            top: 0;\r\n            left: 0;\r\n            width: 100%;\r\n            height: 100%;\r\n            z-index: 3;\r\n            background-image: linear-gradient(#000, transparent);\r\n        }\r\n        \r\n        .image {\r\n            width: 100vw;\r\n            height: 100vh;\r\n        }\r\n    }\r\n`;\r\n\r\nclass Costumes1 extends Component {\r\n\r\n    displayMobileHeading = (progress) => {\r\n\r\n        return (\r\n            <div className={`sticky black-bg`}>\r\n                <Absolute>\r\n\r\n                    <TitleBar\r\n                        onClick={() => this.props.callback()}\r\n                        absolute\r\n                        color=\"orange\"\r\n                    >\r\n                        <h2>Costumes and Masks</h2>\r\n                    </TitleBar>\r\n\r\n                    <Tween\r\n                        duration={1}\r\n                    >\r\n                        <CopyBox\r\n                            copyVerticalPosition=\"toTop\"\r\n                            copyVerticalPositionMd=\"toTop\"\r\n                            copyHorizontalPosition=\"toLeft\"\r\n                            step1\r\n                            onTop\r\n                        >\r\n                            <p>\r\n                                The costumes and masks in The Lion King tell a story.  The lions’ masks sit on top of their heads like crowns because they are royal.\r\n                                </p>\r\n                        </CopyBox>\r\n                    </Tween>\r\n\r\n\r\n                </Absolute>\r\n\r\n            </div>\r\n        )\r\n\r\n    }\r\n\r\n    displayMobileScene = (progress) => {\r\n\r\n        return (\r\n\r\n            <div className={`sticky`}>\r\n                    <Timeline totalProgress={progress} paused>\r\n\r\n                        <Tween\r\n                            ease=\"Strong.easeOut\"\r\n                            totalProgress={progress}\r\n                            paused\r\n                        >\r\n                            <div className=\"animation__background\">\r\n                                <LazyLoad height={\"100%\"} once>\r\n                                    <GatsbyImage image={this.props.data.bgStep1Sm.childImageSharp.gatsbyImageData}\r\n                                        alt=\"\"\r\n                                        title=\"\"\r\n                                        className=\"image d-block d-sm-none\"\r\n                                    />\r\n                                </LazyLoad>\r\n                                <LazyLoad height={\"100%\"} once>\r\n                                    <GatsbyImage image={this.props.data.bgStep1Md.childImageSharp.gatsbyImageData}\r\n                                        alt=\"\"\r\n                                        title=\"\"\r\n                                        className=\"image d-none d-sm-block d-lg-none\"\r\n                                    />\r\n                                </LazyLoad>\r\n                                <LazyLoad height={\"100%\"} once>\r\n                                    <GatsbyImage image={this.props.data.bgStep1Lg.childImageSharp.gatsbyImageData}\r\n                                        alt=\"\"\r\n                                        title=\"\"\r\n                                        className=\"image d-none d-lg-block d-xl-none\"\r\n                                    />\r\n                                </LazyLoad>\r\n                                <LazyLoad height={\"100%\"} once>\r\n                                    <GatsbyImage image={this.props.data.bgStep1.childImageSharp.gatsbyImageData}\r\n                                        alt=\"\"\r\n                                        title=\"\"\r\n                                        className=\"image d-none d-xl-block\"\r\n                                    />\r\n                                </LazyLoad>\r\n                                <InfoBox big>\r\n                                    <p>As an adult, Simba’s mask resembles a Roman warrior soldier with the plume down the centre, indicating that he is strong and brave.</p>\r\n\r\n                                </InfoBox>\r\n                            </div>\r\n                        </Tween>\r\n\r\n                        <Tween\r\n                            to={{ opacity: 1 }}\r\n                            duration={3}\r\n                        >\r\n                            <div className=\"animation__background animation__background--step2\">\r\n                                <LazyLoad height={\"100%\"} once>\r\n                                    <GatsbyImage image={this.props.data.bgStep2Sm.childImageSharp.gatsbyImageData}\r\n                                        alt=\"\"\r\n                                        title=\"\"\r\n                                        className=\"image d-block d-sm-none\"\r\n                                    />\r\n                                </LazyLoad>\r\n                                <LazyLoad height={\"100%\"} once>\r\n                                    <GatsbyImage image={this.props.data.bgStep2Md.childImageSharp.gatsbyImageData}\r\n                                        alt=\"\"\r\n                                        title=\"\"\r\n                                        className=\"image d-none d-sm-block d-lg-none\"\r\n                                    />\r\n                                </LazyLoad>\r\n                                <LazyLoad height={\"100%\"} once>\r\n                                    <GatsbyImage image={this.props.data.bgStep2Lg.childImageSharp.gatsbyImageData}\r\n                                        alt=\"\"\r\n                                        title=\"\"\r\n                                        className=\"image d-none d-lg-block d-xl-none\"\r\n                                    />\r\n                                </LazyLoad>\r\n                                <LazyLoad height={\"100%\"} once>\r\n                                    <GatsbyImage image={this.props.data.bgStep2.childImageSharp.gatsbyImageData}\r\n                                        alt=\"\"\r\n                                        title=\"\"\r\n                                        className=\"image d-none d-xl-block\"\r\n                                    />\r\n                                </LazyLoad>\r\n                                <InfoBox big>\r\n                                    <p>However his mask is jawless implying that he is still a young adult.</p>\r\n\r\n                                </InfoBox>\r\n                            </div>\r\n                        </Tween>\r\n\r\n                        <Tween\r\n                            to={{ opacity: 1 }}\r\n                            duration={3}\r\n                        >\r\n                            <div className=\"animation__background animation__background--step3\">\r\n                                <LazyLoad height={\"100%\"} once>\r\n                                    <GatsbyImage image={this.props.data.bgStep3Sm.childImageSharp.gatsbyImageData}\r\n                                        alt=\"\"\r\n                                        title=\"\"\r\n                                        className=\"image d-block d-sm-none\"\r\n                                    />\r\n                                </LazyLoad>\r\n                                <LazyLoad height={\"100%\"} once>\r\n                                    <GatsbyImage image={this.props.data.bgStep3Md.childImageSharp.gatsbyImageData}\r\n                                        alt=\"\"\r\n                                        title=\"\"\r\n                                        className=\"image d-none d-sm-block d-lg-none\"\r\n                                    />\r\n                                </LazyLoad>\r\n                                <LazyLoad height={\"100%\"} once>\r\n                                    <GatsbyImage image={this.props.data.bgStep3Lg.childImageSharp.gatsbyImageData}\r\n                                        alt=\"\"\r\n                                        title=\"\"\r\n                                        className=\"image d-none d-lg-block d-xl-none\"\r\n                                    />\r\n                                </LazyLoad>\r\n                                <LazyLoad height={\"100%\"} once>\r\n                                    <GatsbyImage image={this.props.data.bgStep3.childImageSharp.gatsbyImageData}\r\n                                        alt=\"\"\r\n                                        title=\"\"\r\n                                        className=\"image d-none d-xl-block\"\r\n                                    />\r\n                                </LazyLoad>\r\n                                <InfoBox big>\r\n                                    <p>The beading on his corset and his red paint are inspired by the Maasai tribe and connect him visually to Mufasa, his father.</p>\r\n\r\n                                </InfoBox>\r\n                            </div>\r\n                        </Tween>\r\n\r\n                        <Tween\r\n                            to={{ opacity: 1 }}\r\n                            duration={3}\r\n                        >\r\n                            <div className=\"animation__background animation__background--step4\">\r\n                                <LazyLoad height={\"100%\"} once>\r\n                                    <GatsbyImage image={this.props.data.bgStep4Sm.childImageSharp.gatsbyImageData}\r\n                                        alt=\"\"\r\n                                        title=\"\"\r\n                                        className=\"image d-block d-sm-none\"\r\n                                    />\r\n                                </LazyLoad>\r\n                                <LazyLoad height={\"100%\"} once>\r\n                                    <GatsbyImage image={this.props.data.bgStep4Md.childImageSharp.gatsbyImageData}\r\n                                        alt=\"\"\r\n                                        title=\"\"\r\n                                        className=\"image d-none d-sm-block d-lg-none\"\r\n                                    />\r\n                                </LazyLoad>\r\n                                <LazyLoad height={\"100%\"} once>\r\n                                    <GatsbyImage image={this.props.data.bgStep4Lg.childImageSharp.gatsbyImageData}\r\n                                        alt=\"\"\r\n                                        title=\"\"\r\n                                        className=\"image d-none d-lg-block d-xl-none\"\r\n                                    />\r\n                                </LazyLoad>\r\n                                <LazyLoad height={\"100%\"} once>\r\n                                    <GatsbyImage image={this.props.data.bgStep4.childImageSharp.gatsbyImageData}\r\n                                        alt=\"\"\r\n                                        title=\"\"\r\n                                        className=\"image d-none d-xl-block\"\r\n                                    />\r\n                                </LazyLoad>\r\n                                <InfoBox big>\r\n                                    <p>His corset emphasises the width and strength of his shoulders.</p>\r\n\r\n                                </InfoBox>\r\n                            </div>\r\n                        </Tween>\r\n\r\n                    </Timeline>\r\n                    <ButtonScroll\r\n                        progress={progress}\r\n                        story\r\n                    />\r\n            </div>    \r\n        )\r\n\r\n    }\r\n\r\n    displayScene = (progress) => {\r\n\r\n        return (\r\n            <div className={`sticky`}>\r\n                <Absolute>\r\n\r\n                    <TitleBar \r\n                        onClick={() => this.props.callback()}\r\n                        absolute \r\n                        color=\"orange\"\r\n                    >\r\n                        <h2>Costumes and Masks</h2>\r\n                    </TitleBar>\r\n\r\n                    <Timeline totalProgress={progress} paused>\r\n\r\n                        <Tween\r\n                            duration={1}\r\n                        >\r\n                            <CopyBox\r\n                                copyVerticalPosition=\"toTop\"\r\n                                copyVerticalPositionMd=\"toTop\"\r\n                                copyHorizontalPosition=\"toLeft\"\r\n                                step1\r\n                                onTop\r\n                            >\r\n                                <p>\r\n                                    The costumes and masks in The Lion King tell a story.  The lions’ masks sit on top of their heads like crowns because they are royal.\r\n                                </p>\r\n                            </CopyBox>\r\n                        </Tween>\r\n\r\n                        <Tween\r\n                            ease=\"Strong.easeOut\"\r\n                            totalProgress={progress}\r\n                            paused\r\n                        >\r\n                            <div className=\"animation__background\">\r\n                                <LazyLoad height={\"100%\"} once>\r\n                                <GatsbyImage image={this.props.data.bgStep1Sm.childImageSharp.gatsbyImageData}\r\n                                    alt=\"\"\r\n                                    title=\"\"\r\n                                    className=\"image d-block d-sm-none\"\r\n                                />\r\n                                </LazyLoad>\r\n                                <LazyLoad height={\"100%\"} once>\r\n                                <GatsbyImage image={this.props.data.bgStep1Md.childImageSharp.gatsbyImageData}\r\n                                    alt=\"\"\r\n                                    title=\"\"\r\n                                    className=\"image d-none d-sm-block d-lg-none\"\r\n                                />\r\n                                </LazyLoad>\r\n                                <LazyLoad height={\"100%\"} once>\r\n                                <GatsbyImage image={this.props.data.bgStep1Lg.childImageSharp.gatsbyImageData}\r\n                                    alt=\"\"\r\n                                    title=\"\"\r\n                                    className=\"image d-none d-lg-block d-xl-none\"\r\n                                />\r\n                                </LazyLoad>\r\n                                <LazyLoad height={\"100%\"} once>\r\n                                <GatsbyImage image={this.props.data.bgStep1.childImageSharp.gatsbyImageData}\r\n                                    alt=\"\"\r\n                                    title=\"\"\r\n                                    className=\"image d-none d-xl-block\"\r\n                                />\r\n                                </LazyLoad>\r\n                                <InfoBox big>\r\n                                    <p>As an adult, Simba’s mask resembles a Roman warrior soldier with the plume down the centre, indicating that he is strong and brave.</p>\r\n\r\n                                </InfoBox>\r\n                            </div>\r\n                        </Tween>\r\n\r\n                        <Tween\r\n                            to={{ opacity: 1 }}\r\n                            duration={3}\r\n                        >\r\n                            <div className=\"animation__background animation__background--step2\">\r\n                                <LazyLoad height={\"100%\"} once>\r\n                                <GatsbyImage image={this.props.data.bgStep2Sm.childImageSharp.gatsbyImageData}\r\n                                    alt=\"\"\r\n                                    title=\"\"\r\n                                    className=\"image d-block d-sm-none\"\r\n                                />\r\n                                </LazyLoad>\r\n                                <LazyLoad height={\"100%\"} once>\r\n                                <GatsbyImage image={this.props.data.bgStep2Md.childImageSharp.gatsbyImageData}\r\n                                    alt=\"\"\r\n                                    title=\"\"\r\n                                    className=\"image d-none d-sm-block d-lg-none\"\r\n                                />\r\n                                </LazyLoad>\r\n                                <LazyLoad height={\"100%\"} once>\r\n                                <GatsbyImage image={this.props.data.bgStep2Lg.childImageSharp.gatsbyImageData}\r\n                                    alt=\"\"\r\n                                    title=\"\"\r\n                                    className=\"image d-none d-lg-block d-xl-none\"\r\n                                />\r\n                                </LazyLoad>\r\n                                <LazyLoad height={\"100%\"} once>\r\n                                <GatsbyImage image={this.props.data.bgStep2.childImageSharp.gatsbyImageData}\r\n                                    alt=\"\"\r\n                                    title=\"\"\r\n                                    className=\"image d-none d-xl-block\"\r\n                                />\r\n                                </LazyLoad>\r\n                                <InfoBox big>\r\n                                    <p>However his mask is jawless implying that he is still a young adult.</p>\r\n\r\n                                </InfoBox>\r\n                            </div>\r\n                        </Tween>\r\n\r\n                        <Tween\r\n                            to={{ opacity: 1 }}\r\n                            duration={3}\r\n                        >\r\n                            <div className=\"animation__background animation__background--step3\">\r\n                                <LazyLoad height={\"100%\"} once>\r\n                                <GatsbyImage image={this.props.data.bgStep3Sm.childImageSharp.gatsbyImageData}\r\n                                    alt=\"\"\r\n                                    title=\"\"\r\n                                    className=\"image d-block d-sm-none\"\r\n                                />\r\n                                </LazyLoad>\r\n                                <LazyLoad height={\"100%\"} once>\r\n                                <GatsbyImage image={this.props.data.bgStep3Md.childImageSharp.gatsbyImageData}\r\n                                    alt=\"\"\r\n                                    title=\"\"\r\n                                    className=\"image d-none d-sm-block d-lg-none\"\r\n                                />\r\n                                </LazyLoad>\r\n                                <LazyLoad height={\"100%\"} once>\r\n                                <GatsbyImage image={this.props.data.bgStep3Lg.childImageSharp.gatsbyImageData}\r\n                                    alt=\"\"\r\n                                    title=\"\"\r\n                                    className=\"image d-none d-lg-block d-xl-none\"\r\n                                />\r\n                                </LazyLoad>\r\n                                <LazyLoad height={\"100%\"} once>\r\n                                <GatsbyImage image={this.props.data.bgStep3.childImageSharp.gatsbyImageData}\r\n                                    alt=\"\"\r\n                                    title=\"\"\r\n                                    className=\"image d-none d-xl-block\"\r\n                                />\r\n                                </LazyLoad>\r\n                                <InfoBox big>\r\n                                    <p>The beading on his corset and his red paint are inspired by the Maasai tribe and connect him visually to Mufasa, his father.</p>\r\n\r\n                                </InfoBox>\r\n                            </div>\r\n                        </Tween>\r\n\r\n                        <Tween\r\n                            to={{ opacity: 1 }}\r\n                            duration={3}\r\n                        >\r\n                            <div className=\"animation__background animation__background--step4\">\r\n                                <LazyLoad height={\"100%\"} once>\r\n                                <GatsbyImage image={this.props.data.bgStep4Sm.childImageSharp.gatsbyImageData}\r\n                                    alt=\"\"\r\n                                    title=\"\"\r\n                                    className=\"image d-block d-sm-none\"\r\n                                />\r\n                                </LazyLoad>\r\n                                <LazyLoad height={\"100%\"} once>\r\n                                <GatsbyImage image={this.props.data.bgStep4Md.childImageSharp.gatsbyImageData}\r\n                                    alt=\"\"\r\n                                    title=\"\"\r\n                                    className=\"image d-none d-sm-block d-lg-none\"\r\n                                />\r\n                                </LazyLoad>\r\n                                <LazyLoad height={\"100%\"} once>\r\n                                <GatsbyImage image={this.props.data.bgStep4Lg.childImageSharp.gatsbyImageData}\r\n                                    alt=\"\"\r\n                                    title=\"\"\r\n                                    className=\"image d-none d-lg-block d-xl-none\"\r\n                                />\r\n                                </LazyLoad>\r\n                                <LazyLoad height={\"100%\"} once>\r\n                                <GatsbyImage image={this.props.data.bgStep4.childImageSharp.gatsbyImageData}\r\n                                    alt=\"\"\r\n                                    title=\"\"\r\n                                    className=\"image d-none d-xl-block\"\r\n                                />\r\n                                </LazyLoad>\r\n                                <InfoBox big>\r\n                                    <p>His corset emphasises the width and strength of his shoulders.</p>\r\n\r\n                                </InfoBox>\r\n                            </div>\r\n                        </Tween>\r\n\r\n                    </Timeline>\r\n                    <ButtonScroll\r\n                        progress={progress}\r\n                        story\r\n                    />\r\n                </Absolute>\r\n            </div>\r\n        )\r\n    }\r\n\r\n    render() {\r\n\r\n        let mql = window.matchMedia(media.sm).matches;\r\n\r\n        if (mql) {\r\n\r\n            return (\r\n                <>\r\n                <Wrapper active={this.props.active} id=\"costumes1Wrapper\">\r\n                    <div id=\"costumes1Scene\" />\r\n                    <Controller>\r\n                        <Scene\r\n                            triggerElement=\"#costumes1Scene\"\r\n                            triggerHook=\"onLeave\"\r\n                            duration={3000}\r\n                            pin\r\n                            \r\n                        >\r\n                            {(progress) => this.displayScene(progress)}\r\n                        </Scene>\r\n                    </Controller>\r\n                </Wrapper>\r\n                </>\r\n            )\r\n\r\n        } else {\r\n\r\n            return (\r\n                <>\r\n                    <Wrapper active={this.props.active} id=\"costumes1Wrapper1\">\r\n                        <div id=\"costumes1Scene1\" />\r\n                        <Controller>\r\n                            <Scene\r\n                                triggerElement=\"#costumes1Scene1\"\r\n                                triggerHook=\"onLeave\"\r\n                                duration={500}\r\n                                pin\r\n                                enabled={false}\r\n\r\n                            >\r\n                                {(progress) => this.displayMobileHeading(progress)}\r\n                            </Scene>\r\n                        </Controller>\r\n                    </Wrapper>\r\n                    <Wrapper active={this.props.active} id=\"costumes1Wrapper2\">\r\n                        <div id=\"costumes1Scene2\" />\r\n                        <Controller>\r\n                            <Scene\r\n                                triggerElement=\"#costumes1Scene2\"\r\n                                triggerHook=\"onLeave\"\r\n                                duration={2500}\r\n                                pin\r\n\r\n                            >\r\n                                {(progress) => this.displayMobileScene(progress)}\r\n                            </Scene>\r\n                        </Controller>\r\n                    </Wrapper>\r\n                </>\r\n            )\r\n        }\r\n    }\r\n}\r\n\r\nexport default (props) => (\r\n    <StaticQuery\r\n        query={graphql`\r\n            query {\r\n                bgStep1: file(relativePath: { eq: \"Interactive/Production/lke-im-prod-pt5-1-1920-min.jpg\" }) {\r\n                    childImageSharp {\r\n                        gatsbyImageData(width: 1920, quality: 100)\r\n                    }\r\n                }\r\n                \r\n                bgStep1Lg: file(relativePath: { eq: \"Interactive/Production/lke-im-prod-pt5-1-1440-min.jpg\" }) {\r\n                    childImageSharp {\r\n                        gatsbyImageData(width: 1440, quality: 100)\r\n                    }\r\n                }\r\n                \r\n                bgStep1Md: file(relativePath: { eq: \"Interactive/Production/lke-im-prod-pt5-1-991-min.jpg\" }) {\r\n                    childImageSharp {\r\n                        gatsbyImageData(width: 991, quality: 100)\r\n                    }\r\n                }\r\n                \r\n                bgStep1Sm: file(relativePath: { eq: \"Interactive/Production/lke-im-prod-pt5-1-576-min.jpg\" }) {\r\n                    childImageSharp {\r\n                        gatsbyImageData(width: 575, quality: 100)\r\n                    }\r\n                }\r\n                \r\n                bgStep2: file(relativePath: { eq: \"Interactive/Production/lke-im-prod-pt5-2-1920-min.jpg\" }) {\r\n                    childImageSharp {\r\n                        gatsbyImageData(width: 1920, quality: 100)\r\n                    }\r\n                }\r\n                \r\n                bgStep2Lg: file(relativePath: { eq: \"Interactive/Production/lke-im-prod-pt5-2-1440-min.jpg\" }) {\r\n                    childImageSharp {\r\n                        gatsbyImageData(width: 1440, quality: 100)\r\n                    }\r\n                }\r\n                \r\n                bgStep2Md: file(relativePath: { eq: \"Interactive/Production/lke-im-prod-pt5-2-991-min.jpg\" }) {\r\n                    childImageSharp {\r\n                        gatsbyImageData(width: 991, quality: 100)\r\n                    }\r\n                }\r\n                \r\n                bgStep2Sm: file(relativePath: { eq: \"Interactive/Production/lke-im-prod-pt5-2-576-min.jpg\" }) {\r\n                    childImageSharp {\r\n                        gatsbyImageData(width: 575, quality: 100)\r\n                    }\r\n                }\r\n                \r\n                bgStep3: file(relativePath: { eq: \"Interactive/Production/lke-im-prod-pt5-3-1920-min.jpg\" }) {\r\n                    childImageSharp {\r\n                        gatsbyImageData(width: 1920, quality: 100)\r\n                    }\r\n                }\r\n                \r\n                bgStep3Lg: file(relativePath: { eq: \"Interactive/Production/lke-im-prod-pt5-3-1440-min.jpg\" }) {\r\n                    childImageSharp {\r\n                        gatsbyImageData(width: 1440, quality: 100)\r\n                    }\r\n                }\r\n                \r\n                bgStep3Md: file(relativePath: { eq: \"Interactive/Production/lke-im-prod-pt5-3-991-min.jpg\" }) {\r\n                    childImageSharp {\r\n                        gatsbyImageData(width: 991, quality: 100)\r\n                    }\r\n                }\r\n                \r\n                bgStep3Sm: file(relativePath: { eq: \"Interactive/Production/lke-im-prod-pt5-3-576-min.jpg\" }) {\r\n                    childImageSharp {\r\n                        gatsbyImageData(width: 575, quality: 100)\r\n                    }\r\n                }\r\n                \r\n                bgStep4: file(relativePath: { eq: \"Interactive/Production/lke-im-prod-pt5-4-1920-min.jpg\" }) {\r\n                    childImageSharp {\r\n                        gatsbyImageData(width: 1920, quality: 100)\r\n                    }\r\n                }\r\n                \r\n                bgStep4Lg: file(relativePath: { eq: \"Interactive/Production/lke-im-prod-pt5-4-1440-min.jpg\" }) {\r\n                    childImageSharp {\r\n                        gatsbyImageData(width: 1440, quality: 100)\r\n                    }\r\n                }\r\n                \r\n                bgStep4Md: file(relativePath: { eq: \"Interactive/Production/lke-im-prod-pt5-4-991-min.jpg\" }) {\r\n                    childImageSharp {\r\n                        gatsbyImageData(width: 991, quality: 100)\r\n                    }\r\n                }\r\n                \r\n                bgStep4Sm: file(relativePath: { eq: \"Interactive/Production/lke-im-prod-pt5-4-576-min.jpg\" }) {\r\n                    childImageSharp {\r\n                        gatsbyImageData(width: 575, quality: 100)\r\n                    }\r\n                }\r\n            }\r\n\t\t`}\r\n        render={data => (\r\n            <Costumes1 data={data} active={props.active} title={props.title} callback={(e) => props.callback(e)}/>\r\n        )}\r\n    />\r\n)\r\n","// @flow\r\nimport React, {Component} from 'react';\r\nimport styled, {css} from 'styled-components';\r\nimport {media} from \"utils/Media\"\r\nimport {Controller, Scene} from 'react-scrollmagic';\r\nimport {graphql, StaticQuery} from \"gatsby\";\r\nimport CopyBox from \"components/shared/CopyBox\"\r\nimport BgImage from 'components/shared/BgImage'\r\n\r\nconst Wrapper = styled.div`\r\n  overflow: hidden;\r\n  \r\n  &.black-bg {\r\n      background-color: ${props => props.theme.colors.black};\r\n  }\r\n  \r\n  .scrollmagic-pin-spacer {\r\n    display: none !important;\r\n\r\n    ${props => props.active && css`\r\n        display: block !important;\r\n    `}\r\n\r\n    @media screen and (max-width: ${props => props.theme.sizes.sm}) {\r\n      padding-bottom: 0 !important;\r\n    }\r\n    \r\n    @media ${media.sm} {\r\n        display: block !important;\r\n    }\r\n  }\r\n  \r\n  .sticky, .sticky2 {\r\n    height: 0;\r\n    overflow: hidden;\r\n    width: 100% !important;\r\n    \r\n    ${props => props.active && css`\r\n        height: 100vh;\r\n    `}\r\n    \r\n    @media ${media.sm} {\r\n        height: 100vh;\r\n    }\r\n\r\n    &.auto-height {\r\n        height: auto;\r\n    }\r\n  }\r\n  \r\n  .fs {\r\n        height: 100vh;\r\n    }\r\n    \r\n     .slideInUp {\r\n        .no-touch & {\r\n            visibility: hidden;\r\n            opacity: 0;\r\n            transition: all 0.7s ease-out;\r\n            transform: translate3d(0, 50px, 0);\r\n        }\r\n        .no-touch .is-active & {\r\n            visibility: visible;\r\n            opacity: 1;\r\n            transform: translate3d(0, 0, 0);\r\n        }\r\n    }\r\n    \r\n    .pinContainer {\r\n        position: absolute;\r\n        top: 0;\r\n        left: 0;\r\n        height: 100vh;\r\n        width: 100vw;\r\n    }\r\n`;\r\n\r\nclass Costumes2 extends Component {\r\n    displayScene = (progress) => {\r\n        return (\r\n            <div className={`sticky`}>\r\n                <BgImage\r\n                    data={this.props.data}\r\n                    play={progress > 0}\r\n                    progress={progress}\r\n                    noTitleBar\r\n                />\r\n\r\n                <CopyBox\r\n                    copyHorizontalPosition=\"toRight\"\r\n                    copyHorizontalPositionMd=\"toLeft\"\r\n                    copyVerticalPosition=\"toTop\"\r\n                    copyVerticalPositionMd=\"toTop\"\r\n                    copyMdWidth=\"fullWidth\"\r\n                    step1\r\n                >\r\n                    <h3>Mufasa and Scar</h3>\r\n                    <p>\r\n                        The characters of Mufasa and Scar are brothers. They are both adult lions, but their appearance\r\n                        is vital in communicating their very different characters. The make-up, mask and costume,\r\n                        combined with the actors’ body language and stylised movement convey the differing\r\n                        personalities.\r\n                    </p>\r\n                </CopyBox>\r\n            </div>\r\n        )\r\n    }\r\n\r\n    displayMobileCopyScene = (progress) => {\r\n        return (\r\n            <div className={`sticky`}>\r\n                <CopyBox\r\n                    copyHorizontalPosition=\"toRight\"\r\n                    copyHorizontalPositionMd=\"toLeft\"\r\n                    copyVerticalPosition=\"toTop\"\r\n                    copyVerticalPositionMd=\"toTop\"\r\n                    copyMdWidth=\"fullWidth\"\r\n                    step1\r\n                >\r\n                    <h3>Mufasa and Scar</h3>\r\n                    <p>\r\n                        The characters of Mufasa and Scar are brothers. They are both adult lions, but their appearance\r\n                        is vital in communicating their very different characters. The make-up, mask and costume,\r\n                        combined with the actors’ body language and stylised movement convey the differing\r\n                        personalities.\r\n                    </p>\r\n                </CopyBox>\r\n            </div>\r\n        )\r\n    }\r\n\r\n    displayMobileBgScene = (progress) => {\r\n        return (\r\n            <div className={`sticky`}>\r\n                <BgImage\r\n                    data={this.props.data}\r\n                    play={progress > 0}\r\n                    progress={progress}\r\n                    noTitleBar\r\n                />\r\n            </div>\r\n        )\r\n    }\r\n\r\n    render() {\r\n\r\n        let mql = window.matchMedia(media.sm);\r\n\r\n        if (mql.matches) {\r\n\r\n            return (\r\n            <>\r\n            <Wrapper active={this.props.active} id=\"costumes2Wrapper\" className=\"\">\r\n                <div id=\"costumes2Scene\" ref={costumes2Scene => this.costumes2Scene = costumes2Scene} />\r\n                <Controller>\r\n                    <Scene\r\n                        triggerElement=\"#costumes2Scene\"\r\n                        triggerHook=\"onLeave\"\r\n                        duration={500}\r\n                        pin\r\n                    >\r\n                        {(progress) => this.displayScene(progress)}\r\n                    </Scene>\r\n                </Controller>\r\n            </Wrapper>\r\n            </>\r\n            )\r\n\r\n        } else {\r\n\r\n            return (\r\n                <>\r\n                    <Wrapper active={this.props.active} id=\"costumes2Wrapper2\" className=\"black-bg\">\r\n                        <div id=\"costumes2Scene2\" ref={costumes2Scene2 => this.costumes2Scene2 = costumes2Scene2} />\r\n                        <Controller>\r\n                            <Scene\r\n                                triggerElement=\"#costumes2Scene2\"\r\n                                triggerHook=\"onLeave\"\r\n                                duration={500}\r\n                                pin\r\n                                enabled={false}\r\n                            >\r\n                                {(progress) => this.displayMobileCopyScene(progress)}\r\n                            </Scene>\r\n                        </Controller>\r\n                    </Wrapper>\r\n\r\n                    <Wrapper active={this.props.active} id=\"costumes2Wrapper3\" className=\"\">\r\n                        <div id=\"costumes2Scene3\" ref={costumes2Scene3 => this.costumes2Scene3 = costumes2Scene3} />\r\n                        <Controller>\r\n                            <Scene\r\n                                triggerElement=\"#costumes2Scene3\"\r\n                                triggerHook=\"onLeave\"\r\n                                duration={500}\r\n                                pin\r\n                                enabled={false}\r\n                            >\r\n                                {(progress) => this.displayMobileBgScene(progress)}\r\n                            </Scene>\r\n                        </Controller>\r\n                    </Wrapper>\r\n                </>\r\n            )\r\n\r\n        }\r\n    }\r\n}\r\n\r\nexport default (props) => (\r\n    <StaticQuery\r\n        query={graphql`\r\n            query {\r\n                bgStep1: file(relativePath: { eq: \"Interactive/Production/lke-im-prod-pt6-1920-min.jpg\" }) {\r\n                    childImageSharp {\r\n                        gatsbyImageData(width: 1920, quality: 100)\r\n                    }\r\n                }\r\n                \r\n                bgStep1Lg: file(relativePath: { eq: \"Interactive/Production/lke-im-prod-pt6-1440-min.jpg\" }) {\r\n                    childImageSharp {\r\n                        gatsbyImageData(width: 1440, quality: 100)\r\n                    }\r\n                }\r\n                \r\n                bgStep1Md: file(relativePath: { eq: \"Interactive/Production/lke-im-prod-pt6-991-min.jpg\" }) {\r\n                    childImageSharp {\r\n                        gatsbyImageData(width: 991, quality: 100)\r\n                    }\r\n                }\r\n                \r\n                bgStep1Sm: file(relativePath: { eq: \"Interactive/Production/lke-im-prod-pt6-576-min.jpg\" }) {\r\n                    childImageSharp {\r\n                        gatsbyImageData(width: 575, quality: 100)\r\n                    }\r\n                }\r\n            }\r\n\t\t`}\r\n        render={data => (\r\n            <Costumes2 data={data} active={props.active} title={props.title}/>\r\n        )}\r\n    />\r\n)\r\n","// @flow\nimport React, {Component} from 'react';\nimport styled, {css} from 'styled-components';\n\nimport {Controller, Scene} from 'react-scrollmagic';\nimport {graphql, StaticQuery} from \"gatsby\";\nimport {media} from \"utils/Media\"\nimport SwipeScene from \"components/shared/SwipeScene\"\nimport ButtonSwipe from \"components/shared/ButtonSwipe\"\nimport CopyBox from \"components/shared/CopyBox\"\nimport BgImage from 'components/shared/BgImage'\n\nconst Wrapper = styled.div`\n    overflow: hidden;\n    position: relative;\n\n .scrollmagic-pin-spacer {\n    display: none !important;\n\n    ${props => props.active && css`\n        display: block !important;\n    `}\n\n\n    @media screen and (max-width: ${props => props.theme.sizes.sm}) {\n        padding-top: 0 !important;\n        padding-bottom: 0 !important;\n    }\n\n    @media ${media.sm} {\n        display: block !important;\n    }\n  }\n  \n  .sticky, .sticky2 { \n    height: 0;\n    overflow: hidden;\n    width: 100% !important;\n    background: #000;\n    \n    ${props => props.active && css`\n        height: 100vh;\n    `}\n    \n    @media ${media.sm} {\n        height: 100vh;\n    }\n  }\n  \n  .fs {\n        height: 100vh;\n    }\n    \n  .slideInUp {\n        .no-touch & {\n            visibility: hidden;\n            opacity: 0;\n            transition: all 0.7s ease-out;\n            transform: translate3d(0, 50px, 0);\n        }\n        .no-touch .is-active & {\n            visibility: visible;\n            opacity: 1;\n            transform: translate3d(0, 0, 0);\n        }\n    }\n    \n    .pinContainer {\n        position: absolute;\n        top: 0;\n        left: 0;\n        height: 100vh;\n        width: 100vw;\n    }\n`;\n\nclass Costumes3 extends Component {\n\n    displayMobile1 = (progress) => {\n        return (\n            <div className=\"sticky2\">\n\n                <BgImage\n                    data={this.props.data}\n                    play={progress > 0}\n                    progress={progress}\n                    noTitleBar\n                />\n\n                <ButtonSwipe\n                    target={this.costumes31Swipe}\n                    play={true}\n                />\n\n                <SwipeScene\n                    ref={costumes31Swipe => this.costumes31Swipe = costumes31Swipe}\n                    bgImageSm={this.props.data.bgStep1Sm.childImageSharp.gatsbyImageData}\n                    bgImageMd={this.props.data.bgStep1Md.childImageSharp.gatsbyImageData}\n                    bgImageLg={this.props.data.bgStep1Lg.childImageSharp.gatsbyImageData}\n                    bgImageXl={this.props.data.bgStep1.childImageSharp.gatsbyImageData}\n                    changeBg={false}\n                    copyHorizontalPosition=\"toRight\"\n                    copyHorizontalPositionMd=\"toRight\"\n                    copyVerticalPositionMd=\"toTop\"\n                    copyMdWidth=\"narrow\"\n                    text=\"<h3>Mufasa</h3>\n                    <p>The shape of his mask connects to the circle motif, central to the production Symmetrical makeup shows he is balanced.</p>\n                    <p>His broad collar emphasises his strength.</p>\n                    <p>Mufasa’s braids, red makeup, beaded corset and swords are inspired by the Maasai tribe.</p>\"\n                />\n\n                \n\n            </div>\n        )\n    }\n\n    displayMobile2 = (progress) => {\n\n        return (\n            <div className=\"sticky2\">\n\n                <BgImage\n                    data={this.props.data}\n                    overrideDefaultImage={true}\n                    play={progress > 0}\n                    progress={progress}\n                    noTitleBar\n                />\n\n                <ButtonSwipe\n                    target={this.costumes3Swipe}\n                    play={true}\n                />\n\n                <SwipeScene\n                    ref={costumes3Swipe => this.costumes3Swipe = costumes3Swipe}\n                    bgImageSm={this.props.data.bgStep2Sm.childImageSharp.gatsbyImageData}\n                    bgImageMd={this.props.data.bgStep2Md.childImageSharp.gatsbyImageData}\n                    bgImageLg={this.props.data.bgStep2Lg.childImageSharp.gatsbyImageData}\n                    bgImageXl={this.props.data.bgStep2.childImageSharp.gatsbyImageData}\n                    changeBg={false}\n                    copyHorizontalPosition=\"toRight\"\n                    copyHorizontalPositionMd=\"toRight\"\n                    copyVerticalPositionMd=\"toTop\"\n                    copyMdWidth=\"narrow\"\n                    text=\"<h3>Scar</h3><p>A spikey mane protrudes from the top of his mask.</p><p>Scar’s arched, asymmetrical eyebrows show that he is imbalanced and cynical.</p><p>Bamboo on his costume exterior makes Scar appear skeletal and frail.</p><p>Scar’s silhouette is inspired by Japanese Samurai, he’s noble but can be ruthless.</p>\"\n                />\n\n                \n\n            </div>\n        )\n    }\n\n    displayScene = (progress) => {\n        return (\n            <div className=\"sticky2\">\n                <BgImage\n                    data={this.props.data}\n                    play={progress > 0}\n                    progress={progress}\n                    noTitleBar\n                />\n\n                <ButtonSwipe\n                    target={this.costumes3Swipe}\n                    play={progress > 0}\n                />\n\n                <CopyBox\n                    copyHorizontalPosition=\"toRight\"\n                    copyHorizontalPositionMd=\"toRight\"\n                    copyVerticalPositionMd=\"toTop\"\n                    copyMdWidth=\"narrow\"\n                    step1\n                >\n                    <h3>Mufasa</h3>\n                    <p>The shape of his mask connects to the circle motif, central to the production Symmetrical makeup shows he is balanced.</p>\n                    <p>His broad collar emphasises his strength.</p>\n                    <p>Mufasa’s braids, red makeup, beaded corset and swords are inspired by the Maasai tribe.</p>\n                </CopyBox>\n\n                <SwipeScene\n                    ref={costumes3Swipe => this.costumes3Swipe = costumes3Swipe}\n                    bgImageSm={this.props.data.bgStep2Sm.childImageSharp.gatsbyImageData}\n                    bgImageMd={this.props.data.bgStep2Md.childImageSharp.gatsbyImageData}\n                    bgImageLg={this.props.data.bgStep2Lg.childImageSharp.gatsbyImageData}\n                    bgImageXl={this.props.data.bgStep2.childImageSharp.gatsbyImageData}\n                    copyHorizontalPosition=\"toRight\"\n                    copyHorizontalPositionMd=\"toRight\"\n                    copyVerticalPositionMd=\"toTop\"\n                    copyMdWidth=\"narrow\"\n                    text=\"<h3>Scar</h3><p>A spikey mane protrudes from the top of his mask.</p><p>Scar’s arched, asymmetrical eyebrows show that he is imbalanced and cynical.</p><p>Bamboo on his costume exterior makes Scar appear skeletal and frail.</p><p>Scar’s silhouette is inspired by Japanese Samurai, he’s noble but can be ruthless.</p>\"\n                />\n            </div>\n        )\n    }\n\n    render() {\n\n        let mql = window.matchMedia(media.sm).matches;\n\n        if (mql) {\n            return (\n                <Wrapper active={this.props.active} id=\"costumes3Wrapper\">\n                    <div id=\"costumes3Scene\" ref={costumes3Scene => this.costumes3Scene = costumes3Scene}/>\n                    <Controller>\n                        <Scene\n                            triggerElement=\"#costumes3Scene\"\n                            triggerHook=\"onLeave\"\n                            duration={500}\n                            pin\n                        >\n                            {(progress) => this.displayScene(progress)}\n                        </Scene>\n                    </Controller>\n                </Wrapper>\n            )\n        } else {\n            return (\n            <>\n            <Wrapper active={this.props.active} id=\"costumes3Wrapper\">\n                <div id=\"costumes3Scene\" ref={costumes3Scene => this.costumes3Scene = costumes3Scene} />\n                <Controller>\n                    <Scene\n                        triggerElement=\"#costumes3Scene\"\n                        triggerHook=\"onLeave\"\n                        duration={3000}\n                        pin\n                        enabled={false}\n                       \n                    >\n                        {(progress) => this.displayMobile1(progress)}\n                    </Scene>\n                </Controller>\n            </Wrapper>   \n            <Wrapper active={this.props.active} id=\"costumes3Wrapper1\">\n                <div id=\"costumes3Scene1\" ref={costumes3Scene1 => this.costumes3Scene1 = costumes3Scene1} />\n                <Controller>\n                    <Scene\n                        triggerElement=\"#costumes3Scene1\"\n                        triggerHook=\"onLeave\"\n                        duration={3000}\n                        pin\n                        enabled={false}\n                        \n                    >\n                        {(progress) => this.displayMobile2(progress)}\n                    </Scene>\n                </Controller>\n            </Wrapper>   \n            </>\n            )\n\n        }\n    }\n}\n\n\nexport default (props) => (\n    <StaticQuery\n        query={graphql`\n            query {\n                 bgStep1: file(relativePath: { eq: \"Interactive/Production/lke-im-prod-pt7-1-1920-min.jpg\" }) {\n                    childImageSharp {\n                        gatsbyImageData(width: 1920, quality: 100)\n                    }\n                }\n                \n                bgStep1Lg: file(relativePath: { eq: \"Interactive/Production/lke-im-prod-pt7-1-1440-min.jpg\" }) {\n                    childImageSharp {\n                        gatsbyImageData(width: 1440, quality: 100)\n                    }\n                }\n                \n                bgStep1Md: file(relativePath: { eq: \"Interactive/Production/lke-im-prod-pt7-1-991-min.jpg\" }) {\n                    childImageSharp {\n                        gatsbyImageData(width: 991, quality: 100)\n                    }\n                }\n                \n                bgStep1Sm: file(relativePath: { eq: \"Interactive/Production/lke-im-prod-pt7-1-576-min.jpg\" }) {\n                    childImageSharp {\n                        gatsbyImageData(width: 575, quality: 100)\n                    }\n                }\n                \n               bgStep2: file(relativePath: { eq: \"Interactive/Production/lke-im-prod-pt7-2-1920-min.jpg\" }) {\n                    childImageSharp {\n                        gatsbyImageData(width: 1920, quality: 100)\n                    }\n                }\n                \n                bgStep2Lg: file(relativePath: { eq: \"Interactive/Production/lke-im-prod-pt7-2-1440-min.jpg\" }) {\n                    childImageSharp {\n                        gatsbyImageData(width: 1440, quality: 100)\n                    }\n                }\n                \n                bgStep2Md: file(relativePath: { eq: \"Interactive/Production/lke-im-prod-pt7-2-991-min.jpg\" }) {\n                    childImageSharp {\n                        gatsbyImageData(width: 991, quality: 100)\n                    }\n                }\n                \n                bgStep2Sm: file(relativePath: { eq: \"Interactive/Production/lke-im-prod-pt7-2-576-min.jpg\" }) {\n                    childImageSharp {\n                        gatsbyImageData(width: 575, quality: 100)\n                    }\n                }\n            }\n\t\t`}\n        render={data => (\n            <Costumes3 data={data} active={props.active} title={props.title}/>\n        )}\n    />\n)\n","// @flow\nimport React, {Component} from 'react';\nimport styled, {css} from 'styled-components';\nimport {media} from \"utils/Media\"\nimport {Controller, Scene} from 'react-scrollmagic';\nimport {graphql, StaticQuery} from \"gatsby\";\nimport CopyBox from \"components/shared/CopyBox\"\nimport HoldScene from \"components/shared/HoldScene\"\nimport ButtonHold from \"components/shared/ButtonHold\"\nimport BgImage from 'components/shared/BgImage'\n\nconst Wrapper = styled.div`\n    overflow: hidden;\n    \n .scrollmagic-pin-spacer {\n    display: none !important;\n\n    ${props => props.active && css`\n        display: block !important;\n    `}\n\n    @media ${media.sm} {\n        display: block !important;\n    }\n  }\n  \n  .sticky, .sticky2 { \n    height: 0;\n    overflow: hidden;\n    width: 100% !important;\n    \n    ${props => props.active && css`\n        height: 100vh;\n    `}\n    \n    @media ${media.sm} {\n        height: 100vh;\n    }\n  }\n  \n  .fs {\n        height: 100vh;\n    }\n    \n  .slideInUp {\n        .no-touch & {\n            visibility: hidden;\n            opacity: 0;\n            transition: all 0.7s ease-out;\n            transform: translate3d(0, 50px, 0);\n        }\n        .no-touch .is-active & {\n            visibility: visible;\n            opacity: 1;\n            transform: translate3d(0, 0, 0);\n        }\n    }\n    \n    .pinContainer {\n        position: absolute;\n        top: 0;\n        left: 0;\n        height: 100vh;\n        width: 100vw;\n    }\n`;\n\nclass Costumes4 extends Component {\n    render() {\n\n        let mql = window.matchMedia(media.sm).matches;\n\n        return (\n            <Wrapper active={this.props.active} id=\"costumes4Wrapper\">\n                <div id=\"costumes4Scene\"/>\n                <Controller>\n                    <Scene\n                        triggerElement=\"#costumes4Scene\"\n                        triggerHook=\"onLeave\"\n                        duration={500}\n                        pin\n                    >\n                        {(progress) => (\n                            <div className={`sticky2`}>\n                                <BgImage\n                                    data={this.props.data}\n                                    play={progress > 0}\n                                    progress={progress}\n                                    noTitleBar\n                                />\n\n                                <CopyBox\n                                    copyHorizontalPosition=\"toLeft\"\n                                    copyVerticalPosition=\"toTop\"\n                                    copyVerticalPositionMd=\"toTop\"\n                                    copyMdWidth=\"fullWidth\"\n                                    step1\n                                >\n                                    <h3>Rafiki</h3>\n                                    <p>\n                                        Rafiki is unusual because she does not wear a mask and does not operate any puppet.  Her animal persona of a mandrill monkey is created through costume and makeup. Her elaborate costume elongates her arms and shortens her legs while her makeup is used to accentuate her facial features.  Julie Taymor made Rafiki female and based part of her character on South African Sangoma, hence the medicinal items present on her costume.\n                                    </p>\n                                </CopyBox>\n\n                                <ButtonHold\n                                    play={progress > 0}\n                                    target={this.costumes4HoldScene}\n                                />\n\n                                <HoldScene\n                                    ref={costumes4HoldScene => this.costumes4HoldScene = costumes4HoldScene}\n                                    bgImageSm={this.props.data.bgStep2Sm.childImageSharp.gatsbyImageData}\n                    bgImageMd={this.props.data.bgStep2Md.childImageSharp.gatsbyImageData}\n                    bgImageLg={this.props.data.bgStep2Lg.childImageSharp.gatsbyImageData}\n                    bgImageXl={this.props.data.bgStep2.childImageSharp.gatsbyImageData}\n                                    copyHorizontalPosition=\"toLeft\"\n                                    copyVerticalPosition=\"toMiddle\"\n                                    copyVerticalPositionMd=\"toTop\"\n                                    copyMdWidth=\"fullWidth\"\n                                    text=\"<p>Sangoma are people who are respected and trusted in their community to act as spiritual guides and traditional healers for others. They are usually women.</p>\"\n                                />\n\n                            </div>\n                        )}\n                    </Scene>\n                </Controller>\n            </Wrapper>\n        )\n    }\n}\n\n\nexport default (props) => (\n    <StaticQuery\n        query={graphql`\n            query {\n                 bgStep1: file(relativePath: { eq: \"Interactive/Production/lke-im-prod-pt8-1-1920-min.jpg\" }) {\n                    childImageSharp {\n                        gatsbyImageData(width: 1920, quality: 100)\n                    }\n                }\n                \n                bgStep1Lg: file(relativePath: { eq: \"Interactive/Production/lke-im-prod-pt8-1-1440-min.jpg\" }) {\n                    childImageSharp {\n                        gatsbyImageData(width: 1440, quality: 100)\n                    }\n                }\n                \n                bgStep1Md: file(relativePath: { eq: \"Interactive/Production/lke-im-prod-pt8-1-991-min.jpg\" }) {\n                    childImageSharp {\n                        gatsbyImageData(width: 991, quality: 100)\n                    }\n                }\n                \n                bgStep1Sm: file(relativePath: { eq: \"Interactive/Production/lke-im-prod-pt8-1-576-min.jpg\" }) {\n                    childImageSharp {\n                        gatsbyImageData(width: 575, quality: 100)\n                    }\n                }\n                \n               bgStep2: file(relativePath: { eq: \"Interactive/Production/lke-im-prod-pt8-2-1920-min.jpg\" }) {\n                    childImageSharp {\n                        gatsbyImageData(width: 1920, quality: 100)\n                    }\n                }\n                \n                bgStep2Lg: file(relativePath: { eq: \"Interactive/Production/lke-im-prod-pt8-2-1440-min.jpg\" }) {\n                    childImageSharp {\n                        gatsbyImageData(width: 1440, quality: 100)\n                    }\n                }\n                \n                bgStep2Md: file(relativePath: { eq: \"Interactive/Production/lke-im-prod-pt8-2-991-min.jpg\" }) {\n                    childImageSharp {\n                        gatsbyImageData(width: 991, quality: 100)\n                    }\n                }\n                \n                bgStep2Sm: file(relativePath: { eq: \"Interactive/Production/lke-im-prod-pt8-2-576-min.jpg\" }) {\n                    childImageSharp {\n                        gatsbyImageData(width: 575, quality: 100)\n                    }\n                }\n            }\n\t\t`}\n        render={data => (\n            <Costumes4 data={data} active={props.active} title={props.title}/>\n        )}\n    />\n)\n","// @flow\nimport React, {Component} from 'react';\nimport styled, {css} from 'styled-components';\nimport {Controller, Scene} from 'react-scrollmagic';\nimport {Tween, Timeline} from 'react-gsap';\nimport {graphql, StaticQuery} from \"gatsby\";\nimport {media} from \"utils/Media\"\nimport {GatsbyImage} from \"gatsby-plugin-image\";\nimport TitleBar from 'components/shared/TitleBar'\nimport CopyBox from \"components/shared/CopyBox\"\nimport ButtonScroll from \"components/shared/ScrollButton\"\nimport Absolute from \"components/shared/Absolute\"\nimport LazyLoad from \"react-lazyload\"\n\nconst Wrapper = styled.div`\n    overflow: hidden;\n    \n  .scrollmagic-pin-spacer {\n    display: none !important;\n\n    ${props => props.active && css`\n        display: block !important;\n    `}\n\n    @media ${media.sm} {\n        display: block !important;\n    }\n  }\n\n    h2 {\n    font-size: 1.75rem;\n    line-height: 120%;\n\n    @media ${media.lg} {\n      font-size: initial;\n      line-height: initial;\n    }\n\n  }\n  \n  .sticky, .sticky2 { \n    height: 0;\n    overflow: hidden;\n    width: 100% !important;\n    \n    ${props => props.active && css`\n        height: 100vh;\n    `}\n    \n    @media ${media.sm} {\n        height: 100vh;\n    }\n  }\n  \n  .fs {\n        height: 100vh;\n    }\n    \n  .slideInUp {\n        .no-touch & {\n            visibility: hidden;\n            opacity: 0;\n            transition: all 0.7s ease-out;\n            transform: translate3d(0, 50px, 0);\n        }\n        .no-touch .is-active & {\n            visibility: visible;\n            opacity: 1;\n            transform: translate3d(0, 0, 0);\n        }\n    }\n    \n    .pinContainer {\n        position: absolute;\n        top: 0;\n        left: 0;\n        height: 100vh;\n        width: 100vw;\n    }\n    \n    .animation__background {\n        width: 100vw;\n        height: 100vh;\n        position: absolute;\n        left: 0;\n        z-index: 2;\n        top: 0;\n        \n        &--step2 {\n            opacity: 0;\n        }\n        \n        &--overlay {\n            position: absolute;\n            top: 0;\n            left: 0;\n            width: 100%;\n            height: 100%;\n            z-index: 3;\n            background-image: linear-gradient(#000, transparent);\n        }\n        \n        .image {\n            width: 100vw;\n            height: 100vh;\n        }\n    }\n`;\n\nclass Puppetry1 extends Component {\n    displayScene = (progress) => {\n        return (\n            <div className={`sticky2`}>\n\n                <Absolute>\n\n                    <TitleBar \n                        onClick={() => this.props.callback()}\n                        absolute \n                        color=\"purple\"\n                    >\n                        <h2>Puppetry</h2>\n                    </TitleBar>\n\n                <Timeline totalProgress={progress} paused>\n                    <Tween\n                        to={{\n                            scale: 1.1\n                        }}\n                        ease=\"Strong.easeOut\"\n                        totalProgress={progress}\n                        paused\n                    >\n                        <div className=\"animation__background\">\n                            <Tween\n                                to={{\n                                    backgroundImage: \"linear-gradient(transparent, transparent)\"\n                                }}\n                                ease=\"Strong.easeOut\"\n                                totalProgress={progress}\n                                paused\n                            >\n                                <div className=\"animation__background--overlay\"/>\n                            </Tween>\n                            <LazyLoad height={\"100%\"} once>\n                            <GatsbyImage image={this.props.data.bgStep1Sm.childImageSharp.gatsbyImageData}\n                                alt=\"\"\n                                title=\"\"\n                                className=\"image d-block d-sm-none\"\n                            />\n                            </LazyLoad>\n                            <LazyLoad height={\"100%\"} once>\n                            <GatsbyImage image={this.props.data.bgStep1Md.childImageSharp.gatsbyImageData}\n                                alt=\"\"\n                                title=\"\"\n                                className=\"image d-none d-sm-block d-lg-none\"\n                            />\n                            </LazyLoad>\n                            <LazyLoad height={\"100%\"} once>\n                            <GatsbyImage image={this.props.data.bgStep1Lg.childImageSharp.gatsbyImageData}\n                                alt=\"\"\n                                title=\"\"\n                                className=\"image d-none d-lg-block d-xl-none\"\n                            />\n                            </LazyLoad>\n                            <LazyLoad height={\"100%\"} once>\n                            <GatsbyImage image={this.props.data.bgStep1.childImageSharp.gatsbyImageData}\n                                alt=\"\"\n                                title=\"\"\n                                className=\"image d-none d-xl-block\"\n                            />\n                            </LazyLoad>\n                        </div>\n                    </Tween>\n\n                    <Tween\n                        from={{backgroundImage: \"linear-gradient(#fff, #fff)\", opacity: 1}}\n                        to={{\n                            backgroundImage: \"linear-gradient(#fff, transparent)\",\n                            opacity: 0,\n                            delay: 5\n                        }}\n                        duration={5}\n                    >\n                        <CopyBox\n                            copyHorizontalPosition=\"toLeft\"\n                            copyVerticalPosition=\"toMiddle\"\n                            copyVerticalPositionMd=\"toTop\"\n                            copyMdWidth=\"narrow\"\n                            step1\n                        >\n                            <p>\n                                Julie Taymor used a huge variety of puppets to bring the story of The Lion King to\n                                life on stage.\n                            </p>\n                        </CopyBox>\n                    </Tween>\n\n                    <Tween\n                        to={{opacity: 1, scale: 1.1}}\n                        duration={3}\n                    >\n                        <div className=\"animation__background animation__background--step2\">\n                            <LazyLoad height={\"100%\"} once>\n                            <GatsbyImage image={this.props.data.bgStep2Sm.childImageSharp.gatsbyImageData}\n                                alt=\"\"\n                                title=\"\"\n                                className=\"image d-block d-sm-none\"\n                            />\n                            </LazyLoad>\n                            <LazyLoad height={\"100%\"} once>\n                            <GatsbyImage image={this.props.data.bgStep2Md.childImageSharp.gatsbyImageData}\n                                alt=\"\"\n                                title=\"\"\n                                className=\"image d-none d-sm-block d-lg-none\"\n                            />\n                            </LazyLoad>\n                            <LazyLoad height={\"100%\"} once>\n                            <GatsbyImage image={this.props.data.bgStep2Lg.childImageSharp.gatsbyImageData}\n                                alt=\"\"\n                                title=\"\"\n                                className=\"image d-none d-lg-block d-xl-none\"\n                            />\n                            </LazyLoad>\n                            <LazyLoad height={\"100%\"} once>\n                            <GatsbyImage image={this.props.data.bgStep2.childImageSharp.gatsbyImageData}\n                                alt=\"\"\n                                title=\"\"\n                                className=\"image d-none d-xl-block\"\n                            />\n                            </LazyLoad>\n                        </div>\n                    </Tween>\n\n                    <Tween\n                        to={{opacity: 1}}\n                        duration={3}\n                    >\n                        <CopyBox\n                            copyVerticalPosition=\"toMiddle\"\n                            copyHorizontalPosition=\"toLeft\"\n                            copyMdWidth=\"narrow\"\n                            step2\n                        >\n                            \n                            <p>\n                                They include hand puppets, rod puppets, shadow puppets.\n                            </p>\n                        </CopyBox>\n                    </Tween>\n                </Timeline>\n                <ButtonScroll story progress={progress}/>\n                </Absolute>\n            </div>\n        )\n    }\n\n    render() {\n        return (\n            <Wrapper active={this.props.active} id=\"puppetry1Wrapper\">\n                <div id=\"puppetry1Scene\" ref={puppetry1Scene => this.puppetry1Scene = puppetry1Scene}/>\n                <Controller>\n                    <Scene\n                        triggerElement=\"#puppetry1Scene\"\n                        triggerHook=\"onLeave\"\n                        duration={2000}\n                        pin\n                    >\n                        {(progress) => this.displayScene(progress)}\n                    </Scene>\n                </Controller>\n            </Wrapper>\n        )\n    }\n}\n\n\nexport default (props) => (\n    <StaticQuery\n        query={graphql`\n            query {\n                 bgStep1: file(relativePath: { eq: \"Interactive/Production/lke-im-prod-pt9-1-1920-min.jpg\" }) {\n                    childImageSharp {\n                        gatsbyImageData(width: 1920, quality: 100)\n                    }\n                }\n                \n                bgStep1Lg: file(relativePath: { eq: \"Interactive/Production/lke-im-prod-pt9-1-1440-min.jpg\" }) {\n                    childImageSharp {\n                        gatsbyImageData(width: 1440, quality: 100)\n                    }\n                }\n                \n                bgStep1Md: file(relativePath: { eq: \"Interactive/Production/lke-im-prod-pt9-1-991-min.jpg\" }) {\n                    childImageSharp {\n                        gatsbyImageData(width: 991, quality: 100)\n                    }\n                }\n                \n                bgStep1Sm: file(relativePath: { eq: \"Interactive/Production/lke-im-prod-pt9-1-576-min.jpg\" }) {\n                    childImageSharp {\n                        gatsbyImageData(width: 575, quality: 100)\n                    }\n                }\n                \n                bgStep2: file(relativePath: { eq: \"Interactive/Production/lke-im-prod-pt9-2-1920-min.jpg\" }) {\n                    childImageSharp {\n                        gatsbyImageData(width: 1920, quality: 100)\n                    }\n                }\n                \n                bgStep2Lg: file(relativePath: { eq: \"Interactive/Production/lke-im-prod-pt9-2-1440-min.jpg\" }) {\n                    childImageSharp {\n                        gatsbyImageData(width: 1440, quality: 100)\n                    }\n                }\n                \n                bgStep2Md: file(relativePath: { eq: \"Interactive/Production/lke-im-prod-pt9-2-991-min.jpg\" }) {\n                    childImageSharp {\n                        gatsbyImageData(width: 991, quality: 100)\n                    }\n                }\n                \n                bgStep2Sm: file(relativePath: { eq: \"Interactive/Production/lke-im-prod-pt9-2-576-min.jpg\" }) {\n                    childImageSharp {\n                        gatsbyImageData(width: 575, quality: 100)\n                    }\n                }\n            }\n\t\t`}\n        render={data => (\n            <Puppetry1 \n                data={data} \n                active={props.active}\n                title={props.title}\n                callback={(e) => props.callback(e)}\n            />\n        )}\n    />\n)\n","// @flow\nimport React, {Component} from 'react';\nimport styled, {css} from 'styled-components';\n\nimport {Controller, Scene} from 'react-scrollmagic';\nimport {graphql, StaticQuery} from \"gatsby\";\nimport {media} from \"utils/Media\"\nimport SwipeScene from \"components/shared/SwipeScene\"\nimport ButtonSwipe from \"components/shared/ButtonSwipe\"\nimport CopyBox from \"components/shared/CopyBox\"\nimport BgImage from 'components/shared/BgImage'\n\nconst Wrapper = styled.div`\n    overflow: hidden;\n    position: relative;\n\n .scrollmagic-pin-spacer {\n    display: none !important;\n\n    ${props => props.active && css`\n        display: block !important;\n    `}\n\n    @media screen and (max-width: ${props => props.theme.sizes.sm}) {\n        padding-bottom: 0 !important;\n    }\n\n    @media ${media.sm} {\n        display: block !important;\n    }\n  }\n\n  .black-bg {\n      background: #000;\n  }\n  \n  .sticky, .sticky2 { \n    height: 0;\n    overflow: hidden;\n    width: 100% !important;\n    \n    ${props => props.active && css`\n        height: 100vh;\n    `}\n    \n    @media ${media.sm} {\n        height: 100vh;\n    }\n  }\n  \n  .fs {\n        height: 100vh;\n    }\n    \n  .slideInUp {\n        .no-touch & {\n            visibility: hidden;\n            opacity: 0;\n            transition: all 0.7s ease-out;\n            transform: translate3d(0, 50px, 0);\n        }\n        .no-touch .is-active & {\n            visibility: visible;\n            opacity: 1;\n            transform: translate3d(0, 0, 0);\n        }\n    }\n    \n    .pinContainer {\n        position: absolute;\n        top: 0;\n        left: 0;\n        height: 100vh;\n        width: 100vw;\n    }\n`;\n\nclass Puppetry2 extends Component {\n\n    displayMobileHeading = (progress) => {\n\n        return (\n            <div className=\"sticky2 black-bg\">\n            <CopyBox\n                copyHorizontalPosition=\"toRight\"\n                copyHorizontalPositionMd=\"toRight\"\n                copyVerticalPosition=\"toMiddle\"\n                copyMdWidth=\"narrow\"\n                step1\n            >\n                <h3>Bunraku-INSPIRED puppets</h3>\n                <p>The puppets of Zazu and Timon are inspired by Japanese Bunraku puppetry, where the puppet is held as a separate entity from the performer.  For Timon and Zazu, the costumes also depict the natural environment for each character – the green jungle and the blue sky.</p>\n            </CopyBox>\n            </div>\n        )\n\n    }\n\n    displayMobileScene =  (progress) => {\n\n        return (\n            <div className=\"sticky2\">\n\n                <BgImage\n                    data={this.props.data}\n                    play={progress > 0}\n                    progress={progress}\n                    noTitleBar\n                />\n\n                <ButtonSwipe\n                    target={this.puppetry2Swipe}\n                    play={true}\n                />\n\n                <SwipeScene\n                    ref={puppetry2Swipe => this.puppetry2Swipe = puppetry2Swipe}\n                    bgImageSm={this.props.data.bgStep2Sm.childImageSharp.gatsbyImageData}\n                    bgImageMd={this.props.data.bgStep2Md.childImageSharp.gatsbyImageData}\n                    bgImageLg={this.props.data.bgStep2Lg.childImageSharp.gatsbyImageData}\n                    bgImageXl={this.props.data.bgStep2.childImageSharp.gatsbyImageData}\n                    copyHorizontalPosition=\"toRight\"\n                    copyVerticalPosition=\"toMiddle\"\n                />\n\n            </div>\n        )\n\n    }\n\n    displayScene = (progress) => {\n        return (\n            <div className=\"sticky2\">\n                <BgImage\n                    data={this.props.data}\n                    play={progress > 0}\n                    progress={progress}\n                    noTitleBar\n                />\n\n                <ButtonSwipe\n                    target={this.puppetry2Swipe}\n                    play={progress > 0}\n                />\n\n                <CopyBox\n                    copyHorizontalPosition=\"toRight\"\n                    copyHorizontalPositionMd=\"toRight\"\n                    copyVerticalPosition=\"toMiddle\"\n                    copyMdWidth=\"narrow\"\n                    step1\n                >\n                    <h3>Bunraku-INSPIRED puppets</h3>\n                    <p>The puppets of Zazu and Timon are inspired by Japanese Bunraku puppetry, where the puppet is held as a separate entity from the performer.  For Timon and Zazu, the costumes also depict the natural environment for each character – the green jungle and the blue sky.</p>\n                </CopyBox>\n\n                <SwipeScene\n                    ref={puppetry2Swipe => this.puppetry2Swipe = puppetry2Swipe}\n                    bgImageSm={this.props.data.bgStep2Sm.childImageSharp.gatsbyImageData}\n                    bgImageMd={this.props.data.bgStep2Md.childImageSharp.gatsbyImageData}\n                    bgImageLg={this.props.data.bgStep2Lg.childImageSharp.gatsbyImageData}\n                    bgImageXl={this.props.data.bgStep2.childImageSharp.gatsbyImageData}\n                    copyHorizontalPosition=\"toRight\"\n                    copyVerticalPosition=\"toMiddle\"\n                />\n            </div>\n        )\n    }\n\n    render() {\n\n        let mql = window.matchMedia(media.sm).matches;\n        if (mql) {\n        return (\n            <Wrapper active={this.props.active} id=\"puppetry2Wrapper\">\n                <div id=\"puppetry2Scene\" ref={puppetry2Scene => this.puppetry2Scene = puppetry2Scene}/>\n                <Controller>\n                    <Scene\n                        triggerElement=\"#puppetry2Scene\"\n                        triggerHook=\"onLeave\"\n                        duration={500}\n                        pin\n                    >\n                        {(progress) => this.displayScene(progress)}\n                    </Scene>\n                </Controller>\n            </Wrapper>\n        )\n        } else {\n            return (\n                <>\n                <Wrapper active={this.props.active} id=\"puppetry2Wrapper\" className=\"no-padding\">\n                    <div id=\"puppetry2Scene\" ref={puppetry2Scene => this.puppetry2Scene = puppetry2Scene} />\n                    <Controller>\n                        <Scene\n                            triggerElement=\"#puppetry2Scene\"\n                            triggerHook=\"onLeave\"\n                            duration={500}\n                            pin\n                            enabled={false}\n                        >\n                            {(progress) => this.displayMobileHeading(progress)}\n                        </Scene>\n                    </Controller>\n                </Wrapper>\n                <Wrapper active={this.props.active} id=\"puppetry2Wrapper1\">\n                    <div id=\"puppetry2Scene1\" ref={puppetry2Scene1 => this.puppetry2Scene1 = puppetry2Scene1} />\n                    <Controller>\n                        <Scene\n                            triggerElement=\"#puppetry2Scene1\"\n                            triggerHook=\"onLeave\"\n                            duration={500}\n                            pin\n                            enabled={false}\n                        >\n                            {(progress) => this.displayMobileScene(progress)}\n                        </Scene>\n                    </Controller>\n                </Wrapper>\n                </>\n\n            )\n        }\n    }\n}\n\n\nexport default (props) => (\n    <StaticQuery\n        query={graphql`\n            query {\n                 bgStep1: file(relativePath: { eq: \"Interactive/Production/lke-im-prod-pt10-1-1920-min.jpg\" }) {\n                    childImageSharp {\n                        gatsbyImageData(width: 1920, quality: 100)\n                    }\n                }\n                \n                bgStep1Lg: file(relativePath: { eq: \"Interactive/Production/lke-im-prod-pt10-1-1440-min.jpg\" }) {\n                    childImageSharp {\n                        gatsbyImageData(width: 1440, quality: 100)\n                    }\n                }\n                \n                bgStep1Md: file(relativePath: { eq: \"Interactive/Production/lke-im-prod-pt10-1-991-min.jpg\" }) {\n                    childImageSharp {\n                        gatsbyImageData(width: 991, quality: 100)\n                    }\n                }\n                \n                bgStep1Sm: file(relativePath: { eq: \"Interactive/Production/lke-im-prod-pt10-1-576-min.jpg\" }) {\n                    childImageSharp {\n                        gatsbyImageData(width: 575, quality: 100)\n                    }\n                }\n                \n               bgStep2: file(relativePath: { eq: \"Interactive/Production/lke-im-prod-pt10-2-1920-min.jpg\" }) {\n                    childImageSharp {\n                        gatsbyImageData(width: 1920, quality: 100)\n                    }\n                }\n                \n                bgStep2Lg: file(relativePath: { eq: \"Interactive/Production/lke-im-prod-pt10-2-1440-min.jpg\" }) {\n                    childImageSharp {\n                        gatsbyImageData(width: 1440, quality: 100)\n                    }\n                }\n                \n                bgStep2Md: file(relativePath: { eq: \"Interactive/Production/lke-im-prod-pt10-2-991-min.jpg\" }) {\n                    childImageSharp {\n                        gatsbyImageData(width: 991, quality: 100)\n                    }\n                }\n                \n                bgStep2Sm: file(relativePath: { eq: \"Interactive/Production/lke-im-prod-pt10-2-576-min.jpg\" }) {\n                    childImageSharp {\n                        gatsbyImageData(width: 575, quality: 100)\n                    }\n                }\n            }\n\t\t`}\n        render={data => (\n            <Puppetry2 data={data} active={props.active} title={props.title}/>\n        )}\n    />\n)\n","// @flow\nimport React, {Component} from 'react';\nimport styled, {css} from 'styled-components';\nimport {media} from \"utils/Media\"\nimport {Controller, Scene} from 'react-scrollmagic';\nimport {graphql, StaticQuery} from \"gatsby\";\nimport CopyBox from \"components/shared/CopyBox\"\nimport HoldScene from \"components/shared/HoldScene\"\nimport ButtonHold from \"components/shared/ButtonHold\"\nimport BgImage from 'components/shared/BgImage'\n\nconst Wrapper = styled.div`\n    overflow: hidden;\n    \n .scrollmagic-pin-spacer {\n    display: none !important;\n\n    ${props => props.active && css`\n        display: block !important;\n    `}\n\n    @media ${media.sm} {\n        display: block !important;\n    }\n  }\n  \n  .sticky, .sticky2 { \n    height: 0;\n    overflow: hidden;\n    width: 100% !important;\n    \n    ${props => props.active && css`\n        height: 100vh;\n    `}\n    \n    @media ${media.sm} {\n        height: 100vh;\n    }\n  }\n  \n  .fs {\n        height: 100vh;\n    }\n    \n  .slideInUp {\n        .no-touch & {\n            visibility: hidden;\n            opacity: 0;\n            transition: all 0.7s ease-out;\n            transform: translate3d(0, 50px, 0);\n        }\n        .no-touch .is-active & {\n            visibility: visible;\n            opacity: 1;\n            transform: translate3d(0, 0, 0);\n        }\n    }\n    \n    .pinContainer {\n        position: absolute;\n        top: 0;\n        left: 0;\n        height: 100vh;\n        width: 100vw;\n    }\n`;\n\nclass Puppetry3 extends Component {\n    render() {\n        return (\n            <Wrapper active={this.props.active} id=\"puppetry3Wrapper\">\n                <div id=\"puppetry3Scene\"/>\n                <Controller>\n                    <Scene\n                        triggerElement=\"#puppetry3Scene\"\n                        triggerHook=\"onLeave\"\n                        duration={500}\n                        pin\n                    >\n                        {(progress) => (\n                            <div className={`sticky2`}>\n                                <BgImage\n                                    data={this.props.data}\n                                    play={progress > 0}\n                                    progress={progress}\n                                    noTitleBar\n                                />\n\n                                <CopyBox\n                                    copyHorizontalPosition=\"toLeft\"\n                                    copyVerticalPosition=\"toTop\"\n                                    copyVerticalPositionMd=\"toTop\"\n                                    copyMdWidth=\"fullWidth\"\n                                    step1\n                                >\n                                    <h3>Animals</h3>\n                                    <p>\n                                        Many of the puppets are closely entwined with the costumes to help create a\n                                        range of animal species. Examples are the cheetah, the giraffes and the gazelles\n                                        among others. The gazelle is an example of Taymor’s use of ‘corporate puppetry’\n                                        where one performer depicts many animals at once.\n                                    </p>\n                                    <p>\n                                        Why do you think corporate puppetry is used in The Lion King?\n                                    </p>\n                                </CopyBox>\n\n                                <ButtonHold\n                                    play={progress > 0}\n                                    target={this.puppetry3HoldScene}\n                                />\n\n                                <HoldScene\n                                    ref={puppetry3HoldScene => this.puppetry3HoldScene = puppetry3HoldScene}\n                                    bgImageSm={this.props.data.bgStep2Sm.childImageSharp.gatsbyImageData}\n                    bgImageMd={this.props.data.bgStep2Md.childImageSharp.gatsbyImageData}\n                    bgImageLg={this.props.data.bgStep2Lg.childImageSharp.gatsbyImageData}\n                    bgImageXl={this.props.data.bgStep2.childImageSharp.gatsbyImageData}\n                                    copyHorizontalPosition=\"toLeft\"\n                                    copyVerticalPosition=\"toMiddle\"\n                                    copyVerticalPositionMd=\"toTop\"\n                                    copyMdWidth=\"fullWidth\"\n                                    text=\"<p>Corporate puppetry allows one or two performers to bring a whole herd to life. This helps to bring an expansive environment to 
life on stage.</p>\"\n                                />\n\n                            </div>\n                        )}\n                    </Scene>\n                </Controller>\n            </Wrapper>\n        )\n    }\n}\n\n\nexport default (props) => (\n    <StaticQuery\n        query={graphql`\n            query {\n                 bgStep1: file(relativePath: { eq: \"Interactive/Production/lke-im-prod-pt11-1-1920-min.jpg\" }) {\n                    childImageSharp {\n                        gatsbyImageData(width: 1920, quality: 100)\n                    }\n                }\n                \n                bgStep1Lg: file(relativePath: { eq: \"Interactive/Production/lke-im-prod-pt11-1-1440-min.jpg\" }) {\n                    childImageSharp {\n                        gatsbyImageData(width: 1440, quality: 100)\n                    }\n                }\n                \n                bgStep1Md: file(relativePath: { eq: \"Interactive/Production/lke-im-prod-pt11-1-991-min.jpg\" }) {\n                    childImageSharp {\n                        gatsbyImageData(width: 991, quality: 100)\n                    }\n                }\n                \n                bgStep1Sm: file(relativePath: { eq: \"Interactive/Production/lke-im-prod-pt11-1-576-min.jpg\" }) {\n                    childImageSharp {\n                        gatsbyImageData(width: 575, quality: 100)\n                    }\n                }\n                \n               bgStep2: file(relativePath: { eq: \"Interactive/Production/lke-im-prod-pt11-2-1920-min.jpg\" }) {\n                    childImageSharp {\n                        gatsbyImageData(width: 1920, quality: 100)\n                    }\n                }\n                \n                bgStep2Lg: file(relativePath: { eq: \"Interactive/Production/lke-im-prod-pt11-2-1440-min.jpg\" }) {\n                    childImageSharp {\n                        gatsbyImageData(width: 1440, quality: 100)\n                    }\n                }\n                \n                bgStep2Md: file(relativePath: { eq: \"Interactive/Production/lke-im-prod-pt11-2-991-min.jpg\" }) {\n                    childImageSharp {\n                        gatsbyImageData(width: 991, quality: 100)\n                    }\n                }\n                \n                bgStep2Sm: file(relativePath: { eq: \"Interactive/Production/lke-im-prod-pt11-2-576-min.jpg\" }) {\n                    childImageSharp {\n                        gatsbyImageData(width: 575, quality: 100)\n                    }\n                }\n            }\n\t\t`}\n        render={data => (\n            <Puppetry3 data={data} active={props.active} title={props.title}/>\n        )}\n    />\n)\n","// @flow\r\nimport React, {Component} from 'react';\r\nimport styled, {css} from 'styled-components';\r\nimport {media} from \"utils/Media\"\r\nimport {Controller, Scene} from 'react-scrollmagic';\r\nimport {graphql, StaticQuery} from \"gatsby\";\r\nimport CopyBox from \"components/shared/CopyBox\"\r\nimport BgImage from 'components/shared/BgImage'\r\nimport TitleBar from 'components/shared/TitleBar'\r\nimport Absolute from \"components/shared/Absolute\"\r\n\r\nconst Wrapper = styled.div`\r\n  overflow: hidden;\r\n  \r\n  .scrollmagic-pin-spacer {\r\n    display: none !important;\r\n\r\n    ${props => props.active && css`\r\n        display: block !important;\r\n    `}\r\n\r\n     @media screen and (max-width: ${props => props.theme.sizes.sm}) {\r\n        padding-top: 0 !important;\r\n        padding-bottom: 0 !important;\r\n    }\r\n\r\n    @media ${media.sm} {\r\n        display: block !important;\r\n    }\r\n  }\r\n\r\n    h2 {\r\n    font-size: 1.75rem;\r\n    line-height: 120%;\r\n\r\n    @media ${media.lg} {\r\n      font-size: initial;\r\n      line-height: initial;\r\n    }\r\n\r\n  }\r\n\r\n  .black-bg {\r\n      background: #000;\r\n  }\r\n\r\n  .no-padding-top {\r\n      top: 0;\r\n  }\r\n  \r\n  .sticky, .sticky2 {\r\n    height: 0;\r\n    overflow: hidden;\r\n    width: 100% !important;\r\n    \r\n    ${props => props.active && css`\r\n        height: 100vh;\r\n    `}\r\n    \r\n    @media ${media.sm} {\r\n        height: 100vh;\r\n    }\r\n  }\r\n  \r\n  .fs {\r\n        height: 100vh;\r\n    }\r\n    \r\n     .slideInUp {\r\n        .no-touch & {\r\n            visibility: hidden;\r\n            opacity: 0;\r\n            transition: all 0.7s ease-out;\r\n            transform: translate3d(0, 50px, 0);\r\n        }\r\n        .no-touch .is-active & {\r\n            visibility: visible;\r\n            opacity: 1;\r\n            transform: translate3d(0, 0, 0);\r\n        }\r\n    }\r\n    \r\n    .pinContainer {\r\n        position: absolute;\r\n        top: 0;\r\n        left: 0;\r\n        height: 100vh;\r\n        width: 100vw;\r\n    }\r\n`;\r\n\r\nclass Set1 extends Component {\r\n\r\n    displayMobileHeading = (progress) => {\r\n        return (\r\n            <div className={`sticky black-bg`}>\r\n                <Absolute>\r\n\r\n                    <TitleBar\r\n                        onClick={() => this.props.callback()}\r\n                        absolute\r\n                        color=\"green\"\r\n                    >\r\n                        <h2>Set</h2>\r\n                    </TitleBar>\r\n\r\n                    <CopyBox\r\n                        copyVerticalPosition=\"toTop\"\r\n                        copyHorizontalPosition=\"toLeft\"\r\n                        copyVerticalPositionMd=\"toTop\"\r\n                        copyMdWidth=\"fullWidth\"\r\n                        step1\r\n                    >\r\n                        <p>\r\n                            The set of The Lion King needs to portray many things – the African Savannah, a waterhole, the\r\n                            jungle, a gorge, Pride Rock, an Elephant Graveyard and more. Technical elements play an\r\n                            important role in making this possible, from lighting to automation. However the cast, costumes\r\n                            and choreography also help to bring these environments to life.\r\n                    </p>\r\n                    </CopyBox>\r\n\r\n                </Absolute>\r\n            </div>\r\n\r\n        )\r\n    }\r\n\r\n    displayMobileScene = (progress) => {\r\n        return (\r\n            <div className={`sticky`}>\r\n                <Absolute className=\"no-padding-top\">\r\n                    <BgImage\r\n                        data={this.props.data}\r\n                        play={progress > 0}\r\n                        progress={progress}\r\n                        noTitleBar\r\n                    />\r\n                </Absolute>\r\n            </div>\r\n        )\r\n    }\r\n\r\n    displayScene = (progress) => {\r\n        return (\r\n            <div className={`sticky`}>\r\n                <Absolute>\r\n\r\n                <TitleBar \r\n                    onClick={() => this.props.callback()}\r\n                    absolute \r\n                    color=\"green\"\r\n                >\r\n                    <h2>Set</h2>\r\n                </TitleBar>\r\n\r\n                <BgImage\r\n                    data={this.props.data}\r\n                    play={progress > 0}\r\n                    progress={progress}\r\n                    noTitleBar\r\n                />\r\n\r\n                <CopyBox\r\n                    copyVerticalPosition=\"toTop\"\r\n                    copyHorizontalPosition=\"toLeft\"\r\n                    copyVerticalPositionMd=\"toTop\"\r\n                    copyMdWidth=\"fullWidth\"\r\n                    step1\r\n                >\r\n                    <p>\r\n                        The set of The Lion King needs to portray many things – the African Savannah, a waterhole, the\r\n                        jungle, a gorge, Pride Rock, an Elephant Graveyard and more. Technical elements play an\r\n                        important role in making this possible, from lighting to automation. However the cast, costumes\r\n                        and choreography also help to bring these environments to life.\r\n                    </p>\r\n                </CopyBox>\r\n                </Absolute>\r\n            </div>\r\n        )\r\n    }\r\n\r\n    render() {\r\n        let mql = window.matchMedia(media.sm).matches;\r\n        if (mql) {\r\n\r\n        return (\r\n            <Wrapper active={this.props.active} id=\"set1Wrapper\">\r\n                <div id=\"set1Scene\" ref={set1Scene => this.set1Scene = set1Scene}/>\r\n                <Controller>\r\n                    <Scene\r\n                        triggerElement=\"#set1Scene\"\r\n                        triggerHook=\"onLeave\"\r\n                        duration={500}\r\n                        pin\r\n                    >\r\n                        {(progress) => this.displayScene(progress)}\r\n                    </Scene>\r\n                </Controller>\r\n            </Wrapper>\r\n        )\r\n\r\n        } else {\r\n            return (\r\n                <>\r\n                    <Wrapper active={this.props.active} id=\"set1Wrapper\">\r\n                        <div id=\"set1Scene\"/>\r\n                        <Controller>\r\n                            <Scene\r\n                                triggerElement=\"#set1Scene\"\r\n                                triggerHook=\"onLeave\"\r\n                                duration={500}\r\n                                pin\r\n                                enabled={false}\r\n                            >\r\n                                {(progress) => this.displayMobileHeading(progress)}\r\n                            </Scene>\r\n                        </Controller>\r\n                    </Wrapper>\r\n                    <Wrapper active={this.props.active} id=\"set1Wrapper1\">\r\n                        <div id=\"set1Scene1\" />\r\n                        <Controller>\r\n                            <Scene\r\n                                triggerElement=\"#set1Scene1\"\r\n                                triggerHook=\"onLeave\"\r\n                                duration={500}\r\n                                pin\r\n                                enabled={false}\r\n                            >\r\n                                {(progress) => this.displayMobileScene(progress)}\r\n                            </Scene>\r\n                        </Controller>\r\n                    </Wrapper>\r\n                </>\r\n            )\r\n        }\r\n    }\r\n}\r\n\r\nexport default (props) => (\r\n    <StaticQuery\r\n        query={graphql`\r\n            query {\r\n                bgStep1: file(relativePath: { eq: \"Interactive/Production/lke-im-prod-pt12-1920-min.jpg\" }) {\r\n                    childImageSharp {\r\n                        gatsbyImageData(width: 1920, quality: 100)\r\n                    }\r\n                }\r\n                \r\n                bgStep1Lg: file(relativePath: { eq: \"Interactive/Production/lke-im-prod-pt12-1440-min.jpg\" }) {\r\n                    childImageSharp {\r\n                        gatsbyImageData(width: 1440, quality: 100)\r\n                    }\r\n                }\r\n                \r\n                bgStep1Md: file(relativePath: { eq: \"Interactive/Production/lke-im-prod-pt12-991-min.jpg\" }) {\r\n                    childImageSharp {\r\n                        gatsbyImageData(width: 991, quality: 100)\r\n                    }\r\n                }\r\n                \r\n                bgStep1Sm: file(relativePath: { eq: \"Interactive/Production/lke-im-prod-pt12-576-min.jpg\" }) {\r\n                    childImageSharp {\r\n                        gatsbyImageData(width: 575, quality: 100)\r\n                    }\r\n                }\r\n            }\r\n\t\t`}\r\n        render={data => (\r\n            <Set1 data={data} active={props.active} title={props.title} callback={(e) => props.callback(e)} />\r\n        )}\r\n    />\r\n)\r\n","// @flow\nimport React, {Component} from 'react';\nimport styled, {css} from 'styled-components';\nimport {Controller, Scene} from 'react-scrollmagic';\nimport {Tween, Timeline} from 'react-gsap';\nimport {graphql, StaticQuery} from \"gatsby\";\nimport {media} from \"utils/Media\"\nimport {GatsbyImage} from \"gatsby-plugin-image\";\nimport CopyBox from \"components/shared/CopyBox\"\nimport BgImage from 'components/shared/BgImage'\nimport ButtonScroll from \"components/shared/ScrollButton\"\nimport Absolute from \"components/shared/Absolute\"\nimport LazyLoad from \"react-lazyload\"\n\nconst Wrapper = styled.div`\n    overflow: hidden;\n    \n  .scrollmagic-pin-spacer {\n    display: none !important;\n\n    ${props => props.active && css`\n        display: block !important;\n    `}\n\n    @media screen and (max-width: ${props => props.theme.sizes.sm}) {\n        padding-top: 0 !important;\n        padding-bottom: 0 !important;\n    }\n\n    @media ${media.sm} {\n        display: block !important;\n    }\n  }\n\n  .black-bg {\n      background: #000;\n  }\n\n  .no-padding-top {\n      top: 0;\n  }\n  \n  .sticky, .sticky2 { \n    height: 0;\n    overflow: hidden;\n    width: 100% !important;\n    \n    ${props => props.active && css`\n        height: 100vh;\n    `}\n    \n    @media ${media.sm} {\n        height: 100vh;\n    }\n  }\n  \n  .fs {\n        height: 100vh;\n    }\n    \n  .slideInUp {\n        .no-touch & {\n            visibility: hidden;\n            opacity: 0;\n            transition: all 0.7s ease-out;\n            transform: translate3d(0, 50px, 0);\n        }\n        .no-touch .is-active & {\n            visibility: visible;\n            opacity: 1;\n            transform: translate3d(0, 0, 0);\n        }\n    }\n    \n    .pinContainer {\n        position: absolute;\n        top: 0;\n        left: 0;\n        height: 100vh;\n        width: 100vw;\n    }\n    \n    .animation__background {\n        width: 100vw;\n        height: 100vh;\n        position: absolute;\n        left: 0;\n        z-index: 2;\n        top: 0;\n        \n        &--step2 {\n            opacity: 0;\n        }\n        \n        &--overlay {\n            position: absolute;\n            top: 0;\n            left: 0;\n            width: 100%;\n            height: 100%;\n            z-index: 3;\n            background-image: linear-gradient(#000, transparent);\n        }\n        \n        .image {\n            width: 100vw;\n            height: 100vh;\n        }\n    }\n`;\n\nclass Set2 extends Component {\n\n    displayMobileHeading = () => {\n        return (\n            <div className={`sticky2 black-bg`}>\n                <CopyBox\n                    copyHorizontalPosition=\"toLeft\"\n                    copyVerticalPosition=\"toTop\"\n                    copyVerticalPositionMd=\"toTop\"\n                    copyMdWidth=\"fullWidth\"\n                    step1\n                    ontop\n                >\n                    <h3>Living landscape</h3>\n                    <p>\n                        In The Lion King, the ensemble cast members bring various scenes to life as a living,\n                        breathing landscape. The grasslands are depicted by cast wearing grass palettes on their\n                        heads and moving gracefully in unison to create a beautiful, swaying landscape. In the\n                        jungle, cast dress as lush, colourful plants reflecting the growing love between Simba and\n                        Nala.\n                        </p>\n                </CopyBox>\n            </div>\n        )\n    }\n\n    displayMobileScene = (progress) => {\n        return (\n            <div className={`sticky2`}>\n            <Absolute className=\"no-padding-top\">\n                <BgImage\n                    data={this.props.data}\n                    play={progress > 0}\n                    progress={progress}\n                    noTitleBar\n                    overrideDefaultImage={true}\n                />\n                \n            </Absolute>\n            </div>\n        )\n    }\n\n    displayMobileScene2 = (progress) => {\n        return (\n            <div className={`sticky2`}>\n                <Absolute className=\"no-padding-top\">\n                    \n                    <BgImage\n                        data={this.props.data}\n                        play={progress > 0}\n                        progress={progress}\n                        noTitleBar\n\n                    />\n                </Absolute>\n            </div> \n        )\n    }\n\n    displayScene = (progress) => {\n        return (\n            <div className={`sticky2`}>\n                <Timeline totalProgress={progress} paused>\n                    <Tween\n                        to={{\n                            scale: 1.1\n                        }}\n                        ease=\"Strong.easeOut\"\n                        totalProgress={progress}\n                        paused\n                    >\n                        <div className=\"animation__background\">\n                            <Tween\n                                to={{\n                                    backgroundImage: \"linear-gradient(transparent, transparent)\"\n                                }}\n                                ease=\"Strong.easeOut\"\n                                totalProgress={progress}\n                                paused\n                            >\n                                <div className=\"animation__background--overlay\"/>\n                            </Tween>\n                            <LazyLoad height={\"100%\"} once>\n                            <GatsbyImage image={this.props.data.bgStep2Sm.childImageSharp.gatsbyImageData}\n                                alt=\"\"\n                                title=\"\"\n                                className=\"image d-block d-sm-none\"\n                            />\n                            </LazyLoad>\n                            <LazyLoad height={\"100%\"} once>\n                            <GatsbyImage image={this.props.data.bgStep2Md.childImageSharp.gatsbyImageData}\n                                alt=\"\"\n                                title=\"\"\n                                className=\"image d-none d-sm-block d-lg-none\"\n                            />\n                            </LazyLoad>\n                            <LazyLoad height={\"100%\"} once>\n                            <GatsbyImage image={this.props.data.bgStep2Lg.childImageSharp.gatsbyImageData}\n                                alt=\"\"\n                                title=\"\"\n                                className=\"image d-none d-lg-block d-xl-none\"\n                            />\n                            </LazyLoad>\n                            <LazyLoad height={\"100%\"} once>\n                            <GatsbyImage image={this.props.data.bgStep2.childImageSharp.gatsbyImageData}\n                                alt=\"\"\n                                title=\"\"\n                                className=\"image d-none d-xl-block\"\n                            />\n                            </LazyLoad>\n\n                        </div>\n                    </Tween>\n\n\n                    <CopyBox\n                        copyHorizontalPosition=\"toLeft\"\n                        copyVerticalPosition=\"toTop\"\n                        copyVerticalPositionMd=\"toTop\"\n                        copyMdWidth=\"fullWidth\"\n                        step1\n                        ontop\n                    >\n                        <h3>Living landscape</h3>\n                        <p>\n                            In The Lion King, the ensemble cast members bring various scenes to life as a living,\n                            breathing landscape. The grasslands are depicted by cast wearing grass palettes on their\n                            heads and moving gracefully in unison to create a beautiful, swaying landscape. In the\n                            jungle, cast dress as lush, colourful plants reflecting the growing love between Simba and\n                            Nala.\n                        </p>\n                    </CopyBox>\n\n                    <Tween\n                        to={{opacity: 1, scale: 1.1}}\n                        duration={3}\n                    >\n                        <div className=\"animation__background animation__background--step2\">\n                            <LazyLoad height={\"100%\"} once>\n                            <GatsbyImage image={this.props.data.bgStep1Sm.childImageSharp.gatsbyImageData}\n                                alt=\"\"\n                                title=\"\"\n                                className=\"image d-block d-sm-none\"\n                            />\n                            </LazyLoad>\n                            <LazyLoad height={\"100%\"} once>\n                            <GatsbyImage image={this.props.data.bgStep1Md.childImageSharp.gatsbyImageData}\n                                alt=\"\"\n                                title=\"\"\n                                className=\"image d-none d-sm-block d-lg-none\"\n                            />\n                            </LazyLoad>\n                            <LazyLoad height={\"100%\"} once>\n                            <GatsbyImage image={this.props.data.bgStep1Lg.childImageSharp.gatsbyImageData}\n                                alt=\"\"\n                                title=\"\"\n                                className=\"image d-none d-lg-block d-xl-none\"\n                            />\n                            </LazyLoad>\n                            <LazyLoad height={\"100%\"} once>\n                            <GatsbyImage image={this.props.data.bgStep1.childImageSharp.gatsbyImageData}\n                                alt=\"\"\n                                title=\"\"\n                                className=\"image d-none d-xl-block\"\n                            />\n                            </LazyLoad>\n                        </div>\n                    </Tween>\n                </Timeline>\n                <ButtonScroll story progress={progress}/>\n            </div>\n        )\n    }\n\n    render() {\n        let mql = window.matchMedia(media.sm).matches;\n        if (mql) {\n\n        return (\n            <Wrapper active={this.props.active} id=\"set2Wrapper\">\n                <div id=\"set2Scene\" ref={set2Scene => this.set2Scene = set2Scene}/>\n                <Controller>\n                    <Scene\n                        triggerElement=\"#set2Scene\"\n                        triggerHook=\"onLeave\"\n                        duration={2000}\n                        pin\n                    >\n                        {(progress) => this.displayScene(progress)}\n                    </Scene>\n                </Controller>\n            </Wrapper>\n        )\n        } else {\n            return (\n                <>\n                <Wrapper active={this.props.active} id=\"set2Wrapper\">\n                    <div id=\"set2Scene\"/>\n                    <Controller>\n                        <Scene\n                            triggerElement=\"#set2Scene\"\n                            triggerHook=\"onLeave\"\n                            duration={2000}\n                            pin\n                            enabled={false}\n                        >\n                            {(progress) => this.displayMobileHeading(progress)}\n                        </Scene>\n                    </Controller>\n                </Wrapper>\n                <Wrapper active={this.props.active} id=\"set2Wrapper1\">\n                    <div id=\"set2Scene1\" />\n                    <Controller>\n                        <Scene\n                            triggerElement=\"#set2Scene1\"\n                            triggerHook=\"onLeave\"\n                            duration={2000}\n                            pin\n                            enabled={false}\n                        >\n                            {(progress) => this.displayMobileScene(progress)}\n                        </Scene>\n                    </Controller>\n                </Wrapper>\n                <Wrapper active={this.props.active} id=\"set2Wrapper2\">\n                    <div id=\"set2Scene2\" />\n                    <Controller>\n                        <Scene\n                            triggerElement=\"#set2Scene2\"\n                            triggerHook=\"onLeave\"\n                            duration={2000}\n                            pin\n                            enabled={false}\n                        >\n                            {(progress) => this.displayMobileScene2(progress)}\n                        </Scene>\n                    </Controller>\n                </Wrapper>\n                </>\n            )\n        }\n    }\n}\n\n\nexport default (props) => (\n    <StaticQuery\n        query={graphql`\n            query {\n                 bgStep1: file(relativePath: { eq: \"Interactive/Production/lke-im-prod-pt13-1-1920-min.jpg\" }) {\n                    childImageSharp {\n                        gatsbyImageData(width: 1920, quality: 100)\n                    }\n                }\n                \n                bgStep1Lg: file(relativePath: { eq: \"Interactive/Production/lke-im-prod-pt13-1-1440-min.jpg\" }) {\n                    childImageSharp {\n                        gatsbyImageData(width: 1440, quality: 100)\n                    }\n                }\n                \n                bgStep1Md: file(relativePath: { eq: \"Interactive/Production/lke-im-prod-pt13-1-991-min.jpg\" }) {\n                    childImageSharp {\n                        gatsbyImageData(width: 991, quality: 100)\n                    }\n                }\n                \n                bgStep1Sm: file(relativePath: { eq: \"Interactive/Production/lke-im-prod-pt13-1-576-min.jpg\" }) {\n                    childImageSharp {\n                        gatsbyImageData(width: 575, quality: 100)\n                    }\n                }\n                \n                bgStep2: file(relativePath: { eq: \"Interactive/Production/lke-im-prod-pt13-2-1920-min.jpg\" }) {\n                    childImageSharp {\n                        gatsbyImageData(width: 1920, quality: 100)\n                    }\n                }\n                \n                bgStep2Lg: file(relativePath: { eq: \"Interactive/Production/lke-im-prod-pt13-2-1440-min.jpg\" }) {\n                    childImageSharp {\n                        gatsbyImageData(width: 1440, quality: 100)\n                    }\n                }\n                \n                bgStep2Md: file(relativePath: { eq: \"Interactive/Production/lke-im-prod-pt13-2-991-min.jpg\" }) {\n                    childImageSharp {\n                        gatsbyImageData(width: 991, quality: 100)\n                    }\n                }\n                \n                bgStep2Sm: file(relativePath: { eq: \"Interactive/Production/lke-im-prod-pt13-2-576-min.jpg\" }) {\n                    childImageSharp {\n                        gatsbyImageData(width: 575, quality: 100)\n                    }\n                }\n            }\n\t\t`}\n        render={data => (\n            <Set2 data={data} active={props.active}\n                  title={props.title}/>\n        )}\n    />\n)\n","// @flow\nimport React, {Component} from 'react';\nimport styled, {css} from 'styled-components';\nimport {Controller, Scene} from 'react-scrollmagic';\nimport {Tween, Timeline} from 'react-gsap';\nimport {graphql, StaticQuery} from \"gatsby\";\nimport {media} from \"utils/Media\"\nimport {GatsbyImage} from \"gatsby-plugin-image\";\nimport CopyBox from \"components/shared/CopyBox\"\nimport BgImage from 'components/shared/BgImage'\nimport Absolute from \"components/shared/Absolute\"\nimport ButtonScroll from \"components/shared/ScrollButton\"\nimport LazyLoad from \"react-lazyload\"\n\nconst Wrapper = styled.div`\n    overflow: hidden;\n    \n  .scrollmagic-pin-spacer {\n    display: none !important;\n\n    ${props => props.active && css`\n        display: block !important;\n    `}\n\n    @media screen and (max-width: ${props => props.theme.sizes.sm}) {\n        padding-top: 0 !important;\n        padding-bottom: 0 !important;\n    }\n\n    @media ${media.sm} {\n        display: block !important;\n    }\n  }\n\n    .black-bg {\n        background: #000;\n    }\n\n  .no-padding-top {\n      top: 0;\n  }\n  \n  .sticky, .sticky2 { \n    height: 0;\n    overflow: hidden;\n    width: 100% !important;\n    \n    ${props => props.active && css`\n        height: 100vh;\n    `}\n    \n    @media ${media.sm} {\n        height: 100vh;\n    }\n  }\n  \n  .fs {\n        height: 100vh;\n    }\n    \n  .slideInUp {\n        .no-touch & {\n            visibility: hidden;\n            opacity: 0;\n            transition: all 0.7s ease-out;\n            transform: translate3d(0, 50px, 0);\n        }\n        .no-touch .is-active & {\n            visibility: visible;\n            opacity: 1;\n            transform: translate3d(0, 0, 0);\n        }\n    }\n    \n    .pinContainer {\n        position: absolute;\n        top: 0;\n        left: 0;\n        height: 100vh;\n        width: 100vw;\n    }\n    \n    .animation__background {\n        width: 100vw;\n        height: 100vh;\n        position: absolute;\n        left: 0;\n        z-index: 2;\n        top: 0;\n        \n        &--step2 {\n            opacity: 0;\n        }\n        \n        &--overlay {\n            position: absolute;\n            top: 0;\n            left: 0;\n            width: 100%;\n            height: 100%;\n            z-index: 3;\n            background-image: linear-gradient(#000, transparent);\n        }\n        \n        .image {\n            width: 100vw;\n            height: 100vh;\n        }\n    }\n`;\n\nclass Set3 extends Component {\n\n    displayMobileHeading = (progress) => {\n        return (\n            <div className={`sticky2 black-bg`}>\n                <CopyBox\n                    copyHorizontalPosition=\"toLeft\"\n                    copyVerticalPosition=\"toTop\"\n                    copyVerticalPositionMd=\"toTop\"\n                    copyMdWidth=\"fullWidth\"\n                    step1\n                    ontop\n                >\n                    <h3>Lighting</h3>\n                    <p>\n                        From a warm, hazy sunrise in Circle of Life, to a dark, intimidating Elephant Graveyard, to\n                        a beautiful starlit sky when the apparition of Mufasa appears, the colour and intensity of\n                        lighting is crucial to creating mood and atmosphere on stage.\n                        </p>\n                </CopyBox>\n            </div>\n        )\n    }\n\n    displayMobileScene = (progress) => {\n        return (\n            <div className={`sticky2`}>\n                <Absolute className=\"no-padding-top\">\n                    <BgImage\n                        data={this.props.data}\n                        play={progress > 0}\n                        progress={progress}\n                        noTitleBar\n                        overrideDefaultImage={true}\n                    />\n\n                </Absolute>\n            </div>\n        )\n    }\n\n    displayMobileScene2 = (progress) => {\n        return (\n            <div className={`sticky2`}>\n                <Absolute className=\"no-padding-top\">\n                    <BgImage\n                        data={this.props.data}\n                        play={progress > 0}\n                        progress={progress}\n                        noTitleBar\n                    />\n\n                </Absolute>\n            </div>\n        )\n    }\n\n    displayScene = (progress) => {\n        return (\n            <div className={`sticky2`}>\n                <Timeline totalProgress={progress} paused>\n                    <Tween\n                        to={{\n                            scale: 1.1\n                        }}\n                        ease=\"Strong.easeOut\"\n                        totalProgress={progress}\n                        paused\n                    >\n                        <div className=\"animation__background\">\n                            <Tween\n                                to={{\n                                    backgroundImage: \"linear-gradient(transparent, transparent)\"\n                                }}\n                                ease=\"Strong.easeOut\"\n                                totalProgress={progress}\n                                paused\n                            >\n                                <div className=\"animation__background--overlay\"/>\n                            </Tween>\n                            <LazyLoad height={\"100%\"} once>\n                            <GatsbyImage image={this.props.data.bgStep1Sm.childImageSharp.gatsbyImageData}\n                                alt=\"\"\n                                title=\"\"\n                                className=\"image d-block d-sm-none\"\n                            />\n                            </LazyLoad>\n                            <LazyLoad height={\"100%\"} once>\n                            <GatsbyImage image={this.props.data.bgStep1Md.childImageSharp.gatsbyImageData}\n                                alt=\"\"\n                                title=\"\"\n                                className=\"image d-none d-sm-block d-lg-none\"\n                            />\n                            </LazyLoad>\n                            <LazyLoad height={\"100%\"} once>\n                            <GatsbyImage image={this.props.data.bgStep1Lg.childImageSharp.gatsbyImageData}\n                                alt=\"\"\n                                title=\"\"\n                                className=\"image d-none d-lg-block d-xl-none\"\n                            />\n                            </LazyLoad>\n                            <LazyLoad height={\"100%\"} once>\n                            <GatsbyImage image={this.props.data.bgStep1.childImageSharp.gatsbyImageData}\n                                alt=\"\"\n                                title=\"\"\n                                className=\"image d-none d-xl-block\"\n                            />\n                            </LazyLoad>\n                        </div>\n                    </Tween>\n\n                    <CopyBox\n                        copyHorizontalPosition=\"toLeft\"\n                        copyVerticalPosition=\"toTop\"\n                        copyVerticalPositionMd=\"toTop\"\n                        copyMdWidth=\"fullWidth\"\n                        step1\n                        ontop\n                    >\n                        <h3>Lighting</h3>\n                        <p>\n                            From a warm, hazy sunrise in Circle of Life, to a dark, intimidating Elephant Graveyard, to\n                            a beautiful starlit sky when the apparition of Mufasa appears, the colour and intensity of\n                            lighting is crucial to creating mood and atmosphere on stage.\n                        </p>\n                    </CopyBox>\n\n                    <Tween\n                        to={{opacity: 1, scale: 1.1}}\n                        duration={3}\n                    >\n                        <div className=\"animation__background animation__background--step2\">\n                            <LazyLoad height={\"100%\"} once>\n                            <GatsbyImage image={this.props.data.bgStep2Sm.childImageSharp.gatsbyImageData}\n                                alt=\"\"\n                                title=\"\"\n                                className=\"image d-block d-sm-none\"\n                            />\n                            </LazyLoad>\n                            <LazyLoad height={\"100%\"} once>\n                            <GatsbyImage image={this.props.data.bgStep2Md.childImageSharp.gatsbyImageData}\n                                alt=\"\"\n                                title=\"\"\n                                className=\"image d-none d-sm-block d-lg-none\"\n                            />\n                            </LazyLoad>\n                            <LazyLoad height={\"100%\"} once>\n                            <GatsbyImage image={this.props.data.bgStep2Lg.childImageSharp.gatsbyImageData}\n                                alt=\"\"\n                                title=\"\"\n                                className=\"image d-none d-lg-block d-xl-none\"\n                            />\n                            </LazyLoad>\n                            <LazyLoad height={\"100%\"} once>\n                            <GatsbyImage image={this.props.data.bgStep2.childImageSharp.gatsbyImageData}\n                                alt=\"\"\n                                title=\"\"\n                                className=\"image d-none d-xl-block\"\n                            />\n                            </LazyLoad>\n                        </div>\n                    </Tween>\n                </Timeline>\n                <ButtonScroll story progress={progress}/>\n            </div>\n        )\n    }\n\n    render() {\n        let mql = window.matchMedia(media.sm).matches;\n        if (mql) {\n\n            return (\n                <Wrapper active={this.props.active} id=\"set3Wrapper\">\n                    <div id=\"set3Scene\" ref={set3Scene => this.set3Scene = set3Scene}/>\n                    <Controller>\n                        <Scene\n                            triggerElement=\"#set3Scene\"\n                            triggerHook=\"onLeave\"\n                            duration={2000}\n                            pin\n                        >\n                            {(progress) => this.displayScene(progress)}\n                        </Scene>\n                    </Controller>\n                </Wrapper>\n            )\n        } else {\n            return (\n                <>\n                <Wrapper active={this.props.active} id=\"set3Wrapper\">\n                    <div id=\"set3Scene\"/>\n                    <Controller>\n                        <Scene\n                            triggerElement=\"#set3Scene\"\n                            triggerHook=\"onLeave\"\n                            duration={2000}\n                            pin\n                            enabled={false}\n                        >\n                            {(progress) => this.displayMobileHeading(progress)}\n                        </Scene>\n                    </Controller>\n                </Wrapper>\n                <Wrapper active={this.props.active} id=\"set3Wrapper1\">\n                    <div id=\"set3Scene1\" />\n                    <Controller>\n                        <Scene\n                            triggerElement=\"#set3Scene1\"\n                            triggerHook=\"onLeave\"\n                            duration={2000}\n                            pin\n                            enabled={false}\n                        >\n                            {(progress) => this.displayMobileScene(progress)}\n                        </Scene>\n                    </Controller>\n                </Wrapper>\n                <Wrapper active={this.props.active} id=\"set3Wrapper2\">\n                    <div id=\"set3Scene2\" />\n                    <Controller>\n                        <Scene\n                            triggerElement=\"#set3Scene2\"\n                            triggerHook=\"onLeave\"\n                            duration={2000}\n                            pin\n                            enabled={false}\n                        >\n                            {(progress) => this.displayMobileScene2(progress)}\n                        </Scene>\n                    </Controller>\n                </Wrapper>\n                </>\n            )\n        }\n    }\n}\n\n\nexport default (props) => (\n    <StaticQuery\n        query={graphql`\n            query {\n                 bgStep1: file(relativePath: { eq: \"Interactive/Production/lke-im-prod-pt14-1-1920-min.jpg\" }) {\n                    childImageSharp {\n                        gatsbyImageData(width: 1920, quality: 100)\n                    }\n                }\n                \n                bgStep1Lg: file(relativePath: { eq: \"Interactive/Production/lke-im-prod-pt14-1-1440-min.jpg\" }) {\n                    childImageSharp {\n                        gatsbyImageData(width: 1440, quality: 100)\n                    }\n                }\n                \n                bgStep1Md: file(relativePath: { eq: \"Interactive/Production/lke-im-prod-pt14-1-991-min.jpg\" }) {\n                    childImageSharp {\n                        gatsbyImageData(width: 991, quality: 100)\n                    }\n                }\n                \n                bgStep1Sm: file(relativePath: { eq: \"Interactive/Production/lke-im-prod-pt14-1-576-min.jpg\" }) {\n                    childImageSharp {\n                        gatsbyImageData(width: 575, quality: 100)\n                    }\n                }\n                \n                bgStep2: file(relativePath: { eq: \"Interactive/Production/lke-im-prod-pt14-2-1920-min.jpg\" }) {\n                    childImageSharp {\n                        gatsbyImageData(width: 1920, quality: 100)\n                    }\n                }\n                \n                bgStep2Lg: file(relativePath: { eq: \"Interactive/Production/lke-im-prod-pt14-2-1440-min.jpg\" }) {\n                    childImageSharp {\n                        gatsbyImageData(width: 1440, quality: 100)\n                    }\n                }\n                \n                bgStep2Md: file(relativePath: { eq: \"Interactive/Production/lke-im-prod-pt14-2-991-min.jpg\" }) {\n                    childImageSharp {\n                        gatsbyImageData(width: 991, quality: 100)\n                    }\n                }\n                \n                bgStep2Sm: file(relativePath: { eq: \"Interactive/Production/lke-im-prod-pt14-2-576-min.jpg\" }) {\n                    childImageSharp {\n                        gatsbyImageData(width: 575, quality: 100)\n                    }\n                }\n            }\n\t\t`}\n        render={data => (\n            <Set3 data={data} active={props.active}\n                  title={props.title}/>\n        )}\n    />\n)\n","// @flow\nimport React, {Component} from 'react';\nimport styled, {css} from 'styled-components';\nimport {Controller, Scene} from 'react-scrollmagic';\nimport {Tween, Timeline} from 'react-gsap';\nimport {graphql, StaticQuery} from \"gatsby\";\nimport {media} from \"utils/Media\"\nimport {GatsbyImage} from \"gatsby-plugin-image\";\nimport CopyBox from \"components/shared/CopyBox\"\nimport ButtonScroll from \"components/shared/ScrollButton\"\nimport LazyLoad from \"react-lazyload\"\nimport BgImage from 'components/shared/BgImage'\nimport Absolute from \"components/shared/Absolute\"\n\nconst Wrapper = styled.div`\n    overflow: hidden;\n    \n  .scrollmagic-pin-spacer {\n    display: none !important;\n\n    ${props => props.active && css`\n        display: block !important;\n    `}\n\n    @media screen and (max-width: ${props => props.theme.sizes.sm}) {\n        padding-top: 0 !important;\n        padding-bottom: 0 !important;\n    }\n\n    @media ${media.sm} {\n        display: block !important;\n    }\n  }\n\n    .black-bg {\n        background: #000;\n    }\n\n  .no-padding-top {\n      top: 0;\n  }\n  \n  .sticky, .sticky2 { \n    height: 0;\n    overflow: hidden;\n    width: 100% !important;\n    \n    ${props => props.active && css`\n        height: 100vh;\n    `}\n    \n    @media ${media.sm} {\n        height: 100vh;\n    }\n  }\n  \n  .fs {\n        height: 100vh;\n    }\n    \n  .slideInUp {\n        .no-touch & {\n            visibility: hidden;\n            opacity: 0;\n            transition: all 0.7s ease-out;\n            transform: translate3d(0, 50px, 0);\n        }\n        .no-touch .is-active & {\n            visibility: visible;\n            opacity: 1;\n            transform: translate3d(0, 0, 0);\n        }\n    }\n    \n    .pinContainer {\n        position: absolute;\n        top: 0;\n        left: 0;\n        height: 100vh;\n        width: 100vw;\n    }\n    \n    .animation__background {\n        width: 100vw;\n        height: 100vh;\n        position: absolute;\n        left: 0;\n        z-index: 2;\n        top: 0;\n        \n        &--step2 {\n            opacity: 0;\n        }\n        \n        &--overlay {\n            position: absolute;\n            top: 0;\n            left: 0;\n            width: 100%;\n            height: 100%;\n            z-index: 3;\n            background-image: linear-gradient(#000, transparent);\n        }\n        \n        .image {\n            width: 100vw;\n            height: 100vh;\n        }\n    }\n`;\n\nclass Set4 extends Component {\n\n    displayMobileHeading = (progress) => {\n        return (\n            <div className={`sticky2 black-bg`}>\n                <CopyBox\n                    copyHorizontalPosition=\"toLeft\"\n                    copyVerticalPosition=\"toTop\"\n                    copyVerticalPositionMd=\"toTop\"\n                    copyMdWidth=\"fullWidth\"\n                    step1\n                    ontop\n                >\n                    <h3>Levels</h3>\n                    <p>\n                        The use of levels is very important both to create visual interest and to create the\n                        different landscapes. Machinery and automation are key to help create this in the show.\n                        Pride Rock spirals up from the stage in a circular motion using automation. The Elephant\n                        Graveyard also creates multiple levels on stage, where Scar runs his domain.\n                        </p>\n                </CopyBox>\n            </div>\n        )\n    }\n\n    displayMobileScene = (progress) => {\n        return (\n            <div className={`sticky2`}>\n                <Absolute className=\"no-padding-top\">\n                    <BgImage\n                        data={this.props.data}\n                        play={progress > 0}\n                        progress={progress}\n                        noTitleBar\n                        overrideDefaultImage={true}\n                    />\n\n                </Absolute>\n            </div>\n        )\n    }\n\n    displayMobileScene2 = (progress) => {\n        return (\n            <div className={`sticky2`}>\n                <Absolute className=\"no-padding-top\">\n                    <BgImage\n                        data={this.props.data}\n                        play={progress > 0}\n                        progress={progress}\n                        noTitleBar\n                    />\n\n                </Absolute>\n            </div>\n        )\n    }\n\n    displayScene = (progress) => {\n        return (\n            <div className={`sticky2`}>\n                <Timeline totalProgress={progress} paused>\n                    <Tween\n                        to={{\n                            scale: 1.1\n                        }}\n                        ease=\"Strong.easeOut\"\n                        totalProgress={progress}\n                        paused\n                    >\n                        <div className=\"animation__background\">\n                            <Tween\n                                to={{\n                                    backgroundImage: \"linear-gradient(transparent, transparent)\"\n                                }}\n                                ease=\"Strong.easeOut\"\n                                totalProgress={progress}\n                                paused\n                            >\n                                <div className=\"animation__background--overlay\"/>\n                            </Tween>\n                            <LazyLoad height={\"100%\"} once>\n                            <GatsbyImage image={this.props.data.bgStep1Sm.childImageSharp.gatsbyImageData}\n                                alt=\"\"\n                                title=\"\"\n                                className=\"image d-block d-sm-none\"\n                            />\n                            </LazyLoad>\n                            <LazyLoad height={\"100%\"} once>\n                            <GatsbyImage image={this.props.data.bgStep1Md.childImageSharp.gatsbyImageData}\n                                alt=\"\"\n                                title=\"\"\n                                className=\"image d-none d-sm-block d-lg-none\"\n                            />\n                            </LazyLoad>\n                            <LazyLoad height={\"100%\"} once>\n                            <GatsbyImage image={this.props.data.bgStep1Lg.childImageSharp.gatsbyImageData}\n                                alt=\"\"\n                                title=\"\"\n                                className=\"image d-none d-lg-block d-xl-none\"\n                            />\n                            </LazyLoad>\n                            <LazyLoad height={\"100%\"} once>\n                            <GatsbyImage image={this.props.data.bgStep1.childImageSharp.gatsbyImageData}\n                                alt=\"\"\n                                title=\"\"\n                                className=\"image d-none d-xl-block\"\n                            />\n                            </LazyLoad>\n                        </div>\n                    </Tween>\n\n                    <CopyBox\n                        copyHorizontalPosition=\"toLeft\"\n                        copyVerticalPosition=\"toTop\"\n                        copyVerticalPositionMd=\"toTop\"\n                        copyMdWidth=\"fullWidth\"\n                        step1\n                        ontop\n                    >\n                        <h3>Levels</h3>\n                        <p>\n                            The use of levels is very important both to create visual interest and to create the\n                            different landscapes. Machinery and automation are key to help create this in the show.\n                            Pride Rock spirals up from the stage in a circular motion using automation. The Elephant\n                            Graveyard also creates multiple levels on stage, where Scar runs his domain.\n                        </p>\n                    </CopyBox>\n\n                    <Tween\n                        to={{opacity: 1, scale: 1.1}}\n                        duration={3}\n                    >\n                        <div className=\"animation__background animation__background--step2\">\n                            <LazyLoad height={\"100%\"} once>\n                            <GatsbyImage image={this.props.data.bgStep2Sm.childImageSharp.gatsbyImageData}\n                                alt=\"\"\n                                title=\"\"\n                                className=\"image d-block d-sm-none\"\n                            />\n                            </LazyLoad>\n                            <LazyLoad height={\"100%\"} once>\n                            <GatsbyImage image={this.props.data.bgStep2Md.childImageSharp.gatsbyImageData}\n                                alt=\"\"\n                                title=\"\"\n                                className=\"image d-none d-sm-block d-lg-none\"\n                            />\n                            </LazyLoad>\n                            <LazyLoad height={\"100%\"} once>\n                            <GatsbyImage image={this.props.data.bgStep2Lg.childImageSharp.gatsbyImageData}\n                                alt=\"\"\n                                title=\"\"\n                                className=\"image d-none d-lg-block d-xl-none\"\n                            />\n                            </LazyLoad>\n                            <LazyLoad height={\"100%\"} once>\n                            <GatsbyImage image={this.props.data.bgStep2.childImageSharp.gatsbyImageData}\n                                alt=\"\"\n                                title=\"\"\n                                className=\"image d-none d-xl-block\"\n                            />\n                            </LazyLoad>\n                        </div>\n                    </Tween>\n                </Timeline>\n                <ButtonScroll story progress={progress}/>\n            </div>\n        )\n    }\n\n    render() {\n        let mql = window.matchMedia(media.sm).matches;\n        if (mql) {\n            return (\n                <Wrapper active={this.props.active} id=\"set4Wrapper\">\n                    <div id=\"set4Scene\" ref={set4Scene => this.set4Scene = set4Scene}/>\n                    <Controller>\n                        <Scene\n                            triggerElement=\"#set4Scene\"\n                            triggerHook=\"onLeave\"\n                            duration={2000}\n                            pin\n                        >\n                            {(progress) => this.displayScene(progress)}\n                        </Scene>\n                    </Controller>\n                </Wrapper>\n            )\n        } else {\n            return (\n                <>\n                    <Wrapper active={this.props.active} id=\"set4Wrapper\">\n                        <div id=\"set4Scene\"/>\n                        <Controller>\n                            <Scene\n                                triggerElement=\"#set4Scene\"\n                                triggerHook=\"onLeave\"\n                                duration={2000}\n                                pin\n                                enabled={false}\n                            >\n                                {(progress) => this.displayMobileHeading(progress)}\n                            </Scene>\n                        </Controller>\n                    </Wrapper>\n                    <Wrapper active={this.props.active} id=\"set4Wrapper2\">\n                        <div id=\"set4Scene2\" />\n                        <Controller>\n                            <Scene\n                                triggerElement=\"#set4Scene2\"\n                                triggerHook=\"onLeave\"\n                                duration={2000}\n                                pin\n                                enabled={false}\n                            >\n                                {(progress) => this.displayMobileScene(progress)}\n                            </Scene>\n                        </Controller>\n                    </Wrapper>\n                    <Wrapper active={this.props.active} id=\"set4Wrapper3\">\n                        <div id=\"set4Scene3\" />\n                        <Controller>\n                            <Scene\n                                triggerElement=\"#set4Scene3\"\n                                triggerHook=\"onLeave\"\n                                duration={2000}\n                                pin\n                                enabled={false}\n                            >\n                                {(progress) => this.displayMobileScene2(progress)}\n                            </Scene>\n                        </Controller>\n                    </Wrapper>\n                </>\n            )\n        }\n    }\n}\n\n\nexport default (props) => (\n    <StaticQuery\n        query={graphql`\n            query {\n                 bgStep1: file(relativePath: { eq: \"Interactive/Production/lke-im-prod-pt15-1-1920-min.jpg\" }) {\n                    childImageSharp {\n                        gatsbyImageData(width: 1920, quality: 100)\n                    }\n                }\n                \n                bgStep1Lg: file(relativePath: { eq: \"Interactive/Production/lke-im-prod-pt15-1-1440-min.jpg\" }) {\n                    childImageSharp {\n                        gatsbyImageData(width: 1440, quality: 100)\n                    }\n                }\n                \n                bgStep1Md: file(relativePath: { eq: \"Interactive/Production/lke-im-prod-pt15-1-991-min.jpg\" }) {\n                    childImageSharp {\n                        gatsbyImageData(width: 991, quality: 100)\n                    }\n                }\n                \n                bgStep1Sm: file(relativePath: { eq: \"Interactive/Production/lke-im-prod-pt15-1-576-min.jpg\" }) {\n                    childImageSharp {\n                        gatsbyImageData(width: 575, quality: 100)\n                    }\n                }\n                \n                bgStep2: file(relativePath: { eq: \"Interactive/Production/lke-im-prod-pt15-2-1920-min.jpg\" }) {\n                    childImageSharp {\n                        gatsbyImageData(width: 1920, quality: 100)\n                    }\n                }\n                \n                bgStep2Lg: file(relativePath: { eq: \"Interactive/Production/lke-im-prod-pt15-2-1440-min.jpg\" }) {\n                    childImageSharp {\n                        gatsbyImageData(width: 1440, quality: 100)\n                    }\n                }\n                \n                bgStep2Md: file(relativePath: { eq: \"Interactive/Production/lke-im-prod-pt15-2-991-min.jpg\" }) {\n                    childImageSharp {\n                        gatsbyImageData(width: 991, quality: 100)\n                    }\n                }\n                \n                bgStep2Sm: file(relativePath: { eq: \"Interactive/Production/lke-im-prod-pt15-2-576-min.jpg\" }) {\n                    childImageSharp {\n                        gatsbyImageData(width: 575, quality: 100)\n                    }\n                }\n            }\n\t\t`}\n        render={data => (\n            <Set4 data={data} active={props.active}\n                  title={props.title}/>\n        )}\n    />\n)\n","import React, {Component} from \"react\"\nimport styled, { css } from \"styled-components\"\nimport { media } from \"utils/Media\"\nimport LayoutInteractive from \"components/Layout/LayoutInteractive\"\nimport ParallaxImage from \"components/Interactive/ParallaxImage\"\nimport Menu from \"components/Interactive/Menu\"\nimport TitleBar from 'components/shared/TitleBar'\nimport ActTitle from \"components/Interactive/ActTitle\"\nimport Director1 from \"components/Interactive/Production/Director1\"\nimport Director2 from \"components/Interactive/Production/Director2\"\nimport Director3 from \"components/Interactive/Production/Director3\"\nimport Director4 from \"components/Interactive/Production/Director4\"\nimport Costumes1 from \"components/Interactive/Production/Costumes1\"\nimport Costumes2 from \"components/Interactive/Production/Costumes2\"\nimport Costumes3 from \"components/Interactive/Production/Costumes3\"\nimport Costumes4 from \"components/Interactive/Production/Costumes4\"\nimport Puppetry1 from \"components/Interactive/Production/Puppetry1\"\nimport Puppetry2 from \"components/Interactive/Production/Puppetry2\"\nimport Puppetry3 from \"components/Interactive/Production/Puppetry3\"\nimport Set1 from \"components/Interactive/Production/Set1\"\nimport Set2 from \"components/Interactive/Production/Set2\"\nimport Set3 from \"components/Interactive/Production/Set3\"\nimport Set4 from \"components/Interactive/Production/Set4\"\n\nimport DownloadButton from \"components/shared/DownloadButton\"\nimport IconDownload from 'images/icons/icon-download-white.svg'\n\nimport { graphql, StaticQuery, Link } from \"gatsby\"\nimport {isBrowser, isChrome} from \"react-device-detect\";\n\nconst MobileTitleBar = styled(TitleBar)`\n    display: block;\n    cursor: pointer;\n    \n    &.hidden {\n        display: none;\n    }\n    \n    h2 {\n       font-size: 1.75rem;\n       line-height: 120%;\n    }\n    \n    @media ${media.sm} {\n        display: none;\n        \n        &.hidden {\n            display: block;\n        }\n    }\n    \n    ${props => props.color === 'purple' && css`\n      color: ${props => props.theme.colors.white};\n    `}\n`\n\nconst scrollToElement = require('scroll-to-element');\n\nconst Query = () => (\n    <StaticQuery\n        query={graphql`\n            query {\n                image: file(relativePath: { eq: \"Interactive/Production/lke-im-prod-header-1920-min.jpg\" }) {\n                    childImageSharp {\n                        gatsbyImageData(width: 1920, quality: 100)\n                    }\n                }\n                \n                imageLg: file(relativePath: { eq: \"Interactive/Production/lke-im-prod-header-1440-min.jpg\" }) {\n                    childImageSharp {\n                        gatsbyImageData(width: 1440, quality: 100)\n                    }\n                }\n               \n                imageSm: file(relativePath: { eq: \"Interactive/Production/lke-im-prod-header-991-min.jpg\" }) {\n                    childImageSharp {\n                        gatsbyImageData(width: 991, quality: 100)\n                    }\n                }\n                \n                imageXs: file(relativePath: { eq: \"Interactive/Production/lke-im-prod-header-576-min.jpg\" }) {\n                    childImageSharp {\n                        gatsbyImageData(width: 575, quality: 100)\n                    }\n                }\n            }\n\t\t`}\n        render={data => (\n            <ProductionPage data={data}/>\n        )}\n    />\n)\n\nclass ProductionPage extends Component {\n    constructor(props) {\n        super(props);\n\n        this.state = {\n          scene: \"\",\n          displayContent: false,\n          imagesAreLoaded: [],\n          activeSceneName: 'Julie Taymor – Director\"',\n          activePageName: \"3/3 About The Production\",\n          sceneList: [\n            {\n              name: \"Julie Taymor – Director\",\n              slug: \"director1\",\n              uri: \"/interactive/about-the-production/julie-taymor\",\n              color: \"yellow\",\n              active: true,\n            },\n            {\n              name: \"Costumes and Masks\",\n              slug: \"costumes1\",\n              uri: \"/interactive/about-the-production/costumes-and-masks\",\n              color: \"orange\",\n              active: false,\n            },\n            {\n              name: \"Puppetry\",\n              slug: \"puppetry1\",\n              uri: \"/interactive/about-the-production/puppetry\",\n              color: \"purple\",\n              active: false,\n            },\n            {\n              name: \"Set\",\n              slug: \"set1\",\n              uri: \"/interactive/about-the-production/set\",\n              color: \"green\",\n              active: false,\n            },\n          ],\n          pageList: [\n            {\n              name: \"1/3 The Story\",\n              slug: \"/interactive/the-story\",\n              active: false,\n            },\n            {\n              name: \"2/3 Meet the Characters\",\n              slug: \"/interactive/meet-the-characters\",\n              active: false,\n            },\n            {\n              name: \"3/3 About The Production\",\n              slug: \"/interactive/about-the-production\",\n              active: true,\n            },\n              // {\n              //     name: \"4/4 Fascinating Facts\",\n              //     slug: \"/interactive/fascinating-facts\",\n              //     active: false,\n              // }\n          ],\n        }\n    }\n\n    toggleScene = (scene) => {\n        this.setState({scene}, () => {\n            scrollToElement(`#${scene}Scene`, {\n                duration: 300\n            })\n        })\n\n    }\n\n    imagesLoaded = (isLoaded) => {\n        let imagesAreLoaded = this.state.imagesAreLoaded\n        let displayContent = this.state.displayContent\n\n        imagesAreLoaded.push(isLoaded)\n\n        if (isBrowser) {\n            if (imagesAreLoaded.length === 1) {\n                displayContent = true\n            }\n        } else {\n            displayContent = true\n        }\n\n        this.setState({imagesAreLoaded, displayContent})\n    }\n\n    handleHideScene() {\n\n        this.setState({\n            scene: \"\"\n        })\n\n    }\n\n    render() {\n        return (\n            <LayoutInteractive slug=\"interactive/about-the-production\" title=\"About the production\">\n                <Menu\n                    sceneList={this.state.sceneList}\n                    activeSceneName={this.state.activeSceneName}\n                    pageList={this.state.pageList}\n                />\n                <ParallaxImage imagesAreLoaded={this.imagesLoaded} data={this.props.data} title=\"ABOUT THE<br/>PRODUCTION\"/>\n\n                {this.state.displayContent &&\n                <React.Fragment>\n\n                    <MobileTitleBar\n                        className={this.state.scene === 'director' ? 'hidden' : ''}\n                        color=\"yellow\"\n                        lessPadding\n                        onClick={() => this.toggleScene('director')}\n                    >\n                        <h2>Julie Taymor – Director</h2>\n                    </MobileTitleBar>\n\n                    <Director1 \n                        callback={(e) => this.handleHideScene()}\n                        active={this.state.scene === 'director'}\n                    />\n                    <Director2 active={this.state.scene === 'director'}/>\n                    <Director3 active={this.state.scene === 'director'}/>\n                    <Director4 active={this.state.scene === 'director'}/>\n\n                    <MobileTitleBar\n                        className={this.state.scene === 'costumes' ? 'hidden' : ''}\n                        color=\"orange\"\n                        lessPadding\n                        onClick={() => this.toggleScene('costumes')}\n                    >\n                        <h2>Costumes and Masks</h2>\n                    </MobileTitleBar>\n\n                    <Costumes1 \n                        callback={(e) => this.handleHideScene()}\n                        active={this.state.scene === 'costumes'}\n                    />\n                    <Costumes2 active={this.state.scene === 'costumes'}/>\n                    <Costumes3 active={this.state.scene === 'costumes'}/>\n                    <Costumes4 active={this.state.scene === 'costumes'}/>\n\n                    <MobileTitleBar\n                        className={this.state.scene === 'puppetry' ? 'hidden' : ''}\n                        color=\"purple\"\n                        lessPadding\n                        onClick={() => this.toggleScene('puppetry')}\n                    >\n                        <h2>Puppetry</h2>\n                    </MobileTitleBar>\n\n                    <Puppetry1 \n                        callback={(e) => this.handleHideScene()}\n                        active={this.state.scene === 'puppetry'}\n                    />\n                    <Puppetry2 active={this.state.scene === 'puppetry'}/>\n                    <Puppetry3 active={this.state.scene === 'puppetry'}/>\n\n                    <MobileTitleBar\n                        className={this.state.scene === 'set' ? 'hidden' : ''}\n                        color=\"green\"\n                        lessPadding\n                        onClick={() => this.toggleScene('set')}\n                    >\n                        <h2>Set</h2>\n                    </MobileTitleBar>\n\n                    <Set1 \n                        callback={(e) => this.handleHideScene()}\n                        active={this.state.scene === 'set'}\n                    />\n                    <Set2 active={this.state.scene === 'set'}/>\n                    <Set3 active={this.state.scene === 'set'}/>\n                    <Set4 active={this.state.scene === 'set'}/>\n\n                </React.Fragment>\n                }\n                <DownloadButton className=\"mx-auto mb-4 mt-5\" download target=\"_blank\" href=\"/pdfs/Disney_The-Lion-King_Production_Notes.pdf\">Download&nbsp;PDF <img src={IconDownload} alt=\"\" /></DownloadButton>\n            </LayoutInteractive>\n        )\n    }\n}\n\nexport default Query","export default function _assertThisInitialized(self) {\n  if (self === void 0) {\n    throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\");\n  }\n  return self;\n}"],"names":["Wrapper","styled","displayName","componentId","media","ActTitle","_Component","apply","arguments","_inheritsLoose","prototype","render","React","active","this","props","className","sticky","TitleBar","color","title","Component","Absolute","CopyBox","theme","colors","white","font","family","semiBold","copyOnMobile","css","step1","step2","ontop","copyVerticalPositionXs","copyVerticalPositionSm","copyVerticalPosition","copyVerticalPositionMd","noScroller","copyMdWidth","copyHorizontalPosition","copyHorizontalPositionMd","quote","yellow","quoteRed","quoteGreen","quoteOrange","defaultProps","CopyBoxWrapper","noBackground","HoldWrap","BgWrapper","BgImg","GatsbyImage","withConfig","HoldScene","LazyLoad","height","once","image","bgImageSm","alt","bgImageMd","bgImageLg","bgImageXl","text","dangerouslySetInnerHTML","__html","SwipeWrap","SwipeScene","notFullWidth","changeBg","textPosition","transparentBg","Relative","black","sizes","sm","StyledBgImage","BgImage","CopyBoxWrapperStyled","CopyBoxStyled","Director1","_this","_len","length","args","Array","_key","call","concat","displayScene","progress","Timeline","totalProgress","paused","Tween","ease","onClick","callback","absolute","data","play","noTitleBar","_this2","mql","window","matchMedia","matches","id","ref","director1Scene","Controller","Scene","triggerElement","triggerHook","duration","pin","enabled","StaticQuery","query","e","InfoBox","big","Director2","bgStep1Sm","childImageSharp","gatsbyImageData","bgStep1Md","bgStep1Lg","bgStep1","onTop","to","opacity","bgStep2Sm","bgStep2Md","bgStep2Lg","bgStep2","bgStep3Sm","bgStep3Md","bgStep3Lg","bgStep3","bgStep4Sm","bgStep4Md","bgStep4Lg","bgStep4","ButtonScroll","story","Director3","director3Scene","Director4","ButtonHold","target","director4HoldScene","darkBlue","Costumes1","displayMobileHeading","displayMobileScene","Costumes2","displayMobileCopyScene","displayMobileBgScene","costumes2Scene","costumes2Scene2","costumes2Scene3","Costumes3","displayMobile1","ButtonSwipe","costumes31Swipe","displayMobile2","overrideDefaultImage","costumes3Swipe","costumes3Scene","costumes3Scene1","Costumes4","costumes4HoldScene","Puppetry1","scale","backgroundImage","from","delay","puppetry1Scene","Puppetry2","puppetry2Swipe","puppetry2Scene","puppetry2Scene1","Puppetry3","puppetry3HoldScene","Set1","set1Scene","Set2","displayMobileScene2","set2Scene","Set3","set3Scene","Set4","set4Scene","MobileTitleBar","scrollToElement","require","ProductionPage","toggleScene","scene","setState","imagesLoaded","isLoaded","imagesAreLoaded","state","displayContent","push","isBrowser","activeSceneName","activePageName","sceneList","name","slug","uri","pageList","_proto","handleHideScene","LayoutInteractive","Menu","ParallaxImage","lessPadding","DownloadButton","download","href","src","IconDownload","_assertThisInitialized","self","ReferenceError"],"sourceRoot":""}