{"version":3,"file":"component---src-pages-beyond-the-story-inspiration-animated-feature-film-js-327918d9ce96b7347345.js","mappings":"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","sources":["webpack://gatsby-starter-default/./src/components/Education/AnimatedFeatureFilm/CarouselSection.js","webpack://gatsby-starter-default/./src/pages/beyond-the-story/inspiration/animated-feature-film.js"],"sourcesContent":["import React, {Component} from 'react';\nimport styled from 'styled-components'\nimport {media} from \"utils/Media\"\nimport Slider from 'react-slick'\nimport {graphql, StaticQuery} from \"gatsby\";\nimport {GatsbyImage, getImage} from \"gatsby-plugin-image\"\nimport \"slick-carousel/slick/slick.css\"\nimport \"slick-carousel/slick/slick-theme.css\"\nimport arrowRightXs from '../../../images/arrow-right-xs.svg'\nimport arrowRightMd from '../../../images/carousel-arrow-right.png'\n\nconst Section = styled.div`\n    margin: 3rem auto 5rem;\n    \n    @media ${media.xl} {\n        margin: 4rem auto 7rem;\n    }\n`\n\nconst PhotoSlider = styled(Slider)`\n    position: relative;\n    z-index: 2;\n    .slick-track {\n        display: flex;\n        align-items: center;\n        flex-wrap: nowrap;\n        justify-content: center;\n    }\n    \n    .slick-slide{\n        padding: 0;\n        transition: all 0.3s ease;\n        height: auto;\n        &.slick-current,\n        &.slick-center {\n          opacity: 1 !important;\n          \n        }\n        opacity: 0.2;\n        \n        &.slick-active {\n            //opacity: 0.2;\n        }\n        \n        &.slick-cloned {\n            //margin-left: -25%;\n        }\n        \n        .img {\n            //display: block;\n            //max-width: 100%;\n            //height: auto;\n        }\n    }\n    \n    .photo-wrapper {\n        position: relative;\n        \n        cursor: pointer;\n    }\n\n    \n    .slick-dots {\n        bottom: -25px;\n        z-index: 9;\n        \n        @media ${media.md} {\n            bottom: -35px;\n        } \n        \n        @media ${media.lg} {\n            bottom: -50px;\n        } \n    }\n    \n    .slick-dots li, .slick-dots li button {\n        width: 10px;\n        height: 10px;\n        \n        @media ${media.md} {\n            width: 12px;\n            height: 12px;\n        }\n        \n        @media ${media.lg} {\n            width: 20px;\n            height: 20px;\n        }\n    }\n    \n    .slick-dots li button:before {\n        color: ${props => props.theme.colors.turquoise2};\n        opacity: 1;\n        font-size: 10px;\n        \n        @media ${media.md} {\n            font-size: 12px;\n        }\n        \n        @media ${media.lg} {\n            font-size: 20px;\n        }\n    }\n    \n    .slick-dots li.slick-active button:before {\n        color: transparent;\n        border: 3px solid #63DBE7;\n        border-radius: 5px;\n        top: 4px;\n        left: 5px;\n        width: 10px;\n        height: 10px;\n        \n        @media ${media.md} {\n            top: 3px;\n            border-radius: 6px;\n            width: 12px;\n            height: 12px;\n        }\n        \n        @media ${media.lg} {\n            left: 0;\n            top: -1px;\n            border-radius: 10px;\n            width: 20px;\n            height: 20px;\n        }\n    }\n    .slick-prev, .slick-next {\n        width: 16px;\n        height: 32px;\n        bottom: -50px;\n        top: initial;\n        z-index: 10;\n        \n        @media ${media.md} {\n            width: 50px;\n            height: 50px;\n            bottom: initial;\n            top: 50%;\n            transform: translateY(-50%);\n        }\n        \n        &:focus {\n            outline: 5px auto -webkit-focus-ring-color !important;\n        }\n    }\n    \n    .slick-next {\n        right: 20px;\n        \n        @media ${media.md} {\n            right: 50px;\n        }\n        \n        &:before {\n            content: '';\n            background: url(${arrowRightXs}) no-repeat center center;\n            background-size: contain;\n            position: absolute;\n            right: 0;\n            top: 0;\n            width: 100%;\n            height: 100%;\n            \n            @media ${media.md} {\n                background: url(${arrowRightMd}) no-repeat center center;\n                background-size: contain; \n            } \n        }\n    }\n    \n    .slick-prev {\n        left: 20px;\n        \n        @media ${media.md} {\n            left: 50px;\n        }\n        \n        &:before {\n            content: '';\n            transform: rotate(180deg);\n            background: url(${arrowRightXs}) no-repeat center center;\n            background-size: contain;\n            position: absolute;\n            left: 0;\n            top: 6px;\n            width: 100%;\n            height: 100%;\n            \n            @media ${media.md} {\n                background: url(${arrowRightMd}) no-repeat center center;\n                background-size: contain; \n            } \n        }\n    }\n    \n`\n\nconst Query = (props) => (\n    <StaticQuery\n        query={graphql`\n            query {\n                bgImage: file(relativePath: { eq: \"EducationPage/menu-bg.png\" }) {\n                    childImageSharp {\n                        gatsbyImageData(width: 1920, quality: 100, placeholder: NONE\n                            formats: [AUTO, WEBP])\n                    }\n                }\n               allAnimatedFeatureCarouselJson {\n                    edges {\n                        node {\n                            image {\n                                childImageSharp {\n                                    gatsbyImageData(width: 1040, quality: 100)\n                                }\n                            }\n                        }\n                    }\n                }\n            }\n\t\t`}\n        render={data => (\n            <CarouselSection\n                data={data}/>\n        )}\n    />\n)\n\nclass CarouselSection extends Component {\n    render() {\n        const settings = {\n            centerMode: true,\n            centerPadding: '20%',\n            slidesToShow: 1,\n            dots: true,\n            arrows: true,\n            swipe: true,\n            swipeToSlide: true,\n            responsive: [\n                {\n                    breakpoint: 991,\n                    settings: {\n                        centerPadding: '1px',\n                    }\n                },\n                {\n                    breakpoint: 768,\n                    settings: {\n                        centerPadding: '1px',\n                        centerMode: true,\n                    }\n                }\n            ]\n        }\n\n        const items = this.props.data.allAnimatedFeatureCarouselJson.edges;\n        const galleryItems = items.map(({node}, id) => {\n            return (\n                <div\n                    className=\"photo-wrapper\"\n                    key={id}\n                >\n                    <GatsbyImage placeholder=\"none\"\n                                 image={getImage(node.image)}\n                                 alt=\"\"\n                                 title=\"\"\n                                 className=\"img\"\n                    />\n                </div>\n            )\n\n        })\n        return (\n            <Section bgImage={this.props.bgImage}>\n                <PhotoSlider\n                    {...settings}\n                    className=\"PhotoGallery\"\n                    ref={slider => (this.carousel = slider)}\n                >\n                    {galleryItems}\n                </PhotoSlider>\n            </Section>\n\n        );\n    }\n}\n\nexport default Query;","import React, {Component} from \"react\"\nimport SEO from \"utils/Seo\"\nimport Layout from \"components/Layout/Layout\"\nimport MoreTopics from \"../../../components/Education/MoreTopics\"\nimport styled from \"styled-components\";\nimport HeadingSpecial from \"../../../components/shared/HeadingSpecial\";\nimport {Container} from \"reactstrap\";\nimport CarouselSection from \"../../../components/Education/AnimatedFeatureFilm/CarouselSection\";\nimport SnowFlakes from \"../../../components/shared/SnowFlakes\";\n\nconst pageSlug = \"animated-feature-film\"\nconst pageTitle = \"Animated Feature Film\"\nconst categorySlug = \"inspiration\"\nconst categoryTitle = \"Inspiration\"\n\nconst Header = styled.div`\n    position: relative;\n`\n\nconst Content = styled.div`\n    position: relative;\n    text-align: center;\n`\n\nclass AnimatedFeatureFilm extends Component {\n    constructor(props) {\n        super(props);\n\n        this.pageData = {\n            pageName: pageSlug,\n            siteName: \"frozeneducation\",\n            country: \"uk\",\n            region: \"emea\"\n        }\n    }\n\n    componentDidMount() {\n        // if (typeof window !== 'undefined' && typeof window.utag !== 'undefined') {\n        //     // Tealium\n        //     window.utag.view(this.pageData)\n        // }\n    }\n\n    render() {\n\n        return (\n            <Layout categorySlug={categorySlug}\n                    category={categoryTitle}\n                    currentPage={pageTitle}\n                    pageName={pageSlug}\n                    mainCategorySlug=\"beyond-the-story\"\n                    enrichmentHeader>\n                <SEO slug={pageSlug} title={pageTitle} description=\"\"/>\n                <SnowFlakes>\n                <Content className=\"enrichment\">\n                        <HeadingSpecial lines={false} headingTag=\"h1\"\n                                        className=\"py-4 py-md-5 font--bigger\"\n                                        title={pageTitle}/>\n                        <Container fluid={true}>\n                            <div className=\"narrow mx-auto\">\n                                <p className=\"font--regular mb-4\">After a long journey through story treatments, FROZEN\n                                    was finally commissioned by Walt Disney Animation Studios in 2011. The screenplay\n                                    was written by Jennifer Lee and directed by Chris Buck and Jennifer Lee.\n                                    Wife-and-husband writing team Kristen Anderson-Lopez and Robert Lopez wrote the\n                                    film’s seven songs. FROZEN premiered in 2013 to critical success, became the\n                                    highest-grossing film released in that year and highest-grossing animated film of\n                                    all time, and won the Academy® Award for Best Animated Feature and Best Original\n                                    Song (“Let It Go”).</p>\n                            </div>\n                        </Container>\n                        <CarouselSection/>\n                        <Container fluid={true}>\n                            <div className=\"narrow mx-auto\">\n                            <p className=\"font--regular mb-4\">FROZEN’s creative team created an original story –\n                                inspired by Hans Christian Andersen’s “The Snow Queen” – that captured the imagination\n                                of audiences worldwide. The idea of centring the story around two sisters came early on.\n                                Initially, however, the sisters were the story’s hero and villain. It wasn’t until\n                                Kristen and Robert began writing “Let It Go” that they discovered Elsa wasn’t a villain,\n                                but a woman afraid of her power and very misunderstood. From there, the story as we know\n                                it took shape. FROZEN is the first Disney animated feature to have a woman director, and\n                                Jennifer Lee is the first female director of a feature film that grossed more than $1\n                                billion. Also, FROZEN is the first Disney animated fairy tale that does not revolve\n                                around a romantic love story.</p>\n                            </div>\n                        </Container>\n                    <div className=\"py-5\">&nbsp;</div>\n                        <MoreTopics adaptation design/>\n                </Content>\n                </SnowFlakes>\n            </Layout>\n        )\n    }\n}\nexport default AnimatedFeatureFilm"],"names":["Section","styled","media","PhotoSlider","Slider","props","theme","colors","turquoise2","arrowRightXs","arrowRightMd","CarouselSection","render","galleryItems","this","data","allAnimatedFeatureCarouselJson","edges","map","id","node","className","key","G","placeholder","image","getImage","alt","title","bgImage","centerMode","centerPadding","slidesToShow","dots","arrows","swipe","swipeToSlide","responsive","breakpoint","settings","ref","slider","carousel","Component","StaticQuery","query","pageSlug","pageTitle","Content","AnimatedFeatureFilm","pageData","pageName","siteName","country","region","componentDidMount","Layout","categorySlug","category","currentPage","mainCategorySlug","enrichmentHeader","slug","description","SnowFlakes","HeadingSpecial","lines","headingTag","Container","fluid","MoreTopics","adaptation","design"],"sourceRoot":""}